diff --git a/.github/workflows/catalog-previews.yml b/.github/workflows/catalog-previews.yml
index 1822e7683b..9cf3a9c0b6 100644
--- a/.github/workflows/catalog-previews.yml
+++ b/.github/workflows/catalog-previews.yml
@@ -70,9 +70,13 @@ jobs:
         env:
           BASE_SHA: ${{ github.event.pull_request.base.sha }}
         run: |
-          # Find which blocks/components changed in this PR
+          # Find which blocks/components changed in this PR. The trailing slash
+          # in the grep matters: an item is a directory, and a file sitting
+          # directly under registry/components (CATALOG.md) does not match the
+          # sed, so without it the whole path survives and is passed to the
+          # renderer as if it were an item name.
           CHANGED_ITEMS=$(git diff --name-only --diff-filter=ACMR "$BASE_SHA"...HEAD -- registry/blocks/ registry/components/ \
-            | grep -E '^registry/(blocks|components)/' \
+            | grep -E '^registry/(blocks|components)/[^/]+/' \
             | sed 's|^registry/[^/]*/\([^/]*\)/.*|\1|' \
             | sort -u)
 
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 43b10f519c..22ebe40685 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -293,10 +293,13 @@ jobs:
           node-version: 22
       - uses: ./.github/actions/prepare-ffmpeg-bin
       - run: bash scripts/ci/install-workspace-dependencies.sh
-      - run: bun run test:scripts
       - run: bun run --filter '@hyperframes/{parsers,lint,studio-server}' build
       - run: bun run --cwd packages/core build
       - run: bun run --cwd packages/core build:hyperframes-runtime
+      # After the builds: the preview scripts drive the producer, which imports
+      # @hyperframes/core from dist, so running these first fails on a missing
+      # module rather than on anything the test is actually checking.
+      - run: bun run test:scripts
       - run: bun run --filter '!@hyperframes/producer' test
 
   producer-source-tests:
diff --git a/.oxlintrc.json b/.oxlintrc.json
index 40afcb08e5..6c6686f48f 100644
--- a/.oxlintrc.json
+++ b/.oxlintrc.json
@@ -11,6 +11,7 @@
     "node_modules/",
     "playground/",
     "packages/producer/tests/**/src/vendor/**",
+    "docs/public/catalog/",
     "registry/blocks/**/lib/*.iife.js",
     "chrome/"
   ],
@@ -34,6 +35,9 @@
     },
     {
       "files": ["docs/snippets/**/*.jsx", "docs/snippets/**/*.tsx"],
+      "globals": {
+        "CodeBlock": "readonly"
+      },
       "rules": {
         "react-hooks/rules-of-hooks": "error",
         "react-hooks/exhaustive-deps": "warn"
diff --git a/bun.lock b/bun.lock
index d0a60ce835..a42c529bcf 100644
--- a/bun.lock
+++ b/bun.lock
@@ -24,7 +24,7 @@
     },
     "packages/aws-lambda": {
       "name": "@hyperframes/aws-lambda",
-      "version": "0.7.78",
+      "version": "0.7.103",
       "dependencies": {
         "@aws-sdk/client-s3": "^3.700.0",
         "@aws-sdk/client-sfn": "^3.700.0",
@@ -57,7 +57,7 @@
     },
     "packages/cli": {
       "name": "@hyperframes/cli",
-      "version": "0.7.78",
+      "version": "0.7.103",
       "bin": {
         "hyperframes": "./bin/hyperframes.mjs",
       },
@@ -107,7 +107,7 @@
     },
     "packages/core": {
       "name": "@hyperframes/core",
-      "version": "0.7.78",
+      "version": "0.7.103",
       "dependencies": {
         "@chenglou/pretext": "^0.0.5",
         "@hyperframes/lint": "workspace:*",
@@ -132,7 +132,7 @@
     },
     "packages/engine": {
       "name": "@hyperframes/engine",
-      "version": "0.7.78",
+      "version": "0.7.103",
       "dependencies": {
         "@hono/node-server": "^2.0.5",
         "@hyperframes/core": "workspace:^",
@@ -151,7 +151,7 @@
     },
     "packages/gcp-cloud-run": {
       "name": "@hyperframes/gcp-cloud-run",
-      "version": "0.7.78",
+      "version": "0.7.103",
       "dependencies": {
         "@google-cloud/storage": "^7.14.0",
         "@google-cloud/workflows": "^4.2.0",
@@ -172,7 +172,7 @@
     },
     "packages/lint": {
       "name": "@hyperframes/lint",
-      "version": "0.7.78",
+      "version": "0.7.103",
       "dependencies": {
         "@hyperframes/parsers": "workspace:*",
         "htmlparser2": "^10.1.0",
@@ -190,7 +190,7 @@
     },
     "packages/parsers": {
       "name": "@hyperframes/parsers",
-      "version": "0.7.78",
+      "version": "0.7.103",
       "dependencies": {
         "@babel/parser": "^7.27.0",
         "acorn": "^8.17.0",
@@ -210,7 +210,7 @@
     },
     "packages/player": {
       "name": "@hyperframes/player",
-      "version": "0.7.78",
+      "version": "0.7.103",
       "dependencies": {
         "@hyperframes/core": "workspace:*",
       },
@@ -225,7 +225,7 @@
     },
     "packages/producer": {
       "name": "@hyperframes/producer",
-      "version": "0.7.78",
+      "version": "0.7.103",
       "dependencies": {
         "@fontsource/archivo-black": "^5.2.8",
         "@fontsource/eb-garamond": "^5.2.7",
@@ -270,7 +270,7 @@
     },
     "packages/sdk": {
       "name": "@hyperframes/sdk",
-      "version": "0.7.78",
+      "version": "0.7.103",
       "dependencies": {
         "@hyperframes/core": "workspace:*",
         "@hyperframes/parsers": "workspace:*",
@@ -300,7 +300,7 @@
     },
     "packages/shader-transitions": {
       "name": "@hyperframes/shader-transitions",
-      "version": "0.7.78",
+      "version": "0.7.103",
       "dependencies": {
         "html2canvas": "^1.4.1",
       },
@@ -312,7 +312,7 @@
     },
     "packages/studio": {
       "name": "@hyperframes/studio",
-      "version": "0.7.78",
+      "version": "0.7.103",
       "dependencies": {
         "@codemirror/autocomplete": "^6.20.1",
         "@codemirror/commands": "^6.10.3",
@@ -362,7 +362,7 @@
     },
     "packages/studio-server": {
       "name": "@hyperframes/studio-server",
-      "version": "0.7.78",
+      "version": "0.7.103",
       "dependencies": {
         "@hyperframes/core": "workspace:*",
         "@hyperframes/parsers": "workspace:*",
diff --git a/docs/catalog/blocks/app-showcase.mdx b/docs/catalog/blocks/app-showcase.mdx
index 7bac206143..5fa245c146 100644
--- a/docs/catalog/blocks/app-showcase.mdx
+++ b/docs/catalog/blocks/app-showcase.mdx
@@ -3,34 +3,979 @@ title: "App Showcase"
 description: "Fitness app product showcase with three floating smartphone screens"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/app-showcase.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/app-showcase.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/app-showcase.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="App Showcase preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add app-showcase
-```
+<InstallCommand command="npx hyperframes add app-showcase" />
 
 That writes one file: `compositions/app-showcase.html`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`app-showcase.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>app-showcase</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background-color: #0a0a0f;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      data-composition-id="app-showcase"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="5.5"
+    >
+      <!-- Background -->
+      <div class="s3-bg" id="s3Bg"></div>
+      <div class="s3-bg-glow" id="s3BgGlow"></div>
+
+      <!-- Stage wrapper for ambient scale -->
+      <div class="s3-stage" id="s3Stage">
+        <!-- ═══════════════════════════════════════
+           LEFT PHONE — Lifestyle / Motivational
+      ═══════════════════════════════════════ -->
+        <div class="s3-phone s3-phone-left" id="s3PhoneLeft">
+          <div class="s3-bezel">
+            <div class="s3-notch"></div>
+            <div class="s3-screen s3-screen-left">
+              <!-- Abstract exercise shapes -->
+              <div class="left-shapes">
+                <svg viewBox="0 0 304 400" xmlns="http://www.w3.org/2000/svg" fill="none">
+                  <!-- Abstract running figure — geometric -->
+                  <circle cx="152" cy="80" r="28" fill="#271f15" opacity="0.15" />
+                  <line
+                    x1="152"
+                    y1="108"
+                    x2="152"
+                    y2="200"
+                    stroke="#271f15"
+                    stroke-width="6"
+                    stroke-linecap="round"
+                    opacity="0.15"
+                  />
+                  <line
+                    x1="152"
+                    y1="145"
+                    x2="115"
+                    y2="175"
+                    stroke="#271f15"
+                    stroke-width="6"
+                    stroke-linecap="round"
+                    opacity="0.15"
+                  />
+                  <line
+                    x1="152"
+                    y1="145"
+                    x2="195"
+                    y2="165"
+                    stroke="#271f15"
+                    stroke-width="6"
+                    stroke-linecap="round"
+                    opacity="0.15"
+                  />
+                  <line
+                    x1="152"
+                    y1="200"
+                    x2="120"
+                    y2="260"
+                    stroke="#271f15"
+                    stroke-width="6"
+                    stroke-linecap="round"
+                    opacity="0.15"
+                  />
+                  <line
+                    x1="152"
+                    y1="200"
+                    x2="190"
+                    y2="255"
+                    stroke="#271f15"
+                    stroke-width="6"
+                    stroke-linecap="round"
+                    opacity="0.15"
+                  />
+                  <!-- Decorative arcs -->
+                  <path
+                    d="M60 300 Q152 240 244 300"
+                    stroke="#e4fa72"
+                    stroke-width="3"
+                    fill="none"
+                    opacity="0.5"
+                  />
+                  <path
+                    d="M40 330 Q152 260 264 330"
+                    stroke="#e4fa72"
+                    stroke-width="2"
+                    fill="none"
+                    opacity="0.3"
+                  />
+                </svg>
+              </div>
+              <div class="left-bottom">
+                <div class="left-tagline" id="s3Tagline">Unleash Full Potential</div>
+                <div class="left-cta">START NOW</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- ═══════════════════════════════════════
+           CENTER PHONE — Dashboard (Hero)
+      ═══════════════════════════════════════ -->
+        <div class="s3-phone s3-phone-center" id="s3PhoneCenter">
+          <div class="s3-bezel">
+            <div class="s3-notch"></div>
+            <div class="s3-screen s3-screen-center">
+              <!-- Header -->
+              <div class="center-header">
+                <div class="center-avatar">JM</div>
+                <div class="center-user-info">
+                  <div class="center-name">James Medrano</div>
+                  <div class="center-subtitle">Premium Member</div>
+                </div>
+                <div class="center-bell">
+                  <svg viewBox="0 0 20 20" width="20" height="20" fill="none">
+                    <path
+                      d="M10 2a5 5 0 00-5 5v3l-1.5 2.5h13L15 10V7a5 5 0 00-5-5z"
+                      stroke="#7c857c"
+                      stroke-width="1.4"
+                      stroke-linejoin="round"
+                    />
+                    <path
+                      d="M8 16.5a2 2 0 004 0"
+                      stroke="#7c857c"
+                      stroke-width="1.4"
+                      stroke-linecap="round"
+                    />
+                    <circle cx="14" cy="5" r="3" fill="#e4fa72" />
+                  </svg>
+                </div>
+              </div>
+
+              <!-- Weekly Goal -->
+              <div class="center-goal">
+                <div class="goal-label">Weekly Goal</div>
+                <div class="goal-ring-wrap">
+                  <svg class="goal-ring" viewBox="0 0 140 140">
+                    <circle
+                      class="ring-track"
+                      cx="70"
+                      cy="70"
+                      r="52"
+                      fill="none"
+                      stroke="#333"
+                      stroke-width="10"
+                    />
+                    <circle
+                      class="ring-fill"
+                      id="s3Ring"
+                      cx="70"
+                      cy="70"
+                      r="52"
+                      fill="none"
+                      stroke="#e4fa72"
+                      stroke-width="10"
+                      stroke-linecap="round"
+                      transform="rotate(-90 70 70)"
+                    />
+                  </svg>
+                  <div class="goal-count">
+                    <span class="goal-num">2</span>
+                    <span class="goal-sep">/</span>
+                    <span class="goal-den">3</span>
+                  </div>
+                </div>
+                <div class="goal-days">
+                  <span class="day done">M</span>
+                  <span class="day done">T</span>
+                  <span class="day">W</span>
+                  <span class="day">T</span>
+                  <span class="day">F</span>
+                  <span class="day">S</span>
+                  <span class="day">S</span>
+                </div>
+              </div>
+
+              <!-- Your Progress -->
+              <div class="center-progress">
+                <div class="progress-header">
+                  <span class="progress-title">Your Progress</span>
+                  <span class="progress-link">See all</span>
+                </div>
+                <div class="progress-bars">
+                  <div class="bar-row">
+                    <div class="bar-icon">
+                      <svg viewBox="0 0 16 16" width="14" height="14" fill="none">
+                        <path
+                          d="M8 2l1.5 3H13l-2.5 2 1 3L8 8.5 4.5 10l1-3L3 5h3.5z"
+                          fill="#e4fa72"
+                        />
+                      </svg>
+                    </div>
+                    <div class="bar-info">
+                      <span class="bar-name">Running</span>
+                      <span class="bar-val">5.2 km</span>
+                    </div>
+                    <div class="bar-track"><div class="bar-value bar-v1" id="s3Bar1"></div></div>
+                  </div>
+                  <div class="bar-row">
+                    <div class="bar-icon">
+                      <svg viewBox="0 0 16 16" width="14" height="14" fill="none">
+                        <circle cx="8" cy="8" r="5" stroke="#e4fa72" stroke-width="2" />
+                      </svg>
+                    </div>
+                    <div class="bar-info">
+                      <span class="bar-name">Cycling</span>
+                      <span class="bar-val">12.8 km</span>
+                    </div>
+                    <div class="bar-track"><div class="bar-value bar-v2" id="s3Bar2"></div></div>
+                  </div>
+                  <div class="bar-row">
+                    <div class="bar-icon">
+                      <svg viewBox="0 0 16 16" width="14" height="14" fill="none">
+                        <rect
+                          x="3"
+                          y="6"
+                          width="10"
+                          height="6"
+                          rx="1"
+                          stroke="#e4fa72"
+                          stroke-width="1.5"
+                        />
+                        <path d="M6 6V4a2 2 0 014 0v2" stroke="#e4fa72" stroke-width="1.5" />
+                      </svg>
+                    </div>
+                    <div class="bar-info">
+                      <span class="bar-name">Strength</span>
+                      <span class="bar-val">45 min</span>
+                    </div>
+                    <div class="bar-track"><div class="bar-value bar-v3" id="s3Bar3"></div></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- ═══════════════════════════════════════
+           RIGHT PHONE — Calories Data
+      ═══════════════════════════════════════ -->
+        <div class="s3-phone s3-phone-right" id="s3PhoneRight">
+          <div class="s3-bezel">
+            <div class="s3-notch"></div>
+            <div class="s3-screen s3-screen-right">
+              <div class="right-header">
+                <div class="right-title">Burned Calories</div>
+                <div class="right-value">740 <span class="right-unit">kcal</span></div>
+              </div>
+
+              <div class="right-graph-wrap">
+                <svg class="right-graph" viewBox="0 0 260 130" xmlns="http://www.w3.org/2000/svg">
+                  <!-- Grid lines -->
+                  <line
+                    x1="10"
+                    y1="25"
+                    x2="250"
+                    y2="25"
+                    stroke="#d9e0bc"
+                    stroke-width="0.5"
+                    opacity="0.5"
+                  />
+                  <line
+                    x1="10"
+                    y1="55"
+                    x2="250"
+                    y2="55"
+                    stroke="#d9e0bc"
+                    stroke-width="0.5"
+                    opacity="0.5"
+                  />
+                  <line
+                    x1="10"
+                    y1="85"
+                    x2="250"
+                    y2="85"
+                    stroke="#d9e0bc"
+                    stroke-width="0.5"
+                    opacity="0.5"
+                  />
+                  <line
+                    x1="10"
+                    y1="115"
+                    x2="250"
+                    y2="115"
+                    stroke="#d9e0bc"
+                    stroke-width="0.5"
+                    opacity="0.5"
+                  />
+                  <!-- Area fill -->
+                  <path
+                    class="graph-area"
+                    id="s3GraphArea"
+                    d="M10,105 L50,80 90,90 130,45 170,60 210,25 250,35 250,115 10,115 Z"
+                    fill="#e4fa72"
+                    opacity="0.15"
+                  />
+                  <!-- Line -->
+                  <polyline
+                    class="graph-line"
+                    id="s3GraphLine"
+                    points="10,105 50,80 90,90 130,45 170,60 210,25 250,35"
+                    fill="none"
+                    stroke="#e4fa72"
+                    stroke-width="2.5"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                  <!-- Dots -->
+                  <circle class="graph-dot" cx="10" cy="105" r="3.5" fill="#e4fa72" />
+                  <circle class="graph-dot" cx="50" cy="80" r="3.5" fill="#e4fa72" />
+                  <circle class="graph-dot" cx="90" cy="90" r="3.5" fill="#e4fa72" />
+                  <circle class="graph-dot" cx="130" cy="45" r="3.5" fill="#e4fa72" />
+                  <circle class="graph-dot" cx="170" cy="60" r="3.5" fill="#e4fa72" />
+                  <circle class="graph-dot" cx="210" cy="25" r="3.5" fill="#e4fa72" />
+                  <circle class="graph-dot" cx="250" cy="35" r="3.5" fill="#e4fa72" />
+                </svg>
+                <div class="right-labels">
+                  <span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span
+                  ><span>Sat</span><span>Sun</span>
+                </div>
+              </div>
+
+              <div class="right-stats">
+                <div class="stat-pill">
+                  <span class="stat-dot" style="background: #e4fa72"></span>
+                  <span class="stat-label">Active</span>
+                  <span class="stat-num">540</span>
+                </div>
+                <div class="stat-pill">
+                  <span class="stat-dot" style="background: #7c857c"></span>
+                  <span class="stat-label">Rest</span>
+                  <span class="stat-num">200</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <style>
+        @import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap");
+
+        [data-composition-id="app-showcase"] {
+          position: relative;
+          width: 1920px;
+          height: 1080px;
+          overflow: hidden;
+          font-family: "DM Sans", sans-serif;
+          color: #271f15;
+        }
+
+        /* ── Background ── */
+        [data-composition-id="app-showcase"] .s3-bg {
+          position: absolute;
+          inset: 0;
+          background: linear-gradient(160deg, #f1f2ec 0%, #e8ecda 40%, #f1f2ec 100%);
+        }
+        [data-composition-id="app-showcase"] .s3-bg-glow {
+          position: absolute;
+          width: 900px;
+          height: 900px;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          background: radial-gradient(circle, rgba(228, 250, 114, 0.18) 0%, transparent 70%);
+          border-radius: 50%;
+        }
+
+        /* ── Stage ── */
+        [data-composition-id="app-showcase"] .s3-stage {
+          position: absolute;
+          inset: 0;
+          transform-origin: center center;
+        }
+
+        /* ── Phones ── */
+        [data-composition-id="app-showcase"] .s3-phone {
+          position: absolute;
+          width: 320px;
+          height: 650px;
+          top: 215px;
+          left: 800px;
+        }
+        [data-composition-id="app-showcase"] .s3-phone-center {
+          z-index: 30;
+        }
+        [data-composition-id="app-showcase"] .s3-phone-left {
+          z-index: 20;
+        }
+        [data-composition-id="app-showcase"] .s3-phone-right {
+          z-index: 20;
+        }
+
+        /* ── Bezel ── */
+        [data-composition-id="app-showcase"] .s3-bezel {
+          width: 100%;
+          height: 100%;
+          border-radius: 42px;
+          background: #271f15;
+          padding: 8px;
+          box-shadow:
+            0 24px 64px rgba(39, 31, 21, 0.35),
+            0 4px 16px rgba(39, 31, 21, 0.15);
+          position: relative;
+          overflow: hidden;
+        }
+        [data-composition-id="app-showcase"] .s3-notch {
+          position: absolute;
+          top: 8px;
+          left: 50%;
+          transform: translateX(-50%);
+          width: 100px;
+          height: 26px;
+          background: #271f15;
+          border-radius: 0 0 18px 18px;
+          z-index: 5;
+        }
+
+        /* ── Screens ── */
+        [data-composition-id="app-showcase"] .s3-screen {
+          width: 100%;
+          height: 100%;
+          border-radius: 36px;
+          overflow: hidden;
+          position: relative;
+        }
+
+        /* Left screen */
+        [data-composition-id="app-showcase"] .s3-screen-left {
+          background: linear-gradient(160deg, #d9e0bc 0%, #c8d4a0 50%, #b8c78a 100%);
+          display: flex;
+          flex-direction: column;
+          justify-content: flex-end;
+        }
+        [data-composition-id="app-showcase"] .left-shapes {
+          position: absolute;
+          top: 40px;
+          left: 0;
+          width: 100%;
+          height: 400px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        [data-composition-id="app-showcase"] .left-shapes svg {
+          width: 200px;
+          height: 280px;
+        }
+        [data-composition-id="app-showcase"] .left-bottom {
+          padding: 0 28px 40px;
+          position: relative;
+          z-index: 2;
+        }
+        [data-composition-id="app-showcase"] .left-tagline {
+          font-size: 28px;
+          font-weight: 700;
+          color: #271f15;
+          line-height: 1.15;
+          margin-bottom: 16px;
+          letter-spacing: -0.02em;
+        }
+        [data-composition-id="app-showcase"] .left-cta {
+          display: inline-block;
+          background: #271f15;
+          color: #e4fa72;
+          font-size: 13px;
+          font-weight: 700;
+          letter-spacing: 0.08em;
+          padding: 10px 28px;
+          border-radius: 24px;
+        }
+
+        /* Center screen */
+        [data-composition-id="app-showcase"] .s3-screen-center {
+          background: #1a1a1a;
+          padding: 42px 22px 22px;
+          display: flex;
+          flex-direction: column;
+          gap: 18px;
+        }
+
+        [data-composition-id="app-showcase"] .center-header {
+          display: flex;
+          align-items: center;
+          gap: 10px;
+        }
+        [data-composition-id="app-showcase"] .center-avatar {
+          width: 40px;
+          height: 40px;
+          border-radius: 50%;
+          background: linear-gradient(135deg, #e4fa72, #d9e0bc);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 15px;
+          font-weight: 700;
+          color: #271f15;
+          flex-shrink: 0;
+        }
+        [data-composition-id="app-showcase"] .center-user-info {
+          flex: 1;
+        }
+        [data-composition-id="app-showcase"] .center-name {
+          font-size: 18px;
+          font-weight: 700;
+          color: #f1f2ec;
+          line-height: 1.2;
+        }
+        [data-composition-id="app-showcase"] .center-subtitle {
+          font-size: 12px;
+          font-weight: 400;
+          color: #7c857c;
+          margin-top: 1px;
+        }
+        [data-composition-id="app-showcase"] .center-bell {
+          flex-shrink: 0;
+        }
+
+        /* Weekly Goal */
+        [data-composition-id="app-showcase"] .center-goal {
+          background: #242424;
+          border-radius: 20px;
+          padding: 18px 16px;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          gap: 12px;
+        }
+        [data-composition-id="app-showcase"] .goal-label {
+          font-size: 15px;
+          font-weight: 500;
+          color: #7c857c;
+          align-self: flex-start;
+        }
+        [data-composition-id="app-showcase"] .goal-ring-wrap {
+          position: relative;
+          width: 130px;
+          height: 130px;
+        }
+        [data-composition-id="app-showcase"] .goal-ring {
+          width: 100%;
+          height: 100%;
+        }
+        [data-composition-id="app-showcase"] .ring-track {
+          opacity: 0.3;
+        }
+        [data-composition-id="app-showcase"] .goal-count {
+          position: absolute;
+          inset: 0;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          gap: 2px;
+        }
+        [data-composition-id="app-showcase"] .goal-num {
+          font-size: 36px;
+          font-weight: 700;
+          color: #e4fa72;
+        }
+        [data-composition-id="app-showcase"] .goal-sep {
+          font-size: 24px;
+          font-weight: 400;
+          color: #7c857c;
+          margin: 0 2px;
+        }
+        [data-composition-id="app-showcase"] .goal-den {
+          font-size: 24px;
+          font-weight: 400;
+          color: #7c857c;
+        }
+        [data-composition-id="app-showcase"] .goal-days {
+          display: flex;
+          gap: 8px;
+        }
+        [data-composition-id="app-showcase"] .day {
+          width: 28px;
+          height: 28px;
+          border-radius: 50%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 11px;
+          font-weight: 500;
+          color: #7c857c;
+          background: #1a1a1a;
+        }
+        [data-composition-id="app-showcase"] .day.done {
+          background: #e4fa72;
+          color: #271f15;
+          font-weight: 700;
+        }
+
+        /* Progress section */
+        [data-composition-id="app-showcase"] .center-progress {
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          gap: 12px;
+        }
+        [data-composition-id="app-showcase"] .progress-header {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+        [data-composition-id="app-showcase"] .progress-title {
+          font-size: 15px;
+          font-weight: 500;
+          color: #f1f2ec;
+        }
+        [data-composition-id="app-showcase"] .progress-link {
+          font-size: 12px;
+          font-weight: 400;
+          color: #e4fa72;
+        }
+        [data-composition-id="app-showcase"] .progress-bars {
+          display: flex;
+          flex-direction: column;
+          gap: 12px;
+        }
+        [data-composition-id="app-showcase"] .bar-row {
+          display: flex;
+          align-items: center;
+          gap: 10px;
+        }
+        [data-composition-id="app-showcase"] .bar-icon {
+          width: 28px;
+          height: 28px;
+          border-radius: 8px;
+          background: #2a2a2a;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          flex-shrink: 0;
+        }
+        [data-composition-id="app-showcase"] .bar-info {
+          width: 70px;
+          flex-shrink: 0;
+        }
+        [data-composition-id="app-showcase"] .bar-name {
+          display: block;
+          font-size: 12px;
+          font-weight: 500;
+          color: #f1f2ec;
+          line-height: 1.2;
+        }
+        [data-composition-id="app-showcase"] .bar-val {
+          display: block;
+          font-size: 10px;
+          font-weight: 400;
+          color: #7c857c;
+        }
+        [data-composition-id="app-showcase"] .bar-track {
+          flex: 1;
+          height: 8px;
+          background: #2a2a2a;
+          border-radius: 4px;
+          overflow: hidden;
+        }
+        [data-composition-id="app-showcase"] .bar-value {
+          height: 100%;
+          border-radius: 4px;
+          background: #e4fa72;
+          width: 0%;
+        }
+
+        /* Right screen */
+        [data-composition-id="app-showcase"] .s3-screen-right {
+          background: #f1f2ec;
+          padding: 42px 20px 24px;
+          display: flex;
+          flex-direction: column;
+          gap: 14px;
+        }
+        [data-composition-id="app-showcase"] .right-header {
+          display: flex;
+          flex-direction: column;
+          gap: 4px;
+        }
+        [data-composition-id="app-showcase"] .right-title {
+          font-size: 14px;
+          font-weight: 500;
+          color: #7c857c;
+        }
+        [data-composition-id="app-showcase"] .right-value {
+          font-size: 40px;
+          font-weight: 700;
+          color: #271f15;
+          line-height: 1;
+          letter-spacing: -0.03em;
+        }
+        [data-composition-id="app-showcase"] .right-unit {
+          font-size: 20px;
+          font-weight: 400;
+          color: #7c857c;
+        }
+
+        [data-composition-id="app-showcase"] .right-graph-wrap {
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          gap: 6px;
+        }
+        [data-composition-id="app-showcase"] .right-graph {
+          width: 100%;
+          flex: 1;
+        }
+        [data-composition-id="app-showcase"] .right-labels {
+          display: flex;
+          justify-content: space-between;
+          padding: 0 6px;
+          font-size: 10px;
+          font-weight: 400;
+          color: #7c857c;
+        }
+
+        [data-composition-id="app-showcase"] .right-stats {
+          display: flex;
+          gap: 12px;
+        }
+        [data-composition-id="app-showcase"] .stat-pill {
+          display: flex;
+          align-items: center;
+          gap: 6px;
+          background: #e8ecda;
+          border-radius: 20px;
+          padding: 8px 14px;
+        }
+        [data-composition-id="app-showcase"] .stat-dot {
+          width: 8px;
+          height: 8px;
+          border-radius: 50%;
+          flex-shrink: 0;
+        }
+        [data-composition-id="app-showcase"] .stat-label {
+          font-size: 12px;
+          font-weight: 400;
+          color: #7c857c;
+        }
+        [data-composition-id="app-showcase"] .stat-num {
+          font-size: 13px;
+          font-weight: 700;
+          color: #271f15;
+        }
+      </style>
 
-It runs for 5.5 seconds at 1920×1080. Paste this into your composition:
+      <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+      <script>
+        (function () {
+          var S = '[data-composition-id="app-showcase"] ';
+          window.__timelines = window.__timelines || {};
+          var tl = gsap.timeline({ paused: true });
 
-```html index.html
-<div
-  data-composition-id="app-showcase"
-  data-composition-src="compositions/app-showcase.html"
-  data-start="0"
-  data-duration="5.5"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+          // ── SVG setup ──
+          var graphLine = document.querySelector(S + "#s3GraphLine");
+          var graphLen = graphLine.getTotalLength();
+          gsap.set(graphLine, { strokeDasharray: graphLen, strokeDashoffset: graphLen });
+
+          var graphArea = document.querySelector(S + "#s3GraphArea");
+          gsap.set(graphArea, { opacity: 0 });
+
+          var graphDots = document.querySelectorAll(S + ".graph-dot");
+          gsap.set(graphDots, { opacity: 0, scale: 0 });
+
+          var CIRC = 2 * 3.14159265 * 52;
+          gsap.set(S + "#s3Ring", { strokeDasharray: CIRC, strokeDashoffset: CIRC });
+
+          // ── Initial states ──
+          gsap.set(S + ".s3-bg", { opacity: 0 });
+          gsap.set(S + ".s3-bg-glow", { opacity: 0 });
+          // Center phone: starts scaled down + hidden
+          gsap.set(S + "#s3PhoneCenter", { opacity: 0, scale: 0.85 });
+          // Side phones: start stacked behind center (same position), hidden
+          gsap.set(S + "#s3PhoneLeft", { opacity: 0, x: 0, rotation: 0 });
+          gsap.set(S + "#s3PhoneRight", { opacity: 0, x: 0, rotation: 0 });
+          gsap.set(S + ".bar-value", { width: "0%" });
+          gsap.set(S + "#s3Tagline", { opacity: 0, y: 20 });
+          gsap.set(S + ".left-cta", { opacity: 0, y: 12 });
+
+          // ════════════════════════════════════
+          // BUILD PHASE (0–2s)
+          // ════════════════════════════════════
+
+          // Background
+          tl.to(S + ".s3-bg", { opacity: 1, duration: 0.8, ease: "power1.out" }, 0);
+          tl.to(S + ".s3-bg-glow", { opacity: 1, duration: 1.2, ease: "power1.out" }, 0.2);
+
+          // Center phone — scales up first
+          tl.to(
+            S + "#s3PhoneCenter",
+            {
+              scale: 1,
+              opacity: 1,
+              duration: 0.7,
+              ease: "back.out(1.4)",
+            },
+            0.2,
+          );
+
+          // Side phones: opacity matches center (0.7s, back.out), fan starts at 0.1
+          tl.to(S + "#s3PhoneLeft", { opacity: 1, duration: 0.7, ease: "back.out(1.4)" }, 0.3);
+          tl.to(
+            S + "#s3PhoneLeft",
+            {
+              x: -340,
+              rotation: -12,
+              duration: 1.2,
+              ease: "expo.out",
+            },
+            0.3,
+          );
+
+          tl.to(S + "#s3PhoneRight", { opacity: 1, duration: 0.7, ease: "back.out(1.4)" }, 0.4);
+          tl.to(
+            S + "#s3PhoneRight",
+            {
+              x: 340,
+              rotation: 12,
+              duration: 1.2,
+              ease: "expo.out",
+            },
+            0.4,
+          );
+
+          // ════════════════════════════════════
+          // BREATHE PHASE (2–4s)
+          // ════════════════════════════════════
+
+          // Progress ring fills to 2/3
+          tl.to(
+            S + "#s3Ring",
+            {
+              strokeDashoffset: CIRC * (1 - 2 / 3),
+              duration: 1.2,
+              ease: "circ.out",
+            },
+            1.8,
+          );
+
+          // Activity bars stagger in
+          tl.to(S + "#s3Bar1", { width: "75%", duration: 0.8, ease: "power3.out" }, 2.1);
+          tl.to(S + "#s3Bar2", { width: "50%", duration: 0.8, ease: "power3.out" }, 2.3);
+          tl.to(S + "#s3Bar3", { width: "90%", duration: 0.8, ease: "power3.out" }, 2.5);
+
+          // Graph line draws on
+          tl.to(
+            graphLine,
+            {
+              strokeDashoffset: 0,
+              duration: 1.4,
+              ease: "sine.inOut",
+            },
+            2.0,
+          );
+
+          // Graph area fades in
+          tl.to(graphArea, { opacity: 0.15, duration: 0.8, ease: "power1.out" }, 2.6);
+
+          // Graph dots pop in
+          tl.to(
+            graphDots,
+            {
+              opacity: 1,
+              scale: 1,
+              duration: 0.3,
+              ease: "back.out(2)",
+              stagger: { each: 0.06, ease: "power2.in" },
+            },
+            3.0,
+          );
+
+          // Tagline and CTA on left phone
+          tl.to(
+            S + "#s3Tagline",
+            {
+              opacity: 1,
+              y: 0,
+              duration: 0.6,
+              ease: "power2.out",
+            },
+            2.2,
+          );
+          tl.to(
+            S + ".left-cta",
+            {
+              opacity: 1,
+              y: 0,
+              duration: 0.5,
+              ease: "power2.out",
+            },
+            2.5,
+          );
+
+          // Ambient slow scale push
+          tl.to(
+            S + "#s3Stage",
+            {
+              scale: 1.02,
+              duration: 3.5,
+              ease: "sine.inOut",
+            },
+            2.0,
+          );
+
+          // ════════════════════════════════════
+          // RESOLVE PHASE (4–5.5s)
+          // ════════════════════════════════════
+
+          // Subtle glow pulse on lime accent elements
+          tl.to(S + ".ring-fill", { opacity: 0.65, duration: 0.6, ease: "sine.inOut" }, 4.0);
+          tl.to(S + ".ring-fill", { opacity: 1, duration: 0.6, ease: "sine.inOut" }, 4.6);
+
+          tl.to(S + ".bar-value", { opacity: 0.7, duration: 0.6, ease: "sine.inOut" }, 4.1);
+          tl.to(S + ".bar-value", { opacity: 1, duration: 0.6, ease: "sine.inOut" }, 4.7);
+
+          tl.to(graphLine, { opacity: 0.65, duration: 0.6, ease: "sine.inOut" }, 4.05);
+          tl.to(graphLine, { opacity: 1, duration: 0.6, ease: "sine.inOut" }, 4.65);
+
+          window.__timelines["app-showcase"] = tl;
+        })();
+      </script>
+    </div>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="app-showcase" data-composition-src="compositions/app-showcase.html" data-start="0" data-duration="5.5" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/apple-money-count.mdx b/docs/catalog/blocks/apple-money-count.mdx
index b4afdbe189..25b1f074d1 100644
--- a/docs/catalog/blocks/apple-money-count.mdx
+++ b/docs/catalog/blocks/apple-money-count.mdx
@@ -3,34 +3,352 @@ title: "Apple Money Count"
 description: "Apple-style finance counter that counts from $0 to $10,000, flashes green, and bursts money icons with sound."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/apple-money-count.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/apple-money-count.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/apple-money-count.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Apple Money Count preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add apple-money-count
-```
+<InstallCommand command="npx hyperframes add apple-money-count" />
 
 That writes `compositions/apple-money-count.html`, plus 1 supporting file under `assets/`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`apple-money-count.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #fdfefe);
+      }
+
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #fdfefe);
+        color: var(--fg, #111315);
+        font-family: var(
+          --font-display,
+          -apple-system,
+          BlinkMacSystemFont,
+          "Helvetica Neue",
+          Arial,
+          sans-serif
+        );
+      }
+
+      .green-flash {
+        position: absolute;
+        inset: 0;
+        z-index: 1;
+        background: var(--accent, #30d158);
+        opacity: 0;
+      }
+
+      .stage-content {
+        position: relative;
+        z-index: 5;
+        display: flex;
+        width: 100%;
+        height: 100%;
+        align-items: center;
+        justify-content: center;
+        padding: var(--space-3, 120px) var(--space-3, 160px);
+      }
+
+      .amount-wrap {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 1080px;
+        min-height: 260px;
+      }
+
+      .amount {
+        position: relative;
+        color: var(--fg, #111315);
+        font-size: 190px;
+        font-weight: 900;
+        line-height: 0.9;
+        letter-spacing: 0;
+        font-variant-numeric: tabular-nums;
+        text-align: center;
+        white-space: nowrap;
+        text-shadow:
+          0 3px 0 var(--bg, rgba(255, 255, 255, 0.58)),
+          0 18px 36px var(--fg, rgba(17, 19, 21, 0.14)),
+          0 42px 92px var(--fg, rgba(17, 19, 21, 0.1));
+        will-change: transform, color, opacity, text-shadow;
+      }
+
+      .money-burst {
+        position: absolute;
+        inset: 0;
+        z-index: 8;
+        pointer-events: none;
+      }
+
+      .money-icon {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        display: grid;
+        place-items: center;
+        opacity: 0;
+        filter: drop-shadow(0 20px 24px var(--brand, rgba(7, 84, 31, 0.2)));
+        will-change: transform, opacity, filter;
+      }
+
+      .money-icon.bill {
+        width: 96px;
+        height: 52px;
+        border-radius: var(--radius, 10px);
+        background: var(--accent, #30d158);
+        box-shadow:
+          inset 0 0 0 3px var(--brand, rgba(7, 84, 31, 0.2)),
+          inset 0 -10px 18px var(--brand, rgba(7, 84, 31, 0.1)),
+          0 16px 26px var(--brand, rgba(7, 84, 31, 0.2)),
+          0 34px 64px var(--brand, rgba(7, 84, 31, 0.16));
+      }
+
+      .money-icon.bill::before {
+        position: absolute;
+        inset: var(--space-1, 9px) var(--space-2, 16px);
+        border: 2px solid var(--border, rgba(7, 84, 31, 0.28));
+        border-radius: 999px;
+        content: "";
+      }
+
+      .money-icon.coin {
+        width: 64px;
+        height: 64px;
+        border-radius: 50%;
+        background: radial-gradient(
+          circle at 34% 30%,
+          var(--accent-2, #fff7a6) 0%,
+          var(--accent, #ffd54f) 40%,
+          var(--brand, #d9a514) 100%
+        );
+        box-shadow:
+          inset 0 0 0 4px var(--brand, rgba(111, 76, 0, 0.12)),
+          inset 0 -8px 14px var(--brand, rgba(111, 76, 0, 0.1)),
+          0 16px 30px var(--brand, rgba(111, 76, 0, 0.18)),
+          0 34px 58px var(--brand, rgba(111, 76, 0, 0.12));
+      }
+
+      .money-icon .mark {
+        position: relative;
+        z-index: 1;
+        color: var(--fg, #07541f);
+        font-size: 30px;
+        font-weight: 900;
+        line-height: 1;
+      }
+
+      .money-icon.coin .mark {
+        color: var(--fg, #6f4c00);
+        font-size: 28px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="apple-money-count"
+      data-root="true"
+      data-start="0"
+      data-duration="5"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="greenFlash" class="green-flash"></div>
+      <div class="stage-content">
+        <div class="amount-wrap">
+          <div id="amount" class="amount">$0</div>
+        </div>
+      </div>
+      <div id="moneyBurst" class="money-burst" data-layout-allow-overflow></div>
+      <audio
+        id="sfxTrack"
+        data-start="0"
+        data-duration="5"
+        data-track-index="9"
+        src="assets/sfx-production.wav"
+        data-volume="0.92"
+      ></audio>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      const amount = document.querySelector("#amount");
+      const moneyBurst = document.querySelector("#moneyBurst");
+      const countState = { value: 0 };
 
-It runs for 5 seconds at 1920×1080. Paste this into your composition:
+      function formatMoney(value) {
+        const bounded = Math.max(0, Math.min(10000, value));
+        const rounded = Math.round(bounded);
+        return "$" + rounded.toLocaleString("en-US");
+      }
 
-```html index.html
-<div
-  data-composition-id="apple-money-count"
-  data-composition-src="compositions/apple-money-count.html"
-  data-start="0"
-  data-duration="5"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+      function renderAmount(value) {
+        amount.textContent = formatMoney(value);
+      }
+
+      const moneyIcons = [];
+      const moneySpecs = [];
+
+      for (let i = 0; i < 62; i += 1) {
+        const icon = document.createElement("div");
+        const isCoin = i % 3 === 0;
+        icon.className = "money-icon " + (isCoin ? "coin" : "bill");
+        icon.innerHTML = '<span class="mark">$</span>';
+        moneyBurst.appendChild(icon);
+        moneyIcons.push(icon);
+
+        const angle = i * 2.399963229728653;
+        const ring = i % 5;
+        const radiusX = 260 + ring * 145 + (i % 7) * 12;
+        const radiusY = 160 + ring * 78 + (i % 6) * 12;
+        const offsetX = (i % 4) * 24 - 36;
+        const offsetY = (i % 5) * 18 - 36;
+        const x = Math.max(-865, Math.min(865, Math.cos(angle) * radiusX + offsetX));
+        const y = Math.max(-465, Math.min(465, Math.sin(angle * 1.13) * radiusY + offsetY));
+
+        moneySpecs.push({
+          x,
+          y,
+          delay: (i % 8) * 0.025,
+          duration: 0.74 + (i % 5) * 0.045,
+          fadeDelay: (i % 5) * 0.05,
+          rotation: ((i * 43) % 160) - 80,
+          scale: isCoin ? 0.72 + (i % 4) * 0.08 : 0.68 + (i % 5) * 0.07,
+        });
+      }
+
+      renderAmount(0);
+
+      const tl = gsap.timeline({
+        paused: true,
+        defaults: { ease: "power3.out" },
+      });
+
+      gsap.set(moneyIcons, {
+        x: 0,
+        y: 0,
+        xPercent: -50,
+        yPercent: -50,
+        opacity: 0,
+        scale: 0.18,
+        transformOrigin: "50% 50%",
+      });
+
+      tl.from(
+        "#amount",
+        {
+          y: 26,
+          opacity: 0,
+          scale: 0.985,
+          duration: 0.45,
+          ease: "power2.out",
+        },
+        0,
+      );
+
+      tl.to(
+        countState,
+        {
+          value: 10000,
+          duration: 3.16,
+          ease: "none",
+          onUpdate: () => renderAmount(countState.value),
+          onComplete: () => renderAmount(10000),
+        },
+        0,
+      );
+
+      tl.to(
+        "#amount",
+        {
+          color: "var(--accent, #30d158)",
+          textShadow:
+            "0 3px 0 var(--bg, rgba(255,255,255,0.52)), 0 18px 40px var(--accent, rgba(48,209,88,0.3)), 0 46px 96px var(--brand, rgba(7,84,31,0.2))",
+          duration: 0.18,
+        },
+        3.16,
+      );
+      tl.to("#amount", { scale: 1.06, duration: 0.16, ease: "back.out(2.2)" }, 3.16);
+      tl.to("#amount", { scale: 1, duration: 0.23, ease: "power2.out" }, 3.33);
+
+      tl.to("#greenFlash", { opacity: 0.34, duration: 0.08, ease: "none" }, 3.16);
+      tl.to("#greenFlash", { opacity: 0.22, duration: 0.76, ease: "none" }, 3.24);
+      tl.to("#greenFlash", { opacity: 0, duration: 0.16, ease: "power2.out" }, 4);
+
+      moneyIcons.forEach((icon, i) => {
+        const spec = moneySpecs[i];
+        tl.to(
+          icon,
+          {
+            x: spec.x,
+            y: spec.y,
+            rotation: spec.rotation,
+            scale: spec.scale,
+            opacity: 1,
+            duration: spec.duration,
+            ease: "power4.out",
+          },
+          3.28 + spec.delay,
+        );
+        tl.to(
+          icon,
+          {
+            y: spec.y + (spec.y < 0 ? -58 : 58),
+            scale: spec.scale * 0.54,
+            opacity: 0,
+            duration: 0.38,
+            ease: "power2.in",
+          },
+          4.18 + spec.fadeDelay,
+        );
+      });
+
+      tl.to("#amount", { opacity: 0, scale: 0.985, duration: 0.28, ease: "power2.in" }, 4.36);
+
+      window.__timelines["apple-money-count"] = tl;
+    </script>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="apple-money-count" data-composition-src="compositions/apple-money-count.html" data-start="0" data-duration="5" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/bar-chart-race.mdx b/docs/catalog/blocks/bar-chart-race.mdx
new file mode 100644
index 0000000000..0d0bcc7c13
--- /dev/null
+++ b/docs/catalog/blocks/bar-chart-race.mdx
@@ -0,0 +1,660 @@
+---
+title: "Bar Chart Race"
+description: "Ranked bars grow and overtake each other as a time series advances, with the axis rescaling as values climb and the accent handing over to whoever leads"
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/blocks/bar-chart-race.html"
+  compositionId="bar-chart-race"
+  compositionSrc="compositions/bar-chart-race.html"
+  variables={[{"id":"title","type":"string","label":"Title","default":"Streaming Subscribers by Service"},{"id":"subtitle","type":"string","label":"Subtitle","default":"Ranked by reported subscribers"},{"id":"periods","type":"string","label":"Period labels (comma separated)","default":"2019, 2020, 2021, 2022, 2023, 2024"},{"id":"series","type":"string","label":"Series (one per line: Name: v1, v2, ...)","default":"Northwind: 42, 58, 71, 96, 118, 131\nCobalt: 30, 46, 68, 92, 126, 168\nFerry: 55, 62, 66, 70, 74, 79\nMarlow: 18, 33, 52, 61, 88, 104\nAster: 25, 28, 44, 58, 63, 72\nPell: 12, 20, 39, 47, 55, 90\nQuill: 8, 11, 15, 24, 40, 66\nDunmore: 35, 37, 38, 40, 42, 44"},{"id":"barCount","type":"number","label":"Bars shown","default":6,"min":3,"max":12,"step":1},{"id":"periodDuration","type":"number","label":"Seconds per period","default":2,"min":0.4,"max":6,"step":0.1},{"id":"valuePrefix","type":"string","label":"Value prefix","default":"$"},{"id":"valueSuffix","type":"string","label":"Value suffix","default":"M"},{"id":"valueDecimals","type":"number","label":"Value decimals","default":0,"min":0,"max":3,"step":1},{"id":"accent","type":"color","label":"Leader accent","default":"#c8452d"}]}
+>
+
+```html bar-chart-race.html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Bar Chart Race</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background-color: #f5f3ef;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="bcr-root"
+      data-composition-id="bar-chart-race"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="12"
+      data-composition-variables='[
+        {"id":"title","type":"string","label":"Title","default":"Streaming Subscribers by Service"},
+        {"id":"subtitle","type":"string","label":"Subtitle","default":"Ranked by reported subscribers"},
+        {"id":"periods","type":"string","label":"Period labels (comma separated)","default":"2019, 2020, 2021, 2022, 2023, 2024"},
+        {"id":"series","type":"string","label":"Series (one per line: Name: v1, v2, ...)","default":"Northwind: 42, 58, 71, 96, 118, 131\nCobalt: 30, 46, 68, 92, 126, 168\nFerry: 55, 62, 66, 70, 74, 79\nMarlow: 18, 33, 52, 61, 88, 104\nAster: 25, 28, 44, 58, 63, 72\nPell: 12, 20, 39, 47, 55, 90\nQuill: 8, 11, 15, 24, 40, 66\nDunmore: 35, 37, 38, 40, 42, 44"},
+        {"id":"barCount","type":"number","label":"Bars shown","default":6,"min":3,"max":12,"step":1},
+        {"id":"periodDuration","type":"number","label":"Seconds per period","default":2,"min":0.4,"max":6,"step":0.1},
+        {"id":"valuePrefix","type":"string","label":"Value prefix","default":"$"},
+        {"id":"valueSuffix","type":"string","label":"Value suffix","default":"M"},
+        {"id":"valueDecimals","type":"number","label":"Value decimals","default":0,"min":0,"max":3,"step":1},
+        {"id":"accent","type":"color","label":"Leader accent","default":"#c8452d"}
+      ]'
+    >
+      <div id="bcr-stage" class="clip" data-start="0" data-duration="12" data-track-index="0">
+        <div id="bcr-bg"></div>
+
+        <div id="bcr-head">
+          <div id="bcr-head-left">
+            <h1 id="bcr-title">Streaming Subscribers by Service</h1>
+            <p id="bcr-subtitle">Ranked by reported subscribers</p>
+          </div>
+          <div id="bcr-head-right">
+            <span id="bcr-period-caption">Period</span>
+            <span id="bcr-period">2019</span>
+          </div>
+        </div>
+
+        <!-- Rows live here, one per series, positioned by rank. -->
+        <div id="bcr-plot"></div>
+
+        <!-- Axis is painted above the rows: the tick labels sliding left is the
+             visible evidence that the scale is rescaling as values climb. -->
+        <div id="bcr-axis"></div>
+
+        <p id="bcr-source">Placeholder data</p>
+      </div>
+
+      <style>
+        #bcr-root {
+          position: relative;
+          width: 1920px;
+          height: 1080px;
+          overflow: hidden;
+          font-family: Inter, sans-serif;
+          color: #1f1d1b;
+        }
+
+        #bcr-stage {
+          position: absolute;
+          inset: 0;
+        }
+
+        /* Scene fill goes on a full-bleed child, never the composition root. */
+        #bcr-bg {
+          position: absolute;
+          inset: 0;
+          background-color: #f5f3ef;
+        }
+
+        #bcr-head {
+          position: absolute;
+          top: 58px;
+          left: 96px;
+          width: 1728px;
+          display: flex;
+          align-items: flex-start;
+          justify-content: space-between;
+        }
+
+        #bcr-title {
+          font-size: 46px;
+          font-weight: 700;
+          letter-spacing: -0.015em;
+          line-height: 1.1;
+        }
+
+        #bcr-subtitle {
+          margin-top: 10px;
+          font-size: 19px;
+          font-weight: 400;
+          color: #6b6560;
+        }
+
+        #bcr-head-right {
+          display: flex;
+          flex-direction: column;
+          align-items: flex-end;
+        }
+
+        #bcr-period-caption {
+          font-size: 15px;
+          font-weight: 600;
+          letter-spacing: 0.18em;
+          text-transform: uppercase;
+          color: #6b6560;
+        }
+
+        #bcr-period {
+          margin-top: 4px;
+          font-size: 72px;
+          font-weight: 700;
+          line-height: 1;
+          font-variant-numeric: tabular-nums;
+          letter-spacing: -0.02em;
+        }
+
+        #bcr-plot {
+          position: absolute;
+          left: 0;
+          top: 236px;
+          width: 1920px;
+          height: 760px;
+          overflow: hidden;
+        }
+
+        .bcr-row {
+          position: absolute;
+          left: 0;
+          top: 0;
+          width: 1920px;
+        }
+
+        /* Rows are transparent so both bars of an overtake stay visible sliding
+           past each other; only the two TEXT blocks carry an opaque backing, so
+           the front row's label covers the one it crosses instead of tangling
+           with it. */
+        .bcr-name {
+          position: absolute;
+          left: 96px;
+          width: 272px;
+          top: 50%;
+          transform: translateY(-50%);
+          text-align: right;
+          font-size: 26px;
+          font-weight: 600;
+          line-height: 1.7;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          background-color: #f5f3ef;
+        }
+
+        .bcr-bar {
+          position: absolute;
+          left: 400px;
+          top: 50%;
+          transform: translateY(-50%);
+          border-radius: 3px;
+          background-color: #1f1d1b;
+        }
+
+        .bcr-value {
+          position: absolute;
+          left: 404px;
+          top: 50%;
+          padding: 0 12px;
+          font-size: 26px;
+          font-weight: 600;
+          line-height: 1.7;
+          font-variant-numeric: tabular-nums;
+          white-space: nowrap;
+          background-color: #f5f3ef;
+        }
+
+        #bcr-axis {
+          position: absolute;
+          inset: 0;
+          z-index: 5000;
+        }
+
+        .bcr-tick-line {
+          position: absolute;
+          top: 232px;
+          left: 0;
+          width: 1px;
+          height: 768px;
+          background-color: rgba(31, 29, 27, 0.11);
+        }
+
+        .bcr-tick-line.bcr-tick-zero {
+          background-color: rgba(31, 29, 27, 0.5);
+        }
+
+        .bcr-tick-label {
+          position: absolute;
+          top: 198px;
+          left: 0;
+          font-size: 17px;
+          font-weight: 500;
+          font-variant-numeric: tabular-nums;
+          color: #6b6560;
+          white-space: nowrap;
+        }
+
+        #bcr-source {
+          position: absolute;
+          left: 96px;
+          top: 1014px;
+          font-size: 16px;
+          color: #6b6560;
+        }
+      </style>
+
+      <script>
+        (function () {
+          "use strict";
+
+          // ---- variables -------------------------------------------------
+          // The declaration attribute is the single source of truth: when the
+          // runtime is absent (raw file open) we parse the same attribute.
+          function readVars() {
+            // Read the declaration off THIS block's own root, never
+            // document.documentElement: mounted as a sub-composition the block's
+            // <html> is discarded and documentElement is the HOST's, so a
+            // documentElement read returns the wrong element (or null) and the
+            // block renders with no series at all. Runtime / host / --variables
+            // values are layered on top as overrides, so the block does not
+            // depend on the runtime being injected before this script runs.
+            var out = {};
+            var root = document.getElementById("bcr-root");
+            try {
+              JSON.parse(root.getAttribute("data-composition-variables")).forEach(function (d) {
+                out[d.id] = d.default;
+              });
+            } catch (err) {
+              // Declaration unreadable; the per-variable literal fallbacks below
+              // still produce a renderable composition.
+            }
+            var hf = window.__hyperframes;
+            var overrides =
+              hf && typeof hf.getVariables === "function"
+                ? hf.getVariables()
+                : window.__hfVariables;
+            if (overrides && typeof overrides === "object") {
+              for (var key in overrides) {
+                if (overrides[key] !== undefined) out[key] = overrides[key];
+              }
+            }
+            return out;
+          }
+
+          function num(value, fallback, lo, hi) {
+            var n = typeof value === "number" ? value : Number.parseFloat(value);
+            if (!Number.isFinite(n)) n = fallback;
+            return Math.min(hi, Math.max(lo, n));
+          }
+
+          function str(value, fallback) {
+            return typeof value === "string" && value.length > 0 ? value : fallback;
+          }
+
+          var V = readVars();
+          var ACCENT = str(V.accent, "#c8452d");
+          var BAR_COLOR = "#1f1d1b";
+          var BAR_COUNT = Math.round(num(V.barCount, 6, 1, 24));
+          var PERIOD_DURATION = num(V.periodDuration, 2, 0.1, 30);
+          var DECIMALS = Math.round(num(V.valueDecimals, 0, 0, 6));
+          var PREFIX = typeof V.valuePrefix === "string" ? V.valuePrefix : "";
+          var SUFFIX = typeof V.valueSuffix === "string" ? V.valueSuffix : "";
+
+          // ---- data format ------------------------------------------------
+          // Wide table, one series per line: "Name: v1, v2, v3".
+          // `;` is accepted as a line separator so the whole table survives a
+          // single-line text input. Short rows hold their last value.
+          function parsePeriods(text) {
+            return String(text)
+              .split(",")
+              .map(function (s) {
+                return s.trim();
+              })
+              .filter(function (s) {
+                return s.length > 0;
+              });
+          }
+
+          function parseSeries(text, periodCount) {
+            var out = [];
+            var lines = String(text).split(/[\n;]+/);
+            for (var i = 0; i < lines.length; i++) {
+              var line = lines[i].trim();
+              if (!line) continue;
+              var split = line.indexOf(":");
+              if (split < 0) continue;
+              var label = line.slice(0, split).trim();
+              if (!label) continue;
+              var values = line
+                .slice(split + 1)
+                .split(",")
+                .map(function (s) {
+                  return Number.parseFloat(s.trim());
+                })
+                .filter(function (n) {
+                  return Number.isFinite(n);
+                });
+              if (values.length === 0) continue;
+              while (values.length < periodCount) values.push(values[values.length - 1]);
+              out.push({ label: label, values: values.slice(0, periodCount) });
+            }
+            return out;
+          }
+
+          var PERIODS = parsePeriods(str(V.periods, "2019, 2020, 2021, 2022, 2023, 2024"));
+          if (PERIODS.length === 0) PERIODS = ["1"];
+          var SERIES = parseSeries(str(V.series, ""), PERIODS.length);
+          var T = PERIODS.length;
+          var N = SERIES.length;
+
+          // ---- closed-form state ------------------------------------------
+          // k = 10 interpolated keyframes per period (Bostock's number). Rank is
+          // computed at each keyframe from the interpolated value and baked once;
+          // a bar's on-screen row is then solved FROM rank, so two bars can never
+          // cross without swapping. Everything below is a pure function of t.
+          var K = 10;
+          var KF_DURATION = PERIOD_DURATION / K;
+          var KF_COUNT = T > 1 ? (T - 1) * K + 1 : 1;
+          var RACE_SECONDS = T > 1 ? (T - 1) * PERIOD_DURATION : 0;
+
+          function clamp(v, lo, hi) {
+            return v < lo ? lo : v > hi ? hi : v;
+          }
+
+          function valueAt(t, series) {
+            if (T < 2) return series.values[0];
+            var u = t / PERIOD_DURATION;
+            var i = clamp(Math.floor(u), 0, T - 2);
+            var f = clamp(u - i, 0, 1);
+            return series.values[i] + (series.values[i + 1] - series.values[i]) * f;
+          }
+
+          // ranks[m][j] = integer rank of series j at keyframe m (0 = leader).
+          var RANKS = [];
+          for (var m = 0; m < KF_COUNT; m++) {
+            var tm = m * KF_DURATION;
+            var order = SERIES.map(function (s, j) {
+              return { j: j, v: valueAt(tm, s) };
+            });
+            // Descending by value; index breaks ties so the sort is total and
+            // therefore identical on every evaluation.
+            order.sort(function (a, b) {
+              return b.v - a.v || a.j - b.j;
+            });
+            var row = new Array(N);
+            for (var r = 0; r < order.length; r++) row[order[r].j] = r;
+            RANKS.push(row);
+          }
+
+          function smoothstep(x) {
+            return x * x * (3 - 2 * x);
+          }
+
+          // Continuous row position solved from the baked ranks. A rank change
+          // between two adjacent keyframes IS the swap, and it plays out over one
+          // keyframe interval (PERIOD_DURATION / 10) instead of snapping.
+          function rankPosAt(t, j) {
+            if (KF_COUNT < 2) return RANKS[0][j];
+            var m = t / KF_DURATION;
+            var m0 = clamp(Math.floor(m), 0, KF_COUNT - 2);
+            var e = smoothstep(clamp(m - m0, 0, 1));
+            var a = RANKS[m0][j];
+            var b = RANKS[m0 + 1][j];
+            return a + (b - a) * e;
+          }
+
+          // ---- formatting --------------------------------------------------
+          function formatValue(v) {
+            return (
+              PREFIX +
+              v.toLocaleString("en-US", {
+                minimumFractionDigits: DECIMALS,
+                maximumFractionDigits: DECIMALS,
+              }) +
+              SUFFIX
+            );
+          }
+
+          function hexToRgb(hex) {
+            var h = String(hex).trim().replace("#", "");
+            if (h.length === 3) h = h[0] + h[0] + h[1] + h[1] + h[2] + h[2];
+            var n = Number.parseInt(h, 16);
+            if (!Number.isFinite(n)) return [31, 29, 27];
+            return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+          }
+
+          // Accent is the only colour in the piece and it carries exactly one
+          // meaning: this bar currently leads. It is binary, not blended — a
+          // half-accent bar would assert "half leading", which is not a fact.
+          // It hands over at the instant the two values cross, which is also the
+          // instant the two bars are the same length, so the handover lands on
+          // the overtake instead of drifting near it. Flat fill, never a
+          // gradient: a gradient inside a bar makes the longest bar the palest
+          // exactly where the eye is comparing lengths.
+          function hexToCss(hex) {
+            var rgb = hexToRgb(hex);
+            return "rgb(" + rgb[0] + ", " + rgb[1] + ", " + rgb[2] + ")";
+          }
+
+          var BAR_FILL = hexToCss(BAR_COLOR);
+          var ACCENT_FILL = hexToCss(ACCENT);
+
+          function niceStep(x) {
+            var e = Math.pow(10, Math.floor(Math.log10(x)));
+            var f = x / e;
+            return e * (f <= 1 ? 1 : f <= 2 ? 2 : f <= 5 ? 5 : 10);
+          }
+
+          // ---- geometry ----------------------------------------------------
+          var TRACK_X = 400;
+          var TRACK_W = 1180;
+          var PLOT_H = 760;
+          var PITCH = PLOT_H / BAR_COUNT;
+          var BAR_H = Math.max(12, PITCH * 0.62);
+          var TICK_POOL = 12;
+
+          // ---- DOM ---------------------------------------------------------
+          var plot = document.getElementById("bcr-plot");
+          var axis = document.getElementById("bcr-axis");
+          var periodEl = document.getElementById("bcr-period");
+          document.getElementById("bcr-title").textContent = str(
+            V.title,
+            "Streaming Subscribers by Service",
+          );
+          document.getElementById("bcr-subtitle").textContent = str(
+            V.subtitle,
+            "Ranked by reported subscribers",
+          );
+
+          var rows = SERIES.map(function (s) {
+            var row = document.createElement("div");
+            row.className = "bcr-row";
+            row.style.height = PITCH + "px";
+
+            // Declared, not silenced: two rows mid-overtake genuinely occupy the
+            // same band for ~200ms. Readability is handled by the opaque chip on
+            // each label, so the front one is always legible.
+            var name = document.createElement("div");
+            name.className = "bcr-name";
+            name.setAttribute("data-layout-allow-overlap", "");
+            name.textContent = s.label;
+
+            var bar = document.createElement("div");
+            bar.className = "bcr-bar";
+            bar.style.height = BAR_H + "px";
+
+            var value = document.createElement("div");
+            value.className = "bcr-value";
+            value.setAttribute("data-layout-allow-overlap", "");
+
+            row.appendChild(name);
+            row.appendChild(bar);
+            row.appendChild(value);
+            plot.appendChild(row);
+            return { row: row, bar: bar, value: value };
+          });
+
+          var ticks = [];
+          for (var k = 0; k < TICK_POOL; k++) {
+            var line = document.createElement("div");
+            line.className = "bcr-tick-line" + (k === 0 ? " bcr-tick-zero" : "");
+            var label = document.createElement("div");
+            label.className = "bcr-tick-label";
+            axis.appendChild(line);
+            axis.appendChild(label);
+            ticks.push({ line: line, label: label });
+          }
+
+          // ---- render ------------------------------------------------------
+          function render(t) {
+            if (N === 0) return;
+
+            var values = SERIES.map(function (s) {
+              return valueAt(t, s);
+            });
+            // Paint order follows the CURRENT value, not the row position: the
+            // bar that has just edged ahead comes forward, so at the instant two
+            // bars are superimposed the frame shows the one that is overtaking
+            // (its bar and its label together) rather than the one it passed.
+            var byValue = values
+              .map(function (v, i) {
+                return i;
+              })
+              .sort(function (a, b) {
+                return values[b] - values[a] || a - b;
+              });
+            var zRank = new Array(values.length);
+            for (var q = 0; q < byValue.length; q++) zRank[byValue[q]] = q;
+            var leader = byValue[0];
+            var maxValue = values[leader];
+            // Headroom keeps the leader off the frame edge; the domain is a
+            // continuous function of t, so the axis glides instead of stepping.
+            var scaleMax = Math.max(maxValue * 1.06, 1e-6);
+            var step = niceStep(scaleMax / 4);
+
+            for (var i = 0; i < TICK_POOL; i++) {
+              var tv = i * step;
+              var visible = tv <= scaleMax;
+              var tx = TRACK_X + (tv / scaleMax) * TRACK_W;
+              ticks[i].line.style.transform = "translateX(" + tx.toFixed(2) + "px)";
+              ticks[i].line.style.opacity = visible ? "1" : "0";
+              ticks[i].label.style.transform =
+                "translateX(" + tx.toFixed(2) + "px) translateX(-50%)";
+              ticks[i].label.style.opacity = visible ? "1" : "0";
+              ticks[i].label.textContent = visible ? formatValue(tv) : "";
+            }
+
+            for (var j = 0; j < rows.length; j++) {
+              var rankPos = rankPosAt(t, j);
+              var barW = (values[j] / scaleMax) * TRACK_W;
+              var el = rows[j];
+
+              el.row.style.transform = "translateY(" + (rankPos * PITCH).toFixed(2) + "px)";
+              // Fades out only as it slides past the last visible slot.
+              el.row.style.opacity = clamp(BAR_COUNT - rankPos, 0, 1).toFixed(3);
+              el.row.style.zIndex = String(1000 - zRank[j]);
+
+              el.bar.style.width = barW.toFixed(2) + "px";
+              el.bar.style.backgroundColor = j === leader ? ACCENT_FILL : BAR_FILL;
+
+              el.value.style.transform = "translate(" + barW.toFixed(2) + "px, -50%)";
+              el.value.textContent = formatValue(values[j]);
+            }
+
+            var pIndex = clamp(Math.floor(t / PERIOD_DURATION), 0, T - 1);
+            periodEl.textContent = PERIODS[pIndex];
+          }
+
+          // ---- timeline ----------------------------------------------------
+          // A property SETTER drives the per-frame work: tl.eventCallback("onUpdate")
+          // does not fire on tl.seek(), a tweened accessor does.
+          var driver = { _t: 0 };
+          Object.defineProperty(driver, "t", {
+            get: function () {
+              return this._t;
+            },
+            set: function (value) {
+              this._t = value;
+              render(value);
+            },
+          });
+
+          var tl = gsap.timeline({ paused: true });
+          if (RACE_SECONDS > 0) {
+            tl.to(driver, { t: RACE_SECONDS, duration: RACE_SECONDS, ease: "none" }, 0);
+          }
+          render(0);
+
+          window.__timelines = window.__timelines || {};
+          window.__timelines["bar-chart-race"] = tl;
+        })();
+      </script>
+    </div>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add bar-chart-race" />
+
+That writes one file: `compositions/bar-chart-race.html`.
+
+## Add it to your video
+
+It runs for 12 seconds at 1920×1080. Paste this into your composition:
+
+```html index.html
+<div
+  data-composition-id="bar-chart-race"
+  data-composition-src="compositions/bar-chart-race.html"
+  data-start="0"
+  data-duration="12"
+  data-track-index="1"
+  data-width="1920"
+  data-height="1080"
+></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.
+
+## Change how it looks
+
+Set these CSS variables on the block:
+
+- `title` — Title. Defaults to `Streaming Subscribers by Service`.
+- `subtitle` — Subtitle. Defaults to `Ranked by reported subscribers`.
+- `periods` — Period labels (comma separated). Defaults to `2019, 2020, 2021, 2022, 2023, 2024`.
+- `series` — Series (one per line: Name: v1, v2, ...). Defaults to `Northwind: 42, 58, 71, 96, 118, 131
+Cobalt: 30, 46, 68, 92, 126, 168
+Ferry: 55, 62, 66, 70, 74, 79
+Marlow: 18, 33, 52, 61, 88, 104
+Aster: 25, 28, 44, 58, 63, 72
+Pell: 12, 20, 39, 47, 55, 90
+Quill: 8, 11, 15, 24, 40, 66
+Dunmore: 35, 37, 38, 40, 42, 44`.
+- `barCount` — Bars shown. Defaults to `6`.
+- `periodDuration` — Seconds per period. Defaults to `2`.
+- `valuePrefix` — Value prefix. Defaults to `$`.
+- `valueSuffix` — Value suffix. Defaults to `M`.
+- `valueDecimals` — Value decimals. Defaults to `0`.
+- `accent` — Leader accent. Defaults to `#c8452d`.
+
+{/* hf:generated-footer */}
+
+Tagged `data` `chart` `statistics` `ranking`.
+
+## 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/beat-freeze-cut.mdx b/docs/catalog/blocks/beat-freeze-cut.mdx
index 609ca35eb4..0ba1e8e6b7 100644
--- a/docs/catalog/blocks/beat-freeze-cut.mdx
+++ b/docs/catalog/blocks/beat-freeze-cut.mdx
@@ -3,13 +3,13 @@ title: "Beat Freeze Cut"
 description: "A beat-driven speed ramp, freeze-frame hit, and hard-cut sequence for music-led promos and montages."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/beat-freeze-cut.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/beat-freeze-cut.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/beat-freeze-cut.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Beat Freeze Cut preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add beat-freeze-cut
-```
+<InstallCommand command="npx hyperframes add beat-freeze-cut" />
 
 That writes one file: `compositions/beat-freeze-cut.html`.
 
@@ -39,6 +39,894 @@ Set these CSS variables on the block:
 - `--bg-color` — Background. Defaults to `#0B0D10`.
 - `--accent-color` — Accent. Defaults to `#00E5C7`.
 
+## Source
+
+<Accordion title={`beat-freeze-cut.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Beat Freeze Cut</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@500;600;700;800;900&display=block"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: #0b0d10;
+      }
+
+      /*
+        EDIT / STUDIO PARAMS
+        ────────────────────
+        Studio color params (CSS custom properties on the root):
+          --bg-color       default #0B0D10
+          --accent-color   default #00E5C7
+
+        Numeric / string params (beat times, labels, intensity) are NOT in the
+        formal registry params schema today (only color keys are used by
+        existing blocks). Edit the CONFIG object in the script below instead.
+      */
+
+      #bfc-root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        --bg-color: #0b0d10;
+        --accent-color: #00e5c7;
+        --bfc-ink: #f4f6f8;
+        --bfc-muted: #a0a8b0;
+        --bfc-panel: #14181f;
+        --bfc-panel-2: #1a2029;
+        --bfc-line: rgba(255, 255, 255, 0.08);
+        font-family:
+          "Inter",
+          system-ui,
+          -apple-system,
+          sans-serif;
+        color: var(--bfc-ink);
+      }
+
+      #bfc-bg {
+        position: absolute;
+        inset: 0;
+        background:
+          radial-gradient(ellipse 80% 60% at 50% 40%, rgba(0, 229, 199, 0.07) 0%, transparent 55%),
+          radial-gradient(
+            ellipse 50% 40% at 80% 80%,
+            rgba(255, 255, 255, 0.03) 0%,
+            transparent 50%
+          ),
+          var(--bg-color);
+      }
+
+      #bfc-grid {
+        position: absolute;
+        inset: 0;
+        opacity: 0.22;
+        background-image:
+          linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
+          linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
+        background-size: 80px 80px;
+        mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 75%);
+        pointer-events: none;
+      }
+
+      #bfc-stage {
+        position: absolute;
+        inset: 0;
+        transform-origin: 50% 48%;
+        will-change: transform, filter;
+      }
+
+      #bfc-shot-a,
+      #bfc-shot-b {
+        position: absolute;
+        inset: 0;
+        overflow: hidden;
+      }
+
+      #bfc-shot-b {
+        visibility: hidden;
+        opacity: 0;
+      }
+
+      /* ── Shot A: single product card hero ── */
+      #bfc-a-crop {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transform-origin: 50% 50%;
+      }
+
+      #bfc-a-card {
+        position: relative;
+        width: 680px;
+        height: 720px;
+        border-radius: 36px;
+        background:
+          linear-gradient(160deg, rgba(255, 255, 255, 0.06) 0%, transparent 40%),
+          linear-gradient(180deg, var(--bfc-panel-2) 0%, var(--bfc-panel) 100%);
+        border: 1px solid var(--bfc-line);
+        box-shadow:
+          0 40px 120px rgba(0, 0, 0, 0.55),
+          0 0 0 1px rgba(0, 229, 199, 0.08),
+          inset 0 1px 0 rgba(255, 255, 255, 0.06);
+        overflow: hidden;
+        transform-origin: 50% 50%;
+      }
+
+      #bfc-a-card-glow {
+        position: absolute;
+        left: 50%;
+        top: 28%;
+        width: 420px;
+        height: 420px;
+        margin-left: -210px;
+        margin-top: -210px;
+        border-radius: 50%;
+        background: radial-gradient(circle, rgba(0, 229, 199, 0.28) 0%, transparent 68%);
+        opacity: 0.85;
+        pointer-events: none;
+      }
+
+      #bfc-a-wave {
+        position: absolute;
+        left: 64px;
+        right: 64px;
+        top: 120px;
+        height: 220px;
+      }
+
+      #bfc-a-wave svg {
+        width: 100%;
+        height: 100%;
+        display: block;
+      }
+
+      #bfc-a-wave-path {
+        fill: none;
+        stroke: var(--accent-color);
+        stroke-width: 4;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        opacity: 0.95;
+      }
+
+      #bfc-a-wave-fill {
+        fill: var(--accent-color);
+        opacity: 0.12;
+      }
+
+      #bfc-a-bars {
+        position: absolute;
+        left: 80px;
+        right: 80px;
+        bottom: 160px;
+        height: 96px;
+        display: flex;
+        align-items: flex-end;
+        gap: 10px;
+      }
+
+      .bfc-bar {
+        flex: 1;
+        border-radius: 6px 6px 2px 2px;
+        background: linear-gradient(180deg, var(--accent-color) 0%, rgba(0, 229, 199, 0.25) 100%);
+        transform-origin: 50% 100%;
+        height: 40%;
+      }
+
+      #bfc-a-meta {
+        position: absolute;
+        left: 64px;
+        right: 64px;
+        bottom: 56px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+
+      #bfc-a-kicker {
+        font-size: 18px;
+        font-weight: 600;
+        letter-spacing: 0.18em;
+        text-transform: uppercase;
+        color: var(--bfc-muted);
+      }
+
+      #bfc-a-pill {
+        font-size: 15px;
+        font-weight: 700;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+        color: #04120f;
+        background: var(--accent-color);
+        padding: 8px 16px;
+        border-radius: 999px;
+      }
+
+      /* ── Shot B: split layout, higher info density ── */
+      #bfc-b-layout {
+        position: absolute;
+        inset: 0;
+        display: grid;
+        grid-template-columns: 1.05fr 0.95fr;
+        gap: 48px;
+        padding: 100px 110px;
+        align-items: center;
+      }
+
+      #bfc-b-left {
+        display: flex;
+        flex-direction: column;
+        gap: 28px;
+        transform-origin: 0% 50%;
+      }
+
+      #bfc-b-eyebrow {
+        font-size: 20px;
+        font-weight: 700;
+        letter-spacing: 0.22em;
+        text-transform: uppercase;
+        color: var(--accent-color);
+      }
+
+      #bfc-b-title {
+        font-size: 128px;
+        font-weight: 900;
+        line-height: 0.92;
+        letter-spacing: -0.04em;
+        text-transform: uppercase;
+        color: var(--bfc-ink);
+      }
+
+      #bfc-b-sub {
+        font-size: 28px;
+        font-weight: 500;
+        color: var(--bfc-muted);
+        max-width: 520px;
+        line-height: 1.35;
+      }
+
+      #bfc-b-right {
+        display: flex;
+        flex-direction: column;
+        gap: 18px;
+      }
+
+      .bfc-b-card {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 24px;
+        padding: 28px 32px;
+        border-radius: 20px;
+        background: linear-gradient(135deg, var(--bfc-panel-2), var(--bfc-panel));
+        border: 1px solid var(--bfc-line);
+        box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
+      }
+
+      .bfc-b-card-label {
+        font-size: 18px;
+        font-weight: 600;
+        letter-spacing: 0.12em;
+        text-transform: uppercase;
+        color: var(--bfc-muted);
+      }
+
+      .bfc-b-card-value {
+        font-size: 42px;
+        font-weight: 800;
+        letter-spacing: -0.03em;
+        color: var(--bfc-ink);
+      }
+
+      .bfc-b-card-value.accent {
+        color: var(--accent-color);
+      }
+
+      #bfc-b-accent-bar {
+        width: 120px;
+        height: 6px;
+        border-radius: 999px;
+        background: var(--accent-color);
+        opacity: 0.9;
+      }
+
+      /* ── Intro / transient typography ── */
+      #bfc-intro {
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 72px;
+        display: flex;
+        justify-content: center;
+        pointer-events: none;
+        z-index: 20;
+        opacity: 0;
+        visibility: hidden;
+      }
+
+      #bfc-intro-label {
+        font-size: 18px;
+        font-weight: 700;
+        letter-spacing: 0.28em;
+        text-transform: uppercase;
+        color: var(--bfc-muted);
+        padding: 10px 18px;
+        border: 1px solid var(--bfc-line);
+        border-radius: 999px;
+        background: rgba(11, 13, 16, 0.55);
+        backdrop-filter: blur(8px);
+      }
+
+      #bfc-hit-type {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        pointer-events: none;
+        z-index: 30;
+        opacity: 0;
+        visibility: hidden;
+      }
+
+      #bfc-hit-type-text {
+        font-size: 160px;
+        font-weight: 900;
+        letter-spacing: -0.04em;
+        text-transform: uppercase;
+        color: var(--bfc-ink);
+        text-shadow:
+          0 0 40px rgba(0, 229, 199, 0.35),
+          0 8px 40px rgba(0, 0, 0, 0.55);
+        -webkit-text-stroke: 2px rgba(0, 0, 0, 0.35);
+        paint-order: stroke fill;
+      }
+
+      /* ── Freeze frame treatment ── */
+      #bfc-freeze {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        z-index: 25;
+        opacity: 0;
+        visibility: hidden;
+      }
+
+      #bfc-freeze-outline {
+        position: absolute;
+        inset: 48px;
+        border: 3px solid var(--accent-color);
+        border-radius: 8px;
+        box-shadow:
+          0 0 0 1px rgba(0, 229, 199, 0.25),
+          inset 0 0 0 1px rgba(0, 229, 199, 0.15),
+          0 0 48px rgba(0, 229, 199, 0.2);
+        opacity: 0;
+      }
+
+      #bfc-freeze-flash {
+        position: absolute;
+        inset: 0;
+        background: #ffffff;
+        opacity: 0;
+        mix-blend-mode: screen;
+      }
+
+      #bfc-freeze-contour {
+        position: absolute;
+        inset: 0;
+        background:
+          linear-gradient(90deg, transparent 0%, rgba(0, 229, 199, 0.08) 48%, transparent 52%),
+          radial-gradient(ellipse 40% 55% at 50% 48%, transparent 40%, rgba(0, 229, 199, 0.18) 100%);
+        opacity: 0;
+        mix-blend-mode: screen;
+      }
+
+      #bfc-freeze-badge {
+        position: absolute;
+        top: 80px;
+        right: 96px;
+        font-size: 16px;
+        font-weight: 800;
+        letter-spacing: 0.2em;
+        text-transform: uppercase;
+        color: #04120f;
+        background: var(--accent-color);
+        padding: 10px 18px;
+        border-radius: 6px;
+        opacity: 0;
+      }
+
+      /* ── Hard-cut connector (directional stretch / blur) ── */
+      #bfc-cut {
+        position: absolute;
+        inset: -8% -20%;
+        pointer-events: none;
+        z-index: 40;
+        opacity: 0;
+        visibility: hidden;
+        background: linear-gradient(
+          90deg,
+          transparent 0%,
+          rgba(0, 229, 199, 0.12) 35%,
+          rgba(255, 255, 255, 0.55) 50%,
+          rgba(0, 229, 199, 0.12) 65%,
+          transparent 100%
+        );
+        filter: blur(18px);
+        transform-origin: 50% 50%;
+      }
+
+      #bfc-vignette {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        z-index: 15;
+        background: radial-gradient(
+          ellipse 75% 70% at 50% 50%,
+          transparent 45%,
+          rgba(0, 0, 0, 0.55) 100%
+        );
+        opacity: 0.85;
+      }
+
+      #bfc-driver {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        opacity: 0;
+        pointer-events: none;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="bfc-root"
+      data-composition-id="beat-freeze-cut"
+      data-start="0"
+      data-duration="6"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="bfc-bg" aria-hidden="true"></div>
+      <div id="bfc-grid" aria-hidden="true"></div>
+
+      <div id="bfc-stage">
+        <!-- Shot A -->
+        <div id="bfc-shot-a">
+          <div id="bfc-a-crop" data-layout-allow-overflow>
+            <div id="bfc-a-card" data-layout-allow-overflow>
+              <div id="bfc-a-card-glow" aria-hidden="true"></div>
+              <div id="bfc-a-wave" aria-hidden="true">
+                <svg viewBox="0 0 592 220" preserveAspectRatio="none">
+                  <path
+                    id="bfc-a-wave-fill"
+                    d="M0,160 C40,150 60,90 100,100 C140,110 160,40 200,55 C240,70 260,150 300,140 C340,130 360,30 400,45 C440,60 460,130 500,120 C540,110 560,70 592,80 L592,220 L0,220 Z"
+                  />
+                  <path
+                    id="bfc-a-wave-path"
+                    d="M0,160 C40,150 60,90 100,100 C140,110 160,40 200,55 C240,70 260,150 300,140 C340,130 360,30 400,45 C440,60 460,130 500,120 C540,110 560,70 592,80"
+                  />
+                </svg>
+              </div>
+              <div id="bfc-a-bars" aria-hidden="true">
+                <div class="bfc-bar" id="bfc-bar-0" style="height: 34%"></div>
+                <div class="bfc-bar" id="bfc-bar-1" style="height: 58%"></div>
+                <div class="bfc-bar" id="bfc-bar-2" style="height: 42%"></div>
+                <div class="bfc-bar" id="bfc-bar-3" style="height: 78%"></div>
+                <div class="bfc-bar" id="bfc-bar-4" style="height: 52%"></div>
+                <div class="bfc-bar" id="bfc-bar-5" style="height: 88%"></div>
+                <div class="bfc-bar" id="bfc-bar-6" style="height: 46%"></div>
+                <div class="bfc-bar" id="bfc-bar-7" style="height: 64%"></div>
+                <div class="bfc-bar" id="bfc-bar-8" style="height: 36%"></div>
+                <div class="bfc-bar" id="bfc-bar-9" style="height: 72%"></div>
+                <div class="bfc-bar" id="bfc-bar-10" style="height: 48%"></div>
+                <div class="bfc-bar" id="bfc-bar-11" style="height: 92%"></div>
+              </div>
+              <div id="bfc-a-meta">
+                <span id="bfc-a-kicker">MUSIC PROMO</span>
+                <span id="bfc-a-pill">LIVE</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Shot B -->
+        <div id="bfc-shot-b">
+          <div id="bfc-b-layout">
+            <div id="bfc-b-left">
+              <div id="bfc-b-eyebrow">Next shot</div>
+              <div id="bfc-b-title">HARD<br />CUT</div>
+              <div id="bfc-b-accent-bar" aria-hidden="true"></div>
+              <div id="bfc-b-sub">
+                Beat-locked freeze, then cut. Built for music-led promos and montages.
+              </div>
+            </div>
+            <div id="bfc-b-right">
+              <div class="bfc-b-card" id="bfc-b-card-0">
+                <span class="bfc-b-card-label">Ramp</span>
+                <span class="bfc-b-card-value accent">1.35→2.2</span>
+              </div>
+              <div class="bfc-b-card" id="bfc-b-card-1">
+                <span class="bfc-b-card-label">Freeze</span>
+                <span class="bfc-b-card-value">0.8s</span>
+              </div>
+              <div class="bfc-b-card" id="bfc-b-card-2">
+                <span class="bfc-b-card-label">Cut</span>
+                <span class="bfc-b-card-value accent">3.00</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div id="bfc-vignette" aria-hidden="true"></div>
+
+      <div id="bfc-intro" aria-hidden="true">
+        <span id="bfc-intro-label">ON THE BEAT</span>
+      </div>
+
+      <div id="bfc-hit-type" aria-hidden="true">
+        <span id="bfc-hit-type-text">DROP</span>
+      </div>
+
+      <div id="bfc-freeze" aria-hidden="true">
+        <div id="bfc-freeze-flash"></div>
+        <div id="bfc-freeze-contour"></div>
+        <div id="bfc-freeze-outline"></div>
+        <div id="bfc-freeze-badge">FREEZE</div>
+      </div>
+
+      <div id="bfc-cut" aria-hidden="true"></div>
+
+      <div id="bfc-driver" class="clip" data-start="0" data-duration="6" data-track-index="0"></div>
+    </div>
+
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        // ── EDIT ME (not Studio params — see HTML comment) ──────────────
+        var CONFIG = {
+          primaryLabel: "DROP",
+          secondaryLabel: "ON THE BEAT",
+          beat1: 0.7,
+          beat2: 2.2,
+          freezeTime: 2.2,
+          intensity: 1.0,
+        };
+        // ────────────────────────────────────────────────────────────────
+
+        var DURATION = 6;
+        var intensity = Math.max(0.6, Math.min(1.4, Number(CONFIG.intensity) || 1));
+        var beat1 = Number(CONFIG.beat1) || 0.7;
+        var beat2 = Number(CONFIG.beat2) || 2.2;
+        var freezeAt = Number(CONFIG.freezeTime) || beat2;
+        var cutAt = 3.0;
+        var beat3 = 4.7;
+        var holdAt = 5.2;
+
+        var root = document.getElementById("bfc-root");
+        var stage = document.getElementById("bfc-stage");
+        var shotA = document.getElementById("bfc-shot-a");
+        var shotB = document.getElementById("bfc-shot-b");
+        var aCrop = document.getElementById("bfc-a-crop");
+        var aCard = document.getElementById("bfc-a-card");
+        var intro = document.getElementById("bfc-intro");
+        var introLabel = document.getElementById("bfc-intro-label");
+        var hitType = document.getElementById("bfc-hit-type");
+        var hitText = document.getElementById("bfc-hit-type-text");
+        var freeze = document.getElementById("bfc-freeze");
+        var freezeOutline = document.getElementById("bfc-freeze-outline");
+        var freezeFlash = document.getElementById("bfc-freeze-flash");
+        var freezeContour = document.getElementById("bfc-freeze-contour");
+        var freezeBadge = document.getElementById("bfc-freeze-badge");
+        var cutFx = document.getElementById("bfc-cut");
+        var bLeft = document.getElementById("bfc-b-left");
+        var bCards = [
+          document.getElementById("bfc-b-card-0"),
+          document.getElementById("bfc-b-card-1"),
+          document.getElementById("bfc-b-card-2"),
+        ];
+        var bars = [];
+        for (var bi = 0; bi < 12; bi++) {
+          bars.push(document.getElementById("bfc-bar-" + bi));
+        }
+
+        // Apply editable labels
+        if (hitText) hitText.textContent = CONFIG.primaryLabel || "DROP";
+        if (introLabel) introLabel.textContent = CONFIG.secondaryLabel || "ON THE BEAT";
+
+        // Accent color from CSS var → freeze/glow that use hardcoded rgba fallbacks
+        // stay coherent because stroke/fill already use var(--accent-color).
+
+        var tl = gsap.timeline({ paused: true });
+
+        // Initial states (no CSS transform conflicts on animated props)
+        gsap.set(stage, { scale: 1, x: 0, y: 0, filter: "blur(0px) brightness(1)" });
+        gsap.set(aCrop, { scale: 1, x: 0, y: 0 });
+        // Card visible at t=0 so catalog snapshots are never a black frame
+        gsap.set(aCard, { scale: 0.9, y: 20, opacity: 1 });
+        gsap.set(shotA, { opacity: 1, visibility: "visible" });
+        gsap.set(shotB, { opacity: 0, visibility: "hidden" });
+        gsap.set(intro, { opacity: 0, visibility: "hidden", y: -12 });
+        gsap.set(hitType, { opacity: 0, visibility: "hidden", scale: 1.15 });
+        gsap.set(freeze, { opacity: 0, visibility: "hidden" });
+        gsap.set([freezeOutline, freezeFlash, freezeContour, freezeBadge], { opacity: 0 });
+        gsap.set(cutFx, { opacity: 0, visibility: "hidden", scaleX: 0.4, x: -200 });
+        gsap.set(bLeft, { opacity: 0, x: -48 });
+        gsap.set(bCards, { opacity: 0, x: 40 });
+        gsap.set(bars, { scaleY: 0.55 });
+
+        // Full duration anchor (seek-safe length)
+        tl.to({}, { duration: DURATION, ease: "none" }, 0);
+
+        // ── 0.00–0.70: intro push-in + secondary type ──
+        tl.to(aCard, { scale: 1, y: 0, duration: 0.55, ease: "power3.out" }, 0);
+        tl.to(stage, { scale: 1 + 0.04 * intensity, duration: 0.7, ease: "power1.out" }, 0);
+        tl.to(bars, { scaleY: 1, duration: 0.5, ease: "power2.out", stagger: 0.02 }, 0.12);
+        tl.set(intro, { visibility: "visible" }, 0.12);
+        tl.to(intro, { opacity: 1, y: 0, duration: 0.28, ease: "power2.out" }, 0.12);
+        tl.to(intro, { opacity: 0, y: -8, duration: 0.18, ease: "power2.in" }, 0.52);
+        tl.set(intro, { visibility: "hidden", opacity: 0 }, 0.7);
+
+        // ── 0.70–1.35: beat 1 — hard reframe ──
+        tl.to(
+          aCrop,
+          {
+            scale: 1 + 0.18 * intensity,
+            x: -80 * intensity,
+            y: 24 * intensity,
+            duration: 0.22,
+            ease: "power4.out",
+          },
+          beat1,
+        );
+        tl.to(
+          stage,
+          {
+            scale: 1.08 * intensity > 1.2 ? 1.2 : 1 + 0.08 * intensity,
+            duration: 0.28,
+            ease: "expo.out",
+          },
+          beat1,
+        );
+        tl.to(
+          bars,
+          {
+            scaleY: function (i) {
+              // Deterministic bar pattern (no Math.random)
+              var pattern = [0.55, 1.15, 0.7, 1.35, 0.9, 1.4, 0.65, 1.1, 0.5, 1.25, 0.8, 1.45];
+              return pattern[i % pattern.length];
+            },
+            duration: 0.18,
+            ease: "power3.out",
+            stagger: 0.01,
+          },
+          beat1,
+        );
+
+        // ── 1.35–2.20: speed ramp into freeze ──
+        var rampStart = 1.35;
+        var rampDur = Math.max(0.2, freezeAt - rampStart);
+        tl.to(
+          aCrop,
+          {
+            scale: 1.28 * (0.9 + 0.1 * intensity),
+            x: 28 * intensity,
+            y: -12 * intensity,
+            duration: rampDur,
+            ease: "power3.in",
+          },
+          rampStart,
+        );
+        tl.to(
+          stage,
+          {
+            scale: 1.12,
+            filter: "blur(0px) brightness(1.08)",
+            duration: rampDur,
+            ease: "power2.in",
+          },
+          rampStart,
+        );
+        tl.to(
+          bars,
+          {
+            scaleY: 1.55,
+            duration: rampDur * 0.85,
+            ease: "power2.in",
+            stagger: { each: 0.012, from: "center" },
+          },
+          rampStart,
+        );
+
+        // ── 2.20–3.00: freeze hit (snap-on for seek/snapshot stability) ──
+        tl.set(freeze, { visibility: "visible", opacity: 1 }, freezeAt);
+        tl.set(freezeOutline, { opacity: 1 }, freezeAt);
+        tl.set(freezeContour, { opacity: 0.85 }, freezeAt);
+        tl.set(freezeBadge, { opacity: 1 }, freezeAt);
+        tl.set(hitType, { visibility: "visible", opacity: 1, scale: 1 }, freezeAt);
+        // Hold crop/stage where ramp ended
+        tl.to(aCrop, { duration: 0.01, ease: "none" }, freezeAt);
+        tl.to(
+          stage,
+          {
+            scale: 1.12,
+            filter: "blur(0px) brightness(1.15)",
+            duration: 0.05,
+            ease: "power4.out",
+          },
+          freezeAt,
+        );
+        // Single exposure flash (not a strobe sequence)
+        tl.fromTo(
+          freezeFlash,
+          { opacity: 0.55 * intensity },
+          { opacity: 0, duration: 0.28, ease: "power2.out" },
+          freezeAt,
+        );
+        tl.to(
+          hitType,
+          { opacity: 0, scale: 0.96, duration: 0.2, ease: "power2.in" },
+          freezeAt + 0.55,
+        );
+        tl.set(hitType, { visibility: "hidden", opacity: 0 }, freezeAt + 0.78);
+        // Soft settle of freeze dressing before cut
+        tl.to(
+          [freezeOutline, freezeContour, freezeBadge],
+          { opacity: 0.75, duration: 0.35, ease: "sine.out" },
+          freezeAt + 0.35,
+        );
+
+        // ── 3.00–3.35: hard cut connector ──
+        tl.set(cutFx, { visibility: "visible" }, cutAt);
+        tl.fromTo(
+          cutFx,
+          { opacity: 0, scaleX: 0.35, x: -280 },
+          {
+            opacity: 0.95,
+            scaleX: 1.6,
+            x: 120,
+            duration: 0.12,
+            ease: "power4.in",
+          },
+          cutAt,
+        );
+        tl.to(
+          stage,
+          {
+            filter: "blur(14px) brightness(1.35)",
+            scaleX: 1.35,
+            scaleY: 0.92,
+            duration: 0.12,
+            ease: "power3.in",
+          },
+          cutAt,
+        );
+        // Switch shots mid-cut — shot B content lands immediately (no black gap)
+        var switchAt = cutAt + 0.14;
+        tl.set(shotA, { opacity: 0, visibility: "hidden" }, switchAt);
+        tl.set(shotB, { opacity: 1, visibility: "visible" }, switchAt);
+        tl.set(hitType, { opacity: 0, visibility: "hidden" }, switchAt);
+        tl.set(
+          [freeze, freezeOutline, freezeFlash, freezeContour, freezeBadge],
+          { opacity: 0, visibility: "hidden" },
+          switchAt,
+        );
+        tl.set(freeze, { visibility: "hidden" }, switchAt);
+        // Shot B content visible on switch (offset settles after)
+        tl.set(bLeft, { opacity: 1, x: -24 }, switchAt);
+        tl.set(bCards, { opacity: 1, x: 24 }, switchAt);
+        tl.to(
+          stage,
+          {
+            filter: "blur(0px) brightness(1)",
+            scale: 1,
+            scaleX: 1,
+            scaleY: 1,
+            x: 0,
+            y: 0,
+            duration: 0.18,
+            ease: "power3.out",
+          },
+          switchAt,
+        );
+        tl.to(cutFx, { opacity: 0, x: 360, duration: 0.16, ease: "power2.out" }, cutAt + 0.16);
+        tl.set(cutFx, { visibility: "hidden", opacity: 0 }, cutAt + 0.34);
+
+        // ── after switch: shot B settle (no scale overlap with recover) ──
+        tl.to(bLeft, { x: 0, duration: 0.4, ease: "power3.out" }, switchAt);
+        tl.to(
+          bCards,
+          {
+            x: 0,
+            duration: 0.38,
+            ease: "power3.out",
+            stagger: 0.06,
+          },
+          switchAt + 0.04,
+        );
+        tl.to(stage, { scale: 1.02, duration: 1.17, ease: "sine.out" }, switchAt + 0.18);
+
+        // ── 4.70–5.20: final beat punch-in ──
+        tl.to(
+          stage,
+          {
+            scale: 1.08 * (0.9 + 0.1 * intensity),
+            duration: 0.14,
+            ease: "power4.out",
+          },
+          beat3,
+        );
+        tl.to(
+          bCards[1],
+          {
+            scale: 1.04,
+            duration: 0.12,
+            ease: "power3.out",
+          },
+          beat3,
+        );
+        tl.to(
+          bCards[1],
+          {
+            scale: 1,
+            duration: 0.22,
+            ease: "power2.out",
+          },
+          beat3 + 0.14,
+        );
+        // Micro freeze feel: brief hold of scale
+        tl.to(
+          stage,
+          { scale: 1.08 * (0.9 + 0.1 * intensity), duration: 0.2, ease: "none" },
+          beat3 + 0.14,
+        );
+
+        // ── 5.20–6.00: hold readable end card (≥0.8s) ──
+        tl.to(stage, { scale: 1.03, duration: 0.35, ease: "power2.out" }, holdAt);
+        // Ensure transient layers stay dead through end
+        tl.set(intro, { opacity: 0, visibility: "hidden" }, holdAt);
+        tl.set(hitType, { opacity: 0, visibility: "hidden" }, holdAt);
+        tl.set(freeze, { opacity: 0, visibility: "hidden" }, holdAt);
+        tl.set(cutFx, { opacity: 0, visibility: "hidden" }, holdAt);
+
+        window.__timelines["beat-freeze-cut"] = tl;
+      })();
+    </script>
+  </body>
+</html>
+```
+
+</Accordion>
+
 {/* hf:generated-footer */}
 
 Tagged `transition` `music` `beat-driven` `freeze-frame`.
diff --git a/docs/catalog/blocks/blue-sweater-intro-video.mdx b/docs/catalog/blocks/blue-sweater-intro-video.mdx
index b2493f6609..24ad43dcb8 100644
--- a/docs/catalog/blocks/blue-sweater-intro-video.mdx
+++ b/docs/catalog/blocks/blue-sweater-intro-video.mdx
@@ -3,34 +3,1555 @@ title: "Blue Sweater Intro Video"
 description: "Warm AI creator intro sequence that resolves into an X follow card for @_blue_sweater_."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/blue-sweater-intro-video.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/blue-sweater-intro-video.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/blue-sweater-intro-video.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Blue Sweater Intro Video preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add blue-sweater-intro-video
-```
+<InstallCommand command="npx hyperframes add blue-sweater-intro-video" />
 
 That writes `compositions/blue-sweater-intro-video.html`, plus 2 supporting files under `assets/` and `assets/sfx/`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`blue-sweater-intro-video.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Blue Sweater Intro Video</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      :root {
+        --bg: #f7f1ef;
+        --ink: #11110f;
+        --muted: #807d76;
+        --line: #dcd8cf;
+        --panel: #fbfaf6;
+        --claude: #c85f45;
+        --orange: #c86532;
+        --blue: #1486b8;
+        --panel-shadow: rgba(36, 31, 24, 0.08);
+      }
+
+      * {
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg);
+        color: var(--ink);
+        font-family: "Helvetica Neue", Arial, sans-serif;
+      }
+
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg);
+        isolation: isolate;
+      }
+
+      .clip,
+      .base {
+        position: absolute;
+        inset: 0;
+        overflow: hidden;
+      }
+
+      .clip {
+        opacity: 0;
+      }
+
+      .base {
+        background: var(--bg);
+        opacity: 1;
+      }
+
+      #burst {
+        z-index: 6;
+      }
+
+      #brand {
+        z-index: 5;
+      }
+
+      .scene-content {
+        position: relative;
+        display: flex;
+        width: 100%;
+        height: 100%;
+        padding: 126px 160px 128px;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .warm-block {
+        width: 720px;
+        height: 154px;
+        background: var(--orange);
+        border-radius: 6px;
+        clip-path: polygon(2% 4%, 98% 0, 100% 88%, 96% 98%, 4% 94%, 0 12%);
+      }
+
+      .title {
+        color: var(--ink);
+        font-size: 100px;
+        font-weight: 620;
+        line-height: 0.92;
+        letter-spacing: -0.055em;
+        white-space: nowrap;
+      }
+
+      .wordmark {
+        position: absolute;
+        left: 50%;
+        top: 50.5%;
+        transform: translate(-50%, -50%);
+        display: flex;
+        align-items: baseline;
+        gap: 19px;
+        color: var(--ink);
+        font-size: 88px;
+        font-weight: 620;
+        line-height: 0.9;
+        letter-spacing: -0.058em;
+        white-space: nowrap;
+      }
+
+      .brand-algrow {
+        font-weight: 650;
+      }
+
+      .brand-claude {
+        font-weight: 540;
+      }
+
+      .wordmark .brand-x {
+        font-family: Georgia, "Times New Roman", serif;
+        font-size: 0.84em;
+        font-weight: 400;
+        letter-spacing: -0.02em;
+      }
+
+      .cursor {
+        position: absolute;
+        left: 0;
+        top: 0;
+        z-index: 20;
+        width: 98px;
+        height: 120px;
+        opacity: 0;
+        filter: drop-shadow(0 10px 22px rgba(20, 134, 184, 0.24));
+        transform-origin: 13px 6px;
+      }
+
+      .cursor svg,
+      .claude-star svg {
+        display: block;
+        width: 100%;
+        height: 100%;
+      }
+
+      .claude-star {
+        position: absolute;
+        color: var(--claude);
+      }
+
+      .star-center {
+        left: 960px;
+        top: 530px;
+        width: 150px;
+        height: 150px;
+        transform: translate(-50%, -50%);
+      }
+
+      .star-brand {
+        left: 1084px;
+        top: 482px;
+        width: 24px;
+        height: 24px;
+      }
+
+      .star-panel {
+        left: 398px;
+        top: 272px;
+        width: 42px;
+        height: 42px;
+      }
+
+      .burst-block {
+        position: absolute;
+        background: var(--orange);
+        border-radius: 9px;
+        clip-path: polygon(
+          2% 8%,
+          14% 4%,
+          42% 5%,
+          63% 2%,
+          92% 5%,
+          99% 12%,
+          97% 88%,
+          86% 96%,
+          55% 94%,
+          28% 98%,
+          5% 92%,
+          0 18%
+        );
+        z-index: 4;
+        will-change: transform, opacity, filter;
+      }
+
+      .burst-a {
+        left: 735px;
+        top: 418px;
+        width: 162px;
+        height: 90px;
+      }
+
+      .burst-b {
+        left: 920px;
+        top: 414px;
+        width: 172px;
+        height: 92px;
+      }
+
+      .burst-c {
+        left: 1300px;
+        top: 420px;
+        width: 96px;
+        height: 92px;
+      }
+
+      .burst-d {
+        left: 790px;
+        top: 648px;
+        width: 172px;
+        height: 94px;
+      }
+
+      .burst-e {
+        left: 1042px;
+        top: 642px;
+        width: 90px;
+        height: 96px;
+      }
+
+      .burst-f {
+        left: 1110px;
+        top: 476px;
+        width: 64px;
+        height: 44px;
+        opacity: 0;
+      }
+
+      .selection-box {
+        position: absolute;
+        left: 380px;
+        top: 252px;
+        width: 550px;
+        height: 176px;
+        border: 1px solid rgba(198, 173, 144, 0.32);
+        background: rgba(228, 206, 181, 0.34);
+        opacity: 0;
+        transform-origin: 0 0;
+        z-index: 1;
+      }
+
+      .intro-remnants {
+        position: absolute;
+        inset: 0;
+        z-index: 2;
+        pointer-events: none;
+      }
+
+      .intro-remnant {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        color: var(--ink);
+        font-size: 100px;
+        font-weight: 620;
+        line-height: 0.92;
+        letter-spacing: -0.055em;
+        white-space: nowrap;
+        opacity: 0;
+        will-change: transform, opacity, filter;
+      }
+
+      .rem-a {
+        margin-left: -220px;
+        margin-top: -44px;
+      }
+
+      .rem-b {
+        margin-left: -42px;
+        margin-top: -42px;
+      }
+
+      .rem-c {
+        margin-left: 155px;
+        margin-top: -48px;
+      }
+
+      .rem-d {
+        margin-left: -82px;
+        margin-top: -4px;
+      }
+
+      .fragment-word {
+        position: absolute;
+        inset: 0;
+        z-index: 2;
+        pointer-events: none;
+      }
+
+      .frag {
+        position: absolute;
+        color: var(--ink);
+        font-size: 88px;
+        font-weight: 590;
+        line-height: 0.9;
+        letter-spacing: -0.055em;
+        opacity: 0;
+        white-space: nowrap;
+        will-change: transform, opacity, filter;
+      }
+
+      .frag-alg {
+        left: 649px;
+        top: 484px;
+      }
+
+      .frag-row {
+        left: 770px;
+        top: 495px;
+      }
+
+      .frag-x {
+        left: 932px;
+        top: 484px;
+      }
+
+      .frag-clau {
+        left: 1000px;
+        top: 480px;
+      }
+
+      .frag-de {
+        left: 1162px;
+        top: 480px;
+      }
+
+      .final-wordmark {
+        position: absolute;
+        inset: 0;
+        z-index: 3;
+        color: var(--ink);
+        opacity: 0;
+        pointer-events: none;
+        will-change: transform, opacity, filter;
+      }
+
+      .final-wordmark span {
+        position: absolute;
+        white-space: nowrap;
+        line-height: 0.9;
+      }
+
+      .final-algrow {
+        left: 690px;
+        top: 484px;
+        font-size: 88px;
+        font-weight: 590;
+        letter-spacing: -0.055em;
+        transform: scaleX(1);
+        transform-origin: 0 0;
+      }
+
+      .final-x {
+        left: 884px;
+        top: 484px;
+        font-size: 88px;
+        font-weight: 590;
+        letter-spacing: -0.055em;
+      }
+
+      .final-claude {
+        left: 955px;
+        top: 480px;
+        font-size: 88px;
+        font-weight: 590;
+        letter-spacing: -0.055em;
+        transform: scaleX(1);
+        transform-origin: 0 0;
+      }
+
+      .ui-content {
+        align-items: center;
+        justify-content: center;
+      }
+
+      .input-stack {
+        position: relative;
+        width: 1300px;
+        height: 332px;
+        transform-origin: 50% 50%;
+      }
+
+      .input-panel {
+        position: absolute;
+        left: 0;
+        width: 100%;
+        background: var(--panel);
+        border: 1px solid var(--line);
+        border-radius: 42px;
+        box-shadow: 0 18px 50px var(--panel-shadow);
+        opacity: 0;
+      }
+
+      .panel-empty {
+        top: -54px;
+        height: 306px;
+        opacity: 1;
+      }
+
+      .panel-full {
+        top: 0;
+        height: 318px;
+      }
+
+      .panel-thinking {
+        top: 7px;
+        height: 304px;
+      }
 
-It runs for 12 seconds at 1920×1080. Paste this into your composition:
+      .placeholder {
+        position: absolute;
+        left: 54px;
+        top: 48px;
+        color: var(--muted);
+        font-size: 34px;
+        line-height: 1.15;
+        letter-spacing: -0.03em;
+      }
 
-```html index.html
-<div
-  data-composition-id="blue-sweater-intro-video"
-  data-composition-src="compositions/blue-sweater-intro-video.html"
-  data-start="0"
-  data-duration="12"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+      .prompt-text {
+        position: absolute;
+        left: 54px;
+        right: 56px;
+        top: 42px;
+        bottom: 110px;
+        color: var(--ink);
+        font-size: 32px;
+        font-weight: 400;
+        line-height: 1.16;
+        letter-spacing: -0.035em;
+      }
+
+      .prompt-text span {
+        opacity: 0;
+      }
+
+      .panel-plus {
+        position: absolute;
+        left: 52px;
+        bottom: 44px;
+        width: 42px;
+        height: 42px;
+      }
+
+      .panel-plus::before,
+      .panel-plus::after {
+        content: "";
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        width: 34px;
+        height: 2px;
+        background: var(--ink);
+        transform: translate(-50%, -50%);
+      }
+
+      .panel-plus::after {
+        transform: translate(-50%, -50%) rotate(90deg);
+      }
+
+      .model {
+        position: absolute;
+        right: 126px;
+        bottom: 48px;
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        color: var(--ink);
+        font-size: 30px;
+        line-height: 1;
+        letter-spacing: -0.045em;
+      }
+
+      .panel-empty .model {
+        right: 78px;
+      }
+
+      .model .muted {
+        color: var(--muted);
+      }
+
+      .chevron {
+        width: 14px;
+        height: 14px;
+        border-right: 2px solid var(--muted);
+        border-bottom: 2px solid var(--muted);
+        transform: rotate(45deg) translateY(-5px);
+      }
+
+      .send-button {
+        position: absolute;
+        right: 42px;
+        bottom: 38px;
+        display: grid;
+        place-items: center;
+        width: 64px;
+        height: 64px;
+        border-radius: 17px;
+        background: var(--claude);
+        box-shadow: 0 10px 20px rgba(200, 95, 69, 0.18);
+        opacity: 0;
+        transform-origin: 50% 50%;
+      }
+
+      .panel-thinking .send-button {
+        opacity: 1;
+      }
+
+      .send-button svg {
+        width: 30px;
+        height: 30px;
+      }
+
+      .thinking-line {
+        position: absolute;
+        left: 54px;
+        top: 48px;
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        color: var(--ink);
+        font-size: 30px;
+        line-height: 1;
+        letter-spacing: -0.035em;
+        opacity: 0;
+      }
+
+      .thinking-line .claude-star {
+        position: relative;
+        left: auto;
+        top: auto;
+        width: 24px;
+        height: 24px;
+      }
+
+      .x-result {
+        position: absolute;
+        left: 54px;
+        top: 44px;
+        display: flex;
+        align-items: center;
+        gap: 18px;
+        color: var(--ink);
+        font-size: 30px;
+        line-height: 1;
+        letter-spacing: -0.035em;
+        opacity: 0;
+      }
+
+      .x-trigger {
+        display: grid;
+        place-items: center;
+        width: 48px;
+        height: 48px;
+        border-radius: 15px;
+        background: var(--ink);
+        color: var(--panel);
+        font-size: 29px;
+        font-weight: 680;
+        letter-spacing: -0.06em;
+        box-shadow: 0 14px 28px rgba(17, 17, 15, 0.18);
+      }
+
+      .social-card {
+        position: absolute;
+        left: 560px;
+        top: 178px;
+        width: 800px;
+        height: 430px;
+        border: 1px solid var(--line);
+        border-radius: 36px;
+        background: var(--panel);
+        box-shadow: 0 28px 70px rgba(36, 31, 24, 0.13);
+        opacity: 0;
+        overflow: hidden;
+        transform-origin: 50% 50%;
+      }
+
+      .social-card::before {
+        content: "";
+        position: absolute;
+        inset: 0 0 auto;
+        height: 150px;
+        background: linear-gradient(135deg, rgba(20, 134, 184, 0.14), rgba(200, 95, 69, 0.12));
+      }
+
+      .social-x {
+        position: absolute;
+        right: 28px;
+        top: 24px;
+        display: grid;
+        place-items: center;
+        width: 44px;
+        height: 44px;
+        border-radius: 14px;
+        background: var(--ink);
+        color: var(--panel);
+        font-size: 28px;
+        font-weight: 680;
+      }
+
+      .social-avatar {
+        position: absolute;
+        left: 52px;
+        top: 94px;
+        width: 118px;
+        height: 118px;
+        border: 5px solid var(--panel);
+        border-radius: 50%;
+        object-fit: cover;
+        object-position: 50% 50%;
+        box-shadow: 0 18px 34px rgba(20, 134, 184, 0.2);
+      }
+
+      .social-name {
+        position: absolute;
+        left: 52px;
+        top: 236px;
+        color: var(--ink);
+        font-size: 44px;
+        font-weight: 620;
+        line-height: 1;
+        letter-spacing: -0.055em;
+      }
+
+      .social-handle {
+        position: absolute;
+        left: 52px;
+        top: 288px;
+        color: var(--muted);
+        font-size: 26px;
+        line-height: 1;
+        letter-spacing: -0.025em;
+      }
+
+      .social-bio {
+        position: absolute;
+        left: 52px;
+        right: 52px;
+        top: 334px;
+        color: var(--ink);
+        font-size: 25px;
+        line-height: 1.16;
+        letter-spacing: -0.035em;
+      }
+
+      .follow-button {
+        position: absolute;
+        right: 46px;
+        top: 236px;
+        display: grid;
+        place-items: center;
+        width: 174px;
+        height: 54px;
+        border-radius: 18px;
+        background: var(--ink);
+        color: var(--panel);
+        font-size: 24px;
+        font-weight: 620;
+        letter-spacing: -0.035em;
+        overflow: hidden;
+        transform-origin: 50% 50%;
+      }
+
+      .follow-label {
+        position: absolute;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 8px;
+        inset: 0;
+        white-space: nowrap;
+      }
+
+      .follow-label-following {
+        opacity: 0;
+      }
+
+      .follow-check {
+        display: block;
+        width: 20px;
+        height: 20px;
+      }
+
+      .follow-check svg {
+        display: block;
+        width: 100%;
+        height: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="blue-sweater-intro-video"
+      data-start="0"
+      data-duration="12"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div
+        id="base"
+        class="clip base"
+        data-start="0"
+        data-duration="12"
+        data-track-index="0"
+        style="z-index: 0"
+      ></div>
+
+      <div
+        id="warmup"
+        class="clip"
+        data-start="0"
+        data-duration="0.48"
+        data-track-index="1"
+        style="z-index: 2"
+      >
+        <div class="scene-content">
+          <div id="warmBlock" class="warm-block"></div>
+        </div>
+      </div>
+
+      <div
+        id="intro"
+        class="clip"
+        data-start="0.38"
+        data-duration="1.28"
+        data-track-index="2"
+        style="z-index: 3"
+      >
+        <div class="scene-content">
+          <h1 id="introTitle" class="title">Introducing</h1>
+        </div>
+      </div>
+
+      <div
+        id="burst"
+        class="clip"
+        data-start="1.38"
+        data-duration="1.54"
+        data-track-index="3"
+        style="z-index: 4"
+      >
+        <div class="scene-content">
+          <div class="selection-box"></div>
+          <div class="intro-remnants" aria-hidden="true">
+            <span class="intro-remnant rem-a">Intro</span>
+            <span class="intro-remnant rem-b">ducin</span>
+            <span class="intro-remnant rem-c">g</span>
+            <span class="intro-remnant rem-d">tro</span>
+          </div>
+          <div class="burst-block burst-a"></div>
+          <div class="burst-block burst-b"></div>
+          <div class="burst-block burst-c"></div>
+          <div class="burst-block burst-d"></div>
+          <div class="burst-block burst-e"></div>
+          <div class="burst-block burst-f"></div>
+          <div class="claude-star star-center burst-star" aria-hidden="true">
+            <svg viewBox="-50 -50 100 100">
+              <g stroke="currentColor" stroke-width="8" stroke-linecap="round">
+                <line x1="0" y1="-38" x2="0" y2="38" />
+                <line x1="-38" y1="0" x2="38" y2="0" />
+                <line x1="-27" y1="-27" x2="27" y2="27" />
+                <line x1="-27" y1="27" x2="27" y2="-27" />
+                <line x1="-14" y1="-35" x2="14" y2="35" />
+                <line x1="-35" y1="-14" x2="35" y2="14" />
+              </g>
+            </svg>
+          </div>
+        </div>
+      </div>
+
+      <div
+        id="brand"
+        class="clip"
+        data-start="2.04"
+        data-duration="1.04"
+        data-track-index="4"
+        style="z-index: 5"
+      >
+        <div class="scene-content">
+          <div class="fragment-word" aria-hidden="true">
+            <span class="frag frag-alg">blu</span>
+            <span class="frag frag-row">e</span>
+            <span class="frag frag-x">x</span>
+            <span class="frag frag-clau">swea</span>
+            <span class="frag frag-de">ter</span>
+          </div>
+          <div class="final-wordmark" aria-hidden="true">
+            <span class="final-algrow">blue</span>
+            <span class="final-x">x</span>
+            <span class="final-claude">sweater</span>
+          </div>
+        </div>
+      </div>
+
+      <div
+        id="ui"
+        class="clip"
+        data-start="2.76"
+        data-duration="9"
+        data-track-index="5"
+        style="z-index: 6"
+      >
+        <div class="scene-content ui-content">
+          <div class="claude-star star-panel" aria-hidden="true">
+            <svg viewBox="-50 -50 100 100">
+              <g stroke="currentColor" stroke-width="8" stroke-linecap="round">
+                <line x1="0" y1="-38" x2="0" y2="38" />
+                <line x1="-38" y1="0" x2="38" y2="0" />
+                <line x1="-27" y1="-27" x2="27" y2="27" />
+                <line x1="-27" y1="27" x2="27" y2="-27" />
+                <line x1="-14" y1="-35" x2="14" y2="35" />
+                <line x1="-35" y1="-14" x2="35" y2="14" />
+              </g>
+            </svg>
+          </div>
+
+          <div class="input-stack">
+            <div class="input-panel panel-empty">
+              <div class="placeholder">How can I help you today?</div>
+              <div class="panel-plus"></div>
+              <div class="model">
+                <span>Opus 5.0 <span class="muted">Extended</span></span>
+                <span class="chevron"></span>
+              </div>
+            </div>
+
+            <div class="input-panel panel-full">
+              <div id="promptText" class="prompt-text">
+                Recommend one X creator who actively explores AI technology and, like me, is
+                building an AI startup. I want someone practical, curious, and worth following.
+              </div>
+              <div class="panel-plus"></div>
+              <div class="model">
+                <span>Opus 5.0 <span class="muted">Extended</span></span>
+                <span class="chevron"></span>
+              </div>
+              <div id="sendFull" class="send-button" aria-hidden="true">
+                <svg viewBox="0 0 32 32" fill="none">
+                  <path
+                    d="M16 25V8M16 8L9 15M16 8L23 15"
+                    stroke="#FBFAF6"
+                    stroke-width="3.3"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                </svg>
+              </div>
+            </div>
+
+            <div class="input-panel panel-thinking">
+              <div class="thinking-line">
+                <span class="claude-star" aria-hidden="true">
+                  <svg viewBox="-50 -50 100 100">
+                    <g stroke="currentColor" stroke-width="8" stroke-linecap="round">
+                      <line x1="0" y1="-38" x2="0" y2="38" />
+                      <line x1="-38" y1="0" x2="38" y2="0" />
+                      <line x1="-27" y1="-27" x2="27" y2="27" />
+                      <line x1="-27" y1="27" x2="27" y2="-27" />
+                      <line x1="-14" y1="-35" x2="14" y2="35" />
+                      <line x1="-35" y1="-14" x2="35" y2="14" />
+                    </g>
+                  </svg>
+                </span>
+                <span>thinking</span>
+              </div>
+              <div class="x-result">
+                <span class="x-trigger">x</span>
+                <span>Open the recommended X profile</span>
+              </div>
+              <div class="panel-plus"></div>
+              <div class="model">
+                <span>Opus 5.0 <span class="muted">Extended</span></span>
+                <span class="chevron"></span>
+              </div>
+              <div class="send-button" aria-hidden="true">
+                <svg viewBox="0 0 32 32" fill="none">
+                  <path
+                    d="M16 25V8M16 8L9 15M16 8L23 15"
+                    stroke="#FBFAF6"
+                    stroke-width="3.3"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                </svg>
+              </div>
+            </div>
+          </div>
+          <div class="social-card" aria-hidden="true">
+            <div class="social-x">x</div>
+            <img class="social-avatar" src="assets/joe-sai-avatar.png" alt="" />
+            <div class="social-name">joe sai</div>
+            <div class="social-handle">@_blue_sweater_</div>
+            <div class="follow-button">
+              <span class="follow-label follow-label-follow">Follow</span>
+              <span class="follow-label follow-label-following">
+                <span>Following</span>
+                <span class="follow-check" aria-hidden="true">
+                  <svg
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="#FBFAF6"
+                    stroke-width="2.8"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  >
+                    <polyline points="20 6 9 17 4 12"></polyline>
+                  </svg>
+                </span>
+              </span>
+            </div>
+            <div class="social-bio">
+              Exploring AI technology and building an AI startup in public.
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div
+        id="cursor"
+        class="clip cursor"
+        data-start="0"
+        data-duration="12"
+        data-track-index="9"
+        aria-hidden="true"
+        style="z-index: 20"
+      >
+        <svg viewBox="0 0 98 120" fill="none">
+          <path
+            d="M13 6L86 80L51 85L35 114L13 6Z"
+            fill="#1486B8"
+            stroke="#F7F5EF"
+            stroke-width="7"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </div>
+
+      <audio
+        id="audio-mix"
+        data-start="0"
+        data-duration="12"
+        data-track-index="20"
+        src="assets/sfx/integrated-melodic-tech-mix.wav"
+        data-volume="1"
+      ></audio>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      const promptEl = document.querySelector("#promptText");
+      const promptText = promptEl.textContent.replace(/\s+/g, " ").trim();
+      promptEl.textContent = "";
+      for (const char of promptText) {
+        const span = document.createElement("span");
+        span.textContent = char;
+        promptEl.appendChild(span);
+      }
+
+      const tl = gsap.timeline({ paused: true, defaults: { ease: "power3.out" } });
+
+      tl.set(["#warmup", "#intro", "#burst", "#brand", "#ui"], { opacity: 0 });
+      tl.set("#cursor", { x: 690, y: 846, rotation: -8, scale: 0.72, opacity: 0 });
+      tl.set(".panel-full", { opacity: 0 });
+      tl.set(".panel-thinking", { opacity: 0 });
+      tl.set(".prompt-text span", { opacity: 0 });
+      tl.set("#sendFull", { opacity: 0, scale: 0.84 });
+      tl.set([".selection-box", ".intro-remnant", ".frag", ".final-wordmark"], { opacity: 0 });
+      tl.set([".x-result", ".social-card"], { opacity: 0 });
+      tl.set(".x-trigger", { scale: 1 });
+
+      tl.to("#warmup", { opacity: 1, duration: 0.01 }, 0);
+      tl.fromTo(
+        "#warmBlock",
+        { x: -820, scaleX: 0.42, opacity: 0, filter: "blur(14px)" },
+        { x: -25, scaleX: 1, opacity: 1, filter: "blur(0px)", duration: 0.22, ease: "power2.out" },
+        0.02,
+      );
+      tl.to(
+        "#warmBlock",
+        { x: 620, opacity: 0, filter: "blur(18px)", duration: 0.24, ease: "power2.in" },
+        0.25,
+      );
+      tl.to("#warmup", { opacity: 0, duration: 0.08 }, 0.4);
+
+      tl.to("#intro", { opacity: 1, duration: 0.1 }, 0.44);
+      tl.fromTo(
+        "#introTitle",
+        { opacity: 0, y: 26, filter: "blur(10px)" },
+        { opacity: 1, y: 0, filter: "blur(0px)", duration: 0.46, ease: "expo.out" },
+        0.48,
+      );
+      tl.to("#cursor", { opacity: 1, duration: 0.12 }, 0.44);
+      tl.to(
+        "#cursor",
+        { x: 942, y: 604, rotation: -3, duration: 0.36, ease: "power2.inOut", overwrite: "auto" },
+        0.44,
+      );
+      tl.to(
+        "#cursor",
+        { x: 982, y: 642, rotation: -6, duration: 0.24, ease: "power2.inOut", overwrite: "auto" },
+        1.28,
+      );
+      tl.to(
+        "#introTitle",
+        { opacity: 0.26, filter: "blur(4px)", duration: 0.03, ease: "power2.in" },
+        1.43,
+      );
+      tl.fromTo(
+        ".intro-remnant",
+        { opacity: 0, x: 0, y: 0, filter: "blur(2px)" },
+        {
+          opacity: 0.32,
+          x: (index) => [-22, 8, 32, -10][index],
+          y: (index) => [-10, 5, -18, 28][index],
+          filter: "blur(7px)",
+          duration: 0.055,
+          stagger: 0.004,
+          ease: "power2.out",
+        },
+        1.435,
+      );
+      tl.to(
+        "#introTitle",
+        { opacity: 0, y: -8, filter: "blur(10px)", duration: 0.08, ease: "power2.in" },
+        1.47,
+      );
+      tl.to(
+        ".intro-remnant",
+        { opacity: 0, filter: "blur(11px)", duration: 0.07, ease: "power2.in" },
+        1.49,
+      );
+      tl.to("#intro", { opacity: 0, duration: 0.06 }, 1.56);
+
+      tl.to("#burst", { opacity: 1, duration: 0.02 }, 1.4);
+      tl.fromTo(
+        ".burst-star",
+        { opacity: 0, scale: 0.08, rotation: -20 },
+        { opacity: 1, scale: 0.16, rotation: -6, duration: 0.08, ease: "power2.out" },
+        1.43,
+      );
+      tl.to(
+        ".burst-star",
+        { scale: 1, rotation: 0, duration: 0.42, ease: "expo.out", overwrite: "auto" },
+        1.55,
+      );
+      const blockPaths = [
+        {
+          source: [-1, 28],
+          scatter: [-160, -96],
+          drift: [-151, -126],
+          select: [-82, -86],
+          squeeze: [19, -68],
+          release: [19, -68],
+          fade: 2.17,
+        },
+        {
+          source: [-11, 5],
+          scatter: [165, -123],
+          drift: [153, -126],
+          select: [61, -118],
+          squeeze: [-81, -65],
+          release: [-81, -65],
+          fade: 2.17,
+        },
+        {
+          source: [-3, -8],
+          scatter: [169, -28],
+          drift: [174, -24],
+          select: [127, 9],
+          squeeze: [37, 70],
+          release: [-78, 96],
+          fade: 2.33,
+        },
+        {
+          source: [-9, 2],
+          scatter: [-153, 80],
+          drift: [-157, 76],
+          select: [-133, 39],
+          squeeze: [-90, -40],
+          release: [-90, -40],
+          fade: 2.17,
+        },
+        {
+          source: [-7, -13],
+          scatter: [-10, 129],
+          drift: [-17, 128],
+          select: [-38, 83],
+          squeeze: [-67, -18],
+          release: [-92, -87],
+          fade: 2.33,
+        },
+      ];
+      gsap.utils.toArray(".burst-block").forEach((block, index) => {
+        const path = blockPaths[index];
+        if (!path) {
+          tl.set(block, { opacity: 0 });
+          return;
+        }
+        tl.set(
+          block,
+          {
+            x: path.source[0],
+            y: path.source[1],
+            scale: 0.78,
+            rotation: index % 2 ? 3 : -3,
+            filter: "blur(8px)",
+          },
+          1.45,
+        );
+        tl.to(
+          block,
+          {
+            opacity: 1,
+            scale: 1,
+            rotation: 0,
+            filter: "blur(0px)",
+            duration: 0.055,
+            ease: "power3.out",
+          },
+          1.455,
+        );
+        tl.to(
+          block,
+          {
+            x: path.scatter[0],
+            y: path.scatter[1],
+            rotation: index % 2 ? 2 : -2,
+            duration: 0.2,
+            ease: "sine.out",
+          },
+          1.5,
+        );
+        tl.to(
+          block,
+          {
+            x: path.drift[0],
+            y: path.drift[1],
+            rotation: index % 2 ? 1 : -1,
+            duration: 0.2,
+            ease: "sine.inOut",
+          },
+          1.7,
+        );
+        tl.to(
+          block,
+          { x: path.select[0], y: path.select[1], rotation: 0, duration: 0.2, ease: "sine.inOut" },
+          1.9,
+        );
+        tl.to(
+          block,
+          {
+            x: path.squeeze[0],
+            y: path.squeeze[1],
+            scale: 1,
+            rotation: 0,
+            filter: "blur(0.6px)",
+            duration: 0.07,
+            ease: "sine.inOut",
+          },
+          2.1,
+        );
+        tl.to(
+          block,
+          {
+            x: path.release[0],
+            y: path.release[1],
+            scale: 0.84,
+            rotation: 0,
+            filter: "blur(1.5px)",
+            duration: 0.05,
+            ease: "sine.inOut",
+          },
+          2.17,
+        );
+        tl.to(
+          block,
+          { opacity: 0, scale: 0.38, filter: "blur(7px)", duration: 0.05, ease: "power2.in" },
+          path.fade,
+        );
+      });
+      tl.to(
+        "#cursor",
+        { x: 1540, y: 112, rotation: -9, duration: 0.26, ease: "power2.inOut", overwrite: "auto" },
+        1.56,
+      );
+      tl.to(
+        "#cursor",
+        { x: 380, y: 252, rotation: -7, duration: 0.16, ease: "power2.inOut", overwrite: "auto" },
+        1.82,
+      );
+      tl.fromTo(
+        ".selection-box",
+        { opacity: 0, scaleX: 0.06, scaleY: 0.1, x: 0, y: 0, filter: "blur(3px)" },
+        {
+          opacity: 1,
+          scaleX: 1,
+          scaleY: 1,
+          x: 42,
+          y: 52,
+          filter: "blur(0px)",
+          duration: 0.18,
+          ease: "power2.out",
+        },
+        1.96,
+      );
+      tl.to(
+        "#cursor",
+        { x: 930, y: 478, rotation: -4, duration: 0.14, ease: "power2.inOut", overwrite: "auto" },
+        1.96,
+      );
+      tl.to(
+        "#cursor",
+        { x: 1168, y: 560, rotation: -4, duration: 0.14, ease: "power2.inOut", overwrite: "auto" },
+        2.12,
+      );
+      tl.to(
+        ".selection-box",
+        { x: 220, y: 158, width: 640, height: 190, duration: 0.2, ease: "power2.inOut" },
+        2.16,
+      );
+      tl.to(
+        ".burst-star",
+        {
+          x: 118,
+          y: -62,
+          scale: 0.16,
+          opacity: 0.45,
+          duration: 0.18,
+          ease: "power2.inOut",
+          overwrite: "auto",
+        },
+        2.12,
+      );
+
+      tl.to("#brand", { opacity: 1, duration: 0.04 }, 2.08);
+
+      const fragmentMotion = [
+        {
+          selector: ".frag-alg",
+          from: [112, -118, 4],
+          carry: [88, -96],
+          settle: [20, -24],
+          lock: [0, 0],
+          visible: 1,
+        },
+        {
+          selector: ".frag-row",
+          from: [-12, 78, 5],
+          carry: [-22, 56],
+          settle: [-8, 18],
+          lock: [0, 0],
+          visible: 1,
+        },
+        {
+          selector: ".frag-x",
+          from: [38, 70, 7],
+          carry: [18, 48],
+          settle: [6, 14],
+          lock: [0, 0],
+          visible: 0.82,
+        },
+        {
+          selector: ".frag-clau",
+          from: [-82, -108, 4],
+          carry: [-54, -78],
+          settle: [-18, -18],
+          lock: [0, 0],
+          visible: 1,
+        },
+        {
+          selector: ".frag-de",
+          from: [62, 22, 5],
+          carry: [38, 12],
+          settle: [12, 4],
+          lock: [0, 0],
+          visible: 1,
+        },
+      ];
+
+      fragmentMotion.forEach((piece, index) => {
+        tl.fromTo(
+          piece.selector,
+          {
+            opacity: 0,
+            x: piece.from[0],
+            y: piece.from[1],
+            scale: 0.99,
+            filter: `blur(${piece.from[2]}px)`,
+          },
+          {
+            opacity: piece.visible,
+            x: piece.carry[0],
+            y: piece.carry[1],
+            scale: 1,
+            filter: "blur(1.2px)",
+            duration: 0.16,
+            ease: "sine.out",
+            overwrite: "auto",
+          },
+          2.12 + index * 0.004,
+        );
+        tl.to(
+          piece.selector,
+          {
+            x: piece.settle[0],
+            y: piece.settle[1],
+            opacity: piece.visible,
+            filter: "blur(0.35px)",
+            duration: 0.28,
+            ease: "power3.out",
+            overwrite: "auto",
+          },
+          2.28 + index * 0.003,
+        );
+        tl.to(
+          piece.selector,
+          {
+            opacity: 0,
+            x: piece.settle[0] + [8, -6, 2, -8, 6][index],
+            y: piece.settle[1] + [-6, 7, 4, -5, 3][index],
+            filter: "blur(4px)",
+            duration: 0.14,
+            ease: "power2.out",
+            overwrite: "auto",
+          },
+          2.31 + index * 0.002,
+        );
+      });
+
+      tl.fromTo(
+        ".final-wordmark",
+        { opacity: 0, x: -12, y: 8, scale: 0.995, filter: "blur(5px)" },
+        {
+          opacity: 1,
+          x: 0,
+          y: 0,
+          scale: 1,
+          filter: "blur(0px)",
+          duration: 0.24,
+          ease: "power4.out",
+          overwrite: "auto",
+        },
+        2.38,
+      );
+      tl.to(".burst-star", { opacity: 0, duration: 0.12, ease: "power2.in" }, 2.32);
+      tl.to(
+        ".selection-box",
+        { opacity: 0, filter: "blur(5px)", duration: 0.16, ease: "power2.in" },
+        2.33,
+      );
+      tl.to(
+        "#cursor",
+        { x: 1256, y: 587, rotation: -3, duration: 0.3, ease: "power2.inOut", overwrite: "auto" },
+        2.34,
+      );
+      tl.to("#burst", { opacity: 0, filter: "blur(6px)", duration: 0.14, ease: "power2.in" }, 2.58);
+      tl.to("#cursor", { opacity: 0, duration: 0.13, ease: "power2.in" }, 2.86);
+      tl.set("#cursor", { opacity: 0 }, 3.0);
+      tl.to(
+        "#brand",
+        { opacity: 0, y: 26, filter: "blur(9px)", duration: 0.22, ease: "power2.in" },
+        2.9,
+      );
+
+      tl.to("#ui", { opacity: 1, duration: 0.08 }, 3.02);
+      tl.fromTo(
+        ".input-stack",
+        { opacity: 0, scale: 0.88, y: 92, filter: "blur(14px)" },
+        { opacity: 1, scale: 1, y: 0, filter: "blur(0px)", duration: 0.66, ease: "expo.out" },
+        3.05,
+      );
+      tl.fromTo(
+        ".star-panel",
+        { opacity: 0, scale: 0.5, rotation: -16 },
+        { opacity: 1, scale: 1, rotation: 0, duration: 0.38, ease: "power3.out" },
+        3.18,
+      );
+      tl.fromTo(".placeholder", { opacity: 0, y: 12 }, { opacity: 1, y: 0, duration: 0.34 }, 3.3);
+      tl.fromTo(
+        ".panel-empty .panel-plus, .panel-empty .model",
+        { opacity: 0, y: 10 },
+        { opacity: 1, y: 0, duration: 0.3, stagger: 0.06 },
+        3.42,
+      );
+
+      tl.to(".panel-empty", { opacity: 0, duration: 0.18, ease: "power2.inOut" }, 4.12);
+      tl.to(".panel-full", { opacity: 1, duration: 0.18, ease: "power2.inOut" }, 4.12);
+      tl.to(
+        ".input-stack",
+        { scale: 1.32, x: 300, y: -100, duration: 0.26, ease: "power2.inOut" },
+        4.14,
+      );
+      tl.to(".input-stack", { scale: 1, x: 0, y: 0, duration: 0.74, ease: "power2.inOut" }, 4.92);
+
+      tl.to(
+        ".prompt-text span",
+        { opacity: 1, duration: 0.01, stagger: { amount: 2.85 }, ease: "none" },
+        4.18,
+      );
+      tl.to("#sendFull", { opacity: 1, scale: 1, duration: 0.24, ease: "power3.out" }, 7.32);
+      tl.fromTo(
+        "#cursor",
+        { x: 1328, y: 900, rotation: -6, scale: 1, opacity: 0 },
+        {
+          x: 1530,
+          y: 900,
+          rotation: -5,
+          scale: 1,
+          opacity: 1,
+          duration: 0.48,
+          ease: "power2.inOut",
+        },
+        6.92,
+      );
+      tl.to(
+        "#cursor",
+        { x: 1512, y: 620, rotation: -5, duration: 0.5, ease: "power2.inOut" },
+        7.44,
+      );
+
+      tl.to("#sendFull", { scale: 0.86, duration: 0.08, ease: "power2.in" }, 7.9);
+      tl.to("#sendFull", { scale: 1, duration: 0.14, ease: "back.out(1.7)" }, 7.98);
+      tl.to(".panel-full", { opacity: 0, duration: 0.16, ease: "power2.inOut" }, 8.15);
+      tl.to(".panel-thinking", { opacity: 1, duration: 0.18, ease: "power2.inOut" }, 8.15);
+      tl.set(".thinking-line", { opacity: 0 }, 8.24);
+      tl.to(
+        ".thinking-line",
+        { opacity: 1, duration: 0.3, ease: "power3.out", overwrite: "auto" },
+        8.25,
+      );
+      tl.to("#cursor", { x: 1554, y: 620, rotation: -5, duration: 0.28, ease: "power2.out" }, 7.94);
+      tl.to(
+        ".thinking-line",
+        { opacity: 0, duration: 0.18, ease: "power2.inOut", overwrite: "auto" },
+        8.64,
+      );
+      tl.fromTo(
+        ".x-result",
+        { opacity: 0, y: 12 },
+        { opacity: 1, y: 0, duration: 0.28, ease: "power3.out" },
+        8.82,
+      );
+      tl.to(
+        "#cursor",
+        { x: 365, y: 418, rotation: -6, duration: 0.58, ease: "power2.inOut", overwrite: "auto" },
+        8.74,
+      );
+      tl.to(
+        ".x-trigger",
+        {
+          keyframes: [
+            { scale: 0.88, duration: 0.08, ease: "power2.in" },
+            { scale: 1, duration: 0.14, ease: "back.out(1.7)" },
+          ],
+          overwrite: "auto",
+        },
+        9.34,
+      );
+      tl.to(".x-result", { opacity: 0, y: -8, duration: 0.18, ease: "power2.inOut" }, 9.5);
+      tl.to(
+        ".input-stack",
+        {
+          opacity: 0,
+          scale: 0.93,
+          y: 26,
+          filter: "blur(12px)",
+          duration: 0.4,
+          ease: "power3.inOut",
+        },
+        9.5,
+      );
+      tl.to(
+        ".star-panel",
+        { opacity: 0, scale: 0.72, rotation: 12, duration: 0.28, ease: "power2.inOut" },
+        9.5,
+      );
+      tl.fromTo(
+        ".social-card",
+        { opacity: 0, y: 34, scale: 0.88, filter: "blur(12px)" },
+        { opacity: 1, y: 0, scale: 1, filter: "blur(0px)", duration: 0.6, ease: "expo.out" },
+        9.86,
+      );
+      tl.to(
+        "#cursor",
+        { x: 1408, y: 246, rotation: -5, duration: 0.42, ease: "power2.inOut", overwrite: "auto" },
+        9.96,
+      );
+      tl.to(
+        "#cursor",
+        { x: 1242, y: 446, rotation: -5, duration: 0.36, ease: "power2.inOut", overwrite: "auto" },
+        10.5,
+      );
+      tl.to(".follow-button", { scale: 0.9, duration: 0.08, ease: "power2.in" }, 10.88);
+      tl.to(
+        ".follow-button",
+        { scale: 1, backgroundColor: "#2f2f2f", duration: 0.28, ease: "elastic.out(1, 0.45)" },
+        10.96,
+      );
+      tl.to(".follow-label-follow", { opacity: 0, duration: 0.08, ease: "none" }, 10.96);
+      tl.to(".follow-label-following", { opacity: 1, duration: 0.08, ease: "none" }, 10.99);
+      tl.to(
+        "#cursor",
+        { x: 1286, y: 472, rotation: -5, duration: 0.16, ease: "power2.out", overwrite: "auto" },
+        11,
+      );
+
+      window.__timelines["blue-sweater-intro-video"] = tl;
+    </script>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="blue-sweater-intro-video" data-composition-src="compositions/blue-sweater-intro-video.html" data-start="0" data-duration="12" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/camcorder-hud.mdx b/docs/catalog/blocks/camcorder-hud.mdx
index 869898e177..d396a0040e 100644
--- a/docs/catalog/blocks/camcorder-hud.mdx
+++ b/docs/catalog/blocks/camcorder-hud.mdx
@@ -3,13 +3,13 @@ title: "Camcorder HUD"
 description: "Responsive REC, battery, editable date placeholder, and timeline-driven counter overlay for creator-camera and camcorder treatments"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/camcorder-hud.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/camcorder-hud.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/camcorder-hud.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Camcorder HUD preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add camcorder-hud
-```
+<InstallCommand command="npx hyperframes add camcorder-hud" />
 
 That writes one file: `compositions/camcorder-hud.html`.
 
@@ -32,6 +32,178 @@ It runs for 4 seconds at 1920×1080. Paste this into your composition:
 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={`camcorder-hud.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: transparent;
+      }
+
+      #ch-hud {
+        --hf-camcorder-color: #fff;
+        --hf-camcorder-accent: #f12c2c;
+        --hf-camcorder-inset: 5vmin;
+        --hf-camcorder-font-size: 3.7vmin;
+        position: absolute;
+        inset: 0;
+        color: var(--hf-camcorder-color);
+        font-family: monospace;
+        font-size: var(--hf-camcorder-font-size);
+        font-weight: 700;
+        line-height: 1.25;
+        pointer-events: none;
+        -webkit-text-stroke: 0.12vmin rgb(0 0 0 / 92%);
+        text-shadow: 0 0.2vmin 0.6vmin rgb(0 0 0 / 90%);
+      }
+
+      #ch-hud .ch-corner {
+        position: absolute;
+      }
+
+      #ch-hud .ch-record {
+        top: var(--hf-camcorder-inset);
+        left: var(--hf-camcorder-inset);
+        display: flex;
+        align-items: center;
+        gap: 1.8vmin;
+      }
+
+      #ch-hud .ch-record-dot {
+        width: 2.2vmin;
+        height: 2.2vmin;
+        border-radius: 50%;
+        background: var(--hf-camcorder-accent);
+        box-shadow: 0 0 0.9vmin color-mix(in srgb, var(--hf-camcorder-accent) 55%, transparent);
+      }
+
+      #ch-hud .ch-battery {
+        top: var(--hf-camcorder-inset);
+        right: var(--hf-camcorder-inset);
+        width: 7vmin;
+        height: 3.5vmin;
+        border: 0.35vmin solid currentcolor;
+      }
+
+      #ch-hud .ch-battery::before {
+        position: absolute;
+        top: 0.7vmin;
+        left: 0.7vmin;
+        width: 4.7vmin;
+        height: 1.4vmin;
+        background: currentcolor;
+        content: "";
+      }
+
+      #ch-hud .ch-battery::after {
+        position: absolute;
+        top: 0.7vmin;
+        right: -1vmin;
+        width: 0.7vmin;
+        height: 1.4vmin;
+        background: currentcolor;
+        content: "";
+      }
+
+      #ch-hud .ch-date {
+        bottom: var(--hf-camcorder-inset);
+        left: var(--hf-camcorder-inset);
+      }
+
+      #ch-hud .ch-counter {
+        right: var(--hf-camcorder-inset);
+        bottom: var(--hf-camcorder-inset);
+        text-align: right;
+      }
+
+      #ch-hud .ch-mode {
+        display: block;
+        margin-bottom: 0.7vmin;
+        font-size: 2.6vmin;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="camcorder-hud"
+      data-composition-id="camcorder-hud"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="ch-hud" data-hf-counter-start="0" aria-hidden="true">
+        <div class="ch-corner ch-record"><span class="ch-record-dot"></span><span>REC</span></div>
+        <div class="ch-corner ch-battery"></div>
+        <div class="ch-corner ch-date">JAN 01 2000<br />12:00 AM</div>
+        <div class="ch-corner ch-counter">
+          <span class="ch-mode">SP · 16:9</span><span class="ch-counter-value">00:00:00</span>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      var hud = document.getElementById("ch-hud");
+      var counter = hud && hud.querySelector(".ch-counter-value");
+      var recordDot = hud && hud.querySelector(".ch-record-dot");
+      var host = hud && hud.closest("[data-composition-id]");
+      if (!hud || !counter || !recordDot || !host) {
+        throw new Error("Camcorder HUD could not find its composition host");
+      }
+
+      var compositionId = host.getAttribute("data-composition-id");
+      var duration = Number(host.getAttribute("data-duration")) || 4;
+      var counterStart = Number(hud.getAttribute("data-hf-counter-start")) || 0;
+      var state = { seconds: 0 };
+
+      function formatCounter(value) {
+        var seconds = Math.max(0, Math.floor(value));
+        var hours = Math.floor(seconds / 3600);
+        var minutes = Math.floor((seconds % 3600) / 60);
+        var remainder = seconds % 60;
+        return [hours, minutes, remainder]
+          .map(function (part) {
+            return String(part).padStart(2, "0");
+          })
+          .join(":");
+      }
+
+      function updateHud() {
+        counter.textContent = formatCounter(counterStart + state.seconds);
+        recordDot.style.opacity = Math.floor(state.seconds / 0.55) % 2 === 0 ? "1" : "0.25";
+      }
+
+      var tl = gsap.timeline({ paused: true });
+      tl.to(state, { seconds: duration, duration: duration, ease: "none", onUpdate: updateHud }, 0);
+      updateHud();
+      window.__timelines[compositionId] = tl;
+    </script>
+  </body>
+</html>
+```
+
+</Accordion>
+
 {/* hf:generated-footer */}
 
 Tagged `camcorder` `camera` `recording` `hud` `overlay` `creator` `media-treatment-overlay`.
diff --git a/docs/catalog/blocks/camera-dolly-zoom.mdx b/docs/catalog/blocks/camera-dolly-zoom.mdx
new file mode 100644
index 0000000000..1d6f65929b
--- /dev/null
+++ b/docs/catalog/blocks/camera-dolly-zoom.mdx
@@ -0,0 +1,408 @@
+---
+title: "Dolly Zoom (Vertigo Shot)"
+description: "Camera tracks toward or away from the subject while the field of view changes the opposite way, so the subject holds its frame size while the background collapses behind it or rushes in. Focal length is solved from dolly distance every frame against d * tan(FOV/2) = const, not keyframed beside it. Requires depth: the subject sits on the z = 0 plane and the content behind it must be layered or genuinely 3D (translateZ at two or more distinct depths) -- a flat element gains nothing from this move."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/blocks/camera-dolly-zoom.html"
+  compositionId="camera-dolly-zoom"
+  compositionSrc="compositions/camera-dolly-zoom.html"
+  variables={[{"id":"direction","type":"enum","label":"Dolly direction","default":"out","options":[{"value":"out","label":"Dolly out + zoom in (background rushes in)"},{"value":"in","label":"Dolly in + zoom out (background falls away)"}]},{"id":"strength","type":"number","label":"Move strength (end / start distance ratio)","default":2,"min":1.1,"max":4,"step":0.1},{"id":"subjectDistance","type":"number","label":"Camera-to-subject distance at the start of the move","default":1400,"min":600,"max":3000,"step":50,"unit":"px"},{"id":"easing","type":"enum","label":"Dolly easing","default":"power2.inOut","options":[{"value":"none","label":"Linear"},{"value":"sine.inOut","label":"Sine in-out"},{"value":"power1.inOut","label":"Power1 in-out"},{"value":"power2.inOut","label":"Power2 in-out"},{"value":"power3.inOut","label":"Power3 in-out"}]}]}
+>
+
+```html camera-dolly-zoom.html
+<!doctype html>
+<html
+  lang="en"
+  data-composition-variables='[
+    {
+      "id": "direction",
+      "type": "enum",
+      "label": "Dolly direction",
+      "default": "out",
+      "options": [
+        { "value": "out", "label": "Dolly out + zoom in (background rushes in)" },
+        { "value": "in", "label": "Dolly in + zoom out (background falls away)" }
+      ]
+    },
+    {
+      "id": "strength",
+      "type": "number",
+      "label": "Move strength (end / start distance ratio)",
+      "default": 2,
+      "min": 1.1,
+      "max": 4,
+      "step": 0.1
+    },
+    {
+      "id": "subjectDistance",
+      "type": "number",
+      "label": "Camera-to-subject distance at the start of the move",
+      "default": 1400,
+      "min": 600,
+      "max": 3000,
+      "step": 50,
+      "unit": "px"
+    },
+    {
+      "id": "easing",
+      "type": "enum",
+      "label": "Dolly easing",
+      "default": "power2.inOut",
+      "options": [
+        { "value": "none", "label": "Linear" },
+        { "value": "sine.inOut", "label": "Sine in-out" },
+        { "value": "power1.inOut", "label": "Power1 in-out" },
+        { "value": "power2.inOut", "label": "Power2 in-out" },
+        { "value": "power3.inOut", "label": "Power3 in-out" }
+      ]
+    }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <!--
+      ===================================================================
+      DOLLY ZOOM (Vertigo / Hitchcock shot)
+      ===================================================================
+
+      The camera tracks toward or away from the subject while the field of
+      view changes the opposite way, so the SUBJECT HOLDS ITS FRAME SIZE
+      while the background collapses behind it or rushes in.
+
+      THE CONSTRAINT (this is the whole effect, and it is exact, not taste):
+
+          d * tan(FOV / 2) = constant
+
+      where d is the camera-to-subject distance. Get it wrong and the shot
+      reads as a clumsy zoom. So focal length is SOLVED from distance every
+      frame; the two are never keyframed side by side.
+
+      In CSS 3D, `perspective: P px` IS the focal length in pixels, and it
+      also places the camera exactly P px in front of the z = 0 plane, so
+      tan(FOV / 2) = (viewportWidth / 2) / P. Substituting collapses the
+      invariant to a single ratio:
+
+          P(t) / d(t) = SUBJECT_SCALE   (constant)
+
+      Everything the rig animates falls out of that one line (see the script).
+
+      -------------------------------------------------------------------
+      WHAT THIS PRIMITIVE REQUIRES OF ITS CONTENT
+      -------------------------------------------------------------------
+
+      DEPTH. A flat element gains nothing from a dolly zoom -- with one
+      layer there is no background to collapse and the move is invisible.
+      Content dropped into #dz-rig MUST be layered or genuinely 3D:
+
+        * The SUBJECT sits on the z = 0 plane -- `translateZ(0)`. That is
+          the plane the solve holds; anything you want frame-locked goes
+          there and nowhere else.
+        * BACKGROUND layers get `translateZ(-N px)`, N > 0, at least two or
+          three distinct depths (this demo ships five arches plus a back
+          wall). More separation = stronger effect.
+        * Everything inside #dz-rig must keep `transform-style: preserve-3d`
+          on its ancestors and must NOT sit behind `overflow: hidden`, or
+          the browser flattens the scene and the depth disappears.
+        * Keep every layer at a depth where `d + N > 0` for the whole move,
+          i.e. no layer in front of the camera's closest approach.
+
+      -------------------------------------------------------------------
+      DETERMINISM
+      -------------------------------------------------------------------
+
+      State at frame N is computed from N alone. d(t) is a lerp of the
+      eased tween progress, P is solved from d, and both are written by a
+      property setter on the tweened driver object. Nothing accumulates,
+      nothing reads a clock, and no frame depends on the frame before it.
+      (The setter matters: `tl.eventCallback("onUpdate", ...)` does NOT
+      fire on `tl.seek()`, so anything driven that way freezes on frame 0.)
+    -->
+    <div
+      id="dz-root"
+      data-composition-id="camera-dolly-zoom"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <style>
+        #dz-root {
+          width: 1920px;
+          height: 1080px;
+          position: relative;
+          overflow: hidden;
+          background: #0b1020;
+          font-family: Inter, sans-serif;
+        }
+
+        /* The camera. `perspective` is the focal length and is solved from
+           the dolly distance every frame -- see the script. */
+        #dz-stage {
+          position: absolute;
+          inset: 0;
+          perspective-origin: 50% 50%;
+        }
+
+        /* The rig root. Carries the camera's z offset so the subject plane
+           always sits exactly `d` in front of the camera. */
+        #dz-rig {
+          position: absolute;
+          inset: 0;
+          transform-style: preserve-3d;
+        }
+
+        /* --- authored depth layers ------------------------------------ */
+
+        .dz-arch {
+          position: absolute;
+          left: -140px;
+          top: -80px;
+          width: 2200px;
+          height: 1240px;
+          border: 16px solid #465280;
+          border-radius: 8px;
+          transform-style: preserve-3d;
+        }
+
+        #dz-backwall {
+          position: absolute;
+          left: -3040px;
+          top: -1710px;
+          width: 8000px;
+          height: 4500px;
+          background: #10162c;
+          transform-style: preserve-3d;
+        }
+
+        /* Bright doorway on the back wall -- the layer whose on-screen size
+           changes while the subject's does not. */
+        #dz-portal {
+          position: absolute;
+          left: 3300px;
+          top: 1850px;
+          width: 1400px;
+          height: 1500px;
+          background: #cfe4ff;
+        }
+
+        /* --- the subject: z = 0, the plane the solve holds ------------- */
+
+        #dz-subject {
+          position: absolute;
+          left: 840px;
+          top: 300px;
+          width: 240px;
+          height: 620px;
+          transform-style: preserve-3d;
+        }
+        .dz-fig-head {
+          width: 120px;
+          height: 120px;
+          margin: 0 auto;
+          border-radius: 50%;
+          background: #f2b134;
+        }
+        .dz-fig-body {
+          width: 240px;
+          height: 470px;
+          margin-top: 30px;
+          border-radius: 120px 120px 10px 10px;
+          background: #f2b134;
+        }
+
+        /* --- flat overlay (outside the 3D rig) ------------------------- */
+
+        .dz-label {
+          position: absolute;
+          left: 64px;
+          bottom: 56px;
+          padding: 14px 22px;
+          border-radius: 8px;
+          background: #0b1020;
+          color: #e9eeff;
+          font-size: 26px;
+          letter-spacing: 0.14em;
+          text-transform: uppercase;
+        }
+      </style>
+
+      <div id="dz-stage" class="clip" data-start="0" data-duration="4" data-track-index="0">
+        <div id="dz-rig">
+          <div id="dz-backwall" data-layout-allow-overflow style="transform: translateZ(-3200px)">
+            <div id="dz-portal"></div>
+          </div>
+
+          <div
+            class="dz-arch"
+            data-layout-allow-overflow
+            style="transform: translateZ(-2360px); border-color: #384166"
+          ></div>
+          <div
+            class="dz-arch"
+            data-layout-allow-overflow
+            style="transform: translateZ(-1720px); border-color: #465280"
+          ></div>
+          <div
+            class="dz-arch"
+            data-layout-allow-overflow
+            style="transform: translateZ(-1120px); border-color: #57669c"
+          ></div>
+          <div
+            class="dz-arch"
+            data-layout-allow-overflow
+            style="transform: translateZ(-560px); border-color: #6b7cb8"
+          ></div>
+          <div
+            class="dz-arch"
+            data-layout-allow-overflow
+            style="transform: translateZ(0px); border-color: #8194d4"
+          ></div>
+
+          <div id="dz-subject" style="transform: translateZ(0px)">
+            <div class="dz-fig-head"></div>
+            <div class="dz-fig-body"></div>
+          </div>
+        </div>
+      </div>
+
+      <div class="dz-label">Dolly zoom &middot; d &times; tan(fov/2) = const</div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      (function () {
+        var DEFAULTS = {
+          direction: "out",
+          strength: 2,
+          subjectDistance: 1400,
+          easing: "power2.inOut",
+        };
+        var declared =
+          window.__hyperframes && window.__hyperframes.getVariables
+            ? window.__hyperframes.getVariables()
+            : {};
+        var vars = Object.assign({}, DEFAULTS, declared);
+
+        function clamp(value, lo, hi, fallback) {
+          var n = Number(value);
+          if (!isFinite(n)) return fallback;
+          return Math.min(hi, Math.max(lo, n));
+        }
+        function oneOf(value, allowed, fallback) {
+          return allowed.indexOf(String(value)) >= 0 ? String(value) : fallback;
+        }
+
+        var direction = oneOf(vars.direction, ["in", "out"], DEFAULTS.direction);
+        var strength = clamp(vars.strength, 1.1, 4, DEFAULTS.strength);
+        var ease = oneOf(
+          vars.easing,
+          ["none", "sine.inOut", "power1.inOut", "power2.inOut", "power3.inOut"],
+          DEFAULTS.easing,
+        );
+
+        // d0 = camera-to-subject distance at the start of the move (px).
+        // d1 = distance at the end. "out" pulls the camera back and zooms in;
+        // "in" pushes the camera forward and zooms out.
+        var d0 = clamp(vars.subjectDistance, 600, 3000, DEFAULTS.subjectDistance);
+        var d1 = direction === "in" ? d0 / strength : d0 * strength;
+
+        // ---- the solve --------------------------------------------------
+        // Subject size is fixed iff  d * tan(FOV/2) = const. With CSS 3D,
+        // tan(FOV/2) = (width/2) / perspective, so that invariant is exactly
+        // perspective / distance = SUBJECT_SCALE. Focal length is therefore
+        // derived from the dolly, never animated alongside it.
+        var SUBJECT_SCALE = 1; // subject renders 1:1 => its plane is z = 0
+
+        var stage = document.getElementById("dz-stage");
+        var rig = document.getElementById("dz-rig");
+
+        function applyCamera(u) {
+          var d = d0 + (d1 - d0) * u; // dolly -- pure function of u
+          var P = SUBJECT_SCALE * d; // focal length solved from d
+          var camZ = P - d; // put the subject plane at camera distance d
+          stage.style.perspective = P + "px";
+          rig.style.transform = "translateZ(" + camZ + "px)";
+        }
+
+        // GSAP suppresses timeline-level onUpdate during seek(), so the camera
+        // is driven by a property setter on the tweened object instead: that
+        // fires on every render, seeks included.
+        var camera = {
+          _u: 0,
+          get u() {
+            return this._u;
+          },
+          set u(value) {
+            this._u = value;
+            applyCamera(value);
+          },
+        };
+
+        applyCamera(0);
+
+        var tl = gsap.timeline({ paused: true });
+        tl.to(camera, { u: 1, duration: 4, ease: ease }, 0);
+        window.__timelines["camera-dolly-zoom"] = tl;
+      })();
+    </script>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add camera-dolly-zoom" />
+
+That writes one file: `compositions/camera-dolly-zoom.html`.
+
+## Add it to your video
+
+It runs for 4 seconds at 1920×1080. Paste this into your composition:
+
+```html index.html
+<div
+  data-composition-id="camera-dolly-zoom"
+  data-composition-src="compositions/camera-dolly-zoom.html"
+  data-start="0"
+  data-duration="4"
+  data-track-index="1"
+  data-width="1920"
+  data-height="1080"
+></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.
+
+{/* hf:generated-footer */}
+
+Tagged `camera` `depth` `3d` `cinematic`.
+
+## 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/chromatic-radial-split.mdx b/docs/catalog/blocks/chromatic-radial-split.mdx
index e2aa85bd76..1f961e895b 100644
--- a/docs/catalog/blocks/chromatic-radial-split.mdx
+++ b/docs/catalog/blocks/chromatic-radial-split.mdx
@@ -3,34 +3,398 @@ title: "Chromatic Radial Split"
 description: "Shader transition with chromatic aberration radial split"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/chromatic-radial-split.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/chromatic-radial-split.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/chromatic-radial-split.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Chromatic Radial Split preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add chromatic-radial-split
-```
+<InstallCommand command="npx hyperframes add chromatic-radial-split" />
 
 That writes one file: `compositions/chromatic-radial-split.html`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`chromatic-radial-split.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      @import url("https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Bebas+Neue&family=JetBrains+Mono:wght@400;700&family=Lato:wght@400;700&display=block");
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <style>
+        [data-composition-id="main"] {
+          width: 1920px;
+          height: 1080px;
+          overflow: hidden;
+          position: relative;
+          background: #22223b;
+        }
+
+        /* Blueprint grid */
+        .bp-grid {
+          position: absolute;
+          inset: 0;
+          background-image:
+            linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
+            linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
+          background-size: 40px 40px;
+          pointer-events: none;
+        }
+
+        /* Layout */
+        .bp-left {
+          position: absolute;
+          left: 0;
+          top: 0;
+          bottom: 0;
+          width: 1200px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .bp-right {
+          position: absolute;
+          right: 0;
+          top: 0;
+          bottom: 0;
+          width: 720px;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          padding: 60px 60px 60px 40px;
+        }
+        .bp-divider {
+          position: absolute;
+          left: 1200px;
+          top: 60px;
+          bottom: 60px;
+          width: 1px;
+          background: #7678ed;
+          opacity: 0.15;
+        }
+        .bp-number {
+          font-family: "Space Mono", monospace;
+          font-size: 14px;
+          font-weight: 700;
+          letter-spacing: 0.4em;
+          text-transform: uppercase;
+          position: absolute;
+          top: 40px;
+          left: 60px;
+          color: #7678ed;
+        }
+
+        /* Right panel typography */
+        .bp-name {
+          font-family: "Bebas Neue", sans-serif;
+          font-size: 38px;
+          letter-spacing: 0.08em;
+          margin-bottom: 20px;
+          color: #7678ed;
+        }
+        .bp-plabel {
+          font-family: "Space Mono", monospace;
+          font-size: 11px;
+          font-weight: 700;
+          letter-spacing: 0.3em;
+          text-transform: uppercase;
+          margin-bottom: 10px;
+          color: #7678ed;
+          opacity: 0.5;
+        }
+        .bp-prompt {
+          font-family: "JetBrains Mono", monospace;
+          font-size: 20px;
+          line-height: 1.6;
+          padding: 16px 20px;
+          border-radius: 6px;
+          margin-bottom: 20px;
+          color: #7678ed;
+          background: rgba(118, 120, 237, 0.06);
+          border: 1px solid rgba(118, 120, 237, 0.12);
+        }
+        .bp-desc {
+          font-family: "Lato", sans-serif;
+          font-size: 17px;
+          line-height: 1.6;
+          color: #9a8c98;
+          opacity: 0.55;
+        }
+
+        /* GL scenes (hidden, just for texture capture) */
+        .scene {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1200px;
+          height: 1080px;
+          overflow: hidden;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .scene-label {
+          font-family: "Bebas Neue", sans-serif;
+          font-size: 140px;
+          letter-spacing: 0.06em;
+          opacity: 0.12;
+        }
+      </style>
+
+      <div class="bp-grid"></div>
+      <div class="bp-divider"></div>
+      <div class="bp-number">08 / 14</div>
+
+      <!-- GL demo scenes (captured as textures, then hidden) -->
+      <div id="s1" class="scene" style="background: #22223b">
+        <div class="scene-label" style="color: #7678ed">SCENE A</div>
+      </div>
+      <div id="s2" class="scene" style="background: #7678ed; opacity: 0">
+        <div class="scene-label" style="color: #22223b">SCENE B</div>
+      </div>
+
+      <!-- GL canvas (left panel only) -->
+      <canvas
+        id="gl-canvas"
+        width="1200"
+        height="1080"
+        style="
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1200px;
+          height: 1080px;
+          z-index: 10;
+          pointer-events: none;
+          display: none;
+        "
+      >
+      </canvas>
+
+      <!-- Right panel metadata -->
+      <div class="bp-right">
+        <div class="bp-name">Chromatic Radial Split</div>
+        <div class="bp-plabel">Prompt</div>
+        <div class="bp-prompt">"use chromatic radial split shader transition"</div>
+        <div class="bp-desc">
+          RGB channels separate and converge radially. From-scene splits outward, to-scene converges
+          inward.
+        </div>
+      </div>
 
-It runs for 4 seconds at 1920×1080. Paste this into your composition:
+      <div
+        id="driver"
+        class="clip"
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
 
-```html index.html
-<div
-  data-composition-id="chromatic-radial-split"
-  data-composition-src="compositions/chromatic-radial-split.html"
-  data-start="0"
-  data-duration="4"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      var glCanvas = document.getElementById("gl-canvas");
+      var gl = glCanvas.getContext("webgl", { preserveDrawingBuffer: true });
+      if (!gl) {
+        console.warn("WebGL not available");
+        window.__timelines["main"] = gsap.timeline({ paused: true });
+      } else {
+        gl.viewport(0, 0, 1200, 1080);
+        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
+        var sceneTextures = {};
+
+        function captureScene(sceneId) {
+          var scene = document.getElementById(sceneId);
+          var origOpacity = scene.style.opacity;
+          var origZ = scene.style.zIndex;
+          scene.style.opacity = "1";
+          scene.style.zIndex = "999";
+          scene.offsetHeight;
+          var c = document.createElement("canvas");
+          c.width = 1200;
+          c.height = 1080;
+          var ctx = c.getContext("2d");
+          ctx.fillStyle = window.getComputedStyle(scene).backgroundColor;
+          ctx.fillRect(0, 0, 1200, 1080);
+          var sr = scene.getBoundingClientRect();
+          var els = scene.querySelectorAll("*");
+          for (var i = 0; i < els.length; i++) {
+            var el = els[i],
+              cs = window.getComputedStyle(el);
+            if (cs.display === "none" || cs.visibility === "hidden") continue;
+            var r = el.getBoundingClientRect();
+            if (r.width < 1 || r.height < 1) continue;
+            var x = r.left - sr.left,
+              y = r.top - sr.top,
+              w = r.width,
+              h = r.height;
+            ctx.save();
+            ctx.globalAlpha = parseFloat(cs.opacity) || 1;
+            var bg = cs.backgroundColor;
+            if (bg && bg !== "rgba(0, 0, 0, 0)" && bg !== "transparent") {
+              ctx.fillStyle = bg;
+              ctx.fillRect(x, y, w, h);
+            }
+            var hasChildEls = el.querySelector("div,span,img,video");
+            var text = "";
+            for (var j = 0; j < el.childNodes.length; j++)
+              if (el.childNodes[j].nodeType === 3) text += el.childNodes[j].textContent;
+            text = text.trim();
+            if (text && !hasChildEls) {
+              ctx.font = cs.fontWeight + " " + cs.fontSize + " " + cs.fontFamily;
+              ctx.fillStyle = cs.color;
+              if (cs.letterSpacing && cs.letterSpacing !== "normal")
+                ctx.letterSpacing = cs.letterSpacing;
+              ctx.textAlign = "center";
+              ctx.textBaseline = "middle";
+              ctx.fillText(text, x + w / 2, y + h / 2);
+            }
+            ctx.restore();
+          }
+          scene.style.opacity = origOpacity;
+          scene.style.zIndex = origZ;
+          var tex = gl.createTexture();
+          gl.bindTexture(gl.TEXTURE_2D, tex);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+          gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, c);
+          sceneTextures[sceneId] = tex;
+        }
+
+        var vertSrc =
+          "attribute vec2 a_pos; varying vec2 v_uv; void main(){" +
+          "v_uv=a_pos*0.5+0.5; v_uv.y=1.0-v_uv.y; gl_Position=vec4(a_pos,0,1);}";
+        var quadBuf = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);
+        gl.bufferData(
+          gl.ARRAY_BUFFER,
+          new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),
+          gl.STATIC_DRAW,
+        );
+        function compileShader(src, type) {
+          var s = gl.createShader(type);
+          gl.shaderSource(s, src);
+          gl.compileShader(s);
+          if (!gl.getShaderParameter(s, gl.COMPILE_STATUS))
+            console.error("Shader:", gl.getShaderInfoLog(s));
+          return s;
+        }
+        function mkProg(fragSrc) {
+          var p = gl.createProgram();
+          gl.attachShader(p, compileShader(vertSrc, gl.VERTEX_SHADER));
+          gl.attachShader(p, compileShader(fragSrc, gl.FRAGMENT_SHADER));
+          gl.linkProgram(p);
+          if (!gl.getProgramParameter(p, gl.LINK_STATUS))
+            console.error("Link:", gl.getProgramInfoLog(p));
+          return p;
+        }
+
+        var H =
+          "precision mediump float;" +
+          "varying vec2 v_uv;" +
+          "uniform sampler2D u_from, u_to;" +
+          "uniform float u_progress;" +
+          "uniform vec2 u_resolution;\n";
+
+        var progPass = mkProg(H + "void main(){gl_FragColor=texture2D(u_from,v_uv);}");
+        var progTrans = mkProg(
+          H +
+            "void main(){vec2 c=v_uv-.5;float fromShift=u_progress*.06;float fr=texture2D(u_from,clamp(v_uv+c*fromShift,0.,1.)).r;float fg=texture2D(u_from,v_uv).g;float fb=texture2D(u_from,clamp(v_uv-c*fromShift,0.,1.)).b;vec3 fromSplit=vec3(fr,fg,fb);float toShift=(1.-u_progress)*.06;float tr=texture2D(u_to,clamp(v_uv-c*toShift,0.,1.)).r;float tg=texture2D(u_to,v_uv).g;float tb=texture2D(u_to,clamp(v_uv+c*toShift,0.,1.)).b;vec3 toSplit=vec3(tr,tg,tb);gl_FragColor=vec4(mix(fromSplit,toSplit,u_progress),1.);}",
+        );
+
+        function renderShader(prog, texFrom, texTo, progress) {
+          gl.useProgram(prog);
+          gl.activeTexture(gl.TEXTURE0);
+          gl.bindTexture(gl.TEXTURE_2D, texFrom);
+          gl.uniform1i(gl.getUniformLocation(prog, "u_from"), 0);
+          gl.activeTexture(gl.TEXTURE1);
+          gl.bindTexture(gl.TEXTURE_2D, texTo);
+          gl.uniform1i(gl.getUniformLocation(prog, "u_to"), 1);
+          gl.uniform1f(gl.getUniformLocation(prog, "u_progress"), progress);
+          gl.uniform2f(gl.getUniformLocation(prog, "u_resolution"), 1200, 1080);
+          var pos = gl.getAttribLocation(prog, "a_pos");
+          gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);
+          gl.enableVertexAttribArray(pos);
+          gl.vertexAttribPointer(pos, 2, gl.FLOAT, false, 0, 0);
+          gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+        }
+
+        function easeInOut(p) {
+          return p < 0.5 ? 2 * p * p : 1 - Math.pow(-2 * p + 2, 2) / 2;
+        }
+
+        captureScene("s1");
+        captureScene("s2");
+        glCanvas.style.display = "block";
+        renderShader(progPass, sceneTextures["s1"], sceneTextures["s1"], 0);
+        document.querySelectorAll(".scene").forEach(function (s) {
+          s.style.opacity = "0";
+        });
+
+        var tl = gsap.timeline({
+          paused: true,
+          onUpdate: function () {
+            var t = tl.time();
+            if (t >= 1.0 && t < 3.0) {
+              renderShader(
+                progTrans,
+                sceneTextures["s1"],
+                sceneTextures["s2"],
+                easeInOut((t - 1.0) / 2.0),
+              );
+            } else if (t >= 3.0) {
+              renderShader(progPass, sceneTextures["s2"], sceneTextures["s2"], 0);
+            } else {
+              renderShader(progPass, sceneTextures["s1"], sceneTextures["s1"], 0);
+            }
+          },
+        });
+        tl.to({ v: 0 }, { v: 1, duration: 4, ease: "none" }, 0);
+        window.__timelines["main"] = tl;
+      } // end if (gl)
+    </script>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="chromatic-radial-split" data-composition-src="compositions/chromatic-radial-split.html" data-start="0" data-duration="4" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/cinematic-zoom.mdx b/docs/catalog/blocks/cinematic-zoom.mdx
index 6608bf5cc6..c0c8739f2f 100644
--- a/docs/catalog/blocks/cinematic-zoom.mdx
+++ b/docs/catalog/blocks/cinematic-zoom.mdx
@@ -3,34 +3,398 @@ title: "Cinematic Zoom"
 description: "Shader transition with dramatic zoom blur"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/cinematic-zoom.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/cinematic-zoom.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/cinematic-zoom.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Cinematic Zoom preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add cinematic-zoom
-```
+<InstallCommand command="npx hyperframes add cinematic-zoom" />
 
 That writes one file: `compositions/cinematic-zoom.html`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`cinematic-zoom.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      @import url("https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Bebas+Neue&family=JetBrains+Mono:wght@400;700&family=Lato:wght@400;700&display=block");
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <style>
+        [data-composition-id="main"] {
+          width: 1920px;
+          height: 1080px;
+          overflow: hidden;
+          position: relative;
+          background: #3d348b;
+        }
+
+        /* Blueprint grid */
+        .bp-grid {
+          position: absolute;
+          inset: 0;
+          background-image:
+            linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
+            linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
+          background-size: 40px 40px;
+          pointer-events: none;
+        }
+
+        /* Layout */
+        .bp-left {
+          position: absolute;
+          left: 0;
+          top: 0;
+          bottom: 0;
+          width: 1200px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .bp-right {
+          position: absolute;
+          right: 0;
+          top: 0;
+          bottom: 0;
+          width: 720px;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          padding: 60px 60px 60px 40px;
+        }
+        .bp-divider {
+          position: absolute;
+          left: 1200px;
+          top: 60px;
+          bottom: 60px;
+          width: 1px;
+          background: #f7b801;
+          opacity: 0.15;
+        }
+        .bp-number {
+          font-family: "Space Mono", monospace;
+          font-size: 14px;
+          font-weight: 700;
+          letter-spacing: 0.4em;
+          text-transform: uppercase;
+          position: absolute;
+          top: 40px;
+          left: 60px;
+          color: #f7b801;
+        }
+
+        /* Right panel typography */
+        .bp-name {
+          font-family: "Bebas Neue", sans-serif;
+          font-size: 38px;
+          letter-spacing: 0.08em;
+          margin-bottom: 20px;
+          color: #f7b801;
+        }
+        .bp-plabel {
+          font-family: "Space Mono", monospace;
+          font-size: 11px;
+          font-weight: 700;
+          letter-spacing: 0.3em;
+          text-transform: uppercase;
+          margin-bottom: 10px;
+          color: #f7b801;
+          opacity: 0.5;
+        }
+        .bp-prompt {
+          font-family: "JetBrains Mono", monospace;
+          font-size: 20px;
+          line-height: 1.6;
+          padding: 16px 20px;
+          border-radius: 6px;
+          margin-bottom: 20px;
+          color: #f7b801;
+          background: rgba(247, 184, 1, 0.06);
+          border: 1px solid rgba(247, 184, 1, 0.12);
+        }
+        .bp-desc {
+          font-family: "Lato", sans-serif;
+          font-size: 17px;
+          line-height: 1.6;
+          color: #a0a0c0;
+          opacity: 0.55;
+        }
+
+        /* GL scenes (hidden, just for texture capture) */
+        .scene {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1200px;
+          height: 1080px;
+          overflow: hidden;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .scene-label {
+          font-family: "Bebas Neue", sans-serif;
+          font-size: 140px;
+          letter-spacing: 0.06em;
+          opacity: 0.12;
+        }
+      </style>
+
+      <div class="bp-grid"></div>
+      <div class="bp-divider"></div>
+      <div class="bp-number">07 / 14</div>
+
+      <!-- GL demo scenes (captured as textures, then hidden) -->
+      <div id="s1" class="scene" style="background: #3d348b">
+        <div class="scene-label" style="color: #f7b801">SCENE A</div>
+      </div>
+      <div id="s2" class="scene" style="background: #f7b801; opacity: 0">
+        <div class="scene-label" style="color: #3d348b">SCENE B</div>
+      </div>
+
+      <!-- GL canvas (left panel only) -->
+      <canvas
+        id="gl-canvas"
+        width="1200"
+        height="1080"
+        style="
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1200px;
+          height: 1080px;
+          z-index: 10;
+          pointer-events: none;
+          display: none;
+        "
+      >
+      </canvas>
+
+      <!-- Right panel metadata -->
+      <div class="bp-right">
+        <div class="bp-name">Cinematic Zoom</div>
+        <div class="bp-plabel">Prompt</div>
+        <div class="bp-prompt">"use cinematic zoom shader transition"</div>
+        <div class="bp-desc">
+          Both scenes zoom-blur with per-channel radial offset. From zooms outward, to zooms inward
+          from tight.
+        </div>
+      </div>
 
-It runs for 4 seconds at 1920×1080. Paste this into your composition:
+      <div
+        id="driver"
+        class="clip"
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
 
-```html index.html
-<div
-  data-composition-id="cinematic-zoom"
-  data-composition-src="compositions/cinematic-zoom.html"
-  data-start="0"
-  data-duration="4"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      var glCanvas = document.getElementById("gl-canvas");
+      var gl = glCanvas.getContext("webgl", { preserveDrawingBuffer: true });
+      if (!gl) {
+        console.warn("WebGL not available");
+        window.__timelines["main"] = gsap.timeline({ paused: true });
+      } else {
+        gl.viewport(0, 0, 1200, 1080);
+        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
+        var sceneTextures = {};
+
+        function captureScene(sceneId) {
+          var scene = document.getElementById(sceneId);
+          var origOpacity = scene.style.opacity;
+          var origZ = scene.style.zIndex;
+          scene.style.opacity = "1";
+          scene.style.zIndex = "999";
+          scene.offsetHeight;
+          var c = document.createElement("canvas");
+          c.width = 1200;
+          c.height = 1080;
+          var ctx = c.getContext("2d");
+          ctx.fillStyle = window.getComputedStyle(scene).backgroundColor;
+          ctx.fillRect(0, 0, 1200, 1080);
+          var sr = scene.getBoundingClientRect();
+          var els = scene.querySelectorAll("*");
+          for (var i = 0; i < els.length; i++) {
+            var el = els[i],
+              cs = window.getComputedStyle(el);
+            if (cs.display === "none" || cs.visibility === "hidden") continue;
+            var r = el.getBoundingClientRect();
+            if (r.width < 1 || r.height < 1) continue;
+            var x = r.left - sr.left,
+              y = r.top - sr.top,
+              w = r.width,
+              h = r.height;
+            ctx.save();
+            ctx.globalAlpha = parseFloat(cs.opacity) || 1;
+            var bg = cs.backgroundColor;
+            if (bg && bg !== "rgba(0, 0, 0, 0)" && bg !== "transparent") {
+              ctx.fillStyle = bg;
+              ctx.fillRect(x, y, w, h);
+            }
+            var hasChildEls = el.querySelector("div,span,img,video");
+            var text = "";
+            for (var j = 0; j < el.childNodes.length; j++)
+              if (el.childNodes[j].nodeType === 3) text += el.childNodes[j].textContent;
+            text = text.trim();
+            if (text && !hasChildEls) {
+              ctx.font = cs.fontWeight + " " + cs.fontSize + " " + cs.fontFamily;
+              ctx.fillStyle = cs.color;
+              if (cs.letterSpacing && cs.letterSpacing !== "normal")
+                ctx.letterSpacing = cs.letterSpacing;
+              ctx.textAlign = "center";
+              ctx.textBaseline = "middle";
+              ctx.fillText(text, x + w / 2, y + h / 2);
+            }
+            ctx.restore();
+          }
+          scene.style.opacity = origOpacity;
+          scene.style.zIndex = origZ;
+          var tex = gl.createTexture();
+          gl.bindTexture(gl.TEXTURE_2D, tex);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+          gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, c);
+          sceneTextures[sceneId] = tex;
+        }
+
+        var vertSrc =
+          "attribute vec2 a_pos; varying vec2 v_uv; void main(){" +
+          "v_uv=a_pos*0.5+0.5; v_uv.y=1.0-v_uv.y; gl_Position=vec4(a_pos,0,1);}";
+        var quadBuf = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);
+        gl.bufferData(
+          gl.ARRAY_BUFFER,
+          new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),
+          gl.STATIC_DRAW,
+        );
+        function compileShader(src, type) {
+          var s = gl.createShader(type);
+          gl.shaderSource(s, src);
+          gl.compileShader(s);
+          if (!gl.getShaderParameter(s, gl.COMPILE_STATUS))
+            console.error("Shader:", gl.getShaderInfoLog(s));
+          return s;
+        }
+        function mkProg(fragSrc) {
+          var p = gl.createProgram();
+          gl.attachShader(p, compileShader(vertSrc, gl.VERTEX_SHADER));
+          gl.attachShader(p, compileShader(fragSrc, gl.FRAGMENT_SHADER));
+          gl.linkProgram(p);
+          if (!gl.getProgramParameter(p, gl.LINK_STATUS))
+            console.error("Link:", gl.getProgramInfoLog(p));
+          return p;
+        }
+
+        var H =
+          "precision mediump float;" +
+          "varying vec2 v_uv;" +
+          "uniform sampler2D u_from, u_to;" +
+          "uniform float u_progress;" +
+          "uniform vec2 u_resolution;\n";
+
+        var progPass = mkProg(H + "void main(){gl_FragColor=texture2D(u_from,v_uv);}");
+        var progTrans = mkProg(
+          H +
+            "void main(){vec2 d=v_uv-vec2(.5);float fromS=u_progress*.08;float toS=(1.-u_progress)*.06;float fr=0.,fg=0.,fb=0.;for(int i=0;i<12;i++){float f=float(i)/12.;fr+=texture2D(u_from,v_uv-d*(fromS*1.06)*f).r;fg+=texture2D(u_from,v_uv-d*fromS*f).g;fb+=texture2D(u_from,v_uv-d*(fromS*.94)*f).b;}vec3 fromBl=vec3(fr,fg,fb)/12.;float tr=0.,tg=0.,tb=0.;for(int i=0;i<12;i++){float f=float(i)/12.;tr+=texture2D(u_to,v_uv+d*(toS*1.06)*f).r;tg+=texture2D(u_to,v_uv+d*toS*f).g;tb+=texture2D(u_to,v_uv+d*(toS*.94)*f).b;}vec3 toBl=vec3(tr,tg,tb)/12.;gl_FragColor=vec4(mix(fromBl,toBl,u_progress),1.);}",
+        );
+
+        function renderShader(prog, texFrom, texTo, progress) {
+          gl.useProgram(prog);
+          gl.activeTexture(gl.TEXTURE0);
+          gl.bindTexture(gl.TEXTURE_2D, texFrom);
+          gl.uniform1i(gl.getUniformLocation(prog, "u_from"), 0);
+          gl.activeTexture(gl.TEXTURE1);
+          gl.bindTexture(gl.TEXTURE_2D, texTo);
+          gl.uniform1i(gl.getUniformLocation(prog, "u_to"), 1);
+          gl.uniform1f(gl.getUniformLocation(prog, "u_progress"), progress);
+          gl.uniform2f(gl.getUniformLocation(prog, "u_resolution"), 1200, 1080);
+          var pos = gl.getAttribLocation(prog, "a_pos");
+          gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);
+          gl.enableVertexAttribArray(pos);
+          gl.vertexAttribPointer(pos, 2, gl.FLOAT, false, 0, 0);
+          gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+        }
+
+        function easeInOut(p) {
+          return p < 0.5 ? 2 * p * p : 1 - Math.pow(-2 * p + 2, 2) / 2;
+        }
+
+        captureScene("s1");
+        captureScene("s2");
+        glCanvas.style.display = "block";
+        renderShader(progPass, sceneTextures["s1"], sceneTextures["s1"], 0);
+        document.querySelectorAll(".scene").forEach(function (s) {
+          s.style.opacity = "0";
+        });
+
+        var tl = gsap.timeline({
+          paused: true,
+          onUpdate: function () {
+            var t = tl.time();
+            if (t >= 1.0 && t < 3.0) {
+              renderShader(
+                progTrans,
+                sceneTextures["s1"],
+                sceneTextures["s2"],
+                easeInOut((t - 1.0) / 2.0),
+              );
+            } else if (t >= 3.0) {
+              renderShader(progPass, sceneTextures["s2"], sceneTextures["s2"], 0);
+            } else {
+              renderShader(progPass, sceneTextures["s1"], sceneTextures["s1"], 0);
+            }
+          },
+        });
+        tl.to({ v: 0 }, { v: 1, duration: 4, ease: "none" }, 0);
+        window.__timelines["main"] = tl;
+      } // end if (gl)
+    </script>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="cinematic-zoom" data-composition-src="compositions/cinematic-zoom.html" data-start="0" data-duration="4" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/code-3d-extrude.mdx b/docs/catalog/blocks/code-3d-extrude.mdx
index 79e664fb7e..376b4607aa 100644
--- a/docs/catalog/blocks/code-3d-extrude.mdx
+++ b/docs/catalog/blocks/code-3d-extrude.mdx
@@ -3,34 +3,645 @@ title: "Code 3D Extrude"
 description: "Syntax-highlighted code on a lit, beveled 3D slab that rotates through real space and settles to a readable rest — true WebGL depth and lighting, not a 2D transform."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-3d-extrude.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-3d-extrude.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/code-3d-extrude.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Code 3D Extrude preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add code-3d-extrude
-```
+<InstallCommand command="npx hyperframes add code-3d-extrude" />
 
 That writes one file: `compositions/code-3d-extrude.html`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`code-3d-extrude.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Code 3D Extrude</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #05070b;
+      }
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+      }
+      #gl {
+        position: absolute;
+        inset: 0;
+        width: 1920px;
+        height: 1080px;
+        display: block;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="code-3d-extrude"
+      data-start="0"
+      data-duration="8"
+      data-width="1920"
+      data-height="1080"
+    >
+      <canvas id="gl" width="1920" height="1080"></canvas>
+    </div>
+    <script>
+      window.__TOKENS = {
+        feature: {
+          lang: "js",
+          theme: "github-dark",
+          bg: "#24292e",
+          fg: "#e1e4e8",
+          states: [
+            {
+              code: 'async function loadConfig(path) {\n  const raw = await readFile(path, "utf8")\n  const config = JSON.parse(raw)\n  return validate(config)\n}',
+              tokens: [
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-0",
+                  content: "async",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-1",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-2",
+                  content: "function",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-3",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-4",
+                  content: "loadConfig",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-5",
+                  content: "(",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-6",
+                  content: "path",
+                  color: "#FFAB70",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-7",
+                  content: ") {",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-8",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-9",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-10",
+                  content: "const",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-11",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-12",
+                  content: "raw",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-13",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-14",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-15",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-16",
+                  content: "await",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-17",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-18",
+                  content: "readFile",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-19",
+                  content: "(path,",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-20",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-21",
+                  content: '"utf8"',
+                  color: "#9ECBFF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-22",
+                  content: ")",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-23",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-24",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-25",
+                  content: "const",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-26",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-27",
+                  content: "config",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-28",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-29",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-30",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-31",
+                  content: "JSON",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-32",
+                  content: ".",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-33",
+                  content: "parse",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-34",
+                  content: "(raw)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-35",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-36",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-37",
+                  content: "return",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-38",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-39",
+                  content: "validate",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-40",
+                  content: "(config)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-41",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-42",
+                  content: "}",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-43",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+              ],
+            },
+          ],
+        },
+      };
+      window.__BLOCK = {
+        id: "code-3d-extrude",
+        effect: "extrude",
+        seq: "feature",
+        duration: 8,
+        seed: 7,
+      };
+    </script>
+    <script>
+      // hf-code-anim-gl.js — WebGL code-animation engine for the "crazy" Code Animations blocks.
+      //
+      // Bridges the baked Shiki tokens (window.__TOKENS) into Three.js: the tokens are drawn once
+      // to an offscreen 2D canvas (a CanvasTexture), which then drives a lit 3D slab, a dissolve
+      // shader, or a GPU particle system. Determinism per the project contract:
+      //   - render only via tl.eventCallback("onUpdate", …) + one initial render() — never rAF
+      //   - all randomness from a seeded mulberry32 — never Math.random / Date.now
+      //   - canvas drawn once after document.fonts.ready (final glyph metrics)
+      //   - paused GSAP timeline registered on window.__timelines[id]; HF seeks it per frame
+      //
+      // Each block sets window.__BLOCK = { id, effect, seq, duration, seed } and includes this engine.
+      (function () {
+        "use strict";
+        var T = window.__TOKENS || {};
+
+        // ---- seeded PRNG (no Math.random) -----------------------------------------
+        function mulberry32(a) {
+          return function () {
+            a |= 0;
+            a = (a + 0x6d2b79f5) | 0;
+            var t = Math.imul(a ^ (a >>> 15), 1 | a);
+            t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+            return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+          };
+        }
+
+        // ---- split a token state into lines of {content,color} --------------------
+        function splitLines(state) {
+          var lines = [[]];
+          for (var i = 0; i < state.tokens.length; i++) {
+            var t = state.tokens[i];
+            if (t.content === "\n") {
+              lines.push([]);
+              continue;
+            }
+            lines[lines.length - 1].push(t);
+          }
+          while (lines.length && lines[lines.length - 1].length === 0) lines.pop();
+          return lines;
+        }
+
+        // ---- THE BRIDGE: draw baked tokens to an offscreen 2D canvas ---------------
+        // Returns { canvas, W, H, lines, lineH, padY, fontPx } so effects can sample it.
+        function drawCodeToCanvas(state, opts) {
+          opts = opts || {};
+          var fontPx = opts.fontPx || 36;
+          var lineH = opts.lineH || 54;
+          var padX = opts.padX || 70;
+          var padY = opts.padY || 60;
+          var weight = opts.weight || 500;
+          var font = weight + " " + fontPx + 'px "JetBrains Mono", monospace';
+
+          var lines = splitLines(state);
+          var measure = document.createElement("canvas").getContext("2d");
+          measure.font = font;
+          var maxW = 0;
+          for (var i = 0; i < lines.length; i++) {
+            var w = 0;
+            for (var j = 0; j < lines[i].length; j++)
+              w += measure.measureText(lines[i][j].content).width;
+            if (w > maxW) maxW = w;
+          }
+          var W = Math.max(2, Math.ceil(maxW + padX * 2));
+          var H = Math.max(2, Math.ceil(lines.length * lineH + padY * 2));
+
+          var canvas = document.createElement("canvas");
+          canvas.width = W;
+          canvas.height = H;
+          var ctx = canvas.getContext("2d");
+          if (opts.transparent) {
+            ctx.clearRect(0, 0, W, H);
+          } else {
+            ctx.fillStyle = opts.bg || "#0b0f17";
+            ctx.fillRect(0, 0, W, H);
+          }
+          ctx.textBaseline = "top";
+          ctx.font = font;
+          for (var li = 0; li < lines.length; li++) {
+            var x = padX;
+            var y = padY + li * lineH;
+            for (var k = 0; k < lines[li].length; k++) {
+              var tok = lines[li][k];
+              ctx.fillStyle = tok.color;
+              ctx.fillText(tok.content, x, y);
+              x += ctx.measureText(tok.content).width;
+            }
+          }
+          return {
+            canvas: canvas,
+            W: W,
+            H: H,
+            lines: lines.length,
+            lineH: lineH,
+            padY: padY,
+            fontPx: fontPx,
+          };
+        }
+
+        function fxExtrude(THREE, scene, camera, renderer, state, st, tl, dur) {
+          scene.background = new THREE.Color(0x05070b);
+          var code = drawCodeToCanvas(state, {
+            fontPx: 38,
+            lineH: 56,
+            padX: 80,
+            padY: 70,
+            weight: 600,
+          });
+          var tex = new THREE.CanvasTexture(code.canvas);
+          tex.minFilter = THREE.LinearFilter;
+          tex.magFilter = THREE.LinearFilter;
+          tex.generateMipmaps = false;
+
+          var aspect = code.W / code.H;
+          var slabH = 6.2;
+          var slabW = slabH * aspect;
+          var depth = 0.5;
+
+          // beveled slab: rounded extruded rectangle
+          var hw = slabW / 2;
+          var hh = slabH / 2;
+          var r = 0.18;
+          var shape = new THREE.Shape();
+          shape.moveTo(-hw + r, -hh);
+          shape.lineTo(hw - r, -hh);
+          shape.quadraticCurveTo(hw, -hh, hw, -hh + r);
+          shape.lineTo(hw, hh - r);
+          shape.quadraticCurveTo(hw, hh, hw - r, hh);
+          shape.lineTo(-hw + r, hh);
+          shape.quadraticCurveTo(-hw, hh, -hw, hh - r);
+          shape.lineTo(-hw, -hh + r);
+          shape.quadraticCurveTo(-hw, -hh, -hw + r, -hh);
+          var geo = new THREE.ExtrudeGeometry(shape, {
+            depth: depth,
+            bevelEnabled: true,
+            bevelThickness: 0.12,
+            bevelSize: 0.1,
+            bevelSegments: 3,
+            steps: 1,
+          });
+          geo.center();
+          // UVs from ExtrudeGeometry don't map the texture nicely to the face; remap front-face UVs from XY bounds.
+          geo.computeBoundingBox();
+          var bb = geo.boundingBox;
+          var sizeX = bb.max.x - bb.min.x;
+          var sizeY = bb.max.y - bb.min.y;
+          var pos = geo.attributes.position;
+          var uv = geo.attributes.uv;
+          for (var vi = 0; vi < pos.count; vi++) {
+            uv.setXY(vi, (pos.getX(vi) - bb.min.x) / sizeX, (pos.getY(vi) - bb.min.y) / sizeY);
+          }
+          uv.needsUpdate = true;
+
+          // Face is an unlit "screen" — shows the exact vivid Shiki colors (no PBR/emissive wash).
+          // The 3D read comes from the lit, beveled EDGES + perspective, like a glowing monitor.
+          var faceMat = new THREE.MeshBasicMaterial({ map: tex });
+          var edgeMat = new THREE.MeshStandardMaterial({
+            color: 0x141d2b,
+            roughness: 0.3,
+            metalness: 0.4,
+          });
+          // ExtrudeGeometry groups: 0 = front+back faces, 1 = sides. Front shows the code.
+          var slab = new THREE.Mesh(geo, [faceMat, edgeMat]);
+          scene.add(slab);
 
-It runs for 8 seconds at 1920×1080. Paste this into your composition:
+          scene.add(new THREE.AmbientLight(0xffffff, 0.5));
+          var key = new THREE.DirectionalLight(0xbcd4ff, 1.25);
+          key.position.set(5, 7, 9);
+          scene.add(key);
+          var rim = new THREE.DirectionalLight(0x4fffa0, 0.45);
+          rim.position.set(-7, -3, 5);
+          scene.add(rim);
 
-```html index.html
-<div
-  data-composition-id="code-3d-extrude"
-  data-composition-src="compositions/code-3d-extrude.html"
-  data-start="0"
-  data-duration="8"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+          camera.position.set(0, 0, 10);
+
+          // fit camera distance so the WHOLE slab fits (width-limited for wide code), ~78% fill
+          var vfov = (camera.fov * Math.PI) / 180;
+          var screenAspect = 1920 / 1080;
+          var fitH = slabH / 2 / Math.tan(vfov / 2) / 0.78;
+          var fitW = slabW / 2 / (Math.tan(vfov / 2) * screenAspect) / 0.78;
+          var fitZ = Math.max(fitH, fitW);
+
+          st.rotY = -1.0;
+          st.rotX = 0.4;
+          st.camZ = fitZ + 6;
+          tl.to(st, { rotY: 0, rotX: 0, camZ: fitZ, duration: dur * 0.6, ease: "power3.out" }, 0);
+          // gentle breathing drift at rest (subtle — stays readable)
+          tl.to(
+            st,
+            { rotY: 0.06, rotX: -0.02, duration: dur * 0.4, ease: "sine.inOut" },
+            dur * 0.6,
+          );
+
+          return function () {
+            slab.rotation.y = st.rotY;
+            slab.rotation.x = st.rotX;
+            camera.position.z = st.camZ;
+            camera.lookAt(0, 0, 0);
+            // boot loop's render() issues the single renderer.render() — don't double-render here
+          };
+        }
+
+        // ---- dispatch + boot ------------------------------------------------------
+        function buildEffect(THREE, scene, camera, renderer, spec, st, tl) {
+          var state = T[spec.seq].states[0];
+          var dur = spec.duration;
+          if (spec.effect === "extrude")
+            return fxExtrude(THREE, scene, camera, renderer, state, st, tl, dur);
+          return function () {};
+        }
+
+        // Free GPU resources (renderer, geometries, materials, textures) on page teardown.
+        // One-shot renders exit per job so nothing leaks there; this guards long-lived
+        // Studio/player sessions that reload. Fires only on unload — never during capture.
+        function disposeGL(renderer, scene) {
+          scene.traverse(function (o) {
+            if (o.geometry && o.geometry.dispose) o.geometry.dispose();
+            var mats = o.material ? (Array.isArray(o.material) ? o.material : [o.material]) : [];
+            mats.forEach(function (m) {
+              if (m.map && m.map.dispose) m.map.dispose();
+              if (
+                m.uniforms &&
+                m.uniforms.uTex &&
+                m.uniforms.uTex.value &&
+                m.uniforms.uTex.value.dispose
+              ) {
+                m.uniforms.uTex.value.dispose();
+              }
+              if (m.dispose) m.dispose();
+            });
+          });
+          if (renderer.dispose) renderer.dispose();
+        }
+
+        function go() {
+          var spec = window.__BLOCK;
+          var root = document.getElementById("root");
+          var glcanvas = document.getElementById("gl");
+          var W = 1920;
+          var H = 1080;
+          window.__timelines = window.__timelines || {};
+          var tl = gsap.timeline({ paused: true });
+          window.__timelines[spec.id] = tl; // register synchronously
+
+          var THREE = window.THREE;
+          var renderer = new THREE.WebGLRenderer({
+            canvas: glcanvas,
+            antialias: true,
+            alpha: false,
+            preserveDrawingBuffer: true,
+          });
+          renderer.setPixelRatio(1);
+          renderer.setSize(W, H, false);
+          var scene = new THREE.Scene();
+          var camera = new THREE.PerspectiveCamera(45, W / H, 0.1, 200);
+          var st = {};
+
+          document.fonts.ready.then(function () {
+            var renderFn = buildEffect(THREE, scene, camera, renderer, spec, st, tl);
+            function render() {
+              renderFn();
+              renderer.render(scene, camera);
+            }
+            tl.eventCallback("onUpdate", render);
+            var dur = parseFloat(root.dataset.duration) || tl.duration();
+            tl.to({}, { duration: dur }, 0); // pad to full composition length
+            render(); // paint frame 0
+            window.addEventListener("beforeunload", function () {
+              disposeGL(renderer, scene);
+            });
+          });
+        }
+
+        if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", go);
+        else go();
+      })();
+    </script>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="code-3d-extrude" data-composition-src="compositions/code-3d-extrude.html" data-start="0" data-duration="8" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/code-diff.mdx b/docs/catalog/blocks/code-diff.mdx
index d5cdc69433..971b5c7cf5 100644
--- a/docs/catalog/blocks/code-diff.mdx
+++ b/docs/catalog/blocks/code-diff.mdx
@@ -3,34 +3,848 @@ title: "Code Diff"
 description: "An edit shown as a colored diff — removed lines collapse in red, added lines expand in green."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-diff.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-diff.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/code-diff.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Code Diff preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add code-diff
-```
+<InstallCommand command="npx hyperframes add code-diff" />
 
 That writes one file: `compositions/code-diff.html`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`code-diff.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Code Diff</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #05070b;
+      }
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        font-family: "JetBrains Mono", monospace;
+        color: #e6edf3;
+      }
+      .bg-field {
+        position: absolute;
+        inset: 0;
+        background: radial-gradient(1200px 700px at 50% 18%, #0e1726 0%, #070b12 55%, #05070b 100%);
+      }
+      .bg-grid {
+        position: absolute;
+        inset: 0;
+        background-image:
+          linear-gradient(rgba(88, 166, 255, 0.05) 1px, transparent 1px),
+          linear-gradient(90deg, rgba(88, 166, 255, 0.05) 1px, transparent 1px);
+        background-size: 64px 64px;
+        mask-image: radial-gradient(1100px 620px at 50% 42%, #000 0%, transparent 78%);
+      }
+      .bg-glow {
+        position: absolute;
+        width: 900px;
+        height: 900px;
+        border-radius: 50%;
+        filter: blur(120px);
+        opacity: 0.5;
+      }
+      .bg-glow.a {
+        background: #1f6feb55;
+        left: -180px;
+        top: -200px;
+      }
+      .bg-glow.b {
+        background: #2ea04355;
+        right: -200px;
+        bottom: -260px;
+      }
+      .editor {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        width: 1380px;
+        height: 800px;
+        background: #0b0f17;
+        border: 1px solid #1d2733;
+        border-radius: 16px;
+        box-shadow:
+          0 40px 120px rgba(0, 0, 0, 0.6),
+          0 2px 0 rgba(255, 255, 255, 0.03) inset;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+      }
+      .titlebar {
+        height: 56px;
+        flex: 0 0 56px;
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        padding: 0 22px;
+        background: linear-gradient(#11161f, #0c111a);
+        border-bottom: 1px solid #1b2430;
+      }
+      .dots {
+        display: flex;
+        gap: 10px;
+      }
+      .dot {
+        width: 14px;
+        height: 14px;
+        border-radius: 50%;
+      }
+      .dot.r {
+        background: #ff5f57;
+      }
+      .dot.y {
+        background: #febc2e;
+      }
+      .dot.g {
+        background: #28c840;
+      }
+      .filename {
+        font-size: 19px;
+        color: #8b98a9;
+        letter-spacing: 0.2px;
+      }
+      .filename .accent {
+        color: #d6e2f0;
+      }
+      .code-surface {
+        position: relative;
+        flex: 1 1 auto;
+        overflow: hidden;
+      }
+      .scene {
+        position: absolute;
+        inset: 0;
+        opacity: 0;
+        will-change: opacity;
+      }
+      .code {
+        position: absolute;
+        top: 38px;
+        left: 0;
+        right: 0;
+        padding: 0 44px 0 104px;
+        font-size: 30px;
+        line-height: 46px;
+        font-variant-ligatures: none;
+        tab-size: 2;
+      }
+      .gutter {
+        position: absolute;
+        top: 38px;
+        left: 0;
+        width: 84px;
+        padding-right: 18px;
+        font-size: 30px;
+        line-height: 46px;
+        text-align: right;
+        color: #828c9b;
+        user-select: none;
+      }
+      .ln {
+        display: block;
+        height: 46px;
+      }
+      .line {
+        display: block;
+        min-height: 46px;
+        white-space: pre;
+        position: relative;
+        z-index: 1;
+      }
+      .tok {
+        display: inline-block;
+        white-space: pre;
+        will-change: transform, opacity;
+      }
+      .caret {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 3px;
+        height: 32px;
+        margin-top: 6px;
+        background: #58a6ff;
+        border-radius: 1px;
+        z-index: 3;
+      }
+      .hl-box {
+        position: absolute;
+        background: rgba(88, 166, 255, 0.16);
+        border-left: 3px solid #58a6ff;
+        border-radius: 6px;
+        z-index: 0;
+        overflow: hidden;
+      }
+      .diff-line {
+        display: block;
+        min-height: 0;
+        line-height: 46px;
+        white-space: pre;
+        position: relative;
+        overflow: hidden;
+        padding-left: 14px;
+      }
+      .diff-sign {
+        display: inline-block;
+        width: 22px;
+        color: #41506220;
+      }
+      .diff-del {
+        background: rgba(248, 81, 73, 0.12);
+        box-shadow: inset 3px 0 #f85149;
+      }
+      .diff-add {
+        background: rgba(63, 185, 80, 0.12);
+        box-shadow: inset 3px 0 #3fb950;
+      }
+      .diff-del .diff-sign {
+        color: #f85149;
+      }
+      .diff-add .diff-sign {
+        color: #3fb950;
+      }
+      .flight-block {
+        position: absolute;
+        white-space: pre;
+        font-size: 27px;
+        line-height: 40px;
+        padding: 11px 22px;
+        border-radius: 11px;
+        background: #0f1722;
+        border: 1px solid #233044;
+        box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5);
+        will-change: transform, opacity;
+      }
+      .flight-target {
+        position: absolute;
+        border: 1.5px dashed #2a3a4f;
+        border-radius: 14px;
+        opacity: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="code-diff"
+      data-start="0"
+      data-duration="6"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="bg-field" data-layout-ignore></div>
+      <div class="bg-grid" data-layout-ignore></div>
+      <div class="bg-glow a" data-layout-ignore></div>
+      <div class="bg-glow b" data-layout-ignore></div>
+      <div class="editor" id="editor" data-layout-ignore>
+        <div class="titlebar">
+          <div class="dots">
+            <span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
+          </div>
+          <span class="filename"><span class="accent">greet.js</span> — Code Diff</span>
+        </div>
+        <div class="code-surface" id="surface"></div>
+      </div>
+    </div>
+    <script>
+      window.__TOKENS = {
+        diff: {
+          lang: "js",
+          theme: "github-dark",
+          bg: "#24292e",
+          fg: "#e1e4e8",
+          states: [
+            {
+              code: 'function greet(name) {\n  console.log("hi " + name)\n}',
+              tokens: [
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-0",
+                  content: "function",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-1",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-2",
+                  content: "greet",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-3",
+                  content: "(",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-4",
+                  content: "name",
+                  color: "#FFAB70",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-5",
+                  content: ") {",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-6",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-7",
+                  content: "  ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-8",
+                  content: "console.",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-9",
+                  content: "log",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-10",
+                  content: "(",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-11",
+                  content: '"hi "',
+                  color: "#9ECBFF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-12",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-13",
+                  content: "+",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-14",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-15",
+                  content: "name)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-16",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-17",
+                  content: "}",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-18",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+              ],
+            },
+            {
+              code: 'function greet(name, lang) {\n  const msg = translate("hi", lang)\n  console.log(`${msg} ${name}`)\n}',
+              tokens: [
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-0",
+                  content: "function",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-1",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-2",
+                  content: "greet",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-3",
+                  content: "(",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-4",
+                  content: "name",
+                  color: "#FFAB70",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-5",
+                  content: ",",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-6",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-7",
+                  content: "lang",
+                  color: "#FFAB70",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-5",
+                  content: ") {",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-6",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-7",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-11",
+                  content: "const",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-12",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-13",
+                  content: "msg",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-14",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-15",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-16",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-17",
+                  content: "translate",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-10",
+                  content: "(",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-19",
+                  content: '"hi"',
+                  color: "#9ECBFF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-20",
+                  content: ", lang)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-21",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-22",
+                  content: "  ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-23",
+                  content: "console.",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-9",
+                  content: "log",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-25",
+                  content: "(",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-26",
+                  content: "`${",
+                  color: "#9ECBFF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-27",
+                  content: "msg",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-28",
+                  content: "} ${",
+                  color: "#9ECBFF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-29",
+                  content: "name",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-30",
+                  content: "}`",
+                  color: "#9ECBFF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-31",
+                  content: ")",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-16",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-17",
+                  content: "}",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-34",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+              ],
+            },
+          ],
+        },
+      };
+      window.__BLOCK = { id: "code-diff", effect: "diff", seq: "diff", duration: 6 };
+    </script>
+    <script>
+      // hf-code-anim.js — self-contained code-animation engine for HyperFrames registry blocks.
+      //
+      // Reuses Shiki Magic Move's baked output (window.__TOKENS, baked at author time) and
+      // drives the animation as a PAUSED GSAP timeline the HyperFrames engine seeks per frame —
+      // NOT CSS transitions (those break under non-sequential frame seeking). FLIP measurement
+      // runs once inside document.fonts.ready (glyph metrics must be final). Each block sets
+      // window.__BLOCK = { id, effect, seq, line?, duration } and includes this engine; the
+      // engine builds one scene that fills the composition and registers window.__timelines[id].
+      (function () {
+        "use strict";
+        var T = window.__TOKENS || {};
+
+        function lineDiv() {
+          var d = document.createElement("div");
+          d.className = "line";
+          return d;
+        }
+
+        // Render a code state's keyed tokens into codeEl as lines of inline-block .tok spans.
+        function renderState(codeEl, state) {
+          codeEl.textContent = "";
+          var keyToEl = new Map();
+          var line = lineDiv();
+          codeEl.appendChild(line);
+          for (var i = 0; i < state.tokens.length; i++) {
+            var t = state.tokens[i];
+            if (t.content === "\n") {
+              line = lineDiv();
+              codeEl.appendChild(line);
+              continue;
+            }
+            var span = document.createElement("span");
+            span.className = "tok";
+            span.textContent = t.content;
+            span.style.color = t.color;
+            if (t.fontStyle & 1) span.style.fontStyle = "italic";
+            if (t.fontStyle & 2) span.style.fontWeight = "700";
+            line.appendChild(span);
+            keyToEl.set(t.key, span);
+          }
+          var last = codeEl.lastChild;
+          if (last && last.className === "line" && last.children.length === 0)
+            codeEl.removeChild(last);
+          return keyToEl;
+        }
+
+        function rectsOf(keyToEl) {
+          var m = new Map();
+          keyToEl.forEach(function (el, k) {
+            var r = el.getBoundingClientRect();
+            m.set(k, { left: r.left, top: r.top });
+          });
+          return m;
+        }
+
+        function makeScene(surface, withGutter) {
+          var scene = document.createElement("div");
+          scene.className = "scene";
+          if (withGutter) {
+            var g = document.createElement("div");
+            g.className = "gutter";
+            scene.appendChild(g);
+          }
+          var code = document.createElement("div");
+          code.className = "code";
+          scene.appendChild(code);
+          surface.appendChild(scene);
+          return { scene: scene, code: code, gutter: scene.querySelector(".gutter") };
+        }
+
+        function fillGutter(g, n) {
+          var html = "";
+          for (var i = 1; i <= n; i++) html += '<span class="ln">' + i + "</span>";
+          g.innerHTML = html;
+        }
 
-It runs for 6 seconds at 1920×1080. Paste this into your composition:
+        function splitLines(state) {
+          var lines = [{ text: "", tokens: [] }];
+          for (var i = 0; i < state.tokens.length; i++) {
+            var t = state.tokens[i];
+            if (t.content === "\n") {
+              lines.push({ text: "", tokens: [] });
+              continue;
+            }
+            var cur = lines[lines.length - 1];
+            cur.tokens.push(t);
+            cur.text += t.content;
+          }
+          if (lines.length && lines[lines.length - 1].tokens.length === 0) lines.pop();
+          return lines;
+        }
 
-```html index.html
-<div
-  data-composition-id="code-diff"
-  data-composition-src="compositions/code-diff.html"
-  data-start="0"
-  data-duration="6"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+        function lineDiff(a, b) {
+          var n = a.length;
+          var m = b.length;
+          var dp = [];
+          for (var i = 0; i <= n; i++) dp.push(new Array(m + 1).fill(0));
+          for (var i = n - 1; i >= 0; i--) {
+            for (var j = m - 1; j >= 0; j--) {
+              dp[i][j] =
+                a[i].text === b[j].text
+                  ? dp[i + 1][j + 1] + 1
+                  : Math.max(dp[i + 1][j], dp[i][j + 1]);
+            }
+          }
+          var ops = [];
+          var i = 0;
+          var j = 0;
+          while (i < n && j < m) {
+            if (a[i].text === b[j].text) {
+              ops.push({ type: "same", line: b[j] });
+              i++;
+              j++;
+            } else if (dp[i + 1][j] >= dp[i][j + 1]) {
+              ops.push({ type: "del", line: a[i] });
+              i++;
+            } else {
+              ops.push({ type: "add", line: b[j] });
+              j++;
+            }
+          }
+          while (i < n) ops.push({ type: "del", line: a[i++] });
+          while (j < m) ops.push({ type: "add", line: b[j++] });
+          return ops;
+        }
+
+        // ---- single-scene effect builders (fade in, play, hold to end) -------------
+        var FADE = 0.45;
+
+        function diff(tl, surface, states, start) {
+          var DEL = 0.55;
+          var ADD = 0.6;
+          var ops = lineDiff(splitLines(states[0]), splitLines(states[1]));
+          var parts = makeScene(surface, false);
+          var code = parts.code;
+          var delEls = [];
+          var addEls = [];
+          ops.forEach(function (op) {
+            var ln = document.createElement("div");
+            ln.className =
+              "diff-line" +
+              (op.type === "del" ? " diff-del" : op.type === "add" ? " diff-add" : "");
+            var sign = document.createElement("span");
+            sign.className = "diff-sign";
+            sign.textContent = op.type === "del" ? "- " : op.type === "add" ? "+ " : "  ";
+            ln.appendChild(sign);
+            op.line.tokens.forEach(function (t) {
+              var s = document.createElement("span");
+              s.className = "tok";
+              s.textContent = t.content;
+              s.style.color = t.color;
+              ln.appendChild(s);
+            });
+            code.appendChild(ln);
+            if (op.type === "del") delEls.push(ln);
+            if (op.type === "add") addEls.push(ln);
+          });
+          tl.set(parts.scene, { opacity: 0 }, 0);
+          tl.to(parts.scene, { opacity: 1, duration: FADE, ease: "power1.out" }, start);
+          var atDel = start + FADE + 0.3;
+          delEls.forEach(function (el, k) {
+            tl.fromTo(
+              el,
+              { height: 46, opacity: 1 },
+              { height: 0, opacity: 0, duration: DEL, ease: "power2.inOut" },
+              atDel + k * 0.08,
+            );
+          });
+          var atAdd = atDel + DEL + 0.15;
+          addEls.forEach(function (el, k) {
+            tl.set(el, { height: 0, opacity: 0 }, 0);
+            tl.fromTo(
+              el,
+              { height: 0, opacity: 0 },
+              { height: 46, opacity: 1, duration: ADD, ease: "power2.out" },
+              atAdd + k * 0.12,
+            );
+          });
+        }
+
+        function buildEffect(tl, surface, spec) {
+          var start = 0.45;
+          var seq = T[spec.seq];
+          if (spec.effect === "diff") diff(tl, surface, seq.states, start);
+        }
+
+        function go() {
+          var spec = window.__BLOCK;
+          var surface = document.getElementById("surface");
+          var root = document.getElementById("root");
+          window.__timelines = window.__timelines || {};
+          var tl = gsap.timeline({ paused: true });
+          // Build inside fonts.ready (glyph metrics must be final), then register.
+          // Register ONLY after the timeline is fully built: the runtime's
+          // sub-composition readiness gate treats "key present" as "ready" and
+          // nests the child once. An empty timeline registered before this build
+          // would be nested empty and never re-nested → blank render when used as
+          // a sub-composition. See the contract in engine frameCapture.ts.
+          document.fonts.ready.then(function () {
+            tl.from("#editor", { opacity: 0, scale: 0.985, duration: 0.5, ease: "power2.out" }, 0);
+            buildEffect(tl, surface, spec);
+            var dur = parseFloat(root.dataset.duration) || tl.duration();
+            tl.to({}, { duration: dur }, 0); // pad to full composition length
+            window.__timelines["code-diff"] = tl; // register AFTER setup completes
+            if (typeof window.__hfForceTimelineRebind === "function") {
+              window.__hfForceTimelineRebind(); // re-nest now that we are populated
+            }
+          });
+        }
+
+        if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", go);
+        else go();
+      })();
+    </script>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="code-diff" data-composition-src="compositions/code-diff.html" data-start="0" data-duration="6" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/code-highlight.mdx b/docs/catalog/blocks/code-highlight.mdx
index 9088875946..a52dd62dc5 100644
--- a/docs/catalog/blocks/code-highlight.mdx
+++ b/docs/catalog/blocks/code-highlight.mdx
@@ -1,36 +1,779 @@
 ---
 title: "Code Highlight Sweep"
-description: "A highlight band sweeps across a target line while the surrounding context dims — draws the eye to one line. `line` is 0-based: `line: 1` targets the second displayed line (unlike code-scroll, whose target is 1-based)."
+description: "A highlight band sweeps across a target line while the surrounding context dims — draws the eye to one line."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-highlight.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-highlight.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/code-highlight.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Code Highlight Sweep preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add code-highlight
-```
+<InstallCommand command="npx hyperframes add code-highlight" />
 
 That writes one file: `compositions/code-highlight.html`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`code-highlight.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Code Highlight Sweep</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #05070b;
+      }
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        font-family: "JetBrains Mono", monospace;
+        color: #e6edf3;
+      }
+      .bg-field {
+        position: absolute;
+        inset: 0;
+        background: radial-gradient(1200px 700px at 50% 18%, #0e1726 0%, #070b12 55%, #05070b 100%);
+      }
+      .bg-grid {
+        position: absolute;
+        inset: 0;
+        background-image:
+          linear-gradient(rgba(88, 166, 255, 0.05) 1px, transparent 1px),
+          linear-gradient(90deg, rgba(88, 166, 255, 0.05) 1px, transparent 1px);
+        background-size: 64px 64px;
+        mask-image: radial-gradient(1100px 620px at 50% 42%, #000 0%, transparent 78%);
+      }
+      .bg-glow {
+        position: absolute;
+        width: 900px;
+        height: 900px;
+        border-radius: 50%;
+        filter: blur(120px);
+        opacity: 0.5;
+      }
+      .bg-glow.a {
+        background: #1f6feb55;
+        left: -180px;
+        top: -200px;
+      }
+      .bg-glow.b {
+        background: #2ea04355;
+        right: -200px;
+        bottom: -260px;
+      }
+      .editor {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        width: 1380px;
+        height: 800px;
+        background: #0b0f17;
+        border: 1px solid #1d2733;
+        border-radius: 16px;
+        box-shadow:
+          0 40px 120px rgba(0, 0, 0, 0.6),
+          0 2px 0 rgba(255, 255, 255, 0.03) inset;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+      }
+      .titlebar {
+        height: 56px;
+        flex: 0 0 56px;
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        padding: 0 22px;
+        background: linear-gradient(#11161f, #0c111a);
+        border-bottom: 1px solid #1b2430;
+      }
+      .dots {
+        display: flex;
+        gap: 10px;
+      }
+      .dot {
+        width: 14px;
+        height: 14px;
+        border-radius: 50%;
+      }
+      .dot.r {
+        background: #ff5f57;
+      }
+      .dot.y {
+        background: #febc2e;
+      }
+      .dot.g {
+        background: #28c840;
+      }
+      .filename {
+        font-size: 19px;
+        color: #8b98a9;
+        letter-spacing: 0.2px;
+      }
+      .filename .accent {
+        color: #d6e2f0;
+      }
+      .code-surface {
+        position: relative;
+        flex: 1 1 auto;
+        overflow: hidden;
+      }
+      .scene {
+        position: absolute;
+        inset: 0;
+        opacity: 0;
+        will-change: opacity;
+      }
+      .code {
+        position: absolute;
+        top: 38px;
+        left: 0;
+        right: 0;
+        padding: 0 44px 0 104px;
+        font-size: 30px;
+        line-height: 46px;
+        font-variant-ligatures: none;
+        tab-size: 2;
+      }
+      .gutter {
+        position: absolute;
+        top: 38px;
+        left: 0;
+        width: 84px;
+        padding-right: 18px;
+        font-size: 30px;
+        line-height: 46px;
+        text-align: right;
+        color: #828c9b;
+        user-select: none;
+      }
+      .ln {
+        display: block;
+        height: 46px;
+      }
+      .line {
+        display: block;
+        min-height: 46px;
+        white-space: pre;
+        position: relative;
+        z-index: 1;
+      }
+      .tok {
+        display: inline-block;
+        white-space: pre;
+        will-change: transform, opacity;
+      }
+      .caret {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 3px;
+        height: 32px;
+        margin-top: 6px;
+        background: #58a6ff;
+        border-radius: 1px;
+        z-index: 3;
+      }
+      .hl-box {
+        position: absolute;
+        background: rgba(88, 166, 255, 0.16);
+        border-left: 3px solid #58a6ff;
+        border-radius: 6px;
+        z-index: 0;
+        overflow: hidden;
+      }
+      .diff-line {
+        display: block;
+        min-height: 0;
+        line-height: 46px;
+        white-space: pre;
+        position: relative;
+        overflow: hidden;
+        padding-left: 14px;
+      }
+      .diff-sign {
+        display: inline-block;
+        width: 22px;
+        color: #41506220;
+      }
+      .diff-del {
+        background: rgba(248, 81, 73, 0.12);
+        box-shadow: inset 3px 0 #f85149;
+      }
+      .diff-add {
+        background: rgba(63, 185, 80, 0.12);
+        box-shadow: inset 3px 0 #3fb950;
+      }
+      .diff-del .diff-sign {
+        color: #f85149;
+      }
+      .diff-add .diff-sign {
+        color: #3fb950;
+      }
+      .flight-block {
+        position: absolute;
+        white-space: pre;
+        font-size: 27px;
+        line-height: 40px;
+        padding: 11px 22px;
+        border-radius: 11px;
+        background: #0f1722;
+        border: 1px solid #233044;
+        box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5);
+        will-change: transform, opacity;
+      }
+      .flight-target {
+        position: absolute;
+        border: 1.5px dashed #2a3a4f;
+        border-radius: 14px;
+        opacity: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="code-highlight"
+      data-start="0"
+      data-duration="5"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="bg-field" data-layout-ignore></div>
+      <div class="bg-grid" data-layout-ignore></div>
+      <div class="bg-glow a" data-layout-ignore></div>
+      <div class="bg-glow b" data-layout-ignore></div>
+      <div class="editor" id="editor" data-layout-ignore>
+        <div class="titlebar">
+          <div class="dots">
+            <span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
+          </div>
+          <span class="filename"
+            ><span class="accent">loadConfig.js</span> — Code Highlight Sweep</span
+          >
+        </div>
+        <div class="code-surface" id="surface"></div>
+      </div>
+    </div>
+    <script>
+      window.__TOKENS = {
+        feature: {
+          lang: "js",
+          theme: "github-dark",
+          bg: "#24292e",
+          fg: "#e1e4e8",
+          states: [
+            {
+              code: 'async function loadConfig(path) {\n  const raw = await readFile(path, "utf8")\n  const config = JSON.parse(raw)\n  return validate(config)\n}',
+              tokens: [
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-0",
+                  content: "async",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-1",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-2",
+                  content: "function",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-3",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-4",
+                  content: "loadConfig",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-5",
+                  content: "(",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-6",
+                  content: "path",
+                  color: "#FFAB70",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-7",
+                  content: ") {",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-8",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-9",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-10",
+                  content: "const",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-11",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-12",
+                  content: "raw",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-13",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-14",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-15",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-16",
+                  content: "await",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-17",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-18",
+                  content: "readFile",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-19",
+                  content: "(path,",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-20",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-21",
+                  content: '"utf8"',
+                  color: "#9ECBFF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-22",
+                  content: ")",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-23",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-24",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-25",
+                  content: "const",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-26",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-27",
+                  content: "config",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-28",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-29",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-30",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-31",
+                  content: "JSON",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-32",
+                  content: ".",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-33",
+                  content: "parse",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-34",
+                  content: "(raw)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-35",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-36",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-37",
+                  content: "return",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-38",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-39",
+                  content: "validate",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-40",
+                  content: "(config)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-41",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-42",
+                  content: "}",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-43",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+              ],
+            },
+          ],
+        },
+      };
+      window.__BLOCK = {
+        id: "code-highlight",
+        effect: "highlight",
+        seq: "feature",
+        line: 1,
+        duration: 5,
+      };
+    </script>
+    <script>
+      // hf-code-anim.js — self-contained code-animation engine for HyperFrames registry blocks.
+      //
+      // Reuses Shiki Magic Move's baked output (window.__TOKENS, baked at author time) and
+      // drives the animation as a PAUSED GSAP timeline the HyperFrames engine seeks per frame —
+      // NOT CSS transitions (those break under non-sequential frame seeking). FLIP measurement
+      // runs once inside document.fonts.ready (glyph metrics must be final). Each block sets
+      // window.__BLOCK = { id, effect, seq, line?, duration } and includes this engine; the
+      // engine builds one scene that fills the composition and registers window.__timelines[id].
+      (function () {
+        "use strict";
+        var T = window.__TOKENS || {};
+
+        function lineDiv() {
+          var d = document.createElement("div");
+          d.className = "line";
+          return d;
+        }
+
+        // Render a code state's keyed tokens into codeEl as lines of inline-block .tok spans.
+        function renderState(codeEl, state) {
+          codeEl.textContent = "";
+          var keyToEl = new Map();
+          var line = lineDiv();
+          codeEl.appendChild(line);
+          for (var i = 0; i < state.tokens.length; i++) {
+            var t = state.tokens[i];
+            if (t.content === "\n") {
+              line = lineDiv();
+              codeEl.appendChild(line);
+              continue;
+            }
+            var span = document.createElement("span");
+            span.className = "tok";
+            span.textContent = t.content;
+            span.style.color = t.color;
+            if (t.fontStyle & 1) span.style.fontStyle = "italic";
+            if (t.fontStyle & 2) span.style.fontWeight = "700";
+            line.appendChild(span);
+            keyToEl.set(t.key, span);
+          }
+          var last = codeEl.lastChild;
+          if (last && last.className === "line" && last.children.length === 0)
+            codeEl.removeChild(last);
+          return keyToEl;
+        }
+
+        function rectsOf(keyToEl) {
+          var m = new Map();
+          keyToEl.forEach(function (el, k) {
+            var r = el.getBoundingClientRect();
+            m.set(k, { left: r.left, top: r.top });
+          });
+          return m;
+        }
+
+        function makeScene(surface, withGutter) {
+          var scene = document.createElement("div");
+          scene.className = "scene";
+          if (withGutter) {
+            var g = document.createElement("div");
+            g.className = "gutter";
+            scene.appendChild(g);
+          }
+          var code = document.createElement("div");
+          code.className = "code";
+          scene.appendChild(code);
+          surface.appendChild(scene);
+          return { scene: scene, code: code, gutter: scene.querySelector(".gutter") };
+        }
+
+        function fillGutter(g, n) {
+          var html = "";
+          for (var i = 1; i <= n; i++) html += '<span class="ln">' + i + "</span>";
+          g.innerHTML = html;
+        }
 
-It runs for 5 seconds at 1920×1080. Paste this into your composition:
+        function splitLines(state) {
+          var lines = [{ text: "", tokens: [] }];
+          for (var i = 0; i < state.tokens.length; i++) {
+            var t = state.tokens[i];
+            if (t.content === "\n") {
+              lines.push({ text: "", tokens: [] });
+              continue;
+            }
+            var cur = lines[lines.length - 1];
+            cur.tokens.push(t);
+            cur.text += t.content;
+          }
+          if (lines.length && lines[lines.length - 1].tokens.length === 0) lines.pop();
+          return lines;
+        }
 
-```html index.html
-<div
-  data-composition-id="code-highlight"
-  data-composition-src="compositions/code-highlight.html"
-  data-start="0"
-  data-duration="5"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+        function lineDiff(a, b) {
+          var n = a.length;
+          var m = b.length;
+          var dp = [];
+          for (var i = 0; i <= n; i++) dp.push(new Array(m + 1).fill(0));
+          for (var i = n - 1; i >= 0; i--) {
+            for (var j = m - 1; j >= 0; j--) {
+              dp[i][j] =
+                a[i].text === b[j].text
+                  ? dp[i + 1][j + 1] + 1
+                  : Math.max(dp[i + 1][j], dp[i][j + 1]);
+            }
+          }
+          var ops = [];
+          var i = 0;
+          var j = 0;
+          while (i < n && j < m) {
+            if (a[i].text === b[j].text) {
+              ops.push({ type: "same", line: b[j] });
+              i++;
+              j++;
+            } else if (dp[i + 1][j] >= dp[i][j + 1]) {
+              ops.push({ type: "del", line: a[i] });
+              i++;
+            } else {
+              ops.push({ type: "add", line: b[j] });
+              j++;
+            }
+          }
+          while (i < n) ops.push({ type: "del", line: a[i++] });
+          while (j < m) ops.push({ type: "add", line: b[j++] });
+          return ops;
+        }
+
+        // ---- single-scene effect builders (fade in, play, hold to end) -------------
+        var FADE = 0.45;
+
+        function highlight(tl, surface, state, start, targetIdx) {
+          var SWEEP = 0.9;
+          var parts = makeScene(surface, true);
+          var code = parts.code;
+          renderState(code, state);
+          var lines = code.querySelectorAll(".line");
+          fillGutter(parts.gutter, lines.length);
+          var base = code.getBoundingClientRect();
+          var idx = Math.max(0, Math.min(lines.length - 1, targetIdx));
+          var lr = lines[idx].getBoundingClientRect();
+          var box = document.createElement("div");
+          box.className = "hl-box";
+          box.style.left = lr.left - base.left - 8 + "px";
+          box.style.top = lr.top - base.top - 1 + "px";
+          box.style.height = lr.height + 2 + "px";
+          code.insertBefore(box, code.firstChild);
+          tl.set(parts.scene, { opacity: 0 }, 0);
+          tl.to(parts.scene, { opacity: 1, duration: FADE, ease: "power1.out" }, start);
+          var at = start + FADE + 0.2;
+          tl.fromTo(
+            box,
+            { width: 0, opacity: 0 },
+            { width: lr.width + 18, opacity: 1, duration: SWEEP, ease: "power2.inOut" },
+            at,
+          );
+          for (var i = 0; i < lines.length; i++) {
+            if (i === idx) continue;
+            tl.fromTo(
+              lines[i],
+              { opacity: 1 },
+              { opacity: 0.45, duration: SWEEP, ease: "power2.inOut" },
+              at,
+            );
+          }
+        }
+
+        function buildEffect(tl, surface, spec) {
+          var start = 0.45;
+          var seq = T[spec.seq];
+          if (spec.effect === "highlight")
+            highlight(tl, surface, seq.states[0], start, spec.line || 0);
+        }
+
+        function go() {
+          var spec = window.__BLOCK;
+          var surface = document.getElementById("surface");
+          var root = document.getElementById("root");
+          window.__timelines = window.__timelines || {};
+          var tl = gsap.timeline({ paused: true });
+          // Build inside fonts.ready (glyph metrics must be final), then register.
+          // Register ONLY after the timeline is fully built: the runtime's
+          // sub-composition readiness gate treats "key present" as "ready" and
+          // nests the child once. An empty timeline registered before this build
+          // would be nested empty and never re-nested → blank render when used as
+          // a sub-composition. See the contract in engine frameCapture.ts.
+          document.fonts.ready.then(function () {
+            tl.from("#editor", { opacity: 0, scale: 0.985, duration: 0.5, ease: "power2.out" }, 0);
+            buildEffect(tl, surface, spec);
+            var dur = parseFloat(root.dataset.duration) || tl.duration();
+            tl.to({}, { duration: dur }, 0); // pad to full composition length
+            window.__timelines["code-highlight"] = tl; // register AFTER setup completes
+            if (typeof window.__hfForceTimelineRebind === "function") {
+              window.__hfForceTimelineRebind(); // re-nest now that we are populated
+            }
+          });
+        }
+
+        if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", go);
+        else go();
+      })();
+    </script>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="code-highlight" data-composition-src="compositions/code-highlight.html" data-start="0" data-duration="5" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/code-morph.mdx b/docs/catalog/blocks/code-morph.mdx
index 2206351336..06ef2ba4a0 100644
--- a/docs/catalog/blocks/code-morph.mdx
+++ b/docs/catalog/blocks/code-morph.mdx
@@ -3,34 +3,1248 @@ title: "Code Morph"
 description: "One snippet transforms into another — tokens glide between positions, leavers fade out, enterers fade in. Shiki Magic Move re-driven as a paused GSAP timeline."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-morph.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-morph.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/code-morph.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Code Morph preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add code-morph
-```
+<InstallCommand command="npx hyperframes add code-morph" />
 
 That writes one file: `compositions/code-morph.html`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`code-morph.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Code Morph</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #05070b;
+      }
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        font-family: "JetBrains Mono", monospace;
+        color: #e6edf3;
+      }
+      .bg-field {
+        position: absolute;
+        inset: 0;
+        background: radial-gradient(1200px 700px at 50% 18%, #0e1726 0%, #070b12 55%, #05070b 100%);
+      }
+      .bg-grid {
+        position: absolute;
+        inset: 0;
+        background-image:
+          linear-gradient(rgba(88, 166, 255, 0.05) 1px, transparent 1px),
+          linear-gradient(90deg, rgba(88, 166, 255, 0.05) 1px, transparent 1px);
+        background-size: 64px 64px;
+        mask-image: radial-gradient(1100px 620px at 50% 42%, #000 0%, transparent 78%);
+      }
+      .bg-glow {
+        position: absolute;
+        width: 900px;
+        height: 900px;
+        border-radius: 50%;
+        filter: blur(120px);
+        opacity: 0.5;
+      }
+      .bg-glow.a {
+        background: #1f6feb55;
+        left: -180px;
+        top: -200px;
+      }
+      .bg-glow.b {
+        background: #2ea04355;
+        right: -200px;
+        bottom: -260px;
+      }
+      .editor {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        width: 1380px;
+        height: 800px;
+        background: #0b0f17;
+        border: 1px solid #1d2733;
+        border-radius: 16px;
+        box-shadow:
+          0 40px 120px rgba(0, 0, 0, 0.6),
+          0 2px 0 rgba(255, 255, 255, 0.03) inset;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+      }
+      .titlebar {
+        height: 56px;
+        flex: 0 0 56px;
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        padding: 0 22px;
+        background: linear-gradient(#11161f, #0c111a);
+        border-bottom: 1px solid #1b2430;
+      }
+      .dots {
+        display: flex;
+        gap: 10px;
+      }
+      .dot {
+        width: 14px;
+        height: 14px;
+        border-radius: 50%;
+      }
+      .dot.r {
+        background: #ff5f57;
+      }
+      .dot.y {
+        background: #febc2e;
+      }
+      .dot.g {
+        background: #28c840;
+      }
+      .filename {
+        font-size: 19px;
+        color: #8b98a9;
+        letter-spacing: 0.2px;
+      }
+      .filename .accent {
+        color: #d6e2f0;
+      }
+      .code-surface {
+        position: relative;
+        flex: 1 1 auto;
+        overflow: hidden;
+      }
+      .scene {
+        position: absolute;
+        inset: 0;
+        opacity: 0;
+        will-change: opacity;
+      }
+      .code {
+        position: absolute;
+        top: 38px;
+        left: 0;
+        right: 0;
+        padding: 0 44px 0 104px;
+        font-size: 30px;
+        line-height: 46px;
+        font-variant-ligatures: none;
+        tab-size: 2;
+      }
+      .gutter {
+        position: absolute;
+        top: 38px;
+        left: 0;
+        width: 84px;
+        padding-right: 18px;
+        font-size: 30px;
+        line-height: 46px;
+        text-align: right;
+        color: #828c9b;
+        user-select: none;
+      }
+      .ln {
+        display: block;
+        height: 46px;
+      }
+      .line {
+        display: block;
+        min-height: 46px;
+        white-space: pre;
+        position: relative;
+        z-index: 1;
+      }
+      .tok {
+        display: inline-block;
+        white-space: pre;
+        will-change: transform, opacity;
+      }
+      .caret {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 3px;
+        height: 32px;
+        margin-top: 6px;
+        background: #58a6ff;
+        border-radius: 1px;
+        z-index: 3;
+      }
+      .hl-box {
+        position: absolute;
+        background: rgba(88, 166, 255, 0.16);
+        border-left: 3px solid #58a6ff;
+        border-radius: 6px;
+        z-index: 0;
+        overflow: hidden;
+      }
+      .diff-line {
+        display: block;
+        min-height: 0;
+        line-height: 46px;
+        white-space: pre;
+        position: relative;
+        overflow: hidden;
+        padding-left: 14px;
+      }
+      .diff-sign {
+        display: inline-block;
+        width: 22px;
+        color: #41506220;
+      }
+      .diff-del {
+        background: rgba(248, 81, 73, 0.12);
+        box-shadow: inset 3px 0 #f85149;
+      }
+      .diff-add {
+        background: rgba(63, 185, 80, 0.12);
+        box-shadow: inset 3px 0 #3fb950;
+      }
+      .diff-del .diff-sign {
+        color: #f85149;
+      }
+      .diff-add .diff-sign {
+        color: #3fb950;
+      }
+      .flight-block {
+        position: absolute;
+        white-space: pre;
+        font-size: 27px;
+        line-height: 40px;
+        padding: 11px 22px;
+        border-radius: 11px;
+        background: #0f1722;
+        border: 1px solid #233044;
+        box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5);
+        will-change: transform, opacity;
+      }
+      .flight-target {
+        position: absolute;
+        border: 1.5px dashed #2a3a4f;
+        border-radius: 14px;
+        opacity: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="code-morph"
+      data-start="0"
+      data-duration="7"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="bg-field" data-layout-ignore></div>
+      <div class="bg-grid" data-layout-ignore></div>
+      <div class="bg-glow a" data-layout-ignore></div>
+      <div class="bg-glow b" data-layout-ignore></div>
+      <div class="editor" id="editor" data-layout-ignore>
+        <div class="titlebar">
+          <div class="dots">
+            <span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
+          </div>
+          <span class="filename"><span class="accent">refactor.js</span> — Code Morph</span>
+        </div>
+        <div class="code-surface" id="surface"></div>
+      </div>
+    </div>
+    <script>
+      window.__TOKENS = {
+        morph: {
+          lang: "js",
+          theme: "github-dark",
+          bg: "#24292e",
+          fg: "#e1e4e8",
+          states: [
+            {
+              code: "function activeNames(users) {\n  const out = []\n  for (const u of users) {\n    if (u.active) {\n      out.push(u.name)\n    }\n  }\n  return out\n}",
+              tokens: [
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-0",
+                  content: "function",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-1",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-2",
+                  content: "activeNames",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-3",
+                  content: "(",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-4",
+                  content: "users",
+                  color: "#FFAB70",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-5",
+                  content: ") {",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-6",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-7",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-8",
+                  content: "const",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-9",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-10",
+                  content: "out",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-11",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-12",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-13",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-14",
+                  content: "[]",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-15",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-16",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-17",
+                  content: "for",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-18",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-19",
+                  content: "(",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-20",
+                  content: "const",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-21",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-22",
+                  content: "u",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-23",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-24",
+                  content: "of",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-25",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-26",
+                  content: "users) {",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-27",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-28",
+                  content: "    ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-29",
+                  content: "if",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-30",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-31",
+                  content: "(u.active) {",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-32",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-33",
+                  content: "      ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-34",
+                  content: "out.",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-35",
+                  content: "push",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-36",
+                  content: "(u.name)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-37",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-38",
+                  content: "    ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-39",
+                  content: "}",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-40",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-41",
+                  content: "  ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-42",
+                  content: "}",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-43",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-44",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-45",
+                  content: "return",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-46",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-47",
+                  content: "out",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-48",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-49",
+                  content: "}",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-50",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+              ],
+            },
+            {
+              code: "function activeNames(users) {\n  return users\n    .filter((u) => u.active)\n    .map((u) => u.name)\n}",
+              tokens: [
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-0",
+                  content: "function",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-1",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-2",
+                  content: "activeNames",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-3",
+                  content: "(",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-4",
+                  content: "users",
+                  color: "#FFAB70",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-5",
+                  content: ") {",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-6",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-7",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-45",
+                  content: "return",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-25",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-10",
+                  content: "users",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-27",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-28",
+                  content: "    ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-13",
+                  content: ".",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-14",
+                  content: "filter",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-15",
+                  content: "((",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-16",
+                  content: "u",
+                  color: "#FFAB70",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-17",
+                  content: ")",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-18",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-19",
+                  content: "=>",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-20",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-21",
+                  content: "u.active)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-32",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-23",
+                  content: "    ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-24",
+                  content: ".",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-25",
+                  content: "map",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-26",
+                  content: "((",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-27",
+                  content: "u",
+                  color: "#FFAB70",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-28",
+                  content: ")",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-29",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-30",
+                  content: "=>",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-31",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-32",
+                  content: "u.name)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-48",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-49",
+                  content: "}",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-35",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+              ],
+            },
+            {
+              code: "const activeNames = (users) =>\n  users.filter((u) => u.active).map((u) => u.name)",
+              tokens: [
+                {
+                  key: "VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-0",
+                  content: "const",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-1",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-2",
+                  content: "activeNames",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-3",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-4",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-5",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-3",
+                  content: "(",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-4",
+                  content: "users",
+                  color: "#FFAB70",
+                  fontStyle: 0,
+                },
+                {
+                  key: "VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-8",
+                  content: ")",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-9",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-10",
+                  content: "=>",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-6",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-7",
+                  content: "  ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-13",
+                  content: "users.",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-14",
+                  content: "filter",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-15",
+                  content: "((",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-16",
+                  content: "u",
+                  color: "#FFAB70",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-17",
+                  content: ")",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-18",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-19",
+                  content: "=>",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-20",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-21",
+                  content: "u.active).",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-25",
+                  content: "map",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-26",
+                  content: "((",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-27",
+                  content: "u",
+                  color: "#FFAB70",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-28",
+                  content: ")",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-29",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-30",
+                  content: "=>",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-31",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-32",
+                  content: "u.name)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-30",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+              ],
+            },
+          ],
+        },
+      };
+      window.__BLOCK = { id: "code-morph", effect: "morph", seq: "morph", duration: 7 };
+    </script>
+    <script>
+      // hf-code-anim.js — self-contained code-animation engine for HyperFrames registry blocks.
+      //
+      // Reuses Shiki Magic Move's baked output (window.__TOKENS, baked at author time) and
+      // drives the animation as a PAUSED GSAP timeline the HyperFrames engine seeks per frame —
+      // NOT CSS transitions (those break under non-sequential frame seeking). FLIP measurement
+      // runs once inside document.fonts.ready (glyph metrics must be final). Each block sets
+      // window.__BLOCK = { id, effect, seq, line?, duration } and includes this engine; the
+      // engine builds one scene that fills the composition and registers window.__timelines[id].
+      (function () {
+        "use strict";
+        var T = window.__TOKENS || {};
+
+        function lineDiv() {
+          var d = document.createElement("div");
+          d.className = "line";
+          return d;
+        }
+
+        // Render a code state's keyed tokens into codeEl as lines of inline-block .tok spans.
+        function renderState(codeEl, state) {
+          codeEl.textContent = "";
+          var keyToEl = new Map();
+          var line = lineDiv();
+          codeEl.appendChild(line);
+          for (var i = 0; i < state.tokens.length; i++) {
+            var t = state.tokens[i];
+            if (t.content === "\n") {
+              line = lineDiv();
+              codeEl.appendChild(line);
+              continue;
+            }
+            var span = document.createElement("span");
+            span.className = "tok";
+            span.textContent = t.content;
+            span.style.color = t.color;
+            if (t.fontStyle & 1) span.style.fontStyle = "italic";
+            if (t.fontStyle & 2) span.style.fontWeight = "700";
+            line.appendChild(span);
+            keyToEl.set(t.key, span);
+          }
+          var last = codeEl.lastChild;
+          if (last && last.className === "line" && last.children.length === 0)
+            codeEl.removeChild(last);
+          return keyToEl;
+        }
+
+        function rectsOf(keyToEl) {
+          var m = new Map();
+          keyToEl.forEach(function (el, k) {
+            var r = el.getBoundingClientRect();
+            m.set(k, { left: r.left, top: r.top });
+          });
+          return m;
+        }
+
+        function makeScene(surface, withGutter) {
+          var scene = document.createElement("div");
+          scene.className = "scene";
+          if (withGutter) {
+            var g = document.createElement("div");
+            g.className = "gutter";
+            scene.appendChild(g);
+          }
+          var code = document.createElement("div");
+          code.className = "code";
+          scene.appendChild(code);
+          surface.appendChild(scene);
+          return { scene: scene, code: code, gutter: scene.querySelector(".gutter") };
+        }
+
+        function fillGutter(g, n) {
+          var html = "";
+          for (var i = 1; i <= n; i++) html += '<span class="ln">' + i + "</span>";
+          g.innerHTML = html;
+        }
 
-It runs for 7 seconds at 1920×1080. Paste this into your composition:
+        function splitLines(state) {
+          var lines = [{ text: "", tokens: [] }];
+          for (var i = 0; i < state.tokens.length; i++) {
+            var t = state.tokens[i];
+            if (t.content === "\n") {
+              lines.push({ text: "", tokens: [] });
+              continue;
+            }
+            var cur = lines[lines.length - 1];
+            cur.tokens.push(t);
+            cur.text += t.content;
+          }
+          if (lines.length && lines[lines.length - 1].tokens.length === 0) lines.pop();
+          return lines;
+        }
 
-```html index.html
-<div
-  data-composition-id="code-morph"
-  data-composition-src="compositions/code-morph.html"
-  data-start="0"
-  data-duration="7"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+        function lineDiff(a, b) {
+          var n = a.length;
+          var m = b.length;
+          var dp = [];
+          for (var i = 0; i <= n; i++) dp.push(new Array(m + 1).fill(0));
+          for (var i = n - 1; i >= 0; i--) {
+            for (var j = m - 1; j >= 0; j--) {
+              dp[i][j] =
+                a[i].text === b[j].text
+                  ? dp[i + 1][j + 1] + 1
+                  : Math.max(dp[i + 1][j], dp[i][j + 1]);
+            }
+          }
+          var ops = [];
+          var i = 0;
+          var j = 0;
+          while (i < n && j < m) {
+            if (a[i].text === b[j].text) {
+              ops.push({ type: "same", line: b[j] });
+              i++;
+              j++;
+            } else if (dp[i + 1][j] >= dp[i][j + 1]) {
+              ops.push({ type: "del", line: a[i] });
+              i++;
+            } else {
+              ops.push({ type: "add", line: b[j] });
+              j++;
+            }
+          }
+          while (i < n) ops.push({ type: "del", line: a[i++] });
+          while (j < m) ops.push({ type: "add", line: b[j++] });
+          return ops;
+        }
+
+        // ---- single-scene effect builders (fade in, play, hold to end) -------------
+        var FADE = 0.45;
+
+        function morph(tl, surface, states, start) {
+          var STEP = 1.2;
+          var HOLD = 1.0;
+          var t = start;
+          for (var s = 0; s < states.length - 1; s++) {
+            var parts = makeScene(surface, false);
+            var code = parts.code;
+            var fromEls = renderState(code, states[s]);
+            var fromR = rectsOf(fromEls);
+            var toEls = renderState(code, states[s + 1]);
+            var toR = rectsOf(toEls);
+            var base = code.getBoundingClientRect();
+            var seg = gsap.timeline();
+            var ENTER_AT = STEP * 0.45;
+            var FD = STEP * 0.5;
+            toEls.forEach(function (el, k) {
+              var fr = fromR.get(k);
+              var tr = toR.get(k);
+              if (fr) {
+                seg.fromTo(
+                  el,
+                  { x: fr.left - tr.left, y: fr.top - tr.top },
+                  { x: 0, y: 0, duration: STEP, ease: "power2.inOut" },
+                  0,
+                );
+              } else {
+                seg.fromTo(
+                  el,
+                  { opacity: 0 },
+                  { opacity: 1, duration: FD, ease: "power1.out" },
+                  ENTER_AT,
+                );
+              }
+            });
+            var toKeys = new Set(toEls.keys());
+            var fromState = states[s];
+            for (var i = 0; i < fromState.tokens.length; i++) {
+              var tok = fromState.tokens[i];
+              if (tok.content === "\n" || toKeys.has(tok.key) || !fromR.has(tok.key)) continue;
+              var r = fromR.get(tok.key);
+              var span = document.createElement("span");
+              span.className = "tok";
+              span.textContent = tok.content;
+              span.style.position = "absolute";
+              span.style.left = r.left - base.left + "px";
+              span.style.top = r.top - base.top + "px";
+              span.style.color = tok.color;
+              code.appendChild(span);
+              seg.fromTo(span, { opacity: 1 }, { opacity: 0, duration: FD, ease: "power1.in" }, 0);
+            }
+            var segStart = t + FADE;
+            var segEnd = segStart + STEP + HOLD;
+            var isLast = s === states.length - 2;
+            tl.set(parts.scene, { opacity: 0 }, 0);
+            tl.to(parts.scene, { opacity: 1, duration: FADE, ease: "power1.out" }, t);
+            if (!isLast)
+              tl.to(parts.scene, { opacity: 0, duration: FADE, ease: "power1.in" }, segEnd - FADE);
+            tl.add(seg, segStart);
+            t = segEnd - FADE;
+          }
+        }
+
+        function buildEffect(tl, surface, spec) {
+          var start = 0.45;
+          var seq = T[spec.seq];
+          if (spec.effect === "morph") morph(tl, surface, seq.states, start);
+        }
+
+        function go() {
+          var spec = window.__BLOCK;
+          var surface = document.getElementById("surface");
+          var root = document.getElementById("root");
+          window.__timelines = window.__timelines || {};
+          var tl = gsap.timeline({ paused: true });
+          // Build inside fonts.ready (glyph metrics must be final), then register.
+          // Register ONLY after the timeline is fully built: the runtime's
+          // sub-composition readiness gate treats "key present" as "ready" and
+          // nests the child once. An empty timeline registered before this build
+          // would be nested empty and never re-nested → blank render when used as
+          // a sub-composition. See the contract in engine frameCapture.ts.
+          document.fonts.ready.then(function () {
+            tl.from("#editor", { opacity: 0, scale: 0.985, duration: 0.5, ease: "power2.out" }, 0);
+            buildEffect(tl, surface, spec);
+            var dur = parseFloat(root.dataset.duration) || tl.duration();
+            tl.to({}, { duration: dur }, 0); // pad to full composition length
+            window.__timelines["code-morph"] = tl; // register AFTER setup completes
+            if (typeof window.__hfForceTimelineRebind === "function") {
+              window.__hfForceTimelineRebind(); // re-nest now that we are populated
+            }
+          });
+        }
+
+        if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", go);
+        else go();
+      })();
+    </script>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="code-morph" data-composition-src="compositions/code-morph.html" data-start="0" data-duration="7" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/code-particle-assemble.mdx b/docs/catalog/blocks/code-particle-assemble.mdx
index 505cab4066..ff1f0e7986 100644
--- a/docs/catalog/blocks/code-particle-assemble.mdx
+++ b/docs/catalog/blocks/code-particle-assemble.mdx
@@ -3,34 +3,511 @@ title: "Code Particle Assemble"
 description: "Thousands of GPU points scatter through space and fly to the exact glyph pixels of the code, resolving into readable syntax-highlighted text — a particle system, not a token tween."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-particle-assemble.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-particle-assemble.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/code-particle-assemble.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Code Particle Assemble preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add code-particle-assemble
-```
+<InstallCommand command="npx hyperframes add code-particle-assemble" />
 
 That writes one file: `compositions/code-particle-assemble.html`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`code-particle-assemble.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Code Particle Assemble</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #05070b;
+      }
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+      }
+      #gl {
+        position: absolute;
+        inset: 0;
+        width: 1920px;
+        height: 1080px;
+        display: block;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="code-particle-assemble"
+      data-start="0"
+      data-duration="8"
+      data-width="1920"
+      data-height="1080"
+    >
+      <canvas id="gl" width="1920" height="1080"></canvas>
+    </div>
+    <script>
+      window.__TOKENS = {
+        assemble: {
+          lang: "js",
+          theme: "github-dark",
+          bg: "#24292e",
+          fg: "#e1e4e8",
+          states: [
+            {
+              code: "const app = pipe(\n  parse,\n  optimize,\n  emit,\n)",
+              tokens: [
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-0",
+                  content: "const",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-1",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-2",
+                  content: "app",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-3",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-4",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-5",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-6",
+                  content: "pipe",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-7",
+                  content: "(",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-8",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-9",
+                  content: "  ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-10",
+                  content: "parse,",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-11",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-12",
+                  content: "  ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-13",
+                  content: "optimize,",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-14",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-15",
+                  content: "  ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-16",
+                  content: "emit,",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-17",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-18",
+                  content: ")",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-19",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+              ],
+            },
+          ],
+        },
+      };
+      window.__BLOCK = {
+        id: "code-particle-assemble",
+        effect: "particles",
+        seq: "assemble",
+        duration: 8,
+        seed: 23,
+      };
+    </script>
+    <script>
+      // hf-code-anim-gl.js — WebGL code-animation engine for the "crazy" Code Animations blocks.
+      //
+      // Bridges the baked Shiki tokens (window.__TOKENS) into Three.js: the tokens are drawn once
+      // to an offscreen 2D canvas (a CanvasTexture), which then drives a lit 3D slab, a dissolve
+      // shader, or a GPU particle system. Determinism per the project contract:
+      //   - render only via tl.eventCallback("onUpdate", …) + one initial render() — never rAF
+      //   - all randomness from a seeded mulberry32 — never Math.random / Date.now
+      //   - canvas drawn once after document.fonts.ready (final glyph metrics)
+      //   - paused GSAP timeline registered on window.__timelines[id]; HF seeks it per frame
+      //
+      // Each block sets window.__BLOCK = { id, effect, seq, duration, seed } and includes this engine.
+      (function () {
+        "use strict";
+        var T = window.__TOKENS || {};
+
+        // ---- seeded PRNG (no Math.random) -----------------------------------------
+        function mulberry32(a) {
+          return function () {
+            a |= 0;
+            a = (a + 0x6d2b79f5) | 0;
+            var t = Math.imul(a ^ (a >>> 15), 1 | a);
+            t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+            return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+          };
+        }
+
+        // ---- split a token state into lines of {content,color} --------------------
+        function splitLines(state) {
+          var lines = [[]];
+          for (var i = 0; i < state.tokens.length; i++) {
+            var t = state.tokens[i];
+            if (t.content === "\n") {
+              lines.push([]);
+              continue;
+            }
+            lines[lines.length - 1].push(t);
+          }
+          while (lines.length && lines[lines.length - 1].length === 0) lines.pop();
+          return lines;
+        }
+
+        // ---- THE BRIDGE: draw baked tokens to an offscreen 2D canvas ---------------
+        // Returns { canvas, W, H, lines, lineH, padY, fontPx } so effects can sample it.
+        function drawCodeToCanvas(state, opts) {
+          opts = opts || {};
+          var fontPx = opts.fontPx || 36;
+          var lineH = opts.lineH || 54;
+          var padX = opts.padX || 70;
+          var padY = opts.padY || 60;
+          var weight = opts.weight || 500;
+          var font = weight + " " + fontPx + 'px "JetBrains Mono", monospace';
+
+          var lines = splitLines(state);
+          var measure = document.createElement("canvas").getContext("2d");
+          measure.font = font;
+          var maxW = 0;
+          for (var i = 0; i < lines.length; i++) {
+            var w = 0;
+            for (var j = 0; j < lines[i].length; j++)
+              w += measure.measureText(lines[i][j].content).width;
+            if (w > maxW) maxW = w;
+          }
+          var W = Math.max(2, Math.ceil(maxW + padX * 2));
+          var H = Math.max(2, Math.ceil(lines.length * lineH + padY * 2));
+
+          var canvas = document.createElement("canvas");
+          canvas.width = W;
+          canvas.height = H;
+          var ctx = canvas.getContext("2d");
+          if (opts.transparent) {
+            ctx.clearRect(0, 0, W, H);
+          } else {
+            ctx.fillStyle = opts.bg || "#0b0f17";
+            ctx.fillRect(0, 0, W, H);
+          }
+          ctx.textBaseline = "top";
+          ctx.font = font;
+          for (var li = 0; li < lines.length; li++) {
+            var x = padX;
+            var y = padY + li * lineH;
+            for (var k = 0; k < lines[li].length; k++) {
+              var tok = lines[li][k];
+              ctx.fillStyle = tok.color;
+              ctx.fillText(tok.content, x, y);
+              x += ctx.measureText(tok.content).width;
+            }
+          }
+          return {
+            canvas: canvas,
+            W: W,
+            H: H,
+            lines: lines.length,
+            lineH: lineH,
+            padY: padY,
+            fontPx: fontPx,
+          };
+        }
+
+        function fxParticles(THREE, scene, camera, renderer, state, st, tl, dur, seed) {
+          scene.background = new THREE.Color(0x05070b);
+          var code = drawCodeToCanvas(state, {
+            fontPx: 46,
+            lineH: 70,
+            padX: 70,
+            padY: 64,
+            weight: 700,
+          });
+          var cw = code.W;
+          var ch = code.H;
+          var data = code.canvas.getContext("2d").getImageData(0, 0, cw, ch).data;
+          var rng = mulberry32(((seed || 1) * 2654435761) >>> 0);
+
+          var worldW = 13.0;
+          var worldH = worldW * (ch / cw);
+
+          // sample glyph pixels (brighter than the dark bg) on a fixed grid
+          var step = 2;
+          var tx = [];
+          var col = [];
+          for (var y = 0; y < ch; y += step) {
+            for (var x = 0; x < cw; x += step) {
+              var idx = (y * cw + x) * 4;
+              var r = data[idx];
+              var g = data[idx + 1];
+              var b = data[idx + 2];
+              if (r + g + b < 120) continue; // skip background
+              tx.push((x / cw - 0.5) * worldW, -(y / ch - 0.5) * worldH, 0);
+              col.push(r / 255, g / 255, b / 255);
+            }
+          }
+          var n = tx.length / 3;
+
+          var positions = new Float32Array(n * 3);
+          var aOrigin = new Float32Array(n * 3);
+          var aTarget = new Float32Array(tx);
+          var aColor = new Float32Array(col);
+          var aDelay = new Float32Array(n);
+          for (var i = 0; i < n; i++) {
+            var sx = (rng() * 2 - 1) * worldW * 1.15;
+            var sy = (rng() * 2 - 1) * worldH * 1.7;
+            var sz = (rng() * 2 - 1) * 9.0 - 2.0;
+            aOrigin[i * 3] = sx;
+            aOrigin[i * 3 + 1] = sy;
+            aOrigin[i * 3 + 2] = sz;
+            positions[i * 3] = sx;
+            positions[i * 3 + 1] = sy;
+            positions[i * 3 + 2] = sz;
+            aDelay[i] = rng();
+          }
+
+          var geo = new THREE.BufferGeometry();
+          geo.setAttribute("position", new THREE.BufferAttribute(positions, 3));
+          geo.setAttribute("aOrigin", new THREE.BufferAttribute(aOrigin, 3));
+          geo.setAttribute("aTarget", new THREE.BufferAttribute(aTarget, 3));
+          geo.setAttribute("aColor", new THREE.BufferAttribute(aColor, 3));
+          geo.setAttribute("aDelay", new THREE.BufferAttribute(aDelay, 1));
 
-It runs for 8 seconds at 1920×1080. Paste this into your composition:
+          var uniforms = { uProgress: { value: 0 }, uSize: { value: 3.4 } };
+          var mat = new THREE.ShaderMaterial({
+            uniforms: uniforms,
+            transparent: true,
+            depthTest: false,
+            depthWrite: false,
+            blending: THREE.NormalBlending,
+            vertexShader: [
+              "attribute vec3 aOrigin; attribute vec3 aTarget; attribute vec3 aColor; attribute float aDelay;",
+              "uniform float uProgress; uniform float uSize;",
+              "varying vec3 vColor; varying float vP;",
+              "void main(){",
+              "  float span = 0.62;",
+              "  float p = clamp((uProgress - aDelay*(1.0-span)) / span, 0.0, 1.0);",
+              "  p = p*p*(3.0-2.0*p);",
+              "  vec3 pos = mix(aOrigin, aTarget, p);",
+              "  vec4 mv = modelViewMatrix * vec4(pos, 1.0);",
+              "  gl_Position = projectionMatrix * mv;",
+              "  gl_PointSize = uSize * (60.0 / -mv.z) * (0.45 + 0.55*p);",
+              "  vColor = aColor; vP = p;",
+              "}",
+            ].join("\n"),
+            fragmentShader: [
+              "precision highp float;",
+              "varying vec3 vColor; varying float vP;",
+              "void main(){",
+              "  vec2 d = gl_PointCoord - 0.5;",
+              "  float r2 = dot(d, d);",
+              "  if (r2 > 0.25) discard;",
+              "  float a = smoothstep(0.25, 0.02, r2);",
+              // brighter & whiter in flight, resolves to true color as it lands
+              "  vec3 c = mix(vColor + vec3(0.32)*(1.0-vP), vColor, vP);",
+              "  gl_FragColor = vec4(c, a * (0.7 + 0.3*vP));",
+              "}",
+            ].join("\n"),
+          });
 
-```html index.html
-<div
-  data-composition-id="code-particle-assemble"
-  data-composition-src="compositions/code-particle-assemble.html"
-  data-start="0"
-  data-duration="8"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+          var pts = new THREE.Points(geo, mat);
+          scene.add(pts);
+
+          camera.position.set(0, 0, 10);
+          var vfov = (camera.fov * Math.PI) / 180;
+          var sa = 1920 / 1080;
+          var fitH = worldH / 2 / Math.tan(vfov / 2) / 0.78;
+          var fitW = worldW / 2 / (Math.tan(vfov / 2) * sa) / 0.78;
+          camera.position.z = Math.max(fitH, fitW);
+          camera.lookAt(0, 0, 0);
+
+          tl.to(uniforms.uProgress, { value: 1.0, duration: dur * 0.72, ease: "power2.out" }, 0);
+
+          // uProgress is tweened by GSAP; the boot loop's render() draws once per frame.
+          return function () {};
+        }
+
+        // ---- dispatch + boot ------------------------------------------------------
+        function buildEffect(THREE, scene, camera, renderer, spec, st, tl) {
+          var state = T[spec.seq].states[0];
+          var dur = spec.duration;
+          if (spec.effect === "particles")
+            return fxParticles(THREE, scene, camera, renderer, state, st, tl, dur, spec.seed);
+          return function () {};
+        }
+
+        // Free GPU resources (renderer, geometries, materials, textures) on page teardown.
+        // One-shot renders exit per job so nothing leaks there; this guards long-lived
+        // Studio/player sessions that reload. Fires only on unload — never during capture.
+        function disposeGL(renderer, scene) {
+          scene.traverse(function (o) {
+            if (o.geometry && o.geometry.dispose) o.geometry.dispose();
+            var mats = o.material ? (Array.isArray(o.material) ? o.material : [o.material]) : [];
+            mats.forEach(function (m) {
+              if (m.map && m.map.dispose) m.map.dispose();
+              if (
+                m.uniforms &&
+                m.uniforms.uTex &&
+                m.uniforms.uTex.value &&
+                m.uniforms.uTex.value.dispose
+              ) {
+                m.uniforms.uTex.value.dispose();
+              }
+              if (m.dispose) m.dispose();
+            });
+          });
+          if (renderer.dispose) renderer.dispose();
+        }
+
+        function go() {
+          var spec = window.__BLOCK;
+          var root = document.getElementById("root");
+          var glcanvas = document.getElementById("gl");
+          var W = 1920;
+          var H = 1080;
+          window.__timelines = window.__timelines || {};
+          var tl = gsap.timeline({ paused: true });
+          window.__timelines[spec.id] = tl; // register synchronously
+
+          var THREE = window.THREE;
+          var renderer = new THREE.WebGLRenderer({
+            canvas: glcanvas,
+            antialias: true,
+            alpha: false,
+            preserveDrawingBuffer: true,
+          });
+          renderer.setPixelRatio(1);
+          renderer.setSize(W, H, false);
+          var scene = new THREE.Scene();
+          var camera = new THREE.PerspectiveCamera(45, W / H, 0.1, 200);
+          var st = {};
+
+          document.fonts.ready.then(function () {
+            var renderFn = buildEffect(THREE, scene, camera, renderer, spec, st, tl);
+            function render() {
+              renderFn();
+              renderer.render(scene, camera);
+            }
+            tl.eventCallback("onUpdate", render);
+            var dur = parseFloat(root.dataset.duration) || tl.duration();
+            tl.to({}, { duration: dur }, 0); // pad to full composition length
+            render(); // paint frame 0
+            window.addEventListener("beforeunload", function () {
+              disposeGL(renderer, scene);
+            });
+          });
+        }
+
+        if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", go);
+        else go();
+      })();
+    </script>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="code-particle-assemble" data-composition-src="compositions/code-particle-assemble.html" data-start="0" data-duration="8" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/code-scroll.mdx b/docs/catalog/blocks/code-scroll.mdx
index d80bc6974b..d62ee5d793 100644
--- a/docs/catalog/blocks/code-scroll.mdx
+++ b/docs/catalog/blocks/code-scroll.mdx
@@ -3,34 +3,1592 @@ title: "Code Scroll To Line"
 description: "The camera scrolls a long file to bring a target line to center and spotlights it — for walking through real modules."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-scroll.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-scroll.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/code-scroll.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Code Scroll To Line preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add code-scroll
-```
+<InstallCommand command="npx hyperframes add code-scroll" />
 
 That writes one file: `compositions/code-scroll.html`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`code-scroll.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Code Scroll To Line</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #05070b;
+      }
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        font-family: "JetBrains Mono", monospace;
+        color: #e6edf3;
+      }
+      .bg-field {
+        position: absolute;
+        inset: 0;
+        background: radial-gradient(1200px 700px at 50% 18%, #0e1726 0%, #070b12 55%, #05070b 100%);
+      }
+      .bg-grid {
+        position: absolute;
+        inset: 0;
+        background-image:
+          linear-gradient(rgba(88, 166, 255, 0.05) 1px, transparent 1px),
+          linear-gradient(90deg, rgba(88, 166, 255, 0.05) 1px, transparent 1px);
+        background-size: 64px 64px;
+        mask-image: radial-gradient(1100px 620px at 50% 42%, #000 0%, transparent 78%);
+      }
+      .bg-glow {
+        position: absolute;
+        width: 900px;
+        height: 900px;
+        border-radius: 50%;
+        filter: blur(120px);
+        opacity: 0.5;
+      }
+      .bg-glow.a {
+        background: #1f6feb55;
+        left: -180px;
+        top: -200px;
+      }
+      .bg-glow.b {
+        background: #2ea04355;
+        right: -200px;
+        bottom: -260px;
+      }
+      .editor {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        width: 1380px;
+        height: 800px;
+        background: #0b0f17;
+        border: 1px solid #1d2733;
+        border-radius: 16px;
+        box-shadow:
+          0 40px 120px rgba(0, 0, 0, 0.6),
+          0 2px 0 rgba(255, 255, 255, 0.03) inset;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+      }
+      .titlebar {
+        height: 56px;
+        flex: 0 0 56px;
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        padding: 0 22px;
+        background: linear-gradient(#11161f, #0c111a);
+        border-bottom: 1px solid #1b2430;
+      }
+      .dots {
+        display: flex;
+        gap: 10px;
+      }
+      .dot {
+        width: 14px;
+        height: 14px;
+        border-radius: 50%;
+      }
+      .dot.r {
+        background: #ff5f57;
+      }
+      .dot.y {
+        background: #febc2e;
+      }
+      .dot.g {
+        background: #28c840;
+      }
+      .filename {
+        font-size: 19px;
+        color: #8b98a9;
+        letter-spacing: 0.2px;
+      }
+      .filename .accent {
+        color: #d6e2f0;
+      }
+      .code-surface {
+        position: relative;
+        flex: 1 1 auto;
+        overflow: hidden;
+      }
+      .scene {
+        position: absolute;
+        inset: 0;
+        opacity: 0;
+        will-change: opacity;
+      }
+      .code {
+        position: absolute;
+        top: 38px;
+        left: 0;
+        right: 0;
+        padding: 0 44px 0 104px;
+        font-size: 30px;
+        line-height: 46px;
+        font-variant-ligatures: none;
+        tab-size: 2;
+      }
+      .gutter {
+        position: absolute;
+        top: 38px;
+        left: 0;
+        width: 84px;
+        padding-right: 18px;
+        font-size: 30px;
+        line-height: 46px;
+        text-align: right;
+        color: #828c9b;
+        user-select: none;
+      }
+      .ln {
+        display: block;
+        height: 46px;
+      }
+      .line {
+        display: block;
+        min-height: 46px;
+        white-space: pre;
+        position: relative;
+        z-index: 1;
+      }
+      .tok {
+        display: inline-block;
+        white-space: pre;
+        will-change: transform, opacity;
+      }
+      .caret {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 3px;
+        height: 32px;
+        margin-top: 6px;
+        background: #58a6ff;
+        border-radius: 1px;
+        z-index: 3;
+      }
+      .hl-box {
+        position: absolute;
+        background: rgba(88, 166, 255, 0.16);
+        border-left: 3px solid #58a6ff;
+        border-radius: 6px;
+        z-index: 0;
+        overflow: hidden;
+      }
+      .diff-line {
+        display: block;
+        min-height: 0;
+        line-height: 46px;
+        white-space: pre;
+        position: relative;
+        overflow: hidden;
+        padding-left: 14px;
+      }
+      .diff-sign {
+        display: inline-block;
+        width: 22px;
+        color: #41506220;
+      }
+      .diff-del {
+        background: rgba(248, 81, 73, 0.12);
+        box-shadow: inset 3px 0 #f85149;
+      }
+      .diff-add {
+        background: rgba(63, 185, 80, 0.12);
+        box-shadow: inset 3px 0 #3fb950;
+      }
+      .diff-del .diff-sign {
+        color: #f85149;
+      }
+      .diff-add .diff-sign {
+        color: #3fb950;
+      }
+      .flight-block {
+        position: absolute;
+        white-space: pre;
+        font-size: 27px;
+        line-height: 40px;
+        padding: 11px 22px;
+        border-radius: 11px;
+        background: #0f1722;
+        border: 1px solid #233044;
+        box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5);
+        will-change: transform, opacity;
+      }
+      .flight-target {
+        position: absolute;
+        border: 1.5px dashed #2a3a4f;
+        border-radius: 14px;
+        opacity: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="code-scroll"
+      data-start="0"
+      data-duration="6"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="bg-field" data-layout-ignore></div>
+      <div class="bg-grid" data-layout-ignore></div>
+      <div class="bg-glow a" data-layout-ignore></div>
+      <div class="bg-glow b" data-layout-ignore></div>
+      <div class="editor" id="editor" data-layout-ignore>
+        <div class="titlebar">
+          <div class="dots">
+            <span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
+          </div>
+          <span class="filename"
+            ><span class="accent">fetchWithRetry.js</span> — Code Scroll To Line</span
+          >
+        </div>
+        <div class="code-surface" id="surface"></div>
+      </div>
+    </div>
+    <script>
+      window.__TOKENS = {
+        scroll: {
+          lang: "js",
+          theme: "github-dark",
+          bg: "#24292e",
+          fg: "#e1e4e8",
+          states: [
+            {
+              code: 'import { createClient } from "./client"\nimport { logger } from "./logger"\n\nconst RETRIES = 3\n\nexport async function fetchWithRetry(url, opts = {}) {\n  const client = createClient(opts)\n  let lastError = null\n\n  for (let attempt = 1; attempt <= RETRIES; attempt++) {\n    try {\n      const res = await client.get(url)\n      if (res.ok) return res.body\n      lastError = new Error("bad status " + res.status)\n    } catch (err) {\n      lastError = err\n      logger.warn("attempt " + attempt + " failed")\n    }\n    await sleep(attempt * 250)\n  }\n\n  throw lastError\n}',
+              tokens: [
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-0",
+                  content: "import",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-1",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-2",
+                  content: "{ createClient }",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-3",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-4",
+                  content: "from",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-5",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-6",
+                  content: '"./client"',
+                  color: "#9ECBFF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-7",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-8",
+                  content: "import",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-9",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-10",
+                  content: "{ logger }",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-11",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-12",
+                  content: "from",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-13",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-14",
+                  content: '"./logger"',
+                  color: "#9ECBFF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-15",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-16",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-17",
+                  content: "const",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-18",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-19",
+                  content: "RETRIES",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-20",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-21",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-22",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-23",
+                  content: "3",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-24",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-25",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-26",
+                  content: "export",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-27",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-28",
+                  content: "async",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-29",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-30",
+                  content: "function",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-31",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-32",
+                  content: "fetchWithRetry",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-33",
+                  content: "(",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-34",
+                  content: "url",
+                  color: "#FFAB70",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-35",
+                  content: ",",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-36",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-37",
+                  content: "opts",
+                  color: "#FFAB70",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-38",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-39",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-40",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-41",
+                  content: "{}) {",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-42",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-43",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-44",
+                  content: "const",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-45",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-46",
+                  content: "client",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-47",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-48",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-49",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-50",
+                  content: "createClient",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-51",
+                  content: "(opts)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-52",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-53",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-54",
+                  content: "let",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-55",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-56",
+                  content: "lastError",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-57",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-58",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-59",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-60",
+                  content: "null",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-61",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-62",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-63",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-64",
+                  content: "for",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-65",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-66",
+                  content: "(",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-67",
+                  content: "let",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-68",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-69",
+                  content: "attempt",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-70",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-71",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-72",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-73",
+                  content: "1",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-74",
+                  content: "; attempt",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-75",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-76",
+                  content: "<=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-77",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-78",
+                  content: "RETRIES",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-79",
+                  content: "; attempt",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-80",
+                  content: "++",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-81",
+                  content: ") {",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-82",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-83",
+                  content: "    ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-84",
+                  content: "try",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-85",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-86",
+                  content: "{",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-87",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-88",
+                  content: "      ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-89",
+                  content: "const",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-90",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-91",
+                  content: "res",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-92",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-93",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-94",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-95",
+                  content: "await",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-96",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-97",
+                  content: "client.",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-98",
+                  content: "get",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-99",
+                  content: "(url)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-100",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-101",
+                  content: "      ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-102",
+                  content: "if",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-103",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-104",
+                  content: "(res.ok)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-105",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-106",
+                  content: "return",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-107",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-108",
+                  content: "res.body",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-109",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-110",
+                  content: "      ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-111",
+                  content: "lastError",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-112",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-113",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-114",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-115",
+                  content: "new",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-116",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-117",
+                  content: "Error",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-118",
+                  content: "(",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-119",
+                  content: '"bad status "',
+                  color: "#9ECBFF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-120",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-121",
+                  content: "+",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-122",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-123",
+                  content: "res.status)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-124",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-125",
+                  content: "    ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-126",
+                  content: "}",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-127",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-128",
+                  content: "catch",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-129",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-130",
+                  content: "(err) {",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-131",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-132",
+                  content: "      ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-133",
+                  content: "lastError",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-134",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-135",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-136",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-137",
+                  content: "err",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-138",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-139",
+                  content: "      ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-140",
+                  content: "logger.",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-141",
+                  content: "warn",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-142",
+                  content: "(",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-143",
+                  content: '"attempt "',
+                  color: "#9ECBFF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-144",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-145",
+                  content: "+",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-146",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-147",
+                  content: "attempt",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-148",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-149",
+                  content: "+",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-150",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-151",
+                  content: '" failed"',
+                  color: "#9ECBFF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-152",
+                  content: ")",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-153",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-154",
+                  content: "    ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-155",
+                  content: "}",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-156",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-157",
+                  content: "    ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-158",
+                  content: "await",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-159",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-160",
+                  content: "sleep",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-161",
+                  content: "(attempt",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-162",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-163",
+                  content: "*",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-164",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-165",
+                  content: "250",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-166",
+                  content: ")",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-167",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-168",
+                  content: "  ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-169",
+                  content: "}",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-170",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-171",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-172",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-173",
+                  content: "throw",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-174",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-175",
+                  content: "lastError",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-176",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-177",
+                  content: "}",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-178",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+              ],
+            },
+          ],
+        },
+      };
+      window.__BLOCK = {
+        id: "code-scroll",
+        effect: "scroll",
+        seq: "scroll",
+        line: 12,
+        duration: 6,
+      };
+    </script>
+    <script>
+      // hf-code-anim.js — self-contained code-animation engine for HyperFrames registry blocks.
+      //
+      // Reuses Shiki Magic Move's baked output (window.__TOKENS, baked at author time) and
+      // drives the animation as a PAUSED GSAP timeline the HyperFrames engine seeks per frame —
+      // NOT CSS transitions (those break under non-sequential frame seeking). FLIP measurement
+      // runs once inside document.fonts.ready (glyph metrics must be final). Each block sets
+      // window.__BLOCK = { id, effect, seq, line?, duration } and includes this engine; the
+      // engine builds one scene that fills the composition and registers window.__timelines[id].
+      (function () {
+        "use strict";
+        var T = window.__TOKENS || {};
+
+        function lineDiv() {
+          var d = document.createElement("div");
+          d.className = "line";
+          return d;
+        }
+
+        // Render a code state's keyed tokens into codeEl as lines of inline-block .tok spans.
+        function renderState(codeEl, state) {
+          codeEl.textContent = "";
+          var keyToEl = new Map();
+          var line = lineDiv();
+          codeEl.appendChild(line);
+          for (var i = 0; i < state.tokens.length; i++) {
+            var t = state.tokens[i];
+            if (t.content === "\n") {
+              line = lineDiv();
+              codeEl.appendChild(line);
+              continue;
+            }
+            var span = document.createElement("span");
+            span.className = "tok";
+            span.textContent = t.content;
+            span.style.color = t.color;
+            if (t.fontStyle & 1) span.style.fontStyle = "italic";
+            if (t.fontStyle & 2) span.style.fontWeight = "700";
+            line.appendChild(span);
+            keyToEl.set(t.key, span);
+          }
+          var last = codeEl.lastChild;
+          if (last && last.className === "line" && last.children.length === 0)
+            codeEl.removeChild(last);
+          return keyToEl;
+        }
+
+        function rectsOf(keyToEl) {
+          var m = new Map();
+          keyToEl.forEach(function (el, k) {
+            var r = el.getBoundingClientRect();
+            m.set(k, { left: r.left, top: r.top });
+          });
+          return m;
+        }
+
+        function makeScene(surface, withGutter) {
+          var scene = document.createElement("div");
+          scene.className = "scene";
+          if (withGutter) {
+            var g = document.createElement("div");
+            g.className = "gutter";
+            scene.appendChild(g);
+          }
+          var code = document.createElement("div");
+          code.className = "code";
+          scene.appendChild(code);
+          surface.appendChild(scene);
+          return { scene: scene, code: code, gutter: scene.querySelector(".gutter") };
+        }
+
+        function fillGutter(g, n) {
+          var html = "";
+          for (var i = 1; i <= n; i++) html += '<span class="ln">' + i + "</span>";
+          g.innerHTML = html;
+        }
 
-It runs for 6 seconds at 1920×1080. Paste this into your composition:
+        function splitLines(state) {
+          var lines = [{ text: "", tokens: [] }];
+          for (var i = 0; i < state.tokens.length; i++) {
+            var t = state.tokens[i];
+            if (t.content === "\n") {
+              lines.push({ text: "", tokens: [] });
+              continue;
+            }
+            var cur = lines[lines.length - 1];
+            cur.tokens.push(t);
+            cur.text += t.content;
+          }
+          if (lines.length && lines[lines.length - 1].tokens.length === 0) lines.pop();
+          return lines;
+        }
 
-```html index.html
-<div
-  data-composition-id="code-scroll"
-  data-composition-src="compositions/code-scroll.html"
-  data-start="0"
-  data-duration="6"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+        function lineDiff(a, b) {
+          var n = a.length;
+          var m = b.length;
+          var dp = [];
+          for (var i = 0; i <= n; i++) dp.push(new Array(m + 1).fill(0));
+          for (var i = n - 1; i >= 0; i--) {
+            for (var j = m - 1; j >= 0; j--) {
+              dp[i][j] =
+                a[i].text === b[j].text
+                  ? dp[i + 1][j + 1] + 1
+                  : Math.max(dp[i + 1][j], dp[i][j + 1]);
+            }
+          }
+          var ops = [];
+          var i = 0;
+          var j = 0;
+          while (i < n && j < m) {
+            if (a[i].text === b[j].text) {
+              ops.push({ type: "same", line: b[j] });
+              i++;
+              j++;
+            } else if (dp[i + 1][j] >= dp[i][j + 1]) {
+              ops.push({ type: "del", line: a[i] });
+              i++;
+            } else {
+              ops.push({ type: "add", line: b[j] });
+              j++;
+            }
+          }
+          while (i < n) ops.push({ type: "del", line: a[i++] });
+          while (j < m) ops.push({ type: "add", line: b[j++] });
+          return ops;
+        }
+
+        // ---- single-scene effect builders (fade in, play, hold to end) -------------
+        var FADE = 0.45;
+
+        function scroll(tl, surface, state, start, targetLine) {
+          var SCROLL = 1.7;
+          var parts = makeScene(surface, true);
+          var code = parts.code;
+          renderState(code, state);
+          var lines = code.querySelectorAll(".line");
+          fillGutter(parts.gutter, lines.length);
+          var surfRect = surface.getBoundingClientRect();
+          var idx = Math.max(0, Math.min(lines.length - 1, targetLine - 1));
+          var lr = lines[idx].getBoundingClientRect();
+          var lineCenter = lr.top + lr.height / 2 - surfRect.top;
+          var dy = surfRect.height * 0.5 - lineCenter;
+          var box = document.createElement("div");
+          box.className = "hl-box";
+          box.style.left = lines[idx].offsetLeft - 8 + "px";
+          box.style.top = lines[idx].offsetTop - 1 + "px";
+          box.style.width = lr.width + 18 + "px";
+          box.style.height = lr.height + 2 + "px";
+          code.insertBefore(box, code.firstChild);
+          tl.set(parts.scene, { opacity: 0 }, 0);
+          tl.to(parts.scene, { opacity: 1, duration: FADE, ease: "power1.out" }, start);
+          tl.set(box, { opacity: 0 }, 0);
+          var at = start + FADE + 0.35;
+          tl.fromTo(
+            [code, parts.gutter],
+            { y: 0 },
+            { y: dy, duration: SCROLL, ease: "power2.inOut" },
+            at,
+          );
+          var arrAt = at + SCROLL;
+          for (var i = 0; i < lines.length; i++) {
+            if (i === idx) continue;
+            tl.fromTo(
+              lines[i],
+              { opacity: 1 },
+              { opacity: 0.35, duration: 0.5, ease: "power1.out" },
+              arrAt - 0.35,
+            );
+          }
+          tl.to(box, { opacity: 1, duration: 0.45, ease: "power1.out" }, arrAt - 0.35);
+        }
+
+        function buildEffect(tl, surface, spec) {
+          var start = 0.45;
+          var seq = T[spec.seq];
+          if (spec.effect === "scroll") scroll(tl, surface, seq.states[0], start, spec.line || 1);
+        }
+
+        function go() {
+          var spec = window.__BLOCK;
+          var surface = document.getElementById("surface");
+          var root = document.getElementById("root");
+          window.__timelines = window.__timelines || {};
+          var tl = gsap.timeline({ paused: true });
+          // Build inside fonts.ready (glyph metrics must be final), then register.
+          // Register ONLY after the timeline is fully built: the runtime's
+          // sub-composition readiness gate treats "key present" as "ready" and
+          // nests the child once. An empty timeline registered before this build
+          // would be nested empty and never re-nested → blank render when used as
+          // a sub-composition. See the contract in engine frameCapture.ts.
+          document.fonts.ready.then(function () {
+            tl.from("#editor", { opacity: 0, scale: 0.985, duration: 0.5, ease: "power2.out" }, 0);
+            buildEffect(tl, surface, spec);
+            var dur = parseFloat(root.dataset.duration) || tl.duration();
+            tl.to({}, { duration: dur }, 0); // pad to full composition length
+            window.__timelines["code-scroll"] = tl; // register AFTER setup completes
+            if (typeof window.__hfForceTimelineRebind === "function") {
+              window.__hfForceTimelineRebind(); // re-nest now that we are populated
+            }
+          });
+        }
+
+        if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", go);
+        else go();
+      })();
+    </script>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="code-scroll" data-composition-src="compositions/code-scroll.html" data-start="0" data-duration="6" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/code-shader-dissolve.mdx b/docs/catalog/blocks/code-shader-dissolve.mdx
index f98e066cc5..11d6a89c38 100644
--- a/docs/catalog/blocks/code-shader-dissolve.mdx
+++ b/docs/catalog/blocks/code-shader-dissolve.mdx
@@ -3,34 +3,567 @@ title: "Code Shader Dissolve"
 description: "The code compiles into existence: a GPU fragment shader resolves it out of seeded noise with a chromatic dissolve front and edge glow, then holds crisp."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-shader-dissolve.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-shader-dissolve.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/code-shader-dissolve.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Code Shader Dissolve preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add code-shader-dissolve
-```
+<InstallCommand command="npx hyperframes add code-shader-dissolve" />
 
 That writes one file: `compositions/code-shader-dissolve.html`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`code-shader-dissolve.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Code Shader Dissolve</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #05070b;
+      }
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+      }
+      #gl {
+        position: absolute;
+        inset: 0;
+        width: 1920px;
+        height: 1080px;
+        display: block;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="code-shader-dissolve"
+      data-start="0"
+      data-duration="7"
+      data-width="1920"
+      data-height="1080"
+    >
+      <canvas id="gl" width="1920" height="1080"></canvas>
+    </div>
+    <script>
+      window.__TOKENS = {
+        compile: {
+          lang: "js",
+          theme: "github-dark",
+          bg: "#24292e",
+          fg: "#e1e4e8",
+          states: [
+            {
+              code: "function compile(src) {\n  const ast = parse(src)\n  const ir = optimize(ast)\n  return emit(ir)\n}",
+              tokens: [
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-0",
+                  content: "function",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-1",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-2",
+                  content: "compile",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-3",
+                  content: "(",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-4",
+                  content: "src",
+                  color: "#FFAB70",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-5",
+                  content: ") {",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-6",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-7",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-8",
+                  content: "const",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-9",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-10",
+                  content: "ast",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-11",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-12",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-13",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-14",
+                  content: "parse",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-15",
+                  content: "(src)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-16",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-17",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-18",
+                  content: "const",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-19",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-20",
+                  content: "ir",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-21",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-22",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-23",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-24",
+                  content: "optimize",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-25",
+                  content: "(ast)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-26",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-27",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-28",
+                  content: "return",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-29",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-30",
+                  content: "emit",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-31",
+                  content: "(ir)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-32",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-33",
+                  content: "}",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-34",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+              ],
+            },
+          ],
+        },
+      };
+      window.__BLOCK = {
+        id: "code-shader-dissolve",
+        effect: "dissolve",
+        seq: "compile",
+        duration: 7,
+        seed: 11,
+      };
+    </script>
+    <script>
+      // hf-code-anim-gl.js — WebGL code-animation engine for the "crazy" Code Animations blocks.
+      //
+      // Bridges the baked Shiki tokens (window.__TOKENS) into Three.js: the tokens are drawn once
+      // to an offscreen 2D canvas (a CanvasTexture), which then drives a lit 3D slab, a dissolve
+      // shader, or a GPU particle system. Determinism per the project contract:
+      //   - render only via tl.eventCallback("onUpdate", …) + one initial render() — never rAF
+      //   - all randomness from a seeded mulberry32 — never Math.random / Date.now
+      //   - canvas drawn once after document.fonts.ready (final glyph metrics)
+      //   - paused GSAP timeline registered on window.__timelines[id]; HF seeks it per frame
+      //
+      // Each block sets window.__BLOCK = { id, effect, seq, duration, seed } and includes this engine.
+      (function () {
+        "use strict";
+        var T = window.__TOKENS || {};
+
+        // ---- seeded PRNG (no Math.random) -----------------------------------------
+        function mulberry32(a) {
+          return function () {
+            a |= 0;
+            a = (a + 0x6d2b79f5) | 0;
+            var t = Math.imul(a ^ (a >>> 15), 1 | a);
+            t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+            return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+          };
+        }
+
+        // ---- split a token state into lines of {content,color} --------------------
+        function splitLines(state) {
+          var lines = [[]];
+          for (var i = 0; i < state.tokens.length; i++) {
+            var t = state.tokens[i];
+            if (t.content === "\n") {
+              lines.push([]);
+              continue;
+            }
+            lines[lines.length - 1].push(t);
+          }
+          while (lines.length && lines[lines.length - 1].length === 0) lines.pop();
+          return lines;
+        }
+
+        // ---- THE BRIDGE: draw baked tokens to an offscreen 2D canvas ---------------
+        // Returns { canvas, W, H, lines, lineH, padY, fontPx } so effects can sample it.
+        function drawCodeToCanvas(state, opts) {
+          opts = opts || {};
+          var fontPx = opts.fontPx || 36;
+          var lineH = opts.lineH || 54;
+          var padX = opts.padX || 70;
+          var padY = opts.padY || 60;
+          var weight = opts.weight || 500;
+          var font = weight + " " + fontPx + 'px "JetBrains Mono", monospace';
+
+          var lines = splitLines(state);
+          var measure = document.createElement("canvas").getContext("2d");
+          measure.font = font;
+          var maxW = 0;
+          for (var i = 0; i < lines.length; i++) {
+            var w = 0;
+            for (var j = 0; j < lines[i].length; j++)
+              w += measure.measureText(lines[i][j].content).width;
+            if (w > maxW) maxW = w;
+          }
+          var W = Math.max(2, Math.ceil(maxW + padX * 2));
+          var H = Math.max(2, Math.ceil(lines.length * lineH + padY * 2));
+
+          var canvas = document.createElement("canvas");
+          canvas.width = W;
+          canvas.height = H;
+          var ctx = canvas.getContext("2d");
+          if (opts.transparent) {
+            ctx.clearRect(0, 0, W, H);
+          } else {
+            ctx.fillStyle = opts.bg || "#0b0f17";
+            ctx.fillRect(0, 0, W, H);
+          }
+          ctx.textBaseline = "top";
+          ctx.font = font;
+          for (var li = 0; li < lines.length; li++) {
+            var x = padX;
+            var y = padY + li * lineH;
+            for (var k = 0; k < lines[li].length; k++) {
+              var tok = lines[li][k];
+              ctx.fillStyle = tok.color;
+              ctx.fillText(tok.content, x, y);
+              x += ctx.measureText(tok.content).width;
+            }
+          }
+          return {
+            canvas: canvas,
+            W: W,
+            H: H,
+            lines: lines.length,
+            lineH: lineH,
+            padY: padY,
+            fontPx: fontPx,
+          };
+        }
+
+        function fxDissolve(THREE, scene, camera, renderer, state, st, tl, dur, seed) {
+          scene.background = new THREE.Color(0x05070b);
+          var code = drawCodeToCanvas(state, {
+            fontPx: 40,
+            lineH: 60,
+            padX: 90,
+            padY: 80,
+            weight: 600,
+          });
+          var tex = new THREE.CanvasTexture(code.canvas);
+          tex.minFilter = THREE.LinearFilter;
+          tex.magFilter = THREE.LinearFilter;
+          tex.generateMipmaps = false;
+
+          var aspect = code.W / code.H;
+          var planeH = 6.6;
+          var planeW = planeH * aspect;
+
+          var uniforms = {
+            uTex: { value: tex },
+            uProgress: { value: 0 },
+            uSeed: { value: (seed || 1) * 13.37 },
+          };
+          var mat = new THREE.ShaderMaterial({
+            uniforms: uniforms,
+            transparent: true,
+            vertexShader: [
+              "varying vec2 vUv;",
+              "void main(){ vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0); }",
+            ].join("\n"),
+            fragmentShader: [
+              "precision highp float;",
+              "uniform sampler2D uTex;",
+              "uniform float uProgress;",
+              "uniform float uSeed;",
+              "varying vec2 vUv;",
+              "float hash(vec2 p){ p=fract(p*vec2(123.34,456.21)); p+=dot(p,p+45.32); return fract(p.x*p.y); }",
+              "float noise(vec2 p){ vec2 i=floor(p),f=fract(p); float a=hash(i),b=hash(i+vec2(1.,0.)),c=hash(i+vec2(0.,1.)),d=hash(i+vec2(1.,1.)); vec2 u=f*f*(3.-2.*f); return mix(mix(a,b,u.x),mix(c,d,u.x),u.y); }",
+              "void main(){",
+              "  vec2 uv = vUv;",
+              // multi-octave seeded noise field
+              "  float n = noise(uv*16.0+uSeed)*0.6 + noise(uv*48.0+uSeed*1.7)*0.3 + noise(uv*120.0+uSeed*2.3)*0.1;",
+              "  float edge = 0.12;",
+              "  float reveal = smoothstep(n-edge, n+edge, uProgress);", // 0 hidden -> 1 shown
+              // chromatic fringe strongest at the dissolving edge
+              "  float band = reveal*(1.0-reveal)*4.0;",
+              "  float off = band*0.010;",
+              "  float r = texture2D(uTex, uv+vec2(off,0.0)).r;",
+              "  float g = texture2D(uTex, uv).g;",
+              "  float b = texture2D(uTex, uv-vec2(off,0.0)).b;",
+              "  vec3 codeCol = vec3(r,g,b);",
+              // additive cyan edge glow along the dissolve front
+              "  vec3 glow = vec3(0.30,0.72,1.0) * band * 0.9;",
+              "  vec3 outc = codeCol*reveal + glow;",
+              "  float a = max(reveal, band*0.8);",
+              "  gl_FragColor = vec4(outc, a);",
+              "}",
+            ].join("\n"),
+          });
 
-It runs for 7 seconds at 1920×1080. Paste this into your composition:
+          var plane = new THREE.Mesh(new THREE.PlaneGeometry(planeW, planeH), mat);
+          scene.add(plane);
 
-```html index.html
-<div
-  data-composition-id="code-shader-dissolve"
-  data-composition-src="compositions/code-shader-dissolve.html"
-  data-start="0"
-  data-duration="7"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+          camera.position.set(0, 0, 10);
+          var vfov = (camera.fov * Math.PI) / 180;
+          var screenAspect = 1920 / 1080;
+          var fitH = planeH / 2 / Math.tan(vfov / 2) / 0.82;
+          var fitW = planeW / 2 / (Math.tan(vfov / 2) * screenAspect) / 0.82;
+          camera.position.z = Math.max(fitH, fitW);
+          camera.lookAt(0, 0, 0);
+
+          // compile in, then hold crisp. Overshoot to 1.15 so even max-noise pixels
+          // (n up to ~1.0, edge 0.12) fully resolve — no leftover specks at rest.
+          tl.to(uniforms.uProgress, { value: 1.15, duration: dur * 0.62, ease: "power1.inOut" }, 0);
+
+          // uProgress is tweened by GSAP; the boot loop's render() draws once per frame.
+          return function () {};
+        }
+
+        // ---- dispatch + boot ------------------------------------------------------
+        function buildEffect(THREE, scene, camera, renderer, spec, st, tl) {
+          var state = T[spec.seq].states[0];
+          var dur = spec.duration;
+          if (spec.effect === "dissolve")
+            return fxDissolve(THREE, scene, camera, renderer, state, st, tl, dur, spec.seed);
+          return function () {};
+        }
+
+        // Free GPU resources (renderer, geometries, materials, textures) on page teardown.
+        // One-shot renders exit per job so nothing leaks there; this guards long-lived
+        // Studio/player sessions that reload. Fires only on unload — never during capture.
+        function disposeGL(renderer, scene) {
+          scene.traverse(function (o) {
+            if (o.geometry && o.geometry.dispose) o.geometry.dispose();
+            var mats = o.material ? (Array.isArray(o.material) ? o.material : [o.material]) : [];
+            mats.forEach(function (m) {
+              if (m.map && m.map.dispose) m.map.dispose();
+              if (
+                m.uniforms &&
+                m.uniforms.uTex &&
+                m.uniforms.uTex.value &&
+                m.uniforms.uTex.value.dispose
+              ) {
+                m.uniforms.uTex.value.dispose();
+              }
+              if (m.dispose) m.dispose();
+            });
+          });
+          if (renderer.dispose) renderer.dispose();
+        }
+
+        function go() {
+          var spec = window.__BLOCK;
+          var root = document.getElementById("root");
+          var glcanvas = document.getElementById("gl");
+          var W = 1920;
+          var H = 1080;
+          window.__timelines = window.__timelines || {};
+          var tl = gsap.timeline({ paused: true });
+          window.__timelines[spec.id] = tl; // register synchronously
+
+          var THREE = window.THREE;
+          var renderer = new THREE.WebGLRenderer({
+            canvas: glcanvas,
+            antialias: true,
+            alpha: false,
+            preserveDrawingBuffer: true,
+          });
+          renderer.setPixelRatio(1);
+          renderer.setSize(W, H, false);
+          var scene = new THREE.Scene();
+          var camera = new THREE.PerspectiveCamera(45, W / H, 0.1, 200);
+          var st = {};
+
+          document.fonts.ready.then(function () {
+            var renderFn = buildEffect(THREE, scene, camera, renderer, spec, st, tl);
+            function render() {
+              renderFn();
+              renderer.render(scene, camera);
+            }
+            tl.eventCallback("onUpdate", render);
+            var dur = parseFloat(root.dataset.duration) || tl.duration();
+            tl.to({}, { duration: dur }, 0); // pad to full composition length
+            render(); // paint frame 0
+            window.addEventListener("beforeunload", function () {
+              disposeGL(renderer, scene);
+            });
+          });
+        }
+
+        if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", go);
+        else go();
+      })();
+    </script>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="code-shader-dissolve" data-composition-src="compositions/code-shader-dissolve.html" data-start="0" data-duration="7" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-basic.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-basic.mdx
index 706a8bb607..48a3f355fd 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-basic.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-basic.mdx
@@ -3,21 +3,279 @@ title: "Code Snippet - Apple Terminal Basic"
 description: "Apple Terminal Basic profile: white background, black text, per-character typing animation of a shell session."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-basic.mp4" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/code-snippet-apple-terminal-basic.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Code Snippet - Apple Terminal Basic preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add code-snippet-apple-terminal-basic
-```
+<InstallCommand command="npx hyperframes add code-snippet-apple-terminal-basic" />
 
 That writes one file: `compositions/code-snippet-apple-terminal-basic.html`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`code-snippet-apple-terminal-basic.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Apple Terminal Basic</title>
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #ececec;
+        font-family: "SF Mono", Menlo, Monaco, Consolas, "Courier New", monospace;
+      }
+
+      #scene {
+        width: 1920px;
+        height: 1080px;
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: linear-gradient(135deg, #e8e8e8 0%, #d8d8d8 100%);
+      }
+
+      .terminal-window {
+        width: 1400px;
+        height: 700px;
+        border-radius: 10px;
+        overflow: hidden;
+        box-shadow:
+          0 30px 80px rgba(0, 0, 0, 0.25),
+          0 10px 30px rgba(0, 0, 0, 0.15);
+        display: flex;
+        flex-direction: column;
+      }
+
+      .titlebar {
+        height: 38px;
+        background: #ececec;
+        display: flex;
+        align-items: center;
+        padding: 0 14px;
+        gap: 0;
+        flex-shrink: 0;
+        border-bottom: 1px solid #d0d0d0;
+        position: relative;
+      }
+
+      .traffic-lights {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+      }
+
+      .traffic-lights span {
+        width: 13px;
+        height: 13px;
+        border-radius: 50%;
+        display: inline-block;
+      }
+
+      .traffic-lights .close {
+        background: #ff5f57;
+        border: 1px solid #e0443e;
+      }
+
+      .traffic-lights .minimize {
+        background: #ffbd2e;
+        border: 1px solid #dfa123;
+      }
+
+      .traffic-lights .fullscreen {
+        background: #28c840;
+        border: 1px solid #1aab29;
+      }
+
+      .window-title {
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        font-size: 13px;
+        color: #333333;
+        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
+        font-weight: 500;
+        letter-spacing: -0.1px;
+      }
+
+      .terminal-canvas {
+        flex: 1;
+        background: #ffffff;
+        padding: 18px 20px;
+        overflow: hidden;
+        font-size: 14px;
+        line-height: 1.6;
+        color: #000000;
+      }
+
+      .output-lines {
+        margin-bottom: 4px;
+      }
+
+      .output-line {
+        display: block;
+        white-space: pre;
+        opacity: 0;
+        color: #000000;
+      }
+
+      .output-line.bold {
+        font-weight: bold;
+        color: #000000;
+      }
+
+      .input-line {
+        display: flex;
+        align-items: center;
+        white-space: pre;
+      }
 
-It runs for 12 seconds at 1920×1080. Paste this into your composition:
+      .prompt {
+        color: #000000;
+        font-weight: bold;
+        user-select: none;
+      }
 
-```html index.html
+      .typed-command {
+        color: #000000;
+      }
+
+      .cursor-block {
+        display: inline-block;
+        width: 9px;
+        height: 16px;
+        background: #000000;
+        vertical-align: text-bottom;
+        margin-left: 1px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="scene"
+      data-composition-id="code-snippet-apple-terminal-basic"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="terminal-window">
+        <div class="titlebar">
+          <div class="traffic-lights">
+            <span class="close"></span>
+            <span class="minimize"></span>
+            <span class="fullscreen"></span>
+          </div>
+          <span class="window-title">bash — 80×24</span>
+        </div>
+        <div class="terminal-canvas">
+          <div class="output-lines">
+            <span class="output-line">Last login: Mon Jun 2 09:14:22 on ttys001</span>
+            <span class="output-line">total 48</span>
+            <span class="output-line bold">drwxr-xr-x 8 user staff 256 Jun 2 09:10 .</span>
+            <span class="output-line">drwxr-xr-x 42 user staff 1344 Jun 1 18:22 ..</span>
+            <span class="output-line">-rw-r--r-- 1 user staff 872 May 30 14:05 README.md</span>
+            <span class="output-line bold">drwxr-xr-x 5 user staff 160 Jun 2 09:10 dist</span>
+            <span class="output-line bold"
+              >drwxr-xr-x 12 user staff 384 Jun 2 09:10 node_modules</span
+            >
+            <span class="output-line">-rw-r--r-- 1 user staff 1204 Jun 2 09:08 package.json</span>
+            <span class="output-line bold">drwxr-xr-x 6 user staff 192 Jun 2 09:10 src</span>
+            <span class="output-line">-rw-r--r-- 1 user staff 348 May 29 11:42 tsconfig.json</span>
+          </div>
+          <div class="input-line">
+            <span class="prompt">user@Mac ~ % </span><span class="typed-command"></span
+            ><span class="cursor-block"></span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      const command = "ls -la";
+      const typedEl = document.querySelector(".typed-command");
+      const cursorEl = document.querySelector(".cursor-block");
+      const outputLines = document.querySelectorAll(".output-line");
+
+      const tl = gsap.timeline({ paused: true });
+
+      // Phase 1 (0–0.5s): hold on empty prompt
+      tl.set(typedEl, { text: "" }, 0);
+
+      // Phase 2 (0.5–2s): type command char by char
+      const charDuration = 1.5 / command.length;
+      command.split("").forEach((char, i) => {
+        tl.add(
+          () => {
+            typedEl.textContent = command.slice(0, i + 1);
+          },
+          0.5 + i * charDuration,
+        );
+      });
+
+      // Phase 3 (2.2s): hide cursor, show first output line (login message)
+      tl.set(cursorEl, { opacity: 0 }, 2.2);
+      tl.set(outputLines[0], { opacity: 1 }, 2.3);
+
+      // Phase 4 (2.5s): clear command, show ls output line by line
+      tl.add(() => {
+        typedEl.textContent = "";
+      }, 2.5);
+
+      outputLines.forEach((line, i) => {
+        if (i === 0) return; // already shown
+        tl.set(line, { opacity: 1 }, 2.8 + i * 0.08);
+      });
+
+      // Phase 5 (4s): new prompt with blinking cursor
+      tl.add(() => {
+        const inputLine = document.querySelector(".input-line");
+        const newPrompt = document.createElement("div");
+        newPrompt.className = "input-line";
+        newPrompt.innerHTML =
+          '<span class="prompt">user@Mac ~ % </span><span class="typed-command"></span><span class="cursor-block" id="final-cursor"></span>';
+        inputLine.style.display = "none";
+        inputLine.parentNode.appendChild(newPrompt);
+      }, 4.0);
+
+      // Phase 6 (4.2–10s): blink cursor 3 times then stop
+      const blinkTimes = [4.2, 4.6, 5.0, 5.4, 5.8, 6.2];
+      blinkTimes.forEach((t, i) => {
+        tl.add(() => {
+          const fc = document.getElementById("final-cursor");
+          if (fc) fc.style.opacity = i % 2 === 0 ? "0" : "1";
+        }, t);
+      });
+      tl.add(() => {
+        const fc = document.getElementById("final-cursor");
+        if (fc) fc.style.opacity = "1";
+      }, 6.6);
+
+      window.__timelines["code-snippet-apple-terminal-basic"] = tl;
+    </script>
+  </body>
+</html>
+```
+
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
 <div
   data-composition-id="code-snippet-apple-terminal-basic"
   data-composition-src="compositions/code-snippet-apple-terminal-basic.html"
@@ -29,8 +287,14 @@ It runs for 12 seconds at 1920×1080. Paste this into your composition:
 ></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.
+## Features
+
+- Faithful recreation of macOS Terminal.app Basic profile — white background, black text, solid cursor
+- macOS window chrome with traffic light buttons (close, minimize, fullscreen) and centered title bar
+- Per-character GSAP typing animation — command types out character by character
+- Output lines reveal sequentially after command executes
+- Cursor blinks three times at the end then holds steady
+- Self-contained HTML — no external assets, only GSAP CDN
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-clear-dark.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-clear-dark.mdx
index f868bca4b2..36c286ca97 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-clear-dark.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-clear-dark.mdx
@@ -3,21 +3,274 @@ title: "Code Snippet - Apple Terminal Clear Dark"
 description: "Apple Terminal Clear Dark profile: semi-transparent dark background, per-character typing animation of a shell session."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-clear-dark.mp4" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/code-snippet-apple-terminal-clear-dark.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Code Snippet - Apple Terminal Clear Dark preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add code-snippet-apple-terminal-clear-dark
-```
+<InstallCommand command="npx hyperframes add code-snippet-apple-terminal-clear-dark" />
 
 That writes one file: `compositions/code-snippet-apple-terminal-clear-dark.html`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`code-snippet-apple-terminal-clear-dark.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Apple Terminal Clear Dark</title>
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #1a1a1a;
+        font-family: "SF Mono", Menlo, Monaco, Consolas, "Courier New", monospace;
+      }
+
+      #scene {
+        width: 1920px;
+        height: 1080px;
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: linear-gradient(135deg, #1a1a1a 0%, #111111 100%);
+      }
+
+      .terminal-window {
+        width: 1400px;
+        height: 700px;
+        border-radius: 10px;
+        overflow: hidden;
+        box-shadow:
+          0 30px 80px rgba(0, 0, 0, 0.7),
+          0 10px 30px rgba(0, 0, 0, 0.5);
+        display: flex;
+        flex-direction: column;
+      }
+
+      .titlebar {
+        height: 38px;
+        background: rgba(0, 0, 0, 0.4);
+        display: flex;
+        align-items: center;
+        padding: 0 14px;
+        flex-shrink: 0;
+        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+        position: relative;
+      }
+
+      .traffic-lights {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+      }
+
+      .traffic-lights span {
+        width: 13px;
+        height: 13px;
+        border-radius: 50%;
+        display: inline-block;
+      }
+
+      .traffic-lights .close {
+        background: #ff5f57;
+        border: 1px solid #e0443e;
+      }
+
+      .traffic-lights .minimize {
+        background: #ffbd2e;
+        border: 1px solid #dfa123;
+      }
+
+      .traffic-lights .fullscreen {
+        background: #28c840;
+        border: 1px solid #1aab29;
+      }
+
+      .window-title {
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        font-size: 13px;
+        color: #ffffff;
+        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
+        font-weight: 500;
+        letter-spacing: -0.1px;
+      }
+
+      .terminal-canvas {
+        flex: 1;
+        background: rgba(0, 0, 0, 0.7);
+        padding: 18px 20px;
+        overflow: hidden;
+        font-size: 14px;
+        line-height: 1.6;
+        color: #ffffff;
+      }
+
+      .output-lines {
+        margin-bottom: 4px;
+      }
+
+      .output-line {
+        display: block;
+        white-space: pre;
+        opacity: 0;
+        color: #ffffff;
+      }
+
+      .output-line.bold {
+        font-weight: bold;
+        color: #ffffff;
+      }
+
+      .output-line.dim {
+        color: rgba(255, 255, 255, 0.6);
+      }
+
+      .input-line {
+        display: flex;
+        align-items: center;
+        white-space: pre;
+      }
 
-It runs for 12 seconds at 1920×1080. Paste this into your composition:
+      .prompt {
+        color: #888888;
+        font-weight: bold;
+        user-select: none;
+      }
 
-```html index.html
+      .typed-command {
+        color: #ffffff;
+      }
+
+      .cursor-block {
+        display: inline-block;
+        width: 9px;
+        height: 16px;
+        background: #888888;
+        vertical-align: text-bottom;
+        margin-left: 1px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="scene"
+      data-composition-id="code-snippet-apple-terminal-clear-dark"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="terminal-window">
+        <div class="titlebar">
+          <div class="traffic-lights">
+            <span class="close"></span>
+            <span class="minimize"></span>
+            <span class="fullscreen"></span>
+          </div>
+          <span class="window-title">bash — 80×24</span>
+        </div>
+        <div class="terminal-canvas">
+          <div class="output-lines">
+            <span class="output-line dim">Last login: Mon Jun 2 09:14:22 on ttys002</span>
+            <span class="output-line">Scanning dependencies...</span>
+            <span class="output-line">Found 3 vulnerabilities (1 moderate, 2 low)</span>
+            <span class="output-line dim"> package: lodash@4.17.20</span>
+            <span class="output-line dim"> severity: moderate</span>
+            <span class="output-line dim"> fix: lodash@4.17.21</span>
+            <span class="output-line dim"> package: minimist@1.2.5</span>
+            <span class="output-line dim"> severity: low</span>
+            <span class="output-line dim"> fix: minimist@1.2.6</span>
+            <span class="output-line bold">Run `npm audit fix` to fix them.</span>
+          </div>
+          <div class="input-line">
+            <span class="prompt">user@Mac ~ % </span><span class="typed-command"></span
+            ><span class="cursor-block"></span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      const command = "npm audit";
+      const typedEl = document.querySelector(".typed-command");
+      const cursorEl = document.querySelector(".cursor-block");
+      const outputLines = document.querySelectorAll(".output-line");
+
+      const tl = gsap.timeline({ paused: true });
+
+      tl.set(typedEl, { text: "" }, 0);
+
+      const charDuration = 1.5 / command.length;
+      command.split("").forEach((char, i) => {
+        tl.add(
+          () => {
+            typedEl.textContent = command.slice(0, i + 1);
+          },
+          0.5 + i * charDuration,
+        );
+      });
+
+      tl.set(cursorEl, { opacity: 0 }, 2.2);
+      tl.set(outputLines[0], { opacity: 1 }, 2.3);
+
+      tl.add(() => {
+        typedEl.textContent = "";
+      }, 2.5);
+
+      outputLines.forEach((line, i) => {
+        if (i === 0) return;
+        tl.set(line, { opacity: 1 }, 2.8 + i * 0.1);
+      });
+
+      tl.add(() => {
+        const inputLine = document.querySelector(".input-line");
+        const newPrompt = document.createElement("div");
+        newPrompt.className = "input-line";
+        newPrompt.innerHTML =
+          '<span class="prompt">user@Mac ~ % </span><span class="typed-command"></span><span class="cursor-block" id="final-cursor"></span>';
+        inputLine.style.display = "none";
+        inputLine.parentNode.appendChild(newPrompt);
+      }, 4.2);
+
+      const blinkTimes = [4.4, 4.8, 5.2, 5.6, 6.0, 6.4];
+      blinkTimes.forEach((t, i) => {
+        tl.add(() => {
+          const fc = document.getElementById("final-cursor");
+          if (fc) fc.style.opacity = i % 2 === 0 ? "0" : "1";
+        }, t);
+      });
+      tl.add(() => {
+        const fc = document.getElementById("final-cursor");
+        if (fc) fc.style.opacity = "1";
+      }, 6.8);
+
+      window.__timelines["code-snippet-apple-terminal-clear-dark"] = tl;
+    </script>
+  </body>
+</html>
+```
+
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
 <div
   data-composition-id="code-snippet-apple-terminal-clear-dark"
   data-composition-src="compositions/code-snippet-apple-terminal-clear-dark.html"
@@ -29,8 +282,14 @@ It runs for 12 seconds at 1920×1080. Paste this into your composition:
 ></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.
+## Features
+
+- Faithful recreation of macOS Terminal.app Clear Dark profile — semi-transparent black background with white text
+- macOS window chrome with traffic light buttons and centered title bar
+- Per-character GSAP typing animation — command types out character by character
+- Output lines reveal sequentially after command executes
+- Cursor blinks three times at the end then holds steady
+- Self-contained HTML — no external assets, only GSAP CDN
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-clear-light.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-clear-light.mdx
index 94ed3e3c94..69e7ab26c8 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-clear-light.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-clear-light.mdx
@@ -3,21 +3,274 @@ title: "Code Snippet - Apple Terminal Clear Light"
 description: "Apple Terminal Clear Light profile: semi-transparent light background, per-character typing animation of a shell session."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-clear-light.mp4" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/code-snippet-apple-terminal-clear-light.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Code Snippet - Apple Terminal Clear Light preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add code-snippet-apple-terminal-clear-light
-```
+<InstallCommand command="npx hyperframes add code-snippet-apple-terminal-clear-light" />
 
 That writes one file: `compositions/code-snippet-apple-terminal-clear-light.html`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`code-snippet-apple-terminal-clear-light.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Apple Terminal Clear Light</title>
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        font-family: "SF Mono", Menlo, Monaco, Consolas, "Courier New", monospace;
+      }
+
+      #scene {
+        width: 1920px;
+        height: 1080px;
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
+      }
+
+      .terminal-window {
+        width: 1400px;
+        height: 700px;
+        border-radius: 10px;
+        overflow: hidden;
+        box-shadow:
+          0 30px 80px rgba(0, 0, 0, 0.18),
+          0 10px 30px rgba(0, 0, 0, 0.1);
+        display: flex;
+        flex-direction: column;
+      }
+
+      .titlebar {
+        height: 38px;
+        background: rgba(255, 255, 255, 0.4);
+        display: flex;
+        align-items: center;
+        padding: 0 14px;
+        flex-shrink: 0;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+        position: relative;
+        backdrop-filter: blur(10px);
+      }
+
+      .traffic-lights {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+      }
+
+      .traffic-lights span {
+        width: 13px;
+        height: 13px;
+        border-radius: 50%;
+        display: inline-block;
+      }
+
+      .traffic-lights .close {
+        background: #ff5f57;
+        border: 1px solid #e0443e;
+      }
+
+      .traffic-lights .minimize {
+        background: #ffbd2e;
+        border: 1px solid #dfa123;
+      }
+
+      .traffic-lights .fullscreen {
+        background: #28c840;
+        border: 1px solid #1aab29;
+      }
+
+      .window-title {
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        font-size: 13px;
+        color: #333333;
+        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
+        font-weight: 500;
+        letter-spacing: -0.1px;
+      }
+
+      .terminal-canvas {
+        flex: 1;
+        background: rgba(255, 255, 255, 0.7);
+        padding: 18px 20px;
+        overflow: hidden;
+        font-size: 14px;
+        line-height: 1.6;
+        color: #000000;
+        backdrop-filter: blur(8px);
+      }
+
+      .output-lines {
+        margin-bottom: 4px;
+      }
+
+      .output-line {
+        display: block;
+        white-space: pre;
+        opacity: 0;
+        color: #000000;
+      }
+
+      .output-line.bold {
+        font-weight: bold;
+      }
+
+      .output-line.muted {
+        color: #666666;
+      }
+
+      .input-line {
+        display: flex;
+        align-items: center;
+        white-space: pre;
+      }
 
-It runs for 12 seconds at 1920×1080. Paste this into your composition:
+      .prompt {
+        color: #888888;
+        font-weight: bold;
+        user-select: none;
+      }
 
-```html index.html
+      .typed-command {
+        color: #000000;
+      }
+
+      .cursor-block {
+        display: inline-block;
+        width: 9px;
+        height: 16px;
+        background: #888888;
+        vertical-align: text-bottom;
+        margin-left: 1px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="scene"
+      data-composition-id="code-snippet-apple-terminal-clear-light"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="terminal-window">
+        <div class="titlebar">
+          <div class="traffic-lights">
+            <span class="close"></span>
+            <span class="minimize"></span>
+            <span class="fullscreen"></span>
+          </div>
+          <span class="window-title">bash — 80×24</span>
+        </div>
+        <div class="terminal-canvas">
+          <div class="output-lines">
+            <span class="output-line muted">Last login: Mon Jun 2 09:14:22 on ttys003</span>
+            <span class="output-line bold">git log --oneline -8</span>
+            <span class="output-line">a3f2c19 fix: correct off-by-one in pagination</span>
+            <span class="output-line">b7e8d04 feat: add dark mode toggle</span>
+            <span class="output-line">c1a9f55 refactor: extract auth helpers</span>
+            <span class="output-line">d4e2b31 test: add unit tests for parser</span>
+            <span class="output-line">e6c8a72 docs: update API reference</span>
+            <span class="output-line">f9b1d44 chore: bump dependencies</span>
+            <span class="output-line">2a7e890 feat: implement search endpoint</span>
+            <span class="output-line">3c5f012 init: project bootstrap</span>
+          </div>
+          <div class="input-line">
+            <span class="prompt">user@Mac myproject % </span><span class="typed-command"></span
+            ><span class="cursor-block"></span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      const command = "git log --oneline -8";
+      const typedEl = document.querySelector(".typed-command");
+      const cursorEl = document.querySelector(".cursor-block");
+      const outputLines = document.querySelectorAll(".output-line");
+
+      const tl = gsap.timeline({ paused: true });
+
+      tl.set(typedEl, { text: "" }, 0);
+
+      const charDuration = 1.5 / command.length;
+      command.split("").forEach((char, i) => {
+        tl.add(
+          () => {
+            typedEl.textContent = command.slice(0, i + 1);
+          },
+          0.5 + i * charDuration,
+        );
+      });
+
+      tl.set(cursorEl, { opacity: 0 }, 2.2);
+      tl.set(outputLines[0], { opacity: 1 }, 2.3);
+
+      tl.add(() => {
+        typedEl.textContent = "";
+      }, 2.5);
+
+      outputLines.forEach((line, i) => {
+        if (i === 0) return;
+        tl.set(line, { opacity: 1 }, 2.8 + i * 0.09);
+      });
+
+      tl.add(() => {
+        const inputLine = document.querySelector(".input-line");
+        const newPrompt = document.createElement("div");
+        newPrompt.className = "input-line";
+        newPrompt.innerHTML =
+          '<span class="prompt">user@Mac myproject % </span><span class="typed-command"></span><span class="cursor-block" id="final-cursor"></span>';
+        inputLine.style.display = "none";
+        inputLine.parentNode.appendChild(newPrompt);
+      }, 4.0);
+
+      const blinkTimes = [4.2, 4.6, 5.0, 5.4, 5.8, 6.2];
+      blinkTimes.forEach((t, i) => {
+        tl.add(() => {
+          const fc = document.getElementById("final-cursor");
+          if (fc) fc.style.opacity = i % 2 === 0 ? "0" : "1";
+        }, t);
+      });
+      tl.add(() => {
+        const fc = document.getElementById("final-cursor");
+        if (fc) fc.style.opacity = "1";
+      }, 6.6);
+
+      window.__timelines["code-snippet-apple-terminal-clear-light"] = tl;
+    </script>
+  </body>
+</html>
+```
+
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
 <div
   data-composition-id="code-snippet-apple-terminal-clear-light"
   data-composition-src="compositions/code-snippet-apple-terminal-clear-light.html"
@@ -29,8 +282,14 @@ It runs for 12 seconds at 1920×1080. Paste this into your composition:
 ></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.
+## Features
+
+- Faithful recreation of macOS Terminal.app Clear Light profile — semi-transparent white background with black text
+- macOS window chrome with traffic light buttons and centered title bar
+- Per-character GSAP typing animation — command types out character by character
+- Output lines reveal sequentially after command executes
+- Cursor blinks three times at the end then holds steady
+- Self-contained HTML — no external assets, only GSAP CDN
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-grass.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-grass.mdx
index 235ddc2d24..0f31e47f01 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-grass.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-grass.mdx
@@ -3,21 +3,273 @@ title: "Code Snippet - Apple Terminal Grass"
 description: "Apple Terminal Grass profile: black background with green text, per-character typing animation of a shell session."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-grass.mp4" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/code-snippet-apple-terminal-grass.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Code Snippet - Apple Terminal Grass preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add code-snippet-apple-terminal-grass
-```
+<InstallCommand command="npx hyperframes add code-snippet-apple-terminal-grass" />
 
 That writes one file: `compositions/code-snippet-apple-terminal-grass.html`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`code-snippet-apple-terminal-grass.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Apple Terminal Grass</title>
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000000;
+        font-family: "SF Mono", Menlo, Monaco, Consolas, "Courier New", monospace;
+      }
+
+      #scene {
+        width: 1920px;
+        height: 1080px;
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: radial-gradient(ellipse at center, #0a1a0a 0%, #000000 70%);
+      }
+
+      .terminal-window {
+        width: 1400px;
+        height: 700px;
+        border-radius: 10px;
+        overflow: hidden;
+        box-shadow:
+          0 30px 80px rgba(0, 193, 0, 0.15),
+          0 10px 30px rgba(0, 0, 0, 0.8);
+        display: flex;
+        flex-direction: column;
+      }
+
+      .titlebar {
+        height: 38px;
+        background: #1c1c1c;
+        display: flex;
+        align-items: center;
+        padding: 0 14px;
+        flex-shrink: 0;
+        border-bottom: 1px solid #00c100;
+        position: relative;
+      }
+
+      .traffic-lights {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+      }
+
+      .traffic-lights span {
+        width: 13px;
+        height: 13px;
+        border-radius: 50%;
+        display: inline-block;
+      }
+
+      .traffic-lights .close {
+        background: #ff5f57;
+        border: 1px solid #e0443e;
+      }
+
+      .traffic-lights .minimize {
+        background: #ffbd2e;
+        border: 1px solid #dfa123;
+      }
+
+      .traffic-lights .fullscreen {
+        background: #28c840;
+        border: 1px solid #1aab29;
+      }
+
+      .window-title {
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        font-size: 13px;
+        color: #00c100;
+        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
+        font-weight: 500;
+        letter-spacing: -0.1px;
+      }
+
+      .terminal-canvas {
+        flex: 1;
+        background: #000000;
+        padding: 18px 20px;
+        overflow: hidden;
+        font-size: 14px;
+        line-height: 1.6;
+        color: #00c100;
+      }
+
+      .output-lines {
+        margin-bottom: 4px;
+      }
+
+      .output-line {
+        display: block;
+        white-space: pre;
+        opacity: 0;
+        color: #00c100;
+      }
+
+      .output-line.bold {
+        font-weight: bold;
+        color: #00c100;
+      }
+
+      .output-line.dim {
+        color: #006600;
+      }
+
+      .input-line {
+        display: flex;
+        align-items: center;
+        white-space: pre;
+      }
 
-It runs for 12 seconds at 1920×1080. Paste this into your composition:
+      .prompt {
+        color: #00c100;
+        font-weight: bold;
+        user-select: none;
+      }
 
-```html index.html
+      .typed-command {
+        color: #00c100;
+      }
+
+      .cursor-block {
+        display: inline-block;
+        width: 9px;
+        height: 16px;
+        background: #00c100;
+        vertical-align: text-bottom;
+        margin-left: 1px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="scene"
+      data-composition-id="code-snippet-apple-terminal-grass"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="terminal-window">
+        <div class="titlebar">
+          <div class="traffic-lights">
+            <span class="close"></span>
+            <span class="minimize"></span>
+            <span class="fullscreen"></span>
+          </div>
+          <span class="window-title">bash — 80×24</span>
+        </div>
+        <div class="terminal-canvas">
+          <div class="output-lines">
+            <span class="output-line dim">Last login: Mon Jun 2 09:14:22 on ttys004</span>
+            <span class="output-line">Running test suite...</span>
+            <span class="output-line dim"> ✓ should initialize with defaults (2ms)</span>
+            <span class="output-line dim"> ✓ should parse config correctly (4ms)</span>
+            <span class="output-line dim"> ✓ should handle empty input (1ms)</span>
+            <span class="output-line dim"> ✓ should reject invalid tokens (3ms)</span>
+            <span class="output-line dim"> ✓ should emit events on change (5ms)</span>
+            <span class="output-line dim"> ✓ should clean up on destroy (2ms)</span>
+            <span class="output-line bold"> 6 passing (18ms)</span>
+          </div>
+          <div class="input-line">
+            <span class="prompt">user@Mac ~ % </span><span class="typed-command"></span
+            ><span class="cursor-block"></span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      const command = "npm test";
+      const typedEl = document.querySelector(".typed-command");
+      const cursorEl = document.querySelector(".cursor-block");
+      const outputLines = document.querySelectorAll(".output-line");
+
+      const tl = gsap.timeline({ paused: true });
+
+      tl.set(typedEl, { text: "" }, 0);
+
+      const charDuration = 1.5 / command.length;
+      command.split("").forEach((char, i) => {
+        tl.add(
+          () => {
+            typedEl.textContent = command.slice(0, i + 1);
+          },
+          0.5 + i * charDuration,
+        );
+      });
+
+      tl.set(cursorEl, { opacity: 0 }, 2.2);
+      tl.set(outputLines[0], { opacity: 1 }, 2.3);
+
+      tl.add(() => {
+        typedEl.textContent = "";
+      }, 2.5);
+
+      outputLines.forEach((line, i) => {
+        if (i === 0) return;
+        tl.set(line, { opacity: 1 }, 2.8 + i * 0.12);
+      });
+
+      tl.add(() => {
+        const inputLine = document.querySelector(".input-line");
+        const newPrompt = document.createElement("div");
+        newPrompt.className = "input-line";
+        newPrompt.innerHTML =
+          '<span class="prompt">user@Mac ~ % </span><span class="typed-command"></span><span class="cursor-block" id="final-cursor"></span>';
+        inputLine.style.display = "none";
+        inputLine.parentNode.appendChild(newPrompt);
+      }, 4.0);
+
+      const blinkTimes = [4.2, 4.6, 5.0, 5.4, 5.8, 6.2];
+      blinkTimes.forEach((t, i) => {
+        tl.add(() => {
+          const fc = document.getElementById("final-cursor");
+          if (fc) fc.style.opacity = i % 2 === 0 ? "0" : "1";
+        }, t);
+      });
+      tl.add(() => {
+        const fc = document.getElementById("final-cursor");
+        if (fc) fc.style.opacity = "1";
+      }, 6.6);
+
+      window.__timelines["code-snippet-apple-terminal-grass"] = tl;
+    </script>
+  </body>
+</html>
+```
+
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
 <div
   data-composition-id="code-snippet-apple-terminal-grass"
   data-composition-src="compositions/code-snippet-apple-terminal-grass.html"
@@ -29,8 +281,14 @@ It runs for 12 seconds at 1920×1080. Paste this into your composition:
 ></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.
+## Features
+
+- Faithful recreation of macOS Terminal.app Grass profile — black background with #00C100 green text
+- macOS window chrome with green-accented title bar and traffic light buttons
+- Per-character GSAP typing animation — command types out character by character
+- Output lines reveal sequentially after command executes
+- Cursor blinks three times at the end then holds steady
+- Self-contained HTML — no external assets, only GSAP CDN
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-homebrew.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-homebrew.mdx
index 0e18f07ba1..5599ed2c3b 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-homebrew.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-homebrew.mdx
@@ -3,21 +3,278 @@ title: "Code Snippet - Apple Terminal Homebrew"
 description: "Apple Terminal Homebrew profile: black background with bright green text and lime cursor, per-character typing animation of a shell session."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-homebrew.mp4" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/code-snippet-apple-terminal-homebrew.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Code Snippet - Apple Terminal Homebrew preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add code-snippet-apple-terminal-homebrew
-```
+<InstallCommand command="npx hyperframes add code-snippet-apple-terminal-homebrew" />
 
 That writes one file: `compositions/code-snippet-apple-terminal-homebrew.html`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`code-snippet-apple-terminal-homebrew.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Apple Terminal Homebrew</title>
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000000;
+        font-family: "SF Mono", Menlo, Monaco, Consolas, "Courier New", monospace;
+      }
+
+      #scene {
+        width: 1920px;
+        height: 1080px;
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: radial-gradient(ellipse at center, #0d1a0d 0%, #000000 70%);
+      }
+
+      .terminal-window {
+        width: 1400px;
+        height: 700px;
+        border-radius: 10px;
+        overflow: hidden;
+        box-shadow:
+          0 30px 80px rgba(0, 207, 0, 0.18),
+          0 10px 30px rgba(0, 0, 0, 0.85);
+        display: flex;
+        flex-direction: column;
+      }
+
+      .titlebar {
+        height: 38px;
+        background: #1c1c1c;
+        display: flex;
+        align-items: center;
+        padding: 0 14px;
+        flex-shrink: 0;
+        border-bottom: 1px solid #006900;
+        position: relative;
+      }
+
+      .traffic-lights {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+      }
+
+      .traffic-lights span {
+        width: 13px;
+        height: 13px;
+        border-radius: 50%;
+        display: inline-block;
+      }
+
+      .traffic-lights .close {
+        background: #ff5f57;
+        border: 1px solid #e0443e;
+      }
+
+      .traffic-lights .minimize {
+        background: #ffbd2e;
+        border: 1px solid #dfa123;
+      }
+
+      .traffic-lights .fullscreen {
+        background: #28c840;
+        border: 1px solid #1aab29;
+      }
+
+      .window-title {
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        font-size: 13px;
+        color: #00cf00;
+        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
+        font-weight: 500;
+        letter-spacing: -0.1px;
+      }
+
+      .terminal-canvas {
+        flex: 1;
+        background: #000000;
+        padding: 18px 20px;
+        overflow: hidden;
+        font-size: 14px;
+        line-height: 1.6;
+        color: #00cf00;
+      }
+
+      .output-lines {
+        margin-bottom: 4px;
+      }
+
+      .output-line {
+        display: block;
+        white-space: pre;
+        opacity: 0;
+        color: #00cf00;
+      }
+
+      .output-line.bold {
+        font-weight: bold;
+        color: #00de00;
+      }
+
+      .output-line.dim {
+        color: #006600;
+      }
+
+      .output-line.bright {
+        color: #48f800;
+        font-weight: bold;
+      }
 
-It runs for 12 seconds at 1920×1080. Paste this into your composition:
+      .input-line {
+        display: flex;
+        align-items: center;
+        white-space: pre;
+      }
 
-```html index.html
+      .prompt {
+        color: #48f800;
+        font-weight: bold;
+        user-select: none;
+      }
+
+      .typed-command {
+        color: #00cf00;
+      }
+
+      .cursor-block {
+        display: inline-block;
+        width: 9px;
+        height: 16px;
+        background: #48f800;
+        vertical-align: text-bottom;
+        margin-left: 1px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="scene"
+      data-composition-id="code-snippet-apple-terminal-homebrew"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="terminal-window">
+        <div class="titlebar">
+          <div class="traffic-lights">
+            <span class="close"></span>
+            <span class="minimize"></span>
+            <span class="fullscreen"></span>
+          </div>
+          <span class="window-title">bash — 80×24</span>
+        </div>
+        <div class="terminal-canvas">
+          <div class="output-lines">
+            <span class="output-line dim">Last login: Mon Jun 2 09:14:22 on ttys005</span>
+            <span class="output-line">==> Updating Homebrew...</span>
+            <span class="output-line dim">Already up-to-date.</span>
+            <span class="output-line">==> Outdated formulae</span>
+            <span class="output-line">node 20.11.0 -> 22.3.0</span>
+            <span class="output-line">python 3.11.6 -> 3.12.4</span>
+            <span class="output-line">git 2.43.0 -> 2.45.2</span>
+            <span class="output-line">ffmpeg 6.1.1 -> 7.0.0</span>
+            <span class="output-line bright">==> Run `brew upgrade` to update 4 formulae.</span>
+          </div>
+          <div class="input-line">
+            <span class="prompt">user@Mac ~ % </span><span class="typed-command"></span
+            ><span class="cursor-block"></span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      const command = "brew outdated";
+      const typedEl = document.querySelector(".typed-command");
+      const cursorEl = document.querySelector(".cursor-block");
+      const outputLines = document.querySelectorAll(".output-line");
+
+      const tl = gsap.timeline({ paused: true });
+
+      tl.set(typedEl, { text: "" }, 0);
+
+      const charDuration = 1.5 / command.length;
+      command.split("").forEach((char, i) => {
+        tl.add(
+          () => {
+            typedEl.textContent = command.slice(0, i + 1);
+          },
+          0.5 + i * charDuration,
+        );
+      });
+
+      tl.set(cursorEl, { opacity: 0 }, 2.2);
+      tl.set(outputLines[0], { opacity: 1 }, 2.3);
+
+      tl.add(() => {
+        typedEl.textContent = "";
+      }, 2.5);
+
+      outputLines.forEach((line, i) => {
+        if (i === 0) return;
+        tl.set(line, { opacity: 1 }, 2.8 + i * 0.1);
+      });
+
+      tl.add(() => {
+        const inputLine = document.querySelector(".input-line");
+        const newPrompt = document.createElement("div");
+        newPrompt.className = "input-line";
+        newPrompt.innerHTML =
+          '<span class="prompt">user@Mac ~ % </span><span class="typed-command"></span><span class="cursor-block" id="final-cursor"></span>';
+        inputLine.style.display = "none";
+        inputLine.parentNode.appendChild(newPrompt);
+      }, 4.2);
+
+      const blinkTimes = [4.4, 4.8, 5.2, 5.6, 6.0, 6.4];
+      blinkTimes.forEach((t, i) => {
+        tl.add(() => {
+          const fc = document.getElementById("final-cursor");
+          if (fc) fc.style.opacity = i % 2 === 0 ? "0" : "1";
+        }, t);
+      });
+      tl.add(() => {
+        const fc = document.getElementById("final-cursor");
+        if (fc) fc.style.opacity = "1";
+      }, 6.8);
+
+      window.__timelines["code-snippet-apple-terminal-homebrew"] = tl;
+    </script>
+  </body>
+</html>
+```
+
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
 <div
   data-composition-id="code-snippet-apple-terminal-homebrew"
   data-composition-src="compositions/code-snippet-apple-terminal-homebrew.html"
@@ -29,8 +286,14 @@ It runs for 12 seconds at 1920×1080. Paste this into your composition:
 ></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.
+## Features
+
+- Faithful recreation of macOS Terminal.app Homebrew profile — black background with #00CF00 text and #48F800 cursor
+- macOS window chrome with traffic light buttons and centered title bar
+- Per-character GSAP typing animation — command types out character by character
+- Output lines reveal sequentially after command executes
+- Cursor blinks three times at the end then holds steady
+- Self-contained HTML — no external assets, only GSAP CDN
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-man-page.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-man-page.mdx
index 0afc74ee28..ad3adff040 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-man-page.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-man-page.mdx
@@ -3,21 +3,278 @@ title: "Code Snippet - Apple Terminal Man Page"
 description: "Apple Terminal Man Page profile: pale yellow background with black text, per-character typing animation of a shell session."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-man-page.mp4" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/code-snippet-apple-terminal-man-page.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Code Snippet - Apple Terminal Man Page preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add code-snippet-apple-terminal-man-page
-```
+<InstallCommand command="npx hyperframes add code-snippet-apple-terminal-man-page" />
 
 That writes one file: `compositions/code-snippet-apple-terminal-man-page.html`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`code-snippet-apple-terminal-man-page.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Apple Terminal Man Page</title>
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        font-family: "SF Mono", Menlo, Monaco, Consolas, "Courier New", monospace;
+      }
+
+      #scene {
+        width: 1920px;
+        height: 1080px;
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: linear-gradient(135deg, #ede87a 0%, #ddd566 100%);
+      }
+
+      .terminal-window {
+        width: 1400px;
+        height: 700px;
+        border-radius: 10px;
+        overflow: hidden;
+        box-shadow:
+          0 30px 80px rgba(0, 0, 0, 0.2),
+          0 10px 30px rgba(0, 0, 0, 0.12);
+        display: flex;
+        flex-direction: column;
+      }
+
+      .titlebar {
+        height: 38px;
+        background: #f0e680;
+        display: flex;
+        align-items: center;
+        padding: 0 14px;
+        flex-shrink: 0;
+        border-bottom: 1px solid #c8be40;
+        position: relative;
+      }
+
+      .traffic-lights {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+      }
+
+      .traffic-lights span {
+        width: 13px;
+        height: 13px;
+        border-radius: 50%;
+        display: inline-block;
+      }
+
+      .traffic-lights .close {
+        background: #ff5f57;
+        border: 1px solid #e0443e;
+      }
+
+      .traffic-lights .minimize {
+        background: #ffbd2e;
+        border: 1px solid #dfa123;
+      }
+
+      .traffic-lights .fullscreen {
+        background: #28c840;
+        border: 1px solid #1aab29;
+      }
+
+      .window-title {
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        font-size: 13px;
+        color: #333333;
+        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
+        font-weight: 500;
+        letter-spacing: -0.1px;
+      }
+
+      .terminal-canvas {
+        flex: 1;
+        background: #fef49c;
+        padding: 18px 20px;
+        overflow: hidden;
+        font-size: 14px;
+        line-height: 1.6;
+        color: #000000;
+      }
+
+      .output-lines {
+        margin-bottom: 4px;
+      }
+
+      .output-line {
+        display: block;
+        white-space: pre;
+        opacity: 0;
+        color: #000000;
+      }
+
+      .output-line.bold {
+        font-weight: bold;
+      }
+
+      .output-line.indent {
+        padding-left: 24px;
+        color: #222222;
+      }
+
+      .output-line.section {
+        font-weight: bold;
+        margin-top: 2px;
+      }
 
-It runs for 12 seconds at 1920×1080. Paste this into your composition:
+      .input-line {
+        display: flex;
+        align-items: center;
+        white-space: pre;
+      }
 
-```html index.html
+      .prompt {
+        color: #000000;
+        font-weight: bold;
+        user-select: none;
+      }
+
+      .typed-command {
+        color: #000000;
+      }
+
+      .cursor-block {
+        display: inline-block;
+        width: 9px;
+        height: 16px;
+        background: #000000;
+        vertical-align: text-bottom;
+        margin-left: 1px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="scene"
+      data-composition-id="code-snippet-apple-terminal-man-page"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="terminal-window">
+        <div class="titlebar">
+          <div class="traffic-lights">
+            <span class="close"></span>
+            <span class="minimize"></span>
+            <span class="fullscreen"></span>
+          </div>
+          <span class="window-title">man — 80×24</span>
+        </div>
+        <div class="terminal-canvas">
+          <div class="output-lines">
+            <span class="output-line section">CURL(1) General Commands Manual CURL(1)</span>
+            <span class="output-line"></span>
+            <span class="output-line section">NAME</span>
+            <span class="output-line indent">curl -- transfer a URL</span>
+            <span class="output-line"></span>
+            <span class="output-line section">SYNOPSIS</span>
+            <span class="output-line indent">curl [options / URLs]</span>
+            <span class="output-line"></span>
+            <span class="output-line section">DESCRIPTION</span>
+            <span class="output-line indent"
+              >curl is a tool for transferring data from or to a server using URLs.</span
+            >
+          </div>
+          <div class="input-line">
+            <span class="prompt">user@Mac ~ % </span><span class="typed-command"></span
+            ><span class="cursor-block"></span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      const command = "man curl";
+      const typedEl = document.querySelector(".typed-command");
+      const cursorEl = document.querySelector(".cursor-block");
+      const outputLines = document.querySelectorAll(".output-line");
+
+      const tl = gsap.timeline({ paused: true });
+
+      tl.set(typedEl, { text: "" }, 0);
+
+      const charDuration = 1.5 / command.length;
+      command.split("").forEach((char, i) => {
+        tl.add(
+          () => {
+            typedEl.textContent = command.slice(0, i + 1);
+          },
+          0.5 + i * charDuration,
+        );
+      });
+
+      tl.set(cursorEl, { opacity: 0 }, 2.2);
+
+      tl.add(() => {
+        typedEl.textContent = "";
+      }, 2.4);
+
+      outputLines.forEach((line, i) => {
+        tl.set(line, { opacity: 1 }, 2.5 + i * 0.1);
+      });
+
+      tl.add(() => {
+        const inputLine = document.querySelector(".input-line");
+        const newPrompt = document.createElement("div");
+        newPrompt.className = "input-line";
+        newPrompt.innerHTML =
+          '<span class="prompt">user@Mac ~ % </span><span class="typed-command"></span><span class="cursor-block" id="final-cursor"></span>';
+        inputLine.style.display = "none";
+        inputLine.parentNode.appendChild(newPrompt);
+      }, 4.0);
+
+      const blinkTimes = [4.2, 4.6, 5.0, 5.4, 5.8, 6.2];
+      blinkTimes.forEach((t, i) => {
+        tl.add(() => {
+          const fc = document.getElementById("final-cursor");
+          if (fc) fc.style.opacity = i % 2 === 0 ? "0" : "1";
+        }, t);
+      });
+      tl.add(() => {
+        const fc = document.getElementById("final-cursor");
+        if (fc) fc.style.opacity = "1";
+      }, 6.6);
+
+      window.__timelines["code-snippet-apple-terminal-man-page"] = tl;
+    </script>
+  </body>
+</html>
+```
+
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
 <div
   data-composition-id="code-snippet-apple-terminal-man-page"
   data-composition-src="compositions/code-snippet-apple-terminal-man-page.html"
@@ -29,8 +286,14 @@ It runs for 12 seconds at 1920×1080. Paste this into your composition:
 ></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.
+## Features
+
+- Faithful recreation of macOS Terminal.app Man Page profile — pale yellow background with black text
+- Shows a realistic man page output structure with sections and indented content
+- macOS window chrome with traffic light buttons and centered title bar
+- Per-character GSAP typing animation — command types out character by character
+- Output lines reveal sequentially after command executes
+- Self-contained HTML — no external assets, only GSAP CDN
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-novel.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-novel.mdx
index 80b6272e37..7fafe512ef 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-novel.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-novel.mdx
@@ -3,21 +3,274 @@ title: "Code Snippet - Apple Terminal Novel"
 description: "Apple Terminal Novel profile: warm parchment background with dark brown text, per-character typing animation of a shell session."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-novel.mp4" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/code-snippet-apple-terminal-novel.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Code Snippet - Apple Terminal Novel preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add code-snippet-apple-terminal-novel
-```
+<InstallCommand command="npx hyperframes add code-snippet-apple-terminal-novel" />
 
 That writes one file: `compositions/code-snippet-apple-terminal-novel.html`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`code-snippet-apple-terminal-novel.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Apple Terminal Novel</title>
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        font-family: "SF Mono", Menlo, Monaco, Consolas, "Courier New", monospace;
+      }
+
+      #scene {
+        width: 1920px;
+        height: 1080px;
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: linear-gradient(135deg, #c9a86c 0%, #b8955a 100%);
+      }
+
+      .terminal-window {
+        width: 1400px;
+        height: 700px;
+        border-radius: 10px;
+        overflow: hidden;
+        box-shadow:
+          0 30px 80px rgba(62, 41, 0, 0.3),
+          0 10px 30px rgba(0, 0, 0, 0.15);
+        display: flex;
+        flex-direction: column;
+      }
+
+      .titlebar {
+        height: 38px;
+        background: #c9a86c;
+        display: flex;
+        align-items: center;
+        padding: 0 14px;
+        flex-shrink: 0;
+        border-bottom: 1px solid #a88040;
+        position: relative;
+      }
+
+      .traffic-lights {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+      }
+
+      .traffic-lights span {
+        width: 13px;
+        height: 13px;
+        border-radius: 50%;
+        display: inline-block;
+      }
+
+      .traffic-lights .close {
+        background: #ff5f57;
+        border: 1px solid #e0443e;
+      }
+
+      .traffic-lights .minimize {
+        background: #ffbd2e;
+        border: 1px solid #dfa123;
+      }
+
+      .traffic-lights .fullscreen {
+        background: #28c840;
+        border: 1px solid #1aab29;
+      }
+
+      .window-title {
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        font-size: 13px;
+        color: #3e2900;
+        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
+        font-weight: 600;
+        letter-spacing: -0.1px;
+      }
+
+      .terminal-canvas {
+        flex: 1;
+        background: #dfc18a;
+        padding: 18px 20px;
+        overflow: hidden;
+        font-size: 14px;
+        line-height: 1.6;
+        color: #3e2900;
+      }
+
+      .output-lines {
+        margin-bottom: 4px;
+      }
+
+      .output-line {
+        display: block;
+        white-space: pre;
+        opacity: 0;
+        color: #3e2900;
+      }
+
+      .output-line.bold {
+        font-weight: bold;
+        color: #3e2900;
+      }
+
+      .output-line.muted {
+        color: #7a5a20;
+      }
+
+      .input-line {
+        display: flex;
+        align-items: center;
+        white-space: pre;
+      }
 
-It runs for 12 seconds at 1920×1080. Paste this into your composition:
+      .prompt {
+        color: #3e2900;
+        font-weight: bold;
+        user-select: none;
+      }
 
-```html index.html
+      .typed-command {
+        color: #3e2900;
+      }
+
+      .cursor-block {
+        display: inline-block;
+        width: 9px;
+        height: 16px;
+        background: #3e2900;
+        vertical-align: text-bottom;
+        margin-left: 1px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="scene"
+      data-composition-id="code-snippet-apple-terminal-novel"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="terminal-window">
+        <div class="titlebar">
+          <div class="traffic-lights">
+            <span class="close"></span>
+            <span class="minimize"></span>
+            <span class="fullscreen"></span>
+          </div>
+          <span class="window-title">bash — 80×24</span>
+        </div>
+        <div class="terminal-canvas">
+          <div class="output-lines">
+            <span class="output-line muted">Last login: Mon Jun 2 09:14:22 on ttys006</span>
+            <span class="output-line muted">Python 3.12.4 (main, Jun 6 2024, 18:26:44)</span>
+            <span class="output-line muted"
+              >Type "help", "copyright", "credits" or "license" for more information.</span
+            >
+            <span class="output-line bold">>>> import hyperframes</span>
+            <span class="output-line bold">>>> hf = hyperframes.Composition("intro.html")</span>
+            <span class="output-line">>>> hf.duration</span>
+            <span class="output-line">12.0</span>
+            <span class="output-line">>>> hf.dimensions</span>
+            <span class="output-line">Dimensions(width=1920, height=1080)</span>
+          </div>
+          <div class="input-line">
+            <span class="prompt">user@Mac ~ % </span><span class="typed-command"></span
+            ><span class="cursor-block"></span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      const command = "python3";
+      const typedEl = document.querySelector(".typed-command");
+      const cursorEl = document.querySelector(".cursor-block");
+      const outputLines = document.querySelectorAll(".output-line");
+
+      const tl = gsap.timeline({ paused: true });
+
+      tl.set(typedEl, { text: "" }, 0);
+
+      const charDuration = 1.5 / command.length;
+      command.split("").forEach((char, i) => {
+        tl.add(
+          () => {
+            typedEl.textContent = command.slice(0, i + 1);
+          },
+          0.5 + i * charDuration,
+        );
+      });
+
+      tl.set(cursorEl, { opacity: 0 }, 2.2);
+      tl.set(outputLines[0], { opacity: 1 }, 2.3);
+
+      tl.add(() => {
+        typedEl.textContent = "";
+      }, 2.5);
+
+      outputLines.forEach((line, i) => {
+        if (i === 0) return;
+        tl.set(line, { opacity: 1 }, 2.8 + i * 0.1);
+      });
+
+      tl.add(() => {
+        const inputLine = document.querySelector(".input-line");
+        const newPrompt = document.createElement("div");
+        newPrompt.className = "input-line";
+        newPrompt.innerHTML =
+          '<span class="prompt">user@Mac ~ % </span><span class="typed-command"></span><span class="cursor-block" id="final-cursor"></span>';
+        inputLine.style.display = "none";
+        inputLine.parentNode.appendChild(newPrompt);
+      }, 4.2);
+
+      const blinkTimes = [4.4, 4.8, 5.2, 5.6, 6.0, 6.4];
+      blinkTimes.forEach((t, i) => {
+        tl.add(() => {
+          const fc = document.getElementById("final-cursor");
+          if (fc) fc.style.opacity = i % 2 === 0 ? "0" : "1";
+        }, t);
+      });
+      tl.add(() => {
+        const fc = document.getElementById("final-cursor");
+        if (fc) fc.style.opacity = "1";
+      }, 6.8);
+
+      window.__timelines["code-snippet-apple-terminal-novel"] = tl;
+    </script>
+  </body>
+</html>
+```
+
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
 <div
   data-composition-id="code-snippet-apple-terminal-novel"
   data-composition-src="compositions/code-snippet-apple-terminal-novel.html"
@@ -29,8 +282,14 @@ It runs for 12 seconds at 1920×1080. Paste this into your composition:
 ></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.
+## Features
+
+- Faithful recreation of macOS Terminal.app Novel profile — warm parchment background with #3E2900 dark brown text
+- macOS window chrome with traffic light buttons and centered title bar
+- Per-character GSAP typing animation — command types out character by character
+- Output lines reveal sequentially after command executes
+- Cursor blinks three times at the end then holds steady
+- Self-contained HTML — no external assets, only GSAP CDN
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-ocean.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-ocean.mdx
index 8c0a0d345a..a4ec3b5294 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-ocean.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-ocean.mdx
@@ -3,21 +3,283 @@ title: "Code Snippet - Apple Terminal Ocean"
 description: "Apple Terminal Ocean profile: deep blue background with white text, per-character typing animation of a shell session."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-ocean.mp4" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/code-snippet-apple-terminal-ocean.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Code Snippet - Apple Terminal Ocean preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add code-snippet-apple-terminal-ocean
-```
+<InstallCommand command="npx hyperframes add code-snippet-apple-terminal-ocean" />
 
 That writes one file: `compositions/code-snippet-apple-terminal-ocean.html`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`code-snippet-apple-terminal-ocean.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Apple Terminal Ocean</title>
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #1a3f9e;
+        font-family: "SF Mono", Menlo, Monaco, Consolas, "Courier New", monospace;
+      }
+
+      #scene {
+        width: 1920px;
+        height: 1080px;
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: radial-gradient(ellipse at center, #224fbe 0%, #0e2878 100%);
+      }
+
+      .terminal-window {
+        width: 1400px;
+        height: 700px;
+        border-radius: 10px;
+        overflow: hidden;
+        box-shadow:
+          0 30px 80px rgba(0, 0, 0, 0.6),
+          0 10px 30px rgba(34, 79, 190, 0.3);
+        display: flex;
+        flex-direction: column;
+      }
+
+      .titlebar {
+        height: 38px;
+        background: #1a3f9e;
+        display: flex;
+        align-items: center;
+        padding: 0 14px;
+        flex-shrink: 0;
+        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
+        position: relative;
+      }
+
+      .traffic-lights {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+      }
+
+      .traffic-lights span {
+        width: 13px;
+        height: 13px;
+        border-radius: 50%;
+        display: inline-block;
+      }
+
+      .traffic-lights .close {
+        background: #ff5f57;
+        border: 1px solid #e0443e;
+      }
+
+      .traffic-lights .minimize {
+        background: #ffbd2e;
+        border: 1px solid #dfa123;
+      }
+
+      .traffic-lights .fullscreen {
+        background: #28c840;
+        border: 1px solid #1aab29;
+      }
+
+      .window-title {
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        font-size: 13px;
+        color: #ffffff;
+        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
+        font-weight: 500;
+        letter-spacing: -0.1px;
+      }
+
+      .terminal-canvas {
+        flex: 1;
+        background: #224fbe;
+        padding: 18px 20px;
+        overflow: hidden;
+        font-size: 14px;
+        line-height: 1.6;
+        color: #ffffff;
+      }
+
+      .output-lines {
+        margin-bottom: 4px;
+      }
+
+      .output-line {
+        display: block;
+        white-space: pre;
+        opacity: 0;
+        color: #ffffff;
+      }
+
+      .output-line.bold {
+        font-weight: bold;
+        color: #ffffff;
+      }
+
+      .output-line.dim {
+        color: rgba(255, 255, 255, 0.65);
+      }
+
+      .output-line.success {
+        color: #7fffb3;
+        font-weight: bold;
+      }
 
-It runs for 12 seconds at 1920×1080. Paste this into your composition:
+      .input-line {
+        display: flex;
+        align-items: center;
+        white-space: pre;
+      }
 
-```html index.html
+      .prompt {
+        color: rgba(255, 255, 255, 0.8);
+        font-weight: bold;
+        user-select: none;
+      }
+
+      .typed-command {
+        color: #ffffff;
+      }
+
+      .cursor-block {
+        display: inline-block;
+        width: 9px;
+        height: 16px;
+        background: #ffffff;
+        vertical-align: text-bottom;
+        margin-left: 1px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="scene"
+      data-composition-id="code-snippet-apple-terminal-ocean"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="terminal-window">
+        <div class="titlebar">
+          <div class="traffic-lights">
+            <span class="close"></span>
+            <span class="minimize"></span>
+            <span class="fullscreen"></span>
+          </div>
+          <span class="window-title">bash — 80×24</span>
+        </div>
+        <div class="terminal-canvas">
+          <div class="output-lines">
+            <span class="output-line dim">Last login: Mon Jun 2 09:14:22 on ttys007</span>
+            <span class="output-line bold">docker ps</span>
+            <span class="output-line dim">CONTAINER ID IMAGE COMMAND CREATED</span>
+            <span class="output-line"
+              >a1b2c3d4e5f6 nginx:latest "/docker-entrypoint.…" 2 hours ago</span
+            >
+            <span class="output-line"
+              >b2c3d4e5f6a7 postgres:15 "docker-entrypoint.s…" 2 hours ago</span
+            >
+            <span class="output-line"
+              >c3d4e5f6a7b8 redis:alpine "docker-entrypoint.s…" 2 hours ago</span
+            >
+            <span class="output-line success">3 containers running</span>
+            <span class="output-line dim">Use 'docker logs CONTAINER' to view output</span>
+          </div>
+          <div class="input-line">
+            <span class="prompt">user@Mac ~ % </span><span class="typed-command"></span
+            ><span class="cursor-block"></span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      const command = "docker ps";
+      const typedEl = document.querySelector(".typed-command");
+      const cursorEl = document.querySelector(".cursor-block");
+      const outputLines = document.querySelectorAll(".output-line");
+
+      const tl = gsap.timeline({ paused: true });
+
+      tl.set(typedEl, { text: "" }, 0);
+
+      const charDuration = 1.5 / command.length;
+      command.split("").forEach((char, i) => {
+        tl.add(
+          () => {
+            typedEl.textContent = command.slice(0, i + 1);
+          },
+          0.5 + i * charDuration,
+        );
+      });
+
+      tl.set(cursorEl, { opacity: 0 }, 2.2);
+      tl.set(outputLines[0], { opacity: 1 }, 2.3);
+
+      tl.add(() => {
+        typedEl.textContent = "";
+      }, 2.5);
+
+      outputLines.forEach((line, i) => {
+        if (i === 0) return;
+        tl.set(line, { opacity: 1 }, 2.8 + i * 0.1);
+      });
+
+      tl.add(() => {
+        const inputLine = document.querySelector(".input-line");
+        const newPrompt = document.createElement("div");
+        newPrompt.className = "input-line";
+        newPrompt.innerHTML =
+          '<span class="prompt">user@Mac ~ % </span><span class="typed-command"></span><span class="cursor-block" id="final-cursor"></span>';
+        inputLine.style.display = "none";
+        inputLine.parentNode.appendChild(newPrompt);
+      }, 4.2);
+
+      const blinkTimes = [4.4, 4.8, 5.2, 5.6, 6.0, 6.4];
+      blinkTimes.forEach((t, i) => {
+        tl.add(() => {
+          const fc = document.getElementById("final-cursor");
+          if (fc) fc.style.opacity = i % 2 === 0 ? "0" : "1";
+        }, t);
+      });
+      tl.add(() => {
+        const fc = document.getElementById("final-cursor");
+        if (fc) fc.style.opacity = "1";
+      }, 6.8);
+
+      window.__timelines["code-snippet-apple-terminal-ocean"] = tl;
+    </script>
+  </body>
+</html>
+```
+
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
 <div
   data-composition-id="code-snippet-apple-terminal-ocean"
   data-composition-src="compositions/code-snippet-apple-terminal-ocean.html"
@@ -29,8 +291,14 @@ It runs for 12 seconds at 1920×1080. Paste this into your composition:
 ></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.
+## Features
+
+- Faithful recreation of macOS Terminal.app Ocean profile — #224FBE blue background with white text
+- macOS window chrome with traffic light buttons and centered title bar
+- Per-character GSAP typing animation — command types out character by character
+- Output lines reveal sequentially after command executes
+- Cursor blinks three times at the end then holds steady
+- Self-contained HTML — no external assets, only GSAP CDN
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-pro.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-pro.mdx
index 8868cfe93e..14cdaafef2 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-pro.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-pro.mdx
@@ -3,21 +3,277 @@ title: "Code Snippet - Apple Terminal Pro"
 description: "Apple Terminal Pro profile: black background with grey text and lime green cursor, per-character typing animation of a shell session."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-pro.mp4" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/code-snippet-apple-terminal-pro.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Code Snippet - Apple Terminal Pro preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add code-snippet-apple-terminal-pro
-```
+<InstallCommand command="npx hyperframes add code-snippet-apple-terminal-pro" />
 
 That writes one file: `compositions/code-snippet-apple-terminal-pro.html`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`code-snippet-apple-terminal-pro.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Apple Terminal Pro</title>
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000000;
+        font-family: "SF Mono", Menlo, Monaco, Consolas, "Courier New", monospace;
+      }
+
+      #scene {
+        width: 1920px;
+        height: 1080px;
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: radial-gradient(ellipse at center, #141414 0%, #000000 70%);
+      }
+
+      .terminal-window {
+        width: 1400px;
+        height: 700px;
+        border-radius: 10px;
+        overflow: hidden;
+        box-shadow:
+          0 30px 80px rgba(136, 255, 103, 0.08),
+          0 10px 30px rgba(0, 0, 0, 0.9);
+        display: flex;
+        flex-direction: column;
+      }
+
+      .titlebar {
+        height: 38px;
+        background: #1c1c1c;
+        display: flex;
+        align-items: center;
+        padding: 0 14px;
+        flex-shrink: 0;
+        border-bottom: 1px solid #333333;
+        position: relative;
+      }
+
+      .traffic-lights {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+      }
+
+      .traffic-lights span {
+        width: 13px;
+        height: 13px;
+        border-radius: 50%;
+        display: inline-block;
+      }
+
+      .traffic-lights .close {
+        background: #ff5f57;
+        border: 1px solid #e0443e;
+      }
+
+      .traffic-lights .minimize {
+        background: #ffbd2e;
+        border: 1px solid #dfa123;
+      }
+
+      .traffic-lights .fullscreen {
+        background: #28c840;
+        border: 1px solid #1aab29;
+      }
+
+      .window-title {
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        font-size: 13px;
+        color: #bbbbbb;
+        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
+        font-weight: 500;
+        letter-spacing: -0.1px;
+      }
+
+      .terminal-canvas {
+        flex: 1;
+        background: #000000;
+        padding: 18px 20px;
+        overflow: hidden;
+        font-size: 14px;
+        line-height: 1.6;
+        color: #bbbbbb;
+      }
+
+      .output-lines {
+        margin-bottom: 4px;
+      }
+
+      .output-line {
+        display: block;
+        white-space: pre;
+        opacity: 0;
+        color: #bbbbbb;
+      }
+
+      .output-line.bold {
+        font-weight: bold;
+        color: #ffffff;
+      }
+
+      .output-line.accent {
+        color: #88ff67;
+        font-weight: bold;
+      }
+
+      .output-line.dim {
+        color: #666666;
+      }
 
-It runs for 12 seconds at 1920×1080. Paste this into your composition:
+      .input-line {
+        display: flex;
+        align-items: center;
+        white-space: pre;
+      }
 
-```html index.html
+      .prompt {
+        color: #88ff67;
+        font-weight: bold;
+        user-select: none;
+      }
+
+      .typed-command {
+        color: #bbbbbb;
+      }
+
+      .cursor-block {
+        display: inline-block;
+        width: 9px;
+        height: 16px;
+        background: #88ff67;
+        vertical-align: text-bottom;
+        margin-left: 1px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="scene"
+      data-composition-id="code-snippet-apple-terminal-pro"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="terminal-window">
+        <div class="titlebar">
+          <div class="traffic-lights">
+            <span class="close"></span>
+            <span class="minimize"></span>
+            <span class="fullscreen"></span>
+          </div>
+          <span class="window-title">bash — 80×24</span>
+        </div>
+        <div class="terminal-canvas">
+          <div class="output-lines">
+            <span class="output-line dim">Last login: Mon Jun 2 09:14:22 on ttys008</span>
+            <span class="output-line dim">Building production bundle...</span>
+            <span class="output-line"> vite v5.3.1 building for production...</span>
+            <span class="output-line"> ✓ 142 modules transformed.</span>
+            <span class="output-line"> dist/index.html 0.48 kB</span>
+            <span class="output-line"> dist/assets/index-Cv3rN.js 284.12 kB</span>
+            <span class="output-line"> dist/assets/index-Du4mP.css 42.08 kB</span>
+            <span class="output-line accent"> ✓ built in 2.31s</span>
+          </div>
+          <div class="input-line">
+            <span class="prompt">user@Mac myapp % </span><span class="typed-command"></span
+            ><span class="cursor-block"></span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      const command = "npm run build";
+      const typedEl = document.querySelector(".typed-command");
+      const cursorEl = document.querySelector(".cursor-block");
+      const outputLines = document.querySelectorAll(".output-line");
+
+      const tl = gsap.timeline({ paused: true });
+
+      tl.set(typedEl, { text: "" }, 0);
+
+      const charDuration = 1.5 / command.length;
+      command.split("").forEach((char, i) => {
+        tl.add(
+          () => {
+            typedEl.textContent = command.slice(0, i + 1);
+          },
+          0.5 + i * charDuration,
+        );
+      });
+
+      tl.set(cursorEl, { opacity: 0 }, 2.2);
+      tl.set(outputLines[0], { opacity: 1 }, 2.3);
+
+      tl.add(() => {
+        typedEl.textContent = "";
+      }, 2.5);
+
+      outputLines.forEach((line, i) => {
+        if (i === 0) return;
+        tl.set(line, { opacity: 1 }, 2.8 + i * 0.1);
+      });
+
+      tl.add(() => {
+        const inputLine = document.querySelector(".input-line");
+        const newPrompt = document.createElement("div");
+        newPrompt.className = "input-line";
+        newPrompt.innerHTML =
+          '<span class="prompt">user@Mac myapp % </span><span class="typed-command"></span><span class="cursor-block" id="final-cursor"></span>';
+        inputLine.style.display = "none";
+        inputLine.parentNode.appendChild(newPrompt);
+      }, 4.2);
+
+      const blinkTimes = [4.4, 4.8, 5.2, 5.6, 6.0, 6.4];
+      blinkTimes.forEach((t, i) => {
+        tl.add(() => {
+          const fc = document.getElementById("final-cursor");
+          if (fc) fc.style.opacity = i % 2 === 0 ? "0" : "1";
+        }, t);
+      });
+      tl.add(() => {
+        const fc = document.getElementById("final-cursor");
+        if (fc) fc.style.opacity = "1";
+      }, 6.8);
+
+      window.__timelines["code-snippet-apple-terminal-pro"] = tl;
+    </script>
+  </body>
+</html>
+```
+
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
 <div
   data-composition-id="code-snippet-apple-terminal-pro"
   data-composition-src="compositions/code-snippet-apple-terminal-pro.html"
@@ -29,8 +285,14 @@ It runs for 12 seconds at 1920×1080. Paste this into your composition:
 ></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.
+## Features
+
+- Faithful recreation of macOS Terminal.app Pro profile — black background, #BBBBBB grey text, #88FF67 lime cursor
+- macOS window chrome with traffic light buttons and centered title bar
+- Per-character GSAP typing animation — command types out character by character
+- Output lines reveal sequentially after command executes
+- Cursor blinks three times at the end then holds steady
+- Self-contained HTML — no external assets, only GSAP CDN
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-red-sands.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-red-sands.mdx
index f5502c3829..f08593cb4a 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-red-sands.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-red-sands.mdx
@@ -3,21 +3,274 @@ title: "Code Snippet - Apple Terminal Red Sands"
 description: "Apple Terminal Red Sands profile: deep red background with sandy text, per-character typing animation of a shell session."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-red-sands.mp4" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/code-snippet-apple-terminal-red-sands.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Code Snippet - Apple Terminal Red Sands preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add code-snippet-apple-terminal-red-sands
-```
+<InstallCommand command="npx hyperframes add code-snippet-apple-terminal-red-sands" />
 
 That writes one file: `compositions/code-snippet-apple-terminal-red-sands.html`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`code-snippet-apple-terminal-red-sands.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Apple Terminal Red Sands</title>
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #7b140e;
+        font-family: "SF Mono", Menlo, Monaco, Consolas, "Courier New", monospace;
+      }
+
+      #scene {
+        width: 1920px;
+        height: 1080px;
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: radial-gradient(ellipse at center, #8a1a12 0%, #4a0a06 100%);
+      }
+
+      .terminal-window {
+        width: 1400px;
+        height: 700px;
+        border-radius: 10px;
+        overflow: hidden;
+        box-shadow:
+          0 30px 80px rgba(0, 0, 0, 0.7),
+          0 10px 30px rgba(123, 20, 14, 0.4);
+        display: flex;
+        flex-direction: column;
+      }
+
+      .titlebar {
+        height: 38px;
+        background: #5e0f0a;
+        display: flex;
+        align-items: center;
+        padding: 0 14px;
+        flex-shrink: 0;
+        border-bottom: 1px solid #8b2018;
+        position: relative;
+      }
+
+      .traffic-lights {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+      }
+
+      .traffic-lights span {
+        width: 13px;
+        height: 13px;
+        border-radius: 50%;
+        display: inline-block;
+      }
+
+      .traffic-lights .close {
+        background: #ff5f57;
+        border: 1px solid #e0443e;
+      }
+
+      .traffic-lights .minimize {
+        background: #ffbd2e;
+        border: 1px solid #dfa123;
+      }
+
+      .traffic-lights .fullscreen {
+        background: #28c840;
+        border: 1px solid #1aab29;
+      }
+
+      .window-title {
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        font-size: 13px;
+        color: #ffe1b9;
+        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
+        font-weight: 500;
+        letter-spacing: -0.1px;
+      }
+
+      .terminal-canvas {
+        flex: 1;
+        background: #7b140e;
+        padding: 18px 20px;
+        overflow: hidden;
+        font-size: 14px;
+        line-height: 1.6;
+        color: #ffe1b9;
+      }
+
+      .output-lines {
+        margin-bottom: 4px;
+      }
+
+      .output-line {
+        display: block;
+        white-space: pre;
+        opacity: 0;
+        color: #ffe1b9;
+      }
+
+      .output-line.bold {
+        font-weight: bold;
+        color: #ffffff;
+      }
+
+      .output-line.dim {
+        color: #c4916a;
+      }
+
+      .input-line {
+        display: flex;
+        align-items: center;
+        white-space: pre;
+      }
 
-It runs for 12 seconds at 1920×1080. Paste this into your composition:
+      .prompt {
+        color: #ffe1b9;
+        font-weight: bold;
+        user-select: none;
+      }
 
-```html index.html
+      .typed-command {
+        color: #ffe1b9;
+      }
+
+      .cursor-block {
+        display: inline-block;
+        width: 9px;
+        height: 16px;
+        background: #ffffff;
+        vertical-align: text-bottom;
+        margin-left: 1px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="scene"
+      data-composition-id="code-snippet-apple-terminal-red-sands"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="terminal-window">
+        <div class="titlebar">
+          <div class="traffic-lights">
+            <span class="close"></span>
+            <span class="minimize"></span>
+            <span class="fullscreen"></span>
+          </div>
+          <span class="window-title">bash — 80×24</span>
+        </div>
+        <div class="terminal-canvas">
+          <div class="output-lines">
+            <span class="output-line dim">Last login: Mon Jun 2 09:14:22 on ttys009</span>
+            <span class="output-line">Fetching https://api.example.com/status</span>
+            <span class="output-line dim"> HTTP/2 200</span>
+            <span class="output-line dim"> content-type: application/json</span>
+            <span class="output-line dim"> x-request-id: a3f9c21e-04b2-4d78</span>
+            <span class="output-line">{</span>
+            <span class="output-line"> "status": "healthy",</span>
+            <span class="output-line"> "version": "2.4.1",</span>
+            <span class="output-line bold"> "uptime": "14d 6h 32m"</span>
+            <span class="output-line">}</span>
+          </div>
+          <div class="input-line">
+            <span class="prompt">user@Mac ~ % </span><span class="typed-command"></span
+            ><span class="cursor-block"></span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      const command = "curl -s api.example.com/status | jq";
+      const typedEl = document.querySelector(".typed-command");
+      const cursorEl = document.querySelector(".cursor-block");
+      const outputLines = document.querySelectorAll(".output-line");
+
+      const tl = gsap.timeline({ paused: true });
+
+      tl.set(typedEl, { text: "" }, 0);
+
+      const charDuration = 1.5 / command.length;
+      command.split("").forEach((char, i) => {
+        tl.add(
+          () => {
+            typedEl.textContent = command.slice(0, i + 1);
+          },
+          0.5 + i * charDuration,
+        );
+      });
+
+      tl.set(cursorEl, { opacity: 0 }, 2.2);
+      tl.set(outputLines[0], { opacity: 1 }, 2.3);
+
+      tl.add(() => {
+        typedEl.textContent = "";
+      }, 2.5);
+
+      outputLines.forEach((line, i) => {
+        if (i === 0) return;
+        tl.set(line, { opacity: 1 }, 2.8 + i * 0.1);
+      });
+
+      tl.add(() => {
+        const inputLine = document.querySelector(".input-line");
+        const newPrompt = document.createElement("div");
+        newPrompt.className = "input-line";
+        newPrompt.innerHTML =
+          '<span class="prompt">user@Mac ~ % </span><span class="typed-command"></span><span class="cursor-block" id="final-cursor"></span>';
+        inputLine.style.display = "none";
+        inputLine.parentNode.appendChild(newPrompt);
+      }, 4.4);
+
+      const blinkTimes = [4.6, 5.0, 5.4, 5.8, 6.2, 6.6];
+      blinkTimes.forEach((t, i) => {
+        tl.add(() => {
+          const fc = document.getElementById("final-cursor");
+          if (fc) fc.style.opacity = i % 2 === 0 ? "0" : "1";
+        }, t);
+      });
+      tl.add(() => {
+        const fc = document.getElementById("final-cursor");
+        if (fc) fc.style.opacity = "1";
+      }, 7.0);
+
+      window.__timelines["code-snippet-apple-terminal-red-sands"] = tl;
+    </script>
+  </body>
+</html>
+```
+
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
 <div
   data-composition-id="code-snippet-apple-terminal-red-sands"
   data-composition-src="compositions/code-snippet-apple-terminal-red-sands.html"
@@ -29,8 +282,14 @@ It runs for 12 seconds at 1920×1080. Paste this into your composition:
 ></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.
+## Features
+
+- Faithful recreation of macOS Terminal.app Red Sands profile — #7B140E red background with #FFE1B9 sandy text
+- macOS window chrome with traffic light buttons and centered title bar
+- Per-character GSAP typing animation — command types out character by character
+- Output lines reveal sequentially after command executes
+- Cursor blinks three times at the end then holds steady
+- Self-contained HTML — no external assets, only GSAP CDN
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-silver-aerogel.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-silver-aerogel.mdx
index 06ce2faaf9..032e3a9ca0 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-silver-aerogel.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-silver-aerogel.mdx
@@ -3,21 +3,280 @@ title: "Code Snippet - Apple Terminal Silver Aerogel"
 description: "Apple Terminal Silver Aerogel profile: dark grey background with white text, per-character typing animation of a shell session."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-silver-aerogel.mp4" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/code-snippet-apple-terminal-silver-aerogel.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Code Snippet - Apple Terminal Silver Aerogel preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add code-snippet-apple-terminal-silver-aerogel
-```
+<InstallCommand command="npx hyperframes add code-snippet-apple-terminal-silver-aerogel" />
 
 That writes one file: `compositions/code-snippet-apple-terminal-silver-aerogel.html`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`code-snippet-apple-terminal-silver-aerogel.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Apple Terminal Silver Aerogel</title>
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #2a2a2a;
+        font-family: "SF Mono", Menlo, Monaco, Consolas, "Courier New", monospace;
+      }
+
+      #scene {
+        width: 1920px;
+        height: 1080px;
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: radial-gradient(ellipse at center, #3a3a3a 0%, #1c1c1c 100%);
+      }
+
+      .terminal-window {
+        width: 1400px;
+        height: 700px;
+        border-radius: 10px;
+        overflow: hidden;
+        box-shadow:
+          0 30px 80px rgba(0, 0, 0, 0.6),
+          0 10px 30px rgba(232, 232, 232, 0.05);
+        display: flex;
+        flex-direction: column;
+      }
+
+      .titlebar {
+        height: 38px;
+        background: #2a2a2a;
+        display: flex;
+        align-items: center;
+        padding: 0 14px;
+        flex-shrink: 0;
+        border-bottom: 1px solid #444444;
+        position: relative;
+      }
+
+      .traffic-lights {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+      }
+
+      .traffic-lights span {
+        width: 13px;
+        height: 13px;
+        border-radius: 50%;
+        display: inline-block;
+      }
+
+      .traffic-lights .close {
+        background: #ff5f57;
+        border: 1px solid #e0443e;
+      }
+
+      .traffic-lights .minimize {
+        background: #ffbd2e;
+        border: 1px solid #dfa123;
+      }
+
+      .traffic-lights .fullscreen {
+        background: #28c840;
+        border: 1px solid #1aab29;
+      }
+
+      .window-title {
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        font-size: 13px;
+        color: #ffffff;
+        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
+        font-weight: 500;
+        letter-spacing: -0.1px;
+      }
+
+      .terminal-canvas {
+        flex: 1;
+        background: #3d3d3d;
+        padding: 18px 20px;
+        overflow: hidden;
+        font-size: 14px;
+        line-height: 1.6;
+        color: #ffffff;
+      }
+
+      .output-lines {
+        margin-bottom: 4px;
+      }
+
+      .output-line {
+        display: block;
+        white-space: pre;
+        opacity: 0;
+        color: #ffffff;
+      }
+
+      .output-line.bold {
+        font-weight: bold;
+        color: #ffffff;
+      }
+
+      .output-line.dim {
+        color: #aaaaaa;
+      }
+
+      .output-line.success {
+        color: #7fffb3;
+      }
+
+      .output-line.warn {
+        color: #ffd700;
+      }
 
-It runs for 12 seconds at 1920×1080. Paste this into your composition:
+      .input-line {
+        display: flex;
+        align-items: center;
+        white-space: pre;
+      }
 
-```html index.html
+      .prompt {
+        color: #e8e8e8;
+        font-weight: bold;
+        user-select: none;
+      }
+
+      .typed-command {
+        color: #ffffff;
+      }
+
+      .cursor-block {
+        display: inline-block;
+        width: 9px;
+        height: 16px;
+        background: #e8e8e8;
+        vertical-align: text-bottom;
+        margin-left: 1px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="scene"
+      data-composition-id="code-snippet-apple-terminal-silver-aerogel"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="terminal-window">
+        <div class="titlebar">
+          <div class="traffic-lights">
+            <span class="close"></span>
+            <span class="minimize"></span>
+            <span class="fullscreen"></span>
+          </div>
+          <span class="window-title">bash — 80×24</span>
+        </div>
+        <div class="terminal-canvas">
+          <div class="output-lines">
+            <span class="output-line dim">Last login: Mon Jun 2 09:14:22 on ttys010</span>
+            <span class="output-line">Checking system resources...</span>
+            <span class="output-line">Filesystem Size Used Avail Use%</span>
+            <span class="output-line">/dev/disk3s1s1 460G 142G 302G 32%</span>
+            <span class="output-line dim">/dev/disk3s6 460G 5.0G 302G 2%</span>
+            <span class="output-line">/dev/disk3s2 460G 11G 302G 4%</span>
+            <span class="output-line warn">Memory: 14.2 GB / 16.0 GB used (89%)</span>
+            <span class="output-line success">CPU: 8-core, 12% load average</span>
+          </div>
+          <div class="input-line">
+            <span class="prompt">user@Mac ~ % </span><span class="typed-command"></span
+            ><span class="cursor-block"></span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      const command = "df -h && vm_stat";
+      const typedEl = document.querySelector(".typed-command");
+      const cursorEl = document.querySelector(".cursor-block");
+      const outputLines = document.querySelectorAll(".output-line");
+
+      const tl = gsap.timeline({ paused: true });
+
+      tl.set(typedEl, { text: "" }, 0);
+
+      const charDuration = 1.5 / command.length;
+      command.split("").forEach((char, i) => {
+        tl.add(
+          () => {
+            typedEl.textContent = command.slice(0, i + 1);
+          },
+          0.5 + i * charDuration,
+        );
+      });
+
+      tl.set(cursorEl, { opacity: 0 }, 2.2);
+      tl.set(outputLines[0], { opacity: 1 }, 2.3);
+
+      tl.add(() => {
+        typedEl.textContent = "";
+      }, 2.5);
+
+      outputLines.forEach((line, i) => {
+        if (i === 0) return;
+        tl.set(line, { opacity: 1 }, 2.8 + i * 0.1);
+      });
+
+      tl.add(() => {
+        const inputLine = document.querySelector(".input-line");
+        const newPrompt = document.createElement("div");
+        newPrompt.className = "input-line";
+        newPrompt.innerHTML =
+          '<span class="prompt">user@Mac ~ % </span><span class="typed-command"></span><span class="cursor-block" id="final-cursor"></span>';
+        inputLine.style.display = "none";
+        inputLine.parentNode.appendChild(newPrompt);
+      }, 4.2);
+
+      const blinkTimes = [4.4, 4.8, 5.2, 5.6, 6.0, 6.4];
+      blinkTimes.forEach((t, i) => {
+        tl.add(() => {
+          const fc = document.getElementById("final-cursor");
+          if (fc) fc.style.opacity = i % 2 === 0 ? "0" : "1";
+        }, t);
+      });
+      tl.add(() => {
+        const fc = document.getElementById("final-cursor");
+        if (fc) fc.style.opacity = "1";
+      }, 6.8);
+
+      window.__timelines["code-snippet-apple-terminal-silver-aerogel"] = tl;
+    </script>
+  </body>
+</html>
+```
+
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
 <div
   data-composition-id="code-snippet-apple-terminal-silver-aerogel"
   data-composition-src="compositions/code-snippet-apple-terminal-silver-aerogel.html"
@@ -29,8 +288,14 @@ It runs for 12 seconds at 1920×1080. Paste this into your composition:
 ></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.
+## Features
+
+- Faithful recreation of macOS Terminal.app Silver Aerogel profile — #3D3D3D dark grey background with white text
+- macOS window chrome with traffic light buttons and centered title bar
+- Per-character GSAP typing animation — command types out character by character
+- Output lines reveal sequentially after command executes
+- Cursor blinks three times at the end then holds steady
+- Self-contained HTML — no external assets, only GSAP CDN
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-solid-colors.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-solid-colors.mdx
index 29f801e4a3..8c6ee5883e 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-solid-colors.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-solid-colors.mdx
@@ -3,21 +3,277 @@ title: "Code Snippet - Apple Terminal Solid Colors"
 description: "Apple Terminal Solid Colors profile: deep purple background with white text, per-character typing animation of a shell session."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-solid-colors.mp4" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/code-snippet-apple-terminal-solid-colors.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Code Snippet - Apple Terminal Solid Colors preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add code-snippet-apple-terminal-solid-colors
-```
+<InstallCommand command="npx hyperframes add code-snippet-apple-terminal-solid-colors" />
 
 That writes one file: `compositions/code-snippet-apple-terminal-solid-colors.html`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`code-snippet-apple-terminal-solid-colors.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Apple Terminal Solid Colors</title>
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #4c0099;
+        font-family: "SF Mono", Menlo, Monaco, Consolas, "Courier New", monospace;
+      }
+
+      #scene {
+        width: 1920px;
+        height: 1080px;
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: radial-gradient(ellipse at center, #5a00b3 0%, #2e0060 100%);
+      }
+
+      .terminal-window {
+        width: 1400px;
+        height: 700px;
+        border-radius: 10px;
+        overflow: hidden;
+        box-shadow:
+          0 30px 80px rgba(0, 0, 0, 0.7),
+          0 10px 30px rgba(76, 0, 153, 0.4);
+        display: flex;
+        flex-direction: column;
+      }
+
+      .titlebar {
+        height: 38px;
+        background: #3a0077;
+        display: flex;
+        align-items: center;
+        padding: 0 14px;
+        flex-shrink: 0;
+        border-bottom: 1px solid #6600bb;
+        position: relative;
+      }
+
+      .traffic-lights {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+      }
+
+      .traffic-lights span {
+        width: 13px;
+        height: 13px;
+        border-radius: 50%;
+        display: inline-block;
+      }
+
+      .traffic-lights .close {
+        background: #ff5f57;
+        border: 1px solid #e0443e;
+      }
+
+      .traffic-lights .minimize {
+        background: #ffbd2e;
+        border: 1px solid #dfa123;
+      }
+
+      .traffic-lights .fullscreen {
+        background: #28c840;
+        border: 1px solid #1aab29;
+      }
+
+      .window-title {
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        font-size: 13px;
+        color: #ffffff;
+        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
+        font-weight: 500;
+        letter-spacing: -0.1px;
+      }
+
+      .terminal-canvas {
+        flex: 1;
+        background: #4c0099;
+        padding: 18px 20px;
+        overflow: hidden;
+        font-size: 14px;
+        line-height: 1.6;
+        color: #ffffff;
+      }
+
+      .output-lines {
+        margin-bottom: 4px;
+      }
+
+      .output-line {
+        display: block;
+        white-space: pre;
+        opacity: 0;
+        color: #ffffff;
+      }
+
+      .output-line.bold {
+        font-weight: bold;
+        color: #ffffff;
+      }
+
+      .output-line.dim {
+        color: rgba(255, 255, 255, 0.55);
+      }
+
+      .output-line.accent {
+        color: #cc99ff;
+        font-weight: bold;
+      }
 
-It runs for 12 seconds at 1920×1080. Paste this into your composition:
+      .input-line {
+        display: flex;
+        align-items: center;
+        white-space: pre;
+      }
 
-```html index.html
+      .prompt {
+        color: #cc99ff;
+        font-weight: bold;
+        user-select: none;
+      }
+
+      .typed-command {
+        color: #ffffff;
+      }
+
+      .cursor-block {
+        display: inline-block;
+        width: 9px;
+        height: 16px;
+        background: #ffffff;
+        vertical-align: text-bottom;
+        margin-left: 1px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="scene"
+      data-composition-id="code-snippet-apple-terminal-solid-colors"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="terminal-window">
+        <div class="titlebar">
+          <div class="traffic-lights">
+            <span class="close"></span>
+            <span class="minimize"></span>
+            <span class="fullscreen"></span>
+          </div>
+          <span class="window-title">bash — 80×24</span>
+        </div>
+        <div class="terminal-canvas">
+          <div class="output-lines">
+            <span class="output-line dim">Last login: Mon Jun 2 09:14:22 on ttys011</span>
+            <span class="output-line">Initializing HyperFrames project...</span>
+            <span class="output-line dim"> Creating project structure</span>
+            <span class="output-line dim"> Copying template files</span>
+            <span class="output-line dim"> Installing dependencies</span>
+            <span class="output-line"> added 142 packages in 3.4s</span>
+            <span class="output-line accent"> ✓ Project ready at ./my-video</span>
+            <span class="output-line bold"> Run: cd my-video && npx hyperframes preview</span>
+          </div>
+          <div class="input-line">
+            <span class="prompt">user@Mac ~ % </span><span class="typed-command"></span
+            ><span class="cursor-block"></span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      const command = "npx hyperframes init my-video";
+      const typedEl = document.querySelector(".typed-command");
+      const cursorEl = document.querySelector(".cursor-block");
+      const outputLines = document.querySelectorAll(".output-line");
+
+      const tl = gsap.timeline({ paused: true });
+
+      tl.set(typedEl, { text: "" }, 0);
+
+      const charDuration = 1.5 / command.length;
+      command.split("").forEach((char, i) => {
+        tl.add(
+          () => {
+            typedEl.textContent = command.slice(0, i + 1);
+          },
+          0.5 + i * charDuration,
+        );
+      });
+
+      tl.set(cursorEl, { opacity: 0 }, 2.2);
+      tl.set(outputLines[0], { opacity: 1 }, 2.3);
+
+      tl.add(() => {
+        typedEl.textContent = "";
+      }, 2.5);
+
+      outputLines.forEach((line, i) => {
+        if (i === 0) return;
+        tl.set(line, { opacity: 1 }, 2.8 + i * 0.1);
+      });
+
+      tl.add(() => {
+        const inputLine = document.querySelector(".input-line");
+        const newPrompt = document.createElement("div");
+        newPrompt.className = "input-line";
+        newPrompt.innerHTML =
+          '<span class="prompt">user@Mac ~ % </span><span class="typed-command"></span><span class="cursor-block" id="final-cursor"></span>';
+        inputLine.style.display = "none";
+        inputLine.parentNode.appendChild(newPrompt);
+      }, 4.2);
+
+      const blinkTimes = [4.4, 4.8, 5.2, 5.6, 6.0, 6.4];
+      blinkTimes.forEach((t, i) => {
+        tl.add(() => {
+          const fc = document.getElementById("final-cursor");
+          if (fc) fc.style.opacity = i % 2 === 0 ? "0" : "1";
+        }, t);
+      });
+      tl.add(() => {
+        const fc = document.getElementById("final-cursor");
+        if (fc) fc.style.opacity = "1";
+      }, 6.8);
+
+      window.__timelines["code-snippet-apple-terminal-solid-colors"] = tl;
+    </script>
+  </body>
+</html>
+```
+
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
 <div
   data-composition-id="code-snippet-apple-terminal-solid-colors"
   data-composition-src="compositions/code-snippet-apple-terminal-solid-colors.html"
@@ -29,8 +285,14 @@ It runs for 12 seconds at 1920×1080. Paste this into your composition:
 ></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.
+## Features
+
+- Faithful recreation of macOS Terminal.app Solid Colors profile — #4C0099 deep purple background with white text
+- macOS window chrome with traffic light buttons and centered title bar
+- Per-character GSAP typing animation — command types out character by character
+- Output lines reveal sequentially after command executes
+- Cursor blinks three times at the end then holds steady
+- Self-contained HTML — no external assets, only GSAP CDN
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/code-snippet-dark-2026.mdx b/docs/catalog/blocks/code-snippet-dark-2026.mdx
index 6b569a5000..23f59a6bd7 100644
--- a/docs/catalog/blocks/code-snippet-dark-2026.mdx
+++ b/docs/catalog/blocks/code-snippet-dark-2026.mdx
@@ -3,21 +3,1120 @@ title: "Code Snippet - Dark 2026"
 description: "VS Code workbench with per-character typing animation in the Dark 2026 theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-dark-2026.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-dark-2026.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/code-snippet-dark-2026.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Code Snippet - Dark 2026 preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add code-snippet-dark-2026
-```
+<InstallCommand command="npx hyperframes add code-snippet-dark-2026" />
 
 That writes `compositions/code-snippet-dark-2026.html`, plus 1 supporting file under `assets/`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`code-snippet-dark-2026.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Dark 2026 VS Code Theme Composition</title>
+  </head>
+  <body>
+    <template id="vscode-dark-2026-template">
+      <div
+        class="vscode-theme-scene"
+        data-composition-id="vscode-dark-2026"
+        data-width="1920"
+        data-height="1080"
+      >
+        <main class="scene-content">
+          <section class="header">
+            <div>
+              <p class="kicker">Official VS Code built-in theme</p>
+              <h1 class="title"><span class="theme-label">Dark 2026</span></h1>
+            </div>
+            <p class="source-note">
+              Typing `functional_toolkit.py` with workbench colors from
+              <span class="theme-source">2026-dark.json</span>.
+            </p>
+          </section>
+
+          <section class="workbench">
+            <div class="titlebar">
+              <div class="traffic"><span></span><span></span><span></span></div>
+              <div class="window-title">functional-toolkit - Visual Studio Code</div>
+              <div class="command-center">Search</div>
+            </div>
+
+            <aside class="activity" aria-label="Activity bar">
+              <svg class="activity-icon active" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="currentColor"
+                  d="M4 4h7v7H4V4Zm9 0h7v7h-7V4ZM4 13h7v7H4v-7Zm9 0h7v7h-7v-7Z"
+                />
+              </svg>
+              <svg class="activity-icon" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  d="m21 21-5.2-5.2M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Z"
+                />
+              </svg>
+              <svg class="activity-icon" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  d="M8 18 3 12l5-6m8 12 5-6-5-6"
+                />
+              </svg>
+              <svg class="activity-icon" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  d="M12 3v18m0-18 6 6m-6-6L6 9m6 12 6-6m-6 6-6-6"
+                />
+              </svg>
+            </aside>
+
+            <aside class="sidebar">
+              <div class="sidebar-title">Explorer</div>
+              <div class="section-title">⌄ Functional Toolkit</div>
+              <div class="tree">
+                <div class="tree-row">⌄ src</div>
+                <div class="tree-row child selected">◇ functional_toolkit.py</div>
+                <div class="tree-row child">◇ test_toolkit.py</div>
+                <div class="tree-row">◇ pyproject.toml</div>
+                <div class="tree-row">◇ README.md</div>
+              </div>
+            </aside>
+
+            <section class="editor-area">
+              <div class="tabs">
+                <div class="tab">◇ functional_toolkit.py</div>
+                <div class="tab inactive">README.md</div>
+              </div>
+              <div class="breadcrumbs">functional-toolkit › src › functional_toolkit.py</div>
+              <div class="editor">
+                <div class="active-line"></div>
+                <div class="code"></div>
+              </div>
+              <div class="terminal">
+                <div class="panel-tabs">
+                  <span class="active">Terminal</span><span>Problems</span><span>Output</span>
+                </div>
+                <div class="terminal-body">
+                  <div><span class="prompt">functional-toolkit %</span> python -m pytest</div>
+                  <div>collected 3 items</div>
+                  <div>tests/test_toolkit.py ... <span class="tok-comment">passed</span></div>
+                </div>
+              </div>
+            </section>
+
+            <footer class="statusbar">
+              <div class="status-left">
+                <span class="remote">main</span>
+                <span>0 errors</span>
+                <span>0 warnings</span>
+              </div>
+              <div class="status-right">
+                <span>Ln 17, Col 1</span>
+                <span>Spaces: 4</span>
+                <span>UTF-8</span>
+                <span>Python 3.12</span>
+              </div>
+            </footer>
+          </section>
+        </main>
+        <style>
+          * {
+            box-sizing: border-box;
+            letter-spacing: 0;
+          }
+
+          html,
+          body {
+            margin: 0;
+            width: 1920px;
+            height: 1080px;
+            overflow: hidden;
+            background: #000000;
+            font-family:
+              Inter,
+              -apple-system,
+              BlinkMacSystemFont,
+              "Segoe UI",
+              sans-serif;
+          }
+
+          .vscode-theme-scene {
+            --activity-bg: #181818;
+            --activity-fg: #d7d7d7;
+            --activity-muted: #868686;
+            --activity-active: #0078d4;
+            --sidebar-bg: #181818;
+            --sidebar-fg: #cccccc;
+            --sidebar-border: #2b2b2b;
+            --tab-bg: #181818;
+            --tab-active-bg: #1f1f1f;
+            --tab-active-fg: #ffffff;
+            --tab-inactive-fg: #9d9d9d;
+            --tab-border: #2b2b2b;
+            --editor-bg: #1f1f1f;
+            --editor-fg: #cccccc;
+            --editor-line: rgba(255, 255, 255, 0.04);
+            --gutter-fg: #6e7681;
+            --gutter-active-fg: #cccccc;
+            --panel-bg: #181818;
+            --panel-border: #2b2b2b;
+            --status-bg: #181818;
+            --status-fg: #cccccc;
+            --status-border: #2b2b2b;
+            --title-bg: #181818;
+            --title-fg: #cccccc;
+            --token-comment: #6a9955;
+            --token-keyword: #c586c0;
+            --token-function: #dcdcaa;
+            --token-string: #ce9178;
+            --token-number: #b5cea8;
+            --token-variable: #9cdcfe;
+            --token-parameter: #9cdcfe;
+            --token-operator: #d4d4d4;
+            --token-punctuation: #d4d4d4;
+            --token-class-name: #4ec9b0;
+            position: relative;
+            width: 1920px;
+            height: 1080px;
+            overflow: hidden;
+            background:
+              linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.32)),
+              url("../assets/background.jpeg") center / cover no-repeat;
+            color: var(--editor-fg);
+          }
+
+          .scene-content {
+            position: relative;
+            z-index: 1;
+            width: 100%;
+            height: 100%;
+            padding: 54px 70px 92px;
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+            perspective: 2200px;
+            perspective-origin: 56% 52%;
+          }
+
+          .header {
+            display: flex;
+            align-items: end;
+            justify-content: space-between;
+            min-height: 66px;
+            text-shadow:
+              0 2px 12px rgba(0, 0, 0, 0.42),
+              0 14px 34px rgba(0, 0, 0, 0.32);
+          }
+
+          .kicker {
+            margin: 0 0 7px;
+            color: var(--gutter-fg);
+            font-size: 15px;
+            font-weight: 650;
+            text-transform: uppercase;
+            text-shadow:
+              0 2px 8px rgba(0, 0, 0, 0.48),
+              0 10px 26px rgba(0, 0, 0, 0.36);
+          }
+
+          .title {
+            margin: 0;
+            color: var(--editor-fg);
+            font-size: 44px;
+            line-height: 1;
+            font-weight: 760;
+          }
+
+          .source-note {
+            width: 510px;
+            color: var(--gutter-fg);
+            font-size: 16px;
+            line-height: 1.35;
+            text-align: right;
+            text-shadow:
+              0 2px 10px rgba(0, 0, 0, 0.46),
+              0 12px 30px rgba(0, 0, 0, 0.34);
+          }
+
+          .workbench {
+            height: 824px;
+            display: grid;
+            grid-template-columns: 54px 290px 1fr;
+            grid-template-rows: 36px 1fr 26px;
+            overflow: hidden;
+            border: 1px solid var(--sidebar-border);
+            border-radius: 8px;
+            background: var(--editor-bg);
+            box-shadow: 0 34px 90px rgba(0, 0, 0, 0.42);
+            transform: translateZ(0);
+            transform-origin: 82% 50%;
+            transform-style: preserve-3d;
+            will-change: transform;
+          }
+
+          .titlebar {
+            grid-column: 1 / -1;
+            display: grid;
+            grid-template-columns: 120px 1fr 210px;
+            align-items: center;
+            background: var(--title-bg);
+            color: var(--title-fg);
+            border-bottom: 1px solid var(--tab-border);
+            font-size: 12px;
+          }
+
+          .traffic {
+            display: flex;
+            gap: 8px;
+            padding-left: 18px;
+          }
+
+          .traffic span {
+            width: 12px;
+            height: 12px;
+            border-radius: 999px;
+          }
+
+          .traffic span:nth-child(1) {
+            background: #ff5f57;
+          }
+          .traffic span:nth-child(2) {
+            background: #ffbd2e;
+          }
+          .traffic span:nth-child(3) {
+            background: #28c840;
+          }
+
+          .window-title {
+            justify-self: center;
+            opacity: 0.84;
+          }
+
+          .command-center {
+            justify-self: end;
+            width: 176px;
+            height: 22px;
+            margin-right: 16px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border: 1px solid color-mix(in srgb, var(--title-fg), transparent 78%);
+            border-radius: 5px;
+            color: color-mix(in srgb, var(--title-fg), transparent 18%);
+          }
+
+          .activity {
+            grid-row: 2 / 3;
+            background: var(--activity-bg);
+            border-right: 1px solid var(--sidebar-border);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 10px 0;
+            gap: 18px;
+          }
+
+          .activity-icon {
+            width: 28px;
+            height: 28px;
+            color: var(--activity-muted);
+          }
+
+          .activity-icon.active {
+            color: var(--activity-fg);
+            border-left: 2px solid var(--activity-active);
+            padding-left: 4px;
+          }
+
+          .sidebar {
+            grid-row: 2 / 3;
+            background: var(--sidebar-bg);
+            color: var(--sidebar-fg);
+            border-right: 1px solid var(--sidebar-border);
+            display: flex;
+            flex-direction: column;
+            min-width: 0;
+          }
+
+          .sidebar-title {
+            height: 38px;
+            display: flex;
+            align-items: center;
+            padding: 0 20px;
+            color: var(--sidebar-fg);
+            font-size: 11px;
+            text-transform: uppercase;
+          }
+
+          .section-title {
+            height: 24px;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            padding: 0 14px;
+            background: color-mix(in srgb, var(--sidebar-bg), var(--sidebar-fg) 5%);
+            border-top: 1px solid var(--sidebar-border);
+            border-bottom: 1px solid var(--sidebar-border);
+            color: var(--sidebar-fg);
+            font-size: 11px;
+            font-weight: 700;
+          }
+
+          .tree {
+            padding: 8px 0;
+            font-size: 13px;
+            line-height: 24px;
+          }
+
+          .tree-row {
+            height: 24px;
+            display: flex;
+            align-items: center;
+            gap: 7px;
+            padding: 0 10px 0 18px;
+            color: color-mix(in srgb, var(--sidebar-fg), transparent 8%);
+            white-space: nowrap;
+          }
+
+          .tree-row.child {
+            padding-left: 34px;
+          }
+
+          .tree-row.selected {
+            background: color-mix(in srgb, var(--sidebar-fg), transparent 88%);
+            color: var(--sidebar-fg);
+          }
+
+          .editor-area {
+            grid-row: 2 / 3;
+            display: grid;
+            grid-template-rows: 36px 30px 1fr 138px;
+            min-width: 0;
+            background: var(--editor-bg);
+          }
+
+          .tabs {
+            display: flex;
+            background: var(--tab-bg);
+            border-bottom: 1px solid var(--tab-border);
+          }
+
+          .tab {
+            width: 205px;
+            height: 36px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 0 13px;
+            border-right: 1px solid var(--tab-border);
+            background: var(--tab-active-bg);
+            color: var(--tab-active-fg);
+            border-top: 2px solid var(--activity-active);
+            font-size: 13px;
+          }
+
+          .tab.inactive {
+            background: var(--tab-bg);
+            color: var(--tab-inactive-fg);
+            border-top-color: transparent;
+          }
+
+          .breadcrumbs {
+            display: flex;
+            align-items: center;
+            gap: 7px;
+            padding: 0 18px;
+            color: var(--gutter-fg);
+            border-bottom: 1px solid color-mix(in srgb, var(--tab-border), transparent 20%);
+            font-size: 12px;
+          }
+
+          .editor {
+            position: relative;
+            overflow: hidden;
+            background: var(--editor-bg);
+            color: var(--editor-fg);
+            font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+            font-size: 18px;
+            line-height: 1.52;
+          }
+
+          .active-line {
+            position: absolute;
+            left: 0;
+            right: 0;
+            top: 0;
+            height: 28px;
+            background: var(--editor-line);
+            will-change: transform;
+          }
 
-It runs for 11 seconds at 1920×1080. Paste this into your composition:
+          .code {
+            position: relative;
+            padding: 20px 36px 18px 0;
+          }
 
-```html index.html
+          .line {
+            height: 28px;
+            display: grid;
+            grid-template-columns: 72px 1fr;
+            align-items: center;
+          }
+
+          .line-number {
+            padding-right: 18px;
+            color: var(--gutter-fg);
+            text-align: right;
+            user-select: none;
+          }
+
+          .line.is-active .line-number {
+            color: var(--gutter-active-fg);
+          }
+
+          .line-code {
+            white-space: pre;
+          }
+
+          .char {
+            opacity: 0;
+          }
+
+          .tok-comment {
+            color: var(--token-comment);
+          }
+          .tok-keyword {
+            color: var(--token-keyword);
+          }
+          .tok-function {
+            color: var(--token-function);
+          }
+          .tok-string {
+            color: var(--token-string);
+          }
+          .tok-number {
+            color: var(--token-number);
+          }
+          .tok-variable {
+            color: var(--token-variable);
+          }
+          .tok-parameter {
+            color: var(--token-parameter);
+          }
+          .tok-operator {
+            color: var(--token-operator);
+          }
+          .tok-punctuation {
+            color: var(--token-punctuation);
+          }
+          .tok-class-name {
+            color: var(--token-class-name);
+          }
+
+          .caret {
+            position: absolute;
+            left: 0;
+            top: 0;
+            z-index: 3;
+            display: block;
+            width: 2px;
+            height: 22px;
+            background: var(--editor-fg);
+            pointer-events: none;
+            will-change: transform, opacity;
+          }
+
+          .terminal {
+            display: grid;
+            grid-template-rows: 32px 1fr;
+            background: var(--panel-bg);
+            border-top: 1px solid var(--panel-border);
+            color: var(--editor-fg);
+            font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+            font-size: 14px;
+          }
+
+          .panel-tabs {
+            display: flex;
+            align-items: center;
+            gap: 22px;
+            padding: 0 18px;
+            border-bottom: 1px solid var(--panel-border);
+            color: var(--gutter-fg);
+            font-family:
+              Inter,
+              -apple-system,
+              BlinkMacSystemFont,
+              "Segoe UI",
+              sans-serif;
+            font-size: 12px;
+            text-transform: uppercase;
+          }
+
+          .panel-tabs .active {
+            color: var(--editor-fg);
+            border-bottom: 1px solid var(--activity-active);
+            height: 32px;
+            display: flex;
+            align-items: center;
+          }
+
+          .terminal-body {
+            padding: 12px 20px;
+            color: var(--editor-fg);
+            line-height: 1.8;
+          }
+
+          .prompt {
+            color: var(--token-function);
+          }
+
+          .statusbar {
+            grid-column: 1 / -1;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            background: var(--status-bg);
+            color: var(--status-fg);
+            border-top: 1px solid var(--status-border);
+            font-size: 12px;
+          }
+
+          .status-left,
+          .status-right {
+            display: flex;
+            align-items: center;
+            gap: 18px;
+            padding: 0 12px;
+          }
+
+          .remote {
+            align-self: stretch;
+            display: flex;
+            align-items: center;
+            padding: 0 12px;
+            margin-left: -12px;
+            background: var(--status-remote-bg, var(--activity-active));
+            color: var(--status-remote-fg, #ffffff);
+          }
+
+          svg {
+            display: block;
+          }
+        </style>
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (() => {
+            const codeLines = [
+              [{ text: "# A small functional toolkit", token: "comment" }],
+              [
+                { text: "def", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "pluck_deep", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "key", token: "parameter" },
+                { text: "):", token: "punctuation" },
+              ],
+              [
+                { text: "    ", token: "plain" },
+                { text: "return", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "obj", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "reduce", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "acc", token: "parameter" },
+                { text: ", ", token: "punctuation" },
+                { text: "k", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "acc", token: "variable" },
+                { text: "[", token: "punctuation" },
+                { text: "k", token: "variable" },
+                { text: "]", token: "punctuation" },
+                { text: ", ", token: "punctuation" },
+                { text: "key", token: "variable" },
+                { text: ".split", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "'.'", token: "string" },
+                { text: "), ", token: "punctuation" },
+                { text: "obj", token: "variable" },
+                { text: ")", token: "punctuation" },
+              ],
+              [],
+              [
+                { text: "def", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "compose", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "*", token: "operator" },
+                { text: "fns", token: "parameter" },
+                { text: "):", token: "punctuation" },
+              ],
+              [
+                { text: "    ", token: "plain" },
+                { text: "return", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "res", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "reduce", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "acc", token: "parameter" },
+                { text: ", ", token: "punctuation" },
+                { text: "fn", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "fn", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "acc", token: "variable" },
+                { text: "), ", token: "punctuation" },
+                { text: "fns", token: "variable" },
+                { text: ", ", token: "punctuation" },
+                { text: "res", token: "variable" },
+                { text: ")", token: "punctuation" },
+              ],
+              [],
+              [
+                { text: "def", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "unfold", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "f", token: "parameter" },
+                { text: ", ", token: "punctuation" },
+                { text: "seed", token: "parameter" },
+                { text: "):", token: "punctuation" },
+              ],
+              [
+                { text: "    ", token: "plain" },
+                { text: '"""Build a list by repeatedly applying f to a seed."""', token: "string" },
+              ],
+              [
+                { text: "    acc", token: "variable" },
+                { text: " = ", token: "operator" },
+                { text: "[]", token: "punctuation" },
+              ],
+              [
+                { text: "    while", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "True", token: "className" },
+                { text: ":", token: "punctuation" },
+              ],
+              [
+                { text: "        result", token: "variable" },
+                { text: " = ", token: "operator" },
+                { text: "f", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "seed", token: "variable" },
+                { text: ")", token: "punctuation" },
+              ],
+              [
+                { text: "        if", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "result", token: "variable" },
+                { text: " is ", token: "keyword" },
+                { text: "None", token: "className" },
+                { text: ":", token: "punctuation" },
+              ],
+              [
+                { text: "            return", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "acc", token: "variable" },
+              ],
+              [
+                { text: "        acc", token: "variable" },
+                { text: ".append", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "result", token: "variable" },
+                { text: "[", token: "punctuation" },
+                { text: "0", token: "number" },
+                { text: "])", token: "punctuation" },
+              ],
+              [
+                { text: "        seed", token: "variable" },
+                { text: " = ", token: "operator" },
+                { text: "result", token: "variable" },
+                { text: "[", token: "punctuation" },
+                { text: "1", token: "number" },
+                { text: "]", token: "punctuation" },
+              ],
+              [],
+            ];
+
+            const fallback = {
+              "activityBar.background": "#181818",
+              "activityBar.foreground": "#d7d7d7",
+              "activityBar.inactiveForeground": "#868686",
+              "activityBar.activeBorder": "#0078d4",
+              "sideBar.background": "#181818",
+              "sideBar.foreground": "#cccccc",
+              "sideBar.border": "#2b2b2b",
+              "tab.activeBackground": "#1f1f1f",
+              "tab.activeForeground": "#ffffff",
+              "tab.inactiveBackground": "#181818",
+              "tab.inactiveForeground": "#9d9d9d",
+              "tab.border": "#2b2b2b",
+              "editor.background": "#1f1f1f",
+              "editor.foreground": "#cccccc",
+              "editor.lineHighlightBackground": "#ffffff0a",
+              "editorLineNumber.foreground": "#6e7681",
+              "editorLineNumber.activeForeground": "#cccccc",
+              "panel.background": "#181818",
+              "panel.border": "#2b2b2b",
+              "statusBar.background": "#181818",
+              "statusBar.foreground": "#cccccc",
+              "statusBar.border": "#2b2b2b",
+              "titleBar.activeBackground": "#181818",
+              "titleBar.activeForeground": "#cccccc",
+            };
+
+            function color(theme, key) {
+              return theme.colors[key] || fallback[key] || theme.colors.foreground || "#cccccc";
+            }
+
+            function solarizedGrey(theme) {
+              return (
+                theme.colors["tab.inactiveForeground"] ||
+                theme.colors["editor.foreground"] ||
+                "#586E75"
+              );
+            }
+
+            function setVar(root, name, value) {
+              root.style.setProperty(name, value);
+            }
+
+            function applyTheme(root, theme) {
+              const solarizedUiGrey = theme.id === "solarized-light" ? solarizedGrey(theme) : null;
+              setVar(root, "--activity-bg", color(theme, "activityBar.background"));
+              setVar(
+                root,
+                "--activity-fg",
+                solarizedUiGrey || color(theme, "activityBar.foreground"),
+              );
+              setVar(
+                root,
+                "--activity-muted",
+                solarizedUiGrey || color(theme, "activityBar.inactiveForeground"),
+              );
+              setVar(root, "--activity-active", color(theme, "activityBar.activeBorder"));
+              setVar(root, "--sidebar-bg", color(theme, "sideBar.background"));
+              setVar(root, "--sidebar-fg", solarizedUiGrey || color(theme, "sideBar.foreground"));
+              setVar(root, "--sidebar-border", color(theme, "sideBar.border"));
+              setVar(root, "--tab-bg", color(theme, "tab.inactiveBackground"));
+              setVar(root, "--tab-active-bg", color(theme, "tab.activeBackground"));
+              setVar(
+                root,
+                "--tab-active-fg",
+                solarizedUiGrey || color(theme, "tab.activeForeground"),
+              );
+              setVar(
+                root,
+                "--tab-inactive-fg",
+                solarizedUiGrey || color(theme, "tab.inactiveForeground"),
+              );
+              setVar(root, "--tab-border", color(theme, "tab.border"));
+              setVar(root, "--editor-bg", color(theme, "editor.background"));
+              setVar(root, "--editor-fg", color(theme, "editor.foreground"));
+              setVar(root, "--editor-line", color(theme, "editor.lineHighlightBackground"));
+              setVar(root, "--gutter-fg", color(theme, "editorLineNumber.foreground"));
+              setVar(root, "--gutter-active-fg", color(theme, "editorLineNumber.activeForeground"));
+              setVar(root, "--panel-bg", color(theme, "panel.background"));
+              setVar(root, "--panel-border", color(theme, "panel.border"));
+              setVar(root, "--status-bg", color(theme, "statusBar.background"));
+              setVar(root, "--status-fg", color(theme, "statusBar.foreground"));
+              setVar(root, "--status-border", color(theme, "statusBar.border"));
+              setVar(root, "--status-remote-bg", color(theme, "statusBarItem.remoteBackground"));
+              setVar(
+                root,
+                "--status-remote-fg",
+                solarizedUiGrey || color(theme, "statusBarItem.remoteForeground"),
+              );
+              setVar(root, "--title-bg", color(theme, "titleBar.activeBackground"));
+              setVar(
+                root,
+                "--title-fg",
+                solarizedUiGrey || color(theme, "titleBar.activeForeground"),
+              );
+              setVar(root, "--token-comment", theme.tokens.comment);
+              setVar(root, "--token-keyword", theme.tokens.keyword);
+              setVar(root, "--token-function", theme.tokens.function);
+              setVar(root, "--token-string", theme.tokens.string);
+              setVar(root, "--token-number", theme.tokens.number);
+              setVar(root, "--token-variable", theme.tokens.variable);
+              setVar(root, "--token-parameter", theme.tokens.parameter);
+              setVar(root, "--token-operator", theme.tokens.operator);
+              setVar(root, "--token-punctuation", theme.tokens.punctuation);
+              setVar(root, "--token-class-name", theme.tokens.className);
+            }
+
+            function renderCode(root) {
+              const code = root.querySelector(".code");
+              codeLines.forEach((segments, index) => {
+                const line = document.createElement("div");
+                line.className = "line";
+                line.dataset.lineIndex = String(index);
+
+                const lineNumber = document.createElement("span");
+                lineNumber.className = "line-number";
+                lineNumber.textContent = String(index + 1);
+                line.appendChild(lineNumber);
+
+                const lineCode = document.createElement("span");
+                lineCode.className = "line-code";
+                segments.forEach((segment) => {
+                  [...segment.text].forEach((char) => {
+                    const span = document.createElement("span");
+                    span.className =
+                      segment.token === "plain"
+                        ? "char"
+                        : "char tok-" +
+                          segment.token.replace(/[A-Z]/g, (match) => "-" + match.toLowerCase());
+                    span.dataset.lineIndex = String(index);
+                    span.textContent = char;
+                    lineCode.appendChild(span);
+                  });
+                });
+                line.appendChild(lineCode);
+                code.appendChild(line);
+              });
+
+              const caret = document.createElement("span");
+              caret.className = "caret";
+              root.querySelector(".editor").appendChild(caret);
+            }
+
+            function caretPointForElement(editor, el) {
+              const editorBox = editor.getBoundingClientRect();
+              const charBox = el.getBoundingClientRect();
+              return {
+                x: charBox.right - editorBox.left + 2,
+                y: charBox.top - editorBox.top + 3,
+              };
+            }
+
+            function caretPointForLineStart(editor, line) {
+              const editorBox = editor.getBoundingClientRect();
+              const lineBox = line.getBoundingClientRect();
+              const codeBox = line.querySelector(".line-code").getBoundingClientRect();
+              return {
+                x: codeBox.left - editorBox.left,
+                y: lineBox.top - editorBox.top + 3,
+              };
+            }
+
+            function lineHighlightY(editor, line) {
+              const editorBox = editor.getBoundingClientRect();
+              const lineBox = line.getBoundingClientRect();
+              return lineBox.top - editorBox.top;
+            }
+
+            function buildTimeline(root, compositionId) {
+              const tl = gsap.timeline({ paused: true });
+              const editor = root.querySelector(".editor");
+              const caret = root.querySelector(".caret");
+              const activeLine = root.querySelector(".active-line");
+              const lineEls = gsap.utils.toArray(root.querySelectorAll(".line"));
+              const lineStartTimes = [];
+              const charSchedule = [];
+              let cursorTime = 0.95;
+
+              lineEls.forEach((line, lineIndex) => {
+                const lineChars = gsap.utils.toArray(line.querySelectorAll(".char"));
+                lineStartTimes[lineIndex] = cursorTime;
+                lineChars.forEach((char, charIndex) => {
+                  charSchedule.push({ char, time: cursorTime + charIndex * 0.012 });
+                });
+                cursorTime += Math.max(lineChars.length * 0.012, 0.08) + 0.045;
+              });
+
+              gsap.set(activeLine, { y: lineHighlightY(editor, lineEls[0]) });
+              gsap.set(caret, caretPointForLineStart(editor, lineEls[0]));
+
+              tl.from(
+                root.querySelector(".header"),
+                { y: 24, opacity: 0, duration: 0.45, ease: "power3.out" },
+                0,
+              );
+              tl.from(
+                root.querySelector(".workbench"),
+                { y: 42, opacity: 0, scale: 0.986, duration: 0.58, ease: "power3.out" },
+                0.1,
+              );
+              tl.from(activeLine, { opacity: 0, duration: 0.22, ease: "power2.out" }, 0.74);
+              lineStartTimes.forEach((time, lineIndex) => {
+                const line = lineEls[lineIndex];
+                tl.set(activeLine, { y: lineHighlightY(editor, line) }, time);
+                tl.set(caret, caretPointForLineStart(editor, line), time);
+                tl.call(
+                  () => {
+                    lineEls.forEach((item) => item.classList.toggle("is-active", item === line));
+                  },
+                  [],
+                  time,
+                );
+              });
+              charSchedule.forEach(({ char, time }) => {
+                tl.set(char, { opacity: 1 }, time);
+                tl.set(caret, caretPointForElement(editor, char), time + 0.002);
+              });
+              tl.to(
+                root.querySelector(".caret"),
+                { opacity: 0, duration: 0.34, repeat: 25, yoyo: true, ease: "steps(1)" },
+                0.95,
+              );
+              tl.from(
+                root.querySelector(".terminal"),
+                { y: 140, opacity: 0, duration: 0.56, ease: "power3.out" },
+                7.55,
+              );
+              tl.from(
+                root.querySelector(".terminal-body").children,
+                { opacity: 0, y: 8, duration: 0.24, stagger: 0.16, ease: "power2.out" },
+                8.05,
+              );
+              tl.to(
+                root.querySelector(".workbench"),
+                { rotateY: -10.5, z: 74, duration: 0.72, ease: "power2.inOut" },
+                9.35,
+              );
+              tl.to(
+                root.querySelector(".workbench"),
+                { rotateY: 0, z: 0, duration: 0.62, ease: "power2.inOut" },
+                10.08,
+              );
+
+              window.__timelines = window.__timelines || {};
+              window.__timelines[compositionId] = tl;
+
+              const previewTime = new URLSearchParams(window.location.search).get("t");
+              if (previewTime !== null) {
+                tl.time(Number(previewTime));
+              }
+            }
+
+            window.createVSCodeThemeComposition = (compositionId, themeOrId) => {
+              const root =
+                document.querySelector(
+                  '[data-composition-id="' + compositionId + '"] .vscode-theme-scene',
+                ) ||
+                document.querySelector(
+                  '.vscode-theme-scene[data-composition-id="' + compositionId + '"]',
+                ) ||
+                document.querySelector('[data-composition-id="' + compositionId + '"]');
+              const theme =
+                typeof themeOrId === "string"
+                  ? window.VSCODE_THEME_REGISTRY.find((item) => item.id === themeOrId)
+                  : themeOrId;
+              if (!root || !theme) return;
+              root.querySelector(".theme-label").textContent = theme.label;
+              root.querySelector(".theme-source").textContent = theme.sourceFile;
+              applyTheme(root, theme);
+              renderCode(root);
+              buildTimeline(root, compositionId);
+            };
+          })();
+        </script>
+        <script>
+          window.__timelines = window.__timelines || {};
+          window.__timelines["vscode-dark-2026"] =
+            window.__timelines["vscode-dark-2026"] || gsap.timeline({ paused: true });
+          window.createVSCodeThemeComposition("vscode-dark-2026", {
+            id: "dark-2026",
+            label: "Dark 2026",
+            sourceFile: "2026-dark.json",
+            uiTheme: "vs-dark",
+            colors: {
+              "activityBar.activeBorder": "#bfbfbf",
+              "activityBar.background": "#191A1B",
+              "activityBar.border": "#2A2B2CFF",
+              "activityBar.foreground": "#bfbfbf",
+              "activityBar.inactiveForeground": "#8C8C8C",
+              "editor.background": "#121314",
+              "editor.foreground": "#BBBEBF",
+              "editor.lineHighlightBackground": "#242526",
+              "editor.selectionBackground": "#276782dd",
+              "editorGroup.border": "#FFFFFF17",
+              "editorGroupHeader.tabsBackground": "#191A1B",
+              "editorGroupHeader.tabsBorder": "#2A2B2CFF",
+              "editorLineNumber.activeForeground": "#BBBEBF",
+              "editorLineNumber.foreground": "#858889",
+              foreground: "#bfbfbf",
+              "icon.foreground": "#8C8C8C",
+              "panel.background": "#191A1B",
+              "panel.border": "#2A2B2CFF",
+              "sideBar.background": "#191A1B",
+              "sideBar.border": "#2A2B2CFF",
+              "sideBar.foreground": "#bfbfbf",
+              "sideBarSectionHeader.background": "#191A1B",
+              "sideBarSectionHeader.border": "#2A2B2CFF",
+              "sideBarSectionHeader.foreground": "#bfbfbf",
+              "sideBarTitle.foreground": "#bfbfbf",
+              "statusBar.background": "#191A1B",
+              "statusBar.border": "#2A2B2CFF",
+              "statusBar.foreground": "#8C8C8C",
+              "statusBarItem.remoteBackground": "#0078D4",
+              "statusBarItem.remoteForeground": "#FFFFFF",
+              "tab.activeBackground": "#121314",
+              "tab.activeBorder": "#121314",
+              "tab.activeBorderTop": "#3994BC",
+              "tab.activeForeground": "#bfbfbf",
+              "tab.border": "#2A2B2CFF",
+              "tab.inactiveBackground": "#191A1B",
+              "tab.inactiveForeground": "#8C8C8C",
+              "terminal.background": "#191A1B",
+              "terminal.foreground": "#CCCCCC",
+              "terminalCursor.foreground": "#bfbfbf",
+              "titleBar.activeBackground": "#191A1B",
+              "titleBar.activeForeground": "#8C8C8C",
+            },
+            tokens: {
+              comment: "#8b949e",
+              keyword: "#c9d1d9",
+              function: "#79c0ff",
+              string: "#a5d6ff",
+              number: "#79c0ff",
+              variable: "#c9d1d9",
+              parameter: "#ffa657",
+              operator: "#ff7b72",
+              punctuation: "#ffa657",
+              className: "#7ee787",
+            },
+          });
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
 <div
   data-composition-id="code-snippet-dark-2026"
   data-composition-src="compositions/code-snippet-dark-2026.html"
@@ -29,8 +1128,13 @@ It runs for 11 seconds at 1920×1080. Paste this into your composition:
 ></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.
+## Features
+
+- Full VS Code workbench recreation — activity bar, sidebar, explorer tree, editor tabs, breadcrumbs, terminal panel, status bar
+- Per-character typing animation with cursor tracking and active line highlight
+- Colors sourced from official `microsoft/vscode` built-in theme JSON
+- 3D perspective tilt at the end of the typing sequence
+- Terminal panel with mock test output
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/code-snippet-dark-modern.mdx b/docs/catalog/blocks/code-snippet-dark-modern.mdx
index 4873bc35d7..ddf5be5db0 100644
--- a/docs/catalog/blocks/code-snippet-dark-modern.mdx
+++ b/docs/catalog/blocks/code-snippet-dark-modern.mdx
@@ -3,21 +3,1116 @@ title: "Code Snippet - Dark Modern"
 description: "VS Code workbench with per-character typing animation in the Dark Modern theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-dark-modern.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-dark-modern.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/code-snippet-dark-modern.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Code Snippet - Dark Modern preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add code-snippet-dark-modern
-```
+<InstallCommand command="npx hyperframes add code-snippet-dark-modern" />
 
 That writes `compositions/code-snippet-dark-modern.html`, plus 1 supporting file under `assets/`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`code-snippet-dark-modern.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Dark Modern VS Code Theme Composition</title>
+  </head>
+  <body>
+    <template id="vscode-dark-modern-template">
+      <div
+        class="vscode-theme-scene"
+        data-composition-id="vscode-dark-modern"
+        data-width="1920"
+        data-height="1080"
+      >
+        <main class="scene-content">
+          <section class="header">
+            <div>
+              <p class="kicker">Official VS Code built-in theme</p>
+              <h1 class="title"><span class="theme-label">Dark Modern</span></h1>
+            </div>
+            <p class="source-note">
+              Typing `functional_toolkit.py` with workbench colors from
+              <span class="theme-source">dark_modern.json</span>.
+            </p>
+          </section>
+
+          <section class="workbench">
+            <div class="titlebar">
+              <div class="traffic"><span></span><span></span><span></span></div>
+              <div class="window-title">functional-toolkit - Visual Studio Code</div>
+              <div class="command-center">Search</div>
+            </div>
+
+            <aside class="activity" aria-label="Activity bar">
+              <svg class="activity-icon active" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="currentColor"
+                  d="M4 4h7v7H4V4Zm9 0h7v7h-7V4ZM4 13h7v7H4v-7Zm9 0h7v7h-7v-7Z"
+                />
+              </svg>
+              <svg class="activity-icon" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  d="m21 21-5.2-5.2M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Z"
+                />
+              </svg>
+              <svg class="activity-icon" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  d="M8 18 3 12l5-6m8 12 5-6-5-6"
+                />
+              </svg>
+              <svg class="activity-icon" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  d="M12 3v18m0-18 6 6m-6-6L6 9m6 12 6-6m-6 6-6-6"
+                />
+              </svg>
+            </aside>
+
+            <aside class="sidebar">
+              <div class="sidebar-title">Explorer</div>
+              <div class="section-title">⌄ Functional Toolkit</div>
+              <div class="tree">
+                <div class="tree-row">⌄ src</div>
+                <div class="tree-row child selected">◇ functional_toolkit.py</div>
+                <div class="tree-row child">◇ test_toolkit.py</div>
+                <div class="tree-row">◇ pyproject.toml</div>
+                <div class="tree-row">◇ README.md</div>
+              </div>
+            </aside>
+
+            <section class="editor-area">
+              <div class="tabs">
+                <div class="tab">◇ functional_toolkit.py</div>
+                <div class="tab inactive">README.md</div>
+              </div>
+              <div class="breadcrumbs">functional-toolkit › src › functional_toolkit.py</div>
+              <div class="editor">
+                <div class="active-line"></div>
+                <div class="code"></div>
+              </div>
+              <div class="terminal">
+                <div class="panel-tabs">
+                  <span class="active">Terminal</span><span>Problems</span><span>Output</span>
+                </div>
+                <div class="terminal-body">
+                  <div><span class="prompt">functional-toolkit %</span> python -m pytest</div>
+                  <div>collected 3 items</div>
+                  <div>tests/test_toolkit.py ... <span class="tok-comment">passed</span></div>
+                </div>
+              </div>
+            </section>
+
+            <footer class="statusbar">
+              <div class="status-left">
+                <span class="remote">main</span>
+                <span>0 errors</span>
+                <span>0 warnings</span>
+              </div>
+              <div class="status-right">
+                <span>Ln 17, Col 1</span>
+                <span>Spaces: 4</span>
+                <span>UTF-8</span>
+                <span>Python 3.12</span>
+              </div>
+            </footer>
+          </section>
+        </main>
+        <style>
+          * {
+            box-sizing: border-box;
+            letter-spacing: 0;
+          }
+
+          html,
+          body {
+            margin: 0;
+            width: 1920px;
+            height: 1080px;
+            overflow: hidden;
+            background: #000000;
+            font-family:
+              Inter,
+              -apple-system,
+              BlinkMacSystemFont,
+              "Segoe UI",
+              sans-serif;
+          }
+
+          .vscode-theme-scene {
+            --activity-bg: #181818;
+            --activity-fg: #d7d7d7;
+            --activity-muted: #868686;
+            --activity-active: #0078d4;
+            --sidebar-bg: #181818;
+            --sidebar-fg: #cccccc;
+            --sidebar-border: #2b2b2b;
+            --tab-bg: #181818;
+            --tab-active-bg: #1f1f1f;
+            --tab-active-fg: #ffffff;
+            --tab-inactive-fg: #9d9d9d;
+            --tab-border: #2b2b2b;
+            --editor-bg: #1f1f1f;
+            --editor-fg: #cccccc;
+            --editor-line: rgba(255, 255, 255, 0.04);
+            --gutter-fg: #6e7681;
+            --gutter-active-fg: #cccccc;
+            --panel-bg: #181818;
+            --panel-border: #2b2b2b;
+            --status-bg: #181818;
+            --status-fg: #cccccc;
+            --status-border: #2b2b2b;
+            --title-bg: #181818;
+            --title-fg: #cccccc;
+            --token-comment: #6a9955;
+            --token-keyword: #c586c0;
+            --token-function: #dcdcaa;
+            --token-string: #ce9178;
+            --token-number: #b5cea8;
+            --token-variable: #9cdcfe;
+            --token-parameter: #9cdcfe;
+            --token-operator: #d4d4d4;
+            --token-punctuation: #d4d4d4;
+            --token-class-name: #4ec9b0;
+            position: relative;
+            width: 1920px;
+            height: 1080px;
+            overflow: hidden;
+            background:
+              linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.32)),
+              url("../assets/background.jpeg") center / cover no-repeat;
+            color: var(--editor-fg);
+          }
+
+          .scene-content {
+            position: relative;
+            z-index: 1;
+            width: 100%;
+            height: 100%;
+            padding: 54px 70px 92px;
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+            perspective: 2200px;
+            perspective-origin: 56% 52%;
+          }
+
+          .header {
+            display: flex;
+            align-items: end;
+            justify-content: space-between;
+            min-height: 66px;
+            text-shadow:
+              0 2px 12px rgba(0, 0, 0, 0.42),
+              0 14px 34px rgba(0, 0, 0, 0.32);
+          }
+
+          .kicker {
+            margin: 0 0 7px;
+            color: var(--gutter-fg);
+            font-size: 15px;
+            font-weight: 650;
+            text-transform: uppercase;
+            text-shadow:
+              0 2px 8px rgba(0, 0, 0, 0.48),
+              0 10px 26px rgba(0, 0, 0, 0.36);
+          }
+
+          .title {
+            margin: 0;
+            color: var(--editor-fg);
+            font-size: 44px;
+            line-height: 1;
+            font-weight: 760;
+          }
+
+          .source-note {
+            width: 510px;
+            color: var(--gutter-fg);
+            font-size: 16px;
+            line-height: 1.35;
+            text-align: right;
+            text-shadow:
+              0 2px 10px rgba(0, 0, 0, 0.46),
+              0 12px 30px rgba(0, 0, 0, 0.34);
+          }
+
+          .workbench {
+            height: 824px;
+            display: grid;
+            grid-template-columns: 54px 290px 1fr;
+            grid-template-rows: 36px 1fr 26px;
+            overflow: hidden;
+            border: 1px solid var(--sidebar-border);
+            border-radius: 8px;
+            background: var(--editor-bg);
+            box-shadow: 0 34px 90px rgba(0, 0, 0, 0.42);
+            transform: translateZ(0);
+            transform-origin: 82% 50%;
+            transform-style: preserve-3d;
+            will-change: transform;
+          }
+
+          .titlebar {
+            grid-column: 1 / -1;
+            display: grid;
+            grid-template-columns: 120px 1fr 210px;
+            align-items: center;
+            background: var(--title-bg);
+            color: var(--title-fg);
+            border-bottom: 1px solid var(--tab-border);
+            font-size: 12px;
+          }
+
+          .traffic {
+            display: flex;
+            gap: 8px;
+            padding-left: 18px;
+          }
+
+          .traffic span {
+            width: 12px;
+            height: 12px;
+            border-radius: 999px;
+          }
+
+          .traffic span:nth-child(1) {
+            background: #ff5f57;
+          }
+          .traffic span:nth-child(2) {
+            background: #ffbd2e;
+          }
+          .traffic span:nth-child(3) {
+            background: #28c840;
+          }
+
+          .window-title {
+            justify-self: center;
+            opacity: 0.84;
+          }
+
+          .command-center {
+            justify-self: end;
+            width: 176px;
+            height: 22px;
+            margin-right: 16px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border: 1px solid color-mix(in srgb, var(--title-fg), transparent 78%);
+            border-radius: 5px;
+            color: color-mix(in srgb, var(--title-fg), transparent 18%);
+          }
+
+          .activity {
+            grid-row: 2 / 3;
+            background: var(--activity-bg);
+            border-right: 1px solid var(--sidebar-border);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 10px 0;
+            gap: 18px;
+          }
+
+          .activity-icon {
+            width: 28px;
+            height: 28px;
+            color: var(--activity-muted);
+          }
+
+          .activity-icon.active {
+            color: var(--activity-fg);
+            border-left: 2px solid var(--activity-active);
+            padding-left: 4px;
+          }
+
+          .sidebar {
+            grid-row: 2 / 3;
+            background: var(--sidebar-bg);
+            color: var(--sidebar-fg);
+            border-right: 1px solid var(--sidebar-border);
+            display: flex;
+            flex-direction: column;
+            min-width: 0;
+          }
+
+          .sidebar-title {
+            height: 38px;
+            display: flex;
+            align-items: center;
+            padding: 0 20px;
+            color: var(--sidebar-fg);
+            font-size: 11px;
+            text-transform: uppercase;
+          }
+
+          .section-title {
+            height: 24px;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            padding: 0 14px;
+            background: color-mix(in srgb, var(--sidebar-bg), var(--sidebar-fg) 5%);
+            border-top: 1px solid var(--sidebar-border);
+            border-bottom: 1px solid var(--sidebar-border);
+            color: var(--sidebar-fg);
+            font-size: 11px;
+            font-weight: 700;
+          }
+
+          .tree {
+            padding: 8px 0;
+            font-size: 13px;
+            line-height: 24px;
+          }
+
+          .tree-row {
+            height: 24px;
+            display: flex;
+            align-items: center;
+            gap: 7px;
+            padding: 0 10px 0 18px;
+            color: color-mix(in srgb, var(--sidebar-fg), transparent 8%);
+            white-space: nowrap;
+          }
+
+          .tree-row.child {
+            padding-left: 34px;
+          }
+
+          .tree-row.selected {
+            background: color-mix(in srgb, var(--sidebar-fg), transparent 88%);
+            color: var(--sidebar-fg);
+          }
+
+          .editor-area {
+            grid-row: 2 / 3;
+            display: grid;
+            grid-template-rows: 36px 30px 1fr 138px;
+            min-width: 0;
+            background: var(--editor-bg);
+          }
+
+          .tabs {
+            display: flex;
+            background: var(--tab-bg);
+            border-bottom: 1px solid var(--tab-border);
+          }
+
+          .tab {
+            width: 205px;
+            height: 36px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 0 13px;
+            border-right: 1px solid var(--tab-border);
+            background: var(--tab-active-bg);
+            color: var(--tab-active-fg);
+            border-top: 2px solid var(--activity-active);
+            font-size: 13px;
+          }
+
+          .tab.inactive {
+            background: var(--tab-bg);
+            color: var(--tab-inactive-fg);
+            border-top-color: transparent;
+          }
+
+          .breadcrumbs {
+            display: flex;
+            align-items: center;
+            gap: 7px;
+            padding: 0 18px;
+            color: var(--gutter-fg);
+            border-bottom: 1px solid color-mix(in srgb, var(--tab-border), transparent 20%);
+            font-size: 12px;
+          }
+
+          .editor {
+            position: relative;
+            overflow: hidden;
+            background: var(--editor-bg);
+            color: var(--editor-fg);
+            font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+            font-size: 18px;
+            line-height: 1.52;
+          }
+
+          .active-line {
+            position: absolute;
+            left: 0;
+            right: 0;
+            top: 0;
+            height: 28px;
+            background: var(--editor-line);
+            will-change: transform;
+          }
 
-It runs for 11 seconds at 1920×1080. Paste this into your composition:
+          .code {
+            position: relative;
+            padding: 20px 36px 18px 0;
+          }
 
-```html index.html
+          .line {
+            height: 28px;
+            display: grid;
+            grid-template-columns: 72px 1fr;
+            align-items: center;
+          }
+
+          .line-number {
+            padding-right: 18px;
+            color: var(--gutter-fg);
+            text-align: right;
+            user-select: none;
+          }
+
+          .line.is-active .line-number {
+            color: var(--gutter-active-fg);
+          }
+
+          .line-code {
+            white-space: pre;
+          }
+
+          .char {
+            opacity: 0;
+          }
+
+          .tok-comment {
+            color: var(--token-comment);
+          }
+          .tok-keyword {
+            color: var(--token-keyword);
+          }
+          .tok-function {
+            color: var(--token-function);
+          }
+          .tok-string {
+            color: var(--token-string);
+          }
+          .tok-number {
+            color: var(--token-number);
+          }
+          .tok-variable {
+            color: var(--token-variable);
+          }
+          .tok-parameter {
+            color: var(--token-parameter);
+          }
+          .tok-operator {
+            color: var(--token-operator);
+          }
+          .tok-punctuation {
+            color: var(--token-punctuation);
+          }
+          .tok-class-name {
+            color: var(--token-class-name);
+          }
+
+          .caret {
+            position: absolute;
+            left: 0;
+            top: 0;
+            z-index: 3;
+            display: block;
+            width: 2px;
+            height: 22px;
+            background: var(--editor-fg);
+            pointer-events: none;
+            will-change: transform, opacity;
+          }
+
+          .terminal {
+            display: grid;
+            grid-template-rows: 32px 1fr;
+            background: var(--panel-bg);
+            border-top: 1px solid var(--panel-border);
+            color: var(--editor-fg);
+            font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+            font-size: 14px;
+          }
+
+          .panel-tabs {
+            display: flex;
+            align-items: center;
+            gap: 22px;
+            padding: 0 18px;
+            border-bottom: 1px solid var(--panel-border);
+            color: var(--gutter-fg);
+            font-family:
+              Inter,
+              -apple-system,
+              BlinkMacSystemFont,
+              "Segoe UI",
+              sans-serif;
+            font-size: 12px;
+            text-transform: uppercase;
+          }
+
+          .panel-tabs .active {
+            color: var(--editor-fg);
+            border-bottom: 1px solid var(--activity-active);
+            height: 32px;
+            display: flex;
+            align-items: center;
+          }
+
+          .terminal-body {
+            padding: 12px 20px;
+            color: var(--editor-fg);
+            line-height: 1.8;
+          }
+
+          .prompt {
+            color: var(--token-function);
+          }
+
+          .statusbar {
+            grid-column: 1 / -1;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            background: var(--status-bg);
+            color: var(--status-fg);
+            border-top: 1px solid var(--status-border);
+            font-size: 12px;
+          }
+
+          .status-left,
+          .status-right {
+            display: flex;
+            align-items: center;
+            gap: 18px;
+            padding: 0 12px;
+          }
+
+          .remote {
+            align-self: stretch;
+            display: flex;
+            align-items: center;
+            padding: 0 12px;
+            margin-left: -12px;
+            background: var(--status-remote-bg, var(--activity-active));
+            color: var(--status-remote-fg, #ffffff);
+          }
+
+          svg {
+            display: block;
+          }
+        </style>
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (() => {
+            const codeLines = [
+              [{ text: "# A small functional toolkit", token: "comment" }],
+              [
+                { text: "def", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "pluck_deep", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "key", token: "parameter" },
+                { text: "):", token: "punctuation" },
+              ],
+              [
+                { text: "    ", token: "plain" },
+                { text: "return", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "obj", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "reduce", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "acc", token: "parameter" },
+                { text: ", ", token: "punctuation" },
+                { text: "k", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "acc", token: "variable" },
+                { text: "[", token: "punctuation" },
+                { text: "k", token: "variable" },
+                { text: "]", token: "punctuation" },
+                { text: ", ", token: "punctuation" },
+                { text: "key", token: "variable" },
+                { text: ".split", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "'.'", token: "string" },
+                { text: "), ", token: "punctuation" },
+                { text: "obj", token: "variable" },
+                { text: ")", token: "punctuation" },
+              ],
+              [],
+              [
+                { text: "def", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "compose", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "*", token: "operator" },
+                { text: "fns", token: "parameter" },
+                { text: "):", token: "punctuation" },
+              ],
+              [
+                { text: "    ", token: "plain" },
+                { text: "return", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "res", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "reduce", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "acc", token: "parameter" },
+                { text: ", ", token: "punctuation" },
+                { text: "fn", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "fn", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "acc", token: "variable" },
+                { text: "), ", token: "punctuation" },
+                { text: "fns", token: "variable" },
+                { text: ", ", token: "punctuation" },
+                { text: "res", token: "variable" },
+                { text: ")", token: "punctuation" },
+              ],
+              [],
+              [
+                { text: "def", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "unfold", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "f", token: "parameter" },
+                { text: ", ", token: "punctuation" },
+                { text: "seed", token: "parameter" },
+                { text: "):", token: "punctuation" },
+              ],
+              [
+                { text: "    ", token: "plain" },
+                { text: '"""Build a list by repeatedly applying f to a seed."""', token: "string" },
+              ],
+              [
+                { text: "    acc", token: "variable" },
+                { text: " = ", token: "operator" },
+                { text: "[]", token: "punctuation" },
+              ],
+              [
+                { text: "    while", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "True", token: "className" },
+                { text: ":", token: "punctuation" },
+              ],
+              [
+                { text: "        result", token: "variable" },
+                { text: " = ", token: "operator" },
+                { text: "f", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "seed", token: "variable" },
+                { text: ")", token: "punctuation" },
+              ],
+              [
+                { text: "        if", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "result", token: "variable" },
+                { text: " is ", token: "keyword" },
+                { text: "None", token: "className" },
+                { text: ":", token: "punctuation" },
+              ],
+              [
+                { text: "            return", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "acc", token: "variable" },
+              ],
+              [
+                { text: "        acc", token: "variable" },
+                { text: ".append", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "result", token: "variable" },
+                { text: "[", token: "punctuation" },
+                { text: "0", token: "number" },
+                { text: "])", token: "punctuation" },
+              ],
+              [
+                { text: "        seed", token: "variable" },
+                { text: " = ", token: "operator" },
+                { text: "result", token: "variable" },
+                { text: "[", token: "punctuation" },
+                { text: "1", token: "number" },
+                { text: "]", token: "punctuation" },
+              ],
+              [],
+            ];
+
+            const fallback = {
+              "activityBar.background": "#181818",
+              "activityBar.foreground": "#d7d7d7",
+              "activityBar.inactiveForeground": "#868686",
+              "activityBar.activeBorder": "#0078d4",
+              "sideBar.background": "#181818",
+              "sideBar.foreground": "#cccccc",
+              "sideBar.border": "#2b2b2b",
+              "tab.activeBackground": "#1f1f1f",
+              "tab.activeForeground": "#ffffff",
+              "tab.inactiveBackground": "#181818",
+              "tab.inactiveForeground": "#9d9d9d",
+              "tab.border": "#2b2b2b",
+              "editor.background": "#1f1f1f",
+              "editor.foreground": "#cccccc",
+              "editor.lineHighlightBackground": "#ffffff0a",
+              "editorLineNumber.foreground": "#6e7681",
+              "editorLineNumber.activeForeground": "#cccccc",
+              "panel.background": "#181818",
+              "panel.border": "#2b2b2b",
+              "statusBar.background": "#181818",
+              "statusBar.foreground": "#cccccc",
+              "statusBar.border": "#2b2b2b",
+              "titleBar.activeBackground": "#181818",
+              "titleBar.activeForeground": "#cccccc",
+            };
+
+            function color(theme, key) {
+              return theme.colors[key] || fallback[key] || theme.colors.foreground || "#cccccc";
+            }
+
+            function solarizedGrey(theme) {
+              return (
+                theme.colors["tab.inactiveForeground"] ||
+                theme.colors["editor.foreground"] ||
+                "#586E75"
+              );
+            }
+
+            function setVar(root, name, value) {
+              root.style.setProperty(name, value);
+            }
+
+            function applyTheme(root, theme) {
+              const solarizedUiGrey = theme.id === "solarized-light" ? solarizedGrey(theme) : null;
+              setVar(root, "--activity-bg", color(theme, "activityBar.background"));
+              setVar(
+                root,
+                "--activity-fg",
+                solarizedUiGrey || color(theme, "activityBar.foreground"),
+              );
+              setVar(
+                root,
+                "--activity-muted",
+                solarizedUiGrey || color(theme, "activityBar.inactiveForeground"),
+              );
+              setVar(root, "--activity-active", color(theme, "activityBar.activeBorder"));
+              setVar(root, "--sidebar-bg", color(theme, "sideBar.background"));
+              setVar(root, "--sidebar-fg", solarizedUiGrey || color(theme, "sideBar.foreground"));
+              setVar(root, "--sidebar-border", color(theme, "sideBar.border"));
+              setVar(root, "--tab-bg", color(theme, "tab.inactiveBackground"));
+              setVar(root, "--tab-active-bg", color(theme, "tab.activeBackground"));
+              setVar(
+                root,
+                "--tab-active-fg",
+                solarizedUiGrey || color(theme, "tab.activeForeground"),
+              );
+              setVar(
+                root,
+                "--tab-inactive-fg",
+                solarizedUiGrey || color(theme, "tab.inactiveForeground"),
+              );
+              setVar(root, "--tab-border", color(theme, "tab.border"));
+              setVar(root, "--editor-bg", color(theme, "editor.background"));
+              setVar(root, "--editor-fg", color(theme, "editor.foreground"));
+              setVar(root, "--editor-line", color(theme, "editor.lineHighlightBackground"));
+              setVar(root, "--gutter-fg", color(theme, "editorLineNumber.foreground"));
+              setVar(root, "--gutter-active-fg", color(theme, "editorLineNumber.activeForeground"));
+              setVar(root, "--panel-bg", color(theme, "panel.background"));
+              setVar(root, "--panel-border", color(theme, "panel.border"));
+              setVar(root, "--status-bg", color(theme, "statusBar.background"));
+              setVar(root, "--status-fg", color(theme, "statusBar.foreground"));
+              setVar(root, "--status-border", color(theme, "statusBar.border"));
+              setVar(root, "--status-remote-bg", color(theme, "statusBarItem.remoteBackground"));
+              setVar(
+                root,
+                "--status-remote-fg",
+                solarizedUiGrey || color(theme, "statusBarItem.remoteForeground"),
+              );
+              setVar(root, "--title-bg", color(theme, "titleBar.activeBackground"));
+              setVar(
+                root,
+                "--title-fg",
+                solarizedUiGrey || color(theme, "titleBar.activeForeground"),
+              );
+              setVar(root, "--token-comment", theme.tokens.comment);
+              setVar(root, "--token-keyword", theme.tokens.keyword);
+              setVar(root, "--token-function", theme.tokens.function);
+              setVar(root, "--token-string", theme.tokens.string);
+              setVar(root, "--token-number", theme.tokens.number);
+              setVar(root, "--token-variable", theme.tokens.variable);
+              setVar(root, "--token-parameter", theme.tokens.parameter);
+              setVar(root, "--token-operator", theme.tokens.operator);
+              setVar(root, "--token-punctuation", theme.tokens.punctuation);
+              setVar(root, "--token-class-name", theme.tokens.className);
+            }
+
+            function renderCode(root) {
+              const code = root.querySelector(".code");
+              codeLines.forEach((segments, index) => {
+                const line = document.createElement("div");
+                line.className = "line";
+                line.dataset.lineIndex = String(index);
+
+                const lineNumber = document.createElement("span");
+                lineNumber.className = "line-number";
+                lineNumber.textContent = String(index + 1);
+                line.appendChild(lineNumber);
+
+                const lineCode = document.createElement("span");
+                lineCode.className = "line-code";
+                segments.forEach((segment) => {
+                  [...segment.text].forEach((char) => {
+                    const span = document.createElement("span");
+                    span.className =
+                      segment.token === "plain"
+                        ? "char"
+                        : "char tok-" +
+                          segment.token.replace(/[A-Z]/g, (match) => "-" + match.toLowerCase());
+                    span.dataset.lineIndex = String(index);
+                    span.textContent = char;
+                    lineCode.appendChild(span);
+                  });
+                });
+                line.appendChild(lineCode);
+                code.appendChild(line);
+              });
+
+              const caret = document.createElement("span");
+              caret.className = "caret";
+              root.querySelector(".editor").appendChild(caret);
+            }
+
+            function caretPointForElement(editor, el) {
+              const editorBox = editor.getBoundingClientRect();
+              const charBox = el.getBoundingClientRect();
+              return {
+                x: charBox.right - editorBox.left + 2,
+                y: charBox.top - editorBox.top + 3,
+              };
+            }
+
+            function caretPointForLineStart(editor, line) {
+              const editorBox = editor.getBoundingClientRect();
+              const lineBox = line.getBoundingClientRect();
+              const codeBox = line.querySelector(".line-code").getBoundingClientRect();
+              return {
+                x: codeBox.left - editorBox.left,
+                y: lineBox.top - editorBox.top + 3,
+              };
+            }
+
+            function lineHighlightY(editor, line) {
+              const editorBox = editor.getBoundingClientRect();
+              const lineBox = line.getBoundingClientRect();
+              return lineBox.top - editorBox.top;
+            }
+
+            function buildTimeline(root, compositionId) {
+              const tl = gsap.timeline({ paused: true });
+              const editor = root.querySelector(".editor");
+              const caret = root.querySelector(".caret");
+              const activeLine = root.querySelector(".active-line");
+              const lineEls = gsap.utils.toArray(root.querySelectorAll(".line"));
+              const lineStartTimes = [];
+              const charSchedule = [];
+              let cursorTime = 0.95;
+
+              lineEls.forEach((line, lineIndex) => {
+                const lineChars = gsap.utils.toArray(line.querySelectorAll(".char"));
+                lineStartTimes[lineIndex] = cursorTime;
+                lineChars.forEach((char, charIndex) => {
+                  charSchedule.push({ char, time: cursorTime + charIndex * 0.012 });
+                });
+                cursorTime += Math.max(lineChars.length * 0.012, 0.08) + 0.045;
+              });
+
+              gsap.set(activeLine, { y: lineHighlightY(editor, lineEls[0]) });
+              gsap.set(caret, caretPointForLineStart(editor, lineEls[0]));
+
+              tl.from(
+                root.querySelector(".header"),
+                { y: 24, opacity: 0, duration: 0.45, ease: "power3.out" },
+                0,
+              );
+              tl.from(
+                root.querySelector(".workbench"),
+                { y: 42, opacity: 0, scale: 0.986, duration: 0.58, ease: "power3.out" },
+                0.1,
+              );
+              tl.from(activeLine, { opacity: 0, duration: 0.22, ease: "power2.out" }, 0.74);
+              lineStartTimes.forEach((time, lineIndex) => {
+                const line = lineEls[lineIndex];
+                tl.set(activeLine, { y: lineHighlightY(editor, line) }, time);
+                tl.set(caret, caretPointForLineStart(editor, line), time);
+                tl.call(
+                  () => {
+                    lineEls.forEach((item) => item.classList.toggle("is-active", item === line));
+                  },
+                  [],
+                  time,
+                );
+              });
+              charSchedule.forEach(({ char, time }) => {
+                tl.set(char, { opacity: 1 }, time);
+                tl.set(caret, caretPointForElement(editor, char), time + 0.002);
+              });
+              tl.to(
+                root.querySelector(".caret"),
+                { opacity: 0, duration: 0.34, repeat: 25, yoyo: true, ease: "steps(1)" },
+                0.95,
+              );
+              tl.from(
+                root.querySelector(".terminal"),
+                { y: 140, opacity: 0, duration: 0.56, ease: "power3.out" },
+                7.55,
+              );
+              tl.from(
+                root.querySelector(".terminal-body").children,
+                { opacity: 0, y: 8, duration: 0.24, stagger: 0.16, ease: "power2.out" },
+                8.05,
+              );
+              tl.to(
+                root.querySelector(".workbench"),
+                { rotateY: -10.5, z: 74, duration: 0.72, ease: "power2.inOut" },
+                9.35,
+              );
+              tl.to(
+                root.querySelector(".workbench"),
+                { rotateY: 0, z: 0, duration: 0.62, ease: "power2.inOut" },
+                10.08,
+              );
+
+              window.__timelines = window.__timelines || {};
+              window.__timelines[compositionId] = tl;
+
+              const previewTime = new URLSearchParams(window.location.search).get("t");
+              if (previewTime !== null) {
+                tl.time(Number(previewTime));
+              }
+            }
+
+            window.createVSCodeThemeComposition = (compositionId, themeOrId) => {
+              const root =
+                document.querySelector(
+                  '[data-composition-id="' + compositionId + '"] .vscode-theme-scene',
+                ) ||
+                document.querySelector(
+                  '.vscode-theme-scene[data-composition-id="' + compositionId + '"]',
+                ) ||
+                document.querySelector('[data-composition-id="' + compositionId + '"]');
+              const theme =
+                typeof themeOrId === "string"
+                  ? window.VSCODE_THEME_REGISTRY.find((item) => item.id === themeOrId)
+                  : themeOrId;
+              if (!root || !theme) return;
+              root.querySelector(".theme-label").textContent = theme.label;
+              root.querySelector(".theme-source").textContent = theme.sourceFile;
+              applyTheme(root, theme);
+              renderCode(root);
+              buildTimeline(root, compositionId);
+            };
+          })();
+        </script>
+        <script>
+          window.__timelines = window.__timelines || {};
+          window.__timelines["vscode-dark-modern"] =
+            window.__timelines["vscode-dark-modern"] || gsap.timeline({ paused: true });
+          window.createVSCodeThemeComposition("vscode-dark-modern", {
+            id: "dark-modern",
+            label: "Dark Modern",
+            sourceFile: "dark_modern.json",
+            uiTheme: "vs-dark",
+            colors: {
+              "activityBar.activeBorder": "#0078D4",
+              "activityBar.background": "#181818",
+              "activityBar.border": "#2B2B2B",
+              "activityBar.foreground": "#D7D7D7",
+              "activityBar.inactiveForeground": "#868686",
+              "editor.background": "#1F1F1F",
+              "editor.foreground": "#CCCCCC",
+              "editorGroup.border": "#FFFFFF17",
+              "editorGroupHeader.tabsBackground": "#181818",
+              "editorGroupHeader.tabsBorder": "#2B2B2B",
+              "editorLineNumber.activeForeground": "#CCCCCC",
+              "editorLineNumber.foreground": "#6E7681",
+              foreground: "#CCCCCC",
+              "icon.foreground": "#CCCCCC",
+              "panel.background": "#181818",
+              "panel.border": "#2B2B2B",
+              "sideBar.background": "#181818",
+              "sideBar.border": "#2B2B2B",
+              "sideBar.foreground": "#CCCCCC",
+              "sideBarSectionHeader.background": "#181818",
+              "sideBarSectionHeader.border": "#2B2B2B",
+              "sideBarSectionHeader.foreground": "#CCCCCC",
+              "sideBarTitle.foreground": "#CCCCCC",
+              "statusBar.background": "#181818",
+              "statusBar.border": "#2B2B2B",
+              "statusBar.foreground": "#CCCCCC",
+              "statusBarItem.remoteBackground": "#0078D4",
+              "statusBarItem.remoteForeground": "#FFFFFF",
+              "tab.activeBackground": "#1F1F1F",
+              "tab.activeBorder": "#1F1F1F",
+              "tab.activeBorderTop": "#0078D4",
+              "tab.activeForeground": "#FFFFFF",
+              "tab.border": "#2B2B2B",
+              "tab.inactiveBackground": "#181818",
+              "tab.inactiveForeground": "#9D9D9D",
+              "terminal.foreground": "#CCCCCC",
+              "titleBar.activeBackground": "#181818",
+              "titleBar.activeForeground": "#CCCCCC",
+            },
+            tokens: {
+              comment: "#6A9955",
+              keyword: "#d7ba7d",
+              function: "#DCDCAA",
+              string: "#d16969",
+              number: "#b5cea8",
+              variable: "#4FC1FF",
+              parameter: "#9CDCFE",
+              operator: "#d7ba7d",
+              punctuation: "#CE9178",
+              className: "#4EC9B0",
+            },
+          });
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
 <div
   data-composition-id="code-snippet-dark-modern"
   data-composition-src="compositions/code-snippet-dark-modern.html"
@@ -29,8 +1124,13 @@ It runs for 11 seconds at 1920×1080. Paste this into your composition:
 ></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.
+## Features
+
+- Full VS Code workbench recreation — activity bar, sidebar, explorer tree, editor tabs, breadcrumbs, terminal panel, status bar
+- Per-character typing animation with cursor tracking and active line highlight
+- Colors sourced from official `microsoft/vscode` built-in theme JSON
+- 3D perspective tilt at the end of the typing sequence
+- Terminal panel with mock test output
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/code-snippet-dark-plus.mdx b/docs/catalog/blocks/code-snippet-dark-plus.mdx
index 96430e1cb6..47ae899f27 100644
--- a/docs/catalog/blocks/code-snippet-dark-plus.mdx
+++ b/docs/catalog/blocks/code-snippet-dark-plus.mdx
@@ -3,21 +3,1085 @@ title: "Code Snippet - Dark+"
 description: "VS Code workbench with per-character typing animation in the Dark+ theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-dark-plus.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-dark-plus.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/code-snippet-dark-plus.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Code Snippet - Dark+ preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add code-snippet-dark-plus
-```
+<InstallCommand command="npx hyperframes add code-snippet-dark-plus" />
 
 That writes `compositions/code-snippet-dark-plus.html`, plus 1 supporting file under `assets/`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`code-snippet-dark-plus.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Dark+ VS Code Theme Composition</title>
+  </head>
+  <body>
+    <template id="vscode-dark-plus-template">
+      <div
+        class="vscode-theme-scene"
+        data-composition-id="vscode-dark-plus"
+        data-width="1920"
+        data-height="1080"
+      >
+        <main class="scene-content">
+          <section class="header">
+            <div>
+              <p class="kicker">Official VS Code built-in theme</p>
+              <h1 class="title"><span class="theme-label">Dark+</span></h1>
+            </div>
+            <p class="source-note">
+              Typing `functional_toolkit.py` with workbench colors from
+              <span class="theme-source">dark_plus.json</span>.
+            </p>
+          </section>
+
+          <section class="workbench">
+            <div class="titlebar">
+              <div class="traffic"><span></span><span></span><span></span></div>
+              <div class="window-title">functional-toolkit - Visual Studio Code</div>
+              <div class="command-center">Search</div>
+            </div>
+
+            <aside class="activity" aria-label="Activity bar">
+              <svg class="activity-icon active" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="currentColor"
+                  d="M4 4h7v7H4V4Zm9 0h7v7h-7V4ZM4 13h7v7H4v-7Zm9 0h7v7h-7v-7Z"
+                />
+              </svg>
+              <svg class="activity-icon" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  d="m21 21-5.2-5.2M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Z"
+                />
+              </svg>
+              <svg class="activity-icon" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  d="M8 18 3 12l5-6m8 12 5-6-5-6"
+                />
+              </svg>
+              <svg class="activity-icon" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  d="M12 3v18m0-18 6 6m-6-6L6 9m6 12 6-6m-6 6-6-6"
+                />
+              </svg>
+            </aside>
+
+            <aside class="sidebar">
+              <div class="sidebar-title">Explorer</div>
+              <div class="section-title">⌄ Functional Toolkit</div>
+              <div class="tree">
+                <div class="tree-row">⌄ src</div>
+                <div class="tree-row child selected">◇ functional_toolkit.py</div>
+                <div class="tree-row child">◇ test_toolkit.py</div>
+                <div class="tree-row">◇ pyproject.toml</div>
+                <div class="tree-row">◇ README.md</div>
+              </div>
+            </aside>
+
+            <section class="editor-area">
+              <div class="tabs">
+                <div class="tab">◇ functional_toolkit.py</div>
+                <div class="tab inactive">README.md</div>
+              </div>
+              <div class="breadcrumbs">functional-toolkit › src › functional_toolkit.py</div>
+              <div class="editor">
+                <div class="active-line"></div>
+                <div class="code"></div>
+              </div>
+              <div class="terminal">
+                <div class="panel-tabs">
+                  <span class="active">Terminal</span><span>Problems</span><span>Output</span>
+                </div>
+                <div class="terminal-body">
+                  <div><span class="prompt">functional-toolkit %</span> python -m pytest</div>
+                  <div>collected 3 items</div>
+                  <div>tests/test_toolkit.py ... <span class="tok-comment">passed</span></div>
+                </div>
+              </div>
+            </section>
+
+            <footer class="statusbar">
+              <div class="status-left">
+                <span class="remote">main</span>
+                <span>0 errors</span>
+                <span>0 warnings</span>
+              </div>
+              <div class="status-right">
+                <span>Ln 17, Col 1</span>
+                <span>Spaces: 4</span>
+                <span>UTF-8</span>
+                <span>Python 3.12</span>
+              </div>
+            </footer>
+          </section>
+        </main>
+        <style>
+          * {
+            box-sizing: border-box;
+            letter-spacing: 0;
+          }
+
+          html,
+          body {
+            margin: 0;
+            width: 1920px;
+            height: 1080px;
+            overflow: hidden;
+            background: #000000;
+            font-family:
+              Inter,
+              -apple-system,
+              BlinkMacSystemFont,
+              "Segoe UI",
+              sans-serif;
+          }
+
+          .vscode-theme-scene {
+            --activity-bg: #181818;
+            --activity-fg: #d7d7d7;
+            --activity-muted: #868686;
+            --activity-active: #0078d4;
+            --sidebar-bg: #181818;
+            --sidebar-fg: #cccccc;
+            --sidebar-border: #2b2b2b;
+            --tab-bg: #181818;
+            --tab-active-bg: #1f1f1f;
+            --tab-active-fg: #ffffff;
+            --tab-inactive-fg: #9d9d9d;
+            --tab-border: #2b2b2b;
+            --editor-bg: #1f1f1f;
+            --editor-fg: #cccccc;
+            --editor-line: rgba(255, 255, 255, 0.04);
+            --gutter-fg: #6e7681;
+            --gutter-active-fg: #cccccc;
+            --panel-bg: #181818;
+            --panel-border: #2b2b2b;
+            --status-bg: #181818;
+            --status-fg: #cccccc;
+            --status-border: #2b2b2b;
+            --title-bg: #181818;
+            --title-fg: #cccccc;
+            --token-comment: #6a9955;
+            --token-keyword: #c586c0;
+            --token-function: #dcdcaa;
+            --token-string: #ce9178;
+            --token-number: #b5cea8;
+            --token-variable: #9cdcfe;
+            --token-parameter: #9cdcfe;
+            --token-operator: #d4d4d4;
+            --token-punctuation: #d4d4d4;
+            --token-class-name: #4ec9b0;
+            position: relative;
+            width: 1920px;
+            height: 1080px;
+            overflow: hidden;
+            background:
+              linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.32)),
+              url("../assets/background.jpeg") center / cover no-repeat;
+            color: var(--editor-fg);
+          }
+
+          .scene-content {
+            position: relative;
+            z-index: 1;
+            width: 100%;
+            height: 100%;
+            padding: 54px 70px 92px;
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+            perspective: 2200px;
+            perspective-origin: 56% 52%;
+          }
+
+          .header {
+            display: flex;
+            align-items: end;
+            justify-content: space-between;
+            min-height: 66px;
+            text-shadow:
+              0 2px 12px rgba(0, 0, 0, 0.42),
+              0 14px 34px rgba(0, 0, 0, 0.32);
+          }
+
+          .kicker {
+            margin: 0 0 7px;
+            color: var(--gutter-fg);
+            font-size: 15px;
+            font-weight: 650;
+            text-transform: uppercase;
+            text-shadow:
+              0 2px 8px rgba(0, 0, 0, 0.48),
+              0 10px 26px rgba(0, 0, 0, 0.36);
+          }
+
+          .title {
+            margin: 0;
+            color: var(--editor-fg);
+            font-size: 44px;
+            line-height: 1;
+            font-weight: 760;
+          }
+
+          .source-note {
+            width: 510px;
+            color: var(--gutter-fg);
+            font-size: 16px;
+            line-height: 1.35;
+            text-align: right;
+            text-shadow:
+              0 2px 10px rgba(0, 0, 0, 0.46),
+              0 12px 30px rgba(0, 0, 0, 0.34);
+          }
+
+          .workbench {
+            height: 824px;
+            display: grid;
+            grid-template-columns: 54px 290px 1fr;
+            grid-template-rows: 36px 1fr 26px;
+            overflow: hidden;
+            border: 1px solid var(--sidebar-border);
+            border-radius: 8px;
+            background: var(--editor-bg);
+            box-shadow: 0 34px 90px rgba(0, 0, 0, 0.42);
+            transform: translateZ(0);
+            transform-origin: 82% 50%;
+            transform-style: preserve-3d;
+            will-change: transform;
+          }
+
+          .titlebar {
+            grid-column: 1 / -1;
+            display: grid;
+            grid-template-columns: 120px 1fr 210px;
+            align-items: center;
+            background: var(--title-bg);
+            color: var(--title-fg);
+            border-bottom: 1px solid var(--tab-border);
+            font-size: 12px;
+          }
+
+          .traffic {
+            display: flex;
+            gap: 8px;
+            padding-left: 18px;
+          }
+
+          .traffic span {
+            width: 12px;
+            height: 12px;
+            border-radius: 999px;
+          }
+
+          .traffic span:nth-child(1) {
+            background: #ff5f57;
+          }
+          .traffic span:nth-child(2) {
+            background: #ffbd2e;
+          }
+          .traffic span:nth-child(3) {
+            background: #28c840;
+          }
+
+          .window-title {
+            justify-self: center;
+            opacity: 0.84;
+          }
+
+          .command-center {
+            justify-self: end;
+            width: 176px;
+            height: 22px;
+            margin-right: 16px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border: 1px solid color-mix(in srgb, var(--title-fg), transparent 78%);
+            border-radius: 5px;
+            color: color-mix(in srgb, var(--title-fg), transparent 18%);
+          }
+
+          .activity {
+            grid-row: 2 / 3;
+            background: var(--activity-bg);
+            border-right: 1px solid var(--sidebar-border);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 10px 0;
+            gap: 18px;
+          }
+
+          .activity-icon {
+            width: 28px;
+            height: 28px;
+            color: var(--activity-muted);
+          }
+
+          .activity-icon.active {
+            color: var(--activity-fg);
+            border-left: 2px solid var(--activity-active);
+            padding-left: 4px;
+          }
+
+          .sidebar {
+            grid-row: 2 / 3;
+            background: var(--sidebar-bg);
+            color: var(--sidebar-fg);
+            border-right: 1px solid var(--sidebar-border);
+            display: flex;
+            flex-direction: column;
+            min-width: 0;
+          }
+
+          .sidebar-title {
+            height: 38px;
+            display: flex;
+            align-items: center;
+            padding: 0 20px;
+            color: var(--sidebar-fg);
+            font-size: 11px;
+            text-transform: uppercase;
+          }
+
+          .section-title {
+            height: 24px;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            padding: 0 14px;
+            background: color-mix(in srgb, var(--sidebar-bg), var(--sidebar-fg) 5%);
+            border-top: 1px solid var(--sidebar-border);
+            border-bottom: 1px solid var(--sidebar-border);
+            color: var(--sidebar-fg);
+            font-size: 11px;
+            font-weight: 700;
+          }
+
+          .tree {
+            padding: 8px 0;
+            font-size: 13px;
+            line-height: 24px;
+          }
+
+          .tree-row {
+            height: 24px;
+            display: flex;
+            align-items: center;
+            gap: 7px;
+            padding: 0 10px 0 18px;
+            color: color-mix(in srgb, var(--sidebar-fg), transparent 8%);
+            white-space: nowrap;
+          }
+
+          .tree-row.child {
+            padding-left: 34px;
+          }
+
+          .tree-row.selected {
+            background: color-mix(in srgb, var(--sidebar-fg), transparent 88%);
+            color: var(--sidebar-fg);
+          }
+
+          .editor-area {
+            grid-row: 2 / 3;
+            display: grid;
+            grid-template-rows: 36px 30px 1fr 138px;
+            min-width: 0;
+            background: var(--editor-bg);
+          }
+
+          .tabs {
+            display: flex;
+            background: var(--tab-bg);
+            border-bottom: 1px solid var(--tab-border);
+          }
+
+          .tab {
+            width: 205px;
+            height: 36px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 0 13px;
+            border-right: 1px solid var(--tab-border);
+            background: var(--tab-active-bg);
+            color: var(--tab-active-fg);
+            border-top: 2px solid var(--activity-active);
+            font-size: 13px;
+          }
+
+          .tab.inactive {
+            background: var(--tab-bg);
+            color: var(--tab-inactive-fg);
+            border-top-color: transparent;
+          }
+
+          .breadcrumbs {
+            display: flex;
+            align-items: center;
+            gap: 7px;
+            padding: 0 18px;
+            color: var(--gutter-fg);
+            border-bottom: 1px solid color-mix(in srgb, var(--tab-border), transparent 20%);
+            font-size: 12px;
+          }
+
+          .editor {
+            position: relative;
+            overflow: hidden;
+            background: var(--editor-bg);
+            color: var(--editor-fg);
+            font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+            font-size: 18px;
+            line-height: 1.52;
+          }
+
+          .active-line {
+            position: absolute;
+            left: 0;
+            right: 0;
+            top: 0;
+            height: 28px;
+            background: var(--editor-line);
+            will-change: transform;
+          }
 
-It runs for 11 seconds at 1920×1080. Paste this into your composition:
+          .code {
+            position: relative;
+            padding: 20px 36px 18px 0;
+          }
 
-```html index.html
+          .line {
+            height: 28px;
+            display: grid;
+            grid-template-columns: 72px 1fr;
+            align-items: center;
+          }
+
+          .line-number {
+            padding-right: 18px;
+            color: var(--gutter-fg);
+            text-align: right;
+            user-select: none;
+          }
+
+          .line.is-active .line-number {
+            color: var(--gutter-active-fg);
+          }
+
+          .line-code {
+            white-space: pre;
+          }
+
+          .char {
+            opacity: 0;
+          }
+
+          .tok-comment {
+            color: var(--token-comment);
+          }
+          .tok-keyword {
+            color: var(--token-keyword);
+          }
+          .tok-function {
+            color: var(--token-function);
+          }
+          .tok-string {
+            color: var(--token-string);
+          }
+          .tok-number {
+            color: var(--token-number);
+          }
+          .tok-variable {
+            color: var(--token-variable);
+          }
+          .tok-parameter {
+            color: var(--token-parameter);
+          }
+          .tok-operator {
+            color: var(--token-operator);
+          }
+          .tok-punctuation {
+            color: var(--token-punctuation);
+          }
+          .tok-class-name {
+            color: var(--token-class-name);
+          }
+
+          .caret {
+            position: absolute;
+            left: 0;
+            top: 0;
+            z-index: 3;
+            display: block;
+            width: 2px;
+            height: 22px;
+            background: var(--editor-fg);
+            pointer-events: none;
+            will-change: transform, opacity;
+          }
+
+          .terminal {
+            display: grid;
+            grid-template-rows: 32px 1fr;
+            background: var(--panel-bg);
+            border-top: 1px solid var(--panel-border);
+            color: var(--editor-fg);
+            font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+            font-size: 14px;
+          }
+
+          .panel-tabs {
+            display: flex;
+            align-items: center;
+            gap: 22px;
+            padding: 0 18px;
+            border-bottom: 1px solid var(--panel-border);
+            color: var(--gutter-fg);
+            font-family:
+              Inter,
+              -apple-system,
+              BlinkMacSystemFont,
+              "Segoe UI",
+              sans-serif;
+            font-size: 12px;
+            text-transform: uppercase;
+          }
+
+          .panel-tabs .active {
+            color: var(--editor-fg);
+            border-bottom: 1px solid var(--activity-active);
+            height: 32px;
+            display: flex;
+            align-items: center;
+          }
+
+          .terminal-body {
+            padding: 12px 20px;
+            color: var(--editor-fg);
+            line-height: 1.8;
+          }
+
+          .prompt {
+            color: var(--token-function);
+          }
+
+          .statusbar {
+            grid-column: 1 / -1;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            background: var(--status-bg);
+            color: var(--status-fg);
+            border-top: 1px solid var(--status-border);
+            font-size: 12px;
+          }
+
+          .status-left,
+          .status-right {
+            display: flex;
+            align-items: center;
+            gap: 18px;
+            padding: 0 12px;
+          }
+
+          .remote {
+            align-self: stretch;
+            display: flex;
+            align-items: center;
+            padding: 0 12px;
+            margin-left: -12px;
+            background: var(--status-remote-bg, var(--activity-active));
+            color: var(--status-remote-fg, #ffffff);
+          }
+
+          svg {
+            display: block;
+          }
+        </style>
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (() => {
+            const codeLines = [
+              [{ text: "# A small functional toolkit", token: "comment" }],
+              [
+                { text: "def", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "pluck_deep", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "key", token: "parameter" },
+                { text: "):", token: "punctuation" },
+              ],
+              [
+                { text: "    ", token: "plain" },
+                { text: "return", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "obj", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "reduce", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "acc", token: "parameter" },
+                { text: ", ", token: "punctuation" },
+                { text: "k", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "acc", token: "variable" },
+                { text: "[", token: "punctuation" },
+                { text: "k", token: "variable" },
+                { text: "]", token: "punctuation" },
+                { text: ", ", token: "punctuation" },
+                { text: "key", token: "variable" },
+                { text: ".split", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "'.'", token: "string" },
+                { text: "), ", token: "punctuation" },
+                { text: "obj", token: "variable" },
+                { text: ")", token: "punctuation" },
+              ],
+              [],
+              [
+                { text: "def", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "compose", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "*", token: "operator" },
+                { text: "fns", token: "parameter" },
+                { text: "):", token: "punctuation" },
+              ],
+              [
+                { text: "    ", token: "plain" },
+                { text: "return", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "res", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "reduce", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "acc", token: "parameter" },
+                { text: ", ", token: "punctuation" },
+                { text: "fn", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "fn", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "acc", token: "variable" },
+                { text: "), ", token: "punctuation" },
+                { text: "fns", token: "variable" },
+                { text: ", ", token: "punctuation" },
+                { text: "res", token: "variable" },
+                { text: ")", token: "punctuation" },
+              ],
+              [],
+              [
+                { text: "def", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "unfold", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "f", token: "parameter" },
+                { text: ", ", token: "punctuation" },
+                { text: "seed", token: "parameter" },
+                { text: "):", token: "punctuation" },
+              ],
+              [
+                { text: "    ", token: "plain" },
+                { text: '"""Build a list by repeatedly applying f to a seed."""', token: "string" },
+              ],
+              [
+                { text: "    acc", token: "variable" },
+                { text: " = ", token: "operator" },
+                { text: "[]", token: "punctuation" },
+              ],
+              [
+                { text: "    while", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "True", token: "className" },
+                { text: ":", token: "punctuation" },
+              ],
+              [
+                { text: "        result", token: "variable" },
+                { text: " = ", token: "operator" },
+                { text: "f", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "seed", token: "variable" },
+                { text: ")", token: "punctuation" },
+              ],
+              [
+                { text: "        if", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "result", token: "variable" },
+                { text: " is ", token: "keyword" },
+                { text: "None", token: "className" },
+                { text: ":", token: "punctuation" },
+              ],
+              [
+                { text: "            return", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "acc", token: "variable" },
+              ],
+              [
+                { text: "        acc", token: "variable" },
+                { text: ".append", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "result", token: "variable" },
+                { text: "[", token: "punctuation" },
+                { text: "0", token: "number" },
+                { text: "])", token: "punctuation" },
+              ],
+              [
+                { text: "        seed", token: "variable" },
+                { text: " = ", token: "operator" },
+                { text: "result", token: "variable" },
+                { text: "[", token: "punctuation" },
+                { text: "1", token: "number" },
+                { text: "]", token: "punctuation" },
+              ],
+              [],
+            ];
+
+            const fallback = {
+              "activityBar.background": "#181818",
+              "activityBar.foreground": "#d7d7d7",
+              "activityBar.inactiveForeground": "#868686",
+              "activityBar.activeBorder": "#0078d4",
+              "sideBar.background": "#181818",
+              "sideBar.foreground": "#cccccc",
+              "sideBar.border": "#2b2b2b",
+              "tab.activeBackground": "#1f1f1f",
+              "tab.activeForeground": "#ffffff",
+              "tab.inactiveBackground": "#181818",
+              "tab.inactiveForeground": "#9d9d9d",
+              "tab.border": "#2b2b2b",
+              "editor.background": "#1f1f1f",
+              "editor.foreground": "#cccccc",
+              "editor.lineHighlightBackground": "#ffffff0a",
+              "editorLineNumber.foreground": "#6e7681",
+              "editorLineNumber.activeForeground": "#cccccc",
+              "panel.background": "#181818",
+              "panel.border": "#2b2b2b",
+              "statusBar.background": "#181818",
+              "statusBar.foreground": "#cccccc",
+              "statusBar.border": "#2b2b2b",
+              "titleBar.activeBackground": "#181818",
+              "titleBar.activeForeground": "#cccccc",
+            };
+
+            function color(theme, key) {
+              return theme.colors[key] || fallback[key] || theme.colors.foreground || "#cccccc";
+            }
+
+            function solarizedGrey(theme) {
+              return (
+                theme.colors["tab.inactiveForeground"] ||
+                theme.colors["editor.foreground"] ||
+                "#586E75"
+              );
+            }
+
+            function setVar(root, name, value) {
+              root.style.setProperty(name, value);
+            }
+
+            function applyTheme(root, theme) {
+              const solarizedUiGrey = theme.id === "solarized-light" ? solarizedGrey(theme) : null;
+              setVar(root, "--activity-bg", color(theme, "activityBar.background"));
+              setVar(
+                root,
+                "--activity-fg",
+                solarizedUiGrey || color(theme, "activityBar.foreground"),
+              );
+              setVar(
+                root,
+                "--activity-muted",
+                solarizedUiGrey || color(theme, "activityBar.inactiveForeground"),
+              );
+              setVar(root, "--activity-active", color(theme, "activityBar.activeBorder"));
+              setVar(root, "--sidebar-bg", color(theme, "sideBar.background"));
+              setVar(root, "--sidebar-fg", solarizedUiGrey || color(theme, "sideBar.foreground"));
+              setVar(root, "--sidebar-border", color(theme, "sideBar.border"));
+              setVar(root, "--tab-bg", color(theme, "tab.inactiveBackground"));
+              setVar(root, "--tab-active-bg", color(theme, "tab.activeBackground"));
+              setVar(
+                root,
+                "--tab-active-fg",
+                solarizedUiGrey || color(theme, "tab.activeForeground"),
+              );
+              setVar(
+                root,
+                "--tab-inactive-fg",
+                solarizedUiGrey || color(theme, "tab.inactiveForeground"),
+              );
+              setVar(root, "--tab-border", color(theme, "tab.border"));
+              setVar(root, "--editor-bg", color(theme, "editor.background"));
+              setVar(root, "--editor-fg", color(theme, "editor.foreground"));
+              setVar(root, "--editor-line", color(theme, "editor.lineHighlightBackground"));
+              setVar(root, "--gutter-fg", color(theme, "editorLineNumber.foreground"));
+              setVar(root, "--gutter-active-fg", color(theme, "editorLineNumber.activeForeground"));
+              setVar(root, "--panel-bg", color(theme, "panel.background"));
+              setVar(root, "--panel-border", color(theme, "panel.border"));
+              setVar(root, "--status-bg", color(theme, "statusBar.background"));
+              setVar(root, "--status-fg", color(theme, "statusBar.foreground"));
+              setVar(root, "--status-border", color(theme, "statusBar.border"));
+              setVar(root, "--status-remote-bg", color(theme, "statusBarItem.remoteBackground"));
+              setVar(
+                root,
+                "--status-remote-fg",
+                solarizedUiGrey || color(theme, "statusBarItem.remoteForeground"),
+              );
+              setVar(root, "--title-bg", color(theme, "titleBar.activeBackground"));
+              setVar(
+                root,
+                "--title-fg",
+                solarizedUiGrey || color(theme, "titleBar.activeForeground"),
+              );
+              setVar(root, "--token-comment", theme.tokens.comment);
+              setVar(root, "--token-keyword", theme.tokens.keyword);
+              setVar(root, "--token-function", theme.tokens.function);
+              setVar(root, "--token-string", theme.tokens.string);
+              setVar(root, "--token-number", theme.tokens.number);
+              setVar(root, "--token-variable", theme.tokens.variable);
+              setVar(root, "--token-parameter", theme.tokens.parameter);
+              setVar(root, "--token-operator", theme.tokens.operator);
+              setVar(root, "--token-punctuation", theme.tokens.punctuation);
+              setVar(root, "--token-class-name", theme.tokens.className);
+            }
+
+            function renderCode(root) {
+              const code = root.querySelector(".code");
+              codeLines.forEach((segments, index) => {
+                const line = document.createElement("div");
+                line.className = "line";
+                line.dataset.lineIndex = String(index);
+
+                const lineNumber = document.createElement("span");
+                lineNumber.className = "line-number";
+                lineNumber.textContent = String(index + 1);
+                line.appendChild(lineNumber);
+
+                const lineCode = document.createElement("span");
+                lineCode.className = "line-code";
+                segments.forEach((segment) => {
+                  [...segment.text].forEach((char) => {
+                    const span = document.createElement("span");
+                    span.className =
+                      segment.token === "plain"
+                        ? "char"
+                        : "char tok-" +
+                          segment.token.replace(/[A-Z]/g, (match) => "-" + match.toLowerCase());
+                    span.dataset.lineIndex = String(index);
+                    span.textContent = char;
+                    lineCode.appendChild(span);
+                  });
+                });
+                line.appendChild(lineCode);
+                code.appendChild(line);
+              });
+
+              const caret = document.createElement("span");
+              caret.className = "caret";
+              root.querySelector(".editor").appendChild(caret);
+            }
+
+            function caretPointForElement(editor, el) {
+              const editorBox = editor.getBoundingClientRect();
+              const charBox = el.getBoundingClientRect();
+              return {
+                x: charBox.right - editorBox.left + 2,
+                y: charBox.top - editorBox.top + 3,
+              };
+            }
+
+            function caretPointForLineStart(editor, line) {
+              const editorBox = editor.getBoundingClientRect();
+              const lineBox = line.getBoundingClientRect();
+              const codeBox = line.querySelector(".line-code").getBoundingClientRect();
+              return {
+                x: codeBox.left - editorBox.left,
+                y: lineBox.top - editorBox.top + 3,
+              };
+            }
+
+            function lineHighlightY(editor, line) {
+              const editorBox = editor.getBoundingClientRect();
+              const lineBox = line.getBoundingClientRect();
+              return lineBox.top - editorBox.top;
+            }
+
+            function buildTimeline(root, compositionId) {
+              const tl = gsap.timeline({ paused: true });
+              const editor = root.querySelector(".editor");
+              const caret = root.querySelector(".caret");
+              const activeLine = root.querySelector(".active-line");
+              const lineEls = gsap.utils.toArray(root.querySelectorAll(".line"));
+              const lineStartTimes = [];
+              const charSchedule = [];
+              let cursorTime = 0.95;
+
+              lineEls.forEach((line, lineIndex) => {
+                const lineChars = gsap.utils.toArray(line.querySelectorAll(".char"));
+                lineStartTimes[lineIndex] = cursorTime;
+                lineChars.forEach((char, charIndex) => {
+                  charSchedule.push({ char, time: cursorTime + charIndex * 0.012 });
+                });
+                cursorTime += Math.max(lineChars.length * 0.012, 0.08) + 0.045;
+              });
+
+              gsap.set(activeLine, { y: lineHighlightY(editor, lineEls[0]) });
+              gsap.set(caret, caretPointForLineStart(editor, lineEls[0]));
+
+              tl.from(
+                root.querySelector(".header"),
+                { y: 24, opacity: 0, duration: 0.45, ease: "power3.out" },
+                0,
+              );
+              tl.from(
+                root.querySelector(".workbench"),
+                { y: 42, opacity: 0, scale: 0.986, duration: 0.58, ease: "power3.out" },
+                0.1,
+              );
+              tl.from(activeLine, { opacity: 0, duration: 0.22, ease: "power2.out" }, 0.74);
+              lineStartTimes.forEach((time, lineIndex) => {
+                const line = lineEls[lineIndex];
+                tl.set(activeLine, { y: lineHighlightY(editor, line) }, time);
+                tl.set(caret, caretPointForLineStart(editor, line), time);
+                tl.call(
+                  () => {
+                    lineEls.forEach((item) => item.classList.toggle("is-active", item === line));
+                  },
+                  [],
+                  time,
+                );
+              });
+              charSchedule.forEach(({ char, time }) => {
+                tl.set(char, { opacity: 1 }, time);
+                tl.set(caret, caretPointForElement(editor, char), time + 0.002);
+              });
+              tl.to(
+                root.querySelector(".caret"),
+                { opacity: 0, duration: 0.34, repeat: 25, yoyo: true, ease: "steps(1)" },
+                0.95,
+              );
+              tl.from(
+                root.querySelector(".terminal"),
+                { y: 140, opacity: 0, duration: 0.56, ease: "power3.out" },
+                7.55,
+              );
+              tl.from(
+                root.querySelector(".terminal-body").children,
+                { opacity: 0, y: 8, duration: 0.24, stagger: 0.16, ease: "power2.out" },
+                8.05,
+              );
+              tl.to(
+                root.querySelector(".workbench"),
+                { rotateY: -10.5, z: 74, duration: 0.72, ease: "power2.inOut" },
+                9.35,
+              );
+              tl.to(
+                root.querySelector(".workbench"),
+                { rotateY: 0, z: 0, duration: 0.62, ease: "power2.inOut" },
+                10.08,
+              );
+
+              window.__timelines = window.__timelines || {};
+              window.__timelines[compositionId] = tl;
+
+              const previewTime = new URLSearchParams(window.location.search).get("t");
+              if (previewTime !== null) {
+                tl.time(Number(previewTime));
+              }
+            }
+
+            window.createVSCodeThemeComposition = (compositionId, themeOrId) => {
+              const root =
+                document.querySelector(
+                  '[data-composition-id="' + compositionId + '"] .vscode-theme-scene',
+                ) ||
+                document.querySelector(
+                  '.vscode-theme-scene[data-composition-id="' + compositionId + '"]',
+                ) ||
+                document.querySelector('[data-composition-id="' + compositionId + '"]');
+              const theme =
+                typeof themeOrId === "string"
+                  ? window.VSCODE_THEME_REGISTRY.find((item) => item.id === themeOrId)
+                  : themeOrId;
+              if (!root || !theme) return;
+              root.querySelector(".theme-label").textContent = theme.label;
+              root.querySelector(".theme-source").textContent = theme.sourceFile;
+              applyTheme(root, theme);
+              renderCode(root);
+              buildTimeline(root, compositionId);
+            };
+          })();
+        </script>
+        <script>
+          window.__timelines = window.__timelines || {};
+          window.__timelines["vscode-dark-plus"] =
+            window.__timelines["vscode-dark-plus"] || gsap.timeline({ paused: true });
+          window.createVSCodeThemeComposition("vscode-dark-plus", {
+            id: "dark-plus",
+            label: "Dark+",
+            sourceFile: "dark_plus.json",
+            uiTheme: "vs-dark",
+            colors: {
+              "editor.background": "#1E1E1E",
+              "editor.foreground": "#D4D4D4",
+              "sideBarSectionHeader.background": "#0000",
+              "sideBarSectionHeader.border": "#ccc3",
+              "sideBarTitle.foreground": "#BBBBBB",
+              "statusBarItem.remoteBackground": "#16825D",
+              "statusBarItem.remoteForeground": "#FFF",
+            },
+            tokens: {
+              comment: "#6A9955",
+              keyword: "#d7ba7d",
+              function: "#DCDCAA",
+              string: "#d16969",
+              number: "#b5cea8",
+              variable: "#4FC1FF",
+              parameter: "#9CDCFE",
+              operator: "#d7ba7d",
+              punctuation: "#CE9178",
+              className: "#4EC9B0",
+            },
+          });
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
 <div
   data-composition-id="code-snippet-dark-plus"
   data-composition-src="compositions/code-snippet-dark-plus.html"
@@ -29,8 +1093,13 @@ It runs for 11 seconds at 1920×1080. Paste this into your composition:
 ></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.
+## Features
+
+- Full VS Code workbench recreation — activity bar, sidebar, explorer tree, editor tabs, breadcrumbs, terminal panel, status bar
+- Per-character typing animation with cursor tracking and active line highlight
+- Colors sourced from official `microsoft/vscode` built-in theme JSON
+- 3D perspective tilt at the end of the typing sequence
+- Terminal panel with mock test output
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/code-snippet-flight.mdx b/docs/catalog/blocks/code-snippet-flight.mdx
index d81f7f674d..f6de5b709c 100644
--- a/docs/catalog/blocks/code-snippet-flight.mdx
+++ b/docs/catalog/blocks/code-snippet-flight.mdx
@@ -3,34 +3,697 @@ title: "Code Snippet Flight"
 description: "Discrete code snippets fly in from the side and assemble into a stacked program, staggered. Block-level FLIP."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-flight.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-flight.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/code-snippet-flight.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Code Snippet Flight preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add code-snippet-flight
-```
+<InstallCommand command="npx hyperframes add code-snippet-flight" />
 
 That writes one file: `compositions/code-snippet-flight.html`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`code-snippet-flight.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Code Snippet Flight</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #05070b;
+      }
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        font-family: "JetBrains Mono", monospace;
+        color: #e6edf3;
+      }
+      .bg-field {
+        position: absolute;
+        inset: 0;
+        background: radial-gradient(1200px 700px at 50% 18%, #0e1726 0%, #070b12 55%, #05070b 100%);
+      }
+      .bg-grid {
+        position: absolute;
+        inset: 0;
+        background-image:
+          linear-gradient(rgba(88, 166, 255, 0.05) 1px, transparent 1px),
+          linear-gradient(90deg, rgba(88, 166, 255, 0.05) 1px, transparent 1px);
+        background-size: 64px 64px;
+        mask-image: radial-gradient(1100px 620px at 50% 42%, #000 0%, transparent 78%);
+      }
+      .bg-glow {
+        position: absolute;
+        width: 900px;
+        height: 900px;
+        border-radius: 50%;
+        filter: blur(120px);
+        opacity: 0.5;
+      }
+      .bg-glow.a {
+        background: #1f6feb55;
+        left: -180px;
+        top: -200px;
+      }
+      .bg-glow.b {
+        background: #2ea04355;
+        right: -200px;
+        bottom: -260px;
+      }
+      .editor {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        width: 1380px;
+        height: 800px;
+        background: #0b0f17;
+        border: 1px solid #1d2733;
+        border-radius: 16px;
+        box-shadow:
+          0 40px 120px rgba(0, 0, 0, 0.6),
+          0 2px 0 rgba(255, 255, 255, 0.03) inset;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+      }
+      .titlebar {
+        height: 56px;
+        flex: 0 0 56px;
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        padding: 0 22px;
+        background: linear-gradient(#11161f, #0c111a);
+        border-bottom: 1px solid #1b2430;
+      }
+      .dots {
+        display: flex;
+        gap: 10px;
+      }
+      .dot {
+        width: 14px;
+        height: 14px;
+        border-radius: 50%;
+      }
+      .dot.r {
+        background: #ff5f57;
+      }
+      .dot.y {
+        background: #febc2e;
+      }
+      .dot.g {
+        background: #28c840;
+      }
+      .filename {
+        font-size: 19px;
+        color: #8b98a9;
+        letter-spacing: 0.2px;
+      }
+      .filename .accent {
+        color: #d6e2f0;
+      }
+      .code-surface {
+        position: relative;
+        flex: 1 1 auto;
+        overflow: hidden;
+      }
+      .scene {
+        position: absolute;
+        inset: 0;
+        opacity: 0;
+        will-change: opacity;
+      }
+      .code {
+        position: absolute;
+        top: 38px;
+        left: 0;
+        right: 0;
+        padding: 0 44px 0 104px;
+        font-size: 30px;
+        line-height: 46px;
+        font-variant-ligatures: none;
+        tab-size: 2;
+      }
+      .gutter {
+        position: absolute;
+        top: 38px;
+        left: 0;
+        width: 84px;
+        padding-right: 18px;
+        font-size: 30px;
+        line-height: 46px;
+        text-align: right;
+        color: #828c9b;
+        user-select: none;
+      }
+      .ln {
+        display: block;
+        height: 46px;
+      }
+      .line {
+        display: block;
+        min-height: 46px;
+        white-space: pre;
+        position: relative;
+        z-index: 1;
+      }
+      .tok {
+        display: inline-block;
+        white-space: pre;
+        will-change: transform, opacity;
+      }
+      .caret {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 3px;
+        height: 32px;
+        margin-top: 6px;
+        background: #58a6ff;
+        border-radius: 1px;
+        z-index: 3;
+      }
+      .hl-box {
+        position: absolute;
+        background: rgba(88, 166, 255, 0.16);
+        border-left: 3px solid #58a6ff;
+        border-radius: 6px;
+        z-index: 0;
+        overflow: hidden;
+      }
+      .diff-line {
+        display: block;
+        min-height: 0;
+        line-height: 46px;
+        white-space: pre;
+        position: relative;
+        overflow: hidden;
+        padding-left: 14px;
+      }
+      .diff-sign {
+        display: inline-block;
+        width: 22px;
+        color: #41506220;
+      }
+      .diff-del {
+        background: rgba(248, 81, 73, 0.12);
+        box-shadow: inset 3px 0 #f85149;
+      }
+      .diff-add {
+        background: rgba(63, 185, 80, 0.12);
+        box-shadow: inset 3px 0 #3fb950;
+      }
+      .diff-del .diff-sign {
+        color: #f85149;
+      }
+      .diff-add .diff-sign {
+        color: #3fb950;
+      }
+      .flight-block {
+        position: absolute;
+        white-space: pre;
+        font-size: 27px;
+        line-height: 40px;
+        padding: 11px 22px;
+        border-radius: 11px;
+        background: #0f1722;
+        border: 1px solid #233044;
+        box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5);
+        will-change: transform, opacity;
+      }
+      .flight-target {
+        position: absolute;
+        border: 1.5px dashed #2a3a4f;
+        border-radius: 14px;
+        opacity: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="code-snippet-flight"
+      data-start="0"
+      data-duration="6"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="bg-field" data-layout-ignore></div>
+      <div class="bg-grid" data-layout-ignore></div>
+      <div class="bg-glow a" data-layout-ignore></div>
+      <div class="bg-glow b" data-layout-ignore></div>
+      <div class="editor" id="editor" data-layout-ignore>
+        <div class="titlebar">
+          <div class="dots">
+            <span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
+          </div>
+          <span class="filename"
+            ><span class="accent">pipeline.js</span> — Code Snippet Flight</span
+          >
+        </div>
+        <div class="code-surface" id="surface"></div>
+      </div>
+    </div>
+    <script>
+      window.__TOKENS = {
+        flight: {
+          lang: "js",
+          theme: "github-dark",
+          bg: "#24292e",
+          fg: "#e1e4e8",
+          states: [
+            {
+              code: "const x = parse(input)",
+              tokens: [
+                {
+                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-0",
+                  content: "const",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-1",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-2",
+                  content: "x",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-3",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-4",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-5",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-6",
+                  content: "parse",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-7",
+                  content: "(input)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-8",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+              ],
+            },
+            {
+              code: "const y = transform(x)",
+              tokens: [
+                {
+                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-0",
+                  content: "const",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-1",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "ulDeJnFQa2Vy-61y5zTTA7sNfq7d4aUawNMAxQ6sVgg-2",
+                  content: "y",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-3",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-4",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-5",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "ulDeJnFQa2Vy-61y5zTTA7sNfq7d4aUawNMAxQ6sVgg-6",
+                  content: "transform",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "ulDeJnFQa2Vy-61y5zTTA7sNfq7d4aUawNMAxQ6sVgg-7",
+                  content: "(x)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "ulDeJnFQa2Vy-61y5zTTA7sNfq7d4aUawNMAxQ6sVgg-8",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+              ],
+            },
+            {
+              code: "const z = render(y)",
+              tokens: [
+                {
+                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-0",
+                  content: "const",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-1",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "wFuhzZNydG-3inU2s1h1gU8Kivya8CAP9gl9S4MBQj4-2",
+                  content: "z",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-3",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-4",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-5",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "wFuhzZNydG-3inU2s1h1gU8Kivya8CAP9gl9S4MBQj4-6",
+                  content: "render",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "wFuhzZNydG-3inU2s1h1gU8Kivya8CAP9gl9S4MBQj4-7",
+                  content: "(y)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "wFuhzZNydG-3inU2s1h1gU8Kivya8CAP9gl9S4MBQj4-8",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+              ],
+            },
+          ],
+        },
+      };
+      window.__BLOCK = { id: "code-snippet-flight", effect: "flight", seq: "flight", duration: 6 };
+    </script>
+    <script>
+      // hf-code-anim.js — self-contained code-animation engine for HyperFrames registry blocks.
+      //
+      // Reuses Shiki Magic Move's baked output (window.__TOKENS, baked at author time) and
+      // drives the animation as a PAUSED GSAP timeline the HyperFrames engine seeks per frame —
+      // NOT CSS transitions (those break under non-sequential frame seeking). FLIP measurement
+      // runs once inside document.fonts.ready (glyph metrics must be final). Each block sets
+      // window.__BLOCK = { id, effect, seq, line?, duration } and includes this engine; the
+      // engine builds one scene that fills the composition and registers window.__timelines[id].
+      (function () {
+        "use strict";
+        var T = window.__TOKENS || {};
+
+        function lineDiv() {
+          var d = document.createElement("div");
+          d.className = "line";
+          return d;
+        }
+
+        // Render a code state's keyed tokens into codeEl as lines of inline-block .tok spans.
+        function renderState(codeEl, state) {
+          codeEl.textContent = "";
+          var keyToEl = new Map();
+          var line = lineDiv();
+          codeEl.appendChild(line);
+          for (var i = 0; i < state.tokens.length; i++) {
+            var t = state.tokens[i];
+            if (t.content === "\n") {
+              line = lineDiv();
+              codeEl.appendChild(line);
+              continue;
+            }
+            var span = document.createElement("span");
+            span.className = "tok";
+            span.textContent = t.content;
+            span.style.color = t.color;
+            if (t.fontStyle & 1) span.style.fontStyle = "italic";
+            if (t.fontStyle & 2) span.style.fontWeight = "700";
+            line.appendChild(span);
+            keyToEl.set(t.key, span);
+          }
+          var last = codeEl.lastChild;
+          if (last && last.className === "line" && last.children.length === 0)
+            codeEl.removeChild(last);
+          return keyToEl;
+        }
+
+        function rectsOf(keyToEl) {
+          var m = new Map();
+          keyToEl.forEach(function (el, k) {
+            var r = el.getBoundingClientRect();
+            m.set(k, { left: r.left, top: r.top });
+          });
+          return m;
+        }
+
+        function makeScene(surface, withGutter) {
+          var scene = document.createElement("div");
+          scene.className = "scene";
+          if (withGutter) {
+            var g = document.createElement("div");
+            g.className = "gutter";
+            scene.appendChild(g);
+          }
+          var code = document.createElement("div");
+          code.className = "code";
+          scene.appendChild(code);
+          surface.appendChild(scene);
+          return { scene: scene, code: code, gutter: scene.querySelector(".gutter") };
+        }
+
+        function fillGutter(g, n) {
+          var html = "";
+          for (var i = 1; i <= n; i++) html += '<span class="ln">' + i + "</span>";
+          g.innerHTML = html;
+        }
+
+        function splitLines(state) {
+          var lines = [{ text: "", tokens: [] }];
+          for (var i = 0; i < state.tokens.length; i++) {
+            var t = state.tokens[i];
+            if (t.content === "\n") {
+              lines.push({ text: "", tokens: [] });
+              continue;
+            }
+            var cur = lines[lines.length - 1];
+            cur.tokens.push(t);
+            cur.text += t.content;
+          }
+          if (lines.length && lines[lines.length - 1].tokens.length === 0) lines.pop();
+          return lines;
+        }
+
+        function lineDiff(a, b) {
+          var n = a.length;
+          var m = b.length;
+          var dp = [];
+          for (var i = 0; i <= n; i++) dp.push(new Array(m + 1).fill(0));
+          for (var i = n - 1; i >= 0; i--) {
+            for (var j = m - 1; j >= 0; j--) {
+              dp[i][j] =
+                a[i].text === b[j].text
+                  ? dp[i + 1][j + 1] + 1
+                  : Math.max(dp[i + 1][j], dp[i][j + 1]);
+            }
+          }
+          var ops = [];
+          var i = 0;
+          var j = 0;
+          while (i < n && j < m) {
+            if (a[i].text === b[j].text) {
+              ops.push({ type: "same", line: b[j] });
+              i++;
+              j++;
+            } else if (dp[i + 1][j] >= dp[i][j + 1]) {
+              ops.push({ type: "del", line: a[i] });
+              i++;
+            } else {
+              ops.push({ type: "add", line: b[j] });
+              j++;
+            }
+          }
+          while (i < n) ops.push({ type: "del", line: a[i++] });
+          while (j < m) ops.push({ type: "add", line: b[j++] });
+          return ops;
+        }
 
-It runs for 6 seconds at 1920×1080. Paste this into your composition:
+        // ---- single-scene effect builders (fade in, play, hold to end) -------------
+        var FADE = 0.45;
 
-```html index.html
-<div
-  data-composition-id="code-snippet-flight"
-  data-composition-src="compositions/code-snippet-flight.html"
-  data-start="0"
-  data-duration="6"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+        function flight(tl, surface, states, start) {
+          var FLY = 0.95;
+          var STAGGER = 0.26;
+          var GAP = 20;
+          var parts = makeScene(surface, false);
+          parts.code.remove();
+          var scene = parts.scene;
+          var target = document.createElement("div");
+          target.className = "flight-target";
+          scene.appendChild(target);
+          var W = surface.clientWidth;
+          var H = surface.clientHeight;
+
+          var blocks = states.map(function (st) {
+            var blk = document.createElement("div");
+            blk.className = "flight-block";
+            renderState(blk, st);
+            scene.appendChild(blk);
+            return blk;
+          });
+          var n = blocks.length;
+
+          // Pass 1: measure natural size, then make every chip the SAME width (symmetry).
+          var maxW = 0;
+          var chipH = 0;
+          blocks.forEach(function (blk) {
+            var r = blk.getBoundingClientRect();
+            if (r.width > maxW) maxW = r.width;
+            if (r.height > chipH) chipH = r.height;
+          });
+          blocks.forEach(function (blk) {
+            blk.style.width = maxW + "px";
+          });
+
+          // Pass 2: evenly-stacked, left-aligned, group centered in the surface.
+          var stackH = n * chipH + (n - 1) * GAP;
+          var destLeft = Math.round((W - maxW) / 2);
+          var topY = Math.round((H - stackH) / 2);
+          blocks.forEach(function (blk, i) {
+            var destY = topY + i * (chipH + GAP);
+            blk.style.left = destLeft + "px";
+            blk.style.top = destY + "px";
+            // fly straight in from the left to the shared left edge — clean, no skew
+            var srcX = destLeft - W * 0.32;
+            tl.fromTo(
+              blk,
+              { x: srcX - destLeft, opacity: 0, scale: 0.96 },
+              { x: 0, opacity: 1, scale: 1, duration: FLY, ease: "power3.out" },
+              start + FADE + i * STAGGER,
+            );
+          });
+
+          // Even-padded panel tightly wrapping the uniform stack.
+          var padX = 30;
+          var padY = 24;
+          target.style.left = destLeft - padX + "px";
+          target.style.top = topY - padY + "px";
+          target.style.width = maxW + padX * 2 + "px";
+          target.style.height = stackH + padY * 2 + "px";
+          var landAt = start + FADE + (n - 1) * STAGGER + FLY;
+          tl.set(scene, { opacity: 1 }, 0);
+          tl.to(target, { opacity: 1, duration: 0.5, ease: "power1.out" }, landAt - 0.5);
+        }
+
+        function buildEffect(tl, surface, spec) {
+          var start = 0.45;
+          var seq = T[spec.seq];
+          if (spec.effect === "flight") flight(tl, surface, seq.states, start);
+        }
+
+        function go() {
+          var spec = window.__BLOCK;
+          var surface = document.getElementById("surface");
+          var root = document.getElementById("root");
+          window.__timelines = window.__timelines || {};
+          var tl = gsap.timeline({ paused: true });
+          window.__timelines["code-snippet-flight"] = tl; // register synchronously
+          document.fonts.ready.then(function () {
+            tl.from("#editor", { opacity: 0, scale: 0.985, duration: 0.5, ease: "power2.out" }, 0);
+            buildEffect(tl, surface, spec);
+            var dur = parseFloat(root.dataset.duration) || tl.duration();
+            tl.to({}, { duration: dur }, 0); // pad to full composition length
+          });
+        }
+
+        if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", go);
+        else go();
+      })();
+    </script>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="code-snippet-flight" data-composition-src="compositions/code-snippet-flight.html" data-start="0" data-duration="6" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/code-snippet-high-contrast-light.mdx b/docs/catalog/blocks/code-snippet-high-contrast-light.mdx
index abdc6ab640..c6dece6888 100644
--- a/docs/catalog/blocks/code-snippet-high-contrast-light.mdx
+++ b/docs/catalog/blocks/code-snippet-high-contrast-light.mdx
@@ -3,21 +3,1080 @@ title: "Code Snippet - High Contrast Light"
 description: "VS Code workbench with per-character typing animation in the High Contrast Light theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-high-contrast-light.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-high-contrast-light.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/code-snippet-high-contrast-light.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Code Snippet - High Contrast Light preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add code-snippet-high-contrast-light
-```
+<InstallCommand command="npx hyperframes add code-snippet-high-contrast-light" />
 
 That writes `compositions/code-snippet-high-contrast-light.html`, plus 1 supporting file under `assets/`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`code-snippet-high-contrast-light.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Default High Contrast Light VS Code Theme Composition</title>
+  </head>
+  <body>
+    <template id="vscode-high-contrast-light-template">
+      <div
+        class="vscode-theme-scene"
+        data-composition-id="vscode-high-contrast-light"
+        data-width="1920"
+        data-height="1080"
+      >
+        <main class="scene-content">
+          <section class="header">
+            <div>
+              <p class="kicker">Official VS Code built-in theme</p>
+              <h1 class="title"><span class="theme-label">Default High Contrast Light</span></h1>
+            </div>
+            <p class="source-note">
+              Typing `functional_toolkit.py` with workbench colors from
+              <span class="theme-source">hc_light.json</span>.
+            </p>
+          </section>
+
+          <section class="workbench">
+            <div class="titlebar">
+              <div class="traffic"><span></span><span></span><span></span></div>
+              <div class="window-title">functional-toolkit - Visual Studio Code</div>
+              <div class="command-center">Search</div>
+            </div>
+
+            <aside class="activity" aria-label="Activity bar">
+              <svg class="activity-icon active" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="currentColor"
+                  d="M4 4h7v7H4V4Zm9 0h7v7h-7V4ZM4 13h7v7H4v-7Zm9 0h7v7h-7v-7Z"
+                />
+              </svg>
+              <svg class="activity-icon" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  d="m21 21-5.2-5.2M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Z"
+                />
+              </svg>
+              <svg class="activity-icon" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  d="M8 18 3 12l5-6m8 12 5-6-5-6"
+                />
+              </svg>
+              <svg class="activity-icon" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  d="M12 3v18m0-18 6 6m-6-6L6 9m6 12 6-6m-6 6-6-6"
+                />
+              </svg>
+            </aside>
+
+            <aside class="sidebar">
+              <div class="sidebar-title">Explorer</div>
+              <div class="section-title">⌄ Functional Toolkit</div>
+              <div class="tree">
+                <div class="tree-row">⌄ src</div>
+                <div class="tree-row child selected">◇ functional_toolkit.py</div>
+                <div class="tree-row child">◇ test_toolkit.py</div>
+                <div class="tree-row">◇ pyproject.toml</div>
+                <div class="tree-row">◇ README.md</div>
+              </div>
+            </aside>
+
+            <section class="editor-area">
+              <div class="tabs">
+                <div class="tab">◇ functional_toolkit.py</div>
+                <div class="tab inactive">README.md</div>
+              </div>
+              <div class="breadcrumbs">functional-toolkit › src › functional_toolkit.py</div>
+              <div class="editor">
+                <div class="active-line"></div>
+                <div class="code"></div>
+              </div>
+              <div class="terminal">
+                <div class="panel-tabs">
+                  <span class="active">Terminal</span><span>Problems</span><span>Output</span>
+                </div>
+                <div class="terminal-body">
+                  <div><span class="prompt">functional-toolkit %</span> python -m pytest</div>
+                  <div>collected 3 items</div>
+                  <div>tests/test_toolkit.py ... <span class="tok-comment">passed</span></div>
+                </div>
+              </div>
+            </section>
+
+            <footer class="statusbar">
+              <div class="status-left">
+                <span class="remote">main</span>
+                <span>0 errors</span>
+                <span>0 warnings</span>
+              </div>
+              <div class="status-right">
+                <span>Ln 17, Col 1</span>
+                <span>Spaces: 4</span>
+                <span>UTF-8</span>
+                <span>Python 3.12</span>
+              </div>
+            </footer>
+          </section>
+        </main>
+        <style>
+          * {
+            box-sizing: border-box;
+            letter-spacing: 0;
+          }
+
+          html,
+          body {
+            margin: 0;
+            width: 1920px;
+            height: 1080px;
+            overflow: hidden;
+            background: #000000;
+            font-family:
+              Inter,
+              -apple-system,
+              BlinkMacSystemFont,
+              "Segoe UI",
+              sans-serif;
+          }
+
+          .vscode-theme-scene {
+            --activity-bg: #181818;
+            --activity-fg: #d7d7d7;
+            --activity-muted: #868686;
+            --activity-active: #0078d4;
+            --sidebar-bg: #181818;
+            --sidebar-fg: #cccccc;
+            --sidebar-border: #2b2b2b;
+            --tab-bg: #181818;
+            --tab-active-bg: #1f1f1f;
+            --tab-active-fg: #ffffff;
+            --tab-inactive-fg: #9d9d9d;
+            --tab-border: #2b2b2b;
+            --editor-bg: #1f1f1f;
+            --editor-fg: #cccccc;
+            --editor-line: rgba(255, 255, 255, 0.04);
+            --gutter-fg: #6e7681;
+            --gutter-active-fg: #cccccc;
+            --panel-bg: #181818;
+            --panel-border: #2b2b2b;
+            --status-bg: #181818;
+            --status-fg: #cccccc;
+            --status-border: #2b2b2b;
+            --title-bg: #181818;
+            --title-fg: #cccccc;
+            --token-comment: #6a9955;
+            --token-keyword: #c586c0;
+            --token-function: #dcdcaa;
+            --token-string: #ce9178;
+            --token-number: #b5cea8;
+            --token-variable: #9cdcfe;
+            --token-parameter: #9cdcfe;
+            --token-operator: #d4d4d4;
+            --token-punctuation: #d4d4d4;
+            --token-class-name: #4ec9b0;
+            position: relative;
+            width: 1920px;
+            height: 1080px;
+            overflow: hidden;
+            background:
+              linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.32)),
+              url("../assets/background.jpeg") center / cover no-repeat;
+            color: var(--editor-fg);
+          }
+
+          .scene-content {
+            position: relative;
+            z-index: 1;
+            width: 100%;
+            height: 100%;
+            padding: 54px 70px 92px;
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+            perspective: 2200px;
+            perspective-origin: 56% 52%;
+          }
+
+          .header {
+            display: flex;
+            align-items: end;
+            justify-content: space-between;
+            min-height: 66px;
+            text-shadow:
+              0 2px 12px rgba(0, 0, 0, 0.42),
+              0 14px 34px rgba(0, 0, 0, 0.32);
+          }
+
+          .kicker {
+            margin: 0 0 7px;
+            color: var(--gutter-fg);
+            font-size: 15px;
+            font-weight: 650;
+            text-transform: uppercase;
+            text-shadow:
+              0 2px 8px rgba(0, 0, 0, 0.48),
+              0 10px 26px rgba(0, 0, 0, 0.36);
+          }
+
+          .title {
+            margin: 0;
+            color: var(--editor-fg);
+            font-size: 44px;
+            line-height: 1;
+            font-weight: 760;
+          }
+
+          .source-note {
+            width: 510px;
+            color: var(--gutter-fg);
+            font-size: 16px;
+            line-height: 1.35;
+            text-align: right;
+            text-shadow:
+              0 2px 10px rgba(0, 0, 0, 0.46),
+              0 12px 30px rgba(0, 0, 0, 0.34);
+          }
+
+          .workbench {
+            height: 824px;
+            display: grid;
+            grid-template-columns: 54px 290px 1fr;
+            grid-template-rows: 36px 1fr 26px;
+            overflow: hidden;
+            border: 1px solid var(--sidebar-border);
+            border-radius: 8px;
+            background: var(--editor-bg);
+            box-shadow: 0 34px 90px rgba(0, 0, 0, 0.42);
+            transform: translateZ(0);
+            transform-origin: 82% 50%;
+            transform-style: preserve-3d;
+            will-change: transform;
+          }
+
+          .titlebar {
+            grid-column: 1 / -1;
+            display: grid;
+            grid-template-columns: 120px 1fr 210px;
+            align-items: center;
+            background: var(--title-bg);
+            color: var(--title-fg);
+            border-bottom: 1px solid var(--tab-border);
+            font-size: 12px;
+          }
+
+          .traffic {
+            display: flex;
+            gap: 8px;
+            padding-left: 18px;
+          }
+
+          .traffic span {
+            width: 12px;
+            height: 12px;
+            border-radius: 999px;
+          }
+
+          .traffic span:nth-child(1) {
+            background: #ff5f57;
+          }
+          .traffic span:nth-child(2) {
+            background: #ffbd2e;
+          }
+          .traffic span:nth-child(3) {
+            background: #28c840;
+          }
+
+          .window-title {
+            justify-self: center;
+            opacity: 0.84;
+          }
+
+          .command-center {
+            justify-self: end;
+            width: 176px;
+            height: 22px;
+            margin-right: 16px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border: 1px solid color-mix(in srgb, var(--title-fg), transparent 78%);
+            border-radius: 5px;
+            color: color-mix(in srgb, var(--title-fg), transparent 18%);
+          }
+
+          .activity {
+            grid-row: 2 / 3;
+            background: var(--activity-bg);
+            border-right: 1px solid var(--sidebar-border);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 10px 0;
+            gap: 18px;
+          }
+
+          .activity-icon {
+            width: 28px;
+            height: 28px;
+            color: var(--activity-muted);
+          }
+
+          .activity-icon.active {
+            color: var(--activity-fg);
+            border-left: 2px solid var(--activity-active);
+            padding-left: 4px;
+          }
+
+          .sidebar {
+            grid-row: 2 / 3;
+            background: var(--sidebar-bg);
+            color: var(--sidebar-fg);
+            border-right: 1px solid var(--sidebar-border);
+            display: flex;
+            flex-direction: column;
+            min-width: 0;
+          }
+
+          .sidebar-title {
+            height: 38px;
+            display: flex;
+            align-items: center;
+            padding: 0 20px;
+            color: var(--sidebar-fg);
+            font-size: 11px;
+            text-transform: uppercase;
+          }
+
+          .section-title {
+            height: 24px;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            padding: 0 14px;
+            background: color-mix(in srgb, var(--sidebar-bg), var(--sidebar-fg) 5%);
+            border-top: 1px solid var(--sidebar-border);
+            border-bottom: 1px solid var(--sidebar-border);
+            color: var(--sidebar-fg);
+            font-size: 11px;
+            font-weight: 700;
+          }
+
+          .tree {
+            padding: 8px 0;
+            font-size: 13px;
+            line-height: 24px;
+          }
+
+          .tree-row {
+            height: 24px;
+            display: flex;
+            align-items: center;
+            gap: 7px;
+            padding: 0 10px 0 18px;
+            color: color-mix(in srgb, var(--sidebar-fg), transparent 8%);
+            white-space: nowrap;
+          }
+
+          .tree-row.child {
+            padding-left: 34px;
+          }
+
+          .tree-row.selected {
+            background: color-mix(in srgb, var(--sidebar-fg), transparent 88%);
+            color: var(--sidebar-fg);
+          }
+
+          .editor-area {
+            grid-row: 2 / 3;
+            display: grid;
+            grid-template-rows: 36px 30px 1fr 138px;
+            min-width: 0;
+            background: var(--editor-bg);
+          }
+
+          .tabs {
+            display: flex;
+            background: var(--tab-bg);
+            border-bottom: 1px solid var(--tab-border);
+          }
+
+          .tab {
+            width: 205px;
+            height: 36px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 0 13px;
+            border-right: 1px solid var(--tab-border);
+            background: var(--tab-active-bg);
+            color: var(--tab-active-fg);
+            border-top: 2px solid var(--activity-active);
+            font-size: 13px;
+          }
+
+          .tab.inactive {
+            background: var(--tab-bg);
+            color: var(--tab-inactive-fg);
+            border-top-color: transparent;
+          }
+
+          .breadcrumbs {
+            display: flex;
+            align-items: center;
+            gap: 7px;
+            padding: 0 18px;
+            color: var(--gutter-fg);
+            border-bottom: 1px solid color-mix(in srgb, var(--tab-border), transparent 20%);
+            font-size: 12px;
+          }
+
+          .editor {
+            position: relative;
+            overflow: hidden;
+            background: var(--editor-bg);
+            color: var(--editor-fg);
+            font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+            font-size: 18px;
+            line-height: 1.52;
+          }
+
+          .active-line {
+            position: absolute;
+            left: 0;
+            right: 0;
+            top: 0;
+            height: 28px;
+            background: var(--editor-line);
+            will-change: transform;
+          }
 
-It runs for 11 seconds at 1920×1080. Paste this into your composition:
+          .code {
+            position: relative;
+            padding: 20px 36px 18px 0;
+          }
 
-```html index.html
+          .line {
+            height: 28px;
+            display: grid;
+            grid-template-columns: 72px 1fr;
+            align-items: center;
+          }
+
+          .line-number {
+            padding-right: 18px;
+            color: var(--gutter-fg);
+            text-align: right;
+            user-select: none;
+          }
+
+          .line.is-active .line-number {
+            color: var(--gutter-active-fg);
+          }
+
+          .line-code {
+            white-space: pre;
+          }
+
+          .char {
+            opacity: 0;
+          }
+
+          .tok-comment {
+            color: var(--token-comment);
+          }
+          .tok-keyword {
+            color: var(--token-keyword);
+          }
+          .tok-function {
+            color: var(--token-function);
+          }
+          .tok-string {
+            color: var(--token-string);
+          }
+          .tok-number {
+            color: var(--token-number);
+          }
+          .tok-variable {
+            color: var(--token-variable);
+          }
+          .tok-parameter {
+            color: var(--token-parameter);
+          }
+          .tok-operator {
+            color: var(--token-operator);
+          }
+          .tok-punctuation {
+            color: var(--token-punctuation);
+          }
+          .tok-class-name {
+            color: var(--token-class-name);
+          }
+
+          .caret {
+            position: absolute;
+            left: 0;
+            top: 0;
+            z-index: 3;
+            display: block;
+            width: 2px;
+            height: 22px;
+            background: var(--editor-fg);
+            pointer-events: none;
+            will-change: transform, opacity;
+          }
+
+          .terminal {
+            display: grid;
+            grid-template-rows: 32px 1fr;
+            background: var(--panel-bg);
+            border-top: 1px solid var(--panel-border);
+            color: var(--editor-fg);
+            font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+            font-size: 14px;
+          }
+
+          .panel-tabs {
+            display: flex;
+            align-items: center;
+            gap: 22px;
+            padding: 0 18px;
+            border-bottom: 1px solid var(--panel-border);
+            color: var(--gutter-fg);
+            font-family:
+              Inter,
+              -apple-system,
+              BlinkMacSystemFont,
+              "Segoe UI",
+              sans-serif;
+            font-size: 12px;
+            text-transform: uppercase;
+          }
+
+          .panel-tabs .active {
+            color: var(--editor-fg);
+            border-bottom: 1px solid var(--activity-active);
+            height: 32px;
+            display: flex;
+            align-items: center;
+          }
+
+          .terminal-body {
+            padding: 12px 20px;
+            color: var(--editor-fg);
+            line-height: 1.8;
+          }
+
+          .prompt {
+            color: var(--token-function);
+          }
+
+          .statusbar {
+            grid-column: 1 / -1;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            background: var(--status-bg);
+            color: var(--status-fg);
+            border-top: 1px solid var(--status-border);
+            font-size: 12px;
+          }
+
+          .status-left,
+          .status-right {
+            display: flex;
+            align-items: center;
+            gap: 18px;
+            padding: 0 12px;
+          }
+
+          .remote {
+            align-self: stretch;
+            display: flex;
+            align-items: center;
+            padding: 0 12px;
+            margin-left: -12px;
+            background: var(--status-remote-bg, var(--activity-active));
+            color: var(--status-remote-fg, #ffffff);
+          }
+
+          svg {
+            display: block;
+          }
+        </style>
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (() => {
+            const codeLines = [
+              [{ text: "# A small functional toolkit", token: "comment" }],
+              [
+                { text: "def", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "pluck_deep", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "key", token: "parameter" },
+                { text: "):", token: "punctuation" },
+              ],
+              [
+                { text: "    ", token: "plain" },
+                { text: "return", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "obj", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "reduce", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "acc", token: "parameter" },
+                { text: ", ", token: "punctuation" },
+                { text: "k", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "acc", token: "variable" },
+                { text: "[", token: "punctuation" },
+                { text: "k", token: "variable" },
+                { text: "]", token: "punctuation" },
+                { text: ", ", token: "punctuation" },
+                { text: "key", token: "variable" },
+                { text: ".split", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "'.'", token: "string" },
+                { text: "), ", token: "punctuation" },
+                { text: "obj", token: "variable" },
+                { text: ")", token: "punctuation" },
+              ],
+              [],
+              [
+                { text: "def", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "compose", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "*", token: "operator" },
+                { text: "fns", token: "parameter" },
+                { text: "):", token: "punctuation" },
+              ],
+              [
+                { text: "    ", token: "plain" },
+                { text: "return", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "res", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "reduce", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "acc", token: "parameter" },
+                { text: ", ", token: "punctuation" },
+                { text: "fn", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "fn", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "acc", token: "variable" },
+                { text: "), ", token: "punctuation" },
+                { text: "fns", token: "variable" },
+                { text: ", ", token: "punctuation" },
+                { text: "res", token: "variable" },
+                { text: ")", token: "punctuation" },
+              ],
+              [],
+              [
+                { text: "def", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "unfold", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "f", token: "parameter" },
+                { text: ", ", token: "punctuation" },
+                { text: "seed", token: "parameter" },
+                { text: "):", token: "punctuation" },
+              ],
+              [
+                { text: "    ", token: "plain" },
+                { text: '"""Build a list by repeatedly applying f to a seed."""', token: "string" },
+              ],
+              [
+                { text: "    acc", token: "variable" },
+                { text: " = ", token: "operator" },
+                { text: "[]", token: "punctuation" },
+              ],
+              [
+                { text: "    while", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "True", token: "className" },
+                { text: ":", token: "punctuation" },
+              ],
+              [
+                { text: "        result", token: "variable" },
+                { text: " = ", token: "operator" },
+                { text: "f", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "seed", token: "variable" },
+                { text: ")", token: "punctuation" },
+              ],
+              [
+                { text: "        if", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "result", token: "variable" },
+                { text: " is ", token: "keyword" },
+                { text: "None", token: "className" },
+                { text: ":", token: "punctuation" },
+              ],
+              [
+                { text: "            return", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "acc", token: "variable" },
+              ],
+              [
+                { text: "        acc", token: "variable" },
+                { text: ".append", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "result", token: "variable" },
+                { text: "[", token: "punctuation" },
+                { text: "0", token: "number" },
+                { text: "])", token: "punctuation" },
+              ],
+              [
+                { text: "        seed", token: "variable" },
+                { text: " = ", token: "operator" },
+                { text: "result", token: "variable" },
+                { text: "[", token: "punctuation" },
+                { text: "1", token: "number" },
+                { text: "]", token: "punctuation" },
+              ],
+              [],
+            ];
+
+            const fallback = {
+              "activityBar.background": "#181818",
+              "activityBar.foreground": "#d7d7d7",
+              "activityBar.inactiveForeground": "#868686",
+              "activityBar.activeBorder": "#0078d4",
+              "sideBar.background": "#181818",
+              "sideBar.foreground": "#cccccc",
+              "sideBar.border": "#2b2b2b",
+              "tab.activeBackground": "#1f1f1f",
+              "tab.activeForeground": "#ffffff",
+              "tab.inactiveBackground": "#181818",
+              "tab.inactiveForeground": "#9d9d9d",
+              "tab.border": "#2b2b2b",
+              "editor.background": "#1f1f1f",
+              "editor.foreground": "#cccccc",
+              "editor.lineHighlightBackground": "#ffffff0a",
+              "editorLineNumber.foreground": "#6e7681",
+              "editorLineNumber.activeForeground": "#cccccc",
+              "panel.background": "#181818",
+              "panel.border": "#2b2b2b",
+              "statusBar.background": "#181818",
+              "statusBar.foreground": "#cccccc",
+              "statusBar.border": "#2b2b2b",
+              "titleBar.activeBackground": "#181818",
+              "titleBar.activeForeground": "#cccccc",
+            };
+
+            function color(theme, key) {
+              return theme.colors[key] || fallback[key] || theme.colors.foreground || "#cccccc";
+            }
+
+            function solarizedGrey(theme) {
+              return (
+                theme.colors["tab.inactiveForeground"] ||
+                theme.colors["editor.foreground"] ||
+                "#586E75"
+              );
+            }
+
+            function setVar(root, name, value) {
+              root.style.setProperty(name, value);
+            }
+
+            function applyTheme(root, theme) {
+              const solarizedUiGrey = theme.id === "solarized-light" ? solarizedGrey(theme) : null;
+              setVar(root, "--activity-bg", color(theme, "activityBar.background"));
+              setVar(
+                root,
+                "--activity-fg",
+                solarizedUiGrey || color(theme, "activityBar.foreground"),
+              );
+              setVar(
+                root,
+                "--activity-muted",
+                solarizedUiGrey || color(theme, "activityBar.inactiveForeground"),
+              );
+              setVar(root, "--activity-active", color(theme, "activityBar.activeBorder"));
+              setVar(root, "--sidebar-bg", color(theme, "sideBar.background"));
+              setVar(root, "--sidebar-fg", solarizedUiGrey || color(theme, "sideBar.foreground"));
+              setVar(root, "--sidebar-border", color(theme, "sideBar.border"));
+              setVar(root, "--tab-bg", color(theme, "tab.inactiveBackground"));
+              setVar(root, "--tab-active-bg", color(theme, "tab.activeBackground"));
+              setVar(
+                root,
+                "--tab-active-fg",
+                solarizedUiGrey || color(theme, "tab.activeForeground"),
+              );
+              setVar(
+                root,
+                "--tab-inactive-fg",
+                solarizedUiGrey || color(theme, "tab.inactiveForeground"),
+              );
+              setVar(root, "--tab-border", color(theme, "tab.border"));
+              setVar(root, "--editor-bg", color(theme, "editor.background"));
+              setVar(root, "--editor-fg", color(theme, "editor.foreground"));
+              setVar(root, "--editor-line", color(theme, "editor.lineHighlightBackground"));
+              setVar(root, "--gutter-fg", color(theme, "editorLineNumber.foreground"));
+              setVar(root, "--gutter-active-fg", color(theme, "editorLineNumber.activeForeground"));
+              setVar(root, "--panel-bg", color(theme, "panel.background"));
+              setVar(root, "--panel-border", color(theme, "panel.border"));
+              setVar(root, "--status-bg", color(theme, "statusBar.background"));
+              setVar(root, "--status-fg", color(theme, "statusBar.foreground"));
+              setVar(root, "--status-border", color(theme, "statusBar.border"));
+              setVar(root, "--status-remote-bg", color(theme, "statusBarItem.remoteBackground"));
+              setVar(
+                root,
+                "--status-remote-fg",
+                solarizedUiGrey || color(theme, "statusBarItem.remoteForeground"),
+              );
+              setVar(root, "--title-bg", color(theme, "titleBar.activeBackground"));
+              setVar(
+                root,
+                "--title-fg",
+                solarizedUiGrey || color(theme, "titleBar.activeForeground"),
+              );
+              setVar(root, "--token-comment", theme.tokens.comment);
+              setVar(root, "--token-keyword", theme.tokens.keyword);
+              setVar(root, "--token-function", theme.tokens.function);
+              setVar(root, "--token-string", theme.tokens.string);
+              setVar(root, "--token-number", theme.tokens.number);
+              setVar(root, "--token-variable", theme.tokens.variable);
+              setVar(root, "--token-parameter", theme.tokens.parameter);
+              setVar(root, "--token-operator", theme.tokens.operator);
+              setVar(root, "--token-punctuation", theme.tokens.punctuation);
+              setVar(root, "--token-class-name", theme.tokens.className);
+            }
+
+            function renderCode(root) {
+              const code = root.querySelector(".code");
+              codeLines.forEach((segments, index) => {
+                const line = document.createElement("div");
+                line.className = "line";
+                line.dataset.lineIndex = String(index);
+
+                const lineNumber = document.createElement("span");
+                lineNumber.className = "line-number";
+                lineNumber.textContent = String(index + 1);
+                line.appendChild(lineNumber);
+
+                const lineCode = document.createElement("span");
+                lineCode.className = "line-code";
+                segments.forEach((segment) => {
+                  [...segment.text].forEach((char) => {
+                    const span = document.createElement("span");
+                    span.className =
+                      segment.token === "plain"
+                        ? "char"
+                        : "char tok-" +
+                          segment.token.replace(/[A-Z]/g, (match) => "-" + match.toLowerCase());
+                    span.dataset.lineIndex = String(index);
+                    span.textContent = char;
+                    lineCode.appendChild(span);
+                  });
+                });
+                line.appendChild(lineCode);
+                code.appendChild(line);
+              });
+
+              const caret = document.createElement("span");
+              caret.className = "caret";
+              root.querySelector(".editor").appendChild(caret);
+            }
+
+            function caretPointForElement(editor, el) {
+              const editorBox = editor.getBoundingClientRect();
+              const charBox = el.getBoundingClientRect();
+              return {
+                x: charBox.right - editorBox.left + 2,
+                y: charBox.top - editorBox.top + 3,
+              };
+            }
+
+            function caretPointForLineStart(editor, line) {
+              const editorBox = editor.getBoundingClientRect();
+              const lineBox = line.getBoundingClientRect();
+              const codeBox = line.querySelector(".line-code").getBoundingClientRect();
+              return {
+                x: codeBox.left - editorBox.left,
+                y: lineBox.top - editorBox.top + 3,
+              };
+            }
+
+            function lineHighlightY(editor, line) {
+              const editorBox = editor.getBoundingClientRect();
+              const lineBox = line.getBoundingClientRect();
+              return lineBox.top - editorBox.top;
+            }
+
+            function buildTimeline(root, compositionId) {
+              const tl = gsap.timeline({ paused: true });
+              const editor = root.querySelector(".editor");
+              const caret = root.querySelector(".caret");
+              const activeLine = root.querySelector(".active-line");
+              const lineEls = gsap.utils.toArray(root.querySelectorAll(".line"));
+              const lineStartTimes = [];
+              const charSchedule = [];
+              let cursorTime = 0.95;
+
+              lineEls.forEach((line, lineIndex) => {
+                const lineChars = gsap.utils.toArray(line.querySelectorAll(".char"));
+                lineStartTimes[lineIndex] = cursorTime;
+                lineChars.forEach((char, charIndex) => {
+                  charSchedule.push({ char, time: cursorTime + charIndex * 0.012 });
+                });
+                cursorTime += Math.max(lineChars.length * 0.012, 0.08) + 0.045;
+              });
+
+              gsap.set(activeLine, { y: lineHighlightY(editor, lineEls[0]) });
+              gsap.set(caret, caretPointForLineStart(editor, lineEls[0]));
+
+              tl.from(
+                root.querySelector(".header"),
+                { y: 24, opacity: 0, duration: 0.45, ease: "power3.out" },
+                0,
+              );
+              tl.from(
+                root.querySelector(".workbench"),
+                { y: 42, opacity: 0, scale: 0.986, duration: 0.58, ease: "power3.out" },
+                0.1,
+              );
+              tl.from(activeLine, { opacity: 0, duration: 0.22, ease: "power2.out" }, 0.74);
+              lineStartTimes.forEach((time, lineIndex) => {
+                const line = lineEls[lineIndex];
+                tl.set(activeLine, { y: lineHighlightY(editor, line) }, time);
+                tl.set(caret, caretPointForLineStart(editor, line), time);
+                tl.call(
+                  () => {
+                    lineEls.forEach((item) => item.classList.toggle("is-active", item === line));
+                  },
+                  [],
+                  time,
+                );
+              });
+              charSchedule.forEach(({ char, time }) => {
+                tl.set(char, { opacity: 1 }, time);
+                tl.set(caret, caretPointForElement(editor, char), time + 0.002);
+              });
+              tl.to(
+                root.querySelector(".caret"),
+                { opacity: 0, duration: 0.34, repeat: 25, yoyo: true, ease: "steps(1)" },
+                0.95,
+              );
+              tl.from(
+                root.querySelector(".terminal"),
+                { y: 140, opacity: 0, duration: 0.56, ease: "power3.out" },
+                7.55,
+              );
+              tl.from(
+                root.querySelector(".terminal-body").children,
+                { opacity: 0, y: 8, duration: 0.24, stagger: 0.16, ease: "power2.out" },
+                8.05,
+              );
+              tl.to(
+                root.querySelector(".workbench"),
+                { rotateY: -10.5, z: 74, duration: 0.72, ease: "power2.inOut" },
+                9.35,
+              );
+              tl.to(
+                root.querySelector(".workbench"),
+                { rotateY: 0, z: 0, duration: 0.62, ease: "power2.inOut" },
+                10.08,
+              );
+
+              window.__timelines = window.__timelines || {};
+              window.__timelines[compositionId] = tl;
+
+              const previewTime = new URLSearchParams(window.location.search).get("t");
+              if (previewTime !== null) {
+                tl.time(Number(previewTime));
+              }
+            }
+
+            window.createVSCodeThemeComposition = (compositionId, themeOrId) => {
+              const root =
+                document.querySelector(
+                  '[data-composition-id="' + compositionId + '"] .vscode-theme-scene',
+                ) ||
+                document.querySelector(
+                  '.vscode-theme-scene[data-composition-id="' + compositionId + '"]',
+                ) ||
+                document.querySelector('[data-composition-id="' + compositionId + '"]');
+              const theme =
+                typeof themeOrId === "string"
+                  ? window.VSCODE_THEME_REGISTRY.find((item) => item.id === themeOrId)
+                  : themeOrId;
+              if (!root || !theme) return;
+              root.querySelector(".theme-label").textContent = theme.label;
+              root.querySelector(".theme-source").textContent = theme.sourceFile;
+              applyTheme(root, theme);
+              renderCode(root);
+              buildTimeline(root, compositionId);
+            };
+          })();
+        </script>
+        <script>
+          window.__timelines = window.__timelines || {};
+          window.__timelines["vscode-high-contrast-light"] =
+            window.__timelines["vscode-high-contrast-light"] || gsap.timeline({ paused: true });
+          window.createVSCodeThemeComposition("vscode-high-contrast-light", {
+            id: "high-contrast-light",
+            label: "Default High Contrast Light",
+            sourceFile: "hc_light.json",
+            uiTheme: "vs",
+            colors: {
+              "statusBarItem.remoteBackground": "#FFFFFF",
+              "statusBarItem.remoteForeground": "#000000",
+            },
+            tokens: {
+              comment: "#515151",
+              keyword: "#EE0000",
+              function: "#5e2cbc",
+              string: "#811F3F",
+              number: "#096d48",
+              variable: "#02715D",
+              parameter: "#001080",
+              operator: "#EE0000",
+              punctuation: "#D16969",
+              className: "#185E73",
+            },
+          });
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
 <div
   data-composition-id="code-snippet-high-contrast-light"
   data-composition-src="compositions/code-snippet-high-contrast-light.html"
@@ -29,8 +1088,13 @@ It runs for 11 seconds at 1920×1080. Paste this into your composition:
 ></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.
+## Features
+
+- Full VS Code workbench recreation — activity bar, sidebar, explorer tree, editor tabs, breadcrumbs, terminal panel, status bar
+- Per-character typing animation with cursor tracking and active line highlight
+- Colors sourced from official `microsoft/vscode` built-in theme JSON
+- 3D perspective tilt at the end of the typing sequence
+- Terminal panel with mock test output
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/code-snippet-high-contrast.mdx b/docs/catalog/blocks/code-snippet-high-contrast.mdx
index 12fe78ba84..5feced5a83 100644
--- a/docs/catalog/blocks/code-snippet-high-contrast.mdx
+++ b/docs/catalog/blocks/code-snippet-high-contrast.mdx
@@ -3,21 +3,1083 @@ title: "Code Snippet - High Contrast"
 description: "VS Code workbench with per-character typing animation in the High Contrast theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-high-contrast.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-high-contrast.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/code-snippet-high-contrast.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Code Snippet - High Contrast preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add code-snippet-high-contrast
-```
+<InstallCommand command="npx hyperframes add code-snippet-high-contrast" />
 
 That writes `compositions/code-snippet-high-contrast.html`, plus 1 supporting file under `assets/`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`code-snippet-high-contrast.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Default High Contrast VS Code Theme Composition</title>
+  </head>
+  <body>
+    <template id="vscode-high-contrast-template">
+      <div
+        class="vscode-theme-scene"
+        data-composition-id="vscode-high-contrast"
+        data-width="1920"
+        data-height="1080"
+      >
+        <main class="scene-content">
+          <section class="header">
+            <div>
+              <p class="kicker">Official VS Code built-in theme</p>
+              <h1 class="title"><span class="theme-label">Default High Contrast</span></h1>
+            </div>
+            <p class="source-note">
+              Typing `functional_toolkit.py` with workbench colors from
+              <span class="theme-source">hc_black.json</span>.
+            </p>
+          </section>
+
+          <section class="workbench">
+            <div class="titlebar">
+              <div class="traffic"><span></span><span></span><span></span></div>
+              <div class="window-title">functional-toolkit - Visual Studio Code</div>
+              <div class="command-center">Search</div>
+            </div>
+
+            <aside class="activity" aria-label="Activity bar">
+              <svg class="activity-icon active" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="currentColor"
+                  d="M4 4h7v7H4V4Zm9 0h7v7h-7V4ZM4 13h7v7H4v-7Zm9 0h7v7h-7v-7Z"
+                />
+              </svg>
+              <svg class="activity-icon" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  d="m21 21-5.2-5.2M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Z"
+                />
+              </svg>
+              <svg class="activity-icon" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  d="M8 18 3 12l5-6m8 12 5-6-5-6"
+                />
+              </svg>
+              <svg class="activity-icon" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  d="M12 3v18m0-18 6 6m-6-6L6 9m6 12 6-6m-6 6-6-6"
+                />
+              </svg>
+            </aside>
+
+            <aside class="sidebar">
+              <div class="sidebar-title">Explorer</div>
+              <div class="section-title">⌄ Functional Toolkit</div>
+              <div class="tree">
+                <div class="tree-row">⌄ src</div>
+                <div class="tree-row child selected">◇ functional_toolkit.py</div>
+                <div class="tree-row child">◇ test_toolkit.py</div>
+                <div class="tree-row">◇ pyproject.toml</div>
+                <div class="tree-row">◇ README.md</div>
+              </div>
+            </aside>
+
+            <section class="editor-area">
+              <div class="tabs">
+                <div class="tab">◇ functional_toolkit.py</div>
+                <div class="tab inactive">README.md</div>
+              </div>
+              <div class="breadcrumbs">functional-toolkit › src › functional_toolkit.py</div>
+              <div class="editor">
+                <div class="active-line"></div>
+                <div class="code"></div>
+              </div>
+              <div class="terminal">
+                <div class="panel-tabs">
+                  <span class="active">Terminal</span><span>Problems</span><span>Output</span>
+                </div>
+                <div class="terminal-body">
+                  <div><span class="prompt">functional-toolkit %</span> python -m pytest</div>
+                  <div>collected 3 items</div>
+                  <div>tests/test_toolkit.py ... <span class="tok-comment">passed</span></div>
+                </div>
+              </div>
+            </section>
+
+            <footer class="statusbar">
+              <div class="status-left">
+                <span class="remote">main</span>
+                <span>0 errors</span>
+                <span>0 warnings</span>
+              </div>
+              <div class="status-right">
+                <span>Ln 17, Col 1</span>
+                <span>Spaces: 4</span>
+                <span>UTF-8</span>
+                <span>Python 3.12</span>
+              </div>
+            </footer>
+          </section>
+        </main>
+        <style>
+          * {
+            box-sizing: border-box;
+            letter-spacing: 0;
+          }
+
+          html,
+          body {
+            margin: 0;
+            width: 1920px;
+            height: 1080px;
+            overflow: hidden;
+            background: #000000;
+            font-family:
+              Inter,
+              -apple-system,
+              BlinkMacSystemFont,
+              "Segoe UI",
+              sans-serif;
+          }
+
+          .vscode-theme-scene {
+            --activity-bg: #181818;
+            --activity-fg: #d7d7d7;
+            --activity-muted: #868686;
+            --activity-active: #0078d4;
+            --sidebar-bg: #181818;
+            --sidebar-fg: #cccccc;
+            --sidebar-border: #2b2b2b;
+            --tab-bg: #181818;
+            --tab-active-bg: #1f1f1f;
+            --tab-active-fg: #ffffff;
+            --tab-inactive-fg: #9d9d9d;
+            --tab-border: #2b2b2b;
+            --editor-bg: #1f1f1f;
+            --editor-fg: #cccccc;
+            --editor-line: rgba(255, 255, 255, 0.04);
+            --gutter-fg: #6e7681;
+            --gutter-active-fg: #cccccc;
+            --panel-bg: #181818;
+            --panel-border: #2b2b2b;
+            --status-bg: #181818;
+            --status-fg: #cccccc;
+            --status-border: #2b2b2b;
+            --title-bg: #181818;
+            --title-fg: #cccccc;
+            --token-comment: #6a9955;
+            --token-keyword: #c586c0;
+            --token-function: #dcdcaa;
+            --token-string: #ce9178;
+            --token-number: #b5cea8;
+            --token-variable: #9cdcfe;
+            --token-parameter: #9cdcfe;
+            --token-operator: #d4d4d4;
+            --token-punctuation: #d4d4d4;
+            --token-class-name: #4ec9b0;
+            position: relative;
+            width: 1920px;
+            height: 1080px;
+            overflow: hidden;
+            background:
+              linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.32)),
+              url("../assets/background.jpeg") center / cover no-repeat;
+            color: var(--editor-fg);
+          }
+
+          .scene-content {
+            position: relative;
+            z-index: 1;
+            width: 100%;
+            height: 100%;
+            padding: 54px 70px 92px;
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+            perspective: 2200px;
+            perspective-origin: 56% 52%;
+          }
+
+          .header {
+            display: flex;
+            align-items: end;
+            justify-content: space-between;
+            min-height: 66px;
+            text-shadow:
+              0 2px 12px rgba(0, 0, 0, 0.42),
+              0 14px 34px rgba(0, 0, 0, 0.32);
+          }
+
+          .kicker {
+            margin: 0 0 7px;
+            color: var(--gutter-fg);
+            font-size: 15px;
+            font-weight: 650;
+            text-transform: uppercase;
+            text-shadow:
+              0 2px 8px rgba(0, 0, 0, 0.48),
+              0 10px 26px rgba(0, 0, 0, 0.36);
+          }
+
+          .title {
+            margin: 0;
+            color: var(--editor-fg);
+            font-size: 44px;
+            line-height: 1;
+            font-weight: 760;
+          }
+
+          .source-note {
+            width: 510px;
+            color: var(--gutter-fg);
+            font-size: 16px;
+            line-height: 1.35;
+            text-align: right;
+            text-shadow:
+              0 2px 10px rgba(0, 0, 0, 0.46),
+              0 12px 30px rgba(0, 0, 0, 0.34);
+          }
+
+          .workbench {
+            height: 824px;
+            display: grid;
+            grid-template-columns: 54px 290px 1fr;
+            grid-template-rows: 36px 1fr 26px;
+            overflow: hidden;
+            border: 1px solid var(--sidebar-border);
+            border-radius: 8px;
+            background: var(--editor-bg);
+            box-shadow: 0 34px 90px rgba(0, 0, 0, 0.42);
+            transform: translateZ(0);
+            transform-origin: 82% 50%;
+            transform-style: preserve-3d;
+            will-change: transform;
+          }
+
+          .titlebar {
+            grid-column: 1 / -1;
+            display: grid;
+            grid-template-columns: 120px 1fr 210px;
+            align-items: center;
+            background: var(--title-bg);
+            color: var(--title-fg);
+            border-bottom: 1px solid var(--tab-border);
+            font-size: 12px;
+          }
+
+          .traffic {
+            display: flex;
+            gap: 8px;
+            padding-left: 18px;
+          }
+
+          .traffic span {
+            width: 12px;
+            height: 12px;
+            border-radius: 999px;
+          }
+
+          .traffic span:nth-child(1) {
+            background: #ff5f57;
+          }
+          .traffic span:nth-child(2) {
+            background: #ffbd2e;
+          }
+          .traffic span:nth-child(3) {
+            background: #28c840;
+          }
+
+          .window-title {
+            justify-self: center;
+            opacity: 0.84;
+          }
+
+          .command-center {
+            justify-self: end;
+            width: 176px;
+            height: 22px;
+            margin-right: 16px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border: 1px solid color-mix(in srgb, var(--title-fg), transparent 78%);
+            border-radius: 5px;
+            color: color-mix(in srgb, var(--title-fg), transparent 18%);
+          }
+
+          .activity {
+            grid-row: 2 / 3;
+            background: var(--activity-bg);
+            border-right: 1px solid var(--sidebar-border);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 10px 0;
+            gap: 18px;
+          }
+
+          .activity-icon {
+            width: 28px;
+            height: 28px;
+            color: var(--activity-muted);
+          }
+
+          .activity-icon.active {
+            color: var(--activity-fg);
+            border-left: 2px solid var(--activity-active);
+            padding-left: 4px;
+          }
+
+          .sidebar {
+            grid-row: 2 / 3;
+            background: var(--sidebar-bg);
+            color: var(--sidebar-fg);
+            border-right: 1px solid var(--sidebar-border);
+            display: flex;
+            flex-direction: column;
+            min-width: 0;
+          }
+
+          .sidebar-title {
+            height: 38px;
+            display: flex;
+            align-items: center;
+            padding: 0 20px;
+            color: var(--sidebar-fg);
+            font-size: 11px;
+            text-transform: uppercase;
+          }
+
+          .section-title {
+            height: 24px;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            padding: 0 14px;
+            background: color-mix(in srgb, var(--sidebar-bg), var(--sidebar-fg) 5%);
+            border-top: 1px solid var(--sidebar-border);
+            border-bottom: 1px solid var(--sidebar-border);
+            color: var(--sidebar-fg);
+            font-size: 11px;
+            font-weight: 700;
+          }
+
+          .tree {
+            padding: 8px 0;
+            font-size: 13px;
+            line-height: 24px;
+          }
+
+          .tree-row {
+            height: 24px;
+            display: flex;
+            align-items: center;
+            gap: 7px;
+            padding: 0 10px 0 18px;
+            color: color-mix(in srgb, var(--sidebar-fg), transparent 8%);
+            white-space: nowrap;
+          }
+
+          .tree-row.child {
+            padding-left: 34px;
+          }
+
+          .tree-row.selected {
+            background: color-mix(in srgb, var(--sidebar-fg), transparent 88%);
+            color: var(--sidebar-fg);
+          }
+
+          .editor-area {
+            grid-row: 2 / 3;
+            display: grid;
+            grid-template-rows: 36px 30px 1fr 138px;
+            min-width: 0;
+            background: var(--editor-bg);
+          }
+
+          .tabs {
+            display: flex;
+            background: var(--tab-bg);
+            border-bottom: 1px solid var(--tab-border);
+          }
+
+          .tab {
+            width: 205px;
+            height: 36px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 0 13px;
+            border-right: 1px solid var(--tab-border);
+            background: var(--tab-active-bg);
+            color: var(--tab-active-fg);
+            border-top: 2px solid var(--activity-active);
+            font-size: 13px;
+          }
+
+          .tab.inactive {
+            background: var(--tab-bg);
+            color: var(--tab-inactive-fg);
+            border-top-color: transparent;
+          }
+
+          .breadcrumbs {
+            display: flex;
+            align-items: center;
+            gap: 7px;
+            padding: 0 18px;
+            color: var(--gutter-fg);
+            border-bottom: 1px solid color-mix(in srgb, var(--tab-border), transparent 20%);
+            font-size: 12px;
+          }
+
+          .editor {
+            position: relative;
+            overflow: hidden;
+            background: var(--editor-bg);
+            color: var(--editor-fg);
+            font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+            font-size: 18px;
+            line-height: 1.52;
+          }
+
+          .active-line {
+            position: absolute;
+            left: 0;
+            right: 0;
+            top: 0;
+            height: 28px;
+            background: var(--editor-line);
+            will-change: transform;
+          }
 
-It runs for 11 seconds at 1920×1080. Paste this into your composition:
+          .code {
+            position: relative;
+            padding: 20px 36px 18px 0;
+          }
 
-```html index.html
+          .line {
+            height: 28px;
+            display: grid;
+            grid-template-columns: 72px 1fr;
+            align-items: center;
+          }
+
+          .line-number {
+            padding-right: 18px;
+            color: var(--gutter-fg);
+            text-align: right;
+            user-select: none;
+          }
+
+          .line.is-active .line-number {
+            color: var(--gutter-active-fg);
+          }
+
+          .line-code {
+            white-space: pre;
+          }
+
+          .char {
+            opacity: 0;
+          }
+
+          .tok-comment {
+            color: var(--token-comment);
+          }
+          .tok-keyword {
+            color: var(--token-keyword);
+          }
+          .tok-function {
+            color: var(--token-function);
+          }
+          .tok-string {
+            color: var(--token-string);
+          }
+          .tok-number {
+            color: var(--token-number);
+          }
+          .tok-variable {
+            color: var(--token-variable);
+          }
+          .tok-parameter {
+            color: var(--token-parameter);
+          }
+          .tok-operator {
+            color: var(--token-operator);
+          }
+          .tok-punctuation {
+            color: var(--token-punctuation);
+          }
+          .tok-class-name {
+            color: var(--token-class-name);
+          }
+
+          .caret {
+            position: absolute;
+            left: 0;
+            top: 0;
+            z-index: 3;
+            display: block;
+            width: 2px;
+            height: 22px;
+            background: var(--editor-fg);
+            pointer-events: none;
+            will-change: transform, opacity;
+          }
+
+          .terminal {
+            display: grid;
+            grid-template-rows: 32px 1fr;
+            background: var(--panel-bg);
+            border-top: 1px solid var(--panel-border);
+            color: var(--editor-fg);
+            font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+            font-size: 14px;
+          }
+
+          .panel-tabs {
+            display: flex;
+            align-items: center;
+            gap: 22px;
+            padding: 0 18px;
+            border-bottom: 1px solid var(--panel-border);
+            color: var(--gutter-fg);
+            font-family:
+              Inter,
+              -apple-system,
+              BlinkMacSystemFont,
+              "Segoe UI",
+              sans-serif;
+            font-size: 12px;
+            text-transform: uppercase;
+          }
+
+          .panel-tabs .active {
+            color: var(--editor-fg);
+            border-bottom: 1px solid var(--activity-active);
+            height: 32px;
+            display: flex;
+            align-items: center;
+          }
+
+          .terminal-body {
+            padding: 12px 20px;
+            color: var(--editor-fg);
+            line-height: 1.8;
+          }
+
+          .prompt {
+            color: var(--token-function);
+          }
+
+          .statusbar {
+            grid-column: 1 / -1;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            background: var(--status-bg);
+            color: var(--status-fg);
+            border-top: 1px solid var(--status-border);
+            font-size: 12px;
+          }
+
+          .status-left,
+          .status-right {
+            display: flex;
+            align-items: center;
+            gap: 18px;
+            padding: 0 12px;
+          }
+
+          .remote {
+            align-self: stretch;
+            display: flex;
+            align-items: center;
+            padding: 0 12px;
+            margin-left: -12px;
+            background: var(--status-remote-bg, var(--activity-active));
+            color: var(--status-remote-fg, #ffffff);
+          }
+
+          svg {
+            display: block;
+          }
+        </style>
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (() => {
+            const codeLines = [
+              [{ text: "# A small functional toolkit", token: "comment" }],
+              [
+                { text: "def", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "pluck_deep", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "key", token: "parameter" },
+                { text: "):", token: "punctuation" },
+              ],
+              [
+                { text: "    ", token: "plain" },
+                { text: "return", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "obj", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "reduce", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "acc", token: "parameter" },
+                { text: ", ", token: "punctuation" },
+                { text: "k", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "acc", token: "variable" },
+                { text: "[", token: "punctuation" },
+                { text: "k", token: "variable" },
+                { text: "]", token: "punctuation" },
+                { text: ", ", token: "punctuation" },
+                { text: "key", token: "variable" },
+                { text: ".split", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "'.'", token: "string" },
+                { text: "), ", token: "punctuation" },
+                { text: "obj", token: "variable" },
+                { text: ")", token: "punctuation" },
+              ],
+              [],
+              [
+                { text: "def", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "compose", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "*", token: "operator" },
+                { text: "fns", token: "parameter" },
+                { text: "):", token: "punctuation" },
+              ],
+              [
+                { text: "    ", token: "plain" },
+                { text: "return", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "res", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "reduce", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "acc", token: "parameter" },
+                { text: ", ", token: "punctuation" },
+                { text: "fn", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "fn", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "acc", token: "variable" },
+                { text: "), ", token: "punctuation" },
+                { text: "fns", token: "variable" },
+                { text: ", ", token: "punctuation" },
+                { text: "res", token: "variable" },
+                { text: ")", token: "punctuation" },
+              ],
+              [],
+              [
+                { text: "def", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "unfold", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "f", token: "parameter" },
+                { text: ", ", token: "punctuation" },
+                { text: "seed", token: "parameter" },
+                { text: "):", token: "punctuation" },
+              ],
+              [
+                { text: "    ", token: "plain" },
+                { text: '"""Build a list by repeatedly applying f to a seed."""', token: "string" },
+              ],
+              [
+                { text: "    acc", token: "variable" },
+                { text: " = ", token: "operator" },
+                { text: "[]", token: "punctuation" },
+              ],
+              [
+                { text: "    while", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "True", token: "className" },
+                { text: ":", token: "punctuation" },
+              ],
+              [
+                { text: "        result", token: "variable" },
+                { text: " = ", token: "operator" },
+                { text: "f", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "seed", token: "variable" },
+                { text: ")", token: "punctuation" },
+              ],
+              [
+                { text: "        if", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "result", token: "variable" },
+                { text: " is ", token: "keyword" },
+                { text: "None", token: "className" },
+                { text: ":", token: "punctuation" },
+              ],
+              [
+                { text: "            return", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "acc", token: "variable" },
+              ],
+              [
+                { text: "        acc", token: "variable" },
+                { text: ".append", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "result", token: "variable" },
+                { text: "[", token: "punctuation" },
+                { text: "0", token: "number" },
+                { text: "])", token: "punctuation" },
+              ],
+              [
+                { text: "        seed", token: "variable" },
+                { text: " = ", token: "operator" },
+                { text: "result", token: "variable" },
+                { text: "[", token: "punctuation" },
+                { text: "1", token: "number" },
+                { text: "]", token: "punctuation" },
+              ],
+              [],
+            ];
+
+            const fallback = {
+              "activityBar.background": "#181818",
+              "activityBar.foreground": "#d7d7d7",
+              "activityBar.inactiveForeground": "#868686",
+              "activityBar.activeBorder": "#0078d4",
+              "sideBar.background": "#181818",
+              "sideBar.foreground": "#cccccc",
+              "sideBar.border": "#2b2b2b",
+              "tab.activeBackground": "#1f1f1f",
+              "tab.activeForeground": "#ffffff",
+              "tab.inactiveBackground": "#181818",
+              "tab.inactiveForeground": "#9d9d9d",
+              "tab.border": "#2b2b2b",
+              "editor.background": "#1f1f1f",
+              "editor.foreground": "#cccccc",
+              "editor.lineHighlightBackground": "#ffffff0a",
+              "editorLineNumber.foreground": "#6e7681",
+              "editorLineNumber.activeForeground": "#cccccc",
+              "panel.background": "#181818",
+              "panel.border": "#2b2b2b",
+              "statusBar.background": "#181818",
+              "statusBar.foreground": "#cccccc",
+              "statusBar.border": "#2b2b2b",
+              "titleBar.activeBackground": "#181818",
+              "titleBar.activeForeground": "#cccccc",
+            };
+
+            function color(theme, key) {
+              return theme.colors[key] || fallback[key] || theme.colors.foreground || "#cccccc";
+            }
+
+            function solarizedGrey(theme) {
+              return (
+                theme.colors["tab.inactiveForeground"] ||
+                theme.colors["editor.foreground"] ||
+                "#586E75"
+              );
+            }
+
+            function setVar(root, name, value) {
+              root.style.setProperty(name, value);
+            }
+
+            function applyTheme(root, theme) {
+              const solarizedUiGrey = theme.id === "solarized-light" ? solarizedGrey(theme) : null;
+              setVar(root, "--activity-bg", color(theme, "activityBar.background"));
+              setVar(
+                root,
+                "--activity-fg",
+                solarizedUiGrey || color(theme, "activityBar.foreground"),
+              );
+              setVar(
+                root,
+                "--activity-muted",
+                solarizedUiGrey || color(theme, "activityBar.inactiveForeground"),
+              );
+              setVar(root, "--activity-active", color(theme, "activityBar.activeBorder"));
+              setVar(root, "--sidebar-bg", color(theme, "sideBar.background"));
+              setVar(root, "--sidebar-fg", solarizedUiGrey || color(theme, "sideBar.foreground"));
+              setVar(root, "--sidebar-border", color(theme, "sideBar.border"));
+              setVar(root, "--tab-bg", color(theme, "tab.inactiveBackground"));
+              setVar(root, "--tab-active-bg", color(theme, "tab.activeBackground"));
+              setVar(
+                root,
+                "--tab-active-fg",
+                solarizedUiGrey || color(theme, "tab.activeForeground"),
+              );
+              setVar(
+                root,
+                "--tab-inactive-fg",
+                solarizedUiGrey || color(theme, "tab.inactiveForeground"),
+              );
+              setVar(root, "--tab-border", color(theme, "tab.border"));
+              setVar(root, "--editor-bg", color(theme, "editor.background"));
+              setVar(root, "--editor-fg", color(theme, "editor.foreground"));
+              setVar(root, "--editor-line", color(theme, "editor.lineHighlightBackground"));
+              setVar(root, "--gutter-fg", color(theme, "editorLineNumber.foreground"));
+              setVar(root, "--gutter-active-fg", color(theme, "editorLineNumber.activeForeground"));
+              setVar(root, "--panel-bg", color(theme, "panel.background"));
+              setVar(root, "--panel-border", color(theme, "panel.border"));
+              setVar(root, "--status-bg", color(theme, "statusBar.background"));
+              setVar(root, "--status-fg", color(theme, "statusBar.foreground"));
+              setVar(root, "--status-border", color(theme, "statusBar.border"));
+              setVar(root, "--status-remote-bg", color(theme, "statusBarItem.remoteBackground"));
+              setVar(
+                root,
+                "--status-remote-fg",
+                solarizedUiGrey || color(theme, "statusBarItem.remoteForeground"),
+              );
+              setVar(root, "--title-bg", color(theme, "titleBar.activeBackground"));
+              setVar(
+                root,
+                "--title-fg",
+                solarizedUiGrey || color(theme, "titleBar.activeForeground"),
+              );
+              setVar(root, "--token-comment", theme.tokens.comment);
+              setVar(root, "--token-keyword", theme.tokens.keyword);
+              setVar(root, "--token-function", theme.tokens.function);
+              setVar(root, "--token-string", theme.tokens.string);
+              setVar(root, "--token-number", theme.tokens.number);
+              setVar(root, "--token-variable", theme.tokens.variable);
+              setVar(root, "--token-parameter", theme.tokens.parameter);
+              setVar(root, "--token-operator", theme.tokens.operator);
+              setVar(root, "--token-punctuation", theme.tokens.punctuation);
+              setVar(root, "--token-class-name", theme.tokens.className);
+            }
+
+            function renderCode(root) {
+              const code = root.querySelector(".code");
+              codeLines.forEach((segments, index) => {
+                const line = document.createElement("div");
+                line.className = "line";
+                line.dataset.lineIndex = String(index);
+
+                const lineNumber = document.createElement("span");
+                lineNumber.className = "line-number";
+                lineNumber.textContent = String(index + 1);
+                line.appendChild(lineNumber);
+
+                const lineCode = document.createElement("span");
+                lineCode.className = "line-code";
+                segments.forEach((segment) => {
+                  [...segment.text].forEach((char) => {
+                    const span = document.createElement("span");
+                    span.className =
+                      segment.token === "plain"
+                        ? "char"
+                        : "char tok-" +
+                          segment.token.replace(/[A-Z]/g, (match) => "-" + match.toLowerCase());
+                    span.dataset.lineIndex = String(index);
+                    span.textContent = char;
+                    lineCode.appendChild(span);
+                  });
+                });
+                line.appendChild(lineCode);
+                code.appendChild(line);
+              });
+
+              const caret = document.createElement("span");
+              caret.className = "caret";
+              root.querySelector(".editor").appendChild(caret);
+            }
+
+            function caretPointForElement(editor, el) {
+              const editorBox = editor.getBoundingClientRect();
+              const charBox = el.getBoundingClientRect();
+              return {
+                x: charBox.right - editorBox.left + 2,
+                y: charBox.top - editorBox.top + 3,
+              };
+            }
+
+            function caretPointForLineStart(editor, line) {
+              const editorBox = editor.getBoundingClientRect();
+              const lineBox = line.getBoundingClientRect();
+              const codeBox = line.querySelector(".line-code").getBoundingClientRect();
+              return {
+                x: codeBox.left - editorBox.left,
+                y: lineBox.top - editorBox.top + 3,
+              };
+            }
+
+            function lineHighlightY(editor, line) {
+              const editorBox = editor.getBoundingClientRect();
+              const lineBox = line.getBoundingClientRect();
+              return lineBox.top - editorBox.top;
+            }
+
+            function buildTimeline(root, compositionId) {
+              const tl = gsap.timeline({ paused: true });
+              const editor = root.querySelector(".editor");
+              const caret = root.querySelector(".caret");
+              const activeLine = root.querySelector(".active-line");
+              const lineEls = gsap.utils.toArray(root.querySelectorAll(".line"));
+              const lineStartTimes = [];
+              const charSchedule = [];
+              let cursorTime = 0.95;
+
+              lineEls.forEach((line, lineIndex) => {
+                const lineChars = gsap.utils.toArray(line.querySelectorAll(".char"));
+                lineStartTimes[lineIndex] = cursorTime;
+                lineChars.forEach((char, charIndex) => {
+                  charSchedule.push({ char, time: cursorTime + charIndex * 0.012 });
+                });
+                cursorTime += Math.max(lineChars.length * 0.012, 0.08) + 0.045;
+              });
+
+              gsap.set(activeLine, { y: lineHighlightY(editor, lineEls[0]) });
+              gsap.set(caret, caretPointForLineStart(editor, lineEls[0]));
+
+              tl.from(
+                root.querySelector(".header"),
+                { y: 24, opacity: 0, duration: 0.45, ease: "power3.out" },
+                0,
+              );
+              tl.from(
+                root.querySelector(".workbench"),
+                { y: 42, opacity: 0, scale: 0.986, duration: 0.58, ease: "power3.out" },
+                0.1,
+              );
+              tl.from(activeLine, { opacity: 0, duration: 0.22, ease: "power2.out" }, 0.74);
+              lineStartTimes.forEach((time, lineIndex) => {
+                const line = lineEls[lineIndex];
+                tl.set(activeLine, { y: lineHighlightY(editor, line) }, time);
+                tl.set(caret, caretPointForLineStart(editor, line), time);
+                tl.call(
+                  () => {
+                    lineEls.forEach((item) => item.classList.toggle("is-active", item === line));
+                  },
+                  [],
+                  time,
+                );
+              });
+              charSchedule.forEach(({ char, time }) => {
+                tl.set(char, { opacity: 1 }, time);
+                tl.set(caret, caretPointForElement(editor, char), time + 0.002);
+              });
+              tl.to(
+                root.querySelector(".caret"),
+                { opacity: 0, duration: 0.34, repeat: 25, yoyo: true, ease: "steps(1)" },
+                0.95,
+              );
+              tl.from(
+                root.querySelector(".terminal"),
+                { y: 140, opacity: 0, duration: 0.56, ease: "power3.out" },
+                7.55,
+              );
+              tl.from(
+                root.querySelector(".terminal-body").children,
+                { opacity: 0, y: 8, duration: 0.24, stagger: 0.16, ease: "power2.out" },
+                8.05,
+              );
+              tl.to(
+                root.querySelector(".workbench"),
+                { rotateY: -10.5, z: 74, duration: 0.72, ease: "power2.inOut" },
+                9.35,
+              );
+              tl.to(
+                root.querySelector(".workbench"),
+                { rotateY: 0, z: 0, duration: 0.62, ease: "power2.inOut" },
+                10.08,
+              );
+
+              window.__timelines = window.__timelines || {};
+              window.__timelines[compositionId] = tl;
+
+              const previewTime = new URLSearchParams(window.location.search).get("t");
+              if (previewTime !== null) {
+                tl.time(Number(previewTime));
+              }
+            }
+
+            window.createVSCodeThemeComposition = (compositionId, themeOrId) => {
+              const root =
+                document.querySelector(
+                  '[data-composition-id="' + compositionId + '"] .vscode-theme-scene',
+                ) ||
+                document.querySelector(
+                  '.vscode-theme-scene[data-composition-id="' + compositionId + '"]',
+                ) ||
+                document.querySelector('[data-composition-id="' + compositionId + '"]');
+              const theme =
+                typeof themeOrId === "string"
+                  ? window.VSCODE_THEME_REGISTRY.find((item) => item.id === themeOrId)
+                  : themeOrId;
+              if (!root || !theme) return;
+              root.querySelector(".theme-label").textContent = theme.label;
+              root.querySelector(".theme-source").textContent = theme.sourceFile;
+              applyTheme(root, theme);
+              renderCode(root);
+              buildTimeline(root, compositionId);
+            };
+          })();
+        </script>
+        <script>
+          window.__timelines = window.__timelines || {};
+          window.__timelines["vscode-high-contrast"] =
+            window.__timelines["vscode-high-contrast"] || gsap.timeline({ paused: true });
+          window.createVSCodeThemeComposition("vscode-high-contrast", {
+            id: "high-contrast",
+            label: "Default High Contrast",
+            sourceFile: "hc_black.json",
+            uiTheme: "vs-dark",
+            colors: {
+              "editor.background": "#000000",
+              "editor.foreground": "#FFFFFF",
+              "editor.selectionBackground": "#FFFFFF",
+              "sideBarTitle.foreground": "#FFFFFF",
+              "statusBarItem.remoteBackground": "#00000000",
+            },
+            tokens: {
+              comment: "#7ca668",
+              keyword: "#C586C0",
+              function: "#DCDCAA",
+              string: "#d16969",
+              number: "#b5cea8",
+              variable: "#9CDCFE",
+              parameter: "#9CDCFE",
+              operator: "#569cd6",
+              punctuation: "#4EC9B0",
+              className: "#4EC9B0",
+            },
+          });
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
 <div
   data-composition-id="code-snippet-high-contrast"
   data-composition-src="compositions/code-snippet-high-contrast.html"
@@ -29,8 +1091,13 @@ It runs for 11 seconds at 1920×1080. Paste this into your composition:
 ></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.
+## Features
+
+- Full VS Code workbench recreation — activity bar, sidebar, explorer tree, editor tabs, breadcrumbs, terminal panel, status bar
+- Per-character typing animation with cursor tracking and active line highlight
+- Colors sourced from official `microsoft/vscode` built-in theme JSON
+- 3D perspective tilt at the end of the typing sequence
+- Terminal panel with mock test output
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/code-snippet-light-2026.mdx b/docs/catalog/blocks/code-snippet-light-2026.mdx
index c294f8c434..dcfe00fe88 100644
--- a/docs/catalog/blocks/code-snippet-light-2026.mdx
+++ b/docs/catalog/blocks/code-snippet-light-2026.mdx
@@ -3,21 +3,1119 @@ title: "Code Snippet - Light 2026"
 description: "VS Code workbench with per-character typing animation in the Light 2026 theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-light-2026.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-light-2026.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/code-snippet-light-2026.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Code Snippet - Light 2026 preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add code-snippet-light-2026
-```
+<InstallCommand command="npx hyperframes add code-snippet-light-2026" />
 
 That writes `compositions/code-snippet-light-2026.html`, plus 1 supporting file under `assets/`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`code-snippet-light-2026.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Light 2026 VS Code Theme Composition</title>
+  </head>
+  <body>
+    <template id="vscode-light-2026-template">
+      <div
+        class="vscode-theme-scene"
+        data-composition-id="vscode-light-2026"
+        data-width="1920"
+        data-height="1080"
+      >
+        <main class="scene-content">
+          <section class="header">
+            <div>
+              <p class="kicker">Official VS Code built-in theme</p>
+              <h1 class="title"><span class="theme-label">Light 2026</span></h1>
+            </div>
+            <p class="source-note">
+              Typing `functional_toolkit.py` with workbench colors from
+              <span class="theme-source">2026-light.json</span>.
+            </p>
+          </section>
+
+          <section class="workbench">
+            <div class="titlebar">
+              <div class="traffic"><span></span><span></span><span></span></div>
+              <div class="window-title">functional-toolkit - Visual Studio Code</div>
+              <div class="command-center">Search</div>
+            </div>
+
+            <aside class="activity" aria-label="Activity bar">
+              <svg class="activity-icon active" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="currentColor"
+                  d="M4 4h7v7H4V4Zm9 0h7v7h-7V4ZM4 13h7v7H4v-7Zm9 0h7v7h-7v-7Z"
+                />
+              </svg>
+              <svg class="activity-icon" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  d="m21 21-5.2-5.2M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Z"
+                />
+              </svg>
+              <svg class="activity-icon" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  d="M8 18 3 12l5-6m8 12 5-6-5-6"
+                />
+              </svg>
+              <svg class="activity-icon" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  d="M12 3v18m0-18 6 6m-6-6L6 9m6 12 6-6m-6 6-6-6"
+                />
+              </svg>
+            </aside>
+
+            <aside class="sidebar">
+              <div class="sidebar-title">Explorer</div>
+              <div class="section-title">⌄ Functional Toolkit</div>
+              <div class="tree">
+                <div class="tree-row">⌄ src</div>
+                <div class="tree-row child selected">◇ functional_toolkit.py</div>
+                <div class="tree-row child">◇ test_toolkit.py</div>
+                <div class="tree-row">◇ pyproject.toml</div>
+                <div class="tree-row">◇ README.md</div>
+              </div>
+            </aside>
+
+            <section class="editor-area">
+              <div class="tabs">
+                <div class="tab">◇ functional_toolkit.py</div>
+                <div class="tab inactive">README.md</div>
+              </div>
+              <div class="breadcrumbs">functional-toolkit › src › functional_toolkit.py</div>
+              <div class="editor">
+                <div class="active-line"></div>
+                <div class="code"></div>
+              </div>
+              <div class="terminal">
+                <div class="panel-tabs">
+                  <span class="active">Terminal</span><span>Problems</span><span>Output</span>
+                </div>
+                <div class="terminal-body">
+                  <div><span class="prompt">functional-toolkit %</span> python -m pytest</div>
+                  <div>collected 3 items</div>
+                  <div>tests/test_toolkit.py ... <span class="tok-comment">passed</span></div>
+                </div>
+              </div>
+            </section>
+
+            <footer class="statusbar">
+              <div class="status-left">
+                <span class="remote">main</span>
+                <span>0 errors</span>
+                <span>0 warnings</span>
+              </div>
+              <div class="status-right">
+                <span>Ln 17, Col 1</span>
+                <span>Spaces: 4</span>
+                <span>UTF-8</span>
+                <span>Python 3.12</span>
+              </div>
+            </footer>
+          </section>
+        </main>
+        <style>
+          * {
+            box-sizing: border-box;
+            letter-spacing: 0;
+          }
+
+          html,
+          body {
+            margin: 0;
+            width: 1920px;
+            height: 1080px;
+            overflow: hidden;
+            background: #000000;
+            font-family:
+              Inter,
+              -apple-system,
+              BlinkMacSystemFont,
+              "Segoe UI",
+              sans-serif;
+          }
+
+          .vscode-theme-scene {
+            --activity-bg: #181818;
+            --activity-fg: #d7d7d7;
+            --activity-muted: #868686;
+            --activity-active: #0078d4;
+            --sidebar-bg: #181818;
+            --sidebar-fg: #cccccc;
+            --sidebar-border: #2b2b2b;
+            --tab-bg: #181818;
+            --tab-active-bg: #1f1f1f;
+            --tab-active-fg: #ffffff;
+            --tab-inactive-fg: #9d9d9d;
+            --tab-border: #2b2b2b;
+            --editor-bg: #1f1f1f;
+            --editor-fg: #cccccc;
+            --editor-line: rgba(255, 255, 255, 0.04);
+            --gutter-fg: #6e7681;
+            --gutter-active-fg: #cccccc;
+            --panel-bg: #181818;
+            --panel-border: #2b2b2b;
+            --status-bg: #181818;
+            --status-fg: #cccccc;
+            --status-border: #2b2b2b;
+            --title-bg: #181818;
+            --title-fg: #cccccc;
+            --token-comment: #6a9955;
+            --token-keyword: #c586c0;
+            --token-function: #dcdcaa;
+            --token-string: #ce9178;
+            --token-number: #b5cea8;
+            --token-variable: #9cdcfe;
+            --token-parameter: #9cdcfe;
+            --token-operator: #d4d4d4;
+            --token-punctuation: #d4d4d4;
+            --token-class-name: #4ec9b0;
+            position: relative;
+            width: 1920px;
+            height: 1080px;
+            overflow: hidden;
+            background:
+              linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.32)),
+              url("../assets/background.jpeg") center / cover no-repeat;
+            color: var(--editor-fg);
+          }
+
+          .scene-content {
+            position: relative;
+            z-index: 1;
+            width: 100%;
+            height: 100%;
+            padding: 54px 70px 92px;
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+            perspective: 2200px;
+            perspective-origin: 56% 52%;
+          }
+
+          .header {
+            display: flex;
+            align-items: end;
+            justify-content: space-between;
+            min-height: 66px;
+            text-shadow:
+              0 2px 12px rgba(0, 0, 0, 0.42),
+              0 14px 34px rgba(0, 0, 0, 0.32);
+          }
+
+          .kicker {
+            margin: 0 0 7px;
+            color: var(--gutter-fg);
+            font-size: 15px;
+            font-weight: 650;
+            text-transform: uppercase;
+            text-shadow:
+              0 2px 8px rgba(0, 0, 0, 0.48),
+              0 10px 26px rgba(0, 0, 0, 0.36);
+          }
+
+          .title {
+            margin: 0;
+            color: var(--editor-fg);
+            font-size: 44px;
+            line-height: 1;
+            font-weight: 760;
+          }
+
+          .source-note {
+            width: 510px;
+            color: var(--gutter-fg);
+            font-size: 16px;
+            line-height: 1.35;
+            text-align: right;
+            text-shadow:
+              0 2px 10px rgba(0, 0, 0, 0.46),
+              0 12px 30px rgba(0, 0, 0, 0.34);
+          }
+
+          .workbench {
+            height: 824px;
+            display: grid;
+            grid-template-columns: 54px 290px 1fr;
+            grid-template-rows: 36px 1fr 26px;
+            overflow: hidden;
+            border: 1px solid var(--sidebar-border);
+            border-radius: 8px;
+            background: var(--editor-bg);
+            box-shadow: 0 34px 90px rgba(0, 0, 0, 0.42);
+            transform: translateZ(0);
+            transform-origin: 82% 50%;
+            transform-style: preserve-3d;
+            will-change: transform;
+          }
+
+          .titlebar {
+            grid-column: 1 / -1;
+            display: grid;
+            grid-template-columns: 120px 1fr 210px;
+            align-items: center;
+            background: var(--title-bg);
+            color: var(--title-fg);
+            border-bottom: 1px solid var(--tab-border);
+            font-size: 12px;
+          }
+
+          .traffic {
+            display: flex;
+            gap: 8px;
+            padding-left: 18px;
+          }
+
+          .traffic span {
+            width: 12px;
+            height: 12px;
+            border-radius: 999px;
+          }
+
+          .traffic span:nth-child(1) {
+            background: #ff5f57;
+          }
+          .traffic span:nth-child(2) {
+            background: #ffbd2e;
+          }
+          .traffic span:nth-child(3) {
+            background: #28c840;
+          }
+
+          .window-title {
+            justify-self: center;
+            opacity: 0.84;
+          }
+
+          .command-center {
+            justify-self: end;
+            width: 176px;
+            height: 22px;
+            margin-right: 16px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border: 1px solid color-mix(in srgb, var(--title-fg), transparent 78%);
+            border-radius: 5px;
+            color: color-mix(in srgb, var(--title-fg), transparent 18%);
+          }
+
+          .activity {
+            grid-row: 2 / 3;
+            background: var(--activity-bg);
+            border-right: 1px solid var(--sidebar-border);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 10px 0;
+            gap: 18px;
+          }
+
+          .activity-icon {
+            width: 28px;
+            height: 28px;
+            color: var(--activity-muted);
+          }
+
+          .activity-icon.active {
+            color: var(--activity-fg);
+            border-left: 2px solid var(--activity-active);
+            padding-left: 4px;
+          }
+
+          .sidebar {
+            grid-row: 2 / 3;
+            background: var(--sidebar-bg);
+            color: var(--sidebar-fg);
+            border-right: 1px solid var(--sidebar-border);
+            display: flex;
+            flex-direction: column;
+            min-width: 0;
+          }
+
+          .sidebar-title {
+            height: 38px;
+            display: flex;
+            align-items: center;
+            padding: 0 20px;
+            color: var(--sidebar-fg);
+            font-size: 11px;
+            text-transform: uppercase;
+          }
+
+          .section-title {
+            height: 24px;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            padding: 0 14px;
+            background: color-mix(in srgb, var(--sidebar-bg), var(--sidebar-fg) 5%);
+            border-top: 1px solid var(--sidebar-border);
+            border-bottom: 1px solid var(--sidebar-border);
+            color: var(--sidebar-fg);
+            font-size: 11px;
+            font-weight: 700;
+          }
+
+          .tree {
+            padding: 8px 0;
+            font-size: 13px;
+            line-height: 24px;
+          }
+
+          .tree-row {
+            height: 24px;
+            display: flex;
+            align-items: center;
+            gap: 7px;
+            padding: 0 10px 0 18px;
+            color: color-mix(in srgb, var(--sidebar-fg), transparent 8%);
+            white-space: nowrap;
+          }
+
+          .tree-row.child {
+            padding-left: 34px;
+          }
+
+          .tree-row.selected {
+            background: color-mix(in srgb, var(--sidebar-fg), transparent 88%);
+            color: var(--sidebar-fg);
+          }
+
+          .editor-area {
+            grid-row: 2 / 3;
+            display: grid;
+            grid-template-rows: 36px 30px 1fr 138px;
+            min-width: 0;
+            background: var(--editor-bg);
+          }
+
+          .tabs {
+            display: flex;
+            background: var(--tab-bg);
+            border-bottom: 1px solid var(--tab-border);
+          }
+
+          .tab {
+            width: 205px;
+            height: 36px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 0 13px;
+            border-right: 1px solid var(--tab-border);
+            background: var(--tab-active-bg);
+            color: var(--tab-active-fg);
+            border-top: 2px solid var(--activity-active);
+            font-size: 13px;
+          }
+
+          .tab.inactive {
+            background: var(--tab-bg);
+            color: var(--tab-inactive-fg);
+            border-top-color: transparent;
+          }
+
+          .breadcrumbs {
+            display: flex;
+            align-items: center;
+            gap: 7px;
+            padding: 0 18px;
+            color: var(--gutter-fg);
+            border-bottom: 1px solid color-mix(in srgb, var(--tab-border), transparent 20%);
+            font-size: 12px;
+          }
+
+          .editor {
+            position: relative;
+            overflow: hidden;
+            background: var(--editor-bg);
+            color: var(--editor-fg);
+            font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+            font-size: 18px;
+            line-height: 1.52;
+          }
+
+          .active-line {
+            position: absolute;
+            left: 0;
+            right: 0;
+            top: 0;
+            height: 28px;
+            background: var(--editor-line);
+            will-change: transform;
+          }
 
-It runs for 11 seconds at 1920×1080. Paste this into your composition:
+          .code {
+            position: relative;
+            padding: 20px 36px 18px 0;
+          }
 
-```html index.html
+          .line {
+            height: 28px;
+            display: grid;
+            grid-template-columns: 72px 1fr;
+            align-items: center;
+          }
+
+          .line-number {
+            padding-right: 18px;
+            color: var(--gutter-fg);
+            text-align: right;
+            user-select: none;
+          }
+
+          .line.is-active .line-number {
+            color: var(--gutter-active-fg);
+          }
+
+          .line-code {
+            white-space: pre;
+          }
+
+          .char {
+            opacity: 0;
+          }
+
+          .tok-comment {
+            color: var(--token-comment);
+          }
+          .tok-keyword {
+            color: var(--token-keyword);
+          }
+          .tok-function {
+            color: var(--token-function);
+          }
+          .tok-string {
+            color: var(--token-string);
+          }
+          .tok-number {
+            color: var(--token-number);
+          }
+          .tok-variable {
+            color: var(--token-variable);
+          }
+          .tok-parameter {
+            color: var(--token-parameter);
+          }
+          .tok-operator {
+            color: var(--token-operator);
+          }
+          .tok-punctuation {
+            color: var(--token-punctuation);
+          }
+          .tok-class-name {
+            color: var(--token-class-name);
+          }
+
+          .caret {
+            position: absolute;
+            left: 0;
+            top: 0;
+            z-index: 3;
+            display: block;
+            width: 2px;
+            height: 22px;
+            background: var(--editor-fg);
+            pointer-events: none;
+            will-change: transform, opacity;
+          }
+
+          .terminal {
+            display: grid;
+            grid-template-rows: 32px 1fr;
+            background: var(--panel-bg);
+            border-top: 1px solid var(--panel-border);
+            color: var(--editor-fg);
+            font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+            font-size: 14px;
+          }
+
+          .panel-tabs {
+            display: flex;
+            align-items: center;
+            gap: 22px;
+            padding: 0 18px;
+            border-bottom: 1px solid var(--panel-border);
+            color: var(--gutter-fg);
+            font-family:
+              Inter,
+              -apple-system,
+              BlinkMacSystemFont,
+              "Segoe UI",
+              sans-serif;
+            font-size: 12px;
+            text-transform: uppercase;
+          }
+
+          .panel-tabs .active {
+            color: var(--editor-fg);
+            border-bottom: 1px solid var(--activity-active);
+            height: 32px;
+            display: flex;
+            align-items: center;
+          }
+
+          .terminal-body {
+            padding: 12px 20px;
+            color: var(--editor-fg);
+            line-height: 1.8;
+          }
+
+          .prompt {
+            color: var(--token-function);
+          }
+
+          .statusbar {
+            grid-column: 1 / -1;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            background: var(--status-bg);
+            color: var(--status-fg);
+            border-top: 1px solid var(--status-border);
+            font-size: 12px;
+          }
+
+          .status-left,
+          .status-right {
+            display: flex;
+            align-items: center;
+            gap: 18px;
+            padding: 0 12px;
+          }
+
+          .remote {
+            align-self: stretch;
+            display: flex;
+            align-items: center;
+            padding: 0 12px;
+            margin-left: -12px;
+            background: var(--status-remote-bg, var(--activity-active));
+            color: var(--status-remote-fg, #ffffff);
+          }
+
+          svg {
+            display: block;
+          }
+        </style>
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (() => {
+            const codeLines = [
+              [{ text: "# A small functional toolkit", token: "comment" }],
+              [
+                { text: "def", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "pluck_deep", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "key", token: "parameter" },
+                { text: "):", token: "punctuation" },
+              ],
+              [
+                { text: "    ", token: "plain" },
+                { text: "return", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "obj", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "reduce", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "acc", token: "parameter" },
+                { text: ", ", token: "punctuation" },
+                { text: "k", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "acc", token: "variable" },
+                { text: "[", token: "punctuation" },
+                { text: "k", token: "variable" },
+                { text: "]", token: "punctuation" },
+                { text: ", ", token: "punctuation" },
+                { text: "key", token: "variable" },
+                { text: ".split", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "'.'", token: "string" },
+                { text: "), ", token: "punctuation" },
+                { text: "obj", token: "variable" },
+                { text: ")", token: "punctuation" },
+              ],
+              [],
+              [
+                { text: "def", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "compose", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "*", token: "operator" },
+                { text: "fns", token: "parameter" },
+                { text: "):", token: "punctuation" },
+              ],
+              [
+                { text: "    ", token: "plain" },
+                { text: "return", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "res", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "reduce", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "acc", token: "parameter" },
+                { text: ", ", token: "punctuation" },
+                { text: "fn", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "fn", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "acc", token: "variable" },
+                { text: "), ", token: "punctuation" },
+                { text: "fns", token: "variable" },
+                { text: ", ", token: "punctuation" },
+                { text: "res", token: "variable" },
+                { text: ")", token: "punctuation" },
+              ],
+              [],
+              [
+                { text: "def", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "unfold", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "f", token: "parameter" },
+                { text: ", ", token: "punctuation" },
+                { text: "seed", token: "parameter" },
+                { text: "):", token: "punctuation" },
+              ],
+              [
+                { text: "    ", token: "plain" },
+                { text: '"""Build a list by repeatedly applying f to a seed."""', token: "string" },
+              ],
+              [
+                { text: "    acc", token: "variable" },
+                { text: " = ", token: "operator" },
+                { text: "[]", token: "punctuation" },
+              ],
+              [
+                { text: "    while", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "True", token: "className" },
+                { text: ":", token: "punctuation" },
+              ],
+              [
+                { text: "        result", token: "variable" },
+                { text: " = ", token: "operator" },
+                { text: "f", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "seed", token: "variable" },
+                { text: ")", token: "punctuation" },
+              ],
+              [
+                { text: "        if", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "result", token: "variable" },
+                { text: " is ", token: "keyword" },
+                { text: "None", token: "className" },
+                { text: ":", token: "punctuation" },
+              ],
+              [
+                { text: "            return", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "acc", token: "variable" },
+              ],
+              [
+                { text: "        acc", token: "variable" },
+                { text: ".append", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "result", token: "variable" },
+                { text: "[", token: "punctuation" },
+                { text: "0", token: "number" },
+                { text: "])", token: "punctuation" },
+              ],
+              [
+                { text: "        seed", token: "variable" },
+                { text: " = ", token: "operator" },
+                { text: "result", token: "variable" },
+                { text: "[", token: "punctuation" },
+                { text: "1", token: "number" },
+                { text: "]", token: "punctuation" },
+              ],
+              [],
+            ];
+
+            const fallback = {
+              "activityBar.background": "#181818",
+              "activityBar.foreground": "#d7d7d7",
+              "activityBar.inactiveForeground": "#868686",
+              "activityBar.activeBorder": "#0078d4",
+              "sideBar.background": "#181818",
+              "sideBar.foreground": "#cccccc",
+              "sideBar.border": "#2b2b2b",
+              "tab.activeBackground": "#1f1f1f",
+              "tab.activeForeground": "#ffffff",
+              "tab.inactiveBackground": "#181818",
+              "tab.inactiveForeground": "#9d9d9d",
+              "tab.border": "#2b2b2b",
+              "editor.background": "#1f1f1f",
+              "editor.foreground": "#cccccc",
+              "editor.lineHighlightBackground": "#ffffff0a",
+              "editorLineNumber.foreground": "#6e7681",
+              "editorLineNumber.activeForeground": "#cccccc",
+              "panel.background": "#181818",
+              "panel.border": "#2b2b2b",
+              "statusBar.background": "#181818",
+              "statusBar.foreground": "#cccccc",
+              "statusBar.border": "#2b2b2b",
+              "titleBar.activeBackground": "#181818",
+              "titleBar.activeForeground": "#cccccc",
+            };
+
+            function color(theme, key) {
+              return theme.colors[key] || fallback[key] || theme.colors.foreground || "#cccccc";
+            }
+
+            function solarizedGrey(theme) {
+              return (
+                theme.colors["tab.inactiveForeground"] ||
+                theme.colors["editor.foreground"] ||
+                "#586E75"
+              );
+            }
+
+            function setVar(root, name, value) {
+              root.style.setProperty(name, value);
+            }
+
+            function applyTheme(root, theme) {
+              const solarizedUiGrey = theme.id === "solarized-light" ? solarizedGrey(theme) : null;
+              setVar(root, "--activity-bg", color(theme, "activityBar.background"));
+              setVar(
+                root,
+                "--activity-fg",
+                solarizedUiGrey || color(theme, "activityBar.foreground"),
+              );
+              setVar(
+                root,
+                "--activity-muted",
+                solarizedUiGrey || color(theme, "activityBar.inactiveForeground"),
+              );
+              setVar(root, "--activity-active", color(theme, "activityBar.activeBorder"));
+              setVar(root, "--sidebar-bg", color(theme, "sideBar.background"));
+              setVar(root, "--sidebar-fg", solarizedUiGrey || color(theme, "sideBar.foreground"));
+              setVar(root, "--sidebar-border", color(theme, "sideBar.border"));
+              setVar(root, "--tab-bg", color(theme, "tab.inactiveBackground"));
+              setVar(root, "--tab-active-bg", color(theme, "tab.activeBackground"));
+              setVar(
+                root,
+                "--tab-active-fg",
+                solarizedUiGrey || color(theme, "tab.activeForeground"),
+              );
+              setVar(
+                root,
+                "--tab-inactive-fg",
+                solarizedUiGrey || color(theme, "tab.inactiveForeground"),
+              );
+              setVar(root, "--tab-border", color(theme, "tab.border"));
+              setVar(root, "--editor-bg", color(theme, "editor.background"));
+              setVar(root, "--editor-fg", color(theme, "editor.foreground"));
+              setVar(root, "--editor-line", color(theme, "editor.lineHighlightBackground"));
+              setVar(root, "--gutter-fg", color(theme, "editorLineNumber.foreground"));
+              setVar(root, "--gutter-active-fg", color(theme, "editorLineNumber.activeForeground"));
+              setVar(root, "--panel-bg", color(theme, "panel.background"));
+              setVar(root, "--panel-border", color(theme, "panel.border"));
+              setVar(root, "--status-bg", color(theme, "statusBar.background"));
+              setVar(root, "--status-fg", color(theme, "statusBar.foreground"));
+              setVar(root, "--status-border", color(theme, "statusBar.border"));
+              setVar(root, "--status-remote-bg", color(theme, "statusBarItem.remoteBackground"));
+              setVar(
+                root,
+                "--status-remote-fg",
+                solarizedUiGrey || color(theme, "statusBarItem.remoteForeground"),
+              );
+              setVar(root, "--title-bg", color(theme, "titleBar.activeBackground"));
+              setVar(
+                root,
+                "--title-fg",
+                solarizedUiGrey || color(theme, "titleBar.activeForeground"),
+              );
+              setVar(root, "--token-comment", theme.tokens.comment);
+              setVar(root, "--token-keyword", theme.tokens.keyword);
+              setVar(root, "--token-function", theme.tokens.function);
+              setVar(root, "--token-string", theme.tokens.string);
+              setVar(root, "--token-number", theme.tokens.number);
+              setVar(root, "--token-variable", theme.tokens.variable);
+              setVar(root, "--token-parameter", theme.tokens.parameter);
+              setVar(root, "--token-operator", theme.tokens.operator);
+              setVar(root, "--token-punctuation", theme.tokens.punctuation);
+              setVar(root, "--token-class-name", theme.tokens.className);
+            }
+
+            function renderCode(root) {
+              const code = root.querySelector(".code");
+              codeLines.forEach((segments, index) => {
+                const line = document.createElement("div");
+                line.className = "line";
+                line.dataset.lineIndex = String(index);
+
+                const lineNumber = document.createElement("span");
+                lineNumber.className = "line-number";
+                lineNumber.textContent = String(index + 1);
+                line.appendChild(lineNumber);
+
+                const lineCode = document.createElement("span");
+                lineCode.className = "line-code";
+                segments.forEach((segment) => {
+                  [...segment.text].forEach((char) => {
+                    const span = document.createElement("span");
+                    span.className =
+                      segment.token === "plain"
+                        ? "char"
+                        : "char tok-" +
+                          segment.token.replace(/[A-Z]/g, (match) => "-" + match.toLowerCase());
+                    span.dataset.lineIndex = String(index);
+                    span.textContent = char;
+                    lineCode.appendChild(span);
+                  });
+                });
+                line.appendChild(lineCode);
+                code.appendChild(line);
+              });
+
+              const caret = document.createElement("span");
+              caret.className = "caret";
+              root.querySelector(".editor").appendChild(caret);
+            }
+
+            function caretPointForElement(editor, el) {
+              const editorBox = editor.getBoundingClientRect();
+              const charBox = el.getBoundingClientRect();
+              return {
+                x: charBox.right - editorBox.left + 2,
+                y: charBox.top - editorBox.top + 3,
+              };
+            }
+
+            function caretPointForLineStart(editor, line) {
+              const editorBox = editor.getBoundingClientRect();
+              const lineBox = line.getBoundingClientRect();
+              const codeBox = line.querySelector(".line-code").getBoundingClientRect();
+              return {
+                x: codeBox.left - editorBox.left,
+                y: lineBox.top - editorBox.top + 3,
+              };
+            }
+
+            function lineHighlightY(editor, line) {
+              const editorBox = editor.getBoundingClientRect();
+              const lineBox = line.getBoundingClientRect();
+              return lineBox.top - editorBox.top;
+            }
+
+            function buildTimeline(root, compositionId) {
+              const tl = gsap.timeline({ paused: true });
+              const editor = root.querySelector(".editor");
+              const caret = root.querySelector(".caret");
+              const activeLine = root.querySelector(".active-line");
+              const lineEls = gsap.utils.toArray(root.querySelectorAll(".line"));
+              const lineStartTimes = [];
+              const charSchedule = [];
+              let cursorTime = 0.95;
+
+              lineEls.forEach((line, lineIndex) => {
+                const lineChars = gsap.utils.toArray(line.querySelectorAll(".char"));
+                lineStartTimes[lineIndex] = cursorTime;
+                lineChars.forEach((char, charIndex) => {
+                  charSchedule.push({ char, time: cursorTime + charIndex * 0.012 });
+                });
+                cursorTime += Math.max(lineChars.length * 0.012, 0.08) + 0.045;
+              });
+
+              gsap.set(activeLine, { y: lineHighlightY(editor, lineEls[0]) });
+              gsap.set(caret, caretPointForLineStart(editor, lineEls[0]));
+
+              tl.from(
+                root.querySelector(".header"),
+                { y: 24, opacity: 0, duration: 0.45, ease: "power3.out" },
+                0,
+              );
+              tl.from(
+                root.querySelector(".workbench"),
+                { y: 42, opacity: 0, scale: 0.986, duration: 0.58, ease: "power3.out" },
+                0.1,
+              );
+              tl.from(activeLine, { opacity: 0, duration: 0.22, ease: "power2.out" }, 0.74);
+              lineStartTimes.forEach((time, lineIndex) => {
+                const line = lineEls[lineIndex];
+                tl.set(activeLine, { y: lineHighlightY(editor, line) }, time);
+                tl.set(caret, caretPointForLineStart(editor, line), time);
+                tl.call(
+                  () => {
+                    lineEls.forEach((item) => item.classList.toggle("is-active", item === line));
+                  },
+                  [],
+                  time,
+                );
+              });
+              charSchedule.forEach(({ char, time }) => {
+                tl.set(char, { opacity: 1 }, time);
+                tl.set(caret, caretPointForElement(editor, char), time + 0.002);
+              });
+              tl.to(
+                root.querySelector(".caret"),
+                { opacity: 0, duration: 0.34, repeat: 25, yoyo: true, ease: "steps(1)" },
+                0.95,
+              );
+              tl.from(
+                root.querySelector(".terminal"),
+                { y: 140, opacity: 0, duration: 0.56, ease: "power3.out" },
+                7.55,
+              );
+              tl.from(
+                root.querySelector(".terminal-body").children,
+                { opacity: 0, y: 8, duration: 0.24, stagger: 0.16, ease: "power2.out" },
+                8.05,
+              );
+              tl.to(
+                root.querySelector(".workbench"),
+                { rotateY: -10.5, z: 74, duration: 0.72, ease: "power2.inOut" },
+                9.35,
+              );
+              tl.to(
+                root.querySelector(".workbench"),
+                { rotateY: 0, z: 0, duration: 0.62, ease: "power2.inOut" },
+                10.08,
+              );
+
+              window.__timelines = window.__timelines || {};
+              window.__timelines[compositionId] = tl;
+
+              const previewTime = new URLSearchParams(window.location.search).get("t");
+              if (previewTime !== null) {
+                tl.time(Number(previewTime));
+              }
+            }
+
+            window.createVSCodeThemeComposition = (compositionId, themeOrId) => {
+              const root =
+                document.querySelector(
+                  '[data-composition-id="' + compositionId + '"] .vscode-theme-scene',
+                ) ||
+                document.querySelector(
+                  '.vscode-theme-scene[data-composition-id="' + compositionId + '"]',
+                ) ||
+                document.querySelector('[data-composition-id="' + compositionId + '"]');
+              const theme =
+                typeof themeOrId === "string"
+                  ? window.VSCODE_THEME_REGISTRY.find((item) => item.id === themeOrId)
+                  : themeOrId;
+              if (!root || !theme) return;
+              root.querySelector(".theme-label").textContent = theme.label;
+              root.querySelector(".theme-source").textContent = theme.sourceFile;
+              applyTheme(root, theme);
+              renderCode(root);
+              buildTimeline(root, compositionId);
+            };
+          })();
+        </script>
+        <script>
+          window.__timelines = window.__timelines || {};
+          window.__timelines["vscode-light-2026"] =
+            window.__timelines["vscode-light-2026"] || gsap.timeline({ paused: true });
+          window.createVSCodeThemeComposition("vscode-light-2026", {
+            id: "light-2026",
+            label: "Light 2026",
+            sourceFile: "2026-light.json",
+            uiTheme: "vs",
+            colors: {
+              "activityBar.activeBorder": "#000000",
+              "activityBar.background": "#FAFAFD",
+              "activityBar.border": "#F0F1F2FF",
+              "activityBar.foreground": "#202020",
+              "activityBar.inactiveForeground": "#606060",
+              "editor.background": "#FFFFFF",
+              "editor.foreground": "#202020",
+              "editor.lineHighlightBackground": "#EAEAEA40",
+              "editor.selectionBackground": "#0069CC40",
+              "editorGroup.border": "#E5E5E5",
+              "editorGroupHeader.tabsBackground": "#FAFAFD",
+              "editorGroupHeader.tabsBorder": "#F0F1F2FF",
+              "editorLineNumber.activeForeground": "#202020",
+              "editorLineNumber.foreground": "#606060",
+              foreground: "#202020",
+              "icon.foreground": "#606060",
+              "panel.background": "#FAFAFD",
+              "panel.border": "#F0F1F2FF",
+              "sideBar.background": "#FAFAFD",
+              "sideBar.border": "#F0F1F2FF",
+              "sideBar.foreground": "#202020",
+              "sideBarSectionHeader.background": "#FAFAFD",
+              "sideBarSectionHeader.border": "#F0F1F2FF",
+              "sideBarSectionHeader.foreground": "#202020",
+              "sideBarTitle.foreground": "#202020",
+              "statusBar.background": "#FAFAFD",
+              "statusBar.border": "#F0F1F2FF",
+              "statusBar.foreground": "#606060",
+              "statusBarItem.remoteBackground": "#005FB8",
+              "statusBarItem.remoteForeground": "#FFFFFF",
+              "tab.activeBackground": "#FFFFFF",
+              "tab.activeBorder": "#FFFFFF",
+              "tab.activeBorderTop": "#000000",
+              "tab.activeForeground": "#202020",
+              "tab.border": "#F0F1F2FF",
+              "tab.inactiveBackground": "#FAFAFD",
+              "tab.inactiveForeground": "#606060",
+              "terminal.foreground": "#3B3B3B",
+              "terminalCursor.foreground": "#202020",
+              "titleBar.activeBackground": "#FAFAFD",
+              "titleBar.activeForeground": "#606060",
+            },
+            tokens: {
+              comment: "#6e7781",
+              keyword: "#1f2328",
+              function: "#0550ae",
+              string: "#0a3069",
+              number: "#0550ae",
+              variable: "#1f2328",
+              parameter: "#953800",
+              operator: "#cf222e",
+              punctuation: "#953800",
+              className: "#116329",
+            },
+          });
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
 <div
   data-composition-id="code-snippet-light-2026"
   data-composition-src="compositions/code-snippet-light-2026.html"
@@ -29,8 +1127,13 @@ It runs for 11 seconds at 1920×1080. Paste this into your composition:
 ></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.
+## Features
+
+- Full VS Code workbench recreation — activity bar, sidebar, explorer tree, editor tabs, breadcrumbs, terminal panel, status bar
+- Per-character typing animation with cursor tracking and active line highlight
+- Colors sourced from official `microsoft/vscode` built-in theme JSON
+- 3D perspective tilt at the end of the typing sequence
+- Terminal panel with mock test output
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/code-snippet-light-modern.mdx b/docs/catalog/blocks/code-snippet-light-modern.mdx
index d3900ad99b..ffd2f5db88 100644
--- a/docs/catalog/blocks/code-snippet-light-modern.mdx
+++ b/docs/catalog/blocks/code-snippet-light-modern.mdx
@@ -3,21 +3,1117 @@ title: "Code Snippet - Light Modern"
 description: "VS Code workbench with per-character typing animation in the Light Modern theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-light-modern.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-light-modern.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/code-snippet-light-modern.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Code Snippet - Light Modern preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add code-snippet-light-modern
-```
+<InstallCommand command="npx hyperframes add code-snippet-light-modern" />
 
 That writes `compositions/code-snippet-light-modern.html`, plus 1 supporting file under `assets/`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`code-snippet-light-modern.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Light Modern VS Code Theme Composition</title>
+  </head>
+  <body>
+    <template id="vscode-light-modern-template">
+      <div
+        class="vscode-theme-scene"
+        data-composition-id="vscode-light-modern"
+        data-width="1920"
+        data-height="1080"
+      >
+        <main class="scene-content">
+          <section class="header">
+            <div>
+              <p class="kicker">Official VS Code built-in theme</p>
+              <h1 class="title"><span class="theme-label">Light Modern</span></h1>
+            </div>
+            <p class="source-note">
+              Typing `functional_toolkit.py` with workbench colors from
+              <span class="theme-source">light_modern.json</span>.
+            </p>
+          </section>
+
+          <section class="workbench">
+            <div class="titlebar">
+              <div class="traffic"><span></span><span></span><span></span></div>
+              <div class="window-title">functional-toolkit - Visual Studio Code</div>
+              <div class="command-center">Search</div>
+            </div>
+
+            <aside class="activity" aria-label="Activity bar">
+              <svg class="activity-icon active" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="currentColor"
+                  d="M4 4h7v7H4V4Zm9 0h7v7h-7V4ZM4 13h7v7H4v-7Zm9 0h7v7h-7v-7Z"
+                />
+              </svg>
+              <svg class="activity-icon" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  d="m21 21-5.2-5.2M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Z"
+                />
+              </svg>
+              <svg class="activity-icon" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  d="M8 18 3 12l5-6m8 12 5-6-5-6"
+                />
+              </svg>
+              <svg class="activity-icon" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  d="M12 3v18m0-18 6 6m-6-6L6 9m6 12 6-6m-6 6-6-6"
+                />
+              </svg>
+            </aside>
+
+            <aside class="sidebar">
+              <div class="sidebar-title">Explorer</div>
+              <div class="section-title">⌄ Functional Toolkit</div>
+              <div class="tree">
+                <div class="tree-row">⌄ src</div>
+                <div class="tree-row child selected">◇ functional_toolkit.py</div>
+                <div class="tree-row child">◇ test_toolkit.py</div>
+                <div class="tree-row">◇ pyproject.toml</div>
+                <div class="tree-row">◇ README.md</div>
+              </div>
+            </aside>
+
+            <section class="editor-area">
+              <div class="tabs">
+                <div class="tab">◇ functional_toolkit.py</div>
+                <div class="tab inactive">README.md</div>
+              </div>
+              <div class="breadcrumbs">functional-toolkit › src › functional_toolkit.py</div>
+              <div class="editor">
+                <div class="active-line"></div>
+                <div class="code"></div>
+              </div>
+              <div class="terminal">
+                <div class="panel-tabs">
+                  <span class="active">Terminal</span><span>Problems</span><span>Output</span>
+                </div>
+                <div class="terminal-body">
+                  <div><span class="prompt">functional-toolkit %</span> python -m pytest</div>
+                  <div>collected 3 items</div>
+                  <div>tests/test_toolkit.py ... <span class="tok-comment">passed</span></div>
+                </div>
+              </div>
+            </section>
+
+            <footer class="statusbar">
+              <div class="status-left">
+                <span class="remote">main</span>
+                <span>0 errors</span>
+                <span>0 warnings</span>
+              </div>
+              <div class="status-right">
+                <span>Ln 17, Col 1</span>
+                <span>Spaces: 4</span>
+                <span>UTF-8</span>
+                <span>Python 3.12</span>
+              </div>
+            </footer>
+          </section>
+        </main>
+        <style>
+          * {
+            box-sizing: border-box;
+            letter-spacing: 0;
+          }
+
+          html,
+          body {
+            margin: 0;
+            width: 1920px;
+            height: 1080px;
+            overflow: hidden;
+            background: #000000;
+            font-family:
+              Inter,
+              -apple-system,
+              BlinkMacSystemFont,
+              "Segoe UI",
+              sans-serif;
+          }
+
+          .vscode-theme-scene {
+            --activity-bg: #181818;
+            --activity-fg: #d7d7d7;
+            --activity-muted: #868686;
+            --activity-active: #0078d4;
+            --sidebar-bg: #181818;
+            --sidebar-fg: #cccccc;
+            --sidebar-border: #2b2b2b;
+            --tab-bg: #181818;
+            --tab-active-bg: #1f1f1f;
+            --tab-active-fg: #ffffff;
+            --tab-inactive-fg: #9d9d9d;
+            --tab-border: #2b2b2b;
+            --editor-bg: #1f1f1f;
+            --editor-fg: #cccccc;
+            --editor-line: rgba(255, 255, 255, 0.04);
+            --gutter-fg: #6e7681;
+            --gutter-active-fg: #cccccc;
+            --panel-bg: #181818;
+            --panel-border: #2b2b2b;
+            --status-bg: #181818;
+            --status-fg: #cccccc;
+            --status-border: #2b2b2b;
+            --title-bg: #181818;
+            --title-fg: #cccccc;
+            --token-comment: #6a9955;
+            --token-keyword: #c586c0;
+            --token-function: #dcdcaa;
+            --token-string: #ce9178;
+            --token-number: #b5cea8;
+            --token-variable: #9cdcfe;
+            --token-parameter: #9cdcfe;
+            --token-operator: #d4d4d4;
+            --token-punctuation: #d4d4d4;
+            --token-class-name: #4ec9b0;
+            position: relative;
+            width: 1920px;
+            height: 1080px;
+            overflow: hidden;
+            background:
+              linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.32)),
+              url("../assets/background.jpeg") center / cover no-repeat;
+            color: var(--editor-fg);
+          }
+
+          .scene-content {
+            position: relative;
+            z-index: 1;
+            width: 100%;
+            height: 100%;
+            padding: 54px 70px 92px;
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+            perspective: 2200px;
+            perspective-origin: 56% 52%;
+          }
+
+          .header {
+            display: flex;
+            align-items: end;
+            justify-content: space-between;
+            min-height: 66px;
+            text-shadow:
+              0 2px 12px rgba(0, 0, 0, 0.42),
+              0 14px 34px rgba(0, 0, 0, 0.32);
+          }
+
+          .kicker {
+            margin: 0 0 7px;
+            color: var(--gutter-fg);
+            font-size: 15px;
+            font-weight: 650;
+            text-transform: uppercase;
+            text-shadow:
+              0 2px 8px rgba(0, 0, 0, 0.48),
+              0 10px 26px rgba(0, 0, 0, 0.36);
+          }
+
+          .title {
+            margin: 0;
+            color: var(--editor-fg);
+            font-size: 44px;
+            line-height: 1;
+            font-weight: 760;
+          }
+
+          .source-note {
+            width: 510px;
+            color: var(--gutter-fg);
+            font-size: 16px;
+            line-height: 1.35;
+            text-align: right;
+            text-shadow:
+              0 2px 10px rgba(0, 0, 0, 0.46),
+              0 12px 30px rgba(0, 0, 0, 0.34);
+          }
+
+          .workbench {
+            height: 824px;
+            display: grid;
+            grid-template-columns: 54px 290px 1fr;
+            grid-template-rows: 36px 1fr 26px;
+            overflow: hidden;
+            border: 1px solid var(--sidebar-border);
+            border-radius: 8px;
+            background: var(--editor-bg);
+            box-shadow: 0 34px 90px rgba(0, 0, 0, 0.42);
+            transform: translateZ(0);
+            transform-origin: 82% 50%;
+            transform-style: preserve-3d;
+            will-change: transform;
+          }
+
+          .titlebar {
+            grid-column: 1 / -1;
+            display: grid;
+            grid-template-columns: 120px 1fr 210px;
+            align-items: center;
+            background: var(--title-bg);
+            color: var(--title-fg);
+            border-bottom: 1px solid var(--tab-border);
+            font-size: 12px;
+          }
+
+          .traffic {
+            display: flex;
+            gap: 8px;
+            padding-left: 18px;
+          }
+
+          .traffic span {
+            width: 12px;
+            height: 12px;
+            border-radius: 999px;
+          }
+
+          .traffic span:nth-child(1) {
+            background: #ff5f57;
+          }
+          .traffic span:nth-child(2) {
+            background: #ffbd2e;
+          }
+          .traffic span:nth-child(3) {
+            background: #28c840;
+          }
+
+          .window-title {
+            justify-self: center;
+            opacity: 0.84;
+          }
+
+          .command-center {
+            justify-self: end;
+            width: 176px;
+            height: 22px;
+            margin-right: 16px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border: 1px solid color-mix(in srgb, var(--title-fg), transparent 78%);
+            border-radius: 5px;
+            color: color-mix(in srgb, var(--title-fg), transparent 18%);
+          }
+
+          .activity {
+            grid-row: 2 / 3;
+            background: var(--activity-bg);
+            border-right: 1px solid var(--sidebar-border);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 10px 0;
+            gap: 18px;
+          }
+
+          .activity-icon {
+            width: 28px;
+            height: 28px;
+            color: var(--activity-muted);
+          }
+
+          .activity-icon.active {
+            color: var(--activity-fg);
+            border-left: 2px solid var(--activity-active);
+            padding-left: 4px;
+          }
+
+          .sidebar {
+            grid-row: 2 / 3;
+            background: var(--sidebar-bg);
+            color: var(--sidebar-fg);
+            border-right: 1px solid var(--sidebar-border);
+            display: flex;
+            flex-direction: column;
+            min-width: 0;
+          }
+
+          .sidebar-title {
+            height: 38px;
+            display: flex;
+            align-items: center;
+            padding: 0 20px;
+            color: var(--sidebar-fg);
+            font-size: 11px;
+            text-transform: uppercase;
+          }
+
+          .section-title {
+            height: 24px;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            padding: 0 14px;
+            background: color-mix(in srgb, var(--sidebar-bg), var(--sidebar-fg) 5%);
+            border-top: 1px solid var(--sidebar-border);
+            border-bottom: 1px solid var(--sidebar-border);
+            color: var(--sidebar-fg);
+            font-size: 11px;
+            font-weight: 700;
+          }
+
+          .tree {
+            padding: 8px 0;
+            font-size: 13px;
+            line-height: 24px;
+          }
+
+          .tree-row {
+            height: 24px;
+            display: flex;
+            align-items: center;
+            gap: 7px;
+            padding: 0 10px 0 18px;
+            color: color-mix(in srgb, var(--sidebar-fg), transparent 8%);
+            white-space: nowrap;
+          }
+
+          .tree-row.child {
+            padding-left: 34px;
+          }
+
+          .tree-row.selected {
+            background: color-mix(in srgb, var(--sidebar-fg), transparent 88%);
+            color: var(--sidebar-fg);
+          }
+
+          .editor-area {
+            grid-row: 2 / 3;
+            display: grid;
+            grid-template-rows: 36px 30px 1fr 138px;
+            min-width: 0;
+            background: var(--editor-bg);
+          }
+
+          .tabs {
+            display: flex;
+            background: var(--tab-bg);
+            border-bottom: 1px solid var(--tab-border);
+          }
+
+          .tab {
+            width: 205px;
+            height: 36px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 0 13px;
+            border-right: 1px solid var(--tab-border);
+            background: var(--tab-active-bg);
+            color: var(--tab-active-fg);
+            border-top: 2px solid var(--activity-active);
+            font-size: 13px;
+          }
+
+          .tab.inactive {
+            background: var(--tab-bg);
+            color: var(--tab-inactive-fg);
+            border-top-color: transparent;
+          }
+
+          .breadcrumbs {
+            display: flex;
+            align-items: center;
+            gap: 7px;
+            padding: 0 18px;
+            color: var(--gutter-fg);
+            border-bottom: 1px solid color-mix(in srgb, var(--tab-border), transparent 20%);
+            font-size: 12px;
+          }
+
+          .editor {
+            position: relative;
+            overflow: hidden;
+            background: var(--editor-bg);
+            color: var(--editor-fg);
+            font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+            font-size: 18px;
+            line-height: 1.52;
+          }
+
+          .active-line {
+            position: absolute;
+            left: 0;
+            right: 0;
+            top: 0;
+            height: 28px;
+            background: var(--editor-line);
+            will-change: transform;
+          }
 
-It runs for 11 seconds at 1920×1080. Paste this into your composition:
+          .code {
+            position: relative;
+            padding: 20px 36px 18px 0;
+          }
 
-```html index.html
+          .line {
+            height: 28px;
+            display: grid;
+            grid-template-columns: 72px 1fr;
+            align-items: center;
+          }
+
+          .line-number {
+            padding-right: 18px;
+            color: var(--gutter-fg);
+            text-align: right;
+            user-select: none;
+          }
+
+          .line.is-active .line-number {
+            color: var(--gutter-active-fg);
+          }
+
+          .line-code {
+            white-space: pre;
+          }
+
+          .char {
+            opacity: 0;
+          }
+
+          .tok-comment {
+            color: var(--token-comment);
+          }
+          .tok-keyword {
+            color: var(--token-keyword);
+          }
+          .tok-function {
+            color: var(--token-function);
+          }
+          .tok-string {
+            color: var(--token-string);
+          }
+          .tok-number {
+            color: var(--token-number);
+          }
+          .tok-variable {
+            color: var(--token-variable);
+          }
+          .tok-parameter {
+            color: var(--token-parameter);
+          }
+          .tok-operator {
+            color: var(--token-operator);
+          }
+          .tok-punctuation {
+            color: var(--token-punctuation);
+          }
+          .tok-class-name {
+            color: var(--token-class-name);
+          }
+
+          .caret {
+            position: absolute;
+            left: 0;
+            top: 0;
+            z-index: 3;
+            display: block;
+            width: 2px;
+            height: 22px;
+            background: var(--editor-fg);
+            pointer-events: none;
+            will-change: transform, opacity;
+          }
+
+          .terminal {
+            display: grid;
+            grid-template-rows: 32px 1fr;
+            background: var(--panel-bg);
+            border-top: 1px solid var(--panel-border);
+            color: var(--editor-fg);
+            font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+            font-size: 14px;
+          }
+
+          .panel-tabs {
+            display: flex;
+            align-items: center;
+            gap: 22px;
+            padding: 0 18px;
+            border-bottom: 1px solid var(--panel-border);
+            color: var(--gutter-fg);
+            font-family:
+              Inter,
+              -apple-system,
+              BlinkMacSystemFont,
+              "Segoe UI",
+              sans-serif;
+            font-size: 12px;
+            text-transform: uppercase;
+          }
+
+          .panel-tabs .active {
+            color: var(--editor-fg);
+            border-bottom: 1px solid var(--activity-active);
+            height: 32px;
+            display: flex;
+            align-items: center;
+          }
+
+          .terminal-body {
+            padding: 12px 20px;
+            color: var(--editor-fg);
+            line-height: 1.8;
+          }
+
+          .prompt {
+            color: var(--token-function);
+          }
+
+          .statusbar {
+            grid-column: 1 / -1;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            background: var(--status-bg);
+            color: var(--status-fg);
+            border-top: 1px solid var(--status-border);
+            font-size: 12px;
+          }
+
+          .status-left,
+          .status-right {
+            display: flex;
+            align-items: center;
+            gap: 18px;
+            padding: 0 12px;
+          }
+
+          .remote {
+            align-self: stretch;
+            display: flex;
+            align-items: center;
+            padding: 0 12px;
+            margin-left: -12px;
+            background: var(--status-remote-bg, var(--activity-active));
+            color: var(--status-remote-fg, #ffffff);
+          }
+
+          svg {
+            display: block;
+          }
+        </style>
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (() => {
+            const codeLines = [
+              [{ text: "# A small functional toolkit", token: "comment" }],
+              [
+                { text: "def", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "pluck_deep", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "key", token: "parameter" },
+                { text: "):", token: "punctuation" },
+              ],
+              [
+                { text: "    ", token: "plain" },
+                { text: "return", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "obj", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "reduce", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "acc", token: "parameter" },
+                { text: ", ", token: "punctuation" },
+                { text: "k", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "acc", token: "variable" },
+                { text: "[", token: "punctuation" },
+                { text: "k", token: "variable" },
+                { text: "]", token: "punctuation" },
+                { text: ", ", token: "punctuation" },
+                { text: "key", token: "variable" },
+                { text: ".split", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "'.'", token: "string" },
+                { text: "), ", token: "punctuation" },
+                { text: "obj", token: "variable" },
+                { text: ")", token: "punctuation" },
+              ],
+              [],
+              [
+                { text: "def", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "compose", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "*", token: "operator" },
+                { text: "fns", token: "parameter" },
+                { text: "):", token: "punctuation" },
+              ],
+              [
+                { text: "    ", token: "plain" },
+                { text: "return", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "res", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "reduce", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "acc", token: "parameter" },
+                { text: ", ", token: "punctuation" },
+                { text: "fn", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "fn", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "acc", token: "variable" },
+                { text: "), ", token: "punctuation" },
+                { text: "fns", token: "variable" },
+                { text: ", ", token: "punctuation" },
+                { text: "res", token: "variable" },
+                { text: ")", token: "punctuation" },
+              ],
+              [],
+              [
+                { text: "def", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "unfold", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "f", token: "parameter" },
+                { text: ", ", token: "punctuation" },
+                { text: "seed", token: "parameter" },
+                { text: "):", token: "punctuation" },
+              ],
+              [
+                { text: "    ", token: "plain" },
+                { text: '"""Build a list by repeatedly applying f to a seed."""', token: "string" },
+              ],
+              [
+                { text: "    acc", token: "variable" },
+                { text: " = ", token: "operator" },
+                { text: "[]", token: "punctuation" },
+              ],
+              [
+                { text: "    while", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "True", token: "className" },
+                { text: ":", token: "punctuation" },
+              ],
+              [
+                { text: "        result", token: "variable" },
+                { text: " = ", token: "operator" },
+                { text: "f", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "seed", token: "variable" },
+                { text: ")", token: "punctuation" },
+              ],
+              [
+                { text: "        if", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "result", token: "variable" },
+                { text: " is ", token: "keyword" },
+                { text: "None", token: "className" },
+                { text: ":", token: "punctuation" },
+              ],
+              [
+                { text: "            return", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "acc", token: "variable" },
+              ],
+              [
+                { text: "        acc", token: "variable" },
+                { text: ".append", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "result", token: "variable" },
+                { text: "[", token: "punctuation" },
+                { text: "0", token: "number" },
+                { text: "])", token: "punctuation" },
+              ],
+              [
+                { text: "        seed", token: "variable" },
+                { text: " = ", token: "operator" },
+                { text: "result", token: "variable" },
+                { text: "[", token: "punctuation" },
+                { text: "1", token: "number" },
+                { text: "]", token: "punctuation" },
+              ],
+              [],
+            ];
+
+            const fallback = {
+              "activityBar.background": "#181818",
+              "activityBar.foreground": "#d7d7d7",
+              "activityBar.inactiveForeground": "#868686",
+              "activityBar.activeBorder": "#0078d4",
+              "sideBar.background": "#181818",
+              "sideBar.foreground": "#cccccc",
+              "sideBar.border": "#2b2b2b",
+              "tab.activeBackground": "#1f1f1f",
+              "tab.activeForeground": "#ffffff",
+              "tab.inactiveBackground": "#181818",
+              "tab.inactiveForeground": "#9d9d9d",
+              "tab.border": "#2b2b2b",
+              "editor.background": "#1f1f1f",
+              "editor.foreground": "#cccccc",
+              "editor.lineHighlightBackground": "#ffffff0a",
+              "editorLineNumber.foreground": "#6e7681",
+              "editorLineNumber.activeForeground": "#cccccc",
+              "panel.background": "#181818",
+              "panel.border": "#2b2b2b",
+              "statusBar.background": "#181818",
+              "statusBar.foreground": "#cccccc",
+              "statusBar.border": "#2b2b2b",
+              "titleBar.activeBackground": "#181818",
+              "titleBar.activeForeground": "#cccccc",
+            };
+
+            function color(theme, key) {
+              return theme.colors[key] || fallback[key] || theme.colors.foreground || "#cccccc";
+            }
+
+            function solarizedGrey(theme) {
+              return (
+                theme.colors["tab.inactiveForeground"] ||
+                theme.colors["editor.foreground"] ||
+                "#586E75"
+              );
+            }
+
+            function setVar(root, name, value) {
+              root.style.setProperty(name, value);
+            }
+
+            function applyTheme(root, theme) {
+              const solarizedUiGrey = theme.id === "solarized-light" ? solarizedGrey(theme) : null;
+              setVar(root, "--activity-bg", color(theme, "activityBar.background"));
+              setVar(
+                root,
+                "--activity-fg",
+                solarizedUiGrey || color(theme, "activityBar.foreground"),
+              );
+              setVar(
+                root,
+                "--activity-muted",
+                solarizedUiGrey || color(theme, "activityBar.inactiveForeground"),
+              );
+              setVar(root, "--activity-active", color(theme, "activityBar.activeBorder"));
+              setVar(root, "--sidebar-bg", color(theme, "sideBar.background"));
+              setVar(root, "--sidebar-fg", solarizedUiGrey || color(theme, "sideBar.foreground"));
+              setVar(root, "--sidebar-border", color(theme, "sideBar.border"));
+              setVar(root, "--tab-bg", color(theme, "tab.inactiveBackground"));
+              setVar(root, "--tab-active-bg", color(theme, "tab.activeBackground"));
+              setVar(
+                root,
+                "--tab-active-fg",
+                solarizedUiGrey || color(theme, "tab.activeForeground"),
+              );
+              setVar(
+                root,
+                "--tab-inactive-fg",
+                solarizedUiGrey || color(theme, "tab.inactiveForeground"),
+              );
+              setVar(root, "--tab-border", color(theme, "tab.border"));
+              setVar(root, "--editor-bg", color(theme, "editor.background"));
+              setVar(root, "--editor-fg", color(theme, "editor.foreground"));
+              setVar(root, "--editor-line", color(theme, "editor.lineHighlightBackground"));
+              setVar(root, "--gutter-fg", color(theme, "editorLineNumber.foreground"));
+              setVar(root, "--gutter-active-fg", color(theme, "editorLineNumber.activeForeground"));
+              setVar(root, "--panel-bg", color(theme, "panel.background"));
+              setVar(root, "--panel-border", color(theme, "panel.border"));
+              setVar(root, "--status-bg", color(theme, "statusBar.background"));
+              setVar(root, "--status-fg", color(theme, "statusBar.foreground"));
+              setVar(root, "--status-border", color(theme, "statusBar.border"));
+              setVar(root, "--status-remote-bg", color(theme, "statusBarItem.remoteBackground"));
+              setVar(
+                root,
+                "--status-remote-fg",
+                solarizedUiGrey || color(theme, "statusBarItem.remoteForeground"),
+              );
+              setVar(root, "--title-bg", color(theme, "titleBar.activeBackground"));
+              setVar(
+                root,
+                "--title-fg",
+                solarizedUiGrey || color(theme, "titleBar.activeForeground"),
+              );
+              setVar(root, "--token-comment", theme.tokens.comment);
+              setVar(root, "--token-keyword", theme.tokens.keyword);
+              setVar(root, "--token-function", theme.tokens.function);
+              setVar(root, "--token-string", theme.tokens.string);
+              setVar(root, "--token-number", theme.tokens.number);
+              setVar(root, "--token-variable", theme.tokens.variable);
+              setVar(root, "--token-parameter", theme.tokens.parameter);
+              setVar(root, "--token-operator", theme.tokens.operator);
+              setVar(root, "--token-punctuation", theme.tokens.punctuation);
+              setVar(root, "--token-class-name", theme.tokens.className);
+            }
+
+            function renderCode(root) {
+              const code = root.querySelector(".code");
+              codeLines.forEach((segments, index) => {
+                const line = document.createElement("div");
+                line.className = "line";
+                line.dataset.lineIndex = String(index);
+
+                const lineNumber = document.createElement("span");
+                lineNumber.className = "line-number";
+                lineNumber.textContent = String(index + 1);
+                line.appendChild(lineNumber);
+
+                const lineCode = document.createElement("span");
+                lineCode.className = "line-code";
+                segments.forEach((segment) => {
+                  [...segment.text].forEach((char) => {
+                    const span = document.createElement("span");
+                    span.className =
+                      segment.token === "plain"
+                        ? "char"
+                        : "char tok-" +
+                          segment.token.replace(/[A-Z]/g, (match) => "-" + match.toLowerCase());
+                    span.dataset.lineIndex = String(index);
+                    span.textContent = char;
+                    lineCode.appendChild(span);
+                  });
+                });
+                line.appendChild(lineCode);
+                code.appendChild(line);
+              });
+
+              const caret = document.createElement("span");
+              caret.className = "caret";
+              root.querySelector(".editor").appendChild(caret);
+            }
+
+            function caretPointForElement(editor, el) {
+              const editorBox = editor.getBoundingClientRect();
+              const charBox = el.getBoundingClientRect();
+              return {
+                x: charBox.right - editorBox.left + 2,
+                y: charBox.top - editorBox.top + 3,
+              };
+            }
+
+            function caretPointForLineStart(editor, line) {
+              const editorBox = editor.getBoundingClientRect();
+              const lineBox = line.getBoundingClientRect();
+              const codeBox = line.querySelector(".line-code").getBoundingClientRect();
+              return {
+                x: codeBox.left - editorBox.left,
+                y: lineBox.top - editorBox.top + 3,
+              };
+            }
+
+            function lineHighlightY(editor, line) {
+              const editorBox = editor.getBoundingClientRect();
+              const lineBox = line.getBoundingClientRect();
+              return lineBox.top - editorBox.top;
+            }
+
+            function buildTimeline(root, compositionId) {
+              const tl = gsap.timeline({ paused: true });
+              const editor = root.querySelector(".editor");
+              const caret = root.querySelector(".caret");
+              const activeLine = root.querySelector(".active-line");
+              const lineEls = gsap.utils.toArray(root.querySelectorAll(".line"));
+              const lineStartTimes = [];
+              const charSchedule = [];
+              let cursorTime = 0.95;
+
+              lineEls.forEach((line, lineIndex) => {
+                const lineChars = gsap.utils.toArray(line.querySelectorAll(".char"));
+                lineStartTimes[lineIndex] = cursorTime;
+                lineChars.forEach((char, charIndex) => {
+                  charSchedule.push({ char, time: cursorTime + charIndex * 0.012 });
+                });
+                cursorTime += Math.max(lineChars.length * 0.012, 0.08) + 0.045;
+              });
+
+              gsap.set(activeLine, { y: lineHighlightY(editor, lineEls[0]) });
+              gsap.set(caret, caretPointForLineStart(editor, lineEls[0]));
+
+              tl.from(
+                root.querySelector(".header"),
+                { y: 24, opacity: 0, duration: 0.45, ease: "power3.out" },
+                0,
+              );
+              tl.from(
+                root.querySelector(".workbench"),
+                { y: 42, opacity: 0, scale: 0.986, duration: 0.58, ease: "power3.out" },
+                0.1,
+              );
+              tl.from(activeLine, { opacity: 0, duration: 0.22, ease: "power2.out" }, 0.74);
+              lineStartTimes.forEach((time, lineIndex) => {
+                const line = lineEls[lineIndex];
+                tl.set(activeLine, { y: lineHighlightY(editor, line) }, time);
+                tl.set(caret, caretPointForLineStart(editor, line), time);
+                tl.call(
+                  () => {
+                    lineEls.forEach((item) => item.classList.toggle("is-active", item === line));
+                  },
+                  [],
+                  time,
+                );
+              });
+              charSchedule.forEach(({ char, time }) => {
+                tl.set(char, { opacity: 1 }, time);
+                tl.set(caret, caretPointForElement(editor, char), time + 0.002);
+              });
+              tl.to(
+                root.querySelector(".caret"),
+                { opacity: 0, duration: 0.34, repeat: 25, yoyo: true, ease: "steps(1)" },
+                0.95,
+              );
+              tl.from(
+                root.querySelector(".terminal"),
+                { y: 140, opacity: 0, duration: 0.56, ease: "power3.out" },
+                7.55,
+              );
+              tl.from(
+                root.querySelector(".terminal-body").children,
+                { opacity: 0, y: 8, duration: 0.24, stagger: 0.16, ease: "power2.out" },
+                8.05,
+              );
+              tl.to(
+                root.querySelector(".workbench"),
+                { rotateY: -10.5, z: 74, duration: 0.72, ease: "power2.inOut" },
+                9.35,
+              );
+              tl.to(
+                root.querySelector(".workbench"),
+                { rotateY: 0, z: 0, duration: 0.62, ease: "power2.inOut" },
+                10.08,
+              );
+
+              window.__timelines = window.__timelines || {};
+              window.__timelines[compositionId] = tl;
+
+              const previewTime = new URLSearchParams(window.location.search).get("t");
+              if (previewTime !== null) {
+                tl.time(Number(previewTime));
+              }
+            }
+
+            window.createVSCodeThemeComposition = (compositionId, themeOrId) => {
+              const root =
+                document.querySelector(
+                  '[data-composition-id="' + compositionId + '"] .vscode-theme-scene',
+                ) ||
+                document.querySelector(
+                  '.vscode-theme-scene[data-composition-id="' + compositionId + '"]',
+                ) ||
+                document.querySelector('[data-composition-id="' + compositionId + '"]');
+              const theme =
+                typeof themeOrId === "string"
+                  ? window.VSCODE_THEME_REGISTRY.find((item) => item.id === themeOrId)
+                  : themeOrId;
+              if (!root || !theme) return;
+              root.querySelector(".theme-label").textContent = theme.label;
+              root.querySelector(".theme-source").textContent = theme.sourceFile;
+              applyTheme(root, theme);
+              renderCode(root);
+              buildTimeline(root, compositionId);
+            };
+          })();
+        </script>
+        <script>
+          window.__timelines = window.__timelines || {};
+          window.__timelines["vscode-light-modern"] =
+            window.__timelines["vscode-light-modern"] || gsap.timeline({ paused: true });
+          window.createVSCodeThemeComposition("vscode-light-modern", {
+            id: "light-modern",
+            label: "Light Modern",
+            sourceFile: "light_modern.json",
+            uiTheme: "vs",
+            colors: {
+              "activityBar.activeBorder": "#005FB8",
+              "activityBar.background": "#F8F8F8",
+              "activityBar.border": "#E5E5E5",
+              "activityBar.foreground": "#1F1F1F",
+              "activityBar.inactiveForeground": "#616161",
+              "editor.background": "#FFFFFF",
+              "editor.foreground": "#3B3B3B",
+              "editorGroup.border": "#E5E5E5",
+              "editorGroupHeader.tabsBackground": "#F8F8F8",
+              "editorGroupHeader.tabsBorder": "#E5E5E5",
+              "editorLineNumber.activeForeground": "#171184",
+              "editorLineNumber.foreground": "#6E7681",
+              foreground: "#3B3B3B",
+              "icon.foreground": "#3B3B3B",
+              "panel.background": "#F8F8F8",
+              "panel.border": "#E5E5E5",
+              "sideBar.background": "#F8F8F8",
+              "sideBar.border": "#E5E5E5",
+              "sideBar.foreground": "#3B3B3B",
+              "sideBarSectionHeader.background": "#F8F8F8",
+              "sideBarSectionHeader.border": "#E5E5E5",
+              "sideBarSectionHeader.foreground": "#3B3B3B",
+              "sideBarTitle.foreground": "#3B3B3B",
+              "statusBar.background": "#F8F8F8",
+              "statusBar.border": "#E5E5E5",
+              "statusBar.foreground": "#3B3B3B",
+              "statusBarItem.remoteBackground": "#005FB8",
+              "statusBarItem.remoteForeground": "#FFFFFF",
+              "tab.activeBackground": "#FFFFFF",
+              "tab.activeBorder": "#F8F8F8",
+              "tab.activeBorderTop": "#005FB8",
+              "tab.activeForeground": "#3B3B3B",
+              "tab.border": "#E5E5E5",
+              "tab.inactiveBackground": "#F8F8F8",
+              "tab.inactiveForeground": "#868686",
+              "terminal.foreground": "#3B3B3B",
+              "terminalCursor.foreground": "#005FB8",
+              "titleBar.activeBackground": "#F8F8F8",
+              "titleBar.activeForeground": "#1E1E1E",
+            },
+            tokens: {
+              comment: "#008000",
+              keyword: "#EE0000",
+              function: "#795E26",
+              string: "#811f3f",
+              number: "#098658",
+              variable: "#0070C1",
+              parameter: "#001080",
+              operator: "#EE0000",
+              punctuation: "#d16969",
+              className: "#267f99",
+            },
+          });
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
 <div
   data-composition-id="code-snippet-light-modern"
   data-composition-src="compositions/code-snippet-light-modern.html"
@@ -29,8 +1125,13 @@ It runs for 11 seconds at 1920×1080. Paste this into your composition:
 ></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.
+## Features
+
+- Full VS Code workbench recreation — activity bar, sidebar, explorer tree, editor tabs, breadcrumbs, terminal panel, status bar
+- Per-character typing animation with cursor tracking and active line highlight
+- Colors sourced from official `microsoft/vscode` built-in theme JSON
+- 3D perspective tilt at the end of the typing sequence
+- Terminal panel with mock test output
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/code-snippet-light-plus.mdx b/docs/catalog/blocks/code-snippet-light-plus.mdx
index f041e2961b..325ced96ff 100644
--- a/docs/catalog/blocks/code-snippet-light-plus.mdx
+++ b/docs/catalog/blocks/code-snippet-light-plus.mdx
@@ -3,21 +3,1085 @@ title: "Code Snippet - Light+"
 description: "VS Code workbench with per-character typing animation in the Light+ theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-light-plus.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-light-plus.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/code-snippet-light-plus.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Code Snippet - Light+ preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add code-snippet-light-plus
-```
+<InstallCommand command="npx hyperframes add code-snippet-light-plus" />
 
 That writes `compositions/code-snippet-light-plus.html`, plus 1 supporting file under `assets/`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`code-snippet-light-plus.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Light+ VS Code Theme Composition</title>
+  </head>
+  <body>
+    <template id="vscode-light-plus-template">
+      <div
+        class="vscode-theme-scene"
+        data-composition-id="vscode-light-plus"
+        data-width="1920"
+        data-height="1080"
+      >
+        <main class="scene-content">
+          <section class="header">
+            <div>
+              <p class="kicker">Official VS Code built-in theme</p>
+              <h1 class="title"><span class="theme-label">Light+</span></h1>
+            </div>
+            <p class="source-note">
+              Typing `functional_toolkit.py` with workbench colors from
+              <span class="theme-source">light_plus.json</span>.
+            </p>
+          </section>
+
+          <section class="workbench">
+            <div class="titlebar">
+              <div class="traffic"><span></span><span></span><span></span></div>
+              <div class="window-title">functional-toolkit - Visual Studio Code</div>
+              <div class="command-center">Search</div>
+            </div>
+
+            <aside class="activity" aria-label="Activity bar">
+              <svg class="activity-icon active" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="currentColor"
+                  d="M4 4h7v7H4V4Zm9 0h7v7h-7V4ZM4 13h7v7H4v-7Zm9 0h7v7h-7v-7Z"
+                />
+              </svg>
+              <svg class="activity-icon" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  d="m21 21-5.2-5.2M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Z"
+                />
+              </svg>
+              <svg class="activity-icon" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  d="M8 18 3 12l5-6m8 12 5-6-5-6"
+                />
+              </svg>
+              <svg class="activity-icon" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  d="M12 3v18m0-18 6 6m-6-6L6 9m6 12 6-6m-6 6-6-6"
+                />
+              </svg>
+            </aside>
+
+            <aside class="sidebar">
+              <div class="sidebar-title">Explorer</div>
+              <div class="section-title">⌄ Functional Toolkit</div>
+              <div class="tree">
+                <div class="tree-row">⌄ src</div>
+                <div class="tree-row child selected">◇ functional_toolkit.py</div>
+                <div class="tree-row child">◇ test_toolkit.py</div>
+                <div class="tree-row">◇ pyproject.toml</div>
+                <div class="tree-row">◇ README.md</div>
+              </div>
+            </aside>
+
+            <section class="editor-area">
+              <div class="tabs">
+                <div class="tab">◇ functional_toolkit.py</div>
+                <div class="tab inactive">README.md</div>
+              </div>
+              <div class="breadcrumbs">functional-toolkit › src › functional_toolkit.py</div>
+              <div class="editor">
+                <div class="active-line"></div>
+                <div class="code"></div>
+              </div>
+              <div class="terminal">
+                <div class="panel-tabs">
+                  <span class="active">Terminal</span><span>Problems</span><span>Output</span>
+                </div>
+                <div class="terminal-body">
+                  <div><span class="prompt">functional-toolkit %</span> python -m pytest</div>
+                  <div>collected 3 items</div>
+                  <div>tests/test_toolkit.py ... <span class="tok-comment">passed</span></div>
+                </div>
+              </div>
+            </section>
+
+            <footer class="statusbar">
+              <div class="status-left">
+                <span class="remote">main</span>
+                <span>0 errors</span>
+                <span>0 warnings</span>
+              </div>
+              <div class="status-right">
+                <span>Ln 17, Col 1</span>
+                <span>Spaces: 4</span>
+                <span>UTF-8</span>
+                <span>Python 3.12</span>
+              </div>
+            </footer>
+          </section>
+        </main>
+        <style>
+          * {
+            box-sizing: border-box;
+            letter-spacing: 0;
+          }
+
+          html,
+          body {
+            margin: 0;
+            width: 1920px;
+            height: 1080px;
+            overflow: hidden;
+            background: #000000;
+            font-family:
+              Inter,
+              -apple-system,
+              BlinkMacSystemFont,
+              "Segoe UI",
+              sans-serif;
+          }
+
+          .vscode-theme-scene {
+            --activity-bg: #181818;
+            --activity-fg: #d7d7d7;
+            --activity-muted: #868686;
+            --activity-active: #0078d4;
+            --sidebar-bg: #181818;
+            --sidebar-fg: #cccccc;
+            --sidebar-border: #2b2b2b;
+            --tab-bg: #181818;
+            --tab-active-bg: #1f1f1f;
+            --tab-active-fg: #ffffff;
+            --tab-inactive-fg: #9d9d9d;
+            --tab-border: #2b2b2b;
+            --editor-bg: #1f1f1f;
+            --editor-fg: #cccccc;
+            --editor-line: rgba(255, 255, 255, 0.04);
+            --gutter-fg: #6e7681;
+            --gutter-active-fg: #cccccc;
+            --panel-bg: #181818;
+            --panel-border: #2b2b2b;
+            --status-bg: #181818;
+            --status-fg: #cccccc;
+            --status-border: #2b2b2b;
+            --title-bg: #181818;
+            --title-fg: #cccccc;
+            --token-comment: #6a9955;
+            --token-keyword: #c586c0;
+            --token-function: #dcdcaa;
+            --token-string: #ce9178;
+            --token-number: #b5cea8;
+            --token-variable: #9cdcfe;
+            --token-parameter: #9cdcfe;
+            --token-operator: #d4d4d4;
+            --token-punctuation: #d4d4d4;
+            --token-class-name: #4ec9b0;
+            position: relative;
+            width: 1920px;
+            height: 1080px;
+            overflow: hidden;
+            background:
+              linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.32)),
+              url("../assets/background.jpeg") center / cover no-repeat;
+            color: var(--editor-fg);
+          }
+
+          .scene-content {
+            position: relative;
+            z-index: 1;
+            width: 100%;
+            height: 100%;
+            padding: 54px 70px 92px;
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+            perspective: 2200px;
+            perspective-origin: 56% 52%;
+          }
+
+          .header {
+            display: flex;
+            align-items: end;
+            justify-content: space-between;
+            min-height: 66px;
+            text-shadow:
+              0 2px 12px rgba(0, 0, 0, 0.42),
+              0 14px 34px rgba(0, 0, 0, 0.32);
+          }
+
+          .kicker {
+            margin: 0 0 7px;
+            color: var(--gutter-fg);
+            font-size: 15px;
+            font-weight: 650;
+            text-transform: uppercase;
+            text-shadow:
+              0 2px 8px rgba(0, 0, 0, 0.48),
+              0 10px 26px rgba(0, 0, 0, 0.36);
+          }
+
+          .title {
+            margin: 0;
+            color: var(--editor-fg);
+            font-size: 44px;
+            line-height: 1;
+            font-weight: 760;
+          }
+
+          .source-note {
+            width: 510px;
+            color: var(--gutter-fg);
+            font-size: 16px;
+            line-height: 1.35;
+            text-align: right;
+            text-shadow:
+              0 2px 10px rgba(0, 0, 0, 0.46),
+              0 12px 30px rgba(0, 0, 0, 0.34);
+          }
+
+          .workbench {
+            height: 824px;
+            display: grid;
+            grid-template-columns: 54px 290px 1fr;
+            grid-template-rows: 36px 1fr 26px;
+            overflow: hidden;
+            border: 1px solid var(--sidebar-border);
+            border-radius: 8px;
+            background: var(--editor-bg);
+            box-shadow: 0 34px 90px rgba(0, 0, 0, 0.42);
+            transform: translateZ(0);
+            transform-origin: 82% 50%;
+            transform-style: preserve-3d;
+            will-change: transform;
+          }
+
+          .titlebar {
+            grid-column: 1 / -1;
+            display: grid;
+            grid-template-columns: 120px 1fr 210px;
+            align-items: center;
+            background: var(--title-bg);
+            color: var(--title-fg);
+            border-bottom: 1px solid var(--tab-border);
+            font-size: 12px;
+          }
+
+          .traffic {
+            display: flex;
+            gap: 8px;
+            padding-left: 18px;
+          }
+
+          .traffic span {
+            width: 12px;
+            height: 12px;
+            border-radius: 999px;
+          }
+
+          .traffic span:nth-child(1) {
+            background: #ff5f57;
+          }
+          .traffic span:nth-child(2) {
+            background: #ffbd2e;
+          }
+          .traffic span:nth-child(3) {
+            background: #28c840;
+          }
+
+          .window-title {
+            justify-self: center;
+            opacity: 0.84;
+          }
+
+          .command-center {
+            justify-self: end;
+            width: 176px;
+            height: 22px;
+            margin-right: 16px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border: 1px solid color-mix(in srgb, var(--title-fg), transparent 78%);
+            border-radius: 5px;
+            color: color-mix(in srgb, var(--title-fg), transparent 18%);
+          }
+
+          .activity {
+            grid-row: 2 / 3;
+            background: var(--activity-bg);
+            border-right: 1px solid var(--sidebar-border);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 10px 0;
+            gap: 18px;
+          }
+
+          .activity-icon {
+            width: 28px;
+            height: 28px;
+            color: var(--activity-muted);
+          }
+
+          .activity-icon.active {
+            color: var(--activity-fg);
+            border-left: 2px solid var(--activity-active);
+            padding-left: 4px;
+          }
+
+          .sidebar {
+            grid-row: 2 / 3;
+            background: var(--sidebar-bg);
+            color: var(--sidebar-fg);
+            border-right: 1px solid var(--sidebar-border);
+            display: flex;
+            flex-direction: column;
+            min-width: 0;
+          }
+
+          .sidebar-title {
+            height: 38px;
+            display: flex;
+            align-items: center;
+            padding: 0 20px;
+            color: var(--sidebar-fg);
+            font-size: 11px;
+            text-transform: uppercase;
+          }
+
+          .section-title {
+            height: 24px;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            padding: 0 14px;
+            background: color-mix(in srgb, var(--sidebar-bg), var(--sidebar-fg) 5%);
+            border-top: 1px solid var(--sidebar-border);
+            border-bottom: 1px solid var(--sidebar-border);
+            color: var(--sidebar-fg);
+            font-size: 11px;
+            font-weight: 700;
+          }
+
+          .tree {
+            padding: 8px 0;
+            font-size: 13px;
+            line-height: 24px;
+          }
+
+          .tree-row {
+            height: 24px;
+            display: flex;
+            align-items: center;
+            gap: 7px;
+            padding: 0 10px 0 18px;
+            color: color-mix(in srgb, var(--sidebar-fg), transparent 8%);
+            white-space: nowrap;
+          }
+
+          .tree-row.child {
+            padding-left: 34px;
+          }
+
+          .tree-row.selected {
+            background: color-mix(in srgb, var(--sidebar-fg), transparent 88%);
+            color: var(--sidebar-fg);
+          }
+
+          .editor-area {
+            grid-row: 2 / 3;
+            display: grid;
+            grid-template-rows: 36px 30px 1fr 138px;
+            min-width: 0;
+            background: var(--editor-bg);
+          }
+
+          .tabs {
+            display: flex;
+            background: var(--tab-bg);
+            border-bottom: 1px solid var(--tab-border);
+          }
+
+          .tab {
+            width: 205px;
+            height: 36px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 0 13px;
+            border-right: 1px solid var(--tab-border);
+            background: var(--tab-active-bg);
+            color: var(--tab-active-fg);
+            border-top: 2px solid var(--activity-active);
+            font-size: 13px;
+          }
+
+          .tab.inactive {
+            background: var(--tab-bg);
+            color: var(--tab-inactive-fg);
+            border-top-color: transparent;
+          }
+
+          .breadcrumbs {
+            display: flex;
+            align-items: center;
+            gap: 7px;
+            padding: 0 18px;
+            color: var(--gutter-fg);
+            border-bottom: 1px solid color-mix(in srgb, var(--tab-border), transparent 20%);
+            font-size: 12px;
+          }
+
+          .editor {
+            position: relative;
+            overflow: hidden;
+            background: var(--editor-bg);
+            color: var(--editor-fg);
+            font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+            font-size: 18px;
+            line-height: 1.52;
+          }
+
+          .active-line {
+            position: absolute;
+            left: 0;
+            right: 0;
+            top: 0;
+            height: 28px;
+            background: var(--editor-line);
+            will-change: transform;
+          }
 
-It runs for 11 seconds at 1920×1080. Paste this into your composition:
+          .code {
+            position: relative;
+            padding: 20px 36px 18px 0;
+          }
 
-```html index.html
+          .line {
+            height: 28px;
+            display: grid;
+            grid-template-columns: 72px 1fr;
+            align-items: center;
+          }
+
+          .line-number {
+            padding-right: 18px;
+            color: var(--gutter-fg);
+            text-align: right;
+            user-select: none;
+          }
+
+          .line.is-active .line-number {
+            color: var(--gutter-active-fg);
+          }
+
+          .line-code {
+            white-space: pre;
+          }
+
+          .char {
+            opacity: 0;
+          }
+
+          .tok-comment {
+            color: var(--token-comment);
+          }
+          .tok-keyword {
+            color: var(--token-keyword);
+          }
+          .tok-function {
+            color: var(--token-function);
+          }
+          .tok-string {
+            color: var(--token-string);
+          }
+          .tok-number {
+            color: var(--token-number);
+          }
+          .tok-variable {
+            color: var(--token-variable);
+          }
+          .tok-parameter {
+            color: var(--token-parameter);
+          }
+          .tok-operator {
+            color: var(--token-operator);
+          }
+          .tok-punctuation {
+            color: var(--token-punctuation);
+          }
+          .tok-class-name {
+            color: var(--token-class-name);
+          }
+
+          .caret {
+            position: absolute;
+            left: 0;
+            top: 0;
+            z-index: 3;
+            display: block;
+            width: 2px;
+            height: 22px;
+            background: var(--editor-fg);
+            pointer-events: none;
+            will-change: transform, opacity;
+          }
+
+          .terminal {
+            display: grid;
+            grid-template-rows: 32px 1fr;
+            background: var(--panel-bg);
+            border-top: 1px solid var(--panel-border);
+            color: var(--editor-fg);
+            font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+            font-size: 14px;
+          }
+
+          .panel-tabs {
+            display: flex;
+            align-items: center;
+            gap: 22px;
+            padding: 0 18px;
+            border-bottom: 1px solid var(--panel-border);
+            color: var(--gutter-fg);
+            font-family:
+              Inter,
+              -apple-system,
+              BlinkMacSystemFont,
+              "Segoe UI",
+              sans-serif;
+            font-size: 12px;
+            text-transform: uppercase;
+          }
+
+          .panel-tabs .active {
+            color: var(--editor-fg);
+            border-bottom: 1px solid var(--activity-active);
+            height: 32px;
+            display: flex;
+            align-items: center;
+          }
+
+          .terminal-body {
+            padding: 12px 20px;
+            color: var(--editor-fg);
+            line-height: 1.8;
+          }
+
+          .prompt {
+            color: var(--token-function);
+          }
+
+          .statusbar {
+            grid-column: 1 / -1;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            background: var(--status-bg);
+            color: var(--status-fg);
+            border-top: 1px solid var(--status-border);
+            font-size: 12px;
+          }
+
+          .status-left,
+          .status-right {
+            display: flex;
+            align-items: center;
+            gap: 18px;
+            padding: 0 12px;
+          }
+
+          .remote {
+            align-self: stretch;
+            display: flex;
+            align-items: center;
+            padding: 0 12px;
+            margin-left: -12px;
+            background: var(--status-remote-bg, var(--activity-active));
+            color: var(--status-remote-fg, #ffffff);
+          }
+
+          svg {
+            display: block;
+          }
+        </style>
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (() => {
+            const codeLines = [
+              [{ text: "# A small functional toolkit", token: "comment" }],
+              [
+                { text: "def", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "pluck_deep", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "key", token: "parameter" },
+                { text: "):", token: "punctuation" },
+              ],
+              [
+                { text: "    ", token: "plain" },
+                { text: "return", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "obj", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "reduce", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "acc", token: "parameter" },
+                { text: ", ", token: "punctuation" },
+                { text: "k", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "acc", token: "variable" },
+                { text: "[", token: "punctuation" },
+                { text: "k", token: "variable" },
+                { text: "]", token: "punctuation" },
+                { text: ", ", token: "punctuation" },
+                { text: "key", token: "variable" },
+                { text: ".split", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "'.'", token: "string" },
+                { text: "), ", token: "punctuation" },
+                { text: "obj", token: "variable" },
+                { text: ")", token: "punctuation" },
+              ],
+              [],
+              [
+                { text: "def", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "compose", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "*", token: "operator" },
+                { text: "fns", token: "parameter" },
+                { text: "):", token: "punctuation" },
+              ],
+              [
+                { text: "    ", token: "plain" },
+                { text: "return", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "res", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "reduce", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "acc", token: "parameter" },
+                { text: ", ", token: "punctuation" },
+                { text: "fn", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "fn", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "acc", token: "variable" },
+                { text: "), ", token: "punctuation" },
+                { text: "fns", token: "variable" },
+                { text: ", ", token: "punctuation" },
+                { text: "res", token: "variable" },
+                { text: ")", token: "punctuation" },
+              ],
+              [],
+              [
+                { text: "def", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "unfold", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "f", token: "parameter" },
+                { text: ", ", token: "punctuation" },
+                { text: "seed", token: "parameter" },
+                { text: "):", token: "punctuation" },
+              ],
+              [
+                { text: "    ", token: "plain" },
+                { text: '"""Build a list by repeatedly applying f to a seed."""', token: "string" },
+              ],
+              [
+                { text: "    acc", token: "variable" },
+                { text: " = ", token: "operator" },
+                { text: "[]", token: "punctuation" },
+              ],
+              [
+                { text: "    while", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "True", token: "className" },
+                { text: ":", token: "punctuation" },
+              ],
+              [
+                { text: "        result", token: "variable" },
+                { text: " = ", token: "operator" },
+                { text: "f", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "seed", token: "variable" },
+                { text: ")", token: "punctuation" },
+              ],
+              [
+                { text: "        if", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "result", token: "variable" },
+                { text: " is ", token: "keyword" },
+                { text: "None", token: "className" },
+                { text: ":", token: "punctuation" },
+              ],
+              [
+                { text: "            return", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "acc", token: "variable" },
+              ],
+              [
+                { text: "        acc", token: "variable" },
+                { text: ".append", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "result", token: "variable" },
+                { text: "[", token: "punctuation" },
+                { text: "0", token: "number" },
+                { text: "])", token: "punctuation" },
+              ],
+              [
+                { text: "        seed", token: "variable" },
+                { text: " = ", token: "operator" },
+                { text: "result", token: "variable" },
+                { text: "[", token: "punctuation" },
+                { text: "1", token: "number" },
+                { text: "]", token: "punctuation" },
+              ],
+              [],
+            ];
+
+            const fallback = {
+              "activityBar.background": "#181818",
+              "activityBar.foreground": "#d7d7d7",
+              "activityBar.inactiveForeground": "#868686",
+              "activityBar.activeBorder": "#0078d4",
+              "sideBar.background": "#181818",
+              "sideBar.foreground": "#cccccc",
+              "sideBar.border": "#2b2b2b",
+              "tab.activeBackground": "#1f1f1f",
+              "tab.activeForeground": "#ffffff",
+              "tab.inactiveBackground": "#181818",
+              "tab.inactiveForeground": "#9d9d9d",
+              "tab.border": "#2b2b2b",
+              "editor.background": "#1f1f1f",
+              "editor.foreground": "#cccccc",
+              "editor.lineHighlightBackground": "#ffffff0a",
+              "editorLineNumber.foreground": "#6e7681",
+              "editorLineNumber.activeForeground": "#cccccc",
+              "panel.background": "#181818",
+              "panel.border": "#2b2b2b",
+              "statusBar.background": "#181818",
+              "statusBar.foreground": "#cccccc",
+              "statusBar.border": "#2b2b2b",
+              "titleBar.activeBackground": "#181818",
+              "titleBar.activeForeground": "#cccccc",
+            };
+
+            function color(theme, key) {
+              return theme.colors[key] || fallback[key] || theme.colors.foreground || "#cccccc";
+            }
+
+            function solarizedGrey(theme) {
+              return (
+                theme.colors["tab.inactiveForeground"] ||
+                theme.colors["editor.foreground"] ||
+                "#586E75"
+              );
+            }
+
+            function setVar(root, name, value) {
+              root.style.setProperty(name, value);
+            }
+
+            function applyTheme(root, theme) {
+              const solarizedUiGrey = theme.id === "solarized-light" ? solarizedGrey(theme) : null;
+              setVar(root, "--activity-bg", color(theme, "activityBar.background"));
+              setVar(
+                root,
+                "--activity-fg",
+                solarizedUiGrey || color(theme, "activityBar.foreground"),
+              );
+              setVar(
+                root,
+                "--activity-muted",
+                solarizedUiGrey || color(theme, "activityBar.inactiveForeground"),
+              );
+              setVar(root, "--activity-active", color(theme, "activityBar.activeBorder"));
+              setVar(root, "--sidebar-bg", color(theme, "sideBar.background"));
+              setVar(root, "--sidebar-fg", solarizedUiGrey || color(theme, "sideBar.foreground"));
+              setVar(root, "--sidebar-border", color(theme, "sideBar.border"));
+              setVar(root, "--tab-bg", color(theme, "tab.inactiveBackground"));
+              setVar(root, "--tab-active-bg", color(theme, "tab.activeBackground"));
+              setVar(
+                root,
+                "--tab-active-fg",
+                solarizedUiGrey || color(theme, "tab.activeForeground"),
+              );
+              setVar(
+                root,
+                "--tab-inactive-fg",
+                solarizedUiGrey || color(theme, "tab.inactiveForeground"),
+              );
+              setVar(root, "--tab-border", color(theme, "tab.border"));
+              setVar(root, "--editor-bg", color(theme, "editor.background"));
+              setVar(root, "--editor-fg", color(theme, "editor.foreground"));
+              setVar(root, "--editor-line", color(theme, "editor.lineHighlightBackground"));
+              setVar(root, "--gutter-fg", color(theme, "editorLineNumber.foreground"));
+              setVar(root, "--gutter-active-fg", color(theme, "editorLineNumber.activeForeground"));
+              setVar(root, "--panel-bg", color(theme, "panel.background"));
+              setVar(root, "--panel-border", color(theme, "panel.border"));
+              setVar(root, "--status-bg", color(theme, "statusBar.background"));
+              setVar(root, "--status-fg", color(theme, "statusBar.foreground"));
+              setVar(root, "--status-border", color(theme, "statusBar.border"));
+              setVar(root, "--status-remote-bg", color(theme, "statusBarItem.remoteBackground"));
+              setVar(
+                root,
+                "--status-remote-fg",
+                solarizedUiGrey || color(theme, "statusBarItem.remoteForeground"),
+              );
+              setVar(root, "--title-bg", color(theme, "titleBar.activeBackground"));
+              setVar(
+                root,
+                "--title-fg",
+                solarizedUiGrey || color(theme, "titleBar.activeForeground"),
+              );
+              setVar(root, "--token-comment", theme.tokens.comment);
+              setVar(root, "--token-keyword", theme.tokens.keyword);
+              setVar(root, "--token-function", theme.tokens.function);
+              setVar(root, "--token-string", theme.tokens.string);
+              setVar(root, "--token-number", theme.tokens.number);
+              setVar(root, "--token-variable", theme.tokens.variable);
+              setVar(root, "--token-parameter", theme.tokens.parameter);
+              setVar(root, "--token-operator", theme.tokens.operator);
+              setVar(root, "--token-punctuation", theme.tokens.punctuation);
+              setVar(root, "--token-class-name", theme.tokens.className);
+            }
+
+            function renderCode(root) {
+              const code = root.querySelector(".code");
+              codeLines.forEach((segments, index) => {
+                const line = document.createElement("div");
+                line.className = "line";
+                line.dataset.lineIndex = String(index);
+
+                const lineNumber = document.createElement("span");
+                lineNumber.className = "line-number";
+                lineNumber.textContent = String(index + 1);
+                line.appendChild(lineNumber);
+
+                const lineCode = document.createElement("span");
+                lineCode.className = "line-code";
+                segments.forEach((segment) => {
+                  [...segment.text].forEach((char) => {
+                    const span = document.createElement("span");
+                    span.className =
+                      segment.token === "plain"
+                        ? "char"
+                        : "char tok-" +
+                          segment.token.replace(/[A-Z]/g, (match) => "-" + match.toLowerCase());
+                    span.dataset.lineIndex = String(index);
+                    span.textContent = char;
+                    lineCode.appendChild(span);
+                  });
+                });
+                line.appendChild(lineCode);
+                code.appendChild(line);
+              });
+
+              const caret = document.createElement("span");
+              caret.className = "caret";
+              root.querySelector(".editor").appendChild(caret);
+            }
+
+            function caretPointForElement(editor, el) {
+              const editorBox = editor.getBoundingClientRect();
+              const charBox = el.getBoundingClientRect();
+              return {
+                x: charBox.right - editorBox.left + 2,
+                y: charBox.top - editorBox.top + 3,
+              };
+            }
+
+            function caretPointForLineStart(editor, line) {
+              const editorBox = editor.getBoundingClientRect();
+              const lineBox = line.getBoundingClientRect();
+              const codeBox = line.querySelector(".line-code").getBoundingClientRect();
+              return {
+                x: codeBox.left - editorBox.left,
+                y: lineBox.top - editorBox.top + 3,
+              };
+            }
+
+            function lineHighlightY(editor, line) {
+              const editorBox = editor.getBoundingClientRect();
+              const lineBox = line.getBoundingClientRect();
+              return lineBox.top - editorBox.top;
+            }
+
+            function buildTimeline(root, compositionId) {
+              const tl = gsap.timeline({ paused: true });
+              const editor = root.querySelector(".editor");
+              const caret = root.querySelector(".caret");
+              const activeLine = root.querySelector(".active-line");
+              const lineEls = gsap.utils.toArray(root.querySelectorAll(".line"));
+              const lineStartTimes = [];
+              const charSchedule = [];
+              let cursorTime = 0.95;
+
+              lineEls.forEach((line, lineIndex) => {
+                const lineChars = gsap.utils.toArray(line.querySelectorAll(".char"));
+                lineStartTimes[lineIndex] = cursorTime;
+                lineChars.forEach((char, charIndex) => {
+                  charSchedule.push({ char, time: cursorTime + charIndex * 0.012 });
+                });
+                cursorTime += Math.max(lineChars.length * 0.012, 0.08) + 0.045;
+              });
+
+              gsap.set(activeLine, { y: lineHighlightY(editor, lineEls[0]) });
+              gsap.set(caret, caretPointForLineStart(editor, lineEls[0]));
+
+              tl.from(
+                root.querySelector(".header"),
+                { y: 24, opacity: 0, duration: 0.45, ease: "power3.out" },
+                0,
+              );
+              tl.from(
+                root.querySelector(".workbench"),
+                { y: 42, opacity: 0, scale: 0.986, duration: 0.58, ease: "power3.out" },
+                0.1,
+              );
+              tl.from(activeLine, { opacity: 0, duration: 0.22, ease: "power2.out" }, 0.74);
+              lineStartTimes.forEach((time, lineIndex) => {
+                const line = lineEls[lineIndex];
+                tl.set(activeLine, { y: lineHighlightY(editor, line) }, time);
+                tl.set(caret, caretPointForLineStart(editor, line), time);
+                tl.call(
+                  () => {
+                    lineEls.forEach((item) => item.classList.toggle("is-active", item === line));
+                  },
+                  [],
+                  time,
+                );
+              });
+              charSchedule.forEach(({ char, time }) => {
+                tl.set(char, { opacity: 1 }, time);
+                tl.set(caret, caretPointForElement(editor, char), time + 0.002);
+              });
+              tl.to(
+                root.querySelector(".caret"),
+                { opacity: 0, duration: 0.34, repeat: 25, yoyo: true, ease: "steps(1)" },
+                0.95,
+              );
+              tl.from(
+                root.querySelector(".terminal"),
+                { y: 140, opacity: 0, duration: 0.56, ease: "power3.out" },
+                7.55,
+              );
+              tl.from(
+                root.querySelector(".terminal-body").children,
+                { opacity: 0, y: 8, duration: 0.24, stagger: 0.16, ease: "power2.out" },
+                8.05,
+              );
+              tl.to(
+                root.querySelector(".workbench"),
+                { rotateY: -10.5, z: 74, duration: 0.72, ease: "power2.inOut" },
+                9.35,
+              );
+              tl.to(
+                root.querySelector(".workbench"),
+                { rotateY: 0, z: 0, duration: 0.62, ease: "power2.inOut" },
+                10.08,
+              );
+
+              window.__timelines = window.__timelines || {};
+              window.__timelines[compositionId] = tl;
+
+              const previewTime = new URLSearchParams(window.location.search).get("t");
+              if (previewTime !== null) {
+                tl.time(Number(previewTime));
+              }
+            }
+
+            window.createVSCodeThemeComposition = (compositionId, themeOrId) => {
+              const root =
+                document.querySelector(
+                  '[data-composition-id="' + compositionId + '"] .vscode-theme-scene',
+                ) ||
+                document.querySelector(
+                  '.vscode-theme-scene[data-composition-id="' + compositionId + '"]',
+                ) ||
+                document.querySelector('[data-composition-id="' + compositionId + '"]');
+              const theme =
+                typeof themeOrId === "string"
+                  ? window.VSCODE_THEME_REGISTRY.find((item) => item.id === themeOrId)
+                  : themeOrId;
+              if (!root || !theme) return;
+              root.querySelector(".theme-label").textContent = theme.label;
+              root.querySelector(".theme-source").textContent = theme.sourceFile;
+              applyTheme(root, theme);
+              renderCode(root);
+              buildTimeline(root, compositionId);
+            };
+          })();
+        </script>
+        <script>
+          window.__timelines = window.__timelines || {};
+          window.__timelines["vscode-light-plus"] =
+            window.__timelines["vscode-light-plus"] || gsap.timeline({ paused: true });
+          window.createVSCodeThemeComposition("vscode-light-plus", {
+            id: "light-plus",
+            label: "Light+",
+            sourceFile: "light_plus.json",
+            uiTheme: "vs",
+            colors: {
+              "editor.background": "#FFFFFF",
+              "editor.foreground": "#000000",
+              "sideBarSectionHeader.background": "#0000",
+              "sideBarSectionHeader.border": "#61616130",
+              "sideBarTitle.foreground": "#6F6F6F",
+              "statusBarItem.remoteBackground": "#16825D",
+              "statusBarItem.remoteForeground": "#FFF",
+            },
+            tokens: {
+              comment: "#008000",
+              keyword: "#EE0000",
+              function: "#795E26",
+              string: "#811f3f",
+              number: "#098658",
+              variable: "#0070C1",
+              parameter: "#001080",
+              operator: "#EE0000",
+              punctuation: "#d16969",
+              className: "#267f99",
+            },
+          });
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
 <div
   data-composition-id="code-snippet-light-plus"
   data-composition-src="compositions/code-snippet-light-plus.html"
@@ -29,8 +1093,13 @@ It runs for 11 seconds at 1920×1080. Paste this into your composition:
 ></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.
+## Features
+
+- Full VS Code workbench recreation — activity bar, sidebar, explorer tree, editor tabs, breadcrumbs, terminal panel, status bar
+- Per-character typing animation with cursor tracking and active line highlight
+- Colors sourced from official `microsoft/vscode` built-in theme JSON
+- 3D perspective tilt at the end of the typing sequence
+- Terminal panel with mock test output
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/code-snippet-monokai.mdx b/docs/catalog/blocks/code-snippet-monokai.mdx
index c83dd588f0..e0fe03b255 100644
--- a/docs/catalog/blocks/code-snippet-monokai.mdx
+++ b/docs/catalog/blocks/code-snippet-monokai.mdx
@@ -3,21 +3,1097 @@ title: "Code Snippet - Monokai"
 description: "VS Code workbench with per-character typing animation in the Monokai theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-monokai.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-monokai.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/code-snippet-monokai.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Code Snippet - Monokai preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add code-snippet-monokai
-```
+<InstallCommand command="npx hyperframes add code-snippet-monokai" />
 
 That writes `compositions/code-snippet-monokai.html`, plus 1 supporting file under `assets/`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`code-snippet-monokai.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Monokai VS Code Theme Composition</title>
+  </head>
+  <body>
+    <template id="vscode-monokai-template">
+      <div
+        class="vscode-theme-scene"
+        data-composition-id="vscode-monokai"
+        data-width="1920"
+        data-height="1080"
+      >
+        <main class="scene-content">
+          <section class="header">
+            <div>
+              <p class="kicker">Official VS Code built-in theme</p>
+              <h1 class="title"><span class="theme-label">Monokai</span></h1>
+            </div>
+            <p class="source-note">
+              Typing `functional_toolkit.py` with workbench colors from
+              <span class="theme-source">monokai-color-theme.json</span>.
+            </p>
+          </section>
+
+          <section class="workbench">
+            <div class="titlebar">
+              <div class="traffic"><span></span><span></span><span></span></div>
+              <div class="window-title">functional-toolkit - Visual Studio Code</div>
+              <div class="command-center">Search</div>
+            </div>
+
+            <aside class="activity" aria-label="Activity bar">
+              <svg class="activity-icon active" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="currentColor"
+                  d="M4 4h7v7H4V4Zm9 0h7v7h-7V4ZM4 13h7v7H4v-7Zm9 0h7v7h-7v-7Z"
+                />
+              </svg>
+              <svg class="activity-icon" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  d="m21 21-5.2-5.2M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Z"
+                />
+              </svg>
+              <svg class="activity-icon" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  d="M8 18 3 12l5-6m8 12 5-6-5-6"
+                />
+              </svg>
+              <svg class="activity-icon" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  d="M12 3v18m0-18 6 6m-6-6L6 9m6 12 6-6m-6 6-6-6"
+                />
+              </svg>
+            </aside>
+
+            <aside class="sidebar">
+              <div class="sidebar-title">Explorer</div>
+              <div class="section-title">⌄ Functional Toolkit</div>
+              <div class="tree">
+                <div class="tree-row">⌄ src</div>
+                <div class="tree-row child selected">◇ functional_toolkit.py</div>
+                <div class="tree-row child">◇ test_toolkit.py</div>
+                <div class="tree-row">◇ pyproject.toml</div>
+                <div class="tree-row">◇ README.md</div>
+              </div>
+            </aside>
+
+            <section class="editor-area">
+              <div class="tabs">
+                <div class="tab">◇ functional_toolkit.py</div>
+                <div class="tab inactive">README.md</div>
+              </div>
+              <div class="breadcrumbs">functional-toolkit › src › functional_toolkit.py</div>
+              <div class="editor">
+                <div class="active-line"></div>
+                <div class="code"></div>
+              </div>
+              <div class="terminal">
+                <div class="panel-tabs">
+                  <span class="active">Terminal</span><span>Problems</span><span>Output</span>
+                </div>
+                <div class="terminal-body">
+                  <div><span class="prompt">functional-toolkit %</span> python -m pytest</div>
+                  <div>collected 3 items</div>
+                  <div>tests/test_toolkit.py ... <span class="tok-comment">passed</span></div>
+                </div>
+              </div>
+            </section>
+
+            <footer class="statusbar">
+              <div class="status-left">
+                <span class="remote">main</span>
+                <span>0 errors</span>
+                <span>0 warnings</span>
+              </div>
+              <div class="status-right">
+                <span>Ln 17, Col 1</span>
+                <span>Spaces: 4</span>
+                <span>UTF-8</span>
+                <span>Python 3.12</span>
+              </div>
+            </footer>
+          </section>
+        </main>
+        <style>
+          * {
+            box-sizing: border-box;
+            letter-spacing: 0;
+          }
+
+          html,
+          body {
+            margin: 0;
+            width: 1920px;
+            height: 1080px;
+            overflow: hidden;
+            background: #000000;
+            font-family:
+              Inter,
+              -apple-system,
+              BlinkMacSystemFont,
+              "Segoe UI",
+              sans-serif;
+          }
+
+          .vscode-theme-scene {
+            --activity-bg: #181818;
+            --activity-fg: #d7d7d7;
+            --activity-muted: #868686;
+            --activity-active: #0078d4;
+            --sidebar-bg: #181818;
+            --sidebar-fg: #cccccc;
+            --sidebar-border: #2b2b2b;
+            --tab-bg: #181818;
+            --tab-active-bg: #1f1f1f;
+            --tab-active-fg: #ffffff;
+            --tab-inactive-fg: #9d9d9d;
+            --tab-border: #2b2b2b;
+            --editor-bg: #1f1f1f;
+            --editor-fg: #cccccc;
+            --editor-line: rgba(255, 255, 255, 0.04);
+            --gutter-fg: #6e7681;
+            --gutter-active-fg: #cccccc;
+            --panel-bg: #181818;
+            --panel-border: #2b2b2b;
+            --status-bg: #181818;
+            --status-fg: #cccccc;
+            --status-border: #2b2b2b;
+            --title-bg: #181818;
+            --title-fg: #cccccc;
+            --token-comment: #6a9955;
+            --token-keyword: #c586c0;
+            --token-function: #dcdcaa;
+            --token-string: #ce9178;
+            --token-number: #b5cea8;
+            --token-variable: #9cdcfe;
+            --token-parameter: #9cdcfe;
+            --token-operator: #d4d4d4;
+            --token-punctuation: #d4d4d4;
+            --token-class-name: #4ec9b0;
+            position: relative;
+            width: 1920px;
+            height: 1080px;
+            overflow: hidden;
+            background:
+              linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.32)),
+              url("../assets/background.jpeg") center / cover no-repeat;
+            color: var(--editor-fg);
+          }
+
+          .scene-content {
+            position: relative;
+            z-index: 1;
+            width: 100%;
+            height: 100%;
+            padding: 54px 70px 92px;
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+            perspective: 2200px;
+            perspective-origin: 56% 52%;
+          }
+
+          .header {
+            display: flex;
+            align-items: end;
+            justify-content: space-between;
+            min-height: 66px;
+            text-shadow:
+              0 2px 12px rgba(0, 0, 0, 0.42),
+              0 14px 34px rgba(0, 0, 0, 0.32);
+          }
+
+          .kicker {
+            margin: 0 0 7px;
+            color: var(--gutter-fg);
+            font-size: 15px;
+            font-weight: 650;
+            text-transform: uppercase;
+            text-shadow:
+              0 2px 8px rgba(0, 0, 0, 0.48),
+              0 10px 26px rgba(0, 0, 0, 0.36);
+          }
+
+          .title {
+            margin: 0;
+            color: var(--editor-fg);
+            font-size: 44px;
+            line-height: 1;
+            font-weight: 760;
+          }
+
+          .source-note {
+            width: 510px;
+            color: var(--gutter-fg);
+            font-size: 16px;
+            line-height: 1.35;
+            text-align: right;
+            text-shadow:
+              0 2px 10px rgba(0, 0, 0, 0.46),
+              0 12px 30px rgba(0, 0, 0, 0.34);
+          }
+
+          .workbench {
+            height: 824px;
+            display: grid;
+            grid-template-columns: 54px 290px 1fr;
+            grid-template-rows: 36px 1fr 26px;
+            overflow: hidden;
+            border: 1px solid var(--sidebar-border);
+            border-radius: 8px;
+            background: var(--editor-bg);
+            box-shadow: 0 34px 90px rgba(0, 0, 0, 0.42);
+            transform: translateZ(0);
+            transform-origin: 82% 50%;
+            transform-style: preserve-3d;
+            will-change: transform;
+          }
+
+          .titlebar {
+            grid-column: 1 / -1;
+            display: grid;
+            grid-template-columns: 120px 1fr 210px;
+            align-items: center;
+            background: var(--title-bg);
+            color: var(--title-fg);
+            border-bottom: 1px solid var(--tab-border);
+            font-size: 12px;
+          }
+
+          .traffic {
+            display: flex;
+            gap: 8px;
+            padding-left: 18px;
+          }
+
+          .traffic span {
+            width: 12px;
+            height: 12px;
+            border-radius: 999px;
+          }
+
+          .traffic span:nth-child(1) {
+            background: #ff5f57;
+          }
+          .traffic span:nth-child(2) {
+            background: #ffbd2e;
+          }
+          .traffic span:nth-child(3) {
+            background: #28c840;
+          }
+
+          .window-title {
+            justify-self: center;
+            opacity: 0.84;
+          }
+
+          .command-center {
+            justify-self: end;
+            width: 176px;
+            height: 22px;
+            margin-right: 16px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border: 1px solid color-mix(in srgb, var(--title-fg), transparent 78%);
+            border-radius: 5px;
+            color: color-mix(in srgb, var(--title-fg), transparent 18%);
+          }
+
+          .activity {
+            grid-row: 2 / 3;
+            background: var(--activity-bg);
+            border-right: 1px solid var(--sidebar-border);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 10px 0;
+            gap: 18px;
+          }
+
+          .activity-icon {
+            width: 28px;
+            height: 28px;
+            color: var(--activity-muted);
+          }
+
+          .activity-icon.active {
+            color: var(--activity-fg);
+            border-left: 2px solid var(--activity-active);
+            padding-left: 4px;
+          }
+
+          .sidebar {
+            grid-row: 2 / 3;
+            background: var(--sidebar-bg);
+            color: var(--sidebar-fg);
+            border-right: 1px solid var(--sidebar-border);
+            display: flex;
+            flex-direction: column;
+            min-width: 0;
+          }
+
+          .sidebar-title {
+            height: 38px;
+            display: flex;
+            align-items: center;
+            padding: 0 20px;
+            color: var(--sidebar-fg);
+            font-size: 11px;
+            text-transform: uppercase;
+          }
+
+          .section-title {
+            height: 24px;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            padding: 0 14px;
+            background: color-mix(in srgb, var(--sidebar-bg), var(--sidebar-fg) 5%);
+            border-top: 1px solid var(--sidebar-border);
+            border-bottom: 1px solid var(--sidebar-border);
+            color: var(--sidebar-fg);
+            font-size: 11px;
+            font-weight: 700;
+          }
+
+          .tree {
+            padding: 8px 0;
+            font-size: 13px;
+            line-height: 24px;
+          }
+
+          .tree-row {
+            height: 24px;
+            display: flex;
+            align-items: center;
+            gap: 7px;
+            padding: 0 10px 0 18px;
+            color: color-mix(in srgb, var(--sidebar-fg), transparent 8%);
+            white-space: nowrap;
+          }
+
+          .tree-row.child {
+            padding-left: 34px;
+          }
+
+          .tree-row.selected {
+            background: color-mix(in srgb, var(--sidebar-fg), transparent 88%);
+            color: var(--sidebar-fg);
+          }
+
+          .editor-area {
+            grid-row: 2 / 3;
+            display: grid;
+            grid-template-rows: 36px 30px 1fr 138px;
+            min-width: 0;
+            background: var(--editor-bg);
+          }
+
+          .tabs {
+            display: flex;
+            background: var(--tab-bg);
+            border-bottom: 1px solid var(--tab-border);
+          }
+
+          .tab {
+            width: 205px;
+            height: 36px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 0 13px;
+            border-right: 1px solid var(--tab-border);
+            background: var(--tab-active-bg);
+            color: var(--tab-active-fg);
+            border-top: 2px solid var(--activity-active);
+            font-size: 13px;
+          }
+
+          .tab.inactive {
+            background: var(--tab-bg);
+            color: var(--tab-inactive-fg);
+            border-top-color: transparent;
+          }
+
+          .breadcrumbs {
+            display: flex;
+            align-items: center;
+            gap: 7px;
+            padding: 0 18px;
+            color: var(--gutter-fg);
+            border-bottom: 1px solid color-mix(in srgb, var(--tab-border), transparent 20%);
+            font-size: 12px;
+          }
+
+          .editor {
+            position: relative;
+            overflow: hidden;
+            background: var(--editor-bg);
+            color: var(--editor-fg);
+            font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+            font-size: 18px;
+            line-height: 1.52;
+          }
+
+          .active-line {
+            position: absolute;
+            left: 0;
+            right: 0;
+            top: 0;
+            height: 28px;
+            background: var(--editor-line);
+            will-change: transform;
+          }
 
-It runs for 11 seconds at 1920×1080. Paste this into your composition:
+          .code {
+            position: relative;
+            padding: 20px 36px 18px 0;
+          }
 
-```html index.html
+          .line {
+            height: 28px;
+            display: grid;
+            grid-template-columns: 72px 1fr;
+            align-items: center;
+          }
+
+          .line-number {
+            padding-right: 18px;
+            color: var(--gutter-fg);
+            text-align: right;
+            user-select: none;
+          }
+
+          .line.is-active .line-number {
+            color: var(--gutter-active-fg);
+          }
+
+          .line-code {
+            white-space: pre;
+          }
+
+          .char {
+            opacity: 0;
+          }
+
+          .tok-comment {
+            color: var(--token-comment);
+          }
+          .tok-keyword {
+            color: var(--token-keyword);
+          }
+          .tok-function {
+            color: var(--token-function);
+          }
+          .tok-string {
+            color: var(--token-string);
+          }
+          .tok-number {
+            color: var(--token-number);
+          }
+          .tok-variable {
+            color: var(--token-variable);
+          }
+          .tok-parameter {
+            color: var(--token-parameter);
+          }
+          .tok-operator {
+            color: var(--token-operator);
+          }
+          .tok-punctuation {
+            color: var(--token-punctuation);
+          }
+          .tok-class-name {
+            color: var(--token-class-name);
+          }
+
+          .caret {
+            position: absolute;
+            left: 0;
+            top: 0;
+            z-index: 3;
+            display: block;
+            width: 2px;
+            height: 22px;
+            background: var(--editor-fg);
+            pointer-events: none;
+            will-change: transform, opacity;
+          }
+
+          .terminal {
+            display: grid;
+            grid-template-rows: 32px 1fr;
+            background: var(--panel-bg);
+            border-top: 1px solid var(--panel-border);
+            color: var(--editor-fg);
+            font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+            font-size: 14px;
+          }
+
+          .panel-tabs {
+            display: flex;
+            align-items: center;
+            gap: 22px;
+            padding: 0 18px;
+            border-bottom: 1px solid var(--panel-border);
+            color: var(--gutter-fg);
+            font-family:
+              Inter,
+              -apple-system,
+              BlinkMacSystemFont,
+              "Segoe UI",
+              sans-serif;
+            font-size: 12px;
+            text-transform: uppercase;
+          }
+
+          .panel-tabs .active {
+            color: var(--editor-fg);
+            border-bottom: 1px solid var(--activity-active);
+            height: 32px;
+            display: flex;
+            align-items: center;
+          }
+
+          .terminal-body {
+            padding: 12px 20px;
+            color: var(--editor-fg);
+            line-height: 1.8;
+          }
+
+          .prompt {
+            color: var(--token-function);
+          }
+
+          .statusbar {
+            grid-column: 1 / -1;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            background: var(--status-bg);
+            color: var(--status-fg);
+            border-top: 1px solid var(--status-border);
+            font-size: 12px;
+          }
+
+          .status-left,
+          .status-right {
+            display: flex;
+            align-items: center;
+            gap: 18px;
+            padding: 0 12px;
+          }
+
+          .remote {
+            align-self: stretch;
+            display: flex;
+            align-items: center;
+            padding: 0 12px;
+            margin-left: -12px;
+            background: var(--status-remote-bg, var(--activity-active));
+            color: var(--status-remote-fg, #ffffff);
+          }
+
+          svg {
+            display: block;
+          }
+        </style>
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (() => {
+            const codeLines = [
+              [{ text: "# A small functional toolkit", token: "comment" }],
+              [
+                { text: "def", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "pluck_deep", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "key", token: "parameter" },
+                { text: "):", token: "punctuation" },
+              ],
+              [
+                { text: "    ", token: "plain" },
+                { text: "return", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "obj", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "reduce", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "acc", token: "parameter" },
+                { text: ", ", token: "punctuation" },
+                { text: "k", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "acc", token: "variable" },
+                { text: "[", token: "punctuation" },
+                { text: "k", token: "variable" },
+                { text: "]", token: "punctuation" },
+                { text: ", ", token: "punctuation" },
+                { text: "key", token: "variable" },
+                { text: ".split", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "'.'", token: "string" },
+                { text: "), ", token: "punctuation" },
+                { text: "obj", token: "variable" },
+                { text: ")", token: "punctuation" },
+              ],
+              [],
+              [
+                { text: "def", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "compose", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "*", token: "operator" },
+                { text: "fns", token: "parameter" },
+                { text: "):", token: "punctuation" },
+              ],
+              [
+                { text: "    ", token: "plain" },
+                { text: "return", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "res", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "reduce", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "acc", token: "parameter" },
+                { text: ", ", token: "punctuation" },
+                { text: "fn", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "fn", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "acc", token: "variable" },
+                { text: "), ", token: "punctuation" },
+                { text: "fns", token: "variable" },
+                { text: ", ", token: "punctuation" },
+                { text: "res", token: "variable" },
+                { text: ")", token: "punctuation" },
+              ],
+              [],
+              [
+                { text: "def", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "unfold", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "f", token: "parameter" },
+                { text: ", ", token: "punctuation" },
+                { text: "seed", token: "parameter" },
+                { text: "):", token: "punctuation" },
+              ],
+              [
+                { text: "    ", token: "plain" },
+                { text: '"""Build a list by repeatedly applying f to a seed."""', token: "string" },
+              ],
+              [
+                { text: "    acc", token: "variable" },
+                { text: " = ", token: "operator" },
+                { text: "[]", token: "punctuation" },
+              ],
+              [
+                { text: "    while", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "True", token: "className" },
+                { text: ":", token: "punctuation" },
+              ],
+              [
+                { text: "        result", token: "variable" },
+                { text: " = ", token: "operator" },
+                { text: "f", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "seed", token: "variable" },
+                { text: ")", token: "punctuation" },
+              ],
+              [
+                { text: "        if", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "result", token: "variable" },
+                { text: " is ", token: "keyword" },
+                { text: "None", token: "className" },
+                { text: ":", token: "punctuation" },
+              ],
+              [
+                { text: "            return", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "acc", token: "variable" },
+              ],
+              [
+                { text: "        acc", token: "variable" },
+                { text: ".append", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "result", token: "variable" },
+                { text: "[", token: "punctuation" },
+                { text: "0", token: "number" },
+                { text: "])", token: "punctuation" },
+              ],
+              [
+                { text: "        seed", token: "variable" },
+                { text: " = ", token: "operator" },
+                { text: "result", token: "variable" },
+                { text: "[", token: "punctuation" },
+                { text: "1", token: "number" },
+                { text: "]", token: "punctuation" },
+              ],
+              [],
+            ];
+
+            const fallback = {
+              "activityBar.background": "#181818",
+              "activityBar.foreground": "#d7d7d7",
+              "activityBar.inactiveForeground": "#868686",
+              "activityBar.activeBorder": "#0078d4",
+              "sideBar.background": "#181818",
+              "sideBar.foreground": "#cccccc",
+              "sideBar.border": "#2b2b2b",
+              "tab.activeBackground": "#1f1f1f",
+              "tab.activeForeground": "#ffffff",
+              "tab.inactiveBackground": "#181818",
+              "tab.inactiveForeground": "#9d9d9d",
+              "tab.border": "#2b2b2b",
+              "editor.background": "#1f1f1f",
+              "editor.foreground": "#cccccc",
+              "editor.lineHighlightBackground": "#ffffff0a",
+              "editorLineNumber.foreground": "#6e7681",
+              "editorLineNumber.activeForeground": "#cccccc",
+              "panel.background": "#181818",
+              "panel.border": "#2b2b2b",
+              "statusBar.background": "#181818",
+              "statusBar.foreground": "#cccccc",
+              "statusBar.border": "#2b2b2b",
+              "titleBar.activeBackground": "#181818",
+              "titleBar.activeForeground": "#cccccc",
+            };
+
+            function color(theme, key) {
+              return theme.colors[key] || fallback[key] || theme.colors.foreground || "#cccccc";
+            }
+
+            function solarizedGrey(theme) {
+              return (
+                theme.colors["tab.inactiveForeground"] ||
+                theme.colors["editor.foreground"] ||
+                "#586E75"
+              );
+            }
+
+            function setVar(root, name, value) {
+              root.style.setProperty(name, value);
+            }
+
+            function applyTheme(root, theme) {
+              const solarizedUiGrey = theme.id === "solarized-light" ? solarizedGrey(theme) : null;
+              setVar(root, "--activity-bg", color(theme, "activityBar.background"));
+              setVar(
+                root,
+                "--activity-fg",
+                solarizedUiGrey || color(theme, "activityBar.foreground"),
+              );
+              setVar(
+                root,
+                "--activity-muted",
+                solarizedUiGrey || color(theme, "activityBar.inactiveForeground"),
+              );
+              setVar(root, "--activity-active", color(theme, "activityBar.activeBorder"));
+              setVar(root, "--sidebar-bg", color(theme, "sideBar.background"));
+              setVar(root, "--sidebar-fg", solarizedUiGrey || color(theme, "sideBar.foreground"));
+              setVar(root, "--sidebar-border", color(theme, "sideBar.border"));
+              setVar(root, "--tab-bg", color(theme, "tab.inactiveBackground"));
+              setVar(root, "--tab-active-bg", color(theme, "tab.activeBackground"));
+              setVar(
+                root,
+                "--tab-active-fg",
+                solarizedUiGrey || color(theme, "tab.activeForeground"),
+              );
+              setVar(
+                root,
+                "--tab-inactive-fg",
+                solarizedUiGrey || color(theme, "tab.inactiveForeground"),
+              );
+              setVar(root, "--tab-border", color(theme, "tab.border"));
+              setVar(root, "--editor-bg", color(theme, "editor.background"));
+              setVar(root, "--editor-fg", color(theme, "editor.foreground"));
+              setVar(root, "--editor-line", color(theme, "editor.lineHighlightBackground"));
+              setVar(root, "--gutter-fg", color(theme, "editorLineNumber.foreground"));
+              setVar(root, "--gutter-active-fg", color(theme, "editorLineNumber.activeForeground"));
+              setVar(root, "--panel-bg", color(theme, "panel.background"));
+              setVar(root, "--panel-border", color(theme, "panel.border"));
+              setVar(root, "--status-bg", color(theme, "statusBar.background"));
+              setVar(root, "--status-fg", color(theme, "statusBar.foreground"));
+              setVar(root, "--status-border", color(theme, "statusBar.border"));
+              setVar(root, "--status-remote-bg", color(theme, "statusBarItem.remoteBackground"));
+              setVar(
+                root,
+                "--status-remote-fg",
+                solarizedUiGrey || color(theme, "statusBarItem.remoteForeground"),
+              );
+              setVar(root, "--title-bg", color(theme, "titleBar.activeBackground"));
+              setVar(
+                root,
+                "--title-fg",
+                solarizedUiGrey || color(theme, "titleBar.activeForeground"),
+              );
+              setVar(root, "--token-comment", theme.tokens.comment);
+              setVar(root, "--token-keyword", theme.tokens.keyword);
+              setVar(root, "--token-function", theme.tokens.function);
+              setVar(root, "--token-string", theme.tokens.string);
+              setVar(root, "--token-number", theme.tokens.number);
+              setVar(root, "--token-variable", theme.tokens.variable);
+              setVar(root, "--token-parameter", theme.tokens.parameter);
+              setVar(root, "--token-operator", theme.tokens.operator);
+              setVar(root, "--token-punctuation", theme.tokens.punctuation);
+              setVar(root, "--token-class-name", theme.tokens.className);
+            }
+
+            function renderCode(root) {
+              const code = root.querySelector(".code");
+              codeLines.forEach((segments, index) => {
+                const line = document.createElement("div");
+                line.className = "line";
+                line.dataset.lineIndex = String(index);
+
+                const lineNumber = document.createElement("span");
+                lineNumber.className = "line-number";
+                lineNumber.textContent = String(index + 1);
+                line.appendChild(lineNumber);
+
+                const lineCode = document.createElement("span");
+                lineCode.className = "line-code";
+                segments.forEach((segment) => {
+                  [...segment.text].forEach((char) => {
+                    const span = document.createElement("span");
+                    span.className =
+                      segment.token === "plain"
+                        ? "char"
+                        : "char tok-" +
+                          segment.token.replace(/[A-Z]/g, (match) => "-" + match.toLowerCase());
+                    span.dataset.lineIndex = String(index);
+                    span.textContent = char;
+                    lineCode.appendChild(span);
+                  });
+                });
+                line.appendChild(lineCode);
+                code.appendChild(line);
+              });
+
+              const caret = document.createElement("span");
+              caret.className = "caret";
+              root.querySelector(".editor").appendChild(caret);
+            }
+
+            function caretPointForElement(editor, el) {
+              const editorBox = editor.getBoundingClientRect();
+              const charBox = el.getBoundingClientRect();
+              return {
+                x: charBox.right - editorBox.left + 2,
+                y: charBox.top - editorBox.top + 3,
+              };
+            }
+
+            function caretPointForLineStart(editor, line) {
+              const editorBox = editor.getBoundingClientRect();
+              const lineBox = line.getBoundingClientRect();
+              const codeBox = line.querySelector(".line-code").getBoundingClientRect();
+              return {
+                x: codeBox.left - editorBox.left,
+                y: lineBox.top - editorBox.top + 3,
+              };
+            }
+
+            function lineHighlightY(editor, line) {
+              const editorBox = editor.getBoundingClientRect();
+              const lineBox = line.getBoundingClientRect();
+              return lineBox.top - editorBox.top;
+            }
+
+            function buildTimeline(root, compositionId) {
+              const tl = gsap.timeline({ paused: true });
+              const editor = root.querySelector(".editor");
+              const caret = root.querySelector(".caret");
+              const activeLine = root.querySelector(".active-line");
+              const lineEls = gsap.utils.toArray(root.querySelectorAll(".line"));
+              const lineStartTimes = [];
+              const charSchedule = [];
+              let cursorTime = 0.95;
+
+              lineEls.forEach((line, lineIndex) => {
+                const lineChars = gsap.utils.toArray(line.querySelectorAll(".char"));
+                lineStartTimes[lineIndex] = cursorTime;
+                lineChars.forEach((char, charIndex) => {
+                  charSchedule.push({ char, time: cursorTime + charIndex * 0.012 });
+                });
+                cursorTime += Math.max(lineChars.length * 0.012, 0.08) + 0.045;
+              });
+
+              gsap.set(activeLine, { y: lineHighlightY(editor, lineEls[0]) });
+              gsap.set(caret, caretPointForLineStart(editor, lineEls[0]));
+
+              tl.from(
+                root.querySelector(".header"),
+                { y: 24, opacity: 0, duration: 0.45, ease: "power3.out" },
+                0,
+              );
+              tl.from(
+                root.querySelector(".workbench"),
+                { y: 42, opacity: 0, scale: 0.986, duration: 0.58, ease: "power3.out" },
+                0.1,
+              );
+              tl.from(activeLine, { opacity: 0, duration: 0.22, ease: "power2.out" }, 0.74);
+              lineStartTimes.forEach((time, lineIndex) => {
+                const line = lineEls[lineIndex];
+                tl.set(activeLine, { y: lineHighlightY(editor, line) }, time);
+                tl.set(caret, caretPointForLineStart(editor, line), time);
+                tl.call(
+                  () => {
+                    lineEls.forEach((item) => item.classList.toggle("is-active", item === line));
+                  },
+                  [],
+                  time,
+                );
+              });
+              charSchedule.forEach(({ char, time }) => {
+                tl.set(char, { opacity: 1 }, time);
+                tl.set(caret, caretPointForElement(editor, char), time + 0.002);
+              });
+              tl.to(
+                root.querySelector(".caret"),
+                { opacity: 0, duration: 0.34, repeat: 25, yoyo: true, ease: "steps(1)" },
+                0.95,
+              );
+              tl.from(
+                root.querySelector(".terminal"),
+                { y: 140, opacity: 0, duration: 0.56, ease: "power3.out" },
+                7.55,
+              );
+              tl.from(
+                root.querySelector(".terminal-body").children,
+                { opacity: 0, y: 8, duration: 0.24, stagger: 0.16, ease: "power2.out" },
+                8.05,
+              );
+              tl.to(
+                root.querySelector(".workbench"),
+                { rotateY: -10.5, z: 74, duration: 0.72, ease: "power2.inOut" },
+                9.35,
+              );
+              tl.to(
+                root.querySelector(".workbench"),
+                { rotateY: 0, z: 0, duration: 0.62, ease: "power2.inOut" },
+                10.08,
+              );
+
+              window.__timelines = window.__timelines || {};
+              window.__timelines[compositionId] = tl;
+
+              const previewTime = new URLSearchParams(window.location.search).get("t");
+              if (previewTime !== null) {
+                tl.time(Number(previewTime));
+              }
+            }
+
+            window.createVSCodeThemeComposition = (compositionId, themeOrId) => {
+              const root =
+                document.querySelector(
+                  '[data-composition-id="' + compositionId + '"] .vscode-theme-scene',
+                ) ||
+                document.querySelector(
+                  '.vscode-theme-scene[data-composition-id="' + compositionId + '"]',
+                ) ||
+                document.querySelector('[data-composition-id="' + compositionId + '"]');
+              const theme =
+                typeof themeOrId === "string"
+                  ? window.VSCODE_THEME_REGISTRY.find((item) => item.id === themeOrId)
+                  : themeOrId;
+              if (!root || !theme) return;
+              root.querySelector(".theme-label").textContent = theme.label;
+              root.querySelector(".theme-source").textContent = theme.sourceFile;
+              applyTheme(root, theme);
+              renderCode(root);
+              buildTimeline(root, compositionId);
+            };
+          })();
+        </script>
+        <script>
+          window.__timelines = window.__timelines || {};
+          window.__timelines["vscode-monokai"] =
+            window.__timelines["vscode-monokai"] || gsap.timeline({ paused: true });
+          window.createVSCodeThemeComposition("vscode-monokai", {
+            id: "monokai",
+            label: "Monokai",
+            sourceFile: "monokai-color-theme.json",
+            uiTheme: "vs-dark",
+            colors: {
+              "activityBar.background": "#272822",
+              "activityBar.foreground": "#f8f8f2",
+              "editor.background": "#272822",
+              "editor.foreground": "#f8f8f2",
+              "editor.lineHighlightBackground": "#3e3d32",
+              "editor.selectionBackground": "#878b9180",
+              "editorGroup.border": "#34352f",
+              "editorGroupHeader.tabsBackground": "#1e1f1c",
+              "editorLineNumber.activeForeground": "#c2c2bf",
+              "editorLineNumber.foreground": "#90908a",
+              "panel.border": "#414339",
+              "sideBar.background": "#1e1f1c",
+              "sideBarSectionHeader.background": "#272822",
+              "statusBar.background": "#414339",
+              "statusBarItem.remoteBackground": "#AC6218",
+              "tab.border": "#1e1f1c",
+              "tab.inactiveBackground": "#34352f",
+              "tab.inactiveForeground": "#ccccc7",
+              "titleBar.activeBackground": "#1e1f1c",
+            },
+            tokens: {
+              comment: "#88846f",
+              keyword: "#66D9EF",
+              function: "#66D9EF",
+              string: "#AE81FF",
+              number: "#AE81FFA0",
+              variable: "#FD971F",
+              parameter: "#FD971F",
+              operator: "#F92672",
+              punctuation: "#A6E22E",
+              className: "#66D9EF",
+            },
+          });
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
 <div
   data-composition-id="code-snippet-monokai"
   data-composition-src="compositions/code-snippet-monokai.html"
@@ -29,8 +1105,13 @@ It runs for 11 seconds at 1920×1080. Paste this into your composition:
 ></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.
+## Features
+
+- Full VS Code workbench recreation — activity bar, sidebar, explorer tree, editor tabs, breadcrumbs, terminal panel, status bar
+- Per-character typing animation with cursor tracking and active line highlight
+- Colors sourced from official `microsoft/vscode` built-in theme JSON
+- 3D perspective tilt at the end of the typing sequence
+- Terminal panel with mock test output
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/code-snippet-solarized-light.mdx b/docs/catalog/blocks/code-snippet-solarized-light.mdx
index f6efad7ffd..6c92ef5d23 100644
--- a/docs/catalog/blocks/code-snippet-solarized-light.mdx
+++ b/docs/catalog/blocks/code-snippet-solarized-light.mdx
@@ -3,21 +3,1099 @@ title: "Code Snippet - Solarized Light"
 description: "VS Code workbench with per-character typing animation in the Solarized Light theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-solarized-light.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-solarized-light.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/code-snippet-solarized-light.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Code Snippet - Solarized Light preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add code-snippet-solarized-light
-```
+<InstallCommand command="npx hyperframes add code-snippet-solarized-light" />
 
 That writes `compositions/code-snippet-solarized-light.html`, plus 1 supporting file under `assets/`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`code-snippet-solarized-light.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Solarized Light VS Code Theme Composition</title>
+  </head>
+  <body>
+    <template id="vscode-solarized-light-template">
+      <div
+        class="vscode-theme-scene"
+        data-composition-id="vscode-solarized-light"
+        data-width="1920"
+        data-height="1080"
+      >
+        <main class="scene-content">
+          <section class="header">
+            <div>
+              <p class="kicker">Official VS Code built-in theme</p>
+              <h1 class="title"><span class="theme-label">Solarized Light</span></h1>
+            </div>
+            <p class="source-note">
+              Typing `functional_toolkit.py` with workbench colors from
+              <span class="theme-source">solarized-light-color-theme.json</span>.
+            </p>
+          </section>
+
+          <section class="workbench">
+            <div class="titlebar">
+              <div class="traffic"><span></span><span></span><span></span></div>
+              <div class="window-title">functional-toolkit - Visual Studio Code</div>
+              <div class="command-center">Search</div>
+            </div>
+
+            <aside class="activity" aria-label="Activity bar">
+              <svg class="activity-icon active" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="currentColor"
+                  d="M4 4h7v7H4V4Zm9 0h7v7h-7V4ZM4 13h7v7H4v-7Zm9 0h7v7h-7v-7Z"
+                />
+              </svg>
+              <svg class="activity-icon" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  d="m21 21-5.2-5.2M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Z"
+                />
+              </svg>
+              <svg class="activity-icon" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  d="M8 18 3 12l5-6m8 12 5-6-5-6"
+                />
+              </svg>
+              <svg class="activity-icon" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  d="M12 3v18m0-18 6 6m-6-6L6 9m6 12 6-6m-6 6-6-6"
+                />
+              </svg>
+            </aside>
+
+            <aside class="sidebar">
+              <div class="sidebar-title">Explorer</div>
+              <div class="section-title">⌄ Functional Toolkit</div>
+              <div class="tree">
+                <div class="tree-row">⌄ src</div>
+                <div class="tree-row child selected">◇ functional_toolkit.py</div>
+                <div class="tree-row child">◇ test_toolkit.py</div>
+                <div class="tree-row">◇ pyproject.toml</div>
+                <div class="tree-row">◇ README.md</div>
+              </div>
+            </aside>
+
+            <section class="editor-area">
+              <div class="tabs">
+                <div class="tab">◇ functional_toolkit.py</div>
+                <div class="tab inactive">README.md</div>
+              </div>
+              <div class="breadcrumbs">functional-toolkit › src › functional_toolkit.py</div>
+              <div class="editor">
+                <div class="active-line"></div>
+                <div class="code"></div>
+              </div>
+              <div class="terminal">
+                <div class="panel-tabs">
+                  <span class="active">Terminal</span><span>Problems</span><span>Output</span>
+                </div>
+                <div class="terminal-body">
+                  <div><span class="prompt">functional-toolkit %</span> python -m pytest</div>
+                  <div>collected 3 items</div>
+                  <div>tests/test_toolkit.py ... <span class="tok-comment">passed</span></div>
+                </div>
+              </div>
+            </section>
+
+            <footer class="statusbar">
+              <div class="status-left">
+                <span class="remote">main</span>
+                <span>0 errors</span>
+                <span>0 warnings</span>
+              </div>
+              <div class="status-right">
+                <span>Ln 17, Col 1</span>
+                <span>Spaces: 4</span>
+                <span>UTF-8</span>
+                <span>Python 3.12</span>
+              </div>
+            </footer>
+          </section>
+        </main>
+        <style>
+          * {
+            box-sizing: border-box;
+            letter-spacing: 0;
+          }
+
+          html,
+          body {
+            margin: 0;
+            width: 1920px;
+            height: 1080px;
+            overflow: hidden;
+            background: #000000;
+            font-family:
+              Inter,
+              -apple-system,
+              BlinkMacSystemFont,
+              "Segoe UI",
+              sans-serif;
+          }
+
+          .vscode-theme-scene {
+            --activity-bg: #181818;
+            --activity-fg: #d7d7d7;
+            --activity-muted: #868686;
+            --activity-active: #0078d4;
+            --sidebar-bg: #181818;
+            --sidebar-fg: #cccccc;
+            --sidebar-border: #2b2b2b;
+            --tab-bg: #181818;
+            --tab-active-bg: #1f1f1f;
+            --tab-active-fg: #ffffff;
+            --tab-inactive-fg: #9d9d9d;
+            --tab-border: #2b2b2b;
+            --editor-bg: #1f1f1f;
+            --editor-fg: #cccccc;
+            --editor-line: rgba(255, 255, 255, 0.04);
+            --gutter-fg: #6e7681;
+            --gutter-active-fg: #cccccc;
+            --panel-bg: #181818;
+            --panel-border: #2b2b2b;
+            --status-bg: #181818;
+            --status-fg: #cccccc;
+            --status-border: #2b2b2b;
+            --title-bg: #181818;
+            --title-fg: #cccccc;
+            --token-comment: #6a9955;
+            --token-keyword: #c586c0;
+            --token-function: #dcdcaa;
+            --token-string: #ce9178;
+            --token-number: #b5cea8;
+            --token-variable: #9cdcfe;
+            --token-parameter: #9cdcfe;
+            --token-operator: #d4d4d4;
+            --token-punctuation: #d4d4d4;
+            --token-class-name: #4ec9b0;
+            position: relative;
+            width: 1920px;
+            height: 1080px;
+            overflow: hidden;
+            background:
+              linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.32)),
+              url("../assets/background.jpeg") center / cover no-repeat;
+            color: var(--editor-fg);
+          }
+
+          .scene-content {
+            position: relative;
+            z-index: 1;
+            width: 100%;
+            height: 100%;
+            padding: 54px 70px 92px;
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+            perspective: 2200px;
+            perspective-origin: 56% 52%;
+          }
+
+          .header {
+            display: flex;
+            align-items: end;
+            justify-content: space-between;
+            min-height: 66px;
+            text-shadow:
+              0 2px 12px rgba(0, 0, 0, 0.42),
+              0 14px 34px rgba(0, 0, 0, 0.32);
+          }
+
+          .kicker {
+            margin: 0 0 7px;
+            color: var(--gutter-fg);
+            font-size: 15px;
+            font-weight: 650;
+            text-transform: uppercase;
+            text-shadow:
+              0 2px 8px rgba(0, 0, 0, 0.48),
+              0 10px 26px rgba(0, 0, 0, 0.36);
+          }
+
+          .title {
+            margin: 0;
+            color: var(--editor-fg);
+            font-size: 44px;
+            line-height: 1;
+            font-weight: 760;
+          }
+
+          .source-note {
+            width: 510px;
+            color: var(--gutter-fg);
+            font-size: 16px;
+            line-height: 1.35;
+            text-align: right;
+            text-shadow:
+              0 2px 10px rgba(0, 0, 0, 0.46),
+              0 12px 30px rgba(0, 0, 0, 0.34);
+          }
+
+          .workbench {
+            height: 824px;
+            display: grid;
+            grid-template-columns: 54px 290px 1fr;
+            grid-template-rows: 36px 1fr 26px;
+            overflow: hidden;
+            border: 1px solid var(--sidebar-border);
+            border-radius: 8px;
+            background: var(--editor-bg);
+            box-shadow: 0 34px 90px rgba(0, 0, 0, 0.42);
+            transform: translateZ(0);
+            transform-origin: 82% 50%;
+            transform-style: preserve-3d;
+            will-change: transform;
+          }
+
+          .titlebar {
+            grid-column: 1 / -1;
+            display: grid;
+            grid-template-columns: 120px 1fr 210px;
+            align-items: center;
+            background: var(--title-bg);
+            color: var(--title-fg);
+            border-bottom: 1px solid var(--tab-border);
+            font-size: 12px;
+          }
+
+          .traffic {
+            display: flex;
+            gap: 8px;
+            padding-left: 18px;
+          }
+
+          .traffic span {
+            width: 12px;
+            height: 12px;
+            border-radius: 999px;
+          }
+
+          .traffic span:nth-child(1) {
+            background: #ff5f57;
+          }
+          .traffic span:nth-child(2) {
+            background: #ffbd2e;
+          }
+          .traffic span:nth-child(3) {
+            background: #28c840;
+          }
+
+          .window-title {
+            justify-self: center;
+            opacity: 0.84;
+          }
+
+          .command-center {
+            justify-self: end;
+            width: 176px;
+            height: 22px;
+            margin-right: 16px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border: 1px solid color-mix(in srgb, var(--title-fg), transparent 78%);
+            border-radius: 5px;
+            color: color-mix(in srgb, var(--title-fg), transparent 18%);
+          }
+
+          .activity {
+            grid-row: 2 / 3;
+            background: var(--activity-bg);
+            border-right: 1px solid var(--sidebar-border);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 10px 0;
+            gap: 18px;
+          }
+
+          .activity-icon {
+            width: 28px;
+            height: 28px;
+            color: var(--activity-muted);
+          }
+
+          .activity-icon.active {
+            color: var(--activity-fg);
+            border-left: 2px solid var(--activity-active);
+            padding-left: 4px;
+          }
+
+          .sidebar {
+            grid-row: 2 / 3;
+            background: var(--sidebar-bg);
+            color: var(--sidebar-fg);
+            border-right: 1px solid var(--sidebar-border);
+            display: flex;
+            flex-direction: column;
+            min-width: 0;
+          }
+
+          .sidebar-title {
+            height: 38px;
+            display: flex;
+            align-items: center;
+            padding: 0 20px;
+            color: var(--sidebar-fg);
+            font-size: 11px;
+            text-transform: uppercase;
+          }
+
+          .section-title {
+            height: 24px;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            padding: 0 14px;
+            background: color-mix(in srgb, var(--sidebar-bg), var(--sidebar-fg) 5%);
+            border-top: 1px solid var(--sidebar-border);
+            border-bottom: 1px solid var(--sidebar-border);
+            color: var(--sidebar-fg);
+            font-size: 11px;
+            font-weight: 700;
+          }
+
+          .tree {
+            padding: 8px 0;
+            font-size: 13px;
+            line-height: 24px;
+          }
+
+          .tree-row {
+            height: 24px;
+            display: flex;
+            align-items: center;
+            gap: 7px;
+            padding: 0 10px 0 18px;
+            color: color-mix(in srgb, var(--sidebar-fg), transparent 8%);
+            white-space: nowrap;
+          }
+
+          .tree-row.child {
+            padding-left: 34px;
+          }
+
+          .tree-row.selected {
+            background: color-mix(in srgb, var(--sidebar-fg), transparent 88%);
+            color: var(--sidebar-fg);
+          }
+
+          .editor-area {
+            grid-row: 2 / 3;
+            display: grid;
+            grid-template-rows: 36px 30px 1fr 138px;
+            min-width: 0;
+            background: var(--editor-bg);
+          }
+
+          .tabs {
+            display: flex;
+            background: var(--tab-bg);
+            border-bottom: 1px solid var(--tab-border);
+          }
+
+          .tab {
+            width: 205px;
+            height: 36px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 0 13px;
+            border-right: 1px solid var(--tab-border);
+            background: var(--tab-active-bg);
+            color: var(--tab-active-fg);
+            border-top: 2px solid var(--activity-active);
+            font-size: 13px;
+          }
+
+          .tab.inactive {
+            background: var(--tab-bg);
+            color: var(--tab-inactive-fg);
+            border-top-color: transparent;
+          }
+
+          .breadcrumbs {
+            display: flex;
+            align-items: center;
+            gap: 7px;
+            padding: 0 18px;
+            color: var(--gutter-fg);
+            border-bottom: 1px solid color-mix(in srgb, var(--tab-border), transparent 20%);
+            font-size: 12px;
+          }
+
+          .editor {
+            position: relative;
+            overflow: hidden;
+            background: var(--editor-bg);
+            color: var(--editor-fg);
+            font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+            font-size: 18px;
+            line-height: 1.52;
+          }
+
+          .active-line {
+            position: absolute;
+            left: 0;
+            right: 0;
+            top: 0;
+            height: 28px;
+            background: var(--editor-line);
+            will-change: transform;
+          }
 
-It runs for 11 seconds at 1920×1080. Paste this into your composition:
+          .code {
+            position: relative;
+            padding: 20px 36px 18px 0;
+          }
 
-```html index.html
+          .line {
+            height: 28px;
+            display: grid;
+            grid-template-columns: 72px 1fr;
+            align-items: center;
+          }
+
+          .line-number {
+            padding-right: 18px;
+            color: var(--gutter-fg);
+            text-align: right;
+            user-select: none;
+          }
+
+          .line.is-active .line-number {
+            color: var(--gutter-active-fg);
+          }
+
+          .line-code {
+            white-space: pre;
+          }
+
+          .char {
+            opacity: 0;
+          }
+
+          .tok-comment {
+            color: var(--token-comment);
+          }
+          .tok-keyword {
+            color: var(--token-keyword);
+          }
+          .tok-function {
+            color: var(--token-function);
+          }
+          .tok-string {
+            color: var(--token-string);
+          }
+          .tok-number {
+            color: var(--token-number);
+          }
+          .tok-variable {
+            color: var(--token-variable);
+          }
+          .tok-parameter {
+            color: var(--token-parameter);
+          }
+          .tok-operator {
+            color: var(--token-operator);
+          }
+          .tok-punctuation {
+            color: var(--token-punctuation);
+          }
+          .tok-class-name {
+            color: var(--token-class-name);
+          }
+
+          .caret {
+            position: absolute;
+            left: 0;
+            top: 0;
+            z-index: 3;
+            display: block;
+            width: 2px;
+            height: 22px;
+            background: var(--editor-fg);
+            pointer-events: none;
+            will-change: transform, opacity;
+          }
+
+          .terminal {
+            display: grid;
+            grid-template-rows: 32px 1fr;
+            background: var(--panel-bg);
+            border-top: 1px solid var(--panel-border);
+            color: var(--editor-fg);
+            font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+            font-size: 14px;
+          }
+
+          .panel-tabs {
+            display: flex;
+            align-items: center;
+            gap: 22px;
+            padding: 0 18px;
+            border-bottom: 1px solid var(--panel-border);
+            color: var(--gutter-fg);
+            font-family:
+              Inter,
+              -apple-system,
+              BlinkMacSystemFont,
+              "Segoe UI",
+              sans-serif;
+            font-size: 12px;
+            text-transform: uppercase;
+          }
+
+          .panel-tabs .active {
+            color: var(--editor-fg);
+            border-bottom: 1px solid var(--activity-active);
+            height: 32px;
+            display: flex;
+            align-items: center;
+          }
+
+          .terminal-body {
+            padding: 12px 20px;
+            color: var(--editor-fg);
+            line-height: 1.8;
+          }
+
+          .prompt {
+            color: var(--token-function);
+          }
+
+          .statusbar {
+            grid-column: 1 / -1;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            background: var(--status-bg);
+            color: var(--status-fg);
+            border-top: 1px solid var(--status-border);
+            font-size: 12px;
+          }
+
+          .status-left,
+          .status-right {
+            display: flex;
+            align-items: center;
+            gap: 18px;
+            padding: 0 12px;
+          }
+
+          .remote {
+            align-self: stretch;
+            display: flex;
+            align-items: center;
+            padding: 0 12px;
+            margin-left: -12px;
+            background: var(--status-remote-bg, var(--activity-active));
+            color: var(--status-remote-fg, #ffffff);
+          }
+
+          svg {
+            display: block;
+          }
+        </style>
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (() => {
+            const codeLines = [
+              [{ text: "# A small functional toolkit", token: "comment" }],
+              [
+                { text: "def", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "pluck_deep", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "key", token: "parameter" },
+                { text: "):", token: "punctuation" },
+              ],
+              [
+                { text: "    ", token: "plain" },
+                { text: "return", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "obj", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "reduce", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "acc", token: "parameter" },
+                { text: ", ", token: "punctuation" },
+                { text: "k", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "acc", token: "variable" },
+                { text: "[", token: "punctuation" },
+                { text: "k", token: "variable" },
+                { text: "]", token: "punctuation" },
+                { text: ", ", token: "punctuation" },
+                { text: "key", token: "variable" },
+                { text: ".split", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "'.'", token: "string" },
+                { text: "), ", token: "punctuation" },
+                { text: "obj", token: "variable" },
+                { text: ")", token: "punctuation" },
+              ],
+              [],
+              [
+                { text: "def", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "compose", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "*", token: "operator" },
+                { text: "fns", token: "parameter" },
+                { text: "):", token: "punctuation" },
+              ],
+              [
+                { text: "    ", token: "plain" },
+                { text: "return", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "res", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "reduce", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "acc", token: "parameter" },
+                { text: ", ", token: "punctuation" },
+                { text: "fn", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "fn", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "acc", token: "variable" },
+                { text: "), ", token: "punctuation" },
+                { text: "fns", token: "variable" },
+                { text: ", ", token: "punctuation" },
+                { text: "res", token: "variable" },
+                { text: ")", token: "punctuation" },
+              ],
+              [],
+              [
+                { text: "def", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "unfold", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "f", token: "parameter" },
+                { text: ", ", token: "punctuation" },
+                { text: "seed", token: "parameter" },
+                { text: "):", token: "punctuation" },
+              ],
+              [
+                { text: "    ", token: "plain" },
+                { text: '"""Build a list by repeatedly applying f to a seed."""', token: "string" },
+              ],
+              [
+                { text: "    acc", token: "variable" },
+                { text: " = ", token: "operator" },
+                { text: "[]", token: "punctuation" },
+              ],
+              [
+                { text: "    while", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "True", token: "className" },
+                { text: ":", token: "punctuation" },
+              ],
+              [
+                { text: "        result", token: "variable" },
+                { text: " = ", token: "operator" },
+                { text: "f", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "seed", token: "variable" },
+                { text: ")", token: "punctuation" },
+              ],
+              [
+                { text: "        if", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "result", token: "variable" },
+                { text: " is ", token: "keyword" },
+                { text: "None", token: "className" },
+                { text: ":", token: "punctuation" },
+              ],
+              [
+                { text: "            return", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "acc", token: "variable" },
+              ],
+              [
+                { text: "        acc", token: "variable" },
+                { text: ".append", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "result", token: "variable" },
+                { text: "[", token: "punctuation" },
+                { text: "0", token: "number" },
+                { text: "])", token: "punctuation" },
+              ],
+              [
+                { text: "        seed", token: "variable" },
+                { text: " = ", token: "operator" },
+                { text: "result", token: "variable" },
+                { text: "[", token: "punctuation" },
+                { text: "1", token: "number" },
+                { text: "]", token: "punctuation" },
+              ],
+              [],
+            ];
+
+            const fallback = {
+              "activityBar.background": "#181818",
+              "activityBar.foreground": "#d7d7d7",
+              "activityBar.inactiveForeground": "#868686",
+              "activityBar.activeBorder": "#0078d4",
+              "sideBar.background": "#181818",
+              "sideBar.foreground": "#cccccc",
+              "sideBar.border": "#2b2b2b",
+              "tab.activeBackground": "#1f1f1f",
+              "tab.activeForeground": "#ffffff",
+              "tab.inactiveBackground": "#181818",
+              "tab.inactiveForeground": "#9d9d9d",
+              "tab.border": "#2b2b2b",
+              "editor.background": "#1f1f1f",
+              "editor.foreground": "#cccccc",
+              "editor.lineHighlightBackground": "#ffffff0a",
+              "editorLineNumber.foreground": "#6e7681",
+              "editorLineNumber.activeForeground": "#cccccc",
+              "panel.background": "#181818",
+              "panel.border": "#2b2b2b",
+              "statusBar.background": "#181818",
+              "statusBar.foreground": "#cccccc",
+              "statusBar.border": "#2b2b2b",
+              "titleBar.activeBackground": "#181818",
+              "titleBar.activeForeground": "#cccccc",
+            };
+
+            function color(theme, key) {
+              return theme.colors[key] || fallback[key] || theme.colors.foreground || "#cccccc";
+            }
+
+            function solarizedGrey(theme) {
+              return (
+                theme.colors["tab.inactiveForeground"] ||
+                theme.colors["editor.foreground"] ||
+                "#586E75"
+              );
+            }
+
+            function setVar(root, name, value) {
+              root.style.setProperty(name, value);
+            }
+
+            function applyTheme(root, theme) {
+              const solarizedUiGrey = theme.id === "solarized-light" ? solarizedGrey(theme) : null;
+              setVar(root, "--activity-bg", color(theme, "activityBar.background"));
+              setVar(
+                root,
+                "--activity-fg",
+                solarizedUiGrey || color(theme, "activityBar.foreground"),
+              );
+              setVar(
+                root,
+                "--activity-muted",
+                solarizedUiGrey || color(theme, "activityBar.inactiveForeground"),
+              );
+              setVar(root, "--activity-active", color(theme, "activityBar.activeBorder"));
+              setVar(root, "--sidebar-bg", color(theme, "sideBar.background"));
+              setVar(root, "--sidebar-fg", solarizedUiGrey || color(theme, "sideBar.foreground"));
+              setVar(root, "--sidebar-border", color(theme, "sideBar.border"));
+              setVar(root, "--tab-bg", color(theme, "tab.inactiveBackground"));
+              setVar(root, "--tab-active-bg", color(theme, "tab.activeBackground"));
+              setVar(
+                root,
+                "--tab-active-fg",
+                solarizedUiGrey || color(theme, "tab.activeForeground"),
+              );
+              setVar(
+                root,
+                "--tab-inactive-fg",
+                solarizedUiGrey || color(theme, "tab.inactiveForeground"),
+              );
+              setVar(root, "--tab-border", color(theme, "tab.border"));
+              setVar(root, "--editor-bg", color(theme, "editor.background"));
+              setVar(root, "--editor-fg", color(theme, "editor.foreground"));
+              setVar(root, "--editor-line", color(theme, "editor.lineHighlightBackground"));
+              setVar(root, "--gutter-fg", color(theme, "editorLineNumber.foreground"));
+              setVar(root, "--gutter-active-fg", color(theme, "editorLineNumber.activeForeground"));
+              setVar(root, "--panel-bg", color(theme, "panel.background"));
+              setVar(root, "--panel-border", color(theme, "panel.border"));
+              setVar(root, "--status-bg", color(theme, "statusBar.background"));
+              setVar(root, "--status-fg", color(theme, "statusBar.foreground"));
+              setVar(root, "--status-border", color(theme, "statusBar.border"));
+              setVar(root, "--status-remote-bg", color(theme, "statusBarItem.remoteBackground"));
+              setVar(
+                root,
+                "--status-remote-fg",
+                solarizedUiGrey || color(theme, "statusBarItem.remoteForeground"),
+              );
+              setVar(root, "--title-bg", color(theme, "titleBar.activeBackground"));
+              setVar(
+                root,
+                "--title-fg",
+                solarizedUiGrey || color(theme, "titleBar.activeForeground"),
+              );
+              setVar(root, "--token-comment", theme.tokens.comment);
+              setVar(root, "--token-keyword", theme.tokens.keyword);
+              setVar(root, "--token-function", theme.tokens.function);
+              setVar(root, "--token-string", theme.tokens.string);
+              setVar(root, "--token-number", theme.tokens.number);
+              setVar(root, "--token-variable", theme.tokens.variable);
+              setVar(root, "--token-parameter", theme.tokens.parameter);
+              setVar(root, "--token-operator", theme.tokens.operator);
+              setVar(root, "--token-punctuation", theme.tokens.punctuation);
+              setVar(root, "--token-class-name", theme.tokens.className);
+            }
+
+            function renderCode(root) {
+              const code = root.querySelector(".code");
+              codeLines.forEach((segments, index) => {
+                const line = document.createElement("div");
+                line.className = "line";
+                line.dataset.lineIndex = String(index);
+
+                const lineNumber = document.createElement("span");
+                lineNumber.className = "line-number";
+                lineNumber.textContent = String(index + 1);
+                line.appendChild(lineNumber);
+
+                const lineCode = document.createElement("span");
+                lineCode.className = "line-code";
+                segments.forEach((segment) => {
+                  [...segment.text].forEach((char) => {
+                    const span = document.createElement("span");
+                    span.className =
+                      segment.token === "plain"
+                        ? "char"
+                        : "char tok-" +
+                          segment.token.replace(/[A-Z]/g, (match) => "-" + match.toLowerCase());
+                    span.dataset.lineIndex = String(index);
+                    span.textContent = char;
+                    lineCode.appendChild(span);
+                  });
+                });
+                line.appendChild(lineCode);
+                code.appendChild(line);
+              });
+
+              const caret = document.createElement("span");
+              caret.className = "caret";
+              root.querySelector(".editor").appendChild(caret);
+            }
+
+            function caretPointForElement(editor, el) {
+              const editorBox = editor.getBoundingClientRect();
+              const charBox = el.getBoundingClientRect();
+              return {
+                x: charBox.right - editorBox.left + 2,
+                y: charBox.top - editorBox.top + 3,
+              };
+            }
+
+            function caretPointForLineStart(editor, line) {
+              const editorBox = editor.getBoundingClientRect();
+              const lineBox = line.getBoundingClientRect();
+              const codeBox = line.querySelector(".line-code").getBoundingClientRect();
+              return {
+                x: codeBox.left - editorBox.left,
+                y: lineBox.top - editorBox.top + 3,
+              };
+            }
+
+            function lineHighlightY(editor, line) {
+              const editorBox = editor.getBoundingClientRect();
+              const lineBox = line.getBoundingClientRect();
+              return lineBox.top - editorBox.top;
+            }
+
+            function buildTimeline(root, compositionId) {
+              const tl = gsap.timeline({ paused: true });
+              const editor = root.querySelector(".editor");
+              const caret = root.querySelector(".caret");
+              const activeLine = root.querySelector(".active-line");
+              const lineEls = gsap.utils.toArray(root.querySelectorAll(".line"));
+              const lineStartTimes = [];
+              const charSchedule = [];
+              let cursorTime = 0.95;
+
+              lineEls.forEach((line, lineIndex) => {
+                const lineChars = gsap.utils.toArray(line.querySelectorAll(".char"));
+                lineStartTimes[lineIndex] = cursorTime;
+                lineChars.forEach((char, charIndex) => {
+                  charSchedule.push({ char, time: cursorTime + charIndex * 0.012 });
+                });
+                cursorTime += Math.max(lineChars.length * 0.012, 0.08) + 0.045;
+              });
+
+              gsap.set(activeLine, { y: lineHighlightY(editor, lineEls[0]) });
+              gsap.set(caret, caretPointForLineStart(editor, lineEls[0]));
+
+              tl.from(
+                root.querySelector(".header"),
+                { y: 24, opacity: 0, duration: 0.45, ease: "power3.out" },
+                0,
+              );
+              tl.from(
+                root.querySelector(".workbench"),
+                { y: 42, opacity: 0, scale: 0.986, duration: 0.58, ease: "power3.out" },
+                0.1,
+              );
+              tl.from(activeLine, { opacity: 0, duration: 0.22, ease: "power2.out" }, 0.74);
+              lineStartTimes.forEach((time, lineIndex) => {
+                const line = lineEls[lineIndex];
+                tl.set(activeLine, { y: lineHighlightY(editor, line) }, time);
+                tl.set(caret, caretPointForLineStart(editor, line), time);
+                tl.call(
+                  () => {
+                    lineEls.forEach((item) => item.classList.toggle("is-active", item === line));
+                  },
+                  [],
+                  time,
+                );
+              });
+              charSchedule.forEach(({ char, time }) => {
+                tl.set(char, { opacity: 1 }, time);
+                tl.set(caret, caretPointForElement(editor, char), time + 0.002);
+              });
+              tl.to(
+                root.querySelector(".caret"),
+                { opacity: 0, duration: 0.34, repeat: 25, yoyo: true, ease: "steps(1)" },
+                0.95,
+              );
+              tl.from(
+                root.querySelector(".terminal"),
+                { y: 140, opacity: 0, duration: 0.56, ease: "power3.out" },
+                7.55,
+              );
+              tl.from(
+                root.querySelector(".terminal-body").children,
+                { opacity: 0, y: 8, duration: 0.24, stagger: 0.16, ease: "power2.out" },
+                8.05,
+              );
+              tl.to(
+                root.querySelector(".workbench"),
+                { rotateY: -10.5, z: 74, duration: 0.72, ease: "power2.inOut" },
+                9.35,
+              );
+              tl.to(
+                root.querySelector(".workbench"),
+                { rotateY: 0, z: 0, duration: 0.62, ease: "power2.inOut" },
+                10.08,
+              );
+
+              window.__timelines = window.__timelines || {};
+              window.__timelines[compositionId] = tl;
+
+              const previewTime = new URLSearchParams(window.location.search).get("t");
+              if (previewTime !== null) {
+                tl.time(Number(previewTime));
+              }
+            }
+
+            window.createVSCodeThemeComposition = (compositionId, themeOrId) => {
+              const root =
+                document.querySelector(
+                  '[data-composition-id="' + compositionId + '"] .vscode-theme-scene',
+                ) ||
+                document.querySelector(
+                  '.vscode-theme-scene[data-composition-id="' + compositionId + '"]',
+                ) ||
+                document.querySelector('[data-composition-id="' + compositionId + '"]');
+              const theme =
+                typeof themeOrId === "string"
+                  ? window.VSCODE_THEME_REGISTRY.find((item) => item.id === themeOrId)
+                  : themeOrId;
+              if (!root || !theme) return;
+              root.querySelector(".theme-label").textContent = theme.label;
+              root.querySelector(".theme-source").textContent = theme.sourceFile;
+              applyTheme(root, theme);
+              renderCode(root);
+              buildTimeline(root, compositionId);
+            };
+          })();
+        </script>
+        <script>
+          window.__timelines = window.__timelines || {};
+          window.__timelines["vscode-solarized-light"] =
+            window.__timelines["vscode-solarized-light"] || gsap.timeline({ paused: true });
+          window.createVSCodeThemeComposition("vscode-solarized-light", {
+            id: "solarized-light",
+            label: "Solarized Light",
+            sourceFile: "solarized-light-color-theme.json",
+            uiTheme: "vs",
+            colors: {
+              "activityBar.background": "#DDD6C1",
+              "activityBar.foreground": "#584c27",
+              "editor.background": "#FDF6E3",
+              "editor.foreground": "#657B83",
+              "editor.lineHighlightBackground": "#EEE8D5",
+              "editor.selectionBackground": "#EEE8D5",
+              "editorGroup.border": "#DDD6C1",
+              "editorGroupHeader.tabsBackground": "#D9D2C2",
+              "editorLineNumber.activeForeground": "#567983",
+              "panel.border": "#DDD6C1",
+              "sideBar.background": "#EEE8D5",
+              "sideBarTitle.foreground": "#586E75",
+              "statusBar.background": "#EEE8D5",
+              "statusBar.foreground": "#586E75",
+              "statusBarItem.remoteBackground": "#AC9D57",
+              "tab.activeBackground": "#FDF6E3",
+              "tab.border": "#DDD6C1",
+              "tab.inactiveBackground": "#D3CBB7",
+              "tab.inactiveForeground": "#586E75",
+              "terminal.background": "#FDF6E3",
+              "titleBar.activeBackground": "#EEE8D5",
+            },
+            tokens: {
+              comment: "#93A1A1",
+              keyword: "#CB4B16",
+              function: "#268BD2",
+              string: "#DC322F",
+              number: "#D33682",
+              variable: "#268BD2",
+              parameter: "#9CDCFE",
+              operator: "#859900",
+              punctuation: "#DC322F",
+              className: "#CB4B16",
+            },
+          });
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
 <div
   data-composition-id="code-snippet-solarized-light"
   data-composition-src="compositions/code-snippet-solarized-light.html"
@@ -29,8 +1107,13 @@ It runs for 11 seconds at 1920×1080. Paste this into your composition:
 ></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.
+## Features
+
+- Full VS Code workbench recreation — activity bar, sidebar, explorer tree, editor tabs, breadcrumbs, terminal panel, status bar
+- Per-character typing animation with cursor tracking and active line highlight
+- Colors sourced from official `microsoft/vscode` built-in theme JSON
+- 3D perspective tilt at the end of the typing sequence
+- Terminal panel with mock test output
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/code-snippet-visual-studio-dark.mdx b/docs/catalog/blocks/code-snippet-visual-studio-dark.mdx
index f8f46f6c72..9cbc91d104 100644
--- a/docs/catalog/blocks/code-snippet-visual-studio-dark.mdx
+++ b/docs/catalog/blocks/code-snippet-visual-studio-dark.mdx
@@ -3,21 +3,1085 @@ title: "Code Snippet - Visual Studio Dark"
 description: "VS Code workbench with per-character typing animation in the Visual Studio Dark theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-visual-studio-dark.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-visual-studio-dark.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/code-snippet-visual-studio-dark.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Code Snippet - Visual Studio Dark preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add code-snippet-visual-studio-dark
-```
+<InstallCommand command="npx hyperframes add code-snippet-visual-studio-dark" />
 
 That writes `compositions/code-snippet-visual-studio-dark.html`, plus 1 supporting file under `assets/`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`code-snippet-visual-studio-dark.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Visual Studio Dark VS Code Theme Composition</title>
+  </head>
+  <body>
+    <template id="vscode-visual-studio-dark-template">
+      <div
+        class="vscode-theme-scene"
+        data-composition-id="vscode-visual-studio-dark"
+        data-width="1920"
+        data-height="1080"
+      >
+        <main class="scene-content">
+          <section class="header">
+            <div>
+              <p class="kicker">Official VS Code built-in theme</p>
+              <h1 class="title"><span class="theme-label">Visual Studio Dark</span></h1>
+            </div>
+            <p class="source-note">
+              Typing `functional_toolkit.py` with workbench colors from
+              <span class="theme-source">dark_vs.json</span>.
+            </p>
+          </section>
+
+          <section class="workbench">
+            <div class="titlebar">
+              <div class="traffic"><span></span><span></span><span></span></div>
+              <div class="window-title">functional-toolkit - Visual Studio Code</div>
+              <div class="command-center">Search</div>
+            </div>
+
+            <aside class="activity" aria-label="Activity bar">
+              <svg class="activity-icon active" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="currentColor"
+                  d="M4 4h7v7H4V4Zm9 0h7v7h-7V4ZM4 13h7v7H4v-7Zm9 0h7v7h-7v-7Z"
+                />
+              </svg>
+              <svg class="activity-icon" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  d="m21 21-5.2-5.2M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Z"
+                />
+              </svg>
+              <svg class="activity-icon" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  d="M8 18 3 12l5-6m8 12 5-6-5-6"
+                />
+              </svg>
+              <svg class="activity-icon" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  d="M12 3v18m0-18 6 6m-6-6L6 9m6 12 6-6m-6 6-6-6"
+                />
+              </svg>
+            </aside>
+
+            <aside class="sidebar">
+              <div class="sidebar-title">Explorer</div>
+              <div class="section-title">⌄ Functional Toolkit</div>
+              <div class="tree">
+                <div class="tree-row">⌄ src</div>
+                <div class="tree-row child selected">◇ functional_toolkit.py</div>
+                <div class="tree-row child">◇ test_toolkit.py</div>
+                <div class="tree-row">◇ pyproject.toml</div>
+                <div class="tree-row">◇ README.md</div>
+              </div>
+            </aside>
+
+            <section class="editor-area">
+              <div class="tabs">
+                <div class="tab">◇ functional_toolkit.py</div>
+                <div class="tab inactive">README.md</div>
+              </div>
+              <div class="breadcrumbs">functional-toolkit › src › functional_toolkit.py</div>
+              <div class="editor">
+                <div class="active-line"></div>
+                <div class="code"></div>
+              </div>
+              <div class="terminal">
+                <div class="panel-tabs">
+                  <span class="active">Terminal</span><span>Problems</span><span>Output</span>
+                </div>
+                <div class="terminal-body">
+                  <div><span class="prompt">functional-toolkit %</span> python -m pytest</div>
+                  <div>collected 3 items</div>
+                  <div>tests/test_toolkit.py ... <span class="tok-comment">passed</span></div>
+                </div>
+              </div>
+            </section>
+
+            <footer class="statusbar">
+              <div class="status-left">
+                <span class="remote">main</span>
+                <span>0 errors</span>
+                <span>0 warnings</span>
+              </div>
+              <div class="status-right">
+                <span>Ln 17, Col 1</span>
+                <span>Spaces: 4</span>
+                <span>UTF-8</span>
+                <span>Python 3.12</span>
+              </div>
+            </footer>
+          </section>
+        </main>
+        <style>
+          * {
+            box-sizing: border-box;
+            letter-spacing: 0;
+          }
+
+          html,
+          body {
+            margin: 0;
+            width: 1920px;
+            height: 1080px;
+            overflow: hidden;
+            background: #000000;
+            font-family:
+              Inter,
+              -apple-system,
+              BlinkMacSystemFont,
+              "Segoe UI",
+              sans-serif;
+          }
+
+          .vscode-theme-scene {
+            --activity-bg: #181818;
+            --activity-fg: #d7d7d7;
+            --activity-muted: #868686;
+            --activity-active: #0078d4;
+            --sidebar-bg: #181818;
+            --sidebar-fg: #cccccc;
+            --sidebar-border: #2b2b2b;
+            --tab-bg: #181818;
+            --tab-active-bg: #1f1f1f;
+            --tab-active-fg: #ffffff;
+            --tab-inactive-fg: #9d9d9d;
+            --tab-border: #2b2b2b;
+            --editor-bg: #1f1f1f;
+            --editor-fg: #cccccc;
+            --editor-line: rgba(255, 255, 255, 0.04);
+            --gutter-fg: #6e7681;
+            --gutter-active-fg: #cccccc;
+            --panel-bg: #181818;
+            --panel-border: #2b2b2b;
+            --status-bg: #181818;
+            --status-fg: #cccccc;
+            --status-border: #2b2b2b;
+            --title-bg: #181818;
+            --title-fg: #cccccc;
+            --token-comment: #6a9955;
+            --token-keyword: #c586c0;
+            --token-function: #dcdcaa;
+            --token-string: #ce9178;
+            --token-number: #b5cea8;
+            --token-variable: #9cdcfe;
+            --token-parameter: #9cdcfe;
+            --token-operator: #d4d4d4;
+            --token-punctuation: #d4d4d4;
+            --token-class-name: #4ec9b0;
+            position: relative;
+            width: 1920px;
+            height: 1080px;
+            overflow: hidden;
+            background:
+              linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.32)),
+              url("../assets/background.jpeg") center / cover no-repeat;
+            color: var(--editor-fg);
+          }
+
+          .scene-content {
+            position: relative;
+            z-index: 1;
+            width: 100%;
+            height: 100%;
+            padding: 54px 70px 92px;
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+            perspective: 2200px;
+            perspective-origin: 56% 52%;
+          }
+
+          .header {
+            display: flex;
+            align-items: end;
+            justify-content: space-between;
+            min-height: 66px;
+            text-shadow:
+              0 2px 12px rgba(0, 0, 0, 0.42),
+              0 14px 34px rgba(0, 0, 0, 0.32);
+          }
+
+          .kicker {
+            margin: 0 0 7px;
+            color: var(--gutter-fg);
+            font-size: 15px;
+            font-weight: 650;
+            text-transform: uppercase;
+            text-shadow:
+              0 2px 8px rgba(0, 0, 0, 0.48),
+              0 10px 26px rgba(0, 0, 0, 0.36);
+          }
+
+          .title {
+            margin: 0;
+            color: var(--editor-fg);
+            font-size: 44px;
+            line-height: 1;
+            font-weight: 760;
+          }
+
+          .source-note {
+            width: 510px;
+            color: var(--gutter-fg);
+            font-size: 16px;
+            line-height: 1.35;
+            text-align: right;
+            text-shadow:
+              0 2px 10px rgba(0, 0, 0, 0.46),
+              0 12px 30px rgba(0, 0, 0, 0.34);
+          }
+
+          .workbench {
+            height: 824px;
+            display: grid;
+            grid-template-columns: 54px 290px 1fr;
+            grid-template-rows: 36px 1fr 26px;
+            overflow: hidden;
+            border: 1px solid var(--sidebar-border);
+            border-radius: 8px;
+            background: var(--editor-bg);
+            box-shadow: 0 34px 90px rgba(0, 0, 0, 0.42);
+            transform: translateZ(0);
+            transform-origin: 82% 50%;
+            transform-style: preserve-3d;
+            will-change: transform;
+          }
+
+          .titlebar {
+            grid-column: 1 / -1;
+            display: grid;
+            grid-template-columns: 120px 1fr 210px;
+            align-items: center;
+            background: var(--title-bg);
+            color: var(--title-fg);
+            border-bottom: 1px solid var(--tab-border);
+            font-size: 12px;
+          }
+
+          .traffic {
+            display: flex;
+            gap: 8px;
+            padding-left: 18px;
+          }
+
+          .traffic span {
+            width: 12px;
+            height: 12px;
+            border-radius: 999px;
+          }
+
+          .traffic span:nth-child(1) {
+            background: #ff5f57;
+          }
+          .traffic span:nth-child(2) {
+            background: #ffbd2e;
+          }
+          .traffic span:nth-child(3) {
+            background: #28c840;
+          }
+
+          .window-title {
+            justify-self: center;
+            opacity: 0.84;
+          }
+
+          .command-center {
+            justify-self: end;
+            width: 176px;
+            height: 22px;
+            margin-right: 16px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border: 1px solid color-mix(in srgb, var(--title-fg), transparent 78%);
+            border-radius: 5px;
+            color: color-mix(in srgb, var(--title-fg), transparent 18%);
+          }
+
+          .activity {
+            grid-row: 2 / 3;
+            background: var(--activity-bg);
+            border-right: 1px solid var(--sidebar-border);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 10px 0;
+            gap: 18px;
+          }
+
+          .activity-icon {
+            width: 28px;
+            height: 28px;
+            color: var(--activity-muted);
+          }
+
+          .activity-icon.active {
+            color: var(--activity-fg);
+            border-left: 2px solid var(--activity-active);
+            padding-left: 4px;
+          }
+
+          .sidebar {
+            grid-row: 2 / 3;
+            background: var(--sidebar-bg);
+            color: var(--sidebar-fg);
+            border-right: 1px solid var(--sidebar-border);
+            display: flex;
+            flex-direction: column;
+            min-width: 0;
+          }
+
+          .sidebar-title {
+            height: 38px;
+            display: flex;
+            align-items: center;
+            padding: 0 20px;
+            color: var(--sidebar-fg);
+            font-size: 11px;
+            text-transform: uppercase;
+          }
+
+          .section-title {
+            height: 24px;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            padding: 0 14px;
+            background: color-mix(in srgb, var(--sidebar-bg), var(--sidebar-fg) 5%);
+            border-top: 1px solid var(--sidebar-border);
+            border-bottom: 1px solid var(--sidebar-border);
+            color: var(--sidebar-fg);
+            font-size: 11px;
+            font-weight: 700;
+          }
+
+          .tree {
+            padding: 8px 0;
+            font-size: 13px;
+            line-height: 24px;
+          }
+
+          .tree-row {
+            height: 24px;
+            display: flex;
+            align-items: center;
+            gap: 7px;
+            padding: 0 10px 0 18px;
+            color: color-mix(in srgb, var(--sidebar-fg), transparent 8%);
+            white-space: nowrap;
+          }
+
+          .tree-row.child {
+            padding-left: 34px;
+          }
+
+          .tree-row.selected {
+            background: color-mix(in srgb, var(--sidebar-fg), transparent 88%);
+            color: var(--sidebar-fg);
+          }
+
+          .editor-area {
+            grid-row: 2 / 3;
+            display: grid;
+            grid-template-rows: 36px 30px 1fr 138px;
+            min-width: 0;
+            background: var(--editor-bg);
+          }
+
+          .tabs {
+            display: flex;
+            background: var(--tab-bg);
+            border-bottom: 1px solid var(--tab-border);
+          }
+
+          .tab {
+            width: 205px;
+            height: 36px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 0 13px;
+            border-right: 1px solid var(--tab-border);
+            background: var(--tab-active-bg);
+            color: var(--tab-active-fg);
+            border-top: 2px solid var(--activity-active);
+            font-size: 13px;
+          }
+
+          .tab.inactive {
+            background: var(--tab-bg);
+            color: var(--tab-inactive-fg);
+            border-top-color: transparent;
+          }
+
+          .breadcrumbs {
+            display: flex;
+            align-items: center;
+            gap: 7px;
+            padding: 0 18px;
+            color: var(--gutter-fg);
+            border-bottom: 1px solid color-mix(in srgb, var(--tab-border), transparent 20%);
+            font-size: 12px;
+          }
+
+          .editor {
+            position: relative;
+            overflow: hidden;
+            background: var(--editor-bg);
+            color: var(--editor-fg);
+            font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+            font-size: 18px;
+            line-height: 1.52;
+          }
+
+          .active-line {
+            position: absolute;
+            left: 0;
+            right: 0;
+            top: 0;
+            height: 28px;
+            background: var(--editor-line);
+            will-change: transform;
+          }
 
-It runs for 11 seconds at 1920×1080. Paste this into your composition:
+          .code {
+            position: relative;
+            padding: 20px 36px 18px 0;
+          }
 
-```html index.html
+          .line {
+            height: 28px;
+            display: grid;
+            grid-template-columns: 72px 1fr;
+            align-items: center;
+          }
+
+          .line-number {
+            padding-right: 18px;
+            color: var(--gutter-fg);
+            text-align: right;
+            user-select: none;
+          }
+
+          .line.is-active .line-number {
+            color: var(--gutter-active-fg);
+          }
+
+          .line-code {
+            white-space: pre;
+          }
+
+          .char {
+            opacity: 0;
+          }
+
+          .tok-comment {
+            color: var(--token-comment);
+          }
+          .tok-keyword {
+            color: var(--token-keyword);
+          }
+          .tok-function {
+            color: var(--token-function);
+          }
+          .tok-string {
+            color: var(--token-string);
+          }
+          .tok-number {
+            color: var(--token-number);
+          }
+          .tok-variable {
+            color: var(--token-variable);
+          }
+          .tok-parameter {
+            color: var(--token-parameter);
+          }
+          .tok-operator {
+            color: var(--token-operator);
+          }
+          .tok-punctuation {
+            color: var(--token-punctuation);
+          }
+          .tok-class-name {
+            color: var(--token-class-name);
+          }
+
+          .caret {
+            position: absolute;
+            left: 0;
+            top: 0;
+            z-index: 3;
+            display: block;
+            width: 2px;
+            height: 22px;
+            background: var(--editor-fg);
+            pointer-events: none;
+            will-change: transform, opacity;
+          }
+
+          .terminal {
+            display: grid;
+            grid-template-rows: 32px 1fr;
+            background: var(--panel-bg);
+            border-top: 1px solid var(--panel-border);
+            color: var(--editor-fg);
+            font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+            font-size: 14px;
+          }
+
+          .panel-tabs {
+            display: flex;
+            align-items: center;
+            gap: 22px;
+            padding: 0 18px;
+            border-bottom: 1px solid var(--panel-border);
+            color: var(--gutter-fg);
+            font-family:
+              Inter,
+              -apple-system,
+              BlinkMacSystemFont,
+              "Segoe UI",
+              sans-serif;
+            font-size: 12px;
+            text-transform: uppercase;
+          }
+
+          .panel-tabs .active {
+            color: var(--editor-fg);
+            border-bottom: 1px solid var(--activity-active);
+            height: 32px;
+            display: flex;
+            align-items: center;
+          }
+
+          .terminal-body {
+            padding: 12px 20px;
+            color: var(--editor-fg);
+            line-height: 1.8;
+          }
+
+          .prompt {
+            color: var(--token-function);
+          }
+
+          .statusbar {
+            grid-column: 1 / -1;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            background: var(--status-bg);
+            color: var(--status-fg);
+            border-top: 1px solid var(--status-border);
+            font-size: 12px;
+          }
+
+          .status-left,
+          .status-right {
+            display: flex;
+            align-items: center;
+            gap: 18px;
+            padding: 0 12px;
+          }
+
+          .remote {
+            align-self: stretch;
+            display: flex;
+            align-items: center;
+            padding: 0 12px;
+            margin-left: -12px;
+            background: var(--status-remote-bg, var(--activity-active));
+            color: var(--status-remote-fg, #ffffff);
+          }
+
+          svg {
+            display: block;
+          }
+        </style>
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (() => {
+            const codeLines = [
+              [{ text: "# A small functional toolkit", token: "comment" }],
+              [
+                { text: "def", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "pluck_deep", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "key", token: "parameter" },
+                { text: "):", token: "punctuation" },
+              ],
+              [
+                { text: "    ", token: "plain" },
+                { text: "return", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "obj", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "reduce", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "acc", token: "parameter" },
+                { text: ", ", token: "punctuation" },
+                { text: "k", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "acc", token: "variable" },
+                { text: "[", token: "punctuation" },
+                { text: "k", token: "variable" },
+                { text: "]", token: "punctuation" },
+                { text: ", ", token: "punctuation" },
+                { text: "key", token: "variable" },
+                { text: ".split", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "'.'", token: "string" },
+                { text: "), ", token: "punctuation" },
+                { text: "obj", token: "variable" },
+                { text: ")", token: "punctuation" },
+              ],
+              [],
+              [
+                { text: "def", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "compose", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "*", token: "operator" },
+                { text: "fns", token: "parameter" },
+                { text: "):", token: "punctuation" },
+              ],
+              [
+                { text: "    ", token: "plain" },
+                { text: "return", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "res", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "reduce", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "acc", token: "parameter" },
+                { text: ", ", token: "punctuation" },
+                { text: "fn", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "fn", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "acc", token: "variable" },
+                { text: "), ", token: "punctuation" },
+                { text: "fns", token: "variable" },
+                { text: ", ", token: "punctuation" },
+                { text: "res", token: "variable" },
+                { text: ")", token: "punctuation" },
+              ],
+              [],
+              [
+                { text: "def", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "unfold", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "f", token: "parameter" },
+                { text: ", ", token: "punctuation" },
+                { text: "seed", token: "parameter" },
+                { text: "):", token: "punctuation" },
+              ],
+              [
+                { text: "    ", token: "plain" },
+                { text: '"""Build a list by repeatedly applying f to a seed."""', token: "string" },
+              ],
+              [
+                { text: "    acc", token: "variable" },
+                { text: " = ", token: "operator" },
+                { text: "[]", token: "punctuation" },
+              ],
+              [
+                { text: "    while", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "True", token: "className" },
+                { text: ":", token: "punctuation" },
+              ],
+              [
+                { text: "        result", token: "variable" },
+                { text: " = ", token: "operator" },
+                { text: "f", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "seed", token: "variable" },
+                { text: ")", token: "punctuation" },
+              ],
+              [
+                { text: "        if", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "result", token: "variable" },
+                { text: " is ", token: "keyword" },
+                { text: "None", token: "className" },
+                { text: ":", token: "punctuation" },
+              ],
+              [
+                { text: "            return", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "acc", token: "variable" },
+              ],
+              [
+                { text: "        acc", token: "variable" },
+                { text: ".append", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "result", token: "variable" },
+                { text: "[", token: "punctuation" },
+                { text: "0", token: "number" },
+                { text: "])", token: "punctuation" },
+              ],
+              [
+                { text: "        seed", token: "variable" },
+                { text: " = ", token: "operator" },
+                { text: "result", token: "variable" },
+                { text: "[", token: "punctuation" },
+                { text: "1", token: "number" },
+                { text: "]", token: "punctuation" },
+              ],
+              [],
+            ];
+
+            const fallback = {
+              "activityBar.background": "#181818",
+              "activityBar.foreground": "#d7d7d7",
+              "activityBar.inactiveForeground": "#868686",
+              "activityBar.activeBorder": "#0078d4",
+              "sideBar.background": "#181818",
+              "sideBar.foreground": "#cccccc",
+              "sideBar.border": "#2b2b2b",
+              "tab.activeBackground": "#1f1f1f",
+              "tab.activeForeground": "#ffffff",
+              "tab.inactiveBackground": "#181818",
+              "tab.inactiveForeground": "#9d9d9d",
+              "tab.border": "#2b2b2b",
+              "editor.background": "#1f1f1f",
+              "editor.foreground": "#cccccc",
+              "editor.lineHighlightBackground": "#ffffff0a",
+              "editorLineNumber.foreground": "#6e7681",
+              "editorLineNumber.activeForeground": "#cccccc",
+              "panel.background": "#181818",
+              "panel.border": "#2b2b2b",
+              "statusBar.background": "#181818",
+              "statusBar.foreground": "#cccccc",
+              "statusBar.border": "#2b2b2b",
+              "titleBar.activeBackground": "#181818",
+              "titleBar.activeForeground": "#cccccc",
+            };
+
+            function color(theme, key) {
+              return theme.colors[key] || fallback[key] || theme.colors.foreground || "#cccccc";
+            }
+
+            function solarizedGrey(theme) {
+              return (
+                theme.colors["tab.inactiveForeground"] ||
+                theme.colors["editor.foreground"] ||
+                "#586E75"
+              );
+            }
+
+            function setVar(root, name, value) {
+              root.style.setProperty(name, value);
+            }
+
+            function applyTheme(root, theme) {
+              const solarizedUiGrey = theme.id === "solarized-light" ? solarizedGrey(theme) : null;
+              setVar(root, "--activity-bg", color(theme, "activityBar.background"));
+              setVar(
+                root,
+                "--activity-fg",
+                solarizedUiGrey || color(theme, "activityBar.foreground"),
+              );
+              setVar(
+                root,
+                "--activity-muted",
+                solarizedUiGrey || color(theme, "activityBar.inactiveForeground"),
+              );
+              setVar(root, "--activity-active", color(theme, "activityBar.activeBorder"));
+              setVar(root, "--sidebar-bg", color(theme, "sideBar.background"));
+              setVar(root, "--sidebar-fg", solarizedUiGrey || color(theme, "sideBar.foreground"));
+              setVar(root, "--sidebar-border", color(theme, "sideBar.border"));
+              setVar(root, "--tab-bg", color(theme, "tab.inactiveBackground"));
+              setVar(root, "--tab-active-bg", color(theme, "tab.activeBackground"));
+              setVar(
+                root,
+                "--tab-active-fg",
+                solarizedUiGrey || color(theme, "tab.activeForeground"),
+              );
+              setVar(
+                root,
+                "--tab-inactive-fg",
+                solarizedUiGrey || color(theme, "tab.inactiveForeground"),
+              );
+              setVar(root, "--tab-border", color(theme, "tab.border"));
+              setVar(root, "--editor-bg", color(theme, "editor.background"));
+              setVar(root, "--editor-fg", color(theme, "editor.foreground"));
+              setVar(root, "--editor-line", color(theme, "editor.lineHighlightBackground"));
+              setVar(root, "--gutter-fg", color(theme, "editorLineNumber.foreground"));
+              setVar(root, "--gutter-active-fg", color(theme, "editorLineNumber.activeForeground"));
+              setVar(root, "--panel-bg", color(theme, "panel.background"));
+              setVar(root, "--panel-border", color(theme, "panel.border"));
+              setVar(root, "--status-bg", color(theme, "statusBar.background"));
+              setVar(root, "--status-fg", color(theme, "statusBar.foreground"));
+              setVar(root, "--status-border", color(theme, "statusBar.border"));
+              setVar(root, "--status-remote-bg", color(theme, "statusBarItem.remoteBackground"));
+              setVar(
+                root,
+                "--status-remote-fg",
+                solarizedUiGrey || color(theme, "statusBarItem.remoteForeground"),
+              );
+              setVar(root, "--title-bg", color(theme, "titleBar.activeBackground"));
+              setVar(
+                root,
+                "--title-fg",
+                solarizedUiGrey || color(theme, "titleBar.activeForeground"),
+              );
+              setVar(root, "--token-comment", theme.tokens.comment);
+              setVar(root, "--token-keyword", theme.tokens.keyword);
+              setVar(root, "--token-function", theme.tokens.function);
+              setVar(root, "--token-string", theme.tokens.string);
+              setVar(root, "--token-number", theme.tokens.number);
+              setVar(root, "--token-variable", theme.tokens.variable);
+              setVar(root, "--token-parameter", theme.tokens.parameter);
+              setVar(root, "--token-operator", theme.tokens.operator);
+              setVar(root, "--token-punctuation", theme.tokens.punctuation);
+              setVar(root, "--token-class-name", theme.tokens.className);
+            }
+
+            function renderCode(root) {
+              const code = root.querySelector(".code");
+              codeLines.forEach((segments, index) => {
+                const line = document.createElement("div");
+                line.className = "line";
+                line.dataset.lineIndex = String(index);
+
+                const lineNumber = document.createElement("span");
+                lineNumber.className = "line-number";
+                lineNumber.textContent = String(index + 1);
+                line.appendChild(lineNumber);
+
+                const lineCode = document.createElement("span");
+                lineCode.className = "line-code";
+                segments.forEach((segment) => {
+                  [...segment.text].forEach((char) => {
+                    const span = document.createElement("span");
+                    span.className =
+                      segment.token === "plain"
+                        ? "char"
+                        : "char tok-" +
+                          segment.token.replace(/[A-Z]/g, (match) => "-" + match.toLowerCase());
+                    span.dataset.lineIndex = String(index);
+                    span.textContent = char;
+                    lineCode.appendChild(span);
+                  });
+                });
+                line.appendChild(lineCode);
+                code.appendChild(line);
+              });
+
+              const caret = document.createElement("span");
+              caret.className = "caret";
+              root.querySelector(".editor").appendChild(caret);
+            }
+
+            function caretPointForElement(editor, el) {
+              const editorBox = editor.getBoundingClientRect();
+              const charBox = el.getBoundingClientRect();
+              return {
+                x: charBox.right - editorBox.left + 2,
+                y: charBox.top - editorBox.top + 3,
+              };
+            }
+
+            function caretPointForLineStart(editor, line) {
+              const editorBox = editor.getBoundingClientRect();
+              const lineBox = line.getBoundingClientRect();
+              const codeBox = line.querySelector(".line-code").getBoundingClientRect();
+              return {
+                x: codeBox.left - editorBox.left,
+                y: lineBox.top - editorBox.top + 3,
+              };
+            }
+
+            function lineHighlightY(editor, line) {
+              const editorBox = editor.getBoundingClientRect();
+              const lineBox = line.getBoundingClientRect();
+              return lineBox.top - editorBox.top;
+            }
+
+            function buildTimeline(root, compositionId) {
+              const tl = gsap.timeline({ paused: true });
+              const editor = root.querySelector(".editor");
+              const caret = root.querySelector(".caret");
+              const activeLine = root.querySelector(".active-line");
+              const lineEls = gsap.utils.toArray(root.querySelectorAll(".line"));
+              const lineStartTimes = [];
+              const charSchedule = [];
+              let cursorTime = 0.95;
+
+              lineEls.forEach((line, lineIndex) => {
+                const lineChars = gsap.utils.toArray(line.querySelectorAll(".char"));
+                lineStartTimes[lineIndex] = cursorTime;
+                lineChars.forEach((char, charIndex) => {
+                  charSchedule.push({ char, time: cursorTime + charIndex * 0.012 });
+                });
+                cursorTime += Math.max(lineChars.length * 0.012, 0.08) + 0.045;
+              });
+
+              gsap.set(activeLine, { y: lineHighlightY(editor, lineEls[0]) });
+              gsap.set(caret, caretPointForLineStart(editor, lineEls[0]));
+
+              tl.from(
+                root.querySelector(".header"),
+                { y: 24, opacity: 0, duration: 0.45, ease: "power3.out" },
+                0,
+              );
+              tl.from(
+                root.querySelector(".workbench"),
+                { y: 42, opacity: 0, scale: 0.986, duration: 0.58, ease: "power3.out" },
+                0.1,
+              );
+              tl.from(activeLine, { opacity: 0, duration: 0.22, ease: "power2.out" }, 0.74);
+              lineStartTimes.forEach((time, lineIndex) => {
+                const line = lineEls[lineIndex];
+                tl.set(activeLine, { y: lineHighlightY(editor, line) }, time);
+                tl.set(caret, caretPointForLineStart(editor, line), time);
+                tl.call(
+                  () => {
+                    lineEls.forEach((item) => item.classList.toggle("is-active", item === line));
+                  },
+                  [],
+                  time,
+                );
+              });
+              charSchedule.forEach(({ char, time }) => {
+                tl.set(char, { opacity: 1 }, time);
+                tl.set(caret, caretPointForElement(editor, char), time + 0.002);
+              });
+              tl.to(
+                root.querySelector(".caret"),
+                { opacity: 0, duration: 0.34, repeat: 25, yoyo: true, ease: "steps(1)" },
+                0.95,
+              );
+              tl.from(
+                root.querySelector(".terminal"),
+                { y: 140, opacity: 0, duration: 0.56, ease: "power3.out" },
+                7.55,
+              );
+              tl.from(
+                root.querySelector(".terminal-body").children,
+                { opacity: 0, y: 8, duration: 0.24, stagger: 0.16, ease: "power2.out" },
+                8.05,
+              );
+              tl.to(
+                root.querySelector(".workbench"),
+                { rotateY: -10.5, z: 74, duration: 0.72, ease: "power2.inOut" },
+                9.35,
+              );
+              tl.to(
+                root.querySelector(".workbench"),
+                { rotateY: 0, z: 0, duration: 0.62, ease: "power2.inOut" },
+                10.08,
+              );
+
+              window.__timelines = window.__timelines || {};
+              window.__timelines[compositionId] = tl;
+
+              const previewTime = new URLSearchParams(window.location.search).get("t");
+              if (previewTime !== null) {
+                tl.time(Number(previewTime));
+              }
+            }
+
+            window.createVSCodeThemeComposition = (compositionId, themeOrId) => {
+              const root =
+                document.querySelector(
+                  '[data-composition-id="' + compositionId + '"] .vscode-theme-scene',
+                ) ||
+                document.querySelector(
+                  '.vscode-theme-scene[data-composition-id="' + compositionId + '"]',
+                ) ||
+                document.querySelector('[data-composition-id="' + compositionId + '"]');
+              const theme =
+                typeof themeOrId === "string"
+                  ? window.VSCODE_THEME_REGISTRY.find((item) => item.id === themeOrId)
+                  : themeOrId;
+              if (!root || !theme) return;
+              root.querySelector(".theme-label").textContent = theme.label;
+              root.querySelector(".theme-source").textContent = theme.sourceFile;
+              applyTheme(root, theme);
+              renderCode(root);
+              buildTimeline(root, compositionId);
+            };
+          })();
+        </script>
+        <script>
+          window.__timelines = window.__timelines || {};
+          window.__timelines["vscode-visual-studio-dark"] =
+            window.__timelines["vscode-visual-studio-dark"] || gsap.timeline({ paused: true });
+          window.createVSCodeThemeComposition("vscode-visual-studio-dark", {
+            id: "visual-studio-dark",
+            label: "Visual Studio Dark",
+            sourceFile: "dark_vs.json",
+            uiTheme: "vs-dark",
+            colors: {
+              "editor.background": "#1E1E1E",
+              "editor.foreground": "#D4D4D4",
+              "sideBarSectionHeader.background": "#0000",
+              "sideBarSectionHeader.border": "#ccc3",
+              "sideBarTitle.foreground": "#BBBBBB",
+              "statusBarItem.remoteBackground": "#16825D",
+              "statusBarItem.remoteForeground": "#FFF",
+            },
+            tokens: {
+              comment: "#6A9955",
+              keyword: "#d4d4d4",
+              function: "#9cdcfe",
+              string: "#d16969",
+              number: "#b5cea8",
+              variable: "#569cd6",
+              parameter: "#9CDCFE",
+              operator: "#569cd6",
+              punctuation: "#569cd6",
+              className: "#9cdcfe",
+            },
+          });
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
 <div
   data-composition-id="code-snippet-visual-studio-dark"
   data-composition-src="compositions/code-snippet-visual-studio-dark.html"
@@ -29,8 +1093,13 @@ It runs for 11 seconds at 1920×1080. Paste this into your composition:
 ></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.
+## Features
+
+- Full VS Code workbench recreation — activity bar, sidebar, explorer tree, editor tabs, breadcrumbs, terminal panel, status bar
+- Per-character typing animation with cursor tracking and active line highlight
+- Colors sourced from official `microsoft/vscode` built-in theme JSON
+- 3D perspective tilt at the end of the typing sequence
+- Terminal panel with mock test output
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/code-snippet-visual-studio-light.mdx b/docs/catalog/blocks/code-snippet-visual-studio-light.mdx
index efdd243db0..631375ccae 100644
--- a/docs/catalog/blocks/code-snippet-visual-studio-light.mdx
+++ b/docs/catalog/blocks/code-snippet-visual-studio-light.mdx
@@ -3,21 +3,1085 @@ title: "Code Snippet - Visual Studio Light"
 description: "VS Code workbench with per-character typing animation in the Visual Studio Light theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-visual-studio-light.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-visual-studio-light.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/code-snippet-visual-studio-light.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Code Snippet - Visual Studio Light preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add code-snippet-visual-studio-light
-```
+<InstallCommand command="npx hyperframes add code-snippet-visual-studio-light" />
 
 That writes `compositions/code-snippet-visual-studio-light.html`, plus 1 supporting file under `assets/`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`code-snippet-visual-studio-light.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Visual Studio Light VS Code Theme Composition</title>
+  </head>
+  <body>
+    <template id="vscode-visual-studio-light-template">
+      <div
+        class="vscode-theme-scene"
+        data-composition-id="vscode-visual-studio-light"
+        data-width="1920"
+        data-height="1080"
+      >
+        <main class="scene-content">
+          <section class="header">
+            <div>
+              <p class="kicker">Official VS Code built-in theme</p>
+              <h1 class="title"><span class="theme-label">Visual Studio Light</span></h1>
+            </div>
+            <p class="source-note">
+              Typing `functional_toolkit.py` with workbench colors from
+              <span class="theme-source">light_vs.json</span>.
+            </p>
+          </section>
+
+          <section class="workbench">
+            <div class="titlebar">
+              <div class="traffic"><span></span><span></span><span></span></div>
+              <div class="window-title">functional-toolkit - Visual Studio Code</div>
+              <div class="command-center">Search</div>
+            </div>
+
+            <aside class="activity" aria-label="Activity bar">
+              <svg class="activity-icon active" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="currentColor"
+                  d="M4 4h7v7H4V4Zm9 0h7v7h-7V4ZM4 13h7v7H4v-7Zm9 0h7v7h-7v-7Z"
+                />
+              </svg>
+              <svg class="activity-icon" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  d="m21 21-5.2-5.2M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Z"
+                />
+              </svg>
+              <svg class="activity-icon" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  d="M8 18 3 12l5-6m8 12 5-6-5-6"
+                />
+              </svg>
+              <svg class="activity-icon" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  d="M12 3v18m0-18 6 6m-6-6L6 9m6 12 6-6m-6 6-6-6"
+                />
+              </svg>
+            </aside>
+
+            <aside class="sidebar">
+              <div class="sidebar-title">Explorer</div>
+              <div class="section-title">⌄ Functional Toolkit</div>
+              <div class="tree">
+                <div class="tree-row">⌄ src</div>
+                <div class="tree-row child selected">◇ functional_toolkit.py</div>
+                <div class="tree-row child">◇ test_toolkit.py</div>
+                <div class="tree-row">◇ pyproject.toml</div>
+                <div class="tree-row">◇ README.md</div>
+              </div>
+            </aside>
+
+            <section class="editor-area">
+              <div class="tabs">
+                <div class="tab">◇ functional_toolkit.py</div>
+                <div class="tab inactive">README.md</div>
+              </div>
+              <div class="breadcrumbs">functional-toolkit › src › functional_toolkit.py</div>
+              <div class="editor">
+                <div class="active-line"></div>
+                <div class="code"></div>
+              </div>
+              <div class="terminal">
+                <div class="panel-tabs">
+                  <span class="active">Terminal</span><span>Problems</span><span>Output</span>
+                </div>
+                <div class="terminal-body">
+                  <div><span class="prompt">functional-toolkit %</span> python -m pytest</div>
+                  <div>collected 3 items</div>
+                  <div>tests/test_toolkit.py ... <span class="tok-comment">passed</span></div>
+                </div>
+              </div>
+            </section>
+
+            <footer class="statusbar">
+              <div class="status-left">
+                <span class="remote">main</span>
+                <span>0 errors</span>
+                <span>0 warnings</span>
+              </div>
+              <div class="status-right">
+                <span>Ln 17, Col 1</span>
+                <span>Spaces: 4</span>
+                <span>UTF-8</span>
+                <span>Python 3.12</span>
+              </div>
+            </footer>
+          </section>
+        </main>
+        <style>
+          * {
+            box-sizing: border-box;
+            letter-spacing: 0;
+          }
+
+          html,
+          body {
+            margin: 0;
+            width: 1920px;
+            height: 1080px;
+            overflow: hidden;
+            background: #000000;
+            font-family:
+              Inter,
+              -apple-system,
+              BlinkMacSystemFont,
+              "Segoe UI",
+              sans-serif;
+          }
+
+          .vscode-theme-scene {
+            --activity-bg: #181818;
+            --activity-fg: #d7d7d7;
+            --activity-muted: #868686;
+            --activity-active: #0078d4;
+            --sidebar-bg: #181818;
+            --sidebar-fg: #cccccc;
+            --sidebar-border: #2b2b2b;
+            --tab-bg: #181818;
+            --tab-active-bg: #1f1f1f;
+            --tab-active-fg: #ffffff;
+            --tab-inactive-fg: #9d9d9d;
+            --tab-border: #2b2b2b;
+            --editor-bg: #1f1f1f;
+            --editor-fg: #cccccc;
+            --editor-line: rgba(255, 255, 255, 0.04);
+            --gutter-fg: #6e7681;
+            --gutter-active-fg: #cccccc;
+            --panel-bg: #181818;
+            --panel-border: #2b2b2b;
+            --status-bg: #181818;
+            --status-fg: #cccccc;
+            --status-border: #2b2b2b;
+            --title-bg: #181818;
+            --title-fg: #cccccc;
+            --token-comment: #6a9955;
+            --token-keyword: #c586c0;
+            --token-function: #dcdcaa;
+            --token-string: #ce9178;
+            --token-number: #b5cea8;
+            --token-variable: #9cdcfe;
+            --token-parameter: #9cdcfe;
+            --token-operator: #d4d4d4;
+            --token-punctuation: #d4d4d4;
+            --token-class-name: #4ec9b0;
+            position: relative;
+            width: 1920px;
+            height: 1080px;
+            overflow: hidden;
+            background:
+              linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.32)),
+              url("../assets/background.jpeg") center / cover no-repeat;
+            color: var(--editor-fg);
+          }
+
+          .scene-content {
+            position: relative;
+            z-index: 1;
+            width: 100%;
+            height: 100%;
+            padding: 54px 70px 92px;
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+            perspective: 2200px;
+            perspective-origin: 56% 52%;
+          }
+
+          .header {
+            display: flex;
+            align-items: end;
+            justify-content: space-between;
+            min-height: 66px;
+            text-shadow:
+              0 2px 12px rgba(0, 0, 0, 0.42),
+              0 14px 34px rgba(0, 0, 0, 0.32);
+          }
+
+          .kicker {
+            margin: 0 0 7px;
+            color: var(--gutter-fg);
+            font-size: 15px;
+            font-weight: 650;
+            text-transform: uppercase;
+            text-shadow:
+              0 2px 8px rgba(0, 0, 0, 0.48),
+              0 10px 26px rgba(0, 0, 0, 0.36);
+          }
+
+          .title {
+            margin: 0;
+            color: var(--editor-fg);
+            font-size: 44px;
+            line-height: 1;
+            font-weight: 760;
+          }
+
+          .source-note {
+            width: 510px;
+            color: var(--gutter-fg);
+            font-size: 16px;
+            line-height: 1.35;
+            text-align: right;
+            text-shadow:
+              0 2px 10px rgba(0, 0, 0, 0.46),
+              0 12px 30px rgba(0, 0, 0, 0.34);
+          }
+
+          .workbench {
+            height: 824px;
+            display: grid;
+            grid-template-columns: 54px 290px 1fr;
+            grid-template-rows: 36px 1fr 26px;
+            overflow: hidden;
+            border: 1px solid var(--sidebar-border);
+            border-radius: 8px;
+            background: var(--editor-bg);
+            box-shadow: 0 34px 90px rgba(0, 0, 0, 0.42);
+            transform: translateZ(0);
+            transform-origin: 82% 50%;
+            transform-style: preserve-3d;
+            will-change: transform;
+          }
+
+          .titlebar {
+            grid-column: 1 / -1;
+            display: grid;
+            grid-template-columns: 120px 1fr 210px;
+            align-items: center;
+            background: var(--title-bg);
+            color: var(--title-fg);
+            border-bottom: 1px solid var(--tab-border);
+            font-size: 12px;
+          }
+
+          .traffic {
+            display: flex;
+            gap: 8px;
+            padding-left: 18px;
+          }
+
+          .traffic span {
+            width: 12px;
+            height: 12px;
+            border-radius: 999px;
+          }
+
+          .traffic span:nth-child(1) {
+            background: #ff5f57;
+          }
+          .traffic span:nth-child(2) {
+            background: #ffbd2e;
+          }
+          .traffic span:nth-child(3) {
+            background: #28c840;
+          }
+
+          .window-title {
+            justify-self: center;
+            opacity: 0.84;
+          }
+
+          .command-center {
+            justify-self: end;
+            width: 176px;
+            height: 22px;
+            margin-right: 16px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border: 1px solid color-mix(in srgb, var(--title-fg), transparent 78%);
+            border-radius: 5px;
+            color: color-mix(in srgb, var(--title-fg), transparent 18%);
+          }
+
+          .activity {
+            grid-row: 2 / 3;
+            background: var(--activity-bg);
+            border-right: 1px solid var(--sidebar-border);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 10px 0;
+            gap: 18px;
+          }
+
+          .activity-icon {
+            width: 28px;
+            height: 28px;
+            color: var(--activity-muted);
+          }
+
+          .activity-icon.active {
+            color: var(--activity-fg);
+            border-left: 2px solid var(--activity-active);
+            padding-left: 4px;
+          }
+
+          .sidebar {
+            grid-row: 2 / 3;
+            background: var(--sidebar-bg);
+            color: var(--sidebar-fg);
+            border-right: 1px solid var(--sidebar-border);
+            display: flex;
+            flex-direction: column;
+            min-width: 0;
+          }
+
+          .sidebar-title {
+            height: 38px;
+            display: flex;
+            align-items: center;
+            padding: 0 20px;
+            color: var(--sidebar-fg);
+            font-size: 11px;
+            text-transform: uppercase;
+          }
+
+          .section-title {
+            height: 24px;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            padding: 0 14px;
+            background: color-mix(in srgb, var(--sidebar-bg), var(--sidebar-fg) 5%);
+            border-top: 1px solid var(--sidebar-border);
+            border-bottom: 1px solid var(--sidebar-border);
+            color: var(--sidebar-fg);
+            font-size: 11px;
+            font-weight: 700;
+          }
+
+          .tree {
+            padding: 8px 0;
+            font-size: 13px;
+            line-height: 24px;
+          }
+
+          .tree-row {
+            height: 24px;
+            display: flex;
+            align-items: center;
+            gap: 7px;
+            padding: 0 10px 0 18px;
+            color: color-mix(in srgb, var(--sidebar-fg), transparent 8%);
+            white-space: nowrap;
+          }
+
+          .tree-row.child {
+            padding-left: 34px;
+          }
+
+          .tree-row.selected {
+            background: color-mix(in srgb, var(--sidebar-fg), transparent 88%);
+            color: var(--sidebar-fg);
+          }
+
+          .editor-area {
+            grid-row: 2 / 3;
+            display: grid;
+            grid-template-rows: 36px 30px 1fr 138px;
+            min-width: 0;
+            background: var(--editor-bg);
+          }
+
+          .tabs {
+            display: flex;
+            background: var(--tab-bg);
+            border-bottom: 1px solid var(--tab-border);
+          }
+
+          .tab {
+            width: 205px;
+            height: 36px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 0 13px;
+            border-right: 1px solid var(--tab-border);
+            background: var(--tab-active-bg);
+            color: var(--tab-active-fg);
+            border-top: 2px solid var(--activity-active);
+            font-size: 13px;
+          }
+
+          .tab.inactive {
+            background: var(--tab-bg);
+            color: var(--tab-inactive-fg);
+            border-top-color: transparent;
+          }
+
+          .breadcrumbs {
+            display: flex;
+            align-items: center;
+            gap: 7px;
+            padding: 0 18px;
+            color: var(--gutter-fg);
+            border-bottom: 1px solid color-mix(in srgb, var(--tab-border), transparent 20%);
+            font-size: 12px;
+          }
+
+          .editor {
+            position: relative;
+            overflow: hidden;
+            background: var(--editor-bg);
+            color: var(--editor-fg);
+            font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+            font-size: 18px;
+            line-height: 1.52;
+          }
+
+          .active-line {
+            position: absolute;
+            left: 0;
+            right: 0;
+            top: 0;
+            height: 28px;
+            background: var(--editor-line);
+            will-change: transform;
+          }
 
-It runs for 11 seconds at 1920×1080. Paste this into your composition:
+          .code {
+            position: relative;
+            padding: 20px 36px 18px 0;
+          }
 
-```html index.html
+          .line {
+            height: 28px;
+            display: grid;
+            grid-template-columns: 72px 1fr;
+            align-items: center;
+          }
+
+          .line-number {
+            padding-right: 18px;
+            color: var(--gutter-fg);
+            text-align: right;
+            user-select: none;
+          }
+
+          .line.is-active .line-number {
+            color: var(--gutter-active-fg);
+          }
+
+          .line-code {
+            white-space: pre;
+          }
+
+          .char {
+            opacity: 0;
+          }
+
+          .tok-comment {
+            color: var(--token-comment);
+          }
+          .tok-keyword {
+            color: var(--token-keyword);
+          }
+          .tok-function {
+            color: var(--token-function);
+          }
+          .tok-string {
+            color: var(--token-string);
+          }
+          .tok-number {
+            color: var(--token-number);
+          }
+          .tok-variable {
+            color: var(--token-variable);
+          }
+          .tok-parameter {
+            color: var(--token-parameter);
+          }
+          .tok-operator {
+            color: var(--token-operator);
+          }
+          .tok-punctuation {
+            color: var(--token-punctuation);
+          }
+          .tok-class-name {
+            color: var(--token-class-name);
+          }
+
+          .caret {
+            position: absolute;
+            left: 0;
+            top: 0;
+            z-index: 3;
+            display: block;
+            width: 2px;
+            height: 22px;
+            background: var(--editor-fg);
+            pointer-events: none;
+            will-change: transform, opacity;
+          }
+
+          .terminal {
+            display: grid;
+            grid-template-rows: 32px 1fr;
+            background: var(--panel-bg);
+            border-top: 1px solid var(--panel-border);
+            color: var(--editor-fg);
+            font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+            font-size: 14px;
+          }
+
+          .panel-tabs {
+            display: flex;
+            align-items: center;
+            gap: 22px;
+            padding: 0 18px;
+            border-bottom: 1px solid var(--panel-border);
+            color: var(--gutter-fg);
+            font-family:
+              Inter,
+              -apple-system,
+              BlinkMacSystemFont,
+              "Segoe UI",
+              sans-serif;
+            font-size: 12px;
+            text-transform: uppercase;
+          }
+
+          .panel-tabs .active {
+            color: var(--editor-fg);
+            border-bottom: 1px solid var(--activity-active);
+            height: 32px;
+            display: flex;
+            align-items: center;
+          }
+
+          .terminal-body {
+            padding: 12px 20px;
+            color: var(--editor-fg);
+            line-height: 1.8;
+          }
+
+          .prompt {
+            color: var(--token-function);
+          }
+
+          .statusbar {
+            grid-column: 1 / -1;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            background: var(--status-bg);
+            color: var(--status-fg);
+            border-top: 1px solid var(--status-border);
+            font-size: 12px;
+          }
+
+          .status-left,
+          .status-right {
+            display: flex;
+            align-items: center;
+            gap: 18px;
+            padding: 0 12px;
+          }
+
+          .remote {
+            align-self: stretch;
+            display: flex;
+            align-items: center;
+            padding: 0 12px;
+            margin-left: -12px;
+            background: var(--status-remote-bg, var(--activity-active));
+            color: var(--status-remote-fg, #ffffff);
+          }
+
+          svg {
+            display: block;
+          }
+        </style>
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (() => {
+            const codeLines = [
+              [{ text: "# A small functional toolkit", token: "comment" }],
+              [
+                { text: "def", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "pluck_deep", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "key", token: "parameter" },
+                { text: "):", token: "punctuation" },
+              ],
+              [
+                { text: "    ", token: "plain" },
+                { text: "return", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "obj", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "reduce", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "acc", token: "parameter" },
+                { text: ", ", token: "punctuation" },
+                { text: "k", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "acc", token: "variable" },
+                { text: "[", token: "punctuation" },
+                { text: "k", token: "variable" },
+                { text: "]", token: "punctuation" },
+                { text: ", ", token: "punctuation" },
+                { text: "key", token: "variable" },
+                { text: ".split", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "'.'", token: "string" },
+                { text: "), ", token: "punctuation" },
+                { text: "obj", token: "variable" },
+                { text: ")", token: "punctuation" },
+              ],
+              [],
+              [
+                { text: "def", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "compose", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "*", token: "operator" },
+                { text: "fns", token: "parameter" },
+                { text: "):", token: "punctuation" },
+              ],
+              [
+                { text: "    ", token: "plain" },
+                { text: "return", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "res", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "reduce", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "acc", token: "parameter" },
+                { text: ", ", token: "punctuation" },
+                { text: "fn", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "fn", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "acc", token: "variable" },
+                { text: "), ", token: "punctuation" },
+                { text: "fns", token: "variable" },
+                { text: ", ", token: "punctuation" },
+                { text: "res", token: "variable" },
+                { text: ")", token: "punctuation" },
+              ],
+              [],
+              [
+                { text: "def", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "unfold", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "f", token: "parameter" },
+                { text: ", ", token: "punctuation" },
+                { text: "seed", token: "parameter" },
+                { text: "):", token: "punctuation" },
+              ],
+              [
+                { text: "    ", token: "plain" },
+                { text: '"""Build a list by repeatedly applying f to a seed."""', token: "string" },
+              ],
+              [
+                { text: "    acc", token: "variable" },
+                { text: " = ", token: "operator" },
+                { text: "[]", token: "punctuation" },
+              ],
+              [
+                { text: "    while", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "True", token: "className" },
+                { text: ":", token: "punctuation" },
+              ],
+              [
+                { text: "        result", token: "variable" },
+                { text: " = ", token: "operator" },
+                { text: "f", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "seed", token: "variable" },
+                { text: ")", token: "punctuation" },
+              ],
+              [
+                { text: "        if", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "result", token: "variable" },
+                { text: " is ", token: "keyword" },
+                { text: "None", token: "className" },
+                { text: ":", token: "punctuation" },
+              ],
+              [
+                { text: "            return", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "acc", token: "variable" },
+              ],
+              [
+                { text: "        acc", token: "variable" },
+                { text: ".append", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "result", token: "variable" },
+                { text: "[", token: "punctuation" },
+                { text: "0", token: "number" },
+                { text: "])", token: "punctuation" },
+              ],
+              [
+                { text: "        seed", token: "variable" },
+                { text: " = ", token: "operator" },
+                { text: "result", token: "variable" },
+                { text: "[", token: "punctuation" },
+                { text: "1", token: "number" },
+                { text: "]", token: "punctuation" },
+              ],
+              [],
+            ];
+
+            const fallback = {
+              "activityBar.background": "#181818",
+              "activityBar.foreground": "#d7d7d7",
+              "activityBar.inactiveForeground": "#868686",
+              "activityBar.activeBorder": "#0078d4",
+              "sideBar.background": "#181818",
+              "sideBar.foreground": "#cccccc",
+              "sideBar.border": "#2b2b2b",
+              "tab.activeBackground": "#1f1f1f",
+              "tab.activeForeground": "#ffffff",
+              "tab.inactiveBackground": "#181818",
+              "tab.inactiveForeground": "#9d9d9d",
+              "tab.border": "#2b2b2b",
+              "editor.background": "#1f1f1f",
+              "editor.foreground": "#cccccc",
+              "editor.lineHighlightBackground": "#ffffff0a",
+              "editorLineNumber.foreground": "#6e7681",
+              "editorLineNumber.activeForeground": "#cccccc",
+              "panel.background": "#181818",
+              "panel.border": "#2b2b2b",
+              "statusBar.background": "#181818",
+              "statusBar.foreground": "#cccccc",
+              "statusBar.border": "#2b2b2b",
+              "titleBar.activeBackground": "#181818",
+              "titleBar.activeForeground": "#cccccc",
+            };
+
+            function color(theme, key) {
+              return theme.colors[key] || fallback[key] || theme.colors.foreground || "#cccccc";
+            }
+
+            function solarizedGrey(theme) {
+              return (
+                theme.colors["tab.inactiveForeground"] ||
+                theme.colors["editor.foreground"] ||
+                "#586E75"
+              );
+            }
+
+            function setVar(root, name, value) {
+              root.style.setProperty(name, value);
+            }
+
+            function applyTheme(root, theme) {
+              const solarizedUiGrey = theme.id === "solarized-light" ? solarizedGrey(theme) : null;
+              setVar(root, "--activity-bg", color(theme, "activityBar.background"));
+              setVar(
+                root,
+                "--activity-fg",
+                solarizedUiGrey || color(theme, "activityBar.foreground"),
+              );
+              setVar(
+                root,
+                "--activity-muted",
+                solarizedUiGrey || color(theme, "activityBar.inactiveForeground"),
+              );
+              setVar(root, "--activity-active", color(theme, "activityBar.activeBorder"));
+              setVar(root, "--sidebar-bg", color(theme, "sideBar.background"));
+              setVar(root, "--sidebar-fg", solarizedUiGrey || color(theme, "sideBar.foreground"));
+              setVar(root, "--sidebar-border", color(theme, "sideBar.border"));
+              setVar(root, "--tab-bg", color(theme, "tab.inactiveBackground"));
+              setVar(root, "--tab-active-bg", color(theme, "tab.activeBackground"));
+              setVar(
+                root,
+                "--tab-active-fg",
+                solarizedUiGrey || color(theme, "tab.activeForeground"),
+              );
+              setVar(
+                root,
+                "--tab-inactive-fg",
+                solarizedUiGrey || color(theme, "tab.inactiveForeground"),
+              );
+              setVar(root, "--tab-border", color(theme, "tab.border"));
+              setVar(root, "--editor-bg", color(theme, "editor.background"));
+              setVar(root, "--editor-fg", color(theme, "editor.foreground"));
+              setVar(root, "--editor-line", color(theme, "editor.lineHighlightBackground"));
+              setVar(root, "--gutter-fg", color(theme, "editorLineNumber.foreground"));
+              setVar(root, "--gutter-active-fg", color(theme, "editorLineNumber.activeForeground"));
+              setVar(root, "--panel-bg", color(theme, "panel.background"));
+              setVar(root, "--panel-border", color(theme, "panel.border"));
+              setVar(root, "--status-bg", color(theme, "statusBar.background"));
+              setVar(root, "--status-fg", color(theme, "statusBar.foreground"));
+              setVar(root, "--status-border", color(theme, "statusBar.border"));
+              setVar(root, "--status-remote-bg", color(theme, "statusBarItem.remoteBackground"));
+              setVar(
+                root,
+                "--status-remote-fg",
+                solarizedUiGrey || color(theme, "statusBarItem.remoteForeground"),
+              );
+              setVar(root, "--title-bg", color(theme, "titleBar.activeBackground"));
+              setVar(
+                root,
+                "--title-fg",
+                solarizedUiGrey || color(theme, "titleBar.activeForeground"),
+              );
+              setVar(root, "--token-comment", theme.tokens.comment);
+              setVar(root, "--token-keyword", theme.tokens.keyword);
+              setVar(root, "--token-function", theme.tokens.function);
+              setVar(root, "--token-string", theme.tokens.string);
+              setVar(root, "--token-number", theme.tokens.number);
+              setVar(root, "--token-variable", theme.tokens.variable);
+              setVar(root, "--token-parameter", theme.tokens.parameter);
+              setVar(root, "--token-operator", theme.tokens.operator);
+              setVar(root, "--token-punctuation", theme.tokens.punctuation);
+              setVar(root, "--token-class-name", theme.tokens.className);
+            }
+
+            function renderCode(root) {
+              const code = root.querySelector(".code");
+              codeLines.forEach((segments, index) => {
+                const line = document.createElement("div");
+                line.className = "line";
+                line.dataset.lineIndex = String(index);
+
+                const lineNumber = document.createElement("span");
+                lineNumber.className = "line-number";
+                lineNumber.textContent = String(index + 1);
+                line.appendChild(lineNumber);
+
+                const lineCode = document.createElement("span");
+                lineCode.className = "line-code";
+                segments.forEach((segment) => {
+                  [...segment.text].forEach((char) => {
+                    const span = document.createElement("span");
+                    span.className =
+                      segment.token === "plain"
+                        ? "char"
+                        : "char tok-" +
+                          segment.token.replace(/[A-Z]/g, (match) => "-" + match.toLowerCase());
+                    span.dataset.lineIndex = String(index);
+                    span.textContent = char;
+                    lineCode.appendChild(span);
+                  });
+                });
+                line.appendChild(lineCode);
+                code.appendChild(line);
+              });
+
+              const caret = document.createElement("span");
+              caret.className = "caret";
+              root.querySelector(".editor").appendChild(caret);
+            }
+
+            function caretPointForElement(editor, el) {
+              const editorBox = editor.getBoundingClientRect();
+              const charBox = el.getBoundingClientRect();
+              return {
+                x: charBox.right - editorBox.left + 2,
+                y: charBox.top - editorBox.top + 3,
+              };
+            }
+
+            function caretPointForLineStart(editor, line) {
+              const editorBox = editor.getBoundingClientRect();
+              const lineBox = line.getBoundingClientRect();
+              const codeBox = line.querySelector(".line-code").getBoundingClientRect();
+              return {
+                x: codeBox.left - editorBox.left,
+                y: lineBox.top - editorBox.top + 3,
+              };
+            }
+
+            function lineHighlightY(editor, line) {
+              const editorBox = editor.getBoundingClientRect();
+              const lineBox = line.getBoundingClientRect();
+              return lineBox.top - editorBox.top;
+            }
+
+            function buildTimeline(root, compositionId) {
+              const tl = gsap.timeline({ paused: true });
+              const editor = root.querySelector(".editor");
+              const caret = root.querySelector(".caret");
+              const activeLine = root.querySelector(".active-line");
+              const lineEls = gsap.utils.toArray(root.querySelectorAll(".line"));
+              const lineStartTimes = [];
+              const charSchedule = [];
+              let cursorTime = 0.95;
+
+              lineEls.forEach((line, lineIndex) => {
+                const lineChars = gsap.utils.toArray(line.querySelectorAll(".char"));
+                lineStartTimes[lineIndex] = cursorTime;
+                lineChars.forEach((char, charIndex) => {
+                  charSchedule.push({ char, time: cursorTime + charIndex * 0.012 });
+                });
+                cursorTime += Math.max(lineChars.length * 0.012, 0.08) + 0.045;
+              });
+
+              gsap.set(activeLine, { y: lineHighlightY(editor, lineEls[0]) });
+              gsap.set(caret, caretPointForLineStart(editor, lineEls[0]));
+
+              tl.from(
+                root.querySelector(".header"),
+                { y: 24, opacity: 0, duration: 0.45, ease: "power3.out" },
+                0,
+              );
+              tl.from(
+                root.querySelector(".workbench"),
+                { y: 42, opacity: 0, scale: 0.986, duration: 0.58, ease: "power3.out" },
+                0.1,
+              );
+              tl.from(activeLine, { opacity: 0, duration: 0.22, ease: "power2.out" }, 0.74);
+              lineStartTimes.forEach((time, lineIndex) => {
+                const line = lineEls[lineIndex];
+                tl.set(activeLine, { y: lineHighlightY(editor, line) }, time);
+                tl.set(caret, caretPointForLineStart(editor, line), time);
+                tl.call(
+                  () => {
+                    lineEls.forEach((item) => item.classList.toggle("is-active", item === line));
+                  },
+                  [],
+                  time,
+                );
+              });
+              charSchedule.forEach(({ char, time }) => {
+                tl.set(char, { opacity: 1 }, time);
+                tl.set(caret, caretPointForElement(editor, char), time + 0.002);
+              });
+              tl.to(
+                root.querySelector(".caret"),
+                { opacity: 0, duration: 0.34, repeat: 25, yoyo: true, ease: "steps(1)" },
+                0.95,
+              );
+              tl.from(
+                root.querySelector(".terminal"),
+                { y: 140, opacity: 0, duration: 0.56, ease: "power3.out" },
+                7.55,
+              );
+              tl.from(
+                root.querySelector(".terminal-body").children,
+                { opacity: 0, y: 8, duration: 0.24, stagger: 0.16, ease: "power2.out" },
+                8.05,
+              );
+              tl.to(
+                root.querySelector(".workbench"),
+                { rotateY: -10.5, z: 74, duration: 0.72, ease: "power2.inOut" },
+                9.35,
+              );
+              tl.to(
+                root.querySelector(".workbench"),
+                { rotateY: 0, z: 0, duration: 0.62, ease: "power2.inOut" },
+                10.08,
+              );
+
+              window.__timelines = window.__timelines || {};
+              window.__timelines[compositionId] = tl;
+
+              const previewTime = new URLSearchParams(window.location.search).get("t");
+              if (previewTime !== null) {
+                tl.time(Number(previewTime));
+              }
+            }
+
+            window.createVSCodeThemeComposition = (compositionId, themeOrId) => {
+              const root =
+                document.querySelector(
+                  '[data-composition-id="' + compositionId + '"] .vscode-theme-scene',
+                ) ||
+                document.querySelector(
+                  '.vscode-theme-scene[data-composition-id="' + compositionId + '"]',
+                ) ||
+                document.querySelector('[data-composition-id="' + compositionId + '"]');
+              const theme =
+                typeof themeOrId === "string"
+                  ? window.VSCODE_THEME_REGISTRY.find((item) => item.id === themeOrId)
+                  : themeOrId;
+              if (!root || !theme) return;
+              root.querySelector(".theme-label").textContent = theme.label;
+              root.querySelector(".theme-source").textContent = theme.sourceFile;
+              applyTheme(root, theme);
+              renderCode(root);
+              buildTimeline(root, compositionId);
+            };
+          })();
+        </script>
+        <script>
+          window.__timelines = window.__timelines || {};
+          window.__timelines["vscode-visual-studio-light"] =
+            window.__timelines["vscode-visual-studio-light"] || gsap.timeline({ paused: true });
+          window.createVSCodeThemeComposition("vscode-visual-studio-light", {
+            id: "visual-studio-light",
+            label: "Visual Studio Light",
+            sourceFile: "light_vs.json",
+            uiTheme: "vs",
+            colors: {
+              "editor.background": "#FFFFFF",
+              "editor.foreground": "#000000",
+              "sideBarSectionHeader.background": "#0000",
+              "sideBarSectionHeader.border": "#61616130",
+              "sideBarTitle.foreground": "#6F6F6F",
+              "statusBarItem.remoteBackground": "#16825D",
+              "statusBarItem.remoteForeground": "#FFF",
+            },
+            tokens: {
+              comment: "#008000",
+              keyword: "#000000",
+              function: "#0451a5",
+              string: "#811f3f",
+              number: "#098658",
+              variable: "#0000ff",
+              parameter: "#9CDCFE",
+              operator: "#0000ff",
+              punctuation: "#800000",
+              className: "#0451a5",
+            },
+          });
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
 <div
   data-composition-id="code-snippet-visual-studio-light"
   data-composition-src="compositions/code-snippet-visual-studio-light.html"
@@ -29,8 +1093,13 @@ It runs for 11 seconds at 1920×1080. Paste this into your composition:
 ></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.
+## Features
+
+- Full VS Code workbench recreation — activity bar, sidebar, explorer tree, editor tabs, breadcrumbs, terminal panel, status bar
+- Per-character typing animation with cursor tracking and active line highlight
+- Colors sourced from official `microsoft/vscode` built-in theme JSON
+- 3D perspective tilt at the end of the typing sequence
+- Terminal panel with mock test output
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/code-typing.mdx b/docs/catalog/blocks/code-typing.mdx
index 726ea5c6c6..3f3e51217d 100644
--- a/docs/catalog/blocks/code-typing.mdx
+++ b/docs/catalog/blocks/code-typing.mdx
@@ -3,34 +3,795 @@ title: "Code Typing"
 description: "Token-streamed typing reveal with a caret that tracks the frontier — deterministic, no CSS animation."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-typing.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-typing.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/code-typing.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Code Typing preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add code-typing
-```
+<InstallCommand command="npx hyperframes add code-typing" />
 
 That writes one file: `compositions/code-typing.html`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`code-typing.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Code Typing</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #05070b;
+      }
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        font-family: "JetBrains Mono", monospace;
+        color: #e6edf3;
+      }
+      .bg-field {
+        position: absolute;
+        inset: 0;
+        background: radial-gradient(1200px 700px at 50% 18%, #0e1726 0%, #070b12 55%, #05070b 100%);
+      }
+      .bg-grid {
+        position: absolute;
+        inset: 0;
+        background-image:
+          linear-gradient(rgba(88, 166, 255, 0.05) 1px, transparent 1px),
+          linear-gradient(90deg, rgba(88, 166, 255, 0.05) 1px, transparent 1px);
+        background-size: 64px 64px;
+        mask-image: radial-gradient(1100px 620px at 50% 42%, #000 0%, transparent 78%);
+      }
+      .bg-glow {
+        position: absolute;
+        width: 900px;
+        height: 900px;
+        border-radius: 50%;
+        filter: blur(120px);
+        opacity: 0.5;
+      }
+      .bg-glow.a {
+        background: #1f6feb55;
+        left: -180px;
+        top: -200px;
+      }
+      .bg-glow.b {
+        background: #2ea04355;
+        right: -200px;
+        bottom: -260px;
+      }
+      .editor {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        width: 1380px;
+        height: 800px;
+        background: #0b0f17;
+        border: 1px solid #1d2733;
+        border-radius: 16px;
+        box-shadow:
+          0 40px 120px rgba(0, 0, 0, 0.6),
+          0 2px 0 rgba(255, 255, 255, 0.03) inset;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+      }
+      .titlebar {
+        height: 56px;
+        flex: 0 0 56px;
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        padding: 0 22px;
+        background: linear-gradient(#11161f, #0c111a);
+        border-bottom: 1px solid #1b2430;
+      }
+      .dots {
+        display: flex;
+        gap: 10px;
+      }
+      .dot {
+        width: 14px;
+        height: 14px;
+        border-radius: 50%;
+      }
+      .dot.r {
+        background: #ff5f57;
+      }
+      .dot.y {
+        background: #febc2e;
+      }
+      .dot.g {
+        background: #28c840;
+      }
+      .filename {
+        font-size: 19px;
+        color: #8b98a9;
+        letter-spacing: 0.2px;
+      }
+      .filename .accent {
+        color: #d6e2f0;
+      }
+      .code-surface {
+        position: relative;
+        flex: 1 1 auto;
+        overflow: hidden;
+      }
+      .scene {
+        position: absolute;
+        inset: 0;
+        opacity: 0;
+        will-change: opacity;
+      }
+      .code {
+        position: absolute;
+        top: 38px;
+        left: 0;
+        right: 0;
+        padding: 0 44px 0 104px;
+        font-size: 30px;
+        line-height: 46px;
+        font-variant-ligatures: none;
+        tab-size: 2;
+      }
+      .gutter {
+        position: absolute;
+        top: 38px;
+        left: 0;
+        width: 84px;
+        padding-right: 18px;
+        font-size: 30px;
+        line-height: 46px;
+        text-align: right;
+        color: #828c9b;
+        user-select: none;
+      }
+      .ln {
+        display: block;
+        height: 46px;
+      }
+      .line {
+        display: block;
+        min-height: 46px;
+        white-space: pre;
+        position: relative;
+        z-index: 1;
+      }
+      .tok {
+        display: inline-block;
+        white-space: pre;
+        will-change: transform, opacity;
+      }
+      .caret {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 3px;
+        height: 32px;
+        margin-top: 6px;
+        background: #58a6ff;
+        border-radius: 1px;
+        z-index: 3;
+      }
+      .hl-box {
+        position: absolute;
+        background: rgba(88, 166, 255, 0.16);
+        border-left: 3px solid #58a6ff;
+        border-radius: 6px;
+        z-index: 0;
+        overflow: hidden;
+      }
+      .diff-line {
+        display: block;
+        min-height: 0;
+        line-height: 46px;
+        white-space: pre;
+        position: relative;
+        overflow: hidden;
+        padding-left: 14px;
+      }
+      .diff-sign {
+        display: inline-block;
+        width: 22px;
+        color: #41506220;
+      }
+      .diff-del {
+        background: rgba(248, 81, 73, 0.12);
+        box-shadow: inset 3px 0 #f85149;
+      }
+      .diff-add {
+        background: rgba(63, 185, 80, 0.12);
+        box-shadow: inset 3px 0 #3fb950;
+      }
+      .diff-del .diff-sign {
+        color: #f85149;
+      }
+      .diff-add .diff-sign {
+        color: #3fb950;
+      }
+      .flight-block {
+        position: absolute;
+        white-space: pre;
+        font-size: 27px;
+        line-height: 40px;
+        padding: 11px 22px;
+        border-radius: 11px;
+        background: #0f1722;
+        border: 1px solid #233044;
+        box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5);
+        will-change: transform, opacity;
+      }
+      .flight-target {
+        position: absolute;
+        border: 1.5px dashed #2a3a4f;
+        border-radius: 14px;
+        opacity: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="code-typing"
+      data-start="0"
+      data-duration="5"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="bg-field" data-layout-ignore></div>
+      <div class="bg-grid" data-layout-ignore></div>
+      <div class="bg-glow a" data-layout-ignore></div>
+      <div class="bg-glow b" data-layout-ignore></div>
+      <div class="editor" id="editor" data-layout-ignore>
+        <div class="titlebar">
+          <div class="dots">
+            <span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
+          </div>
+          <span class="filename"><span class="accent">loadConfig.js</span> — Code Typing</span>
+        </div>
+        <div class="code-surface" id="surface"></div>
+      </div>
+    </div>
+    <script>
+      window.__TOKENS = {
+        feature: {
+          lang: "js",
+          theme: "github-dark",
+          bg: "#24292e",
+          fg: "#e1e4e8",
+          states: [
+            {
+              code: 'async function loadConfig(path) {\n  const raw = await readFile(path, "utf8")\n  const config = JSON.parse(raw)\n  return validate(config)\n}',
+              tokens: [
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-0",
+                  content: "async",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-1",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-2",
+                  content: "function",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-3",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-4",
+                  content: "loadConfig",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-5",
+                  content: "(",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-6",
+                  content: "path",
+                  color: "#FFAB70",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-7",
+                  content: ") {",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-8",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-9",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-10",
+                  content: "const",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-11",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-12",
+                  content: "raw",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-13",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-14",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-15",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-16",
+                  content: "await",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-17",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-18",
+                  content: "readFile",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-19",
+                  content: "(path,",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-20",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-21",
+                  content: '"utf8"',
+                  color: "#9ECBFF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-22",
+                  content: ")",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-23",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-24",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-25",
+                  content: "const",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-26",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-27",
+                  content: "config",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-28",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-29",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-30",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-31",
+                  content: "JSON",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-32",
+                  content: ".",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-33",
+                  content: "parse",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-34",
+                  content: "(raw)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-35",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-36",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-37",
+                  content: "return",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-38",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-39",
+                  content: "validate",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-40",
+                  content: "(config)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-41",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-42",
+                  content: "}",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-43",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+              ],
+            },
+          ],
+        },
+      };
+      window.__BLOCK = { id: "code-typing", effect: "typing", seq: "feature", duration: 5 };
+    </script>
+    <script>
+      // hf-code-anim.js — self-contained code-animation engine for HyperFrames registry blocks.
+      //
+      // Reuses Shiki Magic Move's baked output (window.__TOKENS, baked at author time) and
+      // drives the animation as a PAUSED GSAP timeline the HyperFrames engine seeks per frame —
+      // NOT CSS transitions (those break under non-sequential frame seeking). FLIP measurement
+      // runs once inside document.fonts.ready (glyph metrics must be final). Each block sets
+      // window.__BLOCK = { id, effect, seq, line?, duration } and includes this engine; the
+      // engine builds one scene that fills the composition and registers window.__timelines[id].
+      (function () {
+        "use strict";
+        var T = window.__TOKENS || {};
+
+        function lineDiv() {
+          var d = document.createElement("div");
+          d.className = "line";
+          return d;
+        }
+
+        // Render a code state's keyed tokens into codeEl as lines of inline-block .tok spans.
+        function renderState(codeEl, state) {
+          codeEl.textContent = "";
+          var keyToEl = new Map();
+          var line = lineDiv();
+          codeEl.appendChild(line);
+          for (var i = 0; i < state.tokens.length; i++) {
+            var t = state.tokens[i];
+            if (t.content === "\n") {
+              line = lineDiv();
+              codeEl.appendChild(line);
+              continue;
+            }
+            var span = document.createElement("span");
+            span.className = "tok";
+            span.textContent = t.content;
+            span.style.color = t.color;
+            if (t.fontStyle & 1) span.style.fontStyle = "italic";
+            if (t.fontStyle & 2) span.style.fontWeight = "700";
+            line.appendChild(span);
+            keyToEl.set(t.key, span);
+          }
+          var last = codeEl.lastChild;
+          if (last && last.className === "line" && last.children.length === 0)
+            codeEl.removeChild(last);
+          return keyToEl;
+        }
+
+        function rectsOf(keyToEl) {
+          var m = new Map();
+          keyToEl.forEach(function (el, k) {
+            var r = el.getBoundingClientRect();
+            m.set(k, { left: r.left, top: r.top });
+          });
+          return m;
+        }
+
+        function makeScene(surface, withGutter) {
+          var scene = document.createElement("div");
+          scene.className = "scene";
+          if (withGutter) {
+            var g = document.createElement("div");
+            g.className = "gutter";
+            scene.appendChild(g);
+          }
+          var code = document.createElement("div");
+          code.className = "code";
+          scene.appendChild(code);
+          surface.appendChild(scene);
+          return { scene: scene, code: code, gutter: scene.querySelector(".gutter") };
+        }
+
+        function fillGutter(g, n) {
+          var html = "";
+          for (var i = 1; i <= n; i++) html += '<span class="ln">' + i + "</span>";
+          g.innerHTML = html;
+        }
+
+        function splitLines(state) {
+          var lines = [{ text: "", tokens: [] }];
+          for (var i = 0; i < state.tokens.length; i++) {
+            var t = state.tokens[i];
+            if (t.content === "\n") {
+              lines.push({ text: "", tokens: [] });
+              continue;
+            }
+            var cur = lines[lines.length - 1];
+            cur.tokens.push(t);
+            cur.text += t.content;
+          }
+          if (lines.length && lines[lines.length - 1].tokens.length === 0) lines.pop();
+          return lines;
+        }
+
+        function lineDiff(a, b) {
+          var n = a.length;
+          var m = b.length;
+          var dp = [];
+          for (var i = 0; i <= n; i++) dp.push(new Array(m + 1).fill(0));
+          for (var i = n - 1; i >= 0; i--) {
+            for (var j = m - 1; j >= 0; j--) {
+              dp[i][j] =
+                a[i].text === b[j].text
+                  ? dp[i + 1][j + 1] + 1
+                  : Math.max(dp[i + 1][j], dp[i][j + 1]);
+            }
+          }
+          var ops = [];
+          var i = 0;
+          var j = 0;
+          while (i < n && j < m) {
+            if (a[i].text === b[j].text) {
+              ops.push({ type: "same", line: b[j] });
+              i++;
+              j++;
+            } else if (dp[i + 1][j] >= dp[i][j + 1]) {
+              ops.push({ type: "del", line: a[i] });
+              i++;
+            } else {
+              ops.push({ type: "add", line: b[j] });
+              j++;
+            }
+          }
+          while (i < n) ops.push({ type: "del", line: a[i++] });
+          while (j < m) ops.push({ type: "add", line: b[j++] });
+          return ops;
+        }
 
-It runs for 5 seconds at 1920×1080. Paste this into your composition:
+        // ---- single-scene effect builders (fade in, play, hold to end) -------------
+        var FADE = 0.45;
 
-```html index.html
-<div
-  data-composition-id="code-typing"
-  data-composition-src="compositions/code-typing.html"
-  data-start="0"
-  data-duration="5"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+        function typing(tl, surface, state, start) {
+          var PER = 0.028; // seconds per character — smooth, fast typewriter
+          var parts = makeScene(surface, true);
+          var code = parts.code;
+
+          // Per-CHARACTER render (granular reveal reads smoother than per-token pops).
+          code.textContent = "";
+          var line = document.createElement("div");
+          line.className = "line";
+          code.appendChild(line);
+          var chars = [];
+          for (var i = 0; i < state.tokens.length; i++) {
+            var t = state.tokens[i];
+            if (t.content === "\n") {
+              line = document.createElement("div");
+              line.className = "line";
+              code.appendChild(line);
+              continue;
+            }
+            for (var c = 0; c < t.content.length; c++) {
+              var span = document.createElement("span");
+              span.className = "tok";
+              span.textContent = t.content[c];
+              span.style.color = t.color;
+              if (t.fontStyle & 1) span.style.fontStyle = "italic";
+              if (t.fontStyle & 2) span.style.fontWeight = "700";
+              line.appendChild(span);
+              chars.push({ el: span, ws: t.content[c] === " " });
+            }
+          }
+          var last = code.lastChild;
+          if (last && last.className === "line" && last.children.length === 0)
+            code.removeChild(last);
+
+          fillGutter(parts.gutter, code.querySelectorAll(".line").length);
+          var base = code.getBoundingClientRect();
+          var caret = document.createElement("div");
+          caret.className = "caret";
+          code.appendChild(caret);
+
+          tl.set(parts.scene, { opacity: 0 }, 0);
+          tl.to(parts.scene, { opacity: 1, duration: FADE, ease: "power1.out" }, start);
+
+          var t0 = start + FADE;
+          if (chars.length) {
+            var r0 = chars[0].el.getBoundingClientRect();
+            tl.set(caret, { x: r0.left - base.left, y: r0.top - base.top, opacity: 1 }, 0);
+          }
+          chars.forEach(function (c, i) {
+            var at = t0 + i * PER;
+            tl.set(c.el, { opacity: 0 }, 0);
+            // soft per-char fade (overlaps neighbors → smooth wave); whitespace appears instantly
+            tl.to(c.el, { opacity: 1, duration: c.ws ? 0.01 : 0.12, ease: "power1.out" }, at);
+            // caret glides at constant speed to each char's right edge (linear = no stop-start jitter)
+            var r = c.el.getBoundingClientRect();
+            tl.to(
+              caret,
+              { x: r.right - base.left, y: r.top - base.top, duration: PER, ease: "none" },
+              at,
+            );
+          });
+        }
+
+        function buildEffect(tl, surface, spec) {
+          var start = 0.45;
+          var seq = T[spec.seq];
+          if (spec.effect === "typing") typing(tl, surface, seq.states[0], start);
+        }
+
+        function go() {
+          var spec = window.__BLOCK;
+          var surface = document.getElementById("surface");
+          var root = document.getElementById("root");
+          window.__timelines = window.__timelines || {};
+          var tl = gsap.timeline({ paused: true });
+          // Build inside fonts.ready (glyph metrics must be final), then register.
+          // Register ONLY after the timeline is fully built: the runtime's
+          // sub-composition readiness gate treats "key present" as "ready" and
+          // nests the child once. An empty timeline registered before this build
+          // would be nested empty and never re-nested → blank render when used as
+          // a sub-composition. See the contract in engine frameCapture.ts.
+          document.fonts.ready.then(function () {
+            tl.from("#editor", { opacity: 0, scale: 0.985, duration: 0.5, ease: "power2.out" }, 0);
+            buildEffect(tl, surface, spec);
+            var dur = parseFloat(root.dataset.duration) || tl.duration();
+            tl.to({}, { duration: dur }, 0); // pad to full composition length
+            window.__timelines["code-typing"] = tl; // register AFTER setup completes
+            if (typeof window.__hfForceTimelineRebind === "function") {
+              window.__hfForceTimelineRebind(); // re-nest now that we are populated
+            }
+          });
+        }
+
+        if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", go);
+        else go();
+      })();
+    </script>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="code-typing" data-composition-src="compositions/code-typing.html" data-start="0" data-duration="5" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/cosmic-orb.mdx b/docs/catalog/blocks/cosmic-orb.mdx
new file mode 100644
index 0000000000..31a0653ccb
--- /dev/null
+++ b/docs/catalog/blocks/cosmic-orb.mdx
@@ -0,0 +1,499 @@
+---
+title: "Cosmic Orb"
+description: "An iridescent soap-bubble planet: a slowly spinning sphere of nebula bands, dust lanes and twinkling stars wrapped in a refracting glass limb with chromatic aberration at the edge."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/blocks/cosmic-orb.html"
+  compositionId="cosmic-orb"
+  compositionSrc="compositions/cosmic-orb.html"
+  variables={[{"id":"hue","type":"number","label":"Nebula hue","default":268,"min":0,"max":360,"step":1,"unit":"deg"},{"id":"accent","type":"number","label":"Accent hue","default":196,"min":0,"max":360,"step":1,"unit":"deg"},{"id":"spin","type":"number","label":"Spin rate","default":0.035,"min":0,"max":0.5,"step":0.005,"unit":"turns/s"},{"id":"stars","type":"number","label":"Star density","default":1,"min":0,"max":2,"step":0.05},{"id":"glow","type":"number","label":"Glow intensity","default":1,"min":0,"max":2,"step":0.05},{"id":"size","type":"number","label":"Orb size","default":0.86,"min":0.2,"max":1.2,"step":0.01},{"id":"pulse","type":"number","label":"Beat pulse","default":0,"min":0,"max":1,"step":0.01},{"id":"pulseEnvelope","type":"string","label":"Beat pulse envelope (comma-separated 0-1 samples)","default":"","placeholder":"0,0.2,1,0.4,0"},{"id":"backdrop","type":"color","label":"Backdrop","default":"#04040a"}]}
+>
+
+```html cosmic-orb.html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Cosmic Orb</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #000;
+        overflow: hidden;
+      }
+      #co-root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #co-backdrop {
+        position: absolute;
+        inset: 0;
+        background: #04040a;
+      }
+      #co-canvas {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="co-root"
+      data-composition-id="cosmic-orb"
+      data-root="true"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="10"
+      data-composition-variables='[
+        {"id":"hue","type":"number","label":"Nebula hue","default":268,"min":0,"max":360,"step":1,"unit":"deg"},
+        {"id":"accent","type":"number","label":"Accent hue","default":196,"min":0,"max":360,"step":1,"unit":"deg"},
+        {"id":"spin","type":"number","label":"Spin rate","default":0.035,"min":0,"max":0.5,"step":0.005,"unit":"turns/s"},
+        {"id":"stars","type":"number","label":"Star density","default":1,"min":0,"max":2,"step":0.05},
+        {"id":"glow","type":"number","label":"Glow intensity","default":1,"min":0,"max":2,"step":0.05},
+        {"id":"size","type":"number","label":"Orb size","default":0.86,"min":0.2,"max":1.2,"step":0.01},
+        {"id":"pulse","type":"number","label":"Beat pulse","default":0,"min":0,"max":1,"step":0.01},
+        {"id":"pulseEnvelope","type":"string","label":"Beat pulse envelope (comma-separated 0-1 samples)","default":"","placeholder":"0,0.2,1,0.4,0"},
+        {"id":"backdrop","type":"color","label":"Backdrop","default":"#04040a"}
+      ]'
+    >
+      <div id="co-backdrop"></div>
+      <canvas id="co-canvas" width="1920" height="1080"></canvas>
+
+      <!-- Driver clip: gives HyperFrames a timed element to own on track 0. -->
+      <div
+        id="co-drv"
+        class="clip"
+        data-start="0"
+        data-duration="10"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+
+    <script>
+      (function () {
+        var DUR = 10;
+        var W = 1920;
+        var H = 1080;
+
+        var ROOT = document.getElementById("co-root");
+        var CS = getComputedStyle(ROOT);
+
+        // `data-composition-variables` is the single owner of every declared
+        // default — parse it rather than repeating each default a second time
+        // in JS. `window.__hyperframes` is NOT guaranteed to exist yet when this
+        // inline script runs, so it can only ever be an override, never the
+        // source. Precedence: host CSS custom property, runtime variable bag,
+        // declared default.
+        var DECL = {};
+        JSON.parse(ROOT.getAttribute("data-composition-variables") || "[]").forEach(function (v) {
+          DECL[v.id] = v.default;
+        });
+        var HF = window.__hyperframes;
+        var V = (HF && HF.getVariables && HF.getVariables()) || {};
+
+        function raw(id) {
+          var css = CS.getPropertyValue("--" + id.toLowerCase()).trim();
+          if (css !== "") return css;
+          if (V[id] !== undefined && V[id] !== "") return V[id];
+          return DECL[id];
+        }
+        function num(id) {
+          var n = parseFloat(raw(id));
+          return isFinite(n) ? n : 0;
+        }
+        function str(id) {
+          var s = raw(id);
+          return typeof s === "string" ? s.trim() : "";
+        }
+
+        var HUE = num("hue");
+        var ACCENT = num("accent");
+        var SPIN = num("spin");
+        var STARS = num("stars");
+        var GLOW = num("glow");
+        var SIZE = num("size");
+        var PULSE = num("pulse");
+        var BACKDROP = str("backdrop");
+
+        document.getElementById("co-backdrop").style.background = BACKDROP;
+
+        // Beat hook. A precomputed envelope (comma-separated 0-1 samples spread
+        // evenly across the clip) is sampled closed-form at time t — no audio
+        // analysis, no accumulator. Empty envelope => the flat `pulse` value.
+        var ENV = str("pulseEnvelope")
+          .split(",")
+          .map(function (s) {
+            return parseFloat(s);
+          })
+          .filter(function (n) {
+            return isFinite(n);
+          });
+
+        function pulseAt(t) {
+          if (ENV.length === 0) return PULSE;
+          if (ENV.length === 1) return ENV[0];
+          var x = Math.min(1, Math.max(0, t / DUR)) * (ENV.length - 1);
+          var i = Math.floor(x);
+          var j = Math.min(i + 1, ENV.length - 1);
+          return ENV[i] + (ENV[j] - ENV[i]) * (x - i);
+        }
+
+        var canvas = document.getElementById("co-canvas");
+        var gl =
+          canvas.getContext("webgl", {
+            alpha: true,
+            antialias: false,
+            depth: false,
+            stencil: false,
+            preserveDrawingBuffer: true,
+            powerPreference: "high-performance",
+          }) ||
+          canvas.getContext("experimental-webgl", {
+            alpha: true,
+            preserveDrawingBuffer: true,
+          });
+
+        var VERT = [
+          "attribute vec2 aPos;",
+          "void main() { gl_Position = vec4(aPos, 0.0, 1.0); }",
+        ].join("\n");
+
+        var FRAG = [
+          "precision highp float;",
+          "uniform vec2 uRes;",
+          "uniform float uTime;",
+          "uniform float uRadius;",
+          "uniform float uSpin;",
+          "uniform float uHue;",
+          "uniform float uAccent;",
+          "uniform float uStars;",
+          "uniform float uGlow;",
+          "uniform float uPulse;",
+          "const float TAU = 6.28318531;",
+          "",
+          "// One cheap hash for every random-looking thing in here.",
+          "float h1(float x) { return fract(sin(x * 127.1) * 43758.5453); }",
+          "float h2(vec2 p) { return h1(dot(p, vec2(1.0, 157.31))); }",
+          "",
+          "vec3 hue2rgb(float h) {",
+          "  return clamp(abs(mod(h * 6.0 + vec3(0.0, 4.0, 2.0), 6.0) - 3.0) - 1.0, 0.0, 1.0);",
+          "}",
+          "",
+          "vec3 rotX(vec3 p, float a) { float c = cos(a), s = sin(a); return vec3(p.x, c * p.y - s * p.z, s * p.y + c * p.z); }",
+          "vec3 rotY(vec3 p, float a) { float c = cos(a), s = sin(a); return vec3(c * p.x + s * p.z, p.y, -s * p.x + c * p.z); }",
+          "vec3 rotZ(vec3 p, float a) { float c = cos(a), s = sin(a); return vec3(c * p.x - s * p.y, s * p.x + c * p.y, p.z); }",
+          "",
+          "vec3 safeDir(vec3 v) {",
+          "  float l = dot(v, v);",
+          "  if (l < 1e-6) return vec3(0.0, 0.0, -1.0);",
+          "  return v * inversesqrt(l);",
+          "}",
+          "",
+          "// Fixed axial tilt, then spin about the tilted polar axis.",
+          "vec3 toBody(vec3 n, float spin) { return rotY(rotZ(rotX(n, -0.34), 0.42), -spin); }",
+          "vec2 lonlat(vec3 d) { return vec2(atan(d.x, d.z), asin(clamp(d.y, -1.0, 1.0))); }",
+          "",
+          "float dens(float base) { return clamp(1.0 - (1.0 - base) * uStars, 0.0, 1.0); }",
+          "",
+          "// One star size-class: cell grid, seeded jitter, soft round core.",
+          "float starField(vec2 q, float freq, float base, float rad) {",
+          "  vec2 g = q * freq;",
+          "  vec2 id = floor(g);",
+          "  float h = h2(id);",
+          "  if (h < dens(base)) return 0.0;",
+          "  vec2 c = vec2(h2(id + vec2(3.7, 1.3)), h2(id + vec2(9.1, 5.5)));",
+          "  float d = length(fract(g) - c);",
+          "  float core = smoothstep(rad, 0.0, d);",
+          "  // Twinkle: a per-star phase driven straight off uTime, no accumulator.",
+          "  float tw = 0.62 + 0.38 * sin(uTime * 2.4 + h * 53.7);",
+          "  return core * core * (0.45 + 0.55 * h1(h * 91.7)) * tw;",
+          "}",
+          "",
+          "// 4-point diffraction glare, only worth paying for on the brightest class.",
+          "float starGlare(vec2 q, float freq, float base) {",
+          "  vec2 g = q * freq;",
+          "  vec2 id = floor(g);",
+          "  float h = h2(id);",
+          "  if (h < dens(base)) return 0.0;",
+          "  vec2 c = vec2(h2(id + vec2(3.7, 1.3)), h2(id + vec2(9.1, 5.5)));",
+          "  vec2 dv = abs(fract(g) - c);",
+          "  float hx = exp(-dv.x * 70.0) * exp(-dv.y * 9.0);",
+          "  float hy = exp(-dv.y * 70.0) * exp(-dv.x * 9.0);",
+          "  return max(hx, hy) * 0.45;",
+          "}",
+          "",
+          "// Three size-classes at ~6 / 11 / 19 cell frequency.",
+          "float starsAll(vec2 q, float gain) {",
+          "  float s = starField(q, 6.0, 0.958, 0.20);",
+          "  s += starGlare(q, 6.0, 0.958);",
+          "  s += starField(q, 11.0, 0.920, 0.18) * 0.95;",
+          "  s += starField(q, 19.0, 0.865, 0.17) * 0.75;",
+          "  return s * gain;",
+          "}",
+          "",
+          "vec3 nebula(vec2 q) {",
+          "  // Two sin-field turbulence layers.",
+          "  float t1 = sin(q.x * 3.1 + sin(q.y * 2.7) * 1.9) * sin(q.y * 4.3 + sin(q.x * 1.7) * 2.3);",
+          "  float t2 = sin(q.x * 7.9 + sin(q.y * 5.1) * 1.3) * sin(q.y * 9.7 + sin(q.x * 4.4) * 1.1);",
+          "  float turb = t1 * 0.66 + t2 * 0.34;",
+          "",
+          "  // Galaxy bands, warped by the turbulence.",
+          "  float band = sin(q.y * 3.2 + turb * 1.7 + q.x * 0.55);",
+          "  float bands = pow(max(0.0, band * 0.5 + 0.5), 3.2);",
+          "",
+          "  // Dust lanes: broad darkened swathes, not a thin curve.",
+          "  float lane = sin(q.y * 2.9 + q.x * 1.3 + t1 * 1.6);",
+          "  float dust = 0.22 + 0.78 * smoothstep(-0.45, 0.75, lane);",
+          "",
+          "  // Core bulge.",
+          "  float dc = length(vec2((q.x - 0.55) * 0.5, (q.y + 0.12) * 1.1));",
+          "  float core = exp(-dc * dc * 2.6);",
+          "",
+          "  // Two pocket glows.",
+          "  float dA = length(vec2((q.x + 1.95) * 0.62, (q.y - 0.52) * 1.45));",
+          "  float dB = length(vec2((q.x - 2.35) * 0.55, (q.y + 0.78) * 1.30));",
+          "  float pA = exp(-dA * dA * 4.0);",
+          "  float pB = exp(-dB * dB * 5.0);",
+          "",
+          "  vec3 cNeb = hue2rgb(uHue / 360.0);",
+          "  vec3 cAcc = hue2rgb(uAccent / 360.0);",
+          "  vec3 cWarm = hue2rgb(uHue / 360.0 + 0.07);",
+          "",
+          "  vec3 col = mix(cNeb, cWarm, 0.5 + 0.5 * turb) * bands * dust * 0.17;",
+          "  col += mix(cNeb, vec3(1.0), 0.50) * core * dust * 0.13;",
+          "  col += mix(cAcc, vec3(1.0), 0.60) * pA * 0.30 * uGlow;",
+          "  col += mix(cNeb, vec3(1.0), 0.50) * pB * 0.24 * uGlow;",
+          "  return col;",
+          "}",
+          "",
+          "void main() {",
+          "  vec2 p = (gl_FragCoord.xy - uRes * 0.5) / uRadius;",
+          "  float r = length(p);",
+          "  float aa = 1.4 / uRadius;",
+          "  float spin = TAU * uSpin * uTime;",
+          "",
+          "  vec3 cNeb = hue2rgb(uHue / 360.0);",
+          "  vec3 cAcc = hue2rgb(uAccent / 360.0);",
+          "",
+          "  float mask = smoothstep(1.0 + aa, 1.0 - aa, r);",
+          "  float halo = exp(-max(0.0, r - 1.0) * 13.0) * (1.0 - mask);",
+          "",
+          "  vec3 body = vec3(0.0);",
+          "  if (mask > 0.001) {",
+          "    float rc = min(r, 1.0);",
+          "    // Analytic sphere: the normal falls straight out of z = sqrt(1 - r^2).",
+          "    float z = sqrt(max(0.0, 1.0 - rc * rc));",
+          "    vec3 N = vec3(p.x, p.y, z);",
+          "    vec2 q = lonlat(toBody(safeDir(N), spin));",
+          "",
+          "    float gain = 0.9 + 2.6 * uPulse;",
+          "    body = nebula(q);",
+          "    body += vec3(1.0) * starsAll(q, gain) * (0.95 + 0.15 * uGlow);",
+          "",
+          "    // Limb darkening.",
+          "    body *= mix(0.32, 1.0, pow(z, 0.5));",
+          "",
+          "    // Refract-sampled back layer, split per channel: the chromatic",
+          "    // aberration that reads as glass at the limb.",
+          "    vec3 I = vec3(0.0, 0.0, -1.0);",
+          "    vec3 dR = safeDir(refract(I, N, 1.0 / 1.09));",
+          "    vec3 dG = safeDir(refract(I, N, 1.0 / 1.13));",
+          "    vec3 dB = safeDir(refract(I, N, 1.0 / 1.17));",
+          "    vec2 qR = lonlat(toBody(dR, spin));",
+          "    vec2 qG = lonlat(toBody(dG, spin));",
+          "    vec2 qB = lonlat(toBody(dB, spin));",
+          "    vec3 back = vec3(starsAll(qR, gain), starsAll(qG, gain), starsAll(qB, gain));",
+          "    float fres = pow(1.0 - z, 1.8);",
+          "    body += back * fres * 2.2;",
+          "    body += nebula(qG) * fres * 0.8;",
+          "",
+          "    // Aurora sheen riding the glass shell.",
+          "    float ang = atan(p.y, p.x);",
+          "    float sheen = smoothstep(0.72, 0.99, r) * smoothstep(1.0, 0.90, r);",
+          "    float w = 0.5 + 0.5 * sin(ang * 2.0 + spin * 1.6);",
+          "    body += (mix(cNeb, cAcc, w) * 0.55 + vec3(0.16)) * sheen * 0.30 * uGlow;",
+          "",
+          "    // Three speculars, fixed in screen space: the key light does not spin.",
+          "    vec2 a1 = p - vec2(-0.34, 0.62);",
+          "    vec2 a2 = p - vec2(0.58, 0.60);",
+          "    vec2 a3 = p - vec2(0.24, -0.80);",
+          "    float sp = exp(-dot(a1, a1) * 30.0) * 0.30;",
+          "    sp += exp(-dot(a2, a2) * 150.0) * 0.80;",
+          "    sp += exp(-dot(a3, a3) * 70.0) * 0.30;",
+          "    body += vec3(1.0) * sp * (0.30 + 0.70 * pow(1.0 - z, 1.5)) * uGlow;",
+          "",
+          "    // Fresnel void glow hugging the inside of the rim.",
+          "    body += mix(cAcc, vec3(1.0), 0.4) * pow(1.0 - z, 6.0) * 0.30 * uGlow;",
+          "  }",
+          "",
+          "  vec3 haloCol = mix(cNeb, cAcc, 0.35);",
+          "  vec3 outCol = body * mask + haloCol * halo * 0.22 * uGlow;",
+          "  float outA = clamp(mask + halo * 0.16 * uGlow, 0.0, 1.0);",
+          "  gl_FragColor = vec4(clamp(outCol, 0.0, 4.0), outA);",
+          "}",
+        ].join("\n");
+
+        var uni = {};
+        var ready = false;
+
+        function compile(type, src) {
+          var sh = gl.createShader(type);
+          gl.shaderSource(sh, src);
+          gl.compileShader(sh);
+          if (!gl.getShaderParameter(sh, gl.COMPILE_STATUS)) {
+            throw new Error("cosmic-orb shader: " + gl.getShaderInfoLog(sh));
+          }
+          return sh;
+        }
+
+        if (gl) {
+          var prog = gl.createProgram();
+          gl.attachShader(prog, compile(gl.VERTEX_SHADER, VERT));
+          gl.attachShader(prog, compile(gl.FRAGMENT_SHADER, FRAG));
+          gl.linkProgram(prog);
+          if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {
+            throw new Error("cosmic-orb link: " + gl.getProgramInfoLog(prog));
+          }
+          gl.useProgram(prog);
+
+          var buf = gl.createBuffer();
+          gl.bindBuffer(gl.ARRAY_BUFFER, buf);
+          gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
+          var loc = gl.getAttribLocation(prog, "aPos");
+          gl.enableVertexAttribArray(loc);
+          gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0);
+
+          [
+            "uRes",
+            "uTime",
+            "uRadius",
+            "uSpin",
+            "uHue",
+            "uAccent",
+            "uStars",
+            "uGlow",
+            "uPulse",
+          ].forEach(function (n) {
+            uni[n] = gl.getUniformLocation(prog, n);
+          });
+
+          gl.viewport(0, 0, W, H);
+          gl.uniform2f(uni.uRes, W, H);
+          gl.uniform1f(uni.uRadius, (SIZE * H) / 2);
+          gl.uniform1f(uni.uSpin, SPIN);
+          gl.uniform1f(uni.uHue, HUE);
+          gl.uniform1f(uni.uAccent, ACCENT);
+          gl.uniform1f(uni.uStars, STARS);
+          gl.uniform1f(uni.uGlow, GLOW);
+          ready = true;
+        }
+
+        // Every frame is computed from t alone: spin is spin_rate * t, the
+        // pulse is sampled from the envelope at t. No accumulators, no clocks.
+        function draw(t) {
+          if (!ready) return;
+          gl.uniform1f(uni.uTime, t);
+          gl.uniform1f(uni.uPulse, pulseAt(t));
+          gl.clearColor(0, 0, 0, 0);
+          gl.clear(gl.COLOR_BUFFER_BIT);
+          gl.drawArrays(gl.TRIANGLES, 0, 3);
+          gl.flush();
+        }
+
+        window.__timelines = window.__timelines || {};
+        var tl = gsap.timeline({ paused: true });
+
+        // The canvas is repainted from a property SETTER, not from onUpdate:
+        // gsap's seek(t) suppresses events by default, so an onUpdate callback
+        // silently never fires on a scrub and the canvas freezes on frame 0.
+        // Tweened values are always written during render, suppressed or not,
+        // so this fires on every seek — and hands us the frame time directly.
+        var driver = { _t: 0 };
+        Object.defineProperty(driver, "t", {
+          get: function () {
+            return this._t;
+          },
+          set: function (v) {
+            this._t = v;
+            draw(v);
+          },
+        });
+        tl.to(driver, { t: DUR, duration: DUR, ease: "none" }, 0);
+        window.__timelines["cosmic-orb"] = tl;
+
+        draw(0);
+      })();
+    </script>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add cosmic-orb" />
+
+That writes one file: `compositions/cosmic-orb.html`.
+
+## Add it to your video
+
+It runs for 10 seconds at 1920×1080. Paste this into your composition:
+
+```html index.html
+<div
+  data-composition-id="cosmic-orb"
+  data-composition-src="compositions/cosmic-orb.html"
+  data-start="0"
+  data-duration="10"
+  data-track-index="1"
+  data-width="1920"
+  data-height="1080"
+></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.
+
+## Change how it looks
+
+Set these CSS variables on the block:
+
+- `--hue` — Nebula hue. Defaults to `268`.
+- `--accent` — Accent hue. Defaults to `196`.
+- `--spin` — Spin rate (turns per second). Defaults to `0.035`.
+- `--stars` — Star density. Defaults to `1`.
+- `--glow` — Glow intensity. Defaults to `1`.
+- `--size` — Orb size (fraction of frame height). Defaults to `0.86`.
+- `--pulse` — Beat pulse (0-1, flat value when no envelope is set). Defaults to `0`.
+- `--pulseenvelope` — Beat pulse envelope: comma-separated 0-1 samples spread evenly across the clip. Defaults to ``.
+- `--backdrop` — Backdrop. Defaults to `#04040a`.
+
+{/* hf:generated-footer */}
+
+Tagged `webgl` `shader` `background` `showcase` `3d`.
+
+## 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/cross-warp-morph.mdx b/docs/catalog/blocks/cross-warp-morph.mdx
index 8b3c32efb3..dbd2ee4b69 100644
--- a/docs/catalog/blocks/cross-warp-morph.mdx
+++ b/docs/catalog/blocks/cross-warp-morph.mdx
@@ -3,34 +3,409 @@ title: "Cross Warp Morph"
 description: "Shader transition with cross-warped morphing"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/cross-warp-morph.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/cross-warp-morph.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/cross-warp-morph.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Cross Warp Morph preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add cross-warp-morph
-```
+<InstallCommand command="npx hyperframes add cross-warp-morph" />
 
 That writes one file: `compositions/cross-warp-morph.html`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`cross-warp-morph.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      @import url("https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Bebas+Neue&family=JetBrains+Mono:wght@400;700&family=Lato:wght@400;700&display=block");
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <style>
+        [data-composition-id="main"] {
+          width: 1920px;
+          height: 1080px;
+          overflow: hidden;
+          position: relative;
+          background: #283618;
+        }
+
+        /* Blueprint grid */
+        .bp-grid {
+          position: absolute;
+          inset: 0;
+          background-image:
+            linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
+            linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
+          background-size: 40px 40px;
+          pointer-events: none;
+        }
+
+        /* Layout */
+        .bp-left {
+          position: absolute;
+          left: 0;
+          top: 0;
+          bottom: 0;
+          width: 1200px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .bp-right {
+          position: absolute;
+          right: 0;
+          top: 0;
+          bottom: 0;
+          width: 720px;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          padding: 60px 60px 60px 40px;
+        }
+        .bp-divider {
+          position: absolute;
+          left: 1200px;
+          top: 60px;
+          bottom: 60px;
+          width: 1px;
+          background: #a7c957;
+          opacity: 0.15;
+        }
+        .bp-number {
+          font-family: "Space Mono", monospace;
+          font-size: 14px;
+          font-weight: 700;
+          letter-spacing: 0.4em;
+          text-transform: uppercase;
+          position: absolute;
+          top: 40px;
+          left: 60px;
+          color: #a7c957;
+        }
+
+        /* Right panel typography */
+        .bp-name {
+          font-family: "Bebas Neue", sans-serif;
+          font-size: 38px;
+          letter-spacing: 0.08em;
+          margin-bottom: 20px;
+          color: #a7c957;
+        }
+        .bp-plabel {
+          font-family: "Space Mono", monospace;
+          font-size: 11px;
+          font-weight: 700;
+          letter-spacing: 0.3em;
+          text-transform: uppercase;
+          margin-bottom: 10px;
+          color: #a7c957;
+          opacity: 0.5;
+        }
+        .bp-prompt {
+          font-family: "JetBrains Mono", monospace;
+          font-size: 20px;
+          line-height: 1.6;
+          padding: 16px 20px;
+          border-radius: 6px;
+          margin-bottom: 20px;
+          color: #a7c957;
+          background: rgba(167, 201, 87, 0.06);
+          border: 1px solid rgba(167, 201, 87, 0.12);
+        }
+        .bp-desc {
+          font-family: "Lato", sans-serif;
+          font-size: 17px;
+          line-height: 1.6;
+          color: #8aaa9a;
+          opacity: 0.55;
+        }
+
+        /* GL scenes (hidden, just for texture capture) */
+        .scene {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1200px;
+          height: 1080px;
+          overflow: hidden;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .scene-label {
+          font-family: "Bebas Neue", sans-serif;
+          font-size: 140px;
+          letter-spacing: 0.06em;
+          opacity: 0.12;
+        }
+      </style>
+
+      <div class="bp-grid"></div>
+      <div class="bp-divider"></div>
+      <div class="bp-number">13 / 14</div>
+
+      <!-- GL demo scenes (captured as textures, then hidden) -->
+      <div id="s1" class="scene" style="background: #283618">
+        <div class="scene-label" style="color: #a7c957">SCENE A</div>
+      </div>
+      <div id="s2" class="scene" style="background: #a7c957; opacity: 0">
+        <div class="scene-label" style="color: #283618">SCENE B</div>
+      </div>
+
+      <!-- GL canvas (left panel only) -->
+      <canvas
+        id="gl-canvas"
+        width="1200"
+        height="1080"
+        style="
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1200px;
+          height: 1080px;
+          z-index: 10;
+          pointer-events: none;
+          display: none;
+        "
+      >
+      </canvas>
+
+      <!-- Right panel metadata -->
+      <div class="bp-right">
+        <div class="bp-name">Cross-Warp Morph</div>
+        <div class="bp-plabel">Prompt</div>
+        <div class="bp-prompt">"use cross-warp morph shader transition"</div>
+        <div class="bp-desc">
+          Both scenes displace along a shared FBM noise field in opposite directions. Noise-driven
+          blend boundary.
+        </div>
+      </div>
+
+      <div
+        id="driver"
+        class="clip"
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
 
-It runs for 4 seconds at 1920×1080. Paste this into your composition:
+    <script>
+      window.__timelines = window.__timelines || {};
+      var glCanvas = document.getElementById("gl-canvas");
+      var gl = glCanvas.getContext("webgl", { preserveDrawingBuffer: true });
+      if (!gl) {
+        console.warn("WebGL not available");
+        window.__timelines["main"] = gsap.timeline({ paused: true });
+      } else {
+        gl.viewport(0, 0, 1200, 1080);
+        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
+        var sceneTextures = {};
 
-```html index.html
-<div
-  data-composition-id="cross-warp-morph"
-  data-composition-src="compositions/cross-warp-morph.html"
-  data-start="0"
-  data-duration="4"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+        function captureScene(sceneId) {
+          var scene = document.getElementById(sceneId);
+          var origOpacity = scene.style.opacity;
+          var origZ = scene.style.zIndex;
+          scene.style.opacity = "1";
+          scene.style.zIndex = "999";
+          scene.offsetHeight;
+          var c = document.createElement("canvas");
+          c.width = 1200;
+          c.height = 1080;
+          var ctx = c.getContext("2d");
+          ctx.fillStyle = window.getComputedStyle(scene).backgroundColor;
+          ctx.fillRect(0, 0, 1200, 1080);
+          var sr = scene.getBoundingClientRect();
+          var els = scene.querySelectorAll("*");
+          for (var i = 0; i < els.length; i++) {
+            var el = els[i],
+              cs = window.getComputedStyle(el);
+            if (cs.display === "none" || cs.visibility === "hidden") continue;
+            var r = el.getBoundingClientRect();
+            if (r.width < 1 || r.height < 1) continue;
+            var x = r.left - sr.left,
+              y = r.top - sr.top,
+              w = r.width,
+              h = r.height;
+            ctx.save();
+            ctx.globalAlpha = parseFloat(cs.opacity) || 1;
+            var bg = cs.backgroundColor;
+            if (bg && bg !== "rgba(0, 0, 0, 0)" && bg !== "transparent") {
+              ctx.fillStyle = bg;
+              ctx.fillRect(x, y, w, h);
+            }
+            var hasChildEls = el.querySelector("div,span,img,video");
+            var text = "";
+            for (var j = 0; j < el.childNodes.length; j++)
+              if (el.childNodes[j].nodeType === 3) text += el.childNodes[j].textContent;
+            text = text.trim();
+            if (text && !hasChildEls) {
+              ctx.font = cs.fontWeight + " " + cs.fontSize + " " + cs.fontFamily;
+              ctx.fillStyle = cs.color;
+              if (cs.letterSpacing && cs.letterSpacing !== "normal")
+                ctx.letterSpacing = cs.letterSpacing;
+              ctx.textAlign = "center";
+              ctx.textBaseline = "middle";
+              ctx.fillText(text, x + w / 2, y + h / 2);
+            }
+            ctx.restore();
+          }
+          scene.style.opacity = origOpacity;
+          scene.style.zIndex = origZ;
+          var tex = gl.createTexture();
+          gl.bindTexture(gl.TEXTURE_2D, tex);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+          gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, c);
+          sceneTextures[sceneId] = tex;
+        }
+
+        var vertSrc =
+          "attribute vec2 a_pos; varying vec2 v_uv; void main(){" +
+          "v_uv=a_pos*0.5+0.5; v_uv.y=1.0-v_uv.y; gl_Position=vec4(a_pos,0,1);}";
+        var quadBuf = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);
+        gl.bufferData(
+          gl.ARRAY_BUFFER,
+          new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),
+          gl.STATIC_DRAW,
+        );
+        function compileShader(src, type) {
+          var s = gl.createShader(type);
+          gl.shaderSource(s, src);
+          gl.compileShader(s);
+          if (!gl.getShaderParameter(s, gl.COMPILE_STATUS))
+            console.error("Shader:", gl.getShaderInfoLog(s));
+          return s;
+        }
+        function mkProg(fragSrc) {
+          var p = gl.createProgram();
+          gl.attachShader(p, compileShader(vertSrc, gl.VERTEX_SHADER));
+          gl.attachShader(p, compileShader(fragSrc, gl.FRAGMENT_SHADER));
+          gl.linkProgram(p);
+          if (!gl.getProgramParameter(p, gl.LINK_STATUS))
+            console.error("Link:", gl.getProgramInfoLog(p));
+          return p;
+        }
+
+        var H =
+          "precision mediump float;" +
+          "varying vec2 v_uv;" +
+          "uniform sampler2D u_from, u_to;" +
+          "uniform float u_progress;" +
+          "uniform vec2 u_resolution;\n";
+
+        var NQ =
+          "float hash(vec2 p){return fract(sin(dot(p,vec2(127.1,311.7)))*43758.5453);}" +
+          "float vnoise(vec2 p){vec2 i=floor(p),f=fract(p);" +
+          "f=f*f*f*(f*(f*6.-15.)+10.);" +
+          "return mix(mix(hash(i),hash(i+vec2(1,0)),f.x)," +
+          "mix(hash(i+vec2(0,1)),hash(i+vec2(1,1)),f.x),f.y);}" +
+          "float fbm(vec2 p){float v=0.,a=.5;" +
+          "mat2 R=mat2(.8,.6,-.6,.8);" +
+          "for(int i=0;i<5;i++){v+=a*vnoise(p);p=R*p*2.02;a*=.5;}return v;}";
+
+        var progPass = mkProg(H + "void main(){gl_FragColor=texture2D(u_from,v_uv);}");
+        var progTrans = mkProg(
+          H +
+            NQ +
+            "void main(){vec2 disp=vec2(fbm(v_uv*3.),fbm(v_uv*3.+vec2(7.3,3.7)))-.5;vec2 fromUv=clamp(v_uv+disp*u_progress*.5,0.,1.);vec2 toUv=clamp(v_uv-disp*(1.-u_progress)*.5,0.,1.);vec4 A=texture2D(u_from,fromUv);vec4 B=texture2D(u_to,toUv);float n=fbm(v_uv*4.+vec2(3.1,1.7));float blend=smoothstep(.4,.6,n+u_progress*1.2-.6);gl_FragColor=mix(A,B,blend);}",
+        );
+
+        function renderShader(prog, texFrom, texTo, progress) {
+          gl.useProgram(prog);
+          gl.activeTexture(gl.TEXTURE0);
+          gl.bindTexture(gl.TEXTURE_2D, texFrom);
+          gl.uniform1i(gl.getUniformLocation(prog, "u_from"), 0);
+          gl.activeTexture(gl.TEXTURE1);
+          gl.bindTexture(gl.TEXTURE_2D, texTo);
+          gl.uniform1i(gl.getUniformLocation(prog, "u_to"), 1);
+          gl.uniform1f(gl.getUniformLocation(prog, "u_progress"), progress);
+          gl.uniform2f(gl.getUniformLocation(prog, "u_resolution"), 1200, 1080);
+          var pos = gl.getAttribLocation(prog, "a_pos");
+          gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);
+          gl.enableVertexAttribArray(pos);
+          gl.vertexAttribPointer(pos, 2, gl.FLOAT, false, 0, 0);
+          gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+        }
+
+        function easeInOut(p) {
+          return p < 0.5 ? 2 * p * p : 1 - Math.pow(-2 * p + 2, 2) / 2;
+        }
+
+        captureScene("s1");
+        captureScene("s2");
+        glCanvas.style.display = "block";
+        renderShader(progPass, sceneTextures["s1"], sceneTextures["s1"], 0);
+        document.querySelectorAll(".scene").forEach(function (s) {
+          s.style.opacity = "0";
+        });
+
+        var tl = gsap.timeline({
+          paused: true,
+          onUpdate: function () {
+            var t = tl.time();
+            if (t >= 1.0 && t < 3.0) {
+              renderShader(
+                progTrans,
+                sceneTextures["s1"],
+                sceneTextures["s2"],
+                easeInOut((t - 1.0) / 2.0),
+              );
+            } else if (t >= 3.0) {
+              renderShader(progPass, sceneTextures["s2"], sceneTextures["s2"], 0);
+            } else {
+              renderShader(progPass, sceneTextures["s1"], sceneTextures["s1"], 0);
+            }
+          },
+        });
+        tl.to({ v: 0 }, { v: 1, duration: 4, ease: "none" }, 0);
+        window.__timelines["main"] = tl;
+      } // end if (gl)
+    </script>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="cross-warp-morph" data-composition-src="compositions/cross-warp-morph.html" data-start="0" data-duration="4" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/data-chart.mdx b/docs/catalog/blocks/data-chart.mdx
index 279fa08723..c6288c6482 100644
--- a/docs/catalog/blocks/data-chart.mdx
+++ b/docs/catalog/blocks/data-chart.mdx
@@ -3,41 +3,496 @@ title: "Data Chart"
 description: "Animated bar + line chart with staggered reveal, NYT-style typography, and value labels"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/data-chart.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/data-chart.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/data-chart.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Data Chart preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add data-chart
-```
+<InstallCommand command="npx hyperframes add data-chart" />
 
 That writes one file: `compositions/data-chart.html`.
 
-## Add it to your video
+## Change the colors
+
+Set these CSS variables on the block:
+
+- `--bg-color` — Background. Defaults to `#faf9f6`.
+- `--text-color` — Text color. Defaults to `#333333`.
+
+## Source
+
+<Accordion title={`data-chart.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Data Chart</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&family=Libre+Franklin:wght@300;400;600&display=block"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background-color: #faf9f6;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="data-chart"
+      data-composition-id="data-chart"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="15"
+    >
+      <div class="chart-container">
+        <!-- Header Section -->
+        <div class="header">
+          <h1 class="headline">Monthly Revenue vs. Conversion Rate</h1>
+          <p class="subtitle">Jan–Jun 2024, in thousands</p>
+          <div class="key">
+            <div class="key-item">
+              <div class="key-box revenue-box"></div>
+              <span class="key-text">Revenue</span>
+            </div>
+            <div class="key-item">
+              <div class="key-line conversion-line"></div>
+              <span class="key-text">Conversion Rate</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- SVG Chart Area -->
+        <svg class="chart-svg" viewBox="0 0 1600 700" preserveAspectRatio="xMidYMid meet">
+          <!-- Gridlines Group -->
+          <g class="gridlines"></g>
+
+          <!-- X-Axis Labels -->
+          <g class="x-axis-labels"></g>
+
+          <!-- Bars Group (Revenue) -->
+          <g class="bars-group"></g>
+
+          <!-- Bar Labels Group -->
+          <g class="bar-labels-group"></g>
+
+          <!-- Line Group (Conversion Rate) -->
+          <g class="line-group">
+            <path class="conversion-path" fill="none" stroke="#326FA8" stroke-width="1.5" />
+            <circle class="line-dot" r="5" fill="#326FA8" style="opacity: 0" />
+          </g>
+
+          <!-- Line Labels Group -->
+          <g class="line-labels-group"></g>
+
+          <!-- Baseline -->
+          <line x1="100" y1="600" x2="1500" y2="600" stroke="black" stroke-width="1" />
+        </svg>
+
+        <!-- Source Line -->
+        <div class="source">Source: Internal analytics</div>
+      </div>
+
+      <style>
+        [data-composition-id="data-chart"] {
+          width: 1920px;
+          height: 1080px;
+          background-color: #faf9f6;
+          font-family: "Libre Franklin", sans-serif;
+          color: #333;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          overflow: hidden;
+        }
+
+        [data-composition-id="data-chart"] .chart-container {
+          width: 1600px;
+          height: 900px;
+          display: flex;
+          flex-direction: column;
+          position: relative;
+          transform: scale(1.15);
+          transform-origin: center center;
+        }
+
+        [data-composition-id="data-chart"] .header {
+          margin-bottom: 40px;
+          text-align: left;
+        }
+
+        [data-composition-id="data-chart"] .headline {
+          font-family: "Libre Baskerville", serif;
+          font-size: 42px;
+          margin: 0;
+          padding: 0;
+          clip-path: inset(0 100% 0 0);
+          white-space: nowrap;
+        }
+
+        [data-composition-id="data-chart"] .subtitle {
+          font-size: 16px;
+          color: #666;
+          margin: 8px 0 16px 0;
+          clip-path: inset(0 100% 0 0);
+          white-space: nowrap;
+        }
+
+        [data-composition-id="data-chart"] .key {
+          display: flex;
+          gap: 24px;
+          opacity: 0;
+        }
+
+        [data-composition-id="data-chart"] .key-item {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+        }
+
+        [data-composition-id="data-chart"] .key-box {
+          width: 10px;
+          height: 10px;
+          background-color: #5c5c5c;
+        }
+
+        [data-composition-id="data-chart"] .key-line {
+          width: 16px;
+          height: 1.5px;
+          background-color: #326fa8;
+        }
+
+        [data-composition-id="data-chart"] .key-text {
+          font-size: 13px;
+          color: #666;
+        }
+
+        [data-composition-id="data-chart"] .chart-svg {
+          width: 100%;
+          height: 600px;
+          overflow: visible;
+        }
+
+        [data-composition-id="data-chart"] .source {
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          font-size: 11px;
+          color: #999;
+          opacity: 0;
+        }
+
+        [data-composition-id="data-chart"] .grid-line {
+          stroke: #e8e8e8;
+          stroke-width: 0.5px;
+          opacity: 0;
+        }
+
+        [data-composition-id="data-chart"] .axis-label {
+          font-size: 14px;
+          fill: #666;
+          text-anchor: middle;
+        }
+
+        [data-composition-id="data-chart"] .bar {
+          fill: #5c5c5c;
+        }
+
+        [data-composition-id="data-chart"] .bar-label {
+          font-size: 14px;
+          fill: #333;
+          text-anchor: middle;
+          opacity: 0;
+        }
+
+        [data-composition-id="data-chart"] .line-label {
+          font-size: 14px;
+          fill: #326fa8;
+          font-weight: 600;
+          text-anchor: middle;
+          opacity: 0;
+        }
+      </style>
 
-It runs for 15 seconds at 1920×1080. Paste this into your composition:
+      <script>
+        (function () {
+          const svg = document.querySelector('[data-composition-id="data-chart"] .chart-svg');
+          const tl = gsap.timeline({ paused: true });
 
-```html index.html
-<div
-  data-composition-id="data-chart"
-  data-composition-src="compositions/data-chart.html"
-  data-start="0"
-  data-duration="15"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+          // Data
+          const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"];
+          const revenueData = [8, 12, 15, 11, 18, 22];
+          const conversionData = [2.1, 2.8, 3.2, 2.9, 3.8, 4.2];
+
+          // Chart Dimensions
+          const chartWidth = 1400;
+          const chartHeight = 500;
+          const startX = 100;
+          const startY = 600;
+          const barWidth = 80;
+          const spacing = (chartWidth - barWidth * months.length) / (months.length + 1);
+
+          // Scales
+          const maxRevenue = 25;
+          const maxConversion = 5;
+
+          const getBarY = (val) => startY - (val / maxRevenue) * chartHeight;
+          const getLineY = (val) => startY - (val / maxConversion) * chartHeight;
+          const getX = (i) => startX + spacing + i * (barWidth + spacing) + barWidth / 2;
+
+          // Setup Elements
+          const gridGroup = svg.querySelector(".gridlines");
+          const xAxisGroup = svg.querySelector(".x-axis-labels");
+          const barsGroup = svg.querySelector(".bars-group");
+          const barLabelsGroup = svg.querySelector(".bar-labels-group");
+          const lineLabelsGroup = svg.querySelector(".line-labels-group");
+          const conversionPath = svg.querySelector(".conversion-path");
+          const lineDot = svg.querySelector(".line-dot");
+
+          // Create Gridlines
+          for (let i = 1; i <= 5; i++) {
+            const y = startY - i * (chartHeight / 5);
+            const line = document.createElementNS("http://www.w3.org/2000/svg", "line");
+            line.setAttribute("x1", startX);
+            line.setAttribute("y1", y);
+            line.setAttribute("x2", startX + chartWidth);
+            line.setAttribute("y2", y);
+            line.setAttribute("class", "grid-line");
+            gridGroup.appendChild(line);
+          }
+
+          // Create X-Axis Labels & Bars & Bar Labels
+          const linePoints = [];
+          months.forEach((month, i) => {
+            const x = getX(i);
+
+            const label = document.createElementNS("http://www.w3.org/2000/svg", "text");
+            label.setAttribute("x", x);
+            label.setAttribute("y", startY + 30);
+            label.setAttribute("class", "axis-label");
+            label.textContent = month;
+            xAxisGroup.appendChild(label);
+
+            const barHeight = (revenueData[i] / maxRevenue) * chartHeight;
+            const bar = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+            bar.setAttribute("x", x - barWidth / 2);
+            bar.setAttribute("y", startY);
+            bar.setAttribute("width", barWidth);
+            bar.setAttribute("height", 0);
+            bar.setAttribute("class", "bar");
+            barsGroup.appendChild(bar);
+
+            const barLabel = document.createElementNS("http://www.w3.org/2000/svg", "text");
+            barLabel.setAttribute("x", x);
+            barLabel.setAttribute("y", getBarY(revenueData[i]) - 10);
+            barLabel.setAttribute("class", "bar-label");
+            barLabel.textContent = `$${revenueData[i]}K`;
+            barLabelsGroup.appendChild(barLabel);
+
+            linePoints.push(`${x},${getLineY(conversionData[i])}`);
+
+            const lineLabel = document.createElementNS("http://www.w3.org/2000/svg", "text");
+            lineLabel.setAttribute("x", x);
+            lineLabel.setAttribute("y", getLineY(conversionData[i]) - 15);
+            lineLabel.setAttribute("class", "line-label");
+            lineLabel.textContent = `${conversionData[i]}%`;
+            lineLabelsGroup.appendChild(lineLabel);
+          });
+
+          // Set Path Data
+          conversionPath.setAttribute("d", `M ${linePoints.join(" L ")}`);
+          const pathLength = conversionPath.getTotalLength();
+          conversionPath.style.strokeDasharray = pathLength;
+          conversionPath.style.strokeDashoffset = pathLength;
+
+          // --- ANIMATION TIMELINE ---
+
+          tl.to(
+            '[data-composition-id="data-chart"] .headline',
+            {
+              clipPath: "inset(0 0% 0 0)",
+              duration: 1.2,
+              ease: "power1.inOut",
+            },
+            0,
+          );
+
+          tl.to(
+            '[data-composition-id="data-chart"] .subtitle',
+            {
+              clipPath: "inset(0 0% 0 0)",
+              duration: 1.2,
+              ease: "power1.inOut",
+            },
+            0.2,
+          );
+
+          tl.to(
+            '[data-composition-id="data-chart"] .key',
+            {
+              opacity: 1,
+              duration: 0.4,
+              ease: "power2.out",
+            },
+            1.0,
+          );
+
+          tl.to(
+            '[data-composition-id="data-chart"] .grid-line',
+            {
+              opacity: 1,
+              duration: 0.5,
+              stagger: 0.25,
+              ease: "power2.out",
+            },
+            0.5,
+          );
+
+          // Bars
+          const bars = barsGroup.querySelectorAll(".bar");
+          const barLabels = barLabelsGroup.querySelectorAll(".bar-label");
+
+          bars.forEach((bar, i) => {
+            const barHeight = (revenueData[i] / maxRevenue) * chartHeight;
+            const startTime = 1.5 + i * 0.5;
+
+            tl.to(
+              bar,
+              {
+                attr: { height: barHeight, y: startY - barHeight },
+                duration: 0.8,
+                ease: "power2.out",
+              },
+              startTime,
+            );
+
+            tl.to(
+              barLabels[i],
+              {
+                opacity: 1,
+                duration: 0.3,
+                ease: "power2.out",
+              },
+              startTime + 0.8,
+            );
+          });
+
+          // Line
+          const lastBarStartTime = 1.5 + (months.length - 1) * 0.5;
+          const lineStartTime = lastBarStartTime + 0.5;
+
+          tl.to(
+            conversionPath,
+            {
+              strokeDashoffset: 0,
+              duration: 3,
+              ease: "none",
+            },
+            lineStartTime,
+          );
+
+          // Line Dot & Labels
+          tl.set(
+            lineDot,
+            {
+              opacity: 1,
+              attr: { cx: getX(0), cy: getLineY(conversionData[0]) },
+            },
+            lineStartTime,
+          );
+
+          const lineLabels = lineLabelsGroup.querySelectorAll(".line-label");
+          months.forEach((_, i) => {
+            if (i > 0) {
+              const x = getX(i);
+              const y = getLineY(conversionData[i]);
+              tl.to(
+                lineDot,
+                {
+                  attr: { cx: x, cy: y },
+                  duration: 3 / (months.length - 1),
+                  ease: "none",
+                },
+                lineStartTime + ((i - 1) / (months.length - 1)) * 3,
+              );
+            }
+
+            const labelTime = lineStartTime + (i / (months.length - 1)) * 3 + 0.2;
+
+            lineLabels[i].textContent = "0.0%";
+
+            tl.to(
+              lineLabels[i],
+              {
+                opacity: 1,
+                duration: 0.1,
+                ease: "power2.out",
+              },
+              labelTime,
+            );
+
+            const dummy = { val: 0 };
+            tl.to(
+              dummy,
+              {
+                val: conversionData[i],
+                duration: 0.8,
+                ease: "power2.out",
+                onUpdate: () => {
+                  lineLabels[i].textContent = dummy.val.toFixed(1) + "%";
+                },
+              },
+              labelTime,
+            );
+          });
+
+          // Source Line
+          tl.to(
+            '[data-composition-id="data-chart"] .source',
+            {
+              opacity: 1,
+              duration: 0.5,
+              ease: "power2.out",
+            },
+            ">+0.5",
+          );
+
+          window.__timelines = window.__timelines || {};
+          window.__timelines["data-chart"] = tl;
+        })();
+      </script>
+    </div>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
 
-## Change the colors
+## Usage
 
-Set these CSS variables on the block:
+After installing, add the block to your host composition:
 
-- `--bg-color` — Background. Defaults to `#faf9f6`.
-- `--text-color` — Text color. Defaults to `#333333`.
+```html
+<div data-composition-id="data-chart" data-composition-src="compositions/data-chart.html" data-start="0" data-duration="15" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/domain-warp-dissolve.mdx b/docs/catalog/blocks/domain-warp-dissolve.mdx
index ed9e581995..0df99acffb 100644
--- a/docs/catalog/blocks/domain-warp-dissolve.mdx
+++ b/docs/catalog/blocks/domain-warp-dissolve.mdx
@@ -3,34 +3,412 @@ title: "Domain Warp Dissolve"
 description: "Shader transition with fractal noise domain warping"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/domain-warp-dissolve.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/domain-warp-dissolve.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/domain-warp-dissolve.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Domain Warp Dissolve preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add domain-warp-dissolve
-```
+<InstallCommand command="npx hyperframes add domain-warp-dissolve" />
 
 That writes one file: `compositions/domain-warp-dissolve.html`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`domain-warp-dissolve.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      @import url("https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Bebas+Neue&family=JetBrains+Mono:wght@400;700&family=Lato:wght@400;700&display=block");
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <style>
+        [data-composition-id="main"] {
+          width: 1920px;
+          height: 1080px;
+          overflow: hidden;
+          position: relative;
+          background: #0d1b2a;
+        }
+
+        /* Blueprint grid */
+        .bp-grid {
+          position: absolute;
+          inset: 0;
+          background-image:
+            linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
+            linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
+          background-size: 40px 40px;
+          pointer-events: none;
+        }
+
+        /* Layout */
+        .bp-left {
+          position: absolute;
+          left: 0;
+          top: 0;
+          bottom: 0;
+          width: 1200px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .bp-right {
+          position: absolute;
+          right: 0;
+          top: 0;
+          bottom: 0;
+          width: 720px;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          padding: 60px 60px 60px 40px;
+        }
+        .bp-divider {
+          position: absolute;
+          left: 1200px;
+          top: 60px;
+          bottom: 60px;
+          width: 1px;
+          background: #00f5d4;
+          opacity: 0.15;
+        }
+        .bp-number {
+          font-family: "Space Mono", monospace;
+          font-size: 14px;
+          font-weight: 700;
+          letter-spacing: 0.4em;
+          text-transform: uppercase;
+          position: absolute;
+          top: 40px;
+          left: 60px;
+          color: #00f5d4;
+        }
+
+        /* Right panel typography */
+        .bp-name {
+          font-family: "Bebas Neue", sans-serif;
+          font-size: 38px;
+          letter-spacing: 0.08em;
+          margin-bottom: 20px;
+          color: #00f5d4;
+        }
+        .bp-plabel {
+          font-family: "Space Mono", monospace;
+          font-size: 11px;
+          font-weight: 700;
+          letter-spacing: 0.3em;
+          text-transform: uppercase;
+          margin-bottom: 10px;
+          color: #00f5d4;
+          opacity: 0.5;
+        }
+        .bp-prompt {
+          font-family: "JetBrains Mono", monospace;
+          font-size: 20px;
+          line-height: 1.6;
+          padding: 16px 20px;
+          border-radius: 6px;
+          margin-bottom: 20px;
+          color: #00f5d4;
+          background: rgba(0, 245, 212, 0.06);
+          border: 1px solid rgba(0, 245, 212, 0.12);
+        }
+        .bp-desc {
+          font-family: "Lato", sans-serif;
+          font-size: 17px;
+          line-height: 1.6;
+          color: #8aa8c0;
+          opacity: 0.55;
+        }
+
+        /* GL scenes (hidden, just for texture capture) */
+        .scene {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1200px;
+          height: 1080px;
+          overflow: hidden;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .scene-label {
+          font-family: "Bebas Neue", sans-serif;
+          font-size: 140px;
+          letter-spacing: 0.06em;
+          opacity: 0.12;
+        }
+      </style>
+
+      <div class="bp-grid"></div>
+      <div class="bp-divider"></div>
+      <div class="bp-number">01 / 14</div>
+
+      <!-- GL demo scenes (captured as textures, then hidden) -->
+      <div id="s1" class="scene" style="background: #0d1b2a">
+        <div class="scene-label" style="color: #00f5d4">SCENE A</div>
+      </div>
+      <div id="s2" class="scene" style="background: #00f5d4; opacity: 0">
+        <div class="scene-label" style="color: #0d1b2a">SCENE B</div>
+      </div>
+
+      <!-- GL canvas (left panel only) -->
+      <canvas
+        id="gl-canvas"
+        width="1200"
+        height="1080"
+        style="
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1200px;
+          height: 1080px;
+          z-index: 10;
+          pointer-events: none;
+          display: none;
+        "
+      >
+      </canvas>
+
+      <!-- Right panel metadata -->
+      <div class="bp-right">
+        <div class="bp-name">Domain Warp Dissolve</div>
+        <div class="bp-plabel">Prompt</div>
+        <div class="bp-prompt">"use domain warp dissolve shader transition"</div>
+        <div class="bp-desc">
+          Cascaded fbm(p + fbm(p)) displaces both scenes along a warp field. Iridescent
+          cosine-palette edge glow.
+        </div>
+      </div>
+
+      <div
+        id="driver"
+        class="clip"
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
 
-It runs for 4 seconds at 1920×1080. Paste this into your composition:
+    <script>
+      window.__timelines = window.__timelines || {};
+      var glCanvas = document.getElementById("gl-canvas");
+      var gl = glCanvas.getContext("webgl", { preserveDrawingBuffer: true });
+      if (!gl) {
+        console.warn("WebGL not available");
+        window.__timelines["main"] = gsap.timeline({ paused: true });
+      } else {
+        gl.viewport(0, 0, 1200, 1080);
+        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
+        var sceneTextures = {};
 
-```html index.html
-<div
-  data-composition-id="domain-warp-dissolve"
-  data-composition-src="compositions/domain-warp-dissolve.html"
-  data-start="0"
-  data-duration="4"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+        function captureScene(sceneId) {
+          var scene = document.getElementById(sceneId);
+          var origOpacity = scene.style.opacity;
+          var origZ = scene.style.zIndex;
+          scene.style.opacity = "1";
+          scene.style.zIndex = "999";
+          scene.offsetHeight;
+          var c = document.createElement("canvas");
+          c.width = 1200;
+          c.height = 1080;
+          var ctx = c.getContext("2d");
+          ctx.fillStyle = window.getComputedStyle(scene).backgroundColor;
+          ctx.fillRect(0, 0, 1200, 1080);
+          var sr = scene.getBoundingClientRect();
+          var els = scene.querySelectorAll("*");
+          for (var i = 0; i < els.length; i++) {
+            var el = els[i],
+              cs = window.getComputedStyle(el);
+            if (cs.display === "none" || cs.visibility === "hidden") continue;
+            var r = el.getBoundingClientRect();
+            if (r.width < 1 || r.height < 1) continue;
+            var x = r.left - sr.left,
+              y = r.top - sr.top,
+              w = r.width,
+              h = r.height;
+            ctx.save();
+            ctx.globalAlpha = parseFloat(cs.opacity) || 1;
+            var bg = cs.backgroundColor;
+            if (bg && bg !== "rgba(0, 0, 0, 0)" && bg !== "transparent") {
+              ctx.fillStyle = bg;
+              ctx.fillRect(x, y, w, h);
+            }
+            var hasChildEls = el.querySelector("div,span,img,video");
+            var text = "";
+            for (var j = 0; j < el.childNodes.length; j++)
+              if (el.childNodes[j].nodeType === 3) text += el.childNodes[j].textContent;
+            text = text.trim();
+            if (text && !hasChildEls) {
+              ctx.font = cs.fontWeight + " " + cs.fontSize + " " + cs.fontFamily;
+              ctx.fillStyle = cs.color;
+              if (cs.letterSpacing && cs.letterSpacing !== "normal")
+                ctx.letterSpacing = cs.letterSpacing;
+              ctx.textAlign = "center";
+              ctx.textBaseline = "middle";
+              ctx.fillText(text, x + w / 2, y + h / 2);
+            }
+            ctx.restore();
+          }
+          scene.style.opacity = origOpacity;
+          scene.style.zIndex = origZ;
+          var tex = gl.createTexture();
+          gl.bindTexture(gl.TEXTURE_2D, tex);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+          gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, c);
+          sceneTextures[sceneId] = tex;
+        }
+
+        var vertSrc =
+          "attribute vec2 a_pos; varying vec2 v_uv; void main(){" +
+          "v_uv=a_pos*0.5+0.5; v_uv.y=1.0-v_uv.y; gl_Position=vec4(a_pos,0,1);}";
+        var quadBuf = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);
+        gl.bufferData(
+          gl.ARRAY_BUFFER,
+          new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),
+          gl.STATIC_DRAW,
+        );
+        function compileShader(src, type) {
+          var s = gl.createShader(type);
+          gl.shaderSource(s, src);
+          gl.compileShader(s);
+          if (!gl.getShaderParameter(s, gl.COMPILE_STATUS))
+            console.error("Shader:", gl.getShaderInfoLog(s));
+          return s;
+        }
+        function mkProg(fragSrc) {
+          var p = gl.createProgram();
+          gl.attachShader(p, compileShader(vertSrc, gl.VERTEX_SHADER));
+          gl.attachShader(p, compileShader(fragSrc, gl.FRAGMENT_SHADER));
+          gl.linkProgram(p);
+          if (!gl.getProgramParameter(p, gl.LINK_STATUS))
+            console.error("Link:", gl.getProgramInfoLog(p));
+          return p;
+        }
+
+        var H =
+          "precision mediump float;" +
+          "varying vec2 v_uv;" +
+          "uniform sampler2D u_from, u_to;" +
+          "uniform float u_progress;" +
+          "uniform vec2 u_resolution;\n";
+
+        var NQ =
+          "float hash(vec2 p){return fract(sin(dot(p,vec2(127.1,311.7)))*43758.5453);}" +
+          "float vnoise(vec2 p){vec2 i=floor(p),f=fract(p);" +
+          "f=f*f*f*(f*(f*6.-15.)+10.);" +
+          "return mix(mix(hash(i),hash(i+vec2(1,0)),f.x)," +
+          "mix(hash(i+vec2(0,1)),hash(i+vec2(1,1)),f.x),f.y);}" +
+          "float fbm(vec2 p){float v=0.,a=.5;" +
+          "mat2 R=mat2(.8,.6,-.6,.8);" +
+          "for(int i=0;i<5;i++){v+=a*vnoise(p);p=R*p*2.02;a*=.5;}return v;}";
+        var CP =
+          "vec3 palette(float t,vec3 a,vec3 b,vec3 c,vec3 d){" + "return a+b*cos(6.2832*(c*t+d));}";
+
+        var progPass = mkProg(H + "void main(){gl_FragColor=texture2D(u_from,v_uv);}");
+        var progTrans = mkProg(
+          H +
+            NQ +
+            CP +
+            "void main(){vec2 q=vec2(fbm(v_uv*3.),fbm(v_uv*3.+vec2(5.2,1.3)));vec2 r=vec2(fbm(v_uv*3.+q*4.+vec2(1.7,9.2)),fbm(v_uv*3.+q*4.+vec2(8.3,2.8)));float n=fbm(v_uv*3.+r*2.);vec2 warpDir=(q-.5)*.4;vec4 A=texture2D(u_from,clamp(v_uv+warpDir*u_progress,0.,1.));vec4 B=texture2D(u_to,clamp(v_uv-warpDir*(1.-u_progress),0.,1.));float e=smoothstep(u_progress-.08,u_progress+.08,n);float ed=abs(n-u_progress);float em=smoothstep(.1,0.,ed)*(1.-step(1.,u_progress));vec3 ec=palette(ed*8.,vec3(.5),vec3(.5),vec3(1.),vec3(0.,.33,.67));gl_FragColor=vec4(mix(B,A,e).rgb+ec*em*2.,1.);}",
+        );
+
+        function renderShader(prog, texFrom, texTo, progress) {
+          gl.useProgram(prog);
+          gl.activeTexture(gl.TEXTURE0);
+          gl.bindTexture(gl.TEXTURE_2D, texFrom);
+          gl.uniform1i(gl.getUniformLocation(prog, "u_from"), 0);
+          gl.activeTexture(gl.TEXTURE1);
+          gl.bindTexture(gl.TEXTURE_2D, texTo);
+          gl.uniform1i(gl.getUniformLocation(prog, "u_to"), 1);
+          gl.uniform1f(gl.getUniformLocation(prog, "u_progress"), progress);
+          gl.uniform2f(gl.getUniformLocation(prog, "u_resolution"), 1200, 1080);
+          var pos = gl.getAttribLocation(prog, "a_pos");
+          gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);
+          gl.enableVertexAttribArray(pos);
+          gl.vertexAttribPointer(pos, 2, gl.FLOAT, false, 0, 0);
+          gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+        }
+
+        function easeInOut(p) {
+          return p < 0.5 ? 2 * p * p : 1 - Math.pow(-2 * p + 2, 2) / 2;
+        }
+
+        captureScene("s1");
+        captureScene("s2");
+        glCanvas.style.display = "block";
+        renderShader(progPass, sceneTextures["s1"], sceneTextures["s1"], 0);
+        document.querySelectorAll(".scene").forEach(function (s) {
+          s.style.opacity = "0";
+        });
+
+        var tl = gsap.timeline({
+          paused: true,
+          onUpdate: function () {
+            var t = tl.time();
+            if (t >= 1.0 && t < 3.0) {
+              renderShader(
+                progTrans,
+                sceneTextures["s1"],
+                sceneTextures["s2"],
+                easeInOut((t - 1.0) / 2.0),
+              );
+            } else if (t >= 3.0) {
+              renderShader(progPass, sceneTextures["s2"], sceneTextures["s2"], 0);
+            } else {
+              renderShader(progPass, sceneTextures["s1"], sceneTextures["s1"], 0);
+            }
+          },
+        });
+        tl.to({ v: 0 }, { v: 1, duration: 4, ease: "none" }, 0);
+        window.__timelines["main"] = tl;
+      } // end if (gl)
+    </script>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="domain-warp-dissolve" data-composition-src="compositions/domain-warp-dissolve.html" data-start="0" data-duration="4" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/editorial-flash-overlay.mdx b/docs/catalog/blocks/editorial-flash-overlay.mdx
index d816ccc781..b8dd7ce02a 100644
--- a/docs/catalog/blocks/editorial-flash-overlay.mdx
+++ b/docs/catalog/blocks/editorial-flash-overlay.mdx
@@ -3,13 +3,13 @@ title: "Editorial Flash Overlay"
 description: "Finite neutral-warm light layers for a seek-safe camera-flash cut or social reveal"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/editorial-flash-overlay.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/editorial-flash-overlay.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/editorial-flash-overlay.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Editorial Flash Overlay preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add editorial-flash-overlay
-```
+<InstallCommand command="npx hyperframes add editorial-flash-overlay" />
 
 That writes one file: `compositions/editorial-flash-overlay.html`.
 
@@ -32,6 +32,144 @@ It runs for 4 seconds at 1920×1080. Paste this into your composition:
 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={`editorial-flash-overlay.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: transparent;
+      }
+
+      #ef-flash {
+        --hf-editorial-flash-wash: 255 253 250;
+        --hf-editorial-flash-warm: 255 174 105;
+        --hf-editorial-flash-cool: 183 218 255;
+        position: absolute;
+        inset: -12%;
+        overflow: hidden;
+        pointer-events: none;
+      }
+
+      #ef-flash .ef-layer {
+        position: absolute;
+        inset: 0;
+        opacity: 0;
+        will-change: opacity, transform;
+      }
+
+      #ef-wash {
+        background: rgb(var(--hf-editorial-flash-wash));
+      }
+
+      #ef-core {
+        inset: -18%;
+        background: radial-gradient(
+          ellipse 68% 92% at 37% 47%,
+          rgb(255 255 255) 0%,
+          rgb(255 255 255 / 98%) 20%,
+          rgb(var(--hf-editorial-flash-wash) / 86%) 45%,
+          rgb(var(--hf-editorial-flash-warm) / 32%) 67%,
+          transparent 86%
+        );
+        mix-blend-mode: screen;
+        transform-origin: 38% 48%;
+      }
+
+      #ef-sweep {
+        inset: -28%;
+        background: linear-gradient(
+          108deg,
+          transparent 21%,
+          rgb(var(--hf-editorial-flash-warm) / 10%) 38%,
+          rgb(var(--hf-editorial-flash-wash) / 90%) 49%,
+          rgb(255 255 255 / 98%) 53%,
+          rgb(var(--hf-editorial-flash-cool) / 24%) 62%,
+          transparent 79%
+        );
+        mix-blend-mode: screen;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="editorial-flash-overlay"
+      data-composition-id="editorial-flash-overlay"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="ef-flash" aria-hidden="true">
+        <div id="ef-wash" class="ef-layer"></div>
+        <div id="ef-core" class="ef-layer" data-layout-allow-overflow></div>
+        <div id="ef-sweep" class="ef-layer" data-layout-allow-overflow></div>
+      </div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      var flash = document.getElementById("ef-flash");
+      var host = flash && flash.closest("[data-composition-id]");
+      if (!host) throw new Error("Editorial Flash could not find its composition host");
+
+      var compositionId = host.getAttribute("data-composition-id");
+      var duration = Number(host.getAttribute("data-duration")) || 4;
+      var hit = Math.max(0.12, duration * 0.58);
+      var tl = gsap.timeline({ paused: true });
+
+      tl.to({}, { duration: duration, ease: "none" }, 0);
+      tl.to("#ef-wash", { opacity: 0.92, duration: 0.04, ease: "power4.in" }, hit);
+      tl.fromTo(
+        "#ef-core",
+        { opacity: 0, scale: 0.86, rotation: -5 },
+        { opacity: 1, scale: 1, rotation: -5, duration: 0.05, ease: "power4.in" },
+        hit - 0.01,
+      );
+      tl.fromTo(
+        "#ef-sweep",
+        { opacity: 0, xPercent: -12, rotation: -2 },
+        { opacity: 0.9, xPercent: 8, rotation: -2, duration: 0.04, ease: "power4.in" },
+        hit,
+      );
+      tl.to("#ef-wash", { opacity: 0, duration: 0.18, ease: "power3.out" }, hit + 0.04);
+      tl.to(
+        "#ef-core",
+        { opacity: 0, scale: 1.18, rotation: -5, duration: 0.34, ease: "power2.out" },
+        hit + 0.04,
+      );
+      tl.to(
+        "#ef-sweep",
+        { opacity: 0, xPercent: 28, rotation: -2, duration: 0.3, ease: "power2.out" },
+        hit + 0.04,
+      );
+
+      window.__timelines[compositionId] = tl;
+    </script>
+  </body>
+</html>
+```
+
+</Accordion>
+
 {/* hf:generated-footer */}
 
 Tagged `flash` `editorial` `social` `light` `transition` `overlay` `media-treatment-overlay`.
diff --git a/docs/catalog/blocks/flash-through-white.mdx b/docs/catalog/blocks/flash-through-white.mdx
index c10d69424f..8d05af0c10 100644
--- a/docs/catalog/blocks/flash-through-white.mdx
+++ b/docs/catalog/blocks/flash-through-white.mdx
@@ -3,34 +3,398 @@ title: "Flash Through White"
 description: "Shader transition with white flash crossfade"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flash-through-white.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flash-through-white.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/flash-through-white.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Flash Through White preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add flash-through-white
-```
+<InstallCommand command="npx hyperframes add flash-through-white" />
 
 That writes one file: `compositions/flash-through-white.html`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`flash-through-white.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      @import url("https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Bebas+Neue&family=JetBrains+Mono:wght@400;700&family=Lato:wght@400;700&display=block");
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <style>
+        [data-composition-id="main"] {
+          width: 1920px;
+          height: 1080px;
+          overflow: hidden;
+          position: relative;
+          background: #03071e;
+        }
+
+        /* Blueprint grid */
+        .bp-grid {
+          position: absolute;
+          inset: 0;
+          background-image:
+            linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
+            linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
+          background-size: 40px 40px;
+          pointer-events: none;
+        }
+
+        /* Layout */
+        .bp-left {
+          position: absolute;
+          left: 0;
+          top: 0;
+          bottom: 0;
+          width: 1200px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .bp-right {
+          position: absolute;
+          right: 0;
+          top: 0;
+          bottom: 0;
+          width: 720px;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          padding: 60px 60px 60px 40px;
+        }
+        .bp-divider {
+          position: absolute;
+          left: 1200px;
+          top: 60px;
+          bottom: 60px;
+          width: 1px;
+          background: #ffba08;
+          opacity: 0.15;
+        }
+        .bp-number {
+          font-family: "Space Mono", monospace;
+          font-size: 14px;
+          font-weight: 700;
+          letter-spacing: 0.4em;
+          text-transform: uppercase;
+          position: absolute;
+          top: 40px;
+          left: 60px;
+          color: #ffba08;
+        }
+
+        /* Right panel typography */
+        .bp-name {
+          font-family: "Bebas Neue", sans-serif;
+          font-size: 38px;
+          letter-spacing: 0.08em;
+          margin-bottom: 20px;
+          color: #ffba08;
+        }
+        .bp-plabel {
+          font-family: "Space Mono", monospace;
+          font-size: 11px;
+          font-weight: 700;
+          letter-spacing: 0.3em;
+          text-transform: uppercase;
+          margin-bottom: 10px;
+          color: #ffba08;
+          opacity: 0.5;
+        }
+        .bp-prompt {
+          font-family: "JetBrains Mono", monospace;
+          font-size: 20px;
+          line-height: 1.6;
+          padding: 16px 20px;
+          border-radius: 6px;
+          margin-bottom: 20px;
+          color: #ffba08;
+          background: rgba(255, 186, 8, 0.06);
+          border: 1px solid rgba(255, 186, 8, 0.12);
+        }
+        .bp-desc {
+          font-family: "Lato", sans-serif;
+          font-size: 17px;
+          line-height: 1.6;
+          color: #888;
+          opacity: 0.55;
+        }
+
+        /* GL scenes (hidden, just for texture capture) */
+        .scene {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1200px;
+          height: 1080px;
+          overflow: hidden;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .scene-label {
+          font-family: "Bebas Neue", sans-serif;
+          font-size: 140px;
+          letter-spacing: 0.06em;
+          opacity: 0.12;
+        }
+      </style>
+
+      <div class="bp-grid"></div>
+      <div class="bp-divider"></div>
+      <div class="bp-number">12 / 14</div>
+
+      <!-- GL demo scenes (captured as textures, then hidden) -->
+      <div id="s1" class="scene" style="background: #03071e">
+        <div class="scene-label" style="color: #ffba08">SCENE A</div>
+      </div>
+      <div id="s2" class="scene" style="background: #ffba08; opacity: 0">
+        <div class="scene-label" style="color: #03071e">SCENE B</div>
+      </div>
+
+      <!-- GL canvas (left panel only) -->
+      <canvas
+        id="gl-canvas"
+        width="1200"
+        height="1080"
+        style="
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1200px;
+          height: 1080px;
+          z-index: 10;
+          pointer-events: none;
+          display: none;
+        "
+      >
+      </canvas>
+
+      <!-- Right panel metadata -->
+      <div class="bp-right">
+        <div class="bp-name">Flash Through White</div>
+        <div class="bp-plabel">Prompt</div>
+        <div class="bp-prompt">"use flash through white shader transition"</div>
+        <div class="bp-desc">
+          Both scenes brighten to a white midpoint. Works on dark backgrounds where
+          color-dip-to-black is invisible.
+        </div>
+      </div>
 
-It runs for 4 seconds at 1920×1080. Paste this into your composition:
+      <div
+        id="driver"
+        class="clip"
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
 
-```html index.html
-<div
-  data-composition-id="flash-through-white"
-  data-composition-src="compositions/flash-through-white.html"
-  data-start="0"
-  data-duration="4"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      var glCanvas = document.getElementById("gl-canvas");
+      var gl = glCanvas.getContext("webgl", { preserveDrawingBuffer: true });
+      if (!gl) {
+        console.warn("WebGL not available");
+        window.__timelines["main"] = gsap.timeline({ paused: true });
+      } else {
+        gl.viewport(0, 0, 1200, 1080);
+        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
+        var sceneTextures = {};
+
+        function captureScene(sceneId) {
+          var scene = document.getElementById(sceneId);
+          var origOpacity = scene.style.opacity;
+          var origZ = scene.style.zIndex;
+          scene.style.opacity = "1";
+          scene.style.zIndex = "999";
+          scene.offsetHeight;
+          var c = document.createElement("canvas");
+          c.width = 1200;
+          c.height = 1080;
+          var ctx = c.getContext("2d");
+          ctx.fillStyle = window.getComputedStyle(scene).backgroundColor;
+          ctx.fillRect(0, 0, 1200, 1080);
+          var sr = scene.getBoundingClientRect();
+          var els = scene.querySelectorAll("*");
+          for (var i = 0; i < els.length; i++) {
+            var el = els[i],
+              cs = window.getComputedStyle(el);
+            if (cs.display === "none" || cs.visibility === "hidden") continue;
+            var r = el.getBoundingClientRect();
+            if (r.width < 1 || r.height < 1) continue;
+            var x = r.left - sr.left,
+              y = r.top - sr.top,
+              w = r.width,
+              h = r.height;
+            ctx.save();
+            ctx.globalAlpha = parseFloat(cs.opacity) || 1;
+            var bg = cs.backgroundColor;
+            if (bg && bg !== "rgba(0, 0, 0, 0)" && bg !== "transparent") {
+              ctx.fillStyle = bg;
+              ctx.fillRect(x, y, w, h);
+            }
+            var hasChildEls = el.querySelector("div,span,img,video");
+            var text = "";
+            for (var j = 0; j < el.childNodes.length; j++)
+              if (el.childNodes[j].nodeType === 3) text += el.childNodes[j].textContent;
+            text = text.trim();
+            if (text && !hasChildEls) {
+              ctx.font = cs.fontWeight + " " + cs.fontSize + " " + cs.fontFamily;
+              ctx.fillStyle = cs.color;
+              if (cs.letterSpacing && cs.letterSpacing !== "normal")
+                ctx.letterSpacing = cs.letterSpacing;
+              ctx.textAlign = "center";
+              ctx.textBaseline = "middle";
+              ctx.fillText(text, x + w / 2, y + h / 2);
+            }
+            ctx.restore();
+          }
+          scene.style.opacity = origOpacity;
+          scene.style.zIndex = origZ;
+          var tex = gl.createTexture();
+          gl.bindTexture(gl.TEXTURE_2D, tex);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+          gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, c);
+          sceneTextures[sceneId] = tex;
+        }
+
+        var vertSrc =
+          "attribute vec2 a_pos; varying vec2 v_uv; void main(){" +
+          "v_uv=a_pos*0.5+0.5; v_uv.y=1.0-v_uv.y; gl_Position=vec4(a_pos,0,1);}";
+        var quadBuf = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);
+        gl.bufferData(
+          gl.ARRAY_BUFFER,
+          new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),
+          gl.STATIC_DRAW,
+        );
+        function compileShader(src, type) {
+          var s = gl.createShader(type);
+          gl.shaderSource(s, src);
+          gl.compileShader(s);
+          if (!gl.getShaderParameter(s, gl.COMPILE_STATUS))
+            console.error("Shader:", gl.getShaderInfoLog(s));
+          return s;
+        }
+        function mkProg(fragSrc) {
+          var p = gl.createProgram();
+          gl.attachShader(p, compileShader(vertSrc, gl.VERTEX_SHADER));
+          gl.attachShader(p, compileShader(fragSrc, gl.FRAGMENT_SHADER));
+          gl.linkProgram(p);
+          if (!gl.getProgramParameter(p, gl.LINK_STATUS))
+            console.error("Link:", gl.getProgramInfoLog(p));
+          return p;
+        }
+
+        var H =
+          "precision mediump float;" +
+          "varying vec2 v_uv;" +
+          "uniform sampler2D u_from, u_to;" +
+          "uniform float u_progress;" +
+          "uniform vec2 u_resolution;\n";
+
+        var progPass = mkProg(H + "void main(){gl_FragColor=texture2D(u_from,v_uv);}");
+        var progTrans = mkProg(
+          H +
+            "void main(){vec4 A=texture2D(u_from,v_uv),B=texture2D(u_to,v_uv);float toWhite=smoothstep(0.,.45,u_progress);vec3 fromC=mix(A.rgb,vec3(1.),toWhite);float fromWhite=1.-smoothstep(.5,1.,u_progress);vec3 toC=mix(B.rgb,vec3(1.),fromWhite);gl_FragColor=vec4(mix(fromC,toC,smoothstep(.35,.65,u_progress)),1.);}",
+        );
+
+        function renderShader(prog, texFrom, texTo, progress) {
+          gl.useProgram(prog);
+          gl.activeTexture(gl.TEXTURE0);
+          gl.bindTexture(gl.TEXTURE_2D, texFrom);
+          gl.uniform1i(gl.getUniformLocation(prog, "u_from"), 0);
+          gl.activeTexture(gl.TEXTURE1);
+          gl.bindTexture(gl.TEXTURE_2D, texTo);
+          gl.uniform1i(gl.getUniformLocation(prog, "u_to"), 1);
+          gl.uniform1f(gl.getUniformLocation(prog, "u_progress"), progress);
+          gl.uniform2f(gl.getUniformLocation(prog, "u_resolution"), 1200, 1080);
+          var pos = gl.getAttribLocation(prog, "a_pos");
+          gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);
+          gl.enableVertexAttribArray(pos);
+          gl.vertexAttribPointer(pos, 2, gl.FLOAT, false, 0, 0);
+          gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+        }
+
+        function easeInOut(p) {
+          return p < 0.5 ? 2 * p * p : 1 - Math.pow(-2 * p + 2, 2) / 2;
+        }
+
+        captureScene("s1");
+        captureScene("s2");
+        glCanvas.style.display = "block";
+        renderShader(progPass, sceneTextures["s1"], sceneTextures["s1"], 0);
+        document.querySelectorAll(".scene").forEach(function (s) {
+          s.style.opacity = "0";
+        });
+
+        var tl = gsap.timeline({
+          paused: true,
+          onUpdate: function () {
+            var t = tl.time();
+            if (t >= 1.0 && t < 3.0) {
+              renderShader(
+                progTrans,
+                sceneTextures["s1"],
+                sceneTextures["s2"],
+                easeInOut((t - 1.0) / 2.0),
+              );
+            } else if (t >= 3.0) {
+              renderShader(progPass, sceneTextures["s2"], sceneTextures["s2"], 0);
+            } else {
+              renderShader(progPass, sceneTextures["s1"], sceneTextures["s1"], 0);
+            }
+          },
+        });
+        tl.to({ v: 0 }, { v: 1, duration: 4, ease: "none" }, 0);
+        window.__timelines["main"] = tl;
+      } // end if (gl)
+    </script>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="flash-through-white" data-composition-src="compositions/flash-through-white.html" data-start="0" data-duration="4" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/flowchart-vertical.mdx b/docs/catalog/blocks/flowchart-vertical.mdx
index 150d75536f..4bd40cc978 100644
--- a/docs/catalog/blocks/flowchart-vertical.mdx
+++ b/docs/catalog/blocks/flowchart-vertical.mdx
@@ -3,34 +3,499 @@ title: "Flowchart Vertical"
 description: "Portrait animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flowchart-vertical.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flowchart-vertical.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/flowchart-vertical.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Flowchart Vertical preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add flowchart-vertical
-```
+<InstallCommand command="npx hyperframes add flowchart-vertical" />
 
 That writes one file: `compositions/flowchart-vertical.html`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`flowchart-vertical.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1440, height=2560" />
+    <title>Flowchart Vertical</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=block"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1440px;
+        height: 2560px;
+        overflow: hidden;
+        background-color: #ffffff;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="flowchart-vertical"
+      data-composition-id="flowchart-vertical"
+      data-width="1440"
+      data-height="2560"
+      data-start="0"
+      data-duration="12"
+    >
+      <div class="canvas">
+        <svg class="connectors" width="1440" height="2560" viewBox="0 0 1440 2560">
+          <!-- Level 1 to 2 -->
+          <path
+            id="path-1-L"
+            class="connector"
+            d="M 720 210 L 720 360 L 440 360 L 440 530"
+            fill="none"
+            stroke="#333"
+            stroke-width="4"
+          />
+          <path
+            id="path-1-R"
+            class="connector"
+            d="M 720 210 L 720 360 L 1000 360 L 1000 530"
+            fill="none"
+            stroke="#333"
+            stroke-width="4"
+          />
+
+          <!-- Level 2 to 3 (Left side) -->
+          <path
+            id="path-2-LL"
+            class="connector"
+            d="M 440 590 L 440 760 L 280 760 L 280 930"
+            fill="none"
+            stroke="#333"
+            stroke-width="4"
+          />
+          <path
+            id="path-2-LR"
+            class="connector"
+            d="M 440 590 L 440 760 L 600 760 L 600 930"
+            fill="none"
+            stroke="#333"
+            stroke-width="4"
+          />
+
+          <!-- Level 2 to 3 (Right side) -->
+          <path
+            id="path-2-RL"
+            class="connector"
+            d="M 1000 590 L 1000 760 L 840 760 L 840 930"
+            fill="none"
+            stroke="#333"
+            stroke-width="4"
+          />
+          <path
+            id="path-2-RR"
+            class="connector"
+            d="M 1000 590 L 1000 760 L 1160 760 L 1160 930"
+            fill="none"
+            stroke="#333"
+            stroke-width="4"
+          />
+        </svg>
+
+        <div id="label-yes" class="connector-label">Yes</div>
+        <div id="label-not-sure" class="connector-label">Not sure</div>
+
+        <!-- Level 1 -->
+        <div id="node-root" class="node yellow" style="left: 720px; top: 180px">
+          Should I learn to code?
+        </div>
+
+        <!-- Level 2 -->
+        <div id="node-yes" class="node green" style="left: 440px; top: 560px">Yes</div>
+        <div id="node-not-sure" class="node peach" style="left: 1000px; top: 560px">Not sure</div>
+
+        <!-- Level 3 -->
+        <div id="node-python" class="node lavender" style="left: 280px; top: 960px">
+          <div style="position: relative; display: inline-block">
+            <span id="python-text">Start with Pythom</span>
+            <svg class="squiggle-container" width="64" height="6" viewBox="0 0 64 6">
+              <path
+                id="squiggle"
+                d="M 0 3 Q 2 0 4 3 T 8 3 T 12 3 T 16 3 T 20 3 T 24 3 T 28 3 T 32 3 T 36 3 T 40 3 T 44 3 T 48 3 T 52 3 T 56 3 T 60 3 T 64 3"
+                fill="none"
+                stroke="#E53935"
+                stroke-width="2"
+              />
+            </svg>
+          </div>
+        </div>
+        <div id="node-nocode" class="node blue" style="left: 600px; top: 960px">
+          Try no-code first
+        </div>
+        <div id="node-website" class="node pink" style="left: 840px; top: 960px">
+          Build a personal website
+        </div>
+        <div id="node-course" class="node yellow" style="left: 1160px; top: 960px">
+          Take a free intro course
+        </div>
+
+        <!-- Cursor -->
+        <div id="cursor" class="cursor-container">
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+            <path
+              d="M5.65376 12.3673H5.46026L5.31717 12.4976L0.500002 16.8829L0.500002 1.19841L11.7841 12.3673H5.65376Z"
+              fill="white"
+              stroke="black"
+            />
+          </svg>
+          <div class="cursor-tag">You</div>
+        </div>
+
+        <!-- Emoji -->
+        <div id="emoji-thumb" class="emoji">👍</div>
+
+        <!-- Overlay -->
+        <div id="fade-overlay"></div>
+      </div>
+
+      <style>
+        #flowchart-vertical {
+          width: 1440px;
+          height: 2560px;
+          background-color: #ffffff;
+          background-image: radial-gradient(#e5e5e5 1px, transparent 1px);
+          background-size: 20px 20px;
+          position: absolute;
+          overflow: hidden;
+          font-family: "Inter", sans-serif;
+        }
+
+        #flowchart-vertical .canvas {
+          width: 100%;
+          height: 100%;
+          position: absolute;
+          transform: none;
+          transform-origin: 720px 640px;
+        }
+
+        #flowchart-vertical .node {
+          position: absolute;
+          transform: translate(-50%, -50%) scale(0);
+          padding: 16px 24px;
+          border-radius: 12px;
+          font-size: 18px;
+          font-weight: 500;
+          color: #333;
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+          white-space: nowrap;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          z-index: 10;
+        }
+
+        #flowchart-vertical .node.yellow {
+          background-color: #e8d44d;
+        }
+        #flowchart-vertical .node.green {
+          background-color: #c2e8a0;
+        }
+        #flowchart-vertical .node.peach {
+          background-color: #f5c5a3;
+        }
+        #flowchart-vertical .node.lavender {
+          background-color: #d4c5f9;
+        }
+        #flowchart-vertical .node.blue {
+          background-color: #a8d8f0;
+        }
+        #flowchart-vertical .node.pink {
+          background-color: #f8b4c8;
+        }
+
+        #flowchart-vertical .connectors {
+          position: absolute;
+          top: 0;
+          left: 0;
+          z-index: 5;
+          pointer-events: none;
+        }
+
+        #flowchart-vertical .connector {
+          stroke-dasharray: 1000;
+          stroke-dashoffset: 1000;
+        }
+
+        #flowchart-vertical .connector-label {
+          position: absolute;
+          font-size: 14px;
+          font-weight: 600;
+          color: #333;
+          background: white;
+          padding: 2px 6px;
+          border-radius: 4px;
+          opacity: 0;
+          z-index: 6;
+          transform: translate(-50%, -50%);
+        }
+
+        #flowchart-vertical #label-yes {
+          left: 580px;
+          top: 420px;
+        }
+        #flowchart-vertical #label-not-sure {
+          left: 860px;
+          top: 420px;
+        }
+
+        #flowchart-vertical .cursor-container {
+          position: absolute;
+          left: 1440px;
+          top: 2560px;
+          z-index: 100;
+          pointer-events: none;
+          display: flex;
+          align-items: flex-start;
+        }
+
+        #flowchart-vertical .cursor-tag {
+          background-color: #9747ff;
+          color: white;
+          padding: 2px 8px;
+          border-radius: 4px;
+          font-size: 12px;
+          font-weight: 600;
+          margin-left: 4px;
+          margin-top: 12px;
+        }
+
+        #flowchart-vertical .squiggle-container {
+          position: absolute;
+          right: 0;
+          bottom: -4px;
+          opacity: 0;
+        }
+
+        #flowchart-vertical .emoji {
+          position: absolute;
+          font-size: 32px;
+          left: 390px;
+          top: 960px;
+          transform: translate(-50%, -50%) scale(0);
+          z-index: 20;
+        }
+
+        #flowchart-vertical #fade-overlay {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          background-color: white;
+          opacity: 0;
+          z-index: 1000;
+          pointer-events: none;
+        }
+
+        #flowchart-vertical .selection-border {
+          position: absolute;
+          top: -4px;
+          left: -4px;
+          right: -4px;
+          bottom: -4px;
+          border: 2px solid #0b84f3;
+          border-radius: 16px;
+          pointer-events: none;
+          opacity: 0;
+        }
+
+        #flowchart-vertical .text-highlight {
+          background-color: #d0e4ff;
+        }
+      </style>
 
-It runs for 12 seconds at 1440×2560. Paste this into your composition:
+      <script>
+        (function () {
+          const tl = gsap.timeline({ paused: true });
+          const S = "#flowchart-vertical";
+          const nodePython = document.querySelector(S + " #node-python");
+          const pythonText = document.querySelector(S + " #python-text");
 
-```html index.html
-<div
-  data-composition-id="flowchart-vertical"
-  data-composition-src="compositions/flowchart-vertical.html"
-  data-start="0"
-  data-duration="12"
-  data-track-index="1"
-  data-width="1440"
-  data-height="2560"
-></div>
+          // 1. Root node scales in
+          tl.to(S + " #node-root", { scale: 1, duration: 0.4, ease: "power2.out" });
+
+          // 2. Hold
+          tl.addLabel("hold1", "+=0.6");
+
+          // 3. Connectors draw
+          tl.to(
+            S + " .connector#path-1-L, " + S + " .connector#path-1-R",
+            { strokeDashoffset: 0, duration: 0.5, ease: "none" },
+            "hold1",
+          );
+
+          tl.to(
+            S + " #label-yes, " + S + " #label-not-sure",
+            { opacity: 1, duration: 0.2 },
+            "hold1+=0.25",
+          );
+
+          // 4. Level 2 nodes
+          tl.to(S + " #node-yes", { scale: 1, duration: 0.4, ease: "back.out(1.7)" }, "hold1+=0.4");
+          tl.to(
+            S + " #node-not-sure",
+            { scale: 1, duration: 0.4, ease: "back.out(1.7)" },
+            "hold1+=0.6",
+          );
+
+          // 5. Hold
+          tl.addLabel("hold2", "+=0.5");
+
+          // 6. Level 2→3 connectors
+          tl.to(
+            S +
+              " .connector#path-2-LL, " +
+              S +
+              " .connector#path-2-LR, " +
+              S +
+              " .connector#path-2-RL, " +
+              S +
+              " .connector#path-2-RR",
+            { strokeDashoffset: 0, duration: 0.4, ease: "none" },
+            "hold2",
+          );
+
+          // 7. Leaf nodes
+          const leafNodes = [
+            S + " #node-python",
+            S + " #node-nocode",
+            S + " #node-website",
+            S + " #node-course",
+          ];
+          leafNodes.forEach((id, i) => {
+            tl.to(
+              id,
+              { scale: 1, duration: 0.4, ease: "back.out(1.7)" },
+              `hold2+=${0.3 + i * 0.15}`,
+            );
+          });
+
+          tl.to(S + " .squiggle-container", { opacity: 1, duration: 0.1 }, "hold2+=0.3");
+
+          // 8. Hold
+          tl.addLabel("hold3", "+=0.8");
+
+          // 9. Cursor drifts in
+          tl.to(S + " #cursor", { x: -1110, y: -1560, duration: 1, ease: "power1.inOut" }, "hold3");
+
+          // 10. Cursor clicks — selection border
+          tl.add(() => {
+            if (!nodePython) return;
+            if (!nodePython.querySelector(".selection-border")) {
+              const border = document.createElement("div");
+              border.className = "selection-border";
+              nodePython.appendChild(border);
+            }
+            gsap.set(S + " .selection-border", { opacity: 1 });
+          }, "hold3+=1");
+
+          tl.to(
+            S + " #cursor",
+            { scale: 0.8, duration: 0.05, yoyo: true, repeat: 1, overwrite: "auto" },
+            "hold3+=1",
+          );
+
+          // 11. Hold
+          tl.addLabel("hold4", "+=0.3");
+
+          // 12. Double-click to highlight "Pythom"
+          tl.to(
+            S + " #cursor",
+            { scale: 0.8, duration: 0.05, yoyo: true, repeat: 3, overwrite: "auto" },
+            "hold4",
+          );
+          tl.add(() => {
+            if (!pythonText) return;
+            pythonText.innerHTML = 'Start with <span class="text-highlight">Pythom</span>';
+          }, "hold4+=0.1");
+
+          // 13. Hold
+          tl.addLabel("hold5", "+=0.2");
+
+          // 14. Type correction: "Pythom" → "Python"
+          const typingStart = tl.labels["hold5"];
+          const words = ["P", "Py", "Pyt", "Pyth", "Pytho", "Python"];
+          words.forEach((word, i) => {
+            tl.add(
+              () => {
+                if (pythonText)
+                  pythonText.innerHTML = `Start with <span class="text-highlight">${word}</span>`;
+              },
+              typingStart + i * 0.05,
+            );
+          });
+
+          const typingEnd = typingStart + words.length * 0.05;
+          tl.add(() => {
+            if (pythonText) pythonText.innerHTML = "Start with Python";
+            gsap.set(S + " .squiggle-container", { opacity: 0 });
+          }, typingEnd);
+
+          // 15. Hold
+          tl.addLabel("hold6", typingEnd + 0.5);
+
+          // 16. Cursor clicks away to deselect
+          tl.to(S + " #cursor", { x: -1050, y: -1520, duration: 0.3, overwrite: "auto" }, "hold6");
+          tl.to(
+            S + " #cursor",
+            { scale: 0.8, duration: 0.05, yoyo: true, repeat: 1, overwrite: "auto" },
+            "hold6+=0.3",
+          );
+          tl.to(S + " .selection-border", { opacity: 0, duration: 0.1 }, "hold6+=0.3");
+
+          // 17. Emoji pop
+          tl.to(
+            S + " #emoji-thumb",
+            { scale: 1, duration: 0.15, ease: "back.out(2)" },
+            "hold6+=0.4",
+          );
+
+          // 18. Hold
+          tl.addLabel("hold7", "+=2");
+
+          // 19. Fade out
+          tl.to(S + " #fade-overlay", { opacity: 1, duration: 0.5 }, "hold7");
+
+          window.__timelines = window.__timelines || {};
+          window.__timelines["flowchart-vertical"] = tl;
+        })();
+      </script>
+    </div>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="flowchart-vertical" data-composition-src="compositions/flowchart-vertical.html" data-start="0" data-duration="12" data-track-index="1" data-width="1440" data-height="2560"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/flowchart.mdx b/docs/catalog/blocks/flowchart.mdx
index 8e45923c5f..9f6c24c881 100644
--- a/docs/catalog/blocks/flowchart.mdx
+++ b/docs/catalog/blocks/flowchart.mdx
@@ -3,34 +3,499 @@ title: "Flowchart"
 description: "Animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flowchart.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flowchart.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/flowchart.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Flowchart preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add flowchart
-```
+<InstallCommand command="npx hyperframes add flowchart" />
 
 That writes one file: `compositions/flowchart.html`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`flowchart.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Flowchart</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=block"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background-color: #ffffff;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="flowchart"
+      data-composition-id="flowchart"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="12"
+    >
+      <div class="canvas">
+        <svg class="connectors" width="1920" height="1080" viewBox="0 0 1920 1080">
+          <!-- Level 1 to 2 -->
+          <path
+            id="path-1-L"
+            class="connector"
+            d="M 960 130 L 960 200 L 600 200 L 600 270"
+            fill="none"
+            stroke="#333"
+            stroke-width="4"
+          />
+          <path
+            id="path-1-R"
+            class="connector"
+            d="M 960 130 L 960 200 L 1320 200 L 1320 270"
+            fill="none"
+            stroke="#333"
+            stroke-width="4"
+          />
+
+          <!-- Level 2 to 3 (Left side) -->
+          <path
+            id="path-2-LL"
+            class="connector"
+            d="M 600 330 L 600 400 L 400 400 L 400 470"
+            fill="none"
+            stroke="#333"
+            stroke-width="4"
+          />
+          <path
+            id="path-2-LR"
+            class="connector"
+            d="M 600 330 L 600 400 L 800 400 L 800 470"
+            fill="none"
+            stroke="#333"
+            stroke-width="4"
+          />
+
+          <!-- Level 2 to 3 (Right side) -->
+          <path
+            id="path-2-RL"
+            class="connector"
+            d="M 1320 330 L 1320 400 L 1120 400 L 1120 470"
+            fill="none"
+            stroke="#333"
+            stroke-width="4"
+          />
+          <path
+            id="path-2-RR"
+            class="connector"
+            d="M 1320 330 L 1320 400 L 1520 400 L 1520 470"
+            fill="none"
+            stroke="#333"
+            stroke-width="4"
+          />
+        </svg>
+
+        <div id="label-yes" class="connector-label">Yes</div>
+        <div id="label-not-sure" class="connector-label">Not sure</div>
+
+        <!-- Level 1 -->
+        <div id="node-root" class="node yellow" style="left: 960px; top: 100px">
+          Should I learn to code?
+        </div>
+
+        <!-- Level 2 -->
+        <div id="node-yes" class="node green" style="left: 600px; top: 300px">Yes</div>
+        <div id="node-not-sure" class="node peach" style="left: 1320px; top: 300px">Not sure</div>
+
+        <!-- Level 3 -->
+        <div id="node-python" class="node lavender" style="left: 400px; top: 500px">
+          <div style="position: relative; display: inline-block">
+            <span id="python-text">Start with Pythom</span>
+            <svg class="squiggle-container" width="64" height="6" viewBox="0 0 64 6">
+              <path
+                id="squiggle"
+                d="M 0 3 Q 2 0 4 3 T 8 3 T 12 3 T 16 3 T 20 3 T 24 3 T 28 3 T 32 3 T 36 3 T 40 3 T 44 3 T 48 3 T 52 3 T 56 3 T 60 3 T 64 3"
+                fill="none"
+                stroke="#E53935"
+                stroke-width="2"
+              />
+            </svg>
+          </div>
+        </div>
+        <div id="node-nocode" class="node blue" style="left: 800px; top: 500px">
+          Try no-code first
+        </div>
+        <div id="node-website" class="node pink" style="left: 1120px; top: 500px">
+          Build a personal website
+        </div>
+        <div id="node-course" class="node yellow" style="left: 1520px; top: 500px">
+          Take a free intro course
+        </div>
+
+        <!-- Cursor -->
+        <div id="cursor" class="cursor-container">
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+            <path
+              d="M5.65376 12.3673H5.46026L5.31717 12.4976L0.500002 16.8829L0.500002 1.19841L11.7841 12.3673H5.65376Z"
+              fill="white"
+              stroke="black"
+            />
+          </svg>
+          <div class="cursor-tag">You</div>
+        </div>
+
+        <!-- Emoji -->
+        <div id="emoji-thumb" class="emoji">👍</div>
+
+        <!-- Overlay -->
+        <div id="fade-overlay"></div>
+      </div>
+
+      <style>
+        [data-composition-id="flowchart"] {
+          width: 1920px;
+          height: 1080px;
+          background-color: #ffffff;
+          background-image: radial-gradient(#e5e5e5 1px, transparent 1px);
+          background-size: 20px 20px;
+          position: absolute;
+          overflow: hidden;
+          font-family: "Inter", sans-serif;
+        }
+
+        [data-composition-id="flowchart"] .canvas {
+          width: 100%;
+          height: 100%;
+          position: absolute;
+          transform: scale(1.2);
+          transform-origin: 960px 300px;
+        }
+
+        [data-composition-id="flowchart"] .node {
+          position: absolute;
+          transform: translate(-50%, -50%) scale(0);
+          padding: 16px 24px;
+          border-radius: 12px;
+          font-size: 18px;
+          font-weight: 500;
+          color: #333;
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+          white-space: nowrap;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          z-index: 10;
+        }
+
+        [data-composition-id="flowchart"] .node.yellow {
+          background-color: #e8d44d;
+        }
+        [data-composition-id="flowchart"] .node.green {
+          background-color: #c2e8a0;
+        }
+        [data-composition-id="flowchart"] .node.peach {
+          background-color: #f5c5a3;
+        }
+        [data-composition-id="flowchart"] .node.lavender {
+          background-color: #d4c5f9;
+        }
+        [data-composition-id="flowchart"] .node.blue {
+          background-color: #a8d8f0;
+        }
+        [data-composition-id="flowchart"] .node.pink {
+          background-color: #f8b4c8;
+        }
+
+        [data-composition-id="flowchart"] .connectors {
+          position: absolute;
+          top: 0;
+          left: 0;
+          z-index: 5;
+          pointer-events: none;
+        }
+
+        [data-composition-id="flowchart"] .connector {
+          stroke-dasharray: 1000;
+          stroke-dashoffset: 1000;
+        }
+
+        [data-composition-id="flowchart"] .connector-label {
+          position: absolute;
+          font-size: 14px;
+          font-weight: 600;
+          color: #333;
+          background: white;
+          padding: 2px 6px;
+          border-radius: 4px;
+          opacity: 0;
+          z-index: 6;
+          transform: translate(-50%, -50%);
+        }
+
+        [data-composition-id="flowchart"] #label-yes {
+          left: 780px;
+          top: 230px;
+        }
+        [data-composition-id="flowchart"] #label-not-sure {
+          left: 1140px;
+          top: 230px;
+        }
+
+        [data-composition-id="flowchart"] .cursor-container {
+          position: absolute;
+          left: 1920px;
+          top: 1080px;
+          z-index: 100;
+          pointer-events: none;
+          display: flex;
+          align-items: flex-start;
+        }
+
+        [data-composition-id="flowchart"] .cursor-tag {
+          background-color: #9747ff;
+          color: white;
+          padding: 2px 8px;
+          border-radius: 4px;
+          font-size: 12px;
+          font-weight: 600;
+          margin-left: 4px;
+          margin-top: 12px;
+        }
+
+        [data-composition-id="flowchart"] .squiggle-container {
+          position: absolute;
+          right: 0;
+          bottom: -4px;
+          opacity: 0;
+        }
+
+        [data-composition-id="flowchart"] .emoji {
+          position: absolute;
+          font-size: 32px;
+          left: 510px;
+          top: 500px;
+          transform: translate(-50%, -50%) scale(0);
+          z-index: 20;
+        }
+
+        [data-composition-id="flowchart"] #fade-overlay {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          background-color: white;
+          opacity: 0;
+          z-index: 1000;
+          pointer-events: none;
+        }
+
+        [data-composition-id="flowchart"] .selection-border {
+          position: absolute;
+          top: -4px;
+          left: -4px;
+          right: -4px;
+          bottom: -4px;
+          border: 2px solid #0b84f3;
+          border-radius: 16px;
+          pointer-events: none;
+          opacity: 0;
+        }
+
+        [data-composition-id="flowchart"] .text-highlight {
+          background-color: #d0e4ff;
+        }
+      </style>
 
-It runs for 12 seconds at 1920×1080. Paste this into your composition:
+      <script>
+        (function () {
+          const tl = gsap.timeline({ paused: true });
+          const S = '[data-composition-id="flowchart"]';
+          const nodePython = document.querySelector(S + " #node-python");
+          const pythonText = document.querySelector(S + " #python-text");
 
-```html index.html
-<div
-  data-composition-id="flowchart"
-  data-composition-src="compositions/flowchart.html"
-  data-start="0"
-  data-duration="12"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+          // 1. Root node scales in
+          tl.to(S + " #node-root", { scale: 1, duration: 0.4, ease: "power2.out" });
+
+          // 2. Hold
+          tl.addLabel("hold1", "+=0.6");
+
+          // 3. Connectors draw
+          tl.to(
+            S + " .connector#path-1-L, " + S + " .connector#path-1-R",
+            { strokeDashoffset: 0, duration: 0.5, ease: "none" },
+            "hold1",
+          );
+
+          tl.to(
+            S + " #label-yes, " + S + " #label-not-sure",
+            { opacity: 1, duration: 0.2 },
+            "hold1+=0.25",
+          );
+
+          // 4. Level 2 nodes
+          tl.to(S + " #node-yes", { scale: 1, duration: 0.4, ease: "back.out(1.7)" }, "hold1+=0.4");
+          tl.to(
+            S + " #node-not-sure",
+            { scale: 1, duration: 0.4, ease: "back.out(1.7)" },
+            "hold1+=0.6",
+          );
+
+          // 5. Hold
+          tl.addLabel("hold2", "+=0.5");
+
+          // 6. Level 2→3 connectors
+          tl.to(
+            S +
+              " .connector#path-2-LL, " +
+              S +
+              " .connector#path-2-LR, " +
+              S +
+              " .connector#path-2-RL, " +
+              S +
+              " .connector#path-2-RR",
+            { strokeDashoffset: 0, duration: 0.4, ease: "none" },
+            "hold2",
+          );
+
+          // 7. Leaf nodes
+          const leafNodes = [
+            S + " #node-python",
+            S + " #node-nocode",
+            S + " #node-website",
+            S + " #node-course",
+          ];
+          leafNodes.forEach((id, i) => {
+            tl.to(
+              id,
+              { scale: 1, duration: 0.4, ease: "back.out(1.7)" },
+              `hold2+=${0.3 + i * 0.15}`,
+            );
+          });
+
+          tl.to(S + " .squiggle-container", { opacity: 1, duration: 0.1 }, "hold2+=0.3");
+
+          // 8. Hold
+          tl.addLabel("hold3", "+=0.8");
+
+          // 9. Cursor drifts in
+          tl.to(S + " #cursor", { x: -1470, y: -540, duration: 1, ease: "power1.inOut" }, "hold3");
+
+          // 10. Cursor clicks — selection border
+          tl.add(() => {
+            if (!nodePython) return;
+            if (!nodePython.querySelector(".selection-border")) {
+              const border = document.createElement("div");
+              border.className = "selection-border";
+              nodePython.appendChild(border);
+            }
+            gsap.set(S + " .selection-border", { opacity: 1 });
+          }, "hold3+=1");
+
+          tl.to(
+            S + " #cursor",
+            { scale: 0.8, duration: 0.05, yoyo: true, repeat: 1, overwrite: "auto" },
+            "hold3+=1",
+          );
+
+          // 11. Hold
+          tl.addLabel("hold4", "+=0.3");
+
+          // 12. Double-click to highlight "Pythom"
+          tl.to(
+            S + " #cursor",
+            { scale: 0.8, duration: 0.05, yoyo: true, repeat: 3, overwrite: "auto" },
+            "hold4",
+          );
+          tl.add(() => {
+            if (!pythonText) return;
+            pythonText.innerHTML = 'Start with <span class="text-highlight">Pythom</span>';
+          }, "hold4+=0.1");
+
+          // 13. Hold
+          tl.addLabel("hold5", "+=0.2");
+
+          // 14. Type correction: "Pythom" → "Python"
+          const typingStart = tl.labels["hold5"];
+          const words = ["P", "Py", "Pyt", "Pyth", "Pytho", "Python"];
+          words.forEach((word, i) => {
+            tl.add(
+              () => {
+                if (pythonText)
+                  pythonText.innerHTML = `Start with <span class="text-highlight">${word}</span>`;
+              },
+              typingStart + i * 0.05,
+            );
+          });
+
+          const typingEnd = typingStart + words.length * 0.05;
+          tl.add(() => {
+            if (pythonText) pythonText.innerHTML = "Start with Python";
+            gsap.set(S + " .squiggle-container", { opacity: 0 });
+          }, typingEnd);
+
+          // 15. Hold
+          tl.addLabel("hold6", typingEnd + 0.5);
+
+          // 16. Cursor clicks away to deselect
+          tl.to(S + " #cursor", { x: -1420, y: -500, duration: 0.3, overwrite: "auto" }, "hold6");
+          tl.to(
+            S + " #cursor",
+            { scale: 0.8, duration: 0.05, yoyo: true, repeat: 1, overwrite: "auto" },
+            "hold6+=0.3",
+          );
+          tl.to(S + " .selection-border", { opacity: 0, duration: 0.1 }, "hold6+=0.3");
+
+          // 17. Emoji pop
+          tl.to(
+            S + " #emoji-thumb",
+            { scale: 1, duration: 0.15, ease: "back.out(2)" },
+            "hold6+=0.4",
+          );
+
+          // 18. Hold
+          tl.addLabel("hold7", "+=2");
+
+          // 19. Fade out
+          tl.to(S + " #fade-overlay", { opacity: 1, duration: 0.5 }, "hold7");
+
+          window.__timelines = window.__timelines || {};
+          window.__timelines["flowchart"] = tl;
+        })();
+      </script>
+    </div>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="flowchart" data-composition-src="compositions/flowchart.html" data-start="0" data-duration="12" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/freeze-frame-dressing.mdx b/docs/catalog/blocks/freeze-frame-dressing.mdx
index e8a0e0d943..92c4af19f8 100644
--- a/docs/catalog/blocks/freeze-frame-dressing.mdx
+++ b/docs/catalog/blocks/freeze-frame-dressing.mdx
@@ -3,13 +3,13 @@ title: "Freeze-Frame Dressing"
 description: "Timeline-driven paper, tape, and flash dressing for a freeze-frame or background-removed subject"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/freeze-frame-dressing.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/freeze-frame-dressing.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/freeze-frame-dressing.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Freeze-Frame Dressing preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add freeze-frame-dressing
-```
+<InstallCommand command="npx hyperframes add freeze-frame-dressing" />
 
 That writes one file: `compositions/freeze-frame-dressing.html`.
 
@@ -32,6 +32,135 @@ It runs for 4 seconds at 1920×1080. Paste this into your composition:
 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={`freeze-frame-dressing.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: transparent;
+      }
+
+      #hf-freeze-paper {
+        position: absolute;
+        inset: 0;
+        opacity: 0;
+        background:
+          linear-gradient(115deg, rgb(248 84 73 / 86%) 0 16%, transparent 16%),
+          linear-gradient(345deg, rgb(255 221 82 / 92%) 0 17%, transparent 17%),
+          linear-gradient(rgb(244 240 224 / 78%), rgb(244 240 224 / 78%));
+        clip-path: polygon(2% 8%, 97% 2%, 94% 94%, 6% 98%);
+        mix-blend-mode: screen;
+        pointer-events: none;
+      }
+
+      .hf-freeze-tape {
+        position: absolute;
+        width: 12.5vmin;
+        height: 2.9vmin;
+        opacity: 0;
+        background: rgb(255 236 168 / 76%);
+        border: 1px solid rgb(110 91 55 / 18%);
+        box-shadow: 0 0.3vmin 0.8vmin rgb(20 16 10 / 18%);
+        pointer-events: none;
+      }
+
+      #hf-freeze-tape-a {
+        top: 8%;
+        left: 12.5%;
+        transform: rotate(-8deg);
+      }
+
+      #hf-freeze-tape-b {
+        right: 12.5%;
+        bottom: 7%;
+        transform: rotate(7deg);
+      }
+
+      #hf-freeze-flash {
+        position: absolute;
+        inset: 0;
+        opacity: 0;
+        background: #fff;
+        pointer-events: none;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="freeze-frame-dressing"
+      data-composition-id="freeze-frame-dressing"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="hf-freeze-paper" aria-hidden="true"></div>
+      <div id="hf-freeze-tape-a" class="hf-freeze-tape" aria-hidden="true"></div>
+      <div id="hf-freeze-tape-b" class="hf-freeze-tape" aria-hidden="true"></div>
+      <div id="hf-freeze-flash" aria-hidden="true"></div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      var paper = document.getElementById("hf-freeze-paper");
+      var host = paper && paper.closest("[data-composition-id]");
+      if (!host) throw new Error("Freeze-Frame Dressing could not find its composition host");
+
+      var compositionId = host.getAttribute("data-composition-id");
+      var duration = Number(host.getAttribute("data-duration")) || 4;
+      var hit = Math.max(0.1, duration * 0.24);
+      var exit = Math.max(hit + 0.7, duration - 0.3);
+      var tl = gsap.timeline({ paused: true });
+
+      tl.to({}, { duration: duration, ease: "none" }, 0);
+      tl.to("#hf-freeze-flash", { opacity: 0.95, duration: 0.06, ease: "power2.out" }, hit);
+      tl.to("#hf-freeze-flash", { opacity: 0, duration: 0.24, ease: "power2.in" }, hit + 0.06);
+      tl.to("#hf-freeze-paper", { opacity: 0.64, duration: 0.18, ease: "power2.out" }, hit + 0.04);
+      tl.fromTo(
+        "#hf-freeze-tape-a",
+        { opacity: 0, scale: 1.18 },
+        { opacity: 1, scale: 1, duration: 0.24, ease: "power2.out" },
+        hit + 0.3,
+      );
+      tl.fromTo(
+        "#hf-freeze-tape-b",
+        { opacity: 0, scale: 1.18 },
+        { opacity: 1, scale: 1, duration: 0.24, ease: "power2.out" },
+        hit + 0.42,
+      );
+      tl.to(
+        ["#hf-freeze-paper", "#hf-freeze-tape-a", "#hf-freeze-tape-b"],
+        { opacity: 0, duration: 0.24, ease: "power2.in" },
+        exit,
+      );
+
+      window.__timelines[compositionId] = tl;
+    </script>
+  </body>
+</html>
+```
+
+</Accordion>
+
 {/* hf:generated-footer */}
 
 Tagged `freeze-frame` `cutout` `scrapbook` `paper` `social` `overlay` `media-treatment-overlay`.
diff --git a/docs/catalog/blocks/gallery-tunnel.mdx b/docs/catalog/blocks/gallery-tunnel.mdx
new file mode 100644
index 0000000000..2d367c59e4
--- /dev/null
+++ b/docs/catalog/blocks/gallery-tunnel.mdx
@@ -0,0 +1,523 @@
+---
+title: "Gallery Tunnel"
+description: "An infinite corridor of panels: a square tunnel receding to a vanishing point, its floor, ceiling and walls tiled with saturated colour slabs and caller-supplied images that swell toward camera and exit past you, the far end dissolving into fog."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/blocks/gallery-tunnel.html"
+  compositionId="gallery-tunnel"
+  compositionSrc="compositions/gallery-tunnel.html"
+  variables={[{"id":"images","type":"string","label":"Image slots: comma-separated paths, tiled into the panels (e.g. assets/shot-1.png,assets/shot-2.png)","default":"","placeholder":"assets/shot-1.png,assets/shot-2.png"},{"id":"imageMix","type":"number","label":"Image share of filled slots (0 = all colour, 1 = all images)","default":0.5,"min":0,"max":1,"step":0.05},{"id":"speed","type":"number","label":"Flight speed","default":3,"min":0,"max":8,"step":0.1,"unit":"segments/s"},{"id":"palette","type":"string","label":"Slab palette: comma-separated hex colours","default":"#FF6A00,#AB54F7,#EA3737,#0072E3,#00AA3C,#FFB200"},{"id":"grid","type":"number","label":"Grid density: slots per wall face per axis (2 = 4 per face, 16 per segment)","default":2,"min":1,"max":4,"step":1},{"id":"fill","type":"number","label":"Slot fill rate","default":0.5,"min":0,"max":1,"step":0.05},{"id":"fog","type":"number","label":"Fog distance: depth at which the corridor reaches pure backdrop","default":14.25,"min":3,"max":14.5,"step":0.25,"unit":"segments"},{"id":"edgeColor","type":"color","label":"Edge line colour","default":"#B0B0B0"},{"id":"edgeOpacity","type":"number","label":"Edge line opacity","default":0.5,"min":0,"max":1,"step":0.05},{"id":"backdrop","type":"color","label":"Backdrop and fog colour","default":"#000000"}]}
+>
+
+```html gallery-tunnel.html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Gallery Tunnel</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #000;
+        overflow: hidden;
+      }
+      #gt-root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #gt-backdrop {
+        position: absolute;
+        inset: 0;
+        background: #000000;
+      }
+      #gt-canvas {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+      }
+      /* Off-screen decode well: the <img> elements live in the DOM so the page
+         load event waits for them, but they are never composited themselves —
+         WebGL reads them as textures. The well is clipped to 1px; the images
+         inside keep their natural layout size on purpose, because texImage2D
+         uploads an <img> at its LAID-OUT size — sizing them down with CSS
+         uploads a 1x1 texture and every panel samples one dark pixel. */
+      #gt-assets {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1px;
+        height: 1px;
+        overflow: hidden;
+        opacity: 0;
+        pointer-events: none;
+      }
+    </style>
+  </head>
+  <body>
+    <!--
+      Content slots. Every panel in the corridor is a slot, and `images` fills a
+      share of them with your own artwork — drop the files in the project's
+      assets/ and list them, either by editing the `images` default below or from
+      the host composition:
+
+        <div
+          data-composition-id="gallery-tunnel"
+          data-composition-src="compositions/gallery-tunnel.html"
+          data-start="0" data-duration="12" data-track-index="0"
+          data-width="1920" data-height="1080"
+          style="--images: assets/shot-1.png, assets/shot-2.png, assets/shot-3.png; --imagemix: 0.7"
+        ></div>
+
+      Any number of images works; they are dealt to slots by hash, so one image
+      recurs at different depths rather than appearing once. Each is contain-fit
+      inside its slot, so a 16:9 screenshot keeps its aspect. `imageMix` sets the
+      image-vs-colour split (1 = every filled slot is an image), `fill` how many
+      slots are filled at all.
+    -->
+    <div
+      id="gt-root"
+      data-composition-id="gallery-tunnel"
+      data-root="true"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="12"
+      data-composition-variables='[
+        {"id":"images","type":"string","label":"Image slots: comma-separated paths, tiled into the panels (e.g. assets/shot-1.png,assets/shot-2.png)","default":"","placeholder":"assets/shot-1.png,assets/shot-2.png"},
+        {"id":"imageMix","type":"number","label":"Image share of filled slots (0 = all colour, 1 = all images)","default":0.5,"min":0,"max":1,"step":0.05},
+        {"id":"speed","type":"number","label":"Flight speed","default":3,"min":0,"max":8,"step":0.1,"unit":"segments/s"},
+        {"id":"palette","type":"string","label":"Slab palette: comma-separated hex colours","default":"#FF6A00,#AB54F7,#EA3737,#0072E3,#00AA3C,#FFB200"},
+        {"id":"grid","type":"number","label":"Grid density: slots per wall face per axis (2 = 4 per face, 16 per segment)","default":2,"min":1,"max":4,"step":1},
+        {"id":"fill","type":"number","label":"Slot fill rate","default":0.5,"min":0,"max":1,"step":0.05},
+        {"id":"fog","type":"number","label":"Fog distance: depth at which the corridor reaches pure backdrop","default":14.25,"min":3,"max":14.5,"step":0.25,"unit":"segments"},
+        {"id":"edgeColor","type":"color","label":"Edge line colour","default":"#B0B0B0"},
+        {"id":"edgeOpacity","type":"number","label":"Edge line opacity","default":0.5,"min":0,"max":1,"step":0.05},
+        {"id":"backdrop","type":"color","label":"Backdrop and fog colour","default":"#000000"}
+      ]'
+    >
+      <div id="gt-backdrop"></div>
+      <canvas id="gt-canvas" width="1920" height="1080"></canvas>
+      <div id="gt-assets" aria-hidden="true" data-layout-allow-overflow></div>
+
+      <!-- Driver clip: gives HyperFrames a timed element to own on track 0. -->
+      <div
+        id="gt-drv"
+        class="clip"
+        data-start="0"
+        data-duration="12"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+
+    <script>
+      (function () {
+        var DUR = 12;
+        var W = 1920;
+        var H = 1080;
+
+        // Fixed tunnel geometry, measured off the reference.
+        var TUNNEL_WIDTH = 2;
+        var TUNNEL_HEIGHT = 1.8;
+        var SEGMENT_DEPTH = 1;
+        var NUM_SEGMENTS = 15;
+        var LINE_RADIUS = 0.003;
+        var FOV = 75;
+        var INSET = 0.94; // slab gutter inside its cell, so tiles read as discrete
+        var SKIN = 0.002; // push slabs just behind the wall plane so edges stay on top
+
+        var ROOT = document.getElementById("gt-root");
+        var CS = getComputedStyle(ROOT);
+
+        // `data-composition-variables` is the single owner of every declared
+        // default — parse it rather than repeating each default a second time
+        // in JS. `window.__hyperframes` is NOT guaranteed to exist yet when this
+        // inline script runs, so it can only ever be an override, never the
+        // source. Precedence: host CSS custom property, runtime variable bag,
+        // declared default.
+        var DECL = {};
+        JSON.parse(ROOT.getAttribute("data-composition-variables") || "[]").forEach(function (v) {
+          DECL[v.id] = v.default;
+        });
+        var HF = window.__hyperframes;
+        var V = (HF && HF.getVariables && HF.getVariables()) || {};
+
+        function raw(id) {
+          var css = CS.getPropertyValue("--" + id.toLowerCase()).trim();
+          if (css !== "") return css;
+          if (V[id] !== undefined && V[id] !== "") return V[id];
+          return DECL[id];
+        }
+        function num(id) {
+          var n = parseFloat(raw(id));
+          return isFinite(n) ? n : 0;
+        }
+        function str(id) {
+          var s = raw(id);
+          return typeof s === "string" ? s.trim() : "";
+        }
+        function list(id) {
+          return str(id)
+            .split(",")
+            .map(function (s) {
+              return s.trim();
+            })
+            .filter(function (s) {
+              return s !== "";
+            });
+        }
+
+        var SPEED = num("speed");
+        var GRID = Math.max(1, Math.min(4, Math.round(num("grid"))));
+        var FILL = num("fill");
+        var IMAGE_MIX = num("imageMix");
+        var FOG_FAR = Math.max(3, Math.min(14.5, num("fog")));
+        var EDGE_OPACITY = num("edgeOpacity");
+        var EDGE_COLOR = str("edgeColor");
+        var BACKDROP = str("backdrop");
+        var PALETTE = list("palette");
+        var IMAGE_SRCS = list("images");
+
+        document.getElementById("gt-backdrop").style.background = BACKDROP;
+
+        // How far behind the camera a segment travels before it recycles. Tying
+        // it to the fog distance is the whole trick: the recycle boundary lands
+        // at exactly FOG_FAR, so a segment reappears already fogged to pure
+        // backdrop and nothing ever pops in at the far end. One owner for the
+        // invariant — move the fog and the boundary follows.
+        var BACK = Math.max(0, Math.min(1.5, NUM_SEGMENTS * SEGMENT_DEPTH - FOG_FAR));
+
+        // Deterministic 2D integer hash — the only source of "randomness".
+        // Content at frame N is a pure function of (absolute segment, slot).
+        function hash2(a, b) {
+          var h = Math.imul(a | 0, 0x27d4eb2d) ^ Math.imul(b | 0, 0x165667b1);
+          h = Math.imul(h ^ (h >>> 15), 0x2545f491);
+          h ^= h >>> 13;
+          return (h >>> 0) / 4294967296;
+        }
+
+        var THREEJS = window.THREE;
+        var canvas = document.getElementById("gt-canvas");
+        var renderer = new THREEJS.WebGLRenderer({
+          canvas: canvas,
+          antialias: true,
+          alpha: false,
+          preserveDrawingBuffer: true,
+        });
+        renderer.setPixelRatio(1);
+        renderer.setSize(W, H, false);
+        renderer.setClearColor(new THREEJS.Color(BACKDROP), 1);
+
+        var scene = new THREEJS.Scene();
+        scene.fog = new THREEJS.Fog(new THREEJS.Color(BACKDROP), 1, FOG_FAR * SEGMENT_DEPTH);
+
+        // Camera sits still at the origin looking down -z; the corridor moves.
+        // Same picture as a moving camera, and the modulo keeps every coordinate
+        // bounded no matter how long the clip runs.
+        var camera = new THREEJS.PerspectiveCamera(FOV, W / H, 0.05, 40);
+        camera.position.set(0, 0, 0);
+        camera.lookAt(0, 0, -1);
+
+        var PLANE = new THREEJS.PlaneGeometry(1, 1);
+
+        var COLOR_MATS = PALETTE.map(function (hex) {
+          return new THREEJS.MeshBasicMaterial({ color: new THREEJS.Color(hex), fog: true });
+        });
+        if (COLOR_MATS.length === 0) {
+          COLOR_MATS.push(new THREEJS.MeshBasicMaterial({ color: 0xffffff, fog: true }));
+        }
+
+        // Caller-supplied content slots. Real <img> elements (so the page load
+        // event waits for the decode) used directly as WebGL textures.
+        var assets = document.getElementById("gt-assets");
+        var IMAGES = IMAGE_SRCS.map(function (src, k) {
+          var el = document.createElement("img");
+          el.id = "gt-img-" + k;
+          el.alt = "";
+          el.src = src;
+          assets.appendChild(el);
+
+          var tex = new THREEJS.Texture(el);
+          tex.minFilter = THREEJS.LinearFilter;
+          tex.magFilter = THREEJS.LinearFilter;
+          tex.generateMipmaps = false;
+          var rec = {
+            aspect: 0,
+            mat: new THREEJS.MeshBasicMaterial({ map: tex, fog: true }),
+          };
+          function ready() {
+            if (!el.naturalWidth) return;
+            rec.aspect = el.naturalWidth / el.naturalHeight;
+            tex.needsUpdate = true;
+          }
+          el.addEventListener("load", ready);
+          ready(); // a cache hit can complete before the listener is attached
+          return rec;
+        });
+
+        var edgeMat = new THREEJS.MeshBasicMaterial({
+          color: new THREEJS.Color(EDGE_COLOR),
+          fog: true,
+          transparent: true,
+          opacity: EDGE_OPACITY,
+        });
+
+        var HW = TUNNEL_WIDTH / 2;
+        var HH = TUNNEL_HEIGHT / 2;
+        var cellZ = SEGMENT_DEPTH / GRID;
+        var cellX = TUNNEL_WIDTH / GRID;
+        var cellY = TUNNEL_HEIGHT / GRID;
+
+        // Four faces of a segment box. `place` maps a cell to a world position
+        // inside the segment (origin at the segment's near boundary, growing
+        // toward -z); `rot` orients the unit plane into that face, inward-facing.
+        // `cw`/`ch` are the cell's extent in the plane's own local axes.
+        var FACES = [
+          {
+            // floor
+            rot: [-Math.PI / 2, 0, 0],
+            cw: cellX,
+            ch: cellZ,
+            place: function (iu, iz) {
+              return [-HW + (iu + 0.5) * cellX, -HH - SKIN, -(iz + 0.5) * cellZ];
+            },
+          },
+          {
+            // ceiling
+            rot: [Math.PI / 2, 0, 0],
+            cw: cellX,
+            ch: cellZ,
+            place: function (iu, iz) {
+              return [-HW + (iu + 0.5) * cellX, HH + SKIN, -(iz + 0.5) * cellZ];
+            },
+          },
+          {
+            // left wall
+            rot: [0, Math.PI / 2, 0],
+            cw: cellZ,
+            ch: cellY,
+            place: function (iu, iz) {
+              return [-HW - SKIN, -HH + (iu + 0.5) * cellY, -(iz + 0.5) * cellZ];
+            },
+          },
+          {
+            // right wall
+            rot: [0, -Math.PI / 2, 0],
+            cw: cellZ,
+            ch: cellY,
+            place: function (iu, iz) {
+              return [HW + SKIN, -HH + (iu + 0.5) * cellY, -(iz + 0.5) * cellZ];
+            },
+          },
+        ];
+
+        var UP = new THREEJS.Vector3(0, 1, 0);
+        // Edges are solid tube geometry, not lines: a cylinder thickens with
+        // perspective the way a real moulding does, which is the whole reason
+        // the corridor reads as built rather than drawn.
+        function tube(group, ax, ay, az, bx, by, bz) {
+          var dx = bx - ax,
+            dy = by - ay,
+            dz = bz - az;
+          var len = Math.sqrt(dx * dx + dy * dy + dz * dz);
+          if (len < 1e-6) return;
+          var mesh = new THREEJS.Mesh(
+            new THREEJS.CylinderGeometry(LINE_RADIUS, LINE_RADIUS, len, 6, 1),
+            edgeMat,
+          );
+          mesh.position.set((ax + bx) / 2, (ay + by) / 2, (az + bz) / 2);
+          mesh.quaternion.setFromUnitVectors(UP, new THREEJS.Vector3(dx / len, dy / len, dz / len));
+          group.add(mesh);
+        }
+
+        function buildEdges(group) {
+          var D = SEGMENT_DEPTH;
+          var k, j, u, z;
+          // The four corner runs (and any interior wall divisions) come from the
+          // side walls; floor/ceiling only contribute their interior lines, so
+          // corners are drawn once and never double-blend at 50% opacity.
+          for (k = 1; k < GRID; k++) {
+            u = -HW + k * cellX;
+            tube(group, u, -HH, 0, u, -HH, -D);
+            tube(group, u, HH, 0, u, HH, -D);
+          }
+          for (k = 0; k <= GRID; k++) {
+            u = -HH + k * cellY;
+            tube(group, -HW, u, 0, -HW, u, -D);
+            tube(group, HW, u, 0, HW, u, -D);
+          }
+          // Ring lines at each depth boundary. The far boundary belongs to the
+          // next segment, so stop one short and the tiling stays seamless.
+          for (j = 0; j < GRID; j++) {
+            z = -j * cellZ;
+            tube(group, -HW, -HH, z, HW, -HH, z);
+            tube(group, -HW, HH, z, HW, HH, z);
+            tube(group, -HW, -HH, z, -HW, HH, z);
+            tube(group, HW, -HH, z, HW, HH, z);
+          }
+        }
+
+        var segs = [];
+        for (var i = 0; i < NUM_SEGMENTS; i++) {
+          var group = new THREEJS.Group();
+          var panels = [];
+          for (var f = 0; f < FACES.length; f++) {
+            var face = FACES[f];
+            for (var iz = 0; iz < GRID; iz++) {
+              for (var iu = 0; iu < GRID; iu++) {
+                var mesh = new THREEJS.Mesh(PLANE, COLOR_MATS[0]);
+                var p = face.place(iu, iz);
+                mesh.position.set(p[0], p[1], p[2]);
+                mesh.rotation.set(face.rot[0], face.rot[1], face.rot[2]);
+                mesh.visible = false;
+                group.add(mesh);
+                panels.push({ mesh: mesh, cw: face.cw * INSET, ch: face.ch * INSET });
+              }
+            }
+          }
+          buildEdges(group);
+          scene.add(group);
+          segs.push({ group: group, panels: panels });
+        }
+
+        // Contain-fit so a supplied screenshot keeps its aspect inside the slot
+        // instead of being squashed to the cell (wall cells are portrait).
+        function fit(p, ar) {
+          if (!ar) {
+            p.mesh.scale.set(p.cw, p.ch, 1);
+            return;
+          }
+          if (ar > p.cw / p.ch) p.mesh.scale.set(p.cw, p.cw / ar, 1);
+          else p.mesh.scale.set(p.ch * ar, p.ch, 1);
+        }
+
+        // Everything about frame t is computed from t alone. `d` is the distance
+        // flown in segments; `a` is the ABSOLUTE segment number occupying pool
+        // slot i right now, which is what content hashes and the every-other
+        // rhythm key off — so a segment carries the same panels every time it is
+        // looked at, no matter how the timeline is scrubbed.
+        function draw(t) {
+          var d = SPEED * t;
+          for (var i = 0; i < NUM_SEGMENTS; i++) {
+            var seg = segs[i];
+            var a = i + NUM_SEGMENTS * Math.ceil((d - i - BACK) / NUM_SEGMENTS);
+            seg.group.position.z = -(a - d) * SEGMENT_DEPTH;
+
+            var lit = a % 2 === 0;
+            var panels = seg.panels;
+            for (var s = 0; s < panels.length; s++) {
+              var p = panels[s];
+              if (!lit || hash2(a, s * 4 + 1) >= FILL) {
+                p.mesh.visible = false;
+                continue;
+              }
+              p.mesh.visible = true;
+              if (IMAGES.length > 0 && hash2(a, s * 4 + 2) < IMAGE_MIX) {
+                var im = IMAGES[Math.floor(hash2(a, s * 4 + 4) * IMAGES.length) % IMAGES.length];
+                p.mesh.material = im.mat;
+                fit(p, im.aspect);
+              } else {
+                var ci = Math.floor(hash2(a, s * 4 + 3) * COLOR_MATS.length) % COLOR_MATS.length;
+                p.mesh.material = COLOR_MATS[ci];
+                p.mesh.scale.set(p.cw, p.ch, 1);
+              }
+            }
+          }
+          renderer.render(scene, camera);
+        }
+
+        window.__timelines = window.__timelines || {};
+        var tl = gsap.timeline({ paused: true });
+
+        // Repaint from a property SETTER, not from onUpdate: gsap's seek(t)
+        // suppresses events by default, so an onUpdate callback silently never
+        // fires on a scrub and the canvas freezes on frame 0. Tweened values are
+        // always written during render, suppressed or not.
+        var driver = { _t: 0 };
+        Object.defineProperty(driver, "t", {
+          get: function () {
+            return this._t;
+          },
+          set: function (v) {
+            this._t = v;
+            draw(v);
+          },
+        });
+        tl.to(driver, { t: DUR, duration: DUR, ease: "none" }, 0);
+        window.__timelines["gallery-tunnel"] = tl;
+
+        draw(0);
+      })();
+    </script>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add gallery-tunnel" />
+
+That writes one file: `compositions/gallery-tunnel.html`.
+
+## Add it to your video
+
+It runs for 12 seconds at 1920×1080. Paste this into your composition:
+
+```html index.html
+<div
+  data-composition-id="gallery-tunnel"
+  data-composition-src="compositions/gallery-tunnel.html"
+  data-start="0"
+  data-duration="12"
+  data-track-index="1"
+  data-width="1920"
+  data-height="1080"
+></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.
+
+## Change how it looks
+
+Set these CSS variables on the block:
+
+- `--images` — Image slots: comma-separated paths, tiled into the panels (e.g. assets/shot-1.png,assets/shot-2.png). Defaults to ``.
+- `--imagemix` — Image share of filled slots (0 = all colour, 1 = all images). Defaults to `0.5`.
+- `--speed` — Flight speed (segments per second). Defaults to `3`.
+- `--palette` — Slab palette: comma-separated hex colours. Defaults to `#FF6A00,#AB54F7,#EA3737,#0072E3,#00AA3C,#FFB200`.
+- `--grid` — Grid density: slots per wall face per axis (2 = 4 per face, 16 per segment). Defaults to `2`.
+- `--fill` — Slot fill rate. Defaults to `0.5`.
+- `--fog` — Fog distance in segments: depth at which the corridor reaches pure backdrop. Defaults to `14.25`.
+- `--edgecolor` — Edge line colour. Defaults to `#B0B0B0`.
+- `--edgeopacity` — Edge line opacity. Defaults to `0.5`.
+- `--backdrop` — Backdrop and fog colour. Defaults to `#000000`.
+
+{/* hf:generated-footer */}
+
+Tagged `webgl` `3d` `background` `showcase` `depth` `loop`.
+
+## 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/glitch.mdx b/docs/catalog/blocks/glitch.mdx
index 2df95eb7fd..3360e1131d 100644
--- a/docs/catalog/blocks/glitch.mdx
+++ b/docs/catalog/blocks/glitch.mdx
@@ -3,34 +3,398 @@ title: "Glitch"
 description: "Shader transition with digital glitch artifacts"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/glitch.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/glitch.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/glitch.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Glitch preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add glitch
-```
+<InstallCommand command="npx hyperframes add glitch" />
 
 That writes one file: `compositions/glitch.html`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`glitch.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      @import url("https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Bebas+Neue&family=JetBrains+Mono:wght@400;700&family=Lato:wght@400;700&display=block");
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <style>
+        [data-composition-id="main"] {
+          width: 1920px;
+          height: 1080px;
+          overflow: hidden;
+          position: relative;
+          background: #293241;
+        }
+
+        /* Blueprint grid */
+        .bp-grid {
+          position: absolute;
+          inset: 0;
+          background-image:
+            linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
+            linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
+          background-size: 40px 40px;
+          pointer-events: none;
+        }
+
+        /* Layout */
+        .bp-left {
+          position: absolute;
+          left: 0;
+          top: 0;
+          bottom: 0;
+          width: 1200px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .bp-right {
+          position: absolute;
+          right: 0;
+          top: 0;
+          bottom: 0;
+          width: 720px;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          padding: 60px 60px 60px 40px;
+        }
+        .bp-divider {
+          position: absolute;
+          left: 1200px;
+          top: 60px;
+          bottom: 60px;
+          width: 1px;
+          background: #ee6c4d;
+          opacity: 0.15;
+        }
+        .bp-number {
+          font-family: "Space Mono", monospace;
+          font-size: 14px;
+          font-weight: 700;
+          letter-spacing: 0.4em;
+          text-transform: uppercase;
+          position: absolute;
+          top: 40px;
+          left: 60px;
+          color: #ee6c4d;
+        }
+
+        /* Right panel typography */
+        .bp-name {
+          font-family: "Bebas Neue", sans-serif;
+          font-size: 38px;
+          letter-spacing: 0.08em;
+          margin-bottom: 20px;
+          color: #ee6c4d;
+        }
+        .bp-plabel {
+          font-family: "Space Mono", monospace;
+          font-size: 11px;
+          font-weight: 700;
+          letter-spacing: 0.3em;
+          text-transform: uppercase;
+          margin-bottom: 10px;
+          color: #ee6c4d;
+          opacity: 0.5;
+        }
+        .bp-prompt {
+          font-family: "JetBrains Mono", monospace;
+          font-size: 20px;
+          line-height: 1.6;
+          padding: 16px 20px;
+          border-radius: 6px;
+          margin-bottom: 20px;
+          color: #ee6c4d;
+          background: rgba(238, 108, 77, 0.06);
+          border: 1px solid rgba(238, 108, 77, 0.12);
+        }
+        .bp-desc {
+          font-family: "Lato", sans-serif;
+          font-size: 17px;
+          line-height: 1.6;
+          color: #98c1d9;
+          opacity: 0.55;
+        }
+
+        /* GL scenes (hidden, just for texture capture) */
+        .scene {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1200px;
+          height: 1080px;
+          overflow: hidden;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .scene-label {
+          font-family: "Bebas Neue", sans-serif;
+          font-size: 140px;
+          letter-spacing: 0.06em;
+          opacity: 0.12;
+        }
+      </style>
+
+      <div class="bp-grid"></div>
+      <div class="bp-divider"></div>
+      <div class="bp-number">09 / 14</div>
+
+      <!-- GL demo scenes (captured as textures, then hidden) -->
+      <div id="s1" class="scene" style="background: #293241">
+        <div class="scene-label" style="color: #ee6c4d">SCENE A</div>
+      </div>
+      <div id="s2" class="scene" style="background: #ee6c4d; opacity: 0">
+        <div class="scene-label" style="color: #293241">SCENE B</div>
+      </div>
+
+      <!-- GL canvas (left panel only) -->
+      <canvas
+        id="gl-canvas"
+        width="1200"
+        height="1080"
+        style="
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1200px;
+          height: 1080px;
+          z-index: 10;
+          pointer-events: none;
+          display: none;
+        "
+      >
+      </canvas>
+
+      <!-- Right panel metadata -->
+      <div class="bp-right">
+        <div class="bp-name">Glitch</div>
+        <div class="bp-plabel">Prompt</div>
+        <div class="bp-prompt">"use glitch shader transition"</div>
+        <div class="bp-desc">
+          Scan lines, block scramble, chromatic aberration, brightness flicker, and color
+          posterization.
+        </div>
+      </div>
 
-It runs for 4 seconds at 1920×1080. Paste this into your composition:
+      <div
+        id="driver"
+        class="clip"
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
 
-```html index.html
-<div
-  data-composition-id="glitch"
-  data-composition-src="compositions/glitch.html"
-  data-start="0"
-  data-duration="4"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      var glCanvas = document.getElementById("gl-canvas");
+      var gl = glCanvas.getContext("webgl", { preserveDrawingBuffer: true });
+      if (!gl) {
+        console.warn("WebGL not available");
+        window.__timelines["main"] = gsap.timeline({ paused: true });
+      } else {
+        gl.viewport(0, 0, 1200, 1080);
+        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
+        var sceneTextures = {};
+
+        function captureScene(sceneId) {
+          var scene = document.getElementById(sceneId);
+          var origOpacity = scene.style.opacity;
+          var origZ = scene.style.zIndex;
+          scene.style.opacity = "1";
+          scene.style.zIndex = "999";
+          scene.offsetHeight;
+          var c = document.createElement("canvas");
+          c.width = 1200;
+          c.height = 1080;
+          var ctx = c.getContext("2d");
+          ctx.fillStyle = window.getComputedStyle(scene).backgroundColor;
+          ctx.fillRect(0, 0, 1200, 1080);
+          var sr = scene.getBoundingClientRect();
+          var els = scene.querySelectorAll("*");
+          for (var i = 0; i < els.length; i++) {
+            var el = els[i],
+              cs = window.getComputedStyle(el);
+            if (cs.display === "none" || cs.visibility === "hidden") continue;
+            var r = el.getBoundingClientRect();
+            if (r.width < 1 || r.height < 1) continue;
+            var x = r.left - sr.left,
+              y = r.top - sr.top,
+              w = r.width,
+              h = r.height;
+            ctx.save();
+            ctx.globalAlpha = parseFloat(cs.opacity) || 1;
+            var bg = cs.backgroundColor;
+            if (bg && bg !== "rgba(0, 0, 0, 0)" && bg !== "transparent") {
+              ctx.fillStyle = bg;
+              ctx.fillRect(x, y, w, h);
+            }
+            var hasChildEls = el.querySelector("div,span,img,video");
+            var text = "";
+            for (var j = 0; j < el.childNodes.length; j++)
+              if (el.childNodes[j].nodeType === 3) text += el.childNodes[j].textContent;
+            text = text.trim();
+            if (text && !hasChildEls) {
+              ctx.font = cs.fontWeight + " " + cs.fontSize + " " + cs.fontFamily;
+              ctx.fillStyle = cs.color;
+              if (cs.letterSpacing && cs.letterSpacing !== "normal")
+                ctx.letterSpacing = cs.letterSpacing;
+              ctx.textAlign = "center";
+              ctx.textBaseline = "middle";
+              ctx.fillText(text, x + w / 2, y + h / 2);
+            }
+            ctx.restore();
+          }
+          scene.style.opacity = origOpacity;
+          scene.style.zIndex = origZ;
+          var tex = gl.createTexture();
+          gl.bindTexture(gl.TEXTURE_2D, tex);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+          gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, c);
+          sceneTextures[sceneId] = tex;
+        }
+
+        var vertSrc =
+          "attribute vec2 a_pos; varying vec2 v_uv; void main(){" +
+          "v_uv=a_pos*0.5+0.5; v_uv.y=1.0-v_uv.y; gl_Position=vec4(a_pos,0,1);}";
+        var quadBuf = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);
+        gl.bufferData(
+          gl.ARRAY_BUFFER,
+          new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),
+          gl.STATIC_DRAW,
+        );
+        function compileShader(src, type) {
+          var s = gl.createShader(type);
+          gl.shaderSource(s, src);
+          gl.compileShader(s);
+          if (!gl.getShaderParameter(s, gl.COMPILE_STATUS))
+            console.error("Shader:", gl.getShaderInfoLog(s));
+          return s;
+        }
+        function mkProg(fragSrc) {
+          var p = gl.createProgram();
+          gl.attachShader(p, compileShader(vertSrc, gl.VERTEX_SHADER));
+          gl.attachShader(p, compileShader(fragSrc, gl.FRAGMENT_SHADER));
+          gl.linkProgram(p);
+          if (!gl.getProgramParameter(p, gl.LINK_STATUS))
+            console.error("Link:", gl.getProgramInfoLog(p));
+          return p;
+        }
+
+        var H =
+          "precision mediump float;" +
+          "varying vec2 v_uv;" +
+          "uniform sampler2D u_from, u_to;" +
+          "uniform float u_progress;" +
+          "uniform vec2 u_resolution;\n";
+
+        var progPass = mkProg(H + "void main(){gl_FragColor=texture2D(u_from,v_uv);}");
+        var progTrans = mkProg(
+          H +
+            "float rand(vec2 co){return fract(sin(dot(co,vec2(12.9898,78.233)))*43758.5453);}void main(){float inten=u_progress*(1.-u_progress)*4.;float lineY=floor(v_uv.y*60.)/60.;float lineDisp=(rand(vec2(lineY,floor(u_progress*17.)))-.5)*.18*inten;vec2 block=floor(v_uv*vec2(12.,8.));float br=rand(block+vec2(floor(u_progress*11.)));float ba=step(.83,br)*inten;vec2 bd=(vec2(rand(block*2.1),rand(block*3.7))-.5)*.35*ba;vec2 uv=clamp(v_uv+vec2(lineDisp,0.)+bd,0.,1.);float shift=inten*.035;float r=texture2D(u_from,uv+vec2(shift,0.)).r;float g=texture2D(u_from,uv).g;float b=texture2D(u_from,uv-vec2(shift,0.)).b;vec3 col=vec3(r,g,b);col-=step(.5,fract(v_uv.y*u_resolution.y*.5))*.05*inten;col*=1.+(rand(vec2(floor(u_progress*23.)))-.5)*.3*inten;float levels=mix(256.,8.,inten*.5);col=floor(col*levels)/levels;gl_FragColor=mix(vec4(col,1.),texture2D(u_to,v_uv),u_progress);}",
+        );
+
+        function renderShader(prog, texFrom, texTo, progress) {
+          gl.useProgram(prog);
+          gl.activeTexture(gl.TEXTURE0);
+          gl.bindTexture(gl.TEXTURE_2D, texFrom);
+          gl.uniform1i(gl.getUniformLocation(prog, "u_from"), 0);
+          gl.activeTexture(gl.TEXTURE1);
+          gl.bindTexture(gl.TEXTURE_2D, texTo);
+          gl.uniform1i(gl.getUniformLocation(prog, "u_to"), 1);
+          gl.uniform1f(gl.getUniformLocation(prog, "u_progress"), progress);
+          gl.uniform2f(gl.getUniformLocation(prog, "u_resolution"), 1200, 1080);
+          var pos = gl.getAttribLocation(prog, "a_pos");
+          gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);
+          gl.enableVertexAttribArray(pos);
+          gl.vertexAttribPointer(pos, 2, gl.FLOAT, false, 0, 0);
+          gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+        }
+
+        function easeInOut(p) {
+          return p < 0.5 ? 2 * p * p : 1 - Math.pow(-2 * p + 2, 2) / 2;
+        }
+
+        captureScene("s1");
+        captureScene("s2");
+        glCanvas.style.display = "block";
+        renderShader(progPass, sceneTextures["s1"], sceneTextures["s1"], 0);
+        document.querySelectorAll(".scene").forEach(function (s) {
+          s.style.opacity = "0";
+        });
+
+        var tl = gsap.timeline({
+          paused: true,
+          onUpdate: function () {
+            var t = tl.time();
+            if (t >= 1.0 && t < 3.0) {
+              renderShader(
+                progTrans,
+                sceneTextures["s1"],
+                sceneTextures["s2"],
+                easeInOut((t - 1.0) / 2.0),
+              );
+            } else if (t >= 3.0) {
+              renderShader(progPass, sceneTextures["s2"], sceneTextures["s2"], 0);
+            } else {
+              renderShader(progPass, sceneTextures["s1"], sceneTextures["s1"], 0);
+            }
+          },
+        });
+        tl.to({ v: 0 }, { v: 1, duration: 4, ease: "none" }, 0);
+        window.__timelines["main"] = tl;
+      } // end if (gl)
+    </script>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="glitch" data-composition-src="compositions/glitch.html" data-start="0" data-duration="4" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/gravitational-lens.mdx b/docs/catalog/blocks/gravitational-lens.mdx
index 01f12ebfd8..c808dd4bdc 100644
--- a/docs/catalog/blocks/gravitational-lens.mdx
+++ b/docs/catalog/blocks/gravitational-lens.mdx
@@ -3,34 +3,397 @@ title: "Gravitational Lens"
 description: "Shader transition with gravitational lensing distortion"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/gravitational-lens.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/gravitational-lens.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/gravitational-lens.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Gravitational Lens preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add gravitational-lens
-```
+<InstallCommand command="npx hyperframes add gravitational-lens" />
 
 That writes one file: `compositions/gravitational-lens.html`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`gravitational-lens.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      @import url("https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Bebas+Neue&family=JetBrains+Mono:wght@400;700&family=Lato:wght@400;700&display=block");
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <style>
+        [data-composition-id="main"] {
+          width: 1920px;
+          height: 1080px;
+          overflow: hidden;
+          position: relative;
+          background: #10002b;
+        }
+
+        /* Blueprint grid */
+        .bp-grid {
+          position: absolute;
+          inset: 0;
+          background-image:
+            linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
+            linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
+          background-size: 40px 40px;
+          pointer-events: none;
+        }
+
+        /* Layout */
+        .bp-left {
+          position: absolute;
+          left: 0;
+          top: 0;
+          bottom: 0;
+          width: 1200px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .bp-right {
+          position: absolute;
+          right: 0;
+          top: 0;
+          bottom: 0;
+          width: 720px;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          padding: 60px 60px 60px 40px;
+        }
+        .bp-divider {
+          position: absolute;
+          left: 1200px;
+          top: 60px;
+          bottom: 60px;
+          width: 1px;
+          background: #f20089;
+          opacity: 0.15;
+        }
+        .bp-number {
+          font-family: "Space Mono", monospace;
+          font-size: 14px;
+          font-weight: 700;
+          letter-spacing: 0.4em;
+          text-transform: uppercase;
+          position: absolute;
+          top: 40px;
+          left: 60px;
+          color: #f20089;
+        }
+
+        /* Right panel typography */
+        .bp-name {
+          font-family: "Bebas Neue", sans-serif;
+          font-size: 38px;
+          letter-spacing: 0.08em;
+          margin-bottom: 20px;
+          color: #f20089;
+        }
+        .bp-plabel {
+          font-family: "Space Mono", monospace;
+          font-size: 11px;
+          font-weight: 700;
+          letter-spacing: 0.3em;
+          text-transform: uppercase;
+          margin-bottom: 10px;
+          color: #f20089;
+          opacity: 0.5;
+        }
+        .bp-prompt {
+          font-family: "JetBrains Mono", monospace;
+          font-size: 20px;
+          line-height: 1.6;
+          padding: 16px 20px;
+          border-radius: 6px;
+          margin-bottom: 20px;
+          color: #f20089;
+          background: rgba(242, 0, 137, 0.06);
+          border: 1px solid rgba(242, 0, 137, 0.12);
+        }
+        .bp-desc {
+          font-family: "Lato", sans-serif;
+          font-size: 17px;
+          line-height: 1.6;
+          color: #a080a0;
+          opacity: 0.55;
+        }
+
+        /* GL scenes (hidden, just for texture capture) */
+        .scene {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1200px;
+          height: 1080px;
+          overflow: hidden;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .scene-label {
+          font-family: "Bebas Neue", sans-serif;
+          font-size: 140px;
+          letter-spacing: 0.06em;
+          opacity: 0.12;
+        }
+      </style>
+
+      <div class="bp-grid"></div>
+      <div class="bp-divider"></div>
+      <div class="bp-number">06 / 14</div>
+
+      <!-- GL demo scenes (captured as textures, then hidden) -->
+      <div id="s1" class="scene" style="background: #10002b">
+        <div class="scene-label" style="color: #f20089">SCENE A</div>
+      </div>
+      <div id="s2" class="scene" style="background: #f20089; opacity: 0">
+        <div class="scene-label" style="color: #10002b">SCENE B</div>
+      </div>
+
+      <!-- GL canvas (left panel only) -->
+      <canvas
+        id="gl-canvas"
+        width="1200"
+        height="1080"
+        style="
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1200px;
+          height: 1080px;
+          z-index: 10;
+          pointer-events: none;
+          display: none;
+        "
+      >
+      </canvas>
+
+      <!-- Right panel metadata -->
+      <div class="bp-right">
+        <div class="bp-name">Gravitational Lens</div>
+        <div class="bp-plabel">Prompt</div>
+        <div class="bp-prompt">"use gravitational lens shader transition"</div>
+        <div class="bp-desc">
+          Content warps toward a gravity well with chromatic aberration and event horizon darkening.
+        </div>
+      </div>
 
-It runs for 4 seconds at 1920×1080. Paste this into your composition:
+      <div
+        id="driver"
+        class="clip"
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
 
-```html index.html
-<div
-  data-composition-id="gravitational-lens"
-  data-composition-src="compositions/gravitational-lens.html"
-  data-start="0"
-  data-duration="4"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      var glCanvas = document.getElementById("gl-canvas");
+      var gl = glCanvas.getContext("webgl", { preserveDrawingBuffer: true });
+      if (!gl) {
+        console.warn("WebGL not available");
+        window.__timelines["main"] = gsap.timeline({ paused: true });
+      } else {
+        gl.viewport(0, 0, 1200, 1080);
+        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
+        var sceneTextures = {};
+
+        function captureScene(sceneId) {
+          var scene = document.getElementById(sceneId);
+          var origOpacity = scene.style.opacity;
+          var origZ = scene.style.zIndex;
+          scene.style.opacity = "1";
+          scene.style.zIndex = "999";
+          scene.offsetHeight;
+          var c = document.createElement("canvas");
+          c.width = 1200;
+          c.height = 1080;
+          var ctx = c.getContext("2d");
+          ctx.fillStyle = window.getComputedStyle(scene).backgroundColor;
+          ctx.fillRect(0, 0, 1200, 1080);
+          var sr = scene.getBoundingClientRect();
+          var els = scene.querySelectorAll("*");
+          for (var i = 0; i < els.length; i++) {
+            var el = els[i],
+              cs = window.getComputedStyle(el);
+            if (cs.display === "none" || cs.visibility === "hidden") continue;
+            var r = el.getBoundingClientRect();
+            if (r.width < 1 || r.height < 1) continue;
+            var x = r.left - sr.left,
+              y = r.top - sr.top,
+              w = r.width,
+              h = r.height;
+            ctx.save();
+            ctx.globalAlpha = parseFloat(cs.opacity) || 1;
+            var bg = cs.backgroundColor;
+            if (bg && bg !== "rgba(0, 0, 0, 0)" && bg !== "transparent") {
+              ctx.fillStyle = bg;
+              ctx.fillRect(x, y, w, h);
+            }
+            var hasChildEls = el.querySelector("div,span,img,video");
+            var text = "";
+            for (var j = 0; j < el.childNodes.length; j++)
+              if (el.childNodes[j].nodeType === 3) text += el.childNodes[j].textContent;
+            text = text.trim();
+            if (text && !hasChildEls) {
+              ctx.font = cs.fontWeight + " " + cs.fontSize + " " + cs.fontFamily;
+              ctx.fillStyle = cs.color;
+              if (cs.letterSpacing && cs.letterSpacing !== "normal")
+                ctx.letterSpacing = cs.letterSpacing;
+              ctx.textAlign = "center";
+              ctx.textBaseline = "middle";
+              ctx.fillText(text, x + w / 2, y + h / 2);
+            }
+            ctx.restore();
+          }
+          scene.style.opacity = origOpacity;
+          scene.style.zIndex = origZ;
+          var tex = gl.createTexture();
+          gl.bindTexture(gl.TEXTURE_2D, tex);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+          gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, c);
+          sceneTextures[sceneId] = tex;
+        }
+
+        var vertSrc =
+          "attribute vec2 a_pos; varying vec2 v_uv; void main(){" +
+          "v_uv=a_pos*0.5+0.5; v_uv.y=1.0-v_uv.y; gl_Position=vec4(a_pos,0,1);}";
+        var quadBuf = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);
+        gl.bufferData(
+          gl.ARRAY_BUFFER,
+          new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),
+          gl.STATIC_DRAW,
+        );
+        function compileShader(src, type) {
+          var s = gl.createShader(type);
+          gl.shaderSource(s, src);
+          gl.compileShader(s);
+          if (!gl.getShaderParameter(s, gl.COMPILE_STATUS))
+            console.error("Shader:", gl.getShaderInfoLog(s));
+          return s;
+        }
+        function mkProg(fragSrc) {
+          var p = gl.createProgram();
+          gl.attachShader(p, compileShader(vertSrc, gl.VERTEX_SHADER));
+          gl.attachShader(p, compileShader(fragSrc, gl.FRAGMENT_SHADER));
+          gl.linkProgram(p);
+          if (!gl.getProgramParameter(p, gl.LINK_STATUS))
+            console.error("Link:", gl.getProgramInfoLog(p));
+          return p;
+        }
+
+        var H =
+          "precision mediump float;" +
+          "varying vec2 v_uv;" +
+          "uniform sampler2D u_from, u_to;" +
+          "uniform float u_progress;" +
+          "uniform vec2 u_resolution;\n";
+
+        var progPass = mkProg(H + "void main(){gl_FragColor=texture2D(u_from,v_uv);}");
+        var progTrans = mkProg(
+          H +
+            "void main(){vec4 B=texture2D(u_to,v_uv);vec2 uv=v_uv-.5;float dist=length(uv);float pull=u_progress*2.;float warpStr=pull*.3/(dist+.1);vec2 warped=clamp(v_uv-uv*warpStr,0.,1.);vec4 A=texture2D(u_from,warped);float horizon=smoothstep(0.,.3,dist/(1.-u_progress*.85+.001));float shift=pull*.02/(dist+.2);float r=texture2D(u_from,clamp(v_uv-uv*(warpStr+shift),0.,1.)).r;float b=texture2D(u_from,clamp(v_uv-uv*(warpStr-shift),0.,1.)).b;vec3 lensed=vec3(r,A.g,b)*horizon;gl_FragColor=vec4(mix(lensed,B.rgb,smoothstep(.3,.9,u_progress)),1.);}",
+        );
+
+        function renderShader(prog, texFrom, texTo, progress) {
+          gl.useProgram(prog);
+          gl.activeTexture(gl.TEXTURE0);
+          gl.bindTexture(gl.TEXTURE_2D, texFrom);
+          gl.uniform1i(gl.getUniformLocation(prog, "u_from"), 0);
+          gl.activeTexture(gl.TEXTURE1);
+          gl.bindTexture(gl.TEXTURE_2D, texTo);
+          gl.uniform1i(gl.getUniformLocation(prog, "u_to"), 1);
+          gl.uniform1f(gl.getUniformLocation(prog, "u_progress"), progress);
+          gl.uniform2f(gl.getUniformLocation(prog, "u_resolution"), 1200, 1080);
+          var pos = gl.getAttribLocation(prog, "a_pos");
+          gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);
+          gl.enableVertexAttribArray(pos);
+          gl.vertexAttribPointer(pos, 2, gl.FLOAT, false, 0, 0);
+          gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+        }
+
+        function easeInOut(p) {
+          return p < 0.5 ? 2 * p * p : 1 - Math.pow(-2 * p + 2, 2) / 2;
+        }
+
+        captureScene("s1");
+        captureScene("s2");
+        glCanvas.style.display = "block";
+        renderShader(progPass, sceneTextures["s1"], sceneTextures["s1"], 0);
+        document.querySelectorAll(".scene").forEach(function (s) {
+          s.style.opacity = "0";
+        });
+
+        var tl = gsap.timeline({
+          paused: true,
+          onUpdate: function () {
+            var t = tl.time();
+            if (t >= 1.0 && t < 3.0) {
+              renderShader(
+                progTrans,
+                sceneTextures["s1"],
+                sceneTextures["s2"],
+                easeInOut((t - 1.0) / 2.0),
+              );
+            } else if (t >= 3.0) {
+              renderShader(progPass, sceneTextures["s2"], sceneTextures["s2"], 0);
+            } else {
+              renderShader(progPass, sceneTextures["s1"], sceneTextures["s1"], 0);
+            }
+          },
+        });
+        tl.to({ v: 0 }, { v: 1, duration: 4, ease: "none" }, 0);
+        window.__timelines["main"] = tl;
+      } // end if (gl)
+    </script>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="gravitational-lens" data-composition-src="compositions/gravitational-lens.html" data-start="0" data-duration="4" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/halftone-field.mdx b/docs/catalog/blocks/halftone-field.mdx
new file mode 100644
index 0000000000..5a6c6d7fdd
--- /dev/null
+++ b/docs/catalog/blocks/halftone-field.mdx
@@ -0,0 +1,448 @@
+---
+title: "Halftone Field"
+description: "A full-bleed halftone light field: a grid of dots whose size and colour track a slow flowing simplex-noise field, so broad bands of light sweep across a mostly-black frame like a giant LED wall showing a plasma. Built to run under type."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/blocks/halftone-field.html"
+  compositionId="halftone-field"
+  compositionSrc="compositions/halftone-field.html"
+  variables={[{"id":"frequency","type":"number","label":"Field frequency","default":2,"min":1,"max":10,"step":0.1},{"id":"speed","type":"number","label":"Flow speed","default":5,"min":0,"max":10,"step":0.1},{"id":"cellSize","type":"number","label":"Cell size","default":54,"min":1,"max":100,"step":1},{"id":"gamma","type":"number","label":"Gamma (midtone crush)","default":12,"min":1,"max":20,"step":0.1},{"id":"paletteBias","type":"number","label":"Palette bias","default":2,"min":0,"max":20,"step":0.5},{"id":"palette1","type":"color","label":"Palette stop 1 (lows)","default":"#00AAFF"},{"id":"palette2","type":"color","label":"Palette stop 2","default":"#C2FF67"},{"id":"palette3","type":"color","label":"Palette stop 3","default":"#6600FF"},{"id":"palette4","type":"color","label":"Palette stop 4 (crests)","default":"#000000"},{"id":"background","type":"color","label":"Background","default":"#000000"},{"id":"quantize","type":"boolean","label":"Quantise to 30fps (stepped)","default":false}]}
+>
+
+```html halftone-field.html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Halftone Field</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #000;
+        overflow: hidden;
+      }
+      #hlf-root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #hlf-backdrop {
+        position: absolute;
+        inset: 0;
+        background: #000000;
+      }
+      #hlf-canvas {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="hlf-root"
+      data-composition-id="halftone-field"
+      data-root="true"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="10"
+      data-composition-variables='[
+        {"id":"frequency","type":"number","label":"Field frequency","default":2,"min":1,"max":10,"step":0.1},
+        {"id":"speed","type":"number","label":"Flow speed","default":5,"min":0,"max":10,"step":0.1},
+        {"id":"cellSize","type":"number","label":"Cell size","default":54,"min":1,"max":100,"step":1},
+        {"id":"gamma","type":"number","label":"Gamma (midtone crush)","default":12,"min":1,"max":20,"step":0.1},
+        {"id":"paletteBias","type":"number","label":"Palette bias","default":2,"min":0,"max":20,"step":0.5},
+        {"id":"palette1","type":"color","label":"Palette stop 1 (lows)","default":"#00AAFF"},
+        {"id":"palette2","type":"color","label":"Palette stop 2","default":"#C2FF67"},
+        {"id":"palette3","type":"color","label":"Palette stop 3","default":"#6600FF"},
+        {"id":"palette4","type":"color","label":"Palette stop 4 (crests)","default":"#000000"},
+        {"id":"background","type":"color","label":"Background","default":"#000000"},
+        {"id":"quantize","type":"boolean","label":"Quantise to 30fps (stepped)","default":false}
+      ]'
+    >
+      <div id="hlf-backdrop"></div>
+      <canvas id="hlf-canvas" width="1920" height="1080"></canvas>
+
+      <!-- Driver clip: gives HyperFrames a timed element to own on track 0. -->
+      <div
+        id="hlf-drv"
+        class="clip"
+        data-start="0"
+        data-duration="10"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+
+    <script>
+      (function () {
+        var DUR = 10;
+        var W = 1920;
+        var H = 1080;
+
+        var V = (window.__hyperframes && window.__hyperframes.getVariables()) || {};
+        var CS = getComputedStyle(document.getElementById("hlf-root"));
+
+        // The runtime defines every declared variable as `--<id>` on the root,
+        // so a host stylesheet can override one there too. Read the custom
+        // property first, fall back to the declared value when it is unset.
+        function raw(id) {
+          var css = CS.getPropertyValue("--" + id.toLowerCase()).trim();
+          return css !== "" ? css : V[id];
+        }
+        function num(id, fallback) {
+          var n = parseFloat(raw(id));
+          return isFinite(n) ? n : fallback;
+        }
+        function bool(id) {
+          var v = raw(id);
+          return v === true || /^(true|1|on|yes)$/i.test(String(v));
+        }
+        // #RGB / #RRGGBB -> [r, g, b] in 0..1. Anything else falls back.
+        function rgb(id, fallback) {
+          var s = String(raw(id) || "").trim();
+          var m = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(s);
+          if (!m) s = fallback;
+          else s = "#" + m[1];
+          var hex = s.slice(1);
+          if (hex.length === 3) {
+            hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+          }
+          var n = parseInt(hex, 16);
+          return [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255];
+        }
+        // The reference exposes 1-10 / 1-100 / 1-20 dials and maps them onto
+        // the ranges the shader actually wants.
+        function mapLinear(x, a1, a2, b1, b2) {
+          return b1 + ((x - a1) * (b2 - b1)) / (a2 - a1);
+        }
+
+        var FREQ = mapLinear(num("frequency", 2), 1, 10, 0.3, 6);
+        var SPEED = num("speed", 5) * 0.05;
+        var CELL = mapLinear(num("cellSize", 54), 1, 100, 6, 60);
+        var GAMMA = mapLinear(num("gamma", 12), 1, 20, 0.5, 8);
+        var BIAS = num("paletteBias", 2) * 0.05;
+        var PAL = [
+          rgb("palette1", "#00AAFF"),
+          rgb("palette2", "#C2FF67"),
+          rgb("palette3", "#6600FF"),
+          rgb("palette4", "#000000"),
+        ];
+        var BG = rgb("background", "#000000");
+        var QUANTIZE = bool("quantize");
+
+        document.getElementById("hlf-backdrop").style.background =
+          "rgb(" +
+          BG.map(function (c) {
+            return Math.round(c * 255);
+          }).join(",") +
+          ")";
+
+        var canvas = document.getElementById("hlf-canvas");
+        var gl =
+          canvas.getContext("webgl", {
+            alpha: false,
+            antialias: false,
+            depth: false,
+            stencil: false,
+            preserveDrawingBuffer: true,
+            powerPreference: "high-performance",
+          }) ||
+          canvas.getContext("experimental-webgl", {
+            alpha: false,
+            preserveDrawingBuffer: true,
+          });
+
+        var VERT = "attribute vec2 aPos;\nvoid main() { gl_Position = vec4(aPos, 0.0, 1.0); }";
+
+        // Single pass. The reference renders the colour field into a target and
+        // samples it at each cell centre, but the field is analytic, so
+        // evaluating it at the cell centre here is the same value without the
+        // round trip through a texture.
+        var FRAG = `
+precision highp float;
+uniform vec2 uRes;
+uniform float uTime;
+uniform float uFreq;
+uniform float uSpeed;
+uniform float uCell;
+uniform float uGamma;
+uniform float uBias;
+uniform vec3 uPal0;
+uniform vec3 uPal1;
+uniform vec3 uPal2;
+uniform vec3 uPal3;
+uniform vec3 uBg;
+
+// 3D simplex noise — Ashima Arts / Stefan Gustavson (MIT).
+vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
+vec4 mod289(vec4 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
+vec4 permute(vec4 x) { return mod289(((x * 34.0) + 1.0) * x); }
+vec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; }
+
+float snoise(vec3 v) {
+  const vec2 C = vec2(1.0 / 6.0, 1.0 / 3.0);
+  const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);
+
+  vec3 i = floor(v + dot(v, C.yyy));
+  vec3 x0 = v - i + dot(i, C.xxx);
+
+  vec3 g = step(x0.yzx, x0.xyz);
+  vec3 l = 1.0 - g;
+  vec3 i1 = min(g.xyz, l.zxy);
+  vec3 i2 = max(g.xyz, l.zxy);
+
+  vec3 x1 = x0 - i1 + C.xxx;
+  vec3 x2 = x0 - i2 + C.yyy;
+  vec3 x3 = x0 - D.yyy;
+
+  i = mod289(i);
+  vec4 p = permute(permute(permute(
+      i.z + vec4(0.0, i1.z, i2.z, 1.0)) +
+      i.y + vec4(0.0, i1.y, i2.y, 1.0)) +
+      i.x + vec4(0.0, i1.x, i2.x, 1.0));
+
+  float n_ = 0.142857142857;
+  vec3 ns = n_ * D.wyz - D.xzx;
+
+  vec4 j = p - 49.0 * floor(p * ns.z * ns.z);
+
+  vec4 x_ = floor(j * ns.z);
+  vec4 y_ = floor(j - 7.0 * x_);
+
+  vec4 x = x_ * ns.x + ns.yyyy;
+  vec4 y = y_ * ns.x + ns.yyyy;
+  vec4 h = 1.0 - abs(x) - abs(y);
+
+  vec4 b0 = vec4(x.xy, y.xy);
+  vec4 b1 = vec4(x.zw, y.zw);
+
+  vec4 s0 = floor(b0) * 2.0 + 1.0;
+  vec4 s1 = floor(b1) * 2.0 + 1.0;
+  vec4 sh = -step(h, vec4(0.0));
+
+  vec4 a0 = b0.xzyw + s0.xzyw * sh.xxyy;
+  vec4 a1 = b1.xzyw + s1.xzyw * sh.zzww;
+
+  vec3 p0 = vec3(a0.xy, h.x);
+  vec3 p1 = vec3(a0.zw, h.y);
+  vec3 p2 = vec3(a1.xy, h.z);
+  vec3 p3 = vec3(a1.zw, h.w);
+
+  vec4 norm = taylorInvSqrt(vec4(dot(p0, p0), dot(p1, p1), dot(p2, p2), dot(p3, p3)));
+  p0 *= norm.x;
+  p1 *= norm.y;
+  p2 *= norm.z;
+  p3 *= norm.w;
+
+  vec4 m = max(0.6 - vec4(dot(x0, x0), dot(x1, x1), dot(x2, x2), dot(x3, x3)), 0.0);
+  m = m * m;
+  return 42.0 * dot(m * m, vec4(dot(p0, x0), dot(p1, x1), dot(p2, x2), dot(p3, x3)));
+}
+
+// Full-saturation, full-value HSV: only the hue ramp survives.
+vec3 hue2rgb(float h) {
+  return clamp(abs(mod(h * 6.0 + vec3(0.0, 4.0, 2.0), 6.0) - 3.0) - 1.0, 0.0, 1.0);
+}
+
+// Piecewise-linear ramp across the four palette stops.
+vec3 ramp(float v) {
+  float x = clamp(v, 0.0, 1.0) * 3.0;
+  vec3 c = mix(uPal0, uPal1, clamp(x, 0.0, 1.0));
+  c = mix(c, uPal2, clamp(x - 1.0, 0.0, 1.0));
+  c = mix(c, uPal3, clamp(x - 2.0, 0.0, 1.0));
+  return c;
+}
+
+void main() {
+  // One sample per cell, taken at the cell centre.
+  vec2 cell = floor(gl_FragCoord.xy / uCell);
+  vec2 centre = (cell + 0.5) * uCell;
+
+  vec2 st = centre / uRes;
+  st.x *= uRes.x / uRes.y;
+
+  float hue = abs(snoise(vec3(st * uFreq, uTime * uSpeed)));
+  vec3 field = hue2rgb(hue);
+
+  // The gamma is the whole look: it crushes the midtones so most of the frame
+  // stays background and only the crests of the field open up.
+  float gray = pow(dot(field, vec3(0.2126, 0.7152, 0.0722)), uGamma);
+  float v = clamp(gray + uBias, 0.0, 1.0);
+
+  float radius = v * 0.5 * uCell;
+  float d = length(gl_FragCoord.xy - centre);
+  float mask = 1.0 - smoothstep(radius - 1.0, radius + 1.0, d);
+
+  gl_FragColor = vec4(mix(uBg, ramp(v), mask), 1.0);
+}
+`;
+
+        var uni = {};
+        var ready = false;
+
+        function compile(type, src) {
+          var sh = gl.createShader(type);
+          gl.shaderSource(sh, src);
+          gl.compileShader(sh);
+          if (!gl.getShaderParameter(sh, gl.COMPILE_STATUS)) {
+            throw new Error("halftone-field shader: " + gl.getShaderInfoLog(sh));
+          }
+          return sh;
+        }
+
+        if (gl) {
+          var prog = gl.createProgram();
+          gl.attachShader(prog, compile(gl.VERTEX_SHADER, VERT));
+          gl.attachShader(prog, compile(gl.FRAGMENT_SHADER, FRAG));
+          gl.linkProgram(prog);
+          if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {
+            throw new Error("halftone-field link: " + gl.getProgramInfoLog(prog));
+          }
+          gl.useProgram(prog);
+
+          var buf = gl.createBuffer();
+          gl.bindBuffer(gl.ARRAY_BUFFER, buf);
+          gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
+          var loc = gl.getAttribLocation(prog, "aPos");
+          gl.enableVertexAttribArray(loc);
+          gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0);
+
+          [
+            "uRes",
+            "uTime",
+            "uFreq",
+            "uSpeed",
+            "uCell",
+            "uGamma",
+            "uBias",
+            "uPal0",
+            "uPal1",
+            "uPal2",
+            "uPal3",
+            "uBg",
+          ].forEach(function (n) {
+            uni[n] = gl.getUniformLocation(prog, n);
+          });
+
+          gl.viewport(0, 0, W, H);
+          gl.uniform2f(uni.uRes, W, H);
+          gl.uniform1f(uni.uFreq, FREQ);
+          gl.uniform1f(uni.uSpeed, SPEED);
+          gl.uniform1f(uni.uCell, CELL);
+          gl.uniform1f(uni.uGamma, GAMMA);
+          gl.uniform1f(uni.uBias, BIAS);
+          gl.uniform3f(uni.uPal0, PAL[0][0], PAL[0][1], PAL[0][2]);
+          gl.uniform3f(uni.uPal1, PAL[1][0], PAL[1][1], PAL[1][2]);
+          gl.uniform3f(uni.uPal2, PAL[2][0], PAL[2][1], PAL[2][2]);
+          gl.uniform3f(uni.uPal3, PAL[3][0], PAL[3][1], PAL[3][2]);
+          gl.uniform3f(uni.uBg, BG[0], BG[1], BG[2]);
+          ready = true;
+        }
+
+        // Every frame is computed from t alone — the field is a closed-form
+        // function of position and time. No accumulator, no clock, no PRNG.
+        // `quantize` snaps t to a 30fps grid for the stepped LED-wall look.
+        function draw(t) {
+          if (!ready) return;
+          gl.uniform1f(uni.uTime, QUANTIZE ? Math.floor(t * 30) / 30 : t);
+          gl.drawArrays(gl.TRIANGLES, 0, 3);
+          gl.flush();
+        }
+
+        window.__timelines = window.__timelines || {};
+        var tl = gsap.timeline({ paused: true });
+
+        // The canvas is repainted from a property SETTER, not from onUpdate:
+        // gsap's seek(t) suppresses events by default, so an onUpdate callback
+        // silently never fires on a scrub and the canvas freezes on frame 0.
+        // Tweened values are always written during render, suppressed or not,
+        // so this fires on every seek — and hands us the frame time directly.
+        var driver = { _t: 0 };
+        Object.defineProperty(driver, "t", {
+          get: function () {
+            return this._t;
+          },
+          set: function (v) {
+            this._t = v;
+            draw(v);
+          },
+        });
+        tl.to(driver, { t: DUR, duration: DUR, ease: "none" }, 0);
+        window.__timelines["halftone-field"] = tl;
+
+        draw(0);
+      })();
+    </script>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add halftone-field" />
+
+That writes one file: `compositions/halftone-field.html`.
+
+## Add it to your video
+
+It runs for 10 seconds at 1920×1080. Paste this into your composition:
+
+```html index.html
+<div
+  data-composition-id="halftone-field"
+  data-composition-src="compositions/halftone-field.html"
+  data-start="0"
+  data-duration="10"
+  data-track-index="1"
+  data-width="1920"
+  data-height="1080"
+></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.
+
+## Change how it looks
+
+Set these CSS variables on the block:
+
+- `--frequency` — Field frequency (1 = broad swells, 10 = fine mottle). Defaults to `2`.
+- `--speed` — Flow speed (0 freezes the field). Defaults to `5`.
+- `--cellsize` — Cell size (dot pitch, 1 = 6px, 100 = 60px). Defaults to `54`.
+- `--gamma` — Gamma: midtone crush, the whole look. Low values flatten it to an even grey dot field. Defaults to `12`.
+- `--palettebias` — Palette bias: floor under every dot's size and palette position. 0 lets the darks go fully black. Defaults to `2`.
+- `--palette1` — Palette stop 1 (lows). Defaults to `#00AAFF`.
+- `--palette2` — Palette stop 2. Defaults to `#C2FF67`.
+- `--palette3` — Palette stop 3. Defaults to `#6600FF`.
+- `--palette4` — Palette stop 4 (crests). Defaults to `#000000`.
+- `--background` — Background. Defaults to `#000000`.
+- `--quantize` — Quantise to 30fps for a stepped LED-wall look. Defaults to `false`. Options: `false`, `true`.
+
+{/* hf:generated-footer */}
+
+Tagged `webgl` `shader` `background` `texture` `halftone`.
+
+## 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/hw-frame.mdx b/docs/catalog/blocks/hw-frame.mdx
index 7515993d85..e8db3656ba 100644
--- a/docs/catalog/blocks/hw-frame.mdx
+++ b/docs/catalog/blocks/hw-frame.mdx
@@ -3,13 +3,13 @@ title: "Sketched Frame"
 description: "Media in a hand-drawn border with corner doodles and a handwritten caption; the unit tilts slightly and boils (images inside the block; keep live footage in the host)"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-frame.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-frame.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/hw-frame.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Sketched Frame preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add hw-frame
-```
+<InstallCommand command="npx hyperframes add hw-frame" />
 
 That writes `compositions/hw-frame.html`, plus 1 supporting file under `assets/fonts/`.
 
@@ -32,6 +32,317 @@ It runs for 8 seconds at 1920×1080. Paste this into your composition:
 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={`hw-frame.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      @font-face {
+        font-family: "Caveat";
+        src: url("assets/fonts/Caveat-700-latin.woff2") format("woff2");
+        font-weight: 700;
+        font-display: block;
+      }
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      #hw-fr-root {
+        --hw-font-print: "Caveat", cursive;
+        --hw-font-script: "Caveat", cursive;
+        --hw-ink: #f4f2ec;
+        --hw-accent-warm: #ffb020;
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #1b1a1e;
+        font-family: var(--hw-font-print, "Caveat", cursive);
+      }
+      #hw-fr-media {
+        position: absolute;
+        overflow: hidden;
+        border-radius: 10px;
+      }
+      #hw-fr-media img,
+      #hw-fr-media .hw-fr-fill {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+      .hw-fr-fill {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: 700;
+        font-size: 110px;
+        color: rgba(244, 242, 236, 0.9);
+        background: linear-gradient(150deg, #35604a 0%, #14231c 100%);
+      }
+      #hw-fr-svg {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        overflow: visible;
+      }
+      #hw-fr-svg path {
+        fill: none;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+      #hw-fr-border {
+        stroke: var(--hw-ink);
+        stroke-width: 7;
+      }
+      .hw-fr-doodle {
+        stroke: var(--hw-accent-warm);
+        stroke-width: 5;
+      }
+      #hw-fr-caption {
+        position: absolute;
+        width: 100%;
+        text-align: center;
+        font-weight: 700;
+        font-size: 58px;
+        color: var(--hw-ink);
+        opacity: 0;
+        text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="hw-fr-root"
+      data-composition-id="hw-frame"
+      data-start="0"
+      data-duration="8"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="hw-fr-media"></div>
+      <svg id="hw-fr-svg" viewBox="0 0 1920 1080"><path id="hw-fr-border"></path></svg>
+      <div id="hw-fr-caption"></div>
+      <div
+        id="hw-fr-drv"
+        class="clip"
+        data-start="0"
+        data-duration="8"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- published parameters ----
+           A sketched frame: content inside a hand-drawn border with
+           corner doodles + optional caption. IMAGES ONLY inside this block
+           (learning: the runtime never seeks media elements inside
+           sub-compositions) — for live footage keep the media element in
+           the HOST root positioned over the documented media slot below;
+           layering two framed clips = instant PiP. */
+        var CONFIG = {
+          src: null, // IMAGE path; null -> stand-in gradient (demo)
+          slot: { x: 480, y: 180, w: 960, h: 620 }, // the media window (documented for host-side footage)
+          caption: "our trip!",
+          doodles: true, // corner sparks
+          tilt: -1.2, // deg — the whole framed unit sits slightly rotated
+          seed: 14,
+          boil: { enabled: true, amp: 1.6, rot: 0.35, frameDrop: 3 },
+          animationIn: true,
+          animationOut: true,
+        };
+
+        var DUR = 8;
+        function clamp(v, lo, hi) {
+          return Math.min(hi, Math.max(lo, v));
+        }
+        var IN = clamp(DUR * 0.08, 0.3, 0.8);
+        var OUT = clamp(DUR * 0.06, 0.25, 0.6);
+
+        /* hw family runtime */
+        window.hwOnUpdate = function (tl, fn) {
+          if (!tl.__hwRenders) {
+            tl.__hwRenders = [];
+            tl.eventCallback("onUpdate", function () {
+              for (var i = 0; i < tl.__hwRenders.length; i++) tl.__hwRenders[i]();
+            });
+          }
+          tl.__hwRenders.push(fn);
+          fn();
+        };
+        window.hwHash = function (n, seed) {
+          var x = Math.sin(n * 127.1 + (seed || 1) * 311.7) * 43758.5453;
+          return (x - Math.floor(x)) * 2 - 1;
+        };
+        window.hwBoil = function (tl, target, opts) {
+          opts = opts || {};
+          var amp = opts.amp !== undefined ? opts.amp : 1.6;
+          var rot = opts.rot !== undefined ? opts.rot : 0.5;
+          var fps = opts.fps || 30;
+          var drop = opts.frameDrop || 3;
+          var seed = opts.seed || 1;
+          var els = gsap.utils.toArray(target);
+          window.hwOnUpdate(tl, function () {
+            var step = Math.floor((tl.time() * fps) / drop);
+            for (var i = 0; i < els.length; i++) {
+              gsap.set(els[i], {
+                x: window.hwHash(step * 3 + i * 97, seed) * amp,
+                y: window.hwHash(step * 3 + 1 + i * 97, seed) * amp,
+                rotation: (opts.baseRot || 0) + window.hwHash(step * 3 + 2 + i * 97, seed) * rot,
+              });
+            }
+          });
+        };
+        window.hwWobbleRect = function (w, h, r, seed, amp) {
+          amp = amp === undefined ? 3.5 : amp;
+          function wob(n) {
+            return window.hwHash(n, seed) * amp;
+          }
+          var d = "M " + (r + wob(1)) + " " + wob(2);
+          d += " L " + (w / 2 + wob(3)) + " " + wob(4);
+          d += " L " + (w - r + wob(5)) + " " + wob(6);
+          d += " Q " + (w + wob(7)) + " " + wob(8) + " " + (w + wob(9)) + " " + (r + wob(10));
+          d += " L " + (w + wob(11)) + " " + (h / 2 + wob(12));
+          d += " L " + (w + wob(13)) + " " + (h - r + wob(14));
+          d +=
+            " Q " +
+            (w + wob(15)) +
+            " " +
+            (h + wob(16)) +
+            " " +
+            (w - r + wob(17)) +
+            " " +
+            (h + wob(18));
+          d += " L " + (w / 2 + wob(19)) + " " + (h + wob(20));
+          d += " L " + (r + wob(21)) + " " + (h + wob(22));
+          d += " Q " + wob(23) + " " + (h + wob(24)) + " " + wob(25) + " " + (h - r + wob(26));
+          d += " L " + wob(27) + " " + (h / 2 + wob(28));
+          d += " L " + wob(29) + " " + (r + wob(30));
+          d += " Q " + wob(31) + " " + wob(32) + " " + (r + wob(33)) + " " + wob(34);
+          return d;
+        };
+
+        var S = CONFIG.slot;
+        var media = document.getElementById("hw-fr-media");
+        media.style.left = S.x + "px";
+        media.style.top = S.y + "px";
+        media.style.width = S.w + "px";
+        media.style.height = S.h + "px";
+        if (CONFIG.src) {
+          var img = document.createElement("img");
+          img.src = CONFIG.src;
+          media.appendChild(img);
+        } else {
+          var d = document.createElement("div");
+          d.className = "hw-fr-fill";
+          d.textContent = "photo";
+          media.appendChild(d);
+        }
+
+        /* border drawn slightly outside the slot */
+        var NS = "http://www.w3.org/2000/svg";
+        var border = document.getElementById("hw-fr-border");
+        var m = 16;
+        border.setAttribute("d", window.hwWobbleRect(S.w + m * 2, S.h + m * 2, 18, CONFIG.seed, 5));
+        border.setAttribute("transform", "translate(" + (S.x - m) + " " + (S.y - m) + ")");
+
+        /* corner doodles: little three-spark bursts */
+        var svg = document.getElementById("hw-fr-svg");
+        var doodles = [];
+        if (CONFIG.doodles) {
+          [
+            [S.x - 40, S.y - 34],
+            [S.x + S.w + 40, S.y - 26],
+            [S.x + S.w + 36, S.y + S.h + 30],
+          ].forEach(function (pt, i) {
+            var p = document.createElementNS(NS, "path");
+            p.setAttribute("class", "hw-fr-doodle");
+            p.setAttribute("id", "hw-fr-doodle-" + i);
+            var dd = "";
+            for (var k = 0; k < 3; k++) {
+              var a = -0.6 - k * 0.5 + window.hwHash(i * 9 + k, CONFIG.seed) * 0.2;
+              var l = 26 + window.hwHash(i * 9 + k + 4, CONFIG.seed) * 8;
+              dd +=
+                "M " +
+                pt[0] +
+                " " +
+                pt[1] +
+                " l " +
+                (Math.cos(a) * l).toFixed(1) +
+                " " +
+                (Math.sin(a) * l).toFixed(1) +
+                " ";
+            }
+            p.setAttribute("d", dd);
+            svg.appendChild(p);
+            doodles.push(p);
+          });
+        }
+
+        var caption = document.getElementById("hw-fr-caption");
+        caption.textContent = CONFIG.caption || "";
+        caption.style.top = S.y + S.h + 42 + "px";
+
+        var tl = gsap.timeline({ paused: true });
+
+        if (CONFIG.animationIn) {
+          gsap.set(media, { opacity: 0, scale: 0.96 });
+          tl.to(media, { opacity: 1, scale: 1, duration: IN * 1.4, ease: "power2.out" }, IN * 0.8);
+        }
+        var blen = border.getTotalLength();
+        gsap.set(border, { strokeDasharray: blen, strokeDashoffset: blen });
+        tl.to(border, { strokeDashoffset: 0, duration: 0.9, ease: "power2.inOut" }, 0.2);
+        doodles.forEach(function (p, i) {
+          var l = p.getTotalLength();
+          gsap.set(p, { strokeDasharray: l, strokeDashoffset: l });
+          tl.to(p, { strokeDashoffset: 0, duration: 0.3, ease: "power2.out" }, 1.1 + i * 0.12);
+        });
+        if (CONFIG.caption) tl.to(caption, { opacity: 1, duration: 0.4, ease: "power2.out" }, 1.4);
+
+        /* whole framed unit tilts + boils together */
+        var unit = [media, svg, caption];
+        gsap.set(unit, { rotation: CONFIG.tilt, transformOrigin: "50% 50%" });
+        if (CONFIG.boil.enabled) {
+          window.hwBoil(tl, unit, {
+            amp: CONFIG.boil.amp,
+            rot: CONFIG.boil.rot,
+            frameDrop: CONFIG.boil.frameDrop,
+            seed: CONFIG.seed,
+            baseRot: CONFIG.tilt,
+          });
+        }
+
+        if (CONFIG.animationOut) {
+          tl.to(unit, { opacity: 0, duration: OUT, ease: "power2.in" }, DUR - OUT - 0.05);
+        }
+        tl.set("#hw-fr-root", { visibility: "hidden" }, DUR - 0.02);
+
+        window.__timelines["hw-frame"] = tl;
+      })();
+    </script>
+  </body>
+</html>
+```
+
+</Accordion>
+
 {/* hf:generated-footer */}
 
 Tagged `handwritten` `frame` `media`.
diff --git a/docs/catalog/blocks/hw-path-text.mdx b/docs/catalog/blocks/hw-path-text.mdx
index 74592ac67f..ae5e67eb4b 100644
--- a/docs/catalog/blocks/hw-path-text.mdx
+++ b/docs/catalog/blocks/hw-path-text.mdx
@@ -3,13 +3,13 @@ title: "Text Along a Path"
 description: "Handwriting flowing along any SVG path with a per-character reveal; the path is the only geometry input"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-path-text.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-path-text.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/hw-path-text.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Text Along a Path preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add hw-path-text
-```
+<InstallCommand command="npx hyperframes add hw-path-text" />
 
 That writes `compositions/hw-path-text.html`, plus 1 supporting file under `assets/fonts/`.
 
@@ -32,6 +32,208 @@ It runs for 6 seconds at 1920×1080. Paste this into your composition:
 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={`hw-path-text.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      @font-face {
+        font-family: "Caveat";
+        src: url("assets/fonts/Caveat-700-latin.woff2") format("woff2");
+        font-weight: 700;
+        font-display: block;
+      }
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      #hw-pt-root {
+        --hw-font-print: "Caveat", cursive;
+        --hw-font-script: "Caveat", cursive;
+        --hw-ink: #f4f2ec;
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent;
+        font-family: var(--hw-font-print, "Caveat", cursive);
+      }
+      #hw-pt-svg {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        overflow: visible;
+      }
+      /* The textPath carrier is geometry only — without fill:none it inherits
+         SVG's default black fill and renders as a solid blob under the text. */
+      #hw-pt-path {
+        fill: none;
+      }
+      #hw-pt-guide {
+        fill: none;
+        stroke: rgba(244, 242, 236, 0.22);
+        stroke-width: 3;
+        stroke-dasharray: 2 14;
+        stroke-linecap: round;
+      }
+      #hw-pt-svg text {
+        font-family: var(--hw-font-print, "Caveat", cursive);
+        font-weight: 700;
+        fill: var(--hw-ink);
+      }
+      #hw-pt-svg tspan {
+        opacity: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="hw-pt-root"
+      data-composition-id="hw-path-text"
+      data-start="0"
+      data-duration="6"
+      data-width="1920"
+      data-height="1080"
+    >
+      <svg id="hw-pt-svg" viewBox="0 0 1920 1080">
+        <path id="hw-pt-path" d=""></path>
+        <path id="hw-pt-guide" d=""></path>
+        <text id="hw-pt-text" font-size="92">
+          <textPath id="hw-pt-tp" href="#hw-pt-path" startOffset="4%"></textPath>
+        </text>
+      </svg>
+      <div
+        id="hw-pt-drv"
+        class="clip"
+        data-start="0"
+        data-duration="6"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- published parameters ----
+           Handwriting along any path — custom path text, natively via
+           SVG textPath (no Fusion overlay). CONFIG.d is the whole design. */
+        var CONFIG = {
+          text: "come on this wild journey with me...",
+          d: "M 220 700 C 520 480, 900 820, 1230 560 S 1700 380, 1780 420",
+          fontSize: 92,
+          showGuide: true, // faint dotted guide under the writing
+          typeCharDelay: 0.05,
+          seed: 12,
+          boil: { enabled: true, amp: 1.4, rot: 0.3, frameDrop: 3 },
+          animationOut: true,
+        };
+
+        var DUR = 6;
+        function clamp(v, lo, hi) {
+          return Math.min(hi, Math.max(lo, v));
+        }
+        var OUT = clamp(DUR * 0.06, 0.25, 0.6);
+
+        /* hw family runtime */
+        window.hwOnUpdate = function (tl, fn) {
+          if (!tl.__hwRenders) {
+            tl.__hwRenders = [];
+            tl.eventCallback("onUpdate", function () {
+              for (var i = 0; i < tl.__hwRenders.length; i++) tl.__hwRenders[i]();
+            });
+          }
+          tl.__hwRenders.push(fn);
+          fn();
+        };
+        window.hwHash = function (n, seed) {
+          var x = Math.sin(n * 127.1 + (seed || 1) * 311.7) * 43758.5453;
+          return (x - Math.floor(x)) * 2 - 1;
+        };
+        window.hwBoil = function (tl, target, opts) {
+          opts = opts || {};
+          var amp = opts.amp !== undefined ? opts.amp : 1.6;
+          var rot = opts.rot !== undefined ? opts.rot : 0.5;
+          var fps = opts.fps || 30;
+          var drop = opts.frameDrop || 3;
+          var seed = opts.seed || 1;
+          var els = gsap.utils.toArray(target);
+          window.hwOnUpdate(tl, function () {
+            var step = Math.floor((tl.time() * fps) / drop);
+            for (var i = 0; i < els.length; i++) {
+              gsap.set(els[i], {
+                x: window.hwHash(step * 3 + i * 97, seed) * amp,
+                y: window.hwHash(step * 3 + 1 + i * 97, seed) * amp,
+                rotation: (opts.baseRot || 0) + window.hwHash(step * 3 + 2 + i * 97, seed) * rot,
+              });
+            }
+          });
+        };
+
+        document.getElementById("hw-pt-path").setAttribute("d", CONFIG.d);
+        if (CONFIG.showGuide) document.getElementById("hw-pt-guide").setAttribute("d", CONFIG.d);
+        document.getElementById("hw-pt-text").setAttribute("font-size", CONFIG.fontSize);
+
+        /* per-char tspans along the path */
+        var NS = "http://www.w3.org/2000/svg";
+        var tp = document.getElementById("hw-pt-tp");
+        Array.from(CONFIG.text).forEach(function (ch) {
+          var t = document.createElementNS(NS, "tspan");
+          t.textContent = ch;
+          tp.appendChild(t);
+        });
+
+        var tl = gsap.timeline({ paused: true });
+
+        /* guide draws first, then the handwriting types along it */
+        var guide = document.getElementById("hw-pt-guide");
+        if (CONFIG.showGuide) {
+          var glen = guide.getTotalLength();
+          gsap.set(guide, { strokeDasharray: "2 14", strokeDashoffset: glen });
+          tl.to(guide, { strokeDashoffset: 0, duration: 0.9, ease: "power2.inOut" }, 0.2);
+        }
+        var chars = tp.querySelectorAll("tspan");
+        var delay = Math.min(CONFIG.typeCharDelay, 2.6 / Math.max(1, chars.length));
+        tl.to(chars, { opacity: 1, duration: 0.03, stagger: delay, ease: "none" }, 0.7);
+
+        if (CONFIG.boil.enabled) {
+          window.hwBoil(tl, "#hw-pt-svg", {
+            amp: CONFIG.boil.amp,
+            rot: CONFIG.boil.rot,
+            frameDrop: CONFIG.boil.frameDrop,
+            seed: CONFIG.seed,
+          });
+        }
+
+        if (CONFIG.animationOut) {
+          tl.to("#hw-pt-svg", { opacity: 0, duration: OUT, ease: "power2.in" }, DUR - OUT - 0.05);
+        }
+        tl.set("#hw-pt-root", { visibility: "hidden" }, DUR - 0.02);
+
+        window.__timelines["hw-path-text"] = tl;
+      })();
+    </script>
+  </body>
+</html>
+```
+
+</Accordion>
+
 {/* hf:generated-footer */}
 
 Tagged `handwritten` `typography` `path` `overlay`.
diff --git a/docs/catalog/blocks/hw-pipeline.mdx b/docs/catalog/blocks/hw-pipeline.mdx
index 969855905e..8375a875ab 100644
--- a/docs/catalog/blocks/hw-pipeline.mdx
+++ b/docs/catalog/blocks/hw-pipeline.mdx
@@ -3,13 +3,13 @@ title: "Hand-Drawn Flowchart"
 description: "Wobbled boxes with handwritten labels joined by curved connectors, drawing on in sequence from a node list"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-pipeline.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-pipeline.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/hw-pipeline.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Hand-Drawn Flowchart preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add hw-pipeline
-```
+<InstallCommand command="npx hyperframes add hw-pipeline" />
 
 That writes `compositions/hw-pipeline.html`, plus 1 supporting file under `assets/fonts/`.
 
@@ -32,6 +32,332 @@ It runs for 7 seconds at 1920×1080. Paste this into your composition:
 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={`hw-pipeline.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      @font-face {
+        font-family: "Caveat";
+        src: url("assets/fonts/Caveat-700-latin.woff2") format("woff2");
+        font-weight: 700;
+        font-display: block;
+      }
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      #hw-pl-root {
+        --hw-font-print: "Caveat", cursive;
+        --hw-font-script: "Caveat", cursive;
+        --hw-ink: #f4f2ec;
+        /* Warm marker accent, matching hw-frame / hw-title / hw-underline. The
+           previous #6d6dff read as a default UI blue against the family's ink. */
+        --hw-accent: #ffb020;
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent; /* overlays footage or boards */
+        font-family: var(--hw-font-print, "Caveat", cursive);
+      }
+      #hw-pl-svg {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        overflow: visible;
+      }
+      #hw-pl-svg path {
+        fill: none;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+      .hw-pl-box {
+        stroke: var(--hw-ink);
+        stroke-width: 6;
+      }
+      .hw-pl-conn {
+        stroke: var(--hw-accent);
+        stroke-width: 5;
+      }
+      .hw-pl-label {
+        position: absolute;
+        text-align: center;
+        font-weight: 700;
+        color: var(--hw-ink);
+        white-space: nowrap;
+        opacity: 0;
+        text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="hw-pl-root"
+      data-composition-id="hw-pipeline"
+      data-start="0"
+      data-duration="7"
+      data-width="1920"
+      data-height="1080"
+    >
+      <svg id="hw-pl-svg" viewBox="0 0 1920 1080"></svg>
+      <div id="hw-pl-labels"></div>
+      <div
+        id="hw-pl-drv"
+        class="clip"
+        data-start="0"
+        data-duration="7"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- published parameters ----
+           A flowchart "pipeline": wobbled boxes joined by curved
+           connectors, drawing on in sequence, all boiling. */
+        var CONFIG = {
+          nodes: [{ label: "Idea" }, { label: "Record" }, { label: "Shine!" }],
+          boxW: 320,
+          boxH: 170,
+          gap: 190, // px between boxes
+          y: 455, // top of the row; x centers automatically
+          fontSize: 56,
+          seed: 11,
+          boil: { enabled: true, amp: 1.6, rot: 0.4, frameDrop: 3 },
+          animationOut: true,
+        };
+
+        var DUR = 7;
+        function clamp(v, lo, hi) {
+          return Math.min(hi, Math.max(lo, v));
+        }
+        var OUT = clamp(DUR * 0.06, 0.25, 0.6);
+
+        /* hw family runtime */
+        window.hwOnUpdate = function (tl, fn) {
+          if (!tl.__hwRenders) {
+            tl.__hwRenders = [];
+            tl.eventCallback("onUpdate", function () {
+              for (var i = 0; i < tl.__hwRenders.length; i++) tl.__hwRenders[i]();
+            });
+          }
+          tl.__hwRenders.push(fn);
+          fn();
+        };
+        window.hwHash = function (n, seed) {
+          var x = Math.sin(n * 127.1 + (seed || 1) * 311.7) * 43758.5453;
+          return (x - Math.floor(x)) * 2 - 1;
+        };
+        window.hwBoil = function (tl, target, opts) {
+          opts = opts || {};
+          var amp = opts.amp !== undefined ? opts.amp : 1.6;
+          var rot = opts.rot !== undefined ? opts.rot : 0.5;
+          var fps = opts.fps || 30;
+          var drop = opts.frameDrop || 3;
+          var seed = opts.seed || 1;
+          var els = gsap.utils.toArray(target);
+          window.hwOnUpdate(tl, function () {
+            var step = Math.floor((tl.time() * fps) / drop);
+            for (var i = 0; i < els.length; i++) {
+              gsap.set(els[i], {
+                x: window.hwHash(step * 3 + i * 97, seed) * amp,
+                y: window.hwHash(step * 3 + 1 + i * 97, seed) * amp,
+                rotation: (opts.baseRot || 0) + window.hwHash(step * 3 + 2 + i * 97, seed) * rot,
+              });
+            }
+          });
+        };
+        window.hwWobbleRect = function (w, h, r, seed, amp) {
+          amp = amp === undefined ? 3.5 : amp;
+          function wob(n) {
+            return window.hwHash(n, seed) * amp;
+          }
+          var d = "M " + (r + wob(1)) + " " + wob(2);
+          d += " L " + (w / 2 + wob(3)) + " " + wob(4);
+          d += " L " + (w - r + wob(5)) + " " + wob(6);
+          d += " Q " + (w + wob(7)) + " " + wob(8) + " " + (w + wob(9)) + " " + (r + wob(10));
+          d += " L " + (w + wob(11)) + " " + (h / 2 + wob(12));
+          d += " L " + (w + wob(13)) + " " + (h - r + wob(14));
+          d +=
+            " Q " +
+            (w + wob(15)) +
+            " " +
+            (h + wob(16)) +
+            " " +
+            (w - r + wob(17)) +
+            " " +
+            (h + wob(18));
+          d += " L " + (w / 2 + wob(19)) + " " + (h + wob(20));
+          d += " L " + (r + wob(21)) + " " + (h + wob(22));
+          d += " Q " + wob(23) + " " + (h + wob(24)) + " " + wob(25) + " " + (h - r + wob(26));
+          d += " L " + wob(27) + " " + (h / 2 + wob(28));
+          d += " L " + wob(29) + " " + (r + wob(30));
+          d += " Q " + wob(31) + " " + wob(32) + " " + (r + wob(33)) + " " + wob(34);
+          return d;
+        };
+
+        var NS = "http://www.w3.org/2000/svg";
+        var svg = document.getElementById("hw-pl-svg");
+        var labels = document.getElementById("hw-pl-labels");
+        var n = CONFIG.nodes.length;
+        var totalW = n * CONFIG.boxW + (n - 1) * CONFIG.gap;
+        var x0 = (1920 - totalW) / 2;
+
+        var boxes = [],
+          conns = [],
+          labelEls = [];
+        CONFIG.nodes.forEach(function (node, i) {
+          var bx = x0 + i * (CONFIG.boxW + CONFIG.gap);
+          /* outer g owns the translate (GSAP transforms REPLACE the SVG
+             transform attribute — never boil the element that carries it);
+             inner g is the boil target */
+          var gOuter = document.createElementNS(NS, "g");
+          gOuter.setAttribute("transform", "translate(" + bx + " " + CONFIG.y + ")");
+          var g = document.createElementNS(NS, "g");
+          g.setAttribute("id", "hw-pl-box-g-" + i);
+          gOuter.appendChild(g);
+          var p = document.createElementNS(NS, "path");
+          p.setAttribute("class", "hw-pl-box");
+          p.setAttribute("id", "hw-pl-box-" + i);
+          p.setAttribute("d", window.hwWobbleRect(CONFIG.boxW, CONFIG.boxH, 24, CONFIG.seed + i));
+          g.appendChild(p);
+          svg.appendChild(gOuter);
+          boxes.push(p);
+
+          var label = document.createElement("div");
+          label.className = "hw-pl-label";
+          label.id = "hw-pl-label-" + i;
+          label.textContent = node.label;
+          label.style.left = bx + "px";
+          label.style.top = CONFIG.y + CONFIG.boxH / 2 - CONFIG.fontSize * 0.62 + "px";
+          label.style.width = CONFIG.boxW + "px";
+          label.style.fontSize = CONFIG.fontSize + "px";
+          labels.appendChild(label);
+          labelEls.push(label);
+
+          if (i < n - 1) {
+            var cx = bx + CONFIG.boxW,
+              cy = CONFIG.y + CONFIG.boxH / 2;
+            var ex = cx + CONFIG.gap,
+              ey = cy;
+            var c = document.createElementNS(NS, "path");
+            c.setAttribute("class", "hw-pl-conn");
+            c.setAttribute("id", "hw-pl-conn-" + i);
+            var sx = cx + 10,
+              tx = ex - 10;
+            var qx = cx + CONFIG.gap / 2 + window.hwHash(i * 9 + 2, CONFIG.seed) * 16,
+              qy = cy - 46 - window.hwHash(i * 9 + 3, CONFIG.seed) * 12;
+            /* Barbs follow the curve's incoming tangent. A quadratic's tangent
+               at its end is (end - control); barbs fixed to horizontal left the
+               head detached from a curve that arrives descending. Symmetric
+               length and angle, so it reads as one arrowhead. */
+            var ang = Math.atan2(ey - qy, tx - qx) + Math.PI;
+            var BARB = 26,
+              SPREAD = 0.42;
+            var b1x = tx + BARB * Math.cos(ang - SPREAD),
+              b1y = ey + BARB * Math.sin(ang - SPREAD);
+            var b2x = tx + BARB * Math.cos(ang + SPREAD),
+              b2y = ey + BARB * Math.sin(ang + SPREAD);
+            c.setAttribute(
+              "d",
+              "M " +
+                sx +
+                " " +
+                cy +
+                " Q " +
+                qx +
+                " " +
+                qy +
+                " " +
+                tx +
+                " " +
+                ey +
+                " M " +
+                tx +
+                " " +
+                ey +
+                " L " +
+                b1x +
+                " " +
+                b1y +
+                " M " +
+                tx +
+                " " +
+                ey +
+                " L " +
+                b2x +
+                " " +
+                b2y,
+            );
+            svg.appendChild(c);
+            conns.push(c);
+          }
+        });
+
+        var tl = gsap.timeline({ paused: true });
+
+        /* sequence: box draws -> label -> connector -> next box... */
+        var t = 0.3;
+        CONFIG.nodes.forEach(function (_, i) {
+          var p = boxes[i];
+          var len = p.getTotalLength();
+          gsap.set(p, { strokeDasharray: len, strokeDashoffset: len });
+          tl.to(p, { strokeDashoffset: 0, duration: 0.65, ease: "power2.inOut" }, t);
+          tl.to(labelEls[i], { opacity: 1, duration: 0.35, ease: "power2.out" }, t + 0.45);
+          t += 0.7;
+          if (i < conns.length) {
+            var c = conns[i];
+            var cl = c.getTotalLength();
+            gsap.set(c, { strokeDasharray: cl, strokeDashoffset: cl });
+            tl.to(c, { strokeDashoffset: 0, duration: 0.45, ease: "power2.inOut" }, t);
+            t += 0.5;
+          }
+        });
+
+        if (CONFIG.boil.enabled) {
+          var targets = boxes.map(function (_, i) {
+            return "#hw-pl-box-g-" + i;
+          });
+          window.hwBoil(tl, targets.concat([".hw-pl-conn", ".hw-pl-label"]), {
+            amp: CONFIG.boil.amp,
+            rot: CONFIG.boil.rot,
+            frameDrop: CONFIG.boil.frameDrop,
+            seed: CONFIG.seed,
+          });
+        }
+
+        if (CONFIG.animationOut) {
+          tl.to([svg, labels], { opacity: 0, duration: OUT, ease: "power2.in" }, DUR - OUT - 0.05);
+        }
+        tl.set("#hw-pl-root", { visibility: "hidden" }, DUR - 0.02);
+
+        window.__timelines["hw-pipeline"] = tl;
+      })();
+    </script>
+  </body>
+</html>
+```
+
+</Accordion>
+
 {/* hf:generated-footer */}
 
 Tagged `handwritten` `diagram` `data-viz` `overlay`.
diff --git a/docs/catalog/blocks/hw-scribble-transition.mdx b/docs/catalog/blocks/hw-scribble-transition.mdx
index 3c672f8775..c879312af0 100644
--- a/docs/catalog/blocks/hw-scribble-transition.mdx
+++ b/docs/catalog/blocks/hw-scribble-transition.mdx
@@ -3,13 +3,13 @@ title: "Scribble Transition"
 description: "Overlay transition: scribble bands accumulate to cover the frame with a solid backstop, the host cuts beneath, and the scribble clears"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-scribble-transition.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-scribble-transition.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/hw-scribble-transition.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Scribble Transition preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add hw-scribble-transition
-```
+<InstallCommand command="npx hyperframes add hw-scribble-transition" />
 
 That writes one file: `compositions/hw-scribble-transition.html`.
 
@@ -32,6 +32,167 @@ It runs for 2.2 seconds at 1920×1080. Paste this into your composition:
 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={`hw-scribble-transition.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      #hw-st-root {
+        /* Warm marker accent, consistent with the rest of the hw family.
+           Override per use via CONFIG.color. */
+        --hw-accent: #ffb020;
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent;
+      }
+      #hw-st-svg {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+      }
+      #hw-st-svg path {
+        fill: none;
+        stroke: var(--hw-accent);
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+      /* solid backstop that guarantees full coverage at the midpoint */
+      #hw-st-solid {
+        position: absolute;
+        inset: 0;
+        background: var(--hw-accent);
+        opacity: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="hw-st-root"
+      data-composition-id="hw-scribble-transition"
+      data-start="0"
+      data-duration="2.2"
+      data-width="1920"
+      data-height="1080"
+    >
+      <svg id="hw-st-svg" viewBox="0 0 1920 1080" data-layout-allow-overflow></svg>
+      <div id="hw-st-solid"></div>
+      <div
+        id="hw-st-drv"
+        class="clip"
+        data-start="0"
+        data-duration="2.2"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- published parameters ----
+           Overlay-transition (the mk-clone-wall model): fat scribble strokes
+           sweep across and cover the frame, a solid backstop guarantees full
+           coverage at the midpoint (the host hard-cuts beneath, ~0.9-1.4s
+           local), then everything clears. Place spanning the host's cut. */
+        var CONFIG = {
+          color: null, // css color; null = --hw-accent (warm marker)
+          bands: 7, // horizontal scribble bands
+          strokeScale: 1.0,
+          seed: 17,
+        };
+
+        var W = 1920,
+          H = 1080,
+          DUR = 2.2;
+
+        window.hwHash = function (n, seed) {
+          var x = Math.sin(n * 127.1 + (seed || 1) * 311.7) * 43758.5453;
+          return (x - Math.floor(x)) * 2 - 1;
+        };
+
+        var root = document.getElementById("hw-st-root");
+        if (CONFIG.color) root.style.setProperty("--hw-accent", CONFIG.color);
+        var NS = "http://www.w3.org/2000/svg";
+        var svg = document.getElementById("hw-st-svg");
+
+        /* fat zigzag bands, each covering a horizontal slice edge-to-edge */
+        var bandH = H / CONFIG.bands;
+        var paths = [];
+        for (var b = 0; b < CONFIG.bands; b++) {
+          var y0 = b * bandH + bandH / 2;
+          var d = "M -80 " + (y0 + window.hwHash(b * 17, CONFIG.seed) * 20).toFixed(1);
+          var zigs = 7;
+          for (var i = 1; i <= zigs; i++) {
+            var x = (W + 160) * (i / zigs) - 80;
+            var y =
+              y0 + (i % 2 ? -1 : 1) * bandH * 0.32 + window.hwHash(b * 17 + i, CONFIG.seed) * 16;
+            d += " L " + x.toFixed(1) + " " + y.toFixed(1);
+          }
+          var p = document.createElementNS(NS, "path");
+          p.setAttribute("d", d);
+          p.setAttribute("stroke-width", Math.ceil(bandH * 0.85 * CONFIG.strokeScale));
+          p.setAttribute("id", "hw-st-band-" + b);
+          svg.appendChild(p);
+          paths.push(p);
+        }
+
+        var tl = gsap.timeline({ paused: true });
+
+        /* 0-0.85: bands scribble on (staggered, alternating direction) */
+        paths.forEach(function (p, i) {
+          var len = p.getTotalLength();
+          gsap.set(p, { strokeDasharray: len, strokeDashoffset: i % 2 ? -len : len });
+          tl.to(p, { strokeDashoffset: 0, duration: 0.55, ease: "power2.in" }, 0.04 * i);
+        });
+        /* 0.8: solid backstop snaps in beneath the finished scribble — full
+           coverage guaranteed 0.85-1.35 (the host's cut window) */
+        tl.to("#hw-st-solid", { opacity: 1, duration: 0.12, ease: "none" }, 0.8);
+
+        /* 1.35-1.95: clear — bands scribble off the other way, backstop lifts */
+        tl.to("#hw-st-solid", { opacity: 0, duration: 0.15, ease: "none" }, 1.42);
+        paths.forEach(function (p, i) {
+          var len = p.getTotalLength();
+          tl.to(
+            p,
+            { strokeDashoffset: i % 2 ? len : -len, duration: 0.5, ease: "power2.out" },
+            1.42 + 0.035 * i,
+          );
+        });
+
+        /* hard kill the moment the last band clears (learning: kill roots
+           when the final fade completes, not at DUR) */
+        tl.set(root, { visibility: "hidden" }, 2.17);
+
+        window.__timelines["hw-scribble-transition"] = tl;
+      })();
+    </script>
+  </body>
+</html>
+```
+
+</Accordion>
+
 {/* hf:generated-footer */}
 
 Tagged `handwritten` `transition` `wipe`.
diff --git a/docs/catalog/blocks/hw-text-cloud.mdx b/docs/catalog/blocks/hw-text-cloud.mdx
index 6cb7a489fa..509ae69741 100644
--- a/docs/catalog/blocks/hw-text-cloud.mdx
+++ b/docs/catalog/blocks/hw-text-cloud.mdx
@@ -3,13 +3,13 @@ title: "Speech Bubble"
 description: "Hand-drawn speech bubble with a positionable tail: outline draws on, paper fill fades in, handwritten text types per character; boils"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-text-cloud.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-text-cloud.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/hw-text-cloud.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Speech Bubble preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add hw-text-cloud
-```
+<InstallCommand command="npx hyperframes add hw-text-cloud" />
 
 That writes `compositions/hw-text-cloud.html`, plus 1 supporting file under `assets/fonts/`.
 
@@ -32,6 +32,300 @@ It runs for 6 seconds at 1920×1080. Paste this into your composition:
 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={`hw-text-cloud.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      @font-face {
+        font-family: "Caveat";
+        src: url("assets/fonts/Caveat-700-latin.woff2") format("woff2");
+        font-weight: 700;
+        font-display: block;
+      }
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      #hw-tc-root {
+        /* ---- hw tokens ---- */
+        --hw-font-print: "Caveat", cursive;
+        --hw-font-script: "Caveat", cursive;
+        --hw-ink: #f4f2ec;
+        --hw-ink-dark: #26241f;
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent; /* overlays footage */
+        font-family: var(--hw-font-print, "Caveat", cursive);
+      }
+      #hw-tc-wrap {
+        position: absolute;
+        pointer-events: none;
+      }
+      #hw-tc-wrap svg {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        overflow: visible;
+      }
+      #hw-tc-fill {
+        fill: var(--hw-ink);
+        opacity: 0;
+      }
+      #hw-tc-stroke {
+        fill: none;
+        stroke: var(--hw-ink-dark);
+        stroke-width: 4;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+      #hw-tc-text {
+        position: absolute;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        font-weight: 700;
+        color: var(--hw-ink-dark);
+        line-height: 1.05;
+      }
+      #hw-tc-text .ch {
+        opacity: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="hw-tc-root"
+      data-composition-id="hw-text-cloud"
+      data-start="0"
+      data-duration="6"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="hw-tc-wrap">
+        <svg id="hw-tc-svg">
+          <path id="hw-tc-fill"></path>
+          <path id="hw-tc-stroke"></path>
+        </svg>
+        <div id="hw-tc-text"></div>
+      </div>
+      <div
+        id="hw-tc-drv"
+        class="clip"
+        data-start="0"
+        data-duration="6"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- published parameters ----
+           Speech bubble with a movable tip (pointable at any subject): wobbled
+           cloud, draw-on outline, paper fill, per-char handwritten text. */
+        var CONFIG = {
+          text: "what are you looking at?",
+          x: 620, // wrapper left
+          y: 180, // wrapper top
+          w: 560,
+          h: 300,
+          fontSize: 58,
+          tip: { side: "bottom-left", len: 90 }, // "bottom-left"|"bottom-right"
+          seed: 6,
+          boil: { enabled: true, amp: 1.6, rot: 0.4, frameDrop: 3 },
+          typeCharDelay: 0.03,
+          animationIn: true,
+          animationOut: true,
+        };
+
+        var DUR = 6;
+        function clamp(v, lo, hi) {
+          return Math.min(hi, Math.max(lo, v));
+        }
+        var OUT = clamp(DUR * 0.06, 0.25, 0.6);
+
+        /* hw family runtime */
+        window.hwOnUpdate = function (tl, fn) {
+          if (!tl.__hwRenders) {
+            tl.__hwRenders = [];
+            tl.eventCallback("onUpdate", function () {
+              for (var i = 0; i < tl.__hwRenders.length; i++) tl.__hwRenders[i]();
+            });
+          }
+          tl.__hwRenders.push(fn);
+          fn();
+        };
+        window.hwHash = function (n, seed) {
+          var x = Math.sin(n * 127.1 + (seed || 1) * 311.7) * 43758.5453;
+          return (x - Math.floor(x)) * 2 - 1;
+        };
+        window.hwBoil = function (tl, target, opts) {
+          opts = opts || {};
+          var amp = opts.amp !== undefined ? opts.amp : 1.6;
+          var rot = opts.rot !== undefined ? opts.rot : 0.5;
+          var fps = opts.fps || 30;
+          var drop = opts.frameDrop || 3;
+          var seed = opts.seed || 1;
+          var els = gsap.utils.toArray(target);
+          window.hwOnUpdate(tl, function () {
+            var step = Math.floor((tl.time() * fps) / drop);
+            for (var i = 0; i < els.length; i++) {
+              gsap.set(els[i], {
+                x: window.hwHash(step * 3 + i * 97, seed) * amp,
+                y: window.hwHash(step * 3 + 1 + i * 97, seed) * amp,
+                rotation: (opts.baseRot || 0) + window.hwHash(step * 3 + 2 + i * 97, seed) * rot,
+              });
+            }
+          });
+        };
+
+        /* wobbled cloud with a tail tip */
+        function cloudPath(W, H, tip, seed) {
+          var cx = W / 2,
+            cy = H / 2 - 14,
+            rx = W / 2 - 12,
+            ry = H / 2 - 34;
+          var N = 16,
+            pts = [];
+          for (var i = 0; i < N; i++) {
+            var a = (i / N) * Math.PI * 2;
+            var wr = 1 + window.hwHash(i * 11 + 3, seed) * 0.06;
+            pts.push([cx + Math.cos(a) * rx * wr, cy + Math.sin(a) * ry * wr]);
+          }
+          var mx = (pts[0][0] + pts[N - 1][0]) / 2,
+            my = (pts[0][1] + pts[N - 1][1]) / 2;
+          var d = "M" + mx.toFixed(1) + " " + my.toFixed(1);
+          for (var j = 0; j < N; j++) {
+            var p = pts[j],
+              q = pts[(j + 1) % N];
+            d +=
+              " Q" +
+              p[0].toFixed(1) +
+              " " +
+              p[1].toFixed(1) +
+              " " +
+              ((p[0] + q[0]) / 2).toFixed(1) +
+              " " +
+              ((p[1] + q[1]) / 2).toFixed(1);
+          }
+          d += "Z";
+          /* tail */
+          var left = tip.side !== "bottom-right";
+          var bx = cx + (left ? -rx * 0.45 : rx * 0.45),
+            by = cy + ry * 0.92;
+          var tx = bx + (left ? -tip.len * 0.5 : tip.len * 0.5),
+            ty = by + tip.len;
+          d +=
+            " M " +
+            (bx - 26).toFixed(1) +
+            " " +
+            (by - 6).toFixed(1) +
+            " Q " +
+            (bx - 8 + window.hwHash(31, seed) * 6).toFixed(1) +
+            " " +
+            ((by + ty) / 2).toFixed(1) +
+            " " +
+            tx.toFixed(1) +
+            " " +
+            ty.toFixed(1) +
+            " Q " +
+            (bx + 18).toFixed(1) +
+            " " +
+            ((by + ty) / 2).toFixed(1) +
+            " " +
+            (bx + 30).toFixed(1) +
+            " " +
+            (by - 2).toFixed(1);
+          return d;
+        }
+
+        var wrap = document.getElementById("hw-tc-wrap");
+        wrap.style.left = CONFIG.x + "px";
+        wrap.style.top = CONFIG.y + "px";
+        wrap.style.width = CONFIG.w + "px";
+        wrap.style.height = CONFIG.h + "px";
+        var svg = document.getElementById("hw-tc-svg");
+        svg.setAttribute("viewBox", "0 0 " + CONFIG.w + " " + CONFIG.h);
+        var d = cloudPath(CONFIG.w, CONFIG.h, CONFIG.tip, CONFIG.seed);
+        document.getElementById("hw-tc-fill").setAttribute("d", d);
+        document.getElementById("hw-tc-stroke").setAttribute("d", d);
+
+        var text = document.getElementById("hw-tc-text");
+        text.style.left = CONFIG.w * 0.12 + "px";
+        text.style.top = CONFIG.h * 0.1 + "px";
+        text.style.width = CONFIG.w * 0.76 + "px";
+        text.style.height = CONFIG.h * 0.62 + "px";
+        text.style.fontSize = CONFIG.fontSize + "px";
+        var inner = document.createElement("div");
+        Array.from(CONFIG.text).forEach(function (ch) {
+          var s = document.createElement("span");
+          s.className = "ch";
+          s.textContent = ch;
+          inner.appendChild(s);
+        });
+        text.appendChild(inner);
+
+        var tl = gsap.timeline({ paused: true });
+
+        /* draw outline, fade fill, type text */
+        var stroke = document.getElementById("hw-tc-stroke");
+        var len = stroke.getTotalLength();
+        gsap.set(stroke, { strokeDasharray: len, strokeDashoffset: len });
+        var t0 = CONFIG.animationIn ? 0.3 : 0;
+        if (CONFIG.animationIn) {
+          tl.to(stroke, { strokeDashoffset: 0, duration: 0.8, ease: "power2.inOut" }, t0);
+          tl.to("#hw-tc-fill", { opacity: 0.94, duration: 0.4, ease: "power2.out" }, t0 + 0.55);
+        } else {
+          gsap.set(stroke, { strokeDashoffset: 0 });
+          gsap.set("#hw-tc-fill", { opacity: 0.94 });
+        }
+        var chars = text.querySelectorAll(".ch");
+        var delay = Math.min(CONFIG.typeCharDelay, 1.8 / Math.max(1, chars.length));
+        tl.to(chars, { opacity: 1, duration: 0.02, stagger: delay, ease: "none" }, t0 + 0.9);
+
+        if (CONFIG.boil.enabled) {
+          window.hwBoil(tl, "#hw-tc-wrap", {
+            amp: CONFIG.boil.amp,
+            rot: CONFIG.boil.rot,
+            frameDrop: CONFIG.boil.frameDrop,
+            seed: CONFIG.seed,
+          });
+        }
+
+        if (CONFIG.animationOut) {
+          tl.to(wrap, { opacity: 0, duration: OUT, ease: "power2.in" }, DUR - OUT - 0.05);
+        }
+        tl.set("#hw-tc-root", { visibility: "hidden" }, DUR - 0.02);
+
+        window.__timelines["hw-text-cloud"] = tl;
+      })();
+    </script>
+  </body>
+</html>
+```
+
+</Accordion>
+
 {/* hf:generated-footer */}
 
 Tagged `handwritten` `speech-bubble` `overlay`.
diff --git a/docs/catalog/blocks/hw-title.mdx b/docs/catalog/blocks/hw-title.mdx
index d6c22ba167..7bf8def0fc 100644
--- a/docs/catalog/blocks/hw-title.mdx
+++ b/docs/catalog/blocks/hw-title.mdx
@@ -3,13 +3,13 @@ title: "Handwritten Title"
 description: "Handwritten display text with a scalar-driven word-by-word highlight sweep and a seeded squiggle underline sized to the text; boils"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-title.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-title.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/hw-title.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Handwritten Title preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add hw-title
-```
+<InstallCommand command="npx hyperframes add hw-title" />
 
 That writes `compositions/hw-title.html`, plus 1 supporting file under `assets/fonts/`.
 
@@ -32,6 +32,272 @@ It runs for 6 seconds at 1920×1080. Paste this into your composition:
 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={`hw-title.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      @font-face {
+        font-family: "Caveat";
+        src: url("assets/fonts/Caveat-700-latin.woff2") format("woff2");
+        font-weight: 700;
+        font-display: block;
+      }
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      #hw-t-root {
+        /* ---- hw tokens ---- */
+        --hw-font-print: "Caveat", cursive;
+        --hw-font-script: "Caveat", cursive;
+        --hw-ink: #f4f2ec;
+        --hw-ink-dark: #26241f;
+        --hw-accent-warm: #ffb020;
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent; /* overlays footage or a board */
+        font-family: var(--hw-font-print, "Caveat", cursive);
+      }
+      #hw-t-wrap {
+        position: absolute;
+        pointer-events: none;
+      }
+      #hw-t-line {
+        font-weight: 700;
+        line-height: 1.1;
+        white-space: nowrap;
+        text-shadow: 0 2px 18px rgba(0, 0, 0, 0.4);
+      }
+      #hw-t-line .w {
+        display: inline;
+      }
+      #hw-t-under {
+        overflow: visible;
+        display: block;
+      }
+      #hw-t-under path {
+        fill: none;
+        stroke: var(--hw-accent-warm);
+        stroke-width: 7;
+        stroke-linecap: round;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="hw-t-root"
+      data-composition-id="hw-title"
+      data-start="0"
+      data-duration="6"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="hw-t-wrap">
+        <div id="hw-t-line"></div>
+        <svg id="hw-t-under" width="10" height="34"><path id="hw-t-under-path"></path></svg>
+      </div>
+      <div
+        id="hw-t-drv"
+        class="clip"
+        data-start="0"
+        data-duration="6"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- published parameters ----
+           Handwritten title with the highlight-sweep scalar (the shared
+           mk-callout-highlight mechanic) + squiggle underline + the boil.
+           Demonstrates the dispatcher composing sweep + boil on one
+           timeline (learning: one onUpdate — everything through hwOnUpdate). */
+        var CONFIG = {
+          text: "shine like the star you are",
+          fontSize: 120,
+          scheme: "chalk", // "chalk" (white, over footage) | "ink" (dark, boards)
+          sweep: { enabled: true, start: 0.8, end: 3.2 },
+          underline: { enabled: true, wobble: 6 },
+          boil: { enabled: true, amp: 1.4, rot: 0.3, frameDrop: 3 },
+          seed: 8,
+          x: null, // null = centered
+          y: null,
+          animationIn: true,
+          animationOut: true,
+        };
+
+        var DUR = 6;
+        function clamp(v, lo, hi) {
+          return Math.min(hi, Math.max(lo, v));
+        }
+        var IN = clamp(DUR * 0.08, 0.3, 0.8);
+        var OUT = clamp(DUR * 0.06, 0.25, 0.6);
+
+        /* hw family runtime */
+        window.hwOnUpdate = function (tl, fn) {
+          if (!tl.__hwRenders) {
+            tl.__hwRenders = [];
+            tl.eventCallback("onUpdate", function () {
+              for (var i = 0; i < tl.__hwRenders.length; i++) tl.__hwRenders[i]();
+            });
+          }
+          tl.__hwRenders.push(fn);
+          fn();
+        };
+        window.hwHash = function (n, seed) {
+          var x = Math.sin(n * 127.1 + (seed || 1) * 311.7) * 43758.5453;
+          return (x - Math.floor(x)) * 2 - 1;
+        };
+        window.hwBoil = function (tl, target, opts) {
+          opts = opts || {};
+          var amp = opts.amp !== undefined ? opts.amp : 1.6;
+          var rot = opts.rot !== undefined ? opts.rot : 0.5;
+          var fps = opts.fps || 30;
+          var drop = opts.frameDrop || 3;
+          var seed = opts.seed || 1;
+          var els = gsap.utils.toArray(target);
+          window.hwOnUpdate(tl, function () {
+            var step = Math.floor((tl.time() * fps) / drop);
+            for (var i = 0; i < els.length; i++) {
+              gsap.set(els[i], {
+                x: window.hwHash(step * 3 + i * 97, seed) * amp,
+                y: window.hwHash(step * 3 + 1 + i * 97, seed) * amp,
+                rotation: (opts.baseRot || 0) + window.hwHash(step * 3 + 2 + i * 97, seed) * rot,
+              });
+            }
+          });
+        };
+
+        var FULL = CONFIG.scheme === "ink" ? "#26241f" : "#f4f2ec";
+        var FAINT = CONFIG.scheme === "ink" ? "rgba(38,36,31,0.3)" : "rgba(244,242,236,0.32)";
+
+        var wrap = document.getElementById("hw-t-wrap");
+        var line = document.getElementById("hw-t-line");
+        line.style.fontSize = CONFIG.fontSize + "px";
+
+        /* word spans */
+        var wordEls = [];
+        CONFIG.text.split(/\s+/).forEach(function (w, i) {
+          if (i > 0) line.appendChild(document.createTextNode(" "));
+          var span = document.createElement("span");
+          span.className = "w";
+          span.textContent = w;
+          span.style.color = CONFIG.sweep.enabled ? FAINT : FULL;
+          line.appendChild(span);
+          wordEls.push(span);
+        });
+
+        /* measure + position; build squiggle underline to match width */
+        var rect = line.getBoundingClientRect();
+        wrap.style.left =
+          (CONFIG.x === null ? Math.round((1920 - rect.width) / 2) : CONFIG.x) + "px";
+        wrap.style.top =
+          (CONFIG.y === null ? Math.round((1080 - rect.height) / 2) - 20 : CONFIG.y) + "px";
+
+        var underPath = document.getElementById("hw-t-under-path");
+        if (CONFIG.underline.enabled) {
+          var uw = Math.round(rect.width);
+          var svg = document.getElementById("hw-t-under");
+          svg.setAttribute("width", uw);
+          svg.setAttribute("viewBox", "0 0 " + uw + " 34");
+          var segs = Math.max(6, Math.round(uw / 90));
+          var d = "M 2 " + (16 + window.hwHash(0, CONFIG.seed) * 4).toFixed(1);
+          for (var i = 1; i <= segs; i++) {
+            var x = (uw / segs) * i;
+            var y = 16 + window.hwHash(i * 5 + 1, CONFIG.seed) * CONFIG.underline.wobble;
+            var cxp = x - uw / segs / 2 + window.hwHash(i * 5 + 2, CONFIG.seed) * 10;
+            var cyp = 16 + (i % 2 ? -1 : 1) * (8 + window.hwHash(i * 5 + 3, CONFIG.seed) * 4);
+            d +=
+              " Q " +
+              cxp.toFixed(1) +
+              " " +
+              cyp.toFixed(1) +
+              " " +
+              x.toFixed(1) +
+              " " +
+              y.toFixed(1);
+          }
+          underPath.setAttribute("d", d);
+        } else {
+          document.getElementById("hw-t-under").style.display = "none";
+        }
+
+        var tl = gsap.timeline({ paused: true });
+
+        if (CONFIG.animationIn) {
+          gsap.set(wrap, { opacity: 0 });
+          tl.to(wrap, { opacity: 1, duration: IN, ease: "power2.out" }, 0.1);
+        }
+
+        /* the sweep scalar — registered through the dispatcher so it
+           coexists with the boil on the same timeline */
+        if (CONFIG.sweep.enabled) {
+          var mix = gsap.utils.interpolate(FAINT, FULL);
+          var st = { p: 0 };
+          window.hwOnUpdate(tl, function () {
+            var k = st.p * wordEls.length;
+            for (var i = 0; i < wordEls.length; i++) {
+              var f = Math.max(0, Math.min(1, k - i));
+              wordEls[i].style.color = mix(f);
+            }
+          });
+          tl.to(
+            st,
+            { p: 1, duration: CONFIG.sweep.end - CONFIG.sweep.start, ease: "none" },
+            CONFIG.sweep.start,
+          );
+        }
+
+        /* underline draws as the sweep lands */
+        if (CONFIG.underline.enabled) {
+          var len = underPath.getTotalLength();
+          gsap.set(underPath, { strokeDasharray: len, strokeDashoffset: len });
+          var uAt = CONFIG.sweep.enabled ? CONFIG.sweep.end - 0.2 : 0.8;
+          tl.to(underPath, { strokeDashoffset: 0, duration: 0.7, ease: "power2.inOut" }, uAt);
+        }
+
+        if (CONFIG.boil.enabled) {
+          window.hwBoil(tl, "#hw-t-wrap", {
+            amp: CONFIG.boil.amp,
+            rot: CONFIG.boil.rot,
+            frameDrop: CONFIG.boil.frameDrop,
+            seed: CONFIG.seed,
+          });
+        }
+
+        if (CONFIG.animationOut) {
+          tl.to(wrap, { opacity: 0, duration: OUT, ease: "power2.in" }, DUR - OUT - 0.05);
+        }
+        tl.set("#hw-t-root", { visibility: "hidden" }, DUR - 0.02);
+
+        window.__timelines["hw-title"] = tl;
+      })();
+    </script>
+  </body>
+</html>
+```
+
+</Accordion>
+
 {/* hf:generated-footer */}
 
 Tagged `handwritten` `typography` `title-card` `overlay`.
diff --git a/docs/catalog/blocks/instagram-follow.mdx b/docs/catalog/blocks/instagram-follow.mdx
index 82dc2bb456..1d11f5dbf2 100644
--- a/docs/catalog/blocks/instagram-follow.mdx
+++ b/docs/catalog/blocks/instagram-follow.mdx
@@ -3,34 +3,320 @@ title: "Instagram Follow"
 description: "Animated Instagram follow overlay with profile card and follow button"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/instagram-follow.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/instagram-follow.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/instagram-follow.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Instagram Follow preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add instagram-follow
-```
+<InstallCommand command="npx hyperframes add instagram-follow" />
 
 That writes `compositions/instagram-follow.html`, plus 1 supporting file under `assets/`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`instagram-follow.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&display=block"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+      }
+      html,
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      body {
+        width: 1080px;
+        height: 1920px;
+        font-family: "DM Sans", sans-serif;
+      }
+
+      [data-composition-id="instagram-follow"] .lower-third {
+        position: absolute;
+        bottom: 160px;
+        left: 50%;
+        transform: translateX(-50%);
+        display: flex;
+        align-items: center;
+        gap: 30px;
+        background: #1a1a1a;
+        border-radius: 75px;
+        padding: 25px 40px 25px 25px;
+        box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
+      }
+
+      [data-composition-id="instagram-follow"] .avatar {
+        width: 120px;
+        height: 120px;
+        border-radius: 50%;
+        object-fit: cover;
+        flex-shrink: 0;
+        border: 3px solid #333;
+      }
+
+      [data-composition-id="instagram-follow"] .profile-info {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        margin-right: 20px;
+      }
+
+      [data-composition-id="instagram-follow"] .name-row {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+      }
+
+      [data-composition-id="instagram-follow"] .display-name {
+        font-size: 42px;
+        font-weight: 700;
+        color: #ffffff;
+        line-height: 1.3;
+        letter-spacing: -0.01em;
+      }
+
+      [data-composition-id="instagram-follow"] .verified-badge {
+        width: 34px;
+        height: 34px;
+        flex-shrink: 0;
+      }
+
+      [data-composition-id="instagram-follow"] .verified-badge svg {
+        width: 34px;
+        height: 34px;
+        display: block;
+      }
+
+      [data-composition-id="instagram-follow"] .handle {
+        font-size: 28px;
+        font-weight: 400;
+        color: #a0a0a0;
+        line-height: 1.3;
+      }
+
+      [data-composition-id="instagram-follow"] .follower-count {
+        font-size: 25px;
+        font-weight: 400;
+        color: #737373;
+        line-height: 1.3;
+      }
+
+      [data-composition-id="instagram-follow"] .follow-btn {
+        position: relative;
+        width: 250px;
+        height: 80px;
+        border-radius: 40px;
+        background: #0095f6;
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+      }
+
+      [data-composition-id="instagram-follow"] .btn-text {
+        position: absolute;
+        font-family: "DM Sans", sans-serif;
+        font-size: 30px;
+        font-weight: 700;
+        color: #ffffff;
+        letter-spacing: 0.02em;
+        white-space: nowrap;
+      }
+
+      [data-composition-id="instagram-follow"] .btn-text-follow {
+        opacity: 1;
+      }
+
+      [data-composition-id="instagram-follow"] .btn-text-following {
+        opacity: 0;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
 
-It runs for 4.5 seconds at 1080×1920. Paste this into your composition:
+      [data-composition-id="instagram-follow"] .chevron-icon {
+        display: inline-block;
+        width: 18px;
+        height: 18px;
+      }
 
-```html index.html
-<div
-  data-composition-id="instagram-follow"
-  data-composition-src="compositions/instagram-follow.html"
-  data-start="0"
-  data-duration="4.5"
-  data-track-index="1"
-  data-width="1080"
-  data-height="1920"
-></div>
+      [data-composition-id="instagram-follow"] .chevron-icon svg {
+        width: 18px;
+        height: 18px;
+        display: block;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="instagram-follow"
+      data-width="1080"
+      data-height="1920"
+      data-start="0"
+      data-duration="4.5"
+    >
+      <div
+        id="card"
+        class="clip lower-third"
+        data-start="0"
+        data-duration="4.5"
+        data-track-index="0"
+      >
+        <img class="avatar" src="assets/avatar.jpg" alt="HeyGen" crossorigin="anonymous" />
+        <div class="profile-info">
+          <div class="name-row">
+            <div class="display-name">HeyGen</div>
+            <span class="verified-badge"
+              ><svg viewBox="0 0 40 40" fill="none">
+                <circle cx="20" cy="20" r="20" fill="#0095F6" />
+                <path d="M17.5 27.5L10 20l2.5-2.5 5 5 10-10L30 15 17.5 27.5z" fill="#fff" /></svg
+            ></span>
+          </div>
+          <div class="handle">@heygen_official</div>
+          <div class="follower-count">47.5K followers</div>
+        </div>
+        <div id="follow-btn" class="follow-btn">
+          <span id="btn-follow" class="btn-text btn-text-follow">Follow</span>
+          <span id="btn-following" class="btn-text btn-text-following">
+            <span>Following</span>
+            <span class="chevron-icon"
+              ><svg
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="#fff"
+                stroke-width="3"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <polyline points="6 9 12 15 18 9"></polyline></svg
+            ></span>
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      var tl = gsap.timeline({ paused: true });
+
+      var card = document.getElementById("card");
+      var btn = document.getElementById("follow-btn");
+      var textFollow = document.getElementById("btn-follow");
+      var textFollowing = document.getElementById("btn-following");
+
+      // Start off-screen
+      gsap.set(card, { y: 300, opacity: 0 });
+
+      // Slide in from bottom
+      tl.to(
+        card,
+        {
+          y: 0,
+          opacity: 1,
+          duration: 0.5,
+          ease: "power3.out",
+        },
+        0.1,
+      );
+
+      // Hold, then button press-in
+      tl.to(
+        btn,
+        {
+          scale: 0.92,
+          duration: 0.15,
+          ease: "power2.out",
+        },
+        1.0,
+      );
+
+      // Button release with spring bounce
+      tl.to(
+        btn,
+        {
+          scale: 1,
+          duration: 0.4,
+          ease: "elastic.out(1, 0.4)",
+        },
+        1.15,
+      );
+
+      // Button background: IG blue → dark gray
+      tl.to(
+        btn,
+        {
+          backgroundColor: "#2f2f2f",
+          duration: 0.12,
+          ease: "none",
+        },
+        1.15,
+      );
+
+      // Fade out "Follow", fade in "Following"
+      tl.to(
+        textFollow,
+        {
+          opacity: 0,
+          duration: 0.08,
+          ease: "none",
+        },
+        1.15,
+      );
+
+      tl.to(
+        textFollowing,
+        {
+          opacity: 1,
+          duration: 0.08,
+          ease: "none",
+        },
+        1.18,
+      );
+
+      // Slide out to bottom
+      tl.to(
+        card,
+        {
+          y: 300,
+          opacity: 0,
+          duration: 0.25,
+          ease: "power3.in",
+        },
+        3.8,
+      );
+
+      window.__timelines["instagram-follow"] = tl;
+    </script>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="instagram-follow" data-composition-src="compositions/instagram-follow.html" data-start="0" data-duration="4.5" data-track-index="1" data-width="1080" data-height="1920"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/ios26-liquid-glass.mdx b/docs/catalog/blocks/ios26-liquid-glass.mdx
index dd2176d725..b6572a2eb3 100644
--- a/docs/catalog/blocks/ios26-liquid-glass.mdx
+++ b/docs/catalog/blocks/ios26-liquid-glass.mdx
@@ -3,40 +3,1380 @@ title: "iOS 26 Liquid Glass Home Screen"
 description: "3D iPhone with a normal iOS 26 home screen, liquid glass app icons, shader wallpaper, dock, and fluid glass notifications that drop from the status area onto a GLTF device model."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ios26-liquid-glass.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ios26-liquid-glass.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/ios26-liquid-glass.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="iOS 26 Liquid Glass Home Screen preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add ios26-liquid-glass
-```
+<InstallCommand command="npx hyperframes add ios26-liquid-glass" />
 
 That writes `compositions/ios26-liquid-glass.html`, plus 28 supporting files under `models/`, `lib/`, and `assets/icons/`.
 
-<Warning>
+<Danger>
   Live preview needs the `chrome://flags/#canvas-draw-element` flag switched on.
-  Rendering from the CLI switches it on for you. [How it
-  works](/guides/html-in-canvas)
-</Warning>
-
-## Add it to your video
-
-It runs for 15 seconds at 1920×1080. Paste this into your composition:
-
-```html index.html
-<div
-  data-composition-id="ios26-liquid-glass"
-  data-composition-src="compositions/ios26-liquid-glass.html"
-  data-start="0"
-  data-duration="15"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+  Without it this item's screen renders black. Rendering from the CLI switches
+  it on for you. [How it works](/guides/html-in-canvas)
+</Danger>
+
+## Source
+
+<Accordion title={`ios26-liquid-glass.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Devices Canvas — HTML-in-Canvas API Showcase</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/loaders/DRACOLoader.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/loaders/GLTFLoader.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #050508;
+        overflow: hidden;
+      }
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #050508;
+      }
+      .ios-home {
+        position: relative;
+        height: 844px;
+        overflow: hidden;
+        background: #010101;
+      }
+      .ios-wallpaper {
+        position: absolute;
+        inset: 0;
+        background:
+          radial-gradient(ellipse at 50% 50%, rgba(12, 16, 24, 0.96), transparent 31%),
+          radial-gradient(circle at 50% 54%, rgba(255, 255, 255, 0.06), transparent 8%),
+          linear-gradient(180deg, #020202, #000);
+      }
+      .ios-wallpaper::before,
+      .ios-wallpaper::after {
+        content: "";
+        position: absolute;
+        left: 92px;
+        top: 210px;
+        width: 210px;
+        height: 360px;
+        border-radius: 50% 50% 42% 46%;
+        border: 4px solid transparent;
+        background:
+          linear-gradient(#020202, #020202) padding-box,
+          conic-gradient(
+              from 215deg,
+              rgba(255, 255, 255, 0),
+              rgba(255, 255, 255, 0.92),
+              rgba(53, 131, 255, 0.92),
+              rgba(38, 255, 168, 0.8),
+              rgba(255, 63, 54, 0.72),
+              rgba(255, 255, 255, 0)
+            )
+            border-box;
+        filter: blur(0.35px) saturate(1.25);
+        opacity: 0.82;
+        transform: rotate(7deg);
+      }
+      .ios-wallpaper::after {
+        left: 118px;
+        top: 400px;
+        width: 140px;
+        height: 190px;
+        border-width: 3px;
+        opacity: 0.62;
+        transform: rotate(-27deg);
+      }
+      .ios-status {
+        position: relative;
+        z-index: 2;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 27px 30px 10px;
+        color: #f6f6f6;
+        font-size: 22px;
+        font-weight: 760;
+        letter-spacing: 0;
+        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
+      }
+      .ios-status-left,
+      .ios-status-right {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+      .ios-location {
+        display: grid;
+        place-items: center;
+        width: 18px;
+        height: 18px;
+        border-radius: 999px;
+        background: #2f80ed;
+        color: #fff;
+        font-size: 12px;
+        line-height: 1;
+      }
+      .ios-signal {
+        display: flex;
+        align-items: end;
+        gap: 3px;
+        height: 18px;
+      }
+      .ios-signal span {
+        width: 5px;
+        border-radius: 3px;
+        background: rgba(255, 255, 255, 0.92);
+      }
+      .ios-signal span:nth-child(1) {
+        height: 7px;
+      }
+      .ios-signal span:nth-child(2) {
+        height: 10px;
+      }
+      .ios-signal span:nth-child(3) {
+        height: 13px;
+      }
+      .ios-signal span:nth-child(4) {
+        height: 17px;
+        background: rgba(255, 255, 255, 0.48);
+      }
+      .ios-wifi {
+        position: relative;
+        width: 23px;
+        height: 17px;
+      }
+      .ios-wifi span {
+        position: absolute;
+        left: 50%;
+        border: 4px solid rgba(255, 255, 255, 0.94);
+        border-color: rgba(255, 255, 255, 0.94) transparent transparent transparent;
+        border-radius: 50%;
+        transform: translateX(-50%);
+      }
+      .ios-wifi span:nth-child(1) {
+        top: 0;
+        width: 28px;
+        height: 28px;
+      }
+      .ios-wifi span:nth-child(2) {
+        top: 6px;
+        width: 18px;
+        height: 18px;
+      }
+      .ios-wifi span:nth-child(3) {
+        top: 13px;
+        width: 7px;
+        height: 7px;
+        border-radius: 999px;
+        background: #fff;
+        border: 0;
+      }
+      .ios-battery {
+        position: relative;
+        min-width: 34px;
+        height: 21px;
+        padding: 1px 5px 0;
+        border-radius: 6px;
+        background: #59d768;
+        color: #fff;
+        font-size: 15px;
+        font-weight: 850;
+        line-height: 20px;
+      }
+      .ios-battery::after {
+        content: "";
+        position: absolute;
+        right: -3px;
+        top: 7px;
+        width: 3px;
+        height: 7px;
+        border-radius: 0 3px 3px 0;
+        background: rgba(255, 255, 255, 0.5);
+      }
+      .ios-app-grid {
+        position: relative;
+        z-index: 2;
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        gap: 14px 22px;
+        padding: 20px 28px 0;
+      }
+      .ios-app {
+        position: relative;
+        text-align: center;
+      }
+      .ios-app-icon,
+      .ios-dock-icon {
+        display: block;
+        object-fit: cover;
+        box-shadow:
+          0 8px 20px rgba(0, 0, 0, 0.34),
+          inset 0 1px 0 rgba(255, 255, 255, 0.24);
+        filter: grayscale(1) saturate(0.08) contrast(1.2) brightness(0.86);
+      }
+      .ios-app-icon {
+        width: 62px;
+        height: 62px;
+        margin: 0 auto 7px;
+        border-radius: 18px;
+      }
+      .ios-app-label {
+        color: #fff;
+        font-size: 13px;
+        font-weight: 640;
+        line-height: 1.1;
+        text-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
+        white-space: nowrap;
+      }
+      .ios-badge {
+        position: absolute;
+        top: -8px;
+        right: -8px;
+        min-width: 24px;
+        padding: 3px 7px;
+        border-radius: 999px;
+        background: #f7f7f7;
+        color: #303030;
+        font-size: 15px;
+        font-weight: 700;
+        font-variant-numeric: tabular-nums;
+        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.32);
+      }
+      .ios-search-pill {
+        position: absolute;
+        z-index: 2;
+        left: 50%;
+        bottom: 105px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 7px;
+        width: 116px;
+        padding: 9px 0;
+        border-radius: 19px;
+        background: rgba(255, 255, 255, 0.11);
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        color: rgba(255, 255, 255, 0.72);
+        font-size: 15px;
+        font-weight: 650;
+        text-align: center;
+        transform: translateX(-50%);
+        box-shadow:
+          inset 0 1px 0 rgba(255, 255, 255, 0.17),
+          0 10px 22px rgba(0, 0, 0, 0.34);
+      }
+      .ios-search-pill::before {
+        content: "";
+        width: 12px;
+        height: 12px;
+        border: 3px solid rgba(255, 255, 255, 0.72);
+        border-radius: 999px;
+        box-sizing: border-box;
+      }
+      .ios-search-pill::after {
+        content: "";
+        width: 7px;
+        height: 3px;
+        border-radius: 999px;
+        background: rgba(255, 255, 255, 0.72);
+        transform: rotate(45deg) translate(-6px, 6px);
+        margin-left: -10px;
+      }
+      .ios-notification-layer {
+        display: none;
+        position: absolute;
+        z-index: 5;
+        top: 82px;
+        left: 15px;
+        right: 15px;
+        height: 222px;
+        pointer-events: none;
+      }
+      .ios-notification-card {
+        position: absolute;
+        left: 0;
+        right: 0;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        min-height: 60px;
+        padding: 9px 12px;
+        border-radius: 23px;
+        border: 1px solid rgba(255, 255, 255, 0.27);
+        background:
+          linear-gradient(135deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.13)),
+          rgba(140, 150, 164, 0.52);
+        -webkit-backdrop-filter: blur(22px) saturate(1.35);
+        backdrop-filter: blur(22px) saturate(1.35);
+        box-shadow:
+          inset 0 1px 0 rgba(255, 255, 255, 0.46),
+          0 14px 34px rgba(0, 0, 0, 0.38);
+        opacity: 0;
+        transform: translateY(-120px) scale(0.98);
+      }
+      .ios-notification-card:nth-child(2) {
+        top: 68px;
+      }
+      .ios-notification-card:nth-child(3) {
+        top: 136px;
+      }
+      .ios-notification-icon {
+        width: 38px;
+        height: 38px;
+        border-radius: 11px;
+        background-position: center;
+        background-size: cover;
+        flex: 0 0 auto;
+      }
+      .ios-notification-messages {
+        background-image: url("assets/icons/notify-messages.jpg");
+      }
+      .ios-notification-hyperframes {
+        background-image: url("assets/icons/slack.jpg");
+      }
+      .ios-notification-gmail {
+        background-image: url("assets/icons/gmail.jpg");
+      }
+      .ios-icon-preload {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        opacity: 0;
+        pointer-events: none;
+      }
+      .ios-notification-copy {
+        min-width: 0;
+        flex: 1;
+      }
+      .ios-notification-title {
+        display: flex;
+        justify-content: space-between;
+        gap: 8px;
+        color: #fff;
+        font-size: 12px;
+        font-weight: 750;
+      }
+      .ios-notification-body {
+        margin-top: 2px;
+        color: rgba(255, 255, 255, 0.72);
+        font-size: 11px;
+        line-height: 1.25;
+      }
+      .ios-dock {
+        position: absolute;
+        z-index: 2;
+        left: 14px;
+        right: 14px;
+        bottom: 13px;
+        display: flex;
+        justify-content: space-around;
+        padding: 10px 16px;
+        border-radius: 37px;
+        background: rgba(255, 255, 255, 0.08);
+        border: 1px solid rgba(255, 255, 255, 0.16);
+        -webkit-backdrop-filter: blur(18px) saturate(1.2);
+        backdrop-filter: blur(18px) saturate(1.2);
+        box-shadow:
+          inset 0 1px 0 rgba(255, 255, 255, 0.16),
+          0 14px 36px rgba(0, 0, 0, 0.24);
+      }
+      .ios-dock-item {
+        position: relative;
+        width: 62px;
+        height: 62px;
+      }
+      .ios-dock-icon {
+        width: 62px;
+        height: 62px;
+        border-radius: 18px;
+        background-position: center;
+        background-size: cover;
+      }
+      .ios-dock-phone {
+        background-image: url("assets/icons/phone.jpg");
+      }
+      .ios-dock-brave {
+        background-image: url("assets/icons/brave.jpg");
+      }
+      .ios-dock-whatsapp {
+        background-image: url("assets/icons/whatsapp.jpg");
+      }
+      .ios-dock-music {
+        background-image: url("assets/icons/music.jpg");
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="ios26-liquid-glass"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="15"
+      data-root="true"
+    >
+      <!-- LIVE HTML captured every frame via drawElementImage  -->
+      <canvas
+        id="cap-phone"
+        layoutsubtree
+        width="390"
+        height="844"
+        style="
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 390px;
+          height: 844px;
+          z-index: -1;
+          pointer-events: none;
+        "
+      >
+        <div
+          id="phone-html"
+          style="
+            width: 390px;
+            height: 844px;
+            overflow: hidden;
+            font-family: Inter, system-ui, sans-serif;
+            color: #e2e8f0;
+          "
+        >
+          <div id="phone-scroll" class="ios-home" style="color: #fff; transform: translateY(0)">
+            <div id="phone-title" style="display: none"></div>
+            <span id="phone-count" style="display: none"></span>
+            <div id="phone-cards" style="display: none"></div>
+            <img
+              id="ios-notify-messages-preload"
+              class="ios-icon-preload"
+              src="assets/icons/notify-messages.jpg"
+              alt=""
+            />
+            <div class="ios-wallpaper"></div>
+            <div class="ios-status">
+              <div class="ios-status-left">
+                <span style="font-variant-numeric: tabular-nums">15:16</span>
+                <span class="ios-location">▲</span>
+              </div>
+              <div class="ios-status-right">
+                <div class="ios-signal"><span></span><span></span><span></span><span></span></div>
+                <div class="ios-wifi"><span></span><span></span><span></span></div>
+                <div class="ios-battery">92</div>
+              </div>
+            </div>
+            <div id="ios-app-grid" class="ios-app-grid">
+              <div class="ios-app">
+                <img class="ios-app-icon" src="assets/icons/weather.jpg" alt="" />
+                <div class="ios-app-label">Weather</div>
+              </div>
+              <div class="ios-app">
+                <img class="ios-app-icon" src="assets/icons/stocks.jpg" alt="" />
+                <div class="ios-app-label">Stocks</div>
+              </div>
+              <div class="ios-app">
+                <img class="ios-app-icon" src="assets/icons/find-my.jpg" alt="" />
+                <div class="ios-app-label">Find My</div>
+              </div>
+              <div class="ios-app">
+                <img class="ios-app-icon" src="assets/icons/home.jpg" alt="" />
+                <div class="ios-app-label">Home</div>
+              </div>
+              <div class="ios-app">
+                <img class="ios-app-icon" src="assets/icons/books.jpg" alt="" />
+                <div class="ios-app-label">Books</div>
+              </div>
+              <div class="ios-app">
+                <img class="ios-app-icon" src="assets/icons/itunes-store.jpg" alt="" />
+                <div class="ios-app-label">iTunes Store</div>
+              </div>
+              <div class="ios-app">
+                <img class="ios-app-icon" src="assets/icons/fitness.jpg" alt="" />
+                <div class="ios-app-label">Fitness</div>
+              </div>
+              <div class="ios-app">
+                <img class="ios-app-icon" src="assets/icons/watch.jpg" alt="" />
+                <div class="ios-app-label">Watch</div>
+              </div>
+              <div class="ios-app">
+                <img class="ios-app-icon" src="assets/icons/contacts.jpg" alt="" />
+                <div class="ios-app-label">Contacts</div>
+              </div>
+              <div class="ios-app">
+                <img class="ios-app-icon" src="assets/icons/files.jpg" alt="" />
+                <div class="ios-app-label">Files</div>
+              </div>
+              <div class="ios-app">
+                <img class="ios-app-icon" src="assets/icons/translate.jpg" alt="" />
+                <div class="ios-app-label">Translate</div>
+              </div>
+              <div class="ios-app">
+                <img class="ios-app-icon" src="assets/icons/calendar.jpg" alt="" />
+                <div class="ios-app-label">Calendar</div>
+              </div>
+              <div class="ios-app">
+                <img class="ios-app-icon" src="assets/icons/photos.jpg" alt="" />
+                <div class="ios-app-label">Photos</div>
+              </div>
+              <div class="ios-app">
+                <img class="ios-app-icon" src="assets/icons/chatgpt.jpg" alt="" />
+                <div class="ios-app-label">ChatGPT</div>
+              </div>
+              <div class="ios-app">
+                <img class="ios-app-icon" src="assets/icons/slack.jpg" alt="" />
+                <div class="ios-app-label">Slack</div>
+              </div>
+              <div class="ios-app">
+                <img class="ios-app-icon" src="assets/icons/instagram.jpg" alt="" />
+                <span class="ios-badge">1</span>
+                <div class="ios-app-label">Instagram</div>
+              </div>
+              <div class="ios-app">
+                <img class="ios-app-icon" src="assets/icons/x.jpg" alt="" />
+                <span class="ios-badge">4</span>
+                <div class="ios-app-label">X</div>
+              </div>
+              <div class="ios-app">
+                <img class="ios-app-icon" src="assets/icons/proton-mail.jpg" alt="" />
+                <span class="ios-badge">797</span>
+                <div class="ios-app-label">Proton Mail</div>
+              </div>
+              <div class="ios-app">
+                <img class="ios-app-icon" src="assets/icons/gmail.jpg" alt="" />
+                <span class="ios-badge">31.8K</span>
+                <div class="ios-app-label">Gmail</div>
+              </div>
+              <div class="ios-app">
+                <img class="ios-app-icon" src="assets/icons/revolut.jpg" alt="" />
+                <div class="ios-app-label">Revolut</div>
+              </div>
+              <div class="ios-app">
+                <img class="ios-app-icon" src="assets/icons/phone.jpg" alt="" />
+                <span class="ios-badge">9+</span>
+                <div class="ios-app-label">Phone</div>
+              </div>
+              <div class="ios-app">
+                <img class="ios-app-icon" src="assets/icons/brave.jpg" alt="" />
+                <div class="ios-app-label">Brave</div>
+              </div>
+              <div class="ios-app">
+                <img class="ios-app-icon" src="assets/icons/whatsapp.jpg" alt="" />
+                <span class="ios-badge">282</span>
+                <div class="ios-app-label">WhatsApp</div>
+              </div>
+              <div class="ios-app">
+                <img class="ios-app-icon" src="assets/icons/music.jpg" alt="" />
+                <div class="ios-app-label">Music</div>
+              </div>
+            </div>
+
+            <div class="ios-notification-layer">
+              <div id="ios-notification-a" class="ios-notification-card">
+                <div class="ios-notification-icon ios-notification-messages"></div>
+                <div class="ios-notification-copy">
+                  <div class="ios-notification-title"><span>Messages</span><span>now</span></div>
+                  <div class="ios-notification-body">Liquid Glass preview is ready for review.</div>
+                </div>
+              </div>
+              <div id="ios-notification-b" class="ios-notification-card">
+                <div class="ios-notification-icon ios-notification-hyperframes"></div>
+                <div class="ios-notification-copy">
+                  <div class="ios-notification-title"><span>HyperFrames</span><span>1m</span></div>
+                  <div class="ios-notification-body">One-worker render is ready.</div>
+                </div>
+              </div>
+              <div id="ios-notification-c" class="ios-notification-card">
+                <div class="ios-notification-icon ios-notification-gmail"></div>
+                <div class="ios-notification-copy">
+                  <div class="ios-notification-title"><span>Gmail</span><span>2m</span></div>
+                  <div class="ios-notification-body">Preview videos are live on CDN.</div>
+                </div>
+              </div>
+            </div>
+
+            <div class="ios-search-pill">Search</div>
+
+            <div id="ios-real-dock" class="ios-dock">
+              <div class="ios-dock-item">
+                <div class="ios-dock-icon ios-dock-phone"></div>
+                <span class="ios-badge">9+</span>
+              </div>
+              <div class="ios-dock-item">
+                <div class="ios-dock-icon ios-dock-brave"></div>
+              </div>
+              <div class="ios-dock-item">
+                <div class="ios-dock-icon ios-dock-whatsapp"></div>
+                <span class="ios-badge">282</span>
+              </div>
+              <div class="ios-dock-item">
+                <div class="ios-dock-icon ios-dock-music"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </canvas>
+
+      <canvas
+        id="cap-laptop"
+        layoutsubtree
+        width="1440"
+        height="900"
+        style="
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1440px;
+          height: 900px;
+          z-index: -1;
+          pointer-events: none;
+        "
+      >
+        <div
+          id="laptop-html"
+          style="
+            width: 1440px;
+            height: 900px;
+            overflow: hidden;
+            font-family: Inter, system-ui, sans-serif;
+            color: #e2e8f0;
+          "
+        >
+          <div
+            id="laptop-scroll"
+            style="background: linear-gradient(180deg, #0a0a12, #0f0f1a); transform: translateY(0)"
+          >
+            <div
+              style="
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                padding: 18px 36px;
+                border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+              "
+            >
+              <span
+                style="
+                  font-weight: 800;
+                  font-size: 17px;
+                  background: linear-gradient(135deg, #34d399, #3b82f6);
+                  -webkit-background-clip: text;
+                  -webkit-text-fill-color: transparent;
+                "
+                >HyperFrames</span
+              >
+              <div
+                style="display: flex; gap: 20px; font-size: 12px; color: rgba(255, 255, 255, 0.5)"
+              >
+                <span>Docs</span><span>Playground</span><span>Pricing</span>
+              </div>
+              <span
+                style="
+                  font-size: 11px;
+                  font-weight: 600;
+                  padding: 6px 14px;
+                  border-radius: 6px;
+                  background: #10b981;
+                  color: #fff;
+                "
+                >Log in</span
+              >
+            </div>
+            <div
+              id="laptop-title"
+              style="
+                font-size: 40px;
+                font-weight: 800;
+                letter-spacing: -1px;
+                padding: 28px 36px 10px;
+                opacity: 0;
+              "
+            >
+              Community Playground
+            </div>
+            <div style="font-size: 13px; color: rgba(255, 255, 255, 0.4); padding: 0 36px 18px">
+              Create videos with HTML — powered by HyperFrames
+            </div>
+            <div style="display: flex; gap: 8px; padding: 0 36px 20px">
+              <span
+                style="
+                  font-size: 10px;
+                  font-weight: 600;
+                  padding: 5px 12px;
+                  border-radius: 16px;
+                  background: rgba(16, 185, 129, 0.15);
+                  color: #10b981;
+                  border: 1px solid rgba(16, 185, 129, 0.3);
+                "
+                >Examples</span
+              ><span
+                id="laptop-count"
+                style="
+                  font-size: 10px;
+                  font-weight: 600;
+                  padding: 5px 12px;
+                  border-radius: 16px;
+                  border: 1px solid rgba(255, 255, 255, 0.1);
+                  color: rgba(255, 255, 255, 0.5);
+                "
+                >Catalog 0</span
+              >
+            </div>
+            <div
+              id="laptop-cards"
+              style="
+                display: grid;
+                grid-template-columns: repeat(3, 1fr);
+                gap: 14px;
+                padding: 0 36px 36px;
+              "
+            ></div>
+          </div>
+        </div>
+      </canvas>
+
+      <canvas
+        id="theater"
+        width="1920"
+        height="1080"
+        style="position: absolute; top: 0; left: 0; width: 1920px; height: 1080px"
+      ></canvas>
+      <div
+        id="driver"
+        class="clip"
+        data-start="0"
+        data-duration="15"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      var W = 1920,
+        H = 1080,
+        PI = Math.PI;
+
+      // ── Renderer ───────────────────────────────────────────────────────
+      var renderer = new THREE.WebGLRenderer({
+        canvas: document.getElementById("theater"),
+        antialias: true,
+        preserveDrawingBuffer: true,
+      });
+      renderer.setSize(W, H, false);
+      renderer.setPixelRatio(1);
+      renderer.toneMapping = THREE.ACESFilmicToneMapping;
+      renderer.toneMappingExposure = 1.15;
+      renderer.outputEncoding = THREE.sRGBEncoding;
+      renderer.setClearColor(0x050508, 1);
+
+      var scene = new THREE.Scene();
+      scene.background = new THREE.Color(0x050508);
+      var camera = new THREE.PerspectiveCamera(34, W / H, 0.1, 100);
+
+      // ── Environment Map ────────────────────────────────────────────────
+      var eC = document.createElement("canvas");
+      eC.width = 1024;
+      eC.height = 512;
+      var ec = eC.getContext("2d");
+      var eg = ec.createLinearGradient(0, 0, 1024, 512);
+      eg.addColorStop(0, "#020307");
+      eg.addColorStop(0.15, "#1a1a2e");
+      eg.addColorStop(0.3, "#ffffff");
+      eg.addColorStop(0.45, "#0a0a1e");
+      eg.addColorStop(0.6, "#ffffff");
+      eg.addColorStop(0.75, "#1e1e2e");
+      eg.addColorStop(1, "#020307");
+      ec.fillStyle = eg;
+      ec.fillRect(0, 0, 1024, 512);
+      ec.globalCompositeOperation = "screen";
+      for (var ei = 0; ei < 7; ei++) {
+        ec.fillStyle = "rgba(255,255,255," + (ei % 2 === 0 ? 0.15 : 0.08) + ")";
+        ec.fillRect((ei % 3) * 100, 60 + ei * 56, 700, 3 + (ei % 2) * 2);
+      }
+      var eT = new THREE.CanvasTexture(eC);
+      eT.mapping = THREE.EquirectangularReflectionMapping;
+      var pm = new THREE.PMREMGenerator(renderer);
+      scene.environment = pm.fromEquirectangular(eT).texture;
+      eT.dispose();
+      pm.dispose();
+
+      // ── Three.js shader backdrop ────────────────────────────────────────
+      var bgUniforms = { uTime: { value: 0 }, uAspect: { value: W / H } };
+      var bgPlane = new THREE.Mesh(
+        new THREE.PlaneGeometry(28, 16),
+        new THREE.ShaderMaterial({
+          uniforms: bgUniforms,
+          vertexShader:
+            "varying vec2 v;void main(){v=uv;gl_Position=projectionMatrix*modelViewMatrix*vec4(position,1.0);}",
+          fragmentShader:
+            "uniform float uTime;uniform float uAspect;varying vec2 v;float wave(vec2 p,float s,float t){return sin(p.x*s+p.y*s*.57+uTime*t);}void main(){vec2 p=v*2.0-1.0;p.x*=uAspect;float w=wave(p,3.0,.22)+.55*wave(p.yx+vec2(.7,-.2),5.1,.16)+.32*wave(p+vec2(-.4,.5),8.0,-.12);float a=smoothstep(-.75,1.05,w);vec3 navy=vec3(.015,.013,.055);vec3 cyan=vec3(.02,.42,.72);vec3 violet=vec3(.30,.08,.55);vec3 amber=vec3(.95,.42,.04);float ribbon=smoothstep(.22,.95,sin(p.x*2.2-p.y*3.1+uTime*.18));vec3 c=mix(navy,cyan,a);c=mix(c,violet,smoothstep(.16,1.1,wave(p+vec2(.8,.1),2.4,.1)));c+=amber*ribbon*.33;float glow=exp(-dot(p+vec2(.62,-.08),p+vec2(.62,-.08))*1.7);c+=vec3(.10,.45,.55)*glow;float vign=smoothstep(1.85,.25,length(p));gl_FragColor=vec4(c*vign,1.0);}",
+          depthTest: false,
+          depthWrite: false,
+        }),
+      );
+      bgPlane.position.z = -7.5;
+      scene.add(bgPlane);
+
+      // Vibrant aurora-colored floor
+      var floor = new THREE.Mesh(
+        new THREE.PlaneGeometry(30, 30),
+        new THREE.MeshStandardMaterial({ color: 0x081427, metalness: 0.86, roughness: 0.22 }),
+      );
+      floor.rotation.x = -PI / 2;
+      floor.position.y = -2.5;
+      scene.add(floor);
+
+      scene.add(new THREE.AmbientLight(0x222233, 0.5));
+      var kL = new THREE.DirectionalLight(0xffffff, 2.2);
+      kL.position.set(-3, 4, 5);
+      scene.add(kL);
+      var rL = new THREE.PointLight(0x6366f1, 3, 15);
+      rL.position.set(4, 2, 3);
+      scene.add(rL);
+      var wL = new THREE.PointLight(0xffc8a8, 1.5, 12);
+      wL.position.set(-3, -1, 4);
+      scene.add(wL);
+
+      // ── Live HTML → WebGL Texture  ─
+      var capPhoneCvs = document.getElementById("cap-phone");
+      var capPhoneCtx = capPhoneCvs.getContext("2d");
+      var phoneHtmlEl = document.getElementById("phone-html");
+
+      var capLapCvs = document.getElementById("cap-laptop");
+      var capLapCtx = capLapCvs.getContext("2d");
+      var lapHtmlEl = document.getElementById("laptop-html");
+
+      var apiOk = (function () {
+        var tc = document.createElement("canvas");
+        if (!("layoutSubtree" in tc)) return false;
+        tc.setAttribute("layoutsubtree", "");
+        var ctx = tc.getContext("2d");
+        return ctx && typeof ctx.drawElementImage === "function";
+      })();
+      var paintReady = false;
+
+      function waitForImages() {
+        var images = Array.prototype.slice.call(document.querySelectorAll("img"));
+        return Promise.all(
+          images.map(function (image) {
+            if (image.complete) return Promise.resolve();
+            return new Promise(function (resolveImage) {
+              image.onload = resolveImage;
+              image.onerror = resolveImage;
+            });
+          }),
+        );
+      }
+
+      function waitForPaint(canvas) {
+        return new Promise(function (resolvePaint) {
+          if (!canvas || typeof canvas.requestPaint !== "function") {
+            resolvePaint();
+            return;
+          }
+          var resolved = false;
+          function done() {
+            if (resolved) return;
+            resolved = true;
+            canvas.onpaint = null;
+            resolvePaint();
+          }
+          canvas.onpaint = done;
+          canvas.requestPaint();
+          setTimeout(done, 100);
+        });
+      }
+
+      // Generate card HTML for both screens
+      var cardData = [
+        {
+          bg: "linear-gradient(135deg,#1e3a5f,#2563eb)",
+          text: "100M+ AI team",
+          title: "Notion Showcase",
+          meta: "15s · 1920×1080",
+        },
+        {
+          bg: "linear-gradient(135deg,#4a1942,#db2777)",
+          text: "Design System v4",
+          title: "Dribbble Showcase",
+          meta: "12s · 1920×1080",
+        },
+        {
+          bg: "linear-gradient(135deg,#451a03,#f59e0b)",
+          text: "$1.9T Market Cap",
+          title: "Stripe Showcase",
+          meta: "10s · 1920×1080",
+        },
+        {
+          bg: "linear-gradient(135deg,#064e3b,#10b981)",
+          text: "Ship faster with AI",
+          title: "Vercel Promo",
+          meta: "20s · 1080×1920",
+        },
+        {
+          bg: "linear-gradient(135deg,#1e3a5f,#3b82f6)",
+          text: "Privacy App",
+          title: "iPhone App Store",
+          meta: "8s · 1080×1920",
+        },
+        {
+          bg: "linear-gradient(135deg,#4a1942,#a855f7)",
+          text: "Audio Visualizer",
+          title: "Spotify Remix",
+          meta: "15s · 1920×1080",
+        },
+        {
+          bg: "linear-gradient(135deg,#064e3b,#059669)",
+          text: "Code Animation",
+          title: "Terminal Demo",
+          meta: "12s · 1920×1080",
+        },
+        {
+          bg: "linear-gradient(135deg,#451a03,#d97706)",
+          text: "Launch Video",
+          title: "Product Hunt",
+          meta: "30s · 1920×1080",
+        },
+        {
+          bg: "linear-gradient(135deg,#1e3a5f,#6366f1)",
+          text: "3D Devices",
+          title: "Device Mockups",
+          meta: "15s · 1920×1080",
+        },
+      ];
+      function makeCardHTML(cd, isMobile) {
+        var fs = isMobile ? 12 : 16;
+        return (
+          '<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:' +
+          (isMobile ? 10 : 12) +
+          'px;overflow:hidden;opacity:0" class="anim-card">' +
+          '<div style="width:100%;aspect-ratio:16/9;background:' +
+          cd.bg +
+          ';display:flex;align-items:center;justify-content:center"><span style="font-size:' +
+          fs +
+          'px;font-weight:700;color:rgba(255,255,255,0.7)">' +
+          cd.text +
+          "</span></div>" +
+          '<div style="padding:' +
+          (isMobile ? "8px 10px" : "10px 14px") +
+          '"><div style="font-size:' +
+          (isMobile ? 11 : 13) +
+          'px;font-weight:600;margin-bottom:2px">' +
+          cd.title +
+          '</div><div style="font-size:' +
+          (isMobile ? 9 : 10) +
+          'px;color:rgba(255,255,255,0.3)">' +
+          cd.meta +
+          "</div></div></div>"
+        );
+      }
+      var phoneCardsEl = document.getElementById("phone-cards");
+      var laptopCardsEl = document.getElementById("laptop-cards");
+      for (var ci = 0; ci < cardData.length; ci++) {
+        if (ci < 6) phoneCardsEl.innerHTML += makeCardHTML(cardData[ci], true);
+        laptopCardsEl.innerHTML += makeCardHTML(cardData[ci], false);
+      }
+
+      var phoneTex = new THREE.CanvasTexture(capPhoneCvs);
+      phoneTex.minFilter = THREE.LinearFilter;
+      phoneTex.magFilter = THREE.LinearFilter;
+      phoneTex.generateMipmaps = false;
+      var lapTex = new THREE.CanvasTexture(capLapCvs);
+      lapTex.minFilter = THREE.LinearFilter;
+      lapTex.magFilter = THREE.LinearFilter;
+      lapTex.generateMipmaps = false;
+      var glassBuffer = document.createElement("canvas");
+      glassBuffer.width = 390;
+      glassBuffer.height = 844;
+      var glassBufferCtx = glassBuffer.getContext("2d");
+
+      function pathRoundRect(ctx, x, y, w, h, r) {
+        var rr = Math.min(r, w / 2, h / 2);
+        ctx.beginPath();
+        ctx.moveTo(x + rr, y);
+        ctx.lineTo(x + w - rr, y);
+        ctx.quadraticCurveTo(x + w, y, x + w, y + rr);
+        ctx.lineTo(x + w, y + h - rr);
+        ctx.quadraticCurveTo(x + w, y + h, x + w - rr, y + h);
+        ctx.lineTo(x + rr, y + h);
+        ctx.quadraticCurveTo(x, y + h, x, y + h - rr);
+        ctx.lineTo(x, y + rr);
+        ctx.quadraticCurveTo(x, y, x + rr, y);
+        ctx.closePath();
+      }
+
+      function drawNotificationCard(ctx, progress, top, iconSelector, title, time, body) {
+        var p = Math.max(0, Math.min(1, progress));
+        if (p <= 0.001) return;
+        var q = notificationEase(p);
+        var lift = Math.sin(q * PI);
+        var y = 106 + top + (1 - q) * -58 + lift * 6;
+        var x = 13;
+        var w = 364;
+        var h = 66 + lift * 2;
+        ctx.save();
+        ctx.globalAlpha = q * 0.98;
+        ctx.shadowColor = "rgba(0,0,0,0.54)";
+        ctx.shadowBlur = 22;
+        ctx.shadowOffsetY = 14;
+        pathRoundRect(ctx, x, y, w, h, 23);
+        ctx.clip();
+        ctx.filter = "blur(12px) saturate(1.55) brightness(1.24)";
+        ctx.drawImage(glassBuffer, -4, -4, 398, 852);
+        ctx.filter = "none";
+        pathRoundRect(ctx, x, y, w, h, 23);
+        var fill = ctx.createLinearGradient(x, y, x + w, y + h);
+        fill.addColorStop(0, "rgba(255,255,255,0.54)");
+        fill.addColorStop(0.45, "rgba(188,202,219,0.46)");
+        fill.addColorStop(1, "rgba(94,108,130,0.36)");
+        ctx.fillStyle = fill;
+        ctx.fill();
+        ctx.globalCompositeOperation = "screen";
+        var caustic = ctx.createLinearGradient(x + 40, y, x + w - 20, y + h);
+        caustic.addColorStop(0, "rgba(255,255,255,0.18)");
+        caustic.addColorStop(0.36, "rgba(117,230,255,0.15)");
+        caustic.addColorStop(0.64, "rgba(255,143,220,0.12)");
+        caustic.addColorStop(1, "rgba(255,255,255,0.08)");
+        ctx.fillStyle = caustic;
+        ctx.fillRect(x, y, w, h);
+        ctx.globalCompositeOperation = "source-over";
+        ctx.shadowColor = "transparent";
+        pathRoundRect(ctx, x + 0.5, y + 0.5, w - 1, h - 1, 22.5);
+        ctx.strokeStyle = "rgba(255,255,255,0.72)";
+        ctx.lineWidth = 1;
+        ctx.stroke();
+        ctx.beginPath();
+        ctx.moveTo(x + 24, y + 11);
+        ctx.bezierCurveTo(x + 105, y - 2, x + 220, y + 7, x + w - 42, y + 12);
+        ctx.strokeStyle = "rgba(255,255,255,0.38)";
+        ctx.lineWidth = 2;
+        ctx.stroke();
+        pathRoundRect(ctx, x + 10, y + 14, 38, 38, 11);
+        ctx.fillStyle = "rgba(255,255,255,0.58)";
+        ctx.fill();
+        var icon = document.querySelector(iconSelector);
+        if (icon && icon.complete) {
+          ctx.save();
+          pathRoundRect(ctx, x + 10, y + 14, 38, 38, 11);
+          ctx.clip();
+          ctx.drawImage(icon, x + 10, y + 14, 38, 38);
+          ctx.restore();
+        }
+        ctx.fillStyle = "#fff";
+        ctx.shadowColor = "rgba(0,0,0,0.32)";
+        ctx.shadowBlur = 3;
+        ctx.shadowOffsetY = 1;
+        ctx.font = "800 13px Inter, system-ui, sans-serif";
+        ctx.textBaseline = "top";
+        ctx.fillText(title, x + 60, y + 13);
+        ctx.globalAlpha = q * 0.92;
+        ctx.font = "800 12px Inter, system-ui, sans-serif";
+        ctx.fillText(time, x + w - ctx.measureText(time).width - 14, y + 13);
+        ctx.globalAlpha = q * 0.95;
+        ctx.font = "650 12px Inter, system-ui, sans-serif";
+        ctx.fillText(body, x + 60, y + 34);
+        ctx.restore();
+      }
+
+      function drawCanvasNotifications(ctx) {
+        glassBufferCtx.clearRect(0, 0, 390, 844);
+        glassBufferCtx.drawImage(ctx.canvas, 0, 0);
+        drawNotificationCard(
+          ctx,
+          S.iosN1,
+          0,
+          "#ios-notify-messages-preload",
+          "Messages",
+          "now",
+          "Liquid Glass preview is ready for review.",
+        );
+        drawNotificationCard(
+          ctx,
+          S.iosN2,
+          68,
+          'img[src="assets/icons/slack.jpg"]',
+          "HyperFrames",
+          "1m",
+          "One-worker render is ready.",
+        );
+        drawNotificationCard(
+          ctx,
+          S.iosN3,
+          136,
+          'img[src="assets/icons/gmail.jpg"]',
+          "Gmail",
+          "2m",
+          "Preview videos are live on CDN.",
+        );
+      }
+
+      function captureScreens() {
+        if (!apiOk || !paintReady) return;
+        try {
+          capPhoneCtx.clearRect(0, 0, 390, 844);
+          capPhoneCtx.drawElementImage(phoneHtmlEl, 0, 0, 390, 844);
+          drawCanvasNotifications(capPhoneCtx);
+          capLapCtx.clearRect(0, 0, 1440, 900);
+          capLapCtx.drawElementImage(lapHtmlEl, 0, 0, 1440, 900);
+          phoneTex.needsUpdate = true;
+          lapTex.needsUpdate = true;
+        } catch (e) {}
+      }
+
+      // ── Turntable Group (both devices rotate together for 360° orbit) ──
+      var turntable = new THREE.Group();
+      scene.add(turntable);
+
+      // ── Model Groups ───────────────────────────────────────────────────
+      var phoneGrp = new THREE.Group();
+      turntable.add(phoneGrp);
+      var lapGrp = new THREE.Group();
+      turntable.add(lapGrp);
+      var ready = 0;
+
+      var draco = new THREE.DRACOLoader();
+      draco.setDecoderPath("https://www.gstatic.com/draco/versioned/decoders/1.5.6/");
+      var loader = new THREE.GLTFLoader();
+      loader.setDRACOLoader(draco);
+
+      // iPhone
+      // The replacement device models carry UVs authored for a tiling material
+      // (the laptop panel runs u -6.3..6.3), so mapping one screen image onto
+      // them clamps at the edges and smears the last row of pixels across the
+      // whole panel. Both screens are flat planes, so derive planar UVs from
+      // the mesh's own bounds instead of trusting what shipped.
+      function planarScreenUv(mesh) {
+        var g = mesh.geometry;
+        g.computeBoundingBox();
+        var bb = g.boundingBox;
+        var pos = g.attributes.position;
+        var w = bb.max.x - bb.min.x || 1;
+        var h = bb.max.y - bb.min.y || 1;
+        var uv = new Float32Array(pos.count * 2);
+        for (var i = 0; i < pos.count; i++) {
+          uv[i * 2] = (pos.getX(i) - bb.min.x) / w;
+          uv[i * 2 + 1] = (pos.getY(i) - bb.min.y) / h;
+        }
+        g.setAttribute("uv", new THREE.BufferAttribute(uv, 2));
+      }
+
+      // These compositions were authored around a model whose screen faced -Z
+      // (the old asset's display plane sat at its minimum Z) and every camera
+      // move and spin in the timeline assumes it. The replacement faces +Z, so
+      // align the model rather than re-time the animation. Reads the model's
+      // own parts, so a re-export facing the other way still lands right.
+      function alignScreenToMinusZ(root, frontName, backName) {
+        var front = root.getObjectByName(frontName);
+        var back = root.getObjectByName(backName);
+        if (!front || !back) return;
+        // matrixWorld is only refreshed during a render, and this runs at load,
+        // so without this the two parts both read as the origin and the test
+        // silently never fires.
+        root.updateWorldMatrix(true, true);
+        var fp = new THREE.Vector3();
+        var bp = new THREE.Vector3();
+        front.getWorldPosition(fp);
+        back.getWorldPosition(bp);
+        if (fp.z > bp.z) root.rotation.y += Math.PI;
+      }
+
+      loader.load("models/iphone.glb", function (gltf) {
+        var m = gltf.scene;
+        var box = new THREE.Box3().setFromObject(m);
+        var sz = box.getSize(new THREE.Vector3());
+        var s = 3.2 / sz.y;
+        m.scale.setScalar(s);
+        box.setFromObject(m);
+        m.position.sub(box.getCenter(new THREE.Vector3()));
+        m.traverse(function (child) {
+          if (!child.isMesh) return;
+          // `front-glass` is the display face; Blender's exporter suffixes the
+          // mesh name and leaves the node name bare, so match the prefix.
+          if (child.name.indexOf("front-glass") === 0) {
+            planarScreenUv(child);
+            child.material = new THREE.MeshBasicMaterial({ map: phoneTex });
+          }
+        });
+        alignScreenToMinusZ(m, "front-glass", "rear-window");
+        phoneGrp.add(m);
+        ready++;
+        if (ready === 1) onReady();
+      });
+
+      function onReady() {
+        waitForImages()
+          .then(function () {
+            return waitForPaint(capPhoneCvs);
+          })
+          .then(function () {
+            paintReady = true;
+            captureScreens();
+            render();
+          });
+      }
+
+      // ── Cubic Bezier Implementation ────────────────────────────────────
+      function cbz(p1x, p1y, p2x, p2y) {
+        var ax = 3 * p1x - 3 * p2x + 1,
+          bx = 3 * p2x - 6 * p1x,
+          cx = 3 * p1x;
+        var ay = 3 * p1y - 3 * p2y + 1,
+          by = 3 * p2y - 6 * p1y,
+          cy = 3 * p1y;
+        return function (t) {
+          var s = t;
+          for (var i = 0; i < 12; i++) {
+            var x = ((ax * s + bx) * s + cx) * s - t;
+            var dx = (3 * ax * s + 2 * bx) * s + cx;
+            if (Math.abs(dx) < 1e-10) break;
+            s -= x / dx;
+          }
+          s = Math.max(0, Math.min(1, s));
+          return ((ay * s + by) * s + cy) * s;
+        };
+      }
+
+      var enterEase = cbz(0.16, 1.0, 0.3, 1.0);
+      var notificationEase = cbz(0.22, 0.0, 0.16, 1.0);
+      var spinEase = cbz(0.76, 0.0, 0.18, 1.0);
+      var driftEase = cbz(0.45, 0.0, 0.15, 1.0);
+      var snapEase = cbz(0.22, 1.15, 0.36, 1.0);
+      var breatheEase = cbz(0.37, 0.0, 0.63, 1.0);
+
+      // ── Animation State ────────────────────────────────────────────────
+      var S = {
+        phX: 0,
+        phY: 0.1,
+        phZ: 0.5,
+        phRX: 0,
+        phRY: PI,
+        phRZ: 0,
+        lpX: 10,
+        lpY: -0.2,
+        lpZ: -0.6,
+        lpRX: 0,
+        lpRY: 0,
+        lpRZ: 0,
+        cX: 0,
+        cY: 0.18,
+        cZ: 6.15,
+        clX: 0,
+        clY: 0.1,
+        clZ: 0,
+        drift: 0,
+        turn: 0,
+        cardReveal: 0,
+        titleFade: 0,
+        counter: 0,
+        iosN1: 0,
+        iosN2: 0,
+        iosN3: 0,
+        p: 0,
+      };
+
+      function render() {
+        var d = S.drift;
+
+        // ── Animate live HTML content (captured to texture every frame) ──
+        // Title fade-in
+        document.getElementById("phone-title").style.opacity = S.titleFade;
+        document.getElementById("laptop-title").style.opacity = S.titleFade;
+        // Counter
+        var cnt = Math.round(S.counter);
+        document.getElementById("phone-count").textContent = "Catalog " + cnt;
+        document.getElementById("laptop-count").textContent = "Catalog " + cnt;
+        // Staggered card reveal
+        var allCards = document.querySelectorAll(".anim-card");
+        for (var ci2 = 0; ci2 < allCards.length; ci2++) {
+          var cardProgress = Math.max(0, Math.min(1, (S.cardReveal * allCards.length - ci2) * 1.5));
+          allCards[ci2].style.opacity = cardProgress;
+          allCards[ci2].style.transform = "translateY(" + (1 - cardProgress) * 15 + "px)";
+        }
+        function dropNotification(id, progress) {
+          var el = document.getElementById(id);
+          if (!el) return;
+          var p = Math.max(0, Math.min(1, progress));
+          var q = notificationEase(p);
+          var overshoot = Math.sin(q * PI) * 5;
+          el.style.opacity = q;
+          el.style.transform =
+            "translateY(" + ((1 - q) * -125 + overshoot) + "px) scale(" + (0.98 + q * 0.02) + ")";
+        }
+        dropNotification("ios-notification-a", S.iosN1);
+        dropNotification("ios-notification-b", S.iosN2);
+        dropNotification("ios-notification-c", S.iosN3);
+        // Re-capture HTML to texture
+        captureScreens();
+
+        phoneGrp.position.set(
+          S.phX + Math.sin(d * 0.5) * 0.015,
+          S.phY + Math.sin(d * 0.7) * 0.008,
+          S.phZ + Math.cos(d * 0.4) * 0.008,
+        );
+        phoneGrp.rotation.set(S.phRX, S.phRY, S.phRZ);
+        lapGrp.position.set(
+          S.lpX - Math.sin(d * 0.4) * 0.012,
+          S.lpY + Math.sin(d * 0.6) * 0.006,
+          S.lpZ + Math.cos(d * 0.35) * 0.008,
+        );
+        lapGrp.rotation.set(S.lpRX, S.lpRY, S.lpRZ);
+        turntable.rotation.y = S.turn;
+        bgUniforms.uTime.value = d;
+        camera.position.set(S.cX, S.cY, S.cZ);
+        camera.lookAt(S.clX, S.clY, S.clZ);
+        renderer.render(scene, camera);
+      }
+
+      // ── GSAP Timeline — Product Review Edit ────────────────────────────
+      var tl = gsap.timeline({ paused: true });
+      window.__timelines = window.__timelines || {};
+      window.__timelines["ios26-liquid-glass"] = tl;
+
+      tl.to(S, { p: 1, drift: 15, duration: 15, ease: "none" }, 0);
+
+      // ── iOS 26 Showcase: full-device hero with a subtle drift-in ──
+      tl.to(S, { cZ: 6.45, duration: 12, ease: driftEase }, 0.5);
+      tl.to(S, { cY: 0.16, duration: 12, ease: driftEase }, 0.5);
+
+      // Very gentle tilt — shows the glass icon refraction from slightly different angles
+      tl.to(S, { phRY: PI + 0.04, phRX: 0.01, duration: 4, ease: breatheEase }, 0.5);
+      tl.to(S, { phRY: PI - 0.03, phRX: -0.008, duration: 4, ease: breatheEase }, 4.5);
+      tl.to(S, { phRY: PI + 0.02, phRX: 0.005, duration: 4, ease: breatheEase }, 8.5);
+
+      // No scroll — keep the home screen static
+      // No 360° turntable — just the gentle zoom out
+
+      // Move MacBook off screen so it doesn't appear
+      tl.set(S, { lpX: 10 }, 0);
+      tl.to(S, { iosN1: 1, duration: 0.72, ease: "none" }, 0.85);
+      tl.to(S, { iosN2: 1, duration: 0.74, ease: "none" }, 1.7);
+      tl.to(S, { iosN3: 1, duration: 0.76, ease: "none" }, 2.55);
+      tl.to({}, { duration: 15, ease: "none", onUpdate: render }, 0);
+    </script>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="ios26-liquid-glass" data-composition-src="compositions/ios26-liquid-glass.html" data-start="0" data-duration="15" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/light-leak.mdx b/docs/catalog/blocks/light-leak.mdx
index c5bd15150e..84776c66bd 100644
--- a/docs/catalog/blocks/light-leak.mdx
+++ b/docs/catalog/blocks/light-leak.mdx
@@ -3,34 +3,397 @@ title: "Light Leak"
 description: "Shader transition with cinematic light leak overlay"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/light-leak.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/light-leak.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/light-leak.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Light Leak preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add light-leak
-```
+<InstallCommand command="npx hyperframes add light-leak" />
 
 That writes one file: `compositions/light-leak.html`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`light-leak.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      @import url("https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Bebas+Neue&family=JetBrains+Mono:wght@400;700&family=Lato:wght@400;700&display=block");
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <style>
+        [data-composition-id="main"] {
+          width: 1920px;
+          height: 1080px;
+          overflow: hidden;
+          position: relative;
+          background: #001524;
+        }
+
+        /* Blueprint grid */
+        .bp-grid {
+          position: absolute;
+          inset: 0;
+          background-image:
+            linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
+            linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
+          background-size: 40px 40px;
+          pointer-events: none;
+        }
+
+        /* Layout */
+        .bp-left {
+          position: absolute;
+          left: 0;
+          top: 0;
+          bottom: 0;
+          width: 1200px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .bp-right {
+          position: absolute;
+          right: 0;
+          top: 0;
+          bottom: 0;
+          width: 720px;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          padding: 60px 60px 60px 40px;
+        }
+        .bp-divider {
+          position: absolute;
+          left: 1200px;
+          top: 60px;
+          bottom: 60px;
+          width: 1px;
+          background: #fb8b24;
+          opacity: 0.15;
+        }
+        .bp-number {
+          font-family: "Space Mono", monospace;
+          font-size: 14px;
+          font-weight: 700;
+          letter-spacing: 0.4em;
+          text-transform: uppercase;
+          position: absolute;
+          top: 40px;
+          left: 60px;
+          color: #fb8b24;
+        }
+
+        /* Right panel typography */
+        .bp-name {
+          font-family: "Bebas Neue", sans-serif;
+          font-size: 38px;
+          letter-spacing: 0.08em;
+          margin-bottom: 20px;
+          color: #fb8b24;
+        }
+        .bp-plabel {
+          font-family: "Space Mono", monospace;
+          font-size: 11px;
+          font-weight: 700;
+          letter-spacing: 0.3em;
+          text-transform: uppercase;
+          margin-bottom: 10px;
+          color: #fb8b24;
+          opacity: 0.5;
+        }
+        .bp-prompt {
+          font-family: "JetBrains Mono", monospace;
+          font-size: 20px;
+          line-height: 1.6;
+          padding: 16px 20px;
+          border-radius: 6px;
+          margin-bottom: 20px;
+          color: #fb8b24;
+          background: rgba(251, 139, 36, 0.06);
+          border: 1px solid rgba(251, 139, 36, 0.12);
+        }
+        .bp-desc {
+          font-family: "Lato", sans-serif;
+          font-size: 17px;
+          line-height: 1.6;
+          color: #708d81;
+          opacity: 0.55;
+        }
+
+        /* GL scenes (hidden, just for texture capture) */
+        .scene {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1200px;
+          height: 1080px;
+          overflow: hidden;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .scene-label {
+          font-family: "Bebas Neue", sans-serif;
+          font-size: 140px;
+          letter-spacing: 0.06em;
+          opacity: 0.12;
+        }
+      </style>
+
+      <div class="bp-grid"></div>
+      <div class="bp-divider"></div>
+      <div class="bp-number">14 / 14</div>
+
+      <!-- GL demo scenes (captured as textures, then hidden) -->
+      <div id="s1" class="scene" style="background: #001524">
+        <div class="scene-label" style="color: #fb8b24">SCENE A</div>
+      </div>
+      <div id="s2" class="scene" style="background: #fb8b24; opacity: 0">
+        <div class="scene-label" style="color: #001524">SCENE B</div>
+      </div>
+
+      <!-- GL canvas (left panel only) -->
+      <canvas
+        id="gl-canvas"
+        width="1200"
+        height="1080"
+        style="
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1200px;
+          height: 1080px;
+          z-index: 10;
+          pointer-events: none;
+          display: none;
+        "
+      >
+      </canvas>
+
+      <!-- Right panel metadata -->
+      <div class="bp-right">
+        <div class="bp-name">Light Leak</div>
+        <div class="bp-plabel">Prompt</div>
+        <div class="bp-prompt">"use light leak shader transition"</div>
+        <div class="bp-desc">
+          Beer-Lambert exponential falloff with ACES tone mapping and directional flare streak.
+        </div>
+      </div>
 
-It runs for 4 seconds at 1920×1080. Paste this into your composition:
+      <div
+        id="driver"
+        class="clip"
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
 
-```html index.html
-<div
-  data-composition-id="light-leak"
-  data-composition-src="compositions/light-leak.html"
-  data-start="0"
-  data-duration="4"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      var glCanvas = document.getElementById("gl-canvas");
+      var gl = glCanvas.getContext("webgl", { preserveDrawingBuffer: true });
+      if (!gl) {
+        console.warn("WebGL not available");
+        window.__timelines["main"] = gsap.timeline({ paused: true });
+      } else {
+        gl.viewport(0, 0, 1200, 1080);
+        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
+        var sceneTextures = {};
+
+        function captureScene(sceneId) {
+          var scene = document.getElementById(sceneId);
+          var origOpacity = scene.style.opacity;
+          var origZ = scene.style.zIndex;
+          scene.style.opacity = "1";
+          scene.style.zIndex = "999";
+          scene.offsetHeight;
+          var c = document.createElement("canvas");
+          c.width = 1200;
+          c.height = 1080;
+          var ctx = c.getContext("2d");
+          ctx.fillStyle = window.getComputedStyle(scene).backgroundColor;
+          ctx.fillRect(0, 0, 1200, 1080);
+          var sr = scene.getBoundingClientRect();
+          var els = scene.querySelectorAll("*");
+          for (var i = 0; i < els.length; i++) {
+            var el = els[i],
+              cs = window.getComputedStyle(el);
+            if (cs.display === "none" || cs.visibility === "hidden") continue;
+            var r = el.getBoundingClientRect();
+            if (r.width < 1 || r.height < 1) continue;
+            var x = r.left - sr.left,
+              y = r.top - sr.top,
+              w = r.width,
+              h = r.height;
+            ctx.save();
+            ctx.globalAlpha = parseFloat(cs.opacity) || 1;
+            var bg = cs.backgroundColor;
+            if (bg && bg !== "rgba(0, 0, 0, 0)" && bg !== "transparent") {
+              ctx.fillStyle = bg;
+              ctx.fillRect(x, y, w, h);
+            }
+            var hasChildEls = el.querySelector("div,span,img,video");
+            var text = "";
+            for (var j = 0; j < el.childNodes.length; j++)
+              if (el.childNodes[j].nodeType === 3) text += el.childNodes[j].textContent;
+            text = text.trim();
+            if (text && !hasChildEls) {
+              ctx.font = cs.fontWeight + " " + cs.fontSize + " " + cs.fontFamily;
+              ctx.fillStyle = cs.color;
+              if (cs.letterSpacing && cs.letterSpacing !== "normal")
+                ctx.letterSpacing = cs.letterSpacing;
+              ctx.textAlign = "center";
+              ctx.textBaseline = "middle";
+              ctx.fillText(text, x + w / 2, y + h / 2);
+            }
+            ctx.restore();
+          }
+          scene.style.opacity = origOpacity;
+          scene.style.zIndex = origZ;
+          var tex = gl.createTexture();
+          gl.bindTexture(gl.TEXTURE_2D, tex);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+          gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, c);
+          sceneTextures[sceneId] = tex;
+        }
+
+        var vertSrc =
+          "attribute vec2 a_pos; varying vec2 v_uv; void main(){" +
+          "v_uv=a_pos*0.5+0.5; v_uv.y=1.0-v_uv.y; gl_Position=vec4(a_pos,0,1);}";
+        var quadBuf = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);
+        gl.bufferData(
+          gl.ARRAY_BUFFER,
+          new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),
+          gl.STATIC_DRAW,
+        );
+        function compileShader(src, type) {
+          var s = gl.createShader(type);
+          gl.shaderSource(s, src);
+          gl.compileShader(s);
+          if (!gl.getShaderParameter(s, gl.COMPILE_STATUS))
+            console.error("Shader:", gl.getShaderInfoLog(s));
+          return s;
+        }
+        function mkProg(fragSrc) {
+          var p = gl.createProgram();
+          gl.attachShader(p, compileShader(vertSrc, gl.VERTEX_SHADER));
+          gl.attachShader(p, compileShader(fragSrc, gl.FRAGMENT_SHADER));
+          gl.linkProgram(p);
+          if (!gl.getProgramParameter(p, gl.LINK_STATUS))
+            console.error("Link:", gl.getProgramInfoLog(p));
+          return p;
+        }
+
+        var H =
+          "precision mediump float;" +
+          "varying vec2 v_uv;" +
+          "uniform sampler2D u_from, u_to;" +
+          "uniform float u_progress;" +
+          "uniform vec2 u_resolution;\n";
+
+        var progPass = mkProg(H + "void main(){gl_FragColor=texture2D(u_from,v_uv);}");
+        var progTrans = mkProg(
+          H +
+            "vec3 aces(vec3 x){return clamp((x*(2.51*x+.03))/(x*(2.43*x+.59)+.14),0.,1.);}void main(){vec4 A=texture2D(u_from,v_uv),B=texture2D(u_to,v_uv);vec2 lp=vec2(1.3,-.2);float dist=length(v_uv-lp);float leak=clamp(exp(-dist*1.8)*u_progress*4.,0.,1.);vec3 warmColor=mix(vec3(1.,.5,.15),vec3(1.,.9,.75),dist*.7);float flare=exp(-abs(v_uv.y-(-.2+v_uv.x*.3))*15.)*leak*.3;vec3 overexposed=A.rgb+warmColor*leak*3.+vec3(1.,.8,.5)*flare;overexposed=aces(overexposed);gl_FragColor=vec4(mix(overexposed,B.rgb,smoothstep(.15,.85,u_progress)),1.);}",
+        );
+
+        function renderShader(prog, texFrom, texTo, progress) {
+          gl.useProgram(prog);
+          gl.activeTexture(gl.TEXTURE0);
+          gl.bindTexture(gl.TEXTURE_2D, texFrom);
+          gl.uniform1i(gl.getUniformLocation(prog, "u_from"), 0);
+          gl.activeTexture(gl.TEXTURE1);
+          gl.bindTexture(gl.TEXTURE_2D, texTo);
+          gl.uniform1i(gl.getUniformLocation(prog, "u_to"), 1);
+          gl.uniform1f(gl.getUniformLocation(prog, "u_progress"), progress);
+          gl.uniform2f(gl.getUniformLocation(prog, "u_resolution"), 1200, 1080);
+          var pos = gl.getAttribLocation(prog, "a_pos");
+          gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);
+          gl.enableVertexAttribArray(pos);
+          gl.vertexAttribPointer(pos, 2, gl.FLOAT, false, 0, 0);
+          gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+        }
+
+        function easeInOut(p) {
+          return p < 0.5 ? 2 * p * p : 1 - Math.pow(-2 * p + 2, 2) / 2;
+        }
+
+        captureScene("s1");
+        captureScene("s2");
+        glCanvas.style.display = "block";
+        renderShader(progPass, sceneTextures["s1"], sceneTextures["s1"], 0);
+        document.querySelectorAll(".scene").forEach(function (s) {
+          s.style.opacity = "0";
+        });
+
+        var tl = gsap.timeline({
+          paused: true,
+          onUpdate: function () {
+            var t = tl.time();
+            if (t >= 1.0 && t < 3.0) {
+              renderShader(
+                progTrans,
+                sceneTextures["s1"],
+                sceneTextures["s2"],
+                easeInOut((t - 1.0) / 2.0),
+              );
+            } else if (t >= 3.0) {
+              renderShader(progPass, sceneTextures["s2"], sceneTextures["s2"], 0);
+            } else {
+              renderShader(progPass, sceneTextures["s1"], sceneTextures["s1"], 0);
+            }
+          },
+        });
+        tl.to({ v: 0 }, { v: 1, duration: 4, ease: "none" }, 0);
+        window.__timelines["main"] = tl;
+      } // end if (gl)
+    </script>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="light-leak" data-composition-src="compositions/light-leak.html" data-start="0" data-duration="4" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/liquid-glass-context-menu.mdx b/docs/catalog/blocks/liquid-glass-context-menu.mdx
index 06eacb5995..b8a1b0ea66 100644
--- a/docs/catalog/blocks/liquid-glass-context-menu.mdx
+++ b/docs/catalog/blocks/liquid-glass-context-menu.mdx
@@ -3,40 +3,661 @@ title: "Liquid Glass Context Menu"
 description: "Frosted glass context menu panel drifting over an aurora shader background"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-context-menu.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-context-menu.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/liquid-glass-context-menu.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Liquid Glass Context Menu preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add liquid-glass-context-menu
-```
+<InstallCommand command="npx hyperframes add liquid-glass-context-menu" />
 
 That writes `compositions/liquid-glass-context-menu.html`, plus 1 supporting file under `compositions/lib/`.
 
-<Warning>
+<Danger>
   Live preview needs the `chrome://flags/#canvas-draw-element` flag switched on.
-  Rendering from the CLI switches it on for you. [How it
-  works](/guides/html-in-canvas)
-</Warning>
-
-## Add it to your video
-
-It runs for 8 seconds at 1920×1080. Paste this into your composition:
-
-```html index.html
-<div
-  data-composition-id="liquid-glass-context-menu"
-  data-composition-src="compositions/liquid-glass-context-menu.html"
-  data-start="0"
-  data-duration="8"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+  Without it this item's screen renders black. Rendering from the CLI switches
+  it on for you. [How it works](/guides/html-in-canvas)
+</Danger>
+
+## Source
+
+<Accordion title={`liquid-glass-context-menu.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Liquid Glass Context Menu</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script src="lib/liquid-glass.iife.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #0a0218;
+        overflow: hidden;
+        font-family: "Inter", system-ui, sans-serif;
+      }
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #three-canvas {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        z-index: 0;
+      }
+      #glass-canvas {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        z-index: 1;
+      }
+
+      /* ── Glass Panel ── */
+      .menu-panel {
+        position: absolute;
+        width: 390px;
+        height: 506px;
+        background: rgba(255, 255, 255, 0.15);
+        --lg-blur: 0.56;
+        --lg-refraction: 0.52;
+        --lg-corner-radius: 30;
+        --lg-z-radius: 48;
+        --lg-specular: 0.26;
+        --lg-fresnel: 1;
+        --lg-edge-highlight: 0.2;
+        --lg-chrom-aberration: 0.035;
+        --lg-tint: 0.88;
+        --lg-brightness: 0.54;
+        --lg-shadow-opacity: 0;
+        --lg-shadow-spread: 0;
+        --lg-shadow-offset-y: 0;
+        --lg-saturation: -0.24;
+      }
+      #glass-menu {
+        top: 270px;
+        left: 1980px;
+      }
+      .file-panel {
+        position: absolute;
+        top: 372px;
+        left: 500px;
+        width: 360px;
+        height: 104px;
+        background: rgba(255, 255, 255, 0.11);
+        --lg-blur: 0.52;
+        --lg-refraction: 0.48;
+        --lg-corner-radius: 28;
+        --lg-z-radius: 36;
+        --lg-specular: 0.28;
+        --lg-fresnel: 0.94;
+        --lg-edge-highlight: 0.18;
+        --lg-chrom-aberration: 0.03;
+        --lg-tint: 0.74;
+        --lg-brightness: 0.34;
+        --lg-shadow-opacity: 0;
+        --lg-shadow-spread: 0;
+        --lg-shadow-offset-y: 0;
+        --lg-saturation: -0.18;
+      }
+      .submenu-panel {
+        position: absolute;
+        top: 456px;
+        left: 1980px;
+        width: 230px;
+        height: 58px;
+        background: rgba(255, 255, 255, 0.11);
+        --lg-blur: 0.52;
+        --lg-refraction: 0.5;
+        --lg-corner-radius: 20;
+        --lg-z-radius: 28;
+        --lg-specular: 0.3;
+        --lg-fresnel: 0.96;
+        --lg-edge-highlight: 0.18;
+        --lg-chrom-aberration: 0.03;
+        --lg-tint: 0.74;
+        --lg-brightness: 0.36;
+        --lg-shadow-opacity: 0;
+        --lg-shadow-spread: 0;
+        --lg-shadow-offset-y: 0;
+        --lg-saturation: -0.2;
+      }
+
+      /* ── Text Overlay ── */
+      .text-overlay {
+        position: absolute;
+        z-index: 2;
+        pointer-events: none;
+      }
+      .context-file {
+        position: absolute;
+        top: 340px;
+        left: 500px;
+        z-index: 2;
+        width: 360px;
+        height: 104px;
+        display: flex;
+        align-items: center;
+        gap: 18px;
+        padding: 18px 22px;
+        border-radius: 26px;
+        background: linear-gradient(
+          180deg,
+          rgba(255, 255, 255, 0.095) 0%,
+          rgba(255, 255, 255, 0.036) 38%,
+          rgba(255, 255, 255, 0.006) 100%
+        );
+        box-shadow: none;
+      }
+      .file-icon {
+        width: 58px;
+        height: 68px;
+        flex-shrink: 0;
+        border-radius: 16px;
+        background:
+          linear-gradient(135deg, rgba(6, 227, 250, 0.92), rgba(79, 219, 94, 0.85)),
+          rgba(255, 255, 255, 0.12);
+        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34);
+      }
+      .file-meta {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+      }
+      .file-title {
+        color: rgba(5, 17, 28, 0.9);
+        font-size: 21px;
+        font-weight: 780;
+        letter-spacing: 0;
+        text-shadow:
+          0 1px 0 rgba(255, 255, 255, 0.24),
+          0 10px 20px rgba(255, 255, 255, 0.14);
+      }
+      .file-subtitle {
+        color: rgba(5, 17, 28, 0.72);
+        font-size: 15px;
+        font-weight: 650;
+        text-shadow:
+          0 1px 0 rgba(255, 255, 255, 0.2),
+          0 8px 18px rgba(255, 255, 255, 0.12);
+      }
+      .pointer {
+        position: absolute;
+        top: 395px;
+        left: 778px;
+        z-index: 4;
+        width: 34px;
+        height: 44px;
+        border-radius: 2px;
+        background: #fff;
+        clip-path: polygon(0 0, 0 100%, 31% 73%, 47% 100%, 62% 93%, 46% 67%, 82% 67%);
+        filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.4));
+      }
+      .click-ring {
+        position: absolute;
+        top: 390px;
+        left: 770px;
+        z-index: 3;
+        width: 46px;
+        height: 46px;
+        border: 2px solid rgba(255, 255, 255, 0.75);
+        border-radius: 50%;
+        opacity: 0;
+      }
+      .menu-text {
+        width: 390px;
+        height: 506px;
+        display: flex;
+        flex-direction: column;
+        padding: 18px 0;
+        background: transparent;
+        border-radius: 30px;
+        box-shadow: none;
+        overflow: hidden;
+      }
+      #text-menu {
+        top: 270px;
+        left: 1980px;
+      }
+
+      .menu-highlight {
+        position: absolute;
+        top: 17px;
+        left: 14px;
+        z-index: 0;
+        width: 362px;
+        height: 52px;
+        border-radius: 17px;
+        background:
+          radial-gradient(circle at 24% 22%, rgba(255, 255, 255, 0.48), transparent 42%),
+          linear-gradient(90deg, rgba(255, 255, 255, 0.29), rgba(255, 255, 255, 0.12));
+        box-shadow:
+          inset 0 1px 0 rgba(255, 255, 255, 0.38),
+          inset 0 -1px 0 rgba(255, 255, 255, 0.1);
+        opacity: 0;
+      }
+      .menu-item {
+        position: relative;
+        z-index: 1;
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        padding: 14px 28px;
+        font-size: 18px;
+        font-weight: 650;
+        color: rgb(0, 7, 14);
+        cursor: default;
+        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.26);
+      }
+      .menu-item svg {
+        width: 22px;
+        height: 22px;
+        flex-shrink: 0;
+        stroke: rgb(0, 7, 14);
+        fill: none;
+        stroke-width: 2;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+      .menu-sep {
+        height: 1px;
+        margin: 10px 28px;
+        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.24), transparent);
+      }
+      .menu-footer {
+        position: relative;
+        z-index: 1;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 14px 26px;
+        margin-top: auto;
+      }
+      .menu-footer-item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 4px;
+        font-size: 13px;
+        font-weight: 650;
+        color: rgba(0, 7, 14, 0.9);
+        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.24);
+      }
+      .menu-footer-item svg {
+        width: 24px;
+        height: 24px;
+        stroke: rgba(0, 7, 14, 0.84);
+        fill: none;
+        stroke-width: 2;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+      .menu-kbd {
+        margin-left: auto;
+        font-size: 14px;
+        font-weight: 650;
+        color: rgba(0, 7, 14, 0.82);
+        font-variant-numeric: tabular-nums;
+      }
+      .submenu-preview {
+        position: absolute;
+        top: 456px;
+        left: 1980px;
+        z-index: 2;
+        width: 230px;
+        height: 58px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 20px;
+        background: transparent;
+        box-shadow: none;
+        color: rgba(0, 7, 14, 0.92);
+        font-size: 15px;
+        font-weight: 760;
+        opacity: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="liquid-glass-context-menu"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="8"
+      data-root="true"
+    >
+      <canvas id="three-canvas" width="1920" height="1080"></canvas>
+
+      <canvas id="glass-canvas" layoutsubtree width="1920" height="1080">
+        <div id="glass-file" class="file-panel liquid-glass"></div>
+        <div id="glass-menu" class="menu-panel liquid-glass"></div>
+        <div id="glass-submenu" class="submenu-panel liquid-glass"></div>
+      </canvas>
+
+      <div id="context-file" class="context-file">
+        <div class="file-icon"></div>
+        <div class="file-meta">
+          <div class="file-title">liquid-glass.mov</div>
+          <div class="file-subtitle">Preview render - 08s</div>
+        </div>
+      </div>
+      <div id="click-ring" class="click-ring"></div>
+      <div id="pointer" class="pointer"></div>
+
+      <div id="text-menu" class="text-overlay menu-text">
+        <div id="menu-highlight" class="menu-highlight"></div>
+        <div class="menu-item">
+          <svg viewBox="0 0 24 24">
+            <path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8" />
+            <polyline points="16 6 12 2 8 6" />
+            <line x1="12" y1="2" x2="12" y2="15" />
+          </svg>
+          <span>Share</span>
+        </div>
+        <div class="menu-item">
+          <svg viewBox="0 0 24 24">
+            <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z" />
+          </svg>
+          <span>Add to Bookmarks</span>
+        </div>
+        <div class="menu-item">
+          <svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14" /></svg>
+          <span>Add Bookmark to...</span>
+        </div>
+        <div class="menu-sep"></div>
+        <div class="menu-item">
+          <svg viewBox="0 0 24 24">
+            <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
+            <line x1="9" y1="3" x2="9" y2="21" />
+          </svg>
+          <span>New Tab</span>
+          <span class="menu-kbd">&#8984;T</span>
+        </div>
+        <div class="menu-item">
+          <svg viewBox="0 0 24 24">
+            <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
+            <path d="M9 3v18" />
+            <path d="M14 9l3 3-3 3" />
+          </svg>
+          <span>New Private Tab</span>
+          <span class="menu-kbd">&#8679;&#8984;N</span>
+        </div>
+        <div class="menu-sep"></div>
+        <div class="menu-footer">
+          <div class="menu-footer-item">
+            <svg viewBox="0 0 24 24">
+              <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z" />
+            </svg>
+            <span>Bookmarks</span>
+          </div>
+          <div class="menu-footer-item">
+            <svg viewBox="0 0 24 24">
+              <rect x="3" y="3" width="7" height="7" />
+              <rect x="14" y="3" width="7" height="7" />
+              <rect x="3" y="14" width="7" height="7" />
+              <rect x="14" y="14" width="7" height="7" />
+            </svg>
+            <span>All Tabs</span>
+          </div>
+        </div>
+      </div>
+      <div id="submenu-preview" class="submenu-preview">Open in New Tab</div>
+
+      <div
+        id="driver"
+        class="clip"
+        data-start="0"
+        data-duration="8"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+
+    <script>
+      var W = 1920,
+        H = 1080,
+        DURATION = 8;
+
+      /* ── Three.js Aurora Shader ─────────────────────────────────────── */
+      var vs = "varying vec2 vUv; void main() { vUv = uv; gl_Position = vec4(position, 1.0); }";
+      var fs = [
+        "precision highp float;",
+        "varying vec2 vUv;",
+        "uniform float uTime;",
+        "vec3 mod289(vec3 x){return x-floor(x*(1.0/289.0))*289.0;}",
+        "vec4 mod289(vec4 x){return x-floor(x*(1.0/289.0))*289.0;}",
+        "vec4 permute(vec4 x){return mod289(((x*34.0)+1.0)*x);}",
+        "vec4 taylorInvSqrt(vec4 r){return 1.79284291400159-0.85373472095314*r;}",
+        "float snoise(vec3 v){",
+        "  const vec2 C=vec2(1.0/6.0,1.0/3.0);const vec4 D=vec4(0.0,0.5,1.0,2.0);",
+        "  vec3 i=floor(v+dot(v,C.yyy));vec3 x0=v-i+dot(i,C.xxx);",
+        "  vec3 g=step(x0.yzx,x0.xyz);vec3 l=1.0-g;",
+        "  vec3 i1=min(g.xyz,l.zxy);vec3 i2=max(g.xyz,l.zxy);",
+        "  vec3 x1=x0-i1+C.xxx;vec3 x2=x0-i2+C.yyy;vec3 x3=x0-D.yyy;",
+        "  i=mod289(i);",
+        "  vec4 p=permute(permute(permute(i.z+vec4(0.0,i1.z,i2.z,1.0))+i.y+vec4(0.0,i1.y,i2.y,1.0))+i.x+vec4(0.0,i1.x,i2.x,1.0));",
+        "  float n_=0.142857142857;vec3 ns=n_*D.wyz-D.xzx;",
+        "  vec4 j=p-49.0*floor(p*ns.z*ns.z);vec4 x_=floor(j*ns.z);vec4 y_=floor(j-7.0*x_);",
+        "  vec4 x=x_*ns.x+ns.yyyy;vec4 y=y_*ns.x+ns.yyyy;vec4 h=1.0-abs(x)-abs(y);",
+        "  vec4 b0=vec4(x.xy,y.xy);vec4 b1=vec4(x.zw,y.zw);",
+        "  vec4 s0=floor(b0)*2.0+1.0;vec4 s1=floor(b1)*2.0+1.0;",
+        "  vec4 sh=-step(h,vec4(0.0));",
+        "  vec4 a0=b0.xzyw+s0.xzyw*sh.xxyy;vec4 a1=b1.xzyw+s1.xzyw*sh.zzww;",
+        "  vec3 p0=vec3(a0.xy,h.x);vec3 p1=vec3(a0.zw,h.y);vec3 p2=vec3(a1.xy,h.z);vec3 p3=vec3(a1.zw,h.w);",
+        "  vec4 norm=taylorInvSqrt(vec4(dot(p0,p0),dot(p1,p1),dot(p2,p2),dot(p3,p3)));",
+        "  p0*=norm.x;p1*=norm.y;p2*=norm.z;p3*=norm.w;",
+        "  vec4 m=max(0.6-vec4(dot(x0,x0),dot(x1,x1),dot(x2,x2),dot(x3,x3)),0.0);m=m*m;",
+        "  return 42.0*dot(m*m,vec4(dot(p0,x0),dot(p1,x1),dot(p2,x2),dot(p3,x3)));",
+        "}",
+        "void main(){",
+        "  vec2 uv=vUv;float ar=1920.0/1080.0;vec2 p=vec2(uv.x*ar,uv.y);float t=uTime*0.06;",
+        "  float wx=snoise(vec3(p*1.4,t*0.5))*0.2;float wy=snoise(vec3(p*1.4+100.0,t*0.5))*0.2;",
+        "  vec2 wp=p+vec2(wx,wy);",
+        "  vec3 base=mix(vec3(0.10,0.02,0.22),vec3(0.04,0.10,0.25),smoothstep(0.0,1.0,uv.x*0.6+uv.y*0.4));",
+        "  float angle=0.65;float ridgeUv=dot(wp,vec2(cos(angle),sin(angle)));",
+        "  float ridge1=sin(ridgeUv*8.0+t*2.0+snoise(vec3(wp*0.8,t))*1.5);",
+        "  float ridge2=sin(ridgeUv*5.5-t*1.4+snoise(vec3(wp*1.2+50.0,t*0.7))*2.0);",
+        "  float ridge3=sin(ridgeUv*12.0+t*3.0+snoise(vec3(wp*0.6+80.0,t*0.4))*1.0);",
+        "  float crease1=pow(abs(ridge1),0.35)*sign(ridge1)*0.5+0.5;",
+        "  float crease2=pow(abs(ridge2),0.4)*sign(ridge2)*0.5+0.5;",
+        "  float crease3=pow(abs(ridge3),0.5)*sign(ridge3)*0.5+0.5;",
+        "  vec3 warm=mix(vec3(0.9,0.4,0.08),vec3(0.95,0.65,0.15),crease1);",
+        "  float warmZone=smoothstep(0.15,0.75,uv.x+uv.y*0.4+snoise(vec3(uv*2.0,t))*0.3);",
+        "  vec3 cool=mix(vec3(0.02,0.4,0.55),vec3(0.25,0.7,0.82),crease2);",
+        "  float coolZone=smoothstep(0.25,0.85,1.2-uv.x+uv.y*0.5+snoise(vec3(uv*2.0+40.0,t*0.8))*0.25);",
+        "  vec3 hot=mix(vec3(0.8,0.1,0.4),vec3(0.6,0.08,0.65),crease3);",
+        "  float hotZone=smoothstep(0.5,0.9,snoise(vec3(uv*2.5+20.0,t*0.6))*0.5+0.5);",
+        "  vec3 col=base;",
+        "  col=mix(col,warm,warmZone*0.75*smoothstep(0.3,0.7,crease1));",
+        "  col=mix(col,cool,coolZone*0.65*smoothstep(0.2,0.65,crease2));",
+        "  col=mix(col,hot,hotZone*0.5*smoothstep(0.35,0.8,crease3));",
+        "  float edgeGlow=pow(1.0-abs(ridge1),6.0)*0.4+pow(1.0-abs(ridge2),5.0)*0.25;",
+        "  col+=edgeGlow*mix(warm,cool,uv.x)*0.8;",
+        "  col*=1.0-pow(abs(ridge1),4.0)*0.15;",
+        "  float vig=1.0-smoothstep(0.5,1.5,length((uv-0.5)*vec2(1.3,1.0)));",
+        "  col*=0.65+vig*0.5;",
+        "  float luma=dot(col,vec3(0.299,0.587,0.114));col=mix(vec3(luma),col,1.5);",
+        "  col=clamp(col,0.0,1.0);col=pow(col,vec3(0.9));",
+        "  gl_FragColor=vec4(col,1.0);",
+        "}",
+      ].join("\n");
+
+      /* ── Three.js Setup ─────────────────────────────────────────────── */
+      var threeCanvas = document.getElementById("three-canvas");
+      var renderer = new THREE.WebGLRenderer({ canvas: threeCanvas, alpha: false });
+      renderer.setSize(W, H, false);
+      renderer.setPixelRatio(1);
+
+      var scene = new THREE.Scene();
+      var camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
+      var uniforms = { uTime: { value: 0 } };
+      var mat = new THREE.ShaderMaterial({
+        vertexShader: vs,
+        fragmentShader: fs,
+        uniforms: uniforms,
+      });
+      var quad = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), mat);
+      scene.add(quad);
+
+      /* ── Glass Canvas ───────────────────────────────────────────────── */
+      var glassCanvas = document.getElementById("glass-canvas");
+      var ctx = glassCanvas.getContext("2d");
+      var lg = new LiquidGlass.LiquidGlassCanvas(glassCanvas);
+      var lgReady = false;
+
+      function renderGlass(time) {
+        if (!lgReady) return;
+        uniforms.uTime.value = time;
+        renderer.render(scene, camera);
+        ctx.clearRect(0, 0, W, H);
+        ctx.drawImage(threeCanvas, 0, 0, W, H);
+        lg.renderGlassElements();
+      }
+
+      function requestGlassRender(time) {
+        if (glassCanvas.requestPaint) {
+          glassCanvas.onpaint = function () {
+            renderGlass(time);
+          };
+          glassCanvas.requestPaint();
+          return;
+        }
+        renderGlass(time);
+      }
+
+      lg.waitForInit().then(function (ok) {
+        if (!ok) return;
+        lgReady = true;
+        requestGlassRender(0);
+      });
+
+      /* ── GSAP Timeline ──────────────────────────────────────────────── */
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+
+      var gm = document.getElementById("glass-menu");
+      var gf = document.getElementById("glass-file");
+      var gsm = document.getElementById("glass-submenu");
+      var tm = document.getElementById("text-menu");
+      var pointer = document.getElementById("pointer");
+      var fileCard = document.getElementById("context-file");
+
+      gsap.set([gm, tm], {
+        left: 860,
+        top: 270,
+        opacity: 0,
+        scale: 0.82,
+        y: -8,
+        transformOrigin: "0% 18%",
+      });
+      // glass (#glass-file) is html-in-canvas — stays on left/top (exempt, no stutter)
+      gsap.set(gf, { top: 372, opacity: 1, scale: 1, transformOrigin: "78% 54%" });
+      // plain DOM (#context-file) — CSS resting top is 340px, so top:372 becomes y:32
+      gsap.set(fileCard, { y: 32, opacity: 1, scale: 1, transformOrigin: "78% 54%" });
+      gsap.set([gsm, "#submenu-preview"], {
+        left: 1980,
+        opacity: 0,
+        scale: 0.86,
+        x: -12,
+        transformOrigin: "0% 50%",
+      });
+      gsap.set(".menu-item", { y: -4, opacity: 0 });
+      // #menu-highlight plain DOM — CSS resting top:17; top:17 seed is y:0, tweens use y
+      gsap.set("#menu-highlight", { y: 0, opacity: 0 });
+
+      tl.to(gf, { top: 340, duration: 0.38, ease: "power3.out" }, 0.1);
+      tl.to(fileCard, { y: 0, duration: 0.38, ease: "power3.out" }, 0.1);
+      // #pointer plain DOM — CSS resting left:778 top:395; convert left/top → x/y offsets
+      tl.fromTo(
+        pointer,
+        { x: -158, y: 125 },
+        { x: 0, y: 0, duration: 0.55, ease: "power3.out" },
+        0.35,
+      );
+      tl.set("#click-ring", { left: 756, top: 372, scale: 0.72 }, 0.84);
+      tl.to("#click-ring", { opacity: 0.7, scale: 1.18, duration: 0.16, ease: "power2.out" }, 0.86);
+      tl.to("#click-ring", { opacity: 0, scale: 1.8, duration: 0.28, ease: "power2.out" }, 1.02);
+      tl.to(
+        [gf, fileCard],
+        { scale: 0.985, duration: 0.08, ease: "power2.out", yoyo: true, repeat: 1 },
+        0.86,
+      );
+
+      tl.to([gm, tm], { opacity: 1, scale: 1, y: 0, duration: 0.36, ease: "back.out(1.08)" }, 0.98);
+      tl.to(
+        ".menu-item",
+        { y: 0, opacity: 1, duration: 0.24, ease: "power3.out", stagger: 0.026 },
+        1.07,
+      );
+
+      tl.to("#menu-highlight", { opacity: 1, duration: 0.12, ease: "none" }, 1.35);
+      tl.to("#menu-highlight", { y: 52, duration: 0.22, ease: "power2.out" }, 2.0);
+      tl.to(pointer, { x: 350, y: 73, duration: 0.46, ease: "power3.inOut" }, 2.48);
+      tl.to("#menu-highlight", { y: 170, duration: 0.22, ease: "power2.out" }, 2.58);
+      tl.set([gsm, "#submenu-preview"], { left: 1236 }, 3.04);
+      tl.fromTo(
+        [gsm, "#submenu-preview"],
+        { scale: 0.86, opacity: 0, x: -12 },
+        { scale: 1, opacity: 1, x: 0, duration: 0.24, ease: "back.out(1.04)" },
+        3.08,
+      );
+      tl.to(pointer, { x: 540, y: 89, duration: 0.5, ease: "power3.inOut" }, 3.32);
+      tl.set("#click-ring", { left: 1295, top: 461, scale: 0.72 }, 3.86);
+      tl.to(
+        "#click-ring",
+        { opacity: 0.72, scale: 1.08, duration: 0.12, ease: "power2.out" },
+        3.88,
+      );
+      tl.to("#click-ring", { opacity: 0, scale: 1.58, duration: 0.24, ease: "power2.out" }, 4.0);
+      tl.to(
+        [gsm, "#submenu-preview"],
+        { scale: 0.965, duration: 0.09, ease: "power2.out", yoyo: true, repeat: 1 },
+        3.92,
+      );
+
+      tl.to(pointer, { opacity: 0, duration: 0.35, ease: "power2.out" }, 5.85);
+
+      /* Duration driver */
+      tl.to({ v: 0 }, { v: 1, duration: DURATION, ease: "none" }, 0);
+
+      tl.eventCallback("onUpdate", function () {
+        requestGlassRender(tl.time());
+      });
+
+      window.__timelines["liquid-glass-context-menu"] = tl;
+    </script>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="liquid-glass-context-menu" data-composition-src="compositions/liquid-glass-context-menu.html" data-start="0" data-duration="8" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/liquid-glass-media-controls.mdx b/docs/catalog/blocks/liquid-glass-media-controls.mdx
index 9e21431d33..15a4cd2c64 100644
--- a/docs/catalog/blocks/liquid-glass-media-controls.mdx
+++ b/docs/catalog/blocks/liquid-glass-media-controls.mdx
@@ -3,40 +3,722 @@ title: "Liquid Glass Media Controls"
 description: "Frosted glass media control panels spreading over an aurora shader background"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-media-controls.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-media-controls.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/liquid-glass-media-controls.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Liquid Glass Media Controls preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add liquid-glass-media-controls
-```
+<InstallCommand command="npx hyperframes add liquid-glass-media-controls" />
 
 That writes `compositions/liquid-glass-media-controls.html`, plus 1 supporting file under `compositions/lib/`.
 
-<Warning>
+<Danger>
   Live preview needs the `chrome://flags/#canvas-draw-element` flag switched on.
-  Rendering from the CLI switches it on for you. [How it
-  works](/guides/html-in-canvas)
-</Warning>
-
-## Add it to your video
-
-It runs for 8 seconds at 1920×1080. Paste this into your composition:
-
-```html index.html
-<div
-  data-composition-id="liquid-glass-media-controls"
-  data-composition-src="compositions/liquid-glass-media-controls.html"
-  data-start="0"
-  data-duration="8"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+  Without it this item's screen renders black. Rendering from the CLI switches
+  it on for you. [How it works](/guides/html-in-canvas)
+</Danger>
+
+## Source
+
+<Accordion title={`liquid-glass-media-controls.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Liquid Glass Media Controls</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script src="lib/liquid-glass.iife.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #0a0218;
+        overflow: hidden;
+        font-family: "Inter", system-ui, sans-serif;
+      }
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #three-canvas {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        z-index: 0;
+      }
+      #glass-canvas {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        z-index: 1;
+      }
+
+      /* ── Glass Panels ── */
+      .glass-panel {
+        position: absolute;
+        background: rgba(255, 255, 255, 0.055);
+        --lg-blur: 0.42;
+        --lg-refraction: 0.92;
+        --lg-corner-radius: 36;
+        --lg-z-radius: 58;
+        --lg-specular: 0.46;
+        --lg-fresnel: 1.15;
+        --lg-edge-highlight: 0.34;
+        --lg-chrom-aberration: 0.08;
+        --lg-shadow-opacity: 0;
+        --lg-shadow-spread: 0;
+        --lg-shadow-offset-y: 0;
+        --lg-saturation: 1.1;
+      }
+      .search-panel {
+        width: 640px;
+        height: 72px;
+        --lg-corner-radius: 24;
+      }
+      .toggle-panel {
+        width: 640px;
+        height: 64px;
+        --lg-corner-radius: 44;
+      }
+      .media-panel {
+        width: 640px;
+        height: 116px;
+        --lg-corner-radius: 44;
+      }
+      .slider-panel {
+        width: 640px;
+        height: 76px;
+        --lg-corner-radius: 28;
+      }
+
+      #glass-search {
+        top: 300px;
+        left: 640px;
+      }
+      #glass-toggle {
+        top: 390px;
+        left: 640px;
+      }
+      #glass-media {
+        top: 476px;
+        left: 640px;
+      }
+      #glass-slider {
+        top: 616px;
+        left: 640px;
+      }
+
+      /* ── Text Overlays ── */
+      .text-overlay {
+        position: absolute;
+        z-index: 2;
+        pointer-events: none;
+      }
+
+      /* Search bar */
+      .search-text {
+        width: 640px;
+        height: 72px;
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        padding: 0 28px;
+        background: transparent;
+        border-radius: 24px;
+        box-shadow: none;
+      }
+      .search-text svg {
+        width: 22px;
+        height: 22px;
+        stroke: rgba(255, 255, 255, 0.86);
+        fill: none;
+        stroke-width: 2;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        flex-shrink: 0;
+      }
+      .search-label {
+        font-size: 19px;
+        font-weight: 650;
+        color: #fff;
+        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.42);
+      }
+      .search-caret {
+        width: 2px;
+        height: 25px;
+        border-radius: 999px;
+        background: rgba(255, 255, 255, 0.82);
+        opacity: 0;
+      }
+      #text-search {
+        top: 300px;
+        left: 640px;
+      }
+
+      /* Toggle row */
+      .toggle-text {
+        width: 640px;
+        height: 64px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0;
+        position: relative;
+        padding: 6px;
+        background: transparent;
+        border-radius: 44px;
+        box-shadow: none;
+      }
+      .toggle-active-pill {
+        position: absolute;
+        top: 6px;
+        left: 6px;
+        z-index: 0;
+        width: 209px;
+        height: 52px;
+        border-radius: 999px;
+        background:
+          radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.32), transparent 42%),
+          rgba(255, 255, 255, 0.14);
+        box-shadow:
+          inset 0 1px 0 rgba(255, 255, 255, 0.32),
+          inset 0 -1px 0 rgba(255, 255, 255, 0.09);
+      }
+      .toggle-item {
+        flex: 1;
+        position: relative;
+        z-index: 1;
+        text-align: center;
+        font-size: 16px;
+        font-weight: 700;
+        color: rgba(255, 255, 255, 0.96);
+        line-height: 52px;
+        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.42);
+      }
+      .toggle-item.active {
+        color: #fff;
+      }
+      #text-toggle {
+        top: 390px;
+        left: 640px;
+      }
+
+      /* Media pill */
+      .media-text {
+        width: 640px;
+        height: 116px;
+        display: flex;
+        align-items: center;
+        gap: 22px;
+        padding: 0 24px;
+        background: transparent;
+        border-radius: 44px;
+        box-shadow: none;
+      }
+      .album-art {
+        position: relative;
+        overflow: hidden;
+        width: 78px;
+        height: 78px;
+        border-radius: 20px;
+        background:
+          radial-gradient(circle at 70% 28%, rgba(255, 255, 255, 0.78), transparent 16%),
+          conic-gradient(from 210deg, #06e3fa, #4fdb5e, #f59e0b, #ec4899, #06e3fa);
+        flex-shrink: 0;
+        box-shadow:
+          inset 0 1px 0 rgba(255, 255, 255, 0.28),
+          0 12px 26px rgba(0, 0, 0, 0.24);
+      }
+      .album-sheen {
+        position: absolute;
+        top: -10px;
+        left: -70px;
+        width: 38px;
+        height: 110px;
+        background: rgba(255, 255, 255, 0.34);
+        filter: blur(8px);
+        transform: rotate(24deg);
+      }
+      .media-info {
+        display: flex;
+        flex-direction: column;
+        gap: 7px;
+        flex: 1;
+        min-width: 0;
+      }
+      .media-title {
+        font-size: 22px;
+        font-weight: 700;
+        color: #fff;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.42);
+      }
+      .media-artist {
+        font-size: 16px;
+        font-weight: 600;
+        color: rgba(255, 255, 255, 0.84);
+        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.42);
+      }
+      .media-meta-row {
+        display: flex;
+        align-items: center;
+        gap: 9px;
+      }
+      .live-dot {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background: #4ade80;
+        box-shadow: 0 0 14px rgba(74, 222, 128, 0.76);
+      }
+      .sound-wave {
+        display: flex;
+        align-items: end;
+        gap: 3px;
+        height: 16px;
+      }
+      .sound-wave span {
+        width: 3px;
+        height: 7px;
+        border-radius: 999px;
+        background: rgba(255, 255, 255, 0.74);
+      }
+      .transport {
+        display: flex;
+        align-items: center;
+        gap: 24px;
+        margin-left: auto;
+        padding-right: 4px;
+      }
+      .transport svg {
+        width: 28px;
+        height: 28px;
+        fill: #fff;
+        stroke: none;
+      }
+      .transport .play-btn svg {
+        width: 38px;
+        height: 38px;
+      }
+      #text-media {
+        top: 476px;
+        left: 640px;
+      }
+
+      /* Brightness slider */
+      .slider-text {
+        width: 640px;
+        height: 76px;
+        display: flex;
+        align-items: center;
+        gap: 18px;
+        padding: 0 28px;
+        background: transparent;
+        border-radius: 28px;
+        box-shadow: none;
+      }
+      .slider-text svg {
+        width: 26px;
+        height: 26px;
+        stroke: rgba(255, 255, 255, 0.88);
+        fill: none;
+        stroke-width: 2;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        flex-shrink: 0;
+      }
+      .slider-track {
+        flex: 1;
+        height: 8px;
+        background: rgba(255, 255, 255, 0.24);
+        border-radius: 4px;
+        position: relative;
+      }
+      .slider-fill {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 34%;
+        height: 100%;
+        background: #fff;
+        border-radius: 3px;
+        box-shadow: 0 0 14px rgba(255, 255, 255, 0.5);
+      }
+      .slider-pct {
+        font-size: 17px;
+        font-weight: 600;
+        color: rgba(255, 255, 255, 0.9);
+        font-variant-numeric: tabular-nums;
+        width: 42px;
+        text-align: right;
+        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.42);
+      }
+      #text-slider {
+        top: 616px;
+        left: 640px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="liquid-glass-media-controls"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="8"
+      data-root="true"
+    >
+      <canvas id="three-canvas" width="1920" height="1080"></canvas>
+
+      <canvas id="glass-canvas" layoutsubtree width="1920" height="1080">
+        <div id="glass-search" class="glass-panel search-panel liquid-glass"></div>
+        <div id="glass-toggle" class="glass-panel toggle-panel liquid-glass"></div>
+        <div id="glass-media" class="glass-panel media-panel liquid-glass"></div>
+        <div id="glass-slider" class="glass-panel slider-panel liquid-glass"></div>
+      </canvas>
+
+      <!-- Search bar -->
+      <div id="text-search" class="text-overlay search-text">
+        <svg viewBox="0 0 24 24">
+          <circle cx="11" cy="11" r="8" />
+          <line x1="21" y1="21" x2="16.65" y2="16.65" />
+        </svg>
+        <span id="search-label" class="search-label">Search</span>
+        <span id="search-caret" class="search-caret"></span>
+      </div>
+
+      <!-- Toggle row -->
+      <div id="text-toggle" class="text-overlay toggle-text">
+        <div id="toggle-pill" class="toggle-active-pill"></div>
+        <div class="toggle-item active">All</div>
+        <div class="toggle-item">Favorites</div>
+        <div class="toggle-item">Recent</div>
+      </div>
+
+      <!-- Media pill -->
+      <div id="text-media" class="text-overlay media-text">
+        <div class="album-art"><span id="album-sheen" class="album-sheen"></span></div>
+        <div class="media-info">
+          <div class="media-title">Midnight Drive</div>
+          <div class="media-meta-row">
+            <span id="live-dot" class="live-dot"></span>
+            <div class="media-artist">Glass Resonance</div>
+            <div id="sound-wave" class="sound-wave">
+              <span></span><span></span><span></span><span></span>
+            </div>
+          </div>
+        </div>
+        <div class="transport">
+          <span>
+            <svg viewBox="0 0 24 24">
+              <polygon points="19 20 9 12 19 4" />
+              <line x1="5" y1="4" x2="5" y2="20" stroke="#fff" stroke-width="2" />
+            </svg>
+          </span>
+          <span class="play-btn">
+            <svg viewBox="0 0 24 24"><polygon points="5 3 19 12 5 21" /></svg>
+          </span>
+          <span>
+            <svg viewBox="0 0 24 24">
+              <polygon points="5 4 15 12 5 20" />
+              <line x1="19" y1="4" x2="19" y2="20" stroke="#fff" stroke-width="2" />
+            </svg>
+          </span>
+        </div>
+      </div>
+
+      <!-- Brightness slider -->
+      <div id="text-slider" class="text-overlay slider-text">
+        <svg viewBox="0 0 24 24">
+          <circle cx="12" cy="12" r="5" />
+          <line x1="12" y1="1" x2="12" y2="3" />
+          <line x1="12" y1="21" x2="12" y2="23" />
+          <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+          <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+          <line x1="1" y1="12" x2="3" y2="12" />
+          <line x1="21" y1="12" x2="23" y2="12" />
+          <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+          <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+        </svg>
+        <div class="slider-track"><div id="slider-fill" class="slider-fill"></div></div>
+        <span id="slider-pct" class="slider-pct">34%</span>
+      </div>
+
+      <div
+        id="driver"
+        class="clip"
+        data-start="0"
+        data-duration="8"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+
+    <script>
+      var W = 1920,
+        H = 1080,
+        DURATION = 8;
+
+      /* ── Three.js Aurora Shader ─────────────────────────────────────── */
+      var vs = "varying vec2 vUv; void main() { vUv = uv; gl_Position = vec4(position, 1.0); }";
+      var fs = [
+        "precision highp float;",
+        "varying vec2 vUv;",
+        "uniform float uTime;",
+        "vec3 mod289(vec3 x){return x-floor(x*(1.0/289.0))*289.0;}",
+        "vec4 mod289(vec4 x){return x-floor(x*(1.0/289.0))*289.0;}",
+        "vec4 permute(vec4 x){return mod289(((x*34.0)+1.0)*x);}",
+        "vec4 taylorInvSqrt(vec4 r){return 1.79284291400159-0.85373472095314*r;}",
+        "float snoise(vec3 v){",
+        "  const vec2 C=vec2(1.0/6.0,1.0/3.0);const vec4 D=vec4(0.0,0.5,1.0,2.0);",
+        "  vec3 i=floor(v+dot(v,C.yyy));vec3 x0=v-i+dot(i,C.xxx);",
+        "  vec3 g=step(x0.yzx,x0.xyz);vec3 l=1.0-g;",
+        "  vec3 i1=min(g.xyz,l.zxy);vec3 i2=max(g.xyz,l.zxy);",
+        "  vec3 x1=x0-i1+C.xxx;vec3 x2=x0-i2+C.yyy;vec3 x3=x0-D.yyy;",
+        "  i=mod289(i);",
+        "  vec4 p=permute(permute(permute(i.z+vec4(0.0,i1.z,i2.z,1.0))+i.y+vec4(0.0,i1.y,i2.y,1.0))+i.x+vec4(0.0,i1.x,i2.x,1.0));",
+        "  float n_=0.142857142857;vec3 ns=n_*D.wyz-D.xzx;",
+        "  vec4 j=p-49.0*floor(p*ns.z*ns.z);vec4 x_=floor(j*ns.z);vec4 y_=floor(j-7.0*x_);",
+        "  vec4 x=x_*ns.x+ns.yyyy;vec4 y=y_*ns.x+ns.yyyy;vec4 h=1.0-abs(x)-abs(y);",
+        "  vec4 b0=vec4(x.xy,y.xy);vec4 b1=vec4(x.zw,y.zw);",
+        "  vec4 s0=floor(b0)*2.0+1.0;vec4 s1=floor(b1)*2.0+1.0;",
+        "  vec4 sh=-step(h,vec4(0.0));",
+        "  vec4 a0=b0.xzyw+s0.xzyw*sh.xxyy;vec4 a1=b1.xzyw+s1.xzyw*sh.zzww;",
+        "  vec3 p0=vec3(a0.xy,h.x);vec3 p1=vec3(a0.zw,h.y);vec3 p2=vec3(a1.xy,h.z);vec3 p3=vec3(a1.zw,h.w);",
+        "  vec4 norm=taylorInvSqrt(vec4(dot(p0,p0),dot(p1,p1),dot(p2,p2),dot(p3,p3)));",
+        "  p0*=norm.x;p1*=norm.y;p2*=norm.z;p3*=norm.w;",
+        "  vec4 m=max(0.6-vec4(dot(x0,x0),dot(x1,x1),dot(x2,x2),dot(x3,x3)),0.0);m=m*m;",
+        "  return 42.0*dot(m*m,vec4(dot(p0,x0),dot(p1,x1),dot(p2,x2),dot(p3,x3)));",
+        "}",
+        "void main(){",
+        "  vec2 uv=vUv;float ar=1920.0/1080.0;vec2 p=vec2(uv.x*ar,uv.y);float t=uTime*0.06;",
+        "  float wx=snoise(vec3(p*1.4,t*0.5))*0.2;float wy=snoise(vec3(p*1.4+100.0,t*0.5))*0.2;",
+        "  vec2 wp=p+vec2(wx,wy);",
+        "  vec3 base=mix(vec3(0.10,0.02,0.22),vec3(0.04,0.10,0.25),smoothstep(0.0,1.0,uv.x*0.6+uv.y*0.4));",
+        "  float angle=0.65;float ridgeUv=dot(wp,vec2(cos(angle),sin(angle)));",
+        "  float ridge1=sin(ridgeUv*8.0+t*2.0+snoise(vec3(wp*0.8,t))*1.5);",
+        "  float ridge2=sin(ridgeUv*5.5-t*1.4+snoise(vec3(wp*1.2+50.0,t*0.7))*2.0);",
+        "  float ridge3=sin(ridgeUv*12.0+t*3.0+snoise(vec3(wp*0.6+80.0,t*0.4))*1.0);",
+        "  float crease1=pow(abs(ridge1),0.35)*sign(ridge1)*0.5+0.5;",
+        "  float crease2=pow(abs(ridge2),0.4)*sign(ridge2)*0.5+0.5;",
+        "  float crease3=pow(abs(ridge3),0.5)*sign(ridge3)*0.5+0.5;",
+        "  vec3 warm=mix(vec3(0.9,0.4,0.08),vec3(0.95,0.65,0.15),crease1);",
+        "  float warmZone=smoothstep(0.15,0.75,uv.x+uv.y*0.4+snoise(vec3(uv*2.0,t))*0.3);",
+        "  vec3 cool=mix(vec3(0.02,0.4,0.55),vec3(0.25,0.7,0.82),crease2);",
+        "  float coolZone=smoothstep(0.25,0.85,1.2-uv.x+uv.y*0.5+snoise(vec3(uv*2.0+40.0,t*0.8))*0.25);",
+        "  vec3 hot=mix(vec3(0.8,0.1,0.4),vec3(0.6,0.08,0.65),crease3);",
+        "  float hotZone=smoothstep(0.5,0.9,snoise(vec3(uv*2.5+20.0,t*0.6))*0.5+0.5);",
+        "  vec3 col=base;",
+        "  col=mix(col,warm,warmZone*0.75*smoothstep(0.3,0.7,crease1));",
+        "  col=mix(col,cool,coolZone*0.65*smoothstep(0.2,0.65,crease2));",
+        "  col=mix(col,hot,hotZone*0.5*smoothstep(0.35,0.8,crease3));",
+        "  float edgeGlow=pow(1.0-abs(ridge1),6.0)*0.4+pow(1.0-abs(ridge2),5.0)*0.25;",
+        "  col+=edgeGlow*mix(warm,cool,uv.x)*0.8;",
+        "  col*=1.0-pow(abs(ridge1),4.0)*0.15;",
+        "  float vig=1.0-smoothstep(0.5,1.5,length((uv-0.5)*vec2(1.3,1.0)));",
+        "  col*=0.65+vig*0.5;",
+        "  float luma=dot(col,vec3(0.299,0.587,0.114));col=mix(vec3(luma),col,1.5);",
+        "  col=clamp(col,0.0,1.0);col=pow(col,vec3(0.9));",
+        "  gl_FragColor=vec4(col,1.0);",
+        "}",
+      ].join("\n");
+
+      /* ── Three.js Setup ─────────────────────────────────────────────── */
+      var threeCanvas = document.getElementById("three-canvas");
+      var renderer = new THREE.WebGLRenderer({ canvas: threeCanvas, alpha: false });
+      renderer.setSize(W, H, false);
+      renderer.setPixelRatio(1);
+
+      var scene = new THREE.Scene();
+      var camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
+      var uniforms = { uTime: { value: 0 } };
+      var shaderMat = new THREE.ShaderMaterial({
+        vertexShader: vs,
+        fragmentShader: fs,
+        uniforms: uniforms,
+      });
+      var quad = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), shaderMat);
+      scene.add(quad);
+
+      /* ── Glass Canvas ───────────────────────────────────────────────── */
+      var glassCanvas = document.getElementById("glass-canvas");
+      var ctx = glassCanvas.getContext("2d");
+      var lg = new LiquidGlass.LiquidGlassCanvas(glassCanvas);
+      var lgReady = false;
+
+      function renderGlass(time) {
+        if (!lgReady) return;
+        uniforms.uTime.value = time;
+        renderer.render(scene, camera);
+        ctx.clearRect(0, 0, W, H);
+        ctx.drawImage(threeCanvas, 0, 0, W, H);
+        lg.renderGlassElements();
+      }
+
+      function requestGlassRender(time) {
+        if (glassCanvas.requestPaint) {
+          glassCanvas.onpaint = function () {
+            renderGlass(time);
+          };
+          glassCanvas.requestPaint();
+          return;
+        }
+        renderGlass(time);
+      }
+
+      lg.waitForInit().then(function (ok) {
+        if (!ok) return;
+        lgReady = true;
+        requestGlassRender(0);
+      });
+
+      /* ── GSAP Timeline ──────────────────────────────────────────────── */
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+
+      var gs = document.getElementById("glass-search");
+      var gt = document.getElementById("glass-toggle");
+      var gm = document.getElementById("glass-media");
+      var gsl = document.getElementById("glass-slider");
+      var ts = document.getElementById("text-search");
+      var tt = document.getElementById("text-toggle");
+      var tm = document.getElementById("text-media");
+      var tsl = document.getElementById("text-slider");
+      var searchLabel = document.getElementById("search-label");
+      var sliderPct = document.getElementById("slider-pct");
+      var sliderValue = { value: 34 };
+
+      // Glass panels live inside <canvas layoutsubtree> (html-in-canvas): the canvas lib
+      // reads their sub-pixel computed top/left, so animating layout props on them does
+      // NOT stutter and is exempt from gsap_non_transform_motion. They keep top/left.
+      // Plain-DOM text overlays DO stutter on layout props, so they use transforms (x/y).
+      // CSS resting tops — search 300, toggle 390, media 476, slider 616 — are the
+      // transform base; the original set seeded top:1160, i.e. y = 1160 - restingTop.
+      gsap.set([gs, gt, gm, gsl], { top: 1160, opacity: 1 });
+      gsap.set(ts, { y: 860, opacity: 1 });
+      gsap.set(tt, { y: 770, opacity: 1 });
+      gsap.set(tm, { y: 684, opacity: 1 });
+      gsap.set(tsl, { y: 544, opacity: 1 });
+      gsap.set("#sound-wave span", { height: 7 });
+
+      tl.to(gs, { top: 300, duration: 0.48, ease: "power3.out" }, 0.12);
+      tl.to(ts, { y: 0, duration: 0.48, ease: "power3.out" }, 0.12);
+      tl.to(gt, { top: 390, duration: 0.44, ease: "power3.out" }, 0.22);
+      tl.to(tt, { y: 0, duration: 0.44, ease: "power3.out" }, 0.22);
+      tl.to(gm, { top: 476, duration: 0.44, ease: "power3.out" }, 0.32);
+      tl.to(tm, { y: 0, duration: 0.44, ease: "power3.out" }, 0.32);
+      tl.to(gsl, { top: 616, duration: 0.46, ease: "power3.out" }, 0.42);
+      tl.to(tsl, { y: 0, duration: 0.46, ease: "power3.out" }, 0.42);
+
+      tl.call(
+        function () {
+          searchLabel.textContent = "Search Music";
+        },
+        null,
+        0.9,
+      );
+      tl.to(
+        "#search-caret",
+        { opacity: 1, duration: 0.1, yoyo: true, repeat: 5, ease: "none" },
+        0.94,
+      );
+      tl.call(
+        function () {
+          searchLabel.textContent = "Midnight Drive";
+        },
+        null,
+        1.55,
+      );
+      tl.to("#toggle-pill", { x: 209, duration: 0.24, ease: "power2.out" }, 1.82);
+      tl.to(
+        ".play-btn",
+        { scale: 0.86, duration: 0.12, ease: "power2.out", yoyo: true, repeat: 1 },
+        2.18,
+      );
+      tl.to("#album-sheen", { x: 182, duration: 0.75, ease: "power2.out" }, 2.2);
+      tl.to(
+        "#sound-wave span",
+        { height: 15, duration: 0.22, ease: "power2.inOut", stagger: 0.05, yoyo: true, repeat: 12 },
+        2.2,
+      );
+      tl.to(
+        sliderValue,
+        {
+          value: 82,
+          duration: 4.4,
+          ease: "none",
+          onUpdate: function () {
+            sliderPct.textContent = Math.round(sliderValue.value) + "%";
+          },
+        },
+        1.2,
+      );
+      tl.to("#slider-fill", { width: "82%", duration: 4.4, ease: "none" }, 1.2);
+      tl.to(
+        "#live-dot",
+        { scale: 1.45, duration: 0.24, ease: "power2.out", yoyo: true, repeat: 4 },
+        2.6,
+      );
+      tl.to("#toggle-pill", { x: 419, duration: 0.24, ease: "power2.out" }, 4.15);
+
+      // Settle + exit. Split so glass panels keep relative top (exempt, html-in-canvas)
+      // and plain-DOM text overlays use the relative transform equivalent (y). Inline
+      // array literals so the linter can resolve each group's targets; a pre-declared
+      // array variable resolves to __unresolved__ and would lose the canvas exemption.
+      tl.to(
+        [gs, gt, gm, gsl],
+        { top: "-=8", duration: 0.22, ease: "power2.out", yoyo: true, repeat: 1 },
+        5.55,
+      );
+      tl.to(
+        [ts, tt, tm, tsl],
+        { y: "-=8", duration: 0.22, ease: "power2.out", yoyo: true, repeat: 1 },
+        5.55,
+      );
+      tl.to([gs, gt, gm, gsl], { top: "+=760", duration: 0.42, ease: "power2.in" }, 6.72);
+      tl.to([ts, tt, tm, tsl], { y: "+=760", duration: 0.42, ease: "power2.in" }, 6.72);
+
+      /* Duration driver */
+      tl.to({ v: 0 }, { v: 1, duration: DURATION, ease: "none" }, 0);
+
+      tl.eventCallback("onUpdate", function () {
+        requestGlassRender(tl.time());
+      });
+
+      window.__timelines["liquid-glass-media-controls"] = tl;
+    </script>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="liquid-glass-media-controls" data-composition-src="compositions/liquid-glass-media-controls.html" data-start="0" data-duration="8" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/liquid-glass-notification.mdx b/docs/catalog/blocks/liquid-glass-notification.mdx
index 9b4ae2cb94..fc2b55eb69 100644
--- a/docs/catalog/blocks/liquid-glass-notification.mdx
+++ b/docs/catalog/blocks/liquid-glass-notification.mdx
@@ -3,40 +3,519 @@ title: "Liquid Glass Notification"
 description: "Frosted glass notification cards floating over an aurora shader background"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-notification.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-notification.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/liquid-glass-notification.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Liquid Glass Notification preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add liquid-glass-notification
-```
+<InstallCommand command="npx hyperframes add liquid-glass-notification" />
 
-That writes `compositions/liquid-glass-notification.html`, plus 2 supporting files under `compositions/lib/` and `compositions/assets/`.
+That writes `compositions/liquid-glass-notification.html`, plus 2 supporting files under `compositions/assets/` and `compositions/lib/`.
 
-<Warning>
+<Danger>
   Live preview needs the `chrome://flags/#canvas-draw-element` flag switched on.
-  Rendering from the CLI switches it on for you. [How it
-  works](/guides/html-in-canvas)
-</Warning>
-
-## Add it to your video
-
-It runs for 8 seconds at 1920×1080. Paste this into your composition:
-
-```html index.html
-<div
-  data-composition-id="liquid-glass-notification"
-  data-composition-src="compositions/liquid-glass-notification.html"
-  data-start="0"
-  data-duration="8"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+  Without it this item's screen renders black. Rendering from the CLI switches
+  it on for you. [How it works](/guides/html-in-canvas)
+</Danger>
+
+## Source
+
+<Accordion title={`liquid-glass-notification.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script src="lib/liquid-glass.iife.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000;
+      }
+      body {
+        font-family: "Inter", sans-serif;
+        color: #fff;
+      }
+
+      #three-canvas {
+        position: absolute;
+        inset: 0;
+        z-index: 0;
+        display: block;
+      }
+      #glass-canvas {
+        position: absolute;
+        inset: 0;
+        z-index: 1;
+        display: block;
+        width: 1920px;
+        height: 1080px;
+      }
+      .text-overlay {
+        position: absolute;
+        inset: 0;
+        z-index: 2;
+        pointer-events: none;
+      }
+
+      .glass-panel {
+        position: absolute;
+        width: 520px;
+        height: 118px;
+        background: rgba(255, 255, 255, 0.06);
+        --lg-blur: 0.22;
+        --lg-refraction: 0.6;
+        --lg-corner-radius: 36;
+        --lg-z-radius: 38;
+        --lg-specular: 0.2;
+        --lg-fresnel: 0.9;
+        --lg-edge-highlight: 0.1;
+        --lg-chrom-aberration: 0.05;
+        --lg-shadow-opacity: 0.35;
+        --lg-shadow-spread: 14;
+        --lg-shadow-offset-y: 4;
+        --lg-saturation: 0.25;
+      }
+      .glass-panel.p1 {
+        top: 60px;
+        left: 1340px;
+      }
+      .glass-panel.p2 {
+        top: 196px;
+        left: 1340px;
+      }
+
+      .notif-card {
+        position: absolute;
+        width: 520px;
+        height: 118px;
+        padding: 18px 24px;
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        color: #fff;
+      }
+      .notif-card.c1 {
+        top: 60px;
+        left: 1340px;
+      }
+      .notif-card.c2 {
+        top: 196px;
+        left: 1340px;
+      }
+
+      .avatar {
+        width: 48px;
+        height: 48px;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 19px;
+        font-weight: 800;
+        flex-shrink: 0;
+        box-shadow:
+          inset 0 1px 0 rgba(255, 255, 255, 0.35),
+          0 10px 24px rgba(0, 0, 0, 0.24);
+      }
+      .avatar-ja {
+        width: 128px;
+        border-radius: 20px;
+        background: rgba(2, 4, 10, 0.72);
+        box-shadow:
+          inset 0 1px 0 rgba(255, 255, 255, 0.18),
+          0 10px 24px rgba(0, 0, 0, 0.24);
+      }
+      .hyperframes-logo {
+        width: 102px;
+        height: auto;
+        display: block;
+      }
+      .avatar-kl {
+        background: linear-gradient(135deg, #ff7ab6, #8b5cf6);
+      }
+      .notif-body {
+        flex: 1;
+        min-width: 0;
+      }
+      .notif-header {
+        display: flex;
+        align-items: baseline;
+        gap: 8px;
+        margin-bottom: 3px;
+      }
+      .notif-name {
+        font-size: 20px;
+        font-weight: 700;
+      }
+      .notif-time {
+        font-size: 14px;
+        font-weight: 500;
+        color: rgba(255, 255, 255, 0.55);
+      }
+      .notif-text {
+        font-size: 17px;
+        font-weight: 500;
+        color: rgba(255, 255, 255, 0.88);
+        line-height: 1.32;
+      }
+      .notif-progress {
+        position: absolute;
+        right: 26px;
+        bottom: 15px;
+        left: 168px;
+        height: 3px;
+        overflow: hidden;
+        border-radius: 999px;
+        background: rgba(255, 255, 255, 0.18);
+      }
+      .notif-progress-fill {
+        width: 0%;
+        height: 100%;
+        border-radius: inherit;
+        background: linear-gradient(90deg, #06e3fa, #4fdb5e);
+        box-shadow: 0 0 16px rgba(79, 219, 94, 0.55);
+      }
+      .status-dot {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background: #06e3fa;
+        box-shadow: 0 0 16px rgba(6, 227, 250, 0.65);
+      }
+      .notif-actions {
+        position: absolute;
+        right: 22px;
+        bottom: 13px;
+        display: flex;
+        gap: 8px;
+        opacity: 0;
+      }
+      .action-chip {
+        padding: 5px 11px;
+        border-radius: 999px;
+        background: rgba(255, 255, 255, 0.16);
+        color: rgba(255, 255, 255, 0.94);
+        font-size: 12px;
+        font-weight: 750;
+        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
+      }
+      .typing-dots {
+        display: inline-flex;
+        gap: 3px;
+        margin-left: 5px;
+        transform: translateY(-1px);
+      }
+      .typing-dots span {
+        width: 4px;
+        height: 4px;
+        border-radius: 50%;
+        background: rgba(255, 255, 255, 0.72);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="liquid-glass-notification"
+      data-start="0"
+      data-duration="8"
+      data-width="1920"
+      data-height="1080"
+    >
+      <canvas id="three-canvas"></canvas>
+
+      <canvas id="glass-canvas" layoutsubtree width="1920" height="1080">
+        <div class="glass-panel liquid-glass p1" id="gp1"></div>
+        <div class="glass-panel liquid-glass p2" id="gp2"></div>
+      </canvas>
+
+      <div class="text-overlay">
+        <div class="notif-card c1" id="txt1">
+          <div class="avatar avatar-ja">
+            <img
+              class="hyperframes-logo"
+              src="assets/hyperframes-logo-dark.svg"
+              alt="HyperFrames"
+            />
+          </div>
+          <div class="notif-body">
+            <div class="notif-header">
+              <span class="notif-name">Render complete</span>
+              <span class="status-dot" id="status-dot"></span>
+              <span class="notif-time" id="render-status">rendering</span>
+            </div>
+            <div class="notif-text" id="render-copy">
+              Liquid glass preview is encoding with GPU capture.
+            </div>
+            <div class="notif-progress">
+              <div class="notif-progress-fill" id="render-progress"></div>
+            </div>
+          </div>
+        </div>
+        <div class="notif-card c2" id="txt2">
+          <div class="avatar avatar-kl">M</div>
+          <div class="notif-body">
+            <div class="notif-header">
+              <span class="notif-name">Messages</span>
+              <span class="notif-time">now</span>
+            </div>
+            <div class="notif-text">
+              Miguel: can it feel alive but still native?
+              <span class="typing-dots" id="typing-dots"
+                ><span></span><span></span><span></span
+              ></span>
+            </div>
+            <div class="notif-actions" id="reply-actions">
+              <span class="action-chip">Reply</span>
+              <span class="action-chip">Mark Read</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      (function () {
+        var threeCanvas = document.getElementById("three-canvas");
+        var threeRenderer = new THREE.WebGLRenderer({
+          canvas: threeCanvas,
+          antialias: false,
+          preserveDrawingBuffer: true,
+        });
+        threeRenderer.setSize(1920, 1080);
+        threeRenderer.setPixelRatio(1);
+        var threeScene = new THREE.Scene();
+        var threeCamera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
+
+        var fs = [
+          "precision highp float;",
+          "varying vec2 vUv;",
+          "uniform float uTime;",
+          "vec3 mod289(vec3 x){return x-floor(x*(1.0/289.0))*289.0;}",
+          "vec4 mod289(vec4 x){return x-floor(x*(1.0/289.0))*289.0;}",
+          "vec4 permute(vec4 x){return mod289(((x*34.0)+1.0)*x);}",
+          "vec4 taylorInvSqrt(vec4 r){return 1.79284291400159-0.85373472095314*r;}",
+          "float snoise(vec3 v){",
+          "  const vec2 C=vec2(1.0/6.0,1.0/3.0);const vec4 D=vec4(0.0,0.5,1.0,2.0);",
+          "  vec3 i=floor(v+dot(v,C.yyy));vec3 x0=v-i+dot(i,C.xxx);",
+          "  vec3 g=step(x0.yzx,x0.xyz);vec3 l=1.0-g;",
+          "  vec3 i1=min(g.xyz,l.zxy);vec3 i2=max(g.xyz,l.zxy);",
+          "  vec3 x1=x0-i1+C.xxx;vec3 x2=x0-i2+C.yyy;vec3 x3=x0-D.yyy;",
+          "  i=mod289(i);",
+          "  vec4 p=permute(permute(permute(i.z+vec4(0.0,i1.z,i2.z,1.0))+i.y+vec4(0.0,i1.y,i2.y,1.0))+i.x+vec4(0.0,i1.x,i2.x,1.0));",
+          "  float n_=0.142857142857;vec3 ns=n_*D.wyz-D.xzx;",
+          "  vec4 j=p-49.0*floor(p*ns.z*ns.z);vec4 x_=floor(j*ns.z);vec4 y_=floor(j-7.0*x_);",
+          "  vec4 x=x_*ns.x+ns.yyyy;vec4 y=y_*ns.x+ns.yyyy;vec4 h=1.0-abs(x)-abs(y);",
+          "  vec4 b0=vec4(x.xy,y.xy);vec4 b1=vec4(x.zw,y.zw);",
+          "  vec4 s0=floor(b0)*2.0+1.0;vec4 s1=floor(b1)*2.0+1.0;",
+          "  vec4 sh=-step(h,vec4(0.0));",
+          "  vec4 a0=b0.xzyw+s0.xzyw*sh.xxyy;vec4 a1=b1.xzyw+s1.xzyw*sh.zzww;",
+          "  vec3 p0=vec3(a0.xy,h.x);vec3 p1=vec3(a0.zw,h.y);vec3 p2=vec3(a1.xy,h.z);vec3 p3=vec3(a1.zw,h.w);",
+          "  vec4 norm=taylorInvSqrt(vec4(dot(p0,p0),dot(p1,p1),dot(p2,p2),dot(p3,p3)));",
+          "  p0*=norm.x;p1*=norm.y;p2*=norm.z;p3*=norm.w;",
+          "  vec4 m=max(0.6-vec4(dot(x0,x0),dot(x1,x1),dot(x2,x2),dot(x3,x3)),0.0);m=m*m;",
+          "  return 42.0*dot(m*m,vec4(dot(p0,x0),dot(p1,x1),dot(p2,x2),dot(p3,x3)));",
+          "}",
+          "void main(){",
+          "  vec2 uv=vUv;float ar=1920.0/1080.0;vec2 p=vec2(uv.x*ar,uv.y);float t=uTime*0.06;",
+          "  float wx=snoise(vec3(p*1.4,t*0.5))*0.2;float wy=snoise(vec3(p*1.4+100.0,t*0.5))*0.2;",
+          "  vec2 wp=p+vec2(wx,wy);",
+          "  vec3 base=mix(vec3(0.10,0.02,0.22),vec3(0.04,0.10,0.25),smoothstep(0.0,1.0,uv.x*0.6+uv.y*0.4));",
+          "  float angle=0.65;float ridgeUv=dot(wp,vec2(cos(angle),sin(angle)));",
+          "  float ridge1=sin(ridgeUv*8.0+t*2.0+snoise(vec3(wp*0.8,t))*1.5);",
+          "  float ridge2=sin(ridgeUv*5.5-t*1.4+snoise(vec3(wp*1.2+50.0,t*0.7))*2.0);",
+          "  float ridge3=sin(ridgeUv*12.0+t*3.0+snoise(vec3(wp*0.6+80.0,t*0.4))*1.0);",
+          "  float crease1=pow(abs(ridge1),0.35)*sign(ridge1)*0.5+0.5;",
+          "  float crease2=pow(abs(ridge2),0.4)*sign(ridge2)*0.5+0.5;",
+          "  float crease3=pow(abs(ridge3),0.5)*sign(ridge3)*0.5+0.5;",
+          "  vec3 warm=mix(vec3(0.9,0.4,0.08),vec3(0.95,0.65,0.15),crease1);",
+          "  float warmZone=smoothstep(0.15,0.75,uv.x+uv.y*0.4+snoise(vec3(uv*2.0,t))*0.3);",
+          "  vec3 cool=mix(vec3(0.02,0.4,0.55),vec3(0.25,0.7,0.82),crease2);",
+          "  float coolZone=smoothstep(0.25,0.85,1.2-uv.x+uv.y*0.5+snoise(vec3(uv*2.0+40.0,t*0.8))*0.25);",
+          "  vec3 hot=mix(vec3(0.8,0.1,0.4),vec3(0.6,0.08,0.65),crease3);",
+          "  float hotZone=smoothstep(0.5,0.9,snoise(vec3(uv*2.5+20.0,t*0.6))*0.5+0.5);",
+          "  vec3 col=base;",
+          "  col=mix(col,warm,warmZone*0.75*smoothstep(0.3,0.7,crease1));",
+          "  col=mix(col,cool,coolZone*0.65*smoothstep(0.2,0.65,crease2));",
+          "  col=mix(col,hot,hotZone*0.5*smoothstep(0.35,0.8,crease3));",
+          "  float edgeGlow=pow(1.0-abs(ridge1),6.0)*0.4+pow(1.0-abs(ridge2),5.0)*0.25;",
+          "  col+=edgeGlow*mix(warm,cool,uv.x)*0.8;",
+          "  col*=1.0-pow(abs(ridge1),4.0)*0.15;",
+          "  float vig=1.0-smoothstep(0.5,1.5,length((uv-0.5)*vec2(1.3,1.0)));",
+          "  col*=0.65+vig*0.5;",
+          "  float luma=dot(col,vec3(0.299,0.587,0.114));col=mix(vec3(luma),col,1.5);",
+          "  col=clamp(col,0.0,1.0);col=pow(col,vec3(0.9));",
+          "  gl_FragColor=vec4(col,1.0);",
+          "}",
+        ].join("\n");
+
+        var uniforms = { uTime: { value: 0.0 } };
+        threeScene.add(
+          new THREE.Mesh(
+            new THREE.PlaneGeometry(2, 2),
+            new THREE.ShaderMaterial({
+              vertexShader:
+                "varying vec2 vUv; void main() { vUv = uv; gl_Position = vec4(position, 1.0); }",
+              fragmentShader: fs,
+              uniforms: uniforms,
+            }),
+          ),
+        );
+        threeRenderer.render(threeScene, threeCamera);
+
+        var glassCanvas = document.getElementById("glass-canvas");
+        var glassCtx = glassCanvas.getContext("2d");
+        var lg = new LiquidGlass.LiquidGlassCanvas(glassCanvas);
+
+        function renderFrame(time) {
+          uniforms.uTime.value = time;
+          threeRenderer.render(threeScene, threeCamera);
+          if (!lg.isReady) return;
+          glassCtx.clearRect(0, 0, 1920, 1080);
+          glassCtx.drawImage(threeCanvas, 0, 0, 1920, 1080);
+          lg.renderGlassElements();
+        }
+
+        var lgReady = false;
+        lg.waitForInit().then(function (ok) {
+          if (!ok) return;
+          lgReady = true;
+          glassCanvas.onpaint = function () {
+            renderFrame(0);
+          };
+          if (glassCanvas.requestPaint) glassCanvas.requestPaint();
+        });
+
+        window.__timelines = window.__timelines || {};
+        var tl = gsap.timeline({ paused: true });
+
+        tl.to(
+          {},
+          {
+            duration: 8,
+            ease: "none",
+            onUpdate: function () {
+              var t = tl.time();
+              uniforms.uTime.value = t;
+              threeRenderer.render(threeScene, threeCamera);
+              if (lgReady) {
+                glassCanvas.onpaint = function () {
+                  glassCtx.clearRect(0, 0, 1920, 1080);
+                  glassCtx.drawImage(threeCanvas, 0, 0, 1920, 1080);
+                  lg.renderGlassElements();
+                };
+                if (glassCanvas.requestPaint) glassCanvas.requestPaint();
+              }
+            },
+          },
+          0,
+        );
+
+        var renderStatus = document.getElementById("render-status");
+        var renderCopy = document.getElementById("render-copy");
+
+        gsap.set(["#gp1", "#gp2"], { left: "1980px", opacity: 0 });
+        gsap.set(["#txt1", "#txt2"], { x: 640, opacity: 0 });
+        gsap.set("#reply-actions", { y: 8, opacity: 0 });
+        gsap.set("#typing-dots span", { opacity: 0.35 });
+
+        tl.to("#gp1", { left: "1326px", opacity: 1, duration: 0.38, ease: "power3.out" }, 0.18);
+        tl.to("#txt1", { x: -14, opacity: 1, duration: 0.38, ease: "power3.out" }, 0.18);
+        tl.to("#gp1", { left: "1340px", duration: 0.16, ease: "power2.out" }, 0.56);
+        tl.to("#txt1", { x: 0, duration: 0.16, ease: "power2.out" }, 0.56);
+
+        tl.to("#gp2", { left: "1326px", opacity: 1, duration: 0.36, ease: "power3.out" }, 0.82);
+        tl.to("#txt2", { x: -14, opacity: 1, duration: 0.36, ease: "power3.out" }, 0.82);
+        tl.to("#gp2", { left: "1340px", duration: 0.16, ease: "power2.out" }, 1.18);
+        tl.to("#txt2", { x: 0, duration: 0.16, ease: "power2.out" }, 1.18);
+
+        tl.to("#render-progress", { width: "100%", duration: 3.4, ease: "none" }, 0.82);
+        tl.to(
+          "#status-dot",
+          { scale: 1.45, duration: 0.18, ease: "power2.out", yoyo: true, repeat: 1 },
+          1.1,
+        );
+        tl.to(
+          "#typing-dots span",
+          {
+            opacity: 1,
+            y: -2,
+            duration: 0.22,
+            ease: "power2.out",
+            stagger: 0.08,
+            yoyo: true,
+            repeat: 5,
+          },
+          1.2,
+        );
+        tl.to("#gp2", { top: "+=10", duration: 0.18, ease: "power2.out" }, 2.55);
+        tl.to("#txt2", { y: "+=10", duration: 0.18, ease: "power2.out" }, 2.55);
+        tl.to("#gp2", { top: "-=10", duration: 0.22, ease: "power2.out" }, 2.73);
+        tl.to("#txt2", { y: "-=10", duration: 0.22, ease: "power2.out" }, 2.73);
+        tl.to("#reply-actions", { y: 0, opacity: 1, duration: 0.24, ease: "power2.out" }, 2.72);
+        tl.to(
+          "#status-dot",
+          {
+            backgroundColor: "#4ade80",
+            boxShadow: "0 0 18px rgba(74, 222, 128, 0.8)",
+            duration: 0.15,
+          },
+          4.25,
+        );
+        tl.call(
+          function () {
+            renderStatus.textContent = "complete";
+            renderCopy.textContent = "liquid-glass-notification.mp4 is ready.";
+          },
+          null,
+          4.25,
+        );
+        tl.to(
+          "#gp1",
+          { top: "-=8", duration: 0.2, ease: "power2.out", yoyo: true, repeat: 1 },
+          4.25,
+        );
+        tl.to(
+          "#txt1",
+          { y: "-=8", duration: 0.2, ease: "power2.out", yoyo: true, repeat: 1 },
+          4.25,
+        );
+
+        tl.to("#gp1", { left: "1980px", opacity: 0, duration: 0.42, ease: "power2.in" }, 6.72);
+        tl.to("#txt1", { x: 640, opacity: 0, duration: 0.42, ease: "power2.in" }, 6.72);
+        tl.to("#gp2", { left: "1980px", opacity: 0, duration: 0.42, ease: "power2.in" }, 6.9);
+        tl.to("#txt2", { x: 640, opacity: 0, duration: 0.42, ease: "power2.in" }, 6.9);
+
+        window.__timelines["liquid-glass-notification"] = tl;
+      })();
+    </script>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="liquid-glass-notification" data-composition-src="compositions/liquid-glass-notification.html" data-start="0" data-duration="8" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/liquid-glass-widgets.mdx b/docs/catalog/blocks/liquid-glass-widgets.mdx
index 261209937b..a9b5001177 100644
--- a/docs/catalog/blocks/liquid-glass-widgets.mdx
+++ b/docs/catalog/blocks/liquid-glass-widgets.mdx
@@ -3,40 +3,797 @@ title: "Liquid Glass Widgets"
 description: "Frosted glass stat cards, showcase panel and pill chips over an aurora shader background"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-widgets.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-widgets.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/liquid-glass-widgets.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Liquid Glass Widgets preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add liquid-glass-widgets
-```
+<InstallCommand command="npx hyperframes add liquid-glass-widgets" />
 
 That writes `compositions/liquid-glass-widgets.html`, plus 2 supporting files under `compositions/assets/` and `compositions/lib/`.
 
-<Warning>
+<Danger>
   Live preview needs the `chrome://flags/#canvas-draw-element` flag switched on.
-  Rendering from the CLI switches it on for you. [How it
-  works](/guides/html-in-canvas)
-</Warning>
-
-## Add it to your video
-
-It runs for 8 seconds at 1920×1080. Paste this into your composition:
-
-```html index.html
-<div
-  data-composition-id="liquid-glass-widgets"
-  data-composition-src="compositions/liquid-glass-widgets.html"
-  data-start="0"
-  data-duration="8"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+  Without it this item's screen renders black. Rendering from the CLI switches
+  it on for you. [How it works](/guides/html-in-canvas)
+</Danger>
+
+## Source
+
+<Accordion title={`liquid-glass-widgets.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Liquid Glass Widgets</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script src="lib/liquid-glass.iife.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #0a0218;
+        overflow: hidden;
+        font-family: "Inter", system-ui, sans-serif;
+      }
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #three-canvas {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        z-index: 0;
+      }
+      #glass-canvas {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        z-index: 1;
+      }
+
+      /* ── Glass Panels ── */
+      .glass-panel {
+        position: absolute;
+        background: rgba(255, 255, 255, 0.025);
+        --lg-blur: 0.42;
+        --lg-refraction: 0.82;
+        --lg-corner-radius: 28;
+        --lg-z-radius: 46;
+        --lg-specular: 0.34;
+        --lg-fresnel: 1.25;
+        --lg-edge-highlight: 0.26;
+        --lg-chrom-aberration: 0.08;
+        --lg-shadow-opacity: 0;
+        --lg-shadow-spread: 0;
+        --lg-shadow-offset-y: 0;
+        --lg-saturation: 0.38;
+      }
+      .stat-card {
+        width: 220px;
+        height: 220px;
+      }
+      .showcase-card {
+        width: 500px;
+        height: 320px;
+      }
+      .pill-chip {
+        width: 130px;
+        height: 36px;
+        --lg-corner-radius: 40;
+      }
+
+      #glass-stat1 {
+        top: 300px;
+        left: 200px;
+      }
+      #glass-stat2 {
+        top: 300px;
+        left: 460px;
+      }
+      #glass-stat3 {
+        top: 300px;
+        left: 720px;
+      }
+      #glass-showcase {
+        top: 380px;
+        left: 1100px;
+      }
+      #glass-pill1 {
+        top: 720px;
+        left: 300px;
+      }
+      #glass-pill2 {
+        top: 720px;
+        left: 460px;
+      }
+      #glass-pill3 {
+        top: 720px;
+        left: 620px;
+      }
+
+      /* ── Text Overlays ── */
+      .text-overlay {
+        position: absolute;
+        z-index: 2;
+        pointer-events: none;
+      }
+
+      /* Stat cards */
+      .stat-text {
+        width: 220px;
+        height: 220px;
+        position: absolute;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 10px;
+        padding: 22px;
+        border-radius: 28px;
+        background:
+          linear-gradient(
+            150deg,
+            rgba(255, 255, 255, 0.28),
+            rgba(255, 255, 255, 0.06) 46%,
+            rgba(255, 255, 255, 0.16)
+          ),
+          linear-gradient(180deg, rgba(9, 18, 31, 0.2), rgba(255, 255, 255, 0.04));
+        border: 1px solid rgba(255, 255, 255, 0.36);
+        box-shadow:
+          inset 0 1px 0 rgba(255, 255, 255, 0.5),
+          inset 0 -18px 38px rgba(255, 255, 255, 0.08);
+        overflow: hidden;
+        text-shadow: 0 2px 16px rgba(0, 0, 0, 0.38);
+      }
+      .stat-text::before,
+      .showcase-text::before,
+      .pill-text::before {
+        content: "";
+        position: absolute;
+        inset: 1px;
+        border-radius: inherit;
+        pointer-events: none;
+        background: linear-gradient(
+          120deg,
+          rgba(255, 255, 255, 0.44),
+          transparent 28%,
+          transparent 66%,
+          rgba(255, 255, 255, 0.2)
+        );
+        opacity: 0.32;
+        mix-blend-mode: screen;
+      }
+      .stat-label {
+        position: relative;
+        font-size: 14px;
+        font-weight: 650;
+        color: #fff;
+        text-transform: uppercase;
+        letter-spacing: 1.5px;
+      }
+      .stat-value {
+        position: relative;
+        font-size: 52px;
+        font-weight: 700;
+        color: #fff;
+        font-variant-numeric: tabular-nums;
+        line-height: 1;
+      }
+      .stat-unit {
+        position: relative;
+        font-size: 24px;
+        font-weight: 500;
+        color: #fff;
+      }
+      .mini-meter {
+        position: relative;
+        width: 140px;
+        height: 6px;
+        overflow: hidden;
+        border-radius: 999px;
+        background: rgba(255, 255, 255, 0.28);
+      }
+      .mini-meter-fill {
+        width: 0%;
+        height: 100%;
+        border-radius: inherit;
+        background: linear-gradient(90deg, #06e3fa, #4fdb5e);
+        box-shadow: 0 0 12px rgba(79, 219, 94, 0.55);
+      }
+      .battery-shell {
+        position: relative;
+        width: 118px;
+        height: 40px;
+        padding: 4px;
+        border: 2px solid rgba(255, 255, 255, 0.66);
+        border-radius: 12px;
+      }
+      .battery-shell::after {
+        content: "";
+        position: absolute;
+        top: 12px;
+        right: -9px;
+        width: 5px;
+        height: 14px;
+        border-radius: 0 5px 5px 0;
+        background: rgba(255, 255, 255, 0.66);
+      }
+      .battery-fill {
+        width: 72%;
+        height: 100%;
+        border-radius: 8px;
+        background: linear-gradient(90deg, #4ade80, #06e3fa);
+        box-shadow: 0 0 18px rgba(74, 222, 128, 0.45);
+      }
+      .steps-ring {
+        width: 106px;
+        height: 106px;
+        display: grid;
+        place-items: center;
+        border-radius: 50%;
+        background: conic-gradient(#a78bfa 0deg, #06e3fa 180deg, rgba(255, 255, 255, 0.18) 180deg);
+      }
+      .steps-ring-inner {
+        width: 78px;
+        height: 78px;
+        display: grid;
+        place-items: center;
+        border-radius: 50%;
+        background: rgba(7, 10, 18, 0.36);
+        box-shadow:
+          inset 0 1px 0 rgba(255, 255, 255, 0.22),
+          inset 0 -8px 20px rgba(0, 0, 0, 0.14);
+        color: #fff;
+        font-size: 30px;
+        font-weight: 800;
+        font-variant-numeric: tabular-nums;
+      }
+      #text-stat1 {
+        top: 300px;
+        left: 200px;
+      }
+      #text-stat2 {
+        top: 300px;
+        left: 460px;
+      }
+      #text-stat3 {
+        top: 300px;
+        left: 720px;
+      }
+
+      /* Showcase card */
+      .showcase-text {
+        width: 500px;
+        height: 320px;
+        position: absolute;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 20px;
+        padding: 32px;
+        border-radius: 28px;
+        background:
+          radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.38), transparent 24%),
+          linear-gradient(
+            135deg,
+            rgba(255, 255, 255, 0.24),
+            rgba(255, 255, 255, 0.07) 52%,
+            rgba(255, 255, 255, 0.18)
+          );
+        border: 1px solid rgba(255, 255, 255, 0.38);
+        box-shadow:
+          inset 0 1px 0 rgba(255, 255, 255, 0.5),
+          inset 0 -24px 48px rgba(255, 255, 255, 0.08);
+        overflow: hidden;
+        text-shadow: 0 2px 18px rgba(0, 0, 0, 0.4);
+      }
+      .showcase-icon {
+        position: relative;
+        width: 168px;
+        height: 52px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .showcase-logo {
+        width: 150px;
+        height: auto;
+        display: block;
+      }
+      .showcase-title {
+        position: relative;
+        font-size: 28px;
+        font-weight: 700;
+        color: #fff;
+        text-align: center;
+        line-height: 1.2;
+      }
+      .showcase-desc {
+        position: relative;
+        font-size: 15px;
+        font-weight: 500;
+        color: #fff;
+        text-align: center;
+        line-height: 1.5;
+        max-width: 380px;
+      }
+      .showcase-status {
+        position: relative;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        color: #fff;
+        font-size: 14px;
+        font-weight: 700;
+      }
+      .showcase-dot {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background: #4ade80;
+        box-shadow: 0 0 14px rgba(74, 222, 128, 0.7);
+      }
+      .showcase-progress {
+        position: relative;
+        width: 300px;
+        height: 7px;
+        overflow: hidden;
+        border-radius: 999px;
+        background: rgba(255, 255, 255, 0.18);
+      }
+      .showcase-progress-fill {
+        width: 18%;
+        height: 100%;
+        border-radius: inherit;
+        background: linear-gradient(90deg, #06e3fa, #4fdb5e);
+      }
+      #text-showcase {
+        top: 380px;
+        left: 1100px;
+      }
+
+      /* Pill chips */
+      .pill-text {
+        width: 130px;
+        height: 36px;
+        position: absolute;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 8px;
+        border-radius: 40px;
+        background: linear-gradient(130deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.1));
+        border: 1px solid rgba(255, 255, 255, 0.34);
+        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.48);
+        overflow: hidden;
+      }
+      .pill-dot {
+        position: relative;
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        flex-shrink: 0;
+      }
+      .dot-green {
+        background: #4ade80;
+      }
+      .dot-blue {
+        background: #60a5fa;
+      }
+      .dot-violet {
+        background: #a78bfa;
+      }
+      .pill-label {
+        position: relative;
+        font-size: 13px;
+        font-weight: 600;
+        color: #fff;
+      }
+      #text-pill1 {
+        top: 720px;
+        left: 300px;
+      }
+      #text-pill2 {
+        top: 720px;
+        left: 460px;
+      }
+      #text-pill3 {
+        top: 720px;
+        left: 620px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="liquid-glass-widgets"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="8"
+      data-root="true"
+    >
+      <canvas id="three-canvas" width="1920" height="1080"></canvas>
+
+      <canvas id="glass-canvas" layoutsubtree width="1920" height="1080">
+        <div id="glass-stat1" class="glass-panel stat-card liquid-glass"></div>
+        <div id="glass-stat2" class="glass-panel stat-card liquid-glass"></div>
+        <div id="glass-stat3" class="glass-panel stat-card liquid-glass"></div>
+        <div id="glass-showcase" class="glass-panel showcase-card liquid-glass"></div>
+        <div id="glass-pill1" class="glass-panel pill-chip liquid-glass"></div>
+        <div id="glass-pill2" class="glass-panel pill-chip liquid-glass"></div>
+        <div id="glass-pill3" class="glass-panel pill-chip liquid-glass"></div>
+      </canvas>
+
+      <!-- Stat cards -->
+      <div id="text-stat1" class="text-overlay stat-text">
+        <span class="stat-label">Temperature</span>
+        <span class="stat-value"
+          ><span id="temp-value">21</span><span class="stat-unit">&deg;</span></span
+        >
+        <div class="mini-meter"><div id="temp-meter" class="mini-meter-fill"></div></div>
+      </div>
+      <div id="text-stat2" class="text-overlay stat-text">
+        <span class="stat-label">Battery</span>
+        <div class="battery-shell"><div id="battery-fill" class="battery-fill"></div></div>
+        <span class="stat-value"
+          ><span id="battery-value">87</span><span class="stat-unit">%</span></span
+        >
+      </div>
+      <div id="text-stat3" class="text-overlay stat-text">
+        <span class="stat-label">Steps</span>
+        <div id="steps-ring" class="steps-ring">
+          <div id="steps-value" class="steps-ring-inner">8.2K</div>
+        </div>
+      </div>
+
+      <!-- Showcase card -->
+      <div id="text-showcase" class="text-overlay showcase-text">
+        <div class="showcase-icon">
+          <img class="showcase-logo" src="assets/hyperframes-logo-dark.svg" alt="HyperFrames" />
+        </div>
+        <div class="showcase-title">Preview pipeline</div>
+        <div class="showcase-desc">
+          Write HTML, render video. Ship compositions at the speed of code.
+        </div>
+        <div class="showcase-status">
+          <span class="showcase-dot" id="showcase-dot"></span
+          ><span id="showcase-status">Encoding frames</span>
+        </div>
+        <div class="showcase-progress">
+          <div id="showcase-progress" class="showcase-progress-fill"></div>
+        </div>
+      </div>
+
+      <!-- Pill chips -->
+      <div id="text-pill1" class="text-overlay pill-text">
+        <span class="pill-dot dot-green"></span>
+        <span class="pill-label">Connected</span>
+      </div>
+      <div id="text-pill2" class="text-overlay pill-text">
+        <span class="pill-dot dot-blue"></span>
+        <span class="pill-label">Bluetooth</span>
+      </div>
+      <div id="text-pill3" class="text-overlay pill-text">
+        <span class="pill-dot dot-violet"></span>
+        <span class="pill-label">Focus</span>
+      </div>
+
+      <div
+        id="driver"
+        class="clip"
+        data-start="0"
+        data-duration="8"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+
+    <script>
+      var W = 1920,
+        H = 1080,
+        DURATION = 8;
+
+      /* ── Three.js Aurora Shader ─────────────────────────────────────── */
+      var vs = "varying vec2 vUv; void main() { vUv = uv; gl_Position = vec4(position, 1.0); }";
+      var fs = [
+        "precision highp float;",
+        "varying vec2 vUv;",
+        "uniform float uTime;",
+        "vec3 mod289(vec3 x){return x-floor(x*(1.0/289.0))*289.0;}",
+        "vec4 mod289(vec4 x){return x-floor(x*(1.0/289.0))*289.0;}",
+        "vec4 permute(vec4 x){return mod289(((x*34.0)+1.0)*x);}",
+        "vec4 taylorInvSqrt(vec4 r){return 1.79284291400159-0.85373472095314*r;}",
+        "float snoise(vec3 v){",
+        "  const vec2 C=vec2(1.0/6.0,1.0/3.0);const vec4 D=vec4(0.0,0.5,1.0,2.0);",
+        "  vec3 i=floor(v+dot(v,C.yyy));vec3 x0=v-i+dot(i,C.xxx);",
+        "  vec3 g=step(x0.yzx,x0.xyz);vec3 l=1.0-g;",
+        "  vec3 i1=min(g.xyz,l.zxy);vec3 i2=max(g.xyz,l.zxy);",
+        "  vec3 x1=x0-i1+C.xxx;vec3 x2=x0-i2+C.yyy;vec3 x3=x0-D.yyy;",
+        "  i=mod289(i);",
+        "  vec4 p=permute(permute(permute(i.z+vec4(0.0,i1.z,i2.z,1.0))+i.y+vec4(0.0,i1.y,i2.y,1.0))+i.x+vec4(0.0,i1.x,i2.x,1.0));",
+        "  float n_=0.142857142857;vec3 ns=n_*D.wyz-D.xzx;",
+        "  vec4 j=p-49.0*floor(p*ns.z*ns.z);vec4 x_=floor(j*ns.z);vec4 y_=floor(j-7.0*x_);",
+        "  vec4 x=x_*ns.x+ns.yyyy;vec4 y=y_*ns.x+ns.yyyy;vec4 h=1.0-abs(x)-abs(y);",
+        "  vec4 b0=vec4(x.xy,y.xy);vec4 b1=vec4(x.zw,y.zw);",
+        "  vec4 s0=floor(b0)*2.0+1.0;vec4 s1=floor(b1)*2.0+1.0;",
+        "  vec4 sh=-step(h,vec4(0.0));",
+        "  vec4 a0=b0.xzyw+s0.xzyw*sh.xxyy;vec4 a1=b1.xzyw+s1.xzyw*sh.zzww;",
+        "  vec3 p0=vec3(a0.xy,h.x);vec3 p1=vec3(a0.zw,h.y);vec3 p2=vec3(a1.xy,h.z);vec3 p3=vec3(a1.zw,h.w);",
+        "  vec4 norm=taylorInvSqrt(vec4(dot(p0,p0),dot(p1,p1),dot(p2,p2),dot(p3,p3)));",
+        "  p0*=norm.x;p1*=norm.y;p2*=norm.z;p3*=norm.w;",
+        "  vec4 m=max(0.6-vec4(dot(x0,x0),dot(x1,x1),dot(x2,x2),dot(x3,x3)),0.0);m=m*m;",
+        "  return 42.0*dot(m*m,vec4(dot(p0,x0),dot(p1,x1),dot(p2,x2),dot(p3,x3)));",
+        "}",
+        "void main(){",
+        "  vec2 uv=vUv;float ar=1920.0/1080.0;vec2 p=vec2(uv.x*ar,uv.y);float t=uTime*0.06;",
+        "  float wx=snoise(vec3(p*1.4,t*0.5))*0.2;float wy=snoise(vec3(p*1.4+100.0,t*0.5))*0.2;",
+        "  vec2 wp=p+vec2(wx,wy);",
+        "  vec3 base=mix(vec3(0.10,0.02,0.22),vec3(0.04,0.10,0.25),smoothstep(0.0,1.0,uv.x*0.6+uv.y*0.4));",
+        "  float angle=0.65;float ridgeUv=dot(wp,vec2(cos(angle),sin(angle)));",
+        "  float ridge1=sin(ridgeUv*8.0+t*2.0+snoise(vec3(wp*0.8,t))*1.5);",
+        "  float ridge2=sin(ridgeUv*5.5-t*1.4+snoise(vec3(wp*1.2+50.0,t*0.7))*2.0);",
+        "  float ridge3=sin(ridgeUv*12.0+t*3.0+snoise(vec3(wp*0.6+80.0,t*0.4))*1.0);",
+        "  float crease1=pow(abs(ridge1),0.35)*sign(ridge1)*0.5+0.5;",
+        "  float crease2=pow(abs(ridge2),0.4)*sign(ridge2)*0.5+0.5;",
+        "  float crease3=pow(abs(ridge3),0.5)*sign(ridge3)*0.5+0.5;",
+        "  vec3 warm=mix(vec3(0.9,0.4,0.08),vec3(0.95,0.65,0.15),crease1);",
+        "  float warmZone=smoothstep(0.15,0.75,uv.x+uv.y*0.4+snoise(vec3(uv*2.0,t))*0.3);",
+        "  vec3 cool=mix(vec3(0.02,0.4,0.55),vec3(0.25,0.7,0.82),crease2);",
+        "  float coolZone=smoothstep(0.25,0.85,1.2-uv.x+uv.y*0.5+snoise(vec3(uv*2.0+40.0,t*0.8))*0.25);",
+        "  vec3 hot=mix(vec3(0.8,0.1,0.4),vec3(0.6,0.08,0.65),crease3);",
+        "  float hotZone=smoothstep(0.5,0.9,snoise(vec3(uv*2.5+20.0,t*0.6))*0.5+0.5);",
+        "  vec3 col=base;",
+        "  col=mix(col,warm,warmZone*0.75*smoothstep(0.3,0.7,crease1));",
+        "  col=mix(col,cool,coolZone*0.65*smoothstep(0.2,0.65,crease2));",
+        "  col=mix(col,hot,hotZone*0.5*smoothstep(0.35,0.8,crease3));",
+        "  float edgeGlow=pow(1.0-abs(ridge1),6.0)*0.4+pow(1.0-abs(ridge2),5.0)*0.25;",
+        "  col+=edgeGlow*mix(warm,cool,uv.x)*0.8;",
+        "  col*=1.0-pow(abs(ridge1),4.0)*0.15;",
+        "  float vig=1.0-smoothstep(0.5,1.5,length((uv-0.5)*vec2(1.3,1.0)));",
+        "  col*=0.65+vig*0.5;",
+        "  float luma=dot(col,vec3(0.299,0.587,0.114));col=mix(vec3(luma),col,1.5);",
+        "  col=clamp(col,0.0,1.0);col=pow(col,vec3(0.9));",
+        "  gl_FragColor=vec4(col,1.0);",
+        "}",
+      ].join("\n");
+
+      /* ── Three.js Setup ─────────────────────────────────────────────── */
+      var threeCanvas = document.getElementById("three-canvas");
+      var renderer = new THREE.WebGLRenderer({ canvas: threeCanvas, alpha: false });
+      renderer.setSize(W, H, false);
+      renderer.setPixelRatio(1);
+
+      var scene = new THREE.Scene();
+      var camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
+      var uniforms = { uTime: { value: 0 } };
+      var shaderMat = new THREE.ShaderMaterial({
+        vertexShader: vs,
+        fragmentShader: fs,
+        uniforms: uniforms,
+      });
+      var quad = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), shaderMat);
+      scene.add(quad);
+
+      /* ── Glass Canvas ───────────────────────────────────────────────── */
+      var glassCanvas = document.getElementById("glass-canvas");
+      var ctx = glassCanvas.getContext("2d");
+      var lg = new LiquidGlass.LiquidGlassCanvas(glassCanvas);
+      var lgReady = false;
+
+      function renderGlass(time) {
+        if (!lgReady) return;
+        uniforms.uTime.value = time;
+        renderer.render(scene, camera);
+        ctx.clearRect(0, 0, W, H);
+        ctx.drawImage(threeCanvas, 0, 0, W, H);
+        lg.renderGlassElements();
+      }
+
+      function requestGlassRender(time) {
+        if (glassCanvas.requestPaint) {
+          glassCanvas.onpaint = function () {
+            renderGlass(time);
+          };
+          glassCanvas.requestPaint();
+          return;
+        }
+        renderGlass(time);
+      }
+
+      lg.waitForInit().then(function (ok) {
+        if (!ok) return;
+        lgReady = true;
+        requestGlassRender(0);
+      });
+
+      /* ── GSAP Timeline ──────────────────────────────────────────────── */
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+
+      /* Glass + text element pairs */
+      var s1g = document.getElementById("glass-stat1");
+      var s2g = document.getElementById("glass-stat2");
+      var s3g = document.getElementById("glass-stat3");
+      var scg = document.getElementById("glass-showcase");
+      var p1g = document.getElementById("glass-pill1");
+      var p2g = document.getElementById("glass-pill2");
+      var p3g = document.getElementById("glass-pill3");
+      var s1t = document.getElementById("text-stat1");
+      var s2t = document.getElementById("text-stat2");
+      var s3t = document.getElementById("text-stat3");
+      var sct = document.getElementById("text-showcase");
+      var p1t = document.getElementById("text-pill1");
+      var p2t = document.getElementById("text-pill2");
+      var p3t = document.getElementById("text-pill3");
+
+      var tempValue = document.getElementById("temp-value");
+      var batteryValue = document.getElementById("battery-value");
+      var stepsValue = document.getElementById("steps-value");
+      var stepsRing = document.getElementById("steps-ring");
+      var showcaseStatus = document.getElementById("showcase-status");
+      var tempCounter = { value: 21 };
+      var batteryCounter = { value: 87 };
+      var stepsCounter = { value: 8.2 };
+
+      // Glass panels (rasterized by the html-in-canvas API) animate top — the API
+      // reads sub-pixel getComputedStyle().top, so layout-prop motion does not
+      // stutter and the lint rule exempts them. Plain-DOM text overlays DO stutter on
+      // layout props, so they animate the transform equivalent (y). y is relative to
+      // each text element's CSS resting top (stats 300, showcase 380, pills 720), so the
+      // initial seed to visual 1160 is y = 1160 - restingTop.
+      var glassPanels = [s1g, s2g, s3g, scg, p1g, p2g, p3g];
+      var statText = [s1t, s2t, s3t];
+      var showcaseText = sct;
+      var pillText = [p1t, p2t, p3t];
+      gsap.set(glassPanels, { opacity: 1, top: 1160 });
+      gsap.set(statText, { opacity: 1, y: 860 }); // 1160 - 300
+      gsap.set(showcaseText, { opacity: 1, y: 780 }); // 1160 - 380
+      gsap.set(pillText, { opacity: 1, y: 440 }); // 1160 - 720
+
+      tl.to(s1g, { top: 300, duration: 0.46, ease: "power3.out" }, 0.12);
+      tl.to(s1t, { y: 0, duration: 0.46, ease: "power3.out" }, 0.12); // 300 - 300
+      tl.to(s2g, { top: 300, duration: 0.46, ease: "power3.out" }, 0.24);
+      tl.to(s2t, { y: 0, duration: 0.46, ease: "power3.out" }, 0.24); // 300 - 300
+      tl.to(s3g, { top: 300, duration: 0.46, ease: "power3.out" }, 0.36);
+      tl.to(s3t, { y: 0, duration: 0.46, ease: "power3.out" }, 0.36); // 300 - 300
+      tl.to(scg, { top: 380, duration: 0.5, ease: "power3.out" }, 0.5);
+      tl.to(sct, { y: 0, duration: 0.5, ease: "power3.out" }, 0.5); // 380 - 380
+      tl.to(p1g, { top: 720, duration: 0.32, ease: "power3.out" }, 0.9);
+      tl.to(p1t, { y: 0, duration: 0.32, ease: "power3.out" }, 0.9); // 720 - 720
+      tl.to(p2g, { top: 720, duration: 0.32, ease: "power3.out" }, 1.0);
+      tl.to(p2t, { y: 0, duration: 0.32, ease: "power3.out" }, 1.0); // 720 - 720
+      tl.to(p3g, { top: 720, duration: 0.32, ease: "power3.out" }, 1.1);
+      tl.to(p3t, { y: 0, duration: 0.32, ease: "power3.out" }, 1.1); // 720 - 720
+
+      tl.to("#temp-meter", { width: "76%", duration: 1.7, ease: "power2.out" }, 0.9);
+      tl.to(
+        tempCounter,
+        {
+          value: 25,
+          duration: 2.2,
+          ease: "power2.out",
+          onUpdate: function () {
+            tempValue.textContent = Math.round(tempCounter.value);
+          },
+        },
+        0.9,
+      );
+      tl.to("#battery-fill", { width: "91%", duration: 2.4, ease: "power2.out" }, 1.05);
+      tl.to(
+        batteryCounter,
+        {
+          value: 91,
+          duration: 2.4,
+          ease: "power2.out",
+          onUpdate: function () {
+            batteryValue.textContent = Math.round(batteryCounter.value);
+          },
+        },
+        1.05,
+      );
+      tl.to(
+        stepsCounter,
+        {
+          value: 9.1,
+          duration: 2.6,
+          ease: "power2.out",
+          onUpdate: function () {
+            var degrees = Math.round(stepsCounter.value * 31.4);
+            stepsValue.textContent = stepsCounter.value.toFixed(1) + "K";
+            stepsRing.style.background =
+              "conic-gradient(#a78bfa 0deg, #06e3fa " +
+              degrees +
+              "deg, rgba(255, 255, 255, 0.18) " +
+              degrees +
+              "deg)";
+          },
+        },
+        1.2,
+      );
+      tl.to("#showcase-progress", { width: "92%", duration: 4.1, ease: "none" }, 1.2);
+      tl.to(
+        "#showcase-dot",
+        { scale: 1.5, duration: 0.25, ease: "power2.out", yoyo: true, repeat: 7 },
+        1.4,
+      );
+      tl.call(
+        function () {
+          showcaseStatus.textContent = "Preview ready";
+        },
+        null,
+        5.2,
+      );
+      tl.to(scg, { top: "-=10", duration: 0.2, ease: "power2.out", yoyo: true, repeat: 1 }, 5.2);
+      tl.to(sct, { y: "-=10", duration: 0.2, ease: "power2.out", yoyo: true, repeat: 1 }, 5.2);
+      tl.to(
+        ".pill-dot",
+        { scale: 1.55, duration: 0.2, ease: "power2.out", stagger: 0.12, yoyo: true, repeat: 3 },
+        2.2,
+      );
+
+      tl.to(
+        [s1g, s2g, s3g],
+        { top: "-=12", duration: 0.2, ease: "power2.out", yoyo: true, repeat: 1 },
+        5.7,
+      );
+      tl.to(
+        [s1t, s2t, s3t],
+        { y: "-=12", duration: 0.2, ease: "power2.out", yoyo: true, repeat: 1 },
+        5.7,
+      );
+      tl.to(
+        [s1g, s2g, s3g, scg, p1g, p2g, p3g],
+        { top: "+=760", duration: 0.42, ease: "power2.in" },
+        6.74,
+      );
+      tl.to(
+        [s1t, s2t, s3t, sct, p1t, p2t, p3t],
+        { y: "+=760", duration: 0.42, ease: "power2.in" },
+        6.74,
+      );
+
+      /* Duration driver */
+      tl.to({ v: 0 }, { v: 1, duration: DURATION, ease: "none" }, 0);
+
+      tl.eventCallback("onUpdate", function () {
+        requestGlassRender(tl.time());
+      });
+
+      window.__timelines["liquid-glass-widgets"] = tl;
+    </script>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="liquid-glass-widgets" data-composition-src="compositions/liquid-glass-widgets.html" data-start="0" data-duration="8" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/logo-outro.mdx b/docs/catalog/blocks/logo-outro.mdx
index 21a7171044..366e5b3ee5 100644
--- a/docs/catalog/blocks/logo-outro.mdx
+++ b/docs/catalog/blocks/logo-outro.mdx
@@ -3,41 +3,265 @@ title: "Logo Outro"
 description: "Cinematic logo reveal with piece-by-piece assembly, glow bloom, tagline fade-in, and URL pill"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/logo-outro.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/logo-outro.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/logo-outro.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Logo Outro preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add logo-outro
-```
+<InstallCommand command="npx hyperframes add logo-outro" />
 
 That writes one file: `compositions/logo-outro.html`.
 
-## Add it to your video
+## Change the colors
+
+Set these CSS variables on the block:
+
+- `--bg-color` — Background. Defaults to `#0a0a0f`.
+- `--accent-color` — Accent. Defaults to `#1a1a1f`.
+
+## Source
+
+<Accordion title={`logo-outro.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Logo Outro</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=block"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0a0a0f;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="logo-outro"
+      data-composition-id="logo-outro"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="6"
+    >
+      <div class="canvas">
+        <!-- Glow effect behind the logo -->
+        <div class="logo-glow"></div>
+
+        <!-- Logo Container -->
+        <div class="logo-container">
+          <svg viewBox="0 0 160 240" width="160" height="240" class="logo-svg">
+            <!-- Replace these paths with your own logo SVG -->
+            <path
+              class="logo-piece logo-tl"
+              d="M 0 40 C 0 17.9 17.9 0 40 0 L 80 0 L 80 80 L 40 80 C 17.9 80 0 62.1 0 40 Z"
+              fill="#F24E1E"
+            />
+            <path
+              class="logo-piece logo-tr"
+              d="M 80 0 L 120 0 C 142.1 0 160 17.9 160 40 C 160 62.1 142.1 80 120 80 L 80 80 L 80 0 Z"
+              fill="#A259FF"
+            />
+            <path
+              class="logo-piece logo-ml"
+              d="M 0 120 C 0 97.9 17.9 80 40 80 L 80 80 L 80 160 L 40 160 C 17.9 160 0 142.1 0 120 Z"
+              fill="#FF7262"
+            />
+            <circle class="logo-piece logo-mr" cx="120" cy="120" r="40" fill="#1ABCFE" />
+            <path
+              class="logo-piece logo-bl"
+              d="M 0 200 C 0 177.9 17.9 160 40 160 L 80 160 L 80 200 C 80 222.1 62.1 240 40 240 C 17.9 240 0 222.1 0 200 Z"
+              fill="#0ACF83"
+            />
+          </svg>
+        </div>
+
+        <div class="text-container">
+          <div class="tagline">Nothing great is made alone.</div>
+          <div class="url-pill">
+            <span class="url-text">figma.com</span>
+          </div>
+        </div>
+      </div>
+
+      <style>
+        [data-composition-id="logo-outro"] .canvas {
+          width: 1920px;
+          height: 1080px;
+          background: #0a0a0f;
+          position: relative;
+          overflow: hidden;
+          font-family: "Inter", sans-serif;
+        }
+
+        [data-composition-id="logo-outro"] .logo-container {
+          position: absolute;
+          left: 880px;
+          top: 380px;
+          width: 160px;
+          height: 240px;
+          z-index: 2;
+        }
+
+        [data-composition-id="logo-outro"] .logo-piece {
+          transform-origin: center center;
+          opacity: 0;
+        }
+
+        [data-composition-id="logo-outro"] .logo-glow {
+          position: absolute;
+          left: 760px;
+          top: 300px;
+          width: 400px;
+          height: 400px;
+          background: radial-gradient(circle, rgba(162, 89, 255, 0.25) 0%, rgba(10, 10, 15, 0) 70%);
+          border-radius: 50%;
+          opacity: 0;
+          pointer-events: none;
+          z-index: 1;
+        }
+
+        [data-composition-id="logo-outro"] .text-container {
+          position: absolute;
+          top: 720px;
+          width: 100%;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          z-index: 3;
+        }
 
-It runs for 6 seconds at 1920×1080. Paste this into your composition:
+        [data-composition-id="logo-outro"] .tagline {
+          font-size: 44px;
+          font-weight: 500;
+          color: white;
+          opacity: 0;
+          margin-bottom: 32px;
+          text-align: center;
+        }
 
-```html index.html
-<div
-  data-composition-id="logo-outro"
-  data-composition-src="compositions/logo-outro.html"
-  data-start="0"
-  data-duration="6"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+        [data-composition-id="logo-outro"] .url-pill {
+          background: #1a1a1f;
+          border: 1px solid #2c2c2c;
+          border-radius: 100px;
+          padding: 8px 24px;
+          opacity: 0;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+
+        [data-composition-id="logo-outro"] .url-text {
+          font-size: 18px;
+          color: #666;
+          letter-spacing: 0.5px;
+        }
+      </style>
+
+      <script>
+        (function () {
+          const tl = gsap.timeline({ paused: true });
+
+          const pieces = {
+            tl: '[data-composition-id="logo-outro"] .logo-tl',
+            tr: '[data-composition-id="logo-outro"] .logo-tr',
+            ml: '[data-composition-id="logo-outro"] .logo-ml',
+            mr: '[data-composition-id="logo-outro"] .logo-mr',
+            bl: '[data-composition-id="logo-outro"] .logo-bl',
+          };
+
+          const pieceArray = [pieces.tl, pieces.tr, pieces.ml, pieces.mr, pieces.bl];
+          const logoGlow = '[data-composition-id="logo-outro"] .logo-glow';
+          const tagline = '[data-composition-id="logo-outro"] .tagline';
+          const urlPill = '[data-composition-id="logo-outro"] .url-pill';
+
+          // 1. Pieces slide in from the right with ripple stagger
+          pieceArray.forEach((piece, i) => {
+            tl.fromTo(
+              piece,
+              { x: 1920, opacity: 0 },
+              { x: 0, opacity: 1, duration: 1.2, ease: "power4.out" },
+              i * 0.08,
+            );
+          });
+
+          // 2. Expand and close
+          const expandTime = 1.2;
+
+          tl.to(
+            pieceArray,
+            { scale: 1.15, duration: 0.5, ease: "back.out(1.7)", stagger: 0.02 },
+            expandTime,
+          );
+
+          tl.to(pieceArray, { scale: 1, duration: 0.4, ease: "power2.inOut" }, expandTime + 0.3);
+
+          // 3. Glow bloom
+          tl.fromTo(
+            logoGlow,
+            { opacity: 0, scale: 0.5 },
+            { opacity: 1, scale: 1.2, duration: 0.4, ease: "power2.out" },
+            expandTime,
+          );
+          tl.to(
+            logoGlow,
+            { opacity: 0, scale: 1.8, duration: 1.2, ease: "power2.out" },
+            expandTime + 0.4,
+          );
+
+          // 4. Tagline and URL pill fade in
+          const textStartTime = expandTime + 0.8;
+          tl.fromTo(
+            tagline,
+            { opacity: 0, y: 20 },
+            { opacity: 1, y: 0, duration: 1, ease: "power3.out" },
+            textStartTime,
+          );
+
+          tl.fromTo(
+            urlPill,
+            { opacity: 0, y: 15 },
+            { opacity: 1, y: 0, duration: 0.8, ease: "power3.out" },
+            textStartTime + 0.4,
+          );
+
+          window.__timelines = window.__timelines || {};
+          window.__timelines["logo-outro"] = tl;
+        })();
+      </script>
+    </div>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
 
-## Change the colors
+## Usage
 
-Set these CSS variables on the block:
+After installing, add the block to your host composition:
 
-- `--bg-color` — Background. Defaults to `#0a0a0f`.
-- `--accent-color` — Accent. Defaults to `#1a1a1f`.
+```html
+<div data-composition-id="logo-outro" data-composition-src="compositions/logo-outro.html" data-start="0" data-duration="6" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/lower-third-bild.mdx b/docs/catalog/blocks/lower-third-bild.mdx
index 8fe0ae306d..95bba247e5 100644
--- a/docs/catalog/blocks/lower-third-bild.mdx
+++ b/docs/catalog/blocks/lower-third-bild.mdx
@@ -3,35 +3,186 @@ title: "Lower Third — BILD Style"
 description: "News-style lower third with tight-fit text boxes: white headline bar with red drop-shadow, red sub-line with white drop-shadow."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lower-third-bild.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lower-third-bild.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
-## Install
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/blocks/lower-third-bild.html"
+  compositionId="lower-third-bild"
+  compositionSrc="compositions/lower-third-bild.html"
+  variables={[{"id":"TXT_MAIN_1_Line","type":"string","default":"BILD EXKLUSIV"},{"id":"TXT_SUB","type":"string","default":"Sonderbericht"}]}
+>
+
+```html lower-third-bild.html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <style>
+      @font-face {
+        font-family: "Barlow Condensed";
+        font-style: normal;
+        font-weight: 700;
+        font-display: block;
+        src: url("assets/fonts/BarlowCondensed-Bold.woff2") format("woff2");
+      }
+      @font-face {
+        font-family: "Barlow Condensed";
+        font-style: normal;
+        font-weight: 800;
+        font-display: block;
+        src: url("assets/fonts/BarlowCondensed-ExtraBold.woff2") format("woff2");
+      }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      body {
+        width: 1920px;
+        height: 1080px;
+      }
+
+      #lb-root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent;
+      }
+
+      #lb-main-outer {
+        position: absolute;
+        bottom: 215px;
+        left: 80px;
+        padding-right: 14px;
+        padding-bottom: 14px;
+      }
+
+      #lb-main-text {
+        font-family: "Barlow Condensed", sans-serif;
+        font-size: 88px;
+        font-weight: 800;
+        line-height: 1.05;
+        color: #212529;
+        background: #ffffff;
+        padding: 10px 22px 8px;
+        white-space: nowrap;
+        text-transform: uppercase;
+        letter-spacing: 0.02em;
+        box-shadow: 12px 12px 0 0 #dd0000;
+      }
+
+      #lb-sub-outer {
+        position: absolute;
+        bottom: 135px;
+        left: 80px;
+        padding-right: 10px;
+        padding-bottom: 10px;
+      }
+
+      #lb-sub-text {
+        font-family: "Barlow Condensed", sans-serif;
+        font-size: 48px;
+        font-weight: 700;
+        line-height: 1.1;
+        color: #ffffff;
+        background: #dd0000;
+        padding: 6px 18px 5px;
+        white-space: nowrap;
+        text-transform: uppercase;
+        letter-spacing: 0.04em;
+        box-shadow: 8px 8px 0 0 #ffffff;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="lb-root"
+      data-composition-id="lower-third-bild"
+      data-composition-variables='{"TXT_MAIN_1_Line":{"type":"string","default":"BILD EXKLUSIV"},"TXT_SUB":{"type":"string","default":"Sonderbericht"}}'
+      data-start="0"
+      data-duration="8"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div
+        id="lb-drv"
+        class="clip"
+        data-start="0"
+        data-duration="8"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+
+      <div id="lb-main-outer">
+        <div id="lb-main-text"></div>
+      </div>
+
+      <div id="lb-sub-outer">
+        <div id="lb-sub-text"></div>
+      </div>
+
+      <script>
+        (function () {
+          window.__timelines = window.__timelines || {};
+
+          var vars =
+            window.__hyperframes && window.__hyperframes.getVariables
+              ? window.__hyperframes.getVariables()
+              : {};
+
+          var mainText = (vars.TXT_MAIN_1_Line || "BILD EXKLUSIV").trim();
+          var subText = (vars.TXT_SUB || "Sonderbericht").trim();
 
-```bash Terminal
-npx hyperframes add lower-third-bild
+          var dur = parseFloat(document.getElementById("lb-drv").dataset.duration) || 8;
+
+          document.getElementById("lb-main-text").textContent = mainText;
+          document.getElementById("lb-sub-text").textContent = subText || " ";
+
+          var mainOuter = document.getElementById("lb-main-outer");
+          var subOuter = document.getElementById("lb-sub-outer");
+
+          var tl = gsap.timeline({ paused: true });
+
+          gsap.set([mainOuter, subOuter], { opacity: 1 });
+
+          tl.set([mainOuter, subOuter], { opacity: 0, visibility: "hidden" }, dur);
+
+          window.__timelines["lower-third-bild"] = tl;
+        })();
+      </script>
+    </div>
+  </body>
+</html>
 ```
 
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add lower-third-bild" />
+
 That writes `compositions/lower-third-bild.html`, plus 2 supporting files under `compositions/assets/fonts/`.
 
-## Add it to your video
+## Usage
 
-It runs for 8 seconds at 1920×1080. Paste this into your composition:
+After installing, add the block to your host composition:
 
-```html index.html
-<div
-  data-composition-id="lower-third-bild"
-  data-composition-src="compositions/lower-third-bild.html"
-  data-start="0"
-  data-duration="8"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+```html
+<div data-composition-id="lower-third-bild" data-composition-src="compositions/lower-third-bild.html" data-start="0" data-duration="8" data-track-index="1" data-width="1920" data-height="1080"></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.
-
 {/* hf:generated-footer */}
 
 Tagged `broadcast` `lower-third` `news` `overlay`.
diff --git a/docs/catalog/blocks/lt-accent-underline.mdx b/docs/catalog/blocks/lt-accent-underline.mdx
index 2e972e10f9..caf5cb5f12 100644
--- a/docs/catalog/blocks/lt-accent-underline.mdx
+++ b/docs/catalog/blocks/lt-accent-underline.mdx
@@ -3,34 +3,138 @@ title: "Lower Third — Accent Underline"
 description: "Cardless lower third for footage overlay: name rises, an accent rule draws left-to-right, role fades in; text-shadowed for legibility"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-accent-underline.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-accent-underline.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/lt-accent-underline.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Lower Third — Accent Underline preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add lt-accent-underline
-```
+<InstallCommand command="npx hyperframes add lt-accent-underline" />
 
 That writes one file: `compositions/lt-accent-underline.html`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`lt-accent-underline.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      body {
+        width: 1920px;
+        height: 1080px;
+      }
+
+      #root .lt {
+        position: absolute;
+        left: 130px;
+        bottom: 120px;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 14px;
+      }
+      #root .lt-name {
+        font-family: "Oswald", sans-serif;
+        font-size: 76px;
+        font-weight: 700;
+        color: #ffffff;
+        line-height: 0.96;
+        letter-spacing: 0.005em;
+        text-transform: uppercase;
+        white-space: nowrap;
+        text-shadow: 0 2px 22px rgba(0, 0, 0, 0.45);
+      }
+      #root .lt-rule {
+        height: 6px;
+        width: 100%;
+        background: #46e5b7;
+        border-radius: 3px;
+        transform-origin: 0% 50%;
+      }
+      #root .lt-role {
+        font-family: "Space Mono", monospace;
+        font-size: 28px;
+        font-weight: 400;
+        color: #e7eaf0;
+        line-height: 1.2;
+        letter-spacing: 0.04em;
+        white-space: nowrap;
+        text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="lt-accent-underline"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="4.8"
+    >
+      <div id="lt-clip" class="clip" data-start="0" data-duration="4.8" data-track-index="0">
+        <div id="lt" class="lt">
+          <div id="lt-name" class="lt-name">Dr. Maya Chen</div>
+          <div id="lt-rule" class="lt-rule"></div>
+          <div id="lt-role" class="lt-role">Host · Neuroscientist</div>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+
+      var wrap = document.getElementById("lt");
+      var nameEl = document.getElementById("lt-name");
+      var rule = document.getElementById("lt-rule");
+      var role = document.getElementById("lt-role");
 
-It runs for 4.8 seconds at 1920×1080. Paste this into your composition:
+      // Name slides up, accent rule draws left→right, role fades up under it.
+      gsap.set(nameEl, { y: 28, opacity: 0 });
+      gsap.set(rule, { scaleX: 0 });
+      gsap.set(role, { y: 16, opacity: 0 });
 
-```html index.html
-<div
-  data-composition-id="lt-accent-underline"
-  data-composition-src="compositions/lt-accent-underline.html"
-  data-start="0"
-  data-duration="4.8"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+      tl.to(nameEl, { y: 0, opacity: 1, duration: 0.55, ease: "power3.out" }, 0.1);
+      tl.to(rule, { scaleX: 1, duration: 0.5, ease: "power4.out" }, 0.3);
+      tl.to(role, { y: 0, opacity: 1, duration: 0.5, ease: "power3.out" }, 0.46);
+
+      // Exit: role fades, rule retracts, name lifts, then hard kill.
+      tl.to(role, { opacity: 0, duration: 0.3, ease: "power2.in" }, 4.25);
+      tl.to(rule, { scaleX: 0, duration: 0.3, ease: "power2.in" }, 4.3);
+      tl.to(nameEl, { y: -16, opacity: 0, duration: 0.32, ease: "power2.in" }, 4.35);
+      tl.set(wrap, { visibility: "hidden" }, 4.75);
+
+      window.__timelines["lt-accent-underline"] = tl;
+    </script>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="lt-accent-underline" data-composition-src="compositions/lt-accent-underline.html" data-start="0" data-duration="4.8" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/lt-bold-block.mdx b/docs/catalog/blocks/lt-bold-block.mdx
index 9a2f93d384..21e019c7ae 100644
--- a/docs/catalog/blocks/lt-bold-block.mdx
+++ b/docs/catalog/blocks/lt-bold-block.mdx
@@ -3,34 +3,140 @@ title: "Lower Third — Bold Block"
 description: "High-energy podcast lower third: solid dark block wipes in, uppercase name slams up, accent tag pops"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-bold-block.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-bold-block.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/lt-bold-block.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Lower Third — Bold Block preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add lt-bold-block
-```
+<InstallCommand command="npx hyperframes add lt-bold-block" />
 
 That writes one file: `compositions/lt-bold-block.html`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`lt-bold-block.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      body {
+        width: 1920px;
+        height: 1080px;
+      }
+
+      #root .lt {
+        position: absolute;
+        left: 120px;
+        bottom: 116px;
+      }
+      #root .lt-block {
+        background: #141518;
+        padding: 18px 34px 22px 30px;
+        display: inline-flex;
+        flex-direction: column;
+        gap: 12px;
+        will-change: clip-path;
+      }
+      #root .lt-name {
+        font-family: "Archivo Black", sans-serif;
+        font-size: 58px;
+        font-weight: 400;
+        color: #ffffff;
+        line-height: 0.98;
+        letter-spacing: -0.015em;
+        text-transform: uppercase;
+        white-space: nowrap;
+      }
+      #root .lt-tagwrap {
+        overflow: hidden;
+      }
+      #root .lt-tag {
+        display: inline-block;
+        background: #ffd23f;
+        color: #141518;
+        font-family: "Space Mono", monospace;
+        font-size: 24px;
+        font-weight: 700;
+        letter-spacing: 0.06em;
+        text-transform: uppercase;
+        padding: 7px 16px;
+        white-space: nowrap;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="lt-bold-block"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="4.8"
+    >
+      <div id="lt-clip" class="clip" data-start="0" data-duration="4.8" data-track-index="0">
+        <div id="lt" class="lt">
+          <div id="lt-block" class="lt-block">
+            <div id="lt-name" class="lt-name">Maya Chen</div>
+            <div class="lt-tagwrap">
+              <span id="lt-tag" class="lt-tag">Host · Neuroscientist</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+
+      var wrap = document.getElementById("lt");
+      var block = document.getElementById("lt-block");
+      var nameEl = document.getElementById("lt-name");
+      var tag = document.getElementById("lt-tag");
 
-It runs for 4.8 seconds at 1920×1080. Paste this into your composition:
+      // Solid block wipes in from the left, name slams up inside it, tag pops up after.
+      gsap.set(block, { clipPath: "inset(0 100% 0 0)" });
+      gsap.set(nameEl, { y: 30, opacity: 0 });
+      gsap.set(tag, { y: 40 });
 
-```html index.html
-<div
-  data-composition-id="lt-bold-block"
-  data-composition-src="compositions/lt-bold-block.html"
-  data-start="0"
-  data-duration="4.8"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+      tl.to(block, { clipPath: "inset(0 0% 0 0)", duration: 0.5, ease: "power4.out" }, 0.1);
+      tl.to(nameEl, { y: 0, opacity: 1, duration: 0.42, ease: "back.out(1.6)" }, 0.26);
+      tl.to(tag, { y: 0, duration: 0.45, ease: "back.out(2)" }, 0.5);
+
+      // Exit: block wipes out to the left, then hard kill.
+      tl.to(block, { clipPath: "inset(0 0 0 100%)", duration: 0.4, ease: "power3.in" }, 4.3);
+      tl.set(wrap, { visibility: "hidden" }, 4.75);
+
+      window.__timelines["lt-bold-block"] = tl;
+    </script>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="lt-bold-block" data-composition-src="compositions/lt-bold-block.html" data-start="0" data-duration="4.8" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/lt-clean-bar.mdx b/docs/catalog/blocks/lt-clean-bar.mdx
index 03c18ffb89..e30bbef75e 100644
--- a/docs/catalog/blocks/lt-clean-bar.mdx
+++ b/docs/catalog/blocks/lt-clean-bar.mdx
@@ -3,34 +3,143 @@ title: "Lower Third — Clean Bar"
 description: "Minimal white-card lower third for podcasts/interviews: accent tab, name + role, clip-wipe entrance"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-clean-bar.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-clean-bar.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/lt-clean-bar.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Lower Third — Clean Bar preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add lt-clean-bar
-```
+<InstallCommand command="npx hyperframes add lt-clean-bar" />
 
 That writes one file: `compositions/lt-clean-bar.html`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`lt-clean-bar.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      body {
+        width: 1920px;
+        height: 1080px;
+        font-family: "Montserrat", sans-serif;
+      }
+
+      #root .lt {
+        position: absolute;
+        left: 120px;
+        bottom: 110px;
+        display: flex;
+        align-items: stretch;
+        border-radius: 16px;
+        overflow: hidden;
+        box-shadow: 0 14px 44px rgba(15, 17, 21, 0.18);
+        will-change: clip-path;
+      }
+      #root .lt-tab {
+        width: 12px;
+        background: #ff5a36;
+        flex-shrink: 0;
+      }
+      #root .lt-body {
+        background: #ffffff;
+        padding: 22px 40px 24px 30px;
+        display: flex;
+        flex-direction: column;
+        gap: 7px;
+      }
+      #root .lt-name {
+        font-size: 52px;
+        font-weight: 700;
+        color: #0f1115;
+        line-height: 1.06;
+        letter-spacing: -0.015em;
+        white-space: nowrap;
+      }
+      #root .lt-role {
+        font-size: 27px;
+        font-weight: 400;
+        color: #5a6170;
+        line-height: 1.2;
+        letter-spacing: 0.01em;
+        white-space: nowrap;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="lt-clean-bar"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="4.8"
+    >
+      <div id="lt-clip" class="clip" data-start="0" data-duration="4.8" data-track-index="0">
+        <div id="lt" class="lt">
+          <div id="lt-tab" class="lt-tab"></div>
+          <div class="lt-body">
+            <div id="lt-name" class="lt-name">Dr. Maya Chen</div>
+            <div id="lt-role" class="lt-role">Host · Neuroscientist</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+
+      var card = document.getElementById("lt");
+      var tab = document.getElementById("lt-tab");
+      var nameEl = document.getElementById("lt-name");
+      var role = document.getElementById("lt-role");
 
-It runs for 4.8 seconds at 1920×1080. Paste this into your composition:
+      // Card wipes in from the left (clip-path), accent tab grows, text rises with a small stagger.
+      gsap.set(card, { clipPath: "inset(0 100% 0 0)" });
+      gsap.set(tab, { scaleY: 0, transformOrigin: "50% 0%" });
+      gsap.set(nameEl, { y: 22, opacity: 0 });
+      gsap.set(role, { y: 22, opacity: 0 });
 
-```html index.html
-<div
-  data-composition-id="lt-clean-bar"
-  data-composition-src="compositions/lt-clean-bar.html"
-  data-start="0"
-  data-duration="4.8"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+      tl.to(card, { clipPath: "inset(0 0% 0 0)", duration: 0.55, ease: "power3.out" }, 0.1);
+      tl.to(tab, { scaleY: 1, duration: 0.45, ease: "power2.out" }, 0.28);
+      tl.to(nameEl, { y: 0, opacity: 1, duration: 0.5, ease: "power3.out" }, 0.34);
+      tl.to(role, { y: 0, opacity: 1, duration: 0.5, ease: "power3.out" }, 0.44);
+
+      // Exit: settle out, then hard kill the inner element.
+      tl.to(card, { y: 18, opacity: 0, duration: 0.35, ease: "power2.in" }, 4.3);
+      tl.set(card, { visibility: "hidden" }, 4.75);
+
+      window.__timelines["lt-clean-bar"] = tl;
+    </script>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="lt-clean-bar" data-composition-src="compositions/lt-clean-bar.html" data-start="0" data-duration="4.8" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/lt-color-block.mdx b/docs/catalog/blocks/lt-color-block.mdx
index 90ddf3a39b..5c19192372 100644
--- a/docs/catalog/blocks/lt-color-block.mdx
+++ b/docs/catalog/blocks/lt-color-block.mdx
@@ -3,34 +3,132 @@ title: "Lower Third — Color Block"
 description: "High-energy lower third: bold accent-color block slides in with overshoot, condensed name + mono role"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-color-block.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-color-block.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/lt-color-block.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Lower Third — Color Block preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add lt-color-block
-```
+<InstallCommand command="npx hyperframes add lt-color-block" />
 
 That writes one file: `compositions/lt-color-block.html`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`lt-color-block.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      body {
+        width: 1920px;
+        height: 1080px;
+      }
+
+      #root .lt {
+        position: absolute;
+        left: 120px;
+        bottom: 116px;
+      }
+      #root .lt-block {
+        background: #2756ff;
+        padding: 20px 36px 24px 32px;
+        box-shadow: 0 16px 44px rgba(39, 86, 255, 0.34);
+        display: inline-flex;
+        flex-direction: column;
+        gap: 8px;
+      }
+      #root .lt-name {
+        font-family: "League Gothic", sans-serif;
+        font-size: 84px;
+        font-weight: 400;
+        color: #ffffff;
+        line-height: 0.86;
+        letter-spacing: 0.01em;
+        text-transform: uppercase;
+        white-space: nowrap;
+      }
+      #root .lt-role {
+        font-family: "Space Mono", monospace;
+        font-size: 24px;
+        font-weight: 400;
+        color: rgba(255, 255, 255, 0.86);
+        line-height: 1.2;
+        letter-spacing: 0.05em;
+        white-space: nowrap;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="lt-color-block"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="4.8"
+    >
+      <div id="lt-clip" class="clip" data-start="0" data-duration="4.8" data-track-index="0">
+        <div id="lt" class="lt">
+          <div id="lt-block" class="lt-block">
+            <div id="lt-name" class="lt-name">Dr. Maya Chen</div>
+            <div id="lt-role" class="lt-role">Host · Neuroscientist</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+
+      var wrap = document.getElementById("lt");
+      var block = document.getElementById("lt-block");
+      var nameEl = document.getElementById("lt-name");
+      var role = document.getElementById("lt-role");
 
-It runs for 4.8 seconds at 1920×1080. Paste this into your composition:
+      // Color block slides in from the left and overshoots slightly; name and role rise inside it.
+      gsap.set(block, { x: -80, opacity: 0 });
+      gsap.set(nameEl, { y: 24, opacity: 0 });
+      gsap.set(role, { y: 18, opacity: 0 });
 
-```html index.html
-<div
-  data-composition-id="lt-color-block"
-  data-composition-src="compositions/lt-color-block.html"
-  data-start="0"
-  data-duration="4.8"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+      tl.to(block, { x: 0, opacity: 1, duration: 0.5, ease: "back.out(1.4)" }, 0.1);
+      tl.to(nameEl, { y: 0, opacity: 1, duration: 0.42, ease: "power3.out" }, 0.3);
+      tl.to(role, { y: 0, opacity: 1, duration: 0.42, ease: "power3.out" }, 0.4);
+
+      // Exit: slide out left, hard kill.
+      tl.to(block, { x: -60, opacity: 0, duration: 0.35, ease: "power2.in" }, 4.3);
+      tl.set(wrap, { visibility: "hidden" }, 4.75);
+
+      window.__timelines["lt-color-block"] = tl;
+    </script>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="lt-color-block" data-composition-src="compositions/lt-color-block.html" data-start="0" data-duration="4.8" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/lt-dark-card.mdx b/docs/catalog/blocks/lt-dark-card.mdx
index 0d81ee1428..db42a947c8 100644
--- a/docs/catalog/blocks/lt-dark-card.mdx
+++ b/docs/catalog/blocks/lt-dark-card.mdx
@@ -3,34 +3,142 @@ title: "Lower Third — Dark Card"
 description: "Charcoal card lower third for bright footage: name, drawn accent underline, role; slide-up entrance"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-dark-card.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-dark-card.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/lt-dark-card.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Lower Third — Dark Card preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add lt-dark-card
-```
+<InstallCommand command="npx hyperframes add lt-dark-card" />
 
 That writes one file: `compositions/lt-dark-card.html`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`lt-dark-card.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      body {
+        width: 1920px;
+        height: 1080px;
+        font-family: "Montserrat", sans-serif;
+      }
+
+      #root .lt {
+        position: absolute;
+        left: 120px;
+        bottom: 110px;
+      }
+      #root .lt-card {
+        background: #16181d;
+        border-radius: 14px;
+        padding: 24px 38px 26px 32px;
+        box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4);
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+      }
+      #root .lt-name {
+        font-size: 48px;
+        font-weight: 700;
+        color: #ffffff;
+        line-height: 1.02;
+        letter-spacing: -0.015em;
+        white-space: nowrap;
+      }
+      #root .lt-underline {
+        height: 4px;
+        width: 100%;
+        background: #f5b942;
+        border-radius: 2px;
+        transform-origin: 0% 50%;
+      }
+      #root .lt-role {
+        font-size: 25px;
+        font-weight: 400;
+        color: #aeb6c2;
+        line-height: 1.2;
+        letter-spacing: 0.02em;
+        white-space: nowrap;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="lt-dark-card"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="4.8"
+    >
+      <div id="lt-clip" class="clip" data-start="0" data-duration="4.8" data-track-index="0">
+        <div id="lt" class="lt">
+          <div id="lt-card" class="lt-card">
+            <div id="lt-name" class="lt-name">Dr. Maya Chen</div>
+            <div id="lt-underline" class="lt-underline"></div>
+            <div id="lt-role" class="lt-role">Host · Neuroscientist</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+
+      var wrap = document.getElementById("lt");
+      var card = document.getElementById("lt-card");
+      var nameEl = document.getElementById("lt-name");
+      var underline = document.getElementById("lt-underline");
+      var role = document.getElementById("lt-role");
 
-It runs for 4.8 seconds at 1920×1080. Paste this into your composition:
+      // Card slides up from below, name fades, accent underline draws, role fades.
+      gsap.set(card, { y: 60, opacity: 0 });
+      gsap.set(nameEl, { y: 14, opacity: 0 });
+      gsap.set(underline, { scaleX: 0 });
+      gsap.set(role, { opacity: 0 });
 
-```html index.html
-<div
-  data-composition-id="lt-dark-card"
-  data-composition-src="compositions/lt-dark-card.html"
-  data-start="0"
-  data-duration="4.8"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+      tl.to(card, { y: 0, opacity: 1, duration: 0.5, ease: "power3.out" }, 0.1);
+      tl.to(nameEl, { y: 0, opacity: 1, duration: 0.45, ease: "power3.out" }, 0.26);
+      tl.to(underline, { scaleX: 1, duration: 0.5, ease: "power4.out" }, 0.42);
+      tl.to(role, { opacity: 1, duration: 0.45, ease: "power2.out" }, 0.56);
+
+      // Exit: slide down + hard kill.
+      tl.to(card, { y: 24, opacity: 0, duration: 0.35, ease: "power2.in" }, 4.3);
+      tl.set(wrap, { visibility: "hidden" }, 4.75);
+
+      window.__timelines["lt-dark-card"] = tl;
+    </script>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="lt-dark-card" data-composition-src="compositions/lt-dark-card.html" data-start="0" data-duration="4.8" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/lt-kicker-name.mdx b/docs/catalog/blocks/lt-kicker-name.mdx
index 9f9bb30d39..ea468e380e 100644
--- a/docs/catalog/blocks/lt-kicker-name.mdx
+++ b/docs/catalog/blocks/lt-kicker-name.mdx
@@ -3,34 +3,145 @@ title: "Lower Third — Kicker Name"
 description: "Cardless lower third with an accent eyebrow/kicker tag, heavy name, and a drawn baseline; for footage"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-kicker-name.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-kicker-name.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/lt-kicker-name.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Lower Third — Kicker Name preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add lt-kicker-name
-```
+<InstallCommand command="npx hyperframes add lt-kicker-name" />
 
 That writes one file: `compositions/lt-kicker-name.html`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`lt-kicker-name.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      body {
+        width: 1920px;
+        height: 1080px;
+      }
+
+      #root .lt {
+        position: absolute;
+        left: 130px;
+        bottom: 122px;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 14px;
+      }
+      #root .lt-kickwrap {
+        overflow: hidden;
+      }
+      #root .lt-kicker {
+        display: inline-block;
+        font-family: "Space Mono", monospace;
+        font-size: 22px;
+        font-weight: 700;
+        color: #141518;
+        background: #46e5b7;
+        padding: 6px 14px;
+        letter-spacing: 0.1em;
+        text-transform: uppercase;
+        white-space: nowrap;
+      }
+      #root .lt-name {
+        font-family: "Archivo Black", sans-serif;
+        font-size: 70px;
+        font-weight: 400;
+        color: #ffffff;
+        line-height: 0.98;
+        letter-spacing: -0.015em;
+        text-transform: uppercase;
+        white-space: nowrap;
+        text-shadow: 0 2px 22px rgba(0, 0, 0, 0.5);
+      }
+      #root .lt-baseline {
+        height: 5px;
+        width: 100%;
+        background: #46e5b7;
+        border-radius: 3px;
+        transform-origin: 0% 50%;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="lt-kicker-name"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="4.8"
+    >
+      <div id="lt-clip" class="clip" data-start="0" data-duration="4.8" data-track-index="0">
+        <div id="lt" class="lt">
+          <div class="lt-kickwrap">
+            <span id="lt-kicker" class="lt-kicker">Episode 47</span>
+          </div>
+          <div id="lt-name" class="lt-name">Maya Chen</div>
+          <div id="lt-baseline" class="lt-baseline"></div>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+
+      var wrap = document.getElementById("lt");
+      var kicker = document.getElementById("lt-kicker");
+      var nameEl = document.getElementById("lt-name");
+      var baseline = document.getElementById("lt-baseline");
 
-It runs for 4.8 seconds at 1920×1080. Paste this into your composition:
+      // Kicker drops in, name slams up, accent baseline draws.
+      gsap.set(kicker, { y: -40 });
+      gsap.set(nameEl, { y: 34, opacity: 0 });
+      gsap.set(baseline, { scaleX: 0 });
 
-```html index.html
-<div
-  data-composition-id="lt-kicker-name"
-  data-composition-src="compositions/lt-kicker-name.html"
-  data-start="0"
-  data-duration="4.8"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+      tl.to(kicker, { y: 0, duration: 0.42, ease: "back.out(2)" }, 0.1);
+      tl.to(nameEl, { y: 0, opacity: 1, duration: 0.45, ease: "back.out(1.5)" }, 0.32);
+      tl.to(baseline, { scaleX: 1, duration: 0.5, ease: "power4.out" }, 0.5);
+
+      // Exit: baseline retracts, text lifts, hard kill.
+      tl.to(baseline, { scaleX: 0, duration: 0.3, ease: "power2.in" }, 4.25);
+      tl.to(nameEl, { y: -16, opacity: 0, duration: 0.32, ease: "power2.in" }, 4.3);
+      tl.to(kicker, { y: -40, duration: 0.3, ease: "power2.in" }, 4.32);
+      tl.set(wrap, { visibility: "hidden" }, 4.75);
+
+      window.__timelines["lt-kicker-name"] = tl;
+    </script>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="lt-kicker-name" data-composition-src="compositions/lt-kicker-name.html" data-start="0" data-duration="4.8" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/lt-mask-reveal.mdx b/docs/catalog/blocks/lt-mask-reveal.mdx
index d7e5deea32..aec0ba805b 100644
--- a/docs/catalog/blocks/lt-mask-reveal.mdx
+++ b/docs/catalog/blocks/lt-mask-reveal.mdx
@@ -3,34 +3,151 @@ title: "Lower Third — Mask Reveal"
 description: "Cardless lower third: an accent sweep crosses and clip-path-reveals a heavy name, role fades up; for footage"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-mask-reveal.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-mask-reveal.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/lt-mask-reveal.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Lower Third — Mask Reveal preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add lt-mask-reveal
-```
+<InstallCommand command="npx hyperframes add lt-mask-reveal" />
 
 That writes one file: `compositions/lt-mask-reveal.html`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`lt-mask-reveal.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      body {
+        width: 1920px;
+        height: 1080px;
+        font-family: "Montserrat", sans-serif;
+      }
+
+      #root .lt {
+        position: absolute;
+        left: 130px;
+        bottom: 122px;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 14px;
+      }
+      #root .lt-namewrap {
+        position: relative;
+        overflow: hidden;
+        padding: 2px 0;
+      }
+      #root .lt-name {
+        font-size: 72px;
+        font-weight: 900;
+        color: #ffffff;
+        line-height: 0.98;
+        letter-spacing: -0.02em;
+        white-space: nowrap;
+        text-shadow: 0 2px 22px rgba(0, 0, 0, 0.45);
+        will-change: clip-path;
+      }
+      #root .lt-sweep {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        width: 8px;
+        background: #ffd23f;
+      }
+      #root .lt-role {
+        font-size: 28px;
+        font-weight: 500;
+        color: #e7eaf0;
+        line-height: 1.2;
+        letter-spacing: 0.02em;
+        white-space: nowrap;
+        text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="lt-mask-reveal"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="4.8"
+    >
+      <div id="lt-clip" class="clip" data-start="0" data-duration="4.8" data-track-index="0">
+        <div id="lt" class="lt">
+          <div class="lt-namewrap">
+            <div id="lt-name" class="lt-name">Dr. Maya Chen</div>
+            <div id="lt-sweep" class="lt-sweep"></div>
+          </div>
+          <div id="lt-role" class="lt-role">Host · Neuroscientist</div>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+
+      var wrap = document.getElementById("lt");
+      var nameEl = document.getElementById("lt-name");
+      var sweep = document.getElementById("lt-sweep");
+      var role = document.getElementById("lt-role");
 
-It runs for 4.8 seconds at 1920×1080. Paste this into your composition:
+      // An accent sweep crosses left→right; the name is revealed by a clip-path wipe behind it; role fades up.
+      // Sweep travel: left:"100%" was parent-relative (offsetParent = .lt-namewrap). Since the sweep is
+      // only 8px wide, xPercent would travel just 8px, so translate by the container width in pixels instead.
+      // The .lt-namewrap shrink-wraps the name "Dr. Maya Chen" to 536px (no horizontal padding/border, so
+      // clientWidth == content width), which is exactly what left:"100%" resolved to.
+      var SWEEP_TRAVEL = 536;
+      gsap.set(nameEl, { clipPath: "inset(0 100% 0 0)" });
+      gsap.set(sweep, { x: 0, opacity: 0 });
+      gsap.set(role, { y: 14, opacity: 0 });
 
-```html index.html
-<div
-  data-composition-id="lt-mask-reveal"
-  data-composition-src="compositions/lt-mask-reveal.html"
-  data-start="0"
-  data-duration="4.8"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+      tl.to(sweep, { opacity: 1, duration: 0.12, ease: "none" }, 0.1);
+      tl.to(sweep, { x: SWEEP_TRAVEL, duration: 0.55, ease: "power2.inOut" }, 0.12);
+      tl.to(nameEl, { clipPath: "inset(0 0% 0 0)", duration: 0.5, ease: "power2.inOut" }, 0.16);
+      tl.to(sweep, { opacity: 0, duration: 0.15, ease: "none" }, 0.6);
+      tl.to(role, { y: 0, opacity: 1, duration: 0.5, ease: "power3.out" }, 0.55);
+
+      // Exit: name un-wipes, role fades, hard kill.
+      tl.to(role, { opacity: 0, duration: 0.3, ease: "power2.in" }, 4.25);
+      tl.to(nameEl, { clipPath: "inset(0 0 0 100%)", duration: 0.4, ease: "power2.in" }, 4.3);
+      tl.set(wrap, { visibility: "hidden" }, 4.75);
+
+      window.__timelines["lt-mask-reveal"] = tl;
+    </script>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="lt-mask-reveal" data-composition-src="compositions/lt-mask-reveal.html" data-start="0" data-duration="4.8" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/lt-neon-border.mdx b/docs/catalog/blocks/lt-neon-border.mdx
new file mode 100644
index 0000000000..5968c4ba5d
--- /dev/null
+++ b/docs/catalog/blocks/lt-neon-border.mdx
@@ -0,0 +1,458 @@
+---
+title: "Neon Border"
+description: "Two arcs of light travel the edge of a rounded panel and snap corner to corner, trailing a soft three-layer bloom. A lower third for a name and role."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/blocks/lt-neon-border.html"
+  compositionId="lt-neon-border"
+  compositionSrc="compositions/lt-neon-border.html"
+  variables={[{"id":"name","type":"string","label":"Name","default":"Dr. Maya Chen"},{"id":"role","type":"string","label":"Role","default":"Host · Neuroscientist"},{"id":"accent","type":"color","label":"Accent","default":"#cc9149"},{"id":"movement","type":"enum","label":"Movement","default":"step","options":[{"value":"step","label":"Step (snap at corners)"},{"value":"glide","label":"Glide (smooth)"}]},{"id":"speed","type":"number","label":"Speed","default":1.6,"min":0.2,"max":6,"step":0.1,"unit":"corners/s"},{"id":"cornerRadius","type":"number","label":"Corner radius","default":26,"min":0,"max":90,"step":1,"unit":"px"},{"id":"thickness","type":"number","label":"Thickness","default":5,"min":1,"max":16,"step":1,"unit":"px"},{"id":"arcLength","type":"number","label":"Arc length","default":22,"min":5,"max":100,"step":1,"unit":"%"},{"id":"glow","type":"number","label":"Glow","default":1,"min":0,"max":2,"step":0.05,"unit":"x"}]}
+>
+
+```html lt-neon-border.html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      body {
+        width: 1920px;
+        height: 1080px;
+        font-family: "Inter", sans-serif;
+      }
+
+      #root .nb-wrap {
+        position: absolute;
+        left: 50px;
+        bottom: 56px;
+        width: 1120px;
+        height: 510px;
+      }
+      #root .nb-svg {
+        position: absolute;
+        inset: 0;
+        display: block;
+      }
+      /* The frame's inner box, inset by the bloom padding so the copy lands
+         inside the traced rectangle. */
+      #root .nb-panel {
+        position: absolute;
+        left: 150px;
+        top: 150px;
+        width: 820px;
+        height: 210px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        gap: 14px;
+        padding: 0 52px;
+      }
+      #root .nb-name {
+        display: block;
+        font-size: 54px;
+        font-weight: 700;
+        color: #ffffff;
+        line-height: 1;
+        letter-spacing: -0.015em;
+        white-space: nowrap;
+        text-shadow: 0 2px 20px rgba(0, 0, 0, 0.75);
+      }
+      #root .nb-role {
+        display: block;
+        font-size: 25px;
+        font-weight: 400;
+        color: #d5dae3;
+        line-height: 1.2;
+        letter-spacing: 0.06em;
+        text-transform: uppercase;
+        white-space: nowrap;
+        text-shadow: 0 2px 16px rgba(0, 0, 0, 0.75);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="lt-neon-border"
+      data-composition-variables='[
+        {"id":"name","type":"string","label":"Name","default":"Dr. Maya Chen"},
+        {"id":"role","type":"string","label":"Role","default":"Host · Neuroscientist"},
+        {"id":"accent","type":"color","label":"Accent","default":"#cc9149"},
+        {"id":"movement","type":"enum","label":"Movement","default":"step","options":[{"value":"step","label":"Step (snap at corners)"},{"value":"glide","label":"Glide (smooth)"}]},
+        {"id":"speed","type":"number","label":"Speed","default":1.6,"min":0.2,"max":6,"step":0.1,"unit":"corners/s"},
+        {"id":"cornerRadius","type":"number","label":"Corner radius","default":26,"min":0,"max":90,"step":1,"unit":"px"},
+        {"id":"thickness","type":"number","label":"Thickness","default":5,"min":1,"max":16,"step":1,"unit":"px"},
+        {"id":"arcLength","type":"number","label":"Arc length","default":22,"min":5,"max":100,"step":1,"unit":"%"},
+        {"id":"glow","type":"number","label":"Glow","default":1,"min":0,"max":2,"step":0.05,"unit":"x"}
+      ]'
+      data-start="0"
+      data-duration="4.8"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="nb-clip" class="clip" data-start="0" data-duration="4.8" data-track-index="0">
+        <div id="nb-wrap" class="nb-wrap">
+          <svg
+            id="nb-svg"
+            class="nb-svg"
+            width="1120"
+            height="510"
+            viewBox="0 0 1120 510"
+            fill="none"
+            aria-hidden="true"
+          >
+            <defs>
+              <g id="nb-seg-a-glow"></g>
+              <g id="nb-seg-a-core"></g>
+              <g id="nb-seg-b-glow"></g>
+              <g id="nb-seg-b-core"></g>
+            </defs>
+            <g transform="translate(150,150)">
+              <!-- Wide bloom sits UNDER the panel so the halo reads outside the
+                   frame and the interior stays hardware-clean. -->
+              <g id="nb-bloom-under"></g>
+              <path id="nb-fill" d="" fill="rgba(9,11,15,0.78)" />
+              <path id="nb-rail" d="" fill="none" stroke-linejoin="round" />
+              <g id="nb-bloom-over"></g>
+            </g>
+          </svg>
+          <div id="nb-panel" class="nb-panel">
+            <span id="nb-name" class="nb-name" data-var-text="name">Dr. Maya Chen</span>
+            <span id="nb-role" class="nb-role" data-var-text="role">Host · Neuroscientist</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        var SVG_NS = "http://www.w3.org/2000/svg";
+        var W = 820; // traced rectangle width
+        var H = 210; // traced rectangle height
+        var DUR = 4.8;
+
+        var vars =
+          window.__hyperframes && window.__hyperframes.getVariables
+            ? window.__hyperframes.getVariables()
+            : {};
+
+        function num(v, fallback) {
+          var n = typeof v === "number" ? v : parseFloat(v);
+          return isFinite(n) ? n : fallback;
+        }
+
+        var accent = /^#[0-9a-fA-F]{6}$/.test(String(vars.accent))
+          ? String(vars.accent)
+          : "#cc9149";
+        var mode = vars.movement === "glide" ? "glide" : "step";
+        var speed = Math.max(0.05, num(vars.speed, 1.6)); // corners per second
+        var radius = Math.min(Math.min(W, H) / 2, Math.max(0, num(vars.cornerRadius, 26)));
+        var thickness = Math.max(0.5, num(vars.thickness, 5));
+        var arcFrac = Math.min(1, Math.max(0.02, num(vars.arcLength, 22) / 100));
+        var glow = Math.max(0, num(vars.glow, 1));
+
+        // Hot core: the accent lifted most of the way to white, the way a real
+        // filament reads brighter than its halo.
+        function towardWhite(hex, amount) {
+          var v = parseInt(hex.slice(1), 16);
+          var out = "#";
+          for (var s = 16; s >= 0; s -= 8) {
+            var c = (v >> s) & 255;
+            var m = Math.round(c + (255 - c) * amount);
+            out += (m < 16 ? "0" : "") + m.toString(16);
+          }
+          return out;
+        }
+        var hot = towardWhite(accent, 0.78);
+
+        // ---- geometry -------------------------------------------------------
+        // Rounded rect, clockwise, starting where the top edge leaves the
+        // top-left corner arc.
+        var r = radius;
+        var arc = "A " + r + " " + r + " 0 0 1 ";
+        var d = [
+          "M " + r + " 0",
+          "H " + (W - r),
+          arc + W + " " + r,
+          "V " + (H - r),
+          arc + (W - r) + " " + H,
+          "H " + r,
+          arc + "0 " + (H - r),
+          "V " + r,
+          arc + r + " 0",
+          "Z",
+        ].join(" ");
+
+        var fillEl = document.getElementById("nb-fill");
+        var railEl = document.getElementById("nb-rail");
+        fillEl.setAttribute("d", d);
+        railEl.setAttribute("d", d);
+        railEl.setAttribute("stroke", accent);
+        railEl.setAttribute("stroke-width", String(thickness));
+        railEl.setAttribute("stroke-opacity", "0.14");
+
+        // Analytic perimeter, then rescaled to whatever length the renderer
+        // actually measures for the path so dash distances line up exactly.
+        var SW = W - 2 * r; // straight run, horizontal
+        var SH = H - 2 * r; // straight run, vertical
+        var AC = (Math.PI * r) / 2; // one corner arc
+        var P_ANALYTIC = 2 * SW + 2 * SH + 4 * AC;
+        var P = railEl.getTotalLength() || P_ANALYTIC;
+        var K = P / P_ANALYTIC;
+
+        // Distance along the path of the MIDPOINT of each corner arc, so the
+        // light parks centred on the corner rather than skidding past it.
+        var CORNERS = [
+          (SW + AC / 2) * K, // top-right
+          (SW + SH + 1.5 * AC) * K, // bottom-right
+          (2 * SW + SH + 2.5 * AC) * K, // bottom-left
+          (2 * SW + 2 * SH + 3.5 * AC) * K, // top-left
+        ];
+
+        /** Absolute path distance of corner k, for any integer k (k may be
+         * negative or beyond one lap). Pure function of k — no accumulator. */
+        function cornerPos(k) {
+          var lap = Math.floor(k / 4);
+          var i = k - lap * 4;
+          return CORNERS[i] + lap * P;
+        }
+
+        // ---- easing ---------------------------------------------------------
+        // The step curve overshoots (y2 = 1.05); that overshoot IS the snap.
+        function cubicBezier(x1, y1, x2, y2) {
+          function axis(t, a, b) {
+            var u = 1 - t;
+            return 3 * u * u * t * a + 3 * u * t * t * b + t * t * t;
+          }
+          return function (x) {
+            if (x <= 0) return 0;
+            if (x >= 1) return 1;
+            var lo = 0;
+            var hi = 1;
+            var t = x;
+            // Fixed iteration count: same input, same output, every run.
+            for (var i = 0; i < 32; i++) {
+              t = (lo + hi) / 2;
+              if (axis(t, x1, x2) < x) lo = t;
+              else hi = t;
+            }
+            return axis(t, y1, y2);
+          };
+        }
+        var ease =
+          mode === "glide" ? cubicBezier(0.65, 0, 0.35, 1) : cubicBezier(0.72, 0.16, 0.18, 1.05);
+
+        var beat = 1 / speed; // seconds per corner hop
+
+        /** Head position (path distance) at time t. floor/frac of t/beat is the
+         * closed form of the reference's `stepT += dt` accumulator. */
+        function headAt(t) {
+          var total = t / beat;
+          var k = Math.floor(total);
+          var u = total - k;
+          var a = cornerPos(k);
+          var b = cornerPos(k + 1);
+          return a + (b - a) * ease(u);
+        }
+
+        // ---- arc construction ----------------------------------------------
+        // Each arc is a run of abutting dash segments whose opacity falls off
+        // behind the head; that ramp is the taper. Geometry lives once in
+        // <defs> and is shared by every bloom layer through <use>.
+        function buildSegments(groupId, count, falloff) {
+          var g = document.getElementById(groupId);
+          var segs = [];
+          for (var i = 0; i < count; i++) {
+            var p = document.createElementNS(SVG_NS, "path");
+            p.setAttribute("d", d);
+            p.setAttribute("fill", "none");
+            p.setAttribute("stroke-linecap", i === 0 ? "round" : "butt");
+            p.setAttribute("opacity", String(Math.pow(1 - i / count, falloff)));
+            g.appendChild(p);
+            segs.push(p);
+          }
+          return segs;
+        }
+
+        var GLOW_SEGS = 20;
+        var CORE_SEGS = 26;
+        var glowLen = arcFrac * P;
+        var coreLen = 0.34 * glowLen;
+
+        var arcs = [
+          {
+            offset: 0,
+            glow: buildSegments("nb-seg-a-glow", GLOW_SEGS, 2.6),
+            core: buildSegments("nb-seg-a-core", CORE_SEGS, 1.4),
+          },
+          {
+            // Half a lap behind: the diametrically opposite corner. The pairing
+            // is most of why the effect reads as designed rather than random.
+            offset: 2,
+            glow: buildSegments("nb-seg-b-glow", GLOW_SEGS, 2.6),
+            core: buildSegments("nb-seg-b-core", CORE_SEGS, 1.4),
+          },
+        ];
+
+        // Three stacked bloom layers (soft / medium / wide) plus the filament.
+        // `spread` widens the stroke before it is blurred — that pairing, not
+        // the blur alone, is what makes the halo read as emitted light.
+        var MAX_REACH = 36;
+        var LAYERS = [
+          { blur: 30, spread: 1, opacity: 0.18, stroke: accent, deep: true },
+          { blur: 15, spread: 0.6, opacity: 0.3, stroke: accent, deep: true },
+          { blur: 8, spread: 0.3, opacity: 0.5, stroke: accent, deep: true },
+          { blur: 4, spread: 0.05, opacity: 0.9, stroke: hot, core: true },
+          { blur: 0, spread: -0.012, opacity: 1, stroke: "#ffffff", core: true },
+        ];
+
+        var under = document.getElementById("nb-bloom-under");
+        var over = document.getElementById("nb-bloom-over");
+        ["a", "b"].forEach(function (tag) {
+          LAYERS.forEach(function (layer) {
+            var u = document.createElementNS(SVG_NS, "use");
+            u.setAttribute("href", "#nb-seg-" + tag + "-" + (layer.core ? "core" : "glow"));
+            u.setAttribute("stroke", layer.stroke);
+            u.setAttribute(
+              "stroke-width",
+              String(Math.max(0.5, thickness + 2 * layer.spread * MAX_REACH * glow)),
+            );
+            u.setAttribute("opacity", String(Math.min(1, layer.opacity * glow)));
+            if (layer.blur > 0) u.style.filter = "blur(" + layer.blur + "px)";
+            (layer.deep ? under : over).appendChild(u);
+          });
+        });
+
+        /** Lay a segment run out behind `head`. Every value derives from head. */
+        function layout(segs, head, length) {
+          var step = length / segs.length;
+          for (var i = 0; i < segs.length; i++) {
+            var start = head - (i + 1) * step;
+            start = ((start % P) + P) % P;
+            segs[i].setAttribute("stroke-dasharray", step + " " + (P - step));
+            segs[i].setAttribute("stroke-dashoffset", String(-start));
+          }
+        }
+
+        function render(t) {
+          for (var i = 0; i < arcs.length; i++) {
+            var head = headAt(t + arcs[i].offset * beat);
+            layout(arcs[i].glow, head, glowLen);
+            layout(arcs[i].core, head, coreLen);
+          }
+        }
+
+        // ---- timeline -------------------------------------------------------
+        var wrap = document.getElementById("nb-wrap");
+        var panel = document.getElementById("nb-panel");
+        var nameEl = document.getElementById("nb-name");
+        var roleEl = document.getElementById("nb-role");
+
+        var tl = gsap.timeline({ paused: true });
+
+        gsap.set(wrap, { opacity: 0, scale: 0.965, transformOrigin: "0% 100%" });
+        gsap.set(nameEl, { y: 18, opacity: 0 });
+        gsap.set(roleEl, { y: 12, opacity: 0 });
+
+        // The driver: linear, spans the whole clip, and every arc position is
+        // recomputed from its own time value. Seeking to frame N gives the same
+        // state as playing to frame N because nothing carries over.
+        var driver = { t: 0 };
+        tl.to(
+          driver,
+          {
+            t: DUR,
+            duration: DUR,
+            ease: "none",
+            onUpdate: function () {
+              render(driver.t);
+            },
+          },
+          0,
+        );
+
+        tl.to(wrap, { opacity: 1, scale: 1, duration: 0.55, ease: "power3.out" }, 0.08);
+        tl.to(nameEl, { y: 0, opacity: 1, duration: 0.5, ease: "power3.out" }, 0.3);
+        tl.to(roleEl, { y: 0, opacity: 1, duration: 0.5, ease: "power3.out" }, 0.44);
+
+        tl.to(roleEl, { y: -10, opacity: 0, duration: 0.3, ease: "power2.in" }, 4.24);
+        tl.to(nameEl, { y: -14, opacity: 0, duration: 0.32, ease: "power2.in" }, 4.3);
+        tl.to(wrap, { opacity: 0, scale: 0.985, duration: 0.36, ease: "power2.in" }, 4.36);
+        tl.set(panel, { visibility: "hidden" }, 4.76);
+
+        render(0);
+
+        window.__timelines["lt-neon-border"] = tl;
+      })();
+    </script>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add lt-neon-border" />
+
+That writes one file: `compositions/lt-neon-border.html`.
+
+## Add it to your video
+
+It runs for 4.8 seconds at 1920×1080. Paste this into your composition:
+
+```html index.html
+<div
+  data-composition-id="lt-neon-border"
+  data-composition-src="compositions/lt-neon-border.html"
+  data-start="0"
+  data-duration="4.8"
+  data-track-index="1"
+  data-width="1920"
+  data-height="1080"
+></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.
+
+## Change how it looks
+
+Set these CSS variables on the block:
+
+- `undefined` — Name. Defaults to `Dr. Maya Chen`.
+- `undefined` — Role. Defaults to `Host · Neuroscientist`.
+- `undefined` — Accent. Defaults to `#cc9149`.
+- `undefined` — Movement. Defaults to `step`. Options: `step`, `glide`.
+- `undefined` — Speed. Defaults to `1.6`.
+- `undefined` — Corner radius. Defaults to `26`.
+- `undefined` — Thickness. Defaults to `5`.
+- `undefined` — Arc length. Defaults to `22`.
+- `undefined` — Glow. Defaults to `1`.
+
+{/* hf:generated-footer */}
+
+Tagged `lower-third` `glow` `loop` `video-primitive`.
+
+## 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/lt-side-rule.mdx b/docs/catalog/blocks/lt-side-rule.mdx
index 673f3fcbdb..35ac02960c 100644
--- a/docs/catalog/blocks/lt-side-rule.mdx
+++ b/docs/catalog/blocks/lt-side-rule.mdx
@@ -3,34 +3,145 @@ title: "Lower Third — Side Rule"
 description: "Cardless lower third with a vertical accent bar; condensed display name + mono role, text-shadowed for footage"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-side-rule.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-side-rule.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/lt-side-rule.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Lower Third — Side Rule preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add lt-side-rule
-```
+<InstallCommand command="npx hyperframes add lt-side-rule" />
 
 That writes one file: `compositions/lt-side-rule.html`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`lt-side-rule.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      body {
+        width: 1920px;
+        height: 1080px;
+      }
+
+      #root .lt {
+        position: absolute;
+        left: 130px;
+        bottom: 120px;
+        display: flex;
+        align-items: stretch;
+        gap: 26px;
+      }
+      #root .lt-bar {
+        width: 8px;
+        background: #46e5b7;
+        border-radius: 4px;
+        transform-origin: 50% 0%;
+        flex-shrink: 0;
+      }
+      #root .lt-text {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        gap: 12px;
+      }
+      #root .lt-name {
+        font-family: "League Gothic", sans-serif;
+        font-size: 92px;
+        font-weight: 400;
+        color: #ffffff;
+        line-height: 0.86;
+        letter-spacing: 0.01em;
+        text-transform: uppercase;
+        white-space: nowrap;
+        text-shadow: 0 2px 22px rgba(0, 0, 0, 0.5);
+      }
+      #root .lt-role {
+        font-family: "JetBrains Mono", monospace;
+        font-size: 26px;
+        font-weight: 400;
+        color: #e7eaf0;
+        line-height: 1.2;
+        letter-spacing: 0.04em;
+        white-space: nowrap;
+        text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="lt-side-rule"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="4.8"
+    >
+      <div id="lt-clip" class="clip" data-start="0" data-duration="4.8" data-track-index="0">
+        <div id="lt" class="lt">
+          <div id="lt-bar" class="lt-bar"></div>
+          <div class="lt-text">
+            <div id="lt-name" class="lt-name">Dr. Maya Chen</div>
+            <div id="lt-role" class="lt-role">Host · Neuroscientist</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+
+      var wrap = document.getElementById("lt");
+      var bar = document.getElementById("lt-bar");
+      var nameEl = document.getElementById("lt-name");
+      var role = document.getElementById("lt-role");
 
-It runs for 4.8 seconds at 1920×1080. Paste this into your composition:
+      // Vertical accent bar draws top→down, name and role slide in from the left.
+      gsap.set(bar, { scaleY: 0 });
+      gsap.set(nameEl, { x: -24, opacity: 0 });
+      gsap.set(role, { x: -24, opacity: 0 });
 
-```html index.html
-<div
-  data-composition-id="lt-side-rule"
-  data-composition-src="compositions/lt-side-rule.html"
-  data-start="0"
-  data-duration="4.8"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+      tl.to(bar, { scaleY: 1, duration: 0.5, ease: "power3.out" }, 0.1);
+      tl.to(nameEl, { x: 0, opacity: 1, duration: 0.5, ease: "power3.out" }, 0.26);
+      tl.to(role, { x: 0, opacity: 1, duration: 0.5, ease: "power3.out" }, 0.38);
+
+      // Exit: bar retracts, text lifts, hard kill.
+      tl.to(role, { opacity: 0, duration: 0.3, ease: "power2.in" }, 4.25);
+      tl.to(nameEl, { y: -14, opacity: 0, duration: 0.32, ease: "power2.in" }, 4.3);
+      tl.to(bar, { scaleY: 0, duration: 0.32, ease: "power2.in" }, 4.32);
+      tl.set(wrap, { visibility: "hidden" }, 4.75);
+
+      window.__timelines["lt-side-rule"] = tl;
+    </script>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="lt-side-rule" data-composition-src="compositions/lt-side-rule.html" data-start="0" data-duration="4.8" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/lt-soft-pill.mdx b/docs/catalog/blocks/lt-soft-pill.mdx
index eb42446e5d..d9e70d67ee 100644
--- a/docs/catalog/blocks/lt-soft-pill.mdx
+++ b/docs/catalog/blocks/lt-soft-pill.mdx
@@ -3,34 +3,150 @@ title: "Lower Third — Soft Pill"
 description: "Rounded white pill lower third for podcasts/interviews: status dot, name + role, scale-pop entrance"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-soft-pill.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-soft-pill.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/lt-soft-pill.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Lower Third — Soft Pill preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add lt-soft-pill
-```
+<InstallCommand command="npx hyperframes add lt-soft-pill" />
 
 That writes one file: `compositions/lt-soft-pill.html`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`lt-soft-pill.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      body {
+        width: 1920px;
+        height: 1080px;
+        font-family: "Montserrat", sans-serif;
+      }
+
+      #root .lt {
+        position: absolute;
+        left: 120px;
+        bottom: 120px;
+      }
+      #root .lt-pill {
+        display: flex;
+        align-items: center;
+        gap: 22px;
+        background: #ffffff;
+        border-radius: 999px;
+        padding: 20px 40px 20px 26px;
+        box-shadow: 0 16px 46px rgba(15, 17, 21, 0.2);
+        transform-origin: 0% 100%;
+        will-change: transform;
+      }
+      #root .lt-dot {
+        width: 18px;
+        height: 18px;
+        border-radius: 50%;
+        background: #ff5a36;
+        flex-shrink: 0;
+      }
+      #root .lt-text {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+      }
+      #root .lt-name {
+        font-size: 46px;
+        font-weight: 700;
+        color: #0f1115;
+        line-height: 1.04;
+        letter-spacing: -0.015em;
+        white-space: nowrap;
+      }
+      #root .lt-role {
+        font-size: 25px;
+        font-weight: 400;
+        color: #5a6170;
+        line-height: 1.2;
+        letter-spacing: 0.01em;
+        white-space: nowrap;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="lt-soft-pill"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="4.8"
+    >
+      <div id="lt-clip" class="clip" data-start="0" data-duration="4.8" data-track-index="0">
+        <div id="lt" class="lt">
+          <div id="lt-pill" class="lt-pill">
+            <div id="lt-dot" class="lt-dot"></div>
+            <div class="lt-text">
+              <div id="lt-name" class="lt-name">Dr. Maya Chen</div>
+              <div id="lt-role" class="lt-role">Host · Neuroscientist</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+
+      var wrap = document.getElementById("lt");
+      var pill = document.getElementById("lt-pill");
+      var dot = document.getElementById("lt-dot");
+      var nameEl = document.getElementById("lt-name");
+      var role = document.getElementById("lt-role");
 
-It runs for 4.8 seconds at 1920×1080. Paste this into your composition:
+      // Pill scales up from the lower-left anchor, dot pulses in, text settles.
+      gsap.set(pill, { scale: 0.88, y: 18, opacity: 0 });
+      gsap.set(dot, { scale: 0 });
+      gsap.set([nameEl, role], { opacity: 0, x: -10 });
 
-```html index.html
-<div
-  data-composition-id="lt-soft-pill"
-  data-composition-src="compositions/lt-soft-pill.html"
-  data-start="0"
-  data-duration="4.8"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+      tl.to(pill, { scale: 1, y: 0, opacity: 1, duration: 0.55, ease: "back.out(1.7)" }, 0.1);
+      tl.to(dot, { scale: 1, duration: 0.4, ease: "back.out(3)" }, 0.4);
+      tl.to(nameEl, { opacity: 1, x: 0, duration: 0.45, ease: "power3.out" }, 0.42);
+      tl.to(role, { opacity: 1, x: 0, duration: 0.45, ease: "power3.out" }, 0.5);
+
+      // Exit: settle down + hard kill.
+      tl.to(pill, { scale: 0.94, y: 14, opacity: 0, duration: 0.35, ease: "power2.in" }, 4.3);
+      tl.set(wrap, { visibility: "hidden" }, 4.75);
+
+      window.__timelines["lt-soft-pill"] = tl;
+    </script>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="lt-soft-pill" data-composition-src="compositions/lt-soft-pill.html" data-start="0" data-duration="4.8" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/lt-stack-bars.mdx b/docs/catalog/blocks/lt-stack-bars.mdx
index 1067d2be7b..f5ad5eeea6 100644
--- a/docs/catalog/blocks/lt-stack-bars.mdx
+++ b/docs/catalog/blocks/lt-stack-bars.mdx
@@ -3,34 +3,140 @@ title: "Lower Third — Stack Bars"
 description: "Two stacked bars: a dark name bar wipes from the left, an accent role bar wipes from the right"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-stack-bars.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-stack-bars.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/lt-stack-bars.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Lower Third — Stack Bars preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add lt-stack-bars
-```
+<InstallCommand command="npx hyperframes add lt-stack-bars" />
 
 That writes one file: `compositions/lt-stack-bars.html`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`lt-stack-bars.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      body {
+        width: 1920px;
+        height: 1080px;
+      }
+
+      #root .lt {
+        position: absolute;
+        left: 120px;
+        bottom: 116px;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 8px;
+      }
+      #root .lt-namebar {
+        background: #141518;
+        padding: 14px 30px;
+        will-change: clip-path;
+      }
+      #root .lt-name {
+        font-family: "Archivo Black", sans-serif;
+        font-size: 52px;
+        font-weight: 400;
+        color: #ffffff;
+        line-height: 1;
+        letter-spacing: -0.015em;
+        text-transform: uppercase;
+        white-space: nowrap;
+      }
+      #root .lt-rolebar {
+        background: #ffd23f;
+        padding: 9px 22px;
+        margin-left: 14px;
+        will-change: clip-path;
+      }
+      #root .lt-role {
+        font-family: "Space Mono", monospace;
+        font-size: 23px;
+        font-weight: 700;
+        color: #141518;
+        line-height: 1;
+        letter-spacing: 0.06em;
+        text-transform: uppercase;
+        white-space: nowrap;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="lt-stack-bars"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="4.8"
+    >
+      <div id="lt-clip" class="clip" data-start="0" data-duration="4.8" data-track-index="0">
+        <div id="lt" class="lt">
+          <div id="lt-namebar" class="lt-namebar">
+            <div id="lt-name" class="lt-name">Maya Chen</div>
+          </div>
+          <div id="lt-rolebar" class="lt-rolebar">
+            <div id="lt-role" class="lt-role">Host · Neuroscientist</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+
+      var wrap = document.getElementById("lt");
+      var namebar = document.getElementById("lt-namebar");
+      var rolebar = document.getElementById("lt-rolebar");
 
-It runs for 4.8 seconds at 1920×1080. Paste this into your composition:
+      // Name bar wipes in from the left; role bar wipes in from the right (opposing).
+      gsap.set(namebar, { clipPath: "inset(0 100% 0 0)" });
+      gsap.set(rolebar, { clipPath: "inset(0 0 0 100%)" });
 
-```html index.html
-<div
-  data-composition-id="lt-stack-bars"
-  data-composition-src="compositions/lt-stack-bars.html"
-  data-start="0"
-  data-duration="4.8"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+      tl.to(namebar, { clipPath: "inset(0 0% 0 0)", duration: 0.5, ease: "power4.out" }, 0.1);
+      tl.to(rolebar, { clipPath: "inset(0 0% 0 0%)", duration: 0.5, ease: "power4.out" }, 0.34);
+
+      // Exit: both wipe back out, hard kill.
+      tl.to(rolebar, { clipPath: "inset(0 0 0 100%)", duration: 0.32, ease: "power3.in" }, 4.25);
+      tl.to(namebar, { clipPath: "inset(0 100% 0 0)", duration: 0.36, ease: "power3.in" }, 4.32);
+      tl.set(wrap, { visibility: "hidden" }, 4.75);
+
+      window.__timelines["lt-stack-bars"] = tl;
+    </script>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="lt-stack-bars" data-composition-src="compositions/lt-stack-bars.html" data-start="0" data-duration="4.8" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/macos-notification.mdx b/docs/catalog/blocks/macos-notification.mdx
index fd5fa2810c..6d1bad1137 100644
--- a/docs/catalog/blocks/macos-notification.mdx
+++ b/docs/catalog/blocks/macos-notification.mdx
@@ -3,34 +3,233 @@ title: "macOS Notification"
 description: "Animated macOS-style notification banner with app icon and message"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/macos-notification.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/macos-notification.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/macos-notification.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="macOS Notification preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add macos-notification
-```
+<InstallCommand command="npx hyperframes add macos-notification" />
 
 That writes one file: `compositions/macos-notification.html`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`macos-notification.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=block"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      body {
+        width: 1920px;
+        height: 1080px;
+        font-family: "Inter", sans-serif;
+      }
+
+      [data-composition-id="macos-notification"] .notification-card {
+        position: absolute;
+        top: 24px;
+        right: 24px;
+        width: 380px;
+        background: rgba(30, 30, 30, 0.82);
+        backdrop-filter: blur(40px);
+        -webkit-backdrop-filter: blur(40px);
+        border-radius: 16px;
+        padding: 16px;
+        box-shadow:
+          0 8px 32px rgba(0, 0, 0, 0.4),
+          inset 0 0 0 0.5px rgba(255, 255, 255, 0.1);
+        display: flex;
+        gap: 12px;
+        align-items: flex-start;
+      }
+
+      [data-composition-id="macos-notification"] .app-icon {
+        width: 36px;
+        height: 36px;
+        border-radius: 8px;
+        flex-shrink: 0;
+        overflow: hidden;
+      }
+
+      [data-composition-id="macos-notification"] .app-icon svg {
+        width: 36px;
+        height: 36px;
+        display: block;
+      }
+
+      [data-composition-id="macos-notification"] .notification-content {
+        flex: 1;
+        min-width: 0;
+      }
+
+      [data-composition-id="macos-notification"] .notification-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 2px;
+      }
+
+      [data-composition-id="macos-notification"] .app-name {
+        font-size: 13px;
+        font-weight: 600;
+        color: rgba(255, 255, 255, 0.5);
+        text-transform: uppercase;
+        letter-spacing: 0.02em;
+      }
+
+      [data-composition-id="macos-notification"] .time-label {
+        font-size: 13px;
+        font-weight: 400;
+        color: rgba(255, 255, 255, 0.35);
+      }
 
-It runs for 5 seconds at 1920×1080. Paste this into your composition:
+      [data-composition-id="macos-notification"] .notification-title {
+        font-size: 15px;
+        font-weight: 600;
+        color: #ffffff;
+        line-height: 1.3;
+        margin-bottom: 2px;
+      }
 
-```html index.html
-<div
-  data-composition-id="macos-notification"
-  data-composition-src="compositions/macos-notification.html"
-  data-start="0"
-  data-duration="5"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+      [data-composition-id="macos-notification"] .notification-body {
+        font-size: 13px;
+        font-weight: 400;
+        color: rgba(255, 255, 255, 0.6);
+        line-height: 1.35;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="macos-notification"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="5"
+    >
+      <div
+        id="notification"
+        class="clip notification-card"
+        data-start="0"
+        data-duration="5"
+        data-track-index="0"
+      >
+        <div class="app-icon">
+          <svg viewBox="0 0 36 36" fill="none">
+            <defs>
+              <linearGradient
+                id="icon-grad"
+                x1="0"
+                y1="0"
+                x2="36"
+                y2="36"
+                gradientUnits="userSpaceOnUse"
+              >
+                <stop offset="0%" stop-color="#6366f1" />
+                <stop offset="100%" stop-color="#8b5cf6" />
+              </linearGradient>
+            </defs>
+            <rect width="36" height="36" rx="8" fill="url(#icon-grad)" />
+            <text
+              x="18"
+              y="23"
+              text-anchor="middle"
+              font-family="Inter, sans-serif"
+              font-size="14"
+              font-weight="700"
+              fill="#fff"
+            >
+              HF
+            </text>
+          </svg>
+        </div>
+        <div class="notification-content">
+          <div class="notification-header">
+            <span class="app-name">HyperFrames</span>
+            <span class="time-label">now</span>
+          </div>
+          <div class="notification-title">Prompt to replace this title</div>
+          <div class="notification-body">
+            Prompt to change this body text, the app icon, and the app name to match your content.
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      var tl = gsap.timeline({ paused: true });
+      var notification = document.getElementById("notification");
+
+      // Start off-screen to the right
+      gsap.set(notification, { x: 420, opacity: 0 });
+
+      // Slide in from right
+      tl.to(
+        notification,
+        {
+          x: 0,
+          opacity: 1,
+          duration: 0.5,
+          ease: "power3.out",
+        },
+        0.2,
+      );
+
+      // Slide out to right
+      tl.to(
+        notification,
+        {
+          x: 420,
+          opacity: 0,
+          duration: 0.3,
+          ease: "power3.in",
+        },
+        4.2,
+      );
+
+      window.__timelines["macos-notification"] = tl;
+    </script>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="macos-notification" data-composition-src="compositions/macos-notification.html" data-start="0" data-duration="5" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/macos-tahoe-liquid-glass.mdx b/docs/catalog/blocks/macos-tahoe-liquid-glass.mdx
index 284995acaf..092ee8af91 100644
--- a/docs/catalog/blocks/macos-tahoe-liquid-glass.mdx
+++ b/docs/catalog/blocks/macos-tahoe-liquid-glass.mdx
@@ -3,40 +3,1499 @@ title: "macOS Tahoe Liquid Glass Desktop"
 description: "3D MacBook with a macOS Tahoe-style desktop, glass menu bar, Finder window, dock, and cinematic device camera move."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/macos-tahoe-liquid-glass.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/macos-tahoe-liquid-glass.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/macos-tahoe-liquid-glass.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="macOS Tahoe Liquid Glass Desktop preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add macos-tahoe-liquid-glass
-```
+<InstallCommand command="npx hyperframes add macos-tahoe-liquid-glass" />
 
 That writes `compositions/macos-tahoe-liquid-glass.html`, plus 18 supporting files under `models/`, `assets/wallpapers/`, and `assets/icons/`.
 
-<Warning>
+<Danger>
   Live preview needs the `chrome://flags/#canvas-draw-element` flag switched on.
-  Rendering from the CLI switches it on for you. [How it
-  works](/guides/html-in-canvas)
-</Warning>
-
-## Add it to your video
-
-It runs for 15 seconds at 1920×1080. Paste this into your composition:
-
-```html index.html
-<div
-  data-composition-id="macos-tahoe-liquid-glass"
-  data-composition-src="compositions/macos-tahoe-liquid-glass.html"
-  data-start="0"
-  data-duration="15"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+  Without it this item's screen renders black. Rendering from the CLI switches
+  it on for you. [How it works](/guides/html-in-canvas)
+</Danger>
+
+## Source
+
+<Accordion title={`macos-tahoe-liquid-glass.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Devices Canvas — HTML-in-Canvas API Showcase</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/loaders/DRACOLoader.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/loaders/GLTFLoader.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #050508;
+        overflow: hidden;
+      }
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #050508;
+      }
+      .tahoe-desktop {
+        position: relative;
+        width: 1440px;
+        height: 900px;
+        overflow: hidden;
+        isolation: isolate;
+        background-image:
+          linear-gradient(
+            180deg,
+            rgba(7, 18, 34, 0.08),
+            rgba(7, 18, 34, 0.02) 44%,
+            rgba(7, 18, 34, 0.22)
+          ),
+          url("assets/wallpapers/golden-gate-bridge-san-francisco-5k-0g.jpg");
+        background-size: cover;
+        background-position: center center;
+        color: #fff;
+      }
+      .tahoe-desktop::before {
+        content: "";
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        z-index: 0;
+        background:
+          radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.2), transparent 28%),
+          linear-gradient(90deg, rgba(0, 0, 0, 0.1), transparent 32%, rgba(255, 255, 255, 0.08));
+      }
+      .tahoe-menu-bar {
+        position: relative;
+        z-index: 6;
+        display: flex;
+        align-items: center;
+        gap: 14px;
+        height: 28px;
+        padding: 5px 14px;
+        background: rgba(20, 47, 83, 0.28);
+        border-bottom: 1px solid rgba(255, 255, 255, 0.22);
+        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38);
+        font-size: 10px;
+        font-weight: 600;
+        color: rgba(255, 255, 255, 0.94);
+        backdrop-filter: blur(30px) saturate(1.45);
+      }
+      .tahoe-stage {
+        position: relative;
+        z-index: 5;
+        height: 690px;
+      }
+      .tahoe-window {
+        position: absolute;
+        left: 106px;
+        top: 226px;
+        width: 610px;
+        height: 360px;
+        z-index: 5;
+        overflow: hidden;
+        border: 1px solid rgba(255, 255, 255, 0.34);
+        border-radius: 18px;
+        background: rgba(246, 252, 255, 0.7);
+        color: rgba(18, 40, 66, 0.92);
+        backdrop-filter: blur(26px) saturate(1.3);
+        box-shadow:
+          0 22px 58px rgba(6, 38, 82, 0.22),
+          inset 0 1px 0 rgba(255, 255, 255, 0.62);
+      }
+      .tahoe-window-titlebar {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        height: 38px;
+        padding: 9px 14px;
+        background: rgba(255, 255, 255, 0.34);
+        border-bottom: 1px solid rgba(255, 255, 255, 0.28);
+      }
+      .tahoe-traffic-light {
+        display: inline-block;
+        width: 12px;
+        height: 12px;
+        border-radius: 50%;
+      }
+      .tahoe-finder-body {
+        position: relative;
+        display: flex;
+        height: 322px;
+      }
+      .tahoe-sidebar {
+        width: 158px;
+        padding: 12px;
+        border-right: 1px solid rgba(255, 255, 255, 0.26);
+        background: rgba(255, 255, 255, 0.2);
+        font-size: 10px;
+      }
+      .tahoe-sidebar-row {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 6px 8px;
+        border-radius: 8px;
+        color: rgba(10, 35, 64, 0.78);
+      }
+      .tahoe-sidebar-row.active {
+        background: rgba(52, 147, 236, 0.26);
+        color: rgba(4, 50, 110, 0.98);
+        font-weight: 700;
+      }
+      .tahoe-sidebar-icon {
+        width: 16px;
+        height: 16px;
+        object-fit: cover;
+        border-radius: 5px;
+        flex: 0 0 auto;
+      }
+      .tahoe-file-grid {
+        flex: 1;
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        gap: 10px 8px;
+        align-content: start;
+        padding: 18px 18px;
+      }
+      .tahoe-file {
+        padding: 8px;
+        text-align: center;
+      }
+      .tahoe-folder-icon,
+      .tahoe-document-icon {
+        position: relative;
+        width: 54px;
+        height: 42px;
+        margin: 0 auto 8px;
+        border-radius: 10px;
+        background: linear-gradient(180deg, #9fe1ff 0%, #258dff 100%);
+        box-shadow:
+          inset 0 1px 0 rgba(255, 255, 255, 0.5),
+          0 10px 20px rgba(0, 0, 0, 0.24);
+      }
+      .tahoe-folder-icon::before {
+        content: "";
+        position: absolute;
+        top: -7px;
+        left: 6px;
+        width: 26px;
+        height: 12px;
+        border-radius: 7px 7px 2px 2px;
+        background: linear-gradient(180deg, #9ad8ff 0%, #3ca2ff 100%);
+      }
+      .tahoe-document-icon {
+        width: 40px;
+        height: 52px;
+        border-radius: 8px;
+        background: linear-gradient(180deg, #ffffff 0%, #cfd8e6 100%);
+      }
+      .tahoe-document-icon::after {
+        content: "";
+        position: absolute;
+        top: 9px;
+        left: 9px;
+        width: 22px;
+        height: 3px;
+        border-radius: 2px;
+        background: #7b8796;
+        box-shadow:
+          0 9px 0 #9aa5b2,
+          0 18px 0 #b2bcc8;
+      }
+      .tahoe-file-label {
+        color: rgba(7, 31, 58, 0.94);
+        font-size: 10px;
+        font-weight: 700;
+        line-height: 1.15;
+        text-shadow: 0 1px 4px rgba(255, 255, 255, 0.6);
+      }
+      .tahoe-widgets {
+        position: absolute;
+        left: 28px;
+        top: 44px;
+        z-index: 5;
+        display: grid;
+        grid-template-columns: 92px 92px;
+        gap: 8px;
+      }
+      .tahoe-widget {
+        overflow: hidden;
+        border: 1px solid rgba(255, 255, 255, 0.42);
+        border-radius: 18px;
+        background: rgba(247, 253, 255, 0.72);
+        color: rgba(14, 45, 76, 0.9);
+        backdrop-filter: blur(26px) saturate(1.45);
+        box-shadow:
+          0 18px 34px rgba(13, 61, 115, 0.2),
+          inset 0 1px 0 rgba(255, 255, 255, 0.72);
+      }
+      .tahoe-calendar-widget {
+        width: 92px;
+        height: 110px;
+        padding: 9px;
+      }
+      .tahoe-weather-widget {
+        width: 92px;
+        height: 110px;
+        padding: 9px;
+        background: linear-gradient(160deg, rgba(30, 119, 238, 0.72), rgba(255, 255, 255, 0.44));
+        color: #fff;
+      }
+      .tahoe-media-widget {
+        grid-column: 1 / span 2;
+        width: 192px;
+        height: 96px;
+        background:
+          linear-gradient(140deg, rgba(13, 16, 22, 0.12), rgba(255, 255, 255, 0.24)),
+          radial-gradient(circle at 18% 20%, #ffb88b, transparent 32%),
+          radial-gradient(circle at 76% 28%, #ed2f7a, transparent 34%),
+          linear-gradient(135deg, #451a03, #0f172a);
+      }
+      .tahoe-calendar-days {
+        display: grid;
+        grid-template-columns: repeat(7, 1fr);
+        gap: 2px;
+        margin-top: 7px;
+        font-size: 5.5px;
+        font-weight: 800;
+        text-align: center;
+        color: rgba(20, 51, 83, 0.66);
+      }
+      .tahoe-glass-panel {
+        border: 1px solid rgba(255, 255, 255, 0.22);
+        border-radius: 24px;
+        background:
+          linear-gradient(135deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.1)),
+          rgba(10, 14, 24, 0.78);
+        box-shadow:
+          inset 0 1px 0 rgba(255, 255, 255, 0.32),
+          0 20px 54px rgba(0, 0, 0, 0.34);
+      }
+      .tahoe-notification {
+        position: absolute;
+        z-index: 7;
+        top: 58px;
+        right: 36px;
+        width: 374px;
+        display: flex;
+        gap: 12px;
+        min-height: 86px;
+        padding: 14px 16px;
+        border: 1px solid rgba(255, 255, 255, 0.42);
+        border-radius: 28px;
+        background:
+          linear-gradient(
+            140deg,
+            rgba(255, 255, 255, 0.62),
+            rgba(255, 255, 255, 0.26) 48%,
+            rgba(255, 255, 255, 0.42)
+          ),
+          rgba(233, 249, 255, 0.56);
+        color: #fff;
+        backdrop-filter: blur(30px) saturate(1.55);
+        box-shadow:
+          0 22px 46px rgba(4, 55, 112, 0.25),
+          inset 0 1px 0 rgba(255, 255, 255, 0.72),
+          inset 0 -18px 38px rgba(255, 255, 255, 0.1);
+      }
+      .tahoe-notification::before {
+        content: "";
+        position: absolute;
+        inset: 1px;
+        border-radius: inherit;
+        pointer-events: none;
+        background: linear-gradient(
+          120deg,
+          rgba(255, 255, 255, 0.58),
+          transparent 34%,
+          rgba(255, 255, 255, 0.22)
+        );
+        mix-blend-mode: screen;
+        opacity: 0.5;
+      }
+      .tahoe-notification img {
+        position: relative;
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+        object-fit: cover;
+        flex: 0 0 auto;
+      }
+      .tahoe-panel-title {
+        position: relative;
+        color: rgba(8, 30, 58, 0.98);
+        font-size: 17px;
+        font-weight: 800;
+        line-height: 1.1;
+        text-shadow: 0 1px 6px rgba(255, 255, 255, 0.56);
+      }
+      .tahoe-panel-subtitle {
+        position: relative;
+        margin-top: 4px;
+        color: rgba(9, 36, 66, 0.86);
+        font-size: 12.5px;
+        font-weight: 700;
+        line-height: 1.35;
+        text-shadow: 0 1px 6px rgba(255, 255, 255, 0.48);
+      }
+      .tahoe-control-center {
+        padding: 14px;
+      }
+      .tahoe-toggle-grid {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 10px;
+        margin-top: 12px;
+      }
+      .tahoe-toggle {
+        min-height: 48px;
+        padding: 9px 10px;
+        border-radius: 16px;
+        background: rgba(255, 255, 255, 0.16);
+        color: rgba(255, 255, 255, 0.9);
+        font-size: 12px;
+        font-weight: 760;
+        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
+      }
+      .tahoe-toggle.active {
+        background: linear-gradient(135deg, rgba(0, 122, 255, 0.9), rgba(52, 211, 153, 0.68));
+      }
+      .tahoe-slider {
+        height: 12px;
+        margin-top: 12px;
+        border-radius: 999px;
+        background: rgba(255, 255, 255, 0.18);
+        overflow: hidden;
+      }
+      .tahoe-slider::before {
+        content: "";
+        display: block;
+        width: 72%;
+        height: 100%;
+        border-radius: inherit;
+        background: linear-gradient(90deg, #a7f3d0, #38bdf8, #c084fc);
+      }
+      .tahoe-media {
+        padding: 14px;
+      }
+      .tahoe-media-row {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        margin-top: 12px;
+      }
+      .tahoe-album {
+        width: 48px;
+        height: 48px;
+        border-radius: 14px;
+        background: linear-gradient(135deg, #ec4899, #f59e0b 48%, #38bdf8);
+        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
+      }
+      .tahoe-dock {
+        position: absolute;
+        z-index: 6;
+        left: 50%;
+        bottom: 24px;
+        width: auto;
+        display: flex;
+        align-items: flex-end;
+        gap: 7px;
+        padding: 8px 12px;
+        border: 1px solid rgba(255, 255, 255, 0.42);
+        border-radius: 22px;
+        background: rgba(255, 255, 255, 0.52);
+        transform: translateX(-50%);
+        backdrop-filter: blur(28px) saturate(1.45);
+        box-shadow:
+          0 22px 44px rgba(6, 38, 82, 0.24),
+          inset 0 1px 0 rgba(255, 255, 255, 0.72);
+      }
+      .tahoe-dock-icon {
+        display: block;
+        width: 46px;
+        height: 46px;
+        object-fit: cover;
+        border-radius: 13px;
+        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="macos-tahoe-liquid-glass"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="15"
+      data-root="true"
+    >
+      <!-- LIVE HTML captured every frame via drawElementImage  -->
+      <canvas
+        id="cap-phone"
+        layoutsubtree
+        aria-hidden="true"
+        width="390"
+        height="844"
+        style="
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 390px;
+          height: 844px;
+          z-index: -1;
+          pointer-events: none;
+        "
+      >
+        <div
+          id="phone-html"
+          style="
+            width: 390px;
+            height: 844px;
+            overflow: hidden;
+            font-family: Inter, system-ui, sans-serif;
+            color: #e2e8f0;
+          "
+        >
+          <div
+            id="phone-scroll"
+            style="background: linear-gradient(180deg, #0a0a12, #0f0f1a); transform: translateY(0)"
+          >
+            <div
+              style="
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                padding: 14px 18px;
+                border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+              "
+            >
+              <span
+                style="
+                  font-weight: 800;
+                  font-size: 14px;
+                  background: linear-gradient(135deg, #34d399, #3b82f6);
+                  -webkit-background-clip: text;
+                  -webkit-text-fill-color: transparent;
+                "
+                >HyperFrames</span
+              ><span
+                style="
+                  font-size: 10px;
+                  font-weight: 600;
+                  padding: 5px 12px;
+                  border-radius: 6px;
+                  background: #10b981;
+                  color: #fff;
+                "
+                >Log in</span
+              >
+            </div>
+            <div
+              id="phone-title"
+              style="
+                font-size: 26px;
+                font-weight: 800;
+                letter-spacing: -0.5px;
+                padding: 18px 18px 6px;
+                line-height: 1.1;
+                opacity: 0;
+              "
+            >
+              Community Playground
+            </div>
+            <div style="font-size: 11px; color: rgba(255, 255, 255, 0.4); padding: 0 18px 14px">
+              Made with HyperFrames
+            </div>
+            <div style="display: flex; gap: 6px; padding: 0 18px 14px">
+              <span
+                style="
+                  font-size: 9px;
+                  font-weight: 600;
+                  padding: 4px 10px;
+                  border-radius: 16px;
+                  background: rgba(16, 185, 129, 0.15);
+                  color: #10b981;
+                  border: 1px solid rgba(16, 185, 129, 0.3);
+                "
+                >Examples</span
+              ><span
+                id="phone-count"
+                style="
+                  font-size: 9px;
+                  font-weight: 600;
+                  padding: 4px 10px;
+                  border-radius: 16px;
+                  border: 1px solid rgba(255, 255, 255, 0.1);
+                  color: rgba(255, 255, 255, 0.5);
+                "
+                >Catalog 0</span
+              >
+            </div>
+            <div id="phone-cards" style="display: grid; gap: 10px; padding: 0 18px 18px"></div>
+          </div>
+        </div>
+      </canvas>
+
+      <img
+        src="assets/wallpapers/golden-gate-bridge-san-francisco-5k-0g.jpg"
+        alt=""
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      />
+
+      <canvas
+        id="cap-laptop"
+        layoutsubtree
+        aria-hidden="true"
+        width="1440"
+        height="900"
+        style="
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1440px;
+          height: 900px;
+          z-index: -1;
+          pointer-events: none;
+        "
+      >
+        <div
+          id="laptop-html"
+          style="
+            width: 1440px;
+            height: 900px;
+            overflow: hidden;
+            font-family: Inter, system-ui, sans-serif;
+            color: #e2e8f0;
+          "
+        >
+          <div id="laptop-scroll" class="tahoe-desktop" style="transform: translateY(0)">
+            <div id="laptop-title" style="display: none"></div>
+            <span id="laptop-count" style="display: none"></span>
+            <div id="laptop-cards" style="display: none"></div>
+            <!-- Menu Bar -->
+            <div class="tahoe-menu-bar">
+              <span style="font-weight: 800; font-size: 15px">&#63743;</span>
+              <span style="font-weight: 600">Finder</span>
+              <span>File</span><span>Edit</span><span>View</span><span>Go</span><span>Window</span
+              ><span>Help</span>
+              <div style="flex: 1"></div>
+              <span style="font-size: 10px">CC</span>
+              <span style="font-size: 10px">Search</span>
+              <span style="font-size: 10px">92%</span>
+              <span style="font-size: 10px">Wi-Fi</span>
+              <span style="font-size: 10px; font-variant-numeric: tabular-nums"
+                >Tue Apr 1 9:41 AM</span
+              >
+            </div>
+            <div class="tahoe-widgets">
+              <div class="tahoe-widget tahoe-calendar-widget">
+                <div style="font-size: 6px; font-weight: 900; color: rgba(249, 66, 58, 0.84)">
+                  APRIL
+                </div>
+                <div class="tahoe-calendar-days">
+                  <span>S</span><span>M</span><span>T</span><span>W</span><span>T</span
+                  ><span>F</span><span>S</span> <span></span><span></span
+                  ><span style="color: #fff; background: #f0423a; border-radius: 99px">1</span
+                  ><span>2</span><span>3</span><span>4</span><span>5</span> <span>6</span
+                  ><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span
+                  ><span>12</span> <span>13</span><span>14</span><span>15</span><span>16</span
+                  ><span>17</span><span>18</span><span>19</span> <span>20</span><span>21</span
+                  ><span>22</span><span>23</span><span>24</span><span>25</span><span>26</span>
+                </div>
+              </div>
+              <div class="tahoe-widget tahoe-weather-widget">
+                <div style="font-size: 7px; font-weight: 900">San Francisco</div>
+                <div style="font-size: 28px; font-weight: 800; line-height: 1; margin-top: 4px">
+                  53&deg;
+                </div>
+                <div style="font-size: 7px; font-weight: 800; opacity: 0.9; margin-top: 12px">
+                  Partly Cloudy
+                </div>
+                <div style="font-size: 6px; font-weight: 800; opacity: 0.82">H:58° L:50°</div>
+              </div>
+              <div class="tahoe-widget tahoe-media-widget"></div>
+            </div>
+            <div id="mac-toast" class="tahoe-notification">
+              <img src="assets/icons/toast-messages.jpg" alt="" />
+              <div>
+                <div class="tahoe-panel-title">
+                  <span>Messages</span> <span style="font-size: 11px; opacity: 0.78">now</span>
+                </div>
+                <div class="tahoe-panel-subtitle">Liquid Glass preview is ready for review.</div>
+              </div>
+            </div>
+            <div class="tahoe-stage">
+              <div class="tahoe-window">
+                <div class="tahoe-window-titlebar">
+                  <span class="tahoe-traffic-light" style="background: #ff5f57"></span>
+                  <span class="tahoe-traffic-light" style="background: #febc2e"></span>
+                  <span class="tahoe-traffic-light" style="background: #28c840"></span>
+                  <span
+                    style="
+                      flex: 1;
+                      text-align: center;
+                      font-size: 13px;
+                      font-weight: 600;
+                      color: rgba(20, 46, 76, 0.72);
+                    "
+                    >HyperFrames</span
+                  >
+                </div>
+                <div id="macos-finder-body" class="tahoe-finder-body">
+                  <div class="tahoe-sidebar">
+                    <div class="tahoe-sidebar-row active">
+                      <img class="tahoe-sidebar-icon" src="assets/icons/finder.png" alt="" />
+                      Favorites
+                    </div>
+                    <div class="tahoe-sidebar-row">
+                      <img class="tahoe-sidebar-icon" src="assets/icons/files.jpg" alt="" />
+                      Home
+                    </div>
+                    <div class="tahoe-sidebar-row">
+                      <img class="tahoe-sidebar-icon" src="assets/icons/safari.jpg" alt="" />
+                      Desktop
+                    </div>
+                    <div class="tahoe-sidebar-row">
+                      <img class="tahoe-sidebar-icon" src="assets/icons/mail.jpg" alt="" />
+                      Downloads
+                    </div>
+                    <div class="tahoe-sidebar-row">
+                      <img class="tahoe-sidebar-icon" src="assets/icons/photos.jpg" alt="" />
+                      Pictures
+                    </div>
+                    <div class="tahoe-sidebar-row">
+                      <img class="tahoe-sidebar-icon" src="assets/icons/music.jpg" alt="" />
+                      Music
+                    </div>
+                  </div>
+                  <div class="tahoe-file-grid">
+                    <div class="tahoe-file">
+                      <div class="tahoe-folder-icon"></div>
+                      <div class="tahoe-file-label">packages</div>
+                    </div>
+                    <div class="tahoe-file">
+                      <div class="tahoe-folder-icon"></div>
+                      <div class="tahoe-file-label">registry</div>
+                    </div>
+                    <div class="tahoe-file">
+                      <div class="tahoe-folder-icon"></div>
+                      <div class="tahoe-file-label">docs</div>
+                    </div>
+                    <div class="tahoe-file">
+                      <div class="tahoe-folder-icon"></div>
+                      <div class="tahoe-file-label">skills</div>
+                    </div>
+                    <div class="tahoe-file">
+                      <div class="tahoe-document-icon"></div>
+                      <div class="tahoe-file-label">AGENTS.md</div>
+                    </div>
+                    <div class="tahoe-file">
+                      <div class="tahoe-document-icon"></div>
+                      <div class="tahoe-file-label">package.json</div>
+                    </div>
+                    <div class="tahoe-file">
+                      <div class="tahoe-folder-icon"></div>
+                      <div class="tahoe-file-label">playground</div>
+                    </div>
+                    <div class="tahoe-file">
+                      <div class="tahoe-folder-icon"></div>
+                      <div class="tahoe-file-label">scripts</div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="tahoe-dock">
+              <img class="tahoe-dock-icon" src="assets/icons/dock-finder.png" alt="" />
+              <img class="tahoe-dock-icon" src="assets/icons/dock-safari.jpg" alt="" />
+              <img class="tahoe-dock-icon" src="assets/icons/dock-mail.jpg" alt="" />
+              <img class="tahoe-dock-icon" src="assets/icons/calendar.jpg" alt="" />
+              <img class="tahoe-dock-icon" src="assets/icons/dock-photos.jpg" alt="" />
+              <img class="tahoe-dock-icon" src="assets/icons/messages.jpg" alt="" />
+              <img class="tahoe-dock-icon" src="assets/icons/dock-music.jpg" alt="" />
+              <img class="tahoe-dock-icon" src="assets/icons/brave.jpg" alt="" />
+              <img class="tahoe-dock-icon" src="assets/icons/slack.jpg" alt="" />
+            </div>
+          </div>
+        </div>
+      </canvas>
+
+      <canvas
+        id="theater"
+        width="1920"
+        height="1080"
+        style="position: absolute; top: 0; left: 0; width: 1920px; height: 1080px"
+      ></canvas>
+      <div
+        id="driver"
+        class="clip"
+        data-start="0"
+        data-duration="15"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      var W = 1920,
+        H = 1080,
+        PI = Math.PI;
+
+      // ── Renderer ───────────────────────────────────────────────────────
+      var renderer = new THREE.WebGLRenderer({
+        canvas: document.getElementById("theater"),
+        antialias: true,
+        preserveDrawingBuffer: true,
+      });
+      renderer.setSize(W, H, false);
+      renderer.setPixelRatio(1);
+      renderer.toneMapping = THREE.ACESFilmicToneMapping;
+      renderer.toneMappingExposure = 1.15;
+      renderer.outputEncoding = THREE.sRGBEncoding;
+      renderer.setClearColor(0x050508, 1);
+
+      var scene = new THREE.Scene();
+      scene.background = new THREE.Color(0x050508);
+      var camera = new THREE.PerspectiveCamera(34, W / H, 0.1, 100);
+
+      // ── Environment Map ────────────────────────────────────────────────
+      var eC = document.createElement("canvas");
+      eC.width = 1024;
+      eC.height = 512;
+      var ec = eC.getContext("2d");
+      var eg = ec.createLinearGradient(0, 0, 1024, 512);
+      eg.addColorStop(0, "#020307");
+      eg.addColorStop(0.15, "#1a1a2e");
+      eg.addColorStop(0.3, "#ffffff");
+      eg.addColorStop(0.45, "#0a0a1e");
+      eg.addColorStop(0.6, "#ffffff");
+      eg.addColorStop(0.75, "#1e1e2e");
+      eg.addColorStop(1, "#020307");
+      ec.fillStyle = eg;
+      ec.fillRect(0, 0, 1024, 512);
+      ec.globalCompositeOperation = "screen";
+      for (var ei = 0; ei < 7; ei++) {
+        ec.fillStyle = "rgba(255,255,255," + (ei % 2 === 0 ? 0.15 : 0.08) + ")";
+        ec.fillRect((ei % 3) * 100, 60 + ei * 56, 700, 3 + (ei % 2) * 2);
+      }
+      var eT = new THREE.CanvasTexture(eC);
+      eT.mapping = THREE.EquirectangularReflectionMapping;
+      var pm = new THREE.PMREMGenerator(renderer);
+      scene.environment = pm.fromEquirectangular(eT).texture;
+      eT.dispose();
+      pm.dispose();
+
+      // ── Three.js shader backdrop ────────────────────────────────────────
+      var bgUniforms = { uTime: { value: 0 }, uAspect: { value: W / H } };
+      var bgPlane = new THREE.Mesh(
+        new THREE.PlaneGeometry(28, 16),
+        new THREE.ShaderMaterial({
+          uniforms: bgUniforms,
+          vertexShader:
+            "varying vec2 v;void main(){v=uv;gl_Position=projectionMatrix*modelViewMatrix*vec4(position,1.0);}",
+          fragmentShader:
+            "uniform float uTime;uniform float uAspect;varying vec2 v;float wave(vec2 p,float s,float t){return sin(p.x*s+p.y*s*.57+uTime*t);}void main(){vec2 p=v*2.0-1.0;p.x*=uAspect;float w=wave(p,3.0,.22)+.55*wave(p.yx+vec2(.7,-.2),5.1,.16)+.32*wave(p+vec2(-.4,.5),8.0,-.12);float a=smoothstep(-.75,1.05,w);vec3 navy=vec3(.015,.013,.055);vec3 cyan=vec3(.02,.42,.72);vec3 violet=vec3(.30,.08,.55);vec3 amber=vec3(.95,.42,.04);float ribbon=smoothstep(.22,.95,sin(p.x*2.2-p.y*3.1+uTime*.18));vec3 c=mix(navy,cyan,a);c=mix(c,violet,smoothstep(.16,1.1,wave(p+vec2(.8,.1),2.4,.1)));c+=amber*ribbon*.33;float glow=exp(-dot(p+vec2(.62,-.08),p+vec2(.62,-.08))*1.7);c+=vec3(.10,.45,.55)*glow;float vign=smoothstep(1.85,.25,length(p));gl_FragColor=vec4(c*vign,1.0);}",
+          depthTest: false,
+          depthWrite: false,
+        }),
+      );
+      bgPlane.position.z = -7.5;
+      scene.add(bgPlane);
+
+      var floor = new THREE.Mesh(
+        new THREE.PlaneGeometry(30, 30),
+        new THREE.MeshStandardMaterial({ color: 0x081427, metalness: 0.9, roughness: 0.2 }),
+      );
+      floor.rotation.x = -PI / 2;
+      floor.position.y = -2.5;
+      scene.add(floor);
+
+      scene.add(new THREE.AmbientLight(0x222233, 0.5));
+      var kL = new THREE.DirectionalLight(0xffffff, 2.2);
+      kL.position.set(-3, 4, 5);
+      scene.add(kL);
+      var rL = new THREE.PointLight(0x6366f1, 3, 15);
+      rL.position.set(4, 2, 3);
+      scene.add(rL);
+      var wL = new THREE.PointLight(0xffc8a8, 1.5, 12);
+      wL.position.set(-3, -1, 4);
+      scene.add(wL);
+
+      // ── Live HTML → WebGL Texture  ─
+      var capPhoneCvs = document.getElementById("cap-phone");
+      var capPhoneCtx = capPhoneCvs.getContext("2d");
+      var phoneHtmlEl = document.getElementById("phone-html");
+
+      var capLapCvs = document.getElementById("cap-laptop");
+      var capLapCtx = capLapCvs.getContext("2d");
+      var lapHtmlEl = document.getElementById("laptop-html");
+
+      var apiOk = (function () {
+        var tc = document.createElement("canvas");
+        if (!("layoutSubtree" in tc)) return false;
+        tc.setAttribute("layoutsubtree", "");
+        var ctx = tc.getContext("2d");
+        return ctx && typeof ctx.drawElementImage === "function";
+      })();
+      var paintReady = false;
+
+      function waitForImages() {
+        var images = Array.prototype.slice.call(document.querySelectorAll("img"));
+        return Promise.all(
+          images.map(function (image) {
+            if (image.complete) return Promise.resolve();
+            return new Promise(function (resolveImage) {
+              image.onload = resolveImage;
+              image.onerror = resolveImage;
+            });
+          }),
+        );
+      }
+
+      function waitForPaint(canvas) {
+        return new Promise(function (resolvePaint) {
+          if (!canvas || typeof canvas.requestPaint !== "function") {
+            resolvePaint();
+            return;
+          }
+          var resolved = false;
+          function done() {
+            if (resolved) return;
+            resolved = true;
+            canvas.onpaint = null;
+            resolvePaint();
+          }
+          canvas.onpaint = done;
+          canvas.requestPaint();
+          setTimeout(done, 100);
+        });
+      }
+
+      // Generate card HTML for both screens
+      var cardData = [
+        {
+          bg: "linear-gradient(135deg,#1e3a5f,#2563eb)",
+          text: "100M+ AI team",
+          title: "Notion Showcase",
+          meta: "15s · 1920×1080",
+        },
+        {
+          bg: "linear-gradient(135deg,#4a1942,#db2777)",
+          text: "Design System v4",
+          title: "Dribbble Showcase",
+          meta: "12s · 1920×1080",
+        },
+        {
+          bg: "linear-gradient(135deg,#451a03,#f59e0b)",
+          text: "$1.9T Market Cap",
+          title: "Stripe Showcase",
+          meta: "10s · 1920×1080",
+        },
+        {
+          bg: "linear-gradient(135deg,#064e3b,#10b981)",
+          text: "Ship faster with AI",
+          title: "Vercel Promo",
+          meta: "20s · 1080×1920",
+        },
+        {
+          bg: "linear-gradient(135deg,#1e3a5f,#3b82f6)",
+          text: "Privacy App",
+          title: "iPhone App Store",
+          meta: "8s · 1080×1920",
+        },
+        {
+          bg: "linear-gradient(135deg,#4a1942,#a855f7)",
+          text: "Audio Visualizer",
+          title: "Spotify Remix",
+          meta: "15s · 1920×1080",
+        },
+        {
+          bg: "linear-gradient(135deg,#064e3b,#059669)",
+          text: "Code Animation",
+          title: "Terminal Demo",
+          meta: "12s · 1920×1080",
+        },
+        {
+          bg: "linear-gradient(135deg,#451a03,#d97706)",
+          text: "Launch Video",
+          title: "Product Hunt",
+          meta: "30s · 1920×1080",
+        },
+        {
+          bg: "linear-gradient(135deg,#1e3a5f,#6366f1)",
+          text: "3D Devices",
+          title: "Device Mockups",
+          meta: "15s · 1920×1080",
+        },
+      ];
+      function makeCardHTML(cd, isMobile) {
+        var fs = isMobile ? 12 : 16;
+        return (
+          '<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:' +
+          (isMobile ? 10 : 12) +
+          'px;overflow:hidden;opacity:0" class="anim-card">' +
+          '<div style="width:100%;aspect-ratio:16/9;background:' +
+          cd.bg +
+          ';display:flex;align-items:center;justify-content:center"><span style="font-size:' +
+          fs +
+          'px;font-weight:700;color:rgba(255,255,255,0.7)">' +
+          cd.text +
+          "</span></div>" +
+          '<div style="padding:' +
+          (isMobile ? "8px 10px" : "10px 14px") +
+          '"><div style="font-size:' +
+          (isMobile ? 11 : 13) +
+          'px;font-weight:600;margin-bottom:2px">' +
+          cd.title +
+          '</div><div style="font-size:' +
+          (isMobile ? 9 : 10) +
+          'px;color:rgba(255,255,255,0.3)">' +
+          cd.meta +
+          "</div></div></div>"
+        );
+      }
+      var phoneCardsEl = document.getElementById("phone-cards");
+      var laptopCardsEl = document.getElementById("laptop-cards");
+      for (var ci = 0; ci < cardData.length; ci++) {
+        if (ci < 6) phoneCardsEl.innerHTML += makeCardHTML(cardData[ci], true);
+        laptopCardsEl.innerHTML += makeCardHTML(cardData[ci], false);
+      }
+
+      var phoneTex = new THREE.CanvasTexture(capPhoneCvs);
+      phoneTex.minFilter = THREE.LinearFilter;
+      phoneTex.magFilter = THREE.LinearFilter;
+      phoneTex.generateMipmaps = false;
+      var lapTex = new THREE.CanvasTexture(capLapCvs);
+      lapTex.minFilter = THREE.LinearFilter;
+      lapTex.magFilter = THREE.LinearFilter;
+      lapTex.generateMipmaps = false;
+      var macToastIcon = document.querySelector("#mac-toast img");
+      var macDockIcons = Array.prototype.slice.call(document.querySelectorAll(".tahoe-dock-icon"));
+      var macSidebarIcons = Array.prototype.slice.call(
+        document.querySelectorAll(".tahoe-sidebar-icon"),
+      );
+
+      function roundedRect(ctx, x, y, w, h, r) {
+        ctx.beginPath();
+        ctx.moveTo(x + r, y);
+        ctx.lineTo(x + w - r, y);
+        ctx.quadraticCurveTo(x + w, y, x + w, y + r);
+        ctx.lineTo(x + w, y + h - r);
+        ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
+        ctx.lineTo(x + r, y + h);
+        ctx.quadraticCurveTo(x, y + h, x, y + h - r);
+        ctx.lineTo(x, y + r);
+        ctx.quadraticCurveTo(x, y, x + r, y);
+        ctx.closePath();
+      }
+
+      function drawRoundedImage(ctx, image, x, y, w, h, r) {
+        if (!image || !image.complete) return;
+        ctx.save();
+        roundedRect(ctx, x, y, w, h, r);
+        ctx.clip();
+        ctx.drawImage(image, x, y, w, h);
+        ctx.restore();
+      }
+
+      function drawGlassPanel(ctx, x, y, w, h, r) {
+        var g = ctx.createLinearGradient(x, y, x + w, y + h);
+        g.addColorStop(0, "rgba(255,255,255,0.82)");
+        g.addColorStop(0.46, "rgba(245,253,255,0.42)");
+        g.addColorStop(1, "rgba(211,237,255,0.3)");
+        ctx.save();
+        ctx.shadowColor = "rgba(7,47,96,0.2)";
+        ctx.shadowBlur = 24;
+        ctx.shadowOffsetY = 12;
+        roundedRect(ctx, x, y, w, h, r);
+        ctx.fillStyle = g;
+        ctx.fill();
+        ctx.shadowColor = "transparent";
+        ctx.lineWidth = 1.25;
+        ctx.strokeStyle = "rgba(255,255,255,0.72)";
+        ctx.stroke();
+        roundedRect(ctx, x + 2, y + 2, w - 4, h - 4, Math.max(0, r - 2));
+        ctx.strokeStyle = "rgba(255,255,255,0.24)";
+        ctx.stroke();
+        ctx.restore();
+      }
+
+      function drawMenuBar(ctx) {
+        ctx.save();
+        var g = ctx.createLinearGradient(0, 0, 1440, 0);
+        g.addColorStop(0, "rgba(255,255,255,0.34)");
+        g.addColorStop(0.52, "rgba(255,255,255,0.18)");
+        g.addColorStop(1, "rgba(255,255,255,0.3)");
+        ctx.fillStyle = g;
+        ctx.fillRect(0, 0, 1440, 28);
+        ctx.strokeStyle = "rgba(255,255,255,0.46)";
+        ctx.lineWidth = 1;
+        ctx.beginPath();
+        ctx.moveTo(0, 28);
+        ctx.lineTo(1440, 28);
+        ctx.stroke();
+        ctx.fillStyle = "rgba(255,255,255,0.96)";
+        ctx.font = "800 14px Inter, system-ui, sans-serif";
+        ctx.fillText("Finder", 50, 18);
+        ctx.font = "700 11px Inter, system-ui, sans-serif";
+        var items = ["File", "Edit", "View", "Go", "Window", "Help"];
+        for (var mi = 0; mi < items.length; mi++) ctx.fillText(items[mi], 108 + mi * 46, 18);
+        ctx.textAlign = "right";
+        ctx.fillText("92%   Wi-Fi   Tue Apr 1 9:41 AM", 1414, 18);
+        ctx.textAlign = "left";
+        ctx.restore();
+      }
+
+      function drawDesktopWidgets(ctx) {
+        ctx.save();
+        ctx.textBaseline = "top";
+        drawGlassPanel(ctx, 28, 48, 100, 112, 18);
+        ctx.fillStyle = "rgba(239,68,68,0.92)";
+        ctx.font = "900 8px Inter, system-ui, sans-serif";
+        ctx.fillText("APRIL", 44, 62);
+        ctx.fillStyle = "rgba(15,45,80,0.72)";
+        ctx.font = "800 7px Inter, system-ui, sans-serif";
+        var days = ["S", "M", "T", "W", "T", "F", "S"];
+        for (var di = 0; di < days.length; di++) ctx.fillText(days[di], 42 + di * 10, 82);
+        for (var da = 1; da <= 26; da++) {
+          var dx = 42 + ((da + 1) % 7) * 10;
+          var dy = 98 + Math.floor((da + 1) / 7) * 12;
+          if (da === 1) {
+            ctx.fillStyle = "#ef4444";
+            ctx.beginPath();
+            ctx.arc(dx + 3, dy + 4, 6, 0, PI * 2);
+            ctx.fill();
+            ctx.fillStyle = "#fff";
+          } else {
+            ctx.fillStyle = "rgba(15,45,80,0.62)";
+          }
+          ctx.fillText(String(da), dx, dy);
+        }
+
+        drawGlassPanel(ctx, 138, 48, 112, 112, 18);
+        var wg = ctx.createLinearGradient(138, 48, 250, 160);
+        wg.addColorStop(0, "rgba(43,133,245,0.72)");
+        wg.addColorStop(0.64, "rgba(163,220,255,0.54)");
+        wg.addColorStop(1, "rgba(255,255,255,0.3)");
+        roundedRect(ctx, 138, 48, 112, 112, 18);
+        ctx.fillStyle = wg;
+        ctx.fill();
+        ctx.fillStyle = "rgba(255,255,255,0.96)";
+        ctx.font = "900 9px Inter, system-ui, sans-serif";
+        ctx.fillText("San Francisco", 154, 64);
+        ctx.font = "900 31px Inter, system-ui, sans-serif";
+        ctx.fillText("53°", 154, 84);
+        ctx.font = "800 8px Inter, system-ui, sans-serif";
+        ctx.fillText("Partly Cloudy", 154, 130);
+        ctx.fillText("H:58° L:50°", 154, 142);
+
+        drawGlassPanel(ctx, 28, 170, 222, 92, 22);
+        var pg = ctx.createLinearGradient(44, 188, 130, 244);
+        pg.addColorStop(0, "#ffb27a");
+        pg.addColorStop(0.52, "#ce2b6f");
+        pg.addColorStop(1, "#1d4ed8");
+        roundedRect(ctx, 44, 188, 72, 56, 14);
+        ctx.fillStyle = pg;
+        ctx.fill();
+        ctx.fillStyle = "rgba(18,40,68,0.92)";
+        ctx.font = "900 14px Inter, system-ui, sans-serif";
+        ctx.fillText("Now Playing", 130, 193);
+        ctx.font = "800 10px Inter, system-ui, sans-serif";
+        ctx.fillStyle = "rgba(18,40,68,0.68)";
+        ctx.fillText("Glass preview mix", 130, 216);
+        ctx.restore();
+      }
+
+      function drawFinderWindow(ctx) {
+        var x = 112;
+        var y = 236;
+        var w = 620;
+        var h = 338;
+        drawGlassPanel(ctx, x, y, w, h, 18);
+        roundedRect(ctx, x, y, w, 42, 18);
+        ctx.fillStyle = "rgba(255,255,255,0.38)";
+        ctx.fill();
+        ctx.fillStyle = "#ff5f57";
+        ctx.beginPath();
+        ctx.arc(x + 26, y + 21, 6, 0, PI * 2);
+        ctx.fill();
+        ctx.fillStyle = "#febc2e";
+        ctx.beginPath();
+        ctx.arc(x + 46, y + 21, 6, 0, PI * 2);
+        ctx.fill();
+        ctx.fillStyle = "#28c840";
+        ctx.beginPath();
+        ctx.arc(x + 66, y + 21, 6, 0, PI * 2);
+        ctx.fill();
+        ctx.fillStyle = "rgba(14,42,74,0.72)";
+        ctx.font = "800 13px Inter, system-ui, sans-serif";
+        ctx.textAlign = "center";
+        ctx.fillText("HyperFrames", x + w / 2, y + 25);
+        ctx.textAlign = "left";
+
+        ctx.fillStyle = "rgba(255,255,255,0.23)";
+        ctx.fillRect(x, y + 42, 164, h - 42);
+        var sidebar = ["Favorites", "Home", "Desktop", "Downloads", "Pictures", "Music"];
+        for (var si = 0; si < sidebar.length; si++) {
+          var sy = y + 70 + si * 34;
+          if (si === 0) {
+            roundedRect(ctx, x + 16, sy - 17, 132, 26, 8);
+            ctx.fillStyle = "rgba(43,139,235,0.24)";
+            ctx.fill();
+          }
+          drawRoundedImage(ctx, macSidebarIcons[si], x + 28, sy - 14, 18, 18, 5);
+          ctx.fillStyle = "rgba(18,45,76,0.78)";
+          ctx.font =
+            si === 0
+              ? "900 12px Inter, system-ui, sans-serif"
+              : "800 12px Inter, system-ui, sans-serif";
+          ctx.fillText(sidebar[si], x + 54, sy);
+        }
+
+        var files = [
+          "packages",
+          "registry",
+          "docs",
+          "skills",
+          "AGENTS.md",
+          "package.json",
+          "playground",
+          "scripts",
+        ];
+        for (var fi = 0; fi < files.length; fi++) {
+          var fx = x + 226 + (fi % 4) * 94;
+          var fy = y + 94 + Math.floor(fi / 4) * 112;
+          roundedRect(ctx, fx, fy, 54, 42, 10);
+          ctx.fillStyle =
+            fi === 4 || fi === 5 ? "rgba(255,255,255,0.82)" : "rgba(112,202,255,0.74)";
+          ctx.fill();
+          if (fi < 4 || fi > 5) {
+            roundedRect(ctx, fx + 4, fy - 8, 28, 13, 6);
+            ctx.fillStyle = "rgba(119,204,255,0.78)";
+            ctx.fill();
+          } else {
+            ctx.fillStyle = "rgba(104,122,142,0.46)";
+            ctx.fillRect(fx + 10, fy + 12, 34, 3);
+            ctx.fillRect(fx + 10, fy + 22, 26, 3);
+          }
+          ctx.fillStyle = "rgba(12,38,68,0.9)";
+          ctx.font = "900 11px Inter, system-ui, sans-serif";
+          ctx.textAlign = "center";
+          ctx.fillText(files[fi], fx + 27, fy + 62);
+          ctx.textAlign = "left";
+        }
+      }
+
+      function drawNotification(ctx, x, y) {
+        drawGlassPanel(ctx, x, y, 390, 96, 28);
+        drawRoundedImage(ctx, macToastIcon, x + 20, y + 22, 44, 44, 12);
+        ctx.fillStyle = "rgba(10,34,62,0.96)";
+        ctx.font = "900 18px Inter, system-ui, sans-serif";
+        ctx.fillText("Messages", x + 80, y + 26);
+        ctx.font = "800 12px Inter, system-ui, sans-serif";
+        ctx.fillStyle = "rgba(10,34,62,0.58)";
+        ctx.fillText("now", x + 176, y + 28);
+        ctx.font = "800 13px Inter, system-ui, sans-serif";
+        ctx.fillStyle = "rgba(10,34,62,0.78)";
+        ctx.fillText("Liquid Glass preview is ready for review.", x + 80, y + 54);
+      }
+
+      function drawDock(ctx) {
+        var icons = macDockIcons;
+        var size = 46;
+        var gap = 8;
+        var padX = 14;
+        var padY = 9;
+        var w = icons.length * size + (icons.length - 1) * gap + padX * 2;
+        var x = Math.round((1440 - w) / 2);
+        var y = 792;
+        drawGlassPanel(ctx, x, y, w, size + padY * 2, 23);
+        for (var ii = 0; ii < icons.length; ii++) {
+          var ix = x + padX + ii * (size + gap);
+          drawRoundedImage(ctx, icons[ii], ix, y + padY, size, size, 13);
+        }
+      }
+
+      function drawMacGlassOverlay(ctx) {
+        ctx.save();
+        drawMenuBar(ctx);
+        drawDesktopWidgets(ctx);
+        drawFinderWindow(ctx);
+        ctx.textBaseline = "top";
+        if (S.macToastOpacity > 0.01) {
+          ctx.save();
+          ctx.globalAlpha = S.macToastOpacity;
+          drawNotification(ctx, S.macToastX, S.macToastY);
+          ctx.restore();
+        }
+        drawDock(ctx);
+        ctx.restore();
+      }
+
+      function captureScreens() {
+        if (!apiOk || !paintReady) return;
+        try {
+          capPhoneCtx.clearRect(0, 0, 390, 844);
+          capPhoneCtx.drawElementImage(phoneHtmlEl, 0, 0, 390, 844);
+          capLapCtx.clearRect(0, 0, 1440, 900);
+          capLapCtx.drawElementImage(lapHtmlEl, 0, 0, 1440, 900);
+          drawMacGlassOverlay(capLapCtx);
+          phoneTex.needsUpdate = true;
+          lapTex.needsUpdate = true;
+        } catch (e) {}
+      }
+
+      // ── Turntable Group (both devices rotate together for 360° orbit) ──
+      var turntable = new THREE.Group();
+      scene.add(turntable);
+
+      // ── Model Groups ───────────────────────────────────────────────────
+      var phoneGrp = new THREE.Group();
+      turntable.add(phoneGrp);
+      var lapGrp = new THREE.Group();
+      turntable.add(lapGrp);
+      var ready = 0;
+
+      var draco = new THREE.DRACOLoader();
+      draco.setDecoderPath("https://www.gstatic.com/draco/versioned/decoders/1.5.6/");
+      var loader = new THREE.GLTFLoader();
+      loader.setDRACOLoader(draco);
+
+      // MacBook
+      // The replacement device models carry UVs authored for a tiling material
+      // (the laptop panel runs u -6.3..6.3), so mapping one screen image onto
+      // them clamps at the edges and smears the last row of pixels across the
+      // whole panel. Both screens are flat planes, so derive planar UVs from
+      // the mesh's own bounds instead of trusting what shipped.
+      function planarScreenUv(mesh) {
+        var g = mesh.geometry;
+        g.computeBoundingBox();
+        var bb = g.boundingBox;
+        var pos = g.attributes.position;
+        var w = bb.max.x - bb.min.x || 1;
+        var h = bb.max.y - bb.min.y || 1;
+        var uv = new Float32Array(pos.count * 2);
+        for (var i = 0; i < pos.count; i++) {
+          uv[i * 2] = (pos.getX(i) - bb.min.x) / w;
+          uv[i * 2 + 1] = (pos.getY(i) - bb.min.y) / h;
+        }
+        g.setAttribute("uv", new THREE.BufferAttribute(uv, 2));
+      }
+
+      loader.load("models/macbook.glb", function (gltf) {
+        var m = gltf.scene;
+        var box = new THREE.Box3().setFromObject(m);
+        var sz = box.getSize(new THREE.Vector3());
+        var s = 4.5 / Math.max(sz.x, sz.z);
+        m.scale.setScalar(s);
+        box.setFromObject(m);
+        m.position.sub(box.getCenter(new THREE.Vector3()));
+
+        m.traverse(function (child) {
+          // `display` is the panel. `display-notch` is the bezel cut-out beside
+          // it and must keep its own material, so this cannot be a prefix test.
+          if (child.isMesh && child.name.replace(/\.\d+$/, "") === "display") {
+            planarScreenUv(child);
+            child.material = new THREE.MeshBasicMaterial({ map: lapTex });
+          }
+        });
+
+        lapGrp.add(m);
+        ready++;
+        if (ready === 1) onReady();
+      });
+
+      function onReady() {
+        waitForImages()
+          .then(function () {
+            return waitForPaint(capLapCvs);
+          })
+          .then(function () {
+            paintReady = true;
+            captureScreens();
+            render();
+          });
+      }
+
+      // ── Cubic Bezier Implementation ────────────────────────────────────
+      function cbz(p1x, p1y, p2x, p2y) {
+        var ax = 3 * p1x - 3 * p2x + 1,
+          bx = 3 * p2x - 6 * p1x,
+          cx = 3 * p1x;
+        var ay = 3 * p1y - 3 * p2y + 1,
+          by = 3 * p2y - 6 * p1y,
+          cy = 3 * p1y;
+        return function (t) {
+          var s = t;
+          for (var i = 0; i < 12; i++) {
+            var x = ((ax * s + bx) * s + cx) * s - t;
+            var dx = (3 * ax * s + 2 * bx) * s + cx;
+            if (Math.abs(dx) < 1e-10) break;
+            s -= x / dx;
+          }
+          s = Math.max(0, Math.min(1, s));
+          return ((ay * s + by) * s + cy) * s;
+        };
+      }
+
+      var enterEase = cbz(0.16, 1.0, 0.3, 1.0);
+      var spinEase = cbz(0.76, 0.0, 0.18, 1.0);
+      var driftEase = cbz(0.45, 0.0, 0.15, 1.0);
+      var snapEase = cbz(0.22, 1.15, 0.36, 1.0);
+      var breatheEase = cbz(0.37, 0.0, 0.63, 1.0);
+
+      // ── Animation State ────────────────────────────────────────────────
+      var S = {
+        phX: 0,
+        phY: 0.1,
+        phZ: 0.5,
+        phRX: 0,
+        phRY: PI,
+        phRZ: 0,
+        lpX: 10,
+        lpY: -0.2,
+        lpZ: -0.6,
+        lpRX: 0,
+        lpRY: 0,
+        lpRZ: 0,
+        cX: 0,
+        cY: 0.15,
+        cZ: 2.8,
+        clX: 0,
+        clY: 0.1,
+        clZ: 0,
+        drift: 0,
+        turn: 0,
+        cardReveal: 0,
+        titleFade: 0,
+        counter: 0,
+        macToastOpacity: 0,
+        macToastX: 1464,
+        macToastY: 62,
+        macPanel: 0,
+        p: 0,
+      };
+
+      function render() {
+        var d = S.drift;
+
+        // ── Animate live HTML content (captured to texture every frame) ──
+        // Title fade-in
+        document.getElementById("phone-title").style.opacity = S.titleFade;
+        document.getElementById("laptop-title").style.opacity = S.titleFade;
+        // Counter
+        var cnt = Math.round(S.counter);
+        document.getElementById("phone-count").textContent = "Catalog " + cnt;
+        document.getElementById("laptop-count").textContent = "Catalog " + cnt;
+        // Staggered card reveal
+        var allCards = document.querySelectorAll(".anim-card");
+        for (var ci2 = 0; ci2 < allCards.length; ci2++) {
+          var cardProgress = Math.max(0, Math.min(1, (S.cardReveal * allCards.length - ci2) * 1.5));
+          allCards[ci2].style.opacity = cardProgress;
+          allCards[ci2].style.transform = "translateY(" + (1 - cardProgress) * 15 + "px)";
+        }
+        var macToast = document.getElementById("mac-toast");
+        var macControl = document.getElementById("mac-control");
+        var macMedia = document.getElementById("mac-media");
+        if (macToast) {
+          macToast.style.opacity = S.macToastOpacity;
+          macToast.style.transform = "translateX(" + (S.macToastX - 1002) + "px)";
+          macToast.style.filter = "none";
+        }
+        if (macControl) {
+          macControl.style.opacity = 0.5 + S.macPanel * 0.5;
+          macControl.style.transform = "translateY(" + (1 - S.macPanel) * 18 + "px)";
+        }
+        if (macMedia) {
+          macMedia.style.opacity = 0.55 + S.macPanel * 0.45;
+          macMedia.style.transform = "translateY(" + (1 - S.macPanel) * 18 + "px)";
+        }
+        // Re-capture HTML to texture
+        captureScreens();
+
+        phoneGrp.position.set(
+          S.phX + Math.sin(d * 0.5) * 0.015,
+          S.phY + Math.sin(d * 0.7) * 0.008,
+          S.phZ + Math.cos(d * 0.4) * 0.008,
+        );
+        phoneGrp.rotation.set(S.phRX, S.phRY, S.phRZ);
+        lapGrp.position.set(
+          S.lpX - Math.sin(d * 0.4) * 0.012,
+          S.lpY + Math.sin(d * 0.6) * 0.006,
+          S.lpZ + Math.cos(d * 0.35) * 0.008,
+        );
+        lapGrp.rotation.set(S.lpRX, S.lpRY, S.lpRZ);
+        turntable.rotation.y = S.turn;
+        bgUniforms.uTime.value = d;
+        camera.position.set(S.cX, S.cY, S.cZ);
+        camera.lookAt(S.clX, S.clY, S.clZ);
+        renderer.render(scene, camera);
+      }
+
+      // ── GSAP Timeline — Product Review Edit ────────────────────────────
+      var tl = gsap.timeline({ paused: true });
+      window.__timelines = window.__timelines || {};
+      window.__timelines["macos-tahoe-liquid-glass"] = tl;
+
+      tl.to(S, { p: 1, drift: 15, duration: 15, ease: "none", onUpdate: render }, 0);
+
+      // ── macOS Tahoe: MacBook hero — zoomed close, slow pull-back ──
+      // Move iPhone off screen immediately
+      tl.set(S, { phX: 10 }, 0);
+      // Start MacBook centered and close
+      tl.set(S, { lpX: 0, lpRY: 0 }, 0);
+      tl.set(S, { cX: 0, clX: 0, cZ: 4.5, cY: 0.4, clY: -0.1 }, 0);
+
+      // Slow zoom out
+      tl.to(S, { cZ: 7, cY: 0.6, duration: 12, ease: driftEase }, 0.5);
+
+      // Gentle breathing tilt
+      tl.to(S, { lpRY: 0.04, duration: 4, ease: breatheEase }, 1);
+      tl.to(S, { lpRY: -0.03, duration: 4, ease: breatheEase }, 5);
+      tl.to(S, { lpRY: 0.02, duration: 4, ease: breatheEase }, 9);
+
+      // ── Live HTML Animations (captured to 3D textures every frame) ──
+      // Title fade in
+      tl.to(S, { titleFade: 1, duration: 0.8, ease: breatheEase }, 0.3);
+      // Counter animates up
+      tl.to(S, { counter: 43, duration: 2, ease: driftEase }, 0.5);
+      // Cards stagger in (0→1 reveals all cards sequentially)
+      tl.to(S, { cardReveal: 1, duration: 3, ease: breatheEase }, 0.8);
+      tl.set(S, { macToastX: 1464, macToastY: 62, macToastOpacity: 0 }, 0);
+      tl.to(S, { macToastX: 988, macToastOpacity: 1, duration: 0.38, ease: "power3.out" }, 0.45);
+      tl.to(S, { macToastX: 1002, duration: 0.16, ease: "power2.out" }, 0.83);
+      tl.to(S, { macToastY: 72, duration: 0.18, ease: "power2.out" }, 4.25);
+      tl.to(S, { macToastY: 62, duration: 0.22, ease: "power2.out" }, 4.43);
+      tl.to(S, { macPanel: 1, duration: 1.1, ease: breatheEase }, 0.45);
+    </script>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="macos-tahoe-liquid-glass" data-composition-src="compositions/macos-tahoe-liquid-glass.html" data-start="0" data-duration="15" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/mk-background.mdx b/docs/catalog/blocks/mk-background.mdx
index f9f1d9f689..dee08454f3 100644
--- a/docs/catalog/blocks/mk-background.mdx
+++ b/docs/catalog/blocks/mk-background.mdx
@@ -3,13 +3,13 @@ title: "Minimal Gradient Background"
 description: "Procedural soft-blob gradient backdrop in a minimalist presentation style: two radial blobs drifting over a base color, with an animatable rounded-card bar mask and optional frosted-glass mode"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-background.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-background.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/mk-background.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Minimal Gradient Background preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add mk-background
-```
+<InstallCommand command="npx hyperframes add mk-background" />
 
 That writes one file: `compositions/mk-background.html`.
 
@@ -32,6 +32,250 @@ It runs for 10 seconds at 1920×1080. Paste this into your composition:
 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={`mk-background.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      #mk-bg-root {
+        /* ---- mk tokens: override these in the host to re-skin the family ---- */
+        --mk-font: "Inter", -apple-system, sans-serif;
+        --mk-stage: #f5f5f7;
+        --mk-base: #ffffff;
+        --mk-blob-1: #ff7ac8;
+        --mk-blob-2: #45d6c8;
+        --mk-stage-dark: #000000;
+        --mk-base-dark: #0a0a0c;
+        --mk-blob-1-dark: #7d5cff;
+        --mk-blob-2-dark: #2d1b69;
+        --mk-radius-card: 40px;
+        --mk-shadow: 0 30px 80px rgba(0, 0, 0, 0.18);
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--mk-stage);
+      }
+      #mk-bg-root.mk-dark {
+        background: var(--mk-stage-dark);
+      }
+      /* The "Bar" — an animatable rounded-rect mask. Full-bleed by default,
+         animatable down to a floating card over the stage. */
+      #mk-bg-card {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        border-radius: 0;
+        background: var(--mk-base);
+        box-shadow: var(--mk-shadow);
+      }
+      .mk-dark #mk-bg-card {
+        background: var(--mk-base-dark);
+      }
+      /* Soft radial blobs — the procedural "mesh gradient". Two oversized
+         radial gradients with a long falloff, drifting slowly. */
+      .mk-bg-blob {
+        position: absolute;
+        border-radius: 50%;
+        will-change: transform;
+      }
+      #mk-bg-blob1 {
+        background: radial-gradient(
+          circle closest-side,
+          var(--mk-blob-1) 0%,
+          rgba(255, 255, 255, 0) 72%
+        );
+      }
+      #mk-bg-blob2 {
+        background: radial-gradient(
+          circle closest-side,
+          var(--mk-blob-2) 0%,
+          rgba(255, 255, 255, 0) 72%
+        );
+      }
+      .mk-dark #mk-bg-blob1 {
+        background: radial-gradient(
+          circle closest-side,
+          var(--mk-blob-1-dark) 0%,
+          rgba(0, 0, 0, 0) 72%
+        );
+      }
+      .mk-dark #mk-bg-blob2 {
+        background: radial-gradient(
+          circle closest-side,
+          var(--mk-blob-2-dark) 0%,
+          rgba(0, 0, 0, 0) 72%
+        );
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="mk-bg-root"
+      data-composition-id="mk-background"
+      data-start="0"
+      data-duration="10"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="mk-bg-card">
+        <div id="mk-bg-blob1" class="mk-bg-blob" data-layout-allow-overflow></div>
+        <div id="mk-bg-blob2" class="mk-bg-blob" data-layout-allow-overflow></div>
+      </div>
+      <div
+        id="mk-bg-drv"
+        class="clip"
+        data-start="0"
+        data-duration="10"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- published parameters (inspector-style CONFIG) ---- */
+        var CONFIG = {
+          scheme: "light", // "light" | "dark"
+          animationIn: true, // fade/settle entrance
+          animationOut: true, // fade exit
+          drift: true, // ambient blob motion
+          // Soft BG blobs: center as fraction of canvas, radius in px
+          blob1: { x: 0.28, y: 0.32, r: 950, opacity: 0.85 },
+          blob2: { x: 0.74, y: 0.66, r: 1100, opacity: 0.8 },
+          // Bar mask (rounded-rect card). demo:true plays full-bleed -> card -> full-bleed
+          bar: {
+            demo: true, // full-bleed -> rounded card -> full-bleed showcase
+            x: 240,
+            y: 140,
+            width: 1440,
+            height: 800,
+            roundness: 40,
+          },
+          // Content opacity + frost only matter with footage beneath the block
+          contentOpacity: 1,
+          frostBlur: 0, // px; e.g. 24 for the frosted-card look over footage
+        };
+
+        var W = 1920,
+          H = 1080,
+          DUR = 10;
+
+        var root = document.getElementById("mk-bg-root");
+        var card = document.getElementById("mk-bg-card");
+        var blob1 = document.getElementById("mk-bg-blob1");
+        var blob2 = document.getElementById("mk-bg-blob2");
+
+        if (CONFIG.scheme === "dark") root.classList.add("mk-dark");
+
+        function placeBlob(el, b) {
+          var d = b.r * 2;
+          el.style.width = d + "px";
+          el.style.height = d + "px";
+          el.style.left = b.x * W - b.r + "px";
+          el.style.top = b.y * H - b.r + "px";
+          el.style.opacity = String(b.opacity);
+        }
+        placeBlob(blob1, CONFIG.blob1);
+        placeBlob(blob2, CONFIG.blob2);
+
+        card.style.opacity = String(CONFIG.contentOpacity);
+        if (CONFIG.frostBlur > 0) {
+          card.style.backdropFilter = "blur(" + CONFIG.frostBlur + "px) saturate(1.4)";
+        }
+
+        var tl = gsap.timeline({ paused: true });
+
+        /* entrance — fade + blobs settle (power3, no bounce) */
+        if (CONFIG.animationIn) {
+          tl.from(root, { opacity: 0, duration: 0.7, ease: "power2.out" }, 0);
+          tl.from([blob1, blob2], { scale: 1.14, duration: 1.2, ease: "power3.out" }, 0);
+        }
+
+        /* ambient drift — slow sine yoyo, seek-safe timeline tweens */
+        if (CONFIG.drift) {
+          tl.to(
+            blob1,
+            { x: 70, y: 42, duration: 2.35, ease: "sine.inOut", yoyo: true, repeat: 3 },
+            0.3,
+          );
+          tl.to(
+            blob2,
+            { x: -84, y: -36, duration: 2.35, ease: "sine.inOut", yoyo: true, repeat: 3 },
+            0.3,
+          );
+        }
+
+        /* bar-mask demo: full-bleed -> rounded card over the stage -> full-bleed.
+           Offset via x/y transforms, not top/left: layout properties snap to
+           integer device pixels and stutter under seek-by-frame capture. The
+           card's CSS base is top:0/left:0, so the transform values match 1:1. */
+        if (CONFIG.bar.demo) {
+          tl.to(
+            card,
+            {
+              y: CONFIG.bar.y,
+              x: CONFIG.bar.x,
+              width: CONFIG.bar.width,
+              height: CONFIG.bar.height,
+              borderRadius: CONFIG.bar.roundness,
+              duration: 1.1,
+              ease: "power3.inOut",
+            },
+            3.8,
+          );
+          tl.to(
+            card,
+            {
+              y: 0,
+              x: 0,
+              width: W,
+              height: H,
+              borderRadius: 0,
+              duration: 1.0,
+              ease: "power3.inOut",
+            },
+            7.6,
+          );
+        }
+
+        /* exit + hard kill */
+        if (CONFIG.animationOut) {
+          tl.to(root, { opacity: 0, duration: 0.4, ease: "power2.in" }, DUR - 0.45);
+        }
+        tl.set(root, { visibility: "hidden" }, DUR - 0.02);
+
+        window.__timelines["mk-background"] = tl;
+      })();
+    </script>
+  </body>
+</html>
+```
+
+</Accordion>
+
 {/* hf:generated-footer */}
 
 Tagged `background` `gradient` `minimal` `professional` `presentation`.
diff --git a/docs/catalog/blocks/mk-callout-highlight.mdx b/docs/catalog/blocks/mk-callout-highlight.mdx
index 49a91731cc..de3d142377 100644
--- a/docs/catalog/blocks/mk-callout-highlight.mdx
+++ b/docs/catalog/blocks/mk-callout-highlight.mdx
@@ -3,13 +3,13 @@ title: "Word-Sweep Highlight"
 description: "A sentence whose word-by-word emphasis is driven by a single scalar — tween it to sync the highlight with a voiceover"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-callout-highlight.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-callout-highlight.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/mk-callout-highlight.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Word-Sweep Highlight preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add mk-callout-highlight
-```
+<InstallCommand command="npx hyperframes add mk-callout-highlight" />
 
 That writes one file: `compositions/mk-callout-highlight.html`.
 
@@ -32,6 +32,171 @@ It runs for 8 seconds at 1920×1080. Paste this into your composition:
 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={`mk-callout-highlight.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      #mk-ch-root {
+        /* ---- mk tokens: override in the host to re-skin the family ---- */
+        --mk-font: "Inter", -apple-system, sans-serif;
+        --mk-ink: #1d1d1f;
+        /* faint = transient pre-sweep tier (tweens up to full ink) — distinct from the family --mk-ink-dim */
+        --mk-ink-faint: #bcbcc2;
+        --mk-ink-dark: #f5f5f7;
+        --mk-ink-faint-dark: rgba(245, 245, 247, 0.32);
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent; /* overlays footage or mk-background */
+      }
+      #mk-ch-box {
+        position: absolute;
+        font-family: var(--mk-font);
+        font-weight: 500;
+        letter-spacing: -0.015em;
+      }
+      .mk-ch-word {
+        display: inline;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="mk-ch-root"
+      data-composition-id="mk-callout-highlight"
+      data-start="0"
+      data-duration="8"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="mk-ch-box" data-layout-allow-occlusion></div>
+      <div
+        id="mk-ch-drv"
+        class="clip"
+        data-start="0"
+        data-duration="8"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- published parameters (inspector-style CONFIG) ----
+           The mechanic: one scalar (highlight progress 0..1) sweeps word-by-word
+           emphasis across the sentence — a "highlight amount"
+           slider. Tween the scalar over the speaker's sentence to follow speech. */
+        var CONFIG = {
+          scheme: "light", // "light" (ink on light bg) | "dark" (white on footage)
+          text: "Functionality was our goal from the very beginning",
+          fontSize: 60,
+          lineHeight: 1.3,
+          maxWidth: 700, // px; sentence wraps inside this
+          x: 1030, // box left edge; null = centered horizontally
+          y: null, // box top edge; null = centered vertically
+          align: "left",
+          sweep: { start: 1.2, end: 6.2 }, // block-local seconds, linear
+          animationIn: true, // fade/rise entrance before the sweep
+          animationOut: true,
+        };
+
+        var DUR = 8;
+        var root = document.getElementById("mk-ch-root");
+        var box = document.getElementById("mk-ch-box");
+
+        var FULL = CONFIG.scheme === "dark" ? "#f5f5f7" : "#1d1d1f";
+        var FAINT = CONFIG.scheme === "dark" ? "rgba(245,245,247,0.32)" : "#bcbcc2";
+
+        box.style.fontSize = CONFIG.fontSize + "px";
+        box.style.lineHeight = String(CONFIG.lineHeight);
+        box.style.maxWidth = CONFIG.maxWidth + "px";
+        box.style.textAlign = CONFIG.align;
+
+        /* build word spans */
+        var wordEls = [];
+        CONFIG.text.split(/\s+/).forEach(function (w, i) {
+          if (i > 0) box.appendChild(document.createTextNode(" "));
+          var span = document.createElement("span");
+          span.id = "mk-ch-w-" + i;
+          span.className = "mk-ch-word";
+          span.textContent = w;
+          span.style.color = FAINT;
+          box.appendChild(span);
+          wordEls.push(span);
+        });
+
+        /* position (measure after building) */
+        var rect = box.getBoundingClientRect();
+        box.style.left =
+          (CONFIG.x === null ? Math.round((1920 - rect.width) / 2) : CONFIG.x) + "px";
+        box.style.top =
+          (CONFIG.y === null ? Math.round((1080 - rect.height) / 2) : CONFIG.y) + "px";
+
+        /* state proxy: GSAP animates st.p, render derives every word color from it */
+        var st = { p: 0 };
+        var mix = gsap.utils.interpolate(FAINT, FULL);
+        function render() {
+          var k = st.p * wordEls.length;
+          for (var i = 0; i < wordEls.length; i++) {
+            var f = Math.max(0, Math.min(1, k - i));
+            wordEls[i].style.color = mix(f);
+          }
+        }
+
+        var tl = gsap.timeline({ paused: true });
+
+        if (CONFIG.animationIn) {
+          gsap.set(box, { opacity: 0, y: 24 });
+          tl.to(box, { opacity: 1, y: 0, duration: 0.7, ease: "power3.out" }, 0.3);
+        }
+
+        /* the highlight sweep — one scalar, linear so it tracks speech evenly.
+           To follow a real voiceover, replace with several tweens between
+           per-phrase progress values (keyframes on the slider). */
+        tl.to(
+          st,
+          { p: 1, duration: CONFIG.sweep.end - CONFIG.sweep.start, ease: "none" },
+          CONFIG.sweep.start,
+        );
+
+        if (CONFIG.animationOut) {
+          tl.to(box, { opacity: 0, y: -16, duration: 0.4, ease: "power2.in" }, DUR - 0.5);
+        }
+        tl.set(root, { visibility: "hidden" }, DUR - 0.02);
+
+        tl.eventCallback("onUpdate", render);
+        render();
+
+        window.__timelines["mk-callout-highlight"] = tl;
+      })();
+    </script>
+  </body>
+</html>
+```
+
+</Accordion>
+
 {/* hf:generated-footer */}
 
 Tagged `typography` `karaoke` `captions` `minimal`.
diff --git a/docs/catalog/blocks/mk-clone-wall-transition.mdx b/docs/catalog/blocks/mk-clone-wall-transition.mdx
index bc921077eb..e30d4c4989 100644
--- a/docs/catalog/blocks/mk-clone-wall-transition.mdx
+++ b/docs/catalog/blocks/mk-clone-wall-transition.mdx
@@ -3,13 +3,13 @@ title: "Text Clone Wall Transition"
 description: "Overlay transition: a tiled word wall covers the frame, inverts via difference blending, and clears — hard-cut the content beneath while covered"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-clone-wall-transition.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-clone-wall-transition.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/mk-clone-wall-transition.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Text Clone Wall Transition preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add mk-clone-wall-transition
-```
+<InstallCommand command="npx hyperframes add mk-clone-wall-transition" />
 
 That writes one file: `compositions/mk-clone-wall-transition.html`.
 
@@ -32,6 +32,240 @@ It runs for 2.4 seconds at 1920×1080. Paste this into your composition:
 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={`mk-clone-wall-transition.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      #mk-cw-root {
+        /* ---- mk tokens: override in the host to re-skin the family ---- */
+        --mk-font: "Inter", -apple-system, sans-serif;
+        --mk-ink: #1d1d1f;
+        --mk-paper: #ffffff;
+        --mk-blob-1: #ff7ac8;
+        --mk-blob-2: #45d6c8;
+        --mk-radius-card: 40px;
+        --mk-shadow: 0 30px 80px rgba(0, 0, 0, 0.22);
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent;
+      }
+      /* the wall: paper sheet + tiled word rows + inversion layer, exits as one */
+      #mk-cw-wall {
+        position: absolute;
+        inset: 0;
+        background: var(--mk-paper);
+        /* no overflow:hidden — the composition root clips; isolation keeps the
+           difference blend scoped to the wall's own tiles */
+        isolation: isolate;
+      }
+      .mk-cw-row {
+        position: absolute;
+        white-space: nowrap;
+        font-family: var(--mk-font);
+        font-weight: 600;
+        letter-spacing: -0.02em;
+        color: var(--mk-ink);
+        line-height: 1;
+      }
+      .mk-cw-tile {
+        display: inline-block;
+      }
+      /* inversion sweep — a paper-colored rect in difference blend:
+         a paper-colored rect XORs the wall, flipping paper<->ink as it arrives */
+      #mk-cw-invert {
+        position: absolute;
+        inset: 0;
+        background: var(--mk-paper);
+        mix-blend-mode: difference;
+      }
+      /* the outgoing frame shrinking to a rounded card mid-transition */
+      #mk-cw-card {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        border-radius: 0;
+        overflow: hidden;
+        background: linear-gradient(
+          120deg,
+          #fdfbfd 0%,
+          var(--mk-blob-1) 38%,
+          var(--mk-blob-2) 100%
+        );
+        box-shadow: var(--mk-shadow);
+        transform-origin: 50% 50%;
+      }
+      #mk-cw-card img {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="mk-cw-root"
+      data-composition-id="mk-clone-wall-transition"
+      data-start="0"
+      data-duration="2.4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="mk-cw-wall" data-layout-allow-overflow>
+        <div id="mk-cw-tiles" data-layout-allow-overflow></div>
+        <div id="mk-cw-invert" data-layout-allow-overflow></div>
+      </div>
+      <div id="mk-cw-card" data-layout-allow-overflow></div>
+      <div
+        id="mk-cw-drv"
+        class="clip"
+        data-start="0"
+        data-duration="2.4"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- published parameters (inspector-style CONFIG) ----
+           Overlay-transition model: place this block spanning the host's cut
+           point (e.g. start 0.9s before the cut). The wall fully covers the
+           frame from ~0.6s to ~1.9s local — hard-cut the content beneath
+           anywhere in that window. */
+        var CONFIG = {
+          // no scheme param — scheme-agnostic; re-skin via the --mk-* tokens
+          word: "HyperFrames", // the cloned word
+          fontSize: 240, // px — the tiled text size
+          spreadX: 90, // px gap between tiles (tile spread X)
+          spreadY: 60, // px gap between rows (Spread Y)
+          brickOffset: true, // alternate rows offset by half a tile
+          card: {
+            enabled: true, // outgoing-frame card. In real use set src to a
+            src: null, //     still of the outgoing clip; null = family gradient
+          },
+          driftX: -46, // slow wall drift during the hold
+        };
+
+        var W = 1920,
+          H = 1080,
+          DUR = 2.4;
+
+        var root = document.getElementById("mk-cw-root");
+        var wall = document.getElementById("mk-cw-wall");
+        var tilesBox = document.getElementById("mk-cw-tiles");
+        var invert = document.getElementById("mk-cw-invert");
+        var card = document.getElementById("mk-cw-card");
+
+        /* build the tile wall — rows of repeated words, brick-offset */
+        var rowH = CONFIG.fontSize + CONFIG.spreadY;
+        var rows = Math.ceil(H / rowH) + 1;
+        /* rough tile width estimate to fill each row past both edges */
+        var tileW = CONFIG.word.length * CONFIG.fontSize * 0.58 + CONFIG.spreadX;
+        var perRow = Math.ceil(W / tileW) + 2;
+        for (var r = 0; r < rows; r++) {
+          var row = document.createElement("div");
+          row.id = "mk-cw-row-" + r;
+          row.className = "mk-cw-row";
+          /* rows intentionally run past the canvas and sit beneath the card */
+          row.setAttribute("data-layout-allow-overflow", "");
+          row.setAttribute("data-layout-allow-occlusion", "");
+          row.style.fontSize = CONFIG.fontSize + "px";
+          row.style.top = r * rowH - CONFIG.fontSize * 0.35 + "px";
+          var offset = CONFIG.brickOffset && r % 2 === 1 ? -Math.round(tileW / 2) : 0;
+          row.style.left = offset - tileW + "px";
+          for (var c = 0; c < perRow + 1; c++) {
+            var tile = document.createElement("span");
+            tile.className = "mk-cw-tile";
+            tile.textContent = CONFIG.word;
+            tile.style.marginRight = CONFIG.spreadX + "px";
+            row.appendChild(tile);
+          }
+          tilesBox.appendChild(row);
+        }
+
+        if (CONFIG.card.enabled && CONFIG.card.src) {
+          var img = document.createElement("img");
+          img.src = CONFIG.card.src;
+          card.appendChild(img);
+        }
+        if (!CONFIG.card.enabled) card.style.display = "none";
+
+        var tl = gsap.timeline({ paused: true });
+
+        /* The wall sits in place from t=0, fully hidden beneath the
+           full-bleed card — the card's shrink IS the wall's reveal. */
+
+        /* 0.2–0.95  outgoing frame shrinks to a rounded card on the wall.
+           x/y rather than left/top — layout properties snap to integer device
+           pixels under seek-by-frame capture. Base is top:0/left:0, so the
+           values carry over unchanged, and the later scale composes cleanly. */
+        if (CONFIG.card.enabled) {
+          tl.to(
+            card,
+            {
+              y: 330,
+              x: 640,
+              width: 640,
+              height: 420,
+              borderRadius: 40,
+              duration: 0.75,
+              ease: "power3.inOut",
+            },
+            0.2,
+          );
+          /* 1.35–1.75  card is put away */
+          tl.to(card, { scale: 0.6, opacity: 0, duration: 0.4, ease: "power2.in" }, 1.35);
+        }
+
+        /* slow drift keeps the wall alive during the hold */
+        tl.to(tilesBox, { x: CONFIG.driftX, duration: 1.8, ease: "sine.inOut" }, 0.3);
+
+        /* 0.85–1.5  inversion sweeps in and STAYS — wall flips ink<->paper */
+        gsap.set(invert, { x: -W });
+        tl.to(invert, { x: 0, duration: 0.65, ease: "power3.inOut" }, 0.85);
+
+        /* 1.9–2.35  the inverted wall fades off, revealing the cut beneath */
+        tl.to(wall, { opacity: 0, duration: 0.45, ease: "power2.inOut" }, 1.9);
+
+        /* hard kills — wall and card die the moment their fades complete */
+        if (CONFIG.card.enabled) tl.set(card, { visibility: "hidden" }, 1.76);
+        tl.set(root, { visibility: "hidden" }, 2.36);
+
+        window.__timelines["mk-clone-wall-transition"] = tl;
+      })();
+    </script>
+  </body>
+</html>
+```
+
+</Accordion>
+
 {/* hf:generated-footer */}
 
 Tagged `transition` `typography` `wipe`.
diff --git a/docs/catalog/blocks/mk-line-graph.mdx b/docs/catalog/blocks/mk-line-graph.mdx
index 8c30ca0701..559c0a0b3b 100644
--- a/docs/catalog/blocks/mk-line-graph.mdx
+++ b/docs/catalog/blocks/mk-line-graph.mdx
@@ -3,13 +3,13 @@ title: "Minimal Line Graph"
 description: "One or two SVG series draw on with dots popping and value labels riding the draw front; dim baseline axis, x-labels, color-dot legend"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-line-graph.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-line-graph.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/mk-line-graph.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Minimal Line Graph preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add mk-line-graph
-```
+<InstallCommand command="npx hyperframes add mk-line-graph" />
 
 That writes one file: `compositions/mk-line-graph.html`.
 
@@ -32,6 +32,307 @@ It runs for 7 seconds at 1920×1080. Paste this into your composition:
 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={`mk-line-graph.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      #mk-lg-root {
+        /* ---- mk tokens: override in the host to re-skin the family ---- */
+        --mk-font: "Inter", -apple-system, sans-serif;
+        --mk-ink: #1d1d1f;
+        --mk-ink-dim: #6e6e73;
+        --mk-accent: #0071e3;
+        --mk-paper: #ffffff;
+        --mk-blob-2: #45d6c8;
+        --mk-axis: rgba(29, 29, 31, 0.22);
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent; /* overlays footage or mk-background */
+        font-family: var(--mk-font);
+      }
+      #mk-lg-svg {
+        position: absolute;
+        inset: 0;
+      }
+      .mk-lg-line {
+        fill: none;
+        stroke-width: 5;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+      .mk-lg-dot {
+        stroke-width: 4;
+        fill: var(--mk-paper);
+      }
+      .mk-lg-axis {
+        stroke: var(--mk-axis);
+        stroke-width: 2;
+      }
+      .mk-lg-value {
+        position: absolute;
+        font-weight: 600;
+        font-size: 30px;
+        letter-spacing: -0.01em;
+        color: var(--mk-ink);
+        font-variant-numeric: tabular-nums;
+        /* Horizontal centring only. The label's vertical offset is baked into
+           `top` instead of a CSS translate, because the entrance tween animates
+           `y` and GSAP rewrites this transform, dropping any vertical shift. */
+        transform: translate(-50%, 0);
+        line-height: 38px;
+        white-space: nowrap;
+      }
+      .mk-lg-xlabel {
+        position: absolute;
+        font-weight: 400;
+        font-size: 26px;
+        color: var(--mk-ink-dim);
+        transform: translateX(-50%);
+        white-space: nowrap;
+      }
+      .mk-lg-legend {
+        position: absolute;
+        display: flex;
+        gap: 40px;
+      }
+      .mk-lg-legend-item {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        font-weight: 500;
+        font-size: 30px;
+        color: var(--mk-ink-dim);
+      }
+      .mk-lg-legend-dot {
+        width: 14px;
+        height: 14px;
+        border-radius: 50%;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="mk-lg-root"
+      data-composition-id="mk-line-graph"
+      data-start="0"
+      data-duration="7"
+      data-width="1920"
+      data-height="1080"
+    >
+      <svg id="mk-lg-svg" viewBox="0 0 1920 1080"></svg>
+      <div id="mk-lg-labels"></div>
+      <div
+        id="mk-lg-drv"
+        class="clip"
+        data-start="0"
+        data-duration="7"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- published parameters (inspector-style CONFIG) ----
+           A minimal presentation line graph: 1–2 series draw on, dots pop, value labels
+           ride their points, axes dimmer than labels (clear hierarchy). */
+        var CONFIG = {
+          // no scheme param — scheme-agnostic; re-skin via the --mk-* tokens
+          series: [
+            { name: "Renders", color: null /* accent */, values: [12, 26, 22, 38, 44, 58] },
+            { name: "Projects", color: null /* blob-2 */, values: [8, 14, 18, 16, 28, 36] },
+          ],
+          xLabels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
+          showValues: true,
+          area: { x: 160, y: 240, w: 980, h: 500 }, // plot rectangle
+          animationIn: true,
+          animationOut: true,
+        };
+
+        var DUR = 7;
+        var NS = "http://www.w3.org/2000/svg";
+        var root = document.getElementById("mk-lg-root");
+        var svg = document.getElementById("mk-lg-svg");
+        var labels = document.getElementById("mk-lg-labels");
+        var A = CONFIG.area;
+
+        var accent = getComputedStyle(root).getPropertyValue("--mk-accent").trim();
+        var blob2 = getComputedStyle(root).getPropertyValue("--mk-blob-2").trim();
+        if (CONFIG.series[1] && !CONFIG.series[1].color) CONFIG.series[1].color = blob2;
+
+        /* scale: 0..max(all values)*1.15 into the plot rect */
+        var max = 0;
+        CONFIG.series.forEach(function (s) {
+          s.values.forEach(function (v) {
+            if (v > max) max = v;
+          });
+        });
+        max *= 1.15;
+        var n = CONFIG.series[0].values.length;
+        function px(i) {
+          return A.x + (i / (n - 1)) * A.w;
+        }
+        function py(v) {
+          return A.y + A.h - (v / max) * A.h;
+        }
+
+        /* baseline axis */
+        var axis = document.createElementNS(NS, "line");
+        axis.setAttribute("class", "mk-lg-axis");
+        axis.setAttribute("x1", A.x - 20);
+        axis.setAttribute("y1", A.y + A.h);
+        axis.setAttribute("x2", A.x + A.w + 20);
+        axis.setAttribute("y2", A.y + A.h);
+        axis.id = "mk-lg-axis";
+        svg.appendChild(axis);
+
+        /* series paths, dots, value labels */
+        var paths = [],
+          dots = [],
+          vals = [];
+        CONFIG.series.forEach(function (s, si) {
+          var color = s.color || accent;
+          var d = s.values
+            .map(function (v, i) {
+              return (i === 0 ? "M" : "L") + px(i) + " " + py(v);
+            })
+            .join(" ");
+          var path = document.createElementNS(NS, "path");
+          path.setAttribute("class", "mk-lg-line");
+          path.setAttribute("d", d);
+          path.setAttribute("stroke", color);
+          path.id = "mk-lg-path-" + si;
+          svg.appendChild(path);
+          paths.push(path);
+
+          s.values.forEach(function (v, i) {
+            var dot = document.createElementNS(NS, "circle");
+            dot.setAttribute("class", "mk-lg-dot");
+            dot.setAttribute("cx", px(i));
+            dot.setAttribute("cy", py(v));
+            dot.setAttribute("r", 9);
+            dot.setAttribute("stroke", color);
+            dot.id = "mk-lg-dot-" + si + "-" + i;
+            svg.appendChild(dot);
+            dots.push({ el: dot, si: si, i: i });
+
+            if (CONFIG.showValues) {
+              var val = document.createElement("div");
+              /* Series after the first label downward. With every series
+                 labelling upward the numbers collide wherever the lines run
+                 close together. GAP clears the dot radius plus line stroke. */
+              var below = si > 0;
+              var GAP = 22;
+              val.className = "mk-lg-value";
+              val.id = "mk-lg-val-" + si + "-" + i;
+              val.textContent = v;
+              val.style.left = px(i) + "px";
+              val.style.top = py(v) + (below ? GAP : -(GAP + 38)) + "px";
+              labels.appendChild(val);
+              vals.push({ el: val, si: si, i: i });
+            }
+          });
+        });
+
+        /* x labels + legend */
+        CONFIG.xLabels.slice(0, n).forEach(function (t, i) {
+          var xl = document.createElement("div");
+          xl.className = "mk-lg-xlabel";
+          xl.id = "mk-lg-xl-" + i;
+          xl.textContent = t;
+          xl.style.left = px(i) + "px";
+          xl.style.top = A.y + A.h + 24 + "px";
+          labels.appendChild(xl);
+        });
+        var legend = document.createElement("div");
+        legend.className = "mk-lg-legend";
+        legend.id = "mk-lg-legend";
+        legend.style.left = A.x + "px";
+        legend.style.top = A.y + A.h + 90 + "px";
+        CONFIG.series.forEach(function (s) {
+          var item = document.createElement("div");
+          item.className = "mk-lg-legend-item";
+          var dot = document.createElement("span");
+          dot.className = "mk-lg-legend-dot";
+          dot.style.background = s.color || accent;
+          item.appendChild(dot);
+          item.appendChild(document.createTextNode(s.name));
+          legend.appendChild(item);
+        });
+        labels.appendChild(legend);
+
+        var tl = gsap.timeline({ paused: true });
+        var DRAW = 1.3;
+
+        /* entrance: axis + x labels settle first */
+        gsap.set([axis, legend], { opacity: 0 });
+        tl.to(axis, { opacity: 1, duration: 0.5, ease: "power2.out" }, 0.2);
+        CONFIG.xLabels.slice(0, n).forEach(function (t, i) {
+          var xl = document.getElementById("mk-lg-xl-" + i);
+          gsap.set(xl, { opacity: 0, y: 10 });
+          tl.to(xl, { opacity: 1, y: 0, duration: 0.4, ease: "power2.out" }, 0.25 + i * 0.05);
+        });
+
+        /* draw each series, dots + values riding the draw front */
+        CONFIG.series.forEach(function (s, si) {
+          var t0 = (CONFIG.animationIn ? 0.5 : 0) + si * 0.35;
+          var path = paths[si];
+          var len = path.getTotalLength();
+          gsap.set(path, { strokeDasharray: len, strokeDashoffset: len });
+          tl.to(path, { strokeDashoffset: 0, duration: DRAW, ease: "power2.inOut" }, t0);
+
+          s.values.forEach(function (v, i) {
+            var dot = document.getElementById("mk-lg-dot-" + si + "-" + i);
+            var td = t0 + (i / (n - 1)) * DRAW * 0.92;
+            gsap.set(dot, { scale: 0, transformOrigin: "50% 50%" });
+            tl.to(dot, { scale: 1, duration: 0.35, ease: "back.out(1.2)" }, td);
+            if (CONFIG.showValues) {
+              var val = document.getElementById("mk-lg-val-" + si + "-" + i);
+              gsap.set(val, { opacity: 0, y: 8 });
+              tl.to(val, { opacity: 1, y: 0, duration: 0.35, ease: "power2.out" }, td + 0.06);
+            }
+          });
+        });
+
+        tl.to(legend, { opacity: 1, duration: 0.5, ease: "power2.out" }, 2.3);
+
+        /* exit + hard kill */
+        if (CONFIG.animationOut) {
+          tl.to([svg, labels], { opacity: 0, y: -20, duration: 0.4, ease: "power2.in" }, DUR - 0.5);
+        }
+        tl.set(root, { visibility: "hidden" }, DUR - 0.02);
+
+        window.__timelines["mk-line-graph"] = tl;
+      })();
+    </script>
+  </body>
+</html>
+```
+
+</Accordion>
+
 {/* hf:generated-footer */}
 
 Tagged `data-viz` `chart` `graph` `minimal`.
diff --git a/docs/catalog/blocks/mk-placeholder-grid.mdx b/docs/catalog/blocks/mk-placeholder-grid.mdx
index 57773aa67a..3f0436a2c9 100644
--- a/docs/catalog/blocks/mk-placeholder-grid.mdx
+++ b/docs/catalog/blocks/mk-placeholder-grid.mdx
@@ -3,13 +3,13 @@ title: "Rounded Media Grid"
 description: "N-up rounded-corner media grid (2-up, 3-up, 4-up, 3x2, hero plus two): per-cell inside-scale framing, staggered box-in entrance, slow settle"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-placeholder-grid.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-placeholder-grid.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/mk-placeholder-grid.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Rounded Media Grid preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add mk-placeholder-grid
-```
+<InstallCommand command="npx hyperframes add mk-placeholder-grid" />
 
 That writes one file: `compositions/mk-placeholder-grid.html`.
 
@@ -32,6 +32,248 @@ It runs for 8 seconds at 1920×1080. Paste this into your composition:
 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={`mk-placeholder-grid.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      #mk-pg-root {
+        /* ---- mk tokens: override in the host to re-skin the family ---- */
+        --mk-font: "Inter", -apple-system, sans-serif;
+        --mk-ink-dim: #6e6e73;
+        --mk-paper: #ffffff;
+        --mk-blob-1: #ff7ac8;
+        --mk-blob-2: #45d6c8;
+        --mk-accent-dark: #7d5cff;
+        --mk-blob-1-soft: #ffd3ec;
+        --mk-blob-2-soft: #d9fff8;
+        --mk-accent-dark-soft: #cabdff;
+        --mk-well-warm: #ffb86b;
+        --mk-well-warm-soft: #ffe3c2;
+        --mk-well-sky: #5cb8ff;
+        --mk-well-sky-soft: #cfe9ff;
+        --mk-well-rose: #ff8f8f;
+        --mk-well-rose-soft: #ffd6d6;
+        --mk-well-num: rgba(255, 255, 255, 0.9);
+        --mk-radius-card: 40px;
+        --mk-shadow: 0 24px 64px rgba(0, 0, 0, 0.16);
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent; /* pair with mk-background beneath for the gradient backdrop */
+      }
+      .mk-pg-cell {
+        position: absolute;
+        border-radius: var(--mk-radius-card);
+        overflow: hidden;
+        background: var(--mk-paper);
+        box-shadow: var(--mk-shadow);
+      }
+      .mk-pg-media {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+      /* empty drop-zone well: soft gradient + index numeral */
+      .mk-pg-well {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .mk-pg-well-num {
+        font-family: var(--mk-font);
+        font-weight: 600;
+        font-size: 88px;
+        letter-spacing: -0.02em;
+        color: var(--mk-well-num);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="mk-pg-root"
+      data-composition-id="mk-placeholder-grid"
+      data-start="0"
+      data-duration="8"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="mk-pg-grid"></div>
+      <div
+        id="mk-pg-drv"
+        class="clip"
+        data-start="0"
+        data-duration="8"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- published parameters (inspector-style CONFIG) ---- */
+        var CONFIG = {
+          // no scheme param — scheme-agnostic; re-skin via the --mk-* tokens
+          layout: "1+2", // "2up" | "3up" | "4up" | "3x2" | "1+2" (hero left + two stacked)
+          margin: 120, // outer margin, px
+          gap: 40, // px between cells
+          radius: 40, // cell corner radius (rounded-edge look)
+          // One entry per cell (in layout order). src: image path, or null for a
+          // styled drop-zone well. insideScale: media scale inside the mask —
+          // an "inside scale" convention (1 = cover-fit).
+          cells: [
+            { src: null, insideScale: 1 },
+            { src: null, insideScale: 1 },
+            { src: null, insideScale: 1 },
+          ],
+          kenBurns: true, // slow media settle inside the mask
+          stagger: 0.15, // "box, box, box" entrance
+          animationIn: true,
+          animationOut: true,
+        };
+
+        /* decorative fills for empty wells (cycled) */
+        var WELL_FILLS = [
+          "linear-gradient(135deg, var(--mk-blob-1) 0%, var(--mk-blob-1-soft) 100%)",
+          "linear-gradient(135deg, var(--mk-blob-2) 0%, var(--mk-blob-2-soft) 100%)",
+          "linear-gradient(135deg, var(--mk-accent-dark) 0%, var(--mk-accent-dark-soft) 100%)",
+          "linear-gradient(135deg, var(--mk-well-warm) 0%, var(--mk-well-warm-soft) 100%)",
+          "linear-gradient(135deg, var(--mk-well-sky) 0%, var(--mk-well-sky-soft) 100%)",
+          "linear-gradient(135deg, var(--mk-well-rose) 0%, var(--mk-well-rose-soft) 100%)",
+        ];
+
+        var W = 1920,
+          H = 1080,
+          DUR = 8;
+
+        function rects(layout, m, g) {
+          var iw = W - 2 * m,
+            ih = H - 2 * m;
+          function grid(cols, rows) {
+            var cw = (iw - (cols - 1) * g) / cols,
+              ch = (ih - (rows - 1) * g) / rows,
+              out = [];
+            for (var r = 0; r < rows; r++)
+              for (var c = 0; c < cols; c++)
+                out.push({ x: m + c * (cw + g), y: m + r * (ch + g), w: cw, h: ch });
+            return out;
+          }
+          if (layout === "2up") return grid(2, 1);
+          if (layout === "3up") return grid(3, 1);
+          if (layout === "4up") return grid(2, 2);
+          if (layout === "3x2") return grid(3, 2);
+          /* "1+2": hero left (58%), two stacked right */
+          var w1 = Math.round((iw - g) * 0.58),
+            w2 = iw - g - w1,
+            h2 = (ih - g) / 2;
+          return [
+            { x: m, y: m, w: w1, h: ih },
+            { x: m + w1 + g, y: m, w: w2, h: h2 },
+            { x: m + w1 + g, y: m + h2 + g, w: w2, h: h2 },
+          ];
+        }
+
+        var root = document.getElementById("mk-pg-root");
+        var grid = document.getElementById("mk-pg-grid");
+        var R = rects(CONFIG.layout, CONFIG.margin, CONFIG.gap);
+
+        var cells = [],
+          medias = [];
+        R.forEach(function (r, i) {
+          var conf = CONFIG.cells[i] || {};
+          var cell = document.createElement("div");
+          cell.id = "mk-pg-cell-" + i;
+          cell.className = "mk-pg-cell";
+          cell.style.left = r.x + "px";
+          cell.style.top = r.y + "px";
+          cell.style.width = r.w + "px";
+          cell.style.height = r.h + "px";
+          cell.style.borderRadius = CONFIG.radius + "px";
+
+          var inner;
+          if (conf.src) {
+            inner = document.createElement("img");
+            inner.className = "mk-pg-media";
+            inner.src = conf.src;
+          } else {
+            inner = document.createElement("div");
+            inner.className = "mk-pg-well";
+            inner.style.background = WELL_FILLS[i % WELL_FILLS.length];
+            var num = document.createElement("span");
+            num.className = "mk-pg-well-num";
+            num.textContent = String(i + 1);
+            inner.appendChild(num);
+          }
+          inner.id = "mk-pg-inner-" + i;
+          inner.setAttribute("data-layout-allow-overflow", ""); // ken-burns scales past the mask by design
+          cell.appendChild(inner);
+          grid.appendChild(cell);
+          cells.push(cell);
+          medias.push(inner);
+
+          gsap.set(inner, { scale: conf.insideScale || 1 });
+        });
+
+        var tl = gsap.timeline({ paused: true });
+
+        cells.forEach(function (cell, i) {
+          var t0 = (CONFIG.animationIn ? 0.3 : 0) + i * CONFIG.stagger;
+
+          if (CONFIG.animationIn) {
+            gsap.set(cell, { opacity: 0, scale: 0.92, y: 28 });
+            tl.to(cell, { opacity: 1, scale: 1, y: 0, duration: 0.65, ease: "power3.out" }, t0);
+          }
+
+          if (CONFIG.kenBurns) {
+            var base = (CONFIG.cells[i] && CONFIG.cells[i].insideScale) || 1;
+            tl.fromTo(
+              medias[i],
+              { scale: base * 1.06 },
+              { scale: base, duration: DUR - t0 - 0.6, ease: "sine.out" },
+              t0,
+            );
+          }
+        });
+
+        /* exit + hard kill */
+        if (CONFIG.animationOut) {
+          tl.to(grid, { opacity: 0, y: -20, duration: 0.4, ease: "power2.in" }, DUR - 0.5);
+        }
+        tl.set(root, { visibility: "hidden" }, DUR - 0.02);
+
+        window.__timelines["mk-placeholder-grid"] = tl;
+      })();
+    </script>
+  </body>
+</html>
+```
+
+</Accordion>
+
 {/* hf:generated-footer */}
 
 Tagged `placeholder` `media` `grid` `minimal`.
diff --git a/docs/catalog/blocks/mk-progress-stat.mdx b/docs/catalog/blocks/mk-progress-stat.mdx
index ef713b4df4..1de8fa28b7 100644
--- a/docs/catalog/blocks/mk-progress-stat.mdx
+++ b/docs/catalog/blocks/mk-progress-stat.mdx
@@ -3,13 +3,13 @@ title: "Count-Up Stat Card"
 description: "Big-numeral statistic with count-up, label, thin progress track filling to value/max, and caption; light and dark schemes"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-progress-stat.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-progress-stat.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/mk-progress-stat.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Count-Up Stat Card preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add mk-progress-stat
-```
+<InstallCommand command="npx hyperframes add mk-progress-stat" />
 
 That writes one file: `compositions/mk-progress-stat.html`.
 
@@ -32,6 +32,200 @@ It runs for 7 seconds at 1920×1080. Paste this into your composition:
 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={`mk-progress-stat.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      #mk-ps-root {
+        /* ---- mk tokens: override in the host to re-skin the family ---- */
+        --mk-font: "Inter", -apple-system, sans-serif;
+        --mk-ink: #1d1d1f;
+        --mk-ink-dim: #6e6e73;
+        --mk-ink-dark: #f5f5f7;
+        --mk-ink-dim-dark: #a1a1a6;
+        --mk-accent: #0071e3;
+        --mk-accent-dark: #7d5cff;
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent; /* overlays footage or mk-background */
+      }
+      #mk-ps-group {
+        position: absolute;
+        font-family: var(--mk-font);
+      }
+      #mk-ps-num {
+        font-weight: 600;
+        font-size: 190px;
+        line-height: 1;
+        letter-spacing: -0.03em;
+        color: var(--mk-ink);
+        font-variant-numeric: tabular-nums;
+      }
+      #mk-ps-label {
+        margin-top: 10px;
+        font-weight: 500;
+        font-size: 42px;
+        letter-spacing: -0.01em;
+        color: var(--mk-ink);
+      }
+      #mk-ps-track {
+        position: relative;
+        margin-top: 28px;
+        height: 6px;
+        border-radius: 3px;
+        background: rgba(29, 29, 31, 0.1);
+        overflow: hidden;
+      }
+      #mk-ps-fill {
+        position: absolute;
+        inset: 0;
+        border-radius: 3px;
+        background: var(--mk-accent);
+        transform-origin: left center;
+      }
+      #mk-ps-caption {
+        margin-top: 22px;
+        font-weight: 400;
+        font-size: 30px;
+        color: var(--mk-ink-dim);
+      }
+      .mk-dark #mk-ps-num,
+      .mk-dark #mk-ps-label {
+        color: var(--mk-ink-dark);
+      }
+      .mk-dark #mk-ps-caption {
+        color: var(--mk-ink-dim-dark);
+      }
+      .mk-dark #mk-ps-track {
+        background: rgba(245, 245, 247, 0.18);
+      }
+      .mk-dark #mk-ps-fill {
+        background: var(--mk-accent-dark);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="mk-ps-root"
+      data-composition-id="mk-progress-stat"
+      data-start="0"
+      data-duration="7"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="mk-ps-group">
+        <div id="mk-ps-num">0</div>
+        <div id="mk-ps-label"></div>
+        <div id="mk-ps-track"><div id="mk-ps-fill"></div></div>
+        <div id="mk-ps-caption"></div>
+      </div>
+      <div
+        id="mk-ps-drv"
+        class="clip"
+        data-start="0"
+        data-duration="7"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- published parameters (inspector-style CONFIG) ----
+           A "22 · Goals reached" progress card: big count-up
+           numeral, label, thin accent track filling to value/max, caption. */
+        var CONFIG = {
+          scheme: "light", // "light" | "dark"
+          value: 22,
+          suffix: "", // e.g. "%", "K"
+          label: "Goals reached",
+          caption: "Great job, we are getting closer!",
+          max: 30, // track fills to value/max
+          trackWidth: 480, // px
+          x: 1300, // group left edge; null = centered
+          y: 250, // group top edge; null = centered
+          animationIn: true,
+          animationOut: true,
+        };
+
+        var DUR = 7;
+        var root = document.getElementById("mk-ps-root");
+        var group = document.getElementById("mk-ps-group");
+        var num = document.getElementById("mk-ps-num");
+        var fill = document.getElementById("mk-ps-fill");
+
+        if (CONFIG.scheme === "dark") root.classList.add("mk-dark");
+        document.getElementById("mk-ps-label").textContent = CONFIG.label;
+        document.getElementById("mk-ps-caption").textContent = CONFIG.caption;
+        document.getElementById("mk-ps-track").style.width = CONFIG.trackWidth + "px";
+
+        /* position (measure after filling text) */
+        var rect = group.getBoundingClientRect();
+        group.style.left =
+          (CONFIG.x === null ? Math.round((1920 - rect.width) / 2) : CONFIG.x) + "px";
+        group.style.top =
+          (CONFIG.y === null ? Math.round((1080 - rect.height) / 2) : CONFIG.y) + "px";
+
+        var tl = gsap.timeline({ paused: true });
+
+        if (CONFIG.animationIn) {
+          gsap.set(group, { opacity: 0, y: 28 });
+          tl.to(group, { opacity: 1, y: 0, duration: 0.7, ease: "power3.out" }, 0.3);
+        }
+
+        /* count-up + track fill on the same ease (the data-viz recipe) */
+        var st = { v: 0 };
+        tl.to(
+          st,
+          {
+            v: CONFIG.value,
+            duration: 1.6,
+            ease: "power2.out",
+            onUpdate: function () {
+              num.textContent = Math.round(st.v) + CONFIG.suffix;
+            },
+          },
+          0.5,
+        );
+        gsap.set(fill, { scaleX: 0 });
+        tl.to(fill, { scaleX: CONFIG.value / CONFIG.max, duration: 1.6, ease: "power2.out" }, 0.5);
+
+        if (CONFIG.animationOut) {
+          tl.to(group, { opacity: 0, y: -20, duration: 0.4, ease: "power2.in" }, DUR - 0.5);
+        }
+        tl.set(root, { visibility: "hidden" }, DUR - 0.02);
+
+        window.__timelines["mk-progress-stat"] = tl;
+      })();
+    </script>
+  </body>
+</html>
+```
+
+</Accordion>
+
 {/* hf:generated-footer */}
 
 Tagged `data-viz` `stat` `minimal`.
diff --git a/docs/catalog/blocks/mk-specs-list.mdx b/docs/catalog/blocks/mk-specs-list.mdx
index 5be540bb56..48d04b9f0d 100644
--- a/docs/catalog/blocks/mk-specs-list.mdx
+++ b/docs/catalog/blocks/mk-specs-list.mdx
@@ -3,13 +3,13 @@ title: "Specs Checklist"
 description: "Left-aligned specs/traits checklist over footage or a board: rows slide in staggered with an accent underline sweep; light and dark schemes"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-specs-list.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-specs-list.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/mk-specs-list.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Specs Checklist preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add mk-specs-list
-```
+<InstallCommand command="npx hyperframes add mk-specs-list" />
 
 That writes one file: `compositions/mk-specs-list.html`.
 
@@ -32,6 +32,237 @@ It runs for 8 seconds at 1920×1080. Paste this into your composition:
 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={`mk-specs-list.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      #mk-sl-root {
+        /* ---- mk tokens: override in the host to re-skin the family ---- */
+        --mk-font: "Inter", -apple-system, sans-serif;
+        --mk-ink: #1d1d1f;
+        --mk-ink-dim: #6e6e73;
+        --mk-ink-dark: #f5f5f7;
+        --mk-ink-dim-dark: #a1a1a6;
+        --mk-accent: #0071e3;
+        --mk-accent-dark: #7d5cff;
+        --mk-hairline: 2px;
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent; /* overlays footage or mk-background */
+      }
+      #mk-sl-scrim {
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 62%);
+        opacity: 0;
+      }
+      #mk-sl-col {
+        position: absolute;
+        display: flex;
+        flex-direction: column;
+      }
+      .mk-sl-row {
+        font-family: var(--mk-font);
+        line-height: 1;
+        opacity: 0;
+      }
+      .mk-sl-text {
+        display: flex;
+        align-items: baseline;
+        gap: 18px;
+        white-space: nowrap;
+      }
+      .mk-sl-label {
+        font-weight: 600;
+        font-size: 46px;
+        letter-spacing: -0.015em;
+        color: var(--mk-ink);
+      }
+      .mk-sl-value {
+        font-weight: 400;
+        font-size: 40px;
+        letter-spacing: -0.01em;
+        color: var(--mk-ink-dim);
+      }
+      .mk-sl-line {
+        position: relative;
+        margin-top: 22px;
+        height: var(--mk-hairline);
+        background: rgba(0, 0, 0, 0.1);
+        border-radius: 2px;
+        overflow: hidden;
+      }
+      .mk-sl-line-fill {
+        position: absolute;
+        inset: 0;
+        background: var(--mk-accent);
+        transform-origin: left center;
+      }
+      /* dark scheme: white rows for use over footage (overlay look) */
+      .mk-dark .mk-sl-label {
+        color: var(--mk-ink-dark);
+      }
+      .mk-dark .mk-sl-value {
+        color: var(--mk-ink-dim-dark);
+      }
+      .mk-dark .mk-sl-line {
+        background: rgba(255, 255, 255, 0.18);
+      }
+      .mk-dark .mk-sl-line-fill {
+        background: var(--mk-accent-dark);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="mk-sl-root"
+      data-composition-id="mk-specs-list"
+      data-start="0"
+      data-duration="8"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="mk-sl-scrim"></div>
+      <div id="mk-sl-col"></div>
+      <div
+        id="mk-sl-drv"
+        class="clip"
+        data-start="0"
+        data-duration="8"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- published parameters (inspector-style CONFIG) ---- */
+        var CONFIG = {
+          scheme: "light", // "light" (ink rows) | "dark" (white rows, for footage)
+          rows: [
+            { label: "Design", value: "Minimal, clean lines" },
+            { label: "Typography", value: "Inter SemiBold" },
+            { label: "Motion", value: "Restrained, no bounce" },
+            { label: "Color", value: "Stage + one accent" },
+            { label: "Shapes", value: "Capsules & rounded cards" },
+          ],
+          underline: true, // accent sweep under each row
+          lineWidth: 660, // px
+          scrim: 0, // 0–1 left-edge dark scrim for readability over footage
+          x: 160, // column left edge
+          rowGap: 44, // px between rows
+          stagger: 0.18, // s between row entrances
+          animationIn: true,
+          animationOut: true,
+        };
+
+        var DUR = 8;
+        var root = document.getElementById("mk-sl-root");
+        var col = document.getElementById("mk-sl-col");
+        var scrim = document.getElementById("mk-sl-scrim");
+
+        if (CONFIG.scheme === "dark") root.classList.add("mk-dark");
+        scrim.style.opacity = String(CONFIG.scrim);
+
+        /* build rows */
+        CONFIG.rows.forEach(function (r, i) {
+          var row = document.createElement("div");
+          row.id = "mk-sl-row-" + i;
+          row.className = "mk-sl-row";
+          if (i > 0) row.style.marginTop = CONFIG.rowGap + "px";
+
+          var text = document.createElement("div");
+          text.className = "mk-sl-text";
+          var label = document.createElement("span");
+          label.className = "mk-sl-label";
+          label.textContent = r.label;
+          text.appendChild(label);
+          if (r.value) {
+            var value = document.createElement("span");
+            value.className = "mk-sl-value";
+            value.textContent = r.value;
+            text.appendChild(value);
+          }
+          row.appendChild(text);
+
+          if (CONFIG.underline) {
+            var line = document.createElement("div");
+            line.className = "mk-sl-line";
+            line.style.width = CONFIG.lineWidth + "px";
+            var fill = document.createElement("div");
+            fill.id = "mk-sl-fill-" + i;
+            fill.className = "mk-sl-line-fill";
+            line.appendChild(fill);
+            row.appendChild(line);
+          }
+          col.appendChild(row);
+        });
+
+        /* center the column vertically */
+        var colH =
+          CONFIG.rows.length * (46 + 22 + (CONFIG.underline ? 2 : 0)) +
+          (CONFIG.rows.length - 1) * CONFIG.rowGap;
+        col.style.left = CONFIG.x + "px";
+        col.style.top = Math.round((1080 - colH) / 2) + "px";
+
+        var tl = gsap.timeline({ paused: true });
+
+        CONFIG.rows.forEach(function (r, i) {
+          var row = document.getElementById("mk-sl-row-" + i);
+          var t0 = (CONFIG.animationIn ? 0.3 : 0) + i * CONFIG.stagger;
+
+          if (CONFIG.animationIn) {
+            gsap.set(row, { opacity: 0, x: -36 });
+            tl.to(row, { opacity: 1, x: 0, duration: 0.7, ease: "power3.out" }, t0);
+          } else {
+            gsap.set(row, { opacity: 1 });
+          }
+
+          if (CONFIG.underline) {
+            var fill = document.getElementById("mk-sl-fill-" + i);
+            gsap.set(fill, { scaleX: 0 });
+            tl.to(fill, { scaleX: 1, duration: 0.8, ease: "power2.inOut" }, t0 + 0.15);
+          }
+        });
+
+        /* exit + hard kill */
+        if (CONFIG.animationOut) {
+          tl.to(col, { opacity: 0, y: -20, duration: 0.4, ease: "power2.in" }, DUR - 0.5);
+          tl.to(scrim, { opacity: 0, duration: 0.4, ease: "power2.in" }, DUR - 0.5);
+        }
+        tl.set(root, { visibility: "hidden" }, DUR - 0.02);
+
+        window.__timelines["mk-specs-list"] = tl;
+      })();
+    </script>
+  </body>
+</html>
+```
+
+</Accordion>
+
 {/* hf:generated-footer */}
 
 Tagged `data-viz` `list` `minimal` `professional`.
diff --git a/docs/catalog/blocks/news-ticker.mdx b/docs/catalog/blocks/news-ticker.mdx
index df689c280c..04a046141c 100644
--- a/docs/catalog/blocks/news-ticker.mdx
+++ b/docs/catalog/blocks/news-ticker.mdx
@@ -3,34 +3,440 @@ title: "News Ticker"
 description: "Premium broadcast-style lower-third ticker with live label, headline ribbon, and scrolling news crawl."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/news-ticker.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/news-ticker.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/news-ticker.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="News Ticker preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add news-ticker
-```
+<InstallCommand command="npx hyperframes add news-ticker" />
 
 That writes one file: `compositions/news-ticker.html`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`news-ticker.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>News Ticker</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent;
+      }
+
+      body {
+        font-family: "Inter", sans-serif;
+      }
+
+      #nt-root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        color: #f8fafc;
+        background: transparent;
+      }
+
+      #nt-root .nt-shell {
+        position: absolute;
+        left: 96px;
+        right: 96px;
+        bottom: 72px;
+        height: 216px;
+        filter: drop-shadow(0 28px 44px rgba(0, 0, 0, 0.32));
+      }
+
+      #nt-root .nt-panel {
+        position: absolute;
+        inset: 0;
+        overflow: hidden;
+        border: 1px solid rgba(255, 255, 255, 0.18);
+        border-radius: 28px;
+        background:
+          linear-gradient(180deg, rgba(21, 31, 48, 0.96), rgba(7, 13, 24, 0.98)),
+          linear-gradient(90deg, rgba(201, 31, 45, 0.72), transparent 38%);
+      }
+
+      #nt-root .nt-panel::before {
+        position: absolute;
+        inset: 0;
+        content: "";
+        background:
+          radial-gradient(circle at 14% 0%, rgba(255, 255, 255, 0.2), transparent 26%),
+          linear-gradient(
+            110deg,
+            transparent 0 42%,
+            rgba(255, 255, 255, 0.06) 42% 43%,
+            transparent 43% 100%
+          );
+        opacity: 0.72;
+        pointer-events: none;
+      }
+
+      #nt-root .nt-top-row {
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        height: 126px;
+        display: flex;
+        align-items: stretch;
+      }
+
+      #nt-root .nt-brand {
+        width: 294px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 16px;
+        background: linear-gradient(135deg, #e11d2e, #9f1220);
+        box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.16);
+      }
+
+      #nt-root .nt-live-dot {
+        width: 18px;
+        height: 18px;
+        border-radius: 999px;
+        background: #ffffff;
+        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55);
+      }
+
+      #nt-root .nt-brand-text {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        text-transform: uppercase;
+      }
+
+      #nt-root .nt-live {
+        font-size: 22px;
+        font-weight: 900;
+        line-height: 1;
+        letter-spacing: 0.16em;
+      }
+
+      #nt-root .nt-desk {
+        font-size: 15px;
+        font-weight: 700;
+        line-height: 1;
+        letter-spacing: 0.22em;
+        color: #ffffff;
+      }
+
+      #nt-root .nt-headline-wrap {
+        position: relative;
+        flex: 1;
+        display: flex;
+        align-items: center;
+        padding: 0 250px 0 44px;
+        overflow: hidden;
+      }
+
+      #nt-root .nt-headline {
+        position: relative;
+        z-index: 1;
+        font-size: 48px;
+        font-weight: 850;
+        line-height: 1.02;
+        letter-spacing: 0;
+        white-space: nowrap;
+        color: #ffffff;
+        text-shadow: 0 2px 14px rgba(0, 0, 0, 0.34);
+      }
+
+      #nt-root .nt-headline-accent {
+        color: #ff4455;
+      }
 
-It runs for 7 seconds at 1920×1080. Paste this into your composition:
+      #nt-root .nt-time {
+        position: absolute;
+        top: 25px;
+        right: 38px;
+        padding: 10px 16px;
+        border: 1px solid rgba(255, 255, 255, 0.18);
+        border-radius: 999px;
+        background: rgba(255, 255, 255, 0.08);
+        color: rgba(255, 255, 255, 0.74);
+        font-size: 18px;
+        font-weight: 700;
+        line-height: 1;
+        letter-spacing: 0.08em;
+        font-variant-numeric: tabular-nums;
+      }
 
-```html index.html
-<div
-  data-composition-id="news-ticker"
-  data-composition-src="compositions/news-ticker.html"
-  data-start="0"
-  data-duration="7"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+      #nt-root .nt-bottom-row {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        height: 90px;
+        display: flex;
+        align-items: center;
+        border-top: 1px solid rgba(255, 255, 255, 0.11);
+        background: rgba(2, 6, 13, 0.58);
+      }
+
+      #nt-root .nt-label {
+        width: 294px;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-right: 1px solid rgba(255, 255, 255, 0.14);
+        background: #5f0712;
+        color: #ffffff;
+        font-size: 24px;
+        font-weight: 900;
+        line-height: 1;
+        letter-spacing: 0.14em;
+        text-transform: uppercase;
+      }
+
+      #nt-root .nt-ticker-window {
+        position: relative;
+        flex: 1;
+        height: 100%;
+        overflow: hidden;
+        background: #050b15;
+      }
+
+      #nt-root .nt-ticker-window::before,
+      #nt-root .nt-ticker-window::after {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        z-index: 2;
+        width: 90px;
+        content: "";
+        pointer-events: none;
+      }
+
+      #nt-root .nt-ticker-window::before {
+        left: 0;
+        background: linear-gradient(90deg, #050b15, transparent);
+      }
+
+      #nt-root .nt-ticker-window::after {
+        right: 0;
+        background: linear-gradient(270deg, #050b15, transparent);
+      }
+
+      #nt-root .nt-ticker-track {
+        position: absolute;
+        left: 34px;
+        top: 0;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        gap: 34px;
+        white-space: nowrap;
+        will-change: transform;
+      }
+
+      #nt-root .nt-item {
+        display: inline-flex;
+        align-items: center;
+        gap: 14px;
+        padding: 13px 18px;
+        border: 1px solid rgba(255, 255, 255, 0.08);
+        border-radius: 999px;
+        background: #08111f;
+        color: #ffffff;
+        font-size: 31px;
+        font-weight: 650;
+        line-height: 1;
+        letter-spacing: 0;
+      }
+
+      #nt-root .nt-separator {
+        width: 9px;
+        height: 9px;
+        border-radius: 999px;
+        background: #e11d2e;
+        box-shadow: 0 0 22px rgba(225, 29, 46, 0.75);
+      }
+
+      #nt-root .nt-metric {
+        padding: 4px 8px;
+        border-radius: 8px;
+        background: #063344;
+        color: #c8f8ff;
+        font-weight: 850;
+        font-variant-numeric: tabular-nums;
+      }
+
+      #nt-root .nt-flash {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: -260px;
+        z-index: 3;
+        width: 210px;
+        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
+        transform: skewX(-16deg);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="nt-root"
+      data-composition-id="news-ticker"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="7"
+    >
+      <section
+        id="nt-shell"
+        class="clip nt-shell"
+        data-start="0"
+        data-duration="7"
+        data-track-index="0"
+      >
+        <div class="nt-panel">
+          <div id="nt-flash" class="nt-flash"></div>
+          <div class="nt-top-row">
+            <div id="nt-brand" class="nt-brand">
+              <div id="nt-live-dot" class="nt-live-dot"></div>
+              <div class="nt-brand-text">
+                <div class="nt-live">Live</div>
+                <div class="nt-desk">Global Desk</div>
+              </div>
+            </div>
+            <div class="nt-headline-wrap">
+              <h1 id="nt-headline" class="nt-headline">
+                AI video tools move from <span class="nt-headline-accent">prototype</span> to
+                production
+              </h1>
+              <div id="nt-time" class="nt-time">09:41 UTC</div>
+            </div>
+          </div>
+          <div class="nt-bottom-row">
+            <div id="nt-label" class="nt-label">Breaking</div>
+            <div class="nt-ticker-window">
+              <div id="nt-ticker-track" class="nt-ticker-track">
+                <span class="nt-item"
+                  ><span class="nt-separator"></span>Creator teams shorten launch cycles by
+                  <span class="nt-metric">38%</span></span
+                >
+                <span class="nt-item"
+                  ><span class="nt-separator"></span>Rendering queues clear in under
+                  <span class="nt-metric">2 min</span></span
+                >
+                <span class="nt-item"
+                  ><span class="nt-separator"></span>New catalog blocks trending across product
+                  demos</span
+                >
+                <span class="nt-item"
+                  ><span class="nt-separator"></span>Studio editors adopt HTML-first motion
+                  systems</span
+                >
+                <span class="nt-item"
+                  ><span class="nt-separator"></span>Creator teams shorten launch cycles by
+                  <span class="nt-metric">38%</span></span
+                >
+                <span class="nt-item"
+                  ><span class="nt-separator"></span>Rendering queues clear in under
+                  <span class="nt-metric">2 min</span></span
+                >
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      var tl = gsap.timeline({ paused: true });
+      var shell = document.getElementById("nt-shell");
+      var brand = document.getElementById("nt-brand");
+      var headline = document.getElementById("nt-headline");
+      var label = document.getElementById("nt-label");
+      var tickerTrack = document.getElementById("nt-ticker-track");
+      var liveDot = document.getElementById("nt-live-dot");
+      var flash = document.getElementById("nt-flash");
+      var time = document.getElementById("nt-time");
+
+      gsap.set(shell, { y: 260, opacity: 0 });
+      gsap.set(brand, { x: -80, opacity: 0 });
+      gsap.set(headline, { y: 26, opacity: 0, clipPath: "inset(0 100% 0 0)" });
+      gsap.set(label, { y: 18, opacity: 0 });
+      gsap.set(time, { y: -10, opacity: 0 });
+      gsap.set(tickerTrack, { x: 1260 });
+
+      tl.to(shell, { y: 0, opacity: 1, duration: 0.52, ease: "power4.out" }, 0);
+      tl.to(brand, { x: 0, opacity: 1, duration: 0.42, ease: "power3.out" }, 0.08);
+      tl.to(
+        headline,
+        {
+          y: 0,
+          opacity: 1,
+          clipPath: "inset(0 0% 0 0)",
+          duration: 0.62,
+          ease: "power3.out",
+        },
+        0.18,
+      );
+      tl.to(time, { y: 0, opacity: 1, duration: 0.32, ease: "power2.out" }, 0.5);
+      tl.to(label, { y: 0, opacity: 1, duration: 0.28, ease: "power2.out" }, 0.55);
+      tl.to(flash, { x: 2040, duration: 0.86, ease: "power2.inOut" }, 0.34);
+      tl.to(
+        tickerTrack,
+        {
+          x: -1120,
+          duration: 6.05,
+          ease: "none",
+        },
+        0.62,
+      );
+      tl.to(
+        liveDot,
+        {
+          scale: 1.32,
+          boxShadow: "0 0 0 18px rgba(255,255,255,0)",
+          duration: 0.42,
+          repeat: 11,
+          yoyo: true,
+          ease: "sine.inOut",
+        },
+        0.58,
+      );
+      tl.to(flash, { x: 4080, duration: 0.72, ease: "power2.inOut" }, 3.42);
+      tl.to(shell, { y: 170, opacity: 0, duration: 0.34, ease: "power3.in" }, 6.62);
+
+      window.__timelines["news-ticker"] = tl;
+    </script>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="news-ticker" data-composition-src="compositions/news-ticker.html" data-start="0" data-duration="7" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/north-korea-locked-down.mdx b/docs/catalog/blocks/north-korea-locked-down.mdx
index e9c0d95ef8..f4366d505c 100644
--- a/docs/catalog/blocks/north-korea-locked-down.mdx
+++ b/docs/catalog/blocks/north-korea-locked-down.mdx
@@ -3,34 +3,337 @@ title: "North Korea Locked Down"
 description: "Realistic map zoom into North Korea with a red scribble circle, locked-down pop-up label, and reddish editorial wash."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/north-korea-locked-down.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/north-korea-locked-down.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/north-korea-locked-down.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="North Korea Locked Down preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add north-korea-locked-down
-```
+<InstallCommand command="npx hyperframes add north-korea-locked-down" />
 
 That writes `compositions/north-korea-locked-down.html`, plus 1 supporting file under `assets/`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`north-korea-locked-down.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #eef3f4;
+        font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
+      }
+
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #eef3f4;
+        color: #151515;
+      }
+
+      .camera {
+        position: absolute;
+        inset: 0;
+        z-index: 0;
+        transform-origin: 50% 51%;
+        will-change: transform, filter;
+      }
+
+      .map {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
+      .paper-depth {
+        position: absolute;
+        inset: 0;
+        background:
+          radial-gradient(circle at 52% 50%, rgba(255, 255, 255, 0.08), transparent 28%),
+          linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(10, 20, 24, 0.12));
+        mix-blend-mode: multiply;
+        pointer-events: none;
+      }
+
+      .annotation {
+        position: absolute;
+        left: 652px;
+        top: 235px;
+        z-index: 4;
+        width: 560px;
+        height: 392px;
+        overflow: visible;
+        transform-origin: center;
+        will-change: transform, opacity;
+      }
+
+      .scribble {
+        position: absolute;
+        inset: 0;
+        width: 560px;
+        height: 392px;
+        overflow: visible;
+      }
+
+      .scribble path {
+        fill: none;
+        stroke: #e21d2f;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        filter: drop-shadow(0 8px 12px rgba(226, 29, 47, 0.24));
+      }
+
+      #circle-a {
+        stroke-width: 12;
+        stroke-dasharray: 980;
+        stroke-dashoffset: 980;
+      }
+
+      #circle-b {
+        stroke-width: 6;
+        opacity: 0.82;
+        stroke-dasharray: 910;
+        stroke-dashoffset: 910;
+      }
+
+      .label {
+        position: absolute;
+        left: 50%;
+        top: -146px;
+        transform: translateX(-50%) scale(0.82);
+        transform-origin: 50% 100%;
+        min-width: 370px;
+        padding: 18px 26px 20px;
+        border-radius: 18px;
+        color: #ffffff;
+        background: #111111;
+        box-shadow:
+          0 22px 54px rgba(25, 4, 7, 0.24),
+          inset 0 0 0 1px rgba(255, 255, 255, 0.12);
+        font-size: 60px;
+        line-height: 0.9;
+        font-weight: 900;
+        letter-spacing: 0;
+        text-align: center;
+        text-transform: uppercase;
+        opacity: 0;
+      }
+
+      .label::after {
+        content: "";
+        position: absolute;
+        left: 50%;
+        bottom: -16px;
+        width: 32px;
+        height: 32px;
+        background: #111111;
+        transform: translateX(-50%) rotate(45deg);
+      }
+
+      .red-wash {
+        position: absolute;
+        inset: 0;
+        z-index: 2;
+        background:
+          radial-gradient(
+            circle at 50% 48%,
+            rgba(255, 59, 48, 0.3),
+            rgba(255, 59, 48, 0.06) 42%,
+            rgba(79, 0, 8, 0.22) 100%
+          ),
+          linear-gradient(90deg, rgba(99, 0, 12, 0.12), rgba(255, 59, 48, 0.2));
+        opacity: 0;
+        mix-blend-mode: multiply;
+        pointer-events: none;
+      }
 
-It runs for 7 seconds at 1920×1080. Paste this into your composition:
+      .scanline {
+        position: absolute;
+        inset: 0;
+        z-index: 3;
+        opacity: 0;
+        background: repeating-linear-gradient(
+          0deg,
+          rgba(65, 0, 0, 0.12) 0,
+          rgba(65, 0, 0, 0.12) 1px,
+          transparent 1px,
+          transparent 7px
+        );
+        mix-blend-mode: multiply;
+        pointer-events: none;
+      }
 
-```html index.html
-<div
-  data-composition-id="north-korea-locked-down"
-  data-composition-src="compositions/north-korea-locked-down.html"
-  data-start="0"
-  data-duration="7"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+      .corner {
+        position: absolute;
+        z-index: 6;
+        width: 84px;
+        height: 84px;
+        border-color: rgba(17, 17, 17, 0.62);
+        opacity: 0;
+      }
+
+      .corner.tl {
+        left: 86px;
+        top: 78px;
+        border-top: 5px solid;
+        border-left: 5px solid;
+      }
+
+      .corner.tr {
+        right: 86px;
+        top: 78px;
+        border-top: 5px solid;
+        border-right: 5px solid;
+      }
+
+      .corner.bl {
+        left: 86px;
+        bottom: 78px;
+        border-bottom: 5px solid;
+        border-left: 5px solid;
+      }
+
+      .corner.br {
+        right: 86px;
+        bottom: 78px;
+        border-bottom: 5px solid;
+        border-right: 5px solid;
+      }
+
+      .attribution {
+        position: absolute;
+        right: 28px;
+        bottom: 22px;
+        z-index: 7;
+        color: rgba(17, 17, 17, 0.44);
+        font-size: 19px;
+        font-weight: 650;
+        opacity: 0.7;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="north-korea-locked-down"
+      data-root="true"
+      data-start="0"
+      data-duration="7"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="camera" class="camera">
+        <img class="map" src="assets/korea-map.png" alt="" />
+        <div class="paper-depth"></div>
+      </div>
+
+      <div id="annotation" class="annotation">
+        <div id="label" class="label">LOCKED<br />DOWN</div>
+        <svg class="scribble" viewBox="0 0 560 392" aria-hidden="true" data-layout-ignore>
+          <path
+            id="circle-a"
+            d="M 74 211 C 42 119 118 42 254 36 C 410 30 524 111 508 222 C 494 320 350 377 208 346 C 94 322 37 278 74 211"
+          />
+          <path
+            id="circle-b"
+            d="M 92 231 C 33 150 105 55 243 44 C 408 31 529 126 501 244 C 480 334 335 370 197 342 C 83 319 47 269 92 231"
+          />
+        </svg>
+      </div>
+
+      <div id="redWash" class="red-wash"></div>
+      <div id="scanline" class="scanline"></div>
+      <div class="corner tl"></div>
+      <div class="corner tr"></div>
+      <div class="corner bl"></div>
+      <div class="corner br"></div>
+      <div class="attribution">© OpenStreetMap contributors © CARTO</div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      const tl = gsap.timeline({
+        paused: true,
+        defaults: { overwrite: "auto" },
+      });
+
+      tl.fromTo(
+        "#camera",
+        { scale: 0.92, x: -70, y: 18, filter: "saturate(0.92) contrast(0.98)" },
+        {
+          scale: 2.12,
+          x: -56,
+          y: -22,
+          filter: "saturate(1.08) contrast(1.04)",
+          duration: 3.18,
+          ease: "expo.inOut",
+        },
+        0,
+      );
+      tl.to("#camera", { scale: 2.2, x: -44, y: -34, duration: 0.42, ease: "back.out(1.5)" }, 3.18);
+      tl.from(
+        ".corner",
+        { opacity: 0, scale: 0.72, duration: 0.28, stagger: 0.035, ease: "power3.out" },
+        0.42,
+      );
+      tl.to(".corner", { opacity: 0.72, duration: 0.18, ease: "power2.out" }, 1.2);
+      tl.fromTo(
+        "#annotation",
+        { opacity: 0, scale: 0.92, x: 4, y: -4 },
+        { opacity: 1, scale: 1, x: 0, y: 0, duration: 0.16, ease: "power2.out" },
+        3.12,
+      );
+      tl.to("#circle-a", { strokeDashoffset: 0, duration: 0.62, ease: "power2.out" }, 3.24);
+      tl.to("#circle-b", { strokeDashoffset: 0, duration: 0.44, ease: "power3.out" }, 3.46);
+      tl.to("#label", { opacity: 1, scale: 1, duration: 0.28, ease: "back.out(2.1)" }, 3.78);
+      tl.to("#redWash", { opacity: 1, duration: 0.24, ease: "power2.out" }, 3.82);
+      tl.to("#scanline", { opacity: 0.44, duration: 0.18, ease: "none" }, 3.86);
+      tl.to(
+        "#annotation",
+        { scale: 1.045, duration: 0.14, yoyo: true, repeat: 1, ease: "sine.inOut" },
+        4.1,
+      );
+      tl.to("#camera", { scale: 2.06, x: -82, y: -8, duration: 2.35, ease: "sine.inOut" }, 4.2);
+      tl.to("#redWash", { opacity: 0.82, duration: 2.35, ease: "sine.inOut" }, 4.2);
+      tl.to(".corner", { opacity: 0.38, duration: 0.72, ease: "sine.inOut" }, 5.82);
+      tl.to("#label", { y: -6, duration: 0.4, yoyo: true, repeat: 1, ease: "sine.inOut" }, 5.94);
+
+      window.__timelines["north-korea-locked-down"] = tl;
+    </script>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="north-korea-locked-down" data-composition-src="compositions/north-korea-locked-down.html" data-start="0" data-duration="7" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/nyc-paris-flight.mdx b/docs/catalog/blocks/nyc-paris-flight.mdx
index 7f09281046..bf955d17b4 100644
--- a/docs/catalog/blocks/nyc-paris-flight.mdx
+++ b/docs/catalog/blocks/nyc-paris-flight.mdx
@@ -3,34 +3,557 @@ title: "NYC Paris Flight"
 description: "Apple-style realistic map animation with a plane flying from New York to Paris, marker circle, landing pop, and sound effects."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/nyc-paris-flight.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/nyc-paris-flight.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/nyc-paris-flight.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="NYC Paris Flight preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add nyc-paris-flight
-```
+<InstallCommand command="npx hyperframes add nyc-paris-flight" />
 
 That writes `compositions/nyc-paris-flight.html`, plus 2 supporting files under `assets/`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`nyc-paris-flight.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #f5f5f7;
+        font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
+      }
+
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #f5f5f7;
+        color: #1d1d1f;
+      }
+
+      .stage {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        background: #f5f5f7;
+      }
+
+      .map-plane {
+        position: absolute;
+        inset: 0;
+        transform-origin: 52% 48%;
+        will-change: transform, opacity;
+      }
+
+      .map-image {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
+      .soft-ocean {
+        position: absolute;
+        inset: 0;
+        background:
+          radial-gradient(circle at 50% 24%, rgba(0, 113, 227, 0.18), rgba(0, 113, 227, 0) 34%),
+          linear-gradient(180deg, rgba(245, 245, 247, 0.05), rgba(245, 245, 247, 0.3));
+        mix-blend-mode: multiply;
+        opacity: 0.72;
+      }
+
+      .route-svg,
+      .doodle-svg {
+        position: absolute;
+        inset: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: visible;
+      }
+
+      .route-glow {
+        fill: none;
+        stroke: rgba(0, 113, 227, 0.23);
+        stroke-width: 24;
+        stroke-linecap: round;
+        stroke-dasharray: 2000;
+        stroke-dashoffset: 2000;
+        filter: blur(4px);
+      }
+
+      .route-path {
+        fill: none;
+        stroke: #0071e3;
+        stroke-width: 9;
+        stroke-linecap: round;
+        stroke-dasharray: 2000;
+        stroke-dashoffset: 2000;
+        filter: drop-shadow(0 10px 20px rgba(0, 113, 227, 0.22));
+      }
+
+      .route-thread {
+        fill: none;
+        stroke: rgba(255, 255, 255, 0.86);
+        stroke-width: 3;
+        stroke-linecap: round;
+        stroke-dasharray: 2000;
+        stroke-dashoffset: 2000;
+      }
+
+      .route-tick {
+        position: absolute;
+        width: 14px;
+        height: 14px;
+        margin: -7px 0 0 -7px;
+        border-radius: 999px;
+        background: #ffffff;
+        border: 3px solid #0071e3;
+        box-shadow: 0 8px 26px rgba(0, 113, 227, 0.32);
+        opacity: 0;
+      }
+
+      .pin {
+        position: absolute;
+        width: 26px;
+        height: 26px;
+        border-radius: 999px;
+        background: #ffffff;
+        border: 7px solid #0071e3;
+        box-shadow:
+          0 15px 34px rgba(0, 0, 0, 0.18),
+          0 0 0 10px rgba(0, 113, 227, 0.12);
+        transform: translate(-50%, -50%);
+        transform-origin: center;
+        will-change: transform, opacity;
+      }
+
+      .pin::after {
+        content: "";
+        position: absolute;
+        inset: -20px;
+        border-radius: 999px;
+        border: 2px solid rgba(0, 113, 227, 0.25);
+      }
+
+      .pin-label {
+        position: absolute;
+        top: 32px;
+        min-width: 142px;
+        padding: 12px 16px 13px;
+        border-radius: 20px;
+        background: rgba(255, 255, 255, 0.84);
+        border: 1px solid rgba(255, 255, 255, 0.88);
+        color: #1d1d1f;
+        font-size: 22px;
+        font-weight: 800;
+        line-height: 1;
+        letter-spacing: 0;
+        box-shadow: 0 18px 38px rgba(29, 29, 31, 0.16);
+        backdrop-filter: blur(18px);
+        white-space: nowrap;
+      }
+
+      .pin-label span {
+        display: block;
+        margin-top: 7px;
+        color: #6e6e73;
+        font-size: 13px;
+        font-weight: 700;
+      }
+
+      #nyc-pin {
+        left: 308.41px;
+        top: 584.16px;
+      }
+
+      #nyc-pin .pin-label {
+        left: 28px;
+      }
+
+      #paris-pin {
+        left: 1611.59px;
+        top: 387.84px;
+      }
+
+      #paris-pin .pin-label {
+        right: 28px;
+      }
+
+      .plane {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 112px;
+        height: 112px;
+        offset-path: path("M 308.41 584.158 C 650 520 1120 245 1611.59 387.842");
+        offset-distance: 0%;
+        offset-rotate: auto;
+        offset-anchor: 50% 50%;
+        transform-origin: center;
+        filter: drop-shadow(0 22px 22px rgba(0, 0, 0, 0.24));
+        opacity: 1;
+        will-change: offset-distance, transform, opacity;
+      }
+
+      .plane-core {
+        position: absolute;
+        inset: 0;
+        transform-origin: center;
+        will-change: transform;
+      }
+
+      .plane svg {
+        width: 100%;
+        height: 100%;
+        overflow: visible;
+      }
+
+      .doodle-line {
+        fill: none;
+        stroke: #ff3b30;
+        stroke-width: 13;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        stroke-dasharray: 900;
+        stroke-dashoffset: 900;
+        filter: drop-shadow(0 10px 14px rgba(255, 59, 48, 0.18));
+      }
+
+      .doodle-line.secondary {
+        stroke-width: 6;
+        opacity: 0.82;
+      }
+
+      .paris-pulse {
+        position: absolute;
+        left: 1611.59px;
+        top: 387.84px;
+        width: 126px;
+        height: 126px;
+        margin: -63px 0 0 -63px;
+        border-radius: 999px;
+        border: 4px solid rgba(255, 59, 48, 0.34);
+        opacity: 0;
+      }
+
+      .landing-badge {
+        position: absolute;
+        left: 1500px;
+        top: 502px;
+        padding: 15px 20px 16px;
+        border-radius: 999px;
+        background: rgba(255, 255, 255, 0.9);
+        color: #d70015;
+        font-size: 24px;
+        font-weight: 900;
+        line-height: 1;
+        letter-spacing: 0;
+        box-shadow: 0 20px 44px rgba(29, 29, 31, 0.14);
+        opacity: 0;
+        transform: scale(0.78);
+        transform-origin: center;
+      }
+
+      .title-stack {
+        position: absolute;
+        left: 82px;
+        top: 70px;
+        z-index: 6;
+        max-width: 780px;
+        padding: 30px 34px 33px;
+        border-radius: 30px;
+        background: rgba(255, 255, 255, 0.72);
+        border: 1px solid rgba(255, 255, 255, 0.86);
+        box-shadow: 0 28px 70px rgba(29, 29, 31, 0.12);
+        backdrop-filter: blur(22px);
+      }
 
-It runs for 6 seconds at 1920×1080. Paste this into your composition:
+      .eyebrow {
+        color: #6e6e73;
+        font-size: 19px;
+        font-weight: 800;
+        letter-spacing: 0;
+      }
 
-```html index.html
-<div
-  data-composition-id="nyc-paris-flight"
-  data-composition-src="compositions/nyc-paris-flight.html"
-  data-start="0"
-  data-duration="6"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+      .headline {
+        margin-top: 11px;
+        color: #1d1d1f;
+        font-size: 84px;
+        font-weight: 900;
+        line-height: 0.92;
+        letter-spacing: 0;
+      }
+
+      .headline span {
+        color: #0071e3;
+      }
+
+      .route-meta {
+        display: flex;
+        align-items: center;
+        gap: 14px;
+        margin-top: 18px;
+        color: #6e6e73;
+        font-size: 25px;
+        font-weight: 800;
+      }
+
+      .route-meta i {
+        display: block;
+        width: 54px;
+        height: 6px;
+        border-radius: 999px;
+        background: #0071e3;
+      }
+
+      .attribution {
+        position: absolute;
+        right: 28px;
+        bottom: 24px;
+        z-index: 5;
+        padding: 8px 12px;
+        border-radius: 999px;
+        background: rgba(255, 255, 255, 0.68);
+        color: rgba(29, 29, 31, 0.76);
+        font-size: 14px;
+        font-weight: 700;
+        line-height: 1;
+      }
+
+      .white-screen {
+        position: absolute;
+        inset: 0;
+        z-index: 30;
+        background: #ffffff;
+        opacity: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="nyc-paris-flight"
+      data-start="0"
+      data-duration="6"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div
+        id="flight-scene"
+        class="clip stage"
+        data-start="0"
+        data-duration="6"
+        data-track-index="0"
+      >
+        <div id="map-plane" class="map-plane" data-layout-allow-overflow>
+          <img class="map-image" src="assets/map-nyc-paris.png" alt="" />
+          <div class="soft-ocean" data-layout-ignore></div>
+
+          <svg class="route-svg" viewBox="0 0 1920 1080" aria-hidden="true" data-layout-ignore>
+            <path
+              id="route-glow"
+              class="route-glow"
+              d="M 308.41 584.158 C 650 520 1120 245 1611.59 387.842"
+            />
+            <path
+              id="route-path"
+              class="route-path"
+              d="M 308.41 584.158 C 650 520 1120 245 1611.59 387.842"
+            />
+            <path
+              id="route-thread"
+              class="route-thread"
+              d="M 308.41 584.158 C 650 520 1120 245 1611.59 387.842"
+            />
+          </svg>
+
+          <div class="route-tick" style="left: 481.8px; top: 539.7px"></div>
+          <div class="route-tick" style="left: 647.6px; top: 486.5px"></div>
+          <div class="route-tick" style="left: 824.8px; top: 430.6px"></div>
+          <div class="route-tick" style="left: 1011.5px; top: 382.4px"></div>
+          <div class="route-tick" style="left: 1206.1px; top: 352.3px"></div>
+          <div class="route-tick" style="left: 1406.7px; top: 350.7px"></div>
+
+          <div id="nyc-pin" class="pin">
+            <div class="pin-label">New York<span>JFK / NYC</span></div>
+          </div>
+
+          <div id="paris-pin" class="pin">
+            <div class="pin-label">Paris<span>CDG / FR</span></div>
+          </div>
+
+          <div id="plane" class="plane" aria-hidden="true">
+            <div id="plane-core" class="plane-core">
+              <svg viewBox="-64 -64 128 128">
+                <path
+                  d="M 58 0 C 52 -10 37 -15 15 -16 L -18 -56 C -23 -62 -34 -58 -32 -49 L -21 -15 L -48 -12 C -56 -11 -60 -6 -60 0 C -60 6 -56 11 -48 12 L -21 15 L -32 49 C -34 58 -23 62 -18 56 L 15 16 C 37 15 52 10 58 0 Z"
+                  fill="#ffffff"
+                />
+                <path
+                  d="M 54 0 C 46 -6 33 -9 14 -10 L -19 -50 C -21 -53 -25 -52 -25 -47 L -15 -10 L -49 -6 C -53 -5 -55 -2 -55 0 C -55 2 -53 5 -49 6 L -15 10 L -25 47 C -25 52 -21 53 -19 50 L 14 10 C 33 9 46 6 54 0 Z"
+                  fill="#0071e3"
+                />
+                <circle cx="18" cy="0" r="6" fill="#f5f5f7" opacity="0.95" />
+              </svg>
+            </div>
+          </div>
+
+          <svg class="doodle-svg" viewBox="0 0 1920 1080" aria-hidden="true" data-layout-ignore>
+            <path
+              id="doodle-a"
+              class="doodle-line"
+              d="M 1510 382 C 1505 323 1560 287 1627 300 C 1700 315 1740 358 1720 416 C 1705 468 1624 486 1556 462 C 1518 449 1494 417 1510 382"
+            />
+            <path
+              id="doodle-b"
+              class="doodle-line secondary"
+              d="M 1518 396 C 1488 356 1528 307 1605 296 C 1688 284 1748 338 1730 397 C 1713 453 1641 480 1570 463 C 1526 453 1504 427 1518 396"
+            />
+          </svg>
+
+          <div id="paris-pulse" class="paris-pulse"></div>
+          <div id="landing-badge" class="landing-badge">ARRIVED</div>
+        </div>
+
+        <div class="title-stack">
+          <div class="eyebrow">Six-second transatlantic hop</div>
+          <div class="headline">NEW YORK <span>TO</span> PARIS</div>
+          <div class="route-meta">
+            <i></i>
+            <p>5,837 km compressed</p>
+          </div>
+        </div>
+
+        <div class="attribution">© OpenStreetMap contributors © CARTO</div>
+        <div id="white-screen" class="white-screen"></div>
+      </div>
+
+      <audio
+        id="sfx"
+        data-start="0"
+        data-duration="6"
+        data-track-index="1"
+        src="assets/sfx-mix.wav"
+        data-volume="0.95"
+      ></audio>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      const tl = gsap.timeline({
+        paused: true,
+        defaults: { overwrite: "auto" },
+      });
+
+      tl.from(
+        "#map-plane",
+        { scale: 1.1, x: -38, y: 20, opacity: 0.94, duration: 1.05, ease: "power2.out" },
+        0.16,
+      );
+      tl.from(
+        ".title-stack",
+        { y: 28, scale: 0.97, opacity: 0, duration: 0.52, ease: "expo.out" },
+        0.24,
+      );
+      tl.from(".eyebrow", { x: -22, opacity: 0, duration: 0.36, ease: "power3.out" }, 0.32);
+      tl.from(".headline", { y: 34, opacity: 0, duration: 0.5, ease: "back.out(1.45)" }, 0.4);
+      tl.from(".route-meta", { x: -26, opacity: 0, duration: 0.38, ease: "circ.out" }, 0.58);
+
+      tl.from("#nyc-pin", { scale: 0.12, opacity: 0, duration: 0.34, ease: "back.out(2.8)" }, 0.7);
+      tl.from(
+        "#paris-pin",
+        { scale: 0.12, opacity: 0, duration: 0.34, ease: "elastic.out(1, 0.5)" },
+        0.86,
+      );
+
+      tl.from("#plane", { scale: 0.48, opacity: 0, duration: 0.3, ease: "back.out(2.2)" }, 1.08);
+      tl.to("#route-glow", { strokeDashoffset: 0, duration: 3.1, ease: "power1.inOut" }, 1.16);
+      tl.to("#route-path", { strokeDashoffset: 0, duration: 3.05, ease: "power2.inOut" }, 1.2);
+      tl.to("#route-thread", { strokeDashoffset: 0, duration: 2.92, ease: "sine.inOut" }, 1.26);
+      tl.to("#plane", { offsetDistance: "100%", duration: 3.25, ease: "sine.inOut" }, 1.17);
+      tl.to(
+        "#plane-core",
+        { scale: 1.06, duration: 0.2, repeat: 12, yoyo: true, ease: "sine.inOut" },
+        1.22,
+      );
+      tl.to("#map-plane", { scale: 1.025, duration: 3.2, ease: "sine.inOut" }, 1.28);
+
+      gsap.utils.toArray(".route-tick").forEach((tick, index) => {
+        tl.fromTo(
+          tick,
+          { scale: 0.2, opacity: 0 },
+          { scale: 1, opacity: 1, duration: 0.16, ease: "back.out(3)" },
+          1.34 + index * 0.44,
+        );
+        tl.to(
+          tick,
+          { scale: 0.6, opacity: 0.18, duration: 0.34, ease: "power2.out" },
+          1.48 + index * 0.44,
+        );
+      });
+
+      tl.from(
+        "#paris-pulse",
+        { scale: 0.52, opacity: 0, duration: 0.26, ease: "back.out(2.4)" },
+        4.06,
+      );
+      tl.to("#doodle-a", { strokeDashoffset: 0, duration: 0.54, ease: "power2.out" }, 4.18);
+      tl.to("#doodle-b", { strokeDashoffset: 0, duration: 0.36, ease: "power3.out" }, 4.36);
+      tl.to("#paris-pulse", { scale: 1.5, opacity: 0, duration: 0.58, ease: "power3.out" }, 4.64);
+
+      tl.to("#plane-core", { scale: 1.23, duration: 0.16, ease: "back.out(3)" }, 4.96);
+      tl.to("#plane-core", { scale: 0.9, duration: 0.12, ease: "power2.in" }, 5.12);
+      tl.to("#plane-core", { scale: 1, duration: 0.22, ease: "elastic.out(1, 0.45)" }, 5.24);
+      tl.to(
+        "#landing-badge",
+        { scale: 1, opacity: 1, duration: 0.28, ease: "back.out(2.4)" },
+        5.02,
+      );
+      tl.to(
+        "#landing-badge",
+        { scale: 1.06, duration: 0.16, yoyo: true, repeat: 1, ease: "sine.inOut" },
+        5.3,
+      );
+
+      tl.set("#white-screen", { opacity: 1 }, 5.5);
+
+      window.__timelines["nyc-paris-flight"] = tl;
+    </script>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="nyc-paris-flight" data-composition-src="compositions/nyc-paris-flight.html" data-start="0" data-duration="6" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/organic-light-leak-overlay.mdx b/docs/catalog/blocks/organic-light-leak-overlay.mdx
index 47ddc42ddd..c292c1c267 100644
--- a/docs/catalog/blocks/organic-light-leak-overlay.mdx
+++ b/docs/catalog/blocks/organic-light-leak-overlay.mdx
@@ -3,13 +3,13 @@ title: "Organic Light Leak Overlay"
 description: "Finite CSS light-leak overlay for memory beats and motivated transitions"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/organic-light-leak-overlay.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/organic-light-leak-overlay.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/organic-light-leak-overlay.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Organic Light Leak Overlay preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add organic-light-leak-overlay
-```
+<InstallCommand command="npx hyperframes add organic-light-leak-overlay" />
 
 That writes one file: `compositions/organic-light-leak-overlay.html`.
 
@@ -32,6 +32,140 @@ It runs for 4 seconds at 1920×1080. Paste this into your composition:
 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={`organic-light-leak-overlay.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: transparent;
+      }
+
+      #hf-light-leak {
+        position: absolute;
+        inset: -16%;
+        opacity: 0;
+        overflow: hidden;
+        pointer-events: none;
+        mix-blend-mode: screen;
+      }
+
+      #hf-light-leak .hf-leak-layer {
+        position: absolute;
+        inset: -20%;
+        will-change: opacity, transform;
+      }
+
+      #hf-light-leak .hf-leak-amber {
+        background:
+          radial-gradient(ellipse 52% 110% at 10% 58%, rgb(255 241 197 / 92%), transparent 45%),
+          radial-gradient(ellipse 72% 120% at 24% 54%, rgb(255 126 57 / 78%), transparent 66%);
+        filter: blur(2.8vmin);
+      }
+
+      #hf-light-leak .hf-leak-red {
+        background: radial-gradient(
+          ellipse 58% 105% at 78% 34%,
+          rgb(255 79 61 / 72%),
+          rgb(255 44 92 / 28%) 48%,
+          transparent 76%
+        );
+        filter: blur(4vmin);
+      }
+
+      #hf-light-leak .hf-leak-gold {
+        background: linear-gradient(
+          104deg,
+          transparent 24%,
+          rgb(255 144 62 / 30%) 40%,
+          rgb(255 247 205 / 72%) 51%,
+          rgb(255 124 48 / 22%) 62%,
+          transparent 78%
+        );
+        filter: blur(2vmin);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="organic-light-leak-overlay"
+      data-composition-id="organic-light-leak-overlay"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="hf-light-leak" aria-hidden="true">
+        <div class="hf-leak-layer hf-leak-amber"></div>
+        <div class="hf-leak-layer hf-leak-red"></div>
+        <div class="hf-leak-layer hf-leak-gold"></div>
+      </div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      var leak = document.getElementById("hf-light-leak");
+      var host = leak && leak.closest("[data-composition-id]");
+      if (!host) throw new Error("Organic Light Leak could not find its composition host");
+
+      var compositionId = host.getAttribute("data-composition-id");
+      var duration = Number(host.getAttribute("data-duration")) || 4;
+      var tl = gsap.timeline({ paused: true });
+
+      tl.to({}, { duration: duration, ease: "none" }, 0);
+      tl.fromTo(
+        leak,
+        { opacity: 0 },
+        { opacity: 0.9, duration: duration * 0.24, ease: "sine.out" },
+        duration * 0.08,
+      );
+      tl.to(leak, { opacity: 0.46, duration: duration * 0.2, ease: "sine.inOut" }, duration * 0.42);
+      tl.to(leak, { opacity: 0, duration: duration * 0.26, ease: "sine.in" }, duration * 0.68);
+      tl.fromTo(
+        ".hf-leak-amber",
+        { xPercent: -20, scale: 0.92, rotation: -4 },
+        { xPercent: 18, scale: 1.1, rotation: 2, duration: duration, ease: "sine.inOut" },
+        0,
+      );
+      tl.fromTo(
+        ".hf-leak-red",
+        { xPercent: 20, yPercent: -8, scale: 1.08 },
+        { xPercent: -16, yPercent: 8, scale: 0.94, duration: duration, ease: "sine.inOut" },
+        0,
+      );
+      tl.fromTo(
+        ".hf-leak-gold",
+        { xPercent: -28, rotation: -6 },
+        { xPercent: 24, rotation: 4, duration: duration, ease: "sine.inOut" },
+        0,
+      );
+
+      window.__timelines[compositionId] = tl;
+    </script>
+  </body>
+</html>
+```
+
+</Accordion>
+
 {/* hf:generated-footer */}
 
 Tagged `light-leak` `film` `memory` `transition` `overlay` `media-treatment-overlay`.
diff --git a/docs/catalog/blocks/oscilloscope-trace.mdx b/docs/catalog/blocks/oscilloscope-trace.mdx
new file mode 100644
index 0000000000..376ead0174
--- /dev/null
+++ b/docs/catalog/blocks/oscilloscope-trace.mdx
@@ -0,0 +1,574 @@
+---
+title: "Oscilloscope Trace"
+description: "CRT oscilloscope beam sweeping a waveform across a 10x8 graticule, with closed-form phosphor persistence: the tail decays as exp(-age/tau) and brightens where the beam slows"
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/blocks/oscilloscope-trace.html"
+  compositionId="oscilloscope-trace"
+  compositionSrc="compositions/oscilloscope-trace.html"
+  variables={[{"id":"waveform","type":"enum","label":"Waveform","default":"sine","options":[{"value":"sine","label":"Sine"},{"value":"square","label":"Square"},{"value":"triangle","label":"Triangle"},{"value":"data","label":"Data series"}]},{"id":"frequency","type":"number","label":"Signal frequency","unit":"Hz","default":12,"min":0.1,"max":200,"step":0.1},{"id":"amplitude","type":"number","label":"Amplitude","unit":"div","default":3,"min":0.1,"max":4,"step":0.1},{"id":"persistenceMs","type":"number","label":"Phosphor persistence (tau)","unit":"ms","default":100,"min":1,"max":1000,"step":1},{"id":"phosphorColor","type":"color","label":"Phosphor colour","default":"#5dff8f"},{"id":"sweepRate","type":"number","label":"Sweep rate","unit":"sweeps/s","default":5,"min":0.25,"max":60,"step":0.25},{"id":"dataSeries","type":"string","label":"Data series (waveform=data)","default":"","placeholder":"0,0.4,0.9,0.3,-0.6,-1,-0.2,0.5"}]}
+>
+
+```html oscilloscope-trace.html
+<!doctype html>
+<html
+  lang="en"
+  data-composition-variables='[
+    {"id":"waveform","type":"enum","label":"Waveform","default":"sine","options":[{"value":"sine","label":"Sine"},{"value":"square","label":"Square"},{"value":"triangle","label":"Triangle"},{"value":"data","label":"Data series"}]},
+    {"id":"frequency","type":"number","label":"Signal frequency","unit":"Hz","default":12,"min":0.1,"max":200,"step":0.1},
+    {"id":"amplitude","type":"number","label":"Amplitude","unit":"div","default":3,"min":0.1,"max":4,"step":0.1},
+    {"id":"persistenceMs","type":"number","label":"Phosphor persistence (tau)","unit":"ms","default":100,"min":1,"max":1000,"step":1},
+    {"id":"phosphorColor","type":"color","label":"Phosphor colour","default":"#5dff8f"},
+    {"id":"sweepRate","type":"number","label":"Sweep rate","unit":"sweeps/s","default":5,"min":0.25,"max":60,"step":0.25},
+    {"id":"dataSeries","type":"string","label":"Data series (waveform=data)","default":"","placeholder":"0,0.4,0.9,0.3,-0.6,-1,-0.2,0.5"}
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Oscilloscope Trace</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #05070a;
+      }
+      #os-root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        font-family: "JetBrains Mono", ui-monospace, monospace;
+      }
+      #os-bg {
+        position: absolute;
+        inset: 0;
+        background: radial-gradient(120% 120% at 30% 25%, #0d141b 0%, #05070a 68%);
+      }
+      #os-screen {
+        position: absolute;
+        inset: 0;
+        width: 1920px;
+        height: 1080px;
+        display: block;
+      }
+      /* Purely decorative CRT falloff — no timing, no motion. */
+      #os-vignette {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        background: radial-gradient(
+          78% 78% at 34% 50%,
+          rgba(0, 0, 0, 0) 55%,
+          rgba(0, 0, 0, 0.55) 100%
+        );
+      }
+      #os-readout {
+        position: absolute;
+        left: 1250px;
+        top: 150px;
+        width: 520px;
+        color: #6f8794;
+        font-size: 26px;
+        line-height: 1.15;
+        letter-spacing: 0.04em;
+      }
+      #os-readout .os-title {
+        color: #b9ccd6;
+        font-size: 34px;
+        letter-spacing: 0.22em;
+        padding-bottom: 26px;
+        border-bottom: 2px solid #1d2a33;
+        margin-bottom: 26px;
+      }
+      #os-readout .os-row {
+        display: flex;
+        justify-content: space-between;
+        padding: 13px 0;
+      }
+      #os-readout .os-val {
+        color: #d7e6ee;
+      }
+      #os-readout .os-note {
+        margin-top: 28px;
+        font-size: 20px;
+        color: #6a7b85;
+        line-height: 1.5;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="os-root"
+      data-composition-id="oscilloscope-trace"
+      data-start="0"
+      data-duration="6"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="os-bg"></div>
+      <canvas
+        id="os-screen"
+        class="clip"
+        width="1920"
+        height="1080"
+        data-start="0"
+        data-duration="6"
+        data-track-index="0"
+      ></canvas>
+      <div id="os-vignette"></div>
+      <div id="os-readout" class="clip" data-start="0" data-duration="6" data-track-index="1">
+        <div class="os-title">OSCILLOSCOPE</div>
+        <div class="os-row"><span>SOURCE</span><span class="os-val" id="os-r-wave">SINE</span></div>
+        <div class="os-row"><span>FREQ</span><span class="os-val" id="os-r-freq">-</span></div>
+        <div class="os-row"><span>TIMEBASE</span><span class="os-val" id="os-r-time">-</span></div>
+        <div class="os-row"><span>VERT</span><span class="os-val" id="os-r-amp">-</span></div>
+        <div class="os-row"><span>PHOSPHOR</span><span class="os-val" id="os-r-phos">-</span></div>
+        <div class="os-note" id="os-r-note"></div>
+      </div>
+    </div>
+    <script>
+      (function () {
+        "use strict";
+
+        // ---------------------------------------------------------------
+        // Oscilloscope trace with phosphor persistence.
+        //
+        // Two pieces of physical truth drive the look:
+        //
+        //  1. PERSISTENCE. The phosphor keeps emitting after the beam has
+        //     passed, decaying as exp(-age/tau). Decay constants by EIA
+        //     phosphor class (research entry F#10):
+        //       P11/P31 - 0.01-1 ms   (what a real bench scope uses: no
+        //                              visible afterglow at video rates)
+        //       P1      - 80-150 ms   (the "vintage glow" look; tau ~= 100 ms
+        //                              is the entry's recommended default)
+        //       P33     - > 1 s
+        //       P2/P7   - 30 s .. ~1 min (radar territory, out of range here)
+        //     The tail window is 3*tau: after three time constants ~5% of the
+        //     brightness remains, which the entry gives as the safe cutoff.
+        //
+        //  2. BEAM-VELOCITY BRIGHTNESS. A trace is brighter where the beam
+        //     moves slower, because the same deposited energy is spread over
+        //     a shorter path. Each sub-step deposits a fixed amount of energy
+        //     (constant dt), so surface brightness goes as 1/segment-length.
+        //     Flat parts of the waveform are bright; fast vertical edges are
+        //     faint. Qualitative law only - the research entry states it with
+        //     no proportionality constant, so the reference length below is
+        //     the physical minimum (pure horizontal sweep motion), not a
+        //     fudge factor.
+        //
+        // SWEEP RATE PROVENANCE. The phosphor decay constants above are
+        // measured; the sweep rate is NOT - the research entry gives no
+        // timebase figure. The default of 5 sweeps/s is authored: across the
+        // 10-division graticule it works out to 20 ms/div, a real value from
+        // the standard 1-2-5 timebase sequence, picked because it puts a few
+        // cycles of the default signal on screen. Treat it as a dial, not as
+        // a measurement.
+        //
+        // NO FEEDBACK BUFFER. The canvas is cleared every frame and the tail
+        // is recomputed by evaluating the beam curve backwards in time from
+        // the current frame: P(t - k*dt) for k = 0..K. Frame N depends only
+        // on N, so seeking anywhere is exact rather than approximate.
+        // ---------------------------------------------------------------
+
+        var COMP_ID = "oscilloscope-trace";
+        var DURATION = 6;
+
+        // Screen geometry: a 10x8 division graticule of SQUARE divisions,
+        // the standard CRT scope face.
+        var DIV = 100;
+        var DIVS_X = 10;
+        var DIVS_Y = 8;
+        var SW = DIV * DIVS_X;
+        var SH = DIV * DIVS_Y;
+        var SX = 140;
+        var SY = 140;
+        var CY = SY + SH / 2;
+
+        // Tail window in time constants (research entry F#10: 3*tau leaves
+        // ~5% weight, stated there as the safe cutoff).
+        var TAIL_TAUS = 3;
+        // Sub-step count. The entry suggests K ~= 24 steps across the window,
+        // which is enough to quantise the DECAY but far too coarse spatially:
+        // at 12 Hz the beam would advance 0.15 of a cycle per step and the
+        // trace would render as a polygon. So K is derived from how fast the
+        // beam actually moves - keep each sub-step under SEG_TARGET_PX of
+        // travel. That target and the clamps are MY numbers, not measured
+        // ones; the clamp bounds per-frame cost when persistence is long.
+        var SEG_TARGET_PX = 3;
+        var K_MIN = 120;
+        var K_MAX = 8000;
+
+        // Band-limit for the square wave. A real generator + a real scope
+        // front end both have finite bandwidth, so the edge is steep but not
+        // instantaneous; a mathematical step would make the vertical edge one
+        // sub-step long and the velocity law would erase it entirely.
+        var SQUARE_SHARPNESS = 8;
+
+        function readVariables() {
+          var api = window.__hyperframes && window.__hyperframes.getVariables;
+          if (typeof api === "function") return api() || {};
+          // Standalone fallback (raw file opened without the runtime): read
+          // the same declaration the runtime reads, so defaults have exactly
+          // one home.
+          var out = {};
+          try {
+            var raw = document.documentElement.getAttribute("data-composition-variables");
+            var decls = JSON.parse(raw || "[]");
+            for (var i = 0; i < decls.length; i++) out[decls[i].id] = decls[i].default;
+          } catch (err) {
+            /* declaration missing or malformed - fall through to hard defaults */
+          }
+          return out;
+        }
+
+        function num(value, fallback, min, max) {
+          var n = typeof value === "number" ? value : parseFloat(value);
+          if (!isFinite(n)) n = fallback;
+          return Math.min(max, Math.max(min, n));
+        }
+
+        var V = readVariables();
+        var waveform =
+          ["sine", "square", "triangle", "data"].indexOf(String(V.waveform)) >= 0
+            ? String(V.waveform)
+            : "sine";
+        var frequency = num(V.frequency, 12, 0.1, 200);
+        var amplitude = num(V.amplitude, 3, 0.1, 4);
+        var tau = num(V.persistenceMs, 100, 1, 1000) / 1000;
+        var sweepRate = num(V.sweepRate, 5, 0.25, 60);
+        var phosphor = parseColor(V.phosphorColor, [93, 255, 143]);
+
+        // waveform="data" replays a supplied series instead of a synthetic
+        // shape: comma/whitespace separated numbers, clamped to -1..1, linearly
+        // interpolated, one full pass of the series per `frequency` cycle.
+        // Empty or unparseable -> falls back to sine.
+        var series = String(V.dataSeries == null ? "" : V.dataSeries)
+          .split(/[\s,]+/)
+          .map(parseFloat)
+          .filter(function (n) {
+            return isFinite(n);
+          })
+          .map(function (n) {
+            return Math.min(1, Math.max(-1, n));
+          });
+        if (waveform === "data" && series.length < 2) waveform = "sine";
+
+        function parseColor(value, fallback) {
+          var m = /^#?([0-9a-f]{6})$/i.exec(String(value == null ? "" : value).trim());
+          if (!m) return fallback;
+          var v = parseInt(m[1], 16);
+          return [(v >> 16) & 255, (v >> 8) & 255, v & 255];
+        }
+
+        function rgba(c, a) {
+          return "rgba(" + c[0] + "," + c[1] + "," + c[2] + "," + a.toFixed(4) + ")";
+        }
+
+        // --- the signal: pure function of time, no state ------------------
+
+        function wave(t) {
+          var p = frequency * t; // cycles elapsed
+          if (waveform === "square") {
+            return Math.tanh(SQUARE_SHARPNESS * Math.sin(2 * Math.PI * p));
+          }
+          if (waveform === "triangle") {
+            return (2 / Math.PI) * Math.asin(Math.sin(2 * Math.PI * p));
+          }
+          if (waveform === "data") {
+            var frac = p - Math.floor(p);
+            var pos = frac * (series.length - 1);
+            var i = Math.floor(pos);
+            var f = pos - i;
+            var a = series[i];
+            var b = series[Math.min(series.length - 1, i + 1)];
+            return a + (b - a) * f;
+          }
+          return Math.sin(2 * Math.PI * p);
+        }
+
+        /** Horizontal sweep position, 0..1 across the graticule. */
+        function sweepU(t) {
+          var s = t * sweepRate;
+          return s - Math.floor(s);
+        }
+
+        function beamX(t) {
+          return SX + sweepU(t) * SW;
+        }
+
+        function beamY(t) {
+          return CY - wave(t) * amplitude * DIV;
+        }
+
+        // Upper bound on beam speed, in px/s, used to pick the sub-step count.
+        // Horizontal is the constant sweep; vertical is the waveform's steepest
+        // slope, which differs per shape - a band-limited square is
+        // SQUARE_SHARPNESS times steeper at its edge than a sine of the same
+        // frequency, and under-sampling exactly there is what turns the edge
+        // into a polygon.
+        var slopeBound;
+        if (waveform === "square") {
+          slopeBound = SQUARE_SHARPNESS * 2 * Math.PI * frequency;
+        } else if (waveform === "triangle") {
+          slopeBound = 4 * frequency;
+        } else if (waveform === "data") {
+          var maxStep = 0;
+          for (var si = 1; si < series.length; si++) {
+            maxStep = Math.max(maxStep, Math.abs(series[si] - series[si - 1]));
+          }
+          slopeBound = maxStep * (series.length - 1) * frequency;
+        } else {
+          slopeBound = 2 * Math.PI * frequency;
+        }
+        var beamSpeedMax = Math.sqrt(
+          Math.pow(SW * sweepRate, 2) + Math.pow(slopeBound * amplitude * DIV, 2),
+        );
+
+        // --- graticule (drawn once to an offscreen canvas) ----------------
+
+        var grat = document.createElement("canvas");
+        grat.width = 1920;
+        grat.height = 1080;
+        (function drawGraticule() {
+          var g = grat.getContext("2d");
+          g.fillStyle = "#04080a";
+          g.fillRect(SX, SY, SW, SH);
+          g.strokeStyle = "rgba(120,180,160,0.16)";
+          g.lineWidth = 1;
+          for (var i = 1; i < DIVS_X; i++) {
+            g.beginPath();
+            g.moveTo(SX + i * DIV + 0.5, SY);
+            g.lineTo(SX + i * DIV + 0.5, SY + SH);
+            g.stroke();
+          }
+          for (var j = 1; j < DIVS_Y; j++) {
+            g.beginPath();
+            g.moveTo(SX, SY + j * DIV + 0.5);
+            g.lineTo(SX + SW, SY + j * DIV + 0.5);
+            g.stroke();
+          }
+          // Centre axes carry the fine 0.2-division ticks, as on a real face.
+          g.strokeStyle = "rgba(150,205,185,0.32)";
+          var cx = SX + SW / 2 + 0.5;
+          var cy = CY + 0.5;
+          g.beginPath();
+          g.moveTo(cx, SY);
+          g.lineTo(cx, SY + SH);
+          g.moveTo(SX, cy);
+          g.lineTo(SX + SW, cy);
+          g.stroke();
+          g.strokeStyle = "rgba(150,205,185,0.42)";
+          for (var k = 1; k < DIVS_X * 5; k++) {
+            var x = SX + (k * DIV) / 5 + 0.5;
+            g.beginPath();
+            g.moveTo(x, cy - 9);
+            g.lineTo(x, cy + 9);
+            g.stroke();
+          }
+          for (var m = 1; m < DIVS_Y * 5; m++) {
+            var y = SY + (m * DIV) / 5 + 0.5;
+            g.beginPath();
+            g.moveTo(cx - 9, y);
+            g.lineTo(cx + 9, y);
+            g.stroke();
+          }
+          g.strokeStyle = "rgba(160,215,195,0.55)";
+          g.lineWidth = 2;
+          g.strokeRect(SX + 1, SY + 1, SW - 2, SH - 2);
+        })();
+
+        // --- per-frame paint ----------------------------------------------
+
+        var canvas = document.getElementById("os-screen");
+        var ctx = canvas.getContext("2d");
+
+        function draw(t) {
+          ctx.globalCompositeOperation = "source-over";
+          ctx.clearRect(0, 0, 1920, 1080);
+          ctx.drawImage(grat, 0, 0);
+
+          var windowS = TAIL_TAUS * tau;
+          var K = Math.max(
+            K_MIN,
+            Math.min(K_MAX, Math.round((windowS * beamSpeedMax) / SEG_TARGET_PX)),
+          );
+          var dt = windowS / K;
+          // Length the beam covers in one sub-step with zero vertical motion.
+          // That is the slowest the beam can ever move, so it is the maximum
+          // brightness reference and the velocity weight never exceeds 1.
+          var lRef = SW * sweepRate * dt;
+
+          ctx.globalCompositeOperation = "lighter";
+          ctx.lineCap = "round";
+
+          // Oldest -> newest, so the bright head lands on top.
+          var prevX = 0;
+          var prevY = 0;
+          var prevU = 0;
+          var havePrev = false;
+          for (var k = K; k >= 0; k--) {
+            var tk = t - k * dt;
+            if (tk < 0) {
+              // Before frame 0 the beam had not been switched on yet.
+              havePrev = false;
+              continue;
+            }
+            var u = sweepU(tk);
+            var x = SX + u * SW;
+            var y = beamY(tk);
+            if (havePrev && u >= prevU) {
+              var dx = x - prevX;
+              var dy = y - prevY;
+              var len = Math.sqrt(dx * dx + dy * dy);
+              // Beam-velocity law: brightness ~ 1 / path length per unit time.
+              var vel = len > 1e-6 ? Math.min(1, lRef / len) : 1;
+              var decay = Math.exp((-k * dt) / tau);
+              var a = decay * vel;
+              if (a > 0.002) {
+                ctx.beginPath();
+                ctx.moveTo(prevX, prevY);
+                ctx.lineTo(x, y);
+                ctx.strokeStyle = rgba(phosphor, a * 0.13);
+                ctx.lineWidth = 13;
+                ctx.stroke();
+                ctx.strokeStyle = rgba(phosphor, a * 0.9);
+                ctx.lineWidth = 3;
+                ctx.stroke();
+                if (a > 0.55) {
+                  // Overdriven phosphor saturates towards white at the head.
+                  ctx.strokeStyle =
+                    "rgba(255,255,255," + (((a - 0.55) / 0.45) * 0.7).toFixed(4) + ")";
+                  ctx.lineWidth = 1.4;
+                  ctx.stroke();
+                }
+              }
+            }
+            // Retrace is blanked on a real scope: when u wraps, drop the
+            // connecting segment instead of drawing a line back across.
+            prevX = x;
+            prevY = y;
+            prevU = u;
+            havePrev = true;
+          }
+
+          // Beam head: the spot itself, brightest point on the screen.
+          var hx = beamX(t);
+          var hy = beamY(t);
+          var glow = ctx.createRadialGradient(hx, hy, 0, hx, hy, 22);
+          glow.addColorStop(0, "rgba(255,255,255,0.95)");
+          glow.addColorStop(0.22, rgba(phosphor, 0.85));
+          glow.addColorStop(1, rgba(phosphor, 0));
+          ctx.fillStyle = glow;
+          ctx.beginPath();
+          ctx.arc(hx, hy, 22, 0, Math.PI * 2);
+          ctx.fill();
+
+          ctx.globalCompositeOperation = "source-over";
+        }
+
+        // --- readout --------------------------------------------------------
+
+        (function fillReadout() {
+          // Nearest EIA phosphor class for the chosen tau (bands from the
+          // research entry). Labelling, not simulation.
+          var tauMs = tau * 1000;
+          var cls = tauMs <= 1 ? "P31" : tauMs <= 150 ? "P1" : "P33";
+          var msPerDiv = 1000 / (sweepRate * DIVS_X);
+          function set(id, text) {
+            document.getElementById(id).textContent = text;
+          }
+          set("os-r-wave", waveform.toUpperCase());
+          set("os-r-freq", frequency.toFixed(frequency < 10 ? 2 : 1) + " Hz");
+          set(
+            "os-r-time",
+            (msPerDiv >= 10 ? msPerDiv.toFixed(0) : msPerDiv.toFixed(2)) + " ms/div",
+          );
+          set("os-r-amp", amplitude.toFixed(1) + " div pk");
+          set("os-r-phos", cls + "  tau " + tauMs.toFixed(0) + " ms");
+          set(
+            "os-r-note",
+            "Trace brightness falls as exp(-age/tau) behind the beam, and rises where the beam slows.",
+          );
+        })();
+
+        // --- timeline -------------------------------------------------------
+        //
+        // tl.eventCallback("onUpdate", ...) is NOT usable here: the runtime
+        // seeks with suppressEvents, so the callback never fires on a seek and
+        // the canvas would keep whatever the last played frame drew. A tweened
+        // property with an accessor is applied by GSAP on every render,
+        // including suppressed ones, so the repaint is driven from the setter.
+
+        var beam = { t: 0 };
+        var driver = {};
+        Object.defineProperty(driver, "t", {
+          get: function () {
+            return beam.t;
+          },
+          set: function (value) {
+            beam.t = value;
+            draw(value);
+          },
+        });
+
+        window.__timelines = window.__timelines || {};
+        var tl = gsap.timeline({ paused: true });
+        tl.to(driver, { t: DURATION, duration: DURATION, ease: "none", lazy: false }, 0);
+        window.__timelines[COMP_ID] = tl;
+
+        draw(0);
+      })();
+    </script>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add oscilloscope-trace" />
+
+That writes one file: `compositions/oscilloscope-trace.html`.
+
+## Add it to your video
+
+It runs for 6 seconds at 1920×1080. Paste this into your composition:
+
+```html index.html
+<div
+  data-composition-id="oscilloscope-trace"
+  data-composition-src="compositions/oscilloscope-trace.html"
+  data-start="0"
+  data-duration="6"
+  data-track-index="1"
+  data-width="1920"
+  data-height="1080"
+></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.
+
+{/* hf:generated-footer */}
+
+Tagged `instrument` `data` `showcase` `retro`.
+
+## 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/rack-focus.mdx b/docs/catalog/blocks/rack-focus.mdx
new file mode 100644
index 0000000000..39479f1891
--- /dev/null
+++ b/docs/catalog/blocks/rack-focus.mdx
@@ -0,0 +1,675 @@
+---
+title: "Rack Focus"
+description: "A focus pull with real aperture bokeh: the focal plane travels from a near subject to a far one, so one resolves as the other blows into hard-edged polygon discs that clip to a cat's eye toward the corners. A focus pull only reads against content at two clearly separated depths, so this block carries its own depth-layered night exterior and puts both subject depths on variables."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/blocks/rack-focus.html"
+  compositionId="rack-focus"
+  compositionSrc="compositions/rack-focus.html"
+  variables={[{"id":"nearfocus","type":"number","label":"Near focal distance","default":1.2,"min":0.2,"max":100,"step":0.05,"unit":"m"},{"id":"farfocus","type":"number","label":"Far focal distance","default":80,"min":0.3,"max":400,"step":0.5,"unit":"m"},{"id":"focallength","type":"number","label":"Focal length","default":85,"min":12,"max":300,"step":1,"unit":"mm"},{"id":"aperture","type":"number","label":"Aperture (f-number)","default":1.8,"min":0.95,"max":22,"step":0.05},{"id":"blades","type":"number","label":"Aperture blades (bokeh shape)","default":6,"min":3,"max":14,"step":1},{"id":"catseye","type":"number","label":"Cat eye clipping at the corners","default":0.62,"min":0,"max":1,"step":0.02},{"id":"pullstart","type":"number","label":"Pull start","default":1.2,"min":0,"max":30,"step":0.05,"unit":"s"},{"id":"pullduration","type":"number","label":"Pull duration","default":3.2,"min":0.1,"max":30,"step":0.05,"unit":"s"},{"id":"pullease","type":"string","label":"Pull easing (GSAP ease)","default":"power2.inOut","placeholder":"power2.inOut"},{"id":"bokeh","type":"number","label":"Bokeh exposure","default":1,"min":0,"max":3,"step":0.05},{"id":"backdrop","type":"color","label":"Backdrop","default":"#05060a"}]}
+>
+
+```html rack-focus.html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Rack Focus</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <!--
+      RACK FOCUS: a focus pull with real aperture bokeh.
+
+      WHAT THIS NEEDS TO READ AT ALL
+      ------------------------------
+      A focus pull is a depth effect. It only reads when the frame holds
+      content at two clearly separated depths: something near the lens and
+      something far behind it. Point it at flat, single-plane content and
+      nothing happens, exactly like a dolly zoom on a flat card.
+
+      This block therefore carries its own depth-layered scene, a night
+      exterior built from light sources spread from 1.15 m to 90 m, so it
+      works standalone. Every depth is a variable: `nearfocus` is where the
+      pull starts, `farfocus` is where it ends, and the scene's two subjects
+      sit at those depths. Change them and the subjects move with them.
+
+      WHY THIS IS NOT A BLUR
+      ----------------------
+      A CSS/Gaussian blur softens everything uniformly. A real defocus turns
+      each point of light into an image of the APERTURE, scaled by its circle
+      of confusion, so a bright point becomes a hard-edged polygon disc whose
+      size grows with distance from the focal plane, and which clips to a
+      cat's-eye toward the frame corners. Every light in this scene is
+      splatted as an aperture-shaped sprite at its own circle of confusion.
+
+      CIRCLE OF CONFUSION, from three.js BokehShader2 (MIT), Martins Upitis
+      --------------------------------------------------------------------
+      Read from examples/jsm/shaders/BokehShader2.js:
+
+          float CoC = 0.03;              // circle of confusion in mm
+                                         // (35mm film = 0.03mm)
+          float f = focalLength;         // mm
+          float d = fDepth * 1000.0;     // focal plane in mm
+          float o = depth  * 1000.0;     // object depth in mm
+          float a = (o * f) / (o - f);
+          float b = (d * f) / (d - f);
+          float c = (d - f) / (d * fstop * CoC);
+          blur = abs(a - b) * c;
+
+      `blur` comes out in units of that 0.03 mm acceptable-sharpness circle,
+      so the defocus DIAMETER on the sensor is `blur * 0.03` mm, which this
+      block converts to pixels with the sensor width. Same constants, same
+      formula, independently written, no code copied. This agrees with the
+      Zeiss thin-lens form CoC = (f²/N)·|1/S - 1/U| for S >> f.
+
+      Aperture shape is the community-standard regular-polygon boundary
+      d(θ) = cos(π/n) / cos(mod(θ, 2π/n) - π/n), n = blade count (real
+      irises ship 5, 6, 8 or 9 blades). Cat's-eye clipping is the aperture
+      intersected with two barrel openings offset along the radial direction,
+      which is the actual mechanism of mechanical vignetting.
+
+      DETERMINISM
+      -----------
+      State at frame N is computed from N. The focal distance is a closed-form
+      function of t, every circle of confusion follows from a static depth and
+      that focal distance, and the scene point cloud is built once from a
+      seeded PRNG. No accumulation, no clocks, no unseeded randomness.
+    -->
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #000;
+        overflow: hidden;
+      }
+      #rf-root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #rf-backdrop {
+        position: absolute;
+        inset: 0;
+        background: #05060a;
+      }
+      #rf-canvas {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="rf-root"
+      data-composition-id="rack-focus"
+      data-root="true"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="6"
+      data-composition-variables='[
+        {"id":"nearfocus","type":"number","label":"Near focal distance","default":1.2,"min":0.2,"max":100,"step":0.05,"unit":"m"},
+        {"id":"farfocus","type":"number","label":"Far focal distance","default":80,"min":0.3,"max":400,"step":0.5,"unit":"m"},
+        {"id":"focallength","type":"number","label":"Focal length","default":85,"min":12,"max":300,"step":1,"unit":"mm"},
+        {"id":"aperture","type":"number","label":"Aperture (f-number)","default":1.8,"min":0.95,"max":22,"step":0.05},
+        {"id":"blades","type":"number","label":"Aperture blades (bokeh shape)","default":6,"min":3,"max":14,"step":1},
+        {"id":"catseye","type":"number","label":"Cat eye clipping at the corners","default":0.62,"min":0,"max":1,"step":0.02},
+        {"id":"pullstart","type":"number","label":"Pull start","default":1.2,"min":0,"max":30,"step":0.05,"unit":"s"},
+        {"id":"pullduration","type":"number","label":"Pull duration","default":3.2,"min":0.1,"max":30,"step":0.05,"unit":"s"},
+        {"id":"pullease","type":"string","label":"Pull easing (GSAP ease)","default":"power2.inOut","placeholder":"power2.inOut"},
+        {"id":"bokeh","type":"number","label":"Bokeh exposure","default":1,"min":0,"max":3,"step":0.05},
+        {"id":"backdrop","type":"color","label":"Backdrop","default":"#05060a"}
+      ]'
+    >
+      <div id="rf-backdrop"></div>
+      <canvas id="rf-canvas" width="1920" height="1080"></canvas>
+
+      <!-- Driver clip: gives HyperFrames a timed element to own on track 0. -->
+      <div
+        id="rf-drv"
+        class="clip"
+        data-start="0"
+        data-duration="6"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+
+    <script>
+      (function () {
+        var DUR = 6;
+        var W = 1920;
+        var H = 1080;
+
+        // 36mm-wide sensor, 16:9 active area. Pixels per millimetre is the
+        // only thing the projection needs, and it is the same on both axes.
+        var SENSOR_W_MM = 36;
+        var PX_PER_MM = W / SENSOR_W_MM;
+
+        // BokehShader2's acceptable-sharpness circle, in mm (35mm film).
+        var COC_MM = 0.03;
+
+        // Defocus is clamped so a wildly out-of-range focus setting cannot
+        // splat sprites the size of the frame. BokehShader2 clamps the same
+        // quantity with its `maxblur` uniform.
+        var MAX_COC_R_PX = 0.1 * H;
+        // Smallest sprite half-width. Below roughly one pixel a splat is an
+        // aliasing machine, so points in focus bottom out here.
+        var MIN_R_PX = 0.75;
+
+        var V = (window.__hyperframes && window.__hyperframes.getVariables()) || {};
+        var CS = getComputedStyle(document.getElementById("rf-root"));
+
+        // The runtime defines every declared variable as `--<slug>` on the
+        // root (packages/core/src/tokenSlug.ts), so a host stylesheet can
+        // override one there too. Read the custom property first, fall back
+        // to the declared value when it is unset.
+        function raw(id) {
+          var css = CS.getPropertyValue("--" + id.toLowerCase()).trim();
+          return css !== "" ? css : V[id];
+        }
+        function num(id, fallback) {
+          var n = parseFloat(raw(id));
+          return isFinite(n) ? n : fallback;
+        }
+
+        var NEAR = num("nearfocus", 1.2);
+        var FAR = num("farfocus", 80);
+        var FOCAL = num("focallength", 85);
+        var FSTOP = num("aperture", 1.8);
+        var BLADES = Math.max(3, Math.round(num("blades", 6)));
+        var CATSEYE = num("catseye", 0.62);
+        var PULL_START = num("pullstart", 1.2);
+        var PULL_DUR = Math.max(0.001, num("pullduration", 3.2));
+        var BOKEH = num("bokeh", 1);
+        var EASE_NAME = String(raw("pullease") || "power2.inOut");
+        var BACKDROP =
+          typeof raw("backdrop") === "string" && raw("backdrop") ? raw("backdrop") : "#05060a";
+
+        document.getElementById("rf-backdrop").style.background = BACKDROP;
+
+        var EASE = gsap.parseEase(EASE_NAME) || gsap.parseEase("power2.inOut");
+
+        // A focus ring is roughly linear in dioptres, not in metres: a rack
+        // from 1.2m to 80m spends its first millimetre of barrel rotation
+        // crossing most of the distance. Interpolating 1/distance is what
+        // makes the pull travel evenly instead of snapping to the far plane.
+        function focusAt(t) {
+          var u = Math.min(1, Math.max(0, (t - PULL_START) / PULL_DUR));
+          var e = EASE(u);
+          var inv = 1 / NEAR + (1 / FAR - 1 / NEAR) * e;
+          return 1 / inv;
+        }
+
+        // ── Scene ────────────────────────────────────────────────────────
+        // A night exterior: a string of practical lights right in front of
+        // the lens, a lit city block far behind it, and scattered lights
+        // through every depth between so the pull reads as a continuous
+        // travel rather than a cut between two planes.
+
+        function mulberry32(a) {
+          return function () {
+            a |= 0;
+            a = (a + 0x6d2b79f5) | 0;
+            var t = Math.imul(a ^ (a >>> 15), 1 | a);
+            t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+            return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+          };
+        }
+        var rnd = mulberry32(0x5eed1a3);
+        function rr(lo, hi) {
+          return lo + (hi - lo) * rnd();
+        }
+
+        // x, y in metres (y up, origin on the optical axis), z in metres,
+        // r0 = the light's own physical radius in metres, b = peak
+        // brightness when perfectly in focus (values above 1 are highlights
+        // that clip, which is exactly why they stay visible once spread
+        // across a bokeh disc), rgb = colour.
+        var P = [];
+        function light(x, y, z, r0, b, c) {
+          P.push(x, y, z, r0, b, c[0], c[1], c[2]);
+        }
+
+        var TUNGSTEN = [1.0, 0.74, 0.45];
+        var FILAMENT = [1.0, 0.9, 0.74];
+        var WIRE = [0.86, 0.74, 0.6];
+        var WARM_WIN = [1.0, 0.79, 0.52];
+        var COOL_WIN = [0.6, 0.75, 1.0];
+        var SIGN_A = [0.35, 0.95, 1.0];
+        var SIGN_B = [1.0, 0.42, 0.72];
+
+        // Half the frame's width, in metres, at depth z. Both subjects are
+        // laid out against the reference framing (85mm, 1.2m / 80m) and then
+        // scaled by this, so retuning the lens or either focal distance moves
+        // the subjects with the frame instead of pushing them out of it.
+        function halfW(z) {
+          return (0.5 * SENSOR_W_MM * z) / FOCAL;
+        }
+
+        // Near subject: a catenary string of bulbs at `nearfocus`. The wire is
+        // what makes "sharp" unmistakable, a one-pixel line either resolves
+        // or it does not, and the filament inside each bulb is the second cue.
+        var NEAR_Z = NEAR;
+        var NS = halfW(NEAR_Z) / 0.25412;
+        var X_END = 0.4;
+        var SAG_A = 0.3;
+        var SAG = 0.1;
+        var COSH_END = Math.cosh(X_END / SAG_A);
+        function stringY(x) {
+          var s = (COSH_END - Math.cosh(x / SAG_A)) / (COSH_END - 1);
+          return 0.075 - SAG * s - 0.035 * (x / X_END);
+        }
+        function stringZ(x) {
+          return NEAR_Z + 0.05 * (x / X_END);
+        }
+        for (var i = 0; i < 1100; i++) {
+          var wx = -0.42 + (0.84 * i) / 1099;
+          light(wx * NS, stringY(wx) * NS, stringZ(wx), 0.0006 * NS, 1.4, WIRE);
+        }
+        for (var k = -5; k <= 5; k++) {
+          var bx = k * 0.085;
+          var by = stringY(bx) - 0.011;
+          var bz = stringZ(bx);
+          light(bx * NS, by * NS, bz, 0.006 * NS, 26, TUNGSTEN);
+          light((bx - 0.0022) * NS, by * NS, bz, 0.0006 * NS, 7, FILAMENT);
+          light(bx * NS, (by - 0.0022) * NS, bz, 0.0006 * NS, 7, FILAMENT);
+          light((bx + 0.0022) * NS, by * NS, bz, 0.0006 * NS, 7, FILAMENT);
+        }
+
+        // Far subject: three lit towers plus a dense LED sign strip, sitting
+        // around `farfocus`. The sign's pitch is fine enough that it only
+        // resolves into separate lamps when focus actually arrives.
+        var FAR_Z = FAR;
+        var FS = halfW(FAR_Z) / 16.941;
+        function tower(cx, hw, topY, botY, cols, rows, z, lit) {
+          for (var c = 0; c < cols; c++) {
+            for (var r = 0; r < rows; r++) {
+              if (rnd() > lit) continue;
+              var x = cx - hw + (2 * hw * (c + 0.5)) / cols;
+              var y = botY + ((topY - botY) * (r + 0.5)) / rows;
+              var cool = rnd() < 0.28;
+              light(x, y, z + rr(-0.4, 0.4) * FS, 0.24 * FS, rr(9, 20), cool ? COOL_WIN : WARM_WIN);
+            }
+          }
+        }
+        tower(-9.5 * FS, 3.5 * FS, 9.6 * FS, -4.0 * FS, 6, 14, FAR_Z * 1.03, 0.34);
+        tower(2.0 * FS, 4.5 * FS, 6.4 * FS, -4.0 * FS, 8, 12, FAR_Z * 0.98, 0.3);
+        tower(12.5 * FS, 3.0 * FS, 11.0 * FS, -4.0 * FS, 5, 15, FAR_Z * 1.08, 0.36);
+        for (var s = 0; s < 40; s++) {
+          var sx = (-5.5 + (11 * s) / 39) * FS;
+          var mixc = s / 39;
+          var sc = [
+            SIGN_A[0] + (SIGN_B[0] - SIGN_A[0]) * mixc,
+            SIGN_A[1] + (SIGN_B[1] - SIGN_A[1]) * mixc,
+            SIGN_A[2] + (SIGN_B[2] - SIGN_A[2]) * mixc,
+          ];
+          light(sx, -5.0 * FS, FAR_Z * 0.99, 0.1 * FS, 7, sc);
+          light(sx, -5.55 * FS, FAR_Z * 0.99, 0.1 * FS, 7, sc);
+        }
+
+        // Everything between. Depth is drawn log-uniform between the two
+        // subjects and the screen position is uniform, so the mid-ground
+        // stays evenly spread whatever the two focal distances are.
+        var Z_LO = Math.min(NEAR_Z, FAR_Z) * 1.9;
+        var Z_HI = Math.max(NEAR_Z, FAR_Z) * 0.85;
+        for (var m = 0; m < 90; m++) {
+          var z = Z_LO * Math.pow(Z_HI / Z_LO, rnd());
+          var halfWm = (0.5 * SENSOR_W_MM * z) / FOCAL;
+          var halfHm = (halfWm * H) / W;
+          var warm = rnd() < 0.66;
+          light(
+            rr(-1.05, 1.05) * halfWm,
+            rr(-1.0, 0.75) * halfHm,
+            z,
+            rr(0.006, 0.05) * (z / 12),
+            rr(5, 18),
+            warm ? WARM_WIN : COOL_WIN,
+          );
+        }
+
+        // ── GL ───────────────────────────────────────────────────────────
+        var canvas = document.getElementById("rf-canvas");
+        var gl =
+          canvas.getContext("webgl", {
+            alpha: true,
+            antialias: false,
+            depth: false,
+            stencil: false,
+            preserveDrawingBuffer: true,
+            powerPreference: "high-performance",
+          }) ||
+          canvas.getContext("experimental-webgl", {
+            alpha: true,
+            preserveDrawingBuffer: true,
+          });
+
+        var VERT = [
+          "precision highp float;",
+          "attribute vec2 aCorner;", // -1..1 quad corner
+          "attribute vec3 aPos;", // metres, y up, z away from the lens
+          "attribute vec2 aSize;", // x = own radius (m), y = in-focus peak
+          "attribute vec3 aColor;",
+          "uniform vec2 uRes;",
+          "uniform float uPxPerMm;",
+          "uniform float uFocal;", // mm
+          "uniform float uFocus;", // metres
+          "uniform float uFstop;",
+          "uniform float uCoCmm;",
+          "uniform float uMaxR;",
+          "uniform float uMinR;",
+          "uniform float uCatsEye;",
+          "uniform float uBokeh;",
+          "varying vec2 vQ;",
+          "varying vec3 vColor;",
+          "varying float vGain;",
+          "varying float vShape;",
+          "varying float vAA;",
+          "varying vec2 vRadial;",
+          "varying float vCat;",
+          "void main() {",
+          "  float z = max(aPos.z, 0.001);",
+          "  float ppm = uPxPerMm * uFocal / z;", // pixels per metre at this depth
+          "  vec2 centre = uRes * 0.5 + aPos.xy * ppm;",
+          "  float r0 = max(aSize.x * ppm, uMinR);",
+          "",
+          "  // BokehShader2's circle of confusion, in units of uCoCmm.",
+          "  float f = uFocal;",
+          "  float d = uFocus * 1000.0;",
+          "  float o = z * 1000.0;",
+          "  float a = (o * f) / max(o - f, 1e-4);",
+          "  float b = (d * f) / max(d - f, 1e-4);",
+          "  float c = (d - f) / max(d * uFstop * uCoCmm, 1e-6);",
+          "  float blur = abs(a - b) * c;",
+          "  // -> defocus diameter in mm -> pixels -> radius.",
+          "  float cocR = min(blur * uCoCmm * uPxPerMm * 0.5, uMaxR);",
+          "",
+          "  // A finite source convolved with the defocus disc: radii add in",
+          "  // quadrature. Flux is conserved, so peak brightness falls as the",
+          "  // inverse square of the radius. That single term is why an",
+          "  // in-focus lamp clips to white and a defocused one is a readable",
+          "  // disc instead of a smear.",
+          "  float R = sqrt(r0 * r0 + cocR * cocR);",
+          "  vGain = aSize.y * uBokeh * (r0 * r0) / (R * R);",
+          "  // Near focus the sprite is the lamp (round); far from it the",
+          "  // sprite is an image of the aperture (polygonal).",
+          "  vShape = (cocR * cocR) / (cocR * cocR + r0 * r0);",
+          "  vAA = 1.0 / max(R, 0.5);",
+          "  vColor = aColor;",
+          "  vQ = aCorner;",
+          "",
+          "  // Mechanical vignetting: the barrel openings clip the aperture",
+          "  // harder the further the sprite sits from the optical axis.",
+          "  vec2 off = centre - uRes * 0.5;",
+          "  float rad = length(off);",
+          "  vRadial = rad > 1.0 ? off / rad : vec2(1.0, 0.0);",
+          "  vCat = uCatsEye * min(1.0, rad / (length(uRes) * 0.5));",
+          "",
+          "  // A light spread thin enough to land under half a display code",
+          "  // value contributes nothing but fill rate. Culling it here is what",
+          "  // keeps a 900-point wire from splatting 900 invisible discs the",
+          "  // moment it goes out of focus.",
+          "  if (vGain < 0.0015) {",
+          "    gl_Position = vec4(2.0, 2.0, 2.0, 1.0);",
+          "    return;",
+          "  }",
+          "",
+          "  vec2 p = centre + aCorner * R;",
+          "  gl_Position = vec4((p / uRes) * 2.0 - 1.0, 0.0, 1.0);",
+          "}",
+        ].join("\n");
+
+        var FRAG = [
+          "precision highp float;",
+          "varying vec2 vQ;",
+          "varying vec3 vColor;",
+          "varying float vGain;",
+          "varying float vShape;",
+          "varying float vAA;",
+          "varying vec2 vRadial;",
+          "varying float vCat;",
+          "uniform float uBlades;",
+          "const float PI = 3.14159265;",
+          "void main() {",
+          "  float r = length(vQ);",
+          "  if (r > 1.0) discard;",
+          "  float th = r > 1e-5 ? atan(vQ.y, vQ.x) : 0.0;",
+          "",
+          "  // Regular-polygon aperture boundary: circumradius 1 at a blade",
+          "  // vertex, cos(PI/n) at a blade midpoint.",
+          "  float n = uBlades;",
+          "  float seg = 2.0 * PI / n;",
+          "  float poly = cos(PI / n) / cos(mod(th, seg) - PI / n);",
+          "  float bound = mix(1.0, poly, vShape);",
+          "",
+          "  float cov = smoothstep(bound, bound - vAA, r);",
+          "  // Two offset barrel openings cut the disc from opposite sides,",
+          "  // which is what turns a corner bokeh into a cat's eye.",
+          "  float cut = vCat * vShape;",
+          "  cov *= smoothstep(1.0, 1.0 - vAA, length(vQ - vRadial * cut));",
+          "  cov *= smoothstep(1.0, 1.0 - vAA, length(vQ + vRadial * cut));",
+          "",
+          "  gl_FragColor = vec4(vColor * (vGain * cov), 1.0);",
+          "}",
+        ].join("\n");
+
+        var uni = {};
+        var ready = false;
+        var count = 0;
+
+        function compile(type, src) {
+          var sh = gl.createShader(type);
+          gl.shaderSource(sh, src);
+          gl.compileShader(sh);
+          if (!gl.getShaderParameter(sh, gl.COMPILE_STATUS)) {
+            throw new Error("rack-focus shader: " + gl.getShaderInfoLog(sh));
+          }
+          return sh;
+        }
+
+        function hexToRgb(hex) {
+          var h = String(hex).trim().replace("#", "");
+          if (h.length === 3) h = h[0] + h[0] + h[1] + h[1] + h[2] + h[2];
+          var v = parseInt(h, 16);
+          if (!isFinite(v)) return [0.02, 0.024, 0.039];
+          return [((v >> 16) & 255) / 255, ((v >> 8) & 255) / 255, (v & 255) / 255];
+        }
+        var BG = hexToRgb(BACKDROP);
+
+        if (gl) {
+          var prog = gl.createProgram();
+          gl.attachShader(prog, compile(gl.VERTEX_SHADER, VERT));
+          gl.attachShader(prog, compile(gl.FRAGMENT_SHADER, FRAG));
+          gl.linkProgram(prog);
+          if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {
+            throw new Error("rack-focus link: " + gl.getProgramInfoLog(prog));
+          }
+          gl.useProgram(prog);
+
+          // Six vertices per light: two triangles carrying the same point
+          // payload and four distinct corner offsets.
+          var CORNERS = [
+            [-1, -1],
+            [1, -1],
+            [1, 1],
+            [-1, -1],
+            [1, 1],
+            [-1, 1],
+          ];
+          var n = P.length / 8;
+          count = n * 6;
+          var STRIDE = 10;
+          var data = new Float32Array(count * STRIDE);
+          var w = 0;
+          for (var pi = 0; pi < n; pi++) {
+            var o = pi * 8;
+            for (var ci = 0; ci < 6; ci++) {
+              data[w++] = CORNERS[ci][0];
+              data[w++] = CORNERS[ci][1];
+              data[w++] = P[o];
+              data[w++] = P[o + 1];
+              data[w++] = P[o + 2];
+              data[w++] = P[o + 3];
+              data[w++] = P[o + 4];
+              data[w++] = P[o + 5];
+              data[w++] = P[o + 6];
+              data[w++] = P[o + 7];
+            }
+          }
+
+          var buf = gl.createBuffer();
+          gl.bindBuffer(gl.ARRAY_BUFFER, buf);
+          gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
+          var BYTES = STRIDE * 4;
+          [
+            ["aCorner", 2, 0],
+            ["aPos", 3, 8],
+            ["aSize", 2, 20],
+            ["aColor", 3, 28],
+          ].forEach(function (spec) {
+            var loc = gl.getAttribLocation(prog, spec[0]);
+            gl.enableVertexAttribArray(loc);
+            gl.vertexAttribPointer(loc, spec[1], gl.FLOAT, false, BYTES, spec[2]);
+          });
+
+          [
+            "uRes",
+            "uPxPerMm",
+            "uFocal",
+            "uFocus",
+            "uFstop",
+            "uCoCmm",
+            "uMaxR",
+            "uMinR",
+            "uCatsEye",
+            "uBlades",
+            "uBokeh",
+          ].forEach(function (nm) {
+            uni[nm] = gl.getUniformLocation(prog, nm);
+          });
+
+          gl.viewport(0, 0, W, H);
+          gl.uniform2f(uni.uRes, W, H);
+          gl.uniform1f(uni.uPxPerMm, PX_PER_MM);
+          gl.uniform1f(uni.uFocal, FOCAL);
+          gl.uniform1f(uni.uFstop, FSTOP);
+          gl.uniform1f(uni.uCoCmm, COC_MM);
+          gl.uniform1f(uni.uMaxR, MAX_COC_R_PX);
+          gl.uniform1f(uni.uMinR, MIN_R_PX);
+          gl.uniform1f(uni.uCatsEye, CATSEYE);
+          gl.uniform1f(uni.uBlades, BLADES);
+          gl.uniform1f(uni.uBokeh, BOKEH);
+
+          // Light adds to light. Overlapping bokeh discs are brighter where
+          // they cross, which is the whole texture of a bokeh field.
+          gl.disable(gl.DEPTH_TEST);
+          gl.enable(gl.BLEND);
+          gl.blendFunc(gl.ONE, gl.ONE);
+          ready = true;
+        }
+
+        // Every frame is computed from t alone: the focal distance is a
+        // closed-form function of t, and each sprite's circle of confusion
+        // falls out of its own static depth and that distance.
+        function draw(t) {
+          if (!ready) return;
+          gl.uniform1f(uni.uFocus, focusAt(t));
+          gl.clearColor(BG[0], BG[1], BG[2], 1);
+          gl.clear(gl.COLOR_BUFFER_BIT);
+          gl.drawArrays(gl.TRIANGLES, 0, count);
+          gl.flush();
+        }
+
+        window.__timelines = window.__timelines || {};
+        var tl = gsap.timeline({ paused: true });
+
+        // The canvas is repainted from a property SETTER, not from onUpdate:
+        // gsap's seek(t) suppresses events by default, so an onUpdate callback
+        // silently never fires on a scrub and the canvas freezes on frame 0.
+        // Tweened values are always written during render, suppressed or not,
+        // so this fires on every seek, and hands us the frame time directly.
+        var driver = { _t: 0 };
+        Object.defineProperty(driver, "t", {
+          get: function () {
+            return this._t;
+          },
+          set: function (v) {
+            this._t = v;
+            draw(v);
+          },
+        });
+        tl.to(driver, { t: DUR, duration: DUR, ease: "none" }, 0);
+        window.__timelines["rack-focus"] = tl;
+
+        draw(0);
+      })();
+    </script>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add rack-focus" />
+
+That writes one file: `compositions/rack-focus.html`.
+
+## Add it to your video
+
+It runs for 6 seconds at 1920×1080. Paste this into your composition:
+
+```html index.html
+<div
+  data-composition-id="rack-focus"
+  data-composition-src="compositions/rack-focus.html"
+  data-start="0"
+  data-duration="6"
+  data-track-index="1"
+  data-width="1920"
+  data-height="1080"
+></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.
+
+## Change how it looks
+
+Set these CSS variables on the block:
+
+- `--nearfocus` — Near focal distance in metres (where the pull starts and the near subject sits). Defaults to `1.2`.
+- `--farfocus` — Far focal distance in metres (where the pull ends and the far subject sits). Defaults to `80`.
+- `--focallength` — Focal length in mm (longer lens = shallower depth of field). Defaults to `85`.
+- `--aperture` — Aperture f-number (lower = bigger bokeh). Defaults to `1.8`.
+- `--blades` — Aperture blade count, the bokeh polygon's sides. Defaults to `6`.
+- `--catseye` — Cat's-eye clipping at the frame corners (mechanical vignetting). Defaults to `0.62`.
+- `--pullstart` — Seconds held on the near subject before the pull starts. Defaults to `1.2`.
+- `--pullduration` — Pull duration in seconds. Defaults to `3.2`.
+- `--pullease` — Pull easing (any GSAP ease name). Defaults to `power2.inOut`.
+- `--bokeh` — Bokeh exposure. Defaults to `1`.
+- `--backdrop` — Backdrop. Defaults to `#05060a`.
+
+{/* hf:generated-footer */}
+
+Tagged `webgl` `shader` `camera` `depth` `cinematic` `showcase`.
+
+## 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/reddit-post.mdx b/docs/catalog/blocks/reddit-post.mdx
index cf13693acb..6a5e89b2bd 100644
--- a/docs/catalog/blocks/reddit-post.mdx
+++ b/docs/catalog/blocks/reddit-post.mdx
@@ -3,34 +3,378 @@ title: "Reddit Post Card"
 description: "Animated Reddit post card overlay with upvotes and comments"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/reddit-post.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/reddit-post.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/reddit-post.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Reddit Post Card preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add reddit-post
-```
+<InstallCommand command="npx hyperframes add reddit-post" />
 
 That writes one file: `compositions/reddit-post.html`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`reddit-post.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&display=block"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      body {
+        width: 1920px;
+        height: 1080px;
+        font-family: "DM Sans", sans-serif;
+      }
+
+      [data-composition-id="reddit-post"] .reddit-card {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 860px;
+        background: #1a1a2e;
+        border-radius: 16px;
+        padding: 32px;
+        box-shadow: 0 12px 60px rgba(0, 0, 0, 0.6);
+      }
+
+      /* Header */
+      [data-composition-id="reddit-post"] .post-header {
+        display: flex;
+        align-items: center;
+        gap: 14px;
+        margin-bottom: 24px;
+      }
+
+      [data-composition-id="reddit-post"] .subreddit-icon {
+        width: 48px;
+        height: 48px;
+        flex-shrink: 0;
+      }
+
+      [data-composition-id="reddit-post"] .subreddit-icon svg {
+        width: 48px;
+        height: 48px;
+        display: block;
+      }
+
+      [data-composition-id="reddit-post"] .post-meta {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+      }
+
+      [data-composition-id="reddit-post"] .subreddit-name {
+        font-size: 28px;
+        font-weight: 700;
+        color: #d7dadc;
+        line-height: 1.3;
+      }
+
+      [data-composition-id="reddit-post"] .post-author {
+        font-size: 24px;
+        font-weight: 400;
+        color: #818384;
+        line-height: 1.3;
+      }
+
+      /* Content */
+      [data-composition-id="reddit-post"] .post-title {
+        font-size: 38px;
+        font-weight: 700;
+        color: #d7dadc;
+        line-height: 1.35;
+        margin-bottom: 16px;
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+      }
+
+      [data-composition-id="reddit-post"] .post-body {
+        font-size: 28px;
+        font-weight: 400;
+        color: #818384;
+        line-height: 1.45;
+        margin-bottom: 28px;
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+      }
+
+      /* Action bar */
+      [data-composition-id="reddit-post"] .action-bar {
+        display: flex;
+        align-items: center;
+        gap: 28px;
+        padding-top: 20px;
+        border-top: 1px solid #343536;
+      }
+
+      [data-composition-id="reddit-post"] .vote-group {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        background: #272729;
+        border-radius: 24px;
+        padding: 8px 16px;
+      }
+
+      [data-composition-id="reddit-post"] .vote-btn {
+        width: 32px;
+        height: 32px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+      }
+
+      [data-composition-id="reddit-post"] .vote-btn svg {
+        width: 28px;
+        height: 28px;
+        display: block;
+      }
+
+      [data-composition-id="reddit-post"] .vote-count {
+        font-size: 26px;
+        font-weight: 700;
+        color: #d7dadc;
+        min-width: 50px;
+        text-align: center;
+      }
+
+      [data-composition-id="reddit-post"] .action-btn {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        background: #272729;
+        border-radius: 24px;
+        padding: 10px 20px;
+      }
 
-It runs for 5 seconds at 1920×1080. Paste this into your composition:
+      [data-composition-id="reddit-post"] .action-btn svg {
+        width: 26px;
+        height: 26px;
+        display: block;
+      }
 
-```html index.html
-<div
-  data-composition-id="reddit-post"
-  data-composition-src="compositions/reddit-post.html"
-  data-start="0"
-  data-duration="5"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+      [data-composition-id="reddit-post"] .action-btn span {
+        font-size: 24px;
+        font-weight: 400;
+        color: #818384;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="reddit-post"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="5"
+    >
+      <div id="card" class="clip reddit-card" data-start="0" data-duration="5" data-track-index="0">
+        <!-- Header -->
+        <div class="post-header">
+          <div class="subreddit-icon">
+            <svg viewBox="0 0 48 48" fill="none">
+              <circle cx="24" cy="24" r="24" fill="#4A90D9" />
+              <text
+                x="24"
+                y="30"
+                text-anchor="middle"
+                font-family="DM Sans, sans-serif"
+                font-size="22"
+                font-weight="700"
+                fill="#fff"
+              >
+                r/
+              </text>
+            </svg>
+          </div>
+          <div class="post-meta">
+            <span class="subreddit-name">r/hyperframes</span>
+            <span class="post-author">u/placeholder_user &middot; 3h</span>
+          </div>
+        </div>
+
+        <!-- Content -->
+        <div class="post-title">Prompt to change this title to whatever you want</div>
+        <div class="post-body">
+          Prompt to change this body text, the subreddit, username, and vote count to match your
+          content.
+        </div>
+
+        <!-- Action bar -->
+        <div class="action-bar">
+          <div class="vote-group">
+            <div id="upvote-btn" class="vote-btn">
+              <svg viewBox="0 0 24 24" fill="none">
+                <path id="upvote-arrow" d="M12 4L3 14h5v6h8v-6h5L12 4z" fill="#818384" />
+              </svg>
+            </div>
+            <span id="vote-count" class="vote-count">4.2k</span>
+            <div class="vote-btn">
+              <svg viewBox="0 0 24 24" fill="none">
+                <path d="M12 20l9-10h-5V4H8v6H3l9 10z" fill="#818384" />
+              </svg>
+            </div>
+          </div>
+
+          <div class="action-btn">
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="#818384"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z" />
+            </svg>
+            <span>328</span>
+          </div>
+
+          <div class="action-btn">
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="#818384"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path d="M4 12v8a2 2 0 002 2h12a2 2 0 002-2v-8" />
+              <polyline points="16 6 12 2 8 6" />
+              <line x1="12" y1="2" x2="12" y2="15" />
+            </svg>
+            <span>Share</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      var tl = gsap.timeline({ paused: true });
+
+      var card = document.getElementById("card");
+      var upvoteBtn = document.getElementById("upvote-btn");
+      var upvoteArrow = document.getElementById("upvote-arrow");
+      var voteCount = document.getElementById("vote-count");
+
+      // Start off-screen below
+      gsap.set(card, { y: 400, opacity: 0 });
+
+      // Slide in from bottom
+      tl.to(
+        card,
+        {
+          y: 0,
+          opacity: 1,
+          duration: 0.6,
+          ease: "power3.out",
+        },
+        0.1,
+      );
+
+      // Upvote press-in
+      tl.to(
+        upvoteBtn,
+        {
+          scale: 0.85,
+          duration: 0.12,
+          ease: "power2.out",
+        },
+        1.5,
+      );
+
+      // Upvote release with spring bounce
+      tl.to(
+        upvoteBtn,
+        {
+          scale: 1,
+          duration: 0.4,
+          ease: "elastic.out(1, 0.4)",
+        },
+        1.62,
+      );
+
+      // Arrow turns orange
+      tl.to(
+        upvoteArrow,
+        {
+          attr: { fill: "#ff4500" },
+          duration: 0.12,
+          ease: "none",
+        },
+        1.62,
+      );
+
+      // Vote count turns orange + increments
+      tl.to(
+        voteCount,
+        {
+          color: "#ff4500",
+          duration: 0.12,
+          ease: "none",
+          onStart: function () {
+            voteCount.textContent = "4.3k";
+          },
+        },
+        1.62,
+      );
+
+      // Slide out to bottom
+      tl.to(
+        card,
+        {
+          y: 400,
+          opacity: 0,
+          duration: 0.3,
+          ease: "power3.in",
+        },
+        4.2,
+      );
+
+      window.__timelines["reddit-post"] = tl;
+    </script>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="reddit-post" data-composition-src="compositions/reddit-post.html" data-start="0" data-duration="5" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/ridged-burn.mdx b/docs/catalog/blocks/ridged-burn.mdx
index b37067644e..245e5979ea 100644
--- a/docs/catalog/blocks/ridged-burn.mdx
+++ b/docs/catalog/blocks/ridged-burn.mdx
@@ -3,34 +3,409 @@ title: "Ridged Burn"
 description: "Shader transition with ridged turbulence burn effect"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ridged-burn.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ridged-burn.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/ridged-burn.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Ridged Burn preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add ridged-burn
-```
+<InstallCommand command="npx hyperframes add ridged-burn" />
 
 That writes one file: `compositions/ridged-burn.html`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`ridged-burn.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      @import url("https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Bebas+Neue&family=JetBrains+Mono:wght@400;700&family=Lato:wght@400;700&display=block");
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <style>
+        [data-composition-id="main"] {
+          width: 1920px;
+          height: 1080px;
+          overflow: hidden;
+          position: relative;
+          background: #0b090a;
+        }
+
+        /* Blueprint grid */
+        .bp-grid {
+          position: absolute;
+          inset: 0;
+          background-image:
+            linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
+            linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
+          background-size: 40px 40px;
+          pointer-events: none;
+        }
+
+        /* Layout */
+        .bp-left {
+          position: absolute;
+          left: 0;
+          top: 0;
+          bottom: 0;
+          width: 1200px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .bp-right {
+          position: absolute;
+          right: 0;
+          top: 0;
+          bottom: 0;
+          width: 720px;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          padding: 60px 60px 60px 40px;
+        }
+        .bp-divider {
+          position: absolute;
+          left: 1200px;
+          top: 60px;
+          bottom: 60px;
+          width: 1px;
+          background: #e5383b;
+          opacity: 0.15;
+        }
+        .bp-number {
+          font-family: "Space Mono", monospace;
+          font-size: 14px;
+          font-weight: 700;
+          letter-spacing: 0.4em;
+          text-transform: uppercase;
+          position: absolute;
+          top: 40px;
+          left: 60px;
+          color: #e5383b;
+        }
+
+        /* Right panel typography */
+        .bp-name {
+          font-family: "Bebas Neue", sans-serif;
+          font-size: 38px;
+          letter-spacing: 0.08em;
+          margin-bottom: 20px;
+          color: #e5383b;
+        }
+        .bp-plabel {
+          font-family: "Space Mono", monospace;
+          font-size: 11px;
+          font-weight: 700;
+          letter-spacing: 0.3em;
+          text-transform: uppercase;
+          margin-bottom: 10px;
+          color: #e5383b;
+          opacity: 0.5;
+        }
+        .bp-prompt {
+          font-family: "JetBrains Mono", monospace;
+          font-size: 20px;
+          line-height: 1.6;
+          padding: 16px 20px;
+          border-radius: 6px;
+          margin-bottom: 20px;
+          color: #e5383b;
+          background: rgba(229, 56, 59, 0.06);
+          border: 1px solid rgba(229, 56, 59, 0.12);
+        }
+        .bp-desc {
+          font-family: "Lato", sans-serif;
+          font-size: 17px;
+          line-height: 1.6;
+          color: #777;
+          opacity: 0.55;
+        }
+
+        /* GL scenes (hidden, just for texture capture) */
+        .scene {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1200px;
+          height: 1080px;
+          overflow: hidden;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .scene-label {
+          font-family: "Bebas Neue", sans-serif;
+          font-size: 140px;
+          letter-spacing: 0.06em;
+          opacity: 0.12;
+        }
+      </style>
+
+      <div class="bp-grid"></div>
+      <div class="bp-divider"></div>
+      <div class="bp-number">02 / 14</div>
+
+      <!-- GL demo scenes (captured as textures, then hidden) -->
+      <div id="s1" class="scene" style="background: #0b090a">
+        <div class="scene-label" style="color: #e5383b">SCENE A</div>
+      </div>
+      <div id="s2" class="scene" style="background: #e5383b; opacity: 0">
+        <div class="scene-label" style="color: #0b090a">SCENE B</div>
+      </div>
+
+      <!-- GL canvas (left panel only) -->
+      <canvas
+        id="gl-canvas"
+        width="1200"
+        height="1080"
+        style="
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1200px;
+          height: 1080px;
+          z-index: 10;
+          pointer-events: none;
+          display: none;
+        "
+      >
+      </canvas>
+
+      <!-- Right panel metadata -->
+      <div class="bp-right">
+        <div class="bp-name">Ridged Burn</div>
+        <div class="bp-plabel">Prompt</div>
+        <div class="bp-prompt">"use ridged burn shader transition"</div>
+        <div class="bp-desc">
+          abs(noise) creates sharp lightning-crack edges. Blackbody color gradient with
+          high-frequency ember sparks.
+        </div>
+      </div>
+
+      <div
+        id="driver"
+        class="clip"
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
 
-It runs for 4 seconds at 1920×1080. Paste this into your composition:
+    <script>
+      window.__timelines = window.__timelines || {};
+      var glCanvas = document.getElementById("gl-canvas");
+      var gl = glCanvas.getContext("webgl", { preserveDrawingBuffer: true });
+      if (!gl) {
+        console.warn("WebGL not available");
+        window.__timelines["main"] = gsap.timeline({ paused: true });
+      } else {
+        gl.viewport(0, 0, 1200, 1080);
+        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
+        var sceneTextures = {};
 
-```html index.html
-<div
-  data-composition-id="ridged-burn"
-  data-composition-src="compositions/ridged-burn.html"
-  data-start="0"
-  data-duration="4"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+        function captureScene(sceneId) {
+          var scene = document.getElementById(sceneId);
+          var origOpacity = scene.style.opacity;
+          var origZ = scene.style.zIndex;
+          scene.style.opacity = "1";
+          scene.style.zIndex = "999";
+          scene.offsetHeight;
+          var c = document.createElement("canvas");
+          c.width = 1200;
+          c.height = 1080;
+          var ctx = c.getContext("2d");
+          ctx.fillStyle = window.getComputedStyle(scene).backgroundColor;
+          ctx.fillRect(0, 0, 1200, 1080);
+          var sr = scene.getBoundingClientRect();
+          var els = scene.querySelectorAll("*");
+          for (var i = 0; i < els.length; i++) {
+            var el = els[i],
+              cs = window.getComputedStyle(el);
+            if (cs.display === "none" || cs.visibility === "hidden") continue;
+            var r = el.getBoundingClientRect();
+            if (r.width < 1 || r.height < 1) continue;
+            var x = r.left - sr.left,
+              y = r.top - sr.top,
+              w = r.width,
+              h = r.height;
+            ctx.save();
+            ctx.globalAlpha = parseFloat(cs.opacity) || 1;
+            var bg = cs.backgroundColor;
+            if (bg && bg !== "rgba(0, 0, 0, 0)" && bg !== "transparent") {
+              ctx.fillStyle = bg;
+              ctx.fillRect(x, y, w, h);
+            }
+            var hasChildEls = el.querySelector("div,span,img,video");
+            var text = "";
+            for (var j = 0; j < el.childNodes.length; j++)
+              if (el.childNodes[j].nodeType === 3) text += el.childNodes[j].textContent;
+            text = text.trim();
+            if (text && !hasChildEls) {
+              ctx.font = cs.fontWeight + " " + cs.fontSize + " " + cs.fontFamily;
+              ctx.fillStyle = cs.color;
+              if (cs.letterSpacing && cs.letterSpacing !== "normal")
+                ctx.letterSpacing = cs.letterSpacing;
+              ctx.textAlign = "center";
+              ctx.textBaseline = "middle";
+              ctx.fillText(text, x + w / 2, y + h / 2);
+            }
+            ctx.restore();
+          }
+          scene.style.opacity = origOpacity;
+          scene.style.zIndex = origZ;
+          var tex = gl.createTexture();
+          gl.bindTexture(gl.TEXTURE_2D, tex);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+          gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, c);
+          sceneTextures[sceneId] = tex;
+        }
+
+        var vertSrc =
+          "attribute vec2 a_pos; varying vec2 v_uv; void main(){" +
+          "v_uv=a_pos*0.5+0.5; v_uv.y=1.0-v_uv.y; gl_Position=vec4(a_pos,0,1);}";
+        var quadBuf = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);
+        gl.bufferData(
+          gl.ARRAY_BUFFER,
+          new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),
+          gl.STATIC_DRAW,
+        );
+        function compileShader(src, type) {
+          var s = gl.createShader(type);
+          gl.shaderSource(s, src);
+          gl.compileShader(s);
+          if (!gl.getShaderParameter(s, gl.COMPILE_STATUS))
+            console.error("Shader:", gl.getShaderInfoLog(s));
+          return s;
+        }
+        function mkProg(fragSrc) {
+          var p = gl.createProgram();
+          gl.attachShader(p, compileShader(vertSrc, gl.VERTEX_SHADER));
+          gl.attachShader(p, compileShader(fragSrc, gl.FRAGMENT_SHADER));
+          gl.linkProgram(p);
+          if (!gl.getProgramParameter(p, gl.LINK_STATUS))
+            console.error("Link:", gl.getProgramInfoLog(p));
+          return p;
+        }
+
+        var H =
+          "precision mediump float;" +
+          "varying vec2 v_uv;" +
+          "uniform sampler2D u_from, u_to;" +
+          "uniform float u_progress;" +
+          "uniform vec2 u_resolution;\n";
+
+        var NQ =
+          "float hash(vec2 p){return fract(sin(dot(p,vec2(127.1,311.7)))*43758.5453);}" +
+          "float vnoise(vec2 p){vec2 i=floor(p),f=fract(p);" +
+          "f=f*f*f*(f*(f*6.-15.)+10.);" +
+          "return mix(mix(hash(i),hash(i+vec2(1,0)),f.x)," +
+          "mix(hash(i+vec2(0,1)),hash(i+vec2(1,1)),f.x),f.y);}" +
+          "float fbm(vec2 p){float v=0.,a=.5;" +
+          "mat2 R=mat2(.8,.6,-.6,.8);" +
+          "for(int i=0;i<5;i++){v+=a*vnoise(p);p=R*p*2.02;a*=.5;}return v;}";
+
+        var progPass = mkProg(H + "void main(){gl_FragColor=texture2D(u_from,v_uv);}");
+        var progTrans = mkProg(
+          H +
+            NQ +
+            "float ridged(vec2 p){float v=0.,a=.5;mat2 R=mat2(.8,.6,-.6,.8);for(int i=0;i<5;i++){v+=a*abs(vnoise(p)*2.-1.);p=R*p*2.02;a*=.5;}return v;}void main(){vec4 A=texture2D(u_from,v_uv),B=texture2D(u_to,v_uv);float n=ridged(v_uv*4.);float e=smoothstep(u_progress-.04,u_progress+.04,n);float heat=smoothstep(.12,0.,abs(n-u_progress))*(1.-step(1.,u_progress));vec3 burn=mix(vec3(.4,0,0),vec3(1,.4,0),smoothstep(0.,.25,heat));burn=mix(burn,vec3(1,.85,.3),smoothstep(.25,.5,heat));burn=mix(burn,vec3(1),smoothstep(.5,1.,heat));float sparks=step(.92,vnoise(v_uv*80.))*heat*3.;gl_FragColor=vec4(mix(B,A,e).rgb+burn*heat*3.5+vec3(1.,.7,.3)*sparks,1.);}",
+        );
+
+        function renderShader(prog, texFrom, texTo, progress) {
+          gl.useProgram(prog);
+          gl.activeTexture(gl.TEXTURE0);
+          gl.bindTexture(gl.TEXTURE_2D, texFrom);
+          gl.uniform1i(gl.getUniformLocation(prog, "u_from"), 0);
+          gl.activeTexture(gl.TEXTURE1);
+          gl.bindTexture(gl.TEXTURE_2D, texTo);
+          gl.uniform1i(gl.getUniformLocation(prog, "u_to"), 1);
+          gl.uniform1f(gl.getUniformLocation(prog, "u_progress"), progress);
+          gl.uniform2f(gl.getUniformLocation(prog, "u_resolution"), 1200, 1080);
+          var pos = gl.getAttribLocation(prog, "a_pos");
+          gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);
+          gl.enableVertexAttribArray(pos);
+          gl.vertexAttribPointer(pos, 2, gl.FLOAT, false, 0, 0);
+          gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+        }
+
+        function easeInOut(p) {
+          return p < 0.5 ? 2 * p * p : 1 - Math.pow(-2 * p + 2, 2) / 2;
+        }
+
+        captureScene("s1");
+        captureScene("s2");
+        glCanvas.style.display = "block";
+        renderShader(progPass, sceneTextures["s1"], sceneTextures["s1"], 0);
+        document.querySelectorAll(".scene").forEach(function (s) {
+          s.style.opacity = "0";
+        });
+
+        var tl = gsap.timeline({
+          paused: true,
+          onUpdate: function () {
+            var t = tl.time();
+            if (t >= 1.0 && t < 3.0) {
+              renderShader(
+                progTrans,
+                sceneTextures["s1"],
+                sceneTextures["s2"],
+                easeInOut((t - 1.0) / 2.0),
+              );
+            } else if (t >= 3.0) {
+              renderShader(progPass, sceneTextures["s2"], sceneTextures["s2"], 0);
+            } else {
+              renderShader(progPass, sceneTextures["s1"], sceneTextures["s1"], 0);
+            }
+          },
+        });
+        tl.to({ v: 0 }, { v: 1, duration: 4, ease: "none" }, 0);
+        window.__timelines["main"] = tl;
+      } // end if (gl)
+    </script>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="ridged-burn" data-composition-src="compositions/ridged-burn.html" data-start="0" data-duration="4" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/ripple-waves.mdx b/docs/catalog/blocks/ripple-waves.mdx
index 7617bc94e8..7513c82f34 100644
--- a/docs/catalog/blocks/ripple-waves.mdx
+++ b/docs/catalog/blocks/ripple-waves.mdx
@@ -3,34 +3,398 @@ title: "Ripple Waves"
 description: "Shader transition with concentric ripple wave distortion"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ripple-waves.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ripple-waves.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/ripple-waves.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Ripple Waves preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add ripple-waves
-```
+<InstallCommand command="npx hyperframes add ripple-waves" />
 
 That writes one file: `compositions/ripple-waves.html`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`ripple-waves.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      @import url("https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Bebas+Neue&family=JetBrains+Mono:wght@400;700&family=Lato:wght@400;700&display=block");
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <style>
+        [data-composition-id="main"] {
+          width: 1920px;
+          height: 1080px;
+          overflow: hidden;
+          position: relative;
+          background: #264653;
+        }
+
+        /* Blueprint grid */
+        .bp-grid {
+          position: absolute;
+          inset: 0;
+          background-image:
+            linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
+            linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
+          background-size: 40px 40px;
+          pointer-events: none;
+        }
+
+        /* Layout */
+        .bp-left {
+          position: absolute;
+          left: 0;
+          top: 0;
+          bottom: 0;
+          width: 1200px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .bp-right {
+          position: absolute;
+          right: 0;
+          top: 0;
+          bottom: 0;
+          width: 720px;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          padding: 60px 60px 60px 40px;
+        }
+        .bp-divider {
+          position: absolute;
+          left: 1200px;
+          top: 60px;
+          bottom: 60px;
+          width: 1px;
+          background: #e9c46a;
+          opacity: 0.15;
+        }
+        .bp-number {
+          font-family: "Space Mono", monospace;
+          font-size: 14px;
+          font-weight: 700;
+          letter-spacing: 0.4em;
+          text-transform: uppercase;
+          position: absolute;
+          top: 40px;
+          left: 60px;
+          color: #e9c46a;
+        }
+
+        /* Right panel typography */
+        .bp-name {
+          font-family: "Bebas Neue", sans-serif;
+          font-size: 38px;
+          letter-spacing: 0.08em;
+          margin-bottom: 20px;
+          color: #e9c46a;
+        }
+        .bp-plabel {
+          font-family: "Space Mono", monospace;
+          font-size: 11px;
+          font-weight: 700;
+          letter-spacing: 0.3em;
+          text-transform: uppercase;
+          margin-bottom: 10px;
+          color: #e9c46a;
+          opacity: 0.5;
+        }
+        .bp-prompt {
+          font-family: "JetBrains Mono", monospace;
+          font-size: 20px;
+          line-height: 1.6;
+          padding: 16px 20px;
+          border-radius: 6px;
+          margin-bottom: 20px;
+          color: #e9c46a;
+          background: rgba(233, 196, 106, 0.06);
+          border: 1px solid rgba(233, 196, 106, 0.12);
+        }
+        .bp-desc {
+          font-family: "Lato", sans-serif;
+          font-size: 17px;
+          line-height: 1.6;
+          color: #8aaa9a;
+          opacity: 0.55;
+        }
+
+        /* GL scenes (hidden, just for texture capture) */
+        .scene {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1200px;
+          height: 1080px;
+          overflow: hidden;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .scene-label {
+          font-family: "Bebas Neue", sans-serif;
+          font-size: 140px;
+          letter-spacing: 0.06em;
+          opacity: 0.12;
+        }
+      </style>
+
+      <div class="bp-grid"></div>
+      <div class="bp-divider"></div>
+      <div class="bp-number">05 / 14</div>
+
+      <!-- GL demo scenes (captured as textures, then hidden) -->
+      <div id="s1" class="scene" style="background: #264653">
+        <div class="scene-label" style="color: #e9c46a">SCENE A</div>
+      </div>
+      <div id="s2" class="scene" style="background: #e9c46a; opacity: 0">
+        <div class="scene-label" style="color: #264653">SCENE B</div>
+      </div>
+
+      <!-- GL canvas (left panel only) -->
+      <canvas
+        id="gl-canvas"
+        width="1200"
+        height="1080"
+        style="
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1200px;
+          height: 1080px;
+          z-index: 10;
+          pointer-events: none;
+          display: none;
+        "
+      >
+      </canvas>
+
+      <!-- Right panel metadata -->
+      <div class="bp-right">
+        <div class="bp-name">Ripple Waves</div>
+        <div class="bp-plabel">Prompt</div>
+        <div class="bp-prompt">"use ripple waves shader transition"</div>
+        <div class="bp-desc">
+          Exponential sine waves with sharp crests and broad troughs. Both scenes ripple in opposite
+          phases.
+        </div>
+      </div>
 
-It runs for 4 seconds at 1920×1080. Paste this into your composition:
+      <div
+        id="driver"
+        class="clip"
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
 
-```html index.html
-<div
-  data-composition-id="ripple-waves"
-  data-composition-src="compositions/ripple-waves.html"
-  data-start="0"
-  data-duration="4"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      var glCanvas = document.getElementById("gl-canvas");
+      var gl = glCanvas.getContext("webgl", { preserveDrawingBuffer: true });
+      if (!gl) {
+        console.warn("WebGL not available");
+        window.__timelines["main"] = gsap.timeline({ paused: true });
+      } else {
+        gl.viewport(0, 0, 1200, 1080);
+        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
+        var sceneTextures = {};
+
+        function captureScene(sceneId) {
+          var scene = document.getElementById(sceneId);
+          var origOpacity = scene.style.opacity;
+          var origZ = scene.style.zIndex;
+          scene.style.opacity = "1";
+          scene.style.zIndex = "999";
+          scene.offsetHeight;
+          var c = document.createElement("canvas");
+          c.width = 1200;
+          c.height = 1080;
+          var ctx = c.getContext("2d");
+          ctx.fillStyle = window.getComputedStyle(scene).backgroundColor;
+          ctx.fillRect(0, 0, 1200, 1080);
+          var sr = scene.getBoundingClientRect();
+          var els = scene.querySelectorAll("*");
+          for (var i = 0; i < els.length; i++) {
+            var el = els[i],
+              cs = window.getComputedStyle(el);
+            if (cs.display === "none" || cs.visibility === "hidden") continue;
+            var r = el.getBoundingClientRect();
+            if (r.width < 1 || r.height < 1) continue;
+            var x = r.left - sr.left,
+              y = r.top - sr.top,
+              w = r.width,
+              h = r.height;
+            ctx.save();
+            ctx.globalAlpha = parseFloat(cs.opacity) || 1;
+            var bg = cs.backgroundColor;
+            if (bg && bg !== "rgba(0, 0, 0, 0)" && bg !== "transparent") {
+              ctx.fillStyle = bg;
+              ctx.fillRect(x, y, w, h);
+            }
+            var hasChildEls = el.querySelector("div,span,img,video");
+            var text = "";
+            for (var j = 0; j < el.childNodes.length; j++)
+              if (el.childNodes[j].nodeType === 3) text += el.childNodes[j].textContent;
+            text = text.trim();
+            if (text && !hasChildEls) {
+              ctx.font = cs.fontWeight + " " + cs.fontSize + " " + cs.fontFamily;
+              ctx.fillStyle = cs.color;
+              if (cs.letterSpacing && cs.letterSpacing !== "normal")
+                ctx.letterSpacing = cs.letterSpacing;
+              ctx.textAlign = "center";
+              ctx.textBaseline = "middle";
+              ctx.fillText(text, x + w / 2, y + h / 2);
+            }
+            ctx.restore();
+          }
+          scene.style.opacity = origOpacity;
+          scene.style.zIndex = origZ;
+          var tex = gl.createTexture();
+          gl.bindTexture(gl.TEXTURE_2D, tex);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+          gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, c);
+          sceneTextures[sceneId] = tex;
+        }
+
+        var vertSrc =
+          "attribute vec2 a_pos; varying vec2 v_uv; void main(){" +
+          "v_uv=a_pos*0.5+0.5; v_uv.y=1.0-v_uv.y; gl_Position=vec4(a_pos,0,1);}";
+        var quadBuf = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);
+        gl.bufferData(
+          gl.ARRAY_BUFFER,
+          new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),
+          gl.STATIC_DRAW,
+        );
+        function compileShader(src, type) {
+          var s = gl.createShader(type);
+          gl.shaderSource(s, src);
+          gl.compileShader(s);
+          if (!gl.getShaderParameter(s, gl.COMPILE_STATUS))
+            console.error("Shader:", gl.getShaderInfoLog(s));
+          return s;
+        }
+        function mkProg(fragSrc) {
+          var p = gl.createProgram();
+          gl.attachShader(p, compileShader(vertSrc, gl.VERTEX_SHADER));
+          gl.attachShader(p, compileShader(fragSrc, gl.FRAGMENT_SHADER));
+          gl.linkProgram(p);
+          if (!gl.getProgramParameter(p, gl.LINK_STATUS))
+            console.error("Link:", gl.getProgramInfoLog(p));
+          return p;
+        }
+
+        var H =
+          "precision mediump float;" +
+          "varying vec2 v_uv;" +
+          "uniform sampler2D u_from, u_to;" +
+          "uniform float u_progress;" +
+          "uniform vec2 u_resolution;\n";
+
+        var progPass = mkProg(H + "void main(){gl_FragColor=texture2D(u_from,v_uv);}");
+        var progTrans = mkProg(
+          H +
+            "void main(){vec2 uv=v_uv-.5;float dist=length(uv);vec2 dir=normalize(uv+.001);float fromAmp=u_progress*.04;float fw1=exp(sin(dist*25.-u_progress*12.)-1.);float fw2=exp(sin(dist*50.-u_progress*18.)-1.)*.5;vec2 fromUv=clamp(v_uv+dir*(fw1+fw2)*fromAmp,0.,1.);float toAmp=(1.-u_progress)*.04;float tw1=exp(sin(dist*25.+u_progress*12.)-1.);float tw2=exp(sin(dist*50.+u_progress*18.)-1.)*.5;vec2 toUv=clamp(v_uv-dir*(tw1+tw2)*toAmp,0.,1.);vec4 A=texture2D(u_from,fromUv);vec4 B=texture2D(u_to,toUv);float peak=fw1*u_progress;vec3 tint=vec3(.9,.95,1.)*peak*.1;gl_FragColor=vec4(mix(A.rgb+tint,B.rgb,u_progress),1.);}",
+        );
+
+        function renderShader(prog, texFrom, texTo, progress) {
+          gl.useProgram(prog);
+          gl.activeTexture(gl.TEXTURE0);
+          gl.bindTexture(gl.TEXTURE_2D, texFrom);
+          gl.uniform1i(gl.getUniformLocation(prog, "u_from"), 0);
+          gl.activeTexture(gl.TEXTURE1);
+          gl.bindTexture(gl.TEXTURE_2D, texTo);
+          gl.uniform1i(gl.getUniformLocation(prog, "u_to"), 1);
+          gl.uniform1f(gl.getUniformLocation(prog, "u_progress"), progress);
+          gl.uniform2f(gl.getUniformLocation(prog, "u_resolution"), 1200, 1080);
+          var pos = gl.getAttribLocation(prog, "a_pos");
+          gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);
+          gl.enableVertexAttribArray(pos);
+          gl.vertexAttribPointer(pos, 2, gl.FLOAT, false, 0, 0);
+          gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+        }
+
+        function easeInOut(p) {
+          return p < 0.5 ? 2 * p * p : 1 - Math.pow(-2 * p + 2, 2) / 2;
+        }
+
+        captureScene("s1");
+        captureScene("s2");
+        glCanvas.style.display = "block";
+        renderShader(progPass, sceneTextures["s1"], sceneTextures["s1"], 0);
+        document.querySelectorAll(".scene").forEach(function (s) {
+          s.style.opacity = "0";
+        });
+
+        var tl = gsap.timeline({
+          paused: true,
+          onUpdate: function () {
+            var t = tl.time();
+            if (t >= 1.0 && t < 3.0) {
+              renderShader(
+                progTrans,
+                sceneTextures["s1"],
+                sceneTextures["s2"],
+                easeInOut((t - 1.0) / 2.0),
+              );
+            } else if (t >= 3.0) {
+              renderShader(progPass, sceneTextures["s2"], sceneTextures["s2"], 0);
+            } else {
+              renderShader(progPass, sceneTextures["s1"], sceneTextures["s1"], 0);
+            }
+          },
+        });
+        tl.to({ v: 0 }, { v: 1, duration: 4, ease: "none" }, 0);
+        window.__timelines["main"] = tl;
+      } // end if (gl)
+    </script>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="ripple-waves" data-composition-src="compositions/ripple-waves.html" data-start="0" data-duration="4" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/sdf-iris.mdx b/docs/catalog/blocks/sdf-iris.mdx
index 0c5620978f..b9e6312e80 100644
--- a/docs/catalog/blocks/sdf-iris.mdx
+++ b/docs/catalog/blocks/sdf-iris.mdx
@@ -3,34 +3,398 @@ title: "SDF Iris"
 description: "Shader transition with signed distance field iris reveal"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/sdf-iris.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/sdf-iris.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/sdf-iris.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="SDF Iris preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add sdf-iris
-```
+<InstallCommand command="npx hyperframes add sdf-iris" />
 
 That writes one file: `compositions/sdf-iris.html`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`sdf-iris.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      @import url("https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Bebas+Neue&family=JetBrains+Mono:wght@400;700&family=Lato:wght@400;700&display=block");
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <style>
+        [data-composition-id="main"] {
+          width: 1920px;
+          height: 1080px;
+          overflow: hidden;
+          position: relative;
+          background: #003049;
+        }
+
+        /* Blueprint grid */
+        .bp-grid {
+          position: absolute;
+          inset: 0;
+          background-image:
+            linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
+            linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
+          background-size: 40px 40px;
+          pointer-events: none;
+        }
+
+        /* Layout */
+        .bp-left {
+          position: absolute;
+          left: 0;
+          top: 0;
+          bottom: 0;
+          width: 1200px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .bp-right {
+          position: absolute;
+          right: 0;
+          top: 0;
+          bottom: 0;
+          width: 720px;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          padding: 60px 60px 60px 40px;
+        }
+        .bp-divider {
+          position: absolute;
+          left: 1200px;
+          top: 60px;
+          bottom: 60px;
+          width: 1px;
+          background: #ffc300;
+          opacity: 0.15;
+        }
+        .bp-number {
+          font-family: "Space Mono", monospace;
+          font-size: 14px;
+          font-weight: 700;
+          letter-spacing: 0.4em;
+          text-transform: uppercase;
+          position: absolute;
+          top: 40px;
+          left: 60px;
+          color: #ffc300;
+        }
+
+        /* Right panel typography */
+        .bp-name {
+          font-family: "Bebas Neue", sans-serif;
+          font-size: 38px;
+          letter-spacing: 0.08em;
+          margin-bottom: 20px;
+          color: #ffc300;
+        }
+        .bp-plabel {
+          font-family: "Space Mono", monospace;
+          font-size: 11px;
+          font-weight: 700;
+          letter-spacing: 0.3em;
+          text-transform: uppercase;
+          margin-bottom: 10px;
+          color: #ffc300;
+          opacity: 0.5;
+        }
+        .bp-prompt {
+          font-family: "JetBrains Mono", monospace;
+          font-size: 20px;
+          line-height: 1.6;
+          padding: 16px 20px;
+          border-radius: 6px;
+          margin-bottom: 20px;
+          color: #ffc300;
+          background: rgba(255, 195, 0, 0.06);
+          border: 1px solid rgba(255, 195, 0, 0.12);
+        }
+        .bp-desc {
+          font-family: "Lato", sans-serif;
+          font-size: 17px;
+          line-height: 1.6;
+          color: #7a9ab0;
+          opacity: 0.55;
+        }
+
+        /* GL scenes (hidden, just for texture capture) */
+        .scene {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1200px;
+          height: 1080px;
+          overflow: hidden;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .scene-label {
+          font-family: "Bebas Neue", sans-serif;
+          font-size: 140px;
+          letter-spacing: 0.06em;
+          opacity: 0.12;
+        }
+      </style>
+
+      <div class="bp-grid"></div>
+      <div class="bp-divider"></div>
+      <div class="bp-number">04 / 14</div>
+
+      <!-- GL demo scenes (captured as textures, then hidden) -->
+      <div id="s1" class="scene" style="background: #003049">
+        <div class="scene-label" style="color: #ffc300">SCENE A</div>
+      </div>
+      <div id="s2" class="scene" style="background: #ffc300; opacity: 0">
+        <div class="scene-label" style="color: #003049">SCENE B</div>
+      </div>
+
+      <!-- GL canvas (left panel only) -->
+      <canvas
+        id="gl-canvas"
+        width="1200"
+        height="1080"
+        style="
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1200px;
+          height: 1080px;
+          z-index: 10;
+          pointer-events: none;
+          display: none;
+        "
+      >
+      </canvas>
+
+      <!-- Right panel metadata -->
+      <div class="bp-right">
+        <div class="bp-name">SDF Iris</div>
+        <div class="bp-plabel">Prompt</div>
+        <div class="bp-prompt">"use sdf iris shader transition"</div>
+        <div class="bp-desc">
+          Aspect-corrected circle SDF opening from center. Triple onion ring glow with warm
+          exponential falloff.
+        </div>
+      </div>
 
-It runs for 4 seconds at 1920×1080. Paste this into your composition:
+      <div
+        id="driver"
+        class="clip"
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
 
-```html index.html
-<div
-  data-composition-id="sdf-iris"
-  data-composition-src="compositions/sdf-iris.html"
-  data-start="0"
-  data-duration="4"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      var glCanvas = document.getElementById("gl-canvas");
+      var gl = glCanvas.getContext("webgl", { preserveDrawingBuffer: true });
+      if (!gl) {
+        console.warn("WebGL not available");
+        window.__timelines["main"] = gsap.timeline({ paused: true });
+      } else {
+        gl.viewport(0, 0, 1200, 1080);
+        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
+        var sceneTextures = {};
+
+        function captureScene(sceneId) {
+          var scene = document.getElementById(sceneId);
+          var origOpacity = scene.style.opacity;
+          var origZ = scene.style.zIndex;
+          scene.style.opacity = "1";
+          scene.style.zIndex = "999";
+          scene.offsetHeight;
+          var c = document.createElement("canvas");
+          c.width = 1200;
+          c.height = 1080;
+          var ctx = c.getContext("2d");
+          ctx.fillStyle = window.getComputedStyle(scene).backgroundColor;
+          ctx.fillRect(0, 0, 1200, 1080);
+          var sr = scene.getBoundingClientRect();
+          var els = scene.querySelectorAll("*");
+          for (var i = 0; i < els.length; i++) {
+            var el = els[i],
+              cs = window.getComputedStyle(el);
+            if (cs.display === "none" || cs.visibility === "hidden") continue;
+            var r = el.getBoundingClientRect();
+            if (r.width < 1 || r.height < 1) continue;
+            var x = r.left - sr.left,
+              y = r.top - sr.top,
+              w = r.width,
+              h = r.height;
+            ctx.save();
+            ctx.globalAlpha = parseFloat(cs.opacity) || 1;
+            var bg = cs.backgroundColor;
+            if (bg && bg !== "rgba(0, 0, 0, 0)" && bg !== "transparent") {
+              ctx.fillStyle = bg;
+              ctx.fillRect(x, y, w, h);
+            }
+            var hasChildEls = el.querySelector("div,span,img,video");
+            var text = "";
+            for (var j = 0; j < el.childNodes.length; j++)
+              if (el.childNodes[j].nodeType === 3) text += el.childNodes[j].textContent;
+            text = text.trim();
+            if (text && !hasChildEls) {
+              ctx.font = cs.fontWeight + " " + cs.fontSize + " " + cs.fontFamily;
+              ctx.fillStyle = cs.color;
+              if (cs.letterSpacing && cs.letterSpacing !== "normal")
+                ctx.letterSpacing = cs.letterSpacing;
+              ctx.textAlign = "center";
+              ctx.textBaseline = "middle";
+              ctx.fillText(text, x + w / 2, y + h / 2);
+            }
+            ctx.restore();
+          }
+          scene.style.opacity = origOpacity;
+          scene.style.zIndex = origZ;
+          var tex = gl.createTexture();
+          gl.bindTexture(gl.TEXTURE_2D, tex);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+          gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, c);
+          sceneTextures[sceneId] = tex;
+        }
+
+        var vertSrc =
+          "attribute vec2 a_pos; varying vec2 v_uv; void main(){" +
+          "v_uv=a_pos*0.5+0.5; v_uv.y=1.0-v_uv.y; gl_Position=vec4(a_pos,0,1);}";
+        var quadBuf = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);
+        gl.bufferData(
+          gl.ARRAY_BUFFER,
+          new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),
+          gl.STATIC_DRAW,
+        );
+        function compileShader(src, type) {
+          var s = gl.createShader(type);
+          gl.shaderSource(s, src);
+          gl.compileShader(s);
+          if (!gl.getShaderParameter(s, gl.COMPILE_STATUS))
+            console.error("Shader:", gl.getShaderInfoLog(s));
+          return s;
+        }
+        function mkProg(fragSrc) {
+          var p = gl.createProgram();
+          gl.attachShader(p, compileShader(vertSrc, gl.VERTEX_SHADER));
+          gl.attachShader(p, compileShader(fragSrc, gl.FRAGMENT_SHADER));
+          gl.linkProgram(p);
+          if (!gl.getProgramParameter(p, gl.LINK_STATUS))
+            console.error("Link:", gl.getProgramInfoLog(p));
+          return p;
+        }
+
+        var H =
+          "precision mediump float;" +
+          "varying vec2 v_uv;" +
+          "uniform sampler2D u_from, u_to;" +
+          "uniform float u_progress;" +
+          "uniform vec2 u_resolution;\n";
+
+        var progPass = mkProg(H + "void main(){gl_FragColor=texture2D(u_from,v_uv);}");
+        var progTrans = mkProg(
+          H +
+            "void main(){vec4 A=texture2D(u_from,v_uv),B=texture2D(u_to,v_uv);vec2 uv=(v_uv-.5)*vec2(u_resolution.x/u_resolution.y,1.);float d=length(uv);float radius=u_progress*1.2;float fw=.003;float edge=smoothstep(radius+fw,radius-fw,d);float ring1=exp(-abs(d-radius)*25.);float ring2=exp(-abs(d-radius+.04)*20.)*.5;float ring3=exp(-abs(d-radius+.08)*15.)*.25;float glow=(ring1+ring2+ring3)*u_progress*(1.-u_progress)*4.;gl_FragColor=vec4(mix(A,B,edge).rgb+vec3(1.,.85,.6)*glow*.6,1.);}",
+        );
+
+        function renderShader(prog, texFrom, texTo, progress) {
+          gl.useProgram(prog);
+          gl.activeTexture(gl.TEXTURE0);
+          gl.bindTexture(gl.TEXTURE_2D, texFrom);
+          gl.uniform1i(gl.getUniformLocation(prog, "u_from"), 0);
+          gl.activeTexture(gl.TEXTURE1);
+          gl.bindTexture(gl.TEXTURE_2D, texTo);
+          gl.uniform1i(gl.getUniformLocation(prog, "u_to"), 1);
+          gl.uniform1f(gl.getUniformLocation(prog, "u_progress"), progress);
+          gl.uniform2f(gl.getUniformLocation(prog, "u_resolution"), 1200, 1080);
+          var pos = gl.getAttribLocation(prog, "a_pos");
+          gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);
+          gl.enableVertexAttribArray(pos);
+          gl.vertexAttribPointer(pos, 2, gl.FLOAT, false, 0, 0);
+          gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+        }
+
+        function easeInOut(p) {
+          return p < 0.5 ? 2 * p * p : 1 - Math.pow(-2 * p + 2, 2) / 2;
+        }
+
+        captureScene("s1");
+        captureScene("s2");
+        glCanvas.style.display = "block";
+        renderShader(progPass, sceneTextures["s1"], sceneTextures["s1"], 0);
+        document.querySelectorAll(".scene").forEach(function (s) {
+          s.style.opacity = "0";
+        });
+
+        var tl = gsap.timeline({
+          paused: true,
+          onUpdate: function () {
+            var t = tl.time();
+            if (t >= 1.0 && t < 3.0) {
+              renderShader(
+                progTrans,
+                sceneTextures["s1"],
+                sceneTextures["s2"],
+                easeInOut((t - 1.0) / 2.0),
+              );
+            } else if (t >= 3.0) {
+              renderShader(progPass, sceneTextures["s2"], sceneTextures["s2"], 0);
+            } else {
+              renderShader(progPass, sceneTextures["s1"], sceneTextures["s1"], 0);
+            }
+          },
+        });
+        tl.to({ v: 0 }, { v: 1, duration: 4, ease: "none" }, 0);
+        window.__timelines["main"] = tl;
+      } // end if (gl)
+    </script>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="sdf-iris" data-composition-src="compositions/sdf-iris.html" data-start="0" data-duration="4" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/spain-map.mdx b/docs/catalog/blocks/spain-map.mdx
index 138c9b9201..a8f0c2c015 100644
--- a/docs/catalog/blocks/spain-map.mdx
+++ b/docs/catalog/blocks/spain-map.mdx
@@ -3,34 +3,425 @@ title: "Spain Map"
 description: "Animated Spain choropleth by autonomous community with staggered reveals and gradient legend — D3 conic conformal projection"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/spain-map.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/spain-map.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/spain-map.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Spain Map preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add spain-map
-```
+<InstallCommand command="npx hyperframes add spain-map" />
 
 That writes one file: `compositions/spain-map.html`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`spain-map.html`}>
+
+```html
+<!doctype html>
+<html lang="es">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Spain Map</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=block"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/topojson-client@3.1.0/dist/topojson-client.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background-color: #0f172a;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="spain-map"
+      data-composition-id="spain-map"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="12"
+    >
+      <div class="map-container">
+        <div class="header">
+          <h1 class="headline">PIB per c&aacute;pita por Comunidad Aut&oacute;noma</h1>
+          <p class="subtitle">Producto Interior Bruto per c&aacute;pita, estimaci&oacute;n 2024</p>
+        </div>
+
+        <svg class="map-svg" viewBox="0 0 1400 820" preserveAspectRatio="xMidYMid meet">
+          <g class="regions-group"></g>
+          <g class="labels-group"></g>
+        </svg>
+
+        <div class="legend">
+          <span class="legend-label legend-low">Bajo</span>
+          <div class="legend-bar"></div>
+          <span class="legend-label legend-high">Alto</span>
+        </div>
+
+        <div class="source">Fuente: Instituto Nacional de Estad&iacute;stica</div>
+      </div>
+
+      <style>
+        #spain-map {
+          width: 1920px;
+          height: 1080px;
+          background: linear-gradient(145deg, #0f172a 0%, #1e293b 100%);
+          font-family: "Inter", sans-serif;
+          color: #e2e8f0;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          overflow: hidden;
+        }
+
+        #spain-map .map-container {
+          width: 1700px;
+          height: 950px;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          position: relative;
+        }
+
+        #spain-map .header {
+          text-align: center;
+          margin-bottom: 20px;
+        }
+
+        #spain-map .headline {
+          font-size: 48px;
+          font-weight: 700;
+          letter-spacing: -0.02em;
+          color: #f8fafc;
+          clip-path: inset(0 100% 0 0);
+        }
+
+        #spain-map .subtitle {
+          font-size: 20px;
+          font-weight: 300;
+          color: #94a3b8;
+          margin-top: 8px;
+          opacity: 0;
+        }
+
+        #spain-map .map-svg {
+          width: 1500px;
+          height: 750px;
+          overflow: visible;
+        }
+
+        #spain-map .region-path {
+          stroke: #1e293b;
+          stroke-width: 0.8;
+          opacity: 0;
+          cursor: default;
+        }
+
+        #spain-map .region-label {
+          font-size: 11px;
+          font-weight: 500;
+          fill: #f8fafc;
+          text-anchor: middle;
+          dominant-baseline: central;
+          opacity: 0;
+          pointer-events: none;
+        }
+
+        #spain-map .legend {
+          display: flex;
+          align-items: center;
+          gap: 12px;
+          margin-top: 16px;
+          opacity: 0;
+        }
+
+        #spain-map .legend-bar {
+          width: 300px;
+          height: 12px;
+          border-radius: 6px;
+          background: linear-gradient(90deg, #7f1d1d, #dc2626, #fbbf24);
+        }
+
+        #spain-map .legend-label {
+          font-size: 14px;
+          font-weight: 500;
+          color: #94a3b8;
+        }
+
+        #spain-map .source {
+          position: absolute;
+          bottom: 0;
+          right: 40px;
+          font-size: 12px;
+          color: #475569;
+          opacity: 0;
+        }
+      </style>
+
+      <script>
+        (function () {
+          var SPAIN_TOPO_URL =
+            "https://cdn.jsdelivr.net/npm/es-atlas@0.6.0/es/autonomous_regions.json";
+
+          var data = {
+            "01": { name: "Andalucía", abbr: "AND", gdp: 20200 },
+            "02": { name: "Aragón", abbr: "ARA", gdp: 30500 },
+            "03": { name: "Asturias", abbr: "AST", gdp: 24100 },
+            "04": { name: "Illes Balears", abbr: "BAL", gdp: 28900 },
+            "05": { name: "Canarias", abbr: "CAN", gdp: 21500 },
+            "06": { name: "Cantabria", abbr: "CNT", gdp: 25200 },
+            "07": { name: "Castilla y León", abbr: "CYL", gdp: 25800 },
+            "08": { name: "Castilla-La Mancha", abbr: "CLM", gdp: 21400 },
+            "09": { name: "Catalunya", abbr: "CAT", gdp: 33700 },
+            10: { name: "Comunitat Valenciana", abbr: "VAL", gdp: 23800 },
+            11: { name: "Extremadura", abbr: "EXT", gdp: 19200 },
+            12: { name: "Galicia", abbr: "GAL", gdp: 24500 },
+            13: { name: "Comunidad de Madrid", abbr: "MAD", gdp: 38100 },
+            14: { name: "Región de Murcia", abbr: "MUR", gdp: 22100 },
+            15: { name: "Navarra", abbr: "NAV", gdp: 35200 },
+            16: { name: "País Vasco", abbr: "PVA", gdp: 36800 },
+            17: { name: "La Rioja", abbr: "RIO", gdp: 29800 },
+            18: { name: "Ceuta", abbr: "CEU", gdp: 21000 },
+            19: { name: "Melilla", abbr: "MEL", gdp: 19500 },
+          };
+
+          var nameMap = {};
+          for (var key in data) {
+            nameMap[data[key].name.toLowerCase()] = key;
+          }
+
+          var minGdp = 19200;
+          var maxGdp = 38100;
+
+          function gdpToColor(gdp) {
+            var t = Math.min(Math.max((gdp - minGdp) / (maxGdp - minGdp), 0), 1);
+            if (t < 0.5) {
+              var s = t / 0.5;
+              return lerpColor([127, 29, 29], [220, 38, 38], s);
+            } else {
+              var s2 = (t - 0.5) / 0.5;
+              return lerpColor([220, 38, 38], [251, 191, 36], s2);
+            }
+          }
 
-It runs for 12 seconds at 1920×1080. Paste this into your composition:
+          function lerpColor(a, b, t) {
+            var r = Math.round(a[0] + (b[0] - a[0]) * t);
+            var g = Math.round(a[1] + (b[1] - a[1]) * t);
+            var bl = Math.round(a[2] + (b[2] - a[2]) * t);
+            return "rgb(" + r + "," + g + "," + bl + ")";
+          }
 
-```html index.html
-<div
-  data-composition-id="spain-map"
-  data-composition-src="compositions/spain-map.html"
-  data-start="0"
-  data-duration="12"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+          function findData(feature) {
+            var id = String(feature.id).padStart(2, "0");
+            if (data[id]) return data[id];
+            var fname = (feature.properties && feature.properties.name) || "";
+            var fnameLower = fname.toLowerCase();
+            for (var k in data) {
+              var dname = data[k].name.toLowerCase();
+              if (fnameLower.indexOf(dname) >= 0 || dname.indexOf(fnameLower) >= 0) {
+                return data[k];
+              }
+            }
+            return null;
+          }
+
+          var svg = document.querySelector("#spain-map .map-svg");
+          var regionsGroup = svg.querySelector(".regions-group");
+          var labelsGroup = svg.querySelector(".labels-group");
+          var tl = gsap.timeline({ paused: true });
+
+          fetch(SPAIN_TOPO_URL)
+            .then(function (r) {
+              return r.json();
+            })
+            .then(function (es) {
+              var featureCollection = topojson.feature(es, es.objects.autonomous_regions);
+              var features = featureCollection.features;
+
+              var projection = d3
+                .geoConicConformal()
+                .center([0, 39.5])
+                .rotate([3.5, 0])
+                .fitSize([1200, 750], featureCollection);
+              var path = d3.geoPath().projection(projection);
+
+              var sortedFeatures = features
+                .filter(function (f) {
+                  return findData(f) !== null;
+                })
+                .sort(function (a, b) {
+                  return findData(a).gdp - findData(b).gdp;
+                });
+
+              sortedFeatures.forEach(function (feature) {
+                var info = findData(feature);
+                if (!info) return;
+
+                var d = path(feature);
+                if (!d) return;
+
+                var el = document.createElementNS("http://www.w3.org/2000/svg", "path");
+                el.setAttribute("d", d);
+                el.setAttribute("class", "region-path");
+                el.setAttribute("data-region", info.abbr);
+                el.setAttribute("data-gdp", String(info.gdp));
+                el.style.fill = gdpToColor(info.gdp);
+                regionsGroup.appendChild(el);
+
+                var centroid = path.centroid(feature);
+                if (centroid[0] && centroid[1]) {
+                  var label = document.createElementNS("http://www.w3.org/2000/svg", "text");
+                  label.setAttribute("x", String(centroid[0]));
+                  label.setAttribute("y", String(centroid[1]));
+                  label.setAttribute("class", "region-label");
+                  label.textContent = info.abbr;
+                  labelsGroup.appendChild(label);
+                }
+              });
+
+              buildTimeline();
+            });
+
+          function buildTimeline() {
+            var regionPaths = regionsGroup.querySelectorAll(".region-path");
+            var regionLabels = labelsGroup.querySelectorAll(".region-label");
+
+            tl.to(
+              "#spain-map .headline",
+              {
+                clipPath: "inset(0 0% 0 0)",
+                duration: 1.0,
+                ease: "power2.inOut",
+              },
+              0,
+            );
+
+            tl.to(
+              "#spain-map .subtitle",
+              {
+                opacity: 1,
+                duration: 0.6,
+                ease: "power2.out",
+              },
+              0.4,
+            );
+
+            tl.to(
+              regionPaths,
+              {
+                opacity: 1,
+                scale: 1,
+                duration: 0.4,
+                stagger: {
+                  each: 0.08,
+                  from: "center",
+                },
+                ease: "back.out(1.4)",
+              },
+              1.0,
+            );
+
+            tl.to(
+              regionLabels,
+              {
+                opacity: 1,
+                duration: 0.3,
+                stagger: {
+                  each: 0.05,
+                  from: "center",
+                },
+                ease: "power2.out",
+              },
+              4.0,
+            );
+
+            tl.to(
+              "#spain-map .legend",
+              {
+                opacity: 1,
+                y: 0,
+                duration: 0.6,
+                ease: "power2.out",
+              },
+              5.5,
+            );
+
+            tl.to(
+              "#spain-map .source",
+              {
+                opacity: 1,
+                duration: 0.5,
+                ease: "power2.out",
+              },
+              6.0,
+            );
+
+            var highlightRegions = ["MAD", "PVA", "NAV"];
+            highlightRegions.forEach(function (abbr, i) {
+              var el = regionsGroup.querySelector('[data-region="' + abbr + '"]');
+              if (!el) return;
+
+              tl.to(
+                el,
+                {
+                  filter: "brightness(1.5) drop-shadow(0 0 8px rgba(255,255,255,0.4))",
+                  stroke: "#f8fafc",
+                  strokeWidth: 2.5,
+                  duration: 0.5,
+                  ease: "power2.out",
+                },
+                6.5 + i * 0.8,
+              );
+
+              tl.to(
+                el,
+                {
+                  filter: "brightness(1) drop-shadow(0 0 0px rgba(255,255,255,0))",
+                  stroke: "#1e293b",
+                  strokeWidth: 0.8,
+                  duration: 0.5,
+                  ease: "power2.in",
+                },
+                7.0 + i * 0.8,
+              );
+            });
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines["spain-map"] = tl;
+          }
+        })();
+      </script>
+    </div>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="spain-map" data-composition-src="compositions/spain-map.html" data-start="0" data-duration="12" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/spiral-galaxy.mdx b/docs/catalog/blocks/spiral-galaxy.mdx
new file mode 100644
index 0000000000..bcd44fabf2
--- /dev/null
+++ b/docs/catalog/blocks/spiral-galaxy.mdx
@@ -0,0 +1,378 @@
+---
+title: "Spiral Galaxy"
+description: "A spiral galaxy seen from outside, turning with real differential rotation: inner stars orbit faster than outer ones, so the arms wind up over the shot instead of spinning rigidly. 20,000 additive GPU sprites, seeded once and solved directly from time, so any frame can be rendered on its own."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/blocks/spiral-galaxy.html"
+  compositionId="spiral-galaxy"
+  compositionSrc="compositions/spiral-galaxy.html"
+  variables={[{"id":"stars","type":"number","label":"Star count","default":20000,"min":2000,"max":40000,"step":1000},{"id":"arms","type":"number","label":"Arm count","default":3,"min":2,"max":8,"step":1},{"id":"rate","type":"number","label":"Rotation rate","default":0.25,"min":0,"max":1.5,"step":0.05,"unit":"rad/s"},{"id":"glow","type":"number","label":"Core brightness","default":1.9,"min":0.2,"max":4,"step":0.1},{"id":"size","type":"number","label":"Star size","default":10,"min":2,"max":40,"step":1,"unit":"px"},{"id":"core","type":"color","label":"Core colour","default":"#ffa575"},{"id":"rim","type":"color","label":"Rim colour","default":"#311599"}]}
+>
+
+```html spiral-galaxy.html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Spiral Galaxy</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #03040a;
+      }
+      #sg-root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      /* Full-bleed child carries the scene fill; never the composition root. */
+      #sg-fill {
+        position: absolute;
+        inset: 0;
+        background: #03040a;
+      }
+      #sg-gl {
+        position: absolute;
+        inset: 0;
+        display: block;
+        width: 1920px;
+        height: 1080px;
+      }
+      /* Ambient halo in the rim colour, screen-blended over the point cloud.
+         Reads the declared `rim` variable. Variable ids are single lowercase
+         words on purpose: the runtime injects `--<id>` while the compiler
+         injects `--<slugify(id)>`, and those two only agree when the id has
+         no capitals or separators. */
+      #sg-halo {
+        position: absolute;
+        inset: 0;
+        mix-blend-mode: screen;
+        opacity: 0.12;
+        background: radial-gradient(72% 46% at 50% 50%, var(--rim, #311599) 0%, #000000 70%);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="sg-root"
+      data-composition-id="spiral-galaxy"
+      data-composition-variables='[
+        {"id":"stars","type":"number","label":"Star count","default":20000,"min":2000,"max":40000,"step":1000},
+        {"id":"arms","type":"number","label":"Arm count","default":3,"min":2,"max":8,"step":1},
+        {"id":"rate","type":"number","label":"Rotation rate","default":0.25,"min":0,"max":1.5,"step":0.05,"unit":"rad/s"},
+        {"id":"glow","type":"number","label":"Core brightness","default":1.9,"min":0.2,"max":4,"step":0.1},
+        {"id":"size","type":"number","label":"Star size","default":10,"min":2,"max":40,"step":1,"unit":"px"},
+        {"id":"core","type":"color","label":"Core colour","default":"#ffa575"},
+        {"id":"rim","type":"color","label":"Rim colour","default":"#311599"}
+      ]'
+      data-start="0"
+      data-duration="10"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="sg-fill"></div>
+      <canvas id="sg-gl" width="1920" height="1080"></canvas>
+      <div id="sg-halo"></div>
+
+      <!-- Driver clip: gives the block a timed element for the host timeline. -->
+      <div
+        id="sg-drv"
+        class="clip"
+        data-start="0"
+        data-duration="10"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+
+    <script>
+      (function () {
+        var COMP_ID = "spiral-galaxy";
+        var DURATION = 10;
+        var W = 1920,
+          H = 1080;
+
+        // ── Measured constants ────────────────────────────────────────────
+        // Read from the three.js galaxy examples (MIT) during reference
+        // research; reimplemented here, nothing copied.
+        //   count 20000 · branches 3 · radius = ratio^1.5 * 5 · spin 1
+        //   angle = branchAngle + spin * radius + t * (1 - radiusRatio)
+        //   randomnessPower 3 · inside #ffa575 · outside #311599
+        var DISC_RADIUS = 5.0; // world units, from `radius = ratio^1.5 * 5`
+        var RADIUS_POWER = 1.5; // ratio -> radius exponent
+        // Static Archimedean twist, radians per world unit. This is what draws
+        // the arm across the WHOLE disc; the time term below then winds it.
+        // Slightly under the example's 1.0 so the outer arms stay open.
+        var SPIN = 0.78;
+        var RANDOMNESS = 0.2; // arm thickness, as a fraction of DISC_RADIUS
+        var RANDOM_POWER = 3.0; // pow(u, 3): most stars hug the arm, a few stray
+        var TANGENT_SQUEEZE = 0.62; // arms are thin across, long along
+        var DISC_FLATNESS = 0.3; // vertical jitter relative to in-plane jitter
+        var SEED = 20240817; // fixes every per-star attribute
+
+        // ── Variables ─────────────────────────────────────────────────────
+        // Read ONCE at init. Variables never change mid-render.
+        var vars =
+          window.__hyperframes && window.__hyperframes.getVariables
+            ? window.__hyperframes.getVariables()
+            : {};
+        function clampNum(value, lo, hi, fallback) {
+          var n = Number(value);
+          if (!isFinite(n)) n = fallback;
+          return Math.min(hi, Math.max(lo, n));
+        }
+        var STARS = Math.round(clampNum(vars.stars, 2000, 40000, 20000));
+        var ARMS = Math.round(clampNum(vars.arms, 2, 8, 3));
+        var RATE = clampNum(vars.rate, 0, 1.5, 0.25);
+        var GLOW = clampNum(vars.glow, 0.2, 4, 1.9);
+        var SIZE = clampNum(vars.size, 2, 40, 10);
+        var CORE_COLOR = typeof vars.core === "string" ? vars.core : "#ffa575";
+        var RIM_COLOR = typeof vars.rim === "string" ? vars.rim : "#311599";
+
+        // ── Seeded PRNG (mulberry32) ──────────────────────────────────────
+        function mulberry32(seed) {
+          return function () {
+            seed |= 0;
+            seed = (seed + 0x6d2b79f5) | 0;
+            var t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
+            t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+            return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+          };
+        }
+
+        // ── Per-star attributes, seeded once ──────────────────────────────
+        // Nothing here depends on time. Every frame is computed from these
+        // plus `uTime` alone, so frame N never reads frame N-1.
+        var rng = mulberry32(SEED);
+        var aRatio = new Float32Array(STARS); // 0 = core, 1 = rim
+        var aBranch = new Float32Array(STARS); // base arm angle
+        var aJitterR = new Float32Array(STARS); // offset along the arm's radial axis
+        var aJitterT = new Float32Array(STARS); // offset along the arm's tangent
+        var aJitterY = new Float32Array(STARS); // disc thickness
+        var aSpark = new Float32Array(STARS); // per-star size variation
+
+        function jitter() {
+          var magnitude = Math.pow(rng(), RANDOM_POWER) * RANDOMNESS * DISC_RADIUS;
+          return rng() < 0.5 ? -magnitude : magnitude;
+        }
+        for (var i = 0; i < STARS; i++) {
+          aRatio[i] = rng();
+          aBranch[i] = ((i % ARMS) / ARMS) * Math.PI * 2;
+          aJitterR[i] = jitter();
+          aJitterT[i] = jitter() * TANGENT_SQUEEZE;
+          aJitterY[i] = jitter() * DISC_FLATNESS;
+          aSpark[i] = rng();
+        }
+
+        // ── Scene ─────────────────────────────────────────────────────────
+        var renderer = new THREE.WebGLRenderer({
+          canvas: document.getElementById("sg-gl"),
+          antialias: false,
+          alpha: false,
+          preserveDrawingBuffer: true, // survives seek-capture screenshots
+        });
+        renderer.setPixelRatio(1);
+        renderer.setSize(W, H, false);
+        renderer.setClearColor(0x03040a, 1);
+
+        var scene = new THREE.Scene();
+        var camera = new THREE.PerspectiveCamera(45, W / H, 0.1, 200);
+        camera.position.set(0, 2.9, 7.6);
+        camera.lookAt(0, 0, 0);
+
+        var uniforms = {
+          uTime: { value: 0 },
+          uRate: { value: RATE },
+          uSpin: { value: SPIN },
+          uRadius: { value: DISC_RADIUS },
+          uPower: { value: RADIUS_POWER },
+          uSize: { value: SIZE },
+          uRefDist: { value: camera.position.length() },
+          uGlow: { value: GLOW },
+          uCore: { value: new THREE.Color(CORE_COLOR) },
+          uRim: { value: new THREE.Color(RIM_COLOR) },
+        };
+
+        var VERT = [
+          "attribute float aRatio;",
+          "attribute float aBranch;",
+          "attribute float aJitterR;",
+          "attribute float aJitterT;",
+          "attribute float aJitterY;",
+          "attribute float aSpark;",
+          "uniform float uTime;",
+          "uniform float uRate;",
+          "uniform float uSpin;",
+          "uniform float uRadius;",
+          "uniform float uPower;",
+          "uniform float uSize;",
+          "uniform float uRefDist;",
+          "uniform float uGlow;",
+          "uniform vec3 uCore;",
+          "uniform vec3 uRim;",
+          "varying vec3 vColor;",
+          "varying float vBright;",
+          "void main() {",
+          "  float ratio = clamp(aRatio, 0.0, 1.0);",
+          // Differential rotation. omega falls to zero at the rim, so the
+          // core laps the outer disc and the arms wind up over time.
+          // Solved directly from uTime — never integrated frame to frame.
+          "  float omega = 1.0 - ratio;",
+          "  float r = pow(ratio, uPower) * uRadius;",
+          // uSpin * r is the static arm shape (time-independent, so it drops
+          // out of any inner-vs-outer rotation measurement); uRate * uTime *
+          // omega is the winding.
+          "  float theta = aBranch + uSpin * r + uRate * uTime * omega;",
+          "  vec2 radial = vec2(cos(theta), sin(theta));",
+          "  vec2 tangent = vec2(-radial.y, radial.x);",
+          // Jitter rides in the star's own rotating frame, so arm thickness
+          // holds its shape instead of smearing as the disc turns.
+          "  vec2 xz = radial * (r + aJitterR) + tangent * aJitterT;",
+          "  vec4 mv = modelViewMatrix * vec4(xz.x, aJitterY, xz.y, 1.0);",
+          "  gl_Position = projectionMatrix * mv;",
+          "  gl_PointSize = uSize * (uRefDist / max(-mv.z, 0.001)) * (0.55 + 0.75 * aSpark);",
+          // Lerp by r/R (i.e. ratio^1.5), matching the example's colour ramp:
+          // the disc stays warm well past mid-radius and only the rim goes cold.
+          "  vColor = mix(uCore, uRim, pow(ratio, uPower));",
+          "  vBright = uGlow * (0.22 + 0.78 * exp(-ratio * 3.0));",
+          "}",
+        ].join("\n");
+
+        var FRAG = [
+          "varying vec3 vColor;",
+          "varying float vBright;",
+          "void main() {",
+          "  float d = length(gl_PointCoord - vec2(0.5));",
+          "  float a = smoothstep(0.5, 0.0, d);",
+          "  a = a * a;",
+          "  gl_FragColor = vec4(vColor * vBright, a);",
+          "}",
+        ].join("\n");
+
+        var geometry = new THREE.BufferGeometry();
+        // The vertex shader builds every position from the attributes below;
+        // `position` exists only because three.js counts vertices from it.
+        geometry.setAttribute(
+          "position",
+          new THREE.BufferAttribute(new Float32Array(STARS * 3), 3),
+        );
+        geometry.setAttribute("aRatio", new THREE.BufferAttribute(aRatio, 1));
+        geometry.setAttribute("aBranch", new THREE.BufferAttribute(aBranch, 1));
+        geometry.setAttribute("aJitterR", new THREE.BufferAttribute(aJitterR, 1));
+        geometry.setAttribute("aJitterT", new THREE.BufferAttribute(aJitterT, 1));
+        geometry.setAttribute("aJitterY", new THREE.BufferAttribute(aJitterY, 1));
+        geometry.setAttribute("aSpark", new THREE.BufferAttribute(aSpark, 1));
+
+        var material = new THREE.ShaderMaterial({
+          uniforms: uniforms,
+          vertexShader: VERT,
+          fragmentShader: FRAG,
+          blending: THREE.AdditiveBlending,
+          transparent: true,
+          depthTest: false,
+          depthWrite: false,
+        });
+
+        var points = new THREE.Points(geometry, material);
+        points.frustumCulled = false; // positions live in the shader, not in `position`
+        scene.add(points);
+
+        function draw(t) {
+          uniforms.uTime.value = t;
+          renderer.render(scene, camera);
+        }
+
+        // ── Timeline ──────────────────────────────────────────────────────
+        // `tl.eventCallback("onUpdate", ...)` does NOT fire on tl.seek(), so
+        // the repaint hangs off a property setter on the tweened driver —
+        // that setter runs on every render, seek included.
+        var driver = { _t: 0 };
+        Object.defineProperty(driver, "t", {
+          get: function () {
+            return this._t;
+          },
+          set: function (value) {
+            this._t = value;
+            draw(value);
+          },
+        });
+
+        window.__timelines = window.__timelines || {};
+        var tl = gsap.timeline({ paused: true });
+        // ease "none" over the full duration makes driver.t === tl.time().
+        tl.to(driver, { t: DURATION, duration: DURATION, ease: "none", lazy: false }, 0);
+        window.__timelines[COMP_ID] = tl;
+
+        draw(0); // paint frame 0; GSAP skips the setter when the value is unchanged
+      })();
+    </script>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add spiral-galaxy" />
+
+That writes one file: `compositions/spiral-galaxy.html`.
+
+## Add it to your video
+
+It runs for 10 seconds at 1920×1080. Paste this into your composition:
+
+```html index.html
+<div
+  data-composition-id="spiral-galaxy"
+  data-composition-src="compositions/spiral-galaxy.html"
+  data-start="0"
+  data-duration="10"
+  data-track-index="1"
+  data-width="1920"
+  data-height="1080"
+></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.
+
+## Change how it looks
+
+Set these CSS variables on the block:
+
+- `stars` — Star count. Defaults to `20000`.
+- `arms` — Arm count. Defaults to `3`.
+- `rate` — Rotation rate. Defaults to `0.25`.
+- `glow` — Core brightness. Defaults to `1.9`.
+- `size` — Star size. Defaults to `10`.
+- `core` — Core colour. Defaults to `#ffa575`.
+- `rim` — Rim colour. Defaults to `#311599`.
+
+{/* hf:generated-footer */}
+
+Tagged `hero` `space` `particles` `webgl` `background`.
+
+## 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/split-flap-board.mdx b/docs/catalog/blocks/split-flap-board.mdx
new file mode 100644
index 0000000000..da8f343a47
--- /dev/null
+++ b/docs/catalog/blocks/split-flap-board.mdx
@@ -0,0 +1,400 @@
+---
+title: "Split-Flap Board"
+description: "Solari-style departure board: every cell walks its drum forward through the intervening characters of a fixed alphabet until it lands on its target, so the text resolves as a mechanical cascade instead of a fade."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/blocks/split-flap-board.html"
+  compositionId="split-flap-board"
+  compositionSrc="compositions/split-flap-board.html"
+  variables={[{"id":"boardText","type":"string","label":"Board text","default":"NOW BOARDING","maxLength":24},{"id":"flapAlphabet","type":"string","label":"Flap alphabet (drum order)","default":" ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789.,'","maxLength":64},{"id":"flipDuration","type":"number","label":"Seconds per flap","default":0.09,"min":0.03,"max":1.2,"step":0.01,"unit":"s"},{"id":"cellStagger","type":"number","label":"Per-cell start stagger","default":0.05,"min":0,"max":0.5,"step":0.01,"unit":"s"},{"id":"cellCount","type":"number","label":"Cells on the board","default":12,"min":1,"max":24,"step":1}]}
+>
+
+```html split-flap-board.html
+<!doctype html>
+<html
+  lang="en"
+  data-composition-variables='[
+    {"id":"boardText","type":"string","label":"Board text","default":"NOW BOARDING","maxLength":24},
+    {"id":"flapAlphabet","type":"string","label":"Flap alphabet (drum order)","default":" ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789.,&#39;","maxLength":64},
+    {"id":"flipDuration","type":"number","label":"Seconds per flap","default":0.09,"min":0.03,"max":1.2,"step":0.01,"unit":"s"},
+    {"id":"cellStagger","type":"number","label":"Per-cell start stagger","default":0.05,"min":0,"max":0.5,"step":0.01,"unit":"s"},
+    {"id":"cellCount","type":"number","label":"Cells on the board","default":12,"min":1,"max":24,"step":1}
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Split-Flap Board</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="sf-root"
+      data-composition-id="split-flap-board"
+      data-start="0"
+      data-duration="3.5"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+      style="position: relative; width: 1920px; height: 1080px; overflow: hidden"
+    >
+      <style>
+        /* The root's own box lives in an inline style, not a rule: every
+           sub-composition rule is rewritten to
+           `[data-composition-id="split-flap-board"] <selector>` at render,
+           which can never match the root element itself. */
+        #sf-bg {
+          position: absolute;
+          inset: 0;
+          background:
+            radial-gradient(120% 90% at 50% 42%, #23242a 0%, #121317 62%, #0a0a0c 100%), #0a0a0c;
+        }
+        #sf-board {
+          position: absolute;
+          inset: 0;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .sf-cell {
+          position: relative;
+          flex: 0 0 auto;
+          perspective: 900px;
+          border-radius: 9px;
+          background: #0c0c0e;
+          box-shadow:
+            0 18px 34px rgba(0, 0, 0, 0.55),
+            0 0 0 1px rgba(255, 255, 255, 0.05);
+        }
+        .sf-face {
+          position: absolute;
+          left: 0;
+          width: 100%;
+          height: 50%;
+          overflow: hidden;
+          background: linear-gradient(180deg, #26272c 0%, #1a1b1f 100%);
+        }
+        .sf-top,
+        .sf-leaf-a {
+          top: 0;
+          border-radius: 9px 9px 0 0;
+        }
+        .sf-bot,
+        .sf-leaf-b {
+          top: 50%;
+          border-radius: 0 0 9px 9px;
+          background: linear-gradient(180deg, #191a1e 0%, #232429 100%);
+        }
+        .sf-leaf-a {
+          transform-origin: 50% 100%;
+          z-index: 3;
+          backface-visibility: hidden;
+        }
+        .sf-leaf-b {
+          transform-origin: 50% 0%;
+          z-index: 3;
+          backface-visibility: hidden;
+        }
+        .sf-glyph {
+          position: absolute;
+          left: 0;
+          width: 100%;
+          display: block;
+          text-align: center;
+          font-family: ui-monospace, monospace;
+          font-weight: 700;
+          color: #f4efe2;
+          white-space: pre;
+        }
+        .sf-seam {
+          position: absolute;
+          left: 0;
+          top: 50%;
+          width: 100%;
+          height: 3px;
+          margin-top: -1.5px;
+          background: #050506;
+          z-index: 4;
+        }
+      </style>
+
+      <div id="sf-bg"></div>
+      <div id="sf-board" class="clip" data-start="0" data-duration="3.5" data-track-index="0"></div>
+
+      <script>
+        (function () {
+          window.__timelines = window.__timelines || {};
+
+          // ---------------------------------------------------------------
+          // Reference numbers (see report / research entry F#1)
+          //
+          // Alphabet: the 40-position drum from the scottbez1/splitflap
+          // project (Apache-2.0, README read) — blank, A-Z, 0-9, then `.,'`.
+          // Drum order is what makes the cascade read as a real board: a cell
+          // never jumps, it walks the drum forward through every intervening
+          // character, so letters resolve early and digits/punctuation late.
+          //
+          // Flip duration: the only published-ish figure is a DIY firmware
+          // proxy (28BYJ-48 stepper, ~83.59 steps/flap, a=500 steps/s^2 ->
+          // triangular profile -> ~1.16 s/flap). That is a hobby build, NOT a
+          // Solari spec, and real boards audibly flutter at tens of ms per
+          // flap. The default below sits in that observed band; the DIY proxy
+          // is still reachable at the top of the `flipDuration` range.
+          //
+          // Flap fall: constant angular acceleration through 180 degrees,
+          // theta(p) = 180 * p^2. The flap therefore hangs near the top and
+          // slaps down — no ease-out, because a falling leaf does not
+          // decelerate. The two CSS leaves are the two faces of that one flap
+          // (hand-off at theta = 90, i.e. p = 0.707).
+          // ---------------------------------------------------------------
+          var DEFAULT_ALPHABET = " ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789.,'";
+          var DEG = Math.PI / 180;
+
+          function num(value, min, max, fallback) {
+            var n = typeof value === "number" ? value : parseFloat(value);
+            if (!isFinite(n)) return fallback;
+            return Math.min(max, Math.max(min, n));
+          }
+
+          var vars =
+            window.__hyperframes && window.__hyperframes.getVariables
+              ? window.__hyperframes.getVariables()
+              : {};
+
+          var alphabet = String(vars.flapAlphabet || DEFAULT_ALPHABET);
+          if (alphabet.length < 2) alphabet = DEFAULT_ALPHABET;
+          var N = alphabet.length;
+
+          var flipDur = num(vars.flipDuration, 0.03, 1.2, 0.09);
+          var stagger = num(vars.cellStagger, 0, 0.5, 0.05);
+          var cellCount = Math.round(num(vars.cellCount, 1, 24, 12));
+
+          var text = String(vars.boardText == null ? "NOW BOARDING" : vars.boardText)
+            .toUpperCase()
+            .slice(0, cellCount);
+          // Centre the string across the board; unused cells stay on the
+          // drum's first position (blank in the default alphabet).
+          var lead = Math.floor((cellCount - text.length) / 2);
+          var targets = [];
+          for (var i = 0; i < cellCount; i++) {
+            var ch =
+              i >= lead && i < lead + text.length ? text.charAt(i - lead) : alphabet.charAt(0);
+            var g = alphabet.indexOf(ch);
+            targets.push(g < 0 ? 0 : g);
+          }
+
+          // Geometry: fit `cellCount` cells across 1920 with a 120px margin.
+          var GAP = 10;
+          var cw = Math.min(130, Math.floor((1920 - 240 - (cellCount - 1) * GAP) / cellCount));
+          var chh = Math.round(cw * 1.45);
+
+          var board = document.getElementById("sf-board");
+          board.style.gap = GAP + "px";
+
+          function makeFace(cls, glyphTop) {
+            var face = document.createElement("div");
+            face.className = "sf-face " + cls;
+            var glyph = document.createElement("span");
+            glyph.className = "sf-glyph";
+            glyph.style.height = chh + "px";
+            glyph.style.lineHeight = chh + "px";
+            glyph.style.fontSize = Math.round(cw * 0.78) + "px";
+            glyph.style.top = glyphTop + "px";
+            face.appendChild(glyph);
+            return face;
+          }
+
+          var cells = [];
+          for (var c = 0; c < cellCount; c++) {
+            var cell = document.createElement("div");
+            cell.className = "sf-cell";
+            cell.id = "sf-cell-" + c;
+            cell.style.width = cw + "px";
+            cell.style.height = chh + "px";
+            // The mechanism IS clipped, stacked half-glyphs: each face holds a
+            // whole character and shows half of it, and the falling leaf sits
+            // on top of the face behind it. Declared intentional so the layout
+            // auditor reports real regressions instead of the design.
+            cell.setAttribute("data-layout-allow-overlap", "");
+            cell.setAttribute("data-layout-allow-occlusion", "");
+            cell.setAttribute("data-layout-allow-overflow", "");
+
+            var top = makeFace("sf-top", 0);
+            var bot = makeFace("sf-bot", -Math.round(chh / 2));
+            var leafA = makeFace("sf-leaf-a", 0);
+            var leafB = makeFace("sf-leaf-b", -Math.round(chh / 2));
+
+            var seam = document.createElement("div");
+            seam.className = "sf-seam";
+
+            cell.appendChild(top);
+            cell.appendChild(bot);
+            cell.appendChild(leafA);
+            cell.appendChild(leafB);
+            cell.appendChild(seam);
+            board.appendChild(cell);
+
+            cells.push({
+              // steps is unidirectional: the drum only ever spins forward,
+              // start position is always the drum's first flap (index 0).
+              steps: targets[c],
+              top: top.firstChild,
+              bot: bot.firstChild,
+              leafA: leafA,
+              leafB: leafB,
+              glyphA: leafA.firstChild,
+              glyphB: leafB.firstChild,
+            });
+          }
+
+          // A face that is not in use must be wiped, not merely hidden.
+          // Leaving a stale transform/filter/glyph on an opacity-0 leaf makes
+          // the DOM (and, via layer promotion, the rasterised pixels) depend
+          // on which frames were visited before this one — the exact failure
+          // seeking is supposed to be immune to.
+          function clearLeaf(leaf, glyph) {
+            leaf.style.opacity = "0";
+            leaf.style.transform = "";
+            leaf.style.filter = "";
+            glyph.textContent = "";
+          }
+
+          function showLeaf(leaf, glyph, char, angle, shade) {
+            glyph.textContent = char;
+            leaf.style.opacity = "1";
+            leaf.style.transform = "rotateX(" + angle.toFixed(2) + "deg)";
+            leaf.style.filter = "brightness(" + shade + ")";
+          }
+
+          // Pure function of absolute composition time. No accumulator, no
+          // dependence on the previous frame — seeking to any t reconstructs
+          // the whole board from t alone.
+          function paint(t) {
+            for (var i = 0; i < cells.length; i++) {
+              var cell = cells[i];
+              var tLocal = t - i * stagger;
+              var raw = tLocal <= 0 ? 0 : tLocal / flipDur;
+              var count = Math.floor(raw);
+              var p = raw - count;
+              if (count >= cell.steps) {
+                count = cell.steps;
+                p = 0;
+              }
+
+              var outgoing = alphabet.charAt(count % N);
+              var incoming = alphabet.charAt((count + 1) % N);
+              var flipping = count < cell.steps && p > 0;
+
+              if (!flipping) {
+                cell.top.textContent = outgoing;
+                cell.bot.textContent = outgoing;
+                clearLeaf(cell.leafA, cell.glyphA);
+                clearLeaf(cell.leafB, cell.glyphB);
+                continue;
+              }
+
+              // The new character is already seated behind the falling flap:
+              // its top half shows, its bottom half is still hidden by the
+              // outgoing flap lying in the lower slot.
+              cell.top.textContent = incoming;
+              cell.bot.textContent = outgoing;
+
+              var theta = 180 * p * p;
+              var shade = (1 - 0.5 * Math.sin(theta * DEG)).toFixed(3);
+              if (theta < 90) {
+                showLeaf(cell.leafA, cell.glyphA, outgoing, -theta, shade);
+                clearLeaf(cell.leafB, cell.glyphB);
+              } else {
+                clearLeaf(cell.leafA, cell.glyphA);
+                showLeaf(cell.leafB, cell.glyphB, incoming, 180 - theta, shade);
+              }
+            }
+          }
+
+          var duration = parseFloat(document.getElementById("sf-root").dataset.duration) || 8;
+
+          // GSAP suppresses events on seek(), so onUpdate callbacks never fire
+          // during a render. A property setter on the tweened driver always
+          // runs, because GSAP writes the value itself.
+          var driverTime = 0;
+          var driver = {};
+          Object.defineProperty(driver, "t", {
+            configurable: true,
+            get: function () {
+              return driverTime;
+            },
+            set: function (value) {
+              driverTime = value;
+              paint(value);
+            },
+          });
+
+          var tl = gsap.timeline({ paused: true });
+          tl.to(driver, { t: duration, duration: duration, ease: "none" }, 0);
+
+          paint(0);
+
+          window.__timelines["split-flap-board"] = tl;
+        })();
+      </script>
+    </div>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add split-flap-board" />
+
+That writes one file: `compositions/split-flap-board.html`.
+
+## Add it to your video
+
+It runs for 3.5 seconds at 1920×1080. Paste this into your composition:
+
+```html index.html
+<div
+  data-composition-id="split-flap-board"
+  data-composition-src="compositions/split-flap-board.html"
+  data-start="0"
+  data-duration="3.5"
+  data-track-index="1"
+  data-width="1920"
+  data-height="1080"
+></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.
+
+{/* hf:generated-footer */}
+
+Tagged `text` `kinetic` `mechanical` `split-flap` `solari` `departure-board` `reveal`.
+
+## 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/spotify-card.mdx b/docs/catalog/blocks/spotify-card.mdx
index 5375a0d0cd..46a099049c 100644
--- a/docs/catalog/blocks/spotify-card.mdx
+++ b/docs/catalog/blocks/spotify-card.mdx
@@ -3,34 +3,331 @@ title: "Spotify Now Playing"
 description: "Animated Spotify now-playing card with album art and progress bar"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/spotify-card.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/spotify-card.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/spotify-card.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Spotify Now Playing preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add spotify-card
-```
+<InstallCommand command="npx hyperframes add spotify-card" />
 
 That writes one file: `compositions/spotify-card.html`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`spotify-card.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=block"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      body {
+        width: 1080px;
+        height: 1920px;
+        font-family: "Inter", sans-serif;
+      }
+
+      [data-composition-id="spotify-card"] .card {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        margin-top: -495px;
+        margin-left: -390px;
+        width: 780px;
+        background: linear-gradient(
+          165deg,
+          rgba(140, 155, 170, 0.42) 0%,
+          rgba(100, 115, 130, 0.35) 30%,
+          rgba(75, 88, 105, 0.38) 60%,
+          rgba(60, 72, 88, 0.44) 100%
+        );
+        border-radius: 28px;
+        padding: 36px;
+        border: 1px solid rgba(255, 255, 255, 0.22);
+        box-shadow:
+          0 24px 48px rgba(0, 0, 0, 0.3),
+          0 2px 6px rgba(0, 0, 0, 0.12),
+          inset 0 1px 0 rgba(255, 255, 255, 0.32),
+          inset 0 -1px 0 rgba(0, 0, 0, 0.12);
+        backdrop-filter: blur(40px) saturate(180%);
+        -webkit-backdrop-filter: blur(40px) saturate(180%);
+        overflow: hidden;
+      }
+
+      /* Specular highlight — light refraction across top */
+      [data-composition-id="spotify-card"] .card::before {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 55%;
+        background: linear-gradient(
+          180deg,
+          rgba(255, 255, 255, 0.18) 0%,
+          rgba(255, 255, 255, 0.07) 35%,
+          transparent 100%
+        );
+        border-radius: 28px 28px 0 0;
+        pointer-events: none;
+      }
+
+      /* Edge shine — bottom rim catch light */
+      [data-composition-id="spotify-card"] .card::after {
+        content: "";
+        position: absolute;
+        bottom: 0;
+        left: 20px;
+        right: 20px;
+        height: 1px;
+        background: linear-gradient(
+          90deg,
+          transparent 0%,
+          rgba(255, 255, 255, 0.08) 30%,
+          rgba(255, 255, 255, 0.12) 50%,
+          rgba(255, 255, 255, 0.08) 70%,
+          transparent 100%
+        );
+        pointer-events: none;
+      }
+
+      /* Album Art */
+      [data-composition-id="spotify-card"] .album-art {
+        width: 708px;
+        height: 708px;
+        border-radius: 16px;
+        overflow: hidden;
+        position: relative;
+        z-index: 1;
+        background: linear-gradient(145deg, #1db954 0%, #17a34a 30%, #0f7234 60%, #191414 100%);
+        margin-bottom: 36px;
+      }
+
+      [data-composition-id="spotify-card"] .album-art-icon {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        opacity: 0.2;
+      }
+
+      /* Track Info */
+      [data-composition-id="spotify-card"] .track-info {
+        position: relative;
+        z-index: 1;
+        margin-bottom: 28px;
+        padding: 0 8px;
+      }
+
+      [data-composition-id="spotify-card"] .track-name {
+        font-size: 52px;
+        font-weight: 700;
+        color: #ffffff;
+        letter-spacing: -0.02em;
+        line-height: 1.15;
+        margin-bottom: 8px;
+      }
+
+      [data-composition-id="spotify-card"] .artist-name {
+        font-size: 34px;
+        font-weight: 400;
+        color: rgba(255, 255, 255, 0.7);
+        line-height: 1.3;
+      }
+
+      /* Spotify Branding */
+      [data-composition-id="spotify-card"] .spotify-brand {
+        position: relative;
+        z-index: 1;
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 0 8px;
+      }
+
+      [data-composition-id="spotify-card"] .spotify-logo {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      [data-composition-id="spotify-card"] .spotify-brand-text {
+        font-size: 26px;
+        font-weight: 600;
+        color: rgba(255, 255, 255, 0.55);
+        letter-spacing: 0.01em;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="spotify-card"
+      data-width="1080"
+      data-height="1920"
+      data-start="0"
+      data-duration="5"
+    >
+      <div id="card" class="clip card" data-start="0" data-duration="5" data-track-index="0">
+        <!-- Album Art -->
+        <div id="album-art" class="album-art">
+          <svg class="album-art-icon" width="200" height="200" viewBox="0 0 24 24" fill="none">
+            <path
+              d="M9 18V5l12-2v13"
+              stroke="rgba(255,255,255,0.7)"
+              stroke-width="1"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+            <circle cx="6" cy="18" r="3" stroke="rgba(255,255,255,0.7)" stroke-width="1" />
+            <circle cx="18" cy="16" r="3" stroke="rgba(255,255,255,0.7)" stroke-width="1" />
+          </svg>
+        </div>
 
-It runs for 5 seconds at 1080×1920. Paste this into your composition:
+        <!-- Track Info -->
+        <div class="track-info">
+          <div id="track-name" class="track-name">HyperFrames</div>
+          <div id="artist-name" class="artist-name">HeyGen</div>
+        </div>
 
-```html index.html
-<div
-  data-composition-id="spotify-card"
-  data-composition-src="compositions/spotify-card.html"
-  data-start="0"
-  data-duration="5"
-  data-track-index="1"
-  data-width="1080"
-  data-height="1920"
-></div>
+        <!-- Spotify Branding -->
+        <div id="spotify-brand" class="spotify-brand">
+          <div class="spotify-logo">
+            <svg width="32" height="32" viewBox="0 0 16 16" fill="rgba(255,255,255,0.55)">
+              <path
+                d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0m3.669 11.538a.5.5 0 0 1-.686.165c-1.879-1.147-4.243-1.407-7.028-.77a.499.499 0 0 1-.222-.973c3.048-.696 5.662-.397 7.77.892a.5.5 0 0 1 .166.686m.979-2.178a.624.624 0 0 1-.858.205c-2.15-1.321-5.428-1.704-7.972-.932a.625.625 0 0 1-.362-1.194c2.905-.881 6.517-.454 8.986 1.063a.624.624 0 0 1 .206.858m.084-2.268C10.154 5.56 5.9 5.419 3.438 6.166a.748.748 0 1 1-.434-1.432c2.825-.857 7.523-.692 10.492 1.07a.747.747 0 1 1-.764 1.288"
+              />
+            </svg>
+          </div>
+          <span class="spotify-brand-text">Spotify</span>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      var tl = gsap.timeline({ paused: true });
+
+      var card = document.getElementById("card");
+      var albumArt = document.getElementById("album-art");
+      var trackName = document.getElementById("track-name");
+      var artistName = document.getElementById("artist-name");
+      var spotifyBrand = document.getElementById("spotify-brand");
+
+      // Start state
+      gsap.set(card, { y: 60, opacity: 0, scale: 0.94 });
+      gsap.set(trackName, { y: 20, opacity: 0 });
+      gsap.set(artistName, { y: 16, opacity: 0 });
+      gsap.set(spotifyBrand, { y: 12, opacity: 0 });
+
+      // ── Card entrance ────────────────────────────────────────
+      tl.to(
+        card,
+        {
+          y: 0,
+          opacity: 1,
+          scale: 1,
+          duration: 0.7,
+          ease: "power3.out",
+        },
+        0.1,
+      );
+
+      // ── Text stagger in ─────────────────────────────────────
+      tl.to(
+        trackName,
+        {
+          y: 0,
+          opacity: 1,
+          duration: 0.5,
+          ease: "power2.out",
+        },
+        0.55,
+      );
+
+      tl.to(
+        artistName,
+        {
+          y: 0,
+          opacity: 1,
+          duration: 0.45,
+          ease: "power2.out",
+        },
+        0.7,
+      );
+
+      tl.to(
+        spotifyBrand,
+        {
+          y: 0,
+          opacity: 1,
+          duration: 0.4,
+          ease: "power2.out",
+        },
+        0.85,
+      );
+
+      // ── Subtle album art breathe ────────────────────────────
+      tl.to(
+        albumArt,
+        {
+          scale: 1.015,
+          duration: 1.5,
+          ease: "power1.inOut",
+          yoyo: true,
+          repeat: 1,
+        },
+        1.2,
+      );
+
+      // ── Card exit ────────────────────────────────────────────
+      tl.to(
+        card,
+        {
+          y: -40,
+          opacity: 0,
+          scale: 0.96,
+          duration: 0.5,
+          ease: "power2.in",
+        },
+        4.2,
+      );
+
+      window.__timelines["spotify-card"] = tl;
+    </script>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="spotify-card" data-composition-src="compositions/spotify-card.html" data-start="0" data-duration="5" data-track-index="1" data-width="1080" data-height="1920"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/swirl-vortex.mdx b/docs/catalog/blocks/swirl-vortex.mdx
index 0b3a669e51..b8ba44e48b 100644
--- a/docs/catalog/blocks/swirl-vortex.mdx
+++ b/docs/catalog/blocks/swirl-vortex.mdx
@@ -3,34 +3,408 @@ title: "Swirl Vortex"
 description: "Shader transition with swirling vortex distortion"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/swirl-vortex.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/swirl-vortex.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/swirl-vortex.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Swirl Vortex preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add swirl-vortex
-```
+<InstallCommand command="npx hyperframes add swirl-vortex" />
 
 That writes one file: `compositions/swirl-vortex.html`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`swirl-vortex.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      @import url("https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Bebas+Neue&family=JetBrains+Mono:wght@400;700&family=Lato:wght@400;700&display=block");
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <style>
+        [data-composition-id="main"] {
+          width: 1920px;
+          height: 1080px;
+          overflow: hidden;
+          position: relative;
+          background: #073b4c;
+        }
+
+        /* Blueprint grid */
+        .bp-grid {
+          position: absolute;
+          inset: 0;
+          background-image:
+            linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
+            linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
+          background-size: 40px 40px;
+          pointer-events: none;
+        }
+
+        /* Layout */
+        .bp-left {
+          position: absolute;
+          left: 0;
+          top: 0;
+          bottom: 0;
+          width: 1200px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .bp-right {
+          position: absolute;
+          right: 0;
+          top: 0;
+          bottom: 0;
+          width: 720px;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          padding: 60px 60px 60px 40px;
+        }
+        .bp-divider {
+          position: absolute;
+          left: 1200px;
+          top: 60px;
+          bottom: 60px;
+          width: 1px;
+          background: #06d6a0;
+          opacity: 0.15;
+        }
+        .bp-number {
+          font-family: "Space Mono", monospace;
+          font-size: 14px;
+          font-weight: 700;
+          letter-spacing: 0.4em;
+          text-transform: uppercase;
+          position: absolute;
+          top: 40px;
+          left: 60px;
+          color: #06d6a0;
+        }
+
+        /* Right panel typography */
+        .bp-name {
+          font-family: "Bebas Neue", sans-serif;
+          font-size: 38px;
+          letter-spacing: 0.08em;
+          margin-bottom: 20px;
+          color: #06d6a0;
+        }
+        .bp-plabel {
+          font-family: "Space Mono", monospace;
+          font-size: 11px;
+          font-weight: 700;
+          letter-spacing: 0.3em;
+          text-transform: uppercase;
+          margin-bottom: 10px;
+          color: #06d6a0;
+          opacity: 0.5;
+        }
+        .bp-prompt {
+          font-family: "JetBrains Mono", monospace;
+          font-size: 20px;
+          line-height: 1.6;
+          padding: 16px 20px;
+          border-radius: 6px;
+          margin-bottom: 20px;
+          color: #06d6a0;
+          background: rgba(6, 214, 160, 0.06);
+          border: 1px solid rgba(6, 214, 160, 0.12);
+        }
+        .bp-desc {
+          font-family: "Lato", sans-serif;
+          font-size: 17px;
+          line-height: 1.6;
+          color: #7a9ab0;
+          opacity: 0.55;
+        }
+
+        /* GL scenes (hidden, just for texture capture) */
+        .scene {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1200px;
+          height: 1080px;
+          overflow: hidden;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .scene-label {
+          font-family: "Bebas Neue", sans-serif;
+          font-size: 140px;
+          letter-spacing: 0.06em;
+          opacity: 0.12;
+        }
+      </style>
+
+      <div class="bp-grid"></div>
+      <div class="bp-divider"></div>
+      <div class="bp-number">10 / 14</div>
+
+      <!-- GL demo scenes (captured as textures, then hidden) -->
+      <div id="s1" class="scene" style="background: #073b4c">
+        <div class="scene-label" style="color: #06d6a0">SCENE A</div>
+      </div>
+      <div id="s2" class="scene" style="background: #06d6a0; opacity: 0">
+        <div class="scene-label" style="color: #073b4c">SCENE B</div>
+      </div>
+
+      <!-- GL canvas (left panel only) -->
+      <canvas
+        id="gl-canvas"
+        width="1200"
+        height="1080"
+        style="
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1200px;
+          height: 1080px;
+          z-index: 10;
+          pointer-events: none;
+          display: none;
+        "
+      >
+      </canvas>
+
+      <!-- Right panel metadata -->
+      <div class="bp-right">
+        <div class="bp-name">Swirl Vortex</div>
+        <div class="bp-plabel">Prompt</div>
+        <div class="bp-prompt">"use swirl vortex shader transition"</div>
+        <div class="bp-desc">
+          Both scenes swirl in opposite directions with FBM-warped spiral path. Organic distortion.
+        </div>
+      </div>
+
+      <div
+        id="driver"
+        class="clip"
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
 
-It runs for 4 seconds at 1920×1080. Paste this into your composition:
+    <script>
+      window.__timelines = window.__timelines || {};
+      var glCanvas = document.getElementById("gl-canvas");
+      var gl = glCanvas.getContext("webgl", { preserveDrawingBuffer: true });
+      if (!gl) {
+        console.warn("WebGL not available");
+        window.__timelines["main"] = gsap.timeline({ paused: true });
+      } else {
+        gl.viewport(0, 0, 1200, 1080);
+        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
+        var sceneTextures = {};
 
-```html index.html
-<div
-  data-composition-id="swirl-vortex"
-  data-composition-src="compositions/swirl-vortex.html"
-  data-start="0"
-  data-duration="4"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+        function captureScene(sceneId) {
+          var scene = document.getElementById(sceneId);
+          var origOpacity = scene.style.opacity;
+          var origZ = scene.style.zIndex;
+          scene.style.opacity = "1";
+          scene.style.zIndex = "999";
+          scene.offsetHeight;
+          var c = document.createElement("canvas");
+          c.width = 1200;
+          c.height = 1080;
+          var ctx = c.getContext("2d");
+          ctx.fillStyle = window.getComputedStyle(scene).backgroundColor;
+          ctx.fillRect(0, 0, 1200, 1080);
+          var sr = scene.getBoundingClientRect();
+          var els = scene.querySelectorAll("*");
+          for (var i = 0; i < els.length; i++) {
+            var el = els[i],
+              cs = window.getComputedStyle(el);
+            if (cs.display === "none" || cs.visibility === "hidden") continue;
+            var r = el.getBoundingClientRect();
+            if (r.width < 1 || r.height < 1) continue;
+            var x = r.left - sr.left,
+              y = r.top - sr.top,
+              w = r.width,
+              h = r.height;
+            ctx.save();
+            ctx.globalAlpha = parseFloat(cs.opacity) || 1;
+            var bg = cs.backgroundColor;
+            if (bg && bg !== "rgba(0, 0, 0, 0)" && bg !== "transparent") {
+              ctx.fillStyle = bg;
+              ctx.fillRect(x, y, w, h);
+            }
+            var hasChildEls = el.querySelector("div,span,img,video");
+            var text = "";
+            for (var j = 0; j < el.childNodes.length; j++)
+              if (el.childNodes[j].nodeType === 3) text += el.childNodes[j].textContent;
+            text = text.trim();
+            if (text && !hasChildEls) {
+              ctx.font = cs.fontWeight + " " + cs.fontSize + " " + cs.fontFamily;
+              ctx.fillStyle = cs.color;
+              if (cs.letterSpacing && cs.letterSpacing !== "normal")
+                ctx.letterSpacing = cs.letterSpacing;
+              ctx.textAlign = "center";
+              ctx.textBaseline = "middle";
+              ctx.fillText(text, x + w / 2, y + h / 2);
+            }
+            ctx.restore();
+          }
+          scene.style.opacity = origOpacity;
+          scene.style.zIndex = origZ;
+          var tex = gl.createTexture();
+          gl.bindTexture(gl.TEXTURE_2D, tex);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+          gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, c);
+          sceneTextures[sceneId] = tex;
+        }
+
+        var vertSrc =
+          "attribute vec2 a_pos; varying vec2 v_uv; void main(){" +
+          "v_uv=a_pos*0.5+0.5; v_uv.y=1.0-v_uv.y; gl_Position=vec4(a_pos,0,1);}";
+        var quadBuf = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);
+        gl.bufferData(
+          gl.ARRAY_BUFFER,
+          new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),
+          gl.STATIC_DRAW,
+        );
+        function compileShader(src, type) {
+          var s = gl.createShader(type);
+          gl.shaderSource(s, src);
+          gl.compileShader(s);
+          if (!gl.getShaderParameter(s, gl.COMPILE_STATUS))
+            console.error("Shader:", gl.getShaderInfoLog(s));
+          return s;
+        }
+        function mkProg(fragSrc) {
+          var p = gl.createProgram();
+          gl.attachShader(p, compileShader(vertSrc, gl.VERTEX_SHADER));
+          gl.attachShader(p, compileShader(fragSrc, gl.FRAGMENT_SHADER));
+          gl.linkProgram(p);
+          if (!gl.getProgramParameter(p, gl.LINK_STATUS))
+            console.error("Link:", gl.getProgramInfoLog(p));
+          return p;
+        }
+
+        var H =
+          "precision mediump float;" +
+          "varying vec2 v_uv;" +
+          "uniform sampler2D u_from, u_to;" +
+          "uniform float u_progress;" +
+          "uniform vec2 u_resolution;\n";
+
+        var NQ =
+          "float hash(vec2 p){return fract(sin(dot(p,vec2(127.1,311.7)))*43758.5453);}" +
+          "float vnoise(vec2 p){vec2 i=floor(p),f=fract(p);" +
+          "f=f*f*f*(f*(f*6.-15.)+10.);" +
+          "return mix(mix(hash(i),hash(i+vec2(1,0)),f.x)," +
+          "mix(hash(i+vec2(0,1)),hash(i+vec2(1,1)),f.x),f.y);}" +
+          "float fbm(vec2 p){float v=0.,a=.5;" +
+          "mat2 R=mat2(.8,.6,-.6,.8);" +
+          "for(int i=0;i<5;i++){v+=a*vnoise(p);p=R*p*2.02;a*=.5;}return v;}";
+
+        var progPass = mkProg(H + "void main(){gl_FragColor=texture2D(u_from,v_uv);}");
+        var progTrans = mkProg(
+          H +
+            NQ +
+            "void main(){vec2 uv=v_uv-.5;float dist=length(uv);float warp=fbm(v_uv*4.)*.5;float fromAng=u_progress*(1.-dist)*10.+warp*u_progress*3.;float fs=sin(fromAng),fc=cos(fromAng);vec2 fromUv=clamp(vec2(uv.x*fc-uv.y*fs,uv.x*fs+uv.y*fc)+.5,0.,1.);float toAng=-(1.-u_progress)*(1.-dist)*10.-warp*(1.-u_progress)*3.;float ts=sin(toAng),tc=cos(toAng);vec2 toUv=clamp(vec2(uv.x*tc-uv.y*ts,uv.x*ts+uv.y*tc)+.5,0.,1.);vec4 A=texture2D(u_from,fromUv);vec4 B=texture2D(u_to,toUv);gl_FragColor=mix(A,B,u_progress);}",
+        );
+
+        function renderShader(prog, texFrom, texTo, progress) {
+          gl.useProgram(prog);
+          gl.activeTexture(gl.TEXTURE0);
+          gl.bindTexture(gl.TEXTURE_2D, texFrom);
+          gl.uniform1i(gl.getUniformLocation(prog, "u_from"), 0);
+          gl.activeTexture(gl.TEXTURE1);
+          gl.bindTexture(gl.TEXTURE_2D, texTo);
+          gl.uniform1i(gl.getUniformLocation(prog, "u_to"), 1);
+          gl.uniform1f(gl.getUniformLocation(prog, "u_progress"), progress);
+          gl.uniform2f(gl.getUniformLocation(prog, "u_resolution"), 1200, 1080);
+          var pos = gl.getAttribLocation(prog, "a_pos");
+          gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);
+          gl.enableVertexAttribArray(pos);
+          gl.vertexAttribPointer(pos, 2, gl.FLOAT, false, 0, 0);
+          gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+        }
+
+        function easeInOut(p) {
+          return p < 0.5 ? 2 * p * p : 1 - Math.pow(-2 * p + 2, 2) / 2;
+        }
+
+        captureScene("s1");
+        captureScene("s2");
+        glCanvas.style.display = "block";
+        renderShader(progPass, sceneTextures["s1"], sceneTextures["s1"], 0);
+        document.querySelectorAll(".scene").forEach(function (s) {
+          s.style.opacity = "0";
+        });
+
+        var tl = gsap.timeline({
+          paused: true,
+          onUpdate: function () {
+            var t = tl.time();
+            if (t >= 1.0 && t < 3.0) {
+              renderShader(
+                progTrans,
+                sceneTextures["s1"],
+                sceneTextures["s2"],
+                easeInOut((t - 1.0) / 2.0),
+              );
+            } else if (t >= 3.0) {
+              renderShader(progPass, sceneTextures["s2"], sceneTextures["s2"], 0);
+            } else {
+              renderShader(progPass, sceneTextures["s1"], sceneTextures["s1"], 0);
+            }
+          },
+        });
+        tl.to({ v: 0 }, { v: 1, duration: 4, ease: "none" }, 0);
+        window.__timelines["main"] = tl;
+      } // end if (gl)
+    </script>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="swirl-vortex" data-composition-src="compositions/swirl-vortex.html" data-start="0" data-duration="4" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/thermal-distortion.mdx b/docs/catalog/blocks/thermal-distortion.mdx
index 5578803506..516971fa7a 100644
--- a/docs/catalog/blocks/thermal-distortion.mdx
+++ b/docs/catalog/blocks/thermal-distortion.mdx
@@ -3,34 +3,409 @@ title: "Thermal Distortion"
 description: "Shader transition with heat haze thermal distortion"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/thermal-distortion.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/thermal-distortion.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/thermal-distortion.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Thermal Distortion preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add thermal-distortion
-```
+<InstallCommand command="npx hyperframes add thermal-distortion" />
 
 That writes one file: `compositions/thermal-distortion.html`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`thermal-distortion.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      @import url("https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Bebas+Neue&family=JetBrains+Mono:wght@400;700&family=Lato:wght@400;700&display=block");
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <style>
+        [data-composition-id="main"] {
+          width: 1920px;
+          height: 1080px;
+          overflow: hidden;
+          position: relative;
+          background: #3d405b;
+        }
+
+        /* Blueprint grid */
+        .bp-grid {
+          position: absolute;
+          inset: 0;
+          background-image:
+            linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
+            linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
+          background-size: 40px 40px;
+          pointer-events: none;
+        }
+
+        /* Layout */
+        .bp-left {
+          position: absolute;
+          left: 0;
+          top: 0;
+          bottom: 0;
+          width: 1200px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .bp-right {
+          position: absolute;
+          right: 0;
+          top: 0;
+          bottom: 0;
+          width: 720px;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          padding: 60px 60px 60px 40px;
+        }
+        .bp-divider {
+          position: absolute;
+          left: 1200px;
+          top: 60px;
+          bottom: 60px;
+          width: 1px;
+          background: #e07a5f;
+          opacity: 0.15;
+        }
+        .bp-number {
+          font-family: "Space Mono", monospace;
+          font-size: 14px;
+          font-weight: 700;
+          letter-spacing: 0.4em;
+          text-transform: uppercase;
+          position: absolute;
+          top: 40px;
+          left: 60px;
+          color: #e07a5f;
+        }
+
+        /* Right panel typography */
+        .bp-name {
+          font-family: "Bebas Neue", sans-serif;
+          font-size: 38px;
+          letter-spacing: 0.08em;
+          margin-bottom: 20px;
+          color: #e07a5f;
+        }
+        .bp-plabel {
+          font-family: "Space Mono", monospace;
+          font-size: 11px;
+          font-weight: 700;
+          letter-spacing: 0.3em;
+          text-transform: uppercase;
+          margin-bottom: 10px;
+          color: #e07a5f;
+          opacity: 0.5;
+        }
+        .bp-prompt {
+          font-family: "JetBrains Mono", monospace;
+          font-size: 20px;
+          line-height: 1.6;
+          padding: 16px 20px;
+          border-radius: 6px;
+          margin-bottom: 20px;
+          color: #e07a5f;
+          background: rgba(224, 122, 95, 0.06);
+          border: 1px solid rgba(224, 122, 95, 0.12);
+        }
+        .bp-desc {
+          font-family: "Lato", sans-serif;
+          font-size: 17px;
+          line-height: 1.6;
+          color: #a0a0b0;
+          opacity: 0.55;
+        }
+
+        /* GL scenes (hidden, just for texture capture) */
+        .scene {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1200px;
+          height: 1080px;
+          overflow: hidden;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .scene-label {
+          font-family: "Bebas Neue", sans-serif;
+          font-size: 140px;
+          letter-spacing: 0.06em;
+          opacity: 0.12;
+        }
+      </style>
+
+      <div class="bp-grid"></div>
+      <div class="bp-divider"></div>
+      <div class="bp-number">11 / 14</div>
+
+      <!-- GL demo scenes (captured as textures, then hidden) -->
+      <div id="s1" class="scene" style="background: #3d405b">
+        <div class="scene-label" style="color: #e07a5f">SCENE A</div>
+      </div>
+      <div id="s2" class="scene" style="background: #e07a5f; opacity: 0">
+        <div class="scene-label" style="color: #3d405b">SCENE B</div>
+      </div>
+
+      <!-- GL canvas (left panel only) -->
+      <canvas
+        id="gl-canvas"
+        width="1200"
+        height="1080"
+        style="
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1200px;
+          height: 1080px;
+          z-index: 10;
+          pointer-events: none;
+          display: none;
+        "
+      >
+      </canvas>
+
+      <!-- Right panel metadata -->
+      <div class="bp-right">
+        <div class="bp-name">Thermal Distortion</div>
+        <div class="bp-plabel">Prompt</div>
+        <div class="bp-prompt">"use thermal distortion shader transition"</div>
+        <div class="bp-desc">
+          FBM-driven heat shimmer rising from the bottom. Sine displacement modulated by noise with
+          warm haze.
+        </div>
+      </div>
+
+      <div
+        id="driver"
+        class="clip"
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
 
-It runs for 4 seconds at 1920×1080. Paste this into your composition:
+    <script>
+      window.__timelines = window.__timelines || {};
+      var glCanvas = document.getElementById("gl-canvas");
+      var gl = glCanvas.getContext("webgl", { preserveDrawingBuffer: true });
+      if (!gl) {
+        console.warn("WebGL not available");
+        window.__timelines["main"] = gsap.timeline({ paused: true });
+      } else {
+        gl.viewport(0, 0, 1200, 1080);
+        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
+        var sceneTextures = {};
 
-```html index.html
-<div
-  data-composition-id="thermal-distortion"
-  data-composition-src="compositions/thermal-distortion.html"
-  data-start="0"
-  data-duration="4"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+        function captureScene(sceneId) {
+          var scene = document.getElementById(sceneId);
+          var origOpacity = scene.style.opacity;
+          var origZ = scene.style.zIndex;
+          scene.style.opacity = "1";
+          scene.style.zIndex = "999";
+          scene.offsetHeight;
+          var c = document.createElement("canvas");
+          c.width = 1200;
+          c.height = 1080;
+          var ctx = c.getContext("2d");
+          ctx.fillStyle = window.getComputedStyle(scene).backgroundColor;
+          ctx.fillRect(0, 0, 1200, 1080);
+          var sr = scene.getBoundingClientRect();
+          var els = scene.querySelectorAll("*");
+          for (var i = 0; i < els.length; i++) {
+            var el = els[i],
+              cs = window.getComputedStyle(el);
+            if (cs.display === "none" || cs.visibility === "hidden") continue;
+            var r = el.getBoundingClientRect();
+            if (r.width < 1 || r.height < 1) continue;
+            var x = r.left - sr.left,
+              y = r.top - sr.top,
+              w = r.width,
+              h = r.height;
+            ctx.save();
+            ctx.globalAlpha = parseFloat(cs.opacity) || 1;
+            var bg = cs.backgroundColor;
+            if (bg && bg !== "rgba(0, 0, 0, 0)" && bg !== "transparent") {
+              ctx.fillStyle = bg;
+              ctx.fillRect(x, y, w, h);
+            }
+            var hasChildEls = el.querySelector("div,span,img,video");
+            var text = "";
+            for (var j = 0; j < el.childNodes.length; j++)
+              if (el.childNodes[j].nodeType === 3) text += el.childNodes[j].textContent;
+            text = text.trim();
+            if (text && !hasChildEls) {
+              ctx.font = cs.fontWeight + " " + cs.fontSize + " " + cs.fontFamily;
+              ctx.fillStyle = cs.color;
+              if (cs.letterSpacing && cs.letterSpacing !== "normal")
+                ctx.letterSpacing = cs.letterSpacing;
+              ctx.textAlign = "center";
+              ctx.textBaseline = "middle";
+              ctx.fillText(text, x + w / 2, y + h / 2);
+            }
+            ctx.restore();
+          }
+          scene.style.opacity = origOpacity;
+          scene.style.zIndex = origZ;
+          var tex = gl.createTexture();
+          gl.bindTexture(gl.TEXTURE_2D, tex);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+          gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, c);
+          sceneTextures[sceneId] = tex;
+        }
+
+        var vertSrc =
+          "attribute vec2 a_pos; varying vec2 v_uv; void main(){" +
+          "v_uv=a_pos*0.5+0.5; v_uv.y=1.0-v_uv.y; gl_Position=vec4(a_pos,0,1);}";
+        var quadBuf = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);
+        gl.bufferData(
+          gl.ARRAY_BUFFER,
+          new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),
+          gl.STATIC_DRAW,
+        );
+        function compileShader(src, type) {
+          var s = gl.createShader(type);
+          gl.shaderSource(s, src);
+          gl.compileShader(s);
+          if (!gl.getShaderParameter(s, gl.COMPILE_STATUS))
+            console.error("Shader:", gl.getShaderInfoLog(s));
+          return s;
+        }
+        function mkProg(fragSrc) {
+          var p = gl.createProgram();
+          gl.attachShader(p, compileShader(vertSrc, gl.VERTEX_SHADER));
+          gl.attachShader(p, compileShader(fragSrc, gl.FRAGMENT_SHADER));
+          gl.linkProgram(p);
+          if (!gl.getProgramParameter(p, gl.LINK_STATUS))
+            console.error("Link:", gl.getProgramInfoLog(p));
+          return p;
+        }
+
+        var H =
+          "precision mediump float;" +
+          "varying vec2 v_uv;" +
+          "uniform sampler2D u_from, u_to;" +
+          "uniform float u_progress;" +
+          "uniform vec2 u_resolution;\n";
+
+        var NQ =
+          "float hash(vec2 p){return fract(sin(dot(p,vec2(127.1,311.7)))*43758.5453);}" +
+          "float vnoise(vec2 p){vec2 i=floor(p),f=fract(p);" +
+          "f=f*f*f*(f*(f*6.-15.)+10.);" +
+          "return mix(mix(hash(i),hash(i+vec2(1,0)),f.x)," +
+          "mix(hash(i+vec2(0,1)),hash(i+vec2(1,1)),f.x),f.y);}" +
+          "float fbm(vec2 p){float v=0.,a=.5;" +
+          "mat2 R=mat2(.8,.6,-.6,.8);" +
+          "for(int i=0;i<5;i++){v+=a*vnoise(p);p=R*p*2.02;a*=.5;}return v;}";
+
+        var progPass = mkProg(H + "void main(){gl_FragColor=texture2D(u_from,v_uv);}");
+        var progTrans = mkProg(
+          H +
+            NQ +
+            "void main(){float heat=u_progress*1.5;float yFade=smoothstep(1.,0.,v_uv.y);float shimmer=sin(v_uv.y*40.+fbm(v_uv*6.)*8.)*fbm(v_uv*3.+vec2(0.,u_progress*2.));float dispX=shimmer*heat*.03*yFade;vec2 fromUv=clamp(v_uv+vec2(dispX,0.),0.,1.);vec4 A=texture2D(u_from,fromUv);float invShimmer=sin(v_uv.y*40.+fbm(v_uv*6.+3.)*8.)*fbm(v_uv*3.+vec2(3.,u_progress*2.));float dispX2=invShimmer*(1.-u_progress)*.03*yFade;vec2 toUv=clamp(v_uv+vec2(dispX2,0.),0.,1.);vec4 B=texture2D(u_to,toUv);float haze=heat*yFade*.15*(1.-u_progress);gl_FragColor=vec4(mix(A.rgb,B.rgb,u_progress)+vec3(1.,.9,.7)*haze,1.);}",
+        );
+
+        function renderShader(prog, texFrom, texTo, progress) {
+          gl.useProgram(prog);
+          gl.activeTexture(gl.TEXTURE0);
+          gl.bindTexture(gl.TEXTURE_2D, texFrom);
+          gl.uniform1i(gl.getUniformLocation(prog, "u_from"), 0);
+          gl.activeTexture(gl.TEXTURE1);
+          gl.bindTexture(gl.TEXTURE_2D, texTo);
+          gl.uniform1i(gl.getUniformLocation(prog, "u_to"), 1);
+          gl.uniform1f(gl.getUniformLocation(prog, "u_progress"), progress);
+          gl.uniform2f(gl.getUniformLocation(prog, "u_resolution"), 1200, 1080);
+          var pos = gl.getAttribLocation(prog, "a_pos");
+          gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);
+          gl.enableVertexAttribArray(pos);
+          gl.vertexAttribPointer(pos, 2, gl.FLOAT, false, 0, 0);
+          gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+        }
+
+        function easeInOut(p) {
+          return p < 0.5 ? 2 * p * p : 1 - Math.pow(-2 * p + 2, 2) / 2;
+        }
+
+        captureScene("s1");
+        captureScene("s2");
+        glCanvas.style.display = "block";
+        renderShader(progPass, sceneTextures["s1"], sceneTextures["s1"], 0);
+        document.querySelectorAll(".scene").forEach(function (s) {
+          s.style.opacity = "0";
+        });
+
+        var tl = gsap.timeline({
+          paused: true,
+          onUpdate: function () {
+            var t = tl.time();
+            if (t >= 1.0 && t < 3.0) {
+              renderShader(
+                progTrans,
+                sceneTextures["s1"],
+                sceneTextures["s2"],
+                easeInOut((t - 1.0) / 2.0),
+              );
+            } else if (t >= 3.0) {
+              renderShader(progPass, sceneTextures["s2"], sceneTextures["s2"], 0);
+            } else {
+              renderShader(progPass, sceneTextures["s1"], sceneTextures["s1"], 0);
+            }
+          },
+        });
+        tl.to({ v: 0 }, { v: 1, duration: 4, ease: "none" }, 0);
+        window.__timelines["main"] = tl;
+      } // end if (gl)
+    </script>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="thermal-distortion" data-composition-src="compositions/thermal-distortion.html" data-start="0" data-duration="4" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/thread-message-stack.mdx b/docs/catalog/blocks/thread-message-stack.mdx
new file mode 100644
index 0000000000..576d23b6bd
--- /dev/null
+++ b/docs/catalog/blocks/thread-message-stack.mdx
@@ -0,0 +1,291 @@
+---
+title: "Thread Message Stack"
+description: "A source-owned editable conversation stack with arbitrary incoming and outgoing messages"
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/thread-message-stack.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Thread Message Stack preview" />
+
+## Install
+
+<InstallCommand command="npx hyperframes add thread-message-stack" />
+
+That writes one file: `compositions/thread-message-stack.html`.
+
+## Add it to your video
+
+It runs for 8 seconds at 1920×1080. Paste this into your composition:
+
+```html index.html
+<div
+  data-composition-id="thread-message-stack"
+  data-composition-src="compositions/thread-message-stack.html"
+  data-start="0"
+  data-duration="8"
+  data-track-index="1"
+  data-width="1920"
+  data-height="1080"
+></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={`thread-message-stack.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Thread Message Stack</title>
+  </head>
+  <body>
+    <template id="tms-template">
+      <div
+        id="tms-root"
+        data-composition-id="thread-message-stack"
+        data-start="0"
+        data-duration="8"
+        data-width="1920"
+        data-height="1080"
+      >
+        <style>
+          #tms-root,
+          #tms-root * {
+            box-sizing: border-box;
+          }
+
+          #tms-root {
+            position: relative;
+            width: 1920px;
+            height: 1080px;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            background: #2e241a;
+            color: #ffffff;
+            font-family: -apple-system, "Helvetica Neue", "Segoe UI", sans-serif;
+            --tms-out-fill: #2d89e1;
+            --tms-out-ink: #ffffff;
+            --tms-in-fill: rgba(240, 240, 245, 0.82);
+            --tms-in-ink: #101216;
+          }
+
+          #tms-roll,
+          #tms-scrim,
+          #tms-view {
+            position: absolute;
+            inset: 0;
+          }
+
+          #tms-roll {
+            overflow: hidden;
+            background:
+              radial-gradient(circle at 18% 20%, #f0d3a6 0, transparent 31%),
+              radial-gradient(circle at 75% 18%, #e8a86a 0, transparent 34%),
+              radial-gradient(circle at 62% 74%, #2e6a8c 0, transparent 32%),
+              radial-gradient(circle at 18% 82%, #6b4a7a 0, transparent 35%), #2e241a;
+            transform: scale(1.12);
+            will-change: transform;
+          }
+
+          #tms-scrim {
+            background:
+              linear-gradient(
+                to bottom,
+                transparent 0,
+                rgba(0, 0, 0, 0.18) 42%,
+                rgba(0, 0, 0, 0.38) 100%
+              ),
+              linear-gradient(to right, rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0) 78%);
+          }
+
+          #tms-view {
+            overflow: hidden;
+            -webkit-mask-image: linear-gradient(to bottom, transparent 5%, #000 24%, #000 100%);
+            mask-image: linear-gradient(to bottom, transparent 5%, #000 24%, #000 100%);
+          }
+
+          #tms-column {
+            position: absolute;
+            inset: 0;
+          }
+
+          .tms-row {
+            position: absolute;
+            right: 6%;
+            bottom: 10%;
+            left: 6%;
+            display: flex;
+            flex-direction: column;
+            opacity: 0;
+            will-change: transform, opacity;
+          }
+
+          .tms-row[data-side="incoming"] {
+            align-items: flex-start;
+          }
+
+          .tms-row[data-side="outgoing"] {
+            align-items: flex-end;
+          }
+
+          .tms-sender {
+            min-height: 30px;
+            padding: 0 18px 8px;
+            color: #ffffff;
+            font-size: 24px;
+            font-weight: 700;
+            line-height: 1;
+            text-shadow: 0 3px 12px rgba(0, 0, 0, 0.72);
+          }
+
+          .tms-bubble {
+            max-width: min(72%, 920px);
+            padding: 24px 38px;
+            border-radius: 42px;
+            font-size: 42px;
+            font-weight: 500;
+            letter-spacing: -0.015em;
+            line-height: 1.3;
+            overflow-wrap: anywhere;
+            white-space: pre-wrap;
+          }
+
+          .tms-row[data-side="incoming"] .tms-bubble {
+            color: var(--tms-in-ink);
+            background:
+              linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(0, 0, 0, 0.05)),
+              var(--tms-in-fill);
+            box-shadow: 0 12px 34px rgba(0, 0, 0, 0.3);
+            transform-origin: 0 100%;
+          }
+
+          .tms-row[data-side="outgoing"] .tms-bubble {
+            color: var(--tms-out-ink);
+            background:
+              linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.17)),
+              var(--tms-out-fill);
+            box-shadow: 0 12px 38px rgba(0, 0, 0, 0.38);
+            transform-origin: 100% 100%;
+          }
+
+          #tms-driver {
+            position: absolute;
+            width: 1px;
+            height: 1px;
+            opacity: 0;
+            pointer-events: none;
+          }
+        </style>
+
+        <div id="tms-roll" data-layout-ignore></div>
+        <div id="tms-scrim" data-layout-ignore></div>
+        <div id="tms-view"><div id="tms-column"></div></div>
+        <div
+          id="tms-driver"
+          class="clip"
+          data-start="0"
+          data-duration="8"
+          data-track-index="0"
+        ></div>
+
+        <div hidden data-hf-primitive-data>
+          { "messages": [ { "side": "incoming", "text": "wait, that is actually wild", "sender":
+          "Northbeam support" }, { "side": "outgoing", "text": "can you fix it?" }, { "side":
+          "incoming", "text": "way ahead of you" }, { "side": "outgoing", "text": "you are unreal"
+          }, { "side": "incoming", "text": "he owes you dinner for this one" }, { "side":
+          "outgoing", "text": "already booked" } ], "stagger": 0.86, "hold": 1 }
+        </div>
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+            window.__timelines = window.__timelines || {};
+            var root = document.getElementById("tms-root");
+            var column = document.getElementById("tms-column");
+            var roll = document.getElementById("tms-roll");
+            var data = JSON.parse(
+              root
+                .querySelector("[data-hf-primitive-data]")
+                .textContent.replace(/\s*[\r\n]+\s*/g, " "),
+            );
+            var messages = data.messages;
+            var duration = Number(root.dataset.duration || 8);
+            var available = Math.max(0.2, duration - Math.max(0, Number(data.hold || 0)) - 0.35);
+            var requestedStagger = Math.max(0, Number(data.stagger == null ? 0.72 : data.stagger));
+            var stagger =
+              messages.length <= 1 ? 0 : Math.min(requestedStagger, available / messages.length);
+            var start = 0.25;
+            var rows = [];
+
+            messages.forEach(function (message, index) {
+              var row = document.createElement("div");
+              row.id = "tms-message-" + index;
+              row.className = "tms-row";
+              row.dataset.side = message.side;
+              if (message.sender !== undefined) {
+                var sender = document.createElement("div");
+                sender.className = "tms-sender";
+                sender.textContent = message.sender;
+                row.appendChild(sender);
+              }
+              var bubble = document.createElement("div");
+              bubble.className = "tms-bubble";
+              bubble.textContent = message.text;
+              row.appendChild(bubble);
+              column.appendChild(row);
+              rows.push(row);
+            });
+
+            var heights = rows.map(function (row) {
+              return Math.max(118, row.offsetHeight || 118) + 22;
+            });
+            var tl = gsap.timeline({ paused: true });
+            tl.fromTo(
+              roll,
+              { x: 0, y: 0, scale: 1.12 },
+              { x: -54, y: -22, scale: 1.18, duration: duration, ease: "sine.inOut" },
+              0,
+            );
+
+            rows.forEach(function (row, index) {
+              var at = start + index * stagger;
+              var direction = row.dataset.side === "incoming" ? -1 : 1;
+              tl.fromTo(
+                row,
+                { x: direction * 34, y: 0, scale: 0.94, opacity: 0 },
+                { x: 0, y: 0, scale: 1, opacity: 1, duration: 0.28, ease: "back.out(1.45)" },
+                at,
+              );
+              var offset = 0;
+              for (var previous = index - 1; previous >= 0; previous -= 1) {
+                offset += heights[previous + 1];
+                tl.to(rows[previous], { y: -offset, duration: 0.24, ease: "power3.out" }, at);
+              }
+            });
+
+            window.__timelines["thread-message-stack"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</Accordion>
+
+{/* hf:generated-footer */}
+
+Tagged `social` `conversation` `messages`.
+
+## 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/tiktok-follow.mdx b/docs/catalog/blocks/tiktok-follow.mdx
index 6224367fe0..8c29268e0d 100644
--- a/docs/catalog/blocks/tiktok-follow.mdx
+++ b/docs/catalog/blocks/tiktok-follow.mdx
@@ -3,34 +3,295 @@ title: "TikTok Follow"
 description: "Animated TikTok follow overlay with profile card and follow button"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/tiktok-follow.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/tiktok-follow.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/tiktok-follow.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="TikTok Follow preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add tiktok-follow
-```
+<InstallCommand command="npx hyperframes add tiktok-follow" />
 
 That writes `compositions/tiktok-follow.html`, plus 1 supporting file under `assets/`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`tiktok-follow.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&display=block"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+      }
+      html,
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      body {
+        width: 1080px;
+        height: 1920px;
+        font-family: "DM Sans", sans-serif;
+      }
+
+      [data-composition-id="tiktok-follow"] .lower-third {
+        position: absolute;
+        bottom: 160px;
+        left: 50%;
+        transform: translateX(-50%);
+        display: flex;
+        align-items: center;
+        gap: 30px;
+        background: #1a1a1a;
+        border-radius: 75px;
+        padding: 25px 40px 25px 25px;
+        box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
+      }
+
+      [data-composition-id="tiktok-follow"] .avatar {
+        width: 120px;
+        height: 120px;
+        border-radius: 50%;
+        object-fit: cover;
+        flex-shrink: 0;
+        border: 3px solid #333;
+      }
+
+      [data-composition-id="tiktok-follow"] .profile-info {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        margin-right: 20px;
+      }
+
+      [data-composition-id="tiktok-follow"] .display-name {
+        font-size: 42px;
+        font-weight: 700;
+        color: #ffffff;
+        line-height: 1.3;
+        letter-spacing: -0.01em;
+      }
+
+      [data-composition-id="tiktok-follow"] .handle {
+        font-size: 28px;
+        font-weight: 400;
+        color: #a0a0a0;
+        line-height: 1.3;
+      }
+
+      [data-composition-id="tiktok-follow"] .follower-count {
+        font-size: 25px;
+        font-weight: 400;
+        color: #737373;
+        line-height: 1.3;
+      }
+
+      [data-composition-id="tiktok-follow"] .follow-btn {
+        position: relative;
+        width: 250px;
+        height: 80px;
+        border-radius: 40px;
+        background: #fe2c55;
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+      }
+
+      [data-composition-id="tiktok-follow"] .btn-text {
+        position: absolute;
+        font-family: "DM Sans", sans-serif;
+        font-size: 30px;
+        font-weight: 700;
+        color: #ffffff;
+        letter-spacing: 0.02em;
+        white-space: nowrap;
+      }
+
+      [data-composition-id="tiktok-follow"] .btn-text-follow {
+        opacity: 1;
+      }
+
+      [data-composition-id="tiktok-follow"] .btn-text-following {
+        opacity: 0;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+
+      [data-composition-id="tiktok-follow"] .check-icon {
+        display: inline-block;
+        width: 22px;
+        height: 22px;
+      }
 
-It runs for 4.5 seconds at 1080×1920. Paste this into your composition:
+      [data-composition-id="tiktok-follow"] .check-icon svg {
+        width: 22px;
+        height: 22px;
+        display: block;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="tiktok-follow"
+      data-width="1080"
+      data-height="1920"
+      data-start="0"
+      data-duration="4.5"
+    >
+      <div
+        id="card"
+        class="clip lower-third"
+        data-start="0"
+        data-duration="4.5"
+        data-track-index="0"
+      >
+        <img class="avatar" src="assets/avatar.jpg" alt="HeyGen" crossorigin="anonymous" />
+        <div class="profile-info">
+          <div class="display-name">HeyGen</div>
+          <div class="handle">@heygen.com</div>
+          <div class="follower-count">1,999 followers</div>
+        </div>
+        <div id="follow-btn" class="follow-btn">
+          <span id="btn-follow" class="btn-text btn-text-follow">Follow</span>
+          <span id="btn-following" class="btn-text btn-text-following">
+            <span>Following</span>
+            <span class="check-icon"
+              ><svg
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="#fff"
+                stroke-width="2.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <polyline points="20 6 9 17 4 12"></polyline></svg
+            ></span>
+          </span>
+        </div>
+      </div>
+    </div>
 
-```html index.html
-<div
-  data-composition-id="tiktok-follow"
-  data-composition-src="compositions/tiktok-follow.html"
-  data-start="0"
-  data-duration="4.5"
-  data-track-index="1"
-  data-width="1080"
-  data-height="1920"
-></div>
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      var tl = gsap.timeline({ paused: true });
+
+      var card = document.getElementById("card");
+      var btn = document.getElementById("follow-btn");
+      var textFollow = document.getElementById("btn-follow");
+      var textFollowing = document.getElementById("btn-following");
+
+      // Start off-screen
+      gsap.set(card, { y: 300, opacity: 0 });
+
+      // Slide in from bottom
+      tl.to(
+        card,
+        {
+          y: 0,
+          opacity: 1,
+          duration: 0.5,
+          ease: "power3.out",
+        },
+        0.1,
+      );
+
+      // Hold, then button press-in
+      tl.to(
+        btn,
+        {
+          scale: 0.92,
+          duration: 0.15,
+          ease: "power2.out",
+        },
+        1.0,
+      );
+
+      // Button release with spring bounce
+      tl.to(
+        btn,
+        {
+          scale: 1,
+          duration: 0.4,
+          ease: "elastic.out(1, 0.4)",
+        },
+        1.15,
+      );
+
+      // Button background: rose-red → dark gray
+      tl.to(
+        btn,
+        {
+          backgroundColor: "#2f2f2f",
+          duration: 0.12,
+          ease: "none",
+        },
+        1.15,
+      );
+
+      // Fade out "Follow", fade in "Following"
+      tl.to(
+        textFollow,
+        {
+          opacity: 0,
+          duration: 0.08,
+          ease: "none",
+        },
+        1.15,
+      );
+
+      tl.to(
+        textFollowing,
+        {
+          opacity: 1,
+          duration: 0.08,
+          ease: "none",
+        },
+        1.18,
+      );
+
+      // Slide out to bottom
+      tl.to(
+        card,
+        {
+          y: 300,
+          opacity: 0,
+          duration: 0.25,
+          ease: "power3.in",
+        },
+        3.8,
+      );
+
+      window.__timelines["tiktok-follow"] = tl;
+    </script>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="tiktok-follow" data-composition-src="compositions/tiktok-follow.html" data-start="0" data-duration="4.5" data-track-index="1" data-width="1080" data-height="1920"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/transitions-3d.mdx b/docs/catalog/blocks/transitions-3d.mdx
index 554fd608ed..dcce6db53d 100644
--- a/docs/catalog/blocks/transitions-3d.mdx
+++ b/docs/catalog/blocks/transitions-3d.mdx
@@ -3,34 +3,329 @@ title: "3D Transitions"
 description: "Showcase of 3D perspective flip and rotate transitions"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-3d.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-3d.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/transitions-3d.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="3D Transitions preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add transitions-3d
-```
+<InstallCommand command="npx hyperframes add transitions-3d" />
 
 That writes one file: `compositions/transitions-3d.html`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`transitions-3d.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920" />
+    <title>3D Transitions</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #000;
+        overflow: hidden;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+      }
+
+      .scene {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        transform-style: preserve-3d;
+      }
+
+      .scene-inner {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        backface-visibility: hidden;
+      }
+
+      #scene1 {
+        z-index: 1;
+      }
+      #scene2 {
+        z-index: 2;
+        opacity: 0;
+      }
+
+      #s1 {
+        background: #1b263b;
+      }
+      #s2 {
+        background: #e07a5f;
+      }
+
+      .big-text {
+        font-size: 200px;
+        font-weight: 900;
+        line-height: 1;
+        user-select: none;
+        pointer-events: none;
+      }
+      #s1 .big-text {
+        color: rgba(255, 255, 255, 0.08);
+      }
+      #s2 .big-text {
+        color: rgba(255, 255, 255, 0.15);
+      }
+
+      .label {
+        font-size: 32px;
+        font-weight: 600;
+        letter-spacing: 6px;
+        text-transform: uppercase;
+        margin-top: 12px;
+      }
+      #s1 .label {
+        color: #778da9;
+      }
+      #s2 .label {
+        color: #fff;
+      }
+
+      #info-bar {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 1920px;
+        height: 80px;
+        background: rgba(0, 0, 0, 0.88);
+        z-index: 100;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0;
+      }
+      #info-bar span {
+        color: #fff;
+        font-size: 22px;
+        font-weight: 500;
+        letter-spacing: 2px;
+      }
+
+      #title-card {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        background: #0d1b2a;
+        z-index: 200;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        opacity: 0;
+      }
+      #title-card .category {
+        font-size: 64px;
+        font-weight: 800;
+        color: #fff;
+        letter-spacing: 8px;
+        text-transform: uppercase;
+      }
+      #title-card .subtitle {
+        font-size: 24px;
+        font-weight: 400;
+        color: #778da9;
+        margin-top: 16px;
+        letter-spacing: 4px;
+      }
+
+      #outro-card {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        background: #0d1b2a;
+        z-index: 200;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        opacity: 0;
+      }
+      #outro-card .category {
+        font-size: 48px;
+        font-weight: 700;
+        color: #778da9;
+        letter-spacing: 6px;
+        text-transform: uppercase;
+      }
+
+      /* 3D perspective wrapper */
+      #composition {
+        perspective: 1200px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="composition"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="11"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="title-card">
+        <div class="category">3D Transitions</div>
+        <div class="subtitle">1 Transition</div>
+      </div>
 
-It runs for 11 seconds at 1920×1080. Paste this into your composition:
+      <div id="scene1" class="scene">
+        <div id="s1" class="scene-inner">
+          <div class="big-text">ONE</div>
+          <div class="label">Scene A</div>
+        </div>
+      </div>
 
-```html index.html
-<div
-  data-composition-id="transitions-3d"
-  data-composition-src="compositions/transitions-3d.html"
-  data-start="0"
-  data-duration="11"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+      <div id="scene2" class="scene">
+        <div id="s2" class="scene-inner">
+          <div class="big-text">TWO</div>
+          <div class="label">Scene B</div>
+        </div>
+      </div>
+
+      <div id="info-bar"><span id="info-text">Transition Name</span></div>
+
+      <div id="outro-card">
+        <div class="category">End of 3D Transitions</div>
+      </div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      (function () {
+        var tl = gsap.timeline({ paused: true });
+        var t = 0;
+
+        function resetScenes() {
+          tl.set(
+            "#scene1",
+            {
+              opacity: 1,
+              x: 0,
+              y: 0,
+              scale: 1,
+              scaleX: 1,
+              rotation: 0,
+              rotationY: 0,
+              filter: "none",
+              clipPath: "none",
+              zIndex: 1,
+              skewX: 0,
+            },
+            t,
+          );
+          tl.set(
+            "#scene2",
+            {
+              opacity: 0,
+              x: 0,
+              y: 0,
+              scale: 1,
+              scaleX: 1,
+              rotation: 0,
+              rotationY: 0,
+              filter: "none",
+              clipPath: "none",
+              zIndex: 2,
+              skewX: 0,
+            },
+            t,
+          );
+          tl.set(
+            "#s1",
+            {
+              opacity: 1,
+              x: 0,
+              y: 0,
+              scale: 1,
+              rotation: 0,
+              rotationY: 0,
+              filter: "none",
+              skewX: 0,
+              clipPath: "none",
+            },
+            t,
+          );
+          tl.set(
+            "#s2",
+            {
+              opacity: 1,
+              x: 0,
+              y: 0,
+              scale: 1,
+              rotation: 0,
+              rotationY: 0,
+              filter: "none",
+              skewX: 0,
+              clipPath: "none",
+            },
+            t,
+          );
+        }
+
+        /* ── Title card (3s) ── */
+        tl.set("#title-card", { opacity: 1 }, 0);
+        tl.to("#title-card", { opacity: 0, duration: 0.5 }, 2.5);
+        t = 3;
+
+        /* ── Demo 1: 3D Card Flip ── */
+        resetScenes();
+        tl.set("#info-text", { textContent: "3D Card Flip" }, t);
+        tl.to("#info-bar", { opacity: 1, duration: 0.3 }, t);
+        t += 1.5;
+        var T = t;
+        tl.set("#scene2", { opacity: 1 }, T);
+        tl.set("#s2", { rotationY: -180 }, T);
+        tl.to("#s1", { rotationY: 180, duration: 0.6, ease: "power2.inOut" }, T);
+        tl.to("#s2", { rotationY: 0, duration: 0.6, ease: "power2.inOut" }, T);
+        tl.set("#scene1", { opacity: 0 }, T + 0.65);
+        t = T + 1.5;
+        tl.to("#info-bar", { opacity: 0, duration: 0.3 }, t);
+        t += 0.5;
+
+        /* ── Outro (3s) ── */
+        tl.set("#outro-card", { opacity: 1 }, t);
+        tl.to("#outro-card", { opacity: 0, duration: 0.5 }, t + 2.5);
+
+        window.__timelines["main"] = tl;
+      })();
+    </script>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="transitions-3d" data-composition-src="compositions/transitions-3d.html" data-start="0" data-duration="11" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/transitions-blur.mdx b/docs/catalog/blocks/transitions-blur.mdx
index 7da3aa55ab..213495c9fb 100644
--- a/docs/catalog/blocks/transitions-blur.mdx
+++ b/docs/catalog/blocks/transitions-blur.mdx
@@ -3,34 +3,419 @@ title: "Blur Transitions"
 description: "Showcase of blur-based transitions between scenes"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-blur.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-blur.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/transitions-blur.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Blur Transitions preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add transitions-blur
-```
+<InstallCommand command="npx hyperframes add transitions-blur" />
 
 That writes one file: `compositions/transitions-blur.html`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`transitions-blur.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+      }
+      .scene {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      .scene-inner {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+      }
+      .info-bar {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        z-index: 100;
+        background: rgba(0, 0, 0, 0.88);
+        padding: 24px 60px;
+        display: flex;
+        align-items: center;
+        gap: 40px;
+        opacity: 0;
+      }
+      .info-num {
+        font-size: 14px;
+        font-weight: 700;
+        color: #e07a5f;
+        letter-spacing: 0.1em;
+      }
+      .info-name {
+        font-size: 20px;
+        font-weight: 700;
+        color: #fff;
+      }
+      .info-desc {
+        font-size: 14px;
+        color: rgba(255, 255, 255, 0.5);
+      }
+      #title-card {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        background: #0d1b2a;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        z-index: 50;
+      }
+      #outro-card {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        background: #0d1b2a;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        z-index: 50;
+        opacity: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      data-composition-id="main"
+      data-start="0"
+      data-duration="20"
+      data-width="1920"
+      data-height="1080"
+    >
+      <!-- Title Card -->
+      <div id="title-card">
+        <div
+          id="title-label"
+          style="
+            font-size: 14px;
+            font-weight: 700;
+            color: #e07a5f;
+            letter-spacing: 0.2em;
+            text-transform: uppercase;
+            opacity: 0;
+          "
+        >
+          TRANSITION CATALOG
+        </div>
+        <div
+          id="title-main"
+          style="font-size: 72px; font-weight: 900; color: #fff; margin-top: 16px; opacity: 0"
+        >
+          Blur Transitions
+        </div>
+        <div
+          id="title-count"
+          style="
+            font-size: 24px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.4);
+            margin-top: 12px;
+            opacity: 0;
+          "
+        >
+          3 transitions
+        </div>
+      </div>
+
+      <!-- Scene A -->
+      <div id="scene1" class="scene" style="z-index: 1">
+        <div class="scene-inner" id="s1" style="background: #1b263b">
+          <div style="font-size: 200px; font-weight: 900; color: rgba(255, 255, 255, 0.08)">
+            ONE
+          </div>
+          <div
+            style="
+              font-size: 32px;
+              font-weight: 700;
+              color: #778da9;
+              letter-spacing: 0.15em;
+              margin-top: -20px;
+            "
+          >
+            SCENE A
+          </div>
+        </div>
+      </div>
+
+      <!-- Scene B -->
+      <div id="scene2" class="scene" style="z-index: 2; opacity: 0">
+        <div class="scene-inner" id="s2" style="background: #e07a5f">
+          <div style="font-size: 200px; font-weight: 900; color: rgba(255, 255, 255, 0.15)">
+            TWO
+          </div>
+          <div
+            style="
+              font-size: 32px;
+              font-weight: 700;
+              color: #fff;
+              letter-spacing: 0.15em;
+              margin-top: -20px;
+            "
+          >
+            SCENE B
+          </div>
+        </div>
+      </div>
+
+      <!-- Info Bars -->
+      <div id="info-1" class="info-bar">
+        <div class="info-num">01</div>
+        <div class="info-name">Blur Through</div>
+        <div class="info-desc">Use a blur through transition</div>
+      </div>
+      <div id="info-2" class="info-bar">
+        <div class="info-num">02</div>
+        <div class="info-name">Directional Blur</div>
+        <div class="info-desc">Use a directional blur transition with motion skew</div>
+      </div>
+      <div id="info-3" class="info-bar">
+        <div class="info-num">03</div>
+        <div class="info-name">Calm Blur Through</div>
+        <div class="info-desc">Use a slow calm blur through transition</div>
+      </div>
+
+      <!-- Outro Card -->
+      <div id="outro-card">
+        <div
+          id="outro-label"
+          style="
+            font-size: 14px;
+            font-weight: 700;
+            color: #e07a5f;
+            letter-spacing: 0.2em;
+            text-transform: uppercase;
+            opacity: 0;
+          "
+        >
+          BLUR TRANSITIONS
+        </div>
+        <div
+          id="outro-main"
+          style="font-size: 56px; font-weight: 900; color: #fff; margin-top: 16px; opacity: 0"
+        >
+          3 Transitions
+        </div>
+      </div>
+    </div>
+
+    <script>
+      (function () {
+        var tl = gsap.timeline({ paused: true });
+        var t = 0;
 
-It runs for 20 seconds at 1920×1080. Paste this into your composition:
+        // === TITLE CARD (3s) ===
+        tl.to("#title-label", { opacity: 1, y: 0, duration: 0.4, ease: "power2.out" }, t + 0.3);
+        tl.fromTo(
+          "#title-main",
+          { opacity: 0, y: 20 },
+          { opacity: 1, y: 0, duration: 0.5, ease: "power2.out" },
+          t + 0.6,
+        );
+        tl.fromTo(
+          "#title-count",
+          { opacity: 0 },
+          { opacity: 1, duration: 0.4, ease: "power2.out" },
+          t + 1.0,
+        );
+        tl.to("#title-card", { opacity: 0, duration: 0.4, ease: "power2.inOut" }, t + 2.4);
+        t += 3;
 
-```html index.html
-<div
-  data-composition-id="transitions-blur"
-  data-composition-src="compositions/transitions-blur.html"
-  data-start="0"
-  data-duration="20"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+        function resetScenes() {
+          tl.set(
+            "#scene1",
+            {
+              opacity: 1,
+              x: 0,
+              y: 0,
+              scale: 1,
+              scaleX: 1,
+              rotation: 0,
+              filter: "none",
+              clipPath: "none",
+              zIndex: 1,
+              skewX: 0,
+            },
+            t,
+          );
+          tl.set(
+            "#scene2",
+            {
+              opacity: 0,
+              x: 0,
+              y: 0,
+              scale: 1,
+              scaleX: 1,
+              rotation: 0,
+              filter: "none",
+              clipPath: "none",
+              zIndex: 2,
+              skewX: 0,
+            },
+            t,
+          );
+          tl.set(
+            "#s1",
+            {
+              opacity: 1,
+              x: 0,
+              y: 0,
+              scale: 1,
+              rotation: 0,
+              filter: "none",
+              skewX: 0,
+              scaleX: 1,
+              transformOrigin: "50% 50%",
+            },
+            t,
+          );
+          tl.set(
+            "#s2",
+            {
+              opacity: 1,
+              x: 0,
+              y: 0,
+              scale: 1,
+              rotation: 0,
+              filter: "none",
+              skewX: 0,
+              scaleX: 1,
+              transformOrigin: "50% 50%",
+            },
+            t,
+          );
+        }
+
+        // === TRANSITION 1: Blur Through ===
+        resetScenes();
+        tl.to("#info-1", { opacity: 1, duration: 0.3 }, t + 0.2);
+        var T = t + 1.5;
+        tl.to(
+          "#s1",
+          { filter: "blur(15px)", scale: 1.05, opacity: 0, duration: 0.4, ease: "power2.in" },
+          T,
+        );
+        tl.set("#scene2", { opacity: 1 }, T);
+        tl.fromTo(
+          "#s2",
+          { filter: "blur(15px)", scale: 0.95, opacity: 0 },
+          { filter: "blur(0px)", scale: 1, opacity: 1, duration: 0.4, ease: "power2.out" },
+          T + 0.2,
+        );
+        t = T + 1.5 + 1.0;
+        tl.to("#info-1", { opacity: 0, duration: 0.2 }, t);
+        t += 0.5;
+
+        // === TRANSITION 2: Directional Blur ===
+        resetScenes();
+        tl.to("#info-2", { opacity: 1, duration: 0.3 }, t + 0.2);
+        T = t + 1.5;
+        tl.to(
+          "#s1",
+          {
+            filter: "blur(12px)",
+            skewX: -8,
+            x: -200,
+            opacity: 0,
+            duration: 0.4,
+            ease: "power3.in",
+          },
+          T,
+        );
+        tl.set("#scene2", { opacity: 1 }, T);
+        tl.fromTo(
+          "#s2",
+          { filter: "blur(12px)", skewX: 8, x: 200, opacity: 0 },
+          { filter: "blur(0px)", skewX: 0, x: 0, opacity: 1, duration: 0.4, ease: "power3.out" },
+          T + 0.15,
+        );
+        t = T + 1.5 + 1.0;
+        tl.to("#info-2", { opacity: 0, duration: 0.2 }, t);
+        t += 0.5;
+
+        // === TRANSITION 3: Calm Blur Through ===
+        resetScenes();
+        tl.to("#info-3", { opacity: 1, duration: 0.3 }, t + 0.2);
+        T = t + 1.5;
+        tl.to("#s1", { filter: "blur(30px)", scale: 1.08, duration: 0.5, ease: "power1.in" }, T);
+        tl.to("#s1", { opacity: 0, duration: 0.3, ease: "power1.in" }, T + 0.3);
+        tl.set("#scene2", { opacity: 1 }, T + 0.3);
+        tl.fromTo(
+          "#s2",
+          { filter: "blur(30px)", scale: 0.92, opacity: 0 },
+          { filter: "blur(30px)", scale: 0.92, opacity: 1, duration: 0.2, ease: "none" },
+          T + 0.5,
+        );
+        tl.to("#s2", { filter: "blur(0px)", scale: 1, duration: 0.7, ease: "power1.out" }, T + 0.7);
+        t = T + 1.5 + 1.0;
+        tl.to("#info-3", { opacity: 0, duration: 0.2 }, t);
+        t += 0.5;
+
+        // === OUTRO (3s) ===
+        tl.set("#scene1", { opacity: 0 }, t);
+        tl.set("#scene2", { opacity: 0 }, t);
+        tl.to("#outro-card", { opacity: 1, duration: 0.4, ease: "power2.inOut" }, t);
+        tl.to("#outro-label", { opacity: 1, duration: 0.4, ease: "power2.out" }, t + 0.3);
+        tl.fromTo(
+          "#outro-main",
+          { opacity: 0, y: 20 },
+          { opacity: 1, y: 0, duration: 0.5, ease: "power2.out" },
+          t + 0.6,
+        );
+        tl.to("#outro-card", { opacity: 0, duration: 0.4, ease: "power2.inOut" }, t + 2.4);
+
+        window.__timelines = window.__timelines || {};
+        window.__timelines["main"] = tl;
+      })();
+    </script>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="transitions-blur" data-composition-src="compositions/transitions-blur.html" data-start="0" data-duration="20" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/transitions-cover.mdx b/docs/catalog/blocks/transitions-cover.mdx
index 81055e9d43..40b9dbfc39 100644
--- a/docs/catalog/blocks/transitions-cover.mdx
+++ b/docs/catalog/blocks/transitions-cover.mdx
@@ -3,34 +3,417 @@ title: "Cover Transitions"
 description: "Showcase of cover/uncover slide transitions"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-cover.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-cover.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/transitions-cover.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Cover Transitions preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add transitions-cover
-```
+<InstallCommand command="npx hyperframes add transitions-cover" />
 
 That writes one file: `compositions/transitions-cover.html`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`transitions-cover.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cover Transitions Showcase</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #000;
+        overflow: hidden;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+      }
+
+      /* Title Card */
+      #title-card {
+        position: absolute;
+        inset: 0;
+        z-index: 10;
+        background: linear-gradient(135deg, #0d1b2a 0%, #1b263b 100%);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        opacity: 1;
+      }
+      #title-card h1 {
+        font-size: 72px;
+        font-weight: 800;
+        color: #fff;
+        letter-spacing: -1px;
+        opacity: 0;
+        transform: translateY(30px);
+      }
+      #title-card .subtitle {
+        font-size: 28px;
+        font-weight: 400;
+        color: rgba(255, 255, 255, 0.5);
+        margin-top: 12px;
+        opacity: 0;
+        transform: translateY(20px);
+      }
+
+      /* Scenes */
+      #scene1,
+      #scene2 {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+      }
+      #scene1 {
+        background: #1b263b;
+        z-index: 2;
+        opacity: 0;
+      }
+      #scene2 {
+        background: #e07a5f;
+        z-index: 1;
+        opacity: 0;
+      }
+
+      .scene-number {
+        font-size: 180px;
+        font-weight: 900;
+        line-height: 1;
+        opacity: 0.12;
+        letter-spacing: -6px;
+      }
+      #scene1 .scene-number {
+        color: #fff;
+      }
+      #scene2 .scene-number {
+        color: #000;
+      }
+
+      .scene-label {
+        font-size: 48px;
+        font-weight: 700;
+        margin-top: -20px;
+      }
+      #scene1 .scene-label {
+        color: #fff;
+      }
+      #scene2 .scene-label {
+        color: #fff;
+      }
+
+      /* Info bar */
+      .info-bar {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 80px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 48px;
+      }
+      #scene1 .info-bar {
+        background: rgba(0, 0, 0, 0.3);
+      }
+      #scene2 .info-bar {
+        background: rgba(0, 0, 0, 0.2);
+      }
+      .info-bar .label {
+        font-size: 18px;
+        font-weight: 600;
+        color: rgba(255, 255, 255, 0.7);
+        text-transform: uppercase;
+        letter-spacing: 2px;
+      }
+      .info-bar .desc {
+        font-size: 16px;
+        color: rgba(255, 255, 255, 0.5);
+        font-style: italic;
+      }
+
+      /* Outro */
+      #outro {
+        position: absolute;
+        inset: 0;
+        z-index: 10;
+        background: linear-gradient(135deg, #0d1b2a 0%, #1b263b 100%);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        opacity: 0;
+      }
+      #outro h2 {
+        font-size: 56px;
+        font-weight: 800;
+        color: #fff;
+        opacity: 0;
+        transform: translateY(20px);
+      }
+      #outro .tag {
+        font-size: 22px;
+        color: rgba(255, 255, 255, 0.4);
+        margin-top: 10px;
+        opacity: 0;
+        transform: translateY(15px);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="comp"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="21"
+      data-width="1920"
+      data-height="1080"
+      style="position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #000"
+    >
+      <!-- Title Card -->
+      <div id="title-card">
+        <h1 id="title-h1">Cover Transitions</h1>
+        <div class="subtitle" id="title-sub">3 transition styles</div>
+      </div>
+
+      <!-- Scene A -->
+      <div id="scene1">
+        <div class="scene-number">ONE</div>
+        <div class="scene-label">SCENE A</div>
+        <div class="info-bar">
+          <span class="label" id="info-label-a"></span>
+          <span class="desc" id="info-desc-a"></span>
+        </div>
+      </div>
+
+      <!-- Scene B -->
+      <div id="scene2">
+        <div class="scene-number">TWO</div>
+        <div class="scene-label">SCENE B</div>
+        <div class="info-bar">
+          <span class="label" id="info-label-b"></span>
+          <span class="desc" id="info-desc-b"></span>
+        </div>
+      </div>
+
+      <!-- Staggered Blocks Wipes -->
+      <div
+        id="wipe-a"
+        style="
+          position: absolute;
+          inset: 0;
+          background: #f72585;
+          z-index: 50;
+          transform: translateX(-1920px);
+        "
+      ></div>
+      <div
+        id="wipe-b"
+        style="
+          position: absolute;
+          inset: 0;
+          background: #7209b7;
+          z-index: 49;
+          transform: translateX(-1920px);
+        "
+      ></div>
+
+      <!-- Horizontal Blinds Container -->
+      <div
+        id="blinds-container"
+        style="position: absolute; inset: 0; z-index: 50; pointer-events: none"
+      ></div>
 
-It runs for 21 seconds at 1920×1080. Paste this into your composition:
+      <!-- Vertical Blinds Container -->
+      <div
+        id="vblinds-container"
+        style="position: absolute; inset: 0; z-index: 50; pointer-events: none"
+      ></div>
 
-```html index.html
-<div
-  data-composition-id="transitions-cover"
-  data-composition-src="compositions/transitions-cover.html"
-  data-start="0"
-  data-duration="21"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+      <!-- Outro -->
+      <div id="outro">
+        <h2 id="outro-h2">Cover Transitions</h2>
+        <div class="tag" id="outro-tag">End of showcase</div>
+      </div>
+    </div>
+
+    <script>
+      (function () {
+        // Generate horizontal blind strips
+        var blindsHTML = "";
+        for (var i = 0; i < 8; i++) {
+          blindsHTML +=
+            '<div id="blind-' +
+            i +
+            '" style="position:absolute; left:0; width:1920px; height:135px; top:' +
+            i * 135 +
+            "px; background:" +
+            [
+              "#3A0CA3",
+              "#4361EE",
+              "#4CC9F0",
+              "#F72585",
+              "#3A0CA3",
+              "#4361EE",
+              "#4CC9F0",
+              "#F72585",
+            ][i] +
+            '; transform:translateX(-1920px);"></div>';
+        }
+        document.getElementById("blinds-container").innerHTML = blindsHTML;
+
+        // Generate vertical blind strips
+        var vblindsHTML = "";
+        for (var i = 0; i < 8; i++) {
+          vblindsHTML +=
+            '<div id="vblind-' +
+            i +
+            '" style="position:absolute; top:0; height:1080px; width:240px; left:' +
+            i * 240 +
+            "px; background:" +
+            [
+              "#3A0CA3",
+              "#4361EE",
+              "#4CC9F0",
+              "#F72585",
+              "#3A0CA3",
+              "#4361EE",
+              "#4CC9F0",
+              "#F72585",
+            ][i] +
+            '; transform:translateY(-1080px);"></div>';
+        }
+        document.getElementById("vblinds-container").innerHTML = vblindsHTML;
+
+        var tl = gsap.timeline({ paused: false });
+        window.__timelines = window.__timelines || {};
+        window.__timelines["main"] = tl;
+
+        // Transition demos config
+        var demos = [
+          { label: "STAGGERED BLOCKS", desc: "Use a staggered color blocks transition" },
+          { label: "HORIZONTAL BLINDS", desc: "Use a horizontal blinds transition" },
+          { label: "VERTICAL BLINDS", desc: "Use a vertical blinds transition" },
+        ];
+
+        // Reset scenes helper
+        function resetScenes(t, demoIndex) {
+          tl.set("#scene1", { opacity: 1 }, t);
+          tl.set("#scene2", { opacity: 0 }, t);
+          tl.set("#info-label-a", { textContent: demos[demoIndex].label }, t);
+          tl.set("#info-desc-a", { textContent: demos[demoIndex].desc }, t);
+          tl.set("#info-label-b", { textContent: demos[demoIndex].label }, t);
+          tl.set("#info-desc-b", { textContent: demos[demoIndex].desc }, t);
+          // Reset wipes
+          tl.set("#wipe-a", { x: -1920 }, t);
+          tl.set("#wipe-b", { x: -1920 }, t);
+          // Reset horizontal blinds
+          for (var i = 0; i < 8; i++) {
+            tl.set("#blind-" + i, { x: -1920 }, t);
+          }
+          // Reset vertical blinds
+          for (var i = 0; i < 8; i++) {
+            tl.set("#vblind-" + i, { y: -1080 }, t);
+          }
+        }
+
+        // ===== TITLE CARD (0s - 3s) =====
+        tl.to("#title-h1", { opacity: 1, y: 0, duration: 0.6, ease: "power2.out" }, 0.3);
+        tl.to("#title-sub", { opacity: 1, y: 0, duration: 0.5, ease: "power2.out" }, 0.6);
+        tl.to("#title-card", { opacity: 0, duration: 0.4, ease: "power1.inOut" }, 2.5);
+
+        // ===== DEMO 1: STAGGERED BLOCKS (3s - 8s) =====
+        var T1 = 3;
+        resetScenes(T1, 0);
+        // Show Scene A for a beat, then transition at midpoint
+        var T = T1 + 2;
+        tl.set("#wipe-a", { x: -1920 }, T - 0.01);
+        tl.set("#wipe-b", { x: -1920 }, T - 0.01);
+        tl.to("#wipe-a", { x: 0, duration: 0.25, ease: "power3.inOut" }, T);
+        tl.to("#wipe-b", { x: 0, duration: 0.25, ease: "power3.inOut" }, T + 0.06);
+        tl.set("#scene1", { opacity: 0 }, T + 0.2);
+        tl.set("#scene2", { opacity: 1 }, T + 0.2);
+        tl.to("#wipe-a", { x: 1920, duration: 0.25, ease: "power3.inOut" }, T + 0.28);
+        tl.to("#wipe-b", { x: 1920, duration: 0.25, ease: "power3.inOut" }, T + 0.34);
+
+        // ===== DEMO 2: HORIZONTAL BLINDS (8s - 13s) =====
+        var T2 = 8;
+        resetScenes(T2, 1);
+        T = T2 + 2;
+        var stagger = 0.03;
+        for (var i = 0; i < 8; i++) {
+          tl.fromTo(
+            "#blind-" + i,
+            { x: -1920 },
+            { x: 0, duration: 0.2, ease: "power3.inOut" },
+            T + i * stagger,
+          );
+        }
+        tl.set("#scene1", { opacity: 0 }, T + 0.5);
+        tl.set("#scene2", { opacity: 1 }, T + 0.5);
+        for (var i = 0; i < 8; i++) {
+          tl.to(
+            "#blind-" + i,
+            { x: 1920, duration: 0.2, ease: "power3.inOut" },
+            T + 0.55 + i * stagger,
+          );
+        }
+
+        // ===== DEMO 3: VERTICAL BLINDS (13s - 18s) =====
+        var T3 = 13;
+        resetScenes(T3, 2);
+        T = T3 + 2;
+        for (var i = 0; i < 8; i++) {
+          tl.fromTo(
+            "#vblind-" + i,
+            { y: -1080 },
+            { y: 0, duration: 0.2, ease: "power3.inOut" },
+            T + i * 0.03,
+          );
+        }
+        tl.set("#scene1", { opacity: 0 }, T + 0.5);
+        tl.set("#scene2", { opacity: 1 }, T + 0.5);
+        for (var i = 0; i < 8; i++) {
+          tl.to(
+            "#vblind-" + i,
+            { y: 1080, duration: 0.2, ease: "power3.inOut" },
+            T + 0.55 + i * 0.03,
+          );
+        }
+
+        // ===== OUTRO (18s - 21s) =====
+        tl.to("#scene1", { opacity: 0, duration: 0.3 }, 18);
+        tl.to("#scene2", { opacity: 0, duration: 0.3 }, 18);
+        tl.to("#outro", { opacity: 1, duration: 0.4, ease: "power1.inOut" }, 18.2);
+        tl.to("#outro-h2", { opacity: 1, y: 0, duration: 0.5, ease: "power2.out" }, 18.5);
+        tl.to("#outro-tag", { opacity: 1, y: 0, duration: 0.4, ease: "power2.out" }, 18.8);
+      })();
+    </script>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="transitions-cover" data-composition-src="compositions/transitions-cover.html" data-start="0" data-duration="21" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/transitions-destruction.mdx b/docs/catalog/blocks/transitions-destruction.mdx
index 1834f8a1b5..d011e1eb68 100644
--- a/docs/catalog/blocks/transitions-destruction.mdx
+++ b/docs/catalog/blocks/transitions-destruction.mdx
@@ -3,34 +3,446 @@ title: "Destruction Transitions"
 description: "Showcase of destructive break-apart transitions"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-destruction.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-destruction.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/transitions-destruction.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Destruction Transitions preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add transitions-destruction
-```
+<InstallCommand command="npx hyperframes add transitions-destruction" />
 
 That writes one file: `compositions/transitions-destruction.html`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`transitions-destruction.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+      }
+      .scene {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      .scene-inner {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+      }
+      .info-bar {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        z-index: 100;
+        background: rgba(0, 0, 0, 0.88);
+        padding: 24px 60px;
+        display: flex;
+        align-items: center;
+        gap: 40px;
+        opacity: 0;
+      }
+      .info-num {
+        font-size: 14px;
+        font-weight: 700;
+        color: #e07a5f;
+        letter-spacing: 0.1em;
+      }
+      .info-name {
+        font-size: 20px;
+        font-weight: 700;
+        color: #fff;
+      }
+      .info-desc {
+        font-size: 14px;
+        color: rgba(255, 255, 255, 0.5);
+      }
+      #title-card {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        background: #0d1b2a;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        z-index: 50;
+      }
+      #outro-card {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        background: #0d1b2a;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        z-index: 50;
+        opacity: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      data-composition-id="main"
+      data-start="0"
+      data-duration="14"
+      data-width="1920"
+      data-height="1080"
+    >
+      <!-- Title Card -->
+      <div id="title-card">
+        <div
+          id="title-label"
+          style="
+            font-size: 14px;
+            font-weight: 700;
+            color: #e07a5f;
+            letter-spacing: 0.2em;
+            text-transform: uppercase;
+            opacity: 0;
+          "
+        >
+          TRANSITION CATALOG
+        </div>
+        <div
+          id="title-main"
+          style="font-size: 72px; font-weight: 900; color: #fff; margin-top: 16px; opacity: 0"
+        >
+          Destruction Transitions
+        </div>
+        <div
+          id="title-count"
+          style="
+            font-size: 24px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.4);
+            margin-top: 12px;
+            opacity: 0;
+          "
+        >
+          1 transition
+        </div>
+      </div>
+
+      <!-- Scene A -->
+      <div id="scene1" class="scene" style="z-index: 1">
+        <div class="scene-inner" id="s1" style="background: #1b263b">
+          <div style="font-size: 200px; font-weight: 900; color: rgba(255, 255, 255, 0.08)">
+            ONE
+          </div>
+          <div
+            style="
+              font-size: 32px;
+              font-weight: 700;
+              color: #778da9;
+              letter-spacing: 0.15em;
+              margin-top: -20px;
+            "
+          >
+            SCENE A
+          </div>
+        </div>
+      </div>
+
+      <!-- Scene B -->
+      <div id="scene2" class="scene" style="z-index: 2; opacity: 0">
+        <div class="scene-inner" id="s2" style="background: #e07a5f">
+          <div style="font-size: 200px; font-weight: 900; color: rgba(255, 255, 255, 0.15)">
+            TWO
+          </div>
+          <div
+            style="
+              font-size: 32px;
+              font-weight: 700;
+              color: #fff;
+              letter-spacing: 0.15em;
+              margin-top: -20px;
+            "
+          >
+            SCENE B
+          </div>
+        </div>
+      </div>
+
+      <!-- Burn Canvas -->
+      <canvas
+        id="burn-canvas"
+        width="1920"
+        height="1080"
+        style="position: absolute; inset: 0; z-index: 40; pointer-events: none"
+      ></canvas>
+
+      <!-- Info Bar -->
+      <div id="info-1" class="info-bar">
+        <div class="info-num">01</div>
+        <div class="info-name">Page Burn</div>
+        <div class="info-desc">Use a page burn destruction transition</div>
+      </div>
+
+      <!-- Outro Card -->
+      <div id="outro-card">
+        <div
+          id="outro-label"
+          style="
+            font-size: 14px;
+            font-weight: 700;
+            color: #e07a5f;
+            letter-spacing: 0.2em;
+            text-transform: uppercase;
+            opacity: 0;
+          "
+        >
+          DESTRUCTION TRANSITIONS
+        </div>
+        <div
+          id="outro-main"
+          style="font-size: 56px; font-weight: 900; color: #fff; margin-top: 16px; opacity: 0"
+        >
+          1 Transition
+        </div>
+      </div>
+    </div>
+
+    <script>
+      (function () {
+        var tl = gsap.timeline({ paused: true });
+        var t = 0;
+
+        // === TITLE CARD (3s) ===
+        tl.to("#title-label", { opacity: 1, y: 0, duration: 0.4, ease: "power2.out" }, t + 0.3);
+        tl.fromTo(
+          "#title-main",
+          { opacity: 0, y: 20 },
+          { opacity: 1, y: 0, duration: 0.5, ease: "power2.out" },
+          t + 0.6,
+        );
+        tl.fromTo(
+          "#title-count",
+          { opacity: 0 },
+          { opacity: 1, duration: 0.4, ease: "power2.out" },
+          t + 1.0,
+        );
+        tl.to("#title-card", { opacity: 0, duration: 0.4, ease: "power2.inOut" }, t + 2.4);
+        t += 3;
+
+        // === TRANSITION 1: Page Burn (8s total: 2s build, 3s burn, 3s settle) ===
+        tl.set(
+          "#scene1",
+          {
+            opacity: 1,
+            x: 0,
+            y: 0,
+            scale: 1,
+            rotation: 0,
+            filter: "none",
+            clipPath: "none",
+            zIndex: 1,
+          },
+          t,
+        );
+        tl.set(
+          "#scene2",
+          {
+            opacity: 0,
+            x: 0,
+            y: 0,
+            scale: 1,
+            rotation: 0,
+            filter: "none",
+            clipPath: "none",
+            zIndex: 2,
+          },
+          t,
+        );
+        tl.set("#s1", { opacity: 1, x: 0, y: 0, scale: 1, rotation: 0, filter: "none" }, t);
+        tl.set("#s2", { opacity: 1, x: 0, y: 0, scale: 1, rotation: 0, filter: "none" }, t);
+
+        // Show info bar
+        tl.to("#info-1", { opacity: 1, duration: 0.3 }, t + 0.2);
+
+        // Burn transition starts at t+2
+        var T = t + 2;
+
+        var burnCanvas = document.getElementById("burn-canvas");
+        var burnCtx = burnCanvas.getContext("2d");
+        var burnState = { progress: 0 };
 
-It runs for 14 seconds at 1920×1080. Paste this into your composition:
+        function noise(x) {
+          var ix = Math.floor(x),
+            fx = x - ix;
+          var a = Math.sin(ix * 127.1 + 311.7) * 43758.5453;
+          var b = Math.sin((ix + 1) * 127.1 + 311.7) * 43758.5453;
+          var t2 = fx * fx * (3 - 2 * fx);
+          return a - Math.floor(a) + (b - Math.floor(b) - (a - Math.floor(a))) * t2;
+        }
 
-```html index.html
-<div
-  data-composition-id="transitions-destruction"
-  data-composition-src="compositions/transitions-destruction.html"
-  data-start="0"
-  data-duration="14"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+        function drawBurn(progress) {
+          burnCtx.clearRect(0, 0, 1920, 1080);
+          if (progress <= 0 || progress >= 1) return;
+
+          var maxR = 1400;
+          var cx = 960,
+            cy = 540;
+
+          // Draw fire edge glow
+          burnCtx.beginPath();
+          var steps = 60;
+          for (var i = 0; i <= steps; i++) {
+            var angle = (i / steps) * Math.PI * 2;
+            var baseR = progress * maxR;
+            var r =
+              baseR + noise(angle * 3 + progress * 4) * 80 + noise(angle * 8 + progress * 9) * 30;
+            var px = cx + Math.cos(angle) * r;
+            var py = cy + Math.sin(angle) * r;
+            if (i === 0) burnCtx.moveTo(px, py);
+            else burnCtx.lineTo(px, py);
+          }
+          burnCtx.closePath();
+
+          // Orange/red edge glow
+          var grad = burnCtx.createRadialGradient(
+            cx,
+            cy,
+            progress * maxR * 0.8,
+            cx,
+            cy,
+            progress * maxR * 1.1,
+          );
+          grad.addColorStop(0, "rgba(0,0,0,0)");
+          grad.addColorStop(0.7, "rgba(255,100,0,0.6)");
+          grad.addColorStop(0.9, "rgba(255,50,0,0.8)");
+          grad.addColorStop(1, "rgba(200,30,0,0.4)");
+          burnCtx.fillStyle = grad;
+          burnCtx.fill();
+
+          // Inner ember particles
+          var particleCount = Math.floor(progress * 40);
+          for (var p = 0; p < particleCount; p++) {
+            var pAngle = noise(p * 0.7 + progress * 2) * Math.PI * 2;
+            var pDist = progress * maxR * (0.85 + noise(p * 1.3 + progress * 5) * 0.15);
+            var ex = cx + Math.cos(pAngle) * pDist;
+            var ey = cy + Math.sin(pAngle) * pDist;
+            var pSize = 2 + noise(p * 2.1) * 4;
+            burnCtx.beginPath();
+            burnCtx.arc(ex, ey, pSize, 0, Math.PI * 2);
+            burnCtx.fillStyle =
+              "rgba(255," +
+              Math.floor(80 + noise(p * 3) * 120) +
+              ",0," +
+              (0.4 + noise(p * 1.7) * 0.4) +
+              ")";
+            burnCtx.fill();
+          }
+        }
+
+        // Animate burn progress over 3 seconds
+        tl.to(
+          burnState,
+          {
+            progress: 1,
+            duration: 3.0,
+            ease: "power1.in",
+            onUpdate: function () {
+              var p = burnState.progress;
+              drawBurn(p);
+              var scene1El = document.getElementById("scene1");
+              if (p <= 0) {
+                scene1El.style.clipPath = "none";
+              } else if (p < 1) {
+                // Shrink scene1 with circular clip from center
+                var radius = Math.max(0, 75 - p * 80);
+                scene1El.style.clipPath = "circle(" + radius + "% at 50% 50%)";
+              } else {
+                scene1El.style.clipPath = "circle(0% at 50% 50%)";
+              }
+            },
+          },
+          T,
+        );
+
+        // Scene 2 fades in from behind as burn progresses
+        tl.set("#scene2", { opacity: 1 }, T + 0.5);
+        tl.fromTo(
+          "#s2",
+          { opacity: 0 },
+          { opacity: 1, duration: 2.0, ease: "power1.out" },
+          T + 0.5,
+        );
+
+        // Clean up after burn completes
+        tl.set("#scene1", { opacity: 0, clipPath: "none" }, T + 3.0);
+        tl.call(
+          function () {
+            burnCtx.clearRect(0, 0, 1920, 1080);
+          },
+          null,
+          T + 3.0,
+        );
+
+        // Settle time (hold scene B)
+        t = T + 3.0 + 2.0;
+        tl.to("#info-1", { opacity: 0, duration: 0.2 }, t);
+        t += 0.5;
+
+        // === OUTRO (3s) ===
+        tl.set("#scene1", { opacity: 0 }, t);
+        tl.set("#scene2", { opacity: 0 }, t);
+        tl.to("#outro-card", { opacity: 1, duration: 0.4, ease: "power2.inOut" }, t);
+        tl.to("#outro-label", { opacity: 1, duration: 0.4, ease: "power2.out" }, t + 0.3);
+        tl.fromTo(
+          "#outro-main",
+          { opacity: 0, y: 20 },
+          { opacity: 1, y: 0, duration: 0.5, ease: "power2.out" },
+          t + 0.6,
+        );
+        tl.to("#outro-card", { opacity: 0, duration: 0.4, ease: "power2.inOut" }, t + 2.4);
+
+        window.__timelines = window.__timelines || {};
+        window.__timelines["main"] = tl;
+      })();
+    </script>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="transitions-destruction" data-composition-src="compositions/transitions-destruction.html" data-start="0" data-duration="14" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/transitions-dissolve.mdx b/docs/catalog/blocks/transitions-dissolve.mdx
index 4d44438410..373cc0675c 100644
--- a/docs/catalog/blocks/transitions-dissolve.mdx
+++ b/docs/catalog/blocks/transitions-dissolve.mdx
@@ -3,34 +3,423 @@ title: "Dissolve Transitions"
 description: "Showcase of dissolve and fade transitions"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-dissolve.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-dissolve.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/transitions-dissolve.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Dissolve Transitions preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add transitions-dissolve
-```
+<InstallCommand command="npx hyperframes add transitions-dissolve" />
 
 That writes one file: `compositions/transitions-dissolve.html`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`transitions-dissolve.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+      }
+      .scene {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      .scene-inner {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+      }
+      .info-bar {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        z-index: 100;
+        background: rgba(0, 0, 0, 0.88);
+        padding: 24px 60px;
+        display: flex;
+        align-items: center;
+        gap: 40px;
+        opacity: 0;
+      }
+      .info-num {
+        font-size: 14px;
+        font-weight: 700;
+        color: #e07a5f;
+        letter-spacing: 0.1em;
+      }
+      .info-name {
+        font-size: 20px;
+        font-weight: 700;
+        color: #fff;
+      }
+      .info-desc {
+        font-size: 14px;
+        color: rgba(255, 255, 255, 0.5);
+      }
+      #title-card {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        background: #0d1b2a;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        z-index: 50;
+      }
+      #outro-card {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        background: #0d1b2a;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        z-index: 50;
+        opacity: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      data-composition-id="main"
+      data-start="0"
+      data-duration="24"
+      data-width="1920"
+      data-height="1080"
+    >
+      <!-- Title Card -->
+      <div id="title-card">
+        <div
+          id="title-label"
+          style="
+            font-size: 14px;
+            font-weight: 700;
+            color: #e07a5f;
+            letter-spacing: 0.2em;
+            text-transform: uppercase;
+            opacity: 0;
+          "
+        >
+          TRANSITION CATALOG
+        </div>
+        <div
+          id="title-main"
+          style="font-size: 72px; font-weight: 900; color: #fff; margin-top: 16px; opacity: 0"
+        >
+          Dissolve Transitions
+        </div>
+        <div
+          id="title-count"
+          style="
+            font-size: 24px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.4);
+            margin-top: 12px;
+            opacity: 0;
+          "
+        >
+          4 transitions
+        </div>
+      </div>
+
+      <!-- Scene A -->
+      <div id="scene1" class="scene" style="z-index: 1">
+        <div class="scene-inner" id="s1" style="background: #1b263b">
+          <div style="font-size: 200px; font-weight: 900; color: rgba(255, 255, 255, 0.08)">
+            ONE
+          </div>
+          <div
+            style="
+              font-size: 32px;
+              font-weight: 700;
+              color: #778da9;
+              letter-spacing: 0.15em;
+              margin-top: -20px;
+            "
+          >
+            SCENE A
+          </div>
+        </div>
+      </div>
+
+      <!-- Scene B -->
+      <div id="scene2" class="scene" style="z-index: 2; opacity: 0">
+        <div class="scene-inner" id="s2" style="background: #e07a5f">
+          <div style="font-size: 200px; font-weight: 900; color: rgba(255, 255, 255, 0.15)">
+            TWO
+          </div>
+          <div
+            style="
+              font-size: 32px;
+              font-weight: 700;
+              color: #fff;
+              letter-spacing: 0.15em;
+              margin-top: -20px;
+            "
+          >
+            SCENE B
+          </div>
+        </div>
+      </div>
+
+      <!-- Info Bars -->
+      <div id="info-1" class="info-bar">
+        <div class="info-num">01</div>
+        <div class="info-name">Crossfade</div>
+        <div class="info-desc">Use a crossfade transition</div>
+      </div>
+      <div id="info-2" class="info-bar">
+        <div class="info-num">02</div>
+        <div class="info-name">Blur Crossfade</div>
+        <div class="info-desc">Use a blur crossfade transition</div>
+      </div>
+      <div id="info-3" class="info-bar">
+        <div class="info-num">03</div>
+        <div class="info-name">Focus Pull</div>
+        <div class="info-desc">Use a focus pull transition</div>
+      </div>
+      <div id="info-4" class="info-bar">
+        <div class="info-num">04</div>
+        <div class="info-name">Color Dip</div>
+        <div class="info-desc">Use a color dip to black transition</div>
+      </div>
+
+      <!-- Outro Card -->
+      <div id="outro-card">
+        <div
+          id="outro-label"
+          style="
+            font-size: 14px;
+            font-weight: 700;
+            color: #e07a5f;
+            letter-spacing: 0.2em;
+            text-transform: uppercase;
+            opacity: 0;
+          "
+        >
+          DISSOLVE TRANSITIONS
+        </div>
+        <div
+          id="outro-main"
+          style="font-size: 56px; font-weight: 900; color: #fff; margin-top: 16px; opacity: 0"
+        >
+          4 Transitions
+        </div>
+      </div>
+    </div>
+
+    <script>
+      (function () {
+        var tl = gsap.timeline({ paused: true });
+        var t = 0;
+
+        // === TITLE CARD (3s) ===
+        tl.to("#title-label", { opacity: 1, y: 0, duration: 0.4, ease: "power2.out" }, t + 0.3);
+        tl.fromTo(
+          "#title-main",
+          { opacity: 0, y: 20 },
+          { opacity: 1, y: 0, duration: 0.5, ease: "power2.out" },
+          t + 0.6,
+        );
+        tl.fromTo(
+          "#title-count",
+          { opacity: 0 },
+          { opacity: 1, duration: 0.4, ease: "power2.out" },
+          t + 1.0,
+        );
+        tl.to("#title-card", { opacity: 0, duration: 0.4, ease: "power2.inOut" }, t + 2.4);
+        t += 3;
 
-It runs for 24 seconds at 1920×1080. Paste this into your composition:
+        function resetScenes() {
+          tl.set(
+            "#scene1",
+            {
+              opacity: 1,
+              x: 0,
+              y: 0,
+              scale: 1,
+              scaleX: 1,
+              rotation: 0,
+              filter: "none",
+              clipPath: "none",
+              zIndex: 1,
+              skewX: 0,
+            },
+            t,
+          );
+          tl.set(
+            "#scene2",
+            {
+              opacity: 0,
+              x: 0,
+              y: 0,
+              scale: 1,
+              scaleX: 1,
+              rotation: 0,
+              filter: "none",
+              clipPath: "none",
+              zIndex: 2,
+              skewX: 0,
+            },
+            t,
+          );
+          tl.set(
+            "#s1",
+            {
+              opacity: 1,
+              x: 0,
+              y: 0,
+              scale: 1,
+              rotation: 0,
+              filter: "none",
+              skewX: 0,
+              scaleX: 1,
+              transformOrigin: "50% 50%",
+            },
+            t,
+          );
+          tl.set(
+            "#s2",
+            {
+              opacity: 1,
+              x: 0,
+              y: 0,
+              scale: 1,
+              rotation: 0,
+              filter: "none",
+              skewX: 0,
+              scaleX: 1,
+              transformOrigin: "50% 50%",
+            },
+            t,
+          );
+        }
 
-```html index.html
-<div
-  data-composition-id="transitions-dissolve"
-  data-composition-src="compositions/transitions-dissolve.html"
-  data-start="0"
-  data-duration="24"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+        // === TRANSITION 1: Crossfade ===
+        resetScenes();
+        tl.to("#info-1", { opacity: 1, duration: 0.3 }, t + 0.2);
+        var T = t + 1.5;
+        tl.to("#s1", { opacity: 0, duration: 0.5, ease: "power2.inOut" }, T);
+        tl.set("#scene2", { opacity: 1 }, T);
+        tl.fromTo("#s2", { opacity: 0 }, { opacity: 1, duration: 0.5, ease: "power2.inOut" }, T);
+        t = T + 1.5 + 1.0;
+        tl.to("#info-1", { opacity: 0, duration: 0.2 }, t);
+        t += 0.5;
+
+        // === TRANSITION 2: Blur Crossfade ===
+        resetScenes();
+        tl.to("#info-2", { opacity: 1, duration: 0.3 }, t + 0.2);
+        T = t + 1.5;
+        tl.to(
+          "#s1",
+          { filter: "blur(10px)", scale: 1.03, opacity: 0, duration: 0.5, ease: "power2.inOut" },
+          T,
+        );
+        tl.set("#scene2", { opacity: 1 }, T);
+        tl.fromTo(
+          "#s2",
+          { filter: "blur(10px)", scale: 0.97, opacity: 0 },
+          { filter: "blur(0px)", scale: 1, opacity: 1, duration: 0.5, ease: "power2.inOut" },
+          T + 0.1,
+        );
+        t = T + 1.5 + 1.0;
+        tl.to("#info-2", { opacity: 0, duration: 0.2 }, t);
+        t += 0.5;
+
+        // === TRANSITION 3: Focus Pull ===
+        resetScenes();
+        tl.to("#info-3", { opacity: 1, duration: 0.3 }, t + 0.2);
+        T = t + 1.5;
+        tl.to("#s1", { filter: "blur(15px)", duration: 0.5, ease: "power1.in" }, T);
+        tl.to("#s1", { opacity: 0, duration: 0.3, ease: "power2.in" }, T + 0.25);
+        tl.set("#scene2", { opacity: 1 }, T);
+        tl.fromTo(
+          "#s2",
+          { opacity: 0 },
+          { opacity: 1, duration: 0.3, ease: "power2.out" },
+          T + 0.25,
+        );
+        t = T + 1.5 + 1.0;
+        tl.to("#info-3", { opacity: 0, duration: 0.2 }, t);
+        t += 0.5;
+
+        // === TRANSITION 4: Color Dip ===
+        resetScenes();
+        tl.to("#info-4", { opacity: 1, duration: 0.3 }, t + 0.2);
+        T = t + 1.5;
+        tl.to("#s1", { opacity: 0, duration: 0.2, ease: "power2.in" }, T);
+        tl.set("#scene2", { opacity: 1 }, T);
+        tl.fromTo(
+          "#s2",
+          { opacity: 0 },
+          { opacity: 1, duration: 0.2, ease: "power2.out" },
+          T + 0.25,
+        );
+        t = T + 1.5 + 1.0;
+        tl.to("#info-4", { opacity: 0, duration: 0.2 }, t);
+        t += 0.5;
+
+        // === OUTRO (3s) ===
+        tl.set("#scene1", { opacity: 0 }, t);
+        tl.set("#scene2", { opacity: 0 }, t);
+        tl.to("#outro-card", { opacity: 1, duration: 0.4, ease: "power2.inOut" }, t);
+        tl.to("#outro-label", { opacity: 1, duration: 0.4, ease: "power2.out" }, t + 0.3);
+        tl.fromTo(
+          "#outro-main",
+          { opacity: 0, y: 20 },
+          { opacity: 1, y: 0, duration: 0.5, ease: "power2.out" },
+          t + 0.6,
+        );
+        tl.to("#outro-card", { opacity: 0, duration: 0.4, ease: "power2.inOut" }, t + 2.4);
+
+        window.__timelines = window.__timelines || {};
+        window.__timelines["main"] = tl;
+      })();
+    </script>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="transitions-dissolve" data-composition-src="compositions/transitions-dissolve.html" data-start="0" data-duration="24" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/transitions-distortion.mdx b/docs/catalog/blocks/transitions-distortion.mdx
index 8dc4392740..26d5900a19 100644
--- a/docs/catalog/blocks/transitions-distortion.mdx
+++ b/docs/catalog/blocks/transitions-distortion.mdx
@@ -3,34 +3,417 @@ title: "Distortion Transitions"
 description: "Showcase of warp and distortion transitions"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-distortion.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-distortion.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/transitions-distortion.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Distortion Transitions preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add transitions-distortion
-```
+<InstallCommand command="npx hyperframes add transitions-distortion" />
 
 That writes one file: `compositions/transitions-distortion.html`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`transitions-distortion.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Distortion Transitions</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #000;
+        overflow: hidden;
+      }
+
+      .scene {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .scene-inner {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+      }
+
+      #scene1 .scene-inner {
+        background: #1b263b;
+      }
+      #scene2 .scene-inner {
+        background: #e07a5f;
+      }
+
+      .scene-num {
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+        font-size: 200px;
+        font-weight: 900;
+        color: rgba(255, 255, 255, 0.08);
+        line-height: 1;
+      }
+      .scene-label {
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+        font-size: 48px;
+        font-weight: 600;
+        color: rgba(255, 255, 255, 0.25);
+        letter-spacing: 12px;
+        text-transform: uppercase;
+        margin-top: 10px;
+      }
+
+      .info-bar {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        z-index: 100;
+        background: rgba(0, 0, 0, 0.88);
+        padding: 28px 60px;
+        opacity: 0;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+      .info-bar .info-name {
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+        font-size: 32px;
+        font-weight: 700;
+        color: #fff;
+      }
+      .info-bar .info-cat {
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+        font-size: 18px;
+        font-weight: 500;
+        color: rgba(255, 255, 255, 0.4);
+        letter-spacing: 4px;
+        text-transform: uppercase;
+      }
+
+      /* Title / Outro */
+      #title-card,
+      #outro-card {
+        position: absolute;
+        inset: 0;
+        z-index: 200;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        background: #0d1117;
+        opacity: 0;
+      }
+      .card-title {
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+        font-size: 72px;
+        font-weight: 800;
+        color: #fff;
+      }
+      .card-sub {
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+        font-size: 28px;
+        font-weight: 400;
+        color: rgba(255, 255, 255, 0.4);
+        margin-top: 16px;
+        letter-spacing: 6px;
+        text-transform: uppercase;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="main"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="21"
+      data-width="1920"
+      data-height="1080"
+      style="position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #000"
+    >
+      <!-- Title Card -->
+      <div id="title-card">
+        <div class="card-title">Distortion Transitions</div>
+        <div class="card-sub">Glitch &bull; Chromatic &bull; Ripple</div>
+      </div>
+
+      <!-- Scene A -->
+      <div id="scene1" class="scene" style="opacity: 0">
+        <div id="s1" class="scene-inner">
+          <div class="scene-num">ONE</div>
+          <div class="scene-label">Scene A</div>
+        </div>
+      </div>
+
+      <!-- Scene B -->
+      <div id="scene2" class="scene" style="opacity: 0">
+        <div id="s2" class="scene-inner">
+          <div class="scene-num">TWO</div>
+          <div class="scene-label">Scene B</div>
+        </div>
+      </div>
+
+      <!-- RGB channel overlays for glitch/chromatic -->
+      <div
+        id="glitch-r"
+        style="
+          position: absolute;
+          inset: 0;
+          z-index: 30;
+          opacity: 0;
+          pointer-events: none;
+          mix-blend-mode: screen;
+        "
+      >
+        <div
+          class="scene-inner"
+          style="
+            background: rgba(229, 56, 59, 0.35);
+            width: 100%;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+          "
+        >
+          <div style="font-size: 200px; font-weight: 900; color: rgba(255, 255, 255, 0.08)">
+            ONE
+          </div>
+        </div>
+      </div>
+      <div
+        id="glitch-b"
+        style="
+          position: absolute;
+          inset: 0;
+          z-index: 30;
+          opacity: 0;
+          pointer-events: none;
+          mix-blend-mode: screen;
+        "
+      >
+        <div
+          class="scene-inner"
+          style="
+            background: rgba(72, 191, 227, 0.35);
+            width: 100%;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+          "
+        >
+          <div style="font-size: 200px; font-weight: 900; color: rgba(255, 255, 255, 0.08)">
+            ONE
+          </div>
+        </div>
+      </div>
+
+      <!-- Info Bars -->
+      <div id="info1" class="info-bar">
+        <div class="info-name">Glitch</div>
+        <div class="info-cat">Distortion</div>
+      </div>
+      <div id="info2" class="info-bar">
+        <div class="info-name">Chromatic Aberration</div>
+        <div class="info-cat">Distortion</div>
+      </div>
+      <div id="info3" class="info-bar">
+        <div class="info-name">Ripple</div>
+        <div class="info-cat">Distortion</div>
+      </div>
+
+      <!-- Outro Card -->
+      <div id="outro-card">
+        <div class="card-title">Distortion Transitions</div>
+        <div class="card-sub">End</div>
+      </div>
+    </div>
+
+    <script>
+      (function () {
+        var tl = gsap.timeline({ defaults: { ease: "none" } });
+        window.__timelines = window.__timelines || {};
+        window.__timelines["main"] = tl;
+
+        function resetScenes() {
+          tl.set("#scene1", { opacity: 1 });
+          tl.set("#scene2", { opacity: 0 });
+          tl.set("#s1", { x: 0, y: 0, scale: 1, filter: "blur(0px)", opacity: 1 });
+          tl.set("#s2", { x: 0, y: 0, scale: 1, filter: "blur(0px)", opacity: 1 });
+          tl.set("#glitch-r", { opacity: 0, x: 0, y: 0 });
+          tl.set("#glitch-b", { opacity: 0, x: 0, y: 0 });
+        }
+
+        // ===== TITLE CARD (0–3s) =====
+        tl.set("#title-card", { opacity: 1 }, 0);
+        tl.fromTo(
+          ".card-title",
+          { y: 30, opacity: 0 },
+          { y: 0, opacity: 1, duration: 0.6, ease: "power2.out" },
+          0.4,
+        );
+        tl.fromTo(
+          ".card-sub",
+          { y: 20, opacity: 0 },
+          { y: 0, opacity: 1, duration: 0.5, ease: "power2.out" },
+          0.8,
+        );
+        tl.to("#title-card", { opacity: 0, duration: 0.4, ease: "power2.in" }, 2.6);
+
+        // ===== DEMO 1: Glitch (3–8s) =====
+        var T;
+
+        // Reset & show scene A
+        tl.call(function () {}, [], 3);
+        resetScenes();
+
+        // Show info bar
+        tl.to("#info1", { opacity: 1, duration: 0.3, ease: "power2.out" }, 3);
+
+        // Hold 1.5s, transition at T=4.5
+        T = 4.5;
 
-It runs for 21 seconds at 1920×1080. Paste this into your composition:
+        // Glitch transition
+        tl.set("#glitch-r", { opacity: 1, x: 40, y: -8 }, T);
+        tl.set("#glitch-b", { opacity: 1, x: -30, y: 12 }, T);
+        tl.set("#s1", { x: -15 }, T);
 
-```html index.html
-<div
-  data-composition-id="transitions-distortion"
-  data-composition-src="compositions/transitions-distortion.html"
-  data-start="0"
-  data-duration="21"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+        tl.set("#glitch-r", { x: -30, y: 15 }, T + 0.03);
+        tl.set("#glitch-b", { x: 50, y: -10 }, T + 0.03);
+        tl.set("#s1", { x: 20 }, T + 0.03);
+
+        tl.set("#glitch-r", { x: 60, y: -20 }, T + 0.06);
+        tl.set("#glitch-b", { x: -40, y: 8 }, T + 0.06);
+        tl.set("#s1", { x: -25 }, T + 0.06);
+
+        tl.set("#glitch-r", { x: -20, y: 5 }, T + 0.09);
+        tl.set("#glitch-b", { x: 35, y: -15 }, T + 0.09);
+
+        // Swap at T + 0.12
+        tl.set("#scene1", { opacity: 0 }, T + 0.12);
+        tl.set("#scene2", { opacity: 1 }, T + 0.12);
+
+        // Clear
+        tl.set("#glitch-r", { opacity: 0, x: 0, y: 0 }, T + 0.15);
+        tl.set("#glitch-b", { opacity: 0, x: 0, y: 0 }, T + 0.15);
+        tl.set("#s1", { x: 0 }, T + 0.15);
+
+        // Hold 1.0s, hide info, gap 0.5s
+        tl.to("#info1", { opacity: 0, duration: 0.3, ease: "power2.in" }, 7.0);
+
+        // ===== DEMO 2: Chromatic Aberration (8–13s) =====
+        tl.call(function () {}, [], 8);
+        resetScenes();
+
+        tl.to("#info2", { opacity: 1, duration: 0.3, ease: "power2.out" }, 8);
+
+        T = 9.5;
+
+        // Chromatic aberration transition
+        tl.set("#glitch-r", { opacity: 0.6, x: 0 }, T);
+        tl.set("#glitch-b", { opacity: 0.6, x: 0 }, T);
+        tl.to("#glitch-r", { x: -80, opacity: 0.8, duration: 0.3, ease: "power2.in" }, T);
+        tl.to("#glitch-b", { x: 80, opacity: 0.8, duration: 0.3, ease: "power2.in" }, T);
+
+        // Swap
+        tl.set("#scene1", { opacity: 0 }, T + 0.3);
+        tl.set("#scene2", { opacity: 1 }, T + 0.3);
+
+        // Converge back
+        tl.to("#glitch-r", { x: 0, opacity: 0, duration: 0.3, ease: "power2.out" }, T + 0.3);
+        tl.to("#glitch-b", { x: 0, opacity: 0, duration: 0.3, ease: "power2.out" }, T + 0.3);
+
+        tl.to("#info2", { opacity: 0, duration: 0.3, ease: "power2.in" }, 12.0);
+
+        // ===== DEMO 3: Ripple (13–18s) =====
+        tl.call(function () {}, [], 13);
+        resetScenes();
+
+        tl.to("#info3", { opacity: 1, duration: 0.3, ease: "power2.out" }, 13);
+
+        T = 14.5;
+
+        // Ripple distortion transition
+        tl.to("#s1", { x: 30, scale: 1.02, duration: 0.04, ease: "none" }, T);
+        tl.to(
+          "#s1",
+          { x: -25, scale: 0.98, filter: "blur(4px)", duration: 0.04, ease: "none" },
+          T + 0.04,
+        );
+        tl.to(
+          "#s1",
+          { x: 20, scale: 1.01, filter: "blur(6px)", duration: 0.04, ease: "none" },
+          T + 0.08,
+        );
+        tl.to(
+          "#s1",
+          { x: -15, scale: 0.99, filter: "blur(8px)", duration: 0.04, ease: "none" },
+          T + 0.12,
+        );
+        tl.to(
+          "#s1",
+          { x: 10, opacity: 0, filter: "blur(10px)", duration: 0.04, ease: "none" },
+          T + 0.16,
+        );
+        tl.set("#scene2", { opacity: 1 }, T + 0.16);
+        tl.fromTo(
+          "#s2",
+          { x: -15, scale: 1.02, filter: "blur(8px)" },
+          { x: 0, scale: 1, filter: "blur(0px)", duration: 0.2, ease: "power2.out" },
+          T + 0.2,
+        );
+
+        tl.to("#info3", { opacity: 0, duration: 0.3, ease: "power2.in" }, 17.0);
+
+        // ===== OUTRO (18–21s) =====
+        tl.set("#scene1", { opacity: 0 }, 18);
+        tl.set("#scene2", { opacity: 0 }, 18);
+        tl.set("#outro-card", { opacity: 1 }, 18);
+        tl.fromTo(
+          "#outro-card .card-title",
+          { y: 30, opacity: 0 },
+          { y: 0, opacity: 1, duration: 0.6, ease: "power2.out" },
+          18.3,
+        );
+        tl.fromTo(
+          "#outro-card .card-sub",
+          { y: 20, opacity: 0 },
+          { y: 0, opacity: 1, duration: 0.5, ease: "power2.out" },
+          18.7,
+        );
+        tl.to("#outro-card", { opacity: 0, duration: 0.4, ease: "power2.in" }, 20.5);
+      })();
+    </script>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="transitions-distortion" data-composition-src="compositions/transitions-distortion.html" data-start="0" data-duration="21" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/transitions-grid.mdx b/docs/catalog/blocks/transitions-grid.mdx
index 6557ee574e..e9f017c3cc 100644
--- a/docs/catalog/blocks/transitions-grid.mdx
+++ b/docs/catalog/blocks/transitions-grid.mdx
@@ -3,34 +3,337 @@ title: "Grid Transitions"
 description: "Showcase of grid-based tile transitions"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-grid.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-grid.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/transitions-grid.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Grid Transitions preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add transitions-grid
-```
+<InstallCommand command="npx hyperframes add transitions-grid" />
 
 That writes one file: `compositions/transitions-grid.html`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`transitions-grid.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Grid Transitions</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #000;
+        overflow: hidden;
+      }
+
+      .scene {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .scene-inner {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+      }
+
+      #scene1 .scene-inner {
+        background: #1b263b;
+      }
+      #scene2 .scene-inner {
+        background: #e07a5f;
+      }
+
+      .scene-num {
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+        font-size: 200px;
+        font-weight: 900;
+        color: rgba(255, 255, 255, 0.08);
+        line-height: 1;
+      }
+      .scene-label {
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+        font-size: 48px;
+        font-weight: 600;
+        color: rgba(255, 255, 255, 0.25);
+        letter-spacing: 12px;
+        text-transform: uppercase;
+        margin-top: 10px;
+      }
+
+      .info-bar {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        z-index: 100;
+        background: rgba(0, 0, 0, 0.88);
+        padding: 28px 60px;
+        opacity: 0;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+      .info-bar .info-name {
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+        font-size: 32px;
+        font-weight: 700;
+        color: #fff;
+      }
+      .info-bar .info-cat {
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+        font-size: 18px;
+        font-weight: 500;
+        color: rgba(255, 255, 255, 0.4);
+        letter-spacing: 4px;
+        text-transform: uppercase;
+      }
+
+      /* Title / Outro */
+      #title-card,
+      #outro-card {
+        position: absolute;
+        inset: 0;
+        z-index: 200;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        background: #0d1117;
+        opacity: 0;
+      }
+      .card-title {
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+        font-size: 72px;
+        font-weight: 800;
+        color: #fff;
+      }
+      .card-sub {
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+        font-size: 28px;
+        font-weight: 400;
+        color: rgba(255, 255, 255, 0.4);
+        margin-top: 16px;
+        letter-spacing: 6px;
+        text-transform: uppercase;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="main"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="11"
+      data-width="1920"
+      data-height="1080"
+      style="position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #000"
+    >
+      <!-- Title Card -->
+      <div id="title-card">
+        <div class="card-title">Grid Transitions</div>
+        <div class="card-sub">Grid Dissolve</div>
+      </div>
+
+      <!-- Scene A -->
+      <div id="scene1" class="scene" style="opacity: 0">
+        <div id="s1" class="scene-inner">
+          <div class="scene-num">ONE</div>
+          <div class="scene-label">Scene A</div>
+        </div>
+      </div>
+
+      <!-- Scene B -->
+      <div id="scene2" class="scene" style="opacity: 0">
+        <div id="s2" class="scene-inner">
+          <div class="scene-num">TWO</div>
+          <div class="scene-label">Scene B</div>
+        </div>
+      </div>
+
+      <!-- Grid container -->
+      <div
+        id="grid-container"
+        style="
+          position: absolute;
+          inset: 0;
+          z-index: 50;
+          pointer-events: none;
+          display: grid;
+          grid-template-columns: repeat(4, 480px);
+          grid-template-rows: repeat(3, 360px);
+        "
+      ></div>
+
+      <!-- Info Bar -->
+      <div id="info1" class="info-bar">
+        <div class="info-name">Grid Dissolve</div>
+        <div class="info-cat">Grid</div>
+      </div>
+
+      <!-- Outro Card -->
+      <div id="outro-card">
+        <div class="card-title">Grid Transitions</div>
+        <div class="card-sub">End</div>
+      </div>
+    </div>
+
+    <script>
+      (function () {
+        var tl = gsap.timeline({ defaults: { ease: "none" } });
+        window.__timelines = window.__timelines || {};
+        window.__timelines["main"] = tl;
 
-It runs for 11 seconds at 1920×1080. Paste this into your composition:
+        // Generate grid cells
+        var gridColors = [
+          "#F72585",
+          "#7209B7",
+          "#3A0CA3",
+          "#4361EE",
+          "#4CC9F0",
+          "#F72585",
+          "#7209B7",
+          "#3A0CA3",
+          "#4361EE",
+          "#4CC9F0",
+          "#F72585",
+          "#7209B7",
+        ];
+        var gridHTML = "";
+        for (var g = 0; g < 12; g++) {
+          gridHTML +=
+            '<div id="cell-' +
+            g +
+            '" style="background:' +
+            gridColors[g % gridColors.length] +
+            '; opacity:0;"></div>';
+        }
+        document.getElementById("grid-container").innerHTML = gridHTML;
 
-```html index.html
-<div
-  data-composition-id="transitions-grid"
-  data-composition-src="compositions/transitions-grid.html"
-  data-start="0"
-  data-duration="11"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+        function resetScenes() {
+          tl.set("#scene1", { opacity: 1 });
+          tl.set("#scene2", { opacity: 0 });
+          tl.set("#s1", { x: 0, y: 0, scale: 1, filter: "blur(0px)", opacity: 1 });
+          tl.set("#s2", { x: 0, y: 0, scale: 1, filter: "blur(0px)", opacity: 1 });
+          for (var g = 0; g < 12; g++) {
+            tl.set("#cell-" + g, { opacity: 0 });
+          }
+        }
+
+        // ===== TITLE CARD (0–3s) =====
+        tl.set("#title-card", { opacity: 1 }, 0);
+        tl.fromTo(
+          ".card-title",
+          { y: 30, opacity: 0 },
+          { y: 0, opacity: 1, duration: 0.6, ease: "power2.out" },
+          0.4,
+        );
+        tl.fromTo(
+          ".card-sub",
+          { y: 20, opacity: 0 },
+          { y: 0, opacity: 1, duration: 0.5, ease: "power2.out" },
+          0.8,
+        );
+        tl.to("#title-card", { opacity: 0, duration: 0.4, ease: "power2.in" }, 2.6);
+
+        // ===== DEMO 1: Grid Dissolve (3–8s) =====
+        var T;
+
+        tl.call(function () {}, [], 3);
+        resetScenes();
+
+        // Show info bar
+        tl.to("#info1", { opacity: 1, duration: 0.3, ease: "power2.out" }, 3);
+
+        // Hold 1.5s, transition at T=4.5
+        T = 4.5;
+
+        // Cell positions (col, row) and distance from center (1.5, 1)
+        var cells = [];
+        for (var g = 0; g < 12; g++) {
+          var col = g % 4;
+          var row = Math.floor(g / 4);
+          var dist = Math.sqrt(Math.pow(col - 1.5, 2) + Math.pow(row - 1, 2));
+          cells.push({ id: g, dist: dist });
+        }
+        cells.sort(function (a, b) {
+          return a.dist - b.dist;
+        });
+
+        // Ripple in from center
+        var stag = 0.04;
+        for (var c = 0; c < cells.length; c++) {
+          tl.to(
+            "#cell-" + cells[c].id,
+            { opacity: 1, duration: 0.15, ease: "power2.out" },
+            T + c * stag,
+          );
+        }
+
+        // Swap scenes at midpoint
+        tl.set("#scene1", { opacity: 0 }, T + 0.35);
+        tl.set("#scene2", { opacity: 1 }, T + 0.35);
+
+        // Ripple out
+        for (var c = 0; c < cells.length; c++) {
+          tl.to(
+            "#cell-" + cells[c].id,
+            { opacity: 0, duration: 0.15, ease: "power2.in" },
+            T + 0.5 + c * stag,
+          );
+        }
+
+        // Hold 1.0s, hide info, gap 0.5s
+        tl.to("#info1", { opacity: 0, duration: 0.3, ease: "power2.in" }, 7.0);
+
+        // ===== OUTRO (8–11s) =====
+        tl.set("#scene1", { opacity: 0 }, 8);
+        tl.set("#scene2", { opacity: 0 }, 8);
+        tl.set("#outro-card", { opacity: 1 }, 8);
+        tl.fromTo(
+          "#outro-card .card-title",
+          { y: 30, opacity: 0 },
+          { y: 0, opacity: 1, duration: 0.6, ease: "power2.out" },
+          8.3,
+        );
+        tl.fromTo(
+          "#outro-card .card-sub",
+          { y: 20, opacity: 0 },
+          { y: 0, opacity: 1, duration: 0.5, ease: "power2.out" },
+          8.7,
+        );
+        tl.to("#outro-card", { opacity: 0, duration: 0.4, ease: "power2.in" }, 10.5);
+      })();
+    </script>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="transitions-grid" data-composition-src="compositions/transitions-grid.html" data-start="0" data-duration="11" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/transitions-light.mdx b/docs/catalog/blocks/transitions-light.mdx
index 20c7d15593..b63e815f64 100644
--- a/docs/catalog/blocks/transitions-light.mdx
+++ b/docs/catalog/blocks/transitions-light.mdx
@@ -3,34 +3,423 @@ title: "Light Transitions"
 description: "Showcase of light-based glow and flash transitions"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-light.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-light.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/transitions-light.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Light Transitions preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add transitions-light
-```
+<InstallCommand command="npx hyperframes add transitions-light" />
 
 That writes one file: `compositions/transitions-light.html`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`transitions-light.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Light Transitions Showcase</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #000;
+        overflow: hidden;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+      }
+
+      /* Title Card */
+      #title-card {
+        position: absolute;
+        inset: 0;
+        z-index: 10;
+        background: linear-gradient(135deg, #0d1b2a 0%, #1b263b 100%);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        opacity: 1;
+      }
+      #title-card h1 {
+        font-size: 72px;
+        font-weight: 800;
+        color: #fff;
+        letter-spacing: -1px;
+        opacity: 0;
+        transform: translateY(30px);
+      }
+      #title-card .subtitle {
+        font-size: 28px;
+        font-weight: 400;
+        color: rgba(255, 255, 255, 0.5);
+        margin-top: 12px;
+        opacity: 0;
+        transform: translateY(20px);
+      }
+
+      /* Scenes */
+      #scene1,
+      #scene2 {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+      }
+      #scene1 {
+        background: #1b263b;
+        z-index: 2;
+        opacity: 0;
+      }
+      #scene2 {
+        background: #e07a5f;
+        z-index: 1;
+        opacity: 0;
+      }
+
+      .scene-number {
+        font-size: 180px;
+        font-weight: 900;
+        line-height: 1;
+        opacity: 0.12;
+        letter-spacing: -6px;
+      }
+      #scene1 .scene-number {
+        color: #fff;
+      }
+      #scene2 .scene-number {
+        color: #000;
+      }
+
+      .scene-label {
+        font-size: 48px;
+        font-weight: 700;
+        margin-top: -20px;
+      }
+      #scene1 .scene-label {
+        color: #fff;
+      }
+      #scene2 .scene-label {
+        color: #fff;
+      }
+
+      /* Info bar */
+      .info-bar {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 80px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 48px;
+      }
+      #scene1 .info-bar {
+        background: rgba(0, 0, 0, 0.3);
+      }
+      #scene2 .info-bar {
+        background: rgba(0, 0, 0, 0.2);
+      }
+      .info-bar .label {
+        font-size: 18px;
+        font-weight: 600;
+        color: rgba(255, 255, 255, 0.7);
+        text-transform: uppercase;
+        letter-spacing: 2px;
+      }
+      .info-bar .desc {
+        font-size: 16px;
+        color: rgba(255, 255, 255, 0.5);
+        font-style: italic;
+      }
+
+      /* Outro */
+      #outro {
+        position: absolute;
+        inset: 0;
+        z-index: 10;
+        background: linear-gradient(135deg, #0d1b2a 0%, #1b263b 100%);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        opacity: 0;
+      }
+      #outro h2 {
+        font-size: 56px;
+        font-weight: 800;
+        color: #fff;
+        opacity: 0;
+        transform: translateY(20px);
+      }
+      #outro .tag {
+        font-size: 22px;
+        color: rgba(255, 255, 255, 0.4);
+        margin-top: 10px;
+        opacity: 0;
+        transform: translateY(15px);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="comp"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="21"
+      data-width="1920"
+      data-height="1080"
+      style="position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #000"
+    >
+      <!-- Title Card -->
+      <div id="title-card">
+        <h1 id="title-h1">Light Transitions</h1>
+        <div class="subtitle" id="title-sub">3 transition styles</div>
+      </div>
+
+      <!-- Scene A -->
+      <div id="scene1">
+        <div class="scene-number">ONE</div>
+        <div class="scene-label">SCENE A</div>
+        <div class="info-bar">
+          <span class="label" id="info-label-a"></span>
+          <span class="desc" id="info-desc-a"></span>
+        </div>
+      </div>
+
+      <!-- Scene B -->
+      <div id="scene2">
+        <div class="scene-number">TWO</div>
+        <div class="scene-label">SCENE B</div>
+        <div class="info-bar">
+          <span class="label" id="info-label-b"></span>
+          <span class="desc" id="info-desc-b"></span>
+        </div>
+      </div>
+
+      <!-- Light Leak Overlays -->
+      <div
+        id="leak-warm"
+        style="
+          position: absolute;
+          inset: 0;
+          background: linear-gradient(135deg, rgba(255, 165, 0, 0.6), transparent 60%);
+          z-index: 50;
+          opacity: 0;
+          pointer-events: none;
+        "
+      ></div>
+      <div
+        id="leak-1"
+        style="
+          position: absolute;
+          top: -200px;
+          left: -400px;
+          width: 2400px;
+          height: 1500px;
+          background: radial-gradient(ellipse at 30% 40%, rgba(255, 140, 0, 0.5), transparent 50%);
+          z-index: 51;
+          opacity: 0;
+          pointer-events: none;
+        "
+      ></div>
+      <div
+        id="leak-2"
+        style="
+          position: absolute;
+          top: -100px;
+          left: -200px;
+          width: 2400px;
+          height: 1400px;
+          background: radial-gradient(ellipse at 60% 50%, rgba(255, 200, 0, 0.4), transparent 50%);
+          z-index: 51;
+          opacity: 0;
+          pointer-events: none;
+        "
+      ></div>
 
-It runs for 21 seconds at 1920×1080. Paste this into your composition:
+      <!-- Flash Overlay -->
+      <div
+        id="flash-overlay"
+        style="
+          position: absolute;
+          inset: 0;
+          background: #fff;
+          z-index: 50;
+          opacity: 0;
+          pointer-events: none;
+        "
+      ></div>
 
-```html index.html
-<div
-  data-composition-id="transitions-light"
-  data-composition-src="compositions/transitions-light.html"
-  data-start="0"
-  data-duration="21"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+      <!-- Film Burn Overlays -->
+      <div
+        id="burn-a"
+        style="
+          position: absolute;
+          top: -300px;
+          right: -800px;
+          width: 2400px;
+          height: 1800px;
+          background: radial-gradient(ellipse at 70% 40%, rgba(255, 100, 0, 0.5), transparent 50%);
+          z-index: 51;
+          opacity: 0;
+          pointer-events: none;
+        "
+      ></div>
+      <div
+        id="burn-b"
+        style="
+          position: absolute;
+          top: -200px;
+          right: -600px;
+          width: 2400px;
+          height: 1600px;
+          background: radial-gradient(ellipse at 80% 50%, rgba(255, 160, 0, 0.4), transparent 50%);
+          z-index: 51;
+          opacity: 0;
+          pointer-events: none;
+        "
+      ></div>
+      <div
+        id="burn-c"
+        style="
+          position: absolute;
+          top: -100px;
+          right: -500px;
+          width: 2200px;
+          height: 1400px;
+          background: radial-gradient(ellipse at 60% 60%, rgba(255, 200, 50, 0.3), transparent 50%);
+          z-index: 51;
+          opacity: 0;
+          pointer-events: none;
+        "
+      ></div>
+
+      <!-- Outro -->
+      <div id="outro">
+        <h2 id="outro-h2">Light Transitions</h2>
+        <div class="tag" id="outro-tag">End of showcase</div>
+      </div>
+    </div>
+
+    <script>
+      (function () {
+        var tl = gsap.timeline({ paused: false });
+        window.__timelines = window.__timelines || {};
+        window.__timelines["main"] = tl;
+
+        // Transition demos config
+        var demos = [
+          { label: "LIGHT LEAK", desc: "Use a light leak transition with warm overlays" },
+          { label: "OVEREXPOSURE BURN", desc: "Use an overexposure burn transition" },
+          { label: "FILM BURN", desc: "Use a film burn transition with warm edge bleeds" },
+        ];
+
+        // Reset scenes helper
+        function resetScenes(t, demoIndex) {
+          tl.set("#scene1", { opacity: 1, filter: "none", scale: 1 }, t);
+          tl.set("#scene2", { opacity: 0 }, t);
+          tl.set("#info-label-a", { textContent: demos[demoIndex].label }, t);
+          tl.set("#info-desc-a", { textContent: demos[demoIndex].desc }, t);
+          tl.set("#info-label-b", { textContent: demos[demoIndex].label }, t);
+          tl.set("#info-desc-b", { textContent: demos[demoIndex].desc }, t);
+          // Reset light leak overlays
+          tl.set("#leak-warm", { opacity: 0 }, t);
+          tl.set("#leak-1", { opacity: 0, x: 0 }, t);
+          tl.set("#leak-2", { opacity: 0, x: 0 }, t);
+          // Reset flash
+          tl.set("#flash-overlay", { opacity: 0 }, t);
+          // Reset burn overlays
+          tl.set("#burn-a", { opacity: 0, x: 0 }, t);
+          tl.set("#burn-b", { opacity: 0, x: 0 }, t);
+          tl.set("#burn-c", { opacity: 0, x: 0 }, t);
+        }
+
+        // ===== TITLE CARD (0s - 3s) =====
+        tl.to("#title-h1", { opacity: 1, y: 0, duration: 0.6, ease: "power2.out" }, 0.3);
+        tl.to("#title-sub", { opacity: 1, y: 0, duration: 0.5, ease: "power2.out" }, 0.6);
+        tl.to("#title-card", { opacity: 0, duration: 0.4, ease: "power1.inOut" }, 2.5);
+
+        // ===== DEMO 1: LIGHT LEAK (3s - 8s) =====
+        var T1 = 3;
+        resetScenes(T1, 0);
+        var T = T1 + 2;
+        tl.to("#leak-warm", { opacity: 0.4, duration: 0.3, ease: "power1.in" }, T);
+        tl.to("#leak-1", { opacity: 0.9, x: 300, duration: 0.5, ease: "sine.inOut" }, T + 0.05);
+        tl.to("#leak-2", { opacity: 0.8, x: 200, duration: 0.6, ease: "sine.inOut" }, T + 0.1);
+        tl.to("#leak-warm", { opacity: 0.6, duration: 0.15, ease: "power2.in" }, T + 0.35);
+        tl.set("#scene1", { opacity: 0 }, T + 0.45);
+        tl.set("#scene2", { opacity: 1 }, T + 0.45);
+        tl.to("#leak-warm", { opacity: 0, duration: 0.4, ease: "power2.out" }, T + 0.5);
+        tl.to("#leak-1", { opacity: 0, x: 600, duration: 0.35, ease: "power1.out" }, T + 0.5);
+        tl.to("#leak-2", { opacity: 0, x: 400, duration: 0.35, ease: "power1.out" }, T + 0.55);
+
+        // ===== DEMO 2: OVEREXPOSURE BURN (8s - 13s) =====
+        var T2 = 8;
+        resetScenes(T2, 1);
+        T = T2 + 2;
+        tl.to(
+          "#scene1",
+          { filter: "brightness(1.5)", scale: 1.03, duration: 0.2, ease: "power1.in" },
+          T,
+        );
+        tl.to(
+          "#scene1",
+          { filter: "brightness(3)", scale: 1.06, duration: 0.2, ease: "power2.in" },
+          T + 0.2,
+        );
+        tl.to("#flash-overlay", { opacity: 0.5, duration: 0.25, ease: "power1.in" }, T + 0.15);
+        tl.to("#flash-overlay", { opacity: 1, duration: 0.15, ease: "power2.in" }, T + 0.4);
+        tl.set("#scene1", { opacity: 0 }, T + 0.55);
+        tl.set("#scene2", { opacity: 1 }, T + 0.55);
+        tl.set("#scene1", { filter: "none", scale: 1 }, T + 0.55);
+        tl.to("#flash-overlay", { opacity: 0, duration: 0.35, ease: "power2.out" }, T + 0.55);
+
+        // ===== DEMO 3: FILM BURN (13s - 18s) =====
+        var T3 = 13;
+        resetScenes(T3, 2);
+        T = T3 + 2;
+        tl.to("#burn-a", { opacity: 1, x: -300, duration: 0.4, ease: "power1.in" }, T);
+        tl.to("#burn-b", { opacity: 1, x: -500, duration: 0.5, ease: "power1.in" }, T + 0.05);
+        tl.to("#burn-c", { opacity: 1, x: -200, duration: 0.45, ease: "power1.in" }, T + 0.1);
+        tl.set("#scene1", { opacity: 0 }, T + 0.35);
+        tl.set("#scene2", { opacity: 1 }, T + 0.35);
+        tl.to("#burn-a", { opacity: 0, duration: 0.3, ease: "power2.out" }, T + 0.45);
+        tl.to("#burn-b", { opacity: 0, duration: 0.3, ease: "power2.out" }, T + 0.5);
+        tl.to("#burn-c", { opacity: 0, duration: 0.3, ease: "power2.out" }, T + 0.55);
+
+        // ===== OUTRO (18s - 21s) =====
+        tl.to("#scene1", { opacity: 0, duration: 0.3 }, 18);
+        tl.to("#scene2", { opacity: 0, duration: 0.3 }, 18);
+        tl.to("#outro", { opacity: 1, duration: 0.4, ease: "power1.inOut" }, 18.2);
+        tl.to("#outro-h2", { opacity: 1, y: 0, duration: 0.5, ease: "power2.out" }, 18.5);
+        tl.to("#outro-tag", { opacity: 1, y: 0, duration: 0.4, ease: "power2.out" }, 18.8);
+      })();
+    </script>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="transitions-light" data-composition-src="compositions/transitions-light.html" data-start="0" data-duration="21" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/transitions-mechanical.mdx b/docs/catalog/blocks/transitions-mechanical.mdx
index 30f199702f..0d5881b525 100644
--- a/docs/catalog/blocks/transitions-mechanical.mdx
+++ b/docs/catalog/blocks/transitions-mechanical.mdx
@@ -3,34 +3,455 @@ title: "Mechanical Transitions"
 description: "Showcase of mechanical shutter and iris transitions"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-mechanical.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-mechanical.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/transitions-mechanical.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Mechanical Transitions preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add transitions-mechanical
-```
+<InstallCommand command="npx hyperframes add transitions-mechanical" />
 
 That writes one file: `compositions/transitions-mechanical.html`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`transitions-mechanical.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+      }
+      .scene {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      .scene-inner {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+      }
+      .info-bar {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        z-index: 100;
+        background: rgba(0, 0, 0, 0.88);
+        padding: 24px 60px;
+        display: flex;
+        align-items: center;
+        gap: 40px;
+        opacity: 0;
+      }
+      .info-num {
+        font-size: 14px;
+        font-weight: 700;
+        color: #e07a5f;
+        letter-spacing: 0.1em;
+      }
+      .info-name {
+        font-size: 20px;
+        font-weight: 700;
+        color: #fff;
+      }
+      .info-desc {
+        font-size: 14px;
+        color: rgba(255, 255, 255, 0.5);
+      }
+      #title-card {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        background: #0d1b2a;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        z-index: 50;
+      }
+      #outro-card {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        background: #0d1b2a;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        z-index: 50;
+        opacity: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      data-composition-id="main"
+      data-start="0"
+      data-duration="15"
+      data-width="1920"
+      data-height="1080"
+    >
+      <!-- Title Card -->
+      <div id="title-card">
+        <div
+          id="title-label"
+          style="
+            font-size: 14px;
+            font-weight: 700;
+            color: #e07a5f;
+            letter-spacing: 0.2em;
+            text-transform: uppercase;
+            opacity: 0;
+          "
+        >
+          TRANSITION CATALOG
+        </div>
+        <div
+          id="title-main"
+          style="font-size: 72px; font-weight: 900; color: #fff; margin-top: 16px; opacity: 0"
+        >
+          Mechanical Transitions
+        </div>
+        <div
+          id="title-count"
+          style="
+            font-size: 24px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.4);
+            margin-top: 12px;
+            opacity: 0;
+          "
+        >
+          2 transitions
+        </div>
+      </div>
+
+      <!-- Scene A -->
+      <div id="scene1" class="scene" style="z-index: 1">
+        <div class="scene-inner" id="s1" style="background: #1b263b">
+          <div style="font-size: 200px; font-weight: 900; color: rgba(255, 255, 255, 0.08)">
+            ONE
+          </div>
+          <div
+            style="
+              font-size: 32px;
+              font-weight: 700;
+              color: #778da9;
+              letter-spacing: 0.15em;
+              margin-top: -20px;
+            "
+          >
+            SCENE A
+          </div>
+        </div>
+      </div>
+
+      <!-- Scene B -->
+      <div id="scene2" class="scene" style="z-index: 2; opacity: 0">
+        <div class="scene-inner" id="s2" style="background: #e07a5f">
+          <div style="font-size: 200px; font-weight: 900; color: rgba(255, 255, 255, 0.15)">
+            TWO
+          </div>
+          <div
+            style="
+              font-size: 32px;
+              font-weight: 700;
+              color: #fff;
+              letter-spacing: 0.15em;
+              margin-top: -20px;
+            "
+          >
+            SCENE B
+          </div>
+        </div>
+      </div>
+
+      <!-- Shutter Halves -->
+      <div
+        id="shutter-top"
+        style="
+          position: absolute;
+          top: -540px;
+          left: 0;
+          width: 1920px;
+          height: 540px;
+          background: #111;
+          z-index: 50;
+        "
+      ></div>
+      <div
+        id="shutter-bot"
+        style="
+          position: absolute;
+          bottom: -540px;
+          left: 0;
+          width: 1920px;
+          height: 540px;
+          background: #111;
+          z-index: 50;
+        "
+      ></div>
+
+      <!-- Info Bars -->
+      <div id="info-1" class="info-bar">
+        <div class="info-num">01</div>
+        <div class="info-name">Shutter</div>
+        <div class="info-desc">Use a shutter close/open transition</div>
+      </div>
+      <div id="info-2" class="info-bar">
+        <div class="info-num">02</div>
+        <div class="info-name">Clock Wipe</div>
+        <div class="info-desc">Use a clock wipe transition</div>
+      </div>
+
+      <!-- Outro Card -->
+      <div id="outro-card">
+        <div
+          id="outro-label"
+          style="
+            font-size: 14px;
+            font-weight: 700;
+            color: #e07a5f;
+            letter-spacing: 0.2em;
+            text-transform: uppercase;
+            opacity: 0;
+          "
+        >
+          MECHANICAL TRANSITIONS
+        </div>
+        <div
+          id="outro-main"
+          style="font-size: 56px; font-weight: 900; color: #fff; margin-top: 16px; opacity: 0"
+        >
+          2 Transitions
+        </div>
+      </div>
+    </div>
 
-It runs for 15 seconds at 1920×1080. Paste this into your composition:
+    <script>
+      (function () {
+        var tl = gsap.timeline({ paused: true });
+        var t = 0;
 
-```html index.html
-<div
-  data-composition-id="transitions-mechanical"
-  data-composition-src="compositions/transitions-mechanical.html"
-  data-start="0"
-  data-duration="15"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+        // === TITLE CARD (3s) ===
+        tl.to("#title-label", { opacity: 1, y: 0, duration: 0.4, ease: "power2.out" }, t + 0.3);
+        tl.fromTo(
+          "#title-main",
+          { opacity: 0, y: 20 },
+          { opacity: 1, y: 0, duration: 0.5, ease: "power2.out" },
+          t + 0.6,
+        );
+        tl.fromTo(
+          "#title-count",
+          { opacity: 0 },
+          { opacity: 1, duration: 0.4, ease: "power2.out" },
+          t + 1.0,
+        );
+        tl.to("#title-card", { opacity: 0, duration: 0.4, ease: "power2.inOut" }, t + 2.4);
+        t += 3;
+
+        function resetScenes() {
+          tl.set(
+            "#scene1",
+            {
+              opacity: 1,
+              x: 0,
+              y: 0,
+              scale: 1,
+              scaleX: 1,
+              rotation: 0,
+              filter: "none",
+              clipPath: "none",
+              zIndex: 1,
+              skewX: 0,
+            },
+            t,
+          );
+          tl.set(
+            "#scene2",
+            {
+              opacity: 0,
+              x: 0,
+              y: 0,
+              scale: 1,
+              scaleX: 1,
+              rotation: 0,
+              filter: "none",
+              clipPath: "none",
+              zIndex: 2,
+              skewX: 0,
+            },
+            t,
+          );
+          tl.set(
+            "#s1",
+            {
+              opacity: 1,
+              x: 0,
+              y: 0,
+              scale: 1,
+              rotation: 0,
+              filter: "none",
+              skewX: 0,
+              scaleX: 1,
+              transformOrigin: "50% 50%",
+            },
+            t,
+          );
+          tl.set(
+            "#s2",
+            {
+              opacity: 1,
+              x: 0,
+              y: 0,
+              scale: 1,
+              rotation: 0,
+              filter: "none",
+              skewX: 0,
+              scaleX: 1,
+              transformOrigin: "50% 50%",
+            },
+            t,
+          );
+          tl.set("#shutter-top", { y: 0 }, t);
+          tl.set("#shutter-bot", { y: 0 }, t);
+        }
+
+        // === TRANSITION 1: Shutter ===
+        resetScenes();
+        tl.to("#info-1", { opacity: 1, duration: 0.3 }, t + 0.2);
+        var T = t + 1.5;
+        tl.to("#shutter-top", { y: 540, duration: 0.25, ease: "power3.in" }, T);
+        tl.to("#shutter-bot", { y: -540, duration: 0.25, ease: "power3.in" }, T);
+        tl.set("#scene1", { opacity: 0 }, T + 0.25);
+        tl.set("#scene2", { opacity: 1 }, T + 0.25);
+        tl.to("#shutter-top", { y: 0, duration: 0.25, ease: "power3.out" }, T + 0.3);
+        tl.to("#shutter-bot", { y: 0, duration: 0.25, ease: "power3.out" }, T + 0.3);
+        t = T + 1.5 + 1.0;
+        tl.to("#info-1", { opacity: 0, duration: 0.2 }, t);
+        // Reset shutters after demo
+        tl.set("#shutter-top", { y: 0 }, t + 0.2);
+        tl.set("#shutter-bot", { y: 0 }, t + 0.2);
+        t += 0.5;
+
+        // === TRANSITION 2: Clock Wipe ===
+        resetScenes();
+        tl.to("#info-2", { opacity: 1, duration: 0.3 }, t + 0.2);
+        T = t + 1.5;
+        var d = 0.1;
+        tl.set(
+          "#scene2",
+          {
+            opacity: 1,
+            zIndex: 10,
+            clipPath:
+              "polygon(50% 50%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%)",
+          },
+          T,
+        );
+        tl.to(
+          "#scene2",
+          {
+            clipPath:
+              "polygon(50% 50%, 50% 0%, 100% 0%, 100% 50%, 100% 50%, 100% 50%, 100% 50%, 100% 50%, 100% 50%)",
+            duration: d,
+            ease: "none",
+          },
+          T,
+        );
+        tl.to(
+          "#scene2",
+          {
+            clipPath:
+              "polygon(50% 50%, 50% 0%, 100% 0%, 100% 50%, 100% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%)",
+            duration: d,
+            ease: "none",
+          },
+          T + d,
+        );
+        tl.to(
+          "#scene2",
+          {
+            clipPath:
+              "polygon(50% 50%, 50% 0%, 100% 0%, 100% 50%, 100% 100%, 50% 100%, 0% 100%, 0% 50%, 0% 50%)",
+            duration: d,
+            ease: "none",
+          },
+          T + d * 2,
+        );
+        tl.to(
+          "#scene2",
+          {
+            clipPath:
+              "polygon(50% 50%, 50% 0%, 100% 0%, 100% 50%, 100% 100%, 50% 100%, 0% 100%, 0% 50%, 0% 0%)",
+            duration: d,
+            ease: "none",
+          },
+          T + d * 3,
+        );
+        tl.set("#scene2", { clipPath: "none", zIndex: 2 }, T + d * 4 + 0.02);
+        tl.set("#scene1", { opacity: 0 }, T + d * 4 + 0.02);
+        t = T + 1.5 + 1.0;
+        tl.to("#info-2", { opacity: 0, duration: 0.2 }, t);
+        t += 0.5;
+
+        // === OUTRO (3s) ===
+        tl.set("#scene1", { opacity: 0 }, t);
+        tl.set("#scene2", { opacity: 0 }, t);
+        tl.to("#outro-card", { opacity: 1, duration: 0.4, ease: "power2.inOut" }, t);
+        tl.to("#outro-label", { opacity: 1, duration: 0.4, ease: "power2.out" }, t + 0.3);
+        tl.fromTo(
+          "#outro-main",
+          { opacity: 0, y: 20 },
+          { opacity: 1, y: 0, duration: 0.5, ease: "power2.out" },
+          t + 0.6,
+        );
+        tl.to("#outro-card", { opacity: 0, duration: 0.4, ease: "power2.inOut" }, t + 2.4);
+
+        window.__timelines = window.__timelines || {};
+        window.__timelines["main"] = tl;
+      })();
+    </script>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="transitions-mechanical" data-composition-src="compositions/transitions-mechanical.html" data-start="0" data-duration="15" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/transitions-other.mdx b/docs/catalog/blocks/transitions-other.mdx
index 6f3b9a1675..7e07182d79 100644
--- a/docs/catalog/blocks/transitions-other.mdx
+++ b/docs/catalog/blocks/transitions-other.mdx
@@ -3,34 +3,424 @@ title: "Other Transitions"
 description: "Showcase of miscellaneous creative transitions"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-other.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-other.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/transitions-other.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Other Transitions preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add transitions-other
-```
+<InstallCommand command="npx hyperframes add transitions-other" />
 
 That writes one file: `compositions/transitions-other.html`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`transitions-other.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+      }
+      .scene {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      .scene-inner {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+      }
+      .info-bar {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        z-index: 100;
+        background: rgba(0, 0, 0, 0.88);
+        padding: 24px 60px;
+        display: flex;
+        align-items: center;
+        gap: 40px;
+        opacity: 0;
+      }
+      .info-num {
+        font-size: 14px;
+        font-weight: 700;
+        color: #e07a5f;
+        letter-spacing: 0.1em;
+      }
+      .info-name {
+        font-size: 20px;
+        font-weight: 700;
+        color: #fff;
+      }
+      .info-desc {
+        font-size: 14px;
+        color: rgba(255, 255, 255, 0.5);
+      }
+      #title-card {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        background: #0d1b2a;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        z-index: 50;
+      }
+      #outro-card {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        background: #0d1b2a;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        z-index: 50;
+        opacity: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      data-composition-id="main"
+      data-start="0"
+      data-duration="20"
+      data-width="1920"
+      data-height="1080"
+    >
+      <!-- Title Card -->
+      <div id="title-card">
+        <div
+          id="title-label"
+          style="
+            font-size: 14px;
+            font-weight: 700;
+            color: #e07a5f;
+            letter-spacing: 0.2em;
+            text-transform: uppercase;
+            opacity: 0;
+          "
+        >
+          TRANSITION CATALOG
+        </div>
+        <div
+          id="title-main"
+          style="font-size: 72px; font-weight: 900; color: #fff; margin-top: 16px; opacity: 0"
+        >
+          Other Transitions
+        </div>
+        <div
+          id="title-count"
+          style="
+            font-size: 24px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.4);
+            margin-top: 12px;
+            opacity: 0;
+          "
+        >
+          3 transitions
+        </div>
+      </div>
+
+      <!-- Scene A -->
+      <div id="scene1" class="scene" style="z-index: 1">
+        <div class="scene-inner" id="s1" style="background: #1b263b">
+          <div style="font-size: 200px; font-weight: 900; color: rgba(255, 255, 255, 0.08)">
+            ONE
+          </div>
+          <div
+            style="
+              font-size: 32px;
+              font-weight: 700;
+              color: #778da9;
+              letter-spacing: 0.15em;
+              margin-top: -20px;
+            "
+          >
+            SCENE A
+          </div>
+        </div>
+      </div>
+
+      <!-- Scene B -->
+      <div id="scene2" class="scene" style="z-index: 2; opacity: 0">
+        <div class="scene-inner" id="s2" style="background: #e07a5f">
+          <div style="font-size: 200px; font-weight: 900; color: rgba(255, 255, 255, 0.15)">
+            TWO
+          </div>
+          <div
+            style="
+              font-size: 32px;
+              font-weight: 700;
+              color: #fff;
+              letter-spacing: 0.15em;
+              margin-top: -20px;
+            "
+          >
+            SCENE B
+          </div>
+        </div>
+      </div>
+
+      <!-- Flash Overlay -->
+      <div
+        id="flash-overlay"
+        style="
+          position: absolute;
+          inset: 0;
+          background: #fff;
+          z-index: 50;
+          opacity: 0;
+          pointer-events: none;
+        "
+      ></div>
+
+      <!-- Morph Circle -->
+      <div
+        id="morph-circle"
+        style="
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          width: 50px;
+          height: 50px;
+          border-radius: 50%;
+          transform: translate(-50%, -50%) scale(0);
+          z-index: 50;
+          opacity: 0;
+          pointer-events: none;
+          background: #e07a5f;
+        "
+      ></div>
+
+      <!-- Info Bars -->
+      <div id="info-1" class="info-bar">
+        <div class="info-num">01</div>
+        <div class="info-name">Flash Cut</div>
+        <div class="info-desc">Use a flash cut transition</div>
+      </div>
+      <div id="info-2" class="info-bar">
+        <div class="info-num">02</div>
+        <div class="info-name">Gravity Drop</div>
+        <div class="info-desc">Use a gravity drop transition</div>
+      </div>
+      <div id="info-3" class="info-bar">
+        <div class="info-num">03</div>
+        <div class="info-name">Morph Circle</div>
+        <div class="info-desc">Use a morph circle expanding transition</div>
+      </div>
+
+      <!-- Outro Card -->
+      <div id="outro-card">
+        <div
+          id="outro-label"
+          style="
+            font-size: 14px;
+            font-weight: 700;
+            color: #e07a5f;
+            letter-spacing: 0.2em;
+            text-transform: uppercase;
+            opacity: 0;
+          "
+        >
+          OTHER TRANSITIONS
+        </div>
+        <div
+          id="outro-main"
+          style="font-size: 56px; font-weight: 900; color: #fff; margin-top: 16px; opacity: 0"
+        >
+          3 Transitions
+        </div>
+      </div>
+    </div>
 
-It runs for 20 seconds at 1920×1080. Paste this into your composition:
+    <script>
+      (function () {
+        var tl = gsap.timeline({ paused: true });
+        var t = 0;
 
-```html index.html
-<div
-  data-composition-id="transitions-other"
-  data-composition-src="compositions/transitions-other.html"
-  data-start="0"
-  data-duration="20"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+        // === TITLE CARD (3s) ===
+        tl.to("#title-label", { opacity: 1, y: 0, duration: 0.4, ease: "power2.out" }, t + 0.3);
+        tl.fromTo(
+          "#title-main",
+          { opacity: 0, y: 20 },
+          { opacity: 1, y: 0, duration: 0.5, ease: "power2.out" },
+          t + 0.6,
+        );
+        tl.fromTo(
+          "#title-count",
+          { opacity: 0 },
+          { opacity: 1, duration: 0.4, ease: "power2.out" },
+          t + 1.0,
+        );
+        tl.to("#title-card", { opacity: 0, duration: 0.4, ease: "power2.inOut" }, t + 2.4);
+        t += 3;
+
+        function resetScenes() {
+          tl.set(
+            "#scene1",
+            {
+              opacity: 1,
+              x: 0,
+              y: 0,
+              scale: 1,
+              scaleX: 1,
+              rotation: 0,
+              filter: "none",
+              clipPath: "none",
+              zIndex: 1,
+              skewX: 0,
+            },
+            t,
+          );
+          tl.set(
+            "#scene2",
+            {
+              opacity: 0,
+              x: 0,
+              y: 0,
+              scale: 1,
+              scaleX: 1,
+              rotation: 0,
+              filter: "none",
+              clipPath: "none",
+              zIndex: 2,
+              skewX: 0,
+            },
+            t,
+          );
+          tl.set(
+            "#s1",
+            {
+              opacity: 1,
+              x: 0,
+              y: 0,
+              scale: 1,
+              rotation: 0,
+              filter: "none",
+              skewX: 0,
+              scaleX: 1,
+              transformOrigin: "50% 50%",
+            },
+            t,
+          );
+          tl.set(
+            "#s2",
+            {
+              opacity: 1,
+              x: 0,
+              y: 0,
+              scale: 1,
+              rotation: 0,
+              filter: "none",
+              skewX: 0,
+              scaleX: 1,
+              transformOrigin: "50% 50%",
+            },
+            t,
+          );
+        }
+
+        // === TRANSITION 1: Flash Cut ===
+        resetScenes();
+        tl.to("#info-1", { opacity: 1, duration: 0.3 }, t + 0.2);
+        var T = t + 1.5;
+        tl.to("#flash-overlay", { opacity: 1, duration: 0.03, ease: "power4.out" }, T);
+        tl.set("#scene1", { opacity: 0 }, T + 0.03);
+        tl.set("#scene2", { opacity: 1 }, T + 0.03);
+        tl.to("#flash-overlay", { opacity: 0, duration: 0.1, ease: "power2.out" }, T + 0.05);
+        t = T + 1.5 + 1.0;
+        tl.to("#info-1", { opacity: 0, duration: 0.2 }, t);
+        t += 0.5;
+
+        // === TRANSITION 2: Gravity Drop ===
+        resetScenes();
+        tl.to("#info-2", { opacity: 1, duration: 0.3 }, t + 0.2);
+        T = t + 1.5;
+        tl.set("#scene2", { opacity: 1, zIndex: 1 }, T);
+        tl.set("#scene1", { zIndex: 10 }, T);
+        tl.to("#s1", { y: 1200, rotation: 4, duration: 0.5, ease: "power3.in" }, T);
+        tl.set("#scene1", { opacity: 0, zIndex: 1 }, T + 0.55);
+        tl.set("#scene2", { zIndex: 2 }, T + 0.55);
+        t = T + 1.5 + 1.0;
+        tl.to("#info-2", { opacity: 0, duration: 0.2 }, t);
+        t += 0.5;
+
+        // === TRANSITION 3: Morph Circle ===
+        resetScenes();
+        tl.to("#info-3", { opacity: 1, duration: 0.3 }, t + 0.2);
+        T = t + 1.5;
+        tl.set("#morph-circle", { opacity: 1, scale: 0 }, T);
+        tl.to("#morph-circle", { scale: 60, duration: 0.5, ease: "power3.in" }, T);
+        tl.set("#scene1", { opacity: 0 }, T + 0.4);
+        tl.set("#scene2", { opacity: 1 }, T + 0.4);
+        tl.to("#morph-circle", { opacity: 0, duration: 0.15, ease: "power2.out" }, T + 0.5);
+        tl.set("#morph-circle", { scale: 0 }, T + 0.7);
+        t = T + 1.5 + 1.0;
+        tl.to("#info-3", { opacity: 0, duration: 0.2 }, t);
+        t += 0.5;
+
+        // === OUTRO (3s) ===
+        tl.set("#scene1", { opacity: 0 }, t);
+        tl.set("#scene2", { opacity: 0 }, t);
+        tl.to("#outro-card", { opacity: 1, duration: 0.4, ease: "power2.inOut" }, t);
+        tl.to("#outro-label", { opacity: 1, duration: 0.4, ease: "power2.out" }, t + 0.3);
+        tl.fromTo(
+          "#outro-main",
+          { opacity: 0, y: 20 },
+          { opacity: 1, y: 0, duration: 0.5, ease: "power2.out" },
+          t + 0.6,
+        );
+        tl.to("#outro-card", { opacity: 0, duration: 0.4, ease: "power2.inOut" }, t + 2.4);
+
+        window.__timelines = window.__timelines || {};
+        window.__timelines["main"] = tl;
+      })();
+    </script>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="transitions-other" data-composition-src="compositions/transitions-other.html" data-start="0" data-duration="20" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/transitions-push.mdx b/docs/catalog/blocks/transitions-push.mdx
index 89f828d5a0..0a01ace768 100644
--- a/docs/catalog/blocks/transitions-push.mdx
+++ b/docs/catalog/blocks/transitions-push.mdx
@@ -3,34 +3,415 @@ title: "Push Transitions"
 description: "Showcase of push and slide transitions"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-push.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-push.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/transitions-push.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Push Transitions preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add transitions-push
-```
+<InstallCommand command="npx hyperframes add transitions-push" />
 
 That writes one file: `compositions/transitions-push.html`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`transitions-push.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+      }
+      .scene {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      .scene-inner {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+      }
+      .info-bar {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        z-index: 100;
+        background: rgba(0, 0, 0, 0.88);
+        padding: 24px 60px;
+        display: flex;
+        align-items: center;
+        gap: 40px;
+        opacity: 0;
+      }
+      .info-num {
+        font-size: 14px;
+        font-weight: 700;
+        color: #e07a5f;
+        letter-spacing: 0.1em;
+      }
+      .info-name {
+        font-size: 20px;
+        font-weight: 700;
+        color: #fff;
+      }
+      .info-desc {
+        font-size: 14px;
+        color: rgba(255, 255, 255, 0.5);
+      }
+      #title-card {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        background: #0d1b2a;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        z-index: 50;
+      }
+      #outro-card {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        background: #0d1b2a;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        z-index: 50;
+        opacity: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      data-composition-id="main"
+      data-start="0"
+      data-duration="24"
+      data-width="1920"
+      data-height="1080"
+    >
+      <!-- Title Card -->
+      <div id="title-card">
+        <div
+          id="title-label"
+          style="
+            font-size: 14px;
+            font-weight: 700;
+            color: #e07a5f;
+            letter-spacing: 0.2em;
+            text-transform: uppercase;
+            opacity: 0;
+          "
+        >
+          TRANSITION CATALOG
+        </div>
+        <div
+          id="title-main"
+          style="font-size: 72px; font-weight: 900; color: #fff; margin-top: 16px; opacity: 0"
+        >
+          Push Transitions
+        </div>
+        <div
+          id="title-count"
+          style="
+            font-size: 24px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.4);
+            margin-top: 12px;
+            opacity: 0;
+          "
+        >
+          4 transitions
+        </div>
+      </div>
+
+      <!-- Scene A -->
+      <div id="scene1" class="scene" style="z-index: 1">
+        <div class="scene-inner" id="s1" style="background: #1b263b">
+          <div style="font-size: 200px; font-weight: 900; color: rgba(255, 255, 255, 0.08)">
+            ONE
+          </div>
+          <div
+            style="
+              font-size: 32px;
+              font-weight: 700;
+              color: #778da9;
+              letter-spacing: 0.15em;
+              margin-top: -20px;
+            "
+          >
+            SCENE A
+          </div>
+        </div>
+      </div>
+
+      <!-- Scene B -->
+      <div id="scene2" class="scene" style="z-index: 2; opacity: 0">
+        <div class="scene-inner" id="s2" style="background: #e07a5f">
+          <div style="font-size: 200px; font-weight: 900; color: rgba(255, 255, 255, 0.15)">
+            TWO
+          </div>
+          <div
+            style="
+              font-size: 32px;
+              font-weight: 700;
+              color: #fff;
+              letter-spacing: 0.15em;
+              margin-top: -20px;
+            "
+          >
+            SCENE B
+          </div>
+        </div>
+      </div>
+
+      <!-- Info Bars -->
+      <div id="info-1" class="info-bar">
+        <div class="info-num">01</div>
+        <div class="info-name">Push Slide</div>
+        <div class="info-desc">Use a push slide transition</div>
+      </div>
+      <div id="info-2" class="info-bar">
+        <div class="info-num">02</div>
+        <div class="info-name">Vertical Push</div>
+        <div class="info-desc">Use a vertical push transition</div>
+      </div>
+      <div id="info-3" class="info-bar">
+        <div class="info-num">03</div>
+        <div class="info-name">Elastic Push</div>
+        <div class="info-desc">Use an elastic push transition with overshoot</div>
+      </div>
+      <div id="info-4" class="info-bar">
+        <div class="info-num">04</div>
+        <div class="info-name">Squeeze</div>
+        <div class="info-desc">Use a squeeze transition</div>
+      </div>
+
+      <!-- Outro Card -->
+      <div id="outro-card">
+        <div
+          id="outro-label"
+          style="
+            font-size: 14px;
+            font-weight: 700;
+            color: #e07a5f;
+            letter-spacing: 0.2em;
+            text-transform: uppercase;
+            opacity: 0;
+          "
+        >
+          PUSH TRANSITIONS
+        </div>
+        <div
+          id="outro-main"
+          style="font-size: 56px; font-weight: 900; color: #fff; margin-top: 16px; opacity: 0"
+        >
+          4 Transitions
+        </div>
+      </div>
+    </div>
+
+    <script>
+      (function () {
+        var tl = gsap.timeline({ paused: true });
+        var t = 0;
+
+        // === TITLE CARD (3s) ===
+        tl.to("#title-label", { opacity: 1, y: 0, duration: 0.4, ease: "power2.out" }, t + 0.3);
+        tl.fromTo(
+          "#title-main",
+          { opacity: 0, y: 20 },
+          { opacity: 1, y: 0, duration: 0.5, ease: "power2.out" },
+          t + 0.6,
+        );
+        tl.fromTo(
+          "#title-count",
+          { opacity: 0 },
+          { opacity: 1, duration: 0.4, ease: "power2.out" },
+          t + 1.0,
+        );
+        tl.to("#title-card", { opacity: 0, duration: 0.4, ease: "power2.inOut" }, t + 2.4);
+        t += 3;
 
-It runs for 24 seconds at 1920×1080. Paste this into your composition:
+        function resetScenes() {
+          tl.set(
+            "#scene1",
+            {
+              opacity: 1,
+              x: 0,
+              y: 0,
+              scale: 1,
+              scaleX: 1,
+              rotation: 0,
+              filter: "none",
+              clipPath: "none",
+              zIndex: 1,
+              skewX: 0,
+            },
+            t,
+          );
+          tl.set(
+            "#scene2",
+            {
+              opacity: 0,
+              x: 0,
+              y: 0,
+              scale: 1,
+              scaleX: 1,
+              rotation: 0,
+              filter: "none",
+              clipPath: "none",
+              zIndex: 2,
+              skewX: 0,
+            },
+            t,
+          );
+          tl.set(
+            "#s1",
+            {
+              opacity: 1,
+              x: 0,
+              y: 0,
+              scale: 1,
+              rotation: 0,
+              filter: "none",
+              skewX: 0,
+              scaleX: 1,
+              transformOrigin: "50% 50%",
+            },
+            t,
+          );
+          tl.set(
+            "#s2",
+            {
+              opacity: 1,
+              x: 0,
+              y: 0,
+              scale: 1,
+              rotation: 0,
+              filter: "none",
+              skewX: 0,
+              scaleX: 1,
+              transformOrigin: "50% 50%",
+            },
+            t,
+          );
+        }
 
-```html index.html
-<div
-  data-composition-id="transitions-push"
-  data-composition-src="compositions/transitions-push.html"
-  data-start="0"
-  data-duration="24"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+        // === TRANSITION 1: Push Slide ===
+        resetScenes();
+        tl.to("#info-1", { opacity: 1, duration: 0.3 }, t + 0.2);
+        var T = t + 1.5;
+        tl.to("#s1", { x: -1920, duration: 0.5, ease: "power3.inOut" }, T);
+        tl.fromTo("#s2", { x: 1920 }, { x: 0, duration: 0.5, ease: "power3.inOut" }, T);
+        tl.set("#scene2", { opacity: 1 }, T);
+        t = T + 1.5 + 1.0;
+        tl.to("#info-1", { opacity: 0, duration: 0.2 }, t);
+        t += 0.5;
+
+        // === TRANSITION 2: Vertical Push ===
+        resetScenes();
+        tl.to("#info-2", { opacity: 1, duration: 0.3 }, t + 0.2);
+        T = t + 1.5;
+        tl.to("#s1", { y: -1080, duration: 0.5, ease: "power3.inOut" }, T);
+        tl.fromTo("#s2", { y: 1080 }, { y: 0, duration: 0.5, ease: "power3.inOut" }, T);
+        tl.set("#scene2", { opacity: 1 }, T);
+        t = T + 1.5 + 1.0;
+        tl.to("#info-2", { opacity: 0, duration: 0.2 }, t);
+        t += 0.5;
+
+        // === TRANSITION 3: Elastic Push ===
+        resetScenes();
+        tl.to("#info-3", { opacity: 1, duration: 0.3 }, t + 0.2);
+        T = t + 1.5;
+        tl.set("#scene2", { opacity: 1 }, T);
+        tl.to("#s1", { x: -1920, duration: 0.5, ease: "power3.in" }, T);
+        tl.fromTo("#s2", { x: 1920 }, { x: 30, duration: 0.4, ease: "power4.out" }, T + 0.1);
+        tl.to("#s2", { x: -15, duration: 0.15, ease: "sine.inOut" }, T + 0.5);
+        tl.to("#s2", { x: 0, duration: 0.1, ease: "sine.out" }, T + 0.65);
+        t = T + 1.5 + 1.0;
+        tl.to("#info-3", { opacity: 0, duration: 0.2 }, t);
+        t += 0.5;
+
+        // === TRANSITION 4: Squeeze ===
+        resetScenes();
+        tl.to("#info-4", { opacity: 1, duration: 0.3 }, t + 0.2);
+        T = t + 1.5;
+        tl.to(
+          "#s1",
+          { scaleX: 0, transformOrigin: "left center", duration: 0.4, ease: "power3.inOut" },
+          T,
+        );
+        tl.set("#scene2", { opacity: 1 }, T);
+        tl.fromTo(
+          "#s2",
+          { scaleX: 0, transformOrigin: "right center" },
+          { scaleX: 1, duration: 0.4, ease: "power3.inOut" },
+          T + 0.1,
+        );
+        tl.set("#scene1", { opacity: 0 }, T + 0.5);
+        t = T + 1.5 + 1.0;
+        tl.to("#info-4", { opacity: 0, duration: 0.2 }, t);
+        t += 0.5;
+
+        // === OUTRO (3s) ===
+        tl.set("#scene1", { opacity: 0 }, t);
+        tl.set("#scene2", { opacity: 0 }, t);
+        tl.to("#outro-card", { opacity: 1, duration: 0.4, ease: "power2.inOut" }, t);
+        tl.to("#outro-label", { opacity: 1, duration: 0.4, ease: "power2.out" }, t + 0.3);
+        tl.fromTo(
+          "#outro-main",
+          { opacity: 0, y: 20 },
+          { opacity: 1, y: 0, duration: 0.5, ease: "power2.out" },
+          t + 0.6,
+        );
+        tl.to("#outro-card", { opacity: 0, duration: 0.4, ease: "power2.inOut" }, t + 2.4);
+
+        window.__timelines = window.__timelines || {};
+        window.__timelines["main"] = tl;
+      })();
+    </script>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="transitions-push" data-composition-src="compositions/transitions-push.html" data-start="0" data-duration="24" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/transitions-radial.mdx b/docs/catalog/blocks/transitions-radial.mdx
index fcd7f1727a..786e1590d7 100644
--- a/docs/catalog/blocks/transitions-radial.mdx
+++ b/docs/catalog/blocks/transitions-radial.mdx
@@ -3,34 +3,387 @@ title: "Radial Transitions"
 description: "Showcase of radial wipe and reveal transitions"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-radial.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-radial.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/transitions-radial.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Radial Transitions preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add transitions-radial
-```
+<InstallCommand command="npx hyperframes add transitions-radial" />
 
 That writes one file: `compositions/transitions-radial.html`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`transitions-radial.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920" />
+    <title>Radial Transitions</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #000;
+        overflow: hidden;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+      }
+
+      .scene {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+
+      .scene-inner {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+      }
+
+      #scene1 {
+        z-index: 1;
+      }
+      #scene2 {
+        z-index: 2;
+        opacity: 0;
+      }
+
+      #s1 {
+        background: #1b263b;
+      }
+      #s2 {
+        background: #e07a5f;
+      }
+
+      .big-text {
+        font-size: 200px;
+        font-weight: 900;
+        line-height: 1;
+        user-select: none;
+        pointer-events: none;
+      }
+      #s1 .big-text {
+        color: rgba(255, 255, 255, 0.08);
+      }
+      #s2 .big-text {
+        color: rgba(255, 255, 255, 0.15);
+      }
+
+      .label {
+        font-size: 32px;
+        font-weight: 600;
+        letter-spacing: 6px;
+        text-transform: uppercase;
+        margin-top: 12px;
+      }
+      #s1 .label {
+        color: #778da9;
+      }
+      #s2 .label {
+        color: #fff;
+      }
+
+      #info-bar {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 1920px;
+        height: 80px;
+        background: rgba(0, 0, 0, 0.88);
+        z-index: 100;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0;
+      }
+      #info-bar span {
+        color: #fff;
+        font-size: 22px;
+        font-weight: 500;
+        letter-spacing: 2px;
+      }
+
+      #title-card {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        background: #0d1b2a;
+        z-index: 200;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        opacity: 0;
+      }
+      #title-card .category {
+        font-size: 64px;
+        font-weight: 800;
+        color: #fff;
+        letter-spacing: 8px;
+        text-transform: uppercase;
+      }
+      #title-card .subtitle {
+        font-size: 24px;
+        font-weight: 400;
+        color: #778da9;
+        margin-top: 16px;
+        letter-spacing: 4px;
+      }
+
+      #outro-card {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        background: #0d1b2a;
+        z-index: 200;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        opacity: 0;
+      }
+      #outro-card .category {
+        font-size: 48px;
+        font-weight: 700;
+        color: #778da9;
+        letter-spacing: 6px;
+        text-transform: uppercase;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="composition"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="20"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="title-card">
+        <div class="category">Radial Transitions</div>
+        <div class="subtitle">3 Transitions</div>
+      </div>
+
+      <div id="scene1" class="scene">
+        <div id="s1" class="scene-inner">
+          <div class="big-text">ONE</div>
+          <div class="label">Scene A</div>
+        </div>
+      </div>
+
+      <div id="scene2" class="scene">
+        <div id="s2" class="scene-inner">
+          <div class="big-text">TWO</div>
+          <div class="label">Scene B</div>
+        </div>
+      </div>
 
-It runs for 20 seconds at 1920×1080. Paste this into your composition:
+      <div id="info-bar"><span id="info-text">Transition Name</span></div>
 
-```html index.html
-<div
-  data-composition-id="transitions-radial"
-  data-composition-src="compositions/transitions-radial.html"
-  data-start="0"
-  data-duration="20"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+      <div id="outro-card">
+        <div class="category">End of Radial Transitions</div>
+      </div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      (function () {
+        var tl = gsap.timeline({ paused: true });
+        var t = 0;
+
+        var demos = [
+          { name: "Circle Iris", time: 0 },
+          { name: "Diamond Iris", time: 0 },
+          { name: "Diagonal Split", time: 0 },
+        ];
+
+        function resetScenes() {
+          tl.set(
+            "#scene1",
+            {
+              opacity: 1,
+              x: 0,
+              y: 0,
+              scale: 1,
+              scaleX: 1,
+              rotation: 0,
+              rotationY: 0,
+              filter: "none",
+              clipPath: "none",
+              zIndex: 1,
+              skewX: 0,
+            },
+            t,
+          );
+          tl.set(
+            "#scene2",
+            {
+              opacity: 0,
+              x: 0,
+              y: 0,
+              scale: 1,
+              scaleX: 1,
+              rotation: 0,
+              rotationY: 0,
+              filter: "none",
+              clipPath: "none",
+              zIndex: 2,
+              skewX: 0,
+            },
+            t,
+          );
+          tl.set(
+            "#s1",
+            {
+              opacity: 1,
+              x: 0,
+              y: 0,
+              scale: 1,
+              rotation: 0,
+              rotationY: 0,
+              filter: "none",
+              skewX: 0,
+              clipPath: "none",
+            },
+            t,
+          );
+          tl.set(
+            "#s2",
+            {
+              opacity: 1,
+              x: 0,
+              y: 0,
+              scale: 1,
+              rotation: 0,
+              rotationY: 0,
+              filter: "none",
+              skewX: 0,
+              clipPath: "none",
+            },
+            t,
+          );
+        }
+
+        /* ── Title card (3s) ── */
+        tl.set("#title-card", { opacity: 1 }, 0);
+        tl.to("#title-card", { opacity: 0, duration: 0.5 }, 2.5);
+        t = 3;
+
+        /* ── Demo 1: Circle Iris ── */
+        resetScenes();
+        tl.set("#info-text", { textContent: "Circle Iris" }, t);
+        tl.to("#info-bar", { opacity: 1, duration: 0.3 }, t);
+        t += 1.5;
+        var T = t;
+        demos[0].time = T;
+        tl.set("#scene2", { opacity: 1, clipPath: "circle(0% at 50% 50%)" }, T);
+        tl.to(
+          "#scene2",
+          { clipPath: "circle(75% at 50% 50%)", duration: 0.5, ease: "power2.out" },
+          T,
+        );
+        tl.set("#scene1", { opacity: 0 }, T + 0.5);
+        tl.set("#scene2", { clipPath: "none" }, T + 0.55);
+        t = T + 1.5;
+        tl.to("#info-bar", { opacity: 0, duration: 0.3 }, t);
+        t += 0.5;
+
+        /* ── Demo 2: Diamond Iris ── */
+        resetScenes();
+        tl.set("#info-text", { textContent: "Diamond Iris" }, t);
+        tl.to("#info-bar", { opacity: 1, duration: 0.3 }, t);
+        t += 1.5;
+        T = t;
+        demos[1].time = T;
+        tl.set(
+          "#scene2",
+          { opacity: 1, clipPath: "polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%)" },
+          T,
+        );
+        tl.to(
+          "#scene2",
+          {
+            clipPath: "polygon(50% -20%, 120% 50%, 50% 120%, -20% 50%)",
+            duration: 0.5,
+            ease: "power2.out",
+          },
+          T,
+        );
+        tl.set("#scene1", { opacity: 0 }, T + 0.5);
+        tl.set("#scene2", { clipPath: "none" }, T + 0.55);
+        t = T + 1.5;
+        tl.to("#info-bar", { opacity: 0, duration: 0.3 }, t);
+        t += 0.5;
+
+        /* ── Demo 3: Diagonal Split ── */
+        resetScenes();
+        tl.set("#info-text", { textContent: "Diagonal Split" }, t);
+        tl.to("#info-bar", { opacity: 1, duration: 0.3 }, t);
+        t += 1.5;
+        T = t;
+        demos[2].time = T;
+        tl.set("#scene2", { opacity: 1, zIndex: 1 }, T);
+        tl.set(
+          "#scene1",
+          { zIndex: 10, clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)" },
+          T,
+        );
+        tl.to(
+          "#scene1",
+          {
+            clipPath: "polygon(60% 0%, 100% 0%, 100% 40%, 60% 0%)",
+            duration: 0.5,
+            ease: "power3.inOut",
+          },
+          T,
+        );
+        tl.set("#scene1", { opacity: 0, zIndex: 1, clipPath: "none" }, T + 0.55);
+        tl.set("#scene2", { zIndex: 2 }, T + 0.55);
+        t = T + 1.5;
+        tl.to("#info-bar", { opacity: 0, duration: 0.3 }, t);
+        t += 0.5;
+
+        /* ── Outro (3s) ── */
+        tl.set("#outro-card", { opacity: 1 }, t);
+        tl.to("#outro-card", { opacity: 0, duration: 0.5 }, t + 2.5);
+
+        window.__timelines["main"] = tl;
+      })();
+    </script>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="transitions-radial" data-composition-src="compositions/transitions-radial.html" data-start="0" data-duration="20" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/transitions-scale.mdx b/docs/catalog/blocks/transitions-scale.mdx
index e9d3c44e10..d4776afc9c 100644
--- a/docs/catalog/blocks/transitions-scale.mdx
+++ b/docs/catalog/blocks/transitions-scale.mdx
@@ -3,34 +3,382 @@ title: "Scale Transitions"
 description: "Showcase of scale and zoom transitions"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-scale.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-scale.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/transitions-scale.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Scale Transitions preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add transitions-scale
-```
+<InstallCommand command="npx hyperframes add transitions-scale" />
 
 That writes one file: `compositions/transitions-scale.html`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`transitions-scale.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+      }
+      .scene {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      .scene-inner {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+      }
+      .info-bar {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        z-index: 100;
+        background: rgba(0, 0, 0, 0.88);
+        padding: 24px 60px;
+        display: flex;
+        align-items: center;
+        gap: 40px;
+        opacity: 0;
+      }
+      .info-num {
+        font-size: 14px;
+        font-weight: 700;
+        color: #e07a5f;
+        letter-spacing: 0.1em;
+      }
+      .info-name {
+        font-size: 20px;
+        font-weight: 700;
+        color: #fff;
+      }
+      .info-desc {
+        font-size: 14px;
+        color: rgba(255, 255, 255, 0.5);
+      }
+      #title-card {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        background: #0d1b2a;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        z-index: 50;
+      }
+      #outro-card {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        background: #0d1b2a;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        z-index: 50;
+        opacity: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      data-composition-id="main"
+      data-start="0"
+      data-duration="15"
+      data-width="1920"
+      data-height="1080"
+    >
+      <!-- Title Card -->
+      <div id="title-card">
+        <div
+          id="title-label"
+          style="
+            font-size: 14px;
+            font-weight: 700;
+            color: #e07a5f;
+            letter-spacing: 0.2em;
+            text-transform: uppercase;
+            opacity: 0;
+          "
+        >
+          TRANSITION CATALOG
+        </div>
+        <div
+          id="title-main"
+          style="font-size: 72px; font-weight: 900; color: #fff; margin-top: 16px; opacity: 0"
+        >
+          Scale Transitions
+        </div>
+        <div
+          id="title-count"
+          style="
+            font-size: 24px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.4);
+            margin-top: 12px;
+            opacity: 0;
+          "
+        >
+          2 transitions
+        </div>
+      </div>
+
+      <!-- Scene A -->
+      <div id="scene1" class="scene" style="z-index: 1">
+        <div class="scene-inner" id="s1" style="background: #1b263b">
+          <div style="font-size: 200px; font-weight: 900; color: rgba(255, 255, 255, 0.08)">
+            ONE
+          </div>
+          <div
+            style="
+              font-size: 32px;
+              font-weight: 700;
+              color: #778da9;
+              letter-spacing: 0.15em;
+              margin-top: -20px;
+            "
+          >
+            SCENE A
+          </div>
+        </div>
+      </div>
+
+      <!-- Scene B -->
+      <div id="scene2" class="scene" style="z-index: 2; opacity: 0">
+        <div class="scene-inner" id="s2" style="background: #e07a5f">
+          <div style="font-size: 200px; font-weight: 900; color: rgba(255, 255, 255, 0.15)">
+            TWO
+          </div>
+          <div
+            style="
+              font-size: 32px;
+              font-weight: 700;
+              color: #fff;
+              letter-spacing: 0.15em;
+              margin-top: -20px;
+            "
+          >
+            SCENE B
+          </div>
+        </div>
+      </div>
+
+      <!-- Info Bars -->
+      <div id="info-1" class="info-bar">
+        <div class="info-num">01</div>
+        <div class="info-name">Zoom Through</div>
+        <div class="info-desc">Use a zoom through transition</div>
+      </div>
+      <div id="info-2" class="info-bar">
+        <div class="info-num">02</div>
+        <div class="info-name">Zoom Out</div>
+        <div class="info-desc">Use a zoom out transition</div>
+      </div>
+
+      <!-- Outro Card -->
+      <div id="outro-card">
+        <div
+          id="outro-label"
+          style="
+            font-size: 14px;
+            font-weight: 700;
+            color: #e07a5f;
+            letter-spacing: 0.2em;
+            text-transform: uppercase;
+            opacity: 0;
+          "
+        >
+          SCALE TRANSITIONS
+        </div>
+        <div
+          id="outro-main"
+          style="font-size: 56px; font-weight: 900; color: #fff; margin-top: 16px; opacity: 0"
+        >
+          2 Transitions
+        </div>
+      </div>
+    </div>
+
+    <script>
+      (function () {
+        var tl = gsap.timeline({ paused: true });
+        var t = 0;
 
-It runs for 15 seconds at 1920×1080. Paste this into your composition:
+        // === TITLE CARD (3s) ===
+        tl.to("#title-label", { opacity: 1, y: 0, duration: 0.4, ease: "power2.out" }, t + 0.3);
+        tl.fromTo(
+          "#title-main",
+          { opacity: 0, y: 20 },
+          { opacity: 1, y: 0, duration: 0.5, ease: "power2.out" },
+          t + 0.6,
+        );
+        tl.fromTo(
+          "#title-count",
+          { opacity: 0 },
+          { opacity: 1, duration: 0.4, ease: "power2.out" },
+          t + 1.0,
+        );
+        tl.to("#title-card", { opacity: 0, duration: 0.4, ease: "power2.inOut" }, t + 2.4);
+        t += 3;
 
-```html index.html
-<div
-  data-composition-id="transitions-scale"
-  data-composition-src="compositions/transitions-scale.html"
-  data-start="0"
-  data-duration="15"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+        function resetScenes() {
+          tl.set(
+            "#scene1",
+            {
+              opacity: 1,
+              x: 0,
+              y: 0,
+              scale: 1,
+              scaleX: 1,
+              rotation: 0,
+              filter: "none",
+              clipPath: "none",
+              zIndex: 1,
+              skewX: 0,
+            },
+            t,
+          );
+          tl.set(
+            "#scene2",
+            {
+              opacity: 0,
+              x: 0,
+              y: 0,
+              scale: 1,
+              scaleX: 1,
+              rotation: 0,
+              filter: "none",
+              clipPath: "none",
+              zIndex: 2,
+              skewX: 0,
+            },
+            t,
+          );
+          tl.set(
+            "#s1",
+            {
+              opacity: 1,
+              x: 0,
+              y: 0,
+              scale: 1,
+              rotation: 0,
+              filter: "none",
+              skewX: 0,
+              scaleX: 1,
+              transformOrigin: "50% 50%",
+            },
+            t,
+          );
+          tl.set(
+            "#s2",
+            {
+              opacity: 1,
+              x: 0,
+              y: 0,
+              scale: 1,
+              rotation: 0,
+              filter: "none",
+              skewX: 0,
+              scaleX: 1,
+              transformOrigin: "50% 50%",
+            },
+            t,
+          );
+        }
+
+        // === TRANSITION 1: Zoom Through ===
+        resetScenes();
+        tl.to("#info-1", { opacity: 1, duration: 0.3 }, t + 0.2);
+        var T = t + 1.5;
+        tl.to(
+          "#s1",
+          { scale: 2.5, opacity: 0, filter: "blur(8px)", duration: 0.4, ease: "power3.in" },
+          T,
+        );
+        tl.set("#scene2", { opacity: 1 }, T);
+        tl.fromTo(
+          "#s2",
+          { scale: 0.5, opacity: 0, filter: "blur(8px)" },
+          { scale: 1, opacity: 1, filter: "blur(0px)", duration: 0.4, ease: "power3.out" },
+          T + 0.15,
+        );
+        t = T + 1.5 + 1.0;
+        tl.to("#info-1", { opacity: 0, duration: 0.2 }, t);
+        t += 0.5;
+
+        // === TRANSITION 2: Zoom Out ===
+        resetScenes();
+        tl.to("#info-2", { opacity: 1, duration: 0.3 }, t + 0.2);
+        T = t + 1.5;
+        tl.set("#scene2", { opacity: 1, zIndex: 1 }, T);
+        tl.set("#scene1", { zIndex: 10, transformOrigin: "50% 50%" }, T);
+        tl.to("#s1", { scale: 0.3, opacity: 0, duration: 0.4, ease: "power3.in" }, T);
+        tl.set("#scene1", { zIndex: 1 }, T + 0.5);
+        tl.set("#scene2", { zIndex: 2 }, T + 0.5);
+        t = T + 1.5 + 1.0;
+        tl.to("#info-2", { opacity: 0, duration: 0.2 }, t);
+        t += 0.5;
+
+        // === OUTRO (3s) ===
+        tl.set("#scene1", { opacity: 0 }, t);
+        tl.set("#scene2", { opacity: 0 }, t);
+        tl.to("#outro-card", { opacity: 1, duration: 0.4, ease: "power2.inOut" }, t);
+        tl.to("#outro-label", { opacity: 1, duration: 0.4, ease: "power2.out" }, t + 0.3);
+        tl.fromTo(
+          "#outro-main",
+          { opacity: 0, y: 20 },
+          { opacity: 1, y: 0, duration: 0.5, ease: "power2.out" },
+          t + 0.6,
+        );
+        tl.to("#outro-card", { opacity: 0, duration: 0.4, ease: "power2.inOut" }, t + 2.4);
+
+        window.__timelines = window.__timelines || {};
+        window.__timelines["main"] = tl;
+      })();
+    </script>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="transitions-scale" data-composition-src="compositions/transitions-scale.html" data-start="0" data-duration="15" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/ui-3d-reveal.mdx b/docs/catalog/blocks/ui-3d-reveal.mdx
index 236faf2adc..149ac4237e 100644
--- a/docs/catalog/blocks/ui-3d-reveal.mdx
+++ b/docs/catalog/blocks/ui-3d-reveal.mdx
@@ -3,34 +3,2796 @@ title: "3D UI Reveal"
 description: "Perspective 3D reveal animation for UI elements"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ui-3d-reveal.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ui-3d-reveal.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/ui-3d-reveal.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="3D UI Reveal preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add ui-3d-reveal
-```
+<InstallCommand command="npx hyperframes add ui-3d-reveal" />
 
 That writes one file: `compositions/ui-3d-reveal.html`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`ui-3d-reveal.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>ui-3d-reveal</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=block"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background-color: #0a0a0f;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      data-composition-id="ui-3d-reveal"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="13"
+    >
+      <!-- Background: Figma outer canvas dark -->
+      <div class="bg-base"></div>
+      <div class="bg-glow" id="bgGlow"></div>
+
+      <!-- ══════════════════════════════════════════
+         INTRO: Figma logo stroke draw + fill
+    ══════════════════════════════════════════ -->
+      <div class="intro-layer" id="introLayer">
+        <svg class="intro-svg" viewBox="0 0 1920 1080" xmlns="http://www.w3.org/2000/svg">
+          <g class="intro-logo" transform="translate(865, 397.5)">
+            <!-- Fill layer -->
+            <path
+              class="il-fill il-fill-1"
+              d="M95 0H47.5C21.27 0 0 21.27 0 47.5S21.27 95 47.5 95H95V0Z"
+              fill="#F24E1E"
+              opacity="0"
+            />
+            <path
+              class="il-fill il-fill-2"
+              d="M95 0V95H142.5C168.73 95 190 73.73 190 47.5S168.73 0 142.5 0H95Z"
+              fill="#FF7262"
+              opacity="0"
+            />
+            <path
+              class="il-fill il-fill-3"
+              d="M95 95H47.5C21.27 95 0 116.27 0 142.5S21.27 190 47.5 190H95V95Z"
+              fill="#A259FF"
+              opacity="0"
+            />
+            <circle
+              class="il-fill il-fill-4"
+              cx="142.5"
+              cy="142.5"
+              r="47.5"
+              fill="#1ABCFE"
+              opacity="0"
+            />
+            <path
+              class="il-fill il-fill-5"
+              d="M47.5 190C21.27 190 0 211.27 0 237.5S21.27 285 47.5 285 95 263.73 95 237.5V190H47.5Z"
+              fill="#0ACF83"
+              opacity="0"
+            />
+            <!-- Stroke layer -->
+            <path
+              class="il-stroke il-stroke-1"
+              d="M95 0H47.5C21.27 0 0 21.27 0 47.5S21.27 95 47.5 95H95V0Z"
+              fill="none"
+              stroke="#F24E1E"
+              stroke-width="2"
+            />
+            <path
+              class="il-stroke il-stroke-2"
+              d="M95 0V95H142.5C168.73 95 190 73.73 190 47.5S168.73 0 142.5 0H95Z"
+              fill="none"
+              stroke="#FF7262"
+              stroke-width="2"
+            />
+            <path
+              class="il-stroke il-stroke-3"
+              d="M95 95H47.5C21.27 95 0 116.27 0 142.5S21.27 190 47.5 190H95V95Z"
+              fill="none"
+              stroke="#A259FF"
+              stroke-width="2"
+            />
+            <circle
+              class="il-stroke il-stroke-4"
+              cx="142.5"
+              cy="142.5"
+              r="47.5"
+              fill="none"
+              stroke="#1ABCFE"
+              stroke-width="2"
+            />
+            <path
+              class="il-stroke il-stroke-5"
+              d="M47.5 190C21.27 190 0 211.27 0 237.5S21.27 285 47.5 285 95 263.73 95 237.5V190H47.5Z"
+              fill="none"
+              stroke="#0ACF83"
+              stroke-width="2"
+            />
+          </g>
+        </svg>
+      </div>
+
+      <!-- 3D scene -->
+      <div class="scene" id="scene">
+        <div class="card-glow" id="cardGlow"></div>
+
+        <div class="card-wrapper" id="cardWrapper">
+          <!-- ═══════════════════════════════════════
+             FRONT FACE — Figma Interface
+        ═══════════════════════════════════════ -->
+          <div class="ui-card" id="uiCard">
+            <!-- ── TOOLBAR ── -->
+            <div class="fig-toolbar" id="figToolbar">
+              <!-- Left: logo + tools -->
+              <div class="tb-left">
+                <div class="fig-logo">
+                  <svg width="18" height="26" viewBox="0 0 18 26" fill="none">
+                    <rect x="0" y="0" width="9" height="9" rx="4.5" fill="#F24E1E" />
+                    <rect x="9" y="0" width="9" height="9" rx="4.5" fill="#FF7262" />
+                    <rect x="0" y="8.5" width="9" height="9" rx="4.5" fill="#A259FF" />
+                    <circle cx="13.5" cy="13" r="4.5" fill="#1ABCFE" />
+                    <rect x="0" y="17" width="9" height="9" rx="4.5" fill="#0ACF83" />
+                  </svg>
+                </div>
+                <div class="tool-divider"></div>
+                <div class="tool-group">
+                  <div class="tool-btn active" title="Move (V)">
+                    <svg viewBox="0 0 16 16" fill="none" width="14" height="14">
+                      <path d="M2 2l5 12 2-4 4-2L2 2z" fill="currentColor" />
+                    </svg>
+                  </div>
+                  <div class="tool-btn" title="Scale (K)">
+                    <svg viewBox="0 0 16 16" fill="none" width="14" height="14">
+                      <path
+                        d="M3 3l10 10M10 3h3v3M3 10H6"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        stroke-linecap="round"
+                      />
+                    </svg>
+                  </div>
+                  <div class="tool-divider"></div>
+                  <div class="tool-btn" title="Frame (F)">
+                    <svg viewBox="0 0 16 16" fill="none" width="14" height="14">
+                      <rect
+                        x="2"
+                        y="5"
+                        width="12"
+                        height="9"
+                        rx="1"
+                        stroke="currentColor"
+                        stroke-width="1.4"
+                      />
+                      <path
+                        d="M5 5V3M11 5V3M5 14v2M11 14v2M2 8H0M14 8h2"
+                        stroke="currentColor"
+                        stroke-width="1.4"
+                        stroke-linecap="round"
+                      />
+                    </svg>
+                  </div>
+                  <div class="tool-btn" title="Rectangle (R)">
+                    <svg viewBox="0 0 16 16" fill="none" width="14" height="14">
+                      <rect
+                        x="2"
+                        y="4"
+                        width="12"
+                        height="9"
+                        rx="1.5"
+                        stroke="currentColor"
+                        stroke-width="1.4"
+                      />
+                    </svg>
+                  </div>
+                  <div class="tool-btn" title="Text (T)">
+                    <svg viewBox="0 0 16 16" fill="none" width="14" height="14">
+                      <path
+                        d="M2 4h12M8 4v9M5 13h6"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        stroke-linecap="round"
+                      />
+                    </svg>
+                  </div>
+                  <div class="tool-btn" title="Pen (P)">
+                    <svg viewBox="0 0 16 16" fill="none" width="14" height="14">
+                      <path
+                        d="M3 13L8 3l5 10M5.5 8.5h5"
+                        stroke="currentColor"
+                        stroke-width="1.4"
+                        stroke-linecap="round"
+                      />
+                    </svg>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Center: file breadcrumb -->
+              <div class="tb-center">
+                <span class="file-name">App Redesign</span>
+                <span class="file-chevron">›</span>
+                <span class="file-page">Design System</span>
+                <svg class="file-arrow" viewBox="0 0 10 6" width="10" height="6" fill="none">
+                  <path
+                    d="M1 1l4 4 4-4"
+                    stroke="currentColor"
+                    stroke-width="1.4"
+                    stroke-linecap="round"
+                  />
+                </svg>
+              </div>
+
+              <!-- Right: mode tabs + share + avatars -->
+              <div class="tb-right">
+                <div class="mode-tabs">
+                  <span class="mode-tab">Design</span>
+                  <span class="mode-tab active">Dev</span>
+                </div>
+                <div class="share-btn">
+                  <svg viewBox="0 0 16 16" fill="none" width="12" height="12">
+                    <path
+                      d="M4 8H12M9 5l3 3-3 3"
+                      stroke="white"
+                      stroke-width="1.5"
+                      stroke-linecap="round"
+                    />
+                  </svg>
+                  Share
+                </div>
+                <div class="avatar-cluster">
+                  <div class="fig-avatar" style="background: #a259ff; z-index: 3">S</div>
+                  <div
+                    class="fig-avatar"
+                    style="background: #f24e1e; z-index: 2; margin-left: -8px"
+                  >
+                    J
+                  </div>
+                  <div
+                    class="fig-avatar"
+                    style="background: #1abcfe; z-index: 1; margin-left: -8px"
+                  >
+                    K
+                  </div>
+                </div>
+                <div class="present-btn">▶</div>
+              </div>
+            </div>
+
+            <!-- ── BODY ── -->
+            <div class="fig-body">
+              <!-- LAYERS PANEL -->
+              <div class="fig-layers" id="figLayers">
+                <div class="panel-tabs">
+                  <span class="ptab active">Layers</span>
+                  <span class="ptab">Assets</span>
+                </div>
+
+                <div class="layer-search">
+                  <svg viewBox="0 0 14 14" fill="none" width="12" height="12">
+                    <circle cx="6" cy="6" r="4.5" stroke="currentColor" stroke-width="1.3" />
+                    <path
+                      d="M9.5 9.5l2.5 2.5"
+                      stroke="currentColor"
+                      stroke-width="1.3"
+                      stroke-linecap="round"
+                    />
+                  </svg>
+                  <span class="search-placeholder">Search layers</span>
+                </div>
+
+                <div class="layer-list">
+                  <div class="layer-item page-item">
+                    <svg class="li-icon" viewBox="0 0 12 12" fill="none" width="12" height="12">
+                      <rect
+                        x="1"
+                        y="1"
+                        width="8"
+                        height="10"
+                        rx="1"
+                        stroke="currentColor"
+                        stroke-width="1.2"
+                      />
+                      <path
+                        d="M3 4h5M3 7h3"
+                        stroke="currentColor"
+                        stroke-width="1.2"
+                        stroke-linecap="round"
+                      />
+                    </svg>
+                    <span>Page 1</span>
+                  </div>
+
+                  <div class="layer-item frame-item expanded">
+                    <svg class="li-collapse" viewBox="0 0 8 8" width="8" height="8" fill="none">
+                      <path
+                        d="M2 3l2 2 2-2"
+                        stroke="currentColor"
+                        stroke-width="1.2"
+                        stroke-linecap="round"
+                      />
+                    </svg>
+                    <svg
+                      class="li-icon frame-icon"
+                      viewBox="0 0 12 12"
+                      fill="none"
+                      width="12"
+                      height="12"
+                    >
+                      <rect
+                        x="2"
+                        y="3"
+                        width="8"
+                        height="6"
+                        stroke="currentColor"
+                        stroke-width="1.2"
+                      />
+                      <path
+                        d="M4 3V1M8 3V1M4 9v2M8 9v2M2 6H0M10 6h2"
+                        stroke="currentColor"
+                        stroke-width="1.2"
+                        stroke-linecap="round"
+                      />
+                    </svg>
+                    <span>HeyGen — Home</span>
+                  </div>
+
+                  <div class="layer-item group-item indent-1">
+                    <svg class="li-collapse" viewBox="0 0 8 8" width="8" height="8" fill="none">
+                      <path
+                        d="M2 3l2 2 2-2"
+                        stroke="currentColor"
+                        stroke-width="1.2"
+                        stroke-linecap="round"
+                      />
+                    </svg>
+                    <svg class="li-icon" viewBox="0 0 12 12" fill="none" width="12" height="12">
+                      <rect
+                        x="1"
+                        y="1"
+                        width="10"
+                        height="10"
+                        rx="1"
+                        stroke="currentColor"
+                        stroke-width="1.2"
+                      />
+                    </svg>
+                    <span>Navigation</span>
+                  </div>
+
+                  <div class="layer-item comp-item indent-2">
+                    <svg
+                      class="li-icon comp-icon"
+                      viewBox="0 0 12 12"
+                      fill="none"
+                      width="12"
+                      height="12"
+                    >
+                      <path
+                        d="M6 1L11 6 6 11 1 6z"
+                        fill="none"
+                        stroke="#A259FF"
+                        stroke-width="1.2"
+                      />
+                    </svg>
+                    <span>Logo / Mark</span>
+                  </div>
+
+                  <div class="layer-item text-item indent-2">
+                    <svg class="li-icon" viewBox="0 0 12 12" fill="none" width="12" height="12">
+                      <path
+                        d="M2 3h8M6 3v7M3 10h6"
+                        stroke="currentColor"
+                        stroke-width="1.2"
+                        stroke-linecap="round"
+                      />
+                    </svg>
+                    <span>Nav Links</span>
+                  </div>
+
+                  <div class="layer-item comp-item indent-2 selected-layer" id="selectedLayer">
+                    <svg
+                      class="li-icon comp-icon"
+                      viewBox="0 0 12 12"
+                      fill="none"
+                      width="12"
+                      height="12"
+                    >
+                      <path
+                        d="M6 1L11 6 6 11 1 6z"
+                        fill="none"
+                        stroke="#A259FF"
+                        stroke-width="1.2"
+                      />
+                    </svg>
+                    <span>Create Card</span>
+                  </div>
+
+                  <div class="layer-item group-item indent-1 collapsed">
+                    <svg
+                      class="li-collapse"
+                      viewBox="0 0 8 8"
+                      width="8"
+                      height="8"
+                      fill="none"
+                      style="transform: rotate(-90deg)"
+                    >
+                      <path
+                        d="M2 3l2 2 2-2"
+                        stroke="currentColor"
+                        stroke-width="1.2"
+                        stroke-linecap="round"
+                      />
+                    </svg>
+                    <svg class="li-icon" viewBox="0 0 12 12" fill="none" width="12" height="12">
+                      <rect
+                        x="1"
+                        y="1"
+                        width="10"
+                        height="10"
+                        rx="1"
+                        stroke="currentColor"
+                        stroke-width="1.2"
+                      />
+                    </svg>
+                    <span>Hero</span>
+                  </div>
+
+                  <div class="layer-item group-item indent-1 collapsed">
+                    <svg
+                      class="li-collapse"
+                      viewBox="0 0 8 8"
+                      width="8"
+                      height="8"
+                      fill="none"
+                      style="transform: rotate(-90deg)"
+                    >
+                      <path
+                        d="M2 3l2 2 2-2"
+                        stroke="currentColor"
+                        stroke-width="1.2"
+                        stroke-linecap="round"
+                      />
+                    </svg>
+                    <svg class="li-icon" viewBox="0 0 12 12" fill="none" width="12" height="12">
+                      <rect
+                        x="1"
+                        y="1"
+                        width="10"
+                        height="10"
+                        rx="1"
+                        stroke="currentColor"
+                        stroke-width="1.2"
+                      />
+                    </svg>
+                    <span>Feature Grid</span>
+                  </div>
+
+                  <div class="layer-item group-item indent-1 collapsed">
+                    <svg
+                      class="li-collapse"
+                      viewBox="0 0 8 8"
+                      width="8"
+                      height="8"
+                      fill="none"
+                      style="transform: rotate(-90deg)"
+                    >
+                      <path
+                        d="M2 3l2 2 2-2"
+                        stroke="currentColor"
+                        stroke-width="1.2"
+                        stroke-linecap="round"
+                      />
+                    </svg>
+                    <svg class="li-icon" viewBox="0 0 12 12" fill="none" width="12" height="12">
+                      <rect
+                        x="1"
+                        y="1"
+                        width="10"
+                        height="10"
+                        rx="1"
+                        stroke="currentColor"
+                        stroke-width="1.2"
+                      />
+                    </svg>
+                    <span>Footer</span>
+                  </div>
+                </div>
+
+                <div class="page-bar">
+                  <div class="pbar-tab active">Design System</div>
+                  <div class="pbar-tab">Landing</div>
+                  <div class="pbar-add">+</div>
+                </div>
+              </div>
+
+              <!-- CANVAS -->
+              <div class="fig-canvas" id="figCanvas">
+                <div class="canvas-frame-label">HeyGen — Home</div>
+
+                <!-- The artboard / HeyGen app.heygen.com — light mode -->
+                <div class="artboard" id="artboard">
+                  <!-- ══ LEFT ICON NAV (56px) ══ -->
+                  <div class="hg-icnav">
+                    <div class="hg-iclogo">
+                      <img
+                        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAYAAACohjseAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAOKADAAQAAAABAAAAOAAAAAANV2hTAAAM+0lEQVRoBe2ZeZAU1R3Hf6+n59zZ2WWQQ0MUgqCoq6iIgIKYAgoTExMPCGI8qqIUJpZHLINltNQylWiViUlKqxRTKB6UWwWFURQPXJVDUTSAinIootzsxVw93dPdL9/f6+ndddwZd5a1yj/2Vb199/F53987ppeo3/WvQP8K9K9A/wr8EFfgk3VJWvPC70jKgD+9hqVy08zlcsXcu2XCz/u+Q9HnAzQ2Rmnk0JVBcicTSaG1fva5OX3+8TzOyBekPTlJAWmR7WTpuacvFFf0+fglHWol6SNLfrz2LP34wQeD5EypEaaIaxZFaupHDFy+YBp37OTojVXtRIEI6aGBNPf3K+XBG16Spx/ZoJVb9x3g+tWnxc3smrgw43GtQBFhwlsUi8W1YDT5EE/jy9liRsQh13W9SQVqaVBNiN677Xl5Z+Vp9r60bwCbmuK1gdzbcS0fipBJYcpTGHBBhCGkY/H4Cckld/xYTTNPn77a1jlhVjOZoHsfeEmu6cztu1ifANbHM5viupUIQ7UwzJJ9qBgPijxFaiP6oPrAczzt7bPEKXUOSVYxg9HTOAX4GIrE6JxHXpctT66U4/sOj+iIAQe+v+yVRND6CQOFoBorxsoFNQ6RB9ggyqI1sTP8ExXVDrxSVFEAkEGz8BGNknqI1j79prynryCPCDC5ftkDdSFjRhgqKSiGBBiD+mmG1FEeqA+Hz3r51uU88RtH0LEJmyTHWUH27BjUFKTXW3TX8ib5bmOXK8arUf3fXgMOWf/snLqwdWuUlSqqx6rpSjXOAySXMTCrGEBYE5nKU5w3ThR0hzIvtHZOmOGUA3YO8YRBZydfp+ZlTfLczlrVx/xuq2o5ZF1jQ0I3FkcDOcFAvM88k0QIWF15T1Ud5hoommworsWnNF7xbx5sgkPDB+dI7jQ85TgvCyVz8NJBiDTWpP7otHxz+Yvyb1zeG1c14KCmh+N1kfbVsbCls/kxUJAVUqboKcZQCrSoroojL5nLky6dCE/0P7NEa9SmhbtbSO4xPTPNFN88OSHJwMykK0kWKDDMlH/671L3g8a7ZahayKoB62sCGxOhXJ2nVBEEk+d95oP4cAyqs9kKQ4VHWcJ9Y/aSa/1Jbpgj5h3l0kO7m0m+nSECF6WViQrAeSryIaTZRMcZ8ozEaGpe9JSc6rfvSVgV4Inv/mNlXU1+pLfXfJUQFpXyYLw0AytTVfAmDfgqTaaZ3Vg6qXdmi1tGmTQhnCH30XaSBh89UI5NFcjKVHOSM4mG2m7tKOmuemyx83eV0YM/qpse1KMx7zxwf20t3aYJV03cGx9HHgBgTPCIAwqBSnaNR/ZkqNCSbXvxsqXJSmOd95zcaAXp1B3o5Ryd6HL0Gy0QJaFgsCApCFW5eweyfGZra+deLb7zAOoR4Jg1f51dP8BeogtX8AisjHJYWVaN+diU+DBRM0ChAufet6ZlPms0vzb7xcFeo8p/N2yQwfu+oBVtQZqiB3DjoO9deLSfDMhbspL4Z4i3nOhaik2zr9LGVurxOwEb1t3bEIu6H8ailo6LWvXVAciwSkFvCF0DIKpI1HN3p8hoTrua7b62au7rMytNolJZU5OMPHWQHmwN0+U5nRImlG0TUgzJSbEgRbRZaM/cfGX5XyUVAac2Xh83RiZ2x2JaXYfJYTZ8iDCEUrOLauahNkrvOezaOdMICu2tdVeu/nmlyZcrG7u56epkMHxJi+00bmqY/FRpvcsfl1P2D6CFIkLDwyna8NIccU5pHT9dEXDSezdvrUmI0Wx+DFgUEGbpKcWdFHIZOrRjt7Qylilsua22JnLB2jlr9/oDVBuO/2jV50Pq3RHtgcNC4FYwCpFC2rSa05bcmnHD6w5njUU06SJs0565soAT3rr+vvqjxR2iwyw7DxByLdq7dRdl21Kmlcvvj+iB+Vuu2/KyP+SKhw8OPYYijyQjofEREaiz8LRut52WVst59rwbav/s1ysNj12/7KMRR4tTHDxz+Jnsqqcyrgzsbldq2IkBMt0wZU3XMB13d8HRNxYovKJlzMQnS/vy02UBp6y75mDdIDFIVYQ1asKm5l37qG1/m51Pp9twJ/9z+/ytf/E7arp7Z2TQ0IH/SoZCM+qDwWFhVyte234NIgu325ac8XU0Hpt40m/Fvs4SxF5ddOfY4TX31MQDOFd0D473M6D4Scqhq75+4PIvlnMosU8OZZ3/7Rs96Yxv9FdMYMt27wIil9Dwyy7TmqJDX+53cql0RhQKq7Zfv+2Sri12Pm7cVavrv4kFAqPCLl5u7Io/aLvW43iIhDY2Fjvu47zxIfbwMCEES6VcfSxwUywe4kuoQy0+miWUc6GgendDDoZUirLCiPP2iYSCDX4/pWFZwJbPv1i8d4v5K9uydkV1/cId135ywG+854nMNXEKzw/pgdNCrghhxLJQfhsOfe5RkejQ9xfl2KRnqPKVz0wbnIwOcLDnlGJKNU89z0xZKZzMrqekb7JYIHIA77h4GZRxZQE3X/H+dWjDXjljsfwpPhfdrkkxKeBSjO8n9N5jx3B8QfOe4KZH6cGJfmPh5m9MJAbilmX1PMv2IDy1GI7TvpmqRVD9eHvTtPPNfl+lYVlArggzClhL6AlN0i9hTAlhl92ypf12pJVqaObA465WJoXHCSWCwZo1j7Yee+685Fe6rv9IinDR/Lw95pshd+TF/YOGr+MiMB8+8GZBWQNX/ZarCGgvoY/0Ao35VqseZEgAKZF9MLRhBdnZCAEpDCEnIPmVoGDQ4R2KBE+YzdLfXwzn8AmKUEJhH07VQ37eLBTaA7GbuN/uXFnAzPNyCKWqh+sAK47GVszC82FQYEBQF4pxKBdS1TQdm0hT+0kdItiDXN8uXg3qkGFAtGV4/xR1cCBl86kH6eRT08XhvhWUBXQ1GoAxqnIMx2bIUqjtyWn2XcC4TCmI0CQ7yNWhDn7jhpR63j7zpOa4Uzw1uZ5StnhFcDybTm9Ln3zq7VxWznk9dVOa+IX4zFGv524KS7J4n/lwvNfYs0oMp9TiECMpMIQcZ69rAfyFw2raEp+LAcmhCzAb8YLKQxrqcZzzbABy3DRt27Lz01T7Cn+8AcpUwKn8RJkilY3fFhjc21smevLV4kOEYQzYhw/DoYX6nMdhAYelVXA9ExWaUlDB8Z4DiINvBL6qDMVpW3mUQdVcLrvAaGj4utL8uKwiYHS2mG9FaGdpJ75ibIZ8cHDIUBxXymHyCgh5vjn66uGrGVkMy+0CQpkoFHQZRh0orBIUYpW+oRyuW6Ui9mU2k95gNJzwILr/Tld2D/otI4JOzEZpdSRP4/nuY1NkE+TDwj88lHKcB8+A6kApxrkfhu3I8645/jwIU8TdACc1fpoVT08VohIG40uczVVd5gDj/s28aRgH3OncricOrSo7MUtY8Vni7FSU7sdvMZcPEfZKObRmOGVyiCv1EKo08n3V2BwZiM1YeW7DKgeKJkpBxze/TuU8xSwoyd4BqIlDwUpnrqXzR7RXnnVnKYbsmUteJha0xmgG1MwwHIMxUA4TZZAOGMQ5T5koQjZFhsvCGBmU89X+Q+gS7A5OQl4GLEgd/TIYDhJYL38nt5C2sZNMQBqH215zTh/+TM9m7NXCMD13w34tVrVLGtYapU954mqyDIo4q8aQHPp7jMF8GAWKcl9FTtv+BnGFZJUK6nCBSoBiIHy+Aiwuc4RWLnuYGo75Wc9n69XEMNW5kbPE4REXi5PaYvSYGcRnS54oe1arCKuUYrXgfUgGUwuBkM2TAWVQVy85vtMKgOK9ZkK9PODwHVylCzhBpYN3gJGahY2srtlqZoxheudGXyTmpWN0qYH/lzFYVxCG8RVTMAzEsMjvKON0kL94shPSxtFvwiwZjKFgvsqr4raWJTT22FdVvMo/vQbkcRouEMtagzQiE6NdJiac4XuPYYogrBjnMTz7Dljkc7yg4xkPxy8ZfEXFYeKBcV6HS6X20+lD53akq4wcESCPNWWm2DfuAjE8E6WlecAwnG+KSq0icFcFUzhw8qgno5p60eF3MJ6Z3UylYLmUyvbqw5W/Dt306hdVF54/XVxqRui6fJgKHWaI3pVZArIDFnG+R9UrKKypPchPtW5da/tDNPGYD7st62FmmZ572Lqk2sypYmE2RKdYUTrAQOqQQeibJqumHgnFdkIvAqorvKSztvYdNG7IH0tyq072KSCPfvFksQ1+aD5Gq/gjLcP5YKxaV+eKIqDo8vWYKxhGjkL2eV3r9jbe54D+ROZOEtPwWL8d54ZTCqbqANaJkmd+heD9ZOS8/ZhKtWLfTaYTB+31+zqSsGRNj6Sr7tsu/ECeiXfYcvxcGMbvV9/hl+D2G8aL0X6aVm8+kwI102nSyF7/s7Ojry6R7x3QH+vhD+RMfBO8Ck+8ITCb9/4wTizwy/rD/hXoX4H+FehfgR/qCvwfTSeznkI0t8oAAAAASUVORK5CYII="
+                        width="30"
+                        height="30"
+                        style="display: block"
+                        alt="HeyGen"
+                      />
+                    </div>
+                    <div class="hg-icitem">
+                      <svg viewBox="0 0 16 16" fill="none" width="16" height="16">
+                        <circle cx="8" cy="5.5" r="2.8" stroke="currentColor" stroke-width="1.3" />
+                        <path
+                          d="M2 14.5c0-3.31 2.69-6 6-6s6 2.69 6 6"
+                          stroke="currentColor"
+                          stroke-width="1.3"
+                          stroke-linecap="round"
+                        />
+                      </svg>
+                      <span>Avatar</span>
+                    </div>
+                    <div class="hg-icitem hg-icactive">
+                      <div class="hg-icbg">
+                        <svg viewBox="0 0 16 16" fill="none" width="15" height="15">
+                          <circle cx="8" cy="5.5" r="2.5" stroke="white" stroke-width="1.3" />
+                          <path
+                            d="M2.5 14c0-3.04 2.46-5.5 5.5-5.5s5.5 2.46 5.5 5.5"
+                            stroke="white"
+                            stroke-width="1.3"
+                            stroke-linecap="round"
+                          />
+                        </svg>
+                      </div>
+                      <span>Video Agent</span>
+                    </div>
+                    <div class="hg-icitem">
+                      <svg viewBox="0 0 16 16" fill="none" width="16" height="16">
+                        <path
+                          d="M3 4l3 8M10 4l3 8M6 10h4"
+                          stroke="currentColor"
+                          stroke-width="1.4"
+                          stroke-linecap="round"
+                        />
+                      </svg>
+                      <span>Motion Cut</span>
+                    </div>
+                    <div class="hg-icitem">
+                      <svg viewBox="0 0 16 16" fill="none" width="16" height="16">
+                        <path
+                          d="M2 4h12M8 4v9M5 13h6"
+                          stroke="currentColor"
+                          stroke-width="1.4"
+                          stroke-linecap="round"
+                        />
+                        <circle cx="12" cy="3" r="1.5" fill="#3B82F6" />
+                      </svg>
+                      <span>Translate</span>
+                    </div>
+                    <div class="hg-icitem">
+                      <svg viewBox="0 0 16 16" fill="none" width="16" height="16">
+                        <rect
+                          x="2"
+                          y="2"
+                          width="5"
+                          height="5"
+                          rx="1.5"
+                          fill="currentColor"
+                          opacity="0.45"
+                        />
+                        <rect
+                          x="9"
+                          y="2"
+                          width="5"
+                          height="5"
+                          rx="1.5"
+                          fill="currentColor"
+                          opacity="0.45"
+                        />
+                        <rect
+                          x="2"
+                          y="9"
+                          width="5"
+                          height="5"
+                          rx="1.5"
+                          fill="currentColor"
+                          opacity="0.45"
+                        />
+                        <rect
+                          x="9"
+                          y="9"
+                          width="5"
+                          height="5"
+                          rx="1.5"
+                          fill="currentColor"
+                          opacity="0.45"
+                        />
+                      </svg>
+                      <span>Apps</span>
+                    </div>
+                    <div class="hg-icitem">
+                      <svg viewBox="0 0 16 16" fill="none" width="16" height="16">
+                        <path
+                          d="M2 6a2 2 0 012-2h2l2 2h4a2 2 0 012 2v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
+                          stroke="currentColor"
+                          stroke-width="1.3"
+                        />
+                      </svg>
+                      <span>Projects</span>
+                    </div>
+                    <div class="hg-icuser">J</div>
+                  </div>
+
+                  <!-- ══ HISTORY PANEL (105px) ══ -->
+                  <div class="hg-histpanel">
+                    <div class="hg-histhead">
+                      <span>Video Agent</span>
+                      <svg viewBox="0 0 14 14" fill="none" width="12" height="12">
+                        <rect
+                          x="1"
+                          y="1"
+                          width="4.5"
+                          height="12"
+                          rx="1"
+                          stroke="currentColor"
+                          stroke-width="1.2"
+                        />
+                        <rect
+                          x="8.5"
+                          y="1"
+                          width="4.5"
+                          height="12"
+                          rx="1"
+                          stroke="currentColor"
+                          stroke-width="1.2"
+                        />
+                      </svg>
+                    </div>
+                    <div class="hg-newitem">
+                      <svg viewBox="0 0 12 12" fill="none" width="11" height="11">
+                        <path
+                          d="M1 6.5L6 1.5l5 5V11H7.5V8H4.5v3H1V6.5Z"
+                          fill="#3B82F6"
+                          fill-opacity="0.85"
+                        />
+                      </svg>
+                      New video
+                    </div>
+                    <div class="hg-histcat">YESTERDAY</div>
+                    <div class="hg-histrow">AI Skills Gap: Alien</div>
+                    <div class="hg-histcat">PREVIOUS 3 DAYS</div>
+                    <div class="hg-histrow">AI Skills Gap: Alien</div>
+                    <div class="hg-histrow">Product Strategy: An AI...</div>
+                    <div class="hg-histrow">S9</div>
+                    <div class="hg-histrow">S7</div>
+                    <div class="hg-histrow">S5</div>
+                    <div class="hg-histrow">S3</div>
+                    <div class="hg-histcat">PREVIOUS 7 DAYS</div>
+                    <div class="hg-histrow">S8 lock</div>
+                    <div class="hg-histrow">S4</div>
+                    <div class="hg-histrow">S2</div>
+                    <div class="hg-histrow">Moody t2</div>
+                  </div>
+
+                  <!-- ══ MAIN CONTENT (359px) ══ -->
+                  <div class="hg-maincnt">
+                    <!-- Top-right icon cluster -->
+                    <div class="hg-toprighticons">
+                      <div class="hg-ticon">
+                        <svg viewBox="0 0 14 14" fill="none" width="11" height="11">
+                          <circle cx="6" cy="6" r="4.5" stroke="currentColor" stroke-width="1.3" />
+                          <path
+                            d="M9.5 9.5l2.5 2.5"
+                            stroke="currentColor"
+                            stroke-width="1.3"
+                            stroke-linecap="round"
+                          />
+                        </svg>
+                      </div>
+                      <div class="hg-ticon hg-notifico">
+                        <svg viewBox="0 0 14 14" fill="none" width="11" height="11">
+                          <path
+                            d="M7 1.5a4 4 0 00-4 4v3l-1 2h10l-1-2v-3a4 4 0 00-4-4z"
+                            stroke="currentColor"
+                            stroke-width="1.2"
+                          />
+                          <path
+                            d="M5.5 10.5a1.5 1.5 0 003 0"
+                            stroke="currentColor"
+                            stroke-width="1.2"
+                          />
+                        </svg>
+                        <div class="hg-notifbadge">99+</div>
+                      </div>
+                      <div class="hg-ticon">
+                        <svg viewBox="0 0 14 14" fill="none" width="11" height="11">
+                          <path
+                            d="M7 2l1.2 3.8H12L9 8.2l1.2 3.8L7 9.5l-3.2 2.5L5 8.2 2 5.8h3.8z"
+                            stroke="currentColor"
+                            stroke-width="1.1"
+                          />
+                        </svg>
+                      </div>
+                    </div>
+
+                    <!-- Hero heading -->
+                    <div class="hg-herotitle">Turn your ideas into<br />production-ready video</div>
+
+                    <!-- ─ Create card ─ -->
+                    <div class="hg-createcard" id="hgCreateCard">
+                      <!-- Selector row: Avatar | Voice | Style -->
+                      <div class="hg-selrow">
+                        <div class="hg-sel">
+                          <span class="hg-sellbl">Avatar</span>
+                          <div class="hg-selbox">
+                            <div class="hg-avphoto"></div>
+                            <span class="hg-seltxt">Jordan</span>
+                          </div>
+                        </div>
+                        <div class="hg-seldiv"></div>
+                        <div class="hg-sel">
+                          <span class="hg-sellbl">Voice</span>
+                          <div class="hg-selbox">
+                            <div class="hg-voicebars">
+                              <div class="hg-vbar" style="height: 5px"></div>
+                              <div class="hg-vbar" style="height: 9px"></div>
+                              <div class="hg-vbar" style="height: 7px"></div>
+                              <div class="hg-vbar" style="height: 11px"></div>
+                              <div class="hg-vbar" style="height: 5px"></div>
+                            </div>
+                            <span class="hg-seltxt">Auto</span>
+                          </div>
+                        </div>
+                        <div class="hg-seldiv"></div>
+                        <div class="hg-sel">
+                          <span class="hg-sellbl">Style</span>
+                          <div class="hg-selbox">
+                            <div class="hg-styleico">
+                              <svg viewBox="0 0 14 14" fill="none" width="12" height="12">
+                                <rect
+                                  x="1"
+                                  y="1"
+                                  width="12"
+                                  height="12"
+                                  rx="2"
+                                  stroke="currentColor"
+                                  stroke-width="1.2"
+                                />
+                                <path
+                                  d="M4.5 7l2 2 3-3"
+                                  stroke="currentColor"
+                                  stroke-width="1.2"
+                                  stroke-linecap="round"
+                                />
+                              </svg>
+                            </div>
+                            <span class="hg-seltxt">Auto</span>
+                          </div>
+                        </div>
+                        <div class="hg-settico">
+                          <svg viewBox="0 0 14 14" fill="none" width="13" height="13">
+                            <circle cx="7" cy="7" r="2" stroke="currentColor" stroke-width="1.2" />
+                            <path
+                              d="M7 1.5V3M7 11v1.5M1.5 7H3M11 7h1.5M3.4 3.4l1 1M9.6 9.6l1 1M3.4 10.6l1-1M9.6 4.4l1-1"
+                              stroke="currentColor"
+                              stroke-width="1.2"
+                              stroke-linecap="round"
+                            />
+                          </svg>
+                        </div>
+                      </div>
+                      <!-- Input -->
+                      <div class="hg-cinput">Describe your video idea ...</div>
+                      <!-- Bottom bar -->
+                      <div class="hg-cbottom">
+                        <div class="hg-cbleft">
+                          <div class="hg-cbtn">
+                            <svg viewBox="0 0 12 12" fill="none" width="11" height="11">
+                              <path
+                                d="M6 2v8M2 6h8"
+                                stroke="currentColor"
+                                stroke-width="1.4"
+                                stroke-linecap="round"
+                              />
+                            </svg>
+                          </div>
+                          <div class="hg-cbtn">
+                            <svg viewBox="0 0 12 12" fill="none" width="11" height="11">
+                              <path
+                                d="M6 1.5l1 3H10L7.5 6.5l1 3L6 8 3.5 9.5l1-3L2 4.5H5z"
+                                fill="#9CA3AF"
+                              />
+                            </svg>
+                          </div>
+                          <div class="hg-cbtn">
+                            <svg viewBox="0 0 12 12" fill="none" width="11" height="11">
+                              <path
+                                d="M1.5 3h9M1.5 6h9M1.5 9h6"
+                                stroke="currentColor"
+                                stroke-width="1.3"
+                                stroke-linecap="round"
+                              />
+                            </svg>
+                          </div>
+                        </div>
+                        <div class="hg-cbright">
+                          <div class="hg-genbtn">
+                            <svg viewBox="0 0 10 10" fill="none" width="9" height="9">
+                              <path d="M5 1l1 3h3L7 6l1 3L5 7.5 2 9l1-3L1 4h3z" fill="#6B7280" />
+                            </svg>
+                            Generate
+                            <svg viewBox="0 0 8 6" fill="none" width="8" height="6">
+                              <path
+                                d="M1 1l3 3 3-3"
+                                stroke="#6B7280"
+                                stroke-width="1.3"
+                                stroke-linecap="round"
+                              />
+                            </svg>
+                          </div>
+                          <div class="hg-submitbtn">
+                            <svg viewBox="0 0 12 12" fill="none" width="10" height="10">
+                              <path
+                                d="M6 9V3M3 6l3-3 3 3"
+                                stroke="white"
+                                stroke-width="1.5"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                              />
+                            </svg>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+                    <!-- Styles from community -->
+                    <div class="hg-stylessec">
+                      <div class="hg-stitle">Styles from the community</div>
+                      <div class="hg-spills">
+                        <div class="hg-spill hg-spactive">All Styles</div>
+                        <div class="hg-spill">Retro Tech</div>
+                        <div class="hg-spill">Iconic Artist</div>
+                        <div class="hg-spill">Pop Culture</div>
+                        <div class="hg-spill">Print</div>
+                        <div class="hg-spill">Cinematic</div>
+                      </div>
+                      <div class="hg-scards">
+                        <div
+                          class="hg-sc"
+                          style="background: linear-gradient(135deg, #1b2a5e, #2d4a9a)"
+                        >
+                          <span class="hg-sclbl">IMPLEMENTATION DEPTH</span>
+                        </div>
+                        <div
+                          class="hg-sc"
+                          style="background: linear-gradient(160deg, #c9ad88, #b89668)"
+                        >
+                          <span
+                            class="hg-sclbl"
+                            style="font-style: italic; color: #3d2810; font-size: 5.5px"
+                            >Strategy means saying NO</span
+                          >
+                        </div>
+                        <div
+                          class="hg-sc"
+                          style="
+                            background: #ede9e0;
+                            display: flex;
+                            align-items: center;
+                            justify-content: center;
+                          "
+                        >
+                          <span style="color: #cc4422; font-size: 14px; font-weight: 700">?</span>
+                        </div>
+                        <div
+                          class="hg-sc"
+                          style="background: linear-gradient(135deg, #8b1515, #c92020)"
+                        >
+                          <span class="hg-sclbl" style="color: #ffd9a0; font-size: 5px"
+                            >THINK BIG.<br />START SMALL.</span
+                          >
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Figma selection handles on the first video card -->
+                <div class="selection-ring" id="selectionRing">
+                  <div class="sel-handle tl"></div>
+                  <div class="sel-handle tr"></div>
+                  <div class="sel-handle bl"></div>
+                  <div class="sel-handle br"></div>
+                  <div class="sel-label">Create Card · W 322 H 110</div>
+                </div>
+              </div>
+
+              <!-- DESIGN PROPERTIES PANEL -->
+              <div class="fig-props" id="figProps">
+                <div class="panel-tabs">
+                  <span class="ptab active">Design</span>
+                  <span class="ptab">Prototype</span>
+                  <span class="ptab">Inspect</span>
+                </div>
+
+                <!-- Alignment row -->
+                <div class="prop-align">
+                  <div class="align-btn">⬓</div>
+                  <div class="align-btn">⬒</div>
+                  <div class="align-btn active-align">⬔</div>
+                  <div class="align-divider"></div>
+                  <div class="align-btn">⬕</div>
+                  <div class="align-btn">⬗</div>
+                </div>
+
+                <!-- Frame section -->
+                <div class="prop-section">
+                  <div class="prop-row-2">
+                    <div class="prop-field">
+                      <span class="prop-pre">W</span>
+                      <span class="prop-val">108</span>
+                    </div>
+                    <div class="prop-field">
+                      <span class="prop-pre">H</span>
+                      <span class="prop-val">34</span>
+                    </div>
+                  </div>
+                  <div class="prop-row-2">
+                    <div class="prop-field">
+                      <span class="prop-pre">X</span>
+                      <span class="prop-val">1244</span>
+                    </div>
+                    <div class="prop-field">
+                      <span class="prop-pre">Y</span>
+                      <span class="prop-val">18</span>
+                    </div>
+                  </div>
+                  <div class="prop-row-2">
+                    <div class="prop-field">
+                      <span class="prop-pre">↺</span>
+                      <span class="prop-val">0°</span>
+                    </div>
+                    <div class="prop-field">
+                      <span class="prop-pre">⌐</span>
+                      <span class="prop-val">8</span>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Auto layout -->
+                <div class="prop-section">
+                  <div class="prop-section-head">
+                    <span class="prop-section-label">Auto layout</span>
+                    <span class="prop-section-icon">−</span>
+                  </div>
+                  <div class="prop-row-2">
+                    <div class="prop-field">
+                      <span class="prop-pre">→</span>
+                      <span class="prop-val">12px</span>
+                    </div>
+                    <div class="prop-field">
+                      <span class="prop-pre">⊡</span>
+                      <span class="prop-val">14 / 8</span>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Fill -->
+                <div class="prop-section">
+                  <div class="prop-section-head">
+                    <span class="prop-section-label">Fill</span>
+                    <span class="prop-section-icon">+</span>
+                  </div>
+                  <div class="fill-row">
+                    <div class="fill-preview" style="background: #ffffff"></div>
+                    <span class="fill-hex">FFFFFF</span>
+                    <span class="fill-pct">100%</span>
+                  </div>
+                </div>
+
+                <!-- Stroke -->
+                <div class="prop-section">
+                  <div class="prop-section-head">
+                    <span class="prop-section-label">Stroke</span>
+                    <span class="prop-section-icon">+</span>
+                  </div>
+                  <div class="fill-row muted">
+                    <span class="prop-empty">No strokes</span>
+                  </div>
+                </div>
+
+                <!-- Effects -->
+                <div class="prop-section">
+                  <div class="prop-section-head">
+                    <span class="prop-section-label">Effects</span>
+                    <span class="prop-section-icon">+</span>
+                  </div>
+                  <div class="effect-row">
+                    <div class="effect-dot"></div>
+                    <span class="effect-name">Drop shadow</span>
+                  </div>
+                </div>
+
+                <!-- Export -->
+                <div class="prop-section">
+                  <div class="prop-section-head">
+                    <span class="prop-section-label">Export</span>
+                    <span class="prop-section-icon">+</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <!-- /fig-body -->
+          </div>
+          <!-- /ui-card -->
+
+          <!-- RIGHT DEPTH FACE -->
+          <div class="depth-right" id="depthRight"></div>
+        </div>
+        <!-- /card-wrapper -->
+      </div>
+      <!-- /scene -->
+
+      <!-- ══════════════════════════════════════════
+         OUTRO: Logo rebuild + tagline + URL pill
+    ══════════════════════════════════════════ -->
+      <div class="outro-layer" id="outroLayer">
+        <svg class="outro-svg" viewBox="0 0 1920 1080" xmlns="http://www.w3.org/2000/svg">
+          <g class="outro-logo" transform="translate(880, 310)">
+            <!-- Fill layer -->
+            <path
+              class="ol-fill ol-fill-1"
+              d="M80 0H40C17.9 0 0 17.9 0 40S17.9 80 40 80H80V0Z"
+              fill="#F24E1E"
+              opacity="0"
+            />
+            <path
+              class="ol-fill ol-fill-2"
+              d="M80 0V80H120C142.1 80 160 62.1 160 40S142.1 0 120 0H80Z"
+              fill="#FF7262"
+              opacity="0"
+            />
+            <path
+              class="ol-fill ol-fill-3"
+              d="M80 80H40C17.9 80 0 97.9 0 120S17.9 160 40 160H80V80Z"
+              fill="#A259FF"
+              opacity="0"
+            />
+            <circle class="ol-fill ol-fill-4" cx="120" cy="120" r="40" fill="#1ABCFE" opacity="0" />
+            <path
+              class="ol-fill ol-fill-5"
+              d="M40 160C17.9 160 0 177.9 0 200S17.9 240 40 240 80 222.1 80 200V160H40Z"
+              fill="#0ACF83"
+              opacity="0"
+            />
+            <!-- Stroke layer -->
+            <path
+              class="ol-stroke ol-stroke-1"
+              d="M80 0H40C17.9 0 0 17.9 0 40S17.9 80 40 80H80V0Z"
+              fill="none"
+              stroke="#F24E1E"
+              stroke-width="2"
+            />
+            <path
+              class="ol-stroke ol-stroke-2"
+              d="M80 0V80H120C142.1 80 160 62.1 160 40S142.1 0 120 0H80Z"
+              fill="none"
+              stroke="#FF7262"
+              stroke-width="2"
+            />
+            <path
+              class="ol-stroke ol-stroke-3"
+              d="M80 80H40C17.9 80 0 97.9 0 120S17.9 160 40 160H80V80Z"
+              fill="none"
+              stroke="#A259FF"
+              stroke-width="2"
+            />
+            <circle
+              class="ol-stroke ol-stroke-4"
+              cx="120"
+              cy="120"
+              r="40"
+              fill="none"
+              stroke="#1ABCFE"
+              stroke-width="2"
+            />
+            <path
+              class="ol-stroke ol-stroke-5"
+              d="M40 160C17.9 160 0 177.9 0 200S17.9 240 40 240 80 222.1 80 200V160H40Z"
+              fill="none"
+              stroke="#0ACF83"
+              stroke-width="2"
+            />
+          </g>
+
+          <!-- Tagline — individual tspan letters for stagger -->
+          <text class="outro-tagline" x="960" y="648" text-anchor="middle">
+            <tspan class="otl">N</tspan>
+            <tspan class="otl">o</tspan>
+            <tspan class="otl">t</tspan>
+            <tspan class="otl">h</tspan>
+            <tspan class="otl">i</tspan>
+            <tspan class="otl">n</tspan>
+            <tspan class="otl">g</tspan>
+            <tspan class="otl"></tspan>
+            <tspan class="otl">g</tspan>
+            <tspan class="otl">r</tspan>
+            <tspan class="otl">e</tspan>
+            <tspan class="otl">a</tspan>
+            <tspan class="otl">t</tspan>
+            <tspan class="otl"></tspan>
+            <tspan class="otl">i</tspan>
+            <tspan class="otl">s</tspan>
+            <tspan class="otl"></tspan>
+            <tspan class="otl">m</tspan>
+            <tspan class="otl">a</tspan>
+            <tspan class="otl">d</tspan>
+            <tspan class="otl">e</tspan>
+            <tspan class="otl"></tspan>
+            <tspan class="otl">a</tspan>
+            <tspan class="otl">l</tspan>
+            <tspan class="otl">o</tspan>
+            <tspan class="otl">n</tspan>
+            <tspan class="otl">e</tspan>
+            <tspan class="otl">.</tspan>
+          </text>
+
+          <!-- URL pill -->
+          <rect
+            class="url-border"
+            x="885"
+            y="688"
+            width="150"
+            height="40"
+            rx="20"
+            fill="none"
+            stroke="#3C3C3C"
+            stroke-width="1.5"
+          />
+          <rect
+            class="url-bg"
+            x="885"
+            y="688"
+            width="150"
+            height="40"
+            rx="20"
+            fill="#2C2C2C"
+            opacity="0"
+          />
+          <text
+            class="url-text"
+            x="960"
+            y="713"
+            text-anchor="middle"
+            fill="#868686"
+            font-size="16"
+            font-weight="400"
+            opacity="0"
+          >
+            figma.com
+          </text>
+        </svg>
+      </div>
+
+      <!-- Fade to black -->
+      <div class="outro-fade" id="outroFade"></div>
+
+      <style>
+        @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap");
+
+        /*
+        Figma palette:
+        canvas-bg:    #1E1E1E
+        panel-bg:     #2C2C2C
+        panel-dark:   #252525
+        toolbar:      #2C2C2C
+        divider:      rgba(255,255,255,0.1)
+        text:         #E8E8E8
+        text-muted:   #868686
+        text-dim:     #555555
+        selected-bg:  rgba(24,160,251,0.14)
+        blue:         #18A0FB
+        purple:       #A259FF
+        green:        #0ACF83
+        red:          #F24E1E
+        orange:       #FF7262
+      */
+
+        [data-composition-id="ui-3d-reveal"] {
+          position: relative;
+          width: 1920px;
+          height: 1080px;
+          overflow: hidden;
+          font-family: "Inter", sans-serif;
+          background: #111111;
+        }
+
+        /* ── Background ── */
+        [data-composition-id="ui-3d-reveal"] .bg-base {
+          position: absolute;
+          inset: 0;
+          background: #111111;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .bg-glow {
+          position: absolute;
+          inset: 0;
+          background:
+            radial-gradient(
+              ellipse 900px 600px at 50% 52%,
+              rgba(24, 160, 251, 0.06) 0%,
+              transparent 65%
+            ),
+            radial-gradient(
+              ellipse 500px 300px at 20% 75%,
+              rgba(162, 89, 255, 0.04) 0%,
+              transparent 60%
+            );
+          pointer-events: none;
+        }
+
+        /* ── Scene ── */
+        [data-composition-id="ui-3d-reveal"] .scene {
+          position: absolute;
+          inset: 0;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          perspective: 2800px;
+          perspective-origin: 50% 50%;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .card-glow {
+          position: absolute;
+          width: 1200px;
+          height: 780px;
+          border-radius: 24px;
+          background: radial-gradient(
+            ellipse at 50% 50%,
+            rgba(24, 160, 251, 0.18) 0%,
+            transparent 65%
+          );
+          filter: blur(50px);
+          pointer-events: none;
+          opacity: 0;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .card-wrapper {
+          position: relative;
+          transform-style: preserve-3d;
+          will-change: transform;
+        }
+
+        /* ── Front face ── */
+        [data-composition-id="ui-3d-reveal"] .ui-card {
+          width: 1100px;
+          height: 680px;
+          background: #1e1e1e;
+          border-radius: 12px;
+          overflow: hidden;
+          border: 1px solid rgba(255, 255, 255, 0.1);
+          position: relative;
+          box-shadow:
+            inset -1px 0 0 rgba(24, 160, 251, 0.2),
+            0 40px 120px rgba(0, 0, 0, 0.7);
+        }
+
+        /* ── Depth face ── */
+        [data-composition-id="ui-3d-reveal"] .depth-right {
+          position: absolute;
+          top: 12px;
+          left: 1100px;
+          width: 10px;
+          height: 656px;
+          transform-origin: 0% 50%;
+          transform: rotateY(90deg);
+          background: linear-gradient(
+            to right,
+            rgba(80, 160, 255, 0.4) 0%,
+            rgba(40, 100, 200, 0.2) 40%,
+            rgba(10, 20, 50, 0.9) 100%
+          );
+          border-radius: 3px 2px 2px 3px;
+        }
+
+        /* ═══════════════════════════
+         TOOLBAR
+      ═══════════════════════════ */
+        [data-composition-id="ui-3d-reveal"] .fig-toolbar {
+          height: 48px;
+          background: #2c2c2c;
+          border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+          display: flex;
+          align-items: center;
+          padding: 0 12px;
+          gap: 0;
+          flex-shrink: 0;
+          position: relative;
+          z-index: 2;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .tb-left {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          flex: 0 0 auto;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .fig-logo {
+          width: 32px;
+          height: 32px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-radius: 6px;
+          cursor: default;
+          flex-shrink: 0;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .fig-logo:hover {
+          background: rgba(255, 255, 255, 0.08);
+        }
+
+        [data-composition-id="ui-3d-reveal"] .tool-divider {
+          width: 1px;
+          height: 20px;
+          background: rgba(255, 255, 255, 0.12);
+          flex-shrink: 0;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .tool-group {
+          display: flex;
+          align-items: center;
+          gap: 2px;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .tool-btn {
+          width: 30px;
+          height: 30px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-radius: 5px;
+          color: #868686;
+          cursor: default;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .tool-btn.active {
+          background: rgba(24, 160, 251, 0.18);
+          color: #18a0fb;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .tb-center {
+          flex: 1;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          gap: 5px;
+          font-size: 12px;
+          color: #e8e8e8;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .file-name {
+          font-weight: 500;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .file-chevron {
+          color: #555;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .file-page {
+          color: #868686;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .file-arrow {
+          color: #868686;
+          margin-left: 2px;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .tb-right {
+          flex: 0 0 auto;
+          display: flex;
+          align-items: center;
+          gap: 8px;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .mode-tabs {
+          display: flex;
+          background: rgba(255, 255, 255, 0.06);
+          border-radius: 6px;
+          padding: 2px;
+          gap: 2px;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .mode-tab {
+          font-size: 11px;
+          font-weight: 500;
+          color: #868686;
+          padding: 4px 10px;
+          border-radius: 4px;
+          cursor: default;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .mode-tab.active {
+          background: #3c3c3c;
+          color: #e8e8e8;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .share-btn {
+          display: flex;
+          align-items: center;
+          gap: 5px;
+          background: #18a0fb;
+          color: white;
+          font-size: 11px;
+          font-weight: 600;
+          padding: 6px 12px;
+          border-radius: 6px;
+          cursor: default;
+          white-space: nowrap;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .avatar-cluster {
+          display: flex;
+          align-items: center;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .fig-avatar {
+          width: 26px;
+          height: 26px;
+          border-radius: 50%;
+          font-size: 9px;
+          font-weight: 700;
+          color: white;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border: 2px solid #2c2c2c;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .present-btn {
+          width: 28px;
+          height: 28px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-radius: 5px;
+          background: rgba(255, 255, 255, 0.06);
+          color: #868686;
+          font-size: 9px;
+          cursor: default;
+        }
+
+        /* ═══════════════════════════
+         BODY LAYOUT
+      ═══════════════════════════ */
+        [data-composition-id="ui-3d-reveal"] .fig-body {
+          display: flex;
+          height: 632px; /* 680 - 48 toolbar */
+        }
+
+        /* ═══════════════════════════
+         LAYERS PANEL
+      ═══════════════════════════ */
+        [data-composition-id="ui-3d-reveal"] .fig-layers {
+          width: 210px;
+          flex-shrink: 0;
+          background: #2c2c2c;
+          border-right: 1px solid rgba(255, 255, 255, 0.08);
+          display: flex;
+          flex-direction: column;
+          overflow: hidden;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .panel-tabs {
+          display: flex;
+          border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+          flex-shrink: 0;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .ptab {
+          flex: 1;
+          text-align: center;
+          font-size: 11px;
+          font-weight: 500;
+          color: #868686;
+          padding: 9px 0 8px;
+          cursor: default;
+          border-bottom: 2px solid transparent;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .ptab.active {
+          color: #e8e8e8;
+          border-bottom-color: #18a0fb;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .layer-search {
+          display: flex;
+          align-items: center;
+          gap: 6px;
+          padding: 7px 10px;
+          border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+          color: #555;
+          flex-shrink: 0;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .search-placeholder {
+          font-size: 11px;
+          color: #555;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .layer-list {
+          flex: 1;
+          overflow: hidden;
+          padding: 4px 0;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .layer-item {
+          display: flex;
+          align-items: center;
+          gap: 5px;
+          padding: 4px 8px;
+          font-size: 11px;
+          color: #868686;
+          cursor: default;
+          height: 26px;
+          white-space: nowrap;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .layer-item.page-item {
+          color: #e8e8e8;
+          font-weight: 500;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .layer-item.frame-item {
+          color: #e8e8e8;
+          font-weight: 500;
+          padding-left: 6px;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .layer-item.indent-1 {
+          padding-left: 18px;
+        }
+        [data-composition-id="ui-3d-reveal"] .layer-item.indent-2 {
+          padding-left: 30px;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .layer-item.comp-item {
+          color: #c9a0ff;
+        }
+        [data-composition-id="ui-3d-reveal"] .frame-icon {
+          color: #6ca9ff !important;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .selected-layer {
+          background: rgba(24, 160, 251, 0.15);
+          border-radius: 4px;
+          color: #18a0fb !important;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .li-collapse {
+          color: #555;
+          flex-shrink: 0;
+        }
 
-It runs for 13 seconds at 1920×1080. Paste this into your composition:
+        [data-composition-id="ui-3d-reveal"] .li-icon {
+          flex-shrink: 0;
+          color: #868686;
+        }
 
-```html index.html
-<div
-  data-composition-id="ui-3d-reveal"
-  data-composition-src="compositions/ui-3d-reveal.html"
-  data-start="0"
-  data-duration="13"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+        [data-composition-id="ui-3d-reveal"] .comp-icon {
+          color: #a259ff !important;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .page-bar {
+          display: flex;
+          align-items: center;
+          border-top: 1px solid rgba(255, 255, 255, 0.08);
+          padding: 0 4px;
+          height: 34px;
+          flex-shrink: 0;
+          gap: 2px;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .pbar-tab {
+          font-size: 10px;
+          color: #868686;
+          padding: 4px 8px;
+          border-radius: 4px;
+          white-space: nowrap;
+          cursor: default;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .pbar-tab.active {
+          background: rgba(255, 255, 255, 0.08);
+          color: #e8e8e8;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .pbar-add {
+          font-size: 14px;
+          color: #555;
+          padding: 2px 6px;
+          cursor: default;
+          margin-left: auto;
+        }
+
+        /* ═══════════════════════════
+         CANVAS
+      ═══════════════════════════ */
+        [data-composition-id="ui-3d-reveal"] .fig-canvas {
+          flex: 1;
+          background: #1e1e1e;
+          position: relative;
+          overflow: hidden;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .canvas-frame-label {
+          position: absolute;
+          top: 18px;
+          left: 50%;
+          transform: translateX(-50%);
+          font-size: 10px;
+          color: #555;
+          white-space: nowrap;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .artboard {
+          width: 520px;
+          height: 360px;
+          background: #ffffff;
+          border-radius: 4px;
+          overflow: hidden;
+          position: relative;
+          display: flex;
+          box-shadow:
+            0 8px 40px rgba(0, 0, 0, 0.5),
+            0 0 0 1px rgba(0, 0, 0, 0.08);
+          margin-top: 20px;
+        }
+
+        /* ── Selection handles ── */
+        [data-composition-id="ui-3d-reveal"] .selection-ring {
+          position: absolute;
+          width: 322px;
+          height: 110px;
+          border: 1px solid #18a0fb;
+          pointer-events: none;
+          /* positioned over the create card in main content */
+          top: calc(50% - 40px);
+          left: calc(50% + 86px);
+          transform: translate(-50%, -50%);
+        }
+
+        [data-composition-id="ui-3d-reveal"] .sel-handle {
+          position: absolute;
+          width: 7px;
+          height: 7px;
+          background: white;
+          border: 1.5px solid #18a0fb;
+          border-radius: 1px;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .sel-handle.tl {
+          top: -4px;
+          left: -4px;
+        }
+        [data-composition-id="ui-3d-reveal"] .sel-handle.tr {
+          top: -4px;
+          right: -4px;
+        }
+        [data-composition-id="ui-3d-reveal"] .sel-handle.bl {
+          bottom: -4px;
+          left: -4px;
+        }
+        [data-composition-id="ui-3d-reveal"] .sel-handle.br {
+          bottom: -4px;
+          right: -4px;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .sel-label {
+          position: absolute;
+          top: -22px;
+          left: -1px;
+          font-size: 9px;
+          color: #18a0fb;
+          white-space: nowrap;
+          font-family: "Inter", sans-serif;
+          font-weight: 500;
+        }
+
+        /* ═══════════════════════════
+         PROPERTIES PANEL
+      ═══════════════════════════ */
+        [data-composition-id="ui-3d-reveal"] .fig-props {
+          width: 240px;
+          flex-shrink: 0;
+          background: #2c2c2c;
+          border-left: 1px solid rgba(255, 255, 255, 0.08);
+          display: flex;
+          flex-direction: column;
+          overflow: hidden;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .prop-align {
+          display: flex;
+          align-items: center;
+          gap: 3px;
+          padding: 8px 12px;
+          border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+          flex-shrink: 0;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .align-btn {
+          width: 24px;
+          height: 24px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-radius: 4px;
+          color: #868686;
+          font-size: 14px;
+          cursor: default;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .active-align {
+          background: rgba(255, 255, 255, 0.08);
+          color: #e8e8e8;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .align-divider {
+          width: 1px;
+          height: 16px;
+          background: rgba(255, 255, 255, 0.1);
+          margin: 0 2px;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .prop-section {
+          padding: 10px 12px;
+          border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+          flex-shrink: 0;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .prop-section-head {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          margin-bottom: 8px;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .prop-section-label {
+          font-size: 11px;
+          font-weight: 500;
+          color: #e8e8e8;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .prop-section-icon {
+          font-size: 14px;
+          color: #555;
+          cursor: default;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .prop-row-2 {
+          display: grid;
+          grid-template-columns: 1fr 1fr;
+          gap: 6px;
+          margin-bottom: 5px;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .prop-field {
+          display: flex;
+          align-items: center;
+          gap: 5px;
+          background: rgba(255, 255, 255, 0.06);
+          border-radius: 4px;
+          padding: 5px 7px;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .prop-pre {
+          font-size: 10px;
+          color: #555;
+          flex-shrink: 0;
+          font-family: "Inter", sans-serif;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .prop-val {
+          font-size: 11px;
+          color: #e8e8e8;
+          font-family: "Inter", sans-serif;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .fill-row {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .fill-preview {
+          width: 18px;
+          height: 18px;
+          border-radius: 3px;
+          border: 1px solid rgba(255, 255, 255, 0.15);
+          flex-shrink: 0;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .fill-hex {
+          font-size: 11px;
+          color: #e8e8e8;
+          font-family: "Inter", sans-serif;
+          flex: 1;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .fill-pct {
+          font-size: 11px;
+          color: #868686;
+          font-family: "Inter", sans-serif;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .prop-empty {
+          font-size: 11px;
+          color: #555;
+          font-style: italic;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .effect-row {
+          display: flex;
+          align-items: center;
+          gap: 7px;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .effect-dot {
+          width: 8px;
+          height: 8px;
+          border-radius: 50%;
+          background: rgba(255, 255, 255, 0.2);
+          flex-shrink: 0;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .effect-name {
+          font-size: 11px;
+          color: #868686;
+        }
+
+        /* ═══════════════════════════
+         HEYGEN APP UI — LIGHT MODE
+      ═══════════════════════════ */
+
+        /* ── Icon nav (56px) ── */
+        [data-composition-id="ui-3d-reveal"] .hg-icnav {
+          width: 56px;
+          flex-shrink: 0;
+          height: 360px;
+          background: #ffffff;
+          border-right: 1px solid #ebebeb;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          padding-top: 0;
+          position: relative;
+          overflow: hidden;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-iclogo {
+          width: 56px;
+          height: 50px;
+          flex-shrink: 0;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-bottom: 1px solid #f0f0f0;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-icitem {
+          width: 100%;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          gap: 3px;
+          padding: 8px 0;
+          color: #9ca3af;
+          cursor: default;
+          flex-shrink: 0;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-icitem span {
+          font-size: 7px;
+          color: inherit;
+          font-family: "Inter", sans-serif;
+          text-align: center;
+          line-height: 1;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-icactive {
+          color: #10b8a9 !important;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-icactive span {
+          color: #10b8a9 !important;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-icbg {
+          width: 34px;
+          height: 34px;
+          border-radius: 9px;
+          background: #10b8a9;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-icuser {
+          position: absolute;
+          bottom: 10px;
+          width: 26px;
+          height: 26px;
+          border-radius: 50%;
+          background: #1a1a1a;
+          font-size: 9px;
+          font-weight: 700;
+          color: white;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-family: "Inter", sans-serif;
+        }
+
+        /* ── History panel (120px) ── */
+        [data-composition-id="ui-3d-reveal"] .hg-histpanel {
+          width: 120px;
+          flex-shrink: 0;
+          height: 360px;
+          background: #f7f7f8;
+          border-right: 1px solid #ebebeb;
+          display: flex;
+          flex-direction: column;
+          overflow: hidden;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-histhead {
+          height: 44px;
+          flex-shrink: 0;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 0 10px;
+          font-size: 10px;
+          font-weight: 600;
+          color: #111;
+          border-bottom: 1px solid #efefef;
+          font-family: "Inter", sans-serif;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-newitem {
+          display: flex;
+          align-items: center;
+          gap: 6px;
+          padding: 7px 8px;
+          margin: 6px 6px 0;
+          background: #e8f0fe;
+          border-radius: 7px;
+          font-size: 9.5px;
+          font-weight: 500;
+          color: #1a1a1a;
+          flex-shrink: 0;
+          font-family: "Inter", sans-serif;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-histcat {
+          font-size: 7px;
+          font-weight: 600;
+          color: #b0b0b0;
+          letter-spacing: 0.06em;
+          padding: 9px 10px 3px;
+          flex-shrink: 0;
+          font-family: "Inter", sans-serif;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-histrow {
+          padding: 3.5px 10px;
+          font-size: 9px;
+          color: #444;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          flex-shrink: 0;
+          font-family: "Inter", sans-serif;
+        }
+
+        /* ── Main content (359px) ── */
+        [data-composition-id="ui-3d-reveal"] .hg-maincnt {
+          flex: 1;
+          height: 360px;
+          background: #ffffff;
+          position: relative;
+          display: flex;
+          flex-direction: column;
+          padding: 10px 14px 10px;
+          overflow: hidden;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-toprighticons {
+          position: absolute;
+          top: 9px;
+          right: 10px;
+          display: flex;
+          align-items: center;
+          gap: 6px;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-ticon {
+          width: 26px;
+          height: 26px;
+          border-radius: 50%;
+          border: 1px solid #e5e7eb;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          color: #6b7280;
+          cursor: default;
+          position: relative;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-notifico {
+          position: relative;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-notifbadge {
+          position: absolute;
+          top: -5px;
+          right: -7px;
+          background: #ef4444;
+          color: white;
+          font-size: 5.5px;
+          font-weight: 700;
+          padding: 1.5px 3px;
+          border-radius: 8px;
+          font-family: "Inter", sans-serif;
+          border: 1.5px solid white;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-herotitle {
+          font-size: 15px;
+          font-weight: 800;
+          color: #111111;
+          line-height: 1.22;
+          letter-spacing: -0.04em;
+          margin-bottom: 12px;
+          font-family: "Inter", sans-serif;
+          padding-right: 84px;
+          margin-top: 2px;
+        }
+
+        /* ── Create card ── */
+        [data-composition-id="ui-3d-reveal"] .hg-createcard {
+          border: 2px solid #7dd4cf;
+          border-radius: 12px;
+          overflow: hidden;
+          background: #ffffff;
+          flex-shrink: 0;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-selrow {
+          display: flex;
+          align-items: stretch;
+          border-bottom: 1px solid #f3f4f6;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-sel {
+          flex: 1;
+          padding: 8px 10px;
+          display: flex;
+          flex-direction: column;
+          gap: 5px;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-seldiv {
+          width: 1px;
+          background: #f0f0f0;
+          flex-shrink: 0;
+          margin: 8px 0;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-settico {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding: 0 10px;
+          color: #9ca3af;
+          flex-shrink: 0;
+          border-left: 1px solid #f0f0f0;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-sellbl {
+          font-size: 8px;
+          color: #9ca3af;
+          font-weight: 500;
+          font-family: "Inter", sans-serif;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-selbox {
+          display: flex;
+          align-items: center;
+          gap: 6px;
+          background: #f4f4f5;
+          border-radius: 7px;
+          padding: 5px 7px;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-avphoto {
+          width: 30px;
+          height: 26px;
+          border-radius: 5px;
+          flex-shrink: 0;
+          background: linear-gradient(170deg, #7a4b2a 0%, #b07540 45%, #d4a070 100%);
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-seltxt {
+          font-size: 9px;
+          font-weight: 500;
+          color: #1a1a1a;
+          font-family: "Inter", sans-serif;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-voicebars {
+          display: flex;
+          align-items: center;
+          gap: 2px;
+          width: 22px;
+          justify-content: center;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-vbar {
+          width: 2.5px;
+          background: #c4c4c4;
+          border-radius: 1.5px;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-styleico {
+          width: 22px;
+          height: 22px;
+          background: #e8e8e8;
+          border-radius: 5px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          color: #888;
+          flex-shrink: 0;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-cinput {
+          padding: 10px 12px 8px;
+          font-size: 10px;
+          color: #c4c4c4;
+          font-family: "Inter", sans-serif;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-cbottom {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 6px 10px;
+          border-top: 1px solid #f3f4f6;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-cbleft {
+          display: flex;
+          align-items: center;
+          gap: 6px;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-cbtn {
+          width: 24px;
+          height: 24px;
+          border: 1px solid #e4e4e7;
+          border-radius: 6px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          color: #6b7280;
+          cursor: default;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-cbright {
+          display: flex;
+          align-items: center;
+          gap: 5px;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-genbtn {
+          display: flex;
+          align-items: center;
+          gap: 4px;
+          background: #f4f4f5;
+          border: 1px solid #e4e4e7;
+          border-radius: 8px;
+          padding: 5px 9px;
+          font-size: 9px;
+          font-weight: 500;
+          color: #374151;
+          font-family: "Inter", sans-serif;
+          cursor: default;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-submitbtn {
+          width: 26px;
+          height: 26px;
+          border-radius: 50%;
+          background: #111111;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          cursor: default;
+        }
+
+        /* ── Styles from community ── */
+        [data-composition-id="ui-3d-reveal"] .hg-stylessec {
+          margin-top: 10px;
+          flex: 1;
+          overflow: hidden;
+          display: flex;
+          flex-direction: column;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-stitle {
+          font-size: 10.5px;
+          font-weight: 600;
+          color: #111;
+          margin-bottom: 7px;
+          flex-shrink: 0;
+          font-family: "Inter", sans-serif;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-spills {
+          display: flex;
+          gap: 5px;
+          margin-bottom: 8px;
+          flex-shrink: 0;
+          overflow: hidden;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-spill {
+          font-size: 8.5px;
+          font-weight: 500;
+          white-space: nowrap;
+          padding: 4px 9px;
+          border: 1.5px solid #e0e0e3;
+          border-radius: 20px;
+          color: #555;
+          font-family: "Inter", sans-serif;
+          cursor: default;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-spactive {
+          border-color: #10b8a9;
+          color: #10b8a9;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-scards {
+          display: grid;
+          grid-template-columns: repeat(4, 1fr);
+          gap: 6px;
+          flex: 1;
+          overflow: hidden;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-sc {
+          border-radius: 6px;
+          overflow: hidden;
+          display: flex;
+          align-items: flex-end;
+          padding: 5px;
+          position: relative;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-sclbl {
+          font-size: 6px;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.85);
+          font-family: "Inter", sans-serif;
+          letter-spacing: 0.04em;
+          line-height: 1.3;
+          text-transform: uppercase;
+        }
+
+        /* ══ INTRO LAYER ══ */
+        [data-composition-id="ui-3d-reveal"] .intro-layer {
+          position: absolute;
+          inset: 0;
+          z-index: 10;
+          pointer-events: none;
+        }
+        [data-composition-id="ui-3d-reveal"] .intro-svg {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1920px;
+          height: 1080px;
+        }
+        [data-composition-id="ui-3d-reveal"] .il-stroke {
+          stroke-linecap: round;
+          stroke-linejoin: round;
+        }
+
+        /* ══ OUTRO LAYER ══ */
+        [data-composition-id="ui-3d-reveal"] .outro-layer {
+          position: absolute;
+          inset: 0;
+          z-index: 10;
+          pointer-events: none;
+          opacity: 0;
+        }
+        [data-composition-id="ui-3d-reveal"] .outro-svg {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1920px;
+          height: 1080px;
+        }
+        [data-composition-id="ui-3d-reveal"] .ol-stroke {
+          stroke-linecap: round;
+          stroke-linejoin: round;
+        }
+        [data-composition-id="ui-3d-reveal"] .outro-tagline {
+          font-family: "Inter", sans-serif;
+          font-size: 42px;
+          font-weight: 500;
+          fill: #fff;
+          letter-spacing: -0.5px;
+        }
+        [data-composition-id="ui-3d-reveal"] .otl {
+          opacity: 0;
+        }
+        [data-composition-id="ui-3d-reveal"] .url-border {
+          stroke-dasharray: 500;
+          stroke-dashoffset: 500;
+        }
+
+        /* ══ OUTRO FADE OVERLAY ══ */
+        [data-composition-id="ui-3d-reveal"] .outro-fade {
+          position: absolute;
+          inset: 0;
+          background: #000;
+          opacity: 0;
+          z-index: 20;
+          pointer-events: none;
+        }
+      </style>
+
+      <script>
+        (function () {
+          var S = '[data-composition-id="ui-3d-reveal"]';
+          var tl = gsap.timeline({ paused: true });
+
+          var wrapper = document.querySelector(S + " .card-wrapper");
+          var scene = document.querySelector(S + " .scene");
+          var cardGlow = document.querySelector(S + " .card-glow");
+
+          // ── Calculate intro stroke lengths ──
+          document.querySelectorAll(S + " .il-stroke").forEach(function (el) {
+            var len =
+              el.tagName === "circle"
+                ? 2 * Math.PI * parseFloat(el.getAttribute("r"))
+                : el.getTotalLength();
+            el.style.strokeDasharray = len;
+            el.style.strokeDashoffset = len;
+          });
+
+          // ── Calculate outro stroke lengths ──
+          document.querySelectorAll(S + " .ol-stroke").forEach(function (el) {
+            var len =
+              el.tagName === "circle"
+                ? 2 * Math.PI * parseFloat(el.getAttribute("r"))
+                : el.getTotalLength();
+            el.style.strokeDasharray = len;
+            el.style.strokeDashoffset = len;
+          });
+
+          // ─────────────────────────────────────────────────────
+          // INITIAL STATE
+          // ─────────────────────────────────────────────────────
+          gsap.set(wrapper, { opacity: 0, scale: 0.74, rotationY: 0, y: 24 });
+          gsap.set(
+            [
+              S + " .fig-toolbar",
+              S + " .fig-layers",
+              S + " .fig-props",
+              S + " .fig-canvas",
+              S + " .layer-item",
+              S + " .selection-ring",
+            ],
+            { opacity: 0 },
+          );
+          gsap.set(S + " .fig-toolbar", { y: -10 });
+          gsap.set(S + " .fig-layers", { x: -16 });
+          gsap.set(S + " .fig-props", { x: 16 });
+          gsap.set(S + " .layer-item", { x: -8 });
+          gsap.set(S + " .artboard", { scale: 0.94, opacity: 0 });
+
+          // ═════════════════════════════════════════════════════
+          // PHASE 0 — LOGO INTRO  (0 – 1.35s)
+          // Stroke draw cascade → color fill flash → scale to 0
+          // ═════════════════════════════════════════════════════
+
+          tl.to(
+            S + " .il-stroke-1",
+            { strokeDashoffset: 0, duration: 0.4, ease: "power1.inOut" },
+            0.0,
+          );
+          tl.to(
+            S + " .il-stroke-2",
+            { strokeDashoffset: 0, duration: 0.4, ease: "power1.inOut" },
+            0.06,
+          );
+          tl.to(
+            S + " .il-stroke-3",
+            { strokeDashoffset: 0, duration: 0.4, ease: "power1.inOut" },
+            0.12,
+          );
+          tl.to(
+            S + " .il-stroke-4",
+            { strokeDashoffset: 0, duration: 0.4, ease: "power1.inOut" },
+            0.18,
+          );
+          tl.to(
+            S + " .il-stroke-5",
+            { strokeDashoffset: 0, duration: 0.4, ease: "power1.inOut" },
+            0.24,
+          );
+
+          tl.to(S + " .il-fill-1", { opacity: 1, duration: 0.08 }, 0.5);
+          tl.to(S + " .il-fill-2", { opacity: 1, duration: 0.08 }, 0.54);
+          tl.to(S + " .il-fill-3", { opacity: 1, duration: 0.08 }, 0.58);
+          tl.to(S + " .il-fill-4", { opacity: 1, duration: 0.08 }, 0.62);
+          tl.to(S + " .il-fill-5", { opacity: 1, duration: 0.08 }, 0.66);
+          tl.to(S + " .il-stroke", { opacity: 0.3, duration: 0.15 }, 0.6);
+
+          // Scale the logo down to nothing
+          tl.to(S + " .il-stroke", { opacity: 0, duration: 0.2 }, 1.0);
+          tl.to(
+            S + " .intro-logo",
+            {
+              scale: 0,
+              transformOrigin: "95px 142.5px",
+              duration: 0.35,
+              ease: "power2.in",
+            },
+            1.0,
+          );
+
+          // ═════════════════════════════════════════════════════
+          // PHASE 1 — FLAT REVEAL  (1.5 – 3.4s)
+          // ═════════════════════════════════════════════════════
+          var T = 1.5;
+
+          tl.to(
+            wrapper,
+            {
+              opacity: 1,
+              scale: 0.79,
+              y: 0,
+              duration: 0.55,
+              ease: "expo.out",
+            },
+            T + 0.0,
+          );
+
+          tl.to(
+            cardGlow,
+            {
+              opacity: 0.5,
+              duration: 0.8,
+              ease: "power2.out",
+            },
+            T + 0.05,
+          );
+
+          tl.to(
+            S + " .fig-toolbar",
+            {
+              opacity: 1,
+              y: 0,
+              duration: 0.4,
+              ease: "power2.out",
+            },
+            T + 0.23,
+          );
+
+          tl.to(
+            S + " .fig-layers",
+            {
+              opacity: 1,
+              x: 0,
+              duration: 0.45,
+              ease: "expo.out",
+            },
+            T + 0.35,
+          );
+
+          tl.to(
+            S + " .fig-props",
+            {
+              opacity: 1,
+              x: 0,
+              duration: 0.45,
+              ease: "expo.out",
+            },
+            T + 0.37,
+          );
+
+          tl.to(
+            S + " .fig-canvas",
+            {
+              opacity: 1,
+              duration: 0.4,
+              ease: "power2.out",
+            },
+            T + 0.45,
+          );
+
+          tl.to(
+            S + " .artboard",
+            {
+              opacity: 1,
+              scale: 1,
+              duration: 0.55,
+              ease: "back.out(1.4)",
+            },
+            T + 0.5,
+          );
+
+          tl.to(
+            S + " .layer-item",
+            {
+              opacity: 1,
+              x: 0,
+              duration: 0.35,
+              stagger: { each: 0.045, ease: "power1.in" },
+              ease: "power2.out",
+            },
+            T + 0.57,
+          );
+
+          tl.to(
+            S + " .selection-ring",
+            {
+              opacity: 1,
+              duration: 0.25,
+              ease: "power2.out",
+            },
+            T + 1.25,
+          );
+
+          // ═════════════════════════════════════════════════════
+          // PHASE 2 — CAMERA PUSH  (3.5 – 4.8s)
+          // Bigger zoom: 0.79 → 1.15 so the UI fills the frame
+          // ═════════════════════════════════════════════════════
+
+          tl.to(
+            wrapper,
+            {
+              scale: 1.15,
+              duration: 1.3,
+              ease: "power3.inOut",
+            },
+            3.5,
+          );
+
+          tl.to(
+            cardGlow,
+            {
+              opacity: 0.85,
+              scale: 1.25,
+              duration: 1.2,
+              ease: "power2.inOut",
+            },
+            3.5,
+          );
+
+          // ═════════════════════════════════════════════════════
+          // PHASE 3 — 3D TILT  (4.2 – 5.55s)
+          // Steeper angle (-34°) for more dramatic depth reveal
+          // ═════════════════════════════════════════════════════
+
+          tl.to(
+            wrapper,
+            {
+              rotationY: -34,
+              duration: 1.35,
+              ease: "expo.out",
+            },
+            4.2,
+          );
+
+          tl.to(
+            wrapper,
+            {
+              y: -16,
+              duration: 1.1,
+              ease: "power2.out",
+            },
+            4.3,
+          );
+
+          // ═════════════════════════════════════════════════════
+          // PHASE 4 — 3D HOLD  (5.55 – 7.3s)
+          // ═════════════════════════════════════════════════════
+
+          tl.to(
+            wrapper,
+            {
+              y: -8,
+              rotationY: -31,
+              duration: 0.9,
+              ease: "sine.inOut",
+            },
+            5.55,
+          );
+
+          tl.to(
+            wrapper,
+            {
+              y: -20,
+              rotationY: -35,
+              duration: 0.9,
+              ease: "sine.inOut",
+            },
+            6.45,
+          );
+
+          tl.to(
+            cardGlow,
+            {
+              opacity: 0.7,
+              duration: 0.9,
+              ease: "sine.inOut",
+              yoyo: true,
+              repeat: 1,
+            },
+            5.55,
+          );
+
+          // ═════════════════════════════════════════════════════
+          // SLIDE OFF — 3D depth fly-away  (7.3 – 7.85s)
+          // Scene x exits left. Wrapper z shrinks into distance.
+          // Deeper z (-4000) + steeper rotation (-55°) = very
+          // dramatic 3D exit — card turns away and vanishes.
+          // ═════════════════════════════════════════════════════
+
+          tl.to(
+            scene,
+            {
+              x: -2200,
+              duration: 0.55,
+              ease: "power4.in",
+            },
+            7.3,
+          );
+
+          tl.to(
+            wrapper,
+            {
+              z: -7500,
+              rotationY: -65,
+              duration: 0.55,
+              ease: "power4.in",
+            },
+            7.3,
+          );
+
+          tl.to(
+            cardGlow,
+            {
+              opacity: 0,
+              duration: 0.3,
+              ease: "power3.in",
+            },
+            7.3,
+          );
+
+          // ═════════════════════════════════════════════════════
+          // OUTRO — LOGO BUILD + TAGLINE + PILL  (7.9 – 13s)
+          // ═════════════════════════════════════════════════════
+          var O = 7.9;
+
+          tl.set(S + " .outro-layer", { opacity: 1 }, O);
+
+          // Stroke draw cascade
+          tl.to(
+            S + " .ol-stroke-1",
+            { strokeDashoffset: 0, duration: 0.8, ease: "power1.inOut" },
+            O + 0.0,
+          );
+          tl.to(
+            S + " .ol-stroke-2",
+            { strokeDashoffset: 0, duration: 0.8, ease: "power1.inOut" },
+            O + 0.15,
+          );
+          tl.to(
+            S + " .ol-stroke-3",
+            { strokeDashoffset: 0, duration: 0.8, ease: "power1.inOut" },
+            O + 0.3,
+          );
+          tl.to(
+            S + " .ol-stroke-4",
+            { strokeDashoffset: 0, duration: 0.8, ease: "power1.inOut" },
+            O + 0.45,
+          );
+          tl.to(
+            S + " .ol-stroke-5",
+            { strokeDashoffset: 0, duration: 0.8, ease: "power1.inOut" },
+            O + 0.6,
+          );
+
+          // Color fill cascade
+          tl.to(S + " .ol-fill-1", { opacity: 1, duration: 0.15, ease: "power1.out" }, O + 1.4);
+          tl.to(S + " .ol-fill-2", { opacity: 1, duration: 0.15, ease: "power1.out" }, O + 1.55);
+          tl.to(S + " .ol-fill-3", { opacity: 1, duration: 0.15, ease: "power1.out" }, O + 1.7);
+          tl.to(S + " .ol-fill-4", { opacity: 1, duration: 0.15, ease: "power1.out" }, O + 1.85);
+          tl.to(S + " .ol-fill-5", { opacity: 1, duration: 0.15, ease: "power1.out" }, O + 2.0);
+          tl.to(S + " .ol-stroke", { opacity: 0.3, duration: 0.4, ease: "none" }, O + 1.8);
+
+          // Subtle scale settle
+          tl.fromTo(
+            S + " .outro-logo",
+            { scale: 1, transformOrigin: "80px 120px" },
+            { scale: 1.04, duration: 0.2, ease: "power2.out" },
+            O + 2.3,
+          );
+          tl.to(
+            S + " .outro-logo",
+            {
+              scale: 1,
+              transformOrigin: "80px 120px",
+              duration: 0.2,
+              ease: "power2.inOut",
+            },
+            O + 2.5,
+          );
+
+          // Tagline letter stagger
+          var letters = document.querySelectorAll(S + " .otl");
+          for (var k = 0; k < letters.length; k++) {
+            tl.fromTo(
+              letters[k],
+              { opacity: 0, y: 8 },
+              { opacity: 1, y: 0, duration: 0.12, ease: "power2.out" },
+              O + 2.8 + k * 0.025,
+            );
+          }
+
+          // URL pill: stroke draw → fill → text
+          tl.to(
+            S + " .url-border",
+            {
+              strokeDashoffset: 0,
+              duration: 0.35,
+              ease: "power1.inOut",
+            },
+            O + 3.8,
+          );
+          tl.to(S + " .url-bg", { opacity: 1, duration: 0.15 }, O + 4.15);
+          tl.to(S + " .url-text", { opacity: 1, duration: 0.2 }, O + 4.2);
+
+          // Fade to black
+          tl.to(
+            S + " .outro-fade",
+            {
+              opacity: 1,
+              duration: 0.6,
+              ease: "none",
+            },
+            O + 4.8,
+          );
+
+          window.__timelines = window.__timelines || {};
+          window.__timelines["ui-3d-reveal"] = tl;
+        })();
+      </script>
+    </div>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="ui-3d-reveal" data-composition-src="compositions/ui-3d-reveal.html" data-start="0" data-duration="13" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/us-map-bubble.mdx b/docs/catalog/blocks/us-map-bubble.mdx
index 6c9758859b..4083ae5afe 100644
--- a/docs/catalog/blocks/us-map-bubble.mdx
+++ b/docs/catalog/blocks/us-map-bubble.mdx
@@ -3,34 +3,509 @@ title: "US Bubble Map"
 description: "Animated US bubble map with proportional city markers, value callouts, and connection lines — composable with us-map"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map-bubble.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map-bubble.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/us-map-bubble.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="US Bubble Map preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add us-map-bubble
-```
+<InstallCommand command="npx hyperframes add us-map-bubble" />
 
 That writes one file: `compositions/us-map-bubble.html`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`us-map-bubble.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>US Bubble Map</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=block"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/topojson-client@3.1.0/dist/topojson-client.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background-color: #0f172a;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="us-map-bubble"
+      data-composition-id="us-map-bubble"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="12"
+    >
+      <div class="map-container">
+        <div class="header">
+          <h1 class="headline">Top 20 US Cities by Population</h1>
+          <p class="subtitle">Proportional bubble markers by metropolitan population</p>
+        </div>
+
+        <svg class="map-svg" viewBox="0 0 1400 820" preserveAspectRatio="xMidYMid meet">
+          <g class="states-group"></g>
+          <g class="connections-group"></g>
+          <g class="bubbles-group"></g>
+          <g class="callouts-group"></g>
+        </svg>
+
+        <div class="source">Source: U.S. Census Bureau, 2024</div>
+      </div>
+
+      <style>
+        #us-map-bubble {
+          width: 1920px;
+          height: 1080px;
+          background: linear-gradient(145deg, #0f172a 0%, #1e293b 100%);
+          font-family: "Inter", sans-serif;
+          color: #e2e8f0;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          overflow: hidden;
+        }
+
+        #us-map-bubble .map-container {
+          width: 1700px;
+          height: 950px;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          position: relative;
+        }
+
+        #us-map-bubble .header {
+          text-align: center;
+          margin-bottom: 20px;
+        }
+
+        #us-map-bubble .headline {
+          font-size: 52px;
+          font-weight: 700;
+          letter-spacing: -0.02em;
+          color: #f8fafc;
+          clip-path: inset(0 100% 0 0);
+        }
+
+        #us-map-bubble .subtitle {
+          font-size: 20px;
+          font-weight: 300;
+          color: #94a3b8;
+          margin-top: 8px;
+          opacity: 0;
+        }
+
+        #us-map-bubble .map-svg {
+          width: 1500px;
+          height: 750px;
+          overflow: visible;
+        }
+
+        #us-map-bubble .state-path {
+          fill: #1e293b;
+          stroke: #334155;
+          stroke-width: 0.5;
+          opacity: 0;
+        }
+
+        #us-map-bubble .city-bubble {
+          fill: rgba(59, 130, 246, 0.6);
+          stroke: #ffffff;
+          stroke-width: 1;
+          transform-origin: center center;
+          transform: scale(0);
+        }
+
+        #us-map-bubble .city-pulse {
+          fill: none;
+          stroke: rgba(59, 130, 246, 0.4);
+          stroke-width: 2;
+          opacity: 0;
+        }
+
+        #us-map-bubble .callout-group {
+          opacity: 0;
+        }
+
+        #us-map-bubble .callout-line {
+          stroke: rgba(148, 163, 184, 0.5);
+          stroke-width: 1;
+          fill: none;
+        }
+
+        #us-map-bubble .callout-name {
+          font-size: 13px;
+          font-weight: 600;
+          fill: #f8fafc;
+        }
+
+        #us-map-bubble .callout-value {
+          font-size: 11px;
+          font-weight: 400;
+          fill: #94a3b8;
+        }
+
+        #us-map-bubble .connection-line {
+          stroke: rgba(59, 130, 246, 0.3);
+          stroke-width: 1;
+          fill: none;
+          stroke-dasharray: 6 4;
+        }
+
+        #us-map-bubble .source {
+          position: absolute;
+          bottom: 0;
+          right: 40px;
+          font-size: 12px;
+          color: #475569;
+          opacity: 0;
+        }
+      </style>
+
+      <script>
+        (function () {
+          var US_TOPO_URL = "https://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.json";
+
+          var cities = [
+            { name: "New York", lat: 40.7128, lon: -74.006, pop: 8300000 },
+            { name: "Los Angeles", lat: 34.0522, lon: -118.2437, pop: 3900000 },
+            { name: "Chicago", lat: 41.8781, lon: -87.6298, pop: 2700000 },
+            { name: "Houston", lat: 29.7604, lon: -95.3698, pop: 2300000 },
+            { name: "Phoenix", lat: 33.4484, lon: -112.074, pop: 1600000 },
+            { name: "Philadelphia", lat: 39.9526, lon: -75.1652, pop: 1600000 },
+            { name: "San Antonio", lat: 29.4241, lon: -98.4936, pop: 1400000 },
+            { name: "San Diego", lat: 32.7157, lon: -117.1611, pop: 1400000 },
+            { name: "Dallas", lat: 32.7767, lon: -96.797, pop: 1300000 },
+            { name: "Jacksonville", lat: 30.3322, lon: -81.6557, pop: 950000 },
+            { name: "Austin", lat: 30.2672, lon: -97.7431, pop: 960000 },
+            { name: "San Jose", lat: 37.3382, lon: -121.8863, pop: 1000000 },
+            { name: "Fort Worth", lat: 32.7555, lon: -97.3308, pop: 930000 },
+            { name: "Columbus", lat: 39.9612, lon: -82.9988, pop: 910000 },
+            { name: "Charlotte", lat: 35.2271, lon: -80.8431, pop: 870000 },
+            { name: "Indianapolis", lat: 39.7684, lon: -86.1581, pop: 880000 },
+            { name: "San Francisco", lat: 37.7749, lon: -122.4194, pop: 870000 },
+            { name: "Seattle", lat: 47.6062, lon: -122.3321, pop: 740000 },
+            { name: "Denver", lat: 39.7392, lon: -104.9903, pop: 710000 },
+            { name: "Nashville", lat: 36.1627, lon: -86.7816, pop: 690000 },
+          ];
+
+          var radiusScale = d3.scaleSqrt().domain([500000, 8500000]).range([6, 45]);
+
+          var svg = document.querySelector("#us-map-bubble .map-svg");
+          var statesGroup = svg.querySelector(".states-group");
+          var bubblesGroup = svg.querySelector(".bubbles-group");
+          var calloutsGroup = svg.querySelector(".callouts-group");
+          var connectionsGroup = svg.querySelector(".connections-group");
+          var tl = gsap.timeline({ paused: true });
+
+          function formatPop(n) {
+            if (n >= 1000000) {
+              return (n / 1000000).toFixed(1) + "M";
+            }
+            return (n / 1000).toFixed(0) + "K";
+          }
+
+          fetch(US_TOPO_URL)
+            .then(function (r) {
+              return r.json();
+            })
+            .then(function (us) {
+              var states = topojson.feature(us, us.objects.states).features;
+              var projection = d3.geoAlbersUsa().fitSize([1380, 800], {
+                type: "FeatureCollection",
+                features: states,
+              });
+              var path = d3.geoPath().projection(projection);
+
+              states.forEach(function (feature) {
+                var d = path(feature);
+                if (!d) return;
+
+                var el = document.createElementNS("http://www.w3.org/2000/svg", "path");
+                el.setAttribute("d", d);
+                el.setAttribute("class", "state-path");
+                statesGroup.appendChild(el);
+              });
+
+              var projectedCities = [];
+              cities.forEach(function (city) {
+                var coords = projection([city.lon, city.lat]);
+                if (!coords) return;
+                projectedCities.push({
+                  name: city.name,
+                  pop: city.pop,
+                  x: coords[0],
+                  y: coords[1],
+                  r: radiusScale(city.pop),
+                });
+              });
+
+              projectedCities.sort(function (a, b) {
+                return b.pop - a.pop;
+              });
 
-It runs for 12 seconds at 1920×1080. Paste this into your composition:
+              var nycCoords = null;
+              projectedCities.forEach(function (city) {
+                if (city.name === "New York") {
+                  nycCoords = { x: city.x, y: city.y };
+                }
+              });
 
-```html index.html
-<div
-  data-composition-id="us-map-bubble"
-  data-composition-src="compositions/us-map-bubble.html"
-  data-start="0"
-  data-duration="12"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+              var connectionTargets = ["Los Angeles", "Chicago", "Houston", "Phoenix"];
+              connectionTargets.forEach(function (targetName) {
+                if (!nycCoords) return;
+                var target = null;
+                projectedCities.forEach(function (c) {
+                  if (c.name === targetName) target = c;
+                });
+                if (!target) return;
+
+                var midX = (nycCoords.x + target.x) / 2;
+                var midY = Math.min(nycCoords.y, target.y) - 60;
+
+                var pathD =
+                  "M " +
+                  nycCoords.x +
+                  " " +
+                  nycCoords.y +
+                  " Q " +
+                  midX +
+                  " " +
+                  midY +
+                  " " +
+                  target.x +
+                  " " +
+                  target.y;
+
+                var line = document.createElementNS("http://www.w3.org/2000/svg", "path");
+                line.setAttribute("d", pathD);
+                line.setAttribute("class", "connection-line");
+                connectionsGroup.appendChild(line);
+
+                var length = line.getTotalLength();
+                line.style.strokeDasharray = length;
+                line.style.strokeDashoffset = length;
+              });
+
+              projectedCities.forEach(function (city) {
+                var circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+                circle.setAttribute("cx", city.x);
+                circle.setAttribute("cy", city.y);
+                circle.setAttribute("r", city.r);
+                circle.setAttribute("class", "city-bubble");
+                circle.setAttribute("data-city", city.name);
+                bubblesGroup.appendChild(circle);
+              });
+
+              var pulseCircle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+              if (nycCoords) {
+                pulseCircle.setAttribute("cx", nycCoords.x);
+                pulseCircle.setAttribute("cy", nycCoords.y);
+                pulseCircle.setAttribute("r", radiusScale(8300000));
+                pulseCircle.setAttribute("class", "city-pulse");
+                bubblesGroup.appendChild(pulseCircle);
+              }
+
+              var top5 = projectedCities.slice(0, 5);
+              top5.forEach(function (city, i) {
+                var g = document.createElementNS("http://www.w3.org/2000/svg", "g");
+                g.setAttribute("class", "callout-group");
+
+                var offsetX = city.r + 12;
+                var offsetY = -8;
+
+                if (city.name === "Los Angeles" || city.name === "San Francisco") {
+                  offsetX = -(city.r + 80);
+                }
+
+                var calloutLine = document.createElementNS("http://www.w3.org/2000/svg", "line");
+                calloutLine.setAttribute("x1", city.x);
+                calloutLine.setAttribute("y1", city.y);
+                calloutLine.setAttribute("x2", city.x + offsetX);
+                calloutLine.setAttribute("y2", city.y + offsetY);
+                calloutLine.setAttribute("class", "callout-line");
+                g.appendChild(calloutLine);
+
+                var nameText = document.createElementNS("http://www.w3.org/2000/svg", "text");
+                nameText.setAttribute("x", city.x + offsetX + (offsetX > 0 ? 6 : -6));
+                nameText.setAttribute("y", city.y + offsetY - 2);
+                nameText.setAttribute("class", "callout-name");
+                if (offsetX < 0) {
+                  nameText.setAttribute("text-anchor", "end");
+                }
+                nameText.textContent = city.name;
+                g.appendChild(nameText);
+
+                var valueText = document.createElementNS("http://www.w3.org/2000/svg", "text");
+                valueText.setAttribute("x", city.x + offsetX + (offsetX > 0 ? 6 : -6));
+                valueText.setAttribute("y", city.y + offsetY + 14);
+                valueText.setAttribute("class", "callout-value");
+                if (offsetX < 0) {
+                  valueText.setAttribute("text-anchor", "end");
+                }
+                valueText.textContent = formatPop(city.pop) + " residents";
+                g.appendChild(valueText);
+
+                calloutsGroup.appendChild(g);
+              });
+
+              buildTimeline(projectedCities, pulseCircle);
+            });
+
+          function buildTimeline(projectedCities, pulseCircle) {
+            var statePaths = statesGroup.querySelectorAll(".state-path");
+            var bubbles = bubblesGroup.querySelectorAll(".city-bubble");
+            var callouts = calloutsGroup.querySelectorAll(".callout-group");
+            var connections = connectionsGroup.querySelectorAll(".connection-line");
+
+            tl.to(
+              "#us-map-bubble .headline",
+              {
+                clipPath: "inset(0 0% 0 0)",
+                duration: 1.0,
+                ease: "power2.inOut",
+              },
+              0,
+            );
+
+            tl.to(
+              "#us-map-bubble .subtitle",
+              {
+                opacity: 1,
+                duration: 0.6,
+                ease: "power2.out",
+              },
+              0.4,
+            );
+
+            tl.to(
+              statePaths,
+              {
+                opacity: 0.8,
+                duration: 0.6,
+                ease: "power2.out",
+              },
+              0.8,
+            );
+
+            tl.to(
+              bubbles,
+              {
+                scale: 1,
+                duration: 0.5,
+                stagger: {
+                  each: 0.08,
+                  from: "start",
+                },
+                ease: "back.out(1.7)",
+              },
+              1.5,
+            );
+
+            tl.set(callouts, { x: 20 }, 3.9);
+
+            tl.to(
+              callouts,
+              {
+                opacity: 1,
+                x: 0,
+                duration: 0.6,
+                stagger: 0.3,
+                ease: "power2.out",
+              },
+              4.0,
+            );
+
+            connections.forEach(function (line) {
+              tl.to(
+                line,
+                {
+                  strokeDashoffset: 0,
+                  duration: 1.2,
+                  ease: "power2.inOut",
+                },
+                6.0,
+              );
+            });
+
+            if (pulseCircle) {
+              tl.to(
+                pulseCircle,
+                {
+                  opacity: 1,
+                  duration: 0.01,
+                },
+                8.0,
+              );
+
+              tl.fromTo(
+                pulseCircle,
+                {
+                  attr: { r: radiusScale(8300000) },
+                  opacity: 0.6,
+                },
+                {
+                  attr: { r: radiusScale(8300000) + 30 },
+                  opacity: 0,
+                  duration: 1.5,
+                  repeat: 2,
+                  ease: "power2.out",
+                },
+                8.0,
+              );
+            }
+
+            tl.to(
+              "#us-map-bubble .source",
+              {
+                opacity: 1,
+                duration: 0.5,
+                ease: "power2.out",
+              },
+              5.5,
+            );
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines["us-map-bubble"] = tl;
+          }
+        })();
+      </script>
+    </div>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="us-map-bubble" data-composition-src="compositions/us-map-bubble.html" data-start="0" data-duration="12" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/us-map-flow.mdx b/docs/catalog/blocks/us-map-flow.mdx
index 48bcfca32d..4cd4c05648 100644
--- a/docs/catalog/blocks/us-map-flow.mdx
+++ b/docs/catalog/blocks/us-map-flow.mdx
@@ -3,34 +3,461 @@ title: "US Flow Map"
 description: "Animated connection arcs between US cities over a base map — composable origin-destination flow visualization"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map-flow.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map-flow.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/us-map-flow.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="US Flow Map preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add us-map-flow
-```
+<InstallCommand command="npx hyperframes add us-map-flow" />
 
 That writes one file: `compositions/us-map-flow.html`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`us-map-flow.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>US Flow Map</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=block"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/topojson-client@3.1.0/dist/topojson-client.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0f172a;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="us-map-flow"
+      data-composition-id="us-map-flow"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="12"
+    >
+      <div class="flow-header">
+        <h1 class="flow-headline">Interstate Flow Connections</h1>
+        <p class="flow-subtitle">Relative volume of major city-to-city corridors</p>
+      </div>
+
+      <svg class="flow-svg" viewBox="0 0 1920 1080" preserveAspectRatio="xMidYMid meet">
+        <defs>
+          <filter id="arc-glow">
+            <feGaussianBlur stdDeviation="3" result="blur" />
+            <feMerge>
+              <feMergeNode in="blur" />
+              <feMergeNode in="SourceGraphic" />
+            </feMerge>
+          </filter>
+          <filter id="dot-glow">
+            <feGaussianBlur stdDeviation="4" result="blur" />
+            <feMerge>
+              <feMergeNode in="blur" />
+              <feMergeNode in="SourceGraphic" />
+            </feMerge>
+          </filter>
+        </defs>
+        <g class="states-group"></g>
+        <g class="arcs-group"></g>
+        <g class="traveling-dots-group"></g>
+        <g class="city-dots-group"></g>
+        <g class="city-labels-group"></g>
+      </svg>
+
+      <div class="flow-source">Source: Illustrative data</div>
+
+      <style>
+        #us-map-flow {
+          position: relative;
+          width: 1920px;
+          height: 1080px;
+          background: linear-gradient(145deg, #0f172a 0%, #1e293b 100%);
+          font-family: "Inter", sans-serif;
+          color: #ffffff;
+          overflow: hidden;
+        }
+
+        #us-map-flow .flow-header {
+          position: absolute;
+          top: 40px;
+          left: 60px;
+          z-index: 2;
+        }
+
+        #us-map-flow .flow-headline {
+          font-size: 48px;
+          font-weight: 700;
+          color: #f8fafc;
+          letter-spacing: -0.02em;
+          clip-path: inset(0 100% 0 0);
+        }
+
+        #us-map-flow .flow-subtitle {
+          font-size: 22px;
+          font-weight: 300;
+          color: #94a3b8;
+          margin-top: 8px;
+          opacity: 0;
+        }
+
+        #us-map-flow .flow-svg {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1920px;
+          height: 1080px;
+        }
+
+        #us-map-flow .state-path {
+          fill: #1e293b;
+          stroke: #334155;
+          stroke-width: 0.5;
+          opacity: 0;
+        }
+
+        #us-map-flow .arc-path {
+          fill: none;
+          stroke: #3b82f6;
+          filter: url(#arc-glow);
+          stroke-linecap: round;
+        }
+
+        #us-map-flow .city-dot {
+          fill: #ffffff;
+          filter: url(#dot-glow);
+          opacity: 0;
+        }
+
+        #us-map-flow .city-label {
+          fill: #cbd5e1;
+          font-family: "Inter", sans-serif;
+          font-size: 13px;
+          font-weight: 500;
+          opacity: 0;
+        }
+
+        #us-map-flow .traveling-dot {
+          fill: #60a5fa;
+          opacity: 0;
+        }
+
+        #us-map-flow .flow-source {
+          position: absolute;
+          bottom: 30px;
+          right: 60px;
+          font-size: 14px;
+          font-weight: 400;
+          color: #475569;
+          opacity: 0;
+        }
+      </style>
+
+      <script>
+        (function () {
+          var NS = "http://www.w3.org/2000/svg";
+          var root = document.getElementById("us-map-flow");
+          var svg = root.querySelector(".flow-svg");
+          var statesGroup = svg.querySelector(".states-group");
+          var arcsGroup = svg.querySelector(".arcs-group");
+          var travelingDotsGroup = svg.querySelector(".traveling-dots-group");
+          var cityDotsGroup = svg.querySelector(".city-dots-group");
+          var cityLabelsGroup = svg.querySelector(".city-labels-group");
+
+          var tl = gsap.timeline({ paused: true });
+
+          /* --- City data: name → [longitude, latitude] (D3 uses [lon, lat]) --- */
+          var cities = {
+            "San Francisco": [-122.4194, 37.7749],
+            "New York": [-74.006, 40.7128],
+            "Los Angeles": [-118.2437, 34.0522],
+            Chicago: [-87.6298, 41.8781],
+            Seattle: [-122.3321, 47.6062],
+            Austin: [-97.7431, 30.2672],
+            Miami: [-80.1918, 25.7617],
+            Denver: [-104.9903, 39.7392],
+            Houston: [-95.3698, 29.7604],
+            Atlanta: [-84.388, 33.749],
+            Boston: [-71.0589, 42.3601],
+            Dallas: [-96.797, 32.7767],
+          };
+
+          /* --- Flow connections --- */
+          var flows = [
+            { from: "San Francisco", to: "New York", volume: 100 },
+            { from: "Los Angeles", to: "Chicago", volume: 85 },
+            { from: "Seattle", to: "Austin", volume: 70 },
+            { from: "New York", to: "Miami", volume: 90 },
+            { from: "Chicago", to: "Denver", volume: 65 },
+            { from: "Houston", to: "Atlanta", volume: 75 },
+            { from: "Boston", to: "San Francisco", volume: 80 },
+            { from: "Denver", to: "Los Angeles", volume: 60 },
+            { from: "Atlanta", to: "Dallas", volume: 55 },
+            { from: "Miami", to: "New York", volume: 50 },
+            { from: "Austin", to: "Seattle", volume: 45 },
+            { from: "Dallas", to: "Chicago", volume: 40 },
+          ];
+
+          var maxVolume = 100;
+          var minWidth = 1.5;
+          var maxWidth = 4;
+
+          /* --- Projection centered on continental US --- */
+          var projection = d3.geoAlbersUsa().scale(1300).translate([960, 560]);
+
+          var pathGen = d3.geoPath().projection(projection);
+
+          /* --- Project city positions --- */
+          var projected = {};
+          var cityNames = Object.keys(cities);
+          cityNames.forEach(function (name) {
+            var p = projection(cities[name]);
+            if (p) {
+              projected[name] = { x: p[0], y: p[1] };
+            }
+          });
 
-It runs for 12 seconds at 1920×1080. Paste this into your composition:
+          /* --- Unique city list for dots/labels (only those that project) --- */
+          var visibleCities = Object.keys(projected);
 
-```html index.html
-<div
-  data-composition-id="us-map-flow"
-  data-composition-src="compositions/us-map-flow.html"
-  data-start="0"
-  data-duration="12"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+          /* --- Build arc path string (quadratic bezier curving upward) --- */
+          function buildArcPath(fromName, toName) {
+            var p1 = projected[fromName];
+            var p2 = projected[toName];
+            if (!p1 || !p2) return null;
+            var x1 = p1.x;
+            var y1 = p1.y;
+            var x2 = p2.x;
+            var y2 = p2.y;
+            var midX = (x1 + x2) / 2;
+            var midY = Math.min(y1, y2) - Math.abs(x2 - x1) * 0.15;
+            return "M" + x1 + "," + y1 + " Q" + midX + "," + midY + " " + x2 + "," + y2;
+          }
+
+          /* --- Load topology and render states --- */
+          d3.json("https://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.json").then(function (us) {
+            var states = topojson.feature(us, us.objects.states).features;
+
+            states.forEach(function (feature) {
+              var d = pathGen(feature);
+              if (!d) return;
+              var path = document.createElementNS(NS, "path");
+              path.setAttribute("d", d);
+              path.setAttribute("class", "state-path");
+              statesGroup.appendChild(path);
+            });
+
+            /* --- Create arc paths --- */
+            var arcPaths = [];
+            flows.forEach(function (flow) {
+              var d = buildArcPath(flow.from, flow.to);
+              if (!d) return;
+
+              var strokeW = minWidth + (flow.volume / maxVolume) * (maxWidth - minWidth);
+              var arcOpacity = 0.4 + (flow.volume / maxVolume) * 0.6;
+
+              var path = document.createElementNS(NS, "path");
+              path.setAttribute("d", d);
+              path.setAttribute("class", "arc-path");
+              path.setAttribute("stroke-width", strokeW);
+              path.style.opacity = arcOpacity;
+              arcsGroup.appendChild(path);
+
+              var len = path.getTotalLength();
+              path.style.strokeDasharray = len;
+              path.style.strokeDashoffset = len;
+
+              arcPaths.push({ el: path, length: len });
+            });
+
+            /* --- Create city dots --- */
+            visibleCities.forEach(function (name) {
+              var p = projected[name];
+              var circle = document.createElementNS(NS, "circle");
+              circle.setAttribute("cx", p.x);
+              circle.setAttribute("cy", p.y);
+              circle.setAttribute("r", 5);
+              circle.setAttribute("class", "city-dot");
+              cityDotsGroup.appendChild(circle);
+            });
+
+            /* --- Create city labels with offset --- */
+            visibleCities.forEach(function (name) {
+              var p = projected[name];
+              var text = document.createElementNS(NS, "text");
+              text.setAttribute("x", p.x + 10);
+              text.setAttribute("y", p.y - 10);
+              text.setAttribute("class", "city-label");
+              text.textContent = name;
+              cityLabelsGroup.appendChild(text);
+            });
+
+            /* --- Create traveling dots (one per arc) --- */
+            var travelingDots = [];
+            arcPaths.forEach(function () {
+              var dot = document.createElementNS(NS, "circle");
+              dot.setAttribute("r", 3);
+              dot.setAttribute("class", "traveling-dot");
+              travelingDotsGroup.appendChild(dot);
+              travelingDots.push(dot);
+            });
+
+            /* ===== GSAP TIMELINE ===== */
+
+            /* 0s: headline clip-path wipe */
+            tl.to(
+              "#us-map-flow .flow-headline",
+              {
+                clipPath: "inset(0 0% 0 0)",
+                duration: 1,
+                ease: "power2.inOut",
+              },
+              0,
+            );
+
+            /* 0.3s: subtitle fade */
+            tl.to(
+              "#us-map-flow .flow-subtitle",
+              {
+                opacity: 1,
+                duration: 0.5,
+                ease: "power2.out",
+              },
+              0.3,
+            );
+
+            /* 0.6s: states fade in */
+            tl.to(
+              "#us-map-flow .state-path",
+              {
+                opacity: 1,
+                duration: 0.8,
+                ease: "power2.out",
+              },
+              0.6,
+            );
+
+            /* 1.5s: city dots pop in */
+            tl.to(
+              "#us-map-flow .city-dot",
+              {
+                opacity: 1,
+                scale: 1,
+                transformOrigin: "center center",
+                duration: 0.4,
+                stagger: 0.05,
+                ease: "back.out(1.7)",
+              },
+              1.5,
+            );
+
+            /* 2.5s: city labels fade in */
+            tl.to(
+              "#us-map-flow .city-label",
+              {
+                opacity: 1,
+                duration: 0.3,
+                stagger: 0.05,
+                ease: "power2.out",
+              },
+              2.5,
+            );
+
+            /* 3.5s: arcs draw sequentially */
+            arcPaths.forEach(function (arc, i) {
+              tl.to(
+                arc.el,
+                {
+                  strokeDashoffset: 0,
+                  duration: 1,
+                  ease: "power2.inOut",
+                },
+                3.5 + i * 0.2,
+              );
+            });
+
+            /* 7.0s: traveling dots animate along paths */
+            arcPaths.forEach(function (arc, i) {
+              var dot = travelingDots[i];
+              var pathEl = arc.el;
+              var pathLength = arc.length;
+
+              tl.set(dot, { opacity: 0.9 }, 7.0 + i * 0.1);
+
+              var progress = { value: 0 };
+              tl.to(
+                progress,
+                {
+                  value: 1,
+                  duration: 1.5,
+                  ease: "power1.inOut",
+                  onUpdate: function () {
+                    var pt = pathEl.getPointAtLength(progress.value * pathLength);
+                    dot.setAttribute("cx", pt.x);
+                    dot.setAttribute("cy", pt.y);
+                  },
+                  onComplete: function () {
+                    gsap.to(dot, { opacity: 0, duration: 0.3 });
+                  },
+                },
+                7.0 + i * 0.1,
+              );
+            });
+
+            /* 9.0s: source fade in */
+            tl.to(
+              "#us-map-flow .flow-source",
+              {
+                opacity: 1,
+                duration: 0.6,
+                ease: "power2.out",
+              },
+              9.0,
+            );
+
+            /* Register timeline */
+            window.__timelines = window.__timelines || {};
+            window.__timelines["us-map-flow"] = tl;
+          });
+        })();
+      </script>
+    </div>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="us-map-flow" data-composition-src="compositions/us-map-flow.html" data-start="0" data-duration="12" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/us-map-hex.mdx b/docs/catalog/blocks/us-map-hex.mdx
index e2b33130c2..666bd7ae61 100644
--- a/docs/catalog/blocks/us-map-hex.mdx
+++ b/docs/catalog/blocks/us-map-hex.mdx
@@ -3,34 +3,591 @@ title: "US Hex Grid Map"
 description: "Animated hexagonal tile grid map — each state as an equal-weight hex with data fill and abbreviation label"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map-hex.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map-hex.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/us-map-hex.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="US Hex Grid Map preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add us-map-hex
-```
+<InstallCommand command="npx hyperframes add us-map-hex" />
 
 That writes one file: `compositions/us-map-hex.html`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`us-map-hex.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>US Hex Grid Map</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=block"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: linear-gradient(145deg, #0f172a 0%, #1e293b 100%);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="us-map-hex"
+      data-composition-id="us-map-hex"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="10"
+    >
+      <div class="map-header">
+        <h1 class="map-headline">Median Household Income by State</h1>
+        <p class="map-subtitle">American Community Survey, 2024</p>
+      </div>
+
+      <svg class="hex-svg" viewBox="0 0 1920 1080" preserveAspectRatio="xMidYMid meet">
+        <g class="hex-grid"></g>
+        <g class="hex-labels"></g>
+      </svg>
+
+      <div class="map-legend">
+        <div class="legend-label legend-low">$52k</div>
+        <div class="legend-bar"></div>
+        <div class="legend-label legend-high">$107k</div>
+      </div>
+
+      <div class="map-source">Source: U.S. Census Bureau, American Community Survey 2024</div>
+
+      <style>
+        #us-map-hex {
+          width: 1920px;
+          height: 1080px;
+          background: linear-gradient(145deg, #0f172a 0%, #1e293b 100%);
+          font-family: "Inter", sans-serif;
+          color: #f8fafc;
+          position: relative;
+          overflow: hidden;
+        }
+
+        #us-map-hex .map-header {
+          position: absolute;
+          top: 48px;
+          left: 80px;
+          z-index: 2;
+        }
+
+        #us-map-hex .map-headline {
+          font-size: 48px;
+          font-weight: 700;
+          letter-spacing: -0.02em;
+          color: #f8fafc;
+          clip-path: inset(0 100% 0 0);
+          white-space: nowrap;
+        }
+
+        #us-map-hex .map-subtitle {
+          font-size: 20px;
+          font-weight: 400;
+          color: #94a3b8;
+          margin-top: 8px;
+          opacity: 0;
+        }
+
+        #us-map-hex .hex-svg {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1920px;
+          height: 1080px;
+        }
+
+        #us-map-hex .hex-poly {
+          stroke: #0f172a;
+          stroke-width: 2;
+          opacity: 0;
+        }
+
+        #us-map-hex .hex-text {
+          font-family: "Inter", sans-serif;
+          font-size: 14px;
+          font-weight: 600;
+          fill: #0f172a;
+          text-anchor: middle;
+          dominant-baseline: central;
+          pointer-events: none;
+          opacity: 0;
+        }
+
+        #us-map-hex .hex-text.light-text {
+          fill: #fef3c7;
+        }
+
+        #us-map-hex .map-legend {
+          position: absolute;
+          bottom: 80px;
+          left: 80px;
+          display: flex;
+          align-items: center;
+          gap: 12px;
+          opacity: 0;
+        }
+
+        #us-map-hex .legend-bar {
+          width: 240px;
+          height: 16px;
+          border-radius: 4px;
+          background: linear-gradient(90deg, #451a03 0%, #f59e0b 50%, #fef3c7 100%);
+        }
+
+        #us-map-hex .legend-label {
+          font-size: 14px;
+          font-weight: 500;
+          color: #94a3b8;
+        }
+
+        #us-map-hex .map-source {
+          position: absolute;
+          bottom: 48px;
+          left: 80px;
+          font-size: 12px;
+          color: #475569;
+          opacity: 0;
+        }
+      </style>
+
+      <script>
+        (function () {
+          var NS = "http://www.w3.org/2000/svg";
+          var hexGrid = document.querySelector("#us-map-hex .hex-grid");
+          var hexLabels = document.querySelector("#us-map-hex .hex-labels");
+
+          /* --- State grid positions (col, row) --- */
+          var positions = {
+            ME: [10, 0],
+            VT: [9, 1],
+            NH: [10, 1],
+            WA: [0, 2],
+            MT: [1, 2],
+            ND: [2, 2],
+            MN: [3, 2],
+            WI: [4, 2],
+            MI: [7, 2],
+            NY: [8, 2],
+            MA: [9, 2],
+            RI: [10, 2],
+            ID: [0, 3],
+            WY: [1, 3],
+            SD: [2, 3],
+            IA: [3, 3],
+            IL: [4, 3],
+            IN: [5, 3],
+            OH: [6, 3],
+            PA: [7, 3],
+            NJ: [8, 3],
+            CT: [9, 3],
+            OR: [0, 4],
+            NV: [1, 4],
+            CO: [2, 4],
+            NE: [3, 4],
+            MO: [4, 4],
+            KY: [5, 4],
+            WV: [6, 4],
+            VA: [7, 4],
+            MD: [8, 4],
+            DE: [9, 4],
+            CA: [0, 5],
+            UT: [1, 5],
+            NM: [2, 5],
+            KS: [3, 5],
+            AR: [4, 5],
+            TN: [5, 5],
+            NC: [6, 5],
+            SC: [7, 5],
+            DC: [8, 5],
+            AZ: [1, 6],
+            OK: [3, 6],
+            LA: [4, 6],
+            MS: [5, 6],
+            AL: [6, 6],
+            GA: [7, 6],
+            HI: [0, 7],
+            TX: [3, 7],
+            FL: [7, 7],
+            AK: [0, 8],
+          };
+
+          /* --- Median household income (2024 ACS, rounded to nearest $1k) --- */
+          var income = {
+            MD: 106998,
+            NJ: 101778,
+            MA: 101079,
+            CT: 92545,
+            HI: 91010,
+            NH: 90845,
+            WA: 90325,
+            CA: 89648,
+            CO: 87598,
+            VA: 87249,
+            UT: 86833,
+            MN: 84313,
+            AK: 83601,
+            NY: 81386,
+            RI: 81370,
+            IL: 79253,
+            OR: 76632,
+            DE: 75932,
+            WI: 72458,
+            NV: 71646,
+            VT: 71560,
+            PA: 71610,
+            ND: 71017,
+            NE: 70654,
+            TX: 70813,
+            AZ: 70821,
+            ID: 69973,
+            MT: 68091,
+            GA: 67992,
+            ME: 67587,
+            FL: 67917,
+            IA: 67684,
+            WY: 67249,
+            SD: 66894,
+            MI: 66986,
+            IN: 65834,
+            OH: 64018,
+            MO: 63594,
+            KS: 66354,
+            NC: 65070,
+            TN: 63426,
+            SC: 62064,
+            OK: 60438,
+            KY: 57584,
+            NM: 58257,
+            AL: 57563,
+            LA: 55728,
+            WV: 52520,
+            AR: 53289,
+            MS: 52434,
+            DC: 101722,
+          };
+
+          /* --- Color interpolation --- */
+          var incomeValues = [];
+          var stateKeys = Object.keys(income);
+          for (var i = 0; i < stateKeys.length; i++) {
+            incomeValues.push(income[stateKeys[i]]);
+          }
+          var minIncome = Math.min.apply(null, incomeValues);
+          var maxIncome = Math.max.apply(null, incomeValues);
+
+          function lerp(a, b, t) {
+            return a + (b - a) * t;
+          }
+
+          function hexToRgb(hex) {
+            var r = parseInt(hex.substring(1, 3), 16);
+            var g = parseInt(hex.substring(3, 5), 16);
+            var b = parseInt(hex.substring(5, 7), 16);
+            return [r, g, b];
+          }
+
+          var colorLow = hexToRgb("#451a03");
+          var colorMid = hexToRgb("#f59e0b");
+          var colorHigh = hexToRgb("#fef3c7");
+
+          function getColor(val) {
+            var t = (val - minIncome) / (maxIncome - minIncome);
+            var r, g, b;
+            if (t < 0.5) {
+              var t2 = t / 0.5;
+              r = Math.round(lerp(colorLow[0], colorMid[0], t2));
+              g = Math.round(lerp(colorLow[1], colorMid[1], t2));
+              b = Math.round(lerp(colorLow[2], colorMid[2], t2));
+            } else {
+              var t2 = (t - 0.5) / 0.5;
+              r = Math.round(lerp(colorMid[0], colorHigh[0], t2));
+              g = Math.round(lerp(colorMid[1], colorHigh[1], t2));
+              b = Math.round(lerp(colorMid[2], colorHigh[2], t2));
+            }
+            return "rgb(" + r + "," + g + "," + b + ")";
+          }
 
-It runs for 10 seconds at 1920×1080. Paste this into your composition:
+          /* Determine if text should be light on dark hex */
+          function isLightText(val) {
+            var t = (val - minIncome) / (maxIncome - minIncome);
+            return t < 0.35;
+          }
 
-```html index.html
-<div
-  data-composition-id="us-map-hex"
-  data-composition-src="compositions/us-map-hex.html"
-  data-start="0"
-  data-duration="10"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+          /* --- Hex geometry (flat-top) --- */
+          var hexW = 80;
+          var hexS = hexW / 2;
+          var hexH = hexS * Math.sqrt(3);
+          var startX = 480;
+          var startY = 200;
+
+          function hexCenter(col, row) {
+            var cx = startX + col * (hexW * 0.75);
+            var cy = startY + row * hexH;
+            if (row % 2 === 1) {
+              cx += hexW * 0.375;
+            }
+            return [cx, cy];
+          }
+
+          function hexPoints(cx, cy) {
+            var pts = [
+              [cx - hexS, cy],
+              [cx - hexS / 2, cy - hexH / 2],
+              [cx + hexS / 2, cy - hexH / 2],
+              [cx + hexS, cy],
+              [cx + hexS / 2, cy + hexH / 2],
+              [cx - hexS / 2, cy + hexH / 2],
+            ];
+            var strs = [];
+            for (var i = 0; i < pts.length; i++) {
+              strs.push(pts[i][0].toFixed(2) + "," + pts[i][1].toFixed(2));
+            }
+            return strs.join(" ");
+          }
+
+          /* --- Compute center of all hexes for stagger distance --- */
+          var allCenters = [];
+          var allStates = Object.keys(positions);
+          for (var i = 0; i < allStates.length; i++) {
+            var pos = positions[allStates[i]];
+            var center = hexCenter(pos[0], pos[1]);
+            allCenters.push(center);
+          }
+          var avgCx = 0;
+          var avgCy = 0;
+          for (var i = 0; i < allCenters.length; i++) {
+            avgCx += allCenters[i][0];
+            avgCy += allCenters[i][1];
+          }
+          avgCx /= allCenters.length;
+          avgCy /= allCenters.length;
+
+          /* --- Create hex elements --- */
+          var hexPolys = [];
+          var hexTexts = [];
+          var distances = [];
+
+          for (var i = 0; i < allStates.length; i++) {
+            var st = allStates[i];
+            var pos = positions[st];
+            var center = hexCenter(pos[0], pos[1]);
+            var cx = center[0];
+            var cy = center[1];
+
+            var poly = document.createElementNS(NS, "polygon");
+            poly.setAttribute("points", hexPoints(cx, cy));
+            poly.setAttribute("fill", getColor(income[st]));
+            poly.setAttribute("class", "hex-poly");
+            poly.setAttribute("data-state", st);
+            hexGrid.appendChild(poly);
+            hexPolys.push(poly);
+
+            var text = document.createElementNS(NS, "text");
+            text.setAttribute("x", cx);
+            text.setAttribute("y", cy);
+            var textClass = "hex-text";
+            if (isLightText(income[st])) {
+              textClass += " light-text";
+            }
+            text.setAttribute("class", textClass);
+            text.textContent = st;
+            hexLabels.appendChild(text);
+            hexTexts.push(text);
+
+            var dx = cx - avgCx;
+            var dy = cy - avgCy;
+            distances.push(Math.sqrt(dx * dx + dy * dy));
+          }
+
+          /* --- Sort indices by distance from center (for stagger) --- */
+          var sortedIndices = [];
+          for (var i = 0; i < allStates.length; i++) {
+            sortedIndices.push(i);
+          }
+          sortedIndices.sort(function (a, b) {
+            return distances[a] - distances[b];
+          });
+
+          var sortedPolys = [];
+          var sortedTexts = [];
+          for (var i = 0; i < sortedIndices.length; i++) {
+            sortedPolys.push(hexPolys[sortedIndices[i]]);
+            sortedTexts.push(hexTexts[sortedIndices[i]]);
+          }
+
+          /* --- GSAP Timeline --- */
+          var tl = gsap.timeline({ paused: true });
+
+          /* 0s: headline wipe */
+          tl.to(
+            "#us-map-hex .map-headline",
+            {
+              clipPath: "inset(0 0% 0 0)",
+              duration: 1,
+              ease: "power2.inOut",
+            },
+            0,
+          );
+
+          /* 0.3s: subtitle fade */
+          tl.to(
+            "#us-map-hex .map-subtitle",
+            {
+              opacity: 1,
+              duration: 0.5,
+              ease: "power2.out",
+            },
+            0.3,
+          );
+
+          /* 0.8s: hexagons stagger in from center outward */
+          tl.fromTo(
+            sortedPolys,
+            {
+              opacity: 0,
+              scale: 0,
+              transformOrigin: "50% 50%",
+            },
+            {
+              opacity: 1,
+              scale: 1,
+              duration: 0.4,
+              stagger: 0.03,
+              ease: "back.out(1.4)",
+            },
+            0.8,
+          );
+
+          /* 3.5s: state labels fade in */
+          tl.fromTo(
+            sortedTexts,
+            { opacity: 0 },
+            {
+              opacity: 1,
+              duration: 0.3,
+              stagger: 0.02,
+              ease: "power2.out",
+            },
+            3.5,
+          );
+
+          /* 5.0s: legend fade */
+          tl.to(
+            "#us-map-hex .map-legend",
+            {
+              opacity: 1,
+              duration: 0.6,
+              ease: "power2.out",
+            },
+            5.0,
+          );
+
+          /* 5.5s: source fade */
+          tl.to(
+            "#us-map-hex .map-source",
+            {
+              opacity: 1,
+              duration: 0.5,
+              ease: "power2.out",
+            },
+            5.5,
+          );
+
+          /* 6.0s: top 5 income states pulse */
+          var topStates = ["MD", "NJ", "MA", "CT", "HI"];
+          var topPolys = [];
+          for (var i = 0; i < topStates.length; i++) {
+            for (var j = 0; j < allStates.length; j++) {
+              if (allStates[j] === topStates[i]) {
+                topPolys.push(hexPolys[j]);
+                break;
+              }
+            }
+          }
+
+          tl.to(
+            topPolys,
+            {
+              filter: "brightness(1.4)",
+              duration: 0.4,
+              stagger: 0.08,
+              ease: "power2.out",
+            },
+            6.0,
+          );
+
+          tl.to(
+            topPolys,
+            {
+              filter: "brightness(1)",
+              duration: 0.4,
+              stagger: 0.08,
+              ease: "power2.in",
+            },
+            6.8,
+          );
+
+          tl.to(
+            topPolys,
+            {
+              filter: "brightness(1.3)",
+              duration: 0.3,
+              stagger: 0.06,
+              ease: "power2.out",
+            },
+            7.4,
+          );
+
+          tl.to(
+            topPolys,
+            {
+              filter: "brightness(1)",
+              duration: 0.5,
+              stagger: 0.06,
+              ease: "power2.in",
+            },
+            8.0,
+          );
+
+          window.__timelines = window.__timelines || {};
+          window.__timelines["us-map-hex"] = tl;
+        })();
+      </script>
+    </div>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="us-map-hex" data-composition-src="compositions/us-map-hex.html" data-start="0" data-duration="10" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/us-map.mdx b/docs/catalog/blocks/us-map.mdx
index f1ed14ad1b..71d77f8c3c 100644
--- a/docs/catalog/blocks/us-map.mdx
+++ b/docs/catalog/blocks/us-map.mdx
@@ -3,34 +3,434 @@ title: "US Map"
 description: "Animated US choropleth map with staggered state reveals, value labels, and gradient legend — pure inline SVG with GSAP"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/us-map.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="US Map preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add us-map
-```
+<InstallCommand command="npx hyperframes add us-map" />
 
 That writes one file: `compositions/us-map.html`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`us-map.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>US Map</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=block"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/topojson-client@3.1.0/dist/topojson-client.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background-color: #0f172a;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="us-map"
+      data-composition-id="us-map"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="12"
+    >
+      <div class="map-container">
+        <div class="header">
+          <h1 class="headline">Population Density by State</h1>
+          <p class="subtitle">Residents per square mile, 2024 Census estimates</p>
+        </div>
+
+        <svg class="map-svg" viewBox="0 0 1400 820" preserveAspectRatio="xMidYMid meet">
+          <g class="states-group"></g>
+          <g class="labels-group"></g>
+        </svg>
+
+        <div class="legend">
+          <span class="legend-label legend-low">Low</span>
+          <div class="legend-bar"></div>
+          <span class="legend-label legend-high">High</span>
+        </div>
+
+        <div class="source">Source: U.S. Census Bureau</div>
+      </div>
+
+      <style>
+        #us-map {
+          width: 1920px;
+          height: 1080px;
+          background: linear-gradient(145deg, #0f172a 0%, #1e293b 100%);
+          font-family: "Inter", sans-serif;
+          color: #e2e8f0;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          overflow: hidden;
+        }
+
+        #us-map .map-container {
+          width: 1700px;
+          height: 950px;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          position: relative;
+        }
+
+        #us-map .header {
+          text-align: center;
+          margin-bottom: 20px;
+        }
+
+        #us-map .headline {
+          font-size: 52px;
+          font-weight: 700;
+          letter-spacing: -0.02em;
+          color: #f8fafc;
+          clip-path: inset(0 100% 0 0);
+        }
+
+        #us-map .subtitle {
+          font-size: 20px;
+          font-weight: 300;
+          color: #94a3b8;
+          margin-top: 8px;
+          opacity: 0;
+        }
+
+        #us-map .map-svg {
+          width: 1500px;
+          height: 750px;
+          overflow: visible;
+        }
+
+        #us-map .state-path {
+          stroke: #1e293b;
+          stroke-width: 1.2;
+          opacity: 0;
+          cursor: default;
+        }
+
+        #us-map .state-label {
+          font-size: 10px;
+          font-weight: 500;
+          fill: #f8fafc;
+          text-anchor: middle;
+          dominant-baseline: central;
+          opacity: 0;
+          pointer-events: none;
+          text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+        }
+
+        #us-map .legend {
+          display: flex;
+          align-items: center;
+          gap: 12px;
+          margin-top: 16px;
+          opacity: 0;
+        }
+
+        #us-map .legend-bar {
+          width: 300px;
+          height: 12px;
+          border-radius: 6px;
+          background: linear-gradient(90deg, #1e3a5f, #2563eb, #7c3aed, #ec4899);
+        }
+
+        #us-map .legend-label {
+          font-size: 14px;
+          font-weight: 500;
+          color: #94a3b8;
+        }
+
+        #us-map .source {
+          position: absolute;
+          bottom: 0;
+          right: 40px;
+          font-size: 12px;
+          color: #475569;
+          opacity: 0;
+        }
+      </style>
+
+      <script>
+        (function () {
+          const US_TOPO_URL = "https://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.json";
+
+          const stateData = {
+            "01": { name: "Alabama", abbr: "AL", density: 99.2 },
+            "02": { name: "Alaska", abbr: "AK", density: 1.3 },
+            "04": { name: "Arizona", abbr: "AZ", density: 63.5 },
+            "05": { name: "Arkansas", abbr: "AR", density: 58.1 },
+            "06": { name: "California", abbr: "CA", density: 253.9 },
+            "08": { name: "Colorado", abbr: "CO", density: 56.5 },
+            "09": { name: "Connecticut", abbr: "CT", density: 738.1 },
+            10: { name: "Delaware", abbr: "DE", density: 508.0 },
+            12: { name: "Florida", abbr: "FL", density: 410.5 },
+            13: { name: "Georgia", abbr: "GA", density: 185.6 },
+            15: { name: "Hawaii", abbr: "HI", density: 226.6 },
+            16: { name: "Idaho", abbr: "ID", density: 22.8 },
+            17: { name: "Illinois", abbr: "IL", density: 228.2 },
+            18: { name: "Indiana", abbr: "IN", density: 186.7 },
+            19: { name: "Iowa", abbr: "IA", density: 57.1 },
+            20: { name: "Kansas", abbr: "KS", density: 35.9 },
+            21: { name: "Kentucky", abbr: "KY", density: 113.2 },
+            22: { name: "Louisiana", abbr: "LA", density: 107.7 },
+            23: { name: "Maine", abbr: "ME", density: 43.8 },
+            24: { name: "Maryland", abbr: "MD", density: 636.1 },
+            25: { name: "Massachusetts", abbr: "MA", density: 901.2 },
+            26: { name: "Michigan", abbr: "MI", density: 176.4 },
+            27: { name: "Minnesota", abbr: "MN", density: 71.7 },
+            28: { name: "Mississippi", abbr: "MS", density: 63.5 },
+            29: { name: "Missouri", abbr: "MO", density: 89.5 },
+            30: { name: "Montana", abbr: "MT", density: 7.6 },
+            31: { name: "Nebraska", abbr: "NE", density: 25.3 },
+            32: { name: "Nevada", abbr: "NV", density: 28.3 },
+            33: { name: "New Hampshire", abbr: "NH", density: 153.2 },
+            34: { name: "New Jersey", abbr: "NJ", density: 1263.0 },
+            35: { name: "New Mexico", abbr: "NM", density: 17.4 },
+            36: { name: "New York", abbr: "NY", density: 415.3 },
+            37: { name: "North Carolina", abbr: "NC", density: 214.7 },
+            38: { name: "North Dakota", abbr: "ND", density: 11.3 },
+            39: { name: "Ohio", abbr: "OH", density: 288.8 },
+            40: { name: "Oklahoma", abbr: "OK", density: 57.7 },
+            41: { name: "Oregon", abbr: "OR", density: 43.9 },
+            42: { name: "Pennsylvania", abbr: "PA", density: 286.1 },
+            44: { name: "Rhode Island", abbr: "RI", density: 1061.4 },
+            45: { name: "South Carolina", abbr: "SC", density: 170.2 },
+            46: { name: "South Dakota", abbr: "SD", density: 12.2 },
+            47: { name: "Tennessee", abbr: "TN", density: 167.0 },
+            48: { name: "Texas", abbr: "TX", density: 112.8 },
+            49: { name: "Utah", abbr: "UT", density: 40.3 },
+            50: { name: "Vermont", abbr: "VT", density: 68.0 },
+            51: { name: "Virginia", abbr: "VA", density: 218.6 },
+            53: { name: "Washington", abbr: "WA", density: 115.9 },
+            54: { name: "West Virginia", abbr: "WV", density: 74.6 },
+            55: { name: "Wisconsin", abbr: "WI", density: 108.8 },
+            56: { name: "Wyoming", abbr: "WY", density: 5.8 },
+          };
+
+          const maxDensity = 500;
+
+          function densityToColor(d) {
+            const t = Math.min(d / maxDensity, 1);
+            if (t < 0.33) {
+              const s = t / 0.33;
+              return lerpColor([30, 58, 95], [37, 99, 235], s);
+            } else if (t < 0.66) {
+              const s = (t - 0.33) / 0.33;
+              return lerpColor([37, 99, 235], [124, 58, 237], s);
+            } else {
+              const s = (t - 0.66) / 0.34;
+              return lerpColor([124, 58, 237], [236, 72, 153], s);
+            }
+          }
 
-It runs for 12 seconds at 1920×1080. Paste this into your composition:
+          function lerpColor(a, b, t) {
+            const r = Math.round(a[0] + (b[0] - a[0]) * t);
+            const g = Math.round(a[1] + (b[1] - a[1]) * t);
+            const bl = Math.round(a[2] + (b[2] - a[2]) * t);
+            return "rgb(" + r + "," + g + "," + bl + ")";
+          }
 
-```html index.html
-<div
-  data-composition-id="us-map"
-  data-composition-src="compositions/us-map.html"
-  data-start="0"
-  data-duration="12"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+          const svg = document.querySelector("#us-map .map-svg");
+          const statesGroup = svg.querySelector(".states-group");
+          const labelsGroup = svg.querySelector(".labels-group");
+          const tl = gsap.timeline({ paused: true });
+
+          fetch(US_TOPO_URL)
+            .then((r) => r.json())
+            .then((us) => {
+              const states = topojson.feature(us, us.objects.states).features;
+              const projection = d3
+                .geoAlbersUsa()
+                .fitSize([1380, 800], { type: "FeatureCollection", features: states });
+              const path = d3.geoPath().projection(projection);
+
+              const sortedStates = states
+                .filter((f) => stateData[String(f.id).padStart(2, "0")])
+                .sort((a, b) => {
+                  const aData = stateData[String(a.id).padStart(2, "0")];
+                  const bData = stateData[String(b.id).padStart(2, "0")];
+                  return aData.density - bData.density;
+                });
+
+              sortedStates.forEach((feature) => {
+                const fips = String(feature.id).padStart(2, "0");
+                const info = stateData[fips];
+                if (!info) return;
+
+                const d = path(feature);
+                if (!d) return;
+
+                const el = document.createElementNS("http://www.w3.org/2000/svg", "path");
+                el.setAttribute("d", d);
+                el.setAttribute("class", "state-path");
+                el.setAttribute("data-state", info.abbr);
+                el.setAttribute("data-density", info.density);
+                el.style.fill = densityToColor(info.density);
+                statesGroup.appendChild(el);
+
+                const centroid = path.centroid(feature);
+                if (centroid[0] && centroid[1]) {
+                  const label = document.createElementNS("http://www.w3.org/2000/svg", "text");
+                  label.setAttribute("x", centroid[0]);
+                  label.setAttribute("y", centroid[1]);
+                  label.setAttribute("class", "state-label");
+                  label.textContent = info.abbr;
+                  labelsGroup.appendChild(label);
+                }
+              });
+
+              buildTimeline();
+            });
+
+          function buildTimeline() {
+            const statePaths = statesGroup.querySelectorAll(".state-path");
+            const stateLabels = labelsGroup.querySelectorAll(".state-label");
+
+            tl.to(
+              "#us-map .headline",
+              {
+                clipPath: "inset(0 0% 0 0)",
+                duration: 1.0,
+                ease: "power2.inOut",
+              },
+              0,
+            );
+
+            tl.to(
+              "#us-map .subtitle",
+              {
+                opacity: 1,
+                duration: 0.6,
+                ease: "power2.out",
+              },
+              0.4,
+            );
+
+            tl.to(
+              statePaths,
+              {
+                opacity: 1,
+                scale: 1,
+                duration: 0.4,
+                stagger: {
+                  each: 0.06,
+                  from: "center",
+                },
+                ease: "back.out(1.4)",
+              },
+              1.0,
+            );
+
+            tl.to(
+              stateLabels,
+              {
+                opacity: 1,
+                duration: 0.3,
+                stagger: {
+                  each: 0.04,
+                  from: "center",
+                },
+                ease: "power2.out",
+              },
+              3.5,
+            );
+
+            tl.to(
+              "#us-map .legend",
+              {
+                opacity: 1,
+                y: 0,
+                duration: 0.6,
+                ease: "power2.out",
+              },
+              5.0,
+            );
+
+            tl.to(
+              "#us-map .source",
+              {
+                opacity: 1,
+                duration: 0.5,
+                ease: "power2.out",
+              },
+              5.5,
+            );
+
+            const highlightStates = ["CA", "NY", "TX", "FL", "NJ"];
+            highlightStates.forEach((abbr, i) => {
+              const el = statesGroup.querySelector('[data-state="' + abbr + '"]');
+              if (!el) return;
+
+              tl.to(
+                el,
+                {
+                  filter: "brightness(1.6) drop-shadow(0 0 8px rgba(255,255,255,0.4))",
+                  stroke: "#f8fafc",
+                  strokeWidth: 2.5,
+                  duration: 0.5,
+                  ease: "power2.out",
+                },
+                6.5 + i * 0.8,
+              );
+
+              tl.to(
+                el,
+                {
+                  filter: "brightness(1) drop-shadow(0 0 0px rgba(255,255,255,0))",
+                  stroke: "#1e293b",
+                  strokeWidth: 1.2,
+                  duration: 0.5,
+                  ease: "power2.in",
+                },
+                7.0 + i * 0.8,
+              );
+            });
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines["us-map"] = tl;
+          }
+        })();
+      </script>
+    </div>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="us-map" data-composition-src="compositions/us-map.html" data-start="0" data-duration="12" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/vfx-anamorphic-flare.mdx b/docs/catalog/blocks/vfx-anamorphic-flare.mdx
new file mode 100644
index 0000000000..83eb3b0eef
--- /dev/null
+++ b/docs/catalog/blocks/vfx-anamorphic-flare.mdx
@@ -0,0 +1,439 @@
+---
+title: "Anamorphic Streak Flare"
+description: "A drifting field of bright points, each one throwing the long horizontal blue-violet streak a real anamorphic cinema lens produces. Built from the measured filter constants: a 0.3 high-pass, 80 horizontal taps at quarter resolution, a samples/3 gain and a 0x7a8aff tint."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/blocks/vfx-anamorphic-flare.html"
+  compositionId="vfx-anamorphic-flare"
+  compositionSrc="compositions/vfx-anamorphic-flare.html"
+  variables={[{"id":"intensity","type":"number","label":"Streak intensity","default":5,"min":0,"max":20,"step":0.1},{"id":"threshold","type":"number","label":"High-pass threshold","default":0.3,"min":0,"max":1,"step":0.01},{"id":"streakLength","type":"number","label":"Streak length gain","default":1,"min":0.1,"max":6,"step":0.05},{"id":"tint","type":"color","label":"Streak tint","default":"#7a8aff"},{"id":"bloomRadius","type":"number","label":"Bloom radius","default":0,"min":0,"max":80,"step":1,"unit":"px"},{"id":"timeScale","type":"number","label":"Drift rate","default":0.5,"min":0,"max":3,"step":0.05},{"id":"emitters","type":"number","label":"Emitter count","default":140,"min":1,"max":400,"step":1},{"id":"backdrop","type":"color","label":"Backdrop","default":"#04040a"}]}
+>
+
+```html vfx-anamorphic-flare.html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Anamorphic Streak Flare</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #000;
+        overflow: hidden;
+      }
+      #af-root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #af-canvas {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="af-root"
+      data-composition-id="vfx-anamorphic-flare"
+      data-root="true"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="10"
+      data-composition-variables='[
+        {"id":"intensity","type":"number","label":"Streak intensity","default":5,"min":0,"max":20,"step":0.1},
+        {"id":"threshold","type":"number","label":"High-pass threshold","default":0.3,"min":0,"max":1,"step":0.01},
+        {"id":"streakLength","type":"number","label":"Streak length gain","default":1,"min":0.1,"max":6,"step":0.05},
+        {"id":"tint","type":"color","label":"Streak tint","default":"#7a8aff"},
+        {"id":"bloomRadius","type":"number","label":"Bloom radius","default":0,"min":0,"max":80,"step":1,"unit":"px"},
+        {"id":"timeScale","type":"number","label":"Drift rate","default":0.5,"min":0,"max":3,"step":0.05},
+        {"id":"emitters","type":"number","label":"Emitter count","default":140,"min":1,"max":400,"step":1},
+        {"id":"backdrop","type":"color","label":"Backdrop","default":"#04040a"}
+      ]'
+    >
+      <canvas id="af-canvas" width="1920" height="1080"></canvas>
+
+      <!-- Driver clip: gives HyperFrames a timed element to own on track 0. -->
+      <div
+        id="af-drv"
+        class="clip"
+        data-start="0"
+        data-duration="10"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+
+    <script>
+      (function () {
+        var DUR = 10;
+        var W = 1920;
+        var H = 1080;
+
+        var root = document.getElementById("af-root");
+        var V = (window.__hyperframes && window.__hyperframes.getVariables()) || {};
+        var CS = getComputedStyle(root);
+
+        // A declared variable reaches CSS as a custom property on the root.
+        // Read that first so a host stylesheet can retheme the block, then
+        // fall back to the declared value. Both the namespaced and the bare
+        // property name are probed: which one the runtime emits has changed
+        // across versions, and the block should not care.
+        function raw(id) {
+          var slug = id.toLowerCase();
+          var css =
+            CS.getPropertyValue("--hf-var-" + slug).trim() ||
+            CS.getPropertyValue("--" + slug).trim();
+          return css !== "" ? css : V[id];
+        }
+        function num(id, fallback) {
+          var n = parseFloat(raw(id));
+          return isFinite(n) ? n : fallback;
+        }
+        function str(id, fallback) {
+          var s = raw(id);
+          return typeof s === "string" && s !== "" ? s : fallback;
+        }
+
+        // ---------------------------------------------------------------
+        // Measured constants.
+        //
+        // Read from the three.js anamorphic post-processing example (MIT),
+        // cross-checked against a live capture of that demo's own GUI:
+        //
+        //   tint 0x7a8aff, threshold 0.3, intensity 5, bloom radius 0,
+        //   samples 80, time scale 0.5, resolution scale 0.25.
+        //
+        // The filter walks samples/2 taps in each direction HORIZONTALLY
+        // only, weights each tap by 1 - |i| / halfSamples (a tent), and
+        // normalises the sum by samples / 3.0. Dividing by samples/3 rather
+        // than by the weight sum is deliberate: it is a gain above 1, not
+        // an average, which is why a dim highlight still throws a readable
+        // streak.
+        //
+        // This implementation evaluates that convolution in closed form
+        // instead of running the 80-tap loop. For a small bright source the
+        // tent-weighted horizontal blur has an exact analytic result: the
+        // tent itself, centred on the source. So one horizontal gradient
+        // per highlight is the same arithmetic the loop would perform, at
+        // a fraction of the cost, and with no dependence on WebGL surviving
+        // seek capture.
+        // ---------------------------------------------------------------
+        var SAMPLES = 80;
+        var HALF_SAMPLES = SAMPLES / 2; // 40 taps each side
+        var RES_SCALE = 0.25; // the streak buffer runs at quarter resolution
+        var NORM = SAMPLES / 3; // total / (samples / 3.0)
+        var REF_W = 1280; // width the constants were measured at
+
+        // 40 taps of a 1/(0.25 * 1280) texel step = 12.5% of frame width per
+        // side. Held as a fraction rather than as absolute pixels so the look
+        // matches the reference at any output size.
+        var HALF_FRAC = HALF_SAMPLES / (RES_SCALE * REF_W);
+
+        var INTENSITY = num("intensity", 5);
+        var THRESHOLD = num("threshold", 0.3);
+        var STREAK_LEN = num("streakLength", 1);
+        var BLOOM_R = num("bloomRadius", 0);
+        var TIME_SCALE = num("timeScale", 0.5);
+        var COUNT = Math.max(1, Math.round(num("emitters", 140)));
+        var BACKDROP = str("backdrop", "#04040a");
+        var TINT = hexRgb(str("tint", "#7a8aff"), [0.478, 0.541, 1.0]);
+
+        function hexRgb(hex, fallback) {
+          var m = /^#?([0-9a-f]{6})$/i.exec(String(hex).trim());
+          if (!m) return fallback;
+          var n = parseInt(m[1], 16);
+          return [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255];
+        }
+
+        function mulberry32(seed) {
+          return function () {
+            seed |= 0;
+            seed = (seed + 0x6d2b79f5) | 0;
+            var t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
+            t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+            return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+          };
+        }
+
+        function hsv(h, s, v) {
+          var hh = ((((h % 360) + 360) % 360) / 60) % 6;
+          var c = v * s;
+          var x = c * (1 - Math.abs((hh % 2) - 1));
+          var m = v - c;
+          var r = 0;
+          var g = 0;
+          var b = 0;
+          if (hh < 1) {
+            r = c;
+            g = x;
+          } else if (hh < 2) {
+            r = x;
+            g = c;
+          } else if (hh < 3) {
+            g = c;
+            b = x;
+          } else if (hh < 4) {
+            g = x;
+            b = c;
+          } else if (hh < 5) {
+            r = x;
+            b = c;
+          } else {
+            r = c;
+            b = x;
+          }
+          return [r + m, g + m, b + m];
+        }
+
+        // ---------------------------------------------------------------
+        // The emitter field. Every emitter is a closed-form function of t:
+        // two incommensurate sinusoids for position and one for brightness.
+        // The seeded PRNG runs once, at setup, so the field is identical on
+        // every load and every seek.
+        // ---------------------------------------------------------------
+        var rng = mulberry32(1337);
+        var EM = [];
+        for (var i = 0; i < COUNT; i++) {
+          EM.push({
+            x0: rng() * W,
+            y0: rng() * H,
+            ax: 24 + rng() * 90,
+            ay: 12 + rng() * 48,
+            fx: 0.018 + rng() * 0.05,
+            fy: 0.015 + rng() * 0.045,
+            px: rng(),
+            py: rng(),
+            r: 3 + Math.pow(rng(), 1.6) * 10,
+            h: rng() * 360,
+            s: 0.62 + rng() * 0.38,
+            v: 0.7 + rng() * 0.3,
+            fb: 0.03 + rng() * 0.09,
+            pb: rng(),
+          });
+        }
+
+        var TAU = Math.PI * 2;
+        var canvas = document.getElementById("af-canvas");
+        var ctx = canvas.getContext("2d");
+
+        // Streaks are accumulated in a quarter-resolution buffer, matching
+        // the reference's setResolutionScale(0.25). Upscaling it bilinearly
+        // is what gives the streak its soft vertical falloff, and it is the
+        // reason the streak reads as smooth rather than as a hard bar.
+        var SW = Math.round(W * RES_SCALE);
+        var SH = Math.round(H * RES_SCALE);
+        var sbuf = document.createElement("canvas");
+        sbuf.width = SW;
+        sbuf.height = SH;
+        var sctx = sbuf.getContext("2d");
+
+        function rgba(c, a) {
+          return (
+            "rgba(" +
+            Math.round(Math.min(1, Math.max(0, c[0])) * 255) +
+            "," +
+            Math.round(Math.min(1, Math.max(0, c[1])) * 255) +
+            "," +
+            Math.round(Math.min(1, Math.max(0, c[2])) * 255) +
+            "," +
+            Math.min(1, Math.max(0, a)) +
+            ")"
+          );
+        }
+
+        // A slow swell across the clip so the field reads as a shot rather
+        // than as a loop. Closed form in t, like everything else here.
+        function gainAt(t) {
+          var u = Math.min(1, Math.max(0, t / DUR));
+          return 0.75 + 0.35 * Math.sin(Math.PI * u);
+        }
+
+        function draw(t) {
+          var tau = t * TIME_SCALE;
+          var gain = gainAt(t);
+          var halfLen = HALF_FRAC * W * STREAK_LEN;
+
+          sctx.setTransform(1, 0, 0, 1, 0, 0);
+          sctx.clearRect(0, 0, SW, SH);
+          sctx.globalCompositeOperation = "lighter";
+
+          var e;
+          var k;
+          var col;
+          var bright;
+          var x;
+          var y;
+          for (k = 0; k < EM.length; k++) {
+            e = EM[k];
+            x = e.x0 + e.ax * Math.sin(TAU * (e.fx * tau + e.px));
+            y = e.y0 + e.ay * Math.sin(TAU * (e.fy * tau + e.py));
+            bright = e.v * (0.62 + 0.38 * Math.sin(TAU * (e.fb * tau + e.pb)));
+            col = hsv(e.h, e.s, Math.max(0, bright));
+
+            // High pass, then tint, exactly as the reference filter does:
+            // max(colour - threshold, 0) * tint. Below threshold there is no
+            // streak at all, which is what keeps the field from smearing.
+            var hp = [
+              Math.max(0, col[0] - THRESHOLD) * TINT[0],
+              Math.max(0, col[1] - THRESHOLD) * TINT[1],
+              Math.max(0, col[2] - THRESHOLD) * TINT[2],
+            ];
+            var peak = Math.max(hp[0], Math.max(hp[1], hp[2]));
+            if (peak <= 0.0001) continue;
+
+            // Peak of the tent equals the source value times intensity over
+            // the samples/3 normaliser. Magnitude is carried in alpha so the
+            // hue keeps full 8-bit precision at low brightness.
+            var alpha = (peak * INTENSITY * gain) / NORM;
+            if (alpha < 0.003) continue;
+            var hue = [hp[0] / peak, hp[1] / peak, hp[2] / peak];
+
+            var bx = x * RES_SCALE;
+            var by = y * RES_SCALE;
+            var bh = Math.max(1, e.r * 2 * RES_SCALE);
+            var bl = halfLen * RES_SCALE;
+
+            var g = sctx.createLinearGradient(bx - bl, 0, bx + bl, 0);
+            g.addColorStop(0, rgba(hue, 0));
+            g.addColorStop(0.5, rgba(hue, alpha));
+            g.addColorStop(1, rgba(hue, 0));
+            sctx.fillStyle = g;
+            sctx.fillRect(bx - bl, by - bh / 2, bl * 2, bh);
+          }
+
+          ctx.setTransform(1, 0, 0, 1, 0, 0);
+          ctx.globalCompositeOperation = "source-over";
+          ctx.fillStyle = BACKDROP;
+          ctx.fillRect(0, 0, W, H);
+
+          ctx.globalCompositeOperation = "lighter";
+          ctx.imageSmoothingEnabled = true;
+          ctx.imageSmoothingQuality = "high";
+          ctx.drawImage(sbuf, 0, 0, SW, SH, 0, 0, W, H);
+
+          // The highlights themselves, drawn at full resolution on top.
+          for (k = 0; k < EM.length; k++) {
+            e = EM[k];
+            x = e.x0 + e.ax * Math.sin(TAU * (e.fx * tau + e.px));
+            y = e.y0 + e.ay * Math.sin(TAU * (e.fy * tau + e.py));
+            bright = e.v * (0.62 + 0.38 * Math.sin(TAU * (e.fb * tau + e.pb)));
+            col = hsv(e.h, e.s, Math.max(0, bright));
+
+            if (BLOOM_R > 0) {
+              var br = e.r + BLOOM_R;
+              var gb = ctx.createRadialGradient(x, y, 0, x, y, br);
+              gb.addColorStop(0, rgba(col, 0.5 * gain));
+              gb.addColorStop(0.35, rgba(col, 0.16 * gain));
+              gb.addColorStop(1, rgba(col, 0));
+              ctx.fillStyle = gb;
+              ctx.fillRect(x - br, y - br, br * 2, br * 2);
+            }
+
+            var core = ctx.createRadialGradient(x, y, 0, x, y, e.r);
+            core.addColorStop(
+              0,
+              rgba([col[0] * 0.88 + 0.12, col[1] * 0.88 + 0.12, col[2] * 0.88 + 0.12], 1),
+            );
+            core.addColorStop(0.72, rgba(col, 0.96));
+            core.addColorStop(1, rgba(col, 0));
+            ctx.fillStyle = core;
+            ctx.fillRect(x - e.r, y - e.r, e.r * 2, e.r * 2);
+          }
+        }
+
+        window.__timelines = window.__timelines || {};
+        var tl = gsap.timeline({ paused: true });
+
+        // The canvas is repainted from a property SETTER, not from a
+        // timeline onUpdate callback: gsap suppresses events on seek(), so a
+        // callback-driven canvas silently freezes on frame 0 under any
+        // consumer that scrubs. Tweened values are written on every render,
+        // suppressed or not, so the setter fires on seek and hands us the
+        // frame time directly.
+        var driver = { _t: 0 };
+        Object.defineProperty(driver, "t", {
+          get: function () {
+            return this._t;
+          },
+          set: function (v) {
+            this._t = v;
+            draw(v);
+          },
+        });
+        tl.to(driver, { t: DUR, duration: DUR, ease: "none" }, 0);
+        window.__timelines["vfx-anamorphic-flare"] = tl;
+
+        draw(0);
+      })();
+    </script>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add vfx-anamorphic-flare" />
+
+That writes one file: `compositions/vfx-anamorphic-flare.html`.
+
+## Add it to your video
+
+It runs for 10 seconds at 1920×1080. Paste this into your composition:
+
+```html index.html
+<div
+  data-composition-id="vfx-anamorphic-flare"
+  data-composition-src="compositions/vfx-anamorphic-flare.html"
+  data-start="0"
+  data-duration="10"
+  data-track-index="1"
+  data-width="1920"
+  data-height="1080"
+></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.
+
+## Change how it looks
+
+Set these CSS variables on the block:
+
+- `--intensity` — Streak intensity. Defaults to `5`.
+- `--threshold` — High-pass threshold. Defaults to `0.3`.
+- `--streaklength` — Streak length gain. Defaults to `1`.
+- `--tint` — Streak tint. Defaults to `#7a8aff`.
+- `--bloomradius` — Bloom radius. Defaults to `0`.
+- `--timescale` — Drift rate. Defaults to `0.5`.
+- `--emitters` — Emitter count. Defaults to `140`.
+- `--backdrop` — Backdrop. Defaults to `#04040a`.
+
+{/* hf:generated-footer */}
+
+Tagged `vfx` `background` `showcase` `optical` `canvas`.
+
+## 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/vfx-iphone-device.mdx b/docs/catalog/blocks/vfx-iphone-device.mdx
index 29deacf74c..ff010ae876 100644
--- a/docs/catalog/blocks/vfx-iphone-device.mdx
+++ b/docs/catalog/blocks/vfx-iphone-device.mdx
@@ -3,40 +3,870 @@ title: "iPhone & MacBook 3D Showcase"
 description: "Real GLTF iPhone 15 Pro Max and MacBook Pro models with live HTML-in-Canvas screen content, morphing glass lens, product review camera choreography, and 360° turntable."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-iphone-device.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-iphone-device.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/vfx-iphone-device.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="iPhone & MacBook 3D Showcase preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add vfx-iphone-device
-```
+<InstallCommand command="npx hyperframes add vfx-iphone-device" />
 
 That writes `compositions/vfx-iphone-device.html`, plus 4 supporting files under `models/`.
 
-<Warning>
+<Danger>
   Live preview needs the `chrome://flags/#canvas-draw-element` flag switched on.
-  Rendering from the CLI switches it on for you. [How it
-  works](/guides/html-in-canvas)
-</Warning>
-
-## Add it to your video
-
-It runs for 15 seconds at 1920×1080. Paste this into your composition:
-
-```html index.html
-<div
-  data-composition-id="vfx-iphone-device"
-  data-composition-src="compositions/vfx-iphone-device.html"
-  data-start="0"
-  data-duration="15"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+  Without it this item's screen renders black. Rendering from the CLI switches
+  it on for you. [How it works](/guides/html-in-canvas)
+</Danger>
+
+## Source
+
+<Accordion title={`vfx-iphone-device.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Devices Canvas — HTML-in-Canvas API Showcase</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/loaders/DRACOLoader.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/loaders/GLTFLoader.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #050508;
+        overflow: hidden;
+      }
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #050508;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="devices-canvas"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="15"
+      data-root="true"
+    >
+      <!-- LIVE HTML captured every frame via drawElementImage  -->
+      <canvas
+        id="cap-phone"
+        layoutsubtree
+        width="390"
+        height="844"
+        style="
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 390px;
+          height: 844px;
+          z-index: -1;
+          pointer-events: none;
+        "
+      >
+        <div
+          id="phone-html"
+          style="
+            width: 390px;
+            height: 844px;
+            overflow: hidden;
+            font-family: Inter, system-ui, sans-serif;
+            color: #e2e8f0;
+          "
+        >
+          <div
+            id="phone-scroll"
+            style="background: linear-gradient(180deg, #0a0a12, #0f0f1a); transform: translateY(0)"
+          >
+            <div
+              style="
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                padding: 14px 18px;
+                border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+              "
+            >
+              <span
+                style="
+                  font-weight: 800;
+                  font-size: 14px;
+                  background: linear-gradient(135deg, #34d399, #3b82f6);
+                  -webkit-background-clip: text;
+                  -webkit-text-fill-color: transparent;
+                "
+                >HyperFrames</span
+              ><span
+                style="
+                  font-size: 10px;
+                  font-weight: 600;
+                  padding: 5px 12px;
+                  border-radius: 6px;
+                  background: #10b981;
+                  color: #fff;
+                "
+                >Log in</span
+              >
+            </div>
+            <div
+              id="phone-title"
+              style="
+                font-size: 26px;
+                font-weight: 800;
+                letter-spacing: -0.5px;
+                padding: 18px 18px 6px;
+                line-height: 1.1;
+                opacity: 0;
+              "
+            >
+              Community Playground
+            </div>
+            <div style="font-size: 11px; color: rgba(255, 255, 255, 0.4); padding: 0 18px 14px">
+              Made with HyperFrames
+            </div>
+            <div style="display: flex; gap: 6px; padding: 0 18px 14px">
+              <span
+                style="
+                  font-size: 9px;
+                  font-weight: 600;
+                  padding: 4px 10px;
+                  border-radius: 16px;
+                  background: rgba(16, 185, 129, 0.15);
+                  color: #10b981;
+                  border: 1px solid rgba(16, 185, 129, 0.3);
+                "
+                >Examples</span
+              ><span
+                id="phone-count"
+                style="
+                  font-size: 9px;
+                  font-weight: 600;
+                  padding: 4px 10px;
+                  border-radius: 16px;
+                  border: 1px solid rgba(255, 255, 255, 0.1);
+                  color: rgba(255, 255, 255, 0.5);
+                "
+                >Catalog 0</span
+              >
+            </div>
+            <div id="phone-cards" style="display: grid; gap: 10px; padding: 0 18px 18px"></div>
+          </div>
+        </div>
+      </canvas>
+
+      <canvas
+        id="cap-laptop"
+        layoutsubtree
+        width="1440"
+        height="900"
+        style="
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1440px;
+          height: 900px;
+          z-index: -1;
+          pointer-events: none;
+        "
+      >
+        <div
+          id="laptop-html"
+          style="
+            width: 1440px;
+            height: 900px;
+            overflow: hidden;
+            font-family: Inter, system-ui, sans-serif;
+            color: #e2e8f0;
+          "
+        >
+          <div
+            id="laptop-scroll"
+            style="background: linear-gradient(180deg, #0a0a12, #0f0f1a); transform: translateY(0)"
+          >
+            <div
+              style="
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                padding: 18px 36px;
+                border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+              "
+            >
+              <span
+                style="
+                  font-weight: 800;
+                  font-size: 17px;
+                  background: linear-gradient(135deg, #34d399, #3b82f6);
+                  -webkit-background-clip: text;
+                  -webkit-text-fill-color: transparent;
+                "
+                >HyperFrames</span
+              >
+              <div
+                style="display: flex; gap: 20px; font-size: 12px; color: rgba(255, 255, 255, 0.5)"
+              >
+                <span>Docs</span><span>Playground</span><span>Pricing</span>
+              </div>
+              <span
+                style="
+                  font-size: 11px;
+                  font-weight: 600;
+                  padding: 6px 14px;
+                  border-radius: 6px;
+                  background: #10b981;
+                  color: #fff;
+                "
+                >Log in</span
+              >
+            </div>
+            <div
+              id="laptop-title"
+              style="
+                font-size: 40px;
+                font-weight: 800;
+                letter-spacing: -1px;
+                padding: 28px 36px 10px;
+                opacity: 0;
+              "
+            >
+              Community Playground
+            </div>
+            <div style="font-size: 13px; color: rgba(255, 255, 255, 0.4); padding: 0 36px 18px">
+              Create videos with HTML — powered by HyperFrames
+            </div>
+            <div style="display: flex; gap: 8px; padding: 0 36px 20px">
+              <span
+                style="
+                  font-size: 10px;
+                  font-weight: 600;
+                  padding: 5px 12px;
+                  border-radius: 16px;
+                  background: rgba(16, 185, 129, 0.15);
+                  color: #10b981;
+                  border: 1px solid rgba(16, 185, 129, 0.3);
+                "
+                >Examples</span
+              ><span
+                id="laptop-count"
+                style="
+                  font-size: 10px;
+                  font-weight: 600;
+                  padding: 5px 12px;
+                  border-radius: 16px;
+                  border: 1px solid rgba(255, 255, 255, 0.1);
+                  color: rgba(255, 255, 255, 0.5);
+                "
+                >Catalog 0</span
+              >
+            </div>
+            <div
+              id="laptop-cards"
+              style="
+                display: grid;
+                grid-template-columns: repeat(3, 1fr);
+                gap: 14px;
+                padding: 0 36px 36px;
+              "
+            ></div>
+          </div>
+        </div>
+      </canvas>
+
+      <canvas
+        id="theater"
+        width="1920"
+        height="1080"
+        style="position: absolute; top: 0; left: 0; width: 1920px; height: 1080px"
+      ></canvas>
+      <div
+        id="driver"
+        class="clip"
+        data-start="0"
+        data-duration="15"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      var W = 1920,
+        H = 1080,
+        PI = Math.PI;
+
+      // ── Renderer ───────────────────────────────────────────────────────
+      var renderer = new THREE.WebGLRenderer({
+        canvas: document.getElementById("theater"),
+        antialias: true,
+        preserveDrawingBuffer: true,
+      });
+      renderer.setSize(W, H, false);
+      renderer.setPixelRatio(1);
+      renderer.toneMapping = THREE.ACESFilmicToneMapping;
+      renderer.toneMappingExposure = 1.15;
+      renderer.outputEncoding = THREE.sRGBEncoding;
+      renderer.setClearColor(0x050508, 1);
+
+      var scene = new THREE.Scene();
+      scene.background = new THREE.Color(0x050508);
+      var camera = new THREE.PerspectiveCamera(34, W / H, 0.1, 100);
+
+      // ── Environment Map ────────────────────────────────────────────────
+      var eC = document.createElement("canvas");
+      eC.width = 1024;
+      eC.height = 512;
+      var ec = eC.getContext("2d");
+      var eg = ec.createLinearGradient(0, 0, 1024, 512);
+      eg.addColorStop(0, "#020307");
+      eg.addColorStop(0.15, "#1a1a2e");
+      eg.addColorStop(0.3, "#ffffff");
+      eg.addColorStop(0.45, "#0a0a1e");
+      eg.addColorStop(0.6, "#ffffff");
+      eg.addColorStop(0.75, "#1e1e2e");
+      eg.addColorStop(1, "#020307");
+      ec.fillStyle = eg;
+      ec.fillRect(0, 0, 1024, 512);
+      ec.globalCompositeOperation = "screen";
+      for (var ei = 0; ei < 7; ei++) {
+        ec.fillStyle = "rgba(255,255,255," + (ei % 2 === 0 ? 0.15 : 0.08) + ")";
+        ec.fillRect((ei % 3) * 100, 60 + ei * 56, 700, 3 + (ei % 2) * 2);
+      }
+      var eT = new THREE.CanvasTexture(eC);
+      eT.mapping = THREE.EquirectangularReflectionMapping;
+      var pm = new THREE.PMREMGenerator(renderer);
+      scene.environment = pm.fromEquirectangular(eT).texture;
+      eT.dispose();
+      pm.dispose();
+
+      // ── Background ─────────────────────────────────────────────────────
+      scene.add(
+        new THREE.Mesh(
+          new THREE.PlaneGeometry(22, 14),
+          new THREE.ShaderMaterial({
+            uniforms: {},
+            vertexShader:
+              "varying vec2 v;void main(){v=uv;gl_Position=projectionMatrix*modelViewMatrix*vec4(position,1.0);}",
+            fragmentShader:
+              "varying vec2 v;void main(){vec3 c=vec3(0.02,0.02,0.03);c+=vec3(0.05,0.02,0.1)*exp(-pow(length(v-vec2(0.3,0.55)),2.0)*5.0);c+=vec3(0.02,0.05,0.1)*exp(-pow(length(v-vec2(0.7,0.45)),2.0)*5.0);gl_FragColor=vec4(c,1.0);}",
+            depthWrite: false,
+          }),
+        ),
+      ).position.z = -6;
+
+      var floor = new THREE.Mesh(
+        new THREE.PlaneGeometry(30, 30),
+        new THREE.MeshStandardMaterial({ color: 0x050508, metalness: 0.95, roughness: 0.18 }),
+      );
+      floor.rotation.x = -PI / 2;
+      floor.position.y = -2.5;
+      scene.add(floor);
+
+      scene.add(new THREE.AmbientLight(0x222233, 0.5));
+      var kL = new THREE.DirectionalLight(0xffffff, 2.2);
+      kL.position.set(-3, 4, 5);
+      scene.add(kL);
+      var rL = new THREE.PointLight(0x6366f1, 3, 15);
+      rL.position.set(4, 2, 3);
+      scene.add(rL);
+      var wL = new THREE.PointLight(0xffc8a8, 1.5, 12);
+      wL.position.set(-3, -1, 4);
+      scene.add(wL);
+
+      // ── Live HTML → WebGL Texture  ─
+      var capPhoneCvs = document.getElementById("cap-phone");
+      var capPhoneCtx = capPhoneCvs.getContext("2d");
+      var phoneHtmlEl = document.getElementById("phone-html");
+      var phoneScrollEl = document.getElementById("phone-scroll");
+
+      var capLapCvs = document.getElementById("cap-laptop");
+      var capLapCtx = capLapCvs.getContext("2d");
+      var lapHtmlEl = document.getElementById("laptop-html");
+      var lapScrollEl = document.getElementById("laptop-scroll");
+
+      var apiOk = (function () {
+        var tc = document.createElement("canvas");
+        if (!("layoutSubtree" in tc)) return false;
+        tc.setAttribute("layoutsubtree", "");
+        var ctx = tc.getContext("2d");
+        return ctx && typeof ctx.drawElementImage === "function";
+      })();
+      var paintReady = false;
+
+      // Generate card HTML for both screens
+      var cardData = [
+        {
+          bg: "linear-gradient(135deg,#1e3a5f,#2563eb)",
+          text: "100M+ AI team",
+          title: "Notion Showcase",
+          meta: "15s · 1920×1080",
+        },
+        {
+          bg: "linear-gradient(135deg,#4a1942,#db2777)",
+          text: "Design System v4",
+          title: "Dribbble Showcase",
+          meta: "12s · 1920×1080",
+        },
+        {
+          bg: "linear-gradient(135deg,#451a03,#f59e0b)",
+          text: "$1.9T Market Cap",
+          title: "Stripe Showcase",
+          meta: "10s · 1920×1080",
+        },
+        {
+          bg: "linear-gradient(135deg,#064e3b,#10b981)",
+          text: "Ship faster with AI",
+          title: "Vercel Promo",
+          meta: "20s · 1080×1920",
+        },
+        {
+          bg: "linear-gradient(135deg,#1e3a5f,#3b82f6)",
+          text: "Privacy App",
+          title: "iPhone App Store",
+          meta: "8s · 1080×1920",
+        },
+        {
+          bg: "linear-gradient(135deg,#4a1942,#a855f7)",
+          text: "Audio Visualizer",
+          title: "Spotify Remix",
+          meta: "15s · 1920×1080",
+        },
+        {
+          bg: "linear-gradient(135deg,#064e3b,#059669)",
+          text: "Code Animation",
+          title: "Terminal Demo",
+          meta: "12s · 1920×1080",
+        },
+        {
+          bg: "linear-gradient(135deg,#451a03,#d97706)",
+          text: "Launch Video",
+          title: "Product Hunt",
+          meta: "30s · 1920×1080",
+        },
+        {
+          bg: "linear-gradient(135deg,#1e3a5f,#6366f1)",
+          text: "3D Devices",
+          title: "Device Mockups",
+          meta: "15s · 1920×1080",
+        },
+      ];
+      function makeCardHTML(cd, isMobile) {
+        var fs = isMobile ? 12 : 16;
+        return (
+          '<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:' +
+          (isMobile ? 10 : 12) +
+          'px;overflow:hidden;opacity:0" class="anim-card">' +
+          '<div style="width:100%;aspect-ratio:16/9;background:' +
+          cd.bg +
+          ';display:flex;align-items:center;justify-content:center"><span style="font-size:' +
+          fs +
+          'px;font-weight:700;color:rgba(255,255,255,0.7)">' +
+          cd.text +
+          "</span></div>" +
+          '<div style="padding:' +
+          (isMobile ? "8px 10px" : "10px 14px") +
+          '"><div style="font-size:' +
+          (isMobile ? 11 : 13) +
+          'px;font-weight:600;margin-bottom:2px">' +
+          cd.title +
+          '</div><div style="font-size:' +
+          (isMobile ? 9 : 10) +
+          'px;color:rgba(255,255,255,0.3)">' +
+          cd.meta +
+          "</div></div></div>"
+        );
+      }
+      var phoneCardsEl = document.getElementById("phone-cards");
+      var laptopCardsEl = document.getElementById("laptop-cards");
+      for (var ci = 0; ci < cardData.length; ci++) {
+        if (ci < 6) phoneCardsEl.innerHTML += makeCardHTML(cardData[ci], true);
+        laptopCardsEl.innerHTML += makeCardHTML(cardData[ci], false);
+      }
+
+      var phoneTex = new THREE.CanvasTexture(capPhoneCvs);
+      phoneTex.minFilter = THREE.LinearFilter;
+      phoneTex.magFilter = THREE.LinearFilter;
+      phoneTex.generateMipmaps = false;
+      var lapTex = new THREE.CanvasTexture(capLapCvs);
+      lapTex.minFilter = THREE.LinearFilter;
+      lapTex.magFilter = THREE.LinearFilter;
+      lapTex.generateMipmaps = false;
+
+      function captureScreens() {
+        if (!apiOk || !paintReady) return;
+        try {
+          capPhoneCtx.clearRect(0, 0, 390, 844);
+          capPhoneCtx.drawElementImage(phoneHtmlEl, 0, 0, 390, 844);
+          capLapCtx.clearRect(0, 0, 1440, 900);
+          capLapCtx.drawElementImage(lapHtmlEl, 0, 0, 1440, 900);
+          phoneTex.needsUpdate = true;
+          lapTex.needsUpdate = true;
+        } catch (e) {}
+      }
+
+      // ── Turntable Group (both devices rotate together for 360° orbit) ──
+      var turntable = new THREE.Group();
+      scene.add(turntable);
+
+      // ── Model Groups ───────────────────────────────────────────────────
+      var phoneGrp = new THREE.Group();
+      turntable.add(phoneGrp);
+      var lapGrp = new THREE.Group();
+      turntable.add(lapGrp);
+      var ready = 0;
+
+      var draco = new THREE.DRACOLoader();
+      draco.setDecoderPath("https://www.gstatic.com/draco/versioned/decoders/1.5.6/");
+      var loader = new THREE.GLTFLoader();
+      loader.setDRACOLoader(draco);
+
+      // ── Morphing Glass Lens (single, shared between devices) ───────────
+      var glassMat = new THREE.MeshPhysicalMaterial({
+        color: 0xffffff,
+        metalness: 0,
+        roughness: 0.02,
+        transmission: 1,
+        thickness: 1.8,
+        ior: 1.45,
+        attenuationColor: new THREE.Color(0xe8f4ff),
+        attenuationDistance: 10,
+        clearcoat: 1,
+        clearcoatRoughness: 0.03,
+        specularIntensity: 1,
+        envMapIntensity: 2.5,
+        transparent: true,
+        opacity: 0.85,
+        side: THREE.DoubleSide,
+      });
+
+      var glassGeos = [
+        new THREE.SphereGeometry(0.22, 32, 32),
+        new THREE.IcosahedronGeometry(0.22, 1),
+        new THREE.OctahedronGeometry(0.25, 0),
+        new THREE.DodecahedronGeometry(0.22, 0),
+        new THREE.TetrahedronGeometry(0.28, 0),
+        new THREE.TorusGeometry(0.16, 0.07, 16, 32),
+      ];
+      var glassLens = new THREE.Mesh(glassGeos[0], glassMat);
+      glassLens.renderOrder = 10;
+
+      // iPhone
+      // The replacement device models carry UVs authored for a tiling material
+      // (the laptop panel runs u -6.3..6.3), so mapping one screen image onto
+      // them clamps at the edges and smears the last row of pixels across the
+      // whole panel. Both screens are flat planes, so derive planar UVs from
+      // the mesh's own bounds instead of trusting what shipped.
+      function planarScreenUv(mesh) {
+        var g = mesh.geometry;
+        g.computeBoundingBox();
+        var bb = g.boundingBox;
+        var pos = g.attributes.position;
+        var w = bb.max.x - bb.min.x || 1;
+        var h = bb.max.y - bb.min.y || 1;
+        var uv = new Float32Array(pos.count * 2);
+        for (var i = 0; i < pos.count; i++) {
+          uv[i * 2] = (pos.getX(i) - bb.min.x) / w;
+          uv[i * 2 + 1] = (pos.getY(i) - bb.min.y) / h;
+        }
+        g.setAttribute("uv", new THREE.BufferAttribute(uv, 2));
+      }
+
+      // These compositions were authored around a model whose screen faced -Z
+      // (the old asset's display plane sat at its minimum Z) and every camera
+      // move and spin in the timeline assumes it. The replacement faces +Z, so
+      // align the model rather than re-time the animation. Reads the model's
+      // own parts, so a re-export facing the other way still lands right.
+      function alignScreenToMinusZ(root, frontName, backName) {
+        var front = root.getObjectByName(frontName);
+        var back = root.getObjectByName(backName);
+        if (!front || !back) return;
+        // matrixWorld is only refreshed during a render, and this runs at load,
+        // so without this the two parts both read as the origin and the test
+        // silently never fires.
+        root.updateWorldMatrix(true, true);
+        var fp = new THREE.Vector3();
+        var bp = new THREE.Vector3();
+        front.getWorldPosition(fp);
+        back.getWorldPosition(bp);
+        if (fp.z > bp.z) root.rotation.y += Math.PI;
+      }
+
+      loader.load("models/iphone.glb", function (gltf) {
+        var m = gltf.scene;
+        var box = new THREE.Box3().setFromObject(m);
+        var sz = box.getSize(new THREE.Vector3());
+        var s = 3.2 / sz.y;
+        m.scale.setScalar(s);
+        box.setFromObject(m);
+        m.position.sub(box.getCenter(new THREE.Vector3()));
+        m.traverse(function (child) {
+          if (!child.isMesh) return;
+          // `front-glass` is the display face; Blender's exporter suffixes the
+          // mesh name and leaves the node name bare, so match the prefix.
+          if (child.name.indexOf("front-glass") === 0) {
+            planarScreenUv(child);
+            child.material = new THREE.MeshBasicMaterial({ map: phoneTex });
+          }
+        });
+        scene.add(glassLens);
+
+        alignScreenToMinusZ(m, "front-glass", "rear-window");
+        phoneGrp.add(m);
+        ready++;
+        if (ready === 2) onReady();
+      });
+
+      // MacBook
+      loader.load("models/macbook.glb", function (gltf) {
+        var m = gltf.scene;
+        var box = new THREE.Box3().setFromObject(m);
+        var sz = box.getSize(new THREE.Vector3());
+        var s = 4.5 / Math.max(sz.x, sz.z);
+        m.scale.setScalar(s);
+        box.setFromObject(m);
+        m.position.sub(box.getCenter(new THREE.Vector3()));
+
+        m.traverse(function (child) {
+          // `display` is the panel. `display-notch` is the bezel cut-out beside
+          // it and must keep its own material, so this cannot be a prefix test.
+          if (child.isMesh && child.name.replace(/\.\d+$/, "") === "display") {
+            planarScreenUv(child);
+            child.material = new THREE.MeshBasicMaterial({ map: lapTex });
+          }
+        });
+
+        lapGrp.add(m);
+        ready++;
+        if (ready === 2) onReady();
+      });
+
+      function onReady() {
+        requestAnimationFrame(function () {
+          requestAnimationFrame(function () {
+            paintReady = true;
+            captureScreens();
+            window.__timelines = window.__timelines || {};
+            window.__timelines["devices-canvas"] = tl;
+          });
+        });
+      }
+
+      // ── Cubic Bezier Implementation ────────────────────────────────────
+      function cbz(p1x, p1y, p2x, p2y) {
+        var ax = 3 * p1x - 3 * p2x + 1,
+          bx = 3 * p2x - 6 * p1x,
+          cx = 3 * p1x;
+        var ay = 3 * p1y - 3 * p2y + 1,
+          by = 3 * p2y - 6 * p1y,
+          cy = 3 * p1y;
+        return function (t) {
+          var s = t;
+          for (var i = 0; i < 12; i++) {
+            var x = ((ax * s + bx) * s + cx) * s - t;
+            var dx = (3 * ax * s + 2 * bx) * s + cx;
+            if (Math.abs(dx) < 1e-10) break;
+            s -= x / dx;
+          }
+          s = Math.max(0, Math.min(1, s));
+          return ((ay * s + by) * s + cy) * s;
+        };
+      }
+
+      var enterEase = cbz(0.16, 1.0, 0.3, 1.0);
+      var spinEase = cbz(0.76, 0.0, 0.18, 1.0);
+      var driftEase = cbz(0.45, 0.0, 0.15, 1.0);
+      var snapEase = cbz(0.22, 1.15, 0.36, 1.0);
+      var breatheEase = cbz(0.37, 0.0, 0.63, 1.0);
+
+      // ── Animation State ────────────────────────────────────────────────
+      var S = {
+        phX: 0,
+        phY: 0.1,
+        phZ: 0.5,
+        phRX: 0,
+        phRY: PI,
+        phRZ: 0,
+        lpX: 10,
+        lpY: -0.2,
+        lpZ: -0.6,
+        lpRX: 0,
+        lpRY: 0,
+        lpRZ: 0,
+        cX: 0,
+        cY: 0.15,
+        cZ: 2.8,
+        clX: 0,
+        clY: 0.1,
+        clZ: 0,
+        drift: 0,
+        turn: 0,
+        scroll: 0,
+        cardReveal: 0,
+        titleFade: 0,
+        counter: 0,
+        p: 0,
+      };
+
+      function render() {
+        var d = S.drift;
+
+        // ── Animate live HTML content (captured to texture every frame) ──
+        // Title fade-in
+        document.getElementById("phone-title").style.opacity = S.titleFade;
+        document.getElementById("laptop-title").style.opacity = S.titleFade;
+        // Counter
+        var cnt = Math.round(S.counter);
+        document.getElementById("phone-count").textContent = "Catalog " + cnt;
+        document.getElementById("laptop-count").textContent = "Catalog " + cnt;
+        // Staggered card reveal
+        var allCards = document.querySelectorAll(".anim-card");
+        for (var ci2 = 0; ci2 < allCards.length; ci2++) {
+          var cardProgress = Math.max(0, Math.min(1, (S.cardReveal * allCards.length - ci2) * 1.5));
+          allCards[ci2].style.opacity = cardProgress;
+          allCards[ci2].style.transform = "translateY(" + (1 - cardProgress) * 15 + "px)";
+        }
+        // Scroll
+        phoneScrollEl.style.transform = "translateY(-" + S.scroll * 500 + "px)";
+        lapScrollEl.style.transform = "translateY(-" + S.scroll * 300 + "px)";
+        // Re-capture HTML to texture
+        captureScreens();
+
+        phoneGrp.position.set(
+          S.phX + Math.sin(d * 0.5) * 0.015,
+          S.phY + Math.sin(d * 0.7) * 0.008,
+          S.phZ + Math.cos(d * 0.4) * 0.008,
+        );
+        phoneGrp.rotation.set(S.phRX, S.phRY, S.phRZ);
+        lapGrp.position.set(
+          S.lpX - Math.sin(d * 0.4) * 0.012,
+          S.lpY + Math.sin(d * 0.6) * 0.006,
+          S.lpZ + Math.cos(d * 0.35) * 0.008,
+        );
+        lapGrp.rotation.set(S.lpRX, S.lpRY, S.lpRZ);
+        turntable.rotation.y = S.turn;
+        // Single morphing glass — orbits around device edges, never overlaps screen
+        var t = tl.time();
+        var geoIdx = Math.floor(d * 0.8) % glassGeos.length;
+        if (glassLens.geometry !== glassGeos[geoIdx]) glassLens.geometry = glassGeos[geoIdx];
+        glassLens.rotation.set(d * 0.7, d * 0.9, d * 0.4);
+
+        // Glass glides across screen surface — hide during rotations to avoid clipping
+        glassLens.visible = t < 3.3 || (t >= 9.5 && t < 12.5) || t >= 13.5;
+        var gx, gy, gz;
+        if (t < 7) {
+          // Slide across iPhone screen face
+          var px = phoneGrp.position.x,
+            py = phoneGrp.position.y,
+            pz = phoneGrp.position.z;
+          gx = px + Math.sin(d * 1.4) * 0.35;
+          gy = py + Math.cos(d * 1.1) * 0.6;
+          gz = pz + 0.15;
+        } else if (t < 11) {
+          // Slide across MacBook screen face
+          var lx2 = lapGrp.position.x,
+            ly2 = lapGrp.position.y,
+            lz2 = lapGrp.position.z;
+          gx = lx2 + Math.sin(d * 1.2) * 1.2;
+          gy = ly2 + 0.3 + Math.cos(d * 0.9) * 0.6;
+          gz = lz2 + 0.2;
+        } else {
+          // Glide between both screens
+          var mx = (phoneGrp.position.x + lapGrp.position.x) * 0.5;
+          var my = (phoneGrp.position.y + lapGrp.position.y) * 0.5;
+          gx = mx + Math.sin(d * 1.0) * 1.5;
+          gy = my + 0.2 + Math.cos(d * 0.8) * 0.5;
+          gz = 0.3;
+        }
+        glassLens.position.set(gx, gy, gz);
+        camera.position.set(S.cX, S.cY, S.cZ);
+        camera.lookAt(S.clX, S.clY, S.clZ);
+        renderer.render(scene, camera);
+      }
+
+      // ── GSAP Timeline — Product Review Edit ────────────────────────────
+      // __timelines created in onReady() after GLTF models load
+      var tl = gsap.timeline({ paused: true });
+
+      tl.to(S, { p: 1, drift: 15, duration: 15, ease: "none", onUpdate: render }, 0);
+
+      // ── Act 1 (0–3.5s): iPhone FRONT — hero close-up showing hyperframes.dev
+      tl.to(S, { phRY: PI + 0.06, phRX: 0.015, duration: 1.5, ease: breatheEase }, 0.3);
+      tl.to(S, { phRY: PI - 0.04, phRX: -0.01, duration: 1.5, ease: breatheEase }, 1.8);
+
+      // ── Act 2 (3.5–7s): iPhone spins 180° to show BACK (camera, titanium, Apple logo)
+      tl.to(S, { phRY: PI * 2, duration: 2.2, ease: spinEase }, 3.5);
+      tl.to(S, { cZ: 4.8, cY: 0.25, duration: 2, ease: driftEase }, 3.5);
+      // Hold back view — slight orbit to appreciate hardware
+      tl.to(
+        S,
+        { phRY: PI * 2 + 0.15, phRX: 0.04, cX: 0.15, duration: 1.5, ease: breatheEase },
+        5.5,
+      );
+
+      // ── Act 3 (7–9s): iPhone spins back to front, then exits LEFT off screen
+      tl.to(S, { phRY: PI * 3, duration: 1.8, ease: snapEase }, 7);
+      tl.to(S, { cZ: 3.5, cY: 0.2, duration: 1.5, ease: driftEase }, 7);
+      tl.to(S, { phX: -6, phZ: 0.3, duration: 2, ease: spinEase }, 8);
+
+      // ── Act 4 (9–11s): MacBook enters from right, hero close-up
+      tl.to(S, { lpX: 0, duration: 2, ease: enterEase }, 9);
+      tl.to(S, { cX: 0, clX: 0, cZ: 5, cY: 0.3, clY: -0.1, duration: 2, ease: driftEase }, 9);
+      tl.to(S, { lpRY: 0.06, duration: 1.5, ease: breatheEase }, 10);
+
+      // ── Act 5 (11–12.5s): iPhone returns, both settle for turntable
+      tl.to(S, { phX: -2.0, duration: 1.5, ease: enterEase }, 11);
+      tl.to(S, { lpX: 2.2, duration: 1.5, ease: breatheEase }, 11);
+      tl.to(
+        S,
+        { cX: 0.1, clX: 0.1, cZ: 7.5, cY: 0.5, clY: -0.1, duration: 1.5, ease: driftEase },
+        11,
+      );
+      tl.to(S, { phRY: PI * 3, lpRY: 0, duration: 1, ease: breatheEase }, 11);
+
+      // ── Act 6 (12.5–15s): 360° turntable — both devices rotate together
+      tl.to(S, { turn: PI * 2, duration: 2.5, ease: spinEase }, 12.5);
+
+      // ── Live HTML Animations (captured to 3D textures every frame) ──
+      // Title fade in
+      tl.to(S, { titleFade: 1, duration: 0.8, ease: breatheEase }, 0.3);
+      // Counter animates up
+      tl.to(S, { counter: 43, duration: 2, ease: driftEase }, 0.5);
+      // Cards stagger in (0→1 reveals all cards sequentially)
+      tl.to(S, { cardReveal: 1, duration: 3, ease: breatheEase }, 0.8);
+      // Scroll during hero shots
+      tl.to(S, { scroll: 0.6, duration: 3, ease: breatheEase }, 1.5);
+      tl.to(S, { scroll: 0, duration: 1.5, ease: driftEase }, 7);
+      // Scroll on MacBook reveal
+      tl.to(S, { scroll: 0.8, duration: 3, ease: breatheEase }, 9.5);
+      tl.to(S, { scroll: 0.3, duration: 2, ease: driftEase }, 13);
+
+      // __timelines registered in onReady() after GLTF models load
+    </script>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="vfx-iphone-device" data-composition-src="compositions/vfx-iphone-device.html" data-start="0" data-duration="15" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/vfx-liquid-background.mdx b/docs/catalog/blocks/vfx-liquid-background.mdx
index e878a50ed5..4116d5dbb7 100644
--- a/docs/catalog/blocks/vfx-liquid-background.mdx
+++ b/docs/catalog/blocks/vfx-liquid-background.mdx
@@ -3,40 +3,21 @@ title: "Liquid Background"
 description: "Organic liquid simulation with vertex displacement on a subdivided plane. HTML content floats above rippling fluid surface with real-time wave dynamics."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-liquid-background.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-liquid-background.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/vfx-liquid-background.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Liquid Background preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add vfx-liquid-background
-```
+<InstallCommand command="npx hyperframes add vfx-liquid-background" />
 
 That writes one file: `compositions/vfx-liquid-background.html`.
 
-<Warning>
+<Danger>
   Live preview needs the `chrome://flags/#canvas-draw-element` flag switched on.
-  Rendering from the CLI switches it on for you. [How it
-  works](/guides/html-in-canvas)
-</Warning>
-
-## Add it to your video
-
-It runs for 12 seconds at 1920×1080. Paste this into your composition:
-
-```html index.html
-<div
-  data-composition-id="vfx-liquid-background"
-  data-composition-src="compositions/vfx-liquid-background.html"
-  data-start="0"
-  data-duration="12"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></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.
+  Without it this item's screen renders black. Rendering from the CLI switches
+  it on for you. [How it works](/guides/html-in-canvas)
+</Danger>
 
 ## Change the colors
 
@@ -45,6 +26,1267 @@ Set these CSS variables on the block:
 - `--bg-color` — Background. Defaults to `#0a0e17`.
 - `--text-color` — Text color. Defaults to `#e2e8f0`.
 
+## Source
+
+<Accordion title={`vfx-liquid-background.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+  </head>
+  <body style="margin: 0; overflow: hidden">
+    <div
+      id="root"
+      data-composition-id="vfx-liquid-background"
+      data-root="true"
+      data-start="0"
+      data-duration="12"
+      data-width="1920"
+      data-height="1080"
+    >
+      <!-- ═══════════════ PANEL A: Fintech Dashboard ═══════════════ -->
+      <div
+        id="panel-a"
+        data-panel-a
+        style="
+          position: absolute;
+          left: 0;
+          top: 0;
+          width: 1920px;
+          height: 1080px;
+          opacity: 0;
+          pointer-events: none;
+        "
+      >
+        <div
+          style="
+            width: 100%;
+            height: 100%;
+            background: #0a0e17;
+            color: #e2e8f0;
+            font-family:
+              &quot;Inter&quot;,
+              -apple-system,
+              BlinkMacSystemFont,
+              sans-serif;
+            padding: 60px 80px;
+            display: flex;
+            flex-direction: column;
+          "
+        >
+          <!-- Top bar -->
+          <div
+            style="
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+              margin-bottom: 48px;
+            "
+          >
+            <div style="display: flex; align-items: center; gap: 12px">
+              <div
+                style="
+                  width: 36px;
+                  height: 36px;
+                  border-radius: 10px;
+                  background: linear-gradient(135deg, #6366f1, #8b5cf6);
+                "
+              ></div>
+              <span style="font-size: 22px; font-weight: 700; letter-spacing: -0.02em">Vault</span>
+            </div>
+            <div style="display: flex; gap: 32px; font-size: 15px; color: #64748b">
+              <span style="color: #e2e8f0">Portfolio</span>
+              <span>Markets</span>
+              <span>Activity</span>
+              <span>Settings</span>
+            </div>
+            <div
+              style="
+                width: 40px;
+                height: 40px;
+                border-radius: 50%;
+                background: #1e293b;
+                border: 2px solid #334155;
+              "
+            ></div>
+          </div>
+
+          <!-- Balance section -->
+          <div style="margin-bottom: 40px">
+            <div
+              style="
+                font-size: 14px;
+                color: #64748b;
+                letter-spacing: 0.08em;
+                text-transform: uppercase;
+                margin-bottom: 8px;
+              "
+            >
+              Total Balance
+            </div>
+            <div style="display: flex; align-items: baseline; gap: 16px">
+              <span
+                style="font-size: 72px; font-weight: 800; letter-spacing: -0.03em; color: #f8fafc"
+                >$2,847,391.24</span
+              >
+              <span
+                style="
+                  padding: 6px 14px;
+                  border-radius: 20px;
+                  background: rgba(34, 197, 94, 0.15);
+                  color: #4ade80;
+                  font-size: 16px;
+                  font-weight: 600;
+                "
+                >+12.4%</span
+              >
+            </div>
+          </div>
+
+          <!-- Chart area -->
+          <div style="flex: 1; min-height: 0; margin-bottom: 40px; position: relative">
+            <svg
+              viewBox="0 0 1760 360"
+              style="width: 100%; height: 100%"
+              preserveAspectRatio="none"
+            >
+              <defs>
+                <linearGradient id="chart-grad" x1="0" y1="0" x2="0" y2="1">
+                  <stop offset="0%" stop-color="#6366f1" stop-opacity="0.4" />
+                  <stop offset="100%" stop-color="#6366f1" stop-opacity="0" />
+                </linearGradient>
+              </defs>
+              <path
+                d="M0,280 C150,260 300,180 450,200 C600,220 700,120 880,140 C1060,160 1150,60 1320,80 C1490,100 1600,40 1760,30 L1760,360 L0,360 Z"
+                fill="url(#chart-grad)"
+              />
+              <path
+                d="M0,280 C150,260 300,180 450,200 C600,220 700,120 880,140 C1060,160 1150,60 1320,80 C1490,100 1600,40 1760,30"
+                fill="none"
+                stroke="#6366f1"
+                stroke-width="3"
+              />
+            </svg>
+          </div>
+
+          <!-- Holdings row -->
+          <div style="display: flex; gap: 24px">
+            <div style="flex: 1; background: #111827; border-radius: 16px; padding: 24px">
+              <div
+                style="
+                  display: flex;
+                  justify-content: space-between;
+                  align-items: center;
+                  margin-bottom: 12px;
+                "
+              >
+                <div style="display: flex; align-items: center; gap: 10px">
+                  <div
+                    style="
+                      width: 32px;
+                      height: 32px;
+                      border-radius: 8px;
+                      background: #1e293b;
+                      display: flex;
+                      align-items: center;
+                      justify-content: center;
+                      font-size: 12px;
+                      font-weight: 700;
+                      color: #94a3b8;
+                    "
+                  >
+                    AA
+                  </div>
+                  <div>
+                    <div style="font-weight: 600; font-size: 16px">AAPL</div>
+                    <div style="font-size: 13px; color: #64748b">Apple Inc.</div>
+                  </div>
+                </div>
+                <span style="color: #4ade80; font-size: 14px; font-weight: 600">+2.31%</span>
+              </div>
+              <div style="font-size: 28px; font-weight: 700">$189.84</div>
+            </div>
+            <div style="flex: 1; background: #111827; border-radius: 16px; padding: 24px">
+              <div
+                style="
+                  display: flex;
+                  justify-content: space-between;
+                  align-items: center;
+                  margin-bottom: 12px;
+                "
+              >
+                <div style="display: flex; align-items: center; gap: 10px">
+                  <div
+                    style="
+                      width: 32px;
+                      height: 32px;
+                      border-radius: 8px;
+                      background: #1e293b;
+                      display: flex;
+                      align-items: center;
+                      justify-content: center;
+                      font-size: 12px;
+                      font-weight: 700;
+                      color: #94a3b8;
+                    "
+                  >
+                    NV
+                  </div>
+                  <div>
+                    <div style="font-weight: 600; font-size: 16px">NVDA</div>
+                    <div style="font-size: 13px; color: #64748b">NVIDIA Corp.</div>
+                  </div>
+                </div>
+                <span style="color: #4ade80; font-size: 14px; font-weight: 600">+5.67%</span>
+              </div>
+              <div style="font-size: 28px; font-weight: 700">$721.33</div>
+            </div>
+            <div style="flex: 1; background: #111827; border-radius: 16px; padding: 24px">
+              <div
+                style="
+                  display: flex;
+                  justify-content: space-between;
+                  align-items: center;
+                  margin-bottom: 12px;
+                "
+              >
+                <div style="display: flex; align-items: center; gap: 10px">
+                  <div
+                    style="
+                      width: 32px;
+                      height: 32px;
+                      border-radius: 8px;
+                      background: #1e293b;
+                      display: flex;
+                      align-items: center;
+                      justify-content: center;
+                      font-size: 12px;
+                      font-weight: 700;
+                      color: #94a3b8;
+                    "
+                  >
+                    TS
+                  </div>
+                  <div>
+                    <div style="font-weight: 600; font-size: 16px">TSLA</div>
+                    <div style="font-size: 13px; color: #64748b">Tesla Inc.</div>
+                  </div>
+                </div>
+                <span style="color: #f87171; font-size: 14px; font-weight: 600">-1.42%</span>
+              </div>
+              <div style="font-size: 28px; font-weight: 700">$248.50</div>
+            </div>
+          </div>
+
+          <!-- Bottom nav -->
+          <div
+            style="
+              display: flex;
+              justify-content: center;
+              gap: 48px;
+              margin-top: 32px;
+              padding-top: 24px;
+              border-top: 1px solid #1e293b;
+            "
+          >
+            <div
+              style="
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                gap: 4px;
+                color: #6366f1;
+              "
+            >
+              <div
+                style="
+                  width: 24px;
+                  height: 24px;
+                  border-radius: 6px;
+                  background: #6366f1;
+                  opacity: 0.2;
+                "
+              ></div>
+              <span style="font-size: 12px; font-weight: 500">Home</span>
+            </div>
+            <div
+              style="
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                gap: 4px;
+                color: #64748b;
+              "
+            >
+              <div style="width: 24px; height: 24px; border-radius: 6px; background: #334155"></div>
+              <span style="font-size: 12px">Trade</span>
+            </div>
+            <div
+              style="
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                gap: 4px;
+                color: #64748b;
+              "
+            >
+              <div style="width: 24px; height: 24px; border-radius: 6px; background: #334155"></div>
+              <span style="font-size: 12px">Wallet</span>
+            </div>
+            <div
+              style="
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                gap: 4px;
+                color: #64748b;
+              "
+            >
+              <div style="width: 24px; height: 24px; border-radius: 6px; background: #334155"></div>
+              <span style="font-size: 12px">Profile</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- ═══════════════ PANEL B: Social Feed ═══════════════ -->
+      <div
+        id="panel-b"
+        data-panel-b
+        style="
+          position: absolute;
+          left: 0;
+          top: 0;
+          width: 1920px;
+          height: 1080px;
+          opacity: 0;
+          pointer-events: none;
+        "
+      >
+        <div
+          style="
+            width: 100%;
+            height: 100%;
+            background: #0f1419;
+            color: #e7e9ea;
+            font-family:
+              &quot;Inter&quot;,
+              -apple-system,
+              BlinkMacSystemFont,
+              sans-serif;
+            padding: 60px 80px;
+            display: flex;
+            flex-direction: column;
+          "
+        >
+          <!-- Profile header -->
+          <div
+            style="
+              display: flex;
+              align-items: center;
+              gap: 16px;
+              margin-bottom: 32px;
+              padding-bottom: 28px;
+              border-bottom: 1px solid #2f3336;
+            "
+          >
+            <div
+              style="
+                width: 56px;
+                height: 56px;
+                border-radius: 50%;
+                background: linear-gradient(135deg, #1d9bf0, #7856ff);
+              "
+            ></div>
+            <div>
+              <div style="font-size: 22px; font-weight: 700">Sarah Chen</div>
+              <div style="font-size: 16px; color: #71767b">@sarahchen</div>
+            </div>
+            <div
+              style="
+                margin-left: auto;
+                padding: 8px 20px;
+                border-radius: 20px;
+                background: #1d9bf0;
+                color: #fff;
+                font-size: 15px;
+                font-weight: 600;
+              "
+            >
+              Follow
+            </div>
+          </div>
+
+          <!-- Compose -->
+          <div
+            style="
+              display: flex;
+              align-items: center;
+              gap: 16px;
+              padding: 20px 0;
+              margin-bottom: 24px;
+              border-bottom: 1px solid #2f3336;
+            "
+          >
+            <div style="width: 44px; height: 44px; border-radius: 50%; background: #1e293b"></div>
+            <span style="font-size: 20px; color: #71767b">What's happening?</span>
+          </div>
+
+          <!-- Post 1 -->
+          <div style="padding: 24px 0; border-bottom: 1px solid #2f3336">
+            <div style="display: flex; gap: 14px">
+              <div
+                style="
+                  width: 44px;
+                  height: 44px;
+                  border-radius: 50%;
+                  background: linear-gradient(135deg, #1d9bf0, #7856ff);
+                  flex-shrink: 0;
+                "
+              ></div>
+              <div style="flex: 1">
+                <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 6px">
+                  <span style="font-weight: 700; font-size: 16px">Sarah Chen</span>
+                  <span style="color: #71767b; font-size: 15px">@sarahchen · 2h</span>
+                </div>
+                <div style="font-size: 17px; line-height: 1.5; margin-bottom: 14px">
+                  Just shipped the new real-time collaboration feature. The CRDT sync engine handles
+                  50k concurrent edits without breaking a sweat. This is what engineering craft
+                  looks like.
+                </div>
+                <div style="display: flex; gap: 48px; color: #71767b; font-size: 14px">
+                  <span>42 replies</span>
+                  <span style="color: #00ba7c">1.2K retweets</span>
+                  <span style="color: #f91880">8.4K likes</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Post 2 -->
+          <div style="padding: 24px 0; border-bottom: 1px solid #2f3336">
+            <div style="display: flex; gap: 14px">
+              <div
+                style="
+                  width: 44px;
+                  height: 44px;
+                  border-radius: 50%;
+                  background: linear-gradient(135deg, #ff6b35, #ffc107);
+                  flex-shrink: 0;
+                "
+              ></div>
+              <div style="flex: 1">
+                <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 6px">
+                  <span style="font-weight: 700; font-size: 16px">Alex Rivera</span>
+                  <span style="color: #71767b; font-size: 15px">@alexrivera · 4h</span>
+                </div>
+                <div style="font-size: 17px; line-height: 1.5; margin-bottom: 14px">
+                  The secret to great developer tools: make the easy things instant and the hard
+                  things possible. Stop adding config options and start removing them.
+                </div>
+                <div style="display: flex; gap: 48px; color: #71767b; font-size: 14px">
+                  <span>18 replies</span>
+                  <span style="color: #00ba7c">847 retweets</span>
+                  <span style="color: #f91880">3.1K likes</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Post 3 -->
+          <div style="padding: 24px 0">
+            <div style="display: flex; gap: 14px">
+              <div
+                style="
+                  width: 44px;
+                  height: 44px;
+                  border-radius: 50%;
+                  background: linear-gradient(135deg, #10b981, #06b6d4);
+                  flex-shrink: 0;
+                "
+              ></div>
+              <div style="flex: 1">
+                <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 6px">
+                  <span style="font-weight: 700; font-size: 16px">Maya Patel</span>
+                  <span style="color: #71767b; font-size: 15px">@mayapatel · 6h</span>
+                </div>
+                <div style="font-size: 17px; line-height: 1.5; margin-bottom: 14px">
+                  Benchmarked our new rendering pipeline against the previous version. 4.7x faster
+                  on large scenes. Sometimes the best optimization is rewriting the architecture
+                  from scratch.
+                </div>
+                <div style="display: flex; gap: 48px; color: #71767b; font-size: 14px">
+                  <span>31 replies</span>
+                  <span style="color: #00ba7c">2.3K retweets</span>
+                  <span style="color: #f91880">11K likes</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- ═══════════════ THREE.JS CANVAS ═══════════════ -->
+      <canvas
+        id="liquid-canvas"
+        class="clip"
+        data-start="0"
+        data-duration="12"
+        data-track-index="0"
+        style="position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; z-index: 10"
+      ></canvas>
+
+      <!-- ═══════════════ STYLES ═══════════════ -->
+      <style>
+        @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=block");
+
+        [data-composition-id="vfx-liquid-background"] {
+          background: #000;
+          position: relative;
+          overflow: hidden;
+        }
+      </style>
+
+      <!-- ═══════════════ SCRIPTS ═══════════════ -->
+      <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+      <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js"></script>
+
+      <script>
+        window.__timelines = window.__timelines || {};
+
+        setTimeout(function () {
+          // ── Capture panel textures via html2canvas-like rasterization ──
+          // We use hidden canvases + drawImage of the panels for texture source.
+          // Since drawElementImage requires chrome flags, we rasterize the panels
+          // into canvas textures using SVG foreignObject serialization.
+
+          var W = 1920;
+          var H = 1080;
+          var canvas = document.getElementById("liquid-canvas");
+
+          // ── Rasterize an HTML panel into a canvas texture ──
+          function rasterizePanel(panelEl) {
+            return new Promise(function (resolve) {
+              // Clone the panel, make it visible for serialization
+              var clone = panelEl.cloneNode(true);
+              clone.style.opacity = "1";
+              clone.style.position = "relative";
+              clone.style.left = "0";
+              clone.style.top = "0";
+
+              var svgNS = "http://www.w3.org/2000/svg";
+              var xhtmlNS = "http://www.w3.org/1999/xhtml";
+
+              var svg = document.createElementNS(svgNS, "svg");
+              svg.setAttribute("width", W);
+              svg.setAttribute("height", H);
+              svg.setAttribute("xmlns", svgNS);
+
+              var fo = document.createElementNS(svgNS, "foreignObject");
+              fo.setAttribute("width", "100%");
+              fo.setAttribute("height", "100%");
+
+              // Wrap in a body-like container with the font
+              var wrapper = document.createElementNS(xhtmlNS, "div");
+              wrapper.setAttribute("xmlns", xhtmlNS);
+              wrapper.style.cssText =
+                "width:" + W + "px;height:" + H + "px;margin:0;padding:0;overflow:hidden;";
+              wrapper.innerHTML = clone.innerHTML;
+              fo.appendChild(wrapper);
+              svg.appendChild(fo);
+
+              var svgData = new XMLSerializer().serializeToString(svg);
+              var img = new Image();
+              var blob = new Blob([svgData], { type: "image/svg+xml;charset=utf-8" });
+              var url = URL.createObjectURL(blob);
+
+              img.onload = function () {
+                var c = document.createElement("canvas");
+                c.width = W;
+                c.height = H;
+                var ctx = c.getContext("2d");
+                ctx.drawImage(img, 0, 0, W, H);
+                URL.revokeObjectURL(url);
+                resolve(c);
+              };
+              img.onerror = function () {
+                // Fallback: solid color canvas
+                var c = document.createElement("canvas");
+                c.width = W;
+                c.height = H;
+                var ctx = c.getContext("2d");
+                ctx.fillStyle = panelEl.id === "panel-a" ? "#0a0e17" : "#0f1419";
+                ctx.fillRect(0, 0, W, H);
+                URL.revokeObjectURL(url);
+                resolve(c);
+              };
+              img.src = url;
+            });
+          }
+
+          // ── Fallback: create panel textures from direct canvas drawing ──
+          function drawPanelATexture() {
+            var c = document.createElement("canvas");
+            c.width = W;
+            c.height = H;
+            var ctx = c.getContext("2d");
+
+            // Background
+            ctx.fillStyle = "#0a0e17";
+            ctx.fillRect(0, 0, W, H);
+
+            // Logo
+            var grad = ctx.createLinearGradient(80, 60, 116, 96);
+            grad.addColorStop(0, "#6366f1");
+            grad.addColorStop(1, "#8b5cf6");
+            roundRect(ctx, 80, 60, 36, 36, 10, grad);
+
+            ctx.fillStyle = "#e2e8f0";
+            ctx.font = "700 22px Inter, sans-serif";
+            ctx.fillText("Vault", 126, 86);
+
+            // Nav
+            ctx.font = "400 15px Inter, sans-serif";
+            ctx.fillStyle = "#e2e8f0";
+            ctx.fillText("Portfolio", 600, 82);
+            ctx.fillStyle = "#64748b";
+            ctx.fillText("Markets", 700, 82);
+            ctx.fillText("Activity", 800, 82);
+            ctx.fillText("Settings", 900, 82);
+
+            // Balance label
+            ctx.fillStyle = "#64748b";
+            ctx.font = "400 14px Inter, sans-serif";
+            ctx.letterSpacing = "0.08em";
+            ctx.fillText("TOTAL BALANCE", 80, 150);
+
+            // Balance amount
+            ctx.fillStyle = "#f8fafc";
+            ctx.font = "800 72px Inter, sans-serif";
+            ctx.fillText("$2,847,391.24", 80, 230);
+
+            // Badge
+            ctx.fillStyle = "rgba(34,197,94,0.15)";
+            roundRect(ctx, 780, 195, 100, 32, 16, "rgba(34,197,94,0.15)");
+            ctx.fillStyle = "#4ade80";
+            ctx.font = "600 16px Inter, sans-serif";
+            ctx.fillText("+12.4%", 793, 217);
+
+            // Chart area - gradient fill
+            ctx.beginPath();
+            ctx.moveTo(80, 500);
+            ctx.bezierCurveTo(280, 480, 460, 400, 640, 420);
+            ctx.bezierCurveTo(820, 440, 920, 340, 1100, 360);
+            ctx.bezierCurveTo(1280, 380, 1370, 280, 1540, 300);
+            ctx.bezierCurveTo(1710, 320, 1780, 260, 1840, 250);
+            ctx.lineTo(1840, 600);
+            ctx.lineTo(80, 600);
+            ctx.closePath();
+            var chartGrad = ctx.createLinearGradient(0, 250, 0, 600);
+            chartGrad.addColorStop(0, "rgba(99,102,241,0.4)");
+            chartGrad.addColorStop(1, "rgba(99,102,241,0)");
+            ctx.fillStyle = chartGrad;
+            ctx.fill();
+
+            // Chart line
+            ctx.beginPath();
+            ctx.moveTo(80, 500);
+            ctx.bezierCurveTo(280, 480, 460, 400, 640, 420);
+            ctx.bezierCurveTo(820, 440, 920, 340, 1100, 360);
+            ctx.bezierCurveTo(1280, 380, 1370, 280, 1540, 300);
+            ctx.bezierCurveTo(1710, 320, 1780, 260, 1840, 250);
+            ctx.strokeStyle = "#6366f1";
+            ctx.lineWidth = 3;
+            ctx.stroke();
+
+            // Holding cards
+            var cardY = 660;
+            var cards = [
+              {
+                sym: "AAPL",
+                name: "Apple Inc.",
+                price: "$189.84",
+                change: "+2.31%",
+                color: "#4ade80",
+              },
+              {
+                sym: "NVDA",
+                name: "NVIDIA Corp.",
+                price: "$721.33",
+                change: "+5.67%",
+                color: "#4ade80",
+              },
+              {
+                sym: "TSLA",
+                name: "Tesla Inc.",
+                price: "$248.50",
+                change: "-1.42%",
+                color: "#f87171",
+              },
+            ];
+            var cardW = 540;
+            for (var i = 0; i < 3; i++) {
+              var cx = 80 + i * (cardW + 24);
+              roundRect(ctx, cx, cardY, cardW, 150, 16, "#111827");
+
+              ctx.fillStyle = "#1e293b";
+              roundRect(ctx, cx + 24, cardY + 24, 32, 32, 8, "#1e293b");
+
+              ctx.fillStyle = "#94a3b8";
+              ctx.font = "700 12px Inter, sans-serif";
+              ctx.fillText(cards[i].sym.substring(0, 2), cx + 32, cardY + 46);
+
+              ctx.fillStyle = "#e2e8f0";
+              ctx.font = "600 16px Inter, sans-serif";
+              ctx.fillText(cards[i].sym, cx + 68, cardY + 40);
+
+              ctx.fillStyle = "#64748b";
+              ctx.font = "400 13px Inter, sans-serif";
+              ctx.fillText(cards[i].name, cx + 68, cardY + 58);
+
+              ctx.fillStyle = cards[i].color;
+              ctx.font = "600 14px Inter, sans-serif";
+              ctx.fillText(cards[i].change, cx + cardW - 80, cardY + 44);
+
+              ctx.fillStyle = "#e2e8f0";
+              ctx.font = "700 28px Inter, sans-serif";
+              ctx.fillText(cards[i].price, cx + 24, cardY + 120);
+            }
+
+            // Bottom nav bar
+            ctx.strokeStyle = "#1e293b";
+            ctx.lineWidth = 1;
+            ctx.beginPath();
+            ctx.moveTo(80, 880);
+            ctx.lineTo(1840, 880);
+            ctx.stroke();
+
+            var navItems = ["Home", "Trade", "Wallet", "Profile"];
+            var navCx = W / 2 - ((navItems.length - 1) * 48) / 2;
+            for (var n = 0; n < navItems.length; n++) {
+              var nx = navCx + (n - 1.5) * 96;
+              ctx.fillStyle = n === 0 ? "rgba(99,102,241,0.2)" : "#334155";
+              roundRect(ctx, nx - 12, 900, 24, 24, 6, ctx.fillStyle);
+              ctx.fillStyle = n === 0 ? "#6366f1" : "#64748b";
+              ctx.font = (n === 0 ? "500" : "400") + " 12px Inter, sans-serif";
+              ctx.fillText(navItems[n], nx - 12, 944);
+            }
+
+            return c;
+          }
+
+          function drawPanelBTexture() {
+            var c = document.createElement("canvas");
+            c.width = W;
+            c.height = H;
+            var ctx = c.getContext("2d");
+
+            // Background
+            ctx.fillStyle = "#0f1419";
+            ctx.fillRect(0, 0, W, H);
+
+            // Profile header
+            var profileGrad = ctx.createLinearGradient(80, 60, 136, 116);
+            profileGrad.addColorStop(0, "#1d9bf0");
+            profileGrad.addColorStop(1, "#7856ff");
+            ctx.beginPath();
+            ctx.arc(108, 88, 28, 0, Math.PI * 2);
+            ctx.fillStyle = profileGrad;
+            ctx.fill();
+
+            ctx.fillStyle = "#e7e9ea";
+            ctx.font = "700 22px Inter, sans-serif";
+            ctx.fillText("Sarah Chen", 150, 82);
+            ctx.fillStyle = "#71767b";
+            ctx.font = "400 16px Inter, sans-serif";
+            ctx.fillText("@sarahchen", 150, 104);
+
+            // Follow button
+            roundRect(ctx, 1720, 68, 100, 40, 20, "#1d9bf0");
+            ctx.fillStyle = "#fff";
+            ctx.font = "600 15px Inter, sans-serif";
+            ctx.fillText("Follow", 1744, 94);
+
+            // Separator
+            ctx.strokeStyle = "#2f3336";
+            ctx.lineWidth = 1;
+            ctx.beginPath();
+            ctx.moveTo(80, 140);
+            ctx.lineTo(1840, 140);
+            ctx.stroke();
+
+            // Compose
+            ctx.beginPath();
+            ctx.arc(102, 178, 22, 0, Math.PI * 2);
+            ctx.fillStyle = "#1e293b";
+            ctx.fill();
+            ctx.fillStyle = "#71767b";
+            ctx.font = "400 20px Inter, sans-serif";
+            ctx.fillText("What's happening?", 140, 184);
+
+            ctx.beginPath();
+            ctx.moveTo(80, 216);
+            ctx.lineTo(1840, 216);
+            ctx.strokeStyle = "#2f3336";
+            ctx.stroke();
+
+            // Posts
+            var posts = [
+              {
+                name: "Sarah Chen",
+                handle: "@sarahchen",
+                time: "2h",
+                grad: ["#1d9bf0", "#7856ff"],
+                text: "Just shipped the new real-time collaboration feature. The CRDT sync engine handles 50k concurrent edits without breaking a sweat.",
+                replies: "42",
+                retweets: "1.2K",
+                likes: "8.4K",
+              },
+              {
+                name: "Alex Rivera",
+                handle: "@alexrivera",
+                time: "4h",
+                grad: ["#ff6b35", "#ffc107"],
+                text: "The secret to great developer tools: make the easy things instant and the hard things possible. Stop adding config options.",
+                replies: "18",
+                retweets: "847",
+                likes: "3.1K",
+              },
+              {
+                name: "Maya Patel",
+                handle: "@mayapatel",
+                time: "6h",
+                grad: ["#10b981", "#06b6d4"],
+                text: "Benchmarked our new rendering pipeline against the previous version. 4.7x faster on large scenes. Architecture rewrite pays off.",
+                replies: "31",
+                retweets: "2.3K",
+                likes: "11K",
+              },
+            ];
+
+            var py = 240;
+            for (var p = 0; p < posts.length; p++) {
+              var post = posts[p];
+              // Avatar
+              var ag = ctx.createLinearGradient(80, py + 4, 124, py + 48);
+              ag.addColorStop(0, post.grad[0]);
+              ag.addColorStop(1, post.grad[1]);
+              ctx.beginPath();
+              ctx.arc(102, py + 26, 22, 0, Math.PI * 2);
+              ctx.fillStyle = ag;
+              ctx.fill();
+
+              // Name and handle
+              ctx.fillStyle = "#e7e9ea";
+              ctx.font = "700 16px Inter, sans-serif";
+              ctx.fillText(post.name, 140, py + 20);
+              ctx.fillStyle = "#71767b";
+              ctx.font = "400 15px Inter, sans-serif";
+              ctx.fillText(
+                post.handle + " · " + post.time,
+                140 + ctx.measureText(post.name).width + 10,
+                py + 20,
+              );
+
+              // Post text
+              ctx.fillStyle = "#e7e9ea";
+              ctx.font = "400 17px Inter, sans-serif";
+              wrapText(ctx, post.text, 140, py + 50, 1680, 26);
+
+              // Engagement
+              var ey = py + 120;
+              ctx.font = "400 14px Inter, sans-serif";
+              ctx.fillStyle = "#71767b";
+              ctx.fillText(post.replies + " replies", 140, ey);
+              ctx.fillStyle = "#00ba7c";
+              ctx.fillText(post.retweets + " retweets", 340, ey);
+              ctx.fillStyle = "#f91880";
+              ctx.fillText(post.likes + " likes", 560, ey);
+
+              // Separator
+              py += 160;
+              if (p < 2) {
+                ctx.beginPath();
+                ctx.moveTo(80, py);
+                ctx.lineTo(1840, py);
+                ctx.strokeStyle = "#2f3336";
+                ctx.stroke();
+              }
+              py += 20;
+            }
+
+            return c;
+          }
+
+          function wrapText(ctx, text, x, y, maxWidth, lineHeight) {
+            var words = text.split(" ");
+            var line = "";
+            for (var n = 0; n < words.length; n++) {
+              var testLine = line + words[n] + " ";
+              if (ctx.measureText(testLine).width > maxWidth && n > 0) {
+                ctx.fillText(line.trim(), x, y);
+                line = words[n] + " ";
+                y += lineHeight;
+              } else {
+                line = testLine;
+              }
+            }
+            ctx.fillText(line.trim(), x, y);
+          }
+
+          function roundRect(ctx, x, y, w, h, r, fill) {
+            ctx.beginPath();
+            ctx.moveTo(x + r, y);
+            ctx.lineTo(x + w - r, y);
+            ctx.quadraticCurveTo(x + w, y, x + w, y + r);
+            ctx.lineTo(x + w, y + h - r);
+            ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
+            ctx.lineTo(x + r, y + h);
+            ctx.quadraticCurveTo(x, y + h, x, y + h - r);
+            ctx.lineTo(x, y + r);
+            ctx.quadraticCurveTo(x, y, x + r, y);
+            ctx.closePath();
+            if (fill) {
+              ctx.fillStyle = fill;
+              ctx.fill();
+            }
+          }
+
+          // ── Build textures (canvas-drawn fallback — works everywhere) ──
+          var canvasA = drawPanelATexture();
+          var canvasB = drawPanelBTexture();
+
+          // ═══════════════════════════════════════════════════════
+          // THREE.JS LIQUID SIMULATION
+          // ═══════════════════════════════════════════════════════
+
+          var renderer = new THREE.WebGLRenderer({
+            canvas: canvas,
+            antialias: true,
+            alpha: false,
+          });
+          renderer.setSize(W, H, false);
+          renderer.setPixelRatio(1);
+          renderer.setClearColor(0x000000, 1);
+
+          var scene = new THREE.Scene();
+
+          // Camera: slight perspective to show surface deformation
+          var camera = new THREE.PerspectiveCamera(45, W / H, 0.1, 100);
+          camera.position.set(0, 0, 2.8);
+          camera.lookAt(0, 0, 0);
+
+          // Create textures from panel canvases
+          var textureA = new THREE.CanvasTexture(canvasA);
+          textureA.minFilter = THREE.LinearFilter;
+          textureA.magFilter = THREE.LinearFilter;
+
+          var textureB = new THREE.CanvasTexture(canvasB);
+          textureB.minFilter = THREE.LinearFilter;
+          textureB.magFilter = THREE.LinearFilter;
+
+          // ── Shader material ──
+          var vertexShader = [
+            "uniform float uTime;",
+            "uniform float uWaveIntensity;",
+            "uniform float uRippleIntensity;",
+            "varying vec2 vUv;",
+            "varying float vDisplacement;",
+            "",
+            "void main() {",
+            "  vUv = uv;",
+            "  vec3 pos = position;",
+            "",
+            "  // Wave 1: large slow horizontal wave",
+            "  float wave1 = sin(pos.x * 3.0 + uTime * 1.2) * 0.04 * uWaveIntensity;",
+            "",
+            "  // Wave 2: medium diagonal wave",
+            "  float wave2 = sin((pos.x + pos.y) * 5.0 + uTime * 1.8) * 0.025 * uWaveIntensity;",
+            "",
+            "  // Wave 3: small fast ripples",
+            "  float wave3 = sin(pos.x * 12.0 - uTime * 3.0) * sin(pos.y * 10.0 + uTime * 2.5) * 0.015 * uRippleIntensity;",
+            "",
+            "  float displacement = wave1 + wave2 + wave3;",
+            "  pos.z += displacement;",
+            "  vDisplacement = displacement;",
+            "",
+            "  gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);",
+            "}",
+          ].join("\n");
+
+          var fragmentShader = [
+            "uniform sampler2D uTextureA;",
+            "uniform sampler2D uTextureB;",
+            "uniform float uTime;",
+            "uniform float uMix;",
+            "uniform float uWaveIntensity;",
+            "uniform float uRippleIntensity;",
+            "varying vec2 vUv;",
+            "varying float vDisplacement;",
+            "",
+            "void main() {",
+            "  // Distort UVs to match vertex displacement for consistency",
+            "  vec2 distortedUv = vUv;",
+            "  distortedUv.x += sin(vUv.y * 10.0 + uTime * 1.8) * 0.008 * uWaveIntensity;",
+            "  distortedUv.y += sin(vUv.x * 8.0 + uTime * 1.2) * 0.006 * uWaveIntensity;",
+            "",
+            "  // Small ripple distortion",
+            "  distortedUv.x += sin(vUv.x * 20.0 - uTime * 3.0) * 0.003 * uRippleIntensity;",
+            "  distortedUv.y += cos(vUv.y * 18.0 + uTime * 2.5) * 0.003 * uRippleIntensity;",
+            "",
+            "  vec4 colorA = texture2D(uTextureA, distortedUv);",
+            "  vec4 colorB = texture2D(uTextureB, distortedUv);",
+            "",
+            "  // Crossfade between panels",
+            "  vec4 color = mix(colorA, colorB, uMix);",
+            "",
+            "  // Subtle specular highlight from displacement",
+            "  float highlight = vDisplacement * 3.0;",
+            "  color.rgb += vec3(highlight * 0.15, highlight * 0.12, highlight * 0.2);",
+            "",
+            "  // Slight vignette",
+            "  float vignette = 1.0 - 0.3 * length((vUv - 0.5) * 1.4);",
+            "  color.rgb *= vignette;",
+            "",
+            "  gl_FragColor = color;",
+            "}",
+          ].join("\n");
+
+          var uniforms = {
+            uTime: { value: 0.0 },
+            uTextureA: { value: textureA },
+            uTextureB: { value: textureB },
+            uMix: { value: 0.0 },
+            uWaveIntensity: { value: 0.0 },
+            uRippleIntensity: { value: 0.0 },
+          };
+
+          var material = new THREE.ShaderMaterial({
+            vertexShader: vertexShader,
+            fragmentShader: fragmentShader,
+            uniforms: uniforms,
+            side: THREE.FrontSide,
+          });
+
+          // Subdivided plane: 100x60 segments for smooth deformation
+          // Size matches camera frustum at z=0 for the perspective camera
+          var planeW = 4.8;
+          var planeH = planeW * (H / W);
+          var geometry = new THREE.PlaneGeometry(planeW, planeH, 100, 60);
+          var mesh = new THREE.Mesh(geometry, material);
+          scene.add(mesh);
+
+          // ── Render function ──
+          function renderAt(t) {
+            uniforms.uTime.value = t;
+            renderer.render(scene, camera);
+          }
+
+          // ═══════════════════════════════════════════════════════
+          // GSAP DRIVER TIMELINE
+          // ═══════════════════════════════════════════════════════
+
+          var tl = gsap.timeline({ paused: true });
+
+          // Phase 1 (0-2s): Panel A appears, gentle waves begin
+          tl.to(
+            uniforms.uWaveIntensity,
+            {
+              value: 1.0,
+              duration: 2,
+              ease: "power2.out",
+            },
+            0,
+          );
+
+          tl.to(
+            uniforms.uRippleIntensity,
+            {
+              value: 0.6,
+              duration: 2.5,
+              ease: "power2.out",
+            },
+            0.5,
+          );
+
+          // Phase 2 (2-4.5s): Waves flowing, camera tilts slightly
+          tl.to(
+            camera.rotation,
+            {
+              x: 0.06,
+              y: -0.04,
+              duration: 2.5,
+              ease: "power1.inOut",
+            },
+            2,
+          );
+
+          // Phase 3 (4.5-5.5s): Waves intensify for transition
+          tl.to(
+            uniforms.uWaveIntensity,
+            {
+              value: 2.5,
+              duration: 1.0,
+              ease: "power2.in",
+            },
+            4.5,
+          );
+
+          tl.to(
+            uniforms.uRippleIntensity,
+            {
+              value: 2.0,
+              duration: 1.0,
+              ease: "power2.in",
+            },
+            4.5,
+          );
+
+          // Phase 4 (5-7s): Crossfade from Panel A to Panel B
+          tl.to(
+            uniforms.uMix,
+            {
+              value: 1.0,
+              duration: 2.0,
+              ease: "power2.inOut",
+            },
+            5,
+          );
+
+          // Phase 5 (6.5-8.5s): Waves settle back down
+          tl.to(
+            uniforms.uWaveIntensity,
+            {
+              value: 1.0,
+              duration: 2.0,
+              ease: "power2.out",
+            },
+            6.5,
+          );
+
+          tl.to(
+            uniforms.uRippleIntensity,
+            {
+              value: 0.5,
+              duration: 2.0,
+              ease: "power2.out",
+            },
+            6.5,
+          );
+
+          // Camera returns to center
+          tl.to(
+            camera.rotation,
+            {
+              x: -0.03,
+              y: 0.03,
+              duration: 2.5,
+              ease: "power1.inOut",
+            },
+            6.5,
+          );
+
+          // Phase 6 (9-11s): Gentle breathing waves on Panel B
+          tl.to(
+            uniforms.uWaveIntensity,
+            {
+              value: 0.7,
+              duration: 2.0,
+              ease: "sine.inOut",
+            },
+            9,
+          );
+
+          tl.to(
+            uniforms.uRippleIntensity,
+            {
+              value: 0.3,
+              duration: 2.0,
+              ease: "sine.inOut",
+            },
+            9,
+          );
+
+          // Phase 7 (10.5-12s): Waves fade to still
+          tl.to(
+            uniforms.uWaveIntensity,
+            {
+              value: 0.0,
+              duration: 1.5,
+              ease: "power2.inOut",
+            },
+            10.5,
+          );
+
+          tl.to(
+            uniforms.uRippleIntensity,
+            {
+              value: 0.0,
+              duration: 1.5,
+              ease: "power2.inOut",
+            },
+            10.5,
+          );
+
+          tl.to(
+            camera.rotation,
+            {
+              x: 0,
+              y: 0,
+              duration: 1.5,
+              ease: "power2.inOut",
+            },
+            10.5,
+          );
+
+          // Driver tween: runs the full 12s, drives uTime and renders each frame
+          tl.to(
+            { frame: 0 },
+            {
+              frame: 1,
+              duration: 12,
+              ease: "none",
+              onUpdate: function () {
+                var time = tl.time();
+                uniforms.uTime.value = time;
+                renderer.render(scene, camera);
+              },
+            },
+            0,
+          );
+
+          window.__timelines["vfx-liquid-background"] = tl;
+
+          // ── hf-seek integration for Three.js adapter ──
+          window.addEventListener("hf-seek", function (e) {
+            var t = e.detail.time;
+            tl.seek(t);
+            uniforms.uTime.value = t;
+            renderer.render(scene, camera);
+          });
+
+          // Initial render
+          renderAt(0);
+        }, 0);
+      </script>
+    </div>
+  </body>
+</html>
+```
+
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="vfx-liquid-background" data-composition-src="compositions/vfx-liquid-background.html" data-start="0" data-duration="12" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
+
 {/* hf:generated-footer */}
 
 Tagged `html-in-canvas` `liquid` `webgl` `displacement` `background`.
diff --git a/docs/catalog/blocks/vfx-liquid-glass.mdx b/docs/catalog/blocks/vfx-liquid-glass.mdx
index c486fdc193..bf30c629f3 100644
--- a/docs/catalog/blocks/vfx-liquid-glass.mdx
+++ b/docs/catalog/blocks/vfx-liquid-glass.mdx
@@ -3,40 +3,21 @@ title: "Liquid Glass"
 description: "VFX composition block"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-liquid-glass.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-liquid-glass.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/vfx-liquid-glass.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Liquid Glass preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add vfx-liquid-glass
-```
+<InstallCommand command="npx hyperframes add vfx-liquid-glass" />
 
 That writes one file: `compositions/vfx-liquid-glass.html`.
 
-<Warning>
+<Danger>
   Live preview needs the `chrome://flags/#canvas-draw-element` flag switched on.
-  Rendering from the CLI switches it on for you. [How it
-  works](/guides/html-in-canvas)
-</Warning>
-
-## Add it to your video
-
-It runs for 20 seconds at 1920×1080. Paste this into your composition:
-
-```html index.html
-<div
-  data-composition-id="vfx-liquid-glass"
-  data-composition-src="compositions/vfx-liquid-glass.html"
-  data-start="0"
-  data-duration="20"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></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.
+  Without it this item's screen renders black. Rendering from the CLI switches
+  it on for you. [How it works](/guides/html-in-canvas)
+</Danger>
 
 ## Change the colors
 
@@ -45,6 +26,775 @@ Set these CSS variables on the block:
 - `--bg-color` — Background. Defaults to `#030407`.
 - `--accent-color` — Accent. Defaults to `#00d4ff`.
 
+## Source
+
+<Accordion title={`vfx-liquid-glass.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Liquid Glass Parallax</title>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/shaders/CopyShader.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/shaders/LuminosityHighPassShader.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/postprocessing/EffectComposer.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/postprocessing/RenderPass.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/postprocessing/ShaderPass.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/postprocessing/UnrealBloomPass.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #030407;
+        overflow: hidden;
+        font-family: "Inter", system-ui, sans-serif;
+      }
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #030407;
+      }
+
+      .text-source {
+        width: 1920px;
+        height: 1080px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        background: linear-gradient(160deg, #030407 0%, #0a1020 40%, #070910 70%, #030407 100%);
+        text-align: center;
+        padding: 0 120px;
+        gap: 32px;
+        position: relative;
+        overflow: hidden;
+      }
+      .text-source::before {
+        content: "";
+        position: absolute;
+        width: 700px;
+        height: 700px;
+        border-radius: 50%;
+        background: radial-gradient(circle, rgba(0, 212, 255, 0.06) 0%, transparent 70%);
+        top: -150px;
+        right: -100px;
+        pointer-events: none;
+      }
+      .text-source::after {
+        content: "";
+        position: absolute;
+        width: 500px;
+        height: 500px;
+        border-radius: 50%;
+        background: radial-gradient(circle, rgba(124, 58, 237, 0.05) 0%, transparent 70%);
+        bottom: -100px;
+        left: -50px;
+        pointer-events: none;
+      }
+      .badge {
+        font-size: 14px;
+        font-weight: 600;
+        letter-spacing: 3px;
+        text-transform: uppercase;
+        color: rgba(0, 212, 255, 0.8);
+      }
+      .text-source h1 {
+        font-size: 148px;
+        font-weight: 900;
+        line-height: 0.9;
+        color: rgba(248, 249, 253, 0.96);
+        text-shadow: 0 0 60px rgba(255, 255, 255, 0.15);
+        letter-spacing: -5px;
+        max-width: 1400px;
+      }
+      .text-source h1 span {
+        background: linear-gradient(135deg, #00d4ff, #a855f7);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+      }
+      .subtitle {
+        font-size: 28px;
+        font-weight: 400;
+        color: rgba(255, 255, 255, 0.35);
+        max-width: 800px;
+        line-height: 1.5;
+      }
+      .stats {
+        display: flex;
+        gap: 48px;
+        margin-top: 16px;
+      }
+      .stat {
+        text-align: center;
+      }
+      .stat-val {
+        font-size: 42px;
+        font-weight: 800;
+        color: #00d4ff;
+        letter-spacing: -1px;
+      }
+      .stat-label {
+        font-size: 12px;
+        font-weight: 600;
+        color: rgba(255, 255, 255, 0.3);
+        text-transform: uppercase;
+        letter-spacing: 2px;
+        margin-top: 4px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="liquid-glass"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="20"
+      data-root="true"
+    >
+      <canvas
+        id="cap-text"
+        layoutsubtree
+        width="1920"
+        height="1080"
+        style="
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1920px;
+          height: 1080px;
+          z-index: -1;
+          pointer-events: none;
+        "
+      >
+        <div class="text-source">
+          <div class="badge">Write HTML → Render Video</div>
+          <h1>Ship videos <span>10x faster</span></h1>
+          <div class="subtitle">
+            HTML is the source of truth for video. No timeline editors, no After Effects — just
+            code.
+          </div>
+          <div class="stats">
+            <div class="stat">
+              <div class="stat-val">47x</div>
+              <div class="stat-label">Faster than AE</div>
+            </div>
+            <div class="stat">
+              <div class="stat-val">12.4K</div>
+              <div class="stat-label">Creators</div>
+            </div>
+            <div class="stat">
+              <div class="stat-val">2.4M</div>
+              <div class="stat-label">Videos Rendered</div>
+            </div>
+          </div>
+        </div>
+      </canvas>
+
+      <canvas
+        id="theater"
+        width="1920"
+        height="1080"
+        style="position: absolute; top: 0; left: 0; width: 1920px; height: 1080px"
+      ></canvas>
+
+      <div
+        id="driver"
+        class="clip"
+        data-start="0"
+        data-duration="20"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+
+    <script>
+      var W = 1920,
+        H = 1080,
+        DURATION = 20,
+        ASPECT = W / H;
+      var TEXT_Z = -3.08;
+
+      // ── Seeded PRNG ────────────────────────────────────────────────────
+      function seededRandom(seed) {
+        var v = seed >>> 0;
+        return function () {
+          v += 0x6d2b79f5;
+          var m = v;
+          m = Math.imul(m ^ (m >>> 15), m | 1);
+          m ^= m + Math.imul(m ^ (m >>> 7), m | 61);
+          return ((m ^ (m >>> 14)) >>> 0) / 4294967296;
+        };
+      }
+
+      // ── Voronoi (self-contained, no d3) ────────────────────────────────
+      function polygonArea(pts) {
+        var a = 0;
+        for (var i = 0; i < pts.length; i++) {
+          var j = (i + 1) % pts.length;
+          a += pts[i][0] * pts[j][1] - pts[j][0] * pts[i][1];
+        }
+        return a * 0.5;
+      }
+
+      function polygonCentroid(pts) {
+        var sa = polygonArea(pts) || 1;
+        var cx = 0,
+          cy = 0;
+        for (var i = 0; i < pts.length; i++) {
+          var j = (i + 1) % pts.length;
+          var f = pts[i][0] * pts[j][1] - pts[j][0] * pts[i][1];
+          cx += (pts[i][0] + pts[j][0]) * f;
+          cy += (pts[i][1] + pts[j][1]) * f;
+        }
+        return { x: cx / (6 * sa), y: cy / (6 * sa) };
+      }
+
+      function clipPoly(poly, px, py, nx, ny) {
+        var out = [];
+        for (var i = 0; i < poly.length; i++) {
+          var c = poly[i],
+            n = poly[(i + 1) % poly.length];
+          var dc = (c[0] - px) * nx + (c[1] - py) * ny;
+          var dn = (n[0] - px) * nx + (n[1] - py) * ny;
+          if (dc <= 0) out.push(c);
+          if (dc <= 0 !== dn <= 0) {
+            var t = dc / (dc - dn);
+            out.push([c[0] + t * (n[0] - c[0]), c[1] + t * (n[1] - c[1])]);
+          }
+        }
+        return out;
+      }
+
+      function computeVoronoi(points, xmin, ymin, xmax, ymax) {
+        var cells = [];
+        for (var i = 0; i < points.length; i++) {
+          var px = points[i][0],
+            py = points[i][1];
+          var poly = [
+            [xmin, ymin],
+            [xmax, ymin],
+            [xmax, ymax],
+            [xmin, ymax],
+          ];
+          for (var j = 0; j < points.length; j++) {
+            if (i === j) continue;
+            var qx = points[j][0],
+              qy = points[j][1];
+            var mx = (px + qx) * 0.5,
+              my = (py + qy) * 0.5;
+            poly = clipPoly(poly, mx, my, qx - px, qy - py);
+            if (poly.length < 3) break;
+          }
+          cells.push(poly.length >= 3 ? poly : null);
+        }
+        return cells;
+      }
+
+      // ── Feature Detection ──────────────────────────────────────────────
+      function canCapture() {
+        var tc = document.createElement("canvas");
+        if (!("layoutSubtree" in tc)) return false;
+        tc.setAttribute("layoutsubtree", "");
+        var ctx = tc.getContext("2d");
+        return ctx && typeof ctx.drawElementImage === "function";
+      }
+      var apiOk = canCapture();
+
+      // ── Capture backdrop ───────────────────────────────────────────────
+      var capCanvas = document.getElementById("cap-text");
+      var capCtx = capCanvas.getContext("2d");
+      var textEl = capCanvas.querySelector(".text-source");
+
+      function captureBackdrop() {
+        capCtx.clearRect(0, 0, W, H);
+        if (apiOk) {
+          capCtx.drawElementImage(textEl, 0, 0, W, H);
+        } else {
+          var g = capCtx.createLinearGradient(0, 0, W, H);
+          g.addColorStop(0, "#030407");
+          g.addColorStop(0.5, "#070910");
+          g.addColorStop(1, "#030407");
+          capCtx.fillStyle = g;
+          capCtx.fillRect(0, 0, W, H);
+          capCtx.textAlign = "center";
+          capCtx.textBaseline = "middle";
+          capCtx.font = "900 172px Inter, system-ui, sans-serif";
+          capCtx.shadowColor = "rgba(255,255,255,0.22)";
+          capCtx.shadowBlur = 20;
+          capCtx.fillStyle = "rgba(248,249,253,0.94)";
+          capCtx.fillText("Liquid Glass", W / 2, H / 2 - 80);
+          capCtx.fillText("Design", W / 2, H / 2 + 90);
+        }
+      }
+
+      // ── Three.js Renderer ──────────────────────────────────────────────
+      var theaterCanvas = document.getElementById("theater");
+      var renderer = new THREE.WebGLRenderer({
+        canvas: theaterCanvas,
+        antialias: true,
+        alpha: false,
+        powerPreference: "high-performance",
+        preserveDrawingBuffer: true,
+      });
+      renderer.setSize(W, H, false);
+      renderer.setPixelRatio(1);
+      renderer.outputEncoding = THREE.sRGBEncoding;
+      renderer.toneMapping = THREE.ACESFilmicToneMapping;
+      renderer.toneMappingExposure = 1.08;
+      renderer.setClearColor(0x030407, 1);
+
+      var scene = new THREE.Scene();
+      scene.background = new THREE.Color(0x030407);
+
+      // ── Environment Map (procedural) ───────────────────────────────────
+      var envCanvas = document.createElement("canvas");
+      envCanvas.width = 1024;
+      envCanvas.height = 512;
+      var ectx = envCanvas.getContext("2d");
+      var eg = ectx.createLinearGradient(0, 0, 1024, 512);
+      eg.addColorStop(0, "#020307");
+      eg.addColorStop(0.18, "#ffffff");
+      eg.addColorStop(0.24, "#7fdcff");
+      eg.addColorStop(0.42, "#07101c");
+      eg.addColorStop(0.58, "#ffffff");
+      eg.addColorStop(0.64, "#ffc4a6");
+      eg.addColorStop(0.82, "#0b0c12");
+      eg.addColorStop(1, "#020307");
+      ectx.fillStyle = eg;
+      ectx.fillRect(0, 0, 1024, 512);
+      ectx.globalCompositeOperation = "screen";
+      var envRng = seededRandom(999);
+      for (var ei = 0; ei < 9; ei++) {
+        var ey = 36 + ei * 52;
+        ectx.fillStyle = "rgba(255,255,255," + (ei % 3 === 0 ? 0.22 : 0.1) + ")";
+        ectx.fillRect((ei % 2) * 120, ey, 1024 * 0.72, 4 + (ei % 3) * 2);
+      }
+      var envTex = new THREE.CanvasTexture(envCanvas);
+      envTex.mapping = THREE.EquirectangularReflectionMapping;
+      var pmrem = new THREE.PMREMGenerator(renderer);
+      var envMap = pmrem.fromEquirectangular(envTex);
+      scene.environment = envMap.texture;
+      envTex.dispose();
+      pmrem.dispose();
+
+      // ── Camera ─────────────────────────────────────────────────────────
+      var CAM_Z = 9.35;
+      var camera = new THREE.PerspectiveCamera(34, ASPECT, 0.1, 80);
+      camera.position.set(0, 0, CAM_Z);
+
+      // ── Scene Groups ───────────────────────────────────────────────────
+      var rig = new THREE.Group();
+      scene.add(rig);
+      var textRig = new THREE.Group();
+      rig.add(textRig);
+
+      // ── Backdrop Plane (text behind glass) ─────────────────────────────
+      var backdropTex = new THREE.CanvasTexture(capCanvas);
+      backdropTex.minFilter = THREE.LinearFilter;
+      backdropTex.magFilter = THREE.LinearFilter;
+      backdropTex.generateMipmaps = false;
+
+      function viewportAtZ(z) {
+        var d = camera.position.z - z;
+        var h = 2 * Math.tan(THREE.MathUtils.degToRad(camera.fov * 0.5)) * d;
+        return { w: h * camera.aspect, h: h };
+      }
+      var vp = viewportAtZ(TEXT_Z);
+      var backdropMesh = new THREE.Mesh(
+        new THREE.PlaneGeometry(vp.w * 1.18, vp.h * 1.18),
+        new THREE.MeshBasicMaterial({ map: backdropTex, depthWrite: true, depthTest: true }),
+      );
+      backdropMesh.position.z = TEXT_Z;
+      backdropMesh.renderOrder = -4;
+      textRig.add(backdropMesh);
+
+      // ── Light Bands ────────────────────────────────────────────────────
+      var bandSpecs = [
+        [-2.8, 1.45, -1.78, 3.2, 0.035, 0.13, 0x9edaff, 0.24],
+        [2.7, -1.24, -1.76, 3.0, 0.032, -0.1, 0xffd1b5, 0.18],
+        [0.0, 2.05, -1.82, 5.2, 0.026, 0.02, 0xffffff, 0.13],
+        [-0.55, -1.92, -1.8, 4.2, 0.024, -0.03, 0xc7f6ff, 0.1],
+      ];
+      bandSpecs.forEach(function (s) {
+        var m = new THREE.Mesh(
+          new THREE.PlaneGeometry(s[3], s[4]),
+          new THREE.MeshBasicMaterial({
+            color: s[6],
+            transparent: true,
+            opacity: s[7],
+            blending: THREE.AdditiveBlending,
+            depthWrite: false,
+          }),
+        );
+        m.position.set(s[0], s[1], s[2]);
+        m.rotation.z = s[5];
+        rig.add(m);
+      });
+
+      // ── Glass Shards (Voronoi fracture) ────────────────────────────────
+      var LAYOUT = { width: 9.7, height: 5.78, cols: 9, rows: 6, seed: 5297 };
+      var rng = seededRandom(LAYOUT.seed);
+      var seedPoints = [];
+      var cw = LAYOUT.width / LAYOUT.cols,
+        ch = LAYOUT.height / LAYOUT.rows;
+
+      for (var row = 0; row < LAYOUT.rows; row++) {
+        for (var col = 0; col < LAYOUT.cols; col++) {
+          var cp =
+            1 -
+            Math.min(
+              0.62,
+              Math.hypot((col + 0.5) / LAYOUT.cols - 0.5, (row + 0.5) / LAYOUT.rows - 0.5),
+            );
+          var jx = (rng() - 0.5) * cw * (0.58 + cp * 0.16);
+          var jy = (rng() - 0.5) * ch * (0.58 + cp * 0.16);
+          seedPoints.push([(col + 0.5) * cw + jx, (row + 0.5) * ch + jy]);
+        }
+      }
+
+      var voronoiCells = computeVoronoi(seedPoints, 0, 0, LAYOUT.width, LAYOUT.height);
+
+      var glassRig = new THREE.Group();
+      glassRig.scale.setScalar(1.025);
+      glassRig.position.set(0, 0, 0.08);
+      rig.add(glassRig);
+
+      var panes = [];
+      var GAP_SCALE = 0.954;
+
+      for (var pi = 0; pi < voronoiCells.length; pi++) {
+        var cell = voronoiCells[pi];
+        if (!cell || cell.length < 3) continue;
+
+        var worldPts = cell.map(function (p) {
+          return [p[0] - LAYOUT.width / 2, LAYOUT.height / 2 - p[1]];
+        });
+        var area = Math.abs(polygonArea(worldPts));
+        if (area < 0.034) continue;
+
+        var cent = polygonCentroid(worldPts);
+        var rad = new THREE.Vector2(cent.x, cent.y);
+        var radLen = Math.max(rad.length(), 0.001);
+        rad.divideScalar(radLen);
+
+        var localPts = worldPts.map(function (p) {
+          return [(p[0] - cent.x) * GAP_SCALE, (p[1] - cent.y) * GAP_SCALE];
+        });
+        var outward = 0.046 + rng() * 0.105;
+        var depthLift = (area / (LAYOUT.width * LAYOUT.height)) * 1.42;
+        var phase = pi * 0.71 + rng() * 4;
+        var depth = 0.18 + rng() * 0.1;
+        var bevel = Math.min(0.108, Math.sqrt(area) * 0.095);
+        var roughness = pi % 7 === 0 ? 0.08 + rng() * 0.035 : 0.012 + rng() * 0.038;
+        var thickness = 1.45 + rng() * 1.25;
+
+        // Geometry
+        var shape = new THREE.Shape();
+        localPts.forEach(function (p, idx) {
+          idx === 0 ? shape.moveTo(p[0], p[1]) : shape.lineTo(p[0], p[1]);
+        });
+        shape.closePath();
+        var geo = new THREE.ExtrudeGeometry(shape, {
+          depth: depth,
+          bevelEnabled: true,
+          bevelThickness: bevel,
+          bevelSize: bevel,
+          bevelSegments: 9,
+          curveSegments: 2,
+          steps: 2,
+        });
+        geo.center();
+        geo.computeVertexNormals();
+
+        // Material
+        var mat = new THREE.MeshPhysicalMaterial({
+          color: 0xf7fbff,
+          metalness: 0,
+          roughness: roughness,
+          transmission: 1,
+          thickness: thickness,
+          ior: 1.55,
+          attenuationColor: new THREE.Color(0xe5f8ff),
+          attenuationDistance: 12,
+          clearcoat: 1,
+          clearcoatRoughness: Math.min(0.12, roughness + 0.035),
+          specularIntensity: 1,
+          envMapIntensity: 2.1,
+          transparent: true,
+          opacity: 0.76,
+          side: THREE.DoubleSide,
+        });
+
+        var pane = new THREE.Group();
+        var mesh = new THREE.Mesh(geo, mat);
+        mesh.renderOrder = 4 + pi;
+        pane.add(mesh);
+
+        // Edge highlights (white + cyan + pink for chromatic aberration look)
+        var edgeGeo = new THREE.EdgesGeometry(geo, 18);
+        var whiteEdge = new THREE.LineSegments(
+          edgeGeo,
+          new THREE.LineBasicMaterial({
+            color: 0xffffff,
+            transparent: true,
+            opacity: roughness > 0.08 ? 0.32 : 0.44,
+            blending: THREE.AdditiveBlending,
+            depthWrite: false,
+          }),
+        );
+        pane.add(whiteEdge);
+        var cyanEdge = new THREE.LineSegments(
+          edgeGeo.clone(),
+          new THREE.LineBasicMaterial({
+            color: 0x72e8ff,
+            transparent: true,
+            opacity: 0.18,
+            blending: THREE.AdditiveBlending,
+            depthWrite: false,
+          }),
+        );
+        cyanEdge.position.set(0.008, -0.002, -0.008);
+        pane.add(cyanEdge);
+        var pinkEdge = new THREE.LineSegments(
+          edgeGeo.clone(),
+          new THREE.LineBasicMaterial({
+            color: 0xff6f8d,
+            transparent: true,
+            opacity: 0.14,
+            blending: THREE.AdditiveBlending,
+            depthWrite: false,
+          }),
+        );
+        pinkEdge.position.set(-0.009, 0.003, 0.006);
+        pane.add(pinkEdge);
+
+        var basePos = new THREE.Vector3(
+          cent.x + rad.x * outward,
+          cent.y + rad.y * outward,
+          0.28 + depthLift + rng() * 0.18,
+        );
+        var baseRot = new THREE.Euler(
+          (rng() - 0.5) * 0.074,
+          (rng() - 0.5) * 0.086,
+          (rng() - 0.5) * 0.052,
+        );
+        pane.position.copy(basePos);
+        pane.rotation.copy(baseRot);
+
+        pane.userData = {
+          basePos: basePos.clone(),
+          baseRot: { x: baseRot.x, y: baseRot.y, z: baseRot.z },
+          phase: phase,
+          speed: 0.28 + rng() * 0.16,
+          drift: new THREE.Vector3(
+            0.02 + rng() * 0.026,
+            0.018 + rng() * 0.024,
+            0.068 + rng() * 0.092,
+          ),
+          rotDrift: new THREE.Vector3(
+            0.016 + rng() * 0.026,
+            0.018 + rng() * 0.03,
+            0.008 + rng() * 0.016,
+          ),
+          ptrWeight: 0.04 + rng() * 0.052,
+          rad: rad.clone(),
+          baseOpacity: 0.76,
+          baseRoughness: roughness,
+          glassMat: mat,
+          edgeW: whiteEdge.material,
+          edgeC: cyanEdge.material,
+          edgeP: pinkEdge.material,
+          edgeWBase: whiteEdge.material.opacity,
+          edgeCBase: cyanEdge.material.opacity,
+          edgePBase: pinkEdge.material.opacity,
+        };
+
+        panes.push(pane);
+        glassRig.add(pane);
+      }
+
+      // ── Lighting ───────────────────────────────────────────────────────
+      scene.add(new THREE.HemisphereLight(0xe8f0ff, 0x07040b, 1.1));
+      var keyLight = new THREE.DirectionalLight(0xffffff, 3.4);
+      keyLight.position.set(-3.8, 4.4, 5.6);
+      scene.add(keyLight);
+      var edgeLight = new THREE.PointLight(0x8bdcff, 14, 12);
+      edgeLight.position.set(3.1, 1.4, 3.4);
+      scene.add(edgeLight);
+      var warmLight = new THREE.PointLight(0xffc8a8, 7, 12);
+      warmLight.position.set(-4.4, -2.2, 3.2);
+      scene.add(warmLight);
+
+      // ── Post-Processing ────────────────────────────────────────────────
+      var GrainShader = {
+        uniforms: { tDiffuse: { value: null }, time: { value: 0 }, strength: { value: 0.024 } },
+        vertexShader:
+          "varying vec2 vUv; void main(){ vUv=uv; gl_Position=projectionMatrix*modelViewMatrix*vec4(position,1.0); }",
+        fragmentShader: [
+          "uniform sampler2D tDiffuse; uniform float time; uniform float strength; varying vec2 vUv;",
+          "float n(vec2 v){ return fract(sin(dot(v+time,vec2(12.9898,78.233)))*43758.5453); }",
+          "void main(){",
+          "  vec4 c=texture2D(tDiffuse,vUv);",
+          "  c.rgb+=(n(vUv*vec2(1520.0,940.0))-0.5)*strength;",
+          "  c.rgb=pow(max(c.rgb,vec3(0.0)),vec3(0.985));",
+          "  gl_FragColor=c;",
+          "}",
+        ].join("\n"),
+      };
+
+      var composer = new THREE.EffectComposer(renderer);
+      composer.addPass(new THREE.RenderPass(scene, camera));
+      var bloomPass = new THREE.UnrealBloomPass(new THREE.Vector2(W, H), 0.32, 0.4, 0.86);
+      composer.addPass(bloomPass);
+      var grainPass = new THREE.ShaderPass(GrainShader);
+      composer.addPass(grainPass);
+
+      // ── Pointer State (GSAP-animated, replaces mouse) ──────────────────
+      var ptr = { x: 0.16, y: 0.04 };
+      var REVEAL_R = 2.18;
+      var PTR_WORLD = new THREE.Vector2();
+
+      function updatePtrWorld() {
+        PTR_WORLD.set(ptr.x * 4.86, ptr.y * 2.84);
+      }
+
+      // ── Render Function (deterministic, seekable) ──────────────────────
+      function renderScene(elapsed) {
+        updatePtrWorld();
+
+        camera.position.x = ptr.x * 0.38;
+        camera.position.y = -ptr.y * 0.27;
+        camera.position.z = CAM_Z;
+        camera.lookAt(0, 0, 0);
+
+        textRig.position.x = -ptr.x * 0.56;
+        textRig.position.y = ptr.y * 0.36;
+        textRig.position.z = Math.sin(elapsed * 0.28) * 0.018;
+        textRig.rotation.x = ptr.y * 0.028;
+        textRig.rotation.y = ptr.x * 0.042;
+
+        glassRig.rotation.x = -ptr.y * 0.064;
+        glassRig.rotation.y = ptr.x * 0.078;
+
+        edgeLight.position.x = 3.1 + ptr.x * 0.9;
+        edgeLight.position.y = 1.4 + ptr.y * 0.55;
+        warmLight.position.x = -4.4 - ptr.x * 0.65;
+
+        for (var i = 0; i < panes.length; i++) {
+          var pane = panes[i];
+          var d = pane.userData;
+          var t = elapsed * d.speed + d.phase;
+          var ptrDist = PTR_WORLD.distanceTo(new THREE.Vector2(d.basePos.x, d.basePos.y));
+          var reveal = Math.pow(Math.max(0, 1 - ptrDist / REVEAL_R), 2);
+          var shatter = reveal * 0.36;
+          var awayX = d.basePos.x - PTR_WORLD.x;
+          var awayY = d.basePos.y - PTR_WORLD.y;
+          var awayLen = Math.max(Math.hypot(awayX, awayY), 0.001);
+          var revealSpread = reveal * 0.24;
+          var shatterSpread = shatter * 0.68;
+          var pSlide = d.ptrWeight * 1.9;
+
+          pane.position.x =
+            d.basePos.x +
+            Math.sin(t * 0.42) * d.drift.x +
+            ptr.x * pSlide +
+            (awayX / awayLen) * (revealSpread + shatterSpread);
+          pane.position.y =
+            d.basePos.y +
+            Math.cos(t * 0.38) * d.drift.y -
+            ptr.y * pSlide * 0.72 +
+            (awayY / awayLen) * (revealSpread + shatterSpread * 0.84);
+          pane.position.z =
+            d.basePos.z + Math.sin(t * 0.52 + i) * d.drift.z + reveal * 0.32 + shatter * 0.74;
+
+          pane.rotation.x =
+            d.baseRot.x +
+            Math.sin(t * 0.46) * d.rotDrift.x -
+            ptr.y * d.ptrWeight * 1.15 +
+            reveal * (awayY / awayLen) * 0.16 +
+            shatter * (awayY / awayLen) * 0.58;
+          pane.rotation.y =
+            d.baseRot.y +
+            Math.cos(t * 0.43) * d.rotDrift.y +
+            ptr.x * d.ptrWeight * 1.38 -
+            reveal * (awayX / awayLen) * 0.2 -
+            shatter * (awayX / awayLen) * 0.66;
+          pane.rotation.z =
+            d.baseRot.z +
+            Math.sin(t * 0.34) * d.rotDrift.z +
+            reveal * Math.sin(t + i) * 0.028 +
+            shatter * (d.rad.x * awayY - d.rad.y * awayX) * 0.18;
+
+          d.glassMat.opacity = d.baseOpacity + shatter * 0.14;
+          d.glassMat.roughness = Math.min(0.14, d.baseRoughness + shatter * 0.048);
+          d.edgeW.opacity = d.edgeWBase + shatter * 0.34;
+          d.edgeC.opacity = d.edgeCBase + shatter * 0.22;
+          d.edgeP.opacity = d.edgePBase + shatter * 0.2;
+        }
+
+        grainPass.uniforms.time.value = elapsed;
+        composer.render();
+      }
+
+      // ── GSAP Timeline ──────────────────────────────────────────────────
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+
+      tl.to({ _: 0 }, { _: 1, duration: DURATION, ease: "none" }, 0);
+
+      // Pointer choreography — smooth wandering reveal
+      tl.set(ptr, { x: 0.16, y: 0.04 }, 0);
+      tl.to(ptr, { x: 0.45, y: -0.15, duration: 3.5, ease: "sine.inOut" }, 0.5);
+      tl.to(ptr, { x: -0.35, y: 0.25, duration: 3.5, ease: "sine.inOut" }, 4);
+      tl.to(ptr, { x: 0.15, y: -0.35, duration: 3, ease: "sine.inOut" }, 7.5);
+      tl.to(ptr, { x: -0.45, y: 0.05, duration: 3, ease: "sine.inOut" }, 10.5);
+      tl.to(ptr, { x: 0.3, y: 0.2, duration: 3, ease: "sine.inOut" }, 13.5);
+      tl.to(ptr, { x: -0.1, y: -0.1, duration: 2.5, ease: "sine.inOut" }, 16.5);
+      tl.to(ptr, { x: 0.16, y: 0.04, duration: 1, ease: "power2.inOut" }, 19);
+
+      tl.eventCallback("onUpdate", function () {
+        renderScene(tl.time());
+      });
+
+      window.__timelines["liquid-glass"] = tl;
+
+      setTimeout(function () {
+        captureBackdrop();
+        backdropTex.needsUpdate = true;
+        tl.seek(0);
+      }, 0);
+    </script>
+  </body>
+</html>
+```
+
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="vfx-liquid-glass" data-composition-src="compositions/vfx-liquid-glass.html" data-start="0" data-duration="20" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
+
 {/* hf:generated-footer */}
 
 Tagged `html-in-canvas` `webgl`.
diff --git a/docs/catalog/blocks/vfx-magnetic.mdx b/docs/catalog/blocks/vfx-magnetic.mdx
index a174e16ad5..2a90f04724 100644
--- a/docs/catalog/blocks/vfx-magnetic.mdx
+++ b/docs/catalog/blocks/vfx-magnetic.mdx
@@ -3,40 +3,21 @@ title: "Magnetic"
 description: "VFX composition block"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-magnetic.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-magnetic.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/vfx-magnetic.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Magnetic preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add vfx-magnetic
-```
+<InstallCommand command="npx hyperframes add vfx-magnetic" />
 
 That writes one file: `compositions/vfx-magnetic.html`.
 
-<Warning>
+<Danger>
   Live preview needs the `chrome://flags/#canvas-draw-element` flag switched on.
-  Rendering from the CLI switches it on for you. [How it
-  works](/guides/html-in-canvas)
-</Warning>
-
-## Add it to your video
-
-It runs for 15 seconds at 1920×1080. Paste this into your composition:
-
-```html index.html
-<div
-  data-composition-id="vfx-magnetic"
-  data-composition-src="compositions/vfx-magnetic.html"
-  data-start="0"
-  data-duration="15"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></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.
+  Without it this item's screen renders black. Rendering from the CLI switches
+  it on for you. [How it works](/guides/html-in-canvas)
+</Danger>
 
 ## Change the colors
 
@@ -45,6 +26,487 @@ Set these CSS variables on the block:
 - `--bg-color` — Background. Defaults to `#0c0c0c`.
 - `--text-color` — Text color. Defaults to `#e8e8e8`.
 
+## Source
+
+<Accordion title={`vfx-magnetic.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Magnetic Cursor — HTML-in-Canvas</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #0c0c0c;
+        overflow: hidden;
+        font-family:
+          system-ui,
+          -apple-system,
+          sans-serif;
+        color: #e8e8e8;
+      }
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0c0c0c;
+      }
+      canvas {
+        display: block;
+      }
+
+      .page-content {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        font-family:
+          system-ui,
+          -apple-system,
+          sans-serif;
+        color: #e8e8e8;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .page-inner {
+        max-width: 900px;
+        padding: 0 48px;
+      }
+      .heading {
+        font-size: 64px;
+        font-weight: 700;
+        line-height: 1.15;
+        letter-spacing: -0.03em;
+        color: #f0f0f0;
+        margin-bottom: 32px;
+      }
+      .heading em {
+        font-style: normal;
+        color: #70c7ed;
+      }
+      .body-text {
+        font-size: 22px;
+        line-height: 1.7;
+        color: rgba(255, 255, 255, 0.6);
+        margin-bottom: 24px;
+      }
+      .body-text:last-of-type {
+        margin-bottom: 48px;
+      }
+      .hint {
+        font-size: 15px;
+        color: rgba(255, 255, 255, 0.3);
+        font-family: ui-monospace, "SF Mono", monospace;
+        margin-bottom: 48px;
+        letter-spacing: 0.02em;
+      }
+      .card-grid {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 20px;
+      }
+      .card {
+        background: rgba(255, 255, 255, 0.04);
+        border: 1px solid rgba(255, 255, 255, 0.08);
+        border-radius: 14px;
+        padding: 24px;
+      }
+      .card-icon {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+        margin-bottom: 14px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 20px;
+        background: rgba(112, 199, 237, 0.12);
+      }
+      .card-title {
+        font-size: 16px;
+        font-weight: 600;
+        color: rgba(255, 255, 255, 0.85);
+        margin-bottom: 8px;
+      }
+      .card-desc {
+        font-size: 14px;
+        line-height: 1.5;
+        color: rgba(255, 255, 255, 0.4);
+      }
+
+      /* Subtitles */
+      .subtitle-bar {
+        position: absolute;
+        bottom: 60px;
+        left: 50%;
+        transform: translateX(-50%);
+        z-index: 10;
+        pointer-events: none;
+      }
+      .subtitle {
+        font-size: 28px;
+        font-weight: 500;
+        color: white;
+        text-align: center;
+        background: rgba(0, 0, 0, 0.7);
+        padding: 12px 32px;
+        border-radius: 8px;
+        backdrop-filter: blur(8px);
+        white-space: nowrap;
+        opacity: 0;
+        font-family:
+          system-ui,
+          -apple-system,
+          sans-serif;
+      }
+
+      /* Cursor dot */
+      .cursor-dot {
+        position: absolute;
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        background: rgba(112, 199, 237, 0.8);
+        box-shadow:
+          0 0 20px rgba(112, 199, 237, 0.5),
+          0 0 40px rgba(112, 199, 237, 0.3);
+        z-index: 10;
+        pointer-events: none;
+        transform: translate(-50%, -50%);
+        opacity: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="magnetic-cursor"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="15"
+      data-root="true"
+    >
+      <canvas
+        id="gl-canvas"
+        layoutsubtree
+        width="1920"
+        height="1080"
+        style="position: absolute; top: 0; left: 0; width: 1920px; height: 1080px"
+      >
+        <div class="page-content" id="content" style="width: 1920px; height: 1080px">
+          <div class="page-inner">
+            <h1 class="heading">Pixels bend toward<br />your <em>cursor</em></h1>
+            <p class="body-text">
+              Move your mouse across this page. Every pixel is drawn through a WebGL shader that
+              warps space toward your cursor position, like a magnet pulling iron filings beneath a
+              thin rubber sheet.
+            </p>
+            <p class="body-text">
+              The distortion follows a Gaussian falloff — strong at close range, tapering smoothly
+              to nothing. The text remains readable even under deformation.
+            </p>
+            <p class="hint">HTML-in-Canvas API + WebGL2 shader distortion</p>
+            <div class="card-grid">
+              <div class="card">
+                <div class="card-icon">&#9889;</div>
+                <div class="card-title">Real-time</div>
+                <div class="card-desc">
+                  60fps distortion on live DOM content via texElementImage2D
+                </div>
+              </div>
+              <div class="card">
+                <div class="card-icon">&#128268;</div>
+                <div class="card-title">Native API</div>
+                <div class="card-desc">
+                  No html2canvas. Browser's own rasterizer at full fidelity.
+                </div>
+              </div>
+              <div class="card">
+                <div class="card-icon">&#127912;</div>
+                <div class="card-title">GPU Shaders</div>
+                <div class="card-desc">
+                  Gaussian warp + chromatic aberration in one fragment shader pass.
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </canvas>
+
+      <!-- Visible cursor dot -->
+      <div class="cursor-dot" id="cursor-dot"></div>
+
+      <!-- Subtitles -->
+      <div class="subtitle-bar">
+        <div class="subtitle" id="sub1">
+          The HTML-in-Canvas API renders live DOM as a WebGL texture
+        </div>
+        <div class="subtitle" id="sub2">A magnetic shader warps every pixel toward the cursor</div>
+        <div class="subtitle" id="sub3">
+          Chromatic aberration splits RGB channels at the distortion site
+        </div>
+        <div class="subtitle" id="sub4">
+          Impossible without native drawElementImage — no polyfill exists
+        </div>
+      </div>
+
+      <div
+        id="driver"
+        class="clip"
+        data-start="0"
+        data-duration="15"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+
+    <script>
+      var W = 1920,
+        H = 1080;
+      var canvas = document.getElementById("gl-canvas");
+      var content = document.getElementById("content");
+      var cursorDot = document.getElementById("cursor-dot");
+
+      function isSupported() {
+        var tc = document.createElement("canvas");
+        if (!("layoutSubtree" in tc)) return false;
+        tc.setAttribute("layoutsubtree", "");
+        var ctx = tc.getContext("2d");
+        return ctx && typeof ctx.drawElementImage === "function";
+      }
+
+      // ── WebGL2 Setup ─────────────────────────────────────────────────
+      var gl = canvas.getContext("webgl2", { alpha: false, preserveDrawingBuffer: true });
+
+      function compile(type, src) {
+        var s = gl.createShader(type);
+        gl.shaderSource(s, src);
+        gl.compileShader(s);
+        if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) console.error(gl.getShaderInfoLog(s));
+        return s;
+      }
+      function link(vsSrc, fsSrc) {
+        var p = gl.createProgram();
+        gl.attachShader(p, compile(gl.VERTEX_SHADER, vsSrc));
+        gl.attachShader(p, compile(gl.FRAGMENT_SHADER, fsSrc));
+        gl.linkProgram(p);
+        return p;
+      }
+
+      var VS = [
+        "#version 300 es",
+        "in vec2 a_pos;",
+        "out vec2 v_uv;",
+        "void main() {",
+        "  v_uv = vec2(a_pos.x * 0.5 + 0.5, 0.5 - a_pos.y * 0.5);",
+        "  gl_Position = vec4(a_pos, 0.0, 1.0);",
+        "}",
+      ].join("\n");
+
+      var FS = [
+        "#version 300 es",
+        "precision highp float;",
+        "in vec2 v_uv;",
+        "out vec4 fragColor;",
+        "uniform sampler2D u_content;",
+        "uniform vec2 u_mouse;",
+        "uniform vec2 u_resolution;",
+        "uniform float u_repel;",
+        "uniform float u_strength;",
+        "",
+        "void main() {",
+        "  vec2 uv = v_uv;",
+        "  float aspect = u_resolution.x / u_resolution.y;",
+        "  vec2 delta = u_mouse - uv;",
+        "  vec2 aspectDelta = delta * vec2(aspect, 1.0);",
+        "  float dist = length(aspectDelta);",
+        "  float strength = exp(-dist * dist * 20.0) * 0.04 * u_strength;",
+        "  float direction = mix(1.0, -1.0, u_repel);",
+        "  vec2 displaced = uv + delta * strength * direction;",
+        "  displaced = clamp(displaced, vec2(0.0), vec2(1.0));",
+        "  float aberration = strength * 0.6;",
+        "  vec2 aberDir = normalize(delta + 0.0001) * aberration;",
+        "  float r = texture(u_content, displaced + aberDir * 0.3).r;",
+        "  float g = texture(u_content, displaced).g;",
+        "  float b = texture(u_content, displaced - aberDir * 0.3).b;",
+        "  fragColor = vec4(r, g, b, 1.0);",
+        "}",
+      ].join("\n");
+
+      var prog = link(VS, FS);
+
+      // Quad
+      var vao = gl.createVertexArray();
+      gl.bindVertexArray(vao);
+      var buf = gl.createBuffer();
+      gl.bindBuffer(gl.ARRAY_BUFFER, buf);
+      gl.bufferData(
+        gl.ARRAY_BUFFER,
+        new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),
+        gl.STATIC_DRAW,
+      );
+      var aPos = gl.getAttribLocation(prog, "a_pos");
+      gl.enableVertexAttribArray(aPos);
+      gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);
+
+      // Texture
+      var tex = gl.createTexture();
+      gl.bindTexture(gl.TEXTURE_2D, tex);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+
+      // Uniforms
+      gl.useProgram(prog);
+      var U = {};
+      ["u_content", "u_mouse", "u_resolution", "u_repel", "u_strength"].forEach(function (n) {
+        U[n] = gl.getUniformLocation(prog, n);
+      });
+
+      // ── Capture + Render ─────────────────────────────────────────────
+      var captured = false;
+
+      function captureContent() {
+        if (!isSupported()) return;
+        gl.bindTexture(gl.TEXTURE_2D, tex);
+        gl.texElementImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, content);
+        captured = true;
+      }
+
+      // Also support drawElementImage fallback via 2D context capture
+      function captureVia2D() {
+        var tc = document.createElement("canvas");
+        tc.setAttribute("layoutsubtree", "");
+        tc.width = W;
+        tc.height = H;
+        // Can't use drawElementImage from a different canvas — skip fallback
+      }
+
+      function render(mouseX, mouseY, repel, strength) {
+        gl.viewport(0, 0, W, H);
+        gl.useProgram(prog);
+        gl.bindVertexArray(vao);
+        gl.activeTexture(gl.TEXTURE0);
+        gl.bindTexture(gl.TEXTURE_2D, tex);
+        gl.uniform1i(U.u_content, 0);
+        gl.uniform2f(U.u_mouse, mouseX, mouseY);
+        gl.uniform2f(U.u_resolution, W, H);
+        gl.uniform1f(U.u_repel, repel);
+        gl.uniform1f(U.u_strength, strength);
+        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+      }
+
+      // ── Animation State ──────────────────────────────────────────────
+      var S = {
+        mouseX: 0.5,
+        mouseY: 0.5,
+        repel: 0,
+        strength: 0,
+        progress: 0,
+      };
+
+      // ── GSAP Timeline ────────────────────────────────────────────────
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+
+      // Driver tween
+      tl.to(
+        S,
+        {
+          progress: 1,
+          duration: 15,
+          ease: "none",
+          onUpdate: function () {
+            // Update cursor dot position
+            cursorDot.style.left = S.mouseX * W + "px";
+            cursorDot.style.top = S.mouseY * H + "px";
+            render(S.mouseX, S.mouseY, S.repel, S.strength);
+          },
+        },
+        0,
+      );
+
+      // Cursor appears
+      tl.to(cursorDot, { opacity: 1, duration: 0.3 }, 0.5);
+      tl.to(S, { strength: 1, duration: 0.5, ease: "power2.out" }, 0.5);
+
+      // Cursor path: smooth figure-8 across the page
+      // Phase 1: sweep across heading
+      tl.to(S, { mouseX: 0.35, mouseY: 0.3, duration: 2, ease: "power1.inOut" }, 1);
+      tl.to(S, { mouseX: 0.6, mouseY: 0.35, duration: 2, ease: "power1.inOut" }, 3);
+
+      // Phase 2: circle around text
+      tl.to(S, { mouseX: 0.4, mouseY: 0.5, duration: 1.5, ease: "sine.inOut" }, 5);
+      tl.to(S, { mouseX: 0.55, mouseY: 0.55, duration: 1.5, ease: "sine.inOut" }, 6.5);
+
+      // Phase 3: repel pulse
+      tl.to(S, { repel: 1, duration: 0.2, ease: "power4.out" }, 8);
+      tl.to(S, { repel: 0, duration: 0.5, ease: "power2.out" }, 8.5);
+
+      // Phase 4: sweep across cards
+      tl.to(S, { mouseX: 0.3, mouseY: 0.75, duration: 2, ease: "power1.inOut" }, 9);
+      tl.to(S, { mouseX: 0.65, mouseY: 0.72, duration: 2, ease: "power1.inOut" }, 11);
+
+      // Phase 5: exit
+      tl.to(S, { mouseX: 0.8, mouseY: 0.2, duration: 1.5, ease: "power2.inOut" }, 13);
+      tl.to(S, { strength: 0, duration: 0.5 }, 14);
+      tl.to(cursorDot, { opacity: 0, duration: 0.3 }, 14.2);
+
+      // Subtitles
+      tl.to("#sub1", { opacity: 1, duration: 0.3 }, 1);
+      tl.to("#sub1", { opacity: 0, duration: 0.3 }, 3.5);
+      tl.to("#sub2", { opacity: 1, duration: 0.3 }, 4);
+      tl.to("#sub2", { opacity: 0, duration: 0.3 }, 6.5);
+      tl.to("#sub3", { opacity: 1, duration: 0.3 }, 7.5);
+      tl.to("#sub3", { opacity: 0, duration: 0.3 }, 9.5);
+      tl.to("#sub4", { opacity: 1, duration: 0.3 }, 10.5);
+      tl.to("#sub4", { opacity: 0, duration: 0.3 }, 13);
+
+      window.__timelines["magnetic-cursor"] = tl;
+
+      // Paint event for texture upload
+      canvas.onpaint = function () {
+        if (!captured) {
+          gl.bindTexture(gl.TEXTURE_2D, tex);
+          gl.texElementImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, content);
+          captured = true;
+        }
+      };
+
+      setTimeout(function () {
+        if (isSupported()) {
+          canvas.requestPaint();
+        }
+        tl.seek(0);
+      }, 0);
+    </script>
+  </body>
+</html>
+```
+
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="vfx-magnetic" data-composition-src="compositions/vfx-magnetic.html" data-start="0" data-duration="15" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
+
 {/* hf:generated-footer */}
 
 Tagged `html-in-canvas` `webgl`.
diff --git a/docs/catalog/blocks/vfx-portal.mdx b/docs/catalog/blocks/vfx-portal.mdx
index 1eed276a73..40ae1b81cd 100644
--- a/docs/catalog/blocks/vfx-portal.mdx
+++ b/docs/catalog/blocks/vfx-portal.mdx
@@ -3,40 +3,21 @@ title: "Portal"
 description: "VFX composition block"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-portal.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-portal.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/vfx-portal.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Portal preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add vfx-portal
-```
+<InstallCommand command="npx hyperframes add vfx-portal" />
 
 That writes one file: `compositions/vfx-portal.html`.
 
-<Warning>
+<Danger>
   Live preview needs the `chrome://flags/#canvas-draw-element` flag switched on.
-  Rendering from the CLI switches it on for you. [How it
-  works](/guides/html-in-canvas)
-</Warning>
-
-## Add it to your video
-
-It runs for 10 seconds at 1920×1080. Paste this into your composition:
-
-```html index.html
-<div
-  data-composition-id="vfx-portal"
-  data-composition-src="compositions/vfx-portal.html"
-  data-start="0"
-  data-duration="10"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></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.
+  Without it this item's screen renders black. Rendering from the CLI switches
+  it on for you. [How it works](/guides/html-in-canvas)
+</Danger>
 
 ## Change the colors
 
@@ -45,6 +26,886 @@ Set these CSS variables on the block:
 - `--bg-color` — Background. Defaults to `#000000`.
 - `--portal-color` — Portal color. Defaults to `#fafafa`.
 
+## Source
+
+<Accordion title={`vfx-portal.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>HTML Portal Transition</title>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #000;
+        overflow: hidden;
+        font-family: "Inter", system-ui, sans-serif;
+      }
+
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000;
+      }
+
+      .panel {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+
+      /* ── Shared Site Layout ──────────────────────────────── */
+      .site-wrap {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        height: 100%;
+      }
+
+      .topbar {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 28px 64px;
+      }
+      .logo {
+        font-size: 24px;
+        font-weight: 800;
+        letter-spacing: -0.5px;
+      }
+      .nav {
+        display: flex;
+        gap: 36px;
+      }
+      .nav span {
+        font-size: 15px;
+        font-weight: 500;
+      }
+      .nav-cta {
+        font-size: 14px;
+        font-weight: 600;
+        padding: 10px 24px;
+        border-radius: 8px;
+        border: none;
+        cursor: pointer;
+      }
+
+      .hero {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        gap: 24px;
+        padding: 0 200px;
+      }
+      .hero-title {
+        font-size: 72px;
+        font-weight: 800;
+        letter-spacing: -2px;
+        line-height: 1.05;
+      }
+      .hero-sub {
+        font-size: 20px;
+        line-height: 1.6;
+        max-width: 640px;
+      }
+      .hero-btn {
+        display: inline-block;
+        padding: 16px 40px;
+        border-radius: 12px;
+        font-size: 17px;
+        font-weight: 700;
+        border: none;
+        cursor: pointer;
+        letter-spacing: -0.2px;
+      }
+
+      .cards-row {
+        display: flex;
+        gap: 24px;
+        padding: 0 64px 56px;
+      }
+      .feature-card {
+        flex: 1;
+        padding: 32px;
+        border-radius: 16px;
+      }
+      .card-icon {
+        width: 44px;
+        height: 44px;
+        border-radius: 10px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 22px;
+        margin-bottom: 16px;
+      }
+      .card-title {
+        font-size: 18px;
+        font-weight: 700;
+        margin-bottom: 6px;
+      }
+      .card-desc {
+        font-size: 14px;
+        line-height: 1.5;
+      }
+
+      /* ── Light Mode ──────────────────────────────────────── */
+      .light .site-wrap {
+        background: #fafafa;
+        color: #111;
+      }
+      .light .logo {
+        color: #111;
+      }
+      .light .nav span {
+        color: #555;
+      }
+      .light .nav-cta {
+        background: #7c3aed;
+        color: #fff;
+      }
+      .light .hero-title {
+        color: #111;
+      }
+      .light .hero-sub {
+        color: #666;
+      }
+      .light .hero-btn {
+        background: #7c3aed;
+        color: #fff;
+      }
+      .light .feature-card {
+        background: #fff;
+        border: 1px solid #e5e7eb;
+      }
+      .light .card-icon {
+        background: #f3f0ff;
+        color: #7c3aed;
+      }
+      .light .card-title {
+        color: #111;
+      }
+      .light .card-desc {
+        color: #777;
+      }
+
+      /* ── Dark Mode ───────────────────────────────────────── */
+      .dark .site-wrap {
+        background: #0a0a0f;
+        color: #f0f0f5;
+      }
+      .dark .logo {
+        background: linear-gradient(135deg, #a78bfa, #c084fc);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+      }
+      .dark .nav span {
+        color: rgba(255, 255, 255, 0.5);
+      }
+      .dark .nav-cta {
+        background: linear-gradient(135deg, #7c3aed, #a855f7);
+        color: #fff;
+        box-shadow: 0 0 24px rgba(124, 58, 237, 0.3);
+      }
+      .dark .hero-title {
+        color: #f0f0f5;
+      }
+      .dark .hero-sub {
+        color: rgba(255, 255, 255, 0.5);
+      }
+      .dark .hero-btn {
+        background: linear-gradient(135deg, #7c3aed, #a855f7);
+        color: #fff;
+        box-shadow: 0 0 32px rgba(124, 58, 237, 0.35);
+      }
+      .dark .feature-card {
+        background: rgba(255, 255, 255, 0.03);
+        border: 1px solid rgba(255, 255, 255, 0.08);
+        box-shadow: 0 0 20px rgba(124, 58, 237, 0.06);
+      }
+      .dark .card-icon {
+        background: rgba(124, 58, 237, 0.15);
+        color: #a78bfa;
+      }
+      .dark .card-title {
+        color: #f0f0f5;
+      }
+      .dark .card-desc {
+        color: rgba(255, 255, 255, 0.45);
+      }
+
+      #error-overlay {
+        position: absolute;
+        inset: 0;
+        background: #000;
+        display: none;
+        align-items: center;
+        justify-content: center;
+        z-index: 100;
+        flex-direction: column;
+        gap: 16px;
+        color: #fff;
+      }
+      #error-overlay.visible {
+        display: flex;
+      }
+      #error-overlay h2 {
+        font-size: 24px;
+        font-weight: 600;
+      }
+      #error-overlay p {
+        font-size: 14px;
+        color: rgba(255, 255, 255, 0.5);
+        max-width: 480px;
+        text-align: center;
+        line-height: 1.6;
+      }
+      #error-overlay code {
+        background: rgba(255, 255, 255, 0.1);
+        padding: 2px 8px;
+        border-radius: 4px;
+        font-size: 13px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="portal-transition"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="10"
+      data-root="true"
+    >
+      <!-- Light mode panel (front) -->
+      <canvas
+        id="cap-light"
+        layoutsubtree
+        width="1920"
+        height="1080"
+        style="
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1920px;
+          height: 1080px;
+          z-index: -1;
+          pointer-events: none;
+        "
+      >
+        <section
+          class="panel light"
+          id="panel-light"
+          data-panel-start="0"
+          data-panel-duration="10"
+          style="width: 1920px; height: 1080px"
+        >
+          <div class="site-wrap">
+            <div class="topbar">
+              <div class="logo">HyperFrames</div>
+              <div class="nav">
+                <span>Docs</span>
+                <span>Catalog</span>
+                <span>GitHub</span>
+                <button class="nav-cta">Sign In</button>
+              </div>
+            </div>
+            <div class="hero">
+              <h1 class="hero-title">Write HTML<br />Render Video</h1>
+              <p class="hero-sub">
+                Ship faster with a platform that handles the hard parts. Analytics, infrastructure,
+                and developer tools — all in one place.
+              </p>
+              <button class="hero-btn">Start Creating</button>
+            </div>
+            <div class="cards-row">
+              <div class="feature-card">
+                <div class="card-icon">&#9889;</div>
+                <div class="card-title">Lightning Fast</div>
+                <div class="card-desc">
+                  Sub-millisecond response times with edge deployment across 40+ regions worldwide.
+                </div>
+              </div>
+              <div class="feature-card">
+                <div class="card-icon">&#128274;</div>
+                <div class="card-title">Secure by Default</div>
+                <div class="card-desc">
+                  SOC2 certified. End-to-end encryption. Role-based access out of the box.
+                </div>
+              </div>
+              <div class="feature-card">
+                <div class="card-icon">&#128268;</div>
+                <div class="card-title">Plug and Play</div>
+                <div class="card-desc">
+                  200+ integrations. Connect your existing stack in minutes, not weeks.
+                </div>
+              </div>
+              <div class="feature-card">
+                <div class="card-icon">&#128200;</div>
+                <div class="card-title">Real-time Insights</div>
+                <div class="card-desc">
+                  Live dashboards, anomaly detection, and AI-powered recommendations.
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+      </canvas>
+
+      <!-- Dark mode panel (back) -->
+      <canvas
+        id="cap-dark"
+        layoutsubtree
+        width="1920"
+        height="1080"
+        style="
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1920px;
+          height: 1080px;
+          z-index: -1;
+          pointer-events: none;
+        "
+      >
+        <section
+          class="panel dark"
+          id="panel-dark"
+          data-panel-start="0"
+          data-panel-duration="10"
+          style="width: 1920px; height: 1080px"
+        >
+          <div class="site-wrap">
+            <div class="topbar">
+              <div class="logo">HyperFrames</div>
+              <div class="nav">
+                <span>Docs</span>
+                <span>Catalog</span>
+                <span>GitHub</span>
+                <button class="nav-cta">Sign In</button>
+              </div>
+            </div>
+            <div class="hero">
+              <h1 class="hero-title">Write HTML<br />Render Video</h1>
+              <p class="hero-sub">
+                Ship faster with a platform that handles the hard parts. Analytics, infrastructure,
+                and developer tools — all in one place.
+              </p>
+              <button class="hero-btn">Start Creating</button>
+            </div>
+            <div class="cards-row">
+              <div class="feature-card">
+                <div class="card-icon">&#9889;</div>
+                <div class="card-title">Lightning Fast</div>
+                <div class="card-desc">
+                  Sub-millisecond response times with edge deployment across 40+ regions worldwide.
+                </div>
+              </div>
+              <div class="feature-card">
+                <div class="card-icon">&#128274;</div>
+                <div class="card-title">Secure by Default</div>
+                <div class="card-desc">
+                  SOC2 certified. End-to-end encryption. Role-based access out of the box.
+                </div>
+              </div>
+              <div class="feature-card">
+                <div class="card-icon">&#128268;</div>
+                <div class="card-title">Plug and Play</div>
+                <div class="card-desc">
+                  200+ integrations. Connect your existing stack in minutes, not weeks.
+                </div>
+              </div>
+              <div class="feature-card">
+                <div class="card-icon">&#128200;</div>
+                <div class="card-title">Real-time Insights</div>
+                <div class="card-desc">
+                  Live dashboards, anomaly detection, and AI-powered recommendations.
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+      </canvas>
+
+      <!-- Three.js render target -->
+      <canvas
+        id="theater"
+        width="1920"
+        height="1080"
+        style="position: absolute; top: 0; left: 0; width: 1920px; height: 1080px"
+      ></canvas>
+
+      <div id="error-overlay">
+        <h2>HTML-in-Canvas Required</h2>
+        <p>
+          This composition requires the experimental CanvasDrawElement API. Enable it in Chrome or
+          Brave:
+        </p>
+        <p><code>chrome://flags/#canvas-draw-element</code></p>
+      </div>
+
+      <!-- Driver clip for HyperFrames timeline sync -->
+      <div
+        id="driver"
+        class="clip"
+        data-start="0"
+        data-duration="10"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+
+    <script>
+      var theaterCanvas = document.getElementById("theater");
+      var W = 1920,
+        H = 1080;
+
+      // ── Feature Detection ──────────────────────────────────────────────
+      function isSupported() {
+        if (!("layoutSubtree" in document.createElement("canvas"))) return false;
+        var tc = document.createElement("canvas");
+        tc.setAttribute("layoutsubtree", "");
+        var ctx = tc.getContext("2d");
+        return ctx && typeof ctx.drawElementImage === "function";
+      }
+
+      if (!isSupported()) {
+        document.getElementById("error-overlay").classList.add("visible");
+      }
+
+      // ── Seeded PRNG (mulberry32) ───────────────────────────────────────
+      function mulberry32(seed) {
+        return function () {
+          seed |= 0;
+          seed = (seed + 0x6d2b79f5) | 0;
+          var t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
+          t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+          return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+        };
+      }
+      var rng = mulberry32(42);
+
+      // ── Canvas Capture ─────────────────────────────────────────────────
+      var capLight = document.getElementById("cap-light");
+      var capDark = document.getElementById("cap-dark");
+      var ctxLight = capLight.getContext("2d");
+      var ctxDark = capDark.getContext("2d");
+      var panelLight = document.getElementById("panel-light");
+      var panelDark = document.getElementById("panel-dark");
+
+      function capturePanels() {
+        ctxLight.clearRect(0, 0, W, H);
+        ctxLight.drawElementImage(panelLight, 0, 0, W, H);
+        ctxDark.clearRect(0, 0, W, H);
+        ctxDark.drawElementImage(panelDark, 0, 0, W, H);
+        lightTexture.needsUpdate = true;
+        darkTexture.needsUpdate = true;
+      }
+
+      // ── Three.js Scene ─────────────────────────────────────────────────
+      var renderer = new THREE.WebGLRenderer({
+        canvas: theaterCanvas,
+        antialias: false,
+        alpha: false,
+        powerPreference: "high-performance",
+        preserveDrawingBuffer: true,
+      });
+      renderer.setSize(W, H, false);
+      renderer.setPixelRatio(1);
+      renderer.setClearColor(0x000000, 1);
+
+      var scene = new THREE.Scene();
+      var camera = new THREE.PerspectiveCamera(50, W / H, 0.1, 100);
+      camera.position.set(0, 0, 2.8);
+      camera.lookAt(0, 0, 0);
+
+      // Calculate quad dimensions to fill the camera frustum at z=0
+      var vFov = (camera.fov * Math.PI) / 180;
+      var quadH = 2 * Math.tan(vFov / 2) * camera.position.z;
+      var quadW = quadH * (W / H);
+
+      // ── Textures from Captured Canvases ────────────────────────────────
+      var lightTexture = new THREE.CanvasTexture(capLight);
+      lightTexture.minFilter = THREE.LinearFilter;
+      lightTexture.magFilter = THREE.LinearFilter;
+      lightTexture.generateMipmaps = false;
+
+      var darkTexture = new THREE.CanvasTexture(capDark);
+      darkTexture.minFilter = THREE.LinearFilter;
+      darkTexture.magFilter = THREE.LinearFilter;
+      darkTexture.generateMipmaps = false;
+
+      // ── Back Quad: Dark Mode (sits behind) ─────────────────────────────
+      var darkGeo = new THREE.PlaneGeometry(quadW, quadH);
+      var darkMat = new THREE.MeshBasicMaterial({ map: darkTexture, side: THREE.FrontSide });
+      var darkQuad = new THREE.Mesh(darkGeo, darkMat);
+      darkQuad.position.z = -0.01;
+      scene.add(darkQuad);
+
+      // ── Front Quad: Light Mode with Portal Shader ──────────────────────
+      var portalUniforms = {
+        tLight: { value: lightTexture },
+        portalRadius: { value: 0.0 },
+        portalCenter: { value: new THREE.Vector2(0.5, 0.5) },
+        edgeWidth: { value: 0.06 },
+        glowColor: { value: new THREE.Vector3(0.486, 0.227, 0.929) },
+        glowColor2: { value: new THREE.Vector3(0.29, 0.565, 1.0) },
+        chromaticStrength: { value: 0.025 },
+        distortionStrength: { value: 0.04 },
+        time: { value: 0.0 },
+        energyIntensity: { value: 1.0 },
+      };
+
+      var portalVertShader = [
+        "varying vec2 vUv;",
+        "void main() {",
+        "  vUv = uv;",
+        "  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);",
+        "}",
+      ].join("\n");
+
+      var portalFragShader = [
+        "uniform sampler2D tLight;",
+        "uniform float portalRadius;",
+        "uniform vec2 portalCenter;",
+        "uniform float edgeWidth;",
+        "uniform vec3 glowColor;",
+        "uniform vec3 glowColor2;",
+        "uniform float chromaticStrength;",
+        "uniform float distortionStrength;",
+        "uniform float time;",
+        "uniform float energyIntensity;",
+        "varying vec2 vUv;",
+        "",
+        "float hash(vec2 p) {",
+        "  return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453);",
+        "}",
+        "",
+        "float noise(vec2 p) {",
+        "  vec2 i = floor(p);",
+        "  vec2 f = fract(p);",
+        "  f = f * f * (3.0 - 2.0 * f);",
+        "  float a = hash(i);",
+        "  float b = hash(i + vec2(1.0, 0.0));",
+        "  float c = hash(i + vec2(0.0, 1.0));",
+        "  float d = hash(i + vec2(1.0, 1.0));",
+        "  return mix(mix(a, b, f.x), mix(c, d, f.x), f.y);",
+        "}",
+        "",
+        "void main() {",
+        "  vec2 uv = vUv;",
+        "  vec2 aspect = vec2(" + (W / H).toFixed(4) + ", 1.0);",
+        "  vec2 centered = (uv - portalCenter) * aspect;",
+        "  float dist = length(centered);",
+        "",
+        "  // Noise-modulated edge for organic tear look",
+        "  float angle = atan(centered.y, centered.x);",
+        "  float edgeNoise = noise(vec2(angle * 3.0, time * 2.0)) * 0.03 * energyIntensity;",
+        "  float portalEdge = portalRadius + edgeNoise;",
+        "",
+        "  // Distortion near portal edge: warp UVs radially",
+        "  float edgeDist = abs(dist - portalEdge);",
+        "  float distortMask = smoothstep(edgeWidth * 1.5, 0.0, edgeDist) * distortionStrength;",
+        "  vec2 distortDir = normalize(centered + 0.0001);",
+        "  vec2 distortedUv = uv + distortDir * distortMask * sin(angle * 8.0 + time * 5.0);",
+        "",
+        "  // Chromatic aberration near portal edge",
+        "  float chromaMask = smoothstep(edgeWidth * 2.0, 0.0, edgeDist) * chromaticStrength;",
+        "  vec2 chromaOffset = distortDir * chromaMask;",
+        "  float r = texture2D(tLight, distortedUv + chromaOffset).r;",
+        "  float g = texture2D(tLight, distortedUv).g;",
+        "  float b = texture2D(tLight, distortedUv - chromaOffset).b;",
+        "  vec3 lightColor = vec3(r, g, b);",
+        "",
+        "  // Portal mask: inside = transparent (show dark behind), outside = light",
+        "  float mask = smoothstep(portalEdge - 0.008, portalEdge + 0.008, dist);",
+        "",
+        "  // Glow ring at portal edge",
+        "  float glowInner = smoothstep(edgeWidth, 0.0, edgeDist);",
+        "  float glowOuter = smoothstep(edgeWidth * 2.5, edgeWidth * 0.5, edgeDist);",
+        "  float glow = glowInner * glowOuter * energyIntensity;",
+        "",
+        "  // Animated color cycling along the ring",
+        "  float colorPhase = fract(angle / 6.2832 + time * 0.4);",
+        "  vec3 ringColor = mix(glowColor, glowColor2, sin(colorPhase * 6.2832) * 0.5 + 0.5);",
+        "",
+        "  // Secondary energy sparks",
+        "  float sparks = noise(vec2(angle * 12.0, time * 8.0));",
+        "  sparks = pow(sparks, 4.0) * glowInner * energyIntensity * 2.0;",
+        "",
+        "  vec3 finalColor = lightColor * mask;",
+        "  finalColor += ringColor * glow * 2.5;",
+        "  finalColor += vec3(1.0, 0.9, 1.0) * sparks;",
+        "",
+        "  // When portal is large enough, alpha fades out completely",
+        "  float alpha = mask + glow * 0.5 + sparks * 0.3;",
+        "  alpha = clamp(alpha, 0.0, 1.0);",
+        "",
+        "  gl_FragColor = vec4(finalColor, alpha);",
+        "}",
+      ].join("\n");
+
+      var frontGeo = new THREE.PlaneGeometry(quadW, quadH);
+      var frontMat = new THREE.ShaderMaterial({
+        uniforms: portalUniforms,
+        vertexShader: portalVertShader,
+        fragmentShader: portalFragShader,
+        transparent: true,
+        side: THREE.FrontSide,
+        depthWrite: false,
+      });
+      var frontQuad = new THREE.Mesh(frontGeo, frontMat);
+      frontQuad.position.z = 0.0;
+      scene.add(frontQuad);
+
+      // ── Animation State ────────────────────────────────────────────────
+      var animState = {
+        portalRadius: 0.0,
+        cameraZ: 2.8,
+        energyIntensity: 0.0,
+        chromaticStrength: 0.0,
+        distortionStrength: 0.0,
+        edgeWidth: 0.06,
+        time: 0.0,
+      };
+
+      // ── GSAP Timeline ──────────────────────────────────────────────────
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+
+      // Phase 1: Hold on light mode (0 - 1.5s)
+      // Subtle energy buildup at center before portal opens
+      tl.to(
+        animState,
+        {
+          energyIntensity: 0.3,
+          duration: 1.2,
+          ease: "power2.in",
+        },
+        0.3,
+      );
+
+      // Phase 2: Portal tears open (1.5 - 5.0s)
+      tl.to(
+        animState,
+        {
+          portalRadius: 0.85,
+          duration: 3.5,
+          ease: "power2.inOut",
+        },
+        1.5,
+      );
+
+      tl.to(
+        animState,
+        {
+          energyIntensity: 1.0,
+          duration: 0.6,
+          ease: "power3.out",
+        },
+        1.5,
+      );
+
+      tl.to(
+        animState,
+        {
+          chromaticStrength: 0.035,
+          duration: 2.0,
+          ease: "power2.in",
+        },
+        1.5,
+      );
+
+      tl.to(
+        animState,
+        {
+          distortionStrength: 0.06,
+          duration: 2.5,
+          ease: "power2.inOut",
+        },
+        1.5,
+      );
+
+      tl.to(
+        animState,
+        {
+          edgeWidth: 0.08,
+          duration: 2.0,
+          ease: "sine.inOut",
+        },
+        2.0,
+      );
+
+      // Phase 3: Camera pushes through portal (3.5 - 6.5s)
+      tl.to(
+        animState,
+        {
+          cameraZ: 1.4,
+          duration: 3.0,
+          ease: "power2.inOut",
+        },
+        3.5,
+      );
+
+      // Phase 4: Portal overshoots to cover full screen (5.0 - 7.0s)
+      tl.to(
+        animState,
+        {
+          portalRadius: 1.8,
+          duration: 2.0,
+          ease: "power3.in",
+        },
+        5.0,
+      );
+
+      // Energy peaks then fades as we emerge
+      tl.to(
+        animState,
+        {
+          energyIntensity: 1.5,
+          duration: 0.8,
+          ease: "power2.in",
+        },
+        5.0,
+      );
+
+      tl.to(
+        animState,
+        {
+          energyIntensity: 0.0,
+          duration: 1.2,
+          ease: "power2.out",
+        },
+        6.2,
+      );
+
+      // Chromatic aberration peaks during push-through
+      tl.to(
+        animState,
+        {
+          chromaticStrength: 0.06,
+          duration: 1.0,
+          ease: "power3.in",
+        },
+        5.5,
+      );
+
+      tl.to(
+        animState,
+        {
+          chromaticStrength: 0.0,
+          duration: 1.0,
+          ease: "power2.out",
+        },
+        6.8,
+      );
+
+      // Distortion fades
+      tl.to(
+        animState,
+        {
+          distortionStrength: 0.0,
+          duration: 1.0,
+          ease: "power2.out",
+        },
+        6.5,
+      );
+
+      // Phase 5: Settle in dark mode (7.0 - 10s)
+      // Camera eases to final position
+      tl.to(
+        animState,
+        {
+          cameraZ: 2.8,
+          duration: 2.5,
+          ease: "power2.out",
+        },
+        7.0,
+      );
+
+      // ── Render Loop via Timeline ───────────────────────────────────────
+      tl.to(
+        { v: 0 },
+        {
+          v: 1,
+          duration: 10,
+          ease: "none",
+          onUpdate: function () {
+            var t = tl.time();
+            animState.time = t;
+
+            // Update portal shader uniforms
+            portalUniforms.portalRadius.value = animState.portalRadius;
+            portalUniforms.edgeWidth.value = animState.edgeWidth;
+            portalUniforms.chromaticStrength.value = animState.chromaticStrength;
+            portalUniforms.distortionStrength.value = animState.distortionStrength;
+            portalUniforms.time.value = t;
+            portalUniforms.energyIntensity.value = animState.energyIntensity;
+
+            // Update camera Z for push-through effect
+            camera.position.z = animState.cameraZ;
+
+            // Recalculate quad scale to always fill the view at current camera Z
+            var currentVFov = (camera.fov * Math.PI) / 180;
+            var currentH = 2 * Math.tan(currentVFov / 2) * camera.position.z;
+            var currentW = currentH * (W / H);
+            frontQuad.scale.set(currentW / quadW, currentH / quadH, 1);
+            darkQuad.scale.set(currentW / quadW, currentH / quadH, 1);
+
+            renderer.render(scene, camera);
+          },
+        },
+        0,
+      );
+
+      window.__timelines["portal-transition"] = tl;
+
+      // ── Deferred Init ──────────────────────────────────────────────────
+      setTimeout(function () {
+        if (isSupported()) {
+          capturePanels();
+        }
+        tl.seek(0);
+      }, 0);
+    </script>
+  </body>
+</html>
+```
+
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="vfx-portal" data-composition-src="compositions/vfx-portal.html" data-start="0" data-duration="10" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
+
 {/* hf:generated-footer */}
 
 Tagged `html-in-canvas` `webgl`.
diff --git a/docs/catalog/blocks/vfx-shatter.mdx b/docs/catalog/blocks/vfx-shatter.mdx
index 7cb1cf546f..1326aad53d 100644
--- a/docs/catalog/blocks/vfx-shatter.mdx
+++ b/docs/catalog/blocks/vfx-shatter.mdx
@@ -3,40 +3,1194 @@ title: "Shatter"
 description: "VFX composition block"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-shatter.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-shatter.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/vfx-shatter.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Shatter preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add vfx-shatter
-```
+<InstallCommand command="npx hyperframes add vfx-shatter" />
 
 That writes one file: `compositions/vfx-shatter.html`.
 
-<Warning>
+<Danger>
   Live preview needs the `chrome://flags/#canvas-draw-element` flag switched on.
-  Rendering from the CLI switches it on for you. [How it
-  works](/guides/html-in-canvas)
-</Warning>
-
-## Add it to your video
-
-It runs for 12 seconds at 1920×1080. Paste this into your composition:
-
-```html index.html
-<div
-  data-composition-id="vfx-shatter"
-  data-composition-src="compositions/vfx-shatter.html"
-  data-start="0"
-  data-duration="12"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+  Without it this item's screen renders black. Rendering from the CLI switches
+  it on for you. [How it works](/guides/html-in-canvas)
+</Danger>
+
+## Source
+
+<Accordion title={`vfx-shatter.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>HTML Glass Shatter</title>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #000;
+        overflow: hidden;
+        font-family: "Inter", system-ui, sans-serif;
+      }
+
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #06080d;
+      }
+
+      #scene-canvas {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+      }
+
+      .panel {
+        position: absolute;
+        top: 0;
+        left: 0;
+        overflow: hidden;
+        color: #fff;
+      }
+
+      /* ── Panel A: Write HTML, Render Video ─────────────────────────── */
+      .panel-a-inner {
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(160deg, #0a0c14 0%, #0d1117 40%, #111820 100%);
+        display: flex;
+        flex-direction: column;
+        padding: 80px 120px;
+        gap: 0;
+        position: relative;
+        overflow: hidden;
+      }
+      .panel-a-inner::before {
+        content: "";
+        position: absolute;
+        top: -200px;
+        right: -200px;
+        width: 600px;
+        height: 600px;
+        background: radial-gradient(circle, rgba(56, 189, 248, 0.06) 0%, transparent 70%);
+        pointer-events: none;
+      }
+      .panel-a-inner::after {
+        content: "";
+        position: absolute;
+        bottom: -150px;
+        left: -150px;
+        width: 500px;
+        height: 500px;
+        background: radial-gradient(circle, rgba(139, 92, 246, 0.05) 0%, transparent 70%);
+        pointer-events: none;
+      }
+
+      .pa-badge {
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+        padding: 8px 20px;
+        background: rgba(56, 189, 248, 0.08);
+        border: 1px solid rgba(56, 189, 248, 0.15);
+        border-radius: 100px;
+        font-size: 14px;
+        font-weight: 600;
+        color: #38bdf8;
+        letter-spacing: 1.5px;
+        text-transform: uppercase;
+        width: fit-content;
+        margin-bottom: 40px;
+      }
+      .pa-badge-dot {
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background: #38bdf8;
+      }
+
+      .pa-headline {
+        font-size: 88px;
+        font-weight: 800;
+        letter-spacing: -3px;
+        line-height: 1;
+        color: #f0f4f8;
+        margin-bottom: 48px;
+        max-width: 1100px;
+      }
+      .pa-headline em {
+        font-style: normal;
+        color: #38bdf8;
+      }
+
+      .pa-chart {
+        display: flex;
+        align-items: flex-end;
+        gap: 40px;
+        margin-bottom: 56px;
+      }
+      .pa-chart-group {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 12px;
+      }
+      .pa-chart-bars {
+        display: flex;
+        align-items: flex-end;
+        gap: 8px;
+        height: 160px;
+      }
+      .pa-bar {
+        width: 64px;
+        border-radius: 6px 6px 0 0;
+      }
+      .pa-bar-v1 {
+        height: 60px;
+        background: rgba(255, 255, 255, 0.08);
+        border: 1px solid rgba(255, 255, 255, 0.06);
+      }
+      .pa-bar-v2 {
+        height: 150px;
+        background: linear-gradient(to top, #38bdf8, #818cf8);
+      }
+      .pa-chart-label {
+        font-size: 14px;
+        color: rgba(255, 255, 255, 0.4);
+        font-weight: 500;
+      }
+      .pa-chart-sublabel {
+        font-size: 13px;
+        font-weight: 600;
+      }
+      .pa-chart-sublabel.dim {
+        color: rgba(255, 255, 255, 0.25);
+      }
+      .pa-chart-sublabel.lit {
+        color: #38bdf8;
+      }
+
+      .pa-features {
+        display: flex;
+        gap: 32px;
+        margin-bottom: 56px;
+      }
+      .pa-feature {
+        display: flex;
+        align-items: flex-start;
+        gap: 14px;
+        flex: 1;
+      }
+      .pa-feature-icon {
+        width: 44px;
+        height: 44px;
+        border-radius: 10px;
+        background: rgba(56, 189, 248, 0.08);
+        border: 1px solid rgba(56, 189, 248, 0.12);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 20px;
+        flex-shrink: 0;
+        color: #38bdf8;
+      }
+      .pa-feature-text h3 {
+        font-size: 16px;
+        font-weight: 600;
+        color: #e2e8f0;
+        margin-bottom: 4px;
+      }
+      .pa-feature-text p {
+        font-size: 13px;
+        color: rgba(255, 255, 255, 0.35);
+        line-height: 1.5;
+      }
+
+      .pa-cta {
+        display: inline-flex;
+        align-items: center;
+        gap: 10px;
+        padding: 16px 40px;
+        background: linear-gradient(135deg, #38bdf8, #818cf8);
+        border-radius: 12px;
+        font-size: 18px;
+        font-weight: 700;
+        color: #fff;
+        border: none;
+        width: fit-content;
+        letter-spacing: -0.3px;
+      }
+
+      /* ── Panel B: Welcome to v2.0 ──────────────────────────── */
+      .panel-b-inner {
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(160deg, #0a0f1a 0%, #0c1220 50%, #0f1628 100%);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 80px 120px;
+        gap: 48px;
+        position: relative;
+        overflow: hidden;
+      }
+
+      .pb-confetti {
+        position: absolute;
+        inset: 0;
+        overflow: hidden;
+        pointer-events: none;
+      }
+      .pb-dot {
+        position: absolute;
+        border-radius: 50%;
+        opacity: 0.12;
+      }
+
+      .pb-badge {
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+        padding: 10px 24px;
+        background: rgba(52, 211, 153, 0.08);
+        border: 1px solid rgba(52, 211, 153, 0.2);
+        border-radius: 100px;
+        font-size: 15px;
+        font-weight: 600;
+        color: #34d399;
+        letter-spacing: 1px;
+      }
+
+      .pb-headline {
+        font-size: 80px;
+        font-weight: 800;
+        letter-spacing: -3px;
+        color: #f0f4f8;
+        text-align: center;
+      }
+
+      .pb-metrics {
+        display: flex;
+        gap: 48px;
+      }
+      .pb-metric {
+        text-align: center;
+        padding: 32px 48px;
+        background: rgba(255, 255, 255, 0.03);
+        border: 1px solid rgba(255, 255, 255, 0.06);
+        border-radius: 16px;
+        min-width: 220px;
+      }
+      .pb-metric-value {
+        font-size: 52px;
+        font-weight: 800;
+        letter-spacing: -2px;
+        margin-bottom: 8px;
+      }
+      .pb-metric-value.green {
+        color: #34d399;
+      }
+      .pb-metric-value.blue {
+        color: #38bdf8;
+      }
+      .pb-metric-value.purple {
+        color: #a78bfa;
+      }
+      .pb-metric-label {
+        font-size: 15px;
+        color: rgba(255, 255, 255, 0.4);
+        font-weight: 500;
+      }
+
+      .pb-cta {
+        display: inline-flex;
+        align-items: center;
+        gap: 10px;
+        padding: 16px 40px;
+        background: linear-gradient(135deg, #34d399, #38bdf8);
+        border-radius: 12px;
+        font-size: 18px;
+        font-weight: 700;
+        color: #fff;
+        border: none;
+        letter-spacing: -0.3px;
+      }
+
+      /* ── Error Overlay ─────────────────────────────────────── */
+      #error-overlay {
+        position: absolute;
+        inset: 0;
+        background: #06080d;
+        display: none;
+        align-items: center;
+        justify-content: center;
+        z-index: 100;
+        flex-direction: column;
+        gap: 16px;
+      }
+      #error-overlay.visible {
+        display: flex;
+      }
+      #error-overlay h2 {
+        font-size: 24px;
+        color: #f0f4f8;
+        font-weight: 600;
+      }
+      #error-overlay p {
+        font-size: 14px;
+        color: rgba(255, 255, 255, 0.5);
+        max-width: 480px;
+        text-align: center;
+        line-height: 1.6;
+      }
+      #error-overlay code {
+        background: rgba(255, 255, 255, 0.1);
+        padding: 2px 8px;
+        border-radius: 4px;
+        font-size: 13px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="glass-shatter"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="12"
+      data-root="true"
+    >
+      <!-- Capture canvas: Panel A -->
+      <canvas
+        id="cap-a"
+        layoutsubtree
+        width="1920"
+        height="1080"
+        style="
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1920px;
+          height: 1080px;
+          z-index: -1;
+          pointer-events: none;
+        "
+      >
+        <section class="panel" id="panel-a" data-panel-a style="width: 1920px; height: 1080px">
+          <div class="panel-a-inner">
+            <div class="pa-badge">
+              <span class="pa-badge-dot"></span>
+              Write HTML, Render Video
+            </div>
+
+            <h1 class="pa-headline">Everything you loved.<br /><em>Now 10x faster.</em></h1>
+
+            <div class="pa-chart">
+              <div class="pa-chart-group">
+                <div class="pa-chart-bars">
+                  <div class="pa-bar pa-bar-v1"></div>
+                  <div class="pa-bar pa-bar-v2"></div>
+                </div>
+                <div class="pa-chart-label">Render Speed</div>
+                <div style="display: flex; gap: 16px">
+                  <span class="pa-chart-sublabel dim">v1</span>
+                  <span class="pa-chart-sublabel lit">v2</span>
+                </div>
+              </div>
+              <div class="pa-chart-group">
+                <div class="pa-chart-bars">
+                  <div class="pa-bar pa-bar-v1" style="height: 90px"></div>
+                  <div class="pa-bar pa-bar-v2" style="height: 145px"></div>
+                </div>
+                <div class="pa-chart-label">Throughput</div>
+                <div style="display: flex; gap: 16px">
+                  <span class="pa-chart-sublabel dim">v1</span>
+                  <span class="pa-chart-sublabel lit">v2</span>
+                </div>
+              </div>
+              <div class="pa-chart-group">
+                <div class="pa-chart-bars">
+                  <div class="pa-bar pa-bar-v1" style="height: 110px"></div>
+                  <div class="pa-bar pa-bar-v2" style="height: 155px"></div>
+                </div>
+                <div class="pa-chart-label">Reliability</div>
+                <div style="display: flex; gap: 16px">
+                  <span class="pa-chart-sublabel dim">v1</span>
+                  <span class="pa-chart-sublabel lit">v2</span>
+                </div>
+              </div>
+            </div>
+
+            <div class="pa-features">
+              <div class="pa-feature">
+                <div class="pa-feature-icon">&#9889;</div>
+                <div class="pa-feature-text">
+                  <h3>Instant Deploys</h3>
+                  <p>Zero-downtime rollouts in under 3 seconds globally.</p>
+                </div>
+              </div>
+              <div class="pa-feature">
+                <div class="pa-feature-icon">&#128274;</div>
+                <div class="pa-feature-text">
+                  <h3>End-to-End Encryption</h3>
+                  <p>AES-256 at rest, TLS 1.3 in transit. SOC2 certified.</p>
+                </div>
+              </div>
+              <div class="pa-feature">
+                <div class="pa-feature-icon">&#128200;</div>
+                <div class="pa-feature-text">
+                  <h3>Real-time Analytics</h3>
+                  <p>Sub-second queries across billions of events.</p>
+                </div>
+              </div>
+            </div>
+
+            <button class="pa-cta">Start Creating &rarr;</button>
+          </div>
+        </section>
+      </canvas>
+
+      <!-- Capture canvas: Panel B -->
+      <canvas
+        id="cap-b"
+        layoutsubtree
+        width="1920"
+        height="1080"
+        style="
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1920px;
+          height: 1080px;
+          z-index: -1;
+          pointer-events: none;
+        "
+      >
+        <section class="panel" id="panel-b" data-panel-b style="width: 1920px; height: 1080px">
+          <div class="panel-b-inner">
+            <div class="pb-confetti" id="confetti-container"></div>
+
+            <div class="pb-badge">&#10003; Powered by HyperFrames</div>
+
+            <h1 class="pb-headline">HTML is Video</h1>
+
+            <div class="pb-metrics">
+              <div class="pb-metric">
+                <div class="pb-metric-value green">10x</div>
+                <div class="pb-metric-label">Render Speed</div>
+              </div>
+              <div class="pb-metric">
+                <div class="pb-metric-value blue">50%</div>
+                <div class="pb-metric-label">File Size</div>
+              </div>
+              <div class="pb-metric">
+                <div class="pb-metric-value purple">99.99%</div>
+                <div class="pb-metric-label">Reliability</div>
+              </div>
+            </div>
+
+            <button class="pb-cta">View Catalog &rarr;</button>
+          </div>
+        </section>
+      </canvas>
+
+      <!-- Three.js render target -->
+      <canvas id="scene-canvas" width="1920" height="1080"></canvas>
+
+      <!-- Error overlay -->
+      <div id="error-overlay">
+        <h2>HTML-in-Canvas Required</h2>
+        <p>
+          This composition requires the experimental CanvasDrawElement API. Enable it in Chrome or
+          Brave:
+        </p>
+        <p><code>chrome://flags/#canvas-draw-element</code></p>
+      </div>
+
+      <!-- Driver clip -->
+      <div
+        id="driver"
+        class="clip"
+        data-start="0"
+        data-duration="12"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+
+    <script>
+      var W = 1920,
+        H = 1080;
+      var DURATION = 12;
+      var SHARD_COUNT = 200;
+      var CRACK_START = 2.0;
+      var CRACK_END = 4.0;
+      var SHATTER_START = 4.0;
+      var SHATTER_SETTLE = 10.0;
+
+      // ── Feature Detection ──────────────────────────────────────────────
+      function isSupported() {
+        if (!("layoutSubtree" in document.createElement("canvas"))) return false;
+        var tc = document.createElement("canvas");
+        tc.setAttribute("layoutsubtree", "");
+        var ctx = tc.getContext("2d");
+        return ctx && typeof ctx.drawElementImage === "function";
+      }
+
+      if (!isSupported()) {
+        document.getElementById("error-overlay").classList.add("visible");
+      }
+
+      // ── Seeded PRNG (mulberry32, seed 42) ──────────────────────────────
+      function mulberry32(seed) {
+        return function () {
+          seed |= 0;
+          seed = (seed + 0x6d2b79f5) | 0;
+          var t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
+          t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+          return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+        };
+      }
+      var rng = mulberry32(42);
+
+      // ── Generate confetti dots for Panel B ─────────────────────────────
+      var confettiEl = document.getElementById("confetti-container");
+      if (confettiEl) {
+        var dotColors = ["#34d399", "#38bdf8", "#a78bfa", "#f472b6", "#fbbf24"];
+        for (var d = 0; d < 60; d++) {
+          var dot = document.createElement("div");
+          dot.className = "pb-dot";
+          var sz = 4 + rng() * 12;
+          dot.style.width = sz + "px";
+          dot.style.height = sz + "px";
+          dot.style.left = rng() * 100 + "%";
+          dot.style.top = rng() * 100 + "%";
+          dot.style.background = dotColors[Math.floor(rng() * dotColors.length)];
+          dot.style.opacity = (0.06 + rng() * 0.12).toFixed(3);
+          confettiEl.appendChild(dot);
+        }
+      }
+
+      // ── Parse capture canvases ─────────────────────────────────────────
+      var capA = document.getElementById("cap-a");
+      var capB = document.getElementById("cap-b");
+      var ctxA = capA.getContext("2d");
+      var ctxB = capB.getContext("2d");
+      var panelA = document.getElementById("panel-a");
+      var panelB = document.getElementById("panel-b");
+
+      function capturePanels() {
+        ctxA.clearRect(0, 0, W, H);
+        ctxA.drawElementImage(panelA, 0, 0, W, H);
+        ctxB.clearRect(0, 0, W, H);
+        ctxB.drawElementImage(panelB, 0, 0, W, H);
+      }
+
+      // ── Voronoi Shard Generation ───────────────────────────────────────
+      // Generate ~200 seed points, compute Voronoi via brute force,
+      // triangulate each cell, extract per-shard geometry + UVs.
+
+      // Normalized coordinates: x in [0, aspectRatio], y in [0, 1]
+      var aspect = W / H;
+
+      // Generate seed points with weighted density toward center
+      var seeds = [];
+      for (var s = 0; s < SHARD_COUNT; s++) {
+        var sx, sy;
+        // 40% of points biased toward center for denser cracking there
+        if (s < SHARD_COUNT * 0.4) {
+          var angle = rng() * Math.PI * 2;
+          var radius = rng() * 0.35;
+          sx = 0.5 * aspect + Math.cos(angle) * radius * aspect;
+          sy = 0.5 + Math.sin(angle) * radius;
+        } else {
+          sx = rng() * aspect;
+          sy = rng();
+        }
+        seeds.push({ x: sx, y: sy });
+      }
+
+      // For each seed, compute a convex polygon via intersection of half-planes
+      // (simplified: sample angles around seed, find nearest boundary)
+      function computeShardPolygons(seeds) {
+        var shards = [];
+        var ANGLES = 32;
+
+        for (var i = 0; i < seeds.length; i++) {
+          var cx = seeds[i].x;
+          var cy = seeds[i].y;
+          var verts = [];
+
+          for (var a = 0; a < ANGLES; a++) {
+            var theta = (a / ANGLES) * Math.PI * 2;
+            var dx = Math.cos(theta);
+            var dy = Math.sin(theta);
+
+            // Find closest bisector intersection along this ray
+            var minT = 999;
+
+            for (var j = 0; j < seeds.length; j++) {
+              if (j === i) continue;
+              // Midpoint between seeds i and j
+              var mx = (cx + seeds[j].x) * 0.5;
+              var my = (cy + seeds[j].y) * 0.5;
+              // Normal of bisector: direction from i to j
+              var nx = seeds[j].x - cx;
+              var ny = seeds[j].y - cy;
+              // Ray-plane intersection: t = dot(m - c, n) / dot(d, n)
+              var denom = dx * nx + dy * ny;
+              if (denom <= 0.0001) continue;
+              var t = ((mx - cx) * nx + (my - cy) * ny) / denom;
+              if (t > 0.001 && t < minT) minT = t;
+            }
+
+            // Clamp to bounding box
+            if (dx > 0) {
+              var tb = (aspect - cx) / dx;
+              if (tb > 0 && tb < minT) minT = tb;
+            }
+            if (dx < 0) {
+              var tb2 = -cx / dx;
+              if (tb2 > 0 && tb2 < minT) minT = tb2;
+            }
+            if (dy > 0) {
+              var tb3 = (1 - cy) / dy;
+              if (tb3 > 0 && tb3 < minT) minT = tb3;
+            }
+            if (dy < 0) {
+              var tb4 = -cy / dy;
+              if (tb4 > 0 && tb4 < minT) minT = tb4;
+            }
+
+            if (minT < 998) {
+              verts.push({
+                x: cx + dx * minT,
+                y: cy + dy * minT,
+              });
+            }
+          }
+
+          if (verts.length < 3) continue;
+
+          // Sort vertices by angle from centroid
+          var centX = 0,
+            centY = 0;
+          for (var v = 0; v < verts.length; v++) {
+            centX += verts[v].x;
+            centY += verts[v].y;
+          }
+          centX /= verts.length;
+          centY /= verts.length;
+
+          verts.sort(function (a, b) {
+            return Math.atan2(a.y - centY, a.x - centX) - Math.atan2(b.y - centY, b.x - centX);
+          });
+
+          // Fan triangulation from centroid
+          var triangles = [];
+          for (var v2 = 0; v2 < verts.length; v2++) {
+            var next = (v2 + 1) % verts.length;
+            triangles.push([{ x: centX, y: centY }, verts[v2], verts[next]]);
+          }
+
+          shards.push({
+            seedX: cx,
+            seedY: cy,
+            centroidX: centX,
+            centroidY: centY,
+            triangles: triangles,
+            verts: verts,
+          });
+        }
+
+        return shards;
+      }
+
+      var shardData = computeShardPolygons(seeds);
+
+      // ── Three.js Scene ─────────────────────────────────────────────────
+      var sceneCanvas = document.getElementById("scene-canvas");
+      var renderer = new THREE.WebGLRenderer({
+        canvas: sceneCanvas,
+        antialias: true,
+        alpha: false,
+        preserveDrawingBuffer: true,
+        powerPreference: "high-performance",
+      });
+      renderer.setSize(W, H, false);
+      renderer.setPixelRatio(1);
+      renderer.toneMapping = THREE.NoToneMapping;
+      renderer.setClearColor(0x06080d, 1);
+
+      var scene = new THREE.Scene();
+      var camera = new THREE.OrthographicCamera(-aspect * 0.5, aspect * 0.5, 0.5, -0.5, 0.1, 100);
+      camera.position.z = 10;
+
+      // ── Textures from capture canvases ─────────────────────────────────
+      var texA = new THREE.CanvasTexture(capA);
+      texA.minFilter = THREE.LinearFilter;
+      texA.magFilter = THREE.LinearFilter;
+      texA.generateMipmaps = false;
+
+      var texB = new THREE.CanvasTexture(capB);
+      texB.minFilter = THREE.LinearFilter;
+      texB.magFilter = THREE.LinearFilter;
+      texB.generateMipmaps = false;
+
+      // ── Phase 1 & 2: Full plane with panel A + crack shader ────────────
+      var crackShaderMaterial = new THREE.ShaderMaterial({
+        uniforms: {
+          tPanel: { value: texA },
+          uCrackProgress: { value: 0.0 },
+          uAspect: { value: aspect },
+          uTime: { value: 0.0 },
+        },
+        vertexShader: [
+          "varying vec2 vUv;",
+          "void main() {",
+          "  vUv = uv;",
+          "  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);",
+          "}",
+        ].join("\n"),
+        fragmentShader: [
+          "uniform sampler2D tPanel;",
+          "uniform float uCrackProgress;",
+          "uniform float uAspect;",
+          "uniform float uTime;",
+          "varying vec2 vUv;",
+          "",
+          "// Hash functions for Voronoi",
+          "vec2 hash22(vec2 p) {",
+          "  p = vec2(dot(p, vec2(127.1, 311.7)), dot(p, vec2(269.5, 183.3)));",
+          "  return fract(sin(p) * 43758.5453);",
+          "}",
+          "",
+          "// Voronoi distance for crack pattern",
+          "float voronoi(vec2 p) {",
+          "  vec2 ip = floor(p);",
+          "  vec2 fp = fract(p);",
+          "  float d1 = 8.0;",
+          "  float d2 = 8.0;",
+          "  for (int x = -1; x <= 1; x++) {",
+          "    for (int y = -1; y <= 1; y++) {",
+          "      vec2 neighbor = vec2(float(x), float(y));",
+          "      vec2 point = hash22(ip + neighbor);",
+          "      vec2 diff = neighbor + point - fp;",
+          "      float dist = length(diff);",
+          "      if (dist < d1) {",
+          "        d2 = d1;",
+          "        d1 = dist;",
+          "      } else if (dist < d2) {",
+          "        d2 = dist;",
+          "      }",
+          "    }",
+          "  }",
+          "  return d2 - d1;",
+          "}",
+          "",
+          "void main() {",
+          "  vec4 color = texture2D(tPanel, vUv);",
+          "  ",
+          "  if (uCrackProgress <= 0.0) {",
+          "    gl_FragColor = color;",
+          "    return;",
+          "  }",
+          "  ",
+          "  // Distance from center (in UV space, aspect-corrected)",
+          "  vec2 center = vec2(0.5, 0.5);",
+          "  vec2 uv_aspect = vec2((vUv.x - 0.5) * uAspect, vUv.y - 0.5);",
+          "  float distFromCenter = length(uv_aspect);",
+          "  ",
+          "  // Crack wavefront: radiates outward based on progress",
+          "  float maxRadius = length(vec2(uAspect * 0.5, 0.5));",
+          "  float wavefront = uCrackProgress * maxRadius * 1.4;",
+          "  ",
+          "  if (distFromCenter > wavefront) {",
+          "    gl_FragColor = color;",
+          "    return;",
+          "  }",
+          "  ",
+          "  // Multi-scale Voronoi for cracks",
+          "  vec2 crackUV = vUv * vec2(uAspect, 1.0);",
+          "  float v1 = voronoi(crackUV * 8.0);",
+          "  float v2 = voronoi(crackUV * 16.0);",
+          "  float v3 = voronoi(crackUV * 4.0);",
+          "  ",
+          "  // Blend scales based on distance from center",
+          "  float normalizedDist = distFromCenter / maxRadius;",
+          "  float crackPattern = mix(v1, v2, smoothstep(0.0, 0.5, normalizedDist));",
+          "  crackPattern = mix(crackPattern, v3, smoothstep(0.3, 0.8, normalizedDist) * 0.4);",
+          "  ",
+          "  // Crack intensity: thinner = more crack-like",
+          "  float crackWidth = 0.04 + uCrackProgress * 0.02;",
+          "  float crack = smoothstep(crackWidth, 0.0, crackPattern);",
+          "  ",
+          "  // Fade in based on wavefront proximity",
+          "  float waveFade = smoothstep(wavefront, wavefront * 0.6, distFromCenter);",
+          "  crack *= waveFade;",
+          "  ",
+          "  // Impact point glow",
+          "  float impactGlow = exp(-distFromCenter * 6.0) * uCrackProgress * 0.6;",
+          "  ",
+          "  // Refraction distortion along cracks",
+          "  vec2 distortUV = vUv;",
+          "  if (crack > 0.1) {",
+          "    vec2 offset = (hash22(floor(crackUV * 8.0)) - 0.5) * 0.008 * crack;",
+          "    distortUV += offset;",
+          "  }",
+          "  vec4 distortedColor = texture2D(tPanel, distortUV);",
+          "  ",
+          "  // Composite: panel + bright crack lines + refraction",
+          "  vec3 crackColor = vec3(0.85, 0.92, 1.0);",
+          "  vec3 result = mix(distortedColor.rgb, crackColor, crack * 0.7);",
+          "  result += vec3(impactGlow * 0.3, impactGlow * 0.4, impactGlow * 0.6);",
+          "  ",
+          "  // Glass surface highlight along cracks",
+          "  float highlight = crack * 0.15 * (1.0 - normalizedDist);",
+          "  result += vec3(highlight);",
+          "  ",
+          "  gl_FragColor = vec4(result, 1.0);",
+          "}",
+        ].join("\n"),
+        transparent: false,
+      });
+
+      var fullPlane = new THREE.Mesh(new THREE.PlaneGeometry(aspect, 1), crackShaderMaterial);
+      fullPlane.position.set(0, 0, 0);
+      scene.add(fullPlane);
+
+      // ── Panel B: static plane behind shards ────────────────────────────
+      var panelBMesh = new THREE.Mesh(
+        new THREE.PlaneGeometry(aspect, 1),
+        new THREE.MeshBasicMaterial({ map: texB, side: THREE.FrontSide }),
+      );
+      panelBMesh.position.set(0, 0, -0.5);
+      panelBMesh.visible = false;
+      scene.add(panelBMesh);
+
+      // ── Phase 3: Shard meshes ──────────────────────────────────────────
+      // Each shard is a THREE.Mesh with its own geometry from the Voronoi subdivision.
+      // UV mapping samples the correct region of panel A's texture.
+
+      var shardMeshes = [];
+      var shardPhysics = [];
+
+      for (var si = 0; si < shardData.length; si++) {
+        var sd = shardData[si];
+        var tris = sd.triangles;
+
+        // Build merged geometry for all triangles in this shard
+        var positions = [];
+        var uvs = [];
+
+        for (var ti = 0; ti < tris.length; ti++) {
+          var tri = tris[ti];
+          for (var vi = 0; vi < 3; vi++) {
+            // Convert from Voronoi space (x in [0,aspect], y in [0,1]) to mesh space
+            var px = tri[vi].x - aspect * 0.5;
+            var py = -(tri[vi].y - 0.5); // flip Y for Three.js
+            positions.push(px, py, 0);
+
+            // UV: map from Voronoi space to [0,1]
+            var u = tri[vi].x / aspect;
+            var v = 1.0 - tri[vi].y; // flip V
+            uvs.push(u, v);
+          }
+        }
+
+        if (positions.length < 9) continue;
+
+        var geo = new THREE.BufferGeometry();
+        geo.setAttribute("position", new THREE.Float32BufferAttribute(positions, 3));
+        geo.setAttribute("uv", new THREE.Float32BufferAttribute(uvs, 2));
+
+        var mat = new THREE.MeshBasicMaterial({
+          map: texA,
+          side: THREE.DoubleSide,
+          transparent: true,
+          opacity: 1.0,
+        });
+
+        var mesh = new THREE.Mesh(geo, mat);
+        mesh.visible = false;
+        scene.add(mesh);
+        shardMeshes.push(mesh);
+
+        // Physics state for this shard
+        // Direction outward from center + random upward kick
+        var fromCenterX = sd.centroidX - aspect * 0.5;
+        var fromCenterY = sd.centroidY - 0.5;
+        var fromCenterLen =
+          Math.sqrt(fromCenterX * fromCenterX + fromCenterY * fromCenterY) + 0.001;
+        var outDirX = fromCenterX / fromCenterLen;
+        var outDirY = fromCenterY / fromCenterLen;
+
+        // Initial velocity: outward + upward component + randomness
+        var speed = 0.3 + rng() * 0.7;
+        var upKick = 0.2 + rng() * 0.5;
+
+        shardPhysics.push({
+          // Centroid in mesh-space for pivot
+          cx: sd.centroidX - aspect * 0.5,
+          cy: -(sd.centroidY - 0.5),
+          // Velocity
+          vx: outDirX * speed * (0.5 + rng() * 0.8),
+          vy: -outDirY * speed * (0.3 + rng() * 0.6) + upKick,
+          vz: (rng() - 0.5) * 0.3,
+          // Angular velocity
+          rx: (rng() - 0.5) * 4.0,
+          ry: (rng() - 0.5) * 4.0,
+          rz: (rng() - 0.5) * 6.0,
+          // Current state (written by physics step)
+          posX: 0,
+          posY: 0,
+          posZ: 0,
+          rotX: 0,
+          rotY: 0,
+          rotZ: 0,
+          opacity: 1.0,
+          settled: false,
+        });
+      }
+
+      // ── Physics Update ─────────────────────────────────────────────────
+      var GRAVITY = -2.5;
+      var FLOOR_Y = -0.8;
+      var DAMPING = 0.6;
+      var FRICTION = 0.92;
+
+      function updateShardPhysics(t) {
+        // t is time since shatter start (0 at SHATTER_START)
+        var dt = 1 / 30; // fixed step for determinism
+        var steps = Math.floor(t / dt);
+
+        for (var i = 0; i < shardPhysics.length; i++) {
+          var sp = shardPhysics[i];
+
+          // Reset and simulate from zero for determinism
+          var px = 0,
+            py = 0,
+            pz = 0;
+          var rx = 0,
+            ry = 0,
+            rz = 0;
+          var vx = sp.vx,
+            vy = sp.vy,
+            vz = sp.vz;
+          var avx = sp.rx,
+            avy = sp.ry,
+            avz = sp.rz;
+          var settled = false;
+
+          for (var step = 0; step < steps && !settled; step++) {
+            // Apply gravity
+            vy += GRAVITY * dt;
+
+            // Update position
+            px += vx * dt;
+            py += vy * dt;
+            pz += vz * dt;
+
+            // Update rotation
+            rx += avx * dt;
+            ry += avy * dt;
+            rz += avz * dt;
+
+            // Floor collision (relative to shard centroid)
+            var worldY = sp.cy + py;
+            if (worldY < FLOOR_Y && vy < 0) {
+              py = FLOOR_Y - sp.cy;
+              vy = -vy * DAMPING;
+              vx *= FRICTION;
+              vz *= FRICTION;
+              avx *= FRICTION;
+              avy *= FRICTION;
+              avz *= FRICTION;
+
+              // Settle if velocity is very small
+              if (Math.abs(vy) < 0.05) {
+                vy = 0;
+                settled = true;
+              }
+            }
+          }
+
+          sp.posX = px;
+          sp.posY = py;
+          sp.posZ = pz;
+          sp.rotX = rx;
+          sp.rotY = ry;
+          sp.rotZ = rz;
+          sp.settled = settled;
+
+          // Fade out shards at the very end
+          var fadeDuration = DURATION - SHATTER_SETTLE;
+          var elapsed = t + SHATTER_START;
+          if (elapsed > SHATTER_SETTLE) {
+            sp.opacity = Math.max(0, 1.0 - (elapsed - SHATTER_SETTLE) / fadeDuration);
+          } else {
+            sp.opacity = 1.0;
+          }
+        }
+      }
+
+      // ── Render State ───────────────────────────────────────────────────
+      var renderState = {
+        phase: 0, // 0=clean, 1=cracking, 2=shattered
+        crackProgress: 0,
+        shardsVisible: false,
+        panelBOpacity: 0,
+      };
+
+      function renderFrame(time) {
+        // Phase determination
+        if (time < CRACK_START) {
+          renderState.phase = 0;
+        } else if (time < SHATTER_START) {
+          renderState.phase = 1;
+        } else {
+          renderState.phase = 2;
+        }
+
+        // Capture HTML panels to texture each frame
+        capturePanels();
+        texA.needsUpdate = true;
+        texB.needsUpdate = true;
+
+        if (renderState.phase === 0) {
+          // Clean glass: show full plane, no cracks
+          fullPlane.visible = true;
+          crackShaderMaterial.uniforms.uCrackProgress.value = 0;
+          crackShaderMaterial.uniforms.uTime.value = time;
+          panelBMesh.visible = false;
+
+          // Hide all shards
+          for (var i = 0; i < shardMeshes.length; i++) {
+            shardMeshes[i].visible = false;
+          }
+        } else if (renderState.phase === 1) {
+          // Cracking: show full plane with crack shader
+          fullPlane.visible = true;
+          var crackT = (time - CRACK_START) / (CRACK_END - CRACK_START);
+          crackT = Math.max(0, Math.min(1, crackT));
+          // Ease in: slow start, accelerating
+          crackT = crackT * crackT;
+          crackShaderMaterial.uniforms.uCrackProgress.value = crackT;
+          crackShaderMaterial.uniforms.uTime.value = time;
+          panelBMesh.visible = false;
+
+          for (var i2 = 0; i2 < shardMeshes.length; i2++) {
+            shardMeshes[i2].visible = false;
+          }
+        } else {
+          // Shattered: hide full plane, show shards + panel B
+          fullPlane.visible = false;
+          panelBMesh.visible = true;
+
+          // Panel B fade-in
+          var panelBFadeT = Math.min(1, (time - SHATTER_START) / 1.5);
+          panelBFadeT = panelBFadeT * panelBFadeT * (3 - 2 * panelBFadeT); // smoothstep
+          panelBMesh.material.opacity = panelBFadeT;
+          panelBMesh.material.transparent = true;
+
+          // Update shard physics
+          var shatterTime = time - SHATTER_START;
+          updateShardPhysics(shatterTime);
+
+          // Apply physics to shard meshes
+          for (var i3 = 0; i3 < shardMeshes.length; i3++) {
+            var sm = shardMeshes[i3];
+            var sp = shardPhysics[i3];
+
+            sm.visible = true;
+
+            // Set position: centroid + physics offset
+            sm.position.set(sp.posX, sp.posY, sp.posZ + 0.01);
+            sm.rotation.set(sp.rotX, sp.rotY, sp.rotZ);
+
+            // Set pivot point to centroid
+            sm.position.x +=
+              sp.cx * (1 - Math.cos(sp.rotZ)) + sp.cy * Math.sin(sp.rotZ) - sp.cx + sp.posX;
+            sm.position.y +=
+              -sp.cx * Math.sin(sp.rotZ) + sp.cy * (1 - Math.cos(sp.rotZ)) - sp.cy + sp.posY;
+
+            // Simpler: just translate by physics offset, rotate around centroid
+            sm.position.set(sp.posX, sp.posY, sp.posZ + 0.01);
+            sm.rotation.set(sp.rotX, sp.rotY, sp.rotZ);
+
+            sm.material.opacity = sp.opacity;
+            sm.material.transparent = sp.opacity < 1.0;
+          }
+        }
+
+        renderer.render(scene, camera);
+      }
+
+      // ── GSAP Timeline ──────────────────────────────────────────────────
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+
+      // Driver tween: spans full duration, renders each frame via onUpdate
+      var timeProxy = { t: 0 };
+      tl.to(
+        timeProxy,
+        {
+          t: DURATION,
+          duration: DURATION,
+          ease: "none",
+          onUpdate: function () {
+            renderFrame(timeProxy.t);
+          },
+        },
+        0,
+      );
+
+      window.__timelines["glass-shatter"] = tl;
+
+      // ── Deferred Init ──────────────────────────────────────────────────
+      setTimeout(function () {
+        capturePanels();
+        texA.needsUpdate = true;
+        texB.needsUpdate = true;
+        tl.seek(0);
+      }, 0);
+    </script>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="vfx-shatter" data-composition-src="compositions/vfx-shatter.html" data-start="0" data-duration="12" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/vfx-text-cursor.mdx b/docs/catalog/blocks/vfx-text-cursor.mdx
index 6d1c8a2b85..ea034ee10b 100644
--- a/docs/catalog/blocks/vfx-text-cursor.mdx
+++ b/docs/catalog/blocks/vfx-text-cursor.mdx
@@ -3,40 +3,893 @@ title: "VFX Text Cursor"
 description: "Dramatic text reveal with cursor glow, chromatic shadow rays, and directional lighting on a black stage. Canvas-based shader post-processing with spectral color edges."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-text-cursor.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-text-cursor.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/vfx-text-cursor.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="VFX Text Cursor preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add vfx-text-cursor
-```
+<InstallCommand command="npx hyperframes add vfx-text-cursor" />
 
 That writes one file: `compositions/vfx-text-cursor.html`.
 
-<Warning>
+<Danger>
   Live preview needs the `chrome://flags/#canvas-draw-element` flag switched on.
-  Rendering from the CLI switches it on for you. [How it
-  works](/guides/html-in-canvas)
-</Warning>
-
-## Add it to your video
-
-It runs for 8 seconds at 1920×1080. Paste this into your composition:
-
-```html index.html
-<div
-  data-composition-id="vfx-text-cursor"
-  data-composition-src="compositions/vfx-text-cursor.html"
-  data-start="0"
-  data-duration="8"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+  Without it this item's screen renders black. Rendering from the CLI switches
+  it on for you. [How it works](/guides/html-in-canvas)
+</Danger>
+
+## Source
+
+<Accordion title={`vfx-text-cursor.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>VFX Text Cursor</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  </head>
+  <body style="margin: 0; overflow: hidden">
+    <div
+      id="vfx-text-cursor"
+      data-composition-id="vfx-text-cursor"
+      data-start="0"
+      data-duration="8"
+      data-width="1920"
+      data-height="1080"
+      data-root="true"
+    >
+      <canvas id="vfx-canvas" width="1920" height="1080" aria-hidden="true"></canvas>
+      <div class="stage-logo-wrap" aria-hidden="true">
+        <svg
+          class="stage-logo"
+          width="263"
+          height="79"
+          viewBox="0 0 263 79"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M0 16.6738H4.96V23.3838H11.53V16.6738H16.49V35.4538H11.53V27.6738H4.96V35.4538H0V16.6738Z"
+            fill="white"
+          />
+          <path
+            d="M17.8899 28.0137C17.8899 23.4237 21.2399 20.0237 25.7999 20.0237C30.0099 20.0237 32.9399 23.0837 32.9399 27.5637C32.9399 28.2037 32.8599 28.8237 32.8299 29.3337H22.6099C23.0399 31.1337 24.6199 32.1237 27.1399 32.1237C28.7199 32.1237 30.2199 31.7237 31.2999 31.0237V34.6737C30.1699 35.3937 28.2999 35.8537 26.3599 35.8537C21.2599 35.8537 17.8799 32.6037 17.8799 28.0237L17.8899 28.0137ZM28.5699 26.1937C28.4899 24.5337 27.3899 23.5637 25.7499 23.5637C24.1099 23.5637 22.9599 24.5337 22.6099 26.1937H28.5699Z"
+            fill="white"
+          />
+          <path
+            d="M37.85 33.8638L32 20.4238H37.29L40.46 28.1538L43.6 20.4238H48.48L40.33 39.5738H35.26L37.86 33.8638H37.85Z"
+            fill="white"
+          />
+          <path
+            d="M48.1797 26.1138C48.1797 20.4238 52.7097 16.2438 58.9397 16.2438C61.2997 16.2438 63.5297 16.8038 64.8197 17.7238V21.9338C63.5597 20.9138 61.6797 20.2938 59.7497 20.2938C55.7797 20.2938 53.2597 22.6238 53.2597 26.1438C53.2597 29.6638 55.5697 31.8838 58.8897 31.8838C59.6397 31.8838 60.4997 31.7538 61.1997 31.5038V27.8838H57.4697V24.2338H65.5197V33.7038C63.6697 35.0938 61.1997 35.8738 58.5997 35.8738C52.5397 35.8738 48.1897 31.7438 48.1897 26.1138H48.1797Z"
+            fill="white"
+          />
+          <path
+            d="M66.6604 28.0137C66.6604 23.4237 70.0104 20.0237 74.5704 20.0237C78.7804 20.0237 81.7104 23.0837 81.7104 27.5637C81.7104 28.2037 81.6304 28.8237 81.6004 29.3337H71.3804C71.8104 31.1337 73.3904 32.1237 75.9104 32.1237C77.4904 32.1237 78.9904 31.7237 80.0704 31.0237V34.6737C78.9404 35.3937 77.0704 35.8537 75.1304 35.8537C70.0304 35.8537 66.6504 32.6037 66.6504 28.0237L66.6604 28.0137ZM77.3404 26.1937C77.2604 24.5337 76.1604 23.5637 74.5204 23.5637C72.8804 23.5637 71.7304 24.5337 71.3804 26.1937H77.3404Z"
+            fill="white"
+          />
+          <path
+            d="M82.9697 20.4238H87.8497V22.4138C88.7597 20.9638 90.3497 20.1038 92.3297 20.1038C95.4997 20.1038 97.3997 22.3338 97.3997 25.8138V35.4438H92.5197V26.8638C92.5197 25.0438 91.8197 24.1838 90.4797 24.1838C88.9497 24.1838 87.8497 25.3638 87.8497 27.2638V35.4438H82.9697V20.4238Z"
+            fill="white"
+          />
+          <path
+            d="M195.219 26.1937L213.529 38.9937C216.009 40.7237 220.239 38.7637 221.009 35.5337L228.419 4.33374C229.189 1.10374 225.879 -0.856262 222.589 0.873738L198.199 13.6737C192.649 16.5837 191.059 23.2837 195.219 26.1937Z"
+            fill="url(#paint0_linear_2204_3044)"
+          />
+          <path
+            d="M256.97 25.9638L232.58 38.7638C229.28 40.4938 225.98 38.5338 226.75 35.3038L234.16 4.10376C234.93 0.873757 239.16 -1.08624 241.64 0.643757L259.95 13.4438C264.12 16.3538 262.52 23.0538 256.97 25.9638Z"
+            fill="url(#paint1_linear_2204_3044)"
+          />
+          <path
+            d="M252.115 72.502C250.192 72.502 248.268 72.0838 246.93 71.3728V65.6853C247.808 66.3126 248.937 66.689 250.066 66.689C251.739 66.689 252.784 65.8526 252.784 64.5562C252.784 63.8452 252.492 63.0925 251.655 62.0888L249.899 59.956C248.728 58.4923 248.226 56.9031 248.226 55.2721C248.226 51.0065 251.864 48.0791 256.883 48.0791C258.723 48.0791 260.438 48.4555 261.65 49.0828V54.7703C260.898 54.2266 259.768 53.8503 258.723 53.8503C257.092 53.8503 256.046 54.6867 256.046 55.8994C256.046 56.6522 256.423 57.405 257.259 58.4086L258.974 60.4996C260.187 62.047 260.73 63.5943 260.73 65.2671C260.73 69.5746 257.05 72.502 252.115 72.502Z"
+            fill="white"
+          />
+          <path
+            d="M236.338 72.6269C228.392 72.6269 223.123 67.5667 223.123 60.4155C223.123 53.2643 228.351 47.9531 235.46 47.9531C242.026 47.9531 246.584 52.7206 246.584 59.7045C246.584 60.7082 246.459 61.6701 246.417 62.4647H230.483C231.152 65.2666 233.62 66.8139 237.551 66.8139C240.018 66.8139 242.36 66.1866 244.033 65.0993V70.7868C242.277 71.916 239.349 72.6269 236.338 72.6269ZM230.483 57.5717H239.767C239.642 54.9789 237.927 53.4734 235.376 53.4734C232.867 53.4734 231.027 54.9789 230.483 57.5717Z"
+            fill="white"
+          />
+          <path
+            d="M184.998 72.0001V48.5809H192.609V51.6756C193.989 49.4173 196.373 48.0791 199.426 48.0791C202.521 48.0791 204.779 49.5428 206.075 52.052C207.497 49.5846 210.132 48.0791 213.352 48.0791C218.245 48.0791 221.214 51.592 221.214 57.0286V72.0001H213.603V58.5341C213.603 55.774 212.557 54.4357 210.634 54.4357C208.459 54.4357 206.912 56.234 206.912 59.0778V72.0001H199.3V58.5341C199.3 55.774 198.255 54.4357 196.373 54.4357C194.157 54.4357 192.609 56.234 192.609 59.0778V72.0001H184.998Z"
+            fill="white"
+          />
+          <path
+            d="M167.26 72.4602C161.154 72.4602 156.596 67.2745 156.596 60.3324C156.596 53.3066 161.196 48.0791 167.302 48.0791C170.438 48.0791 173.031 49.4173 174.536 51.8429V48.5809H182.148V72.0001H174.536V68.4873C173.031 71.0801 170.438 72.4602 167.26 72.4602ZM169.393 66.1872C172.78 66.1872 174.536 63.3434 174.536 60.876V59.6632C174.536 57.2377 172.78 54.4357 169.393 54.4357C166.298 54.4357 164.207 56.7777 164.207 60.2905C164.207 63.7616 166.298 66.1872 169.393 66.1872Z"
+            fill="white"
+          />
+          <path
+            d="M141.258 72V48.5808H148.827V52.9719C149.831 50.0445 151.796 48.2881 154.306 48.2881C154.975 48.2881 155.602 48.4135 156.02 48.6645V55.8993C155.435 55.5648 154.724 55.4393 153.887 55.4393C150.751 55.4393 148.869 57.6558 148.869 61.2941V72H141.258Z"
+            fill="white"
+          />
+          <path
+            d="M122.643 71.9996V42.7256H139.371V49.124H130.379V54.477H138.911V60.5827H130.379V71.9996H122.643Z"
+            fill="white"
+          />
+          <path
+            d="M105.645 72V48.5808H113.214V52.9719C114.218 50.0445 116.183 48.2881 118.692 48.2881C119.361 48.2881 119.989 48.4135 120.407 48.6645V55.8993C119.822 55.5648 119.111 55.4393 118.274 55.4393C115.138 55.4393 113.256 57.6558 113.256 61.2941V72H105.645Z"
+            fill="white"
+          />
+          <path
+            d="M93.4397 72.6269C85.4939 72.6269 80.2246 67.5667 80.2246 60.4155C80.2246 53.2643 85.4521 47.9531 92.5615 47.9531C99.1273 47.9531 103.686 52.7206 103.686 59.7045C103.686 60.7082 103.56 61.6701 103.518 62.4647H87.5849C88.2541 65.2666 90.7214 66.8139 94.6525 66.8139C97.1199 66.8139 99.4618 66.1866 101.135 65.0993V70.7868C99.3782 71.916 96.4508 72.6269 93.4397 72.6269ZM87.5849 57.5717H96.869C96.7435 54.9789 95.0289 53.4734 92.4779 53.4734C89.9687 53.4734 88.1286 54.9789 87.5849 57.5717Z"
+            fill="white"
+          />
+          <path
+            d="M53.3711 78.4404V48.5809H60.9823V52.052C62.446 49.501 65.0807 48.0791 68.3008 48.0791C74.3647 48.0791 78.9649 53.3066 78.9649 60.2487C78.9649 67.2745 74.3229 72.4602 68.259 72.4602C65.0807 72.4602 62.446 71.1637 60.9823 68.78V78.4404H53.3711ZM66.1262 66.1872C69.2627 66.1872 71.3119 63.7616 71.3119 60.2905C71.3119 56.8195 69.2627 54.4357 66.1262 54.4357C62.7388 54.4357 60.9823 57.2795 60.9823 59.7051V60.9178C60.9823 63.3434 62.7388 66.1872 66.1262 66.1872Z"
+            fill="white"
+          />
+          <path
+            d="M31.9606 78.4405L36.0171 69.5329L26.9004 48.5811H35.1389L40.0737 60.6252L44.9666 48.5811H52.5779L39.8646 78.4405H31.9606Z"
+            fill="white"
+          />
+          <path
+            d="M0 71.9996V42.7256H7.7367V53.1806H17.9826V42.7256H25.7193V71.9996H17.9826V59.8718H7.7367V71.9996H0Z"
+            fill="white"
+          />
+          <defs>
+            <linearGradient
+              id="paint0_linear_2204_3044"
+              x1="225.869"
+              y1="-3.06048e-05"
+              x2="222.845"
+              y2="37.4821"
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop stop-color="#06E3FA" />
+              <stop offset="1" stop-color="#4FDB5E" />
+            </linearGradient>
+            <linearGradient
+              id="paint1_linear_2204_3044"
+              x1="230.87"
+              y1="39"
+              x2="244.661"
+              y2="6.30303"
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop stop-color="#06E3FA" />
+              <stop offset="1" stop-color="#4FDB5E" />
+            </linearGradient>
+          </defs>
+        </svg>
+      </div>
+
+      <div id="next-card" aria-hidden="true">
+        <h1 id="phrase-a" class="card-text">
+          <span
+            ><span class="headline-word html-word"
+              ><span class="html-type"></span><span class="html-caret">|</span></span
+            >
+            <span class="headline-word supporting-word">in</span></span
+          >
+          <span><span class="headline-word supporting-word canvas-word">canvas</span></span>
+        </h1>
+        <h2 id="phrase-b" class="card-text availability">
+          <span>Now available</span>
+          <span>in HyperFrames</span>
+        </h2>
+      </div>
+
+      <!-- Driver clip -->
+      <div
+        id="driver"
+        class="clip"
+        data-start="0"
+        data-duration="8"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+
+      <style>
+        @import url("https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@800;900&display=block");
+
+        [data-composition-id="vfx-text-cursor"] {
+          position: relative;
+          width: 1920px;
+          height: 1080px;
+          overflow: hidden;
+          background: #000000;
+          font-family: Inter, "Arial Black", Arial, sans-serif;
+        }
+
+        [data-composition-id="vfx-text-cursor"] #vfx-canvas {
+          position: absolute;
+          inset: 0;
+          width: 1920px;
+          height: 1080px;
+          z-index: 1;
+        }
+
+        [data-composition-id="vfx-text-cursor"] .stage-logo-wrap {
+          position: absolute;
+          left: 420px;
+          top: 369.8px;
+          z-index: 2;
+          width: 1080px;
+          height: 324.4px;
+          opacity: 0;
+          filter: drop-shadow(0 0 22px rgba(73, 242, 255, 0.12));
+        }
+
+        [data-composition-id="vfx-text-cursor"] .stage-logo {
+          display: block;
+          width: 100%;
+          height: auto;
+        }
+
+        [data-composition-id="vfx-text-cursor"] #next-card {
+          position: absolute;
+          left: 120px;
+          top: 67.5px;
+          width: 1680px;
+          height: 945px;
+          padding: 96px 126px;
+          box-sizing: border-box;
+          border-radius: 56px;
+          background: linear-gradient(
+            160deg,
+            rgba(255, 255, 255, 0.11) 0%,
+            rgba(255, 255, 255, 0.045) 42%,
+            rgba(255, 255, 255, 0.018) 70%,
+            rgba(255, 255, 255, 0.075) 100%
+          );
+          backdrop-filter: blur(14px) saturate(1.12);
+          -webkit-backdrop-filter: blur(14px) saturate(1.12);
+          border: 1px solid rgba(255, 255, 255, 0.17);
+          box-shadow:
+            0 30px 90px rgba(0, 0, 0, 0.42),
+            inset 0 1px 0 rgba(255, 255, 255, 0.22);
+          transform-origin: 50% 50%;
+          z-index: 3;
+          opacity: 0;
+          overflow: hidden;
+        }
+
+        [data-composition-id="vfx-text-cursor"] #next-card::before {
+          content: "";
+          position: absolute;
+          inset: 0;
+          background:
+            radial-gradient(circle at 18% 78%, rgba(73, 242, 255, 0.14), transparent 38%),
+            radial-gradient(circle at 82% 22%, rgba(255, 79, 216, 0.11), transparent 34%);
+          pointer-events: none;
+        }
+
+        [data-composition-id="vfx-text-cursor"] #next-card::after {
+          content: "";
+          position: absolute;
+          inset: 1px;
+          border-radius: 55px;
+          box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
+          pointer-events: none;
+        }
+
+        [data-composition-id="vfx-text-cursor"] .card-text {
+          position: absolute;
+          z-index: 1;
+          left: 126px;
+          right: 126px;
+          top: 96px;
+          bottom: 96px;
+          margin: 0;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          color: #ffffff;
+          font-size: 292px;
+          line-height: 0.88;
+          font-weight: 900;
+          letter-spacing: 0;
+          text-align: center;
+          text-shadow:
+            -5px 0 18px rgba(73, 242, 255, 0.38),
+            5px 0 18px rgba(255, 79, 216, 0.28),
+            0 24px 80px rgba(0, 0, 0, 0.58);
+        }
+
+        [data-composition-id="vfx-text-cursor"] .card-text > span {
+          display: block;
+          white-space: nowrap;
+        }
+
+        [data-composition-id="vfx-text-cursor"] .headline-word {
+          display: inline-block;
+        }
+
+        [data-composition-id="vfx-text-cursor"] .html-word {
+          position: relative;
+          width: 1.78em;
+          margin-right: 0.08em;
+          text-align: left;
+          color: #f6ff7a;
+          font-family: "Big Shoulders Display", Impact, "Arial Black", sans-serif;
+          font-weight: 900;
+          letter-spacing: 0.015em;
+          text-transform: uppercase;
+          text-shadow:
+            -6px 0 16px rgba(73, 242, 255, 0.48),
+            6px 0 16px rgba(255, 79, 216, 0.34),
+            0 0 24px rgba(246, 255, 122, 0.34),
+            0 24px 72px rgba(0, 0, 0, 0.56);
+        }
+
+        [data-composition-id="vfx-text-cursor"] .html-type,
+        [data-composition-id="vfx-text-cursor"] .html-caret {
+          display: inline-block;
+        }
+
+        [data-composition-id="vfx-text-cursor"] .html-caret {
+          position: absolute;
+          left: 0;
+          top: 0;
+          width: auto;
+          margin-left: 0;
+          opacity: 0;
+          color: #f6ff7a;
+          text-shadow:
+            0 0 12px rgba(246, 255, 122, 0.7),
+            -4px 0 14px rgba(73, 242, 255, 0.36),
+            4px 0 14px rgba(255, 79, 216, 0.26);
+        }
+
+        [data-composition-id="vfx-text-cursor"] .canvas-word {
+          color: #ffffff;
+          text-shadow:
+            -4px 0 18px rgba(246, 255, 122, 0.26),
+            5px 0 18px rgba(255, 79, 216, 0.25),
+            0 22px 72px rgba(0, 0, 0, 0.58);
+        }
+
+        [data-composition-id="vfx-text-cursor"] .availability {
+          font-size: 178px;
+          line-height: 0.94;
+        }
+      </style>
+
+      <script>
+        window.__timelines = window.__timelines || {};
+
+        (function () {
+          var WIDTH = 1920;
+          var HEIGHT = 1080;
+          var LOGO_VIEWBOX = { width: 263, height: 79 };
+          var LOGO_WIDTH = 1080;
+          var LOGO_SCALE = LOGO_WIDTH / LOGO_VIEWBOX.width;
+          var LOGO_HEIGHT = LOGO_VIEWBOX.height * LOGO_SCALE;
+          var LOGO_X = (WIDTH - LOGO_WIDTH) * 0.5;
+          var LOGO_Y = (HEIGHT - LOGO_HEIGHT) * 0.5 - 8;
+          var root = document.querySelector('[data-composition-id="vfx-text-cursor"]');
+          var canvas = root.querySelector("#vfx-canvas");
+          var nextCard = root.querySelector("#next-card");
+          var phraseA = root.querySelector("#phrase-a");
+          var phraseB = root.querySelector("#phrase-b");
+          var htmlWord = root.querySelector(".html-word");
+          var htmlType = root.querySelector(".html-type");
+          var htmlCaret = root.querySelector(".html-caret");
+          var supportingWords = Array.from(root.querySelectorAll(".supporting-word"));
+          var stageLogo = root.querySelector(".stage-logo-wrap");
+          var gl = canvas.getContext("webgl", {
+            premultipliedAlpha: false,
+            preserveDrawingBuffer: true,
+          });
+          var state = { progress: 0, logoY: 760, effectMix: 0, logoScale: 1 };
+          var mouse = { x: 0, y: HEIGHT * 0.5 };
+          var entryEase = function (t) {
+            return -0.806 * t * t + 1.806 * t;
+          };
+          var htmlText = "HTML";
+
+          function getTitleOffset() {
+            var cardRect = nextCard.getBoundingClientRect();
+            htmlType.textContent = htmlText;
+            var htmlRect = htmlType.getBoundingClientRect();
+            htmlType.textContent = "";
+            return {
+              x: cardRect.left + cardRect.width * 0.5 - (htmlRect.left + htmlRect.width * 0.5),
+              y: cardRect.top + cardRect.height * 0.5 - (htmlRect.top + htmlRect.height * 0.5),
+            };
+          }
+
+          function addTextCardSequence(tl, htmlStart) {
+            var typeStep = 0.085;
+            var titleHold = 0.25;
+            var typeEnd = htmlStart + (htmlText.length - 1) * typeStep;
+            var slideStart = typeEnd + titleHold;
+            var slideEnd = slideStart + 0.05;
+            var titleOffset = getTitleOffset();
+
+            tl.call(
+              function () {
+                htmlType.textContent = "";
+                htmlCaret.style.left = "0px";
+              },
+              [],
+              0,
+            );
+            tl.set(
+              htmlWord,
+              { x: titleOffset.x, y: titleOffset.y, scale: 1.8, transformOrigin: "50% 50%" },
+              0,
+            );
+            tl.set(htmlCaret, { opacity: 0 }, 0);
+            tl.set(htmlCaret, { opacity: 1 }, htmlStart - 0.05);
+
+            for (var i = 1; i <= htmlText.length; i += 1) {
+              (function (idx) {
+                tl.call(
+                  function () {
+                    htmlType.textContent = htmlText.slice(0, idx);
+                    htmlCaret.style.left = htmlType.offsetWidth + "px";
+                    if (idx === htmlText.length) {
+                      htmlCaret.style.opacity = "0";
+                    }
+                  },
+                  [],
+                  htmlStart + (idx - 1) * typeStep,
+                );
+              })(i);
+            }
+
+            tl.to(
+              htmlWord,
+              {
+                x: 0,
+                y: 0,
+                scale: 1,
+                duration: 0.05,
+                ease: "power2.out",
+              },
+              slideStart,
+            );
+            tl.to(
+              supportingWords,
+              {
+                opacity: 1,
+                y: 0,
+                scale: 1,
+                filter: "blur(0px)",
+                duration: 0.42,
+                stagger: 0.08,
+                ease: "expo.out",
+              },
+              slideEnd,
+            );
+
+            return slideEnd + 0.42 + (supportingWords.length - 1) * 0.08;
+          }
+
+          if (!gl) {
+            var ctx = canvas.getContext("2d");
+            ctx.fillStyle = "#000";
+            ctx.fillRect(0, 0, WIDTH, HEIGHT);
+
+            var tl = gsap.timeline({ paused: true });
+            tl.set(nextCard, { opacity: 0, scale: 1.45, filter: "blur(14px)" }, 0);
+            tl.set(phraseA, { opacity: 1, x: 0, y: 0, scale: 1, filter: "blur(0px)" }, 0);
+            tl.set(supportingWords, { opacity: 0, y: 54, scale: 0.96, filter: "blur(10px)" }, 0);
+            tl.set(phraseB, { opacity: 0, x: 1480, y: 0, scale: 1, filter: "blur(8px)" }, 0);
+            tl.to(state, { logoY: 0, duration: 1, ease: "power4.out" }, 0);
+            tl.set(nextCard, { opacity: 1, scale: 1.45, filter: "blur(14px)" }, 3.1);
+            tl.to(
+              nextCard,
+              { scale: 0.88, filter: "blur(0px)", duration: 0.9, ease: entryEase },
+              3.1,
+            );
+            tl.to(
+              nextCard,
+              { scale: 0.84, filter: "blur(1.5px)", duration: 0.4, ease: "none" },
+              4.0,
+            );
+            var phraseAReady = addTextCardSequence(tl, 3.15);
+            var phraseAExit = phraseAReady + 0.5;
+            var phraseBStart = phraseAExit + 0.36;
+            tl.to(
+              phraseA,
+              { x: -1480, filter: "blur(8px)", duration: 0.36, ease: "power2.in" },
+              phraseAExit,
+            );
+            tl.set(phraseA, { opacity: 0 }, phraseBStart);
+            tl.set(
+              phraseB,
+              { opacity: 1, x: 1480, y: 0, scale: 1, filter: "blur(8px)" },
+              phraseBStart,
+            );
+            tl.to(
+              phraseB,
+              { x: 0, filter: "blur(0px)", duration: 0.48, ease: "expo.out" },
+              phraseBStart,
+            );
+            window.__timelines["vfx-text-cursor"] = tl;
+            return;
+          }
+
+          var vertexSource = [
+            "attribute vec2 position;",
+            "varying vec2 vUv;",
+            "void main() {",
+            "  vUv = position * 0.5 + 0.5;",
+            "  gl_Position = vec4(position, 0.0, 1.0);",
+            "}",
+          ].join("\n");
+
+          var fragmentSource = [
+            "precision highp float;",
+            "varying vec2 vUv;",
+            "uniform vec2 resolution;",
+            "uniform vec2 mouse;",
+            "uniform float logoY;",
+            "uniform float logoScale;",
+            "uniform float effectMix;",
+            "uniform sampler2D src;",
+            "uniform sampler2D colorSrc;",
+            "",
+            "#define PI 3.141593",
+            "#define SAMPLES 112.0",
+            "",
+            "float hash(vec2 p) {",
+            "  return fract(sin(dot(p, vec2(489.0, 589.0))) * 492.0) * 2.0 - 1.0;",
+            "}",
+            "",
+            "float hash(vec3 p) {",
+            "  return fract(sin(dot(p, vec3(489.0, 589.0, 58.0))) * 492.0) * 2.0 - 1.0;",
+            "}",
+            "",
+            "vec2 hash2(vec3 p) {",
+            "  return vec2(hash(p), hash(p + 1.0));",
+            "}",
+            "",
+            "vec4 readMask(vec2 uv) {",
+            "  if (uv.x < 0.0 || uv.x > 1.0 || uv.y < 0.0 || uv.y > 1.0) {",
+            "    return vec4(0.0);",
+            "  }",
+            "  return texture2D(src, uv);",
+            "}",
+            "",
+            "vec4 readColor(vec2 uv) {",
+            "  if (uv.x < 0.0 || uv.x > 1.0 || uv.y < 0.0 || uv.y > 1.0) {",
+            "    return vec4(0.0);",
+            "  }",
+            "  return texture2D(colorSrc, uv);",
+            "}",
+            "",
+            "vec3 spectrum(float x) {",
+            "  return cos((x - vec3(0.0, 0.5, 1.0)) * vec3(0.6, 1.0, 0.5) * PI);",
+            "}",
+            "",
+            "void main() {",
+            "  vec2 uv = vUv;",
+            "  vec2 logoCenter = vec2(0.5, 0.5);",
+            "  vec2 logoUv = (uv - logoCenter) / logoScale + logoCenter + vec2(0.0, logoY / resolution.y);",
+            "  float mask = readMask(logoUv).r;",
+            "  vec4 logo = readColor(logoUv);",
+            "  vec2 p = uv * 2.0 - 1.0;",
+            "  p.x *= resolution.x / resolution.y;",
+            "",
+            "  vec2 mp = mouse / resolution;",
+            "  mp.y = 1.0 - mp.y;",
+            "  mp = mp * 2.0 - 1.0;",
+            "  mp.x *= resolution.x / resolution.y;",
+            "",
+            "  vec2 rp = p;",
+            "  vec2 d = (mp - p) / SAMPLES;",
+            "  float acc = 0.0;",
+            "",
+            "  for (float i = 0.0; i < SAMPLES; i++) {",
+            "    rp += d;",
+            "    rp += hash2(vec3(rp, i)) * 0.5 / SAMPLES;",
+            "",
+            "    vec2 uv2 = rp;",
+            "    uv2.x /= resolution.x / resolution.y;",
+            "    uv2 = uv2 * 0.5 + 0.5;",
+            "    vec2 rayLogoUv = (uv2 - logoCenter) / logoScale + logoCenter + vec2(0.0, logoY / resolution.y);",
+            "    acc += readMask(rayLogoUv).r / SAMPLES;",
+            "  }",
+            "",
+            "  vec4 c = vec4(0.0, 0.0, 0.0, 1.0);",
+            "  c -= acc * 0.24;",
+            "  c += vec4(spectrum(cos(acc * 4.9)), 1.0) * acc * 3.65;",
+            "  c.rgb = max(c.rgb - 0.035, 0.0);",
+            "  c.rgb *= 1.16;",
+            "  float cursorX = mouse.x / resolution.x;",
+            "  float sweep = exp(-pow((uv.x - cursorX) * 6.2, 2.0));",
+            "  float textProximity = smoothstep(0.006, 0.34, acc);",
+            "  float longRay = smoothstep(0.004, 0.18, acc);",
+            "  vec3 sweepColor = vec3(0.14, 0.65, 0.85) + spectrum(cursorX * 1.8) * 0.28;",
+            "  c.rgb += sweepColor * sweep * (0.34 + textProximity * 2.35);",
+            "  c.rgb += spectrum(cursorX + acc * 2.0) * longRay * 0.58;",
+            "  c.rgb += logo.rgb * acc * 1.18;",
+            "  c.rgb += logo.rgb * sweep * mask * 0.92;",
+            "  c.rgb *= effectMix;",
+            "  c.rgb = mix(c.rgb, logo.rgb, smoothstep(0.02, 0.75, logo.a));",
+            "  c.rgb += vec3(1.0) * smoothstep(0.04, 0.38, mask) * 0.12 * effectMix;",
+            "  float grain = hash(vec3(uv.xyy + mouse.x * 0.0007));",
+            "  float logoDust = smoothstep(0.02, 0.38, acc) + smoothstep(0.03, 0.22, mask);",
+            "  c.rgb += grain * 0.07 * (0.42 + logoDust) * effectMix;",
+            "  c.rgb += spectrum(grain + cursorX) * abs(grain) * 0.045 * smoothstep(0.02, 0.5, acc) * effectMix;",
+            "  c.a = 1.0;",
+            "  gl_FragColor = c;",
+            "}",
+          ].join("\n");
+
+          function compile(type, source) {
+            var shader = gl.createShader(type);
+            gl.shaderSource(shader, source);
+            gl.compileShader(shader);
+            if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+              throw new Error(gl.getShaderInfoLog(shader));
+            }
+            return shader;
+          }
+
+          var program = gl.createProgram();
+          gl.attachShader(program, compile(gl.VERTEX_SHADER, vertexSource));
+          gl.attachShader(program, compile(gl.FRAGMENT_SHADER, fragmentSource));
+          gl.linkProgram(program);
+          if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+            throw new Error(gl.getProgramInfoLog(program));
+          }
+
+          var mask = document.createElement("canvas");
+          mask.width = WIDTH;
+          mask.height = HEIGHT;
+          var maskCtx = mask.getContext("2d");
+          var colorMask = document.createElement("canvas");
+          colorMask.width = WIDTH;
+          colorMask.height = HEIGHT;
+          var colorCtx = colorMask.getContext("2d");
+
+          function parseOffset(value) {
+            if (!value) return 0;
+            return value.indexOf("%") > -1 ? parseFloat(value) / 100 : parseFloat(value);
+          }
+
+          function makeFill(ctx, fill) {
+            if (!fill || fill === "none") return null;
+            var match = fill.match(/^url\(#(.+)\)$/);
+            if (!match) return fill;
+
+            var gradient = root.querySelector("#" + match[1]);
+            if (!gradient) return "#ffffff";
+
+            var x1 = parseFloat(gradient.getAttribute("x1") || "0");
+            var y1 = parseFloat(gradient.getAttribute("y1") || "0");
+            var x2 = parseFloat(gradient.getAttribute("x2") || "0");
+            var y2 = parseFloat(gradient.getAttribute("y2") || "0");
+            var canvasGradient = ctx.createLinearGradient(x1, y1, x2, y2);
+            gradient.querySelectorAll("stop").forEach(function (stop) {
+              var offset = parseOffset(stop.getAttribute("offset") || "0");
+              var color = stop.getAttribute("stop-color") || "#ffffff";
+              canvasGradient.addColorStop(Math.max(0, Math.min(1, offset)), color);
+            });
+            return canvasGradient;
+          }
+
+          function drawLogoMasks() {
+            maskCtx.clearRect(0, 0, WIDTH, HEIGHT);
+            colorCtx.clearRect(0, 0, WIDTH, HEIGHT);
+            maskCtx.save();
+            colorCtx.save();
+            maskCtx.translate(LOGO_X, LOGO_Y);
+            colorCtx.translate(LOGO_X, LOGO_Y);
+            maskCtx.scale(LOGO_SCALE, LOGO_SCALE);
+            colorCtx.scale(LOGO_SCALE, LOGO_SCALE);
+            maskCtx.fillStyle = "#fff";
+
+            root.querySelectorAll(".stage-logo path[d]").forEach(function (path) {
+              var shape = new Path2D(path.getAttribute("d"));
+              var fill = makeFill(colorCtx, path.getAttribute("fill"));
+              maskCtx.fill(shape);
+              if (fill) {
+                colorCtx.fillStyle = fill;
+                colorCtx.fill(shape);
+              }
+            });
+
+            maskCtx.restore();
+            colorCtx.restore();
+          }
+          drawLogoMasks();
+
+          function createTexture(source) {
+            var texture = gl.createTexture();
+            gl.bindTexture(gl.TEXTURE_2D, texture);
+            gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
+            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+            return texture;
+          }
+
+          var texture = createTexture(mask);
+          var colorTexture = createTexture(colorMask);
+
+          var buffer = gl.createBuffer();
+          gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+          gl.bufferData(
+            gl.ARRAY_BUFFER,
+            new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),
+            gl.STATIC_DRAW,
+          );
+
+          var positionLoc = gl.getAttribLocation(program, "position");
+          var resolutionLoc = gl.getUniformLocation(program, "resolution");
+          var mouseLoc = gl.getUniformLocation(program, "mouse");
+          var logoYLoc = gl.getUniformLocation(program, "logoY");
+          var logoScaleLoc = gl.getUniformLocation(program, "logoScale");
+          var effectMixLoc = gl.getUniformLocation(program, "effectMix");
+          var srcLoc = gl.getUniformLocation(program, "src");
+          var colorSrcLoc = gl.getUniformLocation(program, "colorSrc");
+
+          function render() {
+            mouse.x = state.progress * WIDTH;
+            mouse.y = HEIGHT * 0.5;
+
+            gl.viewport(0, 0, WIDTH, HEIGHT);
+            gl.clearColor(0, 0, 0, 1);
+            gl.clear(gl.COLOR_BUFFER_BIT);
+            gl.useProgram(program);
+            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+            gl.enableVertexAttribArray(positionLoc);
+            gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0);
+            gl.activeTexture(gl.TEXTURE0);
+            gl.bindTexture(gl.TEXTURE_2D, texture);
+            gl.uniform1i(srcLoc, 0);
+            gl.activeTexture(gl.TEXTURE1);
+            gl.bindTexture(gl.TEXTURE_2D, colorTexture);
+            gl.uniform1i(colorSrcLoc, 1);
+            gl.uniform2f(resolutionLoc, WIDTH, HEIGHT);
+            gl.uniform2f(mouseLoc, mouse.x, mouse.y);
+            gl.uniform1f(logoYLoc, state.logoY);
+            gl.uniform1f(logoScaleLoc, state.logoScale);
+            gl.uniform1f(effectMixLoc, state.effectMix);
+            gl.drawArrays(gl.TRIANGLES, 0, 6);
+          }
+
+          render();
+          var tl = gsap.timeline({
+            paused: true,
+            onUpdate: render,
+          });
+
+          tl.set(canvas, { opacity: 1, filter: "blur(0px)" }, 0);
+          tl.set(nextCard, { opacity: 0, scale: 1.45, filter: "blur(14px)" }, 0);
+          tl.set(phraseA, { opacity: 1, x: 0, y: 0, scale: 1, filter: "blur(0px)" }, 0);
+          tl.set(supportingWords, { opacity: 0, y: 54, scale: 0.96, filter: "blur(10px)" }, 0);
+          tl.set(phraseB, { opacity: 0, x: 1480, y: 0, scale: 1, filter: "blur(8px)" }, 0);
+          tl.set(state, { logoY: 760, effectMix: 0, progress: 0, logoScale: 1 }, 0);
+          tl.to(
+            state,
+            {
+              logoY: 0,
+              duration: 1,
+              ease: "power4.out",
+              onUpdate: render,
+            },
+            0,
+          );
+
+          tl.to(
+            state,
+            {
+              effectMix: 1,
+              duration: 0.34,
+              ease: "power3.out",
+              onUpdate: render,
+            },
+            0.72,
+          );
+
+          tl.to(
+            state,
+            {
+              progress: 1,
+              duration: 2.28,
+              ease: "none",
+              onUpdate: render,
+            },
+            0.72,
+          );
+
+          tl.to(
+            state,
+            {
+              logoScale: 0.4,
+              duration: 0.2,
+              ease: "expo.in",
+              onUpdate: render,
+            },
+            2.9,
+          );
+
+          tl.to(
+            canvas,
+            {
+              opacity: 0,
+              filter: "blur(16px)",
+              duration: 0.2,
+              ease: "expo.in",
+            },
+            2.9,
+          );
+
+          tl.set(nextCard, { opacity: 1, scale: 1.45, filter: "blur(14px)" }, 3.1);
+          tl.to(
+            nextCard,
+            {
+              scale: 0.88,
+              filter: "blur(0px)",
+              duration: 0.9,
+              ease: entryEase,
+            },
+            3.1,
+          );
+          tl.to(
+            nextCard,
+            {
+              scale: 0.84,
+              filter: "blur(1.5px)",
+              duration: 0.4,
+              ease: "none",
+            },
+            4.0,
+          );
+          var phraseAReady = addTextCardSequence(tl, 3.15);
+          var phraseAExit = phraseAReady + 0.5;
+          var phraseBStart = phraseAExit + 0.36;
+          tl.to(
+            phraseA,
+            {
+              x: -1480,
+              filter: "blur(8px)",
+              duration: 0.36,
+              ease: "power2.in",
+            },
+            phraseAExit,
+          );
+          tl.set(phraseA, { opacity: 0 }, phraseBStart);
+          tl.set(
+            phraseB,
+            {
+              opacity: 1,
+              x: 1480,
+              y: 0,
+              scale: 1,
+              filter: "blur(8px)",
+            },
+            phraseBStart,
+          );
+          tl.to(
+            phraseB,
+            {
+              x: 0,
+              filter: "blur(0px)",
+              duration: 0.48,
+              ease: "expo.out",
+            },
+            phraseBStart,
+          );
+
+          window.__timelines["vfx-text-cursor"] = tl;
+        })();
+      </script>
+    </div>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="vfx-text-cursor" data-composition-src="compositions/vfx-text-cursor.html" data-start="0" data-duration="8" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/vpn-youtube-spot.mdx b/docs/catalog/blocks/vpn-youtube-spot.mdx
index 6e1835b89e..3a0d35d8e7 100644
--- a/docs/catalog/blocks/vpn-youtube-spot.mdx
+++ b/docs/catalog/blocks/vpn-youtube-spot.mdx
@@ -3,34 +3,1019 @@ title: "VPN YouTube Spot"
 description: "Snappy Apple-style YouTube insert showing a phone finding and installing a friendly VPN app with sound effects."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vpn-youtube-spot.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vpn-youtube-spot.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/vpn-youtube-spot.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="VPN YouTube Spot preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add vpn-youtube-spot
-```
+<InstallCommand command="npx hyperframes add vpn-youtube-spot" />
 
 That writes `compositions/vpn-youtube-spot.html`, plus 1 supporting file under `assets/`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`vpn-youtube-spot.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #ffffff;
+        font-family:
+          -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Helvetica Neue", Arial,
+          sans-serif;
+      }
+
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        color: #111111;
+        background:
+          radial-gradient(circle at 20% 16%, rgba(0, 122, 255, 0.13), transparent 24%),
+          radial-gradient(circle at 82% 22%, rgba(52, 199, 89, 0.14), transparent 22%),
+          linear-gradient(180deg, #ffffff 0%, #f5f5f7 100%);
+      }
+
+      .stage {
+        position: absolute;
+        inset: 0;
+        display: grid;
+        place-items: center;
+        padding: 70px 120px;
+      }
+
+      .headline {
+        position: absolute;
+        left: 118px;
+        top: 104px;
+        width: 580px;
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        z-index: 2;
+        pointer-events: none;
+      }
+
+      .headline span {
+        display: block;
+        font-size: 92px;
+        line-height: 0.92;
+        font-weight: 900;
+        letter-spacing: 0;
+      }
+
+      .headline .blue {
+        color: #007aff;
+      }
+
+      .headline .sub {
+        margin-top: 20px;
+        width: 410px;
+        color: #6e6e73;
+        font-size: 27px;
+        line-height: 1.18;
+        font-weight: 700;
+      }
+
+      .ambient-word {
+        position: absolute;
+        right: 78px;
+        bottom: 64px;
+        color: rgba(17, 17, 17, 0.05);
+        font-size: 208px;
+        line-height: 0.84;
+        font-weight: 900;
+        letter-spacing: 0;
+        pointer-events: none;
+      }
+
+      .ambient-line {
+        position: absolute;
+        height: 2px;
+        width: 360px;
+        border-radius: 999px;
+        background: rgba(0, 122, 255, 0.2);
+        transform-origin: center;
+        pointer-events: none;
+      }
+
+      .line-a {
+        left: 198px;
+        bottom: 230px;
+      }
+
+      .line-b {
+        right: 208px;
+        top: 196px;
+        width: 248px;
+        background: rgba(52, 199, 89, 0.2);
+      }
+
+      .snap-shadow {
+        position: absolute;
+        left: 50%;
+        bottom: 132px;
+        width: 560px;
+        height: 52px;
+        border-radius: 50%;
+        transform: translateX(-50%);
+        background: rgba(17, 17, 17, 0.14);
+        filter: blur(24px);
+        opacity: 0;
+      }
+
+      .phone {
+        position: relative;
+        width: 462px;
+        height: 952px;
+        border-radius: 72px;
+        padding: 16px;
+        background: linear-gradient(145deg, #1f2025 0%, #07070a 100%);
+        box-shadow:
+          0 46px 120px rgba(17, 17, 17, 0.22),
+          inset 0 0 0 2px rgba(255, 255, 255, 0.12);
+        z-index: 4;
+        will-change: transform;
+      }
+
+      .phone::before {
+        content: "";
+        position: absolute;
+        inset: 8px;
+        border-radius: 64px;
+        border: 2px solid rgba(255, 255, 255, 0.07);
+        pointer-events: none;
+      }
+
+      .screen {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        border-radius: 56px;
+        background: #f5f5f7;
+        box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
+      }
+
+      .island {
+        position: absolute;
+        left: 50%;
+        top: 15px;
+        width: 138px;
+        height: 38px;
+        border-radius: 999px;
+        transform: translateX(-50%);
+        background: #07070a;
+        z-index: 30;
+      }
+
+      .store-view,
+      .detail-view,
+      .white-wipe {
+        position: absolute;
+        inset: 0;
+      }
+
+      .store-view {
+        padding: 70px 24px 26px;
+        z-index: 2;
+      }
+
+      .store-top {
+        display: flex;
+        align-items: flex-end;
+        justify-content: space-between;
+        margin-bottom: 16px;
+      }
+
+      .store-title {
+        font-size: 38px;
+        line-height: 1;
+        font-weight: 900;
+        letter-spacing: 0;
+      }
+
+      .avatar {
+        width: 38px;
+        height: 38px;
+        border-radius: 50%;
+        background:
+          radial-gradient(circle at 62% 38%, rgba(255, 255, 255, 0.9) 0 10%, transparent 11%),
+          linear-gradient(135deg, #007aff, #34c759);
+        box-shadow: 0 8px 18px rgba(0, 122, 255, 0.25);
+      }
+
+      .search-pill {
+        display: flex;
+        align-items: center;
+        gap: 9px;
+        height: 45px;
+        padding: 0 16px;
+        border-radius: 15px;
+        background: #e9e9ed;
+        color: #6e6e73;
+        font-size: 18px;
+        font-weight: 700;
+        margin-bottom: 16px;
+      }
+
+      .search-icon {
+        width: 16px;
+        height: 16px;
+        border: 3px solid #8e8e93;
+        border-radius: 50%;
+        position: relative;
+      }
+
+      .search-icon::after {
+        content: "";
+        position: absolute;
+        right: -8px;
+        bottom: -5px;
+        width: 9px;
+        height: 3px;
+        border-radius: 999px;
+        background: #8e8e93;
+        transform: rotate(45deg);
+      }
+
+      .screen-window {
+        height: 720px;
+        overflow: hidden;
+        border-radius: 26px;
+      }
+
+      .scroll-content {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+        will-change: transform;
+      }
+
+      .store-row {
+        display: grid;
+        grid-template-columns: 72px 1fr 78px;
+        align-items: center;
+        gap: 13px;
+        min-height: 104px;
+        padding: 13px 12px;
+        border-radius: 23px;
+        background: rgba(255, 255, 255, 0.88);
+        box-shadow: 0 2px 0 rgba(0, 0, 0, 0.035);
+      }
+
+      .app-icon {
+        width: 72px;
+        height: 72px;
+        border-radius: 18px;
+        position: relative;
+        overflow: hidden;
+        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.38);
+      }
+
+      .icon-cloud {
+        background: linear-gradient(135deg, #70d7ff, #007aff);
+      }
+
+      .icon-photo {
+        background:
+          radial-gradient(circle at 32% 35%, #ffffff 0 10%, transparent 11%),
+          linear-gradient(135deg, #ff9f0a, #ff375f);
+      }
+
+      .icon-music {
+        background: linear-gradient(135deg, #ff2d55, #5856d6);
+      }
+
+      .icon-bank {
+        background: linear-gradient(135deg, #111111, #8e8e93);
+      }
+
+      .icon-map {
+        background: linear-gradient(135deg, #34c759, #ffd60a);
+      }
+
+      .icon-vpn {
+        background:
+          radial-gradient(circle at 72% 16%, rgba(255, 255, 255, 0.62) 0 12%, transparent 13%),
+          linear-gradient(145deg, #101828 0%, #007aff 64%, #34c759 100%);
+      }
+
+      .icon-vpn::before {
+        content: "";
+        position: absolute;
+        left: 21px;
+        top: 16px;
+        width: 30px;
+        height: 38px;
+        border-radius: 16px 16px 18px 18px;
+        background: rgba(255, 255, 255, 0.94);
+        clip-path: polygon(50% 0, 88% 13%, 88% 46%, 50% 100%, 12% 46%, 12% 13%);
+      }
+
+      .icon-vpn::after {
+        content: "";
+        position: absolute;
+        left: 31px;
+        top: 29px;
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        background: #007aff;
+      }
+
+      .row-copy {
+        min-width: 0;
+      }
+
+      .row-title {
+        color: #111111;
+        font-size: 18px;
+        line-height: 1.24;
+        font-weight: 800;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .row-sub {
+        margin-top: 4px;
+        color: #6e6e73;
+        font-size: 12px;
+        line-height: 1.28;
+        font-weight: 600;
+      }
+
+      .stars {
+        margin-top: 6px;
+        color: #8e8e93;
+        font-size: 12px;
+        line-height: 1.25;
+        font-weight: 800;
+      }
+
+      .get-button,
+      .install-button,
+      .open-button {
+        display: grid;
+        place-items: center;
+        height: 34px;
+        border-radius: 999px;
+        font-size: 14px;
+        line-height: 1;
+        font-weight: 900;
+        letter-spacing: 0;
+      }
+
+      .get-button,
+      .open-button {
+        width: 72px;
+        color: #007aff;
+        background: #ececf1;
+      }
+
+      #vpn-row {
+        position: relative;
+        transform-origin: center;
+        outline: 0 solid rgba(0, 122, 255, 0);
+      }
+
+      .tap-dot {
+        position: absolute;
+        right: 47px;
+        top: 52px;
+        width: 42px;
+        height: 42px;
+        border-radius: 50%;
+        border: 4px solid rgba(0, 122, 255, 0.8);
+        background: rgba(0, 122, 255, 0.18);
+        opacity: 0;
+        z-index: 9;
+      }
+
+      .detail-view {
+        padding: 78px 24px 26px;
+        background: #f5f5f7;
+        opacity: 0;
+        z-index: 8;
+      }
+
+      .detail-card {
+        height: 100%;
+        border-radius: 36px;
+        padding: 28px 22px 24px;
+        background: #ffffff;
+        box-shadow: 0 26px 70px rgba(17, 17, 17, 0.12);
+        overflow: hidden;
+      }
+
+      .detail-hero {
+        display: grid;
+        grid-template-columns: 108px 1fr;
+        gap: 16px;
+        align-items: center;
+      }
 
-It runs for 7 seconds at 1920×1080. Paste this into your composition:
+      .detail-icon {
+        width: 108px;
+        height: 108px;
+        border-radius: 26px;
+      }
 
-```html index.html
-<div
-  data-composition-id="vpn-youtube-spot"
-  data-composition-src="compositions/vpn-youtube-spot.html"
-  data-start="0"
-  data-duration="7"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+      .detail-title {
+        font-size: 31px;
+        line-height: 1;
+        font-weight: 900;
+      }
+
+      .detail-sub {
+        margin-top: 7px;
+        color: #6e6e73;
+        font-size: 14px;
+        line-height: 1.2;
+        font-weight: 700;
+      }
+
+      .install-button {
+        position: relative;
+        width: 94px;
+        margin-top: 15px;
+        color: #ffffff;
+        background: #007aff;
+        overflow: hidden;
+      }
+
+      .install-label,
+      .open-label,
+      .ring {
+        position: absolute;
+      }
+
+      .install-label,
+      .open-label {
+        inset: 0;
+        display: grid;
+        place-items: center;
+      }
+
+      .open-label,
+      .ring {
+        opacity: 0;
+      }
+
+      .ring {
+        inset: 4px auto auto 34px;
+        width: 26px;
+        height: 26px;
+        transform: rotate(-90deg);
+      }
+
+      .ring .track {
+        fill: none;
+        stroke: rgba(255, 255, 255, 0.36);
+        stroke-width: 4;
+      }
+
+      .ring .progress {
+        fill: none;
+        stroke: #ffffff;
+        stroke-width: 4;
+        stroke-linecap: round;
+        stroke-dasharray: 69;
+        stroke-dashoffset: 69;
+      }
+
+      .stats {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 8px;
+        margin: 26px 0;
+      }
+
+      .stat {
+        min-height: 72px;
+        border-radius: 22px;
+        padding: 12px 8px;
+        background: #f5f5f7;
+        text-align: center;
+      }
+
+      .stat-label {
+        color: #8e8e93;
+        font-size: 11px;
+        font-weight: 800;
+      }
+
+      .stat-value {
+        margin-top: 7px;
+        color: #111111;
+        font-size: 22px;
+        line-height: 1;
+        font-weight: 900;
+      }
+
+      .progress-panel {
+        position: relative;
+        display: grid;
+        place-items: center;
+        height: 260px;
+        border-radius: 34px;
+        background:
+          radial-gradient(circle at 50% 40%, rgba(0, 122, 255, 0.12), transparent 48%), #f5f5f7;
+        overflow: hidden;
+      }
+
+      .progress-halo {
+        position: absolute;
+        width: 196px;
+        height: 196px;
+        border-radius: 50%;
+        border: 24px solid rgba(0, 122, 255, 0.1);
+      }
+
+      .progress-big {
+        width: 190px;
+        height: 190px;
+        transform: rotate(-90deg);
+      }
+
+      .big-track,
+      .big-progress {
+        fill: none;
+        stroke-width: 18;
+      }
+
+      .big-track {
+        stroke: rgba(0, 122, 255, 0.12);
+      }
+
+      .big-progress {
+        stroke: #007aff;
+        stroke-linecap: round;
+        stroke-dasharray: 440;
+        stroke-dashoffset: 440;
+      }
+
+      .percent {
+        position: absolute;
+        color: #111111;
+        font-size: 48px;
+        line-height: 1;
+        font-weight: 900;
+      }
+
+      .shield-status {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 10px;
+        margin-top: 18px;
+        color: #34c759;
+        font-size: 20px;
+        font-weight: 900;
+        opacity: 0;
+      }
+
+      .check {
+        width: 30px;
+        height: 30px;
+        border-radius: 50%;
+        display: grid;
+        place-items: center;
+        color: #ffffff;
+        background: #34c759;
+      }
+
+      .speed-lines {
+        position: absolute;
+        inset: 0;
+        opacity: 0;
+        z-index: 20;
+        pointer-events: none;
+      }
+
+      .speed-lines i {
+        position: absolute;
+        left: 50%;
+        width: 4px;
+        height: 210px;
+        border-radius: 999px;
+        background: rgba(17, 17, 17, 0.18);
+        transform: translateX(-50%);
+      }
+
+      .speed-lines i:nth-child(1) {
+        top: 70px;
+        margin-left: -310px;
+      }
+
+      .speed-lines i:nth-child(2) {
+        top: 130px;
+        margin-left: 304px;
+        height: 240px;
+      }
+
+      .speed-lines i:nth-child(3) {
+        top: 260px;
+        margin-left: -232px;
+        height: 300px;
+      }
+
+      .speed-lines i:nth-child(4) {
+        top: 220px;
+        margin-left: 228px;
+        height: 320px;
+      }
+
+      .white-wipe {
+        background: #ffffff;
+        opacity: 0;
+        z-index: 40;
+        pointer-events: none;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="vpn-youtube-spot"
+      data-start="0"
+      data-duration="7"
+      data-width="1920"
+      data-height="1080"
+    >
+      <audio
+        id="sfx"
+        data-start="0"
+        data-duration="7"
+        data-track-index="1"
+        src="assets/vpn-sfx.wav"
+        data-volume="0.95"
+      ></audio>
+
+      <div class="stage">
+        <div class="headline" id="stageHeadline">
+          <span>PRIVATE</span>
+          <span class="blue">SIMPLY</span>
+          <div class="sub">A calmer way to browse.</div>
+        </div>
+        <div class="ambient-word">SAFE</div>
+        <div class="ambient-line line-a"></div>
+        <div class="ambient-line line-b"></div>
+        <div class="snap-shadow"></div>
+
+        <div class="phone">
+          <div class="screen">
+            <div class="island"></div>
+
+            <section class="store-view">
+              <div class="store-top">
+                <div class="store-title">Search</div>
+                <div class="avatar"></div>
+              </div>
+              <div class="search-pill">
+                <div class="search-icon"></div>
+                <div>privacy apps</div>
+              </div>
+              <div class="screen-window" data-layout-allow-overflow>
+                <div class="scroll-content">
+                  <div class="store-row">
+                    <div class="app-icon icon-cloud"></div>
+                    <div class="row-copy">
+                      <div class="row-title">CloudPocket</div>
+                      <div class="row-sub">Files and backups</div>
+                      <div class="stars">4.6 ★★★★★</div>
+                    </div>
+                    <div class="get-button">GET</div>
+                  </div>
+                  <div class="store-row">
+                    <div class="app-icon icon-photo"></div>
+                    <div class="row-copy">
+                      <div class="row-title">LensLab</div>
+                      <div class="row-sub">Photo editor</div>
+                      <div class="stars">4.8 ★★★★★</div>
+                    </div>
+                    <div class="get-button">GET</div>
+                  </div>
+                  <div class="store-row">
+                    <div class="app-icon icon-music"></div>
+                    <div class="row-copy">
+                      <div class="row-title">BeatShelf</div>
+                      <div class="row-sub">Music discovery</div>
+                      <div class="stars">4.4 ★★★★☆</div>
+                    </div>
+                    <div class="get-button">GET</div>
+                  </div>
+                  <div class="store-row">
+                    <div class="app-icon icon-bank"></div>
+                    <div class="row-copy">
+                      <div class="row-title">VaultPay</div>
+                      <div class="row-sub">Budget tracker</div>
+                      <div class="stars">4.7 ★★★★★</div>
+                    </div>
+                    <div class="get-button">GET</div>
+                  </div>
+                  <div class="store-row">
+                    <div class="app-icon icon-map"></div>
+                    <div class="row-copy">
+                      <div class="row-title">TrailPing</div>
+                      <div class="row-sub">Maps for trips</div>
+                      <div class="stars">4.5 ★★★★☆</div>
+                    </div>
+                    <div class="get-button">GET</div>
+                  </div>
+                  <div class="store-row" id="vpn-row">
+                    <div class="app-icon icon-vpn"></div>
+                    <div class="row-copy">
+                      <div class="row-title">VPN</div>
+                      <div class="row-sub">Simple private browsing</div>
+                      <div class="stars">4.9 ★★★★★</div>
+                    </div>
+                    <div class="get-button">GET</div>
+                    <div class="tap-dot"></div>
+                  </div>
+                  <div class="store-row">
+                    <div class="app-icon icon-cloud"></div>
+                    <div class="row-copy">
+                      <div class="row-title">QuickTunnel</div>
+                      <div class="row-sub">Network tools</div>
+                      <div class="stars">4.2 ★★★★☆</div>
+                    </div>
+                    <div class="get-button">GET</div>
+                  </div>
+                  <div class="store-row">
+                    <div class="app-icon icon-photo"></div>
+                    <div class="row-copy">
+                      <div class="row-title">PrivateFrame</div>
+                      <div class="row-sub">Photo lockers</div>
+                      <div class="stars">4.3 ★★★★☆</div>
+                    </div>
+                    <div class="get-button">GET</div>
+                  </div>
+                </div>
+              </div>
+            </section>
+
+            <section class="detail-view">
+              <div class="detail-card">
+                <div class="detail-hero">
+                  <div class="app-icon icon-vpn detail-icon"></div>
+                  <div>
+                    <div class="detail-title">VPN</div>
+                    <div class="detail-sub">Friendly privacy for everyday browsing.</div>
+                    <div class="install-button">
+                      <span class="install-label">GET</span>
+                      <svg class="ring" viewBox="0 0 28 28" aria-hidden="true">
+                        <circle class="track" cx="14" cy="14" r="11"></circle>
+                        <circle class="progress" cx="14" cy="14" r="11"></circle>
+                      </svg>
+                      <span class="open-label"></span>
+                    </div>
+                  </div>
+                </div>
+
+                <div class="stats">
+                  <div class="stat">
+                    <div class="stat-label">RATING</div>
+                    <div class="stat-value">4.9</div>
+                  </div>
+                  <div class="stat">
+                    <div class="stat-label">SPEED</div>
+                    <div class="stat-value">Fast</div>
+                  </div>
+                  <div class="stat">
+                    <div class="stat-label">AGE</div>
+                    <div class="stat-value">4+</div>
+                  </div>
+                </div>
+
+                <div class="progress-panel">
+                  <div class="progress-halo"></div>
+                  <svg class="progress-big" viewBox="0 0 160 160" aria-hidden="true">
+                    <circle class="big-track" cx="80" cy="80" r="70"></circle>
+                    <circle id="progressArc" class="big-progress" cx="80" cy="80" r="70"></circle>
+                  </svg>
+                  <div class="percent" id="progressText">0%</div>
+                </div>
+                <div class="shield-status">
+                  <div class="check">✓</div>
+                  <div>Ready to browse</div>
+                </div>
+              </div>
+            </section>
+          </div>
+        </div>
+      </div>
+
+      <div class="speed-lines">
+        <i></i>
+        <i></i>
+        <i></i>
+        <i></i>
+      </div>
+      <div class="white-wipe"></div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      gsap.defaults({ force3D: true });
+
+      const tl = gsap.timeline({
+        paused: true,
+        defaults: { duration: 0.45, ease: "power3.out" },
+      });
+
+      const breatheRepeats = Math.ceil(7 / 2.4) - 1;
+
+      tl.from(
+        ".headline span",
+        { y: 46, opacity: 0, stagger: 0.055, duration: 0.38, ease: "back.out(1.35)" },
+        0.05,
+      )
+        .from(".headline .sub", { y: 20, opacity: 0, duration: 0.28 }, 0.2)
+        .from(".ambient-word", { scale: 0.92, opacity: 0, duration: 0.5 }, 0.08)
+        .from(".ambient-line", { scaleX: 0, opacity: 0, stagger: 0.08, duration: 0.42 }, 0.16)
+        .to(
+          ".ambient-line",
+          {
+            scaleX: 1.08,
+            opacity: 0.55,
+            duration: 2.4,
+            yoyo: true,
+            repeat: breatheRepeats,
+            ease: "sine.inOut",
+          },
+          0.55,
+        )
+        .from(
+          ".phone",
+          {
+            y: 760,
+            scale: 0.82,
+            rotation: -2.5,
+            opacity: 0,
+            duration: 0.47,
+            ease: "back.out(1.6)",
+          },
+          0,
+        )
+        .from(".store-title", { y: 26, opacity: 0, duration: 0.28 }, 0.28)
+        .from(".avatar", { scale: 0.4, opacity: 0, duration: 0.24, ease: "back.out(1.8)" }, 0.34)
+        .from(".search-pill", { y: 18, opacity: 0, duration: 0.26 }, 0.4)
+        .from(
+          ".store-row",
+          { y: 44, opacity: 0, stagger: 0.035, duration: 0.36, ease: "power3.out" },
+          0.48,
+        );
+
+      tl.to(".scroll-content", { y: -456, duration: 1.2, ease: "power4.out" }, 0.62)
+        .to(
+          ".screen-window",
+          { scale: 1.012, duration: 0.18, yoyo: true, repeat: 1, ease: "power2.out" },
+          0.92,
+        )
+        .to(
+          ".screen-window",
+          { scale: 1.014, duration: 0.14, yoyo: true, repeat: 1, ease: "power2.out" },
+          1.25,
+        )
+        .to(
+          "#vpn-row",
+          {
+            scale: 1.035,
+            outlineWidth: 3,
+            outlineColor: "rgba(0,122,255,0.34)",
+            duration: 0.2,
+            ease: "back.out(1.7)",
+          },
+          1.72,
+        )
+        .to("#vpn-row", { scale: 1, duration: 0.22 }, 1.93)
+        .fromTo(
+          ".tap-dot",
+          { scale: 0.25, opacity: 0.95 },
+          { scale: 2.15, opacity: 0, duration: 0.42, ease: "power2.out" },
+          2.02,
+        )
+        .to("#vpn-row .get-button", { scale: 0.82, duration: 0.1, ease: "power3.in" }, 2.04)
+        .to("#vpn-row .get-button", { scale: 1, duration: 0.14, ease: "back.out(2)" }, 2.14);
+
+      tl.fromTo(
+        ".detail-view",
+        { y: 620, scale: 0.92, opacity: 0 },
+        { y: 0, scale: 1, opacity: 1, duration: 0.46, ease: "power4.out" },
+        2.32,
+      )
+        .from(".detail-card", { y: 56, scale: 0.96, duration: 0.42, ease: "back.out(1.2)" }, 2.34)
+        .from(
+          ".detail-icon",
+          { scale: 0.55, rotation: -8, opacity: 0, duration: 0.32, ease: "back.out(1.8)" },
+          2.47,
+        )
+        .from(".detail-title", { y: 20, opacity: 0, duration: 0.28 }, 2.54)
+        .from(".detail-sub", { y: 14, opacity: 0, duration: 0.24 }, 2.6)
+        .from(
+          ".install-button",
+          { scale: 0.72, opacity: 0, duration: 0.24, ease: "back.out(2)" },
+          2.66,
+        )
+        .from(".stat", { y: 28, opacity: 0, stagger: 0.05, duration: 0.3 }, 2.78)
+        .from(".progress-panel", { y: 42, scale: 0.96, opacity: 0, duration: 0.38 }, 2.92);
+
+      tl.to(".install-label", { y: -18, opacity: 0, duration: 0.16 }, 2.86)
+        .set(".install-label", { textContent: "" }, 3.02)
+        .to(".ring", { opacity: 1, duration: 0.16 }, 2.96)
+        .fromTo(
+          ".ring .progress",
+          { strokeDashoffset: 69 },
+          { strokeDashoffset: 0, duration: 1.2, ease: "power2.inOut" },
+          3.04,
+        )
+        .fromTo(
+          "#progressArc",
+          { strokeDashoffset: 440 },
+          { strokeDashoffset: 0, duration: 1.42, ease: "power2.inOut" },
+          3.02,
+        )
+        .set("#progressText", { textContent: "18%" }, 3.18)
+        .to(".progress-panel", { scale: 1.025, duration: 0.12, yoyo: true, repeat: 1 }, 3.18)
+        .set("#progressText", { textContent: "52%" }, 3.56)
+        .to(".progress-panel", { scale: 1.03, duration: 0.12, yoyo: true, repeat: 1 }, 3.56)
+        .set("#progressText", { textContent: "87%" }, 3.9)
+        .to(".progress-panel", { scale: 1.035, duration: 0.12, yoyo: true, repeat: 1 }, 3.9)
+        .set("#progressText", { textContent: "100%" }, 4.28)
+        .to(
+          ".progress-panel",
+          { scale: 1.04, duration: 0.12, yoyo: true, repeat: 1, ease: "back.out(1.7)" },
+          4.28,
+        )
+        .to(".ring", { scale: 0.35, opacity: 0, duration: 0.16 }, 4.44)
+        .to(".install-button", { backgroundColor: "#34c759", width: 94, duration: 0.18 }, 4.5)
+        .set(".open-label", { textContent: "OPEN" }, 4.52)
+        .to(".open-label", { opacity: 1, duration: 0.16 }, 4.56)
+        .fromTo(
+          ".shield-status",
+          { y: 22, scale: 0.9, opacity: 0 },
+          { y: 0, scale: 1, opacity: 1, duration: 0.34, ease: "back.out(1.8)" },
+          4.62,
+        )
+        .to(
+          ".phone",
+          { scale: 1.025, duration: 0.18, yoyo: true, repeat: 1, ease: "back.out(1.5)" },
+          4.7,
+        );
+
+      tl.to(".headline", { y: -18, opacity: 0.35, duration: 0.22 }, 5.18)
+        .to(".ambient-word", { opacity: 0.018, duration: 0.22 }, 5.18)
+        .to(".snap-shadow", { opacity: 1, scaleX: 0.8, duration: 0.16 }, 5.35)
+        .fromTo(
+          ".speed-lines",
+          { y: -220, opacity: 0 },
+          { y: 420, opacity: 1, duration: 0.26, ease: "power4.in" },
+          5.42,
+        )
+        .to(
+          ".phone",
+          { y: 1050, scale: 0.78, rotation: -3.5, duration: 0.48, ease: "power4.in" },
+          5.44,
+        )
+        .to(".snap-shadow", { opacity: 0, scaleX: 1.6, duration: 0.28 }, 5.62)
+        .to(".speed-lines", { opacity: 0, duration: 0.2 }, 5.74)
+        .to(".white-wipe", { opacity: 1, duration: 0.42, ease: "power2.out" }, 5.86);
+
+      window.__timelines["vpn-youtube-spot"] = tl;
+    </script>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="vpn-youtube-spot" data-composition-src="compositions/vpn-youtube-spot.html" data-start="0" data-duration="7" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/weight-wave.mdx b/docs/catalog/blocks/weight-wave.mdx
new file mode 100644
index 0000000000..bd463b4b44
--- /dev/null
+++ b/docs/catalog/blocks/weight-wave.mdx
@@ -0,0 +1,353 @@
+---
+title: "Weight Wave"
+description: "A crest of thickness travels along a headline: each character swells from light to black and leans forward as the wave passes, driven by the wght and slnt variable-font axes rather than by transforms."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/blocks/weight-wave.html"
+  compositionId="weight-wave"
+  compositionSrc="compositions/weight-wave.html"
+  variables={[{"id":"text","type":"string","label":"Headline","default":"PRESSURE MOVES THROUGH TYPE","maxLength":64},{"id":"color","type":"color","label":"Text color","default":"#f5f5f7"},{"id":"background","type":"color","label":"Background","default":"#0b0b0d"},{"id":"weightFrom","type":"number","label":"Weight (rest)","default":400,"min":300,"max":1000,"step":10},{"id":"weightTo","type":"number","label":"Weight (crest)","default":1000,"min":300,"max":1000,"step":10},{"id":"crestWidth","type":"number","label":"Crest width","default":4,"min":1,"max":24,"step":0.5,"unit":"chars"},{"id":"sweepSpeed","type":"number","label":"Sweep speed","default":0.5,"min":0.05,"max":3,"step":0.05,"unit":"passes/s"},{"id":"slant","type":"number","label":"Slant at crest","default":-12,"min":-15,"max":0,"step":0.5,"unit":"deg"},{"id":"direction","type":"enum","label":"Direction","default":"ltr","options":[{"value":"ltr","label":"Left to right"},{"value":"rtl","label":"Right to left"}]}]}
+>
+
+```html weight-wave.html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Weight Wave</title>
+    <style>
+      /*
+        Real variable font, bundled locally — a CDN fetch would be a render-time
+        network dependency, and a STATIC font would silently render every
+        character at one weight (the whole effect vanishes while nothing errors).
+        Subset of Recursive (SIL OFL 1.1) with every axis pinned except the two
+        this block drives. Ranges below are the font's REAL fvar records, read
+        out of the binary: wght 300..1000 (not 100..900) and slnt -15..0. The
+        pinned three are MONO 0 (proportional sans, not the monospace face),
+        CASL 0 (linear/neutral, not casual) and CRSV 0 (roman letterforms —
+        Recursive's 0.5 default swaps in cursive singlestorey forms as soon as
+        slnt goes negative, which would pop mid-wave instead of interpolating).
+      */
+      @font-face {
+        font-family: "Recursive Wave";
+        font-style: normal;
+        font-weight: 300 1000;
+        font-display: block;
+        src: url("assets/fonts/Recursive-wght-slnt-latin.woff2") format("woff2");
+      }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      body {
+        width: 1920px;
+        height: 1080px;
+      }
+
+      #ww-root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+
+      /* Full-bleed fill lives on a CHILD: the producer can drop a background
+         painted on the composition root itself (frame renders black). */
+      #ww-bg {
+        position: absolute;
+        inset: 0;
+        background: var(--background, #0b0b0d);
+      }
+
+      #ww-stage {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      #ww-line {
+        display: block;
+        width: 1760px;
+        text-align: center;
+        white-space: pre;
+        font-family: "Recursive Wave", sans-serif;
+        font-size: 132px;
+        line-height: 1.15;
+        letter-spacing: 0.005em;
+        color: var(--color, #f5f5f7);
+        /* Default instance: the resting end of the wave. If the variable font
+           fails to load, every glyph stays here and the probe below shouts. */
+        font-variation-settings:
+          "wght" 400,
+          "slnt" 0;
+      }
+
+      /* Per-character axis stamping target: no transform, no opacity — the
+         letterforms themselves change. */
+      .ww-ch {
+        display: inline-block;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="ww-root"
+      data-composition-id="weight-wave"
+      data-start="0"
+      data-duration="6"
+      data-width="1920"
+      data-height="1080"
+      data-composition-variables='[
+        {"id":"text","type":"string","label":"Headline","default":"PRESSURE MOVES THROUGH TYPE","maxLength":64},
+        {"id":"color","type":"color","label":"Text color","default":"#f5f5f7"},
+        {"id":"background","type":"color","label":"Background","default":"#0b0b0d"},
+        {"id":"weightFrom","type":"number","label":"Weight (rest)","default":400,"min":300,"max":1000,"step":10},
+        {"id":"weightTo","type":"number","label":"Weight (crest)","default":1000,"min":300,"max":1000,"step":10},
+        {"id":"crestWidth","type":"number","label":"Crest width","default":4,"min":1,"max":24,"step":0.5,"unit":"chars"},
+        {"id":"sweepSpeed","type":"number","label":"Sweep speed","default":0.5,"min":0.05,"max":3,"step":0.05,"unit":"passes/s"},
+        {"id":"slant","type":"number","label":"Slant at crest","default":-12,"min":-15,"max":0,"step":0.5,"unit":"deg"},
+        {"id":"direction","type":"enum","label":"Direction","default":"ltr","options":[{"value":"ltr","label":"Left to right"},{"value":"rtl","label":"Right to left"}]}
+      ]'
+    >
+      <div id="ww-bg"></div>
+
+      <div id="ww-stage" class="clip" data-start="0" data-duration="6" data-track-index="0">
+        <div id="ww-line"></div>
+      </div>
+
+      <script>
+        (function () {
+          window.__timelines = window.__timelines || {};
+
+          var FONT_FAMILY = '"Recursive Wave", sans-serif';
+          /* The bundled font's real fvar bounds — declared once here, and
+             mirrored in the variable min/max above. A slider must not offer a
+             weight the font cannot render. */
+          var WGHT_MIN = 300;
+          var WGHT_MAX = 1000;
+          var SLNT_MIN = -15;
+          var LINE_MAX_WIDTH = 1760;
+          var BASE_FONT_SIZE = 132;
+          var MIN_FONT_SIZE = 40;
+
+          var root = document.getElementById("ww-root");
+          var line = document.getElementById("ww-line");
+          var duration = Number(root.getAttribute("data-duration")) || 6;
+
+          var vars =
+            window.__hyperframes && window.__hyperframes.getVariables
+              ? window.__hyperframes.getVariables()
+              : {};
+
+          function num(value, fallback, min, max) {
+            var n = Number(value);
+            if (!Number.isFinite(n)) n = fallback;
+            return Math.min(max, Math.max(min, n));
+          }
+
+          var TEXT =
+            typeof vars.text === "string" && vars.text.length
+              ? vars.text
+              : "PRESSURE MOVES THROUGH TYPE";
+          var W_FROM = num(vars.weightFrom, 400, WGHT_MIN, WGHT_MAX);
+          var W_TO = num(vars.weightTo, 1000, WGHT_MIN, WGHT_MAX);
+          var CREST = num(vars.crestWidth, 4, 1, 24);
+          var SPEED = num(vars.sweepSpeed, 0.5, 0.05, 3);
+          var SLANT = num(vars.slant, -12, SLNT_MIN, 0);
+          var RTL = vars.direction === "rtl";
+
+          /* ── Build one span per character ─────────────────────────────────
+             Spaces get a span too, so the crest travels at a constant rate in
+             index space and the visual gap between words is honoured. */
+          var chars = Array.prototype.slice.call(TEXT);
+          var spans = chars.map(function (ch) {
+            var el = document.createElement("span");
+            el.className = "ww-ch";
+            el.textContent = ch;
+            line.appendChild(el);
+            return el;
+          });
+          var N = spans.length;
+
+          /* Fit at the HEAVIEST instance so the line never overflows mid-sweep;
+             the crest widens glyphs as it passes. */
+          var fitCanvas = document.createElement("canvas").getContext("2d");
+          var heaviest = Math.max(W_FROM, W_TO);
+          var fontSize = BASE_FONT_SIZE;
+          while (fontSize > MIN_FONT_SIZE) {
+            fitCanvas.font = heaviest + " " + fontSize + "px " + FONT_FAMILY;
+            if (fitCanvas.measureText(TEXT).width <= LINE_MAX_WIDTH) break;
+            fontSize -= 2;
+          }
+          line.style.fontSize = fontSize + "px";
+
+          /* ── The wave ─────────────────────────────────────────────────────
+             Closed form, no accumulators: every frame's state is a pure
+             function of the timeline position p, so a direct seek to frame N
+             and playing through to frame N produce identical pixels.
+
+               crest(p) = -CREST + wrap(p * duration * SPEED) * (N - 1 + 2*CREST)
+               f_i      = clamp(0, 1, 1 - |i - crest| / CREST)
+               wght_i   = round(lerp(W_FROM, W_TO, f_i))
+               slnt_i   = lerp(0, SLANT, f_i)
+
+             Per-character stagger is not a separate mechanism — it falls out of
+             the crest's distance to each index. */
+          var state = { p: 0 };
+          var travel = N - 1 + 2 * CREST;
+
+          function paint() {
+            var pass = state.p * duration * SPEED;
+            var phase = pass - Math.floor(pass); // wraps cleanly: f_i == 0 at both ends
+            var crest = -CREST + phase * travel;
+            if (RTL) crest = N - 1 - crest;
+            for (var i = 0; i < N; i++) {
+              var f = 1 - Math.abs(i - crest) / CREST;
+              if (f < 0) f = 0;
+              else if (f > 1) f = 1;
+              var wght = Math.round(W_FROM + (W_TO - W_FROM) * f);
+              var slnt = SLANT * f;
+              spans[i].style.fontVariationSettings =
+                '"wght" ' + wght + ', "slnt" ' + slnt.toFixed(2);
+            }
+          }
+
+          var tl = gsap.timeline({ paused: true });
+          tl.to(state, { p: 1, duration: duration, ease: "none", onUpdate: paint }, 0);
+          paint();
+          window.__timelines["weight-wave"] = tl;
+
+          /* ── The trap, made loud ──────────────────────────────────────────
+             A static font (or a failed load) renders every character at one
+             weight: the effect is invisible and nothing throws.
+
+             Measuring advance width does NOT detect that here. Recursive is
+             DUPLEXED — "HAMBURGEFONSTIV" measures exactly 925px at wght 300 and
+             at wght 1000, and identically at slnt 0 and -15. (Nice for layout:
+             the headline never reflows as the crest passes. Fatal for a
+             width-delta probe, which reads every weight as identical and cries
+             wolf on a perfectly healthy font.)
+
+             So rasterize and count ink, which cannot be duplexed away, AND ask
+             the font-loading API whether the family is actually there. Both are
+             needed: ink alone gives a false PASS when the family is missing,
+             because the fallback varies its ink with weight too. */
+          function probeAxes() {
+            var family = "Recursive Wave";
+            var loaded = !!(document.fonts && document.fonts.check('100px "' + family + '"'));
+            var c = document.createElement("canvas");
+            c.width = 1000;
+            c.height = 160;
+            var ctx = c.getContext("2d", { willReadFrequently: true });
+            function ink(weight) {
+              ctx.clearRect(0, 0, c.width, c.height);
+              ctx.font = weight + ' 100px "' + family + '"';
+              ctx.fillStyle = "#fff";
+              ctx.fillText("HAMBURGEFONSTIV", 10, 120);
+              var data = ctx.getImageData(0, 0, c.width, c.height).data;
+              var n = 0;
+              for (var i = 3; i < data.length; i += 4) if (data[i] > 8) n++;
+              return n;
+            }
+            var light = ink(WGHT_MIN);
+            var black = ink(WGHT_MAX);
+            // Only wght is probed: it is the axis whose absence is measurable
+            // from JS, and both axes ship in the same file — if wght is live,
+            // the variable font loaded. slnt is verified visually.
+            return {
+              fontLoaded: loaded,
+              wghtLive: black > light * 1.2,
+              inkAtMinWeight: light,
+              inkAtMaxWeight: black,
+            };
+          }
+
+          function publishProbe() {
+            var status = probeAxes();
+            status.ok = status.fontLoaded && status.wghtLive;
+            window.__WW_FONT_STATUS = status;
+            root.setAttribute("data-ww-font", status.ok ? "ok" : "missing-axes");
+            if (!status.ok) {
+              console.error(
+                "weight-wave: the variable font is not usable (loaded=" +
+                  status.fontLoaded +
+                  ", ink at wght " +
+                  WGHT_MIN +
+                  "=" +
+                  status.inkAtMinWeight +
+                  " vs " +
+                  WGHT_MAX +
+                  "=" +
+                  status.inkAtMaxWeight +
+                  "). assets/fonts/Recursive-wght-slnt-latin.woff2 did not load, or was " +
+                  "replaced with a static font — every character will render at one weight.",
+              );
+            }
+          }
+
+          if (document.fonts && document.fonts.ready) {
+            document.fonts.ready.then(publishProbe);
+          } else {
+            publishProbe();
+          }
+        })();
+      </script>
+    </div>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add weight-wave" />
+
+That writes `compositions/weight-wave.html`, plus 2 supporting files under `compositions/assets/fonts/`.
+
+## Add it to your video
+
+It runs for 6 seconds at 1920×1080. Paste this into your composition:
+
+```html index.html
+<div
+  data-composition-id="weight-wave"
+  data-composition-src="compositions/weight-wave.html"
+  data-start="0"
+  data-duration="6"
+  data-track-index="1"
+  data-width="1920"
+  data-height="1080"
+></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.
+
+{/* hf:generated-footer */}
+
+Tagged `typography` `kinetic-type` `title` `variable-font` `text`.
+
+## 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/whip-pan.mdx b/docs/catalog/blocks/whip-pan.mdx
index 8390feed14..b29dc2d4f0 100644
--- a/docs/catalog/blocks/whip-pan.mdx
+++ b/docs/catalog/blocks/whip-pan.mdx
@@ -3,34 +3,398 @@ title: "Whip Pan"
 description: "Shader transition simulating a fast camera whip pan"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/whip-pan.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/whip-pan.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/whip-pan.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Whip Pan preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add whip-pan
-```
+<InstallCommand command="npx hyperframes add whip-pan" />
 
 That writes one file: `compositions/whip-pan.html`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`whip-pan.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      @import url("https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Bebas+Neue&family=JetBrains+Mono:wght@400;700&family=Lato:wght@400;700&display=block");
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <style>
+        [data-composition-id="main"] {
+          width: 1920px;
+          height: 1080px;
+          overflow: hidden;
+          position: relative;
+          background: #0b132b;
+        }
+
+        /* Blueprint grid */
+        .bp-grid {
+          position: absolute;
+          inset: 0;
+          background-image:
+            linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
+            linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
+          background-size: 40px 40px;
+          pointer-events: none;
+        }
+
+        /* Layout */
+        .bp-left {
+          position: absolute;
+          left: 0;
+          top: 0;
+          bottom: 0;
+          width: 1200px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .bp-right {
+          position: absolute;
+          right: 0;
+          top: 0;
+          bottom: 0;
+          width: 720px;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          padding: 60px 60px 60px 40px;
+        }
+        .bp-divider {
+          position: absolute;
+          left: 1200px;
+          top: 60px;
+          bottom: 60px;
+          width: 1px;
+          background: #48bfe3;
+          opacity: 0.15;
+        }
+        .bp-number {
+          font-family: "Space Mono", monospace;
+          font-size: 14px;
+          font-weight: 700;
+          letter-spacing: 0.4em;
+          text-transform: uppercase;
+          position: absolute;
+          top: 40px;
+          left: 60px;
+          color: #48bfe3;
+        }
+
+        /* Right panel typography */
+        .bp-name {
+          font-family: "Bebas Neue", sans-serif;
+          font-size: 38px;
+          letter-spacing: 0.08em;
+          margin-bottom: 20px;
+          color: #48bfe3;
+        }
+        .bp-plabel {
+          font-family: "Space Mono", monospace;
+          font-size: 11px;
+          font-weight: 700;
+          letter-spacing: 0.3em;
+          text-transform: uppercase;
+          margin-bottom: 10px;
+          color: #48bfe3;
+          opacity: 0.5;
+        }
+        .bp-prompt {
+          font-family: "JetBrains Mono", monospace;
+          font-size: 20px;
+          line-height: 1.6;
+          padding: 16px 20px;
+          border-radius: 6px;
+          margin-bottom: 20px;
+          color: #48bfe3;
+          background: rgba(72, 191, 227, 0.06);
+          border: 1px solid rgba(72, 191, 227, 0.12);
+        }
+        .bp-desc {
+          font-family: "Lato", sans-serif;
+          font-size: 17px;
+          line-height: 1.6;
+          color: #7a9ab0;
+          opacity: 0.55;
+        }
+
+        /* GL scenes (hidden, just for texture capture) */
+        .scene {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1200px;
+          height: 1080px;
+          overflow: hidden;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .scene-label {
+          font-family: "Bebas Neue", sans-serif;
+          font-size: 140px;
+          letter-spacing: 0.06em;
+          opacity: 0.12;
+        }
+      </style>
+
+      <div class="bp-grid"></div>
+      <div class="bp-divider"></div>
+      <div class="bp-number">03 / 14</div>
+
+      <!-- GL demo scenes (captured as textures, then hidden) -->
+      <div id="s1" class="scene" style="background: #0b132b">
+        <div class="scene-label" style="color: #48bfe3">SCENE A</div>
+      </div>
+      <div id="s2" class="scene" style="background: #48bfe3; opacity: 0">
+        <div class="scene-label" style="color: #0b132b">SCENE B</div>
+      </div>
+
+      <!-- GL canvas (left panel only) -->
+      <canvas
+        id="gl-canvas"
+        width="1200"
+        height="1080"
+        style="
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1200px;
+          height: 1080px;
+          z-index: 10;
+          pointer-events: none;
+          display: none;
+        "
+      >
+      </canvas>
+
+      <!-- Right panel metadata -->
+      <div class="bp-right">
+        <div class="bp-name">Whip Pan</div>
+        <div class="bp-plabel">Prompt</div>
+        <div class="bp-prompt">"use whip pan shader transition"</div>
+        <div class="bp-desc">
+          Both scenes slide horizontally with 10-sample directional motion blur simulating a fast
+          camera pan.
+        </div>
+      </div>
 
-It runs for 4 seconds at 1920×1080. Paste this into your composition:
+      <div
+        id="driver"
+        class="clip"
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
 
-```html index.html
-<div
-  data-composition-id="whip-pan"
-  data-composition-src="compositions/whip-pan.html"
-  data-start="0"
-  data-duration="4"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      var glCanvas = document.getElementById("gl-canvas");
+      var gl = glCanvas.getContext("webgl", { preserveDrawingBuffer: true });
+      if (!gl) {
+        console.warn("WebGL not available");
+        window.__timelines["main"] = gsap.timeline({ paused: true });
+      } else {
+        gl.viewport(0, 0, 1200, 1080);
+        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
+        var sceneTextures = {};
+
+        function captureScene(sceneId) {
+          var scene = document.getElementById(sceneId);
+          var origOpacity = scene.style.opacity;
+          var origZ = scene.style.zIndex;
+          scene.style.opacity = "1";
+          scene.style.zIndex = "999";
+          scene.offsetHeight;
+          var c = document.createElement("canvas");
+          c.width = 1200;
+          c.height = 1080;
+          var ctx = c.getContext("2d");
+          ctx.fillStyle = window.getComputedStyle(scene).backgroundColor;
+          ctx.fillRect(0, 0, 1200, 1080);
+          var sr = scene.getBoundingClientRect();
+          var els = scene.querySelectorAll("*");
+          for (var i = 0; i < els.length; i++) {
+            var el = els[i],
+              cs = window.getComputedStyle(el);
+            if (cs.display === "none" || cs.visibility === "hidden") continue;
+            var r = el.getBoundingClientRect();
+            if (r.width < 1 || r.height < 1) continue;
+            var x = r.left - sr.left,
+              y = r.top - sr.top,
+              w = r.width,
+              h = r.height;
+            ctx.save();
+            ctx.globalAlpha = parseFloat(cs.opacity) || 1;
+            var bg = cs.backgroundColor;
+            if (bg && bg !== "rgba(0, 0, 0, 0)" && bg !== "transparent") {
+              ctx.fillStyle = bg;
+              ctx.fillRect(x, y, w, h);
+            }
+            var hasChildEls = el.querySelector("div,span,img,video");
+            var text = "";
+            for (var j = 0; j < el.childNodes.length; j++)
+              if (el.childNodes[j].nodeType === 3) text += el.childNodes[j].textContent;
+            text = text.trim();
+            if (text && !hasChildEls) {
+              ctx.font = cs.fontWeight + " " + cs.fontSize + " " + cs.fontFamily;
+              ctx.fillStyle = cs.color;
+              if (cs.letterSpacing && cs.letterSpacing !== "normal")
+                ctx.letterSpacing = cs.letterSpacing;
+              ctx.textAlign = "center";
+              ctx.textBaseline = "middle";
+              ctx.fillText(text, x + w / 2, y + h / 2);
+            }
+            ctx.restore();
+          }
+          scene.style.opacity = origOpacity;
+          scene.style.zIndex = origZ;
+          var tex = gl.createTexture();
+          gl.bindTexture(gl.TEXTURE_2D, tex);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+          gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, c);
+          sceneTextures[sceneId] = tex;
+        }
+
+        var vertSrc =
+          "attribute vec2 a_pos; varying vec2 v_uv; void main(){" +
+          "v_uv=a_pos*0.5+0.5; v_uv.y=1.0-v_uv.y; gl_Position=vec4(a_pos,0,1);}";
+        var quadBuf = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);
+        gl.bufferData(
+          gl.ARRAY_BUFFER,
+          new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),
+          gl.STATIC_DRAW,
+        );
+        function compileShader(src, type) {
+          var s = gl.createShader(type);
+          gl.shaderSource(s, src);
+          gl.compileShader(s);
+          if (!gl.getShaderParameter(s, gl.COMPILE_STATUS))
+            console.error("Shader:", gl.getShaderInfoLog(s));
+          return s;
+        }
+        function mkProg(fragSrc) {
+          var p = gl.createProgram();
+          gl.attachShader(p, compileShader(vertSrc, gl.VERTEX_SHADER));
+          gl.attachShader(p, compileShader(fragSrc, gl.FRAGMENT_SHADER));
+          gl.linkProgram(p);
+          if (!gl.getProgramParameter(p, gl.LINK_STATUS))
+            console.error("Link:", gl.getProgramInfoLog(p));
+          return p;
+        }
+
+        var H =
+          "precision mediump float;" +
+          "varying vec2 v_uv;" +
+          "uniform sampler2D u_from, u_to;" +
+          "uniform float u_progress;" +
+          "uniform vec2 u_resolution;\n";
+
+        var progPass = mkProg(H + "void main(){gl_FragColor=texture2D(u_from,v_uv);}");
+        var progTrans = mkProg(
+          H +
+            "void main(){float fromOff=u_progress*1.5;vec3 fromC=vec3(0.);for(int i=0;i<10;i++){float f=float(i)/10.;vec2 fuv=vec2(v_uv.x+fromOff+u_progress*.08*f,v_uv.y);fromC+=texture2D(u_from,clamp(fuv,0.,1.)).rgb;}fromC/=10.;float toOff=(1.-u_progress)*1.5;vec3 toC=vec3(0.);for(int i=0;i<10;i++){float f=float(i)/10.;vec2 tuv=vec2(v_uv.x-toOff-(1.-u_progress)*.08*f,v_uv.y);toC+=texture2D(u_to,clamp(tuv,0.,1.)).rgb;}toC/=10.;gl_FragColor=vec4(mix(fromC,toC,u_progress),1.);}",
+        );
+
+        function renderShader(prog, texFrom, texTo, progress) {
+          gl.useProgram(prog);
+          gl.activeTexture(gl.TEXTURE0);
+          gl.bindTexture(gl.TEXTURE_2D, texFrom);
+          gl.uniform1i(gl.getUniformLocation(prog, "u_from"), 0);
+          gl.activeTexture(gl.TEXTURE1);
+          gl.bindTexture(gl.TEXTURE_2D, texTo);
+          gl.uniform1i(gl.getUniformLocation(prog, "u_to"), 1);
+          gl.uniform1f(gl.getUniformLocation(prog, "u_progress"), progress);
+          gl.uniform2f(gl.getUniformLocation(prog, "u_resolution"), 1200, 1080);
+          var pos = gl.getAttribLocation(prog, "a_pos");
+          gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);
+          gl.enableVertexAttribArray(pos);
+          gl.vertexAttribPointer(pos, 2, gl.FLOAT, false, 0, 0);
+          gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+        }
+
+        function easeInOut(p) {
+          return p < 0.5 ? 2 * p * p : 1 - Math.pow(-2 * p + 2, 2) / 2;
+        }
+
+        captureScene("s1");
+        captureScene("s2");
+        glCanvas.style.display = "block";
+        renderShader(progPass, sceneTextures["s1"], sceneTextures["s1"], 0);
+        document.querySelectorAll(".scene").forEach(function (s) {
+          s.style.opacity = "0";
+        });
+
+        var tl = gsap.timeline({
+          paused: true,
+          onUpdate: function () {
+            var t = tl.time();
+            if (t >= 1.0 && t < 3.0) {
+              renderShader(
+                progTrans,
+                sceneTextures["s1"],
+                sceneTextures["s2"],
+                easeInOut((t - 1.0) / 2.0),
+              );
+            } else if (t >= 3.0) {
+              renderShader(progPass, sceneTextures["s2"], sceneTextures["s2"], 0);
+            } else {
+              renderShader(progPass, sceneTextures["s1"], sceneTextures["s1"], 0);
+            }
+          },
+        });
+        tl.to({ v: 0 }, { v: 1, duration: 4, ease: "none" }, 0);
+        window.__timelines["main"] = tl;
+      } // end if (gl)
+    </script>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="whip-pan" data-composition-src="compositions/whip-pan.html" data-start="0" data-duration="4" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/world-map.mdx b/docs/catalog/blocks/world-map.mdx
index 3e52e907ad..b5214d2019 100644
--- a/docs/catalog/blocks/world-map.mdx
+++ b/docs/catalog/blocks/world-map.mdx
@@ -3,34 +3,467 @@ title: "World Map"
 description: "Animated world choropleth with country-by-country reveal, tooltip labels, and rotating globe inset — D3 Natural Earth projection"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/world-map.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/world-map.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/world-map.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="World Map preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add world-map
-```
+<InstallCommand command="npx hyperframes add world-map" />
 
 That writes one file: `compositions/world-map.html`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`world-map.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>World Map</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=block"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/topojson-client@3.1.0/dist/topojson-client.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0f172a;
+      }
+
+      #world-map {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        background: linear-gradient(145deg, #0f172a 0%, #1e293b 100%);
+        font-family: "Inter", sans-serif;
+        color: #f0fdfa;
+        overflow: hidden;
+      }
+
+      #world-map .headline {
+        position: absolute;
+        top: 48px;
+        left: 80px;
+        font-size: 52px;
+        font-weight: 700;
+        letter-spacing: -0.02em;
+        color: #f0fdfa;
+        clip-path: inset(0 100% 0 0);
+      }
+
+      #world-map .subtitle {
+        position: absolute;
+        top: 114px;
+        left: 80px;
+        font-size: 22px;
+        font-weight: 300;
+        color: #94a3b8;
+        opacity: 0;
+      }
+
+      #world-map .map-container {
+        position: absolute;
+        top: 170px;
+        left: 80px;
+        width: 1380px;
+        height: 700px;
+      }
+
+      #world-map .map-container svg {
+        width: 1380px;
+        height: 700px;
+      }
+
+      #world-map .country-path {
+        stroke: #1e293b;
+        stroke-width: 0.6;
+        opacity: 0;
+        cursor: default;
+      }
+
+      #world-map .ocean {
+        fill: none;
+      }
+
+      #world-map .graticule {
+        fill: none;
+        stroke: #1e293b;
+        stroke-width: 0.3;
+        stroke-opacity: 0.4;
+      }
+
+      #world-map .legend-group {
+        position: absolute;
+        bottom: 80px;
+        right: 80px;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+        gap: 8px;
+        opacity: 0;
+      }
+
+      #world-map .legend-bar {
+        width: 280px;
+        height: 14px;
+        border-radius: 7px;
+      }
+
+      #world-map .legend-labels {
+        display: flex;
+        justify-content: space-between;
+        width: 280px;
+        font-size: 13px;
+        font-weight: 500;
+        color: #94a3b8;
+      }
+
+      #world-map .source {
+        position: absolute;
+        bottom: 36px;
+        left: 80px;
+        font-size: 13px;
+        font-weight: 400;
+        color: #475569;
+        opacity: 0;
+      }
+
+      #world-map .tooltip {
+        position: absolute;
+        pointer-events: none;
+        background: rgba(15, 23, 42, 0.92);
+        border: 1px solid #334155;
+        border-radius: 8px;
+        padding: 10px 16px;
+        font-size: 14px;
+        font-weight: 500;
+        color: #f0fdfa;
+        white-space: nowrap;
+        opacity: 0;
+        transform: translateY(4px);
+        backdrop-filter: blur(8px);
+        z-index: 10;
+      }
+
+      #world-map .tooltip .tt-value {
+        color: #22d3ee;
+        font-weight: 600;
+        margin-left: 6px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="world-map"
+      data-composition-id="world-map"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="14"
+    >
+      <h1 class="headline">Global GDP per Capita</h1>
+      <p class="subtitle">Nominal GDP per capita, 2024 IMF estimates</p>
+
+      <div class="map-container">
+        <svg id="world-map-svg"></svg>
+      </div>
+
+      <div class="legend-group">
+        <div
+          class="legend-bar"
+          style="
+            background: linear-gradient(90deg, #064e3b 0%, #0d9488 33%, #22d3ee 66%, #f0fdfa 100%);
+          "
+        ></div>
+        <div class="legend-labels">
+          <span>Low</span>
+          <span>High</span>
+        </div>
+      </div>
+
+      <p class="source">Source: International Monetary Fund</p>
+
+      <div class="tooltip"></div>
+    </div>
+
+    <script>
+      (function () {
+        /* ── GDP per capita data (2024 IMF estimates, USD) ── */
+        /* Keys are ISO 3166-1 numeric codes as strings (3-digit, zero-padded) */
+        var gdpData = {
+          840: { name: "United States", gdp: 85373 },
+          156: { name: "China", gdp: 13136 },
+          356: { name: "India", gdp: 2731 },
+          276: { name: "Germany", gdp: 54291 },
+          826: { name: "United Kingdom", gdp: 48913 },
+          250: { name: "France", gdp: 44408 },
+          392: { name: "Japan", gdp: 33950 },
+          "076": { name: "Brazil", gdp: 10412 },
+          "036": { name: "Australia", gdp: 65366 },
+          124: { name: "Canada", gdp: 54866 },
+          643: { name: "Russia", gdp: 14403 },
+          410: { name: "South Korea", gdp: 33147 },
+          484: { name: "Mexico", gdp: 13434 },
+          360: { name: "Indonesia", gdp: 5108 },
+          566: { name: "Nigeria", gdp: 1621 },
+          710: { name: "South Africa", gdp: 6190 },
+          818: { name: "Egypt", gdp: 4295 },
+          792: { name: "Turkey", gdp: 13110 },
+          682: { name: "Saudi Arabia", gdp: 32270 },
+          764: { name: "Thailand", gdp: 7647 },
+          704: { name: "Vietnam", gdp: 4623 },
+          616: { name: "Poland", gdp: 22393 },
+          752: { name: "Sweden", gdp: 59324 },
+          578: { name: "Norway", gdp: 94660 },
+          756: { name: "Switzerland", gdp: 105669 },
+          "032": { name: "Argentina", gdp: 13709 },
+          170: { name: "Colombia", gdp: 7230 },
+          404: { name: "Kenya", gdp: 2198 },
+          586: { name: "Pakistan", gdp: 1658 },
+          "050": { name: "Bangladesh", gdp: 2688 },
+        };
+
+        /* Top 5 GDP countries for highlight pulse */
+        var top5Codes = ["756", "578", "840", "036", "752"];
 
-It runs for 14 seconds at 1920×1080. Paste this into your composition:
+        /* GDP range for color scale */
+        var gdpValues = [];
+        var codes = Object.keys(gdpData);
+        for (var i = 0; i < codes.length; i++) {
+          gdpValues.push(gdpData[codes[i]].gdp);
+        }
+        var minGdp = Math.min.apply(null, gdpValues);
+        var maxGdp = Math.max.apply(null, gdpValues);
 
-```html index.html
-<div
-  data-composition-id="world-map"
-  data-composition-src="compositions/world-map.html"
-  data-start="0"
-  data-duration="14"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+        /* Color interpolation: green → teal → cyan → white */
+        var colorStops = [
+          { r: 6, g: 78, b: 59 },
+          { r: 13, g: 148, b: 136 },
+          { r: 34, g: 211, b: 238 },
+          { r: 240, g: 253, b: 250 },
+        ];
+
+        function gdpToColor(value) {
+          var t = (value - minGdp) / (maxGdp - minGdp);
+          t = Math.max(0, Math.min(1, t));
+          var scaledT = t * (colorStops.length - 1);
+          var idx = Math.floor(scaledT);
+          if (idx >= colorStops.length - 1) idx = colorStops.length - 2;
+          var localT = scaledT - idx;
+          var c0 = colorStops[idx];
+          var c1 = colorStops[idx + 1];
+          var r = Math.round(c0.r + (c1.r - c0.r) * localT);
+          var g = Math.round(c0.g + (c1.g - c0.g) * localT);
+          var b = Math.round(c0.b + (c1.b - c0.b) * localT);
+          return "rgb(" + r + "," + g + "," + b + ")";
+        }
+
+        /* Default fill for countries without data */
+        var defaultFill = "#1e293b";
+
+        /* ── Build the map ── */
+        var svg = d3
+          .select("#world-map-svg")
+          .attr("viewBox", "0 0 1380 700")
+          .attr("preserveAspectRatio", "xMidYMid meet");
+
+        var projection = d3.geoNaturalEarth1().fitSize([1380, 700], { type: "Sphere" });
+
+        var pathGenerator = d3.geoPath().projection(projection);
+
+        /* Graticule */
+        var graticule = d3.geoGraticule10();
+        svg.append("path").datum(graticule).attr("class", "graticule").attr("d", pathGenerator);
+
+        /* Tooltip element */
+        var tooltipEl = document.querySelector("#world-map .tooltip");
+
+        /* Fetch topology and render countries */
+        d3.json("https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json").then(
+          function (world) {
+            var countries = topojson.feature(world, world.objects.countries).features;
+
+            svg
+              .selectAll(".country-path")
+              .data(countries)
+              .enter()
+              .append("path")
+              .attr("class", "country-path")
+              .attr("d", pathGenerator)
+              .attr("data-country", function (d) {
+                return String(d.id).padStart(3, "0");
+              })
+              .attr("fill", function (d) {
+                var code = String(d.id).padStart(3, "0");
+                if (gdpData[code]) {
+                  return gdpToColor(gdpData[code].gdp);
+                }
+                return defaultFill;
+              })
+              .on("mouseenter", function (event, d) {
+                var code = String(d.id).padStart(3, "0");
+                if (gdpData[code]) {
+                  var entry = gdpData[code];
+                  tooltipEl.innerHTML =
+                    entry.name +
+                    '<span class="tt-value">$' +
+                    entry.gdp.toLocaleString() +
+                    "</span>";
+                  tooltipEl.style.opacity = "1";
+                  tooltipEl.style.transform = "translateY(0)";
+                }
+              })
+              .on("mousemove", function (event) {
+                var container = document.querySelector("#world-map");
+                var rect = container.getBoundingClientRect();
+                var x = event.clientX - rect.left + 16;
+                var y = event.clientY - rect.top - 40;
+                tooltipEl.style.left = x + "px";
+                tooltipEl.style.top = y + "px";
+              })
+              .on("mouseleave", function () {
+                tooltipEl.style.opacity = "0";
+                tooltipEl.style.transform = "translateY(4px)";
+              });
+
+            /* ── GSAP Timeline ── */
+            buildTimeline();
+          },
+        );
+
+        function buildTimeline() {
+          var tl = gsap.timeline({ paused: true });
+
+          /* 0s: Headline clip-path wipe reveal (1s) */
+          tl.to(
+            "#world-map .headline",
+            {
+              clipPath: "inset(0 0% 0 0)",
+              duration: 1,
+              ease: "power3.inOut",
+            },
+            0,
+          );
+
+          /* 0.4s: Subtitle fade in (0.6s) */
+          tl.to(
+            "#world-map .subtitle",
+            {
+              opacity: 1,
+              duration: 0.6,
+              ease: "power2.out",
+            },
+            0.4,
+          );
+
+          /* 1.0s: Countries stagger reveal */
+          tl.to(
+            "#world-map .country-path",
+            {
+              opacity: 1,
+              duration: 0.3,
+              stagger: {
+                each: 0.02,
+                from: "center",
+              },
+              ease: "power1.out",
+            },
+            1.0,
+          );
+
+          /* 4.0s: Legend fade in */
+          tl.to(
+            "#world-map .legend-group",
+            {
+              opacity: 1,
+              duration: 0.6,
+              ease: "power2.out",
+            },
+            4.0,
+          );
+
+          /* 4.5s: Source fade in */
+          tl.to(
+            "#world-map .source",
+            {
+              opacity: 1,
+              duration: 0.5,
+              ease: "power2.out",
+            },
+            4.5,
+          );
+
+          /* 5.0s: Highlight pulse on top 5 GDP countries */
+          for (var i = 0; i < top5Codes.length; i++) {
+            var selector = '#world-map [data-country="' + top5Codes[i] + '"]';
+
+            /* Pulse up: brightness + white stroke */
+            tl.to(
+              selector,
+              {
+                filter: "brightness(1.5)",
+                stroke: "#ffffff",
+                strokeWidth: 1.8,
+                duration: 0.4,
+                ease: "power2.out",
+              },
+              5.0 + i * 0.15,
+            );
+
+            /* Pulse back to normal */
+            tl.to(
+              selector,
+              {
+                filter: "brightness(1)",
+                stroke: "#1e293b",
+                strokeWidth: 0.6,
+                duration: 0.6,
+                ease: "power2.inOut",
+              },
+              5.0 + i * 0.15 + 0.4,
+            );
+          }
+
+          /* Register timeline */
+          if (!window.__timelines) {
+            window.__timelines = {};
+          }
+          window.__timelines["world-map"] = tl;
+        }
+      })();
+    </script>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="world-map" data-composition-src="compositions/world-map.html" data-start="0" data-duration="14" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/x-post.mdx b/docs/catalog/blocks/x-post.mdx
index 3e07e60718..74495868e7 100644
--- a/docs/catalog/blocks/x-post.mdx
+++ b/docs/catalog/blocks/x-post.mdx
@@ -3,34 +3,474 @@ title: "X Post Card"
 description: "Animated X/Twitter post card overlay with engagement metrics"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/x-post.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/x-post.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/x-post.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="X Post Card preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add x-post
-```
+<InstallCommand command="npx hyperframes add x-post" />
 
 That writes one file: `compositions/x-post.html`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`x-post.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=block"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      body {
+        width: 1920px;
+        height: 1080px;
+        font-family: "Inter", sans-serif;
+      }
+
+      [data-composition-id="x-post"] .x-card {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 880px;
+        background: #15202b;
+        border-radius: 20px;
+        padding: 36px 36px 28px;
+        box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
+        border: 1px solid #38444d;
+        overflow: hidden;
+      }
+
+      /* Bottom glow */
+      [data-composition-id="x-post"] .x-card::after {
+        content: "";
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 80px;
+        background: linear-gradient(to top, rgba(29, 155, 240, 0.08), transparent);
+        pointer-events: none;
+      }
+
+      /* Header row */
+      [data-composition-id="x-post"] .post-header {
+        display: flex;
+        align-items: flex-start;
+        gap: 14px;
+        margin-bottom: 18px;
+        position: relative;
+      }
+
+      [data-composition-id="x-post"] .avatar {
+        width: 52px;
+        height: 52px;
+        flex-shrink: 0;
+        border-radius: 50%;
+        overflow: hidden;
+      }
+
+      [data-composition-id="x-post"] .avatar svg {
+        width: 52px;
+        height: 52px;
+        display: block;
+      }
+
+      [data-composition-id="x-post"] .user-info {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        flex: 1;
+      }
+
+      [data-composition-id="x-post"] .name-row {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+      }
+
+      [data-composition-id="x-post"] .display-name {
+        font-size: 26px;
+        font-weight: 700;
+        color: #e7e9ea;
+        line-height: 1.3;
+      }
+
+      [data-composition-id="x-post"] .verified-badge svg {
+        width: 22px;
+        height: 22px;
+        display: block;
+      }
+
+      [data-composition-id="x-post"] .handle {
+        font-size: 22px;
+        font-weight: 400;
+        color: #8b98a5;
+        line-height: 1.3;
+      }
+
+      /* X logo top-right */
+      [data-composition-id="x-post"] .x-logo {
+        position: absolute;
+        top: 2px;
+        right: 0;
+        width: 32px;
+        height: 32px;
+      }
+
+      [data-composition-id="x-post"] .x-logo svg {
+        width: 32px;
+        height: 32px;
+        display: block;
+      }
+
+      /* Tweet body */
+      [data-composition-id="x-post"] .tweet-body {
+        font-size: 30px;
+        font-weight: 400;
+        color: #e7e9ea;
+        line-height: 1.45;
+        margin-bottom: 12px;
+        display: -webkit-box;
+        -webkit-line-clamp: 4;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+      }
+
+      [data-composition-id="x-post"] .hashtag {
+        color: #1d9bf0;
+      }
+
+      /* Timestamp */
+      [data-composition-id="x-post"] .timestamp {
+        font-size: 22px;
+        color: #8b98a5;
+        padding-bottom: 20px;
+        border-bottom: 1px solid #38444d;
+        margin-bottom: 16px;
+      }
+
+      /* Metrics bar — matches real X spacing */
+      [data-composition-id="x-post"] .metrics-bar {
+        display: flex;
+        align-items: center;
+        padding: 0;
+        position: relative;
+        z-index: 1;
+      }
+
+      [data-composition-id="x-post"] .metrics-left {
+        display: flex;
+        align-items: center;
+        flex: 1;
+        justify-content: space-between;
+        padding-right: 60px;
+      }
+
+      [data-composition-id="x-post"] .metrics-right {
+        display: flex;
+        align-items: center;
+        gap: 20px;
+      }
+
+      [data-composition-id="x-post"] .metric {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+
+      [data-composition-id="x-post"] .metric-icon {
+        width: 35px;
+        height: 35px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
 
-It runs for 5 seconds at 1920×1080. Paste this into your composition:
+      [data-composition-id="x-post"] .metric-icon svg {
+        width: 35px;
+        height: 35px;
+        display: block;
+      }
 
-```html index.html
-<div
-  data-composition-id="x-post"
-  data-composition-src="compositions/x-post.html"
-  data-start="0"
-  data-duration="5"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+      [data-composition-id="x-post"] .metric-count {
+        font-size: 20px;
+        font-weight: 400;
+        color: #8b98a5;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="x-post"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="5"
+    >
+      <div id="card" class="clip x-card" data-start="0" data-duration="5" data-track-index="0">
+        <!-- Header: prompt to replace display name, handle, and avatar -->
+        <div class="post-header">
+          <div class="avatar">
+            <svg viewBox="0 0 52 52" fill="none">
+              <circle cx="26" cy="26" r="26" fill="#536471" />
+              <circle cx="26" cy="21" r="10" fill="#8b98a5" />
+              <ellipse cx="26" cy="42" rx="16" ry="12" fill="#8b98a5" />
+            </svg>
+          </div>
+          <div class="user-info">
+            <div class="name-row">
+              <span class="display-name">Hyperframes</span>
+              <span class="verified-badge">
+                <svg viewBox="0 0 22 22" fill="none">
+                  <circle cx="11" cy="11" r="11" fill="#1d9bf0" />
+                  <path
+                    d="M9.5 14.25L6.25 11l1.06-1.06 2.19 2.19 4.69-4.69L15.25 8.5 9.5 14.25z"
+                    fill="#fff"
+                  />
+                </svg>
+              </span>
+            </div>
+            <span class="handle">@hyperframes</span>
+          </div>
+          <div class="x-logo">
+            <svg viewBox="0 0 24 24" fill="#e7e9ea">
+              <path
+                d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"
+              />
+            </svg>
+          </div>
+        </div>
+
+        <!-- Tweet body: prompt to replace with your content -->
+        <div class="tweet-body">
+          Prompt to replace this text with your tweet. Change the display name, handle, timestamp,
+          and engagement counts to match your content. <span class="hashtag">#YourHashtag</span>
+        </div>
+
+        <!-- Timestamp: prompt to replace -->
+        <div class="timestamp">1:10 PM &middot; Apr 7, 2026</div>
+
+        <!-- Metrics bar -->
+        <div class="metrics-bar">
+          <div class="metrics-left">
+            <!-- Reply -->
+            <div class="metric">
+              <div class="metric-icon">
+                <svg viewBox="0 0 24 24" fill="#8b98a5">
+                  <path
+                    d="M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z"
+                  />
+                </svg>
+              </div>
+              <span class="metric-count">34</span>
+            </div>
+
+            <!-- Repost -->
+            <div class="metric">
+              <div class="metric-icon">
+                <svg viewBox="0 0 24 24" fill="#8b98a5">
+                  <path
+                    d="M4.5 3.88l4.432 4.14-1.364 1.46L5.5 7.55V16c0 1.1.896 2 2 2H13v2H7.5c-2.209 0-4-1.79-4-4V7.55L1.432 9.48.068 8.02 4.5 3.88zM16.5 6H11V4h5.5c2.209 0 4 1.79 4 4v8.45l2.068-1.93 1.364 1.46-4.432 4.14-4.432-4.14 1.364-1.46 2.068 1.93V8c0-1.1-.896-2-2-2z"
+                  />
+                </svg>
+              </div>
+              <span class="metric-count">2.3K</span>
+            </div>
+
+            <!-- Like -->
+            <div id="like-btn" class="metric">
+              <div class="metric-icon">
+                <svg viewBox="0 0 24 24">
+                  <!-- Outline heart (visible initially) -->
+                  <path
+                    id="heart-outline"
+                    d="M16.697 5.5c-1.222-.06-2.679.51-3.89 2.16l-.805 1.09-.806-1.09C9.984 6.01 8.526 5.44 7.304 5.5c-1.243.07-2.349.78-2.91 1.91-.552 1.12-.633 2.78.479 4.82 1.074 1.97 3.257 4.27 7.129 6.61 3.87-2.34 6.052-4.64 7.126-6.61 1.111-2.04 1.03-3.7.477-4.82-.561-1.13-1.666-1.84-2.908-1.91zm4.187 7.69c-1.351 2.48-4.001 5.12-8.379 7.67l-.503.3-.504-.3c-4.379-2.55-7.029-5.19-8.382-7.67-1.36-2.5-1.41-4.86-.514-6.67.887-1.79 2.647-2.91 4.601-3.01 1.651-.09 3.368.56 4.798 2.01 1.429-1.45 3.146-2.1 4.796-2.01 1.954.1 3.714 1.22 4.601 3.01.896 1.81.846 4.17-.514 6.67z"
+                    fill="#8b98a5"
+                  />
+                  <!-- Filled heart (hidden initially, shown on like) -->
+                  <path
+                    id="heart-filled"
+                    d="M20.884 13.19c-1.351 2.48-4.001 5.12-8.379 7.67l-.503.3-.504-.3c-4.379-2.55-7.029-5.19-8.382-7.67-1.36-2.5-1.41-4.86-.514-6.67.887-1.79 2.647-2.91 4.601-3.01 1.651-.09 3.368.56 4.798 2.01 1.429-1.45 3.146-2.1 4.796-2.01 1.954.1 3.714 1.22 4.601 3.01.896 1.81.846 4.17-.514 6.67z"
+                    fill="#f91880"
+                    opacity="0"
+                  />
+                </svg>
+              </div>
+              <span id="like-count" class="metric-count">10.9K</span>
+            </div>
+
+            <!-- Views -->
+            <div class="metric">
+              <div class="metric-icon">
+                <svg viewBox="0 0 24 24" fill="#8b98a5">
+                  <path
+                    d="M8.75 21V3h2v18h-2zM18 21V8.5h2V21h-2zM4 21l.004-10h2L6 21H4zm9.248 0v-7h2v7h-2z"
+                  />
+                </svg>
+              </div>
+              <span class="metric-count">150K</span>
+            </div>
+          </div>
+
+          <div class="metrics-right">
+            <!-- Bookmark -->
+            <div class="metric">
+              <div class="metric-icon">
+                <svg viewBox="0 0 24 24" fill="#8b98a5">
+                  <path
+                    d="M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5zM6.5 4c-.276 0-.5.22-.5.5v14.56l6-4.29 6 4.29V4.5c0-.28-.224-.5-.5-.5h-11z"
+                  />
+                </svg>
+              </div>
+            </div>
+
+            <!-- Share -->
+            <div class="metric">
+              <div class="metric-icon">
+                <svg viewBox="0 0 24 24" fill="#8b98a5">
+                  <path
+                    d="M12 2.59l5.7 5.7-1.41 1.42L13 6.41V16h-2V6.41l-3.3 3.3-1.41-1.42L12 2.59zM21 15l-.02 3.51c0 1.38-1.12 2.49-2.5 2.49H5.5C4.11 21 3 19.88 3 18.5V15h2v3.5c0 .28.22.5.5.5h12.98c.28 0 .5-.22.5-.5L19 15h2z"
+                  />
+                </svg>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      var tl = gsap.timeline({ paused: true });
+
+      var card = document.getElementById("card");
+      var likeBtn = document.getElementById("like-btn");
+      var heartOutline = document.getElementById("heart-outline");
+      var heartFilled = document.getElementById("heart-filled");
+      var likeCount = document.getElementById("like-count");
+
+      // Start off-screen below
+      gsap.set(card, { y: 400, opacity: 0 });
+
+      // Slide in from bottom
+      tl.to(
+        card,
+        {
+          y: 0,
+          opacity: 1,
+          duration: 0.6,
+          ease: "power3.out",
+        },
+        0.1,
+      );
+
+      // Like press-in
+      tl.to(
+        likeBtn,
+        {
+          scale: 0.85,
+          duration: 0.12,
+          ease: "power2.out",
+        },
+        1.5,
+      );
+
+      // Like release with spring bounce
+      tl.to(
+        likeBtn,
+        {
+          scale: 1,
+          duration: 0.4,
+          ease: "elastic.out(1, 0.4)",
+        },
+        1.62,
+      );
+
+      // Hide outline heart
+      tl.to(
+        heartOutline,
+        {
+          opacity: 0,
+          duration: 0.01,
+          ease: "none",
+        },
+        1.62,
+      );
+
+      // Show filled heart
+      tl.to(
+        heartFilled,
+        {
+          opacity: 1,
+          duration: 0.12,
+          ease: "none",
+        },
+        1.62,
+      );
+
+      // Like count turns pink + increments
+      tl.to(
+        likeCount,
+        {
+          color: "#f91880",
+          duration: 0.12,
+          ease: "none",
+          onStart: function () {
+            likeCount.textContent = "11.0K";
+          },
+        },
+        1.62,
+      );
+
+      // Slide out to bottom
+      tl.to(
+        card,
+        {
+          y: 400,
+          opacity: 0,
+          duration: 0.3,
+          ease: "power3.in",
+        },
+        4.2,
+      );
+
+      window.__timelines["x-post"] = tl;
+    </script>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="x-post" data-composition-src="compositions/x-post.html" data-start="0" data-duration="5" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/yt-comment-card.mdx b/docs/catalog/blocks/yt-comment-card.mdx
index 281ceefbaa..2a61283fd6 100644
--- a/docs/catalog/blocks/yt-comment-card.mdx
+++ b/docs/catalog/blocks/yt-comment-card.mdx
@@ -3,13 +3,13 @@ title: "Comment Cards"
 description: "Social comments typing on over footage: avatar pop, username and time, per-character typewriter, likes row; image avatars or initials chips"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-comment-card.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-comment-card.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/yt-comment-card.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Comment Cards preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add yt-comment-card
-```
+<InstallCommand command="npx hyperframes add yt-comment-card" />
 
 That writes one file: `compositions/yt-comment-card.html`.
 
@@ -32,6 +32,333 @@ It runs for 8 seconds at 1920×1080. Paste this into your composition:
 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={`yt-comment-card.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      #yt-cc-root {
+        /* ---- yt tokens: override in the host to re-skin the family ---- */
+        --yt-font: "Inter", -apple-system, sans-serif;
+        --yt-ink: #1d1d1f;
+        --yt-ink-dim: #5a5a5f;
+        /* overlay-scheme text over footage — distinct from the --yt-ink board tokens */
+        --yt-text: #ffffff;
+        --yt-text-dim: rgba(255, 255, 255, 0.72);
+        --yt-red: #e62e2e;
+        --yt-cyan: #35c8d9;
+        --yt-scanline-alpha: 0.04;
+        --yt-scanline-gap: 3px;
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent; /* overlays footage or a yt-lcd board */
+        font-family: var(--yt-font);
+      }
+      /* optional full-frame LCD pass while comments are up */
+      #yt-cc-scan {
+        position: absolute;
+        inset: 0;
+        display: none;
+        background: repeating-linear-gradient(
+          0deg,
+          rgba(0, 0, 0, var(--yt-scanline-alpha)) 0 1px,
+          transparent 1px var(--yt-scanline-gap)
+        );
+      }
+      #yt-cc-col {
+        position: absolute;
+        display: flex;
+        flex-direction: column;
+        gap: 40px;
+      }
+      .yt-cc-card {
+        display: flex;
+        gap: 22px;
+        align-items: flex-start;
+      }
+      .yt-cc-avatar {
+        flex: none;
+        width: 64px;
+        height: 64px;
+        border-radius: 50%;
+        overflow: hidden;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: 700;
+        font-size: 26px;
+        color: #ffffff;
+        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
+      }
+      .yt-cc-avatar img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+      .yt-cc-meta {
+        display: flex;
+        align-items: baseline;
+        gap: 14px;
+      }
+      .yt-cc-user {
+        font-weight: 700;
+        font-size: 27px;
+      }
+      .yt-cc-time {
+        font-weight: 400;
+        font-size: 23px;
+      }
+      .yt-cc-text {
+        margin-top: 8px;
+        font-weight: 500;
+        font-size: 34px;
+        line-height: 1.35;
+        letter-spacing: -0.01em;
+        max-width: 860px;
+      }
+      .yt-cc-text .ch {
+        opacity: 0;
+      }
+      .yt-cc-row {
+        margin-top: 12px;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        font-weight: 600;
+        font-size: 22px;
+        opacity: 0;
+      }
+      .yt-cc-row svg {
+        width: 24px;
+        stroke-width: 2.4;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        fill: none;
+      }
+      .yt-cc-reply {
+        margin-left: 18px;
+        letter-spacing: 0.1em;
+      }
+      /* scheme: overlay (white over footage, w/ shadow) vs light (ink on boards) */
+      .yt-overlay .yt-cc-user,
+      .yt-overlay .yt-cc-text {
+        color: var(--yt-text);
+        text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
+      }
+      .yt-overlay .yt-cc-time,
+      .yt-overlay .yt-cc-row {
+        color: var(--yt-text-dim);
+        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
+      }
+      .yt-overlay .yt-cc-row svg {
+        stroke: var(--yt-text-dim);
+      }
+      .yt-light .yt-cc-user,
+      .yt-light .yt-cc-text {
+        color: var(--yt-ink);
+      }
+      .yt-light .yt-cc-time,
+      .yt-light .yt-cc-row {
+        color: var(--yt-ink-dim);
+      }
+      .yt-light .yt-cc-row svg {
+        stroke: var(--yt-ink-dim);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="yt-cc-root"
+      data-composition-id="yt-comment-card"
+      data-start="0"
+      data-duration="8"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="yt-cc-scan"></div>
+      <div id="yt-cc-col"></div>
+      <div
+        id="yt-cc-drv"
+        class="clip"
+        data-start="0"
+        data-duration="8"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- published parameters (inspector-style CONFIG) ----
+           Social comments typing on over footage — creator-style
+           comment cards. avatar: image path, or null -> initials chip. */
+        var CONFIG = {
+          scheme: "overlay", // "overlay" (white over footage) | "light" (ink on boards)
+          comments: [
+            {
+              avatar: null,
+              initials: "PW",
+              avatarHue: 210, // initials-chip hue when no image
+              username: "@pixelwaves",
+              time: "2 days ago",
+              text: "Your videos are the best!",
+              likes: 47,
+            },
+            {
+              avatar: null,
+              initials: "FR",
+              avatarHue: 340,
+              username: "@framerate",
+              time: "1 day ago",
+              text: "That camera move at 0:12 though 🔥",
+              likes: 12,
+            },
+          ],
+          x: 140,
+          y: null, // null = vertically centered
+          typeCharDelay: 0.024, // s per character (capped so a comment types <= 2.2s)
+          scanlines: false, // full-frame LCD pass while comments are up
+          animationIn: true,
+          animationOut: true,
+        };
+
+        var DUR = 8;
+        function clamp(v, lo, hi) {
+          return Math.min(hi, Math.max(lo, v));
+        }
+        var OUT = clamp(DUR * 0.06, 0.25, 0.6);
+
+        var root = document.getElementById("yt-cc-root");
+        var col = document.getElementById("yt-cc-col");
+        root.classList.add(CONFIG.scheme === "light" ? "yt-light" : "yt-overlay");
+        if (CONFIG.scanlines) document.getElementById("yt-cc-scan").style.display = "block";
+
+        var THUMB =
+          '<svg viewBox="0 0 24 24"><path d="M7 11v9M7 11l3.2-6.4a2 2 0 0 1 3.6 1.2V9h4.6a2 2 0 0 1 2 2.4l-1.2 6a2 2 0 0 1-2 1.6H7M7 11H4a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h3"/></svg>';
+
+        /* build cards */
+        CONFIG.comments.forEach(function (c, i) {
+          var card = document.createElement("div");
+          card.className = "yt-cc-card";
+          card.id = "yt-cc-card-" + i;
+
+          var av = document.createElement("div");
+          av.className = "yt-cc-avatar";
+          av.id = "yt-cc-av-" + i;
+          if (c.avatar) {
+            var img = document.createElement("img");
+            img.src = c.avatar;
+            av.appendChild(img);
+          } else {
+            av.textContent = c.initials || "?";
+            av.style.background =
+              "linear-gradient(135deg, hsl(" +
+              (c.avatarHue || 210) +
+              ", 62%, 52%), hsl(" +
+              ((c.avatarHue || 210) + 40) +
+              ", 62%, 42%))";
+          }
+          card.appendChild(av);
+
+          var body = document.createElement("div");
+          var meta = document.createElement("div");
+          meta.className = "yt-cc-meta";
+          meta.id = "yt-cc-meta-" + i;
+          var user = document.createElement("span");
+          user.className = "yt-cc-user";
+          user.textContent = c.username;
+          var time = document.createElement("span");
+          time.className = "yt-cc-time";
+          time.textContent = c.time || "";
+          meta.appendChild(user);
+          meta.appendChild(time);
+          body.appendChild(meta);
+
+          var text = document.createElement("div");
+          text.className = "yt-cc-text";
+          text.id = "yt-cc-text-" + i;
+          Array.from(c.text).forEach(function (ch) {
+            var span = document.createElement("span");
+            span.className = "ch";
+            span.textContent = ch;
+            text.appendChild(span);
+          });
+          body.appendChild(text);
+
+          var row = document.createElement("div");
+          row.className = "yt-cc-row";
+          row.id = "yt-cc-row-" + i;
+          row.innerHTML =
+            THUMB + "<span>" + (c.likes || 0) + '</span><span class="yt-cc-reply">REPLY</span>';
+          body.appendChild(row);
+          card.appendChild(body);
+          col.appendChild(card);
+        });
+
+        /* position (measure after building) */
+        col.style.left = CONFIG.x + "px";
+        var rect = col.getBoundingClientRect();
+        col.style.top =
+          (CONFIG.y === null ? Math.round((1080 - rect.height) / 2) : CONFIG.y) + "px";
+
+        var tl = gsap.timeline({ paused: true });
+
+        /* comments enter sequentially: avatar pops, meta fades, text types, row fades */
+        var t = CONFIG.animationIn ? 0.3 : 0;
+        CONFIG.comments.forEach(function (c, i) {
+          var av = "#yt-cc-av-" + i,
+            meta = "#yt-cc-meta-" + i,
+            row = "#yt-cc-row-" + i;
+          var chars = document.querySelectorAll("#yt-cc-text-" + i + " .ch");
+          var delay = Math.min(CONFIG.typeCharDelay, 2.2 / Math.max(1, chars.length));
+
+          gsap.set(av, { opacity: 0, scale: 0.5 });
+          gsap.set(meta, { opacity: 0, y: 10 });
+          tl.to(av, { opacity: 1, scale: 1, duration: 0.45, ease: "back.out(1.6)" }, t);
+          tl.to(meta, { opacity: 1, y: 0, duration: 0.4, ease: "power2.out" }, t + 0.12);
+          t += 0.4;
+          tl.to(chars, { opacity: 1, duration: 0.02, stagger: delay, ease: "none" }, t);
+          t += chars.length * delay + 0.15;
+          tl.to(row, { opacity: 1, duration: 0.35, ease: "power2.out" }, t);
+          t += 0.5;
+        });
+
+        /* exit + hard kill (auto-scaled out) */
+        if (CONFIG.animationOut) {
+          tl.to(col, { opacity: 0, y: -18, duration: OUT, ease: "power2.in" }, DUR - OUT - 0.05);
+        }
+        tl.set(root, { visibility: "hidden" }, DUR - 0.02);
+
+        window.__timelines["yt-comment-card"] = tl;
+      })();
+    </script>
+  </body>
+</html>
+```
+
+</Accordion>
+
 {/* hf:generated-footer */}
 
 Tagged `social` `comments` `creator` `overlay`.
diff --git a/docs/catalog/blocks/yt-lcd-background.mdx b/docs/catalog/blocks/yt-lcd-background.mdx
index dc0d8c5053..3c576900c6 100644
--- a/docs/catalog/blocks/yt-lcd-background.mdx
+++ b/docs/catalog/blocks/yt-lcd-background.mdx
@@ -3,13 +3,13 @@ title: "Scanline Board Background"
 description: "Textured paper board: scanlines with slow drift, optional pixel grid, static grain, and display text with a blur-focus entrance and chromatic-fringe title"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-lcd-background.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-lcd-background.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/yt-lcd-background.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Scanline Board Background preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add yt-lcd-background
-```
+<InstallCommand command="npx hyperframes add yt-lcd-background" />
 
 That writes one file: `compositions/yt-lcd-background.html`.
 
@@ -32,6 +32,321 @@ It runs for 10 seconds at 1920×1080. Paste this into your composition:
 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={`yt-lcd-background.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      #yt-lcd-root {
+        /* ---- yt tokens: override in the host to re-skin the family ---- */
+        --yt-font: "Inter", -apple-system, sans-serif;
+        --yt-paper: #e9e9e6;
+        --yt-paper-dark: #1c1c1e;
+        --yt-ink: #1d1d1f;
+        --yt-ink-dark: #e8e8e4;
+        --yt-cyan: #35c8d9;
+        --yt-prism-r: #ff2a4d;
+        --yt-prism-b: #2a7fff;
+        --yt-scanline-alpha: 0.05;
+        --yt-scanline-gap: 3px;
+        --yt-grid-size: 28px;
+        --yt-grid-alpha: 0.06;
+        --yt-grain-alpha: 0.08;
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--yt-paper);
+        font-family: var(--yt-font);
+      }
+      #yt-lcd-root.yt-dark {
+        background: var(--yt-paper-dark);
+      }
+      /* the LCD surface: scanlines + optional pixel grid + static grain */
+      #yt-lcd-scan {
+        position: absolute;
+        inset: -20px;
+        background: repeating-linear-gradient(
+          0deg,
+          rgba(0, 0, 0, var(--yt-scanline-alpha)) 0 1px,
+          transparent 1px var(--yt-scanline-gap)
+        );
+      }
+      .yt-dark #yt-lcd-scan {
+        background: repeating-linear-gradient(
+          0deg,
+          rgba(255, 255, 255, calc(var(--yt-scanline-alpha) * 1.4)) 0 1px,
+          transparent 1px var(--yt-scanline-gap)
+        );
+      }
+      #yt-lcd-grid {
+        position: absolute;
+        inset: 0;
+        background:
+          repeating-linear-gradient(
+            0deg,
+            rgba(0, 0, 0, var(--yt-grid-alpha)) 0 1px,
+            transparent 1px var(--yt-grid-size)
+          ),
+          repeating-linear-gradient(
+            90deg,
+            rgba(0, 0, 0, var(--yt-grid-alpha)) 0 1px,
+            transparent 1px var(--yt-grid-size)
+          );
+      }
+      .yt-dark #yt-lcd-grid {
+        background:
+          repeating-linear-gradient(
+            0deg,
+            rgba(255, 255, 255, var(--yt-grid-alpha)) 0 1px,
+            transparent 1px var(--yt-grid-size)
+          ),
+          repeating-linear-gradient(
+            90deg,
+            rgba(255, 255, 255, var(--yt-grid-alpha)) 0 1px,
+            transparent 1px var(--yt-grid-size)
+          );
+      }
+      #yt-lcd-grain {
+        position: absolute;
+        inset: 0;
+        opacity: var(--yt-grain-alpha);
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
+      }
+      /* the display text: prism copies behind the main fill, optional bow */
+      #yt-lcd-bow {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 26px;
+      }
+      .yt-lcd-line {
+        position: relative;
+        font-weight: 700;
+        line-height: 1;
+        letter-spacing: -0.02em;
+        white-space: nowrap;
+      }
+      .yt-lcd-copy {
+        position: absolute;
+        inset: 0;
+      }
+      .yt-lcd-copy.r {
+        color: var(--yt-prism-r);
+      }
+      .yt-lcd-copy.b {
+        color: var(--yt-prism-b);
+      }
+      .yt-lcd-main {
+        position: relative;
+      }
+      #yt-lcd-sub {
+        font-weight: 500;
+        letter-spacing: 0.14em;
+        text-transform: uppercase;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="yt-lcd-root"
+      data-composition-id="yt-lcd-background"
+      data-start="0"
+      data-duration="10"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="yt-lcd-scan" data-layout-allow-overflow></div>
+      <div id="yt-lcd-grid"></div>
+      <div id="yt-lcd-grain"></div>
+      <div id="yt-lcd-bow"></div>
+      <div
+        id="yt-lcd-drv"
+        class="clip"
+        data-start="0"
+        data-duration="10"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- published parameters (inspector-style CONFIG) ---- */
+        var CONFIG = {
+          scheme: "light", // "light" | "dark" (light/dark toggle)
+          title: "yt-lcd",
+          subtitle: "background 01",
+          fontSize: 230,
+          subSize: 34,
+          color: null, // null = scheme ink (AA). Cyan "#35c8d9" is dark-scheme only: 1.66:1 on light paper fails AA
+          blur: 2.2, // resting text blur px (blur amount)
+          prism: { enabled: true, offset: 3 }, // chromatic fringe (chromatic fringe)
+          bow: { enabled: true, deg: 7 }, // perspective bow (safe CRT-bow variant)
+          grid: { enabled: true }, // pixel grid (pixel grid)
+          scanDrift: true, // slow scanline scroll for life
+          animationIn: true,
+          animationOut: true,
+        };
+
+        var DUR = 10;
+        /* the yt- family improvement: in/out durations auto-scale to block
+           length (animations adjust to the layer length) */
+        function clamp(v, lo, hi) {
+          return Math.min(hi, Math.max(lo, v));
+        }
+        var IN = clamp(DUR * 0.08, 0.3, 0.8);
+        var OUT = clamp(DUR * 0.06, 0.25, 0.6);
+
+        var root = document.getElementById("yt-lcd-root");
+        var bow = document.getElementById("yt-lcd-bow");
+        var grid = document.getElementById("yt-lcd-grid");
+        var scan = document.getElementById("yt-lcd-scan");
+
+        if (CONFIG.scheme === "dark") root.classList.add("yt-dark");
+        if (!CONFIG.grid.enabled) grid.style.display = "none";
+
+        var mainColor =
+          CONFIG.color || (CONFIG.scheme === "dark" ? "var(--yt-ink-dark)" : "var(--yt-ink)");
+
+        /* build a line: prism copies behind + main fill */
+        function buildLine(text, size, idBase, prismOn) {
+          var line = document.createElement("div");
+          line.className = "yt-lcd-line";
+          line.style.fontSize = size + "px";
+          ["r", "b"].forEach(function (ch) {
+            if (!CONFIG.prism.enabled || !prismOn) return;
+            var c = document.createElement("div");
+            c.className = "yt-lcd-copy " + ch;
+            c.id = idBase + "-" + ch;
+            c.textContent = text;
+            line.appendChild(c);
+          });
+          var main = document.createElement("div");
+          main.className = "yt-lcd-main";
+          main.id = idBase + "-main";
+          main.textContent = text;
+          main.style.color = mainColor;
+          line.appendChild(main);
+          return line;
+        }
+
+        var titleLine = buildLine(CONFIG.title, CONFIG.fontSize, "yt-lcd-t", true);
+        bow.appendChild(titleLine);
+        if (CONFIG.subtitle) {
+          var sub = buildLine(
+            CONFIG.subtitle,
+            CONFIG.subSize,
+            "yt-lcd-s",
+            false,
+          ); /* fringe is title-only */
+          sub.id = "yt-lcd-sub";
+          bow.appendChild(sub);
+        }
+        if (CONFIG.bow.enabled) {
+          bow.style.transform = "perspective(950px) rotateX(" + CONFIG.bow.deg + "deg)";
+        }
+
+        var O = CONFIG.prism.offset;
+        var tl = gsap.timeline({ paused: true });
+
+        /* entrance: board fades, text focuses in from heavy blur while the
+           prism fringe settles from wide to resting offset */
+        if (CONFIG.animationIn) {
+          tl.from(root, { opacity: 0, duration: IN, ease: "power2.out" }, 0);
+          gsap.set(bow, { opacity: 0, filter: "blur(16px)" });
+          tl.to(bow, { opacity: 1, duration: IN * 1.4, ease: "power2.out" }, IN * 0.4);
+          tl.to(
+            bow,
+            { filter: "blur(" + CONFIG.blur + "px)", duration: IN * 2.2, ease: "power2.out" },
+            IN * 0.4,
+          );
+          if (CONFIG.prism.enabled) {
+            gsap.set(".yt-lcd-copy.r", { x: -O * 4, opacity: 0.5 });
+            gsap.set(".yt-lcd-copy.b", { x: O * 4, opacity: 0.5 });
+            tl.to(
+              ".yt-lcd-copy.r",
+              { x: -O, opacity: 0.85, duration: IN * 2.2, ease: "power2.out" },
+              IN * 0.4,
+            );
+            tl.to(
+              ".yt-lcd-copy.b",
+              { x: O, opacity: 0.85, duration: IN * 2.2, ease: "power2.out" },
+              IN * 0.4,
+            );
+          }
+        } else {
+          gsap.set(bow, { filter: "blur(" + CONFIG.blur + "px)" });
+          if (CONFIG.prism.enabled) {
+            gsap.set(".yt-lcd-copy.r", { x: -O, opacity: 0.85 });
+            gsap.set(".yt-lcd-copy.b", { x: O, opacity: 0.85 });
+          }
+        }
+
+        /* ambient: slow scanline drift + a breath of prism wobble */
+        if (CONFIG.scanDrift) {
+          tl.to(
+            scan,
+            {
+              y: 14,
+              duration: 3.1,
+              ease: "sine.inOut",
+              yoyo: true,
+              repeat: Math.max(1, Math.floor((DUR - 1) / 3.1) - 0),
+            },
+            0.5,
+          );
+        }
+        if (CONFIG.prism.enabled) {
+          tl.to(
+            ".yt-lcd-copy.r",
+            { x: -O - 1.2, duration: 2.4, ease: "sine.inOut", yoyo: true, repeat: 2 },
+            2.0,
+          );
+          tl.to(
+            ".yt-lcd-copy.b",
+            { x: O + 1.2, duration: 2.4, ease: "sine.inOut", yoyo: true, repeat: 2 },
+            2.0,
+          );
+        }
+
+        /* exit + hard kill */
+        if (CONFIG.animationOut) {
+          tl.to(root, { opacity: 0, duration: OUT, ease: "power2.in" }, DUR - OUT - 0.05);
+        }
+        tl.set(root, { visibility: "hidden" }, DUR - 0.02);
+
+        window.__timelines["yt-lcd-background"] = tl;
+      })();
+    </script>
+  </body>
+</html>
+```
+
+</Accordion>
+
 {/* hf:generated-footer */}
 
 Tagged `background` `texture` `creator`.
diff --git a/docs/catalog/blocks/yt-logo-intro.mdx b/docs/catalog/blocks/yt-logo-intro.mdx
index 31341d3870..e46b565f48 100644
--- a/docs/catalog/blocks/yt-logo-intro.mdx
+++ b/docs/catalog/blocks/yt-logo-intro.mdx
@@ -3,13 +3,13 @@ title: "Logo Intro Sequence"
 description: "Logo stamp pops on a lined board, a kicker line gives way to the title with an accent arrow chip; seeded line distortion"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-logo-intro.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-logo-intro.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/yt-logo-intro.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Logo Intro Sequence preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add yt-logo-intro
-```
+<InstallCommand command="npx hyperframes add yt-logo-intro" />
 
 That writes one file: `compositions/yt-logo-intro.html`.
 
@@ -32,6 +32,266 @@ It runs for 6 seconds at 1920×1080. Paste this into your composition:
 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={`yt-logo-intro.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      #yt-li-root {
+        /* ---- yt tokens ---- */
+        --yt-font: "Inter", -apple-system, sans-serif;
+        --yt-paper: #e9e9e6;
+        --yt-paper-dark: #1c1c1e;
+        --yt-ink: #1d1d1f;
+        --yt-ink-dark: #e8e8e4;
+        --yt-red: #e62e2e;
+        --yt-line-alpha: 0.1;
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--yt-paper);
+        font-family: var(--yt-font);
+      }
+      #yt-li-root.yt-dark {
+        background: var(--yt-paper-dark);
+      }
+      #yt-li-lines {
+        position: absolute;
+        inset: 0;
+      }
+      .yt-li-line {
+        position: absolute;
+        left: -40px;
+        right: -40px;
+        height: 2px;
+        background: rgba(0, 0, 0, var(--yt-line-alpha));
+      }
+      .yt-dark .yt-li-line {
+        background: rgba(255, 255, 255, var(--yt-line-alpha));
+      }
+      #yt-li-center {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 42px;
+      }
+      #yt-li-logo {
+        width: 220px;
+        height: 220px;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: var(--yt-ink);
+        color: #ffffff;
+        font-weight: 700;
+        font-size: 92px;
+        letter-spacing: -0.03em;
+        overflow: hidden;
+      }
+      .yt-dark #yt-li-logo {
+        background: var(--yt-ink-dark);
+        color: var(--yt-paper-dark);
+      }
+      #yt-li-logo img {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+      }
+      .yt-li-shadow #yt-li-logo,
+      .yt-li-shadow #yt-li-text {
+        filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.22));
+      }
+      #yt-li-textrow {
+        display: flex;
+        align-items: center;
+        gap: 26px;
+        min-height: 96px;
+      }
+      #yt-li-text {
+        font-weight: 700;
+        font-size: 74px;
+        letter-spacing: -0.015em;
+        color: var(--yt-ink);
+        white-space: nowrap;
+      }
+      .yt-dark #yt-li-text {
+        color: var(--yt-ink-dark);
+      }
+      #yt-li-arrow {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 84px;
+        height: 64px;
+        border-radius: 16px;
+        background: var(--yt-red);
+        opacity: 0;
+      }
+      #yt-li-arrow svg {
+        width: 38px;
+        stroke: #ffffff;
+        stroke-width: 3.2;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        fill: none;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="yt-li-root"
+      data-composition-id="yt-logo-intro"
+      data-start="0"
+      data-duration="6"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="yt-li-lines"></div>
+      <div id="yt-li-center">
+        <div id="yt-li-logo"></div>
+        <div id="yt-li-textrow">
+          <div id="yt-li-text"></div>
+          <div id="yt-li-arrow">
+            <svg viewBox="0 0 24 24"><path d="M4 12h15M13 5l7 7-7 7" /></svg>
+          </div>
+        </div>
+      </div>
+      <div
+        id="yt-li-drv"
+        class="clip"
+        data-start="0"
+        data-duration="6"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- published parameters ----
+           A logo intro: logo drops in, a kicker line, then the title
+           with an accent-red arrow. Background lines with frequency +
+           distortion (seeded offsets — no randomness). */
+        var CONFIG = {
+          scheme: "light", // "light" | "dark"
+          logoType: "text", // "text" | "image"
+          logoText: "YT",
+          logoSrc: null,
+          kicker: "LET'S DIVE IN",
+          title: "yt-logo-intro",
+          arrow: { enabled: true },
+          lines: { enabled: true, count: 12, distort: 10 },
+          dropShadow: true,
+          animationIn: true,
+          animationOut: true,
+        };
+
+        var DUR = 6;
+        function clamp(v, lo, hi) {
+          return Math.min(hi, Math.max(lo, v));
+        }
+        var IN = clamp(DUR * 0.08, 0.3, 0.8);
+        var OUT = clamp(DUR * 0.06, 0.25, 0.6);
+
+        var root = document.getElementById("yt-li-root");
+        var lines = document.getElementById("yt-li-lines");
+        var logo = document.getElementById("yt-li-logo");
+        var text = document.getElementById("yt-li-text");
+        var arrow = document.getElementById("yt-li-arrow");
+
+        if (CONFIG.scheme === "dark") root.classList.add("yt-dark");
+        if (CONFIG.dropShadow) root.classList.add("yt-li-shadow");
+
+        /* background lines: even spacing + seeded sine distortion */
+        if (CONFIG.lines.enabled) {
+          var gap = 1080 / (CONFIG.lines.count + 1);
+          for (var i = 1; i <= CONFIG.lines.count; i++) {
+            var l = document.createElement("div");
+            l.className = "yt-li-line";
+            var wobble = Math.sin(i * 2.399) * CONFIG.lines.distort;
+            l.style.top = Math.round(i * gap + wobble) + "px";
+            l.style.transform = "rotate(" + (Math.sin(i * 1.7) * 0.35).toFixed(2) + "deg)";
+            lines.appendChild(l);
+          }
+        }
+
+        if (CONFIG.logoType === "image" && CONFIG.logoSrc) {
+          var img = document.createElement("img");
+          img.src = CONFIG.logoSrc;
+          logo.appendChild(img);
+        } else {
+          logo.textContent = CONFIG.logoText;
+        }
+        if (!CONFIG.arrow.enabled) arrow.style.display = "none";
+
+        var tl = gsap.timeline({ paused: true });
+
+        if (CONFIG.animationIn) tl.from(root, { opacity: 0, duration: IN, ease: "power2.out" }, 0);
+
+        /* logo pops */
+        gsap.set(logo, { opacity: 0, scale: 0.55, y: 24 });
+        tl.to(
+          logo,
+          { opacity: 1, scale: 1, y: 0, duration: 0.55, ease: "back.out(1.5)" },
+          IN * 0.6,
+        );
+
+        /* kicker -> swap -> title + arrow */
+        gsap.set(text, { opacity: 0, y: 14 });
+        tl.set(text, { textContent: CONFIG.kicker, letterSpacing: "0.22em", fontSize: "40px" }, 0);
+        tl.to(text, { opacity: 1, y: 0, duration: 0.45, ease: "power2.out" }, IN * 0.6 + 0.45);
+        tl.to(text, { opacity: 0, y: -12, duration: 0.3, ease: "power2.in" }, 2.3);
+        tl.set(
+          text,
+          { textContent: CONFIG.title, letterSpacing: "-0.015em", fontSize: "74px", y: 14 },
+          2.62,
+        );
+        tl.to(text, { opacity: 1, y: 0, duration: 0.5, ease: "power3.out" }, 2.66);
+        gsap.set(arrow, { scale: 0.5, x: -14 });
+        tl.to(arrow, { opacity: 1, scale: 1, x: 0, duration: 0.45, ease: "back.out(1.6)" }, 2.9);
+
+        /* ambient: lines breathe */
+        tl.to(lines, { y: 8, duration: 2.2, ease: "sine.inOut", yoyo: true, repeat: 1 }, 0.8);
+
+        /* exit + hard kill */
+        if (CONFIG.animationOut) {
+          tl.to(root, { opacity: 0, duration: OUT, ease: "power2.in" }, DUR - OUT - 0.05);
+        }
+        tl.set(root, { visibility: "hidden" }, DUR - 0.02);
+
+        window.__timelines["yt-logo-intro"] = tl;
+      })();
+    </script>
+  </body>
+</html>
+```
+
+</Accordion>
+
 {/* hf:generated-footer */}
 
 Tagged `logo` `intro` `creator`.
diff --git a/docs/catalog/blocks/yt-lower-third.mdx b/docs/catalog/blocks/yt-lower-third.mdx
index 8356c59fa5..1b776536a7 100644
--- a/docs/catalog/blocks/yt-lower-third.mdx
+++ b/docs/catalog/blocks/yt-lower-third.mdx
@@ -3,34 +3,274 @@ title: "YouTube Lower Third"
 description: "Animated YouTube subscribe lower third with avatar and channel info"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-lower-third.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-lower-third.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/yt-lower-third.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="YouTube Lower Third preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add yt-lower-third
-```
+<InstallCommand command="npx hyperframes add yt-lower-third" />
 
 That writes `compositions/yt-lower-third.html`, plus 1 supporting file under `assets/`.
 
-## Add it to your video
+## Source
+
+<Accordion title={`yt-lower-third.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&display=block"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+      }
+      html,
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      body {
+        width: 1920px;
+        height: 1080px;
+        font-family: "DM Sans", sans-serif;
+      }
+
+      [data-composition-id="yt-lower-third"] .lower-third {
+        position: absolute;
+        bottom: 80px;
+        left: 50%;
+        transform: translateX(-50%);
+        display: flex;
+        align-items: center;
+        gap: 28px;
+        background: #ffffff;
+        border-radius: 60px;
+        padding: 20px 32px 20px 20px;
+        box-shadow: 0 6px 32px rgba(0, 0, 0, 0.14);
+      }
+
+      [data-composition-id="yt-lower-third"] .avatar {
+        width: 96px;
+        height: 96px;
+        border-radius: 50%;
+        object-fit: cover;
+        flex-shrink: 0;
+      }
+
+      [data-composition-id="yt-lower-third"] .channel-info {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        margin-right: 20px;
+      }
+
+      [data-composition-id="yt-lower-third"] .channel-name {
+        font-size: 34px;
+        font-weight: 700;
+        color: #0f0f0f;
+        line-height: 1.3;
+        letter-spacing: -0.01em;
+      }
+
+      [data-composition-id="yt-lower-third"] .subscriber-count {
+        font-size: 22px;
+        font-weight: 400;
+        color: #606060;
+        line-height: 1.3;
+      }
+
+      [data-composition-id="yt-lower-third"] .subscribe-btn {
+        position: relative;
+        width: 220px;
+        height: 68px;
+        border-radius: 34px;
+        background: #0f0f0f;
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+      }
+
+      [data-composition-id="yt-lower-third"] .btn-text {
+        position: absolute;
+        font-family: "DM Sans", sans-serif;
+        font-size: 24px;
+        font-weight: 700;
+        color: #ffffff;
+        letter-spacing: 0.02em;
+        white-space: nowrap;
+      }
+
+      [data-composition-id="yt-lower-third"] .btn-text-subscribe {
+        opacity: 1;
+      }
+
+      [data-composition-id="yt-lower-third"] .btn-text-subscribed {
+        opacity: 0;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+
+      [data-composition-id="yt-lower-third"] .check-icon {
+        display: inline-block;
+        width: 24px;
+        height: 24px;
+      }
 
-It runs for 4.5 seconds at 1920×1080. Paste this into your composition:
+      [data-composition-id="yt-lower-third"] .check-icon svg {
+        width: 24px;
+        height: 24px;
+        display: block;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="yt-lower-third"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="4.5"
+    >
+      <div
+        id="card"
+        class="clip lower-third"
+        data-start="0"
+        data-duration="4.5"
+        data-track-index="0"
+      >
+        <img class="avatar" src="assets/avatar.jpg" alt="HeyGen" crossorigin="anonymous" />
+        <div class="channel-info">
+          <div class="channel-name">HeyGen</div>
+          <div class="subscriber-count">82.2K subscribers</div>
+        </div>
+        <div id="subscribe-btn" class="subscribe-btn">
+          <span id="btn-subscribe" class="btn-text btn-text-subscribe">Subscribe</span>
+          <span id="btn-subscribed" class="btn-text btn-text-subscribed">
+            <span class="check-icon"
+              ><svg
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="#fff"
+                stroke-width="2.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <polyline points="20 6 9 17 4 12"></polyline></svg
+            ></span>
+            Subscribed
+          </span>
+        </div>
+      </div>
+    </div>
 
-```html index.html
-<div
-  data-composition-id="yt-lower-third"
-  data-composition-src="compositions/yt-lower-third.html"
-  data-start="0"
-  data-duration="4.5"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      var tl = gsap.timeline({ paused: true });
+
+      var card = document.getElementById("card");
+      var btn = document.getElementById("subscribe-btn");
+      var textSub = document.getElementById("btn-subscribe");
+      var textSubd = document.getElementById("btn-subscribed");
+
+      // Slide in from bottom
+      gsap.set(card, { y: 300, opacity: 0 });
+
+      tl.to(
+        card,
+        {
+          y: 0,
+          opacity: 1,
+          duration: 0.5,
+          ease: "power3.out",
+        },
+        0.1,
+      );
+
+      // Hold, then button press-in
+      tl.to(
+        btn,
+        {
+          scale: 0.92,
+          duration: 0.15,
+          ease: "power2.out",
+        },
+        1.0,
+      );
+
+      // Button release with spring bounce + text swap
+      tl.to(
+        btn,
+        {
+          scale: 1,
+          duration: 0.4,
+          ease: "elastic.out(1, 0.4)",
+        },
+        1.15,
+      );
+
+      // Fade out "Subscribe", fade in "Subscribed"
+      tl.to(
+        textSub,
+        {
+          opacity: 0,
+          duration: 0.08,
+          ease: "none",
+        },
+        1.15,
+      );
+
+      tl.to(
+        textSubd,
+        {
+          opacity: 1,
+          duration: 0.08,
+          ease: "none",
+        },
+        1.18,
+      );
+
+      // Slide out to bottom (inverse of entrance)
+      tl.to(
+        card,
+        {
+          y: 300,
+          opacity: 0,
+          duration: 0.25,
+          ease: "power3.in",
+        },
+        3.8,
+      );
+
+      window.__timelines["yt-lower-third"] = tl;
+    </script>
+  </body>
+</html>
 ```
 
-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.
+</Accordion>
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="yt-lower-third" data-composition-src="compositions/yt-lower-third.html" data-start="0" data-duration="4.5" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/blocks/yt-prism-title.mdx b/docs/catalog/blocks/yt-prism-title.mdx
index 5148a4afbb..c7c3c33162 100644
--- a/docs/catalog/blocks/yt-prism-title.mdx
+++ b/docs/catalog/blocks/yt-prism-title.mdx
@@ -3,13 +3,13 @@ title: "Chromatic Fringe Title"
 description: "Display title on a transparent root: blur-focus entrance, red/blue fringe that settles then breathes, perspective bow, slow scale drift"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-prism-title.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-prism-title.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/yt-prism-title.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Chromatic Fringe Title preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add yt-prism-title
-```
+<InstallCommand command="npx hyperframes add yt-prism-title" />
 
 That writes one file: `compositions/yt-prism-title.html`.
 
@@ -32,6 +32,219 @@ It runs for 6 seconds at 1920×1080. Paste this into your composition:
 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={`yt-prism-title.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      #yt-pt-root {
+        /* ---- yt tokens: override in the host to re-skin the family ---- */
+        --yt-font: "Inter", -apple-system, sans-serif;
+        --yt-cyan: #35c8d9;
+        --yt-prism-r: #ff2a4d;
+        --yt-prism-b: #2a7fff;
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent; /* overlays footage, a yt-lcd board, anything */
+        font-family: var(--yt-font);
+      }
+      #yt-pt-bow {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      #yt-pt-line {
+        position: relative;
+        font-weight: 700;
+        line-height: 1;
+        letter-spacing: -0.02em;
+        white-space: nowrap;
+      }
+      .yt-pt-copy {
+        position: absolute;
+        inset: 0;
+      }
+      .yt-pt-copy.r {
+        color: var(--yt-prism-r);
+      }
+      .yt-pt-copy.b {
+        color: var(--yt-prism-b);
+      }
+      #yt-pt-main {
+        position: relative;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="yt-pt-root"
+      data-composition-id="yt-prism-title"
+      data-start="0"
+      data-duration="6"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="yt-pt-bow"></div>
+      <div
+        id="yt-pt-drv"
+        class="clip"
+        data-start="0"
+        data-duration="6"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- published parameters (inspector-style CONFIG) ----
+           The cyan hero title with the full treatment stack, on a
+           transparent root — drop it over footage or a yt-lcd board. */
+        var CONFIG = {
+          title: "yt-prism",
+          fontSize: 260,
+          color: "#35c8d9", // bright cyan, for dark footage/boards (1.66:1 on light paper fails AA); use a darker cyan e.g. "#0f7d8a" on light boards
+          blur: 2.5, // resting blur px
+          prism: { enabled: true, offset: 4 },
+          bow: { enabled: true, deg: 6 },
+          drift: true, // slow scale breath while held
+          x: null, // null = centered
+          y: null,
+          animationIn: true,
+          animationOut: true,
+        };
+
+        var DUR = 6;
+        function clamp(v, lo, hi) {
+          return Math.min(hi, Math.max(lo, v));
+        }
+        var IN = clamp(DUR * 0.08, 0.3, 0.8);
+        var OUT = clamp(DUR * 0.06, 0.25, 0.6);
+
+        var root = document.getElementById("yt-pt-root");
+        var bow = document.getElementById("yt-pt-bow");
+
+        /* build: prism copies behind the main fill */
+        var line = document.createElement("div");
+        line.id = "yt-pt-line";
+        line.style.fontSize = CONFIG.fontSize + "px";
+        ["r", "b"].forEach(function (ch) {
+          if (!CONFIG.prism.enabled) return;
+          var c = document.createElement("div");
+          c.className = "yt-pt-copy " + ch;
+          c.textContent = CONFIG.title;
+          line.appendChild(c);
+        });
+        var main = document.createElement("div");
+        main.id = "yt-pt-main";
+        main.textContent = CONFIG.title;
+        main.style.color = CONFIG.color;
+        line.appendChild(main);
+        bow.appendChild(line);
+
+        if (CONFIG.bow.enabled) {
+          bow.style.transform = "perspective(950px) rotateX(" + CONFIG.bow.deg + "deg)";
+        }
+        if (CONFIG.x !== null || CONFIG.y !== null) {
+          bow.style.justifyContent = CONFIG.x === null ? "center" : "flex-start";
+          bow.style.alignItems = CONFIG.y === null ? "center" : "flex-start";
+          if (CONFIG.x !== null) line.style.marginLeft = CONFIG.x + "px";
+          if (CONFIG.y !== null) line.style.marginTop = CONFIG.y + "px";
+        }
+
+        var O = CONFIG.prism.offset;
+        var tl = gsap.timeline({ paused: true });
+
+        /* entrance: focus in from heavy blur, prism settles wide -> resting */
+        if (CONFIG.animationIn) {
+          gsap.set(bow, { opacity: 0, filter: "blur(18px)" });
+          tl.to(bow, { opacity: 1, duration: IN * 1.4, ease: "power2.out" }, 0.1);
+          tl.to(
+            bow,
+            { filter: "blur(" + CONFIG.blur + "px)", duration: IN * 2.4, ease: "power2.out" },
+            0.1,
+          );
+          if (CONFIG.prism.enabled) {
+            gsap.set(".yt-pt-copy.r", { x: -O * 4.5, opacity: 0.45 });
+            gsap.set(".yt-pt-copy.b", { x: O * 4.5, opacity: 0.45 });
+            tl.to(
+              ".yt-pt-copy.r",
+              { x: -O, opacity: 0.85, duration: IN * 2.4, ease: "power2.out" },
+              0.1,
+            );
+            tl.to(
+              ".yt-pt-copy.b",
+              { x: O, opacity: 0.85, duration: IN * 2.4, ease: "power2.out" },
+              0.1,
+            );
+          }
+        } else {
+          gsap.set(bow, { filter: "blur(" + CONFIG.blur + "px)" });
+          if (CONFIG.prism.enabled) {
+            gsap.set(".yt-pt-copy.r", { x: -O, opacity: 0.85 });
+            gsap.set(".yt-pt-copy.b", { x: O, opacity: 0.85 });
+          }
+        }
+
+        /* ambient: slow scale breath + prism wobble */
+        if (CONFIG.drift) {
+          tl.to(line, { scale: 1.035, duration: DUR - 1, ease: "sine.out" }, 0.4);
+        }
+        if (CONFIG.prism.enabled) {
+          tl.to(
+            ".yt-pt-copy.r",
+            { x: -O - 1.4, duration: 1.9, ease: "sine.inOut", yoyo: true, repeat: 1 },
+            1.4,
+          );
+          tl.to(
+            ".yt-pt-copy.b",
+            { x: O + 1.4, duration: 1.9, ease: "sine.inOut", yoyo: true, repeat: 1 },
+            1.4,
+          );
+        }
+
+        /* exit + hard kill */
+        if (CONFIG.animationOut) {
+          tl.to(
+            bow,
+            { opacity: 0, filter: "blur(12px)", duration: OUT, ease: "power2.in" },
+            DUR - OUT - 0.05,
+          );
+        }
+        tl.set(root, { visibility: "hidden" }, DUR - 0.02);
+
+        window.__timelines["yt-prism-title"] = tl;
+      })();
+    </script>
+  </body>
+</html>
+```
+
+</Accordion>
+
 {/* hf:generated-footer */}
 
 Tagged `typography` `title-card` `creator`.
diff --git a/docs/catalog/blocks/yt-vertical-fill.mdx b/docs/catalog/blocks/yt-vertical-fill.mdx
index 429ea95c20..bde21374b1 100644
--- a/docs/catalog/blocks/yt-vertical-fill.mdx
+++ b/docs/catalog/blocks/yt-vertical-fill.mdx
@@ -3,13 +3,13 @@ title: "Vertical Media Filler"
 description: "Portrait media filling a widescreen frame via blurred-scale, mirror, or copy side fills; grid texture and foreground contrast lift (images inside the block; keep live footage in the host)"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-vertical-fill.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-vertical-fill.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/blocks/yt-vertical-fill.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Vertical Media Filler preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add yt-vertical-fill
-```
+<InstallCommand command="npx hyperframes add yt-vertical-fill" />
 
 That writes one file: `compositions/yt-vertical-fill.html`.
 
@@ -32,6 +32,243 @@ It runs for 8 seconds at 1920×1080. Paste this into your composition:
 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={`yt-vertical-fill.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      #yt-vf-root {
+        /* ---- yt tokens ---- */
+        --yt-font: "Inter", -apple-system, sans-serif;
+        --yt-grid-size: 28px;
+        --yt-grid-alpha: 0.05;
+        --yt-stage: #101012;
+        --yt-scrim: rgba(8, 8, 10, 0.28);
+        --yt-cyan: #35c8d9;
+        --yt-prism-b: #2a7fff;
+        --yt-violet: #7d5cff;
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--yt-stage);
+        font-family: var(--yt-font);
+      }
+      .yt-vf-media {
+        position: absolute;
+        overflow: hidden;
+      }
+      .yt-vf-media img,
+      .yt-vf-media .yt-vf-fill {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+      #yt-vf-bg {
+        inset: -60px;
+        filter: blur(42px) brightness(0.75);
+      }
+      .yt-vf-side {
+        top: 0;
+        bottom: 0;
+        width: 656px;
+      }
+      #yt-vf-scrim {
+        position: absolute;
+        inset: 0;
+        background: var(--yt-scrim);
+      }
+      #yt-vf-grid {
+        position: absolute;
+        inset: 0;
+        background:
+          repeating-linear-gradient(
+            0deg,
+            rgba(255, 255, 255, var(--yt-grid-alpha)) 0 1px,
+            transparent 1px var(--yt-grid-size)
+          ),
+          repeating-linear-gradient(
+            90deg,
+            rgba(255, 255, 255, var(--yt-grid-alpha)) 0 1px,
+            transparent 1px var(--yt-grid-size)
+          );
+      }
+      #yt-vf-fg {
+        top: 0;
+        bottom: 0;
+        left: 656px;
+        width: 608px;
+        box-shadow: 0 0 90px rgba(0, 0, 0, 0.55);
+      }
+      /* stand-in portrait when no media is configured (self-demo) */
+      .yt-vf-fill {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: 700;
+        font-size: 120px;
+        color: rgba(255, 255, 255, 0.9);
+        background: linear-gradient(
+          160deg,
+          var(--yt-cyan) 0%,
+          var(--yt-prism-b) 50%,
+          var(--yt-violet) 100%
+        );
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="yt-vf-root"
+      data-composition-id="yt-vertical-fill"
+      data-start="0"
+      data-duration="8"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="yt-vf-media" id="yt-vf-bg" data-layout-allow-overflow></div>
+      <div class="yt-vf-media yt-vf-side" id="yt-vf-side-l" style="left: 0"></div>
+      <div class="yt-vf-media yt-vf-side" id="yt-vf-side-r" style="right: 0"></div>
+      <div id="yt-vf-scrim"></div>
+      <div id="yt-vf-grid"></div>
+      <div class="yt-vf-media" id="yt-vf-fg"></div>
+      <div
+        id="yt-vf-drv"
+        class="clip"
+        data-start="0"
+        data-duration="8"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- published parameters ----
+           Vertical media filling a 16:9 frame — three fill modes:
+           mode "scale" (big blurred copy behind), "mirror" (flanking
+           mirrored copies), "copy" (flanking straight copies).
+           IMAGES ONLY inside this block: the runtime never seeks media
+           elements inside a sub-composition (renders black). For live
+           vertical FOOTAGE, keep the media element in the HOST root
+           positioned over the fg slot (left:656px width:608px) and feed
+           this block a representative still for the fill layers. */
+        var CONFIG = {
+          src: null, // portrait IMAGE path; null -> stand-in gradient (demo)
+          mode: "scale", // "scale" | "mirror" | "copy"
+          fgContrast: 1.06,
+          fgBrightness: 1.03,
+          fgSaturation: 1.08,
+          grid: { enabled: true },
+          kenBurns: true,
+          animationIn: true,
+          animationOut: true,
+        };
+
+        var DUR = 8;
+        function clamp(v, lo, hi) {
+          return Math.min(hi, Math.max(lo, v));
+        }
+        var IN = clamp(DUR * 0.08, 0.3, 0.8);
+        var OUT = clamp(DUR * 0.06, 0.25, 0.6);
+
+        var root = document.getElementById("yt-vf-root");
+        var bg = document.getElementById("yt-vf-bg");
+        var sideL = document.getElementById("yt-vf-side-l");
+        var sideR = document.getElementById("yt-vf-side-r");
+        var fg = document.getElementById("yt-vf-fg");
+        var grid = document.getElementById("yt-vf-grid");
+
+        if (!CONFIG.grid.enabled) grid.style.display = "none";
+
+        function media(id) {
+          if (!CONFIG.src) {
+            var d = document.createElement("div");
+            d.className = "yt-vf-fill";
+            d.textContent = "9:16";
+            return d;
+          }
+          var img = document.createElement("img");
+          img.src = CONFIG.src;
+          img.id = id;
+          return img;
+        }
+
+        fg.appendChild(media("yt-vf-m-fg"));
+        fg.style.filter =
+          "contrast(" +
+          CONFIG.fgContrast +
+          ") brightness(" +
+          CONFIG.fgBrightness +
+          ") saturate(" +
+          CONFIG.fgSaturation +
+          ")";
+
+        if (CONFIG.mode === "scale") {
+          bg.appendChild(media("yt-vf-m-bg"));
+          sideL.style.display = "none";
+          sideR.style.display = "none";
+        } else {
+          bg.style.display = "none";
+          sideL.appendChild(media("yt-vf-m-l"));
+          sideR.appendChild(media("yt-vf-m-r"));
+          if (CONFIG.mode === "mirror") {
+            sideL.firstChild.style.transform = "scaleX(-1)";
+            sideR.firstChild.style.transform = "scaleX(-1)";
+          }
+          sideL.style.filter = "blur(6px) brightness(0.72)";
+          sideR.style.filter = "blur(6px) brightness(0.72)";
+        }
+
+        var tl = gsap.timeline({ paused: true });
+
+        if (CONFIG.animationIn) {
+          tl.from(root, { opacity: 0, duration: IN, ease: "power2.out" }, 0);
+          gsap.set(fg, { y: 34, opacity: 0 });
+          tl.to(fg, { y: 0, opacity: 1, duration: IN * 1.6, ease: "power3.out" }, IN * 0.5);
+        }
+        if (CONFIG.kenBurns) {
+          tl.fromTo(
+            fg.firstChild,
+            { scale: 1.05 },
+            { scale: 1, duration: DUR - 1, ease: "sine.out" },
+            0.4,
+          );
+        }
+
+        if (CONFIG.animationOut) {
+          tl.to(root, { opacity: 0, duration: OUT, ease: "power2.in" }, DUR - OUT - 0.05);
+        }
+        tl.set(root, { visibility: "hidden" }, DUR - 0.02);
+
+        window.__timelines["yt-vertical-fill"] = tl;
+      })();
+    </script>
+  </body>
+</html>
+```
+
+</Accordion>
+
 {/* hf:generated-footer */}
 
 Tagged `placeholder` `vertical` `media`.
diff --git a/docs/catalog/components/ai-generation-canvas.mdx b/docs/catalog/components/ai-generation-canvas.mdx
new file mode 100644
index 0000000000..7dcbde3edc
--- /dev/null
+++ b/docs/catalog/components/ai-generation-canvas.mdx
@@ -0,0 +1,131 @@
+---
+title: "AI Generation Canvas"
+description: "A prompt composer expands into a generated dashboard preview."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/components/ai-generation-canvas.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="AI Generation Canvas preview" />
+
+## Install
+
+<InstallCommand command="npx hyperframes add ai-generation-canvas" />
+
+That writes one file: `compositions/components/ai-generation-canvas.html`.
+
+## Source
+
+<Accordion title={`ai-generation-canvas.html`}>
+
+```html
+<!--
+  AI Generation Canvas - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-ai-generation-canvas">
+  <div class="panel prompt">
+    <h3>AI Generation Canvas</h3>
+    <p>A prompt composer expands into a generated dashboard preview.</p>
+    <div class="pill">Generate scene</div>
+    <div class="pill">Refine motion</div>
+    <div class="pill">Export</div>
+  </div>
+  <div class="panel preview">
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+  </div>
+</div>
+
+<style>
+  .hf-remocn-ai-generation-canvas {
+    --hf-accent: var(--accent, #18181b);
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-ai-generation-canvas {
+    width: 820px;
+    min-height: 460px;
+    border-radius: 34px;
+    padding: 28px;
+    background: linear-gradient(135deg, #fafafa, #e4e4e7);
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);
+    display: grid;
+    grid-template-columns: 280px 1fr;
+    gap: 22px;
+    overflow: hidden;
+  }
+  .hf-remocn-ai-generation-canvas .panel {
+    border: 1px solid rgba(15, 23, 42, 0.08);
+    border-radius: 24px;
+    background: rgba(255, 255, 255, 0.76);
+    padding: 22px;
+    backdrop-filter: blur(12px);
+  }
+  .hf-remocn-ai-generation-canvas .prompt {
+    display: grid;
+    gap: 12px;
+    align-content: start;
+  }
+  .hf-remocn-ai-generation-canvas .pill {
+    height: 42px;
+    border-radius: 999px;
+    background: #111827;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    padding: 0 18px;
+    font-weight: 800;
+    transform: translateX(var(--hf-pill-x, 0px));
+  }
+  .hf-remocn-ai-generation-canvas .preview {
+    display: grid;
+    gap: 14px;
+  }
+  .hf-remocn-ai-generation-canvas .card {
+    min-height: 78px;
+    border-radius: 18px;
+    background: #fff;
+    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
+    transform: translate(var(--hf-card-x, 0px), var(--hf-card-y, 0px))
+      scale(var(--hf-card-scale, 1));
+    opacity: var(--hf-card-opacity, 1);
+  }
+  .hf-remocn-ai-generation-canvas h3 {
+    margin: 0 0 14px;
+    font-size: 32px;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-ai-generation-canvas p {
+    margin: 0;
+    color: #475569;
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-ai-generation-canvas .pill', { '--hf-pill-x': '-18px', opacity: 0 }, { '--hf-pill-x': '0px', opacity: 1, duration: 0.25, stagger: 0.08, ease: 'power2.out' }, startTime); tl.fromTo('.hf-remocn-ai-generation-canvas .card', { '--hf-card-y': '28px', '--hf-card-scale': 0.96, '--hf-card-opacity': 0 }, { '--hf-card-y': '0px', '--hf-card-scale': 1, '--hf-card-opacity': 1, duration: 0.42, stagger: 0.12, ease: 'power3.out' }, startTime + 0.2);
+-->
+```
+
+</Accordion>
+
+## Usage
+
+Open `compositions/components/ai-generation-canvas.html` and paste its contents into your composition. See the comment header in the file for timeline integration guidance.
+
+{/* hf:generated-footer */}
+
+Tagged `showcase` `remocn-port` `ai`.
+
+## 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/components/ai-prompt-flow.mdx b/docs/catalog/components/ai-prompt-flow.mdx
new file mode 100644
index 0000000000..661a89e626
--- /dev/null
+++ b/docs/catalog/components/ai-prompt-flow.mdx
@@ -0,0 +1,140 @@
+---
+title: "AI Prompt Flow"
+description: "A composed AI prompt flow with prompt field, suggestion chips, generate action, and preview result card"
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/components/ai-prompt-flow.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="AI Prompt Flow preview" />
+
+## Install
+
+<InstallCommand command="npx hyperframes add ai-prompt-flow" />
+
+That writes one file: `compositions/components/ai-prompt-flow.html`.
+
+## Source
+
+<Accordion title={`ai-prompt-flow.html`}>
+
+```html
+<!--
+  AI Prompt Flow - Remocn-inspired composed UI flow for HyperFrames.
+
+  Paste the markup and CSS into a composition. Use the timeline integration
+  note at the bottom as the starting point for deterministic GSAP animation.
+-->
+
+<div class="hf-ui-ai-prompt-flow">
+  <div class="hf-ui-ai-prompt-panel">
+    <span class="hf-ui-ai-prompt-label">Prompt</span>
+    <div class="hf-ui-ai-prompt-field">Create a launch video for our new feature</div>
+    <div class="hf-ui-ai-prompt-chips">
+      <span>fast cuts</span><span>captions</span><span>product UI</span>
+    </div>
+    <button type="button">Generate</button>
+  </div>
+  <div class="hf-ui-ai-prompt-result">
+    <strong>Preview ready</strong><span>18 scenes matched</span>
+  </div>
+</div>
+
+<style>
+  .hf-ui-ai-prompt-flow {
+    display: grid;
+    gap: 18px;
+    width: 620px;
+    color: #18181b;
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-ui-ai-prompt-panel,
+  .hf-ui-ai-prompt-result {
+    border: 1px solid #e4e4e7;
+    border-radius: 26px;
+    background: #ffffff;
+    box-shadow: 0 26px 80px rgba(0, 0, 0, 0.1);
+  }
+  .hf-ui-ai-prompt-panel {
+    display: grid;
+    gap: 16px;
+    padding: 28px;
+  }
+  .hf-ui-ai-prompt-label {
+    color: #71717a;
+    font-size: 13px;
+    font-weight: 900;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+  }
+  .hf-ui-ai-prompt-field {
+    min-height: 92px;
+    padding: 18px;
+    border-radius: 18px;
+    background: #f4f4f5;
+    font-size: 22px;
+    font-weight: 760;
+    line-height: 1.25;
+  }
+  .hf-ui-ai-prompt-chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+  .hf-ui-ai-prompt-chips span {
+    padding: 8px 11px;
+    border-radius: 999px;
+    background: #eef2ff;
+    color: #4338ca;
+    font-size: 13px;
+    font-weight: 850;
+  }
+  .hf-ui-ai-prompt-panel button {
+    justify-self: start;
+    height: 46px;
+    padding: 0 20px;
+    border: 0;
+    border-radius: 13px;
+    background: #18181b;
+    color: #ffffff;
+    font-weight: 900;
+  }
+  .hf-ui-ai-prompt-result {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 18px 22px;
+  }
+  .hf-ui-ai-prompt-result strong {
+    font-size: 18px;
+  }
+  .hf-ui-ai-prompt-result span {
+    color: #16a34a;
+    font-size: 14px;
+    font-weight: 850;
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-ui-ai-prompt-panel', { opacity: 0, y: 26 }, { opacity: 1, y: 0, duration: 0.38, ease: 'power2.out' }, 0.25);
+  tl.fromTo('.hf-ui-ai-prompt-chips span', { y: 14, opacity: 0 }, { y: 0, opacity: 1, duration: 0.24, stagger: 0.06, ease: 'power2.out' }, 0.62);
+  tl.to('.hf-ui-ai-prompt-panel button', { scale: 0.96, duration: 0.12, yoyo: true, repeat: 1, ease: 'power1.inOut' }, 1.0);
+  tl.fromTo('.hf-ui-ai-prompt-result', { opacity: 0, y: 22, scale: 0.97 }, { opacity: 1, y: 0, scale: 1, duration: 0.36, ease: 'back.out(1.3)' }, 1.24);
+-->
+```
+
+</Accordion>
+
+## Usage
+
+Open `compositions/components/ai-prompt-flow.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+
+{/* hf:generated-footer */}
+
+Tagged `ui-flow` `remocn-port` `ai` `prompt`.
+
+## 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/components/animated-bar-chart.mdx b/docs/catalog/components/animated-bar-chart.mdx
new file mode 100644
index 0000000000..bd27d5c76a
--- /dev/null
+++ b/docs/catalog/components/animated-bar-chart.mdx
@@ -0,0 +1,135 @@
+---
+title: "Animated Bar Chart"
+description: "A compact data card with deterministic bar growth and value callouts."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/components/animated-bar-chart.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Animated Bar Chart preview" />
+
+## Install
+
+<InstallCommand command="npx hyperframes add animated-bar-chart" />
+
+That writes one file: `compositions/components/animated-bar-chart.html`.
+
+## Source
+
+<Accordion title={`animated-bar-chart.html`}>
+
+```html
+<!--
+  Animated Bar Chart - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-animated-bar-chart">
+  <header>
+    <div>
+      <h3>Animated Bar Chart</h3>
+      <p>A compact data card with deterministic bar growth and value callouts.</p>
+    </div>
+    <strong>+42%</strong>
+  </header>
+  <div class="bars">
+    <span class="bar" style="--h: 42%"></span><span class="bar" style="--h: 72%"></span
+    ><span class="bar" style="--h: 56%"></span><span class="bar" style="--h: 88%"></span
+    ><span class="bar" style="--h: 64%"></span><span class="bar" style="--h: 95%"></span
+    ><span class="bar" style="--h: 78%"></span>
+  </div>
+  <svg viewBox="0 0 700 210">
+    <path
+      d="M20 172 C120 90, 190 118, 260 74 S430 112, 508 42 S620 82, 680 30"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="10"
+      stroke-linecap="round"
+    />
+  </svg>
+</div>
+
+<style>
+  .hf-remocn-animated-bar-chart {
+    --hf-accent: var(--accent, #111827);
+    --hf-ink: #111827;
+    --hf-l1: rgba(17, 24, 39, 0.72);
+    --hf-l2: rgba(17, 24, 39, 0.45);
+    --hf-l3: rgba(17, 24, 39, 0.18);
+    --hf-l4: rgba(17, 24, 39, 0.08);
+    --hf-hair: rgba(17, 24, 39, 0.14);
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-animated-bar-chart {
+    width: 760px;
+    min-height: 420px;
+    border-radius: 28px;
+    background: #fff;
+    padding: 34px;
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.16);
+    display: grid;
+    gap: 22px;
+  }
+  .hf-remocn-animated-bar-chart header {
+    display: flex;
+    justify-content: space-between;
+    align-items: end;
+  }
+  .hf-remocn-animated-bar-chart h3 {
+    margin: 0;
+    font-size: 34px;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-animated-bar-chart strong {
+    font-size: 54px;
+    letter-spacing: -0.06em;
+  }
+  .hf-remocn-animated-bar-chart .bars {
+    height: 210px;
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    align-items: end;
+    gap: 14px;
+  }
+  .hf-remocn-animated-bar-chart .bar {
+    height: calc(var(--h) * var(--hf-grow, 1));
+    border-radius: 14px 14px 5px 5px;
+    background: var(--hf-l1);
+  }
+  .hf-remocn-animated-bar-chart svg {
+    width: 100%;
+    height: 210px;
+    overflow: visible;
+  }
+  .hf-remocn-animated-bar-chart path {
+    color: var(--hf-l2);
+    stroke-dasharray: 900;
+    stroke-dashoffset: var(--hf-dash, 0);
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-animated-bar-chart', { '--hf-grow': 0, '--hf-dash': 900 }, { '--hf-grow': 1, '--hf-dash': 0, duration: 1.2, ease: 'power3.out' }, startTime);
+-->
+```
+
+</Accordion>
+
+## Usage
+
+Open `compositions/components/animated-bar-chart.html` and paste its contents into your composition. See the comment header in the file for timeline integration guidance.
+
+{/* hf:generated-footer */}
+
+Tagged `data` `remocn-port`.
+
+## 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/components/arc-motion-path.mdx b/docs/catalog/components/arc-motion-path.mdx
new file mode 100644
index 0000000000..94909d3570
--- /dev/null
+++ b/docs/catalog/components/arc-motion-path.mdx
@@ -0,0 +1,136 @@
+---
+title: "Arc Motion Path"
+description: "A GSAP MotionPath primitive that flies a callout along a curved arc with autorotation."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/components/arc-motion-path.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Arc Motion Path preview" />
+
+## Install
+
+<InstallCommand command="npx hyperframes add arc-motion-path" />
+
+That writes one file: `compositions/components/arc-motion-path.html`.
+
+## Source
+
+<Accordion title={`arc-motion-path.html`}>
+
+```html
+<!--
+  Arc Motion Path - advanced HyperFrames primitive.
+
+  This is intentionally seekable: drive it from a paused GSAP timeline.
+  MotionPath examples require GSAP MotionPathPlugin. Three.js examples expose
+  a render(progress) adapter instead of a free-running requestAnimationFrame loop.
+-->
+
+<div class="hf-advanced-arc-motion-path">
+  <svg viewBox="0 0 760 430" aria-hidden="true">
+    <path
+      id="arc-motion-path-path-a"
+      class="path"
+      d="M104 310 C178 110, 334 74, 442 178 S592 306, 668 120"
+    />
+    <path id="arc-motion-path-path-b" class="path" d="M118 142 C224 300, 410 330, 642 206" />
+  </svg>
+  <div class="core">Arc Motion Path</div>
+  <div class="chip chip-a"><span class="dot"></span>Plan</div>
+  <div class="chip chip-b"><span class="dot"></span>Render</div>
+</div>
+
+<style>
+  .hf-advanced-arc-motion-path {
+    color: var(--fg, #111827);
+    font-family: var(--font-body, Inter, system-ui, sans-serif);
+  }
+  .hf-advanced-arc-motion-path {
+    position: relative;
+    width: 760px;
+    height: 430px;
+    border-radius: var(--radius, 30px);
+    overflow: hidden;
+    background: radial-gradient(
+      circle at 50% 20%,
+      var(--bg, #f4f4f5),
+      var(--bg, #f8fafc) 54%,
+      var(--bg, #e4e4e7)
+    );
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);
+  }
+  .hf-advanced-arc-motion-path svg {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    overflow: visible;
+  }
+  .hf-advanced-arc-motion-path .path {
+    fill: none;
+    stroke: color-mix(in srgb, var(--fg, #111827) 18%, transparent);
+    stroke-width: 3;
+    stroke-dasharray: 10 12;
+  }
+  .hf-advanced-arc-motion-path .core {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 176px;
+    height: 176px;
+    margin: -88px 0 0 -88px;
+    border-radius: 42px;
+    background: var(--fg, #111827);
+    color: var(--bg, #fff);
+    display: grid;
+    place-items: center;
+    text-align: center;
+    font-weight: 900;
+    letter-spacing: -0.04em;
+    box-shadow: 0 22px 54px rgba(15, 23, 42, 0.25);
+  }
+  .hf-advanced-arc-motion-path .chip {
+    position: absolute;
+    left: 0;
+    top: 0;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1, 8px);
+    height: 42px;
+    padding: 0 var(--space-2, 16px);
+    border-radius: var(--radius, 999px);
+    background: var(--surface, #fff);
+    box-shadow: 0 16px 42px rgba(15, 23, 42, 0.14);
+    font-weight: 800;
+    transform-origin: 50% 50%;
+  }
+  .hf-advanced-arc-motion-path .dot {
+    width: 10px;
+    height: 10px;
+    border-radius: var(--radius, 999px);
+    background: var(--accent, #18181b);
+  }
+</style>
+
+<!--
+  Timeline integration:
+  const startTime = 0;
+  if (window.MotionPathPlugin) gsap.registerPlugin(MotionPathPlugin); tl.to('.hf-advanced-arc-motion-path .chip-a', { motionPath: { path: '#arc-motion-path-path-a', align: '#arc-motion-path-path-a', alignOrigin: [0.5, 0.5], autoRotate: true }, duration: 2.4, ease: 'power1.inOut' }, startTime); tl.to('.hf-advanced-arc-motion-path .chip-b', { motionPath: { path: '#arc-motion-path-path-b', align: '#arc-motion-path-path-b', alignOrigin: [0.5, 0.5], autoRotate: true, start: 0.1, end: 0.92 }, duration: 2.1, ease: 'sine.inOut' }, startTime + 0.25);
+-->
+```
+
+</Accordion>
+
+## Usage
+
+Open `compositions/components/arc-motion-path.html` and paste its contents into your composition. The comment header describes the timeline integration and any optional dependency setup.
+
+{/* hf:generated-footer */}
+
+Tagged `video-primitive` `motionpath` `gsap-plugin` `hyperframes-native`.
+
+## 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/components/ascii-render-pass.mdx b/docs/catalog/components/ascii-render-pass.mdx
new file mode 100644
index 0000000000..ea241ec650
--- /dev/null
+++ b/docs/catalog/components/ascii-render-pass.mdx
@@ -0,0 +1,527 @@
+---
+title: "ASCII Render Pass"
+description: "A slotted scene renders as live ASCII: a canvas samples the source's luminance grid (rasterized once at mount) and draws glyphs from a density ramp charset; resolution steps coarse to fine as the piece resolves, then holds legible-fine."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/ascii-render-pass.html"
+  compositionId="ascii-render-pass"
+  compositionSrc="compositions/components/ascii-render-pass.html"
+  variables={[{"id":"charset","type":"string","role":"style","label":"Charset","description":"Density ramp, dark to light. A leading space keeps dark cells empty.","default":" .:-=+*#%@"},{"id":"grid","type":"enum","role":"style","label":"Grid","description":"Final cell pitch the resolve lands on.","default":"med","options":[{"value":"coarse","label":"Coarse"},{"value":"med","label":"Medium"},{"value":"fine","label":"Fine"}]},{"id":"resolve_at","type":"number","role":"timing","label":"Resolve at","description":"Seconds from mount start when the coarse-to-fine resolve begins.","default":1.4,"min":0.6,"max":10,"step":0.1,"unit":"s"},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Glyph ink: green rides --brand, blue rides --accent, violet rides --accent-2.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Optional departure. Default none: the fine render holds until the frame cuts.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
+>
+
+```html ascii-render-pass.html
+<!doctype html>
+<!--
+  ascii-render-pass: HyperFrames video primitive (Wave M experiment, texture)
+
+  A slotted scene renders as live ASCII: the source is rasterized ONCE at
+  mount to an offscreen canvas, its luminance grid is sampled per cell, and
+  each cell draws a glyph from a density ramp charset. Resolution animates
+  coarse to fine on a stepped pitch ladder as the piece resolves, then
+  holds legible-fine. The DOM source itself never displays; the canvas is
+  the whole picture.
+
+  The scene is a SLOT. Callers supply content by placing an inert template
+  anywhere in the HOST page (templates never render, and the runtime wipes
+  the host clip's own children on mount):
+
+    <template data-slot="ascii-render-pass-scene"> ... </template>
+
+  Slot content is rasterized through an SVG foreignObject snapshot, so it
+  must be self-contained: inline styles or rules carried by host <style>
+  tags (which are copied into the snapshot), data-URI images only, system
+  or already-active fonts. External resources do not load inside the
+  snapshot. When no slot exists, the primitive rasterizes a token monogram
+  tile drawn synchronously from contract tokens (no snapshot involved).
+
+  Variables (declared in data-composition-variables below):
+    - charset (string): density ramp, dark to light, first glyph may be a
+      space so dark cells stay empty. Default " .:-=+*#%@".
+    - grid ("coarse" | "med" | "fine", default "med"): final cell pitch.
+    - resolve_at (seconds): when the coarse-to-fine resolve begins.
+    - accent ("green" | "blue" | "violet", default "green"): glyph ink;
+      green rides --brand, blue rides --accent, violet rides --accent-2.
+    - exit ("none" | "fade" | "up", default "none"): frame roots own
+      transitions; the default holds the fine render to the cut.
+
+  Envelope, fixed segments with elastic HOLD only (never timeScale):
+    0.00s        canvas fades up over 0.5s at the coarsest pitch
+    resolve_at   pitch ladder steps coarse to fine over 1.2s (5 steps,
+                 powers of sqrt(2)); a per-cell hash shimmer rides the
+                 steps and lands at zero on the final step
+    then         legible-fine HOLD, truly still
+    OUT = 0.45s  only when exit is not none
+
+  Determinism (canvas 2D law): the raster, its luminance summed-area
+  table, and every resolved color are fixed once at mount. Every painted
+  frame is a pure function of (that raster, the timeline's current time):
+  the timeline's onUpdate clears the canvas and redraws every glyph from
+  scratch. Cell shimmer uses a stateless integer hash of (column, row,
+  ladder step), not a stream; there is no Math.random, no wall clock, no
+  incremental state. Eventful seeks (suppressEvents false, the engine's
+  render path) land identical frames in any order and either direction.
+  The no-slot monogram raster is drawn synchronously before the timeline
+  registers; a slotted raster arrives from the snapshot decode and
+  repaints the current frame, after which all frames are pure f(t).
+-->
+<html
+  lang="en"
+  data-composition-id="ascii-render-pass"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "charset", "type": "string", "role": "style", "label": "Charset", "description": "Density ramp, dark to light. A leading space keeps dark cells empty.", "default": " .:-=+*#%@" },
+    { "id": "grid", "type": "enum", "role": "style", "label": "Grid", "description": "Final cell pitch the resolve lands on.", "default": "med", "options": [{ "value": "coarse", "label": "Coarse" }, { "value": "med", "label": "Medium" }, { "value": "fine", "label": "Fine" }] },
+    { "id": "resolve_at", "type": "number", "role": "timing", "label": "Resolve at", "description": "Seconds from mount start when the coarse-to-fine resolve begins.", "default": 1.4, "min": 0.6, "max": 10, "step": 0.1, "unit": "s" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Glyph ink: green rides --brand, blue rides --accent, violet rides --accent-2.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the fine render holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>ASCII Render Pass</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="ascii-render-pass" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            pointer-events: none;
+          }
+
+          .arp-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .arp-stage {
+            position: absolute;
+            inset: 0;
+            will-change: transform, opacity;
+          }
+
+          .arp-canvas {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+          }
+        </style>
+
+        <div
+          id="ascii-render-pass-clip"
+          class="arp-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="arp-stage">
+            <canvas class="arp-canvas" aria-hidden="true"></canvas>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".arp-stage");
+            var canvas = root.querySelector(".arp-canvas");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            function num(value, fallback, min, max) {
+              var n = Number(value);
+              if (!isFinite(n)) n = fallback;
+              return Math.max(min, Math.min(max, n));
+            }
+
+            var charset =
+              typeof vars.charset === "string" && vars.charset.length >= 2
+                ? vars.charset
+                : " .:-=+*#%@";
+            var grid = vars.grid === "coarse" || vars.grid === "fine" ? vars.grid : "med";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            // Bundler mirrors composition variables as scoped CSS custom
+            // props; when this unit's accent variable shadows the --accent
+            // token ("blue" is a valid CSS color), fall back to the literal.
+            var computedAccent = getComputedStyle(root).getPropertyValue("--accent").trim();
+            if (
+              computedAccent === "green" ||
+              computedAccent === "blue" ||
+              computedAccent === "violet"
+            ) {
+              accentColors.blue = "#61a8ff";
+            }
+
+            // Envelope.
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var OUT = exit === "none" ? 0 : 0.45;
+            var RESOLVE = Math.min(1.2, Math.max(0.5, duration - OUT - 1.0));
+            var FADE_IN = 0.5;
+            var maxAt = Math.max(0.6, duration - RESOLVE - OUT - 0.05);
+            var resolveAt = num(vars.resolve_at, 1.4, 0.6, maxAt);
+            var OUT_START = duration - OUT;
+
+            // Canvas raster basis, fixed once at mount. Elastic root: the
+            // host box decides the resolution.
+            var dpr = Math.min(2, Math.max(1, Number(window.devicePixelRatio) || 1));
+            var box = root.getBoundingClientRect();
+            var cssW = Math.max(1, Math.round(box.width) || 640);
+            var cssH = Math.max(1, Math.round(box.height) || 360);
+            canvas.width = Math.round(cssW * dpr);
+            canvas.height = Math.round(cssH * dpr);
+            var ctx = canvas.getContext("2d");
+
+            // Resolve tokens to concrete values once at mount so nothing in
+            // the paint path depends on style recalc during seeks.
+            var hostDoc = root.ownerDocument;
+            function resolveColor(cssColor, fallback) {
+              var probe = hostDoc.createElement("span");
+              probe.style.color = cssColor;
+              root.appendChild(probe);
+              var out = getComputedStyle(probe).color || fallback;
+              probe.remove();
+              return out;
+            }
+            var bgColor = resolveColor("var(--bg, #0b0c0e)", "#0b0c0e");
+            var inkColor = resolveColor(accentColors[accent], "#71f5a7");
+            var probeFont = hostDoc.createElement("span");
+            probeFont.style.fontFamily =
+              'var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace)';
+            root.appendChild(probeFont);
+            var monoFamily = getComputedStyle(probeFont).fontFamily || "monospace";
+            probeFont.remove();
+
+            // Source raster: cssW x cssH capped to 1280 wide, composited
+            // over the resolved bg so luminance never depends on alpha.
+            var rasterScale = Math.min(1, 1280 / cssW);
+            var rw = Math.max(1, Math.round(cssW * rasterScale));
+            var rh = Math.max(1, Math.round(cssH * rasterScale));
+            var raster = hostDoc.createElement("canvas");
+            raster.width = rw;
+            raster.height = rh;
+            var rctx = raster.getContext("2d");
+
+            // Luminance summed-area table so any cell's average is O(1) and
+            // a pure function of the fixed raster.
+            var sat = null; // Float64Array (rw+1)*(rh+1)
+            function buildSat() {
+              var data = rctx.getImageData(0, 0, rw, rh).data;
+              var table = new Float64Array((rw + 1) * (rh + 1));
+              for (var y = 0; y < rh; y += 1) {
+                var rowSum = 0;
+                for (var x = 0; x < rw; x += 1) {
+                  var i = (y * rw + x) * 4;
+                  rowSum += (0.299 * data[i] + 0.587 * data[i + 1] + 0.114 * data[i + 2]) / 255;
+                  table[(y + 1) * (rw + 1) + (x + 1)] = table[y * (rw + 1) + (x + 1)] + rowSum;
+                }
+              }
+              sat = table;
+            }
+            function cellLuma(x0, y0, x1, y1) {
+              // Raster-space integer rect, clamped.
+              if (x1 <= x0 || y1 <= y0) return 0;
+              var s = rw + 1;
+              var sum = sat[y1 * s + x1] - sat[y0 * s + x1] - sat[y1 * s + x0] + sat[y0 * s + x0];
+              return sum / ((x1 - x0) * (y1 - y0));
+            }
+
+            function paintMonogram(target, w, h) {
+              // Synchronous token monogram raster: a surface tile with one
+              // display glyph, same vocabulary as the slot-less siblings.
+              var m = Math.min(w, h);
+              target.fillStyle = bgColor;
+              target.fillRect(0, 0, w, h);
+              var tile = m * 0.52;
+              var x = (w - tile) / 2;
+              var y = (h - tile) / 2;
+              var r = m * 0.05;
+              target.fillStyle = resolveColor(
+                "color-mix(in srgb, var(--surface, #14171c) 72%, " + accentColors[accent] + ")",
+                "#1a2a22",
+              );
+              target.beginPath();
+              if (target.roundRect) target.roundRect(x, y, tile, tile, r);
+              else target.rect(x, y, tile, tile);
+              target.fill();
+              target.fillStyle = resolveColor(
+                "color-mix(in srgb, var(--fg, #f8fafc) 30%, " + accentColors[accent] + ")",
+                "#a8f5c8",
+              );
+              target.font = "600 " + Math.round(m * 0.3) + "px " + monoFamily;
+              target.textAlign = "center";
+              target.textBaseline = "middle";
+              target.fillText("H", w / 2, h / 2 + m * 0.012);
+            }
+
+            // SLOT. Rasterized through an SVG foreignObject snapshot of the
+            // slot markup plus every host <style> tag and the resolved
+            // contract tokens, so host-authored rules and theme values
+            // apply inside the snapshot.
+            var slotTemplate = null;
+            try {
+              slotTemplate = hostDoc.querySelector('template[data-slot="ascii-render-pass-scene"]');
+            } catch (error) {
+              slotTemplate = null;
+            }
+
+            var rasterReady = false;
+            function finishRaster() {
+              buildSat();
+              rasterReady = true;
+              root.setAttribute("data-arp-raster", "ready");
+              paint(tl ? tl.time() : 0);
+            }
+
+            if (slotTemplate) {
+              var tokenNames = [
+                "--bg",
+                "--fg",
+                "--muted",
+                "--surface",
+                "--border",
+                "--brand",
+                "--accent",
+                "--accent-2",
+                "--font-display",
+                "--font-body",
+                "--font-mono",
+                "--radius",
+                "--space-1",
+                "--space-2",
+                "--space-3",
+                "--dur-beat",
+                "--ease-standard",
+                "--ease-emphasis",
+              ];
+              var rootStyle = getComputedStyle(root);
+              var tokenDecl = "";
+              for (var ti = 0; ti < tokenNames.length; ti += 1) {
+                var tv = rootStyle.getPropertyValue(tokenNames[ti]).trim();
+                if (tv) tokenDecl += tokenNames[ti] + ":" + tv + ";";
+              }
+              var styleTexts = "";
+              var styleTags = hostDoc.querySelectorAll("style");
+              for (var si = 0; si < styleTags.length; si += 1) {
+                styleTexts += styleTags[si].textContent || "";
+              }
+              var wrapper = hostDoc.createElement("div");
+              wrapper.setAttribute(
+                "style",
+                "width:" +
+                  rw +
+                  "px;height:" +
+                  rh +
+                  "px;overflow:hidden;position:relative;" +
+                  "display:grid;place-items:center;background:" +
+                  bgColor +
+                  ";" +
+                  tokenDecl,
+              );
+              wrapper.appendChild(hostDoc.importNode(slotTemplate.content, true));
+              var styleEl = hostDoc.createElement("style");
+              styleEl.textContent = styleTexts;
+              wrapper.insertBefore(styleEl, wrapper.firstChild);
+              var serialized = new XMLSerializer().serializeToString(wrapper);
+              var svgMarkup =
+                // No xmlns on foreignObject: a default xmlns declaration
+                // applies to the declaring element itself and would eject
+                // foreignObject from the SVG namespace (renders blank). The
+                // serialized wrapper div already carries the XHTML namespace.
+                '<svg xmlns="http://www.w3.org/2000/svg" width="' +
+                rw +
+                '" height="' +
+                rh +
+                '"><foreignObject width="' +
+                rw +
+                '" height="' +
+                rh +
+                '">' +
+                serialized +
+                "</foreignObject></svg>";
+              var snapshot = new Image();
+              snapshot.onload = function () {
+                rctx.fillStyle = bgColor;
+                rctx.fillRect(0, 0, rw, rh);
+                rctx.drawImage(snapshot, 0, 0, rw, rh);
+                try {
+                  finishRaster();
+                } catch (error) {
+                  // Tainted or unreadable snapshot: fall back to the monogram.
+                  paintMonogram(rctx, rw, rh);
+                  finishRaster();
+                }
+              };
+              snapshot.onerror = function () {
+                paintMonogram(rctx, rw, rh);
+                finishRaster();
+              };
+              snapshot.src = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svgMarkup);
+            } else {
+              paintMonogram(rctx, rw, rh);
+            }
+
+            // Final cell pitch (display px) per grid enum; the ladder steps
+            // down from 4x on powers of sqrt(2). Stepped, not continuous:
+            // each step is a stable re-sample, the digital resolve.
+            var rowsFinal = { coarse: 22, med: 36, fine: 54 };
+            var cellFinal = Math.max(4, cssH / rowsFinal[grid]);
+            var LADDER = [4, 2.83, 2, 1.41, 1];
+            var LAST = LADDER.length - 1;
+
+            function clamp01(v) {
+              return v < 0 ? 0 : v > 1 ? 1 : v;
+            }
+            // Stateless integer hash for per-cell shimmer: pure function of
+            // (col, row, step), no stream, no state.
+            function hash01(cx, cy, step) {
+              var h =
+                Math.imul(cx + 1, 0x9e3779b1) ^
+                Math.imul(cy + 1, 0x85ebca6b) ^
+                Math.imul(step + 1, 0xc2b2ae35);
+              h = Math.imul(h ^ (h >>> 15), 0x27d4eb2f);
+              h = (h ^ (h >>> 13)) >>> 0;
+              return h / 4294967296;
+            }
+
+            var glyphs = charset.split("");
+            var GN = glyphs.length;
+
+            // Pure repaint from (raster tables, t).
+            function paint(timeSeconds) {
+              ctx.fillStyle = bgColor;
+              ctx.fillRect(0, 0, canvas.width, canvas.height);
+              if (!rasterReady) return;
+              var t = timeSeconds;
+              var fade = clamp01(t / FADE_IN);
+              fade = 1 - (1 - fade) * (1 - fade); // power2.out
+              if (fade <= 0) return;
+              var rp = clamp01((t - resolveAt) / RESOLVE);
+              rp = rp * rp * (3 - 2 * rp); // smoothstep across the ladder
+              var step = Math.min(LAST, Math.floor(rp * LAST + 1e-6));
+              if (rp >= 1) step = LAST;
+              var cell = cellFinal * LADDER[step];
+              var cols = Math.ceil(cssW / cell);
+              var rows = Math.ceil(cssH / cell);
+              var cellDev = cell * dpr;
+              ctx.font = "600 " + cellDev * 0.92 + "px " + monoFamily;
+              ctx.textAlign = "center";
+              ctx.textBaseline = "middle";
+              ctx.fillStyle = inkColor;
+              // Shimmer amplitude decays to exactly zero on the final step
+              // so the HOLD is truly still.
+              var shimmerAmp = step === LAST && rp >= 1 ? 0 : 0.16;
+              for (var cy = 0; cy < rows; cy += 1) {
+                for (var cx = 0; cx < cols; cx += 1) {
+                  var x0 = Math.round(cx * cell * rasterScale);
+                  var y0 = Math.round(cy * cell * rasterScale);
+                  var x1 = Math.min(rw, Math.round((cx + 1) * cell * rasterScale));
+                  var y1 = Math.min(rh, Math.round((cy + 1) * cell * rasterScale));
+                  var luma = cellLuma(x0, Math.min(y0, rh), x1, Math.min(y1, rh));
+                  var idx = Math.round(luma * (GN - 1));
+                  if (idx <= 0 && glyphs[0] === " ") continue;
+                  var alpha = (0.3 + 0.7 * luma) * fade;
+                  if (shimmerAmp > 0) {
+                    alpha *= 1 - shimmerAmp + shimmerAmp * hash01(cx, cy, step);
+                  }
+                  if (alpha <= 0.01) continue;
+                  ctx.globalAlpha = clamp01(alpha);
+                  ctx.fillText(glyphs[idx], (cx + 0.5) * cellDev, (cy + 0.5) * cellDev);
+                }
+              }
+              ctx.globalAlpha = 1;
+            }
+
+            gsap.set(stage, { opacity: 1, y: "0cqh" });
+
+            var tl = gsap.timeline({
+              paused: true,
+              onUpdate: function () {
+                paint(tl.time());
+              },
+            });
+
+            // Anchor tween: spans the full authored duration so onUpdate
+            // (the canvas repaint) fires for every eventful seek in [0, D]
+            // and holds keep tl.time() honest.
+            tl.to({ t: 0 }, { t: 1, duration: duration, ease: "none" }, 0);
+
+            // HOLD: legible-fine, truly still (shimmer amplitude is zero
+            // past the final ladder step; the raster never changes).
+
+            // OUT: optional departure; exit none holds until the frame cuts.
+            if (exit === "up") {
+              tl.to(stage, { y: "-4cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "fade") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            }
+
+            tl.seek(0);
+            paint(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["ascii-render-pass"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add ascii-render-pass" />
+
+That writes one file: `compositions/components/ascii-render-pass.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/ascii-render-pass.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `experiment` `texture` `ascii` `quantize`.
+
+## 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/components/ascii-trail-reveal.mdx b/docs/catalog/components/ascii-trail-reveal.mdx
new file mode 100644
index 0000000000..faf562313e
--- /dev/null
+++ b/docs/catalog/components/ascii-trail-reveal.mdx
@@ -0,0 +1,422 @@
+---
+title: "ASCII Trail Reveal"
+description: "An authored S-curve sweeps through a deterministic ASCII grid, flipping cells away to reveal a labeled panel."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/ascii-trail-reveal.html"
+  compositionId="ascii-trail-reveal"
+  compositionSrc="compositions/components/ascii-trail-reveal.html"
+  variables={[{"id":"label","type":"string","role":"content","label":"Panel label","description":"Text shown on the revealed panel.","default":"The reveal"},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Color used by the trail and revealed panel.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"trail_width","type":"enum","role":"layout","label":"Trail width","description":"Width of the cell reveal tail around the authored path.","default":"narrow","options":[{"value":"narrow","label":"Narrow"},{"value":"wide","label":"Wide"}]}]}
+>
+
+```html ascii-trail-reveal.html
+<!doctype html>
+<!--
+  ascii-trail-reveal: HyperFrames video primitive (intros and reveals)
+
+  Concept: a luminous actor follows an authored S-curve across an ASCII
+  signal grid. Cells flip away behind the actor to reveal the real panel,
+  while the lagging edge dissolves in a deterministic cascade.
+
+  Variables:
+    - label (string, default "The reveal"): text on the revealed panel.
+    - accent (green | blue | violet, default "green"): trail and panel accent.
+    - trail_width (narrow | wide, default "narrow"): width of the reveal tail.
+
+  Envelope (fixed IN and OUT, elastic HOLD only, never timeScale):
+    IN_BASE  = 3.20s  the actor crosses the authored path, rests briefly,
+               then dissolves as the final cells complete their flip
+    HOLD     = elastic = max(0, D - IN_BASE), fully revealed content drifts
+               subtly and remains legible
+    OUT_BASE = 0.00s  the revealed panel is the required end state
+    If D is shorter than IN_BASE, IN compresses to D and HOLD is zero.
+
+  Determinism: glyphs, cell timing jitter, and reveal order come only from
+  row, column, and index math. No clock or random source participates.
+-->
+<html
+  lang="en"
+  data-composition-id="ascii-trail-reveal"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "label", "type": "string", "role": "content", "label": "Panel label", "description": "Text shown on the revealed panel.", "default": "The reveal" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Color used by the trail and revealed panel.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "trail_width", "type": "enum", "role": "layout", "label": "Trail width", "description": "Width of the cell reveal tail around the authored path.", "default": "narrow", "options": [{ "value": "narrow", "label": "Narrow" }, { "value": "wide", "label": "Wide" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>ASCII Trail Reveal</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="ascii-trail-reveal" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .atr-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+          }
+
+          .atr-panel {
+            position: relative;
+            width: 88cqw;
+            height: 76cqh;
+            overflow: hidden;
+            border: 0.16cqmin solid color-mix(in srgb, var(--atr-accent) 52%, #475569);
+            border-radius: 3cqmin;
+            background: #111820;
+            box-shadow:
+              0 4cqh 12cqh rgba(0, 0, 0, 0.45),
+              inset 0 0 0 0.12cqmin rgba(255, 255, 255, 0.04);
+            perspective: 80cqmin;
+          }
+
+          .atr-content {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            padding: 8cqw;
+            background:
+              radial-gradient(
+                circle at 50% 45%,
+                color-mix(in srgb, var(--atr-accent) 24%, transparent),
+                transparent 48%
+              ),
+              linear-gradient(145deg, #17212c, #0c1219);
+            transform-origin: 50% 50%;
+          }
+
+          .atr-label {
+            max-width: 76cqw;
+            color: #f8fafc;
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: clamp(24px, 10cqmin, 112px);
+            font-weight: 760;
+            line-height: 0.96;
+            letter-spacing: -0.045em;
+            text-align: center;
+            text-wrap: balance;
+            text-shadow: 0 0 4cqmin color-mix(in srgb, var(--atr-accent) 28%, transparent);
+          }
+
+          .atr-grid {
+            --atr-columns: 24;
+            --atr-rows: 14;
+            position: absolute;
+            inset: 0;
+            z-index: 2;
+            display: grid;
+            grid-template-columns: repeat(var(--atr-columns), 1fr);
+            grid-template-rows: repeat(var(--atr-rows), 1fr);
+            overflow: hidden;
+            background: #0b1016;
+            transform-style: preserve-3d;
+          }
+
+          .atr-cell {
+            display: grid;
+            place-items: center;
+            min-width: 0;
+            min-height: 0;
+            overflow: hidden;
+            border-right: 0.06cqmin solid rgba(148, 163, 184, 0.08);
+            border-bottom: 0.06cqmin solid rgba(148, 163, 184, 0.08);
+            background: color-mix(in srgb, #111820 94%, var(--atr-accent));
+            color: color-mix(in srgb, var(--atr-accent) 72%, #dbeafe);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
+            font-size: clamp(7px, 2.35cqmin, 22px);
+            font-weight: 650;
+            line-height: 1;
+            transform-origin: 50% 50%;
+            backface-visibility: hidden;
+            will-change: transform, opacity;
+          }
+
+          .atr-path-layer {
+            position: absolute;
+            inset: 0;
+            z-index: 3;
+            width: 100%;
+            height: 100%;
+            overflow: visible;
+          }
+
+          .atr-path-guide {
+            fill: none;
+            stroke: color-mix(in srgb, var(--atr-accent) 34%, transparent);
+            stroke-width: 2;
+            stroke-linecap: round;
+            stroke-dasharray: 3 14;
+          }
+
+          .atr-actor-halo {
+            fill: color-mix(in srgb, var(--atr-accent) 22%, transparent);
+          }
+
+          .atr-actor-core {
+            fill: #f8fafc;
+            stroke: var(--atr-accent);
+            stroke-width: 7;
+            filter: drop-shadow(0 0 18px var(--atr-accent));
+          }
+        </style>
+
+        <div
+          id="ascii-trail-reveal-clip"
+          class="atr-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="atr-panel">
+            <div class="atr-content">
+              <div class="atr-label"></div>
+            </div>
+            <div class="atr-grid" aria-hidden="true"></div>
+            <svg
+              class="atr-path-layer"
+              viewBox="0 0 1000 600"
+              preserveAspectRatio="none"
+              aria-hidden="true"
+            >
+              <path class="atr-path-guide"></path>
+              <g id="ascii-trail-reveal-actor">
+                <circle class="atr-actor-halo" r="42"></circle>
+                <circle class="atr-actor-core" r="13"></circle>
+              </g>
+            </svg>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var content = root.querySelector(".atr-content");
+            var label = root.querySelector(".atr-label");
+            var grid = root.querySelector(".atr-grid");
+            var guide = root.querySelector(".atr-path-guide");
+            var actor = root.querySelector("#ascii-trail-reveal-actor");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var labelText = vars.label == null ? "The reveal" : String(vars.label);
+            var accent = vars.accent === "blue" || vars.accent === "violet" ? vars.accent : "green";
+            var trailWidth = vars.trail_width === "wide" ? "wide" : "narrow";
+            var accentColors = {
+              green: "var(--brand, #4ade80)",
+              blue: "var(--accent, #38bdf8)",
+              violet: "var(--accent-2, #a78bfa)",
+            };
+
+            label.textContent = labelText;
+            root.style.setProperty("--atr-accent", accentColors[accent]);
+
+            var COLS = 24;
+            var ROWS = 14;
+            var GLYPHS = " .:-=+*#%@01/\\<>[]{}";
+            var PATH_POINTS = [
+              [-80, 460],
+              [340, 460],
+              [660, 140],
+              [1080, 140],
+            ];
+            var cells = [];
+
+            function sCurvePoint(progress) {
+              var inverse = 1 - progress;
+              var startWeight = inverse * inverse * inverse;
+              var firstWeight = 3 * inverse * inverse * progress;
+              var secondWeight = 3 * inverse * progress * progress;
+              var endWeight = progress * progress * progress;
+              return {
+                x:
+                  startWeight * PATH_POINTS[0][0] +
+                  firstWeight * PATH_POINTS[1][0] +
+                  secondWeight * PATH_POINTS[2][0] +
+                  endWeight * PATH_POINTS[3][0],
+                y:
+                  startWeight * PATH_POINTS[0][1] +
+                  firstWeight * PATH_POINTS[1][1] +
+                  secondWeight * PATH_POINTS[2][1] +
+                  endWeight * PATH_POINTS[3][1],
+              };
+            }
+
+            guide.setAttribute(
+              "d",
+              "M " +
+                PATH_POINTS[0].join(" ") +
+                " C " +
+                PATH_POINTS.slice(1)
+                  .map(function (point) {
+                    return point.join(" ");
+                  })
+                  .join(" "),
+            );
+
+            for (var row = 0; row < ROWS; row += 1) {
+              for (var column = 0; column < COLS; column += 1) {
+                var index = row * COLS + column;
+                var cell = document.createElement("span");
+                var glyphIndex = (index * 17 + row * 11 + column * 7) % GLYPHS.length;
+                cell.className = "atr-cell";
+                cell.textContent = GLYPHS.charAt(glyphIndex);
+                grid.appendChild(cell);
+                cells.push({ element: cell, row: row, column: column, index: index });
+              }
+            }
+
+            var IN_BASE = 3.2;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var IN = Math.min(IN_BASE, duration);
+            var HOLD = Math.max(0, duration - IN);
+            var phaseScale = IN / IN_BASE;
+            var actorState = { progress: 0 };
+
+            function updateActor() {
+              var point = sCurvePoint(actorState.progress);
+              actor.setAttribute("transform", "translate(" + point.x + " " + point.y + ")");
+            }
+
+            gsap.set(content, { scale: 0.985 });
+            gsap.set(guide, { opacity: 0 });
+            gsap.set(actor, { opacity: 0 });
+            updateActor();
+
+            var tl = gsap.timeline({ paused: true });
+
+            tl.to(content, { scale: 1, duration: IN, ease: "power2.out" }, 0);
+            tl.to(
+              guide,
+              { opacity: 0.72, duration: 0.24 * phaseScale, ease: "power2.out" },
+              0.18 * phaseScale,
+            );
+            tl.to(
+              actor,
+              { opacity: 1, duration: 0.24 * phaseScale, ease: "power2.out" },
+              0.22 * phaseScale,
+            );
+            tl.to(
+              actorState,
+              {
+                progress: 1,
+                duration: 2.35 * phaseScale,
+                ease: "power2.out",
+                onUpdate: updateActor,
+              },
+              0.34 * phaseScale,
+            );
+
+            cells.forEach(function (cellData) {
+              var progress = (cellData.column + 0.5) / COLS;
+              var pathPoint = sCurvePoint(progress);
+              var cellY = ((cellData.row + 0.5) / ROWS) * 600;
+              var distanceFromPath = Math.abs(cellY - pathPoint.y) / 600;
+              var distanceLag = distanceFromPath * (trailWidth === "wide" ? 0.5 : 0.8);
+              var indexJitter = ((cellData.index * 37) % 11) * 0.009;
+              var revealAt = (0.42 + progress * 1.92 + distanceLag + indexJitter) * phaseScale;
+              var flipDuration = (0.2 + ((cellData.index * 13) % 5) * 0.018) * phaseScale;
+
+              tl.to(
+                cellData.element,
+                {
+                  rotationY: 88,
+                  scaleX: 0.3,
+                  opacity: 0,
+                  duration: flipDuration,
+                  ease: "power2.in",
+                },
+                revealAt,
+              );
+            });
+
+            tl.to(
+              guide,
+              { opacity: 0, duration: 0.24 * phaseScale, ease: "power2.in" },
+              2.82 * phaseScale,
+            );
+            tl.to(
+              actor,
+              { opacity: 0, duration: 0.24 * phaseScale, ease: "power2.in" },
+              2.92 * phaseScale,
+            );
+
+            if (HOLD > 0) {
+              tl.to(
+                content,
+                {
+                  scale: 1.008,
+                  duration: HOLD / 2,
+                  ease: "sine.inOut",
+                  yoyo: true,
+                  repeat: 1,
+                },
+                IN,
+              );
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["ascii-trail-reveal"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add ascii-trail-reveal" />
+
+That writes one file: `compositions/components/ascii-trail-reveal.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/ascii-trail-reveal.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `intro` `reveal` `ascii` `trail` `grid`.
+
+## 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/components/aurora-drift.mdx b/docs/catalog/components/aurora-drift.mdx
new file mode 100644
index 0000000000..2b6741328d
--- /dev/null
+++ b/docs/catalog/components/aurora-drift.mdx
@@ -0,0 +1,277 @@
+---
+title: "Aurora Drift"
+description: "Three soft accent-derived aurora fields drift in an exact ambient loop over a deep base and faint vignette."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/aurora-drift.html"
+  compositionId="aurora-drift"
+  compositionSrc="compositions/components/aurora-drift.html"
+  variables={[{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Accent token family used to derive the aurora hues.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"mood","type":"enum","role":"style","label":"Mood","description":"Base luminance and aurora field strength.","default":"deep","options":[{"value":"deep","label":"Deep"},{"value":"bright","label":"Bright"}]}]}
+>
+
+```html aurora-drift.html
+<!doctype html>
+<!--
+  aurora-drift: HyperFrames video primitive (backgrounds / ambient)
+
+  Concept: three oversized, softly blurred accent-derived fields drift over
+  a deep base beneath a faint vignette. The motion stays slow and restrained,
+  giving a scene color and depth without competing with foreground content.
+
+  Variables:
+    - accent (green | blue | violet, default green): selects the source token
+      from which the three related aurora hues are mixed.
+    - mood (deep | bright, default deep): controls base luminance and field
+      strength while preserving the same motion.
+
+  Envelope: IN = 0, HOLD = the full elastic duration, OUT = 0. The phase proxy
+  advances through exactly one whole sine cycle during HOLD. A longer mount
+  stretches only that ambient cycle.
+
+  Loop invariant: phase 2 * PI is normalized to phase 0 before any transform
+  is calculated, so every blob has exactly the same pose at t=0 and t=duration.
+
+  Sound: none.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, has no data-width or data-height,
+  and registers one paused timeline under the hardcoded aurora-drift id.
+-->
+<html
+  lang="en"
+  data-composition-id="aurora-drift"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Accent token family used to derive the aurora hues.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "mood", "type": "enum", "role": "style", "label": "Mood", "description": "Base luminance and aurora field strength.", "default": "deep", "options": [{ "value": "deep", "label": "Deep" }, { "value": "bright", "label": "Bright" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Aurora Drift</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="aurora-drift" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            pointer-events: none;
+          }
+
+          .ad-clip,
+          .ad-base,
+          .ad-vignette {
+            position: absolute;
+            inset: 0;
+          }
+
+          .ad-clip {
+            overflow: hidden;
+          }
+
+          .ad-base {
+            background:
+              radial-gradient(
+                ellipse at 50% 42%,
+                color-mix(in srgb, var(--ad-color) 8%, var(--ad-base)) 0%,
+                var(--ad-base) 68%
+              ),
+              var(--ad-base);
+          }
+
+          .ad-blob {
+            --ad-blob-opacity: 1;
+            position: absolute;
+            display: block;
+            border-radius: 50%;
+            filter: blur(12cqmin) saturate(0.84) opacity(var(--ad-blob-opacity));
+            mix-blend-mode: screen;
+            opacity: var(--ad-strength);
+            will-change: transform;
+          }
+
+          .ad-blob-a {
+            width: 76cqw;
+            height: 72cqh;
+            left: -18cqw;
+            top: -22cqh;
+            background: radial-gradient(
+              ellipse at center,
+              color-mix(in srgb, var(--ad-color) 88%, white) 0%,
+              color-mix(in srgb, var(--ad-color) 42%, transparent) 48%,
+              transparent 76%
+            );
+          }
+
+          .ad-blob-b {
+            width: 84cqw;
+            height: 78cqh;
+            right: -28cqw;
+            top: -2cqh;
+            --ad-blob-opacity: 0.82;
+            background: radial-gradient(
+              ellipse at center,
+              color-mix(in srgb, var(--ad-color) 72%, var(--accent, #38bdf8)) 0%,
+              color-mix(in srgb, var(--ad-color) 36%, transparent) 52%,
+              transparent 78%
+            );
+          }
+
+          .ad-blob-c {
+            width: 72cqw;
+            height: 74cqh;
+            left: 18cqw;
+            bottom: -34cqh;
+            --ad-blob-opacity: 0.68;
+            background: radial-gradient(
+              ellipse at center,
+              color-mix(in srgb, var(--ad-color) 72%, var(--accent-2, #a78bfa)) 0%,
+              color-mix(in srgb, var(--ad-color) 32%, transparent) 50%,
+              transparent 76%
+            );
+          }
+
+          .ad-vignette {
+            background: radial-gradient(
+              ellipse at center,
+              transparent 35%,
+              rgb(0 0 0 / var(--ad-vignette)) 100%
+            );
+          }
+        </style>
+
+        <div
+          id="aurora-drift-clip"
+          class="ad-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="ad-base"></div>
+          <div class="ad-blob ad-blob-a"></div>
+          <div class="ad-blob ad-blob-b"></div>
+          <div class="ad-blob ad-blob-c"></div>
+          <div class="ad-vignette"></div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            // Invalid enum overrides return to their declared defaults.
+            var accentTokens = {
+              green: "var(--brand, #34d399)",
+              blue: "var(--accent, #38bdf8)",
+              violet: "var(--accent-2, #a78bfa)",
+            };
+            var moodStyles = {
+              deep: { base: "#050711", strength: "0.42", vignette: "0.62" },
+              bright: { base: "#111827", strength: "0.56", vignette: "0.46" },
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentTokens, vars.accent)
+              ? vars.accent
+              : "green";
+            var mood = vars.mood === "bright" ? "bright" : "deep";
+            var moodStyle = moodStyles[mood];
+
+            root.style.setProperty("--ad-color", accentTokens[accent]);
+            root.style.setProperty("--ad-base", moodStyle.base);
+            root.style.setProperty("--ad-strength", moodStyle.strength);
+            root.style.setProperty("--ad-vignette", moodStyle.vignette);
+
+            var TAU = Math.PI * 2;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var state = { phase: 0 };
+            var paths = [
+              { element: root.querySelector(".ad-blob-a"), offset: 0, x: 4.6, y: 3.2 },
+              {
+                element: root.querySelector(".ad-blob-b"),
+                offset: TAU / 3,
+                x: 4.1,
+                y: 3.8,
+              },
+              {
+                element: root.querySelector(".ad-blob-c"),
+                offset: (TAU * 2) / 3,
+                x: 3.6,
+                y: 3,
+              },
+            ];
+
+            function renderPose() {
+              // The endpoint uses literal phase zero, avoiding the floating
+              // point residue from Math.sin(2 * PI).
+              var phase = state.phase === TAU ? 0 : state.phase;
+              paths.forEach(function (path) {
+                gsap.set(path.element, {
+                  x: Math.sin(phase + path.offset) * path.x + "cqw",
+                  y: Math.sin(phase + path.offset + Math.PI / 2) * path.y + "cqh",
+                });
+              });
+            }
+
+            var tl = gsap.timeline({ paused: true });
+
+            // HOLD: uniform phase travel produces smooth sine motion. Exactly
+            // one whole cycle is completed at the duration boundary.
+            tl.to(state, { phase: TAU, duration: duration, ease: "none", onUpdate: renderPose }, 0);
+
+            renderPose();
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines["aurora-drift"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add aurora-drift" />
+
+That writes one file: `compositions/components/aurora-drift.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/aurora-drift.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `background` `aurora` `gradient` `ambient` `loopable`.
+
+## 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/components/avatar-cloud.mdx b/docs/catalog/components/avatar-cloud.mdx
new file mode 100644
index 0000000000..b249c3e7e8
--- /dev/null
+++ b/docs/catalog/components/avatar-cloud.mdx
@@ -0,0 +1,512 @@
+---
+title: "Avatar Cloud"
+description: "Lettermark avatars populate a loose elliptical cloud while fine SVG links draw between the community and its central proof label."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/avatar-cloud.html"
+  compositionId="avatar-cloud"
+  compositionSrc="compositions/components/avatar-cloud.html"
+  variables={[{"id":"avatarCount","type":"number","role":"layout","label":"Avatar count","description":"Number of lettermark avatars in the network cloud.","default":10,"min":6,"max":16,"step":1},{"id":"showLinks","type":"enum","role":"content","label":"Show links","description":"Show or hide the connecting network lines.","default":"yes","options":[{"value":"yes","label":"Yes"},{"value":"no","label":"No"}]},{"id":"label","type":"string","role":"content","label":"Proof label","description":"Community proof copy shown in the center hub.","default":"50k builders"}]}
+>
+
+```html avatar-cloud.html
+<!doctype html>
+<!--
+  avatar-cloud: HyperFrames video primitive (effects / holdable / prove)
+
+  Concept: lettermark avatars populate a loose elliptical cloud around a
+  central proof label. Fine SVG links draw from the hub to every avatar, plus
+  selected avatar-to-avatar edges, so the beat communicates connection rather
+  than quantity alone. One mechanic, one job: prove community participation.
+
+  Compiled-from evidence: consumer-sim fixture plus the
+  avatar-cloud-network animation rule. The rule establishes the elliptical
+  cluster, layered hub, staggered avatar arrival, outward SVG link draw, and
+  readable climax dwell.
+
+  Use when: a scene needs to show an active builder, customer, creator, or
+  collaborator community without external photos or brand assets.
+
+  Variables (declared in data-composition-variables below):
+    - avatarCount (number, default 10, range 6 to 16): visible lettermarks.
+    - showLinks ("yes" | "no", default "yes"): include network links.
+    - label (string, default "50k builders"): proof copy in the center hub.
+
+  Envelope (fixed IN/OUT, elastic HOLD only, never gsap.timeScale()):
+    IN_BASE  = 2.20s  hub settles, avatars cascade in, then links draw.
+    HOLD     = elastic = max(0, D - (IN_BASE + OUT_BASE)); deterministic,
+               out-of-phase sine drift keeps the formed network alive.
+    OUT_BASE = 0.50s  the complete proof beat accelerates into a clean fade.
+    If D is shorter than IN_BASE + OUT_BASE, IN and OUT scale together so
+    IN + OUT equals D and HOLD equals 0.
+
+  Sync point: network-formed at 2.15s into IN. It is a fixed offset before the
+  elastic HOLD and scales proportionally only when the envelope is compressed.
+
+  Sound cue: none. The distributed community assembly has no truthful single
+  impact, so this primitive does not dispatch an hf:sfx event.
+
+  Mount contract: this file is a mountable sub-composition. A host loads it via
+  data-composition-src, and the runtime clones only <template> contents. Styles,
+  markup, GSAP, and registration therefore live inside <template>. #root fills
+  the host with inset:0 and container-type:size and has no data-width or
+  data-height. The hardcoded id "avatar-cloud" matches the host id and timeline
+  key after mount flattening. Variables come from
+  window.__hyperframes.getVariables(), which merges declarations with host
+  data-variable-values overrides.
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "avatarCount", "type": "number", "role": "layout", "label": "Avatar count", "description": "Number of lettermark avatars in the network cloud.", "default": 10, "min": 6, "max": 16, "step": 1 },
+    { "id": "showLinks", "type": "enum", "role": "content", "label": "Show links", "description": "Show or hide the connecting network lines.", "default": "yes", "options": [{ "value": "yes", "label": "Yes" }, { "value": "no", "label": "No" }] },
+    { "id": "label", "type": "string", "role": "content", "label": "Proof label", "description": "Community proof copy shown in the center hub.", "default": "50k builders" }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Avatar Cloud</title>
+    <!-- Metadata only. Mounting discards everything outside <template>. -->
+  </head>
+  <body>
+    <template>
+      <div
+        id="root"
+        data-composition-id="avatar-cloud"
+        data-start="0"
+        data-duration="5"
+        data-fps="30"
+      >
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          /* INVARIANT: the host owns the box. The primitive owns one isolated,
+             position-blind size container and no viewport-relative geometry. */
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+          }
+
+          .ac-clip,
+          .ac-stage,
+          .ac-avatar-layer,
+          .ac-links {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+          }
+
+          .ac-clip {
+            overflow: hidden;
+            background:
+              radial-gradient(
+                ellipse at 50% 47.5%,
+                color-mix(in srgb, var(--fg, #f8fafc) 8%, transparent),
+                transparent 48%
+              ),
+              var(--bg, #0b0c10);
+          }
+
+          .ac-stage {
+            overflow: hidden;
+            transform-origin: center;
+          }
+
+          /* EDIT ZONE: lines use the same token pair as the avatars and hub.
+             The SVG viewBox owns all endpoints, so links and positions cannot
+             derive independently. */
+          .ac-links {
+            z-index: 1;
+            overflow: visible;
+            pointer-events: none;
+          }
+
+          .ac-link {
+            fill: none;
+            stroke: color-mix(in srgb, var(--fg, #f8fafc) 22%, transparent);
+            stroke-width: 1.8;
+            vector-effect: non-scaling-stroke;
+          }
+
+          .ac-link-secondary {
+            stroke: color-mix(in srgb, var(--fg, #f8fafc) 14%, transparent);
+            stroke-width: 1.2;
+          }
+
+          .ac-avatar-layer {
+            z-index: 2;
+          }
+
+          .ac-avatar-position {
+            position: absolute;
+            transform: translate(-50%, -50%);
+          }
+
+          .ac-avatar {
+            display: grid;
+            place-items: center;
+            width: min(calc(var(--ac-size) * 1cqw), calc(var(--ac-size) * 1.65cqh));
+            aspect-ratio: 1;
+            border: 0.16cqw solid color-mix(in srgb, var(--fg, #f8fafc) 32%, transparent);
+            border-radius: 999cqw;
+            background: var(--ac-color, color-mix(in srgb, var(--fg, #f8fafc) 45%, transparent));
+            color: var(--bg, #0b0c10);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: min(calc(var(--ac-size) * 0.35cqw), calc(var(--ac-size) * 0.58cqh));
+            font-weight: 780;
+            letter-spacing: -0.04em;
+            line-height: 1;
+            box-shadow:
+              0 1.2cqh 2.8cqh color-mix(in srgb, var(--bg, #0b0c10) 48%, transparent),
+              inset 0 0.12cqw 0 color-mix(in srgb, var(--fg, #f8fafc) 26%, transparent);
+            will-change: transform, opacity;
+          }
+
+          /* Tones are depth steps of the ink, not hues: near faces sit at L1,
+             mid at L2, far at L3. Value alone separates the cloud. */
+          .ac-avatar[data-tone="0"] {
+            --ac-color: color-mix(in srgb, var(--fg, #f8fafc) 72%, transparent);
+          }
+
+          .ac-avatar[data-tone="1"] {
+            --ac-color: color-mix(in srgb, var(--fg, #f8fafc) 45%, transparent);
+          }
+
+          .ac-avatar[data-tone="2"] {
+            --ac-color: color-mix(in srgb, var(--fg, #f8fafc) 72%, transparent);
+          }
+
+          .ac-avatar[data-tone="3"] {
+            --ac-color: color-mix(in srgb, var(--fg, #f8fafc) 30%, transparent);
+          }
+
+          .ac-avatar[data-tone="4"] {
+            --ac-color: color-mix(in srgb, var(--fg, #f8fafc) 45%, transparent);
+          }
+
+          .ac-hub {
+            position: absolute;
+            left: 50%;
+            top: 47.5%;
+            z-index: 5;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            min-width: 24cqw;
+            max-width: 48cqw;
+            min-height: 16cqh;
+            padding: var(--space-2, 2cqh) var(--space-3, 3cqw);
+            overflow: hidden;
+            border: 0.16cqw solid color-mix(in srgb, var(--border, #334155) 82%, transparent);
+            border-radius: var(--radius, 2.4cqw);
+            background: var(--surface, #1e293b);
+            box-shadow:
+              0 2cqh 5cqh color-mix(in srgb, var(--bg, #0b0c10) 56%, transparent),
+              inset 0 0.14cqw 0 color-mix(in srgb, var(--fg, #f8fafc) 18%, transparent);
+            transform: translate(-50%, -50%);
+            transform-origin: center;
+          }
+
+          .ac-kicker {
+            color: var(--muted, #8b93a3);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: min(1.6cqw, 2.8cqh);
+            font-weight: 720;
+            letter-spacing: 0.16em;
+            line-height: 1;
+            text-transform: uppercase;
+          }
+
+          .ac-label {
+            max-width: 40cqw;
+            overflow: hidden;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: min(5.2cqw, 9cqh);
+            font-weight: 820;
+            letter-spacing: -0.045em;
+            line-height: 1.05;
+            text-align: center;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+        </style>
+
+        <div
+          id="avatar-cloud-clip"
+          class="ac-clip clip"
+          data-start="0"
+          data-duration="5"
+          data-track-index="0"
+        >
+          <section class="ac-stage" aria-label="Community network proof">
+            <svg
+              class="ac-links"
+              viewBox="0 0 1000 600"
+              preserveAspectRatio="none"
+              aria-hidden="true"
+              focusable="false"
+            ></svg>
+            <div class="ac-avatar-layer" aria-hidden="true"></div>
+            <div class="ac-hub">
+              <span class="ac-kicker">Community</span>
+              <span class="ac-label"></span>
+            </div>
+          </section>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.currentScript.closest("#root") || document.getElementById("root");
+            var compositionId = "avatar-cloud";
+            var stage = root.querySelector(".ac-stage");
+            var linksLayer = root.querySelector(".ac-links");
+            var avatarLayer = root.querySelector(".ac-avatar-layer");
+            var hub = root.querySelector(".ac-hub");
+            var labelElement = root.querySelector(".ac-label");
+
+            // EDIT ZONE: getVariables is the only owner of declared defaults
+            // plus host overrides. Values are normalized exactly once here.
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var rawCount = Number(vars.avatarCount);
+            var avatarCount = Number.isFinite(rawCount) ? Math.round(rawCount) : 10;
+            avatarCount = Math.max(6, Math.min(16, avatarCount));
+            var showLinks = vars.showLinks === "no" ? "no" : "yes";
+            var label = vars.label == null ? "50k builders" : String(vars.label);
+            labelElement.textContent = label;
+
+            // One normalized coordinate table owns both DOM placement and SVG
+            // endpoints. Index-based sine offsets make the ellipse loose while
+            // remaining identical under every seek and render.
+            var CENTER = { x: 500, y: 285 };
+            var positions = [];
+            var avatars = [];
+            var lettermarks = [
+              "AK",
+              "BM",
+              "CR",
+              "DL",
+              "ES",
+              "FT",
+              "GN",
+              "HP",
+              "IV",
+              "JO",
+              "KQ",
+              "LU",
+              "MW",
+              "NX",
+              "OY",
+              "PZ",
+            ];
+            var avatarFragment = document.createDocumentFragment();
+
+            for (var index = 0; index < avatarCount; index += 1) {
+              var angle = -Math.PI / 2 + (index / avatarCount) * Math.PI * 2;
+              var radiusX = 356 + Math.sin((index + 1) * 2.37) * 24;
+              var radiusY = 194 + Math.sin((index + 1) * 1.61) * 18;
+              var x = CENTER.x + Math.cos(angle) * radiusX;
+              var y = CENTER.y + Math.sin(angle) * radiusY;
+              var size = 7.5 + Math.sin((index + 1) * 1.93) * 0.8;
+
+              positions.push({ x: x, y: y });
+
+              var positionElement = document.createElement("div");
+              positionElement.className = "ac-avatar-position";
+              positionElement.style.left = x / 10 + "%";
+              positionElement.style.top = y / 6 + "%";
+
+              var avatar = document.createElement("div");
+              avatar.className = "ac-avatar";
+              avatar.dataset.tone = String(index % 5);
+              avatar.style.setProperty("--ac-size", size.toFixed(2));
+              avatar.textContent = lettermarks[index];
+              positionElement.appendChild(avatar);
+              avatarFragment.appendChild(positionElement);
+              avatars.push(avatar);
+            }
+
+            avatarLayer.replaceChildren(avatarFragment);
+
+            var lines = [];
+
+            function appendLine(from, to, secondary) {
+              var line = document.createElementNS("http://www.w3.org/2000/svg", "line");
+              var length = Math.hypot(to.x - from.x, to.y - from.y);
+              line.setAttribute("x1", String(from.x));
+              line.setAttribute("y1", String(from.y));
+              line.setAttribute("x2", String(to.x));
+              line.setAttribute("y2", String(to.y));
+              line.setAttribute("class", secondary ? "ac-link ac-link-secondary" : "ac-link");
+              line.style.strokeDasharray = length + " " + length;
+              line.dataset.length = String(length);
+              linksLayer.appendChild(line);
+              lines.push(line);
+            }
+
+            if (showLinks === "yes") {
+              positions.forEach(function (position) {
+                appendLine(CENTER, position, false);
+              });
+
+              positions.forEach(function (position, positionIndex) {
+                if (positionIndex % 3 === 0) {
+                  appendLine(position, positions[(positionIndex + 2) % avatarCount], true);
+                }
+              });
+            }
+
+            // RETIME RANGE: these values own the complete lifecycle. The link
+            // wave fits the maximum 22-line network before the fixed sync point.
+            var IN_BASE = 2.2;
+            var OUT_BASE = 0.5;
+            var HUB_START_BASE = 0.05;
+            var HUB_DURATION_BASE = 0.5;
+            var AVATAR_START_BASE = 0.24;
+            var AVATAR_DURATION_BASE = 0.5;
+            var AVATAR_STAGGER_BASE = 0.055;
+            var LINES_START_BASE = 1.02;
+            var LINES_DURATION_BASE = 0.55;
+            var LINE_STAGGER_BASE = 0.025;
+
+            var durationValue = Number(root.dataset.duration);
+            var duration = Number.isFinite(durationValue) && durationValue > 0 ? durationValue : 5;
+            var envelopeScale = duration < IN_BASE + OUT_BASE ? duration / (IN_BASE + OUT_BASE) : 1;
+            var IN = IN_BASE * envelopeScale;
+            var OUT = OUT_BASE * envelopeScale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var HOLD_START = IN;
+            var OUT_START = IN + HOLD;
+            var HUB_START = HUB_START_BASE * envelopeScale;
+            var HUB_DURATION = HUB_DURATION_BASE * envelopeScale;
+            var AVATAR_START = AVATAR_START_BASE * envelopeScale;
+            var AVATAR_DURATION = AVATAR_DURATION_BASE * envelopeScale;
+            var AVATAR_STAGGER = AVATAR_STAGGER_BASE * envelopeScale;
+            var LINES_START = LINES_START_BASE * envelopeScale;
+            var LINES_DURATION = LINES_DURATION_BASE * envelopeScale;
+            var LINE_STAGGER = LINE_STAGGER_BASE * envelopeScale;
+
+            gsap.set(stage, { opacity: 1, scale: 1 });
+            gsap.set(hub, { opacity: 0, scale: 0.94 });
+            gsap.set(avatars, { opacity: 0, scale: 0.92, x: 0, y: 0 });
+            lines.forEach(function (line) {
+              gsap.set(line, { opacity: 0, strokeDashoffset: Number(line.dataset.length) });
+            });
+
+            var timeline = gsap.timeline({ paused: true });
+
+            // IN: --ease-standard maps to GSAP power2.out in the shared easing
+            // vocabulary. No entrance starts at scale zero.
+            timeline.to(
+              hub,
+              { opacity: 1, scale: 1, duration: HUB_DURATION, ease: "power2.out" },
+              HUB_START,
+            );
+            timeline.to(
+              avatars,
+              {
+                opacity: 1,
+                scale: 1,
+                duration: AVATAR_DURATION,
+                ease: "power2.out",
+                stagger: { each: AVATAR_STAGGER, from: "start" },
+              },
+              AVATAR_START,
+            );
+
+            lines.forEach(function (line, lineIndex) {
+              timeline.to(
+                line,
+                {
+                  opacity: 1,
+                  strokeDashoffset: 0,
+                  duration: LINES_DURATION,
+                  ease: "power2.out",
+                },
+                LINES_START + lineIndex * LINE_STAGGER,
+              );
+            });
+
+            // HOLD: deterministic index-derived endpoints with --ease-drift's
+            // sine.inOut curve. One finite leg fills the elastic hold exactly.
+            if (HOLD > 0) {
+              avatars.forEach(function (avatar, avatarIndex) {
+                var driftX = Math.sin((avatarIndex + 1) * 1.73) * 0.85;
+                var driftY = Math.sin((avatarIndex + 1) * 2.41) * 1.15;
+                timeline.fromTo(
+                  avatar,
+                  { x: -driftX + "cqw", y: -driftY + "cqh" },
+                  {
+                    x: driftX + "cqw",
+                    y: driftY + "cqh",
+                    duration: HOLD,
+                    ease: "sine.inOut",
+                    immediateRender: false,
+                  },
+                  HOLD_START,
+                );
+              });
+            }
+
+            // OUT: the complete network leaves once with the asymmetric exit
+            // curve. HOLD motion resolves before this phase begins.
+            timeline.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+
+            timeline.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = timeline;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add avatar-cloud" />
+
+That writes one file: `compositions/components/avatar-cloud.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/avatar-cloud.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `effects` `avatars` `community` `network` `social-proof` `prove`.
+
+## 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/components/avatar-group-hover.mdx b/docs/catalog/components/avatar-group-hover.mdx
new file mode 100644
index 0000000000..91aaca26d0
--- /dev/null
+++ b/docs/catalog/components/avatar-group-hover.mdx
@@ -0,0 +1,138 @@
+---
+title: "Avatar Group Hover"
+description: "A distance-falloff avatar group lift with bouncy hover return"
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/avatar-group-hover.html"
+  compositionId="avatar-group-hover"
+  compositionSrc="compositions/components/avatar-group-hover.html"
+  variables={[{"id":"size","type":"enum","role":"style","label":"Size","description":"Avatar diameter, with the initials scaling alongside it.","default":"standard","options":[{"value":"small","label":"Small"},{"value":"standard","label":"Standard"},{"value":"large","label":"Large"}]},{"id":"overlap","type":"enum","role":"style","label":"Overlap","description":"How far each avatar tucks under the one before it, as a share of its own diameter.","default":"standard","options":[{"value":"tight","label":"Tight"},{"value":"standard","label":"Standard"},{"value":"loose","label":"Loose"}]},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Colour the avatar gradient resolves into.","default":"blue","options":[{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"},{"value":"green","label":"Green"}]}]}
+>
+
+```html avatar-group-hover.html
+<!--
+  Avatar Group Hover - transitions.dev-inspired primitive for HyperFrames.
+
+  Paste the markup and CSS into a composition. Use the timeline integration
+  note at the bottom as the starting point for deterministic GSAP animation.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result as a custom property
+  the CSS consumes. The timeline recipe below is untouched by them: it still
+  drives one lift offset, and these decide what it lifts.
+
+    - size (small | standard | large, default standard): avatar diameter,
+      42px, 54px or 70px. The initials scale with it.
+    - overlap (tight | standard | loose, default standard): how far each
+      avatar tucks under the one before it, as a share of its own diameter:
+      half, a third, or barely an eighth.
+    - accent (blue | violet | green, default blue): the colour the avatar
+      gradient resolves into out of the shared near-black.
+
+  On every default the result is identical to the original: 54px avatars
+  overlapping by 18px in the blue gradient.
+-->
+
+<div
+  class="hf-transition-avatar-group-hover"
+  data-composition-variables='[
+    { "id": "size", "type": "enum", "role": "style", "label": "Size", "description": "Avatar diameter, with the initials scaling alongside it.", "default": "standard", "options": [{ "value": "small", "label": "Small" }, { "value": "standard", "label": "Standard" }, { "value": "large", "label": "Large" }] },
+    { "id": "overlap", "type": "enum", "role": "style", "label": "Overlap", "description": "How far each avatar tucks under the one before it, as a share of its own diameter.", "default": "standard", "options": [{ "value": "tight", "label": "Tight" }, { "value": "standard", "label": "Standard" }, { "value": "loose", "label": "Loose" }] },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Colour the avatar gradient resolves into.", "default": "blue", "options": [{ "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }, { "value": "green", "label": "Green" }] }
+  ]'
+>
+  <span>A</span><span>B</span><span>C</span><span>D</span>
+</div>
+
+<style>
+  .hf-transition-avatar-group-hover {
+    display: inline-flex;
+    align-items: center;
+    padding-left: var(--hf-avatar-overlap, 18px);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-transition-avatar-group-hover span {
+    display: grid;
+    place-items: center;
+    width: var(--hf-avatar-size, 54px);
+    height: var(--hf-avatar-size, 54px);
+    margin-left: calc(-1 * var(--hf-avatar-overlap, 18px));
+    border: 3px solid #fff;
+    border-radius: 999px;
+    background: linear-gradient(135deg, #111827, var(--hf-avatar-accent, #0ea5e9));
+    color: #fff;
+    font-size: var(--hf-avatar-font, 1em);
+    font-weight: 900;
+    box-shadow: 0 12px 30px rgba(24, 24, 27, 0.18);
+    transform: translateY(var(--hf-avatar-y, 0px));
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    var sizes = { small: 42, standard: 54, large: 70 };
+    var fonts = { small: "0.8em", standard: "1em", large: "1.3em" };
+    // Overlap is a share of the diameter, so the two knobs stay independent.
+    var overlaps = { tight: 0.5, standard: 1 / 3, loose: 0.12 };
+    var accents = { blue: "#0ea5e9", violet: "#a78bfa", green: "#34d399" };
+
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var sizeName = pick(sizes, vars.size, "standard");
+    var overlapName = pick(overlaps, vars.overlap, "standard");
+    var accent = accents[pick(accents, vars.accent, "blue")];
+    var diameter = sizes[sizeName];
+    var overlap = Math.round(diameter * overlaps[overlapName]);
+
+    var roots = document.querySelectorAll(".hf-transition-avatar-group-hover");
+    for (var i = 0; i < roots.length; i += 1) {
+      var style = roots[i].style;
+      style.setProperty("--hf-avatar-size", diameter + "px");
+      style.setProperty("--hf-avatar-font", fonts[sizeName]);
+      style.setProperty("--hf-avatar-overlap", overlap + "px");
+      style.setProperty("--hf-avatar-accent", accent);
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.to('.hf-transition-avatar-group-hover span', { '--hf-avatar-y': '-18px', duration: 0.28, stagger: { each: 0.035, from: 'center' }, ease: 'back.out(1.8)' }, startTime); tl.to('.hf-transition-avatar-group-hover span', { '--hf-avatar-y': '0px', duration: 0.42, stagger: { each: 0.035, from: 'center' }, ease: 'bounce.out' }, startTime + 0.36);
+-->
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add avatar-group-hover" />
+
+That writes one file: `compositions/components/avatar-group-hover.html`.
+
+## Usage
+
+Open `compositions/components/avatar-group-hover.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+
+{/* hf:generated-footer */}
+
+Tagged `video-primitive` `transition-primitive` `transitions-dev-port` `avatar` `hover`.
+
+## 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/components/badge-pop.mdx b/docs/catalog/components/badge-pop.mdx
new file mode 100644
index 0000000000..006cce5c2c
--- /dev/null
+++ b/docs/catalog/components/badge-pop.mdx
@@ -0,0 +1,187 @@
+---
+title: "Badge Pop"
+description: "A transitions.dev-inspired notification badge pop with elastic scale and count reveal"
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/badge-pop.html"
+  compositionId="badge-pop"
+  compositionSrc="compositions/components/badge-pop.html"
+  variables={[{"id":"count","type":"string","role":"style","label":"Count","description":"Text shown inside the notification badge, up to four characters.","default":"3","maxLength":4},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Colour family of the badge.","default":"red","options":[{"value":"red","label":"Red"},{"value":"blue","label":"Blue"},{"value":"green","label":"Green"},{"value":"violet","label":"Violet"}]},{"id":"surface","type":"enum","role":"style","label":"Surface","description":"Chrome of the button and the badge ring: light for bright frames, dark for dark ones.","default":"light","options":[{"value":"light","label":"Light"},{"value":"dark","label":"Dark"}]}]}
+>
+
+```html badge-pop.html
+<!--
+  Badge Pop - transitions.dev-inspired primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Use the timeline
+  integration note at the bottom as the starting point for deterministic GSAP
+  animation.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result as a custom property
+  the CSS below consumes, or as the badge text. The timeline recipe at the
+  bottom is untouched by them: it keeps popping the same badge, whatever the
+  badge says and however it is coloured.
+
+    - count (any text up to four characters, default "3"): what the badge
+      reads. Use it to say 1, 12, 99+ or NEW.
+    - accent (red | blue | green | violet, default red): the badge colour
+      family. red is the literal notification convention; the other three ride
+      the composition's own accent, brand and accent-2 tokens and fall back to
+      ink when the composition declares none. All four clear 3:1 against the
+      white count.
+    - surface (light | dark, default light): the chrome of the button and the
+      ring around the badge. light suits bright frames, dark suits dark ones.
+
+  On every default the result is identical to the original: a white bell tile
+  with a red 3 badge.
+-->
+
+<div
+  class="hf-transition-badge-pop"
+  data-composition-variables='[
+    { "id": "count", "type": "string", "role": "style", "label": "Count", "description": "Text shown inside the notification badge, up to four characters.", "default": "3", "maxLength": 4 },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Colour family of the badge.", "default": "red", "options": [{ "value": "red", "label": "Red" }, { "value": "blue", "label": "Blue" }, { "value": "green", "label": "Green" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "surface", "type": "enum", "role": "style", "label": "Surface", "description": "Chrome of the button and the badge ring: light for bright frames, dark for dark ones.", "default": "light", "options": [{ "value": "light", "label": "Light" }, { "value": "dark", "label": "Dark" }] }
+  ]'
+>
+  <button class="hf-transition-badge-button" type="button" aria-label="Notifications">
+    <svg viewBox="0 0 24 24" aria-hidden="true">
+      <path d="M18 8a6 6 0 10-12 0c0 7-3 7-3 7h18s-3 0-3-7" />
+      <path d="M10 20a2 2 0 004 0" />
+    </svg>
+  </button>
+  <span class="hf-transition-badge-count">3</span>
+</div>
+
+<style>
+  .hf-transition-badge-pop {
+    --hf-badge-pop-accent: #ef4444;
+    --hf-badge-pop-surface: #ffffff;
+    --hf-badge-pop-border: #e4e4e7;
+    --hf-badge-pop-ink: #18181b;
+    position: relative;
+    display: inline-grid;
+    place-items: center;
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-transition-badge-button {
+    display: grid;
+    place-items: center;
+    width: 76px;
+    height: 76px;
+    border: 1px solid var(--hf-badge-pop-border);
+    border-radius: 22px;
+    background: var(--hf-badge-pop-surface);
+    color: var(--hf-badge-pop-ink);
+    box-shadow: 0 20px 58px rgba(0, 0, 0, 0.12);
+  }
+  .hf-transition-badge-button svg {
+    width: 30px;
+    height: 30px;
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 2.2;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+  .hf-transition-badge-count {
+    position: absolute;
+    right: -8px;
+    top: -8px;
+    display: grid;
+    place-items: center;
+    min-width: 30px;
+    height: 30px;
+    padding: 0 8px;
+    border: 3px solid var(--hf-badge-pop-surface);
+    border-radius: 999px;
+    background: var(--hf-badge-pop-accent);
+    color: #ffffff;
+    font-size: 13px;
+    font-weight: 900;
+    transform-origin: center;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    // The badge is the one accent-carrying element here. red is the literal
+    // notification convention and stays; the decorative options ride the
+    // composition's own tokens and fall back to ink.
+    var accents = {
+      red: "#ef4444",
+      blue: "var(--accent, #18181b)",
+      green: "var(--brand, #18181b)",
+      violet: "var(--accent-2, #18181b)",
+    };
+    var surfaces = {
+      light: { surface: "#ffffff", border: "#e4e4e7", ink: "#18181b" },
+      dark: { surface: "#101014", border: "#2a2a32", ink: "#fafafa" },
+    };
+
+    var accent = accents[pick(accents, vars.accent, "red")];
+    var surface = surfaces[pick(surfaces, vars.surface, "light")];
+    var count =
+      typeof vars.count === "string" && vars.count.trim() ? vars.count.trim().slice(0, 4) : "3";
+
+    var roots = document.querySelectorAll(".hf-transition-badge-pop");
+    for (var i = 0; i < roots.length; i += 1) {
+      var root = roots[i];
+      root.style.setProperty("--hf-badge-pop-accent", accent);
+      root.style.setProperty("--hf-badge-pop-surface", surface.surface);
+      root.style.setProperty("--hf-badge-pop-border", surface.border);
+      root.style.setProperty("--hf-badge-pop-ink", surface.ink);
+      var label = root.querySelector(".hf-transition-badge-count");
+      if (label) {
+        label.textContent = count;
+      }
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-transition-badge-button', { y: 18, opacity: 0 }, { y: 0, opacity: 1, duration: 0.34, ease: 'power2.out' }, 0.35);
+  tl.fromTo('.hf-transition-badge-count', { scale: 0, opacity: 0 }, { scale: 1, opacity: 1, duration: 0.42, ease: 'back.out(2.4)' }, 0.7);
+  tl.to('.hf-transition-badge-count', { scale: 1.18, duration: 0.12, yoyo: true, repeat: 1, ease: 'power1.inOut' }, 1.15);
+-->
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add badge-pop" />
+
+That writes one file: `compositions/components/badge-pop.html`.
+
+## Usage
+
+Open `compositions/components/badge-pop.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+
+{/* hf:generated-footer */}
+
+Tagged `video-primitive` `transition-primitive` `transitions-dev-port` `badge` `microinteraction`.
+
+## 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/components/beat-accent.mdx b/docs/catalog/components/beat-accent.mdx
new file mode 100644
index 0000000000..a75593fe6a
--- /dev/null
+++ b/docs/catalog/components/beat-accent.mdx
@@ -0,0 +1,366 @@
+---
+title: "Beat Accent"
+description: "A single music-hit sting: impact flash, micro scale-pulse on the subject, immediate decay."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/beat-accent.html"
+  compositionId="beat-accent"
+  compositionSrc="compositions/components/beat-accent.html"
+  variables={[{"id":"text","type":"string","role":"content","label":"Accent text","description":"Word or short label emphasized by the beat hit.","default":"BOOM"},{"id":"flashColor","type":"enum","role":"style","label":"Flash color","description":"Token-backed accent tone used by the radial flash.","default":"accent","options":[{"value":"accent","label":"Accent"},{"value":"soft","label":"Soft accent"},{"value":"bright","label":"Bright accent"}]},{"id":"intensity","type":"number","role":"timing","label":"Intensity","description":"Strength of the scale pulse, flash, and shake.","default":1,"min":0.5,"max":2,"step":0.1}]}
+>
+
+```html beat-accent.html
+<!doctype html>
+<!--
+  beat-accent: HyperFrames video primitive (effects / burst / emphasize)
+
+  Concept: a single music-hit sting. A centered word snaps up in scale as a
+  radial impact flash erupts behind it, shakes by a small amount, then settles
+  immediately. One mechanic, one job: visual punctuation on one beat during IN.
+  This burst fires once and never loops. HOLD stays deliberately calm and still
+  after the decay.
+
+  Compiled-from evidence: Video Primitives v1 GAP C1, "sting: impact
+  flash/scale on a music hit." The candidates catalog describes a C1 gap:
+  music-driven films need visual punctuation on the downbeat and had nothing
+  atomic to reach for. A declared sync point makes the primitive weldable to
+  any audio hit. Catalog shelf: effects / burst / emphasize. The impact uses
+  the easing vocabulary's --ease-slam, GSAP expo.out, with the CSS mirror
+  cubic-bezier(0.19, 1, 0.22, 1), kept brief per taste rule 3.
+
+  Use when: one downbeat, edit point, reveal, or hard musical hit needs a short
+  visual accent. Mount it over the subject or use its centered word as the
+  subject. Do not use it as an ambient loop or a repeated visualizer.
+
+  Variables (declared in data-composition-variables below):
+    - text (string, default "BOOM"): the word or label that receives the hit.
+    - flashColor (enum, default "accent"): accent, soft accent, or bright
+      accent. Every option is derived from var(--accent), so theme changes
+      always repaint the flash.
+    - intensity (number, 0.5 to 2, default 1, step 0.1): scales subject pulse,
+      flash opacity and spread, and shake distance as one legible control.
+
+  Envelope (fixed IN/OUT, elastic HOLD only, never gsap.timeScale()):
+    IN_BASE  = 0.90s, calm lead, impact snap, flash, shake, and full decay
+    HOLD     = elastic = max(0, D - (IN_BASE + OUT_BASE)), deliberately still
+    OUT_BASE = 0.40s, clean release fade
+    If D < IN_BASE + OUT_BASE, IN and OUT scale down together so IN + OUT == D
+    and HOLD == 0. All fixed offsets and motion durations use the same scale.
+
+  Sync point: impact-hard lands at IMPACT_AT = 0.25s into an unscaled IN. It
+  scales proportionally only when the full envelope is compressed. ADR-0007
+  requires declared sync points to remain in a fixed phase, never inside the
+  elastic HOLD, so audio and visual timing cannot drift as duration changes.
+
+  Sound cue: the primitive never plays audio. At IMPACT_AT it dispatches a
+  bubbling `hf:sfx` CustomEvent with detail { id: "impact-hard", t: IMPACT_AT }.
+  A host mix stage may catch that event and route the id to its chosen asset.
+
+  Mount contract: this file is a MOUNTABLE SUB-COMPOSITION, not a standalone
+  composition. A host loads it via data-composition-src; the runtime clones
+  only <template> contents, while everything outside <template>, including
+  <head>, is discarded on mount. #root has no data-width or data-height. It is
+  styled by id, never by class, and fills the host box with position:absolute,
+  inset:0, container-type:size. Variables are read through
+  window.__hyperframes.getVariables(), never by parsing document.documentElement,
+  because the mounted document element belongs to the host composition.
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "text", "type": "string", "role": "content", "label": "Accent text", "description": "Word or short label emphasized by the beat hit.", "default": "BOOM" },
+    { "id": "flashColor", "type": "enum", "role": "style", "label": "Flash color", "description": "Token-backed accent tone used by the radial flash.", "default": "accent", "options": [{ "value": "accent", "label": "Accent" }, { "value": "soft", "label": "Soft accent" }, { "value": "bright", "label": "Bright accent" }] },
+    { "id": "intensity", "type": "number", "role": "timing", "label": "Intensity", "description": "Strength of the scale pulse, flash, and shake.", "default": 1, "min": 0.5, "max": 2, "step": 0.1 }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Beat Accent</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="beat-accent" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            --ease-slam: cubic-bezier(0.19, 1, 0.22, 1);
+            --ba-flash-color: var(--accent, #ff4f8b);
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            background: var(--bg, #0b1120);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .ba-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+          }
+
+          .ba-stage {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            display: grid;
+            place-items: center;
+            will-change: transform, opacity;
+          }
+
+          .ba-flash {
+            position: absolute;
+            width: 62cqw;
+            aspect-ratio: 1;
+            border-radius: 50%;
+            background: radial-gradient(
+              circle,
+              color-mix(in srgb, var(--ba-flash-color) 92%, transparent) 0%,
+              color-mix(in srgb, var(--ba-flash-color) 54%, transparent) 24%,
+              color-mix(in srgb, var(--ba-flash-color) 16%, transparent) 48%,
+              transparent 72%
+            );
+            opacity: 0;
+            will-change: transform, opacity;
+          }
+
+          .ba-flash::after {
+            content: "";
+            position: absolute;
+            inset: 22%;
+            border: 0.45cqmin solid color-mix(in srgb, var(--ba-flash-color) 78%, transparent);
+            border-radius: 50%;
+          }
+
+          .ba-subject {
+            position: relative;
+            z-index: 1;
+            display: block;
+            width: 86cqw;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, var(--font-body, system-ui, sans-serif));
+            font-size: 20cqmin;
+            font-weight: 900;
+            line-height: 0.9;
+            letter-spacing: -0.055em;
+            text-align: center;
+            text-transform: uppercase;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            text-shadow:
+              0 0 2cqmin color-mix(in srgb, var(--accent, #ff4f8b) 46%, transparent),
+              0 1.2cqh 3.8cqh color-mix(in srgb, var(--bg, #0b1120) 68%, transparent);
+            transform-origin: 50% 50%;
+            will-change: transform;
+          }
+        </style>
+
+        <div
+          id="beat-accent-clip"
+          class="ba-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="ba-stage">
+            <div class="ba-flash" aria-hidden="true"></div>
+            <div class="ba-subject"></div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".ba-stage");
+            var flash = root.querySelector(".ba-flash");
+            var subject = root.querySelector(".ba-subject");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var text = vars.text == null ? "BOOM" : String(vars.text);
+            var flashChoice =
+              vars.flashColor === "soft" || vars.flashColor === "bright"
+                ? vars.flashColor
+                : "accent";
+            var intensityValue = Number(vars.intensity);
+            var intensity = Number.isFinite(intensityValue)
+              ? Math.max(0.5, Math.min(2, intensityValue))
+              : 1;
+
+            var flashColors = {
+              accent: "var(--accent, #ff4f8b)",
+              soft: "color-mix(in srgb, var(--accent, #ff4f8b) 70%, var(--bg, #0b1120))",
+              bright: "color-mix(in srgb, var(--accent, #ff4f8b) 72%, var(--fg, #f8fafc))",
+            };
+
+            subject.textContent = text;
+            root.style.setProperty("--ba-flash-color", flashColors[flashChoice]);
+
+            var IN_BASE = 0.9;
+            var OUT_BASE = 0.4;
+            var IMPACT_AT_BASE = 0.25;
+            var SNAP_BASE = 0.12;
+            var SETTLE_BASE = 0.28;
+            var FLASH_IN_BASE = 0.08;
+            var FLASH_OUT_BASE = 0.28;
+
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var totalBase = IN_BASE + OUT_BASE;
+            var envelopeScale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * envelopeScale;
+            var OUT = OUT_BASE * envelopeScale;
+            var IMPACT_AT = IMPACT_AT_BASE * envelopeScale;
+            var SNAP = SNAP_BASE * envelopeScale;
+            var SETTLE = SETTLE_BASE * envelopeScale;
+            var FLASH_IN = FLASH_IN_BASE * envelopeScale;
+            var FLASH_OUT = FLASH_OUT_BASE * envelopeScale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var OUT_START = IN + HOLD;
+
+            var restScale = 1 - 0.06 * intensity;
+            var peakScale = 1 + 0.18 * intensity;
+            var flashPeakScale = 0.78 + 0.3 * intensity;
+            var flashEndScale = 1.08 + 0.32 * intensity;
+            var flashPeakOpacity = Math.min(0.96, 0.5 + 0.23 * intensity);
+            var shakeX = 0.9 * intensity;
+            var shakeY = 0.34 * intensity;
+
+            gsap.set(stage, { x: 0, y: 0, opacity: 1 });
+            gsap.set(subject, { scale: restScale });
+            gsap.set(flash, { scale: 0.25, opacity: 0 });
+
+            var tl = gsap.timeline({ paused: true });
+
+            tl.to(subject, { scale: peakScale, duration: SNAP, ease: "expo.out" }, IMPACT_AT);
+            tl.to(subject, { scale: 1, duration: SETTLE, ease: "power3.out" }, IMPACT_AT + SNAP);
+
+            tl.to(
+              flash,
+              {
+                scale: flashPeakScale,
+                opacity: flashPeakOpacity,
+                duration: FLASH_IN,
+                ease: "expo.out",
+              },
+              IMPACT_AT,
+            );
+            tl.to(
+              flash,
+              { scale: flashEndScale, opacity: 0, duration: FLASH_OUT, ease: "power3.out" },
+              IMPACT_AT + FLASH_IN,
+            );
+
+            tl.to(
+              stage,
+              {
+                x: shakeX + "cqw",
+                y: -shakeY + "cqh",
+                duration: 0.04 * envelopeScale,
+                ease: "none",
+              },
+              IMPACT_AT,
+            );
+            tl.to(
+              stage,
+              {
+                x: -shakeX * 0.7 + "cqw",
+                y: shakeY * 0.75 + "cqh",
+                duration: 0.05 * envelopeScale,
+                ease: "none",
+              },
+              IMPACT_AT + 0.04 * envelopeScale,
+            );
+            tl.to(
+              stage,
+              {
+                x: shakeX * 0.3 + "cqw",
+                y: -shakeY * 0.35 + "cqh",
+                duration: 0.05 * envelopeScale,
+                ease: "none",
+              },
+              IMPACT_AT + 0.09 * envelopeScale,
+            );
+            tl.to(
+              stage,
+              {
+                x: 0,
+                y: 0,
+                duration: 0.12 * envelopeScale,
+                ease: "power3.out",
+              },
+              IMPACT_AT + 0.14 * envelopeScale,
+            );
+
+            tl.call(
+              function () {
+                root.dispatchEvent(
+                  new CustomEvent("hf:sfx", {
+                    detail: { id: "impact-hard", t: IMPACT_AT },
+                    bubbles: true,
+                  }),
+                );
+              },
+              [],
+              IMPACT_AT,
+            );
+
+            tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.out" }, OUT_START);
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            // Literal id is required. Mount flattening strips data-composition-id
+            // from this inner root, so reading the id from root would register
+            // under null and leave the host unable to find this timeline.
+            window.__timelines["beat-accent"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add beat-accent" />
+
+That writes one file: `compositions/components/beat-accent.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/beat-accent.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `effects` `burst` `sting` `emphasize` `impact`.
+
+## 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/components/beat-pulse-background.mdx b/docs/catalog/components/beat-pulse-background.mdx
new file mode 100644
index 0000000000..c07c342d04
--- /dev/null
+++ b/docs/catalog/components/beat-pulse-background.mdx
@@ -0,0 +1,250 @@
+---
+title: "Beat Pulse Background"
+description: "An accent-derived backdrop pulses its glow intensity and saturation on a deterministic, supplied beat grid."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/beat-pulse-background.html"
+  compositionId="beat-pulse-background"
+  compositionSrc="compositions/components/beat-pulse-background.html"
+  variables={[{"id":"beats","type":"string","role":"timing","label":"Beats","description":"Comma-separated beat times in seconds. Invalid entries are ignored and numeric values are clamped to the composition duration.","default":"0.5,1.0,1.5,2.0,2.5,3.0,3.5"},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Accent token family used by the pulsing glow.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"intensity","type":"enum","role":"style","label":"Intensity","description":"Strength of the glow and saturation pulse.","default":"subtle","options":[{"value":"subtle","label":"Subtle"},{"value":"club","label":"Club"}]}]}
+>
+
+```html beat-pulse-background.html
+<!doctype html>
+<!--
+  beat-pulse-background: HyperFrames video primitive (backgrounds / rhythmic)
+
+  Concept: a deep accent-derived backdrop pulses its glow intensity and
+  saturation on a supplied beat grid. Each retained beat owns one fast attack
+  and one slower decay. The pulses stay tasteful enough to carry foreground
+  content without reading as a strobe.
+
+  Variables:
+    - beats (string, default "0.5,1.0,1.5,2.0,2.5,3.0,3.5"): comma-separated
+      beat times in seconds. Junk and blank entries are ignored. Numeric times
+      are clamped to the composition duration.
+    - accent (green | blue | violet, default green): pulse color family.
+    - intensity (subtle | club, default subtle): glow and saturation strength.
+
+  Envelope: IN = 0, HOLD = the full elastic duration, OUT = 0. Beat times are
+  absolute data inside HOLD, so a longer mount extends HOLD without retiming
+  the supplied grid. Every pulse is constructed synchronously as one attack
+  and one decay tween pair.
+
+  Sound: none. Beats are supplied data, not audio analysis.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, has no data-width or data-height,
+  and registers one paused timeline under the hardcoded beat-pulse-background
+  id.
+-->
+<html
+  lang="en"
+  data-composition-id="beat-pulse-background"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "beats", "type": "string", "role": "timing", "label": "Beats", "description": "Comma-separated beat times in seconds. Invalid entries are ignored and numeric values are clamped to the composition duration.", "default": "0.5,1.0,1.5,2.0,2.5,3.0,3.5" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Accent token family used by the pulsing glow.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "intensity", "type": "enum", "role": "style", "label": "Intensity", "description": "Strength of the glow and saturation pulse.", "default": "subtle", "options": [{ "value": "subtle", "label": "Subtle" }, { "value": "club", "label": "Club" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Beat Pulse Background</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="beat-pulse-background" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            pointer-events: none;
+          }
+
+          .bpb-clip,
+          .bpb-base,
+          .bpb-pulse,
+          .bpb-vignette {
+            position: absolute;
+            inset: 0;
+          }
+
+          .bpb-clip {
+            overflow: hidden;
+          }
+
+          .bpb-base {
+            background:
+              radial-gradient(
+                ellipse at 50% 42%,
+                color-mix(in srgb, var(--bpb-accent) 10%, var(--bg, #070a12)) 0%,
+                var(--bg, #070a12) 70%
+              ),
+              var(--bg, #070a12);
+          }
+
+          .bpb-pulse {
+            background:
+              radial-gradient(
+                ellipse at 24% 30%,
+                color-mix(in srgb, var(--bpb-accent) 74%, transparent) 0%,
+                color-mix(in srgb, var(--bpb-accent) 28%, transparent) 34%,
+                transparent 66%
+              ),
+              radial-gradient(
+                ellipse at 76% 68%,
+                color-mix(in srgb, var(--bpb-accent) 60%, var(--accent-2, #a78bfa)) 0%,
+                color-mix(in srgb, var(--bpb-accent) 20%, transparent) 38%,
+                transparent 70%
+              );
+            filter: saturate(var(--bpb-saturation, 1));
+            mix-blend-mode: screen;
+            opacity: 0.2;
+            will-change: opacity, filter;
+          }
+
+          .bpb-vignette {
+            background: radial-gradient(
+              ellipse at center,
+              transparent 34%,
+              color-mix(in srgb, var(--bg, #000000) 58%, transparent) 100%
+            );
+          }
+        </style>
+
+        <div
+          id="beat-pulse-background-clip"
+          class="bpb-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="bpb-base"></div>
+          <div class="bpb-pulse"></div>
+          <div class="bpb-vignette"></div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var pulse = root.querySelector(".bpb-pulse");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var accentTokens = {
+              green: "var(--brand, #34d399)",
+              blue: "var(--accent, #38bdf8)",
+              violet: "var(--accent-2, #a78bfa)",
+            };
+            var intensityLevels = {
+              subtle: { baseOpacity: 0.2, peakOpacity: 0.5, peakSaturation: 1.3 },
+              club: { baseOpacity: 0.26, peakOpacity: 0.72, peakSaturation: 1.65 },
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentTokens, vars.accent)
+              ? vars.accent
+              : "green";
+            var intensity = vars.intensity === "club" ? "club" : "subtle";
+            var level = intensityLevels[intensity];
+
+            root.style.setProperty("--bpb-accent", accentTokens[accent]);
+
+            var durationValue = Number(root.dataset.duration);
+            var duration = Number.isFinite(durationValue) && durationValue > 0 ? durationValue : 4;
+            var defaultBeats = "0.5,1.0,1.5,2.0,2.5,3.0,3.5";
+            var beatsValue = vars.beats == null ? defaultBeats : String(vars.beats);
+            var beats = beatsValue.split(",").reduce(function (result, token) {
+              var trimmed = token.trim();
+              if (trimmed === "") return result;
+
+              var seconds = Number(trimmed);
+              if (!Number.isFinite(seconds)) return result;
+
+              result.push(Math.max(0, Math.min(duration, seconds)));
+              return result;
+            }, []);
+
+            var ATTACK = 0.08;
+            var DECAY = 0.36;
+
+            gsap.set(pulse, { opacity: level.baseOpacity, "--bpb-saturation": 1 });
+
+            var tl = gsap.timeline({ paused: true });
+
+            beats.forEach(function (beat) {
+              tl.to(
+                pulse,
+                {
+                  opacity: level.peakOpacity,
+                  "--bpb-saturation": level.peakSaturation,
+                  duration: ATTACK,
+                  ease: "expo.out",
+                },
+                beat,
+              );
+              tl.to(
+                pulse,
+                {
+                  opacity: level.baseOpacity,
+                  "--bpb-saturation": 1,
+                  duration: DECAY,
+                  ease: "power2.in",
+                },
+                beat + ATTACK,
+              );
+            });
+
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines["beat-pulse-background"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add beat-pulse-background" />
+
+That writes one file: `compositions/components/beat-pulse-background.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/beat-pulse-background.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `background` `beat` `pulse` `rhythmic` `reactive`.
+
+## 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/components/beat-timeline.mdx b/docs/catalog/components/beat-timeline.mdx
new file mode 100644
index 0000000000..b78601a977
--- /dev/null
+++ b/docs/catalog/components/beat-timeline.mdx
@@ -0,0 +1,330 @@
+---
+title: "Beat Timeline"
+description: "A paused master-timeline orchestration spine that pins titled beat rows to evenly spaced named labels. Each row enters on its label, holds with the sequence, then exits with the group."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/beat-timeline.html"
+  compositionId="beat-timeline"
+  compositionSrc="compositions/components/beat-timeline.html"
+  variables={[{"id":"beatCount","type":"number","role":"content","label":"Beat count","description":"Number of beat rows in the sequence.","default":4,"min":2,"max":6,"step":1},{"id":"interval","type":"number","role":"layout","label":"Interval","description":"Base time between consecutive beat markers.","default":0.6,"min":0.2,"max":2,"step":0.05,"unit":"s"},{"id":"labels","type":"string","role":"content","label":"Labels","description":"Comma-separated beat titles, one per beat. Extra entries are ignored and missing entries fall back to Beat N.","default":"One,Two,Three,Four"}]}
+>
+
+```html beat-timeline.html
+<!doctype html>
+<!--
+  beat-timeline -- HyperFrames video primitive (transitions / sequencing / bridge)
+
+  Concept: a visible orchestration spine made from a paused master GSAP
+  timeline. Each beat row is pinned to an evenly spaced named label, then
+  enters exactly on that mark. One mechanic, one job: bridge a sequence by
+  making its deterministic beat grid readable and copy-and-own-able.
+
+  Compiled-from evidence: launches-motion-vocabulary.md, "Paused, seeked
+  timeline orchestration" census entry (15/18 projects, 134/159 files).
+
+  Use when: a scene needs several titled beats to land in a clear order, or
+  when a copied composition needs a legible master-timeline sequencing spine.
+
+  Variables (declared in data-composition-variables below):
+    - beatCount (number, default 4): integer row count, clamped to 2..6.
+    - interval (number, default 0.6s): base spacing between named beat labels,
+      clamped to 0.2..2s before any short-duration compression.
+    - labels (string): comma-separated row titles. Missing entries fall back
+      to "Beat N" and extra entries are ignored.
+
+  Envelope (holdable orchestration adaptation, never gsap.timeScale()):
+    ENTRANCE_SPAN = (beatCount - 1) * interval + ROW_IN_DURATION.
+    HOLD = max(0, D - (ENTRANCE_SPAN + OUT_BASE)); every landed row remains
+           fully visible and deliberately still during this elastic phase.
+    OUT_BASE = 0.40s; all rows fade together with power2.in at D - OUT_BASE.
+    If D is shorter than ENTRANCE_SPAN + OUT_BASE, interval and each row's
+    entrance duration scale down together so the final row still lands before
+    OUT. Only a host duration at or below OUT_BASE also compresses OUT, which
+    keeps the full lifecycle inside an otherwise impossible time box.
+
+  Sync points: beat labels are fixed offsets inside IN. Every label owns one
+  declared SFX cue at the same offset, never inside elastic HOLD. Beats use
+  "beat-tick" and the last beat uses "beat-tick-final". The primitive only
+  dispatches bubbling hf:sfx events; scene-level audio mixing owns playback.
+
+  Mount contract: this file is a mountable sub-composition. The runtime clones
+  only <template> contents, so all live styles, markup, and scripts are inside
+  the template. #root fills the host-owned box with no data-width/data-height,
+  and all internal geometry is based on its own cqw/cqh container. Variables
+  come from window.__hyperframes.getVariables(), because document.documentElement
+  belongs to the host after mounting.
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "beatCount", "type": "number", "role": "content", "label": "Beat count", "description": "Number of beat rows in the sequence.", "default": 4, "min": 2, "max": 6, "step": 1 },
+    { "id": "interval", "type": "number", "role": "layout", "label": "Interval", "description": "Base time between consecutive beat markers.", "default": 0.6, "min": 0.2, "max": 2, "step": 0.05, "unit": "s" },
+    { "id": "labels", "type": "string", "role": "content", "label": "Labels", "description": "Comma-separated beat titles, one per beat. Extra entries are ignored and missing entries fall back to Beat N.", "default": "One,Two,Three,Four" }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Beat Timeline</title>
+    <!-- Metadata only. The loader reads variable declarations from <html>,
+         then discards everything outside <template> during mounting. -->
+  </head>
+  <body>
+    <template>
+      <div
+        id="root"
+        data-composition-id="beat-timeline"
+        data-start="0"
+        data-duration="5.5"
+        data-fps="30"
+      >
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          /* Root is styled by ID for mounted CSS scoping. It owns no stage
+             dimensions, only the host box and the container-unit basis. */
+          #root {
+            --ease-standard: cubic-bezier(0.215, 0.61, 0.355, 1);
+            --ease-exit: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            background: var(--bg, Canvas);
+            color: var(--fg, CanvasText);
+            font-family: var(--font-body, system-ui, sans-serif);
+          }
+
+          .bt-clip {
+            width: 100%;
+            height: 100%;
+            display: grid;
+            place-items: center;
+          }
+
+          .bt-stack {
+            width: 84cqw;
+            display: flex;
+            flex-direction: column;
+            gap: 1.4cqh;
+          }
+
+          /* EDIT ZONE: row geometry only. Motion timing is owned by the script's
+             RETIME RANGE below, and theme paint remains token-driven here. */
+          .bt-row {
+            min-height: 10cqh;
+            display: grid;
+            grid-template-columns: 6cqw 1fr;
+            align-items: center;
+            column-gap: 2.6cqw;
+            padding: 1.4cqh 2.4cqw;
+            border: 0.12cqw solid var(--border, currentColor);
+            border-radius: var(--radius, 2cqh);
+            background: var(--surface, Canvas);
+            box-shadow: 0 1.2cqh 4cqh color-mix(in srgb, var(--bg, Canvas) 52%, transparent);
+          }
+
+          .bt-index {
+            width: 6cqw;
+            height: 6cqw;
+            display: grid;
+            place-items: center;
+            border-radius: 50%;
+            background: var(--brand, currentColor);
+            color: var(--bg, Canvas);
+            font-family: var(--font-display, system-ui, sans-serif);
+            font-size: 1.8cqw;
+            font-weight: 750;
+            line-height: 1;
+          }
+
+          .bt-copy {
+            min-width: 0;
+          }
+
+          .bt-title {
+            overflow: hidden;
+            color: var(--fg, CanvasText);
+            font-family: var(--font-display, system-ui, sans-serif);
+            font-size: min(4.4cqw, 5.2cqh);
+            font-weight: 700;
+            line-height: 1.04;
+            letter-spacing: -0.08cqw;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          .bt-subtitle {
+            margin-top: 0.7cqh;
+            color: var(--muted, currentColor);
+            font-size: min(1.8cqw, 2.2cqh);
+            font-weight: 550;
+            line-height: 1.15;
+            letter-spacing: 0.04cqw;
+          }
+        </style>
+
+        <div
+          id="beat-timeline-clip"
+          class="bt-clip clip"
+          data-start="0"
+          data-duration="5.5"
+          data-track-index="0"
+        >
+          <div class="bt-stack" aria-label="Beat timeline"></div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            // Literal by contract: mounting strips data-composition-id from the
+            // flattened inner root, so reading the attribute post-mount would
+            // register under null and fail the timeline lookup.
+            var compositionId = "beat-timeline";
+            var stack = root.querySelector(".bt-stack");
+
+            // EDIT ZONE: declarations live on <html>; this runtime call is the
+            // single owner of declared defaults plus per-instance overrides.
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var parsedBeatCount = Number(vars.beatCount);
+            // INVARIANT: exactly 2..6 integer rows reach the DOM and timeline.
+            var beatCount = Math.max(
+              2,
+              Math.min(6, Math.round(Number.isFinite(parsedBeatCount) ? parsedBeatCount : 4)),
+            );
+            var parsedInterval = Number(vars.interval);
+            // INVARIANT: invalid timing falls back once, valid timing clamps to
+            // the declared range before duration elasticity is calculated.
+            var interval = Math.max(
+              0.2,
+              Math.min(2, Number.isFinite(parsedInterval) ? parsedInterval : 0.6),
+            );
+            // INVARIANT: labels is always a string; blank or missing entries
+            // fall back per row, while authored extra entries stay unused.
+            var labelsValue = vars.labels == null ? "One,Two,Three,Four" : String(vars.labels);
+            var suppliedLabels = labelsValue.split(",").map(function (label) {
+              return label.trim();
+            });
+
+            var parsedDuration = parseFloat(root.dataset.duration || "5.5");
+            // INVARIANT: the lifecycle remains finite even under a malformed
+            // host duration. The authored and demo durations are both 5.5s.
+            var duration = Math.max(0.001, Number.isFinite(parsedDuration) ? parsedDuration : 5.5);
+
+            // RETIME RANGE: these values own the whole pacing decision. The
+            // interval and row entrance compress together, never via timeScale.
+            var ROW_IN_BASE = 0.4;
+            var OUT_BASE = 0.4;
+            var baseEntranceSpan = (beatCount - 1) * interval + ROW_IN_BASE;
+            var OUT = duration <= OUT_BASE ? duration / 2 : OUT_BASE;
+            var entranceBudget = duration - OUT;
+            var scale = baseEntranceSpan > entranceBudget ? entranceBudget / baseEntranceSpan : 1;
+            var timedInterval = interval * scale;
+            var ROW_IN = ROW_IN_BASE * scale;
+            var ENTRANCE_SPAN = (beatCount - 1) * timedInterval + ROW_IN;
+            var HOLD = Math.max(0, duration - (ENTRANCE_SPAN + OUT));
+            var OUT_START = ENTRANCE_SPAN + HOLD;
+
+            function fireSfx(id, t) {
+              root.dispatchEvent(
+                new CustomEvent("hf:sfx", { detail: { id: id, t: t }, bubbles: true }),
+              );
+            }
+
+            var rows = [];
+            for (var i = 0; i < beatCount; i += 1) {
+              var title = suppliedLabels[i] || "Beat " + (i + 1);
+              var row = document.createElement("div");
+              row.className = "bt-row";
+              row.innerHTML =
+                '<div class="bt-index" aria-hidden="true"></div>' +
+                '<div class="bt-copy"><div class="bt-title"></div><div class="bt-subtitle"></div></div>';
+              row.querySelector(".bt-index").textContent = String(i + 1).padStart(2, "0");
+              row.querySelector(".bt-title").textContent = title;
+              row.querySelector(".bt-subtitle").textContent =
+                "Cue " +
+                String(i + 1).padStart(2, "0") +
+                "  ·  " +
+                (i * timedInterval).toFixed(2) +
+                "s";
+              stack.appendChild(row);
+              rows.push(row);
+            }
+
+            // Explicit entrance and exit endpoints make a direct seek to t=0
+            // correct without ever playing the timeline.
+            gsap.set(rows, { opacity: 0, y: "2cqh", scale: 0.98 });
+
+            var tl = gsap.timeline({ paused: true });
+
+            // ORCHESTRATION SPINE: every row tween and its declared cue are
+            // pinned to the named label, never to a duplicated numeric offset.
+            for (var beatIndex = 0; beatIndex < beatCount; beatIndex += 1) {
+              var labelName = "beat" + beatIndex;
+              var cueTime = beatIndex * timedInterval;
+              var cueId = beatIndex === beatCount - 1 ? "beat-tick-final" : "beat-tick";
+              tl.addLabel(labelName, cueTime);
+              tl.to(
+                rows[beatIndex],
+                { opacity: 1, y: "0cqh", scale: 1, duration: ROW_IN, ease: "power2.out" },
+                labelName,
+              );
+              // SFX CUE (IN, beat N): one scene-mixed cue at this beat label.
+              tl.call(fireSfx, [cueId, cueTime], labelName);
+            }
+
+            // HOLD is deliberately still. OUT accelerates every landed row away
+            // together, asymmetrically paired with the power2.out entrances.
+            tl.to(rows, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add beat-timeline" />
+
+That writes one file: `compositions/components/beat-timeline.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/beat-timeline.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `orchestration` `transitions` `sequencing` `bridge` `timeline`.
+
+## 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/components/before-after-wipe.mdx b/docs/catalog/components/before-after-wipe.mdx
new file mode 100644
index 0000000000..a6d9b92874
--- /dev/null
+++ b/docs/catalog/components/before-after-wipe.mdx
@@ -0,0 +1,520 @@
+---
+title: "Before After Wipe"
+description: "Two full-bleed content slots compare before and after states as a persistent divider wipes the after layer over the before layer and rests at a configurable split. Callers fill the named before/after slot panels; token-styled defaults render when a slot is left empty."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/before-after-wipe.html"
+  compositionId="before-after-wipe"
+  compositionSrc="compositions/components/before-after-wipe.html"
+  variables={[{"id":"label_a","type":"string","role":"content","label":"Before label","description":"Chip shown on the base before panel. Blank hides the chip.","default":"Before"},{"id":"label_b","type":"string","role":"content","label":"After label","description":"Chip shown on the revealed after panel. Blank hides the chip.","default":"After"},{"id":"rest_split","type":"number","role":"layout","label":"Resting split","description":"Divider resting position after the wipe lands.","default":50,"min":0,"max":100,"step":1,"unit":"%"},{"id":"wipe_at","type":"number","role":"timing","label":"Wipe start","description":"Seconds after mount start when the wipe begins.","default":0.25,"min":0,"max":8,"step":0.05,"unit":"s"},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Divider handle and after chip color.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Outgoing transition. None holds the final comparison frame.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
+>
+
+```html before-after-wipe.html
+<!doctype html>
+<!--
+  before-after-wipe: HyperFrames video primitive (ui-props / holdable / compare)
+
+  Concept: two full-bleed CONTENT SLOTS share one frame. The before slot stays
+  fully visible as the base layer while the after slot wipes over it from the
+  left edge, and a persistent divider rests at rest_split percent. Callers fill
+  the two named slot panels with their own content (screenshots, video, HTML);
+  when a slot is left untouched, a tasteful token-styled default renders
+  instead. One mechanic, one job: compare two visual states.
+
+  Ports the divider-wipe mechanic from comparison-split, with real content
+  slots instead of baked demo art (Wave J, U-B).
+
+  Slots (see README.md for a worked example):
+    - [data-slot="before"]: base layer content. Replace the children of this
+      element in your installed copy. Default: a muted token wireframe.
+    - [data-slot="after"]:  revealed layer content. Same mechanism. Default:
+      a brand-tinted version of the wireframe.
+    Direct img/video children of a slot are sized to cover the panel.
+
+  Variables (declared in data-composition-variables below):
+    - label_a (string, default "Before"): chip on the base panel. Empty hides it.
+    - label_b (string, default "After"): chip on the revealed panel. Empty hides it.
+    - rest_split (number, default 50, 0 to 100%): divider resting position.
+    - wipe_at (number, seconds, default 0.25): when the wipe starts, relative
+      to mount start. Clamped so the wipe always completes inside IN.
+    - accent (green | blue | violet, default green): divider handle and after
+      chip color. green maps to --brand, blue to --accent, violet to --accent-2.
+    - exit (none | fade | up, default none): outgoing transition. none holds
+      the final frame (frame roots own transitions; holds end films).
+
+  The divider (and its knob) stays hidden until the wipe starts, then fades in
+  as it departs the left edge: at split 0 the knob would straddle the frame
+  edge half-clipped, which reads as a rendering bug rather than a resting
+  state. One wipe pass, then the divider rests at rest_split for the whole
+  hold.
+
+  Envelope (fixed IN/OUT, elastic HOLD only, never gsap.timeScale()):
+    IN       = wipe_at + 1.05s wipe travel (stage settles during the first 0.32s)
+    HOLD     = elastic = max(0, D - (IN + OUT)); deliberately still so the
+               comparison stays easy to inspect
+    OUT      = 0.50s when exit is fade or up, 0 when exit is none
+    If D < IN + OUT, IN and OUT scale down together so IN + OUT == D.
+
+  Sync point: wipe-land at wipe_at + 1.05s inside IN (1.30s at defaults). It
+  never moves into elastic HOLD.
+
+  Sound cue: dispatches a bubbling `hf:sfx` CustomEvent with id
+  "wipe-land-soft" at wipe-land. This primitive never plays audio.
+
+  Mount contract: MOUNTABLE SUB-COMPOSITION. The runtime clones only
+  <template> contents; #root fills the host box (inset:0, container-type:
+  size), has no data-width/data-height, and registers one paused timeline
+  under the literal "before-after-wipe" key (mount flattening strips
+  data-composition-id from the live root). Variables come from
+  window.__hyperframes.getVariables().
+-->
+<html
+  lang="en"
+  data-composition-id="before-after-wipe"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "label_a", "type": "string", "role": "content", "label": "Before label", "description": "Chip shown on the base before panel. Blank hides the chip.", "default": "Before" },
+    { "id": "label_b", "type": "string", "role": "content", "label": "After label", "description": "Chip shown on the revealed after panel. Blank hides the chip.", "default": "After" },
+    { "id": "rest_split", "type": "number", "role": "layout", "label": "Resting split", "description": "Divider resting position after the wipe lands.", "default": 50, "min": 0, "max": 100, "step": 1, "unit": "%" },
+    { "id": "wipe_at", "type": "number", "role": "timing", "label": "Wipe start", "description": "Seconds after mount start when the wipe begins.", "default": 0.25, "min": 0, "max": 8, "step": 0.05, "unit": "s" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Divider handle and after chip color.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Outgoing transition. None holds the final comparison frame.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Before After Wipe</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="before-after-wipe" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          /* Root fills the host-owned box. Internal measurements use cqw/cqh
+             and every painted color comes from a contract token. */
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            background: var(--bg, #07111f);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+          }
+
+          .baw-clip,
+          .baw-stage,
+          .baw-panel,
+          .baw-slot {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+          }
+
+          .baw-clip {
+            overflow: hidden;
+          }
+
+          .baw-stage {
+            --baw-split: 0;
+            opacity: 0;
+          }
+
+          .baw-panel {
+            overflow: hidden;
+          }
+
+          /* The after layer wipes over the base via one clip-path driven by
+             --baw-split, the single owner of wipe progress. */
+          .baw-after {
+            z-index: 2;
+            clip-path: inset(0 calc((100 - var(--baw-split)) * 1%) 0 0);
+          }
+
+          /* Caller-supplied media covers its panel edge to edge. */
+          .baw-slot > img,
+          .baw-slot > video {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+          }
+
+          /* Token-styled default slot content: a wireframe card that reads
+             muted on the before layer and brand-tinted on the after layer.
+             Callers replacing slot children never see any of this. */
+          .baw-default {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+          }
+
+          .baw-before .baw-default {
+            background:
+              linear-gradient(
+                  color-mix(in srgb, var(--border, #334155) 34%, transparent) 0.12cqw,
+                  transparent 0.12cqw
+                )
+                0 0 / 5cqw 5cqw,
+              linear-gradient(
+                  90deg,
+                  color-mix(in srgb, var(--border, #334155) 34%, transparent) 0.12cqw,
+                  transparent 0.12cqw
+                )
+                0 0 / 5cqw 5cqw,
+              var(--surface, #172033);
+          }
+
+          .baw-after .baw-default {
+            background: linear-gradient(
+              135deg,
+              color-mix(in srgb, var(--brand, #22c55e) 32%, var(--surface, #172033)) 0%,
+              var(--surface, #172033) 58%,
+              color-mix(in srgb, var(--baw-accent, #22c55e) 22%, var(--surface, #172033)) 100%
+            );
+          }
+
+          .baw-card {
+            width: 56cqw;
+            height: 56cqh;
+            padding: var(--space-3, 4cqh) var(--space-3, 4cqw);
+            border: 0.16cqw solid var(--border, #334155);
+            border-radius: var(--radius, 2.4cqmin);
+            background: color-mix(in srgb, var(--surface, #172033) 88%, var(--bg, #07111f));
+            box-shadow: 0 2cqh 5cqw color-mix(in srgb, var(--bg, #07111f) 45%, transparent);
+          }
+
+          .baw-after .baw-card {
+            border-color: color-mix(
+              in srgb,
+              var(--baw-accent, #22c55e) 52%,
+              var(--border, #334155)
+            );
+            background: color-mix(in srgb, var(--surface, #172033) 86%, var(--brand, #22c55e));
+          }
+
+          .baw-bar {
+            width: 34%;
+            height: 4.4cqh;
+            margin-bottom: var(--space-3, 4cqh);
+            border-radius: 1.2cqh;
+            background: var(--muted, #94a3b8);
+            opacity: 0.5;
+          }
+
+          .baw-after .baw-bar {
+            background: var(--baw-accent, #22c55e);
+            opacity: 0.92;
+          }
+
+          .baw-line {
+            height: 2.4cqh;
+            margin-bottom: var(--space-2, 2.6cqh);
+            border-radius: 1.2cqh;
+            background: var(--muted, #94a3b8);
+            opacity: 0.4;
+          }
+
+          .baw-line:nth-of-type(2) {
+            width: 92%;
+          }
+
+          .baw-line:nth-of-type(3) {
+            width: 68%;
+          }
+
+          .baw-line:nth-of-type(4) {
+            width: 44%;
+          }
+
+          .baw-after .baw-line {
+            background: color-mix(in srgb, var(--brand, #22c55e) 70%, var(--fg, #f8fafc));
+            opacity: 0.75;
+          }
+
+          /* Label chips live outside the slots so they always render above
+             caller content. The after chip is clipped with its own panel, so
+             it appears only once the wipe has passed it. */
+          .baw-chip {
+            position: absolute;
+            z-index: 4;
+            top: var(--space-3, 4cqh);
+            padding: var(--space-1, 1.2cqh) var(--space-2, 2.2cqw);
+            border: 0.14cqw solid var(--border, #334155);
+            border-radius: 999cqw;
+            background: color-mix(in srgb, var(--surface, #172033) 88%, var(--bg, #07111f));
+            color: var(--muted, #94a3b8);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: min(3cqw, 4.2cqh);
+            font-weight: 600;
+            letter-spacing: 0.08em;
+            line-height: 1;
+            text-transform: uppercase;
+            white-space: nowrap;
+          }
+
+          .baw-chip:empty {
+            display: none;
+          }
+
+          .baw-before .baw-chip {
+            right: var(--space-3, 4cqw);
+          }
+
+          .baw-after .baw-chip {
+            left: var(--space-3, 4cqw);
+            border-color: color-mix(
+              in srgb,
+              var(--baw-accent, #22c55e) 62%,
+              var(--border, #334155)
+            );
+            color: var(--fg, #f8fafc);
+          }
+
+          .baw-divider {
+            position: absolute;
+            z-index: 5;
+            top: 0;
+            bottom: 0;
+            left: calc(var(--baw-split) * 1%);
+            width: 0.4cqw;
+            transform: translateX(-50%);
+            background: var(--fg, #f8fafc);
+            pointer-events: none;
+          }
+
+          .baw-divider::after {
+            content: "";
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            width: min(5cqw, 7cqh);
+            aspect-ratio: 1;
+            transform: translate(-50%, -50%);
+            border: 0.3cqw solid var(--baw-accent, #22c55e);
+            border-radius: 50%;
+            background: var(--fg, #f8fafc);
+          }
+        </style>
+
+        <div
+          id="before-after-wipe-clip"
+          class="baw-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="baw-stage">
+            <section class="baw-panel baw-before" aria-label="Before panel">
+              <div class="baw-slot" data-slot="before">
+                <!-- SLOT "before": replace the children of this element with
+                     your own content (img, video, or HTML). -->
+                <div class="baw-default" aria-hidden="true">
+                  <div class="baw-card">
+                    <div class="baw-bar"></div>
+                    <div class="baw-line"></div>
+                    <div class="baw-line"></div>
+                    <div class="baw-line"></div>
+                  </div>
+                </div>
+              </div>
+              <div class="baw-chip baw-chip-a"></div>
+            </section>
+
+            <section class="baw-panel baw-after" aria-label="After panel">
+              <div class="baw-slot" data-slot="after">
+                <!-- SLOT "after": replace the children of this element with
+                     your own content (img, video, or HTML). -->
+                <div class="baw-default" aria-hidden="true">
+                  <div class="baw-card">
+                    <div class="baw-bar"></div>
+                    <div class="baw-line"></div>
+                    <div class="baw-line"></div>
+                    <div class="baw-line"></div>
+                  </div>
+                </div>
+              </div>
+              <div class="baw-chip baw-chip-b"></div>
+            </section>
+
+            <div class="baw-divider" aria-hidden="true"></div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            // Literal id: mount flattening strips data-composition-id from the
+            // live root before this timeline registers.
+            var compositionId = "before-after-wipe";
+            var stage = root.querySelector(".baw-stage");
+            var divider = root.querySelector(".baw-divider");
+            var chipA = root.querySelector(".baw-chip-a");
+            var chipB = root.querySelector(".baw-chip-b");
+
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var labelA = vars.label_a == null ? "Before" : String(vars.label_a);
+            var labelB = vars.label_b == null ? "After" : String(vars.label_b);
+            var rawSplit = vars.rest_split == null ? 50 : Number(vars.rest_split);
+            // INVARIANT: rest_split always clamps into the declared 0-100 range.
+            var restSplit = Number.isFinite(rawSplit) ? Math.max(0, Math.min(100, rawSplit)) : 50;
+            var rawWipeAt = vars.wipe_at == null ? 0.25 : Number(vars.wipe_at);
+            var wipeAt = Number.isFinite(rawWipeAt) ? Math.max(0, Math.min(8, rawWipeAt)) : 0.25;
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #22c55e)",
+              blue: "var(--accent, #38bdf8)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            // The bundler mirrors composition variables as scoped CSS custom
+            // props, so this unit's own accent variable shadows the contract
+            // --accent token inside the subtree ("blue" is a valid CSS color
+            // and would render pure blue). When the shadow is present, fall
+            // back to the literal contract value instead of var(--accent).
+            var computedAccent = getComputedStyle(root).getPropertyValue("--accent").trim();
+            if (
+              computedAccent === "green" ||
+              computedAccent === "blue" ||
+              computedAccent === "violet"
+            ) {
+              accentColors.blue = "#38bdf8";
+            }
+            // INVARIANT: only none | fade | up reaches the timeline.
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            chipA.textContent = labelA;
+            chipB.textContent = labelB;
+            root.style.setProperty("--baw-accent", accentColors[accent]);
+
+            // RETIME RANGE: fixed IN and OUT scale together only when D is too
+            // short. HOLD is the sole elastic phase. Never use timeScale().
+            var STAGE_IN_BASE = 0.32;
+            var WIPE_DURATION_BASE = 1.05;
+            var IN_BASE = wipeAt + WIPE_DURATION_BASE;
+            var OUT_BASE = exit === "none" ? 0 : 0.5;
+
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var totalBase = IN_BASE + OUT_BASE;
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var STAGE_IN = Math.min(STAGE_IN_BASE * scale, IN);
+            var WIPE_AT = wipeAt * scale;
+            var WIPE_DURATION = WIPE_DURATION_BASE * scale;
+            var WIPE_END = IN;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var OUT_START = IN + HOLD;
+
+            function fireSfx(id, t) {
+              root.dispatchEvent(
+                new CustomEvent("hf:sfx", { detail: { id: id, t: t }, bubbles: true }),
+              );
+            }
+
+            // Explicit both-endpoints state makes tl.seek(0) deterministic.
+            // --baw-split is the only owner of both clip and divider progress.
+            // The divider starts hidden: at split 0 its knob would render
+            // half-clipped at the frame edge for the whole lead-in.
+            gsap.set(stage, { opacity: 0, y: 0, "--baw-split": 0 });
+            gsap.set(divider, { autoAlpha: 0 });
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: stage settle, then ONE wipe pass travels to rest_split and
+            // stays there. The divider fades in as it departs the left edge.
+            tl.to(stage, { opacity: 1, duration: STAGE_IN, ease: "power2.out" }, 0);
+            tl.to(
+              stage,
+              { "--baw-split": restSplit, duration: WIPE_DURATION, ease: "sine.inOut" },
+              WIPE_AT,
+            );
+            tl.fromTo(
+              divider,
+              { autoAlpha: 0 },
+              {
+                autoAlpha: 1,
+                duration: Math.min(0.22 * scale, WIPE_DURATION),
+                ease: "power1.out",
+                immediateRender: false,
+              },
+              WIPE_AT,
+            );
+            tl.call(
+              function () {
+                fireSfx("wipe-land-soft", WIPE_END);
+              },
+              [],
+              WIPE_END,
+            );
+
+            // HOLD: deliberately steady at the resting split.
+
+            // OUT: only when the exit variable asks for one; exit none holds
+            // the final comparison frame (frame roots own transitions).
+            if (exit !== "none") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+              if (exit === "up") {
+                tl.to(stage, { y: "-6cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              }
+            }
+
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add before-after-wipe" />
+
+That writes one file: `compositions/components/before-after-wipe.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/before-after-wipe.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `prop` `ui-props` `compare` `holdable` `before-after` `wipe` `slots`.
+
+## 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/components/blur-in.mdx b/docs/catalog/components/blur-in.mdx
new file mode 100644
index 0000000000..b702077f71
--- /dev/null
+++ b/docs/catalog/components/blur-in.mdx
@@ -0,0 +1,282 @@
+---
+title: "Blur In"
+description: "An Operator Black word-level content reveal that resolves its own text from controlled blur"
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/blur-in.html"
+  compositionId="blur-in"
+  compositionSrc="compositions/components/blur-in.html"
+  variables={[{"id":"size","type":"number","role":"style","label":"Size","description":"Type size of the revealed words in pixels; the gap between words scales with it.","default":52,"min":24,"max":120,"step":2,"unit":"px"},{"id":"tone","type":"enum","role":"style","label":"Tone","description":"Word colour: strong for headlines, muted for supporting lines, accent for the brand green.","default":"strong","options":[{"value":"strong","label":"Strong"},{"value":"muted","label":"Muted"},{"value":"accent","label":"Accent"}]},{"id":"align","type":"enum","role":"style","label":"Align","description":"Horizontal alignment of the words in the frame.","default":"left","options":[{"value":"left","label":"Left"},{"value":"center","label":"Center"},{"value":"right","label":"Right"}]}]}
+>
+
+```html blur-in.html
+<!--
+  Blur In - Operator Black content-focus reveal primitive.
+
+  Paste the markup, CSS and script into a composition. Use the timeline
+  integration note at the bottom as the starting point for deterministic GSAP
+  animation.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result as a custom property
+  the CSS below consumes. The timeline recipe at the bottom is untouched by
+  them: it keeps resolving the same words out of the same blur.
+
+    - size (24 to 120, default 52, in px): the type size of the words. The gap
+      between words is set in em, so it scales with this.
+    - tone (strong | muted | accent, default strong): word colour. strong is
+      the headline text token, muted the supporting one, accent the theme
+      green, so all three track light and dark frames.
+    - align (left | center | right, default left): where the words sit across
+      the frame.
+
+  On every default the result is identical to the original: 52px strong words,
+  left aligned.
+-->
+
+<div
+  data-hf-ui-root
+  class="hf-ui-blur-in"
+  aria-label="Design systems for video"
+  data-composition-variables='[
+    { "id": "size", "type": "number", "role": "style", "label": "Size", "description": "Type size of the revealed words in pixels; the gap between words scales with it.", "default": 52, "min": 24, "max": 120, "step": 2, "unit": "px" },
+    { "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Word colour: strong for headlines, muted for supporting lines, accent for the brand green.", "default": "strong", "options": [{ "value": "strong", "label": "Strong" }, { "value": "muted", "label": "Muted" }, { "value": "accent", "label": "Accent" }] },
+    { "id": "align", "type": "enum", "role": "style", "label": "Align", "description": "Horizontal alignment of the words in the frame.", "default": "left", "options": [{ "value": "left", "label": "Left" }, { "value": "center", "label": "Center" }, { "value": "right", "label": "Right" }] }
+  ]'
+>
+  <span>Design</span>
+  <span>systems</span>
+  <span>for</span>
+  <span>video</span>
+</div>
+
+<style>
+  /* hf-ui:tokens:start */
+  /* prettier-ignore */
+  [data-hf-ui-root] {
+    --_hf-ui-accent: var(--hf-ui-accent, #3ce6ac);
+    --_hf-ui-action: var(--hf-ui-action, #eeeeee);
+    --_hf-ui-action-contrast: var(--hf-ui-action-contrast, #111111);
+    --_hf-ui-border: var(--hf-ui-border, #2a2a2a);
+    --_hf-ui-border-strong: var(--hf-ui-border-strong, #383838);
+    --_hf-ui-canvas: var(--hf-ui-canvas, #0a0a0a);
+    --_hf-ui-control-border: var(--hf-ui-control-border, #686868);
+    --_hf-ui-control-border-hover: var(--hf-ui-control-border-hover, #777777);
+    --_hf-ui-control-height: var(--hf-ui-control-height, 40px);
+    --_hf-ui-danger: var(--hf-ui-danger, #ff7878);
+    --_hf-ui-data-1: var(--hf-ui-data-1, #3ce6ac);
+    --_hf-ui-data-2: var(--hf-ui-data-2, #63a5ff);
+    --_hf-ui-data-3: var(--hf-ui-data-3, #e9ab55);
+    --_hf-ui-data-4: var(--hf-ui-data-4, #a78bfa);
+    --_hf-ui-data-5: var(--hf-ui-data-5, #ff8a75);
+    --_hf-ui-duration-drawer-enter: var(--hf-ui-duration-drawer-enter, 360ms);
+    --_hf-ui-duration-drawer-exit: var(--hf-ui-duration-drawer-exit, 240ms);
+    --_hf-ui-duration-modal-enter: var(--hf-ui-duration-modal-enter, 280ms);
+    --_hf-ui-duration-modal-exit: var(--hf-ui-duration-modal-exit, 180ms);
+    --_hf-ui-duration-overlay-enter: var(--hf-ui-duration-overlay-enter, 210ms);
+    --_hf-ui-duration-overlay-exit: var(--hf-ui-duration-overlay-exit, 140ms);
+    --_hf-ui-duration-press: var(--hf-ui-duration-press, 120ms);
+    --_hf-ui-duration-state: var(--hf-ui-duration-state, 160ms);
+    --_hf-ui-ease-enter: var(--hf-ui-ease-enter, cubic-bezier(0.32, 0.72, 0, 1));
+    --_hf-ui-ease-exit: var(--hf-ui-ease-exit, cubic-bezier(0.23, 1, 0.32, 1));
+    --_hf-ui-ease-response: var(--hf-ui-ease-response, cubic-bezier(0.23, 1, 0.32, 1));
+    --_hf-ui-font-mono: var(--hf-ui-font-mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
+    --_hf-ui-font-sans: var(--hf-ui-font-sans, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
+    --_hf-ui-hit-target: var(--hf-ui-hit-target, 44px);
+    --_hf-ui-radius-control: var(--hf-ui-radius-control, 5px);
+    --_hf-ui-radius-overlay: var(--hf-ui-radius-overlay, 10px);
+    --_hf-ui-radius-surface: var(--hf-ui-radius-surface, 7px);
+    --_hf-ui-shadow-contact: var(--hf-ui-shadow-contact, 0 8px 18px rgba(0, 0, 0, 0.38));
+    --_hf-ui-shadow-inset: var(--hf-ui-shadow-inset, inset 0 1px 0 rgba(255, 255, 255, 0.035));
+    --_hf-ui-shadow-modal: var(--hf-ui-shadow-modal, 0 18px 46px rgba(0, 0, 0, 0.52));
+    --_hf-ui-space-1: var(--hf-ui-space-1, 4px);
+    --_hf-ui-space-12: var(--hf-ui-space-12, 48px);
+    --_hf-ui-space-16: var(--hf-ui-space-16, 64px);
+    --_hf-ui-space-2: var(--hf-ui-space-2, 8px);
+    --_hf-ui-space-3: var(--hf-ui-space-3, 12px);
+    --_hf-ui-space-4: var(--hf-ui-space-4, 16px);
+    --_hf-ui-space-6: var(--hf-ui-space-6, 24px);
+    --_hf-ui-space-8: var(--hf-ui-space-8, 32px);
+    --_hf-ui-surface: var(--hf-ui-surface, #141414);
+    --_hf-ui-surface-inset: var(--hf-ui-surface-inset, #101010);
+    --_hf-ui-surface-raised: var(--hf-ui-surface-raised, #1a1a1a);
+    --_hf-ui-text: var(--hf-ui-text, #e5e5e5);
+    --_hf-ui-text-faint: var(--hf-ui-text-faint, #7e7e7e);
+    --_hf-ui-text-muted: var(--hf-ui-text-muted, #929292);
+    --_hf-ui-text-strong: var(--hf-ui-text-strong, #f3f3f3);
+    --_hf-ui-warning: var(--hf-ui-warning, #e9ab55);
+    --_hf-ui-weight-medium: var(--hf-ui-weight-medium, 500);
+    --_hf-ui-weight-regular: var(--hf-ui-weight-regular, 400);
+    --_hf-ui-weight-semibold: var(--hf-ui-weight-semibold, 600);
+    box-sizing: border-box;
+    color-scheme: dark;
+    font-family: var(--_hf-ui-font-sans);
+  }
+  /* prettier-ignore */
+  [data-hf-ui-root] *,
+  [data-hf-ui-root] *::before,
+  [data-hf-ui-root] *::after {
+    box-sizing: border-box;
+  }
+  /* prettier-ignore */
+  [data-hf-theme="light"] [data-hf-ui-root],
+  [data-hf-ui-root][data-hf-theme="light"] {
+    --_hf-ui-accent: var(--hf-ui-accent, #087a57);
+    --_hf-ui-action: var(--hf-ui-action, #171717);
+    --_hf-ui-action-contrast: var(--hf-ui-action-contrast, #ffffff);
+    --_hf-ui-border: var(--hf-ui-border, #e0dfdb);
+    --_hf-ui-border-strong: var(--hf-ui-border-strong, #cbc9c3);
+    --_hf-ui-canvas: var(--hf-ui-canvas, #f6f5f1);
+    --_hf-ui-control-border: var(--hf-ui-control-border, #888888);
+    --_hf-ui-control-border-hover: var(--hf-ui-control-border-hover, #6f6e68);
+    --_hf-ui-danger: var(--hf-ui-danger, #a61b1b);
+    --_hf-ui-data-1: var(--hf-ui-data-1, #087a57);
+    --_hf-ui-data-2: var(--hf-ui-data-2, #245ea8);
+    --_hf-ui-data-3: var(--hf-ui-data-3, #8a4b00);
+    --_hf-ui-data-4: var(--hf-ui-data-4, #6d3fc0);
+    --_hf-ui-data-5: var(--hf-ui-data-5, #a83d2d);
+    --_hf-ui-shadow-contact: var(--hf-ui-shadow-contact, 0 7px 16px rgba(26, 24, 20, 0.13));
+    --_hf-ui-shadow-inset: var(--hf-ui-shadow-inset, inset 0 1px 0 rgba(255, 255, 255, 0.78));
+    --_hf-ui-shadow-modal: var(--hf-ui-shadow-modal, 0 18px 46px rgba(26, 24, 20, 0.18));
+    --_hf-ui-surface: var(--hf-ui-surface, #ffffff);
+    --_hf-ui-surface-inset: var(--hf-ui-surface-inset, #f0efeb);
+    --_hf-ui-surface-raised: var(--hf-ui-surface-raised, #ffffff);
+    --_hf-ui-text: var(--hf-ui-text, #171717);
+    --_hf-ui-text-faint: var(--hf-ui-text-faint, #6f6e68);
+    --_hf-ui-text-muted: var(--hf-ui-text-muted, #5f5f5a);
+    --_hf-ui-text-strong: var(--hf-ui-text-strong, #0a0a0a);
+    --_hf-ui-warning: var(--hf-ui-warning, #8a4b00);
+    color-scheme: light;
+  }
+  /* prettier-ignore */
+  [data-hf-ui-root]:focus-visible {
+    outline: 2px solid var(--_hf-ui-accent);
+    outline-offset: 3px;
+  }
+  /* prettier-ignore */
+  [data-hf-rendering="true"][data-hf-ui-root],
+  [data-hf-rendering="true"] [data-hf-ui-root],
+  [data-hf-rendering="true"][data-hf-ui-root] *,
+  [data-hf-rendering="true"] [data-hf-ui-root] *,
+  [data-hf-rendering="true"][data-hf-ui-root]::before,
+  [data-hf-rendering="true"][data-hf-ui-root]::after,
+  [data-hf-rendering="true"] [data-hf-ui-root]::before,
+  [data-hf-rendering="true"] [data-hf-ui-root]::after,
+  [data-hf-rendering="true"][data-hf-ui-root] *::before,
+  [data-hf-rendering="true"][data-hf-ui-root] *::after,
+  [data-hf-rendering="true"] [data-hf-ui-root] *::before,
+  [data-hf-rendering="true"] [data-hf-ui-root] *::after {
+    animation-duration: 0s !important;
+    animation-delay: 0s !important;
+    transition-duration: 0s !important;
+    transition-delay: 0s !important;
+  }
+  /* prettier-ignore */
+  @media (prefers-reduced-motion: reduce) {
+    [data-hf-ui-root],
+    [data-hf-ui-root] *,
+    [data-hf-ui-root] *::before,
+    [data-hf-ui-root] *::after {
+      animation-duration: 0s !important;
+      animation-delay: 0s !important;
+      transition-duration: 0s !important;
+      transition-delay: 0s !important;
+      scroll-behavior: auto !important;
+    }
+  }
+  /* hf-ui:tokens:end */
+  .hf-ui-blur-in {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: var(--hf-blur-in-align, flex-start);
+    gap: 0.28em;
+    color: var(--hf-blur-in-color, var(--_hf-ui-text-strong));
+    font: var(--_hf-ui-weight-semibold) 52px/1 var(--_hf-ui-font-sans);
+    font-size: var(--hf-blur-in-size, 52px);
+    letter-spacing: -0.02em;
+  }
+  .hf-ui-blur-in span {
+    display: inline-block;
+    filter: blur(0px);
+    opacity: 1;
+    will-change: opacity, transform, filter;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    function clampNumber(value, min, max, fallback) {
+      var n = typeof value === "number" ? value : parseFloat(value);
+      if (!isFinite(n)) {
+        return fallback;
+      }
+      return Math.min(max, Math.max(min, n));
+    }
+
+    var tones = {
+      strong: "var(--_hf-ui-text-strong)",
+      muted: "var(--_hf-ui-text-muted)",
+      accent: "var(--_hf-ui-accent)",
+    };
+    var aligns = { left: "flex-start", center: "center", right: "flex-end" };
+
+    var size = clampNumber(vars.size, 24, 120, 52);
+    var tone = tones[pick(tones, vars.tone, "strong")];
+    var align = aligns[pick(aligns, vars.align, "left")];
+
+    var roots = document.querySelectorAll(".hf-ui-blur-in");
+    for (var i = 0; i < roots.length; i += 1) {
+      roots[i].style.setProperty("--hf-blur-in-size", size + "px");
+      roots[i].style.setProperty("--hf-blur-in-color", tone);
+      roots[i].style.setProperty("--hf-blur-in-align", align);
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-ui-blur-in span', { opacity: 0, y: 8, filter: 'blur(10px)' }, { opacity: 1, y: 0, filter: 'blur(0px)', duration: 0.36, stagger: 0.04, ease: 'power3.out' }, startTime);
+-->
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add blur-in" />
+
+That writes one file: `compositions/components/blur-in.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/blur-in.html` and copy what is inside into your own composition.
+The file opens with a comment header that walks you through it.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `video-primitive` `remocn-port` `blur-in` `text-effect`.
+
+## 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/components/blur-out-up.mdx b/docs/catalog/components/blur-out-up.mdx
new file mode 100644
index 0000000000..49e0d6e6f4
--- /dev/null
+++ b/docs/catalog/components/blur-out-up.mdx
@@ -0,0 +1,149 @@
+---
+title: "Blur Out Up"
+description: "Words arrive clean and depart upward with increasing blur for airy exits."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/blur-out-up.html"
+  compositionId="blur-out-up"
+  compositionSrc="compositions/components/blur-out-up.html"
+  variables={[{"id":"direction","type":"enum","role":"motion","label":"Direction","description":"Where the offset the timeline drives points.","default":"up","options":[{"value":"up","label":"Up"},{"value":"down","label":"Down"},{"value":"left","label":"Left"},{"value":"right","label":"Right"}]},{"id":"distance","type":"enum","role":"motion","label":"Distance","description":"Scales the travel offset, so the words cover a shorter or longer run in the same time.","default":"standard","options":[{"value":"close","label":"Close"},{"value":"standard","label":"Standard"},{"value":"far","label":"Far"}]},{"id":"blur","type":"enum","role":"style","label":"Blur","description":"Scales the blur radius the timeline drives, from a light haze to a full smear.","default":"standard","options":[{"value":"soft","label":"Soft"},{"value":"standard","label":"Standard"},{"value":"heavy","label":"Heavy"}]},{"id":"tone","type":"enum","role":"style","label":"Tone","description":"Word colour: ink for light frames, paper for dark ones, accent rides --brand.","default":"ink","options":[{"value":"ink","label":"Ink"},{"value":"paper","label":"Paper"},{"value":"accent","label":"Accent"}]}]}
+>
+
+```html blur-out-up.html
+<!--
+  Blur Out Up - remocn typography primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Drive the timeline
+  integration from a paused GSAP timeline so renders remain deterministic.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result as a custom property
+  the CSS above consumes. The timeline recipe below is untouched by them: it
+  keeps driving one offset and one blur, and these decide what that offset and
+  that blur mean on screen.
+
+    - direction (up | down | left | right, default up): where the offset
+      points. up rises into place, down drops in, left and right slide in
+      along the baseline.
+    - distance (close | standard | far, default standard): scales the offset.
+      close covers half the run, far nearly double, in the same time.
+    - blur (soft | standard | heavy, default standard): scales the blur radius,
+      from a light haze to a full smear.
+    - tone (ink | paper | accent, default ink): word colour. ink is near-black
+      for light frames, paper near-white for dark ones, accent rides --brand.
+
+  On every default the result is identical to the original: words rise 22px
+  through a 5px blur in near-black.
+-->
+
+<div
+  class="hf-remocn-blur-out-up"
+  data-composition-variables='[
+    { "id": "direction", "type": "enum", "role": "motion", "label": "Direction", "description": "Where the offset the timeline drives points.", "default": "up", "options": [{ "value": "up", "label": "Up" }, { "value": "down", "label": "Down" }, { "value": "left", "label": "Left" }, { "value": "right", "label": "Right" }] },
+    { "id": "distance", "type": "enum", "role": "motion", "label": "Distance", "description": "Scales the travel offset, so the words cover a shorter or longer run in the same time.", "default": "standard", "options": [{ "value": "close", "label": "Close" }, { "value": "standard", "label": "Standard" }, { "value": "far", "label": "Far" }] },
+    { "id": "blur", "type": "enum", "role": "style", "label": "Blur", "description": "Scales the blur radius the timeline drives, from a light haze to a full smear.", "default": "standard", "options": [{ "value": "soft", "label": "Soft" }, { "value": "standard", "label": "Standard" }, { "value": "heavy", "label": "Heavy" }] },
+    { "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Word colour: ink for light frames, paper for dark ones, accent rides --brand.", "default": "ink", "options": [{ "value": "ink", "label": "Ink" }, { "value": "paper", "label": "Paper" }, { "value": "accent", "label": "Accent" }] }
+  ]'
+>
+  <span>HELLO</span>
+</div>
+
+<style>
+  .hf-remocn-blur-out-up {
+    color: var(--hf-word-color, #18181b);
+    font-family: Inter, system-ui, sans-serif;
+    font-weight: 900;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-blur-out-up {
+    display: inline-flex;
+    gap: 12px;
+    font-size: 56px;
+    line-height: 1;
+  }
+  .hf-remocn-blur-out-up span {
+    display: inline-block;
+    transform: translate(
+        calc(var(--hf-word-x, 0px) + var(--hf-word-y, 0px) * var(--hf-word-axis-x, 0)),
+        calc(var(--hf-word-y, 0px) * var(--hf-word-axis-y, 1))
+      )
+      scale(var(--hf-word-scale, 1));
+    filter: blur(calc(var(--hf-word-blur, 0px) * var(--hf-word-blur-scale, 1)));
+    will-change: transform, filter, opacity;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    var axes = {
+      up: { x: 0, y: 1 },
+      down: { x: 0, y: -1 },
+      left: { x: -1, y: 0 },
+      right: { x: 1, y: 0 },
+    };
+    var reaches = { close: 0.5, standard: 1, far: 1.85 };
+    var blurScales = { soft: 0.45, standard: 1, heavy: 2.2 };
+    var tones = {
+      ink: "#18181b",
+      paper: "#fafafa",
+      accent: "var(--brand, #34d399)",
+    };
+
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var axis = axes[pick(axes, vars.direction, "up")];
+    var reach = reaches[pick(reaches, vars.distance, "standard")];
+    var blurScale = blurScales[pick(blurScales, vars.blur, "standard")];
+    var tone = tones[pick(tones, vars.tone, "ink")];
+
+    var roots = document.querySelectorAll(".hf-remocn-blur-out-up");
+    for (var i = 0; i < roots.length; i += 1) {
+      roots[i].style.setProperty("--hf-word-axis-x", String(axis.x * reach));
+      roots[i].style.setProperty("--hf-word-axis-y", String(axis.y * reach));
+      roots[i].style.setProperty("--hf-word-blur-scale", String(blurScale));
+      roots[i].style.setProperty("--hf-word-color", tone);
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-blur-out-up span', { opacity: 0, '--hf-word-y': '22px', '--hf-word-scale': 0.92, '--hf-word-blur': '5px' }, { opacity: 1, '--hf-word-y': '0px', '--hf-word-scale': 1, '--hf-word-blur': '0px', duration: 0.3, stagger: 0.055, ease: 'power3.out' }, startTime);
+-->
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add blur-out-up" />
+
+That writes one file: `compositions/components/blur-out-up.html`.
+
+## Usage
+
+Open `compositions/components/blur-out-up.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `remocn-port` `typography`.
+
+## 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/components/bottom-up-letters.mdx b/docs/catalog/components/bottom-up-letters.mdx
new file mode 100644
index 0000000000..a9908bd540
--- /dev/null
+++ b/docs/catalog/components/bottom-up-letters.mdx
@@ -0,0 +1,164 @@
+---
+title: "Bottom Up Letters"
+description: "Splits text into letters and reveals each glyph from below with deterministic staggered timing"
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/components/bottom-up-letters.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Bottom Up Letters preview" />
+
+## Install
+
+<InstallCommand command="npx hyperframes add bottom-up-letters" />
+
+That writes one file: `compositions/components/bottom-up-letters.html`.
+
+## Variables
+
+Every one of these has a default, so the piece works untouched. Set the ones you
+want to change on the element:
+
+| Variable | Default | Accepts | What it does |
+| --- | --- | --- | --- |
+| `unit` | `letter` | `letter`, `word` | What each animated span holds. Letter staggers glyph by glyph, word keeps whole words intact. |
+| `direction` | `up` | `up`, `down` | Where each span starts. Up starts below the baseline and rises, down starts above and drops. |
+| `travel` | `standard` | `close`, `standard`, `far` | How far each span starts from its resting position, from 0.45em to 1.5em. |
+
+Set them with `data-variable-values` on the element that mounts it. These are the
+defaults, so this behaves exactly like the preview above until you change one:
+
+```html wrap
+<div
+  data-composition-id="bottom-up-letters"
+  data-composition-src="compositions/components/bottom-up-letters.html"
+  data-variable-values='{"unit":"letter","direction":"up","travel":"standard"}'
+></div>
+```
+
+## Source
+
+<Accordion title={`bottom-up-letters.html`}>
+
+```html
+<!--
+  Bottom Up Letters - deterministic text splitter.
+
+  Add class="hf-bottom-up-letters" to a plain text element. This script wraps
+  each character in a span so your paused GSAP timeline can stagger the reveal.
+
+  Variables. This fragment has no markup of its own, so the declaration rides
+  the <style> element below; the runtime collects every element carrying
+  data-composition-variables, not just the document root. The script reads each
+  value, falls back to the declared default on anything missing or
+  unrecognised, and either changes how the text is split or writes a custom
+  property the CSS consumes. The timeline recipe below is untouched by them: it
+  still tweens opacity and y back to rest, and these decide what a single
+  stagger step covers and where rest is travelled from.
+
+    - unit (letter | word, default letter): what each animated span holds.
+      letter staggers glyph by glyph; word keeps whole words intact, so a long
+      line reads instead of shimmers.
+    - direction (up | down, default up): where the spans start. up starts
+      below the baseline and rises into place, down starts above and drops.
+    - travel (close | standard | far, default standard): how far each span
+      starts from rest, from 0.45em through 0.85em to 1.5em.
+
+  On every default the result is identical to the original: one span per
+  character, each starting 0.85em below the baseline.
+-->
+
+<style
+  data-composition-variables='[
+  { "id": "unit", "type": "enum", "role": "content", "label": "Split unit", "description": "What each animated span holds. Letter staggers glyph by glyph, word keeps whole words intact.", "default": "letter", "options": [{ "value": "letter", "label": "Letter" }, { "value": "word", "label": "Word" }] },
+  { "id": "direction", "type": "enum", "role": "motion", "label": "Direction", "description": "Where each span starts. Up starts below the baseline and rises, down starts above and drops.", "default": "up", "options": [{ "value": "up", "label": "Up" }, { "value": "down", "label": "Down" }] },
+  { "id": "travel", "type": "enum", "role": "motion", "label": "Travel", "description": "How far each span starts from its resting position, from 0.45em to 1.5em.", "default": "standard", "options": [{ "value": "close", "label": "Close" }, { "value": "standard", "label": "Standard" }, { "value": "far", "label": "Far" }] }
+]'
+>
+  .hf-bottom-up-letters {
+    display: inline-block;
+  }
+  .hf-bottom-up-letters-char {
+    display: inline-block;
+    opacity: 0;
+    transform: translate3d(
+      0,
+      calc(var(--hf-letters-travel, 0.85em) * var(--hf-letters-direction, 1)),
+      0
+    );
+    will-change: transform, opacity;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var travels = { close: "0.45em", standard: "0.85em", far: "1.5em" };
+    var directions = { up: "1", down: "-1" };
+    var units = { letter: true, word: true };
+
+    var travel = travels[pick(travels, vars.travel, "standard")];
+    var direction = directions[pick(directions, vars.direction, "up")];
+    var unit = pick(units, vars.unit, "letter");
+
+    document.querySelectorAll(".hf-bottom-up-letters").forEach((el) => {
+      el.style.setProperty("--hf-letters-travel", travel);
+      el.style.setProperty("--hf-letters-direction", direction);
+      if (el.dataset.hfLettersReady === "1") return;
+      const text = el.textContent || "";
+      el.textContent = "";
+      const parts = unit === "word" ? text.split(/(\s+)/) : Array.from(text);
+      for (const part of parts) {
+        if (part === "") continue;
+        if (unit === "word" && /^\s+$/.test(part)) {
+          el.appendChild(document.createTextNode(part));
+          continue;
+        }
+        const span = document.createElement("span");
+        span.className = "hf-bottom-up-letters-char";
+        span.textContent = part === " " ? "\u00a0" : part;
+        el.appendChild(span);
+      }
+      el.dataset.hfLettersReady = "1";
+    });
+  })();
+</script>
+
+<!--
+  Timeline integration:
+
+  tl.to(".hf-bottom-up-letters-char", {
+    opacity: 1,
+    y: 0,
+    duration: 0.48,
+    ease: "back.out(1.7)",
+    stagger: 0.025,
+  }, startTime);
+-->
+```
+
+</Accordion>
+
+## Usage
+
+Open `compositions/components/bottom-up-letters.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `text` `letters` `reveal`.
+
+## 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/components/browser-device-stage.mdx b/docs/catalog/components/browser-device-stage.mdx
new file mode 100644
index 0000000000..2d6ba78555
--- /dev/null
+++ b/docs/catalog/components/browser-device-stage.mdx
@@ -0,0 +1,690 @@
+---
+title: "Browser Device Stage"
+description: "A generic app surface in token-native device chrome (browser, window, or phone). The screen is a slot for caller img/video/HTML with a token-styled skeleton default; one settle entrance, a readable hold, and an optional screen swap."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/browser-device-stage.html"
+  compositionId="browser-device-stage"
+  compositionSrc="compositions/components/browser-device-stage.html"
+  variables={[{"id":"chrome","type":"enum","role":"content","label":"Chrome","description":"Device frame drawn around the screen slot.","default":"browser","options":[{"value":"browser","label":"Browser"},{"value":"window","label":"Window"},{"value":"phone","label":"Phone"}]},{"id":"title","type":"string","role":"content","label":"Title","description":"Address pill text (browser) or title bar text (window).","default":"app.example.com"},{"id":"swap_at","type":"number","role":"content","label":"Swap at","description":"Seconds from mount start to swap to the second screen. 0 disables the swap.","default":0,"min":0,"max":30,"step":0.1,"unit":"s"},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Token the skeleton accent elements ride.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"style","label":"Exit","description":"Optional departure. None holds the final frame.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
+>
+
+```html browser-device-stage.html
+<!doctype html>
+<!--
+  browser-device-stage -- HyperFrames video primitive (product demo / stage)
+
+  A generic app surface presented in token-native device chrome. One settle
+  entrance (rise + soft scale), then a slow readable hold; optionally the
+  screen swaps to a second screen at swap_at via a brief fade through the
+  bare stage (never two screens at partial opacity). The chrome is drawn
+  entirely from contract tokens: no traffic-light reds, no fake product
+  branding, hairline borders and surface mixes only.
+
+  Chrome (enum):
+    - browser: toolbar with three muted dots and a centered address pill
+      showing `title` in mono type.
+    - window: slim title bar with three muted dots and `title` centered in
+      body type.
+    - phone: portrait device, dark notch pill, bezel inset, centered.
+
+  The screen is a SLOT. Callers supply content by placing inert templates
+  anywhere in the HOST page (templates never render, and the runtime wipes
+  the host clip's own children on mount, so the slot lives at document
+  level):
+
+    <template data-slot="browser-device-stage-screen"> ... </template>
+    <template data-slot="browser-device-stage-screen-b"> ... </template>
+
+  Slot content may be an <img>, a muted <video>, or arbitrary HTML; direct
+  img/video children are stretched to cover the screen. When no screen slot
+  exists, the primitive renders a tasteful token-styled skeleton app (header
+  bar, sidebar, content cards; hairline borders, surface tokens, one accent
+  element). With swap_at > 0 and no screen-b slot, the second screen is a
+  rearranged skeleton state so the swap still reads.
+
+  Variables (declared in data-composition-variables below):
+    - chrome ("browser" | "window" | "phone", default "browser")
+    - title (string, default "app.example.com"): address pill / title bar text.
+    - swap_at (number seconds, default 0): swap to the second screen at
+      this offset from mount start; 0 disables. Clamped inside the hold so
+      the swap never fights the entrance or the exit.
+    - accent ("green" | "blue" | "violet", default "green"): green rides
+      --brand, blue rides --accent, violet rides --accent-2.
+    - exit ("none" | "fade" | "up", default "none"): frame roots own
+      transitions; the default holds the final frame to the last pixel.
+
+  Envelope, fixed IN and OUT with elastic HOLD only (never timeScale):
+    IN_BASE  = 0.90s  one settle: rise + soft scale + fade, smooth ease-out
+    HOLD     = max(0, D - IN - OUT); a barely-there vertical drift, then
+               authored stillness
+    OUT_BASE = 0.50s  only when exit != none
+    If D < IN_BASE + OUT_BASE, IN and OUT compress together.
+
+  Mount contract: the runtime clones only this template. #root fills the
+  host box (no data-width/data-height, container-type: size, cqmin units),
+  is styled via #root only, and registers one paused timeline under the
+  LITERAL "browser-device-stage" key. All state is set with explicit
+  endpoints (gsap.set + fromTo) so any seek order lands identical frames.
+-->
+<html
+  lang="en"
+  data-composition-id="browser-device-stage"
+  data-composition-duration="5"
+  data-composition-variables='[
+    { "id": "chrome", "type": "enum", "role": "content", "label": "Chrome", "description": "Device frame drawn around the screen slot.", "default": "browser", "options": [{ "value": "browser", "label": "Browser" }, { "value": "window", "label": "Window" }, { "value": "phone", "label": "Phone" }] },
+    { "id": "title", "type": "string", "role": "content", "label": "Title", "description": "Address pill text (browser) or title bar text (window).", "default": "app.example.com" },
+    { "id": "swap_at", "type": "number", "role": "content", "label": "Swap at", "description": "Seconds from mount start to swap to the second screen. 0 disables the swap.", "default": 0, "min": 0, "max": 30, "step": 0.1, "unit": "s" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Token the skeleton accent elements ride.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "style", "label": "Exit", "description": "Optional departure. None holds the final frame.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Browser Device Stage</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="browser-device-stage" data-duration="5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, ui-sans-serif, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .bds-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .bds-stage {
+            will-change: transform, opacity;
+          }
+
+          .bds-device {
+            display: grid;
+            grid-template-rows: auto minmax(0, 1fr);
+            overflow: hidden;
+            border: 0.16cqmin solid color-mix(in srgb, var(--border, #475569) 85%, transparent);
+            border-radius: calc(var(--radius, 2cqmin) * 1.3);
+            background: color-mix(in srgb, var(--surface, #0b1016) 96%, var(--bds-accent));
+            box-shadow: 0 3cqh 9cqh color-mix(in srgb, var(--bg, #000000) 45%, transparent);
+          }
+
+          .bds-browser,
+          .bds-window {
+            width: min(82cqw, 126cqh);
+            aspect-ratio: 16 / 10;
+          }
+
+          .bds-phone {
+            position: relative;
+            grid-template-rows: minmax(0, 1fr);
+            height: min(86cqh, 168cqw);
+            aspect-ratio: 9 / 19;
+            padding: 1.7cqmin;
+            border-radius: 7cqmin;
+          }
+
+          /* chrome bar (browser toolbar / window title bar) */
+          .bds-bar {
+            display: flex;
+            align-items: center;
+            gap: var(--space-2, 2.2cqmin);
+            padding: 1.5cqmin 2.4cqmin;
+            border-bottom: 0.14cqmin solid
+              color-mix(in srgb, var(--border, #475569) 60%, transparent);
+            background: color-mix(in srgb, var(--surface, #0b1016) 80%, var(--bg, #05070c));
+          }
+
+          .bds-phone .bds-bar {
+            display: none;
+          }
+
+          .bds-dots,
+          .bds-bar::after {
+            display: flex;
+            flex: 0 0 5.5cqmin;
+            gap: 0.95cqmin;
+          }
+
+          .bds-bar::after {
+            content: "";
+          }
+
+          .bds-dots i {
+            width: 1.15cqmin;
+            height: 1.15cqmin;
+            border-radius: 50%;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 26%, transparent);
+          }
+
+          .bds-pill {
+            display: block;
+            min-width: 36%;
+            max-width: 62%;
+            margin: 0 auto;
+            padding: 0.75cqmin 2.6cqmin;
+            overflow: hidden;
+            border: 0.14cqmin solid color-mix(in srgb, var(--border, #475569) 50%, transparent);
+            border-radius: 999px;
+            background: color-mix(in srgb, var(--bg, #05070c) 55%, var(--surface, #0b1016));
+            color: var(--muted, #8b93a3);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            font-size: 2cqmin;
+            line-height: 1.5;
+            white-space: nowrap;
+            text-align: center;
+            text-overflow: ellipsis;
+          }
+
+          .bds-bartitle {
+            display: block;
+            margin: 0 auto;
+            padding: 0.4cqmin 0;
+            overflow: hidden;
+            color: color-mix(in srgb, var(--fg, #f8fafc) 78%, transparent);
+            font-size: 2.15cqmin;
+            font-weight: 600;
+            letter-spacing: 0.02em;
+            line-height: 1.5;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+          }
+
+          .bds-browser .bds-bartitle,
+          .bds-window .bds-pill {
+            display: none;
+          }
+
+          .bds-notch {
+            display: none;
+          }
+
+          .bds-phone .bds-notch {
+            display: block;
+            position: absolute;
+            z-index: 2;
+            top: 3cqmin;
+            left: 50%;
+            width: 26%;
+            height: 2.2cqmin;
+            transform: translateX(-50%);
+            border-radius: 999px;
+            background: color-mix(in srgb, var(--bg, #05070c) 72%, #000000);
+          }
+
+          /* screen area: stacked slot layers */
+          .bds-screen {
+            position: relative;
+            overflow: hidden;
+            background: color-mix(in srgb, var(--surface, #0b1016) 86%, var(--bg, #05070c));
+          }
+
+          .bds-phone .bds-screen {
+            border-radius: 5.4cqmin;
+          }
+
+          .bds-screen-a,
+          .bds-screen-b {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+          }
+
+          .bds-screen-a > img,
+          .bds-screen-a > video,
+          .bds-screen-b > img,
+          .bds-screen-b > video {
+            display: block;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+          }
+
+          /* default skeleton screen: pure token furniture, no branding */
+          .bds-skel {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            grid-template-rows: auto minmax(0, 1fr);
+          }
+
+          .bds-skel-top {
+            display: flex;
+            align-items: center;
+            gap: var(--space-1, 1.6cqmin);
+            padding: 1.8cqmin 2.6cqmin;
+            border-bottom: 0.14cqmin solid
+              color-mix(in srgb, var(--border, #475569) 55%, transparent);
+          }
+
+          .bds-phone .bds-skel-top {
+            padding-top: 6.4cqmin;
+          }
+
+          .bds-skel-mark {
+            width: 2.6cqmin;
+            height: 2.6cqmin;
+            border-radius: 0.8cqmin;
+            background: color-mix(in srgb, var(--bds-accent) 74%, var(--surface, #0b1016));
+          }
+
+          .bds-skel-line {
+            height: 1.25cqmin;
+            border-radius: 999px;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 13%, transparent);
+          }
+
+          .bds-skel-top .bds-skel-line:nth-of-type(1) {
+            width: 9cqmin;
+          }
+
+          .bds-skel-top .bds-skel-line:nth-of-type(2) {
+            width: 6.5cqmin;
+          }
+
+          .bds-skel-spring {
+            flex: 1;
+          }
+
+          .bds-skel-chip {
+            width: 8.5cqmin;
+            height: 2.9cqmin;
+            border: 0.14cqmin solid color-mix(in srgb, var(--bds-accent) 55%, transparent);
+            border-radius: 999px;
+            background: color-mix(in srgb, var(--bds-accent) 28%, transparent);
+          }
+
+          .bds-skel-avatar {
+            width: 2.8cqmin;
+            height: 2.8cqmin;
+            border-radius: 50%;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 18%, transparent);
+          }
+
+          .bds-skel-body {
+            display: grid;
+            grid-template-columns: 24% minmax(0, 1fr);
+            min-height: 0;
+          }
+
+          .bds-phone .bds-skel-body {
+            grid-template-columns: minmax(0, 1fr);
+          }
+
+          .bds-skel-side {
+            display: flex;
+            flex-direction: column;
+            gap: 2cqmin;
+            padding: 2.6cqmin 2.6cqmin;
+            border-right: 0.14cqmin solid
+              color-mix(in srgb, var(--border, #475569) 55%, transparent);
+          }
+
+          .bds-phone .bds-skel-side {
+            display: none;
+          }
+
+          .bds-skel-side .bds-skel-line:nth-child(1) {
+            width: 78%;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 22%, transparent);
+          }
+
+          .bds-skel-side .bds-skel-line:nth-child(2) {
+            width: 56%;
+          }
+
+          .bds-skel-side .bds-skel-line:nth-child(3) {
+            width: 66%;
+          }
+
+          .bds-skel-side .bds-skel-line:nth-child(4) {
+            width: 44%;
+          }
+
+          .bds-skel-side .bds-skel-line:nth-child(5) {
+            width: 60%;
+          }
+
+          .bds-skel-main {
+            display: flex;
+            flex-direction: column;
+            gap: var(--space-2, 1.8cqmin);
+            min-height: 0;
+            padding: var(--space-3, 2.8cqmin);
+          }
+
+          .bds-skel-heading {
+            width: 34%;
+            height: 2.5cqmin;
+            border-radius: 999px;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 21%, transparent);
+          }
+
+          .bds-skel-sub {
+            width: 52%;
+            height: 1.25cqmin;
+            border-radius: 999px;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 9%, transparent);
+          }
+
+          .bds-skel-cards {
+            display: grid;
+            flex: 1;
+            grid-template-columns: repeat(3, minmax(0, 1fr));
+            gap: 2.1cqmin;
+            min-height: 0;
+            margin-top: 0.8cqmin;
+          }
+
+          .bds-phone .bds-skel-cards {
+            grid-template-columns: minmax(0, 1fr);
+          }
+
+          .bds-skel-card {
+            display: flex;
+            flex-direction: column;
+            gap: 1.5cqmin;
+            min-height: 0;
+            padding: 2.1cqmin;
+            border: 0.14cqmin solid color-mix(in srgb, var(--border, #475569) 60%, transparent);
+            border-radius: var(--radius, 1.6cqmin);
+            background: color-mix(in srgb, var(--bg, #05070c) 30%, transparent);
+          }
+
+          .bds-skel-card .bds-skel-line {
+            width: 55%;
+          }
+
+          .bds-skel-block {
+            flex: 1;
+            min-height: 3cqmin;
+            border-radius: calc(var(--radius, 1.6cqmin) * 0.6);
+            background: color-mix(in srgb, var(--fg, #f8fafc) 7%, transparent);
+          }
+
+          .bds-skel-card:nth-child(1) .bds-skel-block {
+            background: color-mix(in srgb, var(--bds-accent) 17%, transparent);
+          }
+
+          /* skeleton state B: rearranged furniture so the swap reads */
+          .bds-skel-b .bds-skel-heading {
+            width: 24%;
+          }
+
+          .bds-skel-b .bds-skel-sub {
+            width: 38%;
+          }
+
+          .bds-skel-b .bds-skel-cards {
+            grid-template-columns: 2fr 1fr;
+          }
+
+          .bds-phone .bds-skel-b .bds-skel-cards {
+            grid-template-columns: minmax(0, 1fr);
+          }
+
+          .bds-skel-b .bds-skel-card:nth-child(3) {
+            grid-column: 1 / -1;
+          }
+
+          .bds-skel-b .bds-skel-card:nth-child(1) .bds-skel-block {
+            background: color-mix(in srgb, var(--fg, #f8fafc) 7%, transparent);
+          }
+
+          .bds-skel-b .bds-skel-card:nth-child(2) .bds-skel-block {
+            background: color-mix(in srgb, var(--bds-accent) 17%, transparent);
+          }
+        </style>
+
+        <div
+          id="browser-device-stage-clip"
+          class="bds-clip clip"
+          data-start="0"
+          data-duration="5"
+          data-track-index="0"
+        >
+          <div class="bds-stage">
+            <div class="bds-device" role="img" aria-label="App screen in device chrome">
+              <div class="bds-bar">
+                <span class="bds-dots" aria-hidden="true"><i></i><i></i><i></i></span>
+                <span class="bds-pill"></span>
+                <span class="bds-bartitle"></span>
+              </div>
+              <span class="bds-notch" aria-hidden="true"></span>
+              <div class="bds-screen">
+                <div class="bds-screen-a">
+                  <div class="bds-skel" aria-hidden="true">
+                    <div class="bds-skel-top">
+                      <span class="bds-skel-mark"></span>
+                      <span class="bds-skel-line"></span>
+                      <span class="bds-skel-line"></span>
+                      <span class="bds-skel-spring"></span>
+                      <span class="bds-skel-chip"></span>
+                      <span class="bds-skel-avatar"></span>
+                    </div>
+                    <div class="bds-skel-body">
+                      <div class="bds-skel-side">
+                        <span class="bds-skel-line"></span>
+                        <span class="bds-skel-line"></span>
+                        <span class="bds-skel-line"></span>
+                        <span class="bds-skel-line"></span>
+                        <span class="bds-skel-line"></span>
+                      </div>
+                      <div class="bds-skel-main">
+                        <span class="bds-skel-heading"></span>
+                        <span class="bds-skel-sub"></span>
+                        <div class="bds-skel-cards">
+                          <div class="bds-skel-card">
+                            <span class="bds-skel-line"></span>
+                            <span class="bds-skel-block"></span>
+                          </div>
+                          <div class="bds-skel-card">
+                            <span class="bds-skel-line"></span>
+                            <span class="bds-skel-block"></span>
+                          </div>
+                          <div class="bds-skel-card">
+                            <span class="bds-skel-line"></span>
+                            <span class="bds-skel-block"></span>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".bds-stage");
+            var device = root.querySelector(".bds-device");
+            var screen = root.querySelector(".bds-screen");
+            var screenA = root.querySelector(".bds-screen-a");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var chromeKind =
+              vars.chrome === "window" || vars.chrome === "phone" ? vars.chrome : "browser";
+            var title = vars.title == null ? "app.example.com" : String(vars.title);
+            var swapAt = parseFloat(vars.swap_at);
+            if (!isFinite(swapAt) || swapAt <= 0) swapAt = 0;
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exitMode = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            root.style.setProperty("--bds-accent", accentColors[accent]);
+            device.classList.add("bds-" + chromeKind);
+            root.querySelector(".bds-pill").textContent = title;
+            root.querySelector(".bds-bartitle").textContent = title;
+
+            // SLOTS. Caller templates live at HOST DOCUMENT level (the mount
+            // wipes host-clip children, and templates never render). The
+            // scoped `document` proxy filters queries to this composition's
+            // subtree, so the lookup deliberately goes through ownerDocument.
+            var hostDoc = root.ownerDocument;
+            function slotContent(name) {
+              var tpl = null;
+              try {
+                tpl = hostDoc.querySelector(
+                  'template[data-slot="browser-device-stage-' + name + '"]',
+                );
+              } catch (error) {
+                tpl = null;
+              }
+              return tpl ? hostDoc.importNode(tpl.content, true) : null;
+            }
+
+            var skeleton = screenA.querySelector(".bds-skel");
+            var slotA = slotContent("screen");
+            var screenB = null;
+            if (swapAt > 0) {
+              screenB = hostDoc.createElement("div");
+              screenB.className = "bds-screen-b";
+              var slotB = slotContent("screen-b");
+              if (slotB) {
+                screenB.appendChild(slotB);
+              } else {
+                var skeletonB = skeleton.cloneNode(true);
+                skeletonB.classList.add("bds-skel-b");
+                screenB.appendChild(skeletonB);
+              }
+              screen.appendChild(screenB);
+            }
+            if (slotA) {
+              skeleton.remove();
+              screenA.appendChild(slotA);
+            }
+
+            // Envelope: fixed IN/OUT, elastic HOLD, never time-scaled.
+            var IN_BASE = 0.9;
+            var OUT_BASE = exitMode === "none" ? 0 : 0.5;
+            var SWAP_BASE = 0.55;
+            var STILLNESS = 0.35;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "5"));
+            var totalBase = IN_BASE + OUT_BASE;
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var OUT_START = IN + HOLD;
+
+            // Explicit both-endpoint state so a seek to t=0 is always correct.
+            gsap.set(stage, { opacity: 0, y: "4.5cqh", scale: 0.965, transformOrigin: "50% 60%" });
+            if (screenB) gsap.set(screenB, { opacity: 0, y: "1.6cqh" });
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: one settle. Rise + soft scale + fade, smooth ease-out.
+            tl.to(stage, { opacity: 1, duration: IN * 0.66, ease: "power2.out" }, 0);
+            tl.to(stage, { y: "0cqh", duration: IN, ease: "power3.out" }, 0);
+            tl.to(stage, { scale: 1, duration: IN, ease: "power2.out" }, 0);
+
+            // HOLD: barely-there drift as two explicit tweens (no yoyo
+            // re-tweens), then authored stillness until OUT.
+            var driftHalf = Math.max(0, HOLD - STILLNESS) / 2;
+            if (driftHalf >= 0.25) {
+              driftHalf = Math.min(driftHalf, 1.6);
+              tl.to(stage, { y: "-0.5cqh", duration: driftHalf, ease: "sine.inOut" }, IN);
+              tl.to(stage, { y: "0cqh", duration: driftHalf, ease: "sine.inOut" }, IN + driftHalf);
+            }
+
+            // Optional screen swap: fade-through, clamped inside
+            // [IN, D - OUT - SWAP] so it never fights the entrance or the
+            // exit. Screen A empties completely onto the bare stage before
+            // screen B rises in, so every frame shows at most one screen
+            // (no double-exposure furniture on a paused frame).
+            if (screenB) {
+              var SWAP = SWAP_BASE * scale;
+              var latest = Math.max(IN, duration - OUT - SWAP - 0.05);
+              var swapStart = Math.min(Math.max(swapAt, IN), latest);
+              var swapHalf = SWAP / 2;
+              tl.to(screenA, { opacity: 0, duration: swapHalf, ease: "power1.in" }, swapStart);
+              tl.fromTo(
+                screenB,
+                { opacity: 0, y: "1.6cqh" },
+                { opacity: 1, y: "0cqh", duration: swapHalf, ease: "power2.out" },
+                swapStart + swapHalf,
+              );
+            }
+
+            // OUT: only when exit != none; the default holds the last frame.
+            if (exitMode !== "none") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+              if (exitMode === "up") {
+                tl.to(stage, { y: "-4cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              }
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["browser-device-stage"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add browser-device-stage" />
+
+That writes one file: `compositions/components/browser-device-stage.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/browser-device-stage.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `stage` `product-demo` `device` `browser` `phone` `slot` `chrome`.
+
+## 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/components/camera-rig-depth-stack.mdx b/docs/catalog/components/camera-rig-depth-stack.mdx
new file mode 100644
index 0000000000..6eee08f34b
--- /dev/null
+++ b/docs/catalog/components/camera-rig-depth-stack.mdx
@@ -0,0 +1,100 @@
+---
+title: "Camera Rig Depth Stack"
+description: "A 3D camera-rig-style card stack with depth, parallax, and focus shift."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/components/camera-rig-depth-stack.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Camera Rig Depth Stack preview" />
+
+## Install
+
+<InstallCommand command="npx hyperframes add camera-rig-depth-stack" />
+
+That writes one file: `compositions/components/camera-rig-depth-stack.html`.
+
+## Source
+
+<Accordion title={`camera-rig-depth-stack.html`}>
+
+```html
+<!--
+  Camera Rig Depth Stack - advanced HyperFrames primitive.
+
+  This is intentionally seekable: drive it from a paused GSAP timeline.
+  MotionPath examples require GSAP MotionPathPlugin. Three.js examples expose
+  a render(progress) adapter instead of a free-running requestAnimationFrame loop.
+-->
+
+<div class="hf-advanced-camera-rig-depth-stack">
+  <div class="panel">
+    <div>
+      <h3>Camera Rig Depth Stack</h3>
+      <p>A 3D camera-rig-style card stack with depth, parallax, and focus shift.</p>
+    </div>
+  </div>
+</div>
+
+<style>
+  .hf-advanced-camera-rig-depth-stack {
+    color: #111827;
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-advanced-camera-rig-depth-stack {
+    position: relative;
+    width: 760px;
+    height: 430px;
+    perspective: 900px;
+    border-radius: 30px;
+    overflow: hidden;
+    background: linear-gradient(135deg, #0f172a, #312e81);
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+  }
+  .hf-advanced-camera-rig-depth-stack .panel {
+    position: absolute;
+    inset: 56px 90px;
+    border-radius: 30px;
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.52));
+    border: 1px solid rgba(255, 255, 255, 0.45);
+    backdrop-filter: blur(18px);
+    transform: rotateY(var(--hf-rotate-y, -16deg)) rotateX(var(--hf-rotate-x, 9deg))
+      translateZ(var(--hf-z, 0px));
+    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.22);
+    display: grid;
+    place-items: center;
+    text-align: center;
+  }
+  .hf-advanced-camera-rig-depth-stack h3 {
+    margin: 0;
+    color: #111827;
+    font-size: 42px;
+    letter-spacing: -0.05em;
+  }
+  .hf-advanced-camera-rig-depth-stack p {
+    margin: 8px 0 0;
+    color: #475569;
+  }
+</style>
+
+<!--
+  Timeline integration:
+  const startTime = 0;
+  tl.fromTo('.hf-advanced-camera-rig-depth-stack .panel', { '--hf-rotate-y': '-20deg', '--hf-rotate-x': '12deg', '--hf-z': '-80px', opacity: 0 }, { '--hf-rotate-y': '10deg', '--hf-rotate-x': '-4deg', '--hf-z': '80px', opacity: 1, duration: 1.2, ease: 'power3.out' }, startTime);
+-->
+```
+
+</Accordion>
+
+## Usage
+
+Open `compositions/components/camera-rig-depth-stack.html` and paste its contents into your composition. The comment header describes the timeline integration and any optional dependency setup.
+
+{/* hf:generated-footer */}
+
+Tagged `advanced-motion` `hyperframes-native`.
+
+## 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/components/camera-scan-gate.mdx b/docs/catalog/components/camera-scan-gate.mdx
new file mode 100644
index 0000000000..b8c5aa341a
--- /dev/null
+++ b/docs/catalog/components/camera-scan-gate.mdx
@@ -0,0 +1,564 @@
+---
+title: "Camera Scan Gate"
+description: "A camera and QR recognition moment with a viewfinder sweep, bracket lock, confirmation pulse, and verified next beat."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/camera-scan-gate.html"
+  compositionId="camera-scan-gate"
+  compositionSrc="compositions/components/camera-scan-gate.html"
+  variables={[{"id":"scanColor","type":"string","role":"style","label":"Scan color","description":"Any CSS color value used by the scan line and recognition glow.","default":"var(--brand)"},{"id":"targetLabel","type":"string","role":"content","label":"Target label","description":"Confirmation label revealed at recognition lock. Blank hides the line.","default":"Verified"},{"id":"sweepSpeed","type":"number","role":"timing","label":"Sweep speed","description":"Speed multiplier for the scan sweep phase only.","default":1,"min":0.8,"max":1.6,"step":0.1,"unit":"x"}]}
+>
+
+```html camera-scan-gate.html
+<!doctype html>
+<!--
+  camera-scan-gate -- HyperFrames video primitive (ui-props / interaction / demonstrate)
+
+  Concept: a camera viewfinder scans once, tightens its four L-shaped corner
+  brackets onto a detected target, then confirms recognition with a pulse,
+  check flash, and target label. One mechanic, one job: demonstrate the causal
+  scan -> lock -> confirmation gate that unlocks a product's next beat.
+
+  Compiled-from evidence: SIM fixture; MOBILE mobile-inventory (scan-to-onboard
+  and scan-to-pay moments in the video-primitives candidates card).
+
+  Use when: a mobile product scene needs a camera, QR, identity, or payment
+  recognition moment whose successful lock causes the following action. Skip
+  it for passive camera decoration or a generic loading state.
+
+  Variables (declared in data-composition-variables below):
+    - scanColor (string, default "var(--brand)"): any CSS color value used by
+      the scan line, lock brackets, and confirmation glow.
+    - targetLabel (string, default "Verified"): label revealed at lock. Empty
+      string hides the label line entirely.
+    - sweepSpeed (number, default 1, range 0.8 to 1.6): scan sweep speed only.
+      It changes the sweep start while its landing sync point stays fixed.
+
+  Envelope (fixed IN/OUT, elastic HOLD only, never gsap.timeScale()):
+    IN_BASE  = 1.05s  stage settles, sweep lands, then recognition locks
+    HOLD     = elastic = max(0, D - (IN_BASE + OUT_BASE)); a faint finite
+               frame glow breathes, or remains still when HOLD == 0
+    OUT_BASE = 0.50s  resolved gate releases with a short fade
+    If D < IN_BASE + OUT_BASE, IN and OUT scale down together so IN + OUT == D
+    and HOLD == 0.
+
+  Sync points (fixed offsets into IN, never inside elastic HOLD):
+    - scan-landed: 0.50s into unscaled IN, the --ease-standard sweep completes
+    - recognition-lock: 0.68s into unscaled IN, brackets tighten with
+      --ease-overshoot while confirmation and the target label fire
+    Both offsets scale proportionally only when the full envelope compresses.
+
+  Sound cue: a soft recognition chime fires at recognition-lock. The primitive
+  never plays audio itself. It dispatches an `hf:sfx` CustomEvent
+  ({ id: "lock-chime", t: LOCK_AT }) for the host mix stage to route.
+
+  Mount contract: this file is a MOUNTABLE SUB-COMPOSITION, not a standalone
+  composition. A host loads it via data-composition-src; the runtime clones
+  only <template> contents, so all live style, markup, and script stays inside
+  the template. The root has no data-width/data-height and fills the host box
+  with position:absolute, inset:0, and container-type:size. It is styled by
+  #root because mounted CSS scoping would stop a root-class selector from
+  matching the root itself. The hardcoded "camera-scan-gate" composition id
+  is required because the mounted flattening step strips data-composition-id
+  before this script registers its timeline. Variables are read through
+  window.__hyperframes.getVariables(), which owns declared defaults merged
+  with per-instance host overrides after mounting.
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "scanColor", "type": "string", "role": "style", "label": "Scan color", "description": "Any CSS color value used by the scan line and recognition glow.", "default": "var(--brand)" },
+    { "id": "targetLabel", "type": "string", "role": "content", "label": "Target label", "description": "Confirmation label revealed at recognition lock. Blank hides the line.", "default": "Verified" },
+    { "id": "sweepSpeed", "type": "number", "role": "timing", "label": "Sweep speed", "description": "Speed multiplier for the scan sweep phase only.", "default": 1, "min": 0.8, "max": 1.6, "step": 0.1, "unit": "x" }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Camera Scan Gate</title>
+    <!-- Metadata only. The loader reads variable declarations from this html
+         element, while the mount runtime discards everything outside the
+         template. -->
+  </head>
+  <body>
+    <template>
+      <div
+        id="root"
+        data-composition-id="camera-scan-gate"
+        data-start="0"
+        data-duration="4"
+        data-fps="30"
+      >
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          /* INVARIANT: the host owns dimensions. #root fills that box and
+             establishes the cqw/cqh basis for every visible measurement. */
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+          }
+
+          .csg-clip {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+            background: var(--bg, #0b1120);
+          }
+
+          .csg-stage {
+            position: relative;
+            width: min(64cqw, 76cqh);
+            aspect-ratio: 1;
+            opacity: 0;
+          }
+
+          /* EDIT ZONE: the outer viewfinder is a square so one centered scale
+             operation tightens all four brackets onto the target equally. */
+          .csg-frame,
+          .csg-corner-layer,
+          .csg-scan-window {
+            position: absolute;
+            inset: 0;
+          }
+
+          .csg-frame {
+            border: 0.16cqw solid color-mix(in srgb, var(--border, #334155) 74%, transparent);
+            border-radius: var(--space-2, 2.4cqw);
+            background: color-mix(in srgb, var(--surface, #1e293b) 34%, transparent);
+            box-shadow: inset 0 0 5cqw color-mix(in srgb, var(--bg, #0b1120) 60%, transparent);
+          }
+
+          .csg-grid {
+            position: absolute;
+            inset: 0;
+            border-radius: inherit;
+            background-image:
+              linear-gradient(
+                to right,
+                transparent 33%,
+                color-mix(in srgb, var(--border, #334155) 32%, transparent) 33% 33.25%,
+                transparent 33.25% 66.5%,
+                color-mix(in srgb, var(--border, #334155) 32%, transparent) 66.5% 66.75%,
+                transparent 66.75%
+              ),
+              linear-gradient(
+                to bottom,
+                transparent 33%,
+                color-mix(in srgb, var(--border, #334155) 32%, transparent) 33% 33.25%,
+                transparent 33.25% 66.5%,
+                color-mix(in srgb, var(--border, #334155) 32%, transparent) 66.5% 66.75%,
+                transparent 66.75%
+              );
+            opacity: 0.55;
+          }
+
+          .csg-ambient {
+            position: absolute;
+            inset: -4%;
+            border: 0.45cqw solid
+              color-mix(in srgb, var(--csg-scan-color, var(--brand, #22c55e)) 48%, transparent);
+            border-radius: var(--space-3, 3.2cqw);
+            box-shadow: 0 0 4.5cqw
+              color-mix(in srgb, var(--csg-scan-color, var(--brand, #22c55e)) 38%, transparent);
+            opacity: 0;
+          }
+
+          .csg-corner-layer {
+            transform-origin: center;
+            z-index: 3;
+          }
+
+          .csg-corner {
+            position: absolute;
+            width: 18%;
+            height: 18%;
+            border-color: var(--csg-scan-color, var(--brand, #22c55e));
+            border-style: solid;
+            filter: drop-shadow(
+              0 0 0.9cqw
+                color-mix(in srgb, var(--csg-scan-color, var(--brand, #22c55e)) 56%, transparent)
+            );
+          }
+
+          .csg-corner-tl {
+            top: 0;
+            left: 0;
+            border-width: 0.65cqw 0 0 0.65cqw;
+            border-radius: var(--space-2, 2.4cqw) 0 0;
+          }
+
+          .csg-corner-tr {
+            top: 0;
+            right: 0;
+            border-width: 0.65cqw 0.65cqw 0 0;
+            border-radius: 0 var(--space-2, 2.4cqw) 0 0;
+          }
+
+          .csg-corner-br {
+            right: 0;
+            bottom: 0;
+            border-width: 0 0.65cqw 0.65cqw 0;
+            border-radius: 0 0 var(--space-2, 2.4cqw);
+          }
+
+          .csg-corner-bl {
+            bottom: 0;
+            left: 0;
+            border-width: 0 0 0.65cqw 0.65cqw;
+            border-radius: 0 0 0 var(--space-2, 2.4cqw);
+          }
+
+          .csg-scan-window {
+            z-index: 2;
+            inset: 3.5%;
+            overflow: hidden;
+          }
+
+          .csg-sweep {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+          }
+
+          .csg-scan-line {
+            position: absolute;
+            inset: 0 0 auto;
+            width: 100%;
+            height: 0.38cqh;
+            border-radius: 999cqw;
+            background: var(--csg-scan-color, var(--brand, #22c55e));
+            box-shadow:
+              0 0 1.2cqw var(--csg-scan-color, var(--brand, #22c55e)),
+              0 1.8cqh 3.6cqh
+                color-mix(in srgb, var(--csg-scan-color, var(--brand, #22c55e)) 42%, transparent);
+          }
+
+          .csg-target {
+            position: absolute;
+            z-index: 1;
+            width: 60%;
+            height: 60%;
+            top: 20%;
+            left: 20%;
+            border: 0.2cqw solid
+              color-mix(in srgb, var(--csg-scan-color, var(--brand, #22c55e)) 65%, transparent);
+            border-radius: var(--space-2, 2.4cqw);
+            background: color-mix(
+              in srgb,
+              var(--csg-scan-color, var(--brand, #22c55e)) 7%,
+              transparent
+            );
+            opacity: 0;
+          }
+
+          .csg-confirmation {
+            position: absolute;
+            z-index: 4;
+            inset: 0;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            gap: var(--space-2, 2.2cqh);
+          }
+
+          .csg-pulse {
+            position: absolute;
+            width: 30%;
+            aspect-ratio: 1;
+            border: 0.42cqw solid var(--csg-scan-color, var(--brand, #22c55e));
+            border-radius: 50%;
+            box-shadow: 0 0 4.5cqw
+              color-mix(in srgb, var(--csg-scan-color, var(--brand, #22c55e)) 58%, transparent);
+            opacity: 0;
+          }
+
+          .csg-check {
+            display: block;
+            width: 8.5%;
+            height: 15%;
+            margin-top: -5%;
+            border-right: 0.8cqw solid var(--csg-scan-color, var(--brand, #22c55e));
+            border-bottom: 0.8cqw solid var(--csg-scan-color, var(--brand, #22c55e));
+            filter: drop-shadow(
+              0 0 1.1cqw
+                color-mix(in srgb, var(--csg-scan-color, var(--brand, #22c55e)) 65%, transparent)
+            );
+            opacity: 0;
+            transform: rotate(45deg);
+          }
+
+          .csg-label {
+            min-width: 34%;
+            padding: var(--space-1, 1cqh) var(--space-3, 3cqw);
+            border: 0.14cqw solid
+              color-mix(in srgb, var(--csg-scan-color, var(--brand, #22c55e)) 48%, transparent);
+            border-radius: 999cqw;
+            background: color-mix(in srgb, var(--surface, #1e293b) 88%, transparent);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: clamp(2cqh, 2.8cqw, 3.3cqh);
+            font-weight: 760;
+            letter-spacing: 0.035em;
+            line-height: 1.1;
+            text-align: center;
+            opacity: 0;
+          }
+
+          .csg-label:empty {
+            display: none;
+          }
+        </style>
+
+        <div
+          id="camera-scan-gate-clip"
+          class="csg-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="csg-stage" role="img" aria-label="Camera recognition scanner">
+            <div class="csg-frame">
+              <div class="csg-grid" aria-hidden="true"></div>
+            </div>
+            <div class="csg-ambient" aria-hidden="true"></div>
+            <div class="csg-target" aria-hidden="true"></div>
+            <div class="csg-scan-window" aria-hidden="true">
+              <div class="csg-sweep">
+                <div class="csg-scan-line"></div>
+              </div>
+            </div>
+            <div class="csg-corner-layer" aria-hidden="true">
+              <span class="csg-corner csg-corner-tl"></span>
+              <span class="csg-corner csg-corner-tr"></span>
+              <span class="csg-corner csg-corner-br"></span>
+              <span class="csg-corner csg-corner-bl"></span>
+            </div>
+            <div class="csg-confirmation">
+              <span class="csg-pulse" aria-hidden="true"></span>
+              <span class="csg-check" aria-hidden="true"></span>
+              <span class="csg-label"></span>
+            </div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            // Literal, not read from the DOM. Mounted flattening strips the
+            // root's data-composition-id before timeline registration.
+            var compositionId = "camera-scan-gate";
+            var stage = root.querySelector(".csg-stage");
+            var cornerLayer = root.querySelector(".csg-corner-layer");
+            var sweep = root.querySelector(".csg-sweep");
+            var target = root.querySelector(".csg-target");
+            var ambient = root.querySelector(".csg-ambient");
+            var pulse = root.querySelector(".csg-pulse");
+            var check = root.querySelector(".csg-check");
+            var label = root.querySelector(".csg-label");
+
+            // EDIT ZONE: declared defaults and per-instance overrides have one
+            // owner after mount, window.__hyperframes.getVariables().
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+            var scanColor =
+              vars.scanColor == null || String(vars.scanColor).trim() === ""
+                ? "var(--brand)"
+                : String(vars.scanColor);
+            var targetLabel = vars.targetLabel == null ? "" : String(vars.targetLabel);
+            var rawSweepSpeed = Number(vars.sweepSpeed);
+            // INVARIANT: sweep speed is finite and clamped to the declared
+            // 0.8 to 1.6 range. It never changes IN, HOLD, OUT, or sync points.
+            var sweepSpeed = Number.isFinite(rawSweepSpeed)
+              ? Math.max(0.8, Math.min(1.6, rawSweepSpeed))
+              : 1;
+
+            root.style.setProperty("--csg-scan-color", scanColor);
+            label.textContent = targetLabel;
+
+            var beatValue = parseFloat(getComputedStyle(root).getPropertyValue("--dur-beat"));
+            var beat = Number.isFinite(beatValue) && beatValue > 0 ? beatValue : 0.5;
+            var AMBIENT_HALF = beat * 1.5;
+
+            // RETIME RANGE: IN_BASE and OUT_BASE own the interaction envelope.
+            // The only elastic phase is HOLD. Short durations scale IN and OUT
+            // together with one factor, never gsap.timeScale().
+            var IN_BASE = 1.05;
+            var OUT_BASE = 0.5;
+            var STAGE_IN_BASE = 0.28;
+            var SWEEP_DURATION_BASE = 0.4;
+            var SWEEP_LANDS_BASE = 0.5;
+            var LOCK_AT_BASE = 0.68;
+            var LOCK_DURATION_BASE = 0.22;
+            var CONFIRM_DURATION_BASE = 0.2;
+            var PULSE_HALF_BASE = 0.18;
+
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var totalBase = IN_BASE + OUT_BASE;
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var STAGE_IN = STAGE_IN_BASE * scale;
+            var SWEEP_LANDS = SWEEP_LANDS_BASE * scale;
+            var SWEEP_DURATION = (SWEEP_DURATION_BASE / sweepSpeed) * scale;
+            var SWEEP_START = Math.max(0, SWEEP_LANDS - SWEEP_DURATION);
+            var LOCK_AT = LOCK_AT_BASE * scale;
+            var LOCK_DURATION = LOCK_DURATION_BASE * scale;
+            var CONFIRM_DURATION = CONFIRM_DURATION_BASE * scale;
+            var PULSE_HALF = PULSE_HALF_BASE * scale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var HOLD_START = IN;
+            var OUT_START = IN + HOLD;
+
+            function fireSfx(id, t) {
+              root.dispatchEvent(
+                new CustomEvent("hf:sfx", { detail: { id: id, t: t }, bubbles: true }),
+              );
+            }
+
+            // Explicit both-endpoints state before timeline construction keeps
+            // direct seek to t=0 correct without playing through prior frames.
+            gsap.set(stage, { opacity: 0, scale: 0.94 });
+            gsap.set(cornerLayer, { scale: 1 });
+            gsap.set(sweep, { opacity: 1, yPercent: 0 });
+            gsap.set(target, { opacity: 0, scale: 0.96 });
+            gsap.set(ambient, { opacity: 0, scale: 1 });
+            gsap.set(pulse, { opacity: 0, scale: 0.9 });
+            gsap.set(check, { opacity: 0, scale: 0.94 });
+            gsap.set(label, { opacity: 0, y: "1.2cqh", scale: 0.96 });
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: settle, scan, then lock. The sweep uses --ease-standard's
+            // GSAP equivalent and lands at a fixed offset inside IN.
+            tl.to(stage, { opacity: 1, scale: 1, duration: STAGE_IN, ease: "power2.out" }, 0);
+            tl.to(
+              sweep,
+              { yPercent: 100, duration: SWEEP_DURATION, ease: "power2.out" },
+              SWEEP_START,
+            );
+            tl.set(sweep, { opacity: 0 }, SWEEP_LANDS);
+
+            // recognition-lock is the single causal gate. Corner tightening is
+            // the one moderate --ease-overshoot motion in this primitive.
+            tl.to(
+              cornerLayer,
+              { scale: 0.6, duration: LOCK_DURATION, ease: "back.out(1.7)" },
+              LOCK_AT,
+            );
+            tl.to(
+              target,
+              { opacity: 1, scale: 1, duration: CONFIRM_DURATION, ease: "power2.out" },
+              LOCK_AT,
+            );
+            tl.to(
+              check,
+              { opacity: 1, scale: 1, duration: CONFIRM_DURATION, ease: "power2.out" },
+              LOCK_AT,
+            );
+            tl.to(
+              label,
+              { opacity: 1, y: 0, scale: 1, duration: CONFIRM_DURATION, ease: "power2.out" },
+              LOCK_AT,
+            );
+            tl.to(
+              pulse,
+              {
+                opacity: 0.9,
+                scale: 1.25,
+                duration: PULSE_HALF,
+                ease: "power2.out",
+                yoyo: true,
+                repeat: 1,
+              },
+              LOCK_AT,
+            );
+            // Side-effect invariant: this timeline callback is the only actor
+            // that emits lock-chime, once at the recognition-lock sync point.
+            tl.call(
+              function () {
+                fireSfx("lock-chime", LOCK_AT);
+              },
+              [],
+              LOCK_AT,
+            );
+
+            // HOLD: a separate layer breathes with a finite repeat count, so
+            // the resolved gate stays alive without competing with lock tweens.
+            if (HOLD > AMBIENT_HALF) {
+              var ambientRepeat = Math.max(0, Math.floor(HOLD / AMBIENT_HALF) - 1);
+              tl.to(
+                ambient,
+                {
+                  opacity: 0.3,
+                  scale: 1.015,
+                  duration: AMBIENT_HALF,
+                  ease: "sine.inOut",
+                  yoyo: true,
+                  repeat: ambientRepeat,
+                },
+                HOLD_START,
+              );
+            }
+
+            // OUT: asymmetric release. HOLD alone absorbs duration changes.
+            tl.to(stage, { opacity: 0, scale: 0.98, duration: OUT, ease: "power2.in" }, OUT_START);
+
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add camera-scan-gate" />
+
+That writes one file: `compositions/components/camera-scan-gate.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/camera-scan-gate.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `prop` `ui-props` `camera` `qr` `scan` `recognition` `interaction` `demonstrate`.
+
+## 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/components/camera-shake.mdx b/docs/catalog/components/camera-shake.mdx
new file mode 100644
index 0000000000..68260927fe
--- /dev/null
+++ b/docs/catalog/components/camera-shake.mdx
@@ -0,0 +1,851 @@
+---
+title: "Camera Shake"
+description: "Procedural handheld, telephoto and rig camera shake for any wrapper: nine measured profiles with per-lens projection, closed-form and seek-safe"
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/camera-shake.html"
+  compositionId="camera-shake"
+  compositionSrc="compositions/components/camera-shake.html"
+  variables={[{"id":"shakeProfile","type":"enum","label":"Shake profile","default":"handheld-normal-mild","options":[{"value":"handheld-normal-mild","label":"Handheld - normal lens, mild"},{"value":"handheld-normal-strong","label":"Handheld - normal lens, strong"},{"value":"handheld-normal-extreme","label":"Handheld - normal lens, extreme"},{"value":"handheld-wideangle-mild","label":"Handheld - wide angle, mild"},{"value":"handheld-wideangle-strong","label":"Handheld - wide angle, strong"},{"value":"handheld-tele-mild","label":"Handheld - telephoto, mild"},{"value":"handheld-tele-strong","label":"Handheld - telephoto, strong"},{"value":"rig-6d-shake","label":"Rig - 6D shake (engine buzz)"},{"value":"rig-6d-wobble","label":"Rig - 6D wobble"}]},{"id":"shakeIntensity","type":"number","label":"Intensity multiplier","default":1,"min":0,"max":3,"step":0.05},{"id":"shakeFrequency","type":"number","label":"Frequency multiplier","default":1,"min":0.1,"max":4,"step":0.05},{"id":"shakeRotation","type":"boolean","label":"Include rotation (roll + tilt/pan)","default":true}]}
+>
+
+```html camera-shake.html
+<!doctype html>
+<html
+  lang="en"
+  data-composition-variables='[
+    {
+      "id": "shakeProfile",
+      "type": "enum",
+      "label": "Shake profile",
+      "default": "handheld-normal-mild",
+      "options": [
+        { "value": "handheld-normal-mild", "label": "Handheld - normal lens, mild" },
+        { "value": "handheld-normal-strong", "label": "Handheld - normal lens, strong" },
+        { "value": "handheld-normal-extreme", "label": "Handheld - normal lens, extreme" },
+        { "value": "handheld-wideangle-mild", "label": "Handheld - wide angle, mild" },
+        { "value": "handheld-wideangle-strong", "label": "Handheld - wide angle, strong" },
+        { "value": "handheld-tele-mild", "label": "Handheld - telephoto, mild" },
+        { "value": "handheld-tele-strong", "label": "Handheld - telephoto, strong" },
+        { "value": "rig-6d-shake", "label": "Rig - 6D shake (engine buzz)" },
+        { "value": "rig-6d-wobble", "label": "Rig - 6D wobble" }
+      ]
+    },
+    {
+      "id": "shakeIntensity",
+      "type": "number",
+      "label": "Intensity multiplier",
+      "default": 1,
+      "min": 0,
+      "max": 3,
+      "step": 0.05
+    },
+    {
+      "id": "shakeFrequency",
+      "type": "number",
+      "label": "Frequency multiplier",
+      "default": 1,
+      "min": 0.1,
+      "max": 4,
+      "step": 0.05
+    },
+    {
+      "id": "shakeRotation",
+      "type": "boolean",
+      "label": "Include rotation (roll + tilt/pan)",
+      "default": true
+    }
+  ]'
+>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Camera Shake</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent;
+      }
+
+      /* ---- camera-shake ----------------------------------------------------
+         Procedural handheld / Steadicam / rig shake for ANY wrapper. Two
+         elements: an overflow-hidden FRAME that carries the lens perspective,
+         and a RIG inside it that gets the shake transform. Whatever you put
+         in the rig becomes "the shot".
+
+           <div class="camera-shake-frame">
+             <div class="camera-shake-rig">  ...your content...  </div>
+           </div>
+
+           cameraShake(tl, "#my-rig", { profile: "handheld-tele-mild", duration: 8 });
+
+         Layers inside the rig may carry data-cs-z="-800" to sit at a depth;
+         cameraShake() scales them to compensate so they parallax under the
+         camera instead of sliding as a flat card.
+      ------------------------------------------------------------------- */
+      .camera-shake-frame {
+        position: absolute;
+        inset: 0;
+        overflow: hidden;
+        /* perspective is written by cameraShake() from the profile's lens */
+      }
+      .camera-shake-rig {
+        position: absolute;
+        inset: 0;
+        transform-style: preserve-3d;
+        will-change: transform;
+      }
+      .camera-shake-rig > * {
+        transform-style: preserve-3d;
+      }
+
+      /* ---- self-preview stand-in "world" (not part of the snippet) ------- */
+      .cs-layer {
+        position: absolute;
+        inset: 0;
+      }
+      .cs-sky {
+        background: linear-gradient(#070b18 0%, #16264a 52%, #4a6ea8 78%, #b9852f 100%);
+      }
+      .cs-skyline {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 46%;
+        height: 220px;
+        background: repeating-linear-gradient(
+          90deg,
+          #0d1428 0 70px,
+          transparent 70px 96px,
+          #101a33 96px 140px,
+          transparent 140px 178px
+        );
+        opacity: 0.85;
+      }
+      .cs-tower {
+        position: absolute;
+        bottom: 44%;
+        width: 190px;
+        background: linear-gradient(#1d2b4d, #0a1024);
+        border-top: 6px solid #2f4a80;
+      }
+      .cs-tower::after {
+        content: "";
+        position: absolute;
+        inset: 18px 14px;
+        background:
+          repeating-linear-gradient(0deg, #ffd48a33 0 10px, transparent 10px 34px),
+          repeating-linear-gradient(90deg, #ffd48a2b 0 12px, transparent 12px 40px);
+      }
+      .cs-t1 {
+        left: 300px;
+        height: 430px;
+      }
+      .cs-t2 {
+        left: 820px;
+        width: 260px;
+        height: 640px;
+      }
+      .cs-t3 {
+        left: 1340px;
+        height: 380px;
+      }
+      /* Flat ground plane. A rotateX'd floor would poke through the title
+         plane under preserve-3d, so depth here comes from translateZ only. */
+      .cs-floor {
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 56%;
+        bottom: 0;
+        background:
+          repeating-linear-gradient(90deg, #4d6ea03d 0 3px, transparent 3px 150px),
+          repeating-linear-gradient(0deg, #4d6ea03d 0 3px, transparent 3px 70px),
+          linear-gradient(#0a1224, #04070f);
+      }
+      .cs-title {
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 300px;
+        text-align: center;
+        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+        font-weight: 800;
+        font-size: 148px;
+        line-height: 1.1;
+        letter-spacing: -0.03em;
+        color: #ffffff;
+        text-shadow: 0 12px 44px rgba(0, 0, 0, 0.75);
+      }
+      .cs-title span {
+        display: block;
+      }
+      .cs-post {
+        position: absolute;
+        left: 120px;
+        bottom: 0;
+        width: 46px;
+        height: 620px;
+        background: linear-gradient(#25324f, #060a14);
+        border-radius: 6px;
+      }
+      .cs-post-b {
+        left: auto;
+        right: 150px;
+        height: 720px;
+      }
+
+      /* ---- static frame guide: proves the WORLD moves, not the frame ----- */
+      #cs-guide {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+      }
+      /* Thirds as four thin bars, not one full-frame gradient layer: a
+         full-inset element over the title reads as an occluder to the
+         layout checker even when its paint is mostly transparent. */
+      #cs-guide .cs-line {
+        position: absolute;
+        background: rgba(255, 255, 255, 0.25);
+      }
+      #cs-guide .cs-v1 {
+        left: 639px;
+        top: 0;
+        width: 3px;
+        height: 1080px;
+      }
+      #cs-guide .cs-v2 {
+        left: 1279px;
+        top: 0;
+        width: 3px;
+        height: 1080px;
+      }
+      #cs-guide .cs-h1 {
+        left: 0;
+        top: 359px;
+        width: 1920px;
+        height: 3px;
+      }
+      #cs-guide .cs-h2 {
+        left: 0;
+        top: 719px;
+        width: 1920px;
+        height: 3px;
+      }
+      #cs-guide .cs-reticle {
+        position: absolute;
+        left: 910px;
+        top: 490px;
+        width: 100px;
+        height: 100px;
+        border: 3px solid #ff4d3d;
+        border-radius: 50%;
+      }
+      #cs-guide .cs-reticle::after {
+        content: "";
+        position: absolute;
+        left: 47px;
+        top: -40px;
+        width: 3px;
+        height: 180px;
+        background: #ff4d3d;
+      }
+      #cs-guide .cs-tick {
+        position: absolute;
+        width: 70px;
+        height: 70px;
+        border: 4px solid #ffffffbb;
+      }
+      #cs-guide .cs-tl {
+        left: 70px;
+        top: 70px;
+        border-right: 0;
+        border-bottom: 0;
+      }
+      #cs-guide .cs-tr {
+        right: 70px;
+        top: 70px;
+        border-left: 0;
+        border-bottom: 0;
+      }
+      #cs-guide .cs-bl {
+        left: 70px;
+        bottom: 70px;
+        border-right: 0;
+        border-top: 0;
+      }
+      #cs-guide .cs-br {
+        right: 70px;
+        bottom: 70px;
+        border-left: 0;
+        border-top: 0;
+      }
+      #cs-readout {
+        position: absolute;
+        left: 70px;
+        bottom: 170px;
+        font-family: Menlo, Consolas, monospace;
+        font-size: 30px;
+        letter-spacing: 0.02em;
+        color: #ffffffe6;
+        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
+      }
+    </style>
+  </head>
+  <body>
+    <!--
+      WIRING (what you copy into a host composition):
+        1. the .camera-shake-frame / .camera-shake-rig CSS above
+        2. the cameraShake() helper in the script below (profile table included)
+        3. wrap the thing you want shot:
+             <div class="camera-shake-frame">
+               <div class="camera-shake-rig" id="shot">  <video .../>  </div>
+             </div>
+        4. drive it from your paused timeline:
+             cameraShake(tl, "#shot", { profile: "handheld-wideangle-strong", duration: 8 });
+      Everything with a `cs-` class below is the self-preview world, not the snippet.
+    -->
+    <div
+      id="cs-root"
+      data-composition-id="camera-shake"
+      data-start="0"
+      data-duration="6"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+      style="position: relative; width: 1920px; height: 1080px; background: #05070f"
+    >
+      <div
+        class="camera-shake-frame clip"
+        id="cs-frame"
+        data-start="0"
+        data-duration="6"
+        data-track-index="0"
+      >
+        <!-- The rig is deliberately larger than the frame (overscan) and
+             deliberately leaves it under shake: that IS the effect, so every
+             moving layer is marked as intentional overflow. -->
+        <div class="camera-shake-rig" id="cs-rig" data-layout-allow-overflow>
+          <div class="cs-layer cs-sky" data-cs-z="-900" data-layout-allow-overflow></div>
+          <div class="cs-layer cs-farlayer" data-cs-z="-520" data-layout-allow-overflow>
+            <div class="cs-skyline" data-layout-allow-overflow></div>
+          </div>
+          <div class="cs-layer cs-midlayer" data-cs-z="-240" data-layout-allow-overflow>
+            <div class="cs-tower cs-t1" data-layout-allow-overflow></div>
+            <div class="cs-tower cs-t2" data-layout-allow-overflow></div>
+            <div class="cs-tower cs-t3" data-layout-allow-overflow></div>
+          </div>
+          <div class="cs-layer cs-floorlayer" data-cs-z="-90" data-layout-allow-overflow>
+            <div class="cs-floor" data-layout-allow-overflow></div>
+          </div>
+          <div class="cs-layer cs-titlelayer" data-cs-z="0" data-layout-allow-overflow>
+            <div class="cs-title">
+              <span>CAMERA</span>
+              <span>SHAKE</span>
+            </div>
+          </div>
+          <div class="cs-layer cs-nearlayer" data-cs-z="110" data-layout-allow-overflow>
+            <div class="cs-post" data-layout-allow-overflow></div>
+            <div class="cs-post cs-post-b" data-layout-allow-overflow></div>
+          </div>
+        </div>
+      </div>
+
+      <div id="cs-guide" class="clip" data-start="0" data-duration="6" data-track-index="1">
+        <div class="cs-line cs-v1"></div>
+        <div class="cs-line cs-v2"></div>
+        <div class="cs-line cs-h1"></div>
+        <div class="cs-line cs-h2"></div>
+        <div class="cs-tick cs-tl"></div>
+        <div class="cs-tick cs-tr"></div>
+        <div class="cs-tick cs-bl"></div>
+        <div class="cs-tick cs-br"></div>
+        <div class="cs-reticle"></div>
+        <div id="cs-readout">profile</div>
+      </div>
+    </div>
+
+    <script>
+      /* =====================================================================
+         camera-shake - procedural handheld / Steadicam / rig camera shake.
+
+         PROVENANCE + LICENCE. The nine profiles below are measured PARAMETER
+         VALUES (amplitudes in degrees, frequencies in Hz, three octaves per
+         axis) read off Unity Cinemachine's shipped noise presets. Cinemachine
+         is under the Unity Companion License, which is NOT permissive: no
+         Unity file is vendored, copied or imported here, and none of the code
+         below derives from Unity source. What is reused is the numeric data -
+         facts about how much a camera moves - plus a three-line sampler shape
+         that is standard mathematics (sum of octaves of noise / cosine). The
+         noise function, the screen-space projection, the lens model, the
+         overscan solver and the seek-safe driver are all original.
+
+         DETERMINISM. Every value is a closed-form function of `t`:
+             channel(t) = (valueNoise(freq*t + offset) - 0.5) * amplitude
+             channel(t) = cos((freq*t + offset) * 2PI) * amplitude * 0.5
+         No accumulator, no dt, no clock, no unseeded random. Seeking straight
+         to frame N produces exactly the same state as stepping to frame N.
+         The per-frame work is driven from a PROPERTY SETTER on a tweened
+         driver object - NOT from tl.eventCallback("onUpdate"), which GSAP
+         suppresses on seek() and which would freeze the shake on frame 0.
+         ===================================================================== */
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        var RAD = Math.PI / 180;
+
+        /* ---- the nine profiles ------------------------------------------
+           rot[octave] = [ [ampXdeg, freqHz], [ampY, freq], [ampZ, freq] ]
+           null = the preset has no channel on that axis for that octave.
+           `lens` selects the focal length used for the screen projection.
+
+           The optical truth in this table: wide-angle carries 12 deg on X
+           where telephoto carries 4 deg, because a long lens magnifies
+           angular jitter - amplitude scales inversely with focal length.
+           Keep the 3x ratio; it is the whole reason there are lens variants.
+        ------------------------------------------------------------------ */
+        var CS_PROFILES = {
+          "handheld-normal-mild": {
+            lens: "normal",
+            rot: [
+              [[7, 0.15], [5, 0.1], null],
+              [[4, 0.8], [2, 0.75], null],
+              [[1, 1.2], [0.8, 1.5], null],
+            ],
+          },
+          "handheld-normal-strong": {
+            lens: "normal",
+            rot: [
+              [[10, 0.4], [10, 0.06], null],
+              [[5, 1.44], [3, 0.73], null],
+              [[3, 2.49], [1, 2.0], null],
+            ],
+          },
+          "handheld-normal-extreme": {
+            lens: "normal",
+            rot: [
+              [[15, 0.2], [7, 0.25], null],
+              [[5, 0.9], [3, 1.0], null],
+              [[2, 2.0], null, null],
+            ],
+          },
+          "handheld-wideangle-mild": {
+            lens: "wide",
+            rot: [
+              [[12, 0.15], [5, 0.1], null],
+              [[5, 0.6], [4, 0.45], null],
+              [[1, 1.5], [1, 1.2], null],
+            ],
+          },
+          "handheld-wideangle-strong": {
+            lens: "wide",
+            rot: [
+              [[17.46, 0.5], [5, 0.25], null],
+              [
+                [12.47, 0.94],
+                [4, 0.5],
+                [1, 0.4],
+              ],
+              [[4, 1.2], [2, 1.3], null],
+            ],
+          },
+          "handheld-tele-mild": {
+            lens: "tele",
+            rot: [
+              [[4, 0.2], [2, 0.15], null],
+              [[2, 0.4], [2, 0.5], null],
+              [[1, 0.7], [1, 0.6], null],
+            ],
+          },
+          "handheld-tele-strong": {
+            lens: "tele",
+            rot: [
+              [
+                [6.19, 0.39],
+                [4, 0.15],
+                [1, 0.1],
+              ],
+              [[1.84, 1.75], [0.5, 0.9], null],
+              [[2.3, 2.0], [0.5, 1.4], null],
+            ],
+          },
+          /* 6D Shake also carries POSITION channels (Unity world units, not
+             degrees). Every position channel is a "constant" (cosine) channel
+             except octave-2 Y, which is noise - that asymmetry is in the
+             measured data and is kept. */
+          "rig-6d-shake": {
+            lens: "normal",
+            rot: [
+              [
+                [0.09, 5.83],
+                [0.059, 1.8],
+                [0.017, 2.38],
+              ],
+              [
+                [0.14, 9.17],
+                [0.041, 11.35],
+                [0.009, 10.52],
+              ],
+              [
+                [0.15, 57.17],
+                [0.048, 54.17],
+                [0.016, 63.76],
+              ],
+            ],
+            pos: [
+              [
+                [0.011, 3.2, 1],
+                [0.059, 1.9, 1],
+                [0.021, 3.33, 1],
+              ],
+              [
+                [0.009, 7.7, 1],
+                [0.04, 9.1, 0],
+                [0.009, 9.22, 1],
+              ],
+              [
+                [0.002, 51.51, 1],
+                [0.05, 55.54, 1],
+                [0.017, 58.55, 1],
+              ],
+            ],
+          },
+          "rig-6d-wobble": {
+            lens: "normal",
+            rot: [
+              [
+                [0.987, 5.2],
+                [1.34, 5.39],
+                [2, 2.23],
+              ],
+              [
+                [0.73, 9.17],
+                [0.86, 11.35],
+                [0.51, 8.31],
+              ],
+              [
+                [0.78, 13.52],
+                [0.55, 27.66],
+                [0.28, 18.91],
+              ],
+            ],
+          },
+        };
+
+        /* Lens -> pinhole projection distance, in pixels.
+
+           Two constraints, and they have to be satisfied together:
+           1) SCALE. These amplitudes were authored against a camera with a
+              60 degree VERTICAL field of view, so the "normal" lens must
+              reproduce that framing or every profile comes out roughly twice
+              as violent as intended: D_normal = (H/2) / tan(30deg).
+           2) RATIO. 28 / 50 / 85mm are the standard wide / normal / tele
+              primes; D scales with focal length, so wide:tele is 1:3.04 -
+              the exact reciprocal of the 12deg:4deg amplitude ratio in the
+              profile table. That reciprocal is why all seven handheld presets
+              land within ~15% of the same on-screen displacement while still
+              looking like completely different lenses. */
+        var CS_LENS_MM = { wide: 28, normal: 50, tele: 85 };
+        var CS_REF_VFOV_DEG = 60;
+
+        /* Unity position channels are world units with no pixel equivalent.
+           240 px/unit is AUTHORED (it puts 6D Shake's buzz at a few pixels,
+           which is what an engine-vibration preset should look like). It is
+           the one number here that is not measured. */
+        var CS_UNIT_PX = 240;
+
+        /* Tilting the content plate is a stand-in for rotating the camera, and
+           it degenerates. The plate is a finite rectangle sitting AT the
+           projection distance, so tipping it drives its far corner backwards
+           by (half-diagonal * sin tilt); once that approaches D the corner
+           crosses the eye plane, the projection blows up, and NO amount of
+           overscan covers the frame - increasing the scale only pushes the
+           corner further behind the eye. It bites first on wide lenses, where
+           D is small and the plate is optically enormous.
+
+           So the tilt ceiling is derived, not picked: allow the corner to sink
+           at most a quarter of the way to the eye. 28mm gets ~6.8 deg, 50mm
+           ~12.3 deg, 85mm ~21.2 deg - wide lenses keystone least, which is
+           also what they look like. The FRAMING swing, which is what the
+           measured degrees actually encode, is never clamped: the shot still
+           moves by the full authored amount and only the world's keystone
+           stops growing. */
+        var CS_TILT_DEPTH_BUDGET = 0.25;
+
+        /* ---- deterministic 1-D value noise (original implementation) ------
+           Integer hash -> [0,1), smootherstep interpolation between lattice
+           points. Pure function of (x, seed): no state, no Math.random. */
+        function csHash(i, seed) {
+          var h = Math.imul(i | 0, 374761393) + Math.imul(seed | 0, 668265263);
+          h = (h ^ (h >>> 13)) >>> 0;
+          h = Math.imul(h, 1274126177) >>> 0;
+          return ((h ^ (h >>> 16)) >>> 0) / 4294967296;
+        }
+        function csNoise(x, seed) {
+          var i = Math.floor(x);
+          var f = x - i;
+          var u = f * f * f * (f * (f * 6 - 15) + 10);
+          return csHash(i, seed) * (1 - u) + csHash(i + 1, seed) * u;
+        }
+
+        /* One channel of one octave. `constant` picks the cosine form.
+           Each channel gets its own seed AND its own time offset: sharing
+           offsets correlates the axes and the shake collapses into a diagonal
+           line, which is the classic tell of fake handheld. */
+        function csChannel(amp, freq, t, seed, constant) {
+          var u = freq * t + seed * 7.13;
+          if (constant) return Math.cos(u * 2 * Math.PI) * amp * 0.5;
+          return (csNoise(u, seed) - 0.5) * amp;
+        }
+
+        function csSample(profile, t, intensity, freqScale) {
+          var rot = [0, 0, 0];
+          var pos = [0, 0, 0];
+          var o, a, ch;
+          for (o = 0; o < profile.rot.length; o++) {
+            for (a = 0; a < 3; a++) {
+              ch = profile.rot[o][a];
+              if (!ch) continue;
+              rot[a] += csChannel(ch[0] * intensity, ch[1] * freqScale, t, o * 3 + a, 0);
+            }
+          }
+          if (profile.pos) {
+            for (o = 0; o < profile.pos.length; o++) {
+              for (a = 0; a < 3; a++) {
+                ch = profile.pos[o][a];
+                if (!ch) continue;
+                pos[a] += csChannel(ch[0] * intensity, ch[1] * freqScale, t, 32 + o * 3 + a, ch[2]);
+              }
+            }
+          }
+          return { pitch: rot[0], yaw: rot[1], roll: rot[2], px: pos[0], py: pos[1], pz: pos[2] };
+        }
+
+        /* ---- the public helper ------------------------------------------
+           cameraShake(tl, target, opts)
+             profile   one of the nine ids
+             intensity amplitude multiplier (default 1)
+             frequency frequency multiplier (default 1)
+             rotation  false = translation only (gimbal-stabilised look)
+             duration  seconds of shake (default 6)
+             at        timeline position (default 0)
+             fps       sampling rate for the overscan solve (default 30)
+             overscan  force a scale instead of solving for one
+           Returns { distance, overscan, peakX, peakY, peakRoll }.
+        ------------------------------------------------------------------ */
+        window.cameraShake = function (tl, target, opts) {
+          opts = opts || {};
+          var el = typeof target === "string" ? document.querySelector(target) : target;
+          if (!el) return null;
+
+          var profile = CS_PROFILES[opts.profile] || CS_PROFILES["handheld-normal-mild"];
+          var intensity = opts.intensity === undefined ? 1 : Number(opts.intensity);
+          var freqScale = opts.frequency === undefined ? 1 : Number(opts.frequency);
+          var withRotation = opts.rotation !== false;
+          var dur = opts.duration === undefined ? 6 : Number(opts.duration);
+          var at = opts.at === undefined ? 0 : Number(opts.at);
+          var fps = opts.fps === undefined ? 30 : Number(opts.fps);
+
+          var box = el.getBoundingClientRect();
+          var W = box.width || el.offsetWidth || 1920;
+          var H = box.height || el.offsetHeight || 1080;
+          var D = (H / 2 / Math.tan((CS_REF_VFOV_DEG / 2) * RAD)) * (CS_LENS_MM[profile.lens] / 50);
+
+          // The frame (overflow-hidden parent) carries the lens perspective so
+          // that depth layers inside the rig parallax instead of sliding flat.
+          var frame = el.parentElement;
+          if (frame) frame.style.perspective = D + "px";
+
+          // Depth layers: compensate scale so a layer at z still fills frame.
+          var layers = el.querySelectorAll("[data-cs-z]");
+          for (var i = 0; i < layers.length; i++) {
+            var z = Number(layers[i].getAttribute("data-cs-z")) || 0;
+            layers[i].style.transform = "translateZ(" + z + "px) scale(" + (D - z) / D + ")";
+          }
+
+          var maxTiltDeg =
+            Math.asin(Math.min(0.9, (CS_TILT_DEPTH_BUDGET * D) / Math.sqrt((W * W + H * H) / 4))) /
+            RAD;
+          function clampTilt(deg) {
+            return Math.max(-maxTiltDeg, Math.min(maxTiltDeg, deg));
+          }
+
+          function state(t) {
+            var s = csSample(profile, t, intensity, freqScale);
+            // Pinhole projection: a camera rotation of theta about its nodal
+            // point shifts the projected image by D*tan(theta). That shift and
+            // the plate rotation together ARE the rotation-about-the-nodal-
+            // point decomposition - it is not double counting.
+            var x = -D * Math.tan(s.yaw * RAD) + s.px * CS_UNIT_PX;
+            var y = D * Math.tan(s.pitch * RAD) + s.py * CS_UNIT_PX;
+            return {
+              x: x,
+              y: y,
+              roll: withRotation ? clampTilt(s.roll) : 0,
+              pitch: withRotation ? clampTilt(s.pitch) : 0,
+              yaw: withRotation ? clampTilt(s.yaw) : 0,
+              dolly: 1 + (s.pz * CS_UNIT_PX) / D,
+            };
+          }
+
+          // Overscan. The shake is a closed form, so the scale that keeps the
+          // plate covering the frame is computed per frame and the worst kept.
+          // Per frame, not worst-of-each-axis: peak pitch and peak yaw do not
+          // land on the same frame, and combining their maxima would zoom in
+          // for a frame that never exists. Three terms:
+          //   translation - the plate must reach 2*|offset| further
+          //   roll        - a rolled W x H rect covers W x H at
+          //                 (W cos r + H sin r) / W (and the H twin)
+          //   keystone    - under perspective the edge that tips AWAY shrinks
+          //                 toward the projection centre. The lever arm is NOT
+          //                 the plate half-size: CSS projects about the FRAME's
+          //                 perspective-origin, so a plate that is translated
+          //                 AND tipped swings its far corner about a point
+          //                 |offset| further out. Using (H/2 + |y|) instead of
+          //                 H/2 is what makes this hold on the wide-angle
+          //                 profiles; the earlier H/2 form tore a corner off
+          //                 the frame at 28mm. Verified by DOM hit-test probe
+          //                 across all nine profiles at intensity 1, 2 and 3.
+          var maxX = 0,
+            maxY = 0,
+            maxRoll = 0,
+            overscan = 1;
+          for (var f = 0; f <= Math.ceil(dur * fps); f++) {
+            var st = state(f / fps);
+            maxX = Math.max(maxX, Math.abs(st.x));
+            maxY = Math.max(maxY, Math.abs(st.y));
+            maxRoll = Math.max(maxRoll, Math.abs(st.roll));
+            var rr = Math.abs(st.roll) * RAD;
+            var need =
+              (Math.max(
+                (W * Math.cos(rr) + H * Math.sin(rr)) / W,
+                (H * Math.cos(rr) + W * Math.sin(rr)) / H,
+              ) *
+                Math.max(1 + (2 * Math.abs(st.x)) / W, 1 + (2 * Math.abs(st.y)) / H) *
+                (1 +
+                  ((H / 2 + Math.abs(st.y)) / D) * Math.sin(Math.abs(st.pitch) * RAD) +
+                  ((W / 2 + Math.abs(st.x)) / D) * Math.sin(Math.abs(st.yaw) * RAD))) /
+              Math.max(0.5, st.dolly);
+            overscan = Math.max(overscan, need);
+          }
+          overscan = opts.overscan === undefined ? overscan * 1.02 : Number(opts.overscan);
+
+          function apply(t) {
+            var s = state(t);
+            gsap.set(el, {
+              x: s.x,
+              y: s.y,
+              rotation: s.roll,
+              rotationX: s.pitch,
+              rotationY: -s.yaw,
+              scale: overscan * s.dolly,
+            });
+          }
+
+          // Seek-safe driver: GSAP writes `t` on every render, including
+          // seek(), so the setter runs on every frame. An onUpdate callback
+          // would NOT - GSAP suppresses events on seek and the shake would
+          // freeze on frame 0.
+          var driver = {};
+          var value = 0;
+          Object.defineProperty(driver, "t", {
+            get: function () {
+              return value;
+            },
+            set: function (next) {
+              value = next;
+              apply(next);
+            },
+          });
+          apply(0);
+          tl.to(driver, { t: dur, duration: dur, ease: "none" }, at);
+
+          return {
+            distance: D,
+            overscan: overscan,
+            peakX: maxX,
+            peakY: maxY,
+            peakRoll: maxRoll,
+          };
+        };
+
+        /* ---- self-preview (not part of the snippet) ----------------------- */
+        var vars =
+          window.__hyperframes && window.__hyperframes.getVariables
+            ? window.__hyperframes.getVariables()
+            : {};
+        var PROFILE = vars.shakeProfile || "handheld-normal-mild";
+        var INTENSITY = vars.shakeIntensity === undefined ? 1 : Number(vars.shakeIntensity);
+        var FREQUENCY = vars.shakeFrequency === undefined ? 1 : Number(vars.shakeFrequency);
+        var ROTATION = !(vars.shakeRotation === false || vars.shakeRotation === "false");
+
+        var tl = gsap.timeline({ paused: true });
+        var info = window.cameraShake(tl, "#cs-rig", {
+          profile: PROFILE,
+          intensity: INTENSITY,
+          frequency: FREQUENCY,
+          rotation: ROTATION,
+          duration: 6,
+          fps: 30,
+        });
+        var readout = document.getElementById("cs-readout");
+        if (readout && info) {
+          readout.textContent =
+            PROFILE +
+            "  |  " +
+            CS_LENS_MM[(CS_PROFILES[PROFILE] || CS_PROFILES["handheld-normal-mild"]).lens] +
+            "mm  |  x" +
+            INTENSITY +
+            " amp  x" +
+            FREQUENCY +
+            " freq  |  rot " +
+            (ROTATION ? "on" : "off") +
+            "  |  overscan " +
+            info.overscan.toFixed(3);
+        }
+        window.__timelines["camera-shake"] = tl;
+      })();
+    </script>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add camera-shake" />
+
+That writes one file: `compositions/components/camera-shake.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/camera-shake.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `camera` `shake` `handheld` `effect` `cinematic`.
+
+## 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/components/caption-blend-difference.mdx b/docs/catalog/components/caption-blend-difference.mdx
index 91ef41d36d..ac17835bb8 100644
--- a/docs/catalog/components/caption-blend-difference.mdx
+++ b/docs/catalog/components/caption-blend-difference.mdx
@@ -3,23 +3,111 @@ title: "Blend Difference"
 description: "Auto-inverting text using mix-blend-mode: difference — flips between white and black per-pixel against the background"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-blend-difference.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-blend-difference.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/components/caption-blend-difference.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Blend Difference preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add caption-blend-difference
-```
+<InstallCommand command="npx hyperframes add caption-blend-difference" />
 
 That writes one file: `compositions/components/caption-blend-difference.html`.
 
-## Paste it into your composition
+## Source
+
+<Accordion title={`caption-blend-difference.html`}>
+
+```html
+<!--
+  Blend Difference — auto-inverting captions via mix-blend-mode.
+
+  Text color inverts per-pixel against whatever is behind it:
+  white stays white on dark areas, flips to black on light areas.
+  On color video, white inverts to the complement (blue → orange,
+  red → cyan, green → magenta).
+
+  Setup:
+  1. The composition root (or a shared ancestor of both the video
+     and the caption layer) MUST have `isolation: isolate` so the
+     blend operates against sibling content, not the page background.
+  2. Add class="blend-difference" to any caption container.
+  3. Set caption text color to white. The blend mode handles the rest.
+
+  Works on any element — divs, spans, SVG text, even images.
+
+  Customize:
+  - --blend-caption-color: base text color (default white)
+  - Change blend mode via --blend-mode to 'exclusion' for a softer effect
+
+  Variants:
+  - .blend-difference         → standard per-pixel inversion
+  - .blend-difference-soft    → exclusion mode, less harsh contrast
+  - .blend-difference-screen  → text glows on dark, fades on light
+-->
+
+<style>
+  .blend-difference {
+    mix-blend-mode: var(--blend-mode, difference);
+    color: var(--blend-caption-color, white);
+    pointer-events: none;
+  }
+
+  .blend-difference-soft {
+    mix-blend-mode: exclusion;
+    color: var(--blend-caption-color, white);
+    pointer-events: none;
+  }
+
+  .blend-difference-screen {
+    mix-blend-mode: screen;
+    color: var(--blend-caption-color, white);
+    pointer-events: none;
+  }
+</style>
+
+<!--
+  Composition setup example:
+
+  <div data-composition-id="root" ... style="isolation: isolate;">
+
+    <video id="bg" data-start="0" data-duration="30" data-track-index="0"
+           src="video.mp4" muted playsinline></video>
+
+    <div class="clip blend-difference" data-start="0" data-duration="5" data-track-index="1"
+         style="position: absolute; inset: 0; z-index: 10;
+                display: flex; align-items: center; justify-content: center;">
+      <span style="font-size: 120px; font-weight: 800; text-transform: uppercase;">
+        YOUR CAPTION
+      </span>
+    </div>
+  </div>
+
+
+  Timeline integration — animate captions normally, blend mode is passive:
+
+  tl.from(".caption", {
+    y: 50, opacity: 0, duration: 0.6, ease: "expo.out"
+  }, 0.2);
+
+
+  Notes:
+  - isolation: isolate on the composition root is REQUIRED.
+    Without it, blend mode composes against the page background
+    (usually white or black) and you get no inversion.
+  - Works with any GSAP animation — the blend composites every frame.
+  - For caption containers with multiple text elements, apply the
+    class to the shared parent, not each text element individually.
+  - On pure black backgrounds, white text stays white (difference
+    of white and black = white). The effect is most visible when
+    the background has varied luminance or color.
+-->
+```
+
+</Accordion>
 
-Open `compositions/components/caption-blend-difference.html` and copy what is inside into your own composition.
-The file opens with a comment header that walks you through it.
+## Usage
 
-A component has no size or duration of its own. It takes both from the composition
-you paste it into.
+Open `compositions/components/caption-blend-difference.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/components/caption-camera-follow.mdx b/docs/catalog/components/caption-camera-follow.mdx
new file mode 100644
index 0000000000..8375a2fbd5
--- /dev/null
+++ b/docs/catalog/components/caption-camera-follow.mdx
@@ -0,0 +1,473 @@
+---
+title: "Camera Follow Captions"
+description: "One sentence written across a world far larger than the frame. Each word is sized against everything already written, so the block grows geometrically and the camera pulls back at a steady rate to keep landing the new word at the same size. Old words stay lit and simply become small."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/caption-camera-follow.html"
+  compositionId="caption-camera-follow"
+  compositionSrc="compositions/components/caption-camera-follow.html"
+  variables={[{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Colour of the highlighted words. gold is the original.","default":"gold","options":[{"value":"gold","label":"Gold"},{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"framing","type":"enum","role":"style","label":"Framing","description":"Air the camera leaves around the written block, so the words land larger or smaller in frame.","default":"standard","options":[{"value":"tight","label":"Tight"},{"value":"standard","label":"Standard"},{"value":"wide","label":"Wide"}]},{"id":"smear","type":"enum","role":"style","label":"Smear","description":"Scales the radial motion blur each camera move carries, from none to a heavy streak.","default":"standard","options":[{"value":"off","label":"Off"},{"value":"subtle","label":"Subtle"},{"value":"standard","label":"Standard"},{"value":"heavy","label":"Heavy"}]}]}
+>
+
+```html caption-camera-follow.html
+<!doctype html>
+<!--
+  caption-camera-follow: the words do not move, the camera does.
+
+  One sentence. Layout is self similar: every new word is sized as a fraction of the
+  bounding box of everything written so far, and is dropped either to the right of that
+  box or onto a new line below it, alternating. Because each word is measured against a
+  box that keeps growing, the box grows geometrically, so the camera pulls back at a
+  steady exponential rate and every word arrives at roughly the same size on screen. Old
+  words stay lit and simply become small, piling up toward the top left the way
+  handwriting fills a page. The last beat carries the same pull back all the way out
+  until the whole sentence is readable at once.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and applies it before the timeline is built.
+  Duration, word order and cadence are untouched by them.
+
+    - accent (gold | green | blue | violet, default gold): the colour of the
+      highlighted words.
+    - framing (tight | standard | wide, default standard): the air the camera
+      leaves around the written block. tight lands each word larger in frame,
+      wide sits further back. Every move and the closing pull back scale
+      together, so the shot stays one continuous camera.
+    - smear (off | subtle | standard | heavy, default standard): scales the
+      radial motion blur each move carries. off renders every frame sharp.
+
+  On every default the result is identical to the original: gold highlights, a
+  1.36 margin around the block and a peak smear of 2.6 percent of frame width.
+
+  Every ease is a cubic bezier written out by hand and solved in this file. No preset is
+  used anywhere. Motion blur is radial, the way it reads in real camera footage: each word
+  carries its own blur share, scaled by how far that word sits from the centre of the move,
+  so the frame smears outward from the point the camera is pushing toward. One shared
+  amount variable is tweened per move and every word multiplies it by its own distance
+  share, so the whole radial pulse costs one tween instead of fourteen.
+
+  Mount contract: everything lives inside <template>, styles and scripts included, and the
+  scripts sit INSIDE the composition root. A host clones template content into its own
+  mount and only runs scripts found inside the root; markup left outside is copied without
+  its behaviour, which renders a black card with no timeline at all.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Camera Follow Captions</title>
+  </head>
+  <body>
+    <template>
+      <div
+        id="root"
+        class="clip cf-root"
+        data-composition-id="caption-camera-follow"
+        data-duration="9"
+        data-fps="30"
+        data-composition-variables='[
+          { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Colour of the highlighted words. gold is the original.", "default": "gold", "options": [{ "value": "gold", "label": "Gold" }, { "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+          { "id": "framing", "type": "enum", "role": "style", "label": "Framing", "description": "Air the camera leaves around the written block, so the words land larger or smaller in frame.", "default": "standard", "options": [{ "value": "tight", "label": "Tight" }, { "value": "standard", "label": "Standard" }, { "value": "wide", "label": "Wide" }] },
+          { "id": "smear", "type": "enum", "role": "style", "label": "Smear", "description": "Scales the radial motion blur each camera move carries, from none to a heavy streak.", "default": "standard", "options": [{ "value": "off", "label": "Off" }, { "value": "subtle", "label": "Subtle" }, { "value": "standard", "label": "Standard" }, { "value": "heavy", "label": "Heavy" }] }
+        ]'
+      >
+        <style>
+          [data-composition-id="caption-camera-follow"] {
+            --cf-accent: #ffd84d;
+            --ink: #ffffff;
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            background: transparent;
+            pointer-events: none;
+          }
+          #cf-stage {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+          }
+          #cf-world {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 0;
+            height: 0;
+            --amt: 0px;
+          }
+          .cf-word {
+            position: absolute;
+            white-space: nowrap;
+            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+            font-weight: 700;
+            text-transform: uppercase;
+            letter-spacing: 0.005em;
+            line-height: 0.78;
+            color: var(--ink);
+            opacity: 0;
+            --k: 0;
+            filter: blur(calc(var(--k) * var(--amt)));
+          }
+          .cf-word.is-accent {
+            color: var(--cf-accent);
+          }
+          #cf-vignette {
+            position: absolute;
+            inset: 0;
+            background: radial-gradient(
+              ellipse at 50% 50%,
+              rgba(0, 0, 0, 0) 42%,
+              rgba(0, 0, 0, 0.55) 100%
+            );
+          }
+        </style>
+
+        <div id="cf-stage">
+          <div id="cf-world"></div>
+        </div>
+        <div id="cf-vignette"></div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            gsap.defaults({ immediateRender: false });
+
+            /* Cubic bezier solver. Newton first, bisection as the fallback, so it is
+               exact and deterministic for every input. */
+            function bezier(x1, y1, x2, y2) {
+              function curve(t, a1, a2) {
+                var A = 1 - 3 * a2 + 3 * a1;
+                var B = 3 * a2 - 6 * a1;
+                var C = 3 * a1;
+                return ((A * t + B) * t + C) * t;
+              }
+              function slope(t, a1, a2) {
+                var A = 1 - 3 * a2 + 3 * a1;
+                var B = 3 * a2 - 6 * a1;
+                var C = 3 * a1;
+                return (3 * A * t + 2 * B) * t + C;
+              }
+              return function (p) {
+                if (p <= 0) return 0;
+                if (p >= 1) return 1;
+                var t = p;
+                for (var i = 0; i < 8; i++) {
+                  var d = slope(t, x1, x2);
+                  if (Math.abs(d) < 1e-6) break;
+                  var e = curve(t, x1, x2) - p;
+                  if (Math.abs(e) < 1e-7) return curve(t, y1, y2);
+                  t -= e / d;
+                }
+                var lo = 0;
+                var hi = 1;
+                t = p;
+                for (var j = 0; j < 24; j++) {
+                  var x = curve(t, x1, x2);
+                  if (Math.abs(x - p) < 1e-7) break;
+                  if (x > p) hi = t;
+                  else lo = t;
+                  t = (lo + hi) / 2;
+                }
+                return curve(t, y1, y2);
+              };
+            }
+
+            /* Leaves the mark fast, spends most of its time arriving. */
+            var EASE_STEP = bezier(0.31, 0, 0.11, 1);
+            /* The closing pull back: slower to leave, glides a long way out. */
+            var EASE_WIDE = bezier(0.42, 0, 0.14, 1);
+            /* Word ink coming up. */
+            var EASE_INK = bezier(0.2, 0.7, 0.3, 1);
+            /* Blur rising into the move and wiped off out of it. */
+            var EASE_BLUR_UP = bezier(0.2, 0.8, 0.4, 1);
+            var EASE_BLUR_DOWN = bezier(0.5, 0, 0.2, 1);
+
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            /* Unrecognised overrides return to their declared defaults. */
+            function pick(table, value, fallback) {
+              return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+            }
+
+            var ACCENTS = {
+              gold: "#ffd84d",
+              green: "#34d399",
+              blue: "#38bdf8",
+              violet: "#a78bfa",
+            };
+            /* Framing scales the margin every camera pose is fitted with, so one
+               number moves the whole shot in or out without touching cadence. */
+            var FRAMINGS = { tight: 0.82, standard: 1, wide: 1.25 };
+            var SMEARS = { off: 0, subtle: 0.5, standard: 1, heavy: 1.9 };
+
+            var ACCENT = ACCENTS[pick(ACCENTS, vars.accent, "gold")];
+            var FRAMING = FRAMINGS[pick(FRAMINGS, vars.framing, "standard")];
+            var SMEAR = SMEARS[pick(SMEARS, vars.smear, "standard")];
+
+            var DUR = 9;
+            var STEP = 0.52;
+            var MOVE = 0.4;
+
+            var WORDS = [
+              { text: "write" },
+              { text: "the" },
+              { text: "html", accent: true },
+              { text: "and" },
+              { text: "the" },
+              { text: "video", accent: true },
+              { text: "renders" },
+              { text: "itself" },
+              { text: "no" },
+              { text: "timeline" },
+              { text: "no" },
+              { text: "keyframes", accent: true },
+              { text: "just" },
+              { text: "code", accent: true },
+            ];
+
+            var world = document.getElementById("cf-world");
+            var stage = document.getElementById("cf-stage");
+            /* The runtime strips the root id on clone, so reach the root through a
+               descendant instead of getElementById. */
+            var root = stage.parentElement;
+            var FRAME_W = root.clientWidth || 1080;
+            var FRAME_H = root.clientHeight || 1920;
+            root.style.setProperty("--cf-accent", ACCENT);
+
+            /* Base size is picked so the opening shot sits near 1:1. Everything after it
+               is a pull back, so the world is only ever scaled down and type stays crisp. */
+            var BASE = Math.max(FRAME_W, FRAME_H) * 0.16;
+            /* Each new word is this fraction of the current box height. */
+            var RATIO = 0.72;
+            var MARGIN = 1.36 * FRAMING;
+
+            var ruler = document.createElement("div");
+            ruler.style.cssText =
+              "position:absolute;left:-99999px;top:0;white-space:nowrap;visibility:hidden;" +
+              'font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;' +
+              "text-transform:uppercase;letter-spacing:0.005em;line-height:0.78";
+            world.appendChild(ruler);
+
+            var box = null;
+            WORDS.forEach(function (wd, i) {
+              var fs = i === 0 ? BASE : (box.y1 - box.y0) * RATIO;
+              ruler.style.fontSize = fs + "px";
+              ruler.textContent = wd.text;
+              var w = ruler.getBoundingClientRect().width;
+              var h = fs * 0.78;
+              var gap = fs * 0.07;
+
+              var x, y;
+              if (i === 0) {
+                x = 0;
+                y = 0;
+              } else if ((box.x1 - box.x0) / (box.y1 - box.y0) < FRAME_W / FRAME_H) {
+                /* block is narrower than the frame, so grow sideways: to the right of
+                   everything, sitting on the same baseline */
+                x = box.x1 + gap;
+                y = box.y1 - h;
+              } else {
+                /* block is already wide enough, so grow downward: onto a new line under
+                   everything, left edges aligned */
+                x = box.x0;
+                y = box.y1 + gap;
+              }
+
+              wd.fs = fs;
+              wd.x = x;
+              wd.y = y;
+
+              box = box
+                ? {
+                    x0: Math.min(box.x0, x),
+                    y0: Math.min(box.y0, y),
+                    x1: Math.max(box.x1, x + w),
+                    y1: Math.max(box.y1, y + h),
+                  }
+                : { x0: x, y0: y, x1: x + w, y1: y + h };
+              wd.box = { x0: box.x0, y0: box.y0, x1: box.x1, y1: box.y1 };
+            });
+            world.removeChild(ruler);
+
+            var FULL = box;
+
+            function poseFor(b, margin) {
+              var bw = (b.x1 - b.x0) * margin;
+              var bh = (b.y1 - b.y0) * margin;
+              var s = Math.min(FRAME_W / bw, FRAME_H / bh);
+              return {
+                x: FRAME_W / 2 - (s * (b.x0 + b.x1)) / 2,
+                y: FRAME_H / 2 - (s * (b.y0 + b.y1)) / 2,
+                scale: s,
+              };
+            }
+
+            var els = WORDS.map(function (wd) {
+              var el = document.createElement("div");
+              el.className = "cf-word" + (wd.accent ? " is-accent" : "");
+              el.textContent = wd.text;
+              el.style.left = wd.x + "px";
+              el.style.top = wd.y + "px";
+              el.style.fontSize = wd.fs + "px";
+              world.appendChild(el);
+              return el;
+            });
+
+            /* Re-derive every framing box from what the browser actually laid out, so
+               the camera is fitted to real ink and never to arithmetic that drifted. */
+            var run = null;
+            els.forEach(function (el, i) {
+              var r = {
+                x0: el.offsetLeft,
+                y0: el.offsetTop,
+                x1: el.offsetLeft + el.offsetWidth,
+                y1: el.offsetTop + el.offsetHeight,
+              };
+              run = run
+                ? {
+                    x0: Math.min(run.x0, r.x0),
+                    y0: Math.min(run.y0, r.y0),
+                    x1: Math.max(run.x1, r.x1),
+                    y1: Math.max(run.y1, r.y1),
+                  }
+                : r;
+              WORDS[i].box = { x0: run.x0, y0: run.y0, x1: run.x1, y1: run.y1 };
+            });
+            FULL = run;
+
+            /* Rest state is pinned outside the timeline. */
+            var first = poseFor(WORDS[0].box, MARGIN);
+            gsap.set(world, {
+              transformOrigin: "0 0",
+              x: first.x,
+              y: first.y,
+              scale: first.scale,
+            });
+            gsap.set(els, { opacity: 0, "--k": 0 });
+            gsap.set(world, { "--amt": "0px" });
+            /* The first word is already on the page when the shot opens, so frame zero
+               is never empty. */
+            gsap.set(els[0], { opacity: 1 });
+
+            var tl = gsap.timeline({ paused: true });
+            /* Peak smear at the rim of the frame, in screen pixels. */
+            var BLUR = FRAME_W * 0.026 * SMEAR;
+            var HALF_DIAG = Math.sqrt(FRAME_W * FRAME_W + FRAME_H * FRAME_H) / 2;
+
+            /* Radial blur, the way a real zoom smears: a point far from the centre of
+               the move sweeps across more of the frame than one sitting on it, so it
+               streaks more. Each word gets its own share, --k, of one shared amount,
+               --amt, which is the only thing that animates. The share is fixed for the
+               length of a move and set with the camera, so this stays one tween per
+               move rather than one per word per move. --amt is authored in world units,
+               because a filter on a scaled child is applied before the scale, so the
+               screen blur has to be divided back out by the camera scale. */
+            function smear(centre, scale, count, at, up, down, peak) {
+              for (var j = 0; j < count; j++) {
+                var el = els[j];
+                var cx = el.offsetLeft + el.offsetWidth / 2;
+                var cy = el.offsetTop + el.offsetHeight / 2;
+                var d =
+                  (scale *
+                    Math.sqrt(
+                      (cx - centre.x) * (cx - centre.x) + (cy - centre.y) * (cy - centre.y),
+                    )) /
+                  HALF_DIAG;
+                tl.set(el, { "--k": (0.2 + 1.15 * Math.min(1, d)).toFixed(3) }, at);
+              }
+              var amt = peak / scale;
+              tl.fromTo(
+                world,
+                { "--amt": "0px" },
+                { "--amt": amt + "px", duration: up, ease: EASE_BLUR_UP },
+                at,
+              );
+              tl.to(world, { "--amt": "0px", duration: down, ease: EASE_BLUR_DOWN }, at + up);
+            }
+
+            WORDS.forEach(function (wd, i) {
+              var t = i * STEP;
+              if (i === 0) return;
+
+              tl.fromTo(els[i], { opacity: 0 }, { opacity: 1, duration: 0.16, ease: EASE_INK }, t);
+
+              var p = poseFor(wd.box, MARGIN);
+              tl.to(world, { x: p.x, y: p.y, scale: p.scale, duration: MOVE, ease: EASE_STEP }, t);
+
+              smear(
+                { x: (wd.box.x0 + wd.box.x1) / 2, y: (wd.box.y0 + wd.box.y1) / 2 },
+                p.scale,
+                i + 1,
+                t,
+                MOVE * 0.24,
+                MOVE * 0.44,
+                BLUR,
+              );
+            });
+
+            /* The resolve: the same pull back, carried all the way out. */
+            var wide = poseFor(FULL, 1.2 * FRAMING);
+            var wideAt = (WORDS.length - 1) * STEP + 0.62;
+            tl.to(
+              world,
+              {
+                x: wide.x,
+                y: wide.y,
+                scale: wide.scale,
+                duration: 0.94,
+                ease: EASE_WIDE,
+              },
+              wideAt,
+            );
+            smear(
+              { x: (FULL.x0 + FULL.x1) / 2, y: (FULL.y0 + FULL.y1) / 2 },
+              wide.scale,
+              els.length,
+              wideAt,
+              0.3,
+              0.58,
+              BLUR * 0.8,
+            );
+
+            tl.set({}, {}, DUR);
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines["caption-camera-follow"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add caption-camera-follow" />
+
+That writes one file: `compositions/components/caption-camera-follow.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/caption-camera-follow.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `captions` `caption-style` `camera` `typography` `motion-primitive` `portrait`.
+
+## 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/components/caption-clip-wipe.mdx b/docs/catalog/components/caption-clip-wipe.mdx
index d170381921..899362394e 100644
--- a/docs/catalog/components/caption-clip-wipe.mdx
+++ b/docs/catalog/components/caption-clip-wipe.mdx
@@ -3,22 +3,254 @@ title: "Clip Wipe"
 description: "Left-to-right clip-path wipe reveal per word"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-clip-wipe.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-clip-wipe.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/components/caption-clip-wipe.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Clip Wipe preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add caption-clip-wipe
-```
+<InstallCommand command="npx hyperframes add caption-clip-wipe" />
 
 That writes one file: `compositions/components/caption-clip-wipe.html`.
 
-## Paste it into your composition
+## Source
+
+<Accordion title={`caption-clip-wipe.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Clip Wipe</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:wght@800&display=swap"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: transparent;
+      }
+      #clip-wipe {
+        pointer-events: none;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent;
+      }
+      .wp-overlay {
+        position: absolute;
+        inset: 0;
+        background: transparent;
+        z-index: 1;
+        pointer-events: none;
+      }
+      #wp-container {
+        position: absolute;
+        inset: 0;
+        z-index: 10;
+        pointer-events: none;
+      }
+      .wp-group {
+        position: absolute;
+        bottom: 120px;
+        left: 0;
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: flex-end;
+        justify-content: center;
+        gap: 24px;
+        padding: 0 100px;
+        visibility: hidden;
+      }
+      .wp-word {
+        font-family: "Poppins", sans-serif;
+        font-weight: 800;
+        font-size: 88px;
+        text-transform: uppercase;
+        color: #ffffff;
+        display: inline-block;
+        letter-spacing: 0.04em;
+        line-height: 1;
+        clip-path: inset(0 100% 0 0);
+        will-change: clip-path, color, opacity;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="clip-wipe"
+      data-composition-id="caption-clip-wipe"
+      data-timeline-locked
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="wp-overlay"></div>
+      <div id="wp-container"></div>
+    </div>
+
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        var _fitCanvas = document.createElement("canvas");
+        var _fitCtx = _fitCanvas.getContext("2d");
+        function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {
+          var size = baseFontSize;
+          var minSize = Math.floor(baseFontSize * 0.45);
+          while (size > minSize) {
+            _fitCtx.font = fontWeight + " " + size + "px " + fontFamily;
+            if (_fitCtx.measureText(text).width <= maxWidth) return size;
+            size -= 2;
+          }
+          return minSize;
+        }
+
+        var WORDS = [
+          { text: "Every", start: 0.0, end: 0.3 },
+          { text: "great", start: 0.3, end: 0.55 },
+          { text: "video", start: 0.55, end: 0.85 },
+          { text: "starts", start: 0.85, end: 1.1 },
+          { text: "with", start: 1.1, end: 1.25 },
+          { text: "a", start: 1.25, end: 1.35 },
+          { text: "single", start: 1.35, end: 1.65 },
+          { text: "frame.", start: 1.65, end: 2.0 },
+          { text: "HyperFrames", start: 2.1, end: 2.65 },
+          { text: "lets", start: 2.65, end: 2.85 },
+          { text: "you", start: 2.85, end: 2.95 },
+          { text: "write", start: 2.95, end: 3.15 },
+          { text: "HTML", start: 3.15, end: 3.55 },
+          { text: "and", start: 3.55, end: 3.65 },
+          { text: "render", start: 3.65, end: 3.95 },
+          { text: "professional", start: 3.95, end: 4.45 },
+          { text: "video.", start: 4.45, end: 4.8 },
+          { text: "No", start: 4.9, end: 5.05 },
+          { text: "timeline.", start: 5.05, end: 5.45 },
+          { text: "No", start: 5.5, end: 5.65 },
+          { text: "drag", start: 5.65, end: 5.85 },
+          { text: "and", start: 5.85, end: 5.95 },
+          { text: "drop.", start: 5.95, end: 6.25 },
+          { text: "Just", start: 6.35, end: 6.55 },
+          { text: "code", start: 6.55, end: 6.8 },
+          { text: "that", start: 6.8, end: 6.95 },
+          { text: "becomes", start: 6.95, end: 7.3 },
+          { text: "cinema.", start: 7.3, end: 7.7 },
+        ];
+
+        var KEYWORDS = new Set([8, 12, 15, 24, 27]); // HyperFrames, HTML, professional, code, cinema.
+
+        var RAW_GROUPS = [
+          [0, 3],
+          [4, 7],
+          [8, 8],
+          [9, 12],
+          [13, 15],
+          [16, 16],
+          [17, 19],
+          [20, 22],
+          [23, 24],
+          [25, 27],
+        ];
+        var GROUPS = RAW_GROUPS.map(function (pair, gi) {
+          var ws = pair[0],
+            we = pair[1];
+          var nextStart = gi + 1 < RAW_GROUPS.length ? WORDS[RAW_GROUPS[gi + 1][0]].start : 8.0;
+          var gEnd = Math.min(WORDS[we].end + 0.5, nextStart - 0.05);
+          return { wordStart: ws, wordEnd: we, start: WORDS[ws].start, end: gEnd };
+        });
+
+        var container = document.getElementById("wp-container");
+        var tl = gsap.timeline({ paused: true });
+
+        GROUPS.forEach(function (g, gi) {
+          var groupWords = WORDS.slice(g.wordStart, g.wordEnd + 1);
+          var grp = document.createElement("div");
+          grp.className = "wp-group";
+          grp.id = "wp-grp-" + gi;
+
+          var groupText = groupWords
+            .map(function (w) {
+              return w.text.toUpperCase();
+            })
+            .join(" ");
+          var computedSize = fitFontSize(groupText, 88, "800", "Poppins", 1720);
+
+          groupWords.forEach(function (w, i) {
+            var wi = g.wordStart + i;
+            var span = document.createElement("span");
+            span.className = "wp-word";
+            span.id = "wp-w-" + wi;
+            span.textContent = w.text.toUpperCase();
+            span.style.fontSize = computedSize + "px";
+            grp.appendChild(span);
+          });
+
+          container.appendChild(grp);
+
+          tl.set(grp, { visibility: "visible" }, g.start);
+
+          groupWords.forEach(function (w, i) {
+            var wi = g.wordStart + i;
+            var wordEl = document.getElementById("wp-w-" + wi);
+            var isKW = KEYWORDS.has(wi);
+
+            tl.to(
+              wordEl,
+              { clipPath: "inset(0 0% 0 0)", duration: 0.3, ease: "power2.out" },
+              w.start,
+            );
+            if (isKW) {
+              tl.to(wordEl, { color: "#FFD700", duration: 0.05 }, w.start + 0.1);
+            }
+            tl.to(wordEl, { color: "rgba(255,255,255,0.4)", duration: 0.2 }, w.end);
+          });
+
+          var wordEls = grp.querySelectorAll(".wp-word");
+          tl.to(
+            wordEls,
+            {
+              clipPath: "inset(0 0% 0 100%)",
+              duration: 0.25,
+              stagger: 0.04,
+              ease: "power2.in",
+            },
+            g.end - 0.2,
+          );
+          tl.set(grp, { visibility: "hidden", opacity: 0 }, g.end);
+        });
+
+        tl.seek(0);
+        window.__timelines["caption-clip-wipe"] = tl;
+      })();
+    </script>
+  </body>
+</html>
+```
+
+</Accordion>
 
-Open `compositions/components/caption-clip-wipe.html` and copy what is inside into your own composition.
+## Usage
 
-A component has no size or duration of its own. It takes both from the composition
-you paste it into.
+Open `compositions/components/caption-clip-wipe.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/components/caption-editorial-emphasis.mdx b/docs/catalog/components/caption-editorial-emphasis.mdx
index b2111c041a..108551e9c6 100644
--- a/docs/catalog/components/caption-editorial-emphasis.mdx
+++ b/docs/catalog/components/caption-editorial-emphasis.mdx
@@ -3,22 +3,440 @@ title: "Editorial Emphasis"
 description: "Dual-font system with dramatic size contrast for emphasis words"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-editorial-emphasis.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-editorial-emphasis.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/components/caption-editorial-emphasis.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Editorial Emphasis preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add caption-editorial-emphasis
-```
+<InstallCommand command="npx hyperframes add caption-editorial-emphasis" />
 
 That writes one file: `compositions/components/caption-editorial-emphasis.html`.
 
-## Paste it into your composition
+## Source
+
+<Accordion title={`caption-editorial-emphasis.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Editorial Emphasis</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400&family=Playfair+Display:ital,wght@0,800;1,800&display=swap"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: transparent;
+        font-family: "Inter", sans-serif;
+      }
+
+      #editorial-emphasis {
+        pointer-events: none;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent;
+      }
+
+      .caption-layer {
+        position: absolute;
+        inset: 0;
+        z-index: 20;
+        pointer-events: none;
+        transform: translateZ(0);
+      }
+
+      .safe-zone {
+        position: absolute;
+        top: 580px;
+        left: 60px;
+        width: 1800px;
+        height: 430px;
+        display: flex;
+        align-items: flex-start;
+        justify-content: flex-start;
+      }
+
+      .caption-block {
+        position: absolute;
+        left: 0;
+        top: 0;
+        opacity: 0;
+        transform-origin: 0% 0%;
+        will-change: transform, opacity;
+        backface-visibility: hidden;
+      }
+
+      .caption-line {
+        display: flex;
+        align-items: baseline;
+        gap: 14px;
+        line-height: 1.1;
+        white-space: nowrap;
+      }
+
+      .caption-line + .caption-line {
+        margin-top: 8px;
+      }
+
+      .word {
+        display: inline-block;
+        color: #f5f0d0;
+        text-shadow:
+          0 2px 12px rgba(0, 0, 0, 0.6),
+          0 4px 24px rgba(0, 0, 0, 0.35);
+        will-change: transform, opacity;
+        backface-visibility: hidden;
+      }
+
+      .word--normal {
+        font-family: "Inter", sans-serif;
+        font-size: 86px;
+        font-weight: 400;
+        font-style: normal;
+      }
+
+      .word--italic {
+        font-family: "Inter", sans-serif;
+        font-size: 86px;
+        font-weight: 400;
+        font-style: italic;
+      }
+
+      .word--emphasis {
+        font-family: "Playfair Display", serif;
+        font-size: 180px;
+        font-weight: 800;
+        font-style: italic;
+        line-height: 0.9;
+        color: #f5f0d0;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="editorial-emphasis"
+      data-composition-id="caption-editorial-emphasis"
+      data-timeline-locked
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="caption-layer" aria-hidden="true">
+        <div id="caption-stage" class="safe-zone"></div>
+      </div>
+    </div>
+
+    <script>
+      var DURATION = 8;
+      var SAFE_WIDTH = 1800;
+      var ENTRY_DUR = 0.1;
+      var SLIDE_DUR = 0.2;
+
+      var _fitCanvas = document.createElement("canvas");
+      var _fitCtx = _fitCanvas.getContext("2d");
+      function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {
+        var size = baseFontSize;
+        var minSize = Math.floor(baseFontSize * 0.45);
+        while (size > minSize) {
+          _fitCtx.font = fontWeight + " " + size + "px " + fontFamily;
+          if (_fitCtx.measureText(text).width <= maxWidth) return size;
+          size -= 2;
+        }
+        return minSize;
+      }
+
+      // Generic transcript words
+      var W = [
+        { text: "Every", start: 0.0, end: 0.3 },
+        { text: "great", start: 0.3, end: 0.55 },
+        { text: "video", start: 0.55, end: 0.85 },
+        { text: "starts", start: 0.85, end: 1.1 },
+        { text: "with", start: 1.1, end: 1.25 },
+        { text: "a", start: 1.25, end: 1.35 },
+        { text: "single", start: 1.35, end: 1.65 },
+        { text: "frame.", start: 1.65, end: 2.0 },
+        { text: "HyperFrames", start: 2.1, end: 2.65 },
+        { text: "lets", start: 2.65, end: 2.85 },
+        { text: "you", start: 2.85, end: 2.95 },
+        { text: "write", start: 2.95, end: 3.15 },
+        { text: "HTML", start: 3.15, end: 3.55 },
+        { text: "and", start: 3.55, end: 3.65 },
+        { text: "render", start: 3.65, end: 3.95 },
+        { text: "professional", start: 3.95, end: 4.45 },
+        { text: "video.", start: 4.45, end: 4.8 },
+        { text: "No", start: 4.9, end: 5.05 },
+        { text: "timeline.", start: 5.05, end: 5.45 },
+        { text: "No", start: 5.5, end: 5.65 },
+        { text: "drag", start: 5.65, end: 5.85 },
+        { text: "and", start: 5.85, end: 5.95 },
+        { text: "drop.", start: 5.95, end: 6.25 },
+        { text: "Just", start: 6.35, end: 6.55 },
+        { text: "code", start: 6.55, end: 6.8 },
+        { text: "that", start: 6.8, end: 6.95 },
+        { text: "becomes", start: 6.95, end: 7.3 },
+        { text: "cinema.", start: 7.3, end: 7.7 },
+      ];
+
+      // Block layout: [wordIndex, type] — n=normal, i=italic, e=emphasis(large)
+      // Emphasis words: HyperFrames(8), HTML(12), professional(15), code(24), cinema.(27)
+      var BLOCKS = [
+        {
+          line1: [
+            [0, "n"],
+            [1, "n"],
+            [2, "n"],
+          ],
+          line2: [
+            [3, "n"],
+            [4, "n"],
+          ],
+        },
+        {
+          line1: [
+            [5, "n"],
+            [6, "n"],
+          ],
+          line2: [[7, "e"]],
+        },
+        { line1: [[8, "e"]], line2: null },
+        {
+          line1: [
+            [9, "n"],
+            [10, "n"],
+            [11, "n"],
+          ],
+          line2: [[12, "e"]],
+        },
+        {
+          line1: [
+            [13, "n"],
+            [14, "n"],
+          ],
+          line2: [[15, "e"]],
+        },
+        {
+          line1: [
+            [16, "n"],
+            [17, "n"],
+          ],
+          line2: null,
+        },
+        {
+          line1: [[18, "n"]],
+          line2: [
+            [19, "n"],
+            [20, "n"],
+          ],
+        },
+        {
+          line1: [
+            [21, "n"],
+            [22, "n"],
+          ],
+          line2: null,
+        },
+        {
+          line1: [
+            [23, "i"],
+            [24, "e"],
+          ],
+          line2: null,
+        },
+        {
+          line1: [
+            [25, "n"],
+            [26, "n"],
+          ],
+          line2: [[27, "e"]],
+        },
+      ];
+
+      var CLASS_MAP = { n: "word word--normal", i: "word word--italic", e: "word word--emphasis" };
+
+      function computeLineSize(linePairs) {
+        var hasEmphasis = linePairs.some(function (p) {
+          return p[1] === "e";
+        });
+        if (hasEmphasis) {
+          var lineText = linePairs
+            .map(function (p) {
+              return W[p[0]].text;
+            })
+            .join(" ");
+          return fitFontSize(lineText, 180, "800", "Playfair Display", SAFE_WIDTH);
+        }
+        var lineText = linePairs
+          .map(function (p) {
+            return W[p[0]].text;
+          })
+          .join(" ");
+        return fitFontSize(lineText, 86, "400", "Inter", SAFE_WIDTH);
+      }
+
+      function buildBlocks() {
+        var stage = document.getElementById("caption-stage");
+        BLOCKS.forEach(function (block, bi) {
+          var el = document.createElement("div");
+          el.className = "caption-block";
+          el.id = "b" + bi;
+
+          var l1Size = computeLineSize(block.line1);
+          var l1 = document.createElement("div");
+          l1.className = "caption-line";
+          l1.id = "b" + bi + "L1";
+          block.line1.forEach(function (pair, wi) {
+            var span = document.createElement("span");
+            span.className = CLASS_MAP[pair[1]];
+            span.id = "b" + bi + "L1w" + wi;
+            span.textContent = W[pair[0]].text;
+            if (pair[1] === "e") {
+              span.style.fontSize = l1Size + "px";
+            } else {
+              span.style.fontSize = l1Size + "px";
+            }
+            l1.appendChild(span);
+          });
+          el.appendChild(l1);
+
+          if (block.line2) {
+            var l2Size = computeLineSize(block.line2);
+            var l2 = document.createElement("div");
+            l2.className = "caption-line";
+            l2.id = "b" + bi + "L2";
+            block.line2.forEach(function (pair, wi) {
+              var span = document.createElement("span");
+              span.className = CLASS_MAP[pair[1]];
+              span.id = "b" + bi + "L2w" + wi;
+              span.textContent = W[pair[0]].text;
+              if (pair[1] === "e") {
+                span.style.fontSize = l2Size + "px";
+              } else {
+                span.style.fontSize = l2Size + "px";
+              }
+              l2.appendChild(span);
+            });
+            el.appendChild(l2);
+          }
+
+          stage.appendChild(el);
+        });
+      }
+
+      buildBlocks();
+
+      // Scale blocks that exceed safe width
+      (function fitBlocks() {
+        BLOCKS.forEach(function (block, bi) {
+          var el = document.getElementById("b" + bi);
+          el.style.opacity = "1";
+          el.style.position = "relative";
+          var lines = el.querySelectorAll(".caption-line");
+          var maxW = 0;
+          lines.forEach(function (line) {
+            if (line.scrollWidth > maxW) maxW = line.scrollWidth;
+          });
+          if (maxW > SAFE_WIDTH) {
+            var s = SAFE_WIDTH / maxW;
+            el.style.transform = "scale(" + s + ")";
+          }
+          el.style.opacity = "0";
+          el.style.position = "";
+        });
+      })();
+
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+
+      var allEls = BLOCKS.map(function (_, i) {
+        return document.getElementById("b" + i);
+      });
+
+      function blockStart(bi) {
+        return W[BLOCKS[bi].line1[0][0]].start;
+      }
+
+      BLOCKS.forEach(function (block, bi) {
+        var el = allEls[bi];
+        var start = blockStart(bi);
+        var nextStart = bi < BLOCKS.length - 1 ? blockStart(bi + 1) : DURATION;
+
+        allEls.forEach(function (other, oi) {
+          if (oi !== bi) tl.set(other, { opacity: 0 }, start);
+        });
+        tl.set(el, { opacity: 1 }, start);
+
+        block.line1.forEach(function (pair, wi) {
+          var wordEl = document.getElementById("b" + bi + "L1w" + wi);
+          var wordStart = W[pair[0]].start;
+          tl.set(wordEl, { opacity: 0, scale: 1.12, transformOrigin: "0% 100%" }, start);
+          tl.to(
+            wordEl,
+            { opacity: 1, scale: 1, duration: ENTRY_DUR, ease: "power2.out" },
+            wordStart,
+          );
+        });
+
+        if (block.line2) {
+          var hasEmphasis = block.line2.some(function (p) {
+            return p[1] === "e";
+          });
+          var l2El = document.getElementById("b" + bi + "L2");
+          if (hasEmphasis) {
+            var l2Start = W[block.line2[0][0]].start;
+            tl.set(l2El, { opacity: 0, x: -1920 }, start);
+            tl.to(l2El, { opacity: 1, x: 0, duration: SLIDE_DUR, ease: "power2.out" }, l2Start);
+          } else {
+            tl.set(l2El, { opacity: 1 }, start);
+            block.line2.forEach(function (pair, wi) {
+              var wordEl = document.getElementById("b" + bi + "L2w" + wi);
+              var wordStart = W[pair[0]].start;
+              tl.set(wordEl, { opacity: 0, scale: 1.12, transformOrigin: "0% 100%" }, start);
+              tl.to(
+                wordEl,
+                { opacity: 1, scale: 1, duration: ENTRY_DUR, ease: "power2.out" },
+                wordStart,
+              );
+            });
+          }
+        }
+
+        tl.set(el, { opacity: 0 }, nextStart);
+      });
+
+      tl.to({}, { duration: DURATION }, 0);
+      window.__timelines["caption-editorial-emphasis"] = tl;
+    </script>
+  </body>
+</html>
+```
+
+</Accordion>
 
-Open `compositions/components/caption-editorial-emphasis.html` and copy what is inside into your own composition.
+## Usage
 
-A component has no size or duration of its own. It takes both from the composition
-you paste it into.
+Open `compositions/components/caption-editorial-emphasis.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/components/caption-emoji-pop.mdx b/docs/catalog/components/caption-emoji-pop.mdx
index bbb8348b41..7e99b3a31c 100644
--- a/docs/catalog/components/caption-emoji-pop.mdx
+++ b/docs/catalog/components/caption-emoji-pop.mdx
@@ -3,22 +3,495 @@ title: "Emoji Pop"
 description: "Emoji integration with stroked text and horizontal squeeze entrance"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-emoji-pop.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-emoji-pop.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/components/caption-emoji-pop.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Emoji Pop preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add caption-emoji-pop
-```
+<InstallCommand command="npx hyperframes add caption-emoji-pop" />
 
 That writes one file: `compositions/components/caption-emoji-pop.html`.
 
-## Paste it into your composition
+## Source
+
+<Accordion title={`caption-emoji-pop.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Emoji Pop</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Gabarito:wght@900&display=swap"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: transparent;
+        font-family: "Gabarito", Arial, sans-serif;
+      }
+
+      #emoji-pop {
+        pointer-events: none;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent;
+      }
+
+      .caption-layer {
+        position: absolute;
+        inset: 0;
+        z-index: 20;
+        pointer-events: none;
+        transform: translateZ(0);
+      }
+
+      .safe-zone {
+        position: absolute;
+        bottom: 80px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 1400px;
+        height: 280px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .caption-group {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 1400px;
+        height: 280px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0;
+        transform-origin: 50% 50%;
+        will-change: transform;
+        backface-visibility: hidden;
+      }
+
+      .caption-emoji {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, calc(-50% - 70px));
+        font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
+        font-size: 56px;
+        line-height: 1;
+        text-align: center;
+      }
+
+      .caption-line {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 14px;
+        width: max-content;
+        max-width: 1400px;
+        line-height: 1.1;
+        white-space: nowrap;
+      }
+
+      .caption-word {
+        display: inline-block;
+        color: #ffffff;
+        font-family: "Gabarito", Arial, sans-serif;
+        font-weight: 900;
+        font-size: 72px;
+        line-height: 1.1;
+        letter-spacing: -0.03em;
+        text-transform: uppercase;
+        -webkit-text-stroke: 3px #000000;
+        paint-order: stroke fill;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="emoji-pop"
+      data-composition-id="caption-emoji-pop"
+      data-timeline-locked
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="caption-layer" aria-hidden="true">
+        <div id="caption-stage" class="safe-zone"></div>
+      </div>
+    </div>
+
+    <script>
+      var DURATION = 8;
+      var SAFE_ZONE_WIDTH = 1400;
+      var CAPTION_FONT_SIZE = 72;
+      var MAX_WORDS_PER_GROUP = 3;
+      var WORD_SPACING = 14;
+      var PAUSE_THRESHOLD = 0.1;
+      var ENTRY_FRAMES = 4;
+      var EXIT_FRAMES = 3;
+      var FPS = 30;
+      var ENTRY_DURATION = ENTRY_FRAMES / FPS;
+      var EXIT_DURATION = EXIT_FRAMES / FPS;
+      var FONT_WIDTH_SAFETY = 1.14;
+      var PRIMARY_COLOR = "#FFFFFF";
+      var ACCENT_COLORS = ["#FF76FF", "#FF0002", "#B2F7FF"];
+      var KEYWORDS = new Set(["hyperframes", "html", "professional", "code", "cinema"]);
+      var TRANSITION_WORDS = new Set([
+        "the",
+        "a",
+        "an",
+        "and",
+        "or",
+        "but",
+        "is",
+        "are",
+        "was",
+        "were",
+        "to",
+        "of",
+        "in",
+        "on",
+        "at",
+        "for",
+        "with",
+        "by",
+        "from",
+        "as",
+        "it",
+        "its",
+        "this",
+        "that",
+        "these",
+        "those",
+        "be",
+        "been",
+        "have",
+        "has",
+        "had",
+        "do",
+        "does",
+        "did",
+        "will",
+        "would",
+        "could",
+        "should",
+        "may",
+        "might",
+        "must",
+        "can",
+        "if",
+        "then",
+        "so",
+        "just",
+        "not",
+        "no",
+        "yes",
+        "up",
+        "out",
+        "about",
+      ]);
+
+      // Emoji map for key words
+      var WORD_EMOJI = {
+        hyperframes: "🎬",
+        html: "💻",
+        professional: "✨",
+        code: "⌨️",
+        cinema: "🎥",
+        video: "📹",
+        frame: "🖼️",
+      };
+
+      var TRANSCRIPT = [
+        { text: "Every", start: 0.0, end: 0.3 },
+        { text: "great", start: 0.3, end: 0.55 },
+        { text: "video", start: 0.55, end: 0.85 },
+        { text: "starts", start: 0.85, end: 1.1 },
+        { text: "with", start: 1.1, end: 1.25 },
+        { text: "a", start: 1.25, end: 1.35 },
+        { text: "single", start: 1.35, end: 1.65 },
+        { text: "frame.", start: 1.65, end: 2.0 },
+        { text: "HyperFrames", start: 2.1, end: 2.65 },
+        { text: "lets", start: 2.65, end: 2.85 },
+        { text: "you", start: 2.85, end: 2.95 },
+        { text: "write", start: 2.95, end: 3.15 },
+        { text: "HTML", start: 3.15, end: 3.55 },
+        { text: "and", start: 3.55, end: 3.65 },
+        { text: "render", start: 3.65, end: 3.95 },
+        { text: "professional", start: 3.95, end: 4.45 },
+        { text: "video.", start: 4.45, end: 4.8 },
+        { text: "No", start: 4.9, end: 5.05 },
+        { text: "timeline.", start: 5.05, end: 5.45 },
+        { text: "No", start: 5.5, end: 5.65 },
+        { text: "drag", start: 5.65, end: 5.85 },
+        { text: "and", start: 5.85, end: 5.95 },
+        { text: "drop.", start: 5.95, end: 6.25 },
+        { text: "Just", start: 6.35, end: 6.55 },
+        { text: "code", start: 6.55, end: 6.8 },
+        { text: "that", start: 6.8, end: 6.95 },
+        { text: "becomes", start: 6.95, end: 7.3 },
+        { text: "cinema.", start: 7.3, end: 7.7 },
+      ];
+
+      function normalizeWords(rawWords) {
+        return rawWords
+          .map(function (item) {
+            var text = String(item.word || item.text || "").trim();
+            var clean = text.toLowerCase().replace(/[^a-z]/g, "");
+            return {
+              text: text,
+              start: Math.max(0, Number(item.start) || 0),
+              end: Math.min(DURATION, Math.max(Number(item.start) || 0, Number(item.end) || 0)),
+              emoji: WORD_EMOJI[clean] || null,
+            };
+          })
+          .filter(function (word) {
+            return word.text.length > 0;
+          });
+      }
+
+      function seededRandom(seed) {
+        var x = Math.sin(seed * 9999) * 10000;
+        return x - Math.floor(x);
+      }
+
+      function assignWordColors(words, groupIndex) {
+        return words.map(function (word, index) {
+          var clean = word.text.toLowerCase().replace(/[^a-z]/g, "");
+          if (KEYWORDS.has(clean)) {
+            var ci = Math.floor(seededRandom(groupIndex * 23 + index * 31) * ACCENT_COLORS.length);
+            return ACCENT_COLORS[ci];
+          }
+          if (TRANSITION_WORDS.has(clean)) return PRIMARY_COLOR;
+          var rand = seededRandom(groupIndex * 13 + index);
+          if (rand > 0.55) {
+            var ci2 = Math.floor(rand * ACCENT_COLORS.length) % ACCENT_COLORS.length;
+            return ACCENT_COLORS[ci2];
+          }
+          return PRIMARY_COLOR;
+        });
+      }
+
+      var _fitCanvas = document.createElement("canvas");
+      var _fitCtx = _fitCanvas.getContext("2d");
+      function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {
+        var size = baseFontSize;
+        var minSize = Math.floor(baseFontSize * 0.45);
+        while (size > minSize) {
+          _fitCtx.font = fontWeight + " " + size + "px " + fontFamily;
+          if (_fitCtx.measureText(text).width <= maxWidth) return size;
+          size -= 2;
+        }
+        return minSize;
+      }
+
+      var measureCanvas = document.createElement("canvas");
+      var measureContext = measureCanvas.getContext("2d");
+
+      function measureWord(word, fontSize) {
+        measureContext.font = "900 " + fontSize + "px Gabarito";
+        return measureContext.measureText(word.text.toUpperCase()).width * FONT_WIDTH_SAFETY;
+      }
+
+      function measureLineWidth(words, fontSize) {
+        return words.reduce(function (total, word, index) {
+          return total + measureWord(word, fontSize) + (index ? WORD_SPACING : 0);
+        }, 0);
+      }
+
+      function fitsLine(words) {
+        return measureLineWidth(words, CAPTION_FONT_SIZE) <= SAFE_ZONE_WIDTH;
+      }
+
+      function makeGroups(words) {
+        var groups = [];
+        var current = [];
+        words.forEach(function (word, index) {
+          var nextWord = words[index + 1];
+          var testGroup = current.concat([word]);
+          if (testGroup.length > MAX_WORDS_PER_GROUP || !fitsLine(testGroup)) {
+            if (current.length) groups.push(makeGroup(current, groups.length));
+            current = [word];
+            return;
+          }
+          current.push(word);
+          var punctuation = /[,.:!?]$/.test(word.text);
+          var pause = nextWord ? nextWord.start - word.end : 0;
+          if (
+            !nextWord ||
+            punctuation ||
+            pause >= PAUSE_THRESHOLD ||
+            current.length >= MAX_WORDS_PER_GROUP
+          ) {
+            groups.push(makeGroup(current, groups.length));
+            current = [];
+          }
+        });
+        if (current.length) groups.push(makeGroup(current, groups.length));
+        return groups;
+      }
+
+      function makeGroup(words, groupIndex) {
+        var colors = assignWordColors(words, groupIndex);
+        var emoji = null;
+        for (var i = 0; i < words.length; i++) {
+          if (words[i].emoji) {
+            emoji = words[i].emoji;
+            break;
+          }
+        }
+        return {
+          words: words.slice(),
+          colors: colors,
+          emoji: emoji,
+          start: words[0].start,
+          end: words[words.length - 1].end,
+        };
+      }
+
+      function shadowForColor(color) {
+        var hex = color.replace("#", "");
+        var r = parseInt(hex.slice(0, 2), 16);
+        var g = parseInt(hex.slice(2, 4), 16);
+        var b = parseInt(hex.slice(4, 6), 16);
+        return (
+          "0 4px 8px rgba(0,0,0,0.7), 0 0 2px rgba(" +
+          r +
+          "," +
+          g +
+          "," +
+          b +
+          ",1), 0 0 8px rgba(" +
+          r +
+          "," +
+          g +
+          "," +
+          b +
+          ",0.6)"
+        );
+      }
+
+      function buildCaptions(groups) {
+        var stage = document.getElementById("caption-stage");
+        groups.forEach(function (group, groupIndex) {
+          var groupText = group.words
+            .map(function (w) {
+              return w.text.toUpperCase();
+            })
+            .join(" ");
+          var computedSize = fitFontSize(
+            groupText,
+            CAPTION_FONT_SIZE,
+            "900",
+            "Gabarito",
+            SAFE_ZONE_WIDTH,
+          );
+          var groupEl = document.createElement("div");
+          groupEl.id = "caption-group-" + groupIndex;
+          groupEl.className = "caption-group";
+
+          if (group.emoji) {
+            var emojiEl = document.createElement("div");
+            emojiEl.className = "caption-emoji";
+            emojiEl.textContent = group.emoji;
+            groupEl.appendChild(emojiEl);
+          }
+
+          var lineEl = document.createElement("div");
+          lineEl.className = "caption-line";
+          group.words.forEach(function (word, wordIndex) {
+            var color = group.colors[wordIndex] || PRIMARY_COLOR;
+            var wordEl = document.createElement("span");
+            wordEl.className = "caption-word";
+            wordEl.textContent = word.text.toUpperCase();
+            wordEl.style.color = color;
+            wordEl.style.fontSize = computedSize + "px";
+            wordEl.style.textShadow = shadowForColor(color);
+            lineEl.appendChild(wordEl);
+          });
+
+          groupEl.appendChild(lineEl);
+          stage.appendChild(groupEl);
+        });
+      }
+
+      var WORDS = normalizeWords(TRANSCRIPT);
+      var GROUPS = makeGroups(WORDS);
+      buildCaptions(GROUPS);
+
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+
+      var visibleStarts = GROUPS.map(function (group, groupIndex) {
+        var prev = GROUPS[groupIndex - 1];
+        var availableGap = prev ? Math.max(0, group.start - prev.end) : ENTRY_DURATION;
+        var entryLead = Math.min(ENTRY_DURATION, availableGap);
+        return Math.max(0, group.start - entryLead);
+      });
+
+      var allGroupEls = GROUPS.map(function (_, i) {
+        return document.getElementById("caption-group-" + i);
+      });
+
+      GROUPS.forEach(function (group, groupIndex) {
+        var groupEl = allGroupEls[groupIndex];
+        var visibleStart = visibleStarts[groupIndex];
+        var visibleEnd = groupIndex < GROUPS.length - 1 ? visibleStarts[groupIndex + 1] : DURATION;
+        var exitStart = Math.max(visibleStart, visibleEnd - EXIT_DURATION);
+
+        allGroupEls.forEach(function (otherEl, otherIndex) {
+          if (otherIndex !== groupIndex) tl.set(otherEl, { opacity: 0 }, visibleStart);
+        });
+
+        tl.set(groupEl, { opacity: 0, scaleX: 0.8, scaleY: 1 }, visibleStart);
+        tl.to(
+          groupEl,
+          { opacity: 1, scaleX: 1, duration: ENTRY_DURATION, ease: "power3.out", force3D: true },
+          visibleStart,
+        );
+        tl.to(
+          groupEl,
+          { scaleX: 0.75, opacity: 0.8, duration: EXIT_DURATION, ease: "power2.in", force3D: true },
+          exitStart,
+        );
+        tl.set(groupEl, { opacity: 0 }, visibleEnd);
+      });
+
+      window.__timelines["caption-emoji-pop"] = tl;
+    </script>
+  </body>
+</html>
+```
+
+</Accordion>
 
-Open `compositions/components/caption-emoji-pop.html` and copy what is inside into your own composition.
+## Usage
 
-A component has no size or duration of its own. It takes both from the composition
-you paste it into.
+Open `compositions/components/caption-emoji-pop.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/components/caption-glitch-rgb.mdx b/docs/catalog/components/caption-glitch-rgb.mdx
index 1cc7a04383..d5a1b507ad 100644
--- a/docs/catalog/components/caption-glitch-rgb.mdx
+++ b/docs/catalog/components/caption-glitch-rgb.mdx
@@ -3,22 +3,357 @@ title: "Glitch RGB"
 description: "RGB chromatic aberration with CRT scanline overlay"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-glitch-rgb.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-glitch-rgb.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/components/caption-glitch-rgb.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Glitch RGB preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add caption-glitch-rgb
-```
+<InstallCommand command="npx hyperframes add caption-glitch-rgb" />
 
 That writes one file: `compositions/components/caption-glitch-rgb.html`.
 
-## Paste it into your composition
+## Source
+
+<Accordion title={`caption-glitch-rgb.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Glitch RGB</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@700&display=swap"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: transparent;
+      }
+      #caption-glitch-rgb {
+        pointer-events: none;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent;
+      }
+      .gl-overlay {
+        position: absolute;
+        inset: 0;
+        z-index: 1;
+        background: linear-gradient(
+          to bottom,
+          rgba(0, 0, 0, 0.08) 0%,
+          rgba(0, 0, 0, 0.16) 54%,
+          rgba(0, 0, 0, 0.5) 100%
+        );
+        pointer-events: none;
+      }
+      .gl-scanlines {
+        position: absolute;
+        inset: 0;
+        z-index: 5;
+        pointer-events: none;
+        background: repeating-linear-gradient(
+          to bottom,
+          transparent 0px,
+          transparent 3px,
+          rgba(0, 0, 0, 0.16) 3px,
+          rgba(0, 0, 0, 0.16) 4px
+        );
+        opacity: 0.55;
+      }
+      #gl-container {
+        position: absolute;
+        inset: 0;
+        z-index: 10;
+        pointer-events: none;
+      }
+      .gl-group {
+        position: absolute;
+        bottom: 120px;
+        left: 0;
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: flex-end;
+        justify-content: center;
+        gap: 14px;
+        padding: 0 100px;
+        opacity: 0;
+        visibility: hidden;
+      }
+      .gl-word {
+        font-family: "Space Grotesk", sans-serif;
+        font-weight: 700;
+        font-size: 88px;
+        text-transform: uppercase;
+        color: #ffffff;
+        display: inline-block;
+        letter-spacing: 0.03em;
+        line-height: 0.96;
+        text-shadow: 0 5px 18px rgba(0, 0, 0, 0.52);
+        will-change: transform, text-shadow;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="caption-glitch-rgb"
+      data-composition-id="caption-glitch-rgb"
+      data-timeline-locked
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="gl-overlay"></div>
+      <div class="gl-scanlines"></div>
+      <div id="gl-container"></div>
+    </div>
+
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        var TRANSCRIPT = [
+          { text: "Every", start: 0.0, end: 0.3 },
+          { text: "great", start: 0.3, end: 0.55 },
+          { text: "video", start: 0.55, end: 0.85 },
+          { text: "starts", start: 0.85, end: 1.1 },
+          { text: "with", start: 1.1, end: 1.25 },
+          { text: "a", start: 1.25, end: 1.35 },
+          { text: "single", start: 1.35, end: 1.65 },
+          { text: "frame.", start: 1.65, end: 2.0 },
+          { text: "HyperFrames", start: 2.1, end: 2.65 },
+          { text: "lets", start: 2.65, end: 2.85 },
+          { text: "you", start: 2.85, end: 2.95 },
+          { text: "write", start: 2.95, end: 3.15 },
+          { text: "HTML", start: 3.15, end: 3.55 },
+          { text: "and", start: 3.55, end: 3.65 },
+          { text: "render", start: 3.65, end: 3.95 },
+          { text: "professional", start: 3.95, end: 4.45 },
+          { text: "video.", start: 4.45, end: 4.8 },
+          { text: "No", start: 4.9, end: 5.05 },
+          { text: "timeline.", start: 5.05, end: 5.45 },
+          { text: "No", start: 5.5, end: 5.65 },
+          { text: "drag", start: 5.65, end: 5.85 },
+          { text: "and", start: 5.85, end: 5.95 },
+          { text: "drop.", start: 5.95, end: 6.25 },
+          { text: "Just", start: 6.35, end: 6.55 },
+          { text: "code", start: 6.55, end: 6.8 },
+          { text: "that", start: 6.8, end: 6.95 },
+          { text: "becomes", start: 6.95, end: 7.3 },
+          { text: "cinema.", start: 7.3, end: 7.7 },
+        ];
+
+        var _fitCanvas = document.createElement("canvas");
+        var _fitCtx = _fitCanvas.getContext("2d");
+        function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {
+          var size = baseFontSize;
+          var minSize = Math.floor(baseFontSize * 0.45);
+          while (size > minSize) {
+            _fitCtx.font = fontWeight + " " + size + "px " + fontFamily;
+            if (_fitCtx.measureText(text).width <= maxWidth) return size;
+            size -= 2;
+          }
+          return minSize;
+        }
+
+        function mulberry32(seed) {
+          return function () {
+            seed |= 0;
+            seed = (seed + 0x6d2b79f5) | 0;
+            var t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
+            t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+            return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+          };
+        }
+
+        function buildGroups(words) {
+          var groups = [];
+          var start = 0;
+          var chars = 0;
+          for (var i = 0; i < words.length; i++) {
+            chars += words[i].text.length + 1;
+            var endsSentence = /[.!?]$/.test(words[i].text);
+            var nextGap = i + 1 < words.length ? words[i + 1].start - words[i].end : 0;
+            var full = i - start >= 3 || chars >= 21;
+            if (endsSentence || nextGap > 0.28 || full || i === words.length - 1) {
+              groups.push([start, i]);
+              start = i + 1;
+              chars = 0;
+            }
+          }
+          return groups;
+        }
+
+        function glitchPlan(word, nextWord) {
+          var nextStart = nextWord ? nextWord.start : word.end + 0.3;
+          var available = Math.min(word.end, nextStart) - word.start - 0.02;
+          var total = Math.min(0.24, Math.max(0.08, available));
+          return {
+            d1: total * 0.35,
+            d2: total * 0.65,
+          };
+        }
+
+        function shouldAftershock(word) {
+          return /\d|\$|%/.test(word.text) || word.text.replace(/[^\w]/g, "").length >= 7;
+        }
+
+        var RAW_GROUPS = buildGroups(TRANSCRIPT);
+        var GROUPS = RAW_GROUPS.map(function (pair, gi) {
+          var ws = pair[0];
+          var we = pair[1];
+          var nextStart =
+            gi + 1 < RAW_GROUPS.length ? TRANSCRIPT[RAW_GROUPS[gi + 1][0]].start : 8.0;
+          var end = Math.min(TRANSCRIPT[we].end + 0.24, nextStart - 0.04);
+          return { wordStart: ws, wordEnd: we, start: TRANSCRIPT[ws].start, end: end };
+        });
+
+        var BASE_FONT = 88;
+        var container = document.getElementById("gl-container");
+        var tl = gsap.timeline({ paused: true });
+
+        GROUPS.forEach(function (g, gi) {
+          var groupWords = TRANSCRIPT.slice(g.wordStart, g.wordEnd + 1);
+          var grp = document.createElement("div");
+          grp.className = "gl-group";
+          grp.id = "gl-grp-" + gi;
+
+          var groupText = groupWords
+            .map(function (w) {
+              return w.text.toUpperCase();
+            })
+            .join(" ");
+          var computedSize = fitFontSize(groupText, BASE_FONT, "700", "Space Grotesk", 1720);
+
+          groupWords.forEach(function (w, i) {
+            var wi = g.wordStart + i;
+            var span = document.createElement("span");
+            span.className = "gl-word";
+            span.id = "gl-w-" + wi;
+            span.textContent = w.text.toUpperCase();
+            span.style.fontSize = computedSize + "px";
+            grp.appendChild(span);
+          });
+
+          container.appendChild(grp);
+
+          tl.set(grp, { visibility: "visible" }, g.start);
+          tl.fromTo(
+            grp,
+            { opacity: 0 },
+            { opacity: 1, duration: 0.12, ease: "power2.out" },
+            g.start,
+          );
+
+          groupWords.forEach(function (w, i) {
+            var wi = g.wordStart + i;
+            var wordEl = document.getElementById("gl-w-" + wi);
+            var plan = glitchPlan(w, TRANSCRIPT[wi + 1]);
+
+            var rng = mulberry32(wi * 777 + 13);
+            var travel = -(8 + rng() * 8);
+            var shadowMag = 5 + rng() * 7;
+            var sm = shadowMag.toFixed(1);
+            var nextWord = TRANSCRIPT[wi + 1];
+            var nextStart = nextWord ? nextWord.start : g.end;
+            var aftershockEnd = Math.min(g.end - 0.08, nextStart - 0.04);
+
+            tl.to(
+              wordEl,
+              {
+                x: travel,
+                textShadow:
+                  sm + "px 0 #ff003c, -" + sm + "px 0 #00e5ff, 0 5px 18px rgba(0,0,0,0.52)",
+                duration: plan.d1,
+                ease: "none",
+              },
+              w.start,
+            );
+            tl.to(
+              wordEl,
+              {
+                x: 0,
+                textShadow: "0 5px 18px rgba(0,0,0,0.52)",
+                duration: plan.d2,
+                ease: "power3.out",
+              },
+              w.start + plan.d1,
+            );
+
+            if (shouldAftershock(w) && aftershockEnd - w.end > 0.22) {
+              var pulseStart = w.end + 0.08;
+              var pulseIndex = 0;
+              while (pulseStart + 0.1 < aftershockEnd) {
+                var pulseTravel = -(3 + rng() * 5);
+                var pulseShadow = (3 + rng() * 5).toFixed(1);
+                tl.to(
+                  wordEl,
+                  {
+                    x: pulseTravel,
+                    textShadow:
+                      pulseShadow +
+                      "px 0 #ff003c, -" +
+                      pulseShadow +
+                      "px 0 #00e5ff, 0 5px 18px rgba(0,0,0,0.52)",
+                    duration: 0.045,
+                    ease: "none",
+                  },
+                  pulseStart,
+                );
+                tl.to(
+                  wordEl,
+                  {
+                    x: 0,
+                    textShadow: "0 5px 18px rgba(0,0,0,0.52)",
+                    duration: 0.075,
+                    ease: "power3.out",
+                  },
+                  pulseStart + 0.045,
+                );
+                pulseIndex++;
+                pulseStart += pulseIndex % 2 === 0 ? 0.18 : 0.24;
+              }
+            }
+          });
+
+          tl.to(grp, { opacity: 0, duration: 0.1, ease: "power2.in" }, g.end - 0.1);
+          tl.set(grp, { opacity: 0, visibility: "hidden" }, g.end);
+        });
+
+        tl.seek(0);
+        window.__timelines["caption-glitch-rgb"] = tl;
+      })();
+    </script>
+  </body>
+</html>
+```
+
+</Accordion>
 
-Open `compositions/components/caption-glitch-rgb.html` and copy what is inside into your own composition.
+## Usage
 
-A component has no size or duration of its own. It takes both from the composition
-you paste it into.
+Open `compositions/components/caption-glitch-rgb.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/components/caption-gradient-fill.mdx b/docs/catalog/components/caption-gradient-fill.mdx
index fcc64ac141..46fe995e37 100644
--- a/docs/catalog/components/caption-gradient-fill.mdx
+++ b/docs/catalog/components/caption-gradient-fill.mdx
@@ -3,22 +3,247 @@ title: "Gradient Fill"
 description: "Gradient-clipped text with elastic bounce entrance"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-gradient-fill.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-gradient-fill.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/components/caption-gradient-fill.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Gradient Fill preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add caption-gradient-fill
-```
+<InstallCommand command="npx hyperframes add caption-gradient-fill" />
 
 That writes one file: `compositions/components/caption-gradient-fill.html`.
 
-## Paste it into your composition
+## Source
+
+<Accordion title={`caption-gradient-fill.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Gradient Fill</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: transparent;
+      }
+      #gradient-fill {
+        pointer-events: none;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent;
+      }
+      #gr-container {
+        position: absolute;
+        inset: 0;
+        z-index: 10;
+        pointer-events: none;
+      }
+      .gr-group {
+        position: absolute;
+        bottom: 120px;
+        left: 0;
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: flex-end;
+        justify-content: center;
+        gap: 24px;
+        padding: 0 80px;
+        opacity: 0;
+        visibility: hidden;
+      }
+      .gr-word {
+        font-family: "Montserrat", sans-serif;
+        font-weight: 900;
+        font-size: 100px;
+        display: inline-block;
+        letter-spacing: 0.04em;
+        line-height: 1.15;
+        padding-bottom: 0.05em;
+        -webkit-background-clip: text;
+        background-clip: text;
+        color: transparent;
+        background-size: 350% 100%;
+        background-position: 100% 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="gradient-fill"
+      data-composition-id="caption-gradient-fill"
+      data-timeline-locked
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="gr-container"></div>
+    </div>
+
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        var _fitCanvas = document.createElement("canvas");
+        var _fitCtx = _fitCanvas.getContext("2d");
+        function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {
+          var size = baseFontSize;
+          var minSize = Math.floor(baseFontSize * 0.45);
+          while (size > minSize) {
+            _fitCtx.font = fontWeight + " " + size + "px " + fontFamily;
+            if (_fitCtx.measureText(text).width <= maxWidth) return size;
+            size -= 2;
+          }
+          return minSize;
+        }
+
+        var WORDS = [
+          { text: "Every", start: 0.0, end: 0.3 },
+          { text: "great", start: 0.3, end: 0.55 },
+          { text: "video", start: 0.55, end: 0.85 },
+          { text: "starts", start: 0.85, end: 1.1 },
+          { text: "with", start: 1.1, end: 1.25 },
+          { text: "a", start: 1.25, end: 1.35 },
+          { text: "single", start: 1.35, end: 1.65 },
+          { text: "frame.", start: 1.65, end: 2.0 },
+          { text: "HyperFrames", start: 2.1, end: 2.65 },
+          { text: "lets", start: 2.65, end: 2.85 },
+          { text: "you", start: 2.85, end: 2.95 },
+          { text: "write", start: 2.95, end: 3.15 },
+          { text: "HTML", start: 3.15, end: 3.55 },
+          { text: "and", start: 3.55, end: 3.65 },
+          { text: "render", start: 3.65, end: 3.95 },
+          { text: "professional", start: 3.95, end: 4.45 },
+          { text: "video.", start: 4.45, end: 4.8 },
+          { text: "No", start: 4.9, end: 5.05 },
+          { text: "timeline.", start: 5.05, end: 5.45 },
+          { text: "No", start: 5.5, end: 5.65 },
+          { text: "drag", start: 5.65, end: 5.85 },
+          { text: "and", start: 5.85, end: 5.95 },
+          { text: "drop.", start: 5.95, end: 6.25 },
+          { text: "Just", start: 6.35, end: 6.55 },
+          { text: "code", start: 6.55, end: 6.8 },
+          { text: "that", start: 6.8, end: 6.95 },
+          { text: "becomes", start: 6.95, end: 7.3 },
+          { text: "cinema.", start: 7.3, end: 7.7 },
+        ];
+
+        var GROUPS = [
+          { wordStart: 0, wordEnd: 3, start: 0.0, end: 1.05 },
+          { wordStart: 4, wordEnd: 7, start: 1.1, end: 2.05 },
+          { wordStart: 8, wordEnd: 8, start: 2.1, end: 2.6 },
+          { wordStart: 9, wordEnd: 12, start: 2.65, end: 3.5 },
+          { wordStart: 13, wordEnd: 14, start: 3.55, end: 3.9 },
+          { wordStart: 15, wordEnd: 16, start: 3.95, end: 4.75 },
+          { wordStart: 17, wordEnd: 18, start: 4.9, end: 5.4 },
+          { wordStart: 19, wordEnd: 22, start: 5.5, end: 6.2 },
+          { wordStart: 23, wordEnd: 24, start: 6.35, end: 6.75 },
+          { wordStart: 25, wordEnd: 27, start: 6.8, end: 7.8 },
+        ];
+
+        var SIRI_GRAD =
+          "linear-gradient(90deg, " +
+          "#fe9f1b 0%, #f76e49 10%, #ff2063 20%, " +
+          "#fd56cb 30%, #ef7aff 40%, #fe9f1b 50%, " +
+          "white 50.5%, white 100%)";
+
+        var container = document.getElementById("gr-container");
+        var tl = gsap.timeline({ paused: true });
+
+        GROUPS.forEach(function (g, gi) {
+          var groupWords = WORDS.slice(g.wordStart, g.wordEnd + 1);
+          var groupText = groupWords
+            .map(function (w) {
+              return w.text;
+            })
+            .join(" ");
+          var fontSize = fitFontSize(groupText, 100, "900", "'Montserrat', sans-serif", 1760);
+          var grp = document.createElement("div");
+          grp.className = "gr-group";
+          grp.id = "gr-grp-" + gi;
+
+          groupWords.forEach(function (w, i) {
+            var wi = g.wordStart + i;
+            var span = document.createElement("span");
+            span.className = "gr-word";
+            span.id = "gr-w-" + wi;
+            span.textContent = w.text;
+            span.style.fontSize = fontSize + "px";
+            span.style.background = SIRI_GRAD;
+            span.style.backgroundSize = "350% 100%";
+            span.style.backgroundPosition = "100% 0";
+            span.style.webkitBackgroundClip = "text";
+            span.style.backgroundClip = "text";
+            grp.appendChild(span);
+          });
+
+          container.appendChild(grp);
+
+          tl.set(grp, { visibility: "visible", opacity: 1 }, g.start);
+
+          var lastWordEnd = groupWords[groupWords.length - 1].end;
+          var nextStart = gi < GROUPS.length - 1 ? GROUPS[gi + 1].start : lastWordEnd + 0.5;
+          var gap = nextStart - lastWordEnd;
+          var fadeDur = Math.min(0.25, gap * 0.8);
+          var fadeStart = nextStart - fadeDur;
+          var groupEnd = nextStart;
+
+          groupWords.forEach(function (w, i) {
+            var wi = g.wordStart + i;
+            var el = document.getElementById("gr-w-" + wi);
+            var dur = w.end - w.start;
+
+            tl.set(el, { backgroundPosition: "100% 0", scale: 1 }, g.start);
+            tl.set(el, { scale: 1.04 }, w.start);
+            tl.fromTo(
+              el,
+              { backgroundPosition: "45% 0" },
+              { backgroundPosition: "0% 0", duration: dur, ease: "none" },
+              w.start,
+            );
+            tl.set(el, { backgroundPosition: "100% 0" }, w.end);
+            tl.to(el, { scale: 1, duration: 0.15, ease: "power2.out" }, w.end);
+          });
+
+          tl.to(grp, { opacity: 0, duration: fadeDur }, fadeStart);
+          tl.set(grp, { visibility: "hidden" }, groupEnd);
+        });
+
+        window.__timelines["caption-gradient-fill"] = tl;
+      })();
+    </script>
+  </body>
+</html>
+```
+
+</Accordion>
 
-Open `compositions/components/caption-gradient-fill.html` and copy what is inside into your own composition.
+## Usage
 
-A component has no size or duration of its own. It takes both from the composition
-you paste it into.
+Open `compositions/components/caption-gradient-fill.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/components/caption-highlight.mdx b/docs/catalog/components/caption-highlight.mdx
index 3f3ad6e607..4bedd279b1 100644
--- a/docs/catalog/components/caption-highlight.mdx
+++ b/docs/catalog/components/caption-highlight.mdx
@@ -3,22 +3,289 @@ title: "Highlight"
 description: "Red background sweep behind each active word, TikTok-style"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-highlight.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-highlight.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/components/caption-highlight.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Highlight preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add caption-highlight
-```
+<InstallCommand command="npx hyperframes add caption-highlight" />
 
 That writes one file: `compositions/components/caption-highlight.html`.
 
-## Paste it into your composition
+## Source
+
+<Accordion title={`caption-highlight.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Highlight</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@800&display=swap"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: transparent;
+      }
+      #highlight {
+        pointer-events: none;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent;
+      }
+      #hl-video {
+        position: absolute;
+        inset: 0;
+        z-index: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+      .hl-overlay {
+        position: absolute;
+        inset: 0;
+        background: transparent;
+        z-index: 1;
+        pointer-events: none;
+      }
+      #hl-container {
+        position: absolute;
+        inset: 0;
+        z-index: 10;
+        pointer-events: none;
+      }
+      .hl-group {
+        position: absolute;
+        bottom: 140px;
+        left: 0;
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: flex-end;
+        justify-content: center;
+        gap: 8px;
+        padding: 0 100px;
+        opacity: 0;
+        visibility: hidden;
+      }
+      .hl-word {
+        font-family: "Montserrat", sans-serif;
+        font-weight: 800;
+        font-size: 80px;
+        text-transform: uppercase;
+        color: #ffffff;
+        display: inline-block;
+        letter-spacing: 0.02em;
+        line-height: 1;
+        position: relative;
+        padding: 6px 12px 8px;
+        text-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
+        transform-origin: 50% 58%;
+        will-change: transform, filter;
+      }
+      .hl-word-bg {
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(135deg, #ff1745 0%, #df1238 100%);
+        border-radius: 10px;
+        box-shadow: 0 12px 30px rgba(229, 20, 58, 0.32);
+        opacity: 0;
+        transform: scaleX(0);
+        transform-origin: 0% 50%;
+        z-index: -1;
+      }
+      .hl-word-text {
+        position: relative;
+        z-index: 1;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="highlight"
+      data-composition-id="caption-highlight"
+      data-timeline-locked
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="hl-overlay"></div>
+      <div id="hl-container"></div>
+    </div>
+
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        var _fitCanvas = document.createElement("canvas");
+        var _fitCtx = _fitCanvas.getContext("2d");
+        function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {
+          var size = baseFontSize;
+          var minSize = Math.floor(baseFontSize * 0.45);
+          while (size > minSize) {
+            _fitCtx.font = fontWeight + " " + size + "px " + fontFamily;
+            if (_fitCtx.measureText(text).width <= maxWidth) return size;
+            size -= 2;
+          }
+          return minSize;
+        }
+
+        var WORDS = [
+          { text: "Every", start: 0.0, end: 0.3 },
+          { text: "great", start: 0.3, end: 0.55 },
+          { text: "video", start: 0.55, end: 0.85 },
+          { text: "starts", start: 0.85, end: 1.1 },
+          { text: "with", start: 1.1, end: 1.25 },
+          { text: "a", start: 1.25, end: 1.35 },
+          { text: "single", start: 1.35, end: 1.65 },
+          { text: "frame.", start: 1.65, end: 2.0 },
+          { text: "HyperFrames", start: 2.1, end: 2.65 },
+          { text: "lets", start: 2.65, end: 2.85 },
+          { text: "you", start: 2.85, end: 2.95 },
+          { text: "write", start: 2.95, end: 3.15 },
+          { text: "HTML", start: 3.15, end: 3.55 },
+          { text: "and", start: 3.55, end: 3.65 },
+          { text: "render", start: 3.65, end: 3.95 },
+          { text: "professional", start: 3.95, end: 4.45 },
+          { text: "video.", start: 4.45, end: 4.8 },
+          { text: "No", start: 4.9, end: 5.05 },
+          { text: "timeline.", start: 5.05, end: 5.45 },
+          { text: "No", start: 5.5, end: 5.65 },
+          { text: "drag", start: 5.65, end: 5.85 },
+          { text: "and", start: 5.85, end: 5.95 },
+          { text: "drop.", start: 5.95, end: 6.25 },
+          { text: "Just", start: 6.35, end: 6.55 },
+          { text: "code", start: 6.55, end: 6.8 },
+          { text: "that", start: 6.8, end: 6.95 },
+          { text: "becomes", start: 6.95, end: 7.3 },
+          { text: "cinema.", start: 7.3, end: 7.7 },
+        ];
+
+        var RAW_GROUPS = [
+          [0, 3],
+          [4, 7],
+          [8, 8],
+          [9, 12],
+          [13, 15],
+          [16, 16],
+          [17, 19],
+          [20, 22],
+          [23, 24],
+          [25, 27],
+        ];
+        var GROUPS = RAW_GROUPS.map(function (pair, gi) {
+          var ws = pair[0],
+            we = pair[1];
+          var nextStart = gi + 1 < RAW_GROUPS.length ? WORDS[RAW_GROUPS[gi + 1][0]].start : 8.0;
+          var gEnd = Math.min(WORDS[we].end + 0.5, nextStart - 0.05);
+          return { wordStart: ws, wordEnd: we, start: WORDS[ws].start, end: gEnd };
+        });
+
+        var container = document.getElementById("hl-container");
+        var tl = gsap.timeline({ paused: true });
+
+        GROUPS.forEach(function (g, gi) {
+          var groupWords = WORDS.slice(g.wordStart, g.wordEnd + 1);
+          var grp = document.createElement("div");
+          grp.className = "hl-group";
+          grp.id = "hl-grp-" + gi;
+
+          var groupText = groupWords
+            .map(function (w) {
+              return w.text.toUpperCase();
+            })
+            .join(" ");
+          var computedSize = fitFontSize(groupText, 80, "800", "Montserrat", 1620);
+
+          groupWords.forEach(function (w, i) {
+            var wi = g.wordStart + i;
+            var wordEl = document.createElement("span");
+            wordEl.className = "hl-word";
+            wordEl.id = "hl-w-" + wi;
+            wordEl.style.fontSize = computedSize + "px";
+
+            var bgEl = document.createElement("span");
+            bgEl.className = "hl-word-bg";
+            bgEl.id = "hl-bg-" + wi;
+
+            var textEl = document.createElement("span");
+            textEl.className = "hl-word-text";
+            textEl.textContent = w.text.toUpperCase();
+
+            wordEl.appendChild(bgEl);
+            wordEl.appendChild(textEl);
+            grp.appendChild(wordEl);
+          });
+
+          container.appendChild(grp);
+
+          tl.set(grp, { visibility: "visible" }, g.start);
+          tl.fromTo(
+            grp,
+            { opacity: 0 },
+            { opacity: 1, duration: 0.12, ease: "power2.out" },
+            g.start,
+          );
+
+          groupWords.forEach(function (w, i) {
+            var wi = g.wordStart + i;
+            var bgEl = document.getElementById("hl-bg-" + wi);
+            var wordEl = document.getElementById("hl-w-" + wi);
+
+            tl.to(bgEl, { opacity: 1, scaleX: 1, duration: 0.15, ease: "power2.out" }, w.start);
+            tl.to(
+              wordEl,
+              { filter: "brightness(1.05)", duration: 0.08, ease: "power2.out" },
+              w.start,
+            );
+            tl.to(
+              wordEl,
+              { filter: "brightness(1)", duration: 0.16, ease: "power2.out" },
+              w.start + 0.08,
+            );
+            tl.to(bgEl, { opacity: 0, scaleX: 1.02, duration: 0.1, ease: "power2.in" }, w.end);
+            tl.set(bgEl, { scaleX: 0 }, w.end + 0.1);
+          });
+
+          tl.to(grp, { opacity: 0, duration: 0.1, ease: "power2.in" }, g.end - 0.1);
+          tl.set(grp, { opacity: 0, visibility: "hidden" }, g.end);
+        });
+
+        tl.seek(0);
+        window.__timelines["caption-highlight"] = tl;
+      })();
+    </script>
+  </body>
+</html>
+```
+
+</Accordion>
 
-Open `compositions/components/caption-highlight.html` and copy what is inside into your own composition.
+## Usage
 
-A component has no size or duration of its own. It takes both from the composition
-you paste it into.
+Open `compositions/components/caption-highlight.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/components/caption-kinetic-slam.mdx b/docs/catalog/components/caption-kinetic-slam.mdx
index efb32ef2c7..339c9ca830 100644
--- a/docs/catalog/components/caption-kinetic-slam.mdx
+++ b/docs/catalog/components/caption-kinetic-slam.mdx
@@ -3,22 +3,222 @@ title: "Kinetic Slam"
 description: "Full-screen single-word display with alternating entrance directions"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-kinetic-slam.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-kinetic-slam.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/components/caption-kinetic-slam.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Kinetic Slam preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add caption-kinetic-slam
-```
+<InstallCommand command="npx hyperframes add caption-kinetic-slam" />
 
 That writes one file: `compositions/components/caption-kinetic-slam.html`.
 
-## Paste it into your composition
+## Source
+
+<Accordion title={`caption-kinetic-slam.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Kinetic Slam</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: transparent;
+      }
+      #kinetic-slam {
+        pointer-events: none;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent;
+      }
+      .kt-overlay {
+        position: absolute;
+        inset: 0;
+        background: transparent;
+        z-index: 1;
+        pointer-events: none;
+      }
+      #kt-container {
+        position: absolute;
+        inset: 0;
+        z-index: 10;
+        pointer-events: none;
+      }
+      .kt-word {
+        font-family: "Anton", sans-serif;
+        font-weight: 400;
+        text-transform: uppercase;
+        color: #ffffff;
+        position: absolute;
+        left: 0;
+        width: 100%;
+        text-align: center;
+        top: 50%;
+        letter-spacing: 0.04em;
+        line-height: 1;
+        opacity: 0;
+        visibility: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="kinetic-slam"
+      data-composition-id="caption-kinetic-slam"
+      data-timeline-locked
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="kt-overlay"></div>
+      <div id="kt-container"></div>
+    </div>
+
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        var _fitCanvas = document.createElement("canvas");
+        var _fitCtx = _fitCanvas.getContext("2d");
+        function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {
+          var size = baseFontSize;
+          var minSize = Math.floor(baseFontSize * 0.45);
+          while (size > minSize) {
+            _fitCtx.font = fontWeight + " " + size + "px " + fontFamily;
+            if (_fitCtx.measureText(text).width <= maxWidth) return size;
+            size -= 2;
+          }
+          return minSize;
+        }
+
+        function mulberry32(seed) {
+          return function () {
+            seed |= 0;
+            seed = (seed + 0x6d2b79f5) | 0;
+            var t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
+            t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+            return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+          };
+        }
+
+        var WORDS = [
+          { text: "Every", start: 0.0, end: 0.3 },
+          { text: "great", start: 0.3, end: 0.55 },
+          { text: "video", start: 0.55, end: 0.85 },
+          { text: "starts", start: 0.85, end: 1.1 },
+          { text: "with", start: 1.1, end: 1.25 },
+          { text: "a", start: 1.25, end: 1.35 },
+          { text: "single", start: 1.35, end: 1.65 },
+          { text: "frame.", start: 1.65, end: 2.0 },
+          { text: "HyperFrames", start: 2.1, end: 2.65 },
+          { text: "lets", start: 2.65, end: 2.85 },
+          { text: "you", start: 2.85, end: 2.95 },
+          { text: "write", start: 2.95, end: 3.15 },
+          { text: "HTML", start: 3.15, end: 3.55 },
+          { text: "and", start: 3.55, end: 3.65 },
+          { text: "render", start: 3.65, end: 3.95 },
+          { text: "professional", start: 3.95, end: 4.45 },
+          { text: "video.", start: 4.45, end: 4.8 },
+          { text: "No", start: 4.9, end: 5.05 },
+          { text: "timeline.", start: 5.05, end: 5.45 },
+          { text: "No", start: 5.5, end: 5.65 },
+          { text: "drag", start: 5.65, end: 5.85 },
+          { text: "and", start: 5.85, end: 5.95 },
+          { text: "drop.", start: 5.95, end: 6.25 },
+          { text: "Just", start: 6.35, end: 6.55 },
+          { text: "code", start: 6.55, end: 6.8 },
+          { text: "that", start: 6.8, end: 6.95 },
+          { text: "becomes", start: 6.95, end: 7.3 },
+          { text: "cinema.", start: 7.3, end: 7.7 },
+        ];
+
+        var KEYWORDS = new Set([8, 12, 15, 24, 27]); // HyperFrames, HTML, professional, code, cinema.
+
+        var container = document.getElementById("kt-container");
+        var tl = gsap.timeline({ paused: true });
+
+        WORDS.forEach(function (w, wi) {
+          var el = document.createElement("div");
+          el.className = "kt-word";
+          el.id = "kt-w-" + wi;
+          el.textContent = w.text.toUpperCase();
+          el.style.fontSize =
+            fitFontSize(w.text.toUpperCase(), 220, "400", "'Anton', sans-serif", 1720) + "px";
+          if (KEYWORDS.has(wi)) el.style.color = "#FFD700";
+          container.appendChild(el);
+
+          gsap.set(el, { yPercent: -50 });
+
+          var entranceMode = wi % 4;
+          tl.set(el, { visibility: "visible" }, w.start);
+          if (entranceMode === 0) {
+            tl.fromTo(
+              el,
+              { y: -120, opacity: 0 },
+              { y: 0, opacity: 1, duration: 0.22, ease: "back.out(1.7)" },
+              w.start,
+            );
+          } else if (entranceMode === 1) {
+            tl.fromTo(
+              el,
+              { x: -300, opacity: 0 },
+              { x: 0, opacity: 1, duration: 0.2, ease: "expo.out" },
+              w.start,
+            );
+          } else if (entranceMode === 2) {
+            tl.fromTo(
+              el,
+              { x: 300, opacity: 0 },
+              { x: 0, opacity: 1, duration: 0.2, ease: "expo.out" },
+              w.start,
+            );
+          } else {
+            tl.fromTo(
+              el,
+              { scale: 0.4, opacity: 0 },
+              { scale: 1, opacity: 1, duration: 0.24, ease: "back.out(2.2)" },
+              w.start,
+            );
+          }
+
+          tl.to(el, { opacity: 0, duration: 0.1, ease: "power2.in" }, w.end);
+          tl.set(el, { opacity: 0, visibility: "hidden" }, w.end + 0.1);
+        });
+
+        tl.seek(0);
+        window.__timelines["caption-kinetic-slam"] = tl;
+      })();
+    </script>
+  </body>
+</html>
+```
+
+</Accordion>
 
-Open `compositions/components/caption-kinetic-slam.html` and copy what is inside into your own composition.
+## Usage
 
-A component has no size or duration of its own. It takes both from the composition
-you paste it into.
+Open `compositions/components/caption-kinetic-slam.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/components/caption-matrix-decode.mdx b/docs/catalog/components/caption-matrix-decode.mdx
index d363539901..5edb6d815e 100644
--- a/docs/catalog/components/caption-matrix-decode.mdx
+++ b/docs/catalog/components/caption-matrix-decode.mdx
@@ -3,22 +3,278 @@ title: "Matrix Decode"
 description: "Character scramble animation before text reveal"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-matrix-decode.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-matrix-decode.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/components/caption-matrix-decode.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Matrix Decode preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add caption-matrix-decode
-```
+<InstallCommand command="npx hyperframes add caption-matrix-decode" />
 
 That writes one file: `compositions/components/caption-matrix-decode.html`.
 
-## Paste it into your composition
+## Source
+
+<Accordion title={`caption-matrix-decode.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Matrix Decode</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@700&display=swap"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: transparent;
+      }
+      #matrix-decode {
+        pointer-events: none;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent;
+      }
+      .sc-overlay {
+        position: absolute;
+        inset: 0;
+        background: transparent;
+        z-index: 1;
+        pointer-events: none;
+      }
+      #sc-container {
+        position: absolute;
+        inset: 0;
+        z-index: 10;
+        pointer-events: none;
+      }
+      .sc-group {
+        position: absolute;
+        bottom: 120px;
+        left: 0;
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: flex-end;
+        justify-content: center;
+        gap: 24px;
+        padding: 0 80px;
+        opacity: 0;
+        visibility: hidden;
+      }
+      .sc-word-wrap {
+        font-family: "Space Grotesk", sans-serif;
+        font-weight: 700;
+        font-size: 96px;
+        color: #00ff41;
+        display: inline-block;
+        letter-spacing: 0.04em;
+        line-height: 1;
+        position: relative;
+      }
+      .sc-real {
+        display: none;
+      }
+      .sc-scr0 {
+        display: none;
+      }
+      .sc-scr1 {
+        display: none;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="matrix-decode"
+      data-composition-id="caption-matrix-decode"
+      data-timeline-locked
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="sc-overlay"></div>
+      <div id="sc-container"></div>
+    </div>
+
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        var _fitCanvas = document.createElement("canvas");
+        var _fitCtx = _fitCanvas.getContext("2d");
+        function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {
+          var size = baseFontSize;
+          var minSize = Math.floor(baseFontSize * 0.45);
+          while (size > minSize) {
+            _fitCtx.font = fontWeight + " " + size + "px " + fontFamily;
+            if (_fitCtx.measureText(text).width <= maxWidth) return size;
+            size -= 2;
+          }
+          return minSize;
+        }
+
+        function mulberry32(seed) {
+          return function () {
+            seed |= 0;
+            seed = (seed + 0x6d2b79f5) | 0;
+            var t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
+            t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+            return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+          };
+        }
+
+        var ALPHANUM = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+
+        function scrambleChars(seed) {
+          var rng = mulberry32(seed);
+          var result = "";
+          for (var i = 0; i < 4; i++) {
+            result += ALPHANUM[Math.floor(rng() * ALPHANUM.length)];
+          }
+          return result;
+        }
+
+        var WORDS = [
+          { text: "Every", start: 0.0, end: 0.3 },
+          { text: "great", start: 0.3, end: 0.55 },
+          { text: "video", start: 0.55, end: 0.85 },
+          { text: "starts", start: 0.85, end: 1.1 },
+          { text: "with", start: 1.1, end: 1.25 },
+          { text: "a", start: 1.25, end: 1.35 },
+          { text: "single", start: 1.35, end: 1.65 },
+          { text: "frame.", start: 1.65, end: 2.0 },
+          { text: "HyperFrames", start: 2.1, end: 2.65 },
+          { text: "lets", start: 2.65, end: 2.85 },
+          { text: "you", start: 2.85, end: 2.95 },
+          { text: "write", start: 2.95, end: 3.15 },
+          { text: "HTML", start: 3.15, end: 3.55 },
+          { text: "and", start: 3.55, end: 3.65 },
+          { text: "render", start: 3.65, end: 3.95 },
+          { text: "professional", start: 3.95, end: 4.45 },
+          { text: "video.", start: 4.45, end: 4.8 },
+          { text: "No", start: 4.9, end: 5.05 },
+          { text: "timeline.", start: 5.05, end: 5.45 },
+          { text: "No", start: 5.5, end: 5.65 },
+          { text: "drag", start: 5.65, end: 5.85 },
+          { text: "and", start: 5.85, end: 5.95 },
+          { text: "drop.", start: 5.95, end: 6.25 },
+          { text: "Just", start: 6.35, end: 6.55 },
+          { text: "code", start: 6.55, end: 6.8 },
+          { text: "that", start: 6.8, end: 6.95 },
+          { text: "becomes", start: 6.95, end: 7.3 },
+          { text: "cinema.", start: 7.3, end: 7.7 },
+        ];
+
+        var GROUPS = [
+          { wordStart: 0, wordEnd: 3, start: 0.0, end: 1.35 },
+          { wordStart: 4, wordEnd: 7, start: 1.1, end: 2.35 },
+          { wordStart: 8, wordEnd: 8, start: 2.1, end: 2.9 },
+          { wordStart: 9, wordEnd: 12, start: 2.65, end: 3.8 },
+          { wordStart: 13, wordEnd: 15, start: 3.55, end: 4.7 },
+          { wordStart: 16, wordEnd: 16, start: 3.95, end: 5.0 },
+          { wordStart: 17, wordEnd: 19, start: 4.9, end: 5.7 },
+          { wordStart: 20, wordEnd: 22, start: 5.65, end: 6.5 },
+          { wordStart: 23, wordEnd: 24, start: 6.35, end: 7.05 },
+          { wordStart: 25, wordEnd: 27, start: 6.8, end: 7.9 },
+        ];
+
+        var container = document.getElementById("sc-container");
+        var tl = gsap.timeline({ paused: true });
+
+        GROUPS.forEach(function (g, gi) {
+          var groupWords = WORDS.slice(g.wordStart, g.wordEnd + 1);
+          var groupText = groupWords
+            .map(function (w) {
+              return w.text;
+            })
+            .join(" ");
+          var fontSize = fitFontSize(groupText, 96, "700", "'Space Grotesk', sans-serif", 1760);
+          var grp = document.createElement("div");
+          grp.className = "sc-group";
+          grp.id = "sc-grp-" + gi;
+
+          groupWords.forEach(function (w, i) {
+            var wi = g.wordStart + i;
+            var wordWrap = document.createElement("span");
+            wordWrap.className = "sc-word-wrap";
+            wordWrap.id = "sc-ww-" + wi;
+            wordWrap.style.fontSize = fontSize + "px";
+
+            var real = document.createElement("span");
+            real.className = "sc-real";
+            real.id = "sc-real-" + wi;
+            real.textContent = w.text;
+            wordWrap.appendChild(real);
+
+            var scr0 = document.createElement("span");
+            scr0.className = "sc-scr0";
+            scr0.id = "sc-scr0-" + wi;
+            scr0.textContent = scrambleChars(wi * 1000 + 0);
+            wordWrap.appendChild(scr0);
+
+            var scr1 = document.createElement("span");
+            scr1.className = "sc-scr1";
+            scr1.id = "sc-scr1-" + wi;
+            scr1.textContent = scrambleChars(wi * 1000 + 1);
+            wordWrap.appendChild(scr1);
+
+            grp.appendChild(wordWrap);
+          });
+
+          container.appendChild(grp);
+
+          tl.set(grp, { visibility: "visible", opacity: 0 }, g.start);
+          tl.fromTo(grp, { opacity: 0 }, { opacity: 1, duration: 0.1 }, g.start);
+
+          groupWords.forEach(function (w, i) {
+            var wi = g.wordStart + i;
+            var realEl = document.getElementById("sc-real-" + wi);
+            var scr0El = document.getElementById("sc-scr0-" + wi);
+            var scr1El = document.getElementById("sc-scr1-" + wi);
+
+            tl.set(scr0El, { display: "inline" }, w.start);
+            tl.set(scr1El, { display: "inline" }, w.start + 0.1);
+            tl.set(scr0El, { display: "none" }, w.start + 0.1);
+            tl.set(realEl, { display: "inline" }, w.start + 0.2);
+            tl.set(scr1El, { display: "none" }, w.start + 0.2);
+          });
+
+          tl.to(grp, { opacity: 0, duration: 0.12 }, g.end - 0.12);
+          tl.set(grp, { opacity: 0, visibility: "hidden" }, g.end);
+        });
+
+        window.__timelines["caption-matrix-decode"] = tl;
+      })();
+    </script>
+  </body>
+</html>
+```
+
+</Accordion>
 
-Open `compositions/components/caption-matrix-decode.html` and copy what is inside into your own composition.
+## Usage
 
-A component has no size or duration of its own. It takes both from the composition
-you paste it into.
+Open `compositions/components/caption-matrix-decode.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/components/caption-neon-accent.mdx b/docs/catalog/components/caption-neon-accent.mdx
index 1ab8619c42..5398518432 100644
--- a/docs/catalog/components/caption-neon-accent.mdx
+++ b/docs/catalog/components/caption-neon-accent.mdx
@@ -3,22 +3,542 @@ title: "Neon Accent"
 description: "Multi-color neon glow accents with wiggle drift animation"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-neon-accent.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-neon-accent.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/components/caption-neon-accent.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Neon Accent preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add caption-neon-accent
-```
+<InstallCommand command="npx hyperframes add caption-neon-accent" />
 
 That writes one file: `compositions/components/caption-neon-accent.html`.
 
-## Paste it into your composition
+## Source
+
+<Accordion title={`caption-neon-accent.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Neon Accent</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@800&display=swap"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: transparent;
+        font-family: "Montserrat", Arial, sans-serif;
+      }
+
+      #neon-accent {
+        pointer-events: none;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent;
+      }
+
+      .caption-layer {
+        position: absolute;
+        inset: 0;
+        z-index: 20;
+        pointer-events: none;
+        transform: translateZ(0);
+      }
+
+      .safe-zone {
+        position: absolute;
+        bottom: 100px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 1400px;
+        height: 260px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .caption-group {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 1400px;
+        height: 260px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0;
+        transform-origin: 50% 50%;
+        will-change: transform;
+        backface-visibility: hidden;
+      }
+
+      .caption-copy {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        max-width: 1400px;
+        text-align: center;
+      }
+
+      .caption-line {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 16px;
+        width: max-content;
+        max-width: 1400px;
+        line-height: 1.1;
+        white-space: nowrap;
+      }
+
+      .caption-word {
+        display: inline-block;
+        color: #ffffff;
+        font-family: "Montserrat", Arial, sans-serif;
+        font-weight: 800;
+        font-size: 88px;
+        line-height: 1.1;
+        letter-spacing: 0;
+        text-transform: uppercase;
+      }
+
+      .caption-word.accent {
+        font-size: 106px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="neon-accent"
+      data-composition-id="caption-neon-accent"
+      data-timeline-locked
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="caption-layer" aria-hidden="true">
+        <div id="caption-stage" class="safe-zone"></div>
+      </div>
+    </div>
+
+    <script>
+      var DURATION = 8;
+      var SAFE_ZONE_WIDTH = 1400;
+      var BASE_FONT_SIZE = 88;
+      var ACCENT_FONT_SIZE = 106;
+      var MIN_FONT_SIZE = 62;
+      var MAX_WORDS_PER_GROUP = 4;
+      var WORD_SPACING = 16;
+      var PAUSE_THRESHOLD = 0.1;
+      var ENTRY_DURATION = 7 / 30;
+      var WIGGLE_DISTANCE = 14;
+      var WIGGLE_CYCLE = 2 / 1.3;
+      var FONT_WIDTH_SAFETY = 1.14;
+      var PRIMARY_COLOR = "#FFFFFF";
+      var ACCENT_COLORS = ["#53FF01", "#FF0002", "#FCFF00"];
+      var TRANSITION_WORDS = new Set([
+        "the",
+        "a",
+        "an",
+        "and",
+        "or",
+        "but",
+        "is",
+        "are",
+        "was",
+        "were",
+        "to",
+        "of",
+        "in",
+        "on",
+        "at",
+        "for",
+        "with",
+        "by",
+        "from",
+        "as",
+        "it",
+        "its",
+        "this",
+        "that",
+        "these",
+        "those",
+        "be",
+        "been",
+        "have",
+        "has",
+        "had",
+        "do",
+        "does",
+        "did",
+        "will",
+        "would",
+        "could",
+        "should",
+        "may",
+        "might",
+        "must",
+        "can",
+        "if",
+        "then",
+        "so",
+        "just",
+        "not",
+        "no",
+        "yes",
+        "up",
+        "out",
+        "about",
+        "lets",
+        "you",
+        "write",
+        "render",
+      ]);
+      var KEYWORDS = new Set(["hyperframes", "html", "professional", "code", "cinema"]);
+
+      var TRANSCRIPT = [
+        { text: "Every", start: 0.0, end: 0.3 },
+        { text: "great", start: 0.3, end: 0.55 },
+        { text: "video", start: 0.55, end: 0.85 },
+        { text: "starts", start: 0.85, end: 1.1 },
+        { text: "with", start: 1.1, end: 1.25 },
+        { text: "a", start: 1.25, end: 1.35 },
+        { text: "single", start: 1.35, end: 1.65 },
+        { text: "frame.", start: 1.65, end: 2.0 },
+        { text: "HyperFrames", start: 2.1, end: 2.65 },
+        { text: "lets", start: 2.65, end: 2.85 },
+        { text: "you", start: 2.85, end: 2.95 },
+        { text: "write", start: 2.95, end: 3.15 },
+        { text: "HTML", start: 3.15, end: 3.55 },
+        { text: "and", start: 3.55, end: 3.65 },
+        { text: "render", start: 3.65, end: 3.95 },
+        { text: "professional", start: 3.95, end: 4.45 },
+        { text: "video.", start: 4.45, end: 4.8 },
+        { text: "No", start: 4.9, end: 5.05 },
+        { text: "timeline.", start: 5.05, end: 5.45 },
+        { text: "No", start: 5.5, end: 5.65 },
+        { text: "drag", start: 5.65, end: 5.85 },
+        { text: "and", start: 5.85, end: 5.95 },
+        { text: "drop.", start: 5.95, end: 6.25 },
+        { text: "Just", start: 6.35, end: 6.55 },
+        { text: "code", start: 6.55, end: 6.8 },
+        { text: "that", start: 6.8, end: 6.95 },
+        { text: "becomes", start: 6.95, end: 7.3 },
+        { text: "cinema.", start: 7.3, end: 7.7 },
+      ];
+
+      var _fitCanvas = document.createElement("canvas");
+      var _fitCtx = _fitCanvas.getContext("2d");
+      function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {
+        var size = baseFontSize;
+        var minSize = Math.floor(baseFontSize * 0.45);
+        while (size > minSize) {
+          _fitCtx.font = fontWeight + " " + size + "px " + fontFamily;
+          if (_fitCtx.measureText(text).width <= maxWidth) return size;
+          size -= 2;
+        }
+        return minSize;
+      }
+
+      gsap.registerPlugin && gsap.registerPlugin();
+
+      function cleanText(text) {
+        return String(text || "").trim();
+      }
+
+      function normalizeWords(rawWords) {
+        return rawWords
+          .map(function (item) {
+            return {
+              text: cleanText(item.word || item.text),
+              start: Math.max(0, Number(item.start) || 0),
+              end: Math.min(DURATION, Math.max(Number(item.start) || 0, Number(item.end) || 0)),
+            };
+          })
+          .filter(function (word) {
+            return word.text.length > 0;
+          });
+      }
+
+      var measureCanvas = document.createElement("canvas");
+      var measureContext = measureCanvas.getContext("2d");
+
+      function seededRandom(seed) {
+        var x = Math.sin(seed * 9999) * 10000;
+        return x - Math.floor(x);
+      }
+
+      function isKeyword(text) {
+        return KEYWORDS.has(text.toLowerCase().replace(/[^a-z]/g, ""));
+      }
+
+      function assignWordColors(words, groupIndex) {
+        return words.map(function (word) {
+          if (isKeyword(word.text)) {
+            var colorIndex = Math.floor(seededRandom(groupIndex * 23 + 7) * ACCENT_COLORS.length);
+            return ACCENT_COLORS[colorIndex];
+          }
+          var clean = word.text.toLowerCase().replace(/[^a-z']/g, "");
+          if (TRANSITION_WORDS.has(clean)) return PRIMARY_COLOR;
+          var rand = seededRandom(groupIndex * 7 + words.indexOf(word));
+          if (rand > 0.6) {
+            var ci = Math.floor(rand * ACCENT_COLORS.length) % ACCENT_COLORS.length;
+            return ACCENT_COLORS[ci];
+          }
+          return PRIMARY_COLOR;
+        });
+      }
+
+      function measureWord(word, color, fontSize) {
+        var size = color === PRIMARY_COLOR ? fontSize : fontSize * 1.2;
+        measureContext.font = "800 " + size + "px Montserrat";
+        return measureContext.measureText(word.text.toUpperCase()).width * FONT_WIDTH_SAFETY;
+      }
+
+      function measureLineWidth(words, colors, fontSize) {
+        return words.reduce(function (total, word, index) {
+          return (
+            total +
+            measureWord(word, colors[index] || PRIMARY_COLOR, fontSize) +
+            (index ? WORD_SPACING : 0)
+          );
+        }, 0);
+      }
+
+      function splitLinesForGroup(words, colors, fontSize) {
+        var maxLineWidth = SAFE_ZONE_WIDTH;
+        if (
+          words.some(function (word, i) {
+            return measureWord(word, colors[i] || PRIMARY_COLOR, fontSize) > maxLineWidth;
+          })
+        )
+          return null;
+        if (measureLineWidth(words, colors, fontSize) <= maxLineWidth)
+          return [{ words: words, colors: colors }];
+        var best = null;
+        var bestDiff = Infinity;
+        for (var split = 1; split < words.length; split++) {
+          var fw = words.slice(0, split),
+            sw = words.slice(split);
+          var fc = colors.slice(0, split),
+            sc = colors.slice(split);
+          var fW = measureLineWidth(fw, fc, fontSize);
+          var sW = measureLineWidth(sw, sc, fontSize);
+          if (fW <= maxLineWidth && sW <= maxLineWidth) {
+            var diff = Math.abs(fW - sW);
+            if (diff < bestDiff) {
+              best = [
+                { words: fw, colors: fc },
+                { words: sw, colors: sc },
+              ];
+              bestDiff = diff;
+            }
+          }
+        }
+        return best;
+      }
+
+      function makeGroups(words) {
+        var groups = [];
+        var current = [];
+        words.forEach(function (word, index) {
+          var nextWord = words[index + 1];
+          var testGroup = current.concat([word]);
+          var exceedsWords = testGroup.length > MAX_WORDS_PER_GROUP;
+          var colors = assignWordColors(testGroup, groups.length);
+          var exceedsFit = !splitLinesForGroup(testGroup, colors, BASE_FONT_SIZE);
+          if (exceedsWords || exceedsFit) {
+            if (current.length) groups.push(makeGroup(current, groups.length));
+            current = [word];
+            return;
+          }
+          current.push(word);
+          var punctuation = /[,.:!?]$/.test(word.text);
+          var pause = nextWord ? nextWord.start - word.end : 0;
+          if (
+            !nextWord ||
+            punctuation ||
+            pause >= PAUSE_THRESHOLD ||
+            current.length >= MAX_WORDS_PER_GROUP
+          ) {
+            groups.push(makeGroup(current, groups.length));
+            current = [];
+          }
+        });
+        if (current.length) groups.push(makeGroup(current, groups.length));
+        return groups;
+      }
+
+      function makeGroup(words, groupIndex) {
+        var colors = assignWordColors(words, groupIndex);
+        var groupText = words
+          .map(function (w) {
+            return w.text.toUpperCase();
+          })
+          .join(" ");
+        var fontSize = fitFontSize(groupText, BASE_FONT_SIZE, "800", "Montserrat", SAFE_ZONE_WIDTH);
+        while (fontSize > MIN_FONT_SIZE && !splitLinesForGroup(words, colors, fontSize)) {
+          fontSize -= 2;
+        }
+        return {
+          words: words.slice(),
+          colors: colors,
+          fontSize: fontSize,
+          lines: splitLinesForGroup(words, colors, fontSize) || [{ words: words, colors: colors }],
+          start: words[0].start,
+          end: words[words.length - 1].end,
+        };
+      }
+
+      function shadowForColor(color) {
+        var hex = color.replace("#", "");
+        var r = parseInt(hex.slice(0, 2), 16);
+        var g = parseInt(hex.slice(2, 4), 16);
+        var b = parseInt(hex.slice(4, 6), 16);
+        var glow =
+          "0 0 4px rgba(" +
+          r +
+          "," +
+          g +
+          "," +
+          b +
+          ",1), 0 0 10px rgba(" +
+          r +
+          "," +
+          g +
+          "," +
+          b +
+          ",0.9), 0 0 20px rgba(" +
+          r +
+          "," +
+          g +
+          "," +
+          b +
+          ",0.7), 0 0 40px rgba(" +
+          r +
+          "," +
+          g +
+          "," +
+          b +
+          ",0.4)";
+        return "0 8px 16px rgba(0,0,0,0.8), 0 16px 40px rgba(0,0,0,0.6), " + glow;
+      }
+
+      function buildCaptions(groups) {
+        var stage = document.getElementById("caption-stage");
+        groups.forEach(function (group, groupIndex) {
+          var groupEl = document.createElement("div");
+          var copyEl = document.createElement("div");
+          groupEl.id = "caption-group-" + groupIndex;
+          groupEl.className = "caption-group";
+          copyEl.className = "caption-copy";
+          group.lines.slice(0, 2).forEach(function (line) {
+            var lineEl = document.createElement("div");
+            lineEl.className = "caption-line";
+            line.words.forEach(function (word, wordIndex) {
+              var color = line.colors[wordIndex] || PRIMARY_COLOR;
+              var wordEl = document.createElement("span");
+              wordEl.className = color === PRIMARY_COLOR ? "caption-word" : "caption-word accent";
+              wordEl.textContent = word.text.toUpperCase();
+              wordEl.style.color = color;
+              wordEl.style.fontSize =
+                color === PRIMARY_COLOR ? group.fontSize + "px" : group.fontSize * 1.2 + "px";
+              wordEl.style.textShadow = shadowForColor(color);
+              lineEl.appendChild(wordEl);
+            });
+            copyEl.appendChild(lineEl);
+          });
+          groupEl.appendChild(copyEl);
+          stage.appendChild(groupEl);
+        });
+      }
+
+      var WORDS = normalizeWords(TRANSCRIPT);
+      var GROUPS = makeGroups(WORDS);
+      buildCaptions(GROUPS);
+
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+
+      var visibleStarts = GROUPS.map(function (group, groupIndex) {
+        var prev = GROUPS[groupIndex - 1];
+        var availableGap = prev ? Math.max(0, group.start - prev.end) : ENTRY_DURATION;
+        var entryLead = Math.min(ENTRY_DURATION, availableGap);
+        return Math.max(0, group.start - entryLead);
+      });
+
+      var allGroupEls = GROUPS.map(function (_, i) {
+        return document.getElementById("caption-group-" + i);
+      });
+
+      GROUPS.forEach(function (group, groupIndex) {
+        var groupEl = allGroupEls[groupIndex];
+        var visibleStart = visibleStarts[groupIndex];
+        var visibleEnd = groupIndex < GROUPS.length - 1 ? visibleStarts[groupIndex + 1] : DURATION;
+        var direction = groupIndex % 2 === 0 ? -1 : 1;
+        var D = WIGGLE_DISTANCE * direction;
+        var wiggleCycles = Math.max(1, Math.ceil((visibleEnd - visibleStart) / WIGGLE_CYCLE));
+
+        allGroupEls.forEach(function (otherEl, otherIndex) {
+          if (otherIndex !== groupIndex) tl.set(otherEl, { opacity: 0 }, visibleStart);
+        });
+
+        tl.set(groupEl, { opacity: 0, scale: 0.65, x: 0, y: 0 }, visibleStart);
+        tl.to(
+          groupEl,
+          { opacity: 1, scale: 1, duration: ENTRY_DURATION, ease: "power3.out", force3D: true },
+          visibleStart,
+        );
+        tl.to(
+          groupEl,
+          {
+            x: D,
+            y: D,
+            duration: WIGGLE_CYCLE / 2,
+            ease: "sine.inOut",
+            yoyo: true,
+            repeat: Math.max(0, wiggleCycles * 2 - 1),
+            force3D: true,
+          },
+          visibleStart,
+        );
+        tl.set(groupEl, { opacity: 0 }, visibleEnd);
+      });
+
+      window.__timelines["caption-neon-accent"] = tl;
+    </script>
+  </body>
+</html>
+```
+
+</Accordion>
 
-Open `compositions/components/caption-neon-accent.html` and copy what is inside into your own composition.
+## Usage
 
-A component has no size or duration of its own. It takes both from the composition
-you paste it into.
+Open `compositions/components/caption-neon-accent.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/components/caption-neon-glow.mdx b/docs/catalog/components/caption-neon-glow.mdx
index 54302cbcfa..a28806b4c2 100644
--- a/docs/catalog/components/caption-neon-glow.mdx
+++ b/docs/catalog/components/caption-neon-glow.mdx
@@ -3,22 +3,244 @@ title: "Neon Glow"
 description: "Cyan and magenta neon glow with keyword accent colors"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-neon-glow.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-neon-glow.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/components/caption-neon-glow.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Neon Glow preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add caption-neon-glow
-```
+<InstallCommand command="npx hyperframes add caption-neon-glow" />
 
 That writes one file: `compositions/components/caption-neon-glow.html`.
 
-## Paste it into your composition
+## Source
+
+<Accordion title={`caption-neon-glow.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Neon Glow</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Outfit:wght@900&display=swap"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: transparent;
+      }
+      #neon-glow {
+        pointer-events: none;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent;
+      }
+      .ne-overlay {
+        position: absolute;
+        inset: 0;
+        background: transparent;
+        z-index: 1;
+        pointer-events: none;
+      }
+      #ne-container {
+        position: absolute;
+        inset: 0;
+        z-index: 10;
+        pointer-events: none;
+      }
+      .ne-group {
+        position: absolute;
+        bottom: 120px;
+        left: 0;
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: flex-end;
+        justify-content: center;
+        gap: 24px;
+        padding: 0 80px;
+        opacity: 0;
+        visibility: hidden;
+      }
+      .ne-word {
+        font-family: "Outfit", sans-serif;
+        font-weight: 900;
+        font-size: 96px;
+        text-transform: uppercase;
+        color: rgba(0, 255, 240, 0.14);
+        display: inline-block;
+        letter-spacing: 0.04em;
+        line-height: 1;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="neon-glow"
+      data-composition-id="caption-neon-glow"
+      data-timeline-locked
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="ne-overlay"></div>
+      <div id="ne-container"></div>
+    </div>
+
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        var _fitCanvas = document.createElement("canvas");
+        var _fitCtx = _fitCanvas.getContext("2d");
+        function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {
+          var size = baseFontSize;
+          var minSize = Math.floor(baseFontSize * 0.45);
+          while (size > minSize) {
+            _fitCtx.font = fontWeight + " " + size + "px " + fontFamily;
+            if (_fitCtx.measureText(text).width <= maxWidth) return size;
+            size -= 2;
+          }
+          return minSize;
+        }
+
+        var WORDS = [
+          { text: "Every", start: 0.0, end: 0.3 },
+          { text: "great", start: 0.3, end: 0.55 },
+          { text: "video", start: 0.55, end: 0.85 },
+          { text: "starts", start: 0.85, end: 1.1 },
+          { text: "with", start: 1.1, end: 1.25 },
+          { text: "a", start: 1.25, end: 1.35 },
+          { text: "single", start: 1.35, end: 1.65 },
+          { text: "frame.", start: 1.65, end: 2.0 },
+          { text: "HyperFrames", start: 2.1, end: 2.65 },
+          { text: "lets", start: 2.65, end: 2.85 },
+          { text: "you", start: 2.85, end: 2.95 },
+          { text: "write", start: 2.95, end: 3.15 },
+          { text: "HTML", start: 3.15, end: 3.55 },
+          { text: "and", start: 3.55, end: 3.65 },
+          { text: "render", start: 3.65, end: 3.95 },
+          { text: "professional", start: 3.95, end: 4.45 },
+          { text: "video.", start: 4.45, end: 4.8 },
+          { text: "No", start: 4.9, end: 5.05 },
+          { text: "timeline.", start: 5.05, end: 5.45 },
+          { text: "No", start: 5.5, end: 5.65 },
+          { text: "drag", start: 5.65, end: 5.85 },
+          { text: "and", start: 5.85, end: 5.95 },
+          { text: "drop.", start: 5.95, end: 6.25 },
+          { text: "Just", start: 6.35, end: 6.55 },
+          { text: "code", start: 6.55, end: 6.8 },
+          { text: "that", start: 6.8, end: 6.95 },
+          { text: "becomes", start: 6.95, end: 7.3 },
+          { text: "cinema.", start: 7.3, end: 7.7 },
+        ];
+
+        var GROUPS = [
+          { wordStart: 0, wordEnd: 3, start: 0.0, end: 1.05 },
+          { wordStart: 4, wordEnd: 7, start: 1.1, end: 2.05 },
+          { wordStart: 8, wordEnd: 8, start: 2.1, end: 2.6 },
+          { wordStart: 9, wordEnd: 12, start: 2.65, end: 3.5 },
+          { wordStart: 13, wordEnd: 15, start: 3.55, end: 4.4 },
+          { wordStart: 16, wordEnd: 16, start: 3.95, end: 4.75 },
+          { wordStart: 17, wordEnd: 19, start: 4.9, end: 5.4 },
+          { wordStart: 20, wordEnd: 22, start: 5.65, end: 6.2 },
+          { wordStart: 23, wordEnd: 24, start: 6.35, end: 6.75 },
+          { wordStart: 25, wordEnd: 27, start: 6.8, end: 7.8 },
+        ];
+
+        // Keywords get pink glow; others get cyan glow
+        var KEYWORDS = new Set([8, 12, 15, 24, 27]); // HyperFrames, HTML, professional, code, cinema.
+
+        var container = document.getElementById("ne-container");
+        var tl = gsap.timeline({ paused: true });
+
+        GROUPS.forEach(function (g, gi) {
+          var groupWords = WORDS.slice(g.wordStart, g.wordEnd + 1);
+          var groupText = groupWords
+            .map(function (w) {
+              return w.text.toUpperCase();
+            })
+            .join(" ");
+          var fontSize = fitFontSize(groupText, 96, "900", "'Outfit', sans-serif", 1760);
+          var grp = document.createElement("div");
+          grp.className = "ne-group";
+          grp.id = "ne-grp-" + gi;
+
+          groupWords.forEach(function (w, i) {
+            var wi = g.wordStart + i;
+            var span = document.createElement("span");
+            span.className = "ne-word";
+            span.id = "ne-w-" + wi;
+            span.textContent = w.text;
+            span.style.fontSize = fontSize + "px";
+            grp.appendChild(span);
+          });
+
+          container.appendChild(grp);
+
+          tl.set(grp, { visibility: "visible", opacity: 0 }, g.start);
+          tl.fromTo(grp, { opacity: 0 }, { opacity: 1, duration: 0.05, ease: "steps(1)" }, g.start);
+          tl.fromTo(grp, { x: -8 }, { x: 0, duration: 0.14, ease: "power3.out" }, g.start + 0.05);
+
+          groupWords.forEach(function (w, i) {
+            var wi = g.wordStart + i;
+            var el = document.getElementById("ne-w-" + wi);
+            var isKW = KEYWORDS.has(wi);
+            var activeColor = isKW ? "#FF0099" : "#00FFF0";
+            tl.to(
+              el,
+              {
+                color: activeColor,
+                textShadow:
+                  "0 0 10px " +
+                  activeColor +
+                  ", 0 0 35px " +
+                  activeColor +
+                  ", 0 0 90px " +
+                  activeColor,
+                duration: 0.06,
+              },
+              w.start,
+            );
+            tl.to(el, { color: "rgba(0,255,240,0.14)", textShadow: "none", duration: 0.06 }, w.end);
+          });
+
+          tl.to(grp, { opacity: 0, x: 6, duration: 0.1, ease: "steps(1)" }, g.end - 0.1);
+          tl.set(grp, { opacity: 0, visibility: "hidden" }, g.end);
+        });
+
+        window.__timelines["caption-neon-glow"] = tl;
+      })();
+    </script>
+  </body>
+</html>
+```
+
+</Accordion>
 
-Open `compositions/components/caption-neon-glow.html` and copy what is inside into your own composition.
+## Usage
 
-A component has no size or duration of its own. It takes both from the composition
-you paste it into.
+Open `compositions/components/caption-neon-glow.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/components/caption-parallax-layers.mdx b/docs/catalog/components/caption-parallax-layers.mdx
index d0ae48c6ad..414afcb563 100644
--- a/docs/catalog/components/caption-parallax-layers.mdx
+++ b/docs/catalog/components/caption-parallax-layers.mdx
@@ -3,22 +3,383 @@ title: "Parallax Layers"
 description: "Behind-subject 3D text layering with vertical stretch effect"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-parallax-layers.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-parallax-layers.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/components/caption-parallax-layers.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Parallax Layers preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add caption-parallax-layers
-```
+<InstallCommand command="npx hyperframes add caption-parallax-layers" />
 
 That writes one file: `compositions/components/caption-parallax-layers.html`.
 
-## Paste it into your composition
+## Source
+
+<Accordion title={`caption-parallax-layers.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Parallax Layers</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: transparent;
+        font-family: "Instrument Serif", serif;
+      }
+
+      #parallax-layers {
+        pointer-events: none;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent;
+      }
+
+      /* Behind captions: big red 3D text */
+      .behind-caption-layer {
+        position: absolute;
+        inset: 0;
+        z-index: 10;
+        pointer-events: none;
+        transform: translateZ(0);
+      }
+
+      /* Front captions */
+      .front-caption-layer {
+        position: absolute;
+        inset: 0;
+        z-index: 30;
+        pointer-events: none;
+        transform: translateZ(0);
+      }
+
+      .behind-safe-zone {
+        position: absolute;
+        top: 40px;
+        left: 0;
+        width: 1920px;
+        height: 500px;
+      }
+
+      .front-safe-zone {
+        position: absolute;
+        top: 700px;
+        left: 0;
+        width: 1920px;
+        height: 300px;
+      }
+
+      .caption-block {
+        position: absolute;
+        left: 50%;
+        top: 0;
+        transform: translateX(-50%);
+        opacity: 0;
+        transform-origin: 50% 50%;
+        will-change: transform, opacity;
+        backface-visibility: hidden;
+      }
+
+      .caption-line {
+        display: flex;
+        align-items: baseline;
+        justify-content: center;
+        gap: 14px;
+        line-height: 1.1;
+        white-space: nowrap;
+      }
+
+      .caption-line--behind {
+        transform: scaleY(2.8);
+        transform-origin: 50% 0%;
+      }
+
+      .word {
+        display: inline-block;
+        will-change: transform, opacity;
+        backface-visibility: hidden;
+      }
+
+      .word--behind {
+        font-family: "Instrument Serif", serif;
+        font-size: 220px;
+        font-weight: 400;
+        font-style: normal;
+        line-height: 0.9;
+        color: #e50914;
+        -webkit-text-stroke: 5px #e50914;
+        text-shadow: 2px 4px 4px #a30610;
+      }
+
+      .word--front-normal {
+        font-family: "Instrument Serif", serif;
+        font-size: 130px;
+        font-weight: 400;
+        font-style: normal;
+        color: #eeeeee;
+        text-shadow:
+          0 2px 12px rgba(0, 0, 0, 0.6),
+          0 4px 24px rgba(0, 0, 0, 0.35);
+      }
+
+      .word--front-italic {
+        font-family: "Instrument Serif", serif;
+        font-size: 130px;
+        font-weight: 400;
+        font-style: italic;
+        color: #eeeeee;
+        text-shadow:
+          0 2px 12px rgba(0, 0, 0, 0.6),
+          0 4px 24px rgba(0, 0, 0, 0.35);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="parallax-layers"
+      data-composition-id="caption-parallax-layers"
+      data-timeline-locked
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="behind-caption-layer" aria-hidden="true">
+        <div id="behind-stage" class="behind-safe-zone"></div>
+      </div>
+
+      <div class="front-caption-layer" aria-hidden="true">
+        <div id="front-stage" class="front-safe-zone"></div>
+      </div>
+    </div>
+
+    <script>
+      var DURATION = 8;
+      var BEHIND_WIDTH = 1800;
+      var FRONT_WIDTH = 1750;
+      var ENTRY_DUR = 0.1;
+      var SLIDE_DUR = 0.2;
+
+      var _fitCanvas = document.createElement("canvas");
+      var _fitCtx = _fitCanvas.getContext("2d");
+      function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {
+        var size = baseFontSize;
+        var minSize = Math.floor(baseFontSize * 0.45);
+        while (size > minSize) {
+          _fitCtx.font = fontWeight + " " + size + "px " + fontFamily;
+          if (_fitCtx.measureText(text).width <= maxWidth) return size;
+          size -= 2;
+        }
+        return minSize;
+      }
+
+      var W = [
+        { text: "Every", start: 0.0, end: 0.3 },
+        { text: "great", start: 0.3, end: 0.55 },
+        { text: "video", start: 0.55, end: 0.85 },
+        { text: "starts", start: 0.85, end: 1.1 },
+        { text: "with", start: 1.1, end: 1.25 },
+        { text: "a", start: 1.25, end: 1.35 },
+        { text: "single", start: 1.35, end: 1.65 },
+        { text: "frame.", start: 1.65, end: 2.0 },
+        { text: "HyperFrames", start: 2.1, end: 2.65 },
+        { text: "lets", start: 2.65, end: 2.85 },
+        { text: "you", start: 2.85, end: 2.95 },
+        { text: "write", start: 2.95, end: 3.15 },
+        { text: "HTML", start: 3.15, end: 3.55 },
+        { text: "and", start: 3.55, end: 3.65 },
+        { text: "render", start: 3.65, end: 3.95 },
+        { text: "professional", start: 3.95, end: 4.45 },
+        { text: "video.", start: 4.45, end: 4.8 },
+        { text: "No", start: 4.9, end: 5.05 },
+        { text: "timeline.", start: 5.05, end: 5.45 },
+        { text: "No", start: 5.5, end: 5.65 },
+        { text: "drag", start: 5.65, end: 5.85 },
+        { text: "and", start: 5.85, end: 5.95 },
+        { text: "drop.", start: 5.95, end: 6.25 },
+        { text: "Just", start: 6.35, end: 6.55 },
+        { text: "code", start: 6.55, end: 6.8 },
+        { text: "that", start: 6.8, end: 6.95 },
+        { text: "becomes", start: 6.95, end: 7.3 },
+        { text: "cinema.", start: 7.3, end: 7.7 },
+      ];
+
+      // behind=red 3D emphasis words, front=normal white words
+      var BLOCKS = [
+        { behind: null, front: [[0], [1], [2]] },
+        { behind: [[3]], front: [[4], [5]] },
+        { behind: [[6]], front: [[7]] },
+        { behind: [[8]], front: [[9], [10], [11]] },
+        { behind: [[12]], front: [[13], [14]] },
+        { behind: [[15]], front: [[16]] },
+        { behind: null, front: [[17], [18]] },
+        { behind: null, front: [[19], [20], [21], [22]] },
+        { behind: [[24]], front: [[23], [25], [26]] },
+        { behind: [[27]], front: null },
+      ];
+
+      var behindStage = document.getElementById("behind-stage");
+      var frontStage = document.getElementById("front-stage");
+
+      BLOCKS.forEach(function (block, bi) {
+        var bEl = document.createElement("div");
+        bEl.className = "caption-block";
+        bEl.id = "bb" + bi;
+        if (block.behind) {
+          var behindText = block.behind
+            .map(function (wi_arr) {
+              return W[wi_arr[0]].text;
+            })
+            .join(" ");
+          var behindSize = fitFontSize(behindText, 220, "400", "Instrument Serif", BEHIND_WIDTH);
+          var bLine = document.createElement("div");
+          bLine.className = "caption-line caption-line--behind";
+          block.behind.forEach(function (wi_arr, wi) {
+            var span = document.createElement("span");
+            span.className = "word word--behind";
+            span.id = "bb" + bi + "w" + wi;
+            span.textContent = W[wi_arr[0]].text;
+            span.style.fontSize = behindSize + "px";
+            bLine.appendChild(span);
+          });
+          bEl.appendChild(bLine);
+        }
+        behindStage.appendChild(bEl);
+
+        var fEl = document.createElement("div");
+        fEl.className = "caption-block";
+        fEl.id = "fb" + bi;
+        if (block.front) {
+          var frontText = block.front
+            .map(function (wi_arr) {
+              return W[wi_arr[0]].text;
+            })
+            .join(" ");
+          var frontSize = fitFontSize(frontText, 130, "400", "Instrument Serif", FRONT_WIDTH);
+          var fLine = document.createElement("div");
+          fLine.className = "caption-line";
+          block.front.forEach(function (wi_arr, wi) {
+            var span = document.createElement("span");
+            var isItalic = wi_arr[0] === 7 || wi_arr[0] === 18; // frame., timeline.
+            span.className = "word " + (isItalic ? "word--front-italic" : "word--front-normal");
+            span.id = "fb" + bi + "w" + wi;
+            span.textContent = W[wi_arr[0]].text;
+            span.style.fontSize = frontSize + "px";
+            fLine.appendChild(span);
+          });
+          fEl.appendChild(fLine);
+        }
+        frontStage.appendChild(fEl);
+      });
+
+      var allBehind = BLOCKS.map(function (_, i) {
+        return document.getElementById("bb" + i);
+      });
+      var allFront = BLOCKS.map(function (_, i) {
+        return document.getElementById("fb" + i);
+      });
+
+      function applyBehindScales() {
+        BLOCKS.forEach(function (block, bi) {
+          if (block.behind) {
+            var line = allBehind[bi].querySelector(".caption-line");
+            if (line) {
+              var natW = line.scrollWidth;
+              if (natW > 0) {
+                var s = BEHIND_WIDTH / natW;
+                line.style.transform = "scaleX(" + s + ") scaleY(2.8)";
+              }
+            }
+          }
+        });
+      }
+      applyBehindScales();
+
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+
+      function blockStart(bi) {
+        var b = BLOCKS[bi];
+        var firstIdx = b.behind ? b.behind[0][0] : b.front[0][0];
+        return W[firstIdx].start;
+      }
+
+      BLOCKS.forEach(function (block, bi) {
+        var start = blockStart(bi);
+        var nextStart = bi < BLOCKS.length - 1 ? blockStart(bi + 1) : DURATION;
+        var bEl = allBehind[bi];
+        var fEl = allFront[bi];
+
+        allBehind.forEach(function (other, oi) {
+          if (oi !== bi) tl.set(other, { opacity: 0 }, start);
+        });
+        allFront.forEach(function (other, oi) {
+          if (oi !== bi) tl.set(other, { opacity: 0 }, start);
+        });
+
+        if (block.behind) {
+          tl.set(bEl, { opacity: 1 }, start);
+          block.behind.forEach(function (wi_arr, wi) {
+            var wordEl = document.getElementById("bb" + bi + "w" + wi);
+            var wordStart = W[wi_arr[0]].start;
+            tl.set(wordEl, { opacity: 0 }, start);
+            tl.to(wordEl, { opacity: 1, duration: ENTRY_DUR, ease: "power2.out" }, wordStart);
+          });
+        }
+
+        if (block.front) {
+          tl.set(fEl, { opacity: 1 }, start);
+          block.front.forEach(function (wi_arr, wi) {
+            var wordEl = document.getElementById("fb" + bi + "w" + wi);
+            var wordStart = W[wi_arr[0]].start;
+            tl.set(wordEl, { opacity: 0 }, start);
+            tl.set(wordEl, { opacity: 1 }, wordStart);
+          });
+        }
+
+        tl.set(bEl, { opacity: 0 }, nextStart);
+        tl.set(fEl, { opacity: 0 }, nextStart);
+      });
+
+      tl.to({}, { duration: DURATION }, 0);
+      window.__timelines["caption-parallax-layers"] = tl;
+
+      document.fonts.ready.then(function () {
+        applyBehindScales();
+      });
+    </script>
+  </body>
+</html>
+```
+
+</Accordion>
 
-Open `compositions/components/caption-parallax-layers.html` and copy what is inside into your own composition.
+## Usage
 
-A component has no size or duration of its own. It takes both from the composition
-you paste it into.
+Open `compositions/components/caption-parallax-layers.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/components/caption-particle-burst.mdx b/docs/catalog/components/caption-particle-burst.mdx
index 898ea1e0ee..04e8727ca5 100644
--- a/docs/catalog/components/caption-particle-burst.mdx
+++ b/docs/catalog/components/caption-particle-burst.mdx
@@ -3,22 +3,324 @@ title: "Particle Burst"
 description: "Keyword words trigger colored particle explosions"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-particle-burst.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-particle-burst.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/components/caption-particle-burst.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Particle Burst preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add caption-particle-burst
-```
+<InstallCommand command="npx hyperframes add caption-particle-burst" />
 
 That writes one file: `compositions/components/caption-particle-burst.html`.
 
-## Paste it into your composition
+## Source
+
+<Accordion title={`caption-particle-burst.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Particle Burst</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Outfit:wght@900&display=swap"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: transparent;
+      }
+      #particle-burst {
+        pointer-events: none;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent;
+      }
+      .bs-overlay {
+        position: absolute;
+        inset: 0;
+        background: transparent;
+        z-index: 1;
+        pointer-events: none;
+      }
+      #bs-container {
+        position: absolute;
+        inset: 0;
+        z-index: 10;
+        pointer-events: none;
+      }
+      .bs-group {
+        position: absolute;
+        bottom: 120px;
+        left: 0;
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: flex-end;
+        justify-content: center;
+        gap: 24px;
+        padding: 0 100px;
+        opacity: 0;
+        visibility: hidden;
+      }
+      .bs-word {
+        font-family: "Outfit", sans-serif;
+        font-weight: 900;
+        font-size: 88px;
+        text-transform: uppercase;
+        color: rgba(255, 255, 255, 0.45);
+        display: inline-block;
+        letter-spacing: 0.05em;
+        line-height: 1;
+      }
+      .bs-particle {
+        position: absolute;
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        opacity: 0;
+        pointer-events: none;
+        z-index: 20;
+        left: 960px;
+        bottom: 180px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="particle-burst"
+      data-composition-id="caption-particle-burst"
+      data-timeline-locked
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="bs-overlay"></div>
+      <div id="bs-container"></div>
+    </div>
+
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        var _fitCanvas = document.createElement("canvas");
+        var _fitCtx = _fitCanvas.getContext("2d");
+        function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {
+          var size = baseFontSize;
+          var minSize = Math.floor(baseFontSize * 0.45);
+          while (size > minSize) {
+            _fitCtx.font = fontWeight + " " + size + "px " + fontFamily;
+            if (_fitCtx.measureText(text).width <= maxWidth) return size;
+            size -= 2;
+          }
+          return minSize;
+        }
+
+        function mulberry32(seed) {
+          return function () {
+            seed |= 0;
+            seed = (seed + 0x6d2b79f5) | 0;
+            var t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
+            t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+            return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+          };
+        }
+
+        var WORDS = [
+          { text: "Every", start: 0.0, end: 0.3 },
+          { text: "great", start: 0.3, end: 0.55 },
+          { text: "video", start: 0.55, end: 0.85 },
+          { text: "starts", start: 0.85, end: 1.1 },
+          { text: "with", start: 1.1, end: 1.25 },
+          { text: "a", start: 1.25, end: 1.35 },
+          { text: "single", start: 1.35, end: 1.65 },
+          { text: "frame.", start: 1.65, end: 2.0 },
+          { text: "HyperFrames", start: 2.1, end: 2.65 },
+          { text: "lets", start: 2.65, end: 2.85 },
+          { text: "you", start: 2.85, end: 2.95 },
+          { text: "write", start: 2.95, end: 3.15 },
+          { text: "HTML", start: 3.15, end: 3.55 },
+          { text: "and", start: 3.55, end: 3.65 },
+          { text: "render", start: 3.65, end: 3.95 },
+          { text: "professional", start: 3.95, end: 4.45 },
+          { text: "video.", start: 4.45, end: 4.8 },
+          { text: "No", start: 4.9, end: 5.05 },
+          { text: "timeline.", start: 5.05, end: 5.45 },
+          { text: "No", start: 5.5, end: 5.65 },
+          { text: "drag", start: 5.65, end: 5.85 },
+          { text: "and", start: 5.85, end: 5.95 },
+          { text: "drop.", start: 5.95, end: 6.25 },
+          { text: "Just", start: 6.35, end: 6.55 },
+          { text: "code", start: 6.55, end: 6.8 },
+          { text: "that", start: 6.8, end: 6.95 },
+          { text: "becomes", start: 6.95, end: 7.3 },
+          { text: "cinema.", start: 7.3, end: 7.7 },
+        ];
+
+        // Keywords get particle burst + gold color
+        var KEYWORDS = new Set([8, 12, 15, 24, 27]); // HyperFrames, HTML, professional, code, cinema.
+
+        var RAW_GROUPS = [
+          [0, 3],
+          [4, 7],
+          [8, 8],
+          [9, 12],
+          [13, 15],
+          [16, 16],
+          [17, 19],
+          [20, 22],
+          [23, 24],
+          [25, 27],
+        ];
+        var GROUPS = RAW_GROUPS.map(function (pair, gi) {
+          var ws = pair[0],
+            we = pair[1];
+          var nextStart = gi + 1 < RAW_GROUPS.length ? WORDS[RAW_GROUPS[gi + 1][0]].start : 8.0;
+          var gEnd = Math.min(WORDS[we].end + 0.35, nextStart - 0.05);
+          return { wordStart: ws, wordEnd: we, start: WORDS[ws].start, end: gEnd };
+        });
+
+        var PARTICLE_COLORS = [
+          "#FFD700",
+          "#FF6B35",
+          "#FF3C78",
+          "#9B5DE5",
+          "#00BBF9",
+          "#00F5D4",
+          "#ffffff",
+          "#F15BB5",
+        ];
+        var NUM_PARTICLES = 10;
+
+        var container = document.getElementById("bs-container");
+        var tl = gsap.timeline({ paused: true });
+
+        GROUPS.forEach(function (g, gi) {
+          var groupWords = WORDS.slice(g.wordStart, g.wordEnd + 1);
+          var groupText = groupWords
+            .map(function (w) {
+              return w.text.toUpperCase();
+            })
+            .join(" ");
+          var fontSize = fitFontSize(groupText, 88, "900", "'Outfit', sans-serif", 1720);
+          var grp = document.createElement("div");
+          grp.className = "bs-group";
+          grp.id = "bs-grp-" + gi;
+
+          groupWords.forEach(function (w, i) {
+            var wi = g.wordStart + i;
+            var span = document.createElement("span");
+            span.className = "bs-word";
+            span.id = "bs-w-" + wi;
+            span.textContent = w.text.toUpperCase();
+            span.style.fontSize = fontSize + "px";
+            grp.appendChild(span);
+          });
+
+          container.appendChild(grp);
+        });
+
+        // Create particles for keyword words
+        var particleData = {};
+        WORDS.forEach(function (w, wi) {
+          if (!KEYWORDS.has(wi)) return;
+          var rng = mulberry32(wi * 137 + 99);
+          particleData[wi] = [];
+          for (var p = 0; p < NUM_PARTICLES; p++) {
+            var angle = (p / NUM_PARTICLES) * Math.PI * 2 + rng() * 0.6;
+            var dist = 120 + rng() * 200;
+            var sz = 4 + rng() * 8;
+            var dx = Math.cos(angle) * dist;
+            var dy = -Math.sin(angle) * dist;
+            var dot = document.createElement("div");
+            dot.className = "bs-particle";
+            dot.id = "bs-p-" + wi + "-" + p;
+            dot.style.backgroundColor = PARTICLE_COLORS[p % PARTICLE_COLORS.length];
+            dot.style.width = sz.toFixed(1) + "px";
+            dot.style.height = sz.toFixed(1) + "px";
+            container.appendChild(dot);
+            particleData[wi].push({ el: dot, dx: dx, dy: dy });
+          }
+        });
+
+        GROUPS.forEach(function (g, gi) {
+          var grp = document.getElementById("bs-grp-" + gi);
+          var groupWords = WORDS.slice(g.wordStart, g.wordEnd + 1);
+
+          tl.set(grp, { visibility: "visible" }, g.start);
+          tl.fromTo(
+            grp,
+            { opacity: 0, scale: 0.92 },
+            { opacity: 1, scale: 1, duration: 0.2, ease: "back.out(1.5)" },
+            g.start,
+          );
+
+          groupWords.forEach(function (w, i) {
+            var wi = g.wordStart + i;
+            var wordEl = document.getElementById("bs-w-" + wi);
+            var isKW = KEYWORDS.has(wi);
+
+            tl.to(
+              wordEl,
+              { color: isKW ? "#FFD700" : "#ffffff", scale: isKW ? 1.12 : 1.05, duration: 0.08 },
+              w.start,
+            );
+            tl.to(wordEl, { color: "rgba(255,255,255,0.4)", scale: 1.0, duration: 0.1 }, w.end);
+
+            if (isKW && particleData[wi]) {
+              particleData[wi].forEach(function (pd, pi) {
+                tl.set(pd.el, { x: 0, y: 0, opacity: 0 }, w.start);
+                tl.to(
+                  pd.el,
+                  { x: pd.dx, y: pd.dy, opacity: 1, duration: 0.12, ease: "power3.out" },
+                  w.start + pi * 0.018,
+                );
+                tl.to(
+                  pd.el,
+                  { opacity: 0, duration: 0.45, ease: "power1.in" },
+                  w.start + 0.12 + pi * 0.018,
+                );
+                tl.set(pd.el, { opacity: 0, x: 0, y: 0 }, w.start + 0.7);
+              });
+            }
+          });
+
+          tl.to(grp, { opacity: 0, duration: 0.14, ease: "power2.in" }, g.end - 0.14);
+          tl.set(grp, { opacity: 0, visibility: "hidden" }, g.end);
+        });
+
+        tl.seek(0);
+        window.__timelines["caption-particle-burst"] = tl;
+      })();
+    </script>
+  </body>
+</html>
+```
+
+</Accordion>
 
-Open `compositions/components/caption-particle-burst.html` and copy what is inside into your own composition.
+## Usage
 
-A component has no size or duration of its own. It takes both from the composition
-you paste it into.
+Open `compositions/components/caption-particle-burst.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/components/caption-pill-karaoke.mdx b/docs/catalog/components/caption-pill-karaoke.mdx
index 09f5b0db51..9ca387016d 100644
--- a/docs/catalog/components/caption-pill-karaoke.mdx
+++ b/docs/catalog/components/caption-pill-karaoke.mdx
@@ -3,22 +3,410 @@ title: "Pill Karaoke"
 description: "Pill-shaped container with per-word karaoke color highlight"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-pill-karaoke.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-pill-karaoke.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/components/caption-pill-karaoke.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Pill Karaoke preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add caption-pill-karaoke
-```
+<InstallCommand command="npx hyperframes add caption-pill-karaoke" />
 
 That writes one file: `compositions/components/caption-pill-karaoke.html`.
 
-## Paste it into your composition
+## Source
+
+<Accordion title={`caption-pill-karaoke.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Pill Karaoke</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: transparent;
+        font-family: "Poppins", Arial, sans-serif;
+      }
+
+      #pill-karaoke {
+        pointer-events: none;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent;
+      }
+
+      .caption-layer {
+        position: absolute;
+        inset: 0;
+        z-index: 20;
+        pointer-events: none;
+        transform: translateZ(0);
+      }
+
+      .safe-zone {
+        position: absolute;
+        bottom: 100px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 1600px;
+        height: 220px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .caption-group {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 1600px;
+        height: 220px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0;
+      }
+
+      .caption-pill {
+        width: auto;
+        max-width: 1600px;
+        padding: 18px 60px 20px;
+        border-radius: 22px;
+        background: #e7e5e7;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+        text-align: center;
+        overflow: visible;
+      }
+
+      .caption-copy {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        color: #a6a6a6;
+        font-family: "Poppins", Arial, sans-serif;
+        font-size: 72px;
+        font-weight: 700;
+        line-height: 1.16;
+        letter-spacing: 0;
+        white-space: nowrap;
+        word-break: normal;
+        overflow: visible;
+      }
+
+      .caption-line {
+        display: flex;
+        justify-content: center;
+        gap: 16px;
+        width: 100%;
+        max-width: none;
+        line-height: 1.16;
+        white-space: nowrap;
+        overflow: visible;
+      }
+
+      .caption-word {
+        display: inline-block;
+        color: #a6a6a6;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="pill-karaoke"
+      data-composition-id="caption-pill-karaoke"
+      data-timeline-locked
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="caption-layer" aria-hidden="true">
+        <div id="caption-stage" class="safe-zone"></div>
+      </div>
+    </div>
+
+    <script>
+      var DURATION = 8;
+      var SAFE_ZONE_WIDTH = 1400;
+      var PILL_MAX_WIDTH = 1400;
+      var PILL_MIN_PADDING_X = 30;
+      var PILL_MAX_PADDING_X = 60;
+      var FONT_WIDTH_SAFETY = 1.18;
+      var FONT_FAMILY = "Poppins";
+      var FONT_WEIGHT = "700";
+      var BASE_FONT_SIZE = 72;
+      var MIN_FONT_SIZE = 52;
+      var MAX_WORDS_PER_GROUP = 4;
+      var WORD_SPACING = 16;
+      var PAUSE_THRESHOLD = 0.1;
+      var GROUP_END_BUFFER = 0.3;
+      var COLOR_INACTIVE = "#A6A6A6";
+      var COLOR_ACTIVE = "#1C1E1D";
+      var COLOR_FADE_DURATION = 0.1;
+      var WORD_FADE_LEAD = 0.05;
+
+      var TRANSCRIPT = [
+        { text: "Every", start: 0.0, end: 0.3 },
+        { text: "great", start: 0.3, end: 0.55 },
+        { text: "video", start: 0.55, end: 0.85 },
+        { text: "starts", start: 0.85, end: 1.1 },
+        { text: "with", start: 1.1, end: 1.25 },
+        { text: "a", start: 1.25, end: 1.35 },
+        { text: "single", start: 1.35, end: 1.65 },
+        { text: "frame.", start: 1.65, end: 2.0 },
+        { text: "HyperFrames", start: 2.1, end: 2.65 },
+        { text: "lets", start: 2.65, end: 2.85 },
+        { text: "you", start: 2.85, end: 2.95 },
+        { text: "write", start: 2.95, end: 3.15 },
+        { text: "HTML", start: 3.15, end: 3.55 },
+        { text: "and", start: 3.55, end: 3.65 },
+        { text: "render", start: 3.65, end: 3.95 },
+        { text: "professional", start: 3.95, end: 4.45 },
+        { text: "video.", start: 4.45, end: 4.8 },
+        { text: "No", start: 4.9, end: 5.05 },
+        { text: "timeline.", start: 5.05, end: 5.45 },
+        { text: "No", start: 5.5, end: 5.65 },
+        { text: "drag", start: 5.65, end: 5.85 },
+        { text: "and", start: 5.85, end: 5.95 },
+        { text: "drop.", start: 5.95, end: 6.25 },
+        { text: "Just", start: 6.35, end: 6.55 },
+        { text: "code", start: 6.55, end: 6.8 },
+        { text: "that", start: 6.8, end: 6.95 },
+        { text: "becomes", start: 6.95, end: 7.3 },
+        { text: "cinema.", start: 7.3, end: 7.7 },
+      ];
+
+      function normalizeWords(rawWords) {
+        return rawWords
+          .map(function (item) {
+            var text = String(item.word || item.text || "").trim();
+            return {
+              text: text,
+              start: Math.max(0, Number(item.start) || 0),
+              end: Math.min(DURATION, Math.max(Number(item.start) || 0, Number(item.end) || 0)),
+            };
+          })
+          .filter(function (w) {
+            return w.text.length > 0;
+          });
+      }
+
+      var measureCanvas = document.createElement("canvas");
+      var measureContext = measureCanvas.getContext("2d");
+
+      function measureWordWidth(text, fontSize) {
+        measureContext.font = FONT_WEIGHT + " " + fontSize + "px " + FONT_FAMILY;
+        return measureContext.measureText(text).width * FONT_WIDTH_SAFETY;
+      }
+
+      function measureLineWidth(words, fontSize) {
+        return words.reduce(function (total, word, index) {
+          return (
+            total + measureWordWidth(word.text.toLowerCase(), fontSize) + (index ? WORD_SPACING : 0)
+          );
+        }, 0);
+      }
+
+      function splitLinesForGroup(words, fontSize) {
+        var maxLineWidth = PILL_MAX_WIDTH - PILL_MIN_PADDING_X * 2;
+        if (
+          words.some(function (w) {
+            return measureWordWidth(w.text.toLowerCase(), fontSize) > maxLineWidth;
+          })
+        ) {
+          return null;
+        }
+        if (measureLineWidth(words, fontSize) <= maxLineWidth) return [words];
+        var bestSplit = null;
+        var bestImbalance = Infinity;
+        for (var split = 1; split < words.length; split++) {
+          var firstLine = words.slice(0, split);
+          var secondLine = words.slice(split);
+          var firstWidth = measureLineWidth(firstLine, fontSize);
+          var secondWidth = measureLineWidth(secondLine, fontSize);
+          if (firstWidth <= maxLineWidth && secondWidth <= maxLineWidth) {
+            var imbalance = Math.abs(firstWidth - secondWidth);
+            if (imbalance < bestImbalance) {
+              bestSplit = [firstLine, secondLine];
+              bestImbalance = imbalance;
+            }
+          }
+        }
+        return bestSplit;
+      }
+
+      function fitsInTwoLinesAtSize(words, fontSize) {
+        return splitLinesForGroup(words, fontSize) !== null;
+      }
+
+      function planPillLayout(words, fontSize) {
+        var lines = splitLinesForGroup(words, fontSize) || [words];
+        var widestLine = lines.reduce(function (max, lineWords) {
+          return Math.max(max, measureLineWidth(lineWords, fontSize));
+        }, 0);
+        var availablePadding = Math.floor((PILL_MAX_WIDTH - widestLine) / 2);
+        var padX = Math.max(PILL_MIN_PADDING_X, Math.min(PILL_MAX_PADDING_X, availablePadding));
+        var pillWidth = Math.min(PILL_MAX_WIDTH, Math.ceil(widestLine + padX * 2));
+        return { lines: lines, padX: padX, pillWidth: pillWidth };
+      }
+
+      function makeGroups(words) {
+        var groups = [];
+        var current = [];
+        words.forEach(function (word, index) {
+          var testGroup = current.concat([word]);
+          var nextWord = words[index + 1];
+          var wouldExceedMaxWords = testGroup.length > MAX_WORDS_PER_GROUP;
+          var wouldExceedTwoLines = !fitsInTwoLinesAtSize(testGroup, BASE_FONT_SIZE);
+          if (wouldExceedMaxWords || wouldExceedTwoLines) {
+            if (current.length) {
+              groups.push({
+                words: current.slice(),
+                start: current[0].start,
+                end: current[current.length - 1].end,
+              });
+            }
+            current = [word];
+            return;
+          }
+          current.push(word);
+          var hasPunctuation = /[,.:!?]$/.test(word.text);
+          var pauseDuration = nextWord ? nextWord.start - word.end : 0;
+          var hasNaturalPause = pauseDuration >= PAUSE_THRESHOLD;
+          var maxWordsReached = current.length >= MAX_WORDS_PER_GROUP;
+          if (maxWordsReached || !nextWord || hasPunctuation || hasNaturalPause) {
+            groups.push({
+              words: current.slice(),
+              start: current[0].start,
+              end: current[current.length - 1].end,
+            });
+            current = [];
+          }
+        });
+        if (current.length)
+          groups.push({
+            words: current.slice(),
+            start: current[0].start,
+            end: current[current.length - 1].end,
+          });
+        return groups;
+      }
+
+      function fontSizeForGroup(words) {
+        var size = BASE_FONT_SIZE;
+        while (size > MIN_FONT_SIZE && !fitsInTwoLinesAtSize(words, size)) {
+          size -= 2;
+        }
+        return size;
+      }
+
+      function buildCaptions(groups) {
+        var stage = document.getElementById("caption-stage");
+        groups.forEach(function (group, groupIndex) {
+          var groupEl = document.createElement("div");
+          var pillEl = document.createElement("div");
+          var copyEl = document.createElement("div");
+          var fontSize = fontSizeForGroup(group.words);
+          groupEl.id = "caption-group-" + groupIndex;
+          groupEl.className = "caption-group";
+          pillEl.className = "caption-pill";
+          copyEl.className = "caption-copy";
+          copyEl.style.fontSize = fontSize + "px";
+          var indexedWords = group.words.map(function (word, wordIndex) {
+            return { text: word.text, start: word.start, end: word.end, wordIndex: wordIndex };
+          });
+          var layout = planPillLayout(indexedWords, fontSize);
+          pillEl.style.width = layout.pillWidth + "px";
+          pillEl.style.paddingLeft = layout.padX + "px";
+          pillEl.style.paddingRight = layout.padX + "px";
+          layout.lines.slice(0, 2).forEach(function (lineWords) {
+            var lineEl = document.createElement("div");
+            lineEl.className = "caption-line";
+            lineWords.forEach(function (word) {
+              var wordEl = document.createElement("span");
+              wordEl.id = "caption-word-" + groupIndex + "-" + word.wordIndex;
+              wordEl.className = "caption-word";
+              wordEl.textContent = word.text.toLowerCase();
+              lineEl.appendChild(wordEl);
+            });
+            copyEl.appendChild(lineEl);
+          });
+          pillEl.appendChild(copyEl);
+          groupEl.appendChild(pillEl);
+          stage.appendChild(groupEl);
+        });
+      }
+
+      var WORDS = normalizeWords(TRANSCRIPT);
+      var GROUPS = makeGroups(WORDS);
+      buildCaptions(GROUPS);
+
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+
+      GROUPS.forEach(function (group, groupIndex) {
+        var groupEl = document.getElementById("caption-group-" + groupIndex);
+        var nextGroup = GROUPS[groupIndex + 1];
+        var isLastGroup = groupIndex === GROUPS.length - 1;
+        var effectiveEnd = isLastGroup
+          ? DURATION
+          : Math.min(nextGroup.start, group.end + GROUP_END_BUFFER);
+        var visibleStart = Math.max(0, group.start);
+        var visibleEnd = Math.max(visibleStart + 0.01, effectiveEnd);
+
+        tl.set(groupEl, { opacity: 1 }, visibleStart);
+        tl.set(groupEl, { opacity: 0 }, visibleEnd);
+
+        group.words.forEach(function (word, wordIndex) {
+          var wordEl = document.getElementById("caption-word-" + groupIndex + "-" + wordIndex);
+          var isFirstWord = wordIndex === 0;
+          var wordStart = Math.max(visibleStart, word.start - WORD_FADE_LEAD);
+          tl.set(wordEl, { color: isFirstWord ? COLOR_ACTIVE : COLOR_INACTIVE }, visibleStart);
+          if (isFirstWord) return;
+          tl.to(
+            wordEl,
+            { color: COLOR_ACTIVE, duration: COLOR_FADE_DURATION, ease: "none" },
+            wordStart,
+          );
+        });
+      });
+
+      window.__timelines["caption-pill-karaoke"] = tl;
+    </script>
+  </body>
+</html>
+```
+
+</Accordion>
 
-Open `compositions/components/caption-pill-karaoke.html` and copy what is inside into your own composition.
+## Usage
 
-A component has no size or duration of its own. It takes both from the composition
-you paste it into.
+Open `compositions/components/caption-pill-karaoke.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/components/caption-texture.mdx b/docs/catalog/components/caption-texture.mdx
index b771c36574..6ff7bb17ce 100644
--- a/docs/catalog/components/caption-texture.mdx
+++ b/docs/catalog/components/caption-texture.mdx
@@ -3,22 +3,240 @@ title: "Texture"
 description: "Flowing texture mask over large uppercase text — ships with 6 textures (lava, marble, metal, wood, concrete, rock), configurable via the texture variable"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-texture.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-texture.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
-## Install
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/caption-texture.html"
+  compositionId="caption-texture"
+  compositionSrc="compositions/components/caption-texture.html"
+  variables={[{"id":"texture","type":"string","default":"lava"}]}
+>
+
+```html caption-texture.html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Texture</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      .hf-texture-text {
+        color: #fff;
+        -webkit-mask-size: var(--mask-size, cover);
+        mask-size: var(--mask-size, cover);
+        -webkit-mask-position: var(--mask-position, center);
+        mask-position: var(--mask-position, center);
+        -webkit-mask-mode: luminance;
+        mask-mode: luminance;
+        filter: contrast(var(--mask-contrast, 1));
+      }
+
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: transparent;
+      }
+      #texture-lava {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent;
+      }
+      .lv-overlay {
+        position: absolute;
+        inset: 0;
+        background: transparent;
+        z-index: 1;
+        pointer-events: none;
+      }
+      #lv-container {
+        position: absolute;
+        inset: 0;
+        z-index: 10;
+        pointer-events: none;
+      }
+
+      .lv-texture-override {
+        -webkit-mask-size: 200% 200%;
+        mask-size: 200% 200%;
+        -webkit-mask-position: 0% 50%;
+        mask-position: 0% 50%;
+        -webkit-mask-mode: luminance;
+        mask-mode: luminance;
+        filter: contrast(1.2);
+      }
+
+      .lv-shadow {
+        position: absolute;
+        left: 0;
+        width: 100%;
+        text-align: center;
+        top: 50%;
+        filter: drop-shadow(0 4px 24px rgba(255, 100, 20, 0.55));
+        opacity: 0;
+        visibility: hidden;
+      }
+      .lv-word {
+        font-family: "Anton", sans-serif;
+        font-weight: 400;
+        text-transform: uppercase;
+        color: #ffd0a0;
+        display: inline-block;
+        letter-spacing: 0.04em;
+        line-height: 1;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="caption-texture"
+      data-composition-id="caption-texture"
+      data-timeline-locked
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+      data-composition-variables='{"texture":{"type":"string","default":"lava"}}'
+    >
+      <div class="lv-overlay"></div>
+      <div id="lv-container"></div>
+    </div>
+
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        var vars =
+          window.__hyperframes && window.__hyperframes.getVariables
+            ? window.__hyperframes.getVariables()
+            : {};
+        var TEXTURE = vars.texture || "lava";
+        var TEXTURE_URL = "compositions/components/" + TEXTURE + ".png";
+
+        var _fitCanvas = document.createElement("canvas");
+        var _fitCtx = _fitCanvas.getContext("2d");
+        function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {
+          var size = baseFontSize;
+          var minSize = Math.floor(baseFontSize * 0.45);
+          while (size > minSize) {
+            _fitCtx.font = fontWeight + " " + size + "px " + fontFamily;
+            if (_fitCtx.measureText(text).width <= maxWidth) return size;
+            size -= 2;
+          }
+          return minSize;
+        }
+
+        var WORDS = [
+          { text: "Every", start: 0.0, end: 0.3 },
+          { text: "great", start: 0.3, end: 0.55 },
+          { text: "video", start: 0.55, end: 0.85 },
+          { text: "starts", start: 0.85, end: 1.1 },
+          { text: "with", start: 1.1, end: 1.25 },
+          { text: "a", start: 1.25, end: 1.35 },
+          { text: "single", start: 1.35, end: 1.65 },
+          { text: "frame.", start: 1.65, end: 2.0 },
+          { text: "HyperFrames", start: 2.1, end: 2.65 },
+          { text: "lets", start: 2.65, end: 2.85 },
+          { text: "you", start: 2.85, end: 2.95 },
+          { text: "write", start: 2.95, end: 3.15 },
+          { text: "HTML", start: 3.15, end: 3.55 },
+          { text: "and", start: 3.55, end: 3.65 },
+          { text: "render", start: 3.65, end: 3.95 },
+          { text: "professional", start: 3.95, end: 4.45 },
+          { text: "video.", start: 4.45, end: 4.8 },
+          { text: "No", start: 4.9, end: 5.05 },
+          { text: "timeline.", start: 5.05, end: 5.45 },
+          { text: "No", start: 5.5, end: 5.65 },
+          { text: "drag", start: 5.65, end: 5.85 },
+          { text: "and", start: 5.85, end: 5.95 },
+          { text: "drop.", start: 5.95, end: 6.25 },
+          { text: "Just", start: 6.35, end: 6.55 },
+          { text: "code", start: 6.55, end: 6.8 },
+          { text: "that", start: 6.8, end: 6.95 },
+          { text: "becomes", start: 6.95, end: 7.3 },
+          { text: "cinema.", start: 7.3, end: 7.7 },
+        ];
+
+        var KEYWORDS = new Set([8, 12, 15, 24, 27]);
+
+        var container = document.getElementById("lv-container");
+        var tl = gsap.timeline({ paused: true });
+
+        WORDS.forEach(function (w, wi) {
+          var txt = w.text.toUpperCase();
+          var fontSize = fitFontSize(txt, 200, "400", "'Anton', sans-serif", 1720);
 
-```bash Terminal
-npx hyperframes add caption-texture
+          var shadow = document.createElement("div");
+          shadow.className = "lv-shadow";
+          shadow.id = "lv-shadow-" + wi;
+          gsap.set(shadow, { yPercent: -50 });
+
+          var wordEl = document.createElement("div");
+          wordEl.className = "hf-texture-text lv-texture-override lv-word";
+          wordEl.id = "lv-word-" + wi;
+          wordEl.textContent = txt;
+          wordEl.style.fontSize = fontSize + "px";
+          wordEl.style.webkitMaskImage = "url('" + TEXTURE_URL + "')";
+          wordEl.style.maskImage = "url('" + TEXTURE_URL + "')";
+          if (KEYWORDS.has(wi)) wordEl.style.color = "#FFAA44";
+
+          shadow.appendChild(wordEl);
+          container.appendChild(shadow);
+
+          var dur = Math.max(w.end - w.start + 0.3, 0.4);
+
+          tl.set(shadow, { visibility: "visible", opacity: 0 }, w.start);
+          tl.fromTo(
+            shadow,
+            { opacity: 0, scale: 0.88 },
+            { opacity: 1, scale: 1, duration: 0.18, ease: "power3.out" },
+            w.start,
+          );
+          tl.set(wordEl, { "--mask-position": "0% 50%" }, w.start);
+          tl.to(
+            wordEl,
+            { "--mask-position": "100% 50%", duration: dur, ease: "sine.inOut" },
+            w.start,
+          );
+
+          tl.to(shadow, { opacity: 0, scale: 1.08, duration: 0.1, ease: "power2.in" }, w.end);
+          tl.set(shadow, { opacity: 0, visibility: "hidden" }, w.end + 0.1);
+        });
+
+        tl.seek(0);
+        window.__timelines["caption-texture"] = tl;
+      })();
+    </script>
+  </body>
+</html>
 ```
 
-That writes `compositions/components/caption-texture.html`, plus 6 supporting files under `compositions/components/`.
+</VariablesExplorer>
+
+## Install
 
-## Paste it into your composition
+<InstallCommand command="npx hyperframes add caption-texture" />
+
+That writes `compositions/components/caption-texture.html`, plus 6 supporting files under `compositions/components/`.
 
-Open `compositions/components/caption-texture.html` and copy what is inside into your own composition.
+## Usage
 
-A component has no size or duration of its own. It takes both from the composition
-you paste it into.
+Open `compositions/components/caption-texture.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/components/caption-weight-shift.mdx b/docs/catalog/components/caption-weight-shift.mdx
index 90b91b5e5d..633a3e7a12 100644
--- a/docs/catalog/components/caption-weight-shift.mdx
+++ b/docs/catalog/components/caption-weight-shift.mdx
@@ -3,22 +3,425 @@ title: "Weight Shift"
 description: "Elegant font-weight transition between caption lines"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-weight-shift.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-weight-shift.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/components/caption-weight-shift.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Weight Shift preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add caption-weight-shift
-```
+<InstallCommand command="npx hyperframes add caption-weight-shift" />
 
 That writes one file: `compositions/components/caption-weight-shift.html`.
 
-## Paste it into your composition
+## Source
+
+<Accordion title={`caption-weight-shift.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Weight Shift</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;700&display=swap"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: transparent;
+        font-family: "Montserrat", Arial, sans-serif;
+      }
+
+      #weight-shift {
+        pointer-events: none;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent;
+      }
+
+      .caption-layer {
+        position: absolute;
+        inset: 0;
+        z-index: 20;
+        pointer-events: none;
+        transform: translateZ(0);
+      }
+
+      .safe-zone {
+        position: absolute;
+        bottom: 100px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 1400px;
+        height: 278px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .caption-group {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 1400px;
+        height: 278px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0;
+        transform-origin: 50% 50%;
+        will-change: transform;
+        backface-visibility: hidden;
+      }
+
+      .caption-copy {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        max-width: 1400px;
+        text-align: center;
+      }
+
+      .caption-line {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 12px;
+        width: max-content;
+        max-width: 1400px;
+        line-height: 1.1;
+        white-space: nowrap;
+        color: #ffffff;
+        font-family: "Montserrat", Arial, sans-serif;
+        font-weight: 300;
+        font-size: 72px;
+        letter-spacing: -0.03em;
+        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+        text-transform: lowercase;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="weight-shift"
+      data-composition-id="caption-weight-shift"
+      data-timeline-locked
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="caption-layer" aria-hidden="true">
+        <div id="caption-stage" class="safe-zone"></div>
+      </div>
+    </div>
+
+    <script>
+      var DURATION = 8;
+      var SAFE_ZONE_WIDTH = 1400;
+      var MAX_LINE_WIDTH = SAFE_ZONE_WIDTH - 40;
+      var CAPTION_FONT_SIZE = 72;
+      var MAX_WORDS_PER_GROUP = 4;
+      var WORD_SPACING = 12;
+      var PAUSE_THRESHOLD = 0.1;
+      var ENTRY_DURATION = 100 / 1000;
+      var WEIGHT_TRANSITION = 100 / 1000;
+      var FONT_WIDTH_SAFETY = 1.14;
+      var FONT_WEIGHT_LIGHT = 300;
+      var FONT_WEIGHT_BOLD = 700;
+
+      var TRANSCRIPT = [
+        { text: "Every", start: 0.0, end: 0.3 },
+        { text: "great", start: 0.3, end: 0.55 },
+        { text: "video", start: 0.55, end: 0.85 },
+        { text: "starts", start: 0.85, end: 1.1 },
+        { text: "with", start: 1.1, end: 1.25 },
+        { text: "a", start: 1.25, end: 1.35 },
+        { text: "single", start: 1.35, end: 1.65 },
+        { text: "frame.", start: 1.65, end: 2.0 },
+        { text: "HyperFrames", start: 2.1, end: 2.65 },
+        { text: "lets", start: 2.65, end: 2.85 },
+        { text: "you", start: 2.85, end: 2.95 },
+        { text: "write", start: 2.95, end: 3.15 },
+        { text: "HTML", start: 3.15, end: 3.55 },
+        { text: "and", start: 3.55, end: 3.65 },
+        { text: "render", start: 3.65, end: 3.95 },
+        { text: "professional", start: 3.95, end: 4.45 },
+        { text: "video.", start: 4.45, end: 4.8 },
+        { text: "No", start: 4.9, end: 5.05 },
+        { text: "timeline.", start: 5.05, end: 5.45 },
+        { text: "No", start: 5.5, end: 5.65 },
+        { text: "drag", start: 5.65, end: 5.85 },
+        { text: "and", start: 5.85, end: 5.95 },
+        { text: "drop.", start: 5.95, end: 6.25 },
+        { text: "Just", start: 6.35, end: 6.55 },
+        { text: "code", start: 6.55, end: 6.8 },
+        { text: "that", start: 6.8, end: 6.95 },
+        { text: "becomes", start: 6.95, end: 7.3 },
+        { text: "cinema.", start: 7.3, end: 7.7 },
+      ];
+
+      function normalizeWords(rawWords) {
+        return rawWords
+          .map(function (item) {
+            return {
+              text: String(item.word || item.text || "").trim(),
+              start: Math.max(0, Number(item.start) || 0),
+              end: Math.min(DURATION, Math.max(Number(item.start) || 0, Number(item.end) || 0)),
+            };
+          })
+          .filter(function (word) {
+            return word.text.length > 0;
+          });
+      }
+
+      var _fitCanvas = document.createElement("canvas");
+      var _fitCtx = _fitCanvas.getContext("2d");
+      function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {
+        var size = baseFontSize;
+        var minSize = Math.floor(baseFontSize * 0.45);
+        while (size > minSize) {
+          _fitCtx.font = fontWeight + " " + size + "px " + fontFamily;
+          if (_fitCtx.measureText(text).width <= maxWidth) return size;
+          size -= 2;
+        }
+        return minSize;
+      }
+
+      var measureCanvas = document.createElement("canvas");
+      var measureContext = measureCanvas.getContext("2d");
+      measureContext.font = "700 " + CAPTION_FONT_SIZE + "px Montserrat";
+
+      function measureWord(word) {
+        return measureContext.measureText(word.text.toLowerCase()).width * FONT_WIDTH_SAFETY;
+      }
+
+      function measureLineWidth(words) {
+        return words.reduce(function (total, word, index) {
+          return total + measureWord(word) + (index ? WORD_SPACING : 0);
+        }, 0);
+      }
+
+      function fitsInTwoLines(words) {
+        return measureLineWidth(words) <= MAX_LINE_WIDTH * 1.8;
+      }
+
+      function splitLines(words) {
+        if (words.length < 2) {
+          return [{ words: words, startIndex: 0 }];
+        }
+        var bestSplit = Math.ceil(words.length / 2);
+        var bestDiff = Infinity;
+        for (var s = 1; s < words.length; s++) {
+          var w1 = measureLineWidth(words.slice(0, s));
+          var w2 = measureLineWidth(words.slice(s));
+          if (w1 <= MAX_LINE_WIDTH && w2 <= MAX_LINE_WIDTH) {
+            var diff = Math.abs(w1 - w2);
+            if (diff < bestDiff) {
+              bestDiff = diff;
+              bestSplit = s;
+            }
+          }
+        }
+        var result = [];
+        var line1 = words.slice(0, bestSplit);
+        var line2 = words.slice(bestSplit);
+        if (line1.length) result.push({ words: line1, startIndex: 0 });
+        if (line2.length) result.push({ words: line2, startIndex: line1.length });
+        return result;
+      }
+
+      function avoidSingleWordGroups(groups) {
+        var out = [];
+        groups.forEach(function (group) {
+          if (
+            group.words.length === 1 &&
+            out.length > 0 &&
+            out[out.length - 1].words.length < MAX_WORDS_PER_GROUP
+          ) {
+            out[out.length - 1] = makeGroup(out[out.length - 1].words.concat(group.words));
+          } else {
+            out.push(group);
+          }
+        });
+
+        for (var i = 0; i < out.length; i++) {
+          if (out[i].words.length !== 1) continue;
+          if (i + 1 < out.length && out[i + 1].words.length < MAX_WORDS_PER_GROUP) {
+            out[i] = makeGroup(out[i].words.concat(out[i + 1].words));
+            out.splice(i + 1, 1);
+          } else if (i > 0 && out[i - 1].words.length < MAX_WORDS_PER_GROUP) {
+            out[i - 1] = makeGroup(out[i - 1].words.concat(out[i].words));
+            out.splice(i, 1);
+            i--;
+          }
+        }
+
+        return out;
+      }
+
+      function makeGroups(words) {
+        var groups = [];
+        var current = [];
+        words.forEach(function (word, index) {
+          var nextWord = words[index + 1];
+          var testGroup = current.concat([word]);
+          if (testGroup.length > MAX_WORDS_PER_GROUP || !fitsInTwoLines(testGroup)) {
+            if (current.length) groups.push(makeGroup(current));
+            current = [word];
+            return;
+          }
+          current.push(word);
+          var punctuation = /[,.:!?]$/.test(word.text);
+          var pause = nextWord ? nextWord.start - word.end : 0;
+          if (
+            !nextWord ||
+            punctuation ||
+            pause >= PAUSE_THRESHOLD ||
+            current.length >= MAX_WORDS_PER_GROUP
+          ) {
+            groups.push(makeGroup(current));
+            current = [];
+          }
+        });
+        if (current.length) groups.push(makeGroup(current));
+        return avoidSingleWordGroups(groups);
+      }
+
+      function makeGroup(words) {
+        return {
+          words: words.slice(),
+          lines: splitLines(words),
+          start: words[0].start,
+          end: words[words.length - 1].end,
+        };
+      }
+
+      function buildCaptions(groups) {
+        var stage = document.getElementById("caption-stage");
+        groups.forEach(function (group, groupIndex) {
+          var groupText = group.words
+            .map(function (w) {
+              return w.text.toLowerCase();
+            })
+            .join(" ");
+          var computedSize = fitFontSize(
+            groupText,
+            CAPTION_FONT_SIZE,
+            "700",
+            "Montserrat",
+            MAX_LINE_WIDTH,
+          );
+          var groupEl = document.createElement("div");
+          var copyEl = document.createElement("div");
+          groupEl.id = "caption-group-" + groupIndex;
+          groupEl.className = "caption-group";
+          copyEl.className = "caption-copy";
+          group.lines.forEach(function (line, lineIndex) {
+            var lineEl = document.createElement("div");
+            lineEl.className = "caption-line";
+            lineEl.id = "caption-group-" + groupIndex + "-line-" + lineIndex;
+            lineEl.style.fontWeight = lineIndex === 0 ? FONT_WEIGHT_BOLD : FONT_WEIGHT_LIGHT;
+            lineEl.style.fontSize = computedSize + "px";
+            line.words.forEach(function (word, wordIndex) {
+              var wordEl = document.createElement("span");
+              wordEl.textContent = word.text.toLowerCase();
+              wordEl.style.display = "inline-block";
+              lineEl.appendChild(wordEl);
+            });
+            copyEl.appendChild(lineEl);
+          });
+          groupEl.appendChild(copyEl);
+          stage.appendChild(groupEl);
+        });
+      }
+
+      var WORDS = normalizeWords(TRANSCRIPT);
+      var GROUPS = makeGroups(WORDS);
+      buildCaptions(GROUPS);
+
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+
+      var visibleStarts = GROUPS.map(function (group, groupIndex) {
+        var prev = GROUPS[groupIndex - 1];
+        var availableGap = prev ? Math.max(0, group.start - prev.end) : ENTRY_DURATION;
+        var entryLead = Math.min(ENTRY_DURATION, availableGap);
+        return Math.max(0, group.start - entryLead);
+      });
+
+      var allGroupEls = GROUPS.map(function (_, i) {
+        return document.getElementById("caption-group-" + i);
+      });
+
+      GROUPS.forEach(function (group, groupIndex) {
+        var groupEl = allGroupEls[groupIndex];
+        var visibleStart = visibleStarts[groupIndex];
+        var visibleEnd = groupIndex < GROUPS.length - 1 ? visibleStarts[groupIndex + 1] : DURATION;
+
+        allGroupEls.forEach(function (otherEl, otherIndex) {
+          if (otherIndex !== groupIndex) tl.set(otherEl, { opacity: 0 }, visibleStart);
+        });
+
+        tl.set(groupEl, { opacity: 0, scale: 0.85 }, visibleStart);
+        tl.to(
+          groupEl,
+          { opacity: 1, scale: 1, duration: ENTRY_DURATION, ease: "power3.out", force3D: true },
+          visibleStart,
+        );
+
+        if (group.lines.length === 2) {
+          var line1El = document.getElementById("caption-group-" + groupIndex + "-line-0");
+          var line2El = document.getElementById("caption-group-" + groupIndex + "-line-1");
+          var line2FirstWord = group.lines[1].words[0];
+          var switchTime = line2FirstWord.start;
+
+          tl.to(
+            line1El,
+            { fontWeight: FONT_WEIGHT_LIGHT, duration: WEIGHT_TRANSITION, ease: "power2.out" },
+            switchTime,
+          );
+          tl.to(
+            line2El,
+            { fontWeight: FONT_WEIGHT_BOLD, duration: WEIGHT_TRANSITION, ease: "power2.out" },
+            switchTime,
+          );
+        }
+
+        tl.set(groupEl, { opacity: 0 }, visibleEnd);
+      });
+
+      window.__timelines["caption-weight-shift"] = tl;
+    </script>
+  </body>
+</html>
+```
+
+</Accordion>
 
-Open `compositions/components/caption-weight-shift.html` and copy what is inside into your own composition.
+## Usage
 
-A component has no size or duration of its own. It takes both from the composition
-you paste it into.
+Open `compositions/components/caption-weight-shift.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/components/card-resize.mdx b/docs/catalog/components/card-resize.mdx
new file mode 100644
index 0000000000..03aaa00c5c
--- /dev/null
+++ b/docs/catalog/components/card-resize.mdx
@@ -0,0 +1,215 @@
+---
+title: "Card Resize"
+description: "A transitions.dev-inspired card resize primitive that expands a compact card into a detail panel"
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/card-resize.html"
+  compositionId="card-resize"
+  compositionSrc="compositions/components/card-resize.html"
+  variables={[{"id":"surface","type":"enum","role":"style","label":"Surface","description":"Card colour scheme: paper is the original white card, ink is a dark card for dark frames.","default":"paper","options":[{"value":"paper","label":"Paper"},{"value":"ink","label":"Ink"}]},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Treatment of the media thumbnail: a plain plate, a hatched surface, or an image plate with a horizon-and-disc glyph.","default":"ocean","options":[{"value":"ocean","label":"Ocean"},{"value":"forest","label":"Forest"},{"value":"ember","label":"Ember"}]},{"id":"elevation","type":"enum","role":"style","label":"Elevation","description":"How far the card lifts off the frame, from a contact shadow to a deep drop.","default":"raised","options":[{"value":"flat","label":"Flat"},{"value":"raised","label":"Raised"},{"value":"floating","label":"Floating"}]}]}
+>
+
+```html card-resize.html
+<!--
+  Card Resize - transitions.dev-inspired primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Use the timeline
+  integration note at the bottom as the starting point for deterministic GSAP
+  animation.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result as a custom property
+  the CSS above consumes. The timeline recipe is untouched by them: it keeps
+  driving the same width, height and fade, and these decide how the card that
+  expands is dressed.
+
+    - surface (paper | ink, default paper): the card colour scheme. paper is
+      the original white card with near-black type, ink is a dark card with
+      light type for dark frames.
+    - accent (ocean | forest | ember, default ocean): the treatment of the media
+      thumbnail. ocean is a plain plate, forest adds a fine achromatic hatch,
+      ember adds a horizon-and-disc glyph so the plate reads as a photo. All
+      three are built from the surface's own ink at fixed alphas, so the
+      thumbnail carries no hue on either surface. The three value names are
+      inherited from the hue families they used to paint and no longer describe
+      what they render; renaming them is a separate, breaking change.
+    - elevation (flat | raised | floating, default raised): how far the card
+      lifts off the frame, from a tight contact shadow to a deep drop.
+
+  On every default the result is a white card with a quiet ink-tinted thumbnail
+  plate under a soft wide drop shadow. Layout, sizing and motion are unchanged.
+-->
+
+<div
+  class="hf-transition-card-resize"
+  data-composition-variables='[
+    { "id": "surface", "type": "enum", "role": "style", "label": "Surface", "description": "Card colour scheme: paper is the original white card, ink is a dark card for dark frames.", "default": "paper", "options": [{ "value": "paper", "label": "Paper" }, { "value": "ink", "label": "Ink" }] },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Treatment of the media thumbnail: a plain plate, a hatched surface, or an image plate with a horizon-and-disc glyph.", "default": "ocean", "options": [{ "value": "ocean", "label": "Ocean" }, { "value": "forest", "label": "Forest" }, { "value": "ember", "label": "Ember" }] },
+    { "id": "elevation", "type": "enum", "role": "style", "label": "Elevation", "description": "How far the card lifts off the frame, from a contact shadow to a deep drop.", "default": "raised", "options": [{ "value": "flat", "label": "Flat" }, { "value": "raised", "label": "Raised" }, { "value": "floating", "label": "Floating" }] }
+  ]'
+>
+  <div class="hf-transition-card-media"></div>
+  <div class="hf-transition-card-copy">
+    <span>Project status</span>
+    <strong>Ready to render</strong>
+    <p>All scenes validated and queued for export.</p>
+  </div>
+</div>
+
+<style>
+  .hf-transition-card-resize {
+    --hf-card-w: 330px;
+    --hf-card-h: 132px;
+    /* Placeholder ramp: the surface's own ink at fixed alphas, so the media
+       plate inverts with the surface instead of needing a second palette. */
+    --hf-card-l2: rgba(24, 24, 27, 0.45);
+    --hf-card-l3: rgba(24, 24, 27, 0.18);
+    --hf-card-hair: rgba(24, 24, 27, 0.14);
+    display: grid;
+    grid-template-columns: 92px 1fr;
+    gap: 18px;
+    width: var(--hf-card-w);
+    height: var(--hf-card-h);
+    padding: 18px;
+    overflow: hidden;
+    border: 1px solid var(--hf-card-border, #e4e4e7);
+    border-radius: 26px;
+    background: var(--hf-card-bg, #ffffff);
+    color: var(--hf-card-ink, #18181b);
+    font-family: Inter, system-ui, sans-serif;
+    box-shadow: var(--hf-card-shadow, 0 26px 80px rgba(0, 0, 0, 0.12));
+    will-change: width, height, transform;
+  }
+  .hf-transition-card-media {
+    width: 92px;
+    height: 92px;
+    border-radius: 20px;
+    background: var(--hf-card-media, var(--hf-card-l3));
+    box-shadow: inset 0 0 0 1px var(--hf-card-hair);
+  }
+  .hf-transition-card-copy {
+    display: grid;
+    align-content: center;
+    gap: 7px;
+    min-width: 0;
+  }
+  .hf-transition-card-copy span {
+    color: var(--hf-card-muted, #71717a);
+    font-size: 13px;
+    font-weight: 850;
+    text-transform: uppercase;
+  }
+  .hf-transition-card-copy strong {
+    white-space: nowrap;
+    font-size: 22px;
+    letter-spacing: -0.01em;
+  }
+  .hf-transition-card-copy p {
+    margin: 0;
+    color: var(--hf-card-muted, #71717a);
+    font-size: 15px;
+    line-height: 1.45;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var surfaces = {
+      paper: {
+        bg: "#ffffff",
+        ink: "#18181b",
+        muted: "#71717a",
+        border: "#e4e4e7",
+        l2: "rgba(24, 24, 27, 0.45)",
+        l3: "rgba(24, 24, 27, 0.18)",
+        hair: "rgba(24, 24, 27, 0.14)",
+      },
+      ink: {
+        bg: "#16161a",
+        ink: "#fafafa",
+        muted: "#a1a1aa",
+        border: "#2f2f37",
+        l2: "rgba(250, 250, 250, 0.45)",
+        l3: "rgba(250, 250, 250, 0.18)",
+        hair: "rgba(250, 250, 250, 0.14)",
+      },
+    };
+    // Media treatments, not hue families: the plate itself, the plate hatched,
+    // and the plate with a horizon-and-disc glyph that reads as a photo. Each
+    // one is written in the surface's own ink ramp, so both surfaces work.
+    var medias = {
+      ocean: "var(--hf-card-l3)",
+      forest:
+        "repeating-linear-gradient(135deg, var(--hf-card-hair) 0 2px, transparent 2px 4px), var(--hf-card-l3)",
+      ember:
+        "radial-gradient(circle 11px at 64px 28px, var(--hf-card-l2) 0 100%, transparent 100%), linear-gradient(to top, var(--hf-card-l2) 0 24px, transparent 24px), var(--hf-card-l3)",
+    };
+    var shadows = {
+      flat: "0 2px 10px rgba(0, 0, 0, 0.1)",
+      raised: "0 26px 80px rgba(0, 0, 0, 0.12)",
+      floating: "0 46px 120px rgba(0, 0, 0, 0.3)",
+    };
+
+    var surface = surfaces[pick(surfaces, vars.surface, "paper")];
+    var media = medias[pick(medias, vars.accent, "ocean")];
+    var shadow = shadows[pick(shadows, vars.elevation, "raised")];
+
+    var roots = document.querySelectorAll(".hf-transition-card-resize");
+    for (var i = 0; i < roots.length; i += 1) {
+      roots[i].style.setProperty("--hf-card-bg", surface.bg);
+      roots[i].style.setProperty("--hf-card-ink", surface.ink);
+      roots[i].style.setProperty("--hf-card-muted", surface.muted);
+      roots[i].style.setProperty("--hf-card-border", surface.border);
+      roots[i].style.setProperty("--hf-card-l2", surface.l2);
+      roots[i].style.setProperty("--hf-card-l3", surface.l3);
+      roots[i].style.setProperty("--hf-card-hair", surface.hair);
+      roots[i].style.setProperty("--hf-card-media", media);
+      roots[i].style.setProperty("--hf-card-shadow", shadow);
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-transition-card-resize', { '--hf-card-w': '330px', '--hf-card-h': '132px', opacity: 0, y: 24 }, { '--hf-card-w': '560px', '--hf-card-h': '210px', opacity: 1, y: 0, duration: 0.68, ease: 'power3.inOut' }, 0.35);
+  tl.fromTo('.hf-transition-card-copy p', { opacity: 0, y: 12 }, { opacity: 1, y: 0, duration: 0.28, ease: 'power2.out' }, 0.82);
+-->
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add card-resize" />
+
+That writes one file: `compositions/components/card-resize.html`.
+
+## Usage
+
+Open `compositions/components/card-resize.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+
+{/* hf:generated-footer */}
+
+Tagged `video-primitive` `transition-primitive` `transitions-dev-port` `card` `layout`.
+
+## 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/components/char-slam-explode.mdx b/docs/catalog/components/char-slam-explode.mdx
new file mode 100644
index 0000000000..aa87c639df
--- /dev/null
+++ b/docs/catalog/components/char-slam-explode.mdx
@@ -0,0 +1,380 @@
+---
+title: "Char Slam Explode"
+description: "Headline glyphs hold in a deterministic scatter, then reassemble with an overshooting slam and a three-frame landing shake."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/char-slam-explode.html"
+  compositionId="char-slam-explode"
+  compositionSrc="compositions/components/char-slam-explode.html"
+  variables={[{"id":"text","type":"string","role":"content","label":"Headline","description":"Text split into glyphs for the scatter and slam.","default":"Impact"},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Headline and glow color.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"spread","type":"enum","role":"motion","label":"Spread","description":"Distance and rotation of the scattered glyphs.","default":"tight","options":[{"value":"tight","label":"Tight"},{"value":"wild","label":"Wild"}]}]}
+>
+
+```html char-slam-explode.html
+<!doctype html>
+<!--
+  char-slam-explode: HyperFrames video primitive
+
+  A headline begins as individually scattered glyphs, holds the explosion,
+  then reassembles with an overshooting slam and a deterministic three-frame
+  stage shake.
+
+  Variables:
+    text: headline copy
+    accent: green, blue, or violet headline color
+    spread: tight or wild scatter distance
+
+  Envelope, fixed IN and OUT with elastic HOLD:
+    IN_BASE  = 1.64s, scattered hold, staggered return, and landing shake
+    HOLD     = max(0, D - IN - OUT), subtle drift followed by 0.30s stillness
+    OUT_BASE = 0.40s, composed headline fades and scales down
+    If D is shorter than IN_BASE + OUT_BASE, IN and OUT compress together.
+    The timeline is never time-scaled.
+
+  The scatter table was generated at build time from fixed LCG seed
+  0x0c5e2026. Runtime code only reads the authored table.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, and has no data-width or
+  data-height. One paused timeline registers under the literal
+  char-slam-explode key.
+-->
+<html
+  lang="en"
+  data-composition-id="char-slam-explode"
+  data-composition-duration="3.5"
+  data-composition-variables='[
+    { "id": "text", "type": "string", "role": "content", "label": "Headline", "description": "Text split into glyphs for the scatter and slam.", "default": "Impact" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Headline and glow color.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "spread", "type": "enum", "role": "motion", "label": "Spread", "description": "Distance and rotation of the scattered glyphs.", "default": "tight", "options": [{ "value": "tight", "label": "Tight" }, { "value": "wild", "label": "Wild" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Char Slam Explode</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="char-slam-explode" data-duration="3.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .cse-clip,
+          .cse-stage {
+            position: absolute;
+            inset: 0;
+            width: 100cqw;
+            height: 100cqh;
+          }
+
+          .cse-clip {
+            overflow: hidden;
+          }
+
+          .cse-stage {
+            display: grid;
+            place-items: center;
+            will-change: transform;
+          }
+
+          .cse-headline {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 60cqw;
+            min-height: 32cqh;
+            color: var(--cse-accent, #71f5a7);
+            font-size: var(--cse-font-size, min(10cqw, 27cqh));
+            font-weight: 900;
+            line-height: 0.9;
+            letter-spacing: -0.045em;
+            text-align: center;
+            text-shadow:
+              0 0 2.8cqh color-mix(in srgb, var(--cse-accent, #71f5a7) 28%, transparent),
+              0 1.2cqh 4.5cqh color-mix(in srgb, #000 58%, transparent);
+            white-space: nowrap;
+            transform-origin: 50% 50%;
+            will-change: transform, opacity;
+          }
+
+          .cse-glyph {
+            display: inline-block;
+            flex: 0 0 auto;
+            white-space: pre;
+            transform-origin: 50% 55%;
+            will-change: transform;
+          }
+        </style>
+
+        <div
+          id="char-slam-explode-clip"
+          class="cse-clip clip"
+          data-start="0"
+          data-duration="3.5"
+          data-track-index="0"
+        >
+          <div class="cse-stage">
+            <div class="cse-headline" role="heading" aria-level="1"></div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".cse-stage");
+            var headline = root.querySelector(".cse-headline");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var text = vars.text == null ? "Impact" : String(vars.text);
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #b895ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var spread = vars.spread === "wild" ? "wild" : "tight";
+            var spreadValues = {
+              tight: { x: 9, y: 10, rotation: 12 },
+              wild: { x: 17, y: 19, rotation: 22 },
+            };
+
+            root.style.setProperty("--cse-accent", accentColors[accent]);
+            headline.setAttribute("aria-label", text);
+
+            var characters = Array.from(text);
+            characters.forEach(function (character, index) {
+              var glyph = document.createElement("span");
+              glyph.id = "char-slam-explode-glyph-" + index;
+              glyph.className = "cse-glyph";
+              glyph.textContent = /\s/.test(character) ? "\u00a0" : character;
+              glyph.setAttribute("aria-hidden", "true");
+              headline.appendChild(glyph);
+            });
+
+            // Conservative one-em-per-character fitting keeps any glyph mix
+            // inside the 60cqw composed width. The height cap protects short,
+            // wide mounts, while the surrounding clearance protects wild
+            // scatter and the return overshoot.
+            var fittedCqw = Math.min(13.5, 60 / Math.max(1, characters.length));
+            root.style.setProperty(
+              "--cse-font-size",
+              "min(" + fittedCqw.toFixed(3) + "cqw, 27cqh)",
+            );
+
+            // Fixed-seed LCG table, generated at build time. Each row stores
+            // normalized x, y, and rotation values. Long strings wrap the
+            // authored table without introducing runtime randomness.
+            var scatterTable = [
+              [-0.9, -0.038, 0.677],
+              [0.61, 0.716, -0.967],
+              [0.418, 0.575, 0.822],
+              [-0.76, -0.451, 0.944],
+              [-0.621, 0.579, -0.215],
+              [0.714, 0.437, -0.824],
+              [0.577, 0.567, 0.464],
+              [0.902, 0.346, 0.016],
+              [-0.526, 0.743, -0.275],
+              [-0.571, -0.353, 0.954],
+              [-0.666, 0.61, -0.075],
+              [-0.122, 0.875, -0.783],
+              [-0.141, 0.726, -0.659],
+              [0.606, -0.665, -0.713],
+              [-0.962, 0.131, 0.307],
+              [0.227, 0.813, -0.979],
+              [0.264, -0.754, -0.013],
+              [-0.4, 0.903, 0.573],
+              [0.393, 0.542, -0.992],
+              [0.884, -0.313, -0.834],
+              [-0.048, 0.707, -0.331],
+              [-0.766, 0.226, 0.567],
+              [0.207, 0.734, -0.714],
+              [-0.677, -0.614, 0.462],
+              [0.389, -0.542, -0.384],
+              [0.497, 0.716, 0.414],
+              [0.729, -0.59, -0.774],
+              [0.665, -0.061, -0.58],
+              [-0.758, -0.546, 0.364],
+              [0.113, 0.667, -0.202],
+              [0.963, 0.171, 0.47],
+              [0.662, -0.295, 0.912],
+              [0.555, 0.548, 0.952],
+              [-0.132, -0.677, 0.685],
+              [-0.758, 0.133, -0.469],
+              [-0.296, 0.697, 0.61],
+              [-0.27, 0.786, -0.677],
+              [-0.781, -0.478, -0.384],
+              [-0.216, -0.633, -0.949],
+              [0.721, -0.452, -0.62],
+              [-0.434, 0.816, 0.526],
+              [-0.794, 0.014, -0.971],
+              [-0.683, -0.158, 0.844],
+              [-0.914, 0.066, 0.396],
+              [0.157, -0.721, -0.188],
+              [0.662, -0.087, 0.573],
+              [-0.732, 0.651, -0.935],
+              [0.35, 0.605, 0.152],
+              [-0.317, -0.668, 0.206],
+              [0.139, 0.822, -0.11],
+              [-0.821, 0.464, 0.347],
+              [-0.668, -0.527, -0.879],
+              [-0.578, -0.444, 0.673],
+              [0.573, 0.744, 0.819],
+              [-0.52, -0.449, 0.256],
+              [-0.053, -0.703, 0.258],
+              [-0.646, 0.266, -0.551],
+              [-0.728, -0.448, -0.488],
+              [-0.547, -0.5, -0.099],
+              [0.714, 0.091, 0.084],
+              [-0.114, 0.764, -0.357],
+              [0.02, -0.706, -0.59],
+              [0.144, -0.947, -0.95],
+              [-0.851, 0.232, -0.445],
+            ];
+            var glyphs = Array.from(root.querySelectorAll(".cse-glyph"));
+            var scatter = spreadValues[spread];
+
+            glyphs.forEach(function (glyph, index) {
+              var values = scatterTable[index % scatterTable.length];
+              gsap.set(glyph, {
+                x: (values[0] * scatter.x).toFixed(3) + "cqw",
+                y: (values[1] * scatter.y).toFixed(3) + "cqh",
+                rotation: values[2] * scatter.rotation,
+                scale: 0.82,
+              });
+            });
+
+            var IN_BASE = 1.64;
+            var OUT_BASE = 0.4;
+            var RETURN_AT_BASE = 0.58;
+            var RETURN_DURATION_BASE = 0.66;
+            var STAGGER_BASE = 0.28;
+            var LAND_AT_BASE = RETURN_AT_BASE + RETURN_DURATION_BASE + STAGGER_BASE;
+            var SHAKE_FRAME_BASE = 1 / 30;
+            var STILL_HOLD_BASE = 0.3;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "3.5"));
+            var baseTotal = IN_BASE + OUT_BASE;
+            var envelopeScale = duration < baseTotal ? duration / baseTotal : 1;
+            var IN = IN_BASE * envelopeScale;
+            var OUT = OUT_BASE * envelopeScale;
+            var RETURN_AT = RETURN_AT_BASE * envelopeScale;
+            var RETURN_DURATION = RETURN_DURATION_BASE * envelopeScale;
+            var STAGGER = STAGGER_BASE * envelopeScale;
+            var LAND_AT = LAND_AT_BASE * envelopeScale;
+            var SHAKE_FRAME = SHAKE_FRAME_BASE * envelopeScale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var ACTIVE_HOLD = Math.max(0, HOLD - Math.min(STILL_HOLD_BASE, HOLD));
+            var HOLD_START = IN;
+            var OUT_START = IN + HOLD;
+
+            var tl = gsap.timeline({ paused: true });
+
+            tl.to(
+              glyphs,
+              {
+                x: 0,
+                y: 0,
+                rotation: 0,
+                scale: 1,
+                duration: RETURN_DURATION,
+                ease: "back.out(1.7)",
+                stagger: { amount: STAGGER, from: "center" },
+              },
+              RETURN_AT,
+            );
+
+            tl.to(
+              stage,
+              { x: "0.55cqw", y: "-0.3cqh", duration: SHAKE_FRAME, ease: "power2.out" },
+              LAND_AT,
+            );
+            tl.to(stage, {
+              x: "-0.38cqw",
+              y: "0.2cqh",
+              duration: SHAKE_FRAME,
+              ease: "power2.out",
+            });
+            tl.to(stage, { x: 0, y: 0, duration: SHAKE_FRAME, ease: "power2.out" });
+
+            if (ACTIVE_HOLD > 0) {
+              tl.fromTo(
+                headline,
+                { y: 0 },
+                {
+                  y: "-0.4cqh",
+                  duration: ACTIVE_HOLD / 2,
+                  ease: "sine.inOut",
+                  yoyo: true,
+                  repeat: 1,
+                  immediateRender: false,
+                },
+                HOLD_START,
+              );
+            }
+
+            tl.to(
+              headline,
+              { opacity: 0, scale: 0.96, duration: OUT, ease: "power2.in" },
+              OUT_START,
+            );
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["char-slam-explode"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add char-slam-explode" />
+
+That writes one file: `compositions/components/char-slam-explode.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/char-slam-explode.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `typography` `text-treatment` `scatter` `slam` `impact`.
+
+## 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/components/chart-story.mdx b/docs/catalog/components/chart-story.mdx
new file mode 100644
index 0000000000..41530d0713
--- /dev/null
+++ b/docs/catalog/components/chart-story.mdx
@@ -0,0 +1,781 @@
+---
+title: "Chart Story"
+description: "One chart builds from data in reading order and lands the exact supplied values: staggered bars, a left-to-right line with area fill, a sweeping donut, or filling progress bars, with an accented value callout on the emphasized datum."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/chart-story.html"
+  compositionId="chart-story"
+  compositionSrc="compositions/components/chart-story.html"
+  variables={[{"id":"type","type":"enum","role":"content","label":"Chart type","description":"Chart form the data builds into.","default":"bars","options":[{"value":"bars","label":"Bars"},{"value":"line","label":"Line"},{"value":"donut","label":"Donut"},{"value":"progress","label":"Progress"}]},{"id":"data","type":"string","role":"content","label":"Data","description":"Comma-separated numbers; the chart lands exactly on these values.","default":"12, 28, 45, 64"},{"id":"labels","type":"string","role":"content","label":"Labels","description":"Comma-separated labels, one per datum.","default":"Q1, Q2, Q3, Q4"},{"id":"emphasize","type":"number","role":"content","label":"Emphasize","description":"Index of the datum that takes the accent and the value callout. Clamped to the data range.","default":3,"step":1},{"id":"unit","type":"string","role":"content","label":"Unit","description":"Suffix appended to every displayed value.","default":"%"},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Contract color used by the emphasized datum and its callout.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"style","label":"Exit","description":"Optional departure. Proof stats end on the still hold, so the default is none.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
+>
+
+```html chart-story.html
+<!doctype html>
+<!--
+  chart-story: HyperFrames video primitive (proof and stats / prove)
+
+  One chart builds from data in reading order and lands the exact supplied
+  values. Bars grow staggered from the baseline, a line draws left to right
+  with an optional translucent area fill, a donut ring sweeps segment by
+  segment, or horizontal progress bars fill top to bottom. Axis and data
+  labels fade in reading order; the emphasized datum takes the accent color
+  and a value callout that pops and settles on the exact value plus unit.
+
+  Variables:
+    - type (bars | line | donut | progress, default "bars"): chart form.
+    - data (string, default "12, 28, 45, 64"): comma-separated numbers.
+    - labels (string, default "Q1, Q2, Q3, Q4"): comma-separated labels.
+    - emphasize (number, default 3): index of the accented datum, clamped.
+    - unit (string, default "%"): suffix appended to every value.
+    - accent (green | blue | violet, default "green"): emphasis color.
+    - exit (none | fade | up, default none): films end on the hold.
+
+  Envelope, fixed IN with elastic HOLD only (OUT exists only when exit is
+  fade or up):
+    IN_BASE  = 3.3s, stage arrival, axis draw, data build, labels, callout
+    HOLD     = max(0, D - IN - OUT), one finite drift then 0.3s stillness
+    OUT_BASE = 0.5s only when exit is fade or up, otherwise 0
+    If D is shorter than IN_BASE + OUT_BASE, IN and OUT compress together.
+    The timeline is never time-scaled.
+
+  Determinism: the whole SVG is built synchronously from the variables, all
+  dash lengths come from getTotalLength (never the pathLength attribute, no
+  vector-effect on dashed paths), and the callout number rows are authored
+  frame sets, so repeated or reverse seeks always show the same pixels. The
+  final displayed values are the raw supplied tokens, never re-rounded.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, has no data-width or data-height,
+  and registers one paused timeline under the literal chart-story key.
+-->
+<html
+  lang="en"
+  data-composition-id="chart-story"
+  data-composition-duration="5"
+  data-composition-variables='[
+    { "id": "type", "type": "enum", "role": "content", "label": "Chart type", "description": "Chart form the data builds into.", "default": "bars", "options": [{ "value": "bars", "label": "Bars" }, { "value": "line", "label": "Line" }, { "value": "donut", "label": "Donut" }, { "value": "progress", "label": "Progress" }] },
+    { "id": "data", "type": "string", "role": "content", "label": "Data", "description": "Comma-separated numbers; the chart lands exactly on these values.", "default": "12, 28, 45, 64" },
+    { "id": "labels", "type": "string", "role": "content", "label": "Labels", "description": "Comma-separated labels, one per datum.", "default": "Q1, Q2, Q3, Q4" },
+    { "id": "emphasize", "type": "number", "role": "content", "label": "Emphasize", "description": "Index of the datum that takes the accent and the value callout. Clamped to the data range.", "default": 3, "step": 1 },
+    { "id": "unit", "type": "string", "role": "content", "label": "Unit", "description": "Suffix appended to every displayed value.", "default": "%" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Contract color used by the emphasized datum and its callout.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "style", "label": "Exit", "description": "Optional departure. Proof stats end on the still hold, so the default is none.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Chart Story</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="chart-story" data-duration="5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .cs-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .cs-stage {
+            position: relative;
+            width: 92cqw;
+            height: 88cqh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: var(--space-2, 2cqmin);
+            will-change: transform, opacity;
+          }
+
+          .cs-stage svg {
+            width: 100%;
+            height: 100%;
+            display: block;
+            overflow: visible;
+          }
+
+          .cs-mono {
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            letter-spacing: 0.03em;
+          }
+
+          .cs-display {
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-weight: 600;
+            letter-spacing: -0.02em;
+          }
+        </style>
+
+        <div
+          id="chart-story-clip"
+          class="cs-clip clip"
+          data-start="0"
+          data-duration="5"
+          data-track-index="0"
+        >
+          <div class="cs-stage" role="img"></div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var NS = "http://www.w3.org/2000/svg";
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".cs-stage");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var typeOptions = { bars: 1, line: 1, donut: 1, progress: 1 };
+            var type = Object.prototype.hasOwnProperty.call(typeOptions, vars.type)
+              ? vars.type
+              : "bars";
+            var unit = vars.unit == null ? "%" : String(vars.unit);
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var accentColor = accentColors[accent];
+            var inkColor = "var(--fg, #f8fafc)";
+            // Label ink: raw --muted fails contrast on near-white hosts
+            // (#94a3b8 on #f8fafc is ~2.4:1). Pulling it halfway toward --fg
+            // stays quiet next to inkColor yet passes 4.5:1 on light AND
+            // dark hosts, since --fg is by definition high-contrast on --bg.
+            var mutedColor = "color-mix(in srgb, var(--fg, #f8fafc) 50%, var(--muted, #94a3b8))";
+            var borderColor = "var(--border, #475569)";
+            var baseSeries = "color-mix(in srgb, var(--fg, #f8fafc) 44%, var(--surface, #10161f))";
+            var lineSeries = "color-mix(in srgb, var(--fg, #f8fafc) 82%, var(--surface, #10161f))";
+            var trackColor = "color-mix(in srgb, var(--border, #475569) 55%, transparent)";
+
+            // Values keep their raw tokens: the displayed final numbers are
+            // the exact supplied strings, never a re-rounded float.
+            var tokens = String(vars.data == null ? "" : vars.data)
+              .split(",")
+              .map(function (token) {
+                return token.trim();
+              })
+              .filter(function (token) {
+                return token !== "" && Number.isFinite(Number(token));
+              });
+            if (tokens.length === 0) tokens = ["12", "28", "45", "64"];
+            var values = tokens.map(Number);
+            var n = values.length;
+
+            var labels = String(vars.labels == null ? "Q1, Q2, Q3, Q4" : vars.labels)
+              .split(",")
+              .map(function (label) {
+                return label.trim();
+              });
+            while (labels.length < n) labels.push("");
+
+            var emphasize = Math.round(Number(vars.emphasize));
+            if (!Number.isFinite(emphasize)) emphasize = n - 1;
+            emphasize = Math.min(Math.max(emphasize, 0), n - 1);
+
+            var displays = tokens.map(function (token) {
+              return token + unit;
+            });
+            var emphasizedValue = values[emphasize];
+            var emphasizedDecimals = (tokens[emphasize].split(".")[1] || "").length;
+
+            var maxValue = Math.max(1e-9, Math.max.apply(null, values));
+            var FPS = 30;
+
+            stage.setAttribute(
+              "aria-label",
+              labels
+                .slice(0, n)
+                .map(function (label, index) {
+                  return (label ? label + " " : "") + displays[index];
+                })
+                .join(", "),
+            );
+
+            var svg = document.createElementNS(NS, "svg");
+            svg.setAttribute("viewBox", "0 0 1000 560");
+            svg.setAttribute("preserveAspectRatio", "xMidYMid meet");
+            stage.appendChild(svg);
+
+            function make(name, attrs, parent) {
+              var node = document.createElementNS(NS, name);
+              for (var key in attrs) node.setAttribute(key, String(attrs[key]));
+              (parent || svg).appendChild(node);
+              return node;
+            }
+
+            function text(x, y, size, fill, anchor, parent) {
+              var node = make(
+                "text",
+                {
+                  x: x,
+                  y: y,
+                  "font-size": size,
+                  "text-anchor": anchor || "middle",
+                  class: "cs-mono",
+                },
+                parent,
+              );
+              node.style.fill = fill;
+              return node;
+            }
+
+            // Dashed draw setup: length comes from getTotalLength, never the
+            // pathLength attribute, and dashed strokes never use
+            // vector-effect: non-scaling-stroke.
+            function dashPrepare(node) {
+              var length = node.getTotalLength();
+              node.style.strokeDasharray = length + " " + length;
+              gsap.set(node, { strokeDashoffset: length });
+              return length;
+            }
+
+            // Envelope (base seconds, all scaled together, never timeScaled)
+            var IN_BASE = 3.3;
+            var OUT_BASE = exit === "none" ? 0 : 0.5;
+            var STILLNESS = 0.3;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "5"));
+            var totalBase = IN_BASE + OUT_BASE;
+            var s = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * s;
+            var OUT = OUT_BASE * s;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var HOLD_START = IN;
+            var OUT_START = IN + HOLD;
+
+            var AXIS_AT = 0.15;
+            var AXIS_DUR = 0.5;
+            var BUILD_AT = 0.55;
+            var BUILD_DUR = 1.6;
+            var LABELS_AT = 0.85;
+            var CALLOUT_AT = 2.35;
+            var POP_DUR = 0.45;
+            var ROLL_DUR = 0.7;
+
+            var tl = gsap.timeline({ paused: true });
+
+            gsap.set(stage, { opacity: 0, y: "2.4cqh" });
+            tl.to(stage, { opacity: 1, duration: 0.5 * s, ease: "power2.out" }, 0);
+            tl.to(stage, { y: "0cqh", duration: 0.5 * s, ease: "power3.out" }, 0);
+
+            function fadeIn(node, at, rise) {
+              gsap.set(node, rise ? { opacity: 0, y: 8 } : { opacity: 0 });
+              tl.to(
+                node,
+                rise
+                  ? { opacity: 1, y: 0, duration: 0.4 * s, ease: "power2.out" }
+                  : { opacity: 1, duration: 0.4 * s, ease: "power2.out" },
+                at * s,
+              );
+            }
+
+            function drawBaseline(x0, x1, y) {
+              var baseline = make("path", {
+                d: "M " + x0 + " " + y + " L " + x1 + " " + y,
+                fill: "none",
+                "stroke-width": 3,
+                "stroke-linecap": "round",
+              });
+              baseline.style.stroke = borderColor;
+              var length = dashPrepare(baseline);
+              tl.to(
+                baseline,
+                { strokeDashoffset: 0, duration: AXIS_DUR * s, ease: "power2.inOut" },
+                AXIS_AT * s,
+              );
+              return length;
+            }
+
+            // Callout chip: pops with a smooth settle, number rows are
+            // authored frames that land on the exact supplied token.
+            function makeCallout(anchorX, bottomY) {
+              var label = displays[emphasize];
+              var width = Math.max(96, Array.from(label).length * 17 + 44);
+              var height = 52;
+              var cx = Math.min(Math.max(anchorX, width / 2 + 8), 1000 - width / 2 - 8);
+              var group = make("g", {});
+              var chip = make(
+                "rect",
+                {
+                  x: cx - width / 2,
+                  y: bottomY - height,
+                  width: width,
+                  height: height,
+                  rx: 12,
+                },
+                group,
+              );
+              chip.style.fill = accentColor;
+              var valueNode = text(
+                cx,
+                bottomY - height / 2 + 10,
+                29,
+                "var(--bg, #05070b)",
+                "middle",
+                group,
+              );
+              valueNode.setAttribute("font-weight", "600");
+              popAndRoll(group, valueNode, "50% 100%");
+            }
+
+            function popAndRoll(group, valueNode, origin) {
+              gsap.set(group, { opacity: 0, scale: 0.6, transformOrigin: origin });
+              tl.to(group, { opacity: 1, duration: 0.25 * s, ease: "power2.out" }, CALLOUT_AT * s);
+              tl.to(
+                group,
+                { scale: 1, duration: POP_DUR * s, ease: "back.out(1.7)" },
+                CALLOUT_AT * s,
+              );
+              var frames = Math.max(1, Math.round(ROLL_DUR * s * FPS));
+              var ease = gsap.parseEase("power2.out");
+              var suffix = valueNode.__rollUnitless ? "" : unit;
+              for (var frame = 0; frame <= frames; frame += 1) {
+                var row =
+                  frame === frames
+                    ? tokens[emphasize] + suffix
+                    : (emphasizedValue * ease(frame / frames)).toFixed(emphasizedDecimals) + suffix;
+                tl.set(
+                  valueNode,
+                  { textContent: row },
+                  (CALLOUT_AT + ROLL_DUR * (frame / frames)) * s,
+                );
+              }
+            }
+
+            function buildBars() {
+              var left = 80;
+              var right = 920;
+              var base = 470;
+              var top = 120;
+              var band = (right - left) / n;
+              var barWidth = Math.min(band * 0.62, 150);
+              drawBaseline(left, right, base);
+              var stagger = n > 1 ? (BUILD_DUR - 0.85) / (n - 1) : 0;
+
+              values.forEach(function (value, index) {
+                var height = Math.max((value / maxValue) * (base - top), 3);
+                var cx = left + band * (index + 0.5);
+                var at = BUILD_AT + stagger * index;
+                // Radius never exceeds half the bar height, so tiny data
+                // values render as clean low bars instead of radius-crushed
+                // slivers. Growth animates the rect geometry (not scaleY):
+                // the renderer re-clamps the corner radius against the
+                // current height every frame, so no growth frame shows a
+                // squashed pill either.
+                var bar = make("rect", {
+                  x: cx - barWidth / 2,
+                  y: base,
+                  width: barWidth,
+                  height: 0,
+                  rx: Math.min(10, barWidth * 0.18, height / 2),
+                });
+                bar.style.fill = index === emphasize ? accentColor : baseSeries;
+                tl.to(
+                  bar,
+                  {
+                    attr: { height: height, y: base - height },
+                    duration: 0.85 * s,
+                    ease: "power3.out",
+                  },
+                  at * s,
+                );
+
+                var axisLabel = text(cx, base + 42, 26, mutedColor);
+                axisLabel.textContent = labels[index];
+                fadeIn(axisLabel, LABELS_AT + index * 0.12, true);
+
+                if (index !== emphasize) {
+                  var valueLabel = text(cx, base - height - 16, 27, inkColor);
+                  valueLabel.textContent = displays[index];
+                  fadeIn(valueLabel, at + 0.65, true);
+                }
+              });
+
+              var emphasizedHeight = Math.max((values[emphasize] / maxValue) * (base - top), 3);
+              makeCallout(left + band * (emphasize + 0.5), base - emphasizedHeight - 20);
+            }
+
+            function buildLine() {
+              var left = 80;
+              var right = 920;
+              var base = 470;
+              var top = 120;
+              drawBaseline(left, right, base);
+
+              var points = values.map(function (value, index) {
+                return {
+                  x: left + (right - left) * (n === 1 ? 0.5 : index / (n - 1)),
+                  y: base - (value / maxValue) * (base - top),
+                };
+              });
+              var lineD = points
+                .map(function (point, index) {
+                  return (index === 0 ? "M " : "L ") + point.x + " " + point.y;
+                })
+                .join(" ");
+
+              // Translucent area fill fades in after the stroke finishes.
+              var area = make("path", {
+                d:
+                  lineD +
+                  " L " +
+                  points[n - 1].x +
+                  " " +
+                  base +
+                  " L " +
+                  points[0].x +
+                  " " +
+                  base +
+                  " Z",
+                stroke: "none",
+              });
+              area.style.fill = accentColor;
+              gsap.set(area, { opacity: 0 });
+              tl.to(
+                area,
+                { opacity: 0.14, duration: 0.45 * s, ease: "power2.out" },
+                (BUILD_AT + BUILD_DUR - 0.05) * s,
+              );
+
+              var line = make("path", {
+                d: lineD,
+                fill: "none",
+                "stroke-width": 6,
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round",
+              });
+              line.style.stroke = lineSeries;
+              dashPrepare(line);
+              // ease "none" keeps the dash front aligned with the per-point
+              // cumulative-length timings below.
+              tl.to(
+                line,
+                { strokeDashoffset: 0, duration: (BUILD_DUR - 0.1) * s, ease: "none" },
+                BUILD_AT * s,
+              );
+
+              var cumulative = [0];
+              for (var index = 1; index < n; index += 1) {
+                cumulative.push(
+                  cumulative[index - 1] +
+                    Math.hypot(
+                      points[index].x - points[index - 1].x,
+                      points[index].y - points[index - 1].y,
+                    ),
+                );
+              }
+              var totalLength = Math.max(cumulative[n - 1], 1e-9);
+
+              points.forEach(function (point, index) {
+                var at = BUILD_AT + (BUILD_DUR - 0.1) * (cumulative[index] / totalLength);
+                var dot = make("circle", {
+                  cx: point.x,
+                  cy: point.y,
+                  r: index === emphasize ? 11 : 7,
+                });
+                dot.style.fill = index === emphasize ? accentColor : inkColor;
+                gsap.set(dot, { scale: 0, transformOrigin: "50% 50%" });
+                tl.to(dot, { scale: 1, duration: 0.35 * s, ease: "back.out(2)" }, at * s);
+
+                var axisLabel = text(point.x, base + 42, 26, mutedColor);
+                axisLabel.textContent = labels[index];
+                fadeIn(axisLabel, LABELS_AT + index * 0.12, true);
+
+                if (index !== emphasize) {
+                  var valueLabel = text(point.x, point.y - 20, 25, inkColor);
+                  valueLabel.textContent = displays[index];
+                  fadeIn(valueLabel, at + 0.2, true);
+                }
+              });
+
+              makeCallout(points[emphasize].x, points[emphasize].y - 24);
+            }
+
+            function polar(cx, cy, radius, degrees) {
+              var radians = ((degrees - 90) * Math.PI) / 180;
+              return { x: cx + radius * Math.cos(radians), y: cy + radius * Math.sin(radians) };
+            }
+
+            function arcPath(cx, cy, radius, startDeg, endDeg) {
+              var start = polar(cx, cy, radius, startDeg);
+              var end = polar(cx, cy, radius, endDeg);
+              var large = endDeg - startDeg > 180 ? 1 : 0;
+              return (
+                "M " +
+                start.x +
+                " " +
+                start.y +
+                " A " +
+                radius +
+                " " +
+                radius +
+                " 0 " +
+                large +
+                " 1 " +
+                end.x +
+                " " +
+                end.y
+              );
+            }
+
+            function buildDonut() {
+              var cx = 500;
+              var cy = 252;
+              var radius = 168;
+              var strokeWidth = 54;
+              var total = Math.max(
+                values.reduce(function (sum, value) {
+                  return sum + value;
+                }, 0),
+                1e-9,
+              );
+              var ladder = [72, 50, 36, 26, 18];
+
+              var track = make("circle", {
+                cx: cx,
+                cy: cy,
+                r: radius,
+                fill: "none",
+                "stroke-width": strokeWidth,
+              });
+              track.style.stroke = trackColor;
+              fadeIn(track, AXIS_AT);
+
+              var gap = n > 1 ? 3 : 0;
+              var cursor = 0;
+              values.forEach(function (value, index) {
+                var share = value / total;
+                var startDeg = cursor * 360;
+                var endDeg = (cursor + share) * 360;
+                cursor += share;
+                if (endDeg - startDeg <= gap * 2 + 0.05) return;
+                var segment = make("path", {
+                  d: arcPath(
+                    cx,
+                    cy,
+                    radius,
+                    startDeg + gap / 2,
+                    Math.min(endDeg - gap / 2, 359.98),
+                  ),
+                  fill: "none",
+                  "stroke-width": strokeWidth,
+                });
+                segment.style.stroke =
+                  index === emphasize
+                    ? accentColor
+                    : "color-mix(in srgb, var(--fg, #f8fafc) " +
+                      ladder[index % ladder.length] +
+                      "%, var(--surface, #10161f))";
+                dashPrepare(segment);
+                tl.to(
+                  segment,
+                  {
+                    strokeDashoffset: 0,
+                    duration: Math.max(BUILD_DUR * share, 0.05) * s,
+                    ease: "none",
+                  },
+                  (BUILD_AT + BUILD_DUR * (cursor - share)) * s,
+                );
+              });
+
+              // Legend row beneath, reading order left to right.
+              var itemWidth = Math.min(230, 880 / n);
+              var startX = 500 - (itemWidth * n) / 2;
+              values.forEach(function (value, index) {
+                var x = startX + itemWidth * index;
+                var group = make("g", {});
+                var swatch = make("rect", { x: x, y: 506, width: 20, height: 20, rx: 5 }, group);
+                swatch.style.fill =
+                  index === emphasize
+                    ? accentColor
+                    : "color-mix(in srgb, var(--fg, #f8fafc) " +
+                      ladder[index % ladder.length] +
+                      "%, var(--surface, #10161f))";
+                var entry = text(x + 32, 523, 24, mutedColor, "start", group);
+                entry.textContent = labels[index] ? labels[index] + " " : "";
+                var valueSpan = document.createElementNS(NS, "tspan");
+                valueSpan.style.fill = inkColor;
+                valueSpan.textContent = displays[index];
+                entry.appendChild(valueSpan);
+                fadeIn(group, LABELS_AT + index * 0.14, true);
+              });
+
+              // Center callout: the emphasized value rolls to the exact token.
+              var center = make("g", {});
+              var valueText = make(
+                "text",
+                {
+                  x: cx,
+                  y: cy + 14,
+                  "font-size": 84,
+                  "text-anchor": "middle",
+                  class: "cs-display",
+                },
+                center,
+              );
+              valueText.style.fill = accentColor;
+              var numberSpan = document.createElementNS(NS, "tspan");
+              numberSpan.__rollUnitless = true;
+              valueText.appendChild(numberSpan);
+              var unitSpan = document.createElementNS(NS, "tspan");
+              unitSpan.setAttribute("font-size", 44);
+              unitSpan.style.fill = mutedColor;
+              unitSpan.textContent = unit;
+              valueText.appendChild(unitSpan);
+              if (labels[emphasize]) {
+                var centerLabel = text(cx, cy + 62, 26, mutedColor, "middle", center);
+                centerLabel.textContent = labels[emphasize];
+              }
+              popAndRoll(center, numberSpan, "50% 50%");
+            }
+
+            function buildProgress() {
+              var rowHeight = Math.min(92, 440 / n);
+              var top = Math.max(90, 285 - (rowHeight * n) / 2);
+              var trackX = 300;
+              var trackWidth = 560;
+              // Percent-flavored data fills against 100; otherwise the
+              // largest value owns the full track.
+              var denominator = unit.trim() === "%" ? Math.max(100, maxValue) : maxValue;
+              var stagger = n > 1 ? (BUILD_DUR - 0.9) / (n - 1) : 0;
+
+              values.forEach(function (value, index) {
+                var cy = top + rowHeight * (index + 0.5);
+                var at = BUILD_AT + stagger * index;
+                var fraction = Math.min(Math.max(value / denominator, 0), 1);
+
+                var track = make("rect", {
+                  x: trackX,
+                  y: cy - 10,
+                  width: trackWidth,
+                  height: 20,
+                  rx: 10,
+                });
+                track.style.fill = trackColor;
+                fadeIn(track, AXIS_AT + index * 0.08);
+
+                // Same sliver guard as bars: radius clamped to half the fill
+                // width and growth via rect geometry, never scaleX.
+                var fillWidth = Math.max(trackWidth * fraction, 8);
+                var fill = make("rect", {
+                  x: trackX,
+                  y: cy - 10,
+                  width: 0,
+                  height: 20,
+                  rx: Math.min(10, fillWidth / 2),
+                });
+                fill.style.fill = index === emphasize ? accentColor : baseSeries;
+                tl.to(
+                  fill,
+                  { attr: { width: fillWidth }, duration: 0.9 * s, ease: "power3.out" },
+                  at * s,
+                );
+
+                var rowLabel = text(80, cy + 9, 26, mutedColor, "start");
+                rowLabel.textContent = labels[index];
+                fadeIn(rowLabel, LABELS_AT + index * 0.12, true);
+
+                if (index !== emphasize) {
+                  var valueLabel = text(884, cy + 9, 27, inkColor, "start");
+                  valueLabel.textContent = displays[index];
+                  fadeIn(valueLabel, at + 0.65, true);
+                }
+              });
+
+              var emphasizedFraction = Math.min(Math.max(values[emphasize] / denominator, 0), 1);
+              makeCallout(
+                trackX + trackWidth * emphasizedFraction,
+                top + rowHeight * (emphasize + 0.5) - 26,
+              );
+            }
+
+            if (type === "bars") buildBars();
+            else if (type === "line") buildLine();
+            else if (type === "donut") buildDonut();
+            else buildProgress();
+
+            // HOLD: one finite drift, authored as two explicit tweens, then
+            // stillness to the end (or to the exit).
+            var driftDuration = Math.max(0, HOLD - STILLNESS);
+            if (driftDuration > 0.1) {
+              var half = driftDuration / 2;
+              tl.to(stage, { y: "-0.5cqh", duration: half, ease: "sine.inOut" }, HOLD_START);
+              tl.to(stage, { y: "0cqh", duration: half, ease: "sine.inOut" }, HOLD_START + half);
+            }
+
+            if (exit === "fade") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "up") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+              tl.to(stage, { y: "-3cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["chart-story"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add chart-story" />
+
+That writes one file: `compositions/components/chart-story.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/chart-story.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `proof` `stats` `chart` `bars` `line` `donut` `progress` `deterministic`.
+
+## 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/components/checkout-flow.mdx b/docs/catalog/components/checkout-flow.mdx
new file mode 100644
index 0000000000..2cb80558cd
--- /dev/null
+++ b/docs/catalog/components/checkout-flow.mdx
@@ -0,0 +1,126 @@
+---
+title: "Checkout Flow"
+description: "A composed checkout flow with plan summary, payment field rows, total, and purchase action"
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/components/checkout-flow.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Checkout Flow preview" />
+
+## Install
+
+<InstallCommand command="npx hyperframes add checkout-flow" />
+
+That writes one file: `compositions/components/checkout-flow.html`.
+
+## Source
+
+<Accordion title={`checkout-flow.html`}>
+
+```html
+<!--
+  Checkout Flow - Remocn-inspired composed UI flow for HyperFrames.
+
+  Paste the markup and CSS into a composition. Use the timeline integration
+  note at the bottom as the starting point for deterministic GSAP animation.
+-->
+
+<div class="hf-ui-checkout-flow">
+  <div class="hf-ui-checkout-plan"><span>Pro plan</span><strong>$29/mo</strong></div>
+  <div class="hf-ui-checkout-fields">
+    <div>Card number <strong>4242 4242 4242 4242</strong></div>
+    <div>Expiry <strong>12/30</strong></div>
+  </div>
+  <div class="hf-ui-checkout-total"><span>Total today</span><strong>$29.00</strong></div>
+  <button type="button">Complete purchase</button>
+</div>
+
+<style>
+  .hf-ui-checkout-flow {
+    display: grid;
+    gap: 16px;
+    width: 440px;
+    padding: 26px;
+    border: 1px solid #e4e4e7;
+    border-radius: 28px;
+    background: #ffffff;
+    color: #18181b;
+    font-family: Inter, system-ui, sans-serif;
+    box-shadow: 0 28px 84px rgba(0, 0, 0, 0.12);
+  }
+  .hf-ui-checkout-plan,
+  .hf-ui-checkout-total {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .hf-ui-checkout-plan {
+    padding: 18px;
+    border-radius: 18px;
+    background: #18181b;
+    color: #ffffff;
+  }
+  .hf-ui-checkout-plan span,
+  .hf-ui-checkout-total span {
+    color: inherit;
+    opacity: 0.72;
+    font-size: 14px;
+    font-weight: 850;
+  }
+  .hf-ui-checkout-plan strong,
+  .hf-ui-checkout-total strong {
+    font-size: 22px;
+  }
+  .hf-ui-checkout-fields {
+    display: grid;
+    gap: 10px;
+  }
+  .hf-ui-checkout-fields div {
+    display: grid;
+    gap: 5px;
+    padding: 14px 16px;
+    border: 1px solid #e4e4e7;
+    border-radius: 15px;
+    color: #71717a;
+    font-size: 13px;
+    font-weight: 800;
+  }
+  .hf-ui-checkout-fields strong {
+    color: #18181b;
+    font-size: 16px;
+  }
+  .hf-ui-checkout-flow button {
+    height: 50px;
+    border: 0;
+    border-radius: 15px;
+    /* The primary action is the one accent-carrying element here. */
+    background: var(--accent, #18181b);
+    color: #ffffff;
+    font-weight: 900;
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-ui-checkout-flow', { opacity: 0, y: 28 }, { opacity: 1, y: 0, duration: 0.36, ease: 'power2.out' }, 0.25);
+  tl.fromTo('.hf-ui-checkout-fields div', { x: -16, opacity: 0 }, { x: 0, opacity: 1, duration: 0.26, stagger: 0.08, ease: 'power2.out' }, 0.62);
+  tl.fromTo('.hf-ui-checkout-total', { opacity: 0 }, { opacity: 1, duration: 0.24, ease: 'power2.out' }, 0.92);
+  tl.to('.hf-ui-checkout-flow button', { scale: 0.96, duration: 0.12, yoyo: true, repeat: 1, ease: 'power1.inOut' }, 1.18);
+-->
+```
+
+</Accordion>
+
+## Usage
+
+Open `compositions/components/checkout-flow.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+
+{/* hf:generated-footer */}
+
+Tagged `ui-flow` `remocn-port` `checkout` `commerce`.
+
+## 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/components/chromatic-aberration-wipe.mdx b/docs/catalog/components/chromatic-aberration-wipe.mdx
new file mode 100644
index 0000000000..be4d1e2a85
--- /dev/null
+++ b/docs/catalog/components/chromatic-aberration-wipe.mdx
@@ -0,0 +1,204 @@
+---
+title: "Chromatic Aberration Wipe"
+description: "A fast slide wipe with RGB channel split on peak frames."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/chromatic-aberration-wipe.html"
+  compositionId="chromatic-aberration-wipe"
+  compositionSrc="compositions/components/chromatic-aberration-wipe.html"
+  variables={[{"id":"direction","type":"enum","role":"motion","label":"Direction","description":"The direction the reveal travels; both scenes slide the same way and the wipe edge follows.","default":"left","options":[{"value":"left","label":"Left"},{"value":"right","label":"Right"},{"value":"up","label":"Up"},{"value":"down","label":"Down"}]},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Colour family of the incoming scene's gradient.","default":"blue","options":[{"value":"blue","label":"Blue"},{"value":"green","label":"Green"},{"value":"violet","label":"Violet"}]},{"id":"aberration","type":"number","role":"style","label":"Aberration","description":"Multiplies the red/cyan channel split: 0 removes it, 1 is the stock strength, 2 doubles the offset and saturates the flash.","default":1,"min":0,"max":2,"step":0.1,"unit":"x"}]}
+>
+
+```html chromatic-aberration-wipe.html
+<!--
+  Chromatic Aberration Wipe - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result as a custom property
+  the CSS consumes. The timeline recipe below is untouched by them: it keeps
+  driving one clip edge, one pair of offsets and one channel-split flash, and
+  these decide which way that edge sweeps and how hard the flash reads.
+
+    - direction (left | right | up | down, default left): the direction the
+      reveal travels. Both scenes slide the same way and the wipe edge follows,
+      so up and down turn the horizontal wipe into a vertical one.
+    - accent (blue | green | violet, default blue): the incoming scene's
+      gradient family.
+    - aberration (0 to 2, default 1): multiplies the red/cyan channel split.
+      0 removes it entirely, 2 doubles the offset and saturates the flash.
+
+  On every default the result is identical to the original: a left-to-right
+  wipe into the blue/violet scene with the stock RGB split.
+
+  The white sheen sweeps horizontally in every direction; it is a flash rather
+  than an edge, so it is left alone.
+-->
+
+<div
+  class="hf-remocn-chromatic-aberration-wipe"
+  data-composition-variables='[
+    { "id": "direction", "type": "enum", "role": "motion", "label": "Direction", "description": "The direction the reveal travels; both scenes slide the same way and the wipe edge follows.", "default": "left", "options": [{ "value": "left", "label": "Left" }, { "value": "right", "label": "Right" }, { "value": "up", "label": "Up" }, { "value": "down", "label": "Down" }] },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Colour family of the incoming scene&#39;s gradient.", "default": "blue", "options": [{ "value": "blue", "label": "Blue" }, { "value": "green", "label": "Green" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "aberration", "type": "number", "role": "style", "label": "Aberration", "description": "Multiplies the red/cyan channel split: 0 removes it, 1 is the stock strength, 2 doubles the offset and saturates the flash.", "default": 1, "min": 0, "max": 2, "step": 0.1, "unit": "x" }
+  ]'
+>
+  <div class="scene from">Before</div>
+  <div class="scene to">Chromatic Aberration Wipe</div>
+  <div class="fx"></div>
+  <div class="rgb"></div>
+</div>
+
+<style>
+  .hf-remocn-chromatic-aberration-wipe {
+    --hf-accent: #2563eb;
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-chromatic-aberration-wipe {
+    position: relative;
+    width: 760px;
+    height: 428px;
+    overflow: hidden;
+    border-radius: 30px;
+    background: #111827;
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+  }
+  .hf-remocn-chromatic-aberration-wipe .scene {
+    position: absolute;
+    inset: 0;
+    display: grid;
+    place-items: center;
+    font-weight: 900;
+    font-size: 58px;
+    letter-spacing: -0.05em;
+    color: #fff;
+  }
+  .hf-remocn-chromatic-aberration-wipe .from {
+    background: linear-gradient(135deg, #111827, #374151);
+    transform: translate(
+        calc(var(--hf-from-x, 0px) * var(--hf-wipe-ax, 1)),
+        calc(var(--hf-from-y, 0px) + var(--hf-from-x, 0px) * var(--hf-wipe-ay, 0))
+      )
+      scale(var(--hf-from-scale, 1));
+    filter: blur(var(--hf-from-blur, 0px));
+  }
+  .hf-remocn-chromatic-aberration-wipe .to {
+    background: linear-gradient(135deg, var(--hf-scene-a, #2563eb), var(--hf-scene-b, #7c3aed));
+    transform: translate(
+        calc(var(--hf-to-x, 0px) * var(--hf-wipe-ax, 1)),
+        calc(var(--hf-to-y, 0px) + var(--hf-to-x, 0px) * var(--hf-wipe-ay, 0))
+      )
+      scale(var(--hf-to-scale, 1));
+    clip-path: inset(
+      calc(var(--hf-clip-top, 0%) + var(--hf-clip-right, 100%) * var(--hf-wipe-t, 0))
+        calc(var(--hf-clip-right, 100%) * var(--hf-wipe-r, 1))
+        calc(var(--hf-clip-bottom, 0%) + var(--hf-clip-right, 100%) * var(--hf-wipe-b, 0))
+        calc(var(--hf-clip-left, 0%) + var(--hf-clip-right, 100%) * var(--hf-wipe-l, 0))
+    );
+  }
+  .hf-remocn-chromatic-aberration-wipe .fx {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
+    mix-blend-mode: screen;
+    transform: translateX(var(--hf-fx-x, -110%));
+  }
+  .hf-remocn-chromatic-aberration-wipe .rgb {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    opacity: calc(var(--hf-rgb-opacity, 0) * var(--hf-rgb-strength, 1));
+    background: linear-gradient(
+      90deg,
+      rgba(239, 68, 68, 0.35),
+      transparent,
+      rgba(34, 211, 238, 0.35)
+    );
+    transform: translateX(calc(var(--hf-rgb-x, 0px) * var(--hf-rgb-strength, 1)));
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    var directions = {
+      left: { ax: "1", ay: "0", t: "0", r: "1", b: "0", l: "0" },
+      right: { ax: "-1", ay: "0", t: "0", r: "0", b: "0", l: "1" },
+      up: { ax: "0", ay: "1", t: "1", r: "0", b: "0", l: "0" },
+      down: { ax: "0", ay: "-1", t: "0", r: "0", b: "1", l: "0" },
+    };
+    var accents = {
+      blue: ["#2563eb", "#7c3aed"],
+      green: ["#047857", "#34d399"],
+      violet: ["#6d28d9", "#a78bfa"],
+    };
+
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var direction = directions[pick(directions, vars.direction, "left")];
+    var accent = accents[pick(accents, vars.accent, "blue")];
+
+    var raw = typeof vars.aberration === "string" ? parseFloat(vars.aberration) : vars.aberration;
+    var aberration = typeof raw === "number" && isFinite(raw) ? Math.min(2, Math.max(0, raw)) : 1;
+
+    var roots = document.querySelectorAll(".hf-remocn-chromatic-aberration-wipe");
+    for (var i = 0; i < roots.length; i += 1) {
+      roots[i].style.setProperty("--hf-wipe-ax", direction.ax);
+      roots[i].style.setProperty("--hf-wipe-ay", direction.ay);
+      roots[i].style.setProperty("--hf-wipe-t", direction.t);
+      roots[i].style.setProperty("--hf-wipe-r", direction.r);
+      roots[i].style.setProperty("--hf-wipe-b", direction.b);
+      roots[i].style.setProperty("--hf-wipe-l", direction.l);
+      roots[i].style.setProperty("--hf-scene-a", accent[0]);
+      roots[i].style.setProperty("--hf-scene-b", accent[1]);
+      roots[i].style.setProperty("--hf-rgb-strength", String(aberration));
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-chromatic-aberration-wipe .to', { '--hf-clip-right': '100%', '--hf-to-x': '60px', '--hf-to-scale': 1.04 }, { '--hf-clip-right': '0%', '--hf-to-x': '0px', '--hf-to-scale': 1, duration: 0.9, ease: 'power3.inOut' }, startTime); tl.to('.hf-remocn-chromatic-aberration-wipe .from', { '--hf-from-x': '-70px', '--hf-from-scale': 0.96, '--hf-from-blur': '5px', duration: 0.9, ease: 'power3.inOut' }, startTime); tl.fromTo('.hf-remocn-chromatic-aberration-wipe .fx', { '--hf-fx-x': '-110%' }, { '--hf-fx-x': '110%', duration: 0.58, ease: 'power2.inOut' }, startTime + 0.18); tl.fromTo('.hf-remocn-chromatic-aberration-wipe .rgb', { '--hf-rgb-opacity': 0, '--hf-rgb-x': '-16px' }, { '--hf-rgb-opacity': 1, '--hf-rgb-x': '16px', repeat: 3, yoyo: true, duration: 0.07, ease: 'steps(1)' }, startTime + 0.32);
+-->
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add chromatic-aberration-wipe" />
+
+That writes one file: `compositions/components/chromatic-aberration-wipe.html`.
+
+## Usage
+
+Open `compositions/components/chromatic-aberration-wipe.html` and paste its contents into your composition. See the comment header in the file for timeline integration guidance.
+
+{/* hf:generated-footer */}
+
+Tagged `video-primitive` `transition-primitive` `remocn-port`.
+
+## 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/components/code-terminal-run.mdx b/docs/catalog/components/code-terminal-run.mdx
new file mode 100644
index 0000000000..f8e81914e8
--- /dev/null
+++ b/docs/catalog/components/code-terminal-run.mdx
@@ -0,0 +1,602 @@
+---
+title: "Code Terminal Run"
+description: "A token-chrome terminal panel runs one command: the prompt line types deterministically behind an integer-cycle caret, executes after a beat, and output lines print one per cue before a fresh prompt appears."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/code-terminal-run.html"
+  compositionId="code-terminal-run"
+  compositionSrc="compositions/components/code-terminal-run.html"
+  variables={[{"id":"prompt_glyph","type":"string","role":"style","label":"Prompt glyph","description":"Leading glyph before the command and the trailing prompt. Empty string hides it.","default":"$"},{"id":"cadence","type":"enum","role":"timing","label":"Cadence","description":"Keystroke rhythm: uniform fixed steps or seeded human chunks.","default":"human","options":[{"value":"uniform","label":"Uniform"},{"value":"human","label":"Human"}]},{"id":"cues","type":"string","role":"timing","label":"Cues","description":"Comma-separated seconds relative to mount start; cue N sets when output line N prints. Empty uses the authored rhythm.","default":""},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Color of the prompt glyph and caret.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Outgoing transition. Frame roots own transitions; none holds the end frame.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
+>
+
+```html code-terminal-run.html
+<!doctype html>
+<!--
+  code-terminal-run: HyperFrames video primitive (product demo / terminal)
+
+  A token-chrome terminal panel runs one command: the prompt line types itself
+  deterministically (the typed-prompt law: one text-at-time row table built
+  synchronously before the timeline registers, an integer-cycle blinking
+  caret), the command "executes" after a beat, and output lines print one per
+  cue with a leading beat. A fresh prompt line with a solid caret appears once
+  the run completes, then the panel holds still.
+
+  Token coloring is authored, not parsed: the slot content carries plain spans
+  (ct-str, ct-flag, ct-path, ct-ok, ct-muted) and CSS routes each class to a
+  contract token. Typing preserves those spans by revealing characters across
+  the command element's text nodes in document order, so the same character
+  count always renders the same colored string in either seek direction.
+
+  Slot (see README.md for a worked example):
+    - [data-slot="content"]: the authored command + output lines. Replace the
+      children of this element in your installed copy. It must contain one
+      [data-terminal="command"] element (inline spans allowed) and any number
+      of [data-terminal="output"] elements, in print order. Default: a generic
+      build-tool sample, no product branding.
+
+  Variables (declared in data-composition-variables below):
+    - prompt_glyph (string, default "$"): leading glyph on the command and the
+      trailing prompt line; empty string hides it.
+    - cadence ("uniform" | "human", default "human"): keystroke rhythm.
+      uniform = one character per fixed step; human = seeded 1-3 char chunks
+      with varied gaps (fixed LCG seed, fully deterministic).
+    - cues (string, default ""): comma-separated seconds relative to mount
+      start; cue N sets when output line N prints. Empty = authored rhythm
+      (a leading beat after execute, then one line per step).
+    - accent (green | blue | violet, default "green"): glyph + caret color.
+    - exit ("none" | "fade" | "up", default "none"): frame roots own
+      transitions; none holds the end frame.
+
+  Envelope, authored 5s, fixed IN/OUT with elastic HOLD only (never
+  gsap.timeScale()): panel settles over 0.5s, typing runs from 0.4s at its
+  natural cadence, execute beat, output prints, trailing prompt; the whole
+  schedule compresses proportionally only if it would overflow
+  duration - OUT. HOLD absorbs all extra duration (solid caret, barely-there
+  drift ending in stillness). OUT exists only when exit != none.
+
+  Mount contract: mountable sub-composition; the runtime clones only this
+  <template>. #root is elastic (no data-width/height, container-type: size),
+  styled via #root only, and registers one paused timeline under the literal
+  "code-terminal-run" key.
+-->
+<html
+  lang="en"
+  data-composition-id="code-terminal-run"
+  data-composition-duration="5"
+  data-composition-variables='[
+    { "id": "prompt_glyph", "type": "string", "role": "style", "label": "Prompt glyph", "description": "Leading glyph before the command and the trailing prompt. Empty string hides it.", "default": "$" },
+    { "id": "cadence", "type": "enum", "role": "timing", "label": "Cadence", "description": "Keystroke rhythm: uniform fixed steps or seeded human chunks.", "default": "human", "options": [{ "value": "uniform", "label": "Uniform" }, { "value": "human", "label": "Human" }] },
+    { "id": "cues", "type": "string", "role": "timing", "label": "Cues", "description": "Comma-separated seconds relative to mount start; cue N sets when output line N prints. Empty uses the authored rhythm.", "default": "" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Color of the prompt glyph and caret.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Outgoing transition. Frame roots own transitions; none holds the end frame.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Code Terminal Run</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="code-terminal-run" data-duration="5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            pointer-events: none;
+          }
+
+          .ctr-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .ctr-stage {
+            width: 84cqw;
+            max-width: 84cqw;
+            will-change: transform, opacity;
+          }
+
+          .ctr-panel {
+            overflow: hidden;
+            border: 0.16cqmin solid color-mix(in srgb, var(--border, #475569) 72%, transparent);
+            border-radius: var(--radius, 2.4cqmin);
+            background: color-mix(in srgb, var(--surface, #0b1016) 96%, var(--ctr-accent));
+            box-shadow: 0 3cqh 9cqh color-mix(in srgb, var(--bg, #000000) 38%, transparent);
+          }
+
+          .ctr-bar {
+            display: flex;
+            align-items: center;
+            gap: var(--space-1, 1.2cqw);
+            padding: var(--space-1, 1.6cqh) var(--space-2, 2.4cqw);
+            border-bottom: 0.14cqmin solid
+              color-mix(in srgb, var(--border, #475569) 55%, transparent);
+            background: color-mix(in srgb, var(--surface, #0b1016) 88%, var(--bg, #000000));
+          }
+
+          .ctr-dot {
+            width: 1.5cqmin;
+            aspect-ratio: 1;
+            border-radius: 50%;
+            background: color-mix(in srgb, var(--muted, #94a3b8) 52%, transparent);
+          }
+
+          .ctr-body {
+            padding: var(--space-2, 3cqh) var(--space-2, 3cqw);
+            min-height: 40cqh;
+          }
+
+          .ctr-slot {
+            display: block;
+          }
+
+          [data-terminal="command"],
+          [data-terminal="output"],
+          .ctr-tail {
+            font-size: var(--ctr-font-size, min(2.6cqw, 5.4cqh));
+            font-weight: 500;
+            line-height: 1.6;
+            white-space: pre-wrap;
+            overflow-wrap: anywhere;
+          }
+
+          [data-terminal="command"]::before,
+          .ctr-tail::before {
+            content: var(--ctr-glyph, "$");
+            margin-right: var(--ctr-glyph-gap, 0.9ch);
+            color: var(--ctr-accent);
+            font-weight: 600;
+          }
+
+          /* Authored token coloring: spans in the slot content, no parser.
+             Each class routes to one contract token. */
+          .ct-str {
+            color: var(--brand, #71f5a7);
+          }
+
+          .ct-flag {
+            color: var(--ctr-accent-token, var(--accent, #61a8ff));
+          }
+
+          .ct-path {
+            color: var(--accent-2, #c5a3ff);
+          }
+
+          .ct-ok {
+            color: var(--brand, #71f5a7);
+            font-weight: 600;
+          }
+
+          .ct-muted {
+            color: var(--muted, #94a3b8);
+          }
+
+          .ctr-caret {
+            display: inline-block;
+            width: 0.55ch;
+            height: 1.05em;
+            margin-left: 0.08ch;
+            background: var(--ctr-accent);
+            vertical-align: text-bottom;
+            will-change: opacity;
+          }
+        </style>
+
+        <div
+          id="code-terminal-run-clip"
+          class="ctr-clip clip"
+          data-start="0"
+          data-duration="5"
+          data-track-index="0"
+        >
+          <div class="ctr-stage" role="img">
+            <div class="ctr-panel">
+              <div class="ctr-bar" aria-hidden="true">
+                <span class="ctr-dot"></span>
+                <span class="ctr-dot"></span>
+                <span class="ctr-dot"></span>
+              </div>
+              <div class="ctr-body">
+                <div class="ctr-slot" data-slot="content">
+                  <!-- SLOT "content": replace the children of this element with
+                       your own command + output lines. Keep one
+                       [data-terminal="command"] and any number of
+                       [data-terminal="output"] elements, in print order. -->
+                  <div data-terminal="command">
+                    run build <span class="ct-path">src/app</span>
+                    <span class="ct-flag">--minify</span> <span class="ct-flag">--out</span>
+                    <span class="ct-str">"dist/app"</span>
+                  </div>
+                  <div data-terminal="output">
+                    <span class="ct-muted">-</span> resolving 128 modules
+                  </div>
+                  <div data-terminal="output">
+                    <span class="ct-muted">-</span> bundling <span class="ct-path">src/app</span>
+                  </div>
+                  <div data-terminal="output">
+                    <span class="ct-ok">ok</span> 128 modules in 412 ms
+                  </div>
+                  <div data-terminal="output">
+                    <span class="ct-ok">ok</span> wrote <span class="ct-path">dist/app</span>
+                    <span class="ct-muted">(96 kB)</span>
+                  </div>
+                </div>
+                <div class="ctr-tail" aria-hidden="true"><span class="ctr-caret"></span></div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".ctr-stage");
+            var slot = root.querySelector('[data-slot="content"]');
+            var commandElement = slot ? slot.querySelector('[data-terminal="command"]') : null;
+            var outputElements = slot
+              ? Array.prototype.slice.call(slot.querySelectorAll('[data-terminal="output"]'))
+              : [];
+            var tailElement = root.querySelector(".ctr-tail");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var promptGlyph = vars.prompt_glyph == null ? "$" : String(vars.prompt_glyph);
+            var cadence = vars.cadence === "uniform" ? "uniform" : "human";
+            var exitMode = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            // The runtime mirrors every composition variable as a --<id>
+            // custom property (host inline style + a compiled rule), so the
+            // accent VARIABLE shadows the --accent contract TOKEN with its
+            // enum keyword whenever the caller passes variables. Theme packs
+            // re-declare --accent with !important on the same elements and
+            // stay clean; only the unthemed mirror leaks through. Detect
+            // exactly that leak (the computed token IS an enum keyword) and
+            // pin the token's exact contract fallback instead, keeping live
+            // var() resolution everywhere else.
+            var accentToken = "var(--accent, #61a8ff)";
+            var computedAccent = getComputedStyle(root).getPropertyValue("--accent").trim();
+            if (
+              computedAccent === "green" ||
+              computedAccent === "blue" ||
+              computedAccent === "violet"
+            ) {
+              accentToken = "#61a8ff";
+            }
+            root.style.setProperty("--ctr-accent-token", accentToken);
+
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: accentToken,
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            root.style.setProperty("--ctr-accent", accentColors[accent]);
+            // JSON.stringify yields a valid CSS quoted string for content:.
+            root.style.setProperty("--ctr-glyph", JSON.stringify(promptGlyph));
+            if (promptGlyph === "") root.style.setProperty("--ctr-glyph-gap", "0ch");
+
+            var cueList = String(vars.cues == null ? "" : vars.cues)
+              .split(",")
+              .map(function (token) {
+                return parseFloat(token);
+              })
+              .filter(function (value) {
+                return isFinite(value) && value >= 0;
+              })
+              .sort(function (a, b) {
+                return a - b;
+              });
+
+            var ENTER = 0.5;
+            var TYPE_START = 0.4;
+            var EXEC_BEAT = 0.22;
+            var LEAD_BEAT = 0.3;
+            var OUT_STEP = 0.3;
+            var TAIL_GAP = 0.35;
+            var PRINT = 0.12;
+            var OUT_BASE = 0.45;
+            var STILLNESS = 0.3;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "5"));
+            var OUT = exitMode === "none" ? 0 : Math.min(OUT_BASE, duration * 0.2);
+            var maxEnd = Math.max(TYPE_START + 0.3, duration - OUT - STILLNESS);
+
+            // Fixed-seed LCG: the only randomness source, consumed in one
+            // deterministic order during this synchronous build.
+            var lcgState = 0x51ec0ded;
+            function rnd() {
+              lcgState = (Math.imul(1664525, lcgState) + 1013904223) >>> 0;
+              return lcgState / 4294967296;
+            }
+            function chunksOf(word) {
+              if (cadence === "uniform") return Array.from(word);
+              var out = [];
+              var i = 0;
+              while (i < word.length) {
+                var n = 1 + Math.floor(rnd() * 3);
+                out.push(word.slice(i, i + n));
+                i += n;
+              }
+              return out;
+            }
+            function chunkGap(chunk) {
+              if (cadence === "uniform") return chunk.length * 0.05;
+              return chunk.length * (0.04 + rnd() * 0.03);
+            }
+
+            // Typing preserves the authored coloring spans: characters reveal
+            // across the command's text nodes in document order, so a given
+            // count always renders the same colored string in either seek
+            // direction. The caret is appended last, after node collection,
+            // so empty trailing nodes keep it hugging the visible end.
+            var textNodes = [];
+            if (commandElement) {
+              var walker = document.createTreeWalker(commandElement, NodeFilter.SHOW_TEXT, null);
+              while (walker.nextNode()) {
+                textNodes.push({ node: walker.currentNode, full: walker.currentNode.data });
+              }
+            }
+            var fullText = textNodes
+              .map(function (entry) {
+                return entry.full;
+              })
+              .join("");
+            function showChars(count) {
+              var remaining = count;
+              for (var i = 0; i < textNodes.length; i += 1) {
+                var entry = textNodes[i];
+                var take = Math.min(entry.full.length, Math.max(0, remaining));
+                entry.node.data = entry.full.slice(0, take);
+                remaining -= entry.full.length;
+              }
+            }
+            var caretElement = null;
+            if (commandElement) {
+              caretElement = document.createElement("span");
+              caretElement.className = "ctr-caret";
+              caretElement.setAttribute("aria-hidden", "true");
+              commandElement.appendChild(caretElement);
+            }
+            stage.setAttribute("aria-label", (promptGlyph + " " + fullText).trim());
+
+            // The complete chars-at-time table. Built exactly once; the
+            // timeline only ever reads it (the typed-prompt law).
+            var rows = [{ t: 0, n: 0 }];
+            (function buildRows() {
+              var t = TYPE_START;
+              var n = 0;
+              fullText.split(/(\s+)/).forEach(function (segment) {
+                if (segment === "") return;
+                if (/^\s+$/.test(segment)) {
+                  t += cadence === "uniform" ? 0.11 : 0.1 + rnd() * 0.1;
+                  n += segment.length;
+                  rows.push({ t: t, n: n });
+                  return;
+                }
+                chunksOf(segment).forEach(function (chunk) {
+                  t += chunkGap(chunk);
+                  n += chunk.length;
+                  rows.push({ t: t, n: n });
+                });
+              });
+            })();
+
+            // Natural schedule: type, execute beat, one output per step after
+            // a leading beat, then the trailing prompt.
+            var typeEnd = Math.max(rows[rows.length - 1].t, TYPE_START + 0.01);
+            var execAt = typeEnd + EXEC_BEAT;
+            var outAts = outputElements.map(function (element, index) {
+              return execAt + LEAD_BEAT + index * OUT_STEP;
+            });
+            var tailAt = (outAts.length > 0 ? outAts[outAts.length - 1] : execAt) + TAIL_GAP;
+
+            // Compress the whole schedule proportionally only if it would
+            // overflow the window before OUT; extra duration becomes HOLD,
+            // never timeScale.
+            var naturalEnd = tailAt + PRINT;
+            if (naturalEnd > maxEnd) {
+              var factor = (maxEnd - TYPE_START) / (naturalEnd - TYPE_START);
+              var squeeze = function (time) {
+                return time <= TYPE_START ? time : TYPE_START + (time - TYPE_START) * factor;
+              };
+              rows.forEach(function (row) {
+                row.t = squeeze(row.t);
+              });
+              typeEnd = Math.max(rows[rows.length - 1].t, TYPE_START + 0.01);
+              execAt = squeeze(execAt);
+              outAts = outAts.map(squeeze);
+              tailAt = squeeze(tailAt);
+            }
+
+            // Cue overrides: cue N pins output line N, clamped after execute
+            // and inside the window; un-cued lines follow the previous line.
+            if (cueList.length > 0) {
+              var previous = execAt + LEAD_BEAT - OUT_STEP;
+              outAts = outAts.map(function (defaultAt, index) {
+                var at = cueList[index] != null ? cueList[index] : previous + OUT_STEP;
+                at = Math.max(execAt + 0.05, Math.min(maxEnd - PRINT, at));
+                at = Math.max(at, previous + 0.05);
+                previous = at;
+                return at;
+              });
+              tailAt = (outAts.length > 0 ? outAts[outAts.length - 1] : execAt) + TAIL_GAP;
+            }
+            tailAt = Math.max(execAt + 0.1, Math.min(maxEnd - PRINT, tailAt));
+
+            // 1ms tolerance: GSAP snaps a tween's end value below the row
+            // table's accumulated float times, far under one frame.
+            function charsAt(time) {
+              for (var i = rows.length - 1; i >= 0; i -= 1) {
+                if (time >= rows[i].t - 0.001) return rows[i].n;
+              }
+              return 0;
+            }
+
+            // Fit the mono size to the widest line and the line count.
+            var lineElements = [commandElement].concat(outputElements, [tailElement]);
+            var maxLength = lineElements.reduce(function (best, element) {
+              if (!element) return best;
+              var length = (element === commandElement ? fullText : element.textContent).length;
+              return Math.max(best, length + promptGlyph.length + 3);
+            }, 12);
+            var fittedCqw = Math.max(2, Math.min(3.2, 108 / maxLength));
+            var cappedCqh = Math.max(3.2, Math.min(6.4, 46 / (lineElements.length * 1.6)));
+            root.style.setProperty(
+              "--ctr-font-size",
+              "min(" + fittedCqw.toFixed(3) + "cqw, " + cappedCqh.toFixed(3) + "cqh)",
+            );
+
+            gsap.set(stage, { opacity: 0, y: "2.6cqh" });
+            if (outputElements.length > 0) gsap.set(outputElements, { opacity: 0 });
+            if (tailElement) gsap.set(tailElement, { opacity: 0 });
+            showChars(0);
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: one panel settle, then the table drives every typed frame.
+            tl.to(stage, { opacity: 1, duration: ENTER, ease: "power2.out" }, 0);
+            tl.to(stage, { y: "0cqh", duration: ENTER, ease: "power3.out" }, 0);
+
+            var typeDriver = { t: 0 };
+            tl.to(
+              typeDriver,
+              {
+                t: typeEnd,
+                duration: typeEnd,
+                ease: "none",
+                onUpdate: function () {
+                  showChars(charsAt(typeDriver.t));
+                },
+              },
+              0,
+            );
+
+            // Caret: integer sine cycles across exactly the typing window,
+            // then a pin to solid, then hidden at execute (the command has
+            // been submitted; the trailing prompt owns the caret from there).
+            if (caretElement) {
+              var cycles = Math.max(1, Math.round(typeEnd / 0.9));
+              var blink = { p: 0 };
+              tl.to(
+                blink,
+                {
+                  p: Math.PI * 2 * cycles,
+                  duration: typeEnd,
+                  ease: "none",
+                  onUpdate: function () {
+                    // >= 0 keeps phase 0 identical to the caret's unrendered
+                    // initial state (opacity 1) for forward vs backward seeks.
+                    caretElement.style.opacity = Math.sin(blink.p) >= 0 ? "1" : "0";
+                  },
+                },
+                0,
+              );
+              tl.set(caretElement, { opacity: 1 }, typeEnd);
+              tl.set(caretElement, { opacity: 0 }, execAt);
+            }
+
+            // Output lines print on their cues: a print-fast fade, no motion.
+            outputElements.forEach(function (element, index) {
+              tl.fromTo(
+                element,
+                { opacity: 0 },
+                { opacity: 1, duration: PRINT, ease: "none" },
+                outAts[index],
+              );
+            });
+
+            // The run completes: a fresh prompt with a solid caret appears.
+            if (tailElement) {
+              tl.fromTo(
+                tailElement,
+                { opacity: 0 },
+                { opacity: 1, duration: PRINT, ease: "none" },
+                tailAt,
+              );
+            }
+
+            // HOLD: barely-there drift ending at exactly zero, then authored
+            // stillness before any departure.
+            var OUT_START = duration - OUT;
+            var settleEnd = tailAt + PRINT;
+            var holdSpan = OUT_START - settleEnd;
+            if (holdSpan > 0.9) {
+              var driftHalf = (holdSpan - STILLNESS) / 2;
+              tl.to(stage, { y: "-0.45cqh", duration: driftHalf, ease: "sine.inOut" }, settleEnd);
+              tl.to(
+                stage,
+                { y: "0cqh", duration: driftHalf, ease: "sine.inOut" },
+                settleEnd + driftHalf,
+              );
+            }
+
+            // OUT: only when the exit variable asks for one.
+            if (exitMode !== "none") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+              if (exitMode === "up") {
+                tl.to(stage, { y: "-4cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              }
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["code-terminal-run"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add code-terminal-run" />
+
+That writes one file: `compositions/components/code-terminal-run.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/code-terminal-run.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `product-demo` `terminal` `typing` `deterministic`.
+
+## 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/components/comparison-split.mdx b/docs/catalog/components/comparison-split.mdx
new file mode 100644
index 0000000000..337338c79c
--- /dev/null
+++ b/docs/catalog/components/comparison-split.mdx
@@ -0,0 +1,491 @@
+---
+title: "Comparison Split"
+description: "Two full-bleed panels compare before and after states as a persistent divider wipes the vivid after layer over the muted before layer and rests at a configurable split."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/comparison-split.html"
+  compositionId="comparison-split"
+  compositionSrc="compositions/components/comparison-split.html"
+  variables={[{"id":"split","type":"number","role":"layout","label":"Split position","description":"Target resting position of the comparison divider.","default":50,"min":0,"max":100,"step":1,"unit":"%"},{"id":"orientation","type":"enum","role":"layout","label":"Orientation","description":"Axis and direction used by the comparison wipe.","default":"horizontal","options":[{"value":"horizontal","label":"Horizontal"},{"value":"vertical","label":"Vertical"}]},{"id":"labelA","type":"string","role":"content","label":"Before label","description":"Caption shown on the base before panel.","default":"Before"},{"id":"labelB","type":"string","role":"content","label":"After label","description":"Caption shown on the revealed after panel.","default":"After"}]}
+>
+
+```html comparison-split.html
+<!doctype html>
+<!--
+  comparison-split: HyperFrames video primitive (ui-props / holdable / compare)
+
+  Concept: two full-bleed treatments share one frame. The muted before panel
+  stays fully visible as the base, while the vivid after panel wipes over it
+  from the leading edge. A persistent divider marks the shared clip boundary.
+  One mechanic, one job: compare two visual states.
+
+  Compiled-from evidence: fixture + blueprint (re-filed from prove), from the
+  video-primitives compare shelf.
+
+  Use when: a scene needs a direct before-and-after comparison, a redesign
+  reveal, or a visual treatment contrast that must remain readable during a
+  long hold.
+
+  Variables (declared in data-composition-variables below):
+    - split (number, default 50, range 0 to 100%): target resting position.
+    - orientation (horizontal | vertical, default horizontal): horizontal uses
+      a vertical divider traveling left to right, vertical uses a horizontal
+      divider traveling top to bottom.
+    - labelA (string, default "Before"): caption on the base panel.
+    - labelB (string, default "After"): caption on the revealed panel.
+
+  Envelope (fixed IN/OUT, elastic HOLD only, never gsap.timeScale()):
+    IN_BASE  = 1.40s  stage settles, then the divider wipes from 0% to split
+    HOLD     = elastic = max(0, D - (IN_BASE + OUT_BASE)); deliberately still
+               so the target comparison remains easy to inspect
+    OUT_BASE = 0.50s  release fade
+    If D < IN_BASE + OUT_BASE, IN and OUT scale down together so IN + OUT == D
+    and HOLD == 0.
+
+  Sync point: wipe-land is fixed at WIPE_END_BASE = 1.30s inside IN. It scales
+  proportionally only when the full envelope is shorter than 1.90s, and never
+  moves into elastic HOLD.
+
+  Sound cue: a soft wipe landing hook fires at wipe-land. This primitive never
+  plays audio. It dispatches a bubbling `hf:sfx` CustomEvent with id
+  "wipe-land-soft", so scene-level audio mixing owns playback.
+
+  Mount contract: this file is a MOUNTABLE SUB-COMPOSITION. A host loads it via
+  data-composition-src, and the runtime clones only <template> contents. All
+  live styles, markup, GSAP, and timeline registration therefore live inside
+  <template>. #root is styled by id, fills the host with inset:0, establishes
+  the cqw/cqh container, and has no data-width or data-height. The composition
+  id is the hardcoded literal "comparison-split" because mount flattening
+  strips data-composition-id from the live root. Variables come from
+  window.__hyperframes.getVariables(), which merges declared defaults with
+  per-instance host overrides.
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "split", "type": "number", "role": "layout", "label": "Split position", "description": "Target resting position of the comparison divider.", "default": 50, "min": 0, "max": 100, "step": 1, "unit": "%" },
+    { "id": "orientation", "type": "enum", "role": "layout", "label": "Orientation", "description": "Axis and direction used by the comparison wipe.", "default": "horizontal", "options": [{ "value": "horizontal", "label": "Horizontal" }, { "value": "vertical", "label": "Vertical" }] },
+    { "id": "labelA", "type": "string", "role": "content", "label": "Before label", "description": "Caption shown on the base before panel.", "default": "Before" },
+    { "id": "labelB", "type": "string", "role": "content", "label": "After label", "description": "Caption shown on the revealed after panel.", "default": "After" }
+  ]'
+>
+  <head>
+    <!-- The mount runtime reads variables from <html>, then discards everything
+         outside <template>, including this head. -->
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="comparison-split" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          /* Root fills the host-owned box. Every internal measurement uses
+             cqw/cqh, and every painted color comes from a theme token. */
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            background: var(--bg, #07111f);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+          }
+
+          .cs-clip,
+          .cs-stage,
+          .cs-panel {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+          }
+
+          .cs-clip {
+            overflow: hidden;
+          }
+
+          .cs-stage {
+            --cs-split: 0;
+            opacity: 0;
+          }
+
+          .cs-before {
+            background:
+              linear-gradient(
+                  color-mix(in srgb, var(--border, #334155) 38%, transparent) 0.12cqw,
+                  transparent 0.12cqw
+                )
+                0 0 / 5cqw 5cqw,
+              linear-gradient(
+                  90deg,
+                  color-mix(in srgb, var(--border, #334155) 38%, transparent) 0.12cqw,
+                  transparent 0.12cqw
+                )
+                0 0 / 5cqw 5cqw,
+              var(--surface, #172033);
+          }
+
+          .cs-after {
+            z-index: 2;
+            clip-path: inset(0 calc((100 - var(--cs-split)) * 1%) 0 0);
+            background: color-mix(in srgb, var(--fg, #f8fafc) 18%, var(--surface, #172033));
+          }
+
+          .cs-window {
+            position: absolute;
+            left: 14cqw;
+            top: 18cqh;
+            width: 72cqw;
+            height: 64cqh;
+            overflow: hidden;
+            border-radius: min(3cqw, 5cqh);
+            border: 0.16cqw solid var(--border, #334155);
+            background: color-mix(in srgb, var(--surface, #172033) 90%, var(--muted, #94a3b8));
+            box-shadow: 0 2.2cqh 6cqw color-mix(in srgb, var(--bg, #07111f) 50%, transparent);
+          }
+
+          .cs-after .cs-window {
+            border-color: color-mix(in srgb, var(--fg, #f8fafc) 45%, transparent);
+            background: color-mix(in srgb, var(--fg, #f8fafc) 8%, var(--surface, #172033));
+            box-shadow: 0 2.2cqh 7cqw rgba(0, 0, 0, 0.18);
+          }
+
+          .cs-toolbar {
+            display: flex;
+            align-items: center;
+            gap: var(--space-1, 1.2cqw);
+            height: 12cqh;
+            padding: 0 var(--space-2, 2.4cqw);
+            border-bottom: 0.14cqw solid var(--border, #334155);
+          }
+
+          .cs-dot {
+            width: min(2.2cqw, 3.2cqh);
+            aspect-ratio: 1;
+            border-radius: 50%;
+            background: var(--muted, #94a3b8);
+            opacity: 0.55;
+          }
+
+          .cs-after .cs-dot {
+            background: var(--accent, #f8fafc);
+            opacity: 1;
+          }
+
+          .cs-content {
+            position: relative;
+            height: 52cqh;
+          }
+
+          .cs-copy {
+            position: absolute;
+            left: 7cqw;
+            top: 9cqh;
+            width: 31cqw;
+          }
+
+          .cs-line {
+            height: 2.3cqh;
+            margin-bottom: var(--space-2, 2.4cqh);
+            border-radius: 2cqh;
+            background: var(--muted, #94a3b8);
+            opacity: 0.48;
+          }
+
+          .cs-line:nth-child(1) {
+            width: 94%;
+          }
+
+          .cs-line:nth-child(2) {
+            width: 72%;
+          }
+
+          .cs-line:nth-child(3) {
+            width: 48%;
+          }
+
+          .cs-after .cs-line {
+            background: color-mix(in srgb, var(--fg, #f8fafc) 72%, transparent);
+            opacity: 1;
+          }
+
+          .cs-visual {
+            position: absolute;
+            right: 7cqw;
+            top: 7cqh;
+            width: min(22cqw, 32cqh);
+            aspect-ratio: 1;
+            border-radius: 36% 64% 58% 42%;
+            border: 0.3cqw solid var(--border, #334155);
+            background: var(--muted, #94a3b8);
+            opacity: 0.5;
+          }
+
+          .cs-after .cs-visual {
+            border-color: color-mix(in srgb, var(--fg, #f8fafc) 45%, transparent);
+            background: color-mix(in srgb, var(--fg, #f8fafc) 72%, transparent);
+            box-shadow: 0 0 5cqw rgba(0, 0, 0, 0.18);
+            opacity: 1;
+          }
+
+          .cs-label {
+            position: absolute;
+            z-index: 4;
+            top: var(--space-3, 4cqh);
+            padding: var(--space-1, 1.2cqh) var(--space-2, 2.2cqw);
+            border: 0.14cqw solid var(--border, #334155);
+            border-radius: 999cqw;
+            background: var(--surface, #172033);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: min(3cqw, 4.2cqh);
+            font-weight: 700;
+            letter-spacing: 0.08em;
+            line-height: 1;
+            text-transform: uppercase;
+            white-space: nowrap;
+          }
+
+          .cs-before .cs-label {
+            right: var(--space-3, 4cqw);
+            color: var(--muted, #94a3b8);
+          }
+
+          .cs-after .cs-label {
+            left: var(--space-3, 4cqw);
+            border-color: color-mix(in srgb, var(--fg, #f8fafc) 45%, transparent);
+            background: color-mix(in srgb, var(--fg, #f8fafc) 8%, var(--surface, #172033));
+          }
+
+          .cs-divider {
+            position: absolute;
+            z-index: 5;
+            top: 0;
+            bottom: 0;
+            left: calc(var(--cs-split) * 1%);
+            width: 0.45cqw;
+            transform: translateX(-50%);
+            background: var(--fg, #f8fafc);
+            box-shadow:
+              0 0 1.4cqw color-mix(in srgb, var(--fg, #f8fafc) 45%, transparent),
+              0 0 3cqw rgba(0, 0, 0, 0.45);
+            pointer-events: none;
+          }
+
+          .cs-divider::after {
+            content: "";
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            width: min(5cqw, 7cqh);
+            aspect-ratio: 1;
+            transform: translate(-50%, -50%);
+            border: 0.3cqw solid var(--bg, #07111f);
+            border-radius: 50%;
+            background: var(--fg, #f8fafc);
+            box-shadow: 0 0 2.2cqw color-mix(in srgb, var(--fg, #f8fafc) 45%, transparent);
+          }
+
+          /* INVARIANT: vertical changes only the axis mapping. The after clip
+             and divider still read the same --cs-split value. */
+          #root[data-orientation="vertical"] .cs-after {
+            clip-path: inset(0 0 calc((100 - var(--cs-split)) * 1%) 0);
+          }
+
+          #root[data-orientation="vertical"] .cs-before .cs-label {
+            top: auto;
+            right: var(--space-3, 4cqw);
+            bottom: var(--space-3, 4cqh);
+          }
+
+          #root[data-orientation="vertical"] .cs-divider {
+            top: calc(var(--cs-split) * 1%);
+            right: 0;
+            bottom: auto;
+            left: 0;
+            width: 100%;
+            height: 0.45cqh;
+            transform: translateY(-50%);
+          }
+        </style>
+
+        <div
+          id="comparison-split-clip"
+          class="cs-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="cs-stage">
+            <section class="cs-panel cs-before" aria-label="Before panel">
+              <div class="cs-label"></div>
+              <div class="cs-window">
+                <div class="cs-toolbar">
+                  <span class="cs-dot"></span>
+                  <span class="cs-dot"></span>
+                  <span class="cs-dot"></span>
+                </div>
+                <div class="cs-content">
+                  <div class="cs-copy">
+                    <div class="cs-line"></div>
+                    <div class="cs-line"></div>
+                    <div class="cs-line"></div>
+                  </div>
+                  <div class="cs-visual"></div>
+                </div>
+              </div>
+            </section>
+
+            <section class="cs-panel cs-after" aria-label="After panel">
+              <div class="cs-label"></div>
+              <div class="cs-window">
+                <div class="cs-toolbar">
+                  <span class="cs-dot"></span>
+                  <span class="cs-dot"></span>
+                  <span class="cs-dot"></span>
+                </div>
+                <div class="cs-content">
+                  <div class="cs-copy">
+                    <div class="cs-line"></div>
+                    <div class="cs-line"></div>
+                    <div class="cs-line"></div>
+                  </div>
+                  <div class="cs-visual"></div>
+                </div>
+              </div>
+            </section>
+
+            <div class="cs-divider" aria-hidden="true"></div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            // Hardcoded because mount flattening strips data-composition-id
+            // from the live root before this timeline registers.
+            var compositionId = "comparison-split";
+            var stage = root.querySelector(".cs-stage");
+            var labelAEl = root.querySelector(".cs-before .cs-label");
+            var labelBEl = root.querySelector(".cs-after .cs-label");
+
+            // EDIT ZONE: declarations above and registry metadata change
+            // together. This API owns defaults plus per-instance overrides.
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var rawSplit = vars.split == null ? 50 : Number(vars.split);
+            // INVARIANT: split always clamps into the declared 0 to 100 range.
+            var splitPct = Number.isFinite(rawSplit) ? Math.max(0, Math.min(100, rawSplit)) : 50;
+            // INVARIANT: only horizontal or vertical reaches the renderer.
+            var orientation = vars.orientation === "vertical" ? "vertical" : "horizontal";
+            var labelAText = vars.labelA == null ? "" : String(vars.labelA);
+            var labelBText = vars.labelB == null ? "" : String(vars.labelB);
+
+            root.setAttribute("data-orientation", orientation);
+            labelAEl.textContent = labelAText;
+            labelBEl.textContent = labelBText;
+
+            // RETIME RANGE: fixed IN and OUT scale together only when D is too
+            // short. HOLD is the sole elastic phase. Never use timeScale().
+            var IN_BASE = 1.4;
+            var OUT_BASE = 0.5;
+            var STAGE_IN_BASE = 0.32;
+            var WIPE_AT_BASE = 0.25;
+            var WIPE_DURATION_BASE = 1.05;
+            var WIPE_END_BASE = WIPE_AT_BASE + WIPE_DURATION_BASE;
+
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var totalBase = IN_BASE + OUT_BASE;
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var STAGE_IN = STAGE_IN_BASE * scale;
+            var WIPE_AT = WIPE_AT_BASE * scale;
+            var WIPE_DURATION = WIPE_DURATION_BASE * scale;
+            var WIPE_END = WIPE_END_BASE * scale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var OUT_START = IN + HOLD;
+
+            function fireSfx(id, t) {
+              root.dispatchEvent(
+                new CustomEvent("hf:sfx", { detail: { id: id, t: t }, bubbles: true }),
+              );
+            }
+
+            // Explicit both-endpoints state makes tl.seek(0) deterministic.
+            // --cs-split is the only owner of both clip and divider progress.
+            gsap.set(stage, { opacity: 0, "--cs-split": 0 });
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: stage settle, then one shared wipe value travels to split.
+            tl.to(stage, { opacity: 1, duration: STAGE_IN, ease: "power2.out" }, 0);
+            tl.to(
+              stage,
+              { "--cs-split": splitPct, duration: WIPE_DURATION, ease: "sine.inOut" },
+              WIPE_AT,
+            );
+            tl.call(
+              function () {
+                fireSfx("wipe-land-soft", WIPE_END);
+              },
+              [],
+              WIPE_END,
+            );
+
+            // HOLD: deliberately steady at the target split.
+
+            // OUT: release fade.
+            tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.out" }, OUT_START);
+
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add comparison-split" />
+
+That writes one file: `compositions/components/comparison-split.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/comparison-split.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `prop` `ui-props` `compare` `holdable` `before-after` `wipe`.
+
+## 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/components/confetti.mdx b/docs/catalog/components/confetti.mdx
new file mode 100644
index 0000000000..ee54f25564
--- /dev/null
+++ b/docs/catalog/components/confetti.mdx
@@ -0,0 +1,164 @@
+---
+title: "Confetti"
+description: "A deterministic celebration burst with seeded particles and gravity."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/components/confetti.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Confetti preview" />
+
+## Install
+
+<InstallCommand command="npx hyperframes add confetti" />
+
+That writes one file: `compositions/components/confetti.html`.
+
+## Source
+
+<Accordion title={`confetti.html`}>
+
+```html
+<!--
+  Confetti - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-confetti">
+  <div class="mesh"></div>
+  <div class="card">
+    <div class="spot"></div>
+    <div>
+      <h3>Confetti</h3>
+      <p>A deterministic celebration burst with seeded particles and gravity.</p>
+    </div>
+  </div>
+  <span class="particle" style="--c: var(--accent, #f43f5e)"></span
+  ><span class="particle" style="--c: var(--accent, #f59e0b)"></span
+  ><span class="particle" style="--c: var(--accent, #22c55e)"></span
+  ><span class="particle" style="--c: var(--accent, #38bdf8)"></span
+  ><span class="particle" style="--c: var(--accent, #a855f7)"></span
+  ><span class="particle" style="--c: var(--accent, #f43f5e)"></span
+  ><span class="particle" style="--c: var(--accent, #f59e0b)"></span
+  ><span class="particle" style="--c: var(--accent, #22c55e)"></span
+  ><span class="particle" style="--c: var(--accent, #38bdf8)"></span
+  ><span class="particle" style="--c: var(--accent, #a855f7)"></span
+  ><span class="particle" style="--c: var(--accent, #f43f5e)"></span
+  ><span class="particle" style="--c: var(--accent, #f59e0b)"></span
+  ><span class="particle" style="--c: var(--accent, #22c55e)"></span
+  ><span class="particle" style="--c: var(--accent, #38bdf8)"></span
+  ><span class="particle" style="--c: var(--accent, #a855f7)"></span
+  ><span class="particle" style="--c: var(--accent, #f43f5e)"></span
+  ><span class="particle" style="--c: var(--accent, #f59e0b)"></span
+  ><span class="particle" style="--c: var(--accent, #22c55e)"></span
+  ><span class="particle" style="--c: var(--accent, #38bdf8)"></span
+  ><span class="particle" style="--c: var(--accent, #a855f7)"></span
+  ><span class="particle" style="--c: var(--accent, #f43f5e)"></span
+  ><span class="particle" style="--c: var(--accent, #f59e0b)"></span>
+</div>
+
+<style>
+  .hf-remocn-confetti {
+    color: var(--fg, #111827);
+    font-family: var(--font-body, Inter, system-ui, sans-serif);
+  }
+  .hf-remocn-confetti {
+    position: relative;
+    width: 760px;
+    height: 428px;
+    overflow: hidden;
+    border-radius: var(--radius, 30px);
+    background: var(--bg, #080b12);
+    box-shadow: 0 28px 80px color-mix(in srgb, var(--bg, #0f172a) 20%, transparent);
+  }
+  .hf-remocn-confetti .mesh {
+    position: absolute;
+    inset: -22%;
+    filter: blur(44px);
+    opacity: 0.88;
+    background:
+      radial-gradient(
+        circle at var(--hf-x1, 20%) var(--hf-y1, 30%),
+        var(--accent, #60a5fa) 0 18%,
+        transparent 32%
+      ),
+      radial-gradient(
+        circle at var(--hf-x2, 76%) var(--hf-y2, 52%),
+        var(--accent-2, #f472b6) 0 16%,
+        transparent 34%
+      ),
+      radial-gradient(
+        circle at var(--hf-x3, 46%) var(--hf-y3, 78%),
+        var(--brand, #34d399) 0 18%,
+        transparent 34%
+      );
+  }
+  .hf-remocn-confetti .card {
+    position: absolute;
+    inset: var(--space-3, 74px) var(--space-3, 92px);
+    border: 1px solid color-mix(in srgb, var(--border, #ffffff) 16%, transparent);
+    border-radius: var(--radius, 26px);
+    background: color-mix(in srgb, var(--surface, #ffffff) 8%, transparent);
+    color: var(--fg, #fff);
+    display: grid;
+    place-items: center;
+    text-align: center;
+    overflow: hidden;
+  }
+  .hf-remocn-confetti .spot {
+    position: absolute;
+    width: 260px;
+    height: 260px;
+    border-radius: 50%;
+    background: radial-gradient(
+      circle,
+      color-mix(in srgb, var(--fg, #ffffff) 50%, transparent),
+      transparent 65%
+    );
+    transform: translate(var(--hf-spot-x, 0px), var(--hf-spot-y, 0px));
+    mix-blend-mode: screen;
+  }
+  .hf-remocn-confetti .particle {
+    position: absolute;
+    left: 50%;
+    top: 54%;
+    width: 12px;
+    height: 20px;
+    border-radius: var(--radius, 3px);
+    background: var(--c);
+    transform: translate(var(--hf-px, 0px), var(--hf-py, 0px)) rotate(var(--hf-pr, 0deg));
+    opacity: var(--hf-po, 0);
+  }
+  .hf-remocn-confetti h3 {
+    margin: 0;
+    font-size: 44px;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-confetti p {
+    margin: var(--space-1, 8px) 0 0;
+    color: color-mix(in srgb, var(--muted, #ffffff) 70%, transparent);
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-confetti .mesh', { '--hf-x1': '18%', '--hf-y1': '28%', '--hf-x2': '78%', '--hf-y2': '46%', '--hf-x3': '44%', '--hf-y3': '80%' }, { '--hf-x1': '34%', '--hf-y1': '42%', '--hf-x2': '62%', '--hf-y2': '60%', '--hf-x3': '58%', '--hf-y3': '64%', duration: 4, ease: 'sine.inOut' }, startTime); tl.fromTo('.hf-remocn-confetti .spot', { '--hf-spot-x': '-120px', '--hf-spot-y': '-70px' }, { '--hf-spot-x': '190px', '--hf-spot-y': '90px', duration: 3, ease: 'sine.inOut' }, startTime); const particles_confetti = gsap.utils.toArray('.hf-remocn-confetti .particle'); if (particles_confetti.length) { tl.fromTo(particles_confetti, { '--hf-po': 0, '--hf-px': '0px', '--hf-py': '0px', '--hf-pr': '0deg' }, { '--hf-po': 1, '--hf-px': (i) => (Math.cos(i * 0.83) * 250) + 'px', '--hf-py': (i) => (-120 - Math.sin(i * 0.61) * 120) + 'px', '--hf-pr': (i) => (180 + i * 37) + 'deg', duration: 0.8, stagger: 0.015, ease: 'power2.out' }, startTime + 0.2); }
+-->
+```
+
+</Accordion>
+
+## Usage
+
+Open `compositions/components/confetti.html` and paste its contents into your composition. See the comment header in the file for timeline integration guidance.
+
+{/* hf:generated-footer */}
+
+Tagged `effect` `remocn-port`.
+
+## 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/components/conic-progress-ring.mdx b/docs/catalog/components/conic-progress-ring.mdx
new file mode 100644
index 0000000000..f207319502
--- /dev/null
+++ b/docs/catalog/components/conic-progress-ring.mdx
@@ -0,0 +1,277 @@
+---
+title: "Conic Progress Ring"
+description: "A token-driven conic progress ring whose angular fill and center count settle together from one registered percentage."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/conic-progress-ring.html"
+  compositionId="conic-progress-ring"
+  compositionSrc="compositions/components/conic-progress-ring.html"
+  variables={[{"id":"progress","type":"number","role":"content","label":"Progress","description":"Target angular fill from 0 to 100.","default":100,"min":0,"max":100,"step":1,"unit":"%"},{"id":"thickness","type":"number","role":"layout","label":"Thickness","description":"Ring stroke thickness as a percent of the ring radius.","default":12,"min":4,"max":30,"step":1,"unit":"%"},{"id":"label","type":"string","role":"content","label":"Center label","description":"Numeric target shown in the center and counted in sync with the fill.","default":"100"}]}
+>
+
+```html conic-progress-ring.html
+<!doctype html>
+<!--
+  conic-progress-ring: HyperFrames video primitive (data / prove / demonstrate)
+
+  Concept: one registered percentage moves the hard frontier of a conic
+  gradient while a radial mask cuts out the center. The center value is
+  derived from that same percentage on every GSAP update, so fill and count
+  cannot drift apart.
+
+  Compiled-from evidence: hyperframes-research-css-gems.md, section 10,
+  "Registered conic progress ring". The finding specifies a typed percentage
+  as the seek handle for a conic-gradient frontier and a radial mask for the
+  ring cutout.
+
+  Use when: a scene needs to prove completion, attainment, or a measured
+  result with one immediately legible data mark.
+
+  Variables:
+    progress  number  0 to 100  default 100  target angular fill
+    thickness number  4 to 30   default 12   ring stroke as a percent
+    label     string            default "100" center count target
+
+  Envelope:
+    IN   1.40s fixed fill and synchronized count, power2.out
+    HOLD elastic and deliberately still after the result settles
+    OUT  0.50s fixed opacity release, power2.in
+    For durations shorter than 1.90s, IN and OUT scale together. HOLD is the
+    only elastic phase. The timeline is never time-scaled.
+
+  Sync point:
+    progress-settled at the end of IN, always outside the elastic HOLD
+
+  Sound cues: none. A data proof should not claim an audio event for its host.
+
+  Mount contract: this file is a template-wrapped sub-composition. The host
+  owns dimensions. #root fills that box with inset:0 and has no data-width or
+  data-height. The hardcoded composition id matches the root and timeline key.
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "progress", "type": "number", "role": "content", "label": "Progress", "description": "Target angular fill from 0 to 100.", "default": 100, "min": 0, "max": 100, "step": 1, "unit": "%" },
+    { "id": "thickness", "type": "number", "role": "layout", "label": "Thickness", "description": "Ring stroke thickness as a percent of the ring radius.", "default": 12, "min": 4, "max": 30, "step": 1, "unit": "%" },
+    { "id": "label", "type": "string", "role": "content", "label": "Center label", "description": "Numeric target shown in the center and counted in sync with the fill.", "default": "100" }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Conic Progress Ring</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="conic-progress-ring" data-duration="4" data-fps="30">
+        <style>
+          /* The registration must live in this document-level stylesheet.
+             Registrations inside shadow roots are ignored by the platform. */
+          @property --ring-progress {
+            syntax: "<percentage>";
+            inherits: false;
+            initial-value: 0%;
+          }
+
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          /* INVARIANT: #root is the mount contract owner. The host owns the
+             box, and every internal measurement is relative to that box. */
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            color: var(--fg, #f4f7fb);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+          }
+
+          .ring-clip {
+            width: 100%;
+            height: 100%;
+            display: grid;
+            place-items: center;
+          }
+
+          .ring-stage {
+            position: relative;
+            width: min(68cqw, 68cqh);
+            aspect-ratio: 1;
+          }
+
+          /* EDIT ZONE: --ring-thickness is the only geometry control.
+             --ring-progress is the only registered animation scalar. Paint
+             comes only from the host theme's surface and brand tokens. */
+          .ring {
+            --ring-thickness: 12%;
+            --ring-progress: 0%;
+            position: absolute;
+            inset: 0;
+            border-radius: 50%;
+            background: conic-gradient(
+              from -90deg,
+              var(--brand, #35d6a0) 0 var(--ring-progress),
+              var(--surface, #1b2938) var(--ring-progress) 100%
+            );
+            -webkit-mask: radial-gradient(
+              farthest-side,
+              transparent calc(100% - var(--ring-thickness)),
+              var(--fg, #f4f7fb) 0
+            );
+            mask: radial-gradient(
+              farthest-side,
+              transparent calc(100% - var(--ring-thickness)),
+              var(--fg, #f4f7fb) 0
+            );
+          }
+
+          .ring-label {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            color: var(--fg, #f4f7fb);
+            font-size: min(18cqw, 18cqh);
+            font-weight: 700;
+            font-variant-numeric: tabular-nums;
+            letter-spacing: -0.04em;
+            line-height: 1;
+            text-align: center;
+          }
+        </style>
+
+        <div
+          id="conic-progress-ring-clip"
+          class="ring-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="ring-stage">
+            <div
+              class="ring"
+              role="progressbar"
+              aria-label="Progress"
+              aria-valuemin="0"
+              aria-valuemax="100"
+              aria-valuenow="0"
+            ></div>
+            <div class="ring-label" aria-hidden="true">0</div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var compositionId = "conic-progress-ring";
+            var stage = root.querySelector(".ring-stage");
+            var ring = root.querySelector(".ring");
+            var label = root.querySelector(".ring-label");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            /* INVARIANT: zero is a valid progress value, so missing and zero
+               are handled separately. Both numeric controls clamp to their
+               declared ranges before they reach layout or animation. */
+            var progressValue = Number(vars.progress);
+            var targetProgress = Number.isFinite(progressValue)
+              ? Math.max(0, Math.min(100, progressValue))
+              : 100;
+            var thicknessValue = Number(vars.thickness);
+            var thickness = Number.isFinite(thicknessValue)
+              ? Math.max(4, Math.min(30, thicknessValue))
+              : 12;
+            var labelText = vars.label == null ? "100" : String(vars.label);
+            var labelMatch = labelText.trim().match(/^(-?\d+(?:\.\d+)?)(.*)$/);
+            var labelTarget = labelMatch ? Number(labelMatch[1]) : null;
+            var labelSuffix = labelMatch ? labelMatch[2] : "";
+
+            ring.style.setProperty("--ring-thickness", thickness + "%");
+
+            function updateLabel(fillPercent) {
+              var ratio = targetProgress > 0 ? fillPercent / targetProgress : 1;
+              label.textContent =
+                labelTarget == null ? labelText : Math.round(labelTarget * ratio) + labelSuffix;
+              ring.setAttribute("aria-valuenow", String(Math.round(fillPercent)));
+            }
+
+            updateLabel(0);
+
+            /* RETIME RANGE: IN_BASE and OUT_BASE own the lifecycle timing.
+               The fill uses --ease-standard's GSAP form, power2.out. */
+            var IN_BASE = 1.4;
+            var OUT_BASE = 0.5;
+            var durationValue = Number(root.dataset.duration);
+            var duration = Number.isFinite(durationValue) && durationValue > 0 ? durationValue : 4;
+            var scale = duration < IN_BASE + OUT_BASE ? duration / (IN_BASE + OUT_BASE) : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var OUT_START = IN + HOLD;
+
+            var tl = gsap.timeline({ paused: true });
+
+            tl.fromTo(
+              ring,
+              { "--ring-progress": "0%" },
+              {
+                "--ring-progress": targetProgress + "%",
+                duration: IN,
+                ease: "power2.out",
+                onUpdate: function () {
+                  updateLabel(parseFloat(ring.style.getPropertyValue("--ring-progress")) || 0);
+                },
+              },
+              0,
+            );
+            tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add conic-progress-ring" />
+
+That writes one file: `compositions/components/conic-progress-ring.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/conic-progress-ring.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `data` `progress` `ring` `conic-gradient` `prove` `demonstrate`.
+
+## 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/components/constellation-hub.mdx b/docs/catalog/components/constellation-hub.mdx
new file mode 100644
index 0000000000..3312a3c33b
--- /dev/null
+++ b/docs/catalog/components/constellation-hub.mdx
@@ -0,0 +1,469 @@
+---
+title: "Constellation Hub"
+description: "Feature nodes brighten in narration order as real-length SVG connectors draw outward from a fixed central hub, then settle into one lockup."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/constellation-hub.html"
+  compositionId="constellation-hub"
+  compositionSrc="compositions/components/constellation-hub.html"
+  variables={[{"id":"hub_label","type":"string","role":"content","label":"Hub label","description":"Text displayed inside the fixed central hub.","default":"Product"},{"id":"nodes","type":"string","role":"content","label":"Feature nodes","description":"Comma-separated feature labels introduced in narration order.","default":"Capture,Compose,Render,Share"},{"id":"cues","type":"string","role":"timing","label":"Cues","description":"Comma-separated seconds (from mount start) for each node reveal. Empty keeps the authored even spread.","default":""},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Highlight color used by the hub, connectors, and active nodes.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Optional departure. Default none: the lockup holds until the frame cuts.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
+>
+
+```html constellation-hub.html
+<!doctype html>
+<!--
+  constellation-hub: HyperFrames video primitive (feature tour / exhibit)
+
+  Feature nodes form an orbit around one fixed hub. Each connector draws
+  from the hub to its node in narration order while that node brightens,
+  then every element settles into one readable lockup.
+
+  Variables:
+    - hub_label (string, default "Product"): text inside the fixed hub.
+    - nodes (string, default "Capture,Compose,Render,Share"): comma-separated
+      feature labels introduced from first to last.
+    - cues (string, default ""): comma-separated seconds (from mount start)
+      for each node reveal. Empty keeps the authored even spread.
+    - accent (green | blue | violet, default "green"): highlight token route.
+    - exit (none | fade | up, default "none"): optional departure.
+
+  Envelope, fixed IN and OUT with elastic HOLD only:
+    IN_BASE  = 2.40s, hub arrival plus ordered connector and node reveals
+               (cues can stretch the reveal phase past IN_BASE)
+    HOLD     = max(0, D - IN - OUT), subtle orbital drift around the fixed hub
+    OUT_BASE = 0.50s departure when exit is fade or up, 0s when exit is
+               none (the default: the lockup holds until the cut)
+    If D is shorter than IN_BASE + OUT_BASE, IN and OUT compress together.
+    The timeline is never time-scaled.
+
+  Draw contract: each connector reads its real SVG getTotalLength() during
+  synchronous construction. That value owns both dash array and initial dash
+  offset, and GSAP draws the connector by tweening the offset to zero.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, uses cqw and cqh for elastic sizing, carries no data-width or
+  data-height, and registers one paused timeline under the literal
+  constellation-hub key.
+-->
+<html
+  lang="en"
+  data-composition-id="constellation-hub"
+  data-composition-duration="4.5"
+  data-composition-variables='[
+    { "id": "hub_label", "type": "string", "role": "content", "label": "Hub label", "description": "Text displayed inside the fixed central hub.", "default": "Product" },
+    { "id": "nodes", "type": "string", "role": "content", "label": "Feature nodes", "description": "Comma-separated feature labels introduced in narration order.", "default": "Capture,Compose,Render,Share" },
+    { "id": "cues", "type": "string", "role": "timing", "label": "Cues", "description": "Comma-separated seconds (from mount start) for each node reveal. Empty keeps the authored even spread.", "default": "" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Highlight color used by the hub, connectors, and active nodes.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the lockup holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Constellation Hub</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="constellation-hub" data-duration="4.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .ch-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .ch-lockup {
+            position: relative;
+            width: 100cqw;
+            height: 100cqh;
+            opacity: 0;
+          }
+
+          .ch-orbit {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 100cqw;
+            height: 100cqh;
+            transform-origin: 50cqw 50cqh;
+            will-change: transform;
+          }
+
+          .ch-connectors {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 100cqw;
+            height: 100cqh;
+            overflow: visible;
+          }
+
+          .ch-connector {
+            fill: none;
+            stroke: var(--ch-accent);
+            stroke-width: 0.72;
+            stroke-linecap: round;
+            opacity: 0.72;
+          }
+
+          .ch-node-position {
+            position: absolute;
+            width: var(--ch-node-width, 21cqw);
+            transform: translate(-50%, -50%);
+          }
+
+          .ch-node {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            min-height: 10cqh;
+            padding: var(--space-1, 1.2cqh) var(--space-2, 2.4cqw);
+            overflow: hidden;
+            border: 0.14cqw solid color-mix(in srgb, var(--ch-accent) 54%, var(--border, #334155));
+            border-radius: var(--radius, 2.4cqw);
+            background: color-mix(in srgb, var(--surface, #151a24) 90%, var(--ch-accent));
+            box-shadow: 0 1.8cqh 4.8cqh color-mix(in srgb, var(--bg, #05070d) 38%, transparent);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            font-size: var(--ch-node-font-size, 2.25cqw);
+            font-weight: 680;
+            line-height: 1.1;
+            letter-spacing: -0.01em;
+            text-align: center;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            will-change: transform, opacity;
+          }
+
+          .ch-hub {
+            position: absolute;
+            left: 50cqw;
+            top: 50cqh;
+            z-index: 2;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 21cqw;
+            min-height: 18cqh;
+            padding: var(--space-2, 2.4cqh) var(--space-2, 2.4cqw);
+            overflow: hidden;
+            border: 0.22cqw solid var(--ch-accent);
+            border-radius: var(--radius, 2.4cqw);
+            background: color-mix(in srgb, var(--surface, #151a24) 78%, var(--ch-accent));
+            box-shadow:
+              0 0 7cqh color-mix(in srgb, var(--ch-accent) 24%, transparent),
+              0 2.4cqh 6cqh color-mix(in srgb, var(--bg, #05070d) 46%, transparent);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: 3.05cqw;
+            font-weight: 760;
+            line-height: 1;
+            letter-spacing: -0.03em;
+            text-align: center;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            transform: translate(-50%, -50%);
+            will-change: transform, opacity;
+          }
+        </style>
+
+        <div
+          id="constellation-hub-clip"
+          class="ch-clip clip"
+          data-start="0"
+          data-duration="4.5"
+          data-track-index="0"
+        >
+          <div class="ch-lockup" role="img">
+            <div class="ch-orbit">
+              <svg
+                class="ch-connectors"
+                viewBox="0 0 100 100"
+                preserveAspectRatio="none"
+                aria-hidden="true"
+              ></svg>
+              <div class="ch-nodes"></div>
+            </div>
+            <div class="ch-hub"></div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var lockup = root.querySelector(".ch-lockup");
+            var orbit = root.querySelector(".ch-orbit");
+            var connectorsLayer = root.querySelector(".ch-connectors");
+            var nodesLayer = root.querySelector(".ch-nodes");
+            var hub = root.querySelector(".ch-hub");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var hubLabel = vars.hub_label == null ? "Product" : String(vars.hub_label).trim();
+            var nodeSource =
+              vars.nodes == null ? "Capture,Compose,Render,Share" : String(vars.nodes);
+            var nodeLabels = nodeSource
+              .split(",")
+              .map(function (label) {
+                return label.trim();
+              })
+              .filter(function (label) {
+                return label.length > 0;
+              });
+
+            if (nodeLabels.length === 0) nodeLabels = ["Feature"];
+
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+            var cuesValue = vars.cues == null ? "" : String(vars.cues);
+            var cues = cuesValue.split(",").reduce(function (result, token) {
+              var trimmed = token.trim();
+              if (trimmed === "") return result;
+              var seconds = Number(trimmed);
+              if (!Number.isFinite(seconds) || seconds < 0) return result;
+              result.push(seconds);
+              return result;
+            }, []);
+
+            var nodeWidth = Math.max(12, Math.min(21, 78 / Math.max(4, nodeLabels.length) + 2));
+            var nodeFontSize = nodeLabels.length > 6 ? 1.75 : 2.25;
+
+            root.style.setProperty("--ch-accent", accentColors[accent]);
+            root.style.setProperty("--ch-node-width", nodeWidth.toFixed(2) + "cqw");
+            root.style.setProperty("--ch-node-font-size", nodeFontSize.toFixed(2) + "cqw");
+            hub.textContent = hubLabel;
+            lockup.setAttribute(
+              "aria-label",
+              "Hub " + hubLabel + " connected to " + nodeLabels.join(", "),
+            );
+
+            var svgNamespace = "http://www.w3.org/2000/svg";
+            var connectors = [];
+            var nodes = [];
+            var connectorFragment = document.createDocumentFragment();
+            var nodeFragment = document.createDocumentFragment();
+
+            nodeLabels.forEach(function (label, index) {
+              var angle = -Math.PI / 2 + (index / nodeLabels.length) * Math.PI * 2;
+              var x = 50 + Math.cos(angle) * 38;
+              var y = 50 + Math.sin(angle) * 39;
+              var connector = document.createElementNS(svgNamespace, "path");
+              connector.setAttribute("class", "ch-connector");
+              connector.setAttribute("d", "M 50 50 L " + x.toFixed(3) + " " + y.toFixed(3));
+              connectorFragment.appendChild(connector);
+              connectors.push(connector);
+
+              var position = document.createElement("div");
+              position.className = "ch-node-position";
+              position.style.left = x.toFixed(3) + "cqw";
+              position.style.top = y.toFixed(3) + "cqh";
+
+              var node = document.createElement("div");
+              node.className = "ch-node";
+              node.textContent = label;
+              position.appendChild(node);
+              nodeFragment.appendChild(position);
+              nodes.push(node);
+            });
+
+            connectorsLayer.appendChild(connectorFragment);
+            nodesLayer.appendChild(nodeFragment);
+
+            connectors.forEach(function (connector) {
+              var length = connector.getTotalLength();
+              connector.style.strokeDasharray = length + " " + length;
+              connector.style.strokeDashoffset = String(length);
+            });
+
+            var IN_BASE = 2.4;
+            var OUT_BASE = exit === "none" ? 0 : 0.5;
+            var HUB_IN_BASE = 0.46;
+            var SEQUENCE_START_BASE = 0.34;
+            var DRAW_BASE = 0.5;
+            var NODE_UP_BASE = 0.3;
+            var NODE_DOWN_BASE = 0.2;
+            var SETTLE_BASE = 0.28;
+            var STILLNESS = 0.24;
+            var durationValue = Number(root.dataset.duration);
+            var duration =
+              Number.isFinite(durationValue) && durationValue > 0 ? durationValue : 4.5;
+            var phaseBase = Math.max(0.001, IN_BASE + OUT_BASE);
+            var phaseScale = duration < phaseBase ? duration / phaseBase : 1;
+            var IN = IN_BASE * phaseScale;
+            var OUT = OUT_BASE * phaseScale;
+            var HUB_IN = HUB_IN_BASE * phaseScale;
+            var SEQUENCE_START = SEQUENCE_START_BASE * phaseScale;
+            var DRAW = DRAW_BASE * phaseScale;
+            var NODE_UP = NODE_UP_BASE * phaseScale;
+            var NODE_DOWN = NODE_DOWN_BASE * phaseScale;
+            var SETTLE = SETTLE_BASE * phaseScale;
+
+            // Reveal schedule: cues own each connector-and-node start when
+            // provided; the authored even spread otherwise. Reveals beyond
+            // the cue list extrapolate at the cue list's own gap, and every
+            // reveal clamps so the settle finishes before any exit.
+            var starts;
+            var SETTLE_START;
+            if (cues.length > 0) {
+              var lastCue = cues[cues.length - 1];
+              var cueGap =
+                cues.length >= 2 ? Math.max(0.05, (lastCue - cues[0]) / (cues.length - 1)) : DRAW;
+              var latestStart = Math.max(0, duration - OUT - (NODE_UP + NODE_DOWN + SETTLE));
+              starts = nodeLabels.map(function (label, index) {
+                var at =
+                  index < cues.length
+                    ? cues[index]
+                    : lastCue + (index - (cues.length - 1)) * cueGap;
+                return Math.min(latestStart, Math.max(0, at));
+              });
+              SETTLE_START = Math.max.apply(null, starts) + NODE_UP + NODE_DOWN;
+            } else {
+              SETTLE_START = Math.max(SEQUENCE_START, IN - SETTLE);
+              var LAST_DRAW_START = Math.max(SEQUENCE_START, SETTLE_START - DRAW);
+              var STEP =
+                nodeLabels.length > 1
+                  ? (LAST_DRAW_START - SEQUENCE_START) / (nodeLabels.length - 1)
+                  : 0;
+              starts = nodeLabels.map(function (label, index) {
+                return SEQUENCE_START + index * STEP;
+              });
+            }
+            var IN_END = Math.min(Math.max(0, duration - OUT), Math.max(IN, SETTLE_START + SETTLE));
+            var HOLD = Math.max(0, duration - IN_END - OUT);
+            var HOLD_START = IN_END;
+            var OUT_START = IN_END + HOLD;
+
+            gsap.set(lockup, { opacity: 0, scale: 0.985 });
+            gsap.set(hub, { opacity: 0, scale: 0.86 });
+            gsap.set(orbit, { rotation: -4 });
+            gsap.set(nodes, { opacity: 0.24, scale: 0.92 });
+
+            var tl = gsap.timeline({ paused: true });
+
+            tl.to(lockup, { opacity: 1, scale: 1, duration: HUB_IN, ease: "power2.out" }, 0);
+            tl.to(hub, { opacity: 1, scale: 1, duration: HUB_IN, ease: "back.out(1.7)" }, 0);
+            tl.to(orbit, { rotation: 0, duration: IN, ease: "power3.out" }, 0);
+
+            connectors.forEach(function (connector, index) {
+              var start = starts[index];
+              var node = nodes[index];
+
+              tl.to(connector, { strokeDashoffset: 0, duration: DRAW, ease: "power2.out" }, start);
+              tl.to(
+                node,
+                { opacity: 1, scale: 1.055, duration: NODE_UP, ease: "power3.out" },
+                start,
+              );
+              tl.to(
+                node,
+                { opacity: 0.82, scale: 1, duration: NODE_DOWN, ease: "power2.out" },
+                start + NODE_UP,
+              );
+            });
+
+            tl.to(
+              nodes,
+              { opacity: 0.88, scale: 1, duration: SETTLE, ease: "power2.out" },
+              SETTLE_START,
+            );
+            tl.to(
+              connectors,
+              { opacity: 0.62, duration: SETTLE, ease: "power2.out" },
+              SETTLE_START,
+            );
+
+            var driftHalf = Math.max(0, HOLD - STILLNESS) / 2;
+            if (driftHalf > 0) {
+              tl.to(
+                orbit,
+                { rotation: 1.1, duration: driftHalf, ease: "sine.inOut", yoyo: true, repeat: 1 },
+                HOLD_START,
+              );
+            }
+
+            // OUT: optional departure; exit none holds until the frame cuts.
+            if (exit === "fade") {
+              tl.to(
+                lockup,
+                { opacity: 0, scale: 0.97, duration: OUT, ease: "power2.in" },
+                OUT_START,
+              );
+            } else if (exit === "up") {
+              tl.to(
+                lockup,
+                { opacity: 0, y: "-3cqh", duration: OUT, ease: "power2.in" },
+                OUT_START,
+              );
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["constellation-hub"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add constellation-hub" />
+
+That writes one file: `compositions/components/constellation-hub.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/constellation-hub.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `feature-tour` `hub` `nodes` `connector` `reveal`.
+
+## 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/components/count-up.mdx b/docs/catalog/components/count-up.mdx
new file mode 100644
index 0000000000..6a22f8b944
--- /dev/null
+++ b/docs/catalog/components/count-up.mdx
@@ -0,0 +1,339 @@
+---
+title: "Count Up"
+description: "A token-native stat counter that eases between values and lands with a restrained scale pulse."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/count-up.html"
+  compositionId="count-up"
+  compositionSrc="compositions/components/count-up.html"
+  variables={[{"id":"start","type":"number","role":"content","label":"Start value","description":"First value shown by the count.","default":0,"step":1},{"id":"end","type":"number","role":"content","label":"End value","description":"Final value where the count lands.","default":100,"step":1},{"id":"prefix","type":"string","role":"content","label":"Prefix","description":"Optional text shown before the value.","default":""},{"id":"suffix","type":"string","role":"content","label":"Suffix","description":"Optional text shown after the value.","default":"%"},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Color used by the count.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"glow","type":"boolean","role":"style","label":"Glow","description":"Optional soft accent glow under the count. Off by default.","default":false},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Optional departure. Default none: the landed value holds until the frame cuts.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
+>
+
+```html count-up.html
+<!doctype html>
+<!--
+  count-up: HyperFrames video primitive (proof and stats / prove)
+
+  A value accelerates from start to end, decelerates into the exact final
+  integer, and lands with one restrained scale pulse. Prefix and suffix stay
+  fixed while tabular numerals prevent the line from shifting as digits change.
+
+  Variables:
+    - start (number, default 0): first value shown.
+    - end (number, default 100): final value shown.
+    - prefix (string, default ""): optional text before the value.
+    - suffix (string, default "%"): optional text after the value.
+    - accent (green | blue | violet, default "green"): count color.
+    - glow (boolean, default false): optional accent glow under the count.
+    - exit (none | fade | up, default "none"): optional departure.
+
+  Envelope, fixed IN and OUT with elastic HOLD only:
+    IN_BASE  = 2.05s, stage arrival, eased count, and landing pulse
+    HOLD     = max(0, D - IN - OUT), subtle drift then 0.25s stillness
+    OUT_BASE = 0.45s departure when exit is fade or up, 0s when exit is
+               none (the default: the landed value holds until the cut)
+    If D is shorter than IN_BASE + OUT_BASE, IN and OUT compress together.
+    The timeline is never time-scaled.
+
+  Determinism: each displayed integer is computed synchronously for a fixed
+  timeline position. The paused timeline sets the authored frame rows directly,
+  so reverse or repeated seeks show the same value without update callbacks.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, has no data-width or data-height,
+  and registers one paused timeline under the literal count-up key.
+-->
+<html
+  lang="en"
+  data-composition-id="count-up"
+  data-composition-duration="3"
+  data-composition-variables='[
+    { "id": "start", "type": "number", "role": "content", "label": "Start value", "description": "First value shown by the count.", "default": 0, "step": 1 },
+    { "id": "end", "type": "number", "role": "content", "label": "End value", "description": "Final value where the count lands.", "default": 100, "step": 1 },
+    { "id": "prefix", "type": "string", "role": "content", "label": "Prefix", "description": "Optional text shown before the value.", "default": "" },
+    { "id": "suffix", "type": "string", "role": "content", "label": "Suffix", "description": "Optional text shown after the value.", "default": "%" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Color used by the count.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "glow", "type": "boolean", "role": "style", "label": "Glow", "description": "Optional soft accent glow under the count. Off by default.", "default": false },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the landed value holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Count Up</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="count-up" data-duration="3" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .cu-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .cu-stage {
+            display: flex;
+            width: 92cqw;
+            align-items: baseline;
+            justify-content: center;
+            overflow: hidden;
+            color: var(--cu-accent);
+            font-size: var(--cu-font-size);
+            font-variant-numeric: tabular-nums;
+            font-feature-settings: "tnum" 1;
+            font-weight: 600;
+            line-height: 1;
+            letter-spacing: -0.045em;
+            text-align: center;
+            transform-origin: 50% 58%;
+            white-space: nowrap;
+            will-change: transform, opacity;
+          }
+
+          /* Glow is opt-in via the glow variable; the register ships flat. */
+          .cu-stage.cu-glow {
+            text-shadow: 0 2.4cqh 7cqh color-mix(in srgb, var(--cu-accent) 24%, transparent);
+          }
+
+          .cu-affix {
+            position: relative;
+            flex: 0 0 auto;
+            color: color-mix(in srgb, var(--cu-accent) 72%, var(--fg, #f8fafc));
+            font-size: 0.55em;
+            font-weight: 600;
+            letter-spacing: -0.02em;
+          }
+
+          /* Affix gaps are font-relative (em of the affix), never layout
+             spacing tokens, so the lockup scales with the figure. */
+          .cu-prefix {
+            margin-right: 0.14em;
+          }
+
+          .cu-suffix {
+            margin-left: 0.14em;
+          }
+
+          .cu-affix:empty {
+            display: none;
+          }
+
+          .cu-value {
+            display: inline-block;
+            min-width: 1ch;
+          }
+        </style>
+
+        <div
+          id="count-up-clip"
+          class="cu-clip clip"
+          data-start="0"
+          data-duration="3"
+          data-track-index="0"
+        >
+          <div class="cu-stage" role="img">
+            <span class="cu-affix cu-prefix" aria-hidden="true"></span>
+            <span class="cu-value" aria-hidden="true"></span>
+            <span class="cu-affix cu-suffix" aria-hidden="true"></span>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".cu-stage");
+            var valueElement = root.querySelector(".cu-value");
+            var prefixElement = root.querySelector(".cu-prefix");
+            var suffixElement = root.querySelector(".cu-suffix");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var startCandidate = vars.start;
+            var endCandidate = vars.end;
+            var start = Number.isFinite(startCandidate) ? startCandidate : 0;
+            var end = Number.isFinite(endCandidate) ? endCandidate : 100;
+            var prefix = vars.prefix == null ? "" : String(vars.prefix);
+            var suffix = vars.suffix == null ? "%" : String(vars.suffix);
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var glow = vars.glow === true || vars.glow === "true";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            function formatValue(value) {
+              return Math.round(value).toLocaleString("en-US");
+            }
+
+            prefixElement.textContent = prefix;
+            suffixElement.textContent = suffix;
+
+            // Optical trim: flex baseline alignment is metric, not optical.
+            // At 0.55em a lone currency glyph hugs the baseline and a lone
+            // math-axis glyph (+, ~) sits below the figures' visual middle,
+            // so the two affixes land at different heights. Lift both onto
+            // the figures' optical center; full-height strings (%, letters,
+            // digits) stay on the shared baseline.
+            function affixLift(text) {
+              if (/^[$€£¥₹₩]$/.test(text)) return "-0.31em";
+              if (/^[+−±×=~<>-]+$/.test(text)) return "-0.36em";
+              return "";
+            }
+            prefixElement.style.top = affixLift(prefix);
+            suffixElement.style.top = affixLift(suffix);
+            root.style.setProperty("--cu-accent", accentColors[accent]);
+            stage.classList.toggle("cu-glow", glow);
+
+            var startText = prefix + formatValue(start) + suffix;
+            var endText = prefix + formatValue(end) + suffix;
+            var characterCount = Math.max(
+              Array.from(startText).length,
+              Array.from(endText).length,
+              1,
+            );
+            var fittedCqw = Math.min(20, 150 / characterCount);
+            root.style.setProperty("--cu-font-size", "min(" + fittedCqw.toFixed(3) + "cqw, 34cqh)");
+            stage.setAttribute("aria-label", endText);
+
+            var IN_BASE = 2.05;
+            var OUT_BASE = exit === "none" ? 0 : 0.45;
+            var COUNT_BASE = 1.72;
+            var PULSE_HALF_BASE = 0.165;
+            var ARRIVAL_BASE = 0.38;
+            var STILLNESS = 0.25;
+            var FPS = 30;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "3"));
+            var totalBase = Math.max(0.001, IN_BASE + OUT_BASE);
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var COUNT = COUNT_BASE * scale;
+            var PULSE_HALF = PULSE_HALF_BASE * scale;
+            var ARRIVAL = ARRIVAL_BASE * scale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var HOLD_START = IN;
+            var OUT_START = IN + HOLD;
+            var lastFrame = Math.max(1, Math.round(COUNT * FPS));
+            var countEase = gsap.parseEase("sine.inOut");
+            var frameRows = [];
+
+            for (var frame = 0; frame <= lastFrame; frame += 1) {
+              var progress = frame / lastFrame;
+              var easedProgress = countEase(progress);
+              frameRows.push(formatValue(start + (end - start) * easedProgress));
+            }
+
+            gsap.set(stage, { opacity: 0, y: "2.2cqh", scale: 0.98 });
+            valueElement.textContent = frameRows[0];
+
+            var tl = gsap.timeline({ paused: true });
+
+            tl.to(stage, { opacity: 1, duration: ARRIVAL, ease: "power2.out" }, 0);
+            tl.to(stage, { y: "0cqh", scale: 1, duration: ARRIVAL, ease: "power3.out" }, 0);
+
+            frameRows.forEach(function (row, frameIndex) {
+              tl.set(valueElement, { textContent: row }, COUNT * (frameIndex / lastFrame));
+            });
+
+            tl.to(stage, { scale: 1.07, duration: PULSE_HALF, ease: "power3.out" }, COUNT);
+            tl.to(
+              stage,
+              { scale: 1, duration: PULSE_HALF, ease: "power2.out" },
+              COUNT + PULSE_HALF,
+            );
+
+            var driftDuration = Math.max(0, HOLD - STILLNESS);
+            if (driftDuration > 0) {
+              tl.to(
+                stage,
+                {
+                  y: "-0.55cqh",
+                  duration: driftDuration / 2,
+                  ease: "sine.inOut",
+                  yoyo: true,
+                  repeat: 1,
+                },
+                HOLD_START,
+              );
+            }
+
+            // OUT: optional departure; exit none holds until the frame cuts.
+            if (exit === "up") {
+              tl.to(stage, { y: "-2.2cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              tl.to(
+                stage,
+                { opacity: 0, scale: 0.985, duration: OUT, ease: "power2.in" },
+                OUT_START,
+              );
+            } else if (exit === "fade") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["count-up"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add count-up" />
+
+That writes one file: `compositions/components/count-up.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/count-up.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `proof` `stats` `counter` `number` `deterministic`.
+
+## 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/components/cta-close.mdx b/docs/catalog/components/cta-close.mdx
new file mode 100644
index 0000000000..fcbd2dd910
--- /dev/null
+++ b/docs/catalog/components/cta-close.mdx
@@ -0,0 +1,306 @@
+---
+title: "CTA Close"
+description: "A display-scale action line lands per word and fills the frame with air, one generous CTA capsule pops beneath it with a single overshoot, and the finished close holds completely still."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/cta-close.html"
+  compositionId="cta-close"
+  compositionSrc="compositions/components/cta-close.html"
+  variables={[{"id":"action_line","type":"string","role":"content","label":"Action line","description":"Two to four word action that closes the film.","default":"Make it happen"},{"id":"button_label","type":"string","role":"content","label":"Button label","description":"Text displayed inside the single CTA capsule.","default":"Start now"},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Contract color used by the CTA capsule.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Optional departure. Default none: the lockup holds until the frame cuts (this primitive closes films).","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
+>
+
+```html cta-close.html
+<!doctype html>
+<!--
+  cta-close: HyperFrames video primitive (call to action / close)
+
+  The action-only close. A display-scale action line lands per word, sized by
+  a character-aware fit so it fills 70 to 85 percent of the frame width with
+  real air above and below. One generous button capsule pops beneath it with
+  a single restrained overshoot, then the finished lockup holds dead still
+  until the frame cuts. Monotone: ink on ground, accent only on the capsule.
+
+  Variables:
+    action_line: two to four word closing action
+    button_label: capsule label
+    accent: green, blue, or violet capsule color
+    exit: none, fade, or up (default none; this primitive closes films)
+
+  Envelope:
+    IN_BASE = 1.32s, per-word landing followed by the capsule pop
+    HOLD = the rest of D, completely still
+    OUT = none by default; 0.45s lockup departure when exit is fade or up
+    If D is shorter than the fixed phases, they compress to fit. The timeline
+    is never time-scaled.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, has no data-width or data-height,
+  and registers one paused timeline under the literal cta-close key.
+-->
+<html
+  lang="en"
+  data-composition-id="cta-close"
+  data-composition-duration="3.5"
+  data-composition-variables='[
+    { "id": "action_line", "type": "string", "role": "content", "label": "Action line", "description": "Two to four word action that closes the film.", "default": "Make it happen" },
+    { "id": "button_label", "type": "string", "role": "content", "label": "Button label", "description": "Text displayed inside the single CTA capsule.", "default": "Start now" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Contract color used by the CTA capsule.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the lockup holds until the frame cuts (this primitive closes films).", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>CTA Close</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="cta-close" data-duration="3.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .cc-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+            background: var(--bg, #0b0c0e);
+          }
+
+          .cc-lockup {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 7cqh;
+            max-width: 96cqw;
+            text-align: center;
+          }
+
+          .cc-action {
+            margin: 0;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: var(--cc-action-size, min(10.4cqw, 30cqh));
+            font-weight: 600;
+            line-height: 1.02;
+            letter-spacing: -0.035em;
+            white-space: nowrap;
+          }
+
+          .cc-w {
+            display: inline-block;
+            will-change: transform, opacity;
+          }
+
+          .cc-button {
+            margin: 0;
+            padding: 2.9cqh 5cqw;
+            overflow: hidden;
+            border: 0;
+            border-radius: 999px;
+            background: var(--cc-accent);
+            color: var(--bg, #0b0c0e);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            font-size: var(--cc-button-size, min(3.4cqw, 6cqh));
+            font-weight: 600;
+            line-height: 1;
+            letter-spacing: -0.01em;
+            white-space: nowrap;
+            transform-origin: 50% 50%;
+            will-change: transform, opacity;
+          }
+        </style>
+
+        <div
+          id="cta-close-clip"
+          class="cc-clip clip"
+          data-start="0"
+          data-duration="3.5"
+          data-track-index="0"
+        >
+          <div class="cc-lockup">
+            <h2 class="cc-action"></h2>
+            <button class="cc-button" type="button" tabindex="-1"></button>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var lockup = root.querySelector(".cc-lockup");
+            var actionLine = root.querySelector(".cc-action");
+            var button = root.querySelector(".cc-button");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var actionText =
+              vars.action_line == null
+                ? "Make it happen"
+                : String(vars.action_line).trim().replace(/\s+/g, " ");
+            var buttonText =
+              vars.button_label == null
+                ? "Start now"
+                : String(vars.button_label).trim().replace(/\s+/g, " ");
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            // The line lands per word: one span per word, natural spaces kept
+            // between them so the display tracking never crushes word gaps.
+            actionLine.setAttribute("aria-label", actionText);
+            var words = actionText ? actionText.split(" ") : [];
+            words.forEach(function (word, index) {
+              if (index > 0) actionLine.appendChild(document.createTextNode(" "));
+              var span = document.createElement("span");
+              span.className = "cc-w";
+              span.setAttribute("aria-hidden", "true");
+              span.textContent = word;
+              actionLine.appendChild(span);
+            });
+            var wordEls = actionLine.querySelectorAll(".cc-w");
+            button.textContent = buttonText;
+            root.style.setProperty("--cc-accent", accentColors[accent]);
+
+            // Character-count fitting is deterministic before the template is
+            // laid out. The 0.47em advance estimate lands common display faces
+            // at 70 to 85 percent of the frame width; short lines cap on
+            // height instead so two-word closes stay monumental without
+            // touching the edges.
+            var actionCharacters = Math.max(1, Array.from(actionText).length);
+            var actionSize = Math.min(24, 76 / (actionCharacters * 0.47));
+            var buttonCharacters = Math.max(1, Array.from(buttonText).length);
+            var buttonSize = Math.min(3.5, 50 / (buttonCharacters * 0.5));
+            root.style.setProperty(
+              "--cc-action-size",
+              "min(" + actionSize.toFixed(3) + "cqw, 30cqh)",
+            );
+            root.style.setProperty(
+              "--cc-button-size",
+              "min(" + buttonSize.toFixed(3) + "cqw, 6cqh)",
+            );
+
+            var IN_BASE = 1.32;
+            var OUT_BASE = exit === "none" ? 0 : 0.45;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "3.5"));
+            var envelopeScale = Math.min(1, duration / (IN_BASE + OUT_BASE));
+            var WORDS_AT = 0.06 * envelopeScale;
+            var WORD_DURATION = 0.62 * envelopeScale;
+            var WORD_STAGGER = 0.1 * envelopeScale;
+            var BUTTON_AT = 0.72 * envelopeScale;
+            var BUTTON_DURATION = 0.6 * envelopeScale;
+            var BUTTON_FADE = 0.22 * envelopeScale;
+            var OUT = OUT_BASE * envelopeScale;
+            var OUT_START = duration - OUT;
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN, phase one: the action line lands per word at display scale.
+            tl.fromTo(
+              wordEls,
+              { opacity: 0, y: "8cqh" },
+              {
+                opacity: 1,
+                y: 0,
+                duration: WORD_DURATION,
+                ease: "power3.out",
+                stagger: WORD_STAGGER,
+              },
+              WORDS_AT,
+            );
+
+            // IN, phase two: the capsule pops beneath with ONE restrained
+            // overshoot (back.out), a real button under a monumental line.
+            tl.fromTo(
+              button,
+              { scale: 0.85, y: "3cqh" },
+              { scale: 1, y: 0, duration: BUTTON_DURATION, ease: "back.out(1.5)" },
+              BUTTON_AT,
+            );
+            tl.fromTo(
+              button,
+              { opacity: 0 },
+              { opacity: 1, duration: BUTTON_FADE, ease: "power2.out" },
+              BUTTON_AT,
+            );
+
+            // HOLD: dead still. The empty set pins the timeline to the full
+            // mount duration so seeks inside the hold land on the held pose.
+            tl.set({}, {}, duration);
+
+            // OUT: optional departure; exit none holds the still lockup
+            // until the frame cuts (this primitive closes films).
+            if (exit === "fade") {
+              tl.to(lockup, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "up") {
+              tl.to(
+                lockup,
+                { opacity: 0, y: "-5cqh", duration: OUT, ease: "power2.in" },
+                OUT_START,
+              );
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["cta-close"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add cta-close" />
+
+That writes one file: `compositions/components/cta-close.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/cta-close.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `ui-props` `cta` `end-card` `close` `ask`.
+
+## 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/components/cta-lockup.mdx b/docs/catalog/components/cta-lockup.mdx
new file mode 100644
index 0000000000..b7f9d98b5c
--- /dev/null
+++ b/docs/catalog/components/cta-lockup.mdx
@@ -0,0 +1,300 @@
+---
+title: "CTA Lockup"
+description: "A canonical closing lockup that reveals an action line, pops in an accent CTA capsule, settles supporting microcopy, and holds with confidence."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/cta-lockup.html"
+  compositionId="cta-lockup"
+  compositionSrc="compositions/components/cta-lockup.html"
+  variables={[{"id":"action_line","type":"string","role":"content","label":"Action line","description":"Primary action statement shown above the CTA.","default":"Start building today"},{"id":"button_label","type":"string","role":"content","label":"Button label","description":"Text displayed inside the CTA capsule.","default":"Get HyperFrames"},{"id":"microcopy","type":"string","role":"content","label":"Microcopy","description":"Supporting detail shown below the CTA capsule.","default":"Free while in beta"},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Fill color used by the CTA capsule.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]}]}
+>
+
+```html cta-lockup.html
+<!doctype html>
+<!--
+  cta-lockup: HyperFrames video primitive (ui-props / holdable / ask)
+
+  Concept: a canonical closing lockup with one frozen reveal order. The
+  action line arrives first, the CTA capsule pops beneath it with a restrained
+  overshoot second, and supporting microcopy settles last. The completed
+  lockup then holds with confidence.
+
+  Use when: a product film, launch video, or explainer needs one clear final
+  action without adding a second visual idea.
+
+  Variables:
+    - action_line (string, default "Start building today"): primary close.
+    - button_label (string, default "Get HyperFrames"): CTA capsule label.
+    - microcopy (string, default "Free while in beta"): supporting detail.
+    - accent (green | blue | violet, default green): capsule fill.
+
+  Envelope:
+    IN   1.60s fixed, action line then capsule then microcopy.
+    HOLD elastic, with one nearly imperceptible drift cycle across the full
+         remaining duration so longer mounts stretch only this phase.
+    OUT  none. This closing lockup establishes the final held state.
+    If D is shorter than 1.60s, IN compresses to fit and HOLD becomes zero.
+
+  Mount contract: this file is a template-wrapped sub-composition. #root
+  fills the host box, establishes the container query basis, carries no
+  data-width or data-height, and registers one paused GSAP timeline under
+  the hardcoded literal id "cta-lockup".
+-->
+<html
+  lang="en"
+  data-composition-id="cta-lockup"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "action_line", "type": "string", "role": "content", "label": "Action line", "description": "Primary action statement shown above the CTA.", "default": "Start building today" },
+    { "id": "button_label", "type": "string", "role": "content", "label": "Button label", "description": "Text displayed inside the CTA capsule.", "default": "Get HyperFrames" },
+    { "id": "microcopy", "type": "string", "role": "content", "label": "Microcopy", "description": "Supporting detail shown below the CTA capsule.", "default": "Free while in beta" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Fill color used by the CTA capsule.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>CTA Lockup</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="cta-lockup" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .cl-clip {
+            width: 100%;
+            height: 100%;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+          }
+
+          .cl-lockup {
+            width: min(88cqw, 150cqh);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            text-align: center;
+            will-change: transform;
+          }
+
+          .cl-action {
+            max-width: 86cqw;
+            margin: 0 0 6.5cqh;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: min(10cqw, 14cqh);
+            font-weight: 760;
+            line-height: 1.02;
+            letter-spacing: -0.045em;
+            text-wrap: balance;
+            will-change: transform, opacity;
+          }
+
+          .cl-button {
+            min-width: 34cqw;
+            max-width: 78cqw;
+            margin: 0 0 3.8cqh;
+            padding: 3.2cqh 5.5cqw;
+            overflow: hidden;
+            border: 0;
+            border-radius: 50cqh;
+            background: var(--cl-accent, #22c55e);
+            box-shadow: 0 2.2cqh 6cqh color-mix(in srgb, var(--cl-accent, #22c55e) 28%, transparent);
+            color: #07110d;
+            font: inherit;
+            font-size: min(4.3cqw, 6.8cqh);
+            font-weight: 760;
+            line-height: 1;
+            letter-spacing: -0.02em;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            transform-origin: 50% 50%;
+            will-change: transform, opacity;
+          }
+
+          .cl-microcopy {
+            max-width: 76cqw;
+            margin: 0;
+            color: var(--muted, #cbd5e1);
+            font-size: min(3cqw, 4.2cqh);
+            font-weight: 520;
+            line-height: 1.25;
+            letter-spacing: 0.01em;
+            text-wrap: balance;
+            will-change: transform, opacity;
+          }
+        </style>
+
+        <div
+          id="cta-lockup-clip"
+          class="cl-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="cl-lockup">
+            <h2 class="cl-action"></h2>
+            <button class="cl-button" type="button" tabindex="-1"></button>
+            <p class="cl-microcopy"></p>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var lockup = root.querySelector(".cl-lockup");
+            var actionLine = root.querySelector(".cl-action");
+            var button = root.querySelector(".cl-button");
+            var microcopy = root.querySelector(".cl-microcopy");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var actionText =
+              vars.action_line == null ? "Start building today" : String(vars.action_line);
+            var buttonText =
+              vars.button_label == null ? "Get HyperFrames" : String(vars.button_label);
+            var microcopyText =
+              vars.microcopy == null ? "Free while in beta" : String(vars.microcopy);
+            var accentColors = {
+              green: "var(--brand, #22c55e)",
+              blue: "var(--accent, #38bdf8)",
+              violet: "var(--accent-2, #a78bfa)",
+            };
+            var accentName = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+
+            actionLine.textContent = actionText;
+            button.textContent = buttonText;
+            microcopy.textContent = microcopyText;
+            root.style.setProperty("--cl-accent", accentColors[accentName]);
+
+            var IN_BASE = 1.6;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var envelopeScale = Math.min(1, duration / IN_BASE);
+            var IN = IN_BASE * envelopeScale;
+            var HOLD = Math.max(0, duration - IN);
+
+            var ACTION_DURATION = 0.5 * envelopeScale;
+            var BUTTON_AT = 0.56 * envelopeScale;
+            var BUTTON_DURATION = 0.6 * envelopeScale;
+            var BUTTON_OPACITY_DURATION = 0.24 * envelopeScale;
+            var MICROCOPY_AT = 1.18 * envelopeScale;
+            var MICROCOPY_DURATION = 0.42 * envelopeScale;
+
+            var tl = gsap.timeline({ paused: true });
+
+            tl.fromTo(
+              actionLine,
+              { opacity: 0, y: "3.4cqh" },
+              { opacity: 1, y: 0, duration: ACTION_DURATION, ease: "power3.out" },
+              0,
+            );
+            tl.fromTo(
+              button,
+              { scale: 0.72, y: "2.2cqh" },
+              {
+                scale: 1,
+                y: 0,
+                duration: BUTTON_DURATION,
+                ease: "back.out(1.7)",
+              },
+              BUTTON_AT,
+            );
+            tl.fromTo(
+              button,
+              { opacity: 0 },
+              {
+                opacity: 1,
+                duration: BUTTON_OPACITY_DURATION,
+                ease: "power2.out",
+              },
+              BUTTON_AT,
+            );
+            tl.fromTo(
+              microcopy,
+              { opacity: 0, y: "1.8cqh" },
+              {
+                opacity: 1,
+                y: 0,
+                duration: MICROCOPY_DURATION,
+                ease: "power2.out",
+              },
+              MICROCOPY_AT,
+            );
+
+            if (HOLD > 0) {
+              tl.fromTo(
+                lockup,
+                { y: 0 },
+                {
+                  y: "-0.35cqh",
+                  duration: HOLD / 2,
+                  ease: "sine.inOut",
+                  yoyo: true,
+                  repeat: 1,
+                },
+                IN,
+              );
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["cta-lockup"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add cta-lockup" />
+
+That writes one file: `compositions/components/cta-lockup.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/cta-lockup.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `ui-props` `cta` `end-card` `lockup` `ask`.
+
+## 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/components/cursor-glyph-trail.mdx b/docs/catalog/components/cursor-glyph-trail.mdx
new file mode 100644
index 0000000000..9aa6a935c4
--- /dev/null
+++ b/docs/catalog/components/cursor-glyph-trail.mdx
@@ -0,0 +1,432 @@
+---
+title: "Cursor Glyph Trail"
+description: "An actor travels an authored path depositing small dithered glyphs at its past positions, each popping in and decaying in place, stamp rate scaling with the actor's velocity."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/cursor-glyph-trail.html"
+  compositionId="cursor-glyph-trail"
+  compositionSrc="compositions/components/cursor-glyph-trail.html"
+  variables={[{"id":"glyphs","type":"string","role":"content","label":"Glyphs","description":"Stamp charset; one glyph per stamp is chosen deterministically.","default":"░▒▓+·×"},{"id":"density","type":"enum","role":"style","label":"Density","description":"Arc-length spacing between stamps along the path.","default":"med","options":[{"value":"low","label":"Low"},{"value":"med","label":"Medium"},{"value":"high","label":"High"}]},{"id":"path","type":"enum","role":"timing","label":"Path","description":"Authored travel path preset.","default":"sweep","options":[{"value":"sweep","label":"Sweep"},{"value":"arc","label":"Arc"},{"value":"zigzag","label":"Zigzag"}]},{"id":"fade","type":"number","role":"timing","label":"Fade","description":"Per-stamp decay window in seconds, clamped 0.3 to 1.5.","default":0.8},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Trail and actor color: green rides --brand, blue rides --accent, violet rides --accent-2.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Optional departure. Default none: the settled actor holds until the frame cuts.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
+>
+
+```html cursor-glyph-trail.html
+<!doctype html>
+<!--
+  cursor-glyph-trail: HyperFrames video primitive (product demo / trails)
+
+  An actor (default: a cursor dot) travels an authored path and deposits
+  small dithered glyphs at its past positions. Each glyph pops in where the
+  actor passed and decays in place; stamps land at fixed arc-length spacing,
+  so the per-second stamp rate scales with the actor's velocity. The jh3yy
+  stamp-and-decay register: the trail is the residue of the motion, and it
+  has fully dissolved before the hold.
+
+  The actor is a SLOT. Callers supply content by placing an inert template
+  anywhere in the HOST page (templates never render, and the runtime wipes
+  the host clip's own children on mount, so the slot lives at document
+  level):
+
+    <template data-slot="cursor-glyph-trail-actor"> ... </template>
+
+  With no slot, the primitive renders a token cursor dot (accent core,
+  hairline ring).
+
+  Variables (declared in data-composition-variables below):
+    - glyphs (string): the stamp charset; one glyph is chosen per stamp by
+      a fixed-seed LCG. Default is a dithered block-and-punctuation set.
+    - density ("low" | "med" | "high", default "med"): arc-length spacing
+      between stamps; higher density means tighter spacing.
+    - path ("sweep" | "arc" | "zigzag", default "sweep"): the authored
+      travel path preset.
+    - fade (number seconds, default 0.8, clamped 0.3 to 1.5): the decay
+      window of each stamp; per-stamp decay varies 0.75x to 1.25x of it.
+    - accent ("green" | "blue" | "violet", default "green"): green rides
+      --brand, blue rides --accent, violet rides --accent-2.
+    - exit ("none" | "fade" | "up", default "none"): frame roots own
+      transitions; the default holds the final frame to the last pixel.
+
+  Envelope, fixed IN and OUT with elastic HOLD only (never timeScale):
+    IN_BASE  = TRAVEL (2.4s) + pop (0.07s) + fade * 1.25 + 0.05s margin;
+               the actor arrives at TRAVEL and every stamp's decay tween
+               ends inside IN, so the HOLD is truly still
+    HOLD     = max(0, D - IN - OUT)
+    OUT_BASE = 0.45s  only when exit != none
+    If D < IN_BASE + OUT_BASE, the whole envelope compresses together.
+
+  Determinism: the stamp table (positions, times, glyph choices, jitter,
+  sizes, peaks, decay multipliers) is computed exactly once during
+  synchronous mount from fixed LCG seed 0x67117a11. On every timeline
+  update, each stamp's opacity is recomputed as a pure function
+  f(tl.time() - t_i) of its table row, and the actor's position as a pure
+  function of tl.time(); stamps deliberately carry NO tweens (two
+  sequential tweens on one property render in direction-dependent order
+  under GSAP seeks, which breaks byte-identical frames). No Math.random
+  at runtime, no wall clock, no incremental state, no
+  requestAnimationFrame. Eventful seeks (suppressEvents=false, the
+  engine's render path) land identical frames in any order and either
+  direction.
+
+  Mount contract: the runtime clones only this template. #root fills the
+  host box (no data-width/data-height, container-type: size, cqmin units),
+  is styled via #root only, and registers one paused timeline under the
+  LITERAL "cursor-glyph-trail" key.
+-->
+<html
+  lang="en"
+  data-composition-id="cursor-glyph-trail"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "glyphs", "type": "string", "role": "content", "label": "Glyphs", "description": "Stamp charset; one glyph per stamp is chosen deterministically.", "default": "░▒▓+·×" },
+    { "id": "density", "type": "enum", "role": "style", "label": "Density", "description": "Arc-length spacing between stamps along the path.", "default": "med", "options": [{ "value": "low", "label": "Low" }, { "value": "med", "label": "Medium" }, { "value": "high", "label": "High" }] },
+    { "id": "path", "type": "enum", "role": "timing", "label": "Path", "description": "Authored travel path preset.", "default": "sweep", "options": [{ "value": "sweep", "label": "Sweep" }, { "value": "arc", "label": "Arc" }, { "value": "zigzag", "label": "Zigzag" }] },
+    { "id": "fade", "type": "number", "role": "timing", "label": "Fade", "description": "Per-stamp decay window in seconds, clamped 0.3 to 1.5.", "default": 0.8 },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Trail and actor color: green rides --brand, blue rides --accent, violet rides --accent-2.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the settled actor holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Cursor Glyph Trail</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="cursor-glyph-trail" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            pointer-events: none;
+          }
+
+          .cgt-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .cgt-stage {
+            position: absolute;
+            inset: 0;
+            will-change: transform, opacity;
+          }
+
+          .cgt-field {
+            position: absolute;
+            inset: 0;
+          }
+
+          .cgt-stamp {
+            position: absolute;
+            opacity: 0;
+            line-height: 1;
+            font-weight: 500;
+            will-change: opacity;
+            user-select: none;
+          }
+
+          .cgt-actor {
+            position: absolute;
+            opacity: 0;
+            transform: translate(-50%, -50%);
+            will-change: opacity;
+          }
+
+          .cgt-dot {
+            width: 3.4cqmin;
+            height: 3.4cqmin;
+            border-radius: 50%;
+            background: var(--cgt-accent);
+            border: 0.35cqmin solid color-mix(in srgb, var(--fg, #f8fafc) 82%, var(--cgt-accent));
+            box-shadow: 0 0.6cqmin 2.4cqmin color-mix(in srgb, var(--bg, #000000) 35%, transparent);
+          }
+        </style>
+
+        <div
+          id="cursor-glyph-trail-clip"
+          class="cgt-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="cgt-stage">
+            <div class="cgt-field" aria-hidden="true"></div>
+            <div class="cgt-actor">
+              <div class="cgt-dot"></div>
+            </div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".cgt-stage");
+            var field = root.querySelector(".cgt-field");
+            var actor = root.querySelector(".cgt-actor");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            // Arc-length spacing (percent-of-stage units). Fixed spacing
+            // along the path means the per-second stamp rate rises and
+            // falls with the actor's velocity: the density law.
+            var spacingByDensity = { low: 4.6, med: 2.9, high: 1.8 };
+            var density = Object.prototype.hasOwnProperty.call(spacingByDensity, vars.density)
+              ? vars.density
+              : "med";
+            var pathName = vars.path === "arc" || vars.path === "zigzag" ? vars.path : "sweep";
+            var glyphSource =
+              typeof vars.glyphs === "string" && vars.glyphs.length > 0 ? vars.glyphs : "░▒▓+·×";
+            var glyphSet = Array.from(glyphSource);
+            var fadeRaw = parseFloat(vars.fade);
+            var fade = isFinite(fadeRaw) ? Math.min(1.5, Math.max(0.3, fadeRaw)) : 0.8;
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #52525b)",
+              blue: "var(--accent, #52525b)",
+              violet: "var(--accent-2, #52525b)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            root.style.setProperty("--cgt-accent", accentColors[accent]);
+
+            // SLOT. Caller templates live at HOST DOCUMENT level (the mount
+            // wipes host-clip children, and templates never render).
+            var hostDoc = root.ownerDocument;
+            var slotTemplate = null;
+            try {
+              slotTemplate = hostDoc.querySelector(
+                'template[data-slot="cursor-glyph-trail-actor"]',
+              );
+            } catch (error) {
+              slotTemplate = null;
+            }
+            if (slotTemplate) {
+              actor.querySelector(".cgt-dot").remove();
+              actor.appendChild(hostDoc.importNode(slotTemplate.content, true));
+            }
+
+            // Envelope: fixed IN/OUT, elastic HOLD, never time-scaled.
+            var POP = 0.07;
+            var TRAVEL_BASE = 2.4;
+            var IN_BASE = TRAVEL_BASE + POP + fade * 1.25 + 0.05;
+            var OUT_BASE = exit === "none" ? 0 : 0.45;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var totalBase = Math.max(0.001, IN_BASE + OUT_BASE);
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var TRAVEL = TRAVEL_BASE * scale;
+            var pop = POP * scale;
+            var fadeEff = fade * scale;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var OUT_START = IN + HOLD;
+
+            // Path presets in percent-of-stage coordinates.
+            var zigzagPoints = [
+              { x: 10, y: 34 },
+              { x: 38, y: 70 },
+              { x: 64, y: 32 },
+              { x: 90, y: 64 },
+            ];
+            function pathPoint(u) {
+              if (pathName === "arc") {
+                return { x: 12 + 76 * u, y: 68 - 40 * Math.sin(Math.PI * u) };
+              }
+              if (pathName === "zigzag") {
+                var segs = zigzagPoints.length - 1;
+                var s = Math.min(segs - 1e-9, Math.max(0, u * segs));
+                var i = Math.floor(s);
+                var f = s - i;
+                var a = zigzagPoints[i];
+                var b = zigzagPoints[i + 1];
+                return { x: a.x + (b.x - a.x) * f, y: a.y + (b.y - a.y) * f };
+              }
+              // sweep: an S-curve from lower left to upper right.
+              return { x: 8 + 84 * u, y: 50 + 16 * Math.cos(Math.PI * u) };
+            }
+
+            // Shared travel ease, implemented once so the stamp table and
+            // the per-update actor position use the identical mapping.
+            function easeInOut(t) {
+              return t < 0.5 ? 2 * t * t : 1 - 2 * (1 - t) * (1 - t);
+            }
+            function clamp01(v) {
+              return v < 0 ? 0 : v > 1 ? 1 : v;
+            }
+
+            // The LCG and every per-stamp decision live here, computed once
+            // before timeline construction from a fixed seed. A stamp's
+            // opacity at any time is then a pure function of timeline time.
+            var lcgState = 0x67117a11;
+            function next() {
+              lcgState = (Math.imul(1664525, lcgState) + 1013904223) >>> 0;
+              return lcgState / 4294967296;
+            }
+
+            var spacing = spacingByDensity[density];
+            var STEPS = 600;
+            var stamps = [];
+            var acc = 0;
+            var prev = pathPoint(easeInOut(0));
+            for (var k = 1; k <= STEPS; k += 1) {
+              var f = k / STEPS;
+              var pos = pathPoint(easeInOut(f));
+              acc += Math.hypot(pos.x - prev.x, pos.y - prev.y);
+              prev = pos;
+              if (acc >= spacing) {
+                acc -= spacing;
+                stamps.push({
+                  t: f * TRAVEL,
+                  x: pos.x + (next() - 0.5) * 3.2,
+                  y: pos.y + (next() - 0.5) * 3.2,
+                  glyph: glyphSet[Math.floor(next() * glyphSet.length) % glyphSet.length],
+                  rot: (next() - 0.5) * 20,
+                  size: 1.9 + next() * 1.4,
+                  peak: 0.45 + next() * 0.45,
+                  mix: 55 + Math.floor(next() * 36),
+                  fadeMul: 0.75 + next() * 0.5,
+                });
+              }
+            }
+
+            var fragment = hostDoc.createDocumentFragment();
+            for (var s = 0; s < stamps.length; s += 1) {
+              var row = stamps[s];
+              var span = hostDoc.createElement("span");
+              span.className = "cgt-stamp";
+              span.textContent = row.glyph;
+              span.style.left = row.x.toFixed(3) + "%";
+              span.style.top = row.y.toFixed(3) + "%";
+              span.style.fontSize = row.size.toFixed(3) + "cqmin";
+              span.style.transform = "translate(-50%, -50%) rotate(" + row.rot.toFixed(2) + "deg)";
+              span.style.color =
+                "color-mix(in srgb, var(--cgt-accent) " + row.mix + "%, var(--fg, #f8fafc))";
+              row.el = span;
+              fragment.appendChild(span);
+            }
+            field.appendChild(fragment);
+
+            // Pure per-update apply: the actor position and every stamp's
+            // opacity are functions of tl.time() alone. A stamp pops in
+            // over `pop` seconds and decays over its table row's window;
+            // by IN every value is exactly zero. Writes are idempotent, so
+            // the HOLD repaints identical values and stays truly still.
+            function stampOpacity(row, timeSeconds) {
+              var dt = timeSeconds - row.t;
+              if (dt <= 0) return 0;
+              if (dt < pop) {
+                var g = dt / pop;
+                return row.peak * (1 - (1 - g) * (1 - g));
+              }
+              var u = (dt - pop) / (fadeEff * row.fadeMul);
+              if (u >= 1) return 0;
+              return row.peak * (1 - u * u);
+            }
+
+            function applyTime(timeSeconds) {
+              var u = easeInOut(clamp01(TRAVEL > 0 ? timeSeconds / TRAVEL : 1));
+              var p = pathPoint(u);
+              gsap.set(actor, { left: p.x.toFixed(4) + "%", top: p.y.toFixed(4) + "%" });
+              for (var i = 0; i < stamps.length; i += 1) {
+                stamps[i].el.style.opacity = stampOpacity(stamps[i], timeSeconds).toFixed(4);
+              }
+            }
+
+            gsap.set(stage, { opacity: 1, y: "0cqh" });
+
+            var tl = gsap.timeline({
+              paused: true,
+              onUpdate: function () {
+                applyTime(tl.time());
+              },
+            });
+
+            // Anchor tween: an inert plain-object tween spanning the full
+            // authored duration so the timeline covers [0, D], onUpdate
+            // fires for every eventful seek, and holds never clamp short.
+            tl.to({ p: 0 }, { p: 1, duration: duration, ease: "none" }, 0);
+
+            // Actor entrance: both endpoints authored.
+            tl.fromTo(
+              actor,
+              { opacity: 0 },
+              { opacity: 1, duration: 0.18 * scale, ease: "power2.out" },
+              0,
+            );
+
+            // Stamps carry no tweens: their opacity rides applyTime's pure
+            // table evaluation, and each decay completes inside IN by
+            // construction.
+
+            // HOLD: truly still. All stamps are exactly zero by IN and the
+            // actor rests at path(1); repeated repaints write identical
+            // values.
+
+            // OUT: optional departure; exit none holds until the frame cuts.
+            if (exit === "up") {
+              tl.to(stage, { y: "-4cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "fade") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            }
+
+            tl.seek(0);
+            applyTime(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["cursor-glyph-trail"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add cursor-glyph-trail" />
+
+That writes one file: `compositions/components/cursor-glyph-trail.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/cursor-glyph-trail.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `demonstrate` `trail` `cursor` `glyphs` `deterministic`.
+
+## 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/components/cut-the-curve.mdx b/docs/catalog/components/cut-the-curve.mdx
new file mode 100644
index 0000000000..9e58c6b6db
--- /dev/null
+++ b/docs/catalog/components/cut-the-curve.mdx
@@ -0,0 +1,542 @@
+---
+title: "Cut the Curve"
+description: "A velocity-matched directional hard cut: the outgoing subject accelerates with power4.in, swaps at peak velocity, and the incoming subject continues in the same direction with power4.out."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/cut-the-curve.html"
+  compositionId="cut-the-curve"
+  compositionSrc="compositions/components/cut-the-curve.html"
+  variables={[{"id":"subject","type":"enum","role":"content","label":"Subject","description":"Visual payload used on both sides of the cut.","default":"cursor","options":[{"value":"cursor","label":"Cursor"},{"value":"card","label":"Card"},{"value":"scene","label":"Scene"}]},{"id":"direction","type":"enum","role":"motion","label":"Direction","description":"Shared screen direction for outgoing and incoming travel.","default":"left","options":[{"value":"left","label":"Left"},{"value":"right","label":"Right"},{"value":"up","label":"Up"},{"value":"down","label":"Down"}]},{"id":"cutFraction","type":"number","role":"timing","label":"Cut fraction","description":"Normalized point where the hard cut swaps subjects.","default":0.33,"min":0,"max":1,"step":0.01},{"id":"blurPx","type":"number","role":"style","label":"Cut blur","description":"Blur in pixels shared by both subjects at the cut seam.","default":12,"min":0,"max":40,"step":1,"unit":"px"},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Optional departure of the incoming subject. Default none: it rests until the frame cuts.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
+>
+
+```html cut-the-curve.html
+<!doctype html>
+<!--
+  cut-the-curve -- HyperFrames video primitive (transitions / bridge)
+
+  Concept: a velocity-matched directional hard cut. The outgoing subject
+  accelerates along one straight screen vector with power4.in. At peak
+  velocity, the timeline swaps identities. The incoming subject starts on
+  the far side of the same vector and decelerates to rest with power4.out.
+  Matched blur and opacity at the cut conceal the seam.
+
+  Compiled from the launch write-up for this piece.
+  The source identifies the production signature as a single power4 whip,
+  with an approximately 1:2 outgoing-to-incoming distance and duration split.
+
+  Use when: bridging attention and momentum between shots, UI states, cards,
+  cursor beats, or scene blocks without requiring object identity to persist.
+
+  Variables (declared in data-composition-variables below):
+    - subject ("cursor" | "card" | "scene", default "cursor") selects the
+      simple visual payload used for both sides of the cut.
+    - direction ("left" | "right" | "up" | "down", default "left") owns
+      both the motion axis and the shared screen direction.
+    - cutFraction (number, 0-1, default 0.33) sets the hard-cut point. The
+      incoming distance is derived from this fraction so seam velocity stays
+      matched. At 0 or 1, the corresponding zero-duration half collapses.
+    - blurPx (number, default 12) sets blur at the cut seam.
+    - exit ("none" | "fade" | "up", default "none") optionally departs the
+      incoming subject at the end. Enabling it reserves a short tail window
+      (min(0.35s, 25% of D)) after the incoming subject lands.
+
+  Envelope (transition profile, no elastic HOLD; T = D minus the exit tail,
+  which is 0 when exit is none):
+    OUT = T * cutFraction, power4.in
+    IN  = T * (1 - cutFraction), power4.out
+    The default 0.33 split is approximately 1:2 in time. Incoming distance is
+    derived from OUT distance and the duration ratio, preserving the same
+    approximately 1:2 spatial split and matching velocity at the cut.
+
+  Sync point: CUT_AT = T * cutFraction, the fixed boundary between OUT and
+  IN. It never lands in a HOLD because this profile has no HOLD phase.
+
+  Sound cue: a short whip cut fires at CUT_AT. The primitive never plays
+  audio. It dispatches an `hf:sfx` CustomEvent with
+  { id: "whip-cut", t: CUT_AT } for the scene mix stage to route.
+
+  EDIT ZONE: change only the subject geometry custom properties in the style
+  block when adapting the payload drawings. The vector ratios and the paired
+  power4 eases are the mechanic and must remain together.
+
+  INVARIANTS: outgoing and incoming always share one vector; the identity swap
+  happens only at CUT_AT; their blur and opacity values match at that seam;
+  exactly one paused timeline registers under the literal id "cut-the-curve".
+
+  RETIME RANGE: 0.3s to 3s. Retiming changes D only. Never timeScale the GSAP
+  timeline and never split the two halves into independently tuned velocities.
+
+  Mount contract: this is a template-wrapped sub-composition. Everything the
+  mount needs, including styles, markup, GSAP, and timeline registration,
+  lives inside <template>. #root fills the host box with position:absolute,
+  inset:0, and container-type:size. It has no data-width or data-height.
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "subject", "type": "enum", "role": "content", "label": "Subject", "description": "Visual payload used on both sides of the cut.", "default": "cursor", "options": [{ "value": "cursor", "label": "Cursor" }, { "value": "card", "label": "Card" }, { "value": "scene", "label": "Scene" }] },
+    { "id": "direction", "type": "enum", "role": "motion", "label": "Direction", "description": "Shared screen direction for outgoing and incoming travel.", "default": "left", "options": [{ "value": "left", "label": "Left" }, { "value": "right", "label": "Right" }, { "value": "up", "label": "Up" }, { "value": "down", "label": "Down" }] },
+    { "id": "cutFraction", "type": "number", "role": "timing", "label": "Cut fraction", "description": "Normalized point where the hard cut swaps subjects.", "default": 0.33, "min": 0, "max": 1, "step": 0.01 },
+    { "id": "blurPx", "type": "number", "role": "style", "label": "Cut blur", "description": "Blur in pixels shared by both subjects at the cut seam.", "default": 12, "min": 0, "max": 40, "step": 1, "unit": "px" },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure of the incoming subject. Default none: it rests until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Cut the Curve</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="cut-the-curve" data-duration="1" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+          }
+
+          .ctc-clip,
+          .ctc-backdrop,
+          .ctc-subject {
+            position: absolute;
+            inset: 0;
+          }
+
+          .ctc-clip {
+            overflow: hidden;
+          }
+
+          .ctc-backdrop {
+            background:
+              radial-gradient(
+                circle at var(--ctc-glow-x, 24%) var(--ctc-glow-y, 28%),
+                color-mix(
+                  in srgb,
+                  var(--fg, #f8fafc) var(--ctc-glow-strength, 18%),
+                  var(--transparent, transparent)
+                ),
+                var(--transparent, transparent) var(--ctc-glow-radius, 42%)
+              ),
+              var(--bg, #0b1120);
+          }
+
+          .ctc-subject {
+            display: grid;
+            place-items: center;
+            opacity: 0;
+            will-change: transform, filter, opacity;
+          }
+
+          .ctc-subject.is-outgoing {
+            opacity: 1;
+            --ctc-primary: color-mix(in srgb, var(--fg, #f8fafc) 45%, transparent);
+            --ctc-secondary: color-mix(in srgb, var(--fg, #f8fafc) 18%, transparent);
+          }
+
+          .ctc-subject.is-incoming {
+            --ctc-primary: color-mix(in srgb, var(--fg, #f8fafc) 72%, transparent);
+            --ctc-secondary: color-mix(in srgb, var(--fg, #f8fafc) 45%, transparent);
+          }
+
+          .ctc-art {
+            display: none;
+          }
+
+          #root[data-subject="cursor"] .ctc-cursor,
+          #root[data-subject="card"] .ctc-card,
+          #root[data-subject="scene"] .ctc-scene {
+            display: block;
+          }
+
+          .ctc-cursor {
+            position: relative;
+            width: var(--ctc-cursor-width, 15cqw);
+            height: var(--ctc-cursor-height, 24cqh);
+          }
+
+          .ctc-cursor svg {
+            width: var(--ctc-cursor-svg-width, 100%);
+            height: var(--ctc-cursor-svg-height, 100%);
+            overflow: visible;
+            filter: drop-shadow(
+              var(--ctc-shadow-x, 0cqw) var(--ctc-shadow-y, 1cqh) var(--ctc-shadow-blur, 1.6cqw)
+                color-mix(
+                  in srgb,
+                  var(--bg, #0b1120) var(--ctc-shadow-strength, 65%),
+                  var(--transparent, transparent)
+                )
+            );
+          }
+
+          .ctc-cursor-shape {
+            fill: var(--ctc-primary, var(--fg, #f8fafc));
+            stroke: var(--fg, #f8fafc);
+            stroke-width: var(--ctc-cursor-stroke, 1.8);
+            stroke-linejoin: round;
+          }
+
+          .ctc-cursor-pulse {
+            position: absolute;
+            left: var(--ctc-pulse-left, -5cqw);
+            top: var(--ctc-pulse-top, -5cqh);
+            width: var(--ctc-pulse-size, 11cqw);
+            aspect-ratio: var(--ctc-pulse-ratio, 1);
+            border: var(--ctc-pulse-border, 0.25cqw) solid
+              color-mix(
+                in srgb,
+                var(--ctc-secondary, var(--fg, #f8fafc)) var(--ctc-pulse-strength, 58%),
+                var(--transparent, transparent)
+              );
+            border-radius: var(--ctc-round, 50%);
+          }
+
+          .ctc-card {
+            width: var(--ctc-card-width, 42cqw);
+            min-height: var(--ctc-card-height, 34cqh);
+            padding: var(--ctc-card-padding-y, var(--space-3, 4.5cqh))
+              var(--ctc-card-padding-x, var(--space-3, 4cqw));
+            border: var(--ctc-border-width, 0.22cqw) solid var(--border, #334155);
+            border-radius: var(--radius, 2cqw);
+            background: var(--surface, #1e293b);
+            box-shadow: var(--ctc-shadow-x, 0cqw) var(--ctc-card-shadow-y, 2.4cqh)
+              var(--ctc-card-shadow-blur, 5cqw)
+              color-mix(
+                in srgb,
+                var(--bg, #0b1120) var(--ctc-card-shadow-strength, 55%),
+                var(--transparent, transparent)
+              );
+          }
+
+          .ctc-card-chip {
+            width: var(--ctc-chip-width, 9cqw);
+            height: var(--ctc-chip-height, 2.2cqh);
+            border-radius: var(--ctc-pill-radius, 99cqw);
+            background: var(--ctc-primary, var(--fg, #f8fafc));
+            margin-bottom: var(--ctc-card-gap, var(--space-3, 3.2cqh));
+          }
+
+          .ctc-card-line,
+          .ctc-scene-line {
+            height: var(--ctc-line-height, 1.8cqh);
+            border-radius: var(--ctc-pill-radius, 99cqw);
+            background: var(--fg, #f8fafc);
+          }
+
+          .ctc-card-line + .ctc-card-line {
+            margin-top: var(--ctc-line-gap, var(--space-2, 2.2cqh));
+          }
+
+          .ctc-card-line:first-of-type {
+            width: var(--ctc-line-long, 88%);
+          }
+
+          .ctc-card-line:last-of-type {
+            width: var(--ctc-line-short, 58%);
+            opacity: var(--ctc-muted-opacity, 0.42);
+          }
+
+          .ctc-scene {
+            width: var(--ctc-scene-width, 68cqw);
+            height: var(--ctc-scene-height, 58cqh);
+            overflow: hidden;
+            border: var(--ctc-border-width, 0.22cqw) solid var(--border, #334155);
+            border-radius: var(--radius, 2cqw);
+            background: var(--surface, #1e293b);
+            box-shadow: var(--ctc-shadow-x, 0cqw) var(--ctc-card-shadow-y, 2.4cqh)
+              var(--ctc-card-shadow-blur, 5cqw)
+              color-mix(
+                in srgb,
+                var(--bg, #0b1120) var(--ctc-card-shadow-strength, 55%),
+                var(--transparent, transparent)
+              );
+          }
+
+          .ctc-scene-bar {
+            display: flex;
+            align-items: center;
+            gap: var(--ctc-dot-gap, var(--space-1, 1cqw));
+            height: var(--ctc-scene-bar-height, 8cqh);
+            padding-inline: var(--ctc-scene-pad, var(--space-2, 2cqw));
+            border-bottom: var(--ctc-border-width, 0.22cqw) solid var(--border, #334155);
+          }
+
+          .ctc-scene-dot {
+            width: var(--ctc-dot-size, 1.4cqw);
+            aspect-ratio: var(--ctc-pulse-ratio, 1);
+            border-radius: var(--ctc-round, 50%);
+            background: var(--ctc-primary, var(--fg, #f8fafc));
+          }
+
+          .ctc-scene-body {
+            display: grid;
+            grid-template-columns: var(--ctc-scene-columns, 1fr 2fr);
+            gap: var(--ctc-scene-gap, var(--space-3, 3cqw));
+            padding: var(--ctc-scene-body-pad, var(--space-3, 5cqh))
+              var(--ctc-scene-pad, var(--space-3, 3cqw));
+          }
+
+          .ctc-scene-panel {
+            min-height: var(--ctc-panel-height, 34cqh);
+            border-radius: var(--ctc-panel-radius, var(--radius, 1.2cqw));
+            background: color-mix(
+              in srgb,
+              var(--ctc-primary, var(--fg, #f8fafc)) var(--ctc-panel-strength, 24%),
+              var(--surface, #1e293b)
+            );
+          }
+
+          .ctc-scene-copy {
+            padding-top: var(--ctc-copy-top, var(--space-2, 2cqh));
+          }
+
+          .ctc-scene-line + .ctc-scene-line {
+            margin-top: var(--ctc-scene-line-gap, var(--space-3, 3cqh));
+          }
+
+          .ctc-scene-line:nth-child(1) {
+            width: var(--ctc-scene-line-one, 92%);
+          }
+
+          .ctc-scene-line:nth-child(2) {
+            width: var(--ctc-scene-line-two, 68%);
+            opacity: var(--ctc-muted-opacity, 0.42);
+          }
+
+          .ctc-scene-line:nth-child(3) {
+            width: var(--ctc-scene-line-three, 78%);
+            background: var(--ctc-secondary, var(--fg, #f8fafc));
+          }
+        </style>
+
+        <div
+          id="cut-the-curve-clip"
+          class="ctc-clip clip"
+          data-start="0"
+          data-duration="1"
+          data-track-index="0"
+        >
+          <div class="ctc-backdrop"></div>
+
+          <div class="ctc-subject is-outgoing" aria-hidden="true">
+            <div class="ctc-art ctc-cursor">
+              <span class="ctc-cursor-pulse"></span>
+              <svg viewBox="0 0 64 88" aria-hidden="true">
+                <path
+                  class="ctc-cursor-shape"
+                  d="M8 5 L54 43 L34 47 L45 75 L30 82 L19 53 L8 68 Z"
+                />
+              </svg>
+            </div>
+            <div class="ctc-art ctc-card">
+              <div class="ctc-card-chip"></div>
+              <div class="ctc-card-line"></div>
+              <div class="ctc-card-line"></div>
+            </div>
+            <div class="ctc-art ctc-scene">
+              <div class="ctc-scene-bar">
+                <span class="ctc-scene-dot"></span><span class="ctc-scene-dot"></span
+                ><span class="ctc-scene-dot"></span>
+              </div>
+              <div class="ctc-scene-body">
+                <div class="ctc-scene-panel"></div>
+                <div class="ctc-scene-copy">
+                  <div class="ctc-scene-line"></div>
+                  <div class="ctc-scene-line"></div>
+                  <div class="ctc-scene-line"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="ctc-subject is-incoming" aria-hidden="true">
+            <div class="ctc-art ctc-cursor">
+              <span class="ctc-cursor-pulse"></span>
+              <svg viewBox="0 0 64 88" aria-hidden="true">
+                <path
+                  class="ctc-cursor-shape"
+                  d="M8 5 L54 43 L34 47 L45 75 L30 82 L19 53 L8 68 Z"
+                />
+              </svg>
+            </div>
+            <div class="ctc-art ctc-card">
+              <div class="ctc-card-chip"></div>
+              <div class="ctc-card-line"></div>
+              <div class="ctc-card-line"></div>
+            </div>
+            <div class="ctc-art ctc-scene">
+              <div class="ctc-scene-bar">
+                <span class="ctc-scene-dot"></span><span class="ctc-scene-dot"></span
+                ><span class="ctc-scene-dot"></span>
+              </div>
+              <div class="ctc-scene-body">
+                <div class="ctc-scene-panel"></div>
+                <div class="ctc-scene-copy">
+                  <div class="ctc-scene-line"></div>
+                  <div class="ctc-scene-line"></div>
+                  <div class="ctc-scene-line"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var outgoing = root.querySelector(".is-outgoing");
+            var incoming = root.querySelector(".is-incoming");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var subject =
+              vars.subject === "card" || vars.subject === "scene" ? vars.subject : "cursor";
+            var direction =
+              vars.direction === "right" || vars.direction === "up" || vars.direction === "down"
+                ? vars.direction
+                : "left";
+            var rawCut = Number(vars.cutFraction);
+            var cutFraction = Number.isFinite(rawCut) ? Math.max(0, Math.min(1, rawCut)) : 0.33;
+            var rawBlur = Number(vars.blurPx);
+            var blurPx = Number.isFinite(rawBlur) ? Math.max(0, rawBlur) : 12;
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            root.dataset.subject = subject;
+
+            // Direction is the single owner of axis, sign, unit, and base travel.
+            var vectors = {
+              left: { axis: "x", sign: -1, unit: "cqw", distance: 34 },
+              right: { axis: "x", sign: 1, unit: "cqw", distance: 34 },
+              up: { axis: "y", sign: -1, unit: "cqh", distance: 26 },
+              down: { axis: "y", sign: 1, unit: "cqh", distance: 26 },
+            };
+            var vector = vectors[direction];
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "1"));
+            // Exit none keeps the whole duration for the cut profile. An
+            // enabled exit reserves a short tail after the incoming lands.
+            var EXIT = exit === "none" ? 0 : Math.min(0.35, duration * 0.25);
+            var TRAVEL = Math.max(0.001, duration - EXIT);
+            var CUT_AT = TRAVEL * cutFraction;
+            var ENTRY_DURATION = TRAVEL - CUT_AT;
+            var entryDistance =
+              CUT_AT > 0 ? vector.distance * (ENTRY_DURATION / CUT_AT) : vector.distance * 2;
+            var seamBlur = "blur(" + blurPx + "px)";
+            var clearBlur = "blur(0px)";
+            var seamOpacity = 0.72;
+
+            var outgoingEnd = { opacity: seamOpacity, filter: seamBlur };
+            outgoingEnd[vector.axis] = vector.sign * vector.distance + vector.unit;
+
+            var incomingStart = { x: 0, y: 0, opacity: 0, filter: seamBlur };
+            incomingStart[vector.axis] = -vector.sign * entryDistance + vector.unit;
+
+            var incomingEnd = { opacity: 1, filter: clearBlur };
+            incomingEnd[vector.axis] = 0;
+
+            gsap.set(outgoing, { x: 0, y: 0, opacity: 1, filter: clearBlur });
+            gsap.set(incoming, incomingStart);
+
+            var tl = gsap.timeline({ paused: true });
+
+            if (CUT_AT > 0) {
+              tl.to(
+                outgoing,
+                Object.assign({}, outgoingEnd, { duration: CUT_AT, ease: "power4.in" }),
+                0,
+              );
+            }
+
+            // CUT: one visibility owner, matched blur and opacity on both sides.
+            tl.set(outgoing, { opacity: 0 }, CUT_AT);
+            tl.set(incoming, { opacity: seamOpacity }, CUT_AT);
+            tl.call(
+              function () {
+                root.dispatchEvent(
+                  new CustomEvent("hf:sfx", {
+                    detail: { id: "whip-cut", t: CUT_AT },
+                    bubbles: true,
+                  }),
+                );
+              },
+              [],
+              CUT_AT,
+            );
+
+            if (ENTRY_DURATION > 0) {
+              tl.to(
+                incoming,
+                Object.assign({}, incomingEnd, {
+                  duration: ENTRY_DURATION,
+                  ease: "power4.out",
+                }),
+                CUT_AT,
+              );
+            } else {
+              tl.set(incoming, incomingEnd, CUT_AT);
+            }
+
+            // Optional departure; exit none rests until the frame cuts.
+            if (exit === "fade") {
+              tl.to(incoming, { opacity: 0, duration: EXIT, ease: "power2.in" }, TRAVEL);
+            } else if (exit === "up") {
+              tl.to(
+                incoming,
+                { opacity: 0, y: "-6cqh", duration: EXIT, ease: "power2.in" },
+                TRAVEL,
+              );
+            }
+
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines["cut-the-curve"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add cut-the-curve" />
+
+That writes one file: `compositions/components/cut-the-curve.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/cut-the-curve.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `transition` `directional-cut` `velocity-match` `whip` `bridge` `demonstrate`.
+
+## 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/components/decline-chart.mdx b/docs/catalog/components/decline-chart.mdx
new file mode 100644
index 0000000000..b7b83e3b95
--- /dev/null
+++ b/docs/catalog/components/decline-chart.mdx
@@ -0,0 +1,318 @@
+---
+title: "Decline Chart"
+description: "A metric line draws downward as its value counts down and the ambient background darkens in lockstep."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/decline-chart.html"
+  compositionId="decline-chart"
+  compositionSrc="compositions/components/decline-chart.html"
+  variables={[{"id":"label","type":"string","role":"content","label":"Metric label","description":"Label shown above the declining value.","default":"Retention"},{"id":"start_value","type":"number","role":"content","label":"Start value","description":"Metric value at the start of the decline.","default":82,"min":0,"max":100,"step":1},{"id":"end_value","type":"number","role":"content","label":"End value","description":"Metric value at the bottom of the decline.","default":34,"min":0,"max":100,"step":1}]}
+>
+
+```html decline-chart.html
+<!doctype html>
+<!--
+  decline-chart: HyperFrames video primitive
+
+  One metric line draws downward while its numeric value counts down and the
+  ambient background dims and desaturates from the same progress value.
+
+  Envelope:
+    IN_BASE  = 0.55s  chart frame settles into view
+    HOLD     = elastic decline draw, countdown, and ambient darkening
+    OUT_BASE = 0.45s  bottomed-out endpoint locks in with no recovery
+    If D is shorter than IN_BASE + OUT_BASE, IN and OUT compress together
+    and HOLD collapses to zero. Longer mounts stretch HOLD only.
+
+  Variables:
+    label       (string, default "Retention")
+    start_value (number, default 82)
+    end_value   (number, default 34)
+-->
+<html
+  lang="en"
+  data-composition-id="decline-chart"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "label", "type": "string", "role": "content", "label": "Metric label", "description": "Label shown above the declining value.", "default": "Retention" },
+    { "id": "start_value", "type": "number", "role": "content", "label": "Start value", "description": "Metric value at the start of the decline.", "default": 82, "min": 0, "max": 100, "step": 1 },
+    { "id": "end_value", "type": "number", "role": "content", "label": "End value", "description": "Metric value at the bottom of the decline.", "default": 34, "min": 0, "max": 100, "step": 1 }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Decline Chart</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="decline-chart" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .dc-clip,
+          .dc-ambient,
+          .dc-gloom {
+            position: absolute;
+            inset: 0;
+          }
+
+          .dc-clip {
+            overflow: hidden;
+          }
+
+          .dc-ambient {
+            background:
+              radial-gradient(circle at 24% 16%, rgba(47, 129, 150, 0.55), transparent 46%),
+              linear-gradient(145deg, #152f3c 0%, #101a25 48%, #0c1118 100%);
+            transform: scale(1.02);
+            transform-origin: center;
+            will-change: filter;
+          }
+
+          .dc-gloom {
+            background: #030507;
+            opacity: 0;
+          }
+
+          .dc-layout {
+            position: absolute;
+            inset: 9cqh 9cqw 8cqh;
+            display: grid;
+            /* minmax(0, 1fr): a bare 1fr row inflates to the svg's intrinsic
+               aspect height (min-height auto), overflowing the card. */
+            grid-template-rows: auto minmax(0, 1fr);
+            gap: 5cqh;
+            opacity: 0;
+          }
+
+          .dc-header {
+            display: flex;
+            align-items: end;
+            justify-content: space-between;
+            gap: 5cqw;
+          }
+
+          .dc-label {
+            max-width: 58cqw;
+            overflow: hidden;
+            color: rgba(226, 232, 240, 0.72);
+            font-size: clamp(12px, 3.6cqh, 38px);
+            font-weight: 620;
+            letter-spacing: 0.05em;
+            line-height: 1.1;
+            text-overflow: ellipsis;
+            text-transform: uppercase;
+            white-space: nowrap;
+          }
+
+          .dc-value {
+            flex: 0 0 auto;
+            color: #f8fafc;
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: clamp(30px, 12cqh, 118px);
+            font-variant-numeric: tabular-nums;
+            font-weight: 760;
+            letter-spacing: -0.07em;
+            line-height: 0.8;
+          }
+
+          .dc-chart {
+            width: 100%;
+            height: 100%;
+            overflow: visible;
+          }
+
+          .dc-grid {
+            stroke: rgba(148, 163, 184, 0.18);
+            stroke-width: 1;
+            vector-effect: non-scaling-stroke;
+          }
+
+          .dc-line {
+            fill: none;
+            stroke: #fb7185;
+            stroke-linecap: round;
+            stroke-linejoin: round;
+            /* No non-scaling-stroke here: with preserveAspectRatio=none Chromium
+               applies the dash pattern in screen space, so the user-space
+               dasharray from getTotalLength() splits the draw into two visible
+               segments. Scaled stroke keeps dashes in user space. */
+            stroke-width: 4;
+          }
+
+          .dc-endpoint {
+            fill: #fecdd3;
+            opacity: 0;
+            transform-box: fill-box;
+            transform-origin: center;
+          }
+        </style>
+
+        <div
+          id="decline-chart-clip"
+          class="dc-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="dc-ambient"></div>
+          <div class="dc-gloom"></div>
+          <div class="dc-layout">
+            <div class="dc-header">
+              <div class="dc-label"></div>
+              <div class="dc-value"></div>
+            </div>
+            <svg
+              class="dc-chart"
+              viewBox="0 0 260 240"
+              preserveAspectRatio="none"
+              aria-hidden="true"
+            >
+              <line class="dc-grid" x1="8" y1="55" x2="252" y2="55"></line>
+              <line class="dc-grid" x1="8" y1="120" x2="252" y2="120"></line>
+              <line class="dc-grid" x1="8" y1="185" x2="252" y2="185"></line>
+              <path
+                class="dc-line"
+                d="M 8 24 C 28 28, 44 43, 61 56 S 93 76, 112 92 S 144 111, 163 134 S 193 159, 213 186 S 239 211, 252 222"
+              ></path>
+              <circle class="dc-endpoint" cx="252" cy="222" r="6"></circle>
+            </svg>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var layout = root.querySelector(".dc-layout");
+            var ambient = root.querySelector(".dc-ambient");
+            var gloom = root.querySelector(".dc-gloom");
+            var label = root.querySelector(".dc-label");
+            var value = root.querySelector(".dc-value");
+            var line = root.querySelector(".dc-line");
+            var endpoint = root.querySelector(".dc-endpoint");
+            var lineLength = line.getTotalLength();
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            line.style.strokeDasharray = lineLength + " " + lineLength;
+
+            var startValue = Number.isFinite(vars.start_value) ? vars.start_value : 82;
+            var endValue = Number.isFinite(vars.end_value) ? vars.end_value : 34;
+            var labelText = vars.label == null ? "Retention" : String(vars.label);
+
+            label.textContent = labelText;
+
+            var IN_BASE = 0.55;
+            var OUT_BASE = 0.45;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var fixedTotal = IN_BASE + OUT_BASE;
+            var phaseScale = duration < fixedTotal ? duration / fixedTotal : 1;
+            var IN = IN_BASE * phaseScale;
+            var OUT = OUT_BASE * phaseScale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var OUT_START = IN + HOLD;
+            var progress = { value: 0 };
+
+            function renderProgress() {
+              var p = progress.value;
+              line.style.strokeDashoffset = String(lineLength * (1 - p));
+              ambient.style.filter =
+                "saturate(" + (1 - p * 0.72) + ") brightness(" + (1 - p * 0.52) + ")";
+              gloom.style.opacity = String(p * 0.46);
+              endpoint.style.opacity = String(Math.max(0, (p - 0.94) / 0.06));
+              value.textContent = String(Math.round(startValue + (endValue - startValue) * p));
+            }
+
+            renderProgress();
+
+            var tl = gsap.timeline({ paused: true });
+            tl.fromTo(
+              layout,
+              { opacity: 0, y: "2.5cqh" },
+              { opacity: 1, y: 0, duration: IN, ease: "power2.out" },
+              0,
+            );
+
+            if (HOLD > 0) {
+              tl.to(
+                progress,
+                { value: 1, duration: HOLD, ease: "power2.out", onUpdate: renderProgress },
+                IN,
+              );
+            } else {
+              tl.call(
+                function () {
+                  progress.value = 1;
+                  renderProgress();
+                },
+                [],
+                IN,
+              );
+            }
+
+            tl.fromTo(
+              endpoint,
+              { scale: 0.72 },
+              { scale: 1, duration: OUT, ease: "power2.out" },
+              OUT_START,
+            );
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["decline-chart"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add decline-chart" />
+
+That writes one file: `compositions/components/decline-chart.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/decline-chart.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `data` `chart` `decline` `metric` `problem`.
+
+## 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/components/device-frame-stage.mdx b/docs/catalog/components/device-frame-stage.mdx
new file mode 100644
index 0000000000..9f03917d89
--- /dev/null
+++ b/docs/catalog/components/device-frame-stage.mdx
@@ -0,0 +1,508 @@
+---
+title: "Device Frame Stage"
+description: "A phone or tablet mockup staged as a physical scene prop with a screen slot for arbitrary reconstructed UI, rising onto the stage, settling, and holding an idle float"
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/device-frame-stage.html"
+  compositionId="device-frame-stage"
+  compositionSrc="compositions/components/device-frame-stage.html"
+  variables={[{"id":"device","type":"enum","role":"layout","label":"Device kind","default":"phone","options":[{"value":"phone","label":"Phone"},{"value":"tablet","label":"Tablet"}]},{"id":"cutout","type":"enum","role":"layout","label":"Camera cutout","default":"none","options":[{"value":"none","label":"None"},{"value":"island","label":"Island"},{"value":"notch","label":"Notch"}]},{"id":"body","type":"enum","role":"style","label":"Body material","default":"graphite","options":[{"value":"graphite","label":"Graphite"},{"value":"silver","label":"Silver"}]}]}
+>
+
+```html device-frame-stage.html
+<!doctype html>
+<html
+  lang="en"
+  data-composition-id="device-frame-stage"
+  data-composition-duration="5"
+  data-composition-variables='[
+    { "id": "device", "type": "enum", "role": "layout", "label": "Device kind", "default": "phone", "options": [{ "value": "phone", "label": "Phone" }, { "value": "tablet", "label": "Tablet" }] },
+    { "id": "cutout", "type": "enum", "role": "layout", "label": "Camera cutout", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "island", "label": "Island" }, { "value": "notch", "label": "Notch" }] },
+    { "id": "body", "type": "enum", "role": "style", "label": "Body material", "default": "graphite", "options": [{ "value": "graphite", "label": "Graphite" }, { "value": "silver", "label": "Silver" }] }
+  ]'
+>
+  <!--
+    Device Frame Stage, a HyperFrames video primitive.
+
+    Concept: a phone or tablet mockup treated as a physical scene prop, not a
+    screenshot border. It stages arbitrary reconstructed UI in a screen slot,
+    rises onto the stage as one rigid prop, settles, idles, and holds. The
+    frame serves the screen (device-frame-spec's governing law): no spinning
+    hardware reveal, glare sweep, or camera-lens tour, ever.
+
+    This file is a mountable HyperFrames sub-composition (see
+    skills/hyperframes-core/references/sub-compositions.md): a host
+    composition embeds it via a clip carrying data-composition-src, a
+    matching data-composition-id, and its own data-start / data-duration /
+    data-track-index / data-width / data-height. Everything the render needs
+    lives inside <template> below; the #root div's own data-width /
+    data-height are declarative reference metadata only (the linter's
+    root-dimensions contract) -- the CSS never reads them, and the device
+    sizes relative to whatever host box it actually lands in (cqh/cqw), so
+    it never needs to be opened or rendered standalone. See demo.html for
+    the reference mount.
+
+    Compiled from: fixture + mobile mechanics inventory #1 + device-frame-spec.md
+    (~/dev/hyperframes-corpus-data/mobile/device-frame-spec.md), the
+    authoritative geometry / material / entry-law source for this primitive.
+
+    Use when: a scene needs to stage mobile or tablet UI as a physical
+    product (hero product demo, gesture-led interaction, screen swap) rather
+    than a bare floating screenshot.
+
+    Variables (data-composition-variables above):
+      device  enum phone|tablet          default "phone"     canonical outer ratio + logical viewport
+      cutout  enum none|island|notch     default "none"      camera cutout; must match the installed screen content's safe area
+      body    enum graphite|silver       default "graphite"  device material tone
+
+    Envelope (IN / HOLD / OUT, elasticity lives in HOLD only, never gsap.timeScale):
+      IN   1.08s fixed  rise-and-settle: 0.18s pre-roll, 0.72s power3.out rise past rest, 0.18s power2.inOut settle
+      HOLD elastic      idle float loop (period 3.2s, +/-0.6cqh), stretches or compresses to fill whatever duration remains
+      OUT  0.56s fixed  sink, power2.in
+
+    Sync points (fixed offsets into IN/OUT, never inside the elastic HOLD):
+      device-settled   t = IN (end of the settle segment) — screen content may start animating here
+
+    Sound cues: one SFX hook, "device-settle-soft", fired as an `hf:sfx`
+    CustomEvent at the device-settled sync point (t = IN). The primitive
+    never plays audio itself; the host scene mixes the cue.
+  -->
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Device Frame Stage</title>
+    <!-- head is metadata for the source file only; the runtime only clones
+         <template> contents on mount (see sub-compositions.md), so the gsap
+         loader here exists purely for opening this file directly during
+         authoring -- a host composition already provides window.gsap. -->
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  </head>
+  <body>
+    <template>
+      <style>
+        *,
+        *::before,
+        *::after {
+          box-sizing: border-box;
+        }
+
+        /* INVARIANT: root is styled by #root, never a class -- the compiler
+           scopes CSS to [data-composition-id="device-frame-stage"] as a
+           descendant selector, so a rule keyed on the root's own class would
+           never match the root itself (see sub-compositions.md, Pitfall 3).
+           This primitive is elastic and fills whatever box a host clip
+           gives it, from a 960x540 slot up to a full 1920x1080 frame.
+
+           The width/height !important below is load-bearing, not decoration:
+           when this root gets inlined into a host, the compiler's
+           flatten step (prepareFlattenedInnerRoot) reads this element's own
+           data-width/data-height (required by the root_missing_dimensions
+           lint rule) and force-writes them back as an inline
+           style="width:1920px;height:1080px". Inline style beats a plain
+           stylesheet rule, so without !important the root would render at a
+           fixed 1920x1080 instead of filling the host box -- exactly the
+           2x-oversized-and-bleeding bug this primitive was fixed for. */
+        #root {
+          position: absolute;
+          inset: 0;
+          width: 100% !important;
+          height: 100% !important;
+          container-type: size;
+          isolation: isolate;
+        }
+
+        .device-stage {
+          --stage-perspective: 1600px;
+          position: absolute;
+          inset: 0;
+          perspective: var(--stage-perspective);
+          perspective-origin: 50% 50%;
+        }
+
+        .device-frame {
+          /* INVARIANT: geometry below is physical-material law from
+             device-frame-spec.md (corner/bezel/aspect percentages, gradient,
+             shadow), not brand paint. It may carry literal fallbacks per the
+             primitive's material exception; do not swap in --radius/--space-*. */
+          --device-color: #1b1d22;
+          --device-color-hi: #343740;
+          --device-color-dark: #111318;
+          --device-radius: 46px;
+          --device-bezel: 9px;
+          --screen-radius: calc(var(--device-radius) - var(--device-bezel));
+          --device-aspect: 9 / 19.5;
+          --device-y: 18cqh;
+          --device-scale: 0.94;
+
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          height: 90cqh;
+          aspect-ratio: var(--device-aspect);
+          border-radius: var(--device-radius);
+          padding: var(--device-bezel);
+          background: linear-gradient(
+            145deg,
+            var(--device-color-hi),
+            var(--device-color) 42%,
+            var(--device-color-dark)
+          );
+          border: 1px solid rgba(255, 255, 255, 0.22);
+          box-shadow:
+            0 52px 110px rgba(7, 10, 20, 0.3),
+            0 18px 38px rgba(7, 10, 20, 0.22),
+            0 3px 9px rgba(7, 10, 20, 0.16),
+            inset 0 1px 0 rgba(255, 255, 255, 0.24),
+            inset 0 0 0 1px rgba(0, 0, 0, 0.48);
+          transform: translate(-50%, calc(-50% + var(--device-y))) scale(var(--device-scale));
+          transform-style: preserve-3d;
+          transform-origin: 50% 88%;
+          will-change: transform;
+        }
+
+        /* EDIT ZONE: kind/cutout/body are driven by data-composition-variables
+           (see JS below); an installing agent may also override
+           --device-color / --device-color-hi / --device-color-dark inline for
+           a bespoke finish without touching the geometry laws. */
+        .device-frame[data-kind="tablet"] {
+          --device-radius: 48px;
+          --device-bezel: 16px;
+          --screen-radius: 34px;
+          --device-aspect: 3 / 4;
+          height: 82cqh;
+        }
+
+        .device-frame[data-body="silver"] {
+          --device-color: #c9cdd3;
+          --device-color-hi: #eef1f4;
+          --device-color-dark: #9a9ea6;
+        }
+
+        .device-screen {
+          position: relative;
+          width: 100%;
+          height: 100%;
+          overflow: hidden;
+          border-radius: var(--screen-radius);
+          background: var(--surface, #f5f6f8);
+          box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.42);
+          isolation: isolate;
+          container-type: size;
+        }
+
+        .screen-viewport {
+          /* Logical-pixel authoring space (390x844 phone / 768x1024 tablet),
+             uniformly scaled to the actual screen box by JS-measured
+             --screen-scale (device-frame-spec, "Screen content contract"). The
+             scale is scene setup, not animation. */
+          position: absolute;
+          left: 0;
+          top: 0;
+          width: calc(var(--logical-width, 390) * 1px);
+          height: calc(var(--logical-height, 844) * 1px);
+          transform-origin: 0 0;
+          transform: scale(var(--screen-scale, 1));
+        }
+
+        .screen-safe-area {
+          height: 100%;
+          box-sizing: border-box;
+          padding-top: calc(var(--logical-height, 844) * 1px * 0.03);
+        }
+
+        .device-frame[data-cutout="island"] .screen-safe-area {
+          padding-top: calc(var(--logical-height, 844) * 1px * 0.075);
+        }
+
+        .device-frame[data-cutout="notch"] .screen-safe-area {
+          padding-top: calc(var(--logical-height, 844) * 1px * 0.06);
+        }
+
+        .device-screen-slot {
+          position: relative;
+          width: 100%;
+          height: 100%;
+        }
+
+        /* Visible only while the slot is empty (comments do not count toward
+           :empty); vanishes the moment an installing agent drops real content
+           in, no cleanup required. */
+        .device-screen-slot:empty {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border: 1px dashed var(--border, rgba(15, 23, 42, 0.16));
+          border-radius: calc(var(--screen-radius) * 0.4);
+        }
+
+        .device-screen-slot:empty::before {
+          content: "screen slot: replace with reconstructed UI";
+          padding: var(--space-2, 16px);
+          color: var(--muted, #94a3b8);
+          font-family: var(--font-body, Inter, system-ui, sans-serif);
+          font-size: 15px;
+          text-align: center;
+        }
+
+        .device-cutout {
+          position: absolute;
+          left: 50%;
+          top: 0;
+          z-index: 50;
+          width: 0;
+          height: 0;
+          background: #050607;
+          pointer-events: none;
+          transform: translateX(-50%);
+        }
+
+        .device-frame[data-cutout="island"] .device-cutout {
+          top: 1.4%;
+          width: 28%;
+          height: 3.2%;
+          border-radius: 999px;
+        }
+
+        .device-frame[data-cutout="notch"] .device-cutout {
+          top: 0;
+          width: 52%;
+          height: 3.8%;
+          border-radius: 0 0 18px 18px;
+        }
+      </style>
+
+      <!-- data-width / data-height here satisfy the linter's root-dimensions
+           contract (root_missing_dimensions) and match every other
+           sub-composition's #root -- see sub-compositions.md's own
+           file-shape example. The compiler's flatten step also reads these
+           two attributes and force-writes them back as an inline
+           width/height style on mount, so #root's width/height !important
+           above is required to keep the rendered box elastic (fills the
+           host clip's actual box, from a 960x540 slot up to a full
+           1920x1080 frame) instead of a fixed 1920x1080. -->
+      <div
+        id="root"
+        data-composition-id="device-frame-stage"
+        data-width="1920"
+        data-height="1080"
+        data-duration="5"
+      >
+        <div class="device-stage">
+          <div class="device-frame" data-kind="phone" data-cutout="none" data-body="graphite">
+            <div class="device-screen">
+              <div class="screen-viewport">
+                <div class="screen-safe-area">
+                  <div class="device-screen-slot" data-screen-slot>
+                    <!-- EDIT ZONE: replace with reconstructed product UI, or
+                         nest a <div data-composition-src="..." data-duration="...">
+                         sub-composition host. Author content at the device's
+                         logical viewport (390x844 phone, 768x1024 tablet);
+                         this slot is pre-scaled for you, so keep coordinates
+                         in logical screen pixels, never canvas pixels. -->
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="device-cutout" aria-hidden="true"></div>
+          </div>
+        </div>
+      </div>
+
+      <script>
+        (function () {
+          "use strict";
+
+          var html = document.documentElement;
+          var root = document.getElementById("root");
+          var frame = root.querySelector(".device-frame");
+          var screen = root.querySelector(".device-screen");
+          var viewport = root.querySelector(".screen-viewport");
+
+          var declared = {};
+          try {
+            JSON.parse(html.getAttribute("data-composition-variables") || "[]").forEach(
+              function (variable) {
+                declared[variable.id] = variable.default;
+              },
+            );
+          } catch (error) {}
+          var vars = Object.assign({}, declared, window.__hfVariables || {});
+
+          var device = vars.device === "tablet" ? "tablet" : "phone";
+          var cutout = vars.cutout === "island" || vars.cutout === "notch" ? vars.cutout : "none";
+          var body = vars.body === "silver" ? "silver" : "graphite";
+
+          frame.setAttribute("data-kind", device);
+          frame.setAttribute("data-cutout", cutout);
+          frame.setAttribute("data-body", body);
+
+          var LOGICAL = { phone: [390, 844], tablet: [768, 1024] };
+          var logicalWidth = LOGICAL[device][0];
+          var logicalHeight = LOGICAL[device][1];
+          viewport.style.setProperty("--logical-width", String(logicalWidth));
+          viewport.style.setProperty("--logical-height", String(logicalHeight));
+
+          function updateScreenScale() {
+            var rect = screen.getBoundingClientRect();
+            if (rect.width > 0)
+              viewport.style.setProperty("--screen-scale", String(rect.width / logicalWidth));
+          }
+          updateScreenScale();
+          if (typeof ResizeObserver !== "undefined") {
+            new ResizeObserver(updateScreenScale).observe(screen);
+          }
+
+          // NOTE: the timeline registration key below is a literal string,
+          // not read from root.getAttribute("data-composition-id") -- when
+          // this file is mounted via data-composition-src, the compiler
+          // strips data-composition-id from the inlined root (the HOST
+          // clip keeps its own copy instead), so a live read here would
+          // return null and the host would never find this timeline (see
+          // sub-compositions.md, Pitfall 2). registry/test-scenes/slots/empty.html
+          // models the same literal-key pattern.
+          var compositionId = "device-frame-stage";
+          var duration = Math.max(
+            0.001,
+            parseFloat(
+              root.dataset.duration || html.getAttribute("data-composition-duration") || "5",
+            ),
+          );
+
+          // INVARIANT: IN/OUT durations are fixed by device-frame-spec's entry
+          // and exit law; only HOLD stretches or compresses to fit whatever
+          // duration the host gives this instance. Never gsap.timeScale().
+          var IN_DELAY = 0.18;
+          var IN_RISE = 0.72;
+          var IN_SETTLE = 0.18;
+          var IN_BASE = IN_DELAY + IN_RISE + IN_SETTLE; // 1.08s
+          var OUT_BASE = 0.56;
+          var totalBase = IN_BASE + OUT_BASE;
+          var IN = IN_BASE;
+          var OUT = OUT_BASE;
+          if (duration < totalBase) {
+            var shrink = duration / totalBase;
+            IN = IN_BASE * shrink;
+            OUT = OUT_BASE * shrink;
+          }
+          var HOLD = Math.max(0, duration - (IN + OUT));
+          var OUT_AT = IN + HOLD;
+          // SYNC POINT: device-settled fires at t = IN (fixed offset into IN,
+          // never inside the elastic HOLD).
+
+          function easeOutCubic(x) {
+            return 1 - Math.pow(1 - x, 3);
+          }
+          function easeInOutQuad(x) {
+            return x < 0.5 ? 2 * x * x : 1 - Math.pow(-2 * x + 2, 2) / 2;
+          }
+          function easeInQuad(x) {
+            return x * x;
+          }
+
+          function setPose(yCqh, scaleValue) {
+            frame.style.setProperty("--device-y", yCqh.toFixed(3) + "cqh");
+            frame.style.setProperty("--device-scale", scaleValue.toFixed(4));
+          }
+
+          function renderIn(t) {
+            var delayEnd = IN_DELAY * (IN / IN_BASE);
+            var riseEnd = delayEnd + IN_RISE * (IN / IN_BASE);
+            if (t <= delayEnd) {
+              setPose(18, 0.94);
+              return;
+            }
+            if (t <= riseEnd) {
+              var p = easeOutCubic(
+                Math.min(1, (t - delayEnd) / Math.max(0.0001, riseEnd - delayEnd)),
+              );
+              setPose(18 + (-1.2 - 18) * p, 0.94 + (1.01 - 0.94) * p);
+              return;
+            }
+            var p2 = easeInOutQuad(Math.min(1, (t - riseEnd) / Math.max(0.0001, IN - riseEnd)));
+            setPose(-1.2 + (0 - -1.2) * p2, 1.01 + (1 - 1.01) * p2);
+          }
+
+          // RETIME RANGE: the idle float is the only elastic segment. It
+          // repeats for as long as HOLD lasts, so stretching the host duration
+          // never re-times the fixed IN or OUT phases above.
+          function renderHold(holdT) {
+            var period = 3.2;
+            var amp = 0.6;
+            var phase = ((holdT % period) / period) * Math.PI * 2;
+            setPose(Math.sin(phase) * amp, 1);
+          }
+
+          function renderOut(p) {
+            var e = easeInQuad(Math.min(1, p));
+            setPose(0 + 18 * e, 1 + (0.96 - 1) * e);
+          }
+
+          function render(t) {
+            if (t <= IN) renderIn(t);
+            else if (t < OUT_AT) renderHold(t - IN);
+            else renderOut((t - OUT_AT) / Math.max(0.0001, OUT));
+          }
+
+          function fireSfx(id, atTime) {
+            root.dispatchEvent(
+              new CustomEvent("hf:sfx", { detail: { id: id, t: atTime }, bubbles: true }),
+            );
+          }
+
+          var proxy = { t: 0 };
+          var tl = gsap.timeline({ paused: true });
+          tl.to(proxy, {
+            t: duration,
+            duration: duration,
+            ease: "none",
+            onUpdate: function () {
+              render(proxy.t);
+            },
+          });
+          tl.call(
+            function () {
+              fireSfx("device-settle-soft", IN);
+            },
+            [],
+            IN,
+          );
+          tl.to({}, { duration: Math.max(0, duration - tl.duration()) });
+          render(0);
+          tl.seek(0);
+          window.__timelines = window.__timelines || {};
+          window.__timelines[compositionId] = tl;
+        })();
+      </script>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add device-frame-stage" />
+
+That writes one file: `compositions/components/device-frame-stage.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/device-frame-stage.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `prop` `device` `mobile` `tablet` `ui-props` `holdable`.
+
+## 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/components/directional-wipe.mdx b/docs/catalog/components/directional-wipe.mdx
new file mode 100644
index 0000000000..662b86dfaf
--- /dev/null
+++ b/docs/catalog/components/directional-wipe.mdx
@@ -0,0 +1,185 @@
+---
+title: "Directional Wipe"
+description: "A directional scene push that slides one panel over another."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/directional-wipe.html"
+  compositionId="directional-wipe"
+  compositionSrc="compositions/components/directional-wipe.html"
+  variables={[{"id":"palette","type":"enum","role":"style","label":"Palette","description":"Theme token for the ring marking the incoming panel. Slate rides --accent, teal --brand, ember --accent-2; each falls back to a neutral hairline.","default":"slate","options":[{"value":"slate","label":"Slate"},{"value":"teal","label":"Teal"},{"value":"ember","label":"Ember"}]},{"id":"corner","type":"enum","role":"style","label":"Corner","description":"Corner radius of the transition card.","default":"rounded","options":[{"value":"square","label":"Square"},{"value":"rounded","label":"Rounded"},{"value":"soft","label":"Soft"}]}]}
+>
+
+```html directional-wipe.html
+<!--
+  Directional Wipe - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+
+  Variables. The script below reads each one, falls back to the declared
+  default on anything missing or unrecognised, and writes the result as a
+  custom property the CSS consumes. The timeline recipe at the bottom is
+  untouched by them.
+
+    - palette (slate | teal | ember, default slate): ink of the ring that marks
+      the incoming panel. Both panels are monochrome placeholder material; the
+      ring is the one accent-coloured element. slate rides --accent, teal rides
+      --brand, ember rides --accent-2, and each falls back to a neutral hairline
+      so an unthemed composition renders in black and white.
+    - corner (square | rounded | soft, default rounded): corner radius of the
+      card. square is 0, rounded the original 30px, soft 56px.
+
+  On every default the motion is unchanged.
+-->
+
+<div
+  class="hf-remocn-directional-wipe"
+  data-composition-variables='[
+    { "id": "palette", "type": "enum", "role": "style", "label": "Palette", "description": "Theme token for the ring marking the incoming panel. Slate rides --accent, teal --brand, ember --accent-2; each falls back to a neutral hairline.", "default": "slate", "options": [{ "value": "slate", "label": "Slate" }, { "value": "teal", "label": "Teal" }, { "value": "ember", "label": "Ember" }] },
+    { "id": "corner", "type": "enum", "role": "style", "label": "Corner", "description": "Corner radius of the transition card.", "default": "rounded", "options": [{ "value": "square", "label": "Square" }, { "value": "rounded", "label": "Rounded" }, { "value": "soft", "label": "Soft" }] }
+  ]'
+>
+  <div class="scene from">Before</div>
+  <div class="scene to">Directional Wipe</div>
+  <div class="fx"></div>
+  <div class="rgb"></div>
+</div>
+
+<style>
+  .hf-remocn-directional-wipe {
+    --hf-accent: var(--accent, rgba(255, 255, 255, 0.28));
+    --hf-l1: rgba(255, 255, 255, 0.72);
+    --hf-l3: rgba(255, 255, 255, 0.18);
+    --hf-l4: rgba(255, 255, 255, 0.08);
+    --hf-hair: rgba(255, 255, 255, 0.14);
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-directional-wipe {
+    position: relative;
+    width: 760px;
+    height: 428px;
+    overflow: hidden;
+    border-radius: var(--hf-corner, 30px);
+    background: #111827;
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+  }
+  .hf-remocn-directional-wipe .scene {
+    position: absolute;
+    inset: 0;
+    display: grid;
+    place-items: center;
+    font-weight: 900;
+    font-size: 58px;
+    letter-spacing: -0.05em;
+    color: #fff;
+  }
+  .hf-remocn-directional-wipe .from {
+    background:
+      repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 4px),
+      var(--hf-l4);
+    transform: translate(var(--hf-from-x, 0px), var(--hf-from-y, 0px))
+      scale(var(--hf-from-scale, 1));
+    filter: blur(var(--hf-from-blur, 0px));
+  }
+  .hf-remocn-directional-wipe .to {
+    background:
+      repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 4px),
+      var(--hf-l3);
+    box-shadow: inset 0 0 0 2px var(--hf-accent);
+    transform: translate(var(--hf-to-x, 0px), var(--hf-to-y, 0px)) scale(var(--hf-to-scale, 1));
+    clip-path: inset(
+      var(--hf-clip-top, 0%) var(--hf-clip-right, 100%) var(--hf-clip-bottom, 0%)
+        var(--hf-clip-left, 0%)
+    );
+  }
+  .hf-remocn-directional-wipe .fx {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
+    mix-blend-mode: screen;
+    transform: translateX(var(--hf-fx-x, -110%));
+  }
+  .hf-remocn-directional-wipe .rgb {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    opacity: var(--hf-rgb-opacity, 0);
+    background: linear-gradient(
+      90deg,
+      rgba(239, 68, 68, 0.35),
+      transparent,
+      rgba(34, 211, 238, 0.35)
+    );
+    transform: translateX(var(--hf-rgb-x, 0px));
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides fall back to their declared defaults.
+    // Theme tokens only. The neutral fallback keeps an unthemed mount monochrome.
+    var HAIRLINE = "rgba(255, 255, 255, 0.28)";
+    var palettes = {
+      slate: "var(--accent, " + HAIRLINE + ")",
+      teal: "var(--brand, " + HAIRLINE + ")",
+      ember: "var(--accent-2, " + HAIRLINE + ")",
+    };
+    var corners = { square: "0px", rounded: "30px", soft: "56px" };
+
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var palette = palettes[pick(palettes, vars.palette, "slate")];
+    var corner = corners[pick(corners, vars.corner, "rounded")];
+
+    var roots = document.querySelectorAll(".hf-remocn-directional-wipe");
+    for (var i = 0; i < roots.length; i += 1) {
+      roots[i].style.setProperty("--hf-accent", palette);
+      roots[i].style.setProperty("--hf-corner", corner);
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-directional-wipe .to', { '--hf-clip-right': '100%', '--hf-to-x': '60px', '--hf-to-scale': 1.04 }, { '--hf-clip-right': '0%', '--hf-to-x': '0px', '--hf-to-scale': 1, duration: 0.9, ease: 'power3.inOut' }, startTime); tl.to('.hf-remocn-directional-wipe .from', { '--hf-from-x': '-70px', '--hf-from-scale': 0.96, '--hf-from-blur': '5px', duration: 0.9, ease: 'power3.inOut' }, startTime); tl.fromTo('.hf-remocn-directional-wipe .fx', { '--hf-fx-x': '-110%' }, { '--hf-fx-x': '110%', duration: 0.58, ease: 'power2.inOut' }, startTime + 0.18); tl.fromTo('.hf-remocn-directional-wipe .rgb', { '--hf-rgb-opacity': 0, '--hf-rgb-x': '-16px' }, { '--hf-rgb-opacity': 1, '--hf-rgb-x': '16px', repeat: 3, yoyo: true, duration: 0.07, ease: 'steps(1)' }, startTime + 0.32);
+-->
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add directional-wipe" />
+
+That writes one file: `compositions/components/directional-wipe.html`.
+
+## Usage
+
+Open `compositions/components/directional-wipe.html` and paste its contents into your composition. See the comment header in the file for timeline integration guidance.
+
+{/* hf:generated-footer */}
+
+Tagged `transition-primitive` `remocn-port`.
+
+## 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/components/drift-hold.mdx b/docs/catalog/components/drift-hold.mdx
new file mode 100644
index 0000000000..4d65ecc87c
--- /dev/null
+++ b/docs/catalog/components/drift-hold.mdx
@@ -0,0 +1,234 @@
+---
+title: "Drift Hold"
+description: "A centered content card stays subtly alive through loop-exact rotation, scale breathing, and a slow light sweep."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/drift-hold.html"
+  compositionId="drift-hold"
+  compositionSrc="compositions/components/drift-hold.html"
+  variables={[{"id":"text","type":"string","role":"content","label":"Text","description":"Text displayed in the default centered card.","default":"Always alive"},{"id":"intensity","type":"enum","role":"motion","label":"Intensity","description":"Amplitude of the ambient rotation, breathing, and light sweep.","default":"standard","options":[{"value":"whisper","label":"Whisper"},{"value":"standard","label":"Standard"}]}]}
+>
+
+```html drift-hold.html
+<!doctype html>
+<!--
+  drift-hold: HyperFrames video primitive (camera / ambient / hold)
+
+  Concept: a centered content card never becomes fully static. Sub-degree
+  rotation, restrained scale breathing, and a soft light sweep each follow
+  one complete sine cycle across the mounted duration.
+
+  Variables:
+    - text (string, default "Always alive"): the card label.
+    - intensity (whisper | standard, default "standard"): selects the
+      amplitudes for rotation, breathing, and the light sweep.
+
+  Envelope:
+    IN = 0s
+    HOLD = elastic = the complete mounted duration
+    OUT = 0s
+    HOLD owns exactly one whole cycle at every duration. The endpoint phase
+    is explicitly wrapped to zero so the pose at t=0 exactly equals the pose
+    at t=duration.
+
+  Mount contract: the runtime clones only this template. #root fills the
+  host box, establishes the container query basis, has no data-width or
+  data-height, and registers one paused timeline under the hardcoded
+  drift-hold id.
+-->
+<html
+  lang="en"
+  data-composition-id="drift-hold"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "text", "type": "string", "role": "content", "label": "Text", "description": "Text displayed in the default centered card.", "default": "Always alive" },
+    { "id": "intensity", "type": "enum", "role": "motion", "label": "Intensity", "description": "Amplitude of the ambient rotation, breathing, and light sweep.", "default": "standard", "options": [{ "value": "whisper", "label": "Whisper" }, { "value": "standard", "label": "Standard" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Drift Hold</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="drift-hold" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .dh-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+          }
+
+          .dh-card {
+            position: relative;
+            display: grid;
+            width: 68cqw;
+            min-height: 44cqh;
+            place-items: center;
+            overflow: hidden;
+            padding: var(--space-3, 5cqh) var(--space-3, 6cqw);
+            border: 0.16cqmin solid color-mix(in srgb, var(--border, #475569) 82%, transparent);
+            border-radius: var(--radius, 3.2cqmin);
+            background: color-mix(in srgb, var(--surface, #172033) 94%, var(--accent, #38bdf8));
+            box-shadow: 0 3.5cqh 10cqh color-mix(in srgb, var(--bg, #05070d) 58%, transparent);
+            transform-origin: 50% 50%;
+            will-change: transform;
+          }
+
+          .dh-sweep {
+            position: absolute;
+            top: -45%;
+            left: 42%;
+            width: 20cqw;
+            height: 190%;
+            background: linear-gradient(
+              90deg,
+              transparent 0%,
+              color-mix(in srgb, var(--accent, #38bdf8) 10%, transparent) 25%,
+              color-mix(in srgb, var(--fg, #f8fafc) 28%, transparent) 50%,
+              color-mix(in srgb, var(--accent, #38bdf8) 10%, transparent) 75%,
+              transparent 100%
+            );
+            filter: blur(1.8cqmin);
+            will-change: transform, opacity;
+          }
+
+          .dh-label {
+            position: relative;
+            z-index: 1;
+            max-width: 56cqw;
+            overflow: hidden;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: clamp(20px, 9cqmin, 76px);
+            font-weight: 720;
+            line-height: 1.05;
+            letter-spacing: -0.035em;
+            text-align: center;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+        </style>
+
+        <div
+          id="drift-hold-clip"
+          class="dh-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="dh-card">
+            <div class="dh-sweep" aria-hidden="true"></div>
+            <div class="dh-label"></div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var card = root.querySelector(".dh-card");
+            var sweep = root.querySelector(".dh-sweep");
+            var label = root.querySelector(".dh-label");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var text = vars.text == null ? "Always alive" : String(vars.text);
+            var intensity = vars.intensity === "whisper" ? "whisper" : "standard";
+            var amplitudes = {
+              whisper: { rotation: 0.24, scale: 0.006, sweep: 30, light: 0.04 },
+              standard: { rotation: 0.6, scale: 0.015, sweep: 42, light: 0.08 },
+            };
+            var motion = amplitudes[intensity];
+
+            label.textContent = text;
+
+            var TAU = Math.PI * 2;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var state = { phase: 0 };
+
+            function renderPose() {
+              // Literal phase zero at the endpoint removes floating point
+              // residue from Math.sin(2 * PI) and makes the seam exact.
+              var phase = state.phase === TAU ? 0 : state.phase;
+              var rotation = Math.sin(phase + Math.PI / 6) * motion.rotation;
+              var scale = 1 + Math.sin(phase + Math.PI / 2) * motion.scale;
+              var sweepX = Math.sin(phase - Math.PI / 2) * motion.sweep;
+              var sweepOpacity = 0.12 + Math.sin(phase + Math.PI / 3) * motion.light;
+
+              gsap.set(card, { rotation: rotation, scale: scale });
+              gsap.set(sweep, {
+                x: sweepX + "cqw",
+                rotation: 14,
+                opacity: sweepOpacity,
+              });
+            }
+
+            var tl = gsap.timeline({ paused: true });
+
+            // HOLD: uniform phase travel drives only whole-cycle sine motion.
+            tl.to(state, { phase: TAU, duration: duration, ease: "none", onUpdate: renderPose }, 0);
+
+            renderPose();
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["drift-hold"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add drift-hold" />
+
+That writes one file: `compositions/components/drift-hold.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/drift-hold.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `camera` `ambient` `drift` `hold` `loopable`.
+
+## 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/components/dynamic-grid.mdx b/docs/catalog/components/dynamic-grid.mdx
new file mode 100644
index 0000000000..1b30423dfd
--- /dev/null
+++ b/docs/catalog/components/dynamic-grid.mdx
@@ -0,0 +1,143 @@
+---
+title: "Dynamic Grid"
+description: "A responsive animated grid background driven by CSS variables for SaaS, code, and data scenes"
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/dynamic-grid.html"
+  compositionId="dynamic-grid"
+  compositionSrc="compositions/components/dynamic-grid.html"
+  variables={[{"id":"density","type":"enum","role":"style","label":"Density","description":"Cell size of the grid: fine reads as graph paper, coarse as a few large panels.","default":"standard","options":[{"value":"fine","label":"Fine"},{"value":"standard","label":"Standard"},{"value":"coarse","label":"Coarse"}]},{"id":"weight","type":"enum","role":"style","label":"Weight","description":"Thickness of the grid lines, from a hairline rule to a bold structural grid.","default":"hairline","options":[{"value":"hairline","label":"Hairline"},{"value":"standard","label":"Standard"},{"value":"bold","label":"Bold"}]},{"id":"tone","type":"enum","role":"style","label":"Tone","description":"Line colour: neutral is the translucent white the original ships with, and the accents ride --brand, --accent and --accent-2.","default":"neutral","options":[{"value":"neutral","label":"Neutral"},{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]}]}
+>
+
+```html dynamic-grid.html
+<!--
+  Dynamic Grid - animated background primitive.
+
+  Paste the grid as the first child of a scene. Animate --hf-grid-x,
+  --hf-grid-y, and --hf-grid-opacity from your paused GSAP timeline.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result as a custom property
+  the CSS consumes. The timeline recipe below is untouched by them: it keeps
+  driving the scroll offset and the opacity.
+
+    - density (fine | standard | coarse, default standard): cell size of the
+      grid, 44px, 72px or 112px. fine reads as graph paper, coarse as a few
+      large panels.
+    - weight (hairline | standard | bold, default hairline): line thickness,
+      1px, 2px or 3px.
+    - tone (neutral | green | blue | violet, default neutral): line colour.
+      neutral is the translucent white the original ships with, and the three
+      accents ride --brand, --accent and --accent-2.
+
+  On every default the result is identical to the original: 72px cells drawn
+  in 1px translucent white lines.
+-->
+
+<div
+  class="hf-dynamic-grid"
+  aria-hidden="true"
+  data-composition-variables='[
+    { "id": "density", "type": "enum", "role": "style", "label": "Density", "description": "Cell size of the grid: fine reads as graph paper, coarse as a few large panels.", "default": "standard", "options": [{ "value": "fine", "label": "Fine" }, { "value": "standard", "label": "Standard" }, { "value": "coarse", "label": "Coarse" }] },
+    { "id": "weight", "type": "enum", "role": "style", "label": "Weight", "description": "Thickness of the grid lines, from a hairline rule to a bold structural grid.", "default": "hairline", "options": [{ "value": "hairline", "label": "Hairline" }, { "value": "standard", "label": "Standard" }, { "value": "bold", "label": "Bold" }] },
+    { "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Line colour: neutral is the translucent white the original ships with, and the accents ride --brand, --accent and --accent-2.", "default": "neutral", "options": [{ "value": "neutral", "label": "Neutral" }, { "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] }
+  ]'
+></div>
+
+<style>
+  .hf-dynamic-grid {
+    --hf-grid-size: 72px;
+    --hf-grid-line: 1px;
+    --hf-grid-color: rgba(255, 255, 255, 0.16);
+    --hf-grid-x: 0px;
+    --hf-grid-y: 0px;
+    --hf-grid-opacity: 1;
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    opacity: var(--hf-grid-opacity);
+    background-image:
+      linear-gradient(var(--hf-grid-color) var(--hf-grid-line), transparent var(--hf-grid-line)),
+      linear-gradient(
+        90deg,
+        var(--hf-grid-color) var(--hf-grid-line),
+        transparent var(--hf-grid-line)
+      );
+    background-size: var(--hf-grid-size) var(--hf-grid-size);
+    background-position: var(--hf-grid-x) var(--hf-grid-y);
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var sizes = { fine: "44px", standard: "72px", coarse: "112px" };
+    var weights = { hairline: "1px", standard: "2px", bold: "3px" };
+    var tones = {
+      neutral: "rgba(255, 255, 255, 0.16)",
+      green: "color-mix(in srgb, var(--brand, #34d399) 34%, transparent)",
+      blue: "color-mix(in srgb, var(--accent, #38bdf8) 34%, transparent)",
+      violet: "color-mix(in srgb, var(--accent-2, #a78bfa) 34%, transparent)",
+    };
+
+    var size = sizes[pick(sizes, vars.density, "standard")];
+    var line = weights[pick(weights, vars.weight, "hairline")];
+    var color = tones[pick(tones, vars.tone, "neutral")];
+
+    var roots = document.querySelectorAll(".hf-dynamic-grid");
+    for (var i = 0; i < roots.length; i += 1) {
+      roots[i].style.setProperty("--hf-grid-size", size);
+      roots[i].style.setProperty("--hf-grid-line", line);
+      roots[i].style.setProperty("--hf-grid-color", color);
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+
+  tl.to(".hf-dynamic-grid", {
+    "--hf-grid-x": "72px",
+    "--hf-grid-y": "-72px",
+    duration: 6,
+    ease: "none",
+  }, 0);
+-->
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add dynamic-grid" />
+
+That writes one file: `compositions/components/dynamic-grid.html`.
+
+## Usage
+
+Open `compositions/components/dynamic-grid.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+
+{/* hf:generated-footer */}
+
+Tagged `video-primitive` `motion-primitive` `background` `grid` `ui`.
+
+## 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/components/echo-trail.mdx b/docs/catalog/components/echo-trail.mdx
new file mode 100644
index 0000000000..8851055d2a
--- /dev/null
+++ b/docs/catalog/components/echo-trail.mdx
@@ -0,0 +1,395 @@
+---
+title: "Echo Trail"
+description: "A moving element renders with N ghosted copies of itself at t minus i times delta, opacity stepped down per ghost; one traversal, echoes collapsing into the settled element at rest."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/echo-trail.html"
+  compositionId="echo-trail"
+  compositionSrc="compositions/components/echo-trail.html"
+  variables={[{"id":"echoes","type":"number","role":"style","label":"Echoes","description":"Ghost copy count, clamped 2 to 6.","default":4},{"id":"delta","type":"number","role":"timing","label":"Delta","description":"Lag between successive ghosts in seconds, clamped 0.03 to 0.3.","default":0.09},{"id":"path","type":"enum","role":"timing","label":"Path","description":"Authored traversal preset.","default":"sweep","options":[{"value":"sweep","label":"Sweep"},{"value":"rise","label":"Rise"},{"value":"arc","label":"Arc"}]},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Subject accent color: green rides --brand, blue rides --accent, violet rides --accent-2.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Optional departure. Default none: the settled element holds until the frame cuts.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
+>
+
+```html echo-trail.html
+<!doctype html>
+<!--
+  echo-trail: HyperFrames video primitive (trails)
+
+  The generalized onion skin: a moving element renders with N ghosted
+  copies of itself, each ghost showing the element where it was at
+  t minus i * delta, opacity stepped down per ghost. One traversal along
+  an authored path; as the element decelerates into rest the echoes
+  collapse into it and vanish, leaving a clean settled hold.
+
+  The subject is a SLOT. Callers supply content by placing an inert
+  template anywhere in the HOST page (templates never render, and the
+  runtime wipes the host clip's own children on mount, so the slot lives
+  at document level):
+
+    <template data-slot="echo-trail-subject"> ... </template>
+
+  Ghosts are deep clones of the subject content. With no slot, the
+  primitive renders a token card (surface, hairline border, accent dot,
+  two skeleton lines, contract tokens only).
+
+  Variables (declared in data-composition-variables below):
+    - echoes (number 2 to 6, default 4): ghost copy count.
+    - delta (number seconds, default 0.09, clamped 0.03 to 0.3): the lag
+      between successive ghosts.
+    - path ("sweep" | "rise" | "arc", default "sweep"): the authored
+      traversal preset.
+    - accent ("green" | "blue" | "violet", default "green"): green rides
+      --brand, blue rides --accent, violet rides --accent-2.
+    - exit ("none" | "fade" | "up", default "none"): frame roots own
+      transitions; the default holds the final frame to the last pixel.
+
+  Envelope, fixed IN and OUT with elastic HOLD only (never timeScale):
+    IN_BASE  = TRAVEL (2.1s) + echoes * delta + 0.2s settle; the lead
+               rests at TRAVEL and the last ghost has converged (and is
+               exactly invisible) by IN
+    HOLD     = max(0, D - IN - OUT)
+    OUT_BASE = 0.45s  only when exit != none
+    If D < IN_BASE + OUT_BASE, the whole envelope compresses together.
+
+  Determinism: ghost i's position at time t is path(ease(clamp01((t -
+  i * delta) / TRAVEL))) and its opacity is its stepped base times a pure
+  function of its distance to the lead; both are recomputed from
+  tl.time() on every update. No Math.random, no wall clock, no
+  incremental state, no requestAnimationFrame. Eventful seeks
+  (suppressEvents=false, the engine's render path) land identical frames
+  in any order and either direction; at rest every ghost is coincident
+  with the lead at opacity exactly zero, so the HOLD is truly still.
+
+  Mount contract: the runtime clones only this template. #root fills the
+  host box (no data-width/data-height, container-type: size, cqmin
+  units), is styled via #root only, and registers one paused timeline
+  under the LITERAL "echo-trail" key.
+-->
+<html
+  lang="en"
+  data-composition-id="echo-trail"
+  data-composition-duration="3.5"
+  data-composition-variables='[
+    { "id": "echoes", "type": "number", "role": "style", "label": "Echoes", "description": "Ghost copy count, clamped 2 to 6.", "default": 4 },
+    { "id": "delta", "type": "number", "role": "timing", "label": "Delta", "description": "Lag between successive ghosts in seconds, clamped 0.03 to 0.3.", "default": 0.09 },
+    { "id": "path", "type": "enum", "role": "timing", "label": "Path", "description": "Authored traversal preset.", "default": "sweep", "options": [{ "value": "sweep", "label": "Sweep" }, { "value": "rise", "label": "Rise" }, { "value": "arc", "label": "Arc" }] },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Subject accent color: green rides --brand, blue rides --accent, violet rides --accent-2.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the settled element holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Echo Trail</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="echo-trail" data-duration="3.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, "Inter", system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .et-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .et-stage {
+            position: absolute;
+            inset: 0;
+            will-change: transform, opacity;
+          }
+
+          .et-ghost,
+          .et-lead {
+            position: absolute;
+            left: 0;
+            top: 0;
+            will-change: opacity;
+          }
+
+          .et-ghost {
+            opacity: 0;
+          }
+
+          .et-lead {
+            opacity: 0;
+          }
+
+          .et-card {
+            width: 30cqmin;
+            padding: var(--space-3, 3cqmin);
+            display: grid;
+            gap: var(--space-2, 2cqmin);
+            border: 0.18cqmin solid var(--border, #475569);
+            border-radius: var(--radius, 2.4cqmin);
+            background: var(--surface, #14171c);
+            box-shadow: 0 1.6cqmin 5cqmin color-mix(in srgb, var(--bg, #000000) 30%, transparent);
+          }
+
+          .et-card-dot {
+            width: 3.2cqmin;
+            height: 3.2cqmin;
+            border-radius: 50%;
+            background: var(--et-accent);
+          }
+
+          .et-card-line {
+            height: 1.6cqmin;
+            border-radius: 0.8cqmin;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 16%, transparent);
+          }
+
+          .et-card-line.short {
+            width: 62%;
+          }
+        </style>
+
+        <div
+          id="echo-trail-clip"
+          class="et-clip clip"
+          data-start="0"
+          data-duration="3.5"
+          data-track-index="0"
+        >
+          <div class="et-stage">
+            <div class="et-lead">
+              <div class="et-card">
+                <div class="et-card-dot"></div>
+                <div class="et-card-line"></div>
+                <div class="et-card-line short"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".et-stage");
+            var lead = root.querySelector(".et-lead");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var echoesRaw = parseFloat(vars.echoes);
+            var echoes = isFinite(echoesRaw) ? Math.min(6, Math.max(2, Math.round(echoesRaw))) : 4;
+            var deltaRaw = parseFloat(vars.delta);
+            var deltaVar = isFinite(deltaRaw) ? Math.min(0.3, Math.max(0.03, deltaRaw)) : 0.09;
+            var pathName = vars.path === "rise" || vars.path === "arc" ? vars.path : "sweep";
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #52525b)",
+              blue: "var(--accent, #52525b)",
+              violet: "var(--accent-2, #52525b)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            root.style.setProperty("--et-accent", accentColors[accent]);
+
+            // SLOT. Caller templates live at HOST DOCUMENT level (the mount
+            // wipes host-clip children, and templates never render).
+            var hostDoc = root.ownerDocument;
+            var slotTemplate = null;
+            try {
+              slotTemplate = hostDoc.querySelector('template[data-slot="echo-trail-subject"]');
+            } catch (error) {
+              slotTemplate = null;
+            }
+            if (slotTemplate) {
+              lead.querySelector(".et-card").remove();
+              lead.appendChild(hostDoc.importNode(slotTemplate.content, true));
+            }
+
+            // Ghosts: deep clones of the subject, inserted BEFORE the lead
+            // so the lead always renders on top. ghosts[0] is the nearest
+            // past copy (highest stepped opacity).
+            var ghosts = [];
+            for (var g = 0; g < echoes; g += 1) {
+              var ghost = hostDoc.createElement("div");
+              ghost.className = "et-ghost";
+              ghost.setAttribute("aria-hidden", "true");
+              for (var c = 0; c < lead.children.length; c += 1) {
+                ghost.appendChild(lead.children[c].cloneNode(true));
+              }
+              stage.insertBefore(ghost, lead);
+              ghosts.push(ghost);
+            }
+
+            // Envelope: fixed IN/OUT, elastic HOLD, never time-scaled.
+            var TRAVEL_BASE = 2.1;
+            var IN_BASE = TRAVEL_BASE + echoes * deltaVar + 0.2;
+            var OUT_BASE = exit === "none" ? 0 : 0.45;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "3.5"));
+            var totalBase = Math.max(0.001, IN_BASE + OUT_BASE);
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var TRAVEL = TRAVEL_BASE * scale;
+            var delta = deltaVar * scale;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var OUT_START = IN + HOLD;
+
+            // Path presets in percent-of-stage coordinates; the subject is
+            // centered on the point via a one-time -50%/-50% translate.
+            function pathPoint(u) {
+              if (pathName === "rise") {
+                return { x: 50 + 6 * Math.sin(Math.PI * u), y: 76 - 44 * u };
+              }
+              if (pathName === "arc") {
+                return { x: 16 + 68 * u, y: 64 - 34 * Math.sin(Math.PI * u) };
+              }
+              // sweep: a shallow S from left to right through center.
+              return { x: 18 + 64 * u, y: 50 + 10 * Math.cos(Math.PI * u) };
+            }
+
+            function easeInOut(t) {
+              return t < 0.5 ? 2 * t * t : 1 - 2 * (1 - t) * (1 - t);
+            }
+            function clamp01(v) {
+              return v < 0 ? 0 : v > 1 ? 1 : v;
+            }
+
+            function posAt(timeSeconds) {
+              var u = easeInOut(clamp01(TRAVEL > 0 ? timeSeconds / TRAVEL : 1));
+              return pathPoint(u);
+            }
+
+            // One-time static transforms: center anchor plus a slight
+            // per-ghost scale step for depth. GSAP owns the transform, the
+            // per-update writes touch only left/top/opacity.
+            gsap.set(lead, { xPercent: -50, yPercent: -50 });
+            for (var i = 0; i < ghosts.length; i += 1) {
+              gsap.set(ghosts[i], {
+                xPercent: -50,
+                yPercent: -50,
+                scale: 1 - 0.015 * (i + 1),
+              });
+            }
+
+            // Stepped ghost bases: nearest past copy strongest.
+            var bases = [];
+            for (var b = 0; b < echoes; b += 1) {
+              bases.push(0.55 * (1 - b / echoes));
+            }
+
+            // Pure per-update apply: every position and every ghost alpha
+            // is a function of tl.time() alone. Ghost alpha is its stepped
+            // base times a separation ramp, so echoes are invisible before
+            // motion starts and collapse to exactly zero at rest. Writes
+            // are idempotent, so the HOLD repaints identically.
+            function applyTime(timeSeconds) {
+              var leadPos = posAt(timeSeconds);
+              gsap.set(lead, {
+                left: leadPos.x.toFixed(4) + "%",
+                top: leadPos.y.toFixed(4) + "%",
+              });
+              for (var n = 0; n < ghosts.length; n += 1) {
+                var p = posAt(timeSeconds - (n + 1) * delta);
+                var dist = Math.hypot(p.x - leadPos.x, p.y - leadPos.y);
+                var alpha = bases[n] * clamp01(dist / 2.2);
+                gsap.set(ghosts[n], {
+                  left: p.x.toFixed(4) + "%",
+                  top: p.y.toFixed(4) + "%",
+                  opacity: alpha < 0.002 ? 0 : alpha,
+                });
+              }
+            }
+
+            gsap.set(stage, { opacity: 1, y: "0cqh" });
+
+            var tl = gsap.timeline({
+              paused: true,
+              onUpdate: function () {
+                applyTime(tl.time());
+              },
+            });
+
+            // Anchor tween: an inert plain-object tween spanning the full
+            // authored duration so the timeline covers [0, D], onUpdate
+            // fires for every eventful seek, and holds never clamp short.
+            tl.to({ p: 0 }, { p: 1, duration: duration, ease: "none" }, 0);
+
+            // Lead entrance: both endpoints authored. Ghosts need no
+            // entrance; the separation ramp keeps them at zero until the
+            // traversal opens a gap.
+            tl.fromTo(
+              lead,
+              { opacity: 0 },
+              { opacity: 1, duration: 0.22 * scale, ease: "power2.out" },
+              0,
+            );
+
+            // HOLD: truly still. The lead rests at path(1) and every ghost
+            // is coincident at opacity exactly zero.
+
+            // OUT: optional departure; exit none holds until the frame cuts.
+            if (exit === "up") {
+              tl.to(stage, { y: "-4cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "fade") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            }
+
+            tl.seek(0);
+            applyTime(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["echo-trail"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add echo-trail" />
+
+That writes one file: `compositions/components/echo-trail.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/echo-trail.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `demonstrate` `trail` `onion-skin` `ghosts` `deterministic`.
+
+## 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/components/facet-morph.mdx b/docs/catalog/components/facet-morph.mdx
new file mode 100644
index 0000000000..203f68dee8
--- /dev/null
+++ b/docs/catalog/components/facet-morph.mdx
@@ -0,0 +1,593 @@
+---
+title: "Facet Morph"
+description: "A faceted low-poly mass of 36 triangles continuously reshapes between three authored silhouettes (blob, mark, badge) with per-facet flat shading that recomputes as the vertices move. Light reads from the upper left; lit facets lift toward a pale accent-tinted tone while turned-away facets fall toward near-black. One calm continuous morph, then a settled hold."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/facet-morph.html"
+  compositionId="facet-morph"
+  compositionSrc="compositions/components/facet-morph.html"
+  variables={[{"id":"forms","type":"string","role":"content","label":"Forms","description":"Comma-separated silhouette sequence from blob, mark, badge.","default":"blob,mark,badge"},{"id":"hold_last","type":"boolean","role":"timing","label":"Hold last","description":"True settles dead still on the final silhouette; false keeps the mass slowly breathing through the hold.","default":true},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Tint of the lit facets.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Outgoing transition. None holds the settled mass.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
+>
+
+```html facet-morph.html
+<!doctype html>
+<!--
+  facet-morph: HyperFrames video primitive (intros and reveals / morph)
+
+  Concept: a faceted low-poly mass (36 triangles, one SVG) continuously
+  reshapes between three authored silhouettes (blob, mark, badge) with
+  per-facet flat shading that recomputes as the vertices move. Light reads
+  from the upper left: facets turned toward it lift toward a pale accent-
+  tinted tone, facets turned away fall toward near-black. The register is
+  the ordinaryfolk reshaping-mass beat: one calm continuous morph, no pops.
+
+  Wave L, unit L2. Reference: motion-reference/ordinaryfolkco
+  2001090228958752945 sheet-02 (the continuously reshaping faceted mass).
+
+  Determinism: vertex positions are authored keyframe tables (per-silhouette
+  radius, jitter, and center rows) interpolated as a PURE FUNCTION of
+  timeline time. One linear driver tween owns the whole life of the mass;
+  its onUpdate recomputes every vertex and every facet fill from t alone,
+  so forward, backward, and shuffled seeks land byte-identical frames.
+  The wobble that keeps the mass alive is built from fixed-phase sine
+  terms (phases from a fixed-seed LCG, baked once at mount).
+
+  Paint law: facet geometry AND facet color are written as ATTRIBUTES
+  (points / fill / stroke) on every update. Nothing tweens a var() color
+  string and nothing relies on CSS repaint of SVG presentation properties
+  under seeks. Contract tokens are resolved to concrete rgb once at mount
+  (via a probe element), then mixed numerically in JS.
+
+  Variables (declared in data-composition-variables below):
+    - forms (string, default "blob,mark,badge"): comma-separated silhouette
+      sequence. Valid names: blob, mark, badge. Unknown names are dropped;
+      an empty result falls back to the default sequence.
+    - hold_last (boolean, default true): true decays the wobble and holds
+      the final silhouette dead still; false keeps the mass slowly
+      breathing between the last two silhouettes through the hold.
+    - accent (green | blue | violet, default green): tint of the lit
+      facets. green maps to --brand, blue to --accent, violet to --accent-2.
+    - exit (none | fade | up, default none): outgoing transition. none
+      holds the settled mass (frame roots own transitions).
+
+  Envelope (fixed IN/OUT, elastic HOLD only, never gsap.timeScale()):
+    IN       = 0.55s entrance + one 1.45s morph leg per silhouette step
+               (0.35s dwell between legs) + 0.55s wobble decay
+    HOLD     = elastic = max(0, D - (IN + OUT))
+    OUT      = 0.45s when exit is fade or up, 0 when exit is none
+    If D < IN + OUT, IN and OUT scale down together so IN + OUT == D.
+
+  Sync point: form-lock when the mass reaches its final silhouette
+  (3.95s at the 3-form default). Dispatches a bubbling hf:sfx CustomEvent
+  with id "facet-settle-soft" there. This primitive never plays audio.
+
+  Mount contract: MOUNTABLE SUB-COMPOSITION. The runtime clones only
+  <template> contents; #root fills the host box (inset:0, container-type:
+  size), has no data-width/data-height, and registers one paused timeline
+  under the literal "facet-morph" key. Variables come from
+  window.__hyperframes.getVariables().
+-->
+<html
+  lang="en"
+  data-composition-id="facet-morph"
+  data-composition-duration="5"
+  data-composition-variables='[
+    { "id": "forms", "type": "string", "role": "content", "label": "Forms", "description": "Comma-separated silhouette sequence from blob, mark, badge.", "default": "blob,mark,badge" },
+    { "id": "hold_last", "type": "boolean", "role": "timing", "label": "Hold last", "description": "True settles dead still on the final silhouette; false keeps the mass slowly breathing through the hold.", "default": true },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Tint of the lit facets.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Outgoing transition. None holds the settled mass.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Facet Morph</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="facet-morph" data-duration="5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            background: var(--bg, #0b0c0e);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+          }
+
+          .fm-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+          }
+
+          /* A very soft stage vignette keeps the mass grounded on flat
+             token backgrounds without inventing a light band (that is
+             light-sweep-pass territory). */
+          .fm-clip::before {
+            content: "";
+            position: absolute;
+            inset: 0;
+            background: radial-gradient(
+              ellipse at 42% 38%,
+              color-mix(in srgb, var(--fg, #f8fafc) 4%, transparent) 0%,
+              transparent 68%
+            );
+          }
+
+          .fm-stage {
+            display: grid;
+            place-items: center;
+            width: 100%;
+            height: 100%;
+            will-change: transform, opacity;
+          }
+
+          .fm-svg {
+            width: 74cqmin;
+            height: 74cqmin;
+            overflow: visible;
+          }
+
+          .fm-svg polygon {
+            stroke-width: 0.22;
+            stroke-linejoin: round;
+          }
+        </style>
+
+        <div
+          id="facet-morph-clip"
+          class="fm-clip clip"
+          data-start="0"
+          data-duration="5"
+          data-track-index="0"
+        >
+          <div class="fm-stage">
+            <svg
+              class="fm-svg"
+              viewBox="0 0 100 100"
+              role="img"
+              aria-label="Reshaping faceted mass"
+            >
+              <g class="fm-mesh"></g>
+            </svg>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var SVG_NS = "http://www.w3.org/2000/svg";
+            var root = document.getElementById("root");
+            // Literal id: mount flattening strips data-composition-id from the
+            // live root before this timeline registers.
+            var compositionId = "facet-morph";
+            var stage = root.querySelector(".fm-stage");
+            var mesh = root.querySelector(".fm-mesh");
+
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            /* ---------------- variables ---------------- */
+
+            var accentTokens = {
+              green: "var(--brand, #22c55e)",
+              blue: "var(--accent, #38bdf8)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentTokens, vars.accent)
+              ? vars.accent
+              : "green";
+            // The bundler mirrors composition variables as scoped CSS custom
+            // props, so this unit's own accent variable can shadow the contract
+            // --accent token ("blue" is a valid CSS color). When the shadow is
+            // present, fall back to the literal contract value.
+            var shadowedAccent = getComputedStyle(root).getPropertyValue("--accent").trim();
+            if (
+              shadowedAccent === "green" ||
+              shadowedAccent === "blue" ||
+              shadowedAccent === "violet"
+            ) {
+              accentTokens.blue = "#38bdf8";
+            }
+
+            var holdLast = !(vars.hold_last === false || vars.hold_last === "false");
+            // INVARIANT: only none | fade | up reaches the timeline.
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            /* ---------------- authored keyframe tables ----------------
+               Each silhouette is one row set: 18 outer radii, 18 outer
+               angular jitters (deg), 9 inner radii, 9 inner jitters (deg),
+               a center, and a whole-mass rotation (deg). Angles are fixed
+               spokes (outer every 20deg, inner every 40deg offset 20deg,
+               both starting at 12 o'clock), so any two rows interpolate
+               vertex-for-vertex. */
+
+            var FORMS = {
+              // Irregular craggy rock, the reference's opening mass.
+              blob: {
+                outerR: [34, 39, 31, 36, 41, 33, 29, 37, 40, 32, 35, 30, 38, 34, 28, 36, 39, 33],
+                outerJ: [3, -5, 6, -2, 4, -6, 2, 5, -4, 3, -3, 6, -5, 2, 4, -2, -6, 5],
+                innerR: [16, 19, 14, 20, 17, 13, 18, 15, 19],
+                innerJ: [8, -10, 12, -6, 9, -12, 7, 11, -8],
+                cx: 50,
+                cy: 51,
+                rot: 0,
+              },
+              // A peaked asymmetric shard, the reference's closing frames.
+              mark: {
+                outerR: [48, 40, 28, 22, 19, 17, 16, 17, 19, 21, 23, 22, 19, 17, 19, 25, 34, 44],
+                outerJ: [-2, 6, -8, 4, -3, 5, -6, 2, 4, -5, 3, -4, 6, -2, 5, -7, 3, -4],
+                innerR: [20, 13, 10, 8, 9, 8, 10, 11, 15],
+                innerJ: [-6, 9, -11, 7, -8, 10, -7, 6, -9],
+                cx: 50,
+                cy: 56,
+                rot: -7,
+              },
+              // A wide-shouldered shield settling toward a point.
+              badge: {
+                outerR: [36, 37, 35, 34, 33, 30, 27, 25, 24, 33, 24, 25, 27, 30, 33, 34, 35, 37],
+                outerJ: [0, 2, -2, 1, -1, 2, -2, 1, 3, 0, -3, -1, 2, -2, 1, -1, 2, -2],
+                innerR: [18, 17, 16, 13, 12, 12, 13, 16, 17],
+                innerJ: [4, -5, 6, -4, 5, -6, 4, -5, 6],
+                cx: 50,
+                cy: 49,
+                rot: 5,
+              },
+            };
+
+            var requested = String(vars.forms == null ? "" : vars.forms)
+              .split(",")
+              .map(function (name) {
+                return name.trim().toLowerCase();
+              })
+              .filter(function (name) {
+                return Object.prototype.hasOwnProperty.call(FORMS, name);
+              });
+            var formNames = requested.length > 0 ? requested : ["blob", "mark", "badge"];
+            var formRows = formNames.map(function (name) {
+              return FORMS[name];
+            });
+
+            /* ---------------- fixed-seed facet tables ----------------
+               Wobble phases and per-facet tilts come from one LCG baked at
+               mount. Same seed, same mesh, every mount. */
+
+            var OUTER = 18;
+            var INNER = 9;
+            var lcgState = 0x0f4c37ed;
+            function lcg() {
+              lcgState = (Math.imul(1664525, lcgState) + 1013904223) >>> 0;
+              return lcgState / 4294967296;
+            }
+            var outerPhase = [];
+            for (var i = 0; i < OUTER; i += 1) outerPhase.push(lcg());
+            var innerPhase = [];
+            for (var j = 0; j < INNER; j += 1) innerPhase.push(lcg());
+
+            /* Triangulation: for each inner vertex j, spokes a=2j, b=2j+1,
+               c=2j+2 close the outer ring band (27 triangles), then the
+               inner ring fans to the center (9 triangles). 36 facets. */
+            var facets = [];
+            for (var k = 0; k < INNER; k += 1) {
+              var a = 2 * k;
+              var b = 2 * k + 1;
+              var c = (2 * k + 2) % OUTER;
+              facets.push(["o", a, "o", b, "i", k]);
+              facets.push(["o", b, "o", c, "i", k]);
+              facets.push(["o", c, "i", k, "i", (k + 1) % INNER]);
+            }
+            for (var f = 0; f < INNER; f += 1) {
+              facets.push(["i", f, "i", (f + 1) % INNER, "c", 0]);
+            }
+            var facetTilt = facets.map(function () {
+              return (lcg() - 0.5) * 0.62;
+            });
+
+            var polygons = facets.map(function () {
+              var polygon = document.createElementNS(SVG_NS, "polygon");
+              mesh.appendChild(polygon);
+              return polygon;
+            });
+
+            /* ---------------- token color resolution ----------------
+               Resolve contract tokens to concrete rgb once at mount via a
+               probe element, then mix numerically. Facet fills are literal
+               rgb() attribute strings; no var() ever reaches a tween. */
+
+            var probe = document.createElement("span");
+            probe.style.display = "none";
+            root.appendChild(probe);
+            function resolveColor(cssColor, fallback) {
+              probe.style.color = fallback;
+              probe.style.color = cssColor;
+              var raw = getComputedStyle(probe).color;
+              var match = raw.match(/rgba?\(([^)]+)\)/);
+              if (!match) return [128, 128, 128];
+              var parts = match[1].split(/[,\s/]+/).map(Number);
+              return [parts[0] || 0, parts[1] || 0, parts[2] || 0];
+            }
+            var fgRgb = resolveColor("var(--fg, #f8fafc)", "#f8fafc");
+            var surfaceRgb = resolveColor("var(--surface, #14171c)", "#14171c");
+            var accentRgb = resolveColor(accentTokens[accent], "#22c55e");
+            probe.remove();
+
+            function mix(colorA, colorB, amount) {
+              var w = Math.max(0, Math.min(1, amount));
+              return [
+                colorA[0] + (colorB[0] - colorA[0]) * w,
+                colorA[1] + (colorB[1] - colorA[1]) * w,
+                colorA[2] + (colorB[2] - colorA[2]) * w,
+              ];
+            }
+            function rgbString(color) {
+              return (
+                "rgb(" +
+                Math.round(color[0]) +
+                "," +
+                Math.round(color[1]) +
+                "," +
+                Math.round(color[2]) +
+                ")"
+              );
+            }
+
+            // Base mass tone contrasts the background on light and dark
+            // hosts alike (fg-heavy). Lit facets climb toward a pale
+            // accent-tinted white; shadow facets fall toward black.
+            var baseRgb = mix(fgRgb, surfaceRgb, 0.24);
+            var litTarget = mix([255, 255, 255], accentRgb, 0.2);
+            var darkTarget = [8, 9, 11];
+
+            /* ---------------- envelope ---------------- */
+
+            var ENTER_BASE = 0.55;
+            var LEG_BASE = 1.45;
+            var DWELL_BASE = 0.35;
+            var DECAY_BASE = 0.55;
+            var steps = Math.max(0, formRows.length - 1);
+            var MORPH_BASE = steps > 0 ? steps * LEG_BASE + (steps - 1) * DWELL_BASE : 0;
+            var IN_BASE = ENTER_BASE + MORPH_BASE + DECAY_BASE;
+            var OUT_BASE = exit === "none" ? 0 : 0.45;
+
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "5"));
+            var totalBase = IN_BASE + OUT_BASE;
+            var envScale = duration < totalBase ? duration / totalBase : 1;
+            var ENTER = ENTER_BASE * envScale;
+            var LEG = LEG_BASE * envScale;
+            var DWELL = DWELL_BASE * envScale;
+            var DECAY = DECAY_BASE * envScale;
+            var IN = IN_BASE * envScale;
+            var OUT = OUT_BASE * envScale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var OUT_START = IN + HOLD;
+            var MORPH_START = ENTER * 0.55;
+            var MORPH_END = MORPH_START + (MORPH_BASE > 0 ? MORPH_BASE * envScale : 0);
+            var DECAY_END = MORPH_END + DECAY;
+
+            /* ---------------- pure functions of time ---------------- */
+
+            function smooth(s) {
+              // sine in-out, the quiet register's ease.
+              return 0.5 - 0.5 * Math.cos(Math.PI * Math.max(0, Math.min(1, s)));
+            }
+
+            // Form progress p(t): one leg per silhouette step with a dwell
+            // between legs, then (hold_last false) an endless slow breath
+            // between the last two silhouettes. Continuous everywhere.
+            function progressAt(t) {
+              if (steps === 0) return 0;
+              if (t <= MORPH_START) return 0;
+              var local = t - MORPH_START;
+              var span = LEG + DWELL;
+              for (var s = 0; s < steps; s += 1) {
+                var legStart = s * span;
+                if (local < legStart + LEG) {
+                  return s + smooth((local - legStart) / LEG);
+                }
+                if (local < legStart + span) return s + 1;
+              }
+              if (holdLast || steps < 1) return steps;
+              // Breathe between the final two forms: depth 0.45, 6s period,
+              // starting and ending each cycle exactly on the final form.
+              var breathe = t - MORPH_END;
+              return steps - 0.45 * (0.5 - 0.5 * Math.cos((2 * Math.PI * breathe) / 6));
+            }
+
+            // Wobble amplitude a(t): ramps in with the entrance, then decays
+            // to zero before the hold when hold_last is true.
+            function wobbleAmpAt(t) {
+              var ramp = smooth(t / Math.max(0.001, ENTER));
+              if (!holdLast) return ramp;
+              if (t <= MORPH_END) return ramp;
+              return ramp * (1 - smooth((t - MORPH_END) / Math.max(0.001, DECAY)));
+            }
+
+            var WOBBLE_R = 1.6; // radial wobble, viewBox units
+            var WOBBLE_HZ = 0.42;
+
+            function lerp(valueA, valueB, w) {
+              return valueA + (valueB - valueA) * w;
+            }
+
+            // Light arrives from the upper left.
+            var LIGHT_X = -0.62;
+            var LIGHT_Y = -0.78;
+
+            var outerPts = [];
+            for (var oi = 0; oi < OUTER; oi += 1) outerPts.push([0, 0]);
+            var innerPts = [];
+            for (var ii = 0; ii < INNER; ii += 1) innerPts.push([0, 0]);
+            var centerPt = [50, 50];
+
+            function render(t) {
+              var p = progressAt(t);
+              var kA = Math.max(0, Math.min(formRows.length - 1, Math.floor(p)));
+              var kB = Math.min(formRows.length - 1, kA + 1);
+              var w = Math.max(0, Math.min(1, p - kA));
+              var rowA = formRows[kA];
+              var rowB = formRows[kB];
+              var amp = wobbleAmpAt(t) * WOBBLE_R;
+              var cx = lerp(rowA.cx, rowB.cx, w);
+              var cy = lerp(rowA.cy, rowB.cy, w);
+              var rot = (lerp(rowA.rot, rowB.rot, w) * Math.PI) / 180;
+
+              for (var o = 0; o < OUTER; o += 1) {
+                var wobO = amp * Math.sin(2 * Math.PI * (WOBBLE_HZ * t + outerPhase[o]));
+                var radO = lerp(rowA.outerR[o], rowB.outerR[o], w) + wobO;
+                var angO =
+                  ((-90 + o * 20 + lerp(rowA.outerJ[o], rowB.outerJ[o], w)) * Math.PI) / 180 + rot;
+                outerPts[o][0] = cx + radO * Math.cos(angO);
+                outerPts[o][1] = cy + radO * Math.sin(angO);
+              }
+              for (var n = 0; n < INNER; n += 1) {
+                var wobI = amp * 0.7 * Math.sin(2 * Math.PI * (WOBBLE_HZ * t + innerPhase[n]));
+                var radI = lerp(rowA.innerR[n], rowB.innerR[n], w) + wobI;
+                var angI =
+                  ((-70 + n * 40 + lerp(rowA.innerJ[n], rowB.innerJ[n], w)) * Math.PI) / 180 + rot;
+                innerPts[n][0] = cx + radI * Math.cos(angI);
+                innerPts[n][1] = cy + radI * Math.sin(angI);
+              }
+              centerPt[0] = cx;
+              centerPt[1] = cy + amp * 0.4 * Math.sin(2 * Math.PI * (WOBBLE_HZ * t + 0.31));
+
+              for (var fi = 0; fi < facets.length; fi += 1) {
+                var facet = facets[fi];
+                var pts = "";
+                var sumX = 0;
+                var sumY = 0;
+                for (var v = 0; v < 3; v += 1) {
+                  var kind = facet[v * 2];
+                  var index = facet[v * 2 + 1];
+                  var pt =
+                    kind === "o" ? outerPts[index] : kind === "i" ? innerPts[index] : centerPt;
+                  pts += pt[0].toFixed(2) + "," + pt[1].toFixed(2) + (v < 2 ? " " : "");
+                  sumX += pt[0];
+                  sumY += pt[1];
+                }
+                var nx = sumX / 3 - cx;
+                var ny = sumY / 3 - cy;
+                var len = Math.hypot(nx, ny) || 1;
+                // Pseudo-normal: outward direction plus the facet's fixed
+                // tilt. Facets turned toward the upper-left light lift.
+                var shade = (nx / len) * LIGHT_X + (ny / len) * LIGHT_Y + facetTilt[fi];
+                shade = Math.max(-1, Math.min(1, shade));
+                var fill =
+                  shade >= 0
+                    ? mix(baseRgb, litTarget, shade * 0.85)
+                    : mix(baseRgb, darkTarget, -shade * 0.78);
+                var fillString = rgbString(fill);
+                var polygon = polygons[fi];
+                polygon.setAttribute("points", pts);
+                polygon.setAttribute("fill", fillString);
+                polygon.setAttribute("stroke", fillString);
+              }
+            }
+
+            /* ---------------- timeline ---------------- */
+
+            function fireSfx(id, t) {
+              root.dispatchEvent(
+                new CustomEvent("hf:sfx", { detail: { id: id, t: t }, bubbles: true }),
+              );
+            }
+
+            gsap.set(stage, { opacity: 0, scale: 0.94, y: 0 });
+            render(0);
+
+            var tl = gsap.timeline({ paused: true });
+
+            // ONE linear driver owns every vertex and every fill; render is a
+            // pure function of the driver's time.
+            var driver = { t: 0 };
+            tl.fromTo(
+              driver,
+              { t: 0 },
+              {
+                t: duration,
+                duration: duration,
+                ease: "none",
+                onUpdate: function () {
+                  render(driver.t);
+                },
+              },
+              0,
+            );
+
+            // IN: quiet entrance while the wobble ramps up.
+            tl.to(stage, { opacity: 1, duration: ENTER, ease: "power2.out" }, 0);
+            tl.to(stage, { scale: 1, duration: ENTER * 1.4, ease: "power2.out" }, 0);
+
+            tl.call(
+              function () {
+                fireSfx("facet-settle-soft", MORPH_END);
+              },
+              [],
+              MORPH_END,
+            );
+
+            // HOLD: still (hold_last true) or the slow breath, both inside
+            // the driver's pure function. No extra tweens.
+
+            // OUT: only when the exit variable asks for one.
+            if (exit !== "none") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+              if (exit === "up") {
+                tl.to(stage, { y: "-6cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              }
+            }
+
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add facet-morph" />
+
+That writes one file: `compositions/components/facet-morph.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/facet-morph.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `intro` `morph` `low-poly` `svg` `deterministic`.
+
+## 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/components/fade-through.mdx b/docs/catalog/components/fade-through.mdx
new file mode 100644
index 0000000000..b48dba0cd9
--- /dev/null
+++ b/docs/catalog/components/fade-through.mdx
@@ -0,0 +1,135 @@
+---
+title: "Fade Through"
+description: "A calm transition primitive that fades one layer out, passes through a wash, and reveals the next layer"
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/fade-through.html"
+  compositionId="fade-through"
+  compositionSrc="compositions/components/fade-through.html"
+  variables={[{"id":"wash","type":"enum","role":"style","label":"Wash","description":"Colour of the mid-transition frame. Paper resolves through --hf-fade-through-wash, accent rides --accent.","default":"paper","options":[{"value":"paper","label":"Paper"},{"value":"white","label":"White"},{"value":"ink","label":"Ink"},{"value":"accent","label":"Accent"}]},{"id":"strength","type":"number","role":"style","label":"Strength","description":"How far the wash covers at its peak. 1 is a full flash, 0.3 a light veil.","default":1,"min":0.1,"max":1,"step":0.05},{"id":"shape","type":"enum","role":"style","label":"Shape","description":"Flat fills the frame evenly, bloom concentrates the wash in the centre.","default":"flat","options":[{"value":"flat","label":"Flat"},{"value":"bloom","label":"Bloom"}]}]}
+>
+
+```html fade-through.html
+<!--
+  Fade Through - scene transition primitive.
+
+  Put class="hf-fade-through-out" on the outgoing layer and
+  class="hf-fade-through-in" on the incoming layer. Add the optional wash
+  overlay below when you want a brighter mid-transition frame.
+
+  Variables. The wash is the only surface this primitive paints, so all three
+  describe it. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result as a custom property
+  the CSS above consumes. The timeline recipe below is untouched by them.
+
+    - wash (paper | white | ink | accent, default paper): the colour of the
+      mid-transition frame. paper still resolves through
+      --hf-fade-through-wash, so an existing override keeps working; accent
+      rides --accent.
+    - strength (number 0.1 to 1, default 1): how far the wash is allowed to
+      cover at its peak. 1 is a full flash, 0.3 a light veil over the cut.
+    - shape (flat | bloom, default flat): flat fills the frame evenly, bloom
+      concentrates the wash in the centre and falls off to the edges.
+
+  On every default the result is identical to the original: a flat, fully
+  opaque #f8f5ec wash.
+-->
+
+<div
+  class="hf-fade-through-wash"
+  aria-hidden="true"
+  data-composition-variables='[
+    { "id": "wash", "type": "enum", "role": "style", "label": "Wash", "description": "Colour of the mid-transition frame. Paper resolves through --hf-fade-through-wash, accent rides --accent.", "default": "paper", "options": [{ "value": "paper", "label": "Paper" }, { "value": "white", "label": "White" }, { "value": "ink", "label": "Ink" }, { "value": "accent", "label": "Accent" }] },
+    { "id": "strength", "type": "number", "role": "style", "label": "Strength", "description": "How far the wash covers at its peak. 1 is a full flash, 0.3 a light veil.", "default": 1, "min": 0.1, "max": 1, "step": 0.05 },
+    { "id": "shape", "type": "enum", "role": "style", "label": "Shape", "description": "Flat fills the frame evenly, bloom concentrates the wash in the centre.", "default": "flat", "options": [{ "value": "flat", "label": "Flat" }, { "value": "bloom", "label": "Bloom" }] }
+  ]'
+></div>
+
+<style>
+  .hf-fade-through-in {
+    opacity: 0;
+  }
+  .hf-fade-through-wash {
+    position: absolute;
+    inset: 0;
+    opacity: 0;
+    pointer-events: none;
+    background: var(--hf-fade-through-paint, var(--hf-fade-through-wash, #f8f5ec));
+    filter: opacity(var(--hf-fade-through-strength, 1));
+    z-index: 900;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    var washes = {
+      paper: "var(--hf-fade-through-wash, #f8f5ec)",
+      white: "#ffffff",
+      ink: "#0b0b0f",
+      accent: "var(--accent, #38bdf8)",
+    };
+
+    var wash = Object.prototype.hasOwnProperty.call(washes, vars.wash) ? vars.wash : "paper";
+    var shape = vars.shape === "bloom" ? "bloom" : "flat";
+
+    var strength = parseFloat(vars.strength);
+    if (!isFinite(strength)) strength = 1;
+    strength = Math.min(1, Math.max(0.1, strength));
+
+    var colour = washes[wash];
+    var paint =
+      shape === "bloom"
+        ? "radial-gradient(circle at 50% 50%, " + colour + " 0%, transparent 72%)"
+        : colour;
+
+    var overlays = document.querySelectorAll(".hf-fade-through-wash");
+    for (var i = 0; i < overlays.length; i += 1) {
+      overlays[i].style.setProperty("--hf-fade-through-paint", paint);
+      overlays[i].style.setProperty("--hf-fade-through-strength", String(strength));
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+
+  tl.to(".hf-fade-through-out", { opacity: 0, duration: 0.45, ease: "power2.inOut" }, startTime);
+  tl.to(".hf-fade-through-wash", { opacity: 1, duration: 0.35, ease: "power2.inOut" }, startTime);
+  tl.to(".hf-fade-through-wash", { opacity: 0, duration: 0.45, ease: "power2.inOut" }, startTime + 0.35);
+  tl.to(".hf-fade-through-in", { opacity: 1, duration: 0.55, ease: "power2.out" }, startTime + 0.35);
+-->
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add fade-through" />
+
+That writes one file: `compositions/components/fade-through.html`.
+
+## Usage
+
+Open `compositions/components/fade-through.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `transition` `fade` `scene`.
+
+## 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/components/focus-blur-resolve.mdx b/docs/catalog/components/focus-blur-resolve.mdx
new file mode 100644
index 0000000000..f3dbe02912
--- /dev/null
+++ b/docs/catalog/components/focus-blur-resolve.mdx
@@ -0,0 +1,130 @@
+---
+title: "Focus Blur Resolve"
+description: "A premium focus pull from heavy blur to crisp text, then a soft blur-out exit."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/focus-blur-resolve.html"
+  compositionId="focus-blur-resolve"
+  compositionSrc="compositions/components/focus-blur-resolve.html"
+  variables={[{"id":"tone","type":"enum","role":"style","label":"Tone","description":"Word colour: ink for light frames, paper for dark ones, accent rides --brand.","default":"ink","options":[{"value":"ink","label":"Ink"},{"value":"paper","label":"Paper"},{"value":"accent","label":"Accent"}]},{"id":"size","type":"enum","role":"style","label":"Size","description":"Type size of the words, from a caption-scale line to a full display card.","default":"standard","options":[{"value":"compact","label":"Compact"},{"value":"standard","label":"Standard"},{"value":"display","label":"Display"}]},{"id":"blur","type":"enum","role":"style","label":"Blur","description":"Scales the blur radius the timeline drives, so the focus pull starts as a light haze or a full smear.","default":"standard","options":[{"value":"soft","label":"Soft"},{"value":"standard","label":"Standard"},{"value":"heavy","label":"Heavy"}]}]}
+>
+
+```html focus-blur-resolve.html
+<!--
+  Focus Blur Resolve - remocn typography primitive for HyperFrames.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result as a custom property
+  the CSS consumes. The timeline recipe below is untouched by them: it keeps
+  driving one scale and one blur, and these decide how big the words are, what
+  colour they resolve to, and how deep the blur they resolve from goes.
+
+    - tone (ink | paper | accent, default ink): word colour. ink is near-black
+      for light frames, paper near-white for dark ones, accent rides --brand.
+    - size (compact | standard | display, default standard): type size, 40px,
+      56px or 84px.
+    - blur (soft | standard | heavy, default standard): scales the blur radius,
+      so the pull starts as a light haze or a full smear over the same run.
+
+  On every default the result is identical to the original: near-black 56px
+  words resolving out of a 16px blur.
+-->
+
+<div
+  class="hf-remocn-focus-blur-resolve"
+  data-composition-variables='[
+    { "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Word colour: ink for light frames, paper for dark ones, accent rides --brand.", "default": "ink", "options": [{ "value": "ink", "label": "Ink" }, { "value": "paper", "label": "Paper" }, { "value": "accent", "label": "Accent" }] },
+    { "id": "size", "type": "enum", "role": "style", "label": "Size", "description": "Type size of the words, from a caption-scale line to a full display card.", "default": "standard", "options": [{ "value": "compact", "label": "Compact" }, { "value": "standard", "label": "Standard" }, { "value": "display", "label": "Display" }] },
+    { "id": "blur", "type": "enum", "role": "style", "label": "Blur", "description": "Scales the blur radius the timeline drives, so the focus pull starts as a light haze or a full smear.", "default": "standard", "options": [{ "value": "soft", "label": "Soft" }, { "value": "standard", "label": "Standard" }, { "value": "heavy", "label": "Heavy" }] }
+  ]'
+>
+  <span>Crystal</span><span>clear</span>
+</div>
+
+<style>
+  .hf-remocn-focus-blur-resolve {
+    color: var(--hf-word-color, #18181b);
+    font-family: Inter, system-ui, sans-serif;
+    font-weight: 900;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-focus-blur-resolve {
+    display: inline-flex;
+    gap: 12px;
+    font-size: var(--hf-word-size, 56px);
+    line-height: 1;
+  }
+  .hf-remocn-focus-blur-resolve span {
+    display: inline-block;
+    transform: translate(var(--hf-word-x, 0px), var(--hf-word-y, 0px))
+      scale(var(--hf-word-scale, 1));
+    filter: blur(calc(var(--hf-word-blur, 0px) * var(--hf-word-blur-scale, 1)));
+    will-change: transform, filter, opacity;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var tones = { ink: "#18181b", paper: "#fafafa", accent: "var(--brand, #34d399)" };
+    var sizes = { compact: "40px", standard: "56px", display: "84px" };
+    var blurScales = { soft: 0.45, standard: 1, heavy: 2.2 };
+
+    var tone = tones[pick(tones, vars.tone, "ink")];
+    var size = sizes[pick(sizes, vars.size, "standard")];
+    var blurScale = blurScales[pick(blurScales, vars.blur, "standard")];
+
+    var roots = document.querySelectorAll(".hf-remocn-focus-blur-resolve");
+    for (var i = 0; i < roots.length; i += 1) {
+      roots[i].style.setProperty("--hf-word-color", tone);
+      roots[i].style.setProperty("--hf-word-size", size);
+      roots[i].style.setProperty("--hf-word-blur-scale", String(blurScale));
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-focus-blur-resolve span', { opacity: 0, '--hf-word-scale': 1.08, '--hf-word-blur': '16px' }, { opacity: 1, '--hf-word-scale': 1, '--hf-word-blur': '0px', duration: 0.52, stagger: 0.05, ease: 'power3.out' }, startTime);
+-->
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add focus-blur-resolve" />
+
+That writes one file: `compositions/components/focus-blur-resolve.html`.
+
+## Usage
+
+Open `compositions/components/focus-blur-resolve.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `remocn-port` `typography`.
+
+## 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/components/focus-rack.mdx b/docs/catalog/components/focus-rack.mdx
new file mode 100644
index 0000000000..aae40876ea
--- /dev/null
+++ b/docs/catalog/components/focus-rack.mdx
@@ -0,0 +1,372 @@
+---
+title: "Focus Rack"
+description: "Focus shifts once between two cards at different apparent depths through synchronized blur, dimming, scale, and parallax."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/focus-rack.html"
+  compositionId="focus-rack"
+  compositionSrc="compositions/components/focus-rack.html"
+  variables={[{"id":"label_a","type":"string","role":"content","label":"Card A label","description":"Label on the card that begins in focus.","default":"Draft"},{"id":"label_b","type":"string","role":"content","label":"Card B label","description":"Label on the card that receives focus.","default":"Published"},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Highlight color shared by both cards.","default":"blue","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]}]}
+>
+
+```html focus-rack.html
+<!doctype html>
+<!--
+  focus-rack: HyperFrames video primitive (camera / holdable / emphasize)
+
+  Concept: two cards sit at different apparent depths. Card A begins sharp
+  and near while card B is blurred and dim. Focus moves to card B exactly
+  once, with blur, scale, and parallax changing together over 0.7 seconds.
+
+  Variables:
+    - label_a (string, default "Draft"): foreground card label.
+    - label_b (string, default "Published"): background card label.
+    - accent (green | blue | violet, default "blue"): focus highlight.
+
+  Envelope (fixed IN/OUT, elastic HOLD only, never gsap.timeScale()):
+    IN_BASE  = 1.32s  stage reveal, initial focus beat, then one 0.7s rack
+    HOLD     = elastic card B remains sharp with a restrained depth drift
+    OUT_BASE = 0.42s  completed focus state fades from the stage
+    If D is shorter than IN_BASE plus OUT_BASE, both fixed phases compress
+    proportionally and HOLD becomes zero. The rack still occurs exactly once.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, has no data-width or data-height,
+  and registers one paused timeline under the hardcoded focus-rack id.
+-->
+<html
+  lang="en"
+  data-composition-id="focus-rack"
+  data-composition-duration="3.5"
+  data-composition-variables='[
+    { "id": "label_a", "type": "string", "role": "content", "label": "Card A label", "description": "Label on the card that begins in focus.", "default": "Draft" },
+    { "id": "label_b", "type": "string", "role": "content", "label": "Card B label", "description": "Label on the card that receives focus.", "default": "Published" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Highlight color shared by both cards.", "default": "blue", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Focus Rack</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="focus-rack" data-duration="3.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            background: var(--bg, #0b0c0e);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .fr-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            background: radial-gradient(
+              ellipse at 52% 48%,
+              color-mix(in srgb, var(--fr-accent) 12%, var(--surface, #18202d)) 0%,
+              var(--bg, #0b0c0e) 72%
+            );
+          }
+
+          .fr-stage {
+            position: absolute;
+            inset: 0;
+            perspective: 120cqw;
+            opacity: 0;
+          }
+
+          .fr-card {
+            --fr-blur: 0;
+            position: absolute;
+            top: 21cqh;
+            width: 39cqw;
+            height: 58cqh;
+            padding: 4.2cqh 3.4cqw;
+            overflow: hidden;
+            border: 0.1cqw solid color-mix(in srgb, var(--fr-accent) 28%, #cbd5e1);
+            border-radius: 2.4cqmin;
+            background: linear-gradient(145deg, #ffffff, #e9edf4);
+            box-shadow:
+              0 4.4cqh 10cqh rgba(0, 0, 0, 0.42),
+              inset 0 0.12cqh 0 rgba(255, 255, 255, 0.86);
+            color: #101827;
+            filter: blur(calc(var(--fr-blur) * 1cqw));
+            transform-origin: 50% 50%;
+            will-change: transform, opacity, filter;
+          }
+
+          .fr-card-a {
+            left: 8cqw;
+          }
+
+          .fr-card-b {
+            right: 8cqw;
+          }
+
+          .fr-card-top {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+          }
+
+          .fr-kicker {
+            display: flex;
+            align-items: center;
+            gap: 0.8cqw;
+            color: #667085;
+            font-size: 1.15cqw;
+            font-weight: 760;
+            letter-spacing: 0.13em;
+            line-height: 1;
+            text-transform: uppercase;
+          }
+
+          .fr-dot {
+            width: 0.75cqw;
+            aspect-ratio: 1;
+            border-radius: 50%;
+            background: var(--fr-accent);
+            box-shadow: 0 0 1.4cqw color-mix(in srgb, var(--fr-accent) 52%, transparent);
+          }
+
+          .fr-index {
+            color: #98a2b3;
+            font-family: var(--font-mono, ui-monospace, monospace);
+            font-size: 1.05cqw;
+            font-weight: 700;
+          }
+
+          .fr-label {
+            margin-top: 7.4cqh;
+            max-width: 100%;
+            overflow: hidden;
+            color: #101827;
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: 4.8cqw;
+            font-weight: 790;
+            letter-spacing: -0.055em;
+            line-height: 0.94;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          .fr-rule {
+            width: 100%;
+            height: 0.35cqh;
+            margin-top: 5cqh;
+            border-radius: 99cqh;
+            background: color-mix(in srgb, var(--fr-accent) 76%, #d0d5dd);
+          }
+
+          .fr-copy {
+            display: grid;
+            gap: 1.4cqh;
+            margin-top: 3.2cqh;
+          }
+
+          .fr-line {
+            display: block;
+            height: 1.15cqh;
+            border-radius: 99cqh;
+            background: #c9d0dc;
+          }
+
+          .fr-line:last-child {
+            width: 68%;
+          }
+        </style>
+
+        <div
+          id="focus-rack-clip"
+          class="fr-clip clip"
+          data-start="0"
+          data-duration="3.5"
+          data-track-index="0"
+        >
+          <div class="fr-stage">
+            <article class="fr-card fr-card-a">
+              <div class="fr-card-top">
+                <span class="fr-kicker"><span class="fr-dot"></span>Workspace</span>
+                <span class="fr-index">A</span>
+              </div>
+              <div class="fr-label fr-label-a"></div>
+              <div class="fr-rule"></div>
+              <div class="fr-copy" aria-hidden="true">
+                <span class="fr-line"></span>
+                <span class="fr-line"></span>
+              </div>
+            </article>
+
+            <article class="fr-card fr-card-b">
+              <div class="fr-card-top">
+                <span class="fr-kicker"><span class="fr-dot"></span>Workspace</span>
+                <span class="fr-index">B</span>
+              </div>
+              <div class="fr-label fr-label-b"></div>
+              <div class="fr-rule"></div>
+              <div class="fr-copy" aria-hidden="true">
+                <span class="fr-line"></span>
+                <span class="fr-line"></span>
+              </div>
+            </article>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".fr-stage");
+            var cardA = root.querySelector(".fr-card-a");
+            var cardB = root.querySelector(".fr-card-b");
+            var labelA = root.querySelector(".fr-label-a");
+            var labelB = root.querySelector(".fr-label-b");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var accent = vars.accent === "green" || vars.accent === "violet" ? vars.accent : "blue";
+            var accents = { green: "#34d399", blue: "#60a5fa", violet: "#a78bfa" };
+
+            labelA.textContent = vars.label_a == null ? "Draft" : String(vars.label_a);
+            labelB.textContent = vars.label_b == null ? "Published" : String(vars.label_b);
+            root.style.setProperty("--fr-accent", accents[accent]);
+
+            var IN_BASE = 1.32;
+            var OUT_BASE = 0.42;
+            var STAGE_IN_BASE = 0.38;
+            var RACK_AT_BASE = 0.62;
+            var RACK_DURATION_BASE = 0.7;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "3.5"));
+            var fixedDuration = IN_BASE + OUT_BASE;
+            var phaseScale = duration < fixedDuration ? duration / fixedDuration : 1;
+            var IN = IN_BASE * phaseScale;
+            var OUT = OUT_BASE * phaseScale;
+            var STAGE_IN = STAGE_IN_BASE * phaseScale;
+            var RACK_AT = RACK_AT_BASE * phaseScale;
+            var RACK_DURATION = RACK_DURATION_BASE * phaseScale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var HOLD_START = IN;
+            var OUT_START = IN + HOLD;
+
+            var tl = gsap.timeline({ paused: true });
+
+            tl.set(stage, { opacity: 0 }, 0);
+            tl.set(
+              cardA,
+              {
+                "--fr-blur": 0,
+                opacity: 1,
+                x: "0cqw",
+                y: "-0.5cqh",
+                scale: 1.045,
+                rotation: -3,
+              },
+              0,
+            );
+            tl.set(
+              cardB,
+              {
+                "--fr-blur": 0.48,
+                opacity: 0.52,
+                x: "1.6cqw",
+                y: "0.8cqh",
+                scale: 0.93,
+                rotation: 2.4,
+              },
+              0,
+            );
+
+            tl.to(stage, { opacity: 1, duration: STAGE_IN, ease: "power2.out" }, 0);
+
+            tl.to(
+              cardA,
+              {
+                "--fr-blur": 0.48,
+                opacity: 0.5,
+                x: "-1.4cqw",
+                y: "0.8cqh",
+                scale: 0.94,
+                rotation: -1.6,
+                duration: RACK_DURATION,
+                ease: "sine.inOut",
+              },
+              RACK_AT,
+            );
+            tl.to(
+              cardB,
+              {
+                "--fr-blur": 0,
+                opacity: 1,
+                x: "-1.6cqw",
+                y: "-0.4cqh",
+                scale: 1.04,
+                rotation: 1.3,
+                duration: RACK_DURATION,
+                ease: "sine.inOut",
+              },
+              RACK_AT,
+            );
+
+            if (HOLD > 0) {
+              tl.to(cardA, { y: "1.15cqh", duration: HOLD, ease: "sine.inOut" }, HOLD_START);
+              tl.to(cardB, { y: "-0.75cqh", duration: HOLD, ease: "sine.inOut" }, HOLD_START);
+            }
+
+            tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["focus-rack"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add focus-rack" />
+
+That writes one file: `compositions/components/focus-rack.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/focus-rack.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `camera` `focus` `focus-rack` `depth` `parallax` `emphasize`.
+
+## 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/components/focus-swap.mdx b/docs/catalog/components/focus-swap.mdx
new file mode 100644
index 0000000000..1f18e3bb69
--- /dev/null
+++ b/docs/catalog/components/focus-swap.mdx
@@ -0,0 +1,323 @@
+---
+title: "Focus Swap"
+description: "Moves attention between two side-by-side cards as one recedes with scale, blur, and dimming while the other advances to full focus."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/focus-swap.html"
+  compositionId="focus-swap"
+  compositionSrc="compositions/components/focus-swap.html"
+  variables={[{"id":"focus","type":"enum","role":"motion","label":"Final focus","description":"Card that ends sharp, full-size, and fully opaque.","default":"b","options":[{"value":"a","label":"Card A"},{"value":"b","label":"Card B"}]},{"id":"blurPx","type":"number","role":"style","label":"Unfocused blur","description":"Blur applied to the card outside the viewer focus.","default":6,"min":0,"max":20,"step":1,"unit":"px"},{"id":"dim","type":"number","role":"style","label":"Unfocused opacity","description":"Opacity of the card outside the viewer focus.","default":0.5,"min":0,"max":1,"step":0.05}]}
+>
+
+```html focus-swap.html
+<!doctype html>
+<!--
+  focus-swap: HyperFrames video primitive (ui-props / holdable / demonstrate)
+
+  Concept: attention moves between two side-by-side cards. The card losing
+  focus recedes to 0.92 scale, softens, and dims while the other card advances
+  to full scale, sharpness, and opacity. Both sides move together as one clean
+  swap.
+
+  Compiled-from evidence: launches-motion-vocabulary.md section 3.6 identifies
+  blur-focus / defocus in 14 of 18 production launches and names focus-swap as
+  a high-frequency missing primitive for blur + opacity + optional scale.
+
+  Use when: directing the viewer from one product state, option, or result to
+  another without moving either element out of its established layout.
+
+  Variables:
+    - focus ("a" | "b", default "b"): the card that ends focused.
+    - blurPx (number, default 6): blur applied to the unfocused card.
+    - dim (number from 0 to 1, default 0.5): unfocused card opacity.
+
+  Envelope (holdable):
+    IN = 0.90s at the standard duration, including a 0.20s readable lead.
+    HOLD = elastic and deliberately still after focus lands.
+    OUT = none; the host composition owns the cut or exit.
+    For durations under 0.90s, the lead and swap compress to finish by D.
+
+  Sync point: focus-landed at 0.90s into IN at the standard duration. It
+  compresses with IN only when D is shorter than 0.90s and never enters HOLD.
+
+  Sound: none. This continuous attention shift has no discrete impact cue.
+
+  Mount contract: this is a template-wrapped sub-composition. The runtime
+  clones only template contents. #root has no data-width or data-height and
+  fills the host-owned box with position:absolute, inset:0, and
+  container-type:size. The paused GSAP timeline is registered under the
+  hardcoded composition id "focus-swap".
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "focus", "type": "enum", "role": "motion", "label": "Final focus", "description": "Card that ends sharp, full-size, and fully opaque.", "default": "b", "options": [{ "value": "a", "label": "Card A" }, { "value": "b", "label": "Card B" }] },
+    { "id": "blurPx", "type": "number", "role": "style", "label": "Unfocused blur", "description": "Blur applied to the card outside the viewer focus.", "default": 6, "min": 0, "max": 20, "step": 1, "unit": "px" },
+    { "id": "dim", "type": "number", "role": "style", "label": "Unfocused opacity", "description": "Opacity of the card outside the viewer focus.", "default": 0.5, "min": 0, "max": 1, "step": 0.05 }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Focus Swap</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="focus-swap" data-duration="1.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            background: var(--bg);
+            color: var(--fg);
+            font-family: var(--font-body);
+          }
+
+          .fs-clip {
+            width: 100%;
+            height: 100%;
+            display: grid;
+            place-items: center;
+            padding: 7cqh 6cqw;
+          }
+
+          .fs-pair {
+            width: 100%;
+            height: min(72cqh, 52cqw);
+            display: grid;
+            grid-template-columns: repeat(2, minmax(0, 1fr));
+            gap: 4cqw;
+            align-items: stretch;
+          }
+
+          /* EDIT ZONE: visual payload only. Keep the card frames and their
+             initial states transform-free because GSAP owns scale and blur. */
+          .fs-card {
+            min-width: 0;
+            position: relative;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            padding: 5cqh 3.2cqw;
+            overflow: hidden;
+            border: 0.16cqw solid var(--border);
+            border-radius: var(--radius);
+            background: var(--surface);
+            box-shadow: 0 2.2cqh 5cqh color-mix(in srgb, var(--bg) 72%, transparent);
+            transform-origin: center;
+            will-change: transform, filter, opacity;
+            /* Both cards are the same placeholder material. Which one holds
+               attention is said by blur, scale, and opacity, never by hue. */
+            --fs-card-accent: color-mix(in srgb, var(--fg) 72%, var(--surface));
+          }
+
+          .fs-card::before {
+            content: "";
+            position: absolute;
+            inset: 0 0 auto;
+            height: 0.75cqh;
+            background: var(--fs-card-accent);
+          }
+
+          .fs-card-head {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: var(--space-2);
+          }
+
+          .fs-card-letter {
+            display: grid;
+            place-items: center;
+            width: 5cqw;
+            aspect-ratio: 1;
+            border-radius: 50%;
+            background: color-mix(in srgb, var(--fg) 13%, var(--surface));
+            color: var(--fg);
+            font-family: var(--font-mono);
+            font-size: 2.3cqw;
+            font-weight: 700;
+          }
+
+          .fs-status {
+            color: var(--muted);
+            font-family: var(--font-mono);
+            font-size: 1.25cqw;
+            letter-spacing: 0.12em;
+            text-transform: uppercase;
+          }
+
+          .fs-copy {
+            display: grid;
+            gap: var(--space-1);
+          }
+
+          .fs-title {
+            color: var(--fg);
+            font-family: var(--font-display);
+            font-size: 3.4cqw;
+            font-weight: 680;
+            line-height: 1;
+            letter-spacing: -0.025em;
+          }
+
+          .fs-detail {
+            color: var(--muted);
+            font-size: 1.45cqw;
+            line-height: 1.35;
+          }
+
+          .fs-meter {
+            height: 1.1cqh;
+            overflow: hidden;
+            border-radius: var(--radius);
+            background: color-mix(in srgb, var(--border) 60%, transparent);
+          }
+
+          .fs-meter-fill {
+            width: var(--fs-meter-width);
+            height: 100%;
+            border-radius: inherit;
+            background: var(--fs-card-accent);
+          }
+        </style>
+
+        <div class="fs-clip clip" data-start="0" data-duration="1.5" data-track-index="0">
+          <div class="fs-pair">
+            <article class="fs-card" data-focus-card="a" aria-label="Card A, plan">
+              <div class="fs-card-head">
+                <span class="fs-card-letter">A</span>
+                <span class="fs-status">Plan</span>
+              </div>
+              <div class="fs-copy">
+                <h2 class="fs-title">Shape the idea</h2>
+                <p class="fs-detail">Define the brief and align the team.</p>
+              </div>
+              <div class="fs-meter" aria-hidden="true">
+                <div class="fs-meter-fill" style="--fs-meter-width: 58%"></div>
+              </div>
+            </article>
+
+            <article class="fs-card" data-focus-card="b" aria-label="Card B, launch">
+              <div class="fs-card-head">
+                <span class="fs-card-letter">B</span>
+                <span class="fs-status">Launch</span>
+              </div>
+              <div class="fs-copy">
+                <h2 class="fs-title">Ship the result</h2>
+                <p class="fs-detail">Move from approved work to live impact.</p>
+              </div>
+              <div class="fs-meter" aria-hidden="true">
+                <div class="fs-meter-fill" style="--fs-meter-width: 86%"></div>
+              </div>
+            </article>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var cardA = root.querySelector('[data-focus-card="a"]');
+            var cardB = root.querySelector('[data-focus-card="b"]');
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            // INVARIANT: focus is the only owner of which card advances and
+            // which recedes. Invalid input resolves to the declared default.
+            var targetIsB = vars.focus !== "a";
+            var initialFocused = targetIsB ? cardA : cardB;
+            var targetFocused = targetIsB ? cardB : cardA;
+
+            var rawBlur = Number(vars.blurPx);
+            var blurPx = Number.isFinite(rawBlur) ? Math.max(0, Math.min(20, rawBlur)) : 6;
+            var rawDim = Number(vars.dim);
+            var dim = Number.isFinite(rawDim) ? Math.max(0, Math.min(1, rawDim)) : 0.5;
+            var blurred = "blur(" + blurPx + "px)";
+            var sharp = "blur(0px)";
+
+            // RETIME RANGE: keep the standard 0.20s lead and 0.70s swap. Only
+            // short host durations compress them so focus always lands by D.
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "1.5"));
+            var SWAP_START = Math.min(0.2, duration * 0.2);
+            var SWAP_DURATION = Math.min(0.7, Math.max(0.001, duration - SWAP_START));
+
+            gsap.set(initialFocused, { opacity: 1, scale: 1, filter: sharp });
+            gsap.set(targetFocused, { opacity: dim, scale: 0.92, filter: blurred });
+
+            var tl = gsap.timeline({ paused: true });
+            tl.to(
+              initialFocused,
+              {
+                opacity: dim,
+                scale: 0.92,
+                filter: blurred,
+                duration: SWAP_DURATION,
+                ease: "power2.out",
+              },
+              SWAP_START,
+            );
+            tl.to(
+              targetFocused,
+              {
+                opacity: 1,
+                scale: 1,
+                filter: sharp,
+                duration: SWAP_DURATION,
+                ease: "power2.out",
+              },
+              SWAP_START,
+            );
+
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines["focus-swap"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add focus-swap" />
+
+That writes one file: `compositions/components/focus-swap.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/focus-swap.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `effect` `ui-props` `focus` `blur` `attention` `demonstrate`.
+
+## 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/components/gesture-tap.mdx b/docs/catalog/components/gesture-tap.mdx
new file mode 100644
index 0000000000..ab7ba80460
--- /dev/null
+++ b/docs/catalog/components/gesture-tap.mdx
@@ -0,0 +1,446 @@
+---
+title: "Gesture Tap"
+description: "A contact circle taps a mobile pill button, releases it into a new labeled accent state, and lifts away."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/gesture-tap.html"
+  compositionId="gesture-tap"
+  compositionSrc="compositions/components/gesture-tap.html"
+  variables={[{"id":"tap_label","type":"string","role":"content","label":"Tap label","description":"Button label shown before the tap response.","default":"Follow"},{"id":"response_label","type":"string","role":"content","label":"Response label","description":"Button label shown when the tap releases.","default":"Following"},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Color used for the completed button state and response pulse.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]}]}
+>
+
+```html gesture-tap.html
+<!doctype html>
+<!--
+  gesture-tap: HyperFrames video primitive (ui-props / interaction / demonstrate)
+
+  Concept: a contact circle appears directly over a real pill button, presses
+  it, releases it into a new state, then lifts away. One mechanic, one job:
+  showing a decisive mobile tap response.
+
+  Variables:
+    - tap_label (string, default "Follow"): button label before release.
+    - response_label (string, default "Following"): button label after release.
+    - accent (enum, green | blue | violet, default green): response color.
+
+  Envelope: fixed IN and OUT with elastic HOLD only.
+    IN_BASE = 1.35s. The stage fades in, contact fades up at the target,
+    presses, then releases. The label swap, accent response, and pulse share
+    one release timestamp.
+    HOLD = max(0, D - IN - OUT). Only this phase stretches for longer mounts.
+    A barely visible card drift keeps the held state alive.
+    OUT_BASE = 0.55s. The completed mobile state fades cleanly.
+    If D is shorter than IN_BASE + OUT_BASE, IN and OUT compress together.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, carries no data-width or
+  data-height, and registers one paused timeline under the literal
+  gesture-tap key.
+-->
+<html
+  lang="en"
+  data-composition-id="gesture-tap"
+  data-composition-duration="3"
+  data-composition-variables='[
+    { "id": "tap_label", "type": "string", "role": "content", "label": "Tap label", "description": "Button label shown before the tap response.", "default": "Follow" },
+    { "id": "response_label", "type": "string", "role": "content", "label": "Response label", "description": "Button label shown when the tap releases.", "default": "Following" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Color used for the completed button state and response pulse.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Gesture Tap</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="gesture-tap" data-duration="3" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: #eef2ff;
+            font-family: Inter, system-ui, sans-serif;
+            pointer-events: none;
+          }
+
+          .gt-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+            background: radial-gradient(circle at 50% 44%, #1c2537 0%, #101521 68%);
+          }
+
+          .gt-stage {
+            width: 100cqw;
+            height: 100cqh;
+            display: grid;
+            place-items: center;
+            opacity: 0;
+            will-change: transform, opacity;
+          }
+
+          .gt-phone {
+            position: relative;
+            width: 46cqw;
+            height: 78cqh;
+            overflow: hidden;
+            border: 0.18cqmin solid rgba(255, 255, 255, 0.24);
+            border-radius: 5cqmin;
+            background: #f7f8fb;
+            box-shadow: 0 4cqh 10cqh rgba(2, 6, 23, 0.44);
+            color: #111827;
+            will-change: transform;
+          }
+
+          .gt-status {
+            height: 9cqh;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 0 4cqw;
+            border-bottom: 0.12cqmin solid #e5e7eb;
+            color: #64748b;
+            font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+            font-size: 2.1cqh;
+            font-weight: 700;
+            letter-spacing: 0.08em;
+            text-transform: uppercase;
+          }
+
+          .gt-signal {
+            width: 4.8cqw;
+            height: 1.4cqh;
+            border-radius: 999cqw;
+            background: #cbd5e1;
+          }
+
+          .gt-profile {
+            height: 50cqh;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            gap: 2.2cqh;
+            padding: 0 5cqw;
+            text-align: center;
+          }
+
+          .gt-avatar {
+            width: 12cqmin;
+            aspect-ratio: 1;
+            border-radius: 50%;
+            background: linear-gradient(145deg, #e2e8f0, #cbd5e1);
+            box-shadow: inset 0 0 0 0.8cqmin #ffffff;
+          }
+
+          .gt-name {
+            max-width: 34cqw;
+            overflow: hidden;
+            color: #0f172a;
+            font-size: 4.2cqh;
+            font-weight: 780;
+            line-height: 1.05;
+            letter-spacing: -0.035em;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          .gt-detail {
+            max-width: 34cqw;
+            color: #64748b;
+            font-size: 2.35cqh;
+            font-weight: 520;
+            line-height: 1.35;
+          }
+
+          .gt-button-shell {
+            position: relative;
+            width: 34cqw;
+            height: 11cqh;
+            margin: 0 auto;
+          }
+
+          .gt-button {
+            position: absolute;
+            inset: 0;
+            z-index: 2;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            overflow: hidden;
+            border: 0.16cqmin solid #273449;
+            border-radius: 999cqw;
+            background: #172033;
+            color: #f8fafc;
+            font: inherit;
+            font-size: 2.9cqh;
+            font-weight: 760;
+            letter-spacing: -0.01em;
+            transform-origin: 50% 50%;
+            will-change: transform, background-color, border-color;
+          }
+
+          .gt-button-label {
+            display: block;
+            max-width: 28cqw;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          .gt-response-pulse {
+            position: absolute;
+            inset: -1.7cqh -1.7cqw;
+            z-index: 1;
+            border: 0.28cqmin solid var(--gt-accent, #34d399);
+            border-radius: 999cqw;
+            opacity: 0;
+            will-change: transform, opacity;
+          }
+
+          .gt-contact {
+            position: absolute;
+            top: calc(50% - 7cqmin);
+            left: calc(50% - 7cqmin);
+            z-index: 4;
+            width: 14cqmin;
+            aspect-ratio: 1;
+            border: 0.24cqmin solid rgba(255, 255, 255, 0.78);
+            border-radius: 50%;
+            background: rgba(255, 255, 255, 0.34);
+            box-shadow:
+              inset 0 0 0 0.8cqmin rgba(255, 255, 255, 0.12),
+              0 1.2cqh 3cqh rgba(15, 23, 42, 0.28);
+            opacity: 0;
+            transform-origin: 50% 50%;
+            will-change: transform, opacity;
+          }
+        </style>
+
+        <div
+          id="gesture-tap-clip"
+          class="gt-clip clip"
+          data-start="0"
+          data-duration="3"
+          data-track-index="0"
+        >
+          <div class="gt-stage">
+            <article class="gt-phone" aria-label="Mobile profile card">
+              <div class="gt-status">
+                <span>Profile</span>
+                <span class="gt-signal" aria-hidden="true"></span>
+              </div>
+              <div class="gt-profile">
+                <div class="gt-avatar" aria-hidden="true"></div>
+                <div class="gt-name">Maya Chen</div>
+                <div class="gt-detail">Product designer sharing practical interaction notes.</div>
+              </div>
+              <div class="gt-button-shell">
+                <div class="gt-response-pulse" aria-hidden="true"></div>
+                <button class="gt-button" type="button" aria-pressed="false" tabindex="-1">
+                  <span class="gt-button-label"></span>
+                </button>
+                <div class="gt-contact" aria-hidden="true"></div>
+              </div>
+            </article>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".gt-stage");
+            var card = root.querySelector(".gt-phone");
+            var button = root.querySelector(".gt-button");
+            var label = root.querySelector(".gt-button-label");
+            var contact = root.querySelector(".gt-contact");
+            var pulse = root.querySelector(".gt-response-pulse");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var tapLabel = vars.tap_label == null ? "Follow" : String(vars.tap_label);
+            var responseLabel =
+              vars.response_label == null ? "Following" : String(vars.response_label);
+            var accentName =
+              vars.accent === "blue" || vars.accent === "violet" ? vars.accent : "green";
+            var accentColors = {
+              green: "var(--brand, #34d399)",
+              blue: "var(--accent, #60a5fa)",
+              violet: "var(--accent-2, #a78bfa)",
+            };
+            var accentColor = accentColors[accentName];
+
+            label.textContent = tapLabel;
+            button.setAttribute("aria-label", tapLabel);
+            root.style.setProperty("--gt-accent", accentColor);
+            // GSAP interpolates colors numerically, so tween values need the
+            // substituted color rather than the var() form.
+            accentColor = getComputedStyle(root).getPropertyValue("--gt-accent").trim();
+
+            var IN_BASE = 1.35;
+            var OUT_BASE = 0.55;
+            var STAGE_IN_BASE = 0.24;
+            var CONTACT_AT_BASE = 0.28;
+            var CONTACT_IN_BASE = 0.18;
+            var PRESS_AT_BASE = 0.54;
+            var PRESS_DURATION_BASE = 0.18;
+            var RELEASE_AT_BASE = 0.72;
+            var RELEASE_DURATION_BASE = 0.28;
+            var CONTACT_OUT_BASE = 0.34;
+            var PULSE_DURATION_BASE = 0.56;
+
+            var parsedDuration = Number.parseFloat(root.dataset.duration);
+            var duration =
+              Number.isFinite(parsedDuration) && parsedDuration > 0 ? parsedDuration : 3;
+            var fixedBase = IN_BASE + OUT_BASE;
+            var phaseScale = duration < fixedBase ? duration / fixedBase : 1;
+            var IN = IN_BASE * phaseScale;
+            var OUT = OUT_BASE * phaseScale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var HOLD_START = IN;
+            var OUT_START = IN + HOLD;
+            var STAGE_IN = STAGE_IN_BASE * phaseScale;
+            var CONTACT_AT = CONTACT_AT_BASE * phaseScale;
+            var CONTACT_IN = CONTACT_IN_BASE * phaseScale;
+            var PRESS_AT = PRESS_AT_BASE * phaseScale;
+            var PRESS_DURATION = PRESS_DURATION_BASE * phaseScale;
+            var RELEASE_AT = RELEASE_AT_BASE * phaseScale;
+            var RELEASE_DURATION = RELEASE_DURATION_BASE * phaseScale;
+            var CONTACT_OUT = CONTACT_OUT_BASE * phaseScale;
+            var PULSE_DURATION = PULSE_DURATION_BASE * phaseScale;
+
+            var tl = gsap.timeline({ paused: true });
+
+            tl.to(stage, { opacity: 1, duration: STAGE_IN, ease: "power2.out" }, 0);
+
+            // IN: the contact appears at the target. No x or y tween precedes the press.
+            tl.fromTo(
+              contact,
+              { opacity: 0, scale: 0.82 },
+              { opacity: 0.68, scale: 1, duration: CONTACT_IN, ease: "power2.out" },
+              CONTACT_AT,
+            );
+            tl.to(
+              button,
+              {
+                scale: 0.93,
+                backgroundColor: "#26324a",
+                duration: PRESS_DURATION,
+                ease: "power4.in",
+              },
+              PRESS_AT,
+            );
+            tl.to(contact, { scale: 0.78, duration: PRESS_DURATION, ease: "power4.in" }, PRESS_AT);
+
+            // Release owns the response. Label, state, accent fill, and pulse
+            // all begin at RELEASE_AT so the UI answers on the release frame.
+            tl.set(label, { innerText: responseLabel }, RELEASE_AT);
+            tl.set(
+              button,
+              { attr: { "aria-label": responseLabel, "aria-pressed": "true" } },
+              RELEASE_AT,
+            );
+            tl.to(
+              button,
+              {
+                scale: 1,
+                backgroundColor: accentColor,
+                borderColor: accentColor,
+                color: "#071015",
+                duration: RELEASE_DURATION,
+                ease: "back.out(1.7)",
+              },
+              RELEASE_AT,
+            );
+            tl.set(pulse, { opacity: 0.58, scale: 0.76 }, RELEASE_AT);
+            tl.to(
+              pulse,
+              { opacity: 0, scale: 1.14, duration: PULSE_DURATION, ease: "power2.out" },
+              RELEASE_AT,
+            );
+            tl.to(
+              contact,
+              {
+                opacity: 0,
+                scale: 1.04,
+                y: "-5cqh",
+                duration: CONTACT_OUT,
+                ease: "power2.in",
+              },
+              RELEASE_AT,
+            );
+
+            // HOLD: only this phase stretches. One slow yoyo returns the card
+            // to its resting position exactly when OUT starts.
+            if (HOLD > 0) {
+              tl.to(
+                card,
+                {
+                  y: "-0.6cqh",
+                  duration: HOLD / 2,
+                  ease: "sine.inOut",
+                  yoyo: true,
+                  repeat: 1,
+                },
+                HOLD_START,
+              );
+            }
+
+            // OUT: the completed state remains intact while the stage exits.
+            tl.to(stage, { opacity: 0, y: "-1.4cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["gesture-tap"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add gesture-tap" />
+
+That writes one file: `compositions/components/gesture-tap.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/gesture-tap.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `gesture` `tap` `interaction` `ui-props`.
+
+## 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/components/gloss-sweep.mdx b/docs/catalog/components/gloss-sweep.mdx
new file mode 100644
index 0000000000..a2d267db6c
--- /dev/null
+++ b/docs/catalog/components/gloss-sweep.mdx
@@ -0,0 +1,255 @@
+---
+title: "Gloss Sweep"
+description: "A card lands with a restrained slam, catches one diagonal specular gloss, and holds perfectly still."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/gloss-sweep.html"
+  compositionId="gloss-sweep"
+  compositionSrc="compositions/components/gloss-sweep.html"
+  variables={[{"id":"text","type":"string","role":"content","label":"Label","description":"Text displayed on the card.","default":"Pro"},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Color treatment for the card.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"sweep_angle","type":"number","role":"style","label":"Sweep angle","description":"Angle of the specular gloss in degrees.","default":25,"min":-60,"max":60,"step":1,"unit":"deg"}]}
+>
+
+```html gloss-sweep.html
+<!doctype html>
+<!--
+  gloss-sweep: HyperFrames video primitive (celebrations / payoff)
+
+  Concept: a compact card lands with a restrained slam, receives one
+  diagonal specular sweep, then holds perfectly still. The gloss is the
+  whole celebration. There is no pulse, confetti, drift, or exit.
+
+  Variables:
+    - text (string, default "Pro"): the card label.
+    - accent (green | blue | violet, default green): the card color.
+    - sweep_angle (number, default 25): gloss angle in degrees.
+
+  Envelope (fixed IN, elastic HOLD, no OUT):
+    IN_BASE  = 1.35s, small landing followed by one gloss sweep
+    HOLD     = elastic = max(0, D - IN_BASE), completely still
+    OUT_BASE = 0s, the card remains in its confident resting state
+    If D is shorter than IN_BASE, the landing and sweep compress together.
+
+  Mount contract: the runtime clones only this template. #root fills the
+  host box, establishes the container query basis, has no data-width or
+  data-height, and registers one paused timeline under the hardcoded
+  gloss-sweep id.
+-->
+<html
+  lang="en"
+  data-composition-id="gloss-sweep"
+  data-composition-duration="2.5"
+  data-composition-variables='[
+    { "id": "text", "type": "string", "role": "content", "label": "Label", "description": "Text displayed on the card.", "default": "Pro" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Color treatment for the card.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "sweep_angle", "type": "number", "role": "style", "label": "Sweep angle", "description": "Angle of the specular gloss in degrees.", "default": 25, "min": -60, "max": 60, "step": 1, "unit": "deg" }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Gloss Sweep</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="gloss-sweep" data-duration="2.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .gs-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+          }
+
+          .gs-card {
+            position: relative;
+            display: grid;
+            min-width: 48cqw;
+            max-width: 78cqw;
+            min-height: 34cqh;
+            padding: 7cqh 9cqw;
+            place-items: center;
+            overflow: hidden;
+            border: 0.22cqmin solid var(--gs-edge);
+            border-radius: 5cqmin;
+            background: linear-gradient(145deg, var(--gs-surface-bright), var(--gs-surface));
+            box-shadow:
+              0 3cqh 8cqh color-mix(in srgb, var(--bg, #05070d) 62%, transparent),
+              inset 0 0 0 0.12cqmin color-mix(in srgb, white 12%, transparent);
+            transform-origin: 50% 50%;
+            will-change: transform;
+          }
+
+          .gs-label {
+            position: relative;
+            z-index: 1;
+            max-width: 62cqw;
+            overflow: hidden;
+            color: var(--gs-label);
+            font-size: clamp(8cqmin, 15cqmin, 18cqmin);
+            font-weight: 780;
+            line-height: 1;
+            letter-spacing: -0.04em;
+            text-align: center;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          .gs-gloss {
+            --gs-sweep: -30;
+            --gs-angle: 25deg;
+            position: absolute;
+            inset: 0;
+            z-index: 2;
+            opacity: 0;
+            background: linear-gradient(
+              var(--gs-angle),
+              transparent calc(var(--gs-sweep) * 1% - 22%),
+              rgba(255, 255, 255, 0.06) calc(var(--gs-sweep) * 1% - 9%),
+              rgba(255, 255, 255, 0.72) calc(var(--gs-sweep) * 1%),
+              rgba(255, 255, 255, 0.08) calc(var(--gs-sweep) * 1% + 9%),
+              transparent calc(var(--gs-sweep) * 1% + 22%)
+            );
+            pointer-events: none;
+          }
+        </style>
+
+        <div
+          id="gloss-sweep-clip"
+          class="gs-clip clip"
+          data-start="0"
+          data-duration="2.5"
+          data-track-index="0"
+        >
+          <div class="gs-card">
+            <span class="gs-label"></span>
+            <span class="gs-gloss" aria-hidden="true"></span>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var card = root.querySelector(".gs-card");
+            var label = root.querySelector(".gs-label");
+            var gloss = root.querySelector(".gs-gloss");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var accents = {
+              green: {
+                surface: "#123b2c",
+                surfaceBright: "#1a513c",
+                edge: "#39d98a",
+                label: "#ecfff5",
+              },
+              blue: {
+                surface: "#123554",
+                surfaceBright: "#19486f",
+                edge: "#4db5ff",
+                label: "#eef8ff",
+              },
+              violet: {
+                surface: "#31205b",
+                surfaceBright: "#463078",
+                edge: "#a98cff",
+                label: "#f7f2ff",
+              },
+            };
+            var accent = accents[vars.accent] ? vars.accent : "green";
+            var palette = accents[accent];
+            var text = vars.text == null ? "Pro" : String(vars.text);
+            var angleValue = Number(vars.sweep_angle);
+            var sweepAngle = Number.isFinite(angleValue)
+              ? Math.max(-60, Math.min(60, angleValue))
+              : 25;
+
+            label.textContent = text;
+            card.style.setProperty("--gs-surface", palette.surface);
+            card.style.setProperty("--gs-surface-bright", palette.surfaceBright);
+            card.style.setProperty("--gs-edge", palette.edge);
+            card.style.setProperty("--gs-label", palette.label);
+            gloss.style.setProperty("--gs-angle", sweepAngle + "deg");
+
+            var IN_BASE = 1.35;
+            var LAND_BASE = 0.5;
+            var SWEEP_AT_BASE = 0.65;
+            var SWEEP_BASE = 0.7;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "2.5"));
+            var scale = duration < IN_BASE ? duration / IN_BASE : 1;
+            var LAND = LAND_BASE * scale;
+            var SWEEP_AT = SWEEP_AT_BASE * scale;
+            var SWEEP = SWEEP_BASE * scale;
+
+            var tl = gsap.timeline({ paused: true });
+
+            tl.fromTo(
+              card,
+              { y: "-5cqh", scale: 1.06 },
+              { y: "0cqh", scale: 1, duration: LAND, ease: "expo.out" },
+              0,
+            );
+            tl.set(gloss, { opacity: 1, "--gs-sweep": -30 }, SWEEP_AT);
+            tl.to(gloss, { "--gs-sweep": 130, duration: SWEEP, ease: "power2.out" }, SWEEP_AT);
+            tl.set(gloss, { opacity: 0 }, SWEEP_AT + SWEEP);
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines["gloss-sweep"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add gloss-sweep" />
+
+That writes one file: `compositions/components/gloss-sweep.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/gloss-sweep.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `celebration` `gloss` `card` `badge` `payoff`.
+
+## 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/components/grade-split-reveal.mdx b/docs/catalog/components/grade-split-reveal.mdx
new file mode 100644
index 0000000000..f2a59e0638
--- /dev/null
+++ b/docs/catalog/components/grade-split-reveal.mdx
@@ -0,0 +1,488 @@
+---
+title: "Grade Split Reveal"
+description: "The same picture twice, one flat and one finished, with a hard edge sweeping between them. It stops in the middle long enough to compare, then commits and the graded look takes the frame. Both looks are real HyperFrames color grading run through the WebGL shader, so the preview and the render match."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/grade-split-reveal.html"
+  compositionId="grade-split-reveal"
+  compositionSrc="compositions/components/grade-split-reveal.html"
+  variables={[{"id":"look","type":"enum","role":"style","label":"Look","description":"Grade carried by the upper copy, and the label printed over it. All three are real grading blocks handed to the shader, not CSS filters.","default":"warm-cinematic","options":[{"value":"warm-cinematic","label":"Warm Cinematic"},{"value":"cool-teal","label":"Cool Teal"},{"value":"bleach-bypass","label":"Bleach Bypass"}]},{"id":"split","type":"number","role":"motion","label":"Split point","description":"How far across the plate the edge stops to hold the comparison, before it commits and takes the rest.","default":62,"min":25,"max":85,"step":1,"unit":"%"},{"id":"edge","type":"enum","role":"style","label":"Edge","description":"The divider line riding the wipe. Hidden drops it entirely so the grade arrives with no seam.","default":"hairline","options":[{"value":"hairline","label":"Hairline"},{"value":"bold","label":"Bold"},{"value":"hidden","label":"Hidden"}]},{"id":"labels","type":"enum","role":"style","label":"Labels","description":"Show or hide the two captions naming each half of the plate.","default":"on","options":[{"value":"on","label":"Show"},{"value":"off","label":"Hide"}]}]}
+>
+
+```html grade-split-reveal.html
+<!doctype html>
+<!--
+  grade-split-reveal: the grade arrives as a moving edge.
+
+  Two copies of the same plate sit exactly on top of each other. The lower copy carries a
+  flat, milky look, the way ungraded footage comes off a camera. The upper copy carries the
+  finished warm cinematic look. A hard edge sweeps across the upper copy, so the graded
+  version eats the flat one from left to right and you read both halves of the same picture
+  at the same time. It pauses in the middle long enough for the eye to compare, then commits
+  and takes the whole frame.
+
+  Both looks are real HyperFrames color grading, not a CSS filter. The runtime hands each
+  image to a WebGL shader and swaps in a graded canvas, and the render pipeline redraws the
+  same shader, so what you preview is what encodes. Color grading is media only: it applies
+  to <video> and <img>, never to text, SVG or ordinary DOM.
+
+  The plate here is a procedural SVG scene built in this file, so the primitive is
+  deterministic and ships nothing licensed. Replace PLATE_SRC with your own photo or a video
+  poster and the whole move still works. Swap AFTER_GRADE for any preset id or hand written
+  adjust block.
+
+  The edge itself is never animated with clip-path. The upper copy lives in a wrapper with
+  overflow hidden and the wrapper's width is what moves, so the sweep is one plain numeric
+  tween that seeks perfectly and never re-parses a string.
+
+  Every ease is a cubic bezier written out by hand and solved in this file. No preset is used
+  anywhere.
+
+  Variables. Each one is read once at mount, falls back to its declared default on anything
+  missing or unrecognised, and changes what lands on screen. Timing is untouched: same six
+  seconds, same 30fps, same beats.
+
+    - look (warm-cinematic | cool-teal | bleach-bypass, default warm-cinematic): the grade the
+      upper copy carries, and the label printed over it. All three are real grading blocks
+      handed to the shader, not CSS filters.
+    - split (25 to 85, default 62, percent of the plate width): where the edge stops to hold
+      the comparison before it commits and takes the rest.
+    - edge (hairline | bold | hidden, default hairline): the divider line riding the wipe.
+      hidden removes it, so the grade arrives with no visible seam.
+    - labels (on | off, default on): the two captions naming each half of the plate.
+
+  Mount contract: everything lives inside <template>, styles and scripts included, and the
+  scripts sit INSIDE the composition root. A host clones template content into its own mount
+  and only runs scripts found inside the root; markup left outside is copied without its
+  behaviour, which renders a black card with no timeline at all.
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "look", "type": "enum", "role": "style", "label": "Look", "description": "Grade carried by the upper copy, and the label printed over it. All three are real grading blocks handed to the shader, not CSS filters.", "default": "warm-cinematic", "options": [{ "value": "warm-cinematic", "label": "Warm Cinematic" }, { "value": "cool-teal", "label": "Cool Teal" }, { "value": "bleach-bypass", "label": "Bleach Bypass" }] },
+    { "id": "split", "type": "number", "role": "motion", "label": "Split point", "description": "How far across the plate the edge stops to hold the comparison, before it commits and takes the rest.", "default": 62, "min": 25, "max": 85, "step": 1, "unit": "%" },
+    { "id": "edge", "type": "enum", "role": "style", "label": "Edge", "description": "The divider line riding the wipe. Hidden drops it entirely so the grade arrives with no seam.", "default": "hairline", "options": [{ "value": "hairline", "label": "Hairline" }, { "value": "bold", "label": "Bold" }, { "value": "hidden", "label": "Hidden" }] },
+    { "id": "labels", "type": "enum", "role": "style", "label": "Labels", "description": "Show or hide the two captions naming each half of the plate.", "default": "on", "options": [{ "value": "on", "label": "Show" }, { "value": "off", "label": "Hide" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Grade Split Reveal</title>
+  </head>
+  <body>
+    <template>
+      <div
+        id="root"
+        class="clip gs-root"
+        data-composition-id="grade-split-reveal"
+        data-duration="6"
+        data-fps="30"
+      >
+        <style>
+          [data-composition-id="grade-split-reveal"] {
+            --ink: #f6f4ef;
+            --rule: rgba(246, 244, 239, 0.55);
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            background: transparent;
+            pointer-events: none;
+          }
+          #gs-plate {
+            position: absolute;
+            overflow: hidden;
+            border-radius: 10px;
+            background: #08080a;
+            box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
+          }
+          .gs-layer {
+            position: absolute;
+            left: 0;
+            top: 0;
+            height: 100%;
+            overflow: hidden;
+          }
+          .gs-layer img {
+            display: block;
+            object-fit: cover;
+          }
+          #gs-edge {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 2px;
+            height: 100%;
+            background: var(--ink);
+            box-shadow: 0 0 18px rgba(0, 0, 0, 0.7);
+          }
+          .gs-tag {
+            position: absolute;
+            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+            font-weight: 700;
+            text-transform: uppercase;
+            letter-spacing: 0.16em;
+            color: var(--ink);
+            opacity: 0;
+            white-space: nowrap;
+            text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85);
+          }
+          .gs-tag::before {
+            content: "";
+            position: absolute;
+            left: 0;
+            top: -0.7em;
+            width: 1.8em;
+            height: 2px;
+            background: var(--rule);
+          }
+          #gs-tag-before::before {
+            left: auto;
+            right: 0;
+          }
+        </style>
+
+        <div id="gs-plate">
+          <div class="gs-layer" id="gs-before"><img id="gs-img-before" alt="" /></div>
+          <div class="gs-layer" id="gs-after"><img id="gs-img-after" alt="" /></div>
+          <div id="gs-edge"></div>
+          <div class="gs-tag" id="gs-tag-before">Ungraded</div>
+          <div class="gs-tag" id="gs-tag-after">Warm Cinematic</div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            gsap.defaults({ immediateRender: false });
+
+            /* Cubic bezier solved by hand. Newton first, bisection when the slope dies. */
+            function bezier(x1, y1, x2, y2) {
+              function curve(t, a1, a2) {
+                var A = 1 - 3 * a2 + 3 * a1;
+                var B = 3 * a2 - 6 * a1;
+                var C = 3 * a1;
+                return ((A * t + B) * t + C) * t;
+              }
+              function slope(t, a1, a2) {
+                var A = 1 - 3 * a2 + 3 * a1;
+                var B = 3 * a2 - 6 * a1;
+                var C = 3 * a1;
+                return (3 * A * t + 2 * B) * t + C;
+              }
+              return function (p) {
+                if (p <= 0) return 0;
+                if (p >= 1) return 1;
+                var t = p;
+                for (var i = 0; i < 8; i++) {
+                  var d = slope(t, x1, x2);
+                  if (Math.abs(d) < 1e-6) break;
+                  var e = curve(t, x1, x2) - p;
+                  if (Math.abs(e) < 1e-7) return curve(t, y1, y2);
+                  t -= e / d;
+                }
+                var lo = 0;
+                var hi = 1;
+                t = p;
+                for (var j = 0; j < 24; j++) {
+                  var x = curve(t, x1, x2);
+                  if (Math.abs(x - p) < 1e-7) break;
+                  if (x > p) hi = t;
+                  else lo = t;
+                  t = (lo + hi) / 2;
+                }
+                return curve(t, y1, y2);
+              };
+            }
+
+            /* Plate settles, never bounces. */
+            var EASE_PLATE = bezier(0.16, 0.84, 0.24, 1);
+            /* The sweep loiters, then finishes fast, the way a hand drags a compare slider. */
+            var EASE_WIPE = bezier(0.62, 0, 0.14, 1);
+            /* The commit is decisive from the first frame. */
+            var EASE_COMMIT = bezier(0.4, 0, 0.05, 1);
+            var EASE_TAG = bezier(0.22, 0.8, 0.3, 1);
+            var EASE_FADE = bezier(0.4, 0, 0.7, 1);
+
+            var DUR = 6;
+
+            /* ---- the plate. Swap PLATE_SRC for your own photo or video poster. ---- */
+            var SCENE =
+              /* width and height are not decoration. An SVG served to an <img> with only a
+                 viewBox has no intrinsic size, and a texture upload from it comes back
+                 empty, so the shader grades a blank plate. */
+              '<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="900" viewBox="0 0 1600 900">' +
+              "<defs>" +
+              '<linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">' +
+              '<stop offset="0" stop-color="#1b2340"/><stop offset="0.42" stop-color="#5b4a63"/>' +
+              '<stop offset="0.68" stop-color="#c8794a"/><stop offset="0.78" stop-color="#f0a75c"/>' +
+              '<stop offset="1" stop-color="#f7c988"/></linearGradient>' +
+              '<linearGradient id="sea" x1="0" y1="0" x2="0" y2="1">' +
+              '<stop offset="0" stop-color="#c98a55"/><stop offset="0.3" stop-color="#6a5560"/>' +
+              '<stop offset="1" stop-color="#1a1d30"/></linearGradient>' +
+              '<radialGradient id="glow" cx="0.62" cy="0.74" r="0.42">' +
+              '<stop offset="0" stop-color="#ffdfa8" stop-opacity="0.9"/>' +
+              '<stop offset="1" stop-color="#ffdfa8" stop-opacity="0"/></radialGradient>' +
+              "</defs>" +
+              '<rect width="1600" height="900" fill="url(#sky)"/>' +
+              '<rect width="1600" height="900" fill="url(#glow)"/>' +
+              '<circle cx="992" cy="660" r="58" fill="#fff0cd"/>' +
+              '<path d="M0 640 L250 578 L430 618 L640 552 L820 606 L1010 566 L1240 620 L1430 578 L1600 616 L1600 700 L0 700 Z" fill="#3a2f45"/>' +
+              '<path d="M0 668 L210 634 L400 664 L610 622 L840 662 L1080 630 L1330 668 L1600 638 L1600 700 L0 700 Z" fill="#2a2337"/>' +
+              '<rect y="700" width="1600" height="200" fill="url(#sea)"/>' +
+              '<rect x="962" y="700" width="60" height="200" fill="#ffdfa8" opacity="0.42"/>' +
+              '<rect x="978" y="700" width="28" height="200" fill="#fff3d4" opacity="0.5"/>' +
+              '<g fill="#f4e3c2" opacity="0.34">' +
+              '<rect x="120" y="742" width="1360" height="3"/><rect x="240" y="786" width="1120" height="3"/>' +
+              '<rect x="60" y="828" width="1480" height="4"/><rect x="300" y="868" width="1000" height="4"/></g>' +
+              '<g fill="#e8d3b4" opacity="0.5">' +
+              '<rect x="180" y="330" width="420" height="7" rx="3"/><rect x="300" y="372" width="260" height="6" rx="3"/>' +
+              '<rect x="1010" y="286" width="380" height="7" rx="3"/><rect x="1130" y="326" width="220" height="6" rx="3"/></g>' +
+              '<path d="M0 760 L118 700 L268 760 L268 900 L0 900 Z" fill="#12121e"/>' +
+              '<path d="M1600 742 L1462 700 L1318 742 L1318 900 L1600 900 Z" fill="#0f0f1a"/>' +
+              "</svg>";
+            var PLATE_SRC = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(SCENE);
+
+            /* ---- the two looks. Both are real color grading, applied by the shader. ---- */
+            var BEFORE_GRADE = {
+              preset: "neutral",
+              intensity: 1,
+              adjust: {
+                exposure: 0.1,
+                contrast: -0.42,
+                highlights: -0.1,
+                shadows: 0.24,
+                whites: -0.14,
+                blacks: 0.3,
+                temperature: -0.06,
+                vibrance: -0.22,
+                saturation: -0.34,
+              },
+              colorSpace: "rec709",
+            };
+            var AFTER_GRADE = {
+              preset: "deep-contrast",
+              intensity: 1,
+              adjust: {
+                exposure: 0.02,
+                contrast: 0.28,
+                highlights: -0.16,
+                shadows: 0.08,
+                whites: 0.06,
+                blacks: -0.16,
+                temperature: 0.18,
+                tint: -0.04,
+                vibrance: 0.26,
+                saturation: 0.1,
+              },
+              details: { vignette: 0.3, vignetteFeather: 0.7, grain: 0.1, grainSize: 0.3 },
+              colorSpace: "rec709",
+            };
+
+            /* ---- variables. Unrecognised overrides return to their declared defaults. ---- */
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            function pick(table, value, fallback) {
+              return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+            }
+
+            var LOOKS = {
+              "warm-cinematic": { label: "Warm Cinematic", grade: AFTER_GRADE },
+              "cool-teal": {
+                label: "Cool Teal",
+                grade: {
+                  preset: "deep-contrast",
+                  intensity: 1,
+                  adjust: {
+                    exposure: 0,
+                    contrast: 0.32,
+                    highlights: -0.2,
+                    shadows: 0.14,
+                    whites: 0.04,
+                    blacks: -0.2,
+                    temperature: -0.26,
+                    tint: 0.08,
+                    vibrance: 0.22,
+                    saturation: 0.04,
+                  },
+                  details: { vignette: 0.34, vignetteFeather: 0.68, grain: 0.1, grainSize: 0.3 },
+                  colorSpace: "rec709",
+                },
+              },
+              "bleach-bypass": {
+                label: "Bleach Bypass",
+                grade: {
+                  preset: "neutral",
+                  intensity: 1,
+                  adjust: {
+                    exposure: 0.08,
+                    contrast: 0.54,
+                    highlights: 0.12,
+                    shadows: -0.1,
+                    whites: 0.18,
+                    blacks: -0.28,
+                    temperature: 0.04,
+                    vibrance: -0.18,
+                    saturation: -0.46,
+                  },
+                  details: { vignette: 0.24, vignetteFeather: 0.72, grain: 0.18, grainSize: 0.34 },
+                  colorSpace: "rec709",
+                },
+              },
+            };
+            var LOOK = LOOKS[pick(LOOKS, vars.look, "warm-cinematic")];
+
+            var EDGE_WIDTHS = { hairline: "2px", bold: "6px", hidden: "0px" };
+            var EDGE = pick(EDGE_WIDTHS, vars.edge, "hairline");
+
+            /* A number arrives as a number from --variables, but a hand written override can
+               still be a string or nonsense. parseFloat plus a range test covers both. */
+            var SPLIT = parseFloat(vars.split);
+            if (!isFinite(SPLIT) || SPLIT < 25 || SPLIT > 85) SPLIT = 62;
+
+            var LABELS_ON = vars.labels !== "off";
+
+            var root = document.getElementById("gs-plate").parentElement;
+            var FRAME_W = root.clientWidth || 1920;
+            var FRAME_H = root.clientHeight || 1080;
+
+            /* The plate keeps the frame's own shape, inset by a constant margin, so one file
+               reads correctly in landscape, portrait and square. */
+            var INSET = Math.min(FRAME_W, FRAME_H) * 0.085;
+            var PW = Math.round(FRAME_W - INSET * 2);
+            var PH = Math.round(FRAME_H - INSET * 2);
+
+            var plate = document.getElementById("gs-plate");
+            plate.style.left = INSET + "px";
+            plate.style.top = INSET + "px";
+            plate.style.width = PW + "px";
+            plate.style.height = PH + "px";
+
+            var before = document.getElementById("gs-before");
+            var after = document.getElementById("gs-after");
+            var edge = document.getElementById("gs-edge");
+            var tagBefore = document.getElementById("gs-tag-before");
+            var tagAfter = document.getElementById("gs-tag-after");
+
+            /* Both images are laid out at the full plate width. Only the wrapper narrows, so
+               the shader canvas the runtime drops in keeps its measured box and the edge is a
+               clean crop rather than a squeeze. */
+            [
+              [document.getElementById("gs-img-before"), BEFORE_GRADE],
+              [document.getElementById("gs-img-after"), LOOK.grade],
+            ].forEach(function (pair) {
+              pair[0].style.width = PW + "px";
+              pair[0].style.height = PH + "px";
+              pair[0].setAttribute("data-color-grading", JSON.stringify(pair[1]));
+              pair[0].src = PLATE_SRC;
+            });
+            before.style.width = PW + "px";
+
+            var TAG = Math.max(11, Math.round(Math.min(FRAME_W, FRAME_H) * 0.019));
+            var PAD = Math.round(INSET * 0.62);
+            [tagBefore, tagAfter].forEach(function (t) {
+              t.style.fontSize = TAG + "px";
+              t.style.bottom = PAD + "px";
+            });
+            /* The graded copy grows from the left, so its label sits on the left. Putting
+               these the other way round labels each half with the look it is not. */
+            tagAfter.style.left = PAD + "px";
+            tagBefore.style.right = PAD + "px";
+            tagBefore.style.textAlign = "right";
+
+            tagAfter.textContent = LOOK.label;
+            edge.style.width = EDGE_WIDTHS[EDGE];
+            /* The edge also casts a shadow, so zero width alone would leave a smudge. */
+            if (EDGE === "hidden") edge.style.display = "none";
+            if (!LABELS_ON) {
+              tagBefore.style.display = "none";
+              tagAfter.style.display = "none";
+            }
+
+            /* Rest state lives outside the timeline so frame zero is already correct. */
+            /* The plate is lit at frame zero and arrives on scale alone. Fading it up from
+               nothing would leave the first frames of the clip literally blank, which reads
+               as a broken card in any grid of thumbnails. */
+            gsap.set(plate, { transformOrigin: "50% 50%", scale: 1.05, opacity: 1 });
+            gsap.set(after, { width: 0 });
+            gsap.set(edge, { x: 0, opacity: 0 });
+            gsap.set([tagBefore, tagAfter], { opacity: 0, y: 10 });
+
+            var tl = gsap.timeline({ paused: true });
+
+            /* The plate arrives. */
+            tl.fromTo(plate, { scale: 1.05 }, { scale: 1, duration: 0.62, ease: EASE_PLATE }, 0);
+            tl.fromTo(
+              tagBefore,
+              { opacity: 0, y: 10 },
+              { opacity: 0.82, y: 0, duration: 0.34, ease: EASE_TAG },
+              0.36,
+            );
+
+            /* The grade sweeps in and stops short, so both halves are readable together. */
+            var HOLD = Math.round(PW * (SPLIT / 100));
+            tl.fromTo(after, { width: 0 }, { width: HOLD, duration: 1.6, ease: EASE_WIPE }, 0.7);
+            tl.fromTo(edge, { x: 0 }, { x: HOLD, duration: 1.6, ease: EASE_WIPE }, 0.7);
+            tl.fromTo(edge, { opacity: 0 }, { opacity: 1, duration: 0.2, ease: EASE_FADE }, 0.7);
+            tl.fromTo(
+              tagAfter,
+              { opacity: 0, y: 10 },
+              { opacity: 1, y: 0, duration: 0.34, ease: EASE_TAG },
+              1.16,
+            );
+
+            /* Then it commits and takes the whole plate. */
+            tl.fromTo(after, { width: HOLD }, { width: PW, duration: 1.2, ease: EASE_COMMIT }, 3.1);
+            tl.fromTo(edge, { x: HOLD }, { x: PW, duration: 1.2, ease: EASE_COMMIT }, 3.1);
+            tl.fromTo(
+              tagBefore,
+              { opacity: 0.82 },
+              { opacity: 0, duration: 0.5, ease: EASE_FADE },
+              3.1,
+            );
+            tl.fromTo(edge, { opacity: 1 }, { opacity: 0, duration: 0.3, ease: EASE_FADE }, 4.05);
+            /* A small push in lands the finished look instead of just stopping on it. */
+            tl.fromTo(plate, { scale: 1 }, { scale: 1.03, duration: 1.5, ease: EASE_COMMIT }, 3.1);
+
+            tl.set({}, {}, DUR);
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines["grade-split-reveal"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add grade-split-reveal" />
+
+That writes one file: `compositions/components/grade-split-reveal.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/grade-split-reveal.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `color-grading` `media` `compare` `reveal` `motion-primitive` `grade`.
+
+## 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/components/grain-field.mdx b/docs/catalog/components/grain-field.mdx
new file mode 100644
index 0000000000..10bb08e1b5
--- /dev/null
+++ b/docs/catalog/components/grain-field.mdx
@@ -0,0 +1,212 @@
+---
+title: "Grain Field"
+description: "A clearly visible accent-tinted dot field drifts over a subtle luminance gradient in an exact ambient loop."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/grain-field.html"
+  compositionId="grain-field"
+  compositionSrc="compositions/components/grain-field.html"
+  variables={[{"id":"density","type":"enum","role":"style","label":"Density","description":"Dot size and spacing across the grain field.","default":"fine","options":[{"value":"fine","label":"Fine"},{"value":"coarse","label":"Coarse"}]},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Accent token family used to color the dots and luminance wash.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]}]}
+>
+
+```html grain-field.html
+<!doctype html>
+<!--
+  grain-field: HyperFrames video primitive (backgrounds / ambient)
+
+  Concept: a fixed repeated dot field drifts slowly across a deep,
+  accent-tinted luminance wash. The dots stay intentionally legible at
+  gallery-card size so the texture reads as a designed surface.
+
+  Variables:
+    - density (fine | coarse, default fine): controls dot size and spacing.
+    - accent (green | blue | violet, default green): colors the dots and wash.
+
+  Envelope: IN = 0, HOLD = the full elastic duration, OUT = 0. A longer mount
+  stretches only the ambient drift cycle.
+
+  Loop invariant: the phase completes one full sine cycle during HOLD. The
+  endpoint is normalized to phase zero before rendering, so t=0 and
+  t=duration have exactly the same transform.
+
+  Sound: none.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, has no data-width or data-height,
+  and registers one paused timeline under the hardcoded grain-field id.
+-->
+<html
+  lang="en"
+  data-composition-id="grain-field"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "density", "type": "enum", "role": "style", "label": "Density", "description": "Dot size and spacing across the grain field.", "default": "fine", "options": [{ "value": "fine", "label": "Fine" }, { "value": "coarse", "label": "Coarse" }] },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Accent token family used to color the dots and luminance wash.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Grain Field</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="grain-field" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            pointer-events: none;
+          }
+
+          .gf-clip,
+          .gf-base,
+          .gf-field {
+            position: absolute;
+          }
+
+          .gf-clip,
+          .gf-base {
+            inset: 0;
+          }
+
+          .gf-clip {
+            overflow: hidden;
+          }
+
+          .gf-base {
+            background:
+              radial-gradient(
+                ellipse at 28% 20%,
+                color-mix(in srgb, var(--gf-color) 18%, transparent) 0%,
+                transparent 56%
+              ),
+              linear-gradient(
+                145deg,
+                color-mix(in srgb, var(--gf-base) 90%, var(--gf-color)) 0%,
+                var(--gf-base) 72%
+              );
+          }
+
+          .gf-field {
+            inset: -8cqw;
+            background-image: radial-gradient(
+              circle,
+              color-mix(in srgb, var(--gf-color) 70%, white) 0 var(--gf-dot),
+              transparent calc(var(--gf-dot) + 0.12cqmin)
+            );
+            background-position: 0 0;
+            background-size: var(--gf-cell) var(--gf-cell);
+            opacity: 0.82;
+            will-change: transform;
+          }
+        </style>
+
+        <div
+          id="grain-field-clip"
+          class="gf-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="gf-base"></div>
+          <div class="gf-field"></div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var field = root.querySelector(".gf-field");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            // Invalid enum overrides return to their declared defaults.
+            var accentTokens = {
+              green: "var(--brand, #34d399)",
+              blue: "var(--accent, #38bdf8)",
+              violet: "var(--accent-2, #a78bfa)",
+            };
+            var densityStyles = {
+              fine: { cell: "3.2cqmin", dot: "0.48cqmin" },
+              coarse: { cell: "5.8cqmin", dot: "0.86cqmin" },
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentTokens, vars.accent)
+              ? vars.accent
+              : "green";
+            var density = vars.density === "coarse" ? "coarse" : "fine";
+
+            root.style.setProperty("--gf-color", accentTokens[accent]);
+            root.style.setProperty("--gf-base", "var(--bg, #080a10)");
+            root.style.setProperty("--gf-cell", densityStyles[density].cell);
+            root.style.setProperty("--gf-dot", densityStyles[density].dot);
+
+            var TAU = Math.PI * 2;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var state = { phase: 0 };
+
+            function renderPose() {
+              var phase = state.phase === TAU ? 0 : state.phase;
+              var drift = Math.sin(phase);
+              gsap.set(field, { x: drift * 2.8 + "cqw", y: drift * 2.2 + "cqh" });
+            }
+
+            var tl = gsap.timeline({ paused: true });
+
+            // HOLD: uniform phase travel becomes a smooth sine drift. One full
+            // cycle restores the exact starting pose at the duration boundary.
+            tl.to(state, { phase: TAU, duration: duration, ease: "none", onUpdate: renderPose }, 0);
+
+            renderPose();
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines["grain-field"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add grain-field" />
+
+That writes one file: `compositions/components/grain-field.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/grain-field.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `background` `grain` `dots` `texture` `ambient` `loopable`.
+
+## 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/components/grain-overlay.mdx b/docs/catalog/components/grain-overlay.mdx
index 20adf620fa..e28fae25d1 100644
--- a/docs/catalog/components/grain-overlay.mdx
+++ b/docs/catalog/components/grain-overlay.mdx
@@ -3,23 +3,103 @@ title: "Grain Overlay"
 description: "Animated film grain texture overlay using CSS keyframes — adds warmth and analog character to any composition"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/grain-overlay.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/grain-overlay.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/components/grain-overlay.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Grain Overlay preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add grain-overlay
-```
+<InstallCommand command="npx hyperframes add grain-overlay" />
 
 That writes one file: `compositions/components/grain-overlay.html`.
 
-## Paste it into your composition
+## Source
+
+<Accordion title={`grain-overlay.html`}>
+
+```html
+<!--
+  Grain Overlay — animated film grain texture.
+
+  Usage: paste this snippet into your composition's HTML.
+  The overlay covers the full viewport with pointer-events: none
+  so it sits on top of all content without blocking interaction.
+
+  Customize:
+  - opacity: adjust .grain-texture opacity (default 0.15)
+  - speed: change animation duration (default 0.5s)
+  - texture: swap the background URL for a different pattern
+  - z-index: adjust #grain-overlay z-index to layer correctly
+-->
+
+<div
+  id="grain-overlay"
+  style="
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 100;
+  "
+>
+  <div class="grain-texture"></div>
+</div>
+
+<style>
+  @keyframes hf-grain-noise {
+    0%,
+    100% {
+      transform: translate(0, 0);
+    }
+    10% {
+      transform: translate(-5%, -5%);
+    }
+    20% {
+      transform: translate(-10%, 5%);
+    }
+    30% {
+      transform: translate(5%, -10%);
+    }
+    40% {
+      transform: translate(-5%, 15%);
+    }
+    50% {
+      transform: translate(-10%, 5%);
+    }
+    60% {
+      transform: translate(15%, 0);
+    }
+    70% {
+      transform: translate(0, 10%);
+    }
+    80% {
+      transform: translate(-15%, 0);
+    }
+    90% {
+      transform: translate(10%, 5%);
+    }
+  }
+
+  #grain-overlay .grain-texture {
+    position: absolute;
+    top: -50%;
+    left: -50%;
+    width: 200%;
+    height: 200%;
+    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
+    opacity: 0.15;
+    animation: hf-grain-noise 0.5s steps(1) infinite;
+  }
+</style>
+```
+
+</Accordion>
 
-Open `compositions/components/grain-overlay.html` and copy what is inside into your own composition.
-The file opens with a comment header that walks you through it.
+## Usage
 
-A component has no size or duration of its own. It takes both from the composition
-you paste it into.
+Open `compositions/components/grain-overlay.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/components/grid-card-assemble.mdx b/docs/catalog/components/grid-card-assemble.mdx
new file mode 100644
index 0000000000..26411002c3
--- /dev/null
+++ b/docs/catalog/components/grid-card-assemble.mdx
@@ -0,0 +1,510 @@
+---
+title: "Grid Card Assemble"
+description: "N capability cards (thin-line icon that draws on, mono label, optional muted body) stagger-assemble into a grid or vertical list with a fade plus short slide into slot, then hold perfectly still."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/grid-card-assemble.html"
+  compositionId="grid-card-assemble"
+  compositionSrc="compositions/components/grid-card-assemble.html"
+  variables={[{"id":"items","type":"string","role":"content","label":"Items","description":"Comma-separated cards (3 to 12). \"Label: body\" adds a one-line muted body under the label.","default":"Capture,Compose,Render,Publish"},{"id":"layout","type":"enum","role":"layout","label":"Layout","description":"Grid wraps by columns; list stacks vertically.","default":"grid","options":[{"value":"grid","label":"Grid"},{"value":"list","label":"List"}]},{"id":"columns","type":"number","role":"layout","label":"Columns","description":"Grid column count (grid layout only). 0 picks automatically: one row up to 3 items, then ceil(sqrt(N)).","default":0,"min":0,"max":4,"step":1},{"id":"cues","type":"string","role":"timing","label":"Cues","description":"Comma-separated per-item entrance times in seconds. Blank entries use the default cascade.","default":""},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Accent token family used by the card icons.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"How the assembled layout leaves the frame. Default none: the hold ends the film.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
+>
+
+```html grid-card-assemble.html
+<!doctype html>
+<!--
+  grid-card-assemble: HyperFrames video primitive (layout / feature tour)
+
+  N capability cards stagger-assemble into a grid or a vertical list. Every
+  card is a real token card: surface fill with a subtle top light, hairline
+  border, contract radius, generous padding, a thin-line icon that draws on
+  as the card lands (getTotalLength dash), a wide-tracked mono label, and an
+  optional one-line muted body. Each card enters with a fade and a SHORT
+  slide directly into its own slot: no scatter from center, no overshoot, a
+  smooth long-tail settle (power3.out). Once the layout resolves the frame
+  holds perfectly STILL: no float, no push-in.
+
+  Variables (declared in data-composition-variables below):
+    - items (string, default "Capture,Compose,Render,Publish"): comma list of
+      cards. An entry formatted "Label: body text" renders the label plus a
+      one-line muted body; a plain entry renders label only. 3 to 12 items
+      render gracefully; extras past 12 are dropped. Body text must not
+      contain commas (the comma is the item separator).
+    - layout ("grid" | "list", default "grid"): grid wraps by columns, list
+      stacks horizontal rows vertically.
+    - columns (number, default 0 = auto): grid column count, grid layout only.
+      0 picks one row up to 3 items, then ceil(sqrt(N)) so 4 items form 2x2
+      and 9 items form 3x3.
+    - cues (string, default ""): comma-separated per-item entrance times in
+      seconds relative to mount start. A blank or invalid entry falls back to
+      that item's default cascade slot: the cascade spreads so the last card
+      lands near 60% of the authored duration (short mounts compress toward
+      ~0.1s gaps). Values are clamped so every card lands before any exit
+      begins.
+    - accent (green | blue | violet, default green): icon stroke family.
+      green -> --brand, blue -> --accent, violet -> --accent-2.
+    - exit ("none" | "fade" | "up", default "none"): frame roots own
+      transitions; the default hold-ends-the-film.
+
+  Icons: six generic thin-line glyphs (shield, chart, cloud, bolt, layers,
+  doc) cycled deterministically by item index. Each path is dash-primed at
+  mount and draws on inside its card's settle window.
+
+  Envelope, fixed IN with elastic HOLD (never gsap.timeScale()):
+    IN    = last entrance start + 0.65s card settle (icon draws fit inside)
+    HOLD  = still, elastic: everything after IN until OUT (or until D)
+    OUT   = 0 when exit is "none"; else 0.45s fade / fade-up of the stage.
+    Entrance starts compress together when D is too short for the cascade.
+
+  Content override: the runtime clones only this template. A fork that wants
+  custom card content places its own children inside the
+  [data-slot="items"] grid element; when that element already has children
+  the script animates them as the cards instead of generating capability
+  cards from the items variable (layout, cues, and exit still apply, and any
+  .gca-icon paths inside slotted cards still dash-draw).
+
+  Mount contract: elastic root, no data-width/data-height, styled via #root
+  only, container-type: size, one paused timeline registered under the
+  literal "grid-card-assemble" key. Deterministic and seek-safe: fromTo
+  entrances, immediateRender: false on post-entrance tweens, no CSS
+  transitions, no Date.now, no randomness.
+-->
+<html
+  lang="en"
+  data-composition-id="grid-card-assemble"
+  data-composition-duration="4.5"
+  data-composition-variables='[
+    { "id": "items", "type": "string", "role": "content", "label": "Items", "description": "Comma-separated cards (3 to 12). \"Label: body\" adds a one-line muted body under the label.", "default": "Capture,Compose,Render,Publish" },
+    { "id": "layout", "type": "enum", "role": "layout", "label": "Layout", "description": "Grid wraps by columns; list stacks vertically.", "default": "grid", "options": [{ "value": "grid", "label": "Grid" }, { "value": "list", "label": "List" }] },
+    { "id": "columns", "type": "number", "role": "layout", "label": "Columns", "description": "Grid column count (grid layout only). 0 picks automatically: one row up to 3 items, then ceil(sqrt(N)).", "default": 0, "min": 0, "max": 4, "step": 1 },
+    { "id": "cues", "type": "string", "role": "timing", "label": "Cues", "description": "Comma-separated per-item entrance times in seconds. Blank entries use the default cascade.", "default": "" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Accent token family used by the card icons.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "How the assembled layout leaves the frame. Default none: the hold ends the film.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Grid Card Assemble</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="grid-card-assemble" data-duration="4.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            background: var(--bg, transparent);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            pointer-events: none;
+          }
+
+          .gca-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+          }
+
+          .gca-stage {
+            display: grid;
+            width: var(--gca-stage-w, 88cqw);
+            grid-auto-rows: var(--gca-row-h, 34cqh);
+            gap: var(--space-2, 2.2cqmin);
+            will-change: transform, opacity;
+          }
+
+          .gca-card {
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            min-width: 0;
+            min-height: 0;
+            padding: var(--gca-pad, 4cqh);
+            overflow: hidden;
+            border: 1px solid var(--border, #38404e);
+            border-radius: var(--radius, 1.8cqmin);
+            /* Token surface with a subtle top light so the card reads as a
+               real plane against the stage (no color-mix: keeps the
+               contrast auditor honest). */
+            background:
+              linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.01) 60%),
+              var(--surface, #141a23);
+            will-change: transform, opacity;
+          }
+
+          .gca-icon {
+            flex: 0 0 auto;
+            width: var(--gca-icon, 7cqh);
+            height: var(--gca-icon, 7cqh);
+          }
+
+          .gca-icon path {
+            fill: none;
+            stroke: var(--gca-accent, var(--brand, #71f5a7));
+            stroke-width: 2.2;
+            stroke-linecap: round;
+            stroke-linejoin: round;
+          }
+
+          .gca-text {
+            min-width: 0;
+          }
+
+          .gca-label {
+            overflow: hidden;
+            color: var(--fg, #f8fafc);
+            font-size: var(--gca-font, 2.2cqh);
+            font-weight: 500;
+            line-height: 1.25;
+            letter-spacing: 0.16em;
+            text-transform: uppercase;
+            white-space: nowrap;
+          }
+
+          .gca-body {
+            margin-top: var(--gca-body-gap, 1.1cqh);
+            overflow: hidden;
+            color: var(--muted, #94a3b8);
+            font-family: var(--font-body, system-ui, -apple-system, "Segoe UI", sans-serif);
+            font-size: var(--gca-body-font, 2.6cqh);
+            font-weight: 400;
+            line-height: 1.4;
+            letter-spacing: 0.01em;
+            white-space: nowrap;
+          }
+
+          /* List rows read horizontally: icon left, text block beside it. */
+          .gca-stage[data-layout="list"] .gca-card {
+            flex-direction: row;
+            align-items: center;
+            justify-content: flex-start;
+            gap: var(--space-2, 2.2cqmin);
+          }
+
+          .gca-stage[data-layout="list"] .gca-body {
+            margin-top: var(--gca-body-gap, 0.6cqh);
+          }
+        </style>
+
+        <div
+          id="grid-card-assemble-clip"
+          class="gca-clip clip"
+          data-start="0"
+          data-duration="4.5"
+          data-track-index="0"
+        >
+          <div class="gca-stage" data-slot="items" role="list"></div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            // Literal id, never read off the DOM: the flattening step strips
+            // data-composition-id from the mounted root (see toggle-flip).
+            var compositionId = "grid-card-assemble";
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".gca-stage");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var itemsValue =
+              vars.items == null || String(vars.items).trim() === ""
+                ? "Capture,Compose,Render,Publish"
+                : String(vars.items);
+            var rawItems = itemsValue
+              .split(",")
+              .map(function (token) {
+                return token.trim();
+              })
+              .filter(function (token) {
+                return token !== "";
+              })
+              .slice(0, 12);
+            if (rawItems.length === 0) rawItems = ["Capture", "Compose", "Render", "Publish"];
+
+            // "Label: body" entries carry a one-line muted body; plain
+            // entries are label-only cards.
+            var entries = rawItems.map(function (raw) {
+              var split = raw.indexOf(":");
+              if (split > 0) {
+                return {
+                  label: raw.slice(0, split).trim(),
+                  body: raw.slice(split + 1).trim(),
+                };
+              }
+              return { label: raw, body: "" };
+            });
+
+            var layout = vars.layout === "list" ? "list" : "grid";
+            var isList = layout === "list";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            root.style.setProperty("--gca-accent", accentColors[accent]);
+
+            // Six generic thin-line glyphs cycled by index (48-box paths).
+            var ICONS = [
+              ["M24 44s16-8 16-20V10L24 4 8 10v14c0 12 16 20 16 20z", "M17 23l5 5 10-10"],
+              ["M8 6v34h34", "M16 30l8-9 6 5 10-12"],
+              ["M36 20h-2.5A16 16 0 1 0 18 40h18a10 10 0 0 0 0-20z"],
+              ["M26 4L10 27h10l-3 17 17-24H23l3-16z"],
+              ["M24 6L4 16l20 10 20-10L24 6z", "M4 24l20 10 20-10", "M4 32l20 10 20-10"],
+              ["M14 4h14l8 8v32H14z", "M28 4v8h8", "M20 24h10", "M20 31h7"],
+            ];
+            var SVG_NS = "http://www.w3.org/2000/svg";
+
+            // Content override: a fork may author its own cards inside the
+            // [data-slot="items"] element; then the items variable only
+            // supplies labels for accessibility, not markup.
+            var cards = Array.prototype.slice.call(stage.children);
+            if (cards.length === 0) {
+              cards = entries.map(function (entry, index) {
+                var card = document.createElement("div");
+                card.className = "gca-card";
+                card.setAttribute("role", "listitem");
+
+                var icon = document.createElementNS(SVG_NS, "svg");
+                icon.setAttribute("class", "gca-icon");
+                icon.setAttribute("viewBox", "0 0 48 48");
+                icon.setAttribute("aria-hidden", "true");
+                ICONS[index % ICONS.length].forEach(function (d) {
+                  var path = document.createElementNS(SVG_NS, "path");
+                  path.setAttribute("d", d);
+                  icon.appendChild(path);
+                });
+                card.appendChild(icon);
+
+                var text = document.createElement("div");
+                text.className = "gca-text";
+                var label = document.createElement("div");
+                label.className = "gca-label";
+                label.textContent = entry.label;
+                text.appendChild(label);
+                if (entry.body !== "") {
+                  var body = document.createElement("div");
+                  body.className = "gca-body";
+                  body.textContent = entry.body;
+                  text.appendChild(body);
+                }
+                card.appendChild(text);
+                stage.appendChild(card);
+                return card;
+              });
+            }
+            var count = cards.length;
+            stage.setAttribute("data-layout", layout);
+            stage.setAttribute(
+              "aria-label",
+              entries
+                .map(function (entry) {
+                  return entry.label;
+                })
+                .join(", "),
+            );
+
+            // Layout geometry: columns wrap the grid; list is one column.
+            // 3 or fewer sit on one row; beyond that ceil(sqrt(N)) keeps the
+            // grid near-square (4 -> 2x2, 9 -> 3x3, 12 -> 4x3).
+            var autoColumns = count <= 3 ? count : Math.ceil(Math.sqrt(count));
+            var requested = Math.round(Number(vars.columns)) || 0;
+            var columns =
+              layout === "list"
+                ? 1
+                : Math.max(1, Math.min(4, requested > 0 ? requested : autoColumns));
+            var rows = Math.ceil(count / columns);
+            stage.style.gridTemplateColumns = "repeat(" + columns + ", minmax(0, 1fr))";
+
+            var hasBodies = entries.some(function (entry) {
+              return entry.body !== "";
+            });
+
+            // The assembled wall fills the mount with intent: ~76cqh of
+            // vertical budget split across rows (gap approximated at 3cqh).
+            // Label-only grids take shorter rows so cards stay proportioned.
+            var stageW = isList ? 64 : 88;
+            var rowCap = isList ? 15 : hasBodies ? 38 : 30;
+            var rowH = Math.max(6, Math.min(rowCap, (76 - 3 * (rows - 1)) / rows));
+            root.style.setProperty("--gca-stage-w", stageW + "cqw");
+            root.style.setProperty("--gca-row-h", rowH.toFixed(3) + "cqh");
+
+            // Card internals scale off the row height (set once at mount,
+            // never tweened: cq-unit custom-property tweens break seeks).
+            var pad = rowH * (isList ? 0.16 : 0.12);
+            var iconSize = isList ? rowH * 0.5 : Math.min(rowH * 0.3, 9.5);
+            root.style.setProperty("--gca-pad", pad.toFixed(3) + "cqh");
+            root.style.setProperty("--gca-icon", iconSize.toFixed(3) + "cqh");
+            root.style.setProperty(
+              "--gca-body-gap",
+              (rowH * (isList ? 0.03 : 0.035)).toFixed(3) + "cqh",
+            );
+
+            // Deterministic text fitting: wide-tracked mono label at ~0.75em
+            // per glyph, sans body at ~0.52em; each also bounded by row
+            // height so short mounts stay composed.
+            var maxChars = entries.reduce(function (max, entry) {
+              return Math.max(max, Array.from(entry.label).length);
+            }, 1);
+            var maxBody = entries.reduce(function (max, entry) {
+              return Math.max(max, Array.from(entry.body).length);
+            }, 0);
+            var cellW = stageW / columns;
+            var textW = isList ? cellW * 0.62 : cellW * 0.78;
+            var labelCqw = Math.min(2.6, textW / (maxChars * 0.75));
+            var labelCqh = rowH * (isList ? 0.23 : 0.09);
+            root.style.setProperty(
+              "--gca-font",
+              "min(" + labelCqw.toFixed(3) + "cqw, " + labelCqh.toFixed(3) + "cqh)",
+            );
+            if (maxBody > 0) {
+              var bodyCqw = Math.min(2.2, textW / (maxBody * 0.56));
+              var bodyCqh = rowH * (isList ? 0.19 : 0.095);
+              root.style.setProperty(
+                "--gca-body-font",
+                "min(" + bodyCqw.toFixed(3) + "cqw, " + bodyCqh.toFixed(3) + "cqh)",
+              );
+            }
+
+            // RETIME RANGE: fixed IN cascade, elastic still HOLD, optional OUT.
+            var BASE_START = 0.15;
+            var GAP = 0.1;
+            var TILE_BASE = 0.65;
+            var OUT_BASE = 0.45;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4.5"));
+            var OUT = exit === "none" ? 0 : Math.min(OUT_BASE, duration * 0.25);
+            var avail = duration - OUT;
+            var TILE = Math.min(TILE_BASE, Math.max(0.2, avail - BASE_START));
+            var latestStart = Math.max(0, avail - TILE);
+            // Default cascade: the last card lands (settle included) around
+            // 60% of the authored duration, so the assembly occupies the
+            // shot instead of finishing in the first quarter and holding
+            // dead. Later cards land deeper, each icon drawing as its card
+            // arrives; the still hold begins after the final landing. Short
+            // mounts fall back to the compressed ~0.1s cascade, and nothing
+            // ever starts past latestStart (every card lands before OUT).
+            var firstStart = Math.min(BASE_START, latestStart);
+            var targetLastStart = Math.min(
+              latestStart,
+              Math.max(0.6 * duration - TILE, BASE_START + GAP * (count - 1)),
+            );
+            var gap = count > 1 ? Math.max(0, targetLastStart - firstStart) / (count - 1) : 0;
+
+            var cueList = String(vars.cues == null ? "" : vars.cues).split(",");
+            var starts = cards.map(function (card, index) {
+              var cue = Number((cueList[index] || "").trim());
+              var hasCue = (cueList[index] || "").trim() !== "" && Number.isFinite(cue);
+              var start = hasCue ? cue : firstStart + gap * index;
+              return Math.max(0, Math.min(start, latestStart));
+            });
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: fade + short slide directly into the slot, long-tail settle,
+            // no overshoot. Explicit both-endpoints state so any seek is exact.
+            cards.forEach(function (card, index) {
+              gsap.set(card, { opacity: 0, y: "3cqh" });
+              tl.fromTo(
+                card,
+                { opacity: 0, y: "3cqh" },
+                { opacity: 1, y: "0cqh", duration: TILE, ease: "power3.out" },
+                starts[index],
+              );
+
+              // The icon outline draws on inside the card's settle window
+              // (dash-primed inline so a seek to 0 shows it undrawn).
+              // Attribute-driven (not style): CSS strokeDashoffset changes
+              // under-invalidate the path region in Chrome, leaving stale
+              // stroke fragments on reverse seeks; attributes repaint fully.
+              var paths = card.querySelectorAll(".gca-icon path");
+              var iconStart = TILE * 0.25;
+              var iconAvail = TILE * 0.7;
+              paths.forEach(function (path, j) {
+                var len = path.getTotalLength();
+                path.setAttribute("stroke-dasharray", String(len));
+                path.setAttribute("stroke-dashoffset", String(len));
+                tl.fromTo(
+                  path,
+                  { attr: { "stroke-dashoffset": len } },
+                  {
+                    attr: { "stroke-dashoffset": 0 },
+                    duration: iconAvail * 0.55,
+                    ease: "power2.out",
+                    immediateRender: false,
+                  },
+                  starts[index] + iconStart + (j / paths.length) * iconAvail * 0.45,
+                );
+              });
+            });
+
+            // HOLD: intentionally still. Nothing floats, nothing pushes in.
+
+            // OUT: whole assembled stage leaves together.
+            if (exit !== "none") {
+              var OUT_START = duration - OUT;
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+              if (exit === "up") {
+                tl.to(stage, { y: "-3cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              }
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add grid-card-assemble" />
+
+That writes one file: `compositions/components/grid-card-assemble.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/grid-card-assemble.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `layout` `grid` `list` `stagger` `assemble` `feature-tour`.
+
+## 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/components/grid-pixelate-wipe.mdx b/docs/catalog/components/grid-pixelate-wipe.mdx
index 9ebe64c678..a49122a623 100644
--- a/docs/catalog/components/grid-pixelate-wipe.mdx
+++ b/docs/catalog/components/grid-pixelate-wipe.mdx
@@ -3,23 +3,108 @@ title: "Grid Pixelate Wipe"
 description: "Transition effect where the screen dissolves into a grid of squares that fade out with staggered timing — use between scenes"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/grid-pixelate-wipe.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/grid-pixelate-wipe.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/components/grid-pixelate-wipe.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Grid Pixelate Wipe preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add grid-pixelate-wipe
-```
+<InstallCommand command="npx hyperframes add grid-pixelate-wipe" />
 
 That writes one file: `compositions/components/grid-pixelate-wipe.html`.
 
-## Paste it into your composition
+## Source
+
+<Accordion title={`grid-pixelate-wipe.html`}>
+
+```html
+<!--
+  Grid Pixelate Wipe — transition effect.
+
+  Usage: place this overlay in your composition. To transition between
+  scenes, animate .grid-cell scale from 0→1 (cover) then 1→0 (reveal)
+  using GSAP stagger with a "from" pattern.
+
+  Customize:
+  - COLS / ROWS: grid density (default 16×9), edit in the script below
+  - --grid-color: cell fill color (default black)
+  - Stagger "from": "center" for radial, "edges" for inward, "random" for scatter
+-->
+
+<div
+  id="grid-pixelate-overlay"
+  style="
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 999;
+    display: grid;
+  "
+></div>
+
+<style>
+  #grid-pixelate-overlay {
+    --grid-color: black;
+  }
+
+  #grid-pixelate-overlay .grid-cell {
+    background: var(--grid-color);
+    transform: scale(0);
+    transform-origin: center center;
+  }
+</style>
+
+<script>
+  (function () {
+    const COLS = 16;
+    const ROWS = 9;
+    const overlay = document.getElementById("grid-pixelate-overlay");
+    if (!overlay) return;
+
+    overlay.style.gridTemplateColumns = `repeat(${COLS}, 1fr)`;
+    overlay.style.gridTemplateRows = `repeat(${ROWS}, 1fr)`;
+
+    for (let i = 0; i < COLS * ROWS; i++) {
+      const cell = document.createElement("div");
+      cell.className = "grid-cell";
+      overlay.appendChild(cell);
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration example:
+
+  // Cover screen with grid (transition out of scene A)
+  tl.to("#grid-pixelate-overlay .grid-cell", {
+    scale: 1,
+    duration: 0.6,
+    stagger: { amount: 0.6, from: "center" },
+    ease: "power2.inOut",
+  }, 3.0);
+
+  // Swap scene content at midpoint
+  tl.set("#scene-a", { opacity: 0 }, 3.6);
+  tl.set("#scene-b", { opacity: 1 }, 3.6);
+
+  // Reveal scene B by removing grid
+  tl.to("#grid-pixelate-overlay .grid-cell", {
+    scale: 0,
+    duration: 0.6,
+    stagger: { amount: 0.6, from: "edges" },
+    ease: "power2.inOut",
+  }, 3.6);
+-->
+```
+
+</Accordion>
 
-Open `compositions/components/grid-pixelate-wipe.html` and copy what is inside into your own composition.
-The file opens with a comment header that walks you through it.
+## Usage
 
-A component has no size or duration of its own. It takes both from the composition
-you paste it into.
+Open `compositions/components/grid-pixelate-wipe.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/components/halftone-dissolve.mdx b/docs/catalog/components/halftone-dissolve.mdx
new file mode 100644
index 0000000000..fdf3eceab0
--- /dev/null
+++ b/docs/catalog/components/halftone-dissolve.mdx
@@ -0,0 +1,462 @@
+---
+title: "Halftone Dissolve"
+description: "Scene A dissolves into scene B through a growing halftone dot field: accent ink dots pop onto a fixed grid smallest-first, each opens into a window onto B, until the windows merge and B fully replaces A."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/halftone-dissolve.html"
+  compositionId="halftone-dissolve"
+  compositionSrc="compositions/components/halftone-dissolve.html"
+  variables={[{"id":"dot_size","type":"enum","role":"style","label":"Dot size","description":"Grid pitch for the halftone field.","default":"medium","options":[{"value":"small","label":"Small"},{"value":"medium","label":"Medium"},{"value":"large","label":"Large"}]},{"id":"direction","type":"enum","role":"timing","label":"Direction","description":"Threshold ordering: ltr sweeps left to right, center grows from the middle, noise scatters.","default":"ltr","options":[{"value":"ltr","label":"Left to right"},{"value":"center","label":"Center out"},{"value":"noise","label":"Noise"}]},{"id":"dissolve_at","type":"number","role":"timing","label":"Dissolve at","description":"Seconds from mount start when the dissolve begins.","default":1.1,"min":0.2,"max":10,"step":0.1,"unit":"s"},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Ink dot color: green rides --brand, blue rides --accent, violet rides --accent-2.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Optional departure. Default none: scene B holds until the frame cuts.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
+>
+
+```html halftone-dissolve.html
+<!doctype html>
+<!--
+  halftone-dissolve: HyperFrames video primitive (transitions / texture)
+
+  Scene A dissolves into scene B through a growing halftone dot field:
+  accent ink dots pop onto a fixed grid smallest-first, each dot then
+  opens into a window onto B, until the windows merge and B fully
+  replaces A. Radius per dot is a pure function of (grid position, t)
+  via a seeded threshold map; the direction enum orders the thresholds.
+
+  Scenes are SLOTS. Callers supply content by placing inert templates
+  anywhere in the HOST page (templates never render, and the runtime
+  wipes the host clip's own children on mount):
+
+    <template data-slot="halftone-dissolve-a"> ... </template>
+    <template data-slot="halftone-dissolve-b"> ... </template>
+
+  Direct img/video children are stretched to cover the stage. When a
+  slot is absent, the primitive renders a token monogram tile (A neutral,
+  B accent-tinted), drawn entirely from contract tokens.
+
+  Variables (declared in data-composition-variables below):
+    - dot_size ("small" | "medium" | "large"): grid pitch.
+    - direction ("ltr" | "center" | "noise"): threshold ordering. ltr
+      sweeps left to right, center grows from the middle, noise is a
+      pure seeded scatter.
+    - dissolve_at (seconds): when the dissolve begins. Clamped so the
+      1.3s dissolve and any exit stay inside the clip.
+    - accent ("green" | "blue" | "violet"): ink dot color; green rides
+      --brand, blue rides --accent, violet rides --accent-2.
+    - exit ("none" | "fade" | "up"): default none, B holds to the cut.
+
+  Envelope, fixed segments with elastic HOLD only (never timeScale):
+    A holds until dissolve_at, the dissolve runs 1.3s, then B holds
+    dead still; OUT = 0.45s only when exit is not none.
+
+  Determinism:
+    The grid and its threshold map are computed exactly once at build
+    from fixed LCG seed 0x4a17f03d. Every frame derives from (table,
+    progress): one plain-object progress tween feeds one onUpdate
+    painter that redraws the ink canvas from scratch and rebuilds B's
+    clip-path string. No Math.random, no wall clock, no incremental
+    state. Eventful seeks (suppressEvents false) land identical frames
+    in any order. The raster and clip-path basis is the host box
+    measured once at mount, same law as the canvas raster basis.
+-->
+<html
+  lang="en"
+  data-composition-id="halftone-dissolve"
+  data-composition-duration="3.5"
+  data-composition-variables='[
+    { "id": "dot_size", "type": "enum", "role": "style", "label": "Dot size", "description": "Grid pitch for the halftone field.", "default": "medium", "options": [{ "value": "small", "label": "Small" }, { "value": "medium", "label": "Medium" }, { "value": "large", "label": "Large" }] },
+    { "id": "direction", "type": "enum", "role": "timing", "label": "Direction", "description": "Threshold ordering: ltr sweeps left to right, center grows from the middle, noise scatters.", "default": "ltr", "options": [{ "value": "ltr", "label": "Left to right" }, { "value": "center", "label": "Center out" }, { "value": "noise", "label": "Noise" }] },
+    { "id": "dissolve_at", "type": "number", "role": "timing", "label": "Dissolve at", "description": "Seconds from mount start when the dissolve begins.", "default": 1.1, "min": 0.2, "max": 10, "step": 0.1, "unit": "s" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Ink dot color: green rides --brand, blue rides --accent, violet rides --accent-2.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: scene B holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Halftone Dissolve</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="halftone-dissolve" data-duration="3.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, "Inter", system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .htd-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .htd-stage {
+            position: absolute;
+            inset: 0;
+            will-change: transform, opacity;
+          }
+
+          .htd-scene {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+          }
+
+          .htd-scene > img,
+          .htd-scene > video {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+          }
+
+          .htd-scene-b {
+            will-change: clip-path;
+            /* B must be opaque: an open window that shows the ink canvas
+               (or A) through a transparent incoming scene breaks the
+               "B fully replaces A" contract for card-style slot content. */
+            background: var(--bg, transparent);
+          }
+
+          .htd-ink {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+          }
+
+          .htd-tile {
+            display: grid;
+            place-items: center;
+            width: 46cqmin;
+            height: 46cqmin;
+            border: 0.18cqmin solid
+              color-mix(in srgb, var(--htd-tile-tint) 46%, var(--border, #475569));
+            border-radius: var(--radius, 3cqmin);
+            background: color-mix(in srgb, var(--surface, #14171c) 88%, var(--htd-tile-tint));
+            box-shadow: 0 3cqh 9cqh color-mix(in srgb, var(--bg, #000000) 35%, transparent);
+          }
+
+          .htd-tile-glyph {
+            color: var(--htd-tile-tint);
+            font-size: 22cqmin;
+            font-weight: 600;
+            line-height: 1;
+            letter-spacing: 0.02em;
+          }
+        </style>
+
+        <div
+          id="halftone-dissolve-clip"
+          class="htd-clip clip"
+          data-start="0"
+          data-duration="3.5"
+          data-track-index="0"
+        >
+          <div class="htd-stage">
+            <div class="htd-scene htd-scene-a">
+              <div class="htd-tile" style="--htd-tile-tint: var(--muted, #94a3b8)">
+                <span class="htd-tile-glyph" aria-hidden="true">A</span>
+              </div>
+            </div>
+            <canvas class="htd-ink" aria-hidden="true"></canvas>
+            <div class="htd-scene htd-scene-b">
+              <div class="htd-tile" style="--htd-tile-tint: var(--htd-accent, #71f5a7)">
+                <span class="htd-tile-glyph" aria-hidden="true">B</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".htd-stage");
+            var sceneA = root.querySelector(".htd-scene-a");
+            var sceneB = root.querySelector(".htd-scene-b");
+            var canvas = root.querySelector(".htd-ink");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            function num(value, fallback, min, max) {
+              var n = Number(value);
+              if (!isFinite(n)) n = fallback;
+              return Math.max(min, Math.min(max, n));
+            }
+
+            var dotSize =
+              vars.dot_size === "small" || vars.dot_size === "large" ? vars.dot_size : "medium";
+            var direction =
+              vars.direction === "center" || vars.direction === "noise" ? vars.direction : "ltr";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            // The bundler mirrors composition variables as scoped CSS custom
+            // props, so this unit's own accent variable shadows the contract
+            // --accent token inside the subtree ("blue" is a valid CSS color
+            // and would render pure blue). When the shadow is present, fall
+            // back to the literal contract value instead of var(--accent).
+            var computedAccent = getComputedStyle(root).getPropertyValue("--accent").trim();
+            if (
+              computedAccent === "green" ||
+              computedAccent === "blue" ||
+              computedAccent === "violet"
+            ) {
+              accentColors.blue = "#61a8ff";
+            }
+            root.style.setProperty("--htd-accent", accentColors[accent]);
+
+            // SLOTS. Caller templates live at HOST DOCUMENT level (the mount
+            // wipes host-clip children, and templates never render).
+            var hostDoc = root.ownerDocument;
+            function fillSlot(scene, slotName) {
+              var slotTemplate = null;
+              try {
+                slotTemplate = hostDoc.querySelector('template[data-slot="' + slotName + '"]');
+              } catch (error) {
+                slotTemplate = null;
+              }
+              if (slotTemplate) {
+                scene.querySelector(".htd-tile").remove();
+                scene.appendChild(hostDoc.importNode(slotTemplate.content, true));
+              }
+            }
+            fillSlot(sceneA, "halftone-dissolve-a");
+            fillSlot(sceneB, "halftone-dissolve-b");
+
+            // Envelope.
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "3.5"));
+            var OUT = exit === "none" ? 0 : 0.45;
+            var DISSOLVE = Math.min(1.3, Math.max(0.4, duration - OUT - 0.6));
+            var maxAt = Math.max(0.2, duration - DISSOLVE - OUT - 0.05);
+            var dissolveAt = num(vars.dissolve_at, 1.1, 0.2, maxAt);
+            var OUT_START = duration - OUT;
+
+            // Raster and clip-path basis, fixed once at mount.
+            var dpr = Math.min(2, Math.max(1, Number(window.devicePixelRatio) || 1));
+            var box = root.getBoundingClientRect();
+            var cssW = Math.max(1, Math.round(box.width) || 640);
+            var cssH = Math.max(1, Math.round(box.height) || 360);
+            canvas.width = Math.round(cssW * dpr);
+            canvas.height = Math.round(cssH * dpr);
+            var ctx = canvas.getContext("2d");
+
+            var probe = hostDoc.createElement("span");
+            probe.style.color = accentColors[accent];
+            root.appendChild(probe);
+            var inkColor = getComputedStyle(probe).color || "#71f5a7";
+            probe.remove();
+
+            // The grid: fixed cells with alternate rows offset half a pitch
+            // (the classic halftone stagger). Thresholds order the growth;
+            // a seeded jitter keeps every front granular instead of ruled.
+            var pitches = { small: 1 / 44, medium: 1 / 30, large: 1 / 20 };
+            var cell = Math.max(8, cssW * pitches[dotSize]);
+            var cols = Math.ceil(cssW / cell) + 2;
+            var rows = Math.ceil(cssH / cell) + 1;
+            var R_MAX = cell * 0.78; // overlapping full coverage
+            var dots = (function () {
+              var state = 0x4a17f03d;
+              function next() {
+                state = (Math.imul(1664525, state) + 1013904223) >>> 0;
+                return state / 4294967296;
+              }
+              var list = [];
+              var maxDist = Math.hypot(cssW / 2, cssH / 2);
+              for (var r = 0; r < rows; r += 1) {
+                for (var c = 0; c < cols; c += 1) {
+                  var x = (c + (r % 2 === 0 ? 0.25 : 0.75)) * cell;
+                  var y = (r + 0.5) * cell;
+                  var base;
+                  if (direction === "center") {
+                    base = Math.hypot(x - cssW / 2, y - cssH / 2) / maxDist;
+                  } else if (direction === "noise") {
+                    base = next();
+                  } else {
+                    base = x / cssW;
+                  }
+                  var jitter = direction === "noise" ? 0 : (next() - 0.5) * 0.22;
+                  var th = Math.max(0, Math.min(1, base + jitter));
+                  list.push({ x: x, y: y, th: th * 0.62 });
+                }
+              }
+              return list;
+            })();
+
+            function clamp01(v) {
+              return v < 0 ? 0 : v > 1 ? 1 : v;
+            }
+            function smooth(v) {
+              return v * v * (3 - 2 * v);
+            }
+
+            // Per-dot growth: the window opens over 38 percent of progress
+            // after its threshold; the ink dot leads it by a small offset so
+            // each site pops as accent ink before B fills it.
+            function windowRadius(dot, p) {
+              return R_MAX * smooth(clamp01((p - dot.th) / 0.38));
+            }
+            function inkRadius(dot, p) {
+              return R_MAX * smooth(clamp01((p + 0.07 - dot.th) / 0.38));
+            }
+
+            // One progress object feeds one painter. The painter redraws the
+            // ink canvas from scratch and rebuilds B's clip-path string, all
+            // a pure function of P.p. The last applied clip string is cached
+            // only to skip identical style writes, never to skip repaints of
+            // changed frames.
+            var P = { p: 0 };
+            var lastClip = null;
+            function applyClip(value) {
+              if (value !== lastClip) {
+                sceneB.style.clipPath = value;
+                lastClip = value;
+              }
+            }
+            function paint() {
+              var p = P.p;
+              ctx.clearRect(0, 0, canvas.width, canvas.height);
+              if (p >= 1) {
+                applyClip("none");
+                return;
+              }
+              if (p <= 0) {
+                applyClip('path("M 0 0 Z")');
+                return;
+              }
+              ctx.fillStyle = inkColor;
+              var parts = [];
+              for (var i = 0; i < dots.length; i += 1) {
+                var dot = dots[i];
+                var ri = inkRadius(dot, p);
+                if (ri > 0.25) {
+                  ctx.beginPath();
+                  ctx.arc(dot.x * dpr, dot.y * dpr, ri * dpr, 0, Math.PI * 2);
+                  ctx.fill();
+                }
+                var rw = windowRadius(dot, p);
+                if (rw > 0.25) {
+                  var x0 = (dot.x + rw).toFixed(2);
+                  var xr = rw.toFixed(2);
+                  var yy = dot.y.toFixed(2);
+                  parts.push(
+                    "M " +
+                      x0 +
+                      " " +
+                      yy +
+                      " A " +
+                      xr +
+                      " " +
+                      xr +
+                      " 0 1 0 " +
+                      (dot.x - rw).toFixed(2) +
+                      " " +
+                      yy +
+                      " A " +
+                      xr +
+                      " " +
+                      xr +
+                      " 0 1 0 " +
+                      x0 +
+                      " " +
+                      yy +
+                      " Z",
+                  );
+                }
+              }
+              applyClip(parts.length ? 'path("' + parts.join(" ") + '")' : 'path("M 0 0 Z")');
+            }
+
+            gsap.set(stage, { opacity: 1, y: "0cqh" });
+
+            var tl = gsap.timeline({
+              paused: true,
+              onUpdate: paint,
+            });
+
+            // Anchor tween: spans the full authored duration so onUpdate
+            // (canvas + clip rebuild) fires for every eventful seek in [0, D]
+            // and holds keep tl.time() honest.
+            tl.to({ t: 0 }, { t: 1, duration: duration, ease: "none" }, 0);
+
+            // The dissolve: one plain-object progress tween. power1.inOut
+            // keeps the front unhurried at both ends (smallest-first pops,
+            // unforced merge).
+            tl.fromTo(P, { p: 0 }, { p: 1, duration: DISSOLVE, ease: "power1.inOut" }, dissolveAt);
+
+            // HOLD: dead still on B (clip released, ink canvas clear).
+
+            // OUT: optional departure; exit none holds until the frame cuts.
+            if (exit === "up") {
+              tl.to(stage, { y: "-4cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "fade") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            }
+
+            tl.seek(0);
+            paint();
+            window.__timelines = window.__timelines || {};
+            window.__timelines["halftone-dissolve"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add halftone-dissolve" />
+
+That writes one file: `compositions/components/halftone-dissolve.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/halftone-dissolve.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `transition` `texture` `halftone` `dissolve`.
+
+## 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/components/headline-slam.mdx b/docs/catalog/components/headline-slam.mdx
new file mode 100644
index 0000000000..1666ff4b8c
--- /dev/null
+++ b/docs/catalog/components/headline-slam.mdx
@@ -0,0 +1,279 @@
+---
+title: "Headline Slam"
+description: "A heavyweight headline scales down into frame, lands with a deterministic three-frame shake, holds with subtle drift, and whips upward on exit."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/headline-slam.html"
+  compositionId="headline-slam"
+  compositionSrc="compositions/components/headline-slam.html"
+  variables={[{"id":"text","type":"string","role":"content","label":"Headline","description":"Text displayed as the headline.","default":"Ship it today"},{"id":"accent_word_index","type":"number","role":"content","label":"Accent word index","description":"Zero-based word index to color. Out of range leaves the headline unaccented.","default":1,"step":1},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Color applied to the selected word.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"shadow","type":"boolean","role":"style","label":"Shadow","description":"Drop shadow cast under the headline. On by default; set false for a flat matte look.","default":true}]}
+>
+
+```html headline-slam.html
+<!doctype html>
+<!--
+  headline-slam: HyperFrames video primitive
+
+  One headline scales down from 1.6 to rest with expo.out weight. Its landing
+  drives a deterministic three-frame stage shake, followed by a quiet drift
+  and a fast upward exit.
+
+  Variables:
+    text: headline copy
+    accent_word_index: zero-based word index to color, out of range colors none
+    accent: green, blue, or violet accent color
+    shadow: drop shadow under the headline, on by default
+
+  Envelope, fixed IN and OUT with elastic HOLD:
+    IN_BASE  = 0.72s, headline slam and three-frame impact shake
+    HOLD     = max(0, D - IN - OUT), one subtle drift cycle
+    OUT_BASE = 0.46s, headline whips upward out of frame
+    If D is shorter than IN_BASE + OUT_BASE, IN and OUT compress together.
+    The timeline is never time-scaled.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, and has no data-width or
+  data-height. One paused timeline registers under the literal headline-slam
+  key.
+-->
+<html
+  lang="en"
+  data-composition-id="headline-slam"
+  data-composition-duration="3.5"
+  data-composition-variables='[
+    { "id": "text", "type": "string", "role": "content", "label": "Headline", "description": "Text displayed as the headline.", "default": "Ship it today" },
+    { "id": "accent_word_index", "type": "number", "role": "content", "label": "Accent word index", "description": "Zero-based word index to color. Out of range leaves the headline unaccented.", "default": 1, "step": 1 },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Color applied to the selected word.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "shadow", "type": "boolean", "role": "style", "label": "Shadow", "description": "Drop shadow cast under the headline. On by default; set false for a flat matte look.", "default": true }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Headline Slam</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="headline-slam" data-duration="3.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .hs-clip,
+          .hs-stage {
+            position: absolute;
+            inset: 0;
+            width: 100cqw;
+            height: 100cqh;
+          }
+
+          .hs-clip {
+            overflow: hidden;
+          }
+
+          .hs-stage {
+            display: grid;
+            place-items: center;
+            will-change: transform;
+          }
+
+          .hs-headline {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 2cqw;
+            width: 90cqw;
+            min-height: 22cqh;
+            color: var(--fg, #f8fafc);
+            font-size: var(--hs-font-size, 10.5cqw);
+            font-weight: 900;
+            line-height: 0.88;
+            letter-spacing: -0.5cqw;
+            text-align: center;
+            white-space: nowrap;
+            transform-origin: 50% 50%;
+            will-change: transform, opacity;
+          }
+
+          /* Shadow is on by default; the shadow variable opts out of it. */
+          .hs-headline.hs-shadow {
+            text-shadow: 0 1.2cqh 4.5cqh color-mix(in srgb, #000 52%, transparent);
+          }
+
+          .hs-word {
+            display: inline-block;
+          }
+
+          .hs-word-accent {
+            color: var(--hs-accent, #71f5a7);
+          }
+        </style>
+
+        <div
+          id="headline-slam-clip"
+          class="hs-clip clip"
+          data-start="0"
+          data-duration="3.5"
+          data-track-index="0"
+        >
+          <div class="hs-stage">
+            <div class="hs-headline" role="heading" aria-level="1"></div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".hs-stage");
+            var headline = root.querySelector(".hs-headline");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var text = vars.text == null ? "Ship it today" : String(vars.text);
+            var indexValue = Number(vars.accent_word_index);
+            var accentWordIndex = Number.isFinite(indexValue) ? Math.trunc(indexValue) : 1;
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #b895ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var shadow = !(vars.shadow === false || vars.shadow === "false");
+            var words = text.trim() === "" ? [] : text.trim().split(/\s+/);
+
+            root.style.setProperty("--hs-accent", accentColors[accent]);
+            headline.classList.toggle("hs-shadow", shadow);
+            headline.setAttribute("aria-label", text);
+
+            words.forEach(function (word, index) {
+              var span = document.createElement("span");
+              span.className = index === accentWordIndex ? "hs-word hs-word-accent" : "hs-word";
+              span.textContent = word;
+              span.setAttribute("aria-hidden", "true");
+              headline.appendChild(span);
+            });
+
+            // Deterministic fit from character count: DOM measurement is zero at
+            // mount time (the template is not laid out yet), so it never fires.
+            // 0.62 approximates the average glyph/em width of the bold face; the
+            // 56cqw rest-state cap keeps the 1.6x overshoot peak inside 90cqw.
+            var approxWidthCqw = text.length * 10.5 * 0.62;
+            if (approxWidthCqw > 56) {
+              var fitted = Math.max(3.5, 56 / (text.length * 0.62));
+              root.style.setProperty("--hs-font-size", fitted.toFixed(2) + "cqw");
+            }
+
+            var IN_BASE = 0.72;
+            var OUT_BASE = 0.46;
+            var LAND_AT_BASE = 0.58;
+            var SHAKE_FRAME_BASE = 1 / 30;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "3.5"));
+            var baseTotal = IN_BASE + OUT_BASE;
+            var envelopeScale = duration < baseTotal ? duration / baseTotal : 1;
+            var IN = IN_BASE * envelopeScale;
+            var OUT = OUT_BASE * envelopeScale;
+            var LAND_AT = LAND_AT_BASE * envelopeScale;
+            var SHAKE_FRAME = SHAKE_FRAME_BASE * envelopeScale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var HOLD_START = IN;
+            var OUT_START = IN + HOLD;
+
+            var tl = gsap.timeline({ paused: true });
+
+            tl.fromTo(
+              headline,
+              { scale: 1.6, opacity: 0, y: 0 },
+              { scale: 1, opacity: 1, y: 0, duration: LAND_AT, ease: "expo.out" },
+              0,
+            );
+
+            tl.to(
+              stage,
+              { x: "0.55cqw", y: "-0.3cqh", duration: SHAKE_FRAME, ease: "power2.out" },
+              LAND_AT,
+            );
+            tl.to(stage, {
+              x: "-0.38cqw",
+              y: "0.2cqh",
+              duration: SHAKE_FRAME,
+              ease: "power2.out",
+            });
+            tl.to(stage, { x: 0, y: 0, duration: SHAKE_FRAME, ease: "power2.out" });
+
+            if (HOLD > 0) {
+              tl.fromTo(
+                headline,
+                { y: 0 },
+                {
+                  y: "-0.55cqh",
+                  duration: HOLD / 2,
+                  ease: "sine.inOut",
+                  yoyo: true,
+                  repeat: 1,
+                  immediateRender: false,
+                },
+                HOLD_START,
+              );
+            }
+
+            tl.to(headline, { y: "-120cqh", duration: OUT, ease: "power4.in" }, OUT_START);
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["headline-slam"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add headline-slam" />
+
+That writes one file: `compositions/components/headline-slam.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/headline-slam.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `typography` `headline` `slam` `impact` `exit`.
+
+## 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/components/hw-arrow.mdx b/docs/catalog/components/hw-arrow.mdx
index f493c0272f..6490adb1bc 100644
--- a/docs/catalog/components/hw-arrow.mdx
+++ b/docs/catalog/components/hw-arrow.mdx
@@ -3,13 +3,13 @@ title: "Hand-Drawn Arrow"
 description: "Wobbled draw-on arrow with straight, gentle, and swoop curve presets; boils while on screen"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/hw-arrow.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/hw-arrow.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/components/hw-arrow.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Hand-Drawn Arrow preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add hw-arrow
-```
+<InstallCommand command="npx hyperframes add hw-arrow" />
 
 That writes `compositions/components/hw-arrow.html`, plus 1 supporting file under `assets/fonts/`.
 
@@ -20,6 +20,233 @@ Open `compositions/components/hw-arrow.html` and copy what is inside into your o
 A component has no size or duration of its own. It takes both from the composition
 you paste it into.
 
+## Source
+
+<Accordion title={`hw-arrow.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      @font-face {
+        font-family: "Caveat";
+        src: url("assets/fonts/Caveat-700-latin.woff2") format("woff2");
+        font-weight: 700;
+        font-display: block;
+      }
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      /* ---- hw-arrow ------------------------------------------------------
+         Hand-wobbled draw-on arrow, boiling. Position the wrapper, pick a
+         curve preset, call the helpers. Requires the hw-boil helpers
+         (hwOnUpdate / hwHash / hwBoil) in the host script. */
+      .hw-arrow {
+        position: absolute;
+        pointer-events: none;
+      }
+      .hw-arrow svg {
+        width: 100%;
+        height: 100%;
+        overflow: visible;
+      }
+      .hw-arrow path {
+        fill: none;
+        stroke: var(--hw-arrow-color, var(--hw-ink, #f4f2ec));
+        stroke-width: var(--hw-arrow-w, 6);
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+      .hw-arrow.hw-soft path {
+        filter: blur(0.6px);
+      }
+      /* self-preview scene */
+      #hw-ar-scene {
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(135deg, #274060 0%, #123 100%);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-family: var(--hw-font-print, "Caveat", cursive);
+        font-weight: 700;
+        font-size: 80px;
+        color: rgba(244, 242, 236, 0.92);
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Self-preview. WIRING: copy the .hw-arrow CSS, the markup pattern,
+         and the hwArrowPath / hwArrowOn / hwArrowOff helpers (plus the
+         hw-boil helpers) into your host. Then:
+
+           document.querySelector("#hw-my-arrow path")
+             .setAttribute("d", hwArrowPath(360, 160, "swoop", 3));
+           hwArrowOn(tl, "#hw-my-arrow", 2.0);
+           hwBoil(tl, "#hw-my-arrow", { frameDrop: 3, seed: 3 });
+           hwArrowOff(tl, "#hw-my-arrow", 8.0);
+    -->
+    <div
+      id="hw-ar-root"
+      data-composition-id="hw-arrow"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="hw-ar-scene"><span>point at things</span></div>
+      <div
+        class="hw-arrow"
+        id="hw-ar-demo"
+        style="left: 560px; top: 320px; width: 380px; height: 180px"
+      >
+        <svg viewBox="0 0 380 180"><path id="hw-ar-demo-path"></path></svg>
+      </div>
+      <div
+        id="hw-ar-drv"
+        class="clip"
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- hw-boil helpers (shared family runtime — copy once per host) ---- */
+        window.hwOnUpdate = function (tl, fn) {
+          if (!tl.__hwRenders) {
+            tl.__hwRenders = [];
+            tl.eventCallback("onUpdate", function () {
+              for (var i = 0; i < tl.__hwRenders.length; i++) tl.__hwRenders[i]();
+            });
+          }
+          tl.__hwRenders.push(fn);
+          fn();
+        };
+        window.hwHash = function (n, seed) {
+          var x = Math.sin(n * 127.1 + (seed || 1) * 311.7) * 43758.5453;
+          return (x - Math.floor(x)) * 2 - 1;
+        };
+        window.hwBoil = function (tl, target, opts) {
+          opts = opts || {};
+          var amp = opts.amp !== undefined ? opts.amp : 1.6;
+          var rot = opts.rot !== undefined ? opts.rot : 0.5;
+          var fps = opts.fps || 30;
+          var drop = opts.frameDrop || 3;
+          var seed = opts.seed || 1;
+          var els = gsap.utils.toArray(target);
+          window.hwOnUpdate(tl, function () {
+            var step = Math.floor((tl.time() * fps) / drop);
+            for (var i = 0; i < els.length; i++) {
+              gsap.set(els[i], {
+                x: window.hwHash(step * 3 + i * 97, seed) * amp,
+                y: window.hwHash(step * 3 + 1 + i * 97, seed) * amp,
+                rotation: (opts.baseRot || 0) + window.hwHash(step * 3 + 2 + i * 97, seed) * rot,
+              });
+            }
+          });
+        };
+
+        // ---- hw-arrow helpers (copy these too) ----
+        // Wobbled arrow path in a w x h box, tail at left, head at right.
+        // curve: "straight" | "gentle" | "swoop"
+        window.hwArrowPath = function (w, h, curve, seed) {
+          seed = seed || 1;
+          var bend = curve === "swoop" ? 0.55 : curve === "gentle" ? 0.28 : 0.06;
+          function wob(v, n, range) {
+            return v + window.hwHash(n, seed) * range;
+          }
+          var x0 = wob(4, 1, 3),
+            y0 = wob(h * 0.72, 2, 4),
+            x1 = wob(w - 10, 3, 4),
+            y1 = wob(h * 0.3, 4, 4);
+          var cx1 = wob(w * 0.35, 5, 10),
+            cy1 = wob(h * (0.72 + bend * 0.5), 6, 8);
+          var cx2 = wob(w * 0.7, 7, 10),
+            cy2 = wob(h * (0.3 + bend), 8, 8);
+          var ang = Math.atan2(y1 - cy2, x1 - cx2);
+          function head(da, len) {
+            var a = ang + Math.PI + da;
+            return (
+              "M " +
+              x1.toFixed(1) +
+              " " +
+              y1.toFixed(1) +
+              " l " +
+              (Math.cos(a) * len).toFixed(1) +
+              " " +
+              (Math.sin(a) * len).toFixed(1)
+            );
+          }
+          return (
+            "M " +
+            x0.toFixed(1) +
+            " " +
+            y0.toFixed(1) +
+            " C " +
+            cx1.toFixed(1) +
+            " " +
+            cy1.toFixed(1) +
+            ", " +
+            cx2.toFixed(1) +
+            " " +
+            cy2.toFixed(1) +
+            ", " +
+            x1.toFixed(1) +
+            " " +
+            y1.toFixed(1) +
+            " " +
+            head(0.5, wob(34, 9, 6)) +
+            " " +
+            head(-0.5, wob(34, 10, 6))
+          );
+        };
+        window.hwArrowOn = function (tl, target, at, dur) {
+          var p = document.querySelector(target + " path");
+          var len = p.getTotalLength();
+          gsap.set(p, { strokeDasharray: len, strokeDashoffset: len });
+          tl.to(
+            p,
+            { strokeDashoffset: 0, duration: dur === undefined ? 0.7 : dur, ease: "power2.inOut" },
+            at,
+          );
+        };
+        window.hwArrowOff = function (tl, target, at) {
+          tl.to(target, { opacity: 0, duration: 0.3, ease: "power2.in" }, at);
+        };
+
+        // ---- self-preview ----
+        document
+          .getElementById("hw-ar-demo-path")
+          .setAttribute("d", window.hwArrowPath(380, 180, "swoop", 7));
+        var tl = gsap.timeline({ paused: true });
+        window.hwArrowOn(tl, "#hw-ar-demo", 0.4);
+        window.hwBoil(tl, "#hw-ar-demo", { amp: 2, rot: 0.6, frameDrop: 3, seed: 7 });
+        window.hwArrowOff(tl, "#hw-ar-demo", 3.4);
+        tl.set("#hw-ar-root", { visibility: "hidden" }, 3.98);
+        window.__timelines["hw-arrow"] = tl;
+      })();
+    </script>
+  </body>
+</html>
+```
+
+</Accordion>
+
 {/* hf:generated-footer */}
 
 Tagged `handwritten` `annotation` `arrow` `overlay`.
diff --git a/docs/catalog/components/hw-boil.mdx b/docs/catalog/components/hw-boil.mdx
index 5883808aaf..ffa4323e1c 100644
--- a/docs/catalog/components/hw-boil.mdx
+++ b/docs/catalog/components/hw-boil.mdx
@@ -3,13 +3,13 @@ title: "Hand-Drawn Boil"
 description: "Hand-drawn jitter that re-poses every N frames, as seek-safe helpers: pose derives from quantized timeline time through a seeded hash; includes the shared onUpdate dispatcher and a wobbled-ellipse path generator"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/hw-boil.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/hw-boil.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/components/hw-boil.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Hand-Drawn Boil preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add hw-boil
-```
+<InstallCommand command="npx hyperframes add hw-boil" />
 
 That writes `compositions/components/hw-boil.html`, plus 1 supporting file under `assets/fonts/`.
 
@@ -20,6 +20,241 @@ Open `compositions/components/hw-boil.html` and copy what is inside into your ow
 A component has no size or duration of its own. It takes both from the composition
 you paste it into.
 
+## Source
+
+<Accordion title={`hw-boil.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      /* Caveat is NOT auto-resolved by the renderer — bundle it. Asset
+         paths are ROOT-RELATIVE (the project root is the base URL for all
+         compositions; ../ traversal is a lint error). Registry installs
+         ship the woff2 as an asset file targeting assets/fonts/. */
+      @font-face {
+        font-family: "Caveat";
+        src: url("assets/fonts/Caveat-700-latin.woff2") format("woff2");
+        font-weight: 700;
+        font-display: block;
+      }
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      /* ---- hw-boil -----------------------------------------------------
+         The hand-drawn "boil": jitter that re-poses only every N frames
+         (quake + frame-drop style). Pose is a pure function of quantized
+         timeline time through a seeded hash — fully seek-safe, renders
+         identically on every pass over the same frame.
+
+         RULES:
+         - hwBoil owns x/y/rotation of the boiled element. Entrance/exit
+           tweens go on a WRAPPER around it, never the boiled element.
+         - One timeline has ONE onUpdate — hwOnUpdate is the dispatcher
+           that lets the boil coexist with sweep scalars etc. Register
+           every onUpdate-style render through it. */
+      #hw-boil-root {
+        --hw-font-print: "Caveat", cursive;
+        --hw-font-script: "Caveat", cursive;
+        --hw-ink: #f4f2ec;
+        --hw-accent: #6d6dff;
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #17161a;
+        font-family: var(--hw-font-print, "Caveat", cursive);
+      }
+      #hw-boil-root svg {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+      }
+      #hw-boil-root path {
+        fill: none;
+        stroke: var(--hw-ink);
+        stroke-width: 6;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+      #hw-b-arrow {
+        stroke: var(--hw-accent);
+        stroke-width: 7;
+      }
+      .hw-b-label {
+        position: absolute;
+        font-weight: 700;
+        font-size: 84px;
+        color: var(--hw-ink);
+        white-space: nowrap;
+      }
+      .hw-b-tag {
+        position: absolute;
+        font-family: "Inter", ui-sans-serif, sans-serif;
+        font-weight: 500;
+        font-size: 22px;
+        letter-spacing: 0.12em;
+        color: rgba(244, 242, 236, 0.45);
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Self-preview. WIRING: copy the hwOnUpdate / hwHash / hwBoil /
+         hwWobbleEllipse helpers into your host script, then:
+
+           hwBoil(tl, "#hw-my-annotation", { amp: 1.6, rot: 0.5, frameDrop: 3, seed: 2 });
+
+         frameDrop 3-4 = classic boil; 1 = frantic; boil: off = don't call it. -->
+    <div
+      id="hw-boil-root"
+      data-composition-id="hw-boil"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <svg viewBox="0 0 1920 1080">
+        <g id="hw-b-circle-g"><path id="hw-b-circle"></path></g>
+        <g id="hw-b-arrow-g">
+          <path
+            id="hw-b-arrow"
+            d="M 640 640 C 760 700, 980 720, 1130 620 M 1130 620 l -64 -6 M 1130 620 l -18 58"
+          ></path>
+        </g>
+      </svg>
+      <div class="hw-b-label" id="hw-b-word" style="left: 1230px; top: 560px">the boil</div>
+      <div class="hw-b-tag" style="left: 350px; top: 782px">FRAME DROP 3</div>
+      <div class="hw-b-tag" style="left: 700px; top: 782px">FRAME DROP 1</div>
+      <div class="hw-b-tag" style="left: 1230px; top: 700px">TEXT, AMP 1.2</div>
+      <div
+        id="hw-b-drv"
+        class="clip"
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        // ---- copy these helpers into the host script ----
+
+        // Dispatcher: a GSAP timeline has ONE onUpdate. Register every
+        // per-frame render (boils, sweep scalars) through this instead of
+        // setting eventCallback directly, and they all coexist.
+        window.hwOnUpdate = function (tl, fn) {
+          if (!tl.__hwRenders) {
+            tl.__hwRenders = [];
+            tl.eventCallback("onUpdate", function () {
+              for (var i = 0; i < tl.__hwRenders.length; i++) tl.__hwRenders[i]();
+            });
+          }
+          tl.__hwRenders.push(fn);
+          fn();
+        };
+
+        // Seeded hash -> [-1, 1]. Pure function of n — no Math.random().
+        window.hwHash = function (n, seed) {
+          var x = Math.sin(n * 127.1 + (seed || 1) * 311.7) * 43758.5453;
+          return (x - Math.floor(x)) * 2 - 1;
+        };
+
+        // The boil. Owns x/y/rotation of its targets — put entrance tweens
+        // on a wrapper. frameDrop = re-pose every N frames (3-4 classic).
+        window.hwBoil = function (tl, target, opts) {
+          opts = opts || {};
+          var amp = opts.amp !== undefined ? opts.amp : 1.6;
+          var rot = opts.rot !== undefined ? opts.rot : 0.5;
+          var fps = opts.fps || 30;
+          var drop = opts.frameDrop || 3;
+          var seed = opts.seed || 1;
+          var els = gsap.utils.toArray(target);
+          window.hwOnUpdate(tl, function () {
+            var step = Math.floor((tl.time() * fps) / drop);
+            for (var i = 0; i < els.length; i++) {
+              gsap.set(els[i], {
+                x: window.hwHash(step * 3 + i * 97, seed) * amp,
+                y: window.hwHash(step * 3 + 1 + i * 97, seed) * amp,
+                rotation: (opts.baseRot || 0) + window.hwHash(step * 3 + 2 + i * 97, seed) * rot,
+              });
+            }
+          });
+        };
+
+        // Seeded hand-wobbled ellipse path (smooth quadratic chain).
+        window.hwWobbleEllipse = function (cx, cy, rx, ry, seed, wobblePct) {
+          wobblePct = wobblePct === undefined ? 3 : wobblePct;
+          var N = 14,
+            pts = [];
+          for (var i = 0; i < N; i++) {
+            var a = (i / N) * Math.PI * 2;
+            var wr = 1 + window.hwHash(i * 13 + 5, seed) * (wobblePct / 100);
+            pts.push([cx + Math.cos(a) * rx * wr, cy + Math.sin(a) * ry * wr]);
+          }
+          var mx = (pts[0][0] + pts[N - 1][0]) / 2,
+            my = (pts[0][1] + pts[N - 1][1]) / 2;
+          var d = "M" + mx.toFixed(1) + " " + my.toFixed(1);
+          for (var j = 0; j < N; j++) {
+            var p = pts[j],
+              q = pts[(j + 1) % N];
+            d +=
+              " Q" +
+              p[0].toFixed(1) +
+              " " +
+              p[1].toFixed(1) +
+              " " +
+              ((p[0] + q[0]) / 2).toFixed(1) +
+              " " +
+              ((p[1] + q[1]) / 2).toFixed(1);
+          }
+          return d;
+        };
+
+        // ---- self-preview (not part of the snippet you copy) ----
+        var circle = document.getElementById("hw-b-circle");
+        circle.setAttribute("d", window.hwWobbleEllipse(460, 620, 190, 130, 4, 3.2));
+
+        var tl = gsap.timeline({ paused: true });
+
+        /* draw-on entrances (strokeDashoffset — never x/y, the boil owns those) */
+        [circle, document.getElementById("hw-b-arrow")].forEach(function (p, i) {
+          var len = p.getTotalLength();
+          gsap.set(p, { strokeDasharray: len, strokeDashoffset: len });
+          tl.to(p, { strokeDashoffset: 0, duration: 0.8, ease: "power2.inOut" }, 0.3 + i * 0.35);
+        });
+        gsap.set("#hw-b-word", { opacity: 0 });
+        tl.to("#hw-b-word", { opacity: 1, duration: 0.5, ease: "power2.out" }, 1.1);
+
+        /* three boils with different characters, one dispatcher */
+        window.hwBoil(tl, "#hw-b-circle-g", { amp: 2.2, rot: 0.4, frameDrop: 3, seed: 2 });
+        window.hwBoil(tl, "#hw-b-arrow-g", { amp: 2.6, rot: 0.7, frameDrop: 1, seed: 5 });
+        window.hwBoil(tl, "#hw-b-word", { amp: 1.2, rot: 0.35, frameDrop: 3, seed: 9 });
+
+        tl.set("#hw-boil-root", { visibility: "hidden" }, 3.98);
+        window.__timelines["hw-boil"] = tl;
+      })();
+    </script>
+  </body>
+</html>
+```
+
+</Accordion>
+
 {/* hf:generated-footer */}
 
 Tagged `handwritten` `effect` `annotation`.
diff --git a/docs/catalog/components/hw-box-label.mdx b/docs/catalog/components/hw-box-label.mdx
index 323da55c7b..73983cd5c4 100644
--- a/docs/catalog/components/hw-box-label.mdx
+++ b/docs/catalog/components/hw-box-label.mdx
@@ -3,13 +3,13 @@ title: "Hand-Drawn Box Label"
 description: "Wobbled rounded rectangle draws around a region with a handwritten label above or centered"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/hw-box-label.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/hw-box-label.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/components/hw-box-label.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Hand-Drawn Box Label preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add hw-box-label
-```
+<InstallCommand command="npx hyperframes add hw-box-label" />
 
 That writes `compositions/components/hw-box-label.html`, plus 1 supporting file under `assets/fonts/`.
 
@@ -20,6 +20,229 @@ Open `compositions/components/hw-box-label.html` and copy what is inside into yo
 A component has no size or duration of its own. It takes both from the composition
 you paste it into.
 
+## Source
+
+<Accordion title={`hw-box-label.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      @font-face {
+        font-family: "Caveat";
+        src: url("assets/fonts/Caveat-700-latin.woff2") format("woff2");
+        font-weight: 700;
+        font-display: block;
+      }
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      /* ---- hw-box-label ----------------------------------------------------
+         Rounded hand-drawn box + marker label (map-label style annotations).
+         Requires the hw-boil helpers in the host. */
+      .hw-box {
+        position: absolute;
+        pointer-events: none;
+      }
+      .hw-box svg {
+        width: 100%;
+        height: 100%;
+        overflow: visible;
+      }
+      .hw-box path {
+        fill: none;
+        stroke: var(--hw-box-ink, var(--hw-ink, #f4f2ec));
+        stroke-width: var(--hw-box-w, 6);
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+      .hw-box .hw-bx-label {
+        position: absolute;
+        width: 100%;
+        text-align: center;
+        font-family: var(--hw-font-print, "Caveat", cursive);
+        font-weight: 700;
+        font-size: 52px;
+        color: var(--hw-box-ink, var(--hw-ink, #f4f2ec));
+        white-space: nowrap;
+        opacity: 0;
+        text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
+      }
+      /* self-preview scene */
+      #hw-bx-scene {
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(140deg, #4a3560 0%, #1c1423 100%);
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Self-preview. WIRING: copy the .hw-box CSS + markup pattern, the
+         hwWobbleRect / hwBoxBuild / hwBoxOn / hwBoxOff helpers, AND the
+         hw-boil helpers. Size the wrapper over your target, then:
+
+           hwBoxBuild("#hw-my-box", { seed: 3, label: "Europe", labelPos: "above" });
+           hwBoxOn(tl, "#hw-my-box", 2.0);
+           hwBoil(tl, "#hw-my-box", { frameDrop: 3, seed: 3 });
+           hwBoxOff(tl, "#hw-my-box", 8.0);
+    -->
+    <div
+      id="hw-bx-root"
+      data-composition-id="hw-box-label"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="hw-bx-scene"></div>
+      <div
+        class="hw-box"
+        id="hw-bx-demo"
+        style="left: 700px; top: 420px; width: 420px; height: 230px"
+      >
+        <svg viewBox="0 0 420 230"><path id="hw-bx-demo-path"></path></svg>
+        <div class="hw-bx-label" id="hw-bx-demo-label"></div>
+      </div>
+      <div
+        id="hw-bx-drv"
+        class="clip"
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- hw-boil helpers (shared family runtime — copy once per host) ---- */
+        window.hwOnUpdate = function (tl, fn) {
+          if (!tl.__hwRenders) {
+            tl.__hwRenders = [];
+            tl.eventCallback("onUpdate", function () {
+              for (var i = 0; i < tl.__hwRenders.length; i++) tl.__hwRenders[i]();
+            });
+          }
+          tl.__hwRenders.push(fn);
+          fn();
+        };
+        window.hwHash = function (n, seed) {
+          var x = Math.sin(n * 127.1 + (seed || 1) * 311.7) * 43758.5453;
+          return (x - Math.floor(x)) * 2 - 1;
+        };
+        window.hwBoil = function (tl, target, opts) {
+          opts = opts || {};
+          var amp = opts.amp !== undefined ? opts.amp : 1.6;
+          var rot = opts.rot !== undefined ? opts.rot : 0.5;
+          var fps = opts.fps || 30;
+          var drop = opts.frameDrop || 3;
+          var seed = opts.seed || 1;
+          var els = gsap.utils.toArray(target);
+          window.hwOnUpdate(tl, function () {
+            var step = Math.floor((tl.time() * fps) / drop);
+            for (var i = 0; i < els.length; i++) {
+              gsap.set(els[i], {
+                x: window.hwHash(step * 3 + i * 97, seed) * amp,
+                y: window.hwHash(step * 3 + 1 + i * 97, seed) * amp,
+                rotation: (opts.baseRot || 0) + window.hwHash(step * 3 + 2 + i * 97, seed) * rot,
+              });
+            }
+          });
+        };
+
+        // ---- hw-box helpers (copy these too) ----
+        // Wobbled rounded-rect path in a w x h box.
+        window.hwWobbleRect = function (w, h, r, seed, amp) {
+          amp = amp === undefined ? 3.5 : amp;
+          function wob(n) {
+            return window.hwHash(n, seed) * amp;
+          }
+          var d = "M " + (r + wob(1)) + " " + wob(2);
+          d += " L " + (w / 2 + wob(3)) + " " + wob(4);
+          d += " L " + (w - r + wob(5)) + " " + wob(6);
+          d += " Q " + (w + wob(7)) + " " + wob(8) + " " + (w + wob(9)) + " " + (r + wob(10));
+          d += " L " + (w + wob(11)) + " " + (h / 2 + wob(12));
+          d += " L " + (w + wob(13)) + " " + (h - r + wob(14));
+          d +=
+            " Q " +
+            (w + wob(15)) +
+            " " +
+            (h + wob(16)) +
+            " " +
+            (w - r + wob(17)) +
+            " " +
+            (h + wob(18));
+          d += " L " + (w / 2 + wob(19)) + " " + (h + wob(20));
+          d += " L " + (r + wob(21)) + " " + (h + wob(22));
+          d += " Q " + wob(23) + " " + (h + wob(24)) + " " + wob(25) + " " + (h - r + wob(26));
+          d += " L " + wob(27) + " " + (h / 2 + wob(28));
+          d += " L " + wob(29) + " " + (r + wob(30));
+          d += " Q " + wob(31) + " " + wob(32) + " " + (r + wob(33)) + " " + wob(34);
+          return d;
+        };
+        window.hwBoxBuild = function (target, opts) {
+          opts = opts || {};
+          var el = document.querySelector(target);
+          var svg = el.querySelector("svg");
+          var vb = svg.getAttribute("viewBox").split(" ");
+          var W = parseFloat(vb[2]),
+            H = parseFloat(vb[3]);
+          el.querySelector("path").setAttribute(
+            "d",
+            window.hwWobbleRect(W, H, Math.min(26, W * 0.1), opts.seed || 1),
+          );
+          var label = el.querySelector(".hw-bx-label");
+          label.textContent = opts.label || "";
+          if ((opts.labelPos || "above") === "above") {
+            label.style.top = "-64px";
+          } else {
+            label.style.top = "50%";
+            label.style.transform = "translateY(-50%)";
+          }
+        };
+        window.hwBoxOn = function (tl, target, at) {
+          var p = document.querySelector(target + " path");
+          var len = p.getTotalLength();
+          gsap.set(p, { strokeDasharray: len, strokeDashoffset: len });
+          tl.to(p, { strokeDashoffset: 0, duration: 0.75, ease: "power2.inOut" }, at);
+          tl.to(
+            document.querySelector(target + " .hw-bx-label"),
+            { opacity: 1, duration: 0.4, ease: "power2.out" },
+            at + 0.55,
+          );
+        };
+        window.hwBoxOff = function (tl, target, at) {
+          tl.to(target, { opacity: 0, duration: 0.35, ease: "power2.in" }, at);
+        };
+
+        // ---- self-preview ----
+        window.hwBoxBuild("#hw-bx-demo", { seed: 3, label: "Europe", labelPos: "above" });
+        var tl = gsap.timeline({ paused: true });
+        window.hwBoxOn(tl, "#hw-bx-demo", 0.4);
+        window.hwBoil(tl, "#hw-bx-demo", { amp: 1.8, rot: 0.4, frameDrop: 3, seed: 3 });
+        window.hwBoxOff(tl, "#hw-bx-demo", 3.4);
+        tl.set("#hw-bx-root", { visibility: "hidden" }, 3.98);
+        window.__timelines["hw-box-label"] = tl;
+      })();
+    </script>
+  </body>
+</html>
+```
+
+</Accordion>
+
 {/* hf:generated-footer */}
 
 Tagged `handwritten` `annotation` `overlay`.
diff --git a/docs/catalog/components/hw-callout-circle.mdx b/docs/catalog/components/hw-callout-circle.mdx
index 9066ff2afb..3aa6e8fd8d 100644
--- a/docs/catalog/components/hw-callout-circle.mdx
+++ b/docs/catalog/components/hw-callout-circle.mdx
@@ -3,13 +3,13 @@ title: "Scribble Callout Circle"
 description: "Wobbled ellipse draws around a target with optional scribble fill, curved connector, and handwritten label"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/hw-callout-circle.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/hw-callout-circle.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/components/hw-callout-circle.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Scribble Callout Circle preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add hw-callout-circle
-```
+<InstallCommand command="npx hyperframes add hw-callout-circle" />
 
 That writes `compositions/components/hw-callout-circle.html`, plus 1 supporting file under `assets/fonts/`.
 
@@ -20,6 +20,329 @@ Open `compositions/components/hw-callout-circle.html` and copy what is inside in
 A component has no size or duration of its own. It takes both from the composition
 you paste it into.
 
+## Source
+
+<Accordion title={`hw-callout-circle.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      @font-face {
+        font-family: "Caveat";
+        src: url("assets/fonts/Caveat-700-latin.woff2") format("woff2");
+        font-weight: 700;
+        font-display: block;
+      }
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      /* ---- hw-callout-circle ----------------------------------------------
+         The full callout anatomy: wobbled ellipse outline draws around a
+         target, optional scribble fill sketches in, a curved connector leads
+         to a handwritten label. Requires the hw-boil helpers in the host. */
+      .hw-callout {
+        position: absolute;
+        pointer-events: none;
+      }
+      .hw-callout svg {
+        width: 100%;
+        height: 100%;
+        overflow: visible;
+      }
+      .hw-callout path {
+        fill: none;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+      .hw-callout .hw-co-outline {
+        stroke: var(--hw-co-ink, var(--hw-ink, #f4f2ec));
+        stroke-width: var(--hw-co-w, 6);
+      }
+      .hw-callout .hw-co-scribble {
+        /* Warm marker accent to match hw-frame / hw-title / hw-underline; the
+           previous blue read as a default UI colour. Lighter weight and alpha
+           so the hatch sits behind the labelled subject instead of over it. */
+        stroke: var(--hw-co-accent, var(--hw-accent, #ffb020));
+        stroke-width: 3;
+        opacity: 0.42;
+      }
+      .hw-callout .hw-co-connector {
+        stroke: var(--hw-co-ink, var(--hw-ink, #f4f2ec));
+        stroke-width: 4;
+      }
+      .hw-callout .hw-co-label {
+        position: absolute;
+        font-family: var(--hw-font-print, "Caveat", cursive);
+        font-weight: 700;
+        font-size: 54px;
+        color: var(--hw-co-ink, var(--hw-ink, #f4f2ec));
+        white-space: nowrap;
+        opacity: 0;
+        text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
+      }
+      /* self-preview scene */
+      #hw-co-scene {
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(150deg, #35604a 0%, #14231c 100%);
+      }
+      #hw-co-target {
+        position: absolute;
+        left: 700px;
+        top: 420px;
+        width: 220px;
+        height: 150px;
+        border-radius: 18px;
+        background: rgba(244, 242, 236, 0.18);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-family: "Inter", ui-sans-serif, sans-serif;
+        font-weight: 600;
+        font-size: 30px;
+        color: rgba(244, 242, 236, 0.8);
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Self-preview. WIRING: copy the .hw-callout CSS + markup pattern, the
+         hwCalloutBuild / hwCalloutOn / hwCalloutOff helpers, AND the hw-boil
+         helpers. Size the wrapper around your target, then:
+
+           hwCalloutBuild("#hw-my-callout", { scribble: true, seed: 4,
+             label: "look here!", labelAt: "right" });
+           hwCalloutOn(tl, "#hw-my-callout", 2.0);
+           hwBoil(tl, "#hw-my-callout", { frameDrop: 3, seed: 4 });
+           hwCalloutOff(tl, "#hw-my-callout", 8.0);
+    -->
+    <div
+      id="hw-co-root"
+      data-composition-id="hw-callout-circle"
+      data-start="0"
+      data-duration="5"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="hw-co-scene"></div>
+      <div id="hw-co-target">subject</div>
+      <div
+        class="hw-callout"
+        id="hw-co-demo"
+        style="left: 640px; top: 370px; width: 340px; height: 250px"
+      >
+        <svg viewBox="0 0 340 250">
+          <path class="hw-co-scribble" id="hw-co-demo-scribble"></path>
+          <path class="hw-co-outline" id="hw-co-demo-outline"></path>
+          <path class="hw-co-connector" id="hw-co-demo-connector"></path>
+        </svg>
+        <div class="hw-co-label" id="hw-co-demo-label"></div>
+      </div>
+      <div
+        id="hw-co-drv"
+        class="clip"
+        data-start="0"
+        data-duration="5"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- hw-boil helpers (shared family runtime — copy once per host) ---- */
+        window.hwOnUpdate = function (tl, fn) {
+          if (!tl.__hwRenders) {
+            tl.__hwRenders = [];
+            tl.eventCallback("onUpdate", function () {
+              for (var i = 0; i < tl.__hwRenders.length; i++) tl.__hwRenders[i]();
+            });
+          }
+          tl.__hwRenders.push(fn);
+          fn();
+        };
+        window.hwHash = function (n, seed) {
+          var x = Math.sin(n * 127.1 + (seed || 1) * 311.7) * 43758.5453;
+          return (x - Math.floor(x)) * 2 - 1;
+        };
+        window.hwBoil = function (tl, target, opts) {
+          opts = opts || {};
+          var amp = opts.amp !== undefined ? opts.amp : 1.6;
+          var rot = opts.rot !== undefined ? opts.rot : 0.5;
+          var fps = opts.fps || 30;
+          var drop = opts.frameDrop || 3;
+          var seed = opts.seed || 1;
+          var els = gsap.utils.toArray(target);
+          window.hwOnUpdate(tl, function () {
+            var step = Math.floor((tl.time() * fps) / drop);
+            for (var i = 0; i < els.length; i++) {
+              gsap.set(els[i], {
+                x: window.hwHash(step * 3 + i * 97, seed) * amp,
+                y: window.hwHash(step * 3 + 1 + i * 97, seed) * amp,
+                rotation: (opts.baseRot || 0) + window.hwHash(step * 3 + 2 + i * 97, seed) * rot,
+              });
+            }
+          });
+        };
+        window.hwWobbleEllipse = function (cx, cy, rx, ry, seed, wobblePct) {
+          wobblePct = wobblePct === undefined ? 3 : wobblePct;
+          var N = 14,
+            pts = [];
+          for (var i = 0; i < N; i++) {
+            var a = (i / N) * Math.PI * 2;
+            var wr = 1 + window.hwHash(i * 13 + 5, seed) * (wobblePct / 100);
+            pts.push([cx + Math.cos(a) * rx * wr, cy + Math.sin(a) * ry * wr]);
+          }
+          var mx = (pts[0][0] + pts[N - 1][0]) / 2,
+            my = (pts[0][1] + pts[N - 1][1]) / 2;
+          var d = "M" + mx.toFixed(1) + " " + my.toFixed(1);
+          for (var j = 0; j < N; j++) {
+            var p = pts[j],
+              q = pts[(j + 1) % N];
+            d +=
+              " Q" +
+              p[0].toFixed(1) +
+              " " +
+              p[1].toFixed(1) +
+              " " +
+              ((p[0] + q[0]) / 2).toFixed(1) +
+              " " +
+              ((p[1] + q[1]) / 2).toFixed(1);
+          }
+          return d;
+        };
+
+        // ---- hw-callout helpers (copy these too) ----
+        // Builds outline + scribble + connector + label inside the wrapper.
+        // opts: scribble (bool), seed, label, labelAt ("right"|"left"|"below"),
+        //       connector (bool)
+        window.hwCalloutBuild = function (target, opts) {
+          opts = opts || {};
+          var seed = opts.seed || 1;
+          var el = document.querySelector(target);
+          var svg = el.querySelector("svg");
+          var vb = svg.getAttribute("viewBox").split(" ");
+          var W = parseFloat(vb[2]),
+            H = parseFloat(vb[3]);
+          var cx = W / 2,
+            cy = H / 2,
+            rx = W * 0.42,
+            ry = H * 0.36;
+
+          el.querySelector(".hw-co-outline").setAttribute(
+            "d",
+            window.hwWobbleEllipse(cx, cy, rx, ry, seed, 4),
+          );
+
+          var scr = el.querySelector(".hw-co-scribble");
+          if (opts.scribble === false) {
+            scr.style.display = "none";
+          } else {
+            /* Denser rows so the zigzag reads as a scribbled hatch. At 6 rows
+               the near-horizontal runs dominate and it renders as stacked bars. */
+            var d = "",
+              rows = 11;
+            for (var i = 0; i < rows; i++) {
+              var t = (i + 0.5) / rows;
+              var yy = cy - ry + t * ry * 2;
+              var half = Math.sqrt(Math.max(0.05, 1 - Math.pow((yy - cy) / ry, 2)));
+              var xw = rx * half * 0.86;
+              var xa = cx - xw + window.hwHash(i * 7 + 2, seed) * 8;
+              var xb = cx + xw + window.hwHash(i * 7 + 3, seed) * 8;
+              d += (i === 0 ? "M " : " L ") + (i % 2 ? xa : xb).toFixed(1) + " " + yy.toFixed(1);
+              d +=
+                " L " +
+                (i % 2 ? xb : xa).toFixed(1) +
+                " " +
+                (yy + window.hwHash(i * 7 + 4, seed) * 4).toFixed(1);
+            }
+            scr.setAttribute("d", d);
+          }
+
+          var conn = el.querySelector(".hw-co-connector");
+          var label = el.querySelector(".hw-co-label");
+          if (opts.connector === false) {
+            conn.style.display = "none";
+          } else {
+            var at = opts.labelAt || "right";
+            var sx = at === "left" ? cx - rx : at === "below" ? cx : cx + rx;
+            var sy = at === "below" ? cy + ry : cy + ry * 0.35;
+            var ex = at === "left" ? sx - 70 : at === "below" ? sx + 40 : sx + 70;
+            var ey = sy + 55;
+            conn.setAttribute(
+              "d",
+              "M " +
+                sx.toFixed(1) +
+                " " +
+                sy.toFixed(1) +
+                " Q " +
+                ((sx + ex) / 2 + window.hwHash(21, seed) * 14).toFixed(1) +
+                " " +
+                (sy + 46).toFixed(1) +
+                " " +
+                ex.toFixed(1) +
+                " " +
+                ey.toFixed(1),
+            );
+            label.style.left = (at === "left" ? ex - 180 : ex + 12) + "px";
+            label.style.top = ey - 24 + "px";
+          }
+          label.textContent = opts.label || "";
+        };
+        // Draw sequence: outline -> scribble -> connector -> label pop.
+        window.hwCalloutOn = function (tl, target, at) {
+          var el = document.querySelector(target);
+          var t = at;
+          ["outline", "scribble", "connector"].forEach(function (k, idx) {
+            var p = el.querySelector(".hw-co-" + k);
+            if (!p || p.style.display === "none") return;
+            var len = p.getTotalLength();
+            gsap.set(p, { strokeDasharray: len, strokeDashoffset: len });
+            var dur = k === "scribble" ? 0.55 : k === "connector" ? 0.35 : 0.7;
+            tl.to(p, { strokeDashoffset: 0, duration: dur, ease: "power2.inOut" }, t);
+            t += dur * 0.85;
+          });
+          var label = el.querySelector(".hw-co-label");
+          gsap.set(label, { scale: 0.8, transformOrigin: "0% 50%" });
+          tl.to(label, { opacity: 1, scale: 1, duration: 0.4, ease: "back.out(1.6)" }, t);
+        };
+        window.hwCalloutOff = function (tl, target, at) {
+          tl.to(target, { opacity: 0, duration: 0.35, ease: "power2.in" }, at);
+        };
+
+        // ---- self-preview ----
+        window.hwCalloutBuild("#hw-co-demo", {
+          scribble: true,
+          seed: 4,
+          label: "look here!",
+          labelAt: "right",
+        });
+        var tl = gsap.timeline({ paused: true });
+        window.hwCalloutOn(tl, "#hw-co-demo", 0.4);
+        window.hwBoil(tl, "#hw-co-demo", { amp: 1.8, rot: 0.4, frameDrop: 3, seed: 4 });
+        window.hwCalloutOff(tl, "#hw-co-demo", 4.3);
+        tl.set("#hw-co-root", { visibility: "hidden" }, 4.98);
+        window.__timelines["hw-callout-circle"] = tl;
+      })();
+    </script>
+  </body>
+</html>
+```
+
+</Accordion>
+
 {/* hf:generated-footer */}
 
 Tagged `handwritten` `annotation` `callout` `overlay`.
diff --git a/docs/catalog/components/hw-underline.mdx b/docs/catalog/components/hw-underline.mdx
index 04bf6f266e..ba8cb6e4dc 100644
--- a/docs/catalog/components/hw-underline.mdx
+++ b/docs/catalog/components/hw-underline.mdx
@@ -3,13 +3,13 @@ title: "Squiggle Marks"
 description: "Hand-drawn squiggle underline, double-pass strikethrough, and bracket marks that draw on"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/hw-underline.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/hw-underline.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/components/hw-underline.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Squiggle Marks preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add hw-underline
-```
+<InstallCommand command="npx hyperframes add hw-underline" />
 
 That writes `compositions/components/hw-underline.html`, plus 1 supporting file under `assets/fonts/`.
 
@@ -20,6 +20,272 @@ Open `compositions/components/hw-underline.html` and copy what is inside into yo
 A component has no size or duration of its own. It takes both from the composition
 you paste it into.
 
+## Source
+
+<Accordion title={`hw-underline.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      @font-face {
+        font-family: "Caveat";
+        src: url("assets/fonts/Caveat-700-latin.woff2") format("woff2");
+        font-weight: 700;
+        font-display: block;
+      }
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      /* ---- hw-underline ------------------------------------------------
+         Squiggle underline / strikethrough / bracket marks that draw on.
+         Size the wrapper over the text they annotate. Requires the hw-boil
+         helpers in the host. */
+      .hw-mark {
+        position: absolute;
+        pointer-events: none;
+      }
+      .hw-mark svg {
+        width: 100%;
+        height: 100%;
+        overflow: visible;
+      }
+      .hw-mark path {
+        fill: none;
+        stroke: var(--hw-mark-color, var(--hw-accent-warm, #ffb020));
+        stroke-width: var(--hw-mark-w, 7);
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+      /* self-preview scene */
+      #hw-un-scene {
+        position: absolute;
+        inset: 0;
+        background: #17161a;
+        font-family: var(--hw-font-print, "Caveat", cursive);
+        font-weight: 700;
+        font-size: 84px;
+        color: #f4f2ec;
+      }
+      #hw-un-scene div {
+        position: absolute;
+        left: 480px;
+        white-space: nowrap;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Self-preview. WIRING: copy the .hw-mark CSS + markup pattern, the
+         hwMarkPath / hwMarkOn / hwMarkOff helpers, AND the hw-boil helpers.
+         Then:
+
+           document.querySelector("#hw-my-mark path")
+             .setAttribute("d", hwMarkPath(420, 34, "underline", 4));
+           hwMarkOn(tl, "#hw-my-mark", 2.0);
+           hwBoil(tl, "#hw-my-mark", { frameDrop: 3, seed: 4 });
+    -->
+    <div
+      id="hw-un-root"
+      data-composition-id="hw-underline"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="hw-un-scene">
+        <div style="top: 260px">underline the point</div>
+        <div style="top: 460px">cross this out</div>
+        <div style="top: 660px">bracket the aside</div>
+      </div>
+      <div
+        class="hw-mark"
+        id="hw-un-m1"
+        style="left: 470px; top: 350px; width: 620px; height: 34px"
+      >
+        <svg viewBox="0 0 620 34"><path></path></svg>
+      </div>
+      <div
+        class="hw-mark"
+        id="hw-un-m2"
+        style="left: 470px; top: 500px; width: 480px; height: 34px"
+      >
+        <svg viewBox="0 0 480 34"><path></path></svg>
+      </div>
+      <div
+        class="hw-mark"
+        id="hw-un-m3"
+        style="left: 440px; top: 650px; width: 40px; height: 110px"
+      >
+        <svg viewBox="0 0 40 110"><path></path></svg>
+      </div>
+      <div
+        id="hw-un-drv"
+        class="clip"
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- hw-boil helpers (shared family runtime — copy once per host) ---- */
+        window.hwOnUpdate = function (tl, fn) {
+          if (!tl.__hwRenders) {
+            tl.__hwRenders = [];
+            tl.eventCallback("onUpdate", function () {
+              for (var i = 0; i < tl.__hwRenders.length; i++) tl.__hwRenders[i]();
+            });
+          }
+          tl.__hwRenders.push(fn);
+          fn();
+        };
+        window.hwHash = function (n, seed) {
+          var x = Math.sin(n * 127.1 + (seed || 1) * 311.7) * 43758.5453;
+          return (x - Math.floor(x)) * 2 - 1;
+        };
+        window.hwBoil = function (tl, target, opts) {
+          opts = opts || {};
+          var amp = opts.amp !== undefined ? opts.amp : 1.6;
+          var rot = opts.rot !== undefined ? opts.rot : 0.5;
+          var fps = opts.fps || 30;
+          var drop = opts.frameDrop || 3;
+          var seed = opts.seed || 1;
+          var els = gsap.utils.toArray(target);
+          window.hwOnUpdate(tl, function () {
+            var step = Math.floor((tl.time() * fps) / drop);
+            for (var i = 0; i < els.length; i++) {
+              gsap.set(els[i], {
+                x: window.hwHash(step * 3 + i * 97, seed) * amp,
+                y: window.hwHash(step * 3 + 1 + i * 97, seed) * amp,
+                rotation: (opts.baseRot || 0) + window.hwHash(step * 3 + 2 + i * 97, seed) * rot,
+              });
+            }
+          });
+        };
+
+        // ---- hw-mark helpers (copy these too) ----
+        // style: "underline" (squiggle) | "strike" (double pass) | "bracket"
+        window.hwMarkPath = function (w, h, style, seed) {
+          seed = seed || 1;
+          function wob(n, range) {
+            return window.hwHash(n, seed) * (range === undefined ? 5 : range);
+          }
+          var mid = h / 2;
+          if (style === "bracket") {
+            return (
+              "M " +
+              (w * 0.9 + wob(1, 3)) +
+              " " +
+              (2 + wob(2, 3)) +
+              " Q " +
+              wob(3, 4) +
+              " " +
+              (2 + wob(4)) +
+              " " +
+              (4 + wob(5, 3)) +
+              " " +
+              (h * 0.5 + wob(6)) +
+              " Q " +
+              wob(7, 4) +
+              " " +
+              (h - 2 + wob(8)) +
+              " " +
+              (w * 0.9 + wob(9, 3)) +
+              " " +
+              (h - 2 + wob(10, 3))
+            );
+          }
+          if (style === "strike") {
+            return (
+              "M " +
+              (2 + wob(1, 3)) +
+              " " +
+              (mid + wob(2)) +
+              " L " +
+              (w - 4 + wob(3, 3)) +
+              " " +
+              (mid - 3 + wob(4)) +
+              " M " +
+              (w - 10 + wob(5, 4)) +
+              " " +
+              (mid + 7 + wob(6)) +
+              " L " +
+              (8 + wob(7, 4)) +
+              " " +
+              (mid + 3 + wob(8))
+            );
+          }
+          /* underline squiggle */
+          var segs = Math.max(5, Math.round(w / 95));
+          var d = "M 2 " + (mid + wob(0, 4));
+          for (var i = 1; i <= segs; i++) {
+            var x = (w / segs) * i;
+            d +=
+              " Q " +
+              (x - w / segs / 2 + wob(i * 4 + 1, 9)) +
+              " " +
+              (mid + (i % 2 ? -1 : 1) * (9 + wob(i * 4 + 2, 4))) +
+              " " +
+              x.toFixed(1) +
+              " " +
+              (mid + wob(i * 4 + 3, 4));
+          }
+          return d;
+        };
+        window.hwMarkOn = function (tl, target, at, dur) {
+          var p = document.querySelector(target + " path");
+          var len = p.getTotalLength();
+          gsap.set(p, { strokeDasharray: len, strokeDashoffset: len });
+          tl.to(
+            p,
+            { strokeDashoffset: 0, duration: dur === undefined ? 0.55 : dur, ease: "power2.inOut" },
+            at,
+          );
+        };
+        window.hwMarkOff = function (tl, target, at) {
+          tl.to(target, { opacity: 0, duration: 0.3, ease: "power2.in" }, at);
+        };
+
+        // ---- self-preview ----
+        document
+          .querySelector("#hw-un-m1 path")
+          .setAttribute("d", window.hwMarkPath(620, 34, "underline", 4));
+        document
+          .querySelector("#hw-un-m2 path")
+          .setAttribute("d", window.hwMarkPath(480, 34, "strike", 6));
+        document
+          .querySelector("#hw-un-m3 path")
+          .setAttribute("d", window.hwMarkPath(40, 110, "bracket", 8));
+        var tl = gsap.timeline({ paused: true });
+        window.hwMarkOn(tl, "#hw-un-m1", 0.4);
+        window.hwMarkOn(tl, "#hw-un-m2", 1.0);
+        window.hwMarkOn(tl, "#hw-un-m3", 1.6);
+        window.hwBoil(tl, [".hw-mark"], { amp: 1.5, rot: 0.4, frameDrop: 3, seed: 5 });
+        tl.to([".hw-mark"], { opacity: 0, duration: 0.3, ease: "power2.in" }, 3.5);
+        tl.set("#hw-un-root", { visibility: "hidden" }, 3.98);
+        window.__timelines["hw-underline"] = tl;
+      })();
+    </script>
+  </body>
+</html>
+```
+
+</Accordion>
+
 {/* hf:generated-footer */}
 
 Tagged `handwritten` `annotation` `text-treatment`.
diff --git a/docs/catalog/components/icon-morph-beat.mdx b/docs/catalog/components/icon-morph-beat.mdx
new file mode 100644
index 0000000000..9ca14aa163
--- /dev/null
+++ b/docs/catalog/components/icon-morph-beat.mdx
@@ -0,0 +1,300 @@
+---
+title: "Icon Morph Beat"
+description: "An icon morphs between authored state silhouettes, shifts to an accent color, and marks completion with one restrained pulse."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/icon-morph-beat.html"
+  compositionId="icon-morph-beat"
+  compositionSrc="compositions/components/icon-morph-beat.html"
+  variables={[{"id":"pair","type":"enum","role":"content","label":"Icon pair","description":"Before and after icon states used by the morph.","default":"mic-check","options":[{"value":"mic-check","label":"Mic to check"},{"value":"play-check","label":"Play to check"},{"value":"lock-unlock","label":"Lock to unlock"}]},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Color applied as the morph completes.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]}]}
+>
+
+```html icon-morph-beat.html
+<!doctype html>
+<!--
+  icon-morph-beat: HyperFrames video primitive (product-demo / state-change)
+
+  Concept: one icon holds as a readable before state, morphs into its after
+  state while shifting to the selected accent, then marks completion with a
+  small pulse. The authored SVG paths in every pair have matching command
+  structure and point count so GSAP can tween the d attribute directly.
+
+  Variables:
+    - pair (mic-check | play-check | lock-unlock, default mic-check): the
+      before and after icon states.
+    - accent (green | blue | violet, default green): the completion color.
+
+  Envelope (fixed IN, elastic HOLD, no OUT):
+    IN_BASE  = 1.20s, readable before-state hold, morph, and completion pulse
+    HOLD     = elastic = max(0, D - IN_BASE), a restrained halo breath
+    OUT_BASE = 0s, the completed icon remains visible at the final frame
+    If D is shorter than IN_BASE, the complete state-change beat compresses
+    proportionally and HOLD becomes zero.
+
+  Mount contract: the runtime clones only this template. #root fills the
+  host box, establishes the container query basis, has no data-width or
+  data-height, and registers one paused timeline under the hardcoded
+  icon-morph-beat id.
+-->
+<html
+  lang="en"
+  data-composition-id="icon-morph-beat"
+  data-composition-duration="2.5"
+  data-composition-variables='[
+    { "id": "pair", "type": "enum", "role": "content", "label": "Icon pair", "description": "Before and after icon states used by the morph.", "default": "mic-check", "options": [{ "value": "mic-check", "label": "Mic to check" }, { "value": "play-check", "label": "Play to check" }, { "value": "lock-unlock", "label": "Lock to unlock" }] },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Color applied as the morph completes.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Icon Morph Beat</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="icon-morph-beat" data-duration="2.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            pointer-events: none;
+          }
+
+          .imb-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+          }
+
+          .imb-stage {
+            position: relative;
+            display: grid;
+            width: 42cqmin;
+            aspect-ratio: 1;
+            place-items: center;
+          }
+
+          .imb-halo {
+            position: absolute;
+            inset: -12%;
+            border-radius: 50%;
+            background: radial-gradient(
+              circle,
+              color-mix(in srgb, var(--imb-accent) 38%, transparent) 0%,
+              color-mix(in srgb, var(--imb-accent) 12%, transparent) 46%,
+              transparent 72%
+            );
+            opacity: 0.14;
+            will-change: opacity, transform;
+          }
+
+          .imb-shell {
+            position: relative;
+            display: grid;
+            width: 100%;
+            aspect-ratio: 1;
+            place-items: center;
+            border: 0.28cqmin solid color-mix(in srgb, var(--border, #475569) 76%, transparent);
+            border-radius: 28%;
+            background: linear-gradient(
+              145deg,
+              color-mix(in srgb, var(--surface, #1e293b) 86%, white 7%),
+              var(--surface, #1e293b)
+            );
+            box-shadow:
+              0 3.2cqh 8cqh color-mix(in srgb, var(--bg, #05070d) 58%, transparent),
+              inset 0 0 0 0.12cqmin color-mix(in srgb, white 10%, transparent);
+            transform-origin: 50% 50%;
+            will-change: transform;
+          }
+
+          .imb-icon {
+            width: 58%;
+            height: 58%;
+            overflow: visible;
+            color: var(--fg, #f8fafc);
+            filter: drop-shadow(0 0.8cqh 1.8cqh rgba(2, 6, 23, 0.34));
+          }
+
+          .imb-shape {
+            fill: currentColor;
+            fill-rule: nonzero;
+          }
+        </style>
+
+        <div
+          id="icon-morph-beat-clip"
+          class="imb-clip clip"
+          data-start="0"
+          data-duration="2.5"
+          data-track-index="0"
+        >
+          <div class="imb-stage">
+            <div class="imb-halo" aria-hidden="true"></div>
+            <div class="imb-shell">
+              <svg class="imb-icon" viewBox="0 0 100 100" role="img" aria-label="Icon state change">
+                <path class="imb-shape" d="" />
+              </svg>
+            </div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var shell = root.querySelector(".imb-shell");
+            var halo = root.querySelector(".imb-halo");
+            var icon = root.querySelector(".imb-icon");
+            var shape = root.querySelector(".imb-shape");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            // Each from/to pair has the same SVG command sequence and point
+            // count. Keep the pair together when editing either silhouette.
+            var paths = {
+              "mic-check": {
+                from: "M 42 18 L 58 18 L 64 24 L 64 48 L 61 56 L 56 62 L 56 72 L 68 72 L 68 82 L 32 82 L 32 72 L 44 72 L 44 62 L 39 56 L 36 48 L 36 24 Z",
+                to: "M 16 50 L 20 46 L 24 42 L 34 52 L 44 62 L 52 54 L 60 46 L 68 38 L 76 30 L 80 34 L 84 38 L 74 48 L 64 58 L 54 68 L 44 78 L 34 68 Z",
+              },
+              "play-check": {
+                from: "M 28 18 L 36 23 L 44 28 L 52 33 L 60 38 L 68 43 L 76 48 L 80 50 L 76 52 L 68 57 L 60 62 L 52 67 L 44 72 L 36 77 L 28 82 L 28 50 Z",
+                to: "M 16 50 L 20 46 L 24 42 L 34 52 L 44 62 L 52 54 L 60 46 L 68 38 L 76 30 L 80 34 L 84 38 L 74 48 L 64 58 L 54 68 L 44 78 L 34 68 Z",
+              },
+              "lock-unlock": {
+                from: "M 22 42 L 78 42 L 78 84 L 22 84 Z M 30 44 L 30 31 C 30 18 39 12 50 12 C 61 12 70 18 70 31 L 70 44 L 60 44 L 60 31 C 60 25 56 22 50 22 C 44 22 40 25 40 31 L 40 44 Z",
+                to: "M 22 42 L 78 42 L 78 84 L 22 84 Z M 34 44 L 34 31 C 34 18 43 12 54 12 C 65 12 74 18 74 31 L 74 35 L 64 35 L 64 31 C 64 25 60 22 54 22 C 48 22 44 25 44 31 L 44 44 Z",
+              },
+            };
+            var accents = {
+              green: "#34d399",
+              blue: "#38bdf8",
+              violet: "#a78bfa",
+            };
+            var pair = Object.prototype.hasOwnProperty.call(paths, vars.pair)
+              ? vars.pair
+              : "mic-check";
+            var accent = Object.prototype.hasOwnProperty.call(accents, vars.accent)
+              ? vars.accent
+              : "green";
+            var selectedPaths = paths[pair];
+            var accentColor = accents[accent];
+
+            root.style.setProperty("--imb-accent", accentColor);
+            shape.setAttribute("d", selectedPaths.from);
+            icon.setAttribute("aria-label", pair.replace("-", " to "));
+
+            var IN_BASE = 1.2;
+            var MORPH_AT_BASE = 0.35;
+            var MORPH_BASE = 0.55;
+            var PULSE_UP_BASE = 0.12;
+            var PULSE_DOWN_BASE = 0.18;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "2.5"));
+            var scale = duration < IN_BASE ? duration / IN_BASE : 1;
+            var IN = IN_BASE * scale;
+            var MORPH_AT = MORPH_AT_BASE * scale;
+            var MORPH = MORPH_BASE * scale;
+            var PULSE_UP = PULSE_UP_BASE * scale;
+            var PULSE_DOWN = PULSE_DOWN_BASE * scale;
+            var COMPLETE_AT = MORPH_AT + MORPH;
+            var HOLD = Math.max(0, duration - IN);
+
+            gsap.set(icon, { color: "#f8fafc" });
+            gsap.set(shell, { scale: 1 });
+            gsap.set(halo, { opacity: 0.14, scale: 1 });
+
+            var tl = gsap.timeline({ paused: true });
+
+            tl.to(
+              shape,
+              { attr: { d: selectedPaths.to }, duration: MORPH, ease: "power3.out" },
+              MORPH_AT,
+            );
+            tl.to(icon, { color: accentColor, duration: MORPH, ease: "power2.out" }, MORPH_AT);
+            tl.to(shell, { scale: 1.08, duration: PULSE_UP, ease: "power3.out" }, COMPLETE_AT);
+            tl.to(
+              shell,
+              { scale: 1, duration: PULSE_DOWN, ease: "power2.out" },
+              COMPLETE_AT + PULSE_UP,
+            );
+            tl.to(
+              halo,
+              { opacity: 0.62, scale: 1.08, duration: PULSE_UP, ease: "power3.out" },
+              COMPLETE_AT,
+            );
+            tl.to(
+              halo,
+              { opacity: 0.14, scale: 1, duration: PULSE_DOWN, ease: "power2.out" },
+              COMPLETE_AT + PULSE_UP,
+            );
+
+            if (HOLD > 0.04) {
+              var driftHalf = Math.min(0.45, HOLD / 2);
+              tl.fromTo(
+                halo,
+                { opacity: 0.14 },
+                {
+                  opacity: 0.22,
+                  duration: driftHalf,
+                  ease: "sine.inOut",
+                  yoyo: true,
+                  repeat: 1,
+                },
+                IN,
+              );
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["icon-morph-beat"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add icon-morph-beat" />
+
+That writes one file: `compositions/components/icon-morph-beat.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/icon-morph-beat.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `product-demo` `icon` `morph` `state-change` `completion`.
+
+## 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/components/icon-swap.mdx b/docs/catalog/components/icon-swap.mdx
new file mode 100644
index 0000000000..0755fcbc01
--- /dev/null
+++ b/docs/catalog/components/icon-swap.mdx
@@ -0,0 +1,151 @@
+---
+title: "Icon Swap"
+description: "A scale-and-blur icon swap primitive for toolbar and action state changes"
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/icon-swap.html"
+  compositionId="icon-swap"
+  compositionSrc="compositions/components/icon-swap.html"
+  variables={[{"id":"tone","type":"enum","role":"style","label":"Tone","description":"Button fill and glyph colour. Accent rides --brand.","default":"dark","options":[{"value":"dark","label":"Dark"},{"value":"light","label":"Light"},{"value":"accent","label":"Accent"}]},{"id":"size","type":"enum","role":"layout","label":"Size","description":"Button box and glyph size, from a toolbar chip to a hero action.","default":"standard","options":[{"value":"small","label":"Small"},{"value":"standard","label":"Standard"},{"value":"large","label":"Large"}]},{"id":"shape","type":"enum","role":"style","label":"Shape","description":"Corner treatment of the button box.","default":"rounded","options":[{"value":"rounded","label":"Rounded"},{"value":"circle","label":"Circle"},{"value":"square","label":"Square"}]},{"id":"blur","type":"enum","role":"motion","label":"Blur","description":"Scales the blur radius the timeline drives through the swap, from a light haze to a full smear.","default":"standard","options":[{"value":"soft","label":"Soft"},{"value":"standard","label":"Standard"},{"value":"heavy","label":"Heavy"}]}]}
+>
+
+```html icon-swap.html
+<!--
+  Icon Swap - transitions.dev-inspired primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Use the timeline integration
+  note at the bottom as the starting point for deterministic GSAP animation.
+
+  Variables. The script reads each one, falls back to the declared default on anything
+  missing or unrecognised, and writes the result as a custom property the CSS above
+  consumes. The timeline recipe below is untouched by them.
+
+    - tone (dark | light | accent, default dark): button fill and glyph colour. dark is the
+      matte chip, light inverts it for bright frames, accent rides --brand.
+    - size (small | standard | large, default standard): the button box and the glyph inside
+      it, 44px, 58px or 76px.
+    - shape (rounded | circle | square, default rounded): corner radius of the box.
+    - blur (soft | standard | heavy, default standard): scales the blur radius the timeline
+      drives through the swap, from a light haze to a full smear.
+
+  On every default the result is identical to the original: a 58px near-black chip with
+  16px corners and an 8px swap blur.
+-->
+
+<button
+  class="hf-transition-icon-swap"
+  type="button"
+  data-composition-variables='[
+    { "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Button fill and glyph colour. Accent rides --brand.", "default": "dark", "options": [{ "value": "dark", "label": "Dark" }, { "value": "light", "label": "Light" }, { "value": "accent", "label": "Accent" }] },
+    { "id": "size", "type": "enum", "role": "layout", "label": "Size", "description": "Button box and glyph size, from a toolbar chip to a hero action.", "default": "standard", "options": [{ "value": "small", "label": "Small" }, { "value": "standard", "label": "Standard" }, { "value": "large", "label": "Large" }] },
+    { "id": "shape", "type": "enum", "role": "style", "label": "Shape", "description": "Corner treatment of the button box.", "default": "rounded", "options": [{ "value": "rounded", "label": "Rounded" }, { "value": "circle", "label": "Circle" }, { "value": "square", "label": "Square" }] },
+    { "id": "blur", "type": "enum", "role": "motion", "label": "Blur", "description": "Scales the blur radius the timeline drives through the swap, from a light haze to a full smear.", "default": "standard", "options": [{ "value": "soft", "label": "Soft" }, { "value": "standard", "label": "Standard" }, { "value": "heavy", "label": "Heavy" }] }
+  ]'
+>
+  <span class="from">+</span><span class="to">OK</span>
+</button>
+
+<style>
+  .hf-transition-icon-swap {
+    position: relative;
+    display: grid;
+    place-items: center;
+    width: var(--hf-icon-size, 58px);
+    height: var(--hf-icon-size, 58px);
+    border: 0;
+    border-radius: var(--hf-icon-radius, 16px);
+    background: var(--hf-icon-bg, #18181b);
+    color: var(--hf-icon-fg, #fff);
+    font:
+      900 28px/1 Inter,
+      system-ui,
+      sans-serif;
+    font-size: var(--hf-icon-font-size, 28px);
+    box-shadow: 0 18px 44px rgba(24, 24, 27, 0.22);
+  }
+  .hf-transition-icon-swap span {
+    position: absolute;
+    filter: blur(calc(var(--hf-icon-blur, 0px) * var(--hf-icon-blur-scale, 1)));
+    transform: scale(var(--hf-icon-scale, 1)) rotate(var(--hf-icon-rotate, 0deg));
+    will-change: transform, filter, opacity;
+  }
+  .hf-transition-icon-swap .to {
+    opacity: 0;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var tones = {
+      dark: { bg: "#18181b", fg: "#ffffff" },
+      light: { bg: "#fafafa", fg: "#18181b" },
+      accent: { bg: "var(--brand, #34d399)", fg: "#052e21" },
+    };
+    var sizes = {
+      small: { box: "44px", font: "22px" },
+      standard: { box: "58px", font: "28px" },
+      large: { box: "76px", font: "38px" },
+    };
+    var shapes = { rounded: "16px", circle: "50%", square: "6px" };
+    var blurScales = { soft: 0.45, standard: 1, heavy: 2.2 };
+
+    var tone = tones[pick(tones, vars.tone, "dark")];
+    var size = sizes[pick(sizes, vars.size, "standard")];
+    var shape = shapes[pick(shapes, vars.shape, "rounded")];
+    var blurScale = blurScales[pick(blurScales, vars.blur, "standard")];
+
+    var roots = document.querySelectorAll(".hf-transition-icon-swap");
+    for (var i = 0; i < roots.length; i += 1) {
+      roots[i].style.setProperty("--hf-icon-bg", tone.bg);
+      roots[i].style.setProperty("--hf-icon-fg", tone.fg);
+      roots[i].style.setProperty("--hf-icon-size", size.box);
+      roots[i].style.setProperty("--hf-icon-font-size", size.font);
+      roots[i].style.setProperty("--hf-icon-radius", shape);
+      roots[i].style.setProperty("--hf-icon-blur-scale", String(blurScale));
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.to('.hf-transition-icon-swap .from', { opacity: 0, '--hf-icon-scale': 0.55, '--hf-icon-blur': '8px', '--hf-icon-rotate': '-18deg', duration: 0.18, ease: 'power2.in' }, startTime); tl.fromTo('.hf-transition-icon-swap .to', { opacity: 0, '--hf-icon-scale': 1.35, '--hf-icon-blur': '8px', '--hf-icon-rotate': '18deg' }, { opacity: 1, '--hf-icon-scale': 1, '--hf-icon-blur': '0px', '--hf-icon-rotate': '0deg', duration: 0.26, ease: 'back.out(1.7)' }, startTime + 0.12);
+-->
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add icon-swap" />
+
+That writes one file: `compositions/components/icon-swap.html`.
+
+## Usage
+
+Open `compositions/components/icon-swap.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+
+{/* hf:generated-footer */}
+
+Tagged `video-primitive` `transition-primitive` `transitions-dev-port` `icon` `swap`.
+
+## 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/components/ink-bleed-reveal.mdx b/docs/catalog/components/ink-bleed-reveal.mdx
new file mode 100644
index 0000000000..40302b7745
--- /dev/null
+++ b/docs/catalog/components/ink-bleed-reveal.mdx
@@ -0,0 +1,489 @@
+---
+title: "Ink Bleed Reveal"
+description: "Liquid ink blooms through paper under a gooey blur-plus-threshold filter, merges, then contracts as a crisp slotted mark resolves beneath it, with static seeded paper grain riding the result."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/ink-bleed-reveal.html"
+  compositionId="ink-bleed-reveal"
+  compositionSrc="compositions/components/ink-bleed-reveal.html"
+  variables={[{"id":"blobs","type":"number","role":"style","label":"Blobs","description":"How many ink blobs bleed and merge (4 to 6).","default":5,"min":4,"max":6,"step":1},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Ink tint: green rides --brand, blue rides --accent, violet rides --accent-2.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Optional departure. Default none: the revealed mark holds until the frame cuts.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
+>
+
+```html ink-bleed-reveal.html
+<!doctype html>
+<!--
+  ink-bleed-reveal: HyperFrames video primitive (texture / reveals). Wave M7.
+
+  Liquid ink blooms through paper to reveal a mark. Several ink blobs bleed
+  outward from the center and merge like liquid under the gooey chain
+  (Gaussian blur + a hard alpha threshold: the blur softens the silhouettes
+  together, the threshold snaps the merged alpha back to a crisp liquid
+  edge), then the puddle contracts and dies as the crisp mark resolves
+  beneath it. The chain is the classic SVG feGaussianBlur + feColorMatrix
+  recipe, but computed in a canvas work buffer each repaint: Chrome's live
+  filter raster patches damaged tiles with seek-history-dependent seam
+  antialiasing, while a cleared, fully redrawn canvas is a pure function of
+  (table, time) and lands byte-identical frames. A seeded, static
+  paper-grain overlay (feTurbulence, fixed seed, never animated) rides the
+  whole piece.
+
+  The mark is a SLOT. Callers supply content by placing an inert template
+  anywhere in the HOST page (templates never render, and the runtime wipes
+  the host clip's own children on mount, so the slot lives at document level):
+
+    <template data-slot="ink-bleed-reveal-mark"> ... </template>
+
+  With no slot, the primitive renders a token monogram: one display glyph in
+  ink, drawn entirely from contract tokens. Light paper is the home register,
+  but every color rides a token so themes restate it.
+
+  Variables (declared in data-composition-variables below):
+    - blobs (number 4-6, default 5): how many ink blobs bleed and merge.
+    - accent ("green" | "blue" | "violet", default "green"): ink tint; green
+      rides --brand, blue rides --accent, violet rides --accent-2. The ink
+      body is the accent mixed toward --fg so it reads as pigment, not paint.
+    - exit ("none" | "fade" | "up", default "none"): frame roots own
+      transitions; the default holds the revealed mark to the last pixel.
+
+  Envelope, fixed IN and OUT with elastic HOLD only (never timeScale):
+    IN_BASE  = 2.80s  ink blooms, merges, contracts; mark resolves crisp
+    HOLD     = max(0, D - IN - OUT); truly still (grain is static by
+               construction: painted by a fixed-seed feTurbulence, never
+               animated, so held frames are byte-identical)
+    OUT_BASE = 0.45s  only when exit != none
+    If D < IN_BASE + OUT_BASE, IN and OUT compress together.
+
+  Determinism (closed-form field law): there is NO physics state. One
+  per-blob parameter table is computed exactly once during synchronous
+  timeline construction from fixed LCG seed 0x1b1eedca; every painted frame
+  positions each blob as a pure function of (table row, timeline time) inside
+  the anchor tween's onUpdate. Zero per-blob tweens. No Math.random, no wall
+  clock, no requestAnimationFrame. Eventful seeks (suppressEvents=false, the
+  engine's render path) land identical frames in any order and either
+  direction; by the end of IN every blob's scale is exactly zero and the goo
+  layer's opacity is zero, so the HOLD is the crisp mark on still paper.
+
+  Mount contract: the runtime clones only this template. #root fills the
+  host box (no data-width/data-height, container-type: size, cqmin units),
+  is styled via #root only, and registers one paused timeline under the
+  LITERAL "ink-bleed-reveal" key. All DOM state is set with explicit
+  endpoints (gsap.set + fromTo) so any seek order lands identical frames.
+-->
+<html
+  lang="en"
+  data-composition-id="ink-bleed-reveal"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "blobs", "type": "number", "role": "style", "label": "Blobs", "description": "How many ink blobs bleed and merge (4 to 6).", "default": 5, "min": 4, "max": 6, "step": 1 },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Ink tint: green rides --brand, blue rides --accent, violet rides --accent-2.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the revealed mark holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Ink Bleed Reveal</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="ink-bleed-reveal" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #1d1b16);
+            font-family: var(--font-display, "Inter", system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .ibr-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .ibr-stage {
+            position: absolute;
+            inset: 0;
+            will-change: transform, opacity;
+          }
+
+          /* The gooey layer is a canvas: blur + alpha threshold are computed
+             in-buffer each repaint (ctx.filter blur, then the colormatrix
+             threshold applied to the readback). Chrome's live SVG/CSS filter
+             raster patches damaged tiles with seek-history-dependent seam
+             antialiasing, which breaks byte-identical frames; a cleared and
+             fully redrawn canvas is a pure function of (table, time). */
+          .ibr-canvas {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+          }
+
+          .ibr-mark {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            will-change: transform, opacity;
+          }
+
+          .ibr-monogram {
+            display: grid;
+            place-items: center;
+            width: 44cqmin;
+            height: 44cqmin;
+            border: 0.5cqmin solid color-mix(in srgb, var(--ibr-accent) 58%, var(--fg, #1d1b16));
+            border-radius: 50%;
+          }
+
+          .ibr-monogram-glyph {
+            color: color-mix(in srgb, var(--ibr-accent) 55%, var(--fg, #1d1b16));
+            font-size: 22cqmin;
+            font-weight: 600;
+            line-height: 1;
+            letter-spacing: 0.02em;
+          }
+
+          /* Seeded static paper grain: feTurbulence with a FIXED seed paints
+             this layer once per raster; nothing about it is animated, so it
+             adds tooth without touching determinism. */
+          .ibr-grain {
+            position: absolute;
+            inset: 0;
+            filter: url(#ibr-grain-filter);
+            opacity: 0.5;
+            mix-blend-mode: multiply;
+          }
+        </style>
+
+        <div
+          id="ink-bleed-reveal-clip"
+          class="ibr-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <svg aria-hidden="true" width="0" height="0" style="position: absolute">
+            <defs>
+              <filter
+                id="ibr-grain-filter"
+                x="0%"
+                y="0%"
+                width="100%"
+                height="100%"
+                color-interpolation-filters="sRGB"
+              >
+                <feTurbulence
+                  type="fractalNoise"
+                  baseFrequency="0.82"
+                  numOctaves="2"
+                  seed="11"
+                  stitchTiles="stitch"
+                  result="noise"
+                />
+                <feColorMatrix
+                  in="noise"
+                  type="matrix"
+                  values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0.14 0.14 0.14 0 0"
+                />
+              </filter>
+            </defs>
+          </svg>
+          <div class="ibr-stage">
+            <div class="ibr-mark">
+              <div class="ibr-monogram">
+                <span class="ibr-monogram-glyph" aria-hidden="true">H</span>
+              </div>
+            </div>
+            <canvas class="ibr-canvas" aria-hidden="true"></canvas>
+            <div class="ibr-grain"></div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".ibr-stage");
+            var canvas = root.querySelector(".ibr-canvas");
+            var mark = root.querySelector(".ibr-mark");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var blobCount = Math.round(Number(vars.blobs));
+            if (!Number.isFinite(blobCount)) blobCount = 5;
+            blobCount = Math.min(6, Math.max(4, blobCount));
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #14a35e)",
+              blue: "var(--accent, #2f6fed)",
+              violet: "var(--accent-2, #7a5cd6)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            root.style.setProperty("--ibr-accent", accentColors[accent]);
+
+            // SLOT. Caller templates live at HOST DOCUMENT level (the mount
+            // wipes host-clip children, and templates never render). The
+            // scoped document proxy filters queries to this composition's
+            // subtree, so the lookup deliberately goes through ownerDocument.
+            var hostDoc = root.ownerDocument;
+            var slotTemplate = null;
+            try {
+              slotTemplate = hostDoc.querySelector('template[data-slot="ink-bleed-reveal-mark"]');
+            } catch (error) {
+              slotTemplate = null;
+            }
+            if (slotTemplate) {
+              mark.querySelector(".ibr-monogram").remove();
+              mark.appendChild(hostDoc.importNode(slotTemplate.content, true));
+            }
+
+            // Envelope: fixed IN/OUT, elastic HOLD, never time-scaled.
+            var IN_BASE = 2.8;
+            var OUT_BASE = exit === "none" ? 0 : 0.45;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var totalBase = Math.max(0.001, IN_BASE + OUT_BASE);
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var OUT_START = IN + HOLD;
+
+            // Geometry basis is fixed once at mount from the host box, like
+            // the particle-image-reveal canvas raster: the same host always
+            // yields the same pixel coordinates and blur radius. The display
+            // canvas rides the host raster; the goo itself is computed in a
+            // low-resolution work buffer (the blur radius dwarfs the lost
+            // detail, and the upscale softens the ink edge pleasantly).
+            var dpr = Math.min(2, Math.max(1, Number(window.devicePixelRatio) || 1));
+            var box = root.getBoundingClientRect();
+            var cssW = Math.max(1, Math.round(box.width) || 640);
+            var cssH = Math.max(1, Math.round(box.height) || 360);
+            var minDim = Math.min(cssW, cssH);
+            var cx = cssW / 2;
+            var cy = cssH / 2;
+            canvas.width = Math.round(cssW * dpr);
+            canvas.height = Math.round(cssH * dpr);
+            var ctx = canvas.getContext("2d");
+            var LOW = 3;
+            var work = hostDoc.createElement("canvas");
+            work.width = Math.max(1, Math.ceil(cssW / LOW));
+            work.height = Math.max(1, Math.ceil(cssH / LOW));
+            var workCtx = work.getContext("2d", { willReadFrequently: true });
+
+            // Gooey ratio: the blur radius vs. threshold slope is what makes
+            // this read as liquid instead of blur. Same math as the classic
+            // SVG chain (feGaussianBlur stdDeviation, then feColorMatrix
+            // alpha row 22 / -9), computed in-buffer for byte-stable seeks.
+            var blurLow = Math.max(2, (minDim * 0.028) / LOW);
+
+            // Resolve the ink color to a concrete value once at mount so
+            // canvas fills never depend on style recalc during seeks.
+            var probe = hostDoc.createElement("span");
+            probe.style.color =
+              "color-mix(in srgb, " + accentColors[accent] + " 62%, var(--fg, #1d1b16))";
+            root.appendChild(probe);
+            var inkColor = getComputedStyle(probe).color || "#1d1b16";
+            probe.remove();
+
+            // The LCG and every per-blob decision live here. This IIFE runs
+            // once before timeline construction; afterwards only the table is
+            // read. Blob state at any time is a pure closed-form function of
+            // (table row, timeline time). No velocities, no integration.
+            var blobRows = (function () {
+              var state = 0x1b1eedca;
+              function next() {
+                state = (Math.imul(1664525, state) + 1013904223) >>> 0;
+                return state / 4294967296;
+              }
+              var rows = [];
+              for (var i = 0; i < blobCount; i += 1) {
+                var angle = (i / blobCount) * Math.PI * 2 + next() * 0.9;
+                rows.push({
+                  dirX: Math.cos(angle),
+                  dirY: Math.sin(angle),
+                  // How far this blob bleeds outward from the drop point.
+                  spread: (0.16 + 0.16 * next()) * minDim,
+                  // Base diameter; the first blob is the fat mother drop.
+                  size: (i === 0 ? 0.34 : 0.14 + 0.12 * next()) * minDim,
+                  // Bloom stagger and death schedule, fractions of IN.
+                  birth: i === 0 ? 0 : 0.04 + 0.3 * next(),
+                  die: 0.5 + 0.16 * next(),
+                  // Wobble makes the bleed organic; amplitude rides (1 - die)
+                  // so it is exactly zero once the blob is gone.
+                  wobbleAmp: (0.02 + 0.03 * next()) * minDim,
+                  wobblePhase: next() * Math.PI * 2,
+                  wobbleFreq: 2 + Math.floor(next() * 3),
+                });
+              }
+              return rows;
+            })();
+
+            function clamp01(v) {
+              return v < 0 ? 0 : v > 1 ? 1 : v;
+            }
+            function easeOutCubic(v) {
+              return 1 - Math.pow(1 - v, 3);
+            }
+            function easeInOut(v) {
+              return v < 0.5 ? 2 * v * v : 1 - Math.pow(-2 * v + 2, 2) / 2;
+            }
+
+            // Pure repaint: clear the work buffer, draw every blob from its
+            // closed-form (row, p) state, blur, threshold the readback, then
+            // blit up to the display canvas. Every step is a pure function
+            // of (table, timeline time); no history survives a frame.
+            function paint(timeSeconds) {
+              var p = IN > 0 ? clamp01(timeSeconds / IN) : 1;
+              ctx.clearRect(0, 0, canvas.width, canvas.height);
+              // The layer fades over the mark as the last blobs die,
+              // guaranteeing an exactly-empty canvas through the HOLD.
+              var layerAlpha = 1 - clamp01((p - 0.86) / 0.12);
+              if (layerAlpha === 0) return;
+              workCtx.filter = "none";
+              workCtx.clearRect(0, 0, work.width, work.height);
+              workCtx.filter = "blur(" + blurLow + "px)";
+              workCtx.fillStyle = inkColor;
+              var drew = false;
+              for (var i = 0; i < blobRows.length; i += 1) {
+                var row = blobRows[i];
+                // Bloom: the blob surfaces and bleeds outward.
+                var grow = easeOutCubic(clamp01((p - row.birth) / 0.34));
+                // Settle: the ink pulls back to the drop point and dies.
+                // Every die ramp completes by p = 0.97 exactly.
+                var die = easeInOut(clamp01((p - row.die) / (0.97 - row.die)));
+                var r = (row.size / 2) * grow * (1 - die);
+                if (r <= 0.01) continue;
+                var reach = row.spread * grow * (1 - die);
+                var wob =
+                  Math.sin(p * Math.PI * 2 * row.wobbleFreq + row.wobblePhase) *
+                  row.wobbleAmp *
+                  grow *
+                  (1 - die);
+                var x = cx + row.dirX * reach + wob * row.dirY;
+                var y = cy + row.dirY * reach - wob * row.dirX;
+                workCtx.beginPath();
+                workCtx.arc(x / LOW, y / LOW, r / LOW, 0, Math.PI * 2);
+                workCtx.fill();
+                drew = true;
+              }
+              workCtx.filter = "none";
+              if (!drew) return;
+              // The colormatrix threshold (alpha row 22 / -9) applied to the
+              // blurred buffer: this snap is what turns overlap into goo.
+              var image = workCtx.getImageData(0, 0, work.width, work.height);
+              var data = image.data;
+              for (var j = 3; j < data.length; j += 4) {
+                var a = (data[j] / 255) * 22 - 9;
+                data[j] = a <= 0 ? 0 : a >= 1 ? 255 : Math.round(a * 255);
+              }
+              workCtx.putImageData(image, 0, 0);
+              ctx.globalAlpha = layerAlpha;
+              ctx.drawImage(work, 0, 0, canvas.width, canvas.height);
+              ctx.globalAlpha = 1;
+            }
+
+            gsap.set(stage, { opacity: 1, y: "0cqh" });
+            gsap.set(mark, { opacity: 0, scale: 0.94, transformOrigin: "50% 50%" });
+
+            var tl = gsap.timeline({
+              paused: true,
+              onUpdate: function () {
+                paint(tl.time());
+              },
+            });
+
+            // Anchor tween: an inert plain-object tween spanning the full
+            // authored duration so tl.time() covers [0, D] and onUpdate
+            // (the blob painter) fires for every eventful seek anywhere in
+            // the piece, including the hold.
+            tl.to({ p: 0 }, { p: 1, duration: duration, ease: "none" }, 0);
+
+            // IN: the crisp mark resolves beneath the contracting puddle.
+            // Both endpoints authored; the ink supplies the drama, the mark
+            // lands with one restrained settle.
+            tl.fromTo(
+              mark,
+              { opacity: 0 },
+              { opacity: 1, duration: IN * 0.34, ease: "power2.out" },
+              IN * 0.52,
+            );
+            tl.fromTo(
+              mark,
+              { scale: 0.94 },
+              { scale: 1, duration: IN * 0.4, ease: "power2.out" },
+              IN * 0.52,
+            );
+
+            // HOLD: truly still. The goo canvas is one clear rect (every
+            // blob dead, layer alpha zero) and the grain is a static seeded
+            // raster.
+
+            // OUT: optional departure; exit none holds until the frame cuts.
+            if (exit === "up") {
+              tl.to(stage, { y: "-4cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "fade") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            }
+
+            tl.seek(0);
+            paint(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["ink-bleed-reveal"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add ink-bleed-reveal" />
+
+That writes one file: `compositions/components/ink-bleed-reveal.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/ink-bleed-reveal.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `texture` `reveal` `gooey` `svg-filter` `deterministic` `experiment`.
+
+## 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/components/inline-highlight.mdx b/docs/catalog/components/inline-highlight.mdx
new file mode 100644
index 0000000000..58f8077758
--- /dev/null
+++ b/docs/catalog/components/inline-highlight.mdx
@@ -0,0 +1,151 @@
+---
+title: "Inline Highlight"
+description: "A clean marker-style inline highlight that animates behind text using a CSS scale variable"
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/components/inline-highlight.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Inline Highlight preview" />
+
+## Install
+
+<InstallCommand command="npx hyperframes add inline-highlight" />
+
+That writes one file: `compositions/components/inline-highlight.html`.
+
+## Variables
+
+Every one of these has a default, so the piece works untouched. Set the ones you
+want to change on the element:
+
+| Variable | Default | Accepts | What it does |
+| --- | --- | --- | --- |
+| `tint` | `yellow` | `yellow`, `green`, `blue`, `violet` | Marker colour. Green, blue and violet ride --brand, --accent and --accent-2. |
+| `thickness` | `standard` | `thin`, `standard`, `thick` | Height of the marker band behind the text, as a share of the font size. |
+| `origin` | `left` | `left`, `right`, `center` | Edge the marker grows out of as the scale variable runs from 0 to 1. |
+
+Set them with `data-variable-values` on the element that mounts it. These are the
+defaults, so this behaves exactly like the preview above until you change one:
+
+```html wrap
+<div
+  data-composition-id="inline-highlight"
+  data-composition-src="compositions/components/inline-highlight.html"
+  data-variable-values='{"tint":"yellow","thickness":"standard","origin":"left"}'
+></div>
+```
+
+## Source
+
+<Accordion title={`inline-highlight.html`}>
+
+```html
+<!--
+  Inline Highlight - animated marker underline/fill.
+
+  Wrap target text with class="hf-inline-highlight". Animate
+  --hf-highlight-scale from 0 to 1 on the element.
+
+  Variables. The script reads each one, falls back to the declared default on anything
+  missing or unrecognised, and writes the result onto the document root, so highlights
+  authored anywhere in the composition pick it up no matter when they are parsed. The
+  timeline recipe below is untouched by them.
+
+    - tint (yellow | green | blue | violet, default yellow): marker colour. yellow is the
+      highlighter default, the other three ride --brand, --accent and --accent-2.
+    - thickness (thin | standard | thick, default standard): height of the band behind the
+      text, 0.22em, 0.38em or 0.62em.
+    - origin (left | right | center, default left): edge the marker grows out of while
+      --hf-highlight-scale runs from 0 to 1.
+
+  Setting --hf-highlight-color, --hf-highlight-height or --hf-highlight-origin on an
+  individual highlight still wins over the variable, so one-off overrides keep working.
+-->
+
+<style
+  data-composition-variables='[
+    { "id": "tint", "type": "enum", "role": "style", "label": "Tint", "description": "Marker colour. Green, blue and violet ride --brand, --accent and --accent-2.", "default": "yellow", "options": [{ "value": "yellow", "label": "Yellow" }, { "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "thickness", "type": "enum", "role": "style", "label": "Thickness", "description": "Height of the marker band behind the text, as a share of the font size.", "default": "standard", "options": [{ "value": "thin", "label": "Thin" }, { "value": "standard", "label": "Standard" }, { "value": "thick", "label": "Thick" }] },
+    { "id": "origin", "type": "enum", "role": "motion", "label": "Origin", "description": "Edge the marker grows out of as the scale variable runs from 0 to 1.", "default": "left", "options": [{ "value": "left", "label": "Left" }, { "value": "right", "label": "Right" }, { "value": "center", "label": "Center" }] }
+  ]'
+>
+  .hf-inline-highlight {
+    --hf-highlight-scale: 0;
+    position: relative;
+    display: inline;
+    z-index: 0;
+  }
+  .hf-inline-highlight::after {
+    content: "";
+    position: absolute;
+    left: -0.08em;
+    right: -0.08em;
+    bottom: 0.05em;
+    height: var(--hf-highlight-height, 0.38em);
+    background: var(--hf-highlight-color, #fff06a);
+    transform: scaleX(var(--hf-highlight-scale));
+    transform-origin: var(--hf-highlight-origin, left center);
+    z-index: -1;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var tints = {
+      yellow: "#fff06a",
+      green: "var(--brand, #34d399)",
+      blue: "var(--accent, #38bdf8)",
+      violet: "var(--accent-2, #a78bfa)",
+    };
+    var heights = { thin: "0.22em", standard: "0.38em", thick: "0.62em" };
+    var origins = { left: "left center", right: "right center", center: "center" };
+
+    var root = document.documentElement;
+    root.style.setProperty("--hf-highlight-color", tints[pick(tints, vars.tint, "yellow")]);
+    root.style.setProperty(
+      "--hf-highlight-height",
+      heights[pick(heights, vars.thickness, "standard")],
+    );
+    root.style.setProperty("--hf-highlight-origin", origins[pick(origins, vars.origin, "left")]);
+  })();
+</script>
+
+<!--
+  Timeline integration:
+
+  tl.to(".hf-inline-highlight", {
+    "--hf-highlight-scale": 1,
+    duration: 0.55,
+    ease: "power2.out",
+    stagger: 0.12,
+  }, startTime);
+-->
+```
+
+</Accordion>
+
+## Usage
+
+Open `compositions/components/inline-highlight.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `text` `highlight` `caption`.
+
+## 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/components/input-feedback.mdx b/docs/catalog/components/input-feedback.mdx
new file mode 100644
index 0000000000..9c33c6735a
--- /dev/null
+++ b/docs/catalog/components/input-feedback.mdx
@@ -0,0 +1,194 @@
+---
+title: "Input Feedback"
+description: "A transitions.dev-inspired input feedback primitive with shake, clear affordance, and success state"
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/input-feedback.html"
+  compositionId="input-feedback"
+  compositionSrc="compositions/components/input-feedback.html"
+  variables={[{"id":"status","type":"enum","role":"style","label":"Status","description":"Whether the field reads as accepted or rejected, colouring the border, chip and hint.","default":"valid","options":[{"value":"valid","label":"Valid"},{"value":"error","label":"Error"}]},{"id":"value","type":"string","role":"content","label":"Value","description":"Text held by the field.","default":"mia@example.com"},{"id":"hint","type":"string","role":"content","label":"Hint","description":"Helper line under the field.","default":"Looks good."}]}
+>
+
+```html input-feedback.html
+<!--
+  Input Feedback - transitions.dev-inspired primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Use the timeline
+  integration note at the bottom as the starting point for deterministic GSAP
+  animation.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the text or state attribute the
+  CSS below already keys off. The timeline recipe at the bottom is untouched
+  by them: it keeps shaking the same shell and popping the same chip.
+
+    - status (valid | error, default valid): whether the field reads as
+      accepted or rejected. valid is the green border, chip and hint; error
+      turns all three red and swaps the chip glyph to an exclamation mark.
+      Pair it with a matching hint.
+    - value (string, default "mia@example.com"): the text held by the field.
+      A blank or non-text override keeps the default.
+    - hint (string, default "Looks good."): the helper line under the field.
+
+  On every default the result is identical to the original: a green valid
+  field holding mia@example.com over Looks good.
+-->
+
+<div
+  class="hf-transition-input-feedback"
+  data-state="valid"
+  data-composition-variables='[
+    { "id": "status", "type": "enum", "role": "style", "label": "Status", "description": "Whether the field reads as accepted or rejected, colouring the border, chip and hint.", "default": "valid", "options": [{ "value": "valid", "label": "Valid" }, { "value": "error", "label": "Error" }] },
+    { "id": "value", "type": "string", "role": "content", "label": "Value", "description": "Text held by the field.", "default": "mia@example.com" },
+    { "id": "hint", "type": "string", "role": "content", "label": "Hint", "description": "Helper line under the field.", "default": "Looks good." }
+  ]'
+>
+  <label>Email</label>
+  <div class="hf-transition-input-shell">
+    <span class="hf-transition-input-value">mia@example.com</span>
+    <button class="hf-transition-input-clear" type="button">x</button>
+    <span class="hf-transition-input-check">OK</span>
+  </div>
+  <p class="hf-transition-input-hint">Looks good.</p>
+</div>
+
+<style>
+  .hf-transition-input-feedback {
+    --hf-fb-border: #d4d4d8;
+    --hf-fb-chip-bg: #dcfce7;
+    --hf-fb-chip-fg: #166534;
+    --hf-fb-hint: #16a34a;
+    display: grid;
+    gap: 10px;
+    width: 430px;
+    color: #18181b;
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-transition-input-feedback label {
+    color: #52525b;
+    font-size: 15px;
+    font-weight: 850;
+  }
+  .hf-transition-input-shell {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    height: 62px;
+    padding: 0 16px;
+    border: 1px solid var(--hf-fb-border);
+    border-radius: 16px;
+    background: #ffffff;
+    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.08);
+  }
+  .hf-transition-input-value {
+    flex: 1;
+    font-size: 20px;
+    font-weight: 760;
+  }
+  .hf-transition-input-clear,
+  .hf-transition-input-check {
+    display: grid;
+    place-items: center;
+    height: 28px;
+    border-radius: 999px;
+    font-size: 12px;
+    font-weight: 900;
+  }
+  .hf-transition-input-clear {
+    width: 28px;
+    border: 0;
+    background: #f4f4f5;
+    color: #71717a;
+  }
+  .hf-transition-input-check {
+    min-width: 38px;
+    padding: 0 8px;
+    background: var(--hf-fb-chip-bg);
+    color: var(--hf-fb-chip-fg);
+  }
+  .hf-transition-input-hint {
+    margin: 0;
+    color: var(--hf-fb-hint);
+    font-size: 14px;
+    font-weight: 800;
+  }
+  .hf-transition-input-feedback[data-state="error"] {
+    --hf-fb-border: #fca5a5;
+    --hf-fb-chip-bg: #fee2e2;
+    --hf-fb-chip-fg: #991b1b;
+    --hf-fb-hint: #dc2626;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    function text(value, fallback) {
+      return typeof value === "string" && value.trim() !== "" ? value : fallback;
+    }
+
+    var statuses = { valid: "OK", error: "!" };
+
+    var status = pick(statuses, vars.status, "valid");
+    var value = text(vars.value, "mia@example.com");
+    var hint = text(vars.hint, "Looks good.");
+
+    var roots = document.querySelectorAll(".hf-transition-input-feedback");
+    for (var i = 0; i < roots.length; i += 1) {
+      var root = roots[i];
+      root.setAttribute("data-state", status);
+      var valueEl = root.querySelector(".hf-transition-input-value");
+      if (valueEl) valueEl.textContent = value;
+      var hintEl = root.querySelector(".hf-transition-input-hint");
+      if (hintEl) hintEl.textContent = hint;
+      var chip = root.querySelector(".hf-transition-input-check");
+      if (chip) chip.textContent = statuses[status];
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-transition-input-feedback', { y: 22, opacity: 0 }, { y: 0, opacity: 1, duration: 0.34, ease: 'power2.out' }, 0.3);
+  tl.to('.hf-transition-input-shell', { x: -12, duration: 0.06, repeat: 5, yoyo: true, ease: 'none' }, 0.72);
+  tl.fromTo('.hf-transition-input-check', { scale: 0, opacity: 0 }, { scale: 1, opacity: 1, duration: 0.28, ease: 'back.out(2)' }, 1.18);
+  tl.fromTo('.hf-transition-input-hint', { opacity: 0, y: -6 }, { opacity: 1, y: 0, duration: 0.22, ease: 'power2.out' }, 1.28);
+-->
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add input-feedback" />
+
+That writes one file: `compositions/components/input-feedback.html`.
+
+## Usage
+
+Open `compositions/components/input-feedback.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+
+{/* hf:generated-footer */}
+
+Tagged `transition-primitive` `transitions-dev-port` `input` `feedback`.
+
+## 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/components/iris-reveal.mdx b/docs/catalog/components/iris-reveal.mdx
new file mode 100644
index 0000000000..20a6596bed
--- /dev/null
+++ b/docs/catalog/components/iris-reveal.mdx
@@ -0,0 +1,520 @@
+---
+title: "Iris Reveal"
+description: "A circle clip-path opens from an authored origin revealing state B over state A in one confident pass, then holds on B. Classic register dims and desaturates the before state so the after state lands in full color; a thin accent rim rides the iris edge. Callers fill the named before/after slot panels; token-styled defaults render when a slot is left empty."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/iris-reveal.html"
+  compositionId="iris-reveal"
+  compositionSrc="compositions/components/iris-reveal.html"
+  variables={[{"id":"iris_x","type":"number","role":"layout","label":"Iris origin X","description":"Horizontal iris origin as a percent of the frame width.","default":50,"min":0,"max":100,"step":1,"unit":"%"},{"id":"iris_y","type":"number","role":"layout","label":"Iris origin Y","description":"Vertical iris origin as a percent of the frame height.","default":50,"min":0,"max":100,"step":1,"unit":"%"},{"id":"open_at","type":"number","role":"timing","label":"Open start","description":"Seconds after mount start when the iris begins opening.","default":0.35,"min":0,"max":8,"step":0.05,"unit":"s"},{"id":"register","type":"enum","role":"style","label":"Register","description":"Color dims and desaturates the before state so the after state lands in full color. Plain leaves both untouched.","default":"color","options":[{"value":"color","label":"Color"},{"value":"plain","label":"Plain"}]},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Iris rim ring and default after art tint.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Outgoing transition. None holds the final revealed frame.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
+>
+
+```html iris-reveal.html
+<!doctype html>
+<!--
+  iris-reveal: HyperFrames video primitive (transitions / bridge)
+
+  Concept: a circle clip-path opens from an authored origin (iris_x/iris_y
+  percent) revealing state B over state A. Classic register: A grayscale and
+  dimmed, B full color. One confident pass, then a still hold on B. Two
+  full-bleed content slots (the before-after-wipe convention) with
+  token-styled defaults; callers supply the two states, the primitive
+  supplies the iris.
+
+  Wave K, unit K2. Clip-path only (no dashes, no masks); both endpoints of
+  the opening tween are authored (fromTo via a seeded proxy), so seeks are
+  deterministic in both directions.
+
+  Slots (see README.md for a worked example):
+    - [data-slot="before"]: state A, the base layer. Replace the children of
+      this element in your installed copy. Default: a muted token wireframe.
+    - [data-slot="after"]:  state B, revealed by the iris. Same mechanism.
+      Default: a brand-tinted version of the wireframe.
+    Direct img/video children of a slot are sized to cover the panel.
+
+  Variables (declared in data-composition-variables below):
+    - iris_x (number, default 50, 0 to 100%): iris origin, percent of width.
+    - iris_y (number, default 50, 0 to 100%): iris origin, percent of height.
+    - open_at (number, seconds, default 0.35): when the iris starts opening,
+      relative to mount start. Clamped so the pass completes inside IN.
+    - register (color | plain, default color): color dims and desaturates
+      state A so B lands in full color; plain leaves both states untouched.
+    - accent (green | blue | violet, default green): iris rim ring and the
+      default after art tint. green maps to --brand, blue to --accent,
+      violet to --accent-2.
+    - exit (none | fade | up, default none): outgoing transition. none holds
+      the final frame (frame roots own transitions; holds end films).
+
+  The iris rim is a thin accent circle (SVG stroke, fixed width) that rides
+  the exact same radius proxy as the clip-path, so rim and clip edge are
+  locked on every frame. It fades in as the pass starts and dissolves just
+  before the iris clears the frame corners.
+
+  Envelope (fixed IN/OUT, elastic HOLD only, never gsap.timeScale()):
+    IN       = open_at + 1.10s iris pass (stage settles during the first 0.32s)
+    HOLD     = elastic = max(0, D - (IN + OUT)); deliberately still on B
+    OUT      = 0.50s when exit is fade or up, 0 when exit is none
+    If D < IN + OUT, IN and OUT scale down together so IN + OUT == D.
+
+  Sync point: iris-open land at open_at + 1.10s inside IN (1.45s at
+  defaults). It never moves into elastic HOLD.
+
+  Sound cue: dispatches a bubbling `hf:sfx` CustomEvent with id
+  "iris-land-soft" at iris land. This primitive never plays audio.
+
+  Determinism: the full radius and the iris center are measured in px once
+  at mount (the K-wave law for cq-unit transform traps); the radius proxy is
+  the single owner of clip and rim progress, re-written on every seek via
+  onUpdate. Quiet register by default (L2); no percussive variants.
+
+  Mount contract: MOUNTABLE SUB-COMPOSITION. The runtime clones only
+  <template> contents; #root fills the host box (inset:0, container-type:
+  size), has no data-width/data-height, and registers one paused timeline
+  under the literal "iris-reveal" key (mount flattening strips
+  data-composition-id from the live root). Variables come from
+  window.__hyperframes.getVariables().
+-->
+<html
+  lang="en"
+  data-composition-id="iris-reveal"
+  data-composition-duration="3.5"
+  data-composition-variables='[
+    { "id": "iris_x", "type": "number", "role": "layout", "label": "Iris origin X", "description": "Horizontal iris origin as a percent of the frame width.", "default": 50, "min": 0, "max": 100, "step": 1, "unit": "%" },
+    { "id": "iris_y", "type": "number", "role": "layout", "label": "Iris origin Y", "description": "Vertical iris origin as a percent of the frame height.", "default": 50, "min": 0, "max": 100, "step": 1, "unit": "%" },
+    { "id": "open_at", "type": "number", "role": "timing", "label": "Open start", "description": "Seconds after mount start when the iris begins opening.", "default": 0.35, "min": 0, "max": 8, "step": 0.05, "unit": "s" },
+    { "id": "register", "type": "enum", "role": "style", "label": "Register", "description": "Color dims and desaturates the before state so the after state lands in full color. Plain leaves both untouched.", "default": "color", "options": [{ "value": "color", "label": "Color" }, { "value": "plain", "label": "Plain" }] },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Iris rim ring and default after art tint.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Outgoing transition. None holds the final revealed frame.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Iris Reveal</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="iris-reveal" data-duration="3.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          /* Root fills the host-owned box. Internal measurements use cqw/cqh
+             and every painted color comes from a contract token. */
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            background: var(--bg, #07111f);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+          }
+
+          .ir-clip,
+          .ir-stage,
+          .ir-panel,
+          .ir-slot,
+          .ir-rim {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+          }
+
+          .ir-clip {
+            overflow: hidden;
+          }
+
+          .ir-stage {
+            opacity: 0;
+          }
+
+          .ir-panel {
+            overflow: hidden;
+          }
+
+          /* The after layer is revealed by one circle clip-path. --ir-r (px)
+             is written by the radius proxy, the single owner of iris
+             progress; --ir-cx/--ir-cy are set once at mount. */
+          .ir-after {
+            z-index: 2;
+            clip-path: circle(calc(var(--ir-r, 0) * 1px) at var(--ir-cx, 50%) var(--ir-cy, 50%));
+          }
+
+          /* Classic register: state A reads dimmed and desaturated so state B
+             lands in full color. Static CSS, never tweened. */
+          #root[data-register="color"] .ir-before .ir-slot {
+            filter: grayscale(1) brightness(0.76);
+          }
+
+          /* Caller-supplied media covers its panel edge to edge. */
+          .ir-slot > img,
+          .ir-slot > video {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+          }
+
+          /* The rim ring rides the same radius proxy as the clip edge. Fixed
+             stroke width in px (set at mount), fill none, no dashes. */
+          .ir-rim {
+            z-index: 3;
+            overflow: visible;
+            pointer-events: none;
+          }
+
+          .ir-rim circle {
+            fill: none;
+            stroke: var(--ir-accent, #22c55e);
+          }
+
+          /* Token-styled default slot content: a wireframe card that reads
+             muted on the before layer and brand-tinted on the after layer.
+             Callers replacing slot children never see any of this. */
+          .ir-default {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+          }
+
+          .ir-before .ir-default {
+            background:
+              linear-gradient(
+                  color-mix(in srgb, var(--border, #334155) 34%, transparent) 0.12cqw,
+                  transparent 0.12cqw
+                )
+                0 0 / 5cqw 5cqw,
+              linear-gradient(
+                  90deg,
+                  color-mix(in srgb, var(--border, #334155) 34%, transparent) 0.12cqw,
+                  transparent 0.12cqw
+                )
+                0 0 / 5cqw 5cqw,
+              var(--surface, #172033);
+          }
+
+          .ir-after .ir-default {
+            background: linear-gradient(
+              135deg,
+              color-mix(in srgb, var(--brand, #22c55e) 32%, var(--surface, #172033)) 0%,
+              var(--surface, #172033) 58%,
+              color-mix(in srgb, var(--ir-accent, #22c55e) 22%, var(--surface, #172033)) 100%
+            );
+          }
+
+          .ir-card {
+            width: 56cqw;
+            height: 56cqh;
+            padding: var(--space-3, 4cqh) var(--space-3, 4cqw);
+            border: 0.16cqw solid var(--border, #334155);
+            border-radius: var(--radius, 2.4cqmin);
+            background: color-mix(in srgb, var(--surface, #172033) 88%, var(--bg, #07111f));
+            box-shadow: 0 2cqh 5cqw color-mix(in srgb, var(--bg, #07111f) 45%, transparent);
+          }
+
+          .ir-after .ir-card {
+            border-color: color-mix(in srgb, var(--ir-accent, #22c55e) 52%, var(--border, #334155));
+            background: color-mix(in srgb, var(--surface, #172033) 86%, var(--brand, #22c55e));
+          }
+
+          .ir-bar {
+            width: 34%;
+            height: 4.4cqh;
+            margin-bottom: var(--space-3, 4cqh);
+            border-radius: 1.2cqh;
+            background: var(--muted, #94a3b8);
+            opacity: 0.5;
+          }
+
+          .ir-after .ir-bar {
+            background: var(--ir-accent, #22c55e);
+            opacity: 0.92;
+          }
+
+          .ir-line {
+            height: 2.4cqh;
+            margin-bottom: var(--space-2, 2.6cqh);
+            border-radius: 1.2cqh;
+            background: var(--muted, #94a3b8);
+            opacity: 0.4;
+          }
+
+          .ir-line:nth-of-type(2) {
+            width: 92%;
+          }
+
+          .ir-line:nth-of-type(3) {
+            width: 68%;
+          }
+
+          .ir-line:nth-of-type(4) {
+            width: 44%;
+          }
+
+          .ir-after .ir-line {
+            background: color-mix(in srgb, var(--brand, #22c55e) 70%, var(--fg, #f8fafc));
+            opacity: 0.75;
+          }
+        </style>
+
+        <div
+          id="iris-reveal-clip"
+          class="ir-clip clip"
+          data-start="0"
+          data-duration="3.5"
+          data-track-index="0"
+        >
+          <div class="ir-stage">
+            <section class="ir-panel ir-before" aria-label="Before panel">
+              <div class="ir-slot" data-slot="before">
+                <!-- SLOT "before": replace the children of this element with
+                     your own content (img, video, or HTML). -->
+                <div class="ir-default" aria-hidden="true">
+                  <div class="ir-card">
+                    <div class="ir-bar"></div>
+                    <div class="ir-line"></div>
+                    <div class="ir-line"></div>
+                    <div class="ir-line"></div>
+                  </div>
+                </div>
+              </div>
+            </section>
+
+            <section class="ir-panel ir-after" aria-label="After panel">
+              <div class="ir-slot" data-slot="after">
+                <!-- SLOT "after": replace the children of this element with
+                     your own content (img, video, or HTML). -->
+                <div class="ir-default" aria-hidden="true">
+                  <div class="ir-card">
+                    <div class="ir-bar"></div>
+                    <div class="ir-line"></div>
+                    <div class="ir-line"></div>
+                    <div class="ir-line"></div>
+                  </div>
+                </div>
+              </div>
+            </section>
+
+            <svg class="ir-rim" aria-hidden="true">
+              <circle class="ir-rim-circle" cx="0" cy="0" r="0"></circle>
+            </svg>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            // Literal id: mount flattening strips data-composition-id from the
+            // live root before this timeline registers.
+            var compositionId = "iris-reveal";
+            var stage = root.querySelector(".ir-stage");
+            var after = root.querySelector(".ir-after");
+            var rim = root.querySelector(".ir-rim");
+            var rimCircle = root.querySelector(".ir-rim-circle");
+
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            function clampNumber(raw, fallback, min, max) {
+              var value = raw == null ? fallback : Number(raw);
+              if (!Number.isFinite(value)) return fallback;
+              return Math.max(min, Math.min(max, value));
+            }
+
+            // INVARIANT: iris origin always clamps into the declared 0-100 range.
+            var irisX = clampNumber(vars.iris_x, 50, 0, 100);
+            var irisY = clampNumber(vars.iris_y, 50, 0, 100);
+            var openAt = clampNumber(vars.open_at, 0.35, 0, 8);
+            var register = vars.register === "plain" ? "plain" : "color";
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #22c55e)",
+              blue: "var(--accent, #38bdf8)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            // The bundler mirrors composition variables as scoped CSS custom
+            // props, so this unit's own accent variable can shadow the
+            // contract --accent token inside the subtree ("blue" is a valid
+            // CSS color and would render pure blue). When the shadow is
+            // present, fall back to the literal contract value.
+            var computedAccent = getComputedStyle(root).getPropertyValue("--accent").trim();
+            if (
+              computedAccent === "green" ||
+              computedAccent === "blue" ||
+              computedAccent === "violet"
+            ) {
+              accentColors.blue = "#38bdf8";
+            }
+            // INVARIANT: only none | fade | up reaches the timeline.
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            root.dataset.register = register;
+            root.style.setProperty("--ir-accent", accentColors[accent]);
+            root.style.setProperty("--ir-cx", irisX + "%");
+            root.style.setProperty("--ir-cy", irisY + "%");
+
+            // Geometry measured in px ONCE at mount (cq units inside tweened
+            // values are a seek trap). The full radius clears the farthest
+            // frame corner with a small margin so the landed frame has no
+            // visible clip edge.
+            var width = root.clientWidth || 1920;
+            var height = root.clientHeight || 1080;
+            var centerX = (irisX / 100) * width;
+            var centerY = (irisY / 100) * height;
+            var fullRadius =
+              Math.hypot(Math.max(centerX, width - centerX), Math.max(centerY, height - centerY)) *
+                1.02 +
+              2;
+
+            rim.setAttribute("viewBox", "0 0 " + width + " " + height);
+            rimCircle.setAttribute("cx", String(centerX));
+            rimCircle.setAttribute("cy", String(centerY));
+            rimCircle.setAttribute("stroke-width", String(Math.max(2, width * 0.0021)));
+
+            // RETIME RANGE: fixed IN and OUT scale together only when D is too
+            // short. HOLD is the sole elastic phase. Never use timeScale().
+            var STAGE_IN_BASE = 0.32;
+            var OPEN_DURATION_BASE = 1.1;
+            var IN_BASE = openAt + OPEN_DURATION_BASE;
+            var OUT_BASE = exit === "none" ? 0 : 0.5;
+
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "3.5"));
+            var totalBase = IN_BASE + OUT_BASE;
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var STAGE_IN = Math.min(STAGE_IN_BASE * scale, IN);
+            var OPEN_AT = openAt * scale;
+            var OPEN_DURATION = OPEN_DURATION_BASE * scale;
+            var OPEN_END = IN;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var OUT_START = IN + HOLD;
+
+            function fireSfx(id, t) {
+              root.dispatchEvent(
+                new CustomEvent("hf:sfx", { detail: { id: id, t: t }, bubbles: true }),
+              );
+            }
+
+            // ONE radius proxy owns both the clip-path and the rim ring, so
+            // the two edges are locked on every frame. Seeded before the
+            // timeline builds so tl.seek(0) shows the closed iris.
+            var radius = { value: 0 };
+            function writeIris() {
+              after.style.setProperty("--ir-r", String(radius.value));
+              rimCircle.setAttribute("r", String(Math.max(0, radius.value)));
+            }
+            writeIris();
+
+            // Explicit both-endpoints state makes tl.seek(0) deterministic.
+            gsap.set(stage, { opacity: 0, y: 0 });
+            gsap.set(rim, { autoAlpha: 0 });
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: stage settle, then ONE confident iris pass (quiet register,
+            // L2). The rim fades in as the pass starts and dissolves just
+            // before the iris clears the frame corners.
+            tl.to(stage, { opacity: 1, duration: STAGE_IN, ease: "power2.out" }, 0);
+            tl.fromTo(
+              radius,
+              { value: 0 },
+              {
+                value: fullRadius,
+                duration: OPEN_DURATION,
+                ease: "power2.inOut",
+                onUpdate: writeIris,
+              },
+              OPEN_AT,
+            );
+            tl.fromTo(
+              rim,
+              { autoAlpha: 0 },
+              {
+                autoAlpha: 1,
+                duration: Math.min(0.18 * scale, OPEN_DURATION),
+                ease: "power1.out",
+                immediateRender: false,
+              },
+              OPEN_AT,
+            );
+            tl.to(
+              rim,
+              { autoAlpha: 0, duration: 0.24 * scale, ease: "power1.in" },
+              Math.max(OPEN_AT, OPEN_END - 0.24 * scale),
+            );
+            tl.call(
+              function () {
+                fireSfx("iris-land-soft", OPEN_END);
+              },
+              [],
+              OPEN_END,
+            );
+
+            // HOLD: deliberately still on the revealed state B.
+
+            // OUT: only when the exit variable asks for one; exit none holds
+            // the final revealed frame (frame roots own transitions).
+            if (exit !== "none") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+              if (exit === "up") {
+                tl.to(stage, { y: "-6cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              }
+            }
+
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add iris-reveal" />
+
+That writes one file: `compositions/components/iris-reveal.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/iris-reveal.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `transition` `iris` `circle-reveal` `clip-path` `bridge` `slots`.
+
+## 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/components/keyframe-scrub-stack.mdx b/docs/catalog/components/keyframe-scrub-stack.mdx
new file mode 100644
index 0000000000..fe807b4d8e
--- /dev/null
+++ b/docs/catalog/components/keyframe-scrub-stack.mdx
@@ -0,0 +1,121 @@
+---
+title: "Keyframe Scrub Stack"
+description: "A keyframe-sequenced stack of cards with offset timing and easing presets."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/components/keyframe-scrub-stack.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Keyframe Scrub Stack preview" />
+
+## Install
+
+<InstallCommand command="npx hyperframes add keyframe-scrub-stack" />
+
+That writes one file: `compositions/components/keyframe-scrub-stack.html`.
+
+## Source
+
+<Accordion title={`keyframe-scrub-stack.html`}>
+
+```html
+<!--
+  Keyframe Scrub Stack - advanced HyperFrames primitive.
+
+  This is intentionally seekable: drive it from a paused GSAP timeline.
+  MotionPath examples require GSAP MotionPathPlugin. Three.js examples expose
+  a render(progress) adapter instead of a free-running requestAnimationFrame loop.
+-->
+
+<div class="hf-advanced-keyframe-scrub-stack">
+  <div class="stack">
+    <div class="card" style="--i: 0"></div>
+    <div class="card" style="--i: 1"></div>
+    <div class="card" style="--i: 2"></div>
+  </div>
+</div>
+
+<style>
+  .hf-advanced-keyframe-scrub-stack {
+    --hf-accent: var(--accent, rgba(17, 24, 39, 0.72));
+    --hf-l1: rgba(17, 24, 39, 0.72);
+    --hf-l3: rgba(17, 24, 39, 0.18);
+    --hf-l4: rgba(17, 24, 39, 0.08);
+    --hf-hair: rgba(17, 24, 39, 0.14);
+    color: var(--hf-l1);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-advanced-keyframe-scrub-stack {
+    width: 720px;
+    min-height: 420px;
+    border-radius: 30px;
+    padding: 36px;
+    background: #fff;
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.16);
+    display: grid;
+    place-items: center;
+  }
+  .hf-advanced-keyframe-scrub-stack .grid {
+    display: grid;
+    grid-template-columns: repeat(8, 46px);
+    gap: 10px;
+  }
+  .hf-advanced-keyframe-scrub-stack .cell {
+    width: 46px;
+    height: 46px;
+    border-radius: 14px;
+    background: var(--hf-l1);
+    transform: translateY(var(--hf-cell-y, 0px)) scale(var(--hf-cell-scale, 1));
+    opacity: var(--hf-cell-opacity, 1);
+  }
+  .hf-advanced-keyframe-scrub-stack svg {
+    width: 520px;
+    height: 220px;
+    overflow: visible;
+  }
+  .hf-advanced-keyframe-scrub-stack path {
+    fill: none;
+    stroke: var(--hf-accent);
+    stroke-width: 14;
+    stroke-linecap: round;
+    stroke-dasharray: 900;
+    stroke-dashoffset: var(--hf-dash, 0);
+  }
+  .hf-advanced-keyframe-scrub-stack .stack {
+    position: relative;
+    width: 520px;
+    height: 260px;
+  }
+  .hf-advanced-keyframe-scrub-stack .card {
+    position: absolute;
+    inset: 0;
+    border-radius: 26px;
+    background: linear-gradient(var(--hf-l4), var(--hf-l4)), #ffffff;
+    border: 1px solid var(--hf-hair);
+    box-shadow: 0 20px 54px rgba(15, 23, 42, 0.14);
+    transform: translateY(var(--hf-card-y, 0px)) scale(var(--hf-card-scale, 1));
+    opacity: var(--hf-card-opacity, 1);
+  }
+</style>
+
+<!--
+  Timeline integration:
+  const startTime = 0;
+  tl.fromTo('.hf-advanced-keyframe-scrub-stack .card', { '--hf-card-y': '42px', '--hf-card-scale': 0.88, '--hf-card-opacity': 0 }, { '--hf-card-y': (i) => (i * 26) + 'px', '--hf-card-scale': (i) => 1 - i * 0.04, '--hf-card-opacity': 1, duration: 0.48, stagger: 0.12, ease: 'back.out(1.6)' }, startTime);
+-->
+```
+
+</Accordion>
+
+## Usage
+
+Open `compositions/components/keyframe-scrub-stack.html` and paste its contents into your composition. The comment header describes the timeline integration and any optional dependency setup.
+
+{/* hf:generated-footer */}
+
+Tagged `advanced-motion` `anime-inspired` `hyperframes-native`.
+
+## 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/components/kinetic-type-swap.mdx b/docs/catalog/components/kinetic-type-swap.mdx
new file mode 100644
index 0000000000..7c3ee5b984
--- /dev/null
+++ b/docs/catalog/components/kinetic-type-swap.mdx
@@ -0,0 +1,415 @@
+---
+title: "Kinetic Type Swap"
+description: "A held sentence keeps its fixed text in place while one widest-word masked slot rolls through alternatives and settles on the final option."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/kinetic-type-swap.html"
+  compositionId="kinetic-type-swap"
+  compositionSrc="compositions/components/kinetic-type-swap.html"
+  variables={[{"id":"prefix","type":"string","role":"content","label":"Prefix","description":"Fixed sentence text before the rolling word slot.","default":"Ship"},{"id":"options","type":"string","role":"content","label":"Options","description":"Comma-separated words shown in the rolling slot.","default":"faster,smarter,together"},{"id":"suffix","type":"string","role":"content","label":"Suffix","description":"Fixed sentence text after the rolling word slot.","default":""},{"id":"cues","type":"string","role":"timing","label":"Cues","description":"Comma-separated seconds (from mount start) for each word swap. Empty keeps the authored even spread.","default":""},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Color used by the rolling word slot.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Optional departure. Default none: the sentence holds until the frame cuts.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
+>
+
+```html kinetic-type-swap.html
+<!doctype html>
+<!--
+  kinetic-type-swap: HyperFrames video primitive (text effects / swap)
+
+  A held sentence keeps its prefix and suffix fixed while one masked word
+  slot rolls through comma-separated options. Every option remains in the
+  same CSS grid cell, so the slot takes the widest option's intrinsic width
+  before motion starts and the sentence never reflows during a swap.
+
+  Variables:
+    - prefix (string, default "Ship"): fixed text before the rolling slot.
+    - options (string, default "faster,smarter,together"): comma-separated
+      words shown in order.
+    - suffix (string, default ""): fixed text after the rolling slot.
+    - cues (string, default ""): comma-separated seconds (from mount start)
+      for each word swap. Empty keeps the authored even spread.
+    - accent (green | blue | violet, default "green"): rolling word color.
+    - exit (none | fade | up, default "none"): optional departure.
+
+  Envelope, fixed IN and OUT with elastic HOLD only:
+    IN_BASE  = 2.25s, fade in followed by every vertical word swap (cues can
+               stretch the swap phase past IN_BASE when they land later)
+    HOLD     = max(0, D - IN - OUT), final word stays locked with a soft pulse
+    OUT_BASE = 0.45s departure when exit is fade or up, 0s when exit is
+               none (the default: the sentence holds until the cut)
+    If D is shorter than IN_BASE + OUT_BASE, IN and OUT compress together.
+    The timeline is never time-scaled.
+
+  Determinism: options are parsed once before timeline construction. GSAP
+  owns every visible change, uses finite repeats, and registers one paused
+  timeline under the literal kinetic-type-swap key.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, and has no data-width or
+  data-height. Only word transforms change position. The held sentence never
+  moves, and the grid-owned slot width never changes.
+-->
+<html
+  lang="en"
+  data-composition-id="kinetic-type-swap"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "prefix", "type": "string", "role": "content", "label": "Prefix", "description": "Fixed sentence text before the rolling word slot.", "default": "Ship" },
+    { "id": "options", "type": "string", "role": "content", "label": "Options", "description": "Comma-separated words shown in the rolling slot.", "default": "faster,smarter,together" },
+    { "id": "suffix", "type": "string", "role": "content", "label": "Suffix", "description": "Fixed sentence text after the rolling word slot.", "default": "" },
+    { "id": "cues", "type": "string", "role": "timing", "label": "Cues", "description": "Comma-separated seconds (from mount start) for each word swap. Empty keeps the authored even spread.", "default": "" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Color used by the rolling word slot.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the sentence holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Kinetic Type Swap</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="kinetic-type-swap" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .kts-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .kts-stage {
+            display: grid;
+            place-items: center;
+            width: 94cqw;
+            height: 70cqh;
+            opacity: 0;
+          }
+
+          .kts-sentence {
+            display: flex;
+            align-items: baseline;
+            justify-content: center;
+            /* Word gap must scale with the display type, never a host layout
+               spacing token: --space-* is chrome-scale and jams the sentence
+               ("Makemomentumvisible") when the type is auto-fitted large. */
+            gap: 0.26em;
+            max-width: 94cqw;
+            color: var(--fg, #f8fafc);
+            font-size: var(--kts-font-size);
+            font-weight: 760;
+            line-height: 1.08;
+            letter-spacing: -0.045em;
+            white-space: nowrap;
+          }
+
+          .kts-prefix,
+          .kts-suffix {
+            flex: 0 0 auto;
+          }
+
+          .kts-prefix:empty,
+          .kts-suffix:empty {
+            display: none;
+          }
+
+          /* Every word occupies one grid cell and contributes its intrinsic
+             width. Transforms do not affect layout, so this masked slot stays
+             as wide as the widest option for the entire composition. */
+          .kts-slot {
+            display: inline-grid;
+            flex: 0 0 auto;
+            overflow: hidden;
+            color: var(--kts-accent);
+            text-shadow: 0 0 2.8cqh color-mix(in srgb, var(--kts-accent) 28%, transparent);
+            vertical-align: baseline;
+          }
+
+          .kts-word {
+            grid-area: 1 / 1;
+            width: max-content;
+            justify-self: center;
+            color: var(--kts-accent);
+            will-change: transform, opacity;
+          }
+        </style>
+
+        <div
+          id="kinetic-type-swap-clip"
+          class="kts-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="kts-stage" role="img">
+            <div class="kts-sentence">
+              <span class="kts-prefix"></span>
+              <span class="kts-slot" aria-hidden="true"></span>
+              <span class="kts-suffix"></span>
+            </div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".kts-stage");
+            var prefixElement = root.querySelector(".kts-prefix");
+            var slotElement = root.querySelector(".kts-slot");
+            var suffixElement = root.querySelector(".kts-suffix");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var defaultOptions = ["faster", "smarter", "together"];
+            var prefix = vars.prefix == null ? "Ship" : String(vars.prefix).trim();
+            var suffix = vars.suffix == null ? "" : String(vars.suffix).trim();
+            var rawOptions = vars.options == null ? defaultOptions.join(",") : String(vars.options);
+            var options = rawOptions
+              .split(",")
+              .map(function (option) {
+                return option.trim();
+              })
+              .filter(function (option) {
+                return option.length > 0;
+              });
+            if (options.length === 0) options = defaultOptions.slice();
+
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+            var cuesValue = vars.cues == null ? "" : String(vars.cues);
+            var cues = cuesValue
+              .split(",")
+              .reduce(function (result, token) {
+                var trimmed = token.trim();
+                if (trimmed === "") return result;
+                var seconds = Number(trimmed);
+                if (!Number.isFinite(seconds) || seconds < 0) return result;
+                result.push(seconds);
+                return result;
+              }, [])
+              .sort(function (a, b) {
+                return a - b;
+              });
+
+            root.style.setProperty("--kts-accent", accentColors[accent]);
+            prefixElement.textContent = prefix;
+            suffixElement.textContent = suffix;
+
+            var words = options.map(function (option, index) {
+              var word = document.createElement("span");
+              word.className = "kts-word";
+              word.id = "kinetic-type-swap-word-" + index;
+              word.textContent = option;
+              slotElement.appendChild(word);
+              return word;
+            });
+
+            var finalSentence = [prefix, options[options.length - 1], suffix]
+              .filter(function (part) {
+                return part.length > 0;
+              })
+              .join(" ");
+            stage.setAttribute("aria-label", finalSentence);
+
+            var widestOptionLength = options.reduce(function (widest, option) {
+              return Math.max(widest, Array.from(option).length);
+            }, 1);
+            var sentenceLength =
+              Array.from(prefix).length + widestOptionLength + Array.from(suffix).length + 2;
+            var fittedCqw = Math.min(12, 122 / Math.max(1, sentenceLength));
+            root.style.setProperty(
+              "--kts-font-size",
+              "min(" + fittedCqw.toFixed(3) + "cqw, 22cqh)",
+            );
+
+            var IN_BASE = 2.25;
+            var OUT_BASE = exit === "none" ? 0 : 0.45;
+            var ARRIVAL_BASE = 0.3;
+            var SWAP_START_BASE = 0.48;
+            var ROLL_BASE = 0.46;
+            var SETTLE_TAIL_BASE = 0.18;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var totalBase = Math.max(0.001, IN_BASE + OUT_BASE);
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var ARRIVAL = ARRIVAL_BASE * scale;
+            var SWAP_START = SWAP_START_BASE * scale;
+            var ROLL = ROLL_BASE * scale;
+            var SETTLE_TAIL = SETTLE_TAIL_BASE * scale;
+
+            // Swap schedule: cues own the swap moments when provided; the
+            // authored even spread otherwise. Swaps beyond the cue list
+            // extrapolate at the cue list's own gap, and every swap clamps
+            // so its roll and settle finish before any exit.
+            var swapCount = words.length - 1;
+            var swapTimes = [];
+            var rollDuration = ROLL;
+            if (swapCount > 0) {
+              if (cues.length > 0) {
+                var lastCue = cues[cues.length - 1];
+                var cueGap =
+                  cues.length >= 2 ? Math.max(0.05, (lastCue - cues[0]) / (cues.length - 1)) : ROLL;
+                var latestSwap = Math.max(0, duration - OUT - ROLL - SETTLE_TAIL);
+                for (var cueIndex = 0; cueIndex < swapCount; cueIndex += 1) {
+                  var cueAt =
+                    cueIndex < cues.length
+                      ? cues[cueIndex]
+                      : lastCue + (cueIndex - (cues.length - 1)) * cueGap;
+                  swapTimes.push(Math.min(latestSwap, Math.max(0, cueAt)));
+                }
+                var minGap = Infinity;
+                for (var gapIndex = 1; gapIndex < swapTimes.length; gapIndex += 1) {
+                  minGap = Math.min(minGap, swapTimes[gapIndex] - swapTimes[gapIndex - 1]);
+                }
+                if (Number.isFinite(minGap)) {
+                  rollDuration = Math.min(ROLL, Math.max(0.04, minGap * 0.72));
+                }
+              } else {
+                var lastSwapStart = Math.max(SWAP_START, IN - SETTLE_TAIL - ROLL);
+                var swapStep = swapCount === 1 ? 0 : (lastSwapStart - SWAP_START) / (swapCount - 1);
+                rollDuration =
+                  swapCount <= 2 ? ROLL : Math.min(ROLL, Math.max(0.04, swapStep * 0.72));
+                for (var index = 1; index <= swapCount; index += 1) {
+                  swapTimes.push(
+                    swapCount === 1 ? lastSwapStart : SWAP_START + (index - 1) * swapStep,
+                  );
+                }
+              }
+            }
+            var swapsEnd =
+              swapTimes.length > 0
+                ? swapTimes[swapTimes.length - 1] + rollDuration + SETTLE_TAIL
+                : IN;
+            var HOLD_START = Math.min(Math.max(0, duration - OUT), Math.max(IN, swapsEnd));
+            var HOLD = Math.max(0, duration - (HOLD_START + OUT));
+            var OUT_START = HOLD_START + HOLD;
+
+            gsap.set(stage, { opacity: 0 });
+            gsap.set(words, { yPercent: 112, opacity: 0 });
+            gsap.set(words[0], { yPercent: 0, opacity: 1 });
+
+            var tl = gsap.timeline({ paused: true });
+            tl.to(stage, { opacity: 1, duration: ARRIVAL, ease: "power2.out" }, 0);
+
+            // Masked exchange: the outgoing word whips fully past the slot
+            // mask (power4.in) before the incoming word crosses center. The
+            // two phases overlap only for ~10% of the roll, while both words
+            // are opposite-edge slivers, so every frame shows at most one
+            // legible word at full ink and never a double exposure.
+            swapTimes.forEach(function (swapAt, swapIndex) {
+              var wordIndex = swapIndex + 1;
+              var incomingEase = wordIndex === words.length - 1 ? "back.out(1.7)" : "power4.out";
+              var outDuration = rollDuration * 0.55;
+              var inDuration = rollDuration * 0.55;
+              var inStart = swapAt + rollDuration - inDuration;
+
+              tl.to(
+                words[wordIndex - 1],
+                { yPercent: -112, duration: outDuration, ease: "power4.in" },
+                swapAt,
+              );
+              tl.set(words[wordIndex - 1], { opacity: 0 }, swapAt + outDuration);
+              tl.set(words[wordIndex], { opacity: 1 }, inStart);
+              tl.to(
+                words[wordIndex],
+                { yPercent: 0, duration: inDuration, ease: incomingEase },
+                inStart,
+              );
+            });
+
+            var finalWord = words[words.length - 1];
+            var beat = parseFloat(getComputedStyle(root).getPropertyValue("--dur-beat")) || 0.5;
+            var pulseHalf = Math.min(beat, HOLD / 2);
+            if (pulseHalf > 0) {
+              var maxRepeat = Math.floor(HOLD / pulseHalf) - 1;
+              var pulseRepeat = maxRepeat % 2 === 1 ? maxRepeat : maxRepeat - 1;
+              if (pulseRepeat >= 1) {
+                tl.to(
+                  finalWord,
+                  {
+                    opacity: 0.9,
+                    duration: pulseHalf,
+                    ease: "sine.inOut",
+                    yoyo: true,
+                    repeat: pulseRepeat,
+                  },
+                  HOLD_START,
+                );
+              }
+            }
+
+            // OUT: optional departure; exit none holds until the frame cuts.
+            if (exit === "fade") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "up") {
+              tl.to(stage, { opacity: 0, y: "-3cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["kinetic-type-swap"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add kinetic-type-swap" />
+
+That writes one file: `compositions/components/kinetic-type-swap.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/kinetic-type-swap.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `text-effects` `kinetic-type` `word-swap` `reveal`.
+
+## 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/components/light-sweep-pass.mdx b/docs/catalog/components/light-sweep-pass.mdx
new file mode 100644
index 0000000000..e10f09f6db
--- /dev/null
+++ b/docs/catalog/components/light-sweep-pass.mdx
@@ -0,0 +1,519 @@
+---
+title: "Light Sweep Pass"
+description: "A traveling key light re-shades a slotted scene: a soft diagonal gradient band crosses the frame once while every per-element highlight and shadow shifts in lockstep (all driven by one --light-x property), then the light settles into a resting key. Quiet, expensive-feeling; the scene itself never moves. Callers fill the named scene slot; a token hero-and-cards default renders when it is left empty."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/light-sweep-pass.html"
+  compositionId="light-sweep-pass"
+  compositionSrc="compositions/components/light-sweep-pass.html"
+  variables={[{"id":"angle","type":"number","role":"style","label":"Angle","description":"Band and highlight gradient angle in degrees.","default":115,"min":60,"max":160,"step":1,"unit":"deg"},{"id":"sweep_at","type":"number","role":"timing","label":"Sweep start","description":"Seconds after mount start when the band starts crossing.","default":0.9,"min":0,"max":8,"step":0.05,"unit":"s"},{"id":"strength","type":"enum","role":"style","label":"Strength","description":"Band opacity and highlight bloom multiplier.","default":"standard","options":[{"value":"subtle","label":"Subtle"},{"value":"standard","label":"Standard"}]},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Tint inside the band and the highlight blooms.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Outgoing transition. None holds the settled key.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
+>
+
+```html light-sweep-pass.html
+<!doctype html>
+<!--
+  light-sweep-pass: HyperFrames video primitive (overlays / light)
+
+  Concept: a traveling key light re-shades a slotted scene. A soft diagonal
+  gradient band crosses the frame once while every per-element highlight and
+  shadow shifts in lockstep, then the light settles into a resting key from
+  the upper third. Quiet, expensive-feeling; the scene itself never moves.
+
+  Wave L, unit L3. Reference: motion-reference/ordinaryfolkco
+  2001090228958752945 (the traveling light band re-shading the frame).
+
+  ONE PROPERTY OWNS THE PASS: --light-x (a unitless 0-100-ish scalar on
+  #root) is the only animated value. The band's translate, every element's
+  highlight bloom, every shadow offset, and the ambient lift all read it
+  through calc()/clamp()/max() in static CSS. The timeline tweens a plain
+  JS number proxy and writes --light-x in onUpdate (never a var() string),
+  so seeks in any order resolve the same computed styles.
+
+  Slot (see README.md for a worked example):
+    - [data-slot="scene"]: the full-bleed scene being lit. Replace the
+      children of this element in your installed copy. Default: a token
+      hero card and three feature cards. Elements opt into the light with
+      the data-lit attribute plus an inline --lsp-x (their center along
+      the sweep axis, percent of frame width).
+
+  Variables (declared in data-composition-variables below):
+    - angle (number, degrees, default 115, 60 to 160): band and highlight
+      gradient angle. 115 reads as upper-left key light.
+    - sweep_at (number, seconds, default 0.9): when the band starts
+      crossing, relative to mount start.
+    - strength (subtle | standard, default standard): band opacity and
+      highlight bloom multiplier. subtle is the barely-there pass.
+    - accent (green | blue | violet, default green): warm tint inside the
+      band and the highlight blooms. green maps to --brand, blue to
+      --accent, violet to --accent-2.
+    - exit (none | fade | up, default none): outgoing transition. none
+      holds the settled key (frame roots own transitions).
+
+  Envelope (fixed IN/OUT, elastic HOLD only, never gsap.timeScale()):
+    IN       = sweep_at + 1.60s crossing + 0.55s settle to the resting key
+    HOLD     = elastic = max(0, D - (IN + OUT)); the settled key is still
+    OUT      = 0.50s when exit is fade or up, 0 when exit is none
+    If D < IN + OUT, IN and OUT scale down together so IN + OUT == D.
+
+  Sync point: sweep-land when the light reaches its resting key (3.05s at
+  defaults). Dispatches a bubbling hf:sfx CustomEvent with id
+  "light-settle-soft" there. This primitive never plays audio.
+
+  Mount contract: MOUNTABLE SUB-COMPOSITION. The runtime clones only
+  <template> contents; #root fills the host box (inset:0, container-type:
+  size), has no data-width/data-height, and registers one paused timeline
+  under the literal "light-sweep-pass" key. Variables come from
+  window.__hyperframes.getVariables().
+-->
+<html
+  lang="en"
+  data-composition-id="light-sweep-pass"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "angle", "type": "number", "role": "style", "label": "Angle", "description": "Band and highlight gradient angle in degrees.", "default": 115, "min": 60, "max": 160, "step": 1, "unit": "deg" },
+    { "id": "sweep_at", "type": "number", "role": "timing", "label": "Sweep start", "description": "Seconds after mount start when the band starts crossing.", "default": 0.9, "min": 0, "max": 8, "step": 0.05, "unit": "s" },
+    { "id": "strength", "type": "enum", "role": "style", "label": "Strength", "description": "Band opacity and highlight bloom multiplier.", "default": "standard", "options": [{ "value": "subtle", "label": "Subtle" }, { "value": "standard", "label": "Standard" }] },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Tint inside the band and the highlight blooms.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Outgoing transition. None holds the settled key.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Light Sweep Pass</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="light-sweep-pass" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          /* --light-x starts off-frame left; the timeline is its only
+             writer. --lsp-angle and --lsp-strength are set once at mount. */
+          #root {
+            --light-x: -35;
+            --lsp-angle: 115;
+            --lsp-strength: 1;
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            background: var(--bg, #0b0c0e);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+          }
+
+          .lsp-clip,
+          .lsp-stage,
+          .lsp-scene,
+          .lsp-ambient,
+          .lsp-band {
+            position: absolute;
+            inset: 0;
+          }
+
+          .lsp-clip {
+            overflow: hidden;
+          }
+
+          .lsp-stage {
+            opacity: 0;
+          }
+
+          .lsp-scene {
+            overflow: hidden;
+          }
+
+          /* Every lit element derives its whole treatment from the ONE
+             --light-x scalar: distance d to the band, |d| via max(d, -d),
+             a 0..1 proximity bloom, a shadow that slides away from the
+             light and deepens as the band passes. Elements opt in with
+             data-lit and an inline --lsp-x (center along the sweep axis,
+             percent of frame width). */
+          [data-lit] {
+            --lsp-d: calc(var(--light-x) - var(--lsp-x, 50));
+            --lsp-abs: max(var(--lsp-d), calc(-1 * var(--lsp-d)));
+            --lsp-glow: clamp(0, calc(1 - var(--lsp-abs) / 26), 1);
+            position: relative;
+            box-shadow: calc(clamp(-30, var(--lsp-d), 30) * -0.05cqw)
+              calc(0.8cqh + var(--lsp-glow) * 0.7cqh) calc(2.2cqh + var(--lsp-glow) * 2.4cqh)
+              color-mix(in srgb, #000000 26%, transparent);
+          }
+
+          /* The highlight bloom: a static angle-matched gradient whose
+             opacity is the proximity term. No transitions, no tweens. */
+          [data-lit]::after {
+            content: "";
+            position: absolute;
+            inset: 0;
+            border-radius: inherit;
+            pointer-events: none;
+            background: linear-gradient(
+              calc(var(--lsp-angle) * 1deg),
+              color-mix(in srgb, #ffffff 86%, var(--lsp-accent, #22c55e)) 0%,
+              transparent 62%
+            );
+            opacity: calc(var(--lsp-glow) * 0.32 * var(--lsp-strength));
+          }
+
+          /* Ambient lift: the scene starts a touch dim and brightens for
+             good once the band has entered the frame. Monotonic in
+             --light-x, so the settle never re-dims it. */
+          .lsp-ambient {
+            pointer-events: none;
+            background: #000000;
+            opacity: calc(clamp(0, (26 - var(--light-x)) / 130, 0.16) * var(--lsp-strength));
+          }
+
+          /* The band: an oversized angle-matched gradient sheet that only
+             ever translates along X, driven by the same scalar. Screen
+             blend keeps it a light, never a paint. */
+          .lsp-band {
+            inset: -55%;
+            pointer-events: none;
+            mix-blend-mode: screen;
+            background: linear-gradient(
+              calc(var(--lsp-angle) * 1deg),
+              transparent 36%,
+              color-mix(in srgb, #ffffff 24%, transparent) 46%,
+              color-mix(in srgb, #ffffff 78%, var(--lsp-accent, #22c55e)) 50%,
+              color-mix(in srgb, #ffffff 24%, transparent) 54%,
+              transparent 64%
+            );
+            opacity: 0;
+            transform: translateX(calc((var(--light-x) - 50) * 1.4cqw));
+            will-change: transform, opacity;
+          }
+
+          #root[data-strength="subtle"] {
+            --lsp-strength: 0.55;
+          }
+
+          /* ---------- default slot scene: token hero + three cards ---------- */
+
+          .lsp-default {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            grid-template-rows: auto auto;
+            align-content: center;
+            justify-items: center;
+            row-gap: var(--space-3, 5cqh);
+            padding: var(--space-3, 6cqh) 10cqw;
+            background: linear-gradient(
+              calc(var(--lsp-angle) * 1deg),
+              color-mix(in srgb, var(--fg, #f8fafc) 3%, var(--bg, #0b0c0e)) 0%,
+              var(--bg, #0b0c0e) 55%,
+              color-mix(in srgb, #000000 6%, var(--bg, #0b0c0e)) 100%
+            );
+          }
+
+          .lsp-hero {
+            display: grid;
+            align-content: center;
+            row-gap: var(--space-2, 2.4cqh);
+            width: 58cqw;
+            height: 30cqh;
+            padding: var(--space-3, 4cqh) var(--space-3, 3cqw);
+            border: 0.16cqw solid var(--border, #343a46);
+            border-radius: var(--radius, 2.4cqmin);
+            background: var(--surface, #14171c);
+          }
+
+          .lsp-hero-bar {
+            width: 46%;
+            height: 4.6cqh;
+            border-radius: 1.4cqh;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 82%, var(--surface, #14171c));
+          }
+
+          .lsp-hero-line {
+            height: 2.2cqh;
+            border-radius: 1.1cqh;
+            background: var(--muted, #94a3b8);
+            opacity: 0.55;
+          }
+
+          .lsp-hero-line:nth-of-type(3) {
+            width: 72%;
+          }
+
+          .lsp-row {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            column-gap: var(--space-2, 2cqw);
+            width: 58cqw;
+          }
+
+          .lsp-card {
+            display: grid;
+            align-content: start;
+            row-gap: var(--space-1, 1.6cqh);
+            height: 24cqh;
+            padding: var(--space-2, 2.6cqh) var(--space-2, 1.6cqw);
+            border: 0.16cqw solid var(--border, #343a46);
+            border-radius: var(--radius, 2.4cqmin);
+            background: var(--surface, #14171c);
+          }
+
+          .lsp-dot {
+            width: 3.4cqh;
+            height: 3.4cqh;
+            border-radius: 50%;
+            background: color-mix(in srgb, var(--lsp-accent, #22c55e) 72%, var(--surface, #14171c));
+          }
+
+          .lsp-line {
+            height: 1.9cqh;
+            border-radius: 1cqh;
+            background: var(--muted, #94a3b8);
+            opacity: 0.5;
+          }
+
+          .lsp-line:nth-of-type(3) {
+            width: 64%;
+          }
+        </style>
+
+        <div
+          id="light-sweep-pass-clip"
+          class="lsp-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="lsp-stage">
+            <div class="lsp-scene" data-slot="scene">
+              <!-- SLOT "scene": replace the children of this element with
+                   your own full-bleed content. Mark elements that should
+                   catch the light with data-lit and give each an inline
+                   style="--lsp-x: NN" (center along the sweep, percent). -->
+              <div class="lsp-default" aria-hidden="true">
+                <div class="lsp-hero" data-lit style="--lsp-x: 50">
+                  <div class="lsp-hero-bar"></div>
+                  <div class="lsp-hero-line"></div>
+                  <div class="lsp-hero-line"></div>
+                </div>
+                <div class="lsp-row">
+                  <div class="lsp-card" data-lit style="--lsp-x: 31">
+                    <div class="lsp-dot"></div>
+                    <div class="lsp-line"></div>
+                    <div class="lsp-line"></div>
+                  </div>
+                  <div class="lsp-card" data-lit style="--lsp-x: 50">
+                    <div class="lsp-dot"></div>
+                    <div class="lsp-line"></div>
+                    <div class="lsp-line"></div>
+                  </div>
+                  <div class="lsp-card" data-lit style="--lsp-x: 69">
+                    <div class="lsp-dot"></div>
+                    <div class="lsp-line"></div>
+                    <div class="lsp-line"></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="lsp-ambient" aria-hidden="true"></div>
+            <div class="lsp-band" aria-hidden="true"></div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            // Literal id: mount flattening strips data-composition-id from the
+            // live root before this timeline registers.
+            var compositionId = "light-sweep-pass";
+            var stage = root.querySelector(".lsp-stage");
+            var band = root.querySelector(".lsp-band");
+
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            function clampNumber(raw, fallback, min, max) {
+              var value = raw == null ? fallback : Number(raw);
+              if (!Number.isFinite(value)) return fallback;
+              return Math.max(min, Math.min(max, value));
+            }
+
+            var angle = clampNumber(vars.angle, 115, 60, 160);
+            var sweepAt = clampNumber(vars.sweep_at, 0.9, 0, 8);
+            var strength = vars.strength === "subtle" ? "subtle" : "standard";
+            var accentTokens = {
+              green: "var(--brand, #22c55e)",
+              blue: "var(--accent, #38bdf8)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentTokens, vars.accent)
+              ? vars.accent
+              : "green";
+            // The bundler mirrors composition variables as scoped CSS custom
+            // props, so this unit's own accent variable can shadow the contract
+            // --accent token ("blue" is a valid CSS color). When the shadow is
+            // present, fall back to the literal contract value.
+            var shadowedAccent = getComputedStyle(root).getPropertyValue("--accent").trim();
+            if (
+              shadowedAccent === "green" ||
+              shadowedAccent === "blue" ||
+              shadowedAccent === "violet"
+            ) {
+              accentTokens.blue = "#38bdf8";
+            }
+            // INVARIANT: only none | fade | up reaches the timeline.
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            root.dataset.strength = strength;
+            root.style.setProperty("--lsp-angle", String(angle));
+            root.style.setProperty("--lsp-accent", accentTokens[accent]);
+
+            // RETIME RANGE: fixed IN and OUT scale together only when D is
+            // too short. HOLD is the sole elastic phase. Never timeScale().
+            var SWEEP_BASE = 1.6;
+            var SETTLE_BASE = 0.55;
+            var STAGE_IN_BASE = 0.5;
+            var IN_BASE = sweepAt + SWEEP_BASE + SETTLE_BASE;
+            var OUT_BASE = exit === "none" ? 0 : 0.5;
+
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var totalBase = IN_BASE + OUT_BASE;
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var SWEEP = SWEEP_BASE * scale;
+            var SETTLE = SETTLE_BASE * scale;
+            var STAGE_IN = Math.min(STAGE_IN_BASE * scale, IN_BASE * scale);
+            var SWEEP_AT = sweepAt * scale;
+            var SWEEP_END = SWEEP_AT + SWEEP;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var OUT_START = IN + HOLD;
+
+            // The light's authored waypoints: parked off-frame left, fully
+            // crossed off-frame right, then the resting key in the upper
+            // third of the travel. All in --light-x units (frame percent).
+            var LIGHT_START = -35;
+            var LIGHT_CROSSED = 118;
+            var LIGHT_REST = 62;
+
+            function fireSfx(id, t) {
+              root.dispatchEvent(
+                new CustomEvent("hf:sfx", { detail: { id: id, t: t }, bubbles: true }),
+              );
+            }
+
+            // ONE proxy owns --light-x; every highlight, shadow, ambient
+            // lift, and the band transform read it via calc in static CSS.
+            var light = { x: LIGHT_START };
+            function writeLight() {
+              root.style.setProperty("--light-x", light.x.toFixed(3));
+            }
+            writeLight();
+
+            gsap.set(stage, { opacity: 0, y: "1.5cqh" });
+            gsap.set(band, { autoAlpha: 0 });
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: the scene settles first, then one confident crossing.
+            tl.to(stage, { opacity: 1, y: "0cqh", duration: STAGE_IN, ease: "power2.out" }, 0);
+            tl.fromTo(
+              light,
+              { x: LIGHT_START },
+              {
+                x: LIGHT_CROSSED,
+                duration: SWEEP,
+                ease: "sine.inOut",
+                onUpdate: writeLight,
+              },
+              SWEEP_AT,
+            );
+            tl.fromTo(
+              band,
+              { autoAlpha: 0 },
+              {
+                autoAlpha: 1,
+                duration: Math.min(0.3 * scale, SWEEP),
+                ease: "power1.out",
+                immediateRender: false,
+              },
+              SWEEP_AT,
+            );
+            tl.to(
+              band,
+              { autoAlpha: 0, duration: 0.35 * scale, ease: "power1.in" },
+              Math.max(SWEEP_AT, SWEEP_END - 0.35 * scale),
+            );
+
+            // The settle: the band is gone; the key light glides back to its
+            // resting position and the per-element shading follows it there.
+            tl.to(
+              light,
+              { x: LIGHT_REST, duration: SETTLE, ease: "power2.out", onUpdate: writeLight },
+              SWEEP_END,
+            );
+            tl.call(
+              function () {
+                fireSfx("light-settle-soft", IN);
+              },
+              [],
+              IN,
+            );
+
+            // HOLD: deliberately still under the settled key.
+
+            // OUT: only when the exit variable asks for one.
+            if (exit !== "none") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+              if (exit === "up") {
+                tl.to(stage, { y: "-6cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              }
+            }
+
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add light-sweep-pass" />
+
+That writes one file: `compositions/components/light-sweep-pass.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/light-sweep-pass.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `overlay` `light` `sweep` `slots` `deterministic`.
+
+## 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/components/line-by-line-slide.mdx b/docs/catalog/components/line-by-line-slide.mdx
new file mode 100644
index 0000000000..e4a0888f09
--- /dev/null
+++ b/docs/catalog/components/line-by-line-slide.mdx
@@ -0,0 +1,144 @@
+---
+title: "Line-by-Line Slide"
+description: "Each line enters from the left with staggered slide and exits to the right."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/line-by-line-slide.html"
+  compositionId="line-by-line-slide"
+  compositionSrc="compositions/components/line-by-line-slide.html"
+  variables={[{"id":"size","type":"enum","role":"layout","label":"Size","description":"Type size of the whole stack.","default":"standard","options":[{"value":"compact","label":"Compact"},{"value":"standard","label":"Standard"},{"value":"display","label":"Display"}]},{"id":"tone","type":"enum","role":"style","label":"Tone","description":"Line colour: ink for light frames, paper for dark ones, accent rides the brand token.","default":"ink","options":[{"value":"ink","label":"Ink"},{"value":"paper","label":"Paper"},{"value":"accent","label":"Accent"}]},{"id":"density","type":"enum","role":"layout","label":"Density","description":"The gap between lines, from a tight block to an airy stack.","default":"standard","options":[{"value":"fine","label":"Fine"},{"value":"standard","label":"Standard"},{"value":"coarse","label":"Coarse"}]},{"id":"direction","type":"enum","role":"motion","label":"Direction","description":"Which side the lines slide in from as the timeline drives the offset.","default":"left","options":[{"value":"left","label":"Left"},{"value":"right","label":"Right"}]}]}
+>
+
+```html line-by-line-slide.html
+<!--
+  Line-by-Line Slide - remocn typography primitive for HyperFrames.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes a custom property the CSS above
+  consumes. The timeline recipe below is untouched by them: it keeps driving
+  one sideways offset, and direction decides which way that offset points.
+
+    - size (compact | standard | display, default standard): type size of the
+      stack, 40px, 52px, or 68px.
+    - tone (ink | paper | accent, default ink): line colour. ink is near-black
+      for light frames, paper near-white for dark ones, accent rides the
+      brand token.
+    - density (fine | standard | coarse, default standard): the gap between
+      lines, 4px, 10px, or 20px.
+    - direction (left | right, default left): which side the lines slide in
+      from. left keeps the original entry, right mirrors it.
+
+  On every default the result is identical to the original: near-black 52px
+  lines, 10px apart, entering from the left.
+-->
+
+<div
+  class="hf-remocn-line-by-line-slide"
+  data-composition-variables='[
+    {"id": "size", "type": "enum", "role": "layout", "label": "Size", "description": "Type size of the whole stack.", "default": "standard", "options": [{"value": "compact", "label": "Compact"}, {"value": "standard", "label": "Standard"}, {"value": "display", "label": "Display"}]},
+    {"id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Line colour: ink for light frames, paper for dark ones, accent rides the brand token.", "default": "ink", "options": [{"value": "ink", "label": "Ink"}, {"value": "paper", "label": "Paper"}, {"value": "accent", "label": "Accent"}]},
+    {"id": "density", "type": "enum", "role": "layout", "label": "Density", "description": "The gap between lines, from a tight block to an airy stack.", "default": "standard", "options": [{"value": "fine", "label": "Fine"}, {"value": "standard", "label": "Standard"}, {"value": "coarse", "label": "Coarse"}]},
+    {"id": "direction", "type": "enum", "role": "motion", "label": "Direction", "description": "Which side the lines slide in from as the timeline drives the offset.", "default": "left", "options": [{"value": "left", "label": "Left"}, {"value": "right", "label": "Right"}]}
+  ]'
+>
+  <span>Design faster</span><span>Render cleaner</span><span>Ship louder</span>
+</div>
+
+<style>
+  .hf-remocn-line-by-line-slide {
+    color: var(--hf-line-color, #18181b);
+    font-family: Inter, system-ui, sans-serif;
+    font-weight: 900;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-line-by-line-slide {
+    display: grid;
+    gap: var(--hf-line-gap, 10px);
+    font-size: var(--hf-line-size, 52px);
+    line-height: 1;
+    overflow: hidden;
+  }
+  .hf-remocn-line-by-line-slide span {
+    display: block;
+    transform: translate(
+      calc(var(--hf-line-x, 0px) * var(--hf-line-axis-x, 1)),
+      var(--hf-line-y, 0px)
+    );
+    filter: blur(var(--hf-line-blur, 0px));
+    will-change: transform, filter, opacity;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var sizes = { compact: "40px", standard: "52px", display: "68px" };
+    var tones = {
+      ink: "#18181b",
+      paper: "#fafafa",
+      accent: "var(--brand, #34d399)",
+    };
+    var gaps = { fine: "4px", standard: "10px", coarse: "20px" };
+    var axes = { left: 1, right: -1 };
+
+    var size = sizes[pick(sizes, vars.size, "standard")];
+    var tone = tones[pick(tones, vars.tone, "ink")];
+    var gap = gaps[pick(gaps, vars.density, "standard")];
+    var axis = axes[pick(axes, vars.direction, "left")];
+
+    var roots = document.querySelectorAll(".hf-remocn-line-by-line-slide");
+    for (var i = 0; i < roots.length; i += 1) {
+      var root = roots[i];
+      root.style.setProperty("--hf-line-size", size);
+      root.style.setProperty("--hf-line-color", tone);
+      root.style.setProperty("--hf-line-gap", gap);
+      root.style.setProperty("--hf-line-axis-x", String(axis));
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-line-by-line-slide span', { opacity: 0, '--hf-line-x': '-36px', '--hf-line-y': '18px', '--hf-line-blur': '6px' }, { opacity: 1, '--hf-line-x': '0px', '--hf-line-y': '0px', '--hf-line-blur': '0px', duration: 0.34, stagger: 0.08, ease: 'power3.out' }, startTime);
+-->
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add line-by-line-slide" />
+
+That writes one file: `compositions/components/line-by-line-slide.html`.
+
+## Usage
+
+Open `compositions/components/line-by-line-slide.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `remocn-port` `typography`.
+
+## 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/components/line-swap.mdx b/docs/catalog/components/line-swap.mdx
new file mode 100644
index 0000000000..0cd6974293
--- /dev/null
+++ b/docs/catalog/components/line-swap.mdx
@@ -0,0 +1,351 @@
+---
+title: "Line Swap"
+description: "A masked full-line beat replacement: line A holds center then exits up through an overflow-hidden mask as line B enters bottom-up on the same beat, with an optional accent underline drawing beneath one word of line B."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/line-swap.html"
+  compositionId="line-swap"
+  compositionSrc="compositions/components/line-swap.html"
+  variables={[{"id":"line_a","type":"string","role":"content","label":"Line A","description":"First line; holds center inside the mask, then exits up on the swap beat.","default":"Everyone promised you AI."},{"id":"line_b","type":"string","role":"content","label":"Line B","description":"Replacement line; enters bottom-up on the swap beat and holds.","default":"Almost nobody promised you control."},{"id":"swap_at","type":"number","role":"timing","label":"Swap at","description":"Second (from mount start) of the beat replacement. Clamped so the swap and underline complete before any exit.","default":1.5,"min":0,"step":0.1,"unit":"s"},{"id":"underline_word","type":"string","role":"content","label":"Underline word","description":"First case-insensitive substring match in line B gets the accent underline after landing. Empty disables it.","default":"control"},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Underline color from the contract token map.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Optional departure. Default none: the landed line holds until the frame cuts.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
+>
+
+```html line-swap.html
+<!doctype html>
+<!--
+  line-swap: HyperFrames video primitive (text effects / beat replacement)
+
+  A masked full-line beat replacement, generalizing flagship frame 01: line_a
+  rises into an overflow-hidden mask and holds center, then on the swap beat
+  it exits up through the mask as line_b enters bottom-up on the same beat.
+  One restrained slam, smooth ease, no overshoot. Optionally an accent
+  underline draws left to right beneath underline_word of line_b after it
+  lands (scaleX from a left origin, the flagship bar draw).
+
+  Variables:
+    line_a (string): the first line, replaced on the beat.
+    line_b (string): the line that lands and holds.
+    swap_at (seconds): the beat, relative to mount start. Clamped so line_a
+      finishes entering first and line_b plus the underline complete before
+      any exit begins.
+    underline_word (string): first case-insensitive substring match inside
+      line_b gets the underline. Empty or unmatched disables it.
+    accent (green | blue | violet): underline color via the contract token map.
+    exit (none | fade | up, default none): frame roots own transitions;
+      holds end films.
+
+  Envelope, fixed IN and OUT with elastic HOLD only (never time-scaled):
+    IN_A_BASE  = 0.50s  line_a enters bottom-up through the mask
+    SWAP span  = 0.72s  line_a up-and-out (0.35s) overlapping line_b in
+                        (starts 0.22s after the beat, lands 0.50s later)
+    UL span    = 0.60s  0.15s beat after the land, then a 0.45s draw
+                        (0 when underline_word is empty or unmatched)
+    HOLD       = max(0, D - phases), completely still
+    OUT_BASE   = 0s for exit none, otherwise 0.45s
+    If D is shorter than the fixed phases, they compress together.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, has no data-width or
+  data-height, and registers one paused timeline under the literal
+  line-swap key.
+-->
+<html
+  lang="en"
+  data-composition-id="line-swap"
+  data-composition-duration="3.5"
+  data-composition-variables='[
+    { "id": "line_a", "type": "string", "role": "content", "label": "Line A", "description": "First line; holds center inside the mask, then exits up on the swap beat.", "default": "Everyone promised you AI." },
+    { "id": "line_b", "type": "string", "role": "content", "label": "Line B", "description": "Replacement line; enters bottom-up on the swap beat and holds.", "default": "Almost nobody promised you control." },
+    { "id": "swap_at", "type": "number", "role": "timing", "label": "Swap at", "description": "Second (from mount start) of the beat replacement. Clamped so the swap and underline complete before any exit.", "default": 1.5, "min": 0, "step": 0.1, "unit": "s" },
+    { "id": "underline_word", "type": "string", "role": "content", "label": "Underline word", "description": "First case-insensitive substring match in line B gets the accent underline after landing. Empty disables it.", "default": "control" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Underline color from the contract token map.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the landed line holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Line Swap</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="line-swap" data-duration="3.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            background: var(--bg, #0b0c0e);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .ls-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+          }
+
+          .ls-stage {
+            width: 94cqw;
+            will-change: transform, opacity;
+          }
+
+          /* Beat mask: both lines live inside; the swap slides through it. */
+          .ls-mask {
+            position: relative;
+            width: 100%;
+            height: calc(var(--ls-font-size, min(7cqw, 16cqh)) * 1.42);
+            overflow: hidden;
+          }
+
+          .ls-line {
+            position: absolute;
+            inset: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: var(--ls-font-size, min(7cqw, 16cqh));
+            font-weight: 600;
+            line-height: 1;
+            letter-spacing: -0.02em;
+            white-space: nowrap;
+            will-change: transform;
+          }
+
+          /* One inline wrapper per line: a bare text node next to the
+             underline span would become separate flex items and the boundary
+             space would collapse ("youcontrol."). */
+          .ls-line-inner {
+            display: inline;
+          }
+
+          .ls-ul-wrap {
+            position: relative;
+            display: inline-block;
+            white-space: nowrap;
+          }
+
+          .ls-underline {
+            position: absolute;
+            left: 0.02em;
+            right: 0.02em;
+            bottom: -0.14em;
+            height: 0.055em;
+            border-radius: 0.03em;
+            transform-origin: left center;
+          }
+        </style>
+
+        <div
+          id="line-swap-clip"
+          class="ls-clip clip"
+          data-start="0"
+          data-duration="3.5"
+          data-track-index="0"
+        >
+          <div class="ls-stage" role="img">
+            <div class="ls-mask">
+              <div class="ls-line ls-line-a"><span class="ls-line-inner"></span></div>
+              <div class="ls-line ls-line-b"><span class="ls-line-inner"></span></div>
+            </div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            // Literal key: the flattening step strips data-composition-id off
+            // the mounted root, so reading it back would register "null".
+            var compositionId = "line-swap";
+            var stage = root.querySelector(".ls-stage");
+            var lineAEl = root.querySelector(".ls-line-a");
+            var lineBEl = root.querySelector(".ls-line-b");
+            var lineAInner = lineAEl.querySelector(".ls-line-inner");
+            var lineBInner = lineBEl.querySelector(".ls-line-inner");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            function asLine(value, fallback) {
+              return value == null ? fallback : String(value).trim().replace(/\s+/g, " ");
+            }
+            var lineA = asLine(vars.line_a, "Everyone promised you AI.");
+            var lineB = asLine(vars.line_b, "Almost nobody promised you control.");
+            var underlineWord = asLine(vars.underline_word, "control");
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            lineAInner.textContent = lineA;
+
+            // Split line_b around the first case-insensitive underline match.
+            // textContent nodes only, never innerHTML.
+            var matchIndex =
+              underlineWord.length > 0
+                ? lineB.toLowerCase().indexOf(underlineWord.toLowerCase())
+                : -1;
+            var underlineEl = null;
+            if (matchIndex >= 0) {
+              var before = lineB.slice(0, matchIndex);
+              var matched = lineB.slice(matchIndex, matchIndex + underlineWord.length);
+              var after = lineB.slice(matchIndex + underlineWord.length);
+              if (before) lineBInner.appendChild(document.createTextNode(before));
+
+              var wrap = document.createElement("span");
+              wrap.className = "ls-ul-wrap";
+              wrap.appendChild(document.createTextNode(matched));
+              underlineEl = document.createElement("span");
+              underlineEl.className = "ls-underline";
+              underlineEl.setAttribute("aria-hidden", "true");
+              // style.background, not a class: var() resolves at point of use.
+              underlineEl.style.background = accentColors[accent];
+              wrap.appendChild(underlineEl);
+              lineBInner.appendChild(wrap);
+              if (after) lineBInner.appendChild(document.createTextNode(after));
+            } else {
+              lineBInner.textContent = lineB;
+            }
+            stage.setAttribute("aria-label", lineA + " " + lineB);
+
+            // Deterministic character-count fit against the longer line; both
+            // lines are nowrap, so the fit keeps them inside the stage.
+            var characters = Math.max(1, Array.from(lineA).length, Array.from(lineB).length);
+            var fitted = Math.max(3.4, Math.min(9, 168 / characters));
+            root.style.setProperty("--ls-font-size", "min(" + fitted.toFixed(3) + "cqw, 16cqh)");
+
+            // RETIME RANGE: fixed phases; HOLD is the only elastic span.
+            var IN_A_BASE = 0.5;
+            var EXIT_A_BASE = 0.35;
+            var LAG_BASE = 0.22; // line_b starts this long after the beat
+            var IN_B_BASE = 0.5;
+            var UL_BEAT_BASE = 0.15;
+            var UL_BASE = underlineEl ? 0.45 : 0;
+            var OUT_BASE = exit === "none" ? 0 : 0.45;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "3.5"));
+            var swapSpanBase = LAG_BASE + IN_B_BASE;
+            var ulSpanBase = underlineEl ? UL_BEAT_BASE + UL_BASE : 0;
+            var totalBase = IN_A_BASE + swapSpanBase + ulSpanBase + OUT_BASE;
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN_A = IN_A_BASE * scale;
+            var EXIT_A = EXIT_A_BASE * scale;
+            var LAG = LAG_BASE * scale;
+            var IN_B = IN_B_BASE * scale;
+            var UL_BEAT = UL_BEAT_BASE * scale;
+            var UL = UL_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var OUT_START = duration - OUT;
+
+            var swapAtRaw = Number(vars.swap_at);
+            var swapAt = Number.isFinite(swapAtRaw) ? Math.max(0, swapAtRaw) : 1.5;
+            // line_a fully arrives before the beat; the swap and the
+            // underline always complete before the exit begins.
+            swapAt = Math.min(swapAt, Math.max(IN_A, OUT_START - (LAG + IN_B + UL_BEAT + UL)));
+            swapAt = Math.max(swapAt, IN_A);
+            var landB = swapAt + LAG + IN_B;
+
+            gsap.set(lineBEl, { yPercent: 115 });
+            if (underlineEl) gsap.set(underlineEl, { scaleX: 0 });
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: line_a enters bottom-up through the mask. One move.
+            tl.fromTo(
+              lineAEl,
+              { yPercent: 115 },
+              { yPercent: 0, duration: IN_A, ease: "power4.out" },
+              0,
+            );
+
+            // SWAP: the beat replacement. line_a exits up through the mask as
+            // line_b slides in bottom-up. Single restrained slam, smooth ease.
+            tl.fromTo(
+              lineAEl,
+              { yPercent: 0 },
+              { yPercent: -115, duration: EXIT_A, ease: "power2.in", immediateRender: false },
+              swapAt,
+            );
+            tl.fromTo(
+              lineBEl,
+              { yPercent: 115 },
+              { yPercent: 0, duration: IN_B, ease: "power4.out" },
+              swapAt + LAG,
+            );
+
+            // UNDERLINE: accent bar draws left to right after line_b lands.
+            if (underlineEl) {
+              tl.fromTo(
+                underlineEl,
+                { scaleX: 0 },
+                { scaleX: 1, duration: UL, ease: "power2.out" },
+                landB + UL_BEAT,
+              );
+            }
+
+            // HOLD: completely still.
+
+            // OUT: optional departure; exit none holds until the frame cuts.
+            if (exit === "fade") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "up") {
+              tl.to(stage, { opacity: 0, y: "-7cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add line-swap" />
+
+That writes one file: `compositions/components/line-swap.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/line-swap.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `text-effects` `swap` `beat` `deterministic`.
+
+## 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/components/locked-nucleus-orbit.mdx b/docs/catalog/components/locked-nucleus-orbit.mdx
new file mode 100644
index 0000000000..526cd8d81e
--- /dev/null
+++ b/docs/catalog/components/locked-nucleus-orbit.mdx
@@ -0,0 +1,395 @@
+---
+title: "Locked Nucleus Orbit"
+description: "A fixed center nucleus anchors deterministic satellite orbits that settle into a composed lockup."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/locked-nucleus-orbit.html"
+  compositionId="locked-nucleus-orbit"
+  compositionSrc="compositions/components/locked-nucleus-orbit.html"
+  variables={[{"id":"label","type":"string","role":"content","label":"Nucleus label","description":"Text displayed inside the fixed center nucleus.","default":"core"},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Color used by the nucleus, rings, and satellite markers.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"satellites","type":"number","role":"layout","label":"Satellites","description":"Number of orbiting copy chips.","default":4,"min":3,"max":6,"step":1}]}
+>
+
+```html locked-nucleus-orbit.html
+<!doctype html>
+<!--
+  locked-nucleus-orbit: HyperFrames video primitive (intros / reveals / orbit)
+
+  One nucleus stays dead center for the full composition. Satellite rings and
+  copy chips fade in while orbiting on deterministic index-based phases, then
+  decelerate into a composed lockup. The nucleus is never a GSAP target.
+
+  Variables:
+    - label (string, default "core"): text inside the fixed nucleus.
+    - accent (green | blue | violet, default green): active color.
+    - satellites (number, 3 to 6, default 4): visible satellite count.
+
+  Envelope (fixed IN and ORBIT, elastic HOLD, no OUT):
+    IN_BASE    = 0.45s, rings and chips fade in along their orbital arcs
+    ORBIT_BASE = 1.75s, satellites decelerate into their final phases
+    HOLD       = max(0, D - (IN + ORBIT)), only ring opacity breathes
+    OUT        = 0s, the composed lockup is the final state
+    If D is shorter than IN_BASE + ORBIT_BASE, IN and ORBIT compress together.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, has no data-width or data-height, and registers one paused timeline
+  under the hardcoded locked-nucleus-orbit id.
+-->
+<html
+  lang="en"
+  data-composition-id="locked-nucleus-orbit"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "label", "type": "string", "role": "content", "label": "Nucleus label", "description": "Text displayed inside the fixed center nucleus.", "default": "core" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Color used by the nucleus, rings, and satellite markers.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "satellites", "type": "number", "role": "layout", "label": "Satellites", "description": "Number of orbiting copy chips.", "default": 4, "min": 3, "max": 6, "step": 1 }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Locked Nucleus Orbit</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="locked-nucleus-orbit" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            background: var(--bg, #0b0c0e);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .lno-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+          }
+
+          .lno-field {
+            position: absolute;
+            inset: 0;
+          }
+
+          .lno-ring {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            width: var(--lno-size);
+            aspect-ratio: 1;
+            border: 0.12cqmin solid color-mix(in srgb, var(--lno-accent) 34%, transparent);
+            border-radius: 50%;
+            transform: translate(-50%, -50%);
+            transform-origin: 50% 50%;
+            box-shadow: inset 0 0 3cqmin color-mix(in srgb, var(--lno-accent) 5%, transparent);
+            opacity: 0;
+          }
+
+          .lno-ring:nth-child(1) {
+            --lno-size: 46cqmin;
+          }
+
+          .lno-ring:nth-child(2) {
+            --lno-size: 58cqmin;
+          }
+
+          .lno-ring:nth-child(3) {
+            --lno-size: 70cqmin;
+          }
+
+          .lno-nucleus {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            width: 15cqmin;
+            aspect-ratio: 1;
+            display: grid;
+            place-items: center;
+            transform: translate(-50%, -50%);
+            border: 0.2cqmin solid color-mix(in srgb, var(--lno-accent) 68%, white 16%);
+            border-radius: 50%;
+            background: color-mix(in srgb, var(--surface, #172033) 86%, var(--lno-accent) 14%);
+            box-shadow:
+              0 0 2.8cqmin color-mix(in srgb, var(--lno-accent) 38%, transparent),
+              inset 0 0 2.2cqmin color-mix(in srgb, var(--lno-accent) 18%, transparent);
+            z-index: 3;
+          }
+
+          .lno-nucleus::before {
+            content: "";
+            position: absolute;
+            width: 2.4cqmin;
+            aspect-ratio: 1;
+            top: 2.5cqmin;
+            border-radius: 50%;
+            background: var(--lno-accent);
+            box-shadow: 0 0 1.8cqmin color-mix(in srgb, var(--lno-accent) 72%, transparent);
+          }
+
+          .lno-nucleus-label {
+            max-width: 11cqmin;
+            margin-top: 3.1cqmin;
+            overflow: hidden;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
+            font-size: clamp(9px, 2cqmin, 20px);
+            font-weight: 700;
+            letter-spacing: 0.08em;
+            line-height: 1;
+            text-overflow: ellipsis;
+            text-transform: uppercase;
+            white-space: nowrap;
+          }
+
+          .lno-arm {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            width: 0;
+            height: 0;
+            transform-origin: 0 0;
+          }
+
+          .lno-anchor {
+            position: absolute;
+            left: var(--lno-radius);
+            top: 0;
+            transform: translate(-50%, -50%);
+          }
+
+          .lno-chip {
+            min-width: 12cqmin;
+            max-width: 22cqmin;
+            min-height: 5.2cqmin;
+            display: flex;
+            align-items: center;
+            gap: 1.25cqmin;
+            padding: 1.1cqmin 1.8cqmin;
+            border: 0.12cqmin solid
+              color-mix(in srgb, var(--lno-accent) 48%, var(--border, #334155));
+            border-radius: 999px;
+            background: color-mix(in srgb, var(--surface, #172033) 90%, transparent);
+            box-shadow: 0 1.2cqmin 3.6cqmin color-mix(in srgb, var(--bg, #0b0c0e) 60%, transparent);
+            opacity: 0;
+            will-change: transform, opacity;
+          }
+
+          .lno-marker {
+            flex: 0 0 auto;
+            width: 2.4cqmin;
+            aspect-ratio: 1;
+            border: 0.32cqmin solid var(--lno-accent);
+            border-radius: 50%;
+            box-shadow: 0 0 1.4cqmin color-mix(in srgb, var(--lno-accent) 56%, transparent);
+          }
+
+          .lno-copy {
+            overflow: hidden;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
+            font-size: clamp(8px, 1.8cqmin, 18px);
+            font-weight: 650;
+            letter-spacing: 0.08em;
+            line-height: 1;
+            text-overflow: ellipsis;
+            text-transform: uppercase;
+            white-space: nowrap;
+          }
+        </style>
+
+        <div
+          id="locked-nucleus-orbit-clip"
+          class="lno-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="lno-field">
+            <div class="lno-ring" aria-hidden="true"></div>
+            <div class="lno-ring" aria-hidden="true"></div>
+            <div class="lno-ring" aria-hidden="true"></div>
+            <div class="lno-satellites"></div>
+            <div class="lno-nucleus">
+              <span class="lno-nucleus-label"></span>
+            </div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var label = root.querySelector(".lno-nucleus-label");
+            var satelliteLayer = root.querySelector(".lno-satellites");
+            var rings = root.querySelectorAll(".lno-ring");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var accentColors = {
+              green: "var(--brand, #34d399)",
+              blue: "var(--accent, #38bdf8)",
+              violet: "var(--accent-2, #a78bfa)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var countValue = Number(vars.satellites);
+            var satelliteCount =
+              vars.satellites != null && Number.isFinite(countValue)
+                ? Math.max(3, Math.min(6, Math.round(countValue)))
+                : 4;
+            var labelText = vars.label == null ? "core" : String(vars.label);
+            var copy = ["signal", "motion", "frames", "output", "sync", "lock"];
+            var radii = [23, 29, 35];
+
+            root.style.setProperty("--lno-accent", accentColors[accent]);
+            label.textContent = labelText;
+
+            var satellites = [];
+            for (var index = 0; index < satelliteCount; index += 1) {
+              var arm = document.createElement("div");
+              var anchor = document.createElement("div");
+              var chip = document.createElement("div");
+              var marker = document.createElement("span");
+              var chipCopy = document.createElement("span");
+
+              arm.className = "lno-arm";
+              anchor.className = "lno-anchor";
+              chip.className = "lno-chip";
+              marker.className = "lno-marker";
+              chipCopy.className = "lno-copy";
+              arm.style.setProperty("--lno-radius", radii[index % radii.length] + "cqmin");
+              chipCopy.textContent = copy[index];
+
+              chip.appendChild(marker);
+              chip.appendChild(chipCopy);
+              anchor.appendChild(chip);
+              arm.appendChild(anchor);
+              satelliteLayer.appendChild(arm);
+
+              var finalPhase = -90 + (360 * index) / satelliteCount;
+              var travel = 210 + (index % 3) * 70;
+              satellites.push({
+                arm: arm,
+                chip: chip,
+                startPhase: finalPhase - travel,
+                finalPhase: finalPhase,
+              });
+            }
+
+            var IN_BASE = 0.45;
+            var ORBIT_BASE = 1.75;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var motionBase = IN_BASE + ORBIT_BASE;
+            var motionScale = duration < motionBase ? duration / motionBase : 1;
+            var IN = IN_BASE * motionScale;
+            var ORBIT = ORBIT_BASE * motionScale;
+            var MOTION = IN + ORBIT;
+            var HOLD = Math.max(0, duration - MOTION);
+            var fadeStagger = Math.min(0.07, IN / (satelliteCount * 2));
+            var fadeDuration = Math.max(0.001, IN - fadeStagger * (satelliteCount - 1));
+
+            gsap.set(rings, { opacity: 0, scale: 0.86 });
+            satellites.forEach(function (satellite) {
+              gsap.set(satellite.arm, { rotation: satellite.startPhase });
+              gsap.set(satellite.chip, {
+                opacity: 0,
+                rotation: -satellite.startPhase,
+                scale: 0.82,
+              });
+            });
+
+            var tl = gsap.timeline({ paused: true });
+
+            tl.to(rings, { opacity: 0.38, scale: 1, duration: IN, ease: "power2.out" }, 0);
+
+            satellites.forEach(function (satellite, index) {
+              tl.to(
+                satellite.arm,
+                { rotation: satellite.finalPhase, duration: MOTION, ease: "power2.out" },
+                0,
+              );
+              tl.to(
+                satellite.chip,
+                { rotation: -satellite.finalPhase, duration: MOTION, ease: "power2.out" },
+                0,
+              );
+              tl.to(
+                satellite.chip,
+                {
+                  opacity: 1,
+                  scale: 1,
+                  duration: fadeDuration,
+                  ease: "back.out(1.7)",
+                },
+                index * fadeStagger,
+              );
+            });
+
+            if (HOLD > 0.2) {
+              tl.to(
+                rings,
+                {
+                  opacity: 0.5,
+                  duration: HOLD / 2,
+                  ease: "sine.inOut",
+                  yoyo: true,
+                  repeat: 1,
+                },
+                MOTION,
+              );
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["locked-nucleus-orbit"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add locked-nucleus-orbit" />
+
+That writes one file: `compositions/components/locked-nucleus-orbit.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/locked-nucleus-orbit.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `intro` `reveal` `orbit` `lockup` `deterministic`.
+
+## 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/components/logo-brand-close.mdx b/docs/catalog/components/logo-brand-close.mdx
new file mode 100644
index 0000000000..ebe8c3fd8f
--- /dev/null
+++ b/docs/catalog/components/logo-brand-close.mdx
@@ -0,0 +1,409 @@
+---
+title: "Logo Brand Close"
+description: "A display-scale wordmark cascades letter by letter into a centered lockup, the accent brand period lands last, an optional tagline and wide-tracked mono URL settle beneath, and the finished identity holds dead still to the end of the film."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/logo-brand-close.html"
+  compositionId="logo-brand-close"
+  compositionSrc="compositions/components/logo-brand-close.html"
+  variables={[{"id":"wordmark","type":"string","role":"content","label":"Wordmark","description":"Brand name whose letters cascade into the centered lockup.","default":"HYPERFRAMES"},{"id":"tagline","type":"string","role":"content","label":"Tagline","description":"Optional tagline that settles beneath the wordmark. Empty hides it.","default":"Write HTML. Render video."},{"id":"url","type":"string","role":"content","label":"URL","description":"Optional mono URL line beneath the tagline. Empty hides it.","default":"hyperframes.heygen.com"},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Contract color used by the brand period at the end of the wordmark.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"style","label":"Exit","description":"Optional departure. Films end on the still hold, so the default is none.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
+>
+
+```html logo-brand-close.html
+<!doctype html>
+<!--
+  logo-brand-close: HyperFrames video primitive (brand close)
+
+  The identity close that ends films. The wordmark lands at display scale,
+  a chars-aware fit sizing it to roughly three quarters of the frame width.
+  Letters cascade left to right (per-letter fade plus rise with a long
+  expo tail) while the whole wordmark settles from a slightly larger scale,
+  the accent brand period arrives last with a decisive pop, a readable
+  tagline settles beneath, a wide-tracked mono URL breathes in below, then
+  the finished lockup holds dead still to the end. Distinct from cta-close:
+  identity, not action. No button, no cursor.
+
+  Variables:
+    - wordmark (string): the brand name that cascades into place.
+    - tagline (string): optional line beneath the wordmark; empty hides it.
+    - url (string): optional mono URL line; empty hides it.
+    - accent (green | blue | violet): color of the brand period.
+    - exit (none | fade | up, default none): films end on the hold.
+
+  Envelope, fixed IN with elastic HOLD only (OUT exists only when exit is
+  not none):
+    IN_BASE  = 2.6s, letter cascade + scale settle, period pop, tagline
+               settle, URL tracking settle
+    HOLD     = max(0, D - IN - OUT), completely still
+    OUT_BASE = 0.5s only when exit is fade or up, otherwise 0
+    If D is shorter than IN_BASE + OUT_BASE, both compress together.
+    The timeline is never time-scaled.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, has no data-width or data-height,
+  and registers one paused timeline under the literal logo-brand-close key.
+-->
+<html
+  lang="en"
+  data-composition-id="logo-brand-close"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "wordmark", "type": "string", "role": "content", "label": "Wordmark", "description": "Brand name whose letters cascade into the centered lockup.", "default": "HYPERFRAMES" },
+    { "id": "tagline", "type": "string", "role": "content", "label": "Tagline", "description": "Optional tagline that settles beneath the wordmark. Empty hides it.", "default": "Write HTML. Render video." },
+    { "id": "url", "type": "string", "role": "content", "label": "URL", "description": "Optional mono URL line beneath the tagline. Empty hides it.", "default": "hyperframes.heygen.com" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Contract color used by the brand period at the end of the wordmark.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "style", "label": "Exit", "description": "Optional departure. Films end on the still hold, so the default is none.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Logo Brand Close</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="logo-brand-close" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .lbc-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+            background: var(--bg, #0b0c0e);
+          }
+
+          .lbc-lockup {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            width: 100cqw;
+            text-align: center;
+            will-change: transform, opacity;
+          }
+
+          /* Display scale: the JS chars-aware fit targets ~76cqw of set
+             width; 40cqh caps it in short, wide mounts. */
+          .lbc-wordmark {
+            display: flex;
+            align-items: baseline;
+            justify-content: center;
+            margin: 0;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: var(--lbc-wordmark-size, min(10.5cqw, 40cqh));
+            font-weight: 600;
+            line-height: 1.04;
+            letter-spacing: -0.035em;
+            white-space: nowrap;
+            will-change: transform;
+          }
+
+          .lbc-letter {
+            display: inline-block;
+            flex: 0 0 auto;
+            will-change: transform, opacity;
+          }
+
+          .lbc-space {
+            width: 0.34em;
+          }
+
+          .lbc-period {
+            color: var(--lbc-accent);
+          }
+
+          .lbc-tagline {
+            max-width: 88cqw;
+            margin: var(--space-2, 3cqmin) 0 0;
+            color: var(--fg, #f8fafc);
+            font-size: min(3.4cqw, 5.4cqmin);
+            font-weight: 500;
+            line-height: 1.3;
+            letter-spacing: 0.01em;
+            will-change: transform, opacity;
+          }
+
+          .lbc-url {
+            margin: var(--space-3, 4.6cqmin) 0 0;
+            color: var(--muted, #94a3b8);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            font-size: min(2.4cqw, 3.2cqmin);
+            font-weight: 500;
+            line-height: 1;
+            letter-spacing: 0.28em;
+            will-change: opacity;
+          }
+        </style>
+
+        <div
+          id="logo-brand-close-clip"
+          class="lbc-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="lbc-lockup">
+            <h2 class="lbc-wordmark"></h2>
+            <p class="lbc-tagline"></p>
+            <p class="lbc-url"></p>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var lockup = root.querySelector(".lbc-lockup");
+            var wordmarkElement = root.querySelector(".lbc-wordmark");
+            var taglineElement = root.querySelector(".lbc-tagline");
+            var urlElement = root.querySelector(".lbc-url");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var wordmark =
+              vars.wordmark == null
+                ? "HYPERFRAMES"
+                : String(vars.wordmark).trim().replace(/\s+/g, " ");
+            if (wordmark.length === 0) wordmark = "HYPERFRAMES";
+            var tagline =
+              vars.tagline == null
+                ? "Write HTML. Render video."
+                : String(vars.tagline).trim().replace(/\s+/g, " ");
+            var url = vars.url == null ? "hyperframes.heygen.com" : String(vars.url).trim();
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            root.style.setProperty("--lbc-accent", accentColors[accent]);
+            wordmarkElement.setAttribute("aria-label", wordmark);
+            wordmarkElement.setAttribute("role", "img");
+
+            // The brand period: an accent dot ends the wordmark. If the
+            // wordmark already ends with "." that period takes the accent
+            // instead of appending a second one.
+            var characters = Array.from(wordmark);
+            if (characters[characters.length - 1] !== ".") characters.push(".");
+
+            var letters = characters.map(function (character, index) {
+              var letter = document.createElement("span");
+              letter.id = "logo-brand-close-letter-" + index;
+              letter.className = "lbc-letter";
+              if (/\s/.test(character)) {
+                letter.classList.add("lbc-space");
+                letter.textContent = " ";
+              } else {
+                letter.textContent = character;
+              }
+              if (index === characters.length - 1) letter.classList.add("lbc-period");
+              letter.setAttribute("aria-hidden", "true");
+              wordmarkElement.appendChild(letter);
+              return letter;
+            });
+            var periodLetter = letters[letters.length - 1];
+            var cascadeLetters = letters.slice(0, -1);
+
+            // Deterministic chars-aware fit: probe the set width at a fixed
+            // 100px font (letter-spacing rides in em, so the em ratio is a
+            // pure font metric), then size the wordmark so it lands at
+            // ~76cqw. The 40cqh term caps it in short, wide mounts. If the
+            // probe cannot measure (detached render), fall back to a
+            // per-glyph advance estimate.
+            wordmarkElement.style.fontSize = "100px";
+            var probedWidth = wordmarkElement.getBoundingClientRect().width;
+            wordmarkElement.style.fontSize = "";
+            var setWidthEm;
+            if (probedWidth > 0) {
+              setWidthEm = probedWidth / 100;
+            } else {
+              setWidthEm = characters.reduce(function (total, character) {
+                if (/\s/.test(character)) return total + 0.34;
+                if (/[.,:;!'’|]/.test(character)) return total + 0.3;
+                if (/[Iijlftr]/.test(character)) return total + 0.42;
+                if (/[MWmw@]/.test(character)) return total + 0.92;
+                return total + 0.64;
+              }, 0);
+              setWidthEm -= characters.length * 0.035;
+            }
+            setWidthEm = Math.max(0.3, setWidthEm);
+            var wordmarkSize = 76 / setWidthEm;
+            root.style.setProperty(
+              "--lbc-wordmark-size",
+              "min(" + wordmarkSize.toFixed(3) + "cqw, 40cqh)",
+            );
+
+            if (tagline.length === 0) taglineElement.remove();
+            else taglineElement.textContent = tagline;
+            if (url.length === 0) urlElement.remove();
+            else urlElement.textContent = url;
+
+            var IN_BASE = 2.6;
+            var OUT_BASE = exit === "none" ? 0 : 0.5;
+            var CASCADE_RISE_BASE = 1.15;
+            var CASCADE_STAGGER_BASE = 0.7;
+            var SETTLE_BASE = 2.4;
+            var PERIOD_AT_BASE = 0.95;
+            var PERIOD_DURATION_BASE = 0.9;
+            var TAGLINE_AT_BASE = 1.35;
+            var TAGLINE_DURATION_BASE = 0.9;
+            var URL_AT_BASE = 1.7;
+            var URL_DURATION_BASE = 0.85;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var totalBase = IN_BASE + OUT_BASE;
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var STAGGER = cascadeLetters.length > 1 ? CASCADE_STAGGER_BASE * scale : 0;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var OUT_START = IN + HOLD;
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: per-letter fade plus rise with a long expo tail, while the
+            // whole wordmark settles down from a slightly larger scale.
+            if (cascadeLetters.length > 0) {
+              tl.fromTo(
+                cascadeLetters,
+                { opacity: 0, y: "0.62em" },
+                {
+                  opacity: 1,
+                  y: "0em",
+                  duration: CASCADE_RISE_BASE * scale,
+                  stagger: { amount: STAGGER, from: "start" },
+                  ease: "expo.out",
+                },
+                0,
+              );
+            }
+
+            tl.fromTo(
+              wordmarkElement,
+              { scale: 1.04, transformOrigin: "50% 100%" },
+              { scale: 1, duration: SETTLE_BASE * scale, ease: "expo.out" },
+              0,
+            );
+
+            // The brand period lands last: a decisive accent pop.
+            tl.fromTo(
+              periodLetter,
+              { opacity: 0, scale: 0.2, y: "0.08em", transformOrigin: "50% 65%" },
+              {
+                opacity: 1,
+                scale: 1,
+                y: "0em",
+                duration: PERIOD_DURATION_BASE * scale,
+                ease: "back.out(1.8)",
+              },
+              PERIOD_AT_BASE * scale,
+            );
+
+            if (taglineElement.isConnected) {
+              tl.fromTo(
+                taglineElement,
+                { opacity: 0, y: "0.9em" },
+                {
+                  opacity: 1,
+                  y: "0em",
+                  duration: TAGLINE_DURATION_BASE * scale,
+                  ease: "power3.out",
+                },
+                TAGLINE_AT_BASE * scale,
+              );
+            }
+
+            if (urlElement.isConnected) {
+              tl.fromTo(
+                urlElement,
+                // scaleX, not letterSpacing: tracking is a layout property, so
+                // the browser snaps it to integer device pixels and the
+                // ease-out tail stutters under seek-by-frame capture. The
+                // widening reads the same and stays on the compositor.
+                { opacity: 0, scaleX: 1.06 },
+                {
+                  opacity: 1,
+                  scaleX: 1,
+                  duration: URL_DURATION_BASE * scale,
+                  ease: "power2.out",
+                },
+                URL_AT_BASE * scale,
+              );
+            }
+
+            // HOLD: dead still. No drift, no breath; the confidence is the
+            // stillness, and by default the film ends here.
+
+            if (exit === "fade") {
+              tl.to(lockup, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "up") {
+              tl.to(
+                lockup,
+                { opacity: 0, y: "-5cqh", duration: OUT, ease: "power2.in" },
+                OUT_START,
+              );
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["logo-brand-close"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add logo-brand-close" />
+
+That writes one file: `compositions/components/logo-brand-close.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/logo-brand-close.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `typography` `brand` `logo` `end-card` `close`.
+
+## 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/components/logo-sting.mdx b/docs/catalog/components/logo-sting.mdx
new file mode 100644
index 0000000000..0a15cf5d8b
--- /dev/null
+++ b/docs/catalog/components/logo-sting.mdx
@@ -0,0 +1,222 @@
+---
+title: "Logo Sting"
+description: "A wordmark slams into its final scale, fires one accent ring and one white impact frame, then holds completely still."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/logo-sting.html"
+  compositionId="logo-sting"
+  compositionSrc="compositions/components/logo-sting.html"
+  variables={[{"id":"wordmark","type":"string","role":"content","label":"Wordmark","description":"Brand name displayed in the final lockup.","default":"HYPERFRAMES"},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Color of the single impact ring.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]}]}
+>
+
+```html logo-sting.html
+<!doctype html>
+<!--
+  logo-sting: HyperFrames video primitive (brand / impact / reveal)
+
+  Concept: a wordmark lands from scale 1.15 with the slam ease. Its impact
+  triggers one accent ring and exactly one frame of white, then the finished
+  lockup holds completely still.
+
+  Variables:
+    - wordmark (string, default "HYPERFRAMES"): the brand name.
+    - accent (green | blue | violet, default green): the ring color.
+
+  Envelope (fixed IN, elastic HOLD, no OUT, never timeScale):
+    IN_BASE = 0.95s. The wordmark lands at 0.55s, then the ring resolves.
+    HOLD = max(0, D - IN). This phase is deliberately dead still.
+    OUT = 0s. The final brand frame remains established through the end.
+    If D is shorter than IN_BASE, only IN compresses and HOLD becomes zero.
+
+  Mount contract: this template is cloned into a sized host. #root fills that
+  host, establishes the container query basis, and registers one paused GSAP
+  timeline under the hardcoded logo-sting key.
+-->
+<html
+  lang="en"
+  data-composition-id="logo-sting"
+  data-composition-duration="2.2"
+  data-composition-variables='[
+    { "id": "wordmark", "type": "string", "role": "content", "label": "Wordmark", "description": "Brand name displayed in the final lockup.", "default": "HYPERFRAMES" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Color of the single impact ring.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Logo Sting</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="logo-sting" data-duration="2.2" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            background: var(--bg, #0b0c0e);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .ls-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+          }
+
+          .ls-ring {
+            position: absolute;
+            z-index: 1;
+            width: min(42cqw, 72cqh);
+            aspect-ratio: 1;
+            border: min(0.34cqw, 0.62cqh) solid var(--ls-accent);
+            border-radius: 50%;
+            opacity: 0;
+            will-change: transform, opacity;
+          }
+
+          .ls-wordmark {
+            position: relative;
+            z-index: 2;
+            max-width: 90cqw;
+            color: var(--fg, #f8fafc);
+            font-size: min(10.5cqw, 18cqh);
+            font-weight: 850;
+            line-height: 0.9;
+            letter-spacing: -0.055em;
+            text-align: center;
+            white-space: nowrap;
+            transform-origin: 50% 50%;
+            will-change: transform;
+          }
+
+          .ls-flash {
+            position: absolute;
+            inset: 0;
+            z-index: 3;
+            background: #ffffff;
+            opacity: 0;
+          }
+        </style>
+
+        <div
+          id="logo-sting-clip"
+          class="ls-clip clip"
+          data-start="0"
+          data-duration="2.2"
+          data-track-index="0"
+        >
+          <div class="ls-ring" aria-hidden="true"></div>
+          <div class="ls-wordmark"></div>
+          <div class="ls-flash" aria-hidden="true"></div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var wordmark = root.querySelector(".ls-wordmark");
+            var ring = root.querySelector(".ls-ring");
+            var flash = root.querySelector(".ls-flash");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var accentColors = {
+              green: "var(--brand, #5df28b)",
+              blue: "var(--accent, #4da3ff)",
+              violet: "var(--accent-2, #a978ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var wordmarkText = vars.wordmark == null ? "HYPERFRAMES" : String(vars.wordmark);
+
+            wordmark.textContent = wordmarkText;
+            root.style.setProperty("--ls-accent", accentColors[accent]);
+
+            var IN_BASE = 0.95;
+            var IMPACT_BASE = 0.55;
+            var parsedDuration = parseFloat(root.dataset.duration);
+            var duration = Number.isFinite(parsedDuration) ? Math.max(0.001, parsedDuration) : 2.2;
+            var IN = Math.min(IN_BASE, duration);
+            var retime = IN / IN_BASE;
+            var IMPACT = IMPACT_BASE * retime;
+            var RING_DURATION = (IN_BASE - IMPACT_BASE) * retime;
+            var FLASH_FRAME = Math.min(1 / 30, RING_DURATION);
+            var HOLD = Math.max(0, duration - IN);
+
+            gsap.set(ring, { scale: 0.34, opacity: 0 });
+            gsap.set(flash, { opacity: 0 });
+
+            var tl = gsap.timeline({ paused: true });
+
+            tl.fromTo(
+              wordmark,
+              { scale: 1.15 },
+              { scale: 1, duration: IMPACT, ease: "expo.out" },
+              0,
+            );
+            tl.set(ring, { opacity: 0.92 }, IMPACT);
+            tl.to(
+              ring,
+              { scale: 2.4, opacity: 0, duration: RING_DURATION, ease: "power3.out" },
+              IMPACT,
+            );
+            tl.set(flash, { opacity: 1 }, IMPACT);
+            tl.set(flash, { opacity: 0 }, IMPACT + FLASH_FRAME);
+            tl.addLabel("hold", IN);
+            tl.addLabel("end", IN + HOLD);
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["logo-sting"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add logo-sting" />
+
+That writes one file: `compositions/components/logo-sting.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/logo-sting.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `brand` `logo` `sting` `impact` `reveal`.
+
+## 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/components/logo-wall.mdx b/docs/catalog/components/logo-wall.mdx
new file mode 100644
index 0000000000..2106ca2c82
--- /dev/null
+++ b/docs/catalog/components/logo-wall.mdx
@@ -0,0 +1,341 @@
+---
+title: "Logo Wall"
+description: "A trusted-by wall of placeholder lettermark logos that fades and scales into place with a deterministic per-cell stagger."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/logo-wall.html"
+  compositionId="logo-wall"
+  compositionSrc="compositions/components/logo-wall.html"
+  variables={[{"id":"rows","type":"number","role":"layout","label":"Rows","description":"Number of logo rows in the wall.","default":3,"min":2,"max":4,"step":1},{"id":"cols","type":"number","role":"layout","label":"Columns","description":"Number of logo columns in the wall.","default":5,"min":3,"max":6,"step":1},{"id":"stagger","type":"number","role":"motion","label":"Stagger","description":"Delay between consecutive logo cell entrances.","default":45,"min":20,"max":75,"step":1,"unit":"ms"}]}
+>
+
+```html logo-wall.html
+<!doctype html>
+<!--
+  logo-wall: HyperFrames video primitive (data / holdable / prove)
+
+  Concept: a trusted-by wall of placeholder lettermark logos assembles in DOM
+  order. Each cell fades and scales directly into its final grid slot with a
+  fixed per-cell delay. One mechanic, one job: prove trust through a collected
+  wall of customer marks.
+
+  Compiled-from evidence: consumer-sim fixture plus the grid-card-assemble
+  blueprint's Social_Proof logo-wall variant. The blueprint requires a dense
+  array to use short, slot-local entrances instead of a shared-center burst.
+
+  Use when: a scene needs a compact trusted-by beat without using real brand
+  assets or turning the wall into a feature-card showcase.
+
+  Variables (declared in data-composition-variables below):
+    - rows (number, default 3, range 2 to 4): visible logo rows.
+    - cols (number, default 5, range 3 to 6): visible logo columns.
+    - stagger (number, default 45, range 20 to 75 ms): fixed delay between
+      consecutive cell entrances.
+
+  Envelope (fixed IN/OUT, elastic HOLD only, never gsap.timeScale()):
+    IN_BASE  = 2.50s  ordered fade and scale assembly.
+    HOLD     = elastic = max(0, D - (IN_BASE + OUT_BASE)); deliberately still
+               so the completed evidence wall remains readable.
+    OUT_BASE = 0.50s  clean group fade.
+    If D is shorter than IN_BASE + OUT_BASE, IN and OUT scale down together so
+    IN + OUT equals D and HOLD equals 0. The index-based stagger scales only in
+    that compressed envelope.
+
+  Sync point: none. The proof is distributed across per-cell arrivals, so no
+  single fixed cue represents the assembly honestly.
+
+  Sound cue: none. A distributed wall assembly has no truthful single-frame
+  sound event, so this primitive does not dispatch hf:sfx.
+
+  Mount contract: this file is a mountable sub-composition. A host loads it via
+  data-composition-src, and the runtime clones only <template> contents. Styles,
+  markup, GSAP, and registration therefore live inside <template>. #root fills
+  the host with inset:0 and container-type:size and has no data-width or
+  data-height. The hardcoded id "logo-wall" matches the host id and timeline
+  key after mount flattening. Variables come from
+  window.__hyperframes.getVariables(), which merges declarations with host
+  data-variable-values overrides.
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "rows", "type": "number", "role": "layout", "label": "Rows", "description": "Number of logo rows in the wall.", "default": 3, "min": 2, "max": 4, "step": 1 },
+    { "id": "cols", "type": "number", "role": "layout", "label": "Columns", "description": "Number of logo columns in the wall.", "default": 5, "min": 3, "max": 6, "step": 1 },
+    { "id": "stagger", "type": "number", "role": "motion", "label": "Stagger", "description": "Delay between consecutive logo cell entrances.", "default": 45, "min": 20, "max": 75, "step": 1, "unit": "ms" }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Logo Wall</title>
+    <!-- Metadata only. The loader reads declarations from <html>, then
+         discards everything outside <template>. -->
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="logo-wall" data-start="0" data-duration="5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          /* Root fills the host box and consumes only the shared theme tokens.
+             Every internal dimension is relative to this size container. */
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            color: var(--fg, #f5f6f8);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+          }
+
+          .lw-clip {
+            width: 100%;
+            height: 100%;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+            background: var(--bg, #0b0c10);
+          }
+
+          .lw-stage {
+            width: 86cqw;
+            height: 82cqh;
+            display: grid;
+            grid-template-rows: auto minmax(0, 1fr);
+            gap: var(--space-3, 3cqh);
+            padding: var(--space-3, 3cqh);
+          }
+
+          .lw-heading {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: var(--space-2, 1.6cqh);
+            color: var(--muted, #8b8f9a);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: min(2.6cqw, 4.4cqh);
+            font-weight: 650;
+            letter-spacing: 0.08em;
+            line-height: 1;
+            text-transform: uppercase;
+          }
+
+          .lw-heading::before,
+          .lw-heading::after {
+            content: "";
+            width: 8cqw;
+            height: 0.14cqw;
+            background: var(--border, #262931);
+          }
+
+          /* EDIT ZONE: grid geometry. rows and cols are the sole owners of
+             track count. Spacing and surfaces remain theme-token driven. */
+          .lw-grid {
+            min-width: 0;
+            min-height: 0;
+            display: grid;
+            grid-template-columns: repeat(var(--lw-cols), minmax(0, 1fr));
+            grid-template-rows: repeat(var(--lw-rows), minmax(0, 1fr));
+            gap: var(--space-2, 1.6cqh);
+          }
+
+          .lw-cell {
+            min-width: 0;
+            min-height: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+            border: 0.14cqw solid var(--border, #262931);
+            border-radius: var(--radius, 2cqw);
+            background: var(--surface, #16181d);
+            box-shadow: 0 1.2cqh 3cqh color-mix(in srgb, var(--bg, #0b0c10) 58%, transparent);
+          }
+
+          .lw-mark {
+            display: grid;
+            place-items: center;
+            width: min(5.5cqw, 9.5cqh);
+            aspect-ratio: 1;
+            border-radius: calc(var(--radius, 2cqw) * 0.72);
+            background: color-mix(in srgb, var(--fg, #f5f6f8) 72%, transparent);
+            color: var(--bg, #0b0c10);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: min(2.2cqw, 4cqh);
+            font-weight: 800;
+            letter-spacing: -0.04em;
+            line-height: 1;
+          }
+        </style>
+
+        <div
+          id="logo-wall-clip"
+          class="lw-clip clip"
+          data-start="0"
+          data-duration="5"
+          data-track-index="0"
+        >
+          <section class="lw-stage" aria-label="Trusted by logo wall">
+            <div class="lw-heading">Trusted by teams</div>
+            <div class="lw-grid"></div>
+          </section>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var compositionId = "logo-wall";
+            var stage = root.querySelector(".lw-stage");
+            var grid = root.querySelector(".lw-grid");
+
+            // EDIT ZONE: the runtime variable table is read once. These
+            // clamped values own DOM count, grid tracks, and stagger timing.
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var rawRows = Number(vars.rows);
+            var rows = Number.isFinite(rawRows) ? Math.round(rawRows) : 3;
+            rows = Math.max(2, Math.min(4, rows));
+
+            var rawCols = Number(vars.cols);
+            var cols = Number.isFinite(rawCols) ? Math.round(rawCols) : 5;
+            cols = Math.max(3, Math.min(6, cols));
+
+            var rawStagger = Number(vars.stagger);
+            var staggerMs = Number.isFinite(rawStagger) ? rawStagger : 45;
+            staggerMs = Math.max(20, Math.min(75, staggerMs));
+
+            var lettermarks = [
+              "AX",
+              "BL",
+              "CY",
+              "DQ",
+              "EV",
+              "FK",
+              "GN",
+              "HT",
+              "IP",
+              "JR",
+              "KS",
+              "LU",
+              "MW",
+              "NX",
+              "OZ",
+              "PA",
+              "QC",
+              "RF",
+              "SG",
+              "TJ",
+              "VK",
+              "WL",
+              "XM",
+              "YN",
+            ];
+            var cellCount = rows * cols;
+            var fragment = document.createDocumentFragment();
+
+            for (var index = 0; index < cellCount; index += 1) {
+              var cell = document.createElement("div");
+              var mark = document.createElement("span");
+              cell.className = "lw-cell";
+              cell.setAttribute("aria-hidden", "true");
+              mark.className = "lw-mark";
+              mark.textContent = lettermarks[index];
+              cell.appendChild(mark);
+              fragment.appendChild(cell);
+            }
+
+            grid.replaceChildren(fragment);
+            grid.style.setProperty("--lw-rows", String(rows));
+            grid.style.setProperty("--lw-cols", String(cols));
+
+            var cells = root.querySelectorAll(".lw-cell");
+
+            // RETIME RANGE: the 2.50s IN fits the largest public wall of 24
+            // cells at the maximum 75ms stagger plus the 0.55s cell settle.
+            // HOLD alone absorbs longer host durations.
+            var IN_BASE = 2.5;
+            var OUT_BASE = 0.5;
+            var ASSEMBLE_START_BASE = 0.15;
+            var CELL_DURATION_BASE = 0.55;
+
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "5"));
+            var totalBase = IN_BASE + OUT_BASE;
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var OUT_START = IN + HOLD;
+            var ASSEMBLE_START = ASSEMBLE_START_BASE * scale;
+            var CELL_DURATION = CELL_DURATION_BASE * scale;
+            var STAGGER_SECONDS = (staggerMs / 1000) * scale;
+
+            var timeline = gsap.timeline({ paused: true });
+
+            // IN: deterministic DOM-order assembly. power2.out is the GSAP
+            // owner of the shared --ease-standard entrance token.
+            timeline.fromTo(
+              cells,
+              { opacity: 0, scale: 0.94 },
+              {
+                opacity: 1,
+                scale: 1,
+                duration: CELL_DURATION,
+                ease: "power2.out",
+                stagger: { each: STAGGER_SECONDS, from: "start" },
+              },
+              ASSEMBLE_START,
+            );
+
+            // HOLD: deliberately still. OUT: the whole proof wall leaves once
+            // with the production exit curve, never during the elastic hold.
+            timeline.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+
+            timeline.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = timeline;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add logo-wall" />
+
+That writes one file: `compositions/components/logo-wall.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/logo-wall.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `data` `logos` `social-proof` `stagger` `prove`.
+
+## 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/components/marker-highlight.mdx b/docs/catalog/components/marker-highlight.mdx
new file mode 100644
index 0000000000..6bb900b579
--- /dev/null
+++ b/docs/catalog/components/marker-highlight.mdx
@@ -0,0 +1,404 @@
+---
+title: "Marker Highlight"
+description: "Display text settles in, then one hand-drawn marker stroke (highlight, circle, underline, or scribble) draws over the emphasized word on cue."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/marker-highlight.html"
+  compositionId="marker-highlight"
+  compositionSrc="compositions/components/marker-highlight.html"
+  variables={[{"id":"text","type":"string","role":"content","label":"Text","description":"Full line of display text.","default":"Ship it with confidence"},{"id":"emphasis_word","type":"string","role":"content","label":"Emphasis word","description":"First case-insensitive substring match in text receives the marker. Empty or unmatched draws no marker.","default":"confidence"},{"id":"style","type":"enum","role":"style","label":"Marker style","description":"Shape of the hand-drawn marker stroke.","default":"highlight","options":[{"value":"highlight","label":"Highlight"},{"value":"circle","label":"Circle"},{"value":"underline","label":"Underline"},{"value":"scribble","label":"Scribble"}]},{"id":"draw_at","type":"number","role":"timing","label":"Draw at","description":"Second (from mount start) the marker starts drawing. Clamped so the stroke completes before any exit.","default":0.9,"min":0,"step":0.1,"unit":"s"},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Marker ink color from the contract token map.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Optional departure. Default none: the lockup holds until the frame cuts.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
+>
+
+```html marker-highlight.html
+<!doctype html>
+<!--
+  marker-highlight: HyperFrames video primitive (typography / emphasis)
+
+  The corpus emphasis unit: a short line of display text settles in, then ONE
+  hand-drawn marker stroke draws over the emphasized word on cue. Four marker
+  styles share the same mechanic: an SVG path revealed by a getTotalLength
+  dash tween (never the pathLength attribute, never non-scaling-stroke on a
+  dashed path; the anisotropic viewBox stretch is what gives the ink its
+  hand-swiped weight).
+
+  Variables:
+    text (string): the full line.
+    emphasis_word (string): first case-insensitive substring match inside
+      text gets the marker. Empty or unmatched renders the line with no
+      marker. Keep it a word or short phrase; it stays on one line.
+    style (highlight | circle | underline | scribble): marker shape.
+    draw_at (seconds): cue for the draw, relative to mount start. Clamped so
+      the stroke always completes before any exit begins.
+    accent (green | blue | violet): ink color via the contract token map.
+    exit (none | fade | up, default none): frame roots own transitions;
+      holds end films.
+
+  Envelope, fixed IN and OUT with elastic HOLD only (never time-scaled):
+    IN_BASE   = 0.55s  text rises into place
+    DRAW_BASE = 0.60s  marker stroke, anchored at draw_at, plus a small
+                       settle pop on the emphasized word
+    HOLD      = max(0, D - phases), completely still
+    OUT_BASE  = 0s for exit none, otherwise 0.45s
+    If D is shorter than the fixed phases, they compress together.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, has no data-width or
+  data-height, and registers one paused timeline under the literal
+  marker-highlight key.
+-->
+<html
+  lang="en"
+  data-composition-id="marker-highlight"
+  data-composition-duration="3.5"
+  data-composition-variables='[
+    { "id": "text", "type": "string", "role": "content", "label": "Text", "description": "Full line of display text.", "default": "Ship it with confidence" },
+    { "id": "emphasis_word", "type": "string", "role": "content", "label": "Emphasis word", "description": "First case-insensitive substring match in text receives the marker. Empty or unmatched draws no marker.", "default": "confidence" },
+    { "id": "style", "type": "enum", "role": "style", "label": "Marker style", "description": "Shape of the hand-drawn marker stroke.", "default": "highlight", "options": [{ "value": "highlight", "label": "Highlight" }, { "value": "circle", "label": "Circle" }, { "value": "underline", "label": "Underline" }, { "value": "scribble", "label": "Scribble" }] },
+    { "id": "draw_at", "type": "number", "role": "timing", "label": "Draw at", "description": "Second (from mount start) the marker starts drawing. Clamped so the stroke completes before any exit.", "default": 0.9, "min": 0, "step": 0.1, "unit": "s" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Marker ink color from the contract token map.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the lockup holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Marker Highlight</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="marker-highlight" data-duration="3.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            background: var(--bg, #0b0c0e);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .mh-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+          }
+
+          .mh-stage {
+            max-width: 86cqw;
+            text-align: center;
+            will-change: transform, opacity;
+          }
+
+          .mh-text {
+            margin: 0;
+            font-size: var(--mh-font-size, min(8cqw, 15cqh));
+            font-weight: 600;
+            line-height: 1.14;
+            letter-spacing: -0.03em;
+          }
+
+          .mh-em {
+            position: relative;
+            display: inline-block;
+            white-space: nowrap;
+            will-change: transform;
+          }
+
+          .mh-em-text {
+            position: relative;
+            z-index: 1;
+          }
+
+          .mh-mark {
+            position: absolute;
+            z-index: 0;
+            overflow: visible;
+          }
+
+          /* Per-style marker box around the emphasized word. Explicit
+             width/height (svg is a replaced element: inset-stretching would
+             fall back to its intrinsic viewBox ratio); then
+             preserveAspectRatio="none" stretches the authored path (and its
+             stroke) into the box, which is exactly the marker-nib distortion
+             we want on a dashed path. */
+          .mh-em[data-marker-style="highlight"] .mh-mark {
+            left: -3%;
+            top: 14%;
+            width: 106%;
+            height: 76%;
+          }
+
+          .mh-em[data-marker-style="underline"] .mh-mark {
+            left: -2%;
+            bottom: -14%;
+            width: 105%;
+            height: 22%;
+            z-index: 2;
+          }
+
+          .mh-em[data-marker-style="circle"] .mh-mark {
+            left: -13%;
+            top: -26%;
+            width: 126%;
+            height: 152%;
+            z-index: 2;
+          }
+
+          .mh-em[data-marker-style="scribble"] .mh-mark {
+            left: -2%;
+            top: 12%;
+            width: 104%;
+            height: 76%;
+            z-index: 2;
+          }
+        </style>
+
+        <div
+          id="marker-highlight-clip"
+          class="mh-clip clip"
+          data-start="0"
+          data-duration="3.5"
+          data-track-index="0"
+        >
+          <div class="mh-stage">
+            <p class="mh-text"></p>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            // Literal key: the flattening step strips data-composition-id off
+            // the mounted root, so reading it back would register "null".
+            var compositionId = "marker-highlight";
+            var stage = root.querySelector(".mh-stage");
+            var textEl = root.querySelector(".mh-text");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var text =
+              vars.text == null
+                ? "Ship it with confidence"
+                : String(vars.text).trim().replace(/\s+/g, " ");
+            var emphasis =
+              vars.emphasis_word == null
+                ? "confidence"
+                : String(vars.emphasis_word).trim().replace(/\s+/g, " ");
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            // Hand-drawn stroke library. Paths are authored in a fixed viewBox
+            // and stretched into the word box; wobble is baked into the
+            // control points, never randomized.
+            var markerStyles = {
+              highlight: {
+                viewBox: "0 0 100 40",
+                d: "M 3 24 C 22 20.5, 47 25.5, 68 22.5 C 79 21, 90 23, 97 21.5",
+                strokeWidth: 26,
+                opacity: 0.5,
+              },
+              circle: {
+                viewBox: "0 0 100 40",
+                d: "M 22 7 C 58 1, 95 8, 97 20 C 99 31, 74 38, 44 37 C 16 36, 2 29, 3 19 C 4 10, 22 4, 52 4.5",
+                strokeWidth: 2.8,
+                opacity: 1,
+              },
+              underline: {
+                viewBox: "0 0 100 12",
+                d: "M 2 7 C 20 4.5, 46 8.5, 66 6 C 80 4.5, 92 7.5, 98 5.5",
+                strokeWidth: 4.5,
+                opacity: 1,
+              },
+              scribble: {
+                viewBox: "0 0 100 40",
+                d: "M 6 13 C 34 9.5, 66 11, 94 9 C 60 15, 26 16, 7 20 C 36 18, 68 21, 93 18 C 62 25, 28 27, 8 29",
+                strokeWidth: 5,
+                opacity: 0.65,
+              },
+            };
+            var styleName = Object.prototype.hasOwnProperty.call(markerStyles, vars.style)
+              ? vars.style
+              : "highlight";
+            var marker = markerStyles[styleName];
+
+            // Split text around the first case-insensitive emphasis match.
+            // textContent nodes only, never innerHTML.
+            var matchIndex =
+              emphasis.length > 0 ? text.toLowerCase().indexOf(emphasis.toLowerCase()) : -1;
+            var emEl = null;
+            var pathEl = null;
+            if (matchIndex >= 0) {
+              var before = text.slice(0, matchIndex);
+              var matched = text.slice(matchIndex, matchIndex + emphasis.length);
+              var after = text.slice(matchIndex + emphasis.length);
+              if (before) textEl.appendChild(document.createTextNode(before));
+
+              emEl = document.createElement("span");
+              emEl.className = "mh-em";
+              emEl.setAttribute("data-marker-style", styleName);
+
+              var svgNS = "http://www.w3.org/2000/svg";
+              var svg = document.createElementNS(svgNS, "svg");
+              svg.setAttribute("class", "mh-mark");
+              svg.setAttribute("viewBox", marker.viewBox);
+              svg.setAttribute("preserveAspectRatio", "none");
+              svg.setAttribute("aria-hidden", "true");
+              pathEl = document.createElementNS(svgNS, "path");
+              pathEl.setAttribute("d", marker.d);
+              pathEl.setAttribute("fill", "none");
+              pathEl.setAttribute("stroke-width", String(marker.strokeWidth));
+              pathEl.setAttribute("stroke-linecap", "round");
+              pathEl.setAttribute("stroke-linejoin", "round");
+              // style.stroke, not the presentation attribute: var() only
+              // resolves as a CSS value.
+              pathEl.style.stroke = accentColors[accent];
+              svg.appendChild(pathEl);
+
+              var emText = document.createElement("span");
+              emText.className = "mh-em-text";
+              emText.textContent = matched;
+
+              emEl.appendChild(svg);
+              emEl.appendChild(emText);
+              textEl.appendChild(emEl);
+              if (after) textEl.appendChild(document.createTextNode(after));
+            } else {
+              textEl.textContent = text;
+            }
+            textEl.setAttribute("aria-label", text);
+
+            // Deterministic character-count fit; the line may wrap, the
+            // emphasized phrase never wraps internally.
+            var characters = Math.max(1, Array.from(text).length);
+            var fitted = Math.max(4.2, Math.min(9.5, 185 / characters));
+            root.style.setProperty("--mh-font-size", "min(" + fitted.toFixed(3) + "cqw, 16cqh)");
+
+            // RETIME RANGE: fixed phases; HOLD is the only elastic span.
+            var IN_BASE = 0.55;
+            var DRAW_BASE = 0.6;
+            var POP_BASE = 0.32;
+            var OUT_BASE = exit === "none" ? 0 : 0.45;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "3.5"));
+            var totalBase = IN_BASE + DRAW_BASE + OUT_BASE;
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var DRAW = DRAW_BASE * scale;
+            var POP = POP_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var OUT_START = duration - OUT;
+
+            var drawAtRaw = Number(vars.draw_at);
+            var drawAt = Number.isFinite(drawAtRaw) ? Math.max(0, drawAtRaw) : 0.9;
+            // The stroke and its settle pop always land before the exit.
+            drawAt = Math.min(drawAt, Math.max(0, OUT_START - (DRAW + POP)));
+
+            gsap.set(stage, { opacity: 0, y: "6cqh" });
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: the line rises into place.
+            tl.fromTo(
+              stage,
+              { opacity: 0, y: "6cqh" },
+              { opacity: 1, y: "0cqh", duration: IN, ease: "power3.out" },
+              0,
+            );
+
+            // DRAW: dash reveal from measured length; both endpoints explicit
+            // so any seek is correct without playing through.
+            if (pathEl) {
+              var length = pathEl.getTotalLength();
+              pathEl.style.strokeDasharray = String(length);
+              // Hidden until the cue: at dashoffset == length the round cap
+              // still paints a dot at the path start, so the ink is opacity 0
+              // until the exact frame the draw begins.
+              gsap.set(pathEl, { strokeDashoffset: length, opacity: 0 });
+              tl.set(pathEl, { opacity: marker.opacity }, drawAt);
+              tl.fromTo(
+                pathEl,
+                { strokeDashoffset: length },
+                { strokeDashoffset: 0, duration: DRAW, ease: "power2.inOut" },
+                drawAt,
+              );
+              // Settle pop on the emphasized word as the ink lands.
+              tl.fromTo(
+                emEl,
+                { scale: 1 },
+                {
+                  scale: 1.045,
+                  duration: POP / 2,
+                  ease: "power1.out",
+                  yoyo: true,
+                  repeat: 1,
+                },
+                drawAt + DRAW * 0.7,
+              );
+            }
+
+            // HOLD: completely still.
+
+            // OUT: optional departure; exit none holds until the frame cuts.
+            if (exit === "fade") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "up") {
+              tl.to(stage, { opacity: 0, y: "-7cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add marker-highlight" />
+
+That writes one file: `compositions/components/marker-highlight.html`.
+
+## Usage
+
+Open `compositions/components/marker-highlight.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `typography` `emphasis` `marker` `deterministic`.
+
+## 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/components/match-cut.mdx b/docs/catalog/components/match-cut.mdx
new file mode 100644
index 0000000000..89869f61a0
--- /dev/null
+++ b/docs/catalog/components/match-cut.mdx
@@ -0,0 +1,351 @@
+---
+title: "Match Cut"
+description: "A circle accelerates into a hard single-frame scene swap, matches the incoming circle exactly, and continues into a smaller resting pose."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/match-cut.html"
+  compositionId="match-cut"
+  compositionSrc="compositions/components/match-cut.html"
+  variables={[{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Color shared by the matched circles.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"label_a","type":"string","role":"content","label":"Scene A label","description":"Text inside the outgoing button.","default":"Start"},{"id":"label_b","type":"string","role":"content","label":"Scene B label","description":"Result text revealed after the cut.","default":"Done"}]}
+>
+
+```html match-cut.html
+<!doctype html>
+<!--
+  match-cut: HyperFrames video primitive (transitions / match-cut / connect)
+
+  Concept: scene A drives a circle into a known center-frame geometry, then a
+  hard single-frame swap reveals scene B with a different circle in the exact
+  same geometry. Scene B begins shrinking immediately, so the cut lands while
+  the matched shape is moving rather than on a settled pose.
+
+  Variables:
+    - accent (green | blue | violet, default green): matched-circle color.
+    - label_a (string, default "Start"): scene A button label.
+    - label_b (string, default "Done"): scene B result label.
+
+  Envelope (fixed IN/OUT, elastic HOLD only, never timeScale):
+    IN_BASE  = 2.35s  scene A enters and accelerates into the hard cut, then
+               scene B decelerates into place while its content reveals
+    HOLD     = elastic = max(0, D - (IN_BASE + OUT_BASE)); the matched circle
+               drifts subtly so a longer mount stays alive
+    OUT_BASE = 0.50s  the completed scene fades cleanly
+    If D is shorter than IN_BASE + OUT_BASE, IN and OUT compress together and
+    HOLD becomes zero.
+
+  Sync point: hard-cut occurs at CUT_AT = 1.40s in the default four-second
+  duration, exactly frame 42 at 30 fps. Scene A opacity becomes 0 and scene B
+  opacity becomes 1 at the same timeline instant. There is no crossfade.
+
+  Mount contract: this is a template-wrapped sub-composition. The root has no
+  data-width or data-height, fills its host box, uses container query units,
+  and registers one paused timeline under the literal match-cut key.
+-->
+<html
+  lang="en"
+  data-composition-id="match-cut"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Color shared by the matched circles.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "label_a", "type": "string", "role": "content", "label": "Scene A label", "description": "Text inside the outgoing button.", "default": "Start" },
+    { "id": "label_b", "type": "string", "role": "content", "label": "Scene B label", "description": "Result text revealed after the cut.", "default": "Done" }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Match Cut</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="match-cut" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: #f8fafc;
+            font-family: Inter, system-ui, sans-serif;
+            pointer-events: none;
+          }
+
+          .mc-clip,
+          .mc-shell,
+          .mc-scene {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+          }
+
+          .mc-scene {
+            display: grid;
+            place-items: center;
+          }
+
+          .mc-scene-a {
+            background: radial-gradient(circle at 50% 50%, #182032 0%, #0b0f18 68%);
+          }
+
+          .mc-scene-b {
+            background: radial-gradient(circle at 50% 44%, #202b42 0%, #0d121d 72%);
+            opacity: 0;
+          }
+
+          /* Both actors share this one geometry owner. At the cut, each is
+             centered at scale 1, so their painted circles match exactly. */
+          .mc-circle {
+            display: grid;
+            place-items: center;
+            width: 32cqmin;
+            aspect-ratio: 1;
+            border-radius: 50%;
+            background: var(--mc-accent, #4ade80);
+            box-shadow: 0 3.2cqh 8cqh color-mix(in srgb, var(--mc-accent, #4ade80) 30%, transparent);
+            transform-origin: 50% 50%;
+            will-change: transform;
+          }
+
+          .mc-label-a {
+            display: block;
+            max-width: 78%;
+            overflow: hidden;
+            color: #081018;
+            font-size: 5.2cqmin;
+            font-weight: 780;
+            letter-spacing: -0.035em;
+            line-height: 1;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          .mc-circle-b {
+            color: #081018;
+          }
+
+          .mc-check {
+            width: 34%;
+            height: 22%;
+            border-left: 2.4cqmin solid currentColor;
+            border-bottom: 2.4cqmin solid currentColor;
+            transform: translateY(-8%) rotate(-45deg);
+          }
+
+          .mc-copy-b {
+            position: absolute;
+            top: 69%;
+            left: 12cqw;
+            right: 12cqw;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 1.6cqh;
+            text-align: center;
+          }
+
+          .mc-kicker,
+          .mc-label-b {
+            opacity: 0;
+          }
+
+          .mc-kicker {
+            color: color-mix(in srgb, var(--mc-accent, #4ade80) 76%, #f8fafc);
+            font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+            font-size: 2.1cqmin;
+            font-weight: 700;
+            letter-spacing: 0.18em;
+            text-transform: uppercase;
+          }
+
+          .mc-label-b {
+            display: block;
+            max-width: 74cqw;
+            overflow: hidden;
+            color: #f8fafc;
+            font-size: 6.8cqmin;
+            font-weight: 760;
+            letter-spacing: -0.04em;
+            line-height: 1.05;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+        </style>
+
+        <div
+          id="match-cut-clip"
+          class="mc-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="mc-shell">
+            <section class="mc-scene mc-scene-a" aria-label="Outgoing scene">
+              <div class="mc-circle mc-circle-a">
+                <span class="mc-label-a"></span>
+              </div>
+            </section>
+
+            <section class="mc-scene mc-scene-b" aria-label="Incoming scene">
+              <div class="mc-circle mc-circle-b" aria-hidden="true">
+                <span class="mc-check"></span>
+              </div>
+              <div class="mc-copy-b">
+                <span class="mc-kicker">Match complete</span>
+                <span class="mc-label-b"></span>
+              </div>
+            </section>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var shell = root.querySelector(".mc-shell");
+            var sceneA = root.querySelector(".mc-scene-a");
+            var sceneB = root.querySelector(".mc-scene-b");
+            var circleA = root.querySelector(".mc-circle-a");
+            var circleB = root.querySelector(".mc-circle-b");
+            var labelA = root.querySelector(".mc-label-a");
+            var labelB = root.querySelector(".mc-label-b");
+            var revealB = root.querySelectorAll(".mc-kicker, .mc-label-b");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var accentName =
+              vars.accent === "blue" || vars.accent === "violet" ? vars.accent : "green";
+            var accents = { green: "#4ade80", blue: "#60a5fa", violet: "#a78bfa" };
+            var labelAText = vars.label_a == null ? "Start" : String(vars.label_a);
+            var labelBText = vars.label_b == null ? "Done" : String(vars.label_b);
+
+            root.style.setProperty("--mc-accent", accents[accentName]);
+            labelA.textContent = labelAText;
+            labelB.textContent = labelBText;
+
+            var IN_BASE = 2.35;
+            var OUT_BASE = 0.5;
+            var CUT_AT_BASE = 1.4;
+            var A_APPROACH_BASE = 0.45;
+            var B_SETTLE_BASE = 0.65;
+            var COPY_DELAY_BASE = 0.1;
+            var COPY_IN_BASE = 0.55;
+
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var envelopeBase = IN_BASE + OUT_BASE;
+            var phaseScale = duration < envelopeBase ? duration / envelopeBase : 1;
+            var IN = IN_BASE * phaseScale;
+            var OUT = OUT_BASE * phaseScale;
+            var CUT_AT = CUT_AT_BASE * phaseScale;
+            var A_APPROACH = A_APPROACH_BASE * phaseScale;
+            var B_SETTLE = B_SETTLE_BASE * phaseScale;
+            var COPY_DELAY = COPY_DELAY_BASE * phaseScale;
+            var COPY_IN = COPY_IN_BASE * phaseScale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var HOLD_START = IN;
+            var OUT_START = IN + HOLD;
+
+            var tl = gsap.timeline({ paused: true });
+
+            tl.set(shell, { opacity: 0 }, 0);
+            tl.set(sceneA, { opacity: 1 }, 0);
+            tl.set(sceneB, { opacity: 0 }, 0);
+            tl.set(circleA, { scale: 0.54 }, 0);
+            tl.set(circleB, { scale: 1, y: 0 }, 0);
+            tl.set(revealB, { opacity: 0, y: "2.4cqh" }, 0);
+
+            tl.to(shell, { opacity: 1, duration: Math.min(0.3, IN), ease: "power2.out" }, 0);
+            tl.to(circleA, { scale: 0.64, duration: A_APPROACH, ease: "power3.out" }, 0);
+            tl.to(
+              circleA,
+              {
+                scale: 1,
+                duration: Math.max(0, CUT_AT - A_APPROACH),
+                ease: "power4.in",
+              },
+              A_APPROACH,
+            );
+
+            // HARD CUT: both opacity states change at the exact same instant.
+            tl.set(sceneA, { opacity: 0 }, CUT_AT);
+            tl.set(sceneB, { opacity: 1 }, CUT_AT);
+
+            // Scene B starts at the matching geometry and leaves the cut at
+            // peak speed, then decelerates into its smaller resting pose.
+            tl.to(circleB, { scale: 0.74, duration: B_SETTLE, ease: "power4.out" }, CUT_AT);
+            tl.to(
+              revealB,
+              {
+                opacity: 1,
+                y: 0,
+                duration: COPY_IN,
+                stagger: 0.08 * phaseScale,
+                ease: "power3.out",
+              },
+              CUT_AT + COPY_DELAY,
+            );
+
+            if (HOLD > 0) {
+              tl.to(
+                circleB,
+                {
+                  y: "-0.8cqh",
+                  duration: HOLD / 2,
+                  ease: "sine.inOut",
+                  yoyo: true,
+                  repeat: 1,
+                },
+                HOLD_START,
+              );
+            }
+
+            tl.to(shell, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["match-cut"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add match-cut" />
+
+That writes one file: `compositions/components/match-cut.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/match-cut.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `transition` `match-cut` `hard-cut` `continuity`.
+
+## 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/components/matrix-decode.mdx b/docs/catalog/components/matrix-decode.mdx
new file mode 100644
index 0000000000..c6aaf15d03
--- /dev/null
+++ b/docs/catalog/components/matrix-decode.mdx
@@ -0,0 +1,167 @@
+---
+title: "Matrix Decode"
+description: "Random scramble resolves left-to-right into the target text."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/matrix-decode.html"
+  compositionId="matrix-decode"
+  compositionSrc="compositions/components/matrix-decode.html"
+  variables={[{"id":"text","type":"string","role":"content","label":"Target text","description":"Word the scramble resolves into. One scrambling cell per character, up to 32.","default":"HYPERFRAMES"},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Colour family of the cells and their glow.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"size","type":"number","role":"style","label":"Size","description":"Type size of the cells in pixels. Cell width follows it.","default":64,"min":24,"max":160,"step":4,"unit":"px"},{"id":"glow","type":"enum","role":"style","label":"Glow","description":"Strength of the halo behind the cells, from none to a heavy bloom.","default":"standard","options":[{"value":"none","label":"None"},{"value":"standard","label":"Standard"},{"value":"strong","label":"Strong"}]}]}
+>
+
+```html matrix-decode.html
+<!--
+  Matrix Decode - remocn typography primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Drive the timeline
+  integration from a paused GSAP timeline so renders remain deterministic.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or invalid, and writes the result as a custom property the
+  CSS consumes (or, for the target text, as the cells themselves). The timeline
+  recipe below is untouched by them: it keeps staggering whatever cells are
+  present.
+
+    - text (text, default HYPERFRAMES): the word the scramble resolves into.
+      One scrambling cell per character, up to 32. Also written to data-final,
+      which a decode routine can read.
+    - accent (green | blue | violet, default green): colour family of the cells
+      and of their glow.
+    - size (24 to 160 px, default 64): type size of the cells. The per-cell
+      minimum width is a fixed fraction of it, so the row scales as a whole.
+    - glow (none | standard | strong, default standard): halo strength behind
+      the cells, from no shadow at all to a heavy bloom.
+
+  On every default the result is identical to the original: eleven 64px green
+  cells with an 18px halo.
+-->
+
+<div
+  class="hf-remocn-matrix-decode"
+  data-final="HYPERFRAMES"
+  data-composition-variables='[
+    { "id": "text", "type": "string", "role": "content", "label": "Target text", "description": "Word the scramble resolves into. One scrambling cell per character, up to 32.", "default": "HYPERFRAMES" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Colour family of the cells and their glow.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "size", "type": "number", "role": "style", "label": "Size", "description": "Type size of the cells in pixels. Cell width follows it.", "default": 64, "min": 24, "max": 160, "step": 4, "unit": "px" },
+    { "id": "glow", "type": "enum", "role": "style", "label": "Glow", "description": "Strength of the halo behind the cells, from none to a heavy bloom.", "default": "standard", "options": [{ "value": "none", "label": "None" }, { "value": "standard", "label": "Standard" }, { "value": "strong", "label": "Strong" }] }
+  ]'
+>
+  <span>0</span><span>0</span><span>0</span><span>0</span><span>0</span><span>0</span><span>0</span
+  ><span>0</span><span>0</span><span>0</span><span>0</span>
+</div>
+
+<style>
+  .hf-remocn-matrix-decode {
+    color: #18181b;
+    font-family: Inter, system-ui, sans-serif;
+    font-weight: 900;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-matrix-decode {
+    display: inline-flex;
+    gap: 3px;
+    font:
+      900 64px/1 ui-monospace,
+      SFMono-Regular,
+      Menlo,
+      monospace;
+    font-size: var(--hf-matrix-size, 64px);
+    color: var(--hf-matrix-color, #16a34a);
+    text-shadow: 0 0 var(--hf-matrix-glow-radius, 18px)
+      rgba(var(--hf-matrix-glow-rgb, 22, 163, 74), var(--hf-matrix-glow-alpha, 0.28));
+  }
+  .hf-remocn-matrix-decode span {
+    display: inline-block;
+    min-width: 0.64em;
+    opacity: var(--hf-matrix-opacity, 1);
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Anything missing or invalid returns to its declared default.
+    var accents = {
+      green: { color: "#16a34a", rgb: "22, 163, 74" },
+      blue: { color: "#2563eb", rgb: "37, 99, 235" },
+      violet: { color: "#7c3aed", rgb: "124, 58, 237" },
+    };
+    var glows = {
+      none: { radius: "0px", alpha: "0" },
+      standard: { radius: "18px", alpha: "0.28" },
+      strong: { radius: "34px", alpha: "0.55" },
+    };
+
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var text = typeof vars.text === "string" ? vars.text.trim().slice(0, 32) : "";
+    if (!text) {
+      text = "HYPERFRAMES";
+    }
+
+    var size =
+      typeof vars.size === "number" || typeof vars.size === "string" ? Number(vars.size) : NaN;
+    size = isFinite(size) && size > 0 ? Math.min(160, Math.max(24, size)) : 64;
+
+    var accent = accents[pick(accents, vars.accent, "green")];
+    var glow = glows[pick(glows, vars.glow, "standard")];
+
+    var roots = document.querySelectorAll(".hf-remocn-matrix-decode");
+    for (var i = 0; i < roots.length; i += 1) {
+      roots[i].style.setProperty("--hf-matrix-size", size + "px");
+      roots[i].style.setProperty("--hf-matrix-color", accent.color);
+      roots[i].style.setProperty("--hf-matrix-glow-rgb", accent.rgb);
+      roots[i].style.setProperty("--hf-matrix-glow-radius", glow.radius);
+      roots[i].style.setProperty("--hf-matrix-glow-alpha", glow.alpha);
+      roots[i].setAttribute("data-final", text);
+      while (roots[i].firstChild) {
+        roots[i].removeChild(roots[i].firstChild);
+      }
+      for (var j = 0; j < text.length; j += 1) {
+        var cell = document.createElement("span");
+        cell.textContent = text.charAt(j) === " " ? "\u00a0" : "0";
+        roots[i].appendChild(cell);
+      }
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-matrix-decode span', { opacity: 0, y: 12 }, { opacity: 1, y: 0, duration: 0.18, stagger: 0.035, ease: 'power2.out' }, startTime);
+-->
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add matrix-decode" />
+
+That writes one file: `compositions/components/matrix-decode.html`.
+
+## Usage
+
+Open `compositions/components/matrix-decode.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `remocn-port` `typography`.
+
+## 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/components/menu-morph.mdx b/docs/catalog/components/menu-morph.mdx
new file mode 100644
index 0000000000..89b53d981c
--- /dev/null
+++ b/docs/catalog/components/menu-morph.mdx
@@ -0,0 +1,200 @@
+---
+title: "Menu Morph"
+description: "A transitions.dev-inspired hamburger and plus-menu morph primitive for compact action menus"
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/menu-morph.html"
+  compositionId="menu-morph"
+  compositionSrc="compositions/components/menu-morph.html"
+  variables={[{"id":"actions","type":"string","role":"content","label":"Actions","description":"Comma separated labels for the pills that fan out under the button. Up to six.","default":"Text, Image, Audio"},{"id":"tone","type":"enum","role":"style","label":"Tone","description":"Colour of the round button behind the white bars.","default":"ink","options":[{"value":"ink","label":"Ink"},{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"size","type":"number","role":"layout","label":"Button size","description":"Diameter of the round button in pixels. The bars scale with it.","default":68,"min":52,"max":112,"step":4,"unit":"px"}]}
+>
+
+```html menu-morph.html
+<!--
+  Menu Morph - transitions.dev-inspired primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Use the timeline
+  integration note at the bottom as the starting point for deterministic GSAP
+  animation.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or invalid, and writes the result as a custom property the
+  CSS consumes (or, for the actions, as the pills themselves). The timeline
+  recipe below is untouched by them: it still pops the button, crosses the two
+  outer bars and staggers whatever pills are present.
+
+    - actions (text, default Text, Image, Audio): comma separated labels for
+      the pills that fan out under the button, up to six. The stagger picks up
+      the new count.
+    - tone (ink | green | blue | violet, default ink): colour of the round
+      button behind the white bars. ink is a literal near-black; the other three
+      ride the composition's own brand, accent and accent-2 tokens and fall back
+      to that same ink when the composition declares none.
+    - size (52 to 112 px, default 68): diameter of the round button. The bar
+      width is a fixed fraction of it, so the whole glyph scales together.
+
+  On every default the result is identical to the original: a 68px near-black
+  button with 24px bars over three pills.
+-->
+
+<div
+  class="hf-transition-menu-morph"
+  data-composition-variables='[
+    { "id": "actions", "type": "string", "role": "content", "label": "Actions", "description": "Comma separated labels for the pills that fan out under the button. Up to six.", "default": "Text, Image, Audio" },
+    { "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Colour of the round button behind the white bars.", "default": "ink", "options": [{ "value": "ink", "label": "Ink" }, { "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "size", "type": "number", "role": "layout", "label": "Button size", "description": "Diameter of the round button in pixels. The bars scale with it.", "default": 68, "min": 52, "max": 112, "step": 4, "unit": "px" }
+  ]'
+>
+  <button class="hf-transition-menu-button" type="button" aria-label="Menu">
+    <span></span><span></span><span></span>
+  </button>
+  <div class="hf-transition-menu-actions">
+    <div>Text</div>
+    <div>Image</div>
+    <div>Audio</div>
+  </div>
+</div>
+
+<style>
+  .hf-transition-menu-morph {
+    position: relative;
+    display: grid;
+    place-items: center;
+    width: 360px;
+    height: 220px;
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-transition-menu-button {
+    z-index: 2;
+    display: grid;
+    place-items: center;
+    gap: 5px;
+    width: var(--hf-menu-size, 68px);
+    height: var(--hf-menu-size, 68px);
+    border: 0;
+    border-radius: 999px;
+    background: var(--hf-menu-bg, #18181b);
+    box-shadow: 0 22px 58px rgba(0, 0, 0, 0.22);
+  }
+  .hf-transition-menu-button span {
+    width: calc(var(--hf-menu-size, 68px) * 6 / 17);
+    height: 3px;
+    border-radius: 999px;
+    background: #ffffff;
+    transform-origin: center;
+  }
+  .hf-transition-menu-actions {
+    position: absolute;
+    display: flex;
+    gap: 10px;
+    bottom: 20px;
+  }
+  .hf-transition-menu-actions div {
+    padding: 9px 13px;
+    border-radius: 999px;
+    background: #ffffff;
+    color: #18181b;
+    font-size: 13px;
+    font-weight: 850;
+    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.12);
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Anything missing or invalid returns to its declared default.
+    // The button is the one accent-carrying element here, so the three
+    // chromatic options ride the composition's own tokens and fall back to ink.
+    var tones = {
+      ink: "#18181b",
+      green: "var(--brand, #18181b)",
+      blue: "var(--accent, #18181b)",
+      violet: "var(--accent-2, #18181b)",
+    };
+
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var labels = [];
+    if (typeof vars.actions === "string") {
+      var parts = vars.actions.split(",");
+      for (var p = 0; p < parts.length && labels.length < 6; p += 1) {
+        var label = parts[p].trim();
+        if (label) {
+          labels.push(label);
+        }
+      }
+    }
+    if (!labels.length) {
+      labels = ["Text", "Image", "Audio"];
+    }
+
+    var size =
+      typeof vars.size === "number" || typeof vars.size === "string" ? Number(vars.size) : NaN;
+    size = isFinite(size) && size > 0 ? Math.min(112, Math.max(52, size)) : 68;
+
+    var tone = tones[pick(tones, vars.tone, "ink")];
+
+    var roots = document.querySelectorAll(".hf-transition-menu-morph");
+    for (var i = 0; i < roots.length; i += 1) {
+      roots[i].style.setProperty("--hf-menu-size", size + "px");
+      roots[i].style.setProperty("--hf-menu-bg", tone);
+      var row = roots[i].querySelector(".hf-transition-menu-actions");
+      if (!row) {
+        continue;
+      }
+      while (row.firstChild) {
+        row.removeChild(row.firstChild);
+      }
+      for (var j = 0; j < labels.length; j += 1) {
+        var pill = document.createElement("div");
+        pill.textContent = labels[j];
+        row.appendChild(pill);
+      }
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-transition-menu-button', { scale: 0.72, opacity: 0 }, { scale: 1, opacity: 1, duration: 0.34, ease: 'back.out(1.8)' }, 0.3);
+  tl.to('.hf-transition-menu-button span:nth-child(1)', { y: 8, rotation: 45, duration: 0.24, ease: 'power2.inOut' }, 0.78);
+  tl.to('.hf-transition-menu-button span:nth-child(2)', { opacity: 0, duration: 0.18, ease: 'power1.out' }, 0.78);
+  tl.to('.hf-transition-menu-button span:nth-child(3)', { y: -8, rotation: -45, duration: 0.24, ease: 'power2.inOut' }, 0.78);
+  tl.fromTo('.hf-transition-menu-actions div', { y: 28, opacity: 0, scale: 0.86 }, { y: 0, opacity: 1, scale: 1, duration: 0.26, stagger: 0.06, ease: 'back.out(1.6)' }, 0.96);
+-->
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add menu-morph" />
+
+That writes one file: `compositions/components/menu-morph.html`.
+
+## Usage
+
+Open `compositions/components/menu-morph.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+
+{/* hf:generated-footer */}
+
+Tagged `video-primitive` `transition-primitive` `transitions-dev-port` `menu` `morph`.
+
+## 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/components/mesh-gradient-bg.mdx b/docs/catalog/components/mesh-gradient-bg.mdx
new file mode 100644
index 0000000000..f90bd383e6
--- /dev/null
+++ b/docs/catalog/components/mesh-gradient-bg.mdx
@@ -0,0 +1,138 @@
+---
+title: "Mesh Gradient Background"
+description: "A render-safe mesh gradient using animated radial layers."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/components/mesh-gradient-bg.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Mesh Gradient Background preview" />
+
+## Install
+
+<InstallCommand command="npx hyperframes add mesh-gradient-bg" />
+
+That writes one file: `compositions/components/mesh-gradient-bg.html`.
+
+## Source
+
+<Accordion title={`mesh-gradient-bg.html`}>
+
+```html
+<!--
+  Mesh Gradient Background - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-mesh-gradient-bg">
+  <div class="mesh"></div>
+  <div class="card">
+    <div class="spot"></div>
+    <div>
+      <h3>Mesh Gradient Background</h3>
+      <p>A render-safe mesh gradient using animated radial layers.</p>
+    </div>
+  </div>
+</div>
+
+<style>
+  .hf-remocn-mesh-gradient-bg {
+    --hf-accent: #2563eb;
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-mesh-gradient-bg {
+    position: relative;
+    width: 760px;
+    height: 428px;
+    overflow: hidden;
+    border-radius: 30px;
+    background: #080b12;
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+  }
+  .hf-remocn-mesh-gradient-bg .mesh {
+    position: absolute;
+    inset: -22%;
+    filter: blur(44px);
+    opacity: 0.88;
+    background:
+      radial-gradient(
+        circle at var(--hf-x1, 20%) var(--hf-y1, 30%),
+        #60a5fa 0 18%,
+        transparent 32%
+      ),
+      radial-gradient(
+        circle at var(--hf-x2, 76%) var(--hf-y2, 52%),
+        #f472b6 0 16%,
+        transparent 34%
+      ),
+      radial-gradient(circle at var(--hf-x3, 46%) var(--hf-y3, 78%), #34d399 0 18%, transparent 34%);
+  }
+  .hf-remocn-mesh-gradient-bg .card {
+    position: absolute;
+    inset: 74px 92px;
+    border: 1px solid rgba(255, 255, 255, 0.16);
+    border-radius: 26px;
+    background: rgba(255, 255, 255, 0.08);
+    color: #fff;
+    display: grid;
+    place-items: center;
+    text-align: center;
+    overflow: hidden;
+  }
+  .hf-remocn-mesh-gradient-bg .spot {
+    position: absolute;
+    width: 260px;
+    height: 260px;
+    border-radius: 50%;
+    background: radial-gradient(circle, rgba(255, 255, 255, 0.5), transparent 65%);
+    transform: translate(var(--hf-spot-x, 0px), var(--hf-spot-y, 0px));
+    mix-blend-mode: screen;
+  }
+  .hf-remocn-mesh-gradient-bg .particle {
+    position: absolute;
+    left: 50%;
+    top: 54%;
+    width: 12px;
+    height: 20px;
+    border-radius: 3px;
+    background: var(--c);
+    transform: translate(var(--hf-px, 0px), var(--hf-py, 0px)) rotate(var(--hf-pr, 0deg));
+    opacity: var(--hf-po, 0);
+  }
+  .hf-remocn-mesh-gradient-bg h3 {
+    margin: 0;
+    font-size: 44px;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-mesh-gradient-bg p {
+    margin: 8px 0 0;
+    color: rgba(255, 255, 255, 0.7);
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-mesh-gradient-bg .mesh', { '--hf-x1': '18%', '--hf-y1': '28%', '--hf-x2': '78%', '--hf-y2': '46%', '--hf-x3': '44%', '--hf-y3': '80%' }, { '--hf-x1': '34%', '--hf-y1': '42%', '--hf-x2': '62%', '--hf-y2': '60%', '--hf-x3': '58%', '--hf-y3': '64%', duration: 4, ease: 'sine.inOut' }, startTime); tl.fromTo('.hf-remocn-mesh-gradient-bg .spot', { '--hf-spot-x': '-120px', '--hf-spot-y': '-70px' }, { '--hf-spot-x': '190px', '--hf-spot-y': '90px', duration: 3, ease: 'sine.inOut' }, startTime); const particles_mesh_gradient_bg = gsap.utils.toArray('.hf-remocn-mesh-gradient-bg .particle'); if (particles_mesh_gradient_bg.length) { tl.fromTo(particles_mesh_gradient_bg, { '--hf-po': 0, '--hf-px': '0px', '--hf-py': '0px', '--hf-pr': '0deg' }, { '--hf-po': 1, '--hf-px': (i) => (Math.cos(i * 0.83) * 250) + 'px', '--hf-py': (i) => (-120 - Math.sin(i * 0.61) * 120) + 'px', '--hf-pr': (i) => (180 + i * 37) + 'deg', duration: 0.8, stagger: 0.015, ease: 'power2.out' }, startTime + 0.2); }
+-->
+```
+
+</Accordion>
+
+## Usage
+
+Open `compositions/components/mesh-gradient-bg.html` and paste its contents into your composition. See the comment header in the file for timeline integration guidance.
+
+{/* hf:generated-footer */}
+
+Tagged `effect` `remocn-port`.
+
+## 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/components/micro-transitions.mdx b/docs/catalog/components/micro-transitions.mdx
new file mode 100644
index 0000000000..b31f5a1996
--- /dev/null
+++ b/docs/catalog/components/micro-transitions.mdx
@@ -0,0 +1,303 @@
+---
+title: "Micro Transitions"
+description: "A transitions.dev-inspired pack of badge, dropdown, modal, tabs, tooltip, and success-check micro transitions"
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/micro-transitions.html"
+  compositionId="micro-transitions"
+  compositionSrc="compositions/components/micro-transitions.html"
+  variables={[{"id":"badge","type":"string","role":"content","label":"Badge","description":"Count inside the notification badge on the bell.","default":"3"},{"id":"tooltip","type":"string","role":"content","label":"Tooltip","description":"Wording inside the small dark tooltip.","default":"Copied"},{"id":"tone","type":"enum","role":"style","label":"Badge tone","description":"Colour of the notification badge chip.","default":"red","options":[{"value":"red","label":"Red"},{"value":"amber","label":"Amber"},{"value":"violet","label":"Violet"}]},{"id":"travel","type":"enum","role":"motion","label":"Travel","description":"Scales how far every panel starts from its resting place before it settles.","default":"standard","options":[{"value":"close","label":"Close"},{"value":"standard","label":"Standard"},{"value":"far","label":"Far"}]}]}
+>
+
+```html micro-transitions.html
+<!--
+  Micro Transitions - transitions.dev-inspired UI motion pack for HyperFrames.
+
+  Includes six app-transition patterns in one copy-paste snippet:
+    badge pop, dropdown reveal, modal open, tab indicator, tooltip appear,
+    and success check draw.
+
+  Animate --hf-micro-progress from 0 to 1, then optionally animate
+  --hf-micro-tab from 0 to 1 for the segmented control.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes either the panel wording or a
+  custom property the CSS below consumes. The two progress drivers above are
+  untouched by them.
+
+    - badge (any short text, default 3): the count inside the red chip on the
+      bell. Blank or non-text input falls back to the default.
+    - tooltip (any short text, default Copied): wording inside the small dark
+      tooltip.
+    - tone (red | amber | violet, default red): colour of that badge chip, the
+      one accent-carrying element in the pack. red and amber are literal alert
+      conventions; violet rides the composition's own accent-2 token and falls
+      back to ink when the composition declares none.
+    - travel (close | standard | far, default standard): scales how far every
+      panel starts from its resting place, so the whole pack drifts half as far
+      or nearly twice as far into position over the same progress run. At full
+      progress each panel lands in exactly the same place.
+
+  On every default the result is identical to the original: a red 3 on the
+  bell, a Copied tooltip, and panels that rise between 6px and 18px.
+-->
+
+<div
+  class="hf-micro-transitions"
+  style="--hf-micro-progress: 0; --hf-micro-tab: 0"
+  data-composition-variables='[
+    {"id": "badge", "type": "string", "role": "content", "label": "Badge", "description": "Count inside the notification badge on the bell.", "default": "3"},
+    {"id": "tooltip", "type": "string", "role": "content", "label": "Tooltip", "description": "Wording inside the small dark tooltip.", "default": "Copied"},
+    {"id": "tone", "type": "enum", "role": "style", "label": "Badge tone", "description": "Colour of the notification badge chip.", "default": "red", "options": [{"value": "red", "label": "Red"}, {"value": "amber", "label": "Amber"}, {"value": "violet", "label": "Violet"}]},
+    {"id": "travel", "type": "enum", "role": "motion", "label": "Travel", "description": "Scales how far every panel starts from its resting place before it settles.", "default": "standard", "options": [{"value": "close", "label": "Close"}, {"value": "standard", "label": "Standard"}, {"value": "far", "label": "Far"}]}
+  ]'
+>
+  <div class="hf-micro-bell"><span>3</span></div>
+  <div class="hf-micro-dropdown">
+    <strong>Actions</strong>
+    <p>Export, duplicate, archive</p>
+  </div>
+  <div class="hf-micro-modal">
+    <strong>Ready to publish?</strong><span>All checks passed.</span>
+  </div>
+  <div class="hf-micro-tabs"><i></i><b>Draft</b><b>Live</b></div>
+  <div class="hf-micro-tooltip">Copied</div>
+  <svg class="hf-micro-check" viewBox="0 0 48 48" aria-hidden="true">
+    <path d="M12 25l8 8 17-19" />
+  </svg>
+</div>
+
+<style>
+  .hf-micro-transitions {
+    --hf-micro-progress: 0;
+    --hf-micro-tab: 0;
+    position: relative;
+    width: min(640px, 100%);
+    height: 360px;
+    font-family: Inter, system-ui, sans-serif;
+    color: #18181b;
+  }
+  .hf-micro-bell,
+  .hf-micro-dropdown,
+  .hf-micro-modal,
+  .hf-micro-tabs,
+  .hf-micro-tooltip,
+  .hf-micro-check {
+    position: absolute;
+    will-change: transform, opacity;
+  }
+  .hf-micro-bell {
+    top: 18px;
+    left: 28px;
+    width: 54px;
+    height: 54px;
+    border-radius: 18px;
+    background: #18181b;
+    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
+  }
+  .hf-micro-bell::before {
+    content: "";
+    position: absolute;
+    inset: 15px 17px 13px;
+    border: 2px solid #fff;
+    border-radius: 12px 12px 9px 9px;
+  }
+  .hf-micro-bell span {
+    position: absolute;
+    top: -8px;
+    right: -8px;
+    min-width: 24px;
+    height: 24px;
+    display: grid;
+    place-items: center;
+    border: 3px solid #fff;
+    border-radius: 999px;
+    background: var(--hf-micro-badge, #ef4444);
+    color: #fff;
+    font-size: 12px;
+    font-weight: 850;
+    opacity: var(--hf-micro-progress);
+    transform: translate(
+        calc((1 - var(--hf-micro-progress)) * -7px * var(--hf-micro-travel, 1)),
+        calc((1 - var(--hf-micro-progress)) * 10px * var(--hf-micro-travel, 1))
+      )
+      scale(calc(0.25 + var(--hf-micro-progress) * 0.75));
+  }
+  .hf-micro-dropdown {
+    top: 92px;
+    left: 28px;
+    width: 210px;
+    padding: 18px;
+    border: 1px solid #e4e4e7;
+    border-radius: 18px;
+    background: #fff;
+    opacity: var(--hf-micro-progress);
+    transform: translateY(calc((1 - var(--hf-micro-progress)) * -12px * var(--hf-micro-travel, 1)))
+      scale(calc(0.95 + var(--hf-micro-progress) * 0.05));
+    transform-origin: top left;
+    box-shadow: 0 24px 65px rgba(0, 0, 0, 0.16);
+  }
+  .hf-micro-dropdown strong,
+  .hf-micro-modal strong {
+    display: block;
+    font-size: 16px;
+  }
+  .hf-micro-dropdown p,
+  .hf-micro-modal span {
+    display: block;
+    margin: 8px 0 0;
+    color: #71717a;
+    font-size: 13px;
+    line-height: 1.4;
+  }
+  .hf-micro-modal {
+    top: 48px;
+    right: 34px;
+    width: 260px;
+    padding: 22px;
+    border: 1px solid #e4e4e7;
+    border-radius: 22px;
+    background: #fff;
+    opacity: var(--hf-micro-progress);
+    transform: translateY(calc((1 - var(--hf-micro-progress)) * 18px * var(--hf-micro-travel, 1)))
+      scale(calc(0.96 + var(--hf-micro-progress) * 0.04));
+    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.2);
+  }
+  .hf-micro-tabs {
+    left: 260px;
+    bottom: 46px;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 4px;
+    width: 210px;
+    padding: 4px;
+    border-radius: 14px;
+    background: #f4f4f5;
+    opacity: var(--hf-micro-progress);
+    transform: translateY(calc((1 - var(--hf-micro-progress)) * 14px * var(--hf-micro-travel, 1)));
+  }
+  .hf-micro-tabs i {
+    position: absolute;
+    top: 4px;
+    left: 4px;
+    width: calc((100% - 8px) / 2);
+    height: calc(100% - 8px);
+    border-radius: 11px;
+    background: #fff;
+    transform: translateX(calc(var(--hf-micro-tab) * 100%));
+    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
+  }
+  .hf-micro-tabs b {
+    position: relative;
+    z-index: 1;
+    display: grid;
+    place-items: center;
+    height: 38px;
+    color: #52525b;
+    font-size: 13px;
+  }
+  .hf-micro-tooltip {
+    right: 54px;
+    bottom: 48px;
+    padding: 8px 11px;
+    border-radius: 10px;
+    background: #18181b;
+    color: #fff;
+    font-size: 12px;
+    font-weight: 750;
+    opacity: var(--hf-micro-progress);
+    transform: translateY(calc((1 - var(--hf-micro-progress)) * 6px * var(--hf-micro-travel, 1)))
+      scale(calc(0.96 + var(--hf-micro-progress) * 0.04));
+  }
+  .hf-micro-check {
+    right: 116px;
+    bottom: 92px;
+    width: 48px;
+    height: 48px;
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 5;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    opacity: var(--hf-micro-progress);
+  }
+  .hf-micro-check path {
+    stroke-dasharray: 42;
+    stroke-dashoffset: calc((1 - var(--hf-micro-progress)) * 42);
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    function text(value, fallback) {
+      return typeof value === "string" && value.trim() !== "" ? value.trim() : fallback;
+    }
+
+    // The badge is the pack's one accent-carrying element. red and amber are
+    // literal alert conventions; violet rides the composition's own token and
+    // falls back to ink.
+    var tones = { red: "#ef4444", amber: "#f59e0b", violet: "var(--accent-2, #18181b)" };
+    var travels = { close: 0.5, standard: 1, far: 1.9 };
+
+    var tone = tones[pick(tones, vars.tone, "red")];
+    var travel = travels[pick(travels, vars.travel, "standard")];
+    var badgeText = text(vars.badge, "3");
+    var tooltipText = text(vars.tooltip, "Copied");
+
+    var roots = document.querySelectorAll(".hf-micro-transitions");
+    for (var i = 0; i < roots.length; i += 1) {
+      var root = roots[i];
+      root.style.setProperty("--hf-micro-badge", tone);
+      root.style.setProperty("--hf-micro-travel", String(travel));
+      var badge = root.querySelector(".hf-micro-bell span");
+      var tooltip = root.querySelector(".hf-micro-tooltip");
+      if (badge) badge.textContent = badgeText;
+      if (tooltip) tooltip.textContent = tooltipText;
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.to('.hf-micro-transitions', { '--hf-micro-progress': 1, duration: 0.5, ease: 'power3.out' }, startTime);
+  tl.to('.hf-micro-transitions', { '--hf-micro-tab': 1, duration: 0.35, ease: 'power3.out' }, startTime + 0.55);
+-->
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add micro-transitions" />
+
+That writes one file: `compositions/components/micro-transitions.html`.
+
+## Usage
+
+Open `compositions/components/micro-transitions.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+
+{/* hf:generated-footer */}
+
+Tagged `transition-primitive` `motion-primitive` `transitions-dev-port` `ui` `transition` `microinteraction`.
+
+## 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/components/mk-emphasis-type.mdx b/docs/catalog/components/mk-emphasis-type.mdx
index c5561ebd8a..f4985a88fd 100644
--- a/docs/catalog/components/mk-emphasis-type.mdx
+++ b/docs/catalog/components/mk-emphasis-type.mdx
@@ -3,13 +3,13 @@ title: "Background Emphasis Type"
 description: "Oversized low-contrast background word drifting slowly behind the subject — typography as texture"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/mk-emphasis-type.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/mk-emphasis-type.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/components/mk-emphasis-type.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Background Emphasis Type preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add mk-emphasis-type
-```
+<InstallCommand command="npx hyperframes add mk-emphasis-type" />
 
 That writes one file: `compositions/components/mk-emphasis-type.html`.
 
@@ -20,6 +20,112 @@ Open `compositions/components/mk-emphasis-type.html` and copy what is inside int
 A component has no size or duration of its own. It takes both from the composition
 you paste it into.
 
+## Source
+
+<Accordion title={`mk-emphasis-type.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      /* ---- mk-emphasis-type ------------------------------------------------
+         Oversized low-contrast background word sliding slowly behind the
+         subject (the promo's "EMPHASIS" texture type). Decorative only —
+         keep it behind real content and mark it aria-hidden. */
+      .mk-emphasis {
+        --mk-font: "Inter", -apple-system, sans-serif;
+        --mk-emph-color: rgba(29, 29, 31, 0.07); /* dark scheme: rgba(245,245,247,0.08) */
+
+        position: absolute;
+        font-family: var(--mk-font);
+        font-weight: 600;
+        font-size: 260px;
+        letter-spacing: -0.02em;
+        line-height: 1;
+        white-space: nowrap;
+        text-transform: uppercase;
+        color: var(--mk-emph-color);
+        pointer-events: none;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Self-preview wrapper. WIRING: copy the .mk-emphasis CSS, the markup
+         below (keep aria-hidden + data-layout-allow-overflow — the word is
+         decorative and usually wider than the canvas), and the helpers. -->
+    <div
+      id="mk-emph-root"
+      data-composition-id="mk-emphasis-type"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div
+        class="mk-emphasis"
+        id="mk-emph-demo"
+        aria-hidden="true"
+        data-layout-allow-overflow
+        style="top: 400px; left: -40px"
+      >
+        Emphasis
+      </div>
+      <div
+        id="mk-emph-drv"
+        class="clip"
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        // ---- copy these helpers into the host script, then:
+        //   mkEmphasisIn(tl, "#mk-my-word", 1.0, { drift: -120, hold: 6 });
+        //   mkEmphasisOut(tl, "#mk-my-word", 7.5);
+        window.mkEmphasisIn = function (tl, target, at, opts) {
+          opts = opts || {};
+          var drift = opts.drift === undefined ? -100 : opts.drift;
+          var hold = opts.hold === undefined ? 5 : opts.hold;
+          gsap.set(target, { opacity: 0, x: 40 });
+          tl.to(target, { opacity: 1, duration: 1.0, ease: "power2.out" }, at);
+          tl.to(target, { x: 40 + drift, duration: hold, ease: "sine.inOut" }, at);
+        };
+        window.mkEmphasisOut = function (tl, target, at) {
+          tl.to(target, { opacity: 0, duration: 0.5, ease: "power2.in" }, at);
+        };
+
+        // Self-preview timeline (not part of the snippet you copy).
+        var tl = gsap.timeline({ paused: true });
+        window.mkEmphasisIn(tl, "#mk-emph-demo", 0.3, { drift: -110, hold: 3.2 });
+        window.mkEmphasisOut(tl, "#mk-emph-demo", 3.4);
+        tl.set("#mk-emph-root", { visibility: "hidden" }, 3.98);
+        window.__timelines["mk-emphasis-type"] = tl;
+      })();
+    </script>
+  </body>
+</html>
+```
+
+</Accordion>
+
 {/* hf:generated-footer */}
 
 Tagged `typography` `text-treatment` `minimal`.
diff --git a/docs/catalog/components/mk-usage-arc.mdx b/docs/catalog/components/mk-usage-arc.mdx
index 340ed69214..3714277173 100644
--- a/docs/catalog/components/mk-usage-arc.mdx
+++ b/docs/catalog/components/mk-usage-arc.mdx
@@ -3,13 +3,13 @@ title: "Hairline Arc Gauge"
 description: "Thin circular gauge that draws on while its percentage counts up; one helper call drives both"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/mk-usage-arc.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/mk-usage-arc.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/components/mk-usage-arc.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Hairline Arc Gauge preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add mk-usage-arc
-```
+<InstallCommand command="npx hyperframes add mk-usage-arc" />
 
 That writes one file: `compositions/components/mk-usage-arc.html`.
 
@@ -20,6 +20,174 @@ Open `compositions/components/mk-usage-arc.html` and copy what is inside into yo
 A component has no size or duration of its own. It takes both from the composition
 you paste it into.
 
+## Source
+
+<Accordion title={`mk-usage-arc.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      /* ---- mk-usage-arc ----------------------------------------------------
+         Hairline circular gauge: draw-on arc + centered value + tiny label.
+         The promo's "Usage" arc. Recolor via --mk-arc-color. */
+      .mk-arc {
+        --mk-font: "Inter", -apple-system, sans-serif;
+        --mk-ink: #1d1d1f;
+        --mk-ink-dim: #6e6e73;
+        --mk-accent: #0071e3;
+        --mk-arc-color: var(--mk-accent);
+        --mk-hairline: 3px;
+
+        position: absolute;
+        width: 220px;
+        height: 220px;
+        pointer-events: none;
+      }
+      .mk-arc svg {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+      }
+      .mk-arc-track {
+        fill: none;
+        stroke: rgba(29, 29, 31, 0.1);
+        stroke-width: var(--mk-hairline);
+      }
+      .mk-arc-fill {
+        fill: none;
+        stroke: var(--mk-arc-color);
+        stroke-width: var(--mk-hairline);
+        stroke-linecap: round;
+      }
+      .mk-arc-center {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 4px;
+        font-family: var(--mk-font);
+      }
+      .mk-arc-num {
+        font-weight: 600;
+        font-size: 46px;
+        letter-spacing: -0.02em;
+        color: var(--mk-ink);
+        font-variant-numeric: tabular-nums;
+      }
+      .mk-arc-label {
+        font-weight: 500;
+        font-size: 20px;
+        color: var(--mk-ink);
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Self-preview wrapper. WIRING: copy the .mk-arc CSS, the markup below,
+         and the helpers into your host. r=92 with 220px box; the helper reads
+         the circle's radius, so resizing the box + r just works. -->
+    <div
+      id="mk-arc-root"
+      data-composition-id="mk-usage-arc"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="mk-arc" id="mk-arc-demo" style="top: 430px; left: 850px">
+        <svg viewBox="0 0 220 220">
+          <circle class="mk-arc-track" cx="110" cy="110" r="92"></circle>
+          <circle
+            class="mk-arc-fill"
+            cx="110"
+            cy="110"
+            r="92"
+            transform="rotate(-90 110 110)"
+          ></circle>
+        </svg>
+        <div class="mk-arc-center">
+          <span class="mk-arc-num">0%</span>
+          <span class="mk-arc-label">Usage</span>
+        </div>
+      </div>
+      <div
+        id="mk-arc-drv"
+        class="clip"
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        // ---- copy these helpers into the host script, then:
+        //   mkArcIn(tl, "#mk-my-arc", 1.0, 0.76);  // draw to 76%, count the numeral
+        //   mkArcOut(tl, "#mk-my-arc", 8.5);
+        window.mkArcIn = function (tl, target, at, value) {
+          var el = document.querySelector(target);
+          var fill = el.querySelector(".mk-arc-fill");
+          var num = el.querySelector(".mk-arc-num");
+          var C = 2 * Math.PI * parseFloat(fill.getAttribute("r"));
+          gsap.set(el, { opacity: 0, y: 16 });
+          gsap.set(fill, { strokeDasharray: C, strokeDashoffset: C });
+          tl.to(el, { opacity: 1, y: 0, duration: 0.6, ease: "power3.out" }, at);
+          tl.to(
+            fill,
+            { strokeDashoffset: C * (1 - value), duration: 1.1, ease: "power2.inOut" },
+            at + 0.15,
+          );
+          var st = { v: 0 };
+          tl.to(
+            st,
+            {
+              v: value,
+              duration: 1.1,
+              ease: "power2.inOut",
+              onUpdate: function () {
+                num.textContent = Math.round(st.v * 100) + "%";
+              },
+            },
+            at + 0.15,
+          );
+        };
+        window.mkArcOut = function (tl, target, at) {
+          tl.to(target, { opacity: 0, y: -12, duration: 0.35, ease: "power2.in" }, at);
+        };
+
+        // Self-preview timeline (not part of the snippet you copy).
+        var tl = gsap.timeline({ paused: true });
+        window.mkArcIn(tl, "#mk-arc-demo", 0.4, 0.76);
+        window.mkArcOut(tl, "#mk-arc-demo", 3.4);
+        tl.set("#mk-arc-root", { visibility: "hidden" }, 3.98);
+        window.__timelines["mk-usage-arc"] = tl;
+      })();
+    </script>
+  </body>
+</html>
+```
+
+</Accordion>
+
 {/* hf:generated-footer */}
 
 Tagged `data-viz` `gauge` `minimal`.
diff --git a/docs/catalog/components/modal-morph.mdx b/docs/catalog/components/modal-morph.mdx
new file mode 100644
index 0000000000..323cbfb87e
--- /dev/null
+++ b/docs/catalog/components/modal-morph.mdx
@@ -0,0 +1,564 @@
+---
+title: "Modal Morph"
+description: "A small card expands into a full panel, shared-element style: both layouts measured once at mount, the container morphs by transform only (never width/height tweens) while keyed children counter-scale and re-flow onto their own measured targets as pure functions of time."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/modal-morph.html"
+  compositionId="modal-morph"
+  compositionSrc="compositions/components/modal-morph.html"
+  variables={[{"id":"from_scale","type":"number","role":"style","label":"From scale","description":"Multiplies the authored card footprint, clamped 0.5 to 1.5.","default":1},{"id":"expand_at","type":"number","role":"timing","label":"Expand at","description":"Seconds after mount when the card grows into the panel.","default":1.2},{"id":"register","type":"enum","role":"timing","label":"Register","description":"Morph feel. Snappy is faster with a settle capped at 1.02 of the target rect.","default":"calm","options":[{"value":"calm","label":"Calm"},{"value":"snappy","label":"Snappy"}]},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Accent color: green rides --brand, blue rides --accent, violet rides --accent-2.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Optional departure. Default none: the settled panel holds until the frame cuts.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
+>
+
+```html modal-morph.html
+<!doctype html>
+<!--
+  modal-morph: HyperFrames video primitive (structure, Wave M9 experiment)
+
+  The shared-element grow: a small card expands into a full panel with its
+  children re-flowing continuously. FLIP-style: BOTH layouts (card and
+  panel) are real DOM, measured exactly ONCE at mount; from then on every
+  frame is a pure function of timeline time. The morph interpolates the
+  container rect and applies it as transform only (translate + scaleX/Y
+  from a fixed top-left origin); container width/height are NEVER
+  tweened. Children marked data-morph-key exist in both layouts; each
+  panel child counter-scales against the container and translates toward
+  the lerp of its own two measured rects, so content re-flows instead of
+  stretching. Panel-only furniture fades in late; the card crossfades out
+  early in the morph.
+
+  Card content is a SLOT. Callers supply content by placing an inert
+  template anywhere in the HOST page:
+
+    <template data-slot="modal-morph-card"> ... </template>
+
+  The slot content is cloned into BOTH the card body and the panel head.
+  Descendants carrying data-morph-key are paired across the two layouts;
+  slot content without keys is wrapped as one keyed block. With no slot,
+  the primitive renders token defaults (accent dot, display title line,
+  mono meta line) that re-flow from a stacked card to an inline panel
+  header row.
+
+  Variables (declared in data-composition-variables below):
+    - from_scale (number, default 1, clamped 0.5 to 1.5): multiplies the
+      authored card footprint before the one-time measurement.
+    - expand_at (number seconds, default 1.2): when the grow begins.
+    - register ("calm" | "snappy", default "calm"): calm is a smooth
+      inOut cubic; snappy is faster with a small settle that never
+      overshoots the target rect beyond 1.02.
+    - accent ("green" | "blue" | "violet", default "green"): green rides
+      --brand, blue rides --accent, violet rides --accent-2.
+    - exit ("none" | "fade" | "up", default "none").
+
+  Envelope, fixed IN and OUT with elastic HOLD only (never timeScale):
+    IN_BASE  = expand_at + MORPH (0.95s calm, 0.6s snappy) + 0.15s
+    HOLD     = max(0, D - IN - OUT)
+    OUT_BASE = 0.45s only when exit != none
+    If D < IN_BASE + OUT_BASE the whole envelope compresses together.
+
+  Determinism: layouts are measured once, synchronously, at mount; the
+  per-update apply recomputes every transform and opacity from tl.time()
+  alone (no Math.random, no wall clock, no incremental state). Eventful
+  seeks land identical frames in any order and either direction.
+
+  Mount contract: template-wrapped; #root fills the host box (no
+  data-width/height, container-type: size, cqmin units), styled via
+  #root only; one paused timeline under the LITERAL "modal-morph" key.
+-->
+<html
+  lang="en"
+  data-composition-id="modal-morph"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "from_scale", "type": "number", "role": "style", "label": "From scale", "description": "Multiplies the authored card footprint, clamped 0.5 to 1.5.", "default": 1 },
+    { "id": "expand_at", "type": "number", "role": "timing", "label": "Expand at", "description": "Seconds after mount when the card grows into the panel.", "default": 1.2 },
+    { "id": "register", "type": "enum", "role": "timing", "label": "Register", "description": "Morph feel. Snappy is faster with a settle capped at 1.02 of the target rect.", "default": "calm", "options": [{ "value": "calm", "label": "Calm" }, { "value": "snappy", "label": "Snappy" }] },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Accent color: green rides --brand, blue rides --accent, violet rides --accent-2.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the settled panel holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Modal Morph</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="modal-morph" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, "Inter", system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .mm-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .mm-stage {
+            position: absolute;
+            inset: 0;
+            will-change: transform, opacity;
+          }
+
+          /* Card layout: the small shared element, centered. */
+          .mm-cardbox {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+          }
+
+          .mm-card {
+            width: calc(36cqmin * var(--mm-from-scale, 1));
+            padding: var(--space-3, 3cqmin);
+            display: grid;
+            gap: var(--space-2, 2cqmin);
+            border: 0.18cqmin solid var(--border, #475569);
+            border-radius: var(--radius, 2.4cqmin);
+            background: var(--surface, #14171c);
+            box-shadow: 0 1.4cqmin 4.5cqmin color-mix(in srgb, var(--bg, #000000) 32%, transparent);
+          }
+
+          /* Panel layout: the destination surface. */
+          .mm-panel {
+            position: absolute;
+            left: 14cqw;
+            right: 14cqw;
+            top: 13cqh;
+            bottom: 13cqh;
+            padding: var(--space-3, 3cqmin);
+            display: grid;
+            grid-template-rows: auto 1fr auto;
+            gap: var(--space-3, 3cqmin);
+            border: 0.18cqmin solid var(--border, #475569);
+            border-radius: var(--radius, 2.4cqmin);
+            background: var(--surface, #14171c);
+            box-shadow: 0 2.2cqmin 7cqmin color-mix(in srgb, var(--bg, #000000) 36%, transparent);
+          }
+
+          .mm-panel-head {
+            display: flex;
+            align-items: center;
+            gap: var(--space-2, 2cqmin);
+          }
+
+          .mm-dot {
+            width: 3.4cqmin;
+            height: 3.4cqmin;
+            flex: none;
+            border-radius: 50%;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 72%, transparent);
+          }
+
+          .mm-title {
+            height: 2.4cqmin;
+            width: 24cqmin;
+            border-radius: 1.2cqmin;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 30%, transparent);
+          }
+
+          .mm-meta {
+            height: 1.5cqmin;
+            width: 15cqmin;
+            border-radius: 0.75cqmin;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 14%, transparent);
+          }
+
+          .mm-card .mm-title {
+            width: 76%;
+          }
+
+          .mm-card .mm-meta {
+            width: 52%;
+          }
+
+          /* Panel-only furniture: fades in late in the morph. */
+          /* No will-change on morphing layers: cached composited rasters
+             from a scaled state leak pixel noise into out-of-order seeks. */
+          .mm-body {
+            display: grid;
+            grid-template-columns: repeat(3, minmax(0, 1fr));
+            gap: var(--space-2, 2cqmin);
+            align-content: stretch;
+          }
+
+          .mm-tile {
+            border: 0.16cqmin solid var(--border, #475569);
+            border-radius: calc(var(--radius, 2.4cqmin) * 0.7);
+            background: color-mix(in srgb, var(--fg, #f8fafc) 5%, transparent);
+            display: grid;
+            align-content: end;
+            gap: 1.2cqmin;
+            padding: var(--space-2, 2cqmin);
+          }
+
+          .mm-tile-line {
+            height: 1.3cqmin;
+            border-radius: 0.65cqmin;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 16%, transparent);
+          }
+
+          .mm-tile-line.short {
+            width: 58%;
+          }
+
+          .mm-foot {
+            display: flex;
+            gap: var(--space-2, 2cqmin);
+          }
+
+          .mm-chip {
+            height: 3.4cqmin;
+            border-radius: 1.7cqmin;
+            padding: 0 2.4cqmin;
+            display: grid;
+            align-items: center;
+            border: 0.16cqmin solid var(--border, #475569);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
+            font-size: 1.5cqmin;
+            font-weight: 500;
+            letter-spacing: 0.08em;
+            color: var(--muted, #94a3b8);
+          }
+
+          .mm-chip.lead {
+            border-color: color-mix(in srgb, var(--mm-accent) 55%, transparent);
+            color: var(--mm-accent);
+          }
+        </style>
+
+        <div
+          id="modal-morph-clip"
+          class="mm-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="mm-stage">
+            <div class="mm-cardbox">
+              <div class="mm-card">
+                <div class="mm-slot-host">
+                  <div class="mm-dot" data-morph-key="dot"></div>
+                  <div class="mm-title" data-morph-key="title"></div>
+                  <div class="mm-meta" data-morph-key="meta"></div>
+                </div>
+              </div>
+            </div>
+            <div class="mm-panel">
+              <div class="mm-panel-head mm-slot-host">
+                <div class="mm-dot" data-morph-key="dot"></div>
+                <div class="mm-title" data-morph-key="title"></div>
+                <div class="mm-meta" data-morph-key="meta"></div>
+              </div>
+              <div class="mm-body">
+                <div class="mm-tile">
+                  <div class="mm-tile-line"></div>
+                  <div class="mm-tile-line short"></div>
+                </div>
+                <div class="mm-tile">
+                  <div class="mm-tile-line"></div>
+                  <div class="mm-tile-line short"></div>
+                </div>
+                <div class="mm-tile">
+                  <div class="mm-tile-line"></div>
+                  <div class="mm-tile-line short"></div>
+                </div>
+              </div>
+              <div class="mm-foot">
+                <div class="mm-chip lead">OPEN</div>
+                <div class="mm-chip">DETAILS</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".mm-stage");
+            var card = root.querySelector(".mm-card");
+            var panel = root.querySelector(".mm-panel");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var fromScaleRaw = parseFloat(vars.from_scale);
+            var fromScale = isFinite(fromScaleRaw) ? Math.min(1.5, Math.max(0.5, fromScaleRaw)) : 1;
+            var expandRaw = parseFloat(vars.expand_at);
+            var expandVar = isFinite(expandRaw) ? Math.max(0.2, expandRaw) : 1.2;
+            var register = vars.register === "snappy" ? "snappy" : "calm";
+            var accentColors = {
+              green: "var(--brand, #52525b)",
+              blue: "var(--accent, #52525b)",
+              violet: "var(--accent-2, #52525b)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            root.style.setProperty("--mm-accent", accentColors[accent]);
+            root.style.setProperty("--mm-from-scale", String(fromScale));
+
+            // SLOT: same content cloned into BOTH layouts so measured
+            // pairs exist for every key. Keyless slot content is wrapped
+            // as one keyed block.
+            var hostDoc = root.ownerDocument;
+            var slotTemplate = null;
+            try {
+              slotTemplate = hostDoc.querySelector('template[data-slot="modal-morph-card"]');
+            } catch (error) {
+              slotTemplate = null;
+            }
+            if (slotTemplate) {
+              var hosts = root.querySelectorAll(".mm-slot-host");
+              for (var h = 0; h < hosts.length; h += 1) {
+                var content = hostDoc.importNode(slotTemplate.content, true);
+                var probe = hostDoc.createElement("div");
+                probe.appendChild(content);
+                if (!probe.querySelector("[data-morph-key]")) {
+                  probe.setAttribute("data-morph-key", "slot");
+                }
+                hosts[h].textContent = "";
+                hosts[h].appendChild(probe);
+              }
+            }
+
+            // ONE-TIME measurement of both real layouts (the FLIP "first"
+            // and "last"). Everything after this line is pure f(t).
+            var stageRect = stage.getBoundingClientRect();
+            function measure(el) {
+              var r = el.getBoundingClientRect();
+              return {
+                x: r.left - stageRect.left,
+                y: r.top - stageRect.top,
+                w: Math.max(1, r.width),
+                h: Math.max(1, r.height),
+              };
+            }
+            var cardRect = measure(card);
+            var panelRect = measure(panel);
+
+            function collectKids(container) {
+              var map = {};
+              var nodes = container.querySelectorAll("[data-morph-key]");
+              for (var i = 0; i < nodes.length; i += 1) {
+                map[nodes[i].getAttribute("data-morph-key")] = {
+                  el: nodes[i],
+                  rect: measure(nodes[i]),
+                };
+              }
+              return map;
+            }
+            var cardKids = collectKids(card);
+            var panelKids = collectKids(panel);
+
+            // Matched pairs: for each layer we keep, per child, its OWN
+            // layout rect (home) plus the counterpart rect (away).
+            function pairs(ownKids, otherKids) {
+              var list = [];
+              for (var key in ownKids) {
+                if (Object.prototype.hasOwnProperty.call(otherKids, key)) {
+                  list.push({
+                    el: ownKids[key].el,
+                    home: ownKids[key].rect,
+                    away: otherKids[key].rect,
+                  });
+                }
+              }
+              return list;
+            }
+            var panelPairs = pairs(panelKids, cardKids);
+            var cardPairs = pairs(cardKids, panelKids);
+            var fades = panel.querySelectorAll(".mm-body, .mm-foot");
+
+            // Fixed origins so the rect math is exact.
+            gsap.set([card, panel], { transformOrigin: "0 0" });
+            for (var pp = 0; pp < panelPairs.length; pp += 1) {
+              gsap.set(panelPairs[pp].el, { transformOrigin: "0 0" });
+            }
+            for (var cp = 0; cp < cardPairs.length; cp += 1) {
+              gsap.set(cardPairs[cp].el, { transformOrigin: "0 0" });
+            }
+
+            // Envelope: fixed IN/OUT, elastic HOLD, never time-scaled.
+            var MORPH_BASE = register === "snappy" ? 0.6 : 0.95;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var EXPAND_BASE = Math.min(expandVar, Math.max(0.2, duration - 0.6));
+            var IN_BASE = EXPAND_BASE + MORPH_BASE + 0.15;
+            var OUT_BASE = exit === "none" ? 0 : 0.45;
+            var totalBase = Math.max(0.001, IN_BASE + OUT_BASE);
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var EXPAND = EXPAND_BASE * scale;
+            var MORPH = MORPH_BASE * scale;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var OUT_START = IN + HOLD;
+            var ENTER = 0.3 * scale;
+
+            function clamp01(v) {
+              return v < 0 ? 0 : v > 1 ? 1 : v;
+            }
+            // calm: cubic inOut, no overshoot.
+            function calmEase(u) {
+              return u < 0.5 ? 4 * u * u * u : 1 - 4 * (1 - u) * (1 - u) * (1 - u);
+            }
+            // snappy: back.out with c1 = 0.7; analytic max 1.0176, under
+            // the 1.02 cap (and interpolating the rect keeps the scale
+            // overshoot strictly below 2% of target).
+            function snappyEase(u) {
+              var c1 = 0.7;
+              var c3 = c1 + 1;
+              var v = u - 1;
+              return 1 + c3 * v * v * v + c1 * v * v;
+            }
+            var ease = register === "snappy" ? snappyEase : calmEase;
+
+            function lerp(a, b, p) {
+              return a + (b - a) * p;
+            }
+            function lerpRect(a, b, p) {
+              return {
+                x: lerp(a.x, b.x, p),
+                y: lerp(a.y, b.y, p),
+                w: lerp(a.w, b.w, p),
+                h: lerp(a.h, b.h, p),
+              };
+            }
+
+            // Apply one layer: container transformed onto rect R; each
+            // matched child counter-scaled and translated onto the lerp of
+            // its own two measured rects. Child x/y live in the scaled
+            // container space, hence the divisions.
+            function applyLayer(container, homeRect, kidPairs, R, p) {
+              var sx = R.w / homeRect.w;
+              var sy = R.h / homeRect.h;
+              gsap.set(container, {
+                x: R.x - homeRect.x,
+                y: R.y - homeRect.y,
+                scaleX: sx,
+                scaleY: sy,
+              });
+              for (var i = 0; i < kidPairs.length; i += 1) {
+                var pair = kidPairs[i];
+                var relHome = {
+                  x: pair.home.x - homeRect.x,
+                  y: pair.home.y - homeRect.y,
+                };
+                var want = lerpRect(pair.away, pair.home, container === panel ? p : 1 - p);
+                var baseX = R.x + relHome.x * sx;
+                var baseY = R.y + relHome.y * sy;
+                gsap.set(pair.el, {
+                  x: (want.x - baseX) / sx,
+                  y: (want.y - baseY) / sy,
+                  scaleX: want.w / (pair.home.w * sx),
+                  scaleY: want.h / (pair.home.h * sy),
+                });
+              }
+            }
+
+            // Pure per-update apply: every transform and opacity is a
+            // function of tl.time() alone. Writes are idempotent.
+            function applyTime(timeSeconds) {
+              var enter = clamp01(ENTER > 0 ? timeSeconds / ENTER : 1);
+              var u = clamp01(MORPH > 0 ? (timeSeconds - EXPAND) / MORPH : 1);
+              var p = ease(u);
+              var R = lerpRect(cardRect, panelRect, p);
+
+              applyLayer(panel, panelRect, panelPairs, R, p);
+              applyLayer(card, cardRect, cardPairs, R, p);
+
+              // Crossfade: card owns the pre-phase, hands off in the
+              // first 30% of the morph.
+              var hand = clamp01(u / 0.3);
+              gsap.set(card, { opacity: enter * (1 - hand) });
+              gsap.set(panel, { opacity: u <= 0 ? 0 : Math.max(0.001, hand) });
+
+              // Panel-only furniture: fades up over the back half.
+              var q = clamp01((u - 0.55) / 0.45);
+              var qe = 1 - (1 - q) * (1 - q);
+              for (var f = 0; f < fades.length; f += 1) {
+                gsap.set(fades[f], { opacity: qe, y: (1 - qe) * 12 });
+              }
+            }
+
+            gsap.set(stage, { opacity: 1, y: "0cqh" });
+
+            var tl = gsap.timeline({
+              paused: true,
+              onUpdate: function () {
+                applyTime(tl.time());
+              },
+            });
+
+            // Anchor tween: inert, spans [0, D] so onUpdate fires for
+            // every eventful seek and holds never clamp short.
+            tl.to({ p: 0 }, { p: 1, duration: duration, ease: "none" }, 0);
+
+            // OUT: optional departure; exit none holds until the cut.
+            if (exit === "up") {
+              tl.to(stage, { y: "-4cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "fade") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            }
+
+            tl.seek(0);
+            applyTime(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["modal-morph"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add modal-morph" />
+
+That writes one file: `compositions/components/modal-morph.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/modal-morph.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `structure` `flip` `shared-element` `modal` `deterministic` `experiment`.
+
+## 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/components/morph-swap.mdx b/docs/catalog/components/morph-swap.mdx
new file mode 100644
index 0000000000..d2c0a82f23
--- /dev/null
+++ b/docs/catalog/components/morph-swap.mdx
@@ -0,0 +1,429 @@
+---
+title: "Morph Swap"
+description: "Two slotted siblings stacked at one shared center: A holds, then condenses or reshapes into B on a shared 50% 50% transform origin. Condense shrink-fades A exactly as B scales up; reshape morphs the silhouette on scaleX/scaleY, never width or height tweens. Token card defaults render when a slot is left empty."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/morph-swap.html"
+  compositionId="morph-swap"
+  compositionSrc="compositions/components/morph-swap.html"
+  variables={[{"id":"swap_at","type":"number","role":"timing","label":"Swap start","description":"Seconds after mount start when the morph begins.","default":1.4,"min":0.1,"max":8,"step":0.05,"unit":"s"},{"id":"register","type":"enum","role":"style","label":"Register","description":"Morph mechanic: condense shrink-fades A into B at center; reshape morphs the silhouette on scaleX/scaleY.","default":"condense","options":[{"value":"condense","label":"Condense"},{"value":"reshape","label":"Reshape"}]},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Incoming card accent color.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Outgoing transition. None holds the final frame.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
+>
+
+```html morph-swap.html
+<!doctype html>
+<!--
+  morph-swap: HyperFrames video primitive (transitions / holdable / bridge)
+
+  Concept: two slotted siblings sit absolutely stacked at one shared center.
+  A holds alone, then at swap_at it hands the stage to B through one of two
+  registers, both riding a shared transform-origin of 50% 50%:
+
+    - condense: A shrink-fades toward center exactly as B scales up through
+      the same silhouette (the flagship close morph: outgoing power2.in,
+      incoming back.out with a 0.15s overlap).
+    - reshape: A morphs its silhouette on scaleX/scaleY while fading, and B
+      picks up from that mid-morph silhouette and relaxes to its natural
+      shape (the flagship problem morph). NEVER width/height tweens; the
+      reshape rides transforms only, so it stays layout-free and seek-safe.
+
+  Slots (see README.md for a worked example):
+    - [data-slot="a"]: the outgoing content. Replace the children of this
+      element in your installed copy. Default: a muted token wireframe card.
+    - [data-slot="b"]: the incoming content. Same mechanism. Default: a
+      taller brand-tinted token card so the swap reads at a glance.
+
+  Variables (declared in data-composition-variables below):
+    - swap_at (number, seconds, default 1.4): when the morph starts, relative
+      to mount start. Clamped so the swap always completes inside IN.
+    - register (condense | reshape, default condense): the morph mechanic.
+    - accent (green | blue | violet, default green): incoming card accent.
+      green maps to --brand, blue to --accent, violet to --accent-2.
+    - exit (none | fade | up, default none): outgoing transition. none holds
+      the final frame (frame roots own transitions; holds end films).
+
+  Envelope (fixed IN/OUT, elastic HOLD only, never gsap.timeScale()):
+    IN       = swap_at + swap span (0.75s condense, 1.05s reshape); the stage
+               settles in during the first 0.32s
+    HOLD     = elastic = max(0, D - (IN + OUT)); B holds dead-still
+    OUT      = 0.50s when exit is fade or up, 0 when exit is none
+    If D < IN + OUT, IN and OUT scale down together so IN + OUT == D.
+
+  Sync point: morph-land at swap_at + span inside IN (2.15s at defaults). It
+  never moves into elastic HOLD.
+
+  Sound cue: dispatches a bubbling `hf:sfx` CustomEvent with id
+  "morph-land-soft" at morph-land. This primitive never plays audio.
+
+  Mount contract: MOUNTABLE SUB-COMPOSITION. The runtime clones only
+  <template> contents; #root fills the host box (inset:0, container-type:
+  size), has no data-width/data-height, and registers one paused timeline
+  under the literal "morph-swap" key (mount flattening strips
+  data-composition-id from the live root). Variables come from
+  window.__hyperframes.getVariables().
+-->
+<html
+  lang="en"
+  data-composition-id="morph-swap"
+  data-composition-duration="3.5"
+  data-composition-variables='[
+    { "id": "swap_at", "type": "number", "role": "timing", "label": "Swap start", "description": "Seconds after mount start when the morph begins.", "default": 1.4, "min": 0.1, "max": 8, "step": 0.05, "unit": "s" },
+    { "id": "register", "type": "enum", "role": "style", "label": "Register", "description": "Morph mechanic: condense shrink-fades A into B at center; reshape morphs the silhouette on scaleX/scaleY.", "default": "condense", "options": [{ "value": "condense", "label": "Condense" }, { "value": "reshape", "label": "Reshape" }] },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Incoming card accent color.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Outgoing transition. None holds the final frame.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Morph Swap</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="morph-swap" data-duration="3.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          /* Root fills the host-owned box. Internal measurements use cqw/cqh
+             and every painted color comes from a contract token. */
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            background: var(--bg, #07111f);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+          }
+
+          .msw-clip,
+          .msw-stage {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+          }
+
+          .msw-clip {
+            overflow: hidden;
+          }
+
+          .msw-stage {
+            opacity: 0;
+          }
+
+          /* Both panels stack full-bleed and center their content, so the two
+             siblings share one center and one transform origin. All morph
+             motion is transforms on the panel; slot content never reflows. */
+          .msw-panel {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            transform-origin: 50% 50%;
+          }
+
+          /* Caller-supplied media keeps a sane footprint at center. */
+          .msw-slot > img,
+          .msw-slot > video {
+            max-width: 84cqw;
+            max-height: 84cqh;
+            border-radius: var(--radius, 2.4cqmin);
+          }
+
+          .msw-slot {
+            display: grid;
+            place-items: center;
+          }
+
+          /* Token-styled default slot content: a muted wireframe card on the
+             outgoing side, a taller brand-tinted card on the incoming side.
+             Callers replacing slot children never see any of this. */
+          .msw-card {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            padding: var(--space-3, 4cqh) var(--space-3, 4cqw);
+            border: 0.16cqw solid var(--border, #334155);
+            border-radius: var(--radius, 2.4cqmin);
+            background: color-mix(in srgb, var(--surface, #172033) 88%, var(--bg, #07111f));
+            box-shadow: 0 2cqh 5cqw color-mix(in srgb, var(--bg, #07111f) 45%, transparent);
+          }
+
+          .msw-a .msw-card {
+            width: 52cqw;
+            height: 46cqh;
+          }
+
+          .msw-b .msw-card {
+            width: 36cqw;
+            height: 62cqh;
+            border-color: color-mix(
+              in srgb,
+              var(--msw-accent, #22c55e) 52%,
+              var(--border, #334155)
+            );
+            background: color-mix(in srgb, var(--surface, #172033) 86%, var(--msw-accent, #22c55e));
+          }
+
+          .msw-bar {
+            width: 34%;
+            height: 4.4cqh;
+            margin-bottom: var(--space-3, 4cqh);
+            border-radius: 1.2cqh;
+            background: var(--muted, #94a3b8);
+            opacity: 0.5;
+          }
+
+          .msw-b .msw-bar {
+            width: 46%;
+            background: var(--msw-accent, #22c55e);
+            opacity: 0.92;
+          }
+
+          .msw-line {
+            height: 2.4cqh;
+            margin-bottom: var(--space-2, 2.6cqh);
+            border-radius: 1.2cqh;
+            background: var(--muted, #94a3b8);
+            opacity: 0.4;
+          }
+
+          .msw-line:nth-of-type(2) {
+            width: 92%;
+          }
+
+          .msw-line:nth-of-type(3) {
+            width: 68%;
+          }
+
+          .msw-line:nth-of-type(4) {
+            width: 44%;
+          }
+
+          .msw-b .msw-line {
+            background: color-mix(in srgb, var(--msw-accent, #22c55e) 70%, var(--fg, #f8fafc));
+            opacity: 0.7;
+          }
+        </style>
+
+        <div
+          id="morph-swap-clip"
+          class="msw-clip clip"
+          data-start="0"
+          data-duration="3.5"
+          data-track-index="0"
+        >
+          <div class="msw-stage">
+            <section class="msw-panel msw-a" aria-label="Outgoing panel">
+              <div class="msw-slot" data-slot="a">
+                <!-- SLOT "a": replace the children of this element with your
+                     own outgoing content (img, video, or HTML). -->
+                <div class="msw-card" aria-hidden="true">
+                  <div class="msw-bar"></div>
+                  <div class="msw-line"></div>
+                  <div class="msw-line"></div>
+                  <div class="msw-line"></div>
+                </div>
+              </div>
+            </section>
+
+            <section class="msw-panel msw-b" aria-label="Incoming panel">
+              <div class="msw-slot" data-slot="b">
+                <!-- SLOT "b": replace the children of this element with your
+                     own incoming content (img, video, or HTML). -->
+                <div class="msw-card" aria-hidden="true">
+                  <div class="msw-bar"></div>
+                  <div class="msw-line"></div>
+                  <div class="msw-line"></div>
+                  <div class="msw-line"></div>
+                </div>
+              </div>
+            </section>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            // Literal id: mount flattening strips data-composition-id from the
+            // live root before this timeline registers.
+            var compositionId = "morph-swap";
+            var stage = root.querySelector(".msw-stage");
+            var panelA = root.querySelector(".msw-a");
+            var panelB = root.querySelector(".msw-b");
+
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var rawSwapAt = vars.swap_at == null ? 1.4 : Number(vars.swap_at);
+            // INVARIANT: swap_at always clamps into the declared 0.1-8 range.
+            var swapAt = Number.isFinite(rawSwapAt) ? Math.max(0.1, Math.min(8, rawSwapAt)) : 1.4;
+            // INVARIANT: only condense | reshape reaches the timeline.
+            var register = vars.register === "reshape" ? "reshape" : "condense";
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #22c55e)",
+              blue: "var(--accent, #38bdf8)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            // INVARIANT: only none | fade | up reaches the timeline.
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            root.style.setProperty("--msw-accent", accentColors[accent]);
+
+            // RETIME RANGE: fixed IN and OUT scale together only when D is too
+            // short. HOLD is the sole elastic phase. Never use timeScale().
+            var STAGE_IN_BASE = 0.32;
+            var SPAN_BASE = register === "condense" ? 0.75 : 1.05;
+            var IN_BASE = swapAt + SPAN_BASE;
+            var OUT_BASE = exit === "none" ? 0 : 0.5;
+
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "3.5"));
+            var totalBase = IN_BASE + OUT_BASE;
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var STAGE_IN = Math.min(STAGE_IN_BASE * scale, IN);
+            var SWAP = swapAt * scale;
+            var SWAP_END = IN;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var OUT_START = IN + HOLD;
+
+            function fireSfx(id, t) {
+              root.dispatchEvent(
+                new CustomEvent("hf:sfx", { detail: { id: id, t: t }, bubbles: true }),
+              );
+            }
+
+            // Explicit both-endpoints state makes tl.seek(0) deterministic:
+            // A fully present, B parked hidden at its pre-morph shape.
+            gsap.set(stage, { opacity: 0, y: 0 });
+            gsap.set(panelA, { scale: 1, scaleX: 1, scaleY: 1, autoAlpha: 1 });
+            gsap.set(panelB, { scale: 1, scaleX: 1, scaleY: 1, autoAlpha: 0 });
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN part 1: the stage settles and A holds alone.
+            tl.to(stage, { opacity: 1, duration: STAGE_IN, ease: "power2.out" }, 0);
+
+            // IN part 2: the morph, both registers on the shared 50% 50% origin.
+            if (register === "condense") {
+              // A condenses toward center as B scales up through the same
+              // silhouette, 0.15s overlap (flagship close morph).
+              tl.to(
+                panelA,
+                { scale: 0.72, autoAlpha: 0, duration: 0.35 * scale, ease: "power2.in" },
+                SWAP,
+              );
+              tl.fromTo(
+                panelB,
+                { scale: 0.72, autoAlpha: 0 },
+                {
+                  scale: 1,
+                  autoAlpha: 1,
+                  duration: 0.55 * scale,
+                  ease: "back.out(1.6)",
+                  immediateRender: false,
+                },
+                SWAP + 0.2 * scale,
+              );
+            } else {
+              // A reshapes its silhouette on scaleX/scaleY (NEVER width or
+              // height tweens) while fading; B picks up from the same
+              // mid-morph silhouette and relaxes to its natural shape.
+              tl.to(
+                panelA,
+                { scaleX: 0.68, scaleY: 1.34, duration: 0.6 * scale, ease: "power2.inOut" },
+                SWAP,
+              );
+              tl.to(
+                panelA,
+                { autoAlpha: 0, duration: 0.45 * scale, ease: "power1.in" },
+                SWAP + 0.15 * scale,
+              );
+              tl.fromTo(
+                panelB,
+                { scaleX: 0.68, scaleY: 1.34, autoAlpha: 0 },
+                {
+                  scaleX: 1,
+                  scaleY: 1,
+                  autoAlpha: 1,
+                  duration: 0.65 * scale,
+                  ease: "power2.out",
+                  immediateRender: false,
+                },
+                SWAP + 0.4 * scale,
+              );
+            }
+            tl.call(
+              function () {
+                fireSfx("morph-land-soft", SWAP_END);
+              },
+              [],
+              SWAP_END,
+            );
+
+            // HOLD: B dead-still at its natural shape.
+
+            // OUT: only when the exit variable asks for one; exit none holds
+            // the final frame (frame roots own transitions).
+            if (exit !== "none") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+              if (exit === "up") {
+                tl.to(stage, { y: "-6cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              }
+            }
+
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add morph-swap" />
+
+That writes one file: `compositions/components/morph-swap.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/morph-swap.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `transition` `morph` `swap` `condense` `reshape` `holdable` `slots`.
+
+## 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/components/morph-text.mdx b/docs/catalog/components/morph-text.mdx
index 66b9051859..d9d0bed484 100644
--- a/docs/catalog/components/morph-text.mdx
+++ b/docs/catalog/components/morph-text.mdx
@@ -3,22 +3,264 @@ title: "Morph Text"
 description: "Gooey text morph — cycles through an editable word list using SVG threshold + GSAP-driven blur for a fluid, satisfying transition effect"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/morph-text.mp4" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/components/morph-text.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Morph Text preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add morph-text
-```
+<InstallCommand command="npx hyperframes add morph-text" />
 
 That writes one file: `compositions/components/morph-text.html`.
 
-## Paste it into your composition
+## Source
+
+<Accordion title={`morph-text.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Morph Text</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Figtree:wght@900&display=block"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #fff);
+      }
+
+      #morph-text {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+      }
+
+      /* Word list: hidden source of truth - edit <li> items in Studio. */
+      #morph-words {
+        display: none;
+        list-style: none;
+        margin: 0;
+        padding: 0;
+      }
+
+      #morph-filter {
+        position: absolute;
+        width: 0;
+        height: 0;
+        overflow: hidden;
+        pointer-events: none;
+      }
+
+      #morph-wrapper {
+        position: absolute;
+        top: 50%;
+        left: 0;
+        transform: translateY(-50%);
+        width: 1920px;
+        height: 210px;
+        filter: drop-shadow(0 10px 44px rgba(0, 0, 0, 0.5))
+          drop-shadow(0 3px 10px rgba(0, 0, 0, 0.25));
+      }
+
+      #morph-display {
+        width: 100%;
+        height: 100%;
+        filter: none;
+      }
+
+      #morph-a,
+      #morph-b {
+        position: absolute;
+        width: 100%;
+        display: inline-block;
+        text-align: center;
+        font-size: 120pt;
+        font-weight: 900;
+        line-height: 1;
+        user-select: none;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="morph-text"
+      data-composition-id="morph-text"
+      data-timeline-locked
+      data-width="1920"
+      data-height="1080"
+      data-duration="15"
+      data-fps="30"
+      data-morph-speed="1"
+      data-morph-pause="1.5"
+    >
+      <!--
+        Edit words here - one <li> per word or phrase.
+        data-font  : CSS font-family (e.g. "'Figtree', sans-serif")
+        data-color : text color hex (e.g. "#000000")
+        Adjust data-morph-speed (seconds per morph) and data-morph-pause (hold time) above.
+      -->
+      <ol id="morph-words" aria-hidden="true">
+        <li data-font="'Figtree', sans-serif" data-color="#000000">Do more with less.</li>
+        <li data-font="'Figtree', sans-serif" data-color="#000000">Built for what's next.</li>
+        <li data-font="'Figtree', sans-serif" data-color="#000000">Fast. Focused. Powerful.</li>
+        <li data-font="'Figtree', sans-serif" data-color="#000000">Your work, amplified.</li>
+        <li data-font="'Figtree', sans-serif" data-color="#000000">Start free today.</li>
+      </ol>
+
+      <svg id="morph-filter" aria-hidden="true" focusable="false">
+        <defs>
+          <filter id="morph-threshold">
+            <feColorMatrix
+              in="SourceGraphic"
+              type="matrix"
+              values="1 0 0 0 0
+                      0 1 0 0 0
+                      0 0 1 0 0
+                      0 0 0 255 -100"
+            />
+          </filter>
+        </defs>
+      </svg>
+
+      <div id="morph-wrapper">
+        <div id="morph-display">
+          <span id="morph-a"></span>
+          <span id="morph-b"></span>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      (function () {
+        "use strict";
+
+        var container = document.getElementById("morph-text");
+        var display = document.getElementById("morph-display");
+        var elA = document.getElementById("morph-a");
+        var elB = document.getElementById("morph-b");
+
+        var words = Array.from(document.querySelectorAll("#morph-words li"))
+          .map(function (el) {
+            return {
+              text: el.textContent.trim(),
+              font: el.dataset.font || "'Figtree', sans-serif",
+              color: el.dataset.color || "#111111",
+            };
+          })
+          .filter(function (w) {
+            return w.text;
+          });
+
+        if (words.length < 2) {
+          words = [
+            { text: "Morph", font: "'Figtree', sans-serif", color: "#111111" },
+            { text: "Text", font: "'Figtree', sans-serif", color: "#111111" },
+          ];
+        }
+
+        var morphSpeed = parseFloat(container.dataset.morphSpeed || "1");
+        var morphPause = parseFloat(container.dataset.morphPause || "1.5");
+        var duration = parseFloat(container.dataset.duration || "9");
+        var stepDur = morphSpeed + morphPause;
+        var totalWordDur = words.length * stepDur;
+
+        function applyMorph(T) {
+          var t = T % totalWordDur;
+          var stepIdx = Math.floor(t / stepDur);
+          var stepT = t - stepIdx * stepDur;
+          var frac = Math.min(stepT / morphSpeed, 1);
+
+          var wA = words[stepIdx % words.length];
+          var wB = words[(stepIdx + 1) % words.length];
+
+          elA.textContent = wA.text;
+          elA.style.fontFamily = "var(--font-display, " + wA.font + ")";
+          elA.style.color = "var(--fg, " + wA.color + ")";
+
+          elB.textContent = wB.text;
+          elB.style.fontFamily = "var(--font-display, " + wB.font + ")";
+          elB.style.color = "var(--fg, " + wB.color + ")";
+
+          if (frac <= 0) {
+            display.style.filter = "none";
+            elA.style.filter = "";
+            elA.style.opacity = "1";
+            elB.style.filter = "";
+            elB.style.opacity = "0";
+          } else if (frac >= 1) {
+            display.style.filter = "none";
+            elA.style.filter = "";
+            elA.style.opacity = "0";
+            elB.style.filter = "";
+            elB.style.opacity = "1";
+          } else {
+            display.style.filter = "url(#morph-threshold)";
+            var blurB = Math.max(0, Math.min(8 / frac - 8, 100));
+            var blurA = Math.max(0, Math.min(8 / (1 - frac) - 8, 100));
+            elB.style.filter = "blur(" + blurB + "px)";
+            elB.style.opacity = frac;
+            elA.style.filter = "blur(" + blurA + "px)";
+            elA.style.opacity = 1 - frac;
+          }
+        }
+
+        if (matchMedia("(prefers-reduced-motion: reduce)").matches) {
+          elA.textContent = words[0].text;
+          elA.style.fontFamily = "var(--font-display, " + words[0].font + ")";
+          elA.style.color = "var(--fg, " + words[0].color + ")";
+          elA.style.opacity = "1";
+          display.style.filter = "none";
+          return;
+        }
+
+        var proxy = { t: 0 };
+        var tl = gsap.timeline({ paused: true });
+
+        tl.to(proxy, {
+          t: duration,
+          duration: duration,
+          ease: "none",
+          onUpdate: function () {
+            applyMorph(proxy.t);
+          },
+        });
+
+        applyMorph(0);
+        tl.seek(0);
+
+        window.__timelines = window.__timelines || {};
+        window.__timelines["morph-text"] = tl;
+      })();
+    </script>
+  </body>
+</html>
+```
+
+</Accordion>
+
+## Usage
 
-Open `compositions/components/morph-text.html` and copy what is inside into your own composition.
+Open `compositions/components/morph-text.html` and paste its contents into your composition.
 
-A component has no size or duration of its own. It takes both from the composition
-you paste it into.
+Edit the `<ol id="morph-words">` list to change the statements that cycle through. Each `<li>` accepts `data-font` (CSS font-family) and `data-color` (hex) attributes. Adjust `data-morph-speed` (seconds per transition) and `data-morph-pause` (hold time) on the root element.
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/components/motion-blur.mdx b/docs/catalog/components/motion-blur.mdx
index f8c1a6b138..9904b247f5 100644
--- a/docs/catalog/components/motion-blur.mdx
+++ b/docs/catalog/components/motion-blur.mdx
@@ -3,23 +3,315 @@ title: "Motion Blur"
 description: "Velocity-driven motion blur — samples element position each frame and applies a one-sided SVG feGaussianBlur ghost trail proportional to speed"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/motion-blur.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/motion-blur.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/components/motion-blur.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Motion Blur preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add motion-blur
-```
+<InstallCommand command="npx hyperframes add motion-blur" />
 
 That writes one file: `compositions/components/motion-blur.html`.
 
-## Paste it into your composition
+## Source
+
+<Accordion title={`motion-blur.html`}>
+
+```html
+<!--
+  Motion Blur — velocity-driven directional motion blur.
+
+  Usage: paste this snippet into your composition, then call
+  attachMotionBlur() with any element animated by your GSAP timeline.
+
+  The snippet hooks into the timeline's onUpdate callback, tracks the
+  GSAP x/y position of each target frame-by-frame, and applies:
+    1. Ghost copies of the element at increasing backward offsets with
+       decreasing opacity — inherently one-sided, no forward blur component.
+    2. A small Gaussian blur at the current position so the element looks
+       in-motion (blurry) rather than sharp on top of the trail.
+    3. An optional scaleX/Y stretch in the direction of travel (off by
+       default; enable via stretchMax > 0 if you want the effect).
+
+  Both effects clear automatically when the element decelerates to rest.
+
+  Requirements:
+  - Elements must be animated via GSAP x/y (transform), not left/top.
+  - Call attachMotionBlur() AFTER defining all tweens, before
+    window.__timelines registration.
+  - GSAP must be loaded before this snippet executes.
+
+  API:
+    attachMotionBlur(selector, timeline, options?)
+
+  Options:
+    blurScale     — directional blur per px/s of velocity (default 0.008)
+    blurMax       — max blur radius on the motion axis in px (default 20)
+    stretchScale  — scaleX/Y added per px/s (default 0.0002)
+    stretchMax    — max stretch factor above 1.0 (default 0, disabled)
+    axis          — "x" | "y" | "both" (default "both")
+-->
+
+<script>
+  (function () {
+    if (!window._hfMbUid) window._hfMbUid = 0;
+
+    window.attachMotionBlur = function (selector, tl, opts) {
+      opts = opts || {};
+      var blurScale = opts.blurScale !== undefined ? opts.blurScale : 0.008;
+      var blurMax = opts.blurMax !== undefined ? opts.blurMax : 20;
+      var stretchScale = opts.stretchScale !== undefined ? opts.stretchScale : 0.0002;
+      var stretchMax = opts.stretchMax !== undefined ? opts.stretchMax : 0;
+      var axis = opts.axis || "both";
+
+      var items = Array.isArray(selector) ? selector : [selector];
+      var targets = items.reduce(function (acc, s) {
+        if (typeof s === "string") {
+          document.querySelectorAll(s).forEach(function (el) {
+            acc.push(el);
+          });
+        } else if (s instanceof Element) {
+          acc.push(s);
+        }
+        return acc;
+      }, []);
+
+      // One SVG filter per target. Ghost copies placed behind → inherently one-sided.
+      // Small top Gaussian makes element look blurry at current position, not sharp.
+      var ns = "http://www.w3.org/2000/svg";
+      var GHOST_CFG = [
+        { frac: 0.25, slope: 0.55 },
+        { frac: 0.55, slope: 0.28 },
+        { frac: 1.0, slope: 0.1 },
+      ];
+
+      var state = targets.map(function (el) {
+        var uid = "hf-mb-" + window._hfMbUid++;
+        var svg = document.createElementNS(ns, "svg");
+        svg.setAttribute("style", "position:absolute;width:0;height:0;overflow:hidden;");
+
+        var filter = document.createElementNS(ns, "filter");
+        filter.id = uid;
+        filter.setAttribute("x", "-110%");
+        filter.setAttribute("y", "-25%");
+        filter.setAttribute("width", "260%");
+        filter.setAttribute("height", "150%");
+
+        var ghosts = GHOST_CFG.map(function (cfg, gi) {
+          var feOff = document.createElementNS(ns, "feOffset");
+          feOff.setAttribute("in", "SourceGraphic");
+          feOff.setAttribute("dx", "0");
+          feOff.setAttribute("dy", "0");
+          feOff.setAttribute("result", "go" + gi);
+
+          var feGB = document.createElementNS(ns, "feGaussianBlur");
+          feGB.setAttribute("in", "go" + gi);
+          feGB.setAttribute("stdDeviation", "0 0");
+          feGB.setAttribute("result", "gb" + gi);
+
+          var feCT = document.createElementNS(ns, "feComponentTransfer");
+          feCT.setAttribute("in", "gb" + gi);
+          feCT.setAttribute("result", "gf" + gi);
+          var feFuncA = document.createElementNS(ns, "feFuncA");
+          feFuncA.setAttribute("type", "linear");
+          feFuncA.setAttribute("slope", String(cfg.slope));
+          feCT.appendChild(feFuncA);
+
+          filter.appendChild(feOff);
+          filter.appendChild(feGB);
+          filter.appendChild(feCT);
+          return { feOff: feOff, feGB: feGB, frac: cfg.frac };
+        });
+
+        var feTopBlur = document.createElementNS(ns, "feGaussianBlur");
+        feTopBlur.setAttribute("in", "SourceGraphic");
+        feTopBlur.setAttribute("stdDeviation", "0 0");
+        feTopBlur.setAttribute("result", "top");
+        filter.appendChild(feTopBlur);
+
+        var feMerge = document.createElementNS(ns, "feMerge");
+        for (var mi = GHOST_CFG.length - 1; mi >= 0; mi--) {
+          var mn = document.createElementNS(ns, "feMergeNode");
+          mn.setAttribute("in", "gf" + mi);
+          feMerge.appendChild(mn);
+        }
+        var mnTop = document.createElementNS(ns, "feMergeNode");
+        mnTop.setAttribute("in", "top");
+        feMerge.appendChild(mnTop);
+        filter.appendChild(feMerge);
+
+        svg.appendChild(filter);
+        document.body.appendChild(svg);
+
+        return {
+          el: el,
+          ghosts: ghosts,
+          feTopBlur: feTopBlur,
+          filterId: uid,
+          prevX: parseFloat(gsap.getProperty(el, "x")) || 0,
+          prevY: parseFloat(gsap.getProperty(el, "y")) || 0,
+          prevTime: tl.time(),
+        };
+      });
+
+      // tl.eventCallback("onUpdate") is not available in the HyperFrames renderer —
+      // the runtime proxies the timeline object. Tween onUpdate fires on every seek.
+      var _proxy = { t: 0 };
+      tl.to(
+        _proxy,
+        {
+          t: 1,
+          duration: Math.max(tl.duration(), 0.1),
+          ease: "none",
+          onUpdate: function () {
+            var time = tl.time();
+
+            state.forEach(function (s) {
+              var x = parseFloat(gsap.getProperty(s.el, "x")) || 0;
+              var y = parseFloat(gsap.getProperty(s.el, "y")) || 0;
+              var dt = time - s.prevTime;
+
+              if (dt > 0.0005) {
+                var vx = axis !== "y" ? (x - s.prevX) / dt : 0;
+                var vy = axis !== "x" ? (y - s.prevY) / dt : 0;
+
+                var bx = Math.min(Math.abs(vx) * blurScale, blurMax);
+                var by = Math.min(Math.abs(vy) * blurScale, blurMax);
+                var bxFinal = axis !== "y" ? bx : Math.max(by * 0.08, 0.4);
+                var byFinal = axis !== "x" ? by : Math.max(bx * 0.08, 0.4);
+                var active = bx > 0.3 || by > 0.3;
+
+                if (active) {
+                  s.el.style.filter = "url(#" + s.filterId + ")";
+                  s.ghosts.forEach(function (g) {
+                    var dx = axis !== "y" ? (vx >= 0 ? -bxFinal * g.frac : bxFinal * g.frac) : 0;
+                    var dy = axis !== "x" ? (vy >= 0 ? -byFinal * g.frac : byFinal * g.frac) : 0;
+                    g.feOff.setAttribute("dx", dx.toFixed(2));
+                    g.feOff.setAttribute("dy", dy.toFixed(2));
+                    var gbx =
+                      axis !== "y"
+                        ? (bxFinal * g.frac * 0.5).toFixed(2)
+                        : Math.max(byFinal * g.frac * 0.04, 0.4).toFixed(2);
+                    var gby =
+                      axis !== "x"
+                        ? (byFinal * g.frac * 0.5).toFixed(2)
+                        : Math.max(bxFinal * g.frac * 0.04, 0.4).toFixed(2);
+                    g.feGB.setAttribute("stdDeviation", gbx + " " + gby);
+                  });
+                  s.feTopBlur.setAttribute(
+                    "stdDeviation",
+                    (bxFinal * 0.15).toFixed(2) + " " + (byFinal * 0.15).toFixed(2),
+                  );
+
+                  if (stretchMax > 0) {
+                    var sx = 1 + Math.min(Math.abs(vx) * stretchScale, stretchMax);
+                    var sy = 1 + Math.min(Math.abs(vy) * stretchScale, stretchMax);
+                    var ox = axis !== "y" ? (vx >= 0 ? "100% 50%" : "0% 50%") : "50% 50%";
+                    var oy = axis !== "x" ? (vy >= 0 ? "50% 100%" : "50% 0%") : "50% 50%";
+                    gsap.set(s.el, {
+                      scaleX: axis !== "y" ? sx : 1,
+                      scaleY: axis !== "x" ? sy : 1,
+                      transformOrigin: axis === "x" ? ox : axis === "y" ? oy : "50% 50%",
+                    });
+                  }
+                } else {
+                  s.el.style.filter = "";
+                  s.ghosts.forEach(function (g) {
+                    g.feOff.setAttribute("dx", "0");
+                    g.feOff.setAttribute("dy", "0");
+                    g.feGB.setAttribute("stdDeviation", "0 0");
+                  });
+                  s.feTopBlur.setAttribute("stdDeviation", "0 0");
+                  if (stretchMax > 0) {
+                    gsap.set(s.el, { scaleX: 1, scaleY: 1, transformOrigin: "50% 50%" });
+                  }
+                }
+
+                s.prevX = x;
+                s.prevY = y;
+                s.prevTime = time;
+              } else if (dt < -0.0005) {
+                s.el.style.filter = "";
+                s.ghosts.forEach(function (g) {
+                  g.feOff.setAttribute("dx", "0");
+                  g.feOff.setAttribute("dy", "0");
+                  g.feGB.setAttribute("stdDeviation", "0 0");
+                });
+                s.feTopBlur.setAttribute("stdDeviation", "0 0");
+                if (stretchMax > 0) {
+                  gsap.set(s.el, { scaleX: 1, scaleY: 1, transformOrigin: "50% 50%" });
+                }
+                s.prevX = x;
+                s.prevY = y;
+                s.prevTime = time;
+              }
+              // dt ≈ 0: double-fire — skip.
+            });
+          },
+        },
+        0,
+      );
+    };
+  })();
+</script>
+
+<!--
+  Timeline integration example:
+
+  const tl = gsap.timeline({ paused: true });
+
+  tl.fromTo("#my-box", { x: -100 }, { x: 1700, duration: 1.2, ease: "power3.inOut" }, 0.5);
+
+  // Extend to data-duration so seeks past the last tween reach the blur callback.
+  tl.set(document.body, {}, DATA_DURATION);
+
+  // Call AFTER tweens, BEFORE window.__timelines registration.
+  // attachMotionBlur adds a tracking tween with onUpdate — must be called after
+  // tl.set()/tl.to() have established the final timeline duration.
+  attachMotionBlur("#my-box", tl, { axis: "x" });
+
+  window.__timelines = window.__timelines || {};
+  window.__timelines["my-composition"] = tl;
+-->
+```
+
+</Accordion>
+
+## Usage
+
+Paste the snippet into your composition, then call `attachMotionBlur()` after your GSAP tweens and before registering `window.__timelines`.
+
+```html
+<!-- Extend the timeline to data-duration before calling attachMotionBlur -->
+tl.set(document.body, {}, DATA_DURATION);
+
+attachMotionBlur("#my-box", tl, {
+  axis: "x",      // "x" | "y" | "both"
+  blurMax: 40,    // max blur radius in px (default 20)
+});
+
+window.__timelines = window.__timelines || {};
+window.__timelines["my-composition"] = tl;
+```
+
+## How it works
+
+Each target element gets its own SVG filter. On every timeline seek, `attachMotionBlur` samples the element's GSAP `x`/`y` position, computes velocity, and drives three SVG filter primitives:
+
+1. **Ghost copies** — three faded, blurred copies of the element placed behind it at increasing offsets proportional to speed. Inherently one-sided: no forward blur.
+2. **Top blur** — a small symmetric Gaussian at the current position so the element looks in-motion rather than crisp on top of the trail.
+
+Blur scales linearly with velocity up to `blurMax`. Both the ghost trail and top blur clear automatically when the element decelerates to rest.
 
-Open `compositions/components/motion-blur.html` and copy what is inside into your own composition.
-The file opens with a comment header that walks you through it.
+## Options
 
-A component has no size or duration of its own. It takes both from the composition
-you paste it into.
+| Option | Default | Description |
+| --- | --- | --- |
+| `axis` | `"both"` | Motion axis — `"x"`, `"y"`, or `"both"` |
+| `blurScale` | `0.008` | Blur per px/s of velocity |
+| `blurMax` | `20` | Max blur radius on the motion axis (px) |
+| `stretchScale` | `0.0002` | scaleX/Y added per px/s (requires `stretchMax > 0`) |
+| `stretchMax` | `0` | Max stretch above 1.0 — disabled by default |
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/components/multi-device-splay.mdx b/docs/catalog/components/multi-device-splay.mdx
new file mode 100644
index 0000000000..b8549c1866
--- /dev/null
+++ b/docs/catalog/components/multi-device-splay.mdx
@@ -0,0 +1,769 @@
+---
+title: "Multi Device Splay"
+description: "Phone, tablet, and desktop product mockups fan from a centered stack into a proud splayed arrangement with a subtle idle float."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/multi-device-splay.html"
+  compositionId="multi-device-splay"
+  compositionSrc="compositions/components/multi-device-splay.html"
+  variables={[{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Shared accent color used by all three product screens.","default":"blue","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]}]}
+>
+
+```html multi-device-splay.html
+<!doctype html>
+<!--
+  multi-device-splay: HyperFrames video primitive (ui-props / devices / reveal)
+
+  Concept: phone, tablet, and desktop product mockups begin as one centered
+  stack, then fan into a proud three-device arrangement. Each screen uses the
+  same accent while keeping a layout skeleton suited to its form factor.
+
+  Variables:
+    - accent (green | blue | violet, default "blue"): shared product color.
+
+  Envelope: fixed IN and OUT with elastic HOLD only, never timeScale.
+    IN   1.35s fixed  devices fan out in phone, tablet, desktop order with a
+                      0.12s cascade and overshoot settle.
+    HOLD elastic      the settled devices float subtly around their final
+                      -12, 0, and +12 degree rotations.
+    OUT  0.55s fixed  the arrangement recedes and fades as one lockup.
+    If duration is shorter than IN + OUT, both fixed phases shrink by the
+    same ratio and HOLD becomes zero.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the cqw/cqh basis, has no data-width or data-height, and
+  registers one paused timeline under the hardcoded multi-device-splay id.
+-->
+<html
+  lang="en"
+  data-composition-id="multi-device-splay"
+  data-composition-duration="4.5"
+  data-composition-variables='[
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Shared accent color used by all three product screens.", "default": "blue", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Multi Device Splay</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="multi-device-splay" data-duration="4.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            pointer-events: none;
+          }
+
+          .mds-clip,
+          .mds-stage {
+            position: absolute;
+            inset: 0;
+          }
+
+          .mds-stage {
+            perspective: 120cqw;
+            perspective-origin: 50% 48%;
+          }
+
+          .mds-positioner {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform-style: preserve-3d;
+            will-change: transform, opacity;
+          }
+
+          .mds-positioner-desktop {
+            z-index: 1;
+          }
+
+          .mds-positioner-tablet {
+            z-index: 2;
+          }
+
+          .mds-positioner-phone {
+            z-index: 3;
+          }
+
+          .mds-device {
+            position: absolute;
+            left: 0;
+            top: 0;
+            transform: translate(-50%, -50%);
+            transform-origin: 50% 50%;
+          }
+
+          .mds-shell,
+          .mds-monitor {
+            background: linear-gradient(145deg, #3a3d45, #1b1d22 43%, #0f1115);
+            border: 0.12cqh solid rgba(255, 255, 255, 0.24);
+            box-shadow:
+              0 4.8cqh 9cqh rgba(0, 0, 0, 0.4),
+              0 1.3cqh 2.5cqh rgba(0, 0, 0, 0.28),
+              inset 0 0.12cqh 0 rgba(255, 255, 255, 0.22),
+              inset 0 0 0 0.1cqh rgba(0, 0, 0, 0.52);
+          }
+
+          .mds-phone {
+            width: auto;
+            height: 59cqh;
+            aspect-ratio: 9 / 19.5;
+            padding: 0.65cqh;
+            border-radius: 4.1cqh;
+          }
+
+          .mds-tablet {
+            width: auto;
+            height: 64cqh;
+            aspect-ratio: 3 / 4;
+            padding: 0.82cqh;
+            border-radius: 3.5cqh;
+          }
+
+          .mds-desktop {
+            width: 44cqw;
+          }
+
+          .mds-monitor {
+            width: 100%;
+            aspect-ratio: 16 / 10;
+            padding: 0.7cqh;
+            border-radius: 2.1cqh;
+          }
+
+          .mds-stand-neck {
+            width: 4.8cqw;
+            height: 6.2cqh;
+            margin: -0.1cqh auto 0;
+            background: linear-gradient(90deg, #17191e, #3c3f47 48%, #121419);
+            clip-path: polygon(24% 0, 76% 0, 92% 100%, 8% 100%);
+          }
+
+          .mds-stand-foot {
+            width: 15cqw;
+            height: 1.5cqh;
+            margin: -0.05cqh auto 0;
+            border-radius: 1cqh 1cqh 0.45cqh 0.45cqh;
+            background: linear-gradient(180deg, #464952, #17191e);
+            box-shadow: 0 1.2cqh 2.3cqh rgba(0, 0, 0, 0.34);
+          }
+
+          .mds-screen {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            isolation: isolate;
+            background: #f4f7fb;
+            box-shadow: inset 0 0 0 0.1cqh rgba(15, 23, 42, 0.22);
+          }
+
+          .mds-phone .mds-screen {
+            border-radius: 3.45cqh;
+          }
+
+          .mds-tablet .mds-screen {
+            border-radius: 2.7cqh;
+          }
+
+          .mds-monitor .mds-screen {
+            border-radius: 1.42cqh;
+          }
+
+          .mds-island {
+            position: absolute;
+            z-index: 5;
+            left: 50%;
+            top: 1.1cqh;
+            width: 5.2cqw;
+            height: 1.7cqh;
+            border-radius: 2cqh;
+            background: #07080a;
+            transform: translateX(-50%);
+          }
+
+          .mds-camera {
+            position: absolute;
+            z-index: 5;
+            left: 50%;
+            top: 0.65cqh;
+            width: 0.55cqh;
+            height: 0.55cqh;
+            border-radius: 50%;
+            background: #0a0b0e;
+            transform: translateX(-50%);
+          }
+
+          .mds-mobile-ui,
+          .mds-tablet-ui,
+          .mds-desktop-ui {
+            position: absolute;
+            inset: 0;
+            color: #172033;
+          }
+
+          .mds-mobile-ui {
+            padding: 5.4cqh 1.4cqw 1.8cqh;
+            background: linear-gradient(180deg, #edf4ff, #f8fafc 40%);
+          }
+
+          .mds-mobile-header,
+          .mds-tablet-header,
+          .mds-desktop-toolbar {
+            display: flex;
+            align-items: center;
+          }
+
+          .mds-mobile-header {
+            justify-content: space-between;
+            margin-bottom: 2.1cqh;
+          }
+
+          .mds-logo {
+            width: 2.1cqh;
+            height: 2.1cqh;
+            border-radius: 0.65cqh;
+            background: var(--mds-accent);
+            box-shadow: 0 0.7cqh 1.4cqh color-mix(in srgb, var(--mds-accent) 30%, transparent);
+          }
+
+          /* Placeholder ramp: every stand-in surface inside a device screen is
+             an alpha step of the ink. Accent stays on the app mark alone. */
+          .mds-screen {
+            --mds-l1: rgba(15, 23, 42, 0.72);
+            --mds-l2: rgba(15, 23, 42, 0.45);
+            --mds-l3: rgba(15, 23, 42, 0.18);
+            --mds-l4: rgba(15, 23, 42, 0.08);
+          }
+
+          .mds-line {
+            height: 0.7cqh;
+            border-radius: 1cqh;
+            background: #c4ccda;
+          }
+
+          .mds-mobile-header .mds-line {
+            width: 5.4cqw;
+          }
+
+          .mds-mobile-hero {
+            height: 12cqh;
+            margin-bottom: 1.6cqh;
+            border-radius: 1.4cqh;
+            background: var(--mds-l3, rgba(15, 23, 42, 0.18));
+            box-shadow: inset 0 0 0 0.1cqh rgba(15, 23, 42, 0.14);
+          }
+
+          .mds-mobile-row {
+            display: grid;
+            grid-template-columns: 2.6cqh 1fr;
+            gap: 0.75cqw;
+            align-items: center;
+            height: 5.8cqh;
+            margin-top: 1cqh;
+            padding: 0.8cqh 0.75cqw;
+            border-radius: 1.1cqh;
+            background: white;
+            box-shadow: 0 0.55cqh 1.3cqh rgba(30, 41, 59, 0.08);
+          }
+
+          .mds-mobile-icon {
+            width: 2.6cqh;
+            height: 2.6cqh;
+            border-radius: 0.8cqh;
+            background: var(--mds-l3, rgba(15, 23, 42, 0.18));
+          }
+
+          .mds-mobile-row .mds-line:first-child {
+            width: 70%;
+            margin-bottom: 0.7cqh;
+            background: #8e99ab;
+          }
+
+          .mds-mobile-row .mds-line:last-child {
+            width: 46%;
+            height: 0.5cqh;
+          }
+
+          .mds-tablet-ui {
+            display: grid;
+            grid-template-columns: 4.8cqw 1fr;
+            background: #f6f8fc;
+          }
+
+          .mds-tablet-nav,
+          .mds-desktop-nav {
+            background: #182033;
+          }
+
+          .mds-tablet-nav {
+            padding: 4.4cqh 1.25cqw;
+          }
+
+          .mds-nav-mark {
+            width: 2.3cqh;
+            height: 2.3cqh;
+            margin-bottom: 3cqh;
+            border-radius: 0.7cqh;
+            background: var(--mds-accent);
+          }
+
+          .mds-nav-line {
+            width: 100%;
+            height: 0.62cqh;
+            margin-bottom: 1.5cqh;
+            border-radius: 1cqh;
+            background: rgba(255, 255, 255, 0.18);
+          }
+
+          .mds-nav-line-active {
+            background: rgba(255, 255, 255, 0.72);
+          }
+
+          .mds-tablet-main {
+            padding: 4.4cqh 1.5cqw 2.2cqh;
+          }
+
+          .mds-tablet-header {
+            justify-content: space-between;
+            margin-bottom: 2.5cqh;
+          }
+
+          .mds-tablet-header .mds-line:first-child {
+            width: 8cqw;
+            height: 1cqh;
+            background: #657086;
+          }
+
+          .mds-tablet-header .mds-line:last-child {
+            width: 4cqw;
+          }
+
+          .mds-tablet-hero {
+            height: 12cqh;
+            margin-bottom: 1.5cqh;
+            border-radius: 1.25cqh;
+            background: var(--mds-l4, rgba(15, 23, 42, 0.08));
+            box-shadow: inset 0 0 0 0.1cqh rgba(15, 23, 42, 0.14);
+          }
+
+          .mds-tablet-grid {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 1.1cqh;
+          }
+
+          .mds-tablet-card {
+            height: 10.5cqh;
+            padding: 1.2cqh 0.9cqw;
+            border-radius: 1.1cqh;
+            background: white;
+            box-shadow: 0 0.65cqh 1.5cqh rgba(30, 41, 59, 0.08);
+          }
+
+          .mds-tablet-card::before {
+            content: "";
+            display: block;
+            width: 2.2cqh;
+            height: 2.2cqh;
+            margin-bottom: 1.4cqh;
+            border-radius: 0.65cqh;
+            background: var(--mds-l3, rgba(15, 23, 42, 0.18));
+          }
+
+          .mds-tablet-card::after {
+            content: "";
+            display: block;
+            width: 62%;
+            height: 0.65cqh;
+            border-radius: 1cqh;
+            background: #aeb7c6;
+          }
+
+          .mds-desktop-ui {
+            display: grid;
+            grid-template-columns: 7.2cqw 1fr;
+            grid-template-rows: 4.6cqh 1fr;
+            background: #f6f8fc;
+          }
+
+          .mds-desktop-toolbar {
+            grid-column: 1 / -1;
+            gap: 0.55cqw;
+            padding: 0 1.1cqw;
+            border-bottom: 0.1cqh solid #dce2eb;
+            background: white;
+          }
+
+          .mds-window-dot {
+            width: 0.72cqh;
+            height: 0.72cqh;
+            border-radius: 50%;
+            background: #c8ced8;
+          }
+
+          .mds-window-dot-accent {
+            background: var(--mds-accent);
+          }
+
+          .mds-address {
+            width: 13cqw;
+            height: 1.35cqh;
+            margin-left: 1.2cqw;
+            border-radius: 1cqh;
+            background: #edf0f5;
+          }
+
+          .mds-desktop-nav {
+            padding: 2.1cqh 1.1cqw;
+          }
+
+          .mds-desktop-nav .mds-nav-mark {
+            margin-bottom: 2.1cqh;
+          }
+
+          .mds-desktop-main {
+            padding: 2cqh 1.4cqw;
+          }
+
+          .mds-desktop-heading {
+            width: 10cqw;
+            height: 1.2cqh;
+            margin-bottom: 2cqh;
+            border-radius: 1cqh;
+            background: #647086;
+          }
+
+          .mds-desktop-stats {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 0.85cqw;
+            margin-bottom: 1.4cqh;
+          }
+
+          .mds-desktop-stat {
+            height: 7.5cqh;
+            border-radius: 0.9cqh;
+            background: white;
+            box-shadow: 0 0.55cqh 1.25cqh rgba(30, 41, 59, 0.07);
+          }
+
+          .mds-desktop-stat:first-child {
+            background: var(--mds-l3, rgba(15, 23, 42, 0.18));
+          }
+
+          .mds-desktop-chart {
+            position: relative;
+            height: 13cqh;
+            overflow: hidden;
+            border-radius: 1cqh;
+            background:
+              linear-gradient(to top, rgba(203, 213, 225, 0.38) 0.1cqh, transparent 0.1cqh) 0 0 /
+                100% 3.2cqh,
+              white;
+            box-shadow: 0 0.55cqh 1.25cqh rgba(30, 41, 59, 0.07);
+          }
+
+          .mds-desktop-chart::after {
+            content: "";
+            position: absolute;
+            left: 7%;
+            right: 7%;
+            bottom: 18%;
+            height: 0.42cqh;
+            border-radius: 1cqh;
+            background: var(--mds-l2, rgba(15, 23, 42, 0.45));
+            box-shadow:
+              3.5cqw -2.3cqh 0 var(--mds-l2, rgba(15, 23, 42, 0.45)),
+              7cqw -1.1cqh 0 var(--mds-l2, rgba(15, 23, 42, 0.45)),
+              10.5cqw -4.6cqh 0 var(--mds-l2, rgba(15, 23, 42, 0.45)),
+              14cqw -3.6cqh 0 var(--mds-l2, rgba(15, 23, 42, 0.45)),
+              17.5cqw -6.7cqh 0 var(--mds-l2, rgba(15, 23, 42, 0.45));
+          }
+        </style>
+
+        <div
+          id="multi-device-splay-clip"
+          class="mds-clip clip"
+          data-start="0"
+          data-duration="4.5"
+          data-track-index="0"
+        >
+          <div class="mds-stage">
+            <div class="mds-positioner mds-positioner-desktop" data-device="desktop">
+              <div class="mds-device mds-desktop">
+                <div class="mds-monitor">
+                  <div class="mds-screen">
+                    <div class="mds-desktop-ui">
+                      <div class="mds-desktop-toolbar">
+                        <span class="mds-window-dot mds-window-dot-accent"></span>
+                        <span class="mds-window-dot"></span>
+                        <span class="mds-window-dot"></span>
+                        <span class="mds-address"></span>
+                      </div>
+                      <div class="mds-desktop-nav">
+                        <div class="mds-nav-mark"></div>
+                        <div class="mds-nav-line mds-nav-line-active"></div>
+                        <div class="mds-nav-line"></div>
+                        <div class="mds-nav-line"></div>
+                        <div class="mds-nav-line"></div>
+                      </div>
+                      <div class="mds-desktop-main">
+                        <div class="mds-desktop-heading"></div>
+                        <div class="mds-desktop-stats">
+                          <div class="mds-desktop-stat"></div>
+                          <div class="mds-desktop-stat"></div>
+                          <div class="mds-desktop-stat"></div>
+                        </div>
+                        <div class="mds-desktop-chart"></div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="mds-stand-neck"></div>
+                <div class="mds-stand-foot"></div>
+              </div>
+            </div>
+
+            <div class="mds-positioner mds-positioner-tablet" data-device="tablet">
+              <div class="mds-device mds-shell mds-tablet">
+                <div class="mds-screen">
+                  <span class="mds-camera"></span>
+                  <div class="mds-tablet-ui">
+                    <div class="mds-tablet-nav">
+                      <div class="mds-nav-mark"></div>
+                      <div class="mds-nav-line mds-nav-line-active"></div>
+                      <div class="mds-nav-line"></div>
+                      <div class="mds-nav-line"></div>
+                    </div>
+                    <div class="mds-tablet-main">
+                      <div class="mds-tablet-header">
+                        <div class="mds-line"></div>
+                        <div class="mds-line"></div>
+                      </div>
+                      <div class="mds-tablet-hero"></div>
+                      <div class="mds-tablet-grid">
+                        <div class="mds-tablet-card"></div>
+                        <div class="mds-tablet-card"></div>
+                        <div class="mds-tablet-card"></div>
+                        <div class="mds-tablet-card"></div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="mds-positioner mds-positioner-phone" data-device="phone">
+              <div class="mds-device mds-shell mds-phone">
+                <div class="mds-screen">
+                  <span class="mds-island"></span>
+                  <div class="mds-mobile-ui">
+                    <div class="mds-mobile-header">
+                      <span class="mds-logo"></span>
+                      <span class="mds-line"></span>
+                    </div>
+                    <div class="mds-mobile-hero"></div>
+                    <div class="mds-mobile-row">
+                      <span class="mds-mobile-icon"></span>
+                      <span>
+                        <span class="mds-line"></span>
+                        <span class="mds-line"></span>
+                      </span>
+                    </div>
+                    <div class="mds-mobile-row">
+                      <span class="mds-mobile-icon"></span>
+                      <span>
+                        <span class="mds-line"></span>
+                        <span class="mds-line"></span>
+                      </span>
+                    </div>
+                    <div class="mds-mobile-row">
+                      <span class="mds-mobile-icon"></span>
+                      <span>
+                        <span class="mds-line"></span>
+                        <span class="mds-line"></span>
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var accentColors = {
+              green: "var(--brand, #22c55e)",
+              blue: "var(--accent, #3b82f6)",
+              violet: "var(--accent-2, #8b5cf6)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "blue";
+            root.style.setProperty("--mds-accent", accentColors[accent]);
+
+            var IN_BASE = 1.35;
+            var OUT_BASE = 0.55;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4.5"));
+            var totalBase = IN_BASE + OUT_BASE;
+            var envelopeScale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * envelopeScale;
+            var OUT = OUT_BASE * envelopeScale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var HOLD_START = IN;
+            var OUT_START = IN + HOLD;
+
+            var devices = [
+              {
+                element: root.querySelector('[data-device="phone"]'),
+                x: -30,
+                y: 3.5,
+                rotation: -12,
+                floatY: -0.65,
+                floatRotation: -0.55,
+              },
+              {
+                element: root.querySelector('[data-device="tablet"]'),
+                x: -5,
+                y: -1,
+                rotation: 0,
+                floatY: 0.7,
+                floatRotation: 0.35,
+              },
+              {
+                element: root.querySelector('[data-device="desktop"]'),
+                x: 24,
+                y: 2,
+                rotation: 12,
+                floatY: -0.5,
+                floatRotation: 0.5,
+              },
+            ];
+
+            var CASCADE = 0.12 * envelopeScale;
+            var FAN_DURATION = 0.9 * envelopeScale;
+            var tl = gsap.timeline({ paused: true });
+
+            devices.forEach(function (device, index) {
+              gsap.set(device.element, {
+                x: "0cqw",
+                y: "9cqh",
+                rotation: 0,
+                scale: 0.9,
+                opacity: 0,
+              });
+              tl.to(
+                device.element,
+                {
+                  x: device.x + "cqw",
+                  y: device.y + "cqh",
+                  rotation: device.rotation,
+                  scale: 1,
+                  opacity: 1,
+                  duration: FAN_DURATION,
+                  ease: "back.out(1.7)",
+                },
+                index * CASCADE,
+              );
+            });
+
+            if (HOLD > 0) {
+              devices.forEach(function (device) {
+                tl.to(
+                  device.element,
+                  {
+                    y: device.y + device.floatY + "cqh",
+                    rotation: device.rotation + device.floatRotation,
+                    duration: HOLD / 2,
+                    ease: "sine.inOut",
+                  },
+                  HOLD_START,
+                );
+                tl.to(
+                  device.element,
+                  {
+                    y: device.y + "cqh",
+                    rotation: device.rotation,
+                    duration: HOLD / 2,
+                    ease: "sine.inOut",
+                  },
+                  HOLD_START + HOLD / 2,
+                );
+              });
+            }
+
+            devices.forEach(function (device) {
+              tl.to(
+                device.element,
+                {
+                  y: device.y + 5 + "cqh",
+                  scale: 0.96,
+                  opacity: 0,
+                  duration: OUT,
+                  ease: "power2.in",
+                },
+                OUT_START,
+              );
+            });
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["multi-device-splay"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add multi-device-splay" />
+
+That writes one file: `compositions/components/multi-device-splay.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/multi-device-splay.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `device` `phone` `tablet` `desktop` `splay`.
+
+## 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/components/multiplayer-cursors.mdx b/docs/catalog/components/multiplayer-cursors.mdx
new file mode 100644
index 0000000000..11be49602b
--- /dev/null
+++ b/docs/catalog/components/multiplayer-cursors.mdx
@@ -0,0 +1,471 @@
+---
+title: "Multiplayer Cursors"
+description: "Labeled collaborator cursors with token-derived colors and soft glows drift from spread positions into a shared center zone, proving live multiplayer presence."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/multiplayer-cursors.html"
+  compositionId="multiplayer-cursors"
+  compositionSrc="compositions/components/multiplayer-cursors.html"
+  variables={[{"id":"cursorCount","type":"number","role":"content","label":"Cursor count","description":"Number of labeled collaborator cursors.","default":4,"min":2,"max":6,"step":1},{"id":"labels","type":"string","role":"content","label":"Labels","description":"Comma-separated cursor names, in order.","default":"Ana,Ken,Wen,Mia"}]}
+>
+
+```html multiplayer-cursors.html
+<!doctype html>
+<!--
+  multiplayer-cursors, HyperFrames video primitive (pointers / loop / prove)
+
+  Concept: labeled collaborator cursors, each with an SVG pointer, matching
+  name chip, and soft color glow, reveal from spread positions and glide into
+  a shared center zone. Their gentle authored drift makes live multiplayer
+  presence visible without requiring a product-specific subject.
+
+  Compiled-from evidence: power-reel source 15-frosted-cursors.html
+  (production 60s reel, 2026-07). This extracts the deterministic labeled
+  cursor mechanic and patches the multiplayer-arrows hole predicted by the
+  pointers family definition. It does not carry over that reel's subject,
+  background workspace, frosted chip, real pointer, or You cursor.
+
+  Use when: proving that a canvas, document, board, or workspace supports live
+  collaboration, shared presence, or multiple people editing together.
+
+  Variables (declared in data-composition-variables below):
+    - cursorCount (number, default 4, range 2 to 6): visible collaborators.
+    - labels (string, default "Ana,Ken,Wen,Mia"): comma-separated names in
+      cursor order. Missing or blank entries become deterministic Guest names.
+
+  Envelope (fixed IN/OUT, elastic HOLD only, never gsap.timeScale()):
+    IN_BASE  = 0.70s  layer settles in and cursors reveal with a fixed stagger
+    HOLD     = elastic = max(0, D - (IN_BASE + OUT_BASE)); cursors converge,
+               then drift between authored center-zone points for a finite
+               number of sine.inOut legs that exactly fill the available time
+    OUT_BASE = 0.50s  layer accelerates into a clean fade
+    If D < IN_BASE + OUT_BASE, IN and OUT scale down together so IN + OUT == D
+    and HOLD == 0.
+
+  Sync point: none. This ambient collaboration loop has no causal action or
+  fixed event that another primitive needs to synchronize with.
+
+  Sound cue: none. The cursor motion is ambient and dispatches no hf:sfx event.
+
+  Mount contract: this file is a mountable sub-composition. A host loads it via
+  data-composition-src, and the runtime clones only <template> contents. The
+  root carries no data-width/data-height. It fills the host slot with
+  position:absolute, inset:0, and container-type:size, so every measurement can
+  stay container-relative. The root is styled by #root, never by a class. The
+  hardcoded timeline key remains "multiplayer-cursors" after mount flattening
+  strips data-composition-id from the mounted root. Variables come only from
+  window.__hyperframes.getVariables(), which owns merged defaults and host
+  overrides inside a mounted composition.
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "cursorCount", "type": "number", "role": "content", "label": "Cursor count", "description": "Number of labeled collaborator cursors.", "default": 4, "min": 2, "max": 6, "step": 1 },
+    { "id": "labels", "type": "string", "role": "content", "label": "Labels", "description": "Comma-separated cursor names, in order.", "default": "Ana,Ken,Wen,Mia" }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Multiplayer Cursors</title>
+    <!-- Metadata only. Mounting discards everything outside <template>. -->
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="multiplayer-cursors" data-duration="6" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          /* Root: elastic and position-blind. The host owns its box. Styled by
+             #root so composition scoping continues to match after mounting. */
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+          }
+
+          .mc-clip,
+          .mc-stage,
+          .mc-layer {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+          }
+
+          .mc-stage {
+            transform-origin: center;
+          }
+
+          /* EDIT ZONE: the focus ring is only a neutral convergence landmark.
+             Keep it secondary to the cursors and derived from theme tokens. */
+          .mc-focus {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            width: 15cqw;
+            aspect-ratio: 1;
+            border: 0.18cqw solid color-mix(in srgb, var(--border, #334155) 72%, transparent);
+            border-radius: var(--radius, 999cqw);
+            background: radial-gradient(
+              circle,
+              color-mix(in srgb, var(--surface, #1e293b) 78%, transparent) 0 28%,
+              color-mix(in srgb, var(--brand, #22c55e) 18%, transparent) 30% 48%,
+              transparent 70%
+            );
+            box-shadow:
+              0 0 8cqw color-mix(in srgb, var(--accent, #38bdf8) 16%, transparent),
+              inset 0 0 2.4cqw color-mix(in srgb, var(--brand, #22c55e) 16%, transparent);
+            transform: translate(-50%, -50%);
+            opacity: 0.78;
+          }
+
+          .mc-focus::after {
+            content: "";
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            width: 1.35cqw;
+            aspect-ratio: 1;
+            border-radius: var(--radius, 999cqw);
+            background: var(--brand, #22c55e);
+            box-shadow: 0 0 2.4cqw color-mix(in srgb, var(--brand, #22c55e) 55%, transparent);
+            transform: translate(-50%, -50%);
+          }
+
+          .mc-layer {
+            z-index: 2;
+          }
+
+          /* INVARIANT: each cursor is a sized block. GSAP owns only x, y,
+             rotation, scale, and opacity, so seeked spatial state is stable. */
+          .mc-cursor {
+            position: absolute;
+            left: 0;
+            top: 0;
+            display: block;
+            width: 20cqw;
+            height: 10cqh;
+            color: var(--mc-color, var(--brand, #22c55e));
+            transform-origin: 0 0;
+            will-change: transform, opacity;
+          }
+
+          .mc-cursor[data-tone="0"] {
+            --mc-color: var(--brand, #22c55e);
+          }
+
+          .mc-cursor[data-tone="1"] {
+            --mc-color: var(--accent, #38bdf8);
+          }
+
+          .mc-cursor[data-tone="2"] {
+            --mc-color: color-mix(
+              in oklch longer hue,
+              var(--brand, #22c55e) 72%,
+              var(--accent, #38bdf8)
+            );
+          }
+
+          .mc-cursor[data-tone="3"] {
+            --mc-color: color-mix(
+              in oklch longer hue,
+              var(--brand, #22c55e) 44%,
+              var(--accent, #38bdf8)
+            );
+          }
+
+          .mc-cursor[data-tone="4"] {
+            --mc-color: color-mix(in oklch, var(--brand, #22c55e) 38%, var(--accent, #38bdf8));
+          }
+
+          .mc-cursor[data-tone="5"] {
+            --mc-color: color-mix(in srgb, var(--accent, #38bdf8) 68%, var(--fg, #f8fafc));
+          }
+
+          .mc-glow {
+            position: absolute;
+            left: -6.5cqw;
+            top: -6.5cqw;
+            z-index: -1;
+            width: 16cqw;
+            aspect-ratio: 1;
+            border-radius: var(--radius, 999cqw);
+            background: radial-gradient(
+              circle,
+              color-mix(in srgb, var(--mc-color, var(--brand, #22c55e)) 44%, transparent),
+              transparent 72%
+            );
+            filter: blur(1.4cqw);
+            opacity: 0.58;
+          }
+
+          .mc-pointer {
+            position: absolute;
+            left: 0;
+            top: 0;
+            display: block;
+            width: 4.8cqw;
+            height: 4.8cqw;
+            filter: drop-shadow(
+              0 0.45cqw 0.7cqw color-mix(in srgb, var(--bg, #0b1120) 58%, transparent)
+            );
+          }
+
+          .mc-pointer path {
+            fill: currentColor;
+            stroke: var(--fg, #f8fafc);
+            stroke-width: 1.35;
+            stroke-linejoin: round;
+          }
+
+          .mc-label {
+            position: absolute;
+            left: 3.45cqw;
+            top: 3.55cqw;
+            display: block;
+            max-width: 15cqw;
+            overflow: hidden;
+            padding: var(--space-1, 0.7cqw) var(--space-2, 1.25cqw);
+            border: 0.12cqw solid color-mix(in srgb, var(--fg, #f8fafc) 30%, transparent);
+            border-radius: var(--radius, 1.2cqw);
+            border-top-left-radius: 0.32cqw;
+            background: color-mix(
+              in srgb,
+              var(--mc-color, var(--brand, #22c55e)) 84%,
+              var(--surface, #1e293b)
+            );
+            color: var(--fg, #0b1120);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: 2.15cqw;
+            font-weight: 720;
+            line-height: 1;
+            letter-spacing: 0.01em;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            box-shadow:
+              0 0.65cqw 1.5cqw color-mix(in srgb, var(--bg, #0b1120) 32%, transparent),
+              inset 0 0.12cqw 0 color-mix(in srgb, var(--fg, #f8fafc) 22%, transparent);
+          }
+        </style>
+
+        <div
+          id="multiplayer-cursors-clip"
+          class="mc-clip clip"
+          data-start="0"
+          data-duration="6"
+          data-track-index="0"
+        >
+          <div class="mc-stage">
+            <div class="mc-focus" aria-hidden="true"></div>
+            <div class="mc-layer" aria-hidden="true"></div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.currentScript.closest("#root") || document.getElementById("root");
+            // Literal by contract: mount flattening strips data-composition-id
+            // from the mounted inner root before this registration is consumed.
+            var compositionId = "multiplayer-cursors";
+            var stage = root.querySelector(".mc-stage");
+            var layer = root.querySelector(".mc-layer");
+
+            // EDIT ZONE: variable defaults mirror the outer declaration.
+            // getVariables owns the declared-defaults-plus-host-overrides merge.
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            // INVARIANT: count is always an integer in the declared 2 to 6 range.
+            var rawCount = Number(vars.cursorCount);
+            var cursorCount = Math.max(
+              2,
+              Math.min(6, Number.isFinite(rawCount) ? Math.round(rawCount) : 4),
+            );
+            var rawLabels = vars.labels == null ? "Ana,Ken,Wen,Mia" : String(vars.labels);
+            var parsedLabels = rawLabels.split(",").map(function (label) {
+              return label.trim();
+            });
+
+            // Authored percentages are the single source for every path. Each
+            // row is start, gather, drift, then the matching rotations.
+            var WAYPOINTS = [
+              { start: [10, 16], gather: [42, 40], drift: [46, 36], rotation: [-10, 2, 6] },
+              { start: [66, 12], gather: [52, 38], drift: [58, 42], rotation: [8, -3, 4] },
+              { start: [76, 38], gather: [57, 49], drift: [54, 55], rotation: [12, 3, -4] },
+              { start: [64, 76], gather: [53, 59], drift: [48, 57], rotation: [-8, 4, -3] },
+              { start: [20, 76], gather: [43, 60], drift: [38, 55], rotation: [9, -4, 5] },
+              { start: [7, 46], gather: [38, 50], drift: [42, 45], rotation: [-12, 3, -5] },
+            ];
+            var POINTER_SVG =
+              '<svg class="mc-pointer" viewBox="0 0 24 24" fill="none"><path d="M5.5 3.21V20.8c0 .45.54.67.85.35l4.86-4.86a.5.5 0 0 1 .35-.15h6.87c.48 0 .72-.58.38-.92L5.94 2.47a.5.5 0 0 0-.44.74Z" /></svg>';
+            var cursors = [];
+
+            for (var index = 0; index < cursorCount; index += 1) {
+              var cursor = document.createElement("div");
+              cursor.className = "mc-cursor";
+              cursor.dataset.tone = String(index);
+              cursor.innerHTML = '<span class="mc-glow"></span>' + POINTER_SVG;
+
+              var label = document.createElement("span");
+              label.className = "mc-label";
+              label.textContent = parsedLabels[index] || "Guest " + (index + 1);
+              cursor.appendChild(label);
+              layer.appendChild(cursor);
+              cursors.push({ element: cursor, path: WAYPOINTS[index] });
+            }
+
+            // RETIME RANGE: fixed envelope values and authored motion cadence.
+            // HOLD alone expands. Finite drift legs are floored, then stretched
+            // evenly to fill their remaining window without overshooting OUT.
+            var IN_BASE = 0.7;
+            var OUT_BASE = 0.5;
+            var STAGE_IN_BASE = 0.42;
+            var REVEAL_BASE = 0.26;
+            var REVEAL_STAGGER_BASE = 0.055;
+            var MOVE_STAGGER_BASE = 0.035;
+            var CONVERGE_BASE = 1.35;
+            var beat = parseFloat(getComputedStyle(root).getPropertyValue("--dur-beat")) || 0.55;
+            var DRIFT_LEG_BASE = Math.max(0.55, beat * 1.45);
+
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "6"));
+            var totalBase = IN_BASE + OUT_BASE;
+            var envelopeScale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * envelopeScale;
+            var OUT = OUT_BASE * envelopeScale;
+            var STAGE_IN = STAGE_IN_BASE * envelopeScale;
+            var REVEAL = REVEAL_BASE * envelopeScale;
+            var REVEAL_STAGGER = REVEAL_STAGGER_BASE * envelopeScale;
+            var MOVE_STAGGER = MOVE_STAGGER_BASE * envelopeScale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var HOLD_START = IN;
+            var OUT_START = IN + HOLD;
+            var CONVERGE = Math.min(CONVERGE_BASE * envelopeScale, HOLD);
+            var DRIFT_START = HOLD_START + CONVERGE;
+            var DRIFT_WINDOW = Math.max(0, HOLD - CONVERGE);
+
+            gsap.set(stage, { opacity: 0, scale: 0.97 });
+            cursors.forEach(function (cursor) {
+              gsap.set(cursor.element, {
+                x: cursor.path.start[0] + "cqw",
+                y: cursor.path.start[1] + "cqh",
+                rotation: cursor.path.rotation[0],
+                opacity: 0,
+                scale: 0.92,
+              });
+            });
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: emphatic layer settle and deterministic per-cursor reveal.
+            tl.to(stage, { opacity: 1, scale: 1, duration: STAGE_IN, ease: "power3.out" }, 0);
+            cursors.forEach(function (cursor, index) {
+              tl.to(
+                cursor.element,
+                { opacity: 1, scale: 1, duration: REVEAL, ease: "power2.out" },
+                index * REVEAL_STAGGER,
+              );
+            });
+
+            // HOLD: authored sine convergence, then a finite center-zone loop.
+            if (CONVERGE > 0) {
+              cursors.forEach(function (cursor, index) {
+                var moveDelay = Math.min(index * MOVE_STAGGER, CONVERGE * 0.35);
+                tl.to(
+                  cursor.element,
+                  {
+                    x: cursor.path.gather[0] + "cqw",
+                    y: cursor.path.gather[1] + "cqh",
+                    rotation: cursor.path.rotation[1],
+                    duration: Math.max(0.001, CONVERGE - moveDelay),
+                    ease: "sine.inOut",
+                  },
+                  HOLD_START + moveDelay,
+                );
+              });
+            }
+
+            if (DRIFT_WINDOW >= DRIFT_LEG_BASE) {
+              cursors.forEach(function (cursor, index) {
+                var driftDelay = Math.min(index * MOVE_STAGGER, DRIFT_WINDOW * 0.12);
+                var cursorWindow = Math.max(0, DRIFT_WINDOW - driftDelay);
+                var driftLegCount = Math.max(1, Math.floor(cursorWindow / DRIFT_LEG_BASE));
+                var driftLeg = cursorWindow / driftLegCount;
+                var driftRepeat = Math.max(0, driftLegCount - 1);
+                tl.fromTo(
+                  cursor.element,
+                  {
+                    x: cursor.path.gather[0] + "cqw",
+                    y: cursor.path.gather[1] + "cqh",
+                    rotation: cursor.path.rotation[1],
+                  },
+                  {
+                    x: cursor.path.drift[0] + "cqw",
+                    y: cursor.path.drift[1] + "cqh",
+                    rotation: cursor.path.rotation[2],
+                    duration: driftLeg,
+                    ease: "sine.inOut",
+                    immediateRender: false,
+                    yoyo: true,
+                    repeat: driftRepeat,
+                  },
+                  DRIFT_START + driftDelay,
+                );
+              });
+            }
+
+            // OUT: asymmetric accelerated fade, while HOLD motion resolves.
+            tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add multiplayer-cursors" />
+
+That writes one file: `compositions/components/multiplayer-cursors.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/multiplayer-cursors.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `cursor` `pointer` `multiplayer` `collaboration` `presence` `loop` `prove`.
+
+## 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/components/native-notification-pop.mdx b/docs/catalog/components/native-notification-pop.mdx
new file mode 100644
index 0000000000..001aede6ff
--- /dev/null
+++ b/docs/catalog/components/native-notification-pop.mdx
@@ -0,0 +1,498 @@
+---
+title: "Native Notification Pop"
+description: "One system-faithful notification banner (iOS or macOS) drops in over any scene on an accurate interruptible spring: fast arrival, soft overshoot, settled mass, backdrop blur, app dot, title, one body line. Holds; tucks away only via exit."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/native-notification-pop.html"
+  compositionId="native-notification-pop"
+  compositionSrc="compositions/components/native-notification-pop.html"
+  variables={[{"id":"title","type":"string","role":"content","label":"Title","description":"The notification title line.","default":"Render complete"},{"id":"body","type":"string","role":"content","label":"Body","description":"One body line. Long lines truncate with an ellipsis.","default":"launch-cut.mp4 is ready to preview"},{"id":"app_label","type":"string","role":"content","label":"App label","description":"Small-caps app name row beside the app dot.","default":"HyperFrames"},{"id":"os","type":"enum","role":"style","label":"OS","description":"Banner geometry and placement: wide centered iOS or compact top-right macOS.","default":"ios","options":[{"value":"ios","label":"iOS"},{"value":"macos","label":"macOS"}]},{"id":"at","type":"number","role":"timing","label":"Drop start","description":"Seconds after mount start when the banner drops in.","default":0.3,"min":0,"max":8,"step":0.05,"unit":"s"},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"App dot color.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"None holds the banner; up tucks it back off the top; fade fades it in place.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
+>
+
+```html native-notification-pop.html
+<!doctype html>
+<!--
+  native-notification-pop: HyperFrames video primitive (product-demo / overlay)
+
+  One system-faithful notification banner drops in over ANY scene: fast
+  arrival, soft overshoot, settled mass. The os enum picks the chrome
+  geometry: ios is a wide centered banner with a large radius, macos is a
+  compact top-right banner. The banner carries an app dot, an app label, a
+  title, and one body line over a backdrop-filter blur; it holds at rest and
+  tucks away only via the exit variable. Distinct from notification-stack:
+  this is overlay chrome, faithful to the OS, one banner.
+
+  Spring law: arrival is a closed-form underdamped spring sampled from a
+  linear driver, y(t) = -offset * e^(-zeta*w*t) * (cos(wd*t) +
+  (zeta*w/wd) * sin(wd*t)). Position is a pure function of timeline time, so
+  forward seeks, reverse seeks, and repeated seeks are byte-identical, and a
+  mid-motion redirect (an exit overlapping the drop) picks up the current
+  sampled position instead of snapping (Wave K L1): banner y has exactly one
+  owner at any time (spring sampler, then the rest pin, then the exit tween,
+  in timeline order), and the drop cue is clamped so the spring always
+  completes before OUT begins.
+
+  Backdrop blur: the banner uses backdrop-filter blur + saturate over the
+  scene. If a host compositor flattens or lags the blur under seeks, remove
+  the backdrop-filter lines; the color-mix surface fill underneath is opaque
+  enough to carry the banner on its own (verified fallback).
+
+  Slot (see README.md for a worked example):
+    - [data-slot="scene"]: the full-bleed background the banner drops over.
+      Replace the children of this element in your installed copy. Default:
+      a token backdrop with soft color fields and a skeleton card, saturated
+      enough that the banner blur visibly reads.
+
+  Variables (declared in data-composition-variables below):
+    - title (string): the notification title line.
+    - body (string): one body line. Long lines truncate with an ellipsis.
+    - app_label (string, default "HyperFrames"): small-caps app name row.
+    - os (ios | macos, default ios): banner geometry and placement.
+    - at (number, seconds, default 0.3): when the drop starts, relative to
+      mount start. Clamped so the spring settles before any exit.
+    - accent (green | blue | violet, default green): app dot color.
+      green maps to --brand, blue to --accent, violet to --accent-2.
+    - exit (none | fade | up, default none): none holds the banner at rest;
+      up tucks the banner back off the top (the native dismiss); fade fades
+      it in place. The scene slot holds regardless: frame roots own scene
+      transitions.
+
+  Envelope (fixed IN/OUT, elastic HOLD only, never gsap.timeScale()):
+    IN   = at + 0.9s spring drop (first contact with rest at at + ~0.31s)
+    HOLD = elastic; the banner rests dead still
+    OUT  = 0.45s when exit is fade or up, 0 when exit is none
+
+  Sound cue: dispatches a bubbling `hf:sfx` CustomEvent with id
+  "notification-pop" at first contact with rest. This primitive never plays
+  audio.
+
+  Mount contract: MOUNTABLE SUB-COMPOSITION. The runtime clones only
+  <template> contents; #root fills the host box (inset: 0, container-type:
+  size), has no data-width/data-height, and registers one paused timeline
+  under the literal "native-notification-pop" key. Variables come from
+  window.__hyperframes.getVariables().
+-->
+<html
+  lang="en"
+  data-composition-id="native-notification-pop"
+  data-composition-duration="3"
+  data-composition-variables='[
+    { "id": "title", "type": "string", "role": "content", "label": "Title", "description": "The notification title line.", "default": "Render complete" },
+    { "id": "body", "type": "string", "role": "content", "label": "Body", "description": "One body line. Long lines truncate with an ellipsis.", "default": "launch-cut.mp4 is ready to preview" },
+    { "id": "app_label", "type": "string", "role": "content", "label": "App label", "description": "Small-caps app name row beside the app dot.", "default": "HyperFrames" },
+    { "id": "os", "type": "enum", "role": "style", "label": "OS", "description": "Banner geometry and placement: wide centered iOS or compact top-right macOS.", "default": "ios", "options": [{ "value": "ios", "label": "iOS" }, { "value": "macos", "label": "macOS" }] },
+    { "id": "at", "type": "number", "role": "timing", "label": "Drop start", "description": "Seconds after mount start when the banner drops in.", "default": 0.3, "min": 0, "max": 8, "step": 0.05, "unit": "s" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "App dot color.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "None holds the banner; up tucks it back off the top; fade fades it in place.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Native Notification Pop</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="native-notification-pop" data-duration="3" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            background: var(--bg, #07111f);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .nnp-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+          }
+
+          .nnp-slot,
+          .nnp-slot > img,
+          .nnp-slot > video {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+          }
+
+          .nnp-slot > img,
+          .nnp-slot > video {
+            object-fit: cover;
+          }
+
+          /* Token backdrop default: soft saturated color fields plus a
+             skeleton card, so the banner blur has structure to smear.
+             Callers replacing slot children never see any of this. */
+          .nnp-default {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            background:
+              radial-gradient(
+                50cqw 42cqh at 24% 12%,
+                color-mix(in srgb, var(--brand, #22c55e) 34%, transparent) 0%,
+                transparent 70%
+              ),
+              radial-gradient(
+                46cqw 40cqh at 82% 26%,
+                color-mix(in srgb, var(--accent-2, #c5a3ff) 30%, transparent) 0%,
+                transparent 70%
+              ),
+              radial-gradient(
+                ellipse at 50% 90%,
+                color-mix(in srgb, var(--surface, #172033) 80%, var(--bg, #07111f)) 0%,
+                var(--bg, #07111f) 78%
+              );
+          }
+
+          .nnp-card {
+            width: 52cqw;
+            padding: var(--space-3, 4cqh) var(--space-3, 4cqw);
+            border: 0.16cqmin solid var(--border, #334155);
+            border-radius: var(--radius, 2.4cqmin);
+            background: color-mix(in srgb, var(--surface, #172033) 88%, var(--bg, #07111f));
+          }
+
+          .nnp-card-bar {
+            width: 34%;
+            height: 4.2cqh;
+            margin-bottom: var(--space-3, 4cqh);
+            border-radius: 1.2cqh;
+            background: var(--muted, #94a3b8);
+            opacity: 0.55;
+          }
+
+          .nnp-card-line {
+            height: 2.2cqh;
+            margin-bottom: var(--space-2, 2.6cqh);
+            border-radius: 1.2cqh;
+            background: var(--muted, #94a3b8);
+            opacity: 0.38;
+          }
+
+          .nnp-card-line:nth-of-type(2) {
+            width: 90%;
+          }
+
+          .nnp-card-line:nth-of-type(3) {
+            width: 62%;
+          }
+
+          /* The anchor owns placement so the banner transform belongs to the
+             spring alone (a translateX(-50%) centering transform would be
+             clobbered by the gsap y). */
+          .nnp-anchor {
+            position: absolute;
+            inset: 0 0 auto 0;
+            display: flex;
+            z-index: 3;
+          }
+
+          .nnp-anchor[data-os="ios"] {
+            justify-content: center;
+            padding-top: 4.5cqh;
+          }
+
+          .nnp-anchor[data-os="macos"] {
+            justify-content: flex-end;
+            padding: 3.5cqh 2.2cqw 0 0;
+          }
+
+          .nnp-banner {
+            display: flex;
+            align-items: center;
+            gap: var(--space-2, 2.4cqmin);
+            border: 0.14cqmin solid color-mix(in srgb, var(--fg, #f8fafc) 16%, transparent);
+            background: color-mix(in srgb, var(--surface, #172033) 62%, transparent);
+            -webkit-backdrop-filter: blur(3.2cqmin) saturate(140%);
+            backdrop-filter: blur(3.2cqmin) saturate(140%);
+            box-shadow: 0 2.4cqh 7cqh color-mix(in srgb, var(--bg, #07111f) 50%, transparent);
+            will-change: transform;
+          }
+
+          .nnp-anchor[data-os="ios"] .nnp-banner {
+            width: 58cqw;
+            border-radius: 3.6cqmin;
+            padding: 2.6cqmin 3cqmin;
+          }
+
+          .nnp-anchor[data-os="macos"] .nnp-banner {
+            width: 38cqw;
+            border-radius: 2.2cqmin;
+            padding: 2.2cqmin 2.6cqmin;
+          }
+
+          .nnp-dot {
+            flex: 0 0 auto;
+            width: 5.4cqmin;
+            aspect-ratio: 1;
+            border-radius: 30%;
+            background: linear-gradient(
+              160deg,
+              color-mix(in srgb, var(--nnp-accent) 72%, var(--fg, #f8fafc)) 0%,
+              var(--nnp-accent) 62%
+            );
+          }
+
+          .nnp-anchor[data-os="macos"] .nnp-dot {
+            width: 4.6cqmin;
+            border-radius: 24%;
+          }
+
+          .nnp-copy {
+            flex: 1 1 auto;
+            min-width: 0;
+          }
+
+          .nnp-app,
+          .nnp-title,
+          .nnp-body {
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+          }
+
+          .nnp-app {
+            color: var(--muted, #94a3b8);
+            font-size: 1.9cqmin;
+            font-weight: 500;
+            letter-spacing: 0.11em;
+            line-height: 1.5;
+            text-transform: uppercase;
+          }
+
+          .nnp-app:empty {
+            display: none;
+          }
+
+          .nnp-title {
+            color: var(--fg, #f8fafc);
+            font-size: 2.7cqmin;
+            font-weight: 600;
+            line-height: 1.35;
+          }
+
+          .nnp-body {
+            color: var(--muted, #94a3b8);
+            font-size: 2.4cqmin;
+            font-weight: 400;
+            line-height: 1.4;
+          }
+        </style>
+
+        <div
+          id="native-notification-pop-clip"
+          class="nnp-clip clip"
+          data-start="0"
+          data-duration="3"
+          data-track-index="0"
+        >
+          <div class="nnp-slot" data-slot="scene">
+            <!-- SLOT "scene": replace the children of this element with your
+                 own full-bleed content (img, video, or HTML). -->
+            <div class="nnp-default" aria-hidden="true">
+              <div class="nnp-card">
+                <div class="nnp-card-bar"></div>
+                <div class="nnp-card-line"></div>
+                <div class="nnp-card-line"></div>
+              </div>
+            </div>
+          </div>
+
+          <div class="nnp-anchor" data-os="ios">
+            <div class="nnp-banner" role="status">
+              <div class="nnp-dot" aria-hidden="true"></div>
+              <div class="nnp-copy">
+                <div class="nnp-app"></div>
+                <div class="nnp-title"></div>
+                <div class="nnp-body"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            // Literal id: mount flattening strips data-composition-id from the
+            // live root before this timeline registers.
+            var compositionId = "native-notification-pop";
+            var clip = root.querySelector(".nnp-clip");
+            var anchor = root.querySelector(".nnp-anchor");
+            var banner = root.querySelector(".nnp-banner");
+
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var title = vars.title == null ? "Render complete" : String(vars.title);
+            var body = vars.body == null ? "launch-cut.mp4 is ready to preview" : String(vars.body);
+            var appLabel = vars.app_label == null ? "HyperFrames" : String(vars.app_label);
+            var os = vars.os === "macos" ? "macos" : "ios";
+            var rawAt = vars.at == null ? 0.3 : Number(vars.at);
+            var at = Number.isFinite(rawAt) ? Math.max(0, Math.min(8, rawAt)) : 0.3;
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #22c55e)",
+              blue: "var(--accent, #38bdf8)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            // The bundler mirrors composition variables as scoped CSS custom
+            // props, so this unit's own accent variable shadows the contract
+            // --accent token inside the subtree. When the shadow is present,
+            // fall back to the literal contract value instead of var(--accent).
+            var computedAccent = getComputedStyle(root).getPropertyValue("--accent").trim();
+            if (
+              computedAccent === "green" ||
+              computedAccent === "blue" ||
+              computedAccent === "violet"
+            ) {
+              accentColors.blue = "#38bdf8";
+            }
+            root.style.setProperty("--nnp-accent", accentColors[accent]);
+
+            anchor.setAttribute("data-os", os);
+            root.querySelector(".nnp-app").textContent = appLabel;
+            root.querySelector(".nnp-title").textContent = title;
+            root.querySelector(".nnp-body").textContent = body;
+            banner.setAttribute("aria-label", appLabel + ": " + title + ". " + body);
+
+            // RETIME RANGE: fixed phases; HOLD is the only elastic span.
+            var DROP = 0.9;
+            var OUT_BASE = exit === "none" ? 0 : 0.45;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "3"));
+            var OUT = Math.min(OUT_BASE, duration * 0.2);
+            var OUT_START = duration - OUT;
+            // The spring always settles before any exit: no second tween ever
+            // fights the sampler for banner y (Wave K L1 single-owner form).
+            at = Math.min(at, Math.max(0, OUT_START - DROP));
+
+            // Start fully above the frame: measured px at mount (cq-unit
+            // transform tweens misbehave under seeks; px measured once do not).
+            var clipTop = clip.getBoundingClientRect().top;
+            var bannerBottom = banner.getBoundingClientRect().bottom;
+            var offset = Math.max(1, bannerBottom - clipTop + 4);
+
+            // System spring constants, tuned against the iOS/macOS banner
+            // feel: first contact with rest at ~0.31s, ~3% soft overshoot,
+            // visually settled by ~0.7s.
+            var OMEGA = 15;
+            var ZETA = 0.74;
+            var OMEGA_D = OMEGA * Math.sqrt(1 - ZETA * ZETA);
+            function springEnvelope(t) {
+              return (
+                Math.exp(-ZETA * OMEGA * t) *
+                (Math.cos(OMEGA_D * t) + ((ZETA * OMEGA) / OMEGA_D) * Math.sin(OMEGA_D * t))
+              );
+            }
+            var LAND = Math.PI / OMEGA_D; // first contact with rest
+
+            function fireSfx(id, t) {
+              root.dispatchEvent(
+                new CustomEvent("hf:sfx", { detail: { id: id, t: t }, bubbles: true }),
+              );
+            }
+
+            gsap.set(banner, { y: -offset, opacity: 1 });
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: the spring drop. A linear driver samples the closed form,
+            // so position is a pure function of time and seeks in either
+            // direction land on identical frames.
+            var driver = { t: 0 };
+            tl.to(
+              driver,
+              {
+                t: DROP,
+                duration: DROP,
+                ease: "none",
+                onUpdate: function () {
+                  gsap.set(banner, { y: -offset * springEnvelope(driver.t) });
+                },
+              },
+              at,
+            );
+            // Pin exactly to rest for the hold (the envelope tail is ~0 but
+            // not exactly 0).
+            tl.set(banner, { y: 0 }, at + DROP);
+            tl.call(
+              function () {
+                fireSfx("notification-pop", at + LAND);
+              },
+              [],
+              at + LAND,
+            );
+
+            // HOLD: settled mass. Dead still.
+
+            // OUT: the banner tucks away only via exit; the scene holds
+            // (frame roots own scene transitions).
+            if (exit === "up") {
+              tl.to(banner, { y: -offset, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "fade") {
+              tl.to(banner, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add native-notification-pop" />
+
+That writes one file: `compositions/components/native-notification-pop.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/native-notification-pop.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `product-demo` `overlay` `notification` `spring`.
+
+## 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/components/notification-pileup.mdx b/docs/catalog/components/notification-pileup.mdx
new file mode 100644
index 0000000000..bad93d7418
--- /dev/null
+++ b/docs/catalog/components/notification-pileup.mdx
@@ -0,0 +1,505 @@
+---
+title: "Notification Pileup"
+description: "Mobile notification cards arrive faster and faster, each new alert pushing the existing stack downward into a dense, anxious tower."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/notification-pileup.html"
+  compositionId="notification-pileup"
+  compositionSrc="compositions/components/notification-pileup.html"
+  variables={[{"id":"count","type":"number","role":"content","label":"Notification count","description":"Number of notification cards in the final pile.","default":7,"min":4,"max":10,"step":1},{"id":"speed","type":"number","role":"timing","label":"Arrival speed","description":"Pacing multiplier for the accelerating notification arrivals.","default":1,"min":0.5,"max":2,"step":0.1},{"id":"showBadges","type":"enum","role":"content","label":"Unread badges","description":"Show or hide unread count badges on the notification cards.","default":"yes","options":[{"value":"yes","label":"Show badges"},{"value":"no","label":"Hide badges"}]}]}
+>
+
+```html notification-pileup.html
+<!doctype html>
+<!--
+  notification-pileup, HyperFrames video primitive (ui-props / loop / agitate)
+
+  Concept: mobile notification cards arrive faster than they can be read.
+  Every new card lands at the top and pushes the existing stack downward,
+  building an anxious but legible tower.
+
+  Compiled-from evidence: fixture; mobile mechanics inventory.
+
+  Use when: a scene needs a mobile-native shorthand for interruption,
+  overload, mounting demand, or attention pressure.
+
+  Variables (declared in data-composition-variables below):
+    - count (number, default 7, range 4 to 10): cards in the final pile.
+    - speed (number, default 1, range 0.5 to 2): authored arrival pacing.
+    - showBadges ("yes" | "no", default "yes"): unread badge visibility.
+
+  Envelope (fixed IN/OUT, elastic HOLD only, never gsap.timeScale()):
+    IN_BASE  = 3.30s  stage settles and every card arrives with accelerating
+               gaps, each new arrival pushing the existing pile downward
+    HOLD     = elastic = max(0, D - (IN_BASE + OUT_BASE)); the complete stack
+               remains dense and breathes on a finite sine.inOut cycle
+    OUT_BASE = 0.50s  the complete stack accelerates into a clean fade
+    If D < IN_BASE + OUT_BASE, IN and OUT scale down together so their sum
+    equals D and HOLD becomes zero.
+
+  Sync points: each notification arrival is a deterministic offset into IN,
+  stored once in arrivalTimes. The first is at 0.16s in an uncompressed IN;
+  later offsets follow max(floorGap, baseGap * decay^(n - 1) / speed), then
+  scale together only if needed to stay inside IN. No cue enters HOLD.
+
+  Sound cue: every card arrival dispatches an hf:sfx CustomEvent with id
+  "notification-soft" and its resolved fixed IN offset. The primitive only
+  dispatches cues, it never plays audio.
+
+  Mount contract: this is a mountable sub-composition. The runtime clones
+  only <template> contents. #root fills the host box, owns no width or height
+  metadata, and establishes the container query basis. Variables come only
+  from window.__hyperframes.getVariables(). The hardcoded timeline key stays
+  "notification-pileup" after mount flattening strips data-composition-id.
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "count", "type": "number", "role": "content", "label": "Notification count", "description": "Number of notification cards in the final pile.", "default": 7, "min": 4, "max": 10, "step": 1 },
+    { "id": "speed", "type": "number", "role": "timing", "label": "Arrival speed", "description": "Pacing multiplier for the accelerating notification arrivals.", "default": 1, "min": 0.5, "max": 2, "step": 0.1 },
+    { "id": "showBadges", "type": "enum", "role": "content", "label": "Unread badges", "description": "Show or hide unread count badges on the notification cards.", "default": "yes", "options": [{ "value": "yes", "label": "Show badges" }, { "value": "no", "label": "Hide badges" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Notification Pileup</title>
+    <!-- Metadata only. Mounting discards everything outside <template>. -->
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="notification-pileup" data-duration="8" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            background: var(--bg, #0b1120);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+          }
+
+          .np-clip,
+          .np-backdrop,
+          .np-stage {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+          }
+
+          .np-clip {
+            overflow: hidden;
+          }
+
+          .np-backdrop {
+            background:
+              radial-gradient(
+                circle at 50% 12%,
+                color-mix(in srgb, var(--accent, #38bdf8) 16%, transparent),
+                transparent 38%
+              ),
+              linear-gradient(
+                to bottom,
+                color-mix(in srgb, var(--surface, #1e293b) 28%, var(--bg, #0b1120)),
+                var(--bg, #0b1120)
+              );
+          }
+
+          .np-stage {
+            transform-origin: 50% 45%;
+            will-change: transform, opacity;
+          }
+
+          /* EDIT ZONE: stack geometry only. The card height and computed JS
+             step share this 79.5cqh safe region, including count 10. */
+          .np-stack {
+            position: absolute;
+            top: 8cqh;
+            left: 12cqw;
+            width: 76cqw;
+            height: 82cqh;
+          }
+
+          /* INVARIANT: each card is a sized block. GSAP owns only x, y,
+             rotation, scale, and opacity, so direct seeks stay deterministic. */
+          .np-card {
+            position: absolute;
+            top: 0;
+            left: 0;
+            display: grid;
+            grid-template-columns: 6.8cqh minmax(0, 1fr) auto;
+            align-items: center;
+            gap: var(--space-2, 1.5cqw);
+            width: 100%;
+            height: 11.5cqh;
+            overflow: hidden;
+            padding: var(--space-1, 1.3cqh) var(--space-2, 1.8cqw);
+            border: 0.14cqmin solid color-mix(in srgb, var(--border, #334155) 78%, transparent);
+            border-radius: var(--radius, 2.2cqmin);
+            background: color-mix(in srgb, var(--surface, #1e293b) 92%, var(--bg, #0b1120));
+            box-shadow:
+              0 1.1cqh 2.8cqh color-mix(in srgb, var(--bg, #0b1120) 42%, transparent),
+              inset 0 0.1cqmin 0 color-mix(in srgb, var(--fg, #f8fafc) 12%, transparent);
+            transform-origin: 50% 18%;
+            will-change: transform, opacity;
+          }
+
+          .np-icon {
+            display: grid;
+            place-items: center;
+            width: 6.8cqh;
+            height: 6.8cqh;
+            border-radius: calc(var(--radius, 2.2cqmin) * 0.72);
+            background: var(--np-icon-bg, var(--brand, #22c55e));
+            color: var(--bg, #0b1120);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: min(2.25cqw, 4cqh);
+            font-weight: 780;
+            line-height: 1;
+            box-shadow: inset 0 0.1cqmin 0 color-mix(in srgb, var(--fg, #f8fafc) 24%, transparent);
+          }
+
+          .np-card[data-tone="1"] {
+            --np-icon-bg: var(--accent, #38bdf8);
+          }
+
+          .np-card[data-tone="2"] {
+            --np-icon-bg: color-mix(in srgb, var(--brand, #22c55e) 58%, var(--accent, #38bdf8));
+          }
+
+          .np-card[data-tone="3"] {
+            --np-icon-bg: color-mix(in srgb, var(--accent, #38bdf8) 62%, var(--fg, #f8fafc));
+          }
+
+          .np-copy {
+            min-width: 0;
+            overflow: hidden;
+          }
+
+          .np-title,
+          .np-body {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          .np-title {
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: min(2.15cqw, 3.8cqh);
+            font-weight: 720;
+            line-height: 1.12;
+            letter-spacing: -0.01em;
+          }
+
+          .np-body {
+            margin-top: var(--space-1, 0.6cqh);
+            color: var(--muted, #94a3b8);
+            font-size: min(1.55cqw, 2.85cqh);
+            font-weight: 520;
+            line-height: 1.12;
+          }
+
+          .np-badge {
+            display: grid;
+            place-items: center;
+            min-width: 3.6cqh;
+            height: 3.6cqh;
+            padding-inline: var(--space-1, 0.65cqw);
+            border-radius: var(--radius, 999cqmin);
+            background: var(--accent, #38bdf8);
+            color: var(--bg, #0b1120);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: min(1.3cqw, 2.3cqh);
+            font-weight: 780;
+            line-height: 1;
+          }
+        </style>
+
+        <div
+          id="notification-pileup-clip"
+          class="np-clip clip"
+          data-start="0"
+          data-duration="8"
+          data-track-index="0"
+        >
+          <div class="np-backdrop" aria-hidden="true"></div>
+          <div class="np-stage" aria-label="A rapidly growing stack of mobile notifications">
+            <div class="np-stack"></div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.currentScript.closest("#root") || document.getElementById("root");
+            // Literal by contract: mount flattening strips data-composition-id
+            // before the runtime consumes this timeline registration.
+            var compositionId = "notification-pileup";
+            var stage = root.querySelector(".np-stage");
+            var stack = root.querySelector(".np-stack");
+
+            // EDIT ZONE: defaults mirror the outer variable declarations.
+            // getVariables owns the declared-defaults-plus-host-overrides merge.
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            // INVARIANT: count is always an integer in the declared 4 to 10 range.
+            var rawCount = Number(vars.count);
+            var count = Math.max(
+              4,
+              Math.min(10, Number.isFinite(rawCount) ? Math.round(rawCount) : 7),
+            );
+            // INVARIANT: speed remains finite and inside the declared 0.5 to 2 range.
+            var rawSpeed = Number(vars.speed);
+            var speed = Math.max(0.5, Math.min(2, Number.isFinite(rawSpeed) ? rawSpeed : 1));
+            // INVARIANT: malformed enum overrides resolve to the documented default.
+            var showBadges = vars.showBadges === "no" ? "no" : "yes";
+
+            // One ordered source owns content, icon tone, and badge copy.
+            var NOTIFICATIONS = [
+              { icon: "M", title: "Messages", body: "Can you take a quick look?", badge: "3" },
+              { icon: "C", title: "Calendar", body: "Stand-up moved to 10:30", badge: "1" },
+              { icon: "@", title: "Mail", body: "Five new replies in your thread", badge: "5" },
+              { icon: "U", title: "Updates", body: "A new version is ready", badge: "2" },
+              { icon: "T", title: "Tasks", body: "Deadline changed to today", badge: "7" },
+              { icon: "D", title: "Drive", body: "Someone requested access", badge: "4" },
+              { icon: "S", title: "Security", body: "New sign-in needs review", badge: "1" },
+              { icon: "#", title: "Social", body: "You have twelve new mentions", badge: "12" },
+              { icon: "N", title: "Notes", body: "Shared checklist was updated", badge: "6" },
+              { icon: "R", title: "Reminders", body: "Follow up before end of day", badge: "9" },
+            ];
+            var cards = [];
+
+            for (var index = 0; index < count; index += 1) {
+              var item = NOTIFICATIONS[index];
+              var card = document.createElement("article");
+              card.className = "np-card";
+              card.dataset.tone = String(index % 4);
+              card.style.zIndex = String(index + 1);
+
+              var icon = document.createElement("span");
+              icon.className = "np-icon";
+              icon.setAttribute("aria-hidden", "true");
+              icon.textContent = item.icon;
+
+              var copy = document.createElement("span");
+              copy.className = "np-copy";
+              var title = document.createElement("span");
+              title.className = "np-title";
+              title.textContent = item.title;
+              var body = document.createElement("span");
+              body.className = "np-body";
+              body.textContent = item.body;
+              copy.appendChild(title);
+              copy.appendChild(body);
+
+              card.appendChild(icon);
+              card.appendChild(copy);
+
+              if (showBadges === "yes") {
+                var badge = document.createElement("span");
+                badge.className = "np-badge";
+                badge.setAttribute("aria-label", item.badge + " unread");
+                badge.textContent = item.badge;
+                card.appendChild(badge);
+              }
+
+              stack.appendChild(card);
+              cards.push(card);
+            }
+
+            // RETIME RANGE: tune only these envelope and cadence values.
+            // speed scales authored gaps and entrance lengths directly. HOLD
+            // alone expands, and no branch uses gsap.timeScale().
+            var IN_BASE = 3.3;
+            var OUT_BASE = 0.5;
+            var STAGE_IN_BASE = 0.34;
+            var ARRIVAL_START_BASE = 0.16;
+            var ENTRY_DURATION_BASE = 0.38;
+            var PUSH_DURATION_BASE = 0.24;
+            var BASE_GAP = 0.78;
+            var GAP_DECAY = 0.78;
+            var FLOOR_GAP = 0.09;
+            var beat = parseFloat(getComputedStyle(root).getPropertyValue("--dur-beat")) || 0.5;
+            var BREATH_HALF = Math.max(0.65, beat * 1.8);
+
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "8"));
+            var totalBase = IN_BASE + OUT_BASE;
+            var envelopeScale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * envelopeScale;
+            var OUT = OUT_BASE * envelopeScale;
+            var STAGE_IN = STAGE_IN_BASE * envelopeScale;
+            var ARRIVAL_START = ARRIVAL_START_BASE * envelopeScale;
+            var ENTRY_DURATION =
+              Math.max(0.18, Math.min(0.5, ENTRY_DURATION_BASE / speed)) * envelopeScale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var HOLD_START = IN;
+            var OUT_START = IN + HOLD;
+            var STACK_STEP = Math.min(9.6, 68 / Math.max(1, count - 1));
+
+            // The same resolved array owns both animation and cue timing.
+            var rawGaps = [];
+            var rawGapTotal = 0;
+            for (var gapIndex = 1; gapIndex < count; gapIndex += 1) {
+              var gap = Math.max(FLOOR_GAP, (BASE_GAP * Math.pow(GAP_DECAY, gapIndex - 1)) / speed);
+              rawGaps.push(gap);
+              rawGapTotal += gap;
+            }
+            var availableGapWindow = Math.max(0, IN - ARRIVAL_START - ENTRY_DURATION);
+            var gapScale = rawGapTotal > availableGapWindow ? availableGapWindow / rawGapTotal : 1;
+            var arrivalTimes = [ARRIVAL_START];
+            for (var timeIndex = 0; timeIndex < rawGaps.length; timeIndex += 1) {
+              arrivalTimes.push(
+                arrivalTimes[arrivalTimes.length - 1] + rawGaps[timeIndex] * gapScale,
+              );
+            }
+
+            function fireSfx(index, t) {
+              root.dispatchEvent(
+                new CustomEvent("hf:sfx", {
+                  detail: { id: "notification-soft", index: index, t: t },
+                  bubbles: true,
+                }),
+              );
+            }
+
+            // Explicit t=0 endpoints. Cards begin above the stack at a visible
+            // near-rest scale, never scale(0), and the complete stage is hidden.
+            gsap.set(stage, { opacity: 0, y: "1.2cqh", scale: 0.985 });
+            cards.forEach(function (card) {
+              gsap.set(card, { opacity: 0, y: "-14cqh", scale: 0.94, rotation: -1.2 });
+            });
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: standard stage settle, accelerating pileup, subtle overshoot.
+            tl.to(
+              stage,
+              { opacity: 1, y: "0cqh", scale: 1, duration: STAGE_IN, ease: "power2.out" },
+              0,
+            );
+
+            cards.forEach(function (card, cardIndex) {
+              var arrivalAt = arrivalTimes[cardIndex];
+              var untilNext =
+                cardIndex < cards.length - 1
+                  ? arrivalTimes[cardIndex + 1] - arrivalAt
+                  : ENTRY_DURATION;
+              var entryDuration = Math.max(0.05, Math.min(ENTRY_DURATION, untilNext * 0.78));
+              var pushDuration = Math.max(
+                0.04,
+                Math.min((PUSH_DURATION_BASE * envelopeScale) / speed, untilNext * 0.72),
+              );
+
+              for (var existingIndex = 0; existingIndex < cardIndex; existingIndex += 1) {
+                tl.to(
+                  cards[existingIndex],
+                  {
+                    y: (cardIndex - existingIndex) * STACK_STEP + "cqh",
+                    duration: pushDuration,
+                    ease: "power2.out",
+                  },
+                  arrivalAt,
+                );
+              }
+
+              tl.to(
+                card,
+                {
+                  opacity: 1,
+                  y: "0cqh",
+                  scale: 1,
+                  rotation: 0,
+                  duration: entryDuration,
+                  ease: "back.out(1.7)",
+                },
+                arrivalAt,
+              );
+              tl.call(
+                function () {
+                  fireSfx(cardIndex, arrivalAt);
+                },
+                [],
+                arrivalAt,
+              );
+            });
+
+            // HOLD: finite slow sine breathing exactly inside the elastic phase.
+            if (HOLD >= BREATH_HALF) {
+              var breathRepeat = Math.max(0, Math.floor(HOLD / BREATH_HALF) - 1);
+              tl.fromTo(
+                stage,
+                { y: "0cqh", scale: 1 },
+                {
+                  y: "-0.42cqh",
+                  scale: 1.004,
+                  duration: BREATH_HALF,
+                  ease: "sine.inOut",
+                  yoyo: true,
+                  repeat: breathRepeat,
+                  immediateRender: false,
+                },
+                HOLD_START,
+              );
+            }
+
+            // OUT: asymmetric accelerated release and fade.
+            tl.to(
+              stage,
+              { opacity: 0, y: "1.2cqh", scale: 0.985, duration: OUT, ease: "power2.in" },
+              OUT_START,
+            );
+
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add notification-pileup" />
+
+That writes one file: `compositions/components/notification-pileup.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/notification-pileup.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `notification` `mobile` `ui-props` `overload` `pileup` `loop` `agitate`.
+
+## 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/components/notification-stack.mdx b/docs/catalog/components/notification-stack.mdx
new file mode 100644
index 0000000000..7b0afa9d63
--- /dev/null
+++ b/docs/catalog/components/notification-stack.mdx
@@ -0,0 +1,429 @@
+---
+title: "Notification Stack"
+description: "1 to 5 token notification cards slide-settle into a vertical stack on cues, newest on top; one card grows slightly and brightens as the focus while the rest dim by position."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/notification-stack.html"
+  compositionId="notification-stack"
+  compositionSrc="compositions/components/notification-stack.html"
+  variables={[{"id":"titles","type":"string","role":"content","label":"Titles","description":"Comma-separated card titles (1 to 5 cards).","default":"Build queued,Checks passed,Deploy live"},{"id":"bodies","type":"string","role":"content","label":"Bodies","description":"Comma-separated body lines matched to titles by index. Blank entries hide that body line.","default":"Pipeline started for main,All 42 checks green,Now serving version 2.4"},{"id":"expand","type":"number","role":"content","label":"Expand","description":"Index of the focus card in the titles list. -1 focuses the newest card (top of the stack).","default":-1,"min":-1,"max":4,"step":1},{"id":"cues","type":"string","role":"timing","label":"Cues","description":"Comma-separated per-card arrival times in seconds. Blank entries use the default rhythm.","default":""},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Accent token family used by the icon dots.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"How the stack leaves the frame. Default none: the hold ends the film.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
+>
+
+```html notification-stack.html
+<!doctype html>
+<!--
+  notification-stack: HyperFrames video primitive (product demo)
+
+  1 to 5 token notification cards (accent icon dot, title, one body line)
+  slide-settle into a vertical stack on cues, newest on top: each new card
+  drops into the top slot while the cards already present shift down one
+  slot. After the last card lands, one card (the expand index) grows
+  slightly and brightens to resolve as the focus while the rest dim by
+  stack position (deeper cards dim more). Then the frame holds STILL.
+
+  Variables (declared in data-composition-variables below):
+    - titles (string, default "Build queued,Checks passed,Deploy live"):
+      comma list of card titles, 1 to 5 cards; extras past 5 are dropped.
+    - bodies (string): comma list of body lines matched to titles by index.
+      A missing or blank entry hides that card's body line.
+    - expand (number, default -1): index into the titles list of the focus
+      card. -1 (or any out-of-range value) means the newest card, which
+      sits on top of the stack.
+    - cues (string, default ""): comma-separated per-card arrival times in
+      seconds relative to mount start. Blank or invalid entries fall back
+      to that card's default rhythm slot (~0.55s gap). Values are kept
+      non-decreasing and clamped so every card lands before the resolve.
+    - accent (green | blue | violet, default green): icon dot family.
+      green -> --brand, blue -> --accent, violet -> --accent-2.
+    - exit ("none" | "fade" | "up", default "none"): frame roots own
+      transitions; the default hold-ends-the-film.
+
+  Envelope, fixed IN with elastic HOLD (never gsap.timeScale()):
+    IN    = arrivals on cues, then the focus resolve (~0.5s)
+    HOLD  = still, elastic: everything after the resolve until OUT (or D)
+    OUT   = 0 when exit is "none"; else 0.45s fade / fade-up of the stage.
+    Arrival starts clamp together when D is too short for the rhythm.
+
+  Seek safety: every property change is a fromTo with explicit endpoints
+  at absolute times, and consecutive tweens on the same property never
+  overlap (each event's duration is capped at the gap to the next event).
+
+  Mount contract: elastic root, no data-width/data-height, styled via
+  #root only, container-type: size, one paused timeline registered under
+  the literal "notification-stack" key. Deterministic: no CSS transitions,
+  no Date.now, no randomness.
+-->
+<html
+  lang="en"
+  data-composition-id="notification-stack"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "titles", "type": "string", "role": "content", "label": "Titles", "description": "Comma-separated card titles (1 to 5 cards).", "default": "Build queued,Checks passed,Deploy live" },
+    { "id": "bodies", "type": "string", "role": "content", "label": "Bodies", "description": "Comma-separated body lines matched to titles by index. Blank entries hide that body line.", "default": "Pipeline started for main,All 42 checks green,Now serving version 2.4" },
+    { "id": "expand", "type": "number", "role": "content", "label": "Expand", "description": "Index of the focus card in the titles list. -1 focuses the newest card (top of the stack).", "default": -1, "min": -1, "max": 4, "step": 1 },
+    { "id": "cues", "type": "string", "role": "timing", "label": "Cues", "description": "Comma-separated per-card arrival times in seconds. Blank entries use the default rhythm.", "default": "" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Accent token family used by the icon dots.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "How the stack leaves the frame. Default none: the hold ends the film.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Notification Stack</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="notification-stack" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            background: var(--bg, transparent);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, system-ui, -apple-system, "Segoe UI", sans-serif);
+            pointer-events: none;
+          }
+
+          .ns-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+          }
+
+          .ns-stage {
+            position: relative;
+            width: min(54cqw, 110cqh);
+            will-change: transform, opacity;
+          }
+
+          .ns-card {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: var(--ns-card-h, 14cqh);
+            display: flex;
+            align-items: center;
+            gap: var(--space-2, 2.2cqmin);
+            padding: 0 var(--space-2, 2.2cqmin);
+            overflow: hidden;
+            border: 0.16cqmin solid var(--border, #334155);
+            border-radius: var(--radius, 1.8cqmin);
+            background: var(--surface, #131a24);
+            box-shadow: 0 1cqmin 3cqmin color-mix(in srgb, var(--bg, #05070a) 45%, transparent);
+            will-change: transform, opacity, filter;
+          }
+
+          .ns-dot {
+            flex: 0 0 auto;
+            width: min(1.7cqmin, calc(var(--ns-card-h, 14cqh) * 0.14));
+            aspect-ratio: 1;
+            border-radius: 50%;
+            background: var(--ns-accent, var(--brand, #71f5a7));
+          }
+
+          .ns-text {
+            display: flex;
+            flex-direction: column;
+            gap: min(0.7cqmin, calc(var(--ns-card-h, 14cqh) * 0.06));
+            min-width: 0;
+          }
+
+          .ns-title {
+            overflow: hidden;
+            color: var(--fg, #f8fafc);
+            font-size: min(3.2cqmin, calc(var(--ns-card-h, 14cqh) * 0.24));
+            font-weight: 600;
+            line-height: 1.2;
+            letter-spacing: 0.01em;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+          }
+
+          .ns-body {
+            overflow: hidden;
+            color: var(--muted, #94a3b8);
+            font-size: min(2.5cqmin, calc(var(--ns-card-h, 14cqh) * 0.19));
+            font-weight: 400;
+            line-height: 1.25;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+          }
+        </style>
+
+        <div
+          id="notification-stack-clip"
+          class="ns-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="ns-stage" role="list"></div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            // Literal id, never read off the DOM: the flattening step strips
+            // data-composition-id from the mounted root (see toggle-flip).
+            var compositionId = "notification-stack";
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".ns-stage");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            function toList(value, fallback) {
+              var raw = value == null || String(value).trim() === "" ? fallback : String(value);
+              return raw.split(",").map(function (token) {
+                return token.trim();
+              });
+            }
+
+            var titles = toList(vars.titles, "Build queued,Checks passed,Deploy live")
+              .filter(function (token) {
+                return token !== "";
+              })
+              .slice(0, 5);
+            if (titles.length === 0) titles = ["Build queued", "Checks passed", "Deploy live"];
+            var bodies = toList(
+              vars.bodies,
+              "Pipeline started for main,All 42 checks green,Now serving version 2.4",
+            );
+            var count = titles.length;
+
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            root.style.setProperty("--ns-accent", accentColors[accent]);
+
+            // Focus card: index into the titles list; -1 / out of range means
+            // the newest card, which finishes on top of the stack.
+            var expandRaw = Math.round(Number(vars.expand));
+            var expand =
+              Number.isFinite(expandRaw) && expandRaw >= 0 && expandRaw < count
+                ? expandRaw
+                : count - 1;
+
+            // Geometry: cards fill up to ~74cqh of the stack region; the
+            // stage box is the FINAL stack size so the clip centers it once.
+            var GAP_CQH = 2;
+            var cardH = Math.min(15, (74 - (count - 1) * GAP_CQH) / count);
+            var slotH = cardH + GAP_CQH;
+            root.style.setProperty("--ns-card-h", cardH.toFixed(3) + "cqh");
+            stage.style.height = (count * cardH + (count - 1) * GAP_CQH).toFixed(3) + "cqh";
+            stage.setAttribute("aria-label", titles.join(", "));
+
+            var cards = titles.map(function (title, index) {
+              var card = document.createElement("div");
+              card.className = "ns-card";
+              card.setAttribute("role", "listitem");
+              // Static stacking: the focus card sits above its dimmed
+              // neighbors so its slight grow overlaps them cleanly.
+              card.style.zIndex = index === expand ? "2" : "1";
+              var dot = document.createElement("span");
+              dot.className = "ns-dot";
+              dot.setAttribute("aria-hidden", "true");
+              card.appendChild(dot);
+              var text = document.createElement("span");
+              text.className = "ns-text";
+              var titleEl = document.createElement("span");
+              titleEl.className = "ns-title";
+              titleEl.textContent = title;
+              text.appendChild(titleEl);
+              var body = (bodies[index] || "").trim();
+              if (body !== "") {
+                var bodyEl = document.createElement("span");
+                bodyEl.className = "ns-body";
+                bodyEl.textContent = body;
+                text.appendChild(bodyEl);
+              }
+              card.appendChild(text);
+              stage.appendChild(card);
+              return card;
+            });
+
+            // RETIME RANGE: arrivals on cues, fixed resolve, elastic still
+            // HOLD, optional OUT.
+            var BASE = 0.2;
+            var GAP = 0.55;
+            var ENTER = 0.55;
+            var SHIFT = 0.45;
+            var RESOLVE_DUR = 0.5;
+            var OUT_BASE = 0.45;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var OUT = exit === "none" ? 0 : Math.min(OUT_BASE, duration * 0.25);
+            var avail = duration - OUT;
+            var latestStart = Math.max(0, avail - 1.05);
+
+            var cueList = String(vars.cues == null ? "" : vars.cues).split(",");
+            var starts = [];
+            for (var i = 0; i < count; i++) {
+              var cue = Number((cueList[i] || "").trim());
+              var hasCue = (cueList[i] || "").trim() !== "" && Number.isFinite(cue);
+              var start = hasCue ? cue : BASE + GAP * i;
+              if (i > 0) start = Math.max(start, starts[i - 1] + 0.05);
+              starts.push(Math.max(0, Math.min(start, latestStart)));
+            }
+            for (i = 1; i < count; i++) starts[i] = Math.max(starts[i], starts[i - 1]);
+
+            var last = starts[count - 1];
+            var resolve = Math.max(last + 0.1, Math.min(last + 0.65, avail - RESOLVE_DUR));
+            var resolveDur = Math.min(RESOLVE_DUR, Math.max(0.001, avail - resolve));
+
+            // Tween distances in px, derived once from the measured mount
+            // height (what 1cqh resolves to). GSAP interpolates chained
+            // cqh-unit transform tweens incorrectly mid-tween, so transforms
+            // ride px while all layout stays in container units.
+            var rootH = root.offsetHeight || window.innerHeight || 1080;
+            var cqhPx = rootH / 100;
+            var yFor = function (slot) {
+              return slot * slotH * cqhPx;
+            };
+            var enterY = -(cardH * 0.6 * cqhPx);
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: each card drops into the TOP slot with a fade and a smooth
+            // long-tail settle while every earlier card shifts down one slot.
+            // Event durations are capped at the gap to the next event so no
+            // two tweens on the same property ever overlap.
+            cards.forEach(function (card, index) {
+              var eventStart = starts[index];
+              var nextEvent = index + 1 < count ? starts[index + 1] : resolve;
+              var eventCap = Math.max(0.001, nextEvent - eventStart);
+              gsap.set(card, { opacity: 0, y: enterY });
+              tl.fromTo(
+                card,
+                { opacity: 0, y: enterY },
+                {
+                  opacity: 1,
+                  y: yFor(0),
+                  duration: Math.min(ENTER, eventCap),
+                  ease: "power3.out",
+                },
+                eventStart,
+              );
+              for (var j = 0; j < index; j++) {
+                // immediateRender false: a build-time render of this from
+                // state would park the card at a mid-stack slot before its
+                // own entrance has run.
+                tl.fromTo(
+                  cards[j],
+                  { y: yFor(index - 1 - j) },
+                  {
+                    y: yFor(index - j),
+                    duration: Math.min(SHIFT, eventCap),
+                    ease: "power3.out",
+                    immediateRender: false,
+                  },
+                  eventStart,
+                );
+              }
+            });
+
+            // RESOLVE: the focus card grows slightly and brightens; the rest
+            // dim by stack position (deeper cards dim more). Filter tweens
+            // stay numeric; no var() color string is ever tweened.
+            cards.forEach(function (card, index) {
+              var stackPos = count - 1 - index;
+              if (index === expand) {
+                tl.fromTo(
+                  card,
+                  { scale: 1, filter: "brightness(1)" },
+                  {
+                    scale: 1.045,
+                    filter: "brightness(1.1)",
+                    duration: resolveDur,
+                    ease: "power2.out",
+                    immediateRender: false,
+                  },
+                  resolve,
+                );
+              } else {
+                tl.fromTo(
+                  card,
+                  { opacity: 1 },
+                  {
+                    opacity: Math.max(0.42, 0.72 - 0.07 * stackPos),
+                    duration: resolveDur,
+                    ease: "power2.out",
+                    immediateRender: false,
+                  },
+                  resolve,
+                );
+              }
+            });
+
+            // HOLD: intentionally still. Nothing floats, nothing pushes in.
+
+            // OUT: the whole resolved stack leaves together.
+            if (exit !== "none") {
+              var OUT_START = duration - OUT;
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+              if (exit === "up") {
+                tl.to(stage, { y: -3 * cqhPx, duration: OUT, ease: "power2.in" }, OUT_START);
+              }
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add notification-stack" />
+
+That writes one file: `compositions/components/notification-stack.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/notification-stack.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `product-demo` `notification` `stack` `stagger`.
+
+## 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/components/number-pop-in.mdx b/docs/catalog/components/number-pop-in.mdx
new file mode 100644
index 0000000000..23360e8c91
--- /dev/null
+++ b/docs/catalog/components/number-pop-in.mdx
@@ -0,0 +1,159 @@
+---
+title: "Number Pop In"
+description: "A transitions.dev-inspired digit pop-in with blur, lift, and staggered value reveal"
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/number-pop-in.html"
+  compositionId="number-pop-in"
+  compositionSrc="compositions/components/number-pop-in.html"
+  variables={[{"id":"value","type":"string","role":"content","label":"Value","description":"The number itself. Every character becomes its own span, so the stagger still lands character by character.","default":"5.7"},{"id":"unit","type":"string","role":"content","label":"Unit","description":"Small suffix printed after the number. Pass an empty string to drop it.","default":"k"},{"id":"lift","type":"enum","role":"motion","label":"Lift","description":"Scales the offset the timeline drives, so the characters cover a shorter or longer run in the same time.","default":"standard","options":[{"value":"close","label":"Close"},{"value":"standard","label":"Standard"},{"value":"far","label":"Far"}]},{"id":"tone","type":"enum","role":"style","label":"Tone","description":"Number colour: ink for light frames, paper for dark ones, accent rides --brand.","default":"ink","options":[{"value":"ink","label":"Ink"},{"value":"paper","label":"Paper"},{"value":"accent","label":"Accent"}]}]}
+>
+
+```html number-pop-in.html
+<!--
+  Number Pop In - transitions.dev-inspired primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Use the timeline
+  integration note at the bottom as the starting point for deterministic GSAP
+  animation.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and either rebuilds the characters or writes
+  a custom property the CSS above consumes. The timeline recipe stays untouched:
+  it keeps driving one offset, one scale and one blur, and these decide what the
+  number is, what colour it is, and how far that offset carries it.
+
+    - value (any text, default 5.7): the number itself. Every character becomes
+      its own span, so the stagger still lands character by character.
+    - unit (any text, default k): the small suffix printed after the number.
+      Pass an empty string to drop it.
+    - lift (close | standard | far, default standard): scales the offset the
+      timeline drives, so the characters cover a shorter or longer run in the
+      same time. The offset is zero at rest, so this one only shows in motion.
+    - tone (ink | paper | accent, default ink): number colour. ink is near-black
+      for light frames, paper near-white for dark ones, accent rides --brand.
+      The suffix follows in the same family.
+
+  On every default the result is identical to the original: 5.7k rising 24px
+  through an 8px blur in near-black.
+-->
+
+<div
+  class="hf-transition-number-pop-in"
+  data-composition-variables='[
+    { "id": "value", "type": "string", "role": "content", "label": "Value", "description": "The number itself. Every character becomes its own span, so the stagger still lands character by character.", "default": "5.7" },
+    { "id": "unit", "type": "string", "role": "content", "label": "Unit", "description": "Small suffix printed after the number. Pass an empty string to drop it.", "default": "k" },
+    { "id": "lift", "type": "enum", "role": "motion", "label": "Lift", "description": "Scales the offset the timeline drives, so the characters cover a shorter or longer run in the same time.", "default": "standard", "options": [{ "value": "close", "label": "Close" }, { "value": "standard", "label": "Standard" }, { "value": "far", "label": "Far" }] },
+    { "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Number colour: ink for light frames, paper for dark ones, accent rides --brand.", "default": "ink", "options": [{ "value": "ink", "label": "Ink" }, { "value": "paper", "label": "Paper" }, { "value": "accent", "label": "Accent" }] }
+  ]'
+>
+  <span>5</span><span>.</span><span>7</span><small>k</small>
+</div>
+
+<style>
+  .hf-transition-number-pop-in {
+    display: inline-flex;
+    align-items: baseline;
+    gap: 2px;
+    color: var(--hf-number-color, #18181b);
+    font-family: Inter, system-ui, sans-serif;
+    font-weight: 900;
+    letter-spacing: -0.04em;
+  }
+  .hf-transition-number-pop-in span {
+    font-size: 76px;
+    line-height: 0.9;
+    filter: blur(var(--hf-number-blur, 0px));
+    transform: translateY(calc(var(--hf-number-y, 0px) * var(--hf-number-lift, 1)))
+      scale(var(--hf-number-scale, 1));
+    will-change: transform, filter, opacity;
+  }
+  .hf-transition-number-pop-in small {
+    margin-left: 2px;
+    color: var(--hf-number-unit-color, #71717a);
+    font-size: 34px;
+    font-weight: 850;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    var lifts = { close: 0.5, standard: 1, far: 1.75 };
+    var tones = {
+      ink: { number: "#18181b", unit: "#71717a" },
+      paper: { number: "#fafafa", unit: "#a1a1aa" },
+      accent: { number: "var(--brand, #34d399)", unit: "var(--brand, #34d399)" },
+    };
+
+    function text(value, fallback) {
+      return typeof value === "string" ? value : fallback;
+    }
+
+    var value = text(vars.value, "5.7");
+    if (value === "") value = "5.7";
+    var unit = text(vars.unit, "k");
+    var lift = Object.prototype.hasOwnProperty.call(lifts, vars.lift) ? vars.lift : "standard";
+    var tone = Object.prototype.hasOwnProperty.call(tones, vars.tone) ? vars.tone : "ink";
+
+    var roots = document.querySelectorAll(".hf-transition-number-pop-in");
+    for (var i = 0; i < roots.length; i += 1) {
+      var root = roots[i];
+      root.style.setProperty("--hf-number-lift", String(lifts[lift]));
+      root.style.setProperty("--hf-number-color", tones[tone].number);
+      root.style.setProperty("--hf-number-unit-color", tones[tone].unit);
+
+      var next = [];
+      for (var c = 0; c < value.length; c += 1) {
+        var span = document.createElement("span");
+        span.textContent = value.charAt(c);
+        next.push(span);
+      }
+      if (unit !== "") {
+        var small = document.createElement("small");
+        small.textContent = unit;
+        next.push(small);
+      }
+      root.replaceChildren.apply(root, next);
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-transition-number-pop-in span, .hf-transition-number-pop-in small', { opacity: 0, '--hf-number-y': '24px', '--hf-number-scale': 0.82, '--hf-number-blur': '8px' }, { opacity: 1, '--hf-number-y': '0px', '--hf-number-scale': 1, '--hf-number-blur': '0px', duration: 0.34, stagger: 0.055, ease: 'back.out(1.8)' }, startTime);
+-->
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add number-pop-in" />
+
+That writes one file: `compositions/components/number-pop-in.html`.
+
+## Usage
+
+Open `compositions/components/number-pop-in.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+
+{/* hf:generated-footer */}
+
+Tagged `video-primitive` `transition-primitive` `transitions-dev-port` `number` `pop`.
+
+## 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/components/number-wheel.mdx b/docs/catalog/components/number-wheel.mdx
new file mode 100644
index 0000000000..d9adc1f171
--- /dev/null
+++ b/docs/catalog/components/number-wheel.mdx
@@ -0,0 +1,181 @@
+---
+title: "Number Wheel"
+description: "A rolling digit counter primitive for metrics, prices, counts, and scoreboards"
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/components/number-wheel.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Number Wheel preview" />
+
+## Install
+
+<InstallCommand command="npx hyperframes add number-wheel" />
+
+That writes one file: `compositions/components/number-wheel.html`.
+
+## Variables
+
+Every one of these has a default, so the piece works untouched. Set the ones you
+want to change on the element:
+
+| Variable | Default | Accepts | What it does |
+| --- | --- | --- | --- |
+| `spin` | `single` | `single`, `double`, `triple` | How many full 0 to 9 revolutions each column adds before it lands, which is how far the reel travels in the same time. |
+| `spacing` | `standard` | `tight`, `standard`, `wide` | Gap between the digit columns. |
+| `tone` | `inherit` | `inherit`, `ink`, `paper`, `accent` | Digit colour: inherit keeps the surrounding text colour, ink suits light frames, paper suits dark ones, accent rides --brand. |
+
+Set them with `data-variable-values` on the element that mounts it. These are the
+defaults, so this behaves exactly like the preview above until you change one:
+
+```html wrap
+<div
+  data-composition-id="number-wheel"
+  data-composition-src="compositions/components/number-wheel.html"
+  data-variable-values='{"spin":"single","spacing":"standard","tone":"inherit"}'
+></div>
+```
+
+## Source
+
+<Accordion title={`number-wheel.html`}>
+
+```html
+<!--
+  Number Wheel - rolling digit counter.
+
+  Markup:
+    <span class="hf-number-wheel" data-value="30222"></span>
+
+  Paste this snippet once. It builds one column per digit. Animate the generated
+  .hf-number-wheel-strip elements with the data-target-y custom property.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and either builds a longer strip or writes a
+  custom property the CSS above consumes. Every strip still starts on 0 and
+  still lands on its own digit, so only the run in between changes.
+
+    - spin (single | double | triple, default single): how many full 0 to 9
+      revolutions each column adds before it lands. Extra revolutions lengthen
+      the strip and push --hf-number-target-y further, so the reel covers more
+      ground in the same time. Nothing moves at rest, so this one only shows
+      once the timeline runs.
+    - spacing (tight | standard | wide, default standard): the gap between digit
+      columns.
+    - tone (inherit | ink | paper | accent, default inherit): digit colour.
+      inherit leaves the surrounding text colour alone, ink is near-black for
+      light frames, paper near-white for dark ones, accent rides --brand.
+
+  On every default the result is identical to the original: one column per
+  digit, each rolling 0 up to its own digit in the inherited text colour.
+-->
+
+<style
+  data-composition-variables='[
+    { "id": "spin", "type": "enum", "role": "motion", "label": "Spin", "description": "How many full 0 to 9 revolutions each column adds before it lands, which is how far the reel travels in the same time.", "default": "single", "options": [{ "value": "single", "label": "Single" }, { "value": "double", "label": "Double" }, { "value": "triple", "label": "Triple" }] },
+    { "id": "spacing", "type": "enum", "role": "layout", "label": "Spacing", "description": "Gap between the digit columns.", "default": "standard", "options": [{ "value": "tight", "label": "Tight" }, { "value": "standard", "label": "Standard" }, { "value": "wide", "label": "Wide" }] },
+    { "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Digit colour: inherit keeps the surrounding text colour, ink suits light frames, paper suits dark ones, accent rides --brand.", "default": "inherit", "options": [{ "value": "inherit", "label": "Inherit" }, { "value": "ink", "label": "Ink" }, { "value": "paper", "label": "Paper" }, { "value": "accent", "label": "Accent" }] }
+  ]'
+>
+  .hf-number-wheel {
+    display: inline-flex;
+    align-items: baseline;
+    gap: var(--hf-wheel-gap, 0.02em);
+    color: var(--hf-wheel-color, inherit);
+    font-variant-numeric: tabular-nums;
+  }
+  .hf-number-wheel-digit {
+    display: inline-block;
+    height: 1em;
+    overflow: hidden;
+  }
+  .hf-number-wheel-strip {
+    display: grid;
+    transform: translateY(0em);
+    will-change: transform;
+  }
+  .hf-number-wheel-strip span {
+    height: 1em;
+    line-height: 1em;
+  }
+</style>
+
+<script>
+  (function () {
+    const vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    const spins = { single: 0, double: 1, triple: 2 };
+    const gaps = { tight: "0em", standard: "0.02em", wide: "0.14em" };
+    const tones = {
+      inherit: "inherit",
+      ink: "#18181b",
+      paper: "#fafafa",
+      accent: "var(--brand, #34d399)",
+    };
+    const pick = (table, value, fallback) =>
+      Object.prototype.hasOwnProperty.call(table, value) ? table[value] : table[fallback];
+
+    const cycles = pick(spins, vars.spin, "single");
+    const gap = pick(gaps, vars.spacing, "standard");
+    const tone = pick(tones, vars.tone, "inherit");
+
+    document.querySelectorAll(".hf-number-wheel").forEach((el) => {
+      if (el.dataset.hfNumberWheelReady === "1") return;
+      el.style.setProperty("--hf-wheel-gap", gap);
+      el.style.setProperty("--hf-wheel-color", tone);
+      const value = el.dataset.value || "0";
+      el.textContent = "";
+      for (const char of value) {
+        if (!/\d/.test(char)) {
+          el.append(document.createTextNode(char));
+          continue;
+        }
+        const stops = cycles * 10 + Number(char);
+        const frame = document.createElement("span");
+        frame.className = "hf-number-wheel-digit";
+        const strip = document.createElement("span");
+        strip.className = "hf-number-wheel-strip";
+        strip.style.setProperty("--hf-number-target-y", `${-stops}em`);
+        for (let i = 0; i <= stops; i++) {
+          const step = document.createElement("span");
+          step.textContent = String(i % 10);
+          strip.appendChild(step);
+        }
+        frame.appendChild(strip);
+        el.appendChild(frame);
+      }
+      el.dataset.hfNumberWheelReady = "1";
+    });
+  })();
+</script>
+
+<!--
+  Timeline integration:
+
+  tl.to(".hf-number-wheel-strip", {
+    y: (_, strip) => strip.style.getPropertyValue("--hf-number-target-y"),
+    duration: 1.1,
+    ease: "power3.out",
+    stagger: 0.05,
+  }, startTime);
+-->
+```
+
+</Accordion>
+
+## Usage
+
+Open `compositions/components/number-wheel.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+
+{/* hf:generated-footer */}
+
+Tagged `video-primitive` `motion-primitive` `number` `counter` `data`.
+
+## 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/components/offset-path-traveler.mdx b/docs/catalog/components/offset-path-traveler.mdx
new file mode 100644
index 0000000000..85d9b5b916
--- /dev/null
+++ b/docs/catalog/components/offset-path-traveler.mdx
@@ -0,0 +1,329 @@
+---
+title: "Offset Path Traveler"
+description: "A slotted traveler follows an authored path with tangent rotation, curved entry, and curved exit."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/offset-path-traveler.html"
+  compositionId="offset-path-traveler"
+  compositionSrc="compositions/components/offset-path-traveler.html"
+  variables={[{"id":"path","type":"string","role":"content","label":"Path","description":"SVG path data authored in a 1000 by 500 route viewBox.","default":"M -90 390 C 150 490 190 70 430 185 C 650 300 720 105 850 145 C 970 180 1030 85 1090 35"},{"id":"traveler_label","type":"string","role":"content","label":"Traveler label","description":"Text displayed inside the default traveler chip.","default":"Live preview"},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Color used by the traveler and route.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]}]}
+>
+
+```html offset-path-traveler.html
+<!doctype html>
+<!--
+  offset-path-traveler: HyperFrames video primitive (product demo / path travel)
+
+  One traveler follows an authored SVG path and rotates to its tangent. The
+  traveler wrapper is the content slot; the default slot content is a chip.
+
+  Variables:
+    - path (string): SVG path data authored in the 1000 by 500 route viewBox.
+    - traveler_label (string): label inside the default traveler chip.
+    - accent (green | blue | violet): chip and route color.
+
+  Envelope, fixed IN and OUT with elastic HOLD only:
+    IN_BASE  = 1.20s, traveler enters along the authored curve to 72 percent
+    HOLD     = max(0, D - IN - OUT), subtle finite drift on the same curve
+    OUT_BASE = 0.65s, traveler accelerates along the curve and exits
+    If D is shorter than IN_BASE + OUT_BASE, IN and OUT compress together.
+    The timeline is never time-scaled.
+
+  Seek safety: GSAP tweens one plain progress value. Its onUpdate samples the
+  same SVG path for position and tangent, so repeated and reverse seeks render
+  the same pose at the same time without a plugin or a free-running loop.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, has no data-width or data-height,
+  and registers one paused timeline under the literal offset-path-traveler key.
+-->
+<html
+  lang="en"
+  data-composition-id="offset-path-traveler"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "path", "type": "string", "role": "content", "label": "Path", "description": "SVG path data authored in a 1000 by 500 route viewBox.", "default": "M -90 390 C 150 490 190 70 430 185 C 650 300 720 105 850 145 C 970 180 1030 85 1090 35" },
+    { "id": "traveler_label", "type": "string", "role": "content", "label": "Traveler label", "description": "Text displayed inside the default traveler chip.", "default": "Live preview" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Color used by the traveler and route.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Offset Path Traveler</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="offset-path-traveler" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .opt-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .opt-route {
+            position: absolute;
+            inset: 8cqh 4cqw;
+          }
+
+          .opt-route svg {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+            overflow: visible;
+          }
+
+          .opt-guide {
+            fill: none;
+            stroke: color-mix(in srgb, var(--opt-accent) 34%, var(--border, #475569));
+            stroke-width: 0.42cqmin;
+            stroke-linecap: round;
+            stroke-dasharray: 1.1cqmin 1.5cqmin;
+            opacity: 0.62;
+            vector-effect: non-scaling-stroke;
+          }
+
+          .opt-traveler-slot {
+            position: absolute;
+            left: 0;
+            top: 0;
+            display: block;
+            transform-origin: 50% 50%;
+            will-change: transform, opacity;
+          }
+
+          .opt-chip {
+            display: inline-flex;
+            align-items: center;
+            gap: var(--space-1, 1.4cqmin);
+            max-width: 34cqw;
+            min-height: 8cqh;
+            padding: var(--space-1, 1.6cqh) var(--space-2, 2.6cqw);
+            overflow: hidden;
+            border: 0.18cqmin solid
+              color-mix(in srgb, var(--opt-accent) 68%, var(--border, #475569));
+            border-radius: var(--radius, 999px);
+            background: color-mix(in srgb, var(--surface, #18212f) 88%, var(--opt-accent));
+            box-shadow:
+              0 2.2cqh 5cqh color-mix(in srgb, var(--bg, #020617) 48%, transparent),
+              0 0 3.5cqh color-mix(in srgb, var(--opt-accent) 24%, transparent);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: clamp(12px, 3.5cqmin, 30px);
+            font-weight: 760;
+            line-height: 1;
+            letter-spacing: -0.01em;
+            white-space: nowrap;
+          }
+
+          .opt-dot {
+            flex: 0 0 auto;
+            width: 2.4cqmin;
+            aspect-ratio: 1;
+            border-radius: 50%;
+            background: var(--opt-accent);
+            box-shadow: 0 0 2cqmin color-mix(in srgb, var(--opt-accent) 58%, transparent);
+          }
+
+          .opt-label {
+            min-width: 0;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+        </style>
+
+        <div
+          id="offset-path-traveler-clip"
+          class="opt-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="opt-route">
+            <svg viewBox="0 0 1000 500" preserveAspectRatio="none" aria-hidden="true">
+              <path class="opt-guide"></path>
+            </svg>
+            <div class="opt-traveler-slot" data-slot="traveler">
+              <div class="opt-chip">
+                <span class="opt-dot" aria-hidden="true"></span>
+                <span class="opt-label"></span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var route = root.querySelector(".opt-route");
+            var guide = root.querySelector(".opt-guide");
+            var traveler = root.querySelector(".opt-traveler-slot");
+            var label = root.querySelector(".opt-label");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var DEFAULT_PATH =
+              "M -90 390 C 150 490 190 70 430 185 C 650 300 720 105 850 145 C 970 180 1030 85 1090 35";
+            var requestedPath = vars.path == null ? "" : String(vars.path).trim();
+            var pathData = requestedPath === "" ? DEFAULT_PATH : requestedPath;
+            var travelerLabel =
+              vars.traveler_label == null ? "Live preview" : String(vars.traveler_label);
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+
+            guide.setAttribute("d", pathData);
+            label.textContent = travelerLabel;
+            root.style.setProperty("--opt-accent", accentColors[accent]);
+
+            var totalLength;
+            try {
+              totalLength = guide.getTotalLength();
+            } catch (_error) {
+              totalLength = 0;
+            }
+            if (!Number.isFinite(totalLength) || totalLength <= 0) {
+              guide.setAttribute("d", DEFAULT_PATH);
+              totalLength = guide.getTotalLength();
+            }
+
+            var VIEWBOX_WIDTH = 1000;
+            var VIEWBOX_HEIGHT = 500;
+            var travel = { progress: 0 };
+
+            function renderTraveler() {
+              var distance = Math.max(0, Math.min(1, travel.progress)) * totalLength;
+              var tangentStep = Math.max(0.5, totalLength * 0.002);
+              var before = guide.getPointAtLength(Math.max(0, distance - tangentStep));
+              var after = guide.getPointAtLength(Math.min(totalLength, distance + tangentStep));
+              var scaleX = route.clientWidth / VIEWBOX_WIDTH;
+              var scaleY = route.clientHeight / VIEWBOX_HEIGHT;
+              var point = guide.getPointAtLength(distance);
+              var rotation =
+                (Math.atan2((after.y - before.y) * scaleY, (after.x - before.x) * scaleX) * 180) /
+                Math.PI;
+
+              gsap.set(traveler, {
+                x: point.x * scaleX,
+                y: point.y * scaleY,
+                xPercent: -50,
+                yPercent: -50,
+                rotation: rotation,
+              });
+            }
+
+            var IN_BASE = 1.2;
+            var OUT_BASE = 0.65;
+            var STILLNESS = 0.3;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var totalBase = IN_BASE + OUT_BASE;
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var OUT_START = IN + HOLD;
+            var driftHalf = Math.max(0, HOLD - STILLNESS) / 2;
+
+            gsap.set(traveler, { opacity: 0, scale: 0.9 });
+            renderTraveler();
+
+            var tl = gsap.timeline({ paused: true });
+
+            tl.to(
+              travel,
+              { progress: 0.72, duration: IN, ease: "power3.out", onUpdate: renderTraveler },
+              0,
+            );
+            tl.to(traveler, { opacity: 1, duration: Math.min(0.28, IN), ease: "power2.out" }, 0);
+            tl.to(traveler, { scale: 1, duration: Math.min(0.5, IN), ease: "back.out(1.7)" }, 0);
+
+            if (driftHalf > 0) {
+              tl.to(
+                travel,
+                {
+                  progress: 0.78,
+                  duration: driftHalf,
+                  ease: "sine.inOut",
+                  yoyo: true,
+                  repeat: 1,
+                  onUpdate: renderTraveler,
+                },
+                IN,
+              );
+            }
+
+            tl.to(
+              travel,
+              { progress: 1, duration: OUT, ease: "power2.in", onUpdate: renderTraveler },
+              OUT_START,
+            );
+            tl.to(traveler, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["offset-path-traveler"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add offset-path-traveler" />
+
+That writes one file: `compositions/components/offset-path-traveler.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/offset-path-traveler.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `product-demo` `path` `traveler` `auto-rotate`.
+
+## 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/components/onboarding-stepper-flow.mdx b/docs/catalog/components/onboarding-stepper-flow.mdx
new file mode 100644
index 0000000000..2cbf2fa3df
--- /dev/null
+++ b/docs/catalog/components/onboarding-stepper-flow.mdx
@@ -0,0 +1,129 @@
+---
+title: "Onboarding Stepper Flow"
+description: "A composed onboarding flow with milestone rail, active step card, and next-action button"
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/components/onboarding-stepper-flow.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Onboarding Stepper Flow preview" />
+
+## Install
+
+<InstallCommand command="npx hyperframes add onboarding-stepper-flow" />
+
+That writes one file: `compositions/components/onboarding-stepper-flow.html`.
+
+## Source
+
+<Accordion title={`onboarding-stepper-flow.html`}>
+
+```html
+<!--
+  Onboarding Stepper Flow - Remocn-inspired composed UI flow for HyperFrames.
+
+  Paste the markup and CSS into a composition. Use the timeline integration
+  note at the bottom as the starting point for deterministic GSAP animation.
+-->
+
+<div class="hf-ui-onboarding-flow">
+  <div class="hf-ui-onboarding-steps">
+    <span class="done">1</span><span class="active">2</span><span>3</span>
+  </div>
+  <div class="hf-ui-onboarding-card">
+    <small>Step 2 of 3</small>
+    <strong>Choose your visual style</strong>
+    <p>Pick a direction so the agent can generate matching motion primitives.</p>
+    <button type="button">Continue</button>
+  </div>
+</div>
+
+<style>
+  .hf-ui-onboarding-flow {
+    display: grid;
+    gap: 22px;
+    width: 520px;
+    color: #18181b;
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-ui-onboarding-steps {
+    display: flex;
+    justify-content: center;
+    gap: 18px;
+  }
+  .hf-ui-onboarding-steps span {
+    display: grid;
+    place-items: center;
+    width: 44px;
+    height: 44px;
+    border: 2px solid #e4e4e7;
+    border-radius: 999px;
+    background: #ffffff;
+    color: #71717a;
+    font-weight: 900;
+  }
+  .hf-ui-onboarding-steps .done,
+  .hf-ui-onboarding-steps .active {
+    border-color: #18181b;
+    background: #18181b;
+    color: #ffffff;
+  }
+  .hf-ui-onboarding-card {
+    display: grid;
+    gap: 14px;
+    padding: 34px;
+    border: 1px solid #e4e4e7;
+    border-radius: 28px;
+    background: #ffffff;
+    box-shadow: 0 26px 80px rgba(0, 0, 0, 0.1);
+  }
+  .hf-ui-onboarding-card small {
+    color: #71717a;
+    font-weight: 900;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+  .hf-ui-onboarding-card strong {
+    font-size: 30px;
+    line-height: 1;
+  }
+  .hf-ui-onboarding-card p {
+    margin: 0;
+    color: #71717a;
+    font-size: 16px;
+    line-height: 1.45;
+  }
+  .hf-ui-onboarding-card button {
+    justify-self: start;
+    height: 46px;
+    padding: 0 19px;
+    border: 0;
+    border-radius: 14px;
+    background: #18181b;
+    color: #ffffff;
+    font-weight: 900;
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-ui-onboarding-steps span', { scale: 0.7, opacity: 0 }, { scale: 1, opacity: 1, duration: 0.28, stagger: 0.08, ease: 'back.out(1.8)' }, 0.3);
+  tl.fromTo('.hf-ui-onboarding-card', { y: 28, opacity: 0 }, { y: 0, opacity: 1, duration: 0.42, ease: 'power3.out' }, 0.62);
+  tl.to('.hf-ui-onboarding-steps .active', { scale: 1.16, duration: 0.16, yoyo: true, repeat: 1, ease: 'power1.inOut' }, 1.1);
+-->
+```
+
+</Accordion>
+
+## Usage
+
+Open `compositions/components/onboarding-stepper-flow.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+
+{/* hf:generated-footer */}
+
+Tagged `ui-flow` `remocn-port` `onboarding` `stepper`.
+
+## 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/components/ordered-dither-pass.mdx b/docs/catalog/components/ordered-dither-pass.mdx
new file mode 100644
index 0000000000..0002931379
--- /dev/null
+++ b/docs/catalog/components/ordered-dither-pass.mdx
@@ -0,0 +1,553 @@
+---
+title: "Ordered Dither Pass"
+description: "Bayer-matrix ordered dithering quantizes a slotted scene (rasterized once at mount): the image emerges from pure 2-tone noise to clean, or dissolves the reverse. Stateless per frame, never error diffusion."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/ordered-dither-pass.html"
+  compositionId="ordered-dither-pass"
+  compositionSrc="compositions/components/ordered-dither-pass.html"
+  variables={[{"id":"matrix","type":"enum","role":"style","label":"Matrix","description":"Bayer matrix size: 2 is the coarsest crosshatch, 8 the smoothest ordered grain.","default":"4","options":[{"value":"2","label":"2 x 2"},{"value":"4","label":"4 x 4"},{"value":"8","label":"8 x 8"}]},{"id":"direction","type":"enum","role":"timing","label":"Direction","description":"in resolves noise to clean; out dissolves clean to noise and holds it.","default":"in","options":[{"value":"in","label":"Noise to clean"},{"value":"out","label":"Clean to noise"}]},{"id":"levels","type":"number","role":"style","label":"Levels","description":"Quantization levels per color channel during the dithered phase.","default":2,"min":2,"max":6,"step":1},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Light tone of the 2-tone noise phase: green rides --brand, blue rides --accent, violet rides --accent-2.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Optional departure. Default none: the final state holds until the frame cuts.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
+>
+
+```html ordered-dither-pass.html
+<!doctype html>
+<!--
+  ordered-dither-pass: HyperFrames video primitive (Wave M experiment,
+  texture / transitions)
+
+  Bayer-matrix ordered dithering quantizes a slotted scene. The source is
+  rasterized ONCE at mount to a reduced-resolution offscreen buffer; every
+  frame re-derives each output pixel from (source pixel, Bayer threshold,
+  the animated dither amount), so the pass is stateless per frame. With
+  direction "in" the image emerges from pure 2-tone noise (theme bg vs
+  accent) into posterized color and finally clean; "out" runs the same
+  ramp in reverse and holds the noise. Explicitly ordered (parallel,
+  frame-independent) dithering, never error diffusion.
+
+  The scene is a SLOT. Callers supply content by placing an inert template
+  anywhere in the HOST page (templates never render, and the runtime wipes
+  the host clip's own children on mount):
+
+    <template data-slot="ordered-dither-pass-scene"> ... </template>
+
+  Slot content is rasterized through an SVG foreignObject snapshot, so it
+  must be self-contained: inline styles or rules carried by host <style>
+  tags (which are copied into the snapshot), data-URI images only, system
+  or already-active fonts. When no slot exists, the primitive rasterizes
+  a token monogram tile drawn synchronously from contract tokens.
+
+  Variables (declared in data-composition-variables below):
+    - matrix ("2" | "4" | "8", default "4"): Bayer matrix size; 2 is the
+      coarsest crosshatch, 8 the smoothest ordered grain.
+    - direction ("in" | "out", default "in"): in resolves noise to clean;
+      out dissolves clean to noise and holds it.
+    - levels (2-6, default 2): quantization levels per color channel
+      during the dithered phase.
+    - accent ("green" | "blue" | "violet", default "green"): the light
+      tone of the 2-tone noise phase; green rides --brand, blue rides
+      --accent, violet rides --accent-2.
+    - exit ("none" | "fade" | "up", default "none"): frame roots own
+      transitions; the default holds the final state to the cut.
+
+  Envelope, fixed segments with elastic HOLD only (never timeScale):
+    0.00s   the field fades up over 0.25s in its start state
+    0.40s   the dither amount ramps across 1.6s (power1.inOut)
+    then    HOLD, truly still (clean for "in", pure noise for "out")
+    OUT = 0.45s only when exit is not none
+
+  Determinism (canvas 2D law): the source buffer, the Bayer table, and
+  every resolved color are fixed once at mount. Every painted frame is a
+  pure function of (those tables, the timeline's current time): onUpdate
+  rewrites one reused ImageData end to end and blits it, scaled with
+  image smoothing off (the chunky retro pixel is the point). No
+  Math.random, no wall clock, no incremental state; eventful seeks
+  (suppressEvents false, the engine's render path) land identical frames
+  in any order and either direction. The no-slot monogram raster is drawn
+  synchronously before the timeline registers; a slotted raster arrives
+  from the snapshot decode and repaints the current frame, after which
+  all frames are pure f(t).
+-->
+<html
+  lang="en"
+  data-composition-id="ordered-dither-pass"
+  data-composition-duration="3.5"
+  data-composition-variables='[
+    { "id": "matrix", "type": "enum", "role": "style", "label": "Matrix", "description": "Bayer matrix size: 2 is the coarsest crosshatch, 8 the smoothest ordered grain.", "default": "4", "options": [{ "value": "2", "label": "2 x 2" }, { "value": "4", "label": "4 x 4" }, { "value": "8", "label": "8 x 8" }] },
+    { "id": "direction", "type": "enum", "role": "timing", "label": "Direction", "description": "in resolves noise to clean; out dissolves clean to noise and holds it.", "default": "in", "options": [{ "value": "in", "label": "Noise to clean" }, { "value": "out", "label": "Clean to noise" }] },
+    { "id": "levels", "type": "number", "role": "style", "label": "Levels", "description": "Quantization levels per color channel during the dithered phase.", "default": 2, "min": 2, "max": 6, "step": 1 },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Light tone of the 2-tone noise phase: green rides --brand, blue rides --accent, violet rides --accent-2.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the final state holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Ordered Dither Pass</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="ordered-dither-pass" data-duration="3.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, "Inter", system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .odp-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .odp-stage {
+            position: absolute;
+            inset: 0;
+            will-change: transform, opacity;
+          }
+
+          .odp-canvas {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+          }
+        </style>
+
+        <div
+          id="ordered-dither-pass-clip"
+          class="odp-clip clip"
+          data-start="0"
+          data-duration="3.5"
+          data-track-index="0"
+        >
+          <div class="odp-stage">
+            <canvas class="odp-canvas" aria-hidden="true"></canvas>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".odp-stage");
+            var canvas = root.querySelector(".odp-canvas");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            function num(value, fallback, min, max) {
+              var n = Number(value);
+              if (!isFinite(n)) n = fallback;
+              return Math.max(min, Math.min(max, n));
+            }
+
+            var matrixSize = vars.matrix === "2" || vars.matrix === "8" ? Number(vars.matrix) : 4;
+            var direction = vars.direction === "out" ? "out" : "in";
+            var levels = Math.round(num(vars.levels, 2, 2, 6));
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            // Bundler mirrors composition variables as scoped CSS custom
+            // props; when this unit's accent variable shadows the --accent
+            // token ("blue" is a valid CSS color), fall back to the literal.
+            var computedAccent = getComputedStyle(root).getPropertyValue("--accent").trim();
+            if (
+              computedAccent === "green" ||
+              computedAccent === "blue" ||
+              computedAccent === "violet"
+            ) {
+              accentColors.blue = "#61a8ff";
+            }
+
+            // Envelope.
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "3.5"));
+            var OUT = exit === "none" ? 0 : 0.45;
+            var RAMP_AT = 0.4;
+            var RAMP = Math.min(1.6, Math.max(0.6, duration - OUT - RAMP_AT - 0.4));
+            var FADE_IN = 0.25;
+            var OUT_START = duration - OUT;
+
+            // Display canvas basis, fixed once at mount.
+            var dpr = Math.min(2, Math.max(1, Number(window.devicePixelRatio) || 1));
+            var box = root.getBoundingClientRect();
+            var cssW = Math.max(1, Math.round(box.width) || 640);
+            var cssH = Math.max(1, Math.round(box.height) || 360);
+            canvas.width = Math.round(cssW * dpr);
+            canvas.height = Math.round(cssH * dpr);
+            var ctx = canvas.getContext("2d");
+            ctx.imageSmoothingEnabled = false;
+
+            // Reduced-resolution pixel buffer: one dither pixel is about 3
+            // display px (capped 640 wide), the chunky retro read AND the
+            // per-frame loop budget.
+            var bufW = Math.max(8, Math.min(640, Math.round(cssW / 3)));
+            var bufH = Math.max(8, Math.round(bufW * (cssH / cssW)));
+
+            // Resolve tokens to concrete values once at mount.
+            var hostDoc = root.ownerDocument;
+            function resolveColor(cssColor, fallback) {
+              var probe = hostDoc.createElement("span");
+              probe.style.color = cssColor;
+              root.appendChild(probe);
+              var out = getComputedStyle(probe).color || fallback;
+              probe.remove();
+              return out;
+            }
+            function parseRgb(color, fallback) {
+              var m = /rgba?\(\s*([\d.]+)[,\s]+([\d.]+)[,\s]+([\d.]+)/.exec(color);
+              return m ? [Number(m[1]), Number(m[2]), Number(m[3])] : fallback;
+            }
+            var bgColor = resolveColor("var(--bg, #0b0c0e)", "#0b0c0e");
+            var bgRgb = parseRgb(bgColor, [11, 12, 14]);
+            var accentRgb = parseRgb(
+              resolveColor(accentColors[accent], "#71f5a7"),
+              [113, 245, 167],
+            );
+            var monoFamily = (function () {
+              var probe = hostDoc.createElement("span");
+              probe.style.fontFamily =
+                'var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace)';
+              root.appendChild(probe);
+              var out = getComputedStyle(probe).fontFamily || "monospace";
+              probe.remove();
+              return out;
+            })();
+
+            // Bayer matrix, generated recursively; thresholds normalized to
+            // (i + 0.5) / n^2 in [0, 1).
+            var bayer = (function () {
+              var m = [[0]];
+              var size = 1;
+              while (size < matrixSize) {
+                var next = [];
+                for (var y = 0; y < size * 2; y += 1) next.push(new Array(size * 2));
+                for (var yy = 0; yy < size; yy += 1) {
+                  for (var xx = 0; xx < size; xx += 1) {
+                    var v = 4 * m[yy][xx];
+                    next[yy][xx] = v;
+                    next[yy][xx + size] = v + 2;
+                    next[yy + size][xx] = v + 3;
+                    next[yy + size][xx + size] = v + 1;
+                  }
+                }
+                m = next;
+                size *= 2;
+              }
+              var n2 = matrixSize * matrixSize;
+              var flat = new Float64Array(n2);
+              for (var by = 0; by < matrixSize; by += 1) {
+                for (var bx = 0; bx < matrixSize; bx += 1) {
+                  flat[by * matrixSize + bx] = (m[by][bx] + 0.5) / n2;
+                }
+              }
+              return flat;
+            })();
+
+            // Source raster at buffer resolution, composited over the bg.
+            var raster = hostDoc.createElement("canvas");
+            raster.width = bufW;
+            raster.height = bufH;
+            var rctx = raster.getContext("2d");
+
+            var srcData = null; // Uint8ClampedArray, fixed after raster
+            var rasterReady = false;
+
+            function paintMonogram(target, w, h) {
+              var m = Math.min(w, h);
+              target.fillStyle = bgColor;
+              target.fillRect(0, 0, w, h);
+              var tile = m * 0.62;
+              var x = (w - tile) / 2;
+              var y = (h - tile) / 2;
+              target.fillStyle = resolveColor(
+                "color-mix(in srgb, var(--surface, #14171c) 72%, " + accentColors[accent] + ")",
+                "#1a2a22",
+              );
+              target.beginPath();
+              if (target.roundRect) target.roundRect(x, y, tile, tile, m * 0.06);
+              else target.rect(x, y, tile, tile);
+              target.fill();
+              target.fillStyle = resolveColor(
+                "color-mix(in srgb, var(--fg, #f8fafc) 30%, " + accentColors[accent] + ")",
+                "#a8f5c8",
+              );
+              target.font = "600 " + Math.round(m * 0.36) + "px " + monoFamily;
+              target.textAlign = "center";
+              target.textBaseline = "middle";
+              target.fillText("H", w / 2, h / 2 + m * 0.014);
+            }
+
+            function finishRaster() {
+              srcData = rctx.getImageData(0, 0, bufW, bufH).data;
+              rasterReady = true;
+              root.setAttribute("data-odp-raster", "ready");
+              paint(tl ? tl.time() : 0);
+            }
+
+            // SLOT. Rasterized through an SVG foreignObject snapshot of the
+            // slot markup plus every host <style> tag and the resolved
+            // contract tokens.
+            var slotTemplate = null;
+            try {
+              slotTemplate = hostDoc.querySelector(
+                'template[data-slot="ordered-dither-pass-scene"]',
+              );
+            } catch (error) {
+              slotTemplate = null;
+            }
+
+            if (slotTemplate) {
+              var tokenNames = [
+                "--bg",
+                "--fg",
+                "--muted",
+                "--surface",
+                "--border",
+                "--brand",
+                "--accent",
+                "--accent-2",
+                "--font-display",
+                "--font-body",
+                "--font-mono",
+                "--radius",
+                "--space-1",
+                "--space-2",
+                "--space-3",
+                "--dur-beat",
+                "--ease-standard",
+                "--ease-emphasis",
+              ];
+              var rootStyle = getComputedStyle(root);
+              var tokenDecl = "";
+              for (var ti = 0; ti < tokenNames.length; ti += 1) {
+                var tv = rootStyle.getPropertyValue(tokenNames[ti]).trim();
+                if (tv) tokenDecl += tokenNames[ti] + ":" + tv + ";";
+              }
+              var styleTexts = "";
+              var styleTags = hostDoc.querySelectorAll("style");
+              for (var si = 0; si < styleTags.length; si += 1) {
+                styleTexts += styleTags[si].textContent || "";
+              }
+              // Snapshot at css size for faithful layout, then downsample
+              // into the buffer raster.
+              var wrapper = hostDoc.createElement("div");
+              wrapper.setAttribute(
+                "style",
+                "width:" +
+                  cssW +
+                  "px;height:" +
+                  cssH +
+                  "px;overflow:hidden;position:relative;" +
+                  "display:grid;place-items:center;background:" +
+                  bgColor +
+                  ";" +
+                  tokenDecl,
+              );
+              wrapper.appendChild(hostDoc.importNode(slotTemplate.content, true));
+              var styleEl = hostDoc.createElement("style");
+              styleEl.textContent = styleTexts;
+              wrapper.insertBefore(styleEl, wrapper.firstChild);
+              var serialized = new XMLSerializer().serializeToString(wrapper);
+              var svgMarkup =
+                // No xmlns on foreignObject: a default xmlns declaration
+                // applies to the declaring element itself and would eject
+                // foreignObject from the SVG namespace (renders blank). The
+                // serialized wrapper div already carries the XHTML namespace.
+                '<svg xmlns="http://www.w3.org/2000/svg" width="' +
+                cssW +
+                '" height="' +
+                cssH +
+                '"><foreignObject width="' +
+                cssW +
+                '" height="' +
+                cssH +
+                '">' +
+                serialized +
+                "</foreignObject></svg>";
+              var snapshot = new Image();
+              snapshot.onload = function () {
+                rctx.fillStyle = bgColor;
+                rctx.fillRect(0, 0, bufW, bufH);
+                rctx.drawImage(snapshot, 0, 0, bufW, bufH);
+                try {
+                  finishRaster();
+                } catch (error) {
+                  // Tainted or unreadable snapshot: fall back to the monogram.
+                  paintMonogram(rctx, bufW, bufH);
+                  finishRaster();
+                }
+              };
+              snapshot.onerror = function () {
+                paintMonogram(rctx, bufW, bufH);
+                finishRaster();
+              };
+              snapshot.src = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svgMarkup);
+            } else {
+              paintMonogram(rctx, bufW, bufH);
+              srcData = rctx.getImageData(0, 0, bufW, bufH).data;
+              rasterReady = true;
+              root.setAttribute("data-odp-raster", "ready");
+            }
+
+            var outImage = rctx.createImageData(bufW, bufH);
+
+            function clamp01(v) {
+              return v < 0 ? 0 : v > 1 ? 1 : v;
+            }
+
+            // The whole pass is one scalar a(t) in [0, 1]: 1 = pure 2-tone
+            // noise, 0 = clean source.
+            //   contrast = clamp01((1 - a) * 1.6)  signal emerges under dither
+            //   cleanMix = clamp01(((1 - a) - 0.55) / 0.45)  dither releases
+            //   duoMix   = clamp01((a - 0.55) / 0.45)  noise phase is duotone
+            function amountAt(t) {
+              var p = clamp01((t - RAMP_AT) / RAMP);
+              // power1.inOut
+              p = p < 0.5 ? 2 * p * p : 1 - 2 * (1 - p) * (1 - p);
+              return direction === "in" ? 1 - p : p;
+            }
+
+            // Pure repaint from (srcData, bayer, t): every output pixel is
+            // rewritten, no state survives between frames.
+            function paint(timeSeconds) {
+              ctx.fillStyle = bgColor;
+              ctx.fillRect(0, 0, canvas.width, canvas.height);
+              if (!rasterReady) return;
+              var fade = clamp01(timeSeconds / FADE_IN);
+              var a = amountAt(timeSeconds);
+              var contrast = clamp01((1 - a) * 1.6);
+              var cleanMix = clamp01((1 - a - 0.55) / 0.45);
+              var duoMix = clamp01((a - 0.55) / 0.45);
+              var L1 = levels - 1;
+              var out = outImage.data;
+              for (var y = 0; y < bufH; y += 1) {
+                var brow = (y % matrixSize) * matrixSize;
+                for (var x = 0; x < bufW; x += 1) {
+                  var th = bayer[brow + (x % matrixSize)];
+                  var i = (y * bufW + x) * 4;
+                  var vr = 0.5 + (srcData[i] / 255 - 0.5) * contrast;
+                  var vg = 0.5 + (srcData[i + 1] / 255 - 0.5) * contrast;
+                  var vb = 0.5 + (srcData[i + 2] / 255 - 0.5) * contrast;
+                  var qr = Math.floor(vr * L1 + th) / L1;
+                  var qg = Math.floor(vg * L1 + th) / L1;
+                  var qb = Math.floor(vb * L1 + th) / L1;
+                  qr = qr < 0 ? 0 : qr > 1 ? 1 : qr;
+                  qg = qg < 0 ? 0 : qg > 1 ? 1 : qg;
+                  qb = qb < 0 ? 0 : qb > 1 ? 1 : qb;
+                  // Noise phase is a BINARY luminance threshold, independent
+                  // of levels: odd level counts put flat mid-gray exactly on
+                  // a quantization step, which would render the "pure noise"
+                  // pole as a flat field instead of the Bayer pattern.
+                  var lum = 0.299 * vr + 0.587 * vg + 0.114 * vb;
+                  var tone = lum > th ? 1 : 0;
+                  var dr = bgRgb[0] + (accentRgb[0] - bgRgb[0]) * tone;
+                  var dg = bgRgb[1] + (accentRgb[1] - bgRgb[1]) * tone;
+                  var db = bgRgb[2] + (accentRgb[2] - bgRgb[2]) * tone;
+                  var r = qr * 255 + (dr - qr * 255) * duoMix;
+                  var g = qg * 255 + (dg - qg * 255) * duoMix;
+                  var b = qb * 255 + (db - qb * 255) * duoMix;
+                  r += (srcData[i] - r) * cleanMix;
+                  g += (srcData[i + 1] - g) * cleanMix;
+                  b += (srcData[i + 2] - b) * cleanMix;
+                  out[i] = r;
+                  out[i + 1] = g;
+                  out[i + 2] = b;
+                  out[i + 3] = 255;
+                }
+              }
+              rctx.putImageData(outImage, 0, 0);
+              ctx.globalAlpha = fade;
+              ctx.drawImage(raster, 0, 0, bufW, bufH, 0, 0, canvas.width, canvas.height);
+              ctx.globalAlpha = 1;
+              // putImageData reuses the raster canvas as a blit surface;
+              // srcData is a detached copy, so the source stays pristine.
+            }
+
+            gsap.set(stage, { opacity: 1, y: "0cqh" });
+
+            var tl = gsap.timeline({
+              paused: true,
+              onUpdate: function () {
+                paint(tl.time());
+              },
+            });
+
+            // Anchor tween: spans the full authored duration so onUpdate
+            // (the canvas repaint) fires for every eventful seek in [0, D]
+            // and holds keep tl.time() honest.
+            tl.to({ t: 0 }, { t: 1, duration: duration, ease: "none" }, 0);
+
+            // HOLD: truly still (a(t) is constant past the ramp, the source
+            // raster never changes).
+
+            // OUT: optional departure; exit none holds until the frame cuts.
+            if (exit === "up") {
+              tl.to(stage, { y: "-4cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "fade") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            }
+
+            tl.seek(0);
+            paint(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["ordered-dither-pass"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add ordered-dither-pass" />
+
+That writes one file: `compositions/components/ordered-dither-pass.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/ordered-dither-pass.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `experiment` `texture` `dither` `transition` `quantize`.
+
+## 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/components/outline-draw.mdx b/docs/catalog/components/outline-draw.mdx
new file mode 100644
index 0000000000..fe64375b31
--- /dev/null
+++ b/docs/catalog/components/outline-draw.mdx
@@ -0,0 +1,215 @@
+---
+title: "Outline Draw"
+description: "A rounded outline that proves a callout by drawing clockwise as a hollow conic-gradient border with a clean closure."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/outline-draw.html"
+  compositionId="outline-draw"
+  compositionSrc="compositions/components/outline-draw.html"
+  variables={[{"id":"progress","type":"number","role":"timing","label":"Draw progress","description":"Final percentage of the outline that is drawn.","default":100,"min":0,"max":100,"step":1,"unit":"%"},{"id":"thickness","type":"number","role":"layout","label":"Stroke thickness","description":"Outline stroke in tenths of the host width.","default":6,"min":1,"max":20,"step":1,"unit":"0.1cqw"},{"id":"radius","type":"number","role":"layout","label":"Corner radius","description":"Corner radius in tenths of the host smaller dimension.","default":24,"min":0,"max":80,"step":1,"unit":"0.1cqmin"}]}
+>
+
+```html outline-draw.html
+<!doctype html>
+<!--
+  outline-draw: HyperFrames video primitive (effects / burst / prove)
+
+  Concept: a conic-gradient sector draws a rounded outline clockwise. Two
+  opaque masks, clipped to the padding box and border box, are excluded to
+  leave a true hollow center over whatever content is beneath the primitive.
+  One mechanic, one job: visually proving or certifying a framed claim.
+
+  Compiled-from evidence: OutlineDraw, "Border that draws with a composite
+  donut," from the CSS mask research notes.
+
+  Use when: closing a loop around proof, a selected product region, a logo
+  lockup, or a UI callout. Mount it over existing content. The center remains
+  transparent and the overlay never intercepts pointer input.
+
+  Variables:
+    - progress (number, 0 to 100, default 100): final drawn percentage.
+    - thickness (number, default 6): stroke in tenths of host cqw.
+    - radius (number, default 24): corner radius in tenths of host cqmin.
+
+  Envelope: fixed 0.80s IN draws the outline, elastic HOLD preserves the
+  completed proof, and fixed 0.40s OUT fades it. If duration is shorter than
+  1.20s, IN and OUT compress proportionally and HOLD becomes zero.
+
+  Sync point: draw-complete occurs at 0.80s into IN, scaled only when the
+  whole envelope is compressed. It never moves into the elastic HOLD.
+
+  Sound: none. A parent scene may place a static cue at draw-complete.
+
+  Mount contract: the runtime clones only this template. The root fills the
+  host box, owns the container query basis, has no intrinsic width or height,
+  and registers one paused timeline under the hardcoded outline-draw id.
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "progress", "type": "number", "role": "timing", "label": "Draw progress", "description": "Final percentage of the outline that is drawn.", "default": 100, "min": 0, "max": 100, "step": 1, "unit": "%" },
+    { "id": "thickness", "type": "number", "role": "layout", "label": "Stroke thickness", "description": "Outline stroke in tenths of the host width.", "default": 6, "min": 1, "max": 20, "step": 1, "unit": "0.1cqw" },
+    { "id": "radius", "type": "number", "role": "layout", "label": "Corner radius", "description": "Corner radius in tenths of the host smaller dimension.", "default": 24, "min": 0, "max": 80, "step": 1, "unit": "0.1cqmin" }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Outline Draw</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="outline-draw" data-duration="4" data-fps="30">
+        <style>
+          @property --od-progress {
+            syntax: "<number>";
+            inherits: false;
+            initial-value: 0;
+          }
+
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            pointer-events: none;
+          }
+
+          .od-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+          }
+
+          /* EDIT ZONE: --space-8 controls the safe inset. The public
+             thickness and radius variables own the remaining geometry. */
+          .od-outline {
+            --od-progress: 0;
+            --od-thickness: 6;
+            --od-radius: 24;
+            --od-seam-overlap: 0.5deg;
+            position: absolute;
+            inset: var(--space-8, 8cqmin);
+            border: calc(var(--od-thickness) * 0.1cqw) solid transparent;
+            border-radius: calc(var(--od-radius) * 0.1cqmin);
+            background: conic-gradient(
+              from -90deg,
+              var(--accent, #38bdf8) 0deg calc(var(--od-progress) * 3.6deg),
+              transparent calc(var(--od-progress) * 3.6deg + var(--od-seam-overlap)) 360deg
+            );
+            background-clip: border-box;
+            background-origin: border-box;
+            mask:
+              linear-gradient(var(--fg, #f8fafc) 0 0) padding-box,
+              linear-gradient(var(--fg, #f8fafc) 0 0) border-box;
+            mask-composite: exclude;
+            will-change: opacity;
+          }
+
+          /* INVARIANT: the 0.5deg feather overlaps the coincident conic
+             edges at closure so 0deg and 360deg never expose a hard seam. */
+        </style>
+
+        <div
+          id="outline-draw-clip"
+          class="od-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="od-outline" data-layout-ignore aria-hidden="true"></div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var outline = root.querySelector(".od-outline");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            // INVARIANT: invalid values return to declared defaults. Valid
+            // zero values survive because each scalar is checked explicitly.
+            var progressValue = Number(vars.progress);
+            var thicknessValue = Number(vars.thickness);
+            var radiusValue = Number(vars.radius);
+            var progress = Number.isFinite(progressValue)
+              ? Math.max(0, Math.min(100, progressValue))
+              : 100;
+            var thickness = Number.isFinite(thicknessValue)
+              ? Math.max(1, Math.min(20, thicknessValue))
+              : 6;
+            var radius = Number.isFinite(radiusValue) ? Math.max(0, Math.min(80, radiusValue)) : 24;
+
+            outline.style.setProperty("--od-thickness", String(thickness));
+            outline.style.setProperty("--od-radius", String(radius));
+
+            // RETIME RANGE: only these fixed envelope lengths may be tuned.
+            // HOLD is the sole elastic phase. Never use timeScale.
+            var IN_BASE = 0.8;
+            var OUT_BASE = 0.4;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var envelope = IN_BASE + OUT_BASE;
+            var scale = duration < envelope ? duration / envelope : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var OUT_START = IN + HOLD;
+
+            gsap.set(outline, { "--od-progress": 0, opacity: 1 });
+
+            var tl = gsap.timeline({ paused: true });
+            // --ease-standard maps to the production GSAP name power2.out.
+            // The registered scalar is tweened directly, with no proxy clock.
+            tl.to(outline, { "--od-progress": progress, duration: IN, ease: "power2.out" }, 0);
+            tl.to(outline, { opacity: 0, duration: OUT, ease: "power2.out" }, OUT_START);
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines["outline-draw"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add outline-draw" />
+
+That writes one file: `compositions/components/outline-draw.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/outline-draw.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `effects` `outline` `border` `mask` `proof`.
+
+## 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/components/oversized-cursor.mdx b/docs/catalog/components/oversized-cursor.mdx
new file mode 100644
index 0000000000..b8d5b860e2
--- /dev/null
+++ b/docs/catalog/components/oversized-cursor.mdx
@@ -0,0 +1,464 @@
+---
+title: "Oversized Cursor"
+description: "A deliberately oversized macOS-style pointer that enters off-screen, travels to a target, clicks to ignite a visible response, then exits"
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/oversized-cursor.html"
+  compositionId="oversized-cursor"
+  compositionSrc="compositions/components/oversized-cursor.html"
+  variables={[{"id":"cursor_variant","type":"enum","role":"style","label":"Cursor fill","default":"light","options":[{"value":"light","label":"Light (white body)"},{"value":"dark","label":"Dark (near-black body)"}]},{"id":"target_x","type":"number","role":"layout","label":"Target X","default":55,"min":15,"max":85,"step":1,"unit":"%"},{"id":"target_y","type":"number","role":"layout","label":"Target Y","default":55,"min":15,"max":85,"step":1,"unit":"%"},{"id":"click_label","type":"string","role":"content","label":"Click label","default":"Generate"},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Optional whole-stage departure. Default none: the ignited target stays until the frame cuts.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
+>
+
+```html oversized-cursor.html
+<!doctype html>
+<!--
+  Oversized Cursor (actor primitive), mountable sub-composition
+
+  concept: a deliberately oversized macOS-style pointer that enters the frame
+  from off-screen, travels in one continuous glide to a target, taps it (the
+  click ignites a visible reaction on the target itself), drifts aside during
+  the dwell, then exits off-screen. One mechanic: a pointer-driven click that
+  visibly causes something. Family: pointers. Profile: interaction.
+
+  compiled-from: spec ready (oversized-cursor SKILL.md, ~/Downloads/oversized-cursor);
+  actor file mechanics compose (size/look, entry law, tip-targeting, click-ignition,
+  exit law).
+
+  use-when: kicking off a UI scene, igniting a morph/transition/typing run with a
+  causal click, or carrying the eye across a scene that would otherwise read as
+  static or stale.
+
+  mount contract: this file is a HyperFrames sub-composition, loaded by a host via
+  data-composition-src, never opened standalone. The runtime clones ONLY the
+  <template> contents into the host slot (see
+  skills/hyperframes-core/references/sub-compositions.md); everything outside
+  <template>, including this <head>, is discarded at render. The root is #root:
+  elastic, no data-width/data-height declared here, it fills whatever box the host
+  clip gives it (position:absolute; inset:0). See demo.html for the mount usage
+  (data-composition-src="./oversized-cursor.html" on a sized host clip).
+
+  variables:
+    cursor_variant (enum light|dark)  pointer fill/stroke pairing, pick per scene contrast
+    target_x, target_y (number, percent of the HOST box)  the tip's landing point
+    click_label (string)  label on the target the cursor clicks
+    exit (enum none|fade|up, default none)  optional whole-stage departure during
+      OUT; the cursor's own off-screen exit always plays (it is the mechanic)
+
+  envelope (of data-composition-duration, default 4.2s):
+    IN   0.00s to 1.17s (fixed)     off-screen entry glide (0.85s) then click tap (0.32s)
+    HOLD 1.17s to D-0.60s (elastic) click ignition plays, cursor drifts aside, then dwells
+    OUT  D-0.60s to D (fixed)       cursor accelerates off-screen; with exit fade|up the
+                                    whole stage (target included) also departs
+
+  sound: one click tap SFX (soft UI click) fires at the click moment, the fixed
+  offset into IN documented below as SYNC POINT. This file never plays audio: it
+  only marks the cue's timing for the mix stage to pick up.
+-->
+<html
+  lang="en"
+  data-composition-id="oversized-cursor"
+  data-composition-duration="4.2"
+  data-composition-variables='[
+    { "id": "cursor_variant", "type": "enum", "role": "style", "label": "Cursor fill", "default": "light", "options": [ { "value": "light", "label": "Light (white body)" }, { "value": "dark", "label": "Dark (near-black body)" } ] },
+    { "id": "target_x", "type": "number", "role": "layout", "label": "Target X", "default": 55, "min": 15, "max": 85, "step": 1, "unit": "%" },
+    { "id": "target_y", "type": "number", "role": "layout", "label": "Target Y", "default": 55, "min": 15, "max": 85, "step": 1, "unit": "%" },
+    { "id": "click_label", "type": "string", "role": "content", "label": "Click label", "default": "Generate" },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional whole-stage departure. Default none: the ignited target stays until the frame cuts.", "default": "none", "options": [ { "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" } ] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Oversized Cursor</title>
+    <!-- head is metadata for the source file only; the runtime discards it on mount -->
+  </head>
+  <body>
+    <template>
+      <style>
+        *,
+        *::before,
+        *::after {
+          box-sizing: border-box;
+        }
+
+        /* Root is styled by #root, never a class: the compositor scopes CSS to
+           [data-composition-id="oversized-cursor"] as a descendant selector, so a
+           rule keyed on the root's own class would never match the root itself.
+
+           Elastic and position-blind: fills whatever box the host slot gives it
+           (inset:0), owns its own stacking + container-query context, no
+           position:fixed anywhere in this file. */
+        #root {
+          position: absolute;
+          inset: 0;
+          overflow: hidden;
+          isolation: isolate;
+          container-type: size;
+          container-name: oc-stage;
+          font-family: var(--font-body, Inter, system-ui, sans-serif);
+        }
+
+        .oc-stage {
+          position: absolute;
+          inset: 0;
+          /* Transparent by design: this actor overlays whatever scene it is
+             dropped into. demo.html supplies its own backdrop around it. */
+        }
+
+        /* EDIT ZONE: target look. Safe to retheme via tokens; keep it a simple,
+           legible UI surface so the click reaction reads clearly. */
+        .oc-target {
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          display: flex;
+          align-items: center;
+          gap: var(--space-1, 0.6cqw);
+          padding: var(--space-2, 1.5cqw) var(--space-3, 2.4cqw);
+          border-radius: var(--radius, 999px);
+          border: 1px solid var(--border, rgba(148, 163, 184, 0.35));
+          background: color-mix(
+            in srgb,
+            var(--surface, #f8fafc) calc((1 - var(--oc-ignite, 0)) * 100%),
+            var(--brand, #52525b) calc(var(--oc-ignite, 0) * 100%)
+          );
+          box-shadow: 0 1.2cqw 3.2cqw rgba(2, 6, 23, 0.24);
+          --oc-ignite: 0;
+          z-index: 10;
+        }
+
+        .oc-target-check {
+          width: 1.8cqw;
+          height: 1.8cqw;
+          min-width: 14px;
+          min-height: 14px;
+          flex: none;
+          fill: none;
+          stroke: var(--fg, #ffffff);
+          stroke-width: 2.4;
+          stroke-linecap: round;
+          stroke-linejoin: round;
+          opacity: clamp(0, var(--oc-ignite, 0), 1);
+          transform: scale(calc(0.5 + var(--oc-ignite, 0) * 0.5));
+        }
+
+        .oc-target-label {
+          font-size: clamp(12px, 1.7cqw, 30px);
+          font-weight: 650;
+          line-height: 1;
+          white-space: nowrap;
+          color: color-mix(
+            in srgb,
+            var(--fg, #0f172a) calc((1 - var(--oc-ignite, 0)) * 100%),
+            var(--fg, #ffffff) calc(var(--oc-ignite, 0) * 100%)
+          );
+        }
+
+        /* INVARIANT: cursor size floor is 7cqw for full-frame scenes (house
+           convention). Never go smaller; an actual-size cursor disappears at
+           video scale. */
+        .oc-cursor {
+          position: absolute;
+          left: 0;
+          top: 0;
+          width: 7cqw;
+          height: 7cqw;
+          min-width: 34px;
+          min-height: 34px;
+          pointer-events: none;
+          will-change: transform;
+          filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
+          z-index: 20;
+        }
+
+        .oc-cursor-svg {
+          display: block;
+          width: 100%;
+          height: 100%;
+          stroke-linejoin: round;
+          stroke-linecap: round;
+        }
+
+        /* EDIT ZONE: the two house-convention fill pairings. Pick per scene
+           contrast, keep it constant per film. */
+        .oc-cursor[data-variant="light"] .oc-cursor-svg {
+          fill: #ffffff;
+          stroke: #141414;
+          stroke-width: 1.4;
+        }
+        .oc-cursor[data-variant="dark"] .oc-cursor-svg {
+          fill: #1c1c1c;
+          stroke: #ffffff;
+          stroke-width: 1.4;
+        }
+
+        /* INVARIANT: ripple anchors to the arrow's tip point (21%, 14% of the
+           cursor box), the same point transformOrigin pivots the click tap on. */
+        .oc-ripple {
+          position: absolute;
+          left: 21%;
+          top: 14%;
+          width: 2.6cqw;
+          height: 2.6cqw;
+          min-width: 12px;
+          min-height: 12px;
+          border-radius: 999px;
+          border: 0.24cqw solid color-mix(in srgb, var(--fg, #ffffff) 45%, transparent);
+          transform: translate(-50%, -50%);
+          opacity: 0;
+        }
+      </style>
+
+      <div id="root" data-composition-id="oversized-cursor" data-duration="4.2">
+        <div class="oc-stage">
+          <div class="oc-target" id="oc-target">
+            <svg class="oc-target-check" viewBox="0 0 24 24" aria-hidden="true">
+              <path d="M5 13l4 4L19 7" />
+            </svg>
+            <span class="oc-target-label" id="oc-target-label"></span>
+          </div>
+          <div class="oc-cursor" id="oc-cursor" data-variant="light" aria-hidden="true">
+            <div class="oc-ripple"></div>
+            <svg class="oc-cursor-svg" viewBox="0 0 24 24" aria-hidden="true">
+              <path d="M5 3 L5 19 L9 15 L12 22 L15 20.5 L11.5 14 L18 14 Z" />
+            </svg>
+          </div>
+        </div>
+      </div>
+
+      <script>
+        (function () {
+          "use strict";
+
+          // NOTE: once mounted, document.documentElement is the HOST page's
+          // root element, not this file's own (the mount contract discards
+          // this file's head and html elements after the loader reads declared
+          // variables/duration once, before cloning). html.getAttribute(...)
+          // below therefore resolves to null under mount, and every read
+          // falls through to its inline default (55 / 55 / "Generate" /
+          // "light"), which match this file's own declared defaults above.
+          var html = document.documentElement;
+          var root = document.getElementById("root");
+          var cursor = document.getElementById("oc-cursor");
+          var ripple = cursor.querySelector(".oc-ripple");
+          var target = document.getElementById("oc-target");
+          var targetLabel = document.getElementById("oc-target-label");
+
+          // Declared defaults, then the render/preview engine's override object.
+          var DEFAULTS = {};
+          try {
+            JSON.parse(html.getAttribute("data-composition-variables") || "[]").forEach(
+              function (variable) {
+                DEFAULTS[variable.id] = variable.default;
+              },
+            );
+          } catch (error) {
+            /* malformed declaration falls back to hardcoded defaults below */
+          }
+          // Under mount, the runtime resolves this file's own declared
+          // variables merged with the host clip's per-instance
+          // data-variable-values through a scoped window.__hyperframes,
+          // shadowed in just for this file's script. window.__hfVariables
+          // stays in the merge too, as a raw fallback for the (non-mount)
+          // case where this file is driven by an older render/preview path.
+          var scopedVariables = {};
+          try {
+            if (window.__hyperframes && typeof window.__hyperframes.getVariables === "function") {
+              scopedVariables = window.__hyperframes.getVariables() || {};
+            }
+          } catch (error) {
+            /* no scoped variables API in this context, fall through */
+          }
+          var vars = Object.assign({}, DEFAULTS, window.__hfVariables || {}, scopedVariables);
+
+          function clampPercent(value, fallback) {
+            var n = Number(value);
+            if (!isFinite(n)) n = fallback;
+            return Math.max(0, Math.min(100, n));
+          }
+
+          // Hardcoded per the mount contract: deriving the id from the document
+          // returns null once the compositor rewrites the wrapper's attributes,
+          // which registers the timeline under "null" and breaks seek binding.
+          var compositionId = "oversized-cursor";
+          var duration = Math.max(
+            0.001,
+            parseFloat(
+              root.dataset.duration || html.getAttribute("data-composition-duration") || "4.2",
+            ),
+          );
+          var variant = vars.cursor_variant === "dark" ? "dark" : "light";
+          var targetX = clampPercent(vars.target_x, 55);
+          var targetY = clampPercent(vars.target_y, 55);
+          var clickLabel = String(vars.click_label || "Generate");
+          var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+          var stage = root.querySelector(".oc-stage");
+
+          cursor.setAttribute("data-variant", variant);
+          targetLabel.textContent = clickLabel;
+          target.style.left = targetX + "%";
+          target.style.top = targetY + "%";
+
+          // Motion runs on transforms only (x/y px), never left/top: layout
+          // props snap to integer device pixels under the seek-by-frame
+          // capture engine and stutter on slow/eased motion. Stage size is
+          // read once, synchronously, at load (deterministic: fixed viewport
+          // per render, no resize mid-render) to convert the percent-based
+          // target/off-screen positions (percent of the HOST box, not a fixed
+          // 1920 stage) into the px x/y GSAP needs.
+          var stageW = root.clientWidth || 1920;
+          var stageH = root.clientHeight || 1080;
+          function xAt(percent) {
+            return (percent / 100) * stageW;
+          }
+          function yAt(percent) {
+            return (percent / 100) * stageH;
+          }
+
+          // Tip-targeting: the arrow's visual tip sits at (21%, 14%) inside the
+          // cursor's own box. Anchor the box by that offset once, up front, so
+          // every later x/y tween places the TIP (not the box corner) at the
+          // given stage position. Never tween xPercent/yPercent.
+          gsap.set(cursor, { xPercent: -21, yPercent: -14 });
+          gsap.set(target, { xPercent: -50, yPercent: -50, scale: 1 });
+
+          // RETIME RANGE: IN/OUT are fixed durations (house convention: entry
+          // glide 0.4-0.92s + click tap 0.32s). They only shrink, proportionally,
+          // if the composition duration is too short to hold IN + OUT at all.
+          var IN_BASE = 1.17; // 0.85s glide + 0.1s compress + 0.22s expand
+          var OUT_BASE = 0.6;
+          var totalBase = IN_BASE + OUT_BASE;
+          var IN = IN_BASE;
+          var OUT = OUT_BASE;
+          if (duration < totalBase) {
+            var shrink = duration / totalBase;
+            IN = IN_BASE * shrink;
+            OUT = OUT_BASE * shrink;
+          }
+          var HOLD = Math.max(0, duration - (IN + OUT));
+          var OUT_AT = IN + HOLD;
+          var shrinkFactor = IN / IN_BASE;
+
+          var glideDur = 0.85 * shrinkFactor;
+          var clickInDur = 0.1 * shrinkFactor;
+          var clickOutDur = 0.22 * shrinkFactor;
+          // SYNC POINT: click moment (entry settle), a fixed offset into IN,
+          // never inside the elastic HOLD.
+          var CLICK_AT = glideDur;
+
+          var offX = xAt(48);
+          var offY = yAt(116); // resting pose IS off-screen, below the stage
+
+          var tl = gsap.timeline({ paused: true });
+
+          // ---- IN: off-screen entry, one continuous vector, then the tap ----
+          tl.set(cursor, { scale: 1 });
+          tl.set(ripple, { opacity: 0, scale: 0.4 });
+          tl.set(target, { "--oc-ignite": 0 });
+          tl.fromTo(
+            cursor,
+            { x: offX, y: offY },
+            { x: xAt(targetX), y: yAt(targetY), duration: glideDur, ease: "power3.out" },
+            0,
+          );
+          tl.to(
+            cursor,
+            { scale: 0.84, duration: clickInDur, ease: "power2.in", transformOrigin: "21% 14%" },
+            CLICK_AT,
+          );
+          tl.to(
+            cursor,
+            { scale: 1, duration: clickOutDur, ease: "power2.out", transformOrigin: "21% 14%" },
+            CLICK_AT + clickInDur,
+          );
+
+          // ---- the click ignites the target: parallel reaction, same frame ----
+          tl.to(target, { scale: 0.94, duration: clickInDur, ease: "power2.in" }, CLICK_AT);
+          tl.to(
+            target,
+            { scale: 1, duration: clickOutDur, ease: "power2.out" },
+            CLICK_AT + clickInDur,
+          );
+          tl.fromTo(
+            ripple,
+            { opacity: 0.85, scale: 0.4 },
+            { opacity: 0, scale: 2.4, duration: 0.42, ease: "power2.out" },
+            CLICK_AT + clickInDur,
+          );
+          tl.to(
+            target,
+            { "--oc-ignite": 1, duration: 0.34, ease: "back.out(2.2)" },
+            CLICK_AT + clickInDur,
+          );
+
+          // ---- HOLD (elastic): drift aside once, then dwell, never wobble ----
+          var driftDelay = Math.min(0.22, HOLD * 0.3);
+          var driftDur = Math.max(0, Math.min(0.7, HOLD - driftDelay));
+          if (driftDur > 0.05) {
+            var asideX = clampPercent(targetX + (targetX < 50 ? 16 : -16), targetX);
+            var asideY = clampPercent(targetY + 10, targetY);
+            tl.to(
+              cursor,
+              {
+                x: xAt(asideX),
+                y: yAt(asideY),
+                duration: driftDur,
+                ease: "power2.out",
+                overwrite: "auto",
+              },
+              IN + driftDelay,
+            );
+          }
+
+          // ---- OUT: leave the frame, physically, never a fade-in-place ----
+          tl.to(
+            cursor,
+            { y: yAt(120), duration: OUT, ease: "power2.in", overwrite: "auto" },
+            OUT_AT,
+          );
+
+          // Optional whole-stage departure on top of the cursor's own exit;
+          // exit none leaves the ignited target until the frame cuts.
+          if (exit === "fade") {
+            tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_AT);
+          } else if (exit === "up") {
+            tl.to(stage, { opacity: 0, y: "-4cqh", duration: OUT, ease: "power2.in" }, OUT_AT);
+          }
+
+          tl.seek(0);
+          window.__timelines = window.__timelines || {};
+          window.__timelines[compositionId] = tl;
+        })();
+      </script>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add oversized-cursor" />
+
+That writes one file: `compositions/components/oversized-cursor.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/oversized-cursor.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `actor` `cursor` `pointer` `interaction`.
+
+## 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/components/overwhelm-surround.mdx b/docs/catalog/components/overwhelm-surround.mdx
new file mode 100644
index 0000000000..fd1f65a655
--- /dev/null
+++ b/docs/catalog/components/overwhelm-surround.mdx
@@ -0,0 +1,416 @@
+---
+title: "Overwhelm Surround"
+description: "Tasks, tabs, pings, and notification bubbles accelerate inward around a calm central subject, turning overload into visible spatial pressure."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/overwhelm-surround.html"
+  compositionId="overwhelm-surround"
+  compositionSrc="compositions/components/overwhelm-surround.html"
+  variables={[{"id":"count","type":"number","role":"content","label":"Chip count","description":"Number of tasks and notifications crowding the center.","default":16,"min":8,"max":24,"step":1},{"id":"centerLabel","type":"string","role":"content","label":"Center label","description":"Text inside the calm central subject. Blank hides the text.","default":"You"},{"id":"intensity","type":"number","role":"layout","label":"Intensity","description":"How tightly and quickly the chips crowd the center.","default":1,"min":0.5,"max":2,"step":0.1}]}
+>
+
+```html overwhelm-surround.html
+<!doctype html>
+<!--
+  overwhelm-surround: HyperFrames video primitive (effects / holdable / agitate)
+
+  Concept: tasks, tabs, pings, and notification bubbles fly inward from every
+  edge and crowd a calm central subject. Pressure is spatial: the still center
+  keeps the accumulating chaos legible. One mechanic, one job: agitate by
+  surrounding the subject with too much at once.
+
+  Compiled-from evidence: SIM fixture; CORPUS blueprint.
+
+  Use when: a scene needs to show overload, mounting demands, notification
+  pressure, or attention fragmentation while keeping one person or idea clear.
+
+  Variables (declared in data-composition-variables below):
+    - count (number, default 16): number of incoming chips, clamped to 8 through
+      24. Higher values make the peak crowd visibly fuller.
+    - centerLabel (string, default "You"): text inside the still subject. An
+      empty string hides the text while preserving the subject shape.
+    - intensity (number, default 1): pressure level, clamped to 0.5 through 2.
+      Higher values pull the resting rings inward and shorten travel time.
+
+  Envelope (fixed IN/OUT, elastic HOLD only, never gsap.timeScale()):
+    IN_BASE  = 2.20s  indexed arrivals accelerate as the crowd closes in
+    HOLD     = elastic = max(0, D - (IN_BASE + OUT_BASE)); the complete crowd
+               deliberately freezes around the still center at peak density
+    OUT_BASE = 0.50s  the whole pressure field releases in a clean fade
+    If D < IN_BASE + OUT_BASE, IN and OUT scale down together so IN + OUT == D
+    and HOLD == 0.
+
+  Sync points: none. The accelerating cascade is the complete mechanic.
+
+  Sound cue: none. This primitive does not dispatch audio events.
+
+  Mount contract: this file is a MOUNTABLE SUB-COMPOSITION, not a standalone
+  composition. A host loads it via data-composition-src; the runtime only
+  clones <template> contents (everything outside <template>, including the
+  entire <head>, is discarded on mount), see
+  skills/hyperframes-core/references/sub-compositions.md. The root carries no
+  data-width/data-height: it is elastic, sized off whatever box the host clip
+  gives it (position:absolute; inset:0; container-type:size), so the effect
+  reads correctly whether the host mounts it into a 960x540 slot or a full
+  1920x1080 frame. The root is styled by #root, never a class: composited
+  renders scope this file's CSS to [data-composition-id="overwhelm-surround"],
+  and a rule keyed on the root's own class would stop matching the root itself
+  (sub-compositions.md, Pitfall 3). Variables are read via
+  window.__hyperframes.getVariables() (not by parsing this file's own <html>
+  tag at runtime): once mounted, document.documentElement is the HOST's <html>,
+  so the loader's declared-defaults-plus-per-instance-overrides table is the
+  only reliable source once the primitive is running inside a host page.
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "count", "type": "number", "role": "content", "label": "Chip count", "description": "Number of tasks and notifications crowding the center.", "default": 16, "min": 8, "max": 24, "step": 1 },
+    { "id": "centerLabel", "type": "string", "role": "content", "label": "Center label", "description": "Text inside the calm central subject. Blank hides the text.", "default": "You" },
+    { "id": "intensity", "type": "number", "role": "layout", "label": "Intensity", "description": "How tightly and quickly the chips crowd the center.", "default": 1, "min": 0.5, "max": 2, "step": 0.1 }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Overwhelm Surround</title>
+    <!-- Metadata only for whoever opens this file directly: the runtime
+         discards everything outside <template> on mount. The
+         data-composition-variables attribute above stays on <html> (not
+         inside <template>): the loader reads declared variable defaults
+         directly off the fetched document's root element, whether or not
+         the body is template-wrapped. -->
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="overwhelm-surround" data-duration="4.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          /* Root: sized off the HOST box, never a fixed stage. inset:0 fills
+             whatever box the host clip gives it. container-type establishes
+             the cqw/cqh basis for every internal measurement below. Styled by
+             #root, never a class, see the mount-contract note above. */
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            background: var(--bg, #0b1120);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+          }
+
+          .os-clip {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+          }
+
+          .os-crowd {
+            position: absolute;
+            inset: 0;
+            z-index: 2;
+          }
+
+          .os-chip {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            min-width: clamp(7cqw, 9.5cqw, 12cqw);
+            min-height: clamp(5.5cqh, 7cqh, 9cqh);
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            gap: var(--space-1, 1cqw);
+            padding: var(--space-2, 1.4cqh) var(--space-3, 2cqw);
+            border: 0.14cqw solid color-mix(in srgb, var(--border, #334155) 72%, transparent);
+            border-radius: clamp(1.4cqw, 2.4cqw, 3.2cqw);
+            background: color-mix(in srgb, var(--surface, #1e293b) 94%, var(--bg, #0b1120));
+            color: var(--fg, #f8fafc);
+            box-shadow:
+              0 0.8cqh 2.4cqh color-mix(in srgb, var(--bg, #0b1120) 48%, transparent),
+              inset 0 0 0 0.08cqw color-mix(in srgb, var(--fg, #f8fafc) 6%, transparent);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: clamp(1.8cqw, 2.4cqw, 3.2cqw);
+            font-weight: 700;
+            letter-spacing: 0.01em;
+            line-height: 1;
+            white-space: nowrap;
+            transform-origin: 50% 50%;
+            will-change: transform, opacity;
+          }
+
+          .os-chip::before {
+            content: "";
+            width: clamp(1.2cqw, 1.7cqw, 2.2cqw);
+            aspect-ratio: 1;
+            flex: 0 0 auto;
+            border-radius: 50%;
+            background: var(--accent, #38bdf8);
+            box-shadow: 0 0 1.5cqw color-mix(in srgb, var(--accent, #38bdf8) 62%, transparent);
+          }
+
+          .os-chip[data-kind="alert"] {
+            border-color: color-mix(in srgb, var(--brand, #22c55e) 62%, var(--border, #334155));
+          }
+
+          .os-chip[data-kind="alert"]::before {
+            background: var(--brand, #22c55e);
+            box-shadow: 0 0 1.5cqw color-mix(in srgb, var(--brand, #22c55e) 62%, transparent);
+          }
+
+          .os-chip[data-kind="ping"] {
+            border-radius: 50%;
+            min-width: clamp(6cqw, 7.5cqw, 9cqw);
+            min-height: auto;
+            aspect-ratio: 1;
+            padding: var(--space-2, 1.4cqh);
+            color: var(--accent, #38bdf8);
+          }
+
+          .os-chip[data-kind="ping"]::before {
+            display: none;
+          }
+
+          .os-center {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            z-index: 5;
+            width: clamp(13cqw, 16cqw, 20cqw);
+            aspect-ratio: 1.4 / 1;
+            display: grid;
+            place-items: center;
+            border: 0.2cqw solid
+              color-mix(in srgb, var(--accent, #38bdf8) 78%, var(--border, #334155));
+            border-radius: clamp(2.2cqw, 3.4cqw, 4.5cqw);
+            background: var(--surface, #1e293b);
+            color: var(--fg, #f8fafc);
+            box-shadow:
+              0 0 0 0.75cqw color-mix(in srgb, var(--bg, #0b1120) 82%, transparent),
+              0 1.2cqh 3.8cqh color-mix(in srgb, var(--accent, #38bdf8) 22%, transparent);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: clamp(2.5cqw, 3.6cqw, 4.8cqw);
+            font-weight: 760;
+            letter-spacing: -0.02em;
+            line-height: 1;
+            text-align: center;
+            transform: translate(-50%, -50%);
+          }
+
+          .os-center-label:empty {
+            display: none;
+          }
+        </style>
+
+        <div
+          id="overwhelm-surround-clip"
+          class="os-clip clip"
+          data-start="0"
+          data-duration="4.5"
+          data-track-index="0"
+        >
+          <div class="os-crowd" aria-hidden="true"></div>
+          <div class="os-center" data-anchor="overwhelm-surround">
+            <span class="os-center-label"></span>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            // Literal, not read off the DOM: once mounted, the framework's
+            // flattening step strips data-composition-id from the mounted
+            // root (see FLATTENED_INNER_ROOT_STRIP_ATTRS in
+            // packages/core/src/runtime/flattenedRoot.ts), so
+            // root.getAttribute("data-composition-id") would read null post-
+            // mount and silently register the timeline under the key "null"
+            // instead of "overwhelm-surround". Matches the convention in
+            // sub-compositions.md and empty.html: hardcode the id this file is
+            // always mounted under.
+            var compositionId = "overwhelm-surround";
+            var clipEl = root.querySelector(".os-clip");
+            var crowdEl = root.querySelector(".os-crowd");
+            var centerEl = root.querySelector(".os-center");
+            var centerLabelEl = root.querySelector(".os-center-label");
+
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            // INVARIANT: one clamped value owns each visual decision. Empty
+            // centerLabel remains distinct from a missing value.
+            var countValue = Number(vars.count);
+            var count = Math.round(
+              Math.max(8, Math.min(24, Number.isFinite(countValue) ? countValue : 16)),
+            );
+            var centerLabel = vars.centerLabel == null ? "You" : String(vars.centerLabel);
+            var intensityValue = Number(vars.intensity);
+            var intensity = Math.max(
+              0.5,
+              Math.min(2, Number.isFinite(intensityValue) ? intensityValue : 1),
+            );
+
+            centerLabelEl.textContent = centerLabel;
+
+            var labels = [
+              "Inbox",
+              "99+",
+              "Due",
+              "@you",
+              "ASAP",
+              "12",
+              "Review",
+              "!",
+              "Call",
+              "3 pings",
+              "Sync",
+              "Today",
+              "Reply",
+              "8 tabs",
+              "Update",
+              "Now",
+              "Draft",
+              "4 alerts",
+              "Fix",
+              "Follow up",
+              "Queue",
+              "2 min",
+              "Waiting",
+              "+7",
+            ];
+            var chips = [];
+
+            for (var i = 0; i < count; i += 1) {
+              var chip = document.createElement("div");
+              chip.className = "os-chip";
+              chip.dataset.kind = i % 5 === 1 ? "ping" : i % 3 === 0 ? "alert" : "task";
+              chip.textContent = labels[i];
+              crowdEl.appendChild(chip);
+              chips.push(chip);
+            }
+
+            // RETIME RANGE: these constants own global phase pacing. HOLD is
+            // the only elastic phase. IN and OUT scale together only when the
+            // composition duration is shorter than their combined base time.
+            var IN_BASE = 2.2;
+            var OUT_BASE = 0.5;
+            var TRAVEL_BASE = 0.54;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4.5"));
+            var totalBase = IN_BASE + OUT_BASE;
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var OUT_START = IN + HOLD;
+            var travelDuration = Math.min(IN, (TRAVEL_BASE * scale) / Math.sqrt(intensity));
+            var arrivalSpan = Math.max(0, IN - travelDuration);
+            var arrivalPower = 1.7 + intensity * 0.45;
+            var pressure = (intensity - 0.5) / 1.5;
+
+            // Explicit both-endpoints state (gsap.set, never gsap.from()) so a
+            // seek to t=0 is always correct without playing the timeline.
+            gsap.set(centerEl, { xPercent: -50, yPercent: -50, opacity: 1, scale: 1 });
+            gsap.set(clipEl, { opacity: 1 });
+
+            var tl = gsap.timeline({ paused: true });
+
+            chips.forEach(function (chip, index) {
+              // Even angular distribution keeps every count deterministic and
+              // balanced. Index-derived banding creates a compact cluster
+              // without any random state.
+              var angle = -Math.PI / 2 + (Math.PI * 2 * index) / count;
+              var directionX = Math.cos(angle);
+              var directionY = Math.sin(angle);
+              var edgeScale = 0.64 / Math.max(Math.abs(directionX), Math.abs(directionY));
+              var entryX = directionX * edgeScale * 100;
+              var entryY = directionY * edgeScale * 100;
+              var band = ((index * 5) % 7) / 6;
+              var radiusX = 27 + band * 9 - pressure * (12 + band * 6);
+              var radiusY = 25 + band * 10 - pressure * (11 + band * 6);
+              var restX = directionX * radiusX;
+              var restY = directionY * radiusY;
+              var progress = index / (count - 1);
+              var arrivalT = arrivalSpan * (1 - Math.pow(1 - progress, arrivalPower));
+              var restRotation = ((index * 29) % 17) - 8;
+
+              gsap.set(chip, {
+                x: entryX + "cqw",
+                y: entryY + "cqh",
+                xPercent: -50,
+                yPercent: -50,
+                scale: 0.94,
+                opacity: 0,
+                rotation: restRotation * 1.8,
+              });
+
+              tl.to(
+                chip,
+                {
+                  x: restX + "cqw",
+                  y: restY + "cqh",
+                  scale: 1,
+                  opacity: 1,
+                  rotation: restRotation,
+                  duration: travelDuration,
+                  ease: "power2.out",
+                },
+                arrivalT,
+              );
+            });
+
+            // HOLD: the peak-density crowd is deliberately still. The calm
+            // center remains unchanged, making the surrounding pressure easy
+            // to read even at the highest count and intensity.
+
+            tl.to(clipEl, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add overwhelm-surround" />
+
+That writes one file: `compositions/components/overwhelm-surround.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/overwhelm-surround.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `effects` `agitate` `overwhelm` `pressure` `notifications`.
+
+## 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/components/page-slide.mdx b/docs/catalog/components/page-slide.mdx
new file mode 100644
index 0000000000..81f958637e
--- /dev/null
+++ b/docs/catalog/components/page-slide.mdx
@@ -0,0 +1,159 @@
+---
+title: "Page Slide"
+description: "A transitions.dev-inspired page slide primitive with outgoing and incoming panels"
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/page-slide.html"
+  compositionId="page-slide"
+  compositionSrc="compositions/components/page-slide.html"
+  variables={[{"id":"label_a","type":"string","role":"content","label":"Outgoing label","description":"Label printed on the page that slides out.","default":"Dashboard"},{"id":"label_b","type":"string","role":"content","label":"Incoming label","description":"Label printed on the page that slides in.","default":"Analytics"},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Gradient family painted on the incoming page. The outgoing page stays slate.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"corner","type":"enum","role":"style","label":"Corner","description":"Corner radius of the frame the pages slide inside.","default":"round","options":[{"value":"square","label":"Square"},{"value":"soft","label":"Soft"},{"value":"round","label":"Round"}]}]}
+>
+
+```html page-slide.html
+<!--
+  Page Slide - transitions.dev-inspired primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Use the timeline
+  integration note at the bottom as the starting point for deterministic GSAP
+  animation.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and either writes a label or writes a custom
+  property the CSS above consumes. The timeline recipe stays untouched: it keeps
+  sliding the incoming page over the outgoing one.
+
+    - label_a (any text, default Dashboard): the outgoing page label.
+    - label_b (any text, default Analytics): the incoming page label.
+    - accent (green | blue | violet, default green): the gradient family painted
+      on the incoming page. The outgoing page stays slate so the two always read
+      apart.
+    - corner (square | soft | round, default round): the corner radius of the
+      frame the pages slide inside.
+
+  On every default the result is identical to the original: Dashboard sliding
+  out, a teal to green Analytics sliding in, inside a 30px rounded frame.
+-->
+
+<div
+  class="hf-transition-page-slide"
+  data-composition-variables='[
+    { "id": "label_a", "type": "string", "role": "content", "label": "Outgoing label", "description": "Label printed on the page that slides out.", "default": "Dashboard" },
+    { "id": "label_b", "type": "string", "role": "content", "label": "Incoming label", "description": "Label printed on the page that slides in.", "default": "Analytics" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Gradient family painted on the incoming page. The outgoing page stays slate.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "corner", "type": "enum", "role": "style", "label": "Corner", "description": "Corner radius of the frame the pages slide inside.", "default": "round", "options": [{ "value": "square", "label": "Square" }, { "value": "soft", "label": "Soft" }, { "value": "round", "label": "Round" }] }
+  ]'
+>
+  <section class="hf-transition-page old"><span>Dashboard</span></section>
+  <section class="hf-transition-page new"><span>Analytics</span></section>
+</div>
+
+<style>
+  .hf-transition-page-slide {
+    position: relative;
+    width: 560px;
+    height: 320px;
+    overflow: hidden;
+    border-radius: var(--hf-page-radius, 30px);
+    background: #111827;
+    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.22);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-transition-page {
+    position: absolute;
+    inset: 0;
+    display: grid;
+    place-items: center;
+  }
+  .hf-transition-page span {
+    padding: 14px 20px;
+    border-radius: 999px;
+    background: rgba(255, 255, 255, 0.14);
+    color: #ffffff;
+    font-size: 28px;
+    font-weight: 900;
+  }
+  .hf-transition-page.old {
+    background: linear-gradient(135deg, #0f172a, #334155);
+  }
+  .hf-transition-page.new {
+    background: linear-gradient(135deg, var(--hf-page-from, #155e75), var(--hf-page-to, #10b981));
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    var accents = {
+      green: { from: "#155e75", to: "#10b981" },
+      blue: { from: "#1e3a8a", to: "#38bdf8" },
+      violet: { from: "#4c1d95", to: "#a78bfa" },
+    };
+    var corners = { square: "0px", soft: "14px", round: "30px" };
+
+    function text(value, fallback) {
+      return typeof value === "string" && value !== "" ? value : fallback;
+    }
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var labelA = text(vars.label_a, "Dashboard");
+    var labelB = text(vars.label_b, "Analytics");
+    var accent = accents[pick(accents, vars.accent, "green")];
+    var corner = corners[pick(corners, vars.corner, "round")];
+
+    var roots = document.querySelectorAll(".hf-transition-page-slide");
+    for (var i = 0; i < roots.length; i += 1) {
+      var root = roots[i];
+      root.style.setProperty("--hf-page-radius", corner);
+      root.style.setProperty("--hf-page-from", accent.from);
+      root.style.setProperty("--hf-page-to", accent.to);
+      var oldLabel = root.querySelector(".hf-transition-page.old span");
+      var newLabel = root.querySelector(".hf-transition-page.new span");
+      if (oldLabel) oldLabel.textContent = labelA;
+      if (newLabel) newLabel.textContent = labelB;
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-transition-page-slide', { opacity: 0, y: 24 }, { opacity: 1, y: 0, duration: 0.3, ease: 'power2.out' }, 0.25);
+  tl.fromTo('.hf-transition-page.new', { xPercent: 100 }, { xPercent: 0, duration: 0.74, ease: 'power3.inOut' }, 0.78);
+  tl.to('.hf-transition-page.old', { xPercent: -28, scale: 0.94, duration: 0.74, ease: 'power3.inOut' }, 0.78);
+  tl.fromTo('.hf-transition-page.new span', { y: 24, opacity: 0 }, { y: 0, opacity: 1, duration: 0.28, ease: 'power2.out' }, 1.24);
+-->
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add page-slide" />
+
+That writes one file: `compositions/components/page-slide.html`.
+
+## Usage
+
+Open `compositions/components/page-slide.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+
+{/* hf:generated-footer */}
+
+Tagged `video-primitive` `transition-primitive` `transitions-dev-port` `page` `slide`.
+
+## 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/components/pan-stations.mdx b/docs/catalog/components/pan-stations.mdx
new file mode 100644
index 0000000000..ed3cda5450
--- /dev/null
+++ b/docs/catalog/components/pan-stations.mdx
@@ -0,0 +1,406 @@
+---
+title: "Pan Stations"
+description: "A lateral camera move across a continuous row of labeled feature stations, with a steady dwell at each stop before the next pan."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/pan-stations.html"
+  compositionId="pan-stations"
+  compositionSrc="compositions/components/pan-stations.html"
+  variables={[{"id":"stationCount","type":"number","role":"layout","label":"Station count","description":"Number of feature stations in the row.","default":4,"min":3,"max":6,"step":1},{"id":"labels","type":"string","role":"content","label":"Station labels","description":"Comma-separated labels shown on the station cards.","default":"Capture,Edit,Render,Share"},{"id":"dwell","type":"number","role":"timing","label":"Dwell","description":"Seconds the camera holds at each station before panning.","default":0.6,"min":0.2,"max":2,"step":0.1,"unit":"s"}]}
+>
+
+```html pan-stations.html
+<!doctype html>
+<!--
+  pan-stations -- HyperFrames video primitive (camera / holdable / exhibit)
+
+  Concept: the camera pans laterally across a wide row of labeled feature
+  stations, settling on each card before moving to the next. The exhibit
+  reading is primary here. The agitate reading is cross-shelved because the
+  same camera move can scan broken tools instead of polished features.
+
+  Compiled-from evidence: candidates card "pan-stations" plus the ship doc:
+  "one mechanic, two readings: panning across broken tools agitates, panning
+  across features exhibits. Re-filed by the adversary pass precisely because
+  it serves both shelves; the pause cadence is the frozen law." Evidence tags:
+  SIM fixture, CORPUS blueprint (re-filed per adversary; cross-shelved).
+
+  Use when: a sequence of tools, steps, screens, or features should read as
+  one continuous environment that the camera inspects in order.
+
+  Variables (declared in data-composition-variables below):
+    - stationCount (number, default 4, range 3-6): number of cards in the row.
+    - labels (CSV string, default "Capture,Edit,Render,Share"): visible station
+      labels, padded with "Station N" when entries are missing.
+    - dwell (seconds, default 0.6, range 0.2-2): steady hold at each station.
+
+  Envelope (fixed IN/OUT, elastic HOLD only, never gsap.timeScale()):
+    IN_BASE  = 0.45s  the first station settles into view
+    HOLD     = max(0, D - (IN + OUT)); complete dwell and pan segments are
+               scheduled while they fit, then the last reached station holds
+    OUT_BASE = 0.40s  the current station fades out
+    If D < IN_BASE + OUT_BASE, IN and OUT scale down together so HOLD is zero.
+
+  Sync points: none. Station arrivals live in elastic HOLD and are deliberately
+  not declared as sync points. Dwell gaps contain no eased tween.
+
+  Sound cue: none. A host can layer its own station arrival foley if needed.
+
+  Mount contract: this is a mountable sub-composition. The runtime clones only
+  <template> contents, so every real style, node, and script lives inside the
+  template. #root has no data-width or data-height and fills the host box. It
+  is styled by ID because composited CSS scoping can stop a root class selector
+  from matching. Variables come only from getVariables() after mount, because
+  document.documentElement belongs to the host document at that point.
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "stationCount", "type": "number", "role": "layout", "label": "Station count", "description": "Number of feature stations in the row.", "default": 4, "min": 3, "max": 6, "step": 1 },
+    { "id": "labels", "type": "string", "role": "content", "label": "Station labels", "description": "Comma-separated labels shown on the station cards.", "default": "Capture,Edit,Render,Share" },
+    { "id": "dwell", "type": "number", "role": "timing", "label": "Dwell", "description": "Seconds the camera holds at each station before panning.", "default": 0.6, "min": 0.2, "max": 2, "step": 0.1, "unit": "s" }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Pan Stations</title>
+    <!-- Metadata only. Everything outside <template> is discarded on mount. -->
+  </head>
+  <body>
+    <template>
+      <div
+        id="root"
+        data-composition-id="pan-stations"
+        data-start="0"
+        data-duration="4"
+        data-fps="30"
+      >
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            --ease-standard: cubic-bezier(0.215, 0.61, 0.355, 1);
+            --ease-exit: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+            --ease-drift: cubic-bezier(0.445, 0.05, 0.55, 0.95);
+            --ps-station-width: 78cqw;
+            --ps-station-gap: var(--space-4, 6cqw);
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            background: var(--bg, #0b1120);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+          }
+
+          .ps-clip {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            opacity: 0;
+          }
+
+          .ps-rail {
+            position: absolute;
+            left: 0;
+            right: 0;
+            top: 50%;
+            height: 0.18cqh;
+            background: var(--border, #334155);
+            opacity: 0.7;
+          }
+
+          .ps-strip {
+            --ps-pan-index: 0;
+            position: absolute;
+            top: 18cqh;
+            left: 0;
+            display: flex;
+            align-items: stretch;
+            gap: var(--ps-station-gap);
+            width: max-content;
+            padding: 0 11cqw;
+            transform: translateX(
+              calc(var(--ps-pan-index) * -1 * (var(--ps-station-width) + var(--ps-station-gap)))
+            );
+            will-change: transform;
+          }
+
+          .ps-station {
+            position: relative;
+            flex: 0 0 var(--ps-station-width);
+            height: 64cqh;
+            display: grid;
+            grid-template-rows: auto 1fr auto;
+            gap: var(--space-3, 3cqh);
+            padding: var(--space-5, 5cqw);
+            overflow: hidden;
+            border: 0.16cqw solid var(--border, #334155);
+            border-radius: 3.2cqw;
+            background: var(--surface, #1e293b);
+            box-shadow: 0 2.2cqh 6cqw color-mix(in srgb, var(--bg, #0b1120) 72%, transparent);
+          }
+
+          .ps-station::before {
+            content: "";
+            position: absolute;
+            inset: 0;
+            background: radial-gradient(
+              circle at 82% 18%,
+              color-mix(in srgb, var(--brand, #22c55e) 24%, transparent),
+              transparent 42%
+            );
+          }
+
+          .ps-kicker,
+          .ps-label,
+          .ps-screen {
+            position: relative;
+            z-index: 1;
+          }
+
+          .ps-kicker {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            color: var(--muted, #94a3b8);
+            font-size: 1.8cqw;
+            font-weight: 700;
+            letter-spacing: 0.16em;
+            text-transform: uppercase;
+          }
+
+          .ps-index {
+            color: var(--accent, #38bdf8);
+            font-variant-numeric: tabular-nums;
+          }
+
+          .ps-screen {
+            display: grid;
+            grid-template-columns: 0.56fr 1fr;
+            gap: var(--space-3, 3cqw);
+            min-height: 0;
+          }
+
+          .ps-tool,
+          .ps-stack {
+            border: 0.13cqw solid var(--border, #334155);
+            border-radius: 2cqw;
+            background: color-mix(in srgb, var(--bg, #0b1120) 56%, var(--surface, #1e293b));
+          }
+
+          .ps-tool {
+            display: grid;
+            place-items: center;
+          }
+
+          .ps-glyph {
+            width: 8.5cqw;
+            aspect-ratio: 1;
+            display: grid;
+            place-items: center;
+            border-radius: 2.2cqw;
+            background: var(--brand, #22c55e);
+            color: var(--bg, #0b1120);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: 3.2cqw;
+            font-weight: 850;
+          }
+
+          .ps-stack {
+            display: grid;
+            align-content: center;
+            gap: var(--space-2, 1.8cqh);
+            padding: var(--space-3, 3cqw);
+          }
+
+          .ps-line {
+            height: 1.15cqh;
+            border-radius: 50%;
+            background: var(--border, #334155);
+          }
+
+          .ps-line:nth-child(1) {
+            width: 82%;
+            background: var(--accent, #38bdf8);
+          }
+
+          .ps-line:nth-child(2) {
+            width: 100%;
+          }
+
+          .ps-line:nth-child(3) {
+            width: 64%;
+          }
+
+          .ps-label {
+            max-width: 100%;
+            overflow-wrap: anywhere;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: 5.8cqw;
+            font-weight: 760;
+            letter-spacing: -0.045em;
+            line-height: 0.98;
+          }
+        </style>
+
+        <div
+          id="pan-stations-clip"
+          class="ps-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="ps-rail"></div>
+          <div class="ps-strip" aria-label="Feature stations"></div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            // Literal by contract: the mounted root loses data-composition-id.
+            var compositionId = "pan-stations";
+            var clip = root.querySelector(".ps-clip");
+            var strip = root.querySelector(".ps-strip");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            // INVARIANT: stationCount is always an integer in the declared 3-6 range.
+            var rawCount = Number(vars.stationCount);
+            var stationCount = Number.isFinite(rawCount) ? Math.round(rawCount) : 4;
+            stationCount = Math.max(3, Math.min(6, stationCount));
+
+            // INVARIANT: dwell is finite and positive, then clamps to 0.2-2 seconds.
+            var rawDwell = Number(vars.dwell);
+            var dwell = Number.isFinite(rawDwell) ? rawDwell : 0.6;
+            dwell = Math.max(0.2, Math.min(2, dwell));
+
+            var labelsSource =
+              vars.labels == null ? "Capture,Edit,Render,Share" : String(vars.labels);
+            var parsedLabels = labelsSource.split(",").map(function (label) {
+              return label.trim();
+            });
+
+            // Station creation is the only owner of row content and fallback labels.
+            for (var i = 0; i < stationCount; i += 1) {
+              var label = parsedLabels[i] || "Station " + (i + 1);
+
+              var station = document.createElement("article");
+              station.className = "ps-station";
+              station.setAttribute("aria-label", label);
+
+              var kicker = document.createElement("div");
+              kicker.className = "ps-kicker";
+              kicker.innerHTML = '<span>Feature station</span><span class="ps-index"></span>';
+              kicker.querySelector(".ps-index").textContent = String(i + 1).padStart(2, "0");
+
+              var screen = document.createElement("div");
+              screen.className = "ps-screen";
+              screen.innerHTML =
+                '<div class="ps-tool"><span class="ps-glyph"></span></div>' +
+                '<div class="ps-stack"><span class="ps-line"></span><span class="ps-line"></span><span class="ps-line"></span></div>';
+              screen.querySelector(".ps-glyph").textContent = label.charAt(0).toUpperCase();
+
+              var title = document.createElement("div");
+              title.className = "ps-label";
+              title.textContent = label;
+
+              station.appendChild(kicker);
+              station.appendChild(screen);
+              station.appendChild(title);
+              strip.appendChild(station);
+            }
+
+            var stations = Array.from(strip.querySelectorAll(".ps-station"));
+
+            // RETIME RANGE: fixed IN/OUT, elastic HOLD, no global time scaling.
+            var IN_BASE = 0.45;
+            var OUT_BASE = 0.4;
+            var PAN_DURATION = 0.25;
+            var durationValue = parseFloat(root.dataset.duration || "4");
+            var duration = Number.isFinite(durationValue) ? Math.max(0.001, durationValue) : 4;
+            var totalBase = IN_BASE + OUT_BASE;
+            var envelopeScale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * envelopeScale;
+            var OUT = OUT_BASE * envelopeScale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var HOLD_START = IN;
+            var OUT_START = IN + HOLD;
+
+            // Explicit t=0 state for every animated endpoint.
+            gsap.set(clip, { opacity: 0 });
+            gsap.set(strip, { "--ps-pan-index": 0 });
+
+            var tl = gsap.timeline({ paused: true });
+            tl.to(clip, { opacity: 1, duration: IN, ease: "power2.out" }, 0);
+
+            // HOLD: empty time is the steady dwell. Only complete pans are added.
+            var cursor = HOLD_START;
+            for (var stationIndex = 0; stationIndex < stations.length - 1; stationIndex += 1) {
+              cursor += dwell;
+              if (cursor + PAN_DURATION > OUT_START) break;
+              tl.to(
+                strip,
+                {
+                  "--ps-pan-index": stationIndex + 1,
+                  duration: PAN_DURATION,
+                  ease: "sine.inOut",
+                },
+                cursor,
+              );
+              cursor += PAN_DURATION;
+            }
+
+            tl.to(clip, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add pan-stations" />
+
+That writes one file: `compositions/components/pan-stations.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/pan-stations.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `camera` `pan` `stations` `features` `exhibit` `agitate` `cross-shelved`.
+
+## 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/components/panel-reveal.mdx b/docs/catalog/components/panel-reveal.mdx
new file mode 100644
index 0000000000..217facef55
--- /dev/null
+++ b/docs/catalog/components/panel-reveal.mdx
@@ -0,0 +1,172 @@
+---
+title: "Panel Reveal"
+description: "A panel reveal primitive with height expansion and content fade"
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/panel-reveal.html"
+  compositionId="panel-reveal"
+  compositionSrc="compositions/components/panel-reveal.html"
+  variables={[{"id":"title","type":"string","role":"content","label":"Title","description":"The header line that sits above the folded body.","default":"Motion tokens"},{"id":"width","type":"enum","role":"layout","label":"Width","description":"How wide the panel sits, 280, 360 or 480 px.","default":"standard","options":[{"value":"narrow","label":"Narrow"},{"value":"standard","label":"Standard"},{"value":"wide","label":"Wide"}]},{"id":"tone","type":"enum","role":"style","label":"Tone","description":"Surface family: paper is the white card for light frames, ink inverts it for dark frames.","default":"paper","options":[{"value":"paper","label":"Paper"},{"value":"ink","label":"Ink"}]},{"id":"reveal","type":"enum","role":"motion","label":"Reveal","description":"Whether the body fades in with the height. fade is the shipped motion, solid opens the height only.","default":"fade","options":[{"value":"fade","label":"Fade"},{"value":"solid","label":"Solid"}]}]}
+>
+
+```html panel-reveal.html
+<!--
+  Panel Reveal - transitions.dev-inspired primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Use the timeline
+  integration note at the bottom as the starting point for deterministic GSAP
+  animation.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result as a custom property
+  the CSS below consumes. The timeline recipe at the end is untouched by them:
+  it keeps driving the single open value from 0 to 1.
+
+    - title (string, default "Motion tokens"): the header line above the fold.
+    - width (narrow | standard | wide, default standard): how wide the panel
+      sits, 280, 360 or 480 px.
+    - tone (paper | ink, default paper): the surface family. paper is the
+      white card on a light frame, ink is the same card inverted for dark
+      frames, border and body copy included.
+    - reveal (fade | solid, default fade): whether the body fades in with the
+      height. fade is the shipped motion, solid keeps the body at full opacity
+      so only the height opens. Both look the same once the panel is open.
+
+  On every default the result is identical to the original: a 360px white card
+  whose body fades in as it grows.
+-->
+
+<section
+  class="hf-transition-panel-reveal"
+  data-composition-variables='[
+    { "id": "title", "type": "string", "role": "content", "label": "Title", "description": "The header line that sits above the folded body.", "default": "Motion tokens" },
+    { "id": "width", "type": "enum", "role": "layout", "label": "Width", "description": "How wide the panel sits, 280, 360 or 480 px.", "default": "standard", "options": [{ "value": "narrow", "label": "Narrow" }, { "value": "standard", "label": "Standard" }, { "value": "wide", "label": "Wide" }] },
+    { "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Surface family: paper is the white card for light frames, ink inverts it for dark frames.", "default": "paper", "options": [{ "value": "paper", "label": "Paper" }, { "value": "ink", "label": "Ink" }] },
+    { "id": "reveal", "type": "enum", "role": "motion", "label": "Reveal", "description": "Whether the body fades in with the height. fade is the shipped motion, solid opens the height only.", "default": "fade", "options": [{ "value": "fade", "label": "Fade" }, { "value": "solid", "label": "Solid" }] }
+  ]'
+>
+  <header>Motion tokens</header>
+  <div>
+    <p>Duration 420ms</p>
+    <p>Easing power3.out</p>
+  </div>
+</section>
+
+<style>
+  .hf-transition-panel-reveal {
+    --hf-panel-open: 1;
+    width: var(--hf-panel-width, 360px);
+    overflow: hidden;
+    border: 1px solid var(--hf-panel-border, #e4e4e7);
+    border-radius: 14px;
+    background: var(--hf-panel-surface, #fff);
+    color: var(--hf-panel-text, #18181b);
+    font-family: Inter, system-ui, sans-serif;
+    box-shadow: 0 20px 56px rgba(24, 24, 27, 0.1);
+  }
+  .hf-transition-panel-reveal header {
+    padding: 15px 17px;
+    font-weight: 900;
+  }
+  .hf-transition-panel-reveal div {
+    max-height: calc(var(--hf-panel-open) * 120px);
+    opacity: calc(1 - var(--hf-panel-fade, 1) * (1 - var(--hf-panel-open)));
+    padding: 0 17px calc(var(--hf-panel-open) * 17px);
+    overflow: hidden;
+  }
+  .hf-transition-panel-reveal p {
+    margin: 0 0 8px;
+    color: var(--hf-panel-muted, #71717a);
+    font-size: 14px;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    var widths = { narrow: "280px", standard: "360px", wide: "480px" };
+    var tones = {
+      paper: {
+        surface: "#fff",
+        border: "#e4e4e7",
+        text: "#18181b",
+        muted: "#71717a",
+      },
+      ink: {
+        surface: "#18181b",
+        border: "#3f3f46",
+        text: "#fafafa",
+        muted: "#a1a1aa",
+      },
+    };
+    var reveals = { fade: 1, solid: 0 };
+
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var width = widths[pick(widths, vars.width, "standard")];
+    var tone = tones[pick(tones, vars.tone, "paper")];
+    var fade = reveals[pick(reveals, vars.reveal, "fade")];
+
+    var title = typeof vars.title === "string" ? vars.title.trim() : "";
+    if (!title) {
+      title = "Motion tokens";
+    }
+
+    var roots = document.querySelectorAll(".hf-transition-panel-reveal");
+    for (var i = 0; i < roots.length; i += 1) {
+      var root = roots[i];
+      root.style.setProperty("--hf-panel-width", width);
+      root.style.setProperty("--hf-panel-surface", tone.surface);
+      root.style.setProperty("--hf-panel-border", tone.border);
+      root.style.setProperty("--hf-panel-text", tone.text);
+      root.style.setProperty("--hf-panel-muted", tone.muted);
+      root.style.setProperty("--hf-panel-fade", String(fade));
+
+      var header = root.querySelector("header");
+      if (header) {
+        header.textContent = title;
+      }
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-transition-panel-reveal', { '--hf-panel-open': 0 }, { '--hf-panel-open': 1, duration: 0.44, ease: 'power3.inOut' }, startTime);
+-->
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add panel-reveal" />
+
+That writes one file: `compositions/components/panel-reveal.html`.
+
+## Usage
+
+Open `compositions/components/panel-reveal.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+
+{/* hf:generated-footer */}
+
+Tagged `transition-primitive` `transitions-dev-port` `panel` `reveal`.
+
+## 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/components/parallax-device-dive.mdx b/docs/catalog/components/parallax-device-dive.mdx
new file mode 100644
index 0000000000..098b1547fd
--- /dev/null
+++ b/docs/catalog/components/parallax-device-dive.mdx
@@ -0,0 +1,493 @@
+---
+title: "Parallax Device Dive"
+description: "A canonical phone rises into view before the camera pushes through its screen and layered app UI expands to fill the frame."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/parallax-device-dive.html"
+  compositionId="parallax-device-dive"
+  compositionSrc="compositions/components/parallax-device-dive.html"
+  variables={[{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Highlight color used throughout the app UI.","default":"blue","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"app_title","type":"string","role":"content","label":"App title","description":"Title displayed in the app header.","default":"Dashboard"}]}
+>
+
+```html parallax-device-dive.html
+<!doctype html>
+<!--
+  parallax-device-dive: HyperFrames video primitive (camera / device / transition)
+
+  Concept: a canonical phone rises into view, then the camera pushes through
+  its screen. The app header, hero card, and supporting cards separate at
+  different apparent depths during the push, then settle into one coherent UI
+  that fills the frame.
+
+  Variables:
+    - accent (green | blue | violet, default "blue"): app highlight color.
+    - app_title (string, default "Dashboard"): title in the app header.
+
+  Envelope (fixed IN/OUT, elastic HOLD only, never gsap.timeScale()):
+    IN_BASE  = 1.05s  phone rises and settles on stage
+    HOLD     = elastic subtle device drift before the camera move
+    OUT_BASE = 1.65s  camera dives through the screen and the UI becomes stage
+    If D is shorter than IN_BASE + OUT_BASE, IN and OUT compress together and
+    HOLD becomes zero. OUT is a camera exit from the hardware, not a fade.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, carries no data-width or
+  data-height, and registers one paused timeline under the hardcoded
+  parallax-device-dive id.
+-->
+<html
+  lang="en"
+  data-composition-id="parallax-device-dive"
+  data-composition-duration="4.5"
+  data-composition-variables='[
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Highlight color used throughout the app UI.", "default": "blue", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "app_title", "type": "string", "role": "content", "label": "App title", "description": "Title displayed in the app header.", "default": "Dashboard" }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Parallax Device Dive</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="parallax-device-dive" data-duration="4.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            background: #0b0c0e;
+            color: #f8fafc;
+            font-family: Inter, system-ui, sans-serif;
+          }
+
+          .pdd-clip,
+          .pdd-camera {
+            position: absolute;
+            inset: 0;
+          }
+
+          .pdd-clip {
+            overflow: hidden;
+            background:
+              radial-gradient(
+                circle at 50% 48%,
+                color-mix(in srgb, var(--pdd-accent) 17%, transparent),
+                transparent 34%
+              ),
+              #0b0c0e;
+          }
+
+          .pdd-camera {
+            display: grid;
+            place-items: center;
+            perspective: 125cqw;
+          }
+
+          .pdd-phone {
+            position: relative;
+            height: 82cqh;
+            aspect-ratio: 9 / 19.5;
+            padding: 0.72cqh;
+            border: 0.08cqw solid rgba(255, 255, 255, 0.28);
+            border-radius: 4.4cqh;
+            background: linear-gradient(145deg, #3c4049, #17191e 44%, #08090c);
+            box-shadow:
+              0 4.8cqh 10cqh rgba(0, 0, 0, 0.5),
+              0 1.4cqh 3cqh rgba(0, 0, 0, 0.4),
+              inset 0 0.12cqh 0 rgba(255, 255, 255, 0.3),
+              inset 0 0 0 0.08cqw rgba(0, 0, 0, 0.72);
+            transform-origin: 50% 50%;
+            will-change: transform, opacity;
+          }
+
+          .pdd-screen {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            border-radius: 3.72cqh;
+            background: #f4f6fb;
+            box-shadow: inset 0 0 0 0.08cqw rgba(15, 23, 42, 0.28);
+            color: #111827;
+            isolation: isolate;
+          }
+
+          .pdd-app-glow {
+            position: absolute;
+            inset: 0;
+            background:
+              radial-gradient(
+                circle at 76% 8%,
+                color-mix(in srgb, var(--pdd-accent) 28%, transparent),
+                transparent 31%
+              ),
+              linear-gradient(180deg, #ffffff, #eef2f8);
+          }
+
+          .pdd-cutout {
+            position: absolute;
+            z-index: 10;
+            top: 1.2cqh;
+            left: 50%;
+            width: 7.2cqh;
+            height: 2.1cqh;
+            border-radius: 1.2cqh;
+            background: #050607;
+            transform: translateX(-50%);
+          }
+
+          .pdd-ui {
+            position: absolute;
+            inset: 0;
+            padding: 6.2cqh 2.1cqh 2.2cqh;
+            display: flex;
+            flex-direction: column;
+            gap: 1.55cqh;
+          }
+
+          .pdd-header,
+          .pdd-hero,
+          .pdd-stats {
+            position: relative;
+            z-index: 2;
+            transform-origin: 50% 50%;
+            will-change: transform;
+          }
+
+          .pdd-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+          }
+
+          .pdd-heading {
+            min-width: 0;
+          }
+
+          .pdd-kicker {
+            color: #788397;
+            font-size: 0.75cqw;
+            font-weight: 700;
+            letter-spacing: 0.12em;
+            line-height: 1;
+            text-transform: uppercase;
+          }
+
+          .pdd-title {
+            max-width: 13cqw;
+            overflow: hidden;
+            color: #111827;
+            font-size: 1.5cqw;
+            font-weight: 780;
+            letter-spacing: -0.04em;
+            line-height: 1.12;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          .pdd-avatar {
+            flex: 0 0 auto;
+            width: 3.7cqh;
+            aspect-ratio: 1;
+            display: grid;
+            place-items: center;
+            border-radius: 50%;
+            background: var(--pdd-accent);
+            color: #ffffff;
+            font-size: 0.72cqw;
+            font-weight: 800;
+            box-shadow: 0 0.55cqh 1.4cqh color-mix(in srgb, var(--pdd-accent) 32%, transparent);
+          }
+
+          .pdd-hero {
+            min-height: 24cqh;
+            padding: 2.1cqh;
+            overflow: hidden;
+            border: 0.08cqw solid rgba(255, 255, 255, 0.12);
+            border-radius: 2.1cqh;
+            background: #101722;
+            box-shadow: 0 1.7cqh 3.8cqh rgba(15, 23, 42, 0.2);
+          }
+
+          .pdd-hero-label {
+            color: #a9b4c7;
+            font-size: 0.72cqw;
+            font-weight: 650;
+          }
+
+          .pdd-value {
+            margin-top: 0.45cqh;
+            color: #ffffff;
+            font-size: 2.15cqw;
+            font-weight: 790;
+            letter-spacing: -0.055em;
+            line-height: 1;
+          }
+
+          .pdd-value span {
+            color: var(--pdd-accent);
+            font-size: 0.76cqw;
+            letter-spacing: 0;
+          }
+
+          .pdd-chart {
+            position: absolute;
+            left: 2.1cqh;
+            right: 2.1cqh;
+            bottom: 2.2cqh;
+            height: 8.2cqh;
+            display: flex;
+            align-items: end;
+            gap: 0.55cqh;
+          }
+
+          .pdd-bar {
+            flex: 1 1 0;
+            min-width: 0;
+            border-radius: 0.55cqh 0.55cqh 0.18cqh 0.18cqh;
+            background: color-mix(in srgb, var(--pdd-accent) 38%, #263244);
+          }
+
+          .pdd-bar:nth-child(1) {
+            height: 38%;
+          }
+
+          .pdd-bar:nth-child(2) {
+            height: 54%;
+          }
+
+          .pdd-bar:nth-child(3) {
+            height: 46%;
+          }
+
+          .pdd-bar:nth-child(4) {
+            height: 72%;
+          }
+
+          .pdd-bar:nth-child(5) {
+            height: 64%;
+          }
+
+          .pdd-bar:nth-child(6) {
+            height: 92%;
+            background: var(--pdd-accent);
+            box-shadow: 0 0.55cqh 1.5cqh color-mix(in srgb, var(--pdd-accent) 30%, transparent);
+          }
+
+          .pdd-stats {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 1.15cqh;
+          }
+
+          .pdd-stat {
+            min-height: 11.5cqh;
+            padding: 1.55cqh;
+            border: 0.08cqw solid rgba(55, 65, 81, 0.08);
+            border-radius: 1.7cqh;
+            background: rgba(255, 255, 255, 0.94);
+            box-shadow: 0 1.1cqh 2.6cqh rgba(71, 85, 105, 0.12);
+          }
+
+          .pdd-stat-label {
+            color: #7b8799;
+            font-size: 0.65cqw;
+            font-weight: 650;
+          }
+
+          .pdd-stat-value {
+            margin-top: 1cqh;
+            color: #18202d;
+            font-size: 1.25cqw;
+            font-weight: 780;
+            letter-spacing: -0.035em;
+          }
+
+          .pdd-stat-value span {
+            color: var(--pdd-accent);
+          }
+        </style>
+
+        <div
+          id="parallax-device-dive-clip"
+          class="pdd-clip clip"
+          data-start="0"
+          data-duration="4.5"
+          data-track-index="0"
+        >
+          <div class="pdd-camera">
+            <div class="pdd-phone">
+              <div class="pdd-screen">
+                <div class="pdd-app-glow"></div>
+                <div class="pdd-ui">
+                  <div class="pdd-header">
+                    <div class="pdd-heading">
+                      <div class="pdd-kicker">Overview</div>
+                      <div class="pdd-title"></div>
+                    </div>
+                    <div class="pdd-avatar">HF</div>
+                  </div>
+
+                  <div class="pdd-hero">
+                    <div class="pdd-hero-label">Weekly activity</div>
+                    <div class="pdd-value">24.8k <span>+18%</span></div>
+                    <div class="pdd-chart" aria-hidden="true">
+                      <span class="pdd-bar"></span>
+                      <span class="pdd-bar"></span>
+                      <span class="pdd-bar"></span>
+                      <span class="pdd-bar"></span>
+                      <span class="pdd-bar"></span>
+                      <span class="pdd-bar"></span>
+                    </div>
+                  </div>
+
+                  <div class="pdd-stats">
+                    <div class="pdd-stat">
+                      <div class="pdd-stat-label">Conversion</div>
+                      <div class="pdd-stat-value"><span>8.4%</span></div>
+                    </div>
+                    <div class="pdd-stat">
+                      <div class="pdd-stat-label">Active users</div>
+                      <div class="pdd-stat-value">12,604</div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="pdd-cutout" aria-hidden="true"></div>
+            </div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var phone = root.querySelector(".pdd-phone");
+            var cutout = root.querySelector(".pdd-cutout");
+            var header = root.querySelector(".pdd-header");
+            var hero = root.querySelector(".pdd-hero");
+            var stats = root.querySelector(".pdd-stats");
+            var title = root.querySelector(".pdd-title");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var accent = vars.accent;
+            var accentColors = {
+              green: "var(--brand, #a1a1aa)",
+              blue: "var(--accent, #a1a1aa)",
+              violet: "var(--accent-2, #a1a1aa)",
+            };
+            var accentColor = accentColors[accent] || accentColors.blue;
+            var appTitle = vars.app_title == null ? "Dashboard" : String(vars.app_title);
+
+            root.style.setProperty("--pdd-accent", accentColor);
+            title.textContent = appTitle;
+
+            var IN_BASE = 1.05;
+            var OUT_BASE = 1.65;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4.5"));
+            var totalBase = IN_BASE + OUT_BASE;
+            var envelopeScale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * envelopeScale;
+            var OUT = OUT_BASE * envelopeScale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var HOLD_START = IN;
+            var OUT_START = IN + HOLD;
+            var RISE = IN * 0.78;
+            var SETTLE = IN - RISE;
+            var DIVE = OUT * 0.72;
+            var DEPTH_SETTLE = OUT - DIVE;
+
+            var tl = gsap.timeline({ paused: true });
+
+            tl.fromTo(
+              phone,
+              { opacity: 0, y: "18cqh", scale: 0.86 },
+              { opacity: 1, y: "-1cqh", scale: 1.02, duration: RISE, ease: "power3.out" },
+              0,
+            );
+            tl.to(phone, { y: 0, scale: 1, duration: SETTLE, ease: "power2.out" }, RISE);
+
+            if (HOLD > 0) {
+              tl.to(phone, { y: "-0.55cqh", duration: HOLD * 0.5, ease: "sine.inOut" }, HOLD_START);
+              tl.to(
+                phone,
+                { y: 0, duration: HOLD * 0.5, ease: "sine.inOut" },
+                HOLD_START + HOLD * 0.5,
+              );
+            }
+
+            tl.to(phone, { scale: 6.4, y: "2.4cqh", duration: OUT, ease: "power4.in" }, OUT_START);
+            tl.to(cutout, { opacity: 0, duration: DIVE * 0.45, ease: "power2.out" }, OUT_START);
+            tl.to(
+              header,
+              { y: "-1.2cqh", scale: 1.035, duration: DIVE, ease: "power4.in" },
+              OUT_START,
+            );
+            tl.to(
+              hero,
+              { y: "-2.1cqh", scale: 1.09, duration: DIVE, ease: "power4.in" },
+              OUT_START,
+            );
+            tl.to(
+              stats,
+              { y: "2.4cqh", scale: 1.16, duration: DIVE, ease: "power4.in" },
+              OUT_START,
+            );
+            tl.to(
+              [header, hero, stats],
+              { y: 0, scale: 1, duration: DEPTH_SETTLE, ease: "power4.out" },
+              OUT_START + DIVE,
+            );
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["parallax-device-dive"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add parallax-device-dive" />
+
+That writes one file: `compositions/components/parallax-device-dive.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/parallax-device-dive.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `camera` `device` `phone` `parallax` `transition`.
+
+## 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/components/parallax-unzoom.mdx b/docs/catalog/components/parallax-unzoom.mdx
index 1fbeef7c0f..840d2182f8 100644
--- a/docs/catalog/components/parallax-unzoom.mdx
+++ b/docs/catalog/components/parallax-unzoom.mdx
@@ -3,23 +3,131 @@ title: "Parallax Unzoom"
 description: "Reveal transition — focus card scales down from full frame as siblings parallax in to form a grid (reverse of parallax-zoom)"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/parallax-unzoom.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/parallax-unzoom.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/components/parallax-unzoom.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Parallax Unzoom preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add parallax-unzoom
-```
+<InstallCommand command="npx hyperframes add parallax-unzoom" />
 
 That writes one file: `compositions/components/parallax-unzoom.html`.
 
-## Paste it into your composition
+## Source
+
+<Accordion title={`parallax-unzoom.html`}>
+
+```html
+<!--
+  Parallax Unzoom — focus card scales down from full frame while siblings
+  parallax IN to form a grid. The reverse of parallax-zoom.
+
+  Pairs naturally with parallax-zoom: zoom INTO a card in scene 1, then
+  unzoom OUT of it in scene 2 to reveal a fresh grid underneath.
+
+  Usage:
+  1. Wrap your card grid with class="parallax-unzoom-grid".
+  2. Mark each card with class="parallax-unzoom-card".
+  3. Add data-pu-row="0|1|2|..." and data-pu-col="0|1|2|..." per card.
+  4. Mark the card that starts at full size with data-pu-focus="true".
+  5. Drive --pu-progress 0 → 1 on the .parallax-unzoom-grid from your
+     composition's paused GSAP timeline (see example at bottom).
+
+  Tunable CSS variables on .parallax-unzoom-grid:
+  - --pu-focus-scale  (default 6)      starting scale of the focus card
+  - --pu-sibling-push (default 900px)  outward distance siblings start at
+  - --pu-sibling-fade (default 1)      sibling opacity falloff (0–1)
+-->
+
+<style>
+  .parallax-unzoom-grid {
+    --pu-progress: 0;
+    --pu-focus-scale: 6;
+    --pu-sibling-push: 900px;
+    --pu-sibling-fade: 1;
+    position: relative;
+  }
+
+  .parallax-unzoom-card {
+    transform-origin: center center;
+    will-change: transform, opacity;
+    transform: translate3d(
+        calc(var(--pu-dx, 0px) * (1 - var(--pu-progress))),
+        calc(var(--pu-dy, 0px) * (1 - var(--pu-progress))),
+        0
+      )
+      scale(calc(0.7 + 0.3 * var(--pu-progress)));
+    opacity: calc(var(--pu-progress) * var(--pu-sibling-fade));
+  }
+
+  .parallax-unzoom-card[data-pu-focus="true"] {
+    z-index: 10;
+    transform: translate3d(0, 0, 0)
+      scale(calc(var(--pu-focus-scale) - (var(--pu-focus-scale) - 1) * var(--pu-progress)));
+    opacity: 1;
+  }
+</style>
+
+<script>
+  (function () {
+    const grids = document.querySelectorAll(".parallax-unzoom-grid");
+
+    grids.forEach((grid) => {
+      const cards = Array.from(grid.querySelectorAll(".parallax-unzoom-card"));
+      if (cards.length === 0) return;
+
+      let focal = cards.find((c) => c.dataset.puFocus === "true");
+      if (!focal) {
+        focal = cards[Math.floor(cards.length / 2)];
+        focal.dataset.puFocus = "true";
+      }
+
+      const focusRow = Number(focal.dataset.puRow ?? 0);
+      const focusCol = Number(focal.dataset.puCol ?? 0);
+      const push = parseFloat(getComputedStyle(grid).getPropertyValue("--pu-sibling-push")) || 900;
+
+      cards.forEach((card) => {
+        if (card === focal) return;
+        const row = Number(card.dataset.puRow ?? 0);
+        const col = Number(card.dataset.puCol ?? 0);
+        const dCol = col - focusCol;
+        const dRow = row - focusRow;
+        const mag = Math.hypot(dCol, dRow) || 1;
+        const nx = (dCol / mag) * push * mag;
+        const ny = (dRow / mag) * push * mag;
+        card.style.setProperty("--pu-dx", `${nx}px`);
+        card.style.setProperty("--pu-dy", `${ny}px`);
+      });
+    });
+  })();
+</script>
+
+<!--
+  Timeline integration example (paste into your composition's GSAP timeline):
+
+  tl.fromTo(
+    ".parallax-unzoom-grid",
+    { "--pu-progress": 0 },
+    {
+      "--pu-progress": 1,
+      duration: 2.4,
+      ease: "power2.inOut",
+    },
+    startTime, // start time in seconds
+  );
+
+  Chaining with parallax-zoom example:
+  // Scene 1 (0-3s): zoom IN to the focal card via parallax-zoom
+  // Scene 2 (3-6s): unzoom OUT of a NEW grid via parallax-unzoom,
+  //                 with the focal card pre-positioned to match scene 1
+-->
+```
+
+</Accordion>
 
-Open `compositions/components/parallax-unzoom.html` and copy what is inside into your own composition.
-The file opens with a comment header that walks you through it.
+## Usage
 
-A component has no size or duration of its own. It takes both from the composition
-you paste it into.
+Open `compositions/components/parallax-unzoom.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/components/parallax-zoom.mdx b/docs/catalog/components/parallax-zoom.mdx
index 21b895f518..93a2e00344 100644
--- a/docs/catalog/components/parallax-zoom.mdx
+++ b/docs/catalog/components/parallax-zoom.mdx
@@ -3,23 +3,127 @@ title: "Parallax Zoom"
 description: "Center card scales up to fill the frame while siblings parallax outward — inspired by the eBay Playbook hero transition"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/parallax-zoom.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/parallax-zoom.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/components/parallax-zoom.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Parallax Zoom preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add parallax-zoom
-```
+<InstallCommand command="npx hyperframes add parallax-zoom" />
 
 That writes one file: `compositions/components/parallax-zoom.html`.
 
-## Paste it into your composition
+## Source
+
+<Accordion title={`parallax-zoom.html`}>
+
+```html
+<!--
+  Parallax Zoom — center card scales up while siblings parallax outward.
+
+  Inspired by the eBay Playbook hero transition: a grid of cards collapses
+  as the focal card grows to fill the frame.
+
+  Usage:
+  1. Wrap your card grid with class="parallax-zoom-grid".
+  2. Mark each card with class="parallax-zoom-card".
+  3. Add data-pz-row="0|1|2|..." and data-pz-col="0|1|2|..." per card
+     so the snippet knows each card's grid offset.
+  4. Mark the focal card with data-pz-focus="true" — this is the one
+     that scales up to fill the frame.
+  5. Drive --pz-progress 0 → 1 on the .parallax-zoom-grid from your
+     composition's paused GSAP timeline (see example at bottom).
+
+  Tunable CSS variables on .parallax-zoom-grid:
+  - --pz-focus-scale  (default 6)      maximum scale of the focused card
+  - --pz-sibling-push (default 900px)  outward translation strength
+  - --pz-sibling-fade (default 1)      sibling opacity falloff (0–1)
+-->
+
+<style>
+  .parallax-zoom-grid {
+    --pz-progress: 0;
+    --pz-focus-scale: 6;
+    --pz-sibling-push: 900px;
+    --pz-sibling-fade: 1;
+    position: relative;
+  }
+
+  .parallax-zoom-card {
+    transform-origin: center center;
+    will-change: transform, opacity;
+    transform: translate3d(
+        calc(var(--pz-dx, 0px) * var(--pz-progress)),
+        calc(var(--pz-dy, 0px) * var(--pz-progress)),
+        0
+      )
+      scale(calc(1 - var(--pz-progress) * 0.4));
+    opacity: calc(1 - var(--pz-progress) * var(--pz-sibling-fade));
+  }
+
+  .parallax-zoom-card[data-pz-focus="true"] {
+    z-index: 10;
+    transform: translate3d(0, 0, 0)
+      scale(calc(1 + var(--pz-progress) * (var(--pz-focus-scale) - 1)));
+    opacity: 1;
+  }
+</style>
+
+<script>
+  (function () {
+    const grids = document.querySelectorAll(".parallax-zoom-grid");
+
+    grids.forEach((grid) => {
+      const cards = Array.from(grid.querySelectorAll(".parallax-zoom-card"));
+      if (cards.length === 0) return;
+
+      let focal = cards.find((c) => c.dataset.pzFocus === "true");
+      if (!focal) {
+        focal = cards[Math.floor(cards.length / 2)];
+        focal.dataset.pzFocus = "true";
+      }
+
+      const focusRow = Number(focal.dataset.pzRow ?? 0);
+      const focusCol = Number(focal.dataset.pzCol ?? 0);
+      const push = parseFloat(getComputedStyle(grid).getPropertyValue("--pz-sibling-push")) || 900;
+
+      cards.forEach((card) => {
+        if (card === focal) return;
+        const row = Number(card.dataset.pzRow ?? 0);
+        const col = Number(card.dataset.pzCol ?? 0);
+        const dCol = col - focusCol;
+        const dRow = row - focusRow;
+        const mag = Math.hypot(dCol, dRow) || 1;
+        const nx = (dCol / mag) * push * mag;
+        const ny = (dRow / mag) * push * mag;
+        card.style.setProperty("--pz-dx", `${nx}px`);
+        card.style.setProperty("--pz-dy", `${ny}px`);
+      });
+    });
+  })();
+</script>
+
+<!--
+  Timeline integration example (paste into your composition's GSAP timeline):
+
+  tl.fromTo(
+    ".parallax-zoom-grid",
+    { "--pz-progress": 0 },
+    {
+      "--pz-progress": 1,
+      duration: 2.4,
+      ease: "power2.inOut",
+    },
+    1.0, // start time in seconds
+  );
+-->
+```
+
+</Accordion>
 
-Open `compositions/components/parallax-zoom.html` and copy what is inside into your own composition.
-The file opens with a comment header that walks you through it.
+## Usage
 
-A component has no size or duration of its own. It takes both from the composition
-you paste it into.
+Open `compositions/components/parallax-zoom.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/components/particle-image-reveal.mdx b/docs/catalog/components/particle-image-reveal.mdx
new file mode 100644
index 0000000000..94ab0188eb
--- /dev/null
+++ b/docs/catalog/components/particle-image-reveal.mdx
@@ -0,0 +1,434 @@
+---
+title: "Particle Image Reveal"
+description: "A seeded deterministic particle field converges and settles while a slotted image reveals beneath it, the trail thinning until the image holds clean."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/particle-image-reveal.html"
+  compositionId="particle-image-reveal"
+  compositionSrc="compositions/components/particle-image-reveal.html"
+  variables={[{"id":"density","type":"enum","role":"style","label":"Density","description":"Particle count for the converging field.","default":"med","options":[{"value":"low","label":"Low"},{"value":"med","label":"Medium"},{"value":"high","label":"High"}]},{"id":"direction","type":"enum","role":"timing","label":"Direction","description":"ltr sweeps the reveal left to right; center opens an iris from the middle outward.","default":"ltr","options":[{"value":"ltr","label":"Left to right"},{"value":"center","label":"Center out"}]},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Particle and monogram color: green rides --brand, blue rides --accent, violet rides --accent-2.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Optional departure. Default none: the revealed image holds until the frame cuts.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
+>
+
+```html particle-image-reveal.html
+<!doctype html>
+<!--
+  particle-image-reveal: HyperFrames video primitive (intros & reveals)
+
+  A seeded deterministic particle field materializes a supplied image: accent
+  particles converge and settle across the frame while the image reveals
+  beneath them (left-to-right wipe or center iris, matching the particle
+  sweep), the trail thinning until the last particle lands and the image
+  holds clean.
+
+  The image is a SLOT. Callers supply content by placing an inert template
+  anywhere in the HOST page (templates never render, and the runtime wipes
+  the host clip's own children on mount, so the slot lives at document
+  level):
+
+    <template data-slot="particle-image-reveal-image"> ... </template>
+
+  Slot content may be an <img>, a muted <video>, or arbitrary HTML; direct
+  img/video children are stretched to cover the stage. When no slot exists,
+  the primitive renders a token monogram: a surface tile with one display
+  glyph, drawn entirely from contract tokens.
+
+  Variables (declared in data-composition-variables below):
+    - density ("low" | "med" | "high", default "med"): particle count.
+    - direction ("ltr" | "center", default "ltr"): ltr sweeps the reveal
+      left to right; center opens an iris from the middle outward.
+    - accent ("green" | "blue" | "violet", default "green"): green rides
+      --brand, blue rides --accent, violet rides --accent-2.
+    - exit ("none" | "fade" | "up", default "none"): frame roots own
+      transitions; the default holds the final frame to the last pixel.
+
+  Envelope, fixed IN and OUT with elastic HOLD only (never timeScale):
+    IN_BASE  = 2.80s  particles converge, image reveals, trail thins to zero
+    HOLD     = max(0, D - IN - OUT); truly still: any fractional transform
+               drift would re-raster the slot/canvas layer at seek-history-
+               dependent subpixel offsets and break byte-identical frames
+    OUT_BASE = 0.45s  only when exit != none
+    If D < IN_BASE + OUT_BASE, IN and OUT compress together.
+
+  Determinism (canvas 2D law): one per-particle attribute table is computed
+  exactly once during synchronous timeline construction from fixed LCG seed
+  0x50a71c1e. Every painted frame is a pure function of (that table, the
+  timeline's current time): the timeline's onUpdate clears the canvas and
+  redraws every particle from scratch. No Math.random, no wall clock, no
+  incremental state, no requestAnimationFrame. Eventful seeks
+  (suppressEvents=false, the engine's render path) repaint identically in
+  any order and either direction; by the end of IN every particle's alpha
+  is exactly zero, so the HOLD canvas is one clear rect.
+
+  Mount contract: the runtime clones only this template. #root fills the
+  host box (no data-width/data-height, container-type: size, cqmin units),
+  is styled via #root only, and registers one paused timeline under the
+  LITERAL "particle-image-reveal" key. All DOM state is set with explicit
+  endpoints (gsap.set + fromTo) so any seek order lands identical frames.
+-->
+<html
+  lang="en"
+  data-composition-id="particle-image-reveal"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "density", "type": "enum", "role": "style", "label": "Density", "description": "Particle count for the converging field.", "default": "med", "options": [{ "value": "low", "label": "Low" }, { "value": "med", "label": "Medium" }, { "value": "high", "label": "High" }] },
+    { "id": "direction", "type": "enum", "role": "timing", "label": "Direction", "description": "ltr sweeps the reveal left to right; center opens an iris from the middle outward.", "default": "ltr", "options": [{ "value": "ltr", "label": "Left to right" }, { "value": "center", "label": "Center out" }] },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Particle and monogram color: green rides --brand, blue rides --accent, violet rides --accent-2.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the revealed image holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Particle Image Reveal</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="particle-image-reveal" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, "Inter", system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .pir-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .pir-stage {
+            position: absolute;
+            inset: 0;
+            will-change: transform, opacity;
+          }
+
+          .pir-image {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+            will-change: clip-path, opacity;
+          }
+
+          .pir-image > img,
+          .pir-image > video {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+          }
+
+          .pir-monogram {
+            display: grid;
+            place-items: center;
+            width: 52cqmin;
+            height: 52cqmin;
+            border: 0.18cqmin solid
+              color-mix(in srgb, var(--pir-accent) 52%, var(--border, #475569));
+            border-radius: var(--radius, 3cqmin);
+            background: color-mix(in srgb, var(--surface, #14171c) 90%, var(--pir-accent));
+            box-shadow: 0 3cqh 9cqh color-mix(in srgb, var(--bg, #000000) 40%, transparent);
+          }
+
+          .pir-monogram-glyph {
+            color: var(--pir-accent);
+            font-size: 26cqmin;
+            font-weight: 600;
+            line-height: 1;
+            letter-spacing: 0.02em;
+          }
+
+          .pir-canvas {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+          }
+        </style>
+
+        <div
+          id="particle-image-reveal-clip"
+          class="pir-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="pir-stage">
+            <div class="pir-image">
+              <div class="pir-monogram">
+                <span class="pir-monogram-glyph" aria-hidden="true">H</span>
+              </div>
+            </div>
+            <canvas class="pir-canvas" aria-hidden="true"></canvas>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".pir-stage");
+            var imageLayer = root.querySelector(".pir-image");
+            var canvas = root.querySelector(".pir-canvas");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var densityCounts = { low: 320, med: 640, high: 1100 };
+            var density = Object.prototype.hasOwnProperty.call(densityCounts, vars.density)
+              ? vars.density
+              : "med";
+            var direction = vars.direction === "center" ? "center" : "ltr";
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            root.style.setProperty("--pir-accent", accentColors[accent]);
+
+            // SLOT. Caller templates live at HOST DOCUMENT level (the mount
+            // wipes host-clip children, and templates never render). The
+            // scoped document proxy filters queries to this composition's
+            // subtree, so the lookup deliberately goes through ownerDocument.
+            var hostDoc = root.ownerDocument;
+            var slotTemplate = null;
+            try {
+              slotTemplate = hostDoc.querySelector(
+                'template[data-slot="particle-image-reveal-image"]',
+              );
+            } catch (error) {
+              slotTemplate = null;
+            }
+            if (slotTemplate) {
+              imageLayer.querySelector(".pir-monogram").remove();
+              imageLayer.appendChild(hostDoc.importNode(slotTemplate.content, true));
+            }
+
+            // Envelope: fixed IN/OUT, elastic HOLD, never time-scaled.
+            var IN_BASE = 2.8;
+            var OUT_BASE = exit === "none" ? 0 : 0.45;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var totalBase = Math.max(0.001, IN_BASE + OUT_BASE);
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var OUT_START = IN + HOLD;
+
+            // Canvas raster basis is fixed once at mount. Elastic root: the
+            // host box decides the resolution; the same host always yields
+            // the same raster, so painted frames stay byte-stable.
+            var dpr = Math.min(2, Math.max(1, Number(window.devicePixelRatio) || 1));
+            var box = root.getBoundingClientRect();
+            var cssW = Math.max(1, Math.round(box.width) || 640);
+            var cssH = Math.max(1, Math.round(box.height) || 360);
+            canvas.width = Math.round(cssW * dpr);
+            canvas.height = Math.round(cssH * dpr);
+            var ctx = canvas.getContext("2d");
+            var minDim = Math.min(canvas.width, canvas.height);
+
+            // Resolve the accent token to a concrete color once at mount so
+            // canvas fills never depend on style recalc during seeks.
+            var probe = hostDoc.createElement("span");
+            probe.style.color = accentColors[accent];
+            root.appendChild(probe);
+            var particleColor = getComputedStyle(probe).color || "#71f5a7";
+            probe.remove();
+
+            // The LCG and every per-particle decision live here. This IIFE
+            // runs once before timeline construction, then only the table is
+            // read. Particle state at any time is a pure function of
+            // (table row, timeline time).
+            var COUNT = densityCounts[density];
+            var particles = (function () {
+              var state = 0x50a71c1e;
+              function next() {
+                state = (Math.imul(1664525, state) + 1013904223) >>> 0;
+                return state / 4294967296;
+              }
+              var rows = [];
+              for (var i = 0; i < COUNT; i += 1) {
+                var tx = next();
+                var ty = next();
+                var key =
+                  direction === "center"
+                    ? Math.min(1, Math.hypot(tx - 0.5, ty - 0.5) / 0.7071)
+                    : tx;
+                // Arrival and birth are fractions of IN. Arrivals sweep with
+                // the reveal front; every fade completes by p = 1 exactly.
+                var arrive = 0.24 + 0.66 * key + 0.04 * next();
+                var travel = 0.2 + 0.12 * next();
+                var fade = 0.05 + 0.04 * next();
+                var angle;
+                if (direction === "center") {
+                  // Converge inward: start displaced radially outward.
+                  angle = Math.atan2(ty - 0.5, tx - 0.5);
+                  if (tx === 0.5 && ty === 0.5) angle = next() * Math.PI * 2;
+                } else {
+                  // Fly in from the left, within a 90 degree cone.
+                  angle = Math.PI + (next() - 0.5) * (Math.PI / 2);
+                }
+                rows.push({
+                  tx: tx,
+                  ty: ty,
+                  arrive: Math.min(0.94, arrive),
+                  birth: Math.max(0, arrive - travel),
+                  fade: fade,
+                  offset: (0.06 + 0.14 * next()) * minDim,
+                  ox: Math.cos(angle),
+                  oy: Math.sin(angle),
+                  radius: (0.28 + 0.62 * next()) * (minDim / 100),
+                  dim: 0.55 + 0.45 * next(),
+                });
+              }
+              return rows;
+            })();
+
+            function clamp01(v) {
+              return v < 0 ? 0 : v > 1 ? 1 : v;
+            }
+
+            // Pure repaint: clear, then draw every particle from (row, p).
+            function paint(timeSeconds) {
+              ctx.clearRect(0, 0, canvas.width, canvas.height);
+              var p = IN > 0 ? clamp01(timeSeconds / IN) : 1;
+              // Global end clamp: the whole field is gone exactly at p = 1,
+              // and the trail thins as the reveal completes.
+              var endClamp = clamp01((1 - p) / 0.05);
+              if (endClamp === 0) return;
+              var thin = 1 - 0.4 * clamp01((p - 0.72) / 0.28);
+              ctx.fillStyle = particleColor;
+              for (var i = 0; i < particles.length; i += 1) {
+                var row = particles[i];
+                var u = clamp01((p - row.birth) / (row.arrive - row.birth));
+                if (u <= 0) continue;
+                var settled = clamp01((p - row.arrive) / row.fade);
+                var alpha = clamp01(u / 0.14) * (1 - settled) * endClamp * thin * row.dim * 0.92;
+                if (alpha <= 0.002) continue;
+                var e = 1 - Math.pow(1 - u, 3);
+                var x = row.tx * canvas.width + row.ox * row.offset * (1 - e);
+                var y = row.ty * canvas.height + row.oy * row.offset * (1 - e);
+                var r = row.radius * dpr * (0.6 + 0.4 * (1 - settled));
+                ctx.globalAlpha = alpha;
+                ctx.beginPath();
+                ctx.arc(x, y, r, 0, Math.PI * 2);
+                ctx.fill();
+              }
+              ctx.globalAlpha = 1;
+            }
+
+            // Image reveal geometry follows the particle sweep.
+            var clipFrom =
+              direction === "center" ? "circle(0% at 50% 50%)" : "inset(0% 100% 0% 0%)";
+            var clipTo = direction === "center" ? "circle(75% at 50% 50%)" : "inset(0% 0% 0% 0%)";
+
+            gsap.set(stage, { opacity: 1, y: "0cqh" });
+            gsap.set(imageLayer, { opacity: 0, clipPath: clipFrom });
+
+            var tl = gsap.timeline({
+              paused: true,
+              onUpdate: function () {
+                paint(tl.time());
+              },
+            });
+
+            // Anchor tween: an inert plain-object tween spanning the full
+            // authored duration. Without it the timeline would end at the
+            // last DOM tween (2.69s) and seeks into the hold would clamp
+            // tl.time() below IN, freezing the particle field short of its
+            // authored zero. It also guarantees onUpdate fires (and the
+            // canvas repaints) for every eventful seek anywhere in [0, D].
+            tl.to({ p: 0 }, { p: 1, duration: duration, ease: "none" }, 0);
+
+            // IN: the image fades up beneath the particles and reveals along
+            // the same front the arrivals sweep. Both endpoints authored.
+            tl.fromTo(
+              imageLayer,
+              { opacity: 0 },
+              { opacity: 1, duration: IN * 0.42, ease: "power2.out" },
+              IN * 0.18,
+            );
+            tl.fromTo(
+              imageLayer,
+              { clipPath: clipFrom },
+              { clipPath: clipTo, duration: IN * 0.74, ease: "power2.inOut" },
+              IN * 0.22,
+            );
+
+            // HOLD: truly still, deliberately. Fractional transform drift
+            // re-rasters the slot/canvas layer at history-dependent subpixel
+            // offsets and breaks byte-identical seeks (the K1 cq-transform
+            // trap); the reveal supplies the life, the hold supplies calm.
+
+            // OUT: optional departure; exit none holds until the frame cuts.
+            if (exit === "up") {
+              tl.to(stage, { y: "-4cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "fade") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            }
+
+            tl.seek(0);
+            paint(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["particle-image-reveal"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add particle-image-reveal" />
+
+That writes one file: `compositions/components/particle-image-reveal.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/particle-image-reveal.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `intros-reveals` `particles` `reveal` `canvas` `deterministic`.
+
+## 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/components/particle-text-dissolve.mdx b/docs/catalog/components/particle-text-dissolve.mdx
new file mode 100644
index 0000000000..3f0c0fbe1f
--- /dev/null
+++ b/docs/catalog/components/particle-text-dissolve.mdx
@@ -0,0 +1,456 @@
+---
+title: "Particle Text Dissolve"
+description: "Text assembles from a seeded particle cloud (or dissolves into it): per-particle targets sampled once from the rendered text bitmap at mount, table-driven particles, zero per-particle tweens, one onUpdate painter."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/particle-text-dissolve.html"
+  compositionId="particle-text-dissolve"
+  compositionSrc="compositions/components/particle-text-dissolve.html"
+  variables={[{"id":"text","type":"string","role":"content","label":"Text","description":"The line that assembles from (or dissolves into) the particle cloud.","default":"Dissolve"},{"id":"direction","type":"enum","role":"timing","label":"Direction","description":"in assembles the text from the cloud and holds it crisp; out erases the text into the cloud and holds empty.","default":"in","options":[{"value":"in","label":"Assemble in"},{"value":"out","label":"Dissolve out"}]},{"id":"density","type":"enum","role":"style","label":"Density","description":"Particle count cap for the field.","default":"med","options":[{"value":"low","label":"Low"},{"value":"med","label":"Medium"},{"value":"high","label":"High"}]},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Text and particle color: green rides --brand, blue rides --accent, violet rides --accent-2.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Optional departure. Default none: the end state holds until the frame cuts.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
+>
+
+```html particle-text-dissolve.html
+<!doctype html>
+<!--
+  particle-text-dissolve: HyperFrames video primitive (type / particles).
+  Wave M8. Direct donor: particle-image-reveal (canvas determinism law).
+
+  Text assembles FROM a seeded particle cloud, or dissolves TO it (direction
+  enum). Per-particle target positions are sampled ONCE at mount from the
+  rendered text bitmap: the token-styled line is rastered to an offscreen
+  canvas, read back with getImageData, and every lit cell on a deterministic
+  grid becomes a particle target. Particles are table-driven with ZERO
+  per-particle tweens; one onUpdate painter clears and redraws the whole
+  field from scratch each frame.
+
+  direction "in": particles fly from a scattered cloud onto the glyphs while
+  the crisp DOM line wipes in along the same left-to-right front; each
+  particle fades as it settles, so by the end of IN the canvas is empty and
+  the DOM text holds crisp and themable.
+  direction "out": the crisp line holds for a beat, then erases left to
+  right as particles are born on the departing glyphs and scatter outward,
+  fading in flight; the HOLD is empty.
+
+  Variables (declared in data-composition-variables below):
+    - text (string, default "Dissolve"): the line that assembles/dissolves.
+    - direction ("in" | "out", default "in").
+    - density ("low" | "med" | "high", default "med"): particle count cap.
+    - accent ("green" | "blue" | "violet", default "green"): text and
+      particle color; green rides --brand, blue rides --accent, violet
+      rides --accent-2.
+    - exit ("none" | "fade" | "up", default "none"): frame roots own
+      transitions.
+
+  Envelope, fixed IN and OUT with elastic HOLD only (never timeScale):
+    IN_BASE  = 2.80s  the assembly (or dissolve) plays out completely
+    HOLD     = max(0, D - IN - OUT); truly still: direction in holds the
+               crisp DOM line, direction out holds an empty stage; either
+               way the canvas is one clear rect
+    OUT_BASE = 0.45s  only when exit != none
+    If D < IN_BASE + OUT_BASE, IN and OUT compress together.
+
+  Determinism (canvas 2D law, per particle-image-reveal): the text bitmap
+  readback and the per-particle attribute table are computed exactly once
+  during synchronous timeline construction; the table's random components
+  come from fixed LCG seed 0x9d1550f7. Every painted frame is a pure
+  function of (table, timeline time): the anchor tween's onUpdate clears
+  the canvas and redraws every particle. No Math.random, no wall clock, no
+  incremental state, no requestAnimationFrame. Eventful seeks
+  (suppressEvents=false, the engine's render path) repaint identically in
+  any order and either direction.
+
+  Mount contract: the runtime clones only this template. #root fills the
+  host box (no data-width/data-height, container-type: size, cqmin units),
+  is styled via #root only, and registers one paused timeline under the
+  LITERAL "particle-text-dissolve" key. All DOM state is set with explicit
+  endpoints (gsap.set + fromTo) so any seek order lands identical frames.
+-->
+<html
+  lang="en"
+  data-composition-id="particle-text-dissolve"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "text", "type": "string", "role": "content", "label": "Text", "description": "The line that assembles from (or dissolves into) the particle cloud.", "default": "Dissolve" },
+    { "id": "direction", "type": "enum", "role": "timing", "label": "Direction", "description": "in assembles the text from the cloud and holds it crisp; out erases the text into the cloud and holds empty.", "default": "in", "options": [{ "value": "in", "label": "Assemble in" }, { "value": "out", "label": "Dissolve out" }] },
+    { "id": "density", "type": "enum", "role": "style", "label": "Density", "description": "Particle count cap for the field.", "default": "med", "options": [{ "value": "low", "label": "Low" }, { "value": "med", "label": "Medium" }, { "value": "high", "label": "High" }] },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Text and particle color: green rides --brand, blue rides --accent, violet rides --accent-2.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the end state holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Particle Text Dissolve</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="particle-text-dissolve" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, "Inter", system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .ptd-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .ptd-stage {
+            position: absolute;
+            inset: 0;
+            will-change: transform, opacity;
+          }
+
+          .ptd-text {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            will-change: clip-path, opacity;
+          }
+
+          .ptd-line {
+            color: var(--ptd-accent);
+            font-weight: 600;
+            line-height: 1;
+            letter-spacing: 0.02em;
+            white-space: nowrap;
+          }
+
+          .ptd-canvas {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+          }
+        </style>
+
+        <div
+          id="particle-text-dissolve-clip"
+          class="ptd-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="ptd-stage">
+            <div class="ptd-text">
+              <span class="ptd-line"></span>
+            </div>
+            <canvas class="ptd-canvas" aria-hidden="true"></canvas>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".ptd-stage");
+            var textLayer = root.querySelector(".ptd-text");
+            var line = root.querySelector(".ptd-line");
+            var canvas = root.querySelector(".ptd-canvas");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var text =
+              typeof vars.text === "string" && vars.text.length > 0 ? vars.text : "Dissolve";
+            var direction = vars.direction === "out" ? "out" : "in";
+            var densityCaps = { low: 900, med: 1700, high: 2800 };
+            var density = Object.prototype.hasOwnProperty.call(densityCaps, vars.density)
+              ? vars.density
+              : "med";
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            root.style.setProperty("--ptd-accent", accentColors[accent]);
+            line.textContent = text;
+
+            // Envelope: fixed IN/OUT, elastic HOLD, never time-scaled.
+            var IN_BASE = 2.8;
+            var OUT_BASE = exit === "none" ? 0 : 0.45;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var totalBase = Math.max(0.001, IN_BASE + OUT_BASE);
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var OUT_START = IN + HOLD;
+
+            // Canvas raster basis is fixed once at mount. Elastic root: the
+            // host box decides the resolution; the same host always yields
+            // the same raster, so painted frames stay byte-stable.
+            var dpr = Math.min(2, Math.max(1, Number(window.devicePixelRatio) || 1));
+            var box = root.getBoundingClientRect();
+            var cssW = Math.max(1, Math.round(box.width) || 640);
+            var cssH = Math.max(1, Math.round(box.height) || 360);
+            canvas.width = Math.round(cssW * dpr);
+            canvas.height = Math.round(cssH * dpr);
+            var ctx = canvas.getContext("2d");
+            var minDim = Math.min(canvas.width, canvas.height);
+
+            // Resolve the accent token to a concrete color once at mount so
+            // canvas fills never depend on style recalc during seeks.
+            var hostDoc = root.ownerDocument;
+            var probe = hostDoc.createElement("span");
+            probe.style.color = accentColors[accent];
+            root.appendChild(probe);
+            var particleColor = getComputedStyle(probe).color || "#71f5a7";
+            probe.remove();
+
+            // Rendered-text raster, sampled ONCE at mount. The DOM line and
+            // the offscreen raster share the same computed font stack and the
+            // same fitted pixel size, so particle targets sit on the glyphs
+            // the crisp line will draw.
+            var fontFamily = getComputedStyle(line).fontFamily || "system-ui, sans-serif";
+            var off = hostDoc.createElement("canvas");
+            off.width = canvas.width;
+            off.height = canvas.height;
+            var offCtx = off.getContext("2d", { willReadFrequently: true });
+            var fontPx = Math.round(canvas.height * 0.3);
+            offCtx.font = "600 " + fontPx + "px " + fontFamily;
+            var measured = offCtx.measureText(text).width || 1;
+            var maxWidth = canvas.width * 0.86;
+            if (measured > maxWidth) {
+              fontPx = Math.max(8, Math.floor((fontPx * maxWidth) / measured));
+              offCtx.font = "600 " + fontPx + "px " + fontFamily;
+            }
+            offCtx.textAlign = "center";
+            offCtx.textBaseline = "middle";
+            offCtx.fillStyle = "#ffffff";
+            offCtx.fillText(text, off.width / 2, off.height / 2);
+            // Lock the crisp DOM line to the exact raster the targets came
+            // from: same family string, same device-pixel size.
+            line.style.fontFamily = fontFamily;
+            line.style.fontSize = fontPx / dpr + "px";
+
+            // The LCG and every per-particle decision live here. This IIFE
+            // runs once before timeline construction, then only the table is
+            // read. Particle state at any time is a pure function of
+            // (table row, timeline time). Zero per-particle tweens.
+            var particles = (function () {
+              var state = 0x9d1550f7;
+              function next() {
+                state = (Math.imul(1664525, state) + 1013904223) >>> 0;
+                return state / 4294967296;
+              }
+              // Grid-sample lit cells from the readback (alpha over half).
+              var data = offCtx.getImageData(0, 0, off.width, off.height).data;
+              var step = Math.max(2, Math.round(minDim / 260));
+              var cells = [];
+              var minX = Infinity;
+              var maxX = -Infinity;
+              for (var y = 0; y < off.height; y += step) {
+                for (var x = 0; x < off.width; x += step) {
+                  if (data[(y * off.width + x) * 4 + 3] > 127) {
+                    cells.push({ x: x, y: y });
+                    if (x < minX) minX = x;
+                    if (x > maxX) maxX = x;
+                  }
+                }
+              }
+              if (cells.length === 0) {
+                // Degenerate raster (empty text box): no particles, the DOM
+                // line still plays its wipe.
+                minX = 0;
+                maxX = 1;
+              }
+              var span = Math.max(1, maxX - minX);
+              // Thin deterministically to the density cap. The keep decision
+              // consumes exactly one LCG draw per cell in grid order, so the
+              // surviving set is a pure function of (raster, seed).
+              var cap = densityCaps[density];
+              var keep = cells.length > cap ? cap / cells.length : 1;
+              var rows = [];
+              for (var i = 0; i < cells.length; i += 1) {
+                var take = next() < keep;
+                if (!take) continue;
+                var tx = cells[i].x;
+                var ty = cells[i].y;
+                var key = (tx - minX) / span;
+                // The front sweeps left to right for both directions; the
+                // per-particle schedule completes strictly inside [0, 0.97].
+                var at = 0.2 + 0.62 * key + 0.05 * next();
+                var travel = 0.18 + 0.1 * next();
+                var fade = 0.05 + 0.04 * next();
+                var angle = next() * Math.PI * 2;
+                rows.push({
+                  tx: tx,
+                  ty: ty,
+                  at: Math.min(0.9, at),
+                  travel: travel,
+                  fade: fade,
+                  offset: (0.1 + 0.22 * next()) * minDim,
+                  ox: Math.cos(angle),
+                  oy: Math.sin(angle),
+                  radius: (0.26 + 0.5 * next()) * (minDim / 200) * step * 0.5,
+                  dim: 0.5 + 0.5 * next(),
+                });
+              }
+              return rows;
+            })();
+
+            function clamp01(v) {
+              return v < 0 ? 0 : v > 1 ? 1 : v;
+            }
+
+            // Pure repaint: clear, then draw every particle from (row, p).
+            // direction in: fly cloud -> glyph, fade once settled (donor
+            // law). direction out: born on the glyph as the front passes,
+            // fly outward, fade in flight. Both end all-zero by p = 1.
+            function paint(timeSeconds) {
+              ctx.clearRect(0, 0, canvas.width, canvas.height);
+              var p = IN > 0 ? clamp01(timeSeconds / IN) : 1;
+              var endClamp = clamp01((1 - p) / 0.04);
+              if (endClamp === 0) return;
+              ctx.fillStyle = particleColor;
+              for (var i = 0; i < particles.length; i += 1) {
+                var row = particles[i];
+                var alpha;
+                var dist;
+                if (direction === "in") {
+                  var birth = Math.max(0, row.at - row.travel);
+                  var u = clamp01((p - birth) / (row.at - birth));
+                  if (u <= 0) continue;
+                  var settled = clamp01((p - row.at) / row.fade);
+                  alpha = clamp01(u / 0.16) * (1 - settled) * row.dim * endClamp;
+                  var e = 1 - Math.pow(1 - u, 3);
+                  dist = row.offset * (1 - e);
+                } else {
+                  var v = clamp01((p - row.at) / row.travel);
+                  if (v <= 0) continue;
+                  alpha = clamp01(v / 0.14) * (1 - v) * row.dim * endClamp;
+                  dist = row.offset * (v * v);
+                }
+                if (alpha <= 0.002) continue;
+                var x = row.tx + row.ox * dist;
+                var y = row.ty + row.oy * dist;
+                ctx.globalAlpha = alpha * 0.92;
+                ctx.beginPath();
+                ctx.arc(x, y, row.radius, 0, Math.PI * 2);
+                ctx.fill();
+              }
+              ctx.globalAlpha = 1;
+            }
+
+            // The crisp line wipes along the same front the particles sweep.
+            var clipShown = "inset(0% 0% 0% 0%)";
+            var clipInStart = "inset(0% 100% 0% 0%)";
+            var clipOutEnd = "inset(0% 0% 0% 100%)";
+
+            gsap.set(stage, { opacity: 1, y: "0cqh" });
+
+            var tl = gsap.timeline({
+              paused: true,
+              onUpdate: function () {
+                paint(tl.time());
+              },
+            });
+
+            // Anchor tween: an inert plain-object tween spanning the full
+            // authored duration so tl.time() covers [0, D] and the painter
+            // fires on every eventful seek, including seeks into the hold.
+            tl.to({ p: 0 }, { p: 1, duration: duration, ease: "none" }, 0);
+
+            if (direction === "in") {
+              // The line reveals behind the arriving particles.
+              tl.fromTo(
+                textLayer,
+                { opacity: 0 },
+                { opacity: 1, duration: IN * 0.3, ease: "power2.out" },
+                IN * 0.16,
+              );
+              tl.fromTo(
+                textLayer,
+                { clipPath: clipInStart },
+                { clipPath: clipShown, duration: IN * 0.76, ease: "power1.inOut" },
+                IN * 0.18,
+              );
+            } else {
+              // The line erases as the front passes; particles carry it off.
+              gsap.set(textLayer, { opacity: 1 });
+              tl.fromTo(
+                textLayer,
+                { clipPath: clipShown },
+                { clipPath: clipOutEnd, duration: IN * 0.76, ease: "power1.inOut" },
+                IN * 0.18,
+              );
+            }
+
+            // HOLD: truly still. The canvas is one clear rect (every alpha
+            // is exactly zero by the end of IN) and the line is either fully
+            // shown or fully clipped; nothing drifts.
+
+            // OUT: optional departure; exit none holds until the frame cuts.
+            if (exit === "up") {
+              tl.to(stage, { y: "-4cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "fade") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            }
+
+            tl.seek(0);
+            paint(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["particle-text-dissolve"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add particle-text-dissolve" />
+
+That writes one file: `compositions/components/particle-text-dissolve.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/particle-text-dissolve.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `text-effects` `particles` `canvas` `deterministic` `experiment`.
+
+## 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/components/per-word-crossfade.mdx b/docs/catalog/components/per-word-crossfade.mdx
new file mode 100644
index 0000000000..fc4be7476b
--- /dev/null
+++ b/docs/catalog/components/per-word-crossfade.mdx
@@ -0,0 +1,154 @@
+---
+title: "Per-Word Crossfade"
+description: "Words gently fade into place with a short vertical drift for calm keynote rhythm."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/per-word-crossfade.html"
+  compositionId="per-word-crossfade"
+  compositionSrc="compositions/components/per-word-crossfade.html"
+  variables={[{"id":"text","type":"string","role":"content","label":"Text","description":"The line to animate. It is split on whitespace and every word gets its own span, so the stagger picks up the new words.","default":"Create once reuse everywhere"},{"id":"drift","type":"enum","role":"motion","label":"Drift","description":"Scales the vertical offset, so the words cover a shorter or longer run in the same time.","default":"standard","options":[{"value":"close","label":"Close"},{"value":"standard","label":"Standard"},{"value":"far","label":"Far"}]},{"id":"blur","type":"enum","role":"style","label":"Blur","description":"Scales the blur radius the timeline drives, from a light haze to a full smear.","default":"standard","options":[{"value":"soft","label":"Soft"},{"value":"standard","label":"Standard"},{"value":"heavy","label":"Heavy"}]},{"id":"tone","type":"enum","role":"style","label":"Tone","description":"Word colour: ink for light frames, paper for dark ones, accent rides --brand.","default":"ink","options":[{"value":"ink","label":"Ink"},{"value":"paper","label":"Paper"},{"value":"accent","label":"Accent"}]}]}
+>
+
+```html per-word-crossfade.html
+<!--
+  Per-Word Crossfade - remocn typography primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Drive the timeline
+  integration from a paused GSAP timeline so renders remain deterministic.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and either rewrites the words or writes a
+  custom property the CSS below consumes. The timeline recipe at the end is
+  untouched by them: it keeps driving one offset and one blur, and these
+  decide what that offset and that blur mean on screen.
+
+    - text (string, default "Create once reuse everywhere"): the line to
+      animate. It is split on whitespace and every word gets its own span, so
+      the stagger picks up the new words with no other change.
+    - drift (close | standard | far, default standard): scales the vertical
+      offset. close covers half the run, far nearly double, in the same time.
+    - blur (soft | standard | heavy, default standard): scales the blur
+      radius, from a light haze to a full smear.
+    - tone (ink | paper | accent, default ink): word colour. ink is near-black
+      for light frames, paper near-white for dark ones, accent rides --brand.
+
+  On every default the result is identical to the original: four near-black
+  words drifting 22px up through a 5px blur.
+-->
+
+<div
+  class="hf-remocn-per-word-crossfade"
+  data-composition-variables='[
+    { "id": "text", "type": "string", "role": "content", "label": "Text", "description": "The line to animate. It is split on whitespace and every word gets its own span, so the stagger picks up the new words.", "default": "Create once reuse everywhere" },
+    { "id": "drift", "type": "enum", "role": "motion", "label": "Drift", "description": "Scales the vertical offset, so the words cover a shorter or longer run in the same time.", "default": "standard", "options": [{ "value": "close", "label": "Close" }, { "value": "standard", "label": "Standard" }, { "value": "far", "label": "Far" }] },
+    { "id": "blur", "type": "enum", "role": "style", "label": "Blur", "description": "Scales the blur radius the timeline drives, from a light haze to a full smear.", "default": "standard", "options": [{ "value": "soft", "label": "Soft" }, { "value": "standard", "label": "Standard" }, { "value": "heavy", "label": "Heavy" }] },
+    { "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Word colour: ink for light frames, paper for dark ones, accent rides --brand.", "default": "ink", "options": [{ "value": "ink", "label": "Ink" }, { "value": "paper", "label": "Paper" }, { "value": "accent", "label": "Accent" }] }
+  ]'
+>
+  <span>Create</span><span>once</span><span>reuse</span><span>everywhere</span>
+</div>
+
+<style>
+  .hf-remocn-per-word-crossfade {
+    color: var(--hf-word-color, #18181b);
+    font-family: Inter, system-ui, sans-serif;
+    font-weight: 900;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-per-word-crossfade {
+    display: inline-flex;
+    gap: 12px;
+    font-size: 56px;
+    line-height: 1;
+  }
+  .hf-remocn-per-word-crossfade span {
+    display: inline-block;
+    transform: translate(
+        var(--hf-word-x, 0px),
+        calc(var(--hf-word-y, 0px) * var(--hf-word-drift, 1))
+      )
+      scale(var(--hf-word-scale, 1));
+    filter: blur(calc(var(--hf-word-blur, 0px) * var(--hf-word-blur-scale, 1)));
+    will-change: transform, filter, opacity;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    var drifts = { close: 0.5, standard: 1, far: 1.85 };
+    var blurScales = { soft: 0.45, standard: 1, heavy: 2.2 };
+    var tones = {
+      ink: "#18181b",
+      paper: "#fafafa",
+      accent: "var(--brand, #34d399)",
+    };
+
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var drift = drifts[pick(drifts, vars.drift, "standard")];
+    var blurScale = blurScales[pick(blurScales, vars.blur, "standard")];
+    var tone = tones[pick(tones, vars.tone, "ink")];
+
+    var text = typeof vars.text === "string" ? vars.text.trim() : "";
+    var words = (text || "Create once reuse everywhere").split(/\s+/);
+
+    var roots = document.querySelectorAll(".hf-remocn-per-word-crossfade");
+    for (var i = 0; i < roots.length; i += 1) {
+      var root = roots[i];
+      root.style.setProperty("--hf-word-drift", String(drift));
+      root.style.setProperty("--hf-word-blur-scale", String(blurScale));
+      root.style.setProperty("--hf-word-color", tone);
+
+      while (root.firstChild) {
+        root.removeChild(root.firstChild);
+      }
+      for (var w = 0; w < words.length; w += 1) {
+        var span = document.createElement("span");
+        span.textContent = words[w];
+        root.appendChild(span);
+      }
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-per-word-crossfade span', { opacity: 0, '--hf-word-y': '22px', '--hf-word-scale': 0.92, '--hf-word-blur': '5px' }, { opacity: 1, '--hf-word-y': '0px', '--hf-word-scale': 1, '--hf-word-blur': '0px', duration: 0.3, stagger: 0.055, ease: 'power3.out' }, startTime);
+-->
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add per-word-crossfade" />
+
+That writes one file: `compositions/components/per-word-crossfade.html`.
+
+## Usage
+
+Open `compositions/components/per-word-crossfade.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `remocn-port` `typography`.
+
+## 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/components/per-word-rise.mdx b/docs/catalog/components/per-word-rise.mdx
new file mode 100644
index 0000000000..54a3f311ef
--- /dev/null
+++ b/docs/catalog/components/per-word-rise.mdx
@@ -0,0 +1,358 @@
+---
+title: "Per Word Rise"
+description: "Words or characters rise into place in a controlled blur-to-sharp cascade, settle softly on landing, and hold still until the cut (optional fade or up exit)."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/per-word-rise.html"
+  compositionId="per-word-rise"
+  compositionSrc="compositions/components/per-word-rise.html"
+  variables={[{"id":"text","type":"string","role":"content","label":"Text","description":"Text whose words or characters rise into place.","default":"WORDS IN MOTION"},{"id":"split","type":"enum","role":"content","label":"Split","description":"Animate the text as words or individual characters.","default":"word","options":[{"value":"word","label":"Word"},{"value":"char","label":"Character"}]},{"id":"cues","type":"string","role":"timing","label":"Cues","description":"Comma-separated seconds (from mount start) for each unit landing. Empty keeps the authored cascade rhythm.","default":""},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Contract accent token used for the text color.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Optional departure. Default none: the line holds until the frame cuts.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
+>
+
+```html per-word-rise.html
+<!doctype html>
+<!--
+  per-word-rise: HyperFrames video primitive (text effects / reveal)
+
+  Words, or characters through the split variable, rise into place with a
+  controlled cascade and a small blur-to-sharp settle. Each unit lands with
+  a short overshoot-free settle tail (the final few pixels glide in over the
+  closing frames instead of stopping dead), then the finished line holds
+  truly still until the frame cuts (exit none) or departs with the optional
+  exit variable.
+
+  Variables:
+    - text (string, default "WORDS IN MOTION"): displayed text.
+    - split (word | char, default "word"): animated unit size.
+    - cues (string, default ""): comma-separated seconds (from mount start)
+      for each unit's landing. Empty keeps the authored cascade rhythm.
+    - accent (green | blue | violet, default "green"): text color.
+    - exit (none | fade | up, default "none"): optional departure.
+
+  Envelope, fixed IN and OUT with elastic HOLD only:
+    IN_BASE  = 1.45s, the full staggered rise and sharp settle (cues can
+               stretch the rise phase past IN_BASE when they land later)
+    HOLD     = max(0, D - IN - OUT), truly still: no drift
+    OUT_BASE = 0.50s staggered departure when exit is fade or up, 0s when
+               exit is none (the default: the line holds until the cut)
+    If D is shorter than IN_BASE + OUT_BASE, IN and OUT compress together.
+    The timeline is never time-scaled.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, has no data-width or data-height,
+  and registers one paused timeline under the literal per-word-rise key.
+-->
+<html
+  lang="en"
+  data-composition-id="per-word-rise"
+  data-composition-duration="3.5"
+  data-composition-variables='[
+    { "id": "text", "type": "string", "role": "content", "label": "Text", "description": "Text whose words or characters rise into place.", "default": "WORDS IN MOTION" },
+    { "id": "split", "type": "enum", "role": "content", "label": "Split", "description": "Animate the text as words or individual characters.", "default": "word", "options": [{ "value": "word", "label": "Word" }, { "value": "char", "label": "Character" }] },
+    { "id": "cues", "type": "string", "role": "timing", "label": "Cues", "description": "Comma-separated seconds (from mount start) for each unit landing. Empty keeps the authored cascade rhythm.", "default": "" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Contract accent token used for the text color.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the line holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Per Word Rise</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="per-word-rise" data-duration="3.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .pwr-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+            background: var(--bg, #0b0c0e);
+          }
+
+          .pwr-stage {
+            display: flex;
+            width: 88cqw;
+            max-width: 88cqw;
+            align-items: baseline;
+            justify-content: center;
+            flex-wrap: wrap;
+            column-gap: var(--space-1, 1.8cqw);
+            row-gap: var(--space-2, 2.8cqh);
+            color: var(--pwr-accent);
+            font-size: var(--pwr-font-size);
+            font-weight: 780;
+            line-height: 1.08;
+            letter-spacing: -0.035em;
+            text-align: center;
+          }
+
+          .pwr-stage.pwr-char {
+            column-gap: 0.045em;
+            letter-spacing: 0;
+          }
+
+          .pwr-unit {
+            display: inline-block;
+            flex: 0 0 auto;
+            filter: blur(var(--pwr-blur, 0cqh));
+            will-change: transform, filter, opacity;
+          }
+
+          .pwr-space {
+            width: 0.36em;
+          }
+        </style>
+
+        <div
+          id="per-word-rise-clip"
+          class="pwr-clip clip"
+          data-start="0"
+          data-duration="3.5"
+          data-track-index="0"
+        >
+          <div class="pwr-stage" role="img"></div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".pwr-stage");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var text = vars.text == null ? "WORDS IN MOTION" : String(vars.text);
+            var split = vars.split === "char" ? "char" : "word";
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+            var cuesValue = vars.cues == null ? "" : String(vars.cues);
+            var cues = cuesValue.split(",").reduce(function (result, token) {
+              var trimmed = token.trim();
+              if (trimmed === "") return result;
+              var seconds = Number(trimmed);
+              if (!Number.isFinite(seconds) || seconds < 0) return result;
+              result.push(seconds);
+              return result;
+            }, []);
+
+            root.style.setProperty("--pwr-accent", accentColors[accent]);
+            stage.classList.toggle("pwr-char", split === "char");
+            stage.setAttribute("aria-label", text);
+
+            var characterCount = Math.max(1, Array.from(text).length);
+            var fittedCqw = Math.min(9.5, 126 / characterCount);
+            root.style.setProperty(
+              "--pwr-font-size",
+              "min(" + fittedCqw.toFixed(3) + "cqw, 15cqh)",
+            );
+
+            var segments = split === "char" ? Array.from(text) : text.trim().split(/\s+/);
+            if (segments.length === 0) segments = [""];
+
+            var units = segments.map(function (segment, index) {
+              var unit = document.createElement("span");
+              unit.id = "per-word-rise-unit-" + index;
+              unit.className = "pwr-unit";
+              if (split === "char" && /\s/.test(segment)) {
+                unit.classList.add("pwr-space");
+                unit.textContent = "\u00a0";
+              } else {
+                unit.textContent = segment;
+              }
+              unit.setAttribute("aria-hidden", "true");
+              stage.appendChild(unit);
+              return unit;
+            });
+
+            var IN_BASE = 1.45;
+            var OUT_BASE = exit === "none" ? 0 : 0.5;
+            var RISE_BASE = 0.74;
+            var STAGGER_BASE = 0.62;
+            var EXIT_STAGGER_BASE = 0.14;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "3.5"));
+            var totalBase = Math.max(0.001, IN_BASE + OUT_BASE);
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var RISE = RISE_BASE * scale;
+            var STAGGER = units.length > 1 ? STAGGER_BASE * scale : 0;
+            var EXIT_STAGGER = units.length > 1 ? EXIT_STAGGER_BASE * scale : 0;
+            var EXIT_MOVE = Math.max(0.001, OUT - EXIT_STAGGER);
+
+            // Landing ease: overshoot-free decel with a settle tail. A plain
+            // power3.out slams from fast to imperceptible in ~2 frames and the
+            // words stop dead; this piecewise cubic keeps ~7% of the travel for
+            // the last 22% of the duration and is C1-continuous at the seam,
+            // so the word glides its final few pixels over the closing frames
+            // (a settle) with monotonic velocity: no stall, no hop, no
+            // overshoot. Pure function of progress, so it stays seek-safe.
+            var LAND_SPLIT = 0.78; // progress where the settle tail begins
+            var LAND_RESIDUAL = 0.07; // fraction of travel left for the tail
+            var LAND_SEAM_SLOPE = ((1 - LAND_RESIDUAL) / LAND_SPLIT) * 0.5; // shared velocity at the seam
+            function landEase(p) {
+              if (p <= 0) return 0;
+              if (p >= 1) return 1;
+              if (p < LAND_SPLIT) {
+                var x = p / LAND_SPLIT;
+                var inv = 1 - x;
+                // Half cubic-out, half linear: keeps end velocity for the seam.
+                return (1 - LAND_RESIDUAL) * (0.5 * (1 - inv * inv * inv) + 0.5 * x);
+              }
+              var u = (p - LAND_SPLIT) / (1 - LAND_SPLIT);
+              var b = LAND_SEAM_SLOPE * (1 - LAND_SPLIT);
+              var c = 3 * LAND_RESIDUAL - 2 * b;
+              var d = b - 2 * LAND_RESIDUAL;
+              return 1 - LAND_RESIDUAL + b * u + c * u * u + d * u * u * u;
+            }
+
+            // Cues own the word landings when provided; the authored cascade
+            // otherwise. Landings beyond the cue list extrapolate at the cue
+            // list's own gap, and every landing clamps ahead of any exit.
+            var riseEnd = IN;
+            var landings;
+            if (cues.length > 0) {
+              var lastCue = cues[cues.length - 1];
+              var cueGap =
+                cues.length >= 2
+                  ? Math.max(0.05, (lastCue - cues[0]) / (cues.length - 1))
+                  : RISE * 0.4;
+              var latestLanding = Math.max(RISE * 0.5, duration - OUT);
+              landings = units.map(function (unit, index) {
+                var landing =
+                  index < cues.length
+                    ? cues[index]
+                    : lastCue + (index - (cues.length - 1)) * cueGap;
+                return Math.min(latestLanding, Math.max(0.05, landing));
+              });
+              riseEnd = Math.min(duration - OUT, Math.max(IN, Math.max.apply(null, landings)));
+            } else {
+              // Authored cascade: same left-to-right wave the stagger drew,
+              // expressed as explicit landings so every unit gets the settle.
+              var step = units.length > 1 ? STAGGER / (units.length - 1) : 0;
+              landings = units.map(function (unit, index) {
+                return index * step + RISE;
+              });
+            }
+            var HOLD_START = riseEnd;
+            var HOLD = Math.max(0, duration - (HOLD_START + OUT));
+            var OUT_START = HOLD_START + HOLD;
+
+            gsap.set(units, { opacity: 0, y: "8cqh", "--pwr-blur": "1.4cqh" });
+
+            var tl = gsap.timeline({ paused: true });
+
+            units.forEach(function (unit, index) {
+              var landing = landings[index];
+              var startAt = Math.max(0, landing - RISE);
+              tl.to(
+                unit,
+                {
+                  opacity: 1,
+                  y: "0cqh",
+                  "--pwr-blur": "0cqh",
+                  duration: Math.max(0.08, landing - startAt),
+                  ease: landEase,
+                },
+                startAt,
+              );
+            });
+
+            // TRUE hold: the finished line is dead still until the exit or
+            // the cut. The old 0.55cqh drift was sub-perceptual at 1080p.
+
+            // OUT: optional departure; exit none holds until the frame cuts.
+            if (exit === "up") {
+              tl.to(
+                units,
+                {
+                  opacity: 0,
+                  y: "-4.5cqh",
+                  "--pwr-blur": "0.7cqh",
+                  duration: EXIT_MOVE,
+                  stagger: { amount: EXIT_STAGGER, from: "start" },
+                  ease: "power2.in",
+                },
+                OUT_START,
+              );
+            } else if (exit === "fade") {
+              tl.to(
+                units,
+                {
+                  opacity: 0,
+                  duration: EXIT_MOVE,
+                  stagger: { amount: EXIT_STAGGER, from: "start" },
+                  ease: "power2.in",
+                },
+                OUT_START,
+              );
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["per-word-rise"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add per-word-rise" />
+
+That writes one file: `compositions/components/per-word-rise.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/per-word-rise.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `text-effects` `typography` `stagger` `reveal`.
+
+## 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/components/perspective-marquee.mdx b/docs/catalog/components/perspective-marquee.mdx
new file mode 100644
index 0000000000..3279983126
--- /dev/null
+++ b/docs/catalog/components/perspective-marquee.mdx
@@ -0,0 +1,175 @@
+---
+title: "Perspective Marquee"
+description: "A 3D tilted marquee with depth feel as items roll toward the horizon."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/perspective-marquee.html"
+  compositionId="perspective-marquee"
+  compositionSrc="compositions/components/perspective-marquee.html"
+  variables={[{"id":"tilt","type":"enum","role":"style","label":"Tilt","description":"How far the marquee plane leans back toward the horizon.","default":"standard","options":[{"value":"flat","label":"Flat"},{"value":"standard","label":"Standard"},{"value":"steep","label":"Steep"}]},{"id":"travel","type":"enum","role":"motion","label":"Travel","description":"Scales the offset the timeline drives, so the strip covers a shorter or longer run in the same time.","default":"standard","options":[{"value":"short","label":"Short"},{"value":"standard","label":"Standard"},{"value":"long","label":"Long"}]},{"id":"tone","type":"enum","role":"style","label":"Tone","description":"Pill colour: ink for light frames, paper for dark ones, accent rides the brand token.","default":"ink","options":[{"value":"ink","label":"Ink"},{"value":"paper","label":"Paper"},{"value":"accent","label":"Accent"}]},{"id":"words","type":"string","role":"content","label":"Words","description":"Comma separated pill labels. The list is laid down twice so the strip still reads as a continuous loop.","default":"COMPONENTS, PRIMITIVES, TRANSITIONS, AGENTS"}]}
+>
+
+```html perspective-marquee.html
+<!--
+  Perspective Marquee - remocn typography primitive for HyperFrames.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result as a custom property
+  the CSS above consumes. The timeline recipe below is untouched by them: it
+  keeps driving one horizontal offset, and these decide how far that offset
+  carries and what the strip looks like while it rolls.
+
+    - tilt (flat | standard | steep, default standard): how far the marquee
+      plane leans back toward the horizon. flat is almost head-on, steep sends
+      the strip deep into the frame.
+    - travel (short | standard | long, default standard): scales the offset the
+      timeline drives, so the strip covers a shorter or longer run in the same
+      time. short reads as a slow drift, long as a fast roll.
+    - tone (ink | paper | accent, default ink): pill colour. ink is near-black
+      with white type for light frames, paper near-white with dark type for
+      dark ones, accent rides the brand token.
+    - words (string, default COMPONENTS, PRIMITIVES, TRANSITIONS, AGENTS): the
+      comma separated list of pill labels. The list is laid down twice so the
+      strip still reads as a continuous loop.
+
+  On every default the result is identical to the original: four near-black
+  pills, laid down twice, rolling 360px left across an 18 degree tilt.
+-->
+
+<div
+  class="hf-remocn-perspective-marquee"
+  data-composition-variables='[
+    { "id": "tilt", "type": "enum", "role": "style", "label": "Tilt", "description": "How far the marquee plane leans back toward the horizon.", "default": "standard", "options": [{ "value": "flat", "label": "Flat" }, { "value": "standard", "label": "Standard" }, { "value": "steep", "label": "Steep" }] },
+    { "id": "travel", "type": "enum", "role": "motion", "label": "Travel", "description": "Scales the offset the timeline drives, so the strip covers a shorter or longer run in the same time.", "default": "standard", "options": [{ "value": "short", "label": "Short" }, { "value": "standard", "label": "Standard" }, { "value": "long", "label": "Long" }] },
+    { "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Pill colour: ink for light frames, paper for dark ones, accent rides the brand token.", "default": "ink", "options": [{ "value": "ink", "label": "Ink" }, { "value": "paper", "label": "Paper" }, { "value": "accent", "label": "Accent" }] },
+    { "id": "words", "type": "string", "role": "content", "label": "Words", "description": "Comma separated pill labels. The list is laid down twice so the strip still reads as a continuous loop.", "default": "COMPONENTS, PRIMITIVES, TRANSITIONS, AGENTS" }
+  ]'
+>
+  <div>
+    <span>COMPONENTS</span><span>PRIMITIVES</span><span>TRANSITIONS</span><span>AGENTS</span
+    ><span>COMPONENTS</span><span>PRIMITIVES</span><span>TRANSITIONS</span><span>AGENTS</span>
+  </div>
+</div>
+
+<style>
+  .hf-remocn-perspective-marquee {
+    color: #18181b;
+    font-family: Inter, system-ui, sans-serif;
+    font-weight: 900;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-perspective-marquee {
+    width: 720px;
+    perspective: 900px;
+    overflow: hidden;
+    transform: rotateX(var(--hf-marquee-tilt, 18deg));
+  }
+  .hf-remocn-perspective-marquee div {
+    display: inline-flex;
+    gap: 22px;
+    white-space: nowrap;
+    transform: translateX(calc(var(--hf-marquee-x, 0px) * var(--hf-marquee-reach, 1)));
+  }
+  .hf-remocn-perspective-marquee span {
+    padding: 12px 18px;
+    border-radius: 999px;
+    background: var(--hf-marquee-pill-bg, #18181b);
+    color: var(--hf-marquee-pill-fg, #fff);
+    font-size: 28px;
+    box-shadow: 0 18px 44px rgba(24, 24, 27, 0.18);
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    var tilts = { flat: "6deg", standard: "18deg", steep: "34deg" };
+    var reaches = { short: 0.55, standard: 1, long: 1.8 };
+    var tones = {
+      ink: { bg: "#18181b", fg: "#fff" },
+      paper: { bg: "#fafafa", fg: "#18181b" },
+      accent: { bg: "var(--brand, #34d399)", fg: "#fff" },
+    };
+    var defaultWords = "COMPONENTS, PRIMITIVES, TRANSITIONS, AGENTS";
+
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    function parseWords(value) {
+      var source = typeof value === "string" ? value : "";
+      var parts = source.split(",");
+      var words = [];
+      for (var i = 0; i < parts.length; i += 1) {
+        var word = parts[i].trim();
+        if (word) words.push(word);
+      }
+      return words.length ? words : parseWords(defaultWords);
+    }
+
+    var tilt = tilts[pick(tilts, vars.tilt, "standard")];
+    var reach = reaches[pick(reaches, vars.travel, "standard")];
+    var tone = tones[pick(tones, vars.tone, "ink")];
+    var words = parseWords(vars.words);
+
+    var roots = document.querySelectorAll(".hf-remocn-perspective-marquee");
+    for (var i = 0; i < roots.length; i += 1) {
+      roots[i].style.setProperty("--hf-marquee-tilt", tilt);
+      roots[i].style.setProperty("--hf-marquee-reach", String(reach));
+      roots[i].style.setProperty("--hf-marquee-pill-bg", tone.bg);
+      roots[i].style.setProperty("--hf-marquee-pill-fg", tone.fg);
+
+      var strip = roots[i].querySelector("div");
+      if (!strip) continue;
+      var markup = "";
+      for (var pass = 0; pass < 2; pass += 1) {
+        for (var w = 0; w < words.length; w += 1) {
+          markup += "<span>" + words[w].replace(/&/g, "&amp;").replace(/</g, "&lt;") + "</span>";
+        }
+      }
+      strip.innerHTML = markup;
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-perspective-marquee div', { '--hf-marquee-x': '0px' }, { '--hf-marquee-x': '-360px', duration: 4.5, ease: 'none' }, startTime);
+-->
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add perspective-marquee" />
+
+That writes one file: `compositions/components/perspective-marquee.html`.
+
+## Usage
+
+Open `compositions/components/perspective-marquee.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `remocn-port` `typography`.
+
+## 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/components/physical-exit.mdx b/docs/catalog/components/physical-exit.mdx
new file mode 100644
index 0000000000..605f0a81d0
--- /dev/null
+++ b/docs/catalog/components/physical-exit.mdx
@@ -0,0 +1,289 @@
+---
+title: "Physical Exit"
+description: "A card exits with physical momentum in toss, drop, or slide mode, carrying acceleration and rotation through the final offscreen pose without fading."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/physical-exit.html"
+  compositionId="physical-exit"
+  compositionSrc="compositions/components/physical-exit.html"
+  variables={[{"id":"mode","type":"enum","role":"motion","label":"Exit mode","description":"Physical behavior used to carry the card offscreen.","default":"toss","options":[{"value":"toss","label":"Toss"},{"value":"drop","label":"Drop"},{"value":"slide","label":"Slide"}]},{"id":"text","type":"string","role":"content","label":"Card text","description":"Word displayed on the exiting card.","default":"Later"},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Color applied to the card edge.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]}]}
+>
+
+```html physical-exit.html
+<!doctype html>
+<!--
+  physical-exit: HyperFrames video primitive (motion / exit / physical)
+
+  Concept: one card leaves the frame with visible momentum. The mode variable
+  owns the exit behavior: toss follows an arc, drop accelerates under gravity,
+  and slide stretches at peak lateral speed. Every mode carries rotation into
+  its final offscreen pose. The card never fades during its exit.
+
+  Variables:
+    - mode (toss | drop | slide, default toss): the physical exit behavior.
+    - text (string, default "Later"): the word displayed on the card.
+    - accent (green | blue | violet, default green): the card edge color.
+
+  Envelope (fixed IN and OUT, elastic HOLD only, never timeScale):
+    IN_BASE  = 0.45s  the card settles into its resting pose
+    HOLD     = elastic = max(0, D - (IN_BASE + OUT_BASE)); subtle drift
+    OUT_BASE = 0.85s  the selected physical exit carries the card offscreen
+    If D is shorter than IN_BASE + OUT_BASE, IN and OUT compress together and
+    HOLD becomes zero.
+
+  Mount contract: this file is a template-wrapped sub-composition. The runtime
+  clones only the template contents. #root fills the host box, establishes the
+  container query basis, has no data-width or data-height, and registers one
+  paused timeline under the hardcoded physical-exit id.
+-->
+<html
+  lang="en"
+  data-composition-id="physical-exit"
+  data-composition-duration="3"
+  data-composition-variables='[
+    { "id": "mode", "type": "enum", "role": "motion", "label": "Exit mode", "description": "Physical behavior used to carry the card offscreen.", "default": "toss", "options": [{ "value": "toss", "label": "Toss" }, { "value": "drop", "label": "Drop" }, { "value": "slide", "label": "Slide" }] },
+    { "id": "text", "type": "string", "role": "content", "label": "Card text", "description": "Word displayed on the exiting card.", "default": "Later" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Color applied to the card edge.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Physical Exit</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="physical-exit" data-duration="3" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .pe-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+          }
+
+          .pe-card {
+            position: relative;
+            display: grid;
+            place-items: center;
+            width: 58cqw;
+            min-height: 32cqh;
+            padding: 5cqh 6cqw;
+            overflow: hidden;
+            border: 0.22cqmin solid color-mix(in srgb, var(--pe-accent) 62%, #ffffff);
+            border-radius: 4cqmin;
+            background: #f8fafc;
+            box-shadow:
+              0 2.4cqh 7cqh color-mix(in srgb, #020617 48%, transparent),
+              inset 1.2cqw 0 0 var(--pe-accent);
+            color: #0b0c0e;
+            transform-origin: 50% 50%;
+            will-change: transform;
+          }
+
+          .pe-label {
+            display: block;
+            max-width: 48cqw;
+            overflow: hidden;
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: 11cqmin;
+            font-weight: 760;
+            line-height: 1;
+            letter-spacing: -0.045em;
+            text-align: center;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+        </style>
+
+        <div
+          id="physical-exit-clip"
+          class="pe-clip clip"
+          data-start="0"
+          data-duration="3"
+          data-track-index="0"
+        >
+          <div class="pe-card">
+            <span class="pe-label"></span>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var card = root.querySelector(".pe-card");
+            var label = root.querySelector(".pe-label");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var mode = vars.mode === "drop" || vars.mode === "slide" ? vars.mode : "toss";
+            var text = vars.text == null ? "Later" : String(vars.text);
+            var accent = vars.accent === "blue" || vars.accent === "violet" ? vars.accent : "green";
+            var accentColors = {
+              green: "var(--brand, #34d399)",
+              blue: "var(--accent, #60a5fa)",
+              violet: "var(--accent-2, #a78bfa)",
+            };
+
+            label.textContent = text;
+            card.style.setProperty("--pe-accent", accentColors[accent]);
+
+            var IN_BASE = 0.45;
+            var OUT_BASE = 0.85;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "3"));
+            var baseDuration = IN_BASE + OUT_BASE;
+            var envelopeScale = duration < baseDuration ? duration / baseDuration : 1;
+            var IN = IN_BASE * envelopeScale;
+            var OUT = OUT_BASE * envelopeScale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var HOLD_START = IN;
+            var OUT_START = IN + HOLD;
+
+            var tl = gsap.timeline({ paused: true });
+
+            tl.fromTo(
+              card,
+              { y: "4cqh", scale: 0.98, rotation: -1 },
+              { y: 0, scale: 1, rotation: 0, duration: IN, ease: "power2.out" },
+              0,
+            );
+
+            if (HOLD > 0) {
+              tl.to(
+                card,
+                {
+                  y: "-0.7cqh",
+                  rotation: 0.5,
+                  duration: HOLD / 2,
+                  ease: "sine.inOut",
+                  yoyo: true,
+                  repeat: 1,
+                },
+                HOLD_START,
+              );
+            }
+
+            if (mode === "drop") {
+              tl.to(
+                card,
+                {
+                  y: "108cqh",
+                  rotation: 9,
+                  duration: OUT,
+                  ease: "power2.in",
+                },
+                OUT_START,
+              );
+            } else if (mode === "slide") {
+              var slidePeak = OUT * 0.72;
+              tl.to(
+                card,
+                {
+                  x: "90cqw",
+                  skewX: -12,
+                  scaleX: 1.08,
+                  rotation: -2,
+                  duration: slidePeak,
+                  ease: "power4.in",
+                },
+                OUT_START,
+              );
+              tl.to(
+                card,
+                {
+                  x: "125cqw",
+                  skewX: -3,
+                  scaleX: 1,
+                  rotation: -5,
+                  duration: OUT - slidePeak,
+                  ease: "power4.out",
+                },
+                OUT_START + slidePeak,
+              );
+            } else {
+              var tossApex = OUT * 0.42;
+              tl.to(
+                card,
+                {
+                  x: "34cqw",
+                  y: "-36cqh",
+                  rotation: 8,
+                  duration: tossApex,
+                  ease: "power3.out",
+                },
+                OUT_START,
+              );
+              tl.to(
+                card,
+                {
+                  x: "118cqw",
+                  y: "86cqh",
+                  rotation: 18,
+                  duration: OUT - tossApex,
+                  ease: "power2.in",
+                },
+                OUT_START + tossApex,
+              );
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["physical-exit"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add physical-exit" />
+
+That writes one file: `compositions/components/physical-exit.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/physical-exit.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `exit` `momentum` `toss` `drop` `slide`.
+
+## 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/components/press-ripple.mdx b/docs/catalog/components/press-ripple.mdx
new file mode 100644
index 0000000000..01070d91e8
--- /dev/null
+++ b/docs/catalog/components/press-ripple.mdx
@@ -0,0 +1,415 @@
+---
+title: "Press Ripple"
+description: "A cursor decel-arrives from off-stage, lands slightly off-center on a caller-positioned target, compresses with it in lockstep, releases with ink ripple rings, then exits off-stage while the pressed state holds."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/press-ripple.html"
+  compositionId="press-ripple"
+  compositionSrc="compositions/components/press-ripple.html"
+  variables={[{"id":"label","type":"string","role":"content","label":"Label","description":"Text inside the default pill target.","default":"Get started"},{"id":"target_x","type":"number","role":"layout","label":"Target X","description":"Zone center, percent of host width.","default":50,"min":8,"max":92,"step":1,"unit":"%"},{"id":"target_y","type":"number","role":"layout","label":"Target Y","description":"Zone center, percent of host height.","default":50,"min":8,"max":92,"step":1,"unit":"%"},{"id":"press_at","type":"number","role":"timing","label":"Press at","description":"Seconds from mount start when the press begins.","default":1.4,"min":0.9,"max":10,"step":0.1,"unit":"s"},{"id":"cursor","type":"enum","role":"style","label":"Cursor","description":"Pointer tone.","default":"light","options":[{"value":"light","label":"Light"},{"value":"dark","label":"Dark"}]},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Contract color for the ripple ink and pressed fill.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"style","label":"Exit","description":"How the frame leaves. None holds the pressed state.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Fade up"}]}]}
+>
+
+```html press-ripple.html
+<!doctype html>
+<!--
+  press-ripple: HyperFrames video primitive (product demo / payoff)
+
+  A cursor decel-arrives from off-stage (power2.out, it arrives, never passes
+  through), lands a few px off-center on a caller-positioned target zone, the
+  target and cursor compress in lockstep, release with two ink ripple rings,
+  then the cursor exits off-stage the way it came. The pressed state and the
+  ripple aftermath carry the hold; the cursor never camps on the label.
+
+  The target is a slot: the element marked data-slot="target" is the press
+  surface. Its default content is a token-styled pill carrying the label
+  variable; replace the slot's children to press anything else. The slot
+  wrapper flips data-state="idle" to data-state="pressed" at the press, so
+  custom slot content can style its own pressed look.
+
+  Variables:
+    label: text inside the default pill (ignored when the slot is replaced)
+    target_x, target_y: zone center as a percent of the host box
+    press_at: seconds from mount start when the compression begins
+    cursor: light or dark pointer
+    accent: green, blue, or violet ink (ripple rings + pressed pill fill)
+    exit: none, fade, or up (default none; holds end films)
+
+  Envelope (elastic HOLD, never time-scaled):
+    IN   = entrance settle, cursor arrival, press, release ripple, cursor exit
+    HOLD = the rest of D, completely still on the pressed state
+    OUT  = none by default; 0.45s fade or fade-up when exit is set
+    press_at clamps into the window that keeps the whole gesture inside D.
+
+  Sync point: the press lands at press_at (default 1.4s).
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, has no data-width or data-height,
+  and registers one paused timeline under the literal press-ripple key.
+-->
+<html
+  lang="en"
+  data-composition-id="press-ripple"
+  data-composition-duration="3"
+  data-composition-variables='[
+    { "id": "label", "type": "string", "role": "content", "label": "Label", "description": "Text inside the default pill target.", "default": "Get started" },
+    { "id": "target_x", "type": "number", "role": "layout", "label": "Target X", "description": "Zone center, percent of host width.", "default": 50, "min": 8, "max": 92, "step": 1, "unit": "%" },
+    { "id": "target_y", "type": "number", "role": "layout", "label": "Target Y", "description": "Zone center, percent of host height.", "default": 50, "min": 8, "max": 92, "step": 1, "unit": "%" },
+    { "id": "press_at", "type": "number", "role": "timing", "label": "Press at", "description": "Seconds from mount start when the press begins.", "default": 1.4, "min": 0.9, "max": 10, "step": 0.1, "unit": "s" },
+    { "id": "cursor", "type": "enum", "role": "style", "label": "Cursor", "description": "Pointer tone.", "default": "light", "options": [{ "value": "light", "label": "Light" }, { "value": "dark", "label": "Dark" }] },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Contract color for the ripple ink and pressed fill.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "style", "label": "Exit", "description": "How the frame leaves. None holds the pressed state.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Fade up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Press Ripple</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="press-ripple" data-duration="3" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .pr-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            background: var(--bg, #0b0c0e);
+          }
+
+          .pr-stage {
+            position: absolute;
+            inset: 0;
+          }
+
+          /* Caller-positioned target zone; --pr-x / --pr-y come from the
+             target_x / target_y variables. */
+          .pr-zone {
+            position: absolute;
+            left: calc(var(--pr-x, 50) * 1cqw);
+            top: calc(var(--pr-y, 50) * 1cqh);
+            transform: translate(-50%, -50%);
+          }
+
+          /* Ink ripple rings, centered under the slot, hidden until release.
+             The ink mixes the accent toward --fg so the rings carry real
+             weight against the host background on both light and dark
+             themes; thickness reads as drawn ink, not a hairline. */
+          .pr-ring {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            width: 20cqmin;
+            height: 20cqmin;
+            margin: -10cqmin 0 0 -10cqmin;
+            border: 0.85cqmin solid
+              color-mix(in srgb, var(--pr-accent, #71f5a7) 72%, var(--fg, #f8fafc));
+            border-radius: 50%;
+            opacity: 0;
+            will-change: transform, opacity;
+          }
+
+          /* GSAP owns this wrapper's opacity/y (entrance) and scale (press). */
+          .pr-actor {
+            position: relative;
+            will-change: transform, opacity;
+          }
+
+          .pr-pill {
+            display: inline-flex;
+            align-items: center;
+            padding: var(--space-2, 2.6cqmin) calc(var(--space-2, 2.6cqmin) * 2.1);
+            border: 0.22cqmin solid var(--border, #343a46);
+            border-radius: 999px;
+            background: var(--surface, #14171c);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            font-size: 4.6cqmin;
+            font-weight: 600;
+            line-height: 1;
+            letter-spacing: -0.015em;
+            white-space: nowrap;
+          }
+
+          .pr-target-slot[data-state="pressed"] .pr-pill {
+            border-color: color-mix(in srgb, var(--pr-accent, #71f5a7) 72%, var(--fg, #f8fafc));
+            background: var(--pr-accent, #71f5a7);
+            color: var(--bg, #0b0c0e);
+          }
+
+          /* Pointer: SVG tip sits exactly at this box's top-left corner, so
+             the box position places the tip itself. GSAP moves it with x/y
+             transforms only (never left/top: layout props snap to integer
+             device pixels under the seek-by-frame capture engine) and scales
+             it about the tip (press). */
+          .pr-cursor {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 7cqmin;
+            height: 7cqmin;
+            transform-origin: 0 0;
+            filter: drop-shadow(0 0.4cqmin 0.9cqmin rgba(2, 6, 23, 0.45));
+            will-change: transform, opacity;
+          }
+
+          .pr-cursor svg {
+            display: block;
+            width: 100%;
+            height: 100%;
+          }
+        </style>
+
+        <div
+          id="press-ripple-clip"
+          class="pr-clip clip"
+          data-start="0"
+          data-duration="3"
+          data-track-index="0"
+        >
+          <div class="pr-stage">
+            <div class="pr-zone">
+              <div class="pr-ring" aria-hidden="true"></div>
+              <div class="pr-ring" aria-hidden="true"></div>
+              <div class="pr-actor">
+                <div class="pr-target-slot" data-slot="target" data-state="idle">
+                  <span class="pr-pill"></span>
+                </div>
+              </div>
+            </div>
+            <div class="pr-cursor" aria-hidden="true">
+              <svg viewBox="0 0 20 20">
+                <path
+                  class="pr-cursor-path"
+                  d="M0.6 0.6 L0.6 14.6 L4.4 11.3 L6.7 16.8 L9.4 15.6 L7.1 10.2 L12.4 9.8 Z"
+                  stroke-width="1.1"
+                  stroke-linejoin="round"
+                ></path>
+              </svg>
+            </div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".pr-stage");
+            var zone = root.querySelector(".pr-zone");
+            var rings = root.querySelectorAll(".pr-ring");
+            var actor = root.querySelector(".pr-actor");
+            var slot = root.querySelector(".pr-target-slot");
+            var pill = root.querySelector(".pr-pill");
+            var cursor = root.querySelector(".pr-cursor");
+            var cursorPath = root.querySelector(".pr-cursor-path");
+
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            function num(value, fallback, min, max) {
+              var n = Number(value);
+              if (!isFinite(n)) n = fallback;
+              return Math.min(max, Math.max(min, n));
+            }
+
+            var labelText =
+              vars.label == null ? "Get started" : String(vars.label).trim().replace(/\s+/g, " ");
+            var targetX = num(vars.target_x, 50, 8, 92);
+            var targetY = num(vars.target_y, 50, 8, 92);
+            var cursorTone = vars.cursor === "dark" ? "dark" : "light";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            // The bundler mirrors composition variables as scoped CSS custom
+            // props, so this unit's own accent variable shadows the contract
+            // --accent token inside the subtree ("blue" is a valid CSS color
+            // and would render pure blue). When the shadow is present, fall
+            // back to the literal contract value instead of var(--accent).
+            var computedAccent = getComputedStyle(root).getPropertyValue("--accent").trim();
+            if (
+              computedAccent === "green" ||
+              computedAccent === "blue" ||
+              computedAccent === "violet"
+            ) {
+              accentColors.blue = "#61a8ff";
+            }
+
+            pill.textContent = labelText;
+            root.style.setProperty("--pr-accent", accentColors[accent]);
+            root.style.setProperty("--pr-x", String(targetX));
+            root.style.setProperty("--pr-y", String(targetY));
+            if (cursorTone === "dark") {
+              cursorPath.setAttribute("fill", "#111827");
+              cursorPath.setAttribute("stroke", "#f8fafc");
+            } else {
+              cursorPath.setAttribute("fill", "#f8fafc");
+              cursorPath.setAttribute("stroke", "#0f172a");
+            }
+
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "3"));
+            var OUT = exit === "none" ? 0 : 0.45;
+            // The whole press tail (compress + release ripple + cursor exit)
+            // is ~1.05s; keep it inside D, then keep the OUT window after it.
+            var pressAt = num(vars.press_at, 1.4, 0.9, Math.max(0.9, duration - 1.05 - OUT));
+            // Human aim: the tip lands a few px off the zone's true center.
+            var landX = targetX + 0.55;
+            var landY = targetY + 0.85;
+            var arriveEnd = pressAt - 0.16;
+            var arriveStart = Math.max(0, arriveEnd - 0.78);
+
+            // Motion runs on transforms only (x/y px), never left/top: layout
+            // props snap to integer device pixels under the seek-by-frame
+            // capture engine. Stage size is read once, synchronously, at load
+            // (deterministic: fixed viewport per render) to convert the
+            // percent-based land/off-stage positions into px.
+            var stageW = root.clientWidth || 1920;
+            var stageH = root.clientHeight || 1080;
+            function xAt(percent) {
+              return (percent / 100) * stageW;
+            }
+            function yAt(percent) {
+              return (percent / 100) * stageH;
+            }
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: target settles in.
+            tl.fromTo(
+              actor,
+              { opacity: 0, y: "2.6cqh" },
+              { opacity: 1, y: 0, duration: 0.5, ease: "power3.out" },
+              0,
+            );
+
+            // Cursor decel-arrives from off-stage bottom-right. power2.out to
+            // an exact endpoint: it arrives, it never passes through.
+            tl.fromTo(
+              cursor,
+              { x: xAt(114), y: yAt(112) },
+              {
+                x: xAt(landX),
+                y: yAt(landY),
+                duration: arriveEnd - arriveStart,
+                ease: "power2.out",
+              },
+              arriveStart,
+            );
+
+            // Press: target and cursor compress in lockstep (cursor about its
+            // tip), then release with a soft spring.
+            tl.to([actor, cursor], { scale: 0.93, duration: 0.12, ease: "power1.in" }, pressAt);
+            tl.set(slot, { attr: { "data-state": "pressed" } }, pressAt + 0.12);
+            tl.to(
+              [actor, cursor],
+              { scale: 1, duration: 0.42, ease: "back.out(1.8)" },
+              pressAt + 0.14,
+            );
+
+            // Ink ripple rings from under the slot: real weight (thick ink,
+            // fg-mixed contrast, wide travel), still just two rings.
+            tl.fromTo(
+              rings,
+              { scale: 0.16, autoAlpha: 0.95 },
+              {
+                scale: 2.6,
+                autoAlpha: 0,
+                duration: 0.66,
+                ease: "power2.out",
+                stagger: 0.11,
+                immediateRender: false,
+              },
+              pressAt + 0.1,
+            );
+
+            // The cursor exits off-stage after the release (accelerating,
+            // power2.in) so it never occludes the label during the hold; the
+            // pressed state and the ripple aftermath carry the frame. Both
+            // endpoints are explicit so reverse seeks restore the landing.
+            tl.fromTo(
+              cursor,
+              { x: xAt(landX), y: yAt(landY) },
+              {
+                x: xAt(112),
+                y: yAt(110),
+                duration: 0.55,
+                ease: "power2.in",
+                immediateRender: false,
+              },
+              pressAt + 0.5,
+            );
+
+            // HOLD: dead-still on the pressed state; elastic with D.
+
+            // OUT: only when the host opts in; frame roots own transitions.
+            if (exit !== "none") {
+              var outStart = Math.max(pressAt + 1.05, duration - OUT);
+              var outVars = { opacity: 0, duration: OUT, ease: "power2.in" };
+              if (exit === "up") outVars.y = "-4cqh";
+              tl.to(stage, outVars, outStart);
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["press-ripple"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add press-ripple" />
+
+That writes one file: `compositions/components/press-ripple.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/press-ripple.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `product-demo` `cursor` `press` `ripple` `payoff`.
+
+## 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/components/pull-back-reveal.mdx b/docs/catalog/components/pull-back-reveal.mdx
new file mode 100644
index 0000000000..fe6df83490
--- /dev/null
+++ b/docs/catalog/components/pull-back-reveal.mdx
@@ -0,0 +1,378 @@
+---
+title: "Pull Back Reveal"
+description: "A tight stat detail holds, then one decelerating camera pull-back reveals the headline and supporting cards that recontextualize it."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/pull-back-reveal.html"
+  compositionId="pull-back-reveal"
+  compositionSrc="compositions/components/pull-back-reveal.html"
+  variables={[{"id":"detail_text","type":"string","role":"content","label":"Detail text","description":"Stat shown in the detail chip at the center of the reveal.","default":"+312%"},{"id":"headline","type":"string","role":"content","label":"Headline","description":"Headline revealed around the focused detail.","default":"Growth compounds"},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Highlight color used across the composed scene.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]}]}
+>
+
+```html pull-back-reveal.html
+<!doctype html>
+<!--
+  pull-back-reveal: HyperFrames video primitive (camera / reveal / recontextualize)
+
+  Concept: the frame starts tight on one stat chip, pauses long enough to
+  establish it as the subject, then pulls back to reveal the headline and two
+  supporting cards that give the stat its meaning. The chip remains the same
+  DOM element for the entire move.
+
+  Variables:
+    - detail_text (string, default "+312%"): the stat inside the focus chip.
+    - headline (string, default "Growth compounds"): the scene headline.
+    - accent (green | blue | violet, default "green"): the scene highlight.
+
+  Envelope (fixed IN, elastic HOLD, no OUT, never gsap.timeScale()):
+    IN_BASE  = 2.40s  tight hold, whip-out pull-back, then a short drift settle
+    HOLD     = elastic full-scene hold with a restrained shadow breath
+    OUT_BASE = 0s     the reveal establishes the final composed scene
+    If D is shorter than IN_BASE, the three IN beats compress together and
+    HOLD becomes zero. Longer mounts stretch HOLD only.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, has no data-width or data-height,
+  and registers one paused timeline under the hardcoded pull-back-reveal id.
+-->
+<html
+  lang="en"
+  data-composition-id="pull-back-reveal"
+  data-composition-duration="4.5"
+  data-composition-variables='[
+    { "id": "detail_text", "type": "string", "role": "content", "label": "Detail text", "description": "Stat shown in the detail chip at the center of the reveal.", "default": "+312%" },
+    { "id": "headline", "type": "string", "role": "content", "label": "Headline", "description": "Headline revealed around the focused detail.", "default": "Growth compounds" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Highlight color used across the composed scene.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Pull Back Reveal</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="pull-back-reveal" data-duration="4.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            background: var(--bg, #0b0c0e);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .pbr-clip,
+          .pbr-world {
+            position: absolute;
+            inset: 0;
+          }
+
+          .pbr-clip {
+            overflow: hidden;
+            background: var(--bg, #0b0c0e);
+          }
+
+          .pbr-world {
+            overflow: hidden;
+            transform-origin: 50% 50%;
+            background:
+              radial-gradient(
+                circle at 48% 50%,
+                color-mix(in srgb, var(--pbr-accent) 19%, transparent),
+                transparent 27%
+              ),
+              linear-gradient(
+                145deg,
+                color-mix(in srgb, var(--surface, #18202d) 82%, var(--bg, #0b0c0e)),
+                var(--bg, #0b0c0e) 72%
+              );
+            will-change: transform;
+          }
+
+          .pbr-headline {
+            position: absolute;
+            z-index: 1;
+            top: 8cqh;
+            left: 8cqw;
+            width: 76cqw;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: 7.6cqw;
+            font-weight: 780;
+            line-height: 0.92;
+            letter-spacing: -0.055em;
+            overflow-wrap: anywhere;
+            text-shadow: 0 1.8cqh 5cqh color-mix(in srgb, var(--bg, #0b0c0e) 72%, transparent);
+          }
+
+          .pbr-card {
+            position: absolute;
+            z-index: 1;
+            overflow: hidden;
+            border: 0.11cqw solid color-mix(in srgb, var(--border, #334155) 78%, transparent);
+            border-radius: var(--radius, 2.4cqw);
+            background: color-mix(in srgb, var(--surface, #1e293b) 92%, transparent);
+            box-shadow:
+              0 2.2cqh 5.5cqh color-mix(in srgb, var(--bg, #0b0c0e) 54%, transparent),
+              inset 0 0.1cqh 0 color-mix(in srgb, var(--fg, #f8fafc) 9%, transparent);
+          }
+
+          .pbr-detail-card {
+            top: 31cqh;
+            left: 8cqw;
+            width: 56cqw;
+            height: 56cqh;
+            padding: 5cqh 4cqw;
+          }
+
+          .pbr-detail-label,
+          .pbr-support-label {
+            color: var(--muted, #94a3b8);
+            font-size: 1.35cqw;
+            font-weight: 680;
+            line-height: 1;
+            letter-spacing: 0.1em;
+            text-transform: uppercase;
+          }
+
+          .pbr-detail-chip {
+            position: absolute;
+            top: 13cqh;
+            left: 31cqw;
+            width: 20cqw;
+            min-height: 12cqh;
+            display: grid;
+            place-items: center;
+            padding: 1.8cqh 1.5cqw;
+            border: 0.12cqw solid color-mix(in srgb, var(--pbr-accent) 72%, var(--fg, #f8fafc));
+            border-radius: calc(var(--radius, 2.4cqw) * 0.72);
+            background: color-mix(in srgb, var(--pbr-accent) 22%, var(--surface, #1e293b));
+            box-shadow: 0 1.8cqh 4.5cqh color-mix(in srgb, var(--pbr-accent) 28%, transparent);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: 4.4cqw;
+            font-weight: 820;
+            line-height: 1;
+            letter-spacing: -0.055em;
+            overflow: hidden;
+            text-align: center;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          .pbr-detail-context {
+            position: absolute;
+            bottom: 5cqh;
+            left: 4cqw;
+            color: var(--muted, #94a3b8);
+            font-size: 1.6cqw;
+            font-weight: 560;
+            line-height: 1.25;
+          }
+
+          .pbr-support-card {
+            left: 75cqw;
+            width: 17cqw;
+            height: 25cqh;
+            padding: 3.6cqh 2.2cqw;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+          }
+
+          .pbr-support-card-a {
+            top: 31cqh;
+          }
+
+          .pbr-support-card-b {
+            top: 62cqh;
+          }
+
+          .pbr-support-value {
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: 3.7cqw;
+            font-weight: 780;
+            line-height: 0.9;
+            letter-spacing: -0.05em;
+          }
+
+          .pbr-support-rule {
+            width: 100%;
+            height: 0.5cqh;
+            border-radius: 999cqw;
+            background: color-mix(in srgb, var(--pbr-accent) 72%, var(--border, #334155));
+          }
+
+          .pbr-ground {
+            position: absolute;
+            z-index: 0;
+            left: 15cqw;
+            bottom: 2cqh;
+            width: 70cqw;
+            height: 10cqh;
+            border-radius: 50%;
+            background: color-mix(in srgb, var(--pbr-accent) 16%, var(--bg, #0b0c0e));
+            filter: blur(3.2cqh);
+            opacity: 0;
+            transform-origin: 50% 50%;
+            will-change: transform, opacity;
+          }
+        </style>
+
+        <div
+          id="pull-back-reveal-clip"
+          class="pbr-clip clip"
+          data-start="0"
+          data-duration="4.5"
+          data-track-index="0"
+        >
+          <div class="pbr-world">
+            <div class="pbr-headline"></div>
+
+            <section class="pbr-card pbr-detail-card">
+              <div class="pbr-detail-label">Net growth</div>
+              <div class="pbr-detail-chip"></div>
+              <div class="pbr-detail-context">Across every active workspace</div>
+            </section>
+
+            <section class="pbr-card pbr-support-card pbr-support-card-a">
+              <div class="pbr-support-label">Retention</div>
+              <div class="pbr-support-value">94%</div>
+              <div class="pbr-support-rule"></div>
+            </section>
+
+            <section class="pbr-card pbr-support-card pbr-support-card-b">
+              <div class="pbr-support-label">Teams</div>
+              <div class="pbr-support-value">48</div>
+              <div class="pbr-support-rule"></div>
+            </section>
+
+            <div class="pbr-ground"></div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var world = root.querySelector(".pbr-world");
+            var headline = root.querySelector(".pbr-headline");
+            var detail = root.querySelector(".pbr-detail-chip");
+            var ground = root.querySelector(".pbr-ground");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var detailText = vars.detail_text == null ? "+312%" : String(vars.detail_text);
+            var headlineText = vars.headline == null ? "Growth compounds" : String(vars.headline);
+            var accentColors = {
+              green: "var(--brand, #a1a1aa)",
+              blue: "var(--accent, #a1a1aa)",
+              violet: "var(--accent-2, #a1a1aa)",
+            };
+            var accentColor = accentColors[vars.accent] || accentColors.green;
+
+            detail.textContent = detailText;
+            headline.textContent = headlineText;
+            root.style.setProperty("--pbr-accent", accentColor);
+
+            // RETIME RANGE: IN owns the tight beat and complete camera move.
+            // HOLD is the only elastic phase. This reveal has no exit.
+            var IN_BASE = 2.4;
+            var TIGHT_HOLD_BASE = 0.55;
+            var WHIP_BASE = 1.2;
+            var DRIFT_BASE = 0.65;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4.5"));
+            var phaseScale = Math.min(1, duration / IN_BASE);
+            var TIGHT_HOLD = TIGHT_HOLD_BASE * phaseScale;
+            var WHIP = WHIP_BASE * phaseScale;
+            var DRIFT = DRIFT_BASE * phaseScale;
+            var IN = TIGHT_HOLD + WHIP + DRIFT;
+            var HOLD = Math.max(0, duration - IN);
+
+            var tl = gsap.timeline({ paused: true });
+
+            tl.fromTo(
+              world,
+              { scale: 2.2, y: 0 },
+              { scale: 1.055, y: "0.7cqh", duration: WHIP, ease: "power4.out" },
+              TIGHT_HOLD,
+            );
+            tl.to(
+              world,
+              { scale: 1, y: 0, duration: DRIFT, ease: "sine.inOut" },
+              TIGHT_HOLD + WHIP,
+            );
+            tl.fromTo(
+              ground,
+              { opacity: 0, scaleX: 0.72, scaleY: 0.72 },
+              { opacity: 0.78, scaleX: 1, scaleY: 1, duration: DRIFT, ease: "power2.out" },
+              TIGHT_HOLD + WHIP,
+            );
+
+            if (HOLD > 0) {
+              tl.to(
+                ground,
+                { opacity: 0.68, scaleX: 0.97, duration: HOLD * 0.5, ease: "sine.inOut" },
+                IN,
+              );
+              tl.to(
+                ground,
+                { opacity: 0.78, scaleX: 1, duration: HOLD * 0.5, ease: "sine.inOut" },
+                IN + HOLD * 0.5,
+              );
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["pull-back-reveal"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add pull-back-reveal" />
+
+That writes one file: `compositions/components/pull-back-reveal.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/pull-back-reveal.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `camera` `pull-back` `reveal` `recontextualize`.
+
+## 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/components/pull-to-refresh.mdx b/docs/catalog/components/pull-to-refresh.mdx
new file mode 100644
index 0000000000..1a713888ac
--- /dev/null
+++ b/docs/catalog/components/pull-to-refresh.mdx
@@ -0,0 +1,721 @@
+---
+title: "Pull to Refresh"
+description: "A mobile list pulls through nonlinear rubber-band resistance, arms at a threshold, commits to a bounded loading indicator, then snaps exactly back to rest."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/pull-to-refresh.html"
+  compositionId="pull-to-refresh"
+  compositionSrc="compositions/components/pull-to-refresh.html"
+  variables={[{"id":"pullDistance","type":"number","role":"layout","label":"Pull distance","description":"Raw pull distance before nonlinear rubber-band resistance.","default":120,"min":60,"max":220,"step":5},{"id":"spinnerStyle","type":"enum","role":"content","label":"Spinner style","description":"Refresh indicator geometry and loading motion.","default":"ring","options":[{"value":"arrow","label":"Arrow"},{"value":"dots","label":"Dots"},{"value":"ring","label":"Ring"}]}]}
+>
+
+```html pull-to-refresh.html
+<!doctype html>
+<!--
+  pull-to-refresh: HyperFrames video primitive (pointers / interaction / demonstrate)
+
+  Concept: a mobile list yields under a scripted pull, arms at a visible
+  threshold, commits into a bounded loading state, then snaps exactly back
+  to rest. One mechanic, one job: demonstrate a native pull-to-refresh.
+
+  Compiled-from evidence: GAP, agent B1 hard miss (video-primitives
+  candidates card); mobile gesture-physics-recipes.md, section 9 rubber-band
+  curve and quiet/default/forceful register table. The constants below use
+  the default register as inspiration, while the self-contained resistance
+  curve replaces the shared toolkit that is not available in this catalog.
+
+  Use when: a mobile product scene needs a recognizable refresh gesture and
+  loading handoff. Skip it for generic scrolling or a device silhouette.
+
+  Variables (declared in data-composition-variables below):
+    - pullDistance (number, default 120, range 60–220): raw pull distance fed
+      into the nonlinear resistance curve before host-relative translation.
+    - spinnerStyle ("arrow" | "dots" | "ring", default "ring"): the refresh
+      indicator. Each option has different geometry and active motion.
+
+  Envelope (fixed IN/OUT, elastic loading HOLD only, never gsap.timeScale()):
+    IN_BASE  = 1.80s  contact, resistant drag, threshold arm, commit,
+                      handoff, and the first bounded loading cycle
+    HOLD     = elastic = max(0, D - (IN_BASE + OUT_BASE)); additional finite
+               loading cycles while the content stays at its held offset
+    OUT_BASE = 0.65s  indicator exit and content snap-back
+    If D < 2.45s, IN and OUT scale down together so IN + OUT == D and HOLD
+    is zero. The drag remains heavier and slower than the release response.
+
+  Sync points (fixed offsets, never inside elastic HOLD):
+    - impact: 0.82s into unscaled IN, threshold commit and spinner handoff
+    - settle: 0.65s into unscaled OUT, content reseated exactly at y = 0
+    Both offsets scale proportionally only when D compresses the envelope.
+
+  Sound cues: declarative only. `hf:sfx` events fire for "refresh-commit"
+  at impact and "refresh-settle" at settle. Scene-level mixing owns audio.
+
+  Mount contract: this file is a mountable sub-composition. A host loads it
+  via data-composition-src, and the runtime clones only <template> contents.
+  #root fills the host box with position:absolute, inset:0, and
+  container-type:size. It has no data-width or data-height. All internal
+  geometry uses cqw/cqh, and the hardcoded composition id is required because
+  FLATTENED_INNER_ROOT_STRIP_ATTRS removes the mounted root id attribute.
+  Variables come from window.__hyperframes.getVariables(), which owns merged
+  declared defaults and per-instance overrides after mounting.
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "pullDistance", "type": "number", "role": "layout", "label": "Pull distance", "description": "Raw pull distance before nonlinear rubber-band resistance.", "default": 120, "min": 60, "max": 220, "step": 5 },
+    { "id": "spinnerStyle", "type": "enum", "role": "content", "label": "Spinner style", "description": "Refresh indicator geometry and loading motion.", "default": "ring", "options": [{ "value": "arrow", "label": "Arrow" }, { "value": "dots", "label": "Dots" }, { "value": "ring", "label": "Ring" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Pull to Refresh</title>
+    <!-- Metadata only. The mount runtime discards everything outside the
+         template, while the loader still reads variable declarations from
+         this html element before cloning the template. -->
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="pull-to-refresh" data-duration="4" data-fps="30">
+        <style>
+          @property --ptr-progress {
+            syntax: "<number>";
+            inherits: true;
+            initial-value: 0;
+          }
+
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          /* INVARIANT: #root is the mount-box owner. The host supplies every
+             dimension, and all descendants size against this container. */
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            color: var(--fg, #f4f7fb);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+          }
+
+          .ptr-clip {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            background: var(--bg, #0b1120);
+          }
+
+          .ptr-indicator {
+            --ptr-progress: 0;
+            position: absolute;
+            z-index: 0;
+            inset: 0 0 auto;
+            height: 15cqh;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding-top: 1.5cqh;
+            opacity: 0;
+            color: var(--brand, #35d6a0);
+          }
+
+          .ptr-indicator-visual {
+            width: 6.2cqh;
+            height: 6.2cqh;
+            display: none;
+            place-items: center;
+          }
+
+          #root[data-spinner-style="ring"] .ptr-ring,
+          #root[data-spinner-style="arrow"] .ptr-arrow,
+          #root[data-spinner-style="dots"] .ptr-dots {
+            display: grid;
+          }
+
+          /* EDIT ZONE: all three styles read the same --ptr-progress scalar.
+             Ring maps it to arc fill, arrow maps it to a threshold flip, and
+             dots map it to a three-step reveal. Active motion stays separate
+             so the selected style has a distinctive loading silhouette. */
+          .ptr-ring-core {
+            width: 100%;
+            height: 100%;
+            border-radius: 50%;
+            background: conic-gradient(
+              from -90deg,
+              var(--brand, #35d6a0) 0 calc(var(--ptr-progress) * 1%),
+              color-mix(in srgb, var(--surface, #1e293b) 86%, transparent)
+                calc(var(--ptr-progress) * 1%) 100%
+            );
+            -webkit-mask: radial-gradient(farthest-side, transparent 59%, var(--fg, #f4f7fb) 61%);
+            mask: radial-gradient(farthest-side, transparent 59%, var(--fg, #f4f7fb) 61%);
+          }
+
+          .ptr-arrow-progress {
+            width: 100%;
+            height: 100%;
+            display: grid;
+            place-items: center;
+            border-radius: 50%;
+            border: 0.35cqh solid
+              color-mix(in srgb, var(--brand, #35d6a0) 58%, var(--border, #334155));
+            background: color-mix(in srgb, var(--surface, #1e293b) 88%, transparent);
+            transform: rotate(calc(var(--ptr-progress) * 1.8deg));
+          }
+
+          .ptr-arrow-glyph {
+            position: relative;
+            width: 1.5cqh;
+            height: 2.7cqh;
+            border-radius: 0.3cqh;
+            background: var(--brand, #35d6a0);
+          }
+
+          .ptr-arrow-glyph::after {
+            content: "";
+            position: absolute;
+            left: 50%;
+            bottom: -0.8cqh;
+            width: 2.3cqh;
+            height: 2.3cqh;
+            border-right: 0.55cqh solid var(--brand, #35d6a0);
+            border-bottom: 0.55cqh solid var(--brand, #35d6a0);
+            transform: translateX(-50%) rotate(45deg);
+          }
+
+          .ptr-dots {
+            grid-template-columns: repeat(3, 1.7cqh);
+            gap: 0.8cqh;
+            align-content: center;
+            width: auto;
+          }
+
+          .ptr-dot {
+            width: 1.7cqh;
+            height: 1.7cqh;
+            border-radius: 50%;
+            background: var(--brand, #35d6a0);
+            box-shadow: 0 0 1.2cqh color-mix(in srgb, var(--brand, #35d6a0) 50%, transparent);
+          }
+
+          .ptr-dot:nth-child(1) {
+            opacity: clamp(0.2, calc(var(--ptr-progress) / 30), 1);
+          }
+
+          .ptr-dot:nth-child(2) {
+            opacity: clamp(0.2, calc((var(--ptr-progress) - 30) / 30), 1);
+          }
+
+          .ptr-dot:nth-child(3) {
+            opacity: clamp(0.2, calc((var(--ptr-progress) - 60) / 30), 1);
+          }
+
+          .ptr-state {
+            position: relative;
+            width: 100%;
+            height: 3.4cqh;
+            margin-top: 0.9cqh;
+            color: var(--muted, #94a3b8);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: clamp(1.35cqh, 1.8cqw, 2.05cqh);
+            font-weight: 700;
+            letter-spacing: 0.04em;
+            text-align: center;
+            text-transform: uppercase;
+          }
+
+          .ptr-state span {
+            position: absolute;
+            inset: 0;
+            opacity: 0;
+          }
+
+          .ptr-content {
+            position: absolute;
+            z-index: 1;
+            inset: 0;
+            overflow: hidden;
+            background: var(--bg, #0b1120);
+            border-radius: inherit;
+            box-shadow: 0 -1cqh 3cqh color-mix(in srgb, var(--bg, #0b1120) 65%, transparent);
+          }
+
+          .ptr-topbar {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            height: 10cqh;
+            padding: 0 6cqw;
+            border-bottom: 0.12cqh solid var(--border, #334155);
+            background: color-mix(in srgb, var(--surface, #1e293b) 52%, var(--bg, #0b1120));
+          }
+
+          .ptr-title {
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: clamp(2.8cqh, 5.2cqw, 4.3cqh);
+            font-weight: 760;
+            letter-spacing: -0.035em;
+          }
+
+          .ptr-updated {
+            display: flex;
+            align-items: center;
+            gap: 1.4cqw;
+            color: var(--brand, #35d6a0);
+            font-size: clamp(1.4cqh, 2.2cqw, 2cqh);
+            font-weight: 700;
+            opacity: 0;
+          }
+
+          .ptr-updated::before {
+            content: "";
+            width: 1.4cqh;
+            height: 1.4cqh;
+            border-radius: 50%;
+            background: var(--brand, #35d6a0);
+            box-shadow: 0 0 1.2cqh color-mix(in srgb, var(--brand, #35d6a0) 50%, transparent);
+          }
+
+          .ptr-search {
+            display: flex;
+            align-items: center;
+            height: 7cqh;
+            margin: 3cqh 5cqw 2cqh;
+            padding: 0 4cqw;
+            border: 0.12cqh solid var(--border, #334155);
+            border-radius: 3.5cqh;
+            background: var(--surface, #1e293b);
+            color: var(--muted, #94a3b8);
+            font-size: clamp(1.7cqh, 2.8cqw, 2.5cqh);
+          }
+
+          .ptr-list {
+            display: grid;
+            gap: 1.7cqh;
+            padding: 0 5cqw 5cqh;
+          }
+
+          .ptr-card {
+            display: grid;
+            grid-template-columns: 8cqh 1fr auto;
+            align-items: center;
+            min-height: 11.5cqh;
+            gap: 3cqw;
+            padding: 2cqh 4cqw;
+            border: 0.12cqh solid var(--border, #334155);
+            border-radius: 2.4cqh;
+            background: var(--surface, #1e293b);
+            box-shadow: 0 1cqh 2.4cqh color-mix(in srgb, var(--bg, #0b1120) 55%, transparent);
+          }
+
+          .ptr-avatar {
+            display: grid;
+            place-items: center;
+            width: 6.3cqh;
+            height: 6.3cqh;
+            border-radius: 2cqh;
+            background: color-mix(in srgb, var(--brand, #35d6a0) 20%, var(--surface, #1e293b));
+            color: var(--brand, #35d6a0);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: 2.3cqh;
+            font-weight: 800;
+          }
+
+          .ptr-copy {
+            min-width: 0;
+          }
+
+          .ptr-card-title {
+            color: var(--fg, #f4f7fb);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: clamp(1.9cqh, 3.1cqw, 2.7cqh);
+            font-weight: 720;
+          }
+
+          .ptr-card-subtitle {
+            margin-top: 0.5cqh;
+            color: var(--muted, #94a3b8);
+            font-size: clamp(1.45cqh, 2.3cqw, 2.05cqh);
+            line-height: 1.25;
+          }
+
+          .ptr-time {
+            align-self: start;
+            color: var(--muted, #94a3b8);
+            font-size: clamp(1.25cqh, 2cqw, 1.8cqh);
+            font-weight: 650;
+          }
+        </style>
+
+        <div
+          id="pull-to-refresh-clip"
+          class="ptr-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="ptr-indicator" aria-hidden="true">
+            <div class="ptr-indicator-visual ptr-ring">
+              <div class="ptr-ring-core"></div>
+            </div>
+            <div class="ptr-indicator-visual ptr-arrow">
+              <div class="ptr-arrow-progress">
+                <div class="ptr-arrow-glyph"></div>
+              </div>
+            </div>
+            <div class="ptr-indicator-visual ptr-dots">
+              <span class="ptr-dot"></span>
+              <span class="ptr-dot"></span>
+              <span class="ptr-dot"></span>
+            </div>
+            <div class="ptr-state">
+              <span class="ptr-pull-label">Pull to refresh</span>
+              <span class="ptr-release-label">Release to refresh</span>
+              <span class="ptr-loading-label">Refreshing</span>
+            </div>
+          </div>
+
+          <section class="ptr-content" aria-label="Activity list">
+            <header class="ptr-topbar">
+              <div class="ptr-title">Activity</div>
+              <div class="ptr-updated">Updated now</div>
+            </header>
+            <div class="ptr-search">Search activity</div>
+            <div class="ptr-list">
+              <article class="ptr-card">
+                <div class="ptr-avatar">AL</div>
+                <div class="ptr-copy">
+                  <div class="ptr-card-title">Alex shared a draft</div>
+                  <div class="ptr-card-subtitle">Launch sequence, ready for review</div>
+                </div>
+                <div class="ptr-time">Now</div>
+              </article>
+              <article class="ptr-card">
+                <div class="ptr-avatar">MK</div>
+                <div class="ptr-copy">
+                  <div class="ptr-card-title">Mika left feedback</div>
+                  <div class="ptr-card-subtitle">Three comments on the new flow</div>
+                </div>
+                <div class="ptr-time">4m</div>
+              </article>
+              <article class="ptr-card">
+                <div class="ptr-avatar">NO</div>
+                <div class="ptr-copy">
+                  <div class="ptr-card-title">Noah published an update</div>
+                  <div class="ptr-card-subtitle">Mobile preview is available</div>
+                </div>
+                <div class="ptr-time">18m</div>
+              </article>
+              <article class="ptr-card">
+                <div class="ptr-avatar">SR</div>
+                <div class="ptr-copy">
+                  <div class="ptr-card-title">Sara joined the project</div>
+                  <div class="ptr-card-subtitle">Workspace access granted</div>
+                </div>
+                <div class="ptr-time">1h</div>
+              </article>
+            </div>
+          </section>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            // Literal by contract. Mounted roots lose data-composition-id
+            // during flattening, so reading the id back from the DOM can
+            // register the timeline under "null".
+            var compositionId = "pull-to-refresh";
+            var clip = root.querySelector(".ptr-clip");
+            var indicator = root.querySelector(".ptr-indicator");
+            var content = root.querySelector(".ptr-content");
+            var pullLabel = root.querySelector(".ptr-pull-label");
+            var releaseLabel = root.querySelector(".ptr-release-label");
+            var loadingLabel = root.querySelector(".ptr-loading-label");
+            var ring = root.querySelector(".ptr-ring-core");
+            var arrow = root.querySelector(".ptr-arrow-glyph");
+            var dots = Array.prototype.slice.call(root.querySelectorAll(".ptr-dot"));
+            var updated = root.querySelector(".ptr-updated");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            // INVARIANT: only finite 60–220 input reaches the physics owner.
+            // Zero, NaN, and strings outside the range fall back explicitly.
+            var rawPull = Number(vars.pullDistance);
+            var pullDistance = Number.isFinite(rawPull)
+              ? Math.max(60, Math.min(220, rawPull))
+              : 120;
+            // INVARIANT: only one of the declared indicator variants reaches
+            // the renderer. Invalid overrides resolve to the declared default.
+            var spinnerStyle =
+              vars.spinnerStyle === "arrow" || vars.spinnerStyle === "dots"
+                ? vars.spinnerStyle
+                : "ring";
+            root.setAttribute("data-spinner-style", spinnerStyle);
+
+            // Self-contained rubber-band mapping from the physics recipe:
+            // displayed = x*c / (x*c/d + 1). REFERENCE is a normalized
+            // preview dimension, then converted to cqh for host-relative
+            // motion. This function alone owns resistance and displacement.
+            var RESISTANCE = 0.55;
+            var REFERENCE = 640;
+            function rubberBand(distance) {
+              return (distance * RESISTANCE) / ((distance * RESISTANCE) / REFERENCE + 1);
+            }
+            var shownPeak = (rubberBand(pullDistance) / REFERENCE) * 100;
+            var heldOffset = Math.min(shownPeak, Math.max(5.8, shownPeak * 0.76));
+            var dragState = { raw: 0 };
+
+            // RETIME RANGE: lifecycle ownership lives only in these constants.
+            // IN and OUT scale together only when the composition duration is short.
+            var IN_BASE = 1.8;
+            var OUT_BASE = 0.65;
+            var CONTACT_BASE = 0.12;
+            var DRAG_BASE = 0.7;
+            var ARM_AT_BASE = 0.61;
+            var IMPACT_AT_BASE = 0.82;
+            var HANDOFF_BASE = 0.22;
+            var durationValue = Number(clip.dataset.duration);
+            var duration = Number.isFinite(durationValue) && durationValue > 0 ? durationValue : 4;
+            var totalBase = IN_BASE + OUT_BASE;
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var CONTACT = CONTACT_BASE * scale;
+            var DRAG = DRAG_BASE * scale;
+            var ARM_AT = ARM_AT_BASE * scale;
+            var IMPACT_AT = IMPACT_AT_BASE * scale;
+            var HANDOFF = HANDOFF_BASE * scale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var OUT_START = IN + HOLD;
+            var ACTIVE_DURATION = Math.max(0.001, OUT_START - IMPACT_AT);
+
+            function fireSfx(id, atTime) {
+              root.dispatchEvent(
+                new CustomEvent("hf:sfx", {
+                  detail: { id: id, t: atTime },
+                  bubbles: true,
+                }),
+              );
+            }
+
+            gsap.set(content, { y: "0cqh" });
+            gsap.set(indicator, { "--ptr-progress": 0, opacity: 0 });
+            gsap.set(pullLabel, { opacity: 1 });
+            gsap.set(releaseLabel, { opacity: 0 });
+            gsap.set(loadingLabel, { opacity: 0 });
+            gsap.set(ring, { rotation: 0 });
+            gsap.set(arrow, { rotation: 0 });
+            gsap.set(dots, { y: "0cqh", scale: 1 });
+            gsap.set(updated, { opacity: 0 });
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN, contact and nonlinear pull. The distance is already
+            // resistance-mapped, while power2.out controls drag timing.
+            tl.fromTo(
+              indicator,
+              { "--ptr-progress": 0, opacity: 0 },
+              {
+                "--ptr-progress": 100,
+                opacity: 1,
+                duration: DRAG,
+                ease: "power2.out",
+                immediateRender: false,
+              },
+              CONTACT,
+            );
+            tl.fromTo(
+              dragState,
+              { raw: 0 },
+              {
+                raw: pullDistance,
+                duration: DRAG,
+                ease: "power2.out",
+                onUpdate: function () {
+                  var displayed = (rubberBand(dragState.raw) / REFERENCE) * 100;
+                  gsap.set(content, { y: displayed + "cqh" });
+                },
+                immediateRender: false,
+              },
+              CONTACT,
+            );
+
+            // Threshold arm, a fixed point in IN. The indicator geometry is
+            // full and the label flips before release commits the refresh.
+            tl.to(pullLabel, { opacity: 0, duration: 0.12 * scale, ease: "power2.in" }, ARM_AT);
+            tl.to(releaseLabel, { opacity: 1, duration: 0.16 * scale, ease: "power2.out" }, ARM_AT);
+
+            tl.addLabel("impact", IMPACT_AT);
+            tl.fromTo(
+              content,
+              { y: shownPeak + "cqh" },
+              {
+                y: heldOffset + "cqh",
+                duration: HANDOFF,
+                ease: "power3.out",
+                immediateRender: false,
+              },
+              IMPACT_AT,
+            );
+            tl.to(
+              releaseLabel,
+              { opacity: 0, duration: 0.1 * scale, ease: "power2.in" },
+              IMPACT_AT,
+            );
+            tl.to(
+              loadingLabel,
+              { opacity: 1, duration: 0.16 * scale, ease: "power2.out" },
+              IMPACT_AT,
+            );
+            tl.call(
+              function () {
+                fireSfx("refresh-commit", IMPACT_AT);
+              },
+              [],
+              IMPACT_AT,
+            );
+
+            // Loading HOLD: every cycle count is finite and determined once.
+            // Each style owns a distinct active motion, but only the resolved
+            // style is authored into the timeline.
+            if (spinnerStyle === "ring") {
+              var spinCount = Math.max(1, Math.round(ACTIVE_DURATION / 0.58));
+              tl.fromTo(
+                ring,
+                { rotation: 0 },
+                {
+                  rotation: 360 * spinCount,
+                  duration: ACTIVE_DURATION,
+                  ease: "linear",
+                  immediateRender: false,
+                },
+                IMPACT_AT,
+              );
+            } else if (spinnerStyle === "arrow") {
+              var arrowSpinCount = Math.max(1, Math.round(ACTIVE_DURATION / 0.64));
+              tl.fromTo(
+                arrow,
+                { rotation: 0 },
+                {
+                  rotation: 360 * arrowSpinCount,
+                  duration: ACTIVE_DURATION,
+                  ease: "linear",
+                  immediateRender: false,
+                },
+                IMPACT_AT,
+              );
+            } else {
+              var PULSE_HALF = 0.22 * scale;
+              dots.forEach(function (dot, index) {
+                var dotStart = IMPACT_AT + index * 0.1 * scale;
+                var available = Math.max(PULSE_HALF, OUT_START - dotStart);
+                var pulseRepeat = Math.max(1, Math.floor(available / PULSE_HALF) - 1);
+                tl.fromTo(
+                  dot,
+                  { y: "0cqh", scale: 1 },
+                  {
+                    y: "-1.15cqh",
+                    scale: 1.28,
+                    duration: PULSE_HALF,
+                    ease: "sine.inOut",
+                    yoyo: true,
+                    repeat: pulseRepeat,
+                    immediateRender: false,
+                  },
+                  dotStart,
+                );
+              });
+            }
+
+            // OUT: opacity exits without overshoot. Content alone earns the
+            // rare tactile back.out snap and lands exactly at zero.
+            tl.fromTo(
+              indicator,
+              { opacity: 1 },
+              {
+                opacity: 0,
+                duration: Math.min(OUT, 0.2 * scale),
+                ease: "power2.in",
+                immediateRender: false,
+              },
+              OUT_START,
+            );
+            tl.fromTo(
+              content,
+              { y: heldOffset + "cqh" },
+              {
+                y: "0cqh",
+                duration: OUT,
+                ease: "back.out(1.7)",
+                immediateRender: false,
+              },
+              OUT_START,
+            );
+            tl.fromTo(
+              updated,
+              { opacity: 0 },
+              {
+                opacity: 1,
+                duration: Math.min(OUT, 0.28 * scale),
+                ease: "power2.out",
+                immediateRender: false,
+              },
+              OUT_START + OUT * 0.32,
+            );
+            tl.addLabel("settle", OUT_START + OUT);
+            tl.call(
+              function () {
+                fireSfx("refresh-settle", OUT_START + OUT);
+              },
+              [],
+              OUT_START + OUT,
+            );
+
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add pull-to-refresh" />
+
+That writes one file: `compositions/components/pull-to-refresh.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/pull-to-refresh.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `pointer` `pointers` `mobile` `gesture` `interaction` `refresh` `demonstrate`.
+
+## 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/components/push-in.mdx b/docs/catalog/components/push-in.mdx
new file mode 100644
index 0000000000..0fb1b34bfe
--- /dev/null
+++ b/docs/catalog/components/push-in.mdx
@@ -0,0 +1,220 @@
+---
+title: "Push In"
+description: "A centered headline gains focus through one slow, continuous camera push and a gentle fade out."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/push-in.html"
+  compositionId="push-in"
+  compositionSrc="compositions/components/push-in.html"
+  variables={[{"id":"text","type":"string","role":"content","label":"Headline","description":"Text centered in the camera frame.","default":"Focus"},{"id":"intensity","type":"enum","role":"motion","label":"Push intensity","description":"Final camera scale reached by the push.","default":"standard","options":[{"value":"subtle","label":"Subtle"},{"value":"standard","label":"Standard"},{"value":"bold","label":"Bold"}]}]}
+>
+
+```html push-in.html
+<!doctype html>
+<!--
+  push-in: HyperFrames video primitive (camera / holdable / emphasize)
+
+  Concept: a centered headline stays composed while the full stage makes one
+  slow camera push. The intensity variable owns the final scale, and a soft
+  vignette keeps attention on the subject.
+
+  Variables:
+    - text (string, default "Focus"): the centered headline.
+    - intensity (subtle | standard | bold, default "standard"): maps to a
+      final stage scale of 1.08, 1.12, or 1.18.
+
+  Envelope: fixed 0.80s IN eases the camera into motion, elastic HOLD carries
+  a continuous linear creep, and fixed 0.65s OUT gently fades the completed
+  push. If the duration is shorter than IN plus OUT, both fixed phases
+  compress proportionally and HOLD becomes zero. Longer durations stretch
+  HOLD only, so the same total camera travel happens more slowly. The
+  timeline is never time-scaled.
+
+  Mount contract: the runtime clones only this template. #root fills the
+  host box, establishes the container query basis, has no data-width or
+  data-height, and registers one paused timeline under the hardcoded push-in
+  id.
+-->
+<html
+  lang="en"
+  data-composition-id="push-in"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "text", "type": "string", "role": "content", "label": "Headline", "description": "Text centered in the camera frame.", "default": "Focus" },
+    { "id": "intensity", "type": "enum", "role": "motion", "label": "Push intensity", "description": "Final camera scale reached by the push.", "default": "standard", "options": [{ "value": "subtle", "label": "Subtle" }, { "value": "standard", "label": "Standard" }, { "value": "bold", "label": "Bold" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Push In</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="push-in" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .pi-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+          }
+
+          .pi-camera {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+            background:
+              radial-gradient(
+                ellipse at 50% 48%,
+                color-mix(in srgb, var(--surface, #303747) 92%, white) 0%,
+                var(--surface, #303747) 27%,
+                var(--bg, #0b0c0e) 100%
+              ),
+              var(--bg, #0b0c0e);
+            transform-origin: 50% 50%;
+            will-change: transform, opacity;
+          }
+
+          .pi-camera::after {
+            content: "";
+            position: absolute;
+            inset: 0;
+            background: radial-gradient(
+              ellipse at 50% 48%,
+              transparent 24%,
+              color-mix(in srgb, var(--bg, #0b0c0e) 20%, transparent) 58%,
+              color-mix(in srgb, var(--bg, #0b0c0e) 88%, transparent) 100%
+            );
+          }
+
+          .pi-headline {
+            position: relative;
+            z-index: 1;
+            width: min(78cqw, 116cqh);
+            color: var(--fg, #f8fafc);
+            font-size: clamp(24px, 12cqw, 144px);
+            font-weight: 740;
+            line-height: 0.94;
+            letter-spacing: -0.055em;
+            text-align: center;
+            overflow-wrap: anywhere;
+            text-shadow: 0 1.5cqh 5cqh color-mix(in srgb, var(--bg, #0b0c0e) 62%, transparent);
+          }
+        </style>
+
+        <div
+          id="push-in-clip"
+          class="pi-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="pi-camera">
+            <div class="pi-headline"></div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var camera = root.querySelector(".pi-camera");
+            var headline = root.querySelector(".pi-headline");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var text = vars.text == null ? "Focus" : String(vars.text);
+            var intensity =
+              vars.intensity === "subtle" || vars.intensity === "bold"
+                ? vars.intensity
+                : "standard";
+            var scales = { subtle: 1.08, standard: 1.12, bold: 1.18 };
+            var finalScale = scales[intensity];
+
+            headline.textContent = text;
+
+            var IN_BASE = 0.8;
+            var OUT_BASE = 0.65;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var fixedDuration = IN_BASE + OUT_BASE;
+            var phaseScale = duration < fixedDuration ? duration / fixedDuration : 1;
+            var IN = IN_BASE * phaseScale;
+            var OUT = OUT_BASE * phaseScale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var OUT_START = IN + HOLD;
+            var inScale = HOLD > 0 ? 1 + (finalScale - 1) * 0.24 : finalScale;
+
+            var tl = gsap.timeline({ paused: true });
+
+            tl.fromTo(
+              camera,
+              { scale: 1, opacity: 1 },
+              { scale: inScale, opacity: 1, duration: IN, ease: "sine.inOut" },
+              0,
+            );
+            if (HOLD > 0) {
+              tl.to(camera, { scale: finalScale, duration: HOLD, ease: "none" }, IN);
+            }
+            tl.to(camera, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["push-in"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add push-in" />
+
+That writes one file: `compositions/components/push-in.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/push-in.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `camera` `push-in` `focus` `emphasize` `holdable`.
+
+## 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/components/radial-surround.mdx b/docs/catalog/components/radial-surround.mdx
new file mode 100644
index 0000000000..dbf48f1e8d
--- /dev/null
+++ b/docs/catalog/components/radial-surround.mdx
@@ -0,0 +1,474 @@
+---
+title: "Radial Surround"
+description: "Labeled hairline chips assemble around a centered subject on an elliptical ring, then optionally converge inward with a subtle edge dim. The center never moves: surrounded, not zoomed."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/radial-surround.html"
+  compositionId="radial-surround"
+  compositionSrc="compositions/components/radial-surround.html"
+  variables={[{"id":"center_label","type":"string","role":"content","label":"Center label","description":"Label on the default center token card.","default":"Your team"},{"id":"chips","type":"string","role":"content","label":"Chips","description":"Comma-separated chip labels that surround the center (up to 12).","default":"Docs,Tickets,Dashboards,Inbox,Chat,Sheets"},{"id":"close_in","type":"boolean","role":"timing","label":"Close in","description":"Converge the ring inward with a subtle edge dim after assembly. The center never moves.","default":true},{"id":"cues","type":"string","role":"timing","label":"Cues","description":"Comma-separated per-chip entrance times in seconds. Blank entries use the default cascade.","default":""},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Accent token family used by the center card tint.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"How the surrounded stage leaves the frame. Default none: the crowded hold ends the film.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
+>
+
+```html radial-surround.html
+<!doctype html>
+<!--
+  radial-surround: HyperFrames video primitive (problem setup)
+
+  Labeled hairline chips assemble around a centered subject on an elliptical
+  ring. Positions are baked exactly once via cos/sin before the timeline is
+  registered, so every seek lands on the same geometry. Chips enter with
+  staggered smooth settles (scale + fade, power3.out, no overshoot). With
+  close_in enabled the chips then converge inward toward the subject while a
+  subtle edge vignette dims the stage: the center NEVER moves. The subject is
+  surrounded, not zoomed.
+
+  Variables (declared in data-composition-variables below):
+    - center_label (string, default "Your team"): label on the default token
+      card. Ignored for layout when the center slot carries custom children.
+    - chips (string, default "Docs,Tickets,Dashboards,Inbox,Chat,Sheets"):
+      comma list of chip labels; up to 12 render, extras are dropped.
+    - close_in (boolean, default true): converge the ring inward with the
+      edge dim after assembly. false holds the wide ring instead.
+    - cues (string, default ""): comma-separated per-chip entrance times in
+      seconds relative to mount start. Blank or invalid entries fall back to
+      that chip's default cascade slot (~0.30s gap). Values are clamped so
+      every chip lands before the close-in (or the exit) begins.
+    - accent (green | blue | violet, default green): center card tint.
+      green routes to --brand, blue to --accent, violet to --accent-2.
+    - exit (none | fade | up, default none): frame roots own transitions;
+      the default crowded hold ends the film.
+
+  Envelope, fixed IN with elastic HOLD (never gsap.timeScale()):
+    IN    = center settle + chip cascade (+ close-in and vignette when
+            close_in is true); at defaults the converge lands at 4.50s.
+    HOLD  = dead still, elastic: everything after IN until OUT (or D).
+    OUT   = 0 when exit is "none"; else up to 0.45s fade / fade-up.
+    Entrance starts compress together when D is too short for the cascade;
+    the close-in window is reserved first so the converge always completes.
+
+  Slot: the runtime clones only this template. A fork that wants a custom
+  subject places its own children inside the [data-slot="center"] element;
+  when that element already has children the default token card is not
+  generated (chips, cues, close_in, and exit still apply, and the center
+  still never moves).
+
+  Mount contract: elastic root, no data-width/data-height, styled via #root
+  only, container-type: size, one paused timeline registered under the
+  literal "radial-surround" key. Deterministic and seek-safe: fromTo
+  entrances, no CSS transitions, no Date.now, no randomness.
+-->
+<html
+  lang="en"
+  data-composition-id="radial-surround"
+  data-composition-duration="5"
+  data-composition-variables='[
+    { "id": "center_label", "type": "string", "role": "content", "label": "Center label", "description": "Label on the default center token card.", "default": "Your team" },
+    { "id": "chips", "type": "string", "role": "content", "label": "Chips", "description": "Comma-separated chip labels that surround the center (up to 12).", "default": "Docs,Tickets,Dashboards,Inbox,Chat,Sheets" },
+    { "id": "close_in", "type": "boolean", "role": "timing", "label": "Close in", "description": "Converge the ring inward with a subtle edge dim after assembly. The center never moves.", "default": true },
+    { "id": "cues", "type": "string", "role": "timing", "label": "Cues", "description": "Comma-separated per-chip entrance times in seconds. Blank entries use the default cascade.", "default": "" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Accent token family used by the center card tint.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "How the surrounded stage leaves the frame. Default none: the crowded hold ends the film.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Radial Surround</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="radial-surround" data-duration="5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            background: var(--bg, transparent);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            pointer-events: none;
+          }
+
+          .rs-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+          }
+
+          .rs-stage {
+            position: absolute;
+            inset: 0;
+            will-change: transform, opacity;
+          }
+
+          .rs-center-layer {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+          }
+
+          .rs-center {
+            display: grid;
+            place-items: center;
+            will-change: transform, opacity;
+          }
+
+          .rs-center > img,
+          .rs-center > video {
+            max-width: 34cqw;
+            max-height: 30cqh;
+            object-fit: cover;
+            border-radius: var(--radius, 2.2cqmin);
+          }
+
+          .rs-card {
+            width: 28cqw;
+            min-height: 22cqh;
+            padding: var(--space-2, 2.2cqmin);
+            border: 0.16cqmin solid color-mix(in srgb, var(--rs-accent) 46%, var(--border, #475569));
+            border-radius: var(--radius, 2.2cqmin);
+            background: color-mix(in srgb, var(--surface, #131a24) 94%, var(--rs-accent));
+            box-shadow: 0 3cqh 9cqh color-mix(in srgb, var(--bg, #000000) 40%, transparent);
+          }
+
+          .rs-card-label {
+            overflow: hidden;
+            color: var(--fg, #f8fafc);
+            font-family: var(
+              --font-display,
+              var(--font-body, ui-sans-serif, system-ui, sans-serif)
+            );
+            font-size: var(--rs-center-font, 4cqmin);
+            font-weight: 600;
+            line-height: 1.15;
+            letter-spacing: 0.04em;
+            text-align: center;
+            white-space: nowrap;
+          }
+
+          .rs-ring {
+            position: absolute;
+            inset: 0;
+          }
+
+          /* Positioning wrapper: the baked ring offsets live in the --rs-ox
+             and --rs-oy custom properties (plain cq values) and the close-in
+             tweens THOSE, never x/y or a GSAP-written calc() string. GSAP
+             misconverts vertical cq units to px mid-tween when it has to
+             re-init a layout property under a seek, so the calc stays in the
+             stylesheet and only the var strings interpolate; the inner
+             chip's unitless scale and opacity are the only transforms. */
+          .rs-pos {
+            position: absolute;
+            top: calc(50% + var(--rs-oy, 0cqh));
+            left: calc(50% + var(--rs-ox, 0cqw));
+            width: max-content;
+            transform: translate(-50%, -50%);
+            will-change: top, left;
+          }
+
+          .rs-chip {
+            padding: 1.15cqmin 2.1cqmin;
+            border: 0.14cqmin solid var(--border, #475569);
+            border-radius: 0.6cqmin;
+            background: var(--surface, #131a24);
+            color: var(--fg, #f8fafc);
+            font-size: 2.1cqmin;
+            font-weight: 500;
+            line-height: 1;
+            letter-spacing: 0.16em;
+            text-transform: uppercase;
+            white-space: nowrap;
+            transform-origin: 50% 50%;
+            will-change: transform, opacity;
+          }
+
+          /* Close-in edge dim: very subtle, content stays legible. */
+          .rs-vignette {
+            position: absolute;
+            inset: 0;
+            background: radial-gradient(
+              ellipse at center,
+              transparent 60%,
+              color-mix(in srgb, var(--bg, #05070c) 34%, transparent) 100%
+            );
+            opacity: 0;
+            pointer-events: none;
+          }
+        </style>
+
+        <div
+          id="radial-surround-clip"
+          class="rs-clip clip"
+          data-start="0"
+          data-duration="5"
+          data-track-index="0"
+        >
+          <div class="rs-stage" role="img">
+            <div class="rs-center-layer">
+              <div class="rs-center" data-slot="center"></div>
+            </div>
+            <div class="rs-ring" aria-hidden="true"></div>
+            <div class="rs-vignette"></div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            // Literal id, never read off the DOM: the flattening step strips
+            // data-composition-id from the mounted root (see toggle-flip).
+            var compositionId = "radial-surround";
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".rs-stage");
+            var center = root.querySelector('[data-slot="center"]');
+            var ring = root.querySelector(".rs-ring");
+            var vignette = root.querySelector(".rs-vignette");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var centerLabel =
+              vars.center_label == null || String(vars.center_label).trim() === ""
+                ? "Your team"
+                : String(vars.center_label).trim();
+            var chipsValue =
+              vars.chips == null || String(vars.chips).trim() === ""
+                ? "Docs,Tickets,Dashboards,Inbox,Chat,Sheets"
+                : String(vars.chips);
+            var labels = chipsValue
+              .split(",")
+              .map(function (token) {
+                return token.trim();
+              })
+              .filter(function (token) {
+                return token !== "";
+              })
+              .slice(0, 12);
+            if (labels.length === 0)
+              labels = ["Docs", "Tickets", "Dashboards", "Inbox", "Chat", "Sheets"];
+
+            var closeIn = !(vars.close_in === false || vars.close_in === "false");
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            root.style.setProperty("--rs-accent", accentColors[accent]);
+
+            // Slot: a fork may author its own subject inside
+            // [data-slot="center"]; then the default token card is skipped.
+            if (center.children.length === 0) {
+              center.classList.add("rs-card");
+              var label = document.createElement("span");
+              label.className = "rs-card-label";
+              label.textContent = centerLabel;
+              center.appendChild(label);
+            }
+            stage.setAttribute("aria-label", centerLabel + ": " + labels.join(", "));
+
+            // Deterministic center-label fitting inside the 28cqw card.
+            var chars = Array.from(centerLabel).length;
+            var fontCqw = Math.min(3.4, 23 / (Math.max(1, chars) * 0.62));
+            root.style.setProperty("--rs-center-font", "min(" + fontCqw.toFixed(3) + "cqw, 6cqh)");
+
+            /* Elliptical ring, baked once (deterministic). FAR is the wide
+               assembly ring; NEAR is the close-in ring, pressing corner chips
+               up against the 28cqw center card so the crowding reads (chips
+               paint above the card). Angles alternate sides from the top so
+               consecutive entries pop on opposite compass points. */
+            var FAR_RX = 30; /* cqw */
+            var FAR_RY = 31; /* cqh */
+            var NEAR_RX = 20;
+            var NEAR_RY = 23;
+            var count = labels.length;
+            var step = 360 / count;
+            function ringPosition(index, rx, ry) {
+              var degrees = -90 + Math.ceil(index / 2) * step * (index % 2 === 1 ? 1 : -1);
+              var a = (degrees * Math.PI) / 180;
+              return {
+                ox: (Math.cos(a) * rx).toFixed(3) + "cqw",
+                oy: (Math.sin(a) * ry).toFixed(3) + "cqh",
+              };
+            }
+            var positions = [];
+            var chips = labels.map(function (text, index) {
+              var pos = document.createElement("div");
+              pos.className = "rs-pos";
+              var far = ringPosition(index, FAR_RX, FAR_RY);
+              pos.style.setProperty("--rs-ox", far.ox);
+              pos.style.setProperty("--rs-oy", far.oy);
+              var chip = document.createElement("div");
+              chip.className = "rs-chip";
+              chip.textContent = text;
+              pos.appendChild(chip);
+              ring.appendChild(pos);
+              positions.push(pos);
+              return chip;
+            });
+
+            // RETIME RANGE: fixed IN cascade (+ close-in), elastic still HOLD,
+            // optional OUT. The close-in window is reserved off the top so the
+            // converge always completes inside the clip.
+            var CENTER_AT = 0.05;
+            var BASE_START = 0.9;
+            var GAP = 0.3;
+            var ENTRY = 0.55;
+            var CLOSE_DUR = 0.75;
+            var CLOSE_STAG = 0.09;
+            var BREATH = 0.35;
+            var OUT_BASE = 0.45;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "5"));
+            var OUT = exit === "none" ? 0 : Math.min(OUT_BASE, duration * 0.2);
+            var avail = duration - OUT;
+            var closeSpan = closeIn ? (count - 1) * CLOSE_STAG + CLOSE_DUR : 0;
+            var latestStart = Math.max(0, avail - ENTRY - closeSpan);
+            // Compress the cascade together when the duration cannot fit it.
+            var gap =
+              count > 1 ? Math.min(GAP, Math.max(0, latestStart - BASE_START) / (count - 1)) : GAP;
+
+            var cueList = String(vars.cues == null ? "" : vars.cues).split(",");
+            var starts = chips.map(function (chip, index) {
+              var cue = Number((cueList[index] || "").trim());
+              var hasCue = (cueList[index] || "").trim() !== "" && Number.isFinite(cue);
+              var start = hasCue ? cue : Math.min(BASE_START, latestStart) + gap * index;
+              return Math.max(0, Math.min(start, latestStart));
+            });
+
+            var tl = gsap.timeline({ paused: true });
+
+            // Center seats first: gentle fade + subtle scale settle. After
+            // this the center NEVER moves again (surrounded, not zoomed).
+            gsap.set(center, { opacity: 0, scale: 0.94 });
+            tl.fromTo(
+              center,
+              { opacity: 0, scale: 0.94 },
+              {
+                opacity: 1,
+                scale: 1,
+                duration: Math.min(0.7, Math.max(0.2, avail * 0.25)),
+                ease: "power3.out",
+              },
+              Math.min(CENTER_AT, latestStart),
+            );
+
+            // IN: chips assemble on the FAR ring in a measured stagger.
+            // Explicit both-endpoints state so any seek is exact.
+            chips.forEach(function (chip, index) {
+              gsap.set(chip, { scale: 0, opacity: 0 });
+              tl.fromTo(
+                chip,
+                { scale: 0, opacity: 0 },
+                { scale: 1, opacity: 1, duration: ENTRY, ease: "power3.out" },
+                starts[index],
+              );
+            });
+
+            // Close-in: chips converge from all compass points toward the
+            // subject while the edges dim slightly. The center holds still.
+            if (closeIn) {
+              var maxEntryEnd =
+                starts.reduce(function (max, start) {
+                  return Math.max(max, start);
+                }, 0) + ENTRY;
+              var closeStart = Math.max(
+                maxEntryEnd,
+                Math.min(maxEntryEnd + BREATH, avail - closeSpan),
+              );
+              positions.forEach(function (pos, index) {
+                var far = ringPosition(index, FAR_RX, FAR_RY);
+                var near = ringPosition(index, NEAR_RX, NEAR_RY);
+                tl.fromTo(
+                  pos,
+                  { "--rs-ox": far.ox, "--rs-oy": far.oy },
+                  {
+                    "--rs-ox": near.ox,
+                    "--rs-oy": near.oy,
+                    duration: CLOSE_DUR,
+                    ease: "power2.inOut",
+                  },
+                  closeStart + index * CLOSE_STAG,
+                );
+              });
+              gsap.set(vignette, { opacity: 0 });
+              tl.fromTo(
+                vignette,
+                { opacity: 0 },
+                {
+                  opacity: 1,
+                  duration: Math.min(0.9, Math.max(0.2, closeSpan)),
+                  ease: "power1.inOut",
+                },
+                closeStart + 0.05,
+              );
+            }
+
+            // HOLD: intentionally still. Crowded, quiet, nothing floats.
+
+            // OUT: the whole surrounded stage leaves together.
+            if (exit !== "none") {
+              var OUT_START = duration - OUT;
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+              if (exit === "up") {
+                // yPercent, not a cq-unit y: percent transforms seek exactly.
+                tl.to(stage, { yPercent: -4, duration: OUT, ease: "power2.in" }, OUT_START);
+              }
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add radial-surround" />
+
+That writes one file: `compositions/components/radial-surround.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/radial-surround.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `problem-setup` `radial` `ring` `surround` `converge`.
+
+## 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/components/rgb-glitch-text.mdx b/docs/catalog/components/rgb-glitch-text.mdx
new file mode 100644
index 0000000000..f8be800a4d
--- /dev/null
+++ b/docs/catalog/components/rgb-glitch-text.mdx
@@ -0,0 +1,149 @@
+---
+title: "RGB Glitch Text"
+description: "RGB-offset text copies jitter briefly for a controlled glitch window."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/rgb-glitch-text.html"
+  compositionId="rgb-glitch-text"
+  compositionSrc="compositions/components/rgb-glitch-text.html"
+  variables={[{"id":"text","type":"string","role":"content","label":"Text","description":"The word shown on all three stacked copies.","default":"GLITCH","maxLength":24},{"id":"intensity","type":"enum","role":"motion","label":"Intensity","description":"Scales the red and cyan offsets the timeline drives, so the split reads as a hairline or a hard tear.","default":"standard","options":[{"value":"subtle","label":"Subtle"},{"value":"standard","label":"Standard"},{"value":"extreme","label":"Extreme"}]},{"id":"tone","type":"enum","role":"style","label":"Tone","description":"Colour of the solid copy the two ghosts split away from: ink for light frames, paper for dark ones, accent rides --brand.","default":"ink","options":[{"value":"ink","label":"Ink"},{"value":"paper","label":"Paper"},{"value":"accent","label":"Accent"}]}]}
+>
+
+```html rgb-glitch-text.html
+<!--
+  RGB Glitch Text - remocn typography primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Drive the timeline
+  integration from a paused GSAP timeline so renders remain deterministic.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result as a custom property
+  the CSS above consumes. The timeline recipe below is untouched by them: it
+  keeps driving one red offset and one cyan offset, and intensity decides how
+  far those offsets actually carry.
+
+    - text (any short word, default "GLITCH"): the word set on all three
+      stacked copies at once, so they stay in register.
+    - intensity (subtle | standard | extreme, default standard): scales the
+      driven offsets, from a hairline fringe to a hard tear. Both offsets are
+      zero at rest, so this one only shows once the timeline runs.
+    - tone (ink | paper | accent, default ink): colour of the solid copy the
+      red and cyan ghosts split away from. ink is near-black for light frames,
+      paper near-white for dark ones, accent rides --brand.
+
+  On every default the result is identical to the original: near-black GLITCH
+  with red and cyan copies tearing 8px either way.
+-->
+
+<div
+  class="hf-remocn-rgb-glitch-text"
+  data-composition-variables='[
+    { "id": "text", "type": "string", "role": "content", "label": "Text", "description": "The word shown on all three stacked copies.", "default": "GLITCH", "maxLength": 24 },
+    { "id": "intensity", "type": "enum", "role": "motion", "label": "Intensity", "description": "Scales the red and cyan offsets the timeline drives, so the split reads as a hairline or a hard tear.", "default": "standard", "options": [{ "value": "subtle", "label": "Subtle" }, { "value": "standard", "label": "Standard" }, { "value": "extreme", "label": "Extreme" }] },
+    { "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Colour of the solid copy the two ghosts split away from: ink for light frames, paper for dark ones, accent rides --brand.", "default": "ink", "options": [{ "value": "ink", "label": "Ink" }, { "value": "paper", "label": "Paper" }, { "value": "accent", "label": "Accent" }] }
+  ]'
+>
+  <span>GLITCH</span><span>GLITCH</span><strong>GLITCH</strong>
+</div>
+
+<style>
+  .hf-remocn-rgb-glitch-text {
+    color: var(--hf-glitch-ink, #18181b);
+    font-family: Inter, system-ui, sans-serif;
+    font-weight: 900;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-rgb-glitch-text {
+    position: relative;
+    width: 420px;
+    height: 82px;
+    font-size: 72px;
+    line-height: 1;
+  }
+  .hf-remocn-rgb-glitch-text span,
+  .hf-remocn-rgb-glitch-text strong {
+    position: absolute;
+    inset: 0;
+  }
+  .hf-remocn-rgb-glitch-text span:first-child {
+    color: #ef4444;
+    transform: translateX(calc(var(--hf-glitch-red, 0px) * var(--hf-glitch-reach, 1)));
+  }
+  .hf-remocn-rgb-glitch-text span:nth-child(2) {
+    color: #22d3ee;
+    transform: translateX(calc(var(--hf-glitch-blue, 0px) * var(--hf-glitch-reach, 1)));
+  }
+  .hf-remocn-rgb-glitch-text strong {
+    color: var(--hf-glitch-ink, #18181b);
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    var reaches = { subtle: 0.5, standard: 1, extreme: 2.25 };
+    var tones = {
+      ink: "#18181b",
+      paper: "#fafafa",
+      accent: "var(--brand, #34d399)",
+    };
+
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var reach = reaches[pick(reaches, vars.intensity, "standard")];
+    var tone = tones[pick(tones, vars.tone, "ink")];
+    var text =
+      typeof vars.text === "string" && vars.text.trim() !== "" ? vars.text.trim() : "GLITCH";
+
+    var roots = document.querySelectorAll(".hf-remocn-rgb-glitch-text");
+    for (var i = 0; i < roots.length; i += 1) {
+      roots[i].style.setProperty("--hf-glitch-reach", String(reach));
+      roots[i].style.setProperty("--hf-glitch-ink", tone);
+      var copies = roots[i].querySelectorAll("span, strong");
+      for (var j = 0; j < copies.length; j += 1) {
+        copies[j].textContent = text;
+      }
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.to('.hf-remocn-rgb-glitch-text', { opacity: 1, duration: 0.01 }, startTime); tl.to('.hf-remocn-rgb-glitch-text', { '--hf-glitch-red': '-8px', '--hf-glitch-blue': '8px', duration: 0.06, repeat: 5, yoyo: true, ease: 'steps(1)' }, startTime + 0.1);
+-->
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add rgb-glitch-text" />
+
+That writes one file: `compositions/components/rgb-glitch-text.html`.
+
+## Usage
+
+Open `compositions/components/rgb-glitch-text.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `remocn-port` `typography`.
+
+## 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/components/rubber-band-bumper.mdx b/docs/catalog/components/rubber-band-bumper.mdx
new file mode 100644
index 0000000000..94e86ec5bd
--- /dev/null
+++ b/docs/catalog/components/rubber-band-bumper.mdx
@@ -0,0 +1,373 @@
+---
+title: "Rubber Band Bumper"
+description: "An outgoing panel pulls against increasing resistance, holds at tension, then snaps past an edge with overshoot as the incoming panel settles behind it."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/rubber-band-bumper.html"
+  compositionId="rubber-band-bumper"
+  compositionSrc="compositions/components/rubber-band-bumper.html"
+  variables={[{"id":"direction","type":"enum","role":"content","label":"Direction","description":"Edge the outgoing panel releases through.","default":"up","options":[{"value":"up","label":"Up"},{"value":"left","label":"Left"}]},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Color applied to the tension bands and incoming panel.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]}]}
+>
+
+```html rubber-band-bumper.html
+<!doctype html>
+<!--
+  rubber-band-bumper: HyperFrames video primitive
+
+  The outgoing panel is pulled opposite its exit direction in progressively
+  smaller steps, visibly loading two accent bands. After a still threshold
+  hold, it releases past the chosen edge with overshoot while the incoming
+  panel settles into place behind it.
+
+  Variables:
+    direction: up or left exit direction
+    accent: green, blue, or violet tension color
+
+  Envelope, fixed IN and OUT with elastic HOLD:
+    IN_BASE  = 1.25s, five equal pull beats add decreasing displacement
+    HOLD     = max(0, D - IN - OUT), stillness at maximum tension
+    OUT_BASE = 0.95s, overshooting release and incoming-panel settle
+    If D is shorter than IN_BASE + OUT_BASE, IN and OUT compress together.
+    The timeline is never time-scaled.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, and has no data-width or
+  data-height. One paused timeline registers under the literal
+  rubber-band-bumper key.
+-->
+<html
+  lang="en"
+  data-composition-id="rubber-band-bumper"
+  data-composition-duration="2.5"
+  data-composition-variables='[
+    { "id": "direction", "type": "enum", "role": "content", "label": "Direction", "description": "Edge the outgoing panel releases through.", "default": "up", "options": [{ "value": "up", "label": "Up" }, { "value": "left", "label": "Left" }] },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Color applied to the tension bands and incoming panel.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Rubber Band Bumper</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="rubber-band-bumper" data-duration="2.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .rbb-clip,
+          .rbb-panel {
+            position: absolute;
+            inset: 0;
+            width: 100cqw;
+            height: 100cqh;
+          }
+
+          .rbb-clip {
+            overflow: hidden;
+            background: var(--bg, #0b0c0e);
+          }
+
+          .rbb-panel {
+            display: grid;
+            place-items: center;
+            will-change: transform, opacity;
+          }
+
+          .rbb-incoming {
+            background:
+              radial-gradient(
+                circle at 50% 44%,
+                color-mix(in srgb, var(--rbb-accent) 20%, transparent),
+                transparent 42%
+              ),
+              linear-gradient(145deg, #172033, #0c111b 72%);
+          }
+
+          .rbb-outgoing {
+            z-index: 2;
+            background: linear-gradient(145deg, #263247, #121925 68%);
+            border: 0.18cqmin solid color-mix(in srgb, #94a3b8 30%, transparent);
+            box-shadow: 0 2.8cqh 8cqh rgba(0, 0, 0, 0.48);
+          }
+
+          .rbb-copy {
+            display: grid;
+            justify-items: center;
+            gap: 2.4cqh;
+            max-width: 72cqw;
+            text-align: center;
+          }
+
+          .rbb-kicker {
+            padding: 1cqh 1.4cqw;
+            border: 0.14cqmin solid color-mix(in srgb, var(--rbb-accent) 68%, transparent);
+            border-radius: 999px;
+            color: var(--rbb-accent);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
+            font-size: clamp(11px, 2.2cqmin, 24px);
+            font-weight: 700;
+            letter-spacing: 0.16em;
+            line-height: 1;
+          }
+
+          .rbb-title {
+            margin: 0;
+            color: #f8fafc;
+            font-size: clamp(26px, 8.8cqmin, 92px);
+            font-weight: 760;
+            letter-spacing: -0.045em;
+            line-height: 0.95;
+          }
+
+          .rbb-subtitle {
+            margin: 0;
+            color: #b6c0d0;
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            font-size: clamp(13px, 3.1cqmin, 30px);
+            font-weight: 520;
+            line-height: 1.25;
+          }
+
+          .rbb-band {
+            position: absolute;
+            z-index: 1;
+            border-radius: 999px;
+            background: var(--rbb-accent);
+            box-shadow: 0 0 2.2cqmin color-mix(in srgb, var(--rbb-accent) 72%, transparent);
+            will-change: transform, opacity;
+          }
+
+          #root.rbb-left .rbb-band {
+            left: 0;
+            width: 14cqw;
+            height: 1.1cqh;
+            transform-origin: 0 50%;
+          }
+
+          #root.rbb-left .rbb-band-a {
+            top: 34cqh;
+          }
+
+          #root.rbb-left .rbb-band-b {
+            top: 66cqh;
+          }
+
+          #root.rbb-up .rbb-band {
+            top: 0;
+            width: 1.1cqw;
+            height: 14cqh;
+            transform-origin: 50% 0;
+          }
+
+          #root.rbb-up .rbb-band-a {
+            left: 34cqw;
+          }
+
+          #root.rbb-up .rbb-band-b {
+            left: 66cqw;
+          }
+        </style>
+
+        <div
+          id="rubber-band-bumper-clip"
+          class="rbb-clip clip"
+          data-start="0"
+          data-duration="2.5"
+          data-track-index="0"
+        >
+          <section class="rbb-panel rbb-incoming">
+            <div class="rbb-copy">
+              <span class="rbb-kicker">NEXT</span>
+              <h2 class="rbb-title">Clean release</h2>
+              <p class="rbb-subtitle">The incoming scene settles behind the snap.</p>
+            </div>
+          </section>
+
+          <span class="rbb-band rbb-band-a" aria-hidden="true"></span>
+          <span class="rbb-band rbb-band-b" aria-hidden="true"></span>
+
+          <section class="rbb-panel rbb-outgoing">
+            <div class="rbb-copy">
+              <span class="rbb-kicker">CURRENT</span>
+              <h2 class="rbb-title">Hold the tension</h2>
+              <p class="rbb-subtitle">Each pull travels less as resistance builds.</p>
+            </div>
+          </section>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var outgoing = root.querySelector(".rbb-outgoing");
+            var incoming = root.querySelector(".rbb-incoming");
+            var bands = root.querySelectorAll(".rbb-band");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var direction = vars.direction === "left" ? "left" : "up";
+            var accentColors = {
+              green: "var(--brand, #6ee7b7)",
+              blue: "var(--accent, #60a5fa)",
+              violet: "var(--accent-2, #a78bfa)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var motionByDirection = {
+              up: {
+                rootClass: "rbb-up",
+                axis: "y",
+                crossAxis: "x",
+                bandAxis: "scaleY",
+                outgoingArc: "3%",
+                incomingArc: "-1.6%",
+              },
+              left: {
+                rootClass: "rbb-left",
+                axis: "x",
+                crossAxis: "y",
+                bandAxis: "scaleX",
+                outgoingArc: "-3%",
+                incomingArc: "1.6%",
+              },
+            };
+            var motion = motionByDirection[direction];
+
+            root.classList.add(motion.rootClass);
+            root.style.setProperty("--rbb-accent", accentColors[accent]);
+
+            var IN_BASE = 1.25;
+            var OUT_BASE = 0.95;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "2.5"));
+            var totalBase = IN_BASE + OUT_BASE;
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var OUT_START = IN + HOLD;
+
+            // One authored table owns the resistance curve. Equal-time steps
+            // add 5, 3.5, 2, 1.25, then 0.5 percent displacement.
+            var pullPositions = [5, 8.5, 10.5, 11.75, 12.25];
+            var segmentDuration = IN / pullPositions.length;
+            var exitPosition = "-112%";
+            var incomingStart = "-5%";
+
+            gsap.set(outgoing, { x: "0%", y: "0%" });
+            gsap.set(incoming, { x: "0%", y: "0%", scale: 0.985, opacity: 0.82 });
+            var incomingOffset = {};
+            incomingOffset[motion.axis] = incomingStart;
+            gsap.set(incoming, incomingOffset);
+            gsap.set(bands, { opacity: 0.7, scaleX: 1, scaleY: 1 });
+            var bandStart = {};
+            bandStart[motion.bandAxis] = 0.08;
+            gsap.set(bands, bandStart);
+
+            var tl = gsap.timeline({ paused: true });
+
+            pullPositions.forEach(function (position, index) {
+              var at = index * segmentDuration;
+              var panelTween = { duration: segmentDuration, ease: "power2.out" };
+              var bandTween = { duration: segmentDuration, ease: "power2.out" };
+              panelTween[motion.axis] = position + "%";
+              bandTween[motion.bandAxis] = 0.08 + position / 14;
+              tl.to(outgoing, panelTween, at);
+              tl.to(bands, bandTween, at);
+            });
+
+            var releaseDuration = OUT * 0.84;
+            var releaseTween = { duration: releaseDuration, ease: "back.out(1.7)" };
+            var outgoingArc = {
+              duration: releaseDuration * 0.5,
+              ease: "sine.inOut",
+              yoyo: true,
+              repeat: 1,
+            };
+            releaseTween[motion.axis] = exitPosition;
+            outgoingArc[motion.crossAxis] = motion.outgoingArc;
+            tl.to(outgoing, releaseTween, OUT_START);
+            tl.to(outgoing, outgoingArc, OUT_START);
+            var bandRelease = {
+              opacity: 0,
+              duration: OUT * 0.28,
+              ease: "power4.out",
+            };
+            bandRelease[motion.bandAxis] = 0.04;
+            tl.to(bands, bandRelease, OUT_START);
+            var incomingDuration = OUT * 0.78;
+            var incomingSettle = {
+              scale: 1,
+              opacity: 1,
+              duration: incomingDuration,
+              ease: "back.out(1.7)",
+            };
+            var incomingArc = {
+              duration: incomingDuration * 0.5,
+              ease: "sine.inOut",
+              yoyo: true,
+              repeat: 1,
+            };
+            incomingSettle[motion.axis] = "0%";
+            incomingArc[motion.crossAxis] = motion.incomingArc;
+            tl.to(incoming, incomingSettle, OUT_START);
+            tl.to(incoming, incomingArc, OUT_START);
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["rubber-band-bumper"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add rubber-band-bumper" />
+
+That writes one file: `compositions/components/rubber-band-bumper.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/rubber-band-bumper.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `transition` `rubber-band` `resistance` `overshoot`.
+
+## 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/components/scan-band.mdx b/docs/catalog/components/scan-band.mdx
new file mode 100644
index 0000000000..d6dd129789
--- /dev/null
+++ b/docs/catalog/components/scan-band.mdx
@@ -0,0 +1,258 @@
+---
+title: "Scan Band"
+description: "A diagonal distortion band sweeps once across a clean wordmark, revealing clipped red and cyan offsets only inside the moving band."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/scan-band.html"
+  compositionId="scan-band"
+  compositionSrc="compositions/components/scan-band.html"
+  variables={[{"id":"wordmark","type":"string","role":"content","label":"Wordmark","description":"Text displayed by the scan effect.","default":"HYPERFRAMES"},{"id":"band_angle","type":"number","role":"layout","label":"Band angle","description":"Diagonal angle of the distortion band in degrees.","default":12,"min":-30,"max":30,"step":1,"unit":"deg"}]}
+>
+
+```html scan-band.html
+<!doctype html>
+<!--
+  scan-band: HyperFrames video primitive
+
+  A single diagonal distortion band crosses a clean wordmark. Inside the
+  band, three clipped clones create red and cyan separation plus a small
+  horizontal displacement. Everywhere outside the band remains clean.
+
+  Variables:
+    - wordmark (string, default "HYPERFRAMES"): displayed text.
+    - band_angle (number, default 12): diagonal band angle in degrees.
+
+  Envelope:
+    IN_BASE  = 0.45s, the clean wordmark fades into place.
+    HOLD     = elastic, the band sweeps once, then leaves a clean wordmark.
+    OUT_BASE = 0.45s, the clean wordmark fades away.
+    If the duration is shorter than IN_BASE + OUT_BASE, IN and OUT compress
+    together and HOLD becomes zero. Only HOLD grows for longer mounts.
+
+  Mount contract: the runtime clones only this template. #root fills the
+  host box, establishes the container query basis, and registers one paused
+  timeline under the hardcoded scan-band id.
+-->
+<html
+  lang="en"
+  data-composition-id="scan-band"
+  data-composition-duration="3.5"
+  data-composition-variables='[
+    { "id": "wordmark", "type": "string", "role": "content", "label": "Wordmark", "description": "Text displayed by the scan effect.", "default": "HYPERFRAMES" },
+    { "id": "band_angle", "type": "number", "role": "layout", "label": "Band angle", "description": "Diagonal angle of the distortion band in degrees.", "default": 12, "min": -30, "max": 30, "step": 1, "unit": "deg" }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Scan Band</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="scan-band" data-duration="3.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            background: var(--bg, #0b0c0e);
+            color: var(--fg, #f7f8fa);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .sb-clip,
+          .sb-stage,
+          .sb-band,
+          .sb-clone {
+            position: absolute;
+            inset: 0;
+          }
+
+          .sb-clip,
+          .sb-stage,
+          .sb-clone {
+            display: grid;
+            place-items: center;
+          }
+
+          .sb-stage {
+            opacity: 0;
+          }
+
+          .sb-wordmark,
+          .sb-clone {
+            font-size: clamp(28px, 13cqw, 150px);
+            font-weight: 850;
+            line-height: 0.86;
+            letter-spacing: -0.065em;
+            white-space: nowrap;
+          }
+
+          .sb-wordmark {
+            color: var(--fg, #f7f8fa);
+            text-shadow: 0 1.2cqh 4cqh color-mix(in srgb, #000 45%, transparent);
+          }
+
+          .sb-band {
+            --sb-band-position: -60%;
+            --sb-half: 6%;
+            --sb-lean: 10.6%;
+            overflow: hidden;
+            clip-path: polygon(
+              calc(var(--sb-band-position) - var(--sb-half) - var(--sb-lean)) 0%,
+              calc(var(--sb-band-position) + var(--sb-half) - var(--sb-lean)) 0%,
+              calc(var(--sb-band-position) + var(--sb-half) + var(--sb-lean)) 100%,
+              calc(var(--sb-band-position) - var(--sb-half) + var(--sb-lean)) 100%
+            );
+            will-change: clip-path;
+          }
+
+          .sb-clone {
+            text-shadow: none;
+          }
+
+          .sb-clone-red {
+            color: #ff3158;
+            opacity: 0.9;
+            transform: translateX(-0.8cqw);
+          }
+
+          .sb-clone-cyan {
+            color: #36efff;
+            opacity: 0.9;
+            transform: translateX(1.7cqw);
+          }
+
+          .sb-clone-core {
+            color: var(--fg, #f7f8fa);
+            transform: translateX(0.65cqw);
+          }
+        </style>
+
+        <div
+          id="scan-band-clip"
+          class="sb-clip clip"
+          data-start="0"
+          data-duration="3.5"
+          data-track-index="0"
+        >
+          <div class="sb-stage" role="img">
+            <span class="sb-wordmark"></span>
+            <div class="sb-band" aria-hidden="true">
+              <span class="sb-clone sb-clone-red"></span>
+              <span class="sb-clone sb-clone-cyan"></span>
+              <span class="sb-clone sb-clone-core"></span>
+            </div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".sb-stage");
+            var wordmark = root.querySelector(".sb-wordmark");
+            var band = root.querySelector(".sb-band");
+            var clones = root.querySelectorAll(".sb-clone");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var text = vars.wordmark == null ? "HYPERFRAMES" : String(vars.wordmark);
+            var angleValue = vars.band_angle;
+            var bandAngle = Number.isFinite(angleValue)
+              ? Math.max(-30, Math.min(30, angleValue))
+              : 12;
+
+            wordmark.textContent = text;
+            stage.setAttribute("aria-label", text);
+            clones.forEach(function (clone) {
+              clone.textContent = text;
+            });
+
+            var lean = Math.tan((bandAngle * Math.PI) / 180) * 50;
+            band.style.setProperty("--sb-lean", lean.toFixed(3) + "%");
+
+            var IN_BASE = 0.45;
+            var OUT_BASE = 0.45;
+            var SWEEP_BASE = 1.65;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "3.5"));
+            var fixedTotal = IN_BASE + OUT_BASE;
+            var phaseScale = duration < fixedTotal ? duration / fixedTotal : 1;
+            var IN = IN_BASE * phaseScale;
+            var OUT = OUT_BASE * phaseScale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var OUT_START = IN + HOLD;
+            var SWEEP = Math.min(SWEEP_BASE, HOLD);
+
+            gsap.set(stage, { opacity: 0 });
+            gsap.set(band, { "--sb-band-position": "-60%" });
+
+            var tl = gsap.timeline({ paused: true });
+            tl.to(stage, { opacity: 1, duration: IN, ease: "power2.out" }, 0);
+
+            if (SWEEP > 0) {
+              tl.fromTo(
+                band,
+                { "--sb-band-position": "-60%" },
+                {
+                  "--sb-band-position": "160%",
+                  duration: SWEEP,
+                  ease: "power2.out",
+                },
+                IN,
+              );
+            }
+
+            tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines["scan-band"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add scan-band" />
+
+That writes one file: `compositions/components/scan-band.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/scan-band.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `typography` `scan` `chromatic` `distortion` `wordmark`.
+
+## 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/components/scramble-reveal.mdx b/docs/catalog/components/scramble-reveal.mdx
new file mode 100644
index 0000000000..ccba6d1e62
--- /dev/null
+++ b/docs/catalog/components/scramble-reveal.mdx
@@ -0,0 +1,331 @@
+---
+title: "Scramble Reveal"
+description: "A deterministic hacker-style text reveal that cycles fixed glyph rows and locks the target string from left to right."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/scramble-reveal.html"
+  compositionId="scramble-reveal"
+  compositionSrc="compositions/components/scramble-reveal.html"
+  variables={[{"id":"text","type":"string","role":"content","label":"Text","description":"Target string that resolves from deterministic wrong glyphs.","default":"HYPERFRAMES"},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Color used by the text, prefix, and optional terminal frame.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"style","type":"enum","role":"style","label":"Style","description":"Terminal frame or clean text-only presentation.","default":"terminal","options":[{"value":"terminal","label":"Terminal"},{"value":"clean","label":"Clean"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Optional departure. Default none: the locked string holds until the frame cuts.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
+>
+
+```html scramble-reveal.html
+<!doctype html>
+<!--
+  scramble-reveal: HyperFrames video primitive (text effects / reveal)
+
+  A target string begins as deterministic wrong glyphs, then resolves one
+  character at a time from left to right. Every visible frame comes from one
+  fixed-seed LCG table built before the timeline is registered.
+
+  Variables:
+    - text (string, default "HYPERFRAMES"): the target string.
+    - accent (green | blue | violet, default "green"): text and frame color.
+    - style (terminal | clean, default "terminal"): optional terminal frame.
+    - exit (none | fade | up, default "none"): optional departure.
+
+  Envelope, fixed IN and OUT with elastic HOLD only:
+    IN_BASE  = 1.65s, curved arrival and the complete left-to-right lock
+    HOLD     = max(0, D - IN - OUT), subtle drift followed by 0.30s stillness
+    OUT_BASE = 0.45s departure when exit is fade or up, 0s when exit is
+               none (the default: the locked string holds until the cut)
+    If D is shorter than IN_BASE + OUT_BASE, IN and OUT compress together.
+    The timeline is never time-scaled.
+
+  Determinism: frameTable is computed exactly once during synchronous
+  timeline construction from fixed LCG seed 0x27c0ffee. Timeline sets only
+  read authored rows from that table, so repeated or reverse seeks produce
+  the same string for the same time.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, has no data-width or data-height,
+  and registers one paused timeline under the literal scramble-reveal key.
+-->
+<html
+  lang="en"
+  data-composition-id="scramble-reveal"
+  data-composition-duration="3"
+  data-composition-variables='[
+    { "id": "text", "type": "string", "role": "content", "label": "Text", "description": "Target string that resolves from deterministic wrong glyphs.", "default": "HYPERFRAMES" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Color used by the text, prefix, and optional terminal frame.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "style", "type": "enum", "role": "style", "label": "Style", "description": "Terminal frame or clean text-only presentation.", "default": "terminal", "options": [{ "value": "terminal", "label": "Terminal" }, { "value": "clean", "label": "Clean" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the locked string holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Scramble Reveal</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="scramble-reveal" data-duration="3" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            pointer-events: none;
+          }
+
+          .sr-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .sr-stage {
+            display: block;
+            width: 88cqw;
+            max-width: 88cqw;
+            will-change: transform, opacity;
+          }
+
+          .sr-shell {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            min-height: 34cqh;
+            padding: var(--space-3, 5cqh) var(--space-3, 5cqw);
+            overflow: hidden;
+            border: 0.16cqmin solid color-mix(in srgb, var(--sr-accent) 58%, var(--border, #475569));
+            border-radius: var(--radius, 2.4cqmin);
+            background: color-mix(in srgb, var(--surface, #0b1016) 92%, var(--sr-accent));
+            box-shadow:
+              0 3.5cqh 10cqh color-mix(in srgb, var(--bg, #000000) 42%, transparent),
+              inset 0 0 4cqh color-mix(in srgb, var(--sr-accent) 7%, transparent);
+          }
+
+          .sr-prefix {
+            flex: 0 0 auto;
+            margin-right: var(--space-1, 1.8cqw);
+            color: color-mix(in srgb, var(--sr-accent) 78%, var(--fg, #ffffff));
+            font-size: calc(var(--sr-font-size) * 0.74);
+            font-weight: 700;
+            line-height: 1;
+            opacity: 0.78;
+          }
+
+          .sr-text {
+            display: block;
+            min-width: 0;
+            overflow: hidden;
+            color: var(--sr-accent);
+            font-size: var(--sr-font-size);
+            font-weight: 780;
+            line-height: 1;
+            letter-spacing: 0.055em;
+            text-align: center;
+            text-shadow: 0 0 2.8cqh color-mix(in srgb, var(--sr-accent) 34%, transparent);
+            white-space: pre;
+          }
+
+          .sr-stage.sr-clean .sr-shell {
+            min-height: 26cqh;
+            padding: var(--space-2, 3cqh) var(--space-2, 2cqw);
+            border-color: transparent;
+            background: transparent;
+            box-shadow: none;
+          }
+
+          .sr-stage.sr-clean .sr-prefix {
+            display: none;
+          }
+        </style>
+
+        <div
+          id="scramble-reveal-clip"
+          class="sr-clip clip"
+          data-start="0"
+          data-duration="3"
+          data-track-index="0"
+        >
+          <div class="sr-stage" role="img">
+            <div class="sr-shell">
+              <span class="sr-prefix" aria-hidden="true">&gt;_</span>
+              <span class="sr-text" aria-hidden="true"></span>
+            </div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".sr-stage");
+            var textElement = root.querySelector(".sr-text");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var text = vars.text == null ? "HYPERFRAMES" : String(vars.text);
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme (green/blue/violet must
+            // not collapse into one themed accent).
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var style = vars.style === "clean" ? "clean" : "terminal";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            root.style.setProperty("--sr-accent", accentColors[accent]);
+            stage.classList.toggle("sr-clean", style === "clean");
+            stage.setAttribute("aria-label", text);
+
+            var characters = Array.from(text);
+            var fittedCqw = Math.min(11, 118 / Math.max(1, characters.length));
+            root.style.setProperty("--sr-font-size", "min(" + fittedCqw.toFixed(3) + "cqw, 24cqh)");
+
+            var IN_BASE = 1.65;
+            var OUT_BASE = exit === "none" ? 0 : 0.45;
+            var ARRIVAL_BASE = 0.42;
+            var LOCK_TAIL_BASE = 0.15;
+            var STILLNESS = 0.3;
+            var FPS = 30;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "3"));
+            var totalBase = Math.max(0.001, IN_BASE + OUT_BASE);
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var ARRIVAL = ARRIVAL_BASE * scale;
+            var LOCK_TAIL = LOCK_TAIL_BASE * scale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var HOLD_START = IN;
+            var OUT_START = IN + HOLD;
+            var REVEAL_DURATION = Math.max(0, IN - LOCK_TAIL);
+            var lastFrame = Math.max(1, Math.round(REVEAL_DURATION * FPS));
+
+            // The LCG and all character-state decisions live here. This IIFE
+            // runs once before timeline construction, then only frameTable is
+            // read. Lock frames are monotonic by character index, so the final
+            // target resolves strictly from left to right.
+            var frameTable = (function () {
+              var glyphs = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789#$%&*+?<>";
+              var state = 0x27c0ffee;
+              var firstLockFrame = Math.min(lastFrame, Math.max(1, Math.round(0.2 * FPS * scale)));
+              var lockFrames = characters.map(function (character, index) {
+                if (/\s/.test(character)) return 0;
+                var position = characters.length <= 1 ? 1 : index / (characters.length - 1);
+                return Math.round(firstLockFrame + position * (lastFrame - firstLockFrame));
+              });
+              var rows = [];
+
+              for (var frame = 0; frame <= lastFrame; frame += 1) {
+                var row = characters
+                  .map(function (character, index) {
+                    if (/\s/.test(character) || frame >= lockFrames[index]) return character;
+
+                    state = (Math.imul(1664525, state) + 1013904223) >>> 0;
+                    var glyphIndex = state % glyphs.length;
+                    var glyph = glyphs.charAt(glyphIndex);
+                    if (glyph === character)
+                      glyph = glyphs.charAt((glyphIndex + 1) % glyphs.length);
+                    return glyph;
+                  })
+                  .join("");
+                rows.push(row);
+              }
+
+              return rows;
+            })();
+
+            gsap.set(stage, { opacity: 0, x: "-4cqw", y: "2.4cqh" });
+            textElement.textContent = frameTable[0];
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: independently eased axes form the arrival arc. The authored
+            // frame rows then lock the target from left to right at 30 fps.
+            tl.to(stage, { opacity: 1, duration: ARRIVAL, ease: "power2.out" }, 0);
+            tl.to(stage, { x: "0cqw", duration: ARRIVAL, ease: "power3.out" }, 0);
+            tl.to(stage, { y: "0cqh", duration: ARRIVAL, ease: "sine.inOut" }, 0);
+            frameTable.forEach(function (row, frame) {
+              tl.set(textElement, { textContent: row }, frame / FPS);
+            });
+
+            // HOLD: finite drift ends with authored stillness before departure.
+            var driftHalf = Math.max(0, HOLD - STILLNESS) / 2;
+            if (driftHalf > 0) {
+              tl.to(
+                stage,
+                {
+                  y: "-0.55cqh",
+                  duration: driftHalf,
+                  ease: "sine.inOut",
+                  yoyo: true,
+                  repeat: 1,
+                },
+                HOLD_START,
+              );
+            }
+
+            // OUT: optional departure; exit none holds until the frame cuts.
+            // The up exit keeps the original curved arc departure.
+            if (exit === "up") {
+              tl.to(stage, { x: "5cqw", duration: OUT, ease: "power2.in" }, OUT_START);
+              tl.to(stage, { y: "-3.5cqh", duration: OUT, ease: "sine.inOut" }, OUT_START);
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "fade") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["scramble-reveal"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add scramble-reveal" />
+
+That writes one file: `compositions/components/scramble-reveal.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/scramble-reveal.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `text-effects` `scramble` `reveal` `deterministic`.
+
+## 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/components/screen-flow-carousel.mdx b/docs/catalog/components/screen-flow-carousel.mdx
new file mode 100644
index 0000000000..da9037dec6
--- /dev/null
+++ b/docs/catalog/components/screen-flow-carousel.mdx
@@ -0,0 +1,618 @@
+---
+title: "Screen Flow Carousel"
+description: "Two to five app screens ride a horizontal rail: one primary at center, neighbors receded, advancing on cues with a velocity-matched throw and a smooth long-tail catch while a mono caption swaps with each advance. Screens are slots with token skeleton defaults."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/screen-flow-carousel.html"
+  compositionId="screen-flow-carousel"
+  compositionSrc="compositions/components/screen-flow-carousel.html"
+  variables={[{"id":"screens","type":"number","role":"content","label":"Screens","description":"How many screens ride the rail.","default":3,"min":2,"max":5,"step":1},{"id":"captions","type":"string","role":"content","label":"Captions","description":"Comma-separated caption per screen. Blank entries use the authored defaults.","default":""},{"id":"cues","type":"string","role":"timing","label":"Cues","description":"Comma-separated advance times in seconds from mount start. Blank entries use the authored even rhythm.","default":""},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Token the active ring, caption dot, and skeleton accents ride.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Optional departure. Default none: the final screen holds until the cut.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
+>
+
+```html screen-flow-carousel.html
+<!doctype html>
+<!--
+  screen-flow-carousel -- HyperFrames video primitive (product demo / feature tour)
+
+  Two to five app screens ride a horizontal rail. One screen is primary at
+  center while its neighbors recede (smaller and dimmer). On each cue the
+  whole rail advances one screen with a velocity-matched throw: a fast
+  lateral translate that loses speed quickly, then a smooth long-tail catch
+  onto the next center. This is the velocity-throw-snap motion law with the
+  snap softened to the smooth register: no overshoot, no back ease, both
+  sides of the rail always moving the same direction. A mono caption under
+  the rail swaps with each advance.
+
+  Screens are SLOTS. Callers supply content by placing inert templates
+  anywhere in the HOST page (templates never render, and the runtime wipes
+  the host clip's own children on mount, so slots live at document level):
+
+    <template data-slot="screen-flow-carousel-screen-1"> ... </template>
+    <template data-slot="screen-flow-carousel-screen-2"> ... </template>
+    ... up to screen-5.
+
+  Slot content may be an <img>, a muted <video>, or arbitrary HTML; direct
+  img/video children are stretched to cover the screen. Any screen without a
+  slot renders a token-styled skeleton; the four skeleton variants (list,
+  cards, chart, detail) cycle by index so adjacent defaults never repeat.
+
+  Variables (declared in data-composition-variables below):
+    - screens (number 2 to 5, default 3): how many screens ride the rail.
+    - captions (string, default ""): comma-separated caption per screen.
+      Blank entries fall back to the authored defaults.
+    - cues (string, default ""): comma-separated advance times in seconds
+      relative to mount start (screens - 1 advances). Blank or invalid
+      entries use the authored even rhythm. Values are clamped inside the
+      hold and kept far enough apart that throws never overlap.
+    - accent (green | blue | violet, default green): green rides --brand,
+      blue rides --accent, violet rides --accent-2.
+    - exit (none | fade | up, default none): frame roots own transitions;
+      the default holds the final screen to the last pixel.
+
+  Envelope, fixed IN and OUT with elastic HOLD only (never timeScale):
+    IN_BASE  = 0.90s  one stage settle (rise + fade), screen 1 primary
+    HOLD     = max(0, D - IN - OUT); all advances live here, clamped so the
+               last throw lands with stillness left before the cut
+    OUT_BASE = 0.45s  only when exit is fade or up
+    If D < IN_BASE + OUT_BASE, IN and OUT compress together. The advance
+    rhythm re-spaces itself from whatever hold remains.
+
+  Mount contract: the runtime clones only this template. #root fills the
+  host box (no data-width/data-height, container-type: size, cq units), is
+  styled via #root only, and registers one paused timeline under the LITERAL
+  "screen-flow-carousel" key. Rail position is CSS-owned through the numeric
+  --sfc-pos custom property; GSAP tweens only that number plus
+  per-screen scale/opacity with explicit endpoints, so any seek order lands
+  identical frames.
+-->
+<html
+  lang="en"
+  data-composition-id="screen-flow-carousel"
+  data-composition-duration="5"
+  data-composition-variables='[
+    { "id": "screens", "type": "number", "role": "content", "label": "Screens", "description": "How many screens ride the rail.", "default": 3, "min": 2, "max": 5, "step": 1 },
+    { "id": "captions", "type": "string", "role": "content", "label": "Captions", "description": "Comma-separated caption per screen. Blank entries use the authored defaults.", "default": "" },
+    { "id": "cues", "type": "string", "role": "timing", "label": "Cues", "description": "Comma-separated advance times in seconds from mount start. Blank entries use the authored even rhythm.", "default": "" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Token the active ring, caption dot, and skeleton accents ride.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the final screen holds until the cut.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Screen Flow Carousel</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="screen-flow-carousel" data-duration="5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            --sfc-w: 44;
+            --sfc-gap: 4;
+            --sfc-pos: 0;
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, ui-sans-serif, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .sfc-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .sfc-stage {
+            position: absolute;
+            inset: 0;
+            will-change: transform, opacity;
+          }
+
+          /* The rail: one flex row, position owned by the numeric custom
+             property --sfc-pos (fractional index of the centered screen).
+             GSAP tweens that number; CSS does all the geometry in cqw. */
+          .sfc-rail {
+            position: absolute;
+            top: 9cqh;
+            left: 0;
+            display: flex;
+            align-items: stretch;
+            gap: calc(var(--sfc-gap) * 1cqw);
+            width: max-content;
+            height: 64cqh;
+            transform: translateX(
+              calc(
+                (50 - var(--sfc-w) / 2 - var(--sfc-pos) * (var(--sfc-w) + var(--sfc-gap))) * 1cqw
+              )
+            );
+            will-change: transform;
+          }
+
+          .sfc-screen {
+            position: relative;
+            flex: 0 0 calc(var(--sfc-w) * 1cqw);
+            overflow: hidden;
+            border: 0.16cqmin solid color-mix(in srgb, var(--border, #475569) 70%, transparent);
+            border-radius: var(--radius, 2.4cqmin);
+            background: color-mix(in srgb, var(--surface, #0f141b) 94%, var(--bg, #05070c));
+            box-shadow: 0 2.6cqh 7cqh color-mix(in srgb, var(--bg, #000000) 42%, transparent);
+            transform-origin: 50% 50%;
+            will-change: transform, opacity;
+          }
+
+          .sfc-body {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+          }
+
+          .sfc-body > img,
+          .sfc-body > video {
+            display: block;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+          }
+
+          /* Active ring: opacity-only accent border so no var() color is
+             ever GSAP-tweened. */
+          .sfc-ring {
+            position: absolute;
+            inset: 0;
+            z-index: 2;
+            border: 0.24cqmin solid color-mix(in srgb, var(--sfc-accent) 78%, transparent);
+            border-radius: inherit;
+            opacity: 0;
+            pointer-events: none;
+          }
+
+          /* Caption band: absolutely stacked mono captions, one visible. */
+          .sfc-captions {
+            position: absolute;
+            top: 78cqh;
+            left: 10cqw;
+            right: 10cqw;
+            height: 12cqh;
+          }
+
+          .sfc-caption {
+            position: absolute;
+            inset: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: var(--space-1, 1.4cqmin);
+            overflow: hidden;
+            color: var(--muted, #8b93a3);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            font-size: 2.7cqmin;
+            font-weight: 500;
+            letter-spacing: 0.12em;
+            white-space: nowrap;
+            will-change: transform, opacity;
+          }
+
+          .sfc-caption::before {
+            content: "";
+            flex: 0 0 auto;
+            width: 1.1cqmin;
+            height: 1.1cqmin;
+            border-radius: 50%;
+            background: var(--sfc-accent);
+          }
+
+          /* Skeleton furniture: pure token surfaces, no branding, weights
+             stay in the register (blocks, no bold type). */
+          .sfc-skel {
+            position: absolute;
+            inset: 0;
+            display: flex;
+            flex-direction: column;
+            gap: var(--space-2, 2cqmin);
+            padding: var(--space-3, 2.8cqmin);
+          }
+
+          .sfc-skel-heading {
+            flex: 0 0 auto;
+            width: 38%;
+            height: 2.3cqmin;
+            border-radius: 999px;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 22%, transparent);
+          }
+
+          .sfc-skel-line {
+            flex: 0 0 auto;
+            height: 1.2cqmin;
+            border-radius: 999px;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 11%, transparent);
+          }
+
+          .sfc-skel-row {
+            display: flex;
+            flex: 0 0 auto;
+            align-items: center;
+            gap: var(--space-1, 1.6cqmin);
+          }
+
+          .sfc-skel-row .sfc-skel-line {
+            flex: 1 1 auto;
+          }
+
+          .sfc-skel-dot {
+            flex: 0 0 auto;
+            width: 1.7cqmin;
+            height: 1.7cqmin;
+            border-radius: 50%;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 16%, transparent);
+          }
+
+          .sfc-skel-row:first-of-type .sfc-skel-dot {
+            background: color-mix(in srgb, var(--sfc-accent) 78%, transparent);
+          }
+
+          .sfc-skel-grid {
+            display: grid;
+            flex: 1;
+            grid-template-columns: repeat(2, minmax(0, 1fr));
+            gap: var(--space-2, 2cqmin);
+            min-height: 0;
+          }
+
+          .sfc-skel-card {
+            display: flex;
+            flex-direction: column;
+            gap: 1.4cqmin;
+            min-height: 0;
+            padding: 2cqmin;
+            border: 0.14cqmin solid color-mix(in srgb, var(--border, #475569) 60%, transparent);
+            border-radius: calc(var(--radius, 2cqmin) * 0.7);
+            background: color-mix(in srgb, var(--bg, #05070c) 30%, transparent);
+          }
+
+          .sfc-skel-card .sfc-skel-line {
+            width: 60%;
+          }
+
+          .sfc-skel-block {
+            flex: 1;
+            min-height: 2.6cqmin;
+            border-radius: calc(var(--radius, 2cqmin) * 0.5);
+            background: color-mix(in srgb, var(--fg, #f8fafc) 7%, transparent);
+          }
+
+          .sfc-skel-card:first-child .sfc-skel-block {
+            background: color-mix(in srgb, var(--sfc-accent) 17%, transparent);
+          }
+
+          .sfc-skel-bars {
+            display: flex;
+            flex: 1;
+            align-items: flex-end;
+            gap: var(--space-2, 2cqmin);
+            min-height: 0;
+            padding-top: 1cqmin;
+          }
+
+          .sfc-skel-bar {
+            flex: 1;
+            border-radius: 0.8cqmin 0.8cqmin 0 0;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 13%, transparent);
+          }
+
+          .sfc-skel-bar.sfc-skel-accent {
+            background: color-mix(in srgb, var(--sfc-accent) 62%, transparent);
+          }
+
+          .sfc-skel-chip {
+            flex: 0 0 auto;
+            width: 11cqmin;
+            height: 2.6cqmin;
+            border: 0.14cqmin solid color-mix(in srgb, var(--sfc-accent) 55%, transparent);
+            border-radius: 999px;
+            background: color-mix(in srgb, var(--sfc-accent) 24%, transparent);
+          }
+        </style>
+
+        <div
+          id="screen-flow-carousel-clip"
+          class="sfc-clip clip"
+          data-start="0"
+          data-duration="5"
+          data-track-index="0"
+        >
+          <div class="sfc-stage">
+            <div class="sfc-rail" role="list" aria-label="App screens"></div>
+            <div class="sfc-captions" aria-hidden="true"></div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".sfc-stage");
+            var rail = root.querySelector(".sfc-rail");
+            var captionsBand = root.querySelector(".sfc-captions");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var screensValue = Number(vars.screens);
+            var count = Number.isFinite(screensValue)
+              ? Math.max(2, Math.min(5, Math.round(screensValue)))
+              : 3;
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exitMode = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+            root.style.setProperty("--sfc-accent", accentColors[accent]);
+
+            var captionDefaults = ["Overview", "Details", "Insights", "Activity", "Settings"];
+            var captionList = String(vars.captions == null ? "" : vars.captions).split(",");
+
+            // SLOTS. Caller templates live at HOST DOCUMENT level (the mount
+            // wipes host-clip children, and templates never render). The
+            // scoped `document` proxy filters queries to this composition's
+            // subtree, so the lookup deliberately goes through ownerDocument.
+            var hostDoc = root.ownerDocument;
+            function slotContent(name) {
+              var tpl = null;
+              try {
+                tpl = hostDoc.querySelector(
+                  'template[data-slot="screen-flow-carousel-' + name + '"]',
+                );
+              } catch (error) {
+                tpl = null;
+              }
+              return tpl ? hostDoc.importNode(tpl.content, true) : null;
+            }
+
+            // Skeleton defaults cycle four variants so adjacent screens read
+            // as different app states. Pure token furniture, no branding.
+            var lines = function (widths) {
+              return widths
+                .map(function (width) {
+                  return '<span class="sfc-skel-line" style="width:' + width + '"></span>';
+                })
+                .join("");
+            };
+            var listRows = ["86%", "72%", "80%", "64%", "76%", "58%"]
+              .map(function (width) {
+                return (
+                  '<span class="sfc-skel-row"><span class="sfc-skel-dot"></span>' +
+                  '<span class="sfc-skel-line" style="max-width:' +
+                  width +
+                  '"></span></span>'
+                );
+              })
+              .join("");
+            var card =
+              '<span class="sfc-skel-card"><span class="sfc-skel-line"></span><span class="sfc-skel-block"></span></span>';
+            var bars = ["34%", "58%", "42%", "76%", "50%", "64%"]
+              .map(function (height, index) {
+                return (
+                  '<span class="sfc-skel-bar' +
+                  (index === 3 ? " sfc-skel-accent" : "") +
+                  '" style="height:' +
+                  height +
+                  '"></span>'
+                );
+              })
+              .join("");
+            var skeletons = [
+              '<div class="sfc-skel"><span class="sfc-skel-heading"></span>' +
+                listRows +
+                '<span class="sfc-skel-block"></span></div>',
+              '<div class="sfc-skel"><span class="sfc-skel-heading"></span><span class="sfc-skel-grid">' +
+                card +
+                card +
+                card +
+                card +
+                "</span></div>",
+              '<div class="sfc-skel"><span class="sfc-skel-heading"></span><span class="sfc-skel-bars">' +
+                bars +
+                "</span>" +
+                lines(["46%"]) +
+                "</div>",
+              '<div class="sfc-skel"><span class="sfc-skel-chip"></span><span class="sfc-skel-heading" style="width:56%"></span>' +
+                lines(["84%", "72%", "64%"]) +
+                '<span class="sfc-skel-block"></span></div>',
+            ];
+
+            var screens = [];
+            var rings = [];
+            var captions = [];
+            for (var i = 0; i < count; i += 1) {
+              var screen = hostDoc.createElement("article");
+              screen.className = "sfc-screen";
+              screen.setAttribute("role", "listitem");
+              var body = hostDoc.createElement("div");
+              body.className = "sfc-body";
+              var slot = slotContent("screen-" + (i + 1));
+              if (slot) {
+                body.appendChild(slot);
+              } else {
+                body.innerHTML = skeletons[i % skeletons.length];
+              }
+              var ring = hostDoc.createElement("span");
+              ring.className = "sfc-ring";
+              screen.appendChild(body);
+              screen.appendChild(ring);
+              rail.appendChild(screen);
+              screens.push(screen);
+              rings.push(ring);
+
+              var caption = hostDoc.createElement("span");
+              caption.className = "sfc-caption";
+              var captionText = (captionList[i] || "").trim();
+              caption.textContent = captionText !== "" ? captionText : captionDefaults[i];
+              captionsBand.appendChild(caption);
+              captions.push(caption);
+            }
+            screens[0].setAttribute("aria-current", "true");
+
+            // Envelope: fixed IN/OUT, elastic HOLD, never time-scaled. All
+            // advances live inside the hold; spacing re-derives from whatever
+            // hold the host duration leaves so throws can never overlap.
+            var IN_BASE = 0.9;
+            var OUT_BASE = exitMode === "none" ? 0 : 0.45;
+            var ADV_BASE = 0.84;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "5"));
+            var totalBase = IN_BASE + OUT_BASE;
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var OUT_START = duration - OUT;
+            var advanceCount = count - 1;
+            var TAIL = Math.min(0.4, Math.max(0, duration - IN - OUT) * 0.12);
+            var span = Math.max(0.05, duration - IN - OUT - TAIL);
+            var spacing = span / (advanceCount + 1);
+            var ADV = Math.min(ADV_BASE, spacing);
+            var latest = Math.max(IN, duration - OUT - ADV - 0.05);
+
+            var cueList = String(vars.cues == null ? "" : vars.cues).split(",");
+            var starts = [];
+            for (var k = 0; k < advanceCount; k += 1) {
+              var raw = (cueList[k] || "").trim();
+              var cue = Number(raw);
+              var wanted = raw !== "" && Number.isFinite(cue) ? cue : IN + (k + 1) * spacing;
+              var lower = k === 0 ? IN : starts[k - 1] + ADV;
+              var upper = Math.max(lower, latest - (advanceCount - 1 - k) * ADV);
+              starts.push(Math.min(Math.max(wanted, lower), upper));
+            }
+
+            // Explicit both-endpoint state so a seek to t=0 is always correct.
+            gsap.set(stage, { opacity: 0, y: "4cqh" });
+            gsap.set(rail, { "--sfc-pos": 0 });
+            screens.forEach(function (element, index) {
+              gsap.set(
+                element,
+                index === 0 ? { scale: 1, opacity: 1 } : { scale: 0.94, opacity: 0.62 },
+              );
+            });
+            rings.forEach(function (element, index) {
+              gsap.set(element, { opacity: index === 0 ? 1 : 0 });
+            });
+            captions.forEach(function (element, index) {
+              gsap.set(
+                element,
+                index === 0 ? { opacity: 1, y: "0cqh" } : { opacity: 0, y: "1.2cqh" },
+              );
+            });
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: one stage settle, screen 1 already primary.
+            tl.to(stage, { opacity: 1, duration: IN * 0.7, ease: "power2.out" }, 0);
+            tl.to(stage, { y: "0cqh", duration: IN, ease: "power3.out" }, 0);
+
+            // Advances: the softened throw law. Fast travel sheds most of its
+            // velocity under the whip-out ease, then a smooth long-tail catch
+            // lands the exact next center. No overshoot, no back ease.
+            var THROW_PART = 0.42;
+            starts.forEach(function (at, index) {
+              var target = index + 1;
+              var THROW = ADV * THROW_PART;
+              var CATCH = ADV - THROW;
+              tl.to(rail, { "--sfc-pos": target - 0.14, duration: THROW, ease: "power4.out" }, at);
+              tl.to(rail, { "--sfc-pos": target, duration: CATCH, ease: "power2.out" }, at + THROW);
+
+              tl.to(
+                screens[index],
+                { scale: 0.94, opacity: 0.62, duration: ADV, ease: "power2.out" },
+                at,
+              );
+              tl.to(
+                screens[target],
+                { scale: 1, opacity: 1, duration: ADV, ease: "power2.out" },
+                at,
+              );
+              tl.to(rings[index], { opacity: 0, duration: ADV * 0.5, ease: "power1.out" }, at);
+              tl.to(
+                rings[target],
+                { opacity: 1, duration: ADV * 0.6, ease: "power2.out" },
+                at + ADV * 0.4,
+              );
+
+              tl.to(
+                captions[index],
+                { opacity: 0, y: "-1.2cqh", duration: ADV * 0.4, ease: "power1.in" },
+                at,
+              );
+              tl.fromTo(
+                captions[target],
+                { opacity: 0, y: "1.2cqh" },
+                { opacity: 1, y: "0cqh", duration: ADV * 0.55, ease: "power2.out" },
+                at + ADV * 0.35,
+              );
+              tl.set(screens[index], { attr: { "aria-current": "false" } }, at);
+              tl.set(screens[target], { attr: { "aria-current": "true" } }, at);
+            });
+
+            // OUT: only when exit != none; the default holds the last frame.
+            if (exitMode !== "none") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+              if (exitMode === "up") {
+                tl.to(stage, { y: "-4cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              }
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["screen-flow-carousel"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add screen-flow-carousel" />
+
+That writes one file: `compositions/components/screen-flow-carousel.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/screen-flow-carousel.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `product-demo` `feature-tour` `carousel` `rail` `slot` `screens`.
+
+## 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/components/scroll-camera-story.mdx b/docs/catalog/components/scroll-camera-story.mdx
new file mode 100644
index 0000000000..c690b1a7a5
--- /dev/null
+++ b/docs/catalog/components/scroll-camera-story.mdx
@@ -0,0 +1,847 @@
+---
+title: "Scroll Camera Story"
+description: "A compressed forced-scroll cinematic pass: a tall scene of slotted sections travels past the camera top to bottom, depth layers parallax at different rates, each section rises as the camera reaches it, and the pass decelerates into a held final section."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/scroll-camera-story.html"
+  compositionId="scroll-camera-story"
+  compositionSrc="compositions/components/scroll-camera-story.html"
+  variables={[{"id":"sections","type":"number","role":"content","label":"Sections","description":"How many skeleton sections ride the pass. A sections slot overrides this with its own child count.","default":3,"min":2,"max":4,"step":1},{"id":"travel","type":"number","role":"content","label":"Travel","description":"Total camera travel in cqh. The world is 100 + travel cqh tall.","default":220,"min":100,"max":400,"step":10,"unit":"cqh"},{"id":"cues","type":"string","role":"timing","label":"Cues","description":"Comma-separated seconds: arrival times for the sections after the first. Empty keeps the authored default rhythm.","default":""},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Token the skeleton accents and foreground motes ride.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"style","label":"Exit","description":"Optional departure. None holds the final section.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
+>
+
+```html scroll-camera-story.html
+<!doctype html>
+<!--
+  scroll-camera-story -- HyperFrames video primitive (camera)
+
+  A compressed forced-scroll cinematic pass: a tall authored scene travels
+  past the camera top to bottom. Four depth layers move at different rates
+  (far slowest, foreground fastest), sections enter with a soft rise as the
+  camera reaches them, and the pass decelerates into a held final section.
+
+  Camera-servo law: all camera state lives in ONE plain object (cam.t, the
+  pass progress 0 to 1) plus a drift object, and every layer transform is a
+  pure function of that state written by one applyCamera() writer. The world
+  wrapper carries the camera translate; depth layers carry derived parallax
+  offsets computed in the same writer, so any seek in any order reproduces
+  the exact frame. Micro-drift runs INTEGER sine cycles (2 on x-phase, 3 on
+  y-phase) that end at exactly zero when the final section lands, so the
+  held final section is byte-still.
+
+  Seek-safety trap (banked): cq-unit transform tweens blow up under seeks.
+  Nothing here tweens a cq unit. The world height is set ONCE at mount in
+  cqh; every tweened transform is percent-based (translate percent of the
+  element's own box, gsap yPercent on section cards) derived from plain
+  numbers, so no container-query re-resolution ever happens inside a tween.
+
+  Sections are SLOTS. Callers supply content by placing an inert template
+  at HOST DOCUMENT level (templates never render, and the runtime wipes the
+  host clip's own children on mount):
+
+    <template data-slot="scroll-camera-story-sections">
+      <div>first section content</div>
+      <div>second section content</div>
+    </template>
+
+  Each direct child of the template becomes one section's card content, in
+  order (clamped to 2-4 sections). Sections without a slot child keep their
+  token skeleton default. Without a slot, the `sections` variable picks how
+  many skeleton sections ride the pass.
+
+  Variables (declared in data-composition-variables below):
+    - sections (number 2-4, default 3): skeleton section count; a sections
+      slot overrides it with its own child count.
+    - travel (number cqh, default 220): total camera travel. The world is
+      (100 + travel) cqh tall; sections spread evenly along the travel.
+    - cues (string, default ""): comma-separated seconds, arrival times for
+      the sections AFTER the first (the first section is on screen at
+      mount). Empty keeps the authored default rhythm. If one extra value
+      is supplied, the first is treated as the mount section's and dropped.
+    - accent ("green" | "blue" | "violet", default "green"): green rides
+      --brand, blue rides --accent, violet rides --accent-2.
+    - exit ("none" | "fade" | "up", default "none"): frame roots own
+      transitions; the default holds the final section to the last pixel.
+
+  Envelope, fixed IN and OUT with elastic HOLD only (never timeScale):
+    IN_BASE  = 0.85s  stage fade + first section rise
+    PASS     = camera moves ending on each arrival cue, quiet register
+               (power2.inOut, longer final move: the pass decelerates)
+    HOLD     = elastic; drift ends at zero on the last arrival, then the
+               held final section is dead still
+    OUT_BASE = 0.50s  only when exit != none
+    If D is too short the fixed phases compress together.
+
+  Wave K laws: L1, camera segments never overlap (each move starts after
+  the previous ends, so no mid-motion redirect exists to snap velocity);
+  L2, the quiet register is the only register here, no percussive variant.
+
+  Mount contract: the runtime clones only this template. #root fills the
+  host box (no data-width/data-height, container-type: size, cq units in
+  static styles only), is styled via #root only, and registers one paused
+  timeline under the LITERAL "scroll-camera-story" key.
+-->
+<html
+  lang="en"
+  data-composition-id="scroll-camera-story"
+  data-composition-duration="5.5"
+  data-composition-variables='[
+    { "id": "sections", "type": "number", "role": "content", "label": "Sections", "description": "How many skeleton sections ride the pass. A sections slot overrides this with its own child count.", "default": 3, "min": 2, "max": 4, "step": 1 },
+    { "id": "travel", "type": "number", "role": "content", "label": "Travel", "description": "Total camera travel in cqh. The world is 100 + travel cqh tall.", "default": 220, "min": 100, "max": 400, "step": 10, "unit": "cqh" },
+    { "id": "cues", "type": "string", "role": "timing", "label": "Cues", "description": "Comma-separated seconds: arrival times for the sections after the first. Empty keeps the authored default rhythm.", "default": "" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Token the skeleton accents and foreground motes ride.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "style", "label": "Exit", "description": "Optional departure. None holds the final section.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Scroll Camera Story</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="scroll-camera-story" data-duration="5.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, ui-sans-serif, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .scs-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .scs-stage {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            background:
+              radial-gradient(
+                ellipse 120% 70% at 50% 0%,
+                color-mix(in srgb, var(--scs-accent) 6%, transparent) 0%,
+                transparent 60%
+              ),
+              var(--bg, #0b0c0e);
+            will-change: transform, opacity;
+          }
+
+          /* ONE world wrapper: the camera translate lives here; depth layers
+             below carry derived parallax offsets from the same writer. */
+          .scs-world {
+            position: absolute;
+            top: 0;
+            right: 0;
+            left: 0;
+            will-change: transform;
+          }
+
+          .scs-layer {
+            position: absolute;
+            inset: 0;
+            will-change: transform;
+          }
+
+          /* far layer: large soft washes, slowest */
+          .scs-blob {
+            position: absolute;
+            width: 64cqmin;
+            height: 64cqmin;
+            border-radius: 50%;
+            background: radial-gradient(
+              circle,
+              color-mix(in srgb, var(--scs-accent) 11%, transparent) 0%,
+              color-mix(in srgb, var(--scs-accent) 5%, transparent) 45%,
+              transparent 70%
+            );
+          }
+
+          .scs-blob:nth-child(1) {
+            top: 2%;
+            left: -14cqmin;
+          }
+
+          .scs-blob:nth-child(2) {
+            top: 17%;
+            right: -18cqmin;
+            width: 78cqmin;
+            height: 78cqmin;
+            background: radial-gradient(
+              circle,
+              color-mix(in srgb, var(--fg, #f8fafc) 6%, transparent) 0%,
+              color-mix(in srgb, var(--fg, #f8fafc) 3%, transparent) 45%,
+              transparent 70%
+            );
+          }
+
+          .scs-blob:nth-child(3) {
+            top: 34%;
+            left: 6cqw;
+          }
+
+          .scs-blob:nth-child(4) {
+            top: 48%;
+            right: 2cqw;
+            width: 56cqmin;
+            height: 56cqmin;
+          }
+
+          /* mid layer: hairline geometry */
+          .scs-ring {
+            position: absolute;
+            width: 16cqmin;
+            height: 16cqmin;
+            border: 0.16cqmin solid color-mix(in srgb, var(--fg, #f8fafc) 12%, transparent);
+            border-radius: 50%;
+          }
+
+          .scs-rule {
+            position: absolute;
+            width: 12cqmin;
+            height: 0.16cqmin;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 14%, transparent);
+          }
+
+          .scs-plus {
+            position: absolute;
+            width: 3.4cqmin;
+            height: 3.4cqmin;
+          }
+
+          .scs-plus::before,
+          .scs-plus::after {
+            position: absolute;
+            content: "";
+            background: color-mix(in srgb, var(--fg, #f8fafc) 18%, transparent);
+          }
+
+          .scs-plus::before {
+            top: 0;
+            bottom: 0;
+            left: calc(50% - 0.08cqmin);
+            width: 0.16cqmin;
+          }
+
+          .scs-plus::after {
+            top: calc(50% - 0.08cqmin);
+            right: 0;
+            left: 0;
+            height: 0.16cqmin;
+          }
+
+          .scs-ring:nth-of-type(1) {
+            top: 6%;
+            right: 12cqw;
+          }
+
+          .scs-ring:nth-of-type(2) {
+            top: 30%;
+            left: 9cqw;
+            width: 10cqmin;
+            height: 10cqmin;
+          }
+
+          .scs-ring:nth-of-type(3) {
+            top: 52%;
+            right: 8cqw;
+            width: 22cqmin;
+            height: 22cqmin;
+            border-color: color-mix(in srgb, var(--fg, #f8fafc) 8%, transparent);
+          }
+
+          .scs-rule:nth-of-type(1) {
+            top: 14%;
+            left: 12cqw;
+            transform: rotate(90deg);
+          }
+
+          .scs-rule:nth-of-type(2) {
+            top: 40%;
+            right: 16cqw;
+          }
+
+          .scs-plus:nth-of-type(1) {
+            top: 22%;
+            right: 22cqw;
+          }
+
+          .scs-plus:nth-of-type(2) {
+            top: 47%;
+            left: 18cqw;
+          }
+
+          .scs-plus:nth-of-type(3) {
+            top: 9%;
+            left: 30cqw;
+          }
+
+          /* foreground layer: small accent motes, fastest */
+          .scs-mote {
+            position: absolute;
+            width: 1cqmin;
+            height: 1cqmin;
+            border-radius: 50%;
+            background: color-mix(in srgb, var(--scs-accent) 55%, transparent);
+          }
+
+          .scs-mote:nth-child(1) {
+            top: 7%;
+            left: 8cqw;
+          }
+
+          .scs-mote:nth-child(2) {
+            top: 21%;
+            right: 10cqw;
+            width: 0.7cqmin;
+            height: 0.7cqmin;
+          }
+
+          .scs-mote:nth-child(3) {
+            top: 43%;
+            left: 6cqw;
+            width: 1.3cqmin;
+            height: 1.3cqmin;
+            background: color-mix(in srgb, var(--scs-accent) 40%, transparent);
+          }
+
+          .scs-mote:nth-child(4) {
+            top: 66%;
+            right: 7cqw;
+          }
+
+          .scs-mote:nth-child(5) {
+            top: 88%;
+            left: 4cqw;
+            width: 0.8cqmin;
+            height: 0.8cqmin;
+          }
+
+          /* sections: a static positioner zone per section, a rising card in it */
+          .scs-section {
+            position: absolute;
+            right: 10cqw;
+            left: 10cqw;
+            display: grid;
+            place-items: center;
+            height: 84cqh;
+          }
+
+          .scs-card {
+            display: flex;
+            flex-direction: column;
+            gap: var(--space-2, 2.2cqmin);
+            width: min(64cqw, 150cqh);
+            max-height: 76cqh;
+            padding: var(--space-3, 3.4cqmin);
+            overflow: hidden;
+            border: 0.16cqmin solid color-mix(in srgb, var(--border, #475569) 70%, transparent);
+            border-radius: var(--radius, 2cqmin);
+            background: color-mix(in srgb, var(--surface, #0b1016) 88%, var(--bg, #05070c));
+            box-shadow: 0 2.4cqh 7cqh color-mix(in srgb, var(--bg, #000000) 34%, transparent);
+            will-change: transform, opacity;
+          }
+
+          .scs-chiprow {
+            display: flex;
+            align-items: center;
+            gap: var(--space-1, 1.6cqmin);
+          }
+
+          .scs-chip {
+            padding: 0.7cqmin 1.5cqmin;
+            border: 0.14cqmin solid color-mix(in srgb, var(--scs-accent) 45%, transparent);
+            border-radius: 999px;
+            color: color-mix(in srgb, var(--scs-accent) 80%, var(--fg, #f8fafc));
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            font-size: 2cqmin;
+            font-weight: 600;
+            letter-spacing: 0.14em;
+            line-height: 1;
+          }
+
+          .scs-chiprule {
+            flex: 1;
+            height: 0.14cqmin;
+            background: color-mix(in srgb, var(--border, #475569) 60%, transparent);
+          }
+
+          .scs-bar {
+            height: 1.4cqmin;
+            border-radius: 999px;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 12%, transparent);
+          }
+
+          .scs-bar.scs-heading {
+            width: 62%;
+            height: 3.4cqmin;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 24%, transparent);
+          }
+
+          .scs-bar.scs-sub {
+            width: 44%;
+          }
+
+          .scs-minis {
+            display: grid;
+            grid-template-columns: repeat(3, minmax(0, 1fr));
+            gap: 2cqmin;
+            margin-top: 0.6cqmin;
+          }
+
+          .scs-mini {
+            display: flex;
+            flex-direction: column;
+            gap: 1.4cqmin;
+            padding: 2cqmin;
+            border: 0.14cqmin solid color-mix(in srgb, var(--border, #475569) 55%, transparent);
+            border-radius: calc(var(--radius, 2cqmin) * 0.7);
+            background: color-mix(in srgb, var(--bg, #05070c) 32%, transparent);
+          }
+
+          .scs-mini .scs-bar {
+            width: 62%;
+          }
+
+          .scs-mini-block {
+            height: 7cqmin;
+            border-radius: calc(var(--radius, 2cqmin) * 0.5);
+            background: color-mix(in srgb, var(--fg, #f8fafc) 7%, transparent);
+          }
+
+          .scs-mini:nth-child(2) .scs-mini-block {
+            background: color-mix(in srgb, var(--scs-accent) 18%, transparent);
+          }
+
+          .scs-rowline {
+            display: flex;
+            align-items: center;
+            gap: var(--space-1, 1.6cqmin);
+          }
+
+          .scs-dot {
+            flex: 0 0 auto;
+            width: 1.5cqmin;
+            height: 1.5cqmin;
+            border-radius: 50%;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 22%, transparent);
+          }
+
+          .scs-rowline:nth-of-type(2) .scs-dot {
+            background: color-mix(in srgb, var(--scs-accent) 70%, transparent);
+          }
+
+          .scs-rowline .scs-bar {
+            flex: 1;
+            max-width: 72%;
+          }
+
+          .scs-section[data-close] .scs-card {
+            align-items: center;
+            text-align: center;
+          }
+
+          .scs-section[data-close] .scs-bar.scs-heading {
+            width: 52%;
+          }
+
+          .scs-section[data-close] .scs-bar.scs-sub {
+            width: 34%;
+          }
+
+          .scs-pill {
+            margin-top: 1.2cqmin;
+            padding: 1.4cqmin 3.4cqmin;
+            border-radius: 999px;
+            background: color-mix(in srgb, var(--scs-accent) 82%, var(--surface, #0b1016));
+            color: var(--bg, #0b0c0e);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            font-size: 2.1cqmin;
+            font-weight: 600;
+            letter-spacing: 0.12em;
+            line-height: 1;
+          }
+        </style>
+
+        <div
+          id="scroll-camera-story-clip"
+          class="scs-clip clip"
+          data-start="0"
+          data-duration="5.5"
+          data-track-index="0"
+        >
+          <div class="scs-stage" role="img" aria-label="Cinematic scroll pass over a tall scene">
+            <div class="scs-world">
+              <div class="scs-layer scs-far" aria-hidden="true">
+                <span class="scs-blob"></span>
+                <span class="scs-blob"></span>
+                <span class="scs-blob"></span>
+                <span class="scs-blob"></span>
+              </div>
+              <div class="scs-layer scs-mid" aria-hidden="true">
+                <span class="scs-ring"></span>
+                <span class="scs-ring"></span>
+                <span class="scs-ring"></span>
+                <span class="scs-rule"></span>
+                <span class="scs-rule"></span>
+                <span class="scs-plus"></span>
+                <span class="scs-plus"></span>
+                <span class="scs-plus"></span>
+              </div>
+              <div class="scs-layer scs-content">
+                <div class="scs-section" aria-hidden="true">
+                  <div class="scs-card">
+                    <div class="scs-chiprow">
+                      <span class="scs-chip">01</span>
+                      <span class="scs-chiprule"></span>
+                    </div>
+                    <span class="scs-bar scs-heading"></span>
+                    <span class="scs-bar" style="width: 74%"></span>
+                    <span class="scs-bar scs-sub"></span>
+                  </div>
+                </div>
+                <div class="scs-section" aria-hidden="true">
+                  <div class="scs-card">
+                    <div class="scs-chiprow">
+                      <span class="scs-chip">02</span>
+                      <span class="scs-chiprule"></span>
+                    </div>
+                    <span class="scs-bar scs-heading" style="width: 46%"></span>
+                    <div class="scs-minis">
+                      <div class="scs-mini">
+                        <span class="scs-bar"></span>
+                        <span class="scs-mini-block"></span>
+                      </div>
+                      <div class="scs-mini">
+                        <span class="scs-bar"></span>
+                        <span class="scs-mini-block"></span>
+                      </div>
+                      <div class="scs-mini">
+                        <span class="scs-bar"></span>
+                        <span class="scs-mini-block"></span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="scs-section" aria-hidden="true">
+                  <div class="scs-card">
+                    <div class="scs-chiprow">
+                      <span class="scs-chip">03</span>
+                      <span class="scs-chiprule"></span>
+                    </div>
+                    <span class="scs-bar scs-heading" style="width: 40%"></span>
+                    <div class="scs-rowline">
+                      <span class="scs-dot"></span>
+                      <span class="scs-bar"></span>
+                    </div>
+                    <div class="scs-rowline">
+                      <span class="scs-dot"></span>
+                      <span class="scs-bar" style="max-width: 58%"></span>
+                    </div>
+                    <div class="scs-rowline">
+                      <span class="scs-dot"></span>
+                      <span class="scs-bar" style="max-width: 66%"></span>
+                    </div>
+                  </div>
+                </div>
+                <div class="scs-section" data-close aria-hidden="true">
+                  <div class="scs-card">
+                    <div class="scs-chiprow" style="align-self: stretch">
+                      <span class="scs-chip">04</span>
+                      <span class="scs-chiprule"></span>
+                    </div>
+                    <span class="scs-bar scs-heading"></span>
+                    <span class="scs-bar scs-sub"></span>
+                    <span class="scs-pill">&gt;_</span>
+                  </div>
+                </div>
+              </div>
+              <div class="scs-layer scs-fore" aria-hidden="true">
+                <span class="scs-mote"></span>
+                <span class="scs-mote"></span>
+                <span class="scs-mote"></span>
+                <span class="scs-mote"></span>
+                <span class="scs-mote"></span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".scs-stage");
+            var world = root.querySelector(".scs-world");
+            var layerFar = root.querySelector(".scs-far");
+            var layerMid = root.querySelector(".scs-mid");
+            var layerFore = root.querySelector(".scs-fore");
+            var sectionElements = Array.prototype.slice.call(root.querySelectorAll(".scs-section"));
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            function num(value, fallback, min, max) {
+              var parsed = parseFloat(value);
+              if (!isFinite(parsed)) parsed = fallback;
+              return Math.min(max, Math.max(min, parsed));
+            }
+
+            var travel = num(vars.travel, 220, 100, 400);
+            var sectionsVar = Math.round(num(vars.sections, 3, 2, 4));
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exitMode = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            root.style.setProperty("--scs-accent", accentColors[accent]);
+
+            // SLOT. Caller templates live at HOST DOCUMENT level (the mount
+            // wipes host-clip children, and templates never render). Each
+            // direct child of the slot template becomes one section's card
+            // content, in order.
+            var hostDoc = root.ownerDocument;
+            var slotChildren = [];
+            try {
+              var slotTemplate = hostDoc.querySelector(
+                'template[data-slot="scroll-camera-story-sections"]',
+              );
+              if (slotTemplate)
+                slotChildren = Array.prototype.slice.call(slotTemplate.content.children);
+            } catch (error) {
+              slotChildren = [];
+            }
+
+            var count = Math.min(4, Math.max(2, slotChildren.length || sectionsVar));
+            sectionElements.forEach(function (section, index) {
+              if (index >= count) {
+                section.remove();
+                return;
+              }
+              if (slotChildren[index]) {
+                var card = section.querySelector(".scs-card");
+                while (card.firstChild) card.removeChild(card.firstChild);
+                card.appendChild(hostDoc.importNode(slotChildren[index], true));
+              }
+            });
+            var sections = sectionElements.slice(0, count);
+            var cards = sections.map(function (section) {
+              return section.querySelector(".scs-card");
+            });
+
+            // World geometry, set ONCE at mount in cqh (static style, never
+            // tweened; the seek trap is cq units INSIDE tweens). Section i
+            // centers at camera progress i / (count - 1) along the travel.
+            world.style.height = (100 + travel).toFixed(2) + "cqh";
+            sections.forEach(function (section, index) {
+              var progress = index / (count - 1);
+              section.style.top = (50 + progress * travel - 42).toFixed(2) + "cqh";
+            });
+
+            /* ===== Camera (camera-servo law): one plain state object, one
+               writer. cam.t is the pass progress 0..1. The world translates
+               by percent of its OWN height (a pure number: travel out of
+               100 + travel), and each depth layer gets a derived parallax
+               offset so its net rate is RATE x the camera rate. No cq units
+               are ever tweened. ===== */
+            var F = (100 * travel) / (100 + travel); // percent of world height per full pass
+            var RATE_FAR = 0.35;
+            var RATE_MID = 0.65;
+            var RATE_FORE = 1.12;
+            var cam = { t: 0 };
+            var drift = { p: 0, dx: 0, dy: 0 };
+            function applyCamera() {
+              var y = -cam.t * F;
+              world.style.transform = "translate(" + drift.dx + "%, " + (y + drift.dy) + "%)";
+              layerFar.style.transform = "translateY(" + cam.t * F * (1 - RATE_FAR) + "%)";
+              layerMid.style.transform = "translateY(" + cam.t * F * (1 - RATE_MID) + "%)";
+              layerFore.style.transform = "translateY(" + cam.t * F * (1 - RATE_FORE) + "%)";
+            }
+            applyCamera();
+
+            // Envelope: fixed IN/OUT, elastic HOLD, never time-scaled.
+            var IN_BASE = 0.85;
+            var OUT_BASE = exitMode === "none" ? 0 : 0.5;
+            var PASS_MIN = 1.2;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "5.5"));
+            var totalBase = IN_BASE + PASS_MIN + OUT_BASE;
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var usable = duration - OUT;
+
+            // Arrival schedule: defaults decelerate into a held final
+            // section; the cues variable overrides arrivals for sections
+            // after the first.
+            var HOLD_MIN = Math.min(1.3, Math.max(0.45, usable * 0.24));
+            var lastDefault = Math.max(IN + 0.9 * scale, usable - HOLD_MIN);
+            var firstDefault = Math.min(lastDefault, IN + 1.15 * scale);
+            var arrivals = [];
+            var index;
+            for (index = 1; index < count; index += 1) {
+              arrivals.push(
+                count === 2
+                  ? lastDefault
+                  : firstDefault + ((index - 1) / (count - 2)) * (lastDefault - firstDefault),
+              );
+            }
+            var cueValues = String(vars.cues == null ? "" : vars.cues)
+              .split(",")
+              .map(function (part) {
+                return parseFloat(part);
+              })
+              .filter(function (value) {
+                return isFinite(value);
+              });
+            // Lenient by one: a list with an extra leading value is treated
+            // as including the mount section's arrival.
+            if (cueValues.length === count) cueValues = cueValues.slice(1);
+            if (cueValues.length >= count - 1) {
+              arrivals = cueValues.slice(0, count - 1);
+            }
+            var floor = IN + 0.35 * scale;
+            for (index = 0; index < arrivals.length; index += 1) {
+              var clamped = Math.min(usable - 0.3 * scale, Math.max(floor, arrivals[index]));
+              arrivals[index] = clamped;
+              floor = clamped + 0.4 * scale;
+            }
+            var lastArrival = arrivals.length > 0 ? arrivals[arrivals.length - 1] : IN;
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: the stage fades up while the first section rises.
+            tl.fromTo(
+              stage,
+              { opacity: 0 },
+              { opacity: 1, duration: Math.min(0.6 * scale, IN), ease: "power2.out" },
+              0,
+            );
+
+            // Section rises: each card lands exactly on its arrival cue.
+            // yPercent only (percent of the card's own box), never cq units.
+            cards.forEach(function (card, cardIndex) {
+              var arrive = cardIndex === 0 ? IN : arrivals[cardIndex - 1];
+              var rise = Math.min(
+                0.75 * scale,
+                Math.max(0.25, arrive - (cardIndex === 0 ? 0.1 : 0)),
+              );
+              tl.fromTo(
+                card,
+                { opacity: 0, yPercent: 10 },
+                { opacity: 1, yPercent: 0, duration: rise, ease: "power3.out" },
+                arrive - rise,
+              );
+            });
+
+            // Camera pass: one non-overlapping segment per arrival, quiet
+            // register (L2). Each move ends exactly on its cue; the final
+            // move runs longer, so the pass decelerates into the hold. No
+            // segment starts before the previous ends (L1: no mid-motion
+            // redirect exists to snap velocity).
+            var previousEnd = IN * 0.7;
+            arrivals.forEach(function (arrive, arriveIndex) {
+              var isLast = arriveIndex === arrivals.length - 1;
+              var gap = arrive - previousEnd - 0.1 * scale;
+              var move = Math.max(0.3, Math.min(isLast ? 1.7 : 1.25, gap));
+              tl.to(
+                cam,
+                {
+                  t: (arriveIndex + 1) / (count - 1),
+                  duration: move,
+                  ease: "power2.inOut",
+                  onUpdate: applyCamera,
+                },
+                arrive - move,
+              );
+              previousEnd = arrive;
+            });
+
+            // Micro-drift: 2 and 3 INTEGER sine cycles ending at exactly
+            // zero when the final section lands, so the held final section
+            // is byte-still and every seek reproduces the same frame.
+            if (lastArrival >= 1.2) {
+              tl.to(
+                drift,
+                {
+                  p: Math.PI * 2 * 2,
+                  duration: lastArrival,
+                  ease: "none",
+                  onUpdate: function () {
+                    drift.dx = Math.sin(drift.p) * 0.06;
+                    drift.dy = Math.sin(drift.p * 1.5) * 0.08;
+                    applyCamera();
+                  },
+                },
+                0,
+              );
+            }
+
+            // OUT: only when exit != none; the default holds the last frame.
+            if (exitMode !== "none") {
+              var outStart = duration - OUT;
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, outStart);
+              if (exitMode === "up") {
+                tl.to(stage, { yPercent: -4, duration: OUT, ease: "power2.in" }, outStart);
+              }
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["scroll-camera-story"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add scroll-camera-story" />
+
+That writes one file: `compositions/components/scroll-camera-story.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/scroll-camera-story.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `camera` `scroll` `parallax` `story` `sections` `slot` `servo`.
+
+## 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/components/scroll-feed.mdx b/docs/catalog/components/scroll-feed.mdx
new file mode 100644
index 0000000000..fb7d74ceb1
--- /dev/null
+++ b/docs/catalog/components/scroll-feed.mdx
@@ -0,0 +1,439 @@
+---
+title: "Scroll Feed"
+description: "A loop-friendly column of varied skeleton post cards scrolls upward with subtle motion trails and an agitated pace."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/scroll-feed.html"
+  compositionId="scroll-feed"
+  compositionSrc="compositions/components/scroll-feed.html"
+  variables={[{"id":"speed","type":"enum","role":"timing","label":"Scroll speed","description":"Pace of the upward feed movement.","default":"doom","options":[{"value":"doom","label":"Doom"},{"value":"frantic","label":"Frantic"}]},{"id":"card_count","type":"number","role":"content","label":"Card count","description":"Number of skeleton posts in one repeated feed cycle.","default":6,"min":4,"max":10,"step":1},{"id":"cues","type":"string","role":"timing","label":"Cues","description":"Comma-separated seconds (from mount start); each cue advances the feed by one card. Empty synthesizes evenly spaced flicks, one per card.","default":""},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Optional departure. Default none: the feed scrolls until the frame cuts.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
+>
+
+```html scroll-feed.html
+<!doctype html>
+<!--
+  scroll-feed: HyperFrames video primitive (effects / agitation / loop)
+
+  Concept: a self-scrolling column of skeleton post cards recycles without
+  a visible seam. The default register is a doomscroll: distinct thumb
+  flicks (fast start, power3 decay to a settle) with a read pause between
+  them, one flick per card. Two low-opacity copies trail the main column to
+  suggest motion blur while deterministic index math varies every card.
+
+  Variables:
+    - speed (doom | frantic, default doom): changes the card pitch, so the
+      column covers more distance during the same duration in frantic mode.
+    - card_count (number, 4 to 10, default 6): cards in one repeated cycle.
+    - cues (string, default ""): comma-separated seconds (from mount start);
+      each cue advances the feed by exactly one card pitch (stepped rhythm).
+      Empty synthesizes evenly spaced flicks, one per card, that still cover
+      exactly one full cycle.
+    - exit (none | fade | up, default "none"): optional departure over a
+      short reserved tail.
+
+  Envelope: IN = 0s, HOLD = D minus any exit tail, OUT = 0s or the exit
+  tail. HOLD owns the complete scroll and is the only elastic phase. A
+  longer mount stretches HOLD directly, never through timeScale. With no
+  cues and exit none, zero-length IN and OUT keep the first and final
+  frames loop-compatible and each column moves exactly one complete card
+  cycle. Cues or an enabled exit trade that loop guarantee for the cue
+  rhythm or the departure.
+
+  Determinism: cards are created synchronously. Their dimensions vary only
+  through index arithmetic. No clocks, random values, timers, or CSS
+  animations participate in rendering.
+
+  Mount contract: the runtime clones only this template. #root fills the
+  host box, establishes the container query basis, has no data-width or
+  data-height, and registers one paused timeline under the hardcoded
+  scroll-feed id.
+-->
+<html
+  lang="en"
+  data-composition-id="scroll-feed"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "speed", "type": "enum", "role": "timing", "label": "Scroll speed", "description": "Pace of the upward feed movement.", "default": "doom", "options": [{ "value": "doom", "label": "Doom" }, { "value": "frantic", "label": "Frantic" }] },
+    { "id": "card_count", "type": "number", "role": "content", "label": "Card count", "description": "Number of skeleton posts in one repeated feed cycle.", "default": 6, "min": 4, "max": 10, "step": 1 },
+    { "id": "cues", "type": "string", "role": "timing", "label": "Cues", "description": "Comma-separated seconds (from mount start); each cue advances the feed by one card. Empty synthesizes evenly spaced flicks, one per card.", "default": "" },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the feed scrolls until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Scroll Feed</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="scroll-feed" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            background: linear-gradient(180deg, var(--bg, #171b23) 0%, var(--bg, #0f1218) 100%);
+            color: var(--fg, #d8dee9);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .sf-viewport {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            /* Soft fade at both feed edges so cards never clip hard mid-media. */
+            mask-image: linear-gradient(
+              180deg,
+              transparent 0,
+              #000 7cqh,
+              #000 calc(100% - 7cqh),
+              transparent 100%
+            );
+          }
+
+          .sf-column {
+            position: absolute;
+            top: -20cqh;
+            left: 12cqw;
+            width: 76cqw;
+            will-change: transform;
+          }
+
+          .sf-cycle {
+            display: flex;
+            flex-direction: column;
+          }
+
+          .sf-card {
+            flex: 0 0 var(--sf-card-h);
+            width: 76cqw;
+            height: var(--sf-card-h);
+            margin-bottom: var(--sf-gap);
+            padding: var(--space-2, 2.3cqh) var(--space-2, 2.4cqw);
+            overflow: hidden;
+            border: 0.12cqw solid var(--border, rgba(160, 174, 192, 0.2));
+            border-radius: var(--radius, 2.2cqw);
+            /* Second stop derives from --surface so the gradient survives a
+               host theme instead of collapsing to a flat fill. */
+            background: linear-gradient(
+              145deg,
+              var(--surface, #29303b) 0%,
+              color-mix(in srgb, var(--surface, #29303b) 76%, var(--bg, #0f1218)) 100%
+            );
+            box-shadow: 0 1.8cqh 4cqh rgba(0, 0, 0, 0.28);
+          }
+
+          .sf-card-header {
+            display: flex;
+            align-items: center;
+            gap: var(--space-1, 1.4cqw);
+            height: 4.4cqh;
+            margin-bottom: var(--space-1, 1.5cqh);
+          }
+
+          .sf-avatar {
+            flex: 0 0 auto;
+            width: var(--sf-avatar);
+            height: var(--sf-avatar);
+            border-radius: 50%;
+            background: var(--muted, #758094);
+          }
+
+          .sf-identity {
+            display: flex;
+            flex: 1 1 auto;
+            min-width: 0;
+            flex-direction: column;
+            gap: var(--space-1, 0.65cqh);
+          }
+
+          .sf-line,
+          .sf-meta,
+          .sf-action {
+            display: block;
+            border-radius: 99cqw;
+          }
+
+          .sf-line {
+            height: 0.85cqh;
+            background: var(--muted, #7d8798);
+          }
+
+          .sf-line-primary {
+            width: var(--sf-primary-w);
+          }
+
+          .sf-line-secondary {
+            width: var(--sf-secondary-w);
+            opacity: 0.62;
+          }
+
+          .sf-meta {
+            flex: 0 0 auto;
+            width: var(--sf-meta-w);
+            height: 0.75cqh;
+            background: var(--muted, #667184);
+            opacity: 0.72;
+          }
+
+          .sf-media {
+            position: relative;
+            height: calc(var(--sf-card-h) - 12.2cqh);
+            min-height: 6cqh;
+            overflow: hidden;
+            border-radius: var(--radius, 1.4cqw);
+            /* The media block gets its own derivation (lifted toward --fg)
+               so card and media stay distinct under any --surface. */
+            background: linear-gradient(
+              135deg,
+              color-mix(in srgb, var(--surface, #29303b) 88%, var(--fg, #d8dee9)) 0%,
+              color-mix(in srgb, var(--surface, #29303b) 90%, var(--bg, #0f1218)) 100%
+            );
+          }
+
+          .sf-media::before {
+            position: absolute;
+            top: var(--sf-media-y);
+            left: var(--sf-media-x);
+            width: 18cqw;
+            height: 18cqw;
+            border-radius: 50%;
+            background: var(--muted, rgba(130, 143, 160, 0.16));
+            content: "";
+          }
+
+          .sf-card-footer {
+            display: flex;
+            align-items: center;
+            gap: var(--space-2, 2.4cqw);
+            height: 2cqh;
+            margin-top: var(--space-1, 1.35cqh);
+          }
+
+          .sf-action {
+            width: var(--sf-action-w);
+            height: 0.8cqh;
+            background: var(--muted, #717c8e);
+            opacity: 0.72;
+          }
+
+          .sf-blur {
+            z-index: 0;
+            opacity: 0.1;
+            filter: blur(0.28cqh);
+          }
+
+          .sf-blur-a {
+            top: -19.2cqh;
+            left: 11.55cqw;
+          }
+
+          .sf-blur-b {
+            top: -20.8cqh;
+            left: 12.45cqw;
+          }
+
+          .sf-main {
+            z-index: 1;
+          }
+        </style>
+
+        <div
+          id="scroll-feed-clip"
+          class="sf-viewport clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="sf-column sf-blur sf-blur-a" aria-hidden="true"></div>
+          <div class="sf-column sf-blur sf-blur-b" aria-hidden="true"></div>
+          <div class="sf-column sf-main" aria-hidden="true"></div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var mainColumn = root.querySelector(".sf-main");
+            var blurA = root.querySelector(".sf-blur-a");
+            var blurB = root.querySelector(".sf-blur-b");
+            var columns = root.querySelectorAll(".sf-column");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var speed = vars.speed === "frantic" ? "frantic" : "doom";
+            var countValue = Number(vars.card_count);
+            var cardCount = Number.isFinite(countValue)
+              ? Math.max(4, Math.min(10, Math.round(countValue)))
+              : 6;
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+            var cuesValue = vars.cues == null ? "" : String(vars.cues);
+            var cues = cuesValue
+              .split(",")
+              .reduce(function (result, token) {
+                var trimmed = token.trim();
+                if (trimmed === "") return result;
+                var seconds = Number(trimmed);
+                if (!Number.isFinite(seconds) || seconds < 0) return result;
+                result.push(seconds);
+                return result;
+              }, [])
+              .sort(function (a, b) {
+                return a - b;
+              });
+
+            // Frantic mode travels farther in the same HOLD while still
+            // completing exactly one full cycle at the final frame.
+            var cardHeight = speed === "frantic" ? 32 : 24;
+            var gap = speed === "frantic" ? 4 : 3;
+            var cycleDistance = cardCount * (cardHeight + gap);
+            root.style.setProperty("--sf-card-h", cardHeight + "cqh");
+            root.style.setProperty("--sf-gap", gap + "cqh");
+
+            var cycle = document.createElement("div");
+            cycle.className = "sf-cycle";
+
+            for (var index = 0; index < cardCount; index += 1) {
+              var card = document.createElement("article");
+              card.className = "sf-card";
+              card.style.setProperty("--sf-avatar", 3.2 + (index % 3) * 0.45 + "cqh");
+              card.style.setProperty("--sf-primary-w", 18 + ((index * 11) % 24) + "cqw");
+              card.style.setProperty("--sf-secondary-w", 12 + ((index * 7) % 19) + "cqw");
+              card.style.setProperty("--sf-meta-w", 7 + ((index * 5) % 9) + "cqw");
+              card.style.setProperty("--sf-media-x", 5 + ((index * 17) % 48) + "cqw");
+              card.style.setProperty("--sf-media-y", -8 + ((index * 13) % 10) + "cqh");
+              card.style.setProperty("--sf-action-w", 7 + ((index * 3) % 8) + "cqw");
+              card.innerHTML =
+                '<header class="sf-card-header"><span class="sf-avatar"></span><span class="sf-identity"><span class="sf-line sf-line-primary"></span><span class="sf-line sf-line-secondary"></span></span><span class="sf-meta"></span></header><div class="sf-media"></div><footer class="sf-card-footer"><span class="sf-action"></span><span class="sf-action"></span><span class="sf-action"></span></footer>';
+              cycle.appendChild(card);
+            }
+
+            // Three identical cycles keep the viewport covered before, during,
+            // and after the exact one-cycle translation. The blur trails clone
+            // this single deterministic source instead of recomputing cards.
+            mainColumn.appendChild(cycle);
+            mainColumn.appendChild(cycle.cloneNode(true));
+            mainColumn.appendChild(cycle.cloneNode(true));
+            blurA.innerHTML = mainColumn.innerHTML;
+            blurB.innerHTML = mainColumn.innerHTML;
+
+            // IN stays zero. Exit none keeps OUT at zero for a clean loop;
+            // an enabled exit reserves a short tail after the scroll.
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var EXIT = exit === "none" ? 0 : Math.min(0.4, duration * 0.15);
+            var SCROLL_END = Math.max(0.001, duration - EXIT);
+            var finalY = -cycleDistance;
+
+            var tl = gsap.timeline({ paused: true });
+
+            // Stepped rhythm: each step advances the feed by exactly one
+            // card pitch (thumb flick: fast start, power3 decay, settle).
+            // Three stacked cycles keep the viewport covered through two
+            // full cycles of steps. Without cues the default doomscroll
+            // synthesizes one evenly spaced flick per card, so the column
+            // still travels exactly one full cycle by SCROLL_END and the
+            // first and final frames stay loop-compatible.
+            var pitch = cardHeight + gap;
+            var steps = [];
+            var autoFlick = cues.length === 0;
+            if (autoFlick) {
+              for (var step = 0; step < cardCount; step += 1) {
+                steps.push((SCROLL_END / cardCount) * step);
+              }
+            } else {
+              cues.forEach(function (cueAt) {
+                if (steps.length >= cardCount * 2) return;
+                var at = Math.min(SCROLL_END, cueAt);
+                if (steps.length === 0 || at > steps[steps.length - 1] + 0.01) {
+                  steps.push(at);
+                }
+              });
+            }
+            finalY = -pitch * steps.length;
+            steps.forEach(function (cueAt, index) {
+              var next = index + 1 < steps.length ? steps[index + 1] : SCROLL_END;
+              // Auto flicks keep a longer rest so each card gets a read;
+              // explicit cues keep the documented cue-mode timing.
+              var stepDuration = autoFlick
+                ? Math.max(0.05, Math.min(0.45, (next - cueAt) * 0.6))
+                : Math.max(0.05, Math.min(0.5, (next - cueAt) * 0.8, duration - cueAt));
+              var target = { y: -pitch * (index + 1) + "cqh" };
+              if (index === 0) {
+                tl.fromTo(
+                  columns,
+                  { y: "0cqh" },
+                  {
+                    y: target.y,
+                    duration: stepDuration,
+                    ease: "power3.out",
+                  },
+                  cueAt,
+                );
+              } else {
+                tl.to(columns, { y: target.y, duration: stepDuration, ease: "power3.out" }, cueAt);
+              }
+            });
+
+            // Optional departure; exit none scrolls until the frame cuts.
+            if (exit === "fade") {
+              tl.to(columns, { opacity: 0, duration: EXIT, ease: "power2.in" }, SCROLL_END);
+            } else if (exit === "up") {
+              tl.to(columns, { opacity: 0, duration: EXIT, ease: "power2.in" }, SCROLL_END);
+              tl.to(
+                columns,
+                { y: finalY - 10 + "cqh", duration: EXIT, ease: "power2.in" },
+                SCROLL_END,
+              );
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["scroll-feed"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add scroll-feed" />
+
+That writes one file: `compositions/components/scroll-feed.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/scroll-feed.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `effects` `scroll` `feed` `loop` `agitation`.
+
+## 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/components/segmentation-flood.mdx b/docs/catalog/components/segmentation-flood.mdx
new file mode 100644
index 0000000000..8a7989d0ba
--- /dev/null
+++ b/docs/catalog/components/segmentation-flood.mdx
@@ -0,0 +1,559 @@
+---
+title: "Segmentation Flood"
+description: "Machine-vision read of a slotted subject: translucent accent segmentation masks flood on in quantized scanline steps, each region gets a thin bracket and mono label chip, a deterministic 2-frame HUD flicker rides the pass, then the labeled read settles clean."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/segmentation-flood.html"
+  compositionId="segmentation-flood"
+  compositionSrc="compositions/components/segmentation-flood.html"
+  variables={[{"id":"regions","type":"string","role":"content","label":"Regions","description":"Comma-separated region labels; 2 to 4 are used, one translucent mask + bracket + mono chip each.","default":"Figure, Signal, Ground"},{"id":"flood_at","type":"number","role":"timing","label":"Flood at","description":"Seconds from mount start when the segmentation pass begins. Clamped so the pass and any exit stay inside the clip.","default":0.8},{"id":"flicker","type":"enum","role":"style","label":"Flicker","description":"Deterministic 2-frame HUD luminance toggle riding the flood pass.","default":"on","options":[{"value":"on","label":"On"},{"value":"off","label":"Off"}]},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Mask, bracket, and chip color: green rides --brand, blue rides --accent, violet rides --accent-2.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Optional departure. Default none: the labeled read holds until the frame cuts.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
+>
+
+```html segmentation-flood.html
+<!doctype html>
+<!--
+  segmentation-flood: HyperFrames video primitive (product demo / AI)
+
+  A machine-vision read of a slotted subject. Translucent accent
+  segmentation masks FLOOD onto 2-4 regions in scanline steps: rows arrive
+  in 2-3 frame quanta (flood progress is quantized to frame steps before
+  any row is drawn), each region then gets a thin corner bracket and a mono
+  label chip; a subtle HUD flicker (a deterministic 2-frame luminance
+  toggle, a pure function of the frame index) rides the pass and stops the
+  instant the flood completes, settling to a clean labeled read.
+  Reference feel: gmunk segmentation sheets (red masks flooding under HUD
+  flicker), tokenized.
+
+  The subject is a SLOT. Callers place an inert template anywhere in the
+  HOST page (templates never render, and the runtime wipes the host clip's
+  own children on mount, so the slot lives at document level):
+
+    <template data-slot="segmentation-flood-subject"> ... </template>
+
+  Direct img/video children are stretched to cover the stage; arbitrary
+  HTML fills it. A missing slot falls back to a token scene: a surface
+  field with muted shapes seated where the default regions land, so the
+  read has something to read.
+
+  Variables (declared in data-composition-variables below):
+    - regions (comma label list, 2-4 used): one mask + bracket + chip per
+      label, flooding top-left to bottom-right in a staggered pass.
+    - flood_at (seconds): when the pass starts. Clamped so the whole pass
+      and any exit stay inside the clip.
+    - flicker ("on" | "off"): the 2-frame HUD luminance toggle.
+    - accent ("green" | "blue" | "violet"): green rides --brand, blue
+      rides --accent, violet rides --accent-2.
+    - exit ("none" | "fade" | "up", default none): frame roots own
+      transitions; the default holds the labeled read to the last pixel.
+
+  Envelope, fixed IN and OUT with elastic HOLD only (never timeScale):
+    IN ends when the last chip lands; HOLD = D - IN - OUT, truly still.
+    OUT_BASE = 0.45s only when exit != none.
+
+  Determinism (canvas 2D law): region geometry and per-region flood steps
+  come from one table computed once during synchronous timeline
+  construction from fixed LCG seed 0x5e6f100d. Every painted frame is a
+  pure function of (that table, the timeline's current time): the
+  timeline's onUpdate clears the canvas and redraws every mask row and the
+  flicker wash from scratch. Row arrival quantizes TIME to the region's
+  2-3 frame quantum, so a row lands whole and stays stable within its
+  step; the flicker is on exactly when floor(frame / 2) is odd inside the
+  flood window. No Math.random, no wall clock, no incremental state:
+  eventful seeks repaint identically in any order and either direction.
+
+  Mount contract: the runtime clones only this template. #root fills the
+  host box (no data-width/data-height, container-type: size, cqmin units),
+  is styled via #root only, and registers one paused timeline under the
+  LITERAL "segmentation-flood" key. All DOM state is set with explicit
+  endpoints (gsap.set + fromTo) so any seek order lands identical frames.
+-->
+<html
+  lang="en"
+  data-composition-id="segmentation-flood"
+  data-composition-duration="4.5"
+  data-composition-variables='[
+    { "id": "regions", "type": "string", "role": "content", "label": "Regions", "description": "Comma-separated region labels; 2 to 4 are used, one translucent mask + bracket + mono chip each.", "default": "Figure, Signal, Ground" },
+    { "id": "flood_at", "type": "number", "role": "timing", "label": "Flood at", "description": "Seconds from mount start when the segmentation pass begins. Clamped so the pass and any exit stay inside the clip.", "default": 0.8 },
+    { "id": "flicker", "type": "enum", "role": "style", "label": "Flicker", "description": "Deterministic 2-frame HUD luminance toggle riding the flood pass.", "default": "on", "options": [{ "value": "on", "label": "On" }, { "value": "off", "label": "Off" }] },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Mask, bracket, and chip color: green rides --brand, blue rides --accent, violet rides --accent-2.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the labeled read holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Segmentation Flood</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="segmentation-flood" data-duration="4.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, "Inter", system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .sgf-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .sgf-stage {
+            position: absolute;
+            inset: 0;
+            will-change: transform, opacity;
+          }
+
+          .sgf-subject {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            will-change: opacity;
+          }
+
+          .sgf-subject > img,
+          .sgf-subject > video {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+          }
+
+          .sgf-scene {
+            position: absolute;
+            inset: 0;
+            background: color-mix(in srgb, var(--surface, #14171c) 88%, var(--bg, #0b0c0e));
+          }
+
+          .sgf-shape {
+            position: absolute;
+            border: 0.16cqmin solid color-mix(in srgb, var(--border, #475569) 70%, transparent);
+            border-radius: var(--radius, 2cqmin);
+            background: color-mix(in srgb, var(--muted, #94a3b8) 16%, var(--surface, #14171c));
+          }
+
+          .sgf-shape.round {
+            border-radius: 50%;
+          }
+
+          .sgf-canvas {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+          }
+
+          .sgf-overlay {
+            position: absolute;
+            inset: 0;
+          }
+
+          .sgf-frame {
+            position: absolute;
+            will-change: opacity;
+          }
+
+          .sgf-corner {
+            position: absolute;
+            width: 2.6cqmin;
+            height: 2.6cqmin;
+            border: 0 solid var(--sgf-accent);
+          }
+
+          .sgf-corner.tl {
+            left: 0;
+            top: 0;
+            border-left-width: 0.28cqmin;
+            border-top-width: 0.28cqmin;
+          }
+
+          .sgf-corner.tr {
+            right: 0;
+            top: 0;
+            border-right-width: 0.28cqmin;
+            border-top-width: 0.28cqmin;
+          }
+
+          .sgf-corner.bl {
+            left: 0;
+            bottom: 0;
+            border-left-width: 0.28cqmin;
+            border-bottom-width: 0.28cqmin;
+          }
+
+          .sgf-corner.br {
+            right: 0;
+            bottom: 0;
+            border-right-width: 0.28cqmin;
+            border-bottom-width: 0.28cqmin;
+          }
+
+          .sgf-chip {
+            position: absolute;
+            display: inline-flex;
+            align-items: center;
+            gap: 0.9cqmin;
+            padding: 0.7cqmin 1.4cqmin;
+            border: 0.14cqmin solid
+              color-mix(in srgb, var(--sgf-accent) 60%, var(--border, #475569));
+            border-radius: calc(var(--radius, 2cqmin) * 0.4);
+            background: color-mix(in srgb, var(--bg, #0b0c0e) 78%, var(--sgf-accent));
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
+            font-size: 1.9cqmin;
+            font-weight: 500;
+            letter-spacing: 0.12em;
+            text-transform: uppercase;
+            white-space: nowrap;
+            will-change: opacity, transform;
+          }
+
+          .sgf-chip-dot {
+            width: 0.9cqmin;
+            height: 0.9cqmin;
+            border-radius: 50%;
+            background: var(--sgf-accent);
+          }
+        </style>
+
+        <div
+          id="segmentation-flood-clip"
+          class="sgf-clip clip"
+          data-start="0"
+          data-duration="4.5"
+          data-track-index="0"
+        >
+          <div class="sgf-stage">
+            <div class="sgf-subject">
+              <div class="sgf-scene" aria-hidden="true"></div>
+            </div>
+            <canvas class="sgf-canvas" aria-hidden="true"></canvas>
+            <div class="sgf-overlay"></div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".sgf-stage");
+            var subject = root.querySelector(".sgf-subject");
+            var scene = root.querySelector(".sgf-scene");
+            var canvas = root.querySelector(".sgf-canvas");
+            var overlay = root.querySelector(".sgf-overlay");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var labels = String(vars.regions == null ? "" : vars.regions)
+              .split(",")
+              .map(function (s) {
+                return s.trim();
+              })
+              .filter(Boolean)
+              .slice(0, 4);
+            if (labels.length < 2) labels = ["Figure", "Signal", "Ground"];
+
+            var floodAtRaw = parseFloat(vars.flood_at);
+            var flicker = vars.flicker !== "off";
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+            root.style.setProperty("--sgf-accent", accentColors[accent]);
+
+            // Region anchor cells (fractions of the stage), top-left to
+            // bottom-right so the staggered flood reads as one pass.
+            var anchors = [
+              { x: 0.07, y: 0.11, w: 0.34, h: 0.36 },
+              { x: 0.55, y: 0.08, w: 0.37, h: 0.4 },
+              { x: 0.12, y: 0.56, w: 0.3, h: 0.33 },
+              { x: 0.53, y: 0.58, w: 0.36, h: 0.31 },
+            ];
+
+            // SLOT. Caller templates live at HOST DOCUMENT level.
+            var hostDoc = root.ownerDocument;
+            var slotTemplate = null;
+            try {
+              slotTemplate = hostDoc.querySelector(
+                'template[data-slot="segmentation-flood-subject"]',
+              );
+            } catch (error) {
+              slotTemplate = null;
+            }
+            if (slotTemplate) {
+              scene.remove();
+              subject.appendChild(hostDoc.importNode(slotTemplate.content, true));
+            } else {
+              // Default token scene: muted shapes seated inside the region
+              // anchors so the machine-vision read has content to read.
+              for (var s = 0; s < labels.length; s += 1) {
+                var cell = anchors[s];
+                var shape = hostDoc.createElement("div");
+                shape.className = s % 2 === 1 ? "sgf-shape round" : "sgf-shape";
+                shape.style.left = (cell.x + cell.w * 0.16) * 100 + "%";
+                shape.style.top = (cell.y + cell.h * 0.18) * 100 + "%";
+                shape.style.width = cell.w * 0.68 * 100 + "%";
+                shape.style.height = cell.h * 0.64 * 100 + "%";
+                scene.appendChild(shape);
+              }
+            }
+
+            // Envelope. The pass length is fixed by the region count; the
+            // start cue is clamped so pass + exit always fit.
+            var fps = 30;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4.5"));
+            var OUT = exit === "none" ? 0 : 0.45;
+            var STAGGER = 0.35;
+            var REGION_DUR = 1.0;
+            var CHIP_DUR = 0.3;
+            var passLen = STAGGER * (labels.length - 1) + REGION_DUR + CHIP_DUR;
+            var floodAt = isFinite(floodAtRaw) ? floodAtRaw : 0.8;
+            floodAt = Math.min(
+              Math.max(0.2, floodAt),
+              Math.max(0.2, duration - passLen - OUT - 0.1),
+            );
+            var floodEnd = floodAt + STAGGER * (labels.length - 1) + REGION_DUR;
+            var OUT_START = duration - OUT;
+
+            // Canvas raster basis, fixed once at mount (elastic root: the
+            // host box decides the resolution).
+            var dpr = Math.min(2, Math.max(1, Number(window.devicePixelRatio) || 1));
+            var box = root.getBoundingClientRect();
+            var cssW = Math.max(1, Math.round(box.width) || 640);
+            var cssH = Math.max(1, Math.round(box.height) || 360);
+            canvas.width = Math.round(cssW * dpr);
+            canvas.height = Math.round(cssH * dpr);
+            var ctx = canvas.getContext("2d");
+
+            // Resolve the accent token to a concrete color once at mount so
+            // canvas fills never depend on style recalc during seeks.
+            var probe = hostDoc.createElement("span");
+            probe.style.color = accentColors[accent];
+            root.appendChild(probe);
+            var maskColor = getComputedStyle(probe).color || "#71f5a7";
+            probe.remove();
+
+            // Seeded region table: geometry jitter + per-region flood
+            // quantum (2 or 3 frames) + scanline row count. Computed once;
+            // painted frames are pure functions of (table, time).
+            var regions = (function () {
+              var state = 0x5e6f100d;
+              function next() {
+                state = (Math.imul(1664525, state) + 1013904223) >>> 0;
+                return state / 4294967296;
+              }
+              var rows = [];
+              for (var i = 0; i < labels.length; i += 1) {
+                var a = anchors[i];
+                rows.push({
+                  x: a.x + (next() - 0.5) * 0.02,
+                  y: a.y + (next() - 0.5) * 0.02,
+                  w: a.w * (0.94 + next() * 0.1),
+                  h: a.h * (0.94 + next() * 0.1),
+                  start: floodAt + STAGGER * i,
+                  quantum: next() < 0.5 ? 2 : 3,
+                  rows: 11 + Math.floor(next() * 4),
+                });
+              }
+              return rows;
+            })();
+
+            function clamp01(v) {
+              return v < 0 ? 0 : v > 1 ? 1 : v;
+            }
+
+            // Pure repaint: clear, then draw every mask's arrived rows and
+            // the flicker wash from (table, t). Row arrival quantizes time
+            // to the region's frame quantum, so rows land whole and hold
+            // stable within a step.
+            function paint(t) {
+              ctx.clearRect(0, 0, canvas.width, canvas.height);
+              for (var i = 0; i < regions.length; i += 1) {
+                var r = regions[i];
+                var local = t - r.start;
+                if (local <= 0) continue;
+                var q = r.quantum / fps;
+                var quantized = Math.floor(local / q) * q;
+                var p = clamp01(quantized / REGION_DUR);
+                var visible = Math.min(r.rows, Math.floor(p * r.rows + 1e-6));
+                if (visible <= 0) continue;
+                var rx = r.x * canvas.width;
+                var rw = r.w * canvas.width;
+                var rowH = (r.h * canvas.height) / r.rows;
+                for (var k = 0; k < visible; k += 1) {
+                  var leading = k === visible - 1 && visible < r.rows;
+                  ctx.globalAlpha = leading ? 0.55 : 0.3;
+                  ctx.fillStyle = maskColor;
+                  // A hairline gap between rows keeps the scanline texture.
+                  ctx.fillRect(
+                    rx,
+                    r.y * canvas.height + k * rowH,
+                    rw,
+                    Math.max(1, rowH - Math.max(1, dpr)),
+                  );
+                }
+              }
+              // HUD flicker: pure function of the frame index, active only
+              // while the flood is in flight, gone the instant it settles.
+              if (flicker && t > floodAt && t < floodEnd) {
+                var frame = Math.floor(t * fps);
+                if (Math.floor(frame / 2) % 2 === 1) {
+                  ctx.globalAlpha = 0.05;
+                  ctx.fillStyle = "#ffffff";
+                  ctx.fillRect(0, 0, canvas.width, canvas.height);
+                }
+              }
+              ctx.globalAlpha = 1;
+            }
+
+            // Brackets + chips: DOM, positioned from the seeded table.
+            var frames = [];
+            var chips = [];
+            for (var i = 0; i < regions.length; i += 1) {
+              var r = regions[i];
+              var frameEl = hostDoc.createElement("div");
+              frameEl.className = "sgf-frame";
+              frameEl.style.left = r.x * 100 + "%";
+              frameEl.style.top = r.y * 100 + "%";
+              frameEl.style.width = r.w * 100 + "%";
+              frameEl.style.height = r.h * 100 + "%";
+              ["tl", "tr", "bl", "br"].forEach(function (corner) {
+                var c = hostDoc.createElement("span");
+                c.className = "sgf-corner " + corner;
+                frameEl.appendChild(c);
+              });
+              overlay.appendChild(frameEl);
+              frames.push(frameEl);
+
+              var chip = hostDoc.createElement("div");
+              chip.className = "sgf-chip";
+              chip.style.left = r.x * 100 + "%";
+              // Chips sit above the region; bottom rows drop them inside
+              // the top edge so nothing leaves the stage.
+              if (r.y > 0.08) {
+                chip.style.top = "calc(" + r.y * 100 + "% - 3.9cqmin)";
+              } else {
+                chip.style.top = "calc(" + r.y * 100 + "% + 1cqmin)";
+              }
+              var dot = hostDoc.createElement("span");
+              dot.className = "sgf-chip-dot";
+              chip.appendChild(dot);
+              chip.appendChild(hostDoc.createTextNode(labels[i]));
+              overlay.appendChild(chip);
+              chips.push(chip);
+            }
+
+            gsap.set(stage, { opacity: 1, y: "0cqh" });
+            gsap.set(subject, { opacity: 0 });
+
+            var tl = gsap.timeline({
+              paused: true,
+              onUpdate: function () {
+                paint(tl.time());
+              },
+            });
+
+            // Anchor tween: an inert plain-object tween spanning the full
+            // authored duration so tl.time() covers [0, D] and onUpdate
+            // repaints the canvas on every eventful seek.
+            tl.to({ p: 0 }, { p: 1, duration: duration, ease: "none" }, 0);
+
+            // IN: the subject settles up quietly before the read begins.
+            tl.fromTo(
+              subject,
+              { opacity: 0 },
+              { opacity: 1, duration: 0.5, ease: "power2.out" },
+              0,
+            );
+
+            // Each region's bracket + chip land as its mask completes.
+            for (var i = 0; i < regions.length; i += 1) {
+              var done = regions[i].start + REGION_DUR;
+              tl.fromTo(
+                frames[i],
+                { opacity: 0 },
+                { opacity: 1, duration: 0.22, ease: "power2.out" },
+                done - 0.16,
+              );
+              tl.fromTo(
+                chips[i],
+                { opacity: 0, y: "0.8cqh" },
+                { opacity: 1, y: "0cqh", duration: CHIP_DUR, ease: "power2.out" },
+                done,
+              );
+            }
+
+            // HOLD: truly still; the flood is complete, the flicker window
+            // is closed, and the canvas repaints the same settled read.
+
+            // OUT: optional departure; exit none holds until the frame cuts.
+            if (exit === "up") {
+              tl.to(stage, { y: "-4cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "fade") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            }
+
+            tl.seek(0);
+            paint(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["segmentation-flood"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add segmentation-flood" />
+
+That writes one file: `compositions/components/segmentation-flood.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/segmentation-flood.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `product-demo` `ai` `hud` `canvas` `deterministic` `experiment`.
+
+## 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/components/separator.mdx b/docs/catalog/components/separator.mdx
new file mode 100644
index 0000000000..a771ce8ad5
--- /dev/null
+++ b/docs/catalog/components/separator.mdx
@@ -0,0 +1,281 @@
+---
+title: "Separator"
+description: "A one-pixel structural separator with horizontal and vertical variants plus a seek-safe progress reveal"
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/separator.html"
+  compositionId="separator"
+  compositionSrc="compositions/components/separator.html"
+  variables={[{"id":"orientation","type":"enum","role":"layout","label":"Orientation","description":"Which way the rule runs, and so which way the reveal travels.","default":"horizontal","options":[{"value":"horizontal","label":"Horizontal"},{"value":"vertical","label":"Vertical"}]},{"id":"thickness","type":"enum","role":"style","label":"Thickness","description":"Size of the rule across its short edge, from a 1px hairline to a 4px bar.","default":"hairline","options":[{"value":"hairline","label":"Hairline"},{"value":"medium","label":"Medium"},{"value":"bold","label":"Bold"}]},{"id":"tone","type":"enum","role":"style","label":"Tone","description":"Colour of the revealed fill: neutral grey, the theme accent, or the warning hue.","default":"neutral","options":[{"value":"neutral","label":"Neutral"},{"value":"accent","label":"Accent"},{"value":"warning","label":"Warning"}]}]}
+>
+
+```html separator.html
+<!--
+  Separator - Operator Black structural rule primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Animate the CSS
+  variables from a paused GSAP timeline for deterministic video renders.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result as a custom property
+  or an attribute the CSS above consumes. The timeline recipe below is
+  untouched by them: it still drives one progress value from 0 to 1, and these
+  decide what that progress reveals.
+
+    - orientation (horizontal | vertical, default horizontal): which way the
+      rule runs. horizontal is a 360px wide rule wiping left to right,
+      vertical is a 180px tall rule wiping top to bottom.
+    - thickness (hairline | medium | bold, default hairline): the rule size
+      across its short edge, 1px, 2px or 4px.
+    - tone (neutral | accent | warning, default neutral): colour of the
+      revealed fill. neutral keeps the control border grey, accent rides
+      --hf-ui-accent, warning rides --hf-ui-warning.
+
+  On every default the result is identical to the original: a 1px horizontal
+  grey rule wiping left to right.
+-->
+
+<div
+  data-hf-ui-root
+  class="hf-ui-separator"
+  role="separator"
+  aria-orientation="horizontal"
+  data-composition-variables='[
+    { "id": "orientation", "type": "enum", "role": "layout", "label": "Orientation", "description": "Which way the rule runs, and so which way the reveal travels.", "default": "horizontal", "options": [{ "value": "horizontal", "label": "Horizontal" }, { "value": "vertical", "label": "Vertical" }] },
+    { "id": "thickness", "type": "enum", "role": "style", "label": "Thickness", "description": "Size of the rule across its short edge, from a 1px hairline to a 4px bar.", "default": "hairline", "options": [{ "value": "hairline", "label": "Hairline" }, { "value": "medium", "label": "Medium" }, { "value": "bold", "label": "Bold" }] },
+    { "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Colour of the revealed fill: neutral grey, the theme accent, or the warning hue.", "default": "neutral", "options": [{ "value": "neutral", "label": "Neutral" }, { "value": "accent", "label": "Accent" }, { "value": "warning", "label": "Warning" }] }
+  ]'
+>
+  <span></span>
+</div>
+
+<style>
+  /* hf-ui:tokens:start */
+  /* prettier-ignore */
+  [data-hf-ui-root] {
+    --_hf-ui-accent: var(--hf-ui-accent, #3ce6ac);
+    --_hf-ui-action: var(--hf-ui-action, #eeeeee);
+    --_hf-ui-action-contrast: var(--hf-ui-action-contrast, #111111);
+    --_hf-ui-border: var(--hf-ui-border, #2a2a2a);
+    --_hf-ui-border-strong: var(--hf-ui-border-strong, #383838);
+    --_hf-ui-canvas: var(--hf-ui-canvas, #0a0a0a);
+    --_hf-ui-control-border: var(--hf-ui-control-border, #686868);
+    --_hf-ui-control-border-hover: var(--hf-ui-control-border-hover, #777777);
+    --_hf-ui-control-height: var(--hf-ui-control-height, 40px);
+    --_hf-ui-danger: var(--hf-ui-danger, #ff7878);
+    --_hf-ui-data-1: var(--hf-ui-data-1, #3ce6ac);
+    --_hf-ui-data-2: var(--hf-ui-data-2, #63a5ff);
+    --_hf-ui-data-3: var(--hf-ui-data-3, #e9ab55);
+    --_hf-ui-data-4: var(--hf-ui-data-4, #a78bfa);
+    --_hf-ui-data-5: var(--hf-ui-data-5, #ff8a75);
+    --_hf-ui-duration-drawer-enter: var(--hf-ui-duration-drawer-enter, 360ms);
+    --_hf-ui-duration-drawer-exit: var(--hf-ui-duration-drawer-exit, 240ms);
+    --_hf-ui-duration-modal-enter: var(--hf-ui-duration-modal-enter, 280ms);
+    --_hf-ui-duration-modal-exit: var(--hf-ui-duration-modal-exit, 180ms);
+    --_hf-ui-duration-overlay-enter: var(--hf-ui-duration-overlay-enter, 210ms);
+    --_hf-ui-duration-overlay-exit: var(--hf-ui-duration-overlay-exit, 140ms);
+    --_hf-ui-duration-press: var(--hf-ui-duration-press, 120ms);
+    --_hf-ui-duration-state: var(--hf-ui-duration-state, 160ms);
+    --_hf-ui-ease-enter: var(--hf-ui-ease-enter, cubic-bezier(0.32, 0.72, 0, 1));
+    --_hf-ui-ease-exit: var(--hf-ui-ease-exit, cubic-bezier(0.23, 1, 0.32, 1));
+    --_hf-ui-ease-response: var(--hf-ui-ease-response, cubic-bezier(0.23, 1, 0.32, 1));
+    --_hf-ui-font-mono: var(--hf-ui-font-mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
+    --_hf-ui-font-sans: var(--hf-ui-font-sans, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
+    --_hf-ui-hit-target: var(--hf-ui-hit-target, 44px);
+    --_hf-ui-radius-control: var(--hf-ui-radius-control, 5px);
+    --_hf-ui-radius-overlay: var(--hf-ui-radius-overlay, 10px);
+    --_hf-ui-radius-surface: var(--hf-ui-radius-surface, 7px);
+    --_hf-ui-shadow-contact: var(--hf-ui-shadow-contact, 0 8px 18px rgba(0, 0, 0, 0.38));
+    --_hf-ui-shadow-inset: var(--hf-ui-shadow-inset, inset 0 1px 0 rgba(255, 255, 255, 0.035));
+    --_hf-ui-shadow-modal: var(--hf-ui-shadow-modal, 0 18px 46px rgba(0, 0, 0, 0.52));
+    --_hf-ui-space-1: var(--hf-ui-space-1, 4px);
+    --_hf-ui-space-12: var(--hf-ui-space-12, 48px);
+    --_hf-ui-space-16: var(--hf-ui-space-16, 64px);
+    --_hf-ui-space-2: var(--hf-ui-space-2, 8px);
+    --_hf-ui-space-3: var(--hf-ui-space-3, 12px);
+    --_hf-ui-space-4: var(--hf-ui-space-4, 16px);
+    --_hf-ui-space-6: var(--hf-ui-space-6, 24px);
+    --_hf-ui-space-8: var(--hf-ui-space-8, 32px);
+    --_hf-ui-surface: var(--hf-ui-surface, #141414);
+    --_hf-ui-surface-inset: var(--hf-ui-surface-inset, #101010);
+    --_hf-ui-surface-raised: var(--hf-ui-surface-raised, #1a1a1a);
+    --_hf-ui-text: var(--hf-ui-text, #e5e5e5);
+    --_hf-ui-text-faint: var(--hf-ui-text-faint, #7e7e7e);
+    --_hf-ui-text-muted: var(--hf-ui-text-muted, #929292);
+    --_hf-ui-text-strong: var(--hf-ui-text-strong, #f3f3f3);
+    --_hf-ui-warning: var(--hf-ui-warning, #e9ab55);
+    --_hf-ui-weight-medium: var(--hf-ui-weight-medium, 500);
+    --_hf-ui-weight-regular: var(--hf-ui-weight-regular, 400);
+    --_hf-ui-weight-semibold: var(--hf-ui-weight-semibold, 600);
+    box-sizing: border-box;
+    color-scheme: dark;
+    font-family: var(--_hf-ui-font-sans);
+  }
+  /* prettier-ignore */
+  [data-hf-ui-root] *,
+  [data-hf-ui-root] *::before,
+  [data-hf-ui-root] *::after {
+    box-sizing: border-box;
+  }
+  /* prettier-ignore */
+  [data-hf-theme="light"] [data-hf-ui-root],
+  [data-hf-ui-root][data-hf-theme="light"] {
+    --_hf-ui-accent: var(--hf-ui-accent, #087a57);
+    --_hf-ui-action: var(--hf-ui-action, #171717);
+    --_hf-ui-action-contrast: var(--hf-ui-action-contrast, #ffffff);
+    --_hf-ui-border: var(--hf-ui-border, #e0dfdb);
+    --_hf-ui-border-strong: var(--hf-ui-border-strong, #cbc9c3);
+    --_hf-ui-canvas: var(--hf-ui-canvas, #f6f5f1);
+    --_hf-ui-control-border: var(--hf-ui-control-border, #888888);
+    --_hf-ui-control-border-hover: var(--hf-ui-control-border-hover, #6f6e68);
+    --_hf-ui-danger: var(--hf-ui-danger, #a61b1b);
+    --_hf-ui-data-1: var(--hf-ui-data-1, #087a57);
+    --_hf-ui-data-2: var(--hf-ui-data-2, #245ea8);
+    --_hf-ui-data-3: var(--hf-ui-data-3, #8a4b00);
+    --_hf-ui-data-4: var(--hf-ui-data-4, #6d3fc0);
+    --_hf-ui-data-5: var(--hf-ui-data-5, #a83d2d);
+    --_hf-ui-shadow-contact: var(--hf-ui-shadow-contact, 0 7px 16px rgba(26, 24, 20, 0.13));
+    --_hf-ui-shadow-inset: var(--hf-ui-shadow-inset, inset 0 1px 0 rgba(255, 255, 255, 0.78));
+    --_hf-ui-shadow-modal: var(--hf-ui-shadow-modal, 0 18px 46px rgba(26, 24, 20, 0.18));
+    --_hf-ui-surface: var(--hf-ui-surface, #ffffff);
+    --_hf-ui-surface-inset: var(--hf-ui-surface-inset, #f0efeb);
+    --_hf-ui-surface-raised: var(--hf-ui-surface-raised, #ffffff);
+    --_hf-ui-text: var(--hf-ui-text, #171717);
+    --_hf-ui-text-faint: var(--hf-ui-text-faint, #6f6e68);
+    --_hf-ui-text-muted: var(--hf-ui-text-muted, #5f5f5a);
+    --_hf-ui-text-strong: var(--hf-ui-text-strong, #0a0a0a);
+    --_hf-ui-warning: var(--hf-ui-warning, #8a4b00);
+    color-scheme: light;
+  }
+  /* prettier-ignore */
+  [data-hf-ui-root]:focus-visible {
+    outline: 2px solid var(--_hf-ui-accent);
+    outline-offset: 3px;
+  }
+  /* prettier-ignore */
+  [data-hf-rendering="true"][data-hf-ui-root],
+  [data-hf-rendering="true"] [data-hf-ui-root],
+  [data-hf-rendering="true"][data-hf-ui-root] *,
+  [data-hf-rendering="true"] [data-hf-ui-root] *,
+  [data-hf-rendering="true"][data-hf-ui-root]::before,
+  [data-hf-rendering="true"][data-hf-ui-root]::after,
+  [data-hf-rendering="true"] [data-hf-ui-root]::before,
+  [data-hf-rendering="true"] [data-hf-ui-root]::after,
+  [data-hf-rendering="true"][data-hf-ui-root] *::before,
+  [data-hf-rendering="true"][data-hf-ui-root] *::after,
+  [data-hf-rendering="true"] [data-hf-ui-root] *::before,
+  [data-hf-rendering="true"] [data-hf-ui-root] *::after {
+    animation-duration: 0s !important;
+    animation-delay: 0s !important;
+    transition-duration: 0s !important;
+    transition-delay: 0s !important;
+  }
+  /* prettier-ignore */
+  @media (prefers-reduced-motion: reduce) {
+    [data-hf-ui-root],
+    [data-hf-ui-root] *,
+    [data-hf-ui-root] *::before,
+    [data-hf-ui-root] *::after {
+      animation-duration: 0s !important;
+      animation-delay: 0s !important;
+      transition-duration: 0s !important;
+      transition-delay: 0s !important;
+      scroll-behavior: auto !important;
+    }
+  }
+  /* hf-ui:tokens:end */
+  .hf-ui-separator {
+    --hf-separator-progress: 1;
+    width: min(360px, 100%);
+    height: var(--hf-separator-thickness, 1px);
+    background: var(--_hf-ui-border);
+    overflow: hidden;
+  }
+  .hf-ui-separator span {
+    display: block;
+    width: calc(var(--hf-separator-progress) * 100%);
+    height: 100%;
+    background: var(--hf-separator-fill, var(--_hf-ui-control-border));
+    transform-origin: left center;
+  }
+  .hf-ui-separator[data-orientation="vertical"] {
+    width: var(--hf-separator-thickness, 1px);
+    height: 180px;
+  }
+  .hf-ui-separator[data-orientation="vertical"] span {
+    width: 100%;
+    height: calc(var(--hf-separator-progress) * 100%);
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    var orientations = { horizontal: true, vertical: true };
+    var thicknesses = { hairline: "1px", medium: "2px", bold: "4px" };
+    var tones = {
+      neutral: "var(--_hf-ui-control-border)",
+      accent: "var(--_hf-ui-accent)",
+      warning: "var(--_hf-ui-warning)",
+    };
+
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var orientation = pick(orientations, vars.orientation, "horizontal");
+    var thickness = thicknesses[pick(thicknesses, vars.thickness, "hairline")];
+    var tone = tones[pick(tones, vars.tone, "neutral")];
+
+    var roots = document.querySelectorAll(".hf-ui-separator");
+    for (var i = 0; i < roots.length; i += 1) {
+      roots[i].setAttribute("data-orientation", orientation);
+      roots[i].setAttribute("aria-orientation", orientation);
+      roots[i].style.setProperty("--hf-separator-thickness", thickness);
+      roots[i].style.setProperty("--hf-separator-fill", tone);
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-ui-separator', { '--hf-separator-progress': 0 }, { '--hf-separator-progress': 1, duration: 0.42, ease: 'power3.out' }, startTime);
+-->
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add separator" />
+
+That writes one file: `compositions/components/separator.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/separator.html` and copy what is inside into your own composition.
+The file opens with a comment header that walks you through it.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `video-primitive` `remocn-port` `separator` `layout`.
+
+## 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/components/settings-toggle-flow.mdx b/docs/catalog/components/settings-toggle-flow.mdx
new file mode 100644
index 0000000000..f16d7b7afc
--- /dev/null
+++ b/docs/catalog/components/settings-toggle-flow.mdx
@@ -0,0 +1,125 @@
+---
+title: "Settings Toggle Flow"
+description: "A composed settings flow with preference rows, toggle switches, and active-state feedback"
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/components/settings-toggle-flow.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Settings Toggle Flow preview" />
+
+## Install
+
+<InstallCommand command="npx hyperframes add settings-toggle-flow" />
+
+That writes one file: `compositions/components/settings-toggle-flow.html`.
+
+## Source
+
+<Accordion title={`settings-toggle-flow.html`}>
+
+```html
+<!--
+  Settings Toggle Flow - Remocn-inspired composed UI flow for HyperFrames.
+
+  Paste the markup and CSS into a composition. Use the timeline integration
+  note at the bottom as the starting point for deterministic GSAP animation.
+-->
+
+<div class="hf-ui-settings-flow">
+  <div class="hf-ui-settings-row">
+    <div><strong>Auto captions</strong><span>Generate timed captions</span></div>
+    <i class="on"></i>
+  </div>
+  <div class="hf-ui-settings-row">
+    <div><strong>Brand kit</strong><span>Apply saved colors</span></div>
+    <i class="on"></i>
+  </div>
+  <div class="hf-ui-settings-row">
+    <div><strong>Sound effects</strong><span>Layer subtle UI sounds</span></div>
+    <i></i>
+  </div>
+</div>
+
+<style>
+  .hf-ui-settings-flow {
+    display: grid;
+    gap: 12px;
+    width: 520px;
+    padding: 18px;
+    border: 1px solid #e4e4e7;
+    border-radius: 28px;
+    background: #ffffff;
+    color: #18181b;
+    font-family: Inter, system-ui, sans-serif;
+    box-shadow: 0 26px 80px rgba(0, 0, 0, 0.1);
+  }
+  .hf-ui-settings-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    min-height: 72px;
+    padding: 0 16px;
+    border-radius: 18px;
+    background: #f8fafc;
+  }
+  .hf-ui-settings-row div {
+    display: grid;
+    gap: 4px;
+  }
+  .hf-ui-settings-row strong {
+    font-size: 18px;
+  }
+  .hf-ui-settings-row span {
+    color: #71717a;
+    font-size: 13px;
+    font-weight: 760;
+  }
+  .hf-ui-settings-row i {
+    position: relative;
+    width: 50px;
+    height: 28px;
+    border-radius: 999px;
+    background: #d4d4d8;
+  }
+  .hf-ui-settings-row i::after {
+    content: "";
+    position: absolute;
+    left: 4px;
+    top: 4px;
+    width: 20px;
+    height: 20px;
+    border-radius: 999px;
+    background: #ffffff;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
+  }
+  .hf-ui-settings-row i.on {
+    background: #18181b;
+  }
+  .hf-ui-settings-row i.on::after {
+    transform: translateX(22px);
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-ui-settings-flow', { opacity: 0, y: 24 }, { opacity: 1, y: 0, duration: 0.34, ease: 'power2.out' }, 0.28);
+  tl.fromTo('.hf-ui-settings-row', { x: -18, opacity: 0 }, { x: 0, opacity: 1, duration: 0.28, stagger: 0.08, ease: 'power2.out' }, 0.55);
+  tl.fromTo('.hf-ui-settings-row i.on', { scale: 0.92 }, { scale: 1, duration: 0.28, stagger: 0.08, ease: 'back.out(1.8)' }, 0.88);
+-->
+```
+
+</Accordion>
+
+## Usage
+
+Open `compositions/components/settings-toggle-flow.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+
+{/* hf:generated-footer */}
+
+Tagged `ui-flow` `remocn-port` `settings` `toggle`.
+
+## 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/components/shared-axis-y.mdx b/docs/catalog/components/shared-axis-y.mdx
new file mode 100644
index 0000000000..a2a2209407
--- /dev/null
+++ b/docs/catalog/components/shared-axis-y.mdx
@@ -0,0 +1,137 @@
+---
+title: "Shared Axis Y"
+description: "Per-word vertical shared-axis transition for sharp editorial swaps."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/shared-axis-y.html"
+  compositionId="shared-axis-y"
+  compositionSrc="compositions/components/shared-axis-y.html"
+  variables={[{"id":"direction","type":"enum","role":"motion","label":"Direction","description":"Which side of the baseline the words travel in from.","default":"up","options":[{"value":"up","label":"Up"},{"value":"down","label":"Down"}]},{"id":"distance","type":"enum","role":"motion","label":"Distance","description":"Scales the vertical offset, so the words cover a shorter or longer run in the same time.","default":"standard","options":[{"value":"close","label":"Close"},{"value":"standard","label":"Standard"},{"value":"far","label":"Far"}]},{"id":"tone","type":"enum","role":"style","label":"Tone","description":"Word colour: ink for light frames, paper for dark ones, accent rides --brand.","default":"ink","options":[{"value":"ink","label":"Ink"},{"value":"paper","label":"Paper"},{"value":"accent","label":"Accent"}]}]}
+>
+
+```html shared-axis-y.html
+<!--
+  Shared Axis Y - remocn typography primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Drive the timeline
+  integration from a paused GSAP timeline so renders remain deterministic.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result as a custom property
+  the CSS above consumes. The timeline recipe below is untouched by them: it
+  keeps driving one vertical offset, and these decide what that offset means
+  on screen. At rest the offset is 0, so every setting lands on the same
+  final frame.
+
+    - direction (up | down, default up): which side of the baseline the words
+      travel in from. up rises into place, down drops in.
+    - distance (close | standard | far, default standard): scales the offset.
+      close covers half the run, far nearly double, in the same time.
+    - tone (ink | paper | accent, default ink): word colour. ink is near-black
+      for light frames, paper near-white for dark ones, accent rides --brand.
+
+  On every default the result is identical to the original: words rise 32px
+  into place in near-black.
+-->
+
+<div
+  class="hf-remocn-shared-axis-y"
+  data-composition-variables='[
+    { "id": "direction", "type": "enum", "role": "motion", "label": "Direction", "description": "Which side of the baseline the words travel in from.", "default": "up", "options": [{ "value": "up", "label": "Up" }, { "value": "down", "label": "Down" }] },
+    { "id": "distance", "type": "enum", "role": "motion", "label": "Distance", "description": "Scales the vertical offset, so the words cover a shorter or longer run in the same time.", "default": "standard", "options": [{ "value": "close", "label": "Close" }, { "value": "standard", "label": "Standard" }, { "value": "far", "label": "Far" }] },
+    { "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Word colour: ink for light frames, paper for dark ones, accent rides --brand.", "default": "ink", "options": [{ "value": "ink", "label": "Ink" }, { "value": "paper", "label": "Paper" }, { "value": "accent", "label": "Accent" }] }
+  ]'
+>
+  <span>Plan</span><span>Debug</span><span>Ask</span>
+</div>
+
+<style>
+  .hf-remocn-shared-axis-y {
+    color: var(--hf-word-color, #18181b);
+    font-family: Inter, system-ui, sans-serif;
+    font-weight: 900;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-shared-axis-y {
+    display: inline-flex;
+    gap: 12px;
+    font-size: 56px;
+    line-height: 1;
+  }
+  .hf-remocn-shared-axis-y span {
+    display: inline-block;
+    transform: translate(
+        var(--hf-word-x, 0px),
+        calc(var(--hf-word-y, 0px) * var(--hf-word-axis-y, 1))
+      )
+      scale(var(--hf-word-scale, 1));
+    filter: blur(var(--hf-word-blur, 0px));
+    will-change: transform, filter, opacity;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    var signs = { up: 1, down: -1 };
+    var reaches = { close: 0.5, standard: 1, far: 1.85 };
+    var tones = {
+      ink: "#18181b",
+      paper: "#fafafa",
+      accent: "var(--brand, #34d399)",
+    };
+
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var sign = signs[pick(signs, vars.direction, "up")];
+    var reach = reaches[pick(reaches, vars.distance, "standard")];
+    var tone = tones[pick(tones, vars.tone, "ink")];
+
+    var roots = document.querySelectorAll(".hf-remocn-shared-axis-y");
+    for (var i = 0; i < roots.length; i += 1) {
+      roots[i].style.setProperty("--hf-word-axis-y", String(sign * reach));
+      roots[i].style.setProperty("--hf-word-color", tone);
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-shared-axis-y span', { opacity: 0, '--hf-word-y': '32px' }, { opacity: 1, '--hf-word-y': '0px', duration: 0.22, stagger: 0.075, ease: 'power2.out' }, startTime);
+-->
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add shared-axis-y" />
+
+That writes one file: `compositions/components/shared-axis-y.html`.
+
+## Usage
+
+Open `compositions/components/shared-axis-y.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `remocn-port` `typography`.
+
+## 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/components/shared-axis-z.mdx b/docs/catalog/components/shared-axis-z.mdx
new file mode 100644
index 0000000000..c81d0cb4cf
--- /dev/null
+++ b/docs/catalog/components/shared-axis-z.mdx
@@ -0,0 +1,136 @@
+---
+title: "Shared Axis Z"
+description: "Scale-based shared-axis transition for focus shifts and context depth."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/shared-axis-z.html"
+  compositionId="shared-axis-z"
+  compositionSrc="compositions/components/shared-axis-z.html"
+  variables={[{"id":"direction","type":"enum","role":"motion","label":"Direction","description":"Which way the words travel along the z axis: in swells up from small, out settles down from large.","default":"in","options":[{"value":"in","label":"In"},{"value":"out","label":"Out"}]},{"id":"depth","type":"enum","role":"motion","label":"Depth","description":"Scales how far the words start from their final size, so the push covers a shorter or longer run in the same time.","default":"standard","options":[{"value":"shallow","label":"Shallow"},{"value":"standard","label":"Standard"},{"value":"deep","label":"Deep"}]},{"id":"tone","type":"enum","role":"style","label":"Tone","description":"Word colour: ink for light frames, paper for dark ones, accent rides --brand.","default":"ink","options":[{"value":"ink","label":"Ink"},{"value":"paper","label":"Paper"},{"value":"accent","label":"Accent"}]}]}
+>
+
+```html shared-axis-z.html
+<!--
+  Shared Axis Z - remocn typography primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Drive the timeline
+  integration from a paused GSAP timeline so renders remain deterministic.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result as a custom property
+  the CSS above consumes. The timeline recipe below is untouched by them: it
+  keeps driving one scale from 0.72 to 1, and these decide how far from the
+  final size that start really sits. At rest the scale is 1, so every setting
+  lands on the same final frame.
+
+    - direction (in | out, default in): which way the words travel along the
+      z axis. in swells up from a smaller start, out settles down from a
+      larger one.
+    - depth (shallow | standard | deep, default standard): scales the gap
+      between the start size and the final size. shallow covers half the run,
+      deep nearly double, in the same time.
+    - tone (ink | paper | accent, default ink): word colour. ink is near-black
+      for light frames, paper near-white for dark ones, accent rides --brand.
+
+  On every default the result is identical to the original: words swell from
+  0.72 to full size in near-black.
+-->
+
+<div
+  class="hf-remocn-shared-axis-z"
+  data-composition-variables='[
+    { "id": "direction", "type": "enum", "role": "motion", "label": "Direction", "description": "Which way the words travel along the z axis: in swells up from small, out settles down from large.", "default": "in", "options": [{ "value": "in", "label": "In" }, { "value": "out", "label": "Out" }] },
+    { "id": "depth", "type": "enum", "role": "motion", "label": "Depth", "description": "Scales how far the words start from their final size, so the push covers a shorter or longer run in the same time.", "default": "standard", "options": [{ "value": "shallow", "label": "Shallow" }, { "value": "standard", "label": "Standard" }, { "value": "deep", "label": "Deep" }] },
+    { "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Word colour: ink for light frames, paper for dark ones, accent rides --brand.", "default": "ink", "options": [{ "value": "ink", "label": "Ink" }, { "value": "paper", "label": "Paper" }, { "value": "accent", "label": "Accent" }] }
+  ]'
+>
+  <span>Zoom</span><span>context</span>
+</div>
+
+<style>
+  .hf-remocn-shared-axis-z {
+    color: var(--hf-word-color, #18181b);
+    font-family: Inter, system-ui, sans-serif;
+    font-weight: 900;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-shared-axis-z {
+    display: inline-flex;
+    gap: 12px;
+    font-size: 56px;
+    line-height: 1;
+  }
+  .hf-remocn-shared-axis-z span {
+    display: inline-block;
+    transform: translate(var(--hf-word-x, 0px), var(--hf-word-y, 0px))
+      scale(calc(1 + (var(--hf-word-scale, 1) - 1) * var(--hf-word-depth, 1)));
+    filter: blur(var(--hf-word-blur, 0px));
+    will-change: transform, filter, opacity;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    var signs = { in: 1, out: -1 };
+    var reaches = { shallow: 0.5, standard: 1, deep: 1.85 };
+    var tones = {
+      ink: "#18181b",
+      paper: "#fafafa",
+      accent: "var(--brand, #34d399)",
+    };
+
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var sign = signs[pick(signs, vars.direction, "in")];
+    var reach = reaches[pick(reaches, vars.depth, "standard")];
+    var tone = tones[pick(tones, vars.tone, "ink")];
+
+    var roots = document.querySelectorAll(".hf-remocn-shared-axis-z");
+    for (var i = 0; i < roots.length; i += 1) {
+      roots[i].style.setProperty("--hf-word-depth", String(sign * reach));
+      roots[i].style.setProperty("--hf-word-color", tone);
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-shared-axis-z span', { opacity: 0, '--hf-word-scale': 0.72 }, { opacity: 1, '--hf-word-scale': 1, duration: 0.34, stagger: 0.06, ease: 'back.out(1.8)' }, startTime);
+-->
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add shared-axis-z" />
+
+That writes one file: `compositions/components/shared-axis-z.html`.
+
+## Usage
+
+Open `compositions/components/shared-axis-z.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `remocn-port` `typography`.
+
+## 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/components/shimmer-sweep.mdx b/docs/catalog/components/shimmer-sweep.mdx
index ede8830937..3f5ec76059 100644
--- a/docs/catalog/components/shimmer-sweep.mdx
+++ b/docs/catalog/components/shimmer-sweep.mdx
@@ -3,23 +3,94 @@ title: "Shimmer Sweep"
 description: "Animated light sweep across text or elements using a CSS gradient mask — ideal for AI accents and premium reveals"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/shimmer-sweep.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/shimmer-sweep.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/components/shimmer-sweep.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Shimmer Sweep preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add shimmer-sweep
-```
+<InstallCommand command="npx hyperframes add shimmer-sweep" />
 
 That writes one file: `compositions/components/shimmer-sweep.html`.
 
-## Paste it into your composition
+## Source
+
+<Accordion title={`shimmer-sweep.html`}>
+
+```html
+<!--
+  Shimmer Sweep — animated light pass across text or elements.
+
+  Usage: place this snippet AFTER your .shimmer-sweep-target elements.
+  Wrap your text element with class="shimmer-sweep-target" and
+  paste this snippet into your composition. The GSAP timeline drives
+  the sweep position for deterministic frame-by-frame rendering.
+
+  Customize:
+  - --shimmer-color: highlight color (default rgba(255,255,255,0.6))
+  - --shimmer-width: highlight band width as % (default 20%)
+  - --shimmer-angle: sweep angle (default 120deg)
+  - Timeline duration/ease: adjust in the script below
+-->
+
+<style>
+  .shimmer-sweep-target {
+    position: relative;
+    display: inline-block;
+  }
+
+  .shimmer-sweep-target .shimmer-mask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    background: linear-gradient(
+      var(--shimmer-angle, 120deg),
+      transparent 0%,
+      transparent calc(var(--shimmer-pos, -20%) - var(--shimmer-width, 20%) / 2),
+      var(--shimmer-color, rgba(255, 255, 255, 0.6)) var(--shimmer-pos, -20%),
+      transparent calc(var(--shimmer-pos, -20%) + var(--shimmer-width, 20%) / 2),
+      transparent 100%
+    );
+    mix-blend-mode: overlay;
+  }
+</style>
+
+<script>
+  (function () {
+    // Auto-inject .shimmer-mask into every .shimmer-sweep-target
+    document.querySelectorAll(".shimmer-sweep-target").forEach((el) => {
+      if (!el.querySelector(".shimmer-mask")) {
+        const mask = document.createElement("div");
+        mask.className = "shimmer-mask";
+        el.appendChild(mask);
+      }
+    });
+  })();
+</script>
+
+<!--
+  Timeline integration example (add to your composition's GSAP timeline):
+
+  // Single sweep from left to right
+  tl.fromTo(".shimmer-sweep-target", {
+    "--shimmer-pos": "-20%",
+  }, {
+    "--shimmer-pos": "120%",
+    duration: 1.2,
+    ease: "power2.inOut",
+    stagger: 0.15,
+  }, startTime);
+-->
+```
+
+</Accordion>
 
-Open `compositions/components/shimmer-sweep.html` and copy what is inside into your own composition.
-The file opens with a comment header that walks you through it.
+## Usage
 
-A component has no size or duration of its own. It takes both from the composition
-you paste it into.
+Open `compositions/components/shimmer-sweep.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/components/signup-flow.mdx b/docs/catalog/components/signup-flow.mdx
new file mode 100644
index 0000000000..3d33055b51
--- /dev/null
+++ b/docs/catalog/components/signup-flow.mdx
@@ -0,0 +1,117 @@
+---
+title: "Signup Flow"
+description: "A composed signup flow with social action, email field, password field, and submit button"
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/components/signup-flow.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Signup Flow preview" />
+
+## Install
+
+<InstallCommand command="npx hyperframes add signup-flow" />
+
+That writes one file: `compositions/components/signup-flow.html`.
+
+## Source
+
+<Accordion title={`signup-flow.html`}>
+
+```html
+<!--
+  Signup Flow - Remocn-inspired composed UI flow for HyperFrames.
+
+  Paste the markup and CSS into a composition. Use the timeline integration
+  note at the bottom as the starting point for deterministic GSAP animation.
+-->
+
+<div class="hf-ui-signup-flow">
+  <h3>Create account</h3>
+  <button class="hf-ui-signup-social" type="button">Continue with Google</button>
+  <div class="hf-ui-signup-divider"><span></span><em>or</em><span></span></div>
+  <div class="hf-ui-signup-field">email@company.com</div>
+  <div class="hf-ui-signup-field muted">Password</div>
+  <button class="hf-ui-signup-submit" type="button">Start building</button>
+</div>
+
+<style>
+  .hf-ui-signup-flow {
+    display: grid;
+    gap: 14px;
+    width: 430px;
+    padding: 30px;
+    border: 1px solid #e4e4e7;
+    border-radius: 28px;
+    background: #ffffff;
+    color: #18181b;
+    font-family: Inter, system-ui, sans-serif;
+    box-shadow: 0 28px 84px rgba(0, 0, 0, 0.12);
+  }
+  .hf-ui-signup-flow h3 {
+    margin: 0 0 6px;
+    text-align: center;
+    font-size: 28px;
+  }
+  .hf-ui-signup-flow button,
+  .hf-ui-signup-field {
+    height: 50px;
+    border-radius: 14px;
+    font-weight: 850;
+  }
+  .hf-ui-signup-social,
+  .hf-ui-signup-field {
+    border: 1px solid #e4e4e7;
+    background: #ffffff;
+    color: #18181b;
+  }
+  .hf-ui-signup-field {
+    display: flex;
+    align-items: center;
+    padding: 0 15px;
+  }
+  .hf-ui-signup-field.muted {
+    color: #a1a1aa;
+  }
+  .hf-ui-signup-divider {
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    gap: 10px;
+    align-items: center;
+    color: #a1a1aa;
+    font-size: 12px;
+    font-weight: 900;
+  }
+  .hf-ui-signup-divider span {
+    height: 1px;
+    background: #e4e4e7;
+  }
+  .hf-ui-signup-submit {
+    border: 0;
+    background: #18181b;
+    color: #ffffff;
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-ui-signup-flow', { opacity: 0, y: 26 }, { opacity: 1, y: 0, duration: 0.36, ease: 'power2.out' }, 0.25);
+  tl.fromTo('.hf-ui-signup-flow > *', { y: 14, opacity: 0 }, { y: 0, opacity: 1, duration: 0.24, stagger: 0.05, ease: 'power2.out' }, 0.48);
+  tl.to('.hf-ui-signup-submit', { scale: 0.97, duration: 0.12, yoyo: true, repeat: 1, ease: 'power1.inOut' }, 1.2);
+-->
+```
+
+</Accordion>
+
+## Usage
+
+Open `compositions/components/signup-flow.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+
+{/* hf:generated-footer */}
+
+Tagged `ui-flow` `remocn-port` `signup` `form`.
+
+## 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/components/simulated-cursor.mdx b/docs/catalog/components/simulated-cursor.mdx
new file mode 100644
index 0000000000..f25c906a10
--- /dev/null
+++ b/docs/catalog/components/simulated-cursor.mdx
@@ -0,0 +1,180 @@
+---
+title: "Simulated Cursor"
+description: "A lightweight cursor pointer and click pulse for product walkthroughs and agent UI demos"
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/simulated-cursor.html"
+  compositionId="simulated-cursor"
+  compositionSrc="compositions/components/simulated-cursor.html"
+  variables={[{"id":"size","type":"number","role":"layout","label":"Size","description":"Height and width of the pointer in pixels. The click ring scales with it. Values outside the range clamp to the nearest end and anything that is not a number falls back to 44.","default":44,"min":20,"max":120,"step":2,"unit":"px"},{"id":"tone","type":"enum","role":"style","label":"Tone","description":"Pointer fill and click ring colour: light reads on dark screens, dark reads on light ones, accent rides --hf-ui-accent.","default":"light","options":[{"value":"light","label":"Light"},{"value":"dark","label":"Dark"},{"value":"accent","label":"Accent"}]},{"id":"pulse","type":"enum","role":"style","label":"Click ring","description":"Weight of the ring the click animation expands: subtle is a thin small ring, bold a thick wide one, none removes the ring entirely.","default":"standard","options":[{"value":"subtle","label":"Subtle"},{"value":"standard","label":"Standard"},{"value":"bold","label":"Bold"},{"value":"none","label":"None"}]}]}
+>
+
+```html simulated-cursor.html
+<!--
+  Simulated Cursor - pointer and click pulse primitive.
+
+  Paste the markup, CSS and script once, then animate .hf-simulated-cursor
+  with x/y values in your paused GSAP timeline. Trigger the click pulse by
+  scaling/fading .hf-simulated-cursor-pulse.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or invalid, and writes the result as a custom property the
+  CSS above consumes. The timeline recipe below is untouched by them: it keeps
+  driving the pointer position and the ring scale and fade.
+
+    - size (number 20 to 120, step 2, unit px, default 44): height and width of
+      the pointer. The click ring, its offset and its border scale with it, so
+      the tip stays anchored at the animated x/y. Values below 20 clamp to 20,
+      values above 120 clamp to 120, and anything that is not a number falls
+      back to 44.
+    - tone (light | dark | accent, default light): pointer fill, outline and
+      ring colour. light is the white pointer with a dark outline for dark
+      screens, dark flips both for light screens, accent rides --hf-ui-accent.
+    - pulse (subtle | standard | bold | none, default standard): weight of the
+      click ring. subtle is thin and small, bold thick and wide, none removes
+      the ring entirely. The ring stays centred on the same point in every
+      case, and it is only on screen while the click animation runs.
+
+  On every default the result is identical to the original: a 44px white
+  pointer with a 22px, 2px white ring offset 9px from the tip.
+-->
+
+<div
+  class="hf-simulated-cursor"
+  aria-hidden="true"
+  data-composition-variables='[
+    {"id": "size", "type": "number", "role": "layout", "label": "Size", "description": "Height and width of the pointer in pixels. The click ring scales with it. Values outside the range clamp to the nearest end and anything that is not a number falls back to 44.", "default": 44, "min": 20, "max": 120, "step": 2, "unit": "px"},
+    {"id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Pointer fill and click ring colour: light reads on dark screens, dark reads on light ones, accent rides --hf-ui-accent.", "default": "light", "options": [{"value": "light", "label": "Light"}, {"value": "dark", "label": "Dark"}, {"value": "accent", "label": "Accent"}]},
+    {"id": "pulse", "type": "enum", "role": "style", "label": "Click ring", "description": "Weight of the ring the click animation expands: subtle is a thin small ring, bold a thick wide one, none removes the ring entirely.", "default": "standard", "options": [{"value": "subtle", "label": "Subtle"}, {"value": "standard", "label": "Standard"}, {"value": "bold", "label": "Bold"}, {"value": "none", "label": "None"}]}
+  ]'
+>
+  <div class="hf-simulated-cursor-pulse"></div>
+  <svg viewBox="0 0 24 24" width="44" height="44">
+    <path
+      d="M3 2.8 20.6 14 12.8 15.5 9 22 3 2.8Z"
+      fill="white"
+      stroke="rgba(0,0,0,0.45)"
+      stroke-width="1.4"
+    />
+  </svg>
+</div>
+
+<style>
+  .hf-simulated-cursor {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: calc(44px * var(--hf-cursor-scale, 1));
+    height: calc(44px * var(--hf-cursor-scale, 1));
+    transform: translate3d(var(--hf-cursor-x, 0px), var(--hf-cursor-y, 0px), 0);
+    pointer-events: none;
+    z-index: 999;
+    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.24));
+  }
+  .hf-simulated-cursor svg {
+    width: 100%;
+    height: 100%;
+  }
+  .hf-simulated-cursor svg path {
+    fill: var(--hf-cursor-fill, #ffffff);
+    stroke: var(--hf-cursor-edge, rgba(0, 0, 0, 0.45));
+  }
+  .hf-simulated-cursor-pulse {
+    display: var(--hf-cursor-ring-display, block);
+    position: absolute;
+    left: calc((20px - var(--hf-cursor-ring-size, 22px) / 2) * var(--hf-cursor-scale, 1));
+    top: calc((20px - var(--hf-cursor-ring-size, 22px) / 2) * var(--hf-cursor-scale, 1));
+    width: calc(var(--hf-cursor-ring-size, 22px) * var(--hf-cursor-scale, 1));
+    height: calc(var(--hf-cursor-ring-size, 22px) * var(--hf-cursor-scale, 1));
+    border: calc(var(--hf-cursor-ring-width, 2px) * var(--hf-cursor-scale, 1)) solid
+      var(--hf-cursor-ring, rgba(255, 255, 255, 0.85));
+    border-radius: 999px;
+    opacity: 0;
+    transform: scale(0.2);
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised or out-of-range overrides return to their declared defaults.
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var tones = {
+      light: { fill: "#ffffff", edge: "rgba(0, 0, 0, 0.45)", ring: "rgba(255, 255, 255, 0.85)" },
+      dark: { fill: "#18181b", edge: "rgba(255, 255, 255, 0.75)", ring: "rgba(24, 24, 27, 0.75)" },
+      accent: {
+        fill: "var(--hf-ui-accent, #3ce6ac)",
+        edge: "rgba(0, 0, 0, 0.45)",
+        ring: "var(--hf-ui-accent, #3ce6ac)",
+      },
+    };
+    var pulses = {
+      subtle: { size: "18px", width: "1px", display: "block" },
+      standard: { size: "22px", width: "2px", display: "block" },
+      bold: { size: "28px", width: "3px", display: "block" },
+      none: { size: "22px", width: "2px", display: "none" },
+    };
+
+    var size = typeof vars.size === "number" ? vars.size : parseFloat(vars.size);
+    if (!isFinite(size)) size = 44;
+    size = Math.min(120, Math.max(20, size));
+
+    var tone = tones[pick(tones, vars.tone, "light")];
+    var pulse = pulses[pick(pulses, vars.pulse, "standard")];
+
+    var roots = document.querySelectorAll(".hf-simulated-cursor");
+    for (var i = 0; i < roots.length; i += 1) {
+      var root = roots[i];
+      root.style.setProperty("--hf-cursor-scale", String(size / 44));
+      root.style.setProperty("--hf-cursor-fill", tone.fill);
+      root.style.setProperty("--hf-cursor-edge", tone.edge);
+      root.style.setProperty("--hf-cursor-ring", tone.ring);
+      root.style.setProperty("--hf-cursor-ring-size", pulse.size);
+      root.style.setProperty("--hf-cursor-ring-width", pulse.width);
+      root.style.setProperty("--hf-cursor-ring-display", pulse.display);
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+
+  tl.to(".hf-simulated-cursor", { "--hf-cursor-x": "760px", "--hf-cursor-y": "420px", duration: 0.8, ease: "power2.inOut" }, startTime);
+  tl.fromTo(".hf-simulated-cursor-pulse", { opacity: 0.8, scale: 0.2 }, { opacity: 0, scale: 2.4, duration: 0.45, ease: "power2.out" }, startTime + 0.8);
+-->
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add simulated-cursor" />
+
+That writes one file: `compositions/components/simulated-cursor.html`.
+
+## Usage
+
+Open `compositions/components/simulated-cursor.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+
+{/* hf:generated-footer */}
+
+Tagged `video-primitive` `motion-primitive` `cursor` `ui` `walkthrough`.
+
+## 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/components/skeleton-reveal.mdx b/docs/catalog/components/skeleton-reveal.mdx
new file mode 100644
index 0000000000..41c40562d2
--- /dev/null
+++ b/docs/catalog/components/skeleton-reveal.mdx
@@ -0,0 +1,169 @@
+---
+title: "Skeleton Reveal"
+description: "A skeleton loader transition that pulses, then cross-fades into content"
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/skeleton-reveal.html"
+  compositionId="skeleton-reveal"
+  compositionSrc="compositions/components/skeleton-reveal.html"
+  variables={[{"id":"name","type":"string","role":"content","label":"Name","description":"Primary line revealed once the skeleton fades out.","default":"Jane Cooper"},{"id":"detail","type":"string","role":"content","label":"Detail","description":"Secondary line under the name, such as an email or a role.","default":"jane@example.com"},{"id":"tone","type":"enum","role":"style","label":"Tone","description":"Card palette. Light is the paper card, dark is a near-black card with the matching skeleton bars and text.","default":"light","options":[{"value":"light","label":"Light"},{"value":"dark","label":"Dark"}]}]}
+>
+
+```html skeleton-reveal.html
+<!--
+  Skeleton Reveal - transitions.dev-inspired primitive for HyperFrames.
+
+  Paste the markup and CSS into a composition. Use the timeline integration
+  note at the bottom as the starting point for deterministic GSAP animation.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or invalid, and writes the result as a custom property the
+  CSS below consumes, or straight onto the revealed text. The timeline recipe
+  stays untouched: it keeps sweeping the skeleton and cross-fading to the
+  content, and these decide what that content says and what both halves look
+  like.
+
+    - name (string, default Jane Cooper): the primary line revealed once the
+      skeleton fades out. Blank falls back to the default.
+    - detail (string, default jane@example.com): the secondary line under the
+      name, such as an email or a role. Blank falls back to the default.
+    - tone (light | dark, default light): card palette. Light is the paper card
+      with grey bars, dark is a near-black card with the matching skeleton bars
+      and text, for compositions on a dark stage.
+
+  On every default the result is identical to the original: a white card that
+  shimmers, then reveals Jane Cooper and jane@example.com.
+-->
+
+<div
+  class="hf-transition-skeleton-reveal"
+  data-composition-variables='[
+    { "id": "name", "type": "string", "role": "content", "label": "Name", "description": "Primary line revealed once the skeleton fades out.", "default": "Jane Cooper" },
+    { "id": "detail", "type": "string", "role": "content", "label": "Detail", "description": "Secondary line under the name, such as an email or a role.", "default": "jane@example.com" },
+    { "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Card palette. Light is the paper card, dark is a near-black card with the matching skeleton bars and text.", "default": "light", "options": [{ "value": "light", "label": "Light" }, { "value": "dark", "label": "Dark" }] }
+  ]'
+>
+  <div class="skeleton"></div>
+  <div class="content"><strong>Jane Cooper</strong><span>jane@example.com</span></div>
+</div>
+
+<style>
+  .hf-transition-skeleton-reveal {
+    position: relative;
+    width: 340px;
+    height: 76px;
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-transition-skeleton-reveal .skeleton,
+  .hf-transition-skeleton-reveal .content {
+    position: absolute;
+    inset: 0;
+    border: 1px solid var(--hf-sr-border, #e4e4e7);
+    border-radius: 14px;
+    background: var(--hf-sr-surface, #fff);
+  }
+  .hf-transition-skeleton-reveal .skeleton {
+    background: linear-gradient(
+      90deg,
+      var(--hf-sr-bar, #f4f4f5),
+      var(--hf-sr-bar-strong, #e4e4e7),
+      var(--hf-sr-bar, #f4f4f5)
+    );
+    background-size: 240% 100%;
+    opacity: 1;
+  }
+  .hf-transition-skeleton-reveal .content {
+    display: grid;
+    align-content: center;
+    gap: 5px;
+    padding: 15px;
+    opacity: 0;
+    color: var(--hf-sr-ink, #18181b);
+  }
+  .hf-transition-skeleton-reveal span {
+    color: var(--hf-sr-muted, #71717a);
+    font-size: 14px;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    var tones = {
+      light: null,
+      dark: {
+        "--hf-sr-surface": "#18181b",
+        "--hf-sr-border": "#27272a",
+        "--hf-sr-bar": "#27272a",
+        "--hf-sr-bar-strong": "#3f3f46",
+        "--hf-sr-ink": "#fafafa",
+        "--hf-sr-muted": "#a1a1aa",
+      },
+    };
+    var defaultName = "Jane Cooper";
+    var defaultDetail = "jane@example.com";
+
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    function text(value, fallback) {
+      return typeof value === "string" && value.trim() ? value.trim() : fallback;
+    }
+
+    var tone = tones[pick(tones, vars.tone, "light")];
+    var name = text(vars.name, defaultName);
+    var detail = text(vars.detail, defaultDetail);
+
+    var roots = document.querySelectorAll(".hf-transition-skeleton-reveal");
+    for (var i = 0; i < roots.length; i += 1) {
+      var root = roots[i];
+      if (tone) {
+        for (var key in tone) root.style.setProperty(key, tone[key]);
+      }
+      var strong = root.querySelector(".content strong");
+      var span = root.querySelector(".content span");
+      if (strong) strong.textContent = name;
+      if (span) span.textContent = detail;
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.to('.hf-transition-skeleton-reveal .skeleton', { backgroundPosition: '100% 0', duration: 0.7, ease: 'none' }, startTime); tl.to('.hf-transition-skeleton-reveal .skeleton', { opacity: 0, duration: 0.22 }, startTime + 0.72); tl.to('.hf-transition-skeleton-reveal .content', { opacity: 1, duration: 0.24 }, startTime + 0.78);
+-->
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add skeleton-reveal" />
+
+That writes one file: `compositions/components/skeleton-reveal.html`.
+
+## Usage
+
+Open `compositions/components/skeleton-reveal.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+
+{/* hf:generated-footer */}
+
+Tagged `video-primitive` `transition-primitive` `transitions-dev-port` `skeleton` `reveal`.
+
+## 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/components/slit-scan-reveal.mdx b/docs/catalog/components/slit-scan-reveal.mdx
new file mode 100644
index 0000000000..a8a5bf24bd
--- /dev/null
+++ b/docs/catalog/components/slit-scan-reveal.mdx
@@ -0,0 +1,374 @@
+---
+title: "Slit Scan Reveal"
+description: "The frame's rows sample an authored subject at offset times: a canvas painter draws row slices of one pure position function evaluated at t minus offset(row), smearing arrival through time until the offsets collapse to zero and the mark holds coherent."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/slit-scan-reveal.html"
+  compositionId="slit-scan-reveal"
+  compositionSrc="compositions/components/slit-scan-reveal.html"
+  variables={[{"id":"axis","type":"enum","role":"style","label":"Axis","description":"rows smears arrival across horizontal slices; cols across vertical slices.","default":"rows","options":[{"value":"rows","label":"Rows"},{"value":"cols","label":"Columns"}]},{"id":"spread","type":"number","role":"timing","label":"Spread","description":"Maximum sampling offset in seconds across the frame; larger smears further through time.","default":0.45},{"id":"resolve_at","type":"number","role":"timing","label":"Resolve at","description":"Seconds from mount start when the offsets start collapsing to zero. Clamped so the collapse and any exit stay inside the clip.","default":2.2},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Subject ring and orbit color: green rides --brand, blue rides --accent, violet rides --accent-2.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Optional departure. Default none: the resolved mark holds until the frame cuts.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
+>
+
+```html slit-scan-reveal.html
+<!doctype html>
+<!--
+  slit-scan-reveal: HyperFrames video primitive (time)
+
+  The frame's rows sample the subject at offset times. The subject is an
+  authored token mark (an accent-ringed disc with an orbit dot) whose
+  motion is one pure position function pos(t): it sweeps in from the wing
+  on a decaying sine bob and rests dead-center. A canvas painter draws the
+  frame as row (or column) slices, slice i showing the subject's state at
+  t - offset(i): arrival smears through time, near bands leading, far
+  bands trailing. On the resolve cue the offsets collapse to zero with one
+  eased pass, the smear zips shut, and the subject holds coherent.
+
+  Variables (declared in data-composition-variables below):
+    - axis ("rows" | "cols"): horizontal row slices or vertical column
+      slices.
+    - spread (seconds): the maximum sampling offset across the frame.
+    - resolve_at (seconds): when the offsets start collapsing to zero
+      (0.6s eased collapse). Clamped so the collapse and any exit stay
+      inside the clip.
+    - accent ("green" | "blue" | "violet"): green rides --brand, blue
+      rides --accent, violet rides --accent-2.
+    - exit ("none" | "fade" | "up", default none): frame roots own
+      transitions; the default holds the resolved mark to the last pixel.
+
+  Envelope, fixed IN and OUT with elastic HOLD only (never timeScale):
+    the subject's travel and the collapse are authored against the cues;
+    HOLD = D - (resolve end) - OUT, truly still (after the collapse every
+    slice samples the same resting state, so repaints are identical).
+    OUT_BASE = 0.45s only when exit != none.
+
+  Determinism (canvas 2D law): per-slice offset jitter comes from one
+  table computed once during synchronous timeline construction from fixed
+  LCG seed 0x51175c4e. Every painted frame is a pure
+  function of (that table, the timeline's current time): the timeline's
+  onUpdate clears the canvas and, for every slice, clips to the slice band
+  and redraws the whole subject at its sampled time from scratch. pos(t)
+  is closed-form (cubic ease + integer sine cycles that end at zero), so
+  any sampled time is exact. No Math.random, no wall clock, no
+  incremental state: eventful seeks repaint identically in any order and
+  either direction.
+
+  Mount contract: the runtime clones only this template. #root fills the
+  host box (no data-width/data-height, container-type: size, cqmin units),
+  is styled via #root only, and registers one paused timeline under the
+  LITERAL "slit-scan-reveal" key. All DOM state is set with explicit
+  endpoints (gsap.set + fromTo) so any seek order lands identical frames.
+-->
+<html
+  lang="en"
+  data-composition-id="slit-scan-reveal"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "axis", "type": "enum", "role": "style", "label": "Axis", "description": "rows smears arrival across horizontal slices; cols across vertical slices.", "default": "rows", "options": [{ "value": "rows", "label": "Rows" }, { "value": "cols", "label": "Columns" }] },
+    { "id": "spread", "type": "number", "role": "timing", "label": "Spread", "description": "Maximum sampling offset in seconds across the frame; larger smears further through time.", "default": 0.45 },
+    { "id": "resolve_at", "type": "number", "role": "timing", "label": "Resolve at", "description": "Seconds from mount start when the offsets start collapsing to zero. Clamped so the collapse and any exit stay inside the clip.", "default": 2.2 },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Subject ring and orbit color: green rides --brand, blue rides --accent, violet rides --accent-2.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the resolved mark holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Slit Scan Reveal</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="slit-scan-reveal" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, "Inter", system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .ssr-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .ssr-stage {
+            position: absolute;
+            inset: 0;
+            will-change: transform, opacity;
+          }
+
+          .ssr-canvas {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+          }
+        </style>
+
+        <div
+          id="slit-scan-reveal-clip"
+          class="ssr-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="ssr-stage">
+            <canvas class="ssr-canvas" aria-hidden="true"></canvas>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".ssr-stage");
+            var canvas = root.querySelector(".ssr-canvas");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var axis = vars.axis === "cols" ? "cols" : "rows";
+            var spreadRaw = parseFloat(vars.spread);
+            var spread = isFinite(spreadRaw) ? Math.min(Math.max(0.1, spreadRaw), 1.2) : 0.45;
+            var resolveRaw = parseFloat(vars.resolve_at);
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            // Envelope. The collapse is 0.6s; resolve_at is clamped so the
+            // collapse and any exit always fit inside the clip.
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var OUT = exit === "none" ? 0 : 0.45;
+            var COLLAPSE = 0.6;
+            var resolveAt = isFinite(resolveRaw) ? resolveRaw : 2.2;
+            resolveAt = Math.min(
+              Math.max(0.4, resolveAt),
+              Math.max(0.4, duration - COLLAPSE - OUT - 0.1),
+            );
+            // The subject's travel ends just before the collapse begins so
+            // the zip-shut lands on a resting subject.
+            var MOVE_START = 0.25;
+            var MOVE_END = Math.max(MOVE_START + 0.6, resolveAt - 0.1);
+            var OUT_START = duration - OUT;
+
+            // Canvas raster basis, fixed once at mount (elastic root).
+            var dpr = Math.min(2, Math.max(1, Number(window.devicePixelRatio) || 1));
+            var box = root.getBoundingClientRect();
+            var cssW = Math.max(1, Math.round(box.width) || 640);
+            var cssH = Math.max(1, Math.round(box.height) || 360);
+            canvas.width = Math.round(cssW * dpr);
+            canvas.height = Math.round(cssH * dpr);
+            var ctx = canvas.getContext("2d");
+            var minDim = Math.min(canvas.width, canvas.height);
+
+            // Resolve tokens to concrete colors once at mount so canvas
+            // fills never depend on style recalc during seeks.
+            var hostDoc = root.ownerDocument;
+            function resolveColor(cssColor, fallback) {
+              var probe = hostDoc.createElement("span");
+              probe.style.color = cssColor;
+              root.appendChild(probe);
+              var value = getComputedStyle(probe).color || fallback;
+              probe.remove();
+              return value;
+            }
+            var accentColor = resolveColor(accentColors[accent], "#71f5a7");
+            var surfaceColor = resolveColor("var(--surface, #14171c)", "#14171c");
+            var fgColor = resolveColor("var(--fg, #f8fafc)", "#f8fafc");
+
+            // Seeded per-slice offset jitter: a stable table, computed once.
+            var SLICES = 96;
+            var jitter = (function () {
+              var state = 0x51175c4e;
+              function next() {
+                state = (Math.imul(1664525, state) + 1013904223) >>> 0;
+                return state / 4294967296;
+              }
+              var rows = [];
+              for (var i = 0; i < SLICES; i += 1) {
+                rows.push(0.96 + 0.08 * next());
+              }
+              return rows;
+            })();
+
+            function clamp01(v) {
+              return v < 0 ? 0 : v > 1 ? 1 : v;
+            }
+
+            // The subject's authored motion: ONE pure position function.
+            // Cubic-eased sweep from the wing to dead center with a
+            // decaying two-cycle sine bob (integer cycles, exactly zero at
+            // u = 1) and a settling scale. The sweep runs ACROSS the slice
+            // axis (rows: left wing in, cols: top wing down) so every band
+            // cuts the travel and the offsets read as a staircase smear,
+            // not a local skew. Defined for every t; clamped flat outside
+            // [MOVE_START, MOVE_END], so sampled times before mount or
+            // into the hold are exact and still.
+            function subjectState(t) {
+              var u = clamp01((t - MOVE_START) / (MOVE_END - MOVE_START));
+              var e = 1 - Math.pow(1 - u, 3);
+              var decay = (1 - u) * (1 - u);
+              var travel = -0.16 + 0.66 * e;
+              var bob = 0.5 + 0.15 * Math.sin(Math.PI * 2 * 2 * u) * decay;
+              return {
+                x: (axis === "rows" ? travel : bob) * canvas.width,
+                y: (axis === "rows" ? bob : travel) * canvas.height,
+                rot: 0.5 * Math.sin(Math.PI * 2 * u) * decay,
+                scale: 0.82 + 0.18 * e,
+                appear: clamp01(u / 0.12),
+              };
+            }
+
+            // Draw the whole subject (token disc + accent ring + orbit dot)
+            // at one sampled state. Callers clip to a slice band first.
+            function drawSubject(s) {
+              if (s.appear <= 0) return;
+              var r = 0.15 * minDim * s.scale;
+              ctx.save();
+              ctx.translate(s.x, s.y);
+              ctx.rotate(s.rot);
+              ctx.globalAlpha = s.appear;
+              // Disc body.
+              ctx.fillStyle = surfaceColor;
+              ctx.beginPath();
+              ctx.arc(0, 0, r, 0, Math.PI * 2);
+              ctx.fill();
+              // Accent ring.
+              ctx.strokeStyle = accentColor;
+              ctx.lineWidth = Math.max(1, 0.016 * minDim);
+              ctx.beginPath();
+              ctx.arc(0, 0, r, 0, Math.PI * 2);
+              ctx.stroke();
+              // Inner core.
+              ctx.fillStyle = fgColor;
+              ctx.globalAlpha = s.appear * 0.92;
+              ctx.beginPath();
+              ctx.arc(0, 0, r * 0.3, 0, Math.PI * 2);
+              ctx.fill();
+              // Orbit dot: the asymmetry that makes the smear legible.
+              ctx.fillStyle = accentColor;
+              ctx.globalAlpha = s.appear;
+              ctx.beginPath();
+              ctx.arc(r * 0.72, 0, r * 0.13, 0, Math.PI * 2);
+              ctx.fill();
+              ctx.restore();
+            }
+
+            // Pure repaint: for every slice, clip to its band and draw the
+            // subject at t - offset(slice) * collapse(t).
+            function paint(t) {
+              ctx.clearRect(0, 0, canvas.width, canvas.height);
+              var collapse = 1 - clamp01((t - resolveAt) / COLLAPSE);
+              // Eased collapse: smooth both ends (power2.inOut shape).
+              collapse =
+                collapse < 0.5 ? 2 * collapse * collapse : 1 - Math.pow(-2 * collapse + 2, 2) / 2;
+              if (collapse <= 0) {
+                // Resolved: one coherent draw, no per-slice clipping.
+                drawSubject(subjectState(t));
+                return;
+              }
+              var along = axis === "rows" ? canvas.height : canvas.width;
+              var band = along / SLICES;
+              for (var i = 0; i < SLICES; i += 1) {
+                var frac = i / (SLICES - 1);
+                var offset = spread * frac * jitter[i] * collapse;
+                var s = subjectState(t - offset);
+                if (s.appear <= 0) continue;
+                ctx.save();
+                ctx.beginPath();
+                if (axis === "rows") {
+                  ctx.rect(0, i * band, canvas.width, band + 1);
+                } else {
+                  ctx.rect(i * band, 0, band + 1, canvas.height);
+                }
+                ctx.clip();
+                drawSubject(s);
+                ctx.restore();
+              }
+            }
+
+            gsap.set(stage, { opacity: 1, y: "0cqh" });
+
+            var tl = gsap.timeline({
+              paused: true,
+              onUpdate: function () {
+                paint(tl.time());
+              },
+            });
+
+            // Anchor tween: an inert plain-object tween spanning the full
+            // authored duration so tl.time() covers [0, D] and onUpdate
+            // repaints the canvas on every eventful seek.
+            tl.to({ p: 0 }, { p: 1, duration: duration, ease: "none" }, 0);
+
+            // HOLD: truly still. After the collapse every slice samples the
+            // same resting state, so the canvas repaints one coherent mark.
+
+            // OUT: optional departure; exit none holds until the frame cuts.
+            if (exit === "up") {
+              tl.to(stage, { y: "-4cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "fade") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            }
+
+            tl.seek(0);
+            paint(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["slit-scan-reveal"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add slit-scan-reveal" />
+
+That writes one file: `compositions/components/slit-scan-reveal.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/slit-scan-reveal.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `time` `slit-scan` `canvas` `deterministic` `experiment`.
+
+## 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/components/slot-machine-roll.mdx b/docs/catalog/components/slot-machine-roll.mdx
new file mode 100644
index 0000000000..e0a39ec872
--- /dev/null
+++ b/docs/catalog/components/slot-machine-roll.mdx
@@ -0,0 +1,175 @@
+---
+title: "Slot Machine Roll"
+description: "A vertical reel scrolls characters from one value to another."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/slot-machine-roll.html"
+  compositionId="slot-machine-roll"
+  compositionSrc="compositions/components/slot-machine-roll.html"
+  variables={[{"id":"result","type":"string","role":"content","label":"Result","description":"Characters the reels land on, one reel column per character. Whitespace is stripped and every reel starts on a zero.","default":"A7K"},{"id":"direction","type":"enum","role":"motion","label":"Direction","description":"Which way the reels roll: up lifts the zero out through the top, down drops it out through the bottom.","default":"up","options":[{"value":"up","label":"Up"},{"value":"down","label":"Down"}]},{"id":"size","type":"enum","role":"layout","label":"Size","description":"Reel height and type size. The roll distance scales with it so the reel always lands exactly one row on.","default":"standard","options":[{"value":"small","label":"Small"},{"value":"standard","label":"Standard"},{"value":"large","label":"Large"}]},{"id":"tone","type":"enum","role":"style","label":"Tone","description":"Character colour: ink for light frames, paper for dark ones, accent rides --brand.","default":"ink","options":[{"value":"ink","label":"Ink"},{"value":"paper","label":"Paper"},{"value":"accent","label":"Accent"}]}]}
+>
+
+```html slot-machine-roll.html
+<!--
+  Slot Machine Roll - remocn typography primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Drive the timeline
+  integration from a paused GSAP timeline so renders remain deterministic.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result as a custom property
+  the CSS below consumes. The timeline recipe stays untouched by them: it keeps
+  driving one vertical offset of exactly one row, and these decide how tall that
+  row is, which way it travels and what it lands on.
+
+    - result (text, default "A7K"): the characters the reels land on, one reel
+      column per character. Whitespace is stripped, and blank or non-text input
+      falls back to the default three. Every reel starts on a zero.
+    - direction (up | down, default up): which way the reels roll. up lifts the
+      zero out through the top, down drops it out through the bottom.
+    - size (small | standard | large, default standard): reel height and type
+      size, 48px, 74px or 104px. The roll distance is scaled by the same factor,
+      so whatever the size the reel still lands exactly one row on.
+    - tone (ink | paper | accent, default ink): character colour. ink is
+      near-black for light frames, paper near-white for dark ones, accent rides
+      --brand.
+
+  On every default the result is identical to the original: three 74px reels in
+  near-black rolling 0 up to A, 7 and K.
+-->
+
+<div
+  class="hf-remocn-slot-machine-roll"
+  data-composition-variables='[
+    { "id": "result", "type": "string", "role": "content", "label": "Result", "description": "Characters the reels land on, one reel column per character. Whitespace is stripped and every reel starts on a zero.", "default": "A7K" },
+    { "id": "direction", "type": "enum", "role": "motion", "label": "Direction", "description": "Which way the reels roll: up lifts the zero out through the top, down drops it out through the bottom.", "default": "up", "options": [{ "value": "up", "label": "Up" }, { "value": "down", "label": "Down" }] },
+    { "id": "size", "type": "enum", "role": "layout", "label": "Size", "description": "Reel height and type size. The roll distance scales with it so the reel always lands exactly one row on.", "default": "standard", "options": [{ "value": "small", "label": "Small" }, { "value": "standard", "label": "Standard" }, { "value": "large", "label": "Large" }] },
+    { "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Character colour: ink for light frames, paper for dark ones, accent rides --brand.", "default": "ink", "options": [{ "value": "ink", "label": "Ink" }, { "value": "paper", "label": "Paper" }, { "value": "accent", "label": "Accent" }] }
+  ]'
+>
+  <span
+    ><i>0<br />A</i></span
+  ><span
+    ><i>0<br />7</i></span
+  ><span
+    ><i>0<br />K</i></span
+  >
+</div>
+
+<style>
+  .hf-remocn-slot-machine-roll {
+    color: var(--hf-slot-color, #18181b);
+    font-family: Inter, system-ui, sans-serif;
+    font-weight: 900;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-slot-machine-roll {
+    display: inline-flex;
+    gap: 6px;
+    height: var(--hf-slot-row, 74px);
+    overflow: hidden;
+    font:
+      900 var(--hf-slot-row, 74px)/1 ui-monospace,
+      SFMono-Regular,
+      Menlo,
+      monospace;
+  }
+  .hf-remocn-slot-machine-roll span {
+    display: block;
+    height: var(--hf-slot-row, 74px);
+    overflow: hidden;
+  }
+  .hf-remocn-slot-machine-roll i {
+    display: block;
+    font-style: normal;
+    transform: translateY(
+      calc(
+        var(--hf-slot-base, 0px) + var(--hf-slot-y, 0px) * var(--hf-slot-dir, 1) *
+          var(--hf-slot-gain, 1)
+      )
+    );
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var directions = { up: 1, down: -1 };
+    var sizes = { small: 48, standard: 74, large: 104 };
+    var tones = {
+      ink: "#18181b",
+      paper: "#fafafa",
+      accent: "var(--brand, #34d399)",
+    };
+
+    var dir = directions[pick(directions, vars.direction, "up")];
+    var row = sizes[pick(sizes, vars.size, "standard")];
+    var tone = tones[pick(tones, vars.tone, "ink")];
+    var result = (typeof vars.result === "string" ? vars.result : "").replace(/\s+/g, "");
+    if (result.length === 0) result = "A7K";
+
+    var roots = document.querySelectorAll(".hf-remocn-slot-machine-roll");
+    for (var i = 0; i < roots.length; i += 1) {
+      var root = roots[i];
+      root.style.setProperty("--hf-slot-row", row + "px");
+      root.style.setProperty("--hf-slot-gain", String(row / 74));
+      root.style.setProperty("--hf-slot-dir", String(dir));
+      // Rolling down starts one row up, so the zero still sits in frame at rest.
+      root.style.setProperty("--hf-slot-base", (dir === 1 ? 0 : -row) + "px");
+      root.style.setProperty("--hf-slot-color", tone);
+      root.textContent = "";
+      for (var j = 0; j < result.length; j += 1) {
+        var reel = document.createElement("i");
+        reel.appendChild(document.createTextNode(dir === 1 ? "0" : result.charAt(j)));
+        reel.appendChild(document.createElement("br"));
+        reel.appendChild(document.createTextNode(dir === 1 ? result.charAt(j) : "0"));
+        var slot = document.createElement("span");
+        slot.appendChild(reel);
+        root.appendChild(slot);
+      }
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-slot-machine-roll i', { '--hf-slot-y': '0px' }, { '--hf-slot-y': '-74px', duration: 0.52, stagger: 0.06, ease: 'power3.inOut' }, startTime);
+-->
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add slot-machine-roll" />
+
+That writes one file: `compositions/components/slot-machine-roll.html`.
+
+## Usage
+
+Open `compositions/components/slot-machine-roll.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+
+{/* hf:generated-footer */}
+
+Tagged `video-primitive` `motion-primitive` `remocn-port` `typography`.
+
+## 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/components/soft-blob-touch.mdx b/docs/catalog/components/soft-blob-touch.mdx
new file mode 100644
index 0000000000..1c83686d58
--- /dev/null
+++ b/docs/catalog/components/soft-blob-touch.mdx
@@ -0,0 +1,557 @@
+---
+title: "Soft Blob Touch"
+description: "A granular soft blob idles with slow internal drift; a scripted touch dot decel-arrives, the blob deforms toward it with an attraction bulge, then recovers with a velocity-preserving spring. No hard edges anywhere."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/soft-blob-touch.html"
+  compositionId="soft-blob-touch"
+  compositionSrc="compositions/components/soft-blob-touch.html"
+  variables={[{"id":"touch_x","type":"number","role":"layout","label":"Touch X","description":"Touch point, percent of host width.","default":66,"min":8,"max":92,"step":1,"unit":"%"},{"id":"touch_y","type":"number","role":"layout","label":"Touch Y","description":"Touch point, percent of host height.","default":38,"min":8,"max":92,"step":1,"unit":"%"},{"id":"touch_at","type":"number","role":"timing","label":"Touch at","description":"Seconds from mount start when the dot makes contact.","default":1.6,"min":0.9,"max":10,"step":0.1,"unit":"s"},{"id":"grain","type":"enum","role":"style","label":"Grain","description":"Speck register for the granular body.","default":"fine","options":[{"value":"fine","label":"Fine"},{"value":"coarse","label":"Coarse"}]},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Body tint: green rides --brand, blue rides --accent, violet rides --accent-2.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Optional departure. Default none: the settled blob holds until the frame cuts.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
+>
+
+```html soft-blob-touch.html
+<!doctype html>
+<!--
+  soft-blob-touch: HyperFrames video primitive (product demo / material)
+
+  A granular soft blob idles with slow internal drift; a scripted touch dot
+  decel-arrives at a caller-positioned point; the blob deforms toward it
+  (an attraction bulge with mass), then recovers with an interruptible
+  spring once the dot retreats. The AI-orb material beat. Softness is the
+  whole point: the body is layered radial gradients plus a seeded grain
+  field, and nothing in the frame has a hard edge.
+
+  Reference: alexwidua 1702356241186476225 sheet-02 (granular blob leaning
+  toward a finger; fuzzy boundary, mass, recovery wobble).
+
+  Variables (declared in data-composition-variables below):
+    - touch_x, touch_y (numbers, percent of host box): where the dot lands.
+    - touch_at (seconds): when the dot makes contact. Clamped so the whole
+      deform and recover tail stays inside the clip.
+    - grain ("fine" | "coarse"): speck count and size for the body.
+    - accent ("green" | "blue" | "violet"): green rides --brand, blue rides
+      --accent, violet rides --accent-2.
+    - exit ("none" | "fade" | "up"): default none, the settled blob holds.
+
+  Envelope, fixed IN and OUT with elastic HOLD only (never timeScale):
+    IN ends when the recovery spring settles (touch_at + 1.57s); HOLD is
+    dead still (drift completes integer sine cycles and ends at exactly
+    zero by then); OUT = 0.45s only when exit is not none.
+
+  Deformation model (law L1, interruptible spring):
+    Two plain-object params (bulge, lean) feed ONE onUpdate painter. The
+    attack tween is the first 75 percent of a power2.out lean-in, cut
+    mid-flight when the dot lifts (analytic cut: the junction value AND
+    velocity are computed in closed form). The recovery tween's ease is a
+    closed-form underdamped spring whose initial velocity equals the cut
+    velocity, so the redirect preserves momentum exactly. Both tweens have
+    explicit endpoints; any seek order lands identical values.
+
+  Determinism (canvas 2D law, per particle-image-reveal):
+    One grain table is computed exactly once at build from fixed LCG seed
+    0x50f7b10b. Every painted frame is a pure function of (table, params,
+    timeline time). onUpdate clears and redraws from scratch; no
+    Math.random, no wall clock, no incremental state. Eventful seeks
+    (suppressEvents false) repaint identically in any order.
+-->
+<html
+  lang="en"
+  data-composition-id="soft-blob-touch"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "touch_x", "type": "number", "role": "layout", "label": "Touch X", "description": "Touch point, percent of host width.", "default": 66, "min": 8, "max": 92, "step": 1, "unit": "%" },
+    { "id": "touch_y", "type": "number", "role": "layout", "label": "Touch Y", "description": "Touch point, percent of host height.", "default": 38, "min": 8, "max": 92, "step": 1, "unit": "%" },
+    { "id": "touch_at", "type": "number", "role": "timing", "label": "Touch at", "description": "Seconds from mount start when the dot makes contact.", "default": 1.6, "min": 0.9, "max": 10, "step": 0.1, "unit": "s" },
+    { "id": "grain", "type": "enum", "role": "style", "label": "Grain", "description": "Speck register for the granular body.", "default": "fine", "options": [{ "value": "fine", "label": "Fine" }, { "value": "coarse", "label": "Coarse" }] },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Body tint: green rides --brand, blue rides --accent, violet rides --accent-2.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the settled blob holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Soft Blob Touch</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="soft-blob-touch" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, "Inter", system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .sbt-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+          }
+
+          .sbt-stage {
+            position: absolute;
+            inset: 0;
+            will-change: transform, opacity;
+          }
+
+          .sbt-canvas {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+          }
+
+          /* The touch dot: a soft disc with a gradient falloff, no hard rim.
+             Motion rides transforms only (px), never left or top. */
+          .sbt-touch {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 4.6cqmin;
+            height: 4.6cqmin;
+            margin-left: -2.3cqmin;
+            margin-top: -2.3cqmin;
+            border-radius: 50%;
+            background: radial-gradient(
+              circle at 42% 38%,
+              color-mix(in srgb, var(--fg, #f8fafc) 96%, transparent) 0%,
+              color-mix(in srgb, var(--fg, #f8fafc) 78%, transparent) 34%,
+              color-mix(in srgb, var(--fg, #f8fafc) 26%, transparent) 62%,
+              transparent 78%
+            );
+            will-change: transform, opacity;
+          }
+        </style>
+
+        <div
+          id="soft-blob-touch-clip"
+          class="sbt-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="sbt-stage">
+            <canvas class="sbt-canvas" aria-hidden="true"></canvas>
+            <div class="sbt-touch" aria-hidden="true"></div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".sbt-stage");
+            var canvas = root.querySelector(".sbt-canvas");
+            var touchDot = root.querySelector(".sbt-touch");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            function num(value, fallback, min, max) {
+              var n = Number(value);
+              if (!isFinite(n)) n = fallback;
+              return Math.max(min, Math.min(max, n));
+            }
+
+            var grain = vars.grain === "coarse" ? "coarse" : "fine";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            // The bundler mirrors composition variables as scoped CSS custom
+            // props, so this unit's own accent variable shadows the contract
+            // --accent token inside the subtree ("blue" is a valid CSS color
+            // and would render pure blue). When the shadow is present, fall
+            // back to the literal contract value instead of var(--accent).
+            var computedAccent = getComputedStyle(root).getPropertyValue("--accent").trim();
+            if (
+              computedAccent === "green" ||
+              computedAccent === "blue" ||
+              computedAccent === "violet"
+            ) {
+              accentColors.blue = "#61a8ff";
+            }
+
+            // Envelope. The deform tail is ATTACK + RECOVER after contact;
+            // clamp touch_at so the spring settles inside the clip.
+            var ATTACK_NAT = 0.55; // natural length of the uncut lean-in
+            var CUT_FRAC = 0.75; // the dot lifts at 75 percent of it
+            var ATTACK = ATTACK_NAT * CUT_FRAC;
+            var RECOVER = 1.15;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var OUT = exit === "none" ? 0 : 0.45;
+            var maxTouch = Math.max(0.9, duration - (ATTACK + RECOVER) - OUT - 0.05);
+            var touchAt = num(vars.touch_at, 1.6, 0.9, maxTouch);
+            var cutAt = touchAt + ATTACK;
+            var IN_END = cutAt + RECOVER;
+            var OUT_START = IN_END + Math.max(0, duration - IN_END - OUT);
+
+            // Canvas raster basis is fixed once at mount (elastic root: the
+            // host box decides the resolution; same host, same raster).
+            var dpr = Math.min(2, Math.max(1, Number(window.devicePixelRatio) || 1));
+            var box = root.getBoundingClientRect();
+            var cssW = Math.max(1, Math.round(box.width) || 640);
+            var cssH = Math.max(1, Math.round(box.height) || 360);
+            canvas.width = Math.round(cssW * dpr);
+            canvas.height = Math.round(cssH * dpr);
+            var ctx = canvas.getContext("2d");
+            var W = canvas.width;
+            var H = canvas.height;
+            var minDim = Math.min(W, H);
+
+            var touchX = (num(vars.touch_x, 66, 8, 92) / 100) * W;
+            var touchY = (num(vars.touch_y, 38, 8, 92) / 100) * H;
+            var centerX = W * 0.5;
+            var centerY = H * 0.5;
+            var R = minDim * 0.26;
+
+            // Direction of attraction, guarded for a touch at dead center.
+            var dxT = touchX - centerX;
+            var dyT = touchY - centerY;
+            var distT = Math.hypot(dxT, dyT);
+            var dirX = distT > 1 ? dxT / distT : 0.7071;
+            var dirY = distT > 1 ? dyT / distT : -0.7071;
+
+            // Resolve accent and fg to concrete rgb once at mount so canvas
+            // fills never depend on style recalc during seeks. Mixing happens
+            // numerically here (computed color-mix strings are not parseable
+            // across engines).
+            function probeColor(cssColor, fallback) {
+              var probe = root.ownerDocument.createElement("span");
+              probe.style.color = cssColor;
+              root.appendChild(probe);
+              var out = getComputedStyle(probe).color || fallback;
+              probe.remove();
+              var m = out.match(/rgba?\(\s*([\d.]+)[,\s]+([\d.]+)[,\s]+([\d.]+)/);
+              if (!m) {
+                m = fallback.match(/rgba?\(\s*([\d.]+)[,\s]+([\d.]+)[,\s]+([\d.]+)/);
+              }
+              return m ? [Number(m[1]), Number(m[2]), Number(m[3])] : [113, 245, 167];
+            }
+            var accentRgb = probeColor(accentColors[accent], "rgb(113, 245, 167)");
+            var fgRgb = probeColor("var(--fg, #f8fafc)", "rgb(248, 250, 252)");
+            function mix(a, b, t) {
+              return [
+                Math.round(a[0] + (b[0] - a[0]) * t),
+                Math.round(a[1] + (b[1] - a[1]) * t),
+                Math.round(a[2] + (b[2] - a[2]) * t),
+              ];
+            }
+            function rgba(c, a) {
+              return "rgba(" + c[0] + "," + c[1] + "," + c[2] + "," + a + ")";
+            }
+            var bodyRgb = mix(accentRgb, fgRgb, 0.18);
+            var softRgb = mix(accentRgb, fgRgb, 0.55);
+
+            // The grain table: computed exactly once, then only read.
+            var counts = { fine: 1500, coarse: 760 };
+            var sizes = { fine: 0.0055, coarse: 0.0102 };
+            var COUNT = counts[grain];
+            var SPECK = sizes[grain] * minDim;
+            var grains = (function () {
+              var state = 0x50f7b10b;
+              function next() {
+                state = (Math.imul(1664525, state) + 1013904223) >>> 0;
+                return state / 4294967296;
+              }
+              var rows = [];
+              for (var i = 0; i < COUNT; i += 1) {
+                // Radial distribution with a fuzzy tail past R: density thins
+                // toward the boundary and alpha fades it out, so the edge is
+                // granular vapor, never a line.
+                var rr = Math.pow(next(), 0.55) * R * 1.16;
+                var th = next() * Math.PI * 2;
+                var edge = Math.max(0, Math.min(1, (1.16 - rr / R) / 0.42));
+                rows.push({
+                  x: Math.cos(th) * rr,
+                  y: Math.sin(th) * rr * 0.94,
+                  size: SPECK * (0.5 + 0.9 * next()),
+                  dim: (0.3 + 0.7 * next()) * edge,
+                  tone: next(),
+                  driftAmp: (0.008 + 0.014 * next()) * minDim,
+                  driftCycles: next() < 0.5 ? 1 : 2,
+                  phaseX: next() * Math.PI * 2,
+                  phaseY: next() * Math.PI * 2,
+                });
+              }
+              return rows;
+            })();
+
+            function clamp01(v) {
+              return v < 0 ? 0 : v > 1 ? 1 : v;
+            }
+
+            // Deformation params. Attack lifts both toward CUT value; the
+            // recovery springs them home. The painter owns all amplitudes.
+            var P = { bulge: 0, lean: 0 };
+            var bCut = 1 - Math.pow(1 - CUT_FRAC, 2); // power2.out at the cut
+            var vCut = (2 * (1 - CUT_FRAC)) / ATTACK_NAT; // slope there, per s
+            var attackEase = function (p) {
+              return (1 - Math.pow(1 - p * CUT_FRAC, 2)) / bCut;
+            };
+            // Closed-form underdamped spring x(s), x(0) = 1, x'(0) = vCut/bCut
+            // (velocity preserved across the cut), corrected by a linear ramp
+            // so x(RECOVER) is exactly zero. Higher frequency for the local
+            // bulge, lower for the whole-mass lean: the surface snaps back
+            // faster than the body.
+            function springEase(lambda, omega) {
+              var v0 = vCut / bCut;
+              var c2 = (v0 + lambda) / omega;
+              function x(s) {
+                return Math.exp(-lambda * s) * (Math.cos(omega * s) + c2 * Math.sin(omega * s));
+              }
+              var xEnd = x(RECOVER);
+              return function (p) {
+                var s = p * RECOVER;
+                return 1 - (x(s) - (s / RECOVER) * xEnd);
+              };
+            }
+            var bulgeSpring = springEase(4.2, Math.PI * 2 * 2.2);
+            var leanSpring = springEase(3.6, Math.PI * 2 * 1.5);
+
+            // Pure repaint: clear, then rebuild the whole frame from
+            // (grain table, P, t). Drift phase u completes integer sine
+            // cycles over [0, IN_END] and is exactly zero from IN_END on,
+            // so the HOLD frame is dead still.
+            var sigma = R * 0.85;
+            var bulgeAmp = R * 0.62;
+            var leanAmp = minDim * 0.045;
+            function paint(t) {
+              ctx.clearRect(0, 0, W, H);
+              var u = clamp01(t / IN_END);
+              var lx = leanAmp * P.lean * dirX;
+              var ly = leanAmp * P.lean * dirY;
+              var cx = centerX + lx;
+              var cy = centerY + ly;
+
+              // Layered radial gradients: wide aura, mid glow, dense core,
+              // and a bulge lobe that swells toward the touch point.
+              var aura = ctx.createRadialGradient(cx, cy, 0, cx, cy, R * 1.9);
+              aura.addColorStop(0, rgba(accentRgb, 0.16));
+              aura.addColorStop(0.55, rgba(accentRgb, 0.06));
+              aura.addColorStop(1, rgba(accentRgb, 0));
+              ctx.fillStyle = aura;
+              ctx.fillRect(0, 0, W, H);
+
+              var mid = ctx.createRadialGradient(cx, cy, 0, cx, cy, R * 1.12);
+              mid.addColorStop(0, rgba(bodyRgb, 0.34));
+              mid.addColorStop(0.62, rgba(bodyRgb, 0.16));
+              mid.addColorStop(1, rgba(bodyRgb, 0));
+              ctx.fillStyle = mid;
+              ctx.fillRect(0, 0, W, H);
+
+              var core = ctx.createRadialGradient(
+                cx - R * 0.12,
+                cy - R * 0.14,
+                0,
+                cx,
+                cy,
+                R * 0.62,
+              );
+              core.addColorStop(0, rgba(softRgb, 0.4));
+              core.addColorStop(1, rgba(softRgb, 0));
+              ctx.fillStyle = core;
+              ctx.fillRect(0, 0, W, H);
+
+              if (P.bulge > 0.001) {
+                var lobeX = cx + dirX * R * 0.72;
+                var lobeY = cy + dirY * R * 0.72;
+                var lobeR = R * (0.22 + 0.5 * P.bulge);
+                var lobe = ctx.createRadialGradient(lobeX, lobeY, 0, lobeX, lobeY, lobeR);
+                lobe.addColorStop(0, rgba(softRgb, 0.34 * P.bulge));
+                lobe.addColorStop(1, rgba(softRgb, 0));
+                ctx.fillStyle = lobe;
+                ctx.fillRect(0, 0, W, H);
+              }
+
+              // Grain field. Each speck drifts on its own integer-cycle sine
+              // (zero at u = 0 and u = 1) and is attracted toward the touch
+              // point with an exponential falloff: the material near the dot
+              // reaches for it, the far side barely stirs.
+              var TAU = Math.PI * 2;
+              for (var i = 0; i < grains.length; i += 1) {
+                var g = grains[i];
+                var driftX =
+                  g.driftAmp * (Math.sin(TAU * g.driftCycles * u + g.phaseX) - Math.sin(g.phaseX));
+                var driftY =
+                  g.driftAmp * (Math.sin(TAU * g.driftCycles * u + g.phaseY) - Math.sin(g.phaseY));
+                var gx = cx + g.x + driftX;
+                var gy = cy + g.y + driftY;
+                if (P.bulge > 0.001) {
+                  var tx = touchX - gx;
+                  var ty = touchY - gy;
+                  var td = Math.hypot(tx, ty);
+                  if (td > 0.5) {
+                    var w = Math.exp(-td / sigma);
+                    var pull = (bulgeAmp * P.bulge * w) / td;
+                    gx += tx * pull;
+                    gy += ty * pull;
+                  }
+                }
+                var c = g.tone < 0.62 ? softRgb : fgRgb;
+                ctx.globalAlpha = g.dim * 0.85;
+                ctx.fillStyle = rgba(c, 1);
+                ctx.beginPath();
+                ctx.arc(gx, gy, g.size, 0, TAU);
+                ctx.fill();
+              }
+              ctx.globalAlpha = 1;
+            }
+
+            // Touch dot choreography, transforms only, px space of the host
+            // box (canvas coordinates divided by dpr).
+            var stageW = cssW;
+            var stageH = cssH;
+            var dotX = touchX / dpr;
+            var dotY = touchY / dpr;
+            // Enter and leave along the attraction axis, from off stage.
+            var away = Math.hypot(stageW, stageH) * 0.7;
+            var offX = dotX + dirX * away;
+            var offY = dotY + dirY * away;
+
+            gsap.set(stage, { opacity: 1, y: "0cqh" });
+            gsap.set(touchDot, { x: offX, y: offY, opacity: 0 });
+
+            var tl = gsap.timeline({
+              paused: true,
+              onUpdate: function () {
+                paint(tl.time());
+              },
+            });
+
+            // Anchor tween: spans the full authored duration so seeks into
+            // the hold keep tl.time() honest and onUpdate (the canvas
+            // repaint) fires for every eventful seek anywhere in [0, D].
+            tl.to({ p: 0 }, { p: 1, duration: duration, ease: "none" }, 0);
+
+            // The dot decel-arrives (power3.out: it arrives, it never
+            // passes through), dwells for the press, then accelerates away.
+            var arriveStart = Math.max(0, touchAt - 0.85);
+            tl.fromTo(
+              touchDot,
+              { x: offX, y: offY, opacity: 0 },
+              {
+                x: dotX,
+                y: dotY,
+                opacity: 1,
+                duration: touchAt - arriveStart,
+                ease: "power3.out",
+              },
+              arriveStart,
+            );
+            tl.fromTo(
+              touchDot,
+              { x: dotX, y: dotY, opacity: 1 },
+              {
+                x: offX,
+                y: offY,
+                opacity: 0,
+                duration: 0.55,
+                ease: "power2.in",
+                immediateRender: false,
+              },
+              cutAt,
+            );
+
+            // Attack: the truncated lean-in, cut mid-flight at the dot lift.
+            tl.fromTo(
+              P,
+              { bulge: 0, lean: 0 },
+              { bulge: bCut, lean: bCut, duration: ATTACK, ease: attackEase },
+              touchAt,
+            );
+            // Recovery: velocity-matched closed-form springs back to rest.
+            tl.fromTo(
+              P,
+              { bulge: bCut },
+              {
+                bulge: 0,
+                duration: RECOVER,
+                ease: bulgeSpring,
+                immediateRender: false,
+              },
+              cutAt,
+            );
+            tl.fromTo(
+              P,
+              { lean: bCut },
+              {
+                lean: 0,
+                duration: RECOVER,
+                ease: leanSpring,
+                immediateRender: false,
+              },
+              cutAt,
+            );
+
+            // HOLD: truly still. Drift is zero past IN_END by construction
+            // and both params are home, so every hold frame is identical.
+
+            // OUT: optional departure; exit none holds until the frame cuts.
+            if (exit === "up") {
+              tl.to(stage, { y: "-4cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "fade") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            }
+
+            tl.seek(0);
+            paint(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["soft-blob-touch"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add soft-blob-touch" />
+
+That writes one file: `compositions/components/soft-blob-touch.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/soft-blob-touch.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `product-demo` `material` `blob` `touch` `grain`.
+
+## 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/components/soft-blur-in.mdx b/docs/catalog/components/soft-blur-in.mdx
new file mode 100644
index 0000000000..e97dbd5067
--- /dev/null
+++ b/docs/catalog/components/soft-blur-in.mdx
@@ -0,0 +1,142 @@
+---
+title: "Soft Blur In"
+description: "A soft opacity, blur, and lift reveal for headlines, captions, and product UI callouts"
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/components/soft-blur-in.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Soft Blur In preview" />
+
+## Install
+
+<InstallCommand command="npx hyperframes add soft-blur-in" />
+
+That writes one file: `compositions/components/soft-blur-in.html`.
+
+## Variables
+
+Every one of these has a default, so the piece works untouched. Set the ones you
+want to change on the element:
+
+| Variable | Default | Accepts | What it does |
+| --- | --- | --- | --- |
+| `distance` | `standard` | `close`, `standard`, `far` | How far the element is offset before it slides home: 14px, 28px or 52px. |
+| `direction` | `up` | `up`, `down` | up starts the element below its resting place so it rises in, down starts it above so it drops in. |
+| `blur` | `standard` | `soft`, `standard`, `heavy` | Starting blur radius, from a light haze to a full smear. |
+
+Set them with `data-variable-values` on the element that mounts it. These are the
+defaults, so this behaves exactly like the preview above until you change one:
+
+```html wrap
+<div
+  data-composition-id="soft-blur-in"
+  data-composition-src="compositions/components/soft-blur-in.html"
+  data-variable-values='{"distance":"standard","direction":"up","blur":"standard"}'
+></div>
+```
+
+## Source
+
+<Accordion title={`soft-blur-in.html`}>
+
+```html
+<!--
+  Soft Blur In - web-native motion primitive.
+
+  Usage:
+  1. Add class="hf-soft-blur-in" to the element you want to reveal.
+  2. Paste this style block and script once.
+  3. Add the timeline snippet to your paused GSAP timeline.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result as a custom property
+  on the document root, which every element carrying the class inherits. These
+  set where the reveal STARTS: the timeline snippet below still drives offset
+  and blur to zero, so each knob decides how far and how hazy the element is
+  before it settles, not how long it takes.
+
+    - distance (close | standard | far, default standard): how far the element
+      is offset before it slides home, 14px, 28px or 52px.
+    - direction (up | down, default up): up starts the element below its
+      resting place so it rises in, down starts it above so it drops in.
+    - blur (soft | standard | heavy, default standard): the starting blur
+      radius, 8px, 18px or 34px, from a light haze to a full smear.
+
+  On every default the result is identical to the original: the element starts
+  28px low behind an 18px blur.
+-->
+
+<style
+  data-composition-variables='[
+    { "id": "distance", "type": "enum", "role": "motion", "label": "Distance", "description": "How far the element is offset before it slides home: 14px, 28px or 52px.", "default": "standard", "options": [{ "value": "close", "label": "Close" }, { "value": "standard", "label": "Standard" }, { "value": "far", "label": "Far" }] },
+    { "id": "direction", "type": "enum", "role": "motion", "label": "Direction", "description": "up starts the element below its resting place so it rises in, down starts it above so it drops in.", "default": "up", "options": [{ "value": "up", "label": "Up" }, { "value": "down", "label": "Down" }] },
+    { "id": "blur", "type": "enum", "role": "style", "label": "Blur", "description": "Starting blur radius, from a light haze to a full smear.", "default": "standard", "options": [{ "value": "soft", "label": "Soft" }, { "value": "standard", "label": "Standard" }, { "value": "heavy", "label": "Heavy" }] }
+  ]'
+>
+  .hf-soft-blur-in {
+    opacity: 0;
+    transform: translate3d(0, var(--hf-soft-blur-y, 28px), 0);
+    filter: blur(var(--hf-soft-blur-radius, 18px));
+    will-change: transform, opacity, filter;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var distances = { close: 14, standard: 28, far: 52 };
+    var directions = { up: 1, down: -1 };
+    var blurs = { soft: 8, standard: 18, heavy: 34 };
+
+    var distance = distances[pick(distances, vars.distance, "standard")];
+    var direction = directions[pick(directions, vars.direction, "up")];
+    var blur = blurs[pick(blurs, vars.blur, "standard")];
+
+    // Set on the root so every element carrying the class inherits the values,
+    // whether it exists yet or not.
+    var root = document.documentElement;
+    root.style.setProperty("--hf-soft-blur-y", distance * direction + "px");
+    root.style.setProperty("--hf-soft-blur-radius", blur + "px");
+  })();
+</script>
+
+<!--
+  Timeline integration:
+
+  tl.to(".hf-soft-blur-in", {
+    opacity: 1,
+    y: 0,
+    filter: "blur(0px)",
+    duration: 0.8,
+    ease: "power3.out",
+    stagger: 0.08,
+  }, startTime);
+-->
+```
+
+</Accordion>
+
+## Usage
+
+Open `compositions/components/soft-blur-in.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `text` `reveal` `blur`.
+
+## 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/components/split-tilt-cards.mdx b/docs/catalog/components/split-tilt-cards.mdx
new file mode 100644
index 0000000000..125d410077
--- /dev/null
+++ b/docs/catalog/components/split-tilt-cards.mdx
@@ -0,0 +1,613 @@
+---
+title: "Split Tilt Cards"
+description: "Two equal-weight cards arrive from opposite wings with mirrored rotateY book-open tilts under one shared perspective, pill badges spring-pop at each inner edge, and the pair holds with a barely-there phase-opposed idle float. Card bodies are content slots with token skeleton defaults."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/split-tilt-cards.html"
+  compositionId="split-tilt-cards"
+  compositionSrc="compositions/components/split-tilt-cards.html"
+  variables={[{"id":"label_a","type":"string","role":"content","label":"Left label","description":"Mono header on the left card. Blank hides it.","default":"Before"},{"id":"label_b","type":"string","role":"content","label":"Right label","description":"Mono header on the right card. Blank hides it.","default":"After"},{"id":"badge_a","type":"string","role":"content","label":"Left badge","description":"Pill badge that spring-pops at the left card inner edge. Blank disables it.","default":"v1"},{"id":"badge_b","type":"string","role":"content","label":"Right badge","description":"Pill badge that spring-pops at the right card inner edge. Blank disables it.","default":"v2"},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Right-card tint, right badge, and right ambient glow color.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Outgoing transition. None holds the final spread.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
+>
+
+```html split-tilt-cards.html
+<!doctype html>
+<!--
+  split-tilt-cards: HyperFrames video primitive (layout / compare / holdable)
+
+  Concept: two equal-weight cards arrive from opposite wings, each carrying a
+  mirrored 3D rotateY book-open tilt (+18deg left, -18deg right) under one
+  shared stage perspective, with box-shadows falling outward from the tilt.
+  A pill badge spring-pops at each card's inner edge (left then right, the
+  one sanctioned overshoot, kept small), then the pair holds with a
+  barely-there phase-opposed idle float and settles dead still. Card bodies
+  are content slots with token skeleton defaults.
+
+  Realizes the comparison-split blueprint's signature move as its own unit
+  and resolves the blueprint's name collision (Wave J2, J2-10).
+
+  Slots (see README.md for a worked example):
+    - [data-slot="card-a"]: left card body. Replace the children of this
+      element in your installed copy. Default: a muted token wireframe.
+    - [data-slot="card-b"]: right card body. Same mechanism. Default: an
+      accent-tinted version of the wireframe.
+    Direct img/video children of a slot are sized to cover the slot area.
+
+  Variables (declared in data-composition-variables below):
+    - label_a (string, default "Before"): mono header on the left card.
+      Empty hides it.
+    - label_b (string, default "After"): mono header on the right card.
+      Empty hides it.
+    - badge_a (string, default "v1"): inner-edge pill on the left card.
+      Empty disables that badge pop.
+    - badge_b (string, default "v2"): inner-edge pill on the right card.
+      Empty disables that badge pop.
+    - accent (green | blue | violet, default green): right-card tint, right
+      badge, and right ambient glow. green maps to --brand, blue to
+      --accent, violet to --accent-2.
+    - exit (none | fade | up, default none): outgoing transition. none holds
+      the final frame (frame roots own transitions; holds end films).
+
+  Envelope (fixed IN/OUT, elastic HOLD only, never gsap.timeScale()):
+    IN       = 2.15s: left card lands 0 to 1.1s, right card 0.2 to 1.3s,
+               badge A pops at 1.45s, badge B at 1.75s (+0.40s spring)
+    HOLD     = elastic = max(0, D - (IN + OUT)); whole 2.0s idle-float
+               cycles fit inside HOLD minus a 0.30s closing stillness; each
+               cycle starts and ends at rest (explicit tweens, no
+               repeat/yoyo), left and right phase-opposed
+    OUT      = 0.50s when exit is fade or up, 0 when exit is none
+    If D < IN + OUT, IN and OUT scale down together so IN + OUT == D.
+
+  Sync points (fixed offsets inside IN, never in elastic HOLD): badge-pop-a
+  lands at 1.85s, badge-pop-b at 2.15s.
+
+  Sound cue: dispatches a bubbling `hf:sfx` CustomEvent with id
+  "badge-pop-soft" at each badge landing. This primitive never plays audio.
+
+  Mount contract: MOUNTABLE SUB-COMPOSITION. The runtime clones only
+  <template> contents; #root fills the host box (inset:0, container-type:
+  size), has no data-width/data-height, and registers one paused timeline
+  under the literal "split-tilt-cards" key (mount flattening strips
+  data-composition-id from the live root). Variables come from
+  window.__hyperframes.getVariables().
+-->
+<html
+  lang="en"
+  data-composition-id="split-tilt-cards"
+  data-composition-duration="4.5"
+  data-composition-variables='[
+    { "id": "label_a", "type": "string", "role": "content", "label": "Left label", "description": "Mono header on the left card. Blank hides it.", "default": "Before" },
+    { "id": "label_b", "type": "string", "role": "content", "label": "Right label", "description": "Mono header on the right card. Blank hides it.", "default": "After" },
+    { "id": "badge_a", "type": "string", "role": "content", "label": "Left badge", "description": "Pill badge that spring-pops at the left card inner edge. Blank disables it.", "default": "v1" },
+    { "id": "badge_b", "type": "string", "role": "content", "label": "Right badge", "description": "Pill badge that spring-pops at the right card inner edge. Blank disables it.", "default": "v2" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Right-card tint, right badge, and right ambient glow color.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Outgoing transition. None holds the final spread.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Split Tilt Cards</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="split-tilt-cards" data-duration="4.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          /* Root fills the host-owned box. Internal measurements use cqw/cqh
+             and every painted color comes from a contract token. */
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            background: var(--bg, #0b1016);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .stc-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+          }
+
+          /* Two faint ambient side glows: each wing owns a color identity
+             across the 50% symmetry axis. Static by design. */
+          .stc-clip::before,
+          .stc-clip::after {
+            content: "";
+            position: absolute;
+            top: 14cqh;
+            width: 52cqw;
+            height: 72cqh;
+            border-radius: 50%;
+            filter: blur(6cqmin);
+            pointer-events: none;
+          }
+
+          .stc-clip::before {
+            left: 2cqw;
+            background: radial-gradient(
+              ellipse at 50% 50%,
+              color-mix(in srgb, var(--muted, #94a3b8) 11%, transparent) 0%,
+              transparent 70%
+            );
+          }
+
+          .stc-clip::after {
+            right: 2cqw;
+            background: radial-gradient(
+              ellipse at 50% 50%,
+              color-mix(in srgb, var(--stc-accent, #22c55e) 13%, transparent) 0%,
+              transparent 70%
+            );
+          }
+
+          /* One shared perspective so both tilts converge on the same
+             vanishing point; wings and floats preserve 3D so the card
+             rotateY reads through their own gsap transforms. */
+          .stc-stage {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: var(--space-3, 5cqw);
+            align-items: center;
+            justify-items: center;
+            padding: 0 8cqw;
+            perspective: 120cqw;
+          }
+
+          /* No opacity (or other grouping property) may ever land on the
+             wing/float/stage chain: it forces transform-style flat and
+             squashes the card rotateY. Fades ride the cards and the clip. */
+          .stc-wing {
+            position: relative;
+            width: 100%;
+            max-width: 38cqw;
+            height: 58cqh;
+            transform-style: preserve-3d;
+            will-change: transform;
+          }
+
+          .stc-float {
+            position: absolute;
+            inset: 0;
+            transform-style: preserve-3d;
+            will-change: transform;
+          }
+
+          .stc-card {
+            position: absolute;
+            inset: 0;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+            padding: var(--space-3, 3.6cqh) var(--space-3, 2.4cqw);
+            border: 0.16cqw solid var(--border, #334155);
+            border-radius: var(--radius, 2.4cqmin);
+            background: color-mix(in srgb, var(--surface, #172033) 90%, var(--bg, #0b1016));
+            will-change: opacity;
+          }
+
+          /* Static book-open tilts: +18deg left, -18deg right, with the
+             box-shadow falling outward from the tilt (left shadow right,
+             right shadow left). The tilt is carried, never tweened. */
+          .stc-card-a {
+            transform: rotateY(18deg);
+            box-shadow: 2.4cqw 3cqh 7cqh color-mix(in srgb, var(--bg, #0b1016) 52%, transparent);
+          }
+
+          .stc-card-b {
+            transform: rotateY(-18deg);
+            border-color: color-mix(
+              in srgb,
+              var(--stc-accent, #22c55e) 46%,
+              var(--border, #334155)
+            );
+            background: color-mix(in srgb, var(--surface, #172033) 88%, var(--stc-accent, #22c55e));
+            box-shadow: -2.4cqw 3cqh 7cqh color-mix(in srgb, var(--bg, #0b1016) 52%, transparent);
+          }
+
+          .stc-label {
+            flex: 0 0 auto;
+            margin-bottom: var(--space-2, 2.4cqh);
+            color: var(--muted, #94a3b8);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            font-size: min(2.1cqw, 3.4cqh);
+            font-weight: 600;
+            letter-spacing: 0.12em;
+            line-height: 1;
+            text-transform: uppercase;
+            white-space: nowrap;
+          }
+
+          .stc-card-b .stc-label {
+            color: color-mix(in srgb, var(--stc-accent, #22c55e) 72%, var(--fg, #f8fafc));
+          }
+
+          .stc-label:empty {
+            display: none;
+          }
+
+          .stc-slot {
+            position: relative;
+            flex: 1 1 auto;
+            min-height: 0;
+            overflow: hidden;
+            border-radius: calc(var(--radius, 2.4cqmin) * 0.6);
+          }
+
+          /* Caller-supplied media covers its slot edge to edge. */
+          .stc-slot > img,
+          .stc-slot > video {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+          }
+
+          /* Token-styled default slot content: a wireframe that reads muted
+             on the left card and accent-tinted on the right. Callers
+             replacing slot children never see any of this. */
+          .stc-default {
+            position: absolute;
+            inset: 0;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            padding: var(--space-2, 2cqh) var(--space-1, 1cqw);
+          }
+
+          .stc-bar {
+            width: 42%;
+            height: 4cqh;
+            margin-bottom: var(--space-2, 2.6cqh);
+            border-radius: 1.2cqh;
+            background: var(--muted, #94a3b8);
+            opacity: 0.5;
+          }
+
+          .stc-line {
+            height: 2.2cqh;
+            margin-bottom: var(--space-1, 1.8cqh);
+            border-radius: 1.1cqh;
+            background: var(--muted, #94a3b8);
+            opacity: 0.38;
+          }
+
+          .stc-line:nth-of-type(2) {
+            width: 88%;
+          }
+
+          .stc-line:nth-of-type(3) {
+            width: 64%;
+          }
+
+          .stc-line:nth-of-type(4) {
+            width: 42%;
+          }
+
+          .stc-card-b .stc-bar {
+            background: var(--stc-accent, #22c55e);
+            opacity: 0.9;
+          }
+
+          .stc-card-b .stc-line {
+            background: color-mix(in srgb, var(--stc-accent, #22c55e) 62%, var(--fg, #f8fafc));
+            opacity: 0.66;
+          }
+
+          /* Badge positioners own the inner-edge placement (CSS translate);
+             gsap scales only the inner pill, so the two transforms never
+             collide on one element. */
+          .stc-badge-pos {
+            position: absolute;
+            top: 50%;
+            z-index: 3;
+            display: flex;
+          }
+
+          .stc-badge-pos-a {
+            right: 0;
+            transform: translate(32%, -50%);
+          }
+
+          .stc-badge-pos-b {
+            left: 0;
+            transform: translate(-32%, -50%);
+          }
+
+          .stc-badge {
+            padding: var(--space-1, 1.4cqh) var(--space-2, 1.8cqw);
+            border: 0.16cqw solid var(--border, #334155);
+            border-radius: 999cqw;
+            background: color-mix(in srgb, var(--surface, #172033) 82%, var(--bg, #0b1016));
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            font-size: min(2.2cqw, 3.6cqh);
+            font-weight: 600;
+            letter-spacing: 0.04em;
+            line-height: 1;
+            white-space: nowrap;
+            will-change: transform, opacity;
+          }
+
+          .stc-badge-b {
+            border-color: color-mix(
+              in srgb,
+              var(--stc-accent, #22c55e) 62%,
+              var(--border, #334155)
+            );
+            background: color-mix(in srgb, var(--stc-accent, #22c55e) 26%, var(--surface, #172033));
+          }
+        </style>
+
+        <div
+          id="split-tilt-cards-clip"
+          class="stc-clip clip"
+          data-start="0"
+          data-duration="4.5"
+          data-track-index="0"
+        >
+          <div class="stc-stage">
+            <div class="stc-wing stc-wing-a">
+              <div class="stc-float stc-float-a">
+                <section class="stc-card stc-card-a" aria-label="Left card">
+                  <div class="stc-label stc-label-a"></div>
+                  <div class="stc-slot" data-slot="card-a">
+                    <!-- SLOT "card-a": replace the children of this element
+                         with your own content (img, video, or HTML). -->
+                    <div class="stc-default" aria-hidden="true">
+                      <div class="stc-bar"></div>
+                      <div class="stc-line"></div>
+                      <div class="stc-line"></div>
+                      <div class="stc-line"></div>
+                    </div>
+                  </div>
+                </section>
+                <div class="stc-badge-pos stc-badge-pos-a">
+                  <div class="stc-badge stc-badge-a"></div>
+                </div>
+              </div>
+            </div>
+
+            <div class="stc-wing stc-wing-b">
+              <div class="stc-float stc-float-b">
+                <section class="stc-card stc-card-b" aria-label="Right card">
+                  <div class="stc-label stc-label-b"></div>
+                  <div class="stc-slot" data-slot="card-b">
+                    <!-- SLOT "card-b": replace the children of this element
+                         with your own content (img, video, or HTML). -->
+                    <div class="stc-default" aria-hidden="true">
+                      <div class="stc-bar"></div>
+                      <div class="stc-line"></div>
+                      <div class="stc-line"></div>
+                      <div class="stc-line"></div>
+                    </div>
+                  </div>
+                </section>
+                <div class="stc-badge-pos stc-badge-pos-b">
+                  <div class="stc-badge stc-badge-b"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            // Literal id: mount flattening strips data-composition-id from the
+            // live root before this timeline registers.
+            var compositionId = "split-tilt-cards";
+            var clip = root.querySelector(".stc-clip");
+            var wingA = root.querySelector(".stc-wing-a");
+            var cardA = root.querySelector(".stc-card-a");
+            var cardB = root.querySelector(".stc-card-b");
+            var wingB = root.querySelector(".stc-wing-b");
+            var floatA = root.querySelector(".stc-float-a");
+            var floatB = root.querySelector(".stc-float-b");
+            var labelA = root.querySelector(".stc-label-a");
+            var labelB = root.querySelector(".stc-label-b");
+            var badgeA = root.querySelector(".stc-badge-a");
+            var badgeB = root.querySelector(".stc-badge-b");
+            var badgePosA = root.querySelector(".stc-badge-pos-a");
+            var badgePosB = root.querySelector(".stc-badge-pos-b");
+
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var labelAText = vars.label_a == null ? "Before" : String(vars.label_a);
+            var labelBText = vars.label_b == null ? "After" : String(vars.label_b);
+            var badgeAText = vars.badge_a == null ? "v1" : String(vars.badge_a);
+            var badgeBText = vars.badge_b == null ? "v2" : String(vars.badge_b);
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #22c55e)",
+              blue: "var(--accent, #38bdf8)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            // INVARIANT: only none | fade | up reaches the timeline.
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            labelA.textContent = labelAText;
+            labelB.textContent = labelBText;
+            badgeA.textContent = badgeAText;
+            badgeB.textContent = badgeBText;
+            if (badgeAText === "") badgePosA.style.display = "none";
+            if (badgeBText === "") badgePosB.style.display = "none";
+            root.style.setProperty("--stc-accent", accentColors[accent]);
+
+            // RETIME RANGE: fixed IN and OUT scale together only when D is too
+            // short. HOLD is the sole elastic phase. Never use timeScale().
+            var CARD_DUR_BASE = 1.1;
+            var CARD_B_DELAY_BASE = 0.2;
+            var FADE_DUR_BASE = 0.5;
+            var BADGE_A_AT_BASE = 1.45;
+            var BADGE_B_AT_BASE = 1.75;
+            var BADGE_DUR_BASE = 0.4;
+            var IN_BASE = BADGE_B_AT_BASE + BADGE_DUR_BASE;
+            var OUT_BASE = exit === "none" ? 0 : 0.5;
+            var STILLNESS = 0.3;
+            var FLOAT_CYCLE = 2.0;
+
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4.5"));
+            var totalBase = IN_BASE + OUT_BASE;
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var OUT_START = IN + HOLD;
+
+            function fireSfx(id, t) {
+              root.dispatchEvent(
+                new CustomEvent("hf:sfx", { detail: { id: id, t: t }, bubbles: true }),
+              );
+            }
+
+            // Explicit both-endpoints state makes tl.seek(0) deterministic.
+            // Fades ride the cards and the clip, never the wing/float/stage
+            // chain: opacity there would flatten the 3D tilt.
+            gsap.set(clip, { opacity: 1, y: 0 });
+            gsap.set(wingA, { x: "-26cqw", scale: 0.85 });
+            gsap.set(wingB, { x: "26cqw", scale: 0.85 });
+            gsap.set([cardA, cardB], { opacity: 0 });
+            gsap.set([floatA, floatB], { y: "0cqh" });
+            gsap.set([badgeA, badgeB], { opacity: 0, scale: 0 });
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: mirrored opposite-wing entries, right ~0.2s behind, each
+            // carrying its static book-open tilt; only x/scale/opacity move.
+            [
+              { wing: wingA, card: cardA, at: 0 },
+              { wing: wingB, card: cardB, at: CARD_B_DELAY_BASE * scale },
+            ].forEach(function (entry) {
+              tl.to(
+                entry.card,
+                { opacity: 1, duration: 0.5 * scale, ease: "power2.out" },
+                entry.at,
+              );
+              tl.to(
+                entry.wing,
+                { x: "0cqw", duration: CARD_DUR_BASE * scale, ease: "power3.out" },
+                entry.at,
+              );
+              tl.to(
+                entry.wing,
+                { scale: 1, duration: CARD_DUR_BASE * scale, ease: "power3.out" },
+                entry.at,
+              );
+            });
+
+            // Badges: the one sanctioned overshoot, kept small. Left lands
+            // first, right ~0.3s behind, both inside fixed IN.
+            [
+              { badge: badgeA, text: badgeAText, at: BADGE_A_AT_BASE * scale },
+              { badge: badgeB, text: badgeBText, at: BADGE_B_AT_BASE * scale },
+            ].forEach(function (pop) {
+              if (pop.text === "") return;
+              tl.to(
+                pop.badge,
+                { opacity: 1, scale: 1, duration: BADGE_DUR_BASE * scale, ease: "back.out(1.9)" },
+                pop.at,
+              );
+              var land = pop.at + BADGE_DUR_BASE * scale;
+              tl.call(
+                function () {
+                  fireSfx("badge-pop-soft", land);
+                },
+                [],
+                land,
+              );
+            });
+
+            // HOLD: phase-opposed barely-there idle float. Only whole cycles
+            // fit; each is authored as explicit half-cycle tweens (never
+            // repeat/yoyo) so every cycle starts and ends at rest, and the
+            // closing STILLNESS window stays dead still.
+            var floatWindow = Math.max(0, HOLD - STILLNESS);
+            var cycles = Math.floor(floatWindow / FLOAT_CYCLE);
+            var half = FLOAT_CYCLE / 2;
+            for (var i = 0; i < cycles; i += 1) {
+              var t0 = IN + i * FLOAT_CYCLE;
+              tl.to(floatA, { y: "-0.6cqh", duration: half, ease: "sine.inOut" }, t0);
+              tl.to(floatA, { y: "0cqh", duration: half, ease: "sine.inOut" }, t0 + half);
+              tl.to(floatB, { y: "0.6cqh", duration: half, ease: "sine.inOut" }, t0);
+              tl.to(floatB, { y: "0cqh", duration: half, ease: "sine.inOut" }, t0 + half);
+            }
+
+            // OUT: only when the exit variable asks for one; exit none holds
+            // the final spread (frame roots own transitions).
+            if (exit !== "none") {
+              tl.to(
+                clip,
+                { opacity: 0, duration: FADE_DUR_BASE * scale, ease: "power2.in" },
+                OUT_START,
+              );
+              if (exit === "up") {
+                tl.to(
+                  clip,
+                  { y: "-6cqh", duration: FADE_DUR_BASE * scale, ease: "power2.in" },
+                  OUT_START,
+                );
+              }
+            }
+
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add split-tilt-cards" />
+
+That writes one file: `compositions/components/split-tilt-cards.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/split-tilt-cards.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `layout` `compare` `holdable` `book-open` `tilt` `slots`.
+
+## 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/components/spotlight-card.mdx b/docs/catalog/components/spotlight-card.mdx
new file mode 100644
index 0000000000..5c5e430224
--- /dev/null
+++ b/docs/catalog/components/spotlight-card.mdx
@@ -0,0 +1,142 @@
+---
+title: "Spotlight Card"
+description: "A card with a scripted cursor spotlight and lit border."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/components/spotlight-card.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Spotlight Card preview" />
+
+## Install
+
+<InstallCommand command="npx hyperframes add spotlight-card" />
+
+That writes one file: `compositions/components/spotlight-card.html`.
+
+## Source
+
+<Accordion title={`spotlight-card.html`}>
+
+```html
+<!--
+  Spotlight Card - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-spotlight-card">
+  <div class="mesh"></div>
+  <div class="card">
+    <div class="spot"></div>
+    <div>
+      <h3>Spotlight Card</h3>
+      <p>A card with a scripted cursor spotlight and lit border.</p>
+    </div>
+  </div>
+</div>
+
+<style>
+  .hf-remocn-spotlight-card {
+    --hf-accent: var(--accent, #18181b);
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-spotlight-card {
+    position: relative;
+    width: 760px;
+    height: 428px;
+    overflow: hidden;
+    border-radius: 30px;
+    background: #080b12;
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+  }
+  .hf-remocn-spotlight-card .mesh {
+    position: absolute;
+    inset: -22%;
+    filter: blur(44px);
+    opacity: 0.88;
+    background:
+      radial-gradient(
+        circle at var(--hf-x1, 20%) var(--hf-y1, 30%),
+        rgba(255, 255, 255, 0.45) 0 18%,
+        transparent 32%
+      ),
+      radial-gradient(
+        circle at var(--hf-x2, 76%) var(--hf-y2, 52%),
+        rgba(255, 255, 255, 0.18) 0 16%,
+        transparent 34%
+      ),
+      radial-gradient(
+        circle at var(--hf-x3, 46%) var(--hf-y3, 78%),
+        rgba(255, 255, 255, 0.08) 0 18%,
+        transparent 34%
+      );
+  }
+  .hf-remocn-spotlight-card .card {
+    position: absolute;
+    inset: 74px 92px;
+    border: 1px solid rgba(255, 255, 255, 0.16);
+    border-radius: 26px;
+    background: rgba(255, 255, 255, 0.08);
+    color: #fff;
+    display: grid;
+    place-items: center;
+    text-align: center;
+    overflow: hidden;
+  }
+  .hf-remocn-spotlight-card .spot {
+    position: absolute;
+    width: 260px;
+    height: 260px;
+    border-radius: 50%;
+    background: radial-gradient(circle, rgba(255, 255, 255, 0.5), transparent 65%);
+    transform: translate(var(--hf-spot-x, 0px), var(--hf-spot-y, 0px));
+    mix-blend-mode: screen;
+  }
+  .hf-remocn-spotlight-card .particle {
+    position: absolute;
+    left: 50%;
+    top: 54%;
+    width: 12px;
+    height: 20px;
+    border-radius: 3px;
+    background: var(--c);
+    transform: translate(var(--hf-px, 0px), var(--hf-py, 0px)) rotate(var(--hf-pr, 0deg));
+    opacity: var(--hf-po, 0);
+  }
+  .hf-remocn-spotlight-card h3 {
+    margin: 0;
+    font-size: 44px;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-spotlight-card p {
+    margin: 8px 0 0;
+    color: rgba(255, 255, 255, 0.7);
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-spotlight-card .mesh', { '--hf-x1': '18%', '--hf-y1': '28%', '--hf-x2': '78%', '--hf-y2': '46%', '--hf-x3': '44%', '--hf-y3': '80%' }, { '--hf-x1': '34%', '--hf-y1': '42%', '--hf-x2': '62%', '--hf-y2': '60%', '--hf-x3': '58%', '--hf-y3': '64%', duration: 4, ease: 'sine.inOut' }, startTime); tl.fromTo('.hf-remocn-spotlight-card .spot', { '--hf-spot-x': '-120px', '--hf-spot-y': '-70px' }, { '--hf-spot-x': '190px', '--hf-spot-y': '90px', duration: 3, ease: 'sine.inOut' }, startTime); const particles_spotlight_card = gsap.utils.toArray('.hf-remocn-spotlight-card .particle'); if (particles_spotlight_card.length) { tl.fromTo(particles_spotlight_card, { '--hf-po': 0, '--hf-px': '0px', '--hf-py': '0px', '--hf-pr': '0deg' }, { '--hf-po': 1, '--hf-px': (i) => (Math.cos(i * 0.83) * 250) + 'px', '--hf-py': (i) => (-120 - Math.sin(i * 0.61) * 120) + 'px', '--hf-pr': (i) => (180 + i * 37) + 'deg', duration: 0.8, stagger: 0.015, ease: 'power2.out' }, startTime + 0.2); }
+-->
+```
+
+</Accordion>
+
+## Usage
+
+Open `compositions/components/spotlight-card.html` and paste its contents into your composition. See the comment header in the file for timeline integration guidance.
+
+{/* hf:generated-footer */}
+
+Tagged `effect` `remocn-port`.
+
+## 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/components/spring-pop.mdx b/docs/catalog/components/spring-pop.mdx
new file mode 100644
index 0000000000..da29354123
--- /dev/null
+++ b/docs/catalog/components/spring-pop.mdx
@@ -0,0 +1,237 @@
+---
+title: "Spring Pop"
+description: "A badge pops in from a visible near-rest scale, overshoots full size once, and settles cleanly."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/spring-pop.html"
+  compositionId="spring-pop"
+  compositionSrc="compositions/components/spring-pop.html"
+  variables={[{"id":"overshoot","type":"number","role":"timing","label":"Overshoot","description":"Strength passed to the back.out entrance curve.","default":1.7,"min":1.1,"max":2,"step":0.1},{"id":"fromScale","type":"number","role":"timing","label":"Starting scale","description":"Scale at the start of the entrance.","default":0.9,"min":0.8,"max":0.97,"step":0.01},{"id":"text","type":"string","role":"content","label":"Label","description":"Text displayed inside the badge.","default":"New"}]}
+>
+
+```html spring-pop.html
+<!doctype html>
+<!--
+  spring-pop: HyperFrames video primitive (effects / burst / reveal)
+
+  Concept: one badge arrives from scale 0.9 and opacity 0, passes slightly
+  beyond full size, then settles exactly at scale 1. One mechanic, one job:
+  revealing an element with a restrained, physical overshoot.
+
+  Compiled-from evidence: Video Primitives v1 build contract, Easing
+  vocabulary (--ease-overshoot = GSAP back.out(1.7), taste rules 4 and 5),
+  plus hyperframes-animation rules/spring-pop-entrance.md's playful
+  overshoot variation. This fills the gap left by spring-scale-in, whose
+  power3.out curve never overshoots.
+
+  Use when: a new badge, compact card, icon, or product detail deserves one
+  lively entrance. Keep it to the single element that earns emphasis.
+
+  Variables:
+    - overshoot (number, 1.1 to 2.0, default 1.7): the strength passed to
+      GSAP back.out(overshoot).
+    - fromScale (number, 0.8 to 0.97, default 0.9): the visible start scale.
+    - text (string, default "New"): the badge label.
+
+  Envelope: fixed 0.60s IN carries the complete pop, followed by a
+  deliberately still elastic HOLD. There is no OUT because this reveal
+  establishes the element's resting state. If duration is shorter than
+  0.60s, IN compresses to fit and HOLD becomes zero.
+
+  Sync point: pop-settle occurs at 0.60s into IN, scaled only when the full
+  duration is shorter than the fixed entrance. It never enters HOLD.
+
+  Sound: none. A parent scene may place a static cue at pop-settle.
+
+  Mount contract: the runtime clones only this template. #root fills the
+  host box, establishes the container query basis, has no data-width or
+  data-height, and registers one paused timeline under the hardcoded
+  spring-pop id.
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "overshoot", "type": "number", "role": "timing", "label": "Overshoot", "description": "Strength passed to the back.out entrance curve.", "default": 1.7, "min": 1.1, "max": 2, "step": 0.1 },
+    { "id": "fromScale", "type": "number", "role": "timing", "label": "Starting scale", "description": "Scale at the start of the entrance.", "default": 0.9, "min": 0.8, "max": 0.97, "step": 0.01 },
+    { "id": "text", "type": "string", "role": "content", "label": "Label", "description": "Text displayed inside the badge.", "default": "New" }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Spring Pop</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="spring-pop" data-duration="2" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .sp-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+          }
+
+          /* EDIT ZONE: badge proportions only. The centered 82cqw ceiling
+             reserves clearance for the overshoot at every allowed value. */
+          .sp-badge {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: var(--space-2, 2.4cqw);
+            min-width: 48cqw;
+            max-width: 82cqw;
+            min-height: 32cqh;
+            padding: var(--space-2, 2.4cqh) var(--space-3, 4cqw);
+            border: 0.18cqmin solid var(--border, #334155);
+            border-radius: var(--radius, 3cqmin);
+            background: var(--surface, #1e293b);
+            box-shadow: 0 2.4cqh 7cqh color-mix(in srgb, var(--bg, #0b1120) 42%, transparent);
+            transform-origin: 50% 50%;
+            will-change: transform, opacity;
+          }
+
+          .sp-dot {
+            flex: 0 0 auto;
+            width: 3.2cqmin;
+            aspect-ratio: 1;
+            border-radius: 50%;
+            background: var(--brand, #22c55e);
+            box-shadow: 0 0 2.4cqmin color-mix(in srgb, var(--brand, #22c55e) 58%, transparent);
+          }
+
+          .sp-label {
+            min-width: 0;
+            overflow: hidden;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: clamp(14px, 9cqmin, 54px);
+            font-weight: 720;
+            line-height: 1.2;
+            letter-spacing: -0.02em;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+        </style>
+
+        <div
+          id="spring-pop-clip"
+          class="sp-clip clip"
+          data-start="0"
+          data-duration="2"
+          data-track-index="0"
+        >
+          <div class="sp-badge">
+            <span class="sp-dot" aria-hidden="true"></span>
+            <span class="sp-label"></span>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var badge = root.querySelector(".sp-badge");
+            var label = root.querySelector(".sp-label");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            // INVARIANT: invalid numeric overrides return to declared
+            // defaults. Explicit finite checks preserve every valid value.
+            var overshootValue = vars.overshoot;
+            var fromScaleValue = vars.fromScale;
+            var overshoot = Number.isFinite(overshootValue)
+              ? Math.max(1.1, Math.min(2, overshootValue))
+              : 1.7;
+            var fromScale = Number.isFinite(fromScaleValue)
+              ? Math.max(0.8, Math.min(0.97, fromScaleValue))
+              : 0.9;
+            var text = vars.text == null ? "New" : String(vars.text);
+
+            label.textContent = text;
+
+            // RETIME RANGE: tune only the fixed entrance length. HOLD is
+            // deliberately still, and this reveal has no exit phase.
+            var IN_BASE = 0.6;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "2"));
+            var IN = Math.min(IN_BASE, duration);
+            var OPACITY_IN = Math.min(0.3, IN);
+
+            var tl = gsap.timeline({ paused: true });
+
+            // --ease-overshoot: the back curve owns the only scale arc. The
+            // start is 0.9 by default, never 0, so the badge does not appear
+            // from nothing. Opacity uses its own non-overshooting ease.
+            tl.fromTo(
+              badge,
+              { scale: fromScale },
+              { scale: 1, duration: IN, ease: "back.out(" + overshoot + ")" },
+              0,
+            );
+            tl.fromTo(
+              badge,
+              { opacity: 0 },
+              { opacity: 1, duration: OPACITY_IN, ease: "power2.out" },
+              0,
+            );
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines["spring-pop"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add spring-pop" />
+
+That writes one file: `compositions/components/spring-pop.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/spring-pop.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `effects` `spring` `overshoot` `pop` `reveal`.
+
+## 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/components/spring-stack-shuffle.mdx b/docs/catalog/components/spring-stack-shuffle.mdx
new file mode 100644
index 0000000000..f490fe9cab
--- /dev/null
+++ b/docs/catalog/components/spring-stack-shuffle.mdx
@@ -0,0 +1,649 @@
+---
+title: "Spring Stack Shuffle"
+description: "A stack of 3 to 5 slotted cards reshuffles on cues: the back card throws over the top and lands at the front with real mass, the rest compress and resettle; cues that land mid-flight redirect the moving cards with velocity preserved."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/spring-stack-shuffle.html"
+  compositionId="spring-stack-shuffle"
+  compositionSrc="compositions/components/spring-stack-shuffle.html"
+  variables={[{"id":"cards","type":"number","role":"content","label":"Cards","description":"Number of cards in the stack, 3 to 5.","default":4,"min":3,"max":5,"step":1},{"id":"cues","type":"string","role":"timing","label":"Shuffle cues","description":"Comma-separated seconds from mount start; each cue throws the back card to the front. Cues inside a running throw redirect it mid-flight, velocity preserved. Empty keeps the default rhythm.","default":"0.9, 1.7, 1.95"},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Active-card ring color from the contract token map.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Optional departure. Default none: the settled stack holds until the frame cuts.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
+>
+
+```html spring-stack-shuffle.html
+<!doctype html>
+<!--
+  spring-stack-shuffle: HyperFrames video primitive (product demo / physics)
+
+  A stack of 3 to 5 cards reshuffles on cues: on each cue the card at the
+  back of the stack throws over the top and lands at the front with real
+  mass (small landing overshoot, the quiet register), while the other cards
+  step one slot deeper and give a brief compress-resettle as the flyer
+  lands.
+
+  SIGNATURE (law L1, interruptible springs): when a cue fires while a
+  previous shuffle is still in flight, every in-flight card REDIRECTS to
+  its new slot preserving its instantaneous velocity. No snap-to-zero, no
+  pop. The default cue rhythm (0.9, 1.7, 1.95) deliberately fires the third
+  cue mid-throw of the second so the redirect is part of the authored
+  choreography.
+
+  How the redirect stays deterministic and seek-safe: motion is compiled
+  at mount into per-card, per-property segment lists (explicit from/to and
+  a pure ease function each). A redirect cuts the covering segment
+  analytically (value from the ease, velocity from a fixed finite
+  difference), truncates it with a renormalized copy of the same curve, and
+  continues with a cubic Hermite ease whose start slope equals the cut
+  velocity and whose end slope is zero. Nothing simulates: every emitted
+  tween is a fromTo with both endpoints authored, so any seek in either
+  direction reproduces the same frame.
+
+  Slots (see README.md for a worked example):
+    - [data-slot="card-1"] ... [data-slot="card-5"]: card bodies, front to
+      back at mount. Replace the children of a slot in your installed copy.
+      Defaults: numbered token skeleton cards. Direct img/video children
+      cover the card area.
+
+  Variables (declared in data-composition-variables below):
+    - cards (number 3..5, default 4): how many cards are in the stack.
+    - cues (string, default "0.9, 1.7, 1.95"): comma-separated seconds,
+      relative to mount start; each cue fires one shuffle. Cues closer
+      together than a throw (0.85s) interrupt the flight and exercise the
+      L1 redirect. Empty keeps the authored default rhythm.
+    - accent (green | blue | violet, default green): active-card ring via
+      the contract token map.
+    - exit (none | fade | up, default none): frame roots own transitions;
+      holds end films.
+
+  Envelope, fixed IN and OUT with elastic HOLD only (never time-scaled):
+    IN    = staggered card entrances, back to front, done by ~0.8s
+    CUES  = clamped into [0.85, D - OUT - 0.9] so every throw lands before
+            any exit begins
+    HOLD  = still after the last landing bump settles
+    OUT   = 0s for exit none, otherwise 0.45s
+
+  Mount contract: MOUNTABLE SUB-COMPOSITION. The runtime clones only
+  <template> contents; #root fills the host box (inset:0, container-type:
+  size), has no data-width/data-height, and registers one paused timeline
+  under the literal "spring-stack-shuffle" key. Stack geometry is measured
+  in px from the mounted root once (cq-unit transform tweens are not
+  seek-safe); variables come from window.__hyperframes.getVariables().
+-->
+<html
+  lang="en"
+  data-composition-id="spring-stack-shuffle"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "cards", "type": "number", "role": "content", "label": "Cards", "description": "Number of cards in the stack, 3 to 5.", "default": 4, "min": 3, "max": 5, "step": 1 },
+    { "id": "cues", "type": "string", "role": "timing", "label": "Shuffle cues", "description": "Comma-separated seconds from mount start; each cue throws the back card to the front. Cues inside a running throw redirect it mid-flight, velocity preserved. Empty keeps the default rhythm.", "default": "0.9, 1.7, 1.95" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Active-card ring color from the contract token map.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the settled stack holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Spring Stack Shuffle</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="spring-stack-shuffle" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            background: var(--bg, #0b0c0e);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .sss-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+          }
+
+          .sss-stage {
+            position: absolute;
+            inset: 0;
+            will-change: transform, opacity;
+          }
+
+          .sss-card {
+            position: absolute;
+            left: 50%;
+            top: 58%;
+            width: 46cqw;
+            height: 42cqh;
+            margin-left: -23cqw;
+            margin-top: -21cqh;
+            border: 0.16cqmin solid var(--border, #343a46);
+            border-radius: var(--radius, 2.2cqmin);
+            background: var(--surface, #14171c);
+            box-shadow: 0 2.2cqh 6cqh color-mix(in srgb, var(--bg, #000000) 55%, transparent);
+            overflow: hidden;
+            will-change: transform, opacity;
+          }
+
+          /* Active-card ring: opacity is timeline-driven so the front card
+             reads as the live one across every shuffle. */
+          .sss-ring {
+            position: absolute;
+            inset: 0;
+            border: 0.4cqmin solid var(--sss-accent, #71f5a7);
+            border-radius: inherit;
+            opacity: 0;
+            pointer-events: none;
+            z-index: 3;
+          }
+
+          /* Depth veil: timeline-driven dim; deeper cards sit darker. */
+          .sss-veil {
+            position: absolute;
+            inset: 0;
+            background: var(--bg, #0b0c0e);
+            border-radius: inherit;
+            opacity: 0;
+            pointer-events: none;
+            z-index: 2;
+          }
+
+          .sss-slot {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            border-radius: inherit;
+          }
+
+          .sss-slot > img,
+          .sss-slot > video {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+          }
+
+          .sss-default {
+            position: absolute;
+            inset: 0;
+            padding: var(--space-3, 3.2cqmin);
+            display: flex;
+            flex-direction: column;
+            gap: var(--space-2, 2cqmin);
+          }
+
+          .sss-chip {
+            align-self: flex-start;
+            padding: 0.9cqmin 1.8cqmin;
+            border: 0.14cqmin solid var(--border, #343a46);
+            border-radius: 999cqmin;
+            color: var(--muted, #94a3b8);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            font-size: min(1.7cqw, 3cqh);
+            font-weight: 600;
+            letter-spacing: 0.08em;
+            line-height: 1;
+          }
+
+          .sss-bar {
+            width: 46%;
+            height: 8%;
+            border-radius: 999cqmin;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 22%, var(--surface, #14171c));
+          }
+
+          .sss-line {
+            width: 84%;
+            height: 5%;
+            border-radius: 999cqmin;
+            background: color-mix(in srgb, var(--muted, #94a3b8) 34%, var(--surface, #14171c));
+          }
+
+          .sss-line + .sss-line {
+            width: 70%;
+          }
+        </style>
+
+        <div
+          id="spring-stack-shuffle-clip"
+          class="sss-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="sss-stage">
+            <section class="sss-card" aria-label="Card 1">
+              <div class="sss-slot" data-slot="card-1">
+                <!-- SLOT "card-1": replace the children of this element with
+                     your own content (img, video, or HTML). -->
+                <div class="sss-default" aria-hidden="true">
+                  <div class="sss-chip">01</div>
+                  <div class="sss-bar"></div>
+                  <div class="sss-line"></div>
+                  <div class="sss-line"></div>
+                </div>
+              </div>
+              <div class="sss-veil"></div>
+              <div class="sss-ring"></div>
+            </section>
+            <section class="sss-card" aria-label="Card 2">
+              <div class="sss-slot" data-slot="card-2">
+                <!-- SLOT "card-2": replace the children of this element with
+                     your own content (img, video, or HTML). -->
+                <div class="sss-default" aria-hidden="true">
+                  <div class="sss-chip">02</div>
+                  <div class="sss-bar"></div>
+                  <div class="sss-line"></div>
+                  <div class="sss-line"></div>
+                </div>
+              </div>
+              <div class="sss-veil"></div>
+              <div class="sss-ring"></div>
+            </section>
+            <section class="sss-card" aria-label="Card 3">
+              <div class="sss-slot" data-slot="card-3">
+                <!-- SLOT "card-3": replace the children of this element with
+                     your own content (img, video, or HTML). -->
+                <div class="sss-default" aria-hidden="true">
+                  <div class="sss-chip">03</div>
+                  <div class="sss-bar"></div>
+                  <div class="sss-line"></div>
+                  <div class="sss-line"></div>
+                </div>
+              </div>
+              <div class="sss-veil"></div>
+              <div class="sss-ring"></div>
+            </section>
+            <section class="sss-card" aria-label="Card 4">
+              <div class="sss-slot" data-slot="card-4">
+                <!-- SLOT "card-4": replace the children of this element with
+                     your own content (img, video, or HTML). -->
+                <div class="sss-default" aria-hidden="true">
+                  <div class="sss-chip">04</div>
+                  <div class="sss-bar"></div>
+                  <div class="sss-line"></div>
+                  <div class="sss-line"></div>
+                </div>
+              </div>
+              <div class="sss-veil"></div>
+              <div class="sss-ring"></div>
+            </section>
+            <section class="sss-card" aria-label="Card 5">
+              <div class="sss-slot" data-slot="card-5">
+                <!-- SLOT "card-5": replace the children of this element with
+                     your own content (img, video, or HTML). -->
+                <div class="sss-default" aria-hidden="true">
+                  <div class="sss-chip">05</div>
+                  <div class="sss-bar"></div>
+                  <div class="sss-line"></div>
+                  <div class="sss-line"></div>
+                </div>
+              </div>
+              <div class="sss-veil"></div>
+              <div class="sss-ring"></div>
+            </section>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            // Literal id: mount flattening strips data-composition-id from
+            // the live root before this timeline registers.
+            var compositionId = "spring-stack-shuffle";
+            var stage = root.querySelector(".sss-stage");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            root.style.setProperty("--sss-accent", accentColors[accent]);
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            var cardCountRaw = Number(vars.cards);
+            var cardCount = Number.isFinite(cardCountRaw)
+              ? Math.max(3, Math.min(5, Math.round(cardCountRaw)))
+              : 4;
+            var cardEls = Array.prototype.slice.call(root.querySelectorAll(".sss-card"));
+            cardEls.slice(cardCount).forEach(function (el) {
+              el.remove();
+            });
+            cardEls = cardEls.slice(0, cardCount);
+
+            // Stack geometry in px measured once from the mounted root:
+            // cq-unit transform tweens are not seek-safe, px numbers are.
+            var rect = root.getBoundingClientRect();
+            var W = Math.max(1, rect.width);
+            var H = Math.max(1, rect.height);
+            var STEP_Y = -0.055 * H; // deeper cards peek above the front card
+            var STEP_S = 0.05;
+            var APEX_Y = STEP_Y * (cardCount - 1) - 0.09 * H; // arc above the stack
+            var KICK_X = 0.12 * W; // lateral kick during the throw
+            var BUMP_Y = 0.012 * H; // stack compress as the flyer lands
+
+            function poseFor(depth) {
+              return {
+                y: depth * STEP_Y,
+                s: 1 - depth * STEP_S,
+                veil: Math.min(0.5, depth * 0.15),
+              };
+            }
+
+            // RETIME RANGE: fixed IN and OUT; HOLD is the only elastic span.
+            var THROW = 0.85;
+            var RISE = THROW * 0.4;
+            var LAND = THROW * 0.6;
+            var SHIFT = 0.55;
+            var OUT = exit === "none" ? 0 : 0.45;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var OUT_START = duration - OUT;
+            var CUE_MIN = 0.85;
+            var CUE_MAX = Math.max(CUE_MIN, OUT_START - THROW - 0.05);
+
+            var cues = String(
+              vars.cues == null || String(vars.cues).trim() === "" ? "0.9, 1.7, 1.95" : vars.cues,
+            )
+              .split(",")
+              .map(function (token) {
+                return Number(token);
+              })
+              .filter(function (value) {
+                return Number.isFinite(value);
+              })
+              .map(function (value) {
+                return Math.min(CUE_MAX, Math.max(CUE_MIN, value));
+              })
+              .sort(function (a, b) {
+                return a - b;
+              });
+
+            /* Author-time motion compiler. A track is one (element, property)
+               pair holding non-overlapping segments; every segment is a pure
+               curve with explicit endpoints. cutAt() is the L1 primitive: it
+               evaluates value and velocity at the cut analytically, truncates
+               the covering segment to a renormalized copy of its own curve,
+               and drops everything later. redirect() continues from the cut
+               with a Hermite ease whose start slope IS the cut velocity. */
+            function easeFn(ease) {
+              return typeof ease === "function" ? ease : gsap.parseEase(ease);
+            }
+
+            function makeTrack(el, prop, initial) {
+              return { el: el, prop: prop, initial: initial, segs: [] };
+            }
+
+            function endValue(track) {
+              return track.segs.length > 0 ? track.segs[track.segs.length - 1].to : track.initial;
+            }
+
+            function cutAt(track, time) {
+              var segs = track.segs;
+              while (segs.length > 0 && segs[segs.length - 1].t0 >= time) segs.pop();
+              if (segs.length === 0) return { value: track.initial, velocity: 0 };
+              var last = segs[segs.length - 1];
+              if (last.t1 <= time) return { value: last.to, velocity: 0 };
+              var curve = easeFn(last.ease);
+              var span = last.t1 - last.t0;
+              var f = (time - last.t0) / span;
+              var lo = Math.max(0, f - 0.001);
+              var hi = Math.min(1, f + 0.001);
+              var slope = (curve(hi) - curve(lo)) / (hi - lo);
+              var progress = curve(f);
+              var value = last.from + (last.to - last.from) * progress;
+              var velocity = ((last.to - last.from) * slope) / span;
+              last.t1 = time;
+              last.to = value;
+              if (progress > 1e-6) {
+                last.ease = (function (fullCurve, cutFraction, cutProgress) {
+                  return function (u) {
+                    return fullCurve(u * cutFraction) / cutProgress;
+                  };
+                })(curve, f, progress);
+              }
+              return { value: value, velocity: velocity };
+            }
+
+            // Cubic Hermite: h(0)=0, h(1)=1, h'(0)=m, h'(1)=0. A hot start
+            // slope overshoots past the target and eases back, which is the
+            // spring read; the clamp keeps it in the quiet register (L2).
+            function hermite(m0) {
+              var m = Math.max(-4, Math.min(4, m0));
+              return function (u) {
+                return u * u * u * (m - 2) + u * u * (3 - 2 * m) + m * u;
+              };
+            }
+
+            var smooth = hermite(0); // smoothstep: zero slope both ends
+
+            // Landing ease: zero-slope start (ballistic hang at the apex),
+            // small overshoot past the target, zero-slope settle. C1 all the
+            // way through, pure function of progress.
+            function landEase(overshoot) {
+              return function (u) {
+                if (u < 0.62) {
+                  var a = u / 0.62;
+                  return (1 + overshoot) * a * a * (3 - 2 * a);
+                }
+                var b = (u - 0.62) / 0.38;
+                return 1 + overshoot - overshoot * b * b * (3 - 2 * b);
+              };
+            }
+
+            function addSeg(track, t0, dur, to, ease) {
+              track.segs.push({ t0: t0, t1: t0 + dur, from: endValue(track), to: to, ease: ease });
+            }
+
+            function redirect(track, time, dur, to) {
+              var cut = cutAt(track, time);
+              var delta = to - cut.value;
+              var ease = Math.abs(delta) < 1e-4 ? smooth : hermite((cut.velocity * dur) / delta);
+              track.segs.push({ t0: time, t1: time + dur, from: cut.value, to: to, ease: ease });
+            }
+
+            var powerOut = gsap.parseEase("power3.out");
+            var cards = cardEls.map(function (el, index) {
+              var pose = poseFor(index);
+              return {
+                el: el,
+                depth: index,
+                landing: null,
+                x: makeTrack(el, "x", 0),
+                y: makeTrack(el, "y", pose.y + 0.05 * H),
+                s: makeTrack(el, "s", pose.s * 0.985),
+                veil: makeTrack(el.querySelector(".sss-veil"), "veil", pose.veil),
+                ring: makeTrack(el.querySelector(".sss-ring"), "ring", 0),
+              };
+            });
+            var zEvents = [];
+
+            // IN: staggered entrances, back card first, front card last.
+            cards.forEach(function (card, index) {
+              var pose = poseFor(index);
+              var tIn = (cardCount - 1 - index) * 0.07;
+              addSeg(card.y, tIn, 0.5, pose.y, powerOut);
+              addSeg(card.s, tIn, 0.5, pose.s, powerOut);
+              if (index === 0) addSeg(card.ring, 0.45, 0.3, 0.9, smooth);
+            });
+
+            // SHUFFLES: one per cue. The back card throws over the top; the
+            // rest step one slot deeper. Any card still in flight when a cue
+            // fires is cut and redirected, velocity preserved (L1).
+            cues.forEach(function (cue) {
+              var back = cards.reduce(function (a, b) {
+                return b.depth > a.depth ? b : a;
+              });
+              cards.forEach(function (card) {
+                if (card.landing && card.landing.t > cue) card.landing.canceled = true;
+                card.landing = null;
+                card.depth = card === back ? 0 : card.depth + 1;
+                zEvents.push({
+                  t: cue,
+                  el: card.el,
+                  z: card === back ? 60 : 40 - card.depth,
+                  canceled: false,
+                });
+              });
+
+              cards.forEach(function (card) {
+                var pose = poseFor(card.depth);
+                if (card === back) {
+                  // Throw arc: velocity-matched rise to a ballistic apex,
+                  // then a landing with one small sanctioned overshoot.
+                  redirect(card.x, cue, RISE, KICK_X);
+                  addSeg(card.x, cue + RISE, LAND, 0, smooth);
+                  redirect(card.y, cue, RISE, APEX_Y);
+                  addSeg(card.y, cue + RISE, LAND, pose.y, landEase(0.06));
+                  redirect(card.s, cue, RISE, 1.05);
+                  addSeg(card.s, cue + RISE, LAND, pose.s, landEase(0.04));
+                  redirect(card.veil, cue, THROW, pose.veil);
+                  redirect(card.ring, cue, THROW, 0.9);
+                  var landing = { t: cue + THROW, el: card.el, z: 40, canceled: false };
+                  zEvents.push(landing);
+                  card.landing = landing;
+                } else {
+                  redirect(card.x, cue, SHIFT, 0);
+                  redirect(card.y, cue, SHIFT, pose.y);
+                  redirect(card.s, cue, SHIFT, pose.s);
+                  redirect(card.veil, cue, SHIFT, pose.veil);
+                  redirect(card.ring, cue, SHIFT, 0);
+                }
+              });
+
+              // Compress-resettle: the stack takes the flyer's weight.
+              cards.forEach(function (card) {
+                if (card === back) return;
+                var rest = endValue(card.y);
+                addSeg(card.y, cue + THROW - 0.05, 0.16, rest + BUMP_Y, smooth);
+                addSeg(card.y, cue + THROW + 0.11, 0.22, rest, smooth);
+              });
+            });
+
+            // EMIT: initial states, then every compiled segment as an
+            // explicit fromTo. Segments never overlap per track, both
+            // endpoints are authored, eases are pure functions: seek-safe.
+            var propFor = {
+              x: function (value) {
+                return { x: value };
+              },
+              y: function (value) {
+                return { y: value };
+              },
+              s: function (value) {
+                return { scale: value };
+              },
+              veil: function (value) {
+                return { opacity: value };
+              },
+              ring: function (value) {
+                return { opacity: value };
+              },
+            };
+
+            gsap.set(stage, { opacity: 1, y: 0 });
+            cards.forEach(function (card, index) {
+              gsap.set(card.el, { opacity: 0, zIndex: 40 - index });
+            });
+
+            var tl = gsap.timeline({ paused: true });
+
+            cards.forEach(function (card, index) {
+              var tIn = (cardCount - 1 - index) * 0.07;
+              tl.fromTo(
+                card.el,
+                { opacity: 0 },
+                { opacity: 1, duration: 0.4, ease: "power2.out" },
+                tIn,
+              );
+              ["x", "y", "s", "veil", "ring"].forEach(function (prop) {
+                var track = card[prop];
+                var toProps = propFor[prop];
+                gsap.set(track.el, toProps(track.initial));
+                track.segs.forEach(function (seg) {
+                  var dur = seg.t1 - seg.t0;
+                  if (dur < 1 / 120) {
+                    tl.set(track.el, toProps(seg.to), seg.t1);
+                    return;
+                  }
+                  var to = toProps(seg.to);
+                  to.duration = dur;
+                  to.ease = easeFn(seg.ease);
+                  tl.fromTo(track.el, toProps(seg.from), to, seg.t0);
+                });
+              });
+            });
+
+            zEvents.forEach(function (event) {
+              if (event.canceled) return;
+              tl.set(event.el, { zIndex: event.z }, event.t);
+            });
+
+            // HOLD: completely still after the last landing bump.
+
+            // OUT: optional departure; exit none holds until the frame cuts.
+            if (exit === "fade") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "up") {
+              tl.to(
+                stage,
+                { opacity: 0, y: -0.07 * H, duration: OUT, ease: "power2.in" },
+                OUT_START,
+              );
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add spring-stack-shuffle" />
+
+That writes one file: `compositions/components/spring-stack-shuffle.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/spring-stack-shuffle.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `product-demo` `physics` `stack` `interruptible-spring`.
+
+## 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/components/stagger-cascade.mdx b/docs/catalog/components/stagger-cascade.mdx
new file mode 100644
index 0000000000..0021c68dad
--- /dev/null
+++ b/docs/catalog/components/stagger-cascade.mdx
@@ -0,0 +1,300 @@
+---
+title: "Stagger Cascade"
+description: "A responsive grid of tile cards that fades and travels into place with an evenly spaced per-item GSAP stagger. The ordered cascade is the only visual mechanic."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/stagger-cascade.html"
+  compositionId="stagger-cascade"
+  compositionSrc="compositions/components/stagger-cascade.html"
+  variables={[{"id":"itemCount","type":"number","role":"layout","label":"Item count","description":"Number of tiles in the responsive grid.","default":6,"min":3,"max":12,"step":1},{"id":"stagger","type":"number","role":"motion","label":"Stagger","description":"Delay between consecutive tile entrances.","default":60,"min":20,"max":150,"step":1,"unit":"ms"},{"id":"direction","type":"enum","role":"motion","label":"Direction","description":"Direction each tile travels into its resting position.","default":"up","options":[{"value":"up","label":"Up"},{"value":"down","label":"Down"},{"value":"left","label":"Left"},{"value":"right","label":"Right"}]}]}
+>
+
+```html stagger-cascade.html
+<!doctype html>
+<!--
+  stagger-cascade: HyperFrames video primitive (effects / burst / exhibit)
+
+  Concept: a responsive grid of plain tile cards enters in DOM order with one
+  visible, evenly spaced GSAP stagger. Each tile fades from opacity 0 to 1 and
+  travels along the selected axis from a container-relative offset to rest.
+  One mechanic, one job: exhibit a group through a readable cascade.
+
+  Compiled-from evidence: production census (launches-motion-vocabulary.md),
+  where stagger cascades appear in 13 of 18 launches and observed steps center
+  around 0.04 to 0.08 seconds, with 0.14 to 0.18 seconds used for deliberate
+  item-by-item reveals.
+
+  Use when: a set of cards, features, rows, or related objects needs to arrive
+  as an ordered group without adding a competing hero motion.
+
+  Variables (declared in data-composition-variables below):
+    - itemCount (number, default 6, range 3 to 12): tiles in the grid.
+    - stagger (number, default 60, range 20 to 150 ms): delay per tile.
+    - direction (up | down | left | right, default up): travel direction into
+      the resting grid. Up starts below, left starts to the right, and so on.
+
+  Envelope (fixed IN/OUT, elastic HOLD only, never gsap.timeScale()):
+    IN_BASE  = 2.40s  cascade budget, including the slowest valid stagger.
+    HOLD     = elastic = max(0, D - (IN_BASE + OUT_BASE)); deliberately still
+               so the ordered entrance remains the only mechanic.
+    OUT_BASE = 0.40s  clean group fade using --ease-exit (power2.in).
+    If D < IN_BASE + OUT_BASE, IN and OUT scale down together so IN + OUT == D
+    and HOLD == 0. The stagger step scales only in that compressed envelope.
+
+  Sync point: none. The mechanic distributes arrivals across the IN phase, so
+  there is no single fixed cue that represents the cascade honestly.
+
+  Sound cue: none. A distributed cascade has no meaningful single-frame sound
+  event, so this primitive does not dispatch hf:sfx.
+
+  Mount contract: this file is a MOUNTABLE SUB-COMPOSITION. A host loads it via
+  data-composition-src, and the runtime clones only <template> contents. Styles,
+  markup, GSAP, and timeline registration therefore live inside <template>.
+  #root has position:absolute; inset:0; container-type:size and no data-width or
+  data-height, so the host owns the box. The composition id is hardcoded as
+  "stagger-cascade" because mount flattening strips it from the live root.
+  Variables come from window.__hyperframes.getVariables(), which supplies the
+  declared defaults merged with host data-variable-values overrides.
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "itemCount", "type": "number", "role": "layout", "label": "Item count", "description": "Number of tiles in the responsive grid.", "default": 6, "min": 3, "max": 12, "step": 1 },
+    { "id": "stagger", "type": "number", "role": "motion", "label": "Stagger", "description": "Delay between consecutive tile entrances.", "default": 60, "min": 20, "max": 150, "step": 1, "unit": "ms" },
+    { "id": "direction", "type": "enum", "role": "motion", "label": "Direction", "description": "Direction each tile travels into its resting position.", "default": "up", "options": [{ "value": "up", "label": "Up" }, { "value": "down", "label": "Down" }, { "value": "left", "label": "Left" }, { "value": "right", "label": "Right" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Stagger Cascade</title>
+    <!-- Metadata only. The mount loader reads variable declarations from
+         <html>, then discards everything outside <template>. -->
+  </head>
+  <body>
+    <template>
+      <div
+        id="root"
+        data-composition-id="stagger-cascade"
+        data-start="0"
+        data-duration="4"
+        data-fps="30"
+      >
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          /* Root fills the host box. Every internal measurement uses cqw/cqh,
+             and every painted color comes from the host theme contract. */
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            color: var(--fg);
+            font-family: var(--font-body);
+          }
+
+          .sc-clip {
+            width: 100%;
+            height: 100%;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+            background: var(--bg);
+          }
+
+          .sc-grid {
+            width: 82cqw;
+            height: 70cqh;
+            display: grid;
+            grid-template-columns: repeat(var(--sc-columns), minmax(0, 1fr));
+            grid-auto-rows: minmax(0, 1fr);
+            gap: min(2.2cqw, 3.8cqh);
+          }
+
+          .sc-tile {
+            position: relative;
+            min-width: 0;
+            min-height: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+            border: 0.16cqw solid var(--border);
+            border-radius: min(2.4cqw, 4cqh);
+            background: color-mix(in srgb, var(--surface) 92%, var(--brand));
+            color: var(--fg);
+          }
+
+          .sc-tile::after {
+            content: "";
+            position: absolute;
+            left: 14%;
+            right: 14%;
+            bottom: 12%;
+            height: min(0.55cqw, 0.95cqh);
+            border-radius: 50cqw;
+            background: var(--brand);
+            opacity: 0.72;
+          }
+
+          .sc-tile-index {
+            display: block;
+            font-family: var(--font-display);
+            font-size: min(5cqw, 8cqh);
+            font-weight: 700;
+            line-height: 1;
+            color: var(--fg);
+          }
+        </style>
+
+        <div
+          id="stagger-cascade-clip"
+          class="sc-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="sc-grid" aria-label="Cascading tile grid"></div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var compositionId = "stagger-cascade";
+            var grid = root.querySelector(".sc-grid");
+
+            // EDIT ZONE: declarations above and clamped reads below are the
+            // single source of truth for the primitive's three public knobs.
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var rawItemCount = Number(vars.itemCount);
+            var itemCount = Number.isFinite(rawItemCount) ? Math.round(rawItemCount) : 6;
+            itemCount = Math.max(3, Math.min(12, itemCount));
+
+            var rawStagger = Number(vars.stagger);
+            var staggerMs = Number.isFinite(rawStagger) ? rawStagger : 60;
+            staggerMs = Math.max(20, Math.min(150, staggerMs));
+
+            // INVARIANT: only these four mappings can reach GSAP. Each option
+            // has a distinct axis or sign at preview size.
+            var offsets = {
+              up: { x: "0cqw", y: "12cqh" },
+              down: { x: "0cqw", y: "-12cqh" },
+              left: { x: "8cqw", y: "0cqh" },
+              right: { x: "-8cqw", y: "0cqh" },
+            };
+            var offset = Object.prototype.hasOwnProperty.call(offsets, vars.direction)
+              ? offsets[vars.direction]
+              : offsets.up;
+
+            // itemCount owns both DOM count and the responsive grid shape.
+            var fragment = document.createDocumentFragment();
+            for (var index = 0; index < itemCount; index += 1) {
+              var tile = document.createElement("div");
+              var number = document.createElement("span");
+              tile.className = "sc-tile";
+              tile.setAttribute("aria-hidden", "true");
+              number.className = "sc-tile-index";
+              number.textContent = String(index + 1).padStart(2, "0");
+              tile.appendChild(number);
+              fragment.appendChild(tile);
+            }
+            grid.replaceChildren(fragment);
+            grid.style.setProperty(
+              "--sc-columns",
+              String(Math.min(4, Math.ceil(Math.sqrt(itemCount)))),
+            );
+
+            var tiles = root.querySelectorAll(".sc-tile");
+
+            // RETIME RANGE: change these four base values together. IN_BASE is
+            // sized so 12 items at 150ms plus the entrance tween finish exactly
+            // at its boundary. HOLD alone absorbs longer host durations.
+            var IN_BASE = 2.4;
+            var OUT_BASE = 0.4;
+            var CASCADE_START_BASE = 0.1;
+            var ENTRY_DURATION_BASE = 0.65;
+
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var totalBase = IN_BASE + OUT_BASE;
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var OUT_START = IN + HOLD;
+            var CASCADE_START = CASCADE_START_BASE * scale;
+            var ENTRY_DURATION = ENTRY_DURATION_BASE * scale;
+            var STAGGER_SECONDS = (staggerMs / 1000) * scale;
+
+            var timeline = gsap.timeline({ paused: true });
+
+            // IN: the sole mechanic. Explicit endpoints keep mounted re-seeks
+            // deterministic. power2.out is --ease-standard.
+            timeline.fromTo(
+              tiles,
+              { opacity: 0, x: offset.x, y: offset.y },
+              {
+                opacity: 1,
+                x: "0cqw",
+                y: "0cqh",
+                duration: ENTRY_DURATION,
+                ease: "power2.out",
+                stagger: { each: STAGGER_SECONDS, from: "start" },
+              },
+              CASCADE_START,
+            );
+
+            // HOLD: deliberately unanimated. OUT: one clean group fade with
+            // power2.in, the GSAP form of --ease-exit.
+            timeline.to(grid, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+
+            timeline.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = timeline;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add stagger-cascade" />
+
+That writes one file: `compositions/components/stagger-cascade.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/stagger-cascade.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `effects` `grid` `stagger` `entrance` `exhibit`.
+
+## 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/components/stagger-lattice.mdx b/docs/catalog/components/stagger-lattice.mdx
new file mode 100644
index 0000000000..e9c2b5f59b
--- /dev/null
+++ b/docs/catalog/components/stagger-lattice.mdx
@@ -0,0 +1,132 @@
+---
+title: "Stagger Lattice"
+description: "A staggered grid reveal inspired by Anime.js v4 stagger utilities, implemented with GSAP for HyperFrames."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/components/stagger-lattice.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Stagger Lattice preview" />
+
+## Install
+
+<InstallCommand command="npx hyperframes add stagger-lattice" />
+
+That writes one file: `compositions/components/stagger-lattice.html`.
+
+## Source
+
+<Accordion title={`stagger-lattice.html`}>
+
+```html
+<!--
+  Stagger Lattice - advanced HyperFrames primitive.
+
+  This is intentionally seekable: drive it from a paused GSAP timeline.
+  MotionPath examples require GSAP MotionPathPlugin. Three.js examples expose
+  a render(progress) adapter instead of a free-running requestAnimationFrame loop.
+-->
+
+<div class="hf-advanced-stagger-lattice">
+  <div class="grid">
+    <span class="cell"></span><span class="cell"></span><span class="cell"></span
+    ><span class="cell"></span><span class="cell"></span><span class="cell"></span
+    ><span class="cell"></span><span class="cell"></span><span class="cell"></span
+    ><span class="cell"></span><span class="cell"></span><span class="cell"></span
+    ><span class="cell"></span><span class="cell"></span><span class="cell"></span
+    ><span class="cell"></span><span class="cell"></span><span class="cell"></span
+    ><span class="cell"></span><span class="cell"></span><span class="cell"></span
+    ><span class="cell"></span><span class="cell"></span><span class="cell"></span
+    ><span class="cell"></span><span class="cell"></span><span class="cell"></span
+    ><span class="cell"></span><span class="cell"></span><span class="cell"></span
+    ><span class="cell"></span><span class="cell"></span><span class="cell"></span
+    ><span class="cell"></span><span class="cell"></span><span class="cell"></span
+    ><span class="cell"></span><span class="cell"></span><span class="cell"></span
+    ><span class="cell"></span>
+  </div>
+</div>
+
+<style>
+  .hf-advanced-stagger-lattice {
+    --hf-accent: var(--accent, rgba(17, 24, 39, 0.72));
+    --hf-l1: rgba(17, 24, 39, 0.72);
+    --hf-l3: rgba(17, 24, 39, 0.18);
+    --hf-l4: rgba(17, 24, 39, 0.08);
+    --hf-hair: rgba(17, 24, 39, 0.14);
+    color: var(--hf-l1);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-advanced-stagger-lattice {
+    width: 720px;
+    min-height: 420px;
+    border-radius: 30px;
+    padding: 36px;
+    background: #fff;
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.16);
+    display: grid;
+    place-items: center;
+  }
+  .hf-advanced-stagger-lattice .grid {
+    display: grid;
+    grid-template-columns: repeat(8, 46px);
+    gap: 10px;
+  }
+  .hf-advanced-stagger-lattice .cell {
+    width: 46px;
+    height: 46px;
+    border-radius: 14px;
+    background: var(--hf-l1);
+    transform: translateY(var(--hf-cell-y, 0px)) scale(var(--hf-cell-scale, 1));
+    opacity: var(--hf-cell-opacity, 1);
+  }
+  .hf-advanced-stagger-lattice svg {
+    width: 520px;
+    height: 220px;
+    overflow: visible;
+  }
+  .hf-advanced-stagger-lattice path {
+    fill: none;
+    stroke: var(--hf-accent);
+    stroke-width: 14;
+    stroke-linecap: round;
+    stroke-dasharray: 900;
+    stroke-dashoffset: var(--hf-dash, 0);
+  }
+  .hf-advanced-stagger-lattice .stack {
+    position: relative;
+    width: 520px;
+    height: 260px;
+  }
+  .hf-advanced-stagger-lattice .card {
+    position: absolute;
+    inset: 0;
+    border-radius: 26px;
+    background: linear-gradient(var(--hf-l4), var(--hf-l4)), #ffffff;
+    border: 1px solid var(--hf-hair);
+    box-shadow: 0 20px 54px rgba(15, 23, 42, 0.14);
+    transform: translateY(var(--hf-card-y, 0px)) scale(var(--hf-card-scale, 1));
+    opacity: var(--hf-card-opacity, 1);
+  }
+</style>
+
+<!--
+  Timeline integration:
+  const startTime = 0;
+  tl.fromTo('.hf-advanced-stagger-lattice .cell', { '--hf-cell-y': '24px', '--hf-cell-scale': 0.72, '--hf-cell-opacity': 0 }, { '--hf-cell-y': '0px', '--hf-cell-scale': 1, '--hf-cell-opacity': 1, duration: 0.28, stagger: { each: 0.018, from: 'center', grid: [5, 8] }, ease: 'power2.out' }, startTime);
+-->
+```
+
+</Accordion>
+
+## Usage
+
+Open `compositions/components/stagger-lattice.html` and paste its contents into your composition. The comment header describes the timeline integration and any optional dependency setup.
+
+{/* hf:generated-footer */}
+
+Tagged `advanced-motion` `anime-inspired` `hyperframes-native`.
+
+## 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/components/staggered-fade-up.mdx b/docs/catalog/components/staggered-fade-up.mdx
new file mode 100644
index 0000000000..94a7991816
--- /dev/null
+++ b/docs/catalog/components/staggered-fade-up.mdx
@@ -0,0 +1,159 @@
+---
+title: "Staggered Fade Up"
+description: "Words fade in and slide up one after another with configurable delay."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/staggered-fade-up.html"
+  compositionId="staggered-fade-up"
+  compositionSrc="compositions/components/staggered-fade-up.html"
+  variables={[{"id":"direction","type":"enum","role":"motion","label":"Direction","description":"Where the offset the timeline drives points.","default":"up","options":[{"value":"up","label":"Up"},{"value":"down","label":"Down"},{"value":"left","label":"Left"},{"value":"right","label":"Right"}]},{"id":"distance","type":"enum","role":"motion","label":"Distance","description":"Scales the travel offset, so the words cover a shorter or longer run in the same time.","default":"standard","options":[{"value":"close","label":"Close"},{"value":"standard","label":"Standard"},{"value":"far","label":"Far"}]},{"id":"tone","type":"enum","role":"style","label":"Tone","description":"Word colour: ink for light frames, paper for dark ones, accent rides --brand.","default":"ink","options":[{"value":"ink","label":"Ink"},{"value":"paper","label":"Paper"},{"value":"accent","label":"Accent"}]},{"id":"words","type":"string","role":"content","label":"Words","description":"The words themselves, split on spaces, one span and one stagger step each.","default":"Staggered fade up"}]}
+>
+
+```html staggered-fade-up.html
+<!--
+  Staggered Fade Up - remocn typography primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Drive the timeline
+  integration from a paused GSAP timeline so renders remain deterministic.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result as a custom property
+  the CSS below consumes. The timeline recipe at the bottom is untouched by
+  them: it keeps driving one offset, one scale and one blur, and these decide
+  what that offset means on screen and what colour the words arrive in.
+
+    - direction (up | down | left | right, default up): where the offset the
+      timeline drives points. up rises into place, down drops in, left and
+      right slide in along the baseline.
+    - distance (close | standard | far, default standard): scales that offset,
+      so the words cover a shorter or longer run in the same time. close covers
+      half the run, far nearly double.
+    - tone (ink | paper | accent, default ink): word colour. ink is near-black
+      for light frames, paper near-white for dark ones, accent rides --brand.
+      It writes its own property and never touches the shared --fg token.
+    - words (text, default "Staggered fade up"): the words themselves, split on
+      spaces, one span and one stagger step each. Anything empty, blank or not
+      a string leaves the authored markup alone.
+
+  On every default the result is identical to the original: three near-black
+  words rise 22px through a 5px blur, 0.055s apart.
+-->
+
+<div
+  class="hf-remocn-staggered-fade-up"
+  data-composition-variables='[
+    { "id": "direction", "type": "enum", "role": "motion", "label": "Direction", "description": "Where the offset the timeline drives points.", "default": "up", "options": [{ "value": "up", "label": "Up" }, { "value": "down", "label": "Down" }, { "value": "left", "label": "Left" }, { "value": "right", "label": "Right" }] },
+    { "id": "distance", "type": "enum", "role": "motion", "label": "Distance", "description": "Scales the travel offset, so the words cover a shorter or longer run in the same time.", "default": "standard", "options": [{ "value": "close", "label": "Close" }, { "value": "standard", "label": "Standard" }, { "value": "far", "label": "Far" }] },
+    { "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Word colour: ink for light frames, paper for dark ones, accent rides --brand.", "default": "ink", "options": [{ "value": "ink", "label": "Ink" }, { "value": "paper", "label": "Paper" }, { "value": "accent", "label": "Accent" }] },
+    { "id": "words", "type": "string", "role": "content", "label": "Words", "description": "The words themselves, split on spaces, one span and one stagger step each.", "default": "Staggered fade up" }
+  ]'
+>
+  <span>Staggered</span><span>fade</span><span>up</span>
+</div>
+
+<style>
+  .hf-remocn-staggered-fade-up {
+    color: var(--hf-fade-word-color, var(--fg, #18181b));
+    font-family: var(--font-display, Inter, system-ui, sans-serif);
+    font-weight: 900;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-staggered-fade-up {
+    display: inline-flex;
+    gap: var(--space-1, 12px);
+    font-size: 56px;
+    line-height: 1;
+  }
+  .hf-remocn-staggered-fade-up span {
+    display: inline-block;
+    transform: translate(
+        calc(var(--hf-word-x, 0px) + var(--hf-word-y, 0px) * var(--hf-word-axis-x, 0)),
+        calc(var(--hf-word-y, 0px) * var(--hf-word-axis-y, 1))
+      )
+      scale(var(--hf-word-scale, 1));
+    filter: blur(var(--hf-word-blur, 0px));
+    will-change: transform, filter, opacity;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    var axes = {
+      up: { x: 0, y: 1 },
+      down: { x: 0, y: -1 },
+      left: { x: -1, y: 0 },
+      right: { x: 1, y: 0 },
+    };
+    var reaches = { close: 0.5, standard: 1, far: 1.85 };
+    var tones = {
+      ink: "var(--fg, #18181b)",
+      paper: "#fafafa",
+      accent: "var(--brand, #34d399)",
+    };
+
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var axis = axes[pick(axes, vars.direction, "up")];
+    var reach = reaches[pick(reaches, vars.distance, "standard")];
+    var tone = tones[pick(tones, vars.tone, "ink")];
+    var words =
+      typeof vars.words === "string" && vars.words.trim() ? vars.words.trim().split(/\s+/) : null;
+
+    var roots = document.querySelectorAll(".hf-remocn-staggered-fade-up");
+    for (var i = 0; i < roots.length; i += 1) {
+      roots[i].style.setProperty("--hf-word-axis-x", String(axis.x * reach));
+      roots[i].style.setProperty("--hf-word-axis-y", String(axis.y * reach));
+      roots[i].style.setProperty("--hf-fade-word-color", tone);
+      if (words) {
+        roots[i].textContent = "";
+        for (var j = 0; j < words.length; j += 1) {
+          var span = document.createElement("span");
+          span.textContent = words[j];
+          roots[i].appendChild(span);
+        }
+      }
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-staggered-fade-up span', { opacity: 0, '--hf-word-y': '22px', '--hf-word-scale': 0.92, '--hf-word-blur': '5px' }, { opacity: 1, '--hf-word-y': '0px', '--hf-word-scale': 1, '--hf-word-blur': '0px', duration: 0.3, stagger: 0.055, ease: 'power3.out' }, startTime);
+-->
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add staggered-fade-up" />
+
+That writes one file: `compositions/components/staggered-fade-up.html`.
+
+## Usage
+
+Open `compositions/components/staggered-fade-up.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+
+{/* hf:generated-footer */}
+
+Tagged `video-primitive` `motion-primitive` `remocn-port` `typography`.
+
+## 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/components/star-rating-fill.mdx b/docs/catalog/components/star-rating-fill.mdx
new file mode 100644
index 0000000000..2f1ac6d416
--- /dev/null
+++ b/docs/catalog/components/star-rating-fill.mdx
@@ -0,0 +1,340 @@
+---
+title: "Star Rating Fill"
+description: "A token-driven star row whose colored layer sweeps to a rating, preserves the fractional final star, and can count the value in sync."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/star-rating-fill.html"
+  compositionId="star-rating-fill"
+  compositionSrc="compositions/components/star-rating-fill.html"
+  variables={[{"id":"rating","type":"number","role":"content","label":"Rating","description":"Target rating in star units from 0 to 5.","default":4.8,"min":0,"max":5,"step":0.1},{"id":"starCount","type":"number","role":"layout","label":"Star count","description":"Number of stars shown in the row.","default":5,"min":1,"max":10,"step":1},{"id":"showValue","type":"enum","role":"content","label":"Show value","description":"Show or hide the synchronized numeric rating.","default":"yes","options":[{"value":"yes","label":"Yes"},{"value":"no","label":"No"}]}]}
+>
+
+```html star-rating-fill.html
+<!doctype html>
+<!--
+  star-rating-fill: HyperFrames video primitive (data / holdable / prove)
+
+  Concept: one token-colored star layer is clipped over a muted copy. A
+  single left-to-right clip-path sweep resolves at the target rating, so a
+  fractional value leaves the final filled star visibly partial. Small
+  per-star pops follow the same sweep and support the one fill mechanic.
+
+  Compiled-from evidence: GAP A2+B1 convergent miss, rules
+  stat-bars-and-fills. That evidence specifies a gray star layer, a colored
+  overlay, and a fractional clip wipe as the deterministic seek handle.
+
+  Use when: proving app-store credibility, customer satisfaction, review
+  quality, or any scored result that needs to read in one glance.
+
+  Variables:
+    rating    number  0 to 5  default 4.8  target rating in star units
+    starCount number          default 5    visible stars, clamped 1 to 10
+    showValue yes | no        default yes  show the synchronized count-up
+
+  Envelope:
+    IN   1.50s fixed sweep, count, and per-star pop, power2.out
+    HOLD elastic and deliberately still so the proof remains readable
+    OUT  0.40s fixed opacity release, power2.in
+    For durations shorter than 1.90s, IN and OUT scale together. HOLD is the
+    only elastic phase, and the timeline is never time-scaled.
+
+  Sync point: fill-settled at 1.30s into IN. It is fixed outside HOLD.
+
+  Sound cues: none. The result should not imply an audio event for its host.
+
+  Mount contract: this file is a template-wrapped sub-composition. The host
+  owns dimensions. #root fills that box with inset:0, uses container queries,
+  and has no data-width or data-height. The hardcoded composition id matches
+  the root and timeline key. Variables come from getVariables().
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "rating", "type": "number", "role": "content", "label": "Rating", "description": "Target rating in star units from 0 to 5.", "default": 4.8, "min": 0, "max": 5, "step": 0.1 },
+    { "id": "starCount", "type": "number", "role": "layout", "label": "Star count", "description": "Number of stars shown in the row.", "default": 5, "min": 1, "max": 10, "step": 1 },
+    { "id": "showValue", "type": "enum", "role": "content", "label": "Show value", "description": "Show or hide the synchronized numeric rating.", "default": "yes", "options": [{ "value": "yes", "label": "Yes" }, { "value": "no", "label": "No" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Star Rating Fill</title>
+  </head>
+  <body>
+    <template>
+      <div
+        id="root"
+        data-composition-id="star-rating-fill"
+        data-start="0"
+        data-duration="4"
+        data-fps="30"
+      >
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          /* INVARIANT: #root owns only the mount boundary. The host owns the
+             box, while all internal geometry stays container-relative. */
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            color: var(--fg, CanvasText);
+            font-family: var(--font-display, system-ui);
+          }
+
+          .srf-clip {
+            width: 100%;
+            height: 100%;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .srf-stage {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: var(--space-2, 3cqw);
+          }
+
+          /* EDIT ZONE: the row owns only its responsive presentation size.
+             --srf-count is supplied by the clamped public starCount value. */
+          .srf-stars {
+            --srf-count: 5;
+            position: relative;
+            width: min(68cqw, calc(72cqh * var(--srf-count)));
+          }
+
+          .srf-layer {
+            width: 100%;
+            display: flex;
+            align-items: center;
+          }
+
+          .srf-base {
+            color: color-mix(in srgb, var(--muted, currentColor) 68%, var(--surface, transparent));
+          }
+
+          .srf-fill {
+            position: absolute;
+            inset: 0;
+            color: var(--brand, currentColor);
+            clip-path: inset(0 100% 0 0);
+          }
+
+          .srf-star-cell {
+            display: block;
+            flex: 1 1 0;
+            min-width: 0;
+            aspect-ratio: 1;
+            transform-origin: center;
+          }
+
+          .srf-star-cell svg {
+            display: block;
+            width: 100%;
+            height: 100%;
+            overflow: visible;
+            fill: currentColor;
+          }
+
+          .srf-value {
+            min-width: 2.2em;
+            color: var(--fg, currentColor);
+            font-size: min(9cqw, 16cqh);
+            font-weight: 720;
+            font-variant-numeric: tabular-nums;
+            letter-spacing: -0.04em;
+            line-height: 1;
+            text-align: right;
+          }
+        </style>
+
+        <div
+          id="star-rating-fill-clip"
+          class="srf-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="srf-stage">
+            <div class="srf-stars" role="img" aria-label="0 out of 5 stars">
+              <div class="srf-layer srf-base" aria-hidden="true"></div>
+              <div class="srf-layer srf-fill" aria-hidden="true"></div>
+            </div>
+            <div class="srf-value" aria-hidden="true">0.0</div>
+          </div>
+        </div>
+
+        <template id="star-rating-fill-star-template">
+          <span class="srf-star-cell">
+            <svg viewBox="0 0 100 100" aria-hidden="true" focusable="false">
+              <path
+                d="M50 0 61.8 36.2 100 36.2 69.1 58.6 80.9 95 50 72.4 19.1 95 30.9 58.6 0 36.2 38.2 36.2Z"
+              />
+            </svg>
+          </span>
+        </template>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".srf-stage");
+            var stars = root.querySelector(".srf-stars");
+            var baseLayer = root.querySelector(".srf-base");
+            var fillLayer = root.querySelector(".srf-fill");
+            var valueElement = root.querySelector(".srf-value");
+            var starTemplate = root.querySelector("#star-rating-fill-star-template");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            /* INVARIANT: zero is a valid rating. Missing values and zero are
+               handled separately, then every public number is clamped once. */
+            var ratingValue = vars.rating == null || vars.rating === "" ? NaN : Number(vars.rating);
+            var requestedRating = Number.isFinite(ratingValue)
+              ? Math.max(0, Math.min(5, ratingValue))
+              : 4.8;
+            var starCountValue =
+              vars.starCount == null || vars.starCount === "" ? NaN : Number(vars.starCount);
+            var starCount = Number.isFinite(starCountValue) ? Math.round(starCountValue) : 5;
+            starCount = Math.max(1, Math.min(10, starCount));
+            var rating = Math.min(requestedRating, starCount);
+            var showValue = vars.showValue === "no" ? "no" : "yes";
+            var fillPercent = (rating / starCount) * 100;
+
+            stars.style.setProperty("--srf-count", String(starCount));
+            stars.setAttribute("aria-label", rating.toFixed(1) + " out of " + starCount + " stars");
+            valueElement.hidden = showValue === "no";
+
+            /* The template is the single owner of star geometry. Both paint
+               layers clone it so their silhouettes cannot drift. */
+            var baseFragment = document.createDocumentFragment();
+            var fillFragment = document.createDocumentFragment();
+            for (var index = 0; index < starCount; index += 1) {
+              baseFragment.appendChild(starTemplate.content.firstElementChild.cloneNode(true));
+              fillFragment.appendChild(starTemplate.content.firstElementChild.cloneNode(true));
+            }
+            baseLayer.replaceChildren(baseFragment);
+            fillLayer.replaceChildren(fillFragment);
+
+            var baseCells = baseLayer.querySelectorAll(".srf-star-cell");
+            var fillCells = fillLayer.querySelectorAll(".srf-star-cell");
+            var valueState = { current: 0 };
+
+            /* RETIME RANGE: these values own the full lifecycle. The sweep
+               uses --ease-standard's GSAP owner, power2.out. */
+            var IN_BASE = 1.5;
+            var OUT_BASE = 0.4;
+            var FILL_START_BASE = 0.2;
+            var FILL_DURATION_BASE = 1.1;
+            var POP_DURATION_BASE = 0.2;
+            var durationValue = Number(root.dataset.duration);
+            var duration = Number.isFinite(durationValue) && durationValue > 0 ? durationValue : 4;
+            var scale = duration < IN_BASE + OUT_BASE ? duration / (IN_BASE + OUT_BASE) : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var OUT_START = IN + HOLD;
+            var FILL_START = FILL_START_BASE * scale;
+            var FILL_DURATION = FILL_DURATION_BASE * scale;
+            var POP_DURATION = POP_DURATION_BASE * scale;
+
+            var timeline = gsap.timeline({ paused: true });
+
+            timeline.fromTo(
+              fillLayer,
+              { clipPath: "inset(0 100% 0 0)" },
+              {
+                clipPath: "inset(0 " + (100 - fillPercent) + "% 0 0)",
+                duration: FILL_DURATION,
+                ease: "power2.out",
+              },
+              FILL_START,
+            );
+
+            if (showValue === "yes") {
+              timeline.to(
+                valueState,
+                {
+                  current: rating,
+                  duration: FILL_DURATION,
+                  ease: "power2.out",
+                  onUpdate: function () {
+                    valueElement.textContent = valueState.current.toFixed(1);
+                  },
+                },
+                FILL_START,
+              );
+            }
+
+            /* Per-star pops are subordinate to the sweep and occur in the
+               same left-to-right order. They never change the fill endpoint. */
+            var popCount = Math.ceil(rating);
+            for (var popIndex = 0; popIndex < popCount; popIndex += 1) {
+              var popAt = FILL_START + FILL_DURATION * (popIndex / Math.max(1, rating)) * 0.82;
+              var popTargets = [baseCells[popIndex], fillCells[popIndex]];
+              timeline.to(
+                popTargets,
+                { scale: 1.06, duration: POP_DURATION * 0.45, ease: "power2.out" },
+                popAt,
+              );
+              timeline.to(
+                popTargets,
+                { scale: 1, duration: POP_DURATION * 0.55, ease: "power2.out" },
+                popAt + POP_DURATION * 0.45,
+              );
+            }
+
+            timeline.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+
+            timeline.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines["star-rating-fill"] = timeline;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add star-rating-fill" />
+
+That writes one file: `compositions/components/star-rating-fill.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/star-rating-fill.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `data` `rating` `stars` `fractional` `fill` `prove`.
+
+## 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/components/state-chip-rail.mdx b/docs/catalog/components/state-chip-rail.mdx
new file mode 100644
index 0000000000..14a123fd73
--- /dev/null
+++ b/docs/catalog/components/state-chip-rail.mdx
@@ -0,0 +1,405 @@
+---
+title: "State Chip Rail"
+description: "A rail of mono status chips advances a seek-safe data-state snap machine on a cue schedule: active chip ink on surface, done chips dim, pending chips hollow, optional badges pop beside one state."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/state-chip-rail.html"
+  compositionId="state-chip-rail"
+  compositionSrc="compositions/components/state-chip-rail.html"
+  variables={[{"id":"states","type":"string","role":"content","label":"States","description":"Comma-separated chip labels in machine order (2 to 8 states).","default":"Queued,Reading,Drafting,Done"},{"id":"times","type":"string","role":"timing","label":"Times","description":"Comma-separated activation times in seconds, one per advance (state 1 onward). Blank entries use the default even rhythm.","default":""},{"id":"badge_state","type":"number","role":"content","label":"Badge state","description":"Index of the state the badges pop beside.","default":1,"min":0,"max":7,"step":1},{"id":"badges","type":"string","role":"content","label":"Badges","description":"Comma-separated badge labels shown beside the badge state. Empty disables.","default":""},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Accent token family used by the active chip.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"How the rail leaves the frame. Default none: the hold ends the film.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
+>
+
+```html state-chip-rail.html
+<!doctype html>
+<!--
+  state-chip-rail: HyperFrames video primitive (product demo / state machine)
+
+  A rail of mono status chips advances a data-state snap machine on a cue
+  schedule. CSS alone responds to each chip's [data-state]; the timeline only
+  flips attributes with tl.set, so every advance is an instantaneous snap that
+  is exact in both seek directions (GSAP zero-duration sets record the prior
+  attribute value and restore it on backward seeks). The active chip is ink on
+  surface, done chips dim, pending chips stay hollow. Optional badges pop
+  beside one named state when it activates. Generalizes the flagship
+  agent-console status rail (cohere-north frame 04).
+
+  Variables (declared in data-composition-variables below):
+    - states (string, default "Queued,Reading,Drafting,Done"): comma list of
+      chip labels, in machine order. 2 to 8 states; extras are dropped.
+    - times (string, default ""): comma-separated activation times in seconds
+      relative to mount start, one per ADVANCE (state 1, state 2, ...).
+      Blank or invalid entries use the default even rhythm. Values are
+      clamped into the mount window and forced monotonic.
+    - badge_state (number, default 1): index of the state the badges pop
+      beside. Clamped to the states range.
+    - badges (string, default ""): comma list of badge labels rendered after
+      the badge_state chip; they pop in when that state activates. Empty
+      disables badges. Up to 4.
+    - accent (green | blue | violet, default green): active-chip accent.
+      green -> --brand, blue -> --accent, violet -> --accent-2.
+    - exit ("none" | "fade" | "up", default "none"): frame roots own
+      transitions; the default hold-ends-the-film.
+
+  Envelope, fixed IN with elastic HOLD (never gsap.timeScale()):
+    IN    = chip cascade (~0.8s) then the advance schedule; the default
+            rhythm spreads advances so the final state lands ~1s before the
+            mount window closes.
+    HOLD  = still after the last advance; nothing floats, nothing loops.
+    OUT   = 0 when exit is "none"; else 0.45s fade / fade-up of the rail.
+
+  Mount contract: elastic root, no data-width/data-height, styled via #root
+  only, container-type: size, one paused timeline registered under the
+  literal "state-chip-rail" key. Deterministic and seek-safe: fromTo
+  entrances, attribute snaps via tl.set, no CSS transitions, no Date.now,
+  no randomness. State dimming rides color (color-mix), never opacity, so it
+  can never collide with the entrance opacity tweens.
+-->
+<html
+  lang="en"
+  data-composition-id="state-chip-rail"
+  data-composition-duration="5"
+  data-composition-variables='[
+    { "id": "states", "type": "string", "role": "content", "label": "States", "description": "Comma-separated chip labels in machine order (2 to 8 states).", "default": "Queued,Reading,Drafting,Done" },
+    { "id": "times", "type": "string", "role": "timing", "label": "Times", "description": "Comma-separated activation times in seconds, one per advance (state 1 onward). Blank entries use the default even rhythm.", "default": "" },
+    { "id": "badge_state", "type": "number", "role": "content", "label": "Badge state", "description": "Index of the state the badges pop beside.", "default": 1, "min": 0, "max": 7, "step": 1 },
+    { "id": "badges", "type": "string", "role": "content", "label": "Badges", "description": "Comma-separated badge labels shown beside the badge state. Empty disables.", "default": "" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Accent token family used by the active chip.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "How the rail leaves the frame. Default none: the hold ends the film.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>State Chip Rail</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="state-chip-rail" data-duration="5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            background: var(--bg, transparent);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            pointer-events: none;
+          }
+
+          .scr-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+          }
+
+          .scr-rail {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-wrap: nowrap;
+            max-width: 94cqw;
+            gap: var(--scr-gap, 0.8em);
+            font-size: var(--scr-font, 2cqmin);
+            will-change: transform, opacity;
+          }
+
+          .scr-chip,
+          .scr-badge {
+            display: flex;
+            flex: 0 0 auto;
+            align-items: center;
+            gap: 0.55em;
+            padding: 0.62em 1.05em;
+            overflow: hidden;
+            border: 0.16cqmin solid var(--border, #334155);
+            border-radius: 100cqmax;
+            font-weight: 500;
+            line-height: 1;
+            letter-spacing: 0.14em;
+            text-transform: uppercase;
+            white-space: nowrap;
+            will-change: transform, opacity;
+          }
+
+          .scr-dot {
+            flex: 0 0 auto;
+            width: 0.5em;
+            aspect-ratio: 1;
+            border: 0.16cqmin solid var(--muted, #94a3b8);
+            border-radius: 50%;
+            background: transparent;
+          }
+
+          /* The snap machine: presentation is pure CSS on [data-state]; the
+             timeline only flips the attribute. Dimming rides color, never
+             opacity, so it cannot fight the entrance opacity tweens. */
+          .scr-chip[data-state="pending"] {
+            border-color: color-mix(in srgb, var(--border, #334155) 80%, transparent);
+            background: transparent;
+            color: color-mix(in srgb, var(--muted, #94a3b8) 78%, transparent);
+          }
+
+          .scr-chip[data-state="active"] {
+            border-color: color-mix(in srgb, var(--scr-accent) 62%, var(--border, #334155));
+            background: var(--surface, #131a24);
+            color: var(--fg, #f8fafc);
+          }
+          .scr-chip[data-state="active"] .scr-dot {
+            border-color: transparent;
+            background: var(--scr-accent, var(--brand, #71f5a7));
+          }
+
+          .scr-chip[data-state="done"] {
+            border-color: color-mix(in srgb, var(--border, #334155) 45%, transparent);
+            background: transparent;
+            color: color-mix(in srgb, var(--muted, #94a3b8) 42%, transparent);
+          }
+          .scr-chip[data-state="done"] .scr-dot {
+            border-color: transparent;
+            background: color-mix(in srgb, var(--scr-accent, #71f5a7) 38%, transparent);
+          }
+
+          .scr-badge {
+            padding: 0.5em 0.9em;
+            border-color: color-mix(in srgb, var(--border, #334155) 70%, transparent);
+            color: color-mix(in srgb, var(--muted, #94a3b8) 88%, transparent);
+            font-size: 0.82em;
+          }
+        </style>
+
+        <div
+          id="state-chip-rail-clip"
+          class="scr-clip clip"
+          data-start="0"
+          data-duration="5"
+          data-track-index="0"
+        >
+          <div class="scr-rail" role="list"></div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            // Literal id, never read off the DOM: the flattening step strips
+            // data-composition-id from the mounted root (see toggle-flip).
+            var compositionId = "state-chip-rail";
+            var root = document.getElementById("root");
+            var rail = root.querySelector(".scr-rail");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            function commaList(value, max) {
+              return String(value == null ? "" : value)
+                .split(",")
+                .map(function (token) {
+                  return token.trim();
+                })
+                .filter(function (token) {
+                  return token !== "";
+                })
+                .slice(0, max);
+            }
+
+            var states = commaList(vars.states, 8);
+            if (states.length === 0) states = ["Queued", "Reading", "Drafting", "Done"];
+            var count = states.length;
+
+            var badges = commaList(vars.badges, 4);
+            var badgeStateRaw = Math.round(Number(vars.badge_state));
+            var badgeState = Number.isFinite(badgeStateRaw)
+              ? Math.max(0, Math.min(count - 1, badgeStateRaw))
+              : Math.min(1, count - 1);
+
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            root.style.setProperty("--scr-accent", accentColors[accent]);
+
+            // Build the rail: chips in machine order, badges directly after
+            // the badge_state chip. State 0 is active from mount.
+            var chips = states.map(function (label, index) {
+              var chip = document.createElement("div");
+              chip.className = "scr-chip";
+              chip.setAttribute("role", "listitem");
+              chip.setAttribute("data-state", index === 0 ? "active" : "pending");
+              var dot = document.createElement("span");
+              dot.className = "scr-dot";
+              dot.setAttribute("aria-hidden", "true");
+              var text = document.createElement("span");
+              text.textContent = label;
+              chip.appendChild(dot);
+              chip.appendChild(text);
+              return chip;
+            });
+            var badgeElements = badges.map(function (label) {
+              var badge = document.createElement("div");
+              badge.className = "scr-badge";
+              badge.textContent = label;
+              return badge;
+            });
+            chips.forEach(function (chip, index) {
+              rail.appendChild(chip);
+              if (index === badgeState) {
+                badgeElements.forEach(function (badge) {
+                  rail.appendChild(badge);
+                });
+              }
+            });
+            rail.setAttribute("aria-label", states.join(", "));
+
+            // Deterministic fit: wide-tracked mono at ~0.76em per glyph, plus
+            // chip padding, dot, and rail gaps, all measured in em.
+            var railEm = (count - 1 + badges.length) * 0.8;
+            states.forEach(function (label) {
+              railEm += Array.from(label).length * 0.76 + 3.1;
+            });
+            badges.forEach(function (label) {
+              railEm += (Array.from(label).length * 0.76 + 2.5) * 0.82;
+            });
+            var fontCqw = Math.min(2.4, 90 / Math.max(1, railEm));
+            root.style.setProperty("--scr-font", "min(" + fontCqw.toFixed(3) + "cqw, 9cqh)");
+
+            // RETIME RANGE: fixed IN cascade + advance schedule, elastic
+            // still HOLD, optional OUT.
+            var OUT_BASE = 0.45;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "5"));
+            var OUT = exit === "none" ? 0 : Math.min(OUT_BASE, duration * 0.2);
+            var avail = duration - OUT;
+
+            var CHIP = Math.min(0.45, Math.max(0.2, avail * 0.15));
+            var entryGap = Math.min(0.08, Math.max(0.02, avail * 0.02));
+            var entryEnd = 0.12 + entryGap * (count - 1) + CHIP;
+
+            // Default rhythm: advances spread evenly from just after the
+            // cascade to ~1s before the window closes.
+            var firstAdvance = Math.min(Math.max(entryEnd + 0.15, 0.9), Math.max(0.2, avail - 0.6));
+            var lastAdvance = Math.max(firstAdvance, avail - 1.0);
+            var advanceCount = count - 1;
+            var timesList = String(vars.times == null ? "" : vars.times).split(",");
+            var previous = 0.15;
+            var advances = [];
+            for (var k = 0; k < advanceCount; k += 1) {
+              var fallback =
+                advanceCount > 1
+                  ? firstAdvance + (k * (lastAdvance - firstAdvance)) / (advanceCount - 1)
+                  : firstAdvance;
+              var cueText = (timesList[k] || "").trim();
+              var cue = Number(cueText);
+              var start = cueText !== "" && Number.isFinite(cue) ? cue : fallback;
+              start = Math.max(0.15, Math.min(start, Math.max(0.15, avail - 0.45)));
+              start = Math.max(start, previous + 0.05);
+              previous = start;
+              advances.push(start);
+            }
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: chips cascade into the rail. Explicit both-endpoints state
+            // so any seek is exact. Badges hold at scale 0 until their pop
+            // (they keep their layout slot, so the rail never reflows).
+            chips.forEach(function (chip, index) {
+              gsap.set(chip, { opacity: 0, y: "2.5cqh" });
+              tl.fromTo(
+                chip,
+                { opacity: 0, y: "2.5cqh" },
+                { opacity: 1, y: "0cqh", duration: CHIP, ease: "power3.out" },
+                0.12 + entryGap * index,
+              );
+            });
+
+            // The snap machine: pure attribute flips. GSAP records the prior
+            // value on first render in timeline order, so backward seeks
+            // restore pending / active exactly.
+            advances.forEach(function (start, index) {
+              var stateIndex = index + 1;
+              tl.set(chips[stateIndex], { attr: { "data-state": "active" } }, start);
+              tl.set(chips[stateIndex - 1], { attr: { "data-state": "done" } }, start);
+            });
+
+            // Badges pop beside their state as it activates.
+            if (badgeElements.length > 0) {
+              var popStart = badgeState === 0 ? entryEnd + 0.1 : advances[badgeState - 1] + 0.12;
+              popStart = Math.min(popStart, Math.max(0.2, avail - 0.4));
+              badgeElements.forEach(function (badge, index) {
+                gsap.set(badge, { opacity: 0, scale: 0 });
+                tl.fromTo(
+                  badge,
+                  { opacity: 0, scale: 0 },
+                  { opacity: 1, scale: 1, duration: 0.4, ease: "power3.out" },
+                  popStart + 0.14 * index,
+                );
+              });
+            }
+
+            // HOLD: intentionally still. The resolved machine reads as a frame.
+
+            // OUT: the whole rail leaves together.
+            if (exit !== "none") {
+              var OUT_START = duration - OUT;
+              tl.to(rail, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+              if (exit === "up") {
+                tl.to(rail, { y: "-3cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              }
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add state-chip-rail" />
+
+That writes one file: `compositions/components/state-chip-rail.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/state-chip-rail.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `product-demo` `state-machine` `status` `chips` `rail`.
+
+## 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/components/sticky-mock-swap.mdx b/docs/catalog/components/sticky-mock-swap.mdx
new file mode 100644
index 0000000000..c936e5882d
--- /dev/null
+++ b/docs/catalog/components/sticky-mock-swap.mdx
@@ -0,0 +1,507 @@
+---
+title: "Sticky Mock Swap"
+description: "A pinned product mock cross-fades through accent-tinted feature states while matching captions rise, hold, and exit beside it."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/sticky-mock-swap.html"
+  compositionId="sticky-mock-swap"
+  compositionSrc="compositions/components/sticky-mock-swap.html"
+  variables={[{"id":"captions","type":"string","role":"content","label":"Captions","description":"Comma-separated feature captions shown beside the pinned mock.","default":"Instant previews,Zero config,Ship on Friday"},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Accent tint used across the mock states.","default":"violet","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]}]}
+>
+
+```html sticky-mock-swap.html
+<!doctype html>
+<!--
+  sticky-mock-swap: HyperFrames video primitive (product-demo / demonstrate)
+
+  Concept: a product mock stays pinned while captions advance beside it. Each
+  caption rises along a shallow arc, holds, pauses before dismissal, then exits
+  upward along a second arc. At every caption threshold, only the mock content
+  cross-fades to the corresponding accent-tinted skeleton state.
+
+  Variables:
+    - captions (comma-separated string): feature captions. Whitespace and empty
+      entries are removed, with the declared default used when none remain.
+    - accent (green | blue | violet): tint shared by all mock states.
+
+  Envelope (caption-count driven, never timeScale):
+    PHASE = D / parsed caption count.
+    IN_BASE = 0.38s per phase for the caption rise and mock cross-fade.
+    HOLD = elastic per phase. Longer mounts stretch only this still-readable
+           interval, with a subtle seek-driven pulse inside the pinned mock.
+    OUT_BASE = 0.28s exit-delay plus 0.32s caption exit per phase.
+    If a phase is shorter than the fixed motion envelope, IN and OUT compress
+    proportionally and HOLD becomes zero. At the default D=6 and three captions,
+    the 0.28s stillness before each exit stays inside the 0.2s to 0.4s house rule.
+
+  Mount contract: this is a template-wrapped sub-composition. The runtime clones
+  only template contents. #root fills the host-owned box, has no data-width or
+  data-height, and establishes the cqw/cqh basis for every internal measurement.
+  One paused timeline is registered under the hardcoded sticky-mock-swap id.
+-->
+<html
+  lang="en"
+  data-composition-id="sticky-mock-swap"
+  data-composition-duration="6"
+  data-composition-variables='[
+    { "id": "captions", "type": "string", "role": "content", "label": "Captions", "description": "Comma-separated feature captions shown beside the pinned mock.", "default": "Instant previews,Zero config,Ship on Friday" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Accent tint used across the mock states.", "default": "violet", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Sticky Mock Swap</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="sticky-mock-swap" data-duration="6" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            background: var(--bg, #0b0c0e);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .sms-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+          }
+
+          .sms-shell {
+            width: 100%;
+            height: 100%;
+            display: grid;
+            grid-template-columns: minmax(0, 1.16fr) minmax(0, 0.84fr);
+            align-items: center;
+            gap: 5cqw;
+            padding: 8cqh 7cqw;
+          }
+
+          .sms-mock {
+            position: relative;
+            width: 100%;
+            height: 70cqh;
+            overflow: hidden;
+            border: 0.12cqmin solid color-mix(in srgb, var(--border, #334155) 74%, transparent);
+            border-radius: 2.8cqmin;
+            background: var(--surface, #121722);
+            box-shadow: 0 4cqh 10cqh color-mix(in srgb, #000 46%, transparent);
+          }
+
+          .sms-states,
+          .sms-state {
+            position: absolute;
+            inset: 0;
+          }
+
+          .sms-state {
+            --sms-live: 0.64;
+            display: grid;
+            grid-template-rows: 8cqh minmax(0, 1fr);
+            overflow: hidden;
+            opacity: 0;
+            background: color-mix(in srgb, var(--surface, #121722) 94%, var(--sms-accent));
+          }
+
+          .sms-toolbar {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 0 2.2cqw;
+            border-bottom: 0.1cqmin solid
+              color-mix(in srgb, var(--border, #334155) 62%, transparent);
+            background: color-mix(in srgb, #0f131c 92%, var(--sms-accent));
+          }
+
+          .sms-dots {
+            display: flex;
+            gap: 0.55cqw;
+          }
+
+          .sms-dots i {
+            width: 0.62cqw;
+            aspect-ratio: 1;
+            border-radius: 50%;
+            background: color-mix(in srgb, var(--muted, #94a3b8) 46%, transparent);
+          }
+
+          .sms-status {
+            width: 7.4cqw;
+            height: 1.2cqh;
+            border-radius: 1cqmin;
+            opacity: var(--sms-live);
+            background: var(--sms-accent);
+          }
+
+          .sms-window {
+            display: grid;
+            grid-template-columns: 24% minmax(0, 1fr);
+            min-height: 0;
+          }
+
+          .sms-sidebar {
+            display: flex;
+            flex-direction: column;
+            gap: 2.3cqh;
+            padding: 3.2cqh 1.8cqw;
+            border-right: 0.1cqmin solid color-mix(in srgb, var(--border, #334155) 52%, transparent);
+            background: color-mix(in srgb, #0e121a 94%, var(--sms-accent));
+          }
+
+          .sms-sidebar i,
+          .sms-title,
+          .sms-subtitle,
+          .sms-block {
+            display: block;
+            border-radius: 0.7cqmin;
+            background: color-mix(in srgb, var(--muted, #94a3b8) 20%, transparent);
+          }
+
+          .sms-sidebar i {
+            width: 82%;
+            height: 1.2cqh;
+          }
+
+          .sms-sidebar i:first-child {
+            width: 100%;
+            background: color-mix(in srgb, var(--sms-accent) 54%, transparent);
+          }
+
+          .sms-main {
+            position: relative;
+            min-width: 0;
+            padding: 4.4cqh 2.5cqw;
+          }
+
+          .sms-title {
+            width: 46%;
+            height: 2.1cqh;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 44%, transparent);
+          }
+
+          .sms-subtitle {
+            width: 68%;
+            height: 1.2cqh;
+            margin-top: 1.8cqh;
+          }
+
+          .sms-canvas {
+            position: absolute;
+            inset: 11.5cqh 2.5cqw 4.2cqh;
+            display: grid;
+            grid-template-columns: repeat(2, minmax(0, 1fr));
+            grid-template-rows: repeat(2, minmax(0, 1fr));
+            gap: 1.5cqmin;
+          }
+
+          .sms-block {
+            position: relative;
+            overflow: hidden;
+            border: 0.1cqmin solid color-mix(in srgb, var(--border, #334155) 54%, transparent);
+            background: color-mix(in srgb, #263044 54%, transparent);
+          }
+
+          .sms-block::after {
+            content: "";
+            position: absolute;
+            left: 12%;
+            right: 12%;
+            bottom: 16%;
+            height: 0.8cqh;
+            border-radius: 1cqmin;
+            opacity: var(--sms-live);
+            background: var(--sms-accent);
+          }
+
+          .sms-state--2 .sms-canvas {
+            grid-template-columns: 1fr;
+            grid-template-rows: repeat(4, minmax(0, 1fr));
+          }
+
+          .sms-state--2 .sms-block::after {
+            left: 8%;
+            right: 35%;
+            bottom: 28%;
+          }
+
+          .sms-state--3 .sms-canvas {
+            grid-template-columns: 1.45fr 0.55fr;
+            grid-template-rows: repeat(3, minmax(0, 1fr));
+          }
+
+          .sms-state--3 .sms-block:first-child {
+            grid-row: 1 / 4;
+          }
+
+          .sms-state--3 .sms-block::after {
+            left: 10%;
+            right: 18%;
+            bottom: 18%;
+          }
+
+          .sms-captions {
+            position: relative;
+            width: 100%;
+            height: 32cqh;
+          }
+
+          .sms-caption {
+            position: absolute;
+            inset: 0;
+            display: flex;
+            align-items: center;
+            max-width: 34cqw;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: 5.8cqmin;
+            font-weight: 720;
+            line-height: 1.04;
+            letter-spacing: -0.04em;
+            overflow-wrap: anywhere;
+            opacity: 0;
+            will-change: transform, opacity;
+          }
+
+          .sms-caption::before {
+            content: "";
+            flex: 0 0 auto;
+            align-self: center;
+            width: 0.75cqw;
+            height: 9cqh;
+            margin-right: 1.5cqw;
+            border-radius: 1cqmin;
+            background: var(--sms-accent);
+            box-shadow: 0 0 2cqmin color-mix(in srgb, var(--sms-accent) 48%, transparent);
+          }
+        </style>
+
+        <div
+          id="sticky-mock-swap-clip"
+          class="sms-clip clip"
+          data-start="0"
+          data-duration="6"
+          data-track-index="0"
+        >
+          <div class="sms-shell">
+            <div class="sms-mock" aria-hidden="true">
+              <div class="sms-states"></div>
+            </div>
+            <div class="sms-captions" aria-label="Feature captions"></div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var captionsHost = root.querySelector(".sms-captions");
+            var statesHost = root.querySelector(".sms-states");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var DEFAULT_CAPTIONS = ["Instant previews", "Zero config", "Ship on Friday"];
+            var captionsSource =
+              vars.captions == null ? DEFAULT_CAPTIONS.join(",") : String(vars.captions);
+            var captions = captionsSource.split(",").reduce(function (parsed, token) {
+              var caption = token.trim();
+              if (caption) parsed.push(caption);
+              return parsed;
+            }, []);
+            if (captions.length === 0) captions = DEFAULT_CAPTIONS.slice();
+
+            var accent =
+              vars.accent === "green" || vars.accent === "blue" || vars.accent === "violet"
+                ? vars.accent
+                : "violet";
+            var accentColors = {
+              green: "var(--brand, #34d399)",
+              blue: "var(--accent, #38bdf8)",
+              violet: "var(--accent-2, #a78bfa)",
+            };
+            root.style.setProperty("--sms-accent", accentColors[accent]);
+
+            var captionElements = [];
+            var stateElements = [];
+
+            captions.forEach(function (captionText, index) {
+              var caption = document.createElement("div");
+              caption.className = "sms-caption";
+              caption.textContent = captionText;
+              captionsHost.appendChild(caption);
+              captionElements.push(caption);
+
+              var state = document.createElement("div");
+              state.className = "sms-state sms-state--" + ((index % 3) + 1);
+              state.setAttribute("aria-hidden", "true");
+              state.innerHTML =
+                '<div class="sms-toolbar"><span class="sms-dots"><i></i><i></i><i></i></span><span class="sms-status"></span></div>' +
+                '<div class="sms-window"><aside class="sms-sidebar"><i></i><i></i><i></i><i></i></aside>' +
+                '<main class="sms-main"><span class="sms-title"></span><span class="sms-subtitle"></span>' +
+                '<div class="sms-canvas"><i class="sms-block"></i><i class="sms-block"></i><i class="sms-block"></i><i class="sms-block"></i></div></main></div>';
+              statesHost.appendChild(state);
+              stateElements.push(state);
+            });
+
+            var durationValue = parseFloat(root.dataset.duration || "6");
+            var duration = Number.isFinite(durationValue) ? Math.max(0.001, durationValue) : 6;
+
+            // Caption count owns the threshold grid. Longer durations add only
+            // to each phase's HOLD, never by scaling the completed timeline.
+            var phaseDuration = duration / captions.length;
+            var RISE_BASE = 0.38;
+            var EXIT_DELAY_BASE = 0.28;
+            var EXIT_BASE = 0.32;
+            var MOTION_BASE = RISE_BASE + EXIT_DELAY_BASE + EXIT_BASE;
+            var motionScale = phaseDuration < MOTION_BASE ? phaseDuration / MOTION_BASE : 1;
+            var RISE = RISE_BASE * motionScale;
+            var EXIT_DELAY = EXIT_DELAY_BASE * motionScale;
+            var EXIT = EXIT_BASE * motionScale;
+            var HOLD = Math.max(0, phaseDuration - RISE - EXIT_DELAY - EXIT);
+            var SWAP = Math.min(0.28 * motionScale, phaseDuration * 0.4);
+
+            captionElements.forEach(function (caption, index) {
+              gsap.set(caption, { opacity: 0, x: "-1.2cqw", y: "3.6cqh" });
+              gsap.set(stateElements[index], { opacity: index === 0 ? 1 : 0, "--sms-live": 0.64 });
+            });
+
+            var tl = gsap.timeline({ paused: true });
+
+            captionElements.forEach(function (caption, index) {
+              var phaseStart = index * phaseDuration;
+              var riseArc = RISE * 0.72;
+              var exitStart = phaseStart + RISE + HOLD + EXIT_DELAY;
+              var exitArc = EXIT * 0.32;
+
+              // IN: two authored segments form a shallow arrival arc.
+              tl.fromTo(
+                caption,
+                { opacity: 0, x: "-1.2cqw", y: "3.6cqh" },
+                {
+                  opacity: 1,
+                  x: "0.45cqw",
+                  y: "-0.28cqh",
+                  duration: riseArc,
+                  ease: "power2.out",
+                },
+                phaseStart,
+              );
+              tl.to(
+                caption,
+                {
+                  x: "0cqw",
+                  y: "0cqh",
+                  duration: RISE - riseArc,
+                  ease: "power2.out",
+                },
+                phaseStart + riseArc,
+              );
+
+              if (index > 0) {
+                tl.to(
+                  stateElements[index - 1],
+                  { opacity: 0, duration: SWAP, ease: "power2.in" },
+                  phaseStart,
+                );
+                tl.fromTo(
+                  stateElements[index],
+                  { opacity: 0 },
+                  { opacity: 1, duration: SWAP, ease: "power2.out" },
+                  phaseStart,
+                );
+              }
+
+              // HOLD: the mock content breathes without moving the pinned panel.
+              if (HOLD >= 0.4) {
+                tl.to(
+                  stateElements[index],
+                  {
+                    "--sms-live": 0.9,
+                    duration: HOLD / 2,
+                    ease: "sine.inOut",
+                    yoyo: true,
+                    repeat: 1,
+                  },
+                  phaseStart + RISE,
+                );
+              }
+
+              // OUT: EXIT_DELAY is empty stillness, then two segments arc upward.
+              tl.to(
+                caption,
+                {
+                  x: "0.42cqw",
+                  y: "-0.9cqh",
+                  duration: exitArc,
+                  ease: "power2.in",
+                },
+                exitStart,
+              );
+              tl.to(
+                caption,
+                {
+                  opacity: 0,
+                  x: "-1.1cqw",
+                  y: "-4.5cqh",
+                  duration: EXIT - exitArc,
+                  ease: "power2.in",
+                },
+                exitStart + exitArc,
+              );
+            });
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["sticky-mock-swap"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add sticky-mock-swap" />
+
+That writes one file: `compositions/components/sticky-mock-swap.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/sticky-mock-swap.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `product-demo` `sticky` `mock` `crossfade` `feature-tour`.
+
+## 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/components/stitched-text-draw.mdx b/docs/catalog/components/stitched-text-draw.mdx
new file mode 100644
index 0000000000..5a01119003
--- /dev/null
+++ b/docs/catalog/components/stitched-text-draw.mdx
@@ -0,0 +1,907 @@
+---
+title: "Stitched Text Draw"
+description: "Text drawn as thread stitches: a single-stroke display alphabet draws via attribute-driven dashoffset with stitch-tuned dash patterns, seeded angle jitter, needle-hole dots, a leading needle, and a thread-tail overshoot per letter."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/stitched-text-draw.html"
+  compositionId="stitched-text-draw"
+  compositionSrc="compositions/components/stitched-text-draw.html"
+  variables={[{"id":"text","type":"string","role":"content","label":"Text","description":"Uppercased A-Z 0-9 and space, clamped to 12 characters.","default":"STITCH"},{"id":"stitch","type":"enum","role":"style","label":"Stitch","description":"Dash/gap scale, thread width, and jitter amplitude.","default":"fine","options":[{"value":"fine","label":"Fine"},{"value":"coarse","label":"Coarse"}]},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Thread color: green rides --brand, blue rides --accent, violet rides --accent-2.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Optional departure. Default none: the stitched word holds until the frame cuts.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
+>
+
+```html stitched-text-draw.html
+<!doctype html>
+<!--
+  stitched-text-draw: HyperFrames video primitive (type / craft, Wave M
+  experiment M6)
+
+  Text drawn as thread stitches. Letters come from a single-stroke display
+  alphabet (A-Z 0-9) authored as a compact stroke table of lines and
+  elliptical arcs per glyph, flattened to polylines at mount, resampled to
+  stitch-scale steps, and displaced by seeded perpendicular jitter so every
+  stitch sits at a slightly different angle (hand-sewn wobble). Each stroke
+  draws thread-first: a needle dot leads the reveal front, needle-hole dots
+  appear at every stitch boundary behind it, and each letter finishes with
+  a tiny thread-tail overshoot (the thread sticks out past the stroke end
+  along its exit tangent, then is pulled snug).
+
+  Draw mechanic (gotcha 8, and gotcha "nested SVG mask doesn't repaint
+  under seek"): the reveal is ATTRIBUTE-driven stroke-dashoffset on the
+  stitched path itself, using the double-dash trick instead of an SVG mask.
+  Each path's dasharray is its stitch pattern (dash, gap, dash, ...) built
+  to sum EXACTLY to the path length L, followed by one closing gap of L
+  (total 2L). Animating the stroke-dashoffset attribute from L to 0 sweeps
+  the reveal front from start to end while the visible dashes settle into
+  their final stitch positions at offset 0. No <mask>, no <clipPath>, no
+  CSS dashoffset property (Chrome under-invalidates it on reverse seeks);
+  the painter primes and updates the attribute via setAttribute.
+
+  Variables (declared in data-composition-variables below):
+    - text (string, default "STITCH"): uppercased; A-Z 0-9 and space,
+      other characters render as spaces; clamped to 12 characters.
+    - stitch ("fine" | "coarse", default "fine"): dash/gap scale, thread
+      width, and jitter amplitude.
+    - accent ("green" | "blue" | "violet", default "green"): thread color;
+      green rides --brand, blue rides --accent, violet rides --accent-2.
+    - exit ("none" | "fade" | "up", default "none").
+
+  Envelope, fixed IN and OUT with elastic HOLD only (never timeScale):
+    IN_BASE  = 0.15 lead + 2.9 draw + 0.15 margin
+    HOLD     = max(0, D - IN - OUT), truly still
+    OUT_BASE = 0.45s only when exit != none
+    If D < IN_BASE + OUT_BASE the whole envelope compresses together.
+    Letters draw strictly in sequence; each letter's share of the draw
+    window is proportional to its total stroke length, with a fixed
+    needle-jump pause between letters.
+
+  Determinism and seek-safety: all geometry, jitter (fixed LCG seed
+  0x57174c3d), stitch patterns, hole positions, and the per-stroke draw
+  schedule are computed once at mount. One inert anchor tween spans [0, D];
+  a painter recomputes every stroke's dashoffset, every hole's visibility,
+  and the needle/tail pose as pure functions of tl.time() on each update
+  (zero per-element tweens, gotcha 9). Writes are idempotent; eventful
+  seeks (suppressEvents=false) land identical frames in any order and
+  either direction.
+
+  Mount contract: the runtime clones only this template. #root fills the
+  host box (no data-width/data-height, container-type: size, cqmin units),
+  is styled via #root only, and registers one paused timeline under the
+  LITERAL "stitched-text-draw" key. getTotalLength drives all dash math
+  (never the pathLength attribute, never non-scaling-stroke on dashed
+  paths).
+-->
+<html
+  lang="en"
+  data-composition-id="stitched-text-draw"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "text", "type": "string", "role": "content", "label": "Text", "description": "Uppercased A-Z 0-9 and space, clamped to 12 characters.", "default": "STITCH" },
+    { "id": "stitch", "type": "enum", "role": "style", "label": "Stitch", "description": "Dash/gap scale, thread width, and jitter amplitude.", "default": "fine", "options": [{ "value": "fine", "label": "Fine" }, { "value": "coarse", "label": "Coarse" }] },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Thread color: green rides --brand, blue rides --accent, violet rides --accent-2.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the stitched word holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Stitched Text Draw</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="stitched-text-draw" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .std-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .std-stage {
+            display: grid;
+            place-items: center;
+            will-change: transform, opacity;
+          }
+
+          .std-svg {
+            display: block;
+            width: 92cqw;
+            height: 56cqh;
+          }
+        </style>
+
+        <div
+          id="stitched-text-draw-clip"
+          class="std-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="std-stage" role="img">
+            <svg
+              class="std-svg"
+              xmlns="http://www.w3.org/2000/svg"
+              preserveAspectRatio="xMidYMid meet"
+              aria-hidden="true"
+            ></svg>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var SVG_NS = "http://www.w3.org/2000/svg";
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".std-stage");
+            var svg = root.querySelector(".std-svg");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var text = (vars.text == null || vars.text === "" ? "STITCH" : String(vars.text))
+              .toUpperCase()
+              .slice(0, 12);
+            var stitch = vars.stitch === "coarse" ? "coarse" : "fine";
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #52525b)",
+              blue: "var(--accent, #52525b)",
+              violet: "var(--accent-2, #52525b)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            root.style.setProperty("--std-accent", accentColors[accent]);
+            stage.setAttribute("aria-label", text);
+
+            // Stitch registers: dash/gap in glyph units (glyph box 70x100).
+            var registers = {
+              fine: { dash: 6.5, gap: 4.5, width: 2.6, jitter: 1.5 },
+              coarse: { dash: 10, gap: 7, width: 4.2, jitter: 2.3 },
+            };
+            var reg = registers[stitch];
+
+            // ---- Single-stroke display alphabet -------------------------
+            // Glyph box: width 70 (space 40), cap height 100, y down.
+            // Each glyph is an array of strokes; a stroke is an array of
+            // [x, y] points (lines) built from line points and flattened
+            // elliptical arcs. Curves only need enough samples to read as
+            // curved once resampled and jittered.
+            function arcPts(cx, cy, rx, ry, a0, a1) {
+              var steps = Math.max(6, Math.ceil(Math.abs(a1 - a0) / 18));
+              var pts = [];
+              for (var i = 0; i <= steps; i += 1) {
+                var a = ((a0 + ((a1 - a0) * i) / steps) * Math.PI) / 180;
+                pts.push([cx + rx * Math.cos(a), cy + ry * Math.sin(a)]);
+              }
+              return pts;
+            }
+            function join() {
+              var out = [];
+              for (var i = 0; i < arguments.length; i += 1) {
+                out = out.concat(arguments[i]);
+              }
+              return out;
+            }
+
+            var GLYPHS = {
+              A: [
+                [
+                  [4, 100],
+                  [35, 2],
+                  [66, 100],
+                ],
+                [
+                  [15, 64],
+                  [55, 64],
+                ],
+              ],
+              B: [
+                [
+                  [6, 2],
+                  [6, 98],
+                ],
+                join([[6, 2]], arcPts(36, 26, 24, 24, -90, 90), [[6, 50]]),
+                join([[6, 50]], arcPts(38, 74, 26, 24, -90, 90), [[6, 98]]),
+              ],
+              C: [arcPts(38, 50, 30, 46, -60, -300)],
+              D: [
+                join(
+                  [
+                    [6, 2],
+                    [24, 2],
+                  ],
+                  arcPts(24, 50, 40, 48, -90, 90),
+                  [
+                    [24, 98],
+                    [6, 98],
+                    [6, 4],
+                  ],
+                ),
+              ],
+              E: [
+                [
+                  [60, 2],
+                  [8, 2],
+                  [8, 98],
+                  [60, 98],
+                ],
+                [
+                  [8, 50],
+                  [48, 50],
+                ],
+              ],
+              F: [
+                [
+                  [60, 2],
+                  [8, 2],
+                  [8, 98],
+                ],
+                [
+                  [8, 50],
+                  [46, 50],
+                ],
+              ],
+              G: [
+                join(arcPts(38, 50, 30, 46, -60, -305), [
+                  [56, 62],
+                  [38, 62],
+                ]),
+              ],
+              H: [
+                [
+                  [8, 2],
+                  [8, 98],
+                ],
+                [
+                  [62, 2],
+                  [62, 98],
+                ],
+                [
+                  [8, 50],
+                  [62, 50],
+                ],
+              ],
+              I: [
+                [
+                  [35, 2],
+                  [35, 98],
+                ],
+                [
+                  [20, 2],
+                  [50, 2],
+                ],
+                [
+                  [20, 98],
+                  [50, 98],
+                ],
+              ],
+              J: [
+                join(
+                  [
+                    [58, 2],
+                    [58, 72],
+                  ],
+                  arcPts(33, 72, 25, 26, 0, 180),
+                ),
+              ],
+              K: [
+                [
+                  [8, 2],
+                  [8, 98],
+                ],
+                [
+                  [60, 2],
+                  [8, 56],
+                ],
+                [
+                  [24, 42],
+                  [62, 98],
+                ],
+              ],
+              L: [
+                [
+                  [8, 2],
+                  [8, 98],
+                  [60, 98],
+                ],
+              ],
+              M: [
+                [
+                  [6, 98],
+                  [6, 2],
+                  [35, 58],
+                  [64, 2],
+                  [64, 98],
+                ],
+              ],
+              N: [
+                [
+                  [8, 98],
+                  [8, 2],
+                  [62, 98],
+                  [62, 2],
+                ],
+              ],
+              O: [arcPts(35, 50, 30, 47, -90, 270)],
+              P: [
+                [
+                  [8, 98],
+                  [8, 2],
+                ],
+                join(
+                  [
+                    [8, 2],
+                    [36, 2],
+                  ],
+                  arcPts(36, 27, 26, 25, -90, 90),
+                  [
+                    [36, 52],
+                    [8, 52],
+                  ],
+                ),
+              ],
+              Q: [
+                arcPts(35, 50, 30, 47, -90, 270),
+                [
+                  [46, 70],
+                  [66, 96],
+                ],
+              ],
+              R: [
+                [
+                  [8, 98],
+                  [8, 2],
+                ],
+                join(
+                  [
+                    [8, 2],
+                    [36, 2],
+                  ],
+                  arcPts(36, 27, 26, 25, -90, 90),
+                  [
+                    [36, 52],
+                    [8, 52],
+                  ],
+                ),
+                [
+                  [30, 52],
+                  [64, 98],
+                ],
+              ],
+              S: [
+                [
+                  [58, 14],
+                  [44, 3],
+                  [24, 3],
+                  [10, 14],
+                  [10, 30],
+                  [24, 42],
+                  [46, 56],
+                  [58, 68],
+                  [58, 86],
+                  [44, 97],
+                  [22, 97],
+                  [8, 86],
+                ],
+              ],
+              T: [
+                [
+                  [6, 2],
+                  [64, 2],
+                ],
+                [
+                  [35, 2],
+                  [35, 98],
+                ],
+              ],
+              U: [
+                join(
+                  [
+                    [8, 2],
+                    [8, 68],
+                  ],
+                  arcPts(35, 68, 27, 29, 180, 360),
+                  [
+                    [62, 68],
+                    [62, 2],
+                  ],
+                ),
+              ],
+              V: [
+                [
+                  [6, 2],
+                  [35, 98],
+                  [64, 2],
+                ],
+              ],
+              W: [
+                [
+                  [4, 2],
+                  [19, 98],
+                  [35, 34],
+                  [51, 98],
+                  [66, 2],
+                ],
+              ],
+              X: [
+                [
+                  [8, 2],
+                  [62, 98],
+                ],
+                [
+                  [62, 2],
+                  [8, 98],
+                ],
+              ],
+              Y: [
+                [
+                  [6, 2],
+                  [35, 50],
+                ],
+                [
+                  [64, 2],
+                  [35, 50],
+                  [35, 98],
+                ],
+              ],
+              Z: [
+                [
+                  [8, 2],
+                  [62, 2],
+                  [8, 98],
+                  [62, 98],
+                ],
+              ],
+              0: [arcPts(35, 50, 27, 47, -90, 270)],
+              1: [
+                [
+                  [20, 20],
+                  [38, 4],
+                  [38, 98],
+                ],
+              ],
+              2: [
+                join(arcPts(35, 26, 26, 24, -160, 10), [
+                  [8, 98],
+                  [62, 98],
+                ]),
+              ],
+              3: [join(arcPts(34, 26, 24, 24, -150, 80), arcPts(36, 73, 26, 25, -100, 150))],
+              4: [
+                [
+                  [50, 2],
+                  [6, 66],
+                  [66, 66],
+                ],
+                [
+                  [50, 44],
+                  [50, 98],
+                ],
+              ],
+              5: [
+                [
+                  [58, 3],
+                  [14, 3],
+                  [11, 44],
+                  [34, 38],
+                  [55, 48],
+                  [59, 72],
+                  [46, 94],
+                  [20, 96],
+                  [8, 84],
+                ],
+              ],
+              6: [
+                join(
+                  [
+                    [52, 4],
+                    [28, 26],
+                    [13, 56],
+                  ],
+                  arcPts(35, 72, 24, 26, -180, 180),
+                ),
+              ],
+              7: [
+                [
+                  [8, 3],
+                  [62, 3],
+                  [30, 98],
+                ],
+              ],
+              8: [join(arcPts(35, 27, 21, 24, 90, 450), arcPts(35, 74, 26, 25, -90, 270))],
+              9: [
+                join(arcPts(37, 28, 25, 25, 0, 360), [
+                  [62, 28],
+                  [56, 64],
+                  [34, 98],
+                ]),
+              ],
+            };
+            var GLYPH_W = 70;
+            var SPACE_W = 40;
+            var GAP = 24;
+
+            // Fixed-seed LCG: the only randomness source, consumed in one
+            // deterministic order during this build phase.
+            var lcgState = 0x57174c3d;
+            function next() {
+              lcgState = (Math.imul(1664525, lcgState) + 1013904223) >>> 0;
+              return lcgState / 4294967296;
+            }
+
+            // Resample a polyline to even stitch-scale steps, then displace
+            // each point perpendicular to the local direction: seeded angle
+            // jitter, so every stitch lands at a slightly different angle.
+            function resampleJitter(points) {
+              var STEP = 5;
+              var flat = [points[0]];
+              for (var i = 1; i < points.length; i += 1) {
+                var ax = flat[flat.length - 1][0];
+                var ay = flat[flat.length - 1][1];
+                var bx = points[i][0];
+                var by = points[i][1];
+                var seg = Math.hypot(bx - ax, by - ay);
+                var n = Math.max(1, Math.round(seg / STEP));
+                for (var k = 1; k <= n; k += 1) {
+                  flat.push([ax + ((bx - ax) * k) / n, ay + ((by - ay) * k) / n]);
+                }
+              }
+              var out = [];
+              for (var p = 0; p < flat.length; p += 1) {
+                var prev = flat[Math.max(0, p - 1)];
+                var after = flat[Math.min(flat.length - 1, p + 1)];
+                var dx = after[0] - prev[0];
+                var dy = after[1] - prev[1];
+                var len = Math.hypot(dx, dy) || 1;
+                var edge = p === 0 || p === flat.length - 1 ? 0.5 : 1;
+                var off = (next() - 0.5) * 2 * reg.jitter * edge;
+                out.push([flat[p][0] + (-dy / len) * off, flat[p][1] + (dx / len) * off]);
+              }
+              return out;
+            }
+
+            // ---- Layout: bake letter x-offsets into the points so every
+            // path shares ONE flat coordinate space (the global needle can
+            // then read getPointAtLength coordinates directly). -----------
+            var characters = Array.from(text);
+            var letters = [];
+            var cursor = 0;
+            for (var ci = 0; ci < characters.length; ci += 1) {
+              var ch = characters[ci];
+              var glyph = GLYPHS[ch];
+              if (!glyph) {
+                cursor += SPACE_W + GAP;
+                continue;
+              }
+              var strokes = [];
+              for (var si = 0; si < glyph.length; si += 1) {
+                var jittered = resampleJitter(glyph[si]);
+                var shifted = [];
+                for (var pi = 0; pi < jittered.length; pi += 1) {
+                  shifted.push([jittered[pi][0] + cursor, jittered[pi][1]]);
+                }
+                strokes.push({ points: shifted });
+              }
+              letters.push({ strokes: strokes });
+              cursor += GLYPH_W + GAP;
+            }
+            var totalWidth = Math.max(GLYPH_W, cursor - GAP);
+            var PAD = 14;
+            svg.setAttribute(
+              "viewBox",
+              -PAD + " " + -PAD + " " + (totalWidth + 2 * PAD) + " " + (100 + 2 * PAD),
+            );
+
+            // ---- Build DOM + per-stroke dash/hole tables ----------------
+            function el(name) {
+              return document.createElementNS(SVG_NS, name);
+            }
+            var holeFill = "color-mix(in srgb, var(--fg, #f8fafc) 34%, transparent)";
+            var totalLength = 0;
+            for (var li = 0; li < letters.length; li += 1) {
+              var letter = letters[li];
+              for (var sj = 0; sj < letter.strokes.length; sj += 1) {
+                var stroke = letter.strokes[sj];
+                var d =
+                  "M " +
+                  stroke.points
+                    .map(function (pt) {
+                      return pt[0].toFixed(2) + " " + pt[1].toFixed(2);
+                    })
+                    .join(" L ");
+                var path = el("path");
+                path.setAttribute("d", d);
+                path.setAttribute("fill", "none");
+                path.setAttribute("stroke", "var(--std-accent)");
+                path.setAttribute("stroke-width", String(reg.width));
+                path.setAttribute("stroke-linecap", "round");
+                svg.appendChild(path);
+
+                var L = path.getTotalLength();
+                stroke.el = path;
+                stroke.length = L;
+                totalLength += L;
+
+                // Double-dash reveal pattern: alternating dash/gap summing
+                // EXACTLY to L (ending on a dash element so the appended L
+                // sits at an odd index and reads as one closing gap).
+                var pattern = [];
+                var sum = 0;
+                while (sum + reg.dash + reg.gap < L) {
+                  pattern.push(reg.dash, reg.gap);
+                  sum += reg.dash + reg.gap;
+                }
+                pattern.push(Math.max(0.5, L - sum));
+                pattern.push(L);
+                stroke.dasharray = pattern
+                  .map(function (v) {
+                    return v.toFixed(3);
+                  })
+                  .join(" ");
+                path.setAttribute("stroke-dasharray", stroke.dasharray);
+                path.setAttribute("stroke-dashoffset", L.toFixed(3));
+
+                // Needle holes: one dot at each stitch boundary (dash start
+                // and dash end), revealed as the front passes.
+                stroke.holes = [];
+                var period = reg.dash + reg.gap;
+                for (var s = 0; s <= L; s += period) {
+                  var boundaries = [s, Math.min(L, s + reg.dash)];
+                  for (var b = 0; b < boundaries.length; b += 1) {
+                    var pt = path.getPointAtLength(boundaries[b]);
+                    var hole = el("circle");
+                    hole.setAttribute("cx", pt.x.toFixed(2));
+                    hole.setAttribute("cy", pt.y.toFixed(2));
+                    hole.setAttribute("r", (reg.width * 0.42).toFixed(2));
+                    hole.setAttribute("fill", holeFill);
+                    hole.setAttribute("opacity", "0");
+                    svg.appendChild(hole);
+                    stroke.holes.push({ el: hole, at: boundaries[b] });
+                  }
+                }
+
+                // End pose for the thread-tail overshoot.
+                var endPt = path.getPointAtLength(L);
+                var backPt = path.getPointAtLength(Math.max(0, L - 2));
+                var tx = endPt.x - backPt.x;
+                var ty = endPt.y - backPt.y;
+                var tLen = Math.hypot(tx, ty) || 1;
+                stroke.end = [endPt.x, endPt.y];
+                stroke.tangent = [tx / tLen, ty / tLen];
+              }
+            }
+
+            // Global needle dot + thread tail (letters draw strictly in
+            // sequence, so one needle serves the whole word).
+            var tail = el("line");
+            tail.setAttribute("stroke", "var(--std-accent)");
+            tail.setAttribute("stroke-width", (reg.width * 0.8).toFixed(2));
+            tail.setAttribute("stroke-linecap", "round");
+            tail.setAttribute("opacity", "0");
+            svg.appendChild(tail);
+            var needle = el("circle");
+            needle.setAttribute("r", (reg.width * 1.15).toFixed(2));
+            needle.setAttribute("fill", "var(--fg, #f8fafc)");
+            needle.setAttribute("stroke", "color-mix(in srgb, var(--std-accent) 60%, transparent)");
+            needle.setAttribute("stroke-width", (reg.width * 0.45).toFixed(2));
+            needle.setAttribute("opacity", "0");
+            svg.appendChild(needle);
+
+            // Envelope: fixed IN/OUT, elastic HOLD, never time-scaled.
+            var LEAD = 0.15;
+            var DRAW_BASE = 2.9;
+            var MARGIN = 0.15;
+            var PAUSE_BASE = 0.05;
+            var IN_BASE = LEAD + DRAW_BASE + MARGIN;
+            var OUT_BASE = exit === "none" ? 0 : 0.45;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var totalBase = Math.max(0.001, IN_BASE + OUT_BASE);
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var lead = LEAD * scale;
+            var DRAW = DRAW_BASE * scale;
+            var pause = PAUSE_BASE * scale;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var OUT_START = IN + HOLD;
+
+            // Schedule: letters sequential, each letter's window sized by
+            // its share of the total stitch length; strokes sequential
+            // within the letter by the same rule.
+            var pauses = Math.max(0, letters.length - 1) * pause;
+            var drawable = Math.max(0.05, DRAW - pauses);
+            var clock = lead;
+            for (var lj = 0; lj < letters.length; lj += 1) {
+              var lt = letters[lj];
+              var letterLen = 0;
+              for (var sk = 0; sk < lt.strokes.length; sk += 1) {
+                letterLen += lt.strokes[sk].length;
+              }
+              var letterTime = totalLength > 0 ? (drawable * letterLen) / totalLength : 0;
+              for (var sm = 0; sm < lt.strokes.length; sm += 1) {
+                var st = lt.strokes[sm];
+                var strokeTime = letterLen > 0 ? (letterTime * st.length) / letterLen : 0;
+                st.t0 = clock;
+                st.t1 = clock + Math.max(0.01, strokeTime);
+                clock = st.t1;
+              }
+              lt.t0 = lt.strokes[0].t0;
+              lt.t1 = clock;
+              clock += pause;
+            }
+
+            function clamp01(v) {
+              return v < 0 ? 0 : v > 1 ? 1 : v;
+            }
+            // backOut: overshoots ~10% past 1, then settles to exactly 1.
+            // The overshoot region drives the thread-tail.
+            function backOut(u) {
+              var c1 = 1.70158;
+              var c3 = c1 + 1;
+              var x = u - 1;
+              return 1 + c3 * x * x * x + c1 * x * x;
+            }
+            var TAIL_MAX = 16;
+
+            // Pure per-update painter (zero per-element tweens): dashoffset
+            // ATTRIBUTE, hole visibility, and the needle/tail pose are all
+            // functions of tl.time() alone. Idempotent writes.
+            function applyTime(timeSeconds) {
+              var needleOn = false;
+              var needleX = 0;
+              var needleY = 0;
+              var tailFrom = null;
+              var tailTo = null;
+              for (var i = 0; i < letters.length; i += 1) {
+                var letter = letters[i];
+                for (var j = 0; j < letter.strokes.length; j += 1) {
+                  var stroke = letter.strokes[j];
+                  var span = stroke.t1 - stroke.t0;
+                  var u = clamp01(span > 0 ? (timeSeconds - stroke.t0) / span : 1);
+                  var L = stroke.length;
+                  var visible;
+                  // Round linecaps paint a zero-length-dash dot at the exact
+                  // boundary sitting at the path start when dashoffset = L,
+                  // so undrawn strokes are also opacity-gated.
+                  stroke.el.setAttribute("opacity", u <= 0 ? "0" : "1");
+                  if (u <= 0) {
+                    stroke.el.setAttribute("stroke-dashoffset", L.toFixed(3));
+                    visible = 0;
+                  } else if (u >= 1) {
+                    stroke.el.setAttribute("stroke-dashoffset", "0");
+                    visible = L;
+                  } else {
+                    var p = backOut(u);
+                    var front = clamp01(p) * L;
+                    stroke.el.setAttribute("stroke-dashoffset", (L - front).toFixed(3));
+                    visible = front;
+                    needleOn = true;
+                    if (p <= 1) {
+                      var pt = stroke.el.getPointAtLength(front);
+                      needleX = pt.x;
+                      needleY = pt.y;
+                    } else {
+                      // Thread-tail overshoot: the needle carries the
+                      // thread past the stroke end along its exit tangent,
+                      // then the settle pulls it snug.
+                      var over = Math.min((p - 1) * L, TAIL_MAX);
+                      needleX = stroke.end[0] + stroke.tangent[0] * over;
+                      needleY = stroke.end[1] + stroke.tangent[1] * over;
+                      tailFrom = stroke.end;
+                      tailTo = [needleX, needleY];
+                    }
+                  }
+                  for (var h = 0; h < stroke.holes.length; h += 1) {
+                    stroke.holes[h].el.setAttribute(
+                      "opacity",
+                      stroke.holes[h].at <= visible && u > 0 ? "1" : "0",
+                    );
+                  }
+                }
+              }
+              if (needleOn) {
+                needle.setAttribute("opacity", "1");
+                needle.setAttribute("cx", needleX.toFixed(2));
+                needle.setAttribute("cy", needleY.toFixed(2));
+              } else {
+                needle.setAttribute("opacity", "0");
+              }
+              if (tailFrom) {
+                tail.setAttribute("opacity", "0.9");
+                tail.setAttribute("x1", tailFrom[0].toFixed(2));
+                tail.setAttribute("y1", tailFrom[1].toFixed(2));
+                tail.setAttribute("x2", tailTo[0].toFixed(2));
+                tail.setAttribute("y2", tailTo[1].toFixed(2));
+              } else {
+                tail.setAttribute("opacity", "0");
+              }
+            }
+
+            gsap.set(stage, { opacity: 1, y: "0cqh" });
+
+            var tl = gsap.timeline({
+              paused: true,
+              onUpdate: function () {
+                applyTime(tl.time());
+              },
+            });
+
+            // Anchor tween: an inert plain-object tween spanning [0, D] so
+            // onUpdate fires for every eventful seek and holds never clamp.
+            tl.to({ p: 0 }, { p: 1, duration: duration, ease: "none" }, 0);
+
+            // HOLD: truly still; repeated repaints write identical values.
+
+            // OUT: optional departure; exit none holds until the frame cuts.
+            if (exit === "up") {
+              tl.to(stage, { y: "-4cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "fade") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            }
+
+            tl.seek(0);
+            applyTime(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["stitched-text-draw"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add stitched-text-draw" />
+
+That writes one file: `compositions/components/stitched-text-draw.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/stitched-text-draw.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `experiment` `type` `craft` `stitch` `deterministic`.
+
+## 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/components/stop-motion-cadence.mdx b/docs/catalog/components/stop-motion-cadence.mdx
new file mode 100644
index 0000000000..8e47c4c87d
--- /dev/null
+++ b/docs/catalog/components/stop-motion-cadence.mdx
@@ -0,0 +1,509 @@
+---
+title: "Stop Motion Cadence"
+description: "The stepped-time law as a demo primitive: one driver quantizes timeline time to floor(t * fps) / fps and feeds ALL motion; four token paper-cut shapes throw-and-land with squash on hits, 2-frame boil jitter seeded per step, and sparkle accents living exactly 2 to 3 frames."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/stop-motion-cadence.html"
+  compositionId="stop-motion-cadence"
+  compositionSrc="compositions/components/stop-motion-cadence.html"
+  variables={[{"id":"fps","type":"enum","role":"timing","label":"Cadence","description":"Stepped-time cadence in frames per second.","default":"10","options":[{"value":"8","label":"8 fps"},{"value":"10","label":"10 fps"},{"value":"12","label":"12 fps"}]},{"id":"boil","type":"enum","role":"style","label":"Boil","description":"2-frame edge jitter, seeded per step. Off holds dead still.","default":"on","options":[{"value":"on","label":"On"},{"value":"off","label":"Off"}]},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Lead shape color: green rides --brand, blue rides --accent, violet rides --accent-2.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Optional departure. Default none: the settled collage holds until the frame cuts.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
+>
+
+```html stop-motion-cadence.html
+<!doctype html>
+<!--
+  stop-motion-cadence: HyperFrames video primitive (time law, Wave M10 experiment)
+
+  The stepped-time law as a demo primitive. ONE driver: every frame the
+  timeline time is quantized FIRST,
+
+      ts = floor(t * fps) / fps
+
+  and ts feeds ALL motion. Four token paper-cut shapes throw-and-land in
+  sequence at the quantized cadence, each squashing on its landing hit
+  (transform-origin at the ground contact) and recovering over the next
+  steps. A 2-frame boil rides every shape's edges: jitter offsets are
+  hashed from the boil frame index floor(step / 2), so they are stable
+  within a 2-frame window and pure functions of time. Sparkle accents
+  live EXACTLY 2 or 3 steps on each landing hit, frame-alternating big /
+  small-rotated like a drawn twinkle (per the MotionMarkus sheets).
+
+  Because every hit is defined by an integer step index derived from the
+  quantized driver, seeks land identical frames in any order: forward,
+  reverse, or shuffled evaluation of the same t produces the same step,
+  the same boil seed, the same sparkle state.
+
+  Variables (declared in data-composition-variables below):
+    - fps ("8" | "10" | "12", default "10"): the step cadence.
+    - boil ("on" | "off", default "on"): the 2-frame edge jitter. Off
+      gives a dead-still settle.
+    - accent ("green" | "blue" | "violet", default "green"): the lead
+      shape's color; green rides --brand, blue rides --accent, violet
+      rides --accent-2 (the other shapes step down in value, not hue).
+    - exit ("none" | "fade" | "up", default "none").
+
+  Envelope, fixed IN and OUT with elastic HOLD only (never timeScale):
+    IN_BASE  = 3.0s (all four shapes landed and recovered)
+    HOLD     = max(0, D - IN - OUT); the boil keeps breathing through the
+               hold (that is the register), boil off holds dead still
+    OUT_BASE = 0.45s only when exit != none
+    If D < IN_BASE + OUT_BASE the choreography compresses together; the
+    fps grid itself never scales (the law quantizes absolute time).
+
+  Determinism: no Math.random, no wall clock, no incremental state; the
+  jitter hash is sin-fold on integer indices. Stage size is measured once
+  at mount; per-update writes are transforms and opacity only, all
+  recomputed from tl.time().
+
+  Mount contract: template-wrapped; #root fills the host box (no
+  data-width/height, container-type: size, cqmin units), styled via
+  #root only; one paused timeline under the LITERAL
+  "stop-motion-cadence" key.
+-->
+<html
+  lang="en"
+  data-composition-id="stop-motion-cadence"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "fps", "type": "enum", "role": "timing", "label": "Cadence", "description": "Stepped-time cadence in frames per second.", "default": "10", "options": [{ "value": "8", "label": "8 fps" }, { "value": "10", "label": "10 fps" }, { "value": "12", "label": "12 fps" }] },
+    { "id": "boil", "type": "enum", "role": "style", "label": "Boil", "description": "2-frame edge jitter, seeded per step. Off holds dead still.", "default": "on", "options": [{ "value": "on", "label": "On" }, { "value": "off", "label": "Off" }] },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Lead shape color: green rides --brand, blue rides --accent, violet rides --accent-2.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the settled collage holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Stop Motion Cadence</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="stop-motion-cadence" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, "Inter", system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .smc-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .smc-stage {
+            position: absolute;
+            inset: 0;
+          }
+
+          /* Paper-cut floor: a hairline plus a soft paper band. */
+          .smc-floor {
+            position: absolute;
+            left: 14cqw;
+            right: 14cqw;
+            top: 72cqh;
+            height: 0.35cqmin;
+            border-radius: 0.2cqmin;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 22%, transparent);
+          }
+
+          .smc-shape {
+            position: absolute;
+            left: 0;
+            top: 0;
+            opacity: 0;
+            filter: drop-shadow(
+              0.5cqmin 0.7cqmin 0 color-mix(in srgb, var(--bg, #000000) 35%, transparent)
+            );
+          }
+
+          .smc-shadow {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 12cqmin;
+            height: 2cqmin;
+            border-radius: 50%;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 14%, transparent);
+            opacity: 0;
+          }
+
+          .smc-circle {
+            width: 13cqmin;
+            height: 13cqmin;
+            border-radius: 50%;
+            background: var(--smc-c1);
+          }
+
+          .smc-square {
+            width: 15cqmin;
+            height: 15cqmin;
+            border-radius: 1.6cqmin;
+            background: var(--smc-c2);
+          }
+
+          .smc-tri {
+            width: 16cqmin;
+            height: 14cqmin;
+            clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
+            background: var(--smc-c3);
+          }
+
+          .smc-star {
+            width: 9cqmin;
+            height: 9cqmin;
+            clip-path: polygon(
+              50% 0%,
+              63% 34%,
+              98% 35%,
+              70% 57%,
+              81% 91%,
+              50% 70%,
+              19% 91%,
+              30% 57%,
+              2% 35%,
+              37% 34%
+            );
+            background: color-mix(in srgb, var(--fg, #f8fafc) 82%, var(--smc-c1));
+          }
+
+          .smc-sparkle {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 5.5cqmin;
+            height: 5.5cqmin;
+            clip-path: polygon(
+              50% 0%,
+              60% 40%,
+              100% 50%,
+              60% 60%,
+              50% 100%,
+              40% 60%,
+              0% 50%,
+              40% 40%
+            );
+            background: var(--fg, #f8fafc);
+            opacity: 0;
+          }
+        </style>
+
+        <div
+          id="stop-motion-cadence-clip"
+          class="smc-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="smc-stage">
+            <div class="smc-floor"></div>
+            <div class="smc-shadow" data-for="0"></div>
+            <div class="smc-shadow" data-for="1"></div>
+            <div class="smc-shadow" data-for="2"></div>
+            <div class="smc-shadow" data-for="3"></div>
+            <div class="smc-shape smc-circle"></div>
+            <div class="smc-shape smc-square"></div>
+            <div class="smc-shape smc-tri"></div>
+            <div class="smc-shape smc-star"></div>
+            <div class="smc-sparkle"></div>
+            <div class="smc-sparkle"></div>
+            <div class="smc-sparkle"></div>
+            <div class="smc-sparkle"></div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".smc-stage");
+            var shapes = root.querySelectorAll(".smc-shape");
+            var shadows = root.querySelectorAll(".smc-shadow");
+            var sparkles = root.querySelectorAll(".smc-sparkle");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var fps =
+              vars.fps === "8" || vars.fps === 8
+                ? 8
+                : vars.fps === "12" || vars.fps === 12
+                  ? 12
+                  : 10;
+            var boil = vars.boil !== "off";
+            var accentColors = {
+              green: "var(--brand, #52525b)",
+              blue: "var(--accent, #52525b)",
+              violet: "var(--accent-2, #52525b)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            // The lead shape is the one accented element; the other two paper
+            // cutouts separate by value step, not by a second and third hue.
+            root.style.setProperty("--smc-c1", accentColors[accent]);
+            root.style.setProperty(
+              "--smc-c2",
+              "color-mix(in srgb, var(--fg, #f8fafc) 72%, transparent)",
+            );
+            root.style.setProperty(
+              "--smc-c3",
+              "color-mix(in srgb, var(--fg, #f8fafc) 45%, transparent)",
+            );
+
+            // One-time stage measurement; all positions in px from here.
+            var W = Math.max(1, stage.clientWidth);
+            var H = Math.max(1, stage.clientHeight);
+            var M = Math.min(W, H);
+            var groundY = 0.72 * H;
+
+            // Envelope: fixed IN/OUT, elastic HOLD; fps grid never scales.
+            var IN_BASE = 3.0;
+            var OUT_BASE = exit === "none" ? 0 : 0.45;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var totalBase = Math.max(0.001, IN_BASE + OUT_BASE);
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var OUT = OUT_BASE * scale;
+            var HOLD = Math.max(0, duration - (IN_BASE * scale + OUT));
+            var OUT_START = IN_BASE * scale + HOLD;
+
+            // Choreography (seconds, scaled; converted to integer steps).
+            // Each shape: launch, land, from (offstage), to (on the floor),
+            // arc height, spin, squash amount, sparkle life in steps.
+            function shapeSize(el) {
+              return { w: el.offsetWidth, h: el.offsetHeight };
+            }
+            var throws = [
+              {
+                t0: 0.15,
+                t1: 1.0,
+                from: { x: -0.12 * W, yB: 0.28 * H },
+                to: 0.3 * W,
+                arc: 0.3 * H,
+                rot0: -170,
+                rot1: 8,
+                squash: 0.3,
+                life: 2,
+              },
+              {
+                t0: 0.6,
+                t1: 1.5,
+                from: { x: 1.12 * W, yB: 0.2 * H },
+                to: 0.56 * W,
+                arc: 0.34 * H,
+                rot0: 150,
+                rot1: -6,
+                squash: 0.34,
+                life: 3,
+              },
+              {
+                t0: 1.25,
+                t1: 2.0,
+                from: { x: 0.78 * W, yB: -0.12 * H },
+                to: 0.72 * W,
+                arc: 0.06 * H,
+                rot0: -120,
+                rot1: 5,
+                squash: 0.26,
+                life: 2,
+              },
+              {
+                t0: 1.8,
+                t1: 2.55,
+                from: { x: -0.08 * W, yB: 0.1 * H },
+                to: 0.43 * W,
+                arc: 0.4 * H,
+                rot0: 200,
+                rot1: -12,
+                squash: 0.22,
+                life: 3,
+              },
+            ];
+            for (var s = 0; s < throws.length; s += 1) {
+              var th = throws[s];
+              th.t0 *= scale;
+              th.t1 *= scale;
+              th.landStep = Math.round(th.t1 * fps);
+              th.size = shapeSize(shapes[s]);
+              gsap.set(shapes[s], { transformOrigin: "50% 100%" });
+            }
+
+            // Deterministic per-index hash (sin fold; no Math.random).
+            function rnd(n) {
+              var x = Math.sin(n * 127.1 + 311.7) * 43758.5453;
+              return x - Math.floor(x);
+            }
+            function clamp01(v) {
+              return v < 0 ? 0 : v > 1 ? 1 : v;
+            }
+            function lerp(a, b, p) {
+              return a + (b - a) * p;
+            }
+
+            // Squash schedule by steps-since-landing: hit, deep, rebound
+            // stretch, settle. Positive widens (scaleX 1+a, scaleY 1-a).
+            var SQUASH_ENV = [1, 0.55, -0.3, 0.1, 0];
+            function squashAt(stepsSince, amount) {
+              if (stepsSince < 0) return 0;
+              if (stepsSince >= SQUASH_ENV.length) return 0;
+              return SQUASH_ENV[stepsSince] * amount;
+            }
+
+            // THE LAW: quantize first, then evaluate everything from ts.
+            // The 1e-6 epsilon absorbs GSAP seek round-trip float error so
+            // a seek landing exactly on a step boundary quantizes the same
+            // way from either direction.
+            function applyTime(timeSeconds) {
+              var step = Math.floor(timeSeconds * fps + 1e-6);
+              var ts = step / fps;
+              var boilIdx = Math.floor(step / 2);
+
+              for (var i = 0; i < throws.length; i += 1) {
+                var th = throws[i];
+                var el = shapes[i];
+                var sw = th.size.w;
+                var sh = th.size.h;
+                var landed = step >= th.landStep;
+                var u = clamp01((ts - th.t0) / Math.max(0.001, th.t1 - th.t0));
+                if (landed) u = 1;
+                var visible = ts >= th.t0;
+
+                // Ballistic arc: linear x, parabolic lift over the line
+                // from launch height to the ground.
+                var xC = lerp(th.from.x, th.to, u);
+                var yB = lerp(th.from.yB, groundY, u) - th.arc * 4 * u * (1 - u);
+                var rot = lerp(th.rot0, th.rot1, 1 - (1 - u) * (1 - u));
+
+                // Squash on the hit, keyed to integer steps since landing.
+                var a = squashAt(step - th.landStep, th.squash);
+                var sxq = 1 + a;
+                var syq = 1 - a * 0.85;
+
+                // 2-frame boil, seeded per boil window, per shape.
+                var bx = 0;
+                var by = 0;
+                var br = 0;
+                if (boil && visible) {
+                  bx = (rnd(boilIdx * 13 + i * 101) - 0.5) * 0.008 * M;
+                  by = (rnd(boilIdx * 29 + i * 211) - 0.5) * 0.008 * M;
+                  br = (rnd(boilIdx * 47 + i * 331) - 0.5) * 1.6;
+                }
+
+                gsap.set(el, {
+                  x: xC - sw / 2 + bx,
+                  y: yB - sh + by,
+                  rotation: rot + br,
+                  scaleX: sxq,
+                  scaleY: syq,
+                  opacity: visible ? 1 : 0,
+                });
+
+                // Contact shadow: grows and darkens as the shape nears
+                // the floor, pinned to the landing spot.
+                var height = clamp01((groundY - yB) / (0.45 * H));
+                var shadowScale = lerp(1.05, 0.55, height);
+                gsap.set(shadows[i], {
+                  x: xC - 0.06 * M,
+                  y: groundY - 0.01 * M,
+                  scaleX: shadowScale * (landed ? sxq : 1),
+                  scaleY: shadowScale * 0.9,
+                  opacity: visible ? lerp(0.85, 0.25, height) : 0,
+                });
+
+                // Sparkle: alive for EXACTLY life steps from the hit,
+                // frame-alternating big / small rotated 45deg.
+                var d = step - th.landStep;
+                var sp = sparkles[i];
+                if (d >= 0 && d < th.life) {
+                  var side = i % 2 === 0 ? -1 : 1;
+                  gsap.set(sp, {
+                    x: xC + side * (sw * 0.62) - 0.0275 * M,
+                    y: groundY - sh * 0.9,
+                    scale: d % 2 === 0 ? 1 : 0.62,
+                    rotation: d % 2 === 0 ? 0 : 45,
+                    opacity: 1,
+                  });
+                } else {
+                  gsap.set(sp, { opacity: 0 });
+                }
+              }
+            }
+
+            gsap.set(stage, { opacity: 1, y: "0cqh" });
+
+            var tl = gsap.timeline({
+              paused: true,
+              onUpdate: function () {
+                applyTime(tl.time());
+              },
+            });
+
+            // Anchor tween: inert, spans [0, D] so onUpdate fires for
+            // every eventful seek and holds never clamp short.
+            tl.to({ p: 0 }, { p: 1, duration: duration, ease: "none" }, 0);
+
+            // OUT: optional departure; exit none holds until the cut.
+            if (exit === "up") {
+              tl.to(stage, { y: "-4cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "fade") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            }
+
+            tl.seek(0);
+            applyTime(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["stop-motion-cadence"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add stop-motion-cadence" />
+
+That writes one file: `compositions/components/stop-motion-cadence.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/stop-motion-cadence.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `time-law` `stop-motion` `stepped` `boil` `deterministic` `experiment`.
+
+## 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/components/store-badge-lockup.mdx b/docs/catalog/components/store-badge-lockup.mdx
new file mode 100644
index 0000000000..da84bf6294
--- /dev/null
+++ b/docs/catalog/components/store-badge-lockup.mdx
@@ -0,0 +1,347 @@
+---
+title: "Store Badge Lockup"
+description: "Settles a short headline above equal-size App Store and Google Play badges as a token-driven mobile end-card call to action."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/store-badge-lockup.html"
+  compositionId="store-badge-lockup"
+  compositionSrc="compositions/components/store-badge-lockup.html"
+  variables={[{"id":"headline","type":"string","role":"content","label":"Headline","description":"Short action line shown above the store badges.","default":"Get the app"},{"id":"showApple","type":"enum","role":"content","label":"Show App Store","description":"Show or hide the App Store badge.","default":"yes","options":[{"value":"yes","label":"Yes"},{"value":"no","label":"No"}]},{"id":"showGoogle","type":"enum","role":"content","label":"Show Google Play","description":"Show or hide the Google Play badge.","default":"yes","options":[{"value":"yes","label":"Yes"},{"value":"no","label":"No"}]}]}
+>
+
+```html store-badge-lockup.html
+<!doctype html>
+<!--
+  store-badge-lockup: HyperFrames video primitive (ui-props / holdable / ask)
+
+  Concept: a short headline settles first, followed by equal-size App Store
+  and Google Play download badges that rise and fade into a standard mobile
+  end-card lockup. The badges use generic CSS glyphs and token paint only.
+
+  Compiled-from evidence: GAP B1 mobile close. The B1 consumer simulation
+  needed a mobile-native close, while the coverage audit found no registry
+  item that presents and animates the two store badges as one download CTA.
+
+  Use when: an app launch or mobile product film needs to end with store
+  destinations instead of a web URL.
+
+  Variables:
+    - headline (string, default "Get the app"): end-card action line.
+    - showApple (yes | no, default yes): include the App Store badge.
+    - showGoogle (yes | no, default yes): include the Google Play badge.
+
+  Envelope (holdable):
+    IN   1.20s fixed headline-first settle and staggered badge entrance.
+    HOLD elastic and deliberately still so the CTA remains readable.
+    OUT  0.45s fixed release fade.
+    If D is shorter than 1.65s, IN and OUT scale together. HOLD is the only
+    elastic phase, and the timeline is never time-scaled.
+
+  Sync point:
+    - lockup-settled at 1.00s into IN. This fixed offset compresses only for
+      short durations and never enters HOLD.
+
+  Sound cues: none. The lockup has no discrete impact event.
+
+  Mount contract: this file is a template-wrapped sub-composition. The host
+  owns dimensions. #root fills the host box with inset:0 and container-type:
+  size, carries no data-width or data-height, and registers one paused GSAP
+  timeline under the hardcoded id "store-badge-lockup".
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "headline", "type": "string", "role": "content", "label": "Headline", "description": "Short action line shown above the store badges.", "default": "Get the app" },
+    { "id": "showApple", "type": "enum", "role": "content", "label": "Show App Store", "description": "Show or hide the App Store badge.", "default": "yes", "options": [{ "value": "yes", "label": "Yes" }, { "value": "no", "label": "No" }] },
+    { "id": "showGoogle", "type": "enum", "role": "content", "label": "Show Google Play", "description": "Show or hide the Google Play badge.", "default": "yes", "options": [{ "value": "yes", "label": "Yes" }, { "value": "no", "label": "No" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Store Badge Lockup</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="store-badge-lockup" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            color: var(--fg);
+            font-family: var(--font-body);
+          }
+
+          .sbl-clip {
+            width: 100%;
+            height: 100%;
+            display: grid;
+            place-items: center;
+            padding: var(--space-3);
+            overflow: hidden;
+            background: var(--bg);
+          }
+
+          .sbl-lockup {
+            width: min(88cqw, 154cqh);
+            display: grid;
+            justify-items: center;
+            gap: min(6cqw, 7cqh);
+          }
+
+          .sbl-headline {
+            margin: 0;
+            max-width: 82cqw;
+            color: var(--fg);
+            font-family: var(--font-display);
+            font-size: min(8.2cqw, 12.5cqh);
+            font-weight: 750;
+            line-height: 1;
+            letter-spacing: -0.045em;
+            text-align: center;
+            text-wrap: balance;
+            will-change: transform, opacity;
+          }
+
+          .sbl-badges {
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: var(--space-2);
+          }
+
+          /* EDIT ZONE: both destinations share one badge geometry and one
+             text hierarchy. This single rule owns sizing, spacing, and order
+             so the pair cannot drift into mismatched lockups. */
+          .sbl-badge {
+            width: min(40cqw, 67cqh);
+            aspect-ratio: 3.12 / 1;
+            display: grid;
+            grid-template-columns: auto minmax(0, 1fr);
+            align-items: center;
+            gap: var(--space-1);
+            padding: min(2.2cqw, 3.2cqh) min(3cqw, 4.8cqh);
+            border: 0.16cqh solid var(--border);
+            border-radius: calc(var(--radius) * 4);
+            background: var(--surface);
+            color: var(--fg);
+            box-shadow: 0 1.5cqh 3.8cqh color-mix(in srgb, var(--bg) 70%, transparent);
+            will-change: transform, opacity;
+          }
+
+          .sbl-glyph {
+            width: min(6.7cqw, 10.5cqh);
+            aspect-ratio: 1;
+            display: grid;
+            place-items: center;
+            flex: none;
+            border: 0.16cqh solid color-mix(in srgb, var(--fg) 28%, transparent);
+            border-radius: calc(var(--radius) * 0.72);
+            background: color-mix(in srgb, var(--brand) 20%, var(--surface));
+            color: var(--fg);
+          }
+
+          .sbl-apple-mark {
+            font-family: var(--font-display);
+            font-size: min(3.2cqw, 5.2cqh);
+            font-weight: 800;
+            line-height: 1;
+          }
+
+          .sbl-play-mark {
+            width: 42%;
+            aspect-ratio: 0.88;
+            clip-path: polygon(8% 0, 100% 50%, 8% 100%);
+            background: currentColor;
+          }
+
+          .sbl-copy {
+            min-width: 0;
+            display: grid;
+            gap: min(0.4cqw, 0.6cqh);
+          }
+
+          .sbl-microcopy {
+            color: var(--muted);
+            font-family: var(--font-body);
+            font-size: min(1.65cqw, 2.65cqh);
+            font-weight: 600;
+            line-height: 1;
+            letter-spacing: 0.04em;
+            white-space: nowrap;
+          }
+
+          .sbl-label {
+            color: var(--fg);
+            font-family: var(--font-display);
+            font-size: min(3.75cqw, 5.8cqh);
+            font-weight: 720;
+            line-height: 1;
+            letter-spacing: -0.025em;
+            white-space: nowrap;
+          }
+        </style>
+
+        <div
+          id="store-badge-lockup-clip"
+          class="sbl-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <section class="sbl-lockup" aria-label="Download the app">
+            <h1 class="sbl-headline"></h1>
+            <div class="sbl-badges">
+              <div class="sbl-badge sbl-apple" role="img" aria-label="Download on the App Store">
+                <span class="sbl-glyph" aria-hidden="true">
+                  <span class="sbl-apple-mark">A</span>
+                </span>
+                <span class="sbl-copy" aria-hidden="true">
+                  <span class="sbl-microcopy">Download on the</span>
+                  <span class="sbl-label">App Store</span>
+                </span>
+              </div>
+
+              <div class="sbl-badge sbl-google" role="img" aria-label="Get it on Google Play">
+                <span class="sbl-glyph" aria-hidden="true">
+                  <span class="sbl-play-mark"></span>
+                </span>
+                <span class="sbl-copy" aria-hidden="true">
+                  <span class="sbl-microcopy">GET IT ON</span>
+                  <span class="sbl-label">Google Play</span>
+                </span>
+              </div>
+            </div>
+          </section>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var compositionId = "store-badge-lockup";
+            var lockup = root.querySelector(".sbl-lockup");
+            var headlineElement = root.querySelector(".sbl-headline");
+            var appleBadge = root.querySelector(".sbl-apple");
+            var googleBadge = root.querySelector(".sbl-google");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            /* INVARIANT: getVariables() owns all three public decisions.
+               Missing values use the declared defaults. Only an explicit
+               "no" removes a badge, while an empty headline remains empty. */
+            var headline = vars.headline == null ? "Get the app" : String(vars.headline);
+            var showApple = vars.showApple === "no" ? "no" : "yes";
+            var showGoogle = vars.showGoogle === "no" ? "no" : "yes";
+
+            headlineElement.textContent = headline;
+            if (showApple === "no") {
+              appleBadge.remove();
+            }
+            if (showGoogle === "no") {
+              googleBadge.remove();
+            }
+
+            var badgeElements = root.querySelectorAll(".sbl-badge");
+
+            /* RETIME RANGE: these constants own the complete lifecycle. The
+               headline finishes first. Both badges then rise and fade on
+               --ease-standard's GSAP owner, power2.out, with a small stagger. */
+            var IN_BASE = 1.2;
+            var OUT_BASE = 0.45;
+            var HEADLINE_START_BASE = 0.05;
+            var HEADLINE_DURATION_BASE = 0.48;
+            var BADGE_START_BASE = 0.22;
+            var BADGE_DURATION_BASE = 0.68;
+            var BADGE_STAGGER_BASE = 0.1;
+            var durationValue = Number(root.dataset.duration);
+            var duration = Number.isFinite(durationValue) && durationValue > 0 ? durationValue : 4;
+            var scale = duration < IN_BASE + OUT_BASE ? duration / (IN_BASE + OUT_BASE) : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var OUT_START = IN + HOLD;
+
+            var timeline = gsap.timeline({ paused: true });
+
+            timeline.fromTo(
+              headlineElement,
+              { y: "22%", opacity: 0 },
+              {
+                y: "0%",
+                opacity: 1,
+                duration: HEADLINE_DURATION_BASE * scale,
+                ease: "power2.out",
+              },
+              HEADLINE_START_BASE * scale,
+            );
+
+            if (badgeElements.length > 0) {
+              timeline.fromTo(
+                badgeElements,
+                { y: "28%", opacity: 0 },
+                {
+                  y: "0%",
+                  opacity: 1,
+                  duration: BADGE_DURATION_BASE * scale,
+                  stagger: BADGE_STAGGER_BASE * scale,
+                  ease: "power2.out",
+                },
+                BADGE_START_BASE * scale,
+              );
+            }
+
+            timeline.to(lockup, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            timeline.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = timeline;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add store-badge-lockup" />
+
+That writes one file: `compositions/components/store-badge-lockup.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/store-badge-lockup.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `prop` `ui-props` `mobile` `store-badges` `cta` `ask`.
+
+## 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/components/strikethrough-replace.mdx b/docs/catalog/components/strikethrough-replace.mdx
new file mode 100644
index 0000000000..2393e83e55
--- /dev/null
+++ b/docs/catalog/components/strikethrough-replace.mdx
@@ -0,0 +1,152 @@
+---
+title: "Strikethrough Replace"
+description: "Draw a strike line across old text, then reveal the replacement."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/strikethrough-replace.html"
+  compositionId="strikethrough-replace"
+  compositionSrc="compositions/components/strikethrough-replace.html"
+  variables={[{"id":"origin","type":"enum","role":"motion","label":"Origin","description":"Edge the strike grows out of as the timeline runs its scale from 0 to 1.","default":"left","options":[{"value":"left","label":"Left"},{"value":"center","label":"Center"},{"value":"right","label":"Right"}]},{"id":"thickness","type":"enum","role":"style","label":"Thickness","description":"Height of the strike line, from a hairline rule to a heavy bar.","default":"standard","options":[{"value":"thin","label":"Thin"},{"value":"standard","label":"Standard"},{"value":"thick","label":"Thick"}]},{"id":"tint","type":"enum","role":"style","label":"Tint","description":"Strike colour. Blue and violet ride --accent and --accent-2.","default":"red","options":[{"value":"red","label":"Red"},{"value":"amber","label":"Amber"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"tone","type":"enum","role":"style","label":"Tone","description":"Colour of both words: ink for light frames, paper for dark ones.","default":"ink","options":[{"value":"ink","label":"Ink"},{"value":"paper","label":"Paper"}]}]}
+>
+
+```html strikethrough-replace.html
+<!--
+  Strikethrough Replace - remocn typography primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Drive the timeline
+  integration from a paused GSAP timeline so renders remain deterministic.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result as a custom property
+  the CSS below consumes. The timeline recipe at the bottom is untouched by
+  them: it keeps drawing one strike and fading in one replacement, and these
+  decide which way that strike draws and what the pair looks like.
+
+    - origin (left | center | right, default left): the edge the strike grows
+      out of while the timeline runs its scale from 0 to 1. left wipes forward,
+      right wipes backward, center opens from the middle outwards. Once the
+      line is fully drawn all three look the same, so this reads while the
+      strike is drawing, not after it has landed.
+    - thickness (thin | standard | thick, default standard): height of the
+      strike line, 3px, 6px or 10px.
+    - tint (red | amber | blue | violet, default red): strike colour. red and
+      amber are literal, blue and violet ride --accent and --accent-2.
+    - tone (ink | paper, default ink): colour of both words. ink is near-black
+      for light frames, paper near-white for dark ones.
+
+  On every default the result is identical to the original: a 6px red line
+  wipes left to right across near-black text, then the replacement fades up.
+-->
+
+<div
+  class="hf-remocn-strikethrough-replace"
+  data-composition-variables='[
+    { "id": "origin", "type": "enum", "role": "motion", "label": "Origin", "description": "Edge the strike grows out of as the timeline runs its scale from 0 to 1.", "default": "left", "options": [{ "value": "left", "label": "Left" }, { "value": "center", "label": "Center" }, { "value": "right", "label": "Right" }] },
+    { "id": "thickness", "type": "enum", "role": "style", "label": "Thickness", "description": "Height of the strike line, from a hairline rule to a heavy bar.", "default": "standard", "options": [{ "value": "thin", "label": "Thin" }, { "value": "standard", "label": "Standard" }, { "value": "thick", "label": "Thick" }] },
+    { "id": "tint", "type": "enum", "role": "style", "label": "Tint", "description": "Strike colour. Blue and violet ride --accent and --accent-2.", "default": "red", "options": [{ "value": "red", "label": "Red" }, { "value": "amber", "label": "Amber" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Colour of both words: ink for light frames, paper for dark ones.", "default": "ink", "options": [{ "value": "ink", "label": "Ink" }, { "value": "paper", "label": "Paper" }] }
+  ]'
+>
+  <span>Slow</span><i></i><strong>Fast</strong>
+</div>
+
+<style>
+  .hf-remocn-strikethrough-replace {
+    color: var(--hf-strike-text-color, #18181b);
+    font-family: Inter, system-ui, sans-serif;
+    font-weight: 900;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-strikethrough-replace {
+    position: relative;
+    display: inline-grid;
+    grid-auto-flow: column;
+    gap: 18px;
+    align-items: center;
+    font-size: 58px;
+  }
+  .hf-remocn-strikethrough-replace i {
+    position: absolute;
+    left: 0;
+    width: 48%;
+    height: var(--hf-strike-thickness, 6px);
+    border-radius: 999px;
+    background: var(--hf-strike-color, #ef4444);
+    transform: scaleX(var(--hf-strike-progress, 1));
+    transform-origin: var(--hf-strike-origin, left center);
+  }
+  .hf-remocn-strikethrough-replace strong {
+    opacity: var(--hf-replace-opacity, 1);
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    var origins = { left: "left center", center: "center", right: "right center" };
+    var thicknesses = { thin: "3px", standard: "6px", thick: "10px" };
+    var tints = {
+      red: "#ef4444",
+      amber: "#f59e0b",
+      blue: "var(--accent, #38bdf8)",
+      violet: "var(--accent-2, #a78bfa)",
+    };
+    var tones = { ink: "#18181b", paper: "#fafafa" };
+
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var origin = origins[pick(origins, vars.origin, "left")];
+    var thickness = thicknesses[pick(thicknesses, vars.thickness, "standard")];
+    var tint = tints[pick(tints, vars.tint, "red")];
+    var tone = tones[pick(tones, vars.tone, "ink")];
+
+    var roots = document.querySelectorAll(".hf-remocn-strikethrough-replace");
+    for (var i = 0; i < roots.length; i += 1) {
+      roots[i].style.setProperty("--hf-strike-origin", origin);
+      roots[i].style.setProperty("--hf-strike-thickness", thickness);
+      roots[i].style.setProperty("--hf-strike-color", tint);
+      roots[i].style.setProperty("--hf-strike-text-color", tone);
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-strikethrough-replace i', { '--hf-strike-progress': 0 }, { '--hf-strike-progress': 1, duration: 0.28, ease: 'power2.out' }, startTime); tl.fromTo('.hf-remocn-strikethrough-replace strong', { '--hf-replace-opacity': 0, y: 14 }, { '--hf-replace-opacity': 1, y: 0, duration: 0.3, ease: 'power2.out' }, startTime + 0.24);
+-->
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add strikethrough-replace" />
+
+That writes one file: `compositions/components/strikethrough-replace.html`.
+
+## Usage
+
+Open `compositions/components/strikethrough-replace.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `remocn-port` `typography`.
+
+## 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/components/success-check.mdx b/docs/catalog/components/success-check.mdx
new file mode 100644
index 0000000000..763d5934e1
--- /dev/null
+++ b/docs/catalog/components/success-check.mdx
@@ -0,0 +1,174 @@
+---
+title: "Success Check"
+description: "A success check primitive with ring pop, path draw, and subtle rotate blur"
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/success-check.html"
+  compositionId="success-check"
+  compositionSrc="compositions/components/success-check.html"
+  variables={[{"id":"tint","type":"enum","role":"style","label":"Tint","description":"Colour pair, a pale halo behind a saturated mark. green and amber are literal state colours; blue and violet ride the composition theme tokens.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"},{"value":"amber","label":"Amber"}]},{"id":"size","type":"enum","role":"layout","label":"Size","description":"Diameter of the halo and of the mark inside it.","default":"standard","options":[{"value":"small","label":"Small"},{"value":"standard","label":"Standard"},{"value":"large","label":"Large"}]},{"id":"ring","type":"enum","role":"style","label":"Ring","description":"Opacity of the circle the tick sits in.","default":"standard","options":[{"value":"subtle","label":"Subtle"},{"value":"standard","label":"Standard"},{"value":"bold","label":"Bold"}]},{"id":"spin","type":"enum","role":"motion","label":"Spin","description":"Multiplies the rotation the timeline drives, so the mark swings less or more into place.","default":"standard","options":[{"value":"subtle","label":"Subtle"},{"value":"standard","label":"Standard"},{"value":"bold","label":"Bold"}]}]}
+>
+
+```html success-check.html
+<!--
+  Success Check - transitions.dev-inspired primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Use the timeline
+  integration note at the bottom as the starting point for deterministic GSAP
+  animation.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result as a custom property
+  the CSS below consumes. The timeline recipe at the bottom is untouched by
+  them: it keeps popping the mark in and drawing the tick, and these decide how
+  big it is, what colour it wears and how far the pop swings.
+
+    - tint (green | blue | violet | amber, default green): the colour pair, a
+      pale halo behind a saturated mark. green and amber are literal state
+      colours and stay legible whatever the surrounding theme tokens hold; blue
+      and violet name no state, so their mark rides the composition's own accent
+      and accent-2 tokens over a neutral halo and falls back to ink when the
+      composition declares none.
+    - size (small | standard | large, default standard): diameter of the halo
+      and of the mark inside it, 60px, 82px or 110px. The stroke is in viewBox
+      units, so it thickens with the mark instead of staying pinned.
+    - ring (subtle | standard | bold, default standard): opacity of the circle
+      the tick sits in, 0.12, 0.28 or 0.6.
+    - spin (subtle | standard | bold, default standard): multiplies the rotation
+      the timeline drives, so the mark swings a quarter as far or twice as far
+      into place. It scales what is already there rather than replacing it, so
+      it still lands square at the end of the pop, and at rest, with no rotation
+      driven, all three settle identically.
+
+  On every default the result is identical to the original: an 82px pale green
+  halo, a green tick, a 0.28 ring, and the authored -18deg pop.
+-->
+
+<div
+  class="hf-transition-success-check"
+  aria-label="Success"
+  data-composition-variables='[
+    { "id": "tint", "type": "enum", "role": "style", "label": "Tint", "description": "Colour pair, a pale halo behind a saturated mark. green and amber are literal state colours; blue and violet ride the composition theme tokens.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }, { "value": "amber", "label": "Amber" }] },
+    { "id": "size", "type": "enum", "role": "layout", "label": "Size", "description": "Diameter of the halo and of the mark inside it.", "default": "standard", "options": [{ "value": "small", "label": "Small" }, { "value": "standard", "label": "Standard" }, { "value": "large", "label": "Large" }] },
+    { "id": "ring", "type": "enum", "role": "style", "label": "Ring", "description": "Opacity of the circle the tick sits in.", "default": "standard", "options": [{ "value": "subtle", "label": "Subtle" }, { "value": "standard", "label": "Standard" }, { "value": "bold", "label": "Bold" }] },
+    { "id": "spin", "type": "enum", "role": "motion", "label": "Spin", "description": "Multiplies the rotation the timeline drives, so the mark swings less or more into place.", "default": "standard", "options": [{ "value": "subtle", "label": "Subtle" }, { "value": "standard", "label": "Standard" }, { "value": "bold", "label": "Bold" }] }
+  ]'
+>
+  <svg viewBox="0 0 64 64">
+    <circle cx="32" cy="32" r="27" />
+    <path d="M20 33.5l8 8L45 23" />
+  </svg>
+</div>
+
+<style>
+  .hf-transition-success-check {
+    display: grid;
+    place-items: center;
+    width: var(--hf-check-size, 82px);
+    height: var(--hf-check-size, 82px);
+    border-radius: 999px;
+    background: var(--hf-check-halo, #dcfce7);
+    color: var(--hf-check-ink, #16a34a);
+  }
+  .hf-transition-success-check svg {
+    width: var(--hf-check-mark-size, 64px);
+    height: var(--hf-check-mark-size, 64px);
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 5;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    filter: blur(var(--hf-check-blur, 0px));
+    transform: rotate(calc(var(--hf-check-rotate, 0deg) * var(--hf-check-spin, 1)))
+      scale(var(--hf-check-scale, 1));
+  }
+  .hf-transition-success-check circle {
+    opacity: var(--hf-check-ring-opacity, 0.28);
+  }
+  .hf-transition-success-check path {
+    stroke-dasharray: 36;
+    stroke-dashoffset: var(--hf-check-dash, 0);
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    // The mark is the whole composition and its colour is its meaning, so this
+    // is the one place an accent belongs. green and amber are the literal
+    // success and caution conventions; blue and violet named no state, so they
+    // ride the composition's own tokens over a neutral halo and fall back to
+    // ink when the composition declares none.
+    var tints = {
+      green: { halo: "#dcfce7", ink: "#16a34a" },
+      blue: { halo: "#f4f4f5", ink: "var(--accent, #18181b)" },
+      violet: { halo: "#f4f4f5", ink: "var(--accent-2, #18181b)" },
+      amber: { halo: "#fef3c7", ink: "#d97706" },
+    };
+    var sizes = {
+      small: { box: "60px", mark: "47px" },
+      standard: { box: "82px", mark: "64px" },
+      large: { box: "110px", mark: "86px" },
+    };
+    var rings = { subtle: "0.12", standard: "0.28", bold: "0.6" };
+    var spins = { subtle: "0.4", standard: "1", bold: "2" };
+
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var tint = tints[pick(tints, vars.tint, "green")];
+    var size = sizes[pick(sizes, vars.size, "standard")];
+    var ring = rings[pick(rings, vars.ring, "standard")];
+    var spin = spins[pick(spins, vars.spin, "standard")];
+
+    var roots = document.querySelectorAll(".hf-transition-success-check");
+    for (var i = 0; i < roots.length; i += 1) {
+      roots[i].style.setProperty("--hf-check-halo", tint.halo);
+      roots[i].style.setProperty("--hf-check-ink", tint.ink);
+      roots[i].style.setProperty("--hf-check-size", size.box);
+      roots[i].style.setProperty("--hf-check-mark-size", size.mark);
+      roots[i].style.setProperty("--hf-check-ring-opacity", ring);
+      roots[i].style.setProperty("--hf-check-spin", spin);
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-transition-success-check svg', { opacity: 0, '--hf-check-scale': 0.72, '--hf-check-rotate': '-18deg', '--hf-check-blur': '7px' }, { opacity: 1, '--hf-check-scale': 1, '--hf-check-rotate': '0deg', '--hf-check-blur': '0px', duration: 0.34, ease: 'back.out(1.8)' }, startTime); tl.fromTo('.hf-transition-success-check path', { '--hf-check-dash': 36 }, { '--hf-check-dash': 0, duration: 0.42, ease: 'power2.out' }, startTime + 0.12);
+-->
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add success-check" />
+
+That writes one file: `compositions/components/success-check.html`.
+
+## Usage
+
+Open `compositions/components/success-check.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+
+{/* hf:generated-footer */}
+
+Tagged `video-primitive` `transition-primitive` `transitions-dev-port` `success` `check`.
+
+## 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/components/svg-line-draw-loader.mdx b/docs/catalog/components/svg-line-draw-loader.mdx
new file mode 100644
index 0000000000..a7fa794d50
--- /dev/null
+++ b/docs/catalog/components/svg-line-draw-loader.mdx
@@ -0,0 +1,112 @@
+---
+title: "SVG Line Draw Loader"
+description: "An Anime.js-style path drawing loader implemented as a seekable GSAP stroke timeline."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/components/svg-line-draw-loader.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="SVG Line Draw Loader preview" />
+
+## Install
+
+<InstallCommand command="npx hyperframes add svg-line-draw-loader" />
+
+That writes one file: `compositions/components/svg-line-draw-loader.html`.
+
+## Source
+
+<Accordion title={`svg-line-draw-loader.html`}>
+
+```html
+<!--
+  SVG Line Draw Loader - advanced HyperFrames primitive.
+
+  This is intentionally seekable: drive it from a paused GSAP timeline.
+  MotionPath examples require GSAP MotionPathPlugin. Three.js examples expose
+  a render(progress) adapter instead of a free-running requestAnimationFrame loop.
+-->
+
+<div class="hf-advanced-svg-line-draw-loader">
+  <svg viewBox="0 0 520 220"><path d="M24 160 C90 28, 188 40, 228 128 S356 234, 494 68" /></svg>
+</div>
+
+<style>
+  .hf-advanced-svg-line-draw-loader {
+    color: var(--fg, #111827);
+    font-family: var(--font-body, Inter, system-ui, sans-serif);
+  }
+  .hf-advanced-svg-line-draw-loader {
+    width: 720px;
+    min-height: 420px;
+    border-radius: var(--radius, 30px);
+    padding: var(--space-3, 36px);
+    background: var(--surface, #fff);
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.16);
+    display: grid;
+    place-items: center;
+  }
+  .hf-advanced-svg-line-draw-loader .grid {
+    display: grid;
+    grid-template-columns: repeat(8, 46px);
+    gap: var(--space-1, 10px);
+  }
+  .hf-advanced-svg-line-draw-loader .cell {
+    width: 46px;
+    height: 46px;
+    border-radius: 14px;
+    background: color-mix(in srgb, var(--fg, #111827) 45%, transparent);
+    transform: translateY(var(--hf-cell-y, 0px)) scale(var(--hf-cell-scale, 1));
+    opacity: var(--hf-cell-opacity, 1);
+  }
+  .hf-advanced-svg-line-draw-loader svg {
+    width: 520px;
+    height: 220px;
+    overflow: visible;
+  }
+  .hf-advanced-svg-line-draw-loader path {
+    fill: none;
+    stroke: var(--accent, #18181b);
+    stroke-width: 14;
+    stroke-linecap: round;
+    stroke-dasharray: 900;
+    stroke-dashoffset: var(--hf-dash, 0);
+  }
+  .hf-advanced-svg-line-draw-loader .stack {
+    position: relative;
+    width: 520px;
+    height: 260px;
+  }
+  .hf-advanced-svg-line-draw-loader .card {
+    position: absolute;
+    inset: 0;
+    border-radius: 26px;
+    background: linear-gradient(135deg, var(--surface, #fafafa), var(--surface, #e4e4e7));
+    border: 1px solid var(--border, rgba(15, 23, 42, 0.08));
+    box-shadow: 0 20px 54px rgba(15, 23, 42, 0.14);
+    transform: translateY(var(--hf-card-y, 0px)) scale(var(--hf-card-scale, 1));
+    opacity: var(--hf-card-opacity, 1);
+  }
+</style>
+
+<!--
+  Timeline integration:
+  const startTime = 0;
+  tl.fromTo('.hf-advanced-svg-line-draw-loader path', { '--hf-dash': 900 }, { '--hf-dash': 0, duration: 1.35, ease: 'power3.inOut' }, startTime);
+-->
+```
+
+</Accordion>
+
+## Usage
+
+Open `compositions/components/svg-line-draw-loader.html` and paste its contents into your composition. The comment header describes the timeline integration and any optional dependency setup.
+
+{/* hf:generated-footer */}
+
+Tagged `video-primitive` `advanced-motion` `anime-inspired` `hyperframes-native`.
+
+## 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/components/svg-mask-reveal.mdx b/docs/catalog/components/svg-mask-reveal.mdx
new file mode 100644
index 0000000000..1da52bab26
--- /dev/null
+++ b/docs/catalog/components/svg-mask-reveal.mdx
@@ -0,0 +1,358 @@
+---
+title: "SVG Mask Reveal"
+description: "A soft token-colored sweep reveals media only through an editable SVG wordmark mask."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/svg-mask-reveal.html"
+  compositionId="svg-mask-reveal"
+  compositionSrc="compositions/components/svg-mask-reveal.html"
+  variables={[{"id":"text","type":"string","role":"content","label":"Wordmark","description":"Text used as the SVG mask window.","default":"REVEAL","maxLength":16},{"id":"revealProgress","type":"number","role":"content","label":"Reveal progress","description":"Final revealed width of the wordmark.","default":100,"min":0,"max":100,"step":1,"unit":"%"},{"id":"featherPx","type":"number","role":"style","label":"Edge feather","description":"Softness of the traveling reveal edge.","default":24,"min":0,"max":120,"step":1,"unit":"px"}]}
+>
+
+```html svg-mask-reveal.html
+<!doctype html>
+<!--
+  svg-mask-reveal -- HyperFrames video primitive (effects / burst / exhibit)
+
+  Concept: token-colored media is visible only through an SVG wordmark mask.
+  A soft alpha band crosses the mask from left to right, making the wordmark
+  act as a window into the fill beneath it. One mechanic, one job: exhibiting
+  a wordmark through a vector mask reveal.
+
+  Compiled-from evidence: hyperframes-research-css-masks.md, SvgMaskReveal and
+  "SVG text as mask over image or video". The implementation follows its
+  inline SVG, explicit user-space bounds, namespaced fragment IDs, and soft
+  reveal geometry guidance.
+
+  Use when: a logo, product name, or short title should reveal a branded fill
+  inside its glyphs. Use a path-based sibling when exact brand glyph outlines
+  matter more than editable text.
+
+  Variables (declared in data-composition-variables below):
+    - text (string, default "REVEAL"): the wordmark used as the SVG mask.
+    - revealProgress (number, default 100): final revealed width, 0 to 100%.
+    - featherPx (number, default 24): softness of the traveling mask edge.
+
+  Envelope (burst profile, fixed IN/OUT, elastic HOLD):
+    IN_BASE  = 0.90s  the soft band sweeps across the wordmark
+    HOLD     = max(0, D - (IN_BASE + OUT_BASE)); final state stays readable
+    OUT_BASE = 0.45s  the complete wordmark fades cleanly
+    If D is shorter than IN_BASE + OUT_BASE, IN and OUT compress together.
+
+  Sync point: SWEEP_LANDS = 0.80s into an uncompressed IN. It scales with IN
+  only when the envelope is compressed and never moves into the elastic HOLD.
+
+  Sound: none. The sweep is designed to accept scene-level sound if desired.
+
+  Mount contract: this is a template-wrapped sub-composition. The root has no
+  data-width or data-height, fills the host with inset:0, establishes cqw/cqh
+  sizing with container-type:size, and registers one paused GSAP timeline under
+  the hardcoded composition id "svg-mask-reveal". The demo mounts this file via
+  data-composition-src so it exercises the real transport path.
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "text", "type": "string", "role": "content", "label": "Wordmark", "description": "Text used as the SVG mask window.", "default": "REVEAL", "maxLength": 16 },
+    { "id": "revealProgress", "type": "number", "role": "content", "label": "Reveal progress", "description": "Final revealed width of the wordmark.", "default": 100, "min": 0, "max": 100, "step": 1, "unit": "%" },
+    { "id": "featherPx", "type": "number", "role": "style", "label": "Edge feather", "description": "Softness of the traveling reveal edge.", "default": 24, "min": 0, "max": 120, "step": 1, "unit": "px" }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>SVG Mask Reveal</title>
+  </head>
+  <body>
+    <template>
+      <div
+        id="root"
+        data-composition-id="svg-mask-reveal"
+        data-start="0"
+        data-duration="4"
+        data-fps="30"
+      >
+        <style>
+          @property --svg-mask-reveal-sweep-x {
+            syntax: "<percentage>";
+            inherits: false;
+            initial-value: -10%;
+          }
+
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          /* INVARIANT: the host owns dimensions. All visible layout derives
+             from this size container, and the root is styled only by #root. */
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            background: var(--bg);
+            color: var(--fg);
+            font-family: var(--font-body);
+          }
+
+          .smr-clip,
+          .smr-stage {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+          }
+
+          .smr-stage {
+            display: grid;
+            place-items: center;
+          }
+
+          /* EDIT ZONE: presentation scale. The SVG keeps its 12:5 viewBox
+             while these container-relative limits make it fit wide and tall
+             hosts without stage-pixel assumptions. */
+          .smr-svg {
+            display: block;
+            width: min(92cqw, 168cqh);
+            height: auto;
+            overflow: visible;
+          }
+
+          .smr-media-start {
+            stop-color: var(--brand);
+          }
+
+          .smr-media-middle {
+            stop-color: var(--accent);
+          }
+
+          .smr-media-end {
+            stop-color: var(--fg);
+          }
+
+          .smr-mask-text {
+            fill: var(--fg);
+            font-family: var(--font-display);
+            font-size: 240px;
+            font-weight: 850;
+            letter-spacing: 0.02em;
+          }
+
+          .smr-media {
+            mask-mode: alpha, alpha;
+            mask-composite: intersect;
+          }
+
+          .smr-outline {
+            fill: none;
+            stroke: var(--border);
+            stroke-width: 2;
+            font-family: var(--font-display);
+            font-size: 240px;
+            font-weight: 850;
+            letter-spacing: 0.02em;
+          }
+        </style>
+
+        <div
+          id="svg-mask-reveal-clip"
+          class="smr-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="smr-stage">
+            <svg
+              class="smr-svg"
+              viewBox="0 0 1200 500"
+              role="img"
+              aria-label="REVEAL"
+              preserveAspectRatio="xMidYMid meet"
+            >
+              <defs>
+                <!-- IDs carry the full primitive prefix so fragment URLs do
+                     not collide with sibling compositions after assembly. -->
+                <linearGradient
+                  id="svg-mask-reveal-media-gradient"
+                  gradientUnits="userSpaceOnUse"
+                  x1="80"
+                  y1="420"
+                  x2="1120"
+                  y2="80"
+                >
+                  <stop class="smr-media-start" offset="0" />
+                  <stop class="smr-media-middle" offset="0.52" />
+                  <stop class="smr-media-end" offset="1" />
+                </linearGradient>
+
+                <!-- The word mask owns only the vector silhouette. The media
+                     rect independently intersects it with the CSS sweep. -->
+                <mask
+                  id="svg-mask-reveal-word-mask"
+                  mask-type="alpha"
+                  maskUnits="userSpaceOnUse"
+                  maskContentUnits="userSpaceOnUse"
+                  x="0"
+                  y="0"
+                  width="1200"
+                  height="500"
+                >
+                  <text
+                    id="svg-mask-reveal-text"
+                    class="smr-mask-text"
+                    x="600"
+                    y="260"
+                    text-anchor="middle"
+                    dominant-baseline="middle"
+                    textLength="1000"
+                    lengthAdjust="spacingAndGlyphs"
+                  >
+                    REVEAL
+                  </text>
+                </mask>
+              </defs>
+
+              <!-- The outline stays quiet and complete while the token-colored
+                   media itself remains visible only through the word mask. -->
+              <text
+                id="svg-mask-reveal-outline"
+                class="smr-outline"
+                x="600"
+                y="260"
+                text-anchor="middle"
+                dominant-baseline="middle"
+                textLength="1000"
+                lengthAdjust="spacingAndGlyphs"
+              >
+                REVEAL
+              </text>
+              <rect
+                class="smr-media"
+                x="0"
+                y="0"
+                width="1200"
+                height="500"
+                fill="url(#svg-mask-reveal-media-gradient)"
+              />
+            </svg>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var compositionId = "svg-mask-reveal";
+            var stage = root.querySelector(".smr-stage");
+            var svg = root.querySelector(".smr-svg");
+            var maskText = root.querySelector("#svg-mask-reveal-text");
+            var outlineText = root.querySelector("#svg-mask-reveal-outline");
+            var mediaRect = root.querySelector(".smr-media");
+
+            // EDIT ZONE: declared defaults are merged with per-instance host
+            // overrides by the runtime. Missing and zero are distinct here.
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+            var textValue = vars.text == null ? "REVEAL" : String(vars.text);
+            var progressValue = vars.revealProgress == null ? NaN : Number(vars.revealProgress);
+            var revealProgress = Number.isFinite(progressValue)
+              ? Math.max(0, Math.min(100, progressValue))
+              : 100;
+            var featherValue = vars.featherPx == null ? NaN : Number(vars.featherPx);
+            var featherPx = Number.isFinite(featherValue)
+              ? Math.max(0, Math.min(120, featherValue))
+              : 24;
+
+            maskText.textContent = textValue;
+            outlineText.textContent = textValue;
+            svg.setAttribute("aria-label", textValue);
+
+            // INVARIANT: the word and sweep masks are independent layers on
+            // the media rect. This initialization owns their feather geometry.
+            var VIEW_WIDTH = 1200;
+            var featherPercent = (featherPx / VIEW_WIDTH) * 100;
+            var hiddenSweepPercent = -featherPercent;
+            mediaRect.style.maskImage =
+              "url(#svg-mask-reveal-word-mask), linear-gradient(to right, black var(--svg-mask-reveal-sweep-x, -10%), transparent calc(var(--svg-mask-reveal-sweep-x, -10%) + " +
+              featherPercent +
+              "%))";
+
+            // RETIME RANGE: IN_BASE and OUT_BASE define the burst envelope.
+            // The sweep uses --ease-standard's GSAP owner, power2.out.
+            var IN_BASE = 0.9;
+            var OUT_BASE = 0.45;
+            var SWEEP_START_BASE = 0.08;
+            var SWEEP_LANDS_BASE = 0.8;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var envelopeBase = IN_BASE + OUT_BASE;
+            var scale = duration < envelopeBase ? duration / envelopeBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var OUT_START = IN + HOLD;
+            var SWEEP_START = SWEEP_START_BASE * scale;
+            var SWEEP_DURATION = (SWEEP_LANDS_BASE - SWEEP_START_BASE) * scale;
+            var targetSweepPercent = revealProgress === 0 ? hiddenSweepPercent : revealProgress;
+
+            gsap.set(stage, { opacity: 1 });
+            gsap.set(mediaRect, {
+              "--svg-mask-reveal-sweep-x": hiddenSweepPercent + "%",
+            });
+
+            var tl = gsap.timeline({ paused: true });
+            tl.to(
+              mediaRect,
+              {
+                "--svg-mask-reveal-sweep-x": targetSweepPercent + "%",
+                duration: SWEEP_DURATION,
+                ease: "power2.out",
+              },
+              SWEEP_START,
+            );
+            tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add svg-mask-reveal" />
+
+That writes one file: `compositions/components/svg-mask-reveal.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/svg-mask-reveal.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `effect` `svg` `mask` `wordmark` `reveal` `exhibit`.
+
+## 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/components/svg-stroke-trace.mdx b/docs/catalog/components/svg-stroke-trace.mdx
new file mode 100644
index 0000000000..5653c78029
--- /dev/null
+++ b/docs/catalog/components/svg-stroke-trace.mdx
@@ -0,0 +1,271 @@
+---
+title: "SVG Stroke Trace"
+description: "An authored SVG path draws from its measured length, holds with subtle drift, and optionally fills when the path is closed."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/svg-stroke-trace.html"
+  compositionId="svg-stroke-trace"
+  compositionSrc="compositions/components/svg-stroke-trace.html"
+  variables={[{"id":"path","type":"string","role":"content","label":"Path","description":"SVG path data for the authored mark.","default":"M 92 328 C 178 142 292 138 366 276 C 430 396 500 414 558 262 C 622 94 724 112 786 274 C 836 406 894 376 930 194"},{"id":"stroke_width","type":"number","role":"style","label":"Stroke width","description":"Width of the traced stroke in SVG viewBox units.","default":12,"min":2,"max":32,"step":1},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Color used by the trace and optional fill.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Optional departure. Default none: the finished mark holds until the frame cuts.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
+>
+
+```html svg-stroke-trace.html
+<!doctype html>
+<!--
+  svg-stroke-trace: HyperFrames video primitive (intros and reveals)
+
+  An authored SVG path draws from start to finish using its measured length.
+  Closed paths receive a restrained fill after the stroke completes. Open
+  paths remain stroke-only, which keeps signatures and waves clean.
+
+  Variables:
+    - path (string): SVG path data for the traced mark.
+    - stroke_width (number, default 12): stroke width in viewBox units.
+    - accent (green | blue | violet, default green): trace and fill color.
+    - exit (none | fade | up, default "none"): optional departure.
+
+  Envelope, fixed IN and OUT with elastic HOLD only:
+    IN_BASE  = 1.85s, stroke draw followed by optional closed-path fill
+    HOLD     = max(0, D - IN - OUT), one subtle vertical drift cycle
+    OUT_BASE = 0.45s departure when exit is fade or up, 0s when exit is
+               none (the default: the finished mark holds until the cut)
+    If D is shorter than IN_BASE + OUT_BASE, IN and OUT compress together.
+    The timeline is never time-scaled.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, has no data-width or data-height,
+  and registers one paused timeline under the literal svg-stroke-trace key.
+-->
+<html
+  lang="en"
+  data-composition-id="svg-stroke-trace"
+  data-composition-duration="3.5"
+  data-composition-variables='[
+    { "id": "path", "type": "string", "role": "content", "label": "Path", "description": "SVG path data for the authored mark.", "default": "M 92 328 C 178 142 292 138 366 276 C 430 396 500 414 558 262 C 622 94 724 112 786 274 C 836 406 894 376 930 194" },
+    { "id": "stroke_width", "type": "number", "role": "style", "label": "Stroke width", "description": "Width of the traced stroke in SVG viewBox units.", "default": 12, "min": 2, "max": 32, "step": 1 },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Color used by the trace and optional fill.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the finished mark holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>SVG Stroke Trace</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="svg-stroke-trace" data-duration="3.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            pointer-events: none;
+          }
+
+          .sst-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+          }
+
+          .sst-stage {
+            width: 88cqw;
+            height: 70cqh;
+            opacity: 0;
+            will-change: transform, opacity;
+          }
+
+          .sst-svg {
+            display: block;
+            width: 100%;
+            height: 100%;
+            overflow: visible;
+          }
+
+          .sst-fill,
+          .sst-stroke {
+            stroke-linecap: round;
+            stroke-linejoin: round;
+          }
+
+          .sst-fill {
+            fill: var(--sst-accent);
+            stroke: none;
+            opacity: 0;
+          }
+
+          .sst-stroke {
+            fill: none;
+            stroke: var(--sst-accent);
+            filter: drop-shadow(
+              0 0 1.8cqmin color-mix(in srgb, var(--sst-accent) 34%, transparent)
+            );
+          }
+        </style>
+
+        <div
+          id="svg-stroke-trace-clip"
+          class="sst-clip clip"
+          data-start="0"
+          data-duration="3.5"
+          data-track-index="0"
+        >
+          <div class="sst-stage" role="img">
+            <svg
+              class="sst-svg"
+              viewBox="0 0 1024 520"
+              preserveAspectRatio="xMidYMid meet"
+              aria-hidden="true"
+            >
+              <path class="sst-fill"></path>
+              <path class="sst-stroke"></path>
+            </svg>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var DEFAULT_PATH =
+              "M 92 328 C 178 142 292 138 366 276 C 430 396 500 414 558 262 C 622 94 724 112 786 274 C 836 406 894 376 930 194";
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".sst-stage");
+            var fillPath = root.querySelector(".sst-fill");
+            var strokePath = root.querySelector(".sst-stroke");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var suppliedPath = vars.path == null ? DEFAULT_PATH : String(vars.path).trim();
+            var pathData = suppliedPath || DEFAULT_PATH;
+            var widthValue = vars.stroke_width;
+            var strokeWidth = Number.isFinite(widthValue)
+              ? Math.max(2, Math.min(32, widthValue))
+              : 12;
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            root.style.setProperty("--sst-accent", accentColors[accent]);
+            fillPath.setAttribute("d", pathData);
+            strokePath.setAttribute("d", pathData);
+            strokePath.setAttribute("stroke-width", String(strokeWidth));
+            stage.setAttribute("aria-label", "Authored SVG path tracing from start to finish");
+
+            var pathLength = strokePath.getTotalLength();
+            strokePath.style.strokeDasharray = pathLength + " " + pathLength;
+            strokePath.style.strokeDashoffset = String(pathLength);
+
+            // A trailing close command is the single owner of fill behavior.
+            // Open signatures and waves never receive an implied closing fill.
+            var fillEnabled = /[zZ]\s*$/.test(pathData);
+
+            var IN_BASE = 1.85;
+            var OUT_BASE = exit === "none" ? 0 : 0.45;
+            var DRAW_SHARE = 0.84;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "3.5"));
+            var fixedTotal = Math.max(0.001, IN_BASE + OUT_BASE);
+            var phaseScale = duration < fixedTotal ? duration / fixedTotal : 1;
+            var IN = IN_BASE * phaseScale;
+            var OUT = OUT_BASE * phaseScale;
+            var DRAW = IN * DRAW_SHARE;
+            var FILL = IN - DRAW;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var HOLD_START = IN;
+            var OUT_START = IN + HOLD;
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: the path measurement owns both dash values, so every authored
+            // path draws exactly once regardless of its geometry.
+            tl.to(stage, { opacity: 1, duration: Math.min(0.28, DRAW), ease: "power2.out" }, 0);
+            tl.to(strokePath, { strokeDashoffset: 0, duration: DRAW, ease: "sine.inOut" }, 0);
+
+            if (fillEnabled) {
+              tl.to(fillPath, { opacity: 0.16, duration: FILL, ease: "power2.out" }, DRAW);
+            }
+
+            // HOLD: one finite drift cycle keeps longer mounts alive.
+            if (HOLD > 0) {
+              tl.to(
+                stage,
+                {
+                  y: "-0.7cqh",
+                  duration: HOLD / 2,
+                  ease: "sine.inOut",
+                  yoyo: true,
+                  repeat: 1,
+                },
+                HOLD_START,
+              );
+            }
+
+            // OUT: optional departure; exit none holds until the frame cuts.
+            if (exit === "up") {
+              tl.to(
+                stage,
+                { opacity: 0, y: "-2.4cqh", duration: OUT, ease: "power2.in" },
+                OUT_START,
+              );
+            } else if (exit === "fade") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["svg-stroke-trace"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add svg-stroke-trace" />
+
+That writes one file: `compositions/components/svg-stroke-trace.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/svg-stroke-trace.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `intro` `reveal` `svg` `stroke` `line-draw`.
+
+## 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/components/swipe-rail.mdx b/docs/catalog/components/swipe-rail.mdx
new file mode 100644
index 0000000000..b685573cd8
--- /dev/null
+++ b/docs/catalog/components/swipe-rail.mdx
@@ -0,0 +1,400 @@
+---
+title: "Swipe Rail"
+description: "A contact circle leads a horizontal card rail through a fast drag, momentum carry, and settled snap to the next card."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/swipe-rail.html"
+  compositionId="swipe-rail"
+  compositionSrc="compositions/components/swipe-rail.html"
+  variables={[{"id":"card_count","type":"number","role":"content","label":"Card count","description":"Number of cards rendered in the rail.","default":4,"min":3,"max":5,"step":1},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Active color used by the focused card and contact circle.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"card_label_prefix","type":"string","role":"content","label":"Card label prefix","description":"Text placed before each card number.","default":"Feature"}]}
+>
+
+```html swipe-rail.html
+<!doctype html>
+<!--
+  swipe-rail: HyperFrames video primitive (interaction / gesture / demonstrate)
+
+  Concept: a contact circle leads a horizontal card rail through one swipe.
+  The rail follows the drag, carries momentum after release, then snaps the
+  next card into focus with a physical settle.
+
+  Variables:
+    - card_count (number, 3 to 5, default 4): cards rendered in the rail.
+    - accent (enum, default green): active color for focus and contact states.
+    - card_label_prefix (string, default "Feature"): label before each card number.
+
+  Envelope (fixed IN and OUT, elastic HOLD only):
+    IN_BASE  = 2.20s  rail reveal, touch, drag, release, momentum, snap
+    HOLD     = elastic = max(0, D - (IN + OUT)); selected card breathes subtly
+    OUT_BASE = 0.45s  clean stage fade and rise
+    If D is shorter than IN_BASE + OUT_BASE, IN and OUT compress together.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, has no data-width or data-height,
+  and registers one paused timeline under the hardcoded swipe-rail id.
+-->
+<html
+  lang="en"
+  data-composition-id="swipe-rail"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "card_count", "type": "number", "role": "content", "label": "Card count", "description": "Number of cards rendered in the rail.", "default": 4, "min": 3, "max": 5, "step": 1 },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Active color used by the focused card and contact circle.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "card_label_prefix", "type": "string", "role": "content", "label": "Card label prefix", "description": "Text placed before each card number.", "default": "Feature" }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Swipe Rail</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="swipe-rail" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            --sr-card-width: 46;
+            --sr-card-gap: 4;
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: #f8fafc;
+            font-family: Inter, system-ui, sans-serif;
+            pointer-events: none;
+          }
+
+          .sr-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            background: radial-gradient(circle at 50% 45%, #1e293b 0%, #0f172a 72%);
+          }
+
+          .sr-stage {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            opacity: 0;
+          }
+
+          .sr-rail {
+            position: absolute;
+            left: 50%;
+            top: 18cqh;
+            display: flex;
+            gap: calc(var(--sr-card-gap) * 1cqw);
+            height: 64cqh;
+            will-change: transform;
+          }
+
+          .sr-card {
+            position: relative;
+            flex: 0 0 calc(var(--sr-card-width) * 1cqw);
+            height: 60cqh;
+            overflow: hidden;
+            padding: 6cqh 4cqw;
+            border: 0.16cqmin solid rgba(148, 163, 184, 0.36);
+            border-radius: 3.2cqmin;
+            background: #f8fafc;
+            color: #0f172a;
+            box-shadow: 0 3cqh 7cqh rgba(2, 6, 23, 0.34);
+            transform-origin: 50% 50%;
+            will-change: transform, border-color, box-shadow;
+          }
+
+          .sr-card::before {
+            content: "";
+            position: absolute;
+            inset: 0 0 auto;
+            height: 1.2cqh;
+            background: var(--sr-accent);
+            opacity: 0.38;
+          }
+
+          .sr-index {
+            display: block;
+            margin-bottom: 3.2cqh;
+            color: var(--sr-accent);
+            font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+            font-size: 2.2cqw;
+            font-weight: 700;
+            letter-spacing: 0.12em;
+          }
+
+          .sr-label {
+            display: block;
+            overflow: hidden;
+            font-size: 4.2cqw;
+            font-weight: 760;
+            line-height: 1.05;
+            letter-spacing: -0.04em;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          .sr-rule {
+            display: block;
+            width: 72%;
+            height: 1.4cqh;
+            margin-top: 7cqh;
+            border-radius: 1cqh;
+            background: #cbd5e1;
+            box-shadow:
+              0 4cqh 0 #e2e8f0,
+              0 8cqh 0 #e2e8f0;
+          }
+
+          .sr-contact {
+            position: absolute;
+            left: 50%;
+            top: 57%;
+            width: 8cqw;
+            aspect-ratio: 1;
+            margin: -4cqw 0 0 -4cqw;
+            border: 0.32cqmin solid rgba(255, 255, 255, 0.88);
+            border-radius: 50%;
+            background: color-mix(in srgb, var(--sr-accent) 44%, transparent);
+            box-shadow:
+              0 0 0 1.2cqmin color-mix(in srgb, var(--sr-accent) 16%, transparent),
+              0 1.8cqh 4cqh rgba(2, 6, 23, 0.34);
+            opacity: 0;
+            will-change: transform, opacity;
+          }
+        </style>
+
+        <div class="sr-clip clip" data-start="0" data-duration="4" data-track-index="0">
+          <div class="sr-stage">
+            <div class="sr-rail" role="list" aria-label="Feature cards"></div>
+            <div class="sr-contact" aria-hidden="true"></div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".sr-stage");
+            var rail = root.querySelector(".sr-rail");
+            var contact = root.querySelector(".sr-contact");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var countValue = Number(vars.card_count);
+            var cardCount = Number.isFinite(countValue)
+              ? Math.max(3, Math.min(5, Math.round(countValue)))
+              : 4;
+            var prefix =
+              vars.card_label_prefix == null ? "Feature" : String(vars.card_label_prefix);
+            var accentName =
+              vars.accent === "blue" || vars.accent === "violet" ? vars.accent : "green";
+            var accentColors = {
+              green: "var(--brand, #22c55e)",
+              blue: "var(--accent, #38bdf8)",
+              violet: "var(--accent-2, #a78bfa)",
+            };
+            root.style.setProperty("--sr-accent", accentColors[accentName]);
+            // GSAP interpolates colors numerically, so tween values need the
+            // substituted color rather than the var() form.
+            var accentColor = getComputedStyle(root).getPropertyValue("--sr-accent").trim();
+
+            for (var index = 0; index < cardCount; index += 1) {
+              var card = document.createElement("article");
+              card.className = "sr-card";
+              card.setAttribute("role", "listitem");
+
+              var indexEl = document.createElement("span");
+              indexEl.className = "sr-index";
+              indexEl.textContent = String(index + 1).padStart(2, "0");
+
+              var label = document.createElement("span");
+              label.className = "sr-label";
+              label.textContent = prefix + " " + String(index + 1);
+
+              var rule = document.createElement("span");
+              rule.className = "sr-rule";
+              rule.setAttribute("aria-hidden", "true");
+
+              card.append(indexEl, label, rule);
+              rail.appendChild(card);
+            }
+
+            var cards = rail.querySelectorAll(".sr-card");
+            var centerIndex = Math.floor((cardCount - 1) / 2);
+            var targetIndex = centerIndex + 1;
+            var currentCard = cards[centerIndex];
+            var targetCard = cards[targetIndex];
+
+            var rootStyle = getComputedStyle(root);
+            var cardWidth = parseFloat(rootStyle.getPropertyValue("--sr-card-width"));
+            var cardGap = parseFloat(rootStyle.getPropertyValue("--sr-card-gap"));
+            var cardStep = cardWidth + cardGap;
+            var initialX = -(centerIndex * cardStep + cardWidth / 2);
+            var targetX = initialX - cardStep;
+
+            // Fixed gesture and exit phases compress together only for short mounts.
+            var IN_BASE = 2.2;
+            var OUT_BASE = 0.45;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var baseTotal = IN_BASE + OUT_BASE;
+            var envelopeScale = duration < baseTotal ? duration / baseTotal : 1;
+            var IN = IN_BASE * envelopeScale;
+            var OUT = OUT_BASE * envelopeScale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var OUT_START = IN + HOLD;
+            var gestureScale = IN / IN_BASE;
+
+            gsap.set(stage, { opacity: 0, y: "1.5cqh" });
+            gsap.set(rail, { x: initialX + "cqw" });
+            gsap.set(cards, { scale: 0.94, opacity: 0.74 });
+            gsap.set(currentCard, {
+              scale: 1.02,
+              opacity: 1,
+              borderColor: accentColor,
+            });
+            gsap.set(contact, { x: "0cqw", y: "0cqh", scale: 0.86, opacity: 0 });
+
+            var tl = gsap.timeline({ paused: true });
+
+            tl.to(
+              stage,
+              { opacity: 1, y: "0cqh", duration: 0.32 * gestureScale, ease: "power2.out" },
+              0,
+            );
+            tl.to(
+              contact,
+              { opacity: 1, scale: 1, duration: 0.18 * gestureScale, ease: "power2.out" },
+              0.4 * gestureScale,
+            );
+
+            // Fast initial drag decays under friction while the contact leads the rail.
+            tl.to(
+              contact,
+              { x: "-28cqw", duration: 0.62 * gestureScale, ease: "power3.out" },
+              0.66 * gestureScale,
+            );
+            tl.to(
+              rail,
+              { x: initialX - 23 + "cqw", duration: 0.62 * gestureScale, ease: "power3.out" },
+              0.66 * gestureScale,
+            );
+
+            var releaseAt = 1.28 * gestureScale;
+            tl.to(
+              contact,
+              {
+                y: "-5cqh",
+                scale: 0.82,
+                opacity: 0,
+                duration: 0.24 * gestureScale,
+                ease: "power2.out",
+              },
+              releaseAt,
+            );
+            tl.to(
+              rail,
+              {
+                x: initialX - 38 + "cqw",
+                duration: 0.28 * gestureScale,
+                ease: "power2.out",
+              },
+              releaseAt,
+            );
+
+            // The momentum handoff resolves into one exact card-width snap.
+            tl.to(
+              rail,
+              { x: targetX + "cqw", duration: 0.64 * gestureScale, ease: "back.out(1.7)" },
+              1.56 * gestureScale,
+            );
+            tl.to(
+              currentCard,
+              {
+                scale: 0.94,
+                opacity: 0.74,
+                borderColor: "rgba(148, 163, 184, 0.36)",
+                duration: 0.48 * gestureScale,
+                ease: "power2.out",
+              },
+              1.5 * gestureScale,
+            );
+            tl.to(
+              targetCard,
+              {
+                scale: 1.02,
+                opacity: 1,
+                borderColor: accentColor,
+                boxShadow: "0 3cqh 9cqh rgba(2, 6, 23, 0.42)",
+                duration: 0.64 * gestureScale,
+                ease: "back.out(1.7)",
+              },
+              1.56 * gestureScale,
+            );
+
+            if (HOLD > 0.4) {
+              var driftHalf = Math.min(0.55, HOLD / 2);
+              var driftRepeat = Math.max(0, Math.floor(HOLD / driftHalf) - 1);
+              tl.to(
+                targetCard,
+                {
+                  y: "-0.7cqh",
+                  duration: driftHalf,
+                  ease: "sine.inOut",
+                  yoyo: true,
+                  repeat: driftRepeat,
+                },
+                IN,
+              );
+            }
+
+            tl.to(stage, { opacity: 0, y: "-1.5cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["swipe-rail"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add swipe-rail" />
+
+That writes one file: `compositions/components/swipe-rail.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/swipe-rail.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `interaction` `gesture` `swipe` `cards` `rail`.
+
+## 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/components/tabs-slide-indicator.mdx b/docs/catalog/components/tabs-slide-indicator.mdx
new file mode 100644
index 0000000000..8335e5aa8b
--- /dev/null
+++ b/docs/catalog/components/tabs-slide-indicator.mdx
@@ -0,0 +1,187 @@
+---
+title: "Tabs Slide Indicator"
+description: "A pill indicator transition that slides between active tabs"
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/tabs-slide-indicator.html"
+  compositionId="tabs-slide-indicator"
+  compositionSrc="compositions/components/tabs-slide-indicator.html"
+  variables={[{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Fill of the sliding pill. ink is literal; the rest ride the composition theme tokens.","default":"ink","options":[{"value":"ink","label":"Ink"},{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"width","type":"enum","role":"layout","label":"Tab width","description":"Width of one tab. The slide the timeline drives is scaled to match, so the pill still lands on the next tab.","default":"standard","options":[{"value":"compact","label":"Compact"},{"value":"standard","label":"Standard"},{"value":"wide","label":"Wide"}]},{"id":"shape","type":"enum","role":"style","label":"Shape","description":"Corner radius of the track and the pill.","default":"pill","options":[{"value":"pill","label":"Pill"},{"value":"rounded","label":"Rounded"},{"value":"square","label":"Square"}]},{"id":"labels","type":"string","role":"content","label":"Labels","description":"The tab names, separated by commas. Two or more names rebuild the row.","default":"Plan,Debug,Ask"}]}
+>
+
+```html tabs-slide-indicator.html
+<!--
+  Tabs Slide Indicator - transitions.dev-inspired primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Use the timeline
+  integration note at the bottom as the starting point for deterministic GSAP
+  animation.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result as a custom property
+  the CSS below consumes. The timeline recipe at the bottom is untouched by
+  them: it keeps sliding the pill one tab to the right, and these decide how
+  wide that tab is, what the pill looks like and what the tabs say.
+
+    - accent (ink | green | blue | violet, default ink): fill of the sliding
+      pill. ink is a literal near-black; the other three ride the composition's
+      own brand, accent and accent-2 tokens and fall back to that same ink when
+      the composition declares none. The labels sitting on it stay white, so all
+      four keep the active tab readable.
+    - width (compact | standard | wide, default standard): width of one tab,
+      72px, 86px or 104px. The slide the timeline drives is scaled by the same
+      ratio, so the pill still lands exactly on the next tab rather than
+      stopping short or overshooting it.
+    - shape (pill | rounded | square, default pill): corner radius of the track
+      and the pill, 999px, 12px or 4px.
+    - labels (text, default "Plan,Debug,Ask"): the tab names, separated by
+      commas. Two or more names rebuild the row, one name or none leaves the
+      authored markup alone, since a single tab has nowhere to slide to.
+
+  On every default the result is identical to the original: three 86px tabs in
+  a light pill track, a near-black pill sliding from the first to the second.
+-->
+
+<div
+  class="hf-transition-tabs-slide-indicator"
+  data-composition-variables='[
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Fill of the sliding pill. ink is literal; the rest ride the composition theme tokens.", "default": "ink", "options": [{ "value": "ink", "label": "Ink" }, { "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "width", "type": "enum", "role": "layout", "label": "Tab width", "description": "Width of one tab. The slide the timeline drives is scaled to match, so the pill still lands on the next tab.", "default": "standard", "options": [{ "value": "compact", "label": "Compact" }, { "value": "standard", "label": "Standard" }, { "value": "wide", "label": "Wide" }] },
+    { "id": "shape", "type": "enum", "role": "style", "label": "Shape", "description": "Corner radius of the track and the pill.", "default": "pill", "options": [{ "value": "pill", "label": "Pill" }, { "value": "rounded", "label": "Rounded" }, { "value": "square", "label": "Square" }] },
+    { "id": "labels", "type": "string", "role": "content", "label": "Labels", "description": "The tab names, separated by commas. Two or more names rebuild the row.", "default": "Plan,Debug,Ask" }
+  ]'
+>
+  <span class="indicator"></span><button>Plan</button><button>Debug</button><button>Ask</button>
+</div>
+
+<style>
+  .hf-transition-tabs-slide-indicator {
+    --hf-tab-x: 0px;
+    position: relative;
+    display: inline-grid;
+    grid-template-columns: repeat(var(--hf-tab-count, 3), var(--hf-tab-width, 86px));
+    padding: 4px;
+    border: 1px solid #e4e4e7;
+    border-radius: var(--hf-tab-radius, 999px);
+    background: #f4f4f5;
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-transition-tabs-slide-indicator .indicator {
+    position: absolute;
+    top: 4px;
+    left: 4px;
+    width: var(--hf-tab-width, 86px);
+    height: 36px;
+    border-radius: var(--hf-tab-radius, 999px);
+    background: var(--hf-tab-fill, #18181b);
+    transform: translateX(calc(var(--hf-tab-x) * var(--hf-tab-step, 1)));
+    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18);
+  }
+  .hf-transition-tabs-slide-indicator button {
+    position: relative;
+    z-index: 1;
+    height: 36px;
+    border: 0;
+    background: transparent;
+    color: #71717a;
+    font-weight: 850;
+  }
+  .hf-transition-tabs-slide-indicator button:nth-of-type(2) {
+    color: #fff;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    // The pill is the one accent-carrying element here, so the three chromatic
+    // options ride the composition's own tokens and fall back to ink.
+    var accents = {
+      ink: "#18181b",
+      green: "var(--brand, #18181b)",
+      blue: "var(--accent, #18181b)",
+      violet: "var(--accent-2, #18181b)",
+    };
+    var widths = { compact: 72, standard: 86, wide: 104 };
+    var shapes = { pill: "999px", rounded: "12px", square: "4px" };
+
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var accent = accents[pick(accents, vars.accent, "ink")];
+    var width = widths[pick(widths, vars.width, "standard")];
+    var radius = shapes[pick(shapes, vars.shape, "pill")];
+    var labels =
+      typeof vars.labels === "string"
+        ? vars.labels.split(",").map(function (part) {
+            return part.trim();
+          })
+        : [];
+    labels = labels.filter(function (part) {
+      return part.length > 0;
+    });
+
+    var roots = document.querySelectorAll(".hf-transition-tabs-slide-indicator");
+    for (var i = 0; i < roots.length; i += 1) {
+      roots[i].style.setProperty("--hf-tab-fill", accent);
+      roots[i].style.setProperty("--hf-tab-width", width + "px");
+      // The timeline slides the pill by one standard tab, so scale that slide
+      // to whatever a tab is actually worth here.
+      roots[i].style.setProperty("--hf-tab-step", String(width / 86));
+      roots[i].style.setProperty("--hf-tab-radius", radius);
+      // A single tab has nowhere to slide to, so it is left as authored.
+      if (labels.length > 1) {
+        var old = roots[i].querySelectorAll("button");
+        for (var j = 0; j < old.length; j += 1) {
+          old[j].parentNode.removeChild(old[j]);
+        }
+        for (var k = 0; k < labels.length; k += 1) {
+          var button = document.createElement("button");
+          button.textContent = labels[k];
+          roots[i].appendChild(button);
+        }
+        roots[i].style.setProperty("--hf-tab-count", String(labels.length));
+      }
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-transition-tabs-slide-indicator .indicator', { '--hf-tab-x': '0px' }, { '--hf-tab-x': '86px', duration: 0.42, ease: 'power3.inOut' }, startTime);
+-->
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add tabs-slide-indicator" />
+
+That writes one file: `compositions/components/tabs-slide-indicator.html`.
+
+## Usage
+
+Open `compositions/components/tabs-slide-indicator.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+
+{/* hf:generated-footer */}
+
+Tagged `transition-primitive` `transitions-dev-port` `tabs` `indicator`.
+
+## 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/components/telemetry-hud.mdx b/docs/catalog/components/telemetry-hud.mdx
new file mode 100644
index 0000000000..4e54f616ab
--- /dev/null
+++ b/docs/catalog/components/telemetry-hud.mdx
@@ -0,0 +1,595 @@
+---
+title: "Telemetry HUD"
+description: "Quiet mono debug-HUD readouts frame a slotted subject: corner brackets draw on, label:value lines tick their values on cues, one readout emphasized in accent. The subject never moves; the HUD breathes zero."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/telemetry-hud.html"
+  compositionId="telemetry-hud"
+  compositionSrc="compositions/components/telemetry-hud.html"
+  variables={[{"id":"readouts","type":"string","role":"content","label":"Readouts","description":"Comma-separated label:value pairs, up to 8. The first colon splits label from value.","default":"fps:59.94,latency:11.8 ms,gpu:38%,heap:1.2 GB"},{"id":"emphasize","type":"number","role":"style","label":"Emphasize","description":"Index of the readout rendered in the accent color. -1 disables.","default":0,"min":-1,"max":7,"step":1},{"id":"cues","type":"string","role":"timing","label":"Cues","description":"Comma-separated seconds relative to mount start; cue N starts readout N value tick. Empty uses the authored rhythm.","default":""},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Color of the emphasized readout.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Outgoing transition. Frame roots own transitions; none holds the end frame.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
+>
+
+```html telemetry-hud.html
+<!doctype html>
+<!--
+  telemetry-hud: HyperFrames video primitive (product-demo / HUD)
+
+  Quiet mono debug-HUD readouts frame a slotted subject. Four corner brackets
+  draw on (measured getTotalLength, ATTRIBUTE-driven stroke-dashoffset: a CSS
+  dashoffset tween can leave stale paint under reverse seeks), small
+  "label: value" data lines fade in, and each value ticks to its final string
+  on its cue. One readout is emphasized in the accent color. The subject never
+  moves and the HUD breathes zero: the hold is dead still.
+
+  Value ticking follows the typed-prompt law: every visible frame is read from
+  one text-at-time row table built synchronously (fixed-seed LCG) before the
+  timeline registers, so forward seeks, reverse seeks, and repeated seeks to
+  the same time always produce the same string. Nothing is incremental.
+  During a tick, unresolved characters roll through same-class stand-ins
+  (digits stay digits, letters stay letters) and resolve left to right.
+
+  Slot (see README.md for a worked example):
+    - [data-slot="subject"]: the framed subject. Replace the children of this
+      element in your installed copy (img, video, or HTML). Default: a token
+      skeleton card. Direct img/video children are sized to cover the slot.
+
+  Variables (declared in data-composition-variables below):
+    - readouts (string): comma-separated "label:value" pairs, up to 8. The
+      first colon splits label from value; later colons stay in the value.
+    - emphasize (number, default 0): index of the accent-colored readout.
+      Out-of-range values clamp; -1 disables emphasis.
+    - cues (string, default ""): comma-separated seconds relative to mount
+      start; cue N starts readout N's tick. Empty = authored rhythm.
+    - accent (green | blue | violet, default green): emphasized readout color.
+      green maps to --brand, blue to --accent, violet to --accent-2.
+    - exit (none | fade | up, default none): outgoing transition. none holds
+      the end frame (frame roots own transitions; holds end films).
+
+  Envelope (fixed IN/OUT, elastic HOLD only, never gsap.timeScale()):
+    IN   = stage fade 0.45s, brackets draw 0.12s to ~0.9s, readout lines fade
+           staggered, ticks land per cue (clamped to finish before OUT).
+    HOLD = elastic = everything after the last tick; completely still.
+    OUT  = 0.45s when exit is fade or up, 0 when exit is none.
+
+  Interruptibility (Wave K L1): every animated property has one owner (stage
+  opacity/y, per-path dashoffset, one shared tick driver), so overlapping cue
+  schedules never fight a second tween for the same value.
+
+  Mount contract: MOUNTABLE SUB-COMPOSITION. The runtime clones only
+  <template> contents; #root fills the host box (inset: 0, container-type:
+  size), has no data-width/data-height, and registers one paused timeline
+  under the literal "telemetry-hud" key. Variables come from
+  window.__hyperframes.getVariables().
+-->
+<html
+  lang="en"
+  data-composition-id="telemetry-hud"
+  data-composition-duration="4.5"
+  data-composition-variables='[
+    { "id": "readouts", "type": "string", "role": "content", "label": "Readouts", "description": "Comma-separated label:value pairs, up to 8. The first colon splits label from value.", "default": "fps:59.94,latency:11.8 ms,gpu:38%,heap:1.2 GB" },
+    { "id": "emphasize", "type": "number", "role": "style", "label": "Emphasize", "description": "Index of the readout rendered in the accent color. -1 disables.", "default": 0, "min": -1, "max": 7, "step": 1 },
+    { "id": "cues", "type": "string", "role": "timing", "label": "Cues", "description": "Comma-separated seconds relative to mount start; cue N starts readout N value tick. Empty uses the authored rhythm.", "default": "" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Color of the emphasized readout.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Outgoing transition. Frame roots own transitions; none holds the end frame.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Telemetry HUD</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="telemetry-hud" data-duration="4.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            background: var(--bg, #07111f);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            pointer-events: none;
+          }
+
+          .th-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+          }
+
+          .th-stage {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            will-change: transform, opacity;
+          }
+
+          /* Framed subject: centered, static for the whole hold. */
+          .th-subject {
+            position: relative;
+            width: 56cqw;
+            height: 58cqh;
+            overflow: hidden;
+            border-radius: var(--radius, 2.4cqmin);
+          }
+
+          .th-slot,
+          .th-slot > img,
+          .th-slot > video {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+          }
+
+          .th-slot > img,
+          .th-slot > video {
+            object-fit: cover;
+          }
+
+          /* Token skeleton default; callers replacing slot children never
+             see any of this. */
+          .th-default {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            border: 0.16cqmin solid var(--border, #334155);
+            border-radius: var(--radius, 2.4cqmin);
+            background: color-mix(in srgb, var(--surface, #172033) 90%, var(--bg, #07111f));
+          }
+
+          .th-card {
+            width: 72%;
+          }
+
+          .th-bar {
+            width: 38%;
+            height: 4.6cqh;
+            margin-bottom: var(--space-3, 4cqh);
+            border-radius: 1.2cqh;
+            background: var(--muted, #94a3b8);
+            opacity: 0.55;
+          }
+
+          .th-line {
+            height: 2.4cqh;
+            margin-bottom: var(--space-2, 2.6cqh);
+            border-radius: 1.2cqh;
+            background: var(--muted, #94a3b8);
+            opacity: 0.38;
+          }
+
+          .th-line:nth-of-type(2) {
+            width: 88%;
+          }
+
+          .th-line:nth-of-type(3) {
+            width: 64%;
+          }
+
+          .th-line:nth-of-type(4) {
+            width: 42%;
+          }
+
+          /* Corner brackets: square-capped strokes, drawn via measured
+             dasharray/dashoffset ATTRIBUTES set from script. */
+          .th-bracket {
+            position: absolute;
+            width: 8cqmin;
+            height: 8cqmin;
+            overflow: visible;
+          }
+
+          .th-bracket path {
+            fill: none;
+            stroke: color-mix(in srgb, var(--fg, #f8fafc) 62%, transparent);
+            stroke-width: 3;
+            stroke-linecap: butt;
+          }
+
+          .th-bracket-tl {
+            top: var(--space-2, 2.4cqmin);
+            left: var(--space-2, 2.4cqmin);
+          }
+
+          .th-bracket-tr {
+            top: var(--space-2, 2.4cqmin);
+            right: var(--space-2, 2.4cqmin);
+            transform: scaleX(-1);
+          }
+
+          .th-bracket-bl {
+            bottom: var(--space-2, 2.4cqmin);
+            left: var(--space-2, 2.4cqmin);
+            transform: scaleY(-1);
+          }
+
+          .th-bracket-br {
+            bottom: var(--space-2, 2.4cqmin);
+            right: var(--space-2, 2.4cqmin);
+            transform: scale(-1, -1);
+          }
+
+          /* Readout groups sit just inside each bracket. */
+          .th-corner {
+            position: absolute;
+            display: flex;
+            flex-direction: column;
+            gap: 0.9cqmin;
+          }
+
+          .th-corner-tl {
+            top: calc(var(--space-2, 2.4cqmin) + 1cqmin);
+            left: calc(var(--space-2, 2.4cqmin) + 9.6cqmin);
+          }
+
+          .th-corner-tr {
+            top: calc(var(--space-2, 2.4cqmin) + 1cqmin);
+            right: calc(var(--space-2, 2.4cqmin) + 9.6cqmin);
+            align-items: flex-end;
+          }
+
+          .th-corner-bl {
+            bottom: calc(var(--space-2, 2.4cqmin) + 1cqmin);
+            left: calc(var(--space-2, 2.4cqmin) + 9.6cqmin);
+          }
+
+          .th-corner-br {
+            bottom: calc(var(--space-2, 2.4cqmin) + 1cqmin);
+            right: calc(var(--space-2, 2.4cqmin) + 9.6cqmin);
+            align-items: flex-end;
+          }
+
+          .th-read {
+            display: flex;
+            align-items: baseline;
+            gap: 1.1cqmin;
+            font-size: 2.3cqmin;
+            line-height: 1.35;
+            white-space: nowrap;
+            will-change: opacity;
+          }
+
+          .th-label {
+            color: var(--muted, #94a3b8);
+            font-weight: 500;
+            letter-spacing: 0.12em;
+            text-transform: uppercase;
+          }
+
+          .th-value {
+            color: var(--fg, #f8fafc);
+            font-weight: 500;
+            font-variant-numeric: tabular-nums;
+          }
+
+          .th-read.th-em .th-label,
+          .th-read.th-em .th-value {
+            color: var(--th-accent);
+          }
+
+          .th-read.th-em .th-value {
+            font-weight: 600;
+          }
+        </style>
+
+        <div
+          id="telemetry-hud-clip"
+          class="th-clip clip"
+          data-start="0"
+          data-duration="4.5"
+          data-track-index="0"
+        >
+          <div class="th-stage">
+            <div class="th-subject">
+              <div class="th-slot" data-slot="subject">
+                <!-- SLOT "subject": replace the children of this element with
+                     your own content (img, video, or HTML). -->
+                <div class="th-default" aria-hidden="true">
+                  <div class="th-card">
+                    <div class="th-bar"></div>
+                    <div class="th-line"></div>
+                    <div class="th-line"></div>
+                    <div class="th-line"></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <svg class="th-bracket th-bracket-tl" viewBox="0 0 48 48" aria-hidden="true">
+              <path d="M 46 3 L 12 3 Q 3 3 3 12 L 3 46"></path>
+            </svg>
+            <svg class="th-bracket th-bracket-tr" viewBox="0 0 48 48" aria-hidden="true">
+              <path d="M 46 3 L 12 3 Q 3 3 3 12 L 3 46"></path>
+            </svg>
+            <svg class="th-bracket th-bracket-bl" viewBox="0 0 48 48" aria-hidden="true">
+              <path d="M 46 3 L 12 3 Q 3 3 3 12 L 3 46"></path>
+            </svg>
+            <svg class="th-bracket th-bracket-br" viewBox="0 0 48 48" aria-hidden="true">
+              <path d="M 46 3 L 12 3 Q 3 3 3 12 L 3 46"></path>
+            </svg>
+
+            <div class="th-corner th-corner-tl"></div>
+            <div class="th-corner th-corner-tr"></div>
+            <div class="th-corner th-corner-bl"></div>
+            <div class="th-corner th-corner-br"></div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            // Literal id: mount flattening strips data-composition-id from the
+            // live root before this timeline registers.
+            var compositionId = "telemetry-hud";
+            var stage = root.querySelector(".th-stage");
+            var brackets = root.querySelectorAll(".th-bracket path");
+            var corners = [
+              root.querySelector(".th-corner-tl"),
+              root.querySelector(".th-corner-tr"),
+              root.querySelector(".th-corner-bl"),
+              root.querySelector(".th-corner-br"),
+            ];
+
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var readoutsRaw =
+              vars.readouts == null
+                ? "fps:59.94,latency:11.8 ms,gpu:38%,heap:1.2 GB"
+                : String(vars.readouts);
+            var emphasizeRaw = Number(vars.emphasize);
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #22c55e)",
+              blue: "var(--accent, #38bdf8)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            // The bundler mirrors composition variables as scoped CSS custom
+            // props, so this unit's own accent variable shadows the contract
+            // --accent token inside the subtree. When the shadow is present,
+            // fall back to the literal contract value instead of var(--accent).
+            var computedAccent = getComputedStyle(root).getPropertyValue("--accent").trim();
+            if (
+              computedAccent === "green" ||
+              computedAccent === "blue" ||
+              computedAccent === "violet"
+            ) {
+              accentColors.blue = "#38bdf8";
+            }
+            root.style.setProperty("--th-accent", accentColors[accent]);
+
+            // Parse "label:value" pairs; the FIRST colon splits, later colons
+            // stay in the value. Cap at 8 (two per corner).
+            var readouts = readoutsRaw
+              .split(",")
+              .map(function (pair) {
+                var i = pair.indexOf(":");
+                var label = (i < 0 ? pair : pair.slice(0, i)).trim();
+                var value = (i < 0 ? "" : pair.slice(i + 1)).trim();
+                return { label: label, value: value };
+              })
+              .filter(function (r) {
+                return r.label.length > 0;
+              })
+              .slice(0, 8);
+            var emphasize = Number.isFinite(emphasizeRaw)
+              ? Math.min(Math.round(emphasizeRaw), readouts.length - 1)
+              : 0;
+
+            var cueList = String(vars.cues == null ? "" : vars.cues)
+              .split(",")
+              .map(function (token) {
+                return parseFloat(token);
+              })
+              .filter(function (value) {
+                return isFinite(value) && value >= 0;
+              });
+
+            // RETIME RANGE: fixed phases; HOLD is the only elastic span.
+            var STAGE_IN = 0.45;
+            var BRACKET_AT = 0.12;
+            var BRACKET_DRAW = 0.5;
+            var READ_IN_AT = 0.45;
+            var TICK = 0.5;
+            var STILLNESS = 0.25;
+            var OUT_BASE = exit === "none" ? 0 : 0.45;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4.5"));
+            var OUT = Math.min(OUT_BASE, duration * 0.2);
+            var OUT_START = duration - OUT;
+            // Every tick must land before the stillness that precedes OUT.
+            var lastCueMax = Math.max(READ_IN_AT, OUT_START - STILLNESS - TICK);
+
+            // Fixed-seed LCG: the only randomness source, consumed in one
+            // deterministic order during this synchronous build.
+            var lcgState = 0x2c9277b5;
+            function rnd() {
+              lcgState = (Math.imul(1664525, lcgState) + 1013904223) >>> 0;
+              return lcgState / 4294967296;
+            }
+            var DIGITS = "0123456789";
+            var UPPER = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+            var LOWER = "abcdefghijklmnopqrstuvwxyz";
+            function standIn(ch) {
+              if (DIGITS.indexOf(ch) >= 0) return DIGITS[Math.floor(rnd() * 10)];
+              if (UPPER.indexOf(ch) >= 0) return UPPER[Math.floor(rnd() * 26)];
+              if (LOWER.indexOf(ch) >= 0) return LOWER[Math.floor(rnd() * 26)];
+              return ch;
+            }
+
+            // Build DOM + one text-at-time table per readout, all at once.
+            // The timeline only ever reads the tables, so seeks in any
+            // direction resolve the same string for the same time.
+            var STEPS = 8;
+            var readElements = [];
+            var valueElements = [];
+            var tables = [];
+            var tickEnd = READ_IN_AT;
+            readouts.forEach(function (readout, index) {
+              var row = document.createElement("div");
+              row.className = "th-read" + (index === emphasize ? " th-em" : "");
+              var labelEl = document.createElement("span");
+              labelEl.className = "th-label";
+              labelEl.textContent = readout.label;
+              var valueEl = document.createElement("span");
+              valueEl.className = "th-value";
+              valueEl.textContent = "--";
+              row.appendChild(labelEl);
+              row.appendChild(valueEl);
+              corners[index % 4].appendChild(row);
+              readElements.push(row);
+              valueElements.push(valueEl);
+
+              var cue = cueList[index] != null ? cueList[index] : 1.0 + index * 0.28;
+              cue = Math.max(READ_IN_AT, Math.min(cue, lastCueMax));
+              var chars = Array.from(readout.value);
+              var rows = [{ t: 0, x: "--" }];
+              for (var step = 1; step <= STEPS; step += 1) {
+                var resolved =
+                  step === STEPS ? chars.length : Math.floor((chars.length * step) / STEPS);
+                var out = "";
+                for (var k = 0; k < chars.length; k += 1) {
+                  out += k < resolved ? chars[k] : standIn(chars[k]);
+                }
+                rows.push({ t: cue + (TICK * step) / STEPS, x: out });
+              }
+              tables.push(rows);
+              tickEnd = Math.max(tickEnd, cue + TICK);
+            });
+
+            // 1ms tolerance: GSAP snaps a tween's end value below the row
+            // table's accumulated float times, far under one frame.
+            function textAt(rows, time) {
+              for (var i = rows.length - 1; i >= 0; i -= 1) {
+                if (time >= rows[i].t - 0.001) return rows[i].x;
+              }
+              return rows[0].x;
+            }
+
+            gsap.set(stage, { opacity: 0, y: 0 });
+            readElements.forEach(function (el) {
+              gsap.set(el, { opacity: 0 });
+            });
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: one stage fade; the subject never moves.
+            tl.to(stage, { opacity: 1, duration: STAGE_IN, ease: "power2.out" }, 0);
+
+            // Brackets draw on: dasharray/dashoffset as ATTRIBUTES (a CSS
+            // strokeDashoffset tween can leave stale paint under reverse
+            // seeks), both endpoints explicit.
+            brackets.forEach(function (path, index) {
+              var length = path.getTotalLength();
+              path.setAttribute("stroke-dasharray", String(length));
+              path.setAttribute("stroke-dashoffset", String(length));
+              tl.fromTo(
+                path,
+                { attr: { "stroke-dashoffset": length } },
+                {
+                  attr: { "stroke-dashoffset": 0 },
+                  duration: BRACKET_DRAW,
+                  ease: "power2.inOut",
+                  immediateRender: false,
+                },
+                BRACKET_AT + index * 0.08,
+              );
+            });
+
+            // Readout lines fade in staggered; opacity only, no movement.
+            readElements.forEach(function (el, index) {
+              tl.fromTo(
+                el,
+                { opacity: 0 },
+                { opacity: 1, duration: 0.35, ease: "power1.out", immediateRender: false },
+                READ_IN_AT + index * 0.07,
+              );
+            });
+
+            // One shared driver reads every table; single owner of all values.
+            var driver = { t: 0 };
+            tl.to(
+              driver,
+              {
+                t: tickEnd,
+                duration: tickEnd,
+                ease: "none",
+                onUpdate: function () {
+                  for (var i = 0; i < valueElements.length; i += 1) {
+                    valueElements[i].textContent = textAt(tables[i], driver.t);
+                  }
+                },
+              },
+              0,
+            );
+
+            // HOLD: the HUD breathes zero. Completely still.
+
+            // OUT: only when the exit variable asks for one.
+            if (exit !== "none") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+              if (exit === "up") {
+                tl.to(stage, { y: "-5cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              }
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add telemetry-hud" />
+
+That writes one file: `compositions/components/telemetry-hud.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/telemetry-hud.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `product-demo` `hud` `telemetry` `deterministic`.
+
+## 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/components/terminal-simulator.mdx b/docs/catalog/components/terminal-simulator.mdx
new file mode 100644
index 0000000000..1d46876b60
--- /dev/null
+++ b/docs/catalog/components/terminal-simulator.mdx
@@ -0,0 +1,129 @@
+---
+title: "Terminal Simulator"
+description: "A terminal window types commands and streams log output."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/components/terminal-simulator.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Terminal Simulator preview" />
+
+## Install
+
+<InstallCommand command="npx hyperframes add terminal-simulator" />
+
+That writes one file: `compositions/components/terminal-simulator.html`.
+
+## Source
+
+<Accordion title={`terminal-simulator.html`}>
+
+```html
+<!--
+  Terminal Simulator - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-terminal-simulator">
+  <div class="chrome"><span class="dot"></span><span>Terminal Simulator</span></div>
+  <div class="body">
+    <div class="files">index.html<br />style.css<br />timeline.js</div>
+    <div class="editor">
+      <span class="line" style="width: 92%"></span><span class="line" style="width: 72%"></span
+      ><span class="line" style="width: 84%"></span><span class="line" style="width: 58%"></span
+      ><span class="line" style="width: 78%"></span>
+    </div>
+  </div>
+  <div class="terminal">$ hyperframes render --skill=terminal-simulator</div>
+</div>
+
+<style>
+  .hf-remocn-terminal-simulator {
+    --hf-accent: var(--accent, #18181b);
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-terminal-simulator {
+    width: 760px;
+    border-radius: 24px;
+    overflow: hidden;
+    background: #0f172a;
+    color: #e4e4e7;
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+    font-family: ui-monospace, Menlo, monospace;
+  }
+  .hf-remocn-terminal-simulator .chrome {
+    height: 48px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 0 18px;
+    background: #111827;
+    color: #94a3b8;
+  }
+  .hf-remocn-terminal-simulator .dot {
+    width: 11px;
+    height: 11px;
+    border-radius: 999px;
+    background: #ef4444;
+    box-shadow:
+      18px 0 #f59e0b,
+      36px 0 #22c55e;
+  }
+  .hf-remocn-terminal-simulator .body {
+    display: grid;
+    grid-template-columns: 210px 1fr;
+    min-height: 340px;
+  }
+  .hf-remocn-terminal-simulator .files {
+    padding: 22px;
+    border-right: 1px solid rgba(148, 163, 184, 0.18);
+    color: #94a3b8;
+  }
+  .hf-remocn-terminal-simulator .editor {
+    padding: 22px;
+    display: grid;
+    gap: 12px;
+  }
+  .hf-remocn-terminal-simulator .line {
+    display: block;
+    height: 16px;
+    border-radius: 999px;
+    background: rgba(228, 228, 231, 0.18);
+    transform: scaleX(var(--hf-line, 1));
+    transform-origin: left center;
+    opacity: var(--hf-line-opacity, 1);
+  }
+  .hf-remocn-terminal-simulator .terminal {
+    padding: 18px 22px 24px;
+    border-top: 1px solid rgba(148, 163, 184, 0.18);
+    color: #86efac;
+    min-height: 78px;
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-terminal-simulator .line', { '--hf-line': 0, '--hf-line-opacity': 0 }, { '--hf-line': 1, '--hf-line-opacity': 1, duration: 0.24, stagger: 0.08, ease: 'power2.out' }, startTime); tl.fromTo('.hf-remocn-terminal-simulator .terminal', { opacity: 0, y: 16 }, { opacity: 1, y: 0, duration: 0.34, ease: 'power2.out' }, startTime + 0.48);
+-->
+```
+
+</Accordion>
+
+## Usage
+
+Open `compositions/components/terminal-simulator.html` and paste its contents into your composition. See the comment header in the file for timeline integration guidance.
+
+{/* hf:generated-footer */}
+
+Tagged `code-animation` `remocn-port`.
+
+## 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/components/testimonial-card.mdx b/docs/catalog/components/testimonial-card.mdx
new file mode 100644
index 0000000000..4e0e5f51b5
--- /dev/null
+++ b/docs/catalog/components/testimonial-card.mdx
@@ -0,0 +1,371 @@
+---
+title: "Testimonial Card"
+description: "Reveals a customer quote at reading pace, then settles its avatar, author name, and handle beneath as a clean proof beat."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/testimonial-card.html"
+  compositionId="testimonial-card"
+  compositionSrc="compositions/components/testimonial-card.html"
+  variables={[{"id":"quote","type":"string","role":"content","label":"Quote","description":"Customer testimonial copy revealed at reading pace.","default":"This changed how we ship."},{"id":"author","type":"string","role":"content","label":"Author","description":"Name attributed to the testimonial.","default":"Ken Tanaka"},{"id":"handle","type":"string","role":"content","label":"Handle","description":"Role or social handle shown beneath the author name.","default":"@ken"},{"id":"rating","type":"number","role":"content","label":"Rating","description":"Visible customer rating from zero to five stars.","default":5,"min":0,"max":5,"step":0.1}]}
+>
+
+```html testimonial-card.html
+<!doctype html>
+<!--
+  testimonial-card: HyperFrames video primitive (ui-props / holdable / prove)
+
+  Concept: a token-themed testimonial card proves a claim in one clean reveal.
+  The rating and quote rise into reading position first, then the avatar,
+  author name, and handle settle beneath with a small stagger.
+
+  Compiled-from evidence: fixture social-proof shelf, GAP evidence from the
+  A1+A2 convergent miss. Both consumer simulations needed a testimonial proof
+  beat, and the fixture freezes reading-pace discipline as its governing law.
+
+  Use when: a scene needs customer testimony to substantiate a product claim
+  without recreating a platform-specific social post.
+
+  Variables:
+    - quote (string, default "This changed how we ship."): testimonial copy.
+    - author (string, default "Ken Tanaka"): attributed customer name.
+    - handle (string, default "@ken"): role or social handle beneath the name.
+    - rating (number, 0 to 5, default 5): visible star rating.
+
+  Envelope (holdable):
+    IN   1.50s fixed quote reveal followed by attribution settle.
+    HOLD elastic and deliberately still for reading.
+    OUT  0.45s fixed release fade.
+    If D is shorter than 1.95s, IN and OUT scale together. The timeline is
+    never time-scaled, and HOLD remains the only elastic phase.
+
+  Sync points:
+    - quote-readable at 0.82s into IN.
+    - attribution-settled at 1.50s, the end of IN.
+    Both offsets compress only with short durations and never enter HOLD.
+
+  Sound cues: none. The proof beat has no discrete impact event.
+
+  Mount contract: this file is a template-wrapped sub-composition. The host
+  owns dimensions. #root fills that box with inset:0 and container-type:size,
+  carries no data-width or data-height, and registers one paused GSAP timeline
+  under the hardcoded composition id "testimonial-card".
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "quote", "type": "string", "role": "content", "label": "Quote", "description": "Customer testimonial copy revealed at reading pace.", "default": "This changed how we ship." },
+    { "id": "author", "type": "string", "role": "content", "label": "Author", "description": "Name attributed to the testimonial.", "default": "Ken Tanaka" },
+    { "id": "handle", "type": "string", "role": "content", "label": "Handle", "description": "Role or social handle shown beneath the author name.", "default": "@ken" },
+    { "id": "rating", "type": "number", "role": "content", "label": "Rating", "description": "Visible customer rating from zero to five stars.", "default": 5, "min": 0, "max": 5, "step": 0.1 }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Testimonial Card</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="testimonial-card" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            background: var(--bg);
+            color: var(--fg);
+            font-family: var(--font-body);
+          }
+
+          .tc-clip {
+            width: 100%;
+            height: 100%;
+            display: grid;
+            place-items: center;
+            padding: 6cqh 6cqw;
+          }
+
+          /* EDIT ZONE: card proportions and type scale. Paint is owned only
+             by theme-contract tokens, and every measurement resolves from
+             the host container. GSAP owns all transforms and opacity. */
+          .tc-card {
+            width: min(86cqw, 128cqh);
+            display: grid;
+            gap: min(4.6cqw, 4.6cqh);
+            padding: min(6.5cqw, 6.5cqh);
+            overflow: hidden;
+            border: 0.16cqh solid var(--border);
+            border-radius: var(--radius);
+            background: var(--surface);
+            box-shadow: 0 3cqh 8cqh color-mix(in srgb, var(--bg) 68%, transparent);
+          }
+
+          .tc-proof {
+            display: grid;
+            gap: min(3.2cqw, 3.2cqh);
+            will-change: transform, opacity;
+          }
+
+          .tc-rating {
+            display: flex;
+            align-items: center;
+            gap: min(2cqw, 2cqh);
+            width: max-content;
+            color: var(--muted);
+            font-family: var(--font-mono);
+            font-size: min(2.4cqw, 2.4cqh);
+            font-weight: 650;
+            line-height: 1;
+          }
+
+          .tc-stars {
+            position: relative;
+            display: inline-block;
+            color: var(--muted);
+            font-size: min(3.4cqw, 3.4cqh);
+            letter-spacing: 0.18em;
+            line-height: 1;
+            white-space: nowrap;
+          }
+
+          .tc-stars-fill {
+            position: absolute;
+            inset: 0 auto 0 0;
+            width: var(--tc-rating-fill);
+            overflow: hidden;
+            /* The earned portion of the rating is the data. Flat ink over the
+               muted track says it by value, with no second hue. */
+            color: var(--fg);
+            white-space: nowrap;
+          }
+
+          .tc-quote {
+            margin: 0;
+            color: var(--fg);
+            font-family: var(--font-display);
+            font-size: min(5.2cqw, 5.2cqh);
+            font-weight: 650;
+            line-height: 1.23;
+            letter-spacing: -0.025em;
+            text-wrap: balance;
+          }
+
+          .tc-attribution {
+            display: grid;
+            grid-template-columns: auto minmax(0, 1fr);
+            grid-template-rows: auto auto;
+            column-gap: min(2.7cqw, 2.7cqh);
+            row-gap: min(0.65cqw, 0.65cqh);
+            align-items: center;
+          }
+
+          .tc-avatar {
+            grid-row: 1 / 3;
+            display: grid;
+            place-items: center;
+            width: min(8.4cqw, 8.4cqh);
+            aspect-ratio: 1;
+            border: 0.16cqh solid color-mix(in srgb, var(--fg) 20%, transparent);
+            border-radius: 50%;
+            /* Placeholder person: a single (front) avatar circle at L1, with
+               the initials knocked out in the ground colour. */
+            background: color-mix(in srgb, var(--fg) 72%, var(--surface));
+            color: var(--bg);
+            font-family: var(--font-display);
+            font-size: min(2.65cqw, 2.65cqh);
+            font-weight: 780;
+            letter-spacing: 0.03em;
+          }
+
+          .tc-author {
+            min-width: 0;
+            align-self: end;
+            color: var(--fg);
+            font-family: var(--font-display);
+            font-size: min(3.2cqw, 3.2cqh);
+            font-weight: 700;
+            line-height: 1.08;
+          }
+
+          .tc-handle {
+            min-width: 0;
+            align-self: start;
+            color: var(--muted);
+            font-size: min(2.35cqw, 2.35cqh);
+            line-height: 1.15;
+          }
+
+          .tc-attribution-item {
+            will-change: transform, opacity;
+          }
+        </style>
+
+        <div
+          id="testimonial-card-clip"
+          class="tc-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <article class="tc-card" aria-label="Customer testimonial">
+            <div class="tc-proof">
+              <div class="tc-rating" role="img" aria-label="5 out of 5 stars">
+                <span class="tc-stars" aria-hidden="true">
+                  ★★★★★
+                  <span class="tc-stars-fill">★★★★★</span>
+                </span>
+                <span class="tc-rating-value" aria-hidden="true">5 / 5</span>
+              </div>
+              <blockquote class="tc-quote"></blockquote>
+            </div>
+
+            <footer class="tc-attribution">
+              <div class="tc-avatar tc-attribution-item" aria-hidden="true"></div>
+              <div class="tc-author tc-attribution-item"></div>
+              <div class="tc-handle tc-attribution-item"></div>
+            </footer>
+          </article>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var compositionId = "testimonial-card";
+            var card = root.querySelector(".tc-card");
+            var proof = root.querySelector(".tc-proof");
+            var quoteEl = root.querySelector(".tc-quote");
+            var avatarEl = root.querySelector(".tc-avatar");
+            var authorEl = root.querySelector(".tc-author");
+            var handleEl = root.querySelector(".tc-handle");
+            var ratingEl = root.querySelector(".tc-rating");
+            var ratingValueEl = root.querySelector(".tc-rating-value");
+            var attributionItems = root.querySelectorAll(".tc-attribution-item");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            /* INVARIANT: getVariables() is the sole owner of content. Missing
+               values use the declared defaults, while intentional empty
+               strings remain empty. Rating zero is valid and cannot fall
+               through to the default. */
+            var quoteText = vars.quote == null ? "This changed how we ship." : String(vars.quote);
+            var authorText = vars.author == null ? "Ken Tanaka" : String(vars.author);
+            var handleText = vars.handle == null ? "@ken" : String(vars.handle);
+            var rawRating = Number(vars.rating);
+            var rating = Number.isFinite(rawRating) ? Math.max(0, Math.min(5, rawRating)) : 5;
+            var ratingText = Number.isInteger(rating) ? String(rating) : rating.toFixed(1);
+            var initials = authorText
+              .trim()
+              .split(/\s+/)
+              .filter(Boolean)
+              .slice(0, 2)
+              .map(function (part) {
+                return part.charAt(0);
+              })
+              .join("")
+              .toUpperCase();
+
+            quoteEl.textContent = quoteText;
+            authorEl.textContent = authorText;
+            handleEl.textContent = handleText;
+            avatarEl.textContent = initials === "" ? "?" : initials;
+            ratingEl.style.setProperty("--tc-rating-fill", rating * 20 + "%");
+            ratingEl.setAttribute("aria-label", ratingText + " out of 5 stars");
+            ratingValueEl.textContent = ratingText + " / 5";
+
+            /* RETIME RANGE: these constants own the complete lifecycle. The
+               reveal uses --ease-standard's GSAP form, power2.out, with the
+               quote first and three attribution items staggered beneath. */
+            var IN_BASE = 1.5;
+            var OUT_BASE = 0.45;
+            var QUOTE_START_BASE = 0.12;
+            var QUOTE_DURATION_BASE = 0.7;
+            var ATTRIBUTION_START_BASE = 0.82;
+            var ATTRIBUTION_DURATION_BASE = 0.56;
+            var ATTRIBUTION_STAGGER_BASE = 0.06;
+            var durationValue = Number(root.dataset.duration);
+            var duration = Number.isFinite(durationValue) && durationValue > 0 ? durationValue : 4;
+            var scale = duration < IN_BASE + OUT_BASE ? duration / (IN_BASE + OUT_BASE) : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var OUT_START = IN + HOLD;
+
+            var tl = gsap.timeline({ paused: true });
+
+            tl.fromTo(
+              proof,
+              { y: "18%", opacity: 0 },
+              {
+                y: "0%",
+                opacity: 1,
+                duration: QUOTE_DURATION_BASE * scale,
+                ease: "power2.out",
+              },
+              QUOTE_START_BASE * scale,
+            );
+            tl.fromTo(
+              attributionItems,
+              { y: "34%", opacity: 0 },
+              {
+                y: "0%",
+                opacity: 1,
+                duration: ATTRIBUTION_DURATION_BASE * scale,
+                stagger: ATTRIBUTION_STAGGER_BASE * scale,
+                ease: "power2.out",
+              },
+              ATTRIBUTION_START_BASE * scale,
+            );
+            tl.to(card, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add testimonial-card" />
+
+That writes one file: `compositions/components/testimonial-card.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/testimonial-card.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `prop` `ui-props` `testimonial` `social-proof` `quote` `prove`.
+
+## 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/components/testimonial-proof-card.mdx b/docs/catalog/components/testimonial-proof-card.mdx
new file mode 100644
index 0000000000..fe45af0a42
--- /dev/null
+++ b/docs/catalog/components/testimonial-proof-card.mdx
@@ -0,0 +1,537 @@
+---
+title: "Testimonial Proof Card"
+description: "A quote card whose testimonial reveals per-line through a soft mask, with an avatar disc (initials default, image slot), mono name and role, an optional company text mark, and one emphasis substring underlined in accent ink after the quote lands."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/testimonial-proof-card.html"
+  compositionId="testimonial-proof-card"
+  compositionSrc="compositions/components/testimonial-proof-card.html"
+  variables={[{"id":"quote","type":"string","role":"content","label":"Quote","description":"The testimonial line. Wraps inside the card; each rendered line reveals through its own mask.","default":"We shipped our launch video in a single afternoon"},{"id":"name","type":"string","role":"content","label":"Name","description":"Attribution name in mono. Also seeds the avatar initials.","default":"Maya Chen"},{"id":"role","type":"string","role":"content","label":"Role","description":"Attribution role in muted mono. Empty hides the line.","default":"Head of Product"},{"id":"company","type":"string","role":"content","label":"Company","description":"Company mark as wide-tracked mono text at the byline end. Empty hides it.","default":"NORTHWIND"},{"id":"emphasis","type":"string","role":"content","label":"Emphasis","description":"First case-insensitive substring match in quote, expanded to whole words, gets the accent underline. Empty disables the draw.","default":"single afternoon"},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Underline and glyph ink from the contract token map.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Optional departure. Default none: the card holds until the frame cuts.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
+>
+
+```html testimonial-proof-card.html
+<!doctype html>
+<!--
+  testimonial-proof-card: HyperFrames video primitive (proof-stats / testimonial)
+
+  A quote card: the quote reveals per measured line through a soft overflow
+  mask, an avatar disc (initials by default, an image via the avatar slot),
+  name and role in mono, an optional company mark as wide-tracked text; one
+  emphasis substring gets an accent underline drawn hand-style after the
+  quote lands (getTotalLength dash, the marker-highlight law). Dead-still
+  hold: nothing breathes, nothing loops.
+
+  Variables:
+    quote (string): the testimonial line. Wraps inside the card; each
+      rendered line reveals through its own mask.
+    name (string): attribution name (mono). Also seeds the avatar initials.
+    role (string): attribution role (mono, muted). Empty hides the line.
+    company (string): company mark as wide-tracked mono text at the byline
+      end. Empty hides it.
+    emphasis (string): first case-insensitive substring match inside quote,
+      expanded to whole words, gets the accent underline. Empty or unmatched
+      disables the draw.
+    accent (green | blue | violet): underline and glyph ink via the contract
+      token map (green --brand, blue --accent, violet --accent-2).
+    exit (none | fade | up, default none): frame roots own transitions;
+      holds end films.
+
+  Envelope, fixed IN and OUT with elastic HOLD only (never time-scaled):
+    CARD_BASE  = 0.50s  card surface settles up
+    LINE_BASE  = 0.60s  per-line rise through the mask, 0.18s stagger
+    BYLINE     = 0.50s  avatar + attribution fade up, overlapping quote end
+    DRAW_BASE  = 0.55s  underline draws after the last line lands
+    HOLD       = max(0, D - phases), completely still
+    OUT_BASE   = 0s for exit none, otherwise 0.45s
+    If D is shorter than the fixed phases, every phase compresses together.
+
+  Slot (before-after-wipe convention): the avatar disc is a named slot,
+  <div class="tq-avatar" data-slot="avatar">. Its default child is the
+  initials span; replace the slot's children in your installed copy with an
+  <img> to show a photo (sized to cover the disc automatically).
+
+  Mount contract: the runtime clones only this template. #root fills the
+  host box, establishes the container query basis, has no data-width or
+  data-height, and registers one paused timeline under the literal
+  testimonial-proof-card key.
+-->
+<html
+  lang="en"
+  data-composition-id="testimonial-proof-card"
+  data-composition-duration="4.5"
+  data-composition-variables='[
+    { "id": "quote", "type": "string", "role": "content", "label": "Quote", "description": "The testimonial line. Wraps inside the card; each rendered line reveals through its own mask.", "default": "We shipped our launch video in a single afternoon" },
+    { "id": "name", "type": "string", "role": "content", "label": "Name", "description": "Attribution name in mono. Also seeds the avatar initials.", "default": "Maya Chen" },
+    { "id": "role", "type": "string", "role": "content", "label": "Role", "description": "Attribution role in muted mono. Empty hides the line.", "default": "Head of Product" },
+    { "id": "company", "type": "string", "role": "content", "label": "Company", "description": "Company mark as wide-tracked mono text at the byline end. Empty hides it.", "default": "NORTHWIND" },
+    { "id": "emphasis", "type": "string", "role": "content", "label": "Emphasis", "description": "First case-insensitive substring match in quote, expanded to whole words, gets the accent underline. Empty disables the draw.", "default": "single afternoon" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Underline and glyph ink from the contract token map.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the card holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Testimonial Proof Card</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="testimonial-proof-card" data-duration="4.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            display: grid;
+            place-items: center;
+            background: var(--bg, #0b0c0e);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .tq-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+          }
+
+          .tq-card {
+            width: min(76cqw, 150cqh);
+            padding: 6cqmin 7cqmin;
+            border-radius: var(--radius, 24px);
+            border: 1px solid color-mix(in srgb, var(--border, #343a46) 60%, transparent);
+            background: color-mix(in srgb, var(--surface, #14171c) 88%, transparent);
+            will-change: transform, opacity;
+          }
+
+          .tq-glyph {
+            font-size: 9cqmin;
+            line-height: 0.6;
+            font-weight: 600;
+            color: var(--tq-accent, var(--brand, #71f5a7));
+            margin-bottom: 2.4cqmin;
+          }
+
+          .tq-quote {
+            margin: 0;
+            font-size: var(--tq-font-size, 5cqmin);
+            font-weight: 600;
+            line-height: 1.28;
+            letter-spacing: -0.02em;
+            text-wrap: balance;
+          }
+
+          /* Soft per-line mask. Negative margins cancel the padding so the
+             expanded clip box (room for descenders and the underline ink
+             below the baseline) never shifts layout. */
+          .tq-line-mask {
+            overflow: hidden;
+            padding: 0.12em 0.24em 0.3em;
+            margin: -0.12em -0.24em -0.3em;
+          }
+
+          .tq-line {
+            will-change: transform, opacity;
+          }
+
+          .tq-em {
+            position: relative;
+            display: inline-block;
+            white-space: nowrap;
+          }
+
+          .tq-em-text {
+            position: relative;
+            z-index: 1;
+          }
+
+          /* Underline box below the emphasized words; explicit width/height
+             (svg is replaced), preserveAspectRatio="none" stretches the
+             authored path so the stroke keeps its hand-swiped nib weight. */
+          .tq-mark {
+            position: absolute;
+            left: -2%;
+            bottom: -0.14em;
+            width: 104%;
+            height: 0.24em;
+            overflow: visible;
+            z-index: 2;
+          }
+
+          .tq-byline {
+            display: flex;
+            align-items: center;
+            gap: 3cqmin;
+            margin-top: 5cqmin;
+            will-change: transform, opacity;
+          }
+
+          .tq-avatar {
+            width: 10cqmin;
+            height: 10cqmin;
+            flex: none;
+            border-radius: 50%;
+            overflow: hidden;
+            display: grid;
+            place-items: center;
+            border: 1px solid color-mix(in srgb, var(--border, #343a46) 70%, transparent);
+            background: color-mix(in srgb, var(--tq-accent, #71f5a7) 16%, var(--surface, #14171c));
+          }
+
+          .tq-avatar img,
+          .tq-avatar video {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+          }
+
+          .tq-initials {
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            font-size: 3.4cqmin;
+            font-weight: 600;
+            letter-spacing: 0.08em;
+            color: var(--fg, #f8fafc);
+          }
+
+          .tq-person {
+            display: grid;
+            gap: 0.8cqmin;
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+          }
+
+          .tq-name {
+            font-size: 2.9cqmin;
+            font-weight: 600;
+            letter-spacing: 0.02em;
+          }
+
+          .tq-role {
+            font-size: 2.4cqmin;
+            color: var(--muted, #94a3b8);
+          }
+
+          .tq-company {
+            margin-left: auto;
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            font-size: 2.3cqmin;
+            letter-spacing: 0.3em;
+            text-transform: uppercase;
+            color: var(--muted, #94a3b8);
+          }
+        </style>
+
+        <div
+          id="testimonial-proof-card-clip"
+          class="tq-clip clip"
+          data-start="0"
+          data-duration="4.5"
+          data-track-index="0"
+        >
+          <figure class="tq-card" style="margin: 0">
+            <div class="tq-glyph" aria-hidden="true">&#8220;</div>
+            <blockquote class="tq-quote" style="margin: 0"></blockquote>
+            <figcaption class="tq-byline">
+              <div class="tq-avatar" data-slot="avatar">
+                <span class="tq-initials"></span>
+              </div>
+              <div class="tq-person">
+                <span class="tq-name"></span>
+                <span class="tq-role"></span>
+              </div>
+              <span class="tq-company"></span>
+            </figcaption>
+          </figure>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            // Literal key: the flattening step strips data-composition-id off
+            // the mounted root, so reading it back would register "null".
+            var compositionId = "testimonial-proof-card";
+            var card = root.querySelector(".tq-card");
+            var quoteEl = root.querySelector(".tq-quote");
+            var bylineEl = root.querySelector(".tq-byline");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            function str(value, fallback) {
+              return (value == null ? fallback : String(value)).trim().replace(/\s+/g, " ");
+            }
+            var quote = str(vars.quote, "We shipped our launch video in a single afternoon");
+            var name = str(vars.name, "Maya Chen");
+            var role = str(vars.role, "Head of Product");
+            var company = str(vars.company, "NORTHWIND");
+            var emphasis = str(vars.emphasis, "single afternoon");
+
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            root.style.setProperty("--tq-accent", accentColors[accent]);
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            // Byline content. Empty strings hide their element.
+            root.querySelector(".tq-name").textContent = name;
+            var roleEl = root.querySelector(".tq-role");
+            if (role) roleEl.textContent = role;
+            else roleEl.setAttribute("hidden", "");
+            var companyEl = root.querySelector(".tq-company");
+            if (company) companyEl.textContent = company;
+            else companyEl.setAttribute("hidden", "");
+
+            // Avatar initials: only when the default initials span is still
+            // in the slot (a user-supplied img replaces the slot children).
+            var initialsEl = root.querySelector(".tq-avatar .tq-initials");
+            if (initialsEl) {
+              var parts = name.split(" ").filter(Boolean);
+              var initials = parts
+                .slice(0, 2)
+                .map(function (part) {
+                  return Array.from(part)[0].toUpperCase();
+                })
+                .join("");
+              initialsEl.textContent = initials;
+            }
+
+            // Emphasis match expanded to whole words so the quote tokenizes
+            // cleanly into word spans (the underline never splits a word).
+            var matchStart = -1;
+            var matchEnd = -1;
+            if (emphasis.length > 0) {
+              var index = quote.toLowerCase().indexOf(emphasis.toLowerCase());
+              if (index >= 0) {
+                matchStart = quote.lastIndexOf(" ", index) + 1;
+                matchEnd = quote.indexOf(" ", index + emphasis.length);
+                if (matchEnd < 0) matchEnd = quote.length;
+              }
+            }
+
+            // Deterministic fit: font size rides 1/sqrt(chars) so the quote
+            // lands around two to three lines at any card width.
+            var characters = Math.max(1, Array.from(quote).length);
+            var fitted = Math.max(3.8, Math.min(7.2, 46 / Math.sqrt(characters)));
+            root.style.setProperty("--tq-font-size", fitted.toFixed(3) + "cqmin");
+
+            // Tokenize into inline-block word spans (emphasis is one nowrap
+            // token), measure wrapped lines, then rebuild one mask per line.
+            var tokens = [];
+            function pushWords(text) {
+              text.split(" ").forEach(function (wordText) {
+                if (!wordText) return;
+                var span = document.createElement("span");
+                span.style.display = "inline-block";
+                span.textContent = wordText;
+                tokens.push(span);
+              });
+            }
+            var pathEl = null;
+            var emEl = null;
+            if (matchStart >= 0) {
+              pushWords(quote.slice(0, matchStart));
+              emEl = document.createElement("span");
+              emEl.className = "tq-em";
+              var svgNS = "http://www.w3.org/2000/svg";
+              var svg = document.createElementNS(svgNS, "svg");
+              svg.setAttribute("class", "tq-mark");
+              svg.setAttribute("viewBox", "0 0 100 12");
+              svg.setAttribute("preserveAspectRatio", "none");
+              svg.setAttribute("aria-hidden", "true");
+              pathEl = document.createElementNS(svgNS, "path");
+              // Authored wobble, marker-highlight underline law: dash reveal
+              // from getTotalLength, never pathLength, never
+              // non-scaling-stroke; the viewBox stretch is the nib feel.
+              pathEl.setAttribute("d", "M 2 7 C 20 4.5, 46 8.5, 66 6 C 80 4.5, 92 7.5, 98 5.5");
+              pathEl.setAttribute("fill", "none");
+              pathEl.setAttribute("stroke-width", "4.5");
+              pathEl.setAttribute("stroke-linecap", "round");
+              pathEl.setAttribute("stroke-linejoin", "round");
+              // style.stroke, not the presentation attribute: var() only
+              // resolves as a CSS value.
+              pathEl.style.stroke = accentColors[accent];
+              svg.appendChild(pathEl);
+              var emText = document.createElement("span");
+              emText.className = "tq-em-text";
+              emText.textContent = quote.slice(matchStart, matchEnd);
+              emEl.appendChild(svg);
+              emEl.appendChild(emText);
+              tokens.push(emEl);
+              pushWords(quote.slice(matchEnd));
+            } else {
+              pushWords(quote);
+            }
+            tokens.forEach(function (token, i) {
+              if (i > 0) quoteEl.appendChild(document.createTextNode(" "));
+              quoteEl.appendChild(token);
+            });
+            quoteEl.setAttribute("aria-label", quote);
+
+            // Group tokens by rendered row, then rebuild per-line masks.
+            var rows = [];
+            var lastTop = null;
+            tokens.forEach(function (token) {
+              var top = token.offsetTop;
+              if (lastTop === null || Math.abs(top - lastTop) > 2) {
+                rows.push([]);
+                lastTop = top;
+              }
+              rows[rows.length - 1].push(token);
+            });
+            quoteEl.textContent = "";
+            var lineEls = rows.map(function (row) {
+              var mask = document.createElement("div");
+              mask.className = "tq-line-mask";
+              var line = document.createElement("div");
+              line.className = "tq-line";
+              row.forEach(function (token, i) {
+                if (i > 0) line.appendChild(document.createTextNode(" "));
+                line.appendChild(token);
+              });
+              mask.appendChild(line);
+              quoteEl.appendChild(mask);
+              return line;
+            });
+
+            // RETIME RANGE: fixed phases; HOLD is the only elastic span.
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4.5"));
+            var CARD_BASE = 0.5;
+            var LINE_BASE = 0.6;
+            var STAG_BASE = 0.18;
+            var LINES_AT_BASE = 0.15;
+            var BYLINE_BASE = 0.5;
+            var DRAW_BASE = 0.55;
+            var OUT_BASE = exit === "none" ? 0 : 0.45;
+            var quoteEndBase =
+              LINES_AT_BASE + Math.max(0, lineEls.length - 1) * STAG_BASE + LINE_BASE;
+            var bylineAtBase = Math.max(0, quoteEndBase - 0.15);
+            var drawAtBase = quoteEndBase + 0.1;
+            var inEndBase = Math.max(
+              CARD_BASE,
+              bylineAtBase + BYLINE_BASE,
+              pathEl ? drawAtBase + DRAW_BASE : 0,
+            );
+            var s = duration < inEndBase + OUT_BASE ? duration / (inEndBase + OUT_BASE) : 1;
+            var OUT = OUT_BASE * s;
+            var OUT_START = duration - OUT;
+
+            gsap.set(card, { opacity: 0, y: "4cqh" });
+            gsap.set(lineEls, { yPercent: 130, opacity: 0 });
+            gsap.set(bylineEl, { opacity: 0, y: "2.5cqh" });
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: the card surface settles up.
+            tl.fromTo(
+              card,
+              { opacity: 0, y: "4cqh" },
+              { opacity: 1, y: "0cqh", duration: CARD_BASE * s, ease: "power3.out" },
+              0,
+            );
+
+            // Quote lines rise through their soft masks, top to bottom.
+            lineEls.forEach(function (line, i) {
+              tl.fromTo(
+                line,
+                { yPercent: 130, opacity: 0 },
+                {
+                  yPercent: 0,
+                  opacity: 1,
+                  duration: LINE_BASE * s,
+                  ease: "power3.out",
+                },
+                (LINES_AT_BASE + i * STAG_BASE) * s,
+              );
+            });
+
+            // Byline fades up, overlapping the last line's landing.
+            tl.fromTo(
+              bylineEl,
+              { opacity: 0, y: "2.5cqh" },
+              { opacity: 1, y: "0cqh", duration: BYLINE_BASE * s, ease: "power3.out" },
+              bylineAtBase * s,
+            );
+
+            // DRAW: the underline after the quote lands; both dash endpoints
+            // explicit so any seek is correct without playing through. At
+            // dashoffset == length the round cap still paints a dot at the
+            // path start, so the ink is opacity 0 until the exact cue frame.
+            if (pathEl) {
+              var length = pathEl.getTotalLength();
+              pathEl.style.strokeDasharray = String(length);
+              gsap.set(pathEl, { strokeDashoffset: length, opacity: 0 });
+              tl.set(pathEl, { opacity: 1 }, drawAtBase * s);
+              tl.fromTo(
+                pathEl,
+                { strokeDashoffset: length },
+                { strokeDashoffset: 0, duration: DRAW_BASE * s, ease: "power2.inOut" },
+                drawAtBase * s,
+              );
+            }
+
+            // HOLD: dead still.
+
+            // OUT: optional departure; exit none holds until the frame cuts.
+            if (exit === "fade") {
+              tl.to(card, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "up") {
+              tl.to(card, { opacity: 0, y: "-6cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add testimonial-proof-card" />
+
+That writes one file: `compositions/components/testimonial-proof-card.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/testimonial-proof-card.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `proof` `testimonial` `quote` `social-proof` `deterministic`.
+
+## 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/components/text-shimmer.mdx b/docs/catalog/components/text-shimmer.mdx
new file mode 100644
index 0000000000..6ed5e6f9ab
--- /dev/null
+++ b/docs/catalog/components/text-shimmer.mdx
@@ -0,0 +1,220 @@
+---
+title: "Text Shimmer"
+description: "A static headline receives one clean specular gradient sweep through its glyphs, then returns to its ordinary text color."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/text-shimmer.html"
+  compositionId="text-shimmer"
+  compositionSrc="compositions/components/text-shimmer.html"
+  variables={[{"id":"text","type":"string","role":"content","label":"Headline","description":"Text receiving the single shimmer pass.","default":"Effortless"},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Hue of the specular shimmer band.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"sweep_at","type":"number","role":"timing","label":"Sweep start","description":"Requested start time for the shimmer sweep.","default":1.2,"min":0.2,"max":2,"step":0.1,"unit":"s"}]}
+>
+
+```html text-shimmer.html
+<!doctype html>
+<!--
+  text-shimmer: HyperFrames video primitive (text effects / drift / emphasize)
+
+  Concept: a headline remains fixed while one narrow specular band crosses
+  its glyphs. The text is clean before and after the pass. There is no
+  entrance, exit, pulse, scale, or supporting decoration.
+
+  Evidence: design-inspiration/INDEX.md and viral-micro-interactions.md,
+  animated text shimmer by jhey Tan, adapted from an infinite CSS loop into
+  one deterministic, seek-driven video beat.
+
+  Variables:
+    - text (string, default "Effortless"): headline copy.
+    - accent (green | blue | violet, default green): shimmer hue.
+    - sweep_at (number, 0.2 to 2 seconds, default 1.2): requested sweep start.
+
+  Envelope: IN includes clean stillness until sweep_at, then one fixed 0.9s
+  sweep. If the mounted duration is too short, the sweep starts earlier and
+  compresses only when it cannot fit. HOLD is elastic and keeps the clean end
+  state alive with an off-glyph drift. OUT is intentionally zero because the
+  treatment returns to ordinary text rather than dismissing it.
+
+  Mount contract: everything renderable lives inside the template. #root is
+  elastic, fills the host box, establishes the container query basis, and has
+  no data-width or data-height. The paused GSAP timeline registers under the
+  hardcoded text-shimmer key.
+-->
+<html
+  lang="en"
+  data-composition-id="text-shimmer"
+  data-composition-duration="3"
+  data-composition-variables='[
+    { "id": "text", "type": "string", "role": "content", "label": "Headline", "description": "Text receiving the single shimmer pass.", "default": "Effortless" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Hue of the specular shimmer band.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "sweep_at", "type": "number", "role": "timing", "label": "Sweep start", "description": "Requested start time for the shimmer sweep.", "default": 1.2, "min": 0.2, "max": 2, "step": 0.1, "unit": "s" }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Text Shimmer</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="text-shimmer" data-duration="3" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            background: var(--bg, transparent);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .ts-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+            padding: var(--space-3, 4cqmin);
+            background: var(--surface, transparent);
+          }
+
+          .ts-headline {
+            --ts-base: var(--fg, #f8fafc);
+            --ts-accent: var(--brand, #22c55e);
+            display: block;
+            max-width: 90cqw;
+            color: transparent;
+            font-size: clamp(28px, 16cqmin, 176px);
+            font-weight: 780;
+            line-height: 0.96;
+            letter-spacing: -0.055em;
+            overflow-wrap: anywhere;
+            text-align: center;
+            background-image: linear-gradient(
+              110deg,
+              var(--ts-base) 0%,
+              var(--ts-base) 40%,
+              color-mix(in srgb, var(--ts-accent) 58%, var(--fg, white)) 47%,
+              var(--fg, white) 50%,
+              color-mix(in srgb, var(--ts-accent) 72%, var(--fg, white)) 53%,
+              var(--ts-base) 60%,
+              var(--ts-base) 100%
+            );
+            background-position: 100% 50%;
+            background-repeat: no-repeat;
+            background-size: 300% 100%;
+            background-clip: text;
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            will-change: background-position;
+          }
+        </style>
+
+        <div
+          id="text-shimmer-clip"
+          class="ts-clip clip"
+          data-start="0"
+          data-duration="3"
+          data-track-index="0"
+        >
+          <span class="ts-headline"></span>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var headline = root.querySelector(".ts-headline");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var text = vars.text == null ? "Effortless" : String(vars.text);
+            var accent = vars.accent === "blue" || vars.accent === "violet" ? vars.accent : "green";
+            var accentTokens = {
+              green: "var(--brand, #22c55e)",
+              blue: "var(--accent, #38bdf8)",
+              violet: "var(--accent-2, #a78bfa)",
+            };
+            var accentColor = accentTokens[accent];
+            var sweepAtValue = vars.sweep_at;
+            var sweepAt =
+              typeof sweepAtValue === "number" && Number.isFinite(sweepAtValue)
+                ? Math.max(0.2, Math.min(2, sweepAtValue))
+                : 1.2;
+
+            headline.textContent = text;
+            headline.style.setProperty("--ts-accent", accentColor);
+
+            var SWEEP_BASE = 0.9;
+            var durationValue = parseFloat(root.dataset.duration || "3");
+            var duration = Number.isFinite(durationValue) ? Math.max(0.001, durationValue) : 3;
+            var SWEEP = Math.min(SWEEP_BASE, duration);
+            var SWEEP_START = Math.min(sweepAt, Math.max(0, duration - SWEEP));
+            var IN = SWEEP_START + SWEEP;
+            var HOLD = Math.max(0, duration - IN);
+
+            var tl = gsap.timeline({ paused: true });
+            tl.fromTo(
+              headline,
+              { backgroundPosition: "100% 50%" },
+              { backgroundPosition: "0% 50%", duration: SWEEP, ease: "sine.inOut" },
+              SWEEP_START,
+            );
+
+            if (HOLD > 0) {
+              tl.to(
+                headline,
+                { backgroundPosition: "4% 50%", duration: HOLD, ease: "sine.inOut" },
+                IN,
+              );
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["text-shimmer"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add text-shimmer" />
+
+That writes one file: `compositions/components/text-shimmer.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/text-shimmer.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `text-effects` `shimmer` `specular` `emphasis`.
+
+## 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/components/text-stagger.mdx b/docs/catalog/components/text-stagger.mdx
new file mode 100644
index 0000000000..5f9dc7142d
--- /dev/null
+++ b/docs/catalog/components/text-stagger.mdx
@@ -0,0 +1,171 @@
+---
+title: "Text Stagger"
+description: "A transitions.dev-inspired text stagger primitive with enter, shimmer, and exit-ready words"
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/text-stagger.html"
+  compositionId="text-stagger"
+  compositionSrc="compositions/components/text-stagger.html"
+  variables={[{"id":"text","type":"string","role":"content","label":"Text","description":"Headline copy. Every whitespace-separated word becomes one staggered span.","default":"Build motion systems fast"},{"id":"size","type":"number","role":"layout","label":"Size","description":"Type size of every word in pixels, clamped to 24-160. Line height stays proportional.","default":74,"min":24,"max":160,"step":1,"unit":"px"},{"id":"tone","type":"enum","role":"style","label":"Tone","description":"Base word colour: ink for light frames, paper for dark ones.","default":"ink","options":[{"value":"ink","label":"Ink"},{"value":"paper","label":"Paper"}]},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Colour of the shimmer the second timeline step sweeps across the words.","default":"blue","options":[{"value":"blue","label":"Blue"},{"value":"green","label":"Green"},{"value":"violet","label":"Violet"}]}]}
+>
+
+```html text-stagger.html
+<!--
+  Text Stagger - transitions.dev-inspired primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Use the timeline
+  integration note at the bottom as the starting point for deterministic GSAP
+  animation.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result into the markup or
+  into a custom property the CSS above consumes. The timeline recipe below is
+  untouched by them: it keeps driving the same rise, blur and shimmer sweep.
+
+    - text (string, default "Build motion systems fast"): the headline. It is
+      split on whitespace and every word becomes its own span, so the word
+      count decides how many steps the stagger has. Blank falls back to the
+      default sentence.
+    - size (number, default 74, clamped to 24-160 px): type size of every
+      word. Line height stays proportional, so the block grows and shrinks as
+      one. A missing or non-numeric value falls back to 74.
+    - tone (ink | paper, default ink): base word colour. ink is near-black for
+      light frames, paper near-white for dark ones. It paints both the resting
+      words and the two dark stops of the shimmer gradient.
+    - accent (blue | green | violet, default blue): the shimmer colour that the
+      second timeline step sweeps across the words. It sits outside the visible
+      band while the words rest, so it only shows once that sweep runs.
+
+  On every default the result is identical to the original: four near-black
+  74px words that rise through a blur and take one sky-blue shimmer pass.
+-->
+
+<div
+  class="hf-transition-text-stagger"
+  data-composition-variables='[
+    {"id": "text", "type": "string", "role": "content", "label": "Text", "description": "Headline copy. Every whitespace-separated word becomes one staggered span.", "default": "Build motion systems fast"},
+    {"id": "size", "type": "number", "role": "layout", "label": "Size", "description": "Type size of every word in pixels, clamped to 24-160. Line height stays proportional.", "default": 74, "min": 24, "max": 160, "step": 1, "unit": "px"},
+    {"id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Base word colour: ink for light frames, paper for dark ones.", "default": "ink", "options": [{"value": "ink", "label": "Ink"}, {"value": "paper", "label": "Paper"}]},
+    {"id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Colour of the shimmer the second timeline step sweeps across the words.", "default": "blue", "options": [{"value": "blue", "label": "Blue"}, {"value": "green", "label": "Green"}, {"value": "violet", "label": "Violet"}]}
+  ]'
+>
+  <span>Build</span>
+  <span>motion</span>
+  <span>systems</span>
+  <span>fast</span>
+</div>
+
+<style>
+  .hf-transition-text-stagger {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.24em;
+    color: var(--hf-stagger-ink, #111827);
+    font:
+      900 74px/0.95 Inter,
+      system-ui,
+      sans-serif;
+    font-size: var(--hf-stagger-size, 74px);
+    letter-spacing: -0.045em;
+  }
+  .hf-transition-text-stagger span {
+    display: inline-block;
+    background: linear-gradient(
+      90deg,
+      var(--hf-stagger-ink, #111827),
+      var(--hf-stagger-ink, #111827),
+      var(--hf-stagger-accent, #38bdf8),
+      var(--hf-stagger-ink, #111827)
+    );
+    background-size: 240% 100%;
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    will-change: transform, opacity, filter, background-position;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    var DEFAULT_TEXT = "Build motion systems fast";
+    var tones = { ink: "#111827", paper: "#f8fafc" };
+    var accents = { blue: "#38bdf8", green: "#34d399", violet: "#a78bfa" };
+
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var words = String(vars.text == null ? DEFAULT_TEXT : vars.text)
+      .split(/\s+/)
+      .filter(function (word) {
+        return word.length > 0;
+      });
+    if (words.length === 0) words = DEFAULT_TEXT.split(" ");
+
+    // Number(null) is 0, so null has to miss the numeric branch and clamp back
+    // to the declared default instead of snapping to the minimum.
+    var size = typeof vars.size === "number" ? vars.size : parseFloat(vars.size);
+    if (!isFinite(size)) size = 74;
+    size = Math.min(160, Math.max(24, size));
+
+    var tone = tones[pick(tones, vars.tone, "ink")];
+    var accent = accents[pick(accents, vars.accent, "blue")];
+
+    var roots = document.querySelectorAll(".hf-transition-text-stagger");
+    for (var i = 0; i < roots.length; i += 1) {
+      var root = roots[i];
+      root.style.setProperty("--hf-stagger-size", size + "px");
+      root.style.setProperty("--hf-stagger-ink", tone);
+      root.style.setProperty("--hf-stagger-accent", accent);
+      // Rebuilt without whitespace between the spans: whitespace-only text
+      // between flex items is not rendered, so this matches the markup above.
+      root.textContent = "";
+      for (var w = 0; w < words.length; w += 1) {
+        var span = document.createElement("span");
+        span.textContent = words[w];
+        root.appendChild(span);
+      }
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-transition-text-stagger span', { opacity: 0, y: 48, filter: 'blur(14px)' }, { opacity: 1, y: 0, filter: 'blur(0px)', duration: 0.54, stagger: 0.09, ease: 'power3.out' }, 0.35);
+  tl.to('.hf-transition-text-stagger span', { backgroundPosition: '100% 0%', duration: 0.72, stagger: 0.04, ease: 'power2.inOut' }, 1.05);
+-->
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add text-stagger" />
+
+That writes one file: `compositions/components/text-stagger.html`.
+
+## Usage
+
+Open `compositions/components/text-stagger.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+
+{/* hf:generated-footer */}
+
+Tagged `video-primitive` `transition-primitive` `transitions-dev-port` `text` `stagger`.
+
+## 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/components/text-state-swap.mdx b/docs/catalog/components/text-state-swap.mdx
new file mode 100644
index 0000000000..5f88e45e95
--- /dev/null
+++ b/docs/catalog/components/text-state-swap.mdx
@@ -0,0 +1,152 @@
+---
+title: "Text State Swap"
+description: "A text state swap primitive with outgoing blur and incoming lift"
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/text-state-swap.html"
+  compositionId="text-state-swap"
+  compositionSrc="compositions/components/text-state-swap.html"
+  variables={[{"id":"from-text","type":"string","role":"content","label":"From text","description":"The outgoing label, on screen before the swap.","default":"Saving draft"},{"id":"to-text","type":"string","role":"content","label":"To text","description":"The incoming label, on screen after the swap. It rests hidden until the timeline reveals it.","default":"Saved"},{"id":"distance","type":"enum","role":"motion","label":"Distance","description":"Scales the vertical offset the timeline drives, so each label covers a shorter or longer run in the same time.","default":"standard","options":[{"value":"close","label":"Close"},{"value":"standard","label":"Standard"},{"value":"far","label":"Far"}]},{"id":"tone","type":"enum","role":"style","label":"Tone","description":"Label colour: ink for light frames, paper for dark ones, accent rides --brand.","default":"ink","options":[{"value":"ink","label":"Ink"},{"value":"paper","label":"Paper"},{"value":"accent","label":"Accent"}]}]}
+>
+
+```html text-state-swap.html
+<!--
+  Text State Swap - transitions.dev-inspired primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Use the timeline
+  integration note at the bottom as the starting point for deterministic GSAP
+  animation.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result into the markup or
+  into a custom property the CSS above consumes. The timeline recipe below is
+  untouched by them: it keeps driving one offset and one blur, and these decide
+  what that offset means on screen.
+
+    - from-text (string, default "Saving draft"): the outgoing label, on screen
+      before the swap. Blank falls back to the default.
+    - to-text (string, default "Saved"): the incoming label, on screen after the
+      swap. It rests at zero opacity, so it only shows once the timeline reveals
+      it. Blank falls back to the default.
+    - distance (close | standard | far, default standard): scales the vertical
+      offset the timeline drives, so the outgoing label leaves further and the
+      incoming label starts further below, in the same time. Both labels rest at
+      their settled position on every setting, so this only changes the middle
+      of the swap.
+    - tone (ink | paper | accent, default ink): label colour for both states.
+      ink is near-black for light frames, paper near-white for dark ones, accent
+      rides --brand.
+
+  On every default the result is identical to the original: near-black
+  "Saving draft" lifts 18px through an 8px blur while "Saved" rises into place.
+-->
+
+<div
+  class="hf-transition-text-state-swap"
+  data-composition-variables='[
+    {"id": "from-text", "type": "string", "role": "content", "label": "From text", "description": "The outgoing label, on screen before the swap.", "default": "Saving draft"},
+    {"id": "to-text", "type": "string", "role": "content", "label": "To text", "description": "The incoming label, on screen after the swap. It rests hidden until the timeline reveals it.", "default": "Saved"},
+    {"id": "distance", "type": "enum", "role": "motion", "label": "Distance", "description": "Scales the vertical offset the timeline drives, so each label covers a shorter or longer run in the same time.", "default": "standard", "options": [{"value": "close", "label": "Close"}, {"value": "standard", "label": "Standard"}, {"value": "far", "label": "Far"}]},
+    {"id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Label colour: ink for light frames, paper for dark ones, accent rides --brand.", "default": "ink", "options": [{"value": "ink", "label": "Ink"}, {"value": "paper", "label": "Paper"}, {"value": "accent", "label": "Accent"}]}
+  ]'
+>
+  <span class="from">Saving draft</span><span class="to">Saved</span>
+</div>
+
+<style>
+  .hf-transition-text-state-swap {
+    position: relative;
+    width: 250px;
+    height: 36px;
+    color: var(--hf-text-color, #18181b);
+    font:
+      900 28px/1 Inter,
+      system-ui,
+      sans-serif;
+  }
+  .hf-transition-text-state-swap span {
+    position: absolute;
+    left: 0;
+    top: 0;
+    filter: blur(var(--hf-text-blur, 0px));
+    transform: translateY(calc(var(--hf-text-y, 0px) * var(--hf-text-reach, 1)));
+    will-change: transform, filter, opacity;
+  }
+  .hf-transition-text-state-swap .to {
+    opacity: 0;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    var reaches = { close: 0.5, standard: 1, far: 1.85 };
+    var tones = {
+      ink: "#18181b",
+      paper: "#fafafa",
+      accent: "var(--brand, #34d399)",
+    };
+
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    function text(value, fallback) {
+      var resolved = value == null ? "" : String(value).trim();
+      return resolved.length > 0 ? resolved : fallback;
+    }
+
+    var fromText = text(vars["from-text"], "Saving draft");
+    var toText = text(vars["to-text"], "Saved");
+    var reach = reaches[pick(reaches, vars.distance, "standard")];
+    var tone = tones[pick(tones, vars.tone, "ink")];
+
+    var roots = document.querySelectorAll(".hf-transition-text-state-swap");
+    for (var i = 0; i < roots.length; i += 1) {
+      var root = roots[i];
+      root.style.setProperty("--hf-text-reach", String(reach));
+      root.style.setProperty("--hf-text-color", tone);
+      root.querySelector(".from").textContent = fromText;
+      root.querySelector(".to").textContent = toText;
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.to('.hf-transition-text-state-swap .from', { opacity: 0, '--hf-text-y': '-18px', '--hf-text-blur': '8px', duration: 0.18, ease: 'power2.in' }, startTime); tl.fromTo('.hf-transition-text-state-swap .to', { opacity: 0, '--hf-text-y': '18px', '--hf-text-blur': '8px' }, { opacity: 1, '--hf-text-y': '0px', '--hf-text-blur': '0px', duration: 0.26, ease: 'power2.out' }, startTime + 0.12);
+-->
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add text-state-swap" />
+
+That writes one file: `compositions/components/text-state-swap.html`.
+
+## Usage
+
+Open `compositions/components/text-state-swap.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+
+{/* hf:generated-footer */}
+
+Tagged `video-primitive` `transition-primitive` `transitions-dev-port` `text` `swap`.
+
+## 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/components/texture-mask-text.mdx b/docs/catalog/components/texture-mask-text.mdx
index bda1928dc4..7774b1a675 100644
--- a/docs/catalog/components/texture-mask-text.mdx
+++ b/docs/catalog/components/texture-mask-text.mdx
@@ -3,6 +3,8 @@ title: "Texture Mask Text"
 description: "CSS luminance masks that cut holes through letterforms - 66 pre-built texture masks from ambientCG PBR color maps"
 ---
 
+import { InstallCommand } from "/snippets/install-command.jsx";
+
 <div className="hf-texture-preview-panel">
   <div className="hf-texture-preview-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/brick.png')" }}>
     <div className="hf-texture-preview-label">Brick</div>
@@ -32,18 +34,397 @@ description: "CSS luminance masks that cut holes through letterforms - 66 pre-bu
 
 ## Install
 
-```bash Terminal
-npx hyperframes add texture-mask-text
-```
+<InstallCommand command="npx hyperframes add texture-mask-text" />
 
 That writes `compositions/components/texture-mask-text/texture-mask-text.html`, plus 66 supporting files under `assets/texture-mask-text/masks/`.
 
-## Paste it into your composition
+## Source
+
+<Accordion title={`texture-mask-text.html`}>
+
+```html
+<!--
+  Texture Mask Text - CSS luminance masks that cut holes through letterforms.
+
+  Usage: add class="hf-texture-text hf-texture-{name}" to any text element.
+  Paste the real style element near the bottom of this file into your composition's HTML once.
+  Texture PNGs install to assets/texture-mask-text/masks; these CSS classes
+  reference them with project-root URLs so the CSS block can be pasted
+  into any composition.
+
+  Available textures (66 total):
+    Masonry:
+      hf-texture-brick                - mortar line patterns
+      hf-texture-bricks-104           - ambientCG Bricks104
+      hf-texture-bricks-102           - ambientCG Bricks102
+      hf-texture-bricks-101           - ambientCG Bricks101
+      hf-texture-bricks-075-a         - ambientCG Bricks075A
+      hf-texture-concrete             - streaked channel cuts
+      hf-texture-concrete-034         - ambientCG Concrete034
+      hf-texture-concrete-047-a       - ambientCG Concrete047A
+      hf-texture-concrete-046         - ambientCG Concrete046
+      hf-texture-concrete-042-a       - ambientCG Concrete042A
+      hf-texture-plaster-001          - ambientCG Plaster001
+      hf-texture-painted-plaster-017  - ambientCG PaintedPlaster017
+
+    Stone:
+      hf-texture-rock                 - sharp hard cutouts
+      hf-texture-rock-063             - ambientCG Rock063
+      hf-texture-rock-058             - ambientCG Rock058
+      hf-texture-onyx                 - flowing marble veins
+      hf-texture-marble-012           - ambientCG Marble012
+      hf-texture-marble-016           - ambientCG Marble016
+      hf-texture-travertine-009       - ambientCG Travertine009
+      hf-texture-paving-stones-150    - ambientCG PavingStones150
+      hf-texture-paving-stones-138    - ambientCG PavingStones138
+      hf-texture-tiles-138            - ambientCG Tiles138
+
+    Ground / road:
+      hf-texture-ground-103           - ambientCG Ground103
+      hf-texture-ground-037           - ambientCG Ground037
+      hf-texture-ground-054           - ambientCG Ground054
+      hf-texture-ground-104           - ambientCG Ground104
+      hf-texture-ground-068           - ambientCG Ground068
+      hf-texture-ground-080           - ambientCG Ground080
+      hf-texture-road-012-a           - ambientCG Road012A
+      hf-texture-road-008-a           - ambientCG Road008A
+      hf-texture-road-007             - ambientCG Road007
+      hf-texture-road-013-a           - ambientCG Road013A
+      hf-texture-road-012-b           - ambientCG Road012B
+      hf-texture-road-009-c           - ambientCG Road009C
+      hf-texture-asphalt-031          - ambientCG Asphalt031
+
+    Wood:
+      hf-texture-wood                 - horizontal grain slices
+      hf-texture-wood-094             - ambientCG Wood094
+      hf-texture-wood-092             - ambientCG Wood092
+      hf-texture-wood-051             - ambientCG Wood051
+      hf-texture-wood-066             - ambientCG Wood066
+      hf-texture-wood-049             - ambientCG Wood049
+      hf-texture-wood-058             - ambientCG Wood058
+      hf-texture-wood-floor-051       - ambientCG WoodFloor051
+      hf-texture-wood-floor-064       - ambientCG WoodFloor064
+      hf-texture-wood-floor-070       - ambientCG WoodFloor070
+      hf-texture-bark-014             - ambientCG Bark014
 
-Open `compositions/components/texture-mask-text/texture-mask-text.html`. Paste the real `<style>` element near the bottom into
-your composition once. It defines `hf-texture-text` and every `hf-texture-*` class.
+    Metal:
+      hf-texture-metal                - rust and pit erosion
+      hf-texture-metal-049-a          - ambientCG Metal049A
+      hf-texture-metal-055-a          - ambientCG Metal055A
+      hf-texture-metal-046-b          - ambientCG Metal046B
+      hf-texture-metal-061-b          - ambientCG Metal061B
+      hf-texture-metal-048-a          - ambientCG Metal048A
+      hf-texture-metal-032            - ambientCG Metal032
+      hf-texture-metal-041-a          - ambientCG Metal041A
+      hf-texture-metal-038            - ambientCG Metal038
+      hf-texture-diamond-plate-009    - ambientCG DiamondPlate009
 
-Leave the texture PNGs in `assets/texture-mask-text/masks/`. The CSS looks for them there.
+    Organic / soft:
+      hf-texture-lava                 - smooth organic erosion
+      hf-texture-grass-005            - ambientCG Grass005
+      hf-texture-grass-001            - ambientCG Grass001
+      hf-texture-grass-004            - ambientCG Grass004
+      hf-texture-carpet               - fine repeating weave
+      hf-texture-fabric-083           - ambientCG Fabric083
+      hf-texture-snow                 - soft patchy dissolve
+      hf-texture-snow-015             - ambientCG Snow015
+      hf-texture-leather-037          - ambientCG Leather037
+      hf-texture-fabric-080           - ambientCG Fabric080
+
+  Custom properties:
+    --mask-size       cover     CSS mask-size
+    --mask-position   center    CSS mask-position
+    --mask-contrast   1         filter contrast to sharpen/soften edges
+
+  Custom texture (set mask-image directly, not via custom property):
+    <div class="hf-texture-text" style="-webkit-mask-image: url('my-texture.png'); mask-image: url('my-texture.png')">TEXT</div>
+
+  Drop shadow (follows masked contour, not bounding box):
+    <div style="filter: drop-shadow(2px 3px 4px rgba(0,0,0,0.3))">
+      <div class="hf-texture-text hf-texture-lava">TEXT</div>
+    </div>
+-->
+
+<style>
+  .hf-texture-text {
+    color: #fff;
+    -webkit-mask-size: var(--mask-size, cover);
+    mask-size: var(--mask-size, cover);
+    -webkit-mask-position: var(--mask-position, center);
+    mask-position: var(--mask-position, center);
+    -webkit-mask-mode: luminance;
+    mask-mode: luminance;
+    filter: contrast(var(--mask-contrast, 1));
+  }
+
+  .hf-texture-lava {
+    -webkit-mask-image: url("/assets/texture-mask-text/masks/lava.png");
+    mask-image: url("/assets/texture-mask-text/masks/lava.png");
+  }
+  .hf-texture-rock {
+    -webkit-mask-image: url("/assets/texture-mask-text/masks/rock.png");
+    mask-image: url("/assets/texture-mask-text/masks/rock.png");
+  }
+  .hf-texture-concrete {
+    -webkit-mask-image: url("/assets/texture-mask-text/masks/concrete.png");
+    mask-image: url("/assets/texture-mask-text/masks/concrete.png");
+  }
+  .hf-texture-brick {
+    -webkit-mask-image: url("/assets/texture-mask-text/masks/brick.png");
+    mask-image: url("/assets/texture-mask-text/masks/brick.png");
+  }
+  .hf-texture-wood {
+    -webkit-mask-image: url("/assets/texture-mask-text/masks/wood.png");
+    mask-image: url("/assets/texture-mask-text/masks/wood.png");
+  }
+  .hf-texture-onyx {
+    -webkit-mask-image: url("/assets/texture-mask-text/masks/onyx.png");
+    mask-image: url("/assets/texture-mask-text/masks/onyx.png");
+  }
+  .hf-texture-carpet {
+    -webkit-mask-image: url("/assets/texture-mask-text/masks/carpet.png");
+    mask-image: url("/assets/texture-mask-text/masks/carpet.png");
+  }
+  .hf-texture-metal {
+    -webkit-mask-image: url("/assets/texture-mask-text/masks/metal.png");
+    mask-image: url("/assets/texture-mask-text/masks/metal.png");
+  }
+  .hf-texture-snow {
+    -webkit-mask-image: url("/assets/texture-mask-text/masks/snow.png");
+    mask-image: url("/assets/texture-mask-text/masks/snow.png");
+  }
+  .hf-texture-bricks-104 {
+    -webkit-mask-image: url("/assets/texture-mask-text/masks/bricks-104.png");
+    mask-image: url("/assets/texture-mask-text/masks/bricks-104.png");
+  }
+  .hf-texture-ground-103 {
+    -webkit-mask-image: url("/assets/texture-mask-text/masks/ground-103.png");
+    mask-image: url("/assets/texture-mask-text/masks/ground-103.png");
+  }
+  .hf-texture-grass-005 {
+    -webkit-mask-image: url("/assets/texture-mask-text/masks/grass-005.png");
+    mask-image: url("/assets/texture-mask-text/masks/grass-005.png");
+  }
+  .hf-texture-rock-063 {
+    -webkit-mask-image: url("/assets/texture-mask-text/masks/rock-063.png");
+    mask-image: url("/assets/texture-mask-text/masks/rock-063.png");
+  }
+  .hf-texture-wood-094 {
+    -webkit-mask-image: url("/assets/texture-mask-text/masks/wood-094.png");
+    mask-image: url("/assets/texture-mask-text/masks/wood-094.png");
+  }
+  .hf-texture-road-012-a {
+    -webkit-mask-image: url("/assets/texture-mask-text/masks/road-012-a.png");
+    mask-image: url("/assets/texture-mask-text/masks/road-012-a.png");
+  }
+  .hf-texture-wood-092 {
+    -webkit-mask-image: url("/assets/texture-mask-text/masks/wood-092.png");
+    mask-image: url("/assets/texture-mask-text/masks/wood-092.png");
+  }
+  .hf-texture-metal-049-a {
+    -webkit-mask-image: url("/assets/texture-mask-text/masks/metal-049-a.png");
+    mask-image: url("/assets/texture-mask-text/masks/metal-049-a.png");
+  }
+  .hf-texture-wood-floor-051 {
+    -webkit-mask-image: url("/assets/texture-mask-text/masks/wood-floor-051.png");
+    mask-image: url("/assets/texture-mask-text/masks/wood-floor-051.png");
+  }
+  .hf-texture-paving-stones-150 {
+    -webkit-mask-image: url("/assets/texture-mask-text/masks/paving-stones-150.png");
+    mask-image: url("/assets/texture-mask-text/masks/paving-stones-150.png");
+  }
+  .hf-texture-road-008-a {
+    -webkit-mask-image: url("/assets/texture-mask-text/masks/road-008-a.png");
+    mask-image: url("/assets/texture-mask-text/masks/road-008-a.png");
+  }
+  .hf-texture-road-007 {
+    -webkit-mask-image: url("/assets/texture-mask-text/masks/road-007.png");
+    mask-image: url("/assets/texture-mask-text/masks/road-007.png");
+  }
+  .hf-texture-metal-055-a {
+    -webkit-mask-image: url("/assets/texture-mask-text/masks/metal-055-a.png");
+    mask-image: url("/assets/texture-mask-text/masks/metal-055-a.png");
+  }
+  .hf-texture-concrete-034 {
+    -webkit-mask-image: url("/assets/texture-mask-text/masks/concrete-034.png");
+    mask-image: url("/assets/texture-mask-text/masks/concrete-034.png");
+  }
+  .hf-texture-grass-001 {
+    -webkit-mask-image: url("/assets/texture-mask-text/masks/grass-001.png");
+    mask-image: url("/assets/texture-mask-text/masks/grass-001.png");
+  }
+  .hf-texture-wood-051 {
+    -webkit-mask-image: url("/assets/texture-mask-text/masks/wood-051.png");
+    mask-image: url("/assets/texture-mask-text/masks/wood-051.png");
+  }
+  .hf-texture-asphalt-031 {
+    -webkit-mask-image: url("/assets/texture-mask-text/masks/asphalt-031.png");
+    mask-image: url("/assets/texture-mask-text/masks/asphalt-031.png");
+  }
+  .hf-texture-wood-floor-064 {
+    -webkit-mask-image: url("/assets/texture-mask-text/masks/wood-floor-064.png");
+    mask-image: url("/assets/texture-mask-text/masks/wood-floor-064.png");
+  }
+  .hf-texture-concrete-047-a {
+    -webkit-mask-image: url("/assets/texture-mask-text/masks/concrete-047-a.png");
+    mask-image: url("/assets/texture-mask-text/masks/concrete-047-a.png");
+  }
+  .hf-texture-metal-046-b {
+    -webkit-mask-image: url("/assets/texture-mask-text/masks/metal-046-b.png");
+    mask-image: url("/assets/texture-mask-text/masks/metal-046-b.png");
+  }
+  .hf-texture-grass-004 {
+    -webkit-mask-image: url("/assets/texture-mask-text/masks/grass-004.png");
+    mask-image: url("/assets/texture-mask-text/masks/grass-004.png");
+  }
+  .hf-texture-marble-012 {
+    -webkit-mask-image: url("/assets/texture-mask-text/masks/marble-012.png");
+    mask-image: url("/assets/texture-mask-text/masks/marble-012.png");
+  }
+  .hf-texture-ground-037 {
+    -webkit-mask-image: url("/assets/texture-mask-text/masks/ground-037.png");
+    mask-image: url("/assets/texture-mask-text/masks/ground-037.png");
+  }
+  .hf-texture-tiles-138 {
+    -webkit-mask-image: url("/assets/texture-mask-text/masks/tiles-138.png");
+    mask-image: url("/assets/texture-mask-text/masks/tiles-138.png");
+  }
+  .hf-texture-wood-066 {
+    -webkit-mask-image: url("/assets/texture-mask-text/masks/wood-066.png");
+    mask-image: url("/assets/texture-mask-text/masks/wood-066.png");
+  }
+  .hf-texture-concrete-046 {
+    -webkit-mask-image: url("/assets/texture-mask-text/masks/concrete-046.png");
+    mask-image: url("/assets/texture-mask-text/masks/concrete-046.png");
+  }
+  .hf-texture-wood-049 {
+    -webkit-mask-image: url("/assets/texture-mask-text/masks/wood-049.png");
+    mask-image: url("/assets/texture-mask-text/masks/wood-049.png");
+  }
+  .hf-texture-road-013-a {
+    -webkit-mask-image: url("/assets/texture-mask-text/masks/road-013-a.png");
+    mask-image: url("/assets/texture-mask-text/masks/road-013-a.png");
+  }
+  .hf-texture-plaster-001 {
+    -webkit-mask-image: url("/assets/texture-mask-text/masks/plaster-001.png");
+    mask-image: url("/assets/texture-mask-text/masks/plaster-001.png");
+  }
+  .hf-texture-snow-015 {
+    -webkit-mask-image: url("/assets/texture-mask-text/masks/snow-015.png");
+    mask-image: url("/assets/texture-mask-text/masks/snow-015.png");
+  }
+  .hf-texture-road-012-b {
+    -webkit-mask-image: url("/assets/texture-mask-text/masks/road-012-b.png");
+    mask-image: url("/assets/texture-mask-text/masks/road-012-b.png");
+  }
+  .hf-texture-concrete-042-a {
+    -webkit-mask-image: url("/assets/texture-mask-text/masks/concrete-042-a.png");
+    mask-image: url("/assets/texture-mask-text/masks/concrete-042-a.png");
+  }
+  .hf-texture-bricks-102 {
+    -webkit-mask-image: url("/assets/texture-mask-text/masks/bricks-102.png");
+    mask-image: url("/assets/texture-mask-text/masks/bricks-102.png");
+  }
+  .hf-texture-rock-058 {
+    -webkit-mask-image: url("/assets/texture-mask-text/masks/rock-058.png");
+    mask-image: url("/assets/texture-mask-text/masks/rock-058.png");
+  }
+  .hf-texture-wood-floor-070 {
+    -webkit-mask-image: url("/assets/texture-mask-text/masks/wood-floor-070.png");
+    mask-image: url("/assets/texture-mask-text/masks/wood-floor-070.png");
+  }
+  .hf-texture-bricks-101 {
+    -webkit-mask-image: url("/assets/texture-mask-text/masks/bricks-101.png");
+    mask-image: url("/assets/texture-mask-text/masks/bricks-101.png");
+  }
+  .hf-texture-travertine-009 {
+    -webkit-mask-image: url("/assets/texture-mask-text/masks/travertine-009.png");
+    mask-image: url("/assets/texture-mask-text/masks/travertine-009.png");
+  }
+  .hf-texture-ground-054 {
+    -webkit-mask-image: url("/assets/texture-mask-text/masks/ground-054.png");
+    mask-image: url("/assets/texture-mask-text/masks/ground-054.png");
+  }
+  .hf-texture-wood-058 {
+    -webkit-mask-image: url("/assets/texture-mask-text/masks/wood-058.png");
+    mask-image: url("/assets/texture-mask-text/masks/wood-058.png");
+  }
+  .hf-texture-ground-104 {
+    -webkit-mask-image: url("/assets/texture-mask-text/masks/ground-104.png");
+    mask-image: url("/assets/texture-mask-text/masks/ground-104.png");
+  }
+  .hf-texture-painted-plaster-017 {
+    -webkit-mask-image: url("/assets/texture-mask-text/masks/painted-plaster-017.png");
+    mask-image: url("/assets/texture-mask-text/masks/painted-plaster-017.png");
+  }
+  .hf-texture-paving-stones-138 {
+    -webkit-mask-image: url("/assets/texture-mask-text/masks/paving-stones-138.png");
+    mask-image: url("/assets/texture-mask-text/masks/paving-stones-138.png");
+  }
+  .hf-texture-ground-068 {
+    -webkit-mask-image: url("/assets/texture-mask-text/masks/ground-068.png");
+    mask-image: url("/assets/texture-mask-text/masks/ground-068.png");
+  }
+  .hf-texture-bricks-075-a {
+    -webkit-mask-image: url("/assets/texture-mask-text/masks/bricks-075-a.png");
+    mask-image: url("/assets/texture-mask-text/masks/bricks-075-a.png");
+  }
+  .hf-texture-ground-080 {
+    -webkit-mask-image: url("/assets/texture-mask-text/masks/ground-080.png");
+    mask-image: url("/assets/texture-mask-text/masks/ground-080.png");
+  }
+  .hf-texture-road-009-c {
+    -webkit-mask-image: url("/assets/texture-mask-text/masks/road-009-c.png");
+    mask-image: url("/assets/texture-mask-text/masks/road-009-c.png");
+  }
+  .hf-texture-bark-014 {
+    -webkit-mask-image: url("/assets/texture-mask-text/masks/bark-014.png");
+    mask-image: url("/assets/texture-mask-text/masks/bark-014.png");
+  }
+  .hf-texture-marble-016 {
+    -webkit-mask-image: url("/assets/texture-mask-text/masks/marble-016.png");
+    mask-image: url("/assets/texture-mask-text/masks/marble-016.png");
+  }
+  .hf-texture-fabric-083 {
+    -webkit-mask-image: url("/assets/texture-mask-text/masks/fabric-083.png");
+    mask-image: url("/assets/texture-mask-text/masks/fabric-083.png");
+  }
+  .hf-texture-metal-061-b {
+    -webkit-mask-image: url("/assets/texture-mask-text/masks/metal-061-b.png");
+    mask-image: url("/assets/texture-mask-text/masks/metal-061-b.png");
+  }
+  .hf-texture-metal-048-a {
+    -webkit-mask-image: url("/assets/texture-mask-text/masks/metal-048-a.png");
+    mask-image: url("/assets/texture-mask-text/masks/metal-048-a.png");
+  }
+  .hf-texture-metal-032 {
+    -webkit-mask-image: url("/assets/texture-mask-text/masks/metal-032.png");
+    mask-image: url("/assets/texture-mask-text/masks/metal-032.png");
+  }
+  .hf-texture-metal-041-a {
+    -webkit-mask-image: url("/assets/texture-mask-text/masks/metal-041-a.png");
+    mask-image: url("/assets/texture-mask-text/masks/metal-041-a.png");
+  }
+  .hf-texture-metal-038 {
+    -webkit-mask-image: url("/assets/texture-mask-text/masks/metal-038.png");
+    mask-image: url("/assets/texture-mask-text/masks/metal-038.png");
+  }
+  .hf-texture-diamond-plate-009 {
+    -webkit-mask-image: url("/assets/texture-mask-text/masks/diamond-plate-009.png");
+    mask-image: url("/assets/texture-mask-text/masks/diamond-plate-009.png");
+  }
+  .hf-texture-leather-037 {
+    -webkit-mask-image: url("/assets/texture-mask-text/masks/leather-037.png");
+    mask-image: url("/assets/texture-mask-text/masks/leather-037.png");
+  }
+  .hf-texture-fabric-080 {
+    -webkit-mask-image: url("/assets/texture-mask-text/masks/fabric-080.png");
+    mask-image: url("/assets/texture-mask-text/masks/fabric-080.png");
+  }
+</style>
+```
+
+</Accordion>
 
 ## Ask an agent for it
 
@@ -478,6 +859,10 @@ window.__timelines["my-composition"] = tl;
   </div>
 </div>
 
+## Usage
+
+After `npx hyperframes add texture-mask-text`, the installed snippet lives at `compositions/components/texture-mask-text/texture-mask-text.html` inside your current HyperFrames project. Open that file and paste the real `<style>` element near the bottom into your composition once; it defines `hf-texture-text` and every `hf-texture-*` class used by the examples above. Keep the installed texture PNGs in `assets/texture-mask-text/masks/`; the CSS references them with project-root URLs.
+
 {/* hf:generated-footer */}
 
 Tagged `text` `text-effect` `effect` `texture` `mask`.
diff --git a/docs/catalog/components/three-orbiting-cards.mdx b/docs/catalog/components/three-orbiting-cards.mdx
new file mode 100644
index 0000000000..af3248e59a
--- /dev/null
+++ b/docs/catalog/components/three-orbiting-cards.mdx
@@ -0,0 +1,154 @@
+---
+title: "Three Orbiting Cards"
+description: "A Three.js-powered orbit scene driven by a paused GSAP timeline for deterministic renders."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/components/three-orbiting-cards.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Three Orbiting Cards preview" />
+
+## Install
+
+<InstallCommand command="npx hyperframes add three-orbiting-cards" />
+
+That writes one file: `compositions/components/three-orbiting-cards.html`.
+
+## Source
+
+<Accordion title={`three-orbiting-cards.html`}>
+
+```html
+<!--
+  Three Orbiting Cards - advanced HyperFrames primitive.
+
+  This is intentionally seekable: drive it from a paused GSAP timeline.
+  MotionPath examples require GSAP MotionPathPlugin. Three.js examples expose
+  a render(progress) adapter instead of a free-running requestAnimationFrame loop.
+-->
+
+<div class="hf-advanced-three-orbiting-cards">
+  <canvas></canvas>
+  <div class="label">
+    <h3>Three Orbiting Cards</h3>
+    <p>
+      A Three.js-powered orbit scene driven by a paused GSAP timeline for deterministic renders.
+    </p>
+  </div>
+</div>
+
+<style>
+  .hf-advanced-three-orbiting-cards {
+    color: #111827;
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-advanced-three-orbiting-cards {
+    position: relative;
+    width: 760px;
+    height: 430px;
+    border-radius: 30px;
+    overflow: hidden;
+    background: #050816;
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+  }
+  .hf-advanced-three-orbiting-cards canvas {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+  .hf-advanced-three-orbiting-cards .label {
+    position: absolute;
+    left: 28px;
+    bottom: 26px;
+    color: #fff;
+  }
+  .hf-advanced-three-orbiting-cards h3 {
+    margin: 0;
+    font-size: 34px;
+    letter-spacing: -0.05em;
+  }
+  .hf-advanced-three-orbiting-cards p {
+    margin: 6px 0 0;
+    color: rgba(255, 255, 255, 0.62);
+  }
+</style>
+
+<!--
+  Timeline integration:
+  const startTime = 0;
+  if (window.__hfThreeRender_three_orbiting_cards) { tl.to(window.__hfThreeRender_three_orbiting_cards.state, { progress: 1, duration: 4, ease: 'none', onUpdate: window.__hfThreeRender_three_orbiting_cards.render }, startTime); }
+-->
+
+<!-- Optional Three.js adapter for demos. In production, copy this once and dispose renderer resources when the host composition is removed. -->
+<script type="module">
+  import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.184.0/build/three.module.js";
+
+  const host = document.querySelector(".hf-advanced-three-orbiting-cards");
+  const canvas = host.querySelector("canvas");
+  const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });
+  renderer.setPixelRatio(1);
+  renderer.setSize(760, 430, false);
+  renderer.setClearColor(0x050816, 1);
+
+  const scene = new THREE.Scene();
+  const camera = new THREE.PerspectiveCamera(36, 760 / 430, 0.1, 100);
+  camera.position.set(0, 0, 7);
+
+  const group = new THREE.Group();
+  scene.add(group);
+  const material = new THREE.MeshStandardMaterial({
+    color: 0x60a5fa,
+    metalness: 0.18,
+    roughness: 0.38,
+  });
+  const accent = new THREE.MeshStandardMaterial({
+    color: 0xa78bfa,
+    metalness: 0.12,
+    roughness: 0.44,
+  });
+  const geometry = new THREE.BoxGeometry(1.2, 1.2, 0.08);
+  for (let i = 0; i < 9; i++) {
+    const mesh = new THREE.Mesh(geometry, i % 2 ? accent : material);
+    const angle = (i / 9) * Math.PI * 2;
+    const radius = 2.15;
+    mesh.position.set(
+      Math.cos(angle) * radius,
+      Math.sin(angle) * radius * 0.55,
+      Math.sin(angle) * 0.7,
+    );
+    mesh.rotation.z = angle;
+    group.add(mesh);
+  }
+  scene.add(new THREE.AmbientLight(0xffffff, 1.2));
+  const light = new THREE.DirectionalLight(0xffffff, 2.2);
+  light.position.set(2, 3, 4);
+  scene.add(light);
+
+  const state = { progress: 0 };
+  function render() {
+    const t = state.progress;
+    group.rotation.y = t * Math.PI * 2;
+    group.rotation.x = Math.sin(t * Math.PI * 2) * 0.22;
+    camera.position.z = 6.4 - Math.sin(t * Math.PI) * 0.55;
+    renderer.render(scene, camera);
+  }
+  render();
+
+  window.__hfThreeRender_three_orbiting_cards = { state, render };
+</script>
+```
+
+</Accordion>
+
+## Usage
+
+Open `compositions/components/three-orbiting-cards.html` and paste its contents into your composition. The comment header describes the timeline integration and any optional dependency setup.
+
+{/* hf:generated-footer */}
+
+Tagged `video-primitive` `three-js` `webgl` `hyperframes-native`.
+
+## 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/components/ticker-takeover.mdx b/docs/catalog/components/ticker-takeover.mdx
new file mode 100644
index 0000000000..aa8ce0a1ab
--- /dev/null
+++ b/docs/catalog/components/ticker-takeover.mdx
@@ -0,0 +1,363 @@
+---
+title: "Ticker Takeover"
+description: "A mono ticker rolls through options, locks on a final word with an accent flash, and promotes it into a full-frame headline."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/ticker-takeover.html"
+  compositionId="ticker-takeover"
+  compositionSrc="compositions/components/ticker-takeover.html"
+  variables={[{"id":"options","type":"string","role":"content","label":"Options","description":"Comma-separated words shown by the ticker.","default":"faster,smarter,together,everywhere"},{"id":"final_word","type":"string","role":"content","label":"Final word","description":"Word the ticker locks on and promotes.","default":"together"},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Color used for the lock flash and promoted word.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]}]}
+>
+
+```html ticker-takeover.html
+<!doctype html>
+<!--
+  ticker-takeover: a compact ticker rolls through four to six words, locks
+  on the selected word with an accent flash, then promotes that word into
+  a full-frame headline.
+
+  Variables:
+    - options: comma-separated words shown by the ticker.
+    - final_word: the word placed last and promoted.
+    - accent: green, blue, or violet lock color.
+
+  Envelope (fixed IN and OUT, elastic HOLD only):
+    IN_BASE  = 3.15s. Ticker entrance, accelerating roll, decelerating lock,
+               accent flash, and headline promotion.
+    HOLD     = max(0, D - IN - OUT). The promoted word drifts subtly.
+    OUT_BASE = 0.45s. The promoted word fades and rises.
+    If D is shorter than IN_BASE + OUT_BASE, IN and OUT compress together.
+
+  Mount contract: all rendered content lives inside the template. The root
+  fills its host without fixed dimensions, and one paused timeline registers
+  under the hardcoded ticker-takeover key.
+-->
+<html
+  lang="en"
+  data-composition-id="ticker-takeover"
+  data-composition-duration="4.5"
+  data-composition-variables='[
+    { "id": "options", "type": "string", "role": "content", "label": "Options", "description": "Comma-separated words shown by the ticker.", "default": "faster,smarter,together,everywhere" },
+    { "id": "final_word", "type": "string", "role": "content", "label": "Final word", "description": "Word the ticker locks on and promotes.", "default": "together" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Color used for the lock flash and promoted word.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Ticker Takeover</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="ticker-takeover" data-duration="4.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .tt-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+          }
+
+          .tt-ticker {
+            position: absolute;
+            top: 55cqh;
+            left: 12cqw;
+            width: 76cqw;
+            height: 18cqh;
+            display: grid;
+            grid-template-columns: 18cqw 1fr;
+            align-items: center;
+            overflow: hidden;
+            border: 0.12cqw solid color-mix(in srgb, var(--muted, #94a3b8) 38%, transparent);
+            border-radius: 3cqh;
+            background: color-mix(in srgb, var(--surface, #172033) 92%, transparent);
+            box-shadow: 0 3cqh 9cqh color-mix(in srgb, var(--bg, #0b0c0e) 52%, transparent);
+            will-change: transform, opacity;
+          }
+
+          .tt-label {
+            display: grid;
+            place-items: center;
+            height: 12cqh;
+            border-right: 0.12cqw solid color-mix(in srgb, var(--muted, #94a3b8) 30%, transparent);
+            color: var(--muted, #94a3b8);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            font-size: 2.4cqh;
+            font-weight: 700;
+            letter-spacing: 0.18em;
+            text-transform: uppercase;
+          }
+
+          .tt-window {
+            position: relative;
+            height: 12cqh;
+            overflow: hidden;
+          }
+
+          .tt-reel {
+            width: 100%;
+            will-change: transform;
+          }
+
+          .tt-item {
+            display: flex;
+            align-items: center;
+            height: 12cqh;
+            padding: 0 4cqw;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            font-size: 4.2cqh;
+            font-weight: 650;
+            letter-spacing: -0.025em;
+            white-space: nowrap;
+            will-change: transform, color;
+          }
+
+          .tt-flash {
+            position: absolute;
+            inset: 0;
+            background: var(--tt-accent, #22c55e);
+            opacity: 0;
+          }
+
+          .tt-headline {
+            position: absolute;
+            top: 30cqh;
+            left: 7cqw;
+            width: 86cqw;
+            height: 30cqh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            overflow: hidden;
+            color: var(--tt-accent, #22c55e);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: 15cqh;
+            font-weight: 820;
+            line-height: 0.9;
+            letter-spacing: -0.065em;
+            text-align: center;
+            white-space: nowrap;
+            transform-origin: 50% 50%;
+            will-change: transform, opacity;
+          }
+        </style>
+
+        <div
+          id="ticker-takeover-clip"
+          class="tt-clip clip"
+          data-start="0"
+          data-duration="4.5"
+          data-track-index="0"
+        >
+          <div class="tt-ticker">
+            <div class="tt-label">signal</div>
+            <div class="tt-window">
+              <div class="tt-reel"></div>
+            </div>
+            <div class="tt-flash" aria-hidden="true"></div>
+          </div>
+          <div class="tt-headline"></div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var ticker = root.querySelector(".tt-ticker");
+            var reel = root.querySelector(".tt-reel");
+            var flash = root.querySelector(".tt-flash");
+            var headline = root.querySelector(".tt-headline");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var defaultOptions = ["faster", "smarter", "together", "everywhere"];
+            var finalWord = vars.final_word == null ? "together" : String(vars.final_word).trim();
+            if (!finalWord) finalWord = "together";
+
+            var rawOptions = vars.options == null ? defaultOptions.join(",") : String(vars.options);
+            var candidates = rawOptions
+              .split(",")
+              .map(function (word) {
+                return word.trim();
+              })
+              .filter(Boolean);
+            var options = [];
+            var finalKey = finalWord.toLowerCase();
+
+            function addOption(word) {
+              var normalized = word.toLowerCase();
+              var isFinal = normalized === finalKey;
+              var isDuplicate = options.some(function (option) {
+                return option.toLowerCase() === normalized;
+              });
+              if (!isFinal && !isDuplicate && options.length < 5) options.push(word);
+            }
+
+            candidates.forEach(addOption);
+            defaultOptions.forEach(function (word) {
+              if (options.length < 3) addOption(word);
+            });
+            options.push(finalWord);
+
+            options.forEach(function (word) {
+              var item = document.createElement("span");
+              item.className = "tt-item";
+              item.textContent = word;
+              reel.appendChild(item);
+            });
+
+            var finalItem = reel.lastElementChild;
+            var accentColors = {
+              green: "var(--brand, #22c55e)",
+              blue: "var(--accent, #38bdf8)",
+              violet: "var(--accent-2, #a78bfa)",
+            };
+            var accentName = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var accentColor = accentColors[accentName];
+
+            root.style.setProperty("--tt-accent", accentColor);
+            headline.textContent = finalWord;
+
+            var IN_BASE = 3.15;
+            var OUT_BASE = 0.45;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4.5"));
+            var envelopeScale = duration < IN_BASE + OUT_BASE ? duration / (IN_BASE + OUT_BASE) : 1;
+            var IN = IN_BASE * envelopeScale;
+            var OUT = OUT_BASE * envelopeScale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var OUT_START = IN + HOLD;
+
+            var TICKER_IN = 0.35 * envelopeScale;
+            var ROLL_START = 0.32 * envelopeScale;
+            var ACCEL_DURATION = 0.82 * envelopeScale;
+            var DECEL_DURATION = 0.93 * envelopeScale;
+            var LOCK_AT = ROLL_START + ACCEL_DURATION + DECEL_DURATION;
+            var PROMOTE_AT = LOCK_AT + 0.18 * envelopeScale;
+            var PROMOTE_DURATION = Math.max(0.001, IN - PROMOTE_AT);
+            var finalOffset = -(options.length - 1) * 12;
+            var accelOffset = finalOffset * 0.72;
+
+            var tl = gsap.timeline({ paused: true });
+
+            tl.fromTo(
+              ticker,
+              { opacity: 0, scale: 0.97 },
+              { opacity: 1, scale: 1, duration: TICKER_IN, ease: "power2.out" },
+              0,
+            );
+            tl.fromTo(
+              reel,
+              { y: "0cqh" },
+              { y: accelOffset + "cqh", duration: ACCEL_DURATION, ease: "power4.in" },
+              ROLL_START,
+            );
+            tl.to(
+              reel,
+              { y: finalOffset + "cqh", duration: DECEL_DURATION, ease: "power4.out" },
+              ROLL_START + ACCEL_DURATION,
+            );
+            tl.fromTo(
+              finalItem,
+              { scale: 1.14, color: accentColor },
+              { scale: 1, color: accentColor, duration: 0.3 * envelopeScale, ease: "expo.out" },
+              LOCK_AT,
+            );
+            tl.fromTo(
+              flash,
+              { opacity: 0.82 },
+              { opacity: 0, duration: 0.34 * envelopeScale, ease: "power2.out" },
+              LOCK_AT,
+            );
+            tl.fromTo(
+              headline,
+              { opacity: 0, scale: 0.22, y: "20cqh" },
+              {
+                opacity: 1,
+                scale: 1,
+                y: "0cqh",
+                duration: PROMOTE_DURATION,
+                ease: "power3.out",
+              },
+              PROMOTE_AT,
+            );
+            tl.to(
+              ticker,
+              { opacity: 0, scale: 0.96, duration: PROMOTE_DURATION * 0.68, ease: "power2.in" },
+              PROMOTE_AT,
+            );
+
+            if (HOLD > 0) {
+              tl.to(
+                headline,
+                { y: "-0.7cqh", duration: HOLD / 2, ease: "sine.inOut", yoyo: true, repeat: 1 },
+                IN,
+              );
+            }
+
+            tl.to(
+              headline,
+              { opacity: 0, y: "-3cqh", duration: OUT, ease: "power2.in" },
+              OUT_START,
+            );
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["ticker-takeover"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add ticker-takeover" />
+
+That writes one file: `compositions/components/ticker-takeover.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/ticker-takeover.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `typography` `ticker` `slot-machine` `headline` `reveal`.
+
+## 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/components/tilt-card.mdx b/docs/catalog/components/tilt-card.mdx
new file mode 100644
index 0000000000..cbfe3928f3
--- /dev/null
+++ b/docs/catalog/components/tilt-card.mdx
@@ -0,0 +1,195 @@
+---
+title: "Tilt Card"
+description: "A transitions.dev-inspired tilt card primitive with depth layers and hover-style parallax"
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/tilt-card.html"
+  compositionId="tilt-card"
+  compositionSrc="compositions/components/tilt-card.html"
+  variables={[{"id":"eyebrow","type":"string","role":"content","label":"Eyebrow","description":"Small uppercase kicker above the headline.","default":"Primitive"},{"id":"headline","type":"string","role":"content","label":"Headline","description":"Large card headline.","default":"Agent-ready motion"},{"id":"glow","type":"enum","role":"motion","label":"Glow","description":"How far the corner glow reaches past the card edges, which sets both its spread at rest and how far the timeline drift carries it.","default":"standard","options":[{"value":"tight","label":"Tight"},{"value":"standard","label":"Standard"},{"value":"wide","label":"Wide"}]},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Colour family of the card gradient, corner glow, eyebrow and drop shadow.","default":"indigo","options":[{"value":"indigo","label":"Indigo"},{"value":"emerald","label":"Emerald"},{"value":"violet","label":"Violet"}]}]}
+>
+
+```html tilt-card.html
+<!--
+  Tilt Card - transitions.dev-inspired primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Use the timeline
+  integration note at the bottom as the starting point for deterministic GSAP
+  animation.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result into the markup or
+  into a custom property the CSS above consumes. The timeline recipe below is
+  untouched by them: it keeps driving the same rise and the same tilt angles.
+
+    - eyebrow (string, default "Primitive"): the small uppercase kicker above
+      the headline. Blank falls back to the default.
+    - headline (string, default "Agent-ready motion"): the large card
+      headline. Blank falls back to the default.
+    - glow (tight | standard | wide, default standard): how far the corner
+      glow reaches past the card edges. A wider glow spreads more light at
+      rest, and because the timeline drifts it by a percentage of its own box,
+      a wider glow also carries that drift further across the card.
+    - accent (indigo | emerald | violet, default indigo): the colour family of
+      the card, covering the gradient, the corner glow, the eyebrow and the
+      drop shadow together.
+
+  On every default the result is identical to the original: an indigo card with
+  a sky-blue corner glow reaching 30% past every edge.
+-->
+
+<div
+  class="hf-transition-tilt-card"
+  data-composition-variables='[
+    {"id": "eyebrow", "type": "string", "role": "content", "label": "Eyebrow", "description": "Small uppercase kicker above the headline.", "default": "Primitive"},
+    {"id": "headline", "type": "string", "role": "content", "label": "Headline", "description": "Large card headline.", "default": "Agent-ready motion"},
+    {"id": "glow", "type": "enum", "role": "motion", "label": "Glow", "description": "How far the corner glow reaches past the card edges, which sets both its spread at rest and how far the timeline drift carries it.", "default": "standard", "options": [{"value": "tight", "label": "Tight"}, {"value": "standard", "label": "Standard"}, {"value": "wide", "label": "Wide"}]},
+    {"id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Colour family of the card gradient, corner glow, eyebrow and drop shadow.", "default": "indigo", "options": [{"value": "indigo", "label": "Indigo"}, {"value": "emerald", "label": "Emerald"}, {"value": "violet", "label": "Violet"}]}
+  ]'
+>
+  <div class="hf-transition-tilt-glow"></div>
+  <div class="hf-transition-tilt-content">
+    <span>Primitive</span>
+    <strong>Agent-ready motion</strong>
+  </div>
+</div>
+
+<style>
+  .hf-transition-tilt-card {
+    position: relative;
+    width: 420px;
+    height: 260px;
+    overflow: hidden;
+    border: 1px solid rgba(255, 255, 255, 0.18);
+    border-radius: 30px;
+    background: linear-gradient(135deg, #18181b, var(--hf-tilt-accent, #312e81));
+    color: #ffffff;
+    font-family: Inter, system-ui, sans-serif;
+    transform-style: preserve-3d;
+    box-shadow: 0 32px 90px var(--hf-tilt-shadow, rgba(49, 46, 129, 0.34));
+  }
+  .hf-transition-tilt-glow {
+    position: absolute;
+    inset: var(--hf-tilt-glow-inset, -30%);
+    background: radial-gradient(
+      circle at 30% 20%,
+      var(--hf-tilt-glow, rgba(125, 211, 252, 0.5)),
+      transparent 36%
+    );
+  }
+  .hf-transition-tilt-content {
+    position: relative;
+    display: grid;
+    align-content: end;
+    gap: 10px;
+    height: 100%;
+    padding: 34px;
+    transform: translateZ(38px);
+  }
+  .hf-transition-tilt-content span {
+    color: var(--hf-tilt-label, #a5b4fc);
+    font-size: 13px;
+    font-weight: 900;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+  }
+  .hf-transition-tilt-content strong {
+    max-width: 280px;
+    font-size: 34px;
+    line-height: 0.96;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    var insets = { tight: "-18%", standard: "-30%", wide: "-46%" };
+    var accents = {
+      indigo: {
+        accent: "#312e81",
+        glow: "rgba(125, 211, 252, 0.5)",
+        label: "#a5b4fc",
+        shadow: "rgba(49, 46, 129, 0.34)",
+      },
+      emerald: {
+        accent: "#065f46",
+        glow: "rgba(110, 231, 183, 0.5)",
+        label: "#6ee7b7",
+        shadow: "rgba(6, 95, 70, 0.34)",
+      },
+      violet: {
+        accent: "#5b21b6",
+        glow: "rgba(216, 180, 254, 0.5)",
+        label: "#d8b4fe",
+        shadow: "rgba(91, 33, 182, 0.34)",
+      },
+    };
+
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    function text(value, fallback) {
+      var resolved = value == null ? "" : String(value).trim();
+      return resolved.length > 0 ? resolved : fallback;
+    }
+
+    var eyebrow = text(vars.eyebrow, "Primitive");
+    var headline = text(vars.headline, "Agent-ready motion");
+    var inset = insets[pick(insets, vars.glow, "standard")];
+    var accent = accents[pick(accents, vars.accent, "indigo")];
+
+    var roots = document.querySelectorAll(".hf-transition-tilt-card");
+    for (var i = 0; i < roots.length; i += 1) {
+      var root = roots[i];
+      root.style.setProperty("--hf-tilt-glow-inset", inset);
+      root.style.setProperty("--hf-tilt-accent", accent.accent);
+      root.style.setProperty("--hf-tilt-glow", accent.glow);
+      root.style.setProperty("--hf-tilt-label", accent.label);
+      root.style.setProperty("--hf-tilt-shadow", accent.shadow);
+      root.querySelector(".hf-transition-tilt-content span").textContent = eyebrow;
+      root.querySelector(".hf-transition-tilt-content strong").textContent = headline;
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-transition-tilt-card', { opacity: 0, y: 30, rotateX: 0, rotateY: 0 }, { opacity: 1, y: 0, duration: 0.38, ease: 'power2.out' }, 0.3);
+  tl.to('.hf-transition-tilt-card', { rotateX: -7, rotateY: 10, duration: 0.72, ease: 'power3.inOut' }, 0.75);
+  tl.to('.hf-transition-tilt-glow', { xPercent: 12, yPercent: 10, duration: 0.72, ease: 'power3.inOut' }, 0.75);
+-->
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add tilt-card" />
+
+That writes one file: `compositions/components/tilt-card.html`.
+
+## Usage
+
+Open `compositions/components/tilt-card.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+
+{/* hf:generated-footer */}
+
+Tagged `video-primitive` `transition-primitive` `transitions-dev-port` `card` `tilt`.
+
+## 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/components/titlecard-calm.mdx b/docs/catalog/components/titlecard-calm.mdx
new file mode 100644
index 0000000000..dbee0caf67
--- /dev/null
+++ b/docs/catalog/components/titlecard-calm.mdx
@@ -0,0 +1,230 @@
+---
+title: "Titlecard Calm"
+description: "A restrained title card where a mono kicker and generous grotesque headline fade upward, drift almost imperceptibly, and exit cleanly."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/titlecard-calm.html"
+  compositionId="titlecard-calm"
+  compositionSrc="compositions/components/titlecard-calm.html"
+  variables={[{"id":"headline","type":"string","role":"content","label":"Headline","description":"Primary title displayed in the card.","default":"Less, but better"},{"id":"kicker","type":"string","role":"content","label":"Kicker","description":"Small uppercase label displayed above the headline.","default":"DESIGN PRINCIPLE"}]}
+>
+
+```html titlecard-calm.html
+<!doctype html>
+<!--
+  titlecard-calm: HyperFrames video primitive (typography / calm / orient)
+
+  Concept: a restrained title card led by a small mono kicker and a large
+  grotesque headline. The kicker fades and rises first, then the headline
+  follows. Typography and negative space carry the frame.
+
+  Variables:
+    - headline (string, default "Less, but better"): the primary title.
+    - kicker (string, default "DESIGN PRINCIPLE"): the small uppercase label.
+
+  Envelope: fixed IN and OUT with an elastic HOLD only.
+    IN_BASE  = 1.20s. Kicker arrives first, headline follows.
+    HOLD     = max(0, D - IN - OUT). The lockup drifts barely upward.
+    OUT_BASE = 0.55s. The full lockup fades with a small rise.
+  If D is shorter than IN_BASE + OUT_BASE, IN and OUT compress together.
+  Longer mounts stretch HOLD only. The timeline is never time-scaled.
+
+  Mount contract: the runtime clones only this template. #root fills the
+  host box, establishes the container query basis, has no data-width or
+  data-height, and registers one paused timeline under the hardcoded
+  titlecard-calm id.
+-->
+<html
+  lang="en"
+  data-composition-id="titlecard-calm"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "headline", "type": "string", "role": "content", "label": "Headline", "description": "Primary title displayed in the card.", "default": "Less, but better" },
+    { "id": "kicker", "type": "string", "role": "content", "label": "Kicker", "description": "Small uppercase label displayed above the headline.", "default": "DESIGN PRINCIPLE" }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Titlecard Calm</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="titlecard-calm" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f7f7f2);
+            font-family: var(--font-display, "Helvetica Neue", Helvetica, Arial, sans-serif);
+            pointer-events: none;
+          }
+
+          .tc-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+          }
+
+          .tc-lockup {
+            display: flex;
+            width: 78cqw;
+            flex-direction: column;
+            align-items: flex-start;
+            gap: 6cqh;
+            transform-origin: 50% 50%;
+            will-change: transform, opacity;
+          }
+
+          .tc-kicker {
+            display: block;
+            width: 100%;
+            color: var(--muted, #b8c0cc);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            font-size: 3.2cqmin;
+            font-weight: 600;
+            line-height: 1;
+            letter-spacing: 0.18em;
+            text-transform: uppercase;
+            will-change: transform, opacity;
+          }
+
+          .tc-headline {
+            display: block;
+            width: 100%;
+            color: var(--fg, #f7f7f2);
+            font-family: var(--font-display, "Helvetica Neue", Helvetica, Arial, sans-serif);
+            font-size: 17cqmin;
+            font-weight: 600;
+            line-height: 0.94;
+            letter-spacing: -0.055em;
+            overflow-wrap: anywhere;
+            text-wrap: balance;
+            will-change: transform, opacity;
+          }
+        </style>
+
+        <div
+          id="titlecard-calm-clip"
+          class="tc-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="tc-lockup">
+            <span class="tc-kicker"></span>
+            <span class="tc-headline"></span>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var lockup = root.querySelector(".tc-lockup");
+            var kicker = root.querySelector(".tc-kicker");
+            var headline = root.querySelector(".tc-headline");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var headlineText = vars.headline == null ? "Less, but better" : String(vars.headline);
+            var kickerText = vars.kicker == null ? "DESIGN PRINCIPLE" : String(vars.kicker);
+
+            headline.textContent = headlineText;
+            kicker.textContent = kickerText;
+
+            var IN_BASE = 1.2;
+            var OUT_BASE = 0.55;
+            var parsedDuration = Number.parseFloat(root.dataset.duration);
+            var duration = Number.isFinite(parsedDuration) ? Math.max(0.001, parsedDuration) : 4;
+            var totalBase = IN_BASE + OUT_BASE;
+            var phaseScale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * phaseScale;
+            var OUT = OUT_BASE * phaseScale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var HOLD_START = IN;
+            var OUT_START = IN + HOLD;
+            var KICKER_IN = 0.5 * phaseScale;
+            var HEADLINE_AT = 0.28 * phaseScale;
+            var HEADLINE_IN = 0.72 * phaseScale;
+
+            gsap.set(lockup, { opacity: 1, y: "0cqh" });
+
+            var tl = gsap.timeline({ paused: true });
+
+            tl.fromTo(
+              kicker,
+              { opacity: 0, y: "2.2cqh" },
+              { opacity: 1, y: "0cqh", duration: KICKER_IN, ease: "power2.out" },
+              0,
+            );
+            tl.fromTo(
+              headline,
+              { opacity: 0, y: "3.2cqh" },
+              { opacity: 1, y: "0cqh", duration: HEADLINE_IN, ease: "power3.out" },
+              HEADLINE_AT,
+            );
+
+            if (HOLD > 0) {
+              tl.to(lockup, { y: "-0.65cqh", duration: HOLD, ease: "sine.inOut" }, HOLD_START);
+            }
+
+            tl.to(
+              lockup,
+              { opacity: 0, y: "-2.1cqh", duration: OUT, ease: "power2.in" },
+              OUT_START,
+            );
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["titlecard-calm"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add titlecard-calm" />
+
+That writes one file: `compositions/components/titlecard-calm.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/titlecard-calm.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `typography` `title-card` `calm` `orient`.
+
+## 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/components/titlecard-lockup.mdx b/docs/catalog/components/titlecard-lockup.mdx
new file mode 100644
index 0000000000..0c666ab950
--- /dev/null
+++ b/docs/catalog/components/titlecard-lockup.mdx
@@ -0,0 +1,363 @@
+---
+title: "Titlecard Lockup"
+description: "The calm breather titlecard: an optional mono kicker fades up, the wordmark settles dead-center with one restrained move, a hairline rule draws left to right, a mono label fades beneath, and the lockup holds truly still."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/titlecard-lockup.html"
+  compositionId="titlecard-lockup"
+  compositionSrc="compositions/components/titlecard-lockup.html"
+  variables={[{"id":"wordmark","type":"string","role":"content","label":"Wordmark","description":"Display wordmark that settles dead-center.","default":"HYPERFRAMES"},{"id":"label","type":"string","role":"content","label":"Label","description":"Mono caption under the rule. Empty hides it.","default":"WRITE HTML. RENDER VIDEO."},{"id":"kicker","type":"string","role":"content","label":"Kicker","description":"Small mono label above the wordmark. Empty hides it.","default":"INTRODUCING"},{"id":"rule","type":"enum","role":"style","label":"Rule","description":"Hairline rule drawn left to right under the wordmark.","default":"show","options":[{"value":"show","label":"Show"},{"value":"hide","label":"Hide"}]},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Contract color carried by the hairline rule.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"style","label":"Exit","description":"Optional departure. Frame roots own transitions, so none is the default.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
+>
+
+```html titlecard-lockup.html
+<!doctype html>
+<!--
+  titlecard-lockup: HyperFrames video primitive (intros and reveals / breather)
+
+  The calm breather titlecard. An optional mono kicker fades up, the wordmark
+  settles dead-center with ONE restrained move (scale 0.96 to 1, smooth
+  ease-out), a hairline rule draws left to right beneath it, a mono label
+  fades in under the rule, then the lockup holds truly still. Low motion is
+  the payload: no second development phase, no spring chains, and the hold
+  is dead still. The stillness is the confidence.
+
+  Variables:
+    - wordmark (string): the centered display wordmark.
+    - label (string): mono caption under the rule. Empty hides it.
+    - kicker (string): small mono label above the wordmark. Empty hides it.
+    - rule (show | hide): the hairline rule and its draw.
+    - accent (green | blue | violet): contract color carried by the rule.
+    - exit (none | fade | up, default none): optional departure.
+
+  Envelope: fixed IN, optional OUT, elastic HOLD only.
+    IN_BASE  = 1.80s  kicker, wordmark settle, rule draw, label, in sequence
+    HOLD     = max(0, D - IN - OUT), truly still: no drift, no breath
+    OUT_BASE = 0.50s when exit is fade or up, otherwise 0
+  If D is shorter than IN_BASE + OUT_BASE the phases compress together.
+  Longer mounts stretch HOLD only. The timeline is never time-scaled.
+
+  The rule draw uses getTotalLength dash measurement (never the pathLength
+  attribute, never non-scaling-stroke on a dashed path).
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, has no data-width or
+  data-height, and registers one paused timeline under the literal
+  titlecard-lockup key.
+-->
+<html
+  lang="en"
+  data-composition-id="titlecard-lockup"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "wordmark", "type": "string", "role": "content", "label": "Wordmark", "description": "Display wordmark that settles dead-center.", "default": "HYPERFRAMES" },
+    { "id": "label", "type": "string", "role": "content", "label": "Label", "description": "Mono caption under the rule. Empty hides it.", "default": "WRITE HTML. RENDER VIDEO." },
+    { "id": "kicker", "type": "string", "role": "content", "label": "Kicker", "description": "Small mono label above the wordmark. Empty hides it.", "default": "INTRODUCING" },
+    { "id": "rule", "type": "enum", "role": "style", "label": "Rule", "description": "Hairline rule drawn left to right under the wordmark.", "default": "show", "options": [{ "value": "show", "label": "Show" }, { "value": "hide", "label": "Hide" }] },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Contract color carried by the hairline rule.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "style", "label": "Exit", "description": "Optional departure. Frame roots own transitions, so none is the default.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Titlecard Lockup</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="titlecard-lockup" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          #root [hidden] {
+            display: none !important;
+          }
+
+          .tl-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+            background: var(--bg, #0b0c0e);
+          }
+
+          .tl-lockup {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            max-width: 92cqw;
+            text-align: center;
+            will-change: transform, opacity;
+          }
+
+          .tl-kicker {
+            display: block;
+            margin-bottom: var(--space-2, 3.4cqh);
+            /* Light-safe ink derived from the host's own fg/bg instead of
+               --muted (whose fallback is dark-tuned and fails contrast on
+               light hosts). 62% fg clears 4.5:1 on both dark and light. */
+            color: color-mix(in srgb, var(--fg, #f8fafc) 62%, var(--bg, #0b0c0e));
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            font-size: 2.6cqmin;
+            font-weight: 600;
+            line-height: 1;
+            letter-spacing: 0.3em;
+            text-indent: 0.3em; /* balances the trailing tracking so the line optically centers */
+            text-transform: uppercase;
+            will-change: transform, opacity;
+          }
+
+          .tl-wordmark {
+            display: block;
+            max-width: 92cqw;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: var(--tl-wordmark-size, min(14cqw, 22cqh));
+            font-weight: 600;
+            line-height: 1;
+            letter-spacing: -0.03em;
+            white-space: nowrap;
+            transform-origin: 50% 50%;
+            will-change: transform, opacity;
+          }
+
+          .tl-rule-svg {
+            display: block;
+            width: 34cqw;
+            height: max(1px, 0.2cqmin);
+            margin-top: var(--space-2, 4cqh);
+          }
+
+          .tl-rule-svg line {
+            stroke: color-mix(
+              in srgb,
+              var(--tl-accent, var(--brand, #71f5a7)) 60%,
+              var(--fg, #f8fafc)
+            );
+            stroke-width: 2;
+            stroke-opacity: 0.62;
+          }
+
+          .tl-label {
+            display: block;
+            margin-top: var(--space-2, 3.2cqh);
+            /* Same fg/bg-derived ink as the kicker: contrast-safe on any host. */
+            color: color-mix(in srgb, var(--fg, #f8fafc) 62%, var(--bg, #0b0c0e));
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            font-size: 2.2cqmin;
+            font-weight: 600;
+            line-height: 1.4;
+            letter-spacing: 0.34em;
+            text-indent: 0.34em;
+            text-transform: uppercase;
+            will-change: transform, opacity;
+          }
+        </style>
+
+        <div
+          id="titlecard-lockup-clip"
+          class="tl-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="tl-lockup">
+            <span class="tl-kicker"></span>
+            <span class="tl-wordmark"></span>
+            <svg
+              class="tl-rule-svg"
+              viewBox="0 0 560 2"
+              preserveAspectRatio="none"
+              xmlns="http://www.w3.org/2000/svg"
+              aria-hidden="true"
+            >
+              <line class="tl-rule" x1="0" y1="1" x2="560" y2="1" />
+            </svg>
+            <span class="tl-label"></span>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var lockup = root.querySelector(".tl-lockup");
+            var kicker = root.querySelector(".tl-kicker");
+            var wordmark = root.querySelector(".tl-wordmark");
+            var ruleSvg = root.querySelector(".tl-rule-svg");
+            var ruleLine = root.querySelector(".tl-rule");
+            var label = root.querySelector(".tl-label");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            function readText(value, fallback) {
+              if (value == null) return fallback;
+              return String(value).trim().replace(/\s+/g, " ");
+            }
+
+            var wordmarkText = readText(vars.wordmark, "HYPERFRAMES");
+            var labelText = readText(vars.label, "WRITE HTML. RENDER VIDEO.");
+            var kickerText = readText(vars.kicker, "INTRODUCING");
+            var ruleShown = vars.rule !== "hide";
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            wordmark.textContent = wordmarkText;
+            lockup.setAttribute("aria-label", wordmarkText);
+            root.style.setProperty("--tl-accent", accentColors[accent]);
+
+            if (kickerText) kicker.textContent = kickerText;
+            else kicker.setAttribute("hidden", "hidden");
+            if (labelText) label.textContent = labelText;
+            else label.setAttribute("hidden", "hidden");
+            if (!ruleShown) ruleSvg.setAttribute("hidden", "hidden");
+
+            // Deterministic character-count fit keeps the wordmark on one line
+            // with air on both sides before the template is laid out. The 0.78
+            // advance estimate is conservative so wide themed display faces
+            // (serifs) still fit inside the frame.
+            var characters = Math.max(1, Array.from(wordmarkText).length);
+            var fittedCqw = Math.min(12, 84 / (characters * 0.78));
+            root.style.setProperty(
+              "--tl-wordmark-size",
+              "min(" + fittedCqw.toFixed(3) + "cqw, 22cqh)",
+            );
+
+            var IN_BASE = 1.8;
+            var OUT_BASE = exit === "none" ? 0 : 0.5;
+            var parsedDuration = Number.parseFloat(root.dataset.duration);
+            var duration = Number.isFinite(parsedDuration) ? Math.max(0.001, parsedDuration) : 4;
+            var totalBase = IN_BASE + OUT_BASE;
+            var phaseScale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * phaseScale;
+            var OUT = OUT_BASE * phaseScale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var OUT_START = IN + HOLD;
+            var KICKER_IN = 0.45 * phaseScale;
+            var WORD_AT = 0.25 * phaseScale;
+            var WORD_IN = 0.85 * phaseScale;
+            var RULE_AT = 0.9 * phaseScale;
+            var RULE_IN = 0.55 * phaseScale;
+            var LABEL_AT = 1.3 * phaseScale;
+            var LABEL_IN = 0.5 * phaseScale;
+
+            var tl = gsap.timeline({ paused: true });
+
+            // Optional kicker fades up first. An empty kicker leaves a beat of
+            // quiet instead of reflowing the schedule.
+            if (kickerText) {
+              tl.fromTo(
+                kicker,
+                { autoAlpha: 0, y: "2.2cqh" },
+                { autoAlpha: 1, y: "0cqh", duration: KICKER_IN, ease: "power2.out" },
+                0,
+              );
+            }
+
+            // The ONE move: the wordmark settles dead-center, scale 0.96 to 1,
+            // smooth ease-out, entrance half only, no bounce.
+            tl.fromTo(
+              wordmark,
+              { autoAlpha: 0, scale: 0.96 },
+              { autoAlpha: 1, scale: 1, duration: WORD_IN, ease: "power3.out" },
+              WORD_AT,
+            );
+
+            // Hairline rule draws left to right via measured-length dash.
+            if (ruleShown) {
+              var ruleLength = ruleLine.getTotalLength();
+              ruleLine.style.strokeDasharray = String(ruleLength);
+              ruleLine.style.strokeDashoffset = String(ruleLength);
+              tl.fromTo(
+                ruleLine,
+                { strokeDashoffset: ruleLength },
+                { strokeDashoffset: 0, duration: RULE_IN, ease: "power2.out" },
+                RULE_AT,
+              );
+            }
+
+            // Mono label fades up beneath the rule.
+            if (labelText) {
+              tl.fromTo(
+                label,
+                { autoAlpha: 0, y: "1.8cqh" },
+                { autoAlpha: 1, y: "0cqh", duration: LABEL_IN, ease: "power2.out" },
+                LABEL_AT,
+              );
+            }
+
+            // TRUE hold: dead still. No drift, no breath; sub-perceptual
+            // motion reads as noise at 1080p, and the stillness is the point.
+
+            // Optional exit. Frame roots own transitions; none is the default
+            // and leaves the held lockup as the final frame.
+            if (exit !== "none") {
+              var exitProps = { autoAlpha: 0, duration: OUT, ease: "power2.in" };
+              if (exit === "up") exitProps.y = "-2.4cqh";
+              tl.to(lockup, exitProps, OUT_START);
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["titlecard-lockup"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add titlecard-lockup" />
+
+That writes one file: `compositions/components/titlecard-lockup.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/titlecard-lockup.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `typography` `title-card` `lockup` `breather` `orient`.
+
+## 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/components/toggle-flip.mdx b/docs/catalog/components/toggle-flip.mdx
new file mode 100644
index 0000000000..068aab3a77
--- /dev/null
+++ b/docs/catalog/components/toggle-flip.mdx
@@ -0,0 +1,466 @@
+---
+title: "Toggle Flip"
+description: "An oversized UI toggle switch that flips with real physicality: thumb overshoot, track color crossfade, and a soft press-compress before release. The reference prop of the ui-props family."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/toggle-flip.html"
+  compositionId="toggle-flip"
+  compositionSrc="compositions/components/toggle-flip.html"
+  variables={[{"id":"direction","type":"enum","role":"content","label":"Flip direction","description":"Target end state the flip lands on.","default":"on","options":[{"value":"on","label":"Off → On"},{"value":"off","label":"On → Off"}]},{"id":"label","type":"string","role":"content","label":"Caption","description":"Optional caption under the toggle. Blank hides the line.","default":"Auto-save"},{"id":"size","type":"number","role":"layout","label":"Size","description":"Toggle width as a percent of the host box width.","default":40,"min":20,"max":70,"step":1,"unit":"%"}]}
+>
+
+```html toggle-flip.html
+<!doctype html>
+<!--
+  toggle-flip -- HyperFrames video primitive (ui-props / interaction / demonstrate)
+
+  Concept: an oversized UI toggle switch that flips with real physicality --
+  thumb travel with a slight overshoot, a track color crossfade from
+  var(--surface) to var(--brand), and a soft press-compress right before the
+  knob releases into its new state. One mechanic, one job: demonstrating a
+  state change. This is the reference prop of the ui-props family -- the
+  thing a cursor or touch actor "operates" in a composed scene, and it also
+  has to read alone.
+
+  Compiled-from evidence: fixture; the reference prop (video-primitives
+  catalog, ui-props / interaction / demonstrate shelf).
+
+  Use when: showing a feature, setting, or permission turning on/off, or any
+  binary state change a pointer actor (oversized-cursor, touch-indicator)
+  operates on. Composes with those pointer primitives, which anchor to this
+  file's [data-anchor="toggle-flip"] button.
+
+  Variables (declared in data-composition-variables below):
+    - direction ("on" | "off", default "on"): the flip's TARGET state.
+      "on"  -> starts OFF (surface track), flips TO on (brand track).
+      "off" -> starts ON  (brand track),   flips TO off (surface track).
+    - label (string, default "Auto-save"): optional caption under the
+      toggle. Empty string hides the caption line entirely.
+    - size (number, percent of container width, default 40): toggle width
+      as a percentage of the host box's own width (cqw-driven, so it stays
+      proportional no matter what box a host composition gives it).
+
+  Envelope (fixed IN/OUT, elastic HOLD only -- never gsap.timeScale()):
+    IN_BASE  = 0.90s  stage settles in, anticipation press, then the flip
+    HOLD     = elastic = max(0, D - (IN_BASE + OUT_BASE)); ambient glow
+               breathes gently to prove the frame is alive, or sits calm at
+               HOLD = 0 for short durations
+    OUT_BASE = 0.50s  release fade
+    If D < IN_BASE + OUT_BASE, IN and OUT scale down together (never
+    time-scaled) so IN + OUT == D and HOLD == 0.
+
+  Sync point (fixed offset into IN, never inside the elastic HOLD): the flip
+  lands at FLIP_AT = 0.5s into an unscaled IN (scales proportionally with IN
+  when the envelope is compressed -- see RETIME RANGE below).
+
+  Sound cue: a soft click/tock foley fires at the flip sync point. The
+  primitive never plays audio -- it dispatches a `hf:sfx` CustomEvent
+  ({ id: "click-soft", t: FLIP_AT }) that a scene's mix stage can catch and
+  route to the catalog SFX id of its choice.
+
+  Mount contract: this file is a MOUNTABLE SUB-COMPOSITION, not a standalone
+  composition. A host loads it via data-composition-src; the runtime only
+  clones <template> contents (everything outside <template>, including the
+  entire <head>, is discarded on mount) -- see
+  skills/hyperframes-core/references/sub-compositions.md. The root carries
+  no data-width/data-height: it is elastic, sized off whatever box the host
+  clip gives it (position:absolute; inset:0; container-type:size), so the
+  toggle reads correctly whether the host mounts it into a 960x540 slot or a
+  full 1920x1080 frame. The root is styled by #root, never a class --
+  composited renders scope this file's CSS to
+  [data-composition-id="toggle-flip"], and a rule keyed on the root's own
+  class would stop matching the root itself (sub-compositions.md, Pitfall
+  3). Variables are read via window.__hyperframes.getVariables() (not by
+  parsing this file's own <html> tag at runtime): once mounted,
+  document.documentElement is the HOST's <html>, not this one, so the
+  loader's declared-defaults-plus-per-instance-overrides table is the only
+  reliable source once the primitive is running inside a host page.
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "direction", "type": "enum", "role": "content", "label": "Flip direction", "description": "Target end state the flip lands on.", "default": "on", "options": [{ "value": "on", "label": "Off → On" }, { "value": "off", "label": "On → Off" }] },
+    { "id": "label", "type": "string", "role": "content", "label": "Caption", "description": "Optional caption under the toggle. Blank hides the line.", "default": "Auto-save" },
+    { "id": "size", "type": "number", "role": "layout", "label": "Size", "description": "Toggle width as a percent of the host box width.", "default": 40, "min": 20, "max": 70, "step": 1, "unit": "%" }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Toggle Flip</title>
+    <!-- Metadata only for whoever opens this file directly -- the runtime
+         discards everything outside <template> on mount. The
+         data-composition-variables attribute above stays on <html> (not
+         inside <template>): the loader reads declared variable defaults
+         directly off the fetched document's root element, whether or not
+         the body is template-wrapped. -->
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="toggle-flip" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          /* Root: sized off the HOST box, never a fixed stage. inset:0 fills
+             whatever box the host clip gives it -- a 960x540 mounted slot,
+             a full 1920x1080 frame, anything in between. container-type
+             establishes the cqw/cqh basis every internal measurement below
+             is expressed in. Styled by #root, never a class -- see the
+             mount-contract note in the header comment. */
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            background: var(--bg, #0b1120);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+          }
+
+          .tf-clip {
+            width: 100%;
+            height: 100%;
+            display: grid;
+            place-items: center;
+          }
+
+          .tf-stage {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: var(--space-3, 3cqh);
+            opacity: 0;
+          }
+
+          .tf-label {
+            color: var(--muted, #94a3b8);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-weight: 650;
+            font-size: clamp(12px, 2.4cqw, 28px);
+            letter-spacing: 0.01em;
+            text-align: center;
+          }
+
+          .tf-label:empty {
+            display: none;
+          }
+
+          /* EDIT ZONE: geometry ratios. Track is a fixed 2.2:1 pill; the knob is
+             80% of the track's own height, inset 10% top/bottom. All of it is
+             expressed in cqw off --tf-size so it holds proportion at any size. */
+          .tf-toggle {
+            --tf-track-w: calc(var(--tf-size, 40) * 1cqw);
+            width: var(--tf-track-w);
+            aspect-ratio: 2.2 / 1;
+            position: relative;
+            display: block;
+            border: 0;
+            padding: 0;
+            background: transparent;
+            cursor: default;
+            /* transform is GSAP-owned below (press squeeze); no CSS transform here */
+          }
+
+          .tf-track {
+            position: absolute;
+            inset: 0;
+            border-radius: 999px;
+            --tf-mix: 0; /* 0..100, GSAP-tweened: 0 = surface/off, 100 = brand/on */
+            border: 0.15cqw solid
+              color-mix(
+                in srgb,
+                var(--border, #334155) calc(100% - var(--tf-mix, 0) * 0.4%),
+                var(--brand, #22c55e) calc(var(--tf-mix, 0) * 0.4%)
+              );
+            background: color-mix(
+              in srgb,
+              var(--surface, #1e293b) calc((100 - var(--tf-mix, 0)) * 1%),
+              var(--brand, #22c55e) calc(var(--tf-mix, 0) * 1%)
+            );
+            box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border, #334155) 45%, transparent);
+          }
+
+          .tf-glow {
+            position: absolute;
+            inset: -14%;
+            border-radius: 999px;
+            background: radial-gradient(
+              closest-side,
+              color-mix(in srgb, var(--accent, #38bdf8) 55%, transparent),
+              transparent 72%
+            );
+            opacity: 0;
+            pointer-events: none;
+          }
+
+          .tf-knob {
+            position: absolute;
+            top: calc(var(--tf-size, 40) * 0.0455cqw);
+            left: calc(var(--tf-size, 40) * 0.0455cqw);
+            width: calc(var(--tf-size, 40) * 0.3636cqw);
+            aspect-ratio: 1;
+            border-radius: 50%;
+            background: var(--surface, #f8fafc);
+            box-shadow: 0 0.35cqw 0.7cqw rgba(2, 6, 23, 0.4);
+            /* RETIME RANGE ends here for geometry; 150% is the exact travel a
+               2.2:1 track / 80%-of-height knob pair produces -- see header. GSAP
+               tweens x/scale directly below; no CSS transform authored here. */
+          }
+        </style>
+
+        <div
+          id="toggle-flip-clip"
+          class="tf-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="tf-stage">
+            <div class="tf-label"></div>
+            <button
+              class="tf-toggle"
+              type="button"
+              data-anchor="toggle-flip"
+              aria-pressed="false"
+              tabindex="-1"
+            >
+              <span class="tf-glow"></span>
+              <span class="tf-track"></span>
+              <span class="tf-knob"></span>
+            </button>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            // Literal, not read off the DOM: once mounted, the framework's
+            // flattening step strips data-composition-id from the mounted
+            // root (see FLATTENED_INNER_ROOT_STRIP_ATTRS in
+            // packages/core/src/runtime/flattenedRoot.ts), so
+            // root.getAttribute("data-composition-id") would read null post-
+            // mount and silently register the timeline under the key
+            // "null" instead of "toggle-flip" -- the render then waits the
+            // full 45s sub-composition poll and gives up. Matches the
+            // convention in sub-compositions.md's own example and
+            // empty.html: hardcode the id this file is always mounted
+            // under.
+            var compositionId = "toggle-flip";
+            var stage = root.querySelector(".tf-stage");
+            var labelEl = root.querySelector(".tf-label");
+            var toggleEl = root.querySelector(".tf-toggle");
+            var trackEl = root.querySelector(".tf-track");
+            var knobEl = root.querySelector(".tf-knob");
+            var glowEl = root.querySelector(".tf-glow");
+
+            // EDIT ZONE: variable defaults come from data-composition-variables
+            // above (declared on <html>). window.__hyperframes.getVariables()
+            // returns those defaults already merged with any per-instance
+            // data-variable-values a host sets on the mounting clip -- see
+            // sub-compositions.md's "Per-Instance Variables" section. Add a
+            // variable in both places together (declaration above + fallback
+            // below).
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            // INVARIANT: only "on" | "off" ever reaches the renderer, whatever a
+            // bad override sends.
+            var direction = vars.direction === "off" ? "off" : "on";
+            var toOn = direction === "on";
+            var labelText = vars.label == null ? "" : String(vars.label);
+            // INVARIANT: size always clamps into the declared 20-70% range so an
+            // out-of-range override can't blow the toggle past its container.
+            var sizePct = Math.max(20, Math.min(70, Number(vars.size) || 40));
+
+            labelEl.textContent = labelText;
+            toggleEl.style.setProperty("--tf-size", String(sizePct));
+
+            // A project's own --dur-beat sets this primitive's ambient pace, so
+            // the HOLD breathing feels native to whatever theme is compiled in.
+            var beat = parseFloat(getComputedStyle(root).getPropertyValue("--dur-beat")) || 0.5;
+            var SHEEN_HALF = beat * 1.5;
+
+            // RETIME RANGE: these are the only numbers to touch for a global
+            // pacing retune. Do not reach for gsap.timeScale() -- HOLD below is
+            // the only elastic phase; IN and OUT are always this long (scaled
+            // down together only when D itself is shorter than IN_BASE+OUT_BASE).
+            var IN_BASE = 0.9;
+            var OUT_BASE = 0.5;
+            var STAGE_IN_BASE = 0.4;
+            var PRESS_LEAD_BASE = 0.2;
+            var FLIP_AT_BASE = 0.5; // sync point: fixed offset into IN, never into HOLD
+            var FLIP_DURATION_BASE = 0.25;
+            var GLOW_DURATION_BASE = 0.15;
+
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var totalBase = IN_BASE + OUT_BASE;
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var STAGE_IN = STAGE_IN_BASE * scale;
+            var PRESS_LEAD = PRESS_LEAD_BASE * scale;
+            var FLIP_AT = FLIP_AT_BASE * scale;
+            var FLIP_DURATION = FLIP_DURATION_BASE * scale;
+            var GLOW_DURATION = GLOW_DURATION_BASE * scale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var HOLD_START = IN;
+            var OUT_START = IN + HOLD;
+
+            function fireSfx(id, t) {
+              root.dispatchEvent(
+                new CustomEvent("hf:sfx", { detail: { id: id, t: t }, bubbles: true }),
+              );
+            }
+
+            // Explicit both-endpoints state (gsap.set, never gsap.from()) so a
+            // seek to t=0 is always correct without playing the timeline.
+            var mixFrom = toOn ? 0 : 100;
+            var mixTo = toOn ? 100 : 0;
+            var xFrom = toOn ? "0%" : "150%";
+            var xTo = toOn ? "150%" : "0%";
+            gsap.set(stage, { opacity: 0 });
+            gsap.set(toggleEl, { scaleX: 1, scaleY: 1 });
+            gsap.set(knobEl, { x: xFrom, scale: 1 });
+            gsap.set(trackEl, { "--tf-mix": mixFrom });
+            gsap.set(glowEl, { opacity: 0 });
+            toggleEl.setAttribute("aria-pressed", toOn ? "false" : "true");
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: stage settle
+            tl.to(stage, { opacity: 1, duration: STAGE_IN, ease: "power2.out" }, 0);
+
+            // anticipation press, resolves exactly as the flip begins
+            if (PRESS_LEAD > 0) {
+              var pressStart = Math.max(0, FLIP_AT - PRESS_LEAD);
+              var pressHalf = PRESS_LEAD / 2;
+              tl.to(
+                toggleEl,
+                { scaleX: 0.94, scaleY: 1.06, duration: pressHalf, ease: "power1.inOut" },
+                pressStart,
+              );
+              tl.to(
+                toggleEl,
+                { scaleX: 1, scaleY: 1, duration: pressHalf, ease: "power1.inOut" },
+                pressStart + pressHalf,
+              );
+            }
+
+            // the flip: knob travel with overshoot + track color crossfade, one
+            // shared sync point (FLIP_AT) so they always land together
+            tl.to(knobEl, { x: xTo, duration: FLIP_DURATION, ease: "back.out(1.9)" }, FLIP_AT);
+            tl.to(
+              trackEl,
+              { "--tf-mix": mixTo, duration: FLIP_DURATION, ease: "back.out(1.9)" },
+              FLIP_AT,
+            );
+            tl.fromTo(
+              knobEl,
+              { scale: 1 },
+              {
+                scale: 1.08,
+                duration: FLIP_DURATION * 0.45,
+                ease: "power1.out",
+                yoyo: true,
+                repeat: 1,
+              },
+              FLIP_AT,
+            );
+            tl.set(
+              toggleEl,
+              { attr: { "aria-pressed": toOn ? "true" : "false" } },
+              FLIP_AT + FLIP_DURATION,
+            );
+            tl.call(
+              function () {
+                fireSfx("click-soft", FLIP_AT);
+              },
+              [],
+              FLIP_AT,
+            );
+
+            // soft glow pulse right as the flip settles
+            tl.fromTo(
+              glowEl,
+              { opacity: 0 },
+              {
+                opacity: 1,
+                duration: GLOW_DURATION * 0.5,
+                ease: "power1.out",
+                yoyo: true,
+                repeat: 1,
+              },
+              FLIP_AT + FLIP_DURATION,
+            );
+
+            // HOLD: gentle ambient breathing so an elastic frame still reads
+            // alive; naturally absent when HOLD == 0. Finite repeat count per
+            // the determinism rule -- floor, never ceil, so it can't overshoot D.
+            if (HOLD > SHEEN_HALF) {
+              var breathRepeat = Math.max(0, Math.floor(HOLD / SHEEN_HALF) - 1);
+              tl.fromTo(
+                glowEl,
+                { opacity: 0 },
+                {
+                  opacity: 0.32,
+                  duration: SHEEN_HALF,
+                  ease: "sine.inOut",
+                  yoyo: true,
+                  repeat: breathRepeat,
+                },
+                HOLD_START + GLOW_DURATION,
+              );
+            }
+
+            // OUT: release fade
+            tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.out" }, OUT_START);
+
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add toggle-flip" />
+
+That writes one file: `compositions/components/toggle-flip.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/toggle-flip.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `prop` `ui-props` `toggle` `interaction` `reference-prop` `demonstrate`.
+
+## 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/components/top-down-letters.mdx b/docs/catalog/components/top-down-letters.mdx
new file mode 100644
index 0000000000..ab85701187
--- /dev/null
+++ b/docs/catalog/components/top-down-letters.mdx
@@ -0,0 +1,151 @@
+---
+title: "Top-Down Letters"
+description: "Letters descend from above in a pronounced staircase with zero blur."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/top-down-letters.html"
+  compositionId="top-down-letters"
+  compositionSrc="compositions/components/top-down-letters.html"
+  variables={[{"id":"text","type":"string","role":"content","label":"Text","description":"Word that cascades in. Every character becomes one letter span, in source order.","default":"CASCADE"},{"id":"distance","type":"enum","role":"motion","label":"Distance","description":"Multiplies the drop the timeline drives, so the letters cover a shorter or longer run in the same time.","default":"standard","options":[{"value":"close","label":"Close"},{"value":"standard","label":"Standard"},{"value":"far","label":"Far"}]},{"id":"tone","type":"enum","role":"style","label":"Tone","description":"Letter colour: ink for light frames, paper for dark ones, accent rides --brand.","default":"ink","options":[{"value":"ink","label":"Ink"},{"value":"paper","label":"Paper"},{"value":"accent","label":"Accent"}]}]}
+>
+
+```html top-down-letters.html
+<!--
+  Top-Down Letters - remocn typography primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Drive the timeline
+  integration from a paused GSAP timeline so renders remain deterministic.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result either into the
+  markup or into a custom property the CSS above consumes. The timeline recipe
+  below is untouched by them: it keeps driving one offset per letter, and these
+  decide which letters fall, how far that offset carries them, and what colour
+  they are.
+
+    - text (string, default CASCADE): the word that cascades. Every character
+      becomes one span, in source order, exactly like the hand-written markup;
+      a space becomes a non-breaking space so it keeps its width in the flex
+      row. Anything that is not a non-empty string keeps the shipped word.
+    - distance (close | standard | far, default standard): multiplies the drop
+      the timeline drives, so the letters cover a shorter or longer run in the
+      same time. close covers half of it, standard leaves the shipped 42px
+      alone, far carries them nearly double.
+    - tone (ink | paper | accent, default ink): letter colour. ink is
+      near-black for light frames, paper near-white for dark ones, accent
+      rides --brand.
+
+  On every default the result is identical to the original: the seven
+  near-black letters of CASCADE dropping 42px into place.
+-->
+
+<div
+  class="hf-remocn-top-down-letters"
+  data-composition-variables='[
+    { "id": "text", "type": "string", "role": "content", "label": "Text", "description": "Word that cascades in. Every character becomes one letter span, in source order.", "default": "CASCADE" },
+    { "id": "distance", "type": "enum", "role": "motion", "label": "Distance", "description": "Multiplies the drop the timeline drives, so the letters cover a shorter or longer run in the same time.", "default": "standard", "options": [{ "value": "close", "label": "Close" }, { "value": "standard", "label": "Standard" }, { "value": "far", "label": "Far" }] },
+    { "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Letter colour: ink for light frames, paper for dark ones, accent rides --brand.", "default": "ink", "options": [{ "value": "ink", "label": "Ink" }, { "value": "paper", "label": "Paper" }, { "value": "accent", "label": "Accent" }] }
+  ]'
+>
+  <span>C</span><span>A</span><span>S</span><span>C</span><span>A</span><span>D</span><span>E</span>
+</div>
+
+<style>
+  .hf-remocn-top-down-letters {
+    color: var(--hf-letters-color, #18181b);
+    font-family: Inter, system-ui, sans-serif;
+    font-weight: 900;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-top-down-letters {
+    display: inline-flex;
+    gap: 1px;
+    font-size: 74px;
+    line-height: 0.9;
+    overflow: hidden;
+  }
+  .hf-remocn-top-down-letters span {
+    display: inline-block;
+    transform: translateY(calc(var(--hf-char-y, 0px) * var(--hf-char-distance, 1)));
+    will-change: transform, opacity;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    var distances = { close: 0.5, standard: 1, far: 1.8 };
+    var tones = {
+      ink: "#18181b",
+      paper: "#fafafa",
+      accent: "var(--brand, #34d399)",
+    };
+
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var distance = distances[pick(distances, vars.distance, "standard")];
+    var tone = tones[pick(tones, vars.tone, "ink")];
+    var text = typeof vars.text === "string" && vars.text !== "" ? vars.text : null;
+
+    var roots = document.querySelectorAll(".hf-remocn-top-down-letters");
+    for (var i = 0; i < roots.length; i += 1) {
+      var root = roots[i];
+      root.style.setProperty("--hf-char-distance", String(distance));
+      root.style.setProperty("--hf-letters-color", tone);
+
+      // Only rebuild when text was supplied; the shipped markup is already the
+      // exact span-per-character output this branch produces for CASCADE.
+      if (text !== null) {
+        var characters = Array.from(text);
+        root.textContent = "";
+        for (var j = 0; j < characters.length; j += 1) {
+          var span = document.createElement("span");
+          span.textContent = characters[j] === " " ? "\u00a0" : characters[j];
+          root.appendChild(span);
+        }
+        root.setAttribute("aria-label", text);
+      }
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-top-down-letters span', { opacity: 0, '--hf-char-y': '-42px' }, { opacity: 1, '--hf-char-y': '0px', duration: 0.22, stagger: 0.035, ease: 'power3.out' }, startTime);
+-->
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add top-down-letters" />
+
+That writes one file: `compositions/components/top-down-letters.html`.
+
+## Usage
+
+Open `compositions/components/top-down-letters.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+
+{/* hf:generated-footer */}
+
+Tagged `video-primitive` `motion-primitive` `remocn-port` `typography`.
+
+## 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/components/touch-indicator.mdx b/docs/catalog/components/touch-indicator.mdx
new file mode 100644
index 0000000000..6e479b0e13
--- /dev/null
+++ b/docs/catalog/components/touch-indicator.mdx
@@ -0,0 +1,420 @@
+---
+title: "Touch Indicator"
+description: "A translucent contact-circle gesture actor for mobile UI scenes: it touches the glass, causes a same-frame response, and lifts. Tap or swipe, picked by variable."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/touch-indicator.html"
+  compositionId="touch-indicator"
+  compositionSrc="compositions/components/touch-indicator.html"
+  variables={[{"id":"gesture","type":"enum","label":"Gesture","default":"tap","options":[{"value":"tap","label":"Tap"},{"value":"swipe","label":"Swipe"}]},{"id":"polarity","type":"enum","label":"Polarity","default":"light","options":[{"value":"light","label":"Light (on dark UI)"},{"value":"dark","label":"Dark (on light UI)"}]},{"id":"targetX","type":"number","label":"Target X","default":50,"min":0,"max":100,"unit":"%"},{"id":"targetY","type":"number","label":"Target Y","default":55,"min":0,"max":100,"unit":"%"}]}
+>
+
+```html touch-indicator.html
+<!doctype html>
+<!--
+  touch-indicator -- HyperFrames video primitive (pointers / interaction / demonstrate)
+
+  CONCEPT: a translucent contact-circle that represents a fingertip touching
+  glass. It never hovers: every appearance resolves into a touch-down, every
+  touch causes a same-frame response on its target, every gesture ends with
+  a physical lift. One mechanic (tap or swipe, picked by a variable at
+  setup), one file. This is the mobile counterpart to an oversized cursor,
+  but it obeys touch physics, not pointer physics.
+
+  MOUNTABLE SUB-COMPOSITION: this file is loaded by a host via
+  data-composition-src, not pasted inline. The runtime only clones
+  <template> contents (see skills/hyperframes-core/references/sub-compositions.md),
+  so every style, the markup, and the script that builds and registers the
+  timeline all live inside <template> below. The file is self-driving: it
+  builds its own paused GSAP timeline and registers it under
+  window.__timelines["touch-indicator"] on load, matching the root's own
+  data-composition-id. A host mounts it with a matching
+  data-composition-id="touch-indicator" data-composition-src="./touch-indicator.html".
+
+  COMPILED FROM: hyperframes-corpus-data/mobile/gesture-actor-spec.md (the
+  contact-never-hover law, contact-circle sizing, tap anatomy, swipe law,
+  lift/exit law, same-frame target-reaction contract) with supporting
+  constants cross-checked against gesture-physics-recipes.md. Evidence
+  status: spec ready, no rendered corpus clips yet.
+
+  USE WHEN: a mobile UI scene needs a visible tap or swipe to cause the next
+  animation beat (button press, list scroll, card swipe, sheet reveal).
+  Skip it for cursor/pointer UI (use a cursor primitive) and for gestures
+  whose drawn path is itself the subject (use a trail primitive instead).
+
+  VARIABLES (declared below via data-composition-variables):
+    - gesture   enum "tap" | "swipe", default "tap"
+    - polarity  enum "light" | "dark", default "light"
+    - targetX   number 0-100 (percent of host width), default 50
+    - targetY   number 0-100 (percent of host height), default 55
+
+  ENVELOPE (seconds, 60fps frame-quantized, gesture = "tap"):
+    IN   0.000 - 0.167  approach (0.083) + touch-down compress (0.083)
+    HOLD 0.167 - 0.183  elastic dwell at compressed scale (stretch here only)
+    OUT  0.183 - 0.467  release (0.167) + lift (0.117), lift starts the
+                        instant release ends (0s gap, within the spec's
+                        <=0.04s allowance)
+
+  ENVELOPE (seconds, 60fps frame-quantized, gesture = "swipe"):
+    IN   0.000 - 0.167  approach (0.083) + touch-down compress (0.083)
+    HOLD 0.167 - 0.500  elastic travel: accelerate 41% / decelerate 59% of
+                        the stretchable swipe duration (default 0.333)
+    OUT  0.500 - 0.617  lift only (0.117); a swiping finger does not settle
+                        back to rest scale, it leaves mid-motion
+
+  SOUND CUES (fixed offsets, never inside the elastic HOLD):
+    touch-down  IN + 0.083s   -> soft fingertip contact
+    lift-off    tap:   OUT + 0.167s -> physical release tick
+                swipe: OUT + 0s     -> physical release tick (no bounce)
+
+  BUILT-IN RESPONSE: the primitive has to read standalone in a slot with no
+  host UI to react to it, so touch-down also drives its own contact-blur
+  ripple (EDIT ZONE: .hf-touch-indicator__contact, unchanged from the
+  original spec) plus a quiet radial pulse centered on the root
+  (.hf-touch-indicator__pulse, new). Both are token-painted and low-opacity
+  so they read as a same-frame acknowledgement, not a second effect
+  competing with a host's own reaction wiring.
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    {"id":"gesture","type":"enum","label":"Gesture","default":"tap","options":[{"value":"tap","label":"Tap"},{"value":"swipe","label":"Swipe"}]},
+    {"id":"polarity","type":"enum","label":"Polarity","default":"light","options":[{"value":"light","label":"Light (on dark UI)"},{"value":"dark","label":"Dark (on light UI)"}]},
+    {"id":"targetX","type":"number","label":"Target X","default":50,"min":0,"max":100,"unit":"%"},
+    {"id":"targetY","type":"number","label":"Target Y","default":55,"min":0,"max":100,"unit":"%"}
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Touch Indicator</title>
+    <!-- Head is metadata for the source file only; the mount runtime clones
+         only <template> contents and discards everything else, including
+         this head. See sub-compositions.md, "Pitfall 1".
+
+         The data-composition-variables declared on <html> above duplicates
+         the same schema on the #root div inside <template> below (the
+         "dual-carrier contract", core/src/runtime/compositionLoader.ts and
+         packages/parsers/src/htmlParser.ts both read declared defaults from
+         <html> only on the lazy external-load / CLI-metadata paths, while
+         the render-time bundler reads the template's root div). Keep both
+         copies in sync if the variable schema changes. -->
+  </head>
+  <body>
+    <template>
+      <style>
+        /* INVARIANT: root fills the host's box, position-blind, elastic to
+           whatever size a host slot gives it. No data-width/data-height on
+           the root -- the host slot owns the size (see mount contract).
+           Root is styled by #root, never a class (sub-compositions.md,
+           Pitfall 3). */
+        #root {
+          position: absolute;
+          inset: 0;
+          container-type: inline-size;
+          isolation: isolate;
+          pointer-events: none;
+        }
+
+        .hf-touch-indicator__pulse {
+          /* Root-level built-in response: a quiet radial flash centered on
+             the touch point, so the gesture reads even with no host UI to
+             react to it. Token-painted, low peak opacity -- see BUILT-IN
+             RESPONSE above. */
+          position: absolute;
+          left: 0;
+          top: 0;
+          width: clamp(120px, 30cqw, 320px);
+          height: clamp(120px, 30cqw, 320px);
+          border-radius: 50%;
+          background: radial-gradient(
+            circle,
+            color-mix(in srgb, var(--fg, #14181f) 30%, transparent) 0%,
+            transparent 72%
+          );
+          opacity: 0;
+          pointer-events: none;
+          will-change: transform, opacity;
+        }
+
+        .hf-touch-indicator__actor {
+          /* EDIT ZONE: sizing law from the spec, full-frame law (contact
+             circle target 5cqw of the host box). RETIME RANGE: floor
+             clamped to 46px (the spec's absolute floor, never smaller at
+             delivery scale) since cqw now resolves against whatever box a
+             host slot gives this mountable primitive, which can be much
+             narrower than a full 1920-wide frame. */
+          --hf-gesture-size: clamp(46px, 5cqw, 111px);
+          position: absolute;
+          left: 0;
+          top: 0;
+          width: var(--hf-gesture-size);
+          height: var(--hf-gesture-size);
+          opacity: 0;
+          visibility: hidden;
+          pointer-events: none;
+          will-change: transform, opacity;
+        }
+
+        .hf-touch-indicator__core {
+          position: absolute;
+          inset: 0;
+          box-sizing: border-box;
+          /* INVARIANT: circle geometry, hardcoded 50%, not var(--radius) -
+             that token is for rectangular UI corners, not this actor's
+             fixed disc. */
+          border-radius: 50%;
+          background: color-mix(in srgb, var(--bg, #ffffff) 68%, transparent);
+          border: 2px solid color-mix(in srgb, var(--fg, #14181f) 72%, transparent);
+          box-shadow: 0 4px 12px color-mix(in srgb, var(--fg, #14181f) 22%, transparent);
+          transform-origin: 50% 50%;
+          will-change: transform;
+        }
+
+        .hf-touch-indicator__actor--dark .hf-touch-indicator__core {
+          background: color-mix(in srgb, var(--fg, #14181f) 64%, transparent);
+          border-color: color-mix(in srgb, var(--bg, #ffffff) 86%, transparent);
+        }
+
+        .hf-touch-indicator__contact {
+          position: absolute;
+          left: 50%;
+          top: 54%;
+          width: 62%;
+          height: 22%;
+          border-radius: 50%;
+          background: color-mix(in srgb, var(--fg, #14181f) 32%, transparent);
+          filter: blur(5px);
+          opacity: 0;
+          /* INVARIANT: centering (xPercent/yPercent -50) and scaleX are set
+             by the FIRST GSAP tween below, not here - GSAP overwrites the
+             whole transform, so a static translate()+scaleX() here would be
+             discarded the instant the timeline renders
+             (gsap_css_transform_conflict). */
+          transform-origin: 50% 50%;
+          will-change: transform, opacity;
+        }
+      </style>
+
+      <div
+        id="root"
+        data-composition-id="touch-indicator"
+        data-composition-variables='[
+          {"id":"gesture","type":"enum","label":"Gesture","default":"tap","options":[{"value":"tap","label":"Tap"},{"value":"swipe","label":"Swipe"}]},
+          {"id":"polarity","type":"enum","label":"Polarity","default":"light","options":[{"value":"light","label":"Light (on dark UI)"},{"value":"dark","label":"Dark (on light UI)"}]},
+          {"id":"targetX","type":"number","label":"Target X","default":50,"min":0,"max":100,"unit":"%"},
+          {"id":"targetY","type":"number","label":"Target Y","default":55,"min":0,"max":100,"unit":"%"}
+        ]'
+      >
+        <div class="hf-touch-indicator__pulse"></div>
+        <div class="hf-touch-indicator__actor">
+          <div class="hf-touch-indicator__contact"></div>
+          <div class="hf-touch-indicator__core"></div>
+        </div>
+      </div>
+
+      <script>
+        (function () {
+          const FPS = 60;
+          const q = (s) => Math.max(1, Math.round(s * FPS)) / FPS;
+          const clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
+
+          // Coordinate law from the spec: the actor wrapper owns x/y
+          // (absolute position), the core owns press scale and the
+          // depth/lift offset, the contact shadow owns only its own opacity
+          // and scaleX, the root pulse owns only its own position/opacity/
+          // scale. Never tween two meanings on one transform channel.
+          function buildTouchIndicator(tl, root, { at = 0, elasticity = 1 } = {}) {
+            const defaults = { gesture: "tap", polarity: "light", targetX: 50, targetY: 55 };
+            // Per-instance overrides (a host's data-variable-values) land in
+            // window.__hfVariablesByComp, scoped by composition id. Reading
+            // window.__hfVariables directly here would silently ignore every
+            // host override -- window.__hyperframes.getVariables() is the
+            // scoped accessor, per the registry convention (see
+            // lower-third-bild.html, caption-texture.html).
+            const resolved =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : window.__hfVariables || {};
+            const vars = Object.assign({}, defaults, resolved);
+            const pulse = root.querySelector(".hf-touch-indicator__pulse");
+            const actor = root.querySelector(".hf-touch-indicator__actor");
+            const core = root.querySelector(".hf-touch-indicator__core");
+            const contact = root.querySelector(".hf-touch-indicator__contact");
+            if (vars.polarity === "dark") actor.classList.add("hf-touch-indicator__actor--dark");
+
+            // Compute layout geometry once at setup, never inside an ease/callback.
+            const hostW = root.clientWidth || 1;
+            const hostH = root.clientHeight || 1;
+            const x0 = (vars.targetX / 100) * hostW;
+            const y0 = (vars.targetY / 100) * hostH;
+            tl.set(pulse, { x: x0, y: y0, xPercent: -50, yPercent: -50 }, at);
+
+            // --- IN: fixed, never stretched. ---
+            const approach = q(0.09);
+            const down = q(0.08);
+            tl.fromTo(
+              actor,
+              { x: x0, y: y0, xPercent: -50, yPercent: -50, autoAlpha: 0 },
+              {
+                x: x0,
+                y: y0,
+                xPercent: -50,
+                yPercent: -50,
+                autoAlpha: 1,
+                duration: approach,
+                ease: "power2.out",
+                immediateRender: false,
+              },
+              at,
+            );
+            tl.fromTo(
+              core,
+              { y: -10, scale: 0.72 },
+              { y: 0, scale: 1, duration: approach, ease: "power2.out", immediateRender: false },
+              at,
+            );
+
+            const touchDown = at + approach; // sync point: fixed +0.083s into IN
+            const coreDownScale = vars.gesture === "swipe" ? 0.86 : 0.82;
+            tl.fromTo(
+              core,
+              { scale: 1 },
+              { scale: coreDownScale, duration: down, ease: "power2.in", immediateRender: false },
+              touchDown,
+            );
+            tl.fromTo(
+              contact,
+              { autoAlpha: 0, scaleX: 0.62, xPercent: -50, yPercent: -50 },
+              {
+                autoAlpha: 0.34,
+                scaleX: 1,
+                xPercent: -50,
+                yPercent: -50,
+                duration: down,
+                ease: "power2.in",
+                immediateRender: false,
+              },
+              touchDown,
+            );
+            // Built-in root pulse: same-frame acknowledgement so the
+            // gesture reads even with no host UI wired to react to it.
+            tl.fromTo(
+              pulse,
+              { autoAlpha: 0, scale: 0.4 },
+              {
+                autoAlpha: 0.35,
+                scale: 1,
+                duration: down,
+                ease: "power2.out",
+                immediateRender: false,
+              },
+              touchDown,
+            );
+            tl.to(
+              pulse,
+              { autoAlpha: 0, scale: 1.4, duration: q(0.24), ease: "power2.out" },
+              touchDown + down,
+            );
+
+            const inEnd = at + approach + down;
+
+            // --- HOLD: the only elastic phase. Stretch it, never gsap.timeScale(). ---
+            let holdEnd;
+            if (vars.gesture === "swipe") {
+              // RETIME RANGE: 0.28s - 0.52s per the swipe law. elasticity scales pacing.
+              const swipeDuration = q(clamp(0.34 * elasticity, 0.28, 0.52));
+              const travel = hostH * 0.4; // vertical scroll, 40% of host height (32-68% allowed)
+              const accel = q(swipeDuration * 0.41);
+              const decel = swipeDuration - accel;
+              const bendY = y0 - travel * 0.41;
+              const endY = y0 - travel;
+              tl.fromTo(
+                actor,
+                { x: x0, y: y0 },
+                { x: x0, y: bendY, duration: accel, ease: "power2.in", immediateRender: false },
+                inEnd,
+              );
+              tl.to(actor, { x: x0, y: endY, duration: decel, ease: "power3.out" }, inEnd + accel);
+              holdEnd = inEnd + swipeDuration;
+            } else {
+              // RETIME RANGE: 0.02s - 0.10s. A brief contact dwell, never a
+              // long-press (long-press is a distinct gesture with its own
+              // progress-ring recognizer).
+              const holdDuration = q(clamp(0.02 * elasticity, 0.02, 0.1));
+              holdEnd = inEnd + holdDuration;
+            }
+
+            // --- OUT: fixed, never stretched. ---
+            if (vars.gesture === "swipe") {
+              const liftDuration = q(0.12);
+              tl.to(contact, { autoAlpha: 0, duration: q(0.08), ease: "power2.out" }, holdEnd);
+              tl.to(
+                core,
+                { y: -10, scale: 0.74, duration: liftDuration, ease: "power2.in" },
+                holdEnd,
+              );
+              tl.to(actor, { autoAlpha: 0, duration: liftDuration, ease: "power2.in" }, holdEnd);
+              return { touchDown, holdStart: inEnd, holdEnd, settle: holdEnd + liftDuration };
+            }
+
+            const release = q(0.16);
+            tl.to(core, { scale: 1, duration: release, ease: "power2.out" }, holdEnd);
+            tl.to(
+              contact,
+              { autoAlpha: 0, scaleX: 0.72, duration: q(0.12), ease: "power2.out" },
+              holdEnd,
+            );
+            const liftStart = holdEnd + release; // 0s gap, within the spec's <=0.04s allowance
+            const liftDuration = q(0.12);
+            tl.to(
+              core,
+              { y: -10, scale: 0.74, duration: liftDuration, ease: "power2.in" },
+              liftStart,
+            );
+            tl.to(actor, { autoAlpha: 0, duration: liftDuration, ease: "power2.in" }, liftStart);
+            return { touchDown, holdStart: inEnd, holdEnd, settle: liftStart + liftDuration };
+          }
+
+          // Self-driving mount: build the paused timeline and register it
+          // under this file's own data-composition-id, matching the host's
+          // data-composition-src wiring (sub-compositions.md, Pitfall 2).
+          const root = document.querySelector('[data-composition-id="touch-indicator"]');
+          const tl = gsap.timeline({ paused: true });
+          window.__timelines = window.__timelines || {};
+          window.__timelines["touch-indicator"] = tl;
+          buildTouchIndicator(tl, root, { at: 0 });
+        })();
+      </script>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add touch-indicator" />
+
+That writes one file: `compositions/components/touch-indicator.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/touch-indicator.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `mobile` `gesture` `touch` `pointer`.
+
+## 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/components/tracing-beam.mdx b/docs/catalog/components/tracing-beam.mdx
new file mode 100644
index 0000000000..be2a23b631
--- /dev/null
+++ b/docs/catalog/components/tracing-beam.mdx
@@ -0,0 +1,441 @@
+---
+title: "Tracing Beam"
+description: "A glowing dash follows one SVG path through three UI elements, lifting and brightening each element in sequence."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/tracing-beam.html"
+  compositionId="tracing-beam"
+  compositionSrc="compositions/components/tracing-beam.html"
+  variables={[{"id":"labels","type":"string","role":"content","label":"Labels","description":"Three comma-separated labels shown in path order.","default":"Search,Preview,Export"},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Beam and active-element color.","default":"cyan","options":[{"value":"cyan","label":"Cyan"},{"value":"violet","label":"Violet"},{"value":"amber","label":"Amber"}]}]}
+>
+
+```html tracing-beam.html
+<!doctype html>
+<!--
+  tracing-beam: HyperFrames video primitive (product-demo / attention)
+
+  Concept: one glowing dash follows one authored SVG path through three UI
+  elements. Each element brightens and lifts on arrival, then settles as the
+  dash moves on. The final element stays active until the beam exits.
+
+  Variables:
+    - labels (string, default "Search,Preview,Export"): three comma-separated
+      labels shown in path order.
+    - accent (enum, default "cyan"): cyan, violet, or amber beam color.
+
+  Envelope: fixed 3.00s IN, elastic HOLD, fixed 0.55s OUT. If the mounted
+  duration is shorter than 3.55s, IN and OUT compress proportionally. Only
+  HOLD grows when the mounted duration is longer.
+
+  IN: the stage appears, then the dash visits all three elements in order.
+  HOLD: the dash rests on the final element with a subtle vertical drift.
+  OUT: the dash leaves the path, the final element settles, and the stage fades.
+
+  Mount contract: everything needed at runtime lives inside this template.
+  #root fills the host box with container query units and registers exactly
+  one paused timeline under the hardcoded tracing-beam key.
+-->
+<html
+  lang="en"
+  data-composition-id="tracing-beam"
+  data-composition-duration="4.5"
+  data-composition-variables='[
+    { "id": "labels", "type": "string", "role": "content", "label": "Labels", "description": "Three comma-separated labels shown in path order.", "default": "Search,Preview,Export" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Beam and active-element color.", "default": "cyan", "options": [{ "value": "cyan", "label": "Cyan" }, { "value": "violet", "label": "Violet" }, { "value": "amber", "label": "Amber" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Tracing Beam</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="tracing-beam" data-duration="4.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .tb-clip,
+          .tb-stage {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+          }
+
+          .tb-stage {
+            opacity: 0;
+          }
+
+          .tb-route {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+            overflow: visible;
+          }
+
+          .tb-beam {
+            fill: none;
+            stroke: var(--tb-accent, #5ee7ff);
+            stroke-width: 9;
+            stroke-linecap: round;
+            stroke-linejoin: round;
+            filter: url(#tracing-beam-glow);
+            opacity: 0;
+            will-change: stroke-dashoffset, opacity;
+          }
+
+          .tb-anchor {
+            position: absolute;
+            width: 22cqw;
+            height: 24cqh;
+            transform: translate(-50%, -50%);
+          }
+
+          .tb-anchor:nth-child(1) {
+            left: 15%;
+            top: 60%;
+          }
+
+          .tb-anchor:nth-child(2) {
+            left: 50%;
+            top: 35%;
+          }
+
+          .tb-anchor:nth-child(3) {
+            left: 85%;
+            top: 58%;
+          }
+
+          .tb-node {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            will-change: transform;
+          }
+
+          .tb-halo {
+            position: absolute;
+            inset: -24%;
+            border-radius: 50%;
+            background: radial-gradient(
+              circle,
+              color-mix(in srgb, var(--tb-accent, #5ee7ff) 42%, transparent) 0%,
+              transparent 70%
+            );
+            opacity: 0;
+            will-change: transform, opacity;
+          }
+
+          .tb-card {
+            position: relative;
+            z-index: 1;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            gap: 2.2cqw;
+            padding: 2.4cqh 2.2cqw;
+            overflow: hidden;
+            border: 0.16cqmin solid color-mix(in srgb, var(--border, #475569) 78%, transparent);
+            border-radius: var(--radius, 2.8cqmin);
+            background: color-mix(in srgb, var(--surface, #172033) 92%, transparent);
+            box-shadow: 0 2.4cqh 6cqh color-mix(in srgb, var(--bg, #0b0c0e) 56%, transparent);
+            opacity: 0.48;
+            will-change: opacity;
+          }
+
+          .tb-icon {
+            flex: 0 0 auto;
+            width: 7.5cqmin;
+            aspect-ratio: 1;
+            display: grid;
+            place-items: center;
+            border: 0.14cqmin solid color-mix(in srgb, var(--tb-accent, #5ee7ff) 52%, transparent);
+            border-radius: 2cqmin;
+            background: color-mix(in srgb, var(--tb-accent, #5ee7ff) 14%, var(--surface, #172033));
+            color: var(--tb-accent, #5ee7ff);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
+            font-size: clamp(13px, 3.5cqmin, 28px);
+            font-weight: 760;
+          }
+
+          .tb-copy {
+            min-width: 0;
+          }
+
+          .tb-kicker {
+            margin-bottom: 0.8cqh;
+            color: var(--muted, #94a3b8);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
+            font-size: clamp(9px, 1.7cqmin, 16px);
+            font-weight: 650;
+            letter-spacing: 0.14em;
+            text-transform: uppercase;
+          }
+
+          .tb-label {
+            max-width: 100%;
+            overflow: hidden;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: clamp(13px, 4.6cqmin, 38px);
+            font-weight: 720;
+            line-height: 1.05;
+            letter-spacing: -0.025em;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+        </style>
+
+        <div
+          id="tracing-beam-clip"
+          class="tb-clip clip"
+          data-start="0"
+          data-duration="4.5"
+          data-track-index="0"
+        >
+          <div class="tb-stage">
+            <svg
+              class="tb-route"
+              viewBox="0 0 1000 520"
+              preserveAspectRatio="none"
+              aria-hidden="true"
+            >
+              <defs>
+                <filter id="tracing-beam-glow" x="-30%" y="-30%" width="160%" height="160%">
+                  <feGaussianBlur stdDeviation="7" result="blur" />
+                  <feMerge>
+                    <feMergeNode in="blur" />
+                    <feMergeNode in="SourceGraphic" />
+                  </feMerge>
+                </filter>
+              </defs>
+              <path
+                class="tb-beam"
+                d="M 150 312 C 280 312 335 182 500 182 C 665 182 720 302 850 302"
+              />
+            </svg>
+
+            <div class="tb-nodes">
+              <div class="tb-anchor">
+                <div class="tb-node">
+                  <div class="tb-halo"></div>
+                  <div class="tb-card">
+                    <div class="tb-icon">01</div>
+                    <div class="tb-copy">
+                      <div class="tb-kicker">Step one</div>
+                      <div class="tb-label"></div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="tb-anchor">
+                <div class="tb-node">
+                  <div class="tb-halo"></div>
+                  <div class="tb-card">
+                    <div class="tb-icon">02</div>
+                    <div class="tb-copy">
+                      <div class="tb-kicker">Step two</div>
+                      <div class="tb-label"></div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="tb-anchor">
+                <div class="tb-node">
+                  <div class="tb-halo"></div>
+                  <div class="tb-card">
+                    <div class="tb-icon">03</div>
+                    <div class="tb-copy">
+                      <div class="tb-kicker">Step three</div>
+                      <div class="tb-label"></div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".tb-stage");
+            var beam = root.querySelector(".tb-beam");
+            var nodes = root.querySelectorAll(".tb-node");
+            var labels = root.querySelectorAll(".tb-label");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var defaultLabels = ["Search", "Preview", "Export"];
+            var labelValue = vars.labels == null ? defaultLabels.join(",") : String(vars.labels);
+            var labelParts = labelValue.split(",");
+            for (var i = 0; i < labels.length; i += 1) {
+              var part = labelParts[i] == null ? "" : labelParts[i].trim();
+              labels[i].textContent = part === "" ? defaultLabels[i] : part;
+            }
+
+            var accentName =
+              vars.accent === "violet" || vars.accent === "amber" ? vars.accent : "cyan";
+            var accentColors = {
+              cyan: "var(--accent, #5ee7ff)",
+              violet: "var(--accent-2, #a78bfa)",
+              amber: "var(--brand, #fbbf24)",
+            };
+            root.style.setProperty("--tb-accent", accentColors[accentName]);
+
+            var routeLength = beam.getTotalLength();
+            var dashLength = routeLength * 0.24;
+            beam.style.strokeDasharray = dashLength + " " + routeLength;
+            beam.style.strokeDashoffset = String(dashLength);
+
+            var IN_BASE = 3;
+            var OUT_BASE = 0.55;
+            var BEAM_START_BASE = 0.35;
+            var BEAM_TRAVEL_BASE = 2.35;
+            var NODE_MOVE_BASE = 0.28;
+            var NODE_DIM_DELAY_BASE = 0.65;
+            var BEAM_EXIT_BASE = 0.28;
+
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4.5"));
+            var fixedDuration = IN_BASE + OUT_BASE;
+            var scale = duration < fixedDuration ? duration / fixedDuration : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var BEAM_START = BEAM_START_BASE * scale;
+            var BEAM_TRAVEL = BEAM_TRAVEL_BASE * scale;
+            var NODE_MOVE = NODE_MOVE_BASE * scale;
+            var NODE_DIM_DELAY = NODE_DIM_DELAY_BASE * scale;
+            var BEAM_EXIT = BEAM_EXIT_BASE * scale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var HOLD_START = IN;
+            var OUT_START = IN + HOLD;
+            var arrivals = [BEAM_START, BEAM_START + BEAM_TRAVEL * 0.5, BEAM_START + BEAM_TRAVEL];
+
+            gsap.set(stage, { opacity: 0 });
+            gsap.set(beam, { opacity: 0 });
+            gsap.set(nodes, { y: 0 });
+            gsap.set(root.querySelectorAll(".tb-halo"), { scale: 0.82 });
+
+            var tl = gsap.timeline({ paused: true });
+
+            function brighten(node, at) {
+              var card = node.querySelector(".tb-card");
+              var halo = node.querySelector(".tb-halo");
+              tl.to(node, { y: "-2.2cqh", duration: NODE_MOVE, ease: "power3.out" }, at);
+              tl.to(card, { opacity: 1, duration: NODE_MOVE, ease: "power2.out" }, at);
+              tl.to(halo, { opacity: 0.86, scale: 1, duration: NODE_MOVE, ease: "power3.out" }, at);
+            }
+
+            function dim(node, at) {
+              var card = node.querySelector(".tb-card");
+              var halo = node.querySelector(".tb-halo");
+              tl.to(node, { y: 0, duration: NODE_MOVE, ease: "power2.out" }, at);
+              tl.to(card, { opacity: 0.48, duration: NODE_MOVE, ease: "power2.out" }, at);
+              tl.to(halo, { opacity: 0, scale: 0.82, duration: NODE_MOVE, ease: "power2.out" }, at);
+            }
+
+            tl.to(stage, { opacity: 1, duration: Math.min(0.35, IN), ease: "power2.out" }, 0);
+            tl.to(beam, { opacity: 1, duration: NODE_MOVE, ease: "power2.out" }, BEAM_START);
+            tl.to(
+              beam,
+              {
+                strokeDashoffset: -(routeLength - dashLength),
+                duration: BEAM_TRAVEL,
+                ease: "sine.inOut",
+              },
+              BEAM_START,
+            );
+
+            brighten(nodes[0], arrivals[0]);
+            brighten(nodes[1], arrivals[1]);
+            brighten(nodes[2], arrivals[2]);
+            dim(nodes[0], arrivals[0] + NODE_DIM_DELAY);
+            dim(nodes[1], arrivals[1] + NODE_DIM_DELAY);
+
+            if (HOLD > 0.2) {
+              tl.to(
+                nodes[2],
+                { y: "-2.7cqh", duration: HOLD * 0.5, ease: "sine.inOut" },
+                HOLD_START,
+              );
+              tl.to(
+                nodes[2],
+                { y: "-2.2cqh", duration: HOLD * 0.5, ease: "sine.inOut" },
+                HOLD_START + HOLD * 0.5,
+              );
+            }
+
+            tl.to(
+              beam,
+              {
+                strokeDashoffset: -routeLength,
+                opacity: 0,
+                duration: BEAM_EXIT,
+                ease: "power2.in",
+              },
+              OUT_START,
+            );
+            dim(nodes[2], OUT_START);
+            tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["tracing-beam"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add tracing-beam" />
+
+That writes one file: `compositions/components/tracing-beam.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/tracing-beam.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `product-demo` `attention` `beam` `path` `spotlight`.
+
+## 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/components/tracking-in.mdx b/docs/catalog/components/tracking-in.mdx
new file mode 100644
index 0000000000..ff0b4465af
--- /dev/null
+++ b/docs/catalog/components/tracking-in.mdx
@@ -0,0 +1,154 @@
+---
+title: "Tracking In"
+description: "A precise letter-spacing reveal for premium headings and interface labels"
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/components/tracking-in.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Tracking In preview" />
+
+## Install
+
+<InstallCommand command="npx hyperframes add tracking-in" />
+
+That writes one file: `compositions/components/tracking-in.html`.
+
+## Variables
+
+Every one of these has a default, so the piece works untouched. Set the ones you
+want to change on the element:
+
+| Variable | Default | Accepts | What it does |
+| --- | --- | --- | --- |
+| `tracking` | `standard` | `tight`, `standard`, `wide` | Multiplies the letter-spacing the timeline drives, so the reveal starts and settles proportionally wider or tighter. |
+| `rise` | `standard` | `subtle`, `standard`, `bold` | Vertical offset the text starts from, which the timeline reads as the start of its travel and eases to zero. |
+| `tone` | `inherit` | `inherit`, `ink`, `paper`, `accent` | Text colour: inherit keeps the surrounding page colour, ink suits light frames, paper dark ones, accent rides --brand. |
+
+Set them with `data-variable-values` on the element that mounts it. These are the
+defaults, so this behaves exactly like the preview above until you change one:
+
+```html wrap
+<div
+  data-composition-id="tracking-in"
+  data-composition-src="compositions/components/tracking-in.html"
+  data-variable-values='{"tracking":"standard","rise":"standard","tone":"inherit"}'
+></div>
+```
+
+## Source
+
+<Accordion title={`tracking-in.html`}>
+
+```html
+<!--
+  Tracking In - letter-spacing reveal.
+
+  Add class="hf-tracking-in" to text elements, then animate the CSS variable
+  from wide tracking to the final value in your composition timeline.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result as a custom property
+  on the document root, which every element carrying the class inherits. The
+  timeline recipe below is untouched by them: it keeps driving one tracking
+  value and one opacity, and these decide how wide that tracking reads, where
+  the text starts, and what colour it settles in.
+
+    - tracking (tight | standard | wide, default standard): multiplies the
+      letter-spacing the timeline drives. It scales the whole curve, so the
+      reveal starts proportionally wider or tighter and settles the same way.
+      tight is 0.6 of the shipped spacing, wide is 1.8 of it.
+    - rise (subtle | standard | bold, default standard): the vertical offset
+      the text starts from, which the timeline reads as the start of its
+      travel and eases to zero. subtle is 4px, standard the shipped 8px, bold
+      18px.
+    - tone (inherit | ink | paper | accent, default inherit): text colour.
+      inherit leaves the surrounding page colour alone, ink is near-black for
+      light frames, paper near-white for dark ones, accent rides --brand.
+      The class starts at opacity 0, so the colour only becomes visible once
+      the timeline reveals the text.
+
+  On every default the result is identical to the original: text at the page
+  colour rising 8px into place out of 0.28em tracking.
+-->
+
+<style
+  data-composition-variables='[
+    { "id": "tracking", "type": "enum", "role": "style", "label": "Tracking", "description": "Multiplies the letter-spacing the timeline drives, so the reveal starts and settles proportionally wider or tighter.", "default": "standard", "options": [{ "value": "tight", "label": "Tight" }, { "value": "standard", "label": "Standard" }, { "value": "wide", "label": "Wide" }] },
+    { "id": "rise", "type": "enum", "role": "motion", "label": "Rise", "description": "Vertical offset the text starts from, which the timeline reads as the start of its travel and eases to zero.", "default": "standard", "options": [{ "value": "subtle", "label": "Subtle" }, { "value": "standard", "label": "Standard" }, { "value": "bold", "label": "Bold" }] },
+    { "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Text colour: inherit keeps the surrounding page colour, ink suits light frames, paper dark ones, accent rides --brand.", "default": "inherit", "options": [{ "value": "inherit", "label": "Inherit" }, { "value": "ink", "label": "Ink" }, { "value": "paper", "label": "Paper" }, { "value": "accent", "label": "Accent" }] }
+  ]'
+>
+  .hf-tracking-in {
+    opacity: 0;
+    color: var(--hf-tracking-color, inherit);
+    letter-spacing: calc(var(--hf-tracking-value, 0.28em) * var(--hf-tracking-reach, 1));
+    transform: translateY(var(--hf-tracking-y, 8px));
+    will-change: opacity, letter-spacing, transform;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    var reaches = { tight: 0.6, standard: 1, wide: 1.8 };
+    var rises = { subtle: "4px", standard: "8px", bold: "18px" };
+    var tones = {
+      inherit: "inherit",
+      ink: "#18181b",
+      paper: "#fafafa",
+      accent: "var(--brand, #34d399)",
+    };
+
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var reach = reaches[pick(reaches, vars.tracking, "standard")];
+    var rise = rises[pick(rises, vars.rise, "standard")];
+    var tone = tones[pick(tones, vars.tone, "inherit")];
+
+    // The class is applied to arbitrary host elements, so the resolved values
+    // ride the document root and inherit down to every one of them.
+    var host = document.documentElement;
+    host.style.setProperty("--hf-tracking-reach", String(reach));
+    host.style.setProperty("--hf-tracking-y", rise);
+    host.style.setProperty("--hf-tracking-color", tone);
+  })();
+</script>
+
+<!--
+  Timeline integration:
+
+  tl.to(".hf-tracking-in", {
+    opacity: 1,
+    "--hf-tracking-value": "0.02em",
+    y: 0,
+    duration: 0.9,
+    ease: "power3.out",
+    stagger: 0.1,
+  }, startTime);
+-->
+```
+
+</Accordion>
+
+## Usage
+
+Open `compositions/components/tracking-in.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `text` `reveal` `typography`.
+
+## 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/components/trust-strip.mdx b/docs/catalog/components/trust-strip.mdx
new file mode 100644
index 0000000000..327d4d8837
--- /dev/null
+++ b/docs/catalog/components/trust-strip.mdx
@@ -0,0 +1,268 @@
+---
+title: "Trust Strip"
+description: "A monochrome trust row of wide-tracked mono wordmarks that fade in with an opacity-only left-to-right stagger, then hold dead still."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/trust-strip.html"
+  compositionId="trust-strip"
+  compositionSrc="compositions/components/trust-strip.html"
+  variables={[{"id":"marks","type":"string","role":"content","label":"Marks","description":"Comma-separated wordmark texts (3 to 7 recommended).","default":"Northwind, Acme Corp, Globex, Initech, Umbra"},{"id":"tone","type":"enum","role":"style","label":"Tone","description":"Mark color: quiet muted or full-contrast ink.","default":"muted","options":[{"value":"muted","label":"Muted"},{"value":"ink","label":"Ink"}]},{"id":"cues","type":"string","role":"timing","label":"Cues","description":"Comma-separated reveal starts in seconds from mount start. Empty uses the authored 0.15s stagger.","default":""},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Faint palette tint mixed into the mark color.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"End-of-clip behavior. None holds to the last frame.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
+>
+
+```html trust-strip.html
+<!doctype html>
+<!--
+  trust-strip: HyperFrames video primitive (proof & stats / trust)
+
+  A monochrome trust row: N text wordmarks set in wide-tracked uppercase mono,
+  a single centered row with wide gaps, no boxes, no borders. Marks fade in
+  with an opacity-only stagger from left to right, then the strip holds dead
+  still. Above five marks the row wraps gracefully to a second centered row
+  when width demands (reading order is preserved).
+
+  Variables:
+    - marks (string, comma list): the wordmark texts, 3 to 7 recommended.
+    - tone (muted | ink, default "muted"): mark color, var(--muted) or var(--fg).
+    - cues (string, comma seconds): per-mark reveal starts relative to mount
+      start. Empty = authored rhythm (first mark at 0.2s, 0.15s gap).
+    - accent (green | blue | violet, default "green"): a faint 10% tint mixed
+      into the mark color so the strip sits in the scene palette; the strip
+      still reads monochrome.
+    - exit (none | fade | up, default "none"): none holds to the last frame
+      (frame roots own transitions); fade dissolves; up dissolves with a rise.
+
+  Envelope, fixed IN and OUT with elastic HOLD only (never timeScale):
+    IN   = last reveal start + 0.5s fade
+    HOLD = max(0, D - IN - OUT), dead still
+    OUT  = 0 when exit is none, else 0.45s
+    If D is shorter than IN + OUT, both compress together (cues included).
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, has no data-width or
+  data-height, and registers one paused timeline under the literal
+  trust-strip key.
+-->
+<html
+  lang="en"
+  data-composition-id="trust-strip"
+  data-composition-duration="3.5"
+  data-composition-variables='[
+    { "id": "marks", "type": "string", "role": "content", "label": "Marks", "description": "Comma-separated wordmark texts (3 to 7 recommended).", "default": "Northwind, Acme Corp, Globex, Initech, Umbra" },
+    { "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Mark color: quiet muted or full-contrast ink.", "default": "muted", "options": [{ "value": "muted", "label": "Muted" }, { "value": "ink", "label": "Ink" }] },
+    { "id": "cues", "type": "string", "role": "timing", "label": "Cues", "description": "Comma-separated reveal starts in seconds from mount start. Empty uses the authored 0.15s stagger.", "default": "" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Faint palette tint mixed into the mark color.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "End-of-clip behavior. None holds to the last frame.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Trust Strip</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="trust-strip" data-duration="3.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            background: var(--bg, transparent);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            pointer-events: none;
+          }
+
+          .ts-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+          }
+
+          .ts-strip {
+            display: flex;
+            flex-wrap: wrap;
+            align-items: baseline;
+            justify-content: center;
+            width: 86cqw;
+            max-width: 86cqw;
+            column-gap: var(--space-3, 4.8cqw);
+            row-gap: var(--space-2, 4.2cqh);
+            will-change: transform, opacity;
+          }
+
+          .ts-mark {
+            /* Monochrome by law: the tone token carries the color; the accent
+               token only tints it 10% so the strip sits in the palette. */
+            color: color-mix(in srgb, var(--ts-tone) 90%, var(--ts-accent));
+            font-size: min(1.9cqw, 6.4cqh);
+            font-weight: 400;
+            line-height: 1;
+            letter-spacing: 0.32em;
+            text-transform: uppercase;
+            white-space: nowrap;
+            will-change: opacity;
+          }
+        </style>
+
+        <div
+          id="trust-strip-clip"
+          class="ts-clip clip"
+          data-start="0"
+          data-duration="3.5"
+          data-track-index="0"
+        >
+          <div class="ts-strip" role="img"></div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var strip = root.querySelector(".ts-strip");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var marks = String(vars.marks == null ? "" : vars.marks)
+              .split(",")
+              .map(function (mark) {
+                return mark.trim();
+              })
+              .filter(Boolean);
+            if (marks.length === 0)
+              marks = ["Northwind", "Acme Corp", "Globex", "Initech", "Umbra"];
+
+            var tone = vars.tone === "ink" ? "ink" : "muted";
+            var toneColors = {
+              muted: "var(--muted, #93939f)",
+              ink: "var(--fg, #f8fafc)",
+            };
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            root.style.setProperty("--ts-tone", toneColors[tone]);
+            root.style.setProperty("--ts-accent", accentColors[accent]);
+            strip.setAttribute("aria-label", marks.join(", "));
+
+            var spans = marks.map(function (mark) {
+              var span = document.createElement("span");
+              span.className = "ts-mark";
+              span.textContent = mark;
+              span.setAttribute("aria-hidden", "true");
+              strip.appendChild(span);
+              return span;
+            });
+
+            var LEAD_BASE = 0.2;
+            var GAP_BASE = 0.15;
+            var FADE_BASE = 0.5;
+            var OUT_BASE = exit === "none" ? 0 : 0.45;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "3.5"));
+
+            // Reveal starts: caller cues win; missing tail entries extend from
+            // the last known start by the authored gap.
+            var cues = String(vars.cues == null ? "" : vars.cues)
+              .split(",")
+              .map(function (cue) {
+                return parseFloat(cue);
+              })
+              .filter(function (cue) {
+                return isFinite(cue) && cue >= 0;
+              });
+            var starts = marks.map(function (mark, index) {
+              if (index < cues.length) return cues[index];
+              if (cues.length > 0)
+                return cues[cues.length - 1] + GAP_BASE * (index - cues.length + 1);
+              return LEAD_BASE + GAP_BASE * index;
+            });
+
+            var IN_BASE = Math.max.apply(null, starts) + FADE_BASE;
+            var totalBase = IN_BASE + OUT_BASE;
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var FADE = FADE_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var OUT_START = duration - OUT;
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: opacity-only stagger, left to right in reading order.
+            spans.forEach(function (span, index) {
+              tl.fromTo(
+                span,
+                { opacity: 0 },
+                { opacity: 1, duration: FADE, ease: "power2.out" },
+                starts[index] * scale,
+              );
+            });
+
+            // HOLD: dead still. Nothing is authored here on purpose.
+
+            // OUT: optional whole-strip departure; frame roots own transitions
+            // by default, so exit "none" holds to the last frame.
+            if (exit === "fade") {
+              tl.to(strip, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "up") {
+              tl.to(strip, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+              tl.to(strip, { y: "-1.6cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["trust-strip"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add trust-strip" />
+
+That writes one file: `compositions/components/trust-strip.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/trust-strip.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `proof` `trust` `logo-strip` `wordmarks`.
+
+## 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/components/type-match-cut.mdx b/docs/catalog/components/type-match-cut.mdx
new file mode 100644
index 0000000000..032bb03efa
--- /dev/null
+++ b/docs/catalog/components/type-match-cut.mdx
@@ -0,0 +1,449 @@
+---
+title: "Type Match Cut"
+description: "A headline splits vertically around an incoming panel, which grows from the negative space and takes the frame as the words exit through opposite edges."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/type-match-cut.html"
+  compositionId="type-match-cut"
+  compositionSrc="compositions/components/type-match-cut.html"
+  variables={[{"id":"text","type":"string","role":"content","label":"Headline","description":"Text split around the incoming panel.","default":"Meet the new editor"},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Accent color used by the incoming editor scene.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]}]}
+>
+
+```html type-match-cut.html
+<!doctype html>
+<!--
+  type-match-cut: HyperFrames video primitive
+
+  A headline splits into upper and lower word groups. An incoming editor
+  panel appears in the negative space between them, holds there as a visible
+  geometric match, then grows to fill the frame while the words arc through
+  the top and bottom edges.
+
+  Variables:
+    text: headline copy
+    accent: green, blue, or violet incoming-scene accent
+
+  Envelope, fixed IN and OUT with elastic HOLD:
+    IN_BASE  = 1.05s, words separate and expose the matched panel slot
+    HOLD     = max(0, D - IN - OUT), the slot breathes almost imperceptibly
+    OUT_BASE = 1.15s, the panel takes the frame while both word groups exit
+    If D is shorter than IN_BASE + OUT_BASE, IN and OUT compress together.
+    The timeline is never time-scaled.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, and has no data-width or
+  data-height. One paused timeline registers under the literal type-match-cut
+  key.
+-->
+<html
+  lang="en"
+  data-composition-id="type-match-cut"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "text", "type": "string", "role": "content", "label": "Headline", "description": "Text split around the incoming panel.", "default": "Meet the new editor" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Accent color used by the incoming editor scene.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Type Match Cut</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="type-match-cut" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            background: var(--bg, #0b0c0e);
+            color: var(--fg, #f7f8fa);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .tmc-clip,
+          .tmc-panel,
+          .tmc-copy {
+            position: absolute;
+            inset: 0;
+            width: 100cqw;
+            height: 100cqh;
+          }
+
+          .tmc-clip {
+            overflow: hidden;
+          }
+
+          .tmc-panel {
+            z-index: 1;
+            overflow: hidden;
+            background: linear-gradient(145deg, #f8fafc 0%, #e8edf5 100%);
+            box-shadow: 0 4cqh 12cqh color-mix(in srgb, #000 45%, transparent);
+            transform-origin: 50% 50%;
+            will-change: transform, border-radius;
+          }
+
+          .tmc-editor {
+            width: 100%;
+            height: 100%;
+            display: grid;
+            grid-template-columns: 22cqw 1fr;
+            grid-template-rows: 11cqh 1fr;
+            color: #111827;
+          }
+
+          .tmc-toolbar {
+            grid-column: 1 / -1;
+            display: flex;
+            align-items: center;
+            gap: 1.1cqw;
+            padding: 0 4cqw;
+            border-bottom: 0.16cqmin solid #cbd5e1;
+            background: rgba(255, 255, 255, 0.72);
+          }
+
+          .tmc-mark {
+            width: 2.4cqmin;
+            aspect-ratio: 1;
+            border-radius: 50%;
+            background: var(--tmc-accent, #34d399);
+            box-shadow: 0 0 2cqmin color-mix(in srgb, var(--tmc-accent, #34d399) 46%, transparent);
+          }
+
+          .tmc-title {
+            font-size: 2.4cqmin;
+            font-weight: 800;
+            letter-spacing: -0.03em;
+          }
+
+          .tmc-status {
+            margin-left: auto;
+            padding: 1.1cqh 1.4cqw;
+            border-radius: 999px;
+            background: var(--tmc-accent, #34d399);
+            color: #07110d;
+            font-size: 1.7cqmin;
+            font-weight: 800;
+          }
+
+          .tmc-sidebar {
+            display: flex;
+            flex-direction: column;
+            gap: 2.4cqh;
+            padding: 5cqh 3cqw;
+            border-right: 0.16cqmin solid #cbd5e1;
+            background: #eef2f7;
+          }
+
+          .tmc-nav {
+            height: 1.5cqh;
+            border-radius: 999px;
+            background: #cbd5e1;
+          }
+
+          .tmc-nav:first-child {
+            width: 76%;
+            background: var(--tmc-accent, #34d399);
+          }
+
+          .tmc-nav:nth-child(2) {
+            width: 58%;
+          }
+
+          .tmc-nav:nth-child(3) {
+            width: 82%;
+          }
+
+          .tmc-canvas {
+            display: grid;
+            place-items: center;
+            padding: 7cqh 8cqw;
+            background: #dfe5ee;
+          }
+
+          .tmc-preview {
+            width: 100%;
+            height: 100%;
+            display: grid;
+            place-items: center;
+            border: 0.18cqmin solid #c2cad6;
+            border-radius: 3cqmin;
+            background: radial-gradient(
+              circle at 50% 42%,
+              color-mix(in srgb, var(--tmc-accent, #34d399) 32%, #1f2937) 0%,
+              #111827 68%
+            );
+            box-shadow: 0 3cqh 8cqh rgba(15, 23, 42, 0.2);
+          }
+
+          .tmc-play {
+            width: 12cqmin;
+            aspect-ratio: 1;
+            display: grid;
+            place-items: center;
+            border-radius: 50%;
+            background: var(--tmc-accent, #34d399);
+            color: #07110d;
+            font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+            font-size: 4.2cqmin;
+            font-weight: 900;
+          }
+
+          .tmc-copy {
+            z-index: 2;
+            overflow: hidden;
+            text-shadow: 0 1.4cqh 4.8cqh rgba(0, 0, 0, 0.72);
+          }
+
+          .tmc-half {
+            position: absolute;
+            top: calc(50% - 0.44em);
+            display: block;
+            width: 40cqw;
+            color: var(--fg, #f7f8fa);
+            font-size: var(--tmc-font-size, 10.5cqw);
+            font-weight: 900;
+            line-height: 0.88;
+            letter-spacing: -0.045em;
+            white-space: nowrap;
+            will-change: transform;
+          }
+
+          .tmc-top {
+            right: 52cqw;
+            text-align: right;
+          }
+
+          .tmc-bottom {
+            left: 52cqw;
+            text-align: left;
+          }
+        </style>
+
+        <div
+          id="type-match-cut-clip"
+          class="tmc-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <section class="tmc-panel" aria-label="Incoming editor scene">
+            <div class="tmc-editor">
+              <div class="tmc-toolbar">
+                <span class="tmc-mark" aria-hidden="true"></span>
+                <span class="tmc-title">New editor</span>
+                <span class="tmc-status">Ready</span>
+              </div>
+              <div class="tmc-sidebar" aria-hidden="true">
+                <span class="tmc-nav"></span>
+                <span class="tmc-nav"></span>
+                <span class="tmc-nav"></span>
+              </div>
+              <div class="tmc-canvas">
+                <div class="tmc-preview">
+                  <span class="tmc-play" aria-hidden="true">▶</span>
+                </div>
+              </div>
+            </div>
+          </section>
+
+          <div class="tmc-copy" role="heading" aria-level="1">
+            <span class="tmc-half tmc-top" aria-hidden="true"></span>
+            <span class="tmc-half tmc-bottom" aria-hidden="true"></span>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var panel = root.querySelector(".tmc-panel");
+            var copy = root.querySelector(".tmc-copy");
+            var topWords = root.querySelector(".tmc-top");
+            var bottomWords = root.querySelector(".tmc-bottom");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var text = vars.text == null ? "Meet the new editor" : String(vars.text);
+            var accentName =
+              vars.accent === "blue" || vars.accent === "violet" ? vars.accent : "green";
+            var accents = { green: "#34d399", blue: "#60a5fa", violet: "#a78bfa" };
+            var words = text.trim() === "" ? [""] : text.trim().split(/\s+/);
+            var splitAt = Math.ceil(words.length / 2);
+            var topText = words.slice(0, splitAt).join(" ");
+            var bottomText = words.slice(splitAt).join(" ");
+
+            root.style.setProperty("--tmc-accent", accents[accentName]);
+            copy.setAttribute("aria-label", text);
+            topWords.textContent = topText;
+            bottomWords.textContent = bottomText;
+
+            // Deterministic fit from character count. Layout measurement is
+            // zero while the mounted template is being constructed, so each
+            // half is sized against its authored 40cqw box instead. One em per
+            // character is the conservative ceiling, so even wide glyph runs
+            // remain inside the box.
+            var longestHalf = Math.max(1, topText.length, bottomText.length);
+            var fittedSize = Math.min(10.5, 40 / longestHalf);
+            root.style.setProperty("--tmc-font-size", fittedSize.toFixed(2) + "cqw");
+
+            var IN_BASE = 1.05;
+            var OUT_BASE = 1.15;
+            var SPLIT_AT_BASE = 0.14;
+            var SPLIT_DURATION_BASE = 0.58;
+            var PANEL_AT_BASE = 0.58;
+            var PANEL_DURATION_BASE = 0.47;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var fixedTotal = IN_BASE + OUT_BASE;
+            var phaseScale = duration < fixedTotal ? duration / fixedTotal : 1;
+            var IN = IN_BASE * phaseScale;
+            var OUT = OUT_BASE * phaseScale;
+            var SPLIT_AT = SPLIT_AT_BASE * phaseScale;
+            var SPLIT_DURATION = SPLIT_DURATION_BASE * phaseScale;
+            var PANEL_AT = PANEL_AT_BASE * phaseScale;
+            var PANEL_DURATION = PANEL_DURATION_BASE * phaseScale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var HOLD_START = IN;
+            var OUT_START = IN + HOLD;
+            var ARC_FIRST = OUT * 0.42;
+            var ARC_SECOND = OUT - ARC_FIRST;
+
+            var tl = gsap.timeline({ paused: true });
+
+            tl.set(panel, { scaleX: 0.02, scaleY: 0.02, borderRadius: "12cqmin" }, 0);
+            tl.set(topWords, { x: 0, y: 0 }, 0);
+            tl.set(bottomWords, { x: 0, y: 0 }, 0);
+
+            tl.to(
+              topWords,
+              { y: "-20cqh", duration: SPLIT_DURATION, ease: "power3.out" },
+              SPLIT_AT,
+            );
+            tl.to(
+              bottomWords,
+              { y: "20cqh", duration: SPLIT_DURATION, ease: "power3.out" },
+              SPLIT_AT,
+            );
+            tl.to(
+              panel,
+              {
+                scaleX: 0.46,
+                scaleY: 0.14,
+                borderRadius: "6cqmin",
+                duration: PANEL_DURATION,
+                ease: "power3.out",
+              },
+              PANEL_AT,
+            );
+
+            if (HOLD > 0) {
+              tl.to(
+                panel,
+                {
+                  scaleX: 0.47,
+                  scaleY: 0.145,
+                  duration: HOLD / 2,
+                  ease: "sine.inOut",
+                  yoyo: true,
+                  repeat: 1,
+                },
+                HOLD_START,
+              );
+            }
+
+            tl.to(
+              panel,
+              {
+                scaleX: 1,
+                scaleY: 1,
+                borderRadius: 0,
+                duration: OUT,
+                ease: "power4.out",
+              },
+              OUT_START,
+            );
+
+            // Two authored segments create an arc instead of a straight exit.
+            tl.to(
+              topWords,
+              { x: "3cqw", y: "-42cqh", duration: ARC_FIRST, ease: "power2.in" },
+              OUT_START,
+            );
+            tl.to(
+              topWords,
+              {
+                x: "-5cqw",
+                y: "-125cqh",
+                duration: ARC_SECOND,
+                ease: "power2.in",
+              },
+              OUT_START + ARC_FIRST,
+            );
+            tl.to(
+              bottomWords,
+              { x: "-3cqw", y: "42cqh", duration: ARC_FIRST, ease: "power2.in" },
+              OUT_START,
+            );
+            tl.to(
+              bottomWords,
+              {
+                x: "5cqw",
+                y: "125cqh",
+                duration: ARC_SECOND,
+                ease: "power2.in",
+              },
+              OUT_START + ARC_FIRST,
+            );
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["type-match-cut"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add type-match-cut" />
+
+That writes one file: `compositions/components/type-match-cut.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/type-match-cut.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `transition` `typography` `match-cut` `continuity`.
+
+## 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/components/typed-prompt.mdx b/docs/catalog/components/typed-prompt.mdx
new file mode 100644
index 0000000000..d40896f047
--- /dev/null
+++ b/docs/catalog/components/typed-prompt.mdx
@@ -0,0 +1,426 @@
+---
+title: "Typed Prompt"
+description: "A prompt line types itself in chunked human cadence behind a deterministic blinking caret, with optional backspace-and-retype correction of the final word."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/typed-prompt.html"
+  compositionId="typed-prompt"
+  compositionSrc="compositions/components/typed-prompt.html"
+  variables={[{"id":"text","type":"string","role":"content","label":"Text","description":"The prompt that gets typed.","default":"Generate a product launch video"},{"id":"prompt_glyph","type":"string","role":"style","label":"Prompt glyph","description":"Leading glyph before the typed line. Empty string hides it.","default":">"},{"id":"cadence","type":"enum","role":"timing","label":"Cadence","description":"Keystroke rhythm: uniform fixed steps or seeded human chunks.","default":"human","options":[{"value":"uniform","label":"Uniform"},{"value":"human","label":"Human"}]},{"id":"caret","type":"enum","role":"style","label":"Caret","description":"Blink runs integer sine cycles during typing then goes solid.","default":"blink","options":[{"value":"blink","label":"Blink"},{"value":"solid","label":"Solid"}]},{"id":"correction","type":"string","role":"content","label":"Correction","description":"Mistyped word typed in place of the final word, then backspaced and corrected. Empty disables.","default":""},{"id":"cues","type":"string","role":"timing","label":"Cues","description":"Comma-separated seconds relative to mount start; cue N anchors the start of word N. Empty uses the authored rhythm.","default":""},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Color of the prompt glyph and caret.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Outgoing transition. Frame roots own transitions; none holds the end frame.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
+>
+
+```html typed-prompt.html
+<!doctype html>
+<!--
+  typed-prompt: HyperFrames video primitive (product demo / typing)
+
+  A prompt line types itself in chunked human cadence behind a deterministic
+  blinking caret. Every visible frame is read from one lookup table of
+  text-at-time rows built synchronously before the timeline registers, so
+  forward seeks, reverse seeks, and repeated seeks to the same time always
+  produce the same string. Nothing is incremental.
+
+  Caret law: a sine phase runs an INTEGER number of cycles across exactly the
+  typing window, then a single set() pins the caret solid for the hold.
+
+  Correction mode: when the `correction` variable is non-empty, that string is
+  typed IN PLACE of the final word first (the "typo"), a beat passes, it is
+  backspaced one character per row, and the true final word of `text` is
+  retyped. The resting text always equals `text`.
+
+  Variables (declared in data-composition-variables below):
+    - text (string): the prompt that gets typed.
+    - prompt_glyph (string, default ">"): leading glyph; empty string hides it.
+    - cadence ("uniform" | "human", default "human"): keystroke rhythm.
+      uniform = one character per fixed step; human = seeded 1-3 char chunks
+      with varied gaps (fixed LCG seed, fully deterministic).
+    - caret ("blink" | "solid", default "blink"): blink runs integer sine
+      cycles during typing then goes solid; solid never blinks.
+    - correction (string, default ""): the mistyped word. Empty disables.
+    - cues (string, default ""): comma-separated seconds relative to mount
+      start; cue N anchors the start of word N. Empty = authored rhythm.
+    - accent (green | blue | violet, default "green"): glyph + caret color.
+    - exit ("none" | "fade" | "up", default "none"): frame roots own
+      transitions; none holds the end frame.
+
+  Envelope, authored 4s, fixed IN/OUT with elastic HOLD only (never
+  gsap.timeScale()): panel settles over 0.5s, typing runs from 0.35s at its
+  natural cadence, compressed proportionally only if it would overflow
+  duration - OUT. HOLD absorbs all extra duration (solid caret, barely-there
+  drift ending in stillness). OUT exists only when exit != none.
+
+  Mount contract: mountable sub-composition; the runtime clones only this
+  <template>. #root is elastic (no data-width/height, container-type: size),
+  styled via #root only, and registers one paused timeline under the literal
+  "typed-prompt" key.
+-->
+<html
+  lang="en"
+  data-composition-id="typed-prompt"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "text", "type": "string", "role": "content", "label": "Text", "description": "The prompt that gets typed.", "default": "Generate a product launch video" },
+    { "id": "prompt_glyph", "type": "string", "role": "style", "label": "Prompt glyph", "description": "Leading glyph before the typed line. Empty string hides it.", "default": ">" },
+    { "id": "cadence", "type": "enum", "role": "timing", "label": "Cadence", "description": "Keystroke rhythm: uniform fixed steps or seeded human chunks.", "default": "human", "options": [{ "value": "uniform", "label": "Uniform" }, { "value": "human", "label": "Human" }] },
+    { "id": "caret", "type": "enum", "role": "style", "label": "Caret", "description": "Blink runs integer sine cycles during typing then goes solid.", "default": "blink", "options": [{ "value": "blink", "label": "Blink" }, { "value": "solid", "label": "Solid" }] },
+    { "id": "correction", "type": "string", "role": "content", "label": "Correction", "description": "Mistyped word typed in place of the final word, then backspaced and corrected. Empty disables.", "default": "" },
+    { "id": "cues", "type": "string", "role": "timing", "label": "Cues", "description": "Comma-separated seconds relative to mount start; cue N anchors the start of word N. Empty uses the authored rhythm.", "default": "" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Color of the prompt glyph and caret.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Outgoing transition. Frame roots own transitions; none holds the end frame.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Typed Prompt</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="typed-prompt" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            pointer-events: none;
+          }
+
+          .tp-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .tp-stage {
+            width: 82cqw;
+            max-width: 82cqw;
+            will-change: transform, opacity;
+          }
+
+          .tp-shell {
+            display: flex;
+            align-items: flex-start;
+            gap: var(--space-1, 1.6cqw);
+            min-height: 18cqh;
+            padding: var(--space-2, 3.4cqh) var(--space-2, 3cqw);
+            border: 0.16cqmin solid color-mix(in srgb, var(--border, #475569) 72%, transparent);
+            border-radius: var(--radius, 2.4cqmin);
+            background: color-mix(in srgb, var(--surface, #0b1016) 94%, var(--tp-accent));
+            box-shadow: 0 3cqh 9cqh color-mix(in srgb, var(--bg, #000000) 38%, transparent);
+          }
+
+          .tp-glyph {
+            flex: 0 0 auto;
+            color: var(--tp-accent);
+            font-size: var(--tp-font-size);
+            font-weight: 600;
+            line-height: 1.45;
+          }
+
+          .tp-line {
+            flex: 1 1 auto;
+            min-width: 0;
+            color: var(--fg, #f8fafc);
+            font-size: var(--tp-font-size);
+            font-weight: 500;
+            line-height: 1.45;
+            overflow-wrap: anywhere;
+            white-space: pre-wrap;
+          }
+
+          .tp-caret {
+            display: inline-block;
+            width: 0.55ch;
+            height: 1.05em;
+            margin-left: 0.08ch;
+            background: var(--tp-accent);
+            vertical-align: text-bottom;
+            will-change: opacity;
+          }
+        </style>
+
+        <div
+          id="typed-prompt-clip"
+          class="tp-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="tp-stage" role="img">
+            <div class="tp-shell">
+              <span class="tp-glyph" aria-hidden="true"></span>
+              <span class="tp-line" aria-hidden="true"
+                ><span class="tp-text"></span><span class="tp-caret"></span
+              ></span>
+            </div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".tp-stage");
+            var glyphElement = root.querySelector(".tp-glyph");
+            var textElement = root.querySelector(".tp-text");
+            var caretElement = root.querySelector(".tp-caret");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var text = vars.text == null ? "Generate a product launch video" : String(vars.text);
+            var promptGlyph = vars.prompt_glyph == null ? ">" : String(vars.prompt_glyph);
+            var cadence = vars.cadence === "uniform" ? "uniform" : "human";
+            var caretMode = vars.caret === "solid" ? "solid" : "blink";
+            var correction = vars.correction == null ? "" : String(vars.correction).trim();
+            var exitMode = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            root.style.setProperty("--tp-accent", accentColors[accent]);
+            glyphElement.textContent = promptGlyph;
+            if (promptGlyph === "") glyphElement.style.display = "none";
+            stage.setAttribute("aria-label", text);
+
+            var cueList = String(vars.cues == null ? "" : vars.cues)
+              .split(",")
+              .map(function (token) {
+                return parseFloat(token);
+              })
+              .filter(function (value) {
+                return isFinite(value) && value >= 0;
+              })
+              .sort(function (a, b) {
+                return a - b;
+              });
+
+            var ENTER = 0.5;
+            var TYPE_START = 0.35;
+            var OUT_BASE = 0.45;
+            var STILLNESS = 0.3;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var OUT = exitMode === "none" ? 0 : Math.min(OUT_BASE, duration * 0.2);
+
+            // Fixed-seed LCG: the only randomness source, consumed in one
+            // deterministic order during this synchronous build.
+            var lcgState = 0x7f4a7c15;
+            function rnd() {
+              lcgState = (Math.imul(1664525, lcgState) + 1013904223) >>> 0;
+              return lcgState / 4294967296;
+            }
+            function chunksOf(word) {
+              if (cadence === "uniform") return Array.from(word);
+              var out = [];
+              var i = 0;
+              while (i < word.length) {
+                var n = 1 + Math.floor(rnd() * 3);
+                out.push(word.slice(i, i + n));
+                i += n;
+              }
+              return out;
+            }
+            function chunkGap(chunk) {
+              if (cadence === "uniform") return chunk.length * 0.055;
+              return chunk.length * (0.05 + rnd() * 0.04);
+            }
+
+            // The complete text-at-time table. Built exactly once; the
+            // timeline only ever reads it, so seeks in any direction resolve
+            // the same string for the same time.
+            var rows = [{ t: 0, x: "" }];
+            var words = text.split(/\s+/).filter(function (word) {
+              return word.length > 0;
+            });
+            var hasCorrection = correction !== "" && words.length > 0;
+            (function buildRows() {
+              var t = TYPE_START;
+              var acc = "";
+              words.forEach(function (word, wordIndex) {
+                var isLast = wordIndex === words.length - 1;
+                var typedWord = hasCorrection && isLast ? correction : word;
+                if (wordIndex > 0) acc += " ";
+                if (cueList[wordIndex] != null) {
+                  t = Math.max(t, cueList[wordIndex]);
+                } else if (wordIndex > 0) {
+                  t += cadence === "uniform" ? 0.11 : 0.1 + rnd() * 0.1;
+                }
+                chunksOf(typedWord).forEach(function (chunk) {
+                  t += chunkGap(chunk);
+                  acc += chunk;
+                  rows.push({ t: t, x: acc });
+                });
+                if (hasCorrection && isLast) {
+                  t += 0.4; // the beat of realizing the typo
+                  for (var back = 1; back <= correction.length; back += 1) {
+                    t += 0.055;
+                    rows.push({ t: t, x: acc.slice(0, acc.length - back) });
+                  }
+                  acc = acc.slice(0, acc.length - correction.length);
+                  t += 0.22;
+                  chunksOf(word).forEach(function (chunk) {
+                    t += chunkGap(chunk);
+                    acc += chunk;
+                    rows.push({ t: t, x: acc });
+                  });
+                }
+              });
+            })();
+
+            // Compress typing proportionally only if it would overflow the
+            // window before OUT; extra duration becomes HOLD, never timeScale.
+            var naturalEnd = rows[rows.length - 1].t;
+            var maxEnd = Math.max(TYPE_START + 0.2, duration - OUT - STILLNESS);
+            if (naturalEnd > maxEnd) {
+              var factor = (maxEnd - TYPE_START) / (naturalEnd - TYPE_START);
+              rows.forEach(function (row) {
+                if (row.t > TYPE_START) row.t = TYPE_START + (row.t - TYPE_START) * factor;
+              });
+            }
+            var typeEnd = Math.max(rows[rows.length - 1].t, TYPE_START + 0.01);
+
+            // 1ms tolerance: GSAP snaps a tween's end value below the row
+            // table's accumulated float times, and 1ms is far under one frame.
+            function textAt(time) {
+              for (var i = rows.length - 1; i >= 0; i -= 1) {
+                if (time >= rows[i].t - 0.001) return rows[i].x;
+              }
+              return "";
+            }
+
+            // +2: leave room for the trailing caret so it never wraps alone.
+            var maxLength =
+              rows.reduce(function (best, row) {
+                return Math.max(best, row.x.length);
+              }, 1) + 2;
+            var fittedCqw = Math.max(2.2, Math.min(4.2, 118 / maxLength));
+            root.style.setProperty("--tp-font-size", "min(" + fittedCqw.toFixed(3) + "cqw, 9cqh)");
+
+            gsap.set(stage, { opacity: 0, y: "2.6cqh" });
+            textElement.textContent = "";
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: one panel settle, then the table drives every visible frame.
+            tl.to(stage, { opacity: 1, duration: ENTER, ease: "power2.out" }, 0);
+            tl.to(stage, { y: "0cqh", duration: ENTER, ease: "power3.out" }, 0);
+
+            var typeDriver = { t: 0 };
+            tl.to(
+              typeDriver,
+              {
+                t: typeEnd,
+                duration: typeEnd,
+                ease: "none",
+                onUpdate: function () {
+                  textElement.textContent = textAt(typeDriver.t);
+                },
+              },
+              0,
+            );
+
+            // Caret: integer sine cycles across exactly the typing window,
+            // then a single pin to solid. Solid mode never blinks.
+            if (caretMode === "blink") {
+              var cycles = Math.max(1, Math.round(typeEnd / 0.9));
+              var blink = { p: 0 };
+              tl.to(
+                blink,
+                {
+                  p: Math.PI * 2 * cycles,
+                  duration: typeEnd,
+                  ease: "none",
+                  onUpdate: function () {
+                    // >= 0 keeps phase 0 identical to the caret's unrendered
+                    // initial state (opacity 1) for forward vs backward seeks.
+                    caretElement.style.opacity = Math.sin(blink.p) >= 0 ? "1" : "0";
+                  },
+                },
+                0,
+              );
+              tl.set(caretElement, { opacity: 1 }, typeEnd);
+            }
+
+            // HOLD: barely-there drift ending at exactly zero, then authored
+            // stillness before any departure.
+            var OUT_START = duration - OUT;
+            var holdSpan = OUT_START - typeEnd;
+            if (holdSpan > 0.9) {
+              var driftHalf = (holdSpan - STILLNESS) / 2;
+              tl.to(stage, { y: "-0.45cqh", duration: driftHalf, ease: "sine.inOut" }, typeEnd);
+              tl.to(
+                stage,
+                { y: "0cqh", duration: driftHalf, ease: "sine.inOut" },
+                typeEnd + driftHalf,
+              );
+            }
+
+            // OUT: only when the exit variable asks for one.
+            if (exitMode !== "none") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+              if (exitMode === "up") {
+                tl.to(stage, { y: "-4cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              }
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["typed-prompt"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add typed-prompt" />
+
+That writes one file: `compositions/components/typed-prompt.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/typed-prompt.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `product-demo` `typing` `prompt` `deterministic`.
+
+## 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/components/typewriter.mdx b/docs/catalog/components/typewriter.mdx
new file mode 100644
index 0000000000..29cada586c
--- /dev/null
+++ b/docs/catalog/components/typewriter.mdx
@@ -0,0 +1,160 @@
+---
+title: "Typewriter"
+description: "Character-by-character text reveal with a deterministic blinking cursor."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/typewriter.html"
+  compositionId="typewriter"
+  compositionSrc="compositions/components/typewriter.html"
+  variables={[{"id":"text","type":"string","role":"content","label":"Text","description":"Line that types itself out character by character.","default":"hyperframes add typewriter"},{"id":"tone","type":"enum","role":"style","label":"Tone","description":"Colour of the text and the caret: ink for light frames, paper for dark ones, accent rides --brand.","default":"ink","options":[{"value":"ink","label":"Ink"},{"value":"paper","label":"Paper"},{"value":"accent","label":"Accent"}]},{"id":"caret","type":"enum","role":"style","label":"Caret","description":"Caret shape: a thin rule, a terminal-style block, or no caret at all.","default":"line","options":[{"value":"line","label":"Line"},{"value":"block","label":"Block"},{"value":"none","label":"None"}]}]}
+>
+
+```html typewriter.html
+<!--
+  Typewriter - remocn typography primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Drive the timeline
+  integration from a paused GSAP timeline so renders remain deterministic.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result either into the
+  markup or into a custom property the CSS above consumes. The timeline recipe
+  below is untouched by them: it keeps driving one type progress and one caret
+  opacity, and these decide what is typed, in what colour, and behind which
+  caret.
+
+    - text (string, default hyperframes add typewriter): the line that types
+      itself out. It is written into the existing span, so the reveal keeps
+      running character by character over whatever is set. Anything that is
+      not a non-empty string keeps the shipped line.
+    - tone (ink | paper | accent, default ink): colour of both the text and
+      the caret. ink is near-black for light frames, paper near-white for dark
+      ones, accent rides --brand.
+    - caret (line | block | none, default line): caret shape. line is the
+      shipped 3px rule, block is a 22px slab in the style of a terminal
+      cursor, none removes the caret entirely and closes the gap after the
+      text.
+
+  On every default the result is identical to the original: a near-black
+  monospace line typing itself out behind a 3px caret.
+-->
+
+<div
+  class="hf-remocn-typewriter"
+  data-composition-variables='[
+    { "id": "text", "type": "string", "role": "content", "label": "Text", "description": "Line that types itself out character by character.", "default": "hyperframes add typewriter" },
+    { "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Colour of the text and the caret: ink for light frames, paper for dark ones, accent rides --brand.", "default": "ink", "options": [{ "value": "ink", "label": "Ink" }, { "value": "paper", "label": "Paper" }, { "value": "accent", "label": "Accent" }] },
+    { "id": "caret", "type": "enum", "role": "style", "label": "Caret", "description": "Caret shape: a thin rule, a terminal-style block, or no caret at all.", "default": "line", "options": [{ "value": "line", "label": "Line" }, { "value": "block", "label": "Block" }, { "value": "none", "label": "None" }] }
+  ]'
+>
+  <span>hyperframes add typewriter</span><i></i>
+</div>
+
+<style>
+  .hf-remocn-typewriter {
+    color: var(--hf-type-color, #18181b);
+    font-family: Inter, system-ui, sans-serif;
+    font-weight: 900;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-typewriter {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    font:
+      800 42px/1 ui-monospace,
+      SFMono-Regular,
+      Menlo,
+      monospace;
+  }
+  .hf-remocn-typewriter span {
+    display: inline-block;
+    max-width: calc(var(--hf-type-progress, 1) * 100%);
+    overflow: hidden;
+    white-space: nowrap;
+  }
+  .hf-remocn-typewriter i {
+    display: var(--hf-caret-display, block);
+    width: var(--hf-caret-width, 3px);
+    height: 42px;
+    border-radius: 999px;
+    background: var(--hf-type-color, #18181b);
+    opacity: var(--hf-caret-opacity, 1);
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    var tones = {
+      ink: "#18181b",
+      paper: "#fafafa",
+      accent: "var(--brand, #34d399)",
+    };
+    var carets = {
+      line: { width: "3px", display: "block" },
+      block: { width: "22px", display: "block" },
+      none: { width: "3px", display: "none" },
+    };
+
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var tone = tones[pick(tones, vars.tone, "ink")];
+    var caret = carets[pick(carets, vars.caret, "line")];
+    var text = typeof vars.text === "string" && vars.text !== "" ? vars.text : null;
+
+    var roots = document.querySelectorAll(".hf-remocn-typewriter");
+    for (var i = 0; i < roots.length; i += 1) {
+      var root = roots[i];
+      root.style.setProperty("--hf-type-color", tone);
+      root.style.setProperty("--hf-caret-width", caret.width);
+      root.style.setProperty("--hf-caret-display", caret.display);
+
+      var line = root.querySelector("span");
+      if (text !== null && line) {
+        line.textContent = text;
+      }
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-typewriter', { '--hf-type-progress': 0 }, { '--hf-type-progress': 1, duration: 1.2, ease: 'steps(28)' }, startTime); tl.to('.hf-remocn-typewriter i', { '--hf-caret-opacity': 0.2, duration: 0.24, repeat: 7, yoyo: true, ease: 'none' }, startTime + 0.2);
+-->
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add typewriter" />
+
+That writes one file: `compositions/components/typewriter.html`.
+
+## Usage
+
+Open `compositions/components/typewriter.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+
+{/* hf:generated-footer */}
+
+Tagged `video-primitive` `motion-primitive` `remocn-port` `typography`.
+
+## 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/components/ui-focus-zoom.mdx b/docs/catalog/components/ui-focus-zoom.mdx
new file mode 100644
index 0000000000..d81698ca5f
--- /dev/null
+++ b/docs/catalog/components/ui-focus-zoom.mdx
@@ -0,0 +1,606 @@
+---
+title: "UI Focus Zoom"
+description: "A full app surface establishes with one settle, then the camera zooms and pans to an anchored region on its cue and holds the zoomed state, with an optional soft focus halo at the anchor. The surface is a slot with a token-styled skeleton default."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/ui-focus-zoom.html"
+  compositionId="ui-focus-zoom"
+  compositionSrc="compositions/components/ui-focus-zoom.html"
+  variables={[{"id":"anchor_x","type":"number","role":"content","label":"Anchor X","description":"Focus anchor, percent from the left edge of the surface.","default":64,"min":0,"max":100,"step":1,"unit":"%"},{"id":"anchor_y","type":"number","role":"content","label":"Anchor Y","description":"Focus anchor, percent from the top edge of the surface.","default":36,"min":0,"max":100,"step":1,"unit":"%"},{"id":"zoom","type":"number","role":"content","label":"Zoom","description":"Camera scale at the focused state.","default":1.6,"min":1,"max":3,"step":0.05},{"id":"zoom_at","type":"number","role":"timing","label":"Zoom at","description":"Seconds from mount start when the camera departs for the anchor. Clamped inside the hold.","default":1.4,"min":0,"max":30,"step":0.1,"unit":"s"},{"id":"halo","type":"enum","role":"style","label":"Halo","description":"Soft accent bloom at the anchor as the camera arrives.","default":"show","options":[{"value":"show","label":"Show"},{"value":"hide","label":"Hide"}]},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Token the halo and skeleton accent elements ride.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"style","label":"Exit","description":"Optional departure. None holds the final frame.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
+>
+
+```html ui-focus-zoom.html
+<!doctype html>
+<!--
+  ui-focus-zoom -- HyperFrames video primitive (product demo / camera)
+
+  A full app surface establishes with one settle, then the camera zooms and
+  pans to an anchored region on its cue and holds the zoomed state. An
+  optional focus halo blooms softly at the anchor as the camera arrives.
+
+  Camera-servo law: the camera lives on ONE world wrapper transform,
+  translate(x, y) scale(S). A world point offset o from center lands at
+  S * o + T, so T = -offset * S. Offsets are percentages of the world's own
+  box (the world fills the viewport), so no pixel measurement is needed and
+  the primitive stays fully elastic. Micro-drift is built from integer sine
+  cycles (2 and 3 full cycles) that end at exactly zero before the authored
+  stillness, so the hold is dead still and every seek is reproducible.
+
+  The pan is clamped so the scaled world always covers the viewport:
+  |T| <= 50 * (S - 1) minus the drift amplitude. Extreme anchors near an
+  edge center as close as the clamp allows without revealing background.
+
+  The surface is a SLOT. Callers supply content by placing an inert template
+  anywhere in the HOST page (templates never render, and the runtime wipes
+  the host clip's own children on mount, so the slot lives at document
+  level):
+
+    <template data-slot="ui-focus-zoom-screen"> ... </template>
+
+  Slot content may be an <img>, a muted <video>, or arbitrary HTML; direct
+  img/video children are stretched to cover the surface. When no slot
+  exists, the primitive renders a token-styled skeleton app (header bar,
+  sidebar, content cards; hairline borders, surface mixes, one accent
+  element, no branding).
+
+  Variables (declared in data-composition-variables below):
+    - anchor_x (number percent, default 64): focus anchor from the left edge.
+    - anchor_y (number percent, default 36): focus anchor from the top edge.
+    - zoom (number, default 1.6): camera scale at the focused state (1 to 3).
+    - zoom_at (number seconds, default 1.4): camera departure cue from mount
+      start; clamped inside [IN, D - OUT - move] so the move never fights
+      the entrance or the exit.
+    - halo ("show" | "hide", default "show"): soft accent bloom at the anchor.
+    - accent ("green" | "blue" | "violet", default "green"): green rides
+      --brand, blue rides --accent, violet rides --accent-2.
+    - exit ("none" | "fade" | "up", default "none"): frame roots own
+      transitions; the default holds the final frame to the last pixel.
+
+  Envelope, fixed IN and OUT with elastic HOLD only (never timeScale):
+    IN_BASE   = 0.90s  one settle: rise + soft scale + fade
+    ZOOM_BASE = 1.10s  the camera move, power2.inOut servo ease
+    HOLD      = elastic; micro-drift ends at zero, then authored stillness
+    OUT_BASE  = 0.50s  only when exit != none
+    If D < IN_BASE + ZOOM_BASE + OUT_BASE, the phases compress together.
+
+  Mount contract: the runtime clones only this template. #root fills the
+  host box (no data-width/data-height, container-type: size, cqmin units),
+  is styled via #root only, and registers one paused timeline under the
+  LITERAL "ui-focus-zoom" key. Camera and drift tween plain objects and
+  repaint through one applyCamera writer, so any seek order lands the same
+  transform.
+-->
+<html
+  lang="en"
+  data-composition-id="ui-focus-zoom"
+  data-composition-duration="4.5"
+  data-composition-variables='[
+    { "id": "anchor_x", "type": "number", "role": "content", "label": "Anchor X", "description": "Focus anchor, percent from the left edge of the surface.", "default": 64, "min": 0, "max": 100, "step": 1, "unit": "%" },
+    { "id": "anchor_y", "type": "number", "role": "content", "label": "Anchor Y", "description": "Focus anchor, percent from the top edge of the surface.", "default": 36, "min": 0, "max": 100, "step": 1, "unit": "%" },
+    { "id": "zoom", "type": "number", "role": "content", "label": "Zoom", "description": "Camera scale at the focused state.", "default": 1.6, "min": 1, "max": 3, "step": 0.05 },
+    { "id": "zoom_at", "type": "number", "role": "timing", "label": "Zoom at", "description": "Seconds from mount start when the camera departs for the anchor. Clamped inside the hold.", "default": 1.4, "min": 0, "max": 30, "step": 0.1, "unit": "s" },
+    { "id": "halo", "type": "enum", "role": "style", "label": "Halo", "description": "Soft accent bloom at the anchor as the camera arrives.", "default": "show", "options": [{ "value": "show", "label": "Show" }, { "value": "hide", "label": "Hide" }] },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Token the halo and skeleton accent elements ride.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "style", "label": "Exit", "description": "Optional departure. None holds the final frame.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>UI Focus Zoom</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="ui-focus-zoom" data-duration="4.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, ui-sans-serif, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .ufz-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .ufz-stage {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            will-change: transform, opacity;
+          }
+
+          /* the fixed frame: the camera moves the world inside this window */
+          .ufz-frame {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            border: 0.16cqmin solid color-mix(in srgb, var(--border, #475569) 85%, transparent);
+            border-radius: calc(var(--radius, 2cqmin) * 1.2);
+            background: color-mix(in srgb, var(--surface, #0b1016) 96%, var(--ufz-accent));
+            box-shadow: 0 3cqh 9cqh color-mix(in srgb, var(--bg, #000000) 45%, transparent);
+          }
+
+          /* ONE world wrapper: all camera motion is this element's transform */
+          .ufz-world {
+            position: absolute;
+            inset: 0;
+            will-change: transform;
+          }
+
+          .ufz-surface {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            background: color-mix(in srgb, var(--surface, #0b1016) 88%, var(--bg, #05070c));
+          }
+
+          .ufz-surface > img,
+          .ufz-surface > video {
+            display: block;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+          }
+
+          .ufz-halo {
+            position: absolute;
+            z-index: 2;
+            width: 30cqmin;
+            height: 30cqmin;
+            border-radius: 50%;
+            background: radial-gradient(
+              circle,
+              color-mix(in srgb, var(--ufz-accent) 26%, transparent) 0%,
+              color-mix(in srgb, var(--ufz-accent) 12%, transparent) 42%,
+              transparent 70%
+            );
+            will-change: transform, opacity;
+          }
+
+          /* default skeleton surface: pure token furniture, no branding */
+          .ufz-skel {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            grid-template-rows: auto minmax(0, 1fr);
+          }
+
+          .ufz-skel-top {
+            display: flex;
+            align-items: center;
+            gap: var(--space-1, 1.6cqmin);
+            padding: 1.8cqmin 2.6cqmin;
+            border-bottom: 0.14cqmin solid
+              color-mix(in srgb, var(--border, #475569) 55%, transparent);
+          }
+
+          .ufz-skel-mark {
+            width: 2.6cqmin;
+            height: 2.6cqmin;
+            border-radius: 0.8cqmin;
+            background: color-mix(in srgb, var(--ufz-accent) 74%, var(--surface, #0b1016));
+          }
+
+          .ufz-skel-line {
+            height: 1.25cqmin;
+            border-radius: 999px;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 13%, transparent);
+          }
+
+          .ufz-skel-top .ufz-skel-line:nth-of-type(1) {
+            width: 9cqmin;
+          }
+
+          .ufz-skel-top .ufz-skel-line:nth-of-type(2) {
+            width: 6.5cqmin;
+          }
+
+          .ufz-skel-spring {
+            flex: 1;
+          }
+
+          .ufz-skel-chip {
+            width: 8.5cqmin;
+            height: 2.9cqmin;
+            border: 0.14cqmin solid color-mix(in srgb, var(--ufz-accent) 55%, transparent);
+            border-radius: 999px;
+            background: color-mix(in srgb, var(--ufz-accent) 28%, transparent);
+          }
+
+          .ufz-skel-avatar {
+            width: 2.8cqmin;
+            height: 2.8cqmin;
+            border-radius: 50%;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 18%, transparent);
+          }
+
+          .ufz-skel-body {
+            display: grid;
+            grid-template-columns: 22% minmax(0, 1fr);
+            min-height: 0;
+          }
+
+          .ufz-skel-side {
+            display: flex;
+            flex-direction: column;
+            gap: 2cqmin;
+            padding: 2.6cqmin;
+            border-right: 0.14cqmin solid
+              color-mix(in srgb, var(--border, #475569) 55%, transparent);
+          }
+
+          .ufz-skel-side .ufz-skel-line:nth-child(1) {
+            width: 78%;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 22%, transparent);
+          }
+
+          .ufz-skel-side .ufz-skel-line:nth-child(2) {
+            width: 56%;
+          }
+
+          .ufz-skel-side .ufz-skel-line:nth-child(3) {
+            width: 66%;
+          }
+
+          .ufz-skel-side .ufz-skel-line:nth-child(4) {
+            width: 44%;
+          }
+
+          .ufz-skel-side .ufz-skel-line:nth-child(5) {
+            width: 60%;
+          }
+
+          .ufz-skel-main {
+            display: flex;
+            flex-direction: column;
+            gap: var(--space-2, 1.8cqmin);
+            min-height: 0;
+            padding: var(--space-3, 2.8cqmin);
+          }
+
+          .ufz-skel-heading {
+            width: 34%;
+            height: 2.5cqmin;
+            border-radius: 999px;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 21%, transparent);
+          }
+
+          .ufz-skel-sub {
+            width: 52%;
+            height: 1.25cqmin;
+            border-radius: 999px;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 9%, transparent);
+          }
+
+          .ufz-skel-cards {
+            display: grid;
+            flex: 1;
+            grid-template-columns: repeat(3, minmax(0, 1fr));
+            gap: 2.1cqmin;
+            min-height: 0;
+            margin-top: 0.8cqmin;
+          }
+
+          .ufz-skel-card {
+            display: flex;
+            flex-direction: column;
+            gap: 1.5cqmin;
+            min-height: 0;
+            padding: 2.1cqmin;
+            border: 0.14cqmin solid color-mix(in srgb, var(--border, #475569) 60%, transparent);
+            border-radius: var(--radius, 1.6cqmin);
+            background: color-mix(in srgb, var(--bg, #05070c) 30%, transparent);
+          }
+
+          .ufz-skel-card .ufz-skel-line {
+            width: 55%;
+          }
+
+          .ufz-skel-block {
+            flex: 1;
+            min-height: 3cqmin;
+            border-radius: calc(var(--radius, 1.6cqmin) * 0.6);
+            background: color-mix(in srgb, var(--fg, #f8fafc) 7%, transparent);
+          }
+
+          .ufz-skel-card:nth-child(2) .ufz-skel-block {
+            background: color-mix(in srgb, var(--ufz-accent) 17%, transparent);
+          }
+        </style>
+
+        <div
+          id="ui-focus-zoom-clip"
+          class="ufz-clip clip"
+          data-start="0"
+          data-duration="4.5"
+          data-track-index="0"
+        >
+          <div class="ufz-stage">
+            <div class="ufz-frame" role="img" aria-label="App surface with a camera focus zoom">
+              <div class="ufz-world">
+                <div class="ufz-surface">
+                  <div class="ufz-skel" aria-hidden="true">
+                    <div class="ufz-skel-top">
+                      <span class="ufz-skel-mark"></span>
+                      <span class="ufz-skel-line"></span>
+                      <span class="ufz-skel-line"></span>
+                      <span class="ufz-skel-spring"></span>
+                      <span class="ufz-skel-chip"></span>
+                      <span class="ufz-skel-avatar"></span>
+                    </div>
+                    <div class="ufz-skel-body">
+                      <div class="ufz-skel-side">
+                        <span class="ufz-skel-line"></span>
+                        <span class="ufz-skel-line"></span>
+                        <span class="ufz-skel-line"></span>
+                        <span class="ufz-skel-line"></span>
+                        <span class="ufz-skel-line"></span>
+                      </div>
+                      <div class="ufz-skel-main">
+                        <span class="ufz-skel-heading"></span>
+                        <span class="ufz-skel-sub"></span>
+                        <div class="ufz-skel-cards">
+                          <div class="ufz-skel-card">
+                            <span class="ufz-skel-line"></span>
+                            <span class="ufz-skel-block"></span>
+                          </div>
+                          <div class="ufz-skel-card">
+                            <span class="ufz-skel-line"></span>
+                            <span class="ufz-skel-block"></span>
+                          </div>
+                          <div class="ufz-skel-card">
+                            <span class="ufz-skel-line"></span>
+                            <span class="ufz-skel-block"></span>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="ufz-halo" aria-hidden="true"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".ufz-stage");
+            var world = root.querySelector(".ufz-world");
+            var surface = root.querySelector(".ufz-surface");
+            var halo = root.querySelector(".ufz-halo");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            function num(value, fallback, min, max) {
+              var parsed = parseFloat(value);
+              if (!isFinite(parsed)) parsed = fallback;
+              return Math.min(max, Math.max(min, parsed));
+            }
+
+            var anchorX = num(vars.anchor_x, 64, 0, 100);
+            var anchorY = num(vars.anchor_y, 36, 0, 100);
+            var zoom = num(vars.zoom, 1.6, 1, 3);
+            var zoomAt = num(vars.zoom_at, 1.4, 0, 30);
+            var haloOn = vars.halo !== "hide";
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exitMode = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            root.style.setProperty("--ufz-accent", accentColors[accent]);
+
+            // SLOT. Caller templates live at HOST DOCUMENT level (the mount
+            // wipes host-clip children, and templates never render). The
+            // scoped `document` proxy filters queries to this composition's
+            // subtree, so the lookup deliberately goes through ownerDocument.
+            var hostDoc = root.ownerDocument;
+            var slotTemplate = null;
+            try {
+              slotTemplate = hostDoc.querySelector('template[data-slot="ui-focus-zoom-screen"]');
+            } catch (error) {
+              slotTemplate = null;
+            }
+            if (slotTemplate) {
+              surface.querySelector(".ufz-skel").remove();
+              surface.appendChild(hostDoc.importNode(slotTemplate.content, true));
+            }
+
+            /* ===== Camera (camera-servo law): translate(x, y) scale(S) on the
+               ONE world wrapper. Translate percentages resolve against the
+               world's own box, which fills the viewport, so a world point at
+               offset o percent from center lands at S * o + T and the target
+               transform is T = -(anchor - 50) * S, no measurement needed.
+               The pan is clamped so the scaled world always covers the
+               viewport (|T| <= 50 * (S - 1) minus the drift amplitude). ===== */
+            var DRIFT_X = 0.16;
+            var DRIFT_Y = 0.11;
+            var panMax = Math.max(0, 50 * (zoom - 1) - Math.max(DRIFT_X, DRIFT_Y) - 0.2);
+            var targetX = Math.min(panMax, Math.max(-panMax, -(anchorX - 50) * zoom));
+            var targetY = Math.min(panMax, Math.max(-panMax, -(anchorY - 50) * zoom));
+
+            var cam = { s: 1, x: 0, y: 0 };
+            var drift = { p: 0, dx: 0, dy: 0 };
+            function applyCamera() {
+              world.style.transform =
+                "translate(" +
+                (cam.x + drift.dx) +
+                "%, " +
+                (cam.y + drift.dy) +
+                "%) scale(" +
+                cam.s +
+                ")";
+            }
+            applyCamera();
+
+            // Halo pinned to the anchor in world space; it rides the camera.
+            // Explicit both-endpoint state BEFORE the timeline exists: the
+            // bloom fromTo sits mid-timeline, so without this set a seek that
+            // lands before the cue would show the halo unstyled.
+            halo.style.left = anchorX + "%";
+            halo.style.top = anchorY + "%";
+            if (!haloOn) halo.remove();
+            else
+              gsap.set(halo, {
+                opacity: 0,
+                scale: 0.55,
+                xPercent: -50,
+                yPercent: -50,
+                transformOrigin: "50% 50%",
+              });
+
+            // Envelope: fixed IN/ZOOM/OUT, elastic HOLD, never time-scaled.
+            var IN_BASE = 0.9;
+            var ZOOM_BASE = 1.1;
+            var OUT_BASE = exitMode === "none" ? 0 : 0.5;
+            var STILLNESS = 0.35;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4.5"));
+            var totalBase = IN_BASE + ZOOM_BASE + OUT_BASE;
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var ZOOM = ZOOM_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var OUT_START = duration - OUT;
+
+            // The camera departs on its cue, clamped so the move never fights
+            // the entrance or the exit.
+            var zoomStart = Math.min(Math.max(zoomAt, IN), Math.max(IN, OUT_START - ZOOM - 0.05));
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: one settle. Rise + soft scale + fade, smooth ease-out.
+            tl.fromTo(
+              stage,
+              { opacity: 0, y: "4.5cqh", scale: 0.965, transformOrigin: "50% 60%" },
+              { opacity: 1, y: "0cqh", scale: 1, duration: IN, ease: "power3.out" },
+              0,
+            );
+
+            // Camera servo: one move to the anchored region, then hold zoomed.
+            tl.to(
+              cam,
+              {
+                s: zoom,
+                x: targetX,
+                y: targetY,
+                duration: ZOOM,
+                ease: "power2.inOut",
+                onUpdate: applyCamera,
+              },
+              zoomStart,
+            );
+
+            // Micro-drift: 2 and 3 INTEGER sine cycles that end at exactly
+            // zero before the authored stillness, so the final hold is dead
+            // still and every seek reproduces the same frame.
+            var driftDuration = Math.max(0, OUT_START - STILLNESS);
+            if (driftDuration >= 1.2) {
+              tl.to(
+                drift,
+                {
+                  p: Math.PI * 2 * 2,
+                  duration: driftDuration,
+                  ease: "none",
+                  onUpdate: function () {
+                    drift.dx = Math.sin(drift.p) * DRIFT_X;
+                    drift.dy = Math.sin(drift.p * 1.5) * DRIFT_Y;
+                    applyCamera();
+                  },
+                },
+                0,
+              );
+            }
+
+            // Halo: soft bloom at the anchor as the camera arrives, then hold.
+            if (haloOn) {
+              tl.fromTo(
+                halo,
+                { opacity: 0, scale: 0.55, xPercent: -50, yPercent: -50 },
+                {
+                  opacity: 0.85,
+                  scale: 1,
+                  xPercent: -50,
+                  yPercent: -50,
+                  duration: 0.75 * scale,
+                  ease: "power2.out",
+                },
+                zoomStart + ZOOM * 0.5,
+              );
+            }
+
+            // OUT: only when exit != none; the default holds the last frame.
+            if (exitMode !== "none") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+              if (exitMode === "up") {
+                tl.to(stage, { y: "-4cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              }
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["ui-focus-zoom"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add ui-focus-zoom" />
+
+That writes one file: `compositions/components/ui-focus-zoom.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/ui-focus-zoom.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `camera` `product-demo` `zoom` `focus` `pan` `slot` `servo`.
+
+## 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/components/variable-axis-type.mdx b/docs/catalog/components/variable-axis-type.mdx
new file mode 100644
index 0000000000..30027ad0c5
--- /dev/null
+++ b/docs/catalog/components/variable-axis-type.mdx
@@ -0,0 +1,234 @@
+---
+title: "Variable Axis Type"
+description: "A locked one-line headline whose weight or width axis morphs into a decisive emphasis beat."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/variable-axis-type.html"
+  compositionId="variable-axis-type"
+  compositionSrc="compositions/components/variable-axis-type.html"
+  variables={[{"id":"text","type":"string","role":"content","label":"Text","description":"Word or short headline to emphasize.","default":"IMPACT"},{"id":"axis","type":"enum","role":"motion","label":"Axis","description":"Variable-font axis used for the emphasis morph.","default":"wght","options":[{"value":"wght","label":"Weight"},{"value":"wdth","label":"Width"}]},{"id":"fromValue","type":"number","role":"motion","label":"From value","description":"Starting coordinate on the selected font axis.","default":200,"min":25,"max":1000,"step":1},{"id":"toValue","type":"number","role":"motion","label":"To value","description":"Ending coordinate on the selected font axis.","default":900,"min":25,"max":1000,"step":1}]}
+>
+
+```html variable-axis-type.html
+<!doctype html>
+<!--
+  variable-axis-type -- HyperFrames video primitive (typography / burst / emphasize)
+
+  Concept: one headline gains emphasis by morphing a single variable-font axis.
+  The glyphs change shape while the text element itself stays fixed.
+
+  Compiled-from evidence: hyperframes-research-type-svg.md, VariableAxisType.
+  The research identifies variable axes as deterministic numeric seek handles and
+  requires a complete, stable axis list, a font-ready gate, and midpoint checks.
+
+  Use when: a word or short headline needs a decisive emphasis beat without a
+  position, opacity, or scale animation.
+
+  Variables:
+    - text (string, default "IMPACT"): headline copy.
+    - axis ("wght" | "wdth", default "wght"): axis that performs the beat.
+    - fromValue (number, default 200): starting coordinate on the chosen axis.
+    - toValue (number, default 900): ending coordinate on the chosen axis.
+
+  Envelope: IN = up to 1.4s for the axis morph; HOLD = any remaining duration;
+  OUT = 0s. Short hosts compress IN directly. Never use gsap.timeScale().
+
+  Sync point: axis-land at 1.4s into IN, scaled proportionally when the host
+  duration is shorter. It is never placed in the elastic HOLD.
+
+  Sound: none. The changing glyph mass is the entire emphasis mechanic.
+
+  Mount contract: this is a template-wrapped sub-composition. The root has no
+  data-width or data-height, fills its host with inset:0, and registers one
+  paused GSAP timeline under the hardcoded id "variable-axis-type".
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "text", "type": "string", "role": "content", "label": "Text", "description": "Word or short headline to emphasize.", "default": "IMPACT" },
+    { "id": "axis", "type": "enum", "role": "motion", "label": "Axis", "description": "Variable-font axis used for the emphasis morph.", "default": "wght", "options": [{ "value": "wght", "label": "Weight" }, { "value": "wdth", "label": "Width" }] },
+    { "id": "fromValue", "type": "number", "role": "motion", "label": "From value", "description": "Starting coordinate on the selected font axis.", "default": 200, "min": 25, "max": 1000, "step": 1 },
+    { "id": "toValue", "type": "number", "role": "motion", "label": "To value", "description": "Ending coordinate on the selected font axis.", "default": 900, "min": 25, "max": 1000, "step": 1 }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Variable Axis Type</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="variable-axis-type" data-duration="1.6" data-fps="30">
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wdth,wght@8..144,25..151,100..1000&amp;display=block"
+          rel="stylesheet"
+        />
+
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            background: var(--bg, #0b1120);
+            color: var(--fg, #f8fafc);
+          }
+
+          .vat-clip {
+            width: 100%;
+            height: 100%;
+            display: grid;
+            place-items: center;
+          }
+
+          /* INVARIANT: width-axis changes may alter glyph advances, so the
+             authored line lives in a fixed box and can never wrap mid-tween. */
+          .vat-lock {
+            width: 92cqw;
+            height: 58cqh;
+            display: grid;
+            place-items: center;
+            overflow: visible;
+          }
+
+          /* EDIT ZONE: font size and tracking are the only composition-level
+             typography controls. Axis endpoints remain owned by variables. */
+          .vat-headline {
+            display: block;
+            width: 100%;
+            white-space: nowrap;
+            text-align: center;
+            color: var(--fg, #f8fafc);
+            font-family: "Roboto Flex", var(--font-display, sans-serif);
+            font-size: 19cqw;
+            font-weight: 400;
+            font-stretch: 100%;
+            font-optical-sizing: none;
+            font-synthesis: none;
+            line-height: 0.9;
+            letter-spacing: -0.045em;
+          }
+        </style>
+
+        <div
+          id="variable-axis-type-clip"
+          class="vat-clip clip"
+          data-start="0"
+          data-duration="1.6"
+          data-track-index="0"
+        >
+          <div class="vat-lock">
+            <div class="vat-headline">IMPACT</div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var headline = root.querySelector(".vat-headline");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var text = vars.text == null ? "IMPACT" : String(vars.text);
+            var axis = vars.axis === "wdth" ? "wdth" : "wght";
+            var minimum = axis === "wdth" ? 25 : 100;
+            var maximum = axis === "wdth" ? 151 : 1000;
+            var fromNumber = Number(vars.fromValue);
+            var toNumber = Number(vars.toValue);
+            var fromValue = Number.isFinite(fromNumber) ? fromNumber : 200;
+            var toValue = Number.isFinite(toNumber) ? toNumber : 900;
+            fromValue = Math.max(minimum, Math.min(maximum, fromValue));
+            toValue = Math.max(minimum, Math.min(maximum, toValue));
+
+            headline.textContent = text;
+
+            // Both endpoints list the same complete axis set in the same order.
+            // Omitting even an unchanged axis can silently disable interpolation.
+            var fromSettings =
+              axis === "wdth"
+                ? '"wght" 700, "wdth" ' + fromValue + ', "opsz" 96'
+                : '"wght" ' + fromValue + ', "wdth" 100, "opsz" 96';
+            var toSettings =
+              axis === "wdth"
+                ? '"wght" 700, "wdth" ' + toValue + ', "opsz" 96'
+                : '"wght" ' + toValue + ', "wdth" 100, "opsz" 96';
+
+            // RETIME RANGE: the morph is the fixed IN phase. Any time after it
+            // is an elastic still HOLD, which preserves the landed emphasis.
+            var IN_BASE = 1.4;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "1.6"));
+            var IN = Math.min(IN_BASE, duration);
+
+            // Font readiness owns timeline registration. This prevents fallback
+            // glyph metrics from leaking into any captured or midpoint frame.
+            document.fonts
+              .load('700 64px "Roboto Flex"', text)
+              .then(function () {
+                return document.fonts.ready;
+              })
+              .then(function () {
+                if (!document.fonts.check('700 64px "Roboto Flex"', text)) {
+                  throw new Error("Roboto Flex failed to load");
+                }
+
+                var tl = gsap.timeline({ paused: true });
+                tl.fromTo(
+                  headline,
+                  { fontVariationSettings: fromSettings },
+                  { fontVariationSettings: toSettings, duration: IN, ease: "expo.out" },
+                  0,
+                );
+                tl.seek(0);
+
+                window.__timelines = window.__timelines || {};
+                window.__timelines["variable-axis-type"] = tl;
+              });
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add variable-axis-type" />
+
+That writes one file: `compositions/components/variable-axis-type.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/variable-axis-type.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `typography` `variable-font` `kinetic-type` `axis` `emphasize`.
+
+## 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/components/variable-font-flex.mdx b/docs/catalog/components/variable-font-flex.mdx
new file mode 100644
index 0000000000..889ad2148f
--- /dev/null
+++ b/docs/catalog/components/variable-font-flex.mdx
@@ -0,0 +1,346 @@
+---
+title: "Variable Font Flex"
+description: "A word lands while its variable-font weight and width axes flex from hairline-condensed to black-wide with per-character stagger; font-size eases inversely so the letterforms gain mass while the box holds."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/variable-font-flex.html"
+  compositionId="variable-font-flex"
+  compositionSrc="compositions/components/variable-font-flex.html"
+  variables={[{"id":"text","type":"string","role":"content","label":"Text","description":"The word whose variable-font axes flex.","default":"FLEX"},{"id":"axis","type":"enum","role":"style","label":"Axis","description":"Which variable-font axes animate: weight, width, or both.","default":"both","options":[{"value":"weight","label":"Weight"},{"value":"width","label":"Width"},{"value":"both","label":"Both"}]},{"id":"stagger","type":"number","role":"timing","label":"Stagger","description":"Seconds between per-character flex starts, clamped 0 to 0.25.","default":0.06},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Word color: green rides --brand, blue rides --accent, violet rides --accent-2.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Optional departure. Default none: the carved word holds until the frame cuts.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
+>
+
+```html variable-font-flex.html
+<!doctype html>
+<!--
+  variable-font-flex: HyperFrames video primitive (type / Wave M experiment M5)
+
+  A word lands while its variable-font axes flex: each character rises from
+  hairline-condensed to black-wide (weight 120 to 840, width 40 to 128) with
+  a per-character stagger and a small carve-in overshoot, then settles. The
+  word's font-size eases INVERSELY to the mean axis progress (optical
+  compensation), so the letterforms gain mass while the word's box barely
+  grows: ink swells, layout holds.
+
+  Font: Roboto Flex Variable, pinned via the Fontsource CDN build
+  (@fontsource-variable/roboto-flex@5.2.8, latin "standard" subset:
+  wght 100..1000 and wdth 25%..151% in one woff2). Inter var was considered
+  per the spec but Inter carries NO wdth axis, and this unit's width mode
+  needs a real one; Roboto Flex has both. The @font-face below pins the
+  exact file. The pinned font IS the mechanic, so this unit deliberately
+  does not ride --font-display: a theme font without matching axes would
+  kill the effect. The landing weight (840) is the animated mechanic, not
+  static register styling.
+
+  Variables (declared in data-composition-variables below):
+    - text (string, default "FLEX"): the word.
+    - axis ("weight" | "width" | "both", default "both"): which axes flex.
+      weight holds wdth at 100; width holds wght at 620.
+    - stagger (number seconds, default 0.06, clamped 0 to 0.25): per-char
+      offset between axis flex starts.
+    - accent ("green" | "blue" | "violet", default "green"): green rides
+      --brand, blue rides --accent, violet rides --accent-2.
+    - exit ("none" | "fade" | "up", default "none").
+
+  Envelope, fixed IN and OUT with elastic HOLD only (never timeScale):
+    IN_BASE  = 0.12 lead + (chars - 1) * stagger + 1.15 flex + 0.15 margin
+    HOLD     = max(0, D - IN - OUT), truly still
+    OUT_BASE = 0.45s only when exit != none
+    If D < IN_BASE + OUT_BASE the whole envelope compresses together.
+
+  Determinism and seek-safety: NO tween ever touches the
+  font-variation-settings string. One inert anchor tween spans [0, D]; on
+  every update a painter recomputes each character's axis numbers as a pure
+  function of tl.time() (a number proxy per char) and composes the
+  '"wght" W, "wdth" D' string from those numbers, plus the word-level
+  compensated font-size. Writes are idempotent; eventful seeks
+  (suppressEvents=false) land identical frames in any order and direction.
+
+  Mount contract: the runtime clones only this template. #root fills the
+  host box (no data-width/data-height, container-type: size, cqmin units),
+  is styled via #root only, and registers one paused timeline under the
+  LITERAL "variable-font-flex" key.
+-->
+<html
+  lang="en"
+  data-composition-id="variable-font-flex"
+  data-composition-duration="3.5"
+  data-composition-variables='[
+    { "id": "text", "type": "string", "role": "content", "label": "Text", "description": "The word whose variable-font axes flex.", "default": "FLEX" },
+    { "id": "axis", "type": "enum", "role": "style", "label": "Axis", "description": "Which variable-font axes animate: weight, width, or both.", "default": "both", "options": [{ "value": "weight", "label": "Weight" }, { "value": "width", "label": "Width" }, { "value": "both", "label": "Both" }] },
+    { "id": "stagger", "type": "number", "role": "timing", "label": "Stagger", "description": "Seconds between per-character flex starts, clamped 0 to 0.25.", "default": 0.06 },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Word color: green rides --brand, blue rides --accent, violet rides --accent-2.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the carved word holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Variable Font Flex</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="variable-font-flex" data-duration="3.5" data-fps="30">
+        <style>
+          /* Pinned variable font: Fontsource build of Roboto Flex, latin
+             standard subset, wght 100..1000 + wdth 25%..151% in one file.
+             @fontsource-variable/roboto-flex@5.2.8 on jsdelivr. */
+          @font-face {
+            font-family: "Roboto Flex Variable";
+            font-style: normal;
+            font-display: block;
+            font-weight: 100 1000;
+            font-stretch: 25% 151%;
+            src: url(https://cdn.jsdelivr.net/npm/@fontsource-variable/roboto-flex@5.2.8/files/roboto-flex-latin-standard-normal.woff2)
+              format("woff2-variations");
+          }
+
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: "Roboto Flex Variable", system-ui, sans-serif;
+            pointer-events: none;
+          }
+
+          .vff-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .vff-stage {
+            display: block;
+            max-width: 94cqw;
+            will-change: transform, opacity;
+          }
+
+          .vff-word {
+            display: flex;
+            align-items: baseline;
+            justify-content: center;
+            color: var(--vff-accent);
+            line-height: 1;
+            white-space: pre;
+          }
+
+          .vff-char {
+            position: relative;
+            display: inline-block;
+            white-space: pre;
+            /* No will-change and no transform on chars: per-char compositor
+               layer promotion makes glyph antialiasing depend on seek
+               history (paint-level nondeterminism); the rise rides
+               relative top instead. */
+          }
+        </style>
+
+        <div
+          id="variable-font-flex-clip"
+          class="vff-clip clip"
+          data-start="0"
+          data-duration="3.5"
+          data-track-index="0"
+        >
+          <div class="vff-stage" role="img">
+            <div class="vff-word" aria-hidden="true"></div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".vff-stage");
+            var word = root.querySelector(".vff-word");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var text = vars.text == null || vars.text === "" ? "FLEX" : String(vars.text);
+            var axis = vars.axis === "weight" || vars.axis === "width" ? vars.axis : "both";
+            var staggerRaw = parseFloat(vars.stagger);
+            var stagger = isFinite(staggerRaw) ? Math.min(0.25, Math.max(0, staggerRaw)) : 0.06;
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #52525b)",
+              blue: "var(--accent, #52525b)",
+              violet: "var(--accent-2, #52525b)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            root.style.setProperty("--vff-accent", accentColors[accent]);
+            stage.setAttribute("aria-label", text);
+
+            // Axis endpoints. Non-animated axes hold a fixed value so the
+            // composed string is always complete and orderable.
+            var WGHT_FROM = axis === "width" ? 620 : 120;
+            var WGHT_TO = axis === "width" ? 620 : 840;
+            var WDTH_FROM = axis === "weight" ? 100 : 40;
+            var WDTH_TO = axis === "weight" ? 100 : 128;
+            // Optical compensation strength per mode: how much of the mass
+            // gain the font-size gives back so the box barely grows.
+            var COMP = axis === "both" ? 0.16 : axis === "width" ? 0.12 : 0.08;
+
+            // Build one span per character; spaces stay in flow (white-space:
+            // pre) but never animate.
+            var characters = Array.from(text);
+            var hostDoc = root.ownerDocument;
+            var chars = [];
+            var fragment = hostDoc.createDocumentFragment();
+            for (var i = 0; i < characters.length; i += 1) {
+              var span = hostDoc.createElement("span");
+              span.className = "vff-char";
+              span.textContent = characters[i];
+              fragment.appendChild(span);
+              if (!/\s/.test(characters[i])) chars.push({ el: span, index: i });
+            }
+            word.appendChild(fragment);
+
+            // Fit for the FINAL (wide, black) state; compensation only ever
+            // shrinks below this. cqw base capped by cqh so short words on
+            // wide hosts stay inside the frame.
+            var fitted = Math.min(21, 118 / Math.max(3, characters.length));
+            var BASE_SIZE = "min(" + fitted.toFixed(3) + "cqw, 30cqh)";
+            root.style.setProperty("--vff-size", BASE_SIZE);
+            word.style.fontSize = "var(--vff-size)";
+
+            // Envelope: fixed IN/OUT, elastic HOLD, never time-scaled.
+            var LEAD = 0.12;
+            var FLEX = 1.15;
+            var MARGIN = 0.15;
+            var IN_BASE = LEAD + Math.max(0, chars.length - 1) * stagger + FLEX + MARGIN;
+            var OUT_BASE = exit === "none" ? 0 : 0.45;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "3.5"));
+            var totalBase = Math.max(0.001, IN_BASE + OUT_BASE);
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var lead = LEAD * scale;
+            var flex = FLEX * scale;
+            var staggerEff = stagger * scale;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var OUT_START = IN + HOLD;
+
+            function clamp01(v) {
+              return v < 0 ? 0 : v > 1 ? 1 : v;
+            }
+            // Carve ease: overshoots ~6% past the target, then settles. The
+            // painter clamps composed axis values to the font's real ranges.
+            function carve(u) {
+              var c1 = 0.9;
+              var c3 = c1 + 1;
+              var x = u - 1;
+              return 1 + c3 * x * x * x + c1 * x * x;
+            }
+            function clampAxis(v, lo, hi) {
+              return v < lo ? lo : v > hi ? hi : v;
+            }
+
+            // Pure per-update painter: every character's axis NUMBERS are a
+            // function of tl.time() alone; the font-variation-settings
+            // string is composed from those numbers (the number proxy; the
+            // string itself is never tweened). The word-level font-size
+            // eases inversely to the mean settled progress: optical
+            // compensation, mass grows while the box holds.
+            function applyTime(timeSeconds) {
+              var settledSum = 0;
+              for (var c = 0; c < chars.length; c += 1) {
+                var start = lead + c * staggerEff;
+                var u = clamp01(flex > 0 ? (timeSeconds - start) / flex : 1);
+                var e = u <= 0 ? 0 : u >= 1 ? 1 : carve(u);
+                var settled = e > 1 ? 1 : e;
+                settledSum += settled;
+                var wght = clampAxis(WGHT_FROM + (WGHT_TO - WGHT_FROM) * e, 100, 1000);
+                var wdth = clampAxis(WDTH_FROM + (WDTH_TO - WDTH_FROM) * e, 25, 151);
+                var el = chars[c].el;
+                el.style.fontVariationSettings =
+                  '"wght" ' + wght.toFixed(1) + ', "wdth" ' + wdth.toFixed(2);
+                var oIn = clamp01(flex > 0 ? (timeSeconds - start) / (flex * 0.22) : 1);
+                el.style.opacity = (oIn * oIn * (3 - 2 * oIn)).toFixed(4);
+                el.style.top = ((1 - settled) * 0.14).toFixed(4) + "em";
+              }
+              var mean = chars.length > 0 ? settledSum / chars.length : 1;
+              word.style.fontSize = "calc(var(--vff-size) * " + (1 - COMP * mean).toFixed(4) + ")";
+            }
+
+            gsap.set(stage, { opacity: 1, y: "0cqh" });
+
+            var tl = gsap.timeline({
+              paused: true,
+              onUpdate: function () {
+                applyTime(tl.time());
+              },
+            });
+
+            // Anchor tween: an inert plain-object tween spanning [0, D] so
+            // onUpdate fires for every eventful seek and holds never clamp.
+            tl.to({ p: 0 }, { p: 1, duration: duration, ease: "none" }, 0);
+
+            // HOLD: truly still; repeated repaints write identical values.
+
+            // OUT: optional departure; exit none holds until the frame cuts.
+            if (exit === "up") {
+              tl.to(stage, { y: "-4cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "fade") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            }
+
+            tl.seek(0);
+            applyTime(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["variable-font-flex"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add variable-font-flex" />
+
+That writes one file: `compositions/components/variable-font-flex.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/variable-font-flex.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `experiment` `type` `variable-font` `deterministic`.
+
+## 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/components/vector-editor-rig.mdx b/docs/catalog/components/vector-editor-rig.mdx
new file mode 100644
index 0000000000..5289627edc
--- /dev/null
+++ b/docs/catalog/components/vector-editor-rig.mdx
@@ -0,0 +1,837 @@
+---
+title: "Vector Editor Rig"
+description: "A dark design-tool app chrome with a live vector pen path, sequential anchor points, bezier handles, a selection frame, and theme-driven blue accents."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/vector-editor-rig.html"
+  compositionId="vector-editor-rig"
+  compositionSrc="compositions/components/vector-editor-rig.html"
+  variables={[{"id":"tool","type":"enum","role":"content","label":"Active tool","description":"Tool highlighted in the editor toolbar.","default":"pen","options":[{"value":"pen","label":"Pen"},{"value":"shape","label":"Shape"},{"value":"type","label":"Type"}]},{"id":"pathLabel","type":"string","role":"content","label":"Path label","description":"Name shown for the active vector path.","default":"Logo"}]}
+>
+
+```html vector-editor-rig.html
+<!doctype html>
+<!--
+  vector-editor-rig -- HyperFrames video primitive (ui-props / holdable / demonstrate)
+
+  Concept: a compact vector editor app chrome frames the demonstration. A
+  left tool rail, central canvas, and right layers and properties inspector
+  stay readable while a blue bezier path draws on live. Anchor dots, diamond
+  control handles, connector arms, and a selection frame arrive in sequence
+  so the scene reads as active vector design rather than a static diagram.
+
+  Compiled-from evidence: power-reel source 11-vector-editor (design-tool
+  twin of terminal-run). The source contributes its blue-on-dark selection
+  rig vocabulary, while this primitive adds the required application chrome
+  and live pen drawing mechanic.
+
+  Use when: demonstrating vector creation, brand design, drawing tools, or a
+  design workflow inside a larger product scene. The primitive is holdable,
+  so the completed editor state remains legible for variable scene lengths.
+
+  Variables (declared in data-composition-variables below):
+    - tool ("pen" | "shape" | "type", default "pen"): selects the visibly
+      active swatch in the left toolbar.
+    - pathLabel (string, default "Logo"): names the document chip and the
+      selected layer. Blank or whitespace-only values normalize to "Logo".
+    - accent is theme-owned, not a getVariables() knob. The path, active tool,
+      handles, and selection frame all paint through var(--brand, #0d99ff).
+
+  Envelope (fixed IN/OUT, elastic HOLD only, never gsap.timeScale()):
+    IN_BASE  = 1.20s  chrome settles, path draws, rig nodes pop, frame lands
+    HOLD     = elastic = max(0, D - (IN_BASE + OUT_BASE)); selected-state dot
+               breathes gently with a finite sine cycle
+    OUT_BASE = 0.50s  editor releases upward and fades
+    If D < IN_BASE + OUT_BASE, IN and OUT scale down together so IN + OUT == D
+    and HOLD == 0.
+
+  Sync point (fixed offset into IN, never inside elastic HOLD): the stroke
+  finishes and the final anchor lands at PATH_FINISH_AT = 1.05s into an
+  unscaled IN. It scales proportionally when the envelope is compressed.
+
+  Sound cue: a subtle vector-close cue fires at PATH_FINISH_AT. This primitive
+  never plays audio. It dispatches an `hf:sfx` CustomEvent
+  ({ id: "vector-close", t: PATH_FINISH_AT }) for a scene mix stage to route.
+
+  Mount contract: this file is a MOUNTABLE SUB-COMPOSITION, not a standalone
+  composition. A host loads it via data-composition-src; the runtime only
+  clones <template> contents, so all live CSS, markup, and scripts sit inside
+  <template>. The root has no data-width/data-height. It fills the host slot
+  with position:absolute; inset:0; container-type:size and sizes every visual
+  from cqw/cqh or SVG viewBox proportions. The root is styled by #root because
+  mounted CSS scoping can stop a class selector from matching the flattened
+  root. Variables come from window.__hyperframes.getVariables(), which merges
+  declared defaults with per-instance host overrides before mount.
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "tool", "type": "enum", "role": "content", "label": "Active tool", "description": "Tool highlighted in the editor toolbar.", "default": "pen", "options": [{ "value": "pen", "label": "Pen" }, { "value": "shape", "label": "Shape" }, { "value": "type", "label": "Type" }] },
+    { "id": "pathLabel", "type": "string", "role": "content", "label": "Path label", "description": "Name shown for the active vector path.", "default": "Logo" }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Vector Editor Rig</title>
+    <!-- Metadata only for direct file inspection. The runtime discards the
+         head when mounting, while it reads variable declarations from the
+         fetched document's html element before cloning the template. -->
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="vector-editor-rig" data-duration="4.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            background: var(--bg, #0b1120);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+          }
+
+          .ve-clip,
+          .ve-stage {
+            width: 100%;
+            height: 100%;
+          }
+
+          .ve-stage {
+            display: grid;
+            grid-template-rows: 9cqh 1fr;
+            background: var(--bg, #0b1120);
+            opacity: 0;
+          }
+
+          .ve-topbar {
+            display: grid;
+            grid-template-columns: 18cqw 1fr 18cqw;
+            align-items: center;
+            padding: 0 2cqw;
+            border-bottom: 0.08cqw solid var(--border, #2c3b52);
+            background: color-mix(in srgb, var(--surface, #162033) 84%, var(--bg, #0b1120));
+          }
+
+          .ve-window-controls,
+          .ve-top-actions {
+            display: flex;
+            align-items: center;
+            gap: 0.7cqw;
+          }
+
+          .ve-top-actions {
+            justify-content: flex-end;
+          }
+
+          .ve-window-dot {
+            width: 0.75cqw;
+            aspect-ratio: 1;
+            border-radius: 50%;
+            background: var(--muted, #8190a8);
+          }
+
+          .ve-window-dot:first-child,
+          .ve-live-dot {
+            background: var(--brand, #0d99ff);
+          }
+
+          .ve-document {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 0.8cqw;
+            min-width: 0;
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: 1.25cqw;
+            font-weight: 650;
+            letter-spacing: 0.01em;
+          }
+
+          .ve-document-name {
+            max-width: 20cqw;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          .ve-document-chip,
+          .ve-zoom-chip {
+            padding: 0.55cqh 0.75cqw;
+            border: 0.08cqw solid color-mix(in srgb, var(--brand, #0d99ff) 46%, transparent);
+            border-radius: 0.45cqw;
+            background: color-mix(in srgb, var(--brand, #0d99ff) 13%, transparent);
+            color: var(--brand, #0d99ff);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            font-size: 0.82cqw;
+            font-weight: 700;
+            letter-spacing: 0.06em;
+            text-transform: uppercase;
+          }
+
+          .ve-zoom-chip {
+            border-color: var(--border, #2c3b52);
+            background: var(--surface, #162033);
+            color: var(--muted, #8190a8);
+            letter-spacing: 0;
+            text-transform: none;
+          }
+
+          .ve-live-dot {
+            width: 0.55cqw;
+            aspect-ratio: 1;
+            border-radius: 50%;
+            box-shadow: 0 0 1.2cqw color-mix(in srgb, var(--brand, #0d99ff) 68%, transparent);
+          }
+
+          .ve-workbench {
+            min-height: 0;
+            display: grid;
+            grid-template-columns: 7cqw minmax(0, 1fr) 25cqw;
+          }
+
+          .ve-toolbar {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 1.4cqh;
+            padding-top: 2.4cqh;
+            border-right: 0.08cqw solid var(--border, #2c3b52);
+            background: color-mix(in srgb, var(--surface, #162033) 72%, var(--bg, #0b1120));
+          }
+
+          .ve-tool {
+            width: 3.7cqw;
+            aspect-ratio: 1;
+            display: grid;
+            place-items: center;
+            border: 0.08cqw solid transparent;
+            border-radius: 0.75cqw;
+            background: transparent;
+            color: var(--muted, #8190a8);
+          }
+
+          .ve-tool svg {
+            width: 1.75cqw;
+            height: 1.75cqw;
+            overflow: visible;
+          }
+
+          #root[data-tool="pen"] .ve-tool[data-tool-id="pen"],
+          #root[data-tool="shape"] .ve-tool[data-tool-id="shape"],
+          #root[data-tool="type"] .ve-tool[data-tool-id="type"] {
+            border-color: color-mix(in srgb, var(--brand, #0d99ff) 46%, transparent);
+            background: color-mix(in srgb, var(--brand, #0d99ff) 15%, transparent);
+            color: var(--brand, #0d99ff);
+            box-shadow: 0 0 1.4cqw color-mix(in srgb, var(--brand, #0d99ff) 14%, transparent);
+          }
+
+          .ve-tool-divider {
+            width: 3cqw;
+            height: 0.08cqw;
+            margin: 0.35cqh 0;
+            background: var(--border, #2c3b52);
+          }
+
+          .ve-canvas {
+            position: relative;
+            min-width: 0;
+            overflow: hidden;
+            background:
+              linear-gradient(
+                color-mix(in srgb, var(--border, #2c3b52) 25%, transparent) 0.08cqw,
+                transparent 0.08cqw
+              ),
+              linear-gradient(
+                90deg,
+                color-mix(in srgb, var(--border, #2c3b52) 25%, transparent) 0.08cqw,
+                transparent 0.08cqw
+              ),
+              color-mix(in srgb, var(--bg, #0b1120) 84%, var(--surface, #162033));
+            background-size: 4.3cqw 4.3cqw;
+          }
+
+          .ve-canvas-label {
+            position: absolute;
+            top: 2.2cqh;
+            left: 2cqw;
+            z-index: 2;
+            display: flex;
+            align-items: center;
+            gap: 0.65cqw;
+            color: var(--muted, #8190a8);
+            font-size: 0.92cqw;
+            letter-spacing: 0.03em;
+          }
+
+          .ve-canvas-label::before {
+            content: "";
+            width: 0.55cqw;
+            aspect-ratio: 1;
+            border: 0.08cqw solid var(--brand, #0d99ff);
+            transform: rotate(45deg);
+          }
+
+          .ve-artboard {
+            position: absolute;
+            left: 50%;
+            top: 52%;
+            width: 50cqw;
+            height: 64cqh;
+            transform: translate(-50%, -50%);
+            overflow: hidden;
+            border: 0.08cqw solid color-mix(in srgb, var(--border, #2c3b52) 78%, transparent);
+            border-radius: 1.1cqw;
+            background:
+              radial-gradient(
+                circle at 50% 48%,
+                color-mix(in srgb, var(--brand, #0d99ff) 10%, transparent),
+                transparent 48%
+              ),
+              var(--surface, #162033);
+            box-shadow: 0 2.8cqh 5.5cqw color-mix(in srgb, var(--bg, #0b1120) 70%, transparent);
+          }
+
+          .ve-artboard svg {
+            width: 100%;
+            height: 100%;
+            display: block;
+            overflow: visible;
+          }
+
+          .ve-vector-path {
+            fill: color-mix(in srgb, var(--brand, #0d99ff) 8%, transparent);
+            stroke: var(--brand, #0d99ff);
+            stroke-width: 4;
+            stroke-linecap: round;
+            stroke-linejoin: round;
+            filter: drop-shadow(
+              0 0 0.7cqw color-mix(in srgb, var(--brand, #0d99ff) 42%, transparent)
+            );
+          }
+
+          .ve-selection {
+            color: var(--brand, #0d99ff);
+          }
+
+          .ve-selection-frame {
+            fill: none;
+            stroke: currentColor;
+            stroke-width: 1.5;
+          }
+
+          .ve-selection-corner,
+          .ve-control-diamond {
+            fill: var(--surface, #162033);
+            stroke: currentColor;
+            stroke-width: 2;
+          }
+
+          .ve-control-arm {
+            stroke: var(--muted, #8190a8);
+            stroke-width: 1.5;
+          }
+
+          .ve-anchor-dot {
+            fill: var(--fg, #f8fafc);
+            stroke: var(--brand, #0d99ff);
+            stroke-width: 3;
+          }
+
+          .ve-anchor-ring {
+            fill: color-mix(in srgb, var(--brand, #0d99ff) 12%, transparent);
+            stroke: color-mix(in srgb, var(--brand, #0d99ff) 55%, transparent);
+            stroke-width: 1.5;
+          }
+
+          .ve-inspector {
+            min-width: 0;
+            border-left: 0.08cqw solid var(--border, #2c3b52);
+            background: color-mix(in srgb, var(--surface, #162033) 76%, var(--bg, #0b1120));
+          }
+
+          .ve-panel-section {
+            padding: 2.1cqh 1.6cqw;
+            border-bottom: 0.08cqw solid var(--border, #2c3b52);
+          }
+
+          .ve-panel-title {
+            margin-bottom: 1.4cqh;
+            color: var(--muted, #8190a8);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: 0.82cqw;
+            font-weight: 750;
+            letter-spacing: 0.12em;
+            text-transform: uppercase;
+          }
+
+          .ve-layer-row,
+          .ve-property-row {
+            display: grid;
+            align-items: center;
+            min-width: 0;
+            border-radius: 0.6cqw;
+            color: var(--fg, #f8fafc);
+            font-size: 0.94cqw;
+          }
+
+          .ve-layer-row {
+            grid-template-columns: 1.3cqw minmax(0, 1fr) auto;
+            gap: 0.75cqw;
+            padding: 1.15cqh 0.85cqw;
+          }
+
+          .ve-layer-row.is-selected {
+            background: color-mix(in srgb, var(--brand, #0d99ff) 14%, transparent);
+            color: var(--brand, #0d99ff);
+          }
+
+          .ve-layer-icon {
+            width: 0.85cqw;
+            aspect-ratio: 1;
+            border: 0.1cqw solid currentColor;
+            transform: rotate(45deg);
+          }
+
+          .ve-layer-name {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          .ve-layer-kind {
+            color: var(--muted, #8190a8);
+            font-size: 0.72cqw;
+            letter-spacing: 0.04em;
+          }
+
+          .ve-property-row {
+            grid-template-columns: minmax(0, 1fr) auto;
+            gap: 1cqw;
+            min-height: 4.1cqh;
+            color: var(--muted, #8190a8);
+          }
+
+          .ve-property-value {
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: 0.86cqw;
+          }
+
+          .ve-color-swatch {
+            width: 1.2cqw;
+            aspect-ratio: 1;
+            border: 0.08cqw solid color-mix(in srgb, var(--fg, #f8fafc) 25%, transparent);
+            border-radius: 0.28cqw;
+            background: var(--brand, #0d99ff);
+          }
+        </style>
+
+        <div
+          id="vector-editor-rig-clip"
+          class="ve-clip clip"
+          data-start="0"
+          data-duration="4.5"
+          data-track-index="0"
+        >
+          <div class="ve-stage">
+            <header class="ve-topbar">
+              <div class="ve-window-controls" aria-hidden="true">
+                <span class="ve-window-dot"></span>
+                <span class="ve-window-dot"></span>
+                <span class="ve-window-dot"></span>
+              </div>
+              <div class="ve-document">
+                <span class="ve-document-chip">Vector</span>
+                <span class="ve-document-name"></span>
+              </div>
+              <div class="ve-top-actions">
+                <span class="ve-live-dot"></span>
+                <span class="ve-zoom-chip">100%</span>
+              </div>
+            </header>
+
+            <div class="ve-workbench">
+              <nav class="ve-toolbar" aria-label="Vector tools">
+                <div class="ve-tool" data-tool-id="pen" aria-label="Pen tool" role="img">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
+                    <path d="M4 20l4.3-1.1L19 8.2 15.8 5 5.1 15.7 4 20Z" />
+                    <path d="m13.8 7 3.2 3.2M5.1 15.7l3.2 3.2" />
+                  </svg>
+                </div>
+                <div class="ve-tool" data-tool-id="shape" aria-label="Shape tool" role="img">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
+                    <rect x="4.5" y="4.5" width="15" height="15" rx="2" />
+                    <circle cx="12" cy="12" r="3.5" />
+                  </svg>
+                </div>
+                <div class="ve-tool" data-tool-id="type" aria-label="Type tool" role="img">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
+                    <path d="M5 6h14M12 6v13M8.5 19h7" />
+                  </svg>
+                </div>
+                <span class="ve-tool-divider"></span>
+                <div class="ve-tool" aria-hidden="true">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
+                    <path d="m5 5 6 14 2-6 6-2L5 5Z" />
+                  </svg>
+                </div>
+              </nav>
+
+              <main class="ve-canvas">
+                <div class="ve-canvas-label"><span></span></div>
+                <div class="ve-artboard">
+                  <svg viewBox="0 0 720 500" aria-label="Vector path being drawn">
+                    <path
+                      class="ve-vector-path"
+                      d="M 140 350 C 165 235 235 150 320 145 C 415 140 520 195 565 285 C 600 360 535 415 445 425 C 350 440 260 430 210 405 C 175 390 150 370 140 350 Z"
+                    />
+
+                    <g class="ve-selection">
+                      <rect
+                        class="ve-selection-frame"
+                        x="105"
+                        y="100"
+                        width="500"
+                        height="370"
+                        rx="4"
+                      />
+                      <rect
+                        class="ve-selection-corner"
+                        x="99"
+                        y="94"
+                        width="12"
+                        height="12"
+                        rx="1"
+                      />
+                      <rect
+                        class="ve-selection-corner"
+                        x="599"
+                        y="94"
+                        width="12"
+                        height="12"
+                        rx="1"
+                      />
+                      <rect
+                        class="ve-selection-corner"
+                        x="599"
+                        y="464"
+                        width="12"
+                        height="12"
+                        rx="1"
+                      />
+                      <rect
+                        class="ve-selection-corner"
+                        x="99"
+                        y="464"
+                        width="12"
+                        height="12"
+                        rx="1"
+                      />
+                    </g>
+
+                    <g class="ve-node">
+                      <circle class="ve-anchor-ring" cx="140" cy="350" r="12" />
+                      <circle class="ve-anchor-dot" cx="140" cy="350" r="6" />
+                    </g>
+                    <g class="ve-node">
+                      <line class="ve-control-arm" x1="235" y1="150" x2="405" y2="138" />
+                      <rect
+                        class="ve-control-diamond"
+                        x="229"
+                        y="144"
+                        width="12"
+                        height="12"
+                        transform="rotate(45 235 150)"
+                      />
+                      <rect
+                        class="ve-control-diamond"
+                        x="399"
+                        y="132"
+                        width="12"
+                        height="12"
+                        transform="rotate(45 405 138)"
+                      />
+                      <circle class="ve-anchor-ring" cx="320" cy="145" r="12" />
+                      <circle class="ve-anchor-dot" cx="320" cy="145" r="6" />
+                    </g>
+                    <g class="ve-node">
+                      <line class="ve-control-arm" x1="520" y1="195" x2="600" y2="360" />
+                      <rect
+                        class="ve-control-diamond"
+                        x="514"
+                        y="189"
+                        width="12"
+                        height="12"
+                        transform="rotate(45 520 195)"
+                      />
+                      <rect
+                        class="ve-control-diamond"
+                        x="594"
+                        y="354"
+                        width="12"
+                        height="12"
+                        transform="rotate(45 600 360)"
+                      />
+                      <circle class="ve-anchor-ring" cx="565" cy="285" r="12" />
+                      <circle class="ve-anchor-dot" cx="565" cy="285" r="6" />
+                    </g>
+                    <g class="ve-node">
+                      <line class="ve-control-arm" x1="535" y1="415" x2="350" y2="440" />
+                      <rect
+                        class="ve-control-diamond"
+                        x="529"
+                        y="409"
+                        width="12"
+                        height="12"
+                        transform="rotate(45 535 415)"
+                      />
+                      <rect
+                        class="ve-control-diamond"
+                        x="344"
+                        y="434"
+                        width="12"
+                        height="12"
+                        transform="rotate(45 350 440)"
+                      />
+                      <circle class="ve-anchor-ring" cx="445" cy="425" r="12" />
+                      <circle class="ve-anchor-dot" cx="445" cy="425" r="6" />
+                    </g>
+                    <g class="ve-node">
+                      <circle class="ve-anchor-ring" cx="210" cy="405" r="12" />
+                      <circle class="ve-anchor-dot" cx="210" cy="405" r="6" />
+                    </g>
+                  </svg>
+                </div>
+              </main>
+
+              <aside class="ve-inspector">
+                <section class="ve-panel-section">
+                  <div class="ve-panel-title">Layers</div>
+                  <div class="ve-layer-row is-selected">
+                    <span class="ve-layer-icon"></span>
+                    <span class="ve-layer-name"></span>
+                    <span class="ve-layer-kind">Path</span>
+                  </div>
+                  <div class="ve-layer-row">
+                    <span class="ve-layer-icon"></span>
+                    <span>Frame</span>
+                    <span class="ve-layer-kind">Group</span>
+                  </div>
+                </section>
+                <section class="ve-panel-section">
+                  <div class="ve-panel-title">Properties</div>
+                  <div class="ve-property-row">
+                    <span>Fill</span>
+                    <span class="ve-property-value">8%</span>
+                  </div>
+                  <div class="ve-property-row">
+                    <span>Stroke</span>
+                    <span class="ve-color-swatch"></span>
+                  </div>
+                  <div class="ve-property-row">
+                    <span>Width</span>
+                    <span class="ve-property-value">4</span>
+                  </div>
+                  <div class="ve-property-row">
+                    <span>Nodes</span>
+                    <span class="ve-property-value">5</span>
+                  </div>
+                </section>
+              </aside>
+            </div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            // Literal, not read from the mounted DOM. The runtime strips
+            // data-composition-id from the flattened inner root, so reading
+            // that attribute after mount would register the timeline under
+            // "null" and leave the host waiting for this composition.
+            var compositionId = "vector-editor-rig";
+            var stage = root.querySelector(".ve-stage");
+            var path = root.querySelector(".ve-vector-path");
+            var nodes = root.querySelectorAll(".ve-node");
+            var selection = root.querySelector(".ve-selection");
+            var liveDot = root.querySelector(".ve-live-dot");
+            var documentName = root.querySelector(".ve-document-name");
+            var canvasLabel = root.querySelector(".ve-canvas-label span");
+            var layerName = root.querySelector(".ve-layer-name");
+
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            // INVARIANT: exactly one known tool owns the active toolbar state.
+            var allowedTools = ["pen", "shape", "type"];
+            var tool = allowedTools.indexOf(vars.tool) >= 0 ? vars.tool : "pen";
+            // INVARIANT: all label surfaces receive the same bounded string.
+            var rawLabel = vars.pathLabel == null ? "Logo" : String(vars.pathLabel);
+            var trimmedLabel = rawLabel.trim().slice(0, 28);
+            var pathLabel = trimmedLabel.length > 0 ? trimmedLabel : "Logo";
+
+            root.setAttribute("data-tool", tool);
+            documentName.textContent = pathLabel;
+            canvasLabel.textContent = pathLabel + " path";
+            layerName.textContent = pathLabel;
+
+            var IN_BASE = 1.2;
+            var OUT_BASE = 0.5;
+            var STAGE_IN_BASE = 0.28;
+            var PATH_START_BASE = 0.1;
+            var PATH_FINISH_AT_BASE = 1.05; // sync point: fixed inside IN
+            var NODE_DURATION_BASE = 0.16;
+            var SELECTION_START_BASE = 0.82;
+            var HOLD_PULSE_HALF = 0.65;
+
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4.5"));
+            var totalBase = IN_BASE + OUT_BASE;
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var STAGE_IN = STAGE_IN_BASE * scale;
+            var PATH_START = PATH_START_BASE * scale;
+            var PATH_FINISH_AT = PATH_FINISH_AT_BASE * scale;
+            var PATH_DRAW_DURATION = PATH_FINISH_AT - PATH_START;
+            var NODE_DURATION = NODE_DURATION_BASE * scale;
+            var SELECTION_START = SELECTION_START_BASE * scale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var HOLD_START = IN;
+            var OUT_START = IN + HOLD;
+            var nodeLandings = [0.25, 0.48, 0.7, 0.9, PATH_FINISH_AT_BASE];
+            var pathLength = path.getTotalLength();
+
+            function fireSfx(id, t) {
+              root.dispatchEvent(
+                new CustomEvent("hf:sfx", { detail: { id: id, t: t }, bubbles: true }),
+              );
+            }
+
+            // Explicit t=0 state for every animated endpoint, never gsap.from().
+            gsap.set(stage, { opacity: 0, y: "1.8cqh" });
+            gsap.set(path, {
+              fillOpacity: 0,
+              strokeDasharray: pathLength,
+              strokeDashoffset: pathLength,
+            });
+            gsap.set(nodes, { opacity: 0, scale: 0, transformOrigin: "center center" });
+            gsap.set(selection, { opacity: 0 });
+            gsap.set(liveDot, { opacity: 0.68, scale: 1 });
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: chrome settles, then the pen stroke and anchors reveal.
+            tl.to(stage, { opacity: 1, y: 0, duration: STAGE_IN, ease: "power2.out" }, 0);
+            tl.to(
+              path,
+              { strokeDashoffset: 0, duration: PATH_DRAW_DURATION, ease: "none" },
+              PATH_START,
+            );
+
+            for (var i = 0; i < nodes.length; i += 1) {
+              var nodeLanding = nodeLandings[i] * scale;
+              tl.to(
+                nodes[i],
+                { opacity: 1, scale: 1, duration: NODE_DURATION, ease: "power2.out" },
+                Math.max(0, nodeLanding - NODE_DURATION),
+              );
+            }
+
+            tl.to(
+              selection,
+              {
+                opacity: 1,
+                duration: Math.max(0.001, PATH_FINISH_AT - SELECTION_START),
+                ease: "power2.out",
+              },
+              SELECTION_START,
+            );
+            tl.to(
+              path,
+              {
+                fillOpacity: 1,
+                duration: Math.max(0.001, PATH_FINISH_AT - SELECTION_START),
+                ease: "power2.out",
+              },
+              SELECTION_START,
+            );
+            tl.call(
+              function () {
+                fireSfx("vector-close", PATH_FINISH_AT);
+              },
+              [],
+              PATH_FINISH_AT,
+            );
+
+            // HOLD: finite selected-state pulse, absent when no hold exists.
+            if (HOLD > HOLD_PULSE_HALF) {
+              var pulseRepeat = Math.max(0, Math.floor(HOLD / HOLD_PULSE_HALF) - 1);
+              tl.to(
+                liveDot,
+                {
+                  opacity: 1,
+                  scale: 1.22,
+                  duration: HOLD_PULSE_HALF,
+                  ease: "sine.inOut",
+                  yoyo: true,
+                  repeat: pulseRepeat,
+                },
+                HOLD_START,
+              );
+            }
+
+            // OUT: editor releases cleanly without altering the completed rig.
+            tl.to(stage, { opacity: 0, y: "-1.2cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add vector-editor-rig" />
+
+That writes one file: `compositions/components/vector-editor-rig.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/vector-editor-rig.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `prop` `ui-props` `demonstrate` `vector` `design-tool` `pen-tool` `bezier` `app-chrome`.
+
+## 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/components/velocity-throw-snap.mdx b/docs/catalog/components/velocity-throw-snap.mdx
new file mode 100644
index 0000000000..5f9743a2e8
--- /dev/null
+++ b/docs/catalog/components/velocity-throw-snap.mdx
@@ -0,0 +1,526 @@
+---
+title: "Velocity Throw Snap"
+description: "A five-shot rail whips past on a fast decaying curve, then overshoots and snaps the selected hero shot exactly to center."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/velocity-throw-snap.html"
+  compositionId="velocity-throw-snap"
+  compositionSrc="compositions/components/velocity-throw-snap.html"
+  variables={[{"id":"hero_index","type":"number","role":"content","label":"Hero index","description":"Zero-based index of the shot centered at the settle.","default":2,"min":0,"max":4,"step":1},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Highlight color used by the hero shot.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"card_label_prefix","type":"string","role":"content","label":"Card label prefix","description":"Text placed before each shot number.","default":"Shot"}]}
+>
+
+```html velocity-throw-snap.html
+<!doctype html>
+<!--
+  velocity-throw-snap: HyperFrames video primitive (feature-tour / exhibit)
+
+  Concept: a five-shot rail whips in on an authored velocity curve, loses
+  speed quickly, then snaps past and back onto the selected hero shot. The
+  selected shot finishes exactly centered while its neighbors dim.
+
+  Variables:
+    - hero_index (number, 0 to 4, default 2): shot centered at the settle.
+    - accent (green | blue | violet, default green): hero highlight color.
+    - card_label_prefix (string, default "Shot"): label before each card number.
+
+  Envelope (fixed IN, elastic HOLD, no OUT):
+    IN_BASE  = 1.40s, fast power4.out throw followed by back.out(1.7) snap
+    HOLD     = elastic = max(0, D - IN), centered hero aura breathes subtly
+    OUT_BASE = 0s, the centered hero remains as the final state
+    If D is shorter than IN_BASE, the complete throw and snap compress to fit.
+
+  Mount contract: the runtime clones only this template. #root fills the
+  host box, establishes the cqw/cqh basis, has no data-width or data-height,
+  and registers one paused timeline under the hardcoded velocity-throw-snap id.
+  Rail position is CSS-owned: --vts-hero-index selects the centered card and
+  --vts-throw-x adds seek-driven travel in cqw units. No pixel measurements
+  are cached or read.
+-->
+<html
+  lang="en"
+  data-composition-id="velocity-throw-snap"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "hero_index", "type": "number", "role": "content", "label": "Hero index", "description": "Zero-based index of the shot centered at the settle.", "default": 2, "min": 0, "max": 4, "step": 1 },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Highlight color used by the hero shot.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "card_label_prefix", "type": "string", "role": "content", "label": "Card label prefix", "description": "Text placed before each shot number.", "default": "Shot" }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Velocity Throw Snap</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="velocity-throw-snap" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            --vts-card-width: 48;
+            --vts-card-gap: 4.5;
+            --vts-hero-index: 0;
+            --vts-throw-x: 0;
+            --vts-throw-y: 0;
+            --vts-tilt: 0;
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .vts-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            background:
+              radial-gradient(
+                circle at 50% 46%,
+                color-mix(in srgb, var(--vts-accent) 13%, var(--bg, #172033)) 0%,
+                var(--bg, #0b0c0e) 72%
+              ),
+              var(--bg, #0b0c0e);
+          }
+
+          .vts-rail {
+            position: absolute;
+            left: 0;
+            top: 18cqh;
+            display: flex;
+            align-items: center;
+            gap: calc(var(--vts-card-gap) * 1cqw);
+            width: max-content;
+            transform: translateX(
+                calc(
+                  (
+                      50 - var(--vts-card-width) / 2 - var(--vts-hero-index) *
+                        (var(--vts-card-width) + var(--vts-card-gap)) + var(--vts-throw-x)
+                    ) *
+                    1cqw
+                )
+              )
+              translateY(calc(var(--vts-throw-y) * 1cqh)) rotate(calc(var(--vts-tilt) * 1deg));
+            transform-origin: 50% 50%;
+            will-change: transform;
+          }
+
+          .vts-card {
+            position: relative;
+            flex: 0 0 calc(var(--vts-card-width) * 1cqw);
+            height: 62cqh;
+            overflow: hidden;
+            border: 0.16cqmin solid color-mix(in srgb, var(--border, #475569) 76%, transparent);
+            border-radius: var(--radius, 3.2cqmin);
+            background: linear-gradient(
+              150deg,
+              var(--surface, #f8fafc) 0%,
+              var(--surface, #dbe5f1) 100%
+            );
+            color: var(--fg, #101827);
+            box-shadow: 0 3.6cqh 8cqh color-mix(in srgb, var(--bg, #000000) 46%, transparent);
+            transform-origin: 50% 50%;
+            will-change: transform, opacity, border-color, box-shadow;
+          }
+
+          .vts-aura {
+            position: absolute;
+            inset: -0.2cqmin;
+            z-index: 2;
+            border: 0.28cqmin solid var(--vts-accent);
+            border-radius: inherit;
+            box-shadow:
+              inset 0 0 3cqmin color-mix(in srgb, var(--vts-accent) 16%, transparent),
+              0 0 4cqmin color-mix(in srgb, var(--vts-accent) 36%, transparent);
+            opacity: 0;
+            pointer-events: none;
+          }
+
+          .vts-card-top {
+            height: 8cqh;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 0 2.6cqw;
+            border-bottom: 0.1cqmin solid var(--border, #c4ceda);
+            background: color-mix(in srgb, var(--surface, #ffffff) 58%, transparent);
+          }
+
+          .vts-dots {
+            display: flex;
+            gap: 0.45cqw;
+          }
+
+          .vts-dots i {
+            width: 0.58cqw;
+            aspect-ratio: 1;
+            border-radius: 50%;
+            background: var(--muted, #91a0b3);
+          }
+
+          .vts-index {
+            color: var(--vts-accent-dark);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            font-size: 1.45cqw;
+            font-weight: 760;
+            letter-spacing: 0.12em;
+          }
+
+          .vts-preview {
+            height: 38cqh;
+            display: grid;
+            grid-template-columns: 1.05fr 0.95fr;
+            gap: 1.8cqw;
+            padding: 3cqh 2.6cqw;
+          }
+
+          .vts-panel,
+          .vts-stack {
+            border: 0.1cqmin solid var(--border, #c4ceda);
+            border-radius: 1.5cqmin;
+            background: var(--surface, #edf2f7);
+          }
+
+          .vts-panel {
+            position: relative;
+            overflow: hidden;
+            background: linear-gradient(
+              145deg,
+              color-mix(in srgb, var(--vts-accent) 30%, var(--surface, #eaf0f6)),
+              var(--surface, #d7e0ea)
+            );
+          }
+
+          .vts-panel::before,
+          .vts-panel::after {
+            content: "";
+            position: absolute;
+            border-radius: 1cqmin;
+            background: color-mix(in srgb, var(--vts-accent) 72%, var(--surface, #ffffff));
+          }
+
+          .vts-panel::before {
+            width: 11cqw;
+            height: 11cqw;
+            left: 3cqw;
+            top: 5cqh;
+          }
+
+          .vts-panel::after {
+            left: 3cqw;
+            right: 3cqw;
+            bottom: 4cqh;
+            height: 1.2cqh;
+          }
+
+          .vts-stack {
+            display: grid;
+            align-content: center;
+            gap: 2.2cqh;
+            padding: 2cqw;
+          }
+
+          .vts-stack i {
+            display: block;
+            height: 1.2cqh;
+            border-radius: 1cqh;
+            background: var(--muted, #bcc8d6);
+          }
+
+          .vts-stack i:first-child {
+            width: 72%;
+            background: var(--vts-accent);
+          }
+
+          .vts-stack i:last-child {
+            width: 56%;
+          }
+
+          .vts-label {
+            display: block;
+            max-width: 100%;
+            padding: 0 2.6cqw;
+            overflow: hidden;
+            color: var(--fg, #101827);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: 3.4cqw;
+            font-weight: 780;
+            line-height: 1;
+            letter-spacing: -0.04em;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          .vts-card:nth-child(2) .vts-preview,
+          .vts-card:nth-child(5) .vts-preview {
+            grid-template-columns: 0.78fr 1.22fr;
+          }
+
+          .vts-card:nth-child(3) .vts-panel::before {
+            width: 14cqw;
+            border-radius: 50%;
+          }
+
+          .vts-card:nth-child(4) .vts-preview {
+            grid-template-columns: 1fr;
+          }
+
+          .vts-card:nth-child(4) .vts-stack {
+            display: none;
+          }
+        </style>
+
+        <div
+          id="velocity-throw-snap-clip"
+          class="vts-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="vts-rail" role="list" aria-label="Feature shots">
+            <article class="vts-card" role="listitem">
+              <span class="vts-aura" aria-hidden="true"></span>
+              <div class="vts-card-top">
+                <span class="vts-dots"><i></i><i></i><i></i></span><span class="vts-index">01</span>
+              </div>
+              <div class="vts-preview">
+                <span class="vts-panel"></span><span class="vts-stack"><i></i><i></i><i></i></span>
+              </div>
+              <span class="vts-label"></span>
+            </article>
+            <article class="vts-card" role="listitem">
+              <span class="vts-aura" aria-hidden="true"></span>
+              <div class="vts-card-top">
+                <span class="vts-dots"><i></i><i></i><i></i></span><span class="vts-index">02</span>
+              </div>
+              <div class="vts-preview">
+                <span class="vts-panel"></span><span class="vts-stack"><i></i><i></i><i></i></span>
+              </div>
+              <span class="vts-label"></span>
+            </article>
+            <article class="vts-card" role="listitem">
+              <span class="vts-aura" aria-hidden="true"></span>
+              <div class="vts-card-top">
+                <span class="vts-dots"><i></i><i></i><i></i></span><span class="vts-index">03</span>
+              </div>
+              <div class="vts-preview">
+                <span class="vts-panel"></span><span class="vts-stack"><i></i><i></i><i></i></span>
+              </div>
+              <span class="vts-label"></span>
+            </article>
+            <article class="vts-card" role="listitem">
+              <span class="vts-aura" aria-hidden="true"></span>
+              <div class="vts-card-top">
+                <span class="vts-dots"><i></i><i></i><i></i></span><span class="vts-index">04</span>
+              </div>
+              <div class="vts-preview">
+                <span class="vts-panel"></span><span class="vts-stack"><i></i><i></i><i></i></span>
+              </div>
+              <span class="vts-label"></span>
+            </article>
+            <article class="vts-card" role="listitem">
+              <span class="vts-aura" aria-hidden="true"></span>
+              <div class="vts-card-top">
+                <span class="vts-dots"><i></i><i></i><i></i></span><span class="vts-index">05</span>
+              </div>
+              <div class="vts-preview">
+                <span class="vts-panel"></span><span class="vts-stack"><i></i><i></i><i></i></span>
+              </div>
+              <span class="vts-label"></span>
+            </article>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var clip = root.querySelector(".vts-clip");
+            var rail = root.querySelector(".vts-rail");
+            var cards = Array.from(root.querySelectorAll(".vts-card"));
+            var labels = Array.from(root.querySelectorAll(".vts-label"));
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var heroValue = Number(vars.hero_index);
+            var heroIndex = Number.isFinite(heroValue)
+              ? Math.max(0, Math.min(4, Math.round(heroValue)))
+              : 2;
+            var prefix = vars.card_label_prefix == null ? "Shot" : String(vars.card_label_prefix);
+            var accentName =
+              vars.accent === "blue" || vars.accent === "violet" ? vars.accent : "green";
+            var themeStyles = getComputedStyle(root);
+            var palettes = {
+              green: {
+                accent: themeStyles.getPropertyValue("--brand").trim() || "#34d399",
+                dark: themeStyles.getPropertyValue("--brand").trim() || "#08795b",
+                glow: "rgba(52, 211, 153, 0.4)",
+              },
+              blue: {
+                accent: themeStyles.getPropertyValue("--accent").trim() || "#60a5fa",
+                dark: themeStyles.getPropertyValue("--accent").trim() || "#2563a8",
+                glow: "rgba(96, 165, 250, 0.42)",
+              },
+              violet: {
+                accent: themeStyles.getPropertyValue("--accent-2").trim() || "#a78bfa",
+                dark: themeStyles.getPropertyValue("--accent-2").trim() || "#6742b8",
+                glow: "rgba(167, 139, 250, 0.42)",
+              },
+            };
+            var palette = palettes[accentName];
+
+            root.style.setProperty("--vts-hero-index", heroIndex);
+            root.style.setProperty("--vts-accent", palette.accent);
+            root.style.setProperty("--vts-accent-dark", palette.dark);
+
+            labels.forEach(function (label, index) {
+              label.textContent = (prefix.length > 0 ? prefix + " " : "") + String(index + 1);
+            });
+
+            var heroCard = cards[heroIndex];
+            var heroAura = heroCard.querySelector(".vts-aura");
+            var nonHeroCards = cards.filter(function (_, index) {
+              return index !== heroIndex;
+            });
+            heroCard.setAttribute("aria-current", "true");
+
+            var IN_BASE = 1.4;
+            var THROW_BASE = 0.78;
+            var SNAP_BASE = 0.62;
+            var durationValue = parseFloat(root.dataset.duration || "4");
+            var duration = Number.isFinite(durationValue) ? Math.max(0.001, durationValue) : 4;
+            var IN = Math.min(IN_BASE, duration);
+            var HOLD = Math.max(0, duration - IN);
+            var motionScale = IN / IN_BASE;
+            var THROW = THROW_BASE * motionScale;
+            var SNAP = SNAP_BASE * motionScale;
+            var SNAP_AT = THROW;
+
+            gsap.set(clip, { opacity: 0 });
+            gsap.set(rail, {
+              "--vts-throw-x": 140,
+              "--vts-throw-y": 7,
+              "--vts-tilt": 0.8,
+            });
+            gsap.set(cards, { opacity: 0.82, scale: 0.97 });
+            gsap.set(heroAura, { opacity: 0, scale: 0.98 });
+
+            var tl = gsap.timeline({ paused: true });
+
+            tl.to(clip, { opacity: 1, duration: Math.min(0.2, IN), ease: "power2.out" }, 0);
+
+            // Fast travel loses most of its velocity under the whip-out ease.
+            tl.to(
+              rail,
+              {
+                "--vts-throw-x": 16,
+                "--vts-throw-y": -1.4,
+                "--vts-tilt": -0.22,
+                duration: THROW,
+                ease: "power4.out",
+              },
+              0,
+            );
+
+            // The final back curve crosses zero, then returns to the exact center.
+            tl.to(
+              rail,
+              {
+                "--vts-throw-x": 0,
+                "--vts-throw-y": 0,
+                "--vts-tilt": 0,
+                duration: SNAP,
+                ease: "back.out(1.7)",
+              },
+              SNAP_AT,
+            );
+            tl.to(
+              nonHeroCards,
+              { opacity: 0.62, scale: 0.95, duration: SNAP, ease: "power2.out" },
+              SNAP_AT,
+            );
+            tl.to(
+              heroCard,
+              {
+                opacity: 1,
+                scale: 1.04,
+                borderColor: palette.accent,
+                boxShadow: "0 4.2cqh 10cqh " + palette.glow,
+                duration: SNAP,
+                ease: "back.out(1.7)",
+              },
+              SNAP_AT,
+            );
+            tl.to(
+              heroAura,
+              { opacity: 0.58, scale: 1, duration: SNAP * 0.7, ease: "power2.out" },
+              SNAP_AT + SNAP * 0.3,
+            );
+
+            if (HOLD > 0.4) {
+              var breathHalf = Math.min(0.65, HOLD / 2);
+              var breathRepeat = Math.max(0, Math.floor(HOLD / breathHalf) - 1);
+              tl.to(
+                heroAura,
+                {
+                  opacity: 0.78,
+                  scale: 1.015,
+                  duration: breathHalf,
+                  ease: "sine.inOut",
+                  yoyo: true,
+                  repeat: breathRepeat,
+                },
+                IN,
+              );
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["velocity-throw-snap"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add velocity-throw-snap" />
+
+That writes one file: `compositions/components/velocity-throw-snap.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/velocity-throw-snap.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `feature-tour` `rail` `velocity` `throw` `snap` `physics`.
+
+## 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/components/vignette.mdx b/docs/catalog/components/vignette.mdx
index 11484a9e78..e2bcc0ecc9 100644
--- a/docs/catalog/components/vignette.mdx
+++ b/docs/catalog/components/vignette.mdx
@@ -3,23 +3,79 @@ title: "Vignette"
 description: "Cinematic radial vignette overlay using a pure-CSS gradient — darkens the edges to pull focus toward the center"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/vignette.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/vignette.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/components/vignette.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Vignette preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add vignette
-```
+<InstallCommand command="npx hyperframes add vignette" />
 
 That writes one file: `compositions/components/vignette.html`.
 
-## Paste it into your composition
+## Source
+
+<Accordion title={`vignette.html`}>
+
+```html
+<!--
+  Vignette — cinematic radial darkening overlay.
+
+  Usage: paste this snippet inside your composition's positioned stage.
+  The overlay covers the full viewport with pointer-events: none so it
+  sits on top of all content without blocking interaction.
+
+  Customize:
+  - --vignette-color: edge color and alpha (default rgba(0, 0, 0, 0.7))
+  - --vignette-size: where the transparent center ends (default 45%)
+  - --vignette-edge: where the color reaches its final stop (default 100%)
+  - --vignette-shape: ellipse | circle (default ellipse)
+  - z-index: defaults to 90 so grain-overlay (100) reads on top
+-->
+
+<div
+  id="hf-vignette"
+  style="
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 90;
+  "
+></div>
+
+<style>
+  #hf-vignette {
+    background: radial-gradient(
+      var(--vignette-shape, ellipse) at center,
+      transparent var(--vignette-size, 45%),
+      var(--vignette-color, rgba(0, 0, 0, 0.7)) var(--vignette-edge, 100%)
+    );
+  }
+</style>
+
+<!--
+  Timeline integration example (add to your composition's GSAP timeline):
+
+  // Fade the vignette in over the first second
+  tl.fromTo("#hf-vignette",
+    { "--vignette-color": "rgba(0, 0, 0, 0)" },
+    { "--vignette-color": "rgba(0, 0, 0, 0.7)", duration: 1, ease: "power2.out" },
+    0,
+  );
+
+  // Or breathe the size in and out (works with any easing)
+  tl.to("#hf-vignette", { "--vignette-size": "35%", duration: 1, ease: "sine.inOut" }, 2);
+-->
+```
+
+</Accordion>
 
-Open `compositions/components/vignette.html` and copy what is inside into your own composition.
-The file opens with a comment header that walks you through it.
+## Usage
 
-A component has no size or duration of its own. It takes both from the composition
-you paste it into.
+Open `compositions/components/vignette.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
 
 {/* hf:generated-footer */}
 
diff --git a/docs/catalog/components/vox-annotate.mdx b/docs/catalog/components/vox-annotate.mdx
new file mode 100644
index 0000000000..e601d25464
--- /dev/null
+++ b/docs/catalog/components/vox-annotate.mdx
@@ -0,0 +1,519 @@
+---
+title: "Vox Annotate"
+description: "The Vox-style annotate gesture: a keyword in a held sentence gets a hand-drawn marker while a thin connector draws up to a mono callout label, all as one choreographed beat on the cue."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/vox-annotate.html"
+  compositionId="vox-annotate"
+  compositionSrc="compositions/components/vox-annotate.html"
+  variables={[{"id":"text","type":"string","role":"content","label":"Text","description":"Full line of display text.","default":"Ship the story, not the spec"},{"id":"keyword","type":"string","role":"content","label":"Keyword","description":"First case-insensitive substring match in text receives the marker and annotation. Empty or unmatched draws nothing.","default":"story"},{"id":"note","type":"string","role":"content","label":"Note","description":"Mono callout label at the end of the connector. Empty draws the marker only.","default":"the annotate beat"},{"id":"style","type":"enum","role":"style","label":"Marker style","description":"Shape of the hand-drawn marker stroke.","default":"highlight","options":[{"value":"highlight","label":"Highlight"},{"value":"circle","label":"Circle"},{"value":"underline","label":"Underline"},{"value":"scribble","label":"Scribble"}]},{"id":"draw_at","type":"number","role":"timing","label":"Draw at","description":"Second (from mount start) the annotate gesture starts. Clamped so the gesture completes before any exit.","default":0.9,"min":0,"step":0.1,"unit":"s"},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Annotation ink color from the contract token map.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Optional departure. Default none: the lockup holds until the frame cuts.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
+>
+
+```html vox-annotate.html
+<!doctype html>
+<!--
+  vox-annotate: HyperFrames video primitive (text effects / annotation)
+
+  The Vox-style annotate gesture: a keyword inside a held sentence gets a
+  hand-drawn marker WHILE a thin connector draws from the marker up to a
+  mono callout label that fades in at the connector's end. Marker, connector,
+  and label are ONE choreographed beat on the cue, not three events.
+
+  Absorbs marker-highlight: the four marker stroke styles and the
+  getTotalLength dash law are inherited from that donor verbatim (never the
+  pathLength attribute, never non-scaling-stroke on a dashed path; dash
+  geometry is set from the measured length and revealed by an explicit
+  fromTo on strokeDashoffset, so reverse seeks never leave stale paint).
+
+  Variables:
+    text (string): the full line.
+    keyword (string): first case-insensitive substring match inside text
+      gets the marker and the annotation. Empty or unmatched renders the
+      line with no annotation. Keep it a word or short phrase; it stays on
+      one line.
+    note (string): the mono callout label at the end of the connector.
+      Empty draws the marker only (no connector, no label).
+    style (highlight | circle | underline | scribble): marker shape.
+    draw_at (seconds): cue for the gesture, relative to mount start.
+      Clamped so the whole gesture completes before any exit begins.
+    accent (green | blue | violet): annotation ink via the contract token map.
+    exit (none | fade | up, default none): frame roots own transitions;
+      holds end films.
+
+  Envelope, fixed IN and OUT with elastic HOLD only (never time-scaled):
+    IN_BASE      = 0.55s  text rises into place
+    GESTURE_BASE = 0.96s  anchored at draw_at: marker 0.60s, connector
+                          0.45s from 0.36s, label fade-up 0.30s from 0.66s,
+                          settle pop on the keyword as the ink lands
+    HOLD         = max(0, D - phases), completely still
+    OUT_BASE     = 0s for exit none, otherwise 0.45s
+    If D is shorter than the fixed phases, they compress together.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, has no data-width or
+  data-height, and registers one paused timeline under the literal
+  vox-annotate key.
+-->
+<html
+  lang="en"
+  data-composition-id="vox-annotate"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "text", "type": "string", "role": "content", "label": "Text", "description": "Full line of display text.", "default": "Ship the story, not the spec" },
+    { "id": "keyword", "type": "string", "role": "content", "label": "Keyword", "description": "First case-insensitive substring match in text receives the marker and annotation. Empty or unmatched draws nothing.", "default": "story" },
+    { "id": "note", "type": "string", "role": "content", "label": "Note", "description": "Mono callout label at the end of the connector. Empty draws the marker only.", "default": "the annotate beat" },
+    { "id": "style", "type": "enum", "role": "style", "label": "Marker style", "description": "Shape of the hand-drawn marker stroke.", "default": "highlight", "options": [{ "value": "highlight", "label": "Highlight" }, { "value": "circle", "label": "Circle" }, { "value": "underline", "label": "Underline" }, { "value": "scribble", "label": "Scribble" }] },
+    { "id": "draw_at", "type": "number", "role": "timing", "label": "Draw at", "description": "Second (from mount start) the annotate gesture starts. Clamped so the gesture completes before any exit.", "default": 0.9, "min": 0, "step": 0.1, "unit": "s" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Annotation ink color from the contract token map.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the lockup holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Vox Annotate</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="vox-annotate" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            background: var(--bg, #0b0c0e);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .va-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+          }
+
+          .va-stage {
+            max-width: 84cqw;
+            text-align: center;
+            will-change: transform, opacity;
+          }
+
+          .va-text {
+            margin: 0;
+            font-size: var(--va-font-size, min(8cqw, 15cqh));
+            font-weight: 600;
+            line-height: 1.16;
+            letter-spacing: -0.03em;
+          }
+
+          .va-em {
+            position: relative;
+            display: inline-block;
+            white-space: nowrap;
+            will-change: transform;
+          }
+
+          .va-em-text {
+            position: relative;
+            z-index: 1;
+          }
+
+          .va-mark {
+            position: absolute;
+            z-index: 0;
+            overflow: visible;
+          }
+
+          /* Per-style marker box around the keyword. Explicit width/height
+             (svg is a replaced element: inset-stretching would fall back to
+             its intrinsic viewBox ratio); then preserveAspectRatio="none"
+             stretches the authored path (and its stroke) into the box, which
+             is exactly the marker-nib distortion we want on a dashed path. */
+          .va-em[data-marker-style="highlight"] .va-mark {
+            left: -3%;
+            top: 14%;
+            width: 106%;
+            height: 76%;
+          }
+
+          .va-em[data-marker-style="underline"] .va-mark {
+            left: -2%;
+            bottom: -14%;
+            width: 105%;
+            height: 22%;
+            z-index: 2;
+          }
+
+          .va-em[data-marker-style="circle"] .va-mark {
+            left: -13%;
+            top: -26%;
+            width: 126%;
+            height: 152%;
+            z-index: 2;
+          }
+
+          .va-em[data-marker-style="scribble"] .va-mark {
+            left: -2%;
+            top: 12%;
+            width: 104%;
+            height: 76%;
+            z-index: 2;
+          }
+
+          /* Annotation rig: connector + callout live in one box anchored
+             above the keyword, so the whole gesture shares the pop. */
+          .va-anno {
+            position: absolute;
+            left: 55%;
+            bottom: calc(100% + 1.6cqh);
+            width: 26cqw;
+            height: 19cqh;
+            z-index: 3;
+          }
+
+          .va-conn {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+            overflow: visible;
+          }
+
+          .va-note {
+            position: absolute;
+            top: -1.2cqh;
+            right: -2cqw;
+            max-width: 30cqw;
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            font-size: min(2.4cqw, 4.4cqh);
+            font-weight: 500;
+            letter-spacing: 0.05em;
+            line-height: 1.25;
+            text-align: left;
+            white-space: nowrap;
+            will-change: transform, opacity;
+          }
+        </style>
+
+        <div
+          id="vox-annotate-clip"
+          class="va-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="va-stage">
+            <p class="va-text"></p>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            // Literal key: the flattening step strips data-composition-id off
+            // the mounted root, so reading it back would register "null".
+            var compositionId = "vox-annotate";
+            var stage = root.querySelector(".va-stage");
+            var textEl = root.querySelector(".va-text");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var text =
+              vars.text == null
+                ? "Ship the story, not the spec"
+                : String(vars.text).trim().replace(/\s+/g, " ");
+            var keyword =
+              vars.keyword == null ? "story" : String(vars.keyword).trim().replace(/\s+/g, " ");
+            var note =
+              vars.note == null
+                ? "the annotate beat"
+                : String(vars.note).trim().replace(/\s+/g, " ");
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            // Hand-drawn stroke library, inherited from marker-highlight.
+            // Paths are authored in a fixed viewBox and stretched into the
+            // word box; wobble is baked into control points, never randomized.
+            var markerStyles = {
+              highlight: {
+                viewBox: "0 0 100 40",
+                d: "M 3 24 C 22 20.5, 47 25.5, 68 22.5 C 79 21, 90 23, 97 21.5",
+                strokeWidth: 26,
+                opacity: 0.5,
+              },
+              circle: {
+                viewBox: "0 0 100 40",
+                d: "M 22 7 C 58 1, 95 8, 97 20 C 99 31, 74 38, 44 37 C 16 36, 2 29, 3 19 C 4 10, 22 4, 52 4.5",
+                strokeWidth: 2.8,
+                opacity: 1,
+              },
+              underline: {
+                viewBox: "0 0 100 12",
+                d: "M 2 7 C 20 4.5, 46 8.5, 66 6 C 80 4.5, 92 7.5, 98 5.5",
+                strokeWidth: 4.5,
+                opacity: 1,
+              },
+              scribble: {
+                viewBox: "0 0 100 40",
+                d: "M 6 13 C 34 9.5, 66 11, 94 9 C 60 15, 26 16, 7 20 C 36 18, 68 21, 93 18 C 62 25, 28 27, 8 29",
+                strokeWidth: 5,
+                opacity: 0.65,
+              },
+            };
+            var styleName = Object.prototype.hasOwnProperty.call(markerStyles, vars.style)
+              ? vars.style
+              : "highlight";
+            var marker = markerStyles[styleName];
+            var svgNS = "http://www.w3.org/2000/svg";
+
+            // Split text around the first case-insensitive keyword match.
+            // textContent nodes only, never innerHTML.
+            var matchIndex =
+              keyword.length > 0 ? text.toLowerCase().indexOf(keyword.toLowerCase()) : -1;
+            var emEl = null;
+            var markPath = null;
+            var connPath = null;
+            var noteEl = null;
+            if (matchIndex >= 0) {
+              var before = text.slice(0, matchIndex);
+              var matched = text.slice(matchIndex, matchIndex + keyword.length);
+              var after = text.slice(matchIndex + keyword.length);
+              if (before) textEl.appendChild(document.createTextNode(before));
+
+              emEl = document.createElement("span");
+              emEl.className = "va-em";
+              emEl.setAttribute("data-marker-style", styleName);
+
+              var markSvg = document.createElementNS(svgNS, "svg");
+              markSvg.setAttribute("class", "va-mark");
+              markSvg.setAttribute("viewBox", marker.viewBox);
+              markSvg.setAttribute("preserveAspectRatio", "none");
+              markSvg.setAttribute("aria-hidden", "true");
+              markPath = document.createElementNS(svgNS, "path");
+              markPath.setAttribute("d", marker.d);
+              markPath.setAttribute("fill", "none");
+              markPath.setAttribute("stroke-width", String(marker.strokeWidth));
+              markPath.setAttribute("stroke-linecap", "round");
+              markPath.setAttribute("stroke-linejoin", "round");
+              // style.stroke, not the presentation attribute: var() only
+              // resolves as a CSS value.
+              markPath.style.stroke = accentColors[accent];
+              markSvg.appendChild(markPath);
+
+              var emText = document.createElement("span");
+              emText.className = "va-em-text";
+              emText.textContent = matched;
+
+              emEl.appendChild(markSvg);
+              emEl.appendChild(emText);
+
+              // Annotation rig: connector path curving up from the marker to
+              // the callout. The viewBox aspect roughly matches the anno box
+              // at 16:9 so the hand-drawn stroke stays near-even.
+              if (note.length > 0) {
+                var anno = document.createElement("span");
+                anno.className = "va-anno";
+                anno.setAttribute("aria-hidden", "true");
+
+                var connSvg = document.createElementNS(svgNS, "svg");
+                connSvg.setAttribute("class", "va-conn");
+                connSvg.setAttribute("viewBox", "0 0 240 100");
+                connSvg.setAttribute("preserveAspectRatio", "none");
+                connPath = document.createElementNS(svgNS, "path");
+                connPath.setAttribute(
+                  "d",
+                  "M 10 94 C 52 82, 96 52, 148 32 C 176 21, 200 16, 218 14",
+                );
+                connPath.setAttribute("fill", "none");
+                connPath.setAttribute("stroke-width", "2.6");
+                connPath.setAttribute("stroke-linecap", "round");
+                connPath.style.stroke = accentColors[accent];
+                connSvg.appendChild(connPath);
+
+                noteEl = document.createElement("span");
+                noteEl.className = "va-note";
+                noteEl.textContent = note;
+                noteEl.style.color = accentColors[accent];
+
+                anno.appendChild(connSvg);
+                anno.appendChild(noteEl);
+                emEl.appendChild(anno);
+              }
+
+              textEl.appendChild(emEl);
+              if (after) textEl.appendChild(document.createTextNode(after));
+            } else {
+              textEl.textContent = text;
+            }
+            textEl.setAttribute("aria-label", text);
+
+            // Deterministic character-count fit; the line may wrap, the
+            // keyword never wraps internally.
+            var characters = Math.max(1, Array.from(text).length);
+            var fitted = Math.max(4.2, Math.min(9, 175 / characters));
+            root.style.setProperty("--va-font-size", "min(" + fitted.toFixed(3) + "cqw, 15cqh)");
+
+            // RETIME RANGE: fixed phases; HOLD is the only elastic span.
+            var IN_BASE = 0.55;
+            var DRAW_BASE = 0.6;
+            var CONN_BASE = 0.45;
+            var NOTE_BASE = 0.3;
+            var POP_BASE = 0.32;
+            var GESTURE_BASE = 0.96; // marker + connector + label span
+            var OUT_BASE = exit === "none" ? 0 : 0.45;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var totalBase = IN_BASE + GESTURE_BASE + OUT_BASE;
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var DRAW = DRAW_BASE * scale;
+            var CONN = CONN_BASE * scale;
+            var NOTE = NOTE_BASE * scale;
+            var POP = POP_BASE * scale;
+            var GESTURE = GESTURE_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var OUT_START = duration - OUT;
+
+            var drawAtRaw = Number(vars.draw_at);
+            var drawAt = Number.isFinite(drawAtRaw) ? Math.max(0, drawAtRaw) : 0.9;
+            // The whole gesture always lands before the exit.
+            drawAt = Math.min(drawAt, Math.max(0, OUT_START - GESTURE));
+
+            gsap.set(stage, { opacity: 0, y: "6cqh" });
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: the line rises into place.
+            tl.fromTo(
+              stage,
+              { opacity: 0, y: "6cqh" },
+              { opacity: 1, y: "0cqh", duration: IN, ease: "power3.out" },
+              0,
+            );
+
+            // GESTURE: marker, connector, and label as one beat on the cue.
+            // Dash reveals from measured lengths; both endpoints explicit so
+            // any seek in either direction is correct without playing through.
+            if (markPath) {
+              var markLength = markPath.getTotalLength();
+              markPath.style.strokeDasharray = String(markLength);
+              // Hidden until the cue: at dashoffset == length the round cap
+              // still paints a dot at the path start, so the ink is opacity 0
+              // until the exact frame the draw begins.
+              gsap.set(markPath, { strokeDashoffset: markLength, opacity: 0 });
+              tl.set(markPath, { opacity: marker.opacity }, drawAt);
+              tl.fromTo(
+                markPath,
+                { strokeDashoffset: markLength },
+                { strokeDashoffset: 0, duration: DRAW, ease: "power2.inOut" },
+                drawAt,
+              );
+              // Settle pop on the keyword as the ink lands. The annotation
+              // rig rides the same span, so the whole gesture breathes once.
+              tl.fromTo(
+                emEl,
+                { scale: 1 },
+                {
+                  scale: 1.045,
+                  duration: POP / 2,
+                  ease: "power1.out",
+                  yoyo: true,
+                  repeat: 1,
+                },
+                drawAt + DRAW * 0.7,
+              );
+            }
+
+            if (connPath) {
+              var connAt = drawAt + DRAW * 0.6;
+              var connLength = connPath.getTotalLength();
+              connPath.style.strokeDasharray = String(connLength);
+              gsap.set(connPath, { strokeDashoffset: connLength, opacity: 0 });
+              tl.set(connPath, { opacity: 0.9 }, connAt);
+              tl.fromTo(
+                connPath,
+                { strokeDashoffset: connLength },
+                { strokeDashoffset: 0, duration: CONN, ease: "power2.out" },
+                connAt,
+              );
+            }
+
+            if (noteEl) {
+              var noteAt = drawAt + DRAW * 0.6 + CONN * 0.65;
+              tl.fromTo(
+                noteEl,
+                { opacity: 0, y: "1.6cqh" },
+                { opacity: 1, y: "0cqh", duration: NOTE, ease: "power2.out" },
+                noteAt,
+              );
+            }
+
+            // HOLD: completely still.
+
+            // OUT: optional departure; exit none holds until the frame cuts.
+            if (exit === "fade") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "up") {
+              tl.to(stage, { opacity: 0, y: "-7cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add vox-annotate" />
+
+That writes one file: `compositions/components/vox-annotate.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/vox-annotate.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `typography` `annotation` `marker` `deterministic`.
+
+## 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/components/whip-pan-cut.mdx b/docs/catalog/components/whip-pan-cut.mdx
new file mode 100644
index 0000000000..cc930147f2
--- /dev/null
+++ b/docs/catalog/components/whip-pan-cut.mdx
@@ -0,0 +1,529 @@
+---
+title: "Whip Pan Cut"
+description: "A full-frame whip pan: scene A whips off laterally with capped directional motion blur while scene B enters in the same direction at matched velocity, on a speed-ramp profile with a decelerating catch. Both scenes ride one strip, so seam velocity is exact by construction. Callers fill the named before/after slot panels; token-styled defaults render when a slot is left empty."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/whip-pan-cut.html"
+  compositionId="whip-pan-cut"
+  compositionSrc="compositions/components/whip-pan-cut.html"
+  variables={[{"id":"direction","type":"enum","role":"motion","label":"Direction","description":"Shared travel direction for the outgoing and incoming scenes.","default":"left","options":[{"value":"left","label":"Left"},{"value":"right","label":"Right"}]},{"id":"whip_at","type":"number","role":"timing","label":"Whip start","description":"Seconds after mount start when the whip begins.","default":0.25,"min":0,"max":8,"step":0.05,"unit":"s"},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Seam hairline and default after art tint.","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"timing","label":"Exit","description":"Optional departure of the landed scene. Default none: it rests until the frame cuts.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
+>
+
+```html whip-pan-cut.html
+<!doctype html>
+<!--
+  whip-pan-cut: HyperFrames video primitive (transitions / bridge)
+
+  Concept: the louder sibling of cut-the-curve. Scene A whips off laterally
+  with directional motion blur while scene B enters in the same direction at
+  matched velocity, on a speed-ramp profile (accelerate, fast middle,
+  decelerating catch). Two full-bleed content slots (the before-after-wipe
+  convention) with token-styled defaults.
+
+  Wave K, unit K6. Velocity matching is structural: both scenes ride ONE
+  strip (B docked one frame-width beyond A along the travel direction) and
+  the strip runs a single power3.inOut tween, so the seam velocity is exact
+  by construction and the profile is fast-middle with a decelerating catch.
+
+  Motion blur follows the motion-blur-streak recipe: a directional SVG
+  feGaussianBlur (stdDeviation "X 0", horizontal axis only) applied to the
+  mover (the strip carries both transform and filter; nothing else is
+  filtered, and there is no 3D on the strip for the filter to flatten). The
+  blur envelope is CAPPED at 16px and peaks exactly at mid-whip (peak
+  velocity), resolving to 0 at both ends: power3.in up over the first half,
+  power3.out down over the second, mirroring the strip's inOut velocity. The
+  proxy value is re-written on every seek via onUpdate and seeded at setup so
+  frame 0 renders sharp.
+
+  A hairline accent seam rides the boundary between the two scenes; it is
+  visible only while the whip runs, so it reads as the frame edge screaming
+  past rather than persistent chrome.
+
+  Slots (see README.md for a worked example):
+    - [data-slot="before"]: scene A, on stage at mount. Replace the children
+      of this element in your installed copy. Default: a muted token
+      wireframe.
+    - [data-slot="after"]:  scene B, whipping in. Same mechanism. Default: a
+      brand-tinted version of the wireframe.
+    Direct img/video children of a slot are sized to cover the panel.
+
+  Variables (declared in data-composition-variables below):
+    - direction (left | right, default left): shared travel direction for
+      both scenes.
+    - whip_at (number, seconds, default 0.25): when the whip starts, relative
+      to mount start. Clamped so the whip always completes inside the clip.
+    - accent (green | blue | violet, default green): seam hairline and the
+      default after art tint. green maps to --brand, blue to --accent,
+      violet to --accent-2.
+    - exit (none | fade | up, default none): optional departure of the landed
+      scene B. Enabling it reserves a short tail window (min(0.35s, 25% of
+      D)) after B lands.
+
+  Envelope (transition profile, cut-the-curve precedent; the catch may still
+  be decelerating when a short clip window ends):
+    LEAD  = whip_at (scene A rests, readable)
+    WHIP  = 0.55s, power3.inOut, one frame-width of travel
+    REST  = elastic remainder, dead still on B
+    EXIT  = 0 when exit is none, else min(0.35s, 25% of D)
+    If D < LEAD + WHIP + EXIT, LEAD and WHIP scale down together.
+
+  Sync point: whip-cut at LEAD + WHIP/2 (peak velocity, 0.53s at defaults).
+
+  Sound cue: dispatches a bubbling `hf:sfx` CustomEvent with id "whip-cut"
+  at peak velocity. This primitive never plays audio.
+
+  Interruptible springs law (L1): the whip is a single owned tween on one
+  strip; a host redirect retargets the same transform channel and GSAP's
+  default overwrite preserves current velocity-position state at the
+  interruption frame (no snap-to-zero).
+
+  Mount contract: MOUNTABLE SUB-COMPOSITION. The runtime clones only
+  <template> contents; #root fills the host box (inset:0, container-type:
+  size), has no data-width/data-height, and registers one paused timeline
+  under the literal "whip-pan-cut" key (mount flattening strips
+  data-composition-id from the live root). Variables come from
+  window.__hyperframes.getVariables().
+-->
+<html
+  lang="en"
+  data-composition-id="whip-pan-cut"
+  data-composition-duration="1.2"
+  data-composition-variables='[
+    { "id": "direction", "type": "enum", "role": "motion", "label": "Direction", "description": "Shared travel direction for the outgoing and incoming scenes.", "default": "left", "options": [{ "value": "left", "label": "Left" }, { "value": "right", "label": "Right" }] },
+    { "id": "whip_at", "type": "number", "role": "timing", "label": "Whip start", "description": "Seconds after mount start when the whip begins.", "default": 0.25, "min": 0, "max": 8, "step": 0.05, "unit": "s" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Seam hairline and default after art tint.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure of the landed scene. Default none: it rests until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Whip Pan Cut</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="whip-pan-cut" data-duration="1.2" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          /* Root fills the host-owned box. Internal measurements use cqw/cqh
+             and every painted color comes from a contract token. */
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            background: var(--bg, #07111f);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+          }
+
+          .wpc-clip,
+          .wpc-strip,
+          .wpc-panel,
+          .wpc-slot {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+          }
+
+          .wpc-clip {
+            overflow: hidden;
+          }
+
+          /* The strip is the ONE mover: it carries both scenes, the transform
+             tween, and the directional blur filter. No 3D lives on it, so the
+             filter has nothing to flatten. */
+          .wpc-strip {
+            filter: url("#wpc-blur");
+            will-change: transform, filter;
+          }
+
+          .wpc-panel {
+            overflow: hidden;
+          }
+
+          /* Scene B docks one frame-width beyond scene A along the travel
+             direction, so the pan crosses one continuous surface. */
+          #root[data-direction="left"] .wpc-after {
+            left: 100%;
+          }
+
+          #root[data-direction="right"] .wpc-after {
+            left: -100%;
+          }
+
+          /* The seam hairline rides the boundary between the two scenes and
+             is timeline-owned: visible only while the whip runs. */
+          .wpc-seam {
+            position: absolute;
+            z-index: 3;
+            top: 0;
+            bottom: 0;
+            width: 0.35cqw;
+            transform: translateX(-50%);
+            background: var(--wpc-accent, #22c55e);
+            pointer-events: none;
+          }
+
+          #root[data-direction="left"] .wpc-seam {
+            left: 100%;
+          }
+
+          #root[data-direction="right"] .wpc-seam {
+            left: 0;
+          }
+
+          /* Caller-supplied media covers its panel edge to edge. */
+          .wpc-slot > img,
+          .wpc-slot > video {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+          }
+
+          /* Token-styled default slot content: a wireframe card that reads
+             muted on the before layer and brand-tinted on the after layer.
+             Callers replacing slot children never see any of this. */
+          .wpc-default {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+          }
+
+          .wpc-before .wpc-default {
+            background:
+              linear-gradient(
+                  color-mix(in srgb, var(--border, #334155) 34%, transparent) 0.12cqw,
+                  transparent 0.12cqw
+                )
+                0 0 / 5cqw 5cqw,
+              linear-gradient(
+                  90deg,
+                  color-mix(in srgb, var(--border, #334155) 34%, transparent) 0.12cqw,
+                  transparent 0.12cqw
+                )
+                0 0 / 5cqw 5cqw,
+              var(--surface, #172033);
+          }
+
+          .wpc-after .wpc-default {
+            background: linear-gradient(
+              135deg,
+              color-mix(in srgb, var(--brand, #22c55e) 32%, var(--surface, #172033)) 0%,
+              var(--surface, #172033) 58%,
+              color-mix(in srgb, var(--wpc-accent, #22c55e) 22%, var(--surface, #172033)) 100%
+            );
+          }
+
+          .wpc-card {
+            width: 56cqw;
+            height: 56cqh;
+            padding: var(--space-3, 4cqh) var(--space-3, 4cqw);
+            border: 0.16cqw solid var(--border, #334155);
+            border-radius: var(--radius, 2.4cqmin);
+            background: color-mix(in srgb, var(--surface, #172033) 88%, var(--bg, #07111f));
+            box-shadow: 0 2cqh 5cqw color-mix(in srgb, var(--bg, #07111f) 45%, transparent);
+          }
+
+          .wpc-after .wpc-card {
+            border-color: color-mix(
+              in srgb,
+              var(--wpc-accent, #22c55e) 52%,
+              var(--border, #334155)
+            );
+            background: color-mix(in srgb, var(--surface, #172033) 86%, var(--brand, #22c55e));
+          }
+
+          .wpc-bar {
+            width: 34%;
+            height: 4.4cqh;
+            margin-bottom: var(--space-3, 4cqh);
+            border-radius: 1.2cqh;
+            background: var(--muted, #94a3b8);
+            opacity: 0.5;
+          }
+
+          .wpc-after .wpc-bar {
+            background: var(--wpc-accent, #22c55e);
+            opacity: 0.92;
+          }
+
+          .wpc-line {
+            height: 2.4cqh;
+            margin-bottom: var(--space-2, 2.6cqh);
+            border-radius: 1.2cqh;
+            background: var(--muted, #94a3b8);
+            opacity: 0.4;
+          }
+
+          .wpc-line:nth-of-type(2) {
+            width: 92%;
+          }
+
+          .wpc-line:nth-of-type(3) {
+            width: 68%;
+          }
+
+          .wpc-line:nth-of-type(4) {
+            width: 44%;
+          }
+
+          .wpc-after .wpc-line {
+            background: color-mix(in srgb, var(--brand, #22c55e) 70%, var(--fg, #f8fafc));
+            opacity: 0.75;
+          }
+        </style>
+
+        <div
+          id="whip-pan-cut-clip"
+          class="wpc-clip clip"
+          data-start="0"
+          data-duration="1.2"
+          data-track-index="0"
+        >
+          <svg width="0" height="0" aria-hidden="true" style="position: absolute">
+            <defs>
+              <filter id="wpc-blur" x="-50%" y="-20%" width="200%" height="140%">
+                <feGaussianBlur class="wpc-blur-node" in="SourceGraphic" stdDeviation="0 0" />
+              </filter>
+            </defs>
+          </svg>
+
+          <div class="wpc-strip">
+            <section class="wpc-panel wpc-before" aria-label="Outgoing scene">
+              <div class="wpc-slot" data-slot="before">
+                <!-- SLOT "before": replace the children of this element with
+                     your own content (img, video, or HTML). -->
+                <div class="wpc-default" aria-hidden="true">
+                  <div class="wpc-card">
+                    <div class="wpc-bar"></div>
+                    <div class="wpc-line"></div>
+                    <div class="wpc-line"></div>
+                    <div class="wpc-line"></div>
+                  </div>
+                </div>
+              </div>
+            </section>
+
+            <section class="wpc-panel wpc-after" aria-label="Incoming scene">
+              <div class="wpc-slot" data-slot="after">
+                <!-- SLOT "after": replace the children of this element with
+                     your own content (img, video, or HTML). -->
+                <div class="wpc-default" aria-hidden="true">
+                  <div class="wpc-card">
+                    <div class="wpc-bar"></div>
+                    <div class="wpc-line"></div>
+                    <div class="wpc-line"></div>
+                    <div class="wpc-line"></div>
+                  </div>
+                </div>
+              </div>
+            </section>
+
+            <div class="wpc-seam" aria-hidden="true"></div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            // Literal id: mount flattening strips data-composition-id from the
+            // live root before this timeline registers.
+            var compositionId = "whip-pan-cut";
+            var strip = root.querySelector(".wpc-strip");
+            var seam = root.querySelector(".wpc-seam");
+            var blurNode = root.querySelector(".wpc-blur-node");
+
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var direction = vars.direction === "right" ? "right" : "left";
+            var rawWhipAt = vars.whip_at == null ? 0.25 : Number(vars.whip_at);
+            var whipAt = Number.isFinite(rawWhipAt) ? Math.max(0, Math.min(8, rawWhipAt)) : 0.25;
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #22c55e)",
+              blue: "var(--accent, #38bdf8)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            // The bundler mirrors composition variables as scoped CSS custom
+            // props, so this unit's own accent variable can shadow the
+            // contract --accent token inside the subtree ("blue" is a valid
+            // CSS color and would render pure blue). When the shadow is
+            // present, fall back to the literal contract value.
+            var computedAccent = getComputedStyle(root).getPropertyValue("--accent").trim();
+            if (
+              computedAccent === "green" ||
+              computedAccent === "blue" ||
+              computedAccent === "violet"
+            ) {
+              accentColors.blue = "#38bdf8";
+            }
+            // INVARIANT: only none | fade | up reaches the timeline.
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            root.dataset.direction = direction;
+            root.style.setProperty("--wpc-accent", accentColors[accent]);
+
+            // Travel measured in px ONCE at mount (cq units inside tweened
+            // transform values are a seek trap). One frame-width lands scene
+            // B exactly where scene A stood.
+            var travel = root.clientWidth || 1920;
+            var sign = direction === "left" ? -1 : 1;
+
+            // RETIME RANGE: 0.6s to 3s. LEAD and WHIP scale together only when
+            // D is too short. REST absorbs any remainder; this is a transition
+            // profile (cut-the-curve precedent), so a short clip window may
+            // end while the catch is still decelerating. Never timeScale().
+            var WHIP_DURATION_BASE = 0.55;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "1.2"));
+            var EXIT = exit === "none" ? 0 : Math.min(0.35, duration * 0.25);
+            var scale =
+              duration - EXIT < whipAt + WHIP_DURATION_BASE
+                ? (duration - EXIT) / (whipAt + WHIP_DURATION_BASE)
+                : 1;
+            var WHIP_AT = whipAt * scale;
+            var WHIP_DURATION = WHIP_DURATION_BASE * scale;
+            var WHIP_END = WHIP_AT + WHIP_DURATION;
+            var CUT_AT = WHIP_AT + WHIP_DURATION / 2;
+            var OUT_START = duration - EXIT;
+
+            // Blur cap per the motion-blur-streak recipe: peak stdDeviation
+            // stays well under the 30px readability ceiling.
+            var PEAK_BLUR = 16;
+            var blurProxy = { v: 0 };
+            function writeBlur() {
+              blurNode.setAttribute("stdDeviation", blurProxy.v + " 0");
+            }
+            // Seed frame 0 so a seek to t=0 renders sharp, not a stale blur.
+            writeBlur();
+
+            function fireSfx(id, t) {
+              root.dispatchEvent(
+                new CustomEvent("hf:sfx", { detail: { id: id, t: t }, bubbles: true }),
+              );
+            }
+
+            // Explicit both-endpoints state makes tl.seek(0) deterministic.
+            gsap.set(strip, { x: 0, y: 0, opacity: 1 });
+            gsap.set(seam, { autoAlpha: 0 });
+
+            var tl = gsap.timeline({ paused: true });
+
+            // WHIP: one strip, one speed-ramp tween. Both scenes share the
+            // transform, so seam velocity is matched by construction.
+            tl.fromTo(
+              strip,
+              { x: 0 },
+              { x: sign * travel, duration: WHIP_DURATION, ease: "power3.inOut" },
+              WHIP_AT,
+            );
+
+            // Blur envelope: peaks at mid-whip (peak velocity), zero at both
+            // ends. power3.in up / power3.out down mirrors the inOut ramp.
+            tl.to(
+              blurProxy,
+              { v: PEAK_BLUR, duration: WHIP_DURATION / 2, ease: "power3.in", onUpdate: writeBlur },
+              WHIP_AT,
+            );
+            tl.to(
+              blurProxy,
+              { v: 0, duration: WHIP_DURATION / 2, ease: "power3.out", onUpdate: writeBlur },
+              WHIP_AT + WHIP_DURATION / 2,
+            );
+
+            // Seam hairline: alive only while the whip runs.
+            tl.fromTo(
+              seam,
+              { autoAlpha: 0 },
+              {
+                autoAlpha: 1,
+                duration: Math.min(0.1 * scale, WHIP_DURATION),
+                ease: "power1.out",
+                immediateRender: false,
+              },
+              WHIP_AT,
+            );
+            tl.to(
+              seam,
+              { autoAlpha: 0, duration: 0.15 * scale, ease: "power1.in" },
+              Math.max(WHIP_AT, WHIP_END - 0.15 * scale),
+            );
+
+            tl.call(
+              function () {
+                fireSfx("whip-cut", CUT_AT);
+              },
+              [],
+              CUT_AT,
+            );
+
+            // REST: dead still on scene B until the frame cuts.
+
+            // EXIT: only when the exit variable asks for one; exit none holds
+            // the landed scene (frame roots own transitions).
+            if (exit !== "none") {
+              tl.to(strip, { opacity: 0, duration: EXIT, ease: "power2.in" }, OUT_START);
+              if (exit === "up") {
+                tl.to(strip, { y: "-6cqh", duration: EXIT, ease: "power2.in" }, OUT_START);
+              }
+            }
+
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add whip-pan-cut" />
+
+That writes one file: `compositions/components/whip-pan-cut.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/whip-pan-cut.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `transition` `whip-pan` `motion-blur` `velocity-match` `speed-ramp` `bridge` `slots`.
+
+## 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/components/whiteboard-ink.mdx b/docs/catalog/components/whiteboard-ink.mdx
new file mode 100644
index 0000000000..93b91f8c75
--- /dev/null
+++ b/docs/catalog/components/whiteboard-ink.mdx
@@ -0,0 +1,582 @@
+---
+title: "Whiteboard Ink"
+description: "A whiteboard sketch draws one measured stroke at a time while a pen nib follows the active tip. Preset sketches (bulb, flow, rocket) or your own multi-stroke SVG paths via the strokes slot; a path marked data-ink=accent rides the accent token."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/whiteboard-ink.html"
+  compositionId="whiteboard-ink"
+  compositionSrc="compositions/components/whiteboard-ink.html"
+  variables={[{"id":"sketch","type":"enum","role":"content","label":"Sketch","description":"Authored preset sketch to draw. Ignored when the strokes slot holds custom paths.","default":"bulb","options":[{"value":"bulb","label":"Bulb"},{"value":"flow","label":"Flow"},{"value":"rocket","label":"Rocket"}]},{"id":"caption","type":"string","role":"content","label":"Caption","description":"Short line shown after the sketch completes.","default":"Draw the idea"},{"id":"pen","type":"enum","role":"style","label":"Pen","description":"Show or hide the pen nib actor.","default":"show","options":[{"value":"show","label":"Show"},{"value":"hide","label":"Hide"}]},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Color used by strokes marked data-ink=accent (one highlight stroke in each preset).","default":"green","options":[{"value":"green","label":"Green"},{"value":"blue","label":"Blue"},{"value":"violet","label":"Violet"}]},{"id":"exit","type":"enum","role":"style","label":"Exit","description":"How the completed lockup leaves. none holds the final frame.","default":"none","options":[{"value":"none","label":"None"},{"value":"fade","label":"Fade"},{"value":"up","label":"Up"}]}]}
+>
+
+```html whiteboard-ink.html
+<!doctype html>
+<!--
+  whiteboard-ink: HyperFrames video primitive (intros and reveals / ink draw)
+
+  A hand-authored SVG sketch draws one stroke at a time while a pen nib
+  samples the active path tip. The nib follows getPointAtLength during each
+  draw and takes a short lifted hop between strokes.
+
+  Strokes slot: the SVG ships an empty <g data-slot="strokes"> group. Fill it
+  with your own <path> elements (in your installed copy) and those paths
+  become the drawing; the sketch enum is ignored while the slot has paths.
+  Mark one path data-ink="accent" to route it through the accent token map.
+  Nib riding, per-stroke cadence, and the ink law are identical for slot
+  strokes and presets.
+
+  Variables:
+    - sketch (bulb / flow / rocket): authored preset sketch; ignored when the
+      strokes slot holds paths.
+    - caption (string): short line shown after the drawing completes.
+    - pen (show / hide): visibility of the traveling nib actor.
+    - accent (green / blue / violet): one highlight stroke routed through a
+      distinct contract token.
+    - exit (none / fade / up): how the completed lockup leaves. none holds
+      the final frame (frame roots own transitions); fade releases opacity
+      only; up adds the small upward drift.
+
+  Envelope, fixed IN and OUT with elastic HOLD only:
+    IN_BASE  = 3.55s, 3.25s sequential draw phase, then pen exit and caption
+    HOLD     = max(0, D - IN - OUT), dead-calm completed lockup
+    OUT_BASE = 0.45s when exit is fade or up, otherwise 0 (hold to the end)
+    If D is shorter than IN_BASE + OUT_BASE, IN and OUT compress together.
+    The timeline is never time-scaled.
+
+  Ink law: every selected path is measured once with getTotalLength. That
+  measurement owns its dash array, dash offset, cadence weight, and nib
+  sampling. Dashed geometry stays in native SVG user units.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, has no data-width or data-height,
+  and registers one paused timeline under the literal whiteboard-ink key.
+-->
+<html
+  lang="en"
+  data-composition-id="whiteboard-ink"
+  data-composition-duration="5"
+  data-composition-variables='[
+    { "id": "sketch", "type": "enum", "role": "content", "label": "Sketch", "description": "Authored preset sketch to draw. Ignored when the strokes slot holds custom paths.", "default": "bulb", "options": [{ "value": "bulb", "label": "Bulb" }, { "value": "flow", "label": "Flow" }, { "value": "rocket", "label": "Rocket" }] },
+    { "id": "caption", "type": "string", "role": "content", "label": "Caption", "description": "Short line shown after the sketch completes.", "default": "Draw the idea" },
+    { "id": "pen", "type": "enum", "role": "style", "label": "Pen", "description": "Show or hide the pen nib actor.", "default": "show", "options": [{ "value": "show", "label": "Show" }, { "value": "hide", "label": "Hide" }] },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Color used by strokes marked data-ink=accent (one highlight stroke in each preset).", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "style", "label": "Exit", "description": "How the completed lockup leaves. none holds the final frame.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Whiteboard Ink</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="whiteboard-ink" data-duration="5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            background:
+              radial-gradient(
+                ellipse at 48% 42%,
+                color-mix(in srgb, var(--bg, #f6f1e7) 96%, var(--fg, #20242b)) 0%,
+                var(--bg, #f6f1e7) 72%
+              ),
+              var(--bg, #f6f1e7);
+            color: var(--fg, #20242b);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .wbi-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+          }
+
+          .wbi-stage {
+            display: grid;
+            grid-template-rows: minmax(0, 1fr) auto;
+            width: 92cqw;
+            height: 90cqh;
+            opacity: 0;
+            will-change: transform, opacity;
+          }
+
+          .wbi-board {
+            position: relative;
+            min-height: 0;
+          }
+
+          .wbi-svg {
+            display: block;
+            width: 100%;
+            height: 100%;
+            overflow: visible;
+          }
+
+          .wbi-sketch[hidden] {
+            display: none;
+          }
+
+          .wbi-stroke {
+            fill: none;
+            stroke: var(--fg, #20242b);
+            /* User-space width: never non-scaling-stroke on dashed paths
+               (screen-space dash breaks draw-on under group scale). Non-uniform
+               scale gives a natural thick-thin nib variation. */
+            stroke-width: 6;
+            stroke-linecap: round;
+            stroke-linejoin: round;
+          }
+
+          .wbi-stroke.wbi-accent {
+            stroke: var(--wbi-accent);
+          }
+
+          /* Custom strokes-slot paths inherit the same ink treatment without
+             needing any class; data-ink="accent" routes through the accent
+             token map exactly like a preset's highlight stroke. */
+          [data-slot="strokes"] path {
+            fill: none;
+            stroke: var(--fg, #20242b);
+            stroke-width: 6;
+            stroke-linecap: round;
+            stroke-linejoin: round;
+          }
+
+          [data-slot="strokes"] path[data-ink="accent"] {
+            stroke: var(--wbi-accent);
+          }
+
+          .wbi-pen {
+            filter: drop-shadow(0 5px 6px color-mix(in srgb, var(--fg, #20242b) 20%, transparent));
+            will-change: transform, opacity;
+          }
+
+          .wbi-pen-art {
+            will-change: transform;
+          }
+
+          .wbi-pen-body {
+            fill: var(--surface, #ffffff);
+            stroke: var(--fg, #20242b);
+            stroke-width: 4;
+            stroke-linecap: round;
+            stroke-linejoin: round;
+          }
+
+          .wbi-pen-nib {
+            fill: var(--wbi-accent);
+            stroke: var(--fg, #20242b);
+            stroke-width: 3;
+          }
+
+          .wbi-caption {
+            min-height: 10cqh;
+            padding-top: var(--space-1, 1.8cqh);
+            color: var(--muted, #667085);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: clamp(24px, 5cqh, 52px);
+            font-weight: 680;
+            line-height: 1.1;
+            letter-spacing: -0.02em;
+            text-align: center;
+            opacity: 0;
+          }
+        </style>
+
+        <div
+          id="wbi-clip"
+          class="wbi-clip clip"
+          data-start="0"
+          data-duration="5"
+          data-track-index="0"
+        >
+          <div class="wbi-stage" role="img">
+            <div class="wbi-board">
+              <svg
+                class="wbi-svg"
+                viewBox="0 0 1000 560"
+                preserveAspectRatio="xMidYMid meet"
+                aria-hidden="true"
+              >
+                <g
+                  class="wbi-sketch"
+                  data-sketch="bulb"
+                  transform="translate(500 280) scale(1.25 1.4) translate(-500 -256)"
+                >
+                  <path
+                    class="wbi-stroke"
+                    d="M 430 340 C 414 310 392 286 386 244 C 376 172 427 113 501 109 C 578 105 633 160 626 235 C 622 279 596 306 574 341"
+                  ></path>
+                  <path
+                    class="wbi-stroke wbi-accent"
+                    d="M 454 238 C 469 251 482 263 499 292 C 517 261 532 247 549 235"
+                  ></path>
+                  <path class="wbi-stroke" d="M 431 347 C 468 353 531 350 571 343"></path>
+                  <path class="wbi-stroke" d="M 438 369 C 476 376 525 373 564 365"></path>
+                  <path class="wbi-stroke" d="M 454 389 C 482 403 520 402 548 385"></path>
+                  <path class="wbi-stroke" d="M 333 231 C 349 228 360 230 372 232"></path>
+                  <path class="wbi-stroke" d="M 640 228 C 657 225 670 226 685 230"></path>
+                </g>
+
+                <g
+                  class="wbi-sketch"
+                  data-sketch="flow"
+                  transform="translate(500 280) scale(0.9 2.1) translate(-525 -265)"
+                  hidden
+                >
+                  <path
+                    class="wbi-stroke"
+                    d="M 145 205 C 145 184 160 171 184 171 L 315 171 C 338 171 351 187 351 207 L 351 322 C 351 344 337 357 314 357 L 181 357 C 158 357 145 342 145 321 Z"
+                  ></path>
+                  <path
+                    class="wbi-stroke wbi-accent"
+                    d="M 352 264 C 378 258 397 259 425 263 L 446 267 M 429 249 L 446 267 L 427 284"
+                  ></path>
+                  <path class="wbi-stroke" d="M 516 170 L 611 265 L 516 360 L 421 265 Z"></path>
+                  <path
+                    class="wbi-stroke"
+                    d="M 612 265 C 641 268 662 268 691 264 L 711 263 M 694 247 L 711 263 L 694 280"
+                  ></path>
+                  <path
+                    class="wbi-stroke"
+                    d="M 711 204 C 711 184 726 171 749 171 L 868 171 C 891 171 905 187 905 208 L 905 321 C 905 343 891 357 868 357 L 748 357 C 725 357 711 342 711 321 Z"
+                  ></path>
+                  <path
+                    class="wbi-stroke"
+                    d="M 764 266 C 785 284 802 292 820 294 C 837 278 849 256 861 230"
+                  ></path>
+                </g>
+
+                <g class="wbi-sketch" data-sketch="rocket" transform="translate(0 -17)" hidden>
+                  <path
+                    class="wbi-stroke"
+                    d="M 500 76 C 552 117 581 184 578 272 C 576 329 549 378 500 420 C 451 378 425 329 422 272 C 419 184 448 117 500 76 Z"
+                  ></path>
+                  <path
+                    class="wbi-stroke wbi-accent"
+                    d="M 500 181 C 526 181 544 198 544 223 C 544 248 527 265 500 265 C 475 265 457 248 457 223 C 457 199 474 181 500 181 Z"
+                  ></path>
+                  <path
+                    class="wbi-stroke"
+                    d="M 430 295 C 386 320 359 363 353 419 C 389 405 420 384 448 353"
+                  ></path>
+                  <path
+                    class="wbi-stroke"
+                    d="M 570 295 C 614 320 641 363 647 419 C 611 405 580 384 552 353"
+                  ></path>
+                  <path
+                    class="wbi-stroke"
+                    d="M 476 415 C 464 445 470 478 500 518 C 530 478 536 445 524 415"
+                  ></path>
+                  <path class="wbi-stroke" d="M 452 431 C 433 451 427 475 433 500"></path>
+                  <path class="wbi-stroke" d="M 548 431 C 567 451 573 475 567 500"></path>
+                </g>
+
+                <!--
+                  Strokes slot. Fill this group with your own <path> elements
+                  (installed copy) to replace the preset sketches; paths draw
+                  in document order in the 0 0 1000 560 viewBox space. Mark a
+                  path data-ink="accent" for the accent token. Ships empty.
+                -->
+                <g class="wbi-sketch" data-slot="strokes" data-sketch="custom" hidden></g>
+
+                <g class="wbi-pen" aria-hidden="true">
+                  <g class="wbi-pen-art">
+                    <path class="wbi-pen-body" d="M 0 0 L -43 -11 L -52 0 L -43 11 Z"></path>
+                    <path class="wbi-pen-nib" d="M 0 0 L -11 -7 L -11 7 Z"></path>
+                  </g>
+                </g>
+              </svg>
+            </div>
+            <div class="wbi-caption"></div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".wbi-stage");
+            var captionElement = root.querySelector(".wbi-caption");
+            var penElement = root.querySelector(".wbi-pen");
+            var penArt = root.querySelector(".wbi-pen-art");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var sketchGroups = {
+              bulb: root.querySelector('[data-sketch="bulb"]'),
+              flow: root.querySelector('[data-sketch="flow"]'),
+              rocket: root.querySelector('[data-sketch="rocket"]'),
+            };
+            var sketch = Object.prototype.hasOwnProperty.call(sketchGroups, vars.sketch)
+              ? vars.sketch
+              : "bulb";
+            var caption = vars.caption == null ? "Draw the idea" : String(vars.caption);
+            var penVisible = vars.pen !== "hide";
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exitModes = { none: true, fade: true, up: true };
+            var exitMode = Object.prototype.hasOwnProperty.call(exitModes, vars.exit)
+              ? vars.exit
+              : "none";
+
+            // Strokes slot: user-supplied paths replace the preset sketches.
+            var strokesSlot = root.querySelector('[data-slot="strokes"]');
+            var slotPaths = strokesSlot ? strokesSlot.querySelectorAll("path") : [];
+            var hasCustomStrokes = slotPaths.length > 0;
+            if (hasCustomStrokes) {
+              Array.prototype.forEach.call(slotPaths, function (path) {
+                // CSS beats SVG presentation attributes; promote an authored
+                // stroke-width to inline style so it wins over the slot rule.
+                var strokeWidth = path.getAttribute("stroke-width");
+                if (strokeWidth) path.style.strokeWidth = strokeWidth;
+              });
+            }
+
+            Object.keys(sketchGroups).forEach(function (name) {
+              // SVG <g> has no `hidden` IDL property (assignment is a dead
+              // expando); toggle the attribute so the [hidden] CSS applies.
+              if (hasCustomStrokes || name !== sketch)
+                sketchGroups[name].setAttribute("hidden", "");
+              else sketchGroups[name].removeAttribute("hidden");
+            });
+            if (hasCustomStrokes) strokesSlot.removeAttribute("hidden");
+            var activeGroup = hasCustomStrokes ? strokesSlot : sketchGroups[sketch];
+            root.style.setProperty("--wbi-accent", accentColors[accent]);
+            captionElement.textContent = caption;
+            penElement.style.display = penVisible ? "" : "none";
+            stage.setAttribute(
+              "aria-label",
+              (hasCustomStrokes
+                ? "Custom sketch. "
+                : sketch.charAt(0).toUpperCase() + sketch.slice(1) + " sketch. ") + caption,
+            );
+
+            var groupTransform = activeGroup.transform.baseVal.consolidate();
+            var strokes = Array.from(activeGroup.querySelectorAll("path")).map(function (path) {
+              var length = path.getTotalLength();
+              path.style.strokeDasharray = length + " " + length;
+              path.style.strokeDashoffset = String(length);
+              return {
+                path: path,
+                length: length,
+                progress: 0,
+                matrix: groupTransform ? groupTransform.matrix : null,
+              };
+            });
+            var totalLength = strokes.reduce(function (sum, stroke) {
+              return sum + stroke.length;
+            }, 0);
+
+            function pointAt(stroke, distance) {
+              var point = stroke.path.getPointAtLength(distance);
+              return stroke.matrix ? point.matrixTransform(stroke.matrix) : point;
+            }
+
+            function pathPose(stroke, progress) {
+              var distance = progress * stroke.length;
+              var tangentStep = Math.max(0.5, stroke.length * 0.004);
+              var before = pointAt(stroke, Math.max(0, distance - tangentStep));
+              var after = pointAt(stroke, Math.min(stroke.length, distance + tangentStep));
+              var point = pointAt(stroke, distance);
+
+              return {
+                x: point.x,
+                y: point.y,
+                rotation: (Math.atan2(after.y - before.y, after.x - before.x) * 180) / Math.PI,
+              };
+            }
+
+            function placePen(pose) {
+              gsap.set(penElement, { x: pose.x, y: pose.y, rotation: pose.rotation });
+            }
+
+            function renderStroke(stroke) {
+              var clamped = Math.max(0, Math.min(1, stroke.progress));
+              stroke.path.style.strokeDashoffset = String((1 - clamped) * stroke.length);
+              placePen(pathPose(stroke, clamped));
+            }
+
+            var DRAW_PHASE_BASE = 3.25;
+            var CAPTION_BASE = 0.3;
+            var IN_BASE = DRAW_PHASE_BASE + CAPTION_BASE;
+            var OUT_BASE = exitMode === "none" ? 0 : 0.45;
+            var resolvedDuration =
+              window.__hyperframes && window.__hyperframes.getDuration
+                ? window.__hyperframes.getDuration()
+                : undefined;
+            var duration = Math.max(
+              0.001,
+              typeof resolvedDuration === "number"
+                ? resolvedDuration
+                : parseFloat(root.dataset.duration || "5"),
+            );
+            var fixedTotal = IN_BASE + OUT_BASE;
+            var phaseScale = duration < fixedTotal ? duration / fixedTotal : 1;
+            var IN = IN_BASE * phaseScale;
+            var OUT = OUT_BASE * phaseScale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var DRAW_PHASE = DRAW_PHASE_BASE * phaseScale;
+            var CAPTION = CAPTION_BASE * phaseScale;
+            var hopCount = strokes.length - 1;
+            var HOP = 0.1 * phaseScale;
+            var MIN_DRAW = 0.26 * phaseScale;
+            // Custom slots can hold many strokes; when the fixed per-stroke
+            // floors alone would overrun the draw phase, shrink them together
+            // so the cadence stays sequential and the phase never overflows.
+            var fixedNeed = MIN_DRAW * strokes.length + HOP * hopCount;
+            if (fixedNeed > DRAW_PHASE) {
+              var crowd = DRAW_PHASE / fixedNeed;
+              HOP *= crowd;
+              MIN_DRAW *= crowd;
+            }
+            var DRAW_BUDGET = DRAW_PHASE - HOP * hopCount;
+            var LENGTH_BUDGET = Math.max(0, DRAW_BUDGET - MIN_DRAW * strokes.length);
+            var OUT_START = IN + HOLD;
+            var cursor = 0;
+
+            gsap.set(stage, { opacity: 0, y: "1.2cqh" });
+            gsap.set(captionElement, { opacity: 0, y: "1.4cqh" });
+            gsap.set(penElement, { opacity: penVisible ? 1 : 0 });
+            gsap.set(penArt, { y: 0, transformOrigin: "0px 0px" });
+            placePen(pathPose(strokes[0], 0));
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: each stroke owns one progress value. Its single onUpdate
+            // paints the dash and places the nib at the same ink front.
+            tl.to(
+              stage,
+              { opacity: 1, y: "0cqh", duration: Math.min(0.26, IN), ease: "power2.out" },
+              0,
+            );
+
+            strokes.forEach(function (stroke, index) {
+              var drawDuration = MIN_DRAW + (LENGTH_BUDGET * stroke.length) / totalLength;
+
+              tl.to(
+                stroke,
+                {
+                  progress: 1,
+                  duration: drawDuration,
+                  ease: "power1.inOut",
+                  onUpdate: function () {
+                    renderStroke(stroke);
+                  },
+                },
+                cursor,
+              );
+              cursor += drawDuration;
+
+              if (index < strokes.length - 1) {
+                var nextStroke = strokes[index + 1];
+                var fromPose = pathPose(stroke, 1);
+                var toPose = pathPose(nextStroke, 0);
+                var hopState = { progress: 0 };
+
+                tl.to(
+                  hopState,
+                  {
+                    progress: 1,
+                    duration: HOP,
+                    ease: "power2.out",
+                    onUpdate: function () {
+                      var progress = hopState.progress;
+                      placePen({
+                        x: fromPose.x + (toPose.x - fromPose.x) * progress,
+                        y:
+                          fromPose.y +
+                          (toPose.y - fromPose.y) * progress -
+                          Math.sin(Math.PI * progress) * 18,
+                        rotation:
+                          fromPose.rotation + (toPose.rotation - fromPose.rotation) * progress,
+                      });
+                      gsap.set(penArt, { y: -Math.sin(Math.PI * progress) * 8 });
+                    },
+                  },
+                  cursor,
+                );
+                cursor += HOP;
+              }
+            });
+
+            tl.to(
+              captionElement,
+              { opacity: 1, y: "0cqh", duration: CAPTION, ease: "power2.out" },
+              cursor,
+            );
+            tl.to(penElement, { opacity: 0, duration: CAPTION, ease: "power2.out" }, cursor);
+            tl.to(penArt, { y: -18, duration: CAPTION, ease: "power2.out" }, cursor);
+
+            // HOLD: the completed lockup stays dead calm. Duration changes
+            // stretch only this gap between the caption reveal and OUT.
+
+            // OUT: only when an exit is requested; exit none holds the final
+            // frame to the end (frame roots own transitions).
+            if (exitMode !== "none") {
+              var exitTween = { opacity: 0, duration: OUT, ease: "power2.in" };
+              if (exitMode === "up") exitTween.y = "-1.8cqh";
+              tl.to(stage, exitTween, OUT_START);
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["whiteboard-ink"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add whiteboard-ink" />
+
+That writes one file: `compositions/components/whiteboard-ink.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/whiteboard-ink.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `motion-primitive` `intro` `reveal` `svg` `whiteboard` `line-draw` `slot`.
+
+## 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/components/wordmark-tiles.mdx b/docs/catalog/components/wordmark-tiles.mdx
new file mode 100644
index 0000000000..f9e56c418b
--- /dev/null
+++ b/docs/catalog/components/wordmark-tiles.mdx
@@ -0,0 +1,402 @@
+---
+title: "Wordmark Tiles"
+description: "A wordmark resolves from deterministic color noise into correctly cropped glyph tiles through a spatially modulated GSAP wave."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/wordmark-tiles.html"
+  compositionId="wordmark-tiles"
+  compositionSrc="compositions/components/wordmark-tiles.html"
+  variables={[{"id":"text","type":"string","role":"content","label":"Wordmark","description":"Text resolved by the tile wave.","default":"LAUNCH","maxLength":12},{"id":"columns","type":"number","role":"layout","label":"Columns","description":"Number of columns in the wordmark tile grid.","default":12,"min":8,"max":14,"step":1},{"id":"waveStagger","type":"number","role":"motion","label":"Wave stagger","description":"Delay between tile reveals in spatial wave order.","default":40,"min":15,"max":50,"step":1,"unit":"ms"}]}
+>
+
+```html wordmark-tiles.html
+<!doctype html>
+<!--
+  wordmark-tiles: HyperFrames video primitive (typography / holdable / reveal)
+
+  Concept: a wordmark begins as a field of unresolved color tiles. A spatially
+  modulated wave crosses the grid, and each tile swaps its noise face for the
+  correct clipped fragment of the final wordmark. One mechanic, one job:
+  reveal a legible mark through a raster tile wave.
+
+  Compiled-from evidence: power-reel production source 12-tile-field.html
+  (2026-07). Its tile field combines a traveling brush with sinusoidal spatial
+  modulation so neighboring rows resolve in waves instead of a strict scan.
+
+  Use when: a product name, campaign word, or short logo type needs a premium
+  reveal that can read as technical, broadcast, or digital signage.
+
+  Variables (declared in data-composition-variables below):
+    - text (string, default "LAUNCH"): wordmark copy, limited to 12 characters.
+    - columns (number, default 12, range 8 to 14): tile columns. Rows derive
+      proportionally from this one density owner.
+    - waveStagger (number, default 40, range 15 to 50 ms): delay between tiles
+      after they are sorted into the spatial wave order.
+
+  Envelope (fixed IN/OUT, elastic HOLD only, never gsap.timeScale()):
+    IN_BASE  = 4.80s  stage entrance and complete tile wave at max settings
+    HOLD     = elastic = max(0, D - (IN_BASE + OUT_BASE)); deliberately still
+               so the resolved wordmark remains readable
+    OUT_BASE = 0.50s  clean group fade with power2.in
+    If D < IN_BASE + OUT_BASE, IN and OUT scale down together. The per-tile
+    stagger scales with that compressed envelope and is capped inside IN.
+
+  Sync point (fixed offset into IN, never inside elastic HOLD): wave-start at
+  0.20s into an unscaled IN. The offset scales only when the full envelope is
+  compressed.
+
+  Sound cue: none. The distributed wave has no single impact frame, so the
+  primitive does not dispatch hf:sfx.
+
+  Mount contract: this file is a MOUNTABLE SUB-COMPOSITION. A host loads it via
+  data-composition-src, and the runtime clones only <template> contents. Styles,
+  markup, GSAP, and timeline registration therefore live inside <template>.
+  #root has position:absolute; inset:0; container-type:size and no data-width or
+  data-height, so the host owns the box. The composition id is hardcoded as
+  "wordmark-tiles" because mount flattening strips it from the live root.
+  Variables come from window.__hyperframes.getVariables(), which supplies the
+  declared defaults merged with host data-variable-values overrides.
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "text", "type": "string", "role": "content", "label": "Wordmark", "description": "Text resolved by the tile wave.", "default": "LAUNCH", "maxLength": 12 },
+    { "id": "columns", "type": "number", "role": "layout", "label": "Columns", "description": "Number of columns in the wordmark tile grid.", "default": 12, "min": 8, "max": 14, "step": 1 },
+    { "id": "waveStagger", "type": "number", "role": "motion", "label": "Wave stagger", "description": "Delay between tile reveals in spatial wave order.", "default": 40, "min": 15, "max": 50, "step": 1, "unit": "ms" }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Wordmark Tiles</title>
+    <!-- Metadata only. The mount loader reads variable declarations from
+         <html>, then discards everything outside <template>. -->
+  </head>
+  <body>
+    <template>
+      <div
+        id="root"
+        data-composition-id="wordmark-tiles"
+        data-start="0"
+        data-duration="6.5"
+        data-fps="30"
+      >
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          /* Root fills the host box. Internal layout uses only cqw/cqh, and
+             every painted color is owned by the host theme tokens. */
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            color: var(--fg);
+            font-family: var(--font-body);
+          }
+
+          .wt-clip {
+            width: 100%;
+            height: 100%;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+            background: var(--bg);
+          }
+
+          .wt-stage {
+            width: 86cqw;
+            height: 48cqh;
+            position: relative;
+            opacity: 0;
+          }
+
+          /* EDIT ZONE: stage proportions above and tile line weight below are
+             the visual density controls. The public columns knob owns the grid
+             count, and no second density decision exists in CSS. */
+          .wt-grid {
+            width: 100%;
+            height: 100%;
+            display: grid;
+            grid-template-columns: repeat(var(--wt-columns), minmax(0, 1fr));
+            grid-template-rows: repeat(var(--wt-rows), minmax(0, 1fr));
+            overflow: hidden;
+            border: min(0.12cqw, 0.22cqh) solid var(--border);
+            border-radius: var(--radius);
+            background: var(--surface);
+          }
+
+          .wt-tile {
+            position: relative;
+            min-width: 0;
+            min-height: 0;
+            overflow: hidden;
+            box-shadow: inset 0 0 0 min(0.08cqw, 0.14cqh) var(--border);
+            background: var(--surface);
+          }
+
+          .wt-noise,
+          .wt-resolved {
+            position: absolute;
+            inset: 0;
+            display: block;
+            transform-origin: center;
+          }
+
+          .wt-noise-a {
+            background: color-mix(in srgb, var(--surface) 64%, var(--muted));
+          }
+
+          .wt-noise-b {
+            background: color-mix(in srgb, var(--surface) 58%, var(--brand));
+          }
+
+          .wt-noise-c {
+            background: color-mix(in srgb, var(--surface) 56%, var(--accent));
+          }
+
+          .wt-resolved {
+            overflow: hidden;
+            background: color-mix(in srgb, var(--surface) 92%, var(--brand));
+          }
+
+          /* Every tile contains one crop of the same stable wordmark surface.
+             JS computes only the crop offsets from the canonical grid shape. */
+          .wt-fragment {
+            position: absolute;
+            left: var(--wt-fragment-x);
+            top: var(--wt-fragment-y);
+            width: 86cqw;
+            height: 48cqh;
+            display: grid;
+            place-items: center;
+            color: var(--fg);
+            font-family: var(--font-display);
+            font-size: var(--wt-font-size);
+            font-weight: 800;
+            line-height: 1;
+            letter-spacing: -0.035em;
+            text-align: center;
+            text-transform: uppercase;
+            white-space: nowrap;
+          }
+        </style>
+
+        <div
+          id="wordmark-tiles-clip"
+          class="wt-clip clip"
+          data-start="0"
+          data-duration="6.5"
+          data-track-index="0"
+        >
+          <div class="wt-stage">
+            <div class="wt-grid" role="img" aria-label="LAUNCH"></div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var compositionId = "wordmark-tiles";
+            var stage = root.querySelector(".wt-stage");
+            var grid = root.querySelector(".wt-grid");
+
+            // EDIT ZONE: declarations above and clamped reads below are the
+            // single source of truth for the three public variables.
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var text = vars.text == null ? "LAUNCH" : String(vars.text).trim().slice(0, 12);
+            if (text.length === 0) text = "LAUNCH";
+
+            var rawColumns = Number(vars.columns);
+            var columns = Number.isFinite(rawColumns) ? Math.round(rawColumns) : 12;
+            columns = Math.max(8, Math.min(14, columns));
+
+            var rawWaveStagger = Number(vars.waveStagger);
+            var waveStaggerMs = Number.isFinite(rawWaveStagger) ? rawWaveStagger : 40;
+            waveStaggerMs = Math.max(15, Math.min(50, waveStaggerMs));
+
+            // INVARIANT: rows derive only from columns. This keeps one density
+            // owner and gives the 86:48 stage near-square tiles at every value.
+            var rows = Math.max(4, Math.round((columns * 5) / 12));
+            var tileCount = columns * rows;
+            var fontSize = Math.max(7, Math.min(19, 86 / Math.max(4, text.length * 0.62)));
+
+            grid.style.setProperty("--wt-columns", String(columns));
+            grid.style.setProperty("--wt-rows", String(rows));
+            grid.style.setProperty("--wt-font-size", String(fontSize) + "cqw");
+            grid.setAttribute("aria-label", text);
+
+            // Fixed-seed LCG. Noise faces vary, while every rebuild with the
+            // same variables produces the same tile field and wave order.
+            var seed = 0x57a7c1e;
+            function seededUnit() {
+              seed = (Math.imul(seed, 1664525) + 1013904223) >>> 0;
+              return seed / 4294967296;
+            }
+
+            var fragment = document.createDocumentFragment();
+            var tiles = [];
+            for (var index = 0; index < tileCount; index += 1) {
+              var row = Math.floor(index / columns);
+              var column = index % columns;
+              var tile = document.createElement("span");
+              var noise = document.createElement("span");
+              var resolved = document.createElement("span");
+              var wordmark = document.createElement("span");
+              var noiseVariant = 1 + Math.floor(seededUnit() * 3);
+
+              tile.className = "wt-tile";
+              tile.setAttribute("aria-hidden", "true");
+              tile.dataset.waveRank = String(
+                column + row * 0.68 + Math.sin(row * 1.7 + column * 0.42) * 2.15,
+              );
+
+              noise.className = "wt-noise wt-noise-" + ["a", "b", "c"][noiseVariant - 1];
+              noise.dataset.startOpacity = String(0.72 + seededUnit() * 0.28);
+
+              resolved.className = "wt-resolved";
+              wordmark.className = "wt-fragment";
+              wordmark.textContent = text;
+              wordmark.style.setProperty(
+                "--wt-fragment-x",
+                String((-86 * column) / columns) + "cqw",
+              );
+              wordmark.style.setProperty("--wt-fragment-y", String((-48 * row) / rows) + "cqh");
+
+              resolved.appendChild(wordmark);
+              tile.appendChild(resolved);
+              tile.appendChild(noise);
+              fragment.appendChild(tile);
+              tiles.push(tile);
+            }
+            grid.replaceChildren(fragment);
+
+            // The source mechanic combines travel with spatial sine waves.
+            // Sorting by the stored rank creates the same rolling behavior,
+            // including row reversals and pockets that lead adjacent columns.
+            var waveTiles = tiles.slice().sort(function (a, b) {
+              return Number(a.dataset.waveRank) - Number(b.dataset.waveRank);
+            });
+            var resolvedByWave = waveTiles.map(function (tile) {
+              return tile.querySelector(".wt-resolved");
+            });
+            var noiseByWave = waveTiles.map(function (tile) {
+              return tile.querySelector(".wt-noise");
+            });
+
+            // RETIME RANGE: these five base values own global pacing. HOLD is
+            // the only elastic phase, and the reveal never exceeds IN.
+            var IN_BASE = 4.8;
+            var OUT_BASE = 0.5;
+            var STAGE_IN_BASE = 0.38;
+            var WAVE_START_BASE = 0.2;
+            var TILE_DURATION_BASE = 0.5;
+
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "6.5"));
+            var totalBase = IN_BASE + OUT_BASE;
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var OUT_START = IN + HOLD;
+            var STAGE_IN = STAGE_IN_BASE * scale;
+            var WAVE_START = WAVE_START_BASE * scale;
+            var TILE_DURATION = TILE_DURATION_BASE * scale;
+            var maxStep = Math.max(
+              0,
+              (IN - WAVE_START - TILE_DURATION) / Math.max(1, tileCount - 1),
+            );
+            var STAGGER_SECONDS = Math.min((waveStaggerMs / 1000) * scale, maxStep);
+
+            gsap.set(stage, { opacity: 0 });
+            gsap.set(resolvedByWave, { opacity: 0, scale: 0.82 });
+            gsap.set(noiseByWave, {
+              opacity: function (_index, element) {
+                return Number(element.dataset.startOpacity);
+              },
+              scale: 1,
+            });
+
+            var timeline = gsap.timeline({ paused: true });
+
+            timeline.to(stage, { opacity: 1, duration: STAGE_IN, ease: "power2.out" }, 0);
+
+            // IN: each tile resolves with --ease-standard's GSAP owner,
+            // power2.out. The spatial rank supplies wave order to the stagger.
+            timeline.to(
+              resolvedByWave,
+              {
+                opacity: 1,
+                scale: 1,
+                duration: TILE_DURATION,
+                ease: "power2.out",
+                stagger: { each: STAGGER_SECONDS, from: "start" },
+              },
+              WAVE_START,
+            );
+            timeline.to(
+              noiseByWave,
+              {
+                opacity: 0,
+                scale: 1.18,
+                duration: TILE_DURATION,
+                ease: "power2.out",
+                stagger: { each: STAGGER_SECONDS, from: "start" },
+              },
+              WAVE_START,
+            );
+
+            // HOLD is deliberately still. OUT uses the catalog exit ease.
+            timeline.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+
+            timeline.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = timeline;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add wordmark-tiles" />
+
+That writes one file: `compositions/components/wordmark-tiles.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/wordmark-tiles.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `typography` `wordmark` `tiles` `raster` `reveal`.
+
+## 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/components/x-follow-card.mdx b/docs/catalog/components/x-follow-card.mdx
new file mode 100644
index 0000000000..1595f5cb83
--- /dev/null
+++ b/docs/catalog/components/x-follow-card.mdx
@@ -0,0 +1,126 @@
+---
+title: "X Follow Card"
+description: "A social follow card with avatar, handle, and follower motion."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/components/x-follow-card.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="X Follow Card preview" />
+
+## Install
+
+<InstallCommand command="npx hyperframes add x-follow-card" />
+
+That writes one file: `compositions/components/x-follow-card.html`.
+
+## Source
+
+<Accordion title={`x-follow-card.html`}>
+
+```html
+<!--
+  X Follow Card - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-x-follow-card">
+  <header>
+    <div class="avatar"></div>
+    <div>
+      <h3>X Follow Card</h3>
+      <p>A social follow card with avatar, handle, and follower motion.</p>
+    </div>
+  </header>
+  <div class="stat">30.6K</div>
+  <div class="avatars">
+    <span style="--c: var(--hf-l1)"></span><span style="--c: var(--hf-l2)"></span
+    ><span style="--c: var(--hf-l2)"></span><span style="--c: var(--hf-l2)"></span
+    ><span style="--c: var(--hf-l2)"></span><span style="--c: var(--hf-l2)"></span>
+  </div>
+</div>
+
+<style>
+  .hf-remocn-x-follow-card {
+    --hf-accent: var(--accent, #f8fafc);
+    --hf-ink: #111827;
+    --hf-l1: rgba(255, 255, 255, 0.72);
+    --hf-l2: rgba(255, 255, 255, 0.45);
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-x-follow-card {
+    width: 700px;
+    border-radius: 30px;
+    padding: 34px;
+    background: #0f172a;
+    color: #fff;
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+  }
+  .hf-remocn-x-follow-card header {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+  }
+  .hf-remocn-x-follow-card .avatar {
+    width: 70px;
+    height: 70px;
+    border-radius: 22px;
+    background: var(--hf-l1);
+  }
+  .hf-remocn-x-follow-card h3 {
+    margin: 0;
+    font-size: 36px;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-x-follow-card p {
+    color: #94a3b8;
+    margin: 4px 0 0;
+  }
+  .hf-remocn-x-follow-card .stat {
+    margin-top: 30px;
+    font-size: 82px;
+    font-weight: 900;
+    letter-spacing: -0.08em;
+    transform: translateY(var(--hf-stat-y, 0px));
+  }
+  .hf-remocn-x-follow-card .avatars {
+    display: flex;
+    margin-top: 18px;
+  }
+  .hf-remocn-x-follow-card .avatars span {
+    width: 46px;
+    height: 46px;
+    border-radius: 999px;
+    border: 3px solid #0f172a;
+    margin-left: -10px;
+    background: var(--c);
+    opacity: var(--hf-avatar-opacity, 1);
+    transform: translateY(var(--hf-avatar-y, 0px));
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-x-follow-card .stat', { '--hf-stat-y': '28px', opacity: 0 }, { '--hf-stat-y': '0px', opacity: 1, duration: 0.46, ease: 'back.out(1.6)' }, startTime); tl.fromTo('.hf-remocn-x-follow-card .avatars span', { '--hf-avatar-y': '18px', '--hf-avatar-opacity': 0 }, { '--hf-avatar-y': '0px', '--hf-avatar-opacity': 1, duration: 0.28, stagger: 0.05, ease: 'power2.out' }, startTime + 0.22);
+-->
+```
+
+</Accordion>
+
+## Usage
+
+Open `compositions/components/x-follow-card.html` and paste its contents into your composition. See the comment header in the file for timeline integration guidance.
+
+{/* hf:generated-footer */}
+
+Tagged `social-overlay` `remocn-port`.
+
+## 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/components/yt-camera-move.mdx b/docs/catalog/components/yt-camera-move.mdx
index ea6276c194..b328267498 100644
--- a/docs/catalog/components/yt-camera-move.mdx
+++ b/docs/catalog/components/yt-camera-move.mdx
@@ -3,13 +3,13 @@ title: "Camera Punch-In"
 description: "Dynamic zoom, slide, and 3D tilt-pan helpers for any wrapper (video, include, card) with cubic-easing defaults and an edge-defocus pulse overlay"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/yt-camera-move.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/yt-camera-move.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/components/yt-camera-move.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Camera Punch-In preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add yt-camera-move
-```
+<InstallCommand command="npx hyperframes add yt-camera-move" />
 
 That writes one file: `compositions/components/yt-camera-move.html`.
 
@@ -20,6 +20,190 @@ Open `compositions/components/yt-camera-move.html` and copy what is inside into
 A component has no size or duration of its own. It takes both from the composition
 you paste it into.
 
+## Source
+
+<Accordion title={`yt-camera-move.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      /* ---- yt-camera-move --------------------------------------------------
+         The creator-video punch-in as reusable GSAP helpers: dynamic
+         zoom + slide + 3D tilt/pan on any wrapper (a #video-wrap, a
+         sub-composition include, an image card). A talking-head recipe
+         is the default: cubic easing, ~11% zoom.
+
+         Optional: .yt-cm-defocus is an edge-blur overlay that pulses during
+         the move to sell the 3D feel — place it ABOVE the moving layer,
+         covering the same region. */
+      .yt-cm-defocus {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        opacity: 0;
+        backdrop-filter: blur(7px);
+        -webkit-backdrop-filter: blur(7px);
+        /* blur only the frame edges; center stays sharp */
+        -webkit-mask-image: radial-gradient(
+          ellipse 62% 58% at 50% 50%,
+          transparent 58%,
+          rgba(0, 0, 0, 0.85) 92%
+        );
+        mask-image: radial-gradient(
+          ellipse 62% 58% at 50% 50%,
+          transparent 58%,
+          rgba(0, 0, 0, 0.85) 92%
+        );
+      }
+      /* ---- self-preview stand-in "footage" (not part of the snippet) ---- */
+      #yt-cm-stage {
+        position: absolute;
+        inset: 0;
+        overflow: hidden;
+        background: linear-gradient(135deg, #35c8d9 0%, #2a7fff 55%, #7d5cff 100%);
+      }
+      /* Grid is the only cue that reveals the camera move on a flat gradient
+         plate; at 0.14/2px the zoom and slide were nearly imperceptible. */
+      #yt-cm-stage .yt-cm-grid {
+        position: absolute;
+        inset: -60px;
+        background:
+          repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.3) 0 3px, transparent 3px 120px),
+          repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.3) 0 3px, transparent 3px 120px);
+      }
+      #yt-cm-stage .yt-cm-label {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-family: "Inter", ui-sans-serif, sans-serif;
+        font-weight: 700;
+        font-size: 120px;
+        letter-spacing: -0.02em;
+        color: rgba(255, 255, 255, 0.92);
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Self-preview wrapper. WIRING: copy the .yt-cm-defocus CSS (if you want
+         the edge blur), add <div class="yt-cm-defocus" id="yt-my-defocus"></div>
+         as a sibling ABOVE your moving layer, and copy the helpers into your
+         host script. Then drive any wrapper:
+
+           ytCameraMove(tl, "#video-wrap", 5.0, { zoom: 0.11, slideY: -24 });
+           ytDefocusPulse(tl, "#yt-my-defocus", 5.0, 1.2);
+           ytCameraReset(tl, "#video-wrap", 9.0);
+    -->
+    <div
+      id="yt-cm-root"
+      data-composition-id="yt-camera-move"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="yt-cm-stage">
+        <div class="yt-cm-grid" data-layout-allow-overflow></div>
+        <div class="yt-cm-label">FOOTAGE</div>
+      </div>
+      <div class="yt-cm-defocus" id="yt-cm-defocus"></div>
+      <div
+        id="yt-cm-drv"
+        class="clip"
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        // ---- copy these helpers into the host script ----
+        // Punch-in / camera move on any wrapper. A talking-head base:
+        // zoom 0.11, cubic ease. tilt/pan are degrees (rotationX/rotationY,
+        // perspective is set for you); slideX/slideY in px; roll in degrees.
+        window.ytCameraMove = function (tl, target, at, opts) {
+          opts = opts || {};
+          var dur = opts.dur === undefined ? 1.2 : opts.dur;
+          gsap.set(target, {
+            transformPerspective: 1200,
+            transformOrigin: opts.origin || "50% 50%",
+          });
+          tl.to(
+            target,
+            {
+              scale: 1 + (opts.zoom === undefined ? 0.11 : opts.zoom),
+              x: opts.slideX || 0,
+              y: opts.slideY || 0,
+              rotationX: opts.tilt || 0,
+              rotationY: opts.pan || 0,
+              rotation: opts.roll || 0,
+              duration: dur,
+              ease: opts.ease || "power2.inOut",
+            },
+            at,
+          );
+        };
+        // Return to rest (same easing family).
+        window.ytCameraReset = function (tl, target, at, opts) {
+          opts = opts || {};
+          tl.to(
+            target,
+            {
+              scale: 1,
+              x: 0,
+              y: 0,
+              rotationX: 0,
+              rotationY: 0,
+              rotation: 0,
+              duration: opts.dur === undefined ? 1.2 : opts.dur,
+              ease: opts.ease || "power2.inOut",
+            },
+            at,
+          );
+        };
+        // Edge-defocus pulse synced to a move (overlay fades in then out).
+        window.ytDefocusPulse = function (tl, target, at, dur) {
+          dur = dur === undefined ? 1.2 : dur;
+          tl.to(target, { opacity: 1, duration: dur * 0.45, ease: "power2.out" }, at);
+          tl.to(target, { opacity: 0, duration: dur * 0.55, ease: "power2.in" }, at + dur * 0.45);
+        };
+
+        // Self-preview timeline (not part of the snippet you copy):
+        // punch in with a slight tilt, hold, return.
+        var tl = gsap.timeline({ paused: true });
+        window.ytCameraMove(tl, "#yt-cm-stage", 0.4, { zoom: 0.11, slideY: -26, tilt: 3, pan: -2 });
+        window.ytDefocusPulse(tl, "#yt-cm-defocus", 0.4, 1.2);
+        window.ytCameraReset(tl, "#yt-cm-stage", 2.5);
+        window.ytDefocusPulse(tl, "#yt-cm-defocus", 2.5, 1.2);
+        tl.set("#yt-cm-root", { visibility: "hidden" }, 3.98);
+        window.__timelines["yt-camera-move"] = tl;
+      })();
+    </script>
+  </body>
+</html>
+```
+
+</Accordion>
+
 {/* hf:generated-footer */}
 
 Tagged `camera` `zoom` `effect` `creator`.
diff --git a/docs/catalog/components/yt-circle-pointer.mdx b/docs/catalog/components/yt-circle-pointer.mdx
index 1893960f12..5f1581d3c4 100644
--- a/docs/catalog/components/yt-circle-pointer.mdx
+++ b/docs/catalog/components/yt-circle-pointer.mdx
@@ -3,13 +3,13 @@ title: "Pointer Circle + Countdown"
 description: "Draw-on annotation ellipse around a target plus a countdown chip that pulses each tick"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/yt-circle-pointer.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/yt-circle-pointer.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/components/yt-circle-pointer.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Pointer Circle + Countdown preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add yt-circle-pointer
-```
+<InstallCommand command="npx hyperframes add yt-circle-pointer" />
 
 That writes one file: `compositions/components/yt-circle-pointer.html`.
 
@@ -20,6 +20,183 @@ Open `compositions/components/yt-circle-pointer.html` and copy what is inside in
 A component has no size or duration of its own. It takes both from the composition
 you paste it into.
 
+## Source
+
+<Accordion title={`yt-circle-pointer.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      /* ---- yt-circle-pointer -----------------------------------------------
+         Annotation tools: a hand-drawn-feel circle that draws on around a
+         target, and a countdown chip. Position instances via top/left with
+         explicit width/height. */
+      .yt-circle {
+        --yt-red: #e62e2e;
+        position: absolute;
+        pointer-events: none;
+      }
+      .yt-circle svg {
+        width: 100%;
+        height: 100%;
+        overflow: visible;
+      }
+      .yt-circle ellipse {
+        fill: none;
+        stroke: var(--yt-ptr-color, var(--yt-red));
+        stroke-width: 6;
+        stroke-linecap: round;
+        transform: rotate(-6deg);
+        transform-origin: 50% 50%;
+      }
+      .yt-count {
+        position: absolute;
+        display: inline-flex;
+        align-items: center;
+        gap: 14px;
+        padding: 16px 32px;
+        border-radius: 999px;
+        font-family: "Inter", ui-sans-serif, sans-serif;
+        font-weight: 700;
+        font-size: 40px;
+        background: var(--yt-count-bg, var(--yt-red));
+        color: #ffffff;
+        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
+        pointer-events: none;
+        opacity: 0;
+      }
+      .yt-count .num {
+        font-variant-numeric: tabular-nums;
+        min-width: 1.2em;
+        text-align: center;
+      }
+      /* self-preview scene */
+      #yt-ptr-scene {
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(135deg, #35c8d9 0%, #2a7fff 100%);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-family: "Inter", ui-sans-serif, sans-serif;
+        font-weight: 700;
+        font-size: 60px;
+        color: rgba(255, 255, 255, 0.92);
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Self-preview wrapper. WIRING: copy the .yt-circle / .yt-count CSS and
+         markup patterns, position over your target, then:
+
+           ytCircleOn(tl, "#yt-my-circle", 3.0);          // draws the ring
+           ytCircleOff(tl, "#yt-my-circle", 6.0);
+           ytCountIn(tl, "#yt-my-count", 2.0);
+           ytCountdown(tl, "#yt-my-count", 2.4, 5);       // 5 -> 0, pulsing each tick
+    -->
+    <div
+      id="yt-ptr-root"
+      data-composition-id="yt-circle-pointer"
+      data-start="0"
+      data-duration="5"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="yt-ptr-scene"><span>the thing</span></div>
+      <div
+        class="yt-circle"
+        id="yt-ptr-circle"
+        style="left: 760px; top: 440px; width: 420px; height: 210px"
+      >
+        <svg viewBox="0 0 420 210"><ellipse cx="210" cy="105" rx="196" ry="88"></ellipse></svg>
+      </div>
+      <div class="yt-count" id="yt-ptr-count" style="right: 140px; top: 110px">
+        <span class="num">5</span><span>sec</span>
+      </div>
+      <div
+        id="yt-ptr-drv"
+        class="clip"
+        data-start="0"
+        data-duration="5"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        // ---- copy these helpers into the host script ----
+        window.ytCircleOn = function (tl, target, at, dur) {
+          var el = document.querySelector(target + " ellipse");
+          var len = el.getTotalLength();
+          gsap.set(el, { strokeDasharray: len, strokeDashoffset: len });
+          tl.to(
+            el,
+            { strokeDashoffset: 0, duration: dur === undefined ? 0.7 : dur, ease: "power2.inOut" },
+            at,
+          );
+        };
+        window.ytCircleOff = function (tl, target, at) {
+          tl.to(target, { opacity: 0, duration: 0.35, ease: "power2.in" }, at);
+        };
+        window.ytCountIn = function (tl, target, at) {
+          gsap.set(target, { y: -18, scale: 0.9 });
+          tl.to(target, { opacity: 1, y: 0, scale: 1, duration: 0.45, ease: "back.out(1.5)" }, at);
+        };
+        window.ytCountdown = function (tl, target, at, from) {
+          var num = document.querySelector(target + " .num");
+          var st = { v: from };
+          tl.to(
+            st,
+            {
+              v: 0,
+              duration: from,
+              ease: "none",
+              onUpdate: function () {
+                num.textContent = String(Math.ceil(st.v));
+              },
+            },
+            at,
+          );
+          for (var i = 1; i <= from; i++) {
+            tl.to(target, { scale: 1.07, duration: 0.09, ease: "sine.out" }, at + i - 0.09);
+            tl.to(target, { scale: 1, duration: 0.14, ease: "sine.in" }, at + i);
+          }
+        };
+
+        // Self-preview timeline.
+        var tl = gsap.timeline({ paused: true });
+        window.ytCountIn(tl, "#yt-ptr-count", 0.3);
+        window.ytCountdown(tl, "#yt-ptr-count", 0.7, 3);
+        window.ytCircleOn(tl, "#yt-ptr-circle", 1.0);
+        window.ytCircleOff(tl, "#yt-ptr-circle", 4.2);
+        tl.to("#yt-ptr-count", { opacity: 0, duration: 0.3, ease: "power2.in" }, 4.3);
+        tl.set("#yt-ptr-root", { visibility: "hidden" }, 4.98);
+        window.__timelines["yt-circle-pointer"] = tl;
+      })();
+    </script>
+  </body>
+</html>
+```
+
+</Accordion>
+
 {/* hf:generated-footer */}
 
 Tagged `annotation` `countdown` `overlay`.
diff --git a/docs/catalog/components/yt-feather-highlight.mdx b/docs/catalog/components/yt-feather-highlight.mdx
index fdb6e72ec9..a09cfee2d0 100644
--- a/docs/catalog/components/yt-feather-highlight.mdx
+++ b/docs/catalog/components/yt-feather-highlight.mdx
@@ -3,13 +3,13 @@ title: "Feathered Spotlight"
 description: "Dims the frame except a feathered ellipse; the hole's position and size are CSS variables, so helpers glide the spotlight between targets"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/yt-feather-highlight.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/yt-feather-highlight.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/components/yt-feather-highlight.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Feathered Spotlight preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add yt-feather-highlight
-```
+<InstallCommand command="npx hyperframes add yt-feather-highlight" />
 
 That writes one file: `compositions/components/yt-feather-highlight.html`.
 
@@ -20,6 +20,160 @@ Open `compositions/components/yt-feather-highlight.html` and copy what is inside
 A component has no size or duration of its own. It takes both from the composition
 you paste it into.
 
+## Source
+
+<Accordion title={`yt-feather-highlight.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      /* ---- yt-feather-highlight --------------------------------------------
+         Spotlight part of the frame: a dim layer with a feathered ellipse
+         hole. The hole's position/size are CSS variables, so the helpers
+         tween them directly (GSAP animates CSS vars). */
+      .yt-hl {
+        --yt-hl-x: 50%;
+        --yt-hl-y: 50%;
+        --yt-hl-rx: 22%;
+        --yt-hl-ry: 26%;
+        --yt-hl-dim: 0.55;
+
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        opacity: 0;
+        background: rgba(6, 8, 12, var(--yt-hl-dim));
+        -webkit-mask-image: radial-gradient(
+          ellipse var(--yt-hl-rx) var(--yt-hl-ry) at var(--yt-hl-x) var(--yt-hl-y),
+          transparent 0%,
+          transparent 52%,
+          black 88%
+        );
+        mask-image: radial-gradient(
+          ellipse var(--yt-hl-rx) var(--yt-hl-ry) at var(--yt-hl-x) var(--yt-hl-y),
+          transparent 0%,
+          transparent 52%,
+          black 88%
+        );
+      }
+      /* self-preview stand-in scene (not part of the snippet) */
+      #yt-hl-scene {
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(135deg, #2a7fff 0%, #7d5cff 100%);
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+        font-family: "Inter", ui-sans-serif, sans-serif;
+        font-weight: 700;
+        font-size: 64px;
+        color: rgba(255, 255, 255, 0.92);
+      }
+      #yt-hl-scene .box {
+        width: 420px;
+        height: 300px;
+        border-radius: 24px;
+        background: rgba(255, 255, 255, 0.16);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Self-preview wrapper. WIRING: copy the .yt-hl CSS and drop
+         <div class="yt-hl" id="yt-my-hl"></div> ABOVE the content to spotlight
+         (same region). Then:
+
+           ytHighlightIn(tl, "#yt-my-hl", 3.0, { x: "28%", y: "50%", rx: "20%", ry: "30%" });
+           ytHighlightTo(tl, "#yt-my-hl", 5.0, { x: "72%" }, 0.8);   // glide to the next target
+           ytHighlightOut(tl, "#yt-my-hl", 8.0);
+    -->
+    <div
+      id="yt-hl-root"
+      data-composition-id="yt-feather-highlight"
+      data-start="0"
+      data-duration="5"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="yt-hl-scene">
+        <div class="box">A</div>
+        <div class="box">B</div>
+      </div>
+      <div class="yt-hl" id="yt-hl-demo"></div>
+      <div
+        id="yt-hl-drv"
+        class="clip"
+        data-start="0"
+        data-duration="5"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        // ---- copy these helpers into the host script ----
+        window.ytHighlightIn = function (tl, target, at, opts) {
+          opts = opts || {};
+          var vars = { opacity: 1, duration: 0.5, ease: "power2.out" };
+          if (opts.x !== undefined) vars["--yt-hl-x"] = opts.x;
+          if (opts.y !== undefined) vars["--yt-hl-y"] = opts.y;
+          if (opts.rx !== undefined) vars["--yt-hl-rx"] = opts.rx;
+          if (opts.ry !== undefined) vars["--yt-hl-ry"] = opts.ry;
+          gsap.set(target, {
+            "--yt-hl-x": opts.x !== undefined ? opts.x : "50%",
+            "--yt-hl-y": opts.y !== undefined ? opts.y : "50%",
+            "--yt-hl-rx": opts.rx !== undefined ? opts.rx : "22%",
+            "--yt-hl-ry": opts.ry !== undefined ? opts.ry : "26%",
+          });
+          tl.to(target, { opacity: 1, duration: 0.5, ease: "power2.out" }, at);
+        };
+        window.ytHighlightTo = function (tl, target, at, opts, dur) {
+          opts = opts || {};
+          var vars = { duration: dur === undefined ? 0.8 : dur, ease: "power2.inOut" };
+          if (opts.x !== undefined) vars["--yt-hl-x"] = opts.x;
+          if (opts.y !== undefined) vars["--yt-hl-y"] = opts.y;
+          if (opts.rx !== undefined) vars["--yt-hl-rx"] = opts.rx;
+          if (opts.ry !== undefined) vars["--yt-hl-ry"] = opts.ry;
+          tl.to(target, vars, at);
+        };
+        window.ytHighlightOut = function (tl, target, at) {
+          tl.to(target, { opacity: 0, duration: 0.4, ease: "power2.in" }, at);
+        };
+
+        // Self-preview timeline: spotlight box A, glide to box B, release.
+        var tl = gsap.timeline({ paused: true });
+        window.ytHighlightIn(tl, "#yt-hl-demo", 0.5, { x: "26%", y: "50%", rx: "17%", ry: "24%" });
+        window.ytHighlightTo(tl, "#yt-hl-demo", 2.2, { x: "74%" }, 0.9);
+        window.ytHighlightOut(tl, "#yt-hl-demo", 4.2);
+        tl.set("#yt-hl-root", { visibility: "hidden" }, 4.98);
+        window.__timelines["yt-feather-highlight"] = tl;
+      })();
+    </script>
+  </body>
+</html>
+```
+
+</Accordion>
+
 {/* hf:generated-footer */}
 
 Tagged `highlight` `spotlight` `effect` `overlay`.
diff --git a/docs/catalog/components/yt-screen-warp.mdx b/docs/catalog/components/yt-screen-warp.mdx
index 5e6213c895..a9be92d70e 100644
--- a/docs/catalog/components/yt-screen-warp.mdx
+++ b/docs/catalog/components/yt-screen-warp.mdx
@@ -3,13 +3,13 @@ title: "On-Screen Display Effect"
 description: "Grid, scanline, vignette, and sheen overlay plus a 3D-warp wrapper class that makes footage read as if playing on a physical display"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/yt-screen-warp.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/yt-screen-warp.png" autoPlay muted loop playsInline />
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<iframe src="/public/catalog/preview/components/yt-screen-warp.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="On-Screen Display Effect preview" />
 
 ## Install
 
-```bash Terminal
-npx hyperframes add yt-screen-warp
-```
+<InstallCommand command="npx hyperframes add yt-screen-warp" />
 
 That writes one file: `compositions/components/yt-screen-warp.html`.
 
@@ -20,6 +20,138 @@ Open `compositions/components/yt-screen-warp.html` and copy what is inside into
 A component has no size or duration of its own. It takes both from the composition
 you paste it into.
 
+## Source
+
+<Accordion title={`yt-screen-warp.html`}>
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      /* ---- yt-screen-warp ---------------------------------------------------
+         Make footage read as a physical display: add .yt-screen-warp3d to the
+         media WRAPPER (subtle perspective), and place .yt-screen-fx overlay
+         inside it (pixel grid + scanlines + vignette + sheen). */
+      .yt-screen-warp3d {
+        transform: perspective(1400px) rotateY(-3.5deg) rotateX(1.6deg);
+      }
+      .yt-screen-fx {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        opacity: 0;
+        background:
+          /* sheen */
+          linear-gradient(115deg, rgba(255, 255, 255, 0.09) 0%, transparent 30%),
+          /* scanlines */
+          repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.1) 0 1px, transparent 1px 3px),
+          /* pixel grid */
+          repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.06) 0 1px, transparent 1px 4px);
+        box-shadow:
+          inset 0 0 90px rgba(0, 0, 0, 0.4),
+          inset 0 0 8px rgba(0, 0, 0, 0.5);
+      }
+      /* self-preview stand-in */
+      #yt-sw-wrap {
+        position: absolute;
+        left: 360px;
+        top: 190px;
+        width: 1200px;
+        height: 700px;
+        border-radius: 18px;
+        overflow: hidden;
+      }
+      #yt-sw-fill {
+        position: absolute;
+        inset: 0;
+        /* Placeholder footage: L3 of the ink over the dark ground, plus a 3px
+           achromatic hatch so the plate reads as a media surface, not an empty box. */
+        background:
+          repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 3px),
+          rgba(255, 255, 255, 0.18);
+        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-family: "Inter", ui-sans-serif, sans-serif;
+        font-weight: 700;
+        font-size: 92px;
+        color: rgba(255, 255, 255, 0.93);
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Self-preview wrapper. WIRING: copy the two CSS classes; add
+         class="yt-screen-warp3d" to your media wrapper and
+         <div class="yt-screen-fx" id="yt-my-fx"></div> as its LAST child. Then:
+
+           ytScreenOn(tl, "#yt-my-fx", 2.0);
+           ytScreenOff(tl, "#yt-my-fx", 8.0);
+    -->
+    <div
+      id="yt-sw-root"
+      data-composition-id="yt-screen-warp"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="yt-sw-wrap" class="yt-screen-warp3d">
+        <div id="yt-sw-fill">on screen</div>
+        <div class="yt-screen-fx" id="yt-sw-fx"></div>
+      </div>
+      <div
+        id="yt-sw-drv"
+        class="clip"
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        // ---- copy these helpers into the host script ----
+        window.ytScreenOn = function (tl, target, at) {
+          tl.to(target, { opacity: 1, duration: 0.5, ease: "power2.out" }, at);
+        };
+        window.ytScreenOff = function (tl, target, at) {
+          tl.to(target, { opacity: 0, duration: 0.4, ease: "power2.in" }, at);
+        };
+
+        // Self-preview timeline.
+        var tl = gsap.timeline({ paused: true });
+        gsap.set("#yt-sw-wrap", { opacity: 0, scale: 0.96 });
+        tl.to("#yt-sw-wrap", { opacity: 1, scale: 1, duration: 0.5, ease: "power2.out" }, 0.2);
+        window.ytScreenOn(tl, "#yt-sw-fx", 0.8);
+        window.ytScreenOff(tl, "#yt-sw-fx", 3.1);
+        tl.to("#yt-sw-wrap", { opacity: 0, duration: 0.35, ease: "power2.in" }, 3.5);
+        tl.set("#yt-sw-root", { visibility: "hidden" }, 3.98);
+        window.__timelines["yt-screen-warp"] = tl;
+      })();
+    </script>
+  </body>
+</html>
+```
+
+</Accordion>
+
 {/* hf:generated-footer */}
 
 Tagged `effect` `overlay` `texture`.
diff --git a/docs/catalog/components/zoom-through-transition.mdx b/docs/catalog/components/zoom-through-transition.mdx
new file mode 100644
index 0000000000..9c70d1c649
--- /dev/null
+++ b/docs/catalog/components/zoom-through-transition.mdx
@@ -0,0 +1,323 @@
+---
+title: "Zoom Through Transition"
+description: "A transition that zooms through a focal card into the next scene."
+---
+
+import { InstallCommand } from "/snippets/install-command.jsx";
+import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
+
+<VariablesExplorer
+  previewSrc="/public/catalog/preview/components/zoom-through-transition.html"
+  compositionId="zoom-through-transition"
+  compositionSrc="compositions/components/zoom-through-transition.html"
+  variables={[{"id":"from-label","type":"string","role":"content","label":"Outgoing label","description":"Caption on the outgoing scene, the one on screen when the transition starts.","default":"Before"},{"id":"to-label","type":"string","role":"content","label":"Incoming label","description":"Caption on the incoming scene, the one the timeline wipes into frame.","default":"Zoom Through Transition"},{"id":"depth","type":"enum","role":"motion","label":"Depth","description":"Multiplies how far both scenes travel and how hard the outgoing one blurs, so the push covers a shorter or longer run in the same time.","default":"standard","options":[{"value":"close","label":"Close"},{"value":"standard","label":"Standard"},{"value":"far","label":"Far"}]},{"id":"accent","type":"enum","role":"style","label":"Accent","description":"Theme token for the ring marking the incoming scene. Blue rides --accent, green --brand, violet --accent-2; each falls back to a neutral hairline.","default":"blue","options":[{"value":"blue","label":"Blue"},{"value":"green","label":"Green"},{"value":"violet","label":"Violet"}]}]}
+>
+
+```html zoom-through-transition.html
+<!doctype html>
+<!--
+  Zoom Through Transition - a scene push that wipes the incoming scene through
+  the outgoing one while the outgoing one drifts back and blurs.
+
+  Mount contract: MOUNTABLE SUB-COMPOSITION. The runtime clones only <template>
+  contents; #root fills the host box (inset: 0, container-type: size), and the
+  file registers one paused timeline under the literal "zoom-through-transition"
+  key. Variables come from window.__hyperframes.getVariables().
+
+  This file owns its motion. It previously shipped as a fragment whose only
+  executable timeline lived in demo.html, so an installed copy rendered the
+  finished pose and never moved.
+
+  Variables (declared in data-composition-variables below):
+    - from-label (string, default "Before"): caption on the outgoing scene.
+    - to-label (string, default "Zoom Through Transition"): caption on the
+      incoming scene, clipped out of frame until the wipe brings it in.
+    - depth (close | standard | far, default standard): multiplies how far both
+      scenes travel and how hard the outgoing one blurs. Every input it
+      multiplies is zero at rest, so it collapses to the shipped pose there. It
+      deliberately leaves the two scale tracks alone: the timeline drives those
+      from their own start values, which a multiplier would distort.
+    - accent (blue | green | violet, default blue): ink of the ring that marks
+      the incoming scene. Both scenes are monochrome placeholder material; the
+      ring is the one accent-coloured element. blue rides --accent, green rides
+      --brand, violet rides --accent-2, and each falls back to a neutral
+      hairline so an unthemed composition renders in black and white.
+
+  Envelope: the push starts at 0.35s (clamped to fit shorter durations), runs
+  0.9s, then holds the incoming scene for whatever is left.
+-->
+<html
+  lang="en"
+  data-composition-id="zoom-through-transition"
+  data-composition-duration="3"
+  data-composition-variables='[
+    { "id": "from-label", "type": "string", "role": "content", "label": "Outgoing label", "description": "Caption on the outgoing scene, the one on screen when the transition starts.", "default": "Before" },
+    { "id": "to-label", "type": "string", "role": "content", "label": "Incoming label", "description": "Caption on the incoming scene, the one the timeline wipes into frame.", "default": "Zoom Through Transition" },
+    { "id": "depth", "type": "enum", "role": "motion", "label": "Depth", "description": "Multiplies how far both scenes travel and how hard the outgoing one blurs, so the push covers a shorter or longer run in the same time.", "default": "standard", "options": [{ "value": "close", "label": "Close" }, { "value": "standard", "label": "Standard" }, { "value": "far", "label": "Far" }] },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Theme token for the ring marking the incoming scene. Blue rides --accent, green --brand, violet --accent-2; each falls back to a neutral hairline.", "default": "blue", "options": [{ "value": "blue", "label": "Blue" }, { "value": "green", "label": "Green" }, { "value": "violet", "label": "Violet" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Zoom Through Transition</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="zoom-through-transition" data-duration="3" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          /* Root fills the host-owned box; the scenes measure against it. */
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            background: #111827;
+          }
+
+          .hf-remocn-zoom-through-transition {
+            --hf-accent: var(--accent, rgba(255, 255, 255, 0.28));
+            --hf-l1: rgba(255, 255, 255, 0.72);
+            --hf-l3: rgba(255, 255, 255, 0.18);
+            --hf-l4: rgba(255, 255, 255, 0.08);
+            --hf-hair: rgba(255, 255, 255, 0.14);
+            --hf-ink: #111827;
+            --hf-muted: #6b7280;
+            --hf-surface: #ffffff;
+            color: var(--hf-ink);
+            font-family: Inter, system-ui, sans-serif;
+          }
+          .hf-remocn-zoom-through-transition {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            background: #111827;
+          }
+          .hf-remocn-zoom-through-transition .scene {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            font-weight: 900;
+            font-size: 13.5cqmin;
+            letter-spacing: -0.05em;
+            color: #fff;
+          }
+          .hf-remocn-zoom-through-transition .from {
+            background:
+              repeating-linear-gradient(
+                90deg,
+                rgba(255, 255, 255, 0.04) 0 1px,
+                transparent 1px 4px
+              ),
+              var(--hf-l4);
+            transform: translate(
+                calc(var(--hf-from-x, 0px) * var(--hf-depth, 1)),
+                calc(var(--hf-from-y, 0px) * var(--hf-depth, 1))
+              )
+              scale(var(--hf-from-scale, 1));
+            filter: blur(calc(var(--hf-from-blur, 0px) * var(--hf-depth, 1)));
+          }
+          .hf-remocn-zoom-through-transition .to {
+            background:
+              repeating-linear-gradient(
+                90deg,
+                rgba(255, 255, 255, 0.05) 0 1px,
+                transparent 1px 4px
+              ),
+              var(--hf-l3);
+            box-shadow: inset 0 0 0 2px var(--hf-accent);
+            transform: translate(
+                calc(var(--hf-to-x, 0px) * var(--hf-depth, 1)),
+                calc(var(--hf-to-y, 0px) * var(--hf-depth, 1))
+              )
+              scale(var(--hf-to-scale, 1));
+            clip-path: inset(
+              var(--hf-clip-top, 0%) var(--hf-clip-right, 100%) var(--hf-clip-bottom, 0%)
+                var(--hf-clip-left, 0%)
+            );
+          }
+          .hf-remocn-zoom-through-transition .fx {
+            position: absolute;
+            inset: 0;
+            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
+            mix-blend-mode: screen;
+            transform: translateX(var(--hf-fx-x, -110%));
+          }
+          .hf-remocn-zoom-through-transition .rgb {
+            position: absolute;
+            inset: 0;
+            pointer-events: none;
+            opacity: var(--hf-rgb-opacity, 0);
+            background: linear-gradient(
+              90deg,
+              rgba(239, 68, 68, 0.35),
+              transparent,
+              rgba(34, 211, 238, 0.35)
+            );
+            transform: translateX(var(--hf-rgb-x, 0px));
+          }
+        </style>
+
+        <div class="hf-remocn-zoom-through-transition">
+          >
+          <div class="scene from">Before</div>
+          <div class="scene to">Zoom Through Transition</div>
+          <div class="fx"></div>
+          <div class="rgb"></div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            // Unrecognised overrides return to their declared defaults.
+            var depths = { close: 0.55, standard: 1, far: 1.7 };
+            // Each choice routes to a different contract token so the variable stays
+            // meaningful under a theme rather than collapsing into one themed accent.
+            var HAIRLINE = "rgba(255, 255, 255, 0.28)";
+            var accents = {
+              blue: "var(--accent, " + HAIRLINE + ")",
+              green: "var(--brand, " + HAIRLINE + ")",
+              violet: "var(--accent-2, " + HAIRLINE + ")",
+            };
+
+            function pick(table, value, fallback) {
+              return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+            }
+
+            function label(value) {
+              return typeof value === "string" && value !== "" ? value : null;
+            }
+
+            var depth = depths[pick(depths, vars.depth, "standard")];
+            var accent = accents[pick(accents, vars.accent, "blue")];
+            var fromLabel = label(vars["from-label"]);
+            var toLabel = label(vars["to-label"]);
+
+            var roots = document.querySelectorAll(".hf-remocn-zoom-through-transition");
+            var mountRoot = document.getElementById("root");
+            for (var i = 0; i < roots.length; i += 1) {
+              var root = roots[i];
+              root.style.setProperty("--hf-depth", String(depth));
+              root.style.setProperty("--hf-accent", accent);
+
+              var fromScene = root.querySelector(".from");
+              var toScene = root.querySelector(".to");
+              if (fromLabel !== null && fromScene) {
+                fromScene.textContent = fromLabel;
+              }
+              if (toLabel !== null && toScene) {
+                toScene.textContent = toLabel;
+              }
+            }
+
+            // The motion used to live only in this file's demo page, so an installed
+            // copy rendered the finished pose and never moved. The timeline belongs
+            // with the markup it drives: build it here, paused, and register it under
+            // this composition's own id so the runtime seeks it frame by frame.
+            if (!mountRoot || !window.gsap) return;
+
+            var SELF = ".hf-remocn-zoom-through-transition";
+            var duration = Math.max(0.001, parseFloat(mountRoot.dataset.duration || "3"));
+            // The push reads as a transition only with a beat of the outgoing scene
+            // before it. Clamped so the wipe always lands inside the duration.
+            var PUSH = 0.9;
+            var START = Math.max(0, Math.min(0.35, duration - PUSH));
+
+            var tl = window.gsap.timeline({ paused: true });
+
+            tl.fromTo(
+              SELF + " .to",
+              { "--hf-clip-right": "100%", "--hf-to-x": "60px", "--hf-to-scale": 1.04 },
+              {
+                "--hf-clip-right": "0%",
+                "--hf-to-x": "0px",
+                "--hf-to-scale": 1,
+                duration: PUSH,
+                ease: "power3.inOut",
+              },
+              START,
+            );
+            tl.fromTo(
+              SELF + " .from",
+              { "--hf-from-x": "0px", "--hf-from-scale": 1, "--hf-from-blur": "0px" },
+              {
+                "--hf-from-x": "-70px",
+                "--hf-from-scale": 0.96,
+                "--hf-from-blur": "5px",
+                duration: PUSH,
+                ease: "power3.inOut",
+              },
+              START,
+            );
+            tl.fromTo(
+              SELF + " .fx",
+              { "--hf-fx-x": "-110%" },
+              { "--hf-fx-x": "110%", duration: 0.58, ease: "power2.inOut" },
+              START + 0.18,
+            );
+            // repeat/yoyo resolves from absolute time on every seek, so the strobe is
+            // reproducible at any frame rather than accumulated across ticks.
+            tl.fromTo(
+              SELF + " .rgb",
+              { "--hf-rgb-opacity": 0, "--hf-rgb-x": "-16px" },
+              {
+                "--hf-rgb-opacity": 1,
+                "--hf-rgb-x": "16px",
+                repeat: 3,
+                yoyo: true,
+                duration: 0.07,
+                ease: "steps(1)",
+              },
+              START + 0.32,
+            );
+
+            // HOLD: the incoming scene rests for whatever is left of the duration.
+            tl.set({}, {}, duration);
+
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines["zoom-through-transition"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+```
+
+</VariablesExplorer>
+
+## Install
+
+<InstallCommand command="npx hyperframes add zoom-through-transition" />
+
+That writes one file: `compositions/components/zoom-through-transition.html`.
+
+## Usage
+
+Open `compositions/components/zoom-through-transition.html` and paste its contents into your composition. See the comment header in the file for timeline integration guidance.
+
+{/* hf:generated-footer */}
+
+Tagged `transition-primitive` `remocn-port`.
+
+## 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/custom.css b/docs/custom.css
index 3352c918a6..8ade317b65 100644
--- a/docs/custom.css
+++ b/docs/custom.css
@@ -233,6 +233,178 @@ samp {
   font-family: "IBM Plex Mono", "SF Mono", "Fira Code", monospace;
 }
 
+/* ── Code block copy button ── */
+
+/*
+ * One button, every code block on the site, and all of it is Tailwind
+ * utilities on the element itself. The shipped bundle has no `--copy-*`
+ * custom property, no documented class and no docs.json key for it (its only
+ * button tokens, `--button-*`, belong to the <Button> component, which this
+ * is not), so there is no supported hook to prefer. `custom.css` is the
+ * documented extension point; `[data-testid]` is the handle, because a
+ * testid outlives the utility soup wrapped around it.
+ *
+ * What was wrong: the resting icon is `text-gray-400 / dark:text-white/40`,
+ * which measures 2.37:1 on a catalog page and 2.57:1 on a plain one against
+ * the surface behind it. Both are under the 3:1 that 1.4.11 asks of a
+ * control. Dark mode was the better half of the pair at 3.8:1, over the line
+ * but not by enough to see. It sat in a 26px box and did not change on
+ * hover, so a reader could not read it, could not comfortably hit it, and
+ * was never told it was a control.
+ *
+ * What is deliberately left alone: the copied state. Mintlify already swaps
+ * the clipboard for a check in the brand colour and fills a sibling
+ * `role="status"` with "Copied" — the announcement pattern — so the rules
+ * below exclude `.text-primary` instead of restyling it.
+ *
+ * Nothing here moves. The plate and the icon change colour over 100ms; there
+ * is no transform and no keyframe, the same rule the explorer above follows.
+ */
+.code-block [data-testid="copy-code-button"] {
+  position: relative;
+  /* 44x44 of pointer and touch target, given back to the layout by the same
+     9px it took, so every header keeps its height and the floating variant
+     keeps its top-3 right-4 anchor. */
+  width: 44px;
+  height: 44px;
+  margin: -9px;
+  /* The plate is ::before, so the 44px box itself is never painted — the
+     conditional `bg-gray-100` Mintlify puts on the floating variant would
+     otherwise render as a 44px slab. */
+  background-color: transparent;
+}
+
+/* The plate: 26px, the size the button used to be. ::before precedes the
+   <svg> in the box tree, so it paints under the icon without a z-index. */
+.code-block [data-testid="copy-code-button"]::before {
+  content: "";
+  position: absolute;
+  inset: 9px;
+  border-radius: 6px;
+  background-color: transparent;
+  transition: background-color 100ms ease;
+}
+
+.code-block [data-testid="copy-code-button"]:hover::before {
+  background-color: color-mix(in srgb, var(--hf-text) 10%, transparent);
+}
+
+/* `:not(.text-primary)` is the resting icon only; the check keeps Mintlify's
+   own colour. Two classes and an attribute because `dark:text-white/40` is
+   `.dark .text-white\/40`, and a shorter selector silently loses to it. */
+.code-block [data-testid="copy-code-button"] svg:not(.text-primary) {
+  color: var(--hf-text-secondary);
+  transition: color 100ms ease;
+}
+
+.code-block [data-testid="copy-code-button"]:hover svg:not(.text-primary) {
+  color: var(--hf-text);
+}
+
+/* The ring sits on the element that has focus, not on the plate, and is
+   pulled inside the 44px target so it reads as a ring around the icon
+   rather than a box floating clear of it. */
+.code-block [data-testid="copy-code-button"]:focus-visible {
+  border-radius: 14px;
+  outline: 2px solid var(--hf-brand);
+  outline-offset: -6px;
+}
+
+/* ── Install command copy button ── */
+
+/*
+ * The command itself is a bare <code>, so it inherits the chrome Mintlify puts
+ * on every inline code span: a translucent plate and a 6px radius. Inside this
+ * control that plate is a second rounded rectangle in a slightly different
+ * tone, and its two right-hand corners let the row's own background through —
+ * which reads as a gap between the field and the button. The layout was never
+ * gapped; the elements are flush (no flex gap, no margin). Drop the inherited
+ * plate and the field and the button become one surface, divided by the
+ * field's 1px border-right and nothing else. That divider lives on the field
+ * rather than on the button because the focus ring rounds the button to 14px,
+ * which would bend a border on that edge out of sight while it is focused.
+ */
+.hf-install-command code {
+  background: none;
+  border-radius: 0;
+}
+
+/*
+ * The catalog page's own copy control, `snippets/install-command.jsx`. It
+ * draws Mintlify's clipboard and check icons, so it is styled from the same
+ * tokens as the sitewide button above and kept next to it: one visual
+ * language for the two copy affordances a reader meets on the same page.
+ *
+ * The button is the whole 44px cell rather than a plate inside a larger box,
+ * because here the row it sits in has a border and a background of its own —
+ * the cell is already a shape, so lighting it is the hover.
+ */
+.hf-install-copy {
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+  width: 44px;
+  background-color: transparent;
+  transition: background-color 100ms ease;
+}
+
+.hf-install-copy:hover {
+  background-color: color-mix(in srgb, var(--hf-text) 10%, transparent);
+}
+
+/* Both icons occupy the same cell, so the swap is a crossfade in place and
+   nothing in the row moves or resizes. */
+.hf-install-copy > svg {
+  grid-area: 1 / 1;
+  color: var(--hf-text-secondary);
+  transition:
+    opacity 180ms ease,
+    color 100ms ease;
+}
+
+.hf-install-copy:hover > svg {
+  color: var(--hf-text);
+}
+
+.hf-install-copy > .hf-install-copy-check {
+  opacity: 0;
+}
+
+.hf-install-copy[data-copied="true"] > .hf-install-copy-clipboard {
+  opacity: 0;
+}
+
+/* Brand green, the colour Mintlify's own check is drawn in. The selector
+   carries one more class than the `:hover` rule above so the check keeps its
+   colour while the pointer is still on the button it was just clicked with. */
+.hf-install-copy[data-copied="true"] > .hf-install-copy-check {
+  opacity: 1;
+  color: var(--hf-brand);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hf-install-copy > svg {
+    transition-duration: 0s;
+  }
+}
+
+.hf-install-copy:focus-visible {
+  outline: 2px solid var(--hf-brand);
+  outline-offset: -6px;
+  border-radius: 14px;
+}
+
+/* The live region that says "Copied". Visually hidden rather than
+   `display: none`, which would take it out of the accessibility tree. */
+.hf-install-copy-status {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
 /* ── Selection ── */
 
 ::selection {
diff --git a/docs/docs.json b/docs/docs.json
index c51c359780..49c6c03c71 100644
--- a/docs/docs.json
+++ b/docs/docs.json
@@ -260,12 +260,14 @@
               "catalog/blocks/code-scroll",
               "catalog/blocks/code-shader-dissolve",
               "catalog/blocks/code-snippet-flight",
-              "catalog/blocks/code-typing"
+              "catalog/blocks/code-typing",
+              "catalog/components/terminal-simulator"
             ]
           },
           {
             "group": "Captions",
             "pages": [
+              "catalog/components/caption-camera-follow",
               "catalog/components/caption-clip-wipe",
               "catalog/components/caption-editorial-emphasis",
               "catalog/components/caption-emoji-pop",
@@ -311,6 +313,7 @@
               "catalog/blocks/macos-notification",
               "catalog/blocks/reddit-post",
               "catalog/blocks/spotify-card",
+              "catalog/blocks/thread-message-stack",
               "catalog/blocks/tiktok-follow",
               "catalog/blocks/x-post",
               "catalog/blocks/yt-comment-card",
@@ -378,9 +381,11 @@
           {
             "group": "Showcases",
             "pages": [
+              "catalog/components/ai-generation-canvas",
               "catalog/blocks/app-showcase",
               "catalog/blocks/apple-money-count",
               "catalog/blocks/blue-sweater-intro-video",
+              "catalog/blocks/camera-dolly-zoom",
               "catalog/blocks/code-snippet-apple-terminal-basic",
               "catalog/blocks/code-snippet-apple-terminal-clear-dark",
               "catalog/blocks/code-snippet-apple-terminal-clear-light",
@@ -405,18 +410,32 @@
               "catalog/blocks/code-snippet-solarized-light",
               "catalog/blocks/code-snippet-visual-studio-dark",
               "catalog/blocks/code-snippet-visual-studio-light",
+              "catalog/blocks/cosmic-orb",
+              "catalog/blocks/gallery-tunnel",
               "catalog/blocks/north-korea-locked-down",
               "catalog/blocks/nyc-paris-flight",
+              "catalog/blocks/oscilloscope-trace",
+              "catalog/blocks/rack-focus",
               "catalog/blocks/ui-3d-reveal",
+              "catalog/blocks/vfx-anamorphic-flare",
               "catalog/blocks/vpn-youtube-spot"
             ]
           },
           {
             "group": "Data",
             "pages": [
+              "catalog/components/animated-bar-chart",
+              "catalog/components/ascii-render-pass",
+              "catalog/components/ascii-trail-reveal",
+              "catalog/blocks/bar-chart-race",
+              "catalog/components/chart-story",
+              "catalog/components/conic-progress-ring",
               "catalog/blocks/data-chart",
+              "catalog/components/decline-chart",
+              "catalog/components/logo-wall",
               "catalog/blocks/mk-line-graph",
               "catalog/blocks/spain-map",
+              "catalog/components/star-rating-fill",
               "catalog/blocks/us-map",
               "catalog/blocks/us-map-bubble",
               "catalog/blocks/us-map-flow",
@@ -425,50 +444,251 @@
             ]
           },
           {
-            "group": "Effects",
+            "group": "Motion Primitives",
+            "pages": [
+              "catalog/components/arc-motion-path",
+              "catalog/components/avatar-group-hover",
+              "catalog/components/badge-pop",
+              "catalog/components/blur-in",
+              "catalog/components/card-resize",
+              "catalog/components/chromatic-aberration-wipe",
+              "catalog/components/dynamic-grid",
+              "catalog/components/icon-swap",
+              "catalog/blocks/lt-neon-border",
+              "catalog/components/menu-morph",
+              "catalog/components/number-pop-in",
+              "catalog/components/number-wheel",
+              "catalog/components/page-slide",
+              "catalog/components/separator",
+              "catalog/components/simulated-cursor",
+              "catalog/components/skeleton-reveal",
+              "catalog/components/slot-machine-roll",
+              "catalog/components/staggered-fade-up",
+              "catalog/components/success-check",
+              "catalog/components/svg-line-draw-loader",
+              "catalog/components/text-stagger",
+              "catalog/components/text-state-swap",
+              "catalog/components/three-orbiting-cards",
+              "catalog/components/tilt-card",
+              "catalog/components/top-down-letters",
+              "catalog/components/typewriter"
+            ]
+          },
+          {
+            "group": "Typography & Text",
             "pages": [
+              "catalog/components/blur-out-up",
+              "catalog/components/bottom-up-letters",
               "catalog/components/caption-blend-difference",
+              "catalog/components/char-slam-explode",
+              "catalog/components/focus-blur-resolve",
+              "catalog/components/headline-slam",
+              "catalog/blocks/hw-path-text",
+              "catalog/blocks/hw-title",
+              "catalog/components/inline-highlight",
+              "catalog/components/kinetic-type-swap",
+              "catalog/components/line-by-line-slide",
+              "catalog/components/line-swap",
+              "catalog/components/logo-brand-close",
+              "catalog/components/marker-highlight",
+              "catalog/components/matrix-decode",
+              "catalog/components/mk-emphasis-type",
+              "catalog/components/morph-text",
+              "catalog/components/particle-text-dissolve",
+              "catalog/components/per-word-crossfade",
+              "catalog/components/per-word-rise",
+              "catalog/components/perspective-marquee",
+              "catalog/components/rgb-glitch-text",
+              "catalog/components/scan-band",
+              "catalog/components/scramble-reveal",
+              "catalog/components/shared-axis-y",
+              "catalog/components/shared-axis-z",
+              "catalog/components/shimmer-sweep",
+              "catalog/components/soft-blur-in",
+              "catalog/blocks/split-flap-board",
+              "catalog/components/strikethrough-replace",
+              "catalog/components/text-shimmer",
+              "catalog/components/ticker-takeover",
+              "catalog/components/titlecard-calm",
+              "catalog/components/titlecard-lockup",
+              "catalog/components/tracking-in",
+              "catalog/components/variable-axis-type",
+              "catalog/components/vox-annotate",
+              "catalog/blocks/weight-wave",
+              "catalog/components/wordmark-tiles",
+              "catalog/blocks/yt-prism-title"
+            ]
+          },
+          {
+            "group": "Motion Scenes",
+            "pages": [
+              "catalog/components/aurora-drift",
+              "catalog/components/beat-accent",
+              "catalog/components/beat-pulse-background",
+              "catalog/components/constellation-hub",
+              "catalog/components/count-up",
+              "catalog/components/cta-close",
+              "catalog/components/cta-lockup",
+              "catalog/components/facet-morph",
+              "catalog/components/gesture-tap",
+              "catalog/components/gloss-sweep",
+              "catalog/components/grade-split-reveal",
+              "catalog/components/grid-card-assemble",
+              "catalog/components/light-sweep-pass",
+              "catalog/components/locked-nucleus-orbit",
+              "catalog/components/logo-sting",
+              "catalog/components/modal-morph",
+              "catalog/components/multi-device-splay",
+              "catalog/components/outline-draw",
+              "catalog/components/oversized-cursor",
+              "catalog/components/particle-image-reveal",
+              "catalog/components/physical-exit",
+              "catalog/components/radial-surround",
+              "catalog/components/scroll-feed",
+              "catalog/components/slit-scan-reveal",
+              "catalog/components/split-tilt-cards",
+              "catalog/components/spring-pop",
+              "catalog/components/stitched-text-draw",
+              "catalog/components/stop-motion-cadence",
+              "catalog/components/svg-stroke-trace",
+              "catalog/components/swipe-rail",
+              "catalog/components/testimonial-proof-card",
+              "catalog/components/touch-indicator",
+              "catalog/components/trust-strip",
+              "catalog/components/variable-font-flex",
+              "catalog/components/velocity-throw-snap",
+              "catalog/components/whiteboard-ink"
+            ]
+          },
+          {
+            "group": "Camera & 3D",
+            "pages": [
+              "catalog/blocks/camcorder-hud",
+              "catalog/components/camera-scan-gate",
+              "catalog/components/camera-shake",
+              "catalog/components/drift-hold",
+              "catalog/components/focus-rack",
+              "catalog/components/pan-stations",
+              "catalog/components/pull-back-reveal",
+              "catalog/components/push-in",
+              "catalog/components/scroll-camera-story",
+              "catalog/components/ui-focus-zoom",
+              "catalog/components/yt-camera-move"
+            ]
+          },
+          {
+            "group": "Product Demo",
+            "pages": [
+              "catalog/components/browser-device-stage",
+              "catalog/components/code-terminal-run",
+              "catalog/components/cursor-glyph-trail",
+              "catalog/components/echo-trail",
+              "catalog/components/focus-swap",
+              "catalog/components/icon-morph-beat",
+              "catalog/components/native-notification-pop",
+              "catalog/components/notification-stack",
+              "catalog/components/offset-path-traveler",
+              "catalog/components/press-ripple",
+              "catalog/components/pull-to-refresh",
+              "catalog/components/screen-flow-carousel",
+              "catalog/components/segmentation-flood",
+              "catalog/components/soft-blob-touch",
+              "catalog/components/spring-stack-shuffle",
+              "catalog/components/state-chip-rail",
+              "catalog/components/sticky-mock-swap",
+              "catalog/components/telemetry-hud",
+              "catalog/components/toggle-flip",
+              "catalog/components/tracing-beam",
+              "catalog/components/typed-prompt",
+              "catalog/components/vector-editor-rig"
+            ]
+          },
+          {
+            "group": "Texture",
+            "pages": [
+              "catalog/components/grain-field",
               "catalog/components/grain-overlay",
+              "catalog/blocks/halftone-field",
+              "catalog/components/ink-bleed-reveal",
+              "catalog/components/texture-mask-text",
+              "catalog/blocks/yt-lcd-background",
+              "catalog/components/yt-screen-warp"
+            ]
+          },
+          {
+            "group": "Effects",
+            "pages": [
+              "catalog/components/ai-prompt-flow",
+              "catalog/components/avatar-cloud",
+              "catalog/components/beat-timeline",
+              "catalog/components/before-after-wipe",
+              "catalog/components/camera-rig-depth-stack",
+              "catalog/components/checkout-flow",
+              "catalog/components/comparison-split",
+              "catalog/components/confetti",
+              "catalog/components/cut-the-curve",
+              "catalog/components/device-frame-stage",
+              "catalog/components/directional-wipe",
+              "catalog/components/fade-through",
               "catalog/components/grid-pixelate-wipe",
+              "catalog/components/halftone-dissolve",
               "catalog/components/hw-arrow",
               "catalog/components/hw-boil",
               "catalog/components/hw-box-label",
               "catalog/components/hw-callout-circle",
               "catalog/components/hw-underline",
-              "catalog/components/mk-emphasis-type",
+              "catalog/components/input-feedback",
+              "catalog/components/iris-reveal",
+              "catalog/components/keyframe-scrub-stack",
+              "catalog/components/match-cut",
+              "catalog/components/mesh-gradient-bg",
+              "catalog/components/micro-transitions",
               "catalog/components/mk-usage-arc",
-              "catalog/components/morph-text",
+              "catalog/components/morph-swap",
               "catalog/components/motion-blur",
+              "catalog/components/multiplayer-cursors",
+              "catalog/components/notification-pileup",
+              "catalog/components/onboarding-stepper-flow",
+              "catalog/components/ordered-dither-pass",
+              "catalog/components/overwhelm-surround",
+              "catalog/components/panel-reveal",
+              "catalog/components/parallax-device-dive",
               "catalog/components/parallax-unzoom",
               "catalog/components/parallax-zoom",
-              "catalog/components/shimmer-sweep",
-              "catalog/components/texture-mask-text",
+              "catalog/components/rubber-band-bumper",
+              "catalog/components/settings-toggle-flow",
+              "catalog/components/signup-flow",
+              "catalog/components/spotlight-card",
+              "catalog/components/stagger-cascade",
+              "catalog/components/stagger-lattice",
+              "catalog/components/store-badge-lockup",
+              "catalog/components/svg-mask-reveal",
+              "catalog/components/tabs-slide-indicator",
+              "catalog/components/testimonial-card",
+              "catalog/components/type-match-cut",
               "catalog/components/vignette",
-              "catalog/components/yt-camera-move",
+              "catalog/components/whip-pan-cut",
+              "catalog/components/x-follow-card",
               "catalog/components/yt-circle-pointer",
               "catalog/components/yt-feather-highlight",
-              "catalog/components/yt-screen-warp"
+              "catalog/components/zoom-through-transition"
             ]
           },
           {
             "group": "Blocks",
             "pages": [
-              "catalog/blocks/camcorder-hud",
               "catalog/blocks/flowchart",
               "catalog/blocks/flowchart-vertical",
               "catalog/blocks/hw-frame",
-              "catalog/blocks/hw-path-text",
               "catalog/blocks/hw-pipeline",
               "catalog/blocks/hw-text-cloud",
-              "catalog/blocks/hw-title",
               "catalog/blocks/logo-outro",
               "catalog/blocks/mk-background",
               "catalog/blocks/mk-placeholder-grid",
               "catalog/blocks/mk-progress-stat",
               "catalog/blocks/mk-specs-list",
-              "catalog/blocks/yt-lcd-background",
+              "catalog/blocks/spiral-galaxy",
               "catalog/blocks/yt-logo-intro",
-              "catalog/blocks/yt-prism-title",
               "catalog/blocks/yt-vertical-fill"
             ]
           }
diff --git a/docs/public/catalog-index.json b/docs/public/catalog-index.json
index 8255b52d5e..01c111c5b1 100644
--- a/docs/public/catalog-index.json
+++ b/docs/public/catalog-index.json
@@ -1,4 +1,43 @@
 [
+  {
+    "name": "ai-generation-canvas",
+    "type": "component",
+    "title": "AI Generation Canvas",
+    "description": "A prompt composer expands into a generated dashboard preview.",
+    "tags": [
+      "showcase",
+      "remocn-port",
+      "ai"
+    ],
+    "href": "/catalog/components/ai-generation-canvas",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/ai-generation-canvas.png"
+  },
+  {
+    "name": "ai-prompt-flow",
+    "type": "component",
+    "title": "AI Prompt Flow",
+    "description": "A composed AI prompt flow with prompt field, suggestion chips, generate action, and preview result card",
+    "tags": [
+      "ui-flow",
+      "remocn-port",
+      "ai",
+      "prompt"
+    ],
+    "href": "/catalog/components/ai-prompt-flow",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/ai-prompt-flow.png"
+  },
+  {
+    "name": "animated-bar-chart",
+    "type": "component",
+    "title": "Animated Bar Chart",
+    "description": "A compact data card with deterministic bar growth and value callouts.",
+    "tags": [
+      "data",
+      "remocn-port"
+    ],
+    "href": "/catalog/components/animated-bar-chart",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/animated-bar-chart.png"
+  },
   {
     "name": "app-showcase",
     "type": "block",
@@ -27,6 +66,143 @@
     "href": "/catalog/blocks/apple-money-count",
     "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/apple-money-count.png"
   },
+  {
+    "name": "arc-motion-path",
+    "type": "component",
+    "title": "Arc Motion Path",
+    "description": "A GSAP MotionPath primitive that flies a callout along a curved arc with autorotation.",
+    "tags": [
+      "video-primitive",
+      "motionpath",
+      "gsap-plugin",
+      "hyperframes-native"
+    ],
+    "href": "/catalog/components/arc-motion-path",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/arc-motion-path.png"
+  },
+  {
+    "name": "ascii-render-pass",
+    "type": "component",
+    "title": "ASCII Render Pass",
+    "description": "A slotted scene renders as live ASCII: a canvas samples the source's luminance grid (rasterized once at mount) and draws glyphs from a density ramp charset; resolution steps coarse to fine as the piece resolves, then holds legible-fine.",
+    "tags": [
+      "motion-primitive",
+      "experiment",
+      "texture",
+      "ascii",
+      "quantize"
+    ],
+    "href": "/catalog/components/ascii-render-pass",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/ascii-render-pass.png"
+  },
+  {
+    "name": "ascii-trail-reveal",
+    "type": "component",
+    "title": "ASCII Trail Reveal",
+    "description": "An authored S-curve sweeps through a deterministic ASCII grid, flipping cells away to reveal a labeled panel.",
+    "tags": [
+      "motion-primitive",
+      "intro",
+      "reveal",
+      "ascii",
+      "trail",
+      "grid"
+    ],
+    "href": "/catalog/components/ascii-trail-reveal",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/ascii-trail-reveal.png"
+  },
+  {
+    "name": "aurora-drift",
+    "type": "component",
+    "title": "Aurora Drift",
+    "description": "Three soft accent-derived aurora fields drift in an exact ambient loop over a deep base and faint vignette.",
+    "tags": [
+      "motion-primitive",
+      "background",
+      "aurora",
+      "gradient",
+      "ambient",
+      "loopable"
+    ],
+    "href": "/catalog/components/aurora-drift",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/aurora-drift.png"
+  },
+  {
+    "name": "avatar-cloud",
+    "type": "component",
+    "title": "Avatar Cloud",
+    "description": "Lettermark avatars populate a loose elliptical cloud while fine SVG links draw between the community and its central proof label.",
+    "tags": [
+      "effects",
+      "avatars",
+      "community",
+      "network",
+      "social-proof",
+      "prove"
+    ],
+    "href": "/catalog/components/avatar-cloud",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/avatar-cloud.png"
+  },
+  {
+    "name": "avatar-group-hover",
+    "type": "component",
+    "title": "Avatar Group Hover",
+    "description": "A distance-falloff avatar group lift with bouncy hover return",
+    "tags": [
+      "video-primitive",
+      "transition-primitive",
+      "transitions-dev-port",
+      "avatar",
+      "hover"
+    ],
+    "href": "/catalog/components/avatar-group-hover",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/avatar-group-hover.png"
+  },
+  {
+    "name": "badge-pop",
+    "type": "component",
+    "title": "Badge Pop",
+    "description": "A transitions.dev-inspired notification badge pop with elastic scale and count reveal",
+    "tags": [
+      "video-primitive",
+      "transition-primitive",
+      "transitions-dev-port",
+      "badge",
+      "microinteraction"
+    ],
+    "href": "/catalog/components/badge-pop",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/badge-pop.png"
+  },
+  {
+    "name": "bar-chart-race",
+    "type": "block",
+    "title": "Bar Chart Race",
+    "description": "Ranked bars grow and overtake each other as a time series advances, with the axis rescaling as values climb and the accent handing over to whoever leads",
+    "tags": [
+      "data",
+      "chart",
+      "statistics",
+      "ranking"
+    ],
+    "href": "/catalog/blocks/bar-chart-race",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/bar-chart-race.png"
+  },
+  {
+    "name": "beat-accent",
+    "type": "component",
+    "title": "Beat Accent",
+    "description": "A single music-hit sting: impact flash, micro scale-pulse on the subject, immediate decay.",
+    "tags": [
+      "motion-primitive",
+      "effects",
+      "burst",
+      "sting",
+      "emphasize",
+      "impact"
+    ],
+    "href": "/catalog/components/beat-accent",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/beat-accent.png"
+  },
   {
     "name": "beat-freeze-cut",
     "type": "block",
@@ -41,6 +217,54 @@
     "href": "/catalog/blocks/beat-freeze-cut",
     "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/beat-freeze-cut.png"
   },
+  {
+    "name": "beat-pulse-background",
+    "type": "component",
+    "title": "Beat Pulse Background",
+    "description": "An accent-derived backdrop pulses its glow intensity and saturation on a deterministic, supplied beat grid.",
+    "tags": [
+      "motion-primitive",
+      "background",
+      "beat",
+      "pulse",
+      "rhythmic",
+      "reactive"
+    ],
+    "href": "/catalog/components/beat-pulse-background",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/beat-pulse-background.png"
+  },
+  {
+    "name": "beat-timeline",
+    "type": "component",
+    "title": "Beat Timeline",
+    "description": "A paused master-timeline orchestration spine that pins titled beat rows to evenly spaced named labels. Each row enters on its label, holds with the sequence, then exits with the group.",
+    "tags": [
+      "orchestration",
+      "transitions",
+      "sequencing",
+      "bridge",
+      "timeline"
+    ],
+    "href": "/catalog/components/beat-timeline",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/beat-timeline.png"
+  },
+  {
+    "name": "before-after-wipe",
+    "type": "component",
+    "title": "Before After Wipe",
+    "description": "Two full-bleed content slots compare before and after states as a persistent divider wipes the after layer over the before layer and rests at a configurable split. Callers fill the named before/after slot panels; token-styled defaults render when a slot is left empty.",
+    "tags": [
+      "prop",
+      "ui-props",
+      "compare",
+      "holdable",
+      "before-after",
+      "wipe",
+      "slots"
+    ],
+    "href": "/catalog/components/before-after-wipe",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/before-after-wipe.png"
+  },
   {
     "name": "blue-sweater-intro-video",
     "type": "block",
@@ -55,6 +279,64 @@
     "href": "/catalog/blocks/blue-sweater-intro-video",
     "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/blue-sweater-intro-video.png"
   },
+  {
+    "name": "blur-in",
+    "type": "component",
+    "title": "Blur In",
+    "description": "An Operator Black word-level content reveal that resolves its own text from controlled blur",
+    "tags": [
+      "video-primitive",
+      "remocn-port",
+      "blur-in",
+      "text-effect"
+    ],
+    "href": "/catalog/components/blur-in",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/blur-in.png"
+  },
+  {
+    "name": "blur-out-up",
+    "type": "component",
+    "title": "Blur Out Up",
+    "description": "Words arrive clean and depart upward with increasing blur for airy exits.",
+    "tags": [
+      "motion-primitive",
+      "remocn-port",
+      "typography"
+    ],
+    "href": "/catalog/components/blur-out-up",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/blur-out-up.png"
+  },
+  {
+    "name": "bottom-up-letters",
+    "type": "component",
+    "title": "Bottom Up Letters",
+    "description": "Splits text into letters and reveals each glyph from below with deterministic staggered timing",
+    "tags": [
+      "motion-primitive",
+      "text",
+      "letters",
+      "reveal"
+    ],
+    "href": "/catalog/components/bottom-up-letters",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/bottom-up-letters.png"
+  },
+  {
+    "name": "browser-device-stage",
+    "type": "component",
+    "title": "Browser Device Stage",
+    "description": "A generic app surface in token-native device chrome (browser, window, or phone). The screen is a slot for caller img/video/HTML with a token-styled skeleton default; one settle entrance, a readable hold, and an optional screen swap.",
+    "tags": [
+      "stage",
+      "product-demo",
+      "device",
+      "browser",
+      "phone",
+      "slot",
+      "chrome"
+    ],
+    "href": "/catalog/components/browser-device-stage",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/browser-device-stage.png"
+  },
   {
     "name": "camcorder-hud",
     "type": "block",
@@ -72,6 +354,65 @@
     "href": "/catalog/blocks/camcorder-hud",
     "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/camcorder-hud.png"
   },
+  {
+    "name": "camera-dolly-zoom",
+    "type": "block",
+    "title": "Dolly Zoom (Vertigo Shot)",
+    "description": "Camera tracks toward or away from the subject while the field of view changes the opposite way, so the subject holds its frame size while the background collapses behind it or rushes in. Focal length is solved from dolly distance every frame against d * tan(FOV/2) = const, not keyframed beside it. Requires depth: the subject sits on the z = 0 plane and the content behind it must be layered or genuinely 3D (translateZ at two or more distinct depths) -- a flat element gains nothing from this move.",
+    "tags": [
+      "camera",
+      "depth",
+      "3d",
+      "cinematic"
+    ],
+    "href": "/catalog/blocks/camera-dolly-zoom",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/camera-dolly-zoom.png"
+  },
+  {
+    "name": "camera-rig-depth-stack",
+    "type": "component",
+    "title": "Camera Rig Depth Stack",
+    "description": "A 3D camera-rig-style card stack with depth, parallax, and focus shift.",
+    "tags": [
+      "advanced-motion",
+      "hyperframes-native"
+    ],
+    "href": "/catalog/components/camera-rig-depth-stack",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/camera-rig-depth-stack.png"
+  },
+  {
+    "name": "camera-scan-gate",
+    "type": "component",
+    "title": "Camera Scan Gate",
+    "description": "A camera and QR recognition moment with a viewfinder sweep, bracket lock, confirmation pulse, and verified next beat.",
+    "tags": [
+      "prop",
+      "ui-props",
+      "camera",
+      "qr",
+      "scan",
+      "recognition",
+      "interaction",
+      "demonstrate"
+    ],
+    "href": "/catalog/components/camera-scan-gate",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/camera-scan-gate.png"
+  },
+  {
+    "name": "camera-shake",
+    "type": "component",
+    "title": "Camera Shake",
+    "description": "Procedural handheld, telephoto and rig camera shake for any wrapper: nine measured profiles with per-lens projection, closed-form and seek-safe",
+    "tags": [
+      "camera",
+      "shake",
+      "handheld",
+      "effect",
+      "cinematic"
+    ],
+    "href": "/catalog/components/camera-shake",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/camera-shake.png"
+  },
   {
     "name": "caption-blend-difference",
     "type": "component",
@@ -88,6 +429,22 @@
     "href": "/catalog/components/caption-blend-difference",
     "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-blend-difference.png"
   },
+  {
+    "name": "caption-camera-follow",
+    "type": "component",
+    "title": "Camera Follow Captions",
+    "description": "One sentence written across a world far larger than the frame. Each word is sized against everything already written, so the block grows geometrically and the camera pulls back at a steady rate to keep landing the new word at the same size. Old words stay lit and simply become small.",
+    "tags": [
+      "captions",
+      "caption-style",
+      "camera",
+      "typography",
+      "motion-primitive",
+      "portrait"
+    ],
+    "href": "/catalog/components/caption-camera-follow",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-camera-follow.png"
+  },
   {
     "name": "caption-clip-wipe",
     "type": "component",
@@ -308,6 +665,83 @@
     "href": "/catalog/components/caption-weight-shift",
     "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-weight-shift.png"
   },
+  {
+    "name": "card-resize",
+    "type": "component",
+    "title": "Card Resize",
+    "description": "A transitions.dev-inspired card resize primitive that expands a compact card into a detail panel",
+    "tags": [
+      "video-primitive",
+      "transition-primitive",
+      "transitions-dev-port",
+      "card",
+      "layout"
+    ],
+    "href": "/catalog/components/card-resize",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/card-resize.png"
+  },
+  {
+    "name": "char-slam-explode",
+    "type": "component",
+    "title": "Char Slam Explode",
+    "description": "Headline glyphs hold in a deterministic scatter, then reassemble with an overshooting slam and a three-frame landing shake.",
+    "tags": [
+      "motion-primitive",
+      "typography",
+      "text-treatment",
+      "scatter",
+      "slam",
+      "impact"
+    ],
+    "href": "/catalog/components/char-slam-explode",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/char-slam-explode.png"
+  },
+  {
+    "name": "chart-story",
+    "type": "component",
+    "title": "Chart Story",
+    "description": "One chart builds from data in reading order and lands the exact supplied values: staggered bars, a left-to-right line with area fill, a sweeping donut, or filling progress bars, with an accented value callout on the emphasized datum.",
+    "tags": [
+      "motion-primitive",
+      "proof",
+      "stats",
+      "chart",
+      "bars",
+      "line",
+      "donut",
+      "progress",
+      "deterministic"
+    ],
+    "href": "/catalog/components/chart-story",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/chart-story.png"
+  },
+  {
+    "name": "checkout-flow",
+    "type": "component",
+    "title": "Checkout Flow",
+    "description": "A composed checkout flow with plan summary, payment field rows, total, and purchase action",
+    "tags": [
+      "ui-flow",
+      "remocn-port",
+      "checkout",
+      "commerce"
+    ],
+    "href": "/catalog/components/checkout-flow",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/checkout-flow.png"
+  },
+  {
+    "name": "chromatic-aberration-wipe",
+    "type": "component",
+    "title": "Chromatic Aberration Wipe",
+    "description": "A fast slide wipe with RGB channel split on peak frames.",
+    "tags": [
+      "video-primitive",
+      "transition-primitive",
+      "remocn-port"
+    ],
+    "href": "/catalog/components/chromatic-aberration-wipe",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/chromatic-aberration-wipe.png"
+  },
   {
     "name": "chromatic-radial-split",
     "type": "block",
@@ -365,7 +799,7 @@
     "name": "code-highlight",
     "type": "block",
     "title": "Code Highlight Sweep",
-    "description": "A highlight band sweeps across a target line while the surrounding context dims — draws the eye to one line. `line` is 0-based: `line: 1` targets the second displayed line (unlike code-scroll, whose target is 1-based).",
+    "description": "A highlight band sweeps across a target line while the surrounding context dims — draws the eye to one line.",
     "tags": [
       "code",
       "code-animation",
@@ -448,7 +882,8 @@
       "apple",
       "apple-terminal"
     ],
-    "href": "/catalog/blocks/code-snippet-apple-terminal-basic"
+    "href": "/catalog/blocks/code-snippet-apple-terminal-basic",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-basic.png"
   },
   {
     "name": "code-snippet-apple-terminal-clear-dark",
@@ -463,7 +898,8 @@
       "apple",
       "apple-terminal"
     ],
-    "href": "/catalog/blocks/code-snippet-apple-terminal-clear-dark"
+    "href": "/catalog/blocks/code-snippet-apple-terminal-clear-dark",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-clear-dark.png"
   },
   {
     "name": "code-snippet-apple-terminal-clear-light",
@@ -478,7 +914,8 @@
       "apple",
       "apple-terminal"
     ],
-    "href": "/catalog/blocks/code-snippet-apple-terminal-clear-light"
+    "href": "/catalog/blocks/code-snippet-apple-terminal-clear-light",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-clear-light.png"
   },
   {
     "name": "code-snippet-apple-terminal-grass",
@@ -493,7 +930,8 @@
       "apple",
       "apple-terminal"
     ],
-    "href": "/catalog/blocks/code-snippet-apple-terminal-grass"
+    "href": "/catalog/blocks/code-snippet-apple-terminal-grass",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-grass.png"
   },
   {
     "name": "code-snippet-apple-terminal-homebrew",
@@ -508,7 +946,8 @@
       "apple",
       "apple-terminal"
     ],
-    "href": "/catalog/blocks/code-snippet-apple-terminal-homebrew"
+    "href": "/catalog/blocks/code-snippet-apple-terminal-homebrew",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-homebrew.png"
   },
   {
     "name": "code-snippet-apple-terminal-man-page",
@@ -523,7 +962,8 @@
       "apple",
       "apple-terminal"
     ],
-    "href": "/catalog/blocks/code-snippet-apple-terminal-man-page"
+    "href": "/catalog/blocks/code-snippet-apple-terminal-man-page",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-man-page.png"
   },
   {
     "name": "code-snippet-apple-terminal-novel",
@@ -538,7 +978,8 @@
       "apple",
       "apple-terminal"
     ],
-    "href": "/catalog/blocks/code-snippet-apple-terminal-novel"
+    "href": "/catalog/blocks/code-snippet-apple-terminal-novel",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-novel.png"
   },
   {
     "name": "code-snippet-apple-terminal-ocean",
@@ -553,7 +994,8 @@
       "apple",
       "apple-terminal"
     ],
-    "href": "/catalog/blocks/code-snippet-apple-terminal-ocean"
+    "href": "/catalog/blocks/code-snippet-apple-terminal-ocean",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-ocean.png"
   },
   {
     "name": "code-snippet-apple-terminal-pro",
@@ -568,7 +1010,8 @@
       "apple",
       "apple-terminal"
     ],
-    "href": "/catalog/blocks/code-snippet-apple-terminal-pro"
+    "href": "/catalog/blocks/code-snippet-apple-terminal-pro",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-pro.png"
   },
   {
     "name": "code-snippet-apple-terminal-red-sands",
@@ -583,7 +1026,8 @@
       "apple",
       "apple-terminal"
     ],
-    "href": "/catalog/blocks/code-snippet-apple-terminal-red-sands"
+    "href": "/catalog/blocks/code-snippet-apple-terminal-red-sands",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-red-sands.png"
   },
   {
     "name": "code-snippet-apple-terminal-silver-aerogel",
@@ -598,7 +1042,8 @@
       "apple",
       "apple-terminal"
     ],
-    "href": "/catalog/blocks/code-snippet-apple-terminal-silver-aerogel"
+    "href": "/catalog/blocks/code-snippet-apple-terminal-silver-aerogel",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-silver-aerogel.png"
   },
   {
     "name": "code-snippet-apple-terminal-solid-colors",
@@ -613,7 +1058,8 @@
       "apple",
       "apple-terminal"
     ],
-    "href": "/catalog/blocks/code-snippet-apple-terminal-solid-colors"
+    "href": "/catalog/blocks/code-snippet-apple-terminal-solid-colors",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-solid-colors.png"
   },
   {
     "name": "code-snippet-dark-2026",
@@ -797,6 +1243,21 @@
     "href": "/catalog/blocks/code-snippet-visual-studio-light",
     "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-visual-studio-light.png"
   },
+  {
+    "name": "code-terminal-run",
+    "type": "component",
+    "title": "Code Terminal Run",
+    "description": "A token-chrome terminal panel runs one command: the prompt line types deterministically behind an integer-cycle caret, executes after a beat, and output lines print one per cue before a fresh prompt appears.",
+    "tags": [
+      "motion-primitive",
+      "product-demo",
+      "terminal",
+      "typing",
+      "deterministic"
+    ],
+    "href": "/catalog/components/code-terminal-run",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/code-terminal-run.png"
+  },
   {
     "name": "code-typing",
     "type": "block",
@@ -811,6 +1272,97 @@
     "href": "/catalog/blocks/code-typing",
     "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-typing.png"
   },
+  {
+    "name": "comparison-split",
+    "type": "component",
+    "title": "Comparison Split",
+    "description": "Two full-bleed panels compare before and after states as a persistent divider wipes the vivid after layer over the muted before layer and rests at a configurable split.",
+    "tags": [
+      "prop",
+      "ui-props",
+      "compare",
+      "holdable",
+      "before-after",
+      "wipe"
+    ],
+    "href": "/catalog/components/comparison-split",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/comparison-split.png"
+  },
+  {
+    "name": "confetti",
+    "type": "component",
+    "title": "Confetti",
+    "description": "A deterministic celebration burst with seeded particles and gravity.",
+    "tags": [
+      "effect",
+      "remocn-port"
+    ],
+    "href": "/catalog/components/confetti",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/confetti.png"
+  },
+  {
+    "name": "conic-progress-ring",
+    "type": "component",
+    "title": "Conic Progress Ring",
+    "description": "A token-driven conic progress ring whose angular fill and center count settle together from one registered percentage.",
+    "tags": [
+      "data",
+      "progress",
+      "ring",
+      "conic-gradient",
+      "prove",
+      "demonstrate"
+    ],
+    "href": "/catalog/components/conic-progress-ring",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/conic-progress-ring.png"
+  },
+  {
+    "name": "constellation-hub",
+    "type": "component",
+    "title": "Constellation Hub",
+    "description": "Feature nodes brighten in narration order as real-length SVG connectors draw outward from a fixed central hub, then settle into one lockup.",
+    "tags": [
+      "motion-primitive",
+      "feature-tour",
+      "hub",
+      "nodes",
+      "connector",
+      "reveal"
+    ],
+    "href": "/catalog/components/constellation-hub",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/constellation-hub.png"
+  },
+  {
+    "name": "cosmic-orb",
+    "type": "block",
+    "title": "Cosmic Orb",
+    "description": "An iridescent soap-bubble planet: a slowly spinning sphere of nebula bands, dust lanes and twinkling stars wrapped in a refracting glass limb with chromatic aberration at the edge.",
+    "tags": [
+      "webgl",
+      "shader",
+      "background",
+      "showcase",
+      "3d"
+    ],
+    "href": "/catalog/blocks/cosmic-orb",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/cosmic-orb.png"
+  },
+  {
+    "name": "count-up",
+    "type": "component",
+    "title": "Count Up",
+    "description": "A token-native stat counter that eases between values and lands with a restrained scale pulse.",
+    "tags": [
+      "motion-primitive",
+      "proof",
+      "stats",
+      "counter",
+      "number",
+      "deterministic"
+    ],
+    "href": "/catalog/components/count-up",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/count-up.png"
+  },
   {
     "name": "cross-warp-morph",
     "type": "block",
@@ -823,6 +1375,70 @@
     "href": "/catalog/blocks/cross-warp-morph",
     "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/cross-warp-morph.png"
   },
+  {
+    "name": "cta-close",
+    "type": "component",
+    "title": "CTA Close",
+    "description": "A display-scale action line lands per word and fills the frame with air, one generous CTA capsule pops beneath it with a single overshoot, and the finished close holds completely still.",
+    "tags": [
+      "motion-primitive",
+      "ui-props",
+      "cta",
+      "end-card",
+      "close",
+      "ask"
+    ],
+    "href": "/catalog/components/cta-close",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/cta-close.png"
+  },
+  {
+    "name": "cta-lockup",
+    "type": "component",
+    "title": "CTA Lockup",
+    "description": "A canonical closing lockup that reveals an action line, pops in an accent CTA capsule, settles supporting microcopy, and holds with confidence.",
+    "tags": [
+      "motion-primitive",
+      "ui-props",
+      "cta",
+      "end-card",
+      "lockup",
+      "ask"
+    ],
+    "href": "/catalog/components/cta-lockup",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/cta-lockup.png"
+  },
+  {
+    "name": "cursor-glyph-trail",
+    "type": "component",
+    "title": "Cursor Glyph Trail",
+    "description": "An actor travels an authored path depositing small dithered glyphs at its past positions, each popping in and decaying in place, stamp rate scaling with the actor's velocity.",
+    "tags": [
+      "motion-primitive",
+      "demonstrate",
+      "trail",
+      "cursor",
+      "glyphs",
+      "deterministic"
+    ],
+    "href": "/catalog/components/cursor-glyph-trail",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/cursor-glyph-trail.png"
+  },
+  {
+    "name": "cut-the-curve",
+    "type": "component",
+    "title": "Cut the Curve",
+    "description": "A velocity-matched directional hard cut: the outgoing subject accelerates with power4.in, swaps at peak velocity, and the incoming subject continues in the same direction with power4.out.",
+    "tags": [
+      "transition",
+      "directional-cut",
+      "velocity-match",
+      "whip",
+      "bridge",
+      "demonstrate"
+    ],
+    "href": "/catalog/components/cut-the-curve",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/cut-the-curve.png"
+  },
   {
     "name": "data-chart",
     "type": "block",
@@ -837,22 +1453,113 @@
     "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/data-chart.png"
   },
   {
-    "name": "domain-warp-dissolve",
-    "type": "block",
-    "title": "Domain Warp Dissolve",
-    "description": "Shader transition with fractal noise domain warping",
+    "name": "decline-chart",
+    "type": "component",
+    "title": "Decline Chart",
+    "description": "A metric line draws downward as its value counts down and the ambient background darkens in lockstep.",
     "tags": [
-      "transition",
-      "shader"
+      "motion-primitive",
+      "data",
+      "chart",
+      "decline",
+      "metric",
+      "problem"
     ],
-    "href": "/catalog/blocks/domain-warp-dissolve",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/domain-warp-dissolve.png"
+    "href": "/catalog/components/decline-chart",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/decline-chart.png"
   },
   {
-    "name": "editorial-flash-overlay",
-    "type": "block",
-    "title": "Editorial Flash Overlay",
-    "description": "Finite neutral-warm light layers for a seek-safe camera-flash cut or social reveal",
+    "name": "device-frame-stage",
+    "type": "component",
+    "title": "Device Frame Stage",
+    "description": "A phone or tablet mockup staged as a physical scene prop with a screen slot for arbitrary reconstructed UI, rising onto the stage, settling, and holding an idle float",
+    "tags": [
+      "prop",
+      "device",
+      "mobile",
+      "tablet",
+      "ui-props",
+      "holdable"
+    ],
+    "href": "/catalog/components/device-frame-stage",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/device-frame-stage.png"
+  },
+  {
+    "name": "directional-wipe",
+    "type": "component",
+    "title": "Directional Wipe",
+    "description": "A directional scene push that slides one panel over another.",
+    "tags": [
+      "transition-primitive",
+      "remocn-port"
+    ],
+    "href": "/catalog/components/directional-wipe",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/directional-wipe.png"
+  },
+  {
+    "name": "domain-warp-dissolve",
+    "type": "block",
+    "title": "Domain Warp Dissolve",
+    "description": "Shader transition with fractal noise domain warping",
+    "tags": [
+      "transition",
+      "shader"
+    ],
+    "href": "/catalog/blocks/domain-warp-dissolve",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/domain-warp-dissolve.png"
+  },
+  {
+    "name": "drift-hold",
+    "type": "component",
+    "title": "Drift Hold",
+    "description": "A centered content card stays subtly alive through loop-exact rotation, scale breathing, and a slow light sweep.",
+    "tags": [
+      "motion-primitive",
+      "camera",
+      "ambient",
+      "drift",
+      "hold",
+      "loopable"
+    ],
+    "href": "/catalog/components/drift-hold",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/drift-hold.png"
+  },
+  {
+    "name": "dynamic-grid",
+    "type": "component",
+    "title": "Dynamic Grid",
+    "description": "A responsive animated grid background driven by CSS variables for SaaS, code, and data scenes",
+    "tags": [
+      "video-primitive",
+      "motion-primitive",
+      "background",
+      "grid",
+      "ui"
+    ],
+    "href": "/catalog/components/dynamic-grid",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/dynamic-grid.png"
+  },
+  {
+    "name": "echo-trail",
+    "type": "component",
+    "title": "Echo Trail",
+    "description": "A moving element renders with N ghosted copies of itself at t minus i times delta, opacity stepped down per ghost; one traversal, echoes collapsing into the settled element at rest.",
+    "tags": [
+      "motion-primitive",
+      "demonstrate",
+      "trail",
+      "onion-skin",
+      "ghosts",
+      "deterministic"
+    ],
+    "href": "/catalog/components/echo-trail",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/echo-trail.png"
+  },
+  {
+    "name": "editorial-flash-overlay",
+    "type": "block",
+    "title": "Editorial Flash Overlay",
+    "description": "Finite neutral-warm light layers for a seek-safe camera-flash cut or social reveal",
     "tags": [
       "flash",
       "editorial",
@@ -865,6 +1572,36 @@
     "href": "/catalog/blocks/editorial-flash-overlay",
     "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/editorial-flash-overlay.png"
   },
+  {
+    "name": "facet-morph",
+    "type": "component",
+    "title": "Facet Morph",
+    "description": "A faceted low-poly mass of 36 triangles continuously reshapes between three authored silhouettes (blob, mark, badge) with per-facet flat shading that recomputes as the vertices move. Light reads from the upper left; lit facets lift toward a pale accent-tinted tone while turned-away facets fall toward near-black. One calm continuous morph, then a settled hold.",
+    "tags": [
+      "motion-primitive",
+      "intro",
+      "morph",
+      "low-poly",
+      "svg",
+      "deterministic"
+    ],
+    "href": "/catalog/components/facet-morph",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/facet-morph.png"
+  },
+  {
+    "name": "fade-through",
+    "type": "component",
+    "title": "Fade Through",
+    "description": "A calm transition primitive that fades one layer out, passes through a wash, and reveals the next layer",
+    "tags": [
+      "motion-primitive",
+      "transition",
+      "fade",
+      "scene"
+    ],
+    "href": "/catalog/components/fade-through",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/fade-through.png"
+  },
   {
     "name": "flash-through-white",
     "type": "block",
@@ -904,6 +1641,52 @@
     "href": "/catalog/blocks/flowchart-vertical",
     "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flowchart-vertical.png"
   },
+  {
+    "name": "focus-blur-resolve",
+    "type": "component",
+    "title": "Focus Blur Resolve",
+    "description": "A premium focus pull from heavy blur to crisp text, then a soft blur-out exit.",
+    "tags": [
+      "motion-primitive",
+      "remocn-port",
+      "typography"
+    ],
+    "href": "/catalog/components/focus-blur-resolve",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/focus-blur-resolve.png"
+  },
+  {
+    "name": "focus-rack",
+    "type": "component",
+    "title": "Focus Rack",
+    "description": "Focus shifts once between two cards at different apparent depths through synchronized blur, dimming, scale, and parallax.",
+    "tags": [
+      "motion-primitive",
+      "camera",
+      "focus",
+      "focus-rack",
+      "depth",
+      "parallax",
+      "emphasize"
+    ],
+    "href": "/catalog/components/focus-rack",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/focus-rack.png"
+  },
+  {
+    "name": "focus-swap",
+    "type": "component",
+    "title": "Focus Swap",
+    "description": "Moves attention between two side-by-side cards as one recedes with scale, blur, and dimming while the other advances to full focus.",
+    "tags": [
+      "effect",
+      "ui-props",
+      "focus",
+      "blur",
+      "attention",
+      "demonstrate"
+    ],
+    "href": "/catalog/components/focus-swap",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/focus-swap.png"
+  },
   {
     "name": "freeze-frame-dressing",
     "type": "block",
@@ -921,6 +1704,37 @@
     "href": "/catalog/blocks/freeze-frame-dressing",
     "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/freeze-frame-dressing.png"
   },
+  {
+    "name": "gallery-tunnel",
+    "type": "block",
+    "title": "Gallery Tunnel",
+    "description": "An infinite corridor of panels: a square tunnel receding to a vanishing point, its floor, ceiling and walls tiled with saturated colour slabs and caller-supplied images that swell toward camera and exit past you, the far end dissolving into fog.",
+    "tags": [
+      "webgl",
+      "3d",
+      "background",
+      "showcase",
+      "depth",
+      "loop"
+    ],
+    "href": "/catalog/blocks/gallery-tunnel",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/gallery-tunnel.png"
+  },
+  {
+    "name": "gesture-tap",
+    "type": "component",
+    "title": "Gesture Tap",
+    "description": "A contact circle taps a mobile pill button, releases it into a new labeled accent state, and lifts away.",
+    "tags": [
+      "motion-primitive",
+      "gesture",
+      "tap",
+      "interaction",
+      "ui-props"
+    ],
+    "href": "/catalog/components/gesture-tap",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/gesture-tap.png"
+  },
   {
     "name": "glitch",
     "type": "block",
@@ -933,6 +1747,55 @@
     "href": "/catalog/blocks/glitch",
     "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/glitch.png"
   },
+  {
+    "name": "gloss-sweep",
+    "type": "component",
+    "title": "Gloss Sweep",
+    "description": "A card lands with a restrained slam, catches one diagonal specular gloss, and holds perfectly still.",
+    "tags": [
+      "motion-primitive",
+      "celebration",
+      "gloss",
+      "card",
+      "badge",
+      "payoff"
+    ],
+    "href": "/catalog/components/gloss-sweep",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/gloss-sweep.png"
+  },
+  {
+    "name": "grade-split-reveal",
+    "type": "component",
+    "title": "Grade Split Reveal",
+    "description": "The same picture twice, one flat and one finished, with a hard edge sweeping between them. It stops in the middle long enough to compare, then commits and the graded look takes the frame. Both looks are real HyperFrames color grading run through the WebGL shader, so the preview and the render match.",
+    "tags": [
+      "color-grading",
+      "media",
+      "compare",
+      "reveal",
+      "motion-primitive",
+      "grade"
+    ],
+    "href": "/catalog/components/grade-split-reveal",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/grade-split-reveal.png"
+  },
+  {
+    "name": "grain-field",
+    "type": "component",
+    "title": "Grain Field",
+    "description": "A clearly visible accent-tinted dot field drifts over a subtle luminance gradient in an exact ambient loop.",
+    "tags": [
+      "motion-primitive",
+      "background",
+      "grain",
+      "dots",
+      "texture",
+      "ambient",
+      "loopable"
+    ],
+    "href": "/catalog/components/grain-field",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/grain-field.png"
+  },
   {
     "name": "grain-overlay",
     "type": "component",
@@ -959,6 +1822,23 @@
     "href": "/catalog/blocks/gravitational-lens",
     "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/gravitational-lens.png"
   },
+  {
+    "name": "grid-card-assemble",
+    "type": "component",
+    "title": "Grid Card Assemble",
+    "description": "N capability cards (thin-line icon that draws on, mono label, optional muted body) stagger-assemble into a grid or vertical list with a fade plus short slide into slot, then hold perfectly still.",
+    "tags": [
+      "motion-primitive",
+      "layout",
+      "grid",
+      "list",
+      "stagger",
+      "assemble",
+      "feature-tour"
+    ],
+    "href": "/catalog/components/grid-card-assemble",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/grid-card-assemble.png"
+  },
   {
     "name": "grid-pixelate-wipe",
     "type": "component",
@@ -973,6 +1853,52 @@
     "href": "/catalog/components/grid-pixelate-wipe",
     "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/grid-pixelate-wipe.png"
   },
+  {
+    "name": "halftone-dissolve",
+    "type": "component",
+    "title": "Halftone Dissolve",
+    "description": "Scene A dissolves into scene B through a growing halftone dot field: accent ink dots pop onto a fixed grid smallest-first, each opens into a window onto B, until the windows merge and B fully replaces A.",
+    "tags": [
+      "motion-primitive",
+      "transition",
+      "texture",
+      "halftone",
+      "dissolve"
+    ],
+    "href": "/catalog/components/halftone-dissolve",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/halftone-dissolve.png"
+  },
+  {
+    "name": "halftone-field",
+    "type": "block",
+    "title": "Halftone Field",
+    "description": "A full-bleed halftone light field: a grid of dots whose size and colour track a slow flowing simplex-noise field, so broad bands of light sweep across a mostly-black frame like a giant LED wall showing a plasma. Built to run under type.",
+    "tags": [
+      "webgl",
+      "shader",
+      "background",
+      "texture",
+      "halftone"
+    ],
+    "href": "/catalog/blocks/halftone-field",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/halftone-field.png"
+  },
+  {
+    "name": "headline-slam",
+    "type": "component",
+    "title": "Headline Slam",
+    "description": "A heavyweight headline scales down into frame, lands with a deterministic three-frame shake, holds with subtle drift, and whips upward on exit.",
+    "tags": [
+      "motion-primitive",
+      "typography",
+      "headline",
+      "slam",
+      "impact",
+      "exit"
+    ],
+    "href": "/catalog/components/headline-slam",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/headline-slam.png"
+  },
   {
     "name": "hw-arrow",
     "type": "component",
@@ -1121,6 +2047,82 @@
     "href": "/catalog/components/hw-underline",
     "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/hw-underline.png"
   },
+  {
+    "name": "icon-morph-beat",
+    "type": "component",
+    "title": "Icon Morph Beat",
+    "description": "An icon morphs between authored state silhouettes, shifts to an accent color, and marks completion with one restrained pulse.",
+    "tags": [
+      "motion-primitive",
+      "product-demo",
+      "icon",
+      "morph",
+      "state-change",
+      "completion"
+    ],
+    "href": "/catalog/components/icon-morph-beat",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/icon-morph-beat.png"
+  },
+  {
+    "name": "icon-swap",
+    "type": "component",
+    "title": "Icon Swap",
+    "description": "A scale-and-blur icon swap primitive for toolbar and action state changes",
+    "tags": [
+      "video-primitive",
+      "transition-primitive",
+      "transitions-dev-port",
+      "icon",
+      "swap"
+    ],
+    "href": "/catalog/components/icon-swap",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/icon-swap.png"
+  },
+  {
+    "name": "ink-bleed-reveal",
+    "type": "component",
+    "title": "Ink Bleed Reveal",
+    "description": "Liquid ink blooms through paper under a gooey blur-plus-threshold filter, merges, then contracts as a crisp slotted mark resolves beneath it, with static seeded paper grain riding the result.",
+    "tags": [
+      "motion-primitive",
+      "texture",
+      "reveal",
+      "gooey",
+      "svg-filter",
+      "deterministic",
+      "experiment"
+    ],
+    "href": "/catalog/components/ink-bleed-reveal",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/ink-bleed-reveal.png"
+  },
+  {
+    "name": "inline-highlight",
+    "type": "component",
+    "title": "Inline Highlight",
+    "description": "A clean marker-style inline highlight that animates behind text using a CSS scale variable",
+    "tags": [
+      "motion-primitive",
+      "text",
+      "highlight",
+      "caption"
+    ],
+    "href": "/catalog/components/inline-highlight",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/inline-highlight.png"
+  },
+  {
+    "name": "input-feedback",
+    "type": "component",
+    "title": "Input Feedback",
+    "description": "A transitions.dev-inspired input feedback primitive with shake, clear affordance, and success state",
+    "tags": [
+      "transition-primitive",
+      "transitions-dev-port",
+      "input",
+      "feedback"
+    ],
+    "href": "/catalog/components/input-feedback",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/input-feedback.png"
+  },
   {
     "name": "instagram-follow",
     "type": "block",
@@ -1152,6 +2154,50 @@
     "href": "/catalog/blocks/ios26-liquid-glass",
     "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ios26-liquid-glass.png"
   },
+  {
+    "name": "iris-reveal",
+    "type": "component",
+    "title": "Iris Reveal",
+    "description": "A circle clip-path opens from an authored origin revealing state B over state A in one confident pass, then holds on B. Classic register dims and desaturates the before state so the after state lands in full color; a thin accent rim rides the iris edge. Callers fill the named before/after slot panels; token-styled defaults render when a slot is left empty.",
+    "tags": [
+      "transition",
+      "iris",
+      "circle-reveal",
+      "clip-path",
+      "bridge",
+      "slots"
+    ],
+    "href": "/catalog/components/iris-reveal",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/iris-reveal.png"
+  },
+  {
+    "name": "keyframe-scrub-stack",
+    "type": "component",
+    "title": "Keyframe Scrub Stack",
+    "description": "A keyframe-sequenced stack of cards with offset timing and easing presets.",
+    "tags": [
+      "advanced-motion",
+      "anime-inspired",
+      "hyperframes-native"
+    ],
+    "href": "/catalog/components/keyframe-scrub-stack",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/keyframe-scrub-stack.png"
+  },
+  {
+    "name": "kinetic-type-swap",
+    "type": "component",
+    "title": "Kinetic Type Swap",
+    "description": "A held sentence keeps its fixed text in place while one widest-word masked slot rolls through alternatives and settles on the final option.",
+    "tags": [
+      "motion-primitive",
+      "text-effects",
+      "kinetic-type",
+      "word-swap",
+      "reveal"
+    ],
+    "href": "/catalog/components/kinetic-type-swap",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/kinetic-type-swap.png"
+  },
   {
     "name": "light-leak",
     "type": "block",
@@ -1164,6 +2210,50 @@
     "href": "/catalog/blocks/light-leak",
     "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/light-leak.png"
   },
+  {
+    "name": "light-sweep-pass",
+    "type": "component",
+    "title": "Light Sweep Pass",
+    "description": "A traveling key light re-shades a slotted scene: a soft diagonal gradient band crosses the frame once while every per-element highlight and shadow shifts in lockstep (all driven by one --light-x property), then the light settles into a resting key. Quiet, expensive-feeling; the scene itself never moves. Callers fill the named scene slot; a token hero-and-cards default renders when it is left empty.",
+    "tags": [
+      "motion-primitive",
+      "overlay",
+      "light",
+      "sweep",
+      "slots",
+      "deterministic"
+    ],
+    "href": "/catalog/components/light-sweep-pass",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/light-sweep-pass.png"
+  },
+  {
+    "name": "line-by-line-slide",
+    "type": "component",
+    "title": "Line-by-Line Slide",
+    "description": "Each line enters from the left with staggered slide and exits to the right.",
+    "tags": [
+      "motion-primitive",
+      "remocn-port",
+      "typography"
+    ],
+    "href": "/catalog/components/line-by-line-slide",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/line-by-line-slide.png"
+  },
+  {
+    "name": "line-swap",
+    "type": "component",
+    "title": "Line Swap",
+    "description": "A masked full-line beat replacement: line A holds center then exits up through an overflow-hidden mask as line B enters bottom-up on the same beat, with an optional accent underline drawing beneath one word of line B.",
+    "tags": [
+      "motion-primitive",
+      "text-effects",
+      "swap",
+      "beat",
+      "deterministic"
+    ],
+    "href": "/catalog/components/line-swap",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/line-swap.png"
+  },
   {
     "name": "liquid-glass-context-menu",
     "type": "block",
@@ -1216,6 +2306,38 @@
     "href": "/catalog/blocks/liquid-glass-widgets",
     "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-widgets.png"
   },
+  {
+    "name": "locked-nucleus-orbit",
+    "type": "component",
+    "title": "Locked Nucleus Orbit",
+    "description": "A fixed center nucleus anchors deterministic satellite orbits that settle into a composed lockup.",
+    "tags": [
+      "motion-primitive",
+      "intro",
+      "reveal",
+      "orbit",
+      "lockup",
+      "deterministic"
+    ],
+    "href": "/catalog/components/locked-nucleus-orbit",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/locked-nucleus-orbit.png"
+  },
+  {
+    "name": "logo-brand-close",
+    "type": "component",
+    "title": "Logo Brand Close",
+    "description": "A display-scale wordmark cascades letter by letter into a centered lockup, the accent brand period lands last, an optional tagline and wide-tracked mono URL settle beneath, and the finished identity holds dead still to the end of the film.",
+    "tags": [
+      "motion-primitive",
+      "typography",
+      "brand",
+      "logo",
+      "end-card",
+      "close"
+    ],
+    "href": "/catalog/components/logo-brand-close",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/logo-brand-close.png"
+  },
   {
     "name": "logo-outro",
     "type": "block",
@@ -1229,6 +2351,37 @@
     "href": "/catalog/blocks/logo-outro",
     "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/logo-outro.png"
   },
+  {
+    "name": "logo-sting",
+    "type": "component",
+    "title": "Logo Sting",
+    "description": "A wordmark slams into its final scale, fires one accent ring and one white impact frame, then holds completely still.",
+    "tags": [
+      "motion-primitive",
+      "brand",
+      "logo",
+      "sting",
+      "impact",
+      "reveal"
+    ],
+    "href": "/catalog/components/logo-sting",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/logo-sting.png"
+  },
+  {
+    "name": "logo-wall",
+    "type": "component",
+    "title": "Logo Wall",
+    "description": "A trusted-by wall of placeholder lettermark logos that fades and scales into place with a deterministic per-cell stagger.",
+    "tags": [
+      "data",
+      "logos",
+      "social-proof",
+      "stagger",
+      "prove"
+    ],
+    "href": "/catalog/components/logo-wall",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/logo-wall.png"
+  },
   {
     "name": "lower-third-bild",
     "type": "block",
@@ -1347,6 +2500,20 @@
     "href": "/catalog/blocks/lt-mask-reveal",
     "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-mask-reveal.png"
   },
+  {
+    "name": "lt-neon-border",
+    "type": "block",
+    "title": "Neon Border",
+    "description": "Two arcs of light travel the edge of a rounded panel and snap corner to corner, trailing a soft three-layer bloom. A lower third for a name and role.",
+    "tags": [
+      "lower-third",
+      "glow",
+      "loop",
+      "video-primitive"
+    ],
+    "href": "/catalog/blocks/lt-neon-border",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-neon-border.png"
+  },
   {
     "name": "lt-side-rule",
     "type": "block",
@@ -1421,24 +2588,110 @@
     "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/macos-tahoe-liquid-glass.png"
   },
   {
-    "name": "mk-background",
-    "type": "block",
-    "title": "Minimal Gradient Background",
-    "description": "Procedural soft-blob gradient backdrop in a minimalist presentation style: two radial blobs drifting over a base color, with an animatable rounded-card bar mask and optional frosted-glass mode",
+    "name": "marker-highlight",
+    "type": "component",
+    "title": "Marker Highlight",
+    "description": "Display text settles in, then one hand-drawn marker stroke (highlight, circle, underline, or scribble) draws over the emphasized word on cue.",
     "tags": [
-      "background",
-      "gradient",
-      "minimal",
-      "professional",
-      "presentation"
+      "motion-primitive",
+      "typography",
+      "emphasis",
+      "marker",
+      "deterministic"
     ],
-    "href": "/catalog/blocks/mk-background",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-background.png"
+    "href": "/catalog/components/marker-highlight",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/marker-highlight.png"
   },
   {
-    "name": "mk-callout-highlight",
-    "type": "block",
-    "title": "Word-Sweep Highlight",
+    "name": "match-cut",
+    "type": "component",
+    "title": "Match Cut",
+    "description": "A circle accelerates into a hard single-frame scene swap, matches the incoming circle exactly, and continues into a smaller resting pose.",
+    "tags": [
+      "motion-primitive",
+      "transition",
+      "match-cut",
+      "hard-cut",
+      "continuity"
+    ],
+    "href": "/catalog/components/match-cut",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/match-cut.png"
+  },
+  {
+    "name": "matrix-decode",
+    "type": "component",
+    "title": "Matrix Decode",
+    "description": "Random scramble resolves left-to-right into the target text.",
+    "tags": [
+      "motion-primitive",
+      "remocn-port",
+      "typography"
+    ],
+    "href": "/catalog/components/matrix-decode",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/matrix-decode.png"
+  },
+  {
+    "name": "menu-morph",
+    "type": "component",
+    "title": "Menu Morph",
+    "description": "A transitions.dev-inspired hamburger and plus-menu morph primitive for compact action menus",
+    "tags": [
+      "video-primitive",
+      "transition-primitive",
+      "transitions-dev-port",
+      "menu",
+      "morph"
+    ],
+    "href": "/catalog/components/menu-morph",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/menu-morph.png"
+  },
+  {
+    "name": "mesh-gradient-bg",
+    "type": "component",
+    "title": "Mesh Gradient Background",
+    "description": "A render-safe mesh gradient using animated radial layers.",
+    "tags": [
+      "effect",
+      "remocn-port"
+    ],
+    "href": "/catalog/components/mesh-gradient-bg",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/mesh-gradient-bg.png"
+  },
+  {
+    "name": "micro-transitions",
+    "type": "component",
+    "title": "Micro Transitions",
+    "description": "A transitions.dev-inspired pack of badge, dropdown, modal, tabs, tooltip, and success-check micro transitions",
+    "tags": [
+      "transition-primitive",
+      "motion-primitive",
+      "transitions-dev-port",
+      "ui",
+      "transition",
+      "microinteraction"
+    ],
+    "href": "/catalog/components/micro-transitions",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/micro-transitions.png"
+  },
+  {
+    "name": "mk-background",
+    "type": "block",
+    "title": "Minimal Gradient Background",
+    "description": "Procedural soft-blob gradient backdrop in a minimalist presentation style: two radial blobs drifting over a base color, with an animatable rounded-card bar mask and optional frosted-glass mode",
+    "tags": [
+      "background",
+      "gradient",
+      "minimal",
+      "professional",
+      "presentation"
+    ],
+    "href": "/catalog/blocks/mk-background",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-background.png"
+  },
+  {
+    "name": "mk-callout-highlight",
+    "type": "block",
+    "title": "Word-Sweep Highlight",
     "description": "A sentence whose word-by-word emphasis is driven by a single scalar — tween it to sync the highlight with a voiceover",
     "tags": [
       "typography",
@@ -1543,6 +2796,40 @@
     "href": "/catalog/components/mk-usage-arc",
     "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/mk-usage-arc.png"
   },
+  {
+    "name": "modal-morph",
+    "type": "component",
+    "title": "Modal Morph",
+    "description": "A small card expands into a full panel, shared-element style: both layouts measured once at mount, the container morphs by transform only (never width/height tweens) while keyed children counter-scale and re-flow onto their own measured targets as pure functions of time.",
+    "tags": [
+      "motion-primitive",
+      "structure",
+      "flip",
+      "shared-element",
+      "modal",
+      "deterministic",
+      "experiment"
+    ],
+    "href": "/catalog/components/modal-morph",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/modal-morph.png"
+  },
+  {
+    "name": "morph-swap",
+    "type": "component",
+    "title": "Morph Swap",
+    "description": "Two slotted siblings stacked at one shared center: A holds, then condenses or reshapes into B on a shared 50% 50% transform origin. Condense shrink-fades A exactly as B scales up; reshape morphs the silhouette on scaleX/scaleY, never width or height tweens. Token card defaults render when a slot is left empty.",
+    "tags": [
+      "transition",
+      "morph",
+      "swap",
+      "condense",
+      "reshape",
+      "holdable",
+      "slots"
+    ],
+    "href": "/catalog/components/morph-swap",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/morph-swap.png"
+  },
   {
     "name": "morph-text",
     "type": "component",
@@ -1574,6 +2861,54 @@
     "href": "/catalog/components/motion-blur",
     "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/motion-blur.png"
   },
+  {
+    "name": "multi-device-splay",
+    "type": "component",
+    "title": "Multi Device Splay",
+    "description": "Phone, tablet, and desktop product mockups fan from a centered stack into a proud splayed arrangement with a subtle idle float.",
+    "tags": [
+      "motion-primitive",
+      "device",
+      "phone",
+      "tablet",
+      "desktop",
+      "splay"
+    ],
+    "href": "/catalog/components/multi-device-splay",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/multi-device-splay.png"
+  },
+  {
+    "name": "multiplayer-cursors",
+    "type": "component",
+    "title": "Multiplayer Cursors",
+    "description": "Labeled collaborator cursors with token-derived colors and soft glows drift from spread positions into a shared center zone, proving live multiplayer presence.",
+    "tags": [
+      "cursor",
+      "pointer",
+      "multiplayer",
+      "collaboration",
+      "presence",
+      "loop",
+      "prove"
+    ],
+    "href": "/catalog/components/multiplayer-cursors",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/multiplayer-cursors.png"
+  },
+  {
+    "name": "native-notification-pop",
+    "type": "component",
+    "title": "Native Notification Pop",
+    "description": "One system-faithful notification banner (iOS or macOS) drops in over any scene on an accurate interruptible spring: fast arrival, soft overshoot, settled mass, backdrop blur, app dot, title, one body line. Holds; tucks away only via exit.",
+    "tags": [
+      "motion-primitive",
+      "product-demo",
+      "overlay",
+      "notification",
+      "spring"
+    ],
+    "href": "/catalog/components/native-notification-pop",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/native-notification-pop.png"
+  },
   {
     "name": "news-ticker",
     "type": "block",
@@ -1603,6 +2938,68 @@
     "href": "/catalog/blocks/north-korea-locked-down",
     "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/north-korea-locked-down.png"
   },
+  {
+    "name": "notification-pileup",
+    "type": "component",
+    "title": "Notification Pileup",
+    "description": "Mobile notification cards arrive faster and faster, each new alert pushing the existing stack downward into a dense, anxious tower.",
+    "tags": [
+      "notification",
+      "mobile",
+      "ui-props",
+      "overload",
+      "pileup",
+      "loop",
+      "agitate"
+    ],
+    "href": "/catalog/components/notification-pileup",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/notification-pileup.png"
+  },
+  {
+    "name": "notification-stack",
+    "type": "component",
+    "title": "Notification Stack",
+    "description": "1 to 5 token notification cards slide-settle into a vertical stack on cues, newest on top; one card grows slightly and brightens as the focus while the rest dim by position.",
+    "tags": [
+      "motion-primitive",
+      "product-demo",
+      "notification",
+      "stack",
+      "stagger"
+    ],
+    "href": "/catalog/components/notification-stack",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/notification-stack.png"
+  },
+  {
+    "name": "number-pop-in",
+    "type": "component",
+    "title": "Number Pop In",
+    "description": "A transitions.dev-inspired digit pop-in with blur, lift, and staggered value reveal",
+    "tags": [
+      "video-primitive",
+      "transition-primitive",
+      "transitions-dev-port",
+      "number",
+      "pop"
+    ],
+    "href": "/catalog/components/number-pop-in",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/number-pop-in.png"
+  },
+  {
+    "name": "number-wheel",
+    "type": "component",
+    "title": "Number Wheel",
+    "description": "A rolling digit counter primitive for metrics, prices, counts, and scoreboards",
+    "tags": [
+      "video-primitive",
+      "motion-primitive",
+      "number",
+      "counter",
+      "data"
+    ],
+    "href": "/catalog/components/number-wheel",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/number-wheel.png"
+  },
   {
     "name": "nyc-paris-flight",
     "type": "block",
@@ -1618,6 +3015,51 @@
     "href": "/catalog/blocks/nyc-paris-flight",
     "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/nyc-paris-flight.png"
   },
+  {
+    "name": "offset-path-traveler",
+    "type": "component",
+    "title": "Offset Path Traveler",
+    "description": "A slotted traveler follows an authored path with tangent rotation, curved entry, and curved exit.",
+    "tags": [
+      "motion-primitive",
+      "product-demo",
+      "path",
+      "traveler",
+      "auto-rotate"
+    ],
+    "href": "/catalog/components/offset-path-traveler",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/offset-path-traveler.png"
+  },
+  {
+    "name": "onboarding-stepper-flow",
+    "type": "component",
+    "title": "Onboarding Stepper Flow",
+    "description": "A composed onboarding flow with milestone rail, active step card, and next-action button",
+    "tags": [
+      "ui-flow",
+      "remocn-port",
+      "onboarding",
+      "stepper"
+    ],
+    "href": "/catalog/components/onboarding-stepper-flow",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/onboarding-stepper-flow.png"
+  },
+  {
+    "name": "ordered-dither-pass",
+    "type": "component",
+    "title": "Ordered Dither Pass",
+    "description": "Bayer-matrix ordered dithering quantizes a slotted scene (rasterized once at mount): the image emerges from pure 2-tone noise to clean, or dissolves the reverse. Stateless per frame, never error diffusion.",
+    "tags": [
+      "motion-primitive",
+      "experiment",
+      "texture",
+      "dither",
+      "transition",
+      "quantize"
+    ],
+    "href": "/catalog/components/ordered-dither-pass",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/ordered-dither-pass.png"
+  },
   {
     "name": "organic-light-leak-overlay",
     "type": "block",
@@ -1634,6 +3076,128 @@
     "href": "/catalog/blocks/organic-light-leak-overlay",
     "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/organic-light-leak-overlay.png"
   },
+  {
+    "name": "oscilloscope-trace",
+    "type": "block",
+    "title": "Oscilloscope Trace",
+    "description": "CRT oscilloscope beam sweeping a waveform across a 10x8 graticule, with closed-form phosphor persistence: the tail decays as exp(-age/tau) and brightens where the beam slows",
+    "tags": [
+      "instrument",
+      "data",
+      "showcase",
+      "retro"
+    ],
+    "href": "/catalog/blocks/oscilloscope-trace",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/oscilloscope-trace.png"
+  },
+  {
+    "name": "outline-draw",
+    "type": "component",
+    "title": "Outline Draw",
+    "description": "A rounded outline that proves a callout by drawing clockwise as a hollow conic-gradient border with a clean closure.",
+    "tags": [
+      "motion-primitive",
+      "effects",
+      "outline",
+      "border",
+      "mask",
+      "proof"
+    ],
+    "href": "/catalog/components/outline-draw",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/outline-draw.png"
+  },
+  {
+    "name": "oversized-cursor",
+    "type": "component",
+    "title": "Oversized Cursor",
+    "description": "A deliberately oversized macOS-style pointer that enters off-screen, travels to a target, clicks to ignite a visible response, then exits",
+    "tags": [
+      "motion-primitive",
+      "actor",
+      "cursor",
+      "pointer",
+      "interaction"
+    ],
+    "href": "/catalog/components/oversized-cursor",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/oversized-cursor.png"
+  },
+  {
+    "name": "overwhelm-surround",
+    "type": "component",
+    "title": "Overwhelm Surround",
+    "description": "Tasks, tabs, pings, and notification bubbles accelerate inward around a calm central subject, turning overload into visible spatial pressure.",
+    "tags": [
+      "effects",
+      "agitate",
+      "overwhelm",
+      "pressure",
+      "notifications"
+    ],
+    "href": "/catalog/components/overwhelm-surround",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/overwhelm-surround.png"
+  },
+  {
+    "name": "page-slide",
+    "type": "component",
+    "title": "Page Slide",
+    "description": "A transitions.dev-inspired page slide primitive with outgoing and incoming panels",
+    "tags": [
+      "video-primitive",
+      "transition-primitive",
+      "transitions-dev-port",
+      "page",
+      "slide"
+    ],
+    "href": "/catalog/components/page-slide",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/page-slide.png"
+  },
+  {
+    "name": "pan-stations",
+    "type": "component",
+    "title": "Pan Stations",
+    "description": "A lateral camera move across a continuous row of labeled feature stations, with a steady dwell at each stop before the next pan.",
+    "tags": [
+      "camera",
+      "pan",
+      "stations",
+      "features",
+      "exhibit",
+      "agitate",
+      "cross-shelved"
+    ],
+    "href": "/catalog/components/pan-stations",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/pan-stations.png"
+  },
+  {
+    "name": "panel-reveal",
+    "type": "component",
+    "title": "Panel Reveal",
+    "description": "A panel reveal primitive with height expansion and content fade",
+    "tags": [
+      "transition-primitive",
+      "transitions-dev-port",
+      "panel",
+      "reveal"
+    ],
+    "href": "/catalog/components/panel-reveal",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/panel-reveal.png"
+  },
+  {
+    "name": "parallax-device-dive",
+    "type": "component",
+    "title": "Parallax Device Dive",
+    "description": "A canonical phone rises into view before the camera pushes through its screen and layered app UI expands to fill the frame.",
+    "tags": [
+      "motion-primitive",
+      "camera",
+      "device",
+      "phone",
+      "parallax",
+      "transition"
+    ],
+    "href": "/catalog/components/parallax-device-dive",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/parallax-device-dive.png"
+  },
   {
     "name": "parallax-unzoom",
     "type": "component",
@@ -1665,109 +3229,1016 @@
     "href": "/catalog/components/parallax-zoom",
     "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/parallax-zoom.png"
   },
+  {
+    "name": "particle-image-reveal",
+    "type": "component",
+    "title": "Particle Image Reveal",
+    "description": "A seeded deterministic particle field converges and settles while a slotted image reveals beneath it, the trail thinning until the image holds clean.",
+    "tags": [
+      "motion-primitive",
+      "intros-reveals",
+      "particles",
+      "reveal",
+      "canvas",
+      "deterministic"
+    ],
+    "href": "/catalog/components/particle-image-reveal",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/particle-image-reveal.png"
+  },
+  {
+    "name": "particle-text-dissolve",
+    "type": "component",
+    "title": "Particle Text Dissolve",
+    "description": "Text assembles from a seeded particle cloud (or dissolves into it): per-particle targets sampled once from the rendered text bitmap at mount, table-driven particles, zero per-particle tweens, one onUpdate painter.",
+    "tags": [
+      "motion-primitive",
+      "text-effects",
+      "particles",
+      "canvas",
+      "deterministic",
+      "experiment"
+    ],
+    "href": "/catalog/components/particle-text-dissolve",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/particle-text-dissolve.png"
+  },
+  {
+    "name": "per-word-crossfade",
+    "type": "component",
+    "title": "Per-Word Crossfade",
+    "description": "Words gently fade into place with a short vertical drift for calm keynote rhythm.",
+    "tags": [
+      "motion-primitive",
+      "remocn-port",
+      "typography"
+    ],
+    "href": "/catalog/components/per-word-crossfade",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/per-word-crossfade.png"
+  },
+  {
+    "name": "per-word-rise",
+    "type": "component",
+    "title": "Per Word Rise",
+    "description": "Words or characters rise into place in a controlled blur-to-sharp cascade, settle softly on landing, and hold still until the cut (optional fade or up exit).",
+    "tags": [
+      "motion-primitive",
+      "text-effects",
+      "typography",
+      "stagger",
+      "reveal"
+    ],
+    "href": "/catalog/components/per-word-rise",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/per-word-rise.png"
+  },
+  {
+    "name": "perspective-marquee",
+    "type": "component",
+    "title": "Perspective Marquee",
+    "description": "A 3D tilted marquee with depth feel as items roll toward the horizon.",
+    "tags": [
+      "motion-primitive",
+      "remocn-port",
+      "typography"
+    ],
+    "href": "/catalog/components/perspective-marquee",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/perspective-marquee.png"
+  },
+  {
+    "name": "physical-exit",
+    "type": "component",
+    "title": "Physical Exit",
+    "description": "A card exits with physical momentum in toss, drop, or slide mode, carrying acceleration and rotation through the final offscreen pose without fading.",
+    "tags": [
+      "motion-primitive",
+      "exit",
+      "momentum",
+      "toss",
+      "drop",
+      "slide"
+    ],
+    "href": "/catalog/components/physical-exit",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/physical-exit.png"
+  },
+  {
+    "name": "press-ripple",
+    "type": "component",
+    "title": "Press Ripple",
+    "description": "A cursor decel-arrives from off-stage, lands slightly off-center on a caller-positioned target, compresses with it in lockstep, releases with ink ripple rings, then exits off-stage while the pressed state holds.",
+    "tags": [
+      "motion-primitive",
+      "product-demo",
+      "cursor",
+      "press",
+      "ripple",
+      "payoff"
+    ],
+    "href": "/catalog/components/press-ripple",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/press-ripple.png"
+  },
+  {
+    "name": "pull-back-reveal",
+    "type": "component",
+    "title": "Pull Back Reveal",
+    "description": "A tight stat detail holds, then one decelerating camera pull-back reveals the headline and supporting cards that recontextualize it.",
+    "tags": [
+      "motion-primitive",
+      "camera",
+      "pull-back",
+      "reveal",
+      "recontextualize"
+    ],
+    "href": "/catalog/components/pull-back-reveal",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/pull-back-reveal.png"
+  },
+  {
+    "name": "pull-to-refresh",
+    "type": "component",
+    "title": "Pull to Refresh",
+    "description": "A mobile list pulls through nonlinear rubber-band resistance, arms at a threshold, commits to a bounded loading indicator, then snaps exactly back to rest.",
+    "tags": [
+      "pointer",
+      "pointers",
+      "mobile",
+      "gesture",
+      "interaction",
+      "refresh",
+      "demonstrate"
+    ],
+    "href": "/catalog/components/pull-to-refresh",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/pull-to-refresh.png"
+  },
+  {
+    "name": "push-in",
+    "type": "component",
+    "title": "Push In",
+    "description": "A centered headline gains focus through one slow, continuous camera push and a gentle fade out.",
+    "tags": [
+      "motion-primitive",
+      "camera",
+      "push-in",
+      "focus",
+      "emphasize",
+      "holdable"
+    ],
+    "href": "/catalog/components/push-in",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/push-in.png"
+  },
+  {
+    "name": "rack-focus",
+    "type": "block",
+    "title": "Rack Focus",
+    "description": "A focus pull with real aperture bokeh: the focal plane travels from a near subject to a far one, so one resolves as the other blows into hard-edged polygon discs that clip to a cat's eye toward the corners. A focus pull only reads against content at two clearly separated depths, so this block carries its own depth-layered night exterior and puts both subject depths on variables.",
+    "tags": [
+      "webgl",
+      "shader",
+      "camera",
+      "depth",
+      "cinematic",
+      "showcase"
+    ],
+    "href": "/catalog/blocks/rack-focus",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/rack-focus.png"
+  },
+  {
+    "name": "radial-surround",
+    "type": "component",
+    "title": "Radial Surround",
+    "description": "Labeled hairline chips assemble around a centered subject on an elliptical ring, then optionally converge inward with a subtle edge dim. The center never moves: surrounded, not zoomed.",
+    "tags": [
+      "motion-primitive",
+      "problem-setup",
+      "radial",
+      "ring",
+      "surround",
+      "converge"
+    ],
+    "href": "/catalog/components/radial-surround",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/radial-surround.png"
+  },
   {
     "name": "reddit-post",
     "type": "block",
     "title": "Reddit Post Card",
     "description": "Animated Reddit post card overlay with upvotes and comments",
     "tags": [
-      "social",
-      "overlay",
-      "reddit"
+      "social",
+      "overlay",
+      "reddit"
+    ],
+    "href": "/catalog/blocks/reddit-post",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/reddit-post.png"
+  },
+  {
+    "name": "rgb-glitch-text",
+    "type": "component",
+    "title": "RGB Glitch Text",
+    "description": "RGB-offset text copies jitter briefly for a controlled glitch window.",
+    "tags": [
+      "motion-primitive",
+      "remocn-port",
+      "typography"
+    ],
+    "href": "/catalog/components/rgb-glitch-text",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/rgb-glitch-text.png"
+  },
+  {
+    "name": "ridged-burn",
+    "type": "block",
+    "title": "Ridged Burn",
+    "description": "Shader transition with ridged turbulence burn effect",
+    "tags": [
+      "transition",
+      "shader"
+    ],
+    "href": "/catalog/blocks/ridged-burn",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ridged-burn.png"
+  },
+  {
+    "name": "ripple-waves",
+    "type": "block",
+    "title": "Ripple Waves",
+    "description": "Shader transition with concentric ripple wave distortion",
+    "tags": [
+      "transition",
+      "shader"
+    ],
+    "href": "/catalog/blocks/ripple-waves",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ripple-waves.png"
+  },
+  {
+    "name": "rubber-band-bumper",
+    "type": "component",
+    "title": "Rubber Band Bumper",
+    "description": "An outgoing panel pulls against increasing resistance, holds at tension, then snaps past an edge with overshoot as the incoming panel settles behind it.",
+    "tags": [
+      "motion-primitive",
+      "transition",
+      "rubber-band",
+      "resistance",
+      "overshoot"
+    ],
+    "href": "/catalog/components/rubber-band-bumper",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/rubber-band-bumper.png"
+  },
+  {
+    "name": "scan-band",
+    "type": "component",
+    "title": "Scan Band",
+    "description": "A diagonal distortion band sweeps once across a clean wordmark, revealing clipped red and cyan offsets only inside the moving band.",
+    "tags": [
+      "motion-primitive",
+      "typography",
+      "scan",
+      "chromatic",
+      "distortion",
+      "wordmark"
+    ],
+    "href": "/catalog/components/scan-band",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/scan-band.png"
+  },
+  {
+    "name": "scramble-reveal",
+    "type": "component",
+    "title": "Scramble Reveal",
+    "description": "A deterministic hacker-style text reveal that cycles fixed glyph rows and locks the target string from left to right.",
+    "tags": [
+      "motion-primitive",
+      "text-effects",
+      "scramble",
+      "reveal",
+      "deterministic"
+    ],
+    "href": "/catalog/components/scramble-reveal",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/scramble-reveal.png"
+  },
+  {
+    "name": "screen-flow-carousel",
+    "type": "component",
+    "title": "Screen Flow Carousel",
+    "description": "Two to five app screens ride a horizontal rail: one primary at center, neighbors receded, advancing on cues with a velocity-matched throw and a smooth long-tail catch while a mono caption swaps with each advance. Screens are slots with token skeleton defaults.",
+    "tags": [
+      "product-demo",
+      "feature-tour",
+      "carousel",
+      "rail",
+      "slot",
+      "screens"
+    ],
+    "href": "/catalog/components/screen-flow-carousel",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/screen-flow-carousel.png"
+  },
+  {
+    "name": "scroll-camera-story",
+    "type": "component",
+    "title": "Scroll Camera Story",
+    "description": "A compressed forced-scroll cinematic pass: a tall scene of slotted sections travels past the camera top to bottom, depth layers parallax at different rates, each section rises as the camera reaches it, and the pass decelerates into a held final section.",
+    "tags": [
+      "camera",
+      "scroll",
+      "parallax",
+      "story",
+      "sections",
+      "slot",
+      "servo"
+    ],
+    "href": "/catalog/components/scroll-camera-story",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/scroll-camera-story.png"
+  },
+  {
+    "name": "scroll-feed",
+    "type": "component",
+    "title": "Scroll Feed",
+    "description": "A loop-friendly column of varied skeleton post cards scrolls upward with subtle motion trails and an agitated pace.",
+    "tags": [
+      "motion-primitive",
+      "effects",
+      "scroll",
+      "feed",
+      "loop",
+      "agitation"
+    ],
+    "href": "/catalog/components/scroll-feed",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/scroll-feed.png"
+  },
+  {
+    "name": "sdf-iris",
+    "type": "block",
+    "title": "SDF Iris",
+    "description": "Shader transition with signed distance field iris reveal",
+    "tags": [
+      "transition",
+      "shader"
+    ],
+    "href": "/catalog/blocks/sdf-iris",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/sdf-iris.png"
+  },
+  {
+    "name": "segmentation-flood",
+    "type": "component",
+    "title": "Segmentation Flood",
+    "description": "Machine-vision read of a slotted subject: translucent accent segmentation masks flood on in quantized scanline steps, each region gets a thin bracket and mono label chip, a deterministic 2-frame HUD flicker rides the pass, then the labeled read settles clean.",
+    "tags": [
+      "motion-primitive",
+      "product-demo",
+      "ai",
+      "hud",
+      "canvas",
+      "deterministic",
+      "experiment"
+    ],
+    "href": "/catalog/components/segmentation-flood",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/segmentation-flood.png"
+  },
+  {
+    "name": "separator",
+    "type": "component",
+    "title": "Separator",
+    "description": "A one-pixel structural separator with horizontal and vertical variants plus a seek-safe progress reveal",
+    "tags": [
+      "video-primitive",
+      "remocn-port",
+      "separator",
+      "layout"
+    ],
+    "href": "/catalog/components/separator",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/separator.png"
+  },
+  {
+    "name": "settings-toggle-flow",
+    "type": "component",
+    "title": "Settings Toggle Flow",
+    "description": "A composed settings flow with preference rows, toggle switches, and active-state feedback",
+    "tags": [
+      "ui-flow",
+      "remocn-port",
+      "settings",
+      "toggle"
+    ],
+    "href": "/catalog/components/settings-toggle-flow",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/settings-toggle-flow.png"
+  },
+  {
+    "name": "shared-axis-y",
+    "type": "component",
+    "title": "Shared Axis Y",
+    "description": "Per-word vertical shared-axis transition for sharp editorial swaps.",
+    "tags": [
+      "motion-primitive",
+      "remocn-port",
+      "typography"
+    ],
+    "href": "/catalog/components/shared-axis-y",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/shared-axis-y.png"
+  },
+  {
+    "name": "shared-axis-z",
+    "type": "component",
+    "title": "Shared Axis Z",
+    "description": "Scale-based shared-axis transition for focus shifts and context depth.",
+    "tags": [
+      "motion-primitive",
+      "remocn-port",
+      "typography"
+    ],
+    "href": "/catalog/components/shared-axis-z",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/shared-axis-z.png"
+  },
+  {
+    "name": "shimmer-sweep",
+    "type": "component",
+    "title": "Shimmer Sweep",
+    "description": "Animated light sweep across text or elements using a CSS gradient mask — ideal for AI accents and premium reveals",
+    "tags": [
+      "text",
+      "shimmer",
+      "highlight",
+      "effect"
+    ],
+    "href": "/catalog/components/shimmer-sweep",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/shimmer-sweep.png"
+  },
+  {
+    "name": "signup-flow",
+    "type": "component",
+    "title": "Signup Flow",
+    "description": "A composed signup flow with social action, email field, password field, and submit button",
+    "tags": [
+      "ui-flow",
+      "remocn-port",
+      "signup",
+      "form"
+    ],
+    "href": "/catalog/components/signup-flow",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/signup-flow.png"
+  },
+  {
+    "name": "simulated-cursor",
+    "type": "component",
+    "title": "Simulated Cursor",
+    "description": "A lightweight cursor pointer and click pulse for product walkthroughs and agent UI demos",
+    "tags": [
+      "video-primitive",
+      "motion-primitive",
+      "cursor",
+      "ui",
+      "walkthrough"
+    ],
+    "href": "/catalog/components/simulated-cursor",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/simulated-cursor.png"
+  },
+  {
+    "name": "skeleton-reveal",
+    "type": "component",
+    "title": "Skeleton Reveal",
+    "description": "A skeleton loader transition that pulses, then cross-fades into content",
+    "tags": [
+      "video-primitive",
+      "transition-primitive",
+      "transitions-dev-port",
+      "skeleton",
+      "reveal"
+    ],
+    "href": "/catalog/components/skeleton-reveal",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/skeleton-reveal.png"
+  },
+  {
+    "name": "slit-scan-reveal",
+    "type": "component",
+    "title": "Slit Scan Reveal",
+    "description": "The frame's rows sample an authored subject at offset times: a canvas painter draws row slices of one pure position function evaluated at t minus offset(row), smearing arrival through time until the offsets collapse to zero and the mark holds coherent.",
+    "tags": [
+      "motion-primitive",
+      "time",
+      "slit-scan",
+      "canvas",
+      "deterministic",
+      "experiment"
+    ],
+    "href": "/catalog/components/slit-scan-reveal",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/slit-scan-reveal.png"
+  },
+  {
+    "name": "slot-machine-roll",
+    "type": "component",
+    "title": "Slot Machine Roll",
+    "description": "A vertical reel scrolls characters from one value to another.",
+    "tags": [
+      "video-primitive",
+      "motion-primitive",
+      "remocn-port",
+      "typography"
+    ],
+    "href": "/catalog/components/slot-machine-roll",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/slot-machine-roll.png"
+  },
+  {
+    "name": "soft-blob-touch",
+    "type": "component",
+    "title": "Soft Blob Touch",
+    "description": "A granular soft blob idles with slow internal drift; a scripted touch dot decel-arrives, the blob deforms toward it with an attraction bulge, then recovers with a velocity-preserving spring. No hard edges anywhere.",
+    "tags": [
+      "motion-primitive",
+      "product-demo",
+      "material",
+      "blob",
+      "touch",
+      "grain"
+    ],
+    "href": "/catalog/components/soft-blob-touch",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/soft-blob-touch.png"
+  },
+  {
+    "name": "soft-blur-in",
+    "type": "component",
+    "title": "Soft Blur In",
+    "description": "A soft opacity, blur, and lift reveal for headlines, captions, and product UI callouts",
+    "tags": [
+      "motion-primitive",
+      "text",
+      "reveal",
+      "blur"
+    ],
+    "href": "/catalog/components/soft-blur-in",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/soft-blur-in.png"
+  },
+  {
+    "name": "spain-map",
+    "type": "block",
+    "title": "Spain Map",
+    "description": "Animated Spain choropleth by autonomous community with staggered reveals and gradient legend — D3 conic conformal projection",
+    "tags": [
+      "data",
+      "map",
+      "geography",
+      "spain",
+      "europe",
+      "choropleth"
+    ],
+    "href": "/catalog/blocks/spain-map",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/spain-map.png"
+  },
+  {
+    "name": "spiral-galaxy",
+    "type": "block",
+    "title": "Spiral Galaxy",
+    "description": "A spiral galaxy seen from outside, turning with real differential rotation: inner stars orbit faster than outer ones, so the arms wind up over the shot instead of spinning rigidly. 20,000 additive GPU sprites, seeded once and solved directly from time, so any frame can be rendered on its own.",
+    "tags": [
+      "hero",
+      "space",
+      "particles",
+      "webgl",
+      "background"
+    ],
+    "href": "/catalog/blocks/spiral-galaxy",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/spiral-galaxy.png"
+  },
+  {
+    "name": "split-flap-board",
+    "type": "block",
+    "title": "Split-Flap Board",
+    "description": "Solari-style departure board: every cell walks its drum forward through the intervening characters of a fixed alphabet until it lands on its target, so the text resolves as a mechanical cascade instead of a fade.",
+    "tags": [
+      "text",
+      "kinetic",
+      "mechanical",
+      "split-flap",
+      "solari",
+      "departure-board",
+      "reveal"
+    ],
+    "href": "/catalog/blocks/split-flap-board",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/split-flap-board.png"
+  },
+  {
+    "name": "split-tilt-cards",
+    "type": "component",
+    "title": "Split Tilt Cards",
+    "description": "Two equal-weight cards arrive from opposite wings with mirrored rotateY book-open tilts under one shared perspective, pill badges spring-pop at each inner edge, and the pair holds with a barely-there phase-opposed idle float. Card bodies are content slots with token skeleton defaults.",
+    "tags": [
+      "motion-primitive",
+      "layout",
+      "compare",
+      "holdable",
+      "book-open",
+      "tilt",
+      "slots"
+    ],
+    "href": "/catalog/components/split-tilt-cards",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/split-tilt-cards.png"
+  },
+  {
+    "name": "spotify-card",
+    "type": "block",
+    "title": "Spotify Now Playing",
+    "description": "Animated Spotify now-playing card with album art and progress bar",
+    "tags": [
+      "social",
+      "overlay",
+      "spotify"
+    ],
+    "href": "/catalog/blocks/spotify-card",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/spotify-card.png"
+  },
+  {
+    "name": "spotlight-card",
+    "type": "component",
+    "title": "Spotlight Card",
+    "description": "A card with a scripted cursor spotlight and lit border.",
+    "tags": [
+      "effect",
+      "remocn-port"
+    ],
+    "href": "/catalog/components/spotlight-card",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/spotlight-card.png"
+  },
+  {
+    "name": "spring-pop",
+    "type": "component",
+    "title": "Spring Pop",
+    "description": "A badge pops in from a visible near-rest scale, overshoots full size once, and settles cleanly.",
+    "tags": [
+      "motion-primitive",
+      "effects",
+      "spring",
+      "overshoot",
+      "pop",
+      "reveal"
+    ],
+    "href": "/catalog/components/spring-pop",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/spring-pop.png"
+  },
+  {
+    "name": "spring-stack-shuffle",
+    "type": "component",
+    "title": "Spring Stack Shuffle",
+    "description": "A stack of 3 to 5 slotted cards reshuffles on cues: the back card throws over the top and lands at the front with real mass, the rest compress and resettle; cues that land mid-flight redirect the moving cards with velocity preserved.",
+    "tags": [
+      "motion-primitive",
+      "product-demo",
+      "physics",
+      "stack",
+      "interruptible-spring"
+    ],
+    "href": "/catalog/components/spring-stack-shuffle",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/spring-stack-shuffle.png"
+  },
+  {
+    "name": "stagger-cascade",
+    "type": "component",
+    "title": "Stagger Cascade",
+    "description": "A responsive grid of tile cards that fades and travels into place with an evenly spaced per-item GSAP stagger. The ordered cascade is the only visual mechanic.",
+    "tags": [
+      "effects",
+      "grid",
+      "stagger",
+      "entrance",
+      "exhibit"
+    ],
+    "href": "/catalog/components/stagger-cascade",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/stagger-cascade.png"
+  },
+  {
+    "name": "stagger-lattice",
+    "type": "component",
+    "title": "Stagger Lattice",
+    "description": "A staggered grid reveal inspired by Anime.js v4 stagger utilities, implemented with GSAP for HyperFrames.",
+    "tags": [
+      "advanced-motion",
+      "anime-inspired",
+      "hyperframes-native"
+    ],
+    "href": "/catalog/components/stagger-lattice",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/stagger-lattice.png"
+  },
+  {
+    "name": "staggered-fade-up",
+    "type": "component",
+    "title": "Staggered Fade Up",
+    "description": "Words fade in and slide up one after another with configurable delay.",
+    "tags": [
+      "video-primitive",
+      "motion-primitive",
+      "remocn-port",
+      "typography"
+    ],
+    "href": "/catalog/components/staggered-fade-up",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/staggered-fade-up.png"
+  },
+  {
+    "name": "star-rating-fill",
+    "type": "component",
+    "title": "Star Rating Fill",
+    "description": "A token-driven star row whose colored layer sweeps to a rating, preserves the fractional final star, and can count the value in sync.",
+    "tags": [
+      "data",
+      "rating",
+      "stars",
+      "fractional",
+      "fill",
+      "prove"
+    ],
+    "href": "/catalog/components/star-rating-fill",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/star-rating-fill.png"
+  },
+  {
+    "name": "state-chip-rail",
+    "type": "component",
+    "title": "State Chip Rail",
+    "description": "A rail of mono status chips advances a seek-safe data-state snap machine on a cue schedule: active chip ink on surface, done chips dim, pending chips hollow, optional badges pop beside one state.",
+    "tags": [
+      "motion-primitive",
+      "product-demo",
+      "state-machine",
+      "status",
+      "chips",
+      "rail"
+    ],
+    "href": "/catalog/components/state-chip-rail",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/state-chip-rail.png"
+  },
+  {
+    "name": "sticky-mock-swap",
+    "type": "component",
+    "title": "Sticky Mock Swap",
+    "description": "A pinned product mock cross-fades through accent-tinted feature states while matching captions rise, hold, and exit beside it.",
+    "tags": [
+      "motion-primitive",
+      "product-demo",
+      "sticky",
+      "mock",
+      "crossfade",
+      "feature-tour"
+    ],
+    "href": "/catalog/components/sticky-mock-swap",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/sticky-mock-swap.png"
+  },
+  {
+    "name": "stitched-text-draw",
+    "type": "component",
+    "title": "Stitched Text Draw",
+    "description": "Text drawn as thread stitches: a single-stroke display alphabet draws via attribute-driven dashoffset with stitch-tuned dash patterns, seeded angle jitter, needle-hole dots, a leading needle, and a thread-tail overshoot per letter.",
+    "tags": [
+      "motion-primitive",
+      "experiment",
+      "type",
+      "craft",
+      "stitch",
+      "deterministic"
+    ],
+    "href": "/catalog/components/stitched-text-draw",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/stitched-text-draw.png"
+  },
+  {
+    "name": "stop-motion-cadence",
+    "type": "component",
+    "title": "Stop Motion Cadence",
+    "description": "The stepped-time law as a demo primitive: one driver quantizes timeline time to floor(t * fps) / fps and feeds ALL motion; four token paper-cut shapes throw-and-land with squash on hits, 2-frame boil jitter seeded per step, and sparkle accents living exactly 2 to 3 frames.",
+    "tags": [
+      "motion-primitive",
+      "time-law",
+      "stop-motion",
+      "stepped",
+      "boil",
+      "deterministic",
+      "experiment"
+    ],
+    "href": "/catalog/components/stop-motion-cadence",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/stop-motion-cadence.png"
+  },
+  {
+    "name": "store-badge-lockup",
+    "type": "component",
+    "title": "Store Badge Lockup",
+    "description": "Settles a short headline above equal-size App Store and Google Play badges as a token-driven mobile end-card call to action.",
+    "tags": [
+      "prop",
+      "ui-props",
+      "mobile",
+      "store-badges",
+      "cta",
+      "ask"
+    ],
+    "href": "/catalog/components/store-badge-lockup",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/store-badge-lockup.png"
+  },
+  {
+    "name": "strikethrough-replace",
+    "type": "component",
+    "title": "Strikethrough Replace",
+    "description": "Draw a strike line across old text, then reveal the replacement.",
+    "tags": [
+      "motion-primitive",
+      "remocn-port",
+      "typography"
+    ],
+    "href": "/catalog/components/strikethrough-replace",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/strikethrough-replace.png"
+  },
+  {
+    "name": "success-check",
+    "type": "component",
+    "title": "Success Check",
+    "description": "A success check primitive with ring pop, path draw, and subtle rotate blur",
+    "tags": [
+      "video-primitive",
+      "transition-primitive",
+      "transitions-dev-port",
+      "success",
+      "check"
+    ],
+    "href": "/catalog/components/success-check",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/success-check.png"
+  },
+  {
+    "name": "svg-line-draw-loader",
+    "type": "component",
+    "title": "SVG Line Draw Loader",
+    "description": "An Anime.js-style path drawing loader implemented as a seekable GSAP stroke timeline.",
+    "tags": [
+      "video-primitive",
+      "advanced-motion",
+      "anime-inspired",
+      "hyperframes-native"
+    ],
+    "href": "/catalog/components/svg-line-draw-loader",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/svg-line-draw-loader.png"
+  },
+  {
+    "name": "svg-mask-reveal",
+    "type": "component",
+    "title": "SVG Mask Reveal",
+    "description": "A soft token-colored sweep reveals media only through an editable SVG wordmark mask.",
+    "tags": [
+      "effect",
+      "svg",
+      "mask",
+      "wordmark",
+      "reveal",
+      "exhibit"
+    ],
+    "href": "/catalog/components/svg-mask-reveal",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/svg-mask-reveal.png"
+  },
+  {
+    "name": "svg-stroke-trace",
+    "type": "component",
+    "title": "SVG Stroke Trace",
+    "description": "An authored SVG path draws from its measured length, holds with subtle drift, and optionally fills when the path is closed.",
+    "tags": [
+      "motion-primitive",
+      "intro",
+      "reveal",
+      "svg",
+      "stroke",
+      "line-draw"
+    ],
+    "href": "/catalog/components/svg-stroke-trace",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/svg-stroke-trace.png"
+  },
+  {
+    "name": "swipe-rail",
+    "type": "component",
+    "title": "Swipe Rail",
+    "description": "A contact circle leads a horizontal card rail through a fast drag, momentum carry, and settled snap to the next card.",
+    "tags": [
+      "motion-primitive",
+      "interaction",
+      "gesture",
+      "swipe",
+      "cards",
+      "rail"
+    ],
+    "href": "/catalog/components/swipe-rail",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/swipe-rail.png"
+  },
+  {
+    "name": "swirl-vortex",
+    "type": "block",
+    "title": "Swirl Vortex",
+    "description": "Shader transition with swirling vortex distortion",
+    "tags": [
+      "transition",
+      "shader"
+    ],
+    "href": "/catalog/blocks/swirl-vortex",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/swirl-vortex.png"
+  },
+  {
+    "name": "tabs-slide-indicator",
+    "type": "component",
+    "title": "Tabs Slide Indicator",
+    "description": "A pill indicator transition that slides between active tabs",
+    "tags": [
+      "transition-primitive",
+      "transitions-dev-port",
+      "tabs",
+      "indicator"
     ],
-    "href": "/catalog/blocks/reddit-post",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/reddit-post.png"
+    "href": "/catalog/components/tabs-slide-indicator",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/tabs-slide-indicator.png"
   },
   {
-    "name": "ridged-burn",
-    "type": "block",
-    "title": "Ridged Burn",
-    "description": "Shader transition with ridged turbulence burn effect",
+    "name": "telemetry-hud",
+    "type": "component",
+    "title": "Telemetry HUD",
+    "description": "Quiet mono debug-HUD readouts frame a slotted subject: corner brackets draw on, label:value lines tick their values on cues, one readout emphasized in accent. The subject never moves; the HUD breathes zero.",
     "tags": [
-      "transition",
-      "shader"
+      "motion-primitive",
+      "product-demo",
+      "hud",
+      "telemetry",
+      "deterministic"
     ],
-    "href": "/catalog/blocks/ridged-burn",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ridged-burn.png"
+    "href": "/catalog/components/telemetry-hud",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/telemetry-hud.png"
   },
   {
-    "name": "ripple-waves",
-    "type": "block",
-    "title": "Ripple Waves",
-    "description": "Shader transition with concentric ripple wave distortion",
+    "name": "terminal-simulator",
+    "type": "component",
+    "title": "Terminal Simulator",
+    "description": "A terminal window types commands and streams log output.",
     "tags": [
-      "transition",
-      "shader"
+      "code-animation",
+      "remocn-port"
     ],
-    "href": "/catalog/blocks/ripple-waves",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ripple-waves.png"
+    "href": "/catalog/components/terminal-simulator",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/terminal-simulator.png"
   },
   {
-    "name": "sdf-iris",
-    "type": "block",
-    "title": "SDF Iris",
-    "description": "Shader transition with signed distance field iris reveal",
+    "name": "testimonial-card",
+    "type": "component",
+    "title": "Testimonial Card",
+    "description": "Reveals a customer quote at reading pace, then settles its avatar, author name, and handle beneath as a clean proof beat.",
     "tags": [
-      "transition",
-      "shader"
+      "prop",
+      "ui-props",
+      "testimonial",
+      "social-proof",
+      "quote",
+      "prove"
     ],
-    "href": "/catalog/blocks/sdf-iris",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/sdf-iris.png"
+    "href": "/catalog/components/testimonial-card",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/testimonial-card.png"
   },
   {
-    "name": "shimmer-sweep",
+    "name": "testimonial-proof-card",
     "type": "component",
-    "title": "Shimmer Sweep",
-    "description": "Animated light sweep across text or elements using a CSS gradient mask — ideal for AI accents and premium reveals",
+    "title": "Testimonial Proof Card",
+    "description": "A quote card whose testimonial reveals per-line through a soft mask, with an avatar disc (initials default, image slot), mono name and role, an optional company text mark, and one emphasis substring underlined in accent ink after the quote lands.",
     "tags": [
-      "text",
-      "shimmer",
-      "highlight",
-      "effect"
+      "motion-primitive",
+      "proof",
+      "testimonial",
+      "quote",
+      "social-proof",
+      "deterministic"
     ],
-    "href": "/catalog/components/shimmer-sweep",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/shimmer-sweep.png"
+    "href": "/catalog/components/testimonial-proof-card",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/testimonial-proof-card.png"
   },
   {
-    "name": "spain-map",
-    "type": "block",
-    "title": "Spain Map",
-    "description": "Animated Spain choropleth by autonomous community with staggered reveals and gradient legend — D3 conic conformal projection",
+    "name": "text-shimmer",
+    "type": "component",
+    "title": "Text Shimmer",
+    "description": "A static headline receives one clean specular gradient sweep through its glyphs, then returns to its ordinary text color.",
     "tags": [
-      "data",
-      "map",
-      "geography",
-      "spain",
-      "europe",
-      "choropleth"
+      "motion-primitive",
+      "text-effects",
+      "shimmer",
+      "specular",
+      "emphasis"
     ],
-    "href": "/catalog/blocks/spain-map",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/spain-map.png"
+    "href": "/catalog/components/text-shimmer",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/text-shimmer.png"
   },
   {
-    "name": "spotify-card",
-    "type": "block",
-    "title": "Spotify Now Playing",
-    "description": "Animated Spotify now-playing card with album art and progress bar",
+    "name": "text-stagger",
+    "type": "component",
+    "title": "Text Stagger",
+    "description": "A transitions.dev-inspired text stagger primitive with enter, shimmer, and exit-ready words",
     "tags": [
-      "social",
-      "overlay",
-      "spotify"
+      "video-primitive",
+      "transition-primitive",
+      "transitions-dev-port",
+      "text",
+      "stagger"
     ],
-    "href": "/catalog/blocks/spotify-card",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/spotify-card.png"
+    "href": "/catalog/components/text-stagger",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/text-stagger.png"
   },
   {
-    "name": "swirl-vortex",
-    "type": "block",
-    "title": "Swirl Vortex",
-    "description": "Shader transition with swirling vortex distortion",
+    "name": "text-state-swap",
+    "type": "component",
+    "title": "Text State Swap",
+    "description": "A text state swap primitive with outgoing blur and incoming lift",
     "tags": [
-      "transition",
-      "shader"
+      "video-primitive",
+      "transition-primitive",
+      "transitions-dev-port",
+      "text",
+      "swap"
     ],
-    "href": "/catalog/blocks/swirl-vortex",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/swirl-vortex.png"
+    "href": "/catalog/components/text-state-swap",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/text-state-swap.png"
   },
   {
     "name": "texture-mask-text",
@@ -1796,6 +4267,49 @@
     "href": "/catalog/blocks/thermal-distortion",
     "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/thermal-distortion.png"
   },
+  {
+    "name": "thread-message-stack",
+    "type": "block",
+    "title": "Thread Message Stack",
+    "description": "A source-owned editable conversation stack with arbitrary incoming and outgoing messages",
+    "tags": [
+      "social",
+      "conversation",
+      "messages"
+    ],
+    "href": "/catalog/blocks/thread-message-stack",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/thread-message-stack.png"
+  },
+  {
+    "name": "three-orbiting-cards",
+    "type": "component",
+    "title": "Three Orbiting Cards",
+    "description": "A Three.js-powered orbit scene driven by a paused GSAP timeline for deterministic renders.",
+    "tags": [
+      "video-primitive",
+      "three-js",
+      "webgl",
+      "hyperframes-native"
+    ],
+    "href": "/catalog/components/three-orbiting-cards",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/three-orbiting-cards.png"
+  },
+  {
+    "name": "ticker-takeover",
+    "type": "component",
+    "title": "Ticker Takeover",
+    "description": "A mono ticker rolls through options, locks on a final word with an accent flash, and promotes it into a full-frame headline.",
+    "tags": [
+      "motion-primitive",
+      "typography",
+      "ticker",
+      "slot-machine",
+      "headline",
+      "reveal"
+    ],
+    "href": "/catalog/components/ticker-takeover",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/ticker-takeover.png"
+  },
   {
     "name": "tiktok-follow",
     "type": "block",
@@ -1809,6 +4323,127 @@
     "href": "/catalog/blocks/tiktok-follow",
     "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/tiktok-follow.png"
   },
+  {
+    "name": "tilt-card",
+    "type": "component",
+    "title": "Tilt Card",
+    "description": "A transitions.dev-inspired tilt card primitive with depth layers and hover-style parallax",
+    "tags": [
+      "video-primitive",
+      "transition-primitive",
+      "transitions-dev-port",
+      "card",
+      "tilt"
+    ],
+    "href": "/catalog/components/tilt-card",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/tilt-card.png"
+  },
+  {
+    "name": "titlecard-calm",
+    "type": "component",
+    "title": "Titlecard Calm",
+    "description": "A restrained title card where a mono kicker and generous grotesque headline fade upward, drift almost imperceptibly, and exit cleanly.",
+    "tags": [
+      "motion-primitive",
+      "typography",
+      "title-card",
+      "calm",
+      "orient"
+    ],
+    "href": "/catalog/components/titlecard-calm",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/titlecard-calm.png"
+  },
+  {
+    "name": "titlecard-lockup",
+    "type": "component",
+    "title": "Titlecard Lockup",
+    "description": "The calm breather titlecard: an optional mono kicker fades up, the wordmark settles dead-center with one restrained move, a hairline rule draws left to right, a mono label fades beneath, and the lockup holds truly still.",
+    "tags": [
+      "motion-primitive",
+      "typography",
+      "title-card",
+      "lockup",
+      "breather",
+      "orient"
+    ],
+    "href": "/catalog/components/titlecard-lockup",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/titlecard-lockup.png"
+  },
+  {
+    "name": "toggle-flip",
+    "type": "component",
+    "title": "Toggle Flip",
+    "description": "An oversized UI toggle switch that flips with real physicality: thumb overshoot, track color crossfade, and a soft press-compress before release. The reference prop of the ui-props family.",
+    "tags": [
+      "prop",
+      "ui-props",
+      "toggle",
+      "interaction",
+      "reference-prop",
+      "demonstrate"
+    ],
+    "href": "/catalog/components/toggle-flip",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/toggle-flip.png"
+  },
+  {
+    "name": "top-down-letters",
+    "type": "component",
+    "title": "Top-Down Letters",
+    "description": "Letters descend from above in a pronounced staircase with zero blur.",
+    "tags": [
+      "video-primitive",
+      "motion-primitive",
+      "remocn-port",
+      "typography"
+    ],
+    "href": "/catalog/components/top-down-letters",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/top-down-letters.png"
+  },
+  {
+    "name": "touch-indicator",
+    "type": "component",
+    "title": "Touch Indicator",
+    "description": "A translucent contact-circle gesture actor for mobile UI scenes: it touches the glass, causes a same-frame response, and lifts. Tap or swipe, picked by variable.",
+    "tags": [
+      "motion-primitive",
+      "mobile",
+      "gesture",
+      "touch",
+      "pointer"
+    ],
+    "href": "/catalog/components/touch-indicator",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/touch-indicator.png"
+  },
+  {
+    "name": "tracing-beam",
+    "type": "component",
+    "title": "Tracing Beam",
+    "description": "A glowing dash follows one SVG path through three UI elements, lifting and brightening each element in sequence.",
+    "tags": [
+      "motion-primitive",
+      "product-demo",
+      "attention",
+      "beam",
+      "path",
+      "spotlight"
+    ],
+    "href": "/catalog/components/tracing-beam",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/tracing-beam.png"
+  },
+  {
+    "name": "tracking-in",
+    "type": "component",
+    "title": "Tracking In",
+    "description": "A precise letter-spacing reveal for premium headings and interface labels",
+    "tags": [
+      "motion-primitive",
+      "text",
+      "reveal",
+      "typography"
+    ],
+    "href": "/catalog/components/tracking-in",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/tracking-in.png"
+  },
   {
     "name": "transitions-3d",
     "type": "block",
@@ -1965,6 +4600,65 @@
     "href": "/catalog/blocks/transitions-scale",
     "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-scale.png"
   },
+  {
+    "name": "trust-strip",
+    "type": "component",
+    "title": "Trust Strip",
+    "description": "A monochrome trust row of wide-tracked mono wordmarks that fade in with an opacity-only left-to-right stagger, then hold dead still.",
+    "tags": [
+      "motion-primitive",
+      "proof",
+      "trust",
+      "logo-strip",
+      "wordmarks"
+    ],
+    "href": "/catalog/components/trust-strip",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/trust-strip.png"
+  },
+  {
+    "name": "type-match-cut",
+    "type": "component",
+    "title": "Type Match Cut",
+    "description": "A headline splits vertically around an incoming panel, which grows from the negative space and takes the frame as the words exit through opposite edges.",
+    "tags": [
+      "motion-primitive",
+      "transition",
+      "typography",
+      "match-cut",
+      "continuity"
+    ],
+    "href": "/catalog/components/type-match-cut",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/type-match-cut.png"
+  },
+  {
+    "name": "typed-prompt",
+    "type": "component",
+    "title": "Typed Prompt",
+    "description": "A prompt line types itself in chunked human cadence behind a deterministic blinking caret, with optional backspace-and-retype correction of the final word.",
+    "tags": [
+      "motion-primitive",
+      "product-demo",
+      "typing",
+      "prompt",
+      "deterministic"
+    ],
+    "href": "/catalog/components/typed-prompt",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/typed-prompt.png"
+  },
+  {
+    "name": "typewriter",
+    "type": "component",
+    "title": "Typewriter",
+    "description": "Character-by-character text reveal with a deterministic blinking cursor.",
+    "tags": [
+      "video-primitive",
+      "motion-primitive",
+      "remocn-port",
+      "typography"
+    ],
+    "href": "/catalog/components/typewriter",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/typewriter.png"
+  },
   {
     "name": "ui-3d-reveal",
     "type": "block",
@@ -1978,6 +4672,23 @@
     "href": "/catalog/blocks/ui-3d-reveal",
     "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ui-3d-reveal.png"
   },
+  {
+    "name": "ui-focus-zoom",
+    "type": "component",
+    "title": "UI Focus Zoom",
+    "description": "A full app surface establishes with one settle, then the camera zooms and pans to an anchored region on its cue and holds the zoomed state, with an optional soft focus halo at the anchor. The surface is a slot with a token-styled skeleton default.",
+    "tags": [
+      "camera",
+      "product-demo",
+      "zoom",
+      "focus",
+      "pan",
+      "slot",
+      "servo"
+    ],
+    "href": "/catalog/components/ui-focus-zoom",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/ui-focus-zoom.png"
+  },
   {
     "name": "us-map",
     "type": "block",
@@ -2042,6 +4753,86 @@
     "href": "/catalog/blocks/us-map-hex",
     "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map-hex.png"
   },
+  {
+    "name": "variable-axis-type",
+    "type": "component",
+    "title": "Variable Axis Type",
+    "description": "A locked one-line headline whose weight or width axis morphs into a decisive emphasis beat.",
+    "tags": [
+      "typography",
+      "variable-font",
+      "kinetic-type",
+      "axis",
+      "emphasize"
+    ],
+    "href": "/catalog/components/variable-axis-type",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/variable-axis-type.png"
+  },
+  {
+    "name": "variable-font-flex",
+    "type": "component",
+    "title": "Variable Font Flex",
+    "description": "A word lands while its variable-font weight and width axes flex from hairline-condensed to black-wide with per-character stagger; font-size eases inversely so the letterforms gain mass while the box holds.",
+    "tags": [
+      "motion-primitive",
+      "experiment",
+      "type",
+      "variable-font",
+      "deterministic"
+    ],
+    "href": "/catalog/components/variable-font-flex",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/variable-font-flex.png"
+  },
+  {
+    "name": "vector-editor-rig",
+    "type": "component",
+    "title": "Vector Editor Rig",
+    "description": "A dark design-tool app chrome with a live vector pen path, sequential anchor points, bezier handles, a selection frame, and theme-driven blue accents.",
+    "tags": [
+      "prop",
+      "ui-props",
+      "demonstrate",
+      "vector",
+      "design-tool",
+      "pen-tool",
+      "bezier",
+      "app-chrome"
+    ],
+    "href": "/catalog/components/vector-editor-rig",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/vector-editor-rig.png"
+  },
+  {
+    "name": "velocity-throw-snap",
+    "type": "component",
+    "title": "Velocity Throw Snap",
+    "description": "A five-shot rail whips past on a fast decaying curve, then overshoots and snaps the selected hero shot exactly to center.",
+    "tags": [
+      "motion-primitive",
+      "feature-tour",
+      "rail",
+      "velocity",
+      "throw",
+      "snap",
+      "physics"
+    ],
+    "href": "/catalog/components/velocity-throw-snap",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/velocity-throw-snap.png"
+  },
+  {
+    "name": "vfx-anamorphic-flare",
+    "type": "block",
+    "title": "Anamorphic Streak Flare",
+    "description": "A drifting field of bright points, each one throwing the long horizontal blue-violet streak a real anamorphic cinema lens produces. Built from the measured filter constants: a 0.3 high-pass, 80 horizontal taps at quarter resolution, a samples/3 gain and a 0x7a8aff tint.",
+    "tags": [
+      "vfx",
+      "background",
+      "showcase",
+      "optical",
+      "canvas"
+    ],
+    "href": "/catalog/blocks/vfx-anamorphic-flare",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-anamorphic-flare.png"
+  },
   {
     "name": "vfx-iphone-device",
     "type": "block",
@@ -2150,6 +4941,21 @@
     "href": "/catalog/components/vignette",
     "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/vignette.png"
   },
+  {
+    "name": "vox-annotate",
+    "type": "component",
+    "title": "Vox Annotate",
+    "description": "The Vox-style annotate gesture: a keyword in a held sentence gets a hand-drawn marker while a thin connector draws up to a mono callout label, all as one choreographed beat on the cue.",
+    "tags": [
+      "motion-primitive",
+      "typography",
+      "annotation",
+      "marker",
+      "deterministic"
+    ],
+    "href": "/catalog/components/vox-annotate",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/vox-annotate.png"
+  },
   {
     "name": "vpn-youtube-spot",
     "type": "block",
@@ -2164,6 +4970,21 @@
     "href": "/catalog/blocks/vpn-youtube-spot",
     "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vpn-youtube-spot.png"
   },
+  {
+    "name": "weight-wave",
+    "type": "block",
+    "title": "Weight Wave",
+    "description": "A crest of thickness travels along a headline: each character swells from light to black and leans forward as the wave passes, driven by the wght and slnt variable-font axes rather than by transforms.",
+    "tags": [
+      "typography",
+      "kinetic-type",
+      "title",
+      "variable-font",
+      "text"
+    ],
+    "href": "/catalog/blocks/weight-wave",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/weight-wave.png"
+  },
   {
     "name": "whip-pan",
     "type": "block",
@@ -2176,6 +4997,55 @@
     "href": "/catalog/blocks/whip-pan",
     "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/whip-pan.png"
   },
+  {
+    "name": "whip-pan-cut",
+    "type": "component",
+    "title": "Whip Pan Cut",
+    "description": "A full-frame whip pan: scene A whips off laterally with capped directional motion blur while scene B enters in the same direction at matched velocity, on a speed-ramp profile with a decelerating catch. Both scenes ride one strip, so seam velocity is exact by construction. Callers fill the named before/after slot panels; token-styled defaults render when a slot is left empty.",
+    "tags": [
+      "transition",
+      "whip-pan",
+      "motion-blur",
+      "velocity-match",
+      "speed-ramp",
+      "bridge",
+      "slots"
+    ],
+    "href": "/catalog/components/whip-pan-cut",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/whip-pan-cut.png"
+  },
+  {
+    "name": "whiteboard-ink",
+    "type": "component",
+    "title": "Whiteboard Ink",
+    "description": "A whiteboard sketch draws one measured stroke at a time while a pen nib follows the active tip. Preset sketches (bulb, flow, rocket) or your own multi-stroke SVG paths via the strokes slot; a path marked data-ink=accent rides the accent token.",
+    "tags": [
+      "motion-primitive",
+      "intro",
+      "reveal",
+      "svg",
+      "whiteboard",
+      "line-draw",
+      "slot"
+    ],
+    "href": "/catalog/components/whiteboard-ink",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/whiteboard-ink.png"
+  },
+  {
+    "name": "wordmark-tiles",
+    "type": "component",
+    "title": "Wordmark Tiles",
+    "description": "A wordmark resolves from deterministic color noise into correctly cropped glyph tiles through a spatially modulated GSAP wave.",
+    "tags": [
+      "typography",
+      "wordmark",
+      "tiles",
+      "raster",
+      "reveal"
+    ],
+    "href": "/catalog/components/wordmark-tiles",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/wordmark-tiles.png"
+  },
   {
     "name": "world-map",
     "type": "block",
@@ -2191,6 +5061,18 @@
     "href": "/catalog/blocks/world-map",
     "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/world-map.png"
   },
+  {
+    "name": "x-follow-card",
+    "type": "component",
+    "title": "X Follow Card",
+    "description": "A social follow card with avatar, handle, and follower motion.",
+    "tags": [
+      "social-overlay",
+      "remocn-port"
+    ],
+    "href": "/catalog/components/x-follow-card",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/x-follow-card.png"
+  },
   {
     "name": "x-post",
     "type": "block",
@@ -2336,5 +5218,17 @@
     ],
     "href": "/catalog/blocks/yt-vertical-fill",
     "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-vertical-fill.png"
+  },
+  {
+    "name": "zoom-through-transition",
+    "type": "component",
+    "title": "Zoom Through Transition",
+    "description": "A transition that zooms through a focal card into the next scene.",
+    "tags": [
+      "transition-primitive",
+      "remocn-port"
+    ],
+    "href": "/catalog/components/zoom-through-transition",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/zoom-through-transition.png"
   }
 ]
diff --git a/docs/public/catalog/blocks/app-showcase/app-showcase.html b/docs/public/catalog/blocks/app-showcase/app-showcase.html
new file mode 100644
index 0000000000..52b7c2d107
--- /dev/null
+++ b/docs/public/catalog/blocks/app-showcase/app-showcase.html
@@ -0,0 +1,947 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>app-showcase</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background-color: #0a0a0f;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      data-composition-id="app-showcase"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="5.5"
+    >
+      <!-- Background -->
+      <div class="s3-bg" id="s3Bg"></div>
+      <div class="s3-bg-glow" id="s3BgGlow"></div>
+
+      <!-- Stage wrapper for ambient scale -->
+      <div class="s3-stage" id="s3Stage">
+        <!-- ═══════════════════════════════════════
+           LEFT PHONE — Lifestyle / Motivational
+      ═══════════════════════════════════════ -->
+        <div class="s3-phone s3-phone-left" id="s3PhoneLeft">
+          <div class="s3-bezel">
+            <div class="s3-notch"></div>
+            <div class="s3-screen s3-screen-left">
+              <!-- Abstract exercise shapes -->
+              <div class="left-shapes">
+                <svg viewBox="0 0 304 400" xmlns="http://www.w3.org/2000/svg" fill="none">
+                  <!-- Abstract running figure — geometric -->
+                  <circle cx="152" cy="80" r="28" fill="#271f15" opacity="0.15" />
+                  <line
+                    x1="152"
+                    y1="108"
+                    x2="152"
+                    y2="200"
+                    stroke="#271f15"
+                    stroke-width="6"
+                    stroke-linecap="round"
+                    opacity="0.15"
+                  />
+                  <line
+                    x1="152"
+                    y1="145"
+                    x2="115"
+                    y2="175"
+                    stroke="#271f15"
+                    stroke-width="6"
+                    stroke-linecap="round"
+                    opacity="0.15"
+                  />
+                  <line
+                    x1="152"
+                    y1="145"
+                    x2="195"
+                    y2="165"
+                    stroke="#271f15"
+                    stroke-width="6"
+                    stroke-linecap="round"
+                    opacity="0.15"
+                  />
+                  <line
+                    x1="152"
+                    y1="200"
+                    x2="120"
+                    y2="260"
+                    stroke="#271f15"
+                    stroke-width="6"
+                    stroke-linecap="round"
+                    opacity="0.15"
+                  />
+                  <line
+                    x1="152"
+                    y1="200"
+                    x2="190"
+                    y2="255"
+                    stroke="#271f15"
+                    stroke-width="6"
+                    stroke-linecap="round"
+                    opacity="0.15"
+                  />
+                  <!-- Decorative arcs -->
+                  <path
+                    d="M60 300 Q152 240 244 300"
+                    stroke="#e4fa72"
+                    stroke-width="3"
+                    fill="none"
+                    opacity="0.5"
+                  />
+                  <path
+                    d="M40 330 Q152 260 264 330"
+                    stroke="#e4fa72"
+                    stroke-width="2"
+                    fill="none"
+                    opacity="0.3"
+                  />
+                </svg>
+              </div>
+              <div class="left-bottom">
+                <div class="left-tagline" id="s3Tagline">Unleash Full Potential</div>
+                <div class="left-cta">START NOW</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- ═══════════════════════════════════════
+           CENTER PHONE — Dashboard (Hero)
+      ═══════════════════════════════════════ -->
+        <div class="s3-phone s3-phone-center" id="s3PhoneCenter">
+          <div class="s3-bezel">
+            <div class="s3-notch"></div>
+            <div class="s3-screen s3-screen-center">
+              <!-- Header -->
+              <div class="center-header">
+                <div class="center-avatar">JM</div>
+                <div class="center-user-info">
+                  <div class="center-name">James Medrano</div>
+                  <div class="center-subtitle">Premium Member</div>
+                </div>
+                <div class="center-bell">
+                  <svg viewBox="0 0 20 20" width="20" height="20" fill="none">
+                    <path
+                      d="M10 2a5 5 0 00-5 5v3l-1.5 2.5h13L15 10V7a5 5 0 00-5-5z"
+                      stroke="#7c857c"
+                      stroke-width="1.4"
+                      stroke-linejoin="round"
+                    />
+                    <path
+                      d="M8 16.5a2 2 0 004 0"
+                      stroke="#7c857c"
+                      stroke-width="1.4"
+                      stroke-linecap="round"
+                    />
+                    <circle cx="14" cy="5" r="3" fill="#e4fa72" />
+                  </svg>
+                </div>
+              </div>
+
+              <!-- Weekly Goal -->
+              <div class="center-goal">
+                <div class="goal-label">Weekly Goal</div>
+                <div class="goal-ring-wrap">
+                  <svg class="goal-ring" viewBox="0 0 140 140">
+                    <circle
+                      class="ring-track"
+                      cx="70"
+                      cy="70"
+                      r="52"
+                      fill="none"
+                      stroke="#333"
+                      stroke-width="10"
+                    />
+                    <circle
+                      class="ring-fill"
+                      id="s3Ring"
+                      cx="70"
+                      cy="70"
+                      r="52"
+                      fill="none"
+                      stroke="#e4fa72"
+                      stroke-width="10"
+                      stroke-linecap="round"
+                      transform="rotate(-90 70 70)"
+                    />
+                  </svg>
+                  <div class="goal-count">
+                    <span class="goal-num">2</span>
+                    <span class="goal-sep">/</span>
+                    <span class="goal-den">3</span>
+                  </div>
+                </div>
+                <div class="goal-days">
+                  <span class="day done">M</span>
+                  <span class="day done">T</span>
+                  <span class="day">W</span>
+                  <span class="day">T</span>
+                  <span class="day">F</span>
+                  <span class="day">S</span>
+                  <span class="day">S</span>
+                </div>
+              </div>
+
+              <!-- Your Progress -->
+              <div class="center-progress">
+                <div class="progress-header">
+                  <span class="progress-title">Your Progress</span>
+                  <span class="progress-link">See all</span>
+                </div>
+                <div class="progress-bars">
+                  <div class="bar-row">
+                    <div class="bar-icon">
+                      <svg viewBox="0 0 16 16" width="14" height="14" fill="none">
+                        <path
+                          d="M8 2l1.5 3H13l-2.5 2 1 3L8 8.5 4.5 10l1-3L3 5h3.5z"
+                          fill="#e4fa72"
+                        />
+                      </svg>
+                    </div>
+                    <div class="bar-info">
+                      <span class="bar-name">Running</span>
+                      <span class="bar-val">5.2 km</span>
+                    </div>
+                    <div class="bar-track"><div class="bar-value bar-v1" id="s3Bar1"></div></div>
+                  </div>
+                  <div class="bar-row">
+                    <div class="bar-icon">
+                      <svg viewBox="0 0 16 16" width="14" height="14" fill="none">
+                        <circle cx="8" cy="8" r="5" stroke="#e4fa72" stroke-width="2" />
+                      </svg>
+                    </div>
+                    <div class="bar-info">
+                      <span class="bar-name">Cycling</span>
+                      <span class="bar-val">12.8 km</span>
+                    </div>
+                    <div class="bar-track"><div class="bar-value bar-v2" id="s3Bar2"></div></div>
+                  </div>
+                  <div class="bar-row">
+                    <div class="bar-icon">
+                      <svg viewBox="0 0 16 16" width="14" height="14" fill="none">
+                        <rect
+                          x="3"
+                          y="6"
+                          width="10"
+                          height="6"
+                          rx="1"
+                          stroke="#e4fa72"
+                          stroke-width="1.5"
+                        />
+                        <path d="M6 6V4a2 2 0 014 0v2" stroke="#e4fa72" stroke-width="1.5" />
+                      </svg>
+                    </div>
+                    <div class="bar-info">
+                      <span class="bar-name">Strength</span>
+                      <span class="bar-val">45 min</span>
+                    </div>
+                    <div class="bar-track"><div class="bar-value bar-v3" id="s3Bar3"></div></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- ═══════════════════════════════════════
+           RIGHT PHONE — Calories Data
+      ═══════════════════════════════════════ -->
+        <div class="s3-phone s3-phone-right" id="s3PhoneRight">
+          <div class="s3-bezel">
+            <div class="s3-notch"></div>
+            <div class="s3-screen s3-screen-right">
+              <div class="right-header">
+                <div class="right-title">Burned Calories</div>
+                <div class="right-value">740 <span class="right-unit">kcal</span></div>
+              </div>
+
+              <div class="right-graph-wrap">
+                <svg class="right-graph" viewBox="0 0 260 130" xmlns="http://www.w3.org/2000/svg">
+                  <!-- Grid lines -->
+                  <line
+                    x1="10"
+                    y1="25"
+                    x2="250"
+                    y2="25"
+                    stroke="#d9e0bc"
+                    stroke-width="0.5"
+                    opacity="0.5"
+                  />
+                  <line
+                    x1="10"
+                    y1="55"
+                    x2="250"
+                    y2="55"
+                    stroke="#d9e0bc"
+                    stroke-width="0.5"
+                    opacity="0.5"
+                  />
+                  <line
+                    x1="10"
+                    y1="85"
+                    x2="250"
+                    y2="85"
+                    stroke="#d9e0bc"
+                    stroke-width="0.5"
+                    opacity="0.5"
+                  />
+                  <line
+                    x1="10"
+                    y1="115"
+                    x2="250"
+                    y2="115"
+                    stroke="#d9e0bc"
+                    stroke-width="0.5"
+                    opacity="0.5"
+                  />
+                  <!-- Area fill -->
+                  <path
+                    class="graph-area"
+                    id="s3GraphArea"
+                    d="M10,105 L50,80 90,90 130,45 170,60 210,25 250,35 250,115 10,115 Z"
+                    fill="#e4fa72"
+                    opacity="0.15"
+                  />
+                  <!-- Line -->
+                  <polyline
+                    class="graph-line"
+                    id="s3GraphLine"
+                    points="10,105 50,80 90,90 130,45 170,60 210,25 250,35"
+                    fill="none"
+                    stroke="#e4fa72"
+                    stroke-width="2.5"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                  <!-- Dots -->
+                  <circle class="graph-dot" cx="10" cy="105" r="3.5" fill="#e4fa72" />
+                  <circle class="graph-dot" cx="50" cy="80" r="3.5" fill="#e4fa72" />
+                  <circle class="graph-dot" cx="90" cy="90" r="3.5" fill="#e4fa72" />
+                  <circle class="graph-dot" cx="130" cy="45" r="3.5" fill="#e4fa72" />
+                  <circle class="graph-dot" cx="170" cy="60" r="3.5" fill="#e4fa72" />
+                  <circle class="graph-dot" cx="210" cy="25" r="3.5" fill="#e4fa72" />
+                  <circle class="graph-dot" cx="250" cy="35" r="3.5" fill="#e4fa72" />
+                </svg>
+                <div class="right-labels">
+                  <span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span
+                  ><span>Sat</span><span>Sun</span>
+                </div>
+              </div>
+
+              <div class="right-stats">
+                <div class="stat-pill">
+                  <span class="stat-dot" style="background: #e4fa72"></span>
+                  <span class="stat-label">Active</span>
+                  <span class="stat-num">540</span>
+                </div>
+                <div class="stat-pill">
+                  <span class="stat-dot" style="background: #7c857c"></span>
+                  <span class="stat-label">Rest</span>
+                  <span class="stat-num">200</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <style>
+        @import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap");
+
+        [data-composition-id="app-showcase"] {
+          position: relative;
+          width: 1920px;
+          height: 1080px;
+          overflow: hidden;
+          font-family: "DM Sans", sans-serif;
+          color: #271f15;
+        }
+
+        /* ── Background ── */
+        [data-composition-id="app-showcase"] .s3-bg {
+          position: absolute;
+          inset: 0;
+          background: linear-gradient(160deg, #f1f2ec 0%, #e8ecda 40%, #f1f2ec 100%);
+        }
+        [data-composition-id="app-showcase"] .s3-bg-glow {
+          position: absolute;
+          width: 900px;
+          height: 900px;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          background: radial-gradient(circle, rgba(228, 250, 114, 0.18) 0%, transparent 70%);
+          border-radius: 50%;
+        }
+
+        /* ── Stage ── */
+        [data-composition-id="app-showcase"] .s3-stage {
+          position: absolute;
+          inset: 0;
+          transform-origin: center center;
+        }
+
+        /* ── Phones ── */
+        [data-composition-id="app-showcase"] .s3-phone {
+          position: absolute;
+          width: 320px;
+          height: 650px;
+          top: 215px;
+          left: 800px;
+        }
+        [data-composition-id="app-showcase"] .s3-phone-center {
+          z-index: 30;
+        }
+        [data-composition-id="app-showcase"] .s3-phone-left {
+          z-index: 20;
+        }
+        [data-composition-id="app-showcase"] .s3-phone-right {
+          z-index: 20;
+        }
+
+        /* ── Bezel ── */
+        [data-composition-id="app-showcase"] .s3-bezel {
+          width: 100%;
+          height: 100%;
+          border-radius: 42px;
+          background: #271f15;
+          padding: 8px;
+          box-shadow:
+            0 24px 64px rgba(39, 31, 21, 0.35),
+            0 4px 16px rgba(39, 31, 21, 0.15);
+          position: relative;
+          overflow: hidden;
+        }
+        [data-composition-id="app-showcase"] .s3-notch {
+          position: absolute;
+          top: 8px;
+          left: 50%;
+          transform: translateX(-50%);
+          width: 100px;
+          height: 26px;
+          background: #271f15;
+          border-radius: 0 0 18px 18px;
+          z-index: 5;
+        }
+
+        /* ── Screens ── */
+        [data-composition-id="app-showcase"] .s3-screen {
+          width: 100%;
+          height: 100%;
+          border-radius: 36px;
+          overflow: hidden;
+          position: relative;
+        }
+
+        /* Left screen */
+        [data-composition-id="app-showcase"] .s3-screen-left {
+          background: linear-gradient(160deg, #d9e0bc 0%, #c8d4a0 50%, #b8c78a 100%);
+          display: flex;
+          flex-direction: column;
+          justify-content: flex-end;
+        }
+        [data-composition-id="app-showcase"] .left-shapes {
+          position: absolute;
+          top: 40px;
+          left: 0;
+          width: 100%;
+          height: 400px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        [data-composition-id="app-showcase"] .left-shapes svg {
+          width: 200px;
+          height: 280px;
+        }
+        [data-composition-id="app-showcase"] .left-bottom {
+          padding: 0 28px 40px;
+          position: relative;
+          z-index: 2;
+        }
+        [data-composition-id="app-showcase"] .left-tagline {
+          font-size: 28px;
+          font-weight: 700;
+          color: #271f15;
+          line-height: 1.15;
+          margin-bottom: 16px;
+          letter-spacing: -0.02em;
+        }
+        [data-composition-id="app-showcase"] .left-cta {
+          display: inline-block;
+          background: #271f15;
+          color: #e4fa72;
+          font-size: 13px;
+          font-weight: 700;
+          letter-spacing: 0.08em;
+          padding: 10px 28px;
+          border-radius: 24px;
+        }
+
+        /* Center screen */
+        [data-composition-id="app-showcase"] .s3-screen-center {
+          background: #1a1a1a;
+          padding: 42px 22px 22px;
+          display: flex;
+          flex-direction: column;
+          gap: 18px;
+        }
+
+        [data-composition-id="app-showcase"] .center-header {
+          display: flex;
+          align-items: center;
+          gap: 10px;
+        }
+        [data-composition-id="app-showcase"] .center-avatar {
+          width: 40px;
+          height: 40px;
+          border-radius: 50%;
+          background: linear-gradient(135deg, #e4fa72, #d9e0bc);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 15px;
+          font-weight: 700;
+          color: #271f15;
+          flex-shrink: 0;
+        }
+        [data-composition-id="app-showcase"] .center-user-info {
+          flex: 1;
+        }
+        [data-composition-id="app-showcase"] .center-name {
+          font-size: 18px;
+          font-weight: 700;
+          color: #f1f2ec;
+          line-height: 1.2;
+        }
+        [data-composition-id="app-showcase"] .center-subtitle {
+          font-size: 12px;
+          font-weight: 400;
+          color: #7c857c;
+          margin-top: 1px;
+        }
+        [data-composition-id="app-showcase"] .center-bell {
+          flex-shrink: 0;
+        }
+
+        /* Weekly Goal */
+        [data-composition-id="app-showcase"] .center-goal {
+          background: #242424;
+          border-radius: 20px;
+          padding: 18px 16px;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          gap: 12px;
+        }
+        [data-composition-id="app-showcase"] .goal-label {
+          font-size: 15px;
+          font-weight: 500;
+          color: #7c857c;
+          align-self: flex-start;
+        }
+        [data-composition-id="app-showcase"] .goal-ring-wrap {
+          position: relative;
+          width: 130px;
+          height: 130px;
+        }
+        [data-composition-id="app-showcase"] .goal-ring {
+          width: 100%;
+          height: 100%;
+        }
+        [data-composition-id="app-showcase"] .ring-track {
+          opacity: 0.3;
+        }
+        [data-composition-id="app-showcase"] .goal-count {
+          position: absolute;
+          inset: 0;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          gap: 2px;
+        }
+        [data-composition-id="app-showcase"] .goal-num {
+          font-size: 36px;
+          font-weight: 700;
+          color: #e4fa72;
+        }
+        [data-composition-id="app-showcase"] .goal-sep {
+          font-size: 24px;
+          font-weight: 400;
+          color: #7c857c;
+          margin: 0 2px;
+        }
+        [data-composition-id="app-showcase"] .goal-den {
+          font-size: 24px;
+          font-weight: 400;
+          color: #7c857c;
+        }
+        [data-composition-id="app-showcase"] .goal-days {
+          display: flex;
+          gap: 8px;
+        }
+        [data-composition-id="app-showcase"] .day {
+          width: 28px;
+          height: 28px;
+          border-radius: 50%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 11px;
+          font-weight: 500;
+          color: #7c857c;
+          background: #1a1a1a;
+        }
+        [data-composition-id="app-showcase"] .day.done {
+          background: #e4fa72;
+          color: #271f15;
+          font-weight: 700;
+        }
+
+        /* Progress section */
+        [data-composition-id="app-showcase"] .center-progress {
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          gap: 12px;
+        }
+        [data-composition-id="app-showcase"] .progress-header {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+        [data-composition-id="app-showcase"] .progress-title {
+          font-size: 15px;
+          font-weight: 500;
+          color: #f1f2ec;
+        }
+        [data-composition-id="app-showcase"] .progress-link {
+          font-size: 12px;
+          font-weight: 400;
+          color: #e4fa72;
+        }
+        [data-composition-id="app-showcase"] .progress-bars {
+          display: flex;
+          flex-direction: column;
+          gap: 12px;
+        }
+        [data-composition-id="app-showcase"] .bar-row {
+          display: flex;
+          align-items: center;
+          gap: 10px;
+        }
+        [data-composition-id="app-showcase"] .bar-icon {
+          width: 28px;
+          height: 28px;
+          border-radius: 8px;
+          background: #2a2a2a;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          flex-shrink: 0;
+        }
+        [data-composition-id="app-showcase"] .bar-info {
+          width: 70px;
+          flex-shrink: 0;
+        }
+        [data-composition-id="app-showcase"] .bar-name {
+          display: block;
+          font-size: 12px;
+          font-weight: 500;
+          color: #f1f2ec;
+          line-height: 1.2;
+        }
+        [data-composition-id="app-showcase"] .bar-val {
+          display: block;
+          font-size: 10px;
+          font-weight: 400;
+          color: #7c857c;
+        }
+        [data-composition-id="app-showcase"] .bar-track {
+          flex: 1;
+          height: 8px;
+          background: #2a2a2a;
+          border-radius: 4px;
+          overflow: hidden;
+        }
+        [data-composition-id="app-showcase"] .bar-value {
+          height: 100%;
+          border-radius: 4px;
+          background: #e4fa72;
+          width: 0%;
+        }
+
+        /* Right screen */
+        [data-composition-id="app-showcase"] .s3-screen-right {
+          background: #f1f2ec;
+          padding: 42px 20px 24px;
+          display: flex;
+          flex-direction: column;
+          gap: 14px;
+        }
+        [data-composition-id="app-showcase"] .right-header {
+          display: flex;
+          flex-direction: column;
+          gap: 4px;
+        }
+        [data-composition-id="app-showcase"] .right-title {
+          font-size: 14px;
+          font-weight: 500;
+          color: #7c857c;
+        }
+        [data-composition-id="app-showcase"] .right-value {
+          font-size: 40px;
+          font-weight: 700;
+          color: #271f15;
+          line-height: 1;
+          letter-spacing: -0.03em;
+        }
+        [data-composition-id="app-showcase"] .right-unit {
+          font-size: 20px;
+          font-weight: 400;
+          color: #7c857c;
+        }
+
+        [data-composition-id="app-showcase"] .right-graph-wrap {
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          gap: 6px;
+        }
+        [data-composition-id="app-showcase"] .right-graph {
+          width: 100%;
+          flex: 1;
+        }
+        [data-composition-id="app-showcase"] .right-labels {
+          display: flex;
+          justify-content: space-between;
+          padding: 0 6px;
+          font-size: 10px;
+          font-weight: 400;
+          color: #7c857c;
+        }
+
+        [data-composition-id="app-showcase"] .right-stats {
+          display: flex;
+          gap: 12px;
+        }
+        [data-composition-id="app-showcase"] .stat-pill {
+          display: flex;
+          align-items: center;
+          gap: 6px;
+          background: #e8ecda;
+          border-radius: 20px;
+          padding: 8px 14px;
+        }
+        [data-composition-id="app-showcase"] .stat-dot {
+          width: 8px;
+          height: 8px;
+          border-radius: 50%;
+          flex-shrink: 0;
+        }
+        [data-composition-id="app-showcase"] .stat-label {
+          font-size: 12px;
+          font-weight: 400;
+          color: #7c857c;
+        }
+        [data-composition-id="app-showcase"] .stat-num {
+          font-size: 13px;
+          font-weight: 700;
+          color: #271f15;
+        }
+      </style>
+
+      <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+      <script>
+        (function () {
+          var S = '[data-composition-id="app-showcase"] ';
+          window.__timelines = window.__timelines || {};
+          var tl = gsap.timeline({ paused: true });
+
+          // ── SVG setup ──
+          var graphLine = document.querySelector(S + "#s3GraphLine");
+          var graphLen = graphLine.getTotalLength();
+          gsap.set(graphLine, { strokeDasharray: graphLen, strokeDashoffset: graphLen });
+
+          var graphArea = document.querySelector(S + "#s3GraphArea");
+          gsap.set(graphArea, { opacity: 0 });
+
+          var graphDots = document.querySelectorAll(S + ".graph-dot");
+          gsap.set(graphDots, { opacity: 0, scale: 0 });
+
+          var CIRC = 2 * 3.14159265 * 52;
+          gsap.set(S + "#s3Ring", { strokeDasharray: CIRC, strokeDashoffset: CIRC });
+
+          // ── Initial states ──
+          gsap.set(S + ".s3-bg", { opacity: 0 });
+          gsap.set(S + ".s3-bg-glow", { opacity: 0 });
+          // Center phone: starts scaled down + hidden
+          gsap.set(S + "#s3PhoneCenter", { opacity: 0, scale: 0.85 });
+          // Side phones: start stacked behind center (same position), hidden
+          gsap.set(S + "#s3PhoneLeft", { opacity: 0, x: 0, rotation: 0 });
+          gsap.set(S + "#s3PhoneRight", { opacity: 0, x: 0, rotation: 0 });
+          gsap.set(S + ".bar-value", { width: "0%" });
+          gsap.set(S + "#s3Tagline", { opacity: 0, y: 20 });
+          gsap.set(S + ".left-cta", { opacity: 0, y: 12 });
+
+          // ════════════════════════════════════
+          // BUILD PHASE (0–2s)
+          // ════════════════════════════════════
+
+          // Background
+          tl.to(S + ".s3-bg", { opacity: 1, duration: 0.8, ease: "power1.out" }, 0);
+          tl.to(S + ".s3-bg-glow", { opacity: 1, duration: 1.2, ease: "power1.out" }, 0.2);
+
+          // Center phone — scales up first
+          tl.to(
+            S + "#s3PhoneCenter",
+            {
+              scale: 1,
+              opacity: 1,
+              duration: 0.7,
+              ease: "back.out(1.4)",
+            },
+            0.2,
+          );
+
+          // Side phones: opacity matches center (0.7s, back.out), fan starts at 0.1
+          tl.to(S + "#s3PhoneLeft", { opacity: 1, duration: 0.7, ease: "back.out(1.4)" }, 0.3);
+          tl.to(
+            S + "#s3PhoneLeft",
+            {
+              x: -340,
+              rotation: -12,
+              duration: 1.2,
+              ease: "expo.out",
+            },
+            0.3,
+          );
+
+          tl.to(S + "#s3PhoneRight", { opacity: 1, duration: 0.7, ease: "back.out(1.4)" }, 0.4);
+          tl.to(
+            S + "#s3PhoneRight",
+            {
+              x: 340,
+              rotation: 12,
+              duration: 1.2,
+              ease: "expo.out",
+            },
+            0.4,
+          );
+
+          // ════════════════════════════════════
+          // BREATHE PHASE (2–4s)
+          // ════════════════════════════════════
+
+          // Progress ring fills to 2/3
+          tl.to(
+            S + "#s3Ring",
+            {
+              strokeDashoffset: CIRC * (1 - 2 / 3),
+              duration: 1.2,
+              ease: "circ.out",
+            },
+            1.8,
+          );
+
+          // Activity bars stagger in
+          tl.to(S + "#s3Bar1", { width: "75%", duration: 0.8, ease: "power3.out" }, 2.1);
+          tl.to(S + "#s3Bar2", { width: "50%", duration: 0.8, ease: "power3.out" }, 2.3);
+          tl.to(S + "#s3Bar3", { width: "90%", duration: 0.8, ease: "power3.out" }, 2.5);
+
+          // Graph line draws on
+          tl.to(
+            graphLine,
+            {
+              strokeDashoffset: 0,
+              duration: 1.4,
+              ease: "sine.inOut",
+            },
+            2.0,
+          );
+
+          // Graph area fades in
+          tl.to(graphArea, { opacity: 0.15, duration: 0.8, ease: "power1.out" }, 2.6);
+
+          // Graph dots pop in
+          tl.to(
+            graphDots,
+            {
+              opacity: 1,
+              scale: 1,
+              duration: 0.3,
+              ease: "back.out(2)",
+              stagger: { each: 0.06, ease: "power2.in" },
+            },
+            3.0,
+          );
+
+          // Tagline and CTA on left phone
+          tl.to(
+            S + "#s3Tagline",
+            {
+              opacity: 1,
+              y: 0,
+              duration: 0.6,
+              ease: "power2.out",
+            },
+            2.2,
+          );
+          tl.to(
+            S + ".left-cta",
+            {
+              opacity: 1,
+              y: 0,
+              duration: 0.5,
+              ease: "power2.out",
+            },
+            2.5,
+          );
+
+          // Ambient slow scale push
+          tl.to(
+            S + "#s3Stage",
+            {
+              scale: 1.02,
+              duration: 3.5,
+              ease: "sine.inOut",
+            },
+            2.0,
+          );
+
+          // ════════════════════════════════════
+          // RESOLVE PHASE (4–5.5s)
+          // ════════════════════════════════════
+
+          // Subtle glow pulse on lime accent elements
+          tl.to(S + ".ring-fill", { opacity: 0.65, duration: 0.6, ease: "sine.inOut" }, 4.0);
+          tl.to(S + ".ring-fill", { opacity: 1, duration: 0.6, ease: "sine.inOut" }, 4.6);
+
+          tl.to(S + ".bar-value", { opacity: 0.7, duration: 0.6, ease: "sine.inOut" }, 4.1);
+          tl.to(S + ".bar-value", { opacity: 1, duration: 0.6, ease: "sine.inOut" }, 4.7);
+
+          tl.to(graphLine, { opacity: 0.65, duration: 0.6, ease: "sine.inOut" }, 4.05);
+          tl.to(graphLine, { opacity: 1, duration: 0.6, ease: "sine.inOut" }, 4.65);
+
+          window.__timelines["app-showcase"] = tl;
+        })();
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/apple-money-count/apple-money-count.html b/docs/public/catalog/blocks/apple-money-count/apple-money-count.html
new file mode 100644
index 0000000000..2d7e735358
--- /dev/null
+++ b/docs/public/catalog/blocks/apple-money-count/apple-money-count.html
@@ -0,0 +1,320 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #fdfefe);
+      }
+
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #fdfefe);
+        color: var(--fg, #111315);
+        font-family: var(
+          --font-display,
+          -apple-system,
+          BlinkMacSystemFont,
+          "Helvetica Neue",
+          Arial,
+          sans-serif
+        );
+      }
+
+      .green-flash {
+        position: absolute;
+        inset: 0;
+        z-index: 1;
+        background: var(--accent, #30d158);
+        opacity: 0;
+      }
+
+      .stage-content {
+        position: relative;
+        z-index: 5;
+        display: flex;
+        width: 100%;
+        height: 100%;
+        align-items: center;
+        justify-content: center;
+        padding: var(--space-3, 120px) var(--space-3, 160px);
+      }
+
+      .amount-wrap {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 1080px;
+        min-height: 260px;
+      }
+
+      .amount {
+        position: relative;
+        color: var(--fg, #111315);
+        font-size: 190px;
+        font-weight: 900;
+        line-height: 0.9;
+        letter-spacing: 0;
+        font-variant-numeric: tabular-nums;
+        text-align: center;
+        white-space: nowrap;
+        text-shadow:
+          0 3px 0 var(--bg, rgba(255, 255, 255, 0.58)),
+          0 18px 36px var(--fg, rgba(17, 19, 21, 0.14)),
+          0 42px 92px var(--fg, rgba(17, 19, 21, 0.1));
+        will-change: transform, color, opacity, text-shadow;
+      }
+
+      .money-burst {
+        position: absolute;
+        inset: 0;
+        z-index: 8;
+        pointer-events: none;
+      }
+
+      .money-icon {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        display: grid;
+        place-items: center;
+        opacity: 0;
+        filter: drop-shadow(0 20px 24px var(--brand, rgba(7, 84, 31, 0.2)));
+        will-change: transform, opacity, filter;
+      }
+
+      .money-icon.bill {
+        width: 96px;
+        height: 52px;
+        border-radius: var(--radius, 10px);
+        background: var(--accent, #30d158);
+        box-shadow:
+          inset 0 0 0 3px var(--brand, rgba(7, 84, 31, 0.2)),
+          inset 0 -10px 18px var(--brand, rgba(7, 84, 31, 0.1)),
+          0 16px 26px var(--brand, rgba(7, 84, 31, 0.2)),
+          0 34px 64px var(--brand, rgba(7, 84, 31, 0.16));
+      }
+
+      .money-icon.bill::before {
+        position: absolute;
+        inset: var(--space-1, 9px) var(--space-2, 16px);
+        border: 2px solid var(--border, rgba(7, 84, 31, 0.28));
+        border-radius: 999px;
+        content: "";
+      }
+
+      .money-icon.coin {
+        width: 64px;
+        height: 64px;
+        border-radius: 50%;
+        background: radial-gradient(
+          circle at 34% 30%,
+          var(--accent-2, #fff7a6) 0%,
+          var(--accent, #ffd54f) 40%,
+          var(--brand, #d9a514) 100%
+        );
+        box-shadow:
+          inset 0 0 0 4px var(--brand, rgba(111, 76, 0, 0.12)),
+          inset 0 -8px 14px var(--brand, rgba(111, 76, 0, 0.1)),
+          0 16px 30px var(--brand, rgba(111, 76, 0, 0.18)),
+          0 34px 58px var(--brand, rgba(111, 76, 0, 0.12));
+      }
+
+      .money-icon .mark {
+        position: relative;
+        z-index: 1;
+        color: var(--fg, #07541f);
+        font-size: 30px;
+        font-weight: 900;
+        line-height: 1;
+      }
+
+      .money-icon.coin .mark {
+        color: var(--fg, #6f4c00);
+        font-size: 28px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="apple-money-count"
+      data-root="true"
+      data-start="0"
+      data-duration="5"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="greenFlash" class="green-flash"></div>
+      <div class="stage-content">
+        <div class="amount-wrap">
+          <div id="amount" class="amount">$0</div>
+        </div>
+      </div>
+      <div id="moneyBurst" class="money-burst" data-layout-allow-overflow></div>
+      <audio
+        id="sfxTrack"
+        data-start="0"
+        data-duration="5"
+        data-track-index="9"
+        src="assets/sfx-production.wav"
+        data-volume="0.92"
+      ></audio>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      const amount = document.querySelector("#amount");
+      const moneyBurst = document.querySelector("#moneyBurst");
+      const countState = { value: 0 };
+
+      function formatMoney(value) {
+        const bounded = Math.max(0, Math.min(10000, value));
+        const rounded = Math.round(bounded);
+        return "$" + rounded.toLocaleString("en-US");
+      }
+
+      function renderAmount(value) {
+        amount.textContent = formatMoney(value);
+      }
+
+      const moneyIcons = [];
+      const moneySpecs = [];
+
+      for (let i = 0; i < 62; i += 1) {
+        const icon = document.createElement("div");
+        const isCoin = i % 3 === 0;
+        icon.className = "money-icon " + (isCoin ? "coin" : "bill");
+        icon.innerHTML = '<span class="mark">$</span>';
+        moneyBurst.appendChild(icon);
+        moneyIcons.push(icon);
+
+        const angle = i * 2.399963229728653;
+        const ring = i % 5;
+        const radiusX = 260 + ring * 145 + (i % 7) * 12;
+        const radiusY = 160 + ring * 78 + (i % 6) * 12;
+        const offsetX = (i % 4) * 24 - 36;
+        const offsetY = (i % 5) * 18 - 36;
+        const x = Math.max(-865, Math.min(865, Math.cos(angle) * radiusX + offsetX));
+        const y = Math.max(-465, Math.min(465, Math.sin(angle * 1.13) * radiusY + offsetY));
+
+        moneySpecs.push({
+          x,
+          y,
+          delay: (i % 8) * 0.025,
+          duration: 0.74 + (i % 5) * 0.045,
+          fadeDelay: (i % 5) * 0.05,
+          rotation: ((i * 43) % 160) - 80,
+          scale: isCoin ? 0.72 + (i % 4) * 0.08 : 0.68 + (i % 5) * 0.07,
+        });
+      }
+
+      renderAmount(0);
+
+      const tl = gsap.timeline({
+        paused: true,
+        defaults: { ease: "power3.out" },
+      });
+
+      gsap.set(moneyIcons, {
+        x: 0,
+        y: 0,
+        xPercent: -50,
+        yPercent: -50,
+        opacity: 0,
+        scale: 0.18,
+        transformOrigin: "50% 50%",
+      });
+
+      tl.from(
+        "#amount",
+        {
+          y: 26,
+          opacity: 0,
+          scale: 0.985,
+          duration: 0.45,
+          ease: "power2.out",
+        },
+        0,
+      );
+
+      tl.to(
+        countState,
+        {
+          value: 10000,
+          duration: 3.16,
+          ease: "none",
+          onUpdate: () => renderAmount(countState.value),
+          onComplete: () => renderAmount(10000),
+        },
+        0,
+      );
+
+      tl.to(
+        "#amount",
+        {
+          color: "var(--accent, #30d158)",
+          textShadow:
+            "0 3px 0 var(--bg, rgba(255,255,255,0.52)), 0 18px 40px var(--accent, rgba(48,209,88,0.3)), 0 46px 96px var(--brand, rgba(7,84,31,0.2))",
+          duration: 0.18,
+        },
+        3.16,
+      );
+      tl.to("#amount", { scale: 1.06, duration: 0.16, ease: "back.out(2.2)" }, 3.16);
+      tl.to("#amount", { scale: 1, duration: 0.23, ease: "power2.out" }, 3.33);
+
+      tl.to("#greenFlash", { opacity: 0.34, duration: 0.08, ease: "none" }, 3.16);
+      tl.to("#greenFlash", { opacity: 0.22, duration: 0.76, ease: "none" }, 3.24);
+      tl.to("#greenFlash", { opacity: 0, duration: 0.16, ease: "power2.out" }, 4);
+
+      moneyIcons.forEach((icon, i) => {
+        const spec = moneySpecs[i];
+        tl.to(
+          icon,
+          {
+            x: spec.x,
+            y: spec.y,
+            rotation: spec.rotation,
+            scale: spec.scale,
+            opacity: 1,
+            duration: spec.duration,
+            ease: "power4.out",
+          },
+          3.28 + spec.delay,
+        );
+        tl.to(
+          icon,
+          {
+            y: spec.y + (spec.y < 0 ? -58 : 58),
+            scale: spec.scale * 0.54,
+            opacity: 0,
+            duration: 0.38,
+            ease: "power2.in",
+          },
+          4.18 + spec.fadeDelay,
+        );
+      });
+
+      tl.to("#amount", { opacity: 0, scale: 0.985, duration: 0.28, ease: "power2.in" }, 4.36);
+
+      window.__timelines["apple-money-count"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/apple-money-count/assets/sfx-production.wav b/docs/public/catalog/blocks/apple-money-count/assets/sfx-production.wav
new file mode 100644
index 0000000000..c72b462e05
Binary files /dev/null and b/docs/public/catalog/blocks/apple-money-count/assets/sfx-production.wav differ
diff --git a/docs/public/catalog/blocks/bar-chart-race/__hf-variables-preview.html b/docs/public/catalog/blocks/bar-chart-race/__hf-variables-preview.html
new file mode 100644
index 0000000000..749cdb9225
--- /dev/null
+++ b/docs/public/catalog/blocks/bar-chart-race/__hf-variables-preview.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Bar Chart Race variables preview</title>
+    <style>
+      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #f5f3ef; }
+      #hf-vars-root { position: relative; width: 1920px; height: 1080px; }
+      #hf-vars-mount { position: absolute; inset: 0; display: grid; place-items: center; }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  </head>
+  <body>
+    <div id="hf-vars-root" data-composition-id="bar-chart-race-variables-preview" data-start="0" data-width="1920" data-height="1080" data-duration="12" data-fps="30">
+      <div id="hf-vars-mount" class="clip" data-composition-id="bar-chart-race" data-composition-src="./bar-chart-race.html" data-start="0" data-duration="12" data-track-index="0" data-width="1920" data-height="1080"></div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["bar-chart-race-variables-preview"] = gsap.timeline({ paused: true });
+    </script>
+<script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "bar-chart-race.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/bar-chart-race/bar-chart-race.html b/docs/public/catalog/blocks/bar-chart-race/bar-chart-race.html
new file mode 100644
index 0000000000..5931ed05bf
--- /dev/null
+++ b/docs/public/catalog/blocks/bar-chart-race/bar-chart-race.html
@@ -0,0 +1,600 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Bar Chart Race</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background-color: #f5f3ef;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="bcr-root"
+      data-composition-id="bar-chart-race"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="12"
+      data-composition-variables='[
+        {"id":"title","type":"string","label":"Title","default":"Streaming Subscribers by Service"},
+        {"id":"subtitle","type":"string","label":"Subtitle","default":"Ranked by reported subscribers"},
+        {"id":"periods","type":"string","label":"Period labels (comma separated)","default":"2019, 2020, 2021, 2022, 2023, 2024"},
+        {"id":"series","type":"string","label":"Series (one per line: Name: v1, v2, ...)","default":"Northwind: 42, 58, 71, 96, 118, 131\nCobalt: 30, 46, 68, 92, 126, 168\nFerry: 55, 62, 66, 70, 74, 79\nMarlow: 18, 33, 52, 61, 88, 104\nAster: 25, 28, 44, 58, 63, 72\nPell: 12, 20, 39, 47, 55, 90\nQuill: 8, 11, 15, 24, 40, 66\nDunmore: 35, 37, 38, 40, 42, 44"},
+        {"id":"barCount","type":"number","label":"Bars shown","default":6,"min":3,"max":12,"step":1},
+        {"id":"periodDuration","type":"number","label":"Seconds per period","default":2,"min":0.4,"max":6,"step":0.1},
+        {"id":"valuePrefix","type":"string","label":"Value prefix","default":"$"},
+        {"id":"valueSuffix","type":"string","label":"Value suffix","default":"M"},
+        {"id":"valueDecimals","type":"number","label":"Value decimals","default":0,"min":0,"max":3,"step":1},
+        {"id":"accent","type":"color","label":"Leader accent","default":"#c8452d"}
+      ]'
+    >
+      <div id="bcr-stage" class="clip" data-start="0" data-duration="12" data-track-index="0">
+        <div id="bcr-bg"></div>
+
+        <div id="bcr-head">
+          <div id="bcr-head-left">
+            <h1 id="bcr-title">Streaming Subscribers by Service</h1>
+            <p id="bcr-subtitle">Ranked by reported subscribers</p>
+          </div>
+          <div id="bcr-head-right">
+            <span id="bcr-period-caption">Period</span>
+            <span id="bcr-period">2019</span>
+          </div>
+        </div>
+
+        <!-- Rows live here, one per series, positioned by rank. -->
+        <div id="bcr-plot"></div>
+
+        <!-- Axis is painted above the rows: the tick labels sliding left is the
+             visible evidence that the scale is rescaling as values climb. -->
+        <div id="bcr-axis"></div>
+
+        <p id="bcr-source">Placeholder data</p>
+      </div>
+
+      <style>
+        #bcr-root {
+          position: relative;
+          width: 1920px;
+          height: 1080px;
+          overflow: hidden;
+          font-family: Inter, sans-serif;
+          color: #1f1d1b;
+        }
+
+        #bcr-stage {
+          position: absolute;
+          inset: 0;
+        }
+
+        /* Scene fill goes on a full-bleed child, never the composition root. */
+        #bcr-bg {
+          position: absolute;
+          inset: 0;
+          background-color: #f5f3ef;
+        }
+
+        #bcr-head {
+          position: absolute;
+          top: 58px;
+          left: 96px;
+          width: 1728px;
+          display: flex;
+          align-items: flex-start;
+          justify-content: space-between;
+        }
+
+        #bcr-title {
+          font-size: 46px;
+          font-weight: 700;
+          letter-spacing: -0.015em;
+          line-height: 1.1;
+        }
+
+        #bcr-subtitle {
+          margin-top: 10px;
+          font-size: 19px;
+          font-weight: 400;
+          color: #6b6560;
+        }
+
+        #bcr-head-right {
+          display: flex;
+          flex-direction: column;
+          align-items: flex-end;
+        }
+
+        #bcr-period-caption {
+          font-size: 15px;
+          font-weight: 600;
+          letter-spacing: 0.18em;
+          text-transform: uppercase;
+          color: #6b6560;
+        }
+
+        #bcr-period {
+          margin-top: 4px;
+          font-size: 72px;
+          font-weight: 700;
+          line-height: 1;
+          font-variant-numeric: tabular-nums;
+          letter-spacing: -0.02em;
+        }
+
+        #bcr-plot {
+          position: absolute;
+          left: 0;
+          top: 236px;
+          width: 1920px;
+          height: 760px;
+          overflow: hidden;
+        }
+
+        .bcr-row {
+          position: absolute;
+          left: 0;
+          top: 0;
+          width: 1920px;
+        }
+
+        /* Rows are transparent so both bars of an overtake stay visible sliding
+           past each other; only the two TEXT blocks carry an opaque backing, so
+           the front row's label covers the one it crosses instead of tangling
+           with it. */
+        .bcr-name {
+          position: absolute;
+          left: 96px;
+          width: 272px;
+          top: 50%;
+          transform: translateY(-50%);
+          text-align: right;
+          font-size: 26px;
+          font-weight: 600;
+          line-height: 1.7;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          background-color: #f5f3ef;
+        }
+
+        .bcr-bar {
+          position: absolute;
+          left: 400px;
+          top: 50%;
+          transform: translateY(-50%);
+          border-radius: 3px;
+          background-color: #1f1d1b;
+        }
+
+        .bcr-value {
+          position: absolute;
+          left: 404px;
+          top: 50%;
+          padding: 0 12px;
+          font-size: 26px;
+          font-weight: 600;
+          line-height: 1.7;
+          font-variant-numeric: tabular-nums;
+          white-space: nowrap;
+          background-color: #f5f3ef;
+        }
+
+        #bcr-axis {
+          position: absolute;
+          inset: 0;
+          z-index: 5000;
+        }
+
+        .bcr-tick-line {
+          position: absolute;
+          top: 232px;
+          left: 0;
+          width: 1px;
+          height: 768px;
+          background-color: rgba(31, 29, 27, 0.11);
+        }
+
+        .bcr-tick-line.bcr-tick-zero {
+          background-color: rgba(31, 29, 27, 0.5);
+        }
+
+        .bcr-tick-label {
+          position: absolute;
+          top: 198px;
+          left: 0;
+          font-size: 17px;
+          font-weight: 500;
+          font-variant-numeric: tabular-nums;
+          color: #6b6560;
+          white-space: nowrap;
+        }
+
+        #bcr-source {
+          position: absolute;
+          left: 96px;
+          top: 1014px;
+          font-size: 16px;
+          color: #6b6560;
+        }
+      </style>
+
+      <script>
+        (function () {
+          "use strict";
+
+          // ---- variables -------------------------------------------------
+          // The declaration attribute is the single source of truth: when the
+          // runtime is absent (raw file open) we parse the same attribute.
+          function readVars() {
+            // Read the declaration off THIS block's own root, never
+            // document.documentElement: mounted as a sub-composition the block's
+            // <html> is discarded and documentElement is the HOST's, so a
+            // documentElement read returns the wrong element (or null) and the
+            // block renders with no series at all. Runtime / host / --variables
+            // values are layered on top as overrides, so the block does not
+            // depend on the runtime being injected before this script runs.
+            var out = {};
+            var root = document.getElementById("bcr-root");
+            try {
+              JSON.parse(root.getAttribute("data-composition-variables")).forEach(function (d) {
+                out[d.id] = d.default;
+              });
+            } catch (err) {
+              // Declaration unreadable; the per-variable literal fallbacks below
+              // still produce a renderable composition.
+            }
+            var hf = window.__hyperframes;
+            var overrides =
+              hf && typeof hf.getVariables === "function"
+                ? hf.getVariables()
+                : window.__hfVariables;
+            if (overrides && typeof overrides === "object") {
+              for (var key in overrides) {
+                if (overrides[key] !== undefined) out[key] = overrides[key];
+              }
+            }
+            return out;
+          }
+
+          function num(value, fallback, lo, hi) {
+            var n = typeof value === "number" ? value : Number.parseFloat(value);
+            if (!Number.isFinite(n)) n = fallback;
+            return Math.min(hi, Math.max(lo, n));
+          }
+
+          function str(value, fallback) {
+            return typeof value === "string" && value.length > 0 ? value : fallback;
+          }
+
+          var V = readVars();
+          var ACCENT = str(V.accent, "#c8452d");
+          var BAR_COLOR = "#1f1d1b";
+          var BAR_COUNT = Math.round(num(V.barCount, 6, 1, 24));
+          var PERIOD_DURATION = num(V.periodDuration, 2, 0.1, 30);
+          var DECIMALS = Math.round(num(V.valueDecimals, 0, 0, 6));
+          var PREFIX = typeof V.valuePrefix === "string" ? V.valuePrefix : "";
+          var SUFFIX = typeof V.valueSuffix === "string" ? V.valueSuffix : "";
+
+          // ---- data format ------------------------------------------------
+          // Wide table, one series per line: "Name: v1, v2, v3".
+          // `;` is accepted as a line separator so the whole table survives a
+          // single-line text input. Short rows hold their last value.
+          function parsePeriods(text) {
+            return String(text)
+              .split(",")
+              .map(function (s) {
+                return s.trim();
+              })
+              .filter(function (s) {
+                return s.length > 0;
+              });
+          }
+
+          function parseSeries(text, periodCount) {
+            var out = [];
+            var lines = String(text).split(/[\n;]+/);
+            for (var i = 0; i < lines.length; i++) {
+              var line = lines[i].trim();
+              if (!line) continue;
+              var split = line.indexOf(":");
+              if (split < 0) continue;
+              var label = line.slice(0, split).trim();
+              if (!label) continue;
+              var values = line
+                .slice(split + 1)
+                .split(",")
+                .map(function (s) {
+                  return Number.parseFloat(s.trim());
+                })
+                .filter(function (n) {
+                  return Number.isFinite(n);
+                });
+              if (values.length === 0) continue;
+              while (values.length < periodCount) values.push(values[values.length - 1]);
+              out.push({ label: label, values: values.slice(0, periodCount) });
+            }
+            return out;
+          }
+
+          var PERIODS = parsePeriods(str(V.periods, "2019, 2020, 2021, 2022, 2023, 2024"));
+          if (PERIODS.length === 0) PERIODS = ["1"];
+          var SERIES = parseSeries(str(V.series, ""), PERIODS.length);
+          var T = PERIODS.length;
+          var N = SERIES.length;
+
+          // ---- closed-form state ------------------------------------------
+          // k = 10 interpolated keyframes per period (Bostock's number). Rank is
+          // computed at each keyframe from the interpolated value and baked once;
+          // a bar's on-screen row is then solved FROM rank, so two bars can never
+          // cross without swapping. Everything below is a pure function of t.
+          var K = 10;
+          var KF_DURATION = PERIOD_DURATION / K;
+          var KF_COUNT = T > 1 ? (T - 1) * K + 1 : 1;
+          var RACE_SECONDS = T > 1 ? (T - 1) * PERIOD_DURATION : 0;
+
+          function clamp(v, lo, hi) {
+            return v < lo ? lo : v > hi ? hi : v;
+          }
+
+          function valueAt(t, series) {
+            if (T < 2) return series.values[0];
+            var u = t / PERIOD_DURATION;
+            var i = clamp(Math.floor(u), 0, T - 2);
+            var f = clamp(u - i, 0, 1);
+            return series.values[i] + (series.values[i + 1] - series.values[i]) * f;
+          }
+
+          // ranks[m][j] = integer rank of series j at keyframe m (0 = leader).
+          var RANKS = [];
+          for (var m = 0; m < KF_COUNT; m++) {
+            var tm = m * KF_DURATION;
+            var order = SERIES.map(function (s, j) {
+              return { j: j, v: valueAt(tm, s) };
+            });
+            // Descending by value; index breaks ties so the sort is total and
+            // therefore identical on every evaluation.
+            order.sort(function (a, b) {
+              return b.v - a.v || a.j - b.j;
+            });
+            var row = new Array(N);
+            for (var r = 0; r < order.length; r++) row[order[r].j] = r;
+            RANKS.push(row);
+          }
+
+          function smoothstep(x) {
+            return x * x * (3 - 2 * x);
+          }
+
+          // Continuous row position solved from the baked ranks. A rank change
+          // between two adjacent keyframes IS the swap, and it plays out over one
+          // keyframe interval (PERIOD_DURATION / 10) instead of snapping.
+          function rankPosAt(t, j) {
+            if (KF_COUNT < 2) return RANKS[0][j];
+            var m = t / KF_DURATION;
+            var m0 = clamp(Math.floor(m), 0, KF_COUNT - 2);
+            var e = smoothstep(clamp(m - m0, 0, 1));
+            var a = RANKS[m0][j];
+            var b = RANKS[m0 + 1][j];
+            return a + (b - a) * e;
+          }
+
+          // ---- formatting --------------------------------------------------
+          function formatValue(v) {
+            return (
+              PREFIX +
+              v.toLocaleString("en-US", {
+                minimumFractionDigits: DECIMALS,
+                maximumFractionDigits: DECIMALS,
+              }) +
+              SUFFIX
+            );
+          }
+
+          function hexToRgb(hex) {
+            var h = String(hex).trim().replace("#", "");
+            if (h.length === 3) h = h[0] + h[0] + h[1] + h[1] + h[2] + h[2];
+            var n = Number.parseInt(h, 16);
+            if (!Number.isFinite(n)) return [31, 29, 27];
+            return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+          }
+
+          // Accent is the only colour in the piece and it carries exactly one
+          // meaning: this bar currently leads. It is binary, not blended — a
+          // half-accent bar would assert "half leading", which is not a fact.
+          // It hands over at the instant the two values cross, which is also the
+          // instant the two bars are the same length, so the handover lands on
+          // the overtake instead of drifting near it. Flat fill, never a
+          // gradient: a gradient inside a bar makes the longest bar the palest
+          // exactly where the eye is comparing lengths.
+          function hexToCss(hex) {
+            var rgb = hexToRgb(hex);
+            return "rgb(" + rgb[0] + ", " + rgb[1] + ", " + rgb[2] + ")";
+          }
+
+          var BAR_FILL = hexToCss(BAR_COLOR);
+          var ACCENT_FILL = hexToCss(ACCENT);
+
+          function niceStep(x) {
+            var e = Math.pow(10, Math.floor(Math.log10(x)));
+            var f = x / e;
+            return e * (f <= 1 ? 1 : f <= 2 ? 2 : f <= 5 ? 5 : 10);
+          }
+
+          // ---- geometry ----------------------------------------------------
+          var TRACK_X = 400;
+          var TRACK_W = 1180;
+          var PLOT_H = 760;
+          var PITCH = PLOT_H / BAR_COUNT;
+          var BAR_H = Math.max(12, PITCH * 0.62);
+          var TICK_POOL = 12;
+
+          // ---- DOM ---------------------------------------------------------
+          var plot = document.getElementById("bcr-plot");
+          var axis = document.getElementById("bcr-axis");
+          var periodEl = document.getElementById("bcr-period");
+          document.getElementById("bcr-title").textContent = str(
+            V.title,
+            "Streaming Subscribers by Service",
+          );
+          document.getElementById("bcr-subtitle").textContent = str(
+            V.subtitle,
+            "Ranked by reported subscribers",
+          );
+
+          var rows = SERIES.map(function (s) {
+            var row = document.createElement("div");
+            row.className = "bcr-row";
+            row.style.height = PITCH + "px";
+
+            // Declared, not silenced: two rows mid-overtake genuinely occupy the
+            // same band for ~200ms. Readability is handled by the opaque chip on
+            // each label, so the front one is always legible.
+            var name = document.createElement("div");
+            name.className = "bcr-name";
+            name.setAttribute("data-layout-allow-overlap", "");
+            name.textContent = s.label;
+
+            var bar = document.createElement("div");
+            bar.className = "bcr-bar";
+            bar.style.height = BAR_H + "px";
+
+            var value = document.createElement("div");
+            value.className = "bcr-value";
+            value.setAttribute("data-layout-allow-overlap", "");
+
+            row.appendChild(name);
+            row.appendChild(bar);
+            row.appendChild(value);
+            plot.appendChild(row);
+            return { row: row, bar: bar, value: value };
+          });
+
+          var ticks = [];
+          for (var k = 0; k < TICK_POOL; k++) {
+            var line = document.createElement("div");
+            line.className = "bcr-tick-line" + (k === 0 ? " bcr-tick-zero" : "");
+            var label = document.createElement("div");
+            label.className = "bcr-tick-label";
+            axis.appendChild(line);
+            axis.appendChild(label);
+            ticks.push({ line: line, label: label });
+          }
+
+          // ---- render ------------------------------------------------------
+          function render(t) {
+            if (N === 0) return;
+
+            var values = SERIES.map(function (s) {
+              return valueAt(t, s);
+            });
+            // Paint order follows the CURRENT value, not the row position: the
+            // bar that has just edged ahead comes forward, so at the instant two
+            // bars are superimposed the frame shows the one that is overtaking
+            // (its bar and its label together) rather than the one it passed.
+            var byValue = values
+              .map(function (v, i) {
+                return i;
+              })
+              .sort(function (a, b) {
+                return values[b] - values[a] || a - b;
+              });
+            var zRank = new Array(values.length);
+            for (var q = 0; q < byValue.length; q++) zRank[byValue[q]] = q;
+            var leader = byValue[0];
+            var maxValue = values[leader];
+            // Headroom keeps the leader off the frame edge; the domain is a
+            // continuous function of t, so the axis glides instead of stepping.
+            var scaleMax = Math.max(maxValue * 1.06, 1e-6);
+            var step = niceStep(scaleMax / 4);
+
+            for (var i = 0; i < TICK_POOL; i++) {
+              var tv = i * step;
+              var visible = tv <= scaleMax;
+              var tx = TRACK_X + (tv / scaleMax) * TRACK_W;
+              ticks[i].line.style.transform = "translateX(" + tx.toFixed(2) + "px)";
+              ticks[i].line.style.opacity = visible ? "1" : "0";
+              ticks[i].label.style.transform =
+                "translateX(" + tx.toFixed(2) + "px) translateX(-50%)";
+              ticks[i].label.style.opacity = visible ? "1" : "0";
+              ticks[i].label.textContent = visible ? formatValue(tv) : "";
+            }
+
+            for (var j = 0; j < rows.length; j++) {
+              var rankPos = rankPosAt(t, j);
+              var barW = (values[j] / scaleMax) * TRACK_W;
+              var el = rows[j];
+
+              el.row.style.transform = "translateY(" + (rankPos * PITCH).toFixed(2) + "px)";
+              // Fades out only as it slides past the last visible slot.
+              el.row.style.opacity = clamp(BAR_COUNT - rankPos, 0, 1).toFixed(3);
+              el.row.style.zIndex = String(1000 - zRank[j]);
+
+              el.bar.style.width = barW.toFixed(2) + "px";
+              el.bar.style.backgroundColor = j === leader ? ACCENT_FILL : BAR_FILL;
+
+              el.value.style.transform = "translate(" + barW.toFixed(2) + "px, -50%)";
+              el.value.textContent = formatValue(values[j]);
+            }
+
+            var pIndex = clamp(Math.floor(t / PERIOD_DURATION), 0, T - 1);
+            periodEl.textContent = PERIODS[pIndex];
+          }
+
+          // ---- timeline ----------------------------------------------------
+          // A property SETTER drives the per-frame work: tl.eventCallback("onUpdate")
+          // does not fire on tl.seek(), a tweened accessor does.
+          var driver = { _t: 0 };
+          Object.defineProperty(driver, "t", {
+            get: function () {
+              return this._t;
+            },
+            set: function (value) {
+              this._t = value;
+              render(value);
+            },
+          });
+
+          var tl = gsap.timeline({ paused: true });
+          if (RACE_SECONDS > 0) {
+            tl.to(driver, { t: RACE_SECONDS, duration: RACE_SECONDS, ease: "none" }, 0);
+          }
+          render(0);
+
+          window.__timelines = window.__timelines || {};
+          window.__timelines["bar-chart-race"] = tl;
+        })();
+      </script>
+    </div>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "bar-chart-race.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/blocks/beat-freeze-cut/beat-freeze-cut.html b/docs/public/catalog/blocks/beat-freeze-cut/beat-freeze-cut.html
new file mode 100644
index 0000000000..5e13b6badf
--- /dev/null
+++ b/docs/public/catalog/blocks/beat-freeze-cut/beat-freeze-cut.html
@@ -0,0 +1,879 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Beat Freeze Cut</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@500;600;700;800;900&display=block"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: #0b0d10;
+      }
+
+      /*
+        EDIT / STUDIO PARAMS
+        ────────────────────
+        Studio color params (CSS custom properties on the root):
+          --bg-color       default #0B0D10
+          --accent-color   default #00E5C7
+
+        Numeric / string params (beat times, labels, intensity) are NOT in the
+        formal registry params schema today (only color keys are used by
+        existing blocks). Edit the CONFIG object in the script below instead.
+      */
+
+      #bfc-root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        --bg-color: #0b0d10;
+        --accent-color: #00e5c7;
+        --bfc-ink: #f4f6f8;
+        --bfc-muted: #a0a8b0;
+        --bfc-panel: #14181f;
+        --bfc-panel-2: #1a2029;
+        --bfc-line: rgba(255, 255, 255, 0.08);
+        font-family:
+          "Inter",
+          system-ui,
+          -apple-system,
+          sans-serif;
+        color: var(--bfc-ink);
+      }
+
+      #bfc-bg {
+        position: absolute;
+        inset: 0;
+        background:
+          radial-gradient(ellipse 80% 60% at 50% 40%, rgba(0, 229, 199, 0.07) 0%, transparent 55%),
+          radial-gradient(
+            ellipse 50% 40% at 80% 80%,
+            rgba(255, 255, 255, 0.03) 0%,
+            transparent 50%
+          ),
+          var(--bg-color);
+      }
+
+      #bfc-grid {
+        position: absolute;
+        inset: 0;
+        opacity: 0.22;
+        background-image:
+          linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
+          linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
+        background-size: 80px 80px;
+        mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 75%);
+        pointer-events: none;
+      }
+
+      #bfc-stage {
+        position: absolute;
+        inset: 0;
+        transform-origin: 50% 48%;
+        will-change: transform, filter;
+      }
+
+      #bfc-shot-a,
+      #bfc-shot-b {
+        position: absolute;
+        inset: 0;
+        overflow: hidden;
+      }
+
+      #bfc-shot-b {
+        visibility: hidden;
+        opacity: 0;
+      }
+
+      /* ── Shot A: single product card hero ── */
+      #bfc-a-crop {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transform-origin: 50% 50%;
+      }
+
+      #bfc-a-card {
+        position: relative;
+        width: 680px;
+        height: 720px;
+        border-radius: 36px;
+        background:
+          linear-gradient(160deg, rgba(255, 255, 255, 0.06) 0%, transparent 40%),
+          linear-gradient(180deg, var(--bfc-panel-2) 0%, var(--bfc-panel) 100%);
+        border: 1px solid var(--bfc-line);
+        box-shadow:
+          0 40px 120px rgba(0, 0, 0, 0.55),
+          0 0 0 1px rgba(0, 229, 199, 0.08),
+          inset 0 1px 0 rgba(255, 255, 255, 0.06);
+        overflow: hidden;
+        transform-origin: 50% 50%;
+      }
+
+      #bfc-a-card-glow {
+        position: absolute;
+        left: 50%;
+        top: 28%;
+        width: 420px;
+        height: 420px;
+        margin-left: -210px;
+        margin-top: -210px;
+        border-radius: 50%;
+        background: radial-gradient(circle, rgba(0, 229, 199, 0.28) 0%, transparent 68%);
+        opacity: 0.85;
+        pointer-events: none;
+      }
+
+      #bfc-a-wave {
+        position: absolute;
+        left: 64px;
+        right: 64px;
+        top: 120px;
+        height: 220px;
+      }
+
+      #bfc-a-wave svg {
+        width: 100%;
+        height: 100%;
+        display: block;
+      }
+
+      #bfc-a-wave-path {
+        fill: none;
+        stroke: var(--accent-color);
+        stroke-width: 4;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        opacity: 0.95;
+      }
+
+      #bfc-a-wave-fill {
+        fill: var(--accent-color);
+        opacity: 0.12;
+      }
+
+      #bfc-a-bars {
+        position: absolute;
+        left: 80px;
+        right: 80px;
+        bottom: 160px;
+        height: 96px;
+        display: flex;
+        align-items: flex-end;
+        gap: 10px;
+      }
+
+      .bfc-bar {
+        flex: 1;
+        border-radius: 6px 6px 2px 2px;
+        background: linear-gradient(180deg, var(--accent-color) 0%, rgba(0, 229, 199, 0.25) 100%);
+        transform-origin: 50% 100%;
+        height: 40%;
+      }
+
+      #bfc-a-meta {
+        position: absolute;
+        left: 64px;
+        right: 64px;
+        bottom: 56px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+
+      #bfc-a-kicker {
+        font-size: 18px;
+        font-weight: 600;
+        letter-spacing: 0.18em;
+        text-transform: uppercase;
+        color: var(--bfc-muted);
+      }
+
+      #bfc-a-pill {
+        font-size: 15px;
+        font-weight: 700;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+        color: #04120f;
+        background: var(--accent-color);
+        padding: 8px 16px;
+        border-radius: 999px;
+      }
+
+      /* ── Shot B: split layout, higher info density ── */
+      #bfc-b-layout {
+        position: absolute;
+        inset: 0;
+        display: grid;
+        grid-template-columns: 1.05fr 0.95fr;
+        gap: 48px;
+        padding: 100px 110px;
+        align-items: center;
+      }
+
+      #bfc-b-left {
+        display: flex;
+        flex-direction: column;
+        gap: 28px;
+        transform-origin: 0% 50%;
+      }
+
+      #bfc-b-eyebrow {
+        font-size: 20px;
+        font-weight: 700;
+        letter-spacing: 0.22em;
+        text-transform: uppercase;
+        color: var(--accent-color);
+      }
+
+      #bfc-b-title {
+        font-size: 128px;
+        font-weight: 900;
+        line-height: 0.92;
+        letter-spacing: -0.04em;
+        text-transform: uppercase;
+        color: var(--bfc-ink);
+      }
+
+      #bfc-b-sub {
+        font-size: 28px;
+        font-weight: 500;
+        color: var(--bfc-muted);
+        max-width: 520px;
+        line-height: 1.35;
+      }
+
+      #bfc-b-right {
+        display: flex;
+        flex-direction: column;
+        gap: 18px;
+      }
+
+      .bfc-b-card {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 24px;
+        padding: 28px 32px;
+        border-radius: 20px;
+        background: linear-gradient(135deg, var(--bfc-panel-2), var(--bfc-panel));
+        border: 1px solid var(--bfc-line);
+        box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
+      }
+
+      .bfc-b-card-label {
+        font-size: 18px;
+        font-weight: 600;
+        letter-spacing: 0.12em;
+        text-transform: uppercase;
+        color: var(--bfc-muted);
+      }
+
+      .bfc-b-card-value {
+        font-size: 42px;
+        font-weight: 800;
+        letter-spacing: -0.03em;
+        color: var(--bfc-ink);
+      }
+
+      .bfc-b-card-value.accent {
+        color: var(--accent-color);
+      }
+
+      #bfc-b-accent-bar {
+        width: 120px;
+        height: 6px;
+        border-radius: 999px;
+        background: var(--accent-color);
+        opacity: 0.9;
+      }
+
+      /* ── Intro / transient typography ── */
+      #bfc-intro {
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 72px;
+        display: flex;
+        justify-content: center;
+        pointer-events: none;
+        z-index: 20;
+        opacity: 0;
+        visibility: hidden;
+      }
+
+      #bfc-intro-label {
+        font-size: 18px;
+        font-weight: 700;
+        letter-spacing: 0.28em;
+        text-transform: uppercase;
+        color: var(--bfc-muted);
+        padding: 10px 18px;
+        border: 1px solid var(--bfc-line);
+        border-radius: 999px;
+        background: rgba(11, 13, 16, 0.55);
+        backdrop-filter: blur(8px);
+      }
+
+      #bfc-hit-type {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        pointer-events: none;
+        z-index: 30;
+        opacity: 0;
+        visibility: hidden;
+      }
+
+      #bfc-hit-type-text {
+        font-size: 160px;
+        font-weight: 900;
+        letter-spacing: -0.04em;
+        text-transform: uppercase;
+        color: var(--bfc-ink);
+        text-shadow:
+          0 0 40px rgba(0, 229, 199, 0.35),
+          0 8px 40px rgba(0, 0, 0, 0.55);
+        -webkit-text-stroke: 2px rgba(0, 0, 0, 0.35);
+        paint-order: stroke fill;
+      }
+
+      /* ── Freeze frame treatment ── */
+      #bfc-freeze {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        z-index: 25;
+        opacity: 0;
+        visibility: hidden;
+      }
+
+      #bfc-freeze-outline {
+        position: absolute;
+        inset: 48px;
+        border: 3px solid var(--accent-color);
+        border-radius: 8px;
+        box-shadow:
+          0 0 0 1px rgba(0, 229, 199, 0.25),
+          inset 0 0 0 1px rgba(0, 229, 199, 0.15),
+          0 0 48px rgba(0, 229, 199, 0.2);
+        opacity: 0;
+      }
+
+      #bfc-freeze-flash {
+        position: absolute;
+        inset: 0;
+        background: #ffffff;
+        opacity: 0;
+        mix-blend-mode: screen;
+      }
+
+      #bfc-freeze-contour {
+        position: absolute;
+        inset: 0;
+        background:
+          linear-gradient(90deg, transparent 0%, rgba(0, 229, 199, 0.08) 48%, transparent 52%),
+          radial-gradient(ellipse 40% 55% at 50% 48%, transparent 40%, rgba(0, 229, 199, 0.18) 100%);
+        opacity: 0;
+        mix-blend-mode: screen;
+      }
+
+      #bfc-freeze-badge {
+        position: absolute;
+        top: 80px;
+        right: 96px;
+        font-size: 16px;
+        font-weight: 800;
+        letter-spacing: 0.2em;
+        text-transform: uppercase;
+        color: #04120f;
+        background: var(--accent-color);
+        padding: 10px 18px;
+        border-radius: 6px;
+        opacity: 0;
+      }
+
+      /* ── Hard-cut connector (directional stretch / blur) ── */
+      #bfc-cut {
+        position: absolute;
+        inset: -8% -20%;
+        pointer-events: none;
+        z-index: 40;
+        opacity: 0;
+        visibility: hidden;
+        background: linear-gradient(
+          90deg,
+          transparent 0%,
+          rgba(0, 229, 199, 0.12) 35%,
+          rgba(255, 255, 255, 0.55) 50%,
+          rgba(0, 229, 199, 0.12) 65%,
+          transparent 100%
+        );
+        filter: blur(18px);
+        transform-origin: 50% 50%;
+      }
+
+      #bfc-vignette {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        z-index: 15;
+        background: radial-gradient(
+          ellipse 75% 70% at 50% 50%,
+          transparent 45%,
+          rgba(0, 0, 0, 0.55) 100%
+        );
+        opacity: 0.85;
+      }
+
+      #bfc-driver {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        opacity: 0;
+        pointer-events: none;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="bfc-root"
+      data-composition-id="beat-freeze-cut"
+      data-start="0"
+      data-duration="6"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="bfc-bg" aria-hidden="true"></div>
+      <div id="bfc-grid" aria-hidden="true"></div>
+
+      <div id="bfc-stage">
+        <!-- Shot A -->
+        <div id="bfc-shot-a">
+          <div id="bfc-a-crop" data-layout-allow-overflow>
+            <div id="bfc-a-card" data-layout-allow-overflow>
+              <div id="bfc-a-card-glow" aria-hidden="true"></div>
+              <div id="bfc-a-wave" aria-hidden="true">
+                <svg viewBox="0 0 592 220" preserveAspectRatio="none">
+                  <path
+                    id="bfc-a-wave-fill"
+                    d="M0,160 C40,150 60,90 100,100 C140,110 160,40 200,55 C240,70 260,150 300,140 C340,130 360,30 400,45 C440,60 460,130 500,120 C540,110 560,70 592,80 L592,220 L0,220 Z"
+                  />
+                  <path
+                    id="bfc-a-wave-path"
+                    d="M0,160 C40,150 60,90 100,100 C140,110 160,40 200,55 C240,70 260,150 300,140 C340,130 360,30 400,45 C440,60 460,130 500,120 C540,110 560,70 592,80"
+                  />
+                </svg>
+              </div>
+              <div id="bfc-a-bars" aria-hidden="true">
+                <div class="bfc-bar" id="bfc-bar-0" style="height: 34%"></div>
+                <div class="bfc-bar" id="bfc-bar-1" style="height: 58%"></div>
+                <div class="bfc-bar" id="bfc-bar-2" style="height: 42%"></div>
+                <div class="bfc-bar" id="bfc-bar-3" style="height: 78%"></div>
+                <div class="bfc-bar" id="bfc-bar-4" style="height: 52%"></div>
+                <div class="bfc-bar" id="bfc-bar-5" style="height: 88%"></div>
+                <div class="bfc-bar" id="bfc-bar-6" style="height: 46%"></div>
+                <div class="bfc-bar" id="bfc-bar-7" style="height: 64%"></div>
+                <div class="bfc-bar" id="bfc-bar-8" style="height: 36%"></div>
+                <div class="bfc-bar" id="bfc-bar-9" style="height: 72%"></div>
+                <div class="bfc-bar" id="bfc-bar-10" style="height: 48%"></div>
+                <div class="bfc-bar" id="bfc-bar-11" style="height: 92%"></div>
+              </div>
+              <div id="bfc-a-meta">
+                <span id="bfc-a-kicker">MUSIC PROMO</span>
+                <span id="bfc-a-pill">LIVE</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Shot B -->
+        <div id="bfc-shot-b">
+          <div id="bfc-b-layout">
+            <div id="bfc-b-left">
+              <div id="bfc-b-eyebrow">Next shot</div>
+              <div id="bfc-b-title">HARD<br />CUT</div>
+              <div id="bfc-b-accent-bar" aria-hidden="true"></div>
+              <div id="bfc-b-sub">
+                Beat-locked freeze, then cut. Built for music-led promos and montages.
+              </div>
+            </div>
+            <div id="bfc-b-right">
+              <div class="bfc-b-card" id="bfc-b-card-0">
+                <span class="bfc-b-card-label">Ramp</span>
+                <span class="bfc-b-card-value accent">1.35→2.2</span>
+              </div>
+              <div class="bfc-b-card" id="bfc-b-card-1">
+                <span class="bfc-b-card-label">Freeze</span>
+                <span class="bfc-b-card-value">0.8s</span>
+              </div>
+              <div class="bfc-b-card" id="bfc-b-card-2">
+                <span class="bfc-b-card-label">Cut</span>
+                <span class="bfc-b-card-value accent">3.00</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div id="bfc-vignette" aria-hidden="true"></div>
+
+      <div id="bfc-intro" aria-hidden="true">
+        <span id="bfc-intro-label">ON THE BEAT</span>
+      </div>
+
+      <div id="bfc-hit-type" aria-hidden="true">
+        <span id="bfc-hit-type-text">DROP</span>
+      </div>
+
+      <div id="bfc-freeze" aria-hidden="true">
+        <div id="bfc-freeze-flash"></div>
+        <div id="bfc-freeze-contour"></div>
+        <div id="bfc-freeze-outline"></div>
+        <div id="bfc-freeze-badge">FREEZE</div>
+      </div>
+
+      <div id="bfc-cut" aria-hidden="true"></div>
+
+      <div id="bfc-driver" class="clip" data-start="0" data-duration="6" data-track-index="0"></div>
+    </div>
+
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        // ── EDIT ME (not Studio params — see HTML comment) ──────────────
+        var CONFIG = {
+          primaryLabel: "DROP",
+          secondaryLabel: "ON THE BEAT",
+          beat1: 0.7,
+          beat2: 2.2,
+          freezeTime: 2.2,
+          intensity: 1.0,
+        };
+        // ────────────────────────────────────────────────────────────────
+
+        var DURATION = 6;
+        var intensity = Math.max(0.6, Math.min(1.4, Number(CONFIG.intensity) || 1));
+        var beat1 = Number(CONFIG.beat1) || 0.7;
+        var beat2 = Number(CONFIG.beat2) || 2.2;
+        var freezeAt = Number(CONFIG.freezeTime) || beat2;
+        var cutAt = 3.0;
+        var beat3 = 4.7;
+        var holdAt = 5.2;
+
+        var root = document.getElementById("bfc-root");
+        var stage = document.getElementById("bfc-stage");
+        var shotA = document.getElementById("bfc-shot-a");
+        var shotB = document.getElementById("bfc-shot-b");
+        var aCrop = document.getElementById("bfc-a-crop");
+        var aCard = document.getElementById("bfc-a-card");
+        var intro = document.getElementById("bfc-intro");
+        var introLabel = document.getElementById("bfc-intro-label");
+        var hitType = document.getElementById("bfc-hit-type");
+        var hitText = document.getElementById("bfc-hit-type-text");
+        var freeze = document.getElementById("bfc-freeze");
+        var freezeOutline = document.getElementById("bfc-freeze-outline");
+        var freezeFlash = document.getElementById("bfc-freeze-flash");
+        var freezeContour = document.getElementById("bfc-freeze-contour");
+        var freezeBadge = document.getElementById("bfc-freeze-badge");
+        var cutFx = document.getElementById("bfc-cut");
+        var bLeft = document.getElementById("bfc-b-left");
+        var bCards = [
+          document.getElementById("bfc-b-card-0"),
+          document.getElementById("bfc-b-card-1"),
+          document.getElementById("bfc-b-card-2"),
+        ];
+        var bars = [];
+        for (var bi = 0; bi < 12; bi++) {
+          bars.push(document.getElementById("bfc-bar-" + bi));
+        }
+
+        // Apply editable labels
+        if (hitText) hitText.textContent = CONFIG.primaryLabel || "DROP";
+        if (introLabel) introLabel.textContent = CONFIG.secondaryLabel || "ON THE BEAT";
+
+        // Accent color from CSS var → freeze/glow that use hardcoded rgba fallbacks
+        // stay coherent because stroke/fill already use var(--accent-color).
+
+        var tl = gsap.timeline({ paused: true });
+
+        // Initial states (no CSS transform conflicts on animated props)
+        gsap.set(stage, { scale: 1, x: 0, y: 0, filter: "blur(0px) brightness(1)" });
+        gsap.set(aCrop, { scale: 1, x: 0, y: 0 });
+        // Card visible at t=0 so catalog snapshots are never a black frame
+        gsap.set(aCard, { scale: 0.9, y: 20, opacity: 1 });
+        gsap.set(shotA, { opacity: 1, visibility: "visible" });
+        gsap.set(shotB, { opacity: 0, visibility: "hidden" });
+        gsap.set(intro, { opacity: 0, visibility: "hidden", y: -12 });
+        gsap.set(hitType, { opacity: 0, visibility: "hidden", scale: 1.15 });
+        gsap.set(freeze, { opacity: 0, visibility: "hidden" });
+        gsap.set([freezeOutline, freezeFlash, freezeContour, freezeBadge], { opacity: 0 });
+        gsap.set(cutFx, { opacity: 0, visibility: "hidden", scaleX: 0.4, x: -200 });
+        gsap.set(bLeft, { opacity: 0, x: -48 });
+        gsap.set(bCards, { opacity: 0, x: 40 });
+        gsap.set(bars, { scaleY: 0.55 });
+
+        // Full duration anchor (seek-safe length)
+        tl.to({}, { duration: DURATION, ease: "none" }, 0);
+
+        // ── 0.00–0.70: intro push-in + secondary type ──
+        tl.to(aCard, { scale: 1, y: 0, duration: 0.55, ease: "power3.out" }, 0);
+        tl.to(stage, { scale: 1 + 0.04 * intensity, duration: 0.7, ease: "power1.out" }, 0);
+        tl.to(bars, { scaleY: 1, duration: 0.5, ease: "power2.out", stagger: 0.02 }, 0.12);
+        tl.set(intro, { visibility: "visible" }, 0.12);
+        tl.to(intro, { opacity: 1, y: 0, duration: 0.28, ease: "power2.out" }, 0.12);
+        tl.to(intro, { opacity: 0, y: -8, duration: 0.18, ease: "power2.in" }, 0.52);
+        tl.set(intro, { visibility: "hidden", opacity: 0 }, 0.7);
+
+        // ── 0.70–1.35: beat 1 — hard reframe ──
+        tl.to(
+          aCrop,
+          {
+            scale: 1 + 0.18 * intensity,
+            x: -80 * intensity,
+            y: 24 * intensity,
+            duration: 0.22,
+            ease: "power4.out",
+          },
+          beat1,
+        );
+        tl.to(
+          stage,
+          {
+            scale: 1.08 * intensity > 1.2 ? 1.2 : 1 + 0.08 * intensity,
+            duration: 0.28,
+            ease: "expo.out",
+          },
+          beat1,
+        );
+        tl.to(
+          bars,
+          {
+            scaleY: function (i) {
+              // Deterministic bar pattern (no Math.random)
+              var pattern = [0.55, 1.15, 0.7, 1.35, 0.9, 1.4, 0.65, 1.1, 0.5, 1.25, 0.8, 1.45];
+              return pattern[i % pattern.length];
+            },
+            duration: 0.18,
+            ease: "power3.out",
+            stagger: 0.01,
+          },
+          beat1,
+        );
+
+        // ── 1.35–2.20: speed ramp into freeze ──
+        var rampStart = 1.35;
+        var rampDur = Math.max(0.2, freezeAt - rampStart);
+        tl.to(
+          aCrop,
+          {
+            scale: 1.28 * (0.9 + 0.1 * intensity),
+            x: 28 * intensity,
+            y: -12 * intensity,
+            duration: rampDur,
+            ease: "power3.in",
+          },
+          rampStart,
+        );
+        tl.to(
+          stage,
+          {
+            scale: 1.12,
+            filter: "blur(0px) brightness(1.08)",
+            duration: rampDur,
+            ease: "power2.in",
+          },
+          rampStart,
+        );
+        tl.to(
+          bars,
+          {
+            scaleY: 1.55,
+            duration: rampDur * 0.85,
+            ease: "power2.in",
+            stagger: { each: 0.012, from: "center" },
+          },
+          rampStart,
+        );
+
+        // ── 2.20–3.00: freeze hit (snap-on for seek/snapshot stability) ──
+        tl.set(freeze, { visibility: "visible", opacity: 1 }, freezeAt);
+        tl.set(freezeOutline, { opacity: 1 }, freezeAt);
+        tl.set(freezeContour, { opacity: 0.85 }, freezeAt);
+        tl.set(freezeBadge, { opacity: 1 }, freezeAt);
+        tl.set(hitType, { visibility: "visible", opacity: 1, scale: 1 }, freezeAt);
+        // Hold crop/stage where ramp ended
+        tl.to(aCrop, { duration: 0.01, ease: "none" }, freezeAt);
+        tl.to(
+          stage,
+          {
+            scale: 1.12,
+            filter: "blur(0px) brightness(1.15)",
+            duration: 0.05,
+            ease: "power4.out",
+          },
+          freezeAt,
+        );
+        // Single exposure flash (not a strobe sequence)
+        tl.fromTo(
+          freezeFlash,
+          { opacity: 0.55 * intensity },
+          { opacity: 0, duration: 0.28, ease: "power2.out" },
+          freezeAt,
+        );
+        tl.to(
+          hitType,
+          { opacity: 0, scale: 0.96, duration: 0.2, ease: "power2.in" },
+          freezeAt + 0.55,
+        );
+        tl.set(hitType, { visibility: "hidden", opacity: 0 }, freezeAt + 0.78);
+        // Soft settle of freeze dressing before cut
+        tl.to(
+          [freezeOutline, freezeContour, freezeBadge],
+          { opacity: 0.75, duration: 0.35, ease: "sine.out" },
+          freezeAt + 0.35,
+        );
+
+        // ── 3.00–3.35: hard cut connector ──
+        tl.set(cutFx, { visibility: "visible" }, cutAt);
+        tl.fromTo(
+          cutFx,
+          { opacity: 0, scaleX: 0.35, x: -280 },
+          {
+            opacity: 0.95,
+            scaleX: 1.6,
+            x: 120,
+            duration: 0.12,
+            ease: "power4.in",
+          },
+          cutAt,
+        );
+        tl.to(
+          stage,
+          {
+            filter: "blur(14px) brightness(1.35)",
+            scaleX: 1.35,
+            scaleY: 0.92,
+            duration: 0.12,
+            ease: "power3.in",
+          },
+          cutAt,
+        );
+        // Switch shots mid-cut — shot B content lands immediately (no black gap)
+        var switchAt = cutAt + 0.14;
+        tl.set(shotA, { opacity: 0, visibility: "hidden" }, switchAt);
+        tl.set(shotB, { opacity: 1, visibility: "visible" }, switchAt);
+        tl.set(hitType, { opacity: 0, visibility: "hidden" }, switchAt);
+        tl.set(
+          [freeze, freezeOutline, freezeFlash, freezeContour, freezeBadge],
+          { opacity: 0, visibility: "hidden" },
+          switchAt,
+        );
+        tl.set(freeze, { visibility: "hidden" }, switchAt);
+        // Shot B content visible on switch (offset settles after)
+        tl.set(bLeft, { opacity: 1, x: -24 }, switchAt);
+        tl.set(bCards, { opacity: 1, x: 24 }, switchAt);
+        tl.to(
+          stage,
+          {
+            filter: "blur(0px) brightness(1)",
+            scale: 1,
+            scaleX: 1,
+            scaleY: 1,
+            x: 0,
+            y: 0,
+            duration: 0.18,
+            ease: "power3.out",
+          },
+          switchAt,
+        );
+        tl.to(cutFx, { opacity: 0, x: 360, duration: 0.16, ease: "power2.out" }, cutAt + 0.16);
+        tl.set(cutFx, { visibility: "hidden", opacity: 0 }, cutAt + 0.34);
+
+        // ── after switch: shot B settle (no scale overlap with recover) ──
+        tl.to(bLeft, { x: 0, duration: 0.4, ease: "power3.out" }, switchAt);
+        tl.to(
+          bCards,
+          {
+            x: 0,
+            duration: 0.38,
+            ease: "power3.out",
+            stagger: 0.06,
+          },
+          switchAt + 0.04,
+        );
+        tl.to(stage, { scale: 1.02, duration: 1.17, ease: "sine.out" }, switchAt + 0.18);
+
+        // ── 4.70–5.20: final beat punch-in ──
+        tl.to(
+          stage,
+          {
+            scale: 1.08 * (0.9 + 0.1 * intensity),
+            duration: 0.14,
+            ease: "power4.out",
+          },
+          beat3,
+        );
+        tl.to(
+          bCards[1],
+          {
+            scale: 1.04,
+            duration: 0.12,
+            ease: "power3.out",
+          },
+          beat3,
+        );
+        tl.to(
+          bCards[1],
+          {
+            scale: 1,
+            duration: 0.22,
+            ease: "power2.out",
+          },
+          beat3 + 0.14,
+        );
+        // Micro freeze feel: brief hold of scale
+        tl.to(
+          stage,
+          { scale: 1.08 * (0.9 + 0.1 * intensity), duration: 0.2, ease: "none" },
+          beat3 + 0.14,
+        );
+
+        // ── 5.20–6.00: hold readable end card (≥0.8s) ──
+        tl.to(stage, { scale: 1.03, duration: 0.35, ease: "power2.out" }, holdAt);
+        // Ensure transient layers stay dead through end
+        tl.set(intro, { opacity: 0, visibility: "hidden" }, holdAt);
+        tl.set(hitType, { opacity: 0, visibility: "hidden" }, holdAt);
+        tl.set(freeze, { opacity: 0, visibility: "hidden" }, holdAt);
+        tl.set(cutFx, { opacity: 0, visibility: "hidden" }, holdAt);
+
+        window.__timelines["beat-freeze-cut"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/blue-sweater-intro-video/assets/joe-sai-avatar.png b/docs/public/catalog/blocks/blue-sweater-intro-video/assets/joe-sai-avatar.png
new file mode 100644
index 0000000000..c98365032e
Binary files /dev/null and b/docs/public/catalog/blocks/blue-sweater-intro-video/assets/joe-sai-avatar.png differ
diff --git a/docs/public/catalog/blocks/blue-sweater-intro-video/assets/sfx/integrated-melodic-tech-mix.wav b/docs/public/catalog/blocks/blue-sweater-intro-video/assets/sfx/integrated-melodic-tech-mix.wav
new file mode 100644
index 0000000000..ae3d811097
Binary files /dev/null and b/docs/public/catalog/blocks/blue-sweater-intro-video/assets/sfx/integrated-melodic-tech-mix.wav differ
diff --git a/docs/public/catalog/blocks/blue-sweater-intro-video/blue-sweater-intro-video.html b/docs/public/catalog/blocks/blue-sweater-intro-video/blue-sweater-intro-video.html
new file mode 100644
index 0000000000..c96f1c3700
--- /dev/null
+++ b/docs/public/catalog/blocks/blue-sweater-intro-video/blue-sweater-intro-video.html
@@ -0,0 +1,1523 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Blue Sweater Intro Video</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      :root {
+        --bg: #f7f1ef;
+        --ink: #11110f;
+        --muted: #807d76;
+        --line: #dcd8cf;
+        --panel: #fbfaf6;
+        --claude: #c85f45;
+        --orange: #c86532;
+        --blue: #1486b8;
+        --panel-shadow: rgba(36, 31, 24, 0.08);
+      }
+
+      * {
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg);
+        color: var(--ink);
+        font-family: "Helvetica Neue", Arial, sans-serif;
+      }
+
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg);
+        isolation: isolate;
+      }
+
+      .clip,
+      .base {
+        position: absolute;
+        inset: 0;
+        overflow: hidden;
+      }
+
+      .clip {
+        opacity: 0;
+      }
+
+      .base {
+        background: var(--bg);
+        opacity: 1;
+      }
+
+      #burst {
+        z-index: 6;
+      }
+
+      #brand {
+        z-index: 5;
+      }
+
+      .scene-content {
+        position: relative;
+        display: flex;
+        width: 100%;
+        height: 100%;
+        padding: 126px 160px 128px;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .warm-block {
+        width: 720px;
+        height: 154px;
+        background: var(--orange);
+        border-radius: 6px;
+        clip-path: polygon(2% 4%, 98% 0, 100% 88%, 96% 98%, 4% 94%, 0 12%);
+      }
+
+      .title {
+        color: var(--ink);
+        font-size: 100px;
+        font-weight: 620;
+        line-height: 0.92;
+        letter-spacing: -0.055em;
+        white-space: nowrap;
+      }
+
+      .wordmark {
+        position: absolute;
+        left: 50%;
+        top: 50.5%;
+        transform: translate(-50%, -50%);
+        display: flex;
+        align-items: baseline;
+        gap: 19px;
+        color: var(--ink);
+        font-size: 88px;
+        font-weight: 620;
+        line-height: 0.9;
+        letter-spacing: -0.058em;
+        white-space: nowrap;
+      }
+
+      .brand-algrow {
+        font-weight: 650;
+      }
+
+      .brand-claude {
+        font-weight: 540;
+      }
+
+      .wordmark .brand-x {
+        font-family: Georgia, "Times New Roman", serif;
+        font-size: 0.84em;
+        font-weight: 400;
+        letter-spacing: -0.02em;
+      }
+
+      .cursor {
+        position: absolute;
+        left: 0;
+        top: 0;
+        z-index: 20;
+        width: 98px;
+        height: 120px;
+        opacity: 0;
+        filter: drop-shadow(0 10px 22px rgba(20, 134, 184, 0.24));
+        transform-origin: 13px 6px;
+      }
+
+      .cursor svg,
+      .claude-star svg {
+        display: block;
+        width: 100%;
+        height: 100%;
+      }
+
+      .claude-star {
+        position: absolute;
+        color: var(--claude);
+      }
+
+      .star-center {
+        left: 960px;
+        top: 530px;
+        width: 150px;
+        height: 150px;
+        transform: translate(-50%, -50%);
+      }
+
+      .star-brand {
+        left: 1084px;
+        top: 482px;
+        width: 24px;
+        height: 24px;
+      }
+
+      .star-panel {
+        left: 398px;
+        top: 272px;
+        width: 42px;
+        height: 42px;
+      }
+
+      .burst-block {
+        position: absolute;
+        background: var(--orange);
+        border-radius: 9px;
+        clip-path: polygon(
+          2% 8%,
+          14% 4%,
+          42% 5%,
+          63% 2%,
+          92% 5%,
+          99% 12%,
+          97% 88%,
+          86% 96%,
+          55% 94%,
+          28% 98%,
+          5% 92%,
+          0 18%
+        );
+        z-index: 4;
+        will-change: transform, opacity, filter;
+      }
+
+      .burst-a {
+        left: 735px;
+        top: 418px;
+        width: 162px;
+        height: 90px;
+      }
+
+      .burst-b {
+        left: 920px;
+        top: 414px;
+        width: 172px;
+        height: 92px;
+      }
+
+      .burst-c {
+        left: 1300px;
+        top: 420px;
+        width: 96px;
+        height: 92px;
+      }
+
+      .burst-d {
+        left: 790px;
+        top: 648px;
+        width: 172px;
+        height: 94px;
+      }
+
+      .burst-e {
+        left: 1042px;
+        top: 642px;
+        width: 90px;
+        height: 96px;
+      }
+
+      .burst-f {
+        left: 1110px;
+        top: 476px;
+        width: 64px;
+        height: 44px;
+        opacity: 0;
+      }
+
+      .selection-box {
+        position: absolute;
+        left: 380px;
+        top: 252px;
+        width: 550px;
+        height: 176px;
+        border: 1px solid rgba(198, 173, 144, 0.32);
+        background: rgba(228, 206, 181, 0.34);
+        opacity: 0;
+        transform-origin: 0 0;
+        z-index: 1;
+      }
+
+      .intro-remnants {
+        position: absolute;
+        inset: 0;
+        z-index: 2;
+        pointer-events: none;
+      }
+
+      .intro-remnant {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        color: var(--ink);
+        font-size: 100px;
+        font-weight: 620;
+        line-height: 0.92;
+        letter-spacing: -0.055em;
+        white-space: nowrap;
+        opacity: 0;
+        will-change: transform, opacity, filter;
+      }
+
+      .rem-a {
+        margin-left: -220px;
+        margin-top: -44px;
+      }
+
+      .rem-b {
+        margin-left: -42px;
+        margin-top: -42px;
+      }
+
+      .rem-c {
+        margin-left: 155px;
+        margin-top: -48px;
+      }
+
+      .rem-d {
+        margin-left: -82px;
+        margin-top: -4px;
+      }
+
+      .fragment-word {
+        position: absolute;
+        inset: 0;
+        z-index: 2;
+        pointer-events: none;
+      }
+
+      .frag {
+        position: absolute;
+        color: var(--ink);
+        font-size: 88px;
+        font-weight: 590;
+        line-height: 0.9;
+        letter-spacing: -0.055em;
+        opacity: 0;
+        white-space: nowrap;
+        will-change: transform, opacity, filter;
+      }
+
+      .frag-alg {
+        left: 649px;
+        top: 484px;
+      }
+
+      .frag-row {
+        left: 770px;
+        top: 495px;
+      }
+
+      .frag-x {
+        left: 932px;
+        top: 484px;
+      }
+
+      .frag-clau {
+        left: 1000px;
+        top: 480px;
+      }
+
+      .frag-de {
+        left: 1162px;
+        top: 480px;
+      }
+
+      .final-wordmark {
+        position: absolute;
+        inset: 0;
+        z-index: 3;
+        color: var(--ink);
+        opacity: 0;
+        pointer-events: none;
+        will-change: transform, opacity, filter;
+      }
+
+      .final-wordmark span {
+        position: absolute;
+        white-space: nowrap;
+        line-height: 0.9;
+      }
+
+      .final-algrow {
+        left: 690px;
+        top: 484px;
+        font-size: 88px;
+        font-weight: 590;
+        letter-spacing: -0.055em;
+        transform: scaleX(1);
+        transform-origin: 0 0;
+      }
+
+      .final-x {
+        left: 884px;
+        top: 484px;
+        font-size: 88px;
+        font-weight: 590;
+        letter-spacing: -0.055em;
+      }
+
+      .final-claude {
+        left: 955px;
+        top: 480px;
+        font-size: 88px;
+        font-weight: 590;
+        letter-spacing: -0.055em;
+        transform: scaleX(1);
+        transform-origin: 0 0;
+      }
+
+      .ui-content {
+        align-items: center;
+        justify-content: center;
+      }
+
+      .input-stack {
+        position: relative;
+        width: 1300px;
+        height: 332px;
+        transform-origin: 50% 50%;
+      }
+
+      .input-panel {
+        position: absolute;
+        left: 0;
+        width: 100%;
+        background: var(--panel);
+        border: 1px solid var(--line);
+        border-radius: 42px;
+        box-shadow: 0 18px 50px var(--panel-shadow);
+        opacity: 0;
+      }
+
+      .panel-empty {
+        top: -54px;
+        height: 306px;
+        opacity: 1;
+      }
+
+      .panel-full {
+        top: 0;
+        height: 318px;
+      }
+
+      .panel-thinking {
+        top: 7px;
+        height: 304px;
+      }
+
+      .placeholder {
+        position: absolute;
+        left: 54px;
+        top: 48px;
+        color: var(--muted);
+        font-size: 34px;
+        line-height: 1.15;
+        letter-spacing: -0.03em;
+      }
+
+      .prompt-text {
+        position: absolute;
+        left: 54px;
+        right: 56px;
+        top: 42px;
+        bottom: 110px;
+        color: var(--ink);
+        font-size: 32px;
+        font-weight: 400;
+        line-height: 1.16;
+        letter-spacing: -0.035em;
+      }
+
+      .prompt-text span {
+        opacity: 0;
+      }
+
+      .panel-plus {
+        position: absolute;
+        left: 52px;
+        bottom: 44px;
+        width: 42px;
+        height: 42px;
+      }
+
+      .panel-plus::before,
+      .panel-plus::after {
+        content: "";
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        width: 34px;
+        height: 2px;
+        background: var(--ink);
+        transform: translate(-50%, -50%);
+      }
+
+      .panel-plus::after {
+        transform: translate(-50%, -50%) rotate(90deg);
+      }
+
+      .model {
+        position: absolute;
+        right: 126px;
+        bottom: 48px;
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        color: var(--ink);
+        font-size: 30px;
+        line-height: 1;
+        letter-spacing: -0.045em;
+      }
+
+      .panel-empty .model {
+        right: 78px;
+      }
+
+      .model .muted {
+        color: var(--muted);
+      }
+
+      .chevron {
+        width: 14px;
+        height: 14px;
+        border-right: 2px solid var(--muted);
+        border-bottom: 2px solid var(--muted);
+        transform: rotate(45deg) translateY(-5px);
+      }
+
+      .send-button {
+        position: absolute;
+        right: 42px;
+        bottom: 38px;
+        display: grid;
+        place-items: center;
+        width: 64px;
+        height: 64px;
+        border-radius: 17px;
+        background: var(--claude);
+        box-shadow: 0 10px 20px rgba(200, 95, 69, 0.18);
+        opacity: 0;
+        transform-origin: 50% 50%;
+      }
+
+      .panel-thinking .send-button {
+        opacity: 1;
+      }
+
+      .send-button svg {
+        width: 30px;
+        height: 30px;
+      }
+
+      .thinking-line {
+        position: absolute;
+        left: 54px;
+        top: 48px;
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        color: var(--ink);
+        font-size: 30px;
+        line-height: 1;
+        letter-spacing: -0.035em;
+        opacity: 0;
+      }
+
+      .thinking-line .claude-star {
+        position: relative;
+        left: auto;
+        top: auto;
+        width: 24px;
+        height: 24px;
+      }
+
+      .x-result {
+        position: absolute;
+        left: 54px;
+        top: 44px;
+        display: flex;
+        align-items: center;
+        gap: 18px;
+        color: var(--ink);
+        font-size: 30px;
+        line-height: 1;
+        letter-spacing: -0.035em;
+        opacity: 0;
+      }
+
+      .x-trigger {
+        display: grid;
+        place-items: center;
+        width: 48px;
+        height: 48px;
+        border-radius: 15px;
+        background: var(--ink);
+        color: var(--panel);
+        font-size: 29px;
+        font-weight: 680;
+        letter-spacing: -0.06em;
+        box-shadow: 0 14px 28px rgba(17, 17, 15, 0.18);
+      }
+
+      .social-card {
+        position: absolute;
+        left: 560px;
+        top: 178px;
+        width: 800px;
+        height: 430px;
+        border: 1px solid var(--line);
+        border-radius: 36px;
+        background: var(--panel);
+        box-shadow: 0 28px 70px rgba(36, 31, 24, 0.13);
+        opacity: 0;
+        overflow: hidden;
+        transform-origin: 50% 50%;
+      }
+
+      .social-card::before {
+        content: "";
+        position: absolute;
+        inset: 0 0 auto;
+        height: 150px;
+        background: linear-gradient(135deg, rgba(20, 134, 184, 0.14), rgba(200, 95, 69, 0.12));
+      }
+
+      .social-x {
+        position: absolute;
+        right: 28px;
+        top: 24px;
+        display: grid;
+        place-items: center;
+        width: 44px;
+        height: 44px;
+        border-radius: 14px;
+        background: var(--ink);
+        color: var(--panel);
+        font-size: 28px;
+        font-weight: 680;
+      }
+
+      .social-avatar {
+        position: absolute;
+        left: 52px;
+        top: 94px;
+        width: 118px;
+        height: 118px;
+        border: 5px solid var(--panel);
+        border-radius: 50%;
+        object-fit: cover;
+        object-position: 50% 50%;
+        box-shadow: 0 18px 34px rgba(20, 134, 184, 0.2);
+      }
+
+      .social-name {
+        position: absolute;
+        left: 52px;
+        top: 236px;
+        color: var(--ink);
+        font-size: 44px;
+        font-weight: 620;
+        line-height: 1;
+        letter-spacing: -0.055em;
+      }
+
+      .social-handle {
+        position: absolute;
+        left: 52px;
+        top: 288px;
+        color: var(--muted);
+        font-size: 26px;
+        line-height: 1;
+        letter-spacing: -0.025em;
+      }
+
+      .social-bio {
+        position: absolute;
+        left: 52px;
+        right: 52px;
+        top: 334px;
+        color: var(--ink);
+        font-size: 25px;
+        line-height: 1.16;
+        letter-spacing: -0.035em;
+      }
+
+      .follow-button {
+        position: absolute;
+        right: 46px;
+        top: 236px;
+        display: grid;
+        place-items: center;
+        width: 174px;
+        height: 54px;
+        border-radius: 18px;
+        background: var(--ink);
+        color: var(--panel);
+        font-size: 24px;
+        font-weight: 620;
+        letter-spacing: -0.035em;
+        overflow: hidden;
+        transform-origin: 50% 50%;
+      }
+
+      .follow-label {
+        position: absolute;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 8px;
+        inset: 0;
+        white-space: nowrap;
+      }
+
+      .follow-label-following {
+        opacity: 0;
+      }
+
+      .follow-check {
+        display: block;
+        width: 20px;
+        height: 20px;
+      }
+
+      .follow-check svg {
+        display: block;
+        width: 100%;
+        height: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="blue-sweater-intro-video"
+      data-start="0"
+      data-duration="12"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div
+        id="base"
+        class="clip base"
+        data-start="0"
+        data-duration="12"
+        data-track-index="0"
+        style="z-index: 0"
+      ></div>
+
+      <div
+        id="warmup"
+        class="clip"
+        data-start="0"
+        data-duration="0.48"
+        data-track-index="1"
+        style="z-index: 2"
+      >
+        <div class="scene-content">
+          <div id="warmBlock" class="warm-block"></div>
+        </div>
+      </div>
+
+      <div
+        id="intro"
+        class="clip"
+        data-start="0.38"
+        data-duration="1.28"
+        data-track-index="2"
+        style="z-index: 3"
+      >
+        <div class="scene-content">
+          <h1 id="introTitle" class="title">Introducing</h1>
+        </div>
+      </div>
+
+      <div
+        id="burst"
+        class="clip"
+        data-start="1.38"
+        data-duration="1.54"
+        data-track-index="3"
+        style="z-index: 4"
+      >
+        <div class="scene-content">
+          <div class="selection-box"></div>
+          <div class="intro-remnants" aria-hidden="true">
+            <span class="intro-remnant rem-a">Intro</span>
+            <span class="intro-remnant rem-b">ducin</span>
+            <span class="intro-remnant rem-c">g</span>
+            <span class="intro-remnant rem-d">tro</span>
+          </div>
+          <div class="burst-block burst-a"></div>
+          <div class="burst-block burst-b"></div>
+          <div class="burst-block burst-c"></div>
+          <div class="burst-block burst-d"></div>
+          <div class="burst-block burst-e"></div>
+          <div class="burst-block burst-f"></div>
+          <div class="claude-star star-center burst-star" aria-hidden="true">
+            <svg viewBox="-50 -50 100 100">
+              <g stroke="currentColor" stroke-width="8" stroke-linecap="round">
+                <line x1="0" y1="-38" x2="0" y2="38" />
+                <line x1="-38" y1="0" x2="38" y2="0" />
+                <line x1="-27" y1="-27" x2="27" y2="27" />
+                <line x1="-27" y1="27" x2="27" y2="-27" />
+                <line x1="-14" y1="-35" x2="14" y2="35" />
+                <line x1="-35" y1="-14" x2="35" y2="14" />
+              </g>
+            </svg>
+          </div>
+        </div>
+      </div>
+
+      <div
+        id="brand"
+        class="clip"
+        data-start="2.04"
+        data-duration="1.04"
+        data-track-index="4"
+        style="z-index: 5"
+      >
+        <div class="scene-content">
+          <div class="fragment-word" aria-hidden="true">
+            <span class="frag frag-alg">blu</span>
+            <span class="frag frag-row">e</span>
+            <span class="frag frag-x">x</span>
+            <span class="frag frag-clau">swea</span>
+            <span class="frag frag-de">ter</span>
+          </div>
+          <div class="final-wordmark" aria-hidden="true">
+            <span class="final-algrow">blue</span>
+            <span class="final-x">x</span>
+            <span class="final-claude">sweater</span>
+          </div>
+        </div>
+      </div>
+
+      <div
+        id="ui"
+        class="clip"
+        data-start="2.76"
+        data-duration="9"
+        data-track-index="5"
+        style="z-index: 6"
+      >
+        <div class="scene-content ui-content">
+          <div class="claude-star star-panel" aria-hidden="true">
+            <svg viewBox="-50 -50 100 100">
+              <g stroke="currentColor" stroke-width="8" stroke-linecap="round">
+                <line x1="0" y1="-38" x2="0" y2="38" />
+                <line x1="-38" y1="0" x2="38" y2="0" />
+                <line x1="-27" y1="-27" x2="27" y2="27" />
+                <line x1="-27" y1="27" x2="27" y2="-27" />
+                <line x1="-14" y1="-35" x2="14" y2="35" />
+                <line x1="-35" y1="-14" x2="35" y2="14" />
+              </g>
+            </svg>
+          </div>
+
+          <div class="input-stack">
+            <div class="input-panel panel-empty">
+              <div class="placeholder">How can I help you today?</div>
+              <div class="panel-plus"></div>
+              <div class="model">
+                <span>Opus 5.0 <span class="muted">Extended</span></span>
+                <span class="chevron"></span>
+              </div>
+            </div>
+
+            <div class="input-panel panel-full">
+              <div id="promptText" class="prompt-text">
+                Recommend one X creator who actively explores AI technology and, like me, is
+                building an AI startup. I want someone practical, curious, and worth following.
+              </div>
+              <div class="panel-plus"></div>
+              <div class="model">
+                <span>Opus 5.0 <span class="muted">Extended</span></span>
+                <span class="chevron"></span>
+              </div>
+              <div id="sendFull" class="send-button" aria-hidden="true">
+                <svg viewBox="0 0 32 32" fill="none">
+                  <path
+                    d="M16 25V8M16 8L9 15M16 8L23 15"
+                    stroke="#FBFAF6"
+                    stroke-width="3.3"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                </svg>
+              </div>
+            </div>
+
+            <div class="input-panel panel-thinking">
+              <div class="thinking-line">
+                <span class="claude-star" aria-hidden="true">
+                  <svg viewBox="-50 -50 100 100">
+                    <g stroke="currentColor" stroke-width="8" stroke-linecap="round">
+                      <line x1="0" y1="-38" x2="0" y2="38" />
+                      <line x1="-38" y1="0" x2="38" y2="0" />
+                      <line x1="-27" y1="-27" x2="27" y2="27" />
+                      <line x1="-27" y1="27" x2="27" y2="-27" />
+                      <line x1="-14" y1="-35" x2="14" y2="35" />
+                      <line x1="-35" y1="-14" x2="35" y2="14" />
+                    </g>
+                  </svg>
+                </span>
+                <span>thinking</span>
+              </div>
+              <div class="x-result">
+                <span class="x-trigger">x</span>
+                <span>Open the recommended X profile</span>
+              </div>
+              <div class="panel-plus"></div>
+              <div class="model">
+                <span>Opus 5.0 <span class="muted">Extended</span></span>
+                <span class="chevron"></span>
+              </div>
+              <div class="send-button" aria-hidden="true">
+                <svg viewBox="0 0 32 32" fill="none">
+                  <path
+                    d="M16 25V8M16 8L9 15M16 8L23 15"
+                    stroke="#FBFAF6"
+                    stroke-width="3.3"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                </svg>
+              </div>
+            </div>
+          </div>
+          <div class="social-card" aria-hidden="true">
+            <div class="social-x">x</div>
+            <img class="social-avatar" src="assets/joe-sai-avatar.png" alt="" />
+            <div class="social-name">joe sai</div>
+            <div class="social-handle">@_blue_sweater_</div>
+            <div class="follow-button">
+              <span class="follow-label follow-label-follow">Follow</span>
+              <span class="follow-label follow-label-following">
+                <span>Following</span>
+                <span class="follow-check" aria-hidden="true">
+                  <svg
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="#FBFAF6"
+                    stroke-width="2.8"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  >
+                    <polyline points="20 6 9 17 4 12"></polyline>
+                  </svg>
+                </span>
+              </span>
+            </div>
+            <div class="social-bio">
+              Exploring AI technology and building an AI startup in public.
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div
+        id="cursor"
+        class="clip cursor"
+        data-start="0"
+        data-duration="12"
+        data-track-index="9"
+        aria-hidden="true"
+        style="z-index: 20"
+      >
+        <svg viewBox="0 0 98 120" fill="none">
+          <path
+            d="M13 6L86 80L51 85L35 114L13 6Z"
+            fill="#1486B8"
+            stroke="#F7F5EF"
+            stroke-width="7"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </div>
+
+      <audio
+        id="audio-mix"
+        data-start="0"
+        data-duration="12"
+        data-track-index="20"
+        src="assets/sfx/integrated-melodic-tech-mix.wav"
+        data-volume="1"
+      ></audio>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      const promptEl = document.querySelector("#promptText");
+      const promptText = promptEl.textContent.replace(/\s+/g, " ").trim();
+      promptEl.textContent = "";
+      for (const char of promptText) {
+        const span = document.createElement("span");
+        span.textContent = char;
+        promptEl.appendChild(span);
+      }
+
+      const tl = gsap.timeline({ paused: true, defaults: { ease: "power3.out" } });
+
+      tl.set(["#warmup", "#intro", "#burst", "#brand", "#ui"], { opacity: 0 });
+      tl.set("#cursor", { x: 690, y: 846, rotation: -8, scale: 0.72, opacity: 0 });
+      tl.set(".panel-full", { opacity: 0 });
+      tl.set(".panel-thinking", { opacity: 0 });
+      tl.set(".prompt-text span", { opacity: 0 });
+      tl.set("#sendFull", { opacity: 0, scale: 0.84 });
+      tl.set([".selection-box", ".intro-remnant", ".frag", ".final-wordmark"], { opacity: 0 });
+      tl.set([".x-result", ".social-card"], { opacity: 0 });
+      tl.set(".x-trigger", { scale: 1 });
+
+      tl.to("#warmup", { opacity: 1, duration: 0.01 }, 0);
+      tl.fromTo(
+        "#warmBlock",
+        { x: -820, scaleX: 0.42, opacity: 0, filter: "blur(14px)" },
+        { x: -25, scaleX: 1, opacity: 1, filter: "blur(0px)", duration: 0.22, ease: "power2.out" },
+        0.02,
+      );
+      tl.to(
+        "#warmBlock",
+        { x: 620, opacity: 0, filter: "blur(18px)", duration: 0.24, ease: "power2.in" },
+        0.25,
+      );
+      tl.to("#warmup", { opacity: 0, duration: 0.08 }, 0.4);
+
+      tl.to("#intro", { opacity: 1, duration: 0.1 }, 0.44);
+      tl.fromTo(
+        "#introTitle",
+        { opacity: 0, y: 26, filter: "blur(10px)" },
+        { opacity: 1, y: 0, filter: "blur(0px)", duration: 0.46, ease: "expo.out" },
+        0.48,
+      );
+      tl.to("#cursor", { opacity: 1, duration: 0.12 }, 0.44);
+      tl.to(
+        "#cursor",
+        { x: 942, y: 604, rotation: -3, duration: 0.36, ease: "power2.inOut", overwrite: "auto" },
+        0.44,
+      );
+      tl.to(
+        "#cursor",
+        { x: 982, y: 642, rotation: -6, duration: 0.24, ease: "power2.inOut", overwrite: "auto" },
+        1.28,
+      );
+      tl.to(
+        "#introTitle",
+        { opacity: 0.26, filter: "blur(4px)", duration: 0.03, ease: "power2.in" },
+        1.43,
+      );
+      tl.fromTo(
+        ".intro-remnant",
+        { opacity: 0, x: 0, y: 0, filter: "blur(2px)" },
+        {
+          opacity: 0.32,
+          x: (index) => [-22, 8, 32, -10][index],
+          y: (index) => [-10, 5, -18, 28][index],
+          filter: "blur(7px)",
+          duration: 0.055,
+          stagger: 0.004,
+          ease: "power2.out",
+        },
+        1.435,
+      );
+      tl.to(
+        "#introTitle",
+        { opacity: 0, y: -8, filter: "blur(10px)", duration: 0.08, ease: "power2.in" },
+        1.47,
+      );
+      tl.to(
+        ".intro-remnant",
+        { opacity: 0, filter: "blur(11px)", duration: 0.07, ease: "power2.in" },
+        1.49,
+      );
+      tl.to("#intro", { opacity: 0, duration: 0.06 }, 1.56);
+
+      tl.to("#burst", { opacity: 1, duration: 0.02 }, 1.4);
+      tl.fromTo(
+        ".burst-star",
+        { opacity: 0, scale: 0.08, rotation: -20 },
+        { opacity: 1, scale: 0.16, rotation: -6, duration: 0.08, ease: "power2.out" },
+        1.43,
+      );
+      tl.to(
+        ".burst-star",
+        { scale: 1, rotation: 0, duration: 0.42, ease: "expo.out", overwrite: "auto" },
+        1.55,
+      );
+      const blockPaths = [
+        {
+          source: [-1, 28],
+          scatter: [-160, -96],
+          drift: [-151, -126],
+          select: [-82, -86],
+          squeeze: [19, -68],
+          release: [19, -68],
+          fade: 2.17,
+        },
+        {
+          source: [-11, 5],
+          scatter: [165, -123],
+          drift: [153, -126],
+          select: [61, -118],
+          squeeze: [-81, -65],
+          release: [-81, -65],
+          fade: 2.17,
+        },
+        {
+          source: [-3, -8],
+          scatter: [169, -28],
+          drift: [174, -24],
+          select: [127, 9],
+          squeeze: [37, 70],
+          release: [-78, 96],
+          fade: 2.33,
+        },
+        {
+          source: [-9, 2],
+          scatter: [-153, 80],
+          drift: [-157, 76],
+          select: [-133, 39],
+          squeeze: [-90, -40],
+          release: [-90, -40],
+          fade: 2.17,
+        },
+        {
+          source: [-7, -13],
+          scatter: [-10, 129],
+          drift: [-17, 128],
+          select: [-38, 83],
+          squeeze: [-67, -18],
+          release: [-92, -87],
+          fade: 2.33,
+        },
+      ];
+      gsap.utils.toArray(".burst-block").forEach((block, index) => {
+        const path = blockPaths[index];
+        if (!path) {
+          tl.set(block, { opacity: 0 });
+          return;
+        }
+        tl.set(
+          block,
+          {
+            x: path.source[0],
+            y: path.source[1],
+            scale: 0.78,
+            rotation: index % 2 ? 3 : -3,
+            filter: "blur(8px)",
+          },
+          1.45,
+        );
+        tl.to(
+          block,
+          {
+            opacity: 1,
+            scale: 1,
+            rotation: 0,
+            filter: "blur(0px)",
+            duration: 0.055,
+            ease: "power3.out",
+          },
+          1.455,
+        );
+        tl.to(
+          block,
+          {
+            x: path.scatter[0],
+            y: path.scatter[1],
+            rotation: index % 2 ? 2 : -2,
+            duration: 0.2,
+            ease: "sine.out",
+          },
+          1.5,
+        );
+        tl.to(
+          block,
+          {
+            x: path.drift[0],
+            y: path.drift[1],
+            rotation: index % 2 ? 1 : -1,
+            duration: 0.2,
+            ease: "sine.inOut",
+          },
+          1.7,
+        );
+        tl.to(
+          block,
+          { x: path.select[0], y: path.select[1], rotation: 0, duration: 0.2, ease: "sine.inOut" },
+          1.9,
+        );
+        tl.to(
+          block,
+          {
+            x: path.squeeze[0],
+            y: path.squeeze[1],
+            scale: 1,
+            rotation: 0,
+            filter: "blur(0.6px)",
+            duration: 0.07,
+            ease: "sine.inOut",
+          },
+          2.1,
+        );
+        tl.to(
+          block,
+          {
+            x: path.release[0],
+            y: path.release[1],
+            scale: 0.84,
+            rotation: 0,
+            filter: "blur(1.5px)",
+            duration: 0.05,
+            ease: "sine.inOut",
+          },
+          2.17,
+        );
+        tl.to(
+          block,
+          { opacity: 0, scale: 0.38, filter: "blur(7px)", duration: 0.05, ease: "power2.in" },
+          path.fade,
+        );
+      });
+      tl.to(
+        "#cursor",
+        { x: 1540, y: 112, rotation: -9, duration: 0.26, ease: "power2.inOut", overwrite: "auto" },
+        1.56,
+      );
+      tl.to(
+        "#cursor",
+        { x: 380, y: 252, rotation: -7, duration: 0.16, ease: "power2.inOut", overwrite: "auto" },
+        1.82,
+      );
+      tl.fromTo(
+        ".selection-box",
+        { opacity: 0, scaleX: 0.06, scaleY: 0.1, x: 0, y: 0, filter: "blur(3px)" },
+        {
+          opacity: 1,
+          scaleX: 1,
+          scaleY: 1,
+          x: 42,
+          y: 52,
+          filter: "blur(0px)",
+          duration: 0.18,
+          ease: "power2.out",
+        },
+        1.96,
+      );
+      tl.to(
+        "#cursor",
+        { x: 930, y: 478, rotation: -4, duration: 0.14, ease: "power2.inOut", overwrite: "auto" },
+        1.96,
+      );
+      tl.to(
+        "#cursor",
+        { x: 1168, y: 560, rotation: -4, duration: 0.14, ease: "power2.inOut", overwrite: "auto" },
+        2.12,
+      );
+      tl.to(
+        ".selection-box",
+        { x: 220, y: 158, width: 640, height: 190, duration: 0.2, ease: "power2.inOut" },
+        2.16,
+      );
+      tl.to(
+        ".burst-star",
+        {
+          x: 118,
+          y: -62,
+          scale: 0.16,
+          opacity: 0.45,
+          duration: 0.18,
+          ease: "power2.inOut",
+          overwrite: "auto",
+        },
+        2.12,
+      );
+
+      tl.to("#brand", { opacity: 1, duration: 0.04 }, 2.08);
+
+      const fragmentMotion = [
+        {
+          selector: ".frag-alg",
+          from: [112, -118, 4],
+          carry: [88, -96],
+          settle: [20, -24],
+          lock: [0, 0],
+          visible: 1,
+        },
+        {
+          selector: ".frag-row",
+          from: [-12, 78, 5],
+          carry: [-22, 56],
+          settle: [-8, 18],
+          lock: [0, 0],
+          visible: 1,
+        },
+        {
+          selector: ".frag-x",
+          from: [38, 70, 7],
+          carry: [18, 48],
+          settle: [6, 14],
+          lock: [0, 0],
+          visible: 0.82,
+        },
+        {
+          selector: ".frag-clau",
+          from: [-82, -108, 4],
+          carry: [-54, -78],
+          settle: [-18, -18],
+          lock: [0, 0],
+          visible: 1,
+        },
+        {
+          selector: ".frag-de",
+          from: [62, 22, 5],
+          carry: [38, 12],
+          settle: [12, 4],
+          lock: [0, 0],
+          visible: 1,
+        },
+      ];
+
+      fragmentMotion.forEach((piece, index) => {
+        tl.fromTo(
+          piece.selector,
+          {
+            opacity: 0,
+            x: piece.from[0],
+            y: piece.from[1],
+            scale: 0.99,
+            filter: `blur(${piece.from[2]}px)`,
+          },
+          {
+            opacity: piece.visible,
+            x: piece.carry[0],
+            y: piece.carry[1],
+            scale: 1,
+            filter: "blur(1.2px)",
+            duration: 0.16,
+            ease: "sine.out",
+            overwrite: "auto",
+          },
+          2.12 + index * 0.004,
+        );
+        tl.to(
+          piece.selector,
+          {
+            x: piece.settle[0],
+            y: piece.settle[1],
+            opacity: piece.visible,
+            filter: "blur(0.35px)",
+            duration: 0.28,
+            ease: "power3.out",
+            overwrite: "auto",
+          },
+          2.28 + index * 0.003,
+        );
+        tl.to(
+          piece.selector,
+          {
+            opacity: 0,
+            x: piece.settle[0] + [8, -6, 2, -8, 6][index],
+            y: piece.settle[1] + [-6, 7, 4, -5, 3][index],
+            filter: "blur(4px)",
+            duration: 0.14,
+            ease: "power2.out",
+            overwrite: "auto",
+          },
+          2.31 + index * 0.002,
+        );
+      });
+
+      tl.fromTo(
+        ".final-wordmark",
+        { opacity: 0, x: -12, y: 8, scale: 0.995, filter: "blur(5px)" },
+        {
+          opacity: 1,
+          x: 0,
+          y: 0,
+          scale: 1,
+          filter: "blur(0px)",
+          duration: 0.24,
+          ease: "power4.out",
+          overwrite: "auto",
+        },
+        2.38,
+      );
+      tl.to(".burst-star", { opacity: 0, duration: 0.12, ease: "power2.in" }, 2.32);
+      tl.to(
+        ".selection-box",
+        { opacity: 0, filter: "blur(5px)", duration: 0.16, ease: "power2.in" },
+        2.33,
+      );
+      tl.to(
+        "#cursor",
+        { x: 1256, y: 587, rotation: -3, duration: 0.3, ease: "power2.inOut", overwrite: "auto" },
+        2.34,
+      );
+      tl.to("#burst", { opacity: 0, filter: "blur(6px)", duration: 0.14, ease: "power2.in" }, 2.58);
+      tl.to("#cursor", { opacity: 0, duration: 0.13, ease: "power2.in" }, 2.86);
+      tl.set("#cursor", { opacity: 0 }, 3.0);
+      tl.to(
+        "#brand",
+        { opacity: 0, y: 26, filter: "blur(9px)", duration: 0.22, ease: "power2.in" },
+        2.9,
+      );
+
+      tl.to("#ui", { opacity: 1, duration: 0.08 }, 3.02);
+      tl.fromTo(
+        ".input-stack",
+        { opacity: 0, scale: 0.88, y: 92, filter: "blur(14px)" },
+        { opacity: 1, scale: 1, y: 0, filter: "blur(0px)", duration: 0.66, ease: "expo.out" },
+        3.05,
+      );
+      tl.fromTo(
+        ".star-panel",
+        { opacity: 0, scale: 0.5, rotation: -16 },
+        { opacity: 1, scale: 1, rotation: 0, duration: 0.38, ease: "power3.out" },
+        3.18,
+      );
+      tl.fromTo(".placeholder", { opacity: 0, y: 12 }, { opacity: 1, y: 0, duration: 0.34 }, 3.3);
+      tl.fromTo(
+        ".panel-empty .panel-plus, .panel-empty .model",
+        { opacity: 0, y: 10 },
+        { opacity: 1, y: 0, duration: 0.3, stagger: 0.06 },
+        3.42,
+      );
+
+      tl.to(".panel-empty", { opacity: 0, duration: 0.18, ease: "power2.inOut" }, 4.12);
+      tl.to(".panel-full", { opacity: 1, duration: 0.18, ease: "power2.inOut" }, 4.12);
+      tl.to(
+        ".input-stack",
+        { scale: 1.32, x: 300, y: -100, duration: 0.26, ease: "power2.inOut" },
+        4.14,
+      );
+      tl.to(".input-stack", { scale: 1, x: 0, y: 0, duration: 0.74, ease: "power2.inOut" }, 4.92);
+
+      tl.to(
+        ".prompt-text span",
+        { opacity: 1, duration: 0.01, stagger: { amount: 2.85 }, ease: "none" },
+        4.18,
+      );
+      tl.to("#sendFull", { opacity: 1, scale: 1, duration: 0.24, ease: "power3.out" }, 7.32);
+      tl.fromTo(
+        "#cursor",
+        { x: 1328, y: 900, rotation: -6, scale: 1, opacity: 0 },
+        {
+          x: 1530,
+          y: 900,
+          rotation: -5,
+          scale: 1,
+          opacity: 1,
+          duration: 0.48,
+          ease: "power2.inOut",
+        },
+        6.92,
+      );
+      tl.to(
+        "#cursor",
+        { x: 1512, y: 620, rotation: -5, duration: 0.5, ease: "power2.inOut" },
+        7.44,
+      );
+
+      tl.to("#sendFull", { scale: 0.86, duration: 0.08, ease: "power2.in" }, 7.9);
+      tl.to("#sendFull", { scale: 1, duration: 0.14, ease: "back.out(1.7)" }, 7.98);
+      tl.to(".panel-full", { opacity: 0, duration: 0.16, ease: "power2.inOut" }, 8.15);
+      tl.to(".panel-thinking", { opacity: 1, duration: 0.18, ease: "power2.inOut" }, 8.15);
+      tl.set(".thinking-line", { opacity: 0 }, 8.24);
+      tl.to(
+        ".thinking-line",
+        { opacity: 1, duration: 0.3, ease: "power3.out", overwrite: "auto" },
+        8.25,
+      );
+      tl.to("#cursor", { x: 1554, y: 620, rotation: -5, duration: 0.28, ease: "power2.out" }, 7.94);
+      tl.to(
+        ".thinking-line",
+        { opacity: 0, duration: 0.18, ease: "power2.inOut", overwrite: "auto" },
+        8.64,
+      );
+      tl.fromTo(
+        ".x-result",
+        { opacity: 0, y: 12 },
+        { opacity: 1, y: 0, duration: 0.28, ease: "power3.out" },
+        8.82,
+      );
+      tl.to(
+        "#cursor",
+        { x: 365, y: 418, rotation: -6, duration: 0.58, ease: "power2.inOut", overwrite: "auto" },
+        8.74,
+      );
+      tl.to(
+        ".x-trigger",
+        {
+          keyframes: [
+            { scale: 0.88, duration: 0.08, ease: "power2.in" },
+            { scale: 1, duration: 0.14, ease: "back.out(1.7)" },
+          ],
+          overwrite: "auto",
+        },
+        9.34,
+      );
+      tl.to(".x-result", { opacity: 0, y: -8, duration: 0.18, ease: "power2.inOut" }, 9.5);
+      tl.to(
+        ".input-stack",
+        {
+          opacity: 0,
+          scale: 0.93,
+          y: 26,
+          filter: "blur(12px)",
+          duration: 0.4,
+          ease: "power3.inOut",
+        },
+        9.5,
+      );
+      tl.to(
+        ".star-panel",
+        { opacity: 0, scale: 0.72, rotation: 12, duration: 0.28, ease: "power2.inOut" },
+        9.5,
+      );
+      tl.fromTo(
+        ".social-card",
+        { opacity: 0, y: 34, scale: 0.88, filter: "blur(12px)" },
+        { opacity: 1, y: 0, scale: 1, filter: "blur(0px)", duration: 0.6, ease: "expo.out" },
+        9.86,
+      );
+      tl.to(
+        "#cursor",
+        { x: 1408, y: 246, rotation: -5, duration: 0.42, ease: "power2.inOut", overwrite: "auto" },
+        9.96,
+      );
+      tl.to(
+        "#cursor",
+        { x: 1242, y: 446, rotation: -5, duration: 0.36, ease: "power2.inOut", overwrite: "auto" },
+        10.5,
+      );
+      tl.to(".follow-button", { scale: 0.9, duration: 0.08, ease: "power2.in" }, 10.88);
+      tl.to(
+        ".follow-button",
+        { scale: 1, backgroundColor: "#2f2f2f", duration: 0.28, ease: "elastic.out(1, 0.45)" },
+        10.96,
+      );
+      tl.to(".follow-label-follow", { opacity: 0, duration: 0.08, ease: "none" }, 10.96);
+      tl.to(".follow-label-following", { opacity: 1, duration: 0.08, ease: "none" }, 10.99);
+      tl.to(
+        "#cursor",
+        { x: 1286, y: 472, rotation: -5, duration: 0.16, ease: "power2.out", overwrite: "auto" },
+        11,
+      );
+
+      window.__timelines["blue-sweater-intro-video"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/camcorder-hud/camcorder-hud.html b/docs/public/catalog/blocks/camcorder-hud/camcorder-hud.html
new file mode 100644
index 0000000000..f5bb2d024a
--- /dev/null
+++ b/docs/public/catalog/blocks/camcorder-hud/camcorder-hud.html
@@ -0,0 +1,163 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: transparent;
+      }
+
+      #ch-hud {
+        --hf-camcorder-color: #fff;
+        --hf-camcorder-accent: #f12c2c;
+        --hf-camcorder-inset: 5vmin;
+        --hf-camcorder-font-size: 3.7vmin;
+        position: absolute;
+        inset: 0;
+        color: var(--hf-camcorder-color);
+        font-family: monospace;
+        font-size: var(--hf-camcorder-font-size);
+        font-weight: 700;
+        line-height: 1.25;
+        pointer-events: none;
+        -webkit-text-stroke: 0.12vmin rgb(0 0 0 / 92%);
+        text-shadow: 0 0.2vmin 0.6vmin rgb(0 0 0 / 90%);
+      }
+
+      #ch-hud .ch-corner {
+        position: absolute;
+      }
+
+      #ch-hud .ch-record {
+        top: var(--hf-camcorder-inset);
+        left: var(--hf-camcorder-inset);
+        display: flex;
+        align-items: center;
+        gap: 1.8vmin;
+      }
+
+      #ch-hud .ch-record-dot {
+        width: 2.2vmin;
+        height: 2.2vmin;
+        border-radius: 50%;
+        background: var(--hf-camcorder-accent);
+        box-shadow: 0 0 0.9vmin color-mix(in srgb, var(--hf-camcorder-accent) 55%, transparent);
+      }
+
+      #ch-hud .ch-battery {
+        top: var(--hf-camcorder-inset);
+        right: var(--hf-camcorder-inset);
+        width: 7vmin;
+        height: 3.5vmin;
+        border: 0.35vmin solid currentcolor;
+      }
+
+      #ch-hud .ch-battery::before {
+        position: absolute;
+        top: 0.7vmin;
+        left: 0.7vmin;
+        width: 4.7vmin;
+        height: 1.4vmin;
+        background: currentcolor;
+        content: "";
+      }
+
+      #ch-hud .ch-battery::after {
+        position: absolute;
+        top: 0.7vmin;
+        right: -1vmin;
+        width: 0.7vmin;
+        height: 1.4vmin;
+        background: currentcolor;
+        content: "";
+      }
+
+      #ch-hud .ch-date {
+        bottom: var(--hf-camcorder-inset);
+        left: var(--hf-camcorder-inset);
+      }
+
+      #ch-hud .ch-counter {
+        right: var(--hf-camcorder-inset);
+        bottom: var(--hf-camcorder-inset);
+        text-align: right;
+      }
+
+      #ch-hud .ch-mode {
+        display: block;
+        margin-bottom: 0.7vmin;
+        font-size: 2.6vmin;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="camcorder-hud"
+      data-composition-id="camcorder-hud"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="ch-hud" data-hf-counter-start="0" aria-hidden="true">
+        <div class="ch-corner ch-record"><span class="ch-record-dot"></span><span>REC</span></div>
+        <div class="ch-corner ch-battery"></div>
+        <div class="ch-corner ch-date">JAN 01 2000<br />12:00 AM</div>
+        <div class="ch-corner ch-counter">
+          <span class="ch-mode">SP · 16:9</span><span class="ch-counter-value">00:00:00</span>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      var hud = document.getElementById("ch-hud");
+      var counter = hud && hud.querySelector(".ch-counter-value");
+      var recordDot = hud && hud.querySelector(".ch-record-dot");
+      var host = hud && hud.closest("[data-composition-id]");
+      if (!hud || !counter || !recordDot || !host) {
+        throw new Error("Camcorder HUD could not find its composition host");
+      }
+
+      var compositionId = host.getAttribute("data-composition-id");
+      var duration = Number(host.getAttribute("data-duration")) || 4;
+      var counterStart = Number(hud.getAttribute("data-hf-counter-start")) || 0;
+      var state = { seconds: 0 };
+
+      function formatCounter(value) {
+        var seconds = Math.max(0, Math.floor(value));
+        var hours = Math.floor(seconds / 3600);
+        var minutes = Math.floor((seconds % 3600) / 60);
+        var remainder = seconds % 60;
+        return [hours, minutes, remainder]
+          .map(function (part) {
+            return String(part).padStart(2, "0");
+          })
+          .join(":");
+      }
+
+      function updateHud() {
+        counter.textContent = formatCounter(counterStart + state.seconds);
+        recordDot.style.opacity = Math.floor(state.seconds / 0.55) % 2 === 0 ? "1" : "0.25";
+      }
+
+      var tl = gsap.timeline({ paused: true });
+      tl.to(state, { seconds: duration, duration: duration, ease: "none", onUpdate: updateHud }, 0);
+      updateHud();
+      window.__timelines[compositionId] = tl;
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/camcorder-hud/demo-backdrop.jpg b/docs/public/catalog/blocks/camcorder-hud/demo-backdrop.jpg
new file mode 100644
index 0000000000..63bd79fb30
Binary files /dev/null and b/docs/public/catalog/blocks/camcorder-hud/demo-backdrop.jpg differ
diff --git a/docs/public/catalog/blocks/camcorder-hud/demo.html b/docs/public/catalog/blocks/camcorder-hud/demo.html
new file mode 100644
index 0000000000..2b5e68cc74
--- /dev/null
+++ b/docs/public/catalog/blocks/camcorder-hud/demo.html
@@ -0,0 +1,73 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Camcorder HUD - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+
+      html,
+      body,
+      #camcorder-hud-demo {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: #050505;
+      }
+
+      #ch-demo-backdrop,
+      #ch-demo-overlay {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+      }
+
+      #ch-demo-backdrop {
+        object-fit: cover;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="camcorder-hud-demo"
+      data-composition-id="camcorder-hud-demo"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <img
+        id="ch-demo-backdrop"
+        class="clip"
+        src="demo-backdrop.jpg"
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        alt="Creator recording a video"
+      />
+      <div
+        id="ch-demo-overlay"
+        data-composition-id="camcorder-hud"
+        data-composition-src="camcorder-hud.html"
+        data-start="0"
+        data-duration="4"
+        data-track-index="1"
+        data-width="1920"
+        data-height="1080"
+      ></div>
+    </div>
+
+    <script>
+      const tl = gsap.timeline({ paused: true });
+      tl.to("#ch-demo-backdrop", { scale: 1.02, duration: 4, ease: "none" }, 0);
+      window.__timelines = window.__timelines || {};
+      window.__timelines["camcorder-hud-demo"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/camera-dolly-zoom/__hf-variables-preview.html b/docs/public/catalog/blocks/camera-dolly-zoom/__hf-variables-preview.html
new file mode 100644
index 0000000000..e9ddbfbffe
--- /dev/null
+++ b/docs/public/catalog/blocks/camera-dolly-zoom/__hf-variables-preview.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Dolly Zoom (Vertigo Shot) variables preview</title>
+    <style>
+      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #0b0c0e; }
+      #hf-vars-root { position: relative; width: 1920px; height: 1080px; }
+      #hf-vars-mount { position: absolute; inset: 0; display: grid; place-items: center; }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  </head>
+  <body>
+    <div id="hf-vars-root" data-composition-id="camera-dolly-zoom-variables-preview" data-start="0" data-width="1920" data-height="1080" data-duration="4" data-fps="30">
+      <div id="hf-vars-mount" class="clip" data-composition-id="camera-dolly-zoom" data-composition-src="./camera-dolly-zoom.html" data-start="0" data-duration="4" data-track-index="0" data-width="1920" data-height="1080"></div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["camera-dolly-zoom-variables-preview"] = gsap.timeline({ paused: true });
+    </script>
+<script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "camera-dolly-zoom.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/camera-dolly-zoom/camera-dolly-zoom.html b/docs/public/catalog/blocks/camera-dolly-zoom/camera-dolly-zoom.html
new file mode 100644
index 0000000000..4b3b6743a7
--- /dev/null
+++ b/docs/public/catalog/blocks/camera-dolly-zoom/camera-dolly-zoom.html
@@ -0,0 +1,370 @@
+<!doctype html>
+<html
+  lang="en"
+  data-composition-variables='[
+    {
+      "id": "direction",
+      "type": "enum",
+      "label": "Dolly direction",
+      "default": "out",
+      "options": [
+        { "value": "out", "label": "Dolly out + zoom in (background rushes in)" },
+        { "value": "in", "label": "Dolly in + zoom out (background falls away)" }
+      ]
+    },
+    {
+      "id": "strength",
+      "type": "number",
+      "label": "Move strength (end / start distance ratio)",
+      "default": 2,
+      "min": 1.1,
+      "max": 4,
+      "step": 0.1
+    },
+    {
+      "id": "subjectDistance",
+      "type": "number",
+      "label": "Camera-to-subject distance at the start of the move",
+      "default": 1400,
+      "min": 600,
+      "max": 3000,
+      "step": 50,
+      "unit": "px"
+    },
+    {
+      "id": "easing",
+      "type": "enum",
+      "label": "Dolly easing",
+      "default": "power2.inOut",
+      "options": [
+        { "value": "none", "label": "Linear" },
+        { "value": "sine.inOut", "label": "Sine in-out" },
+        { "value": "power1.inOut", "label": "Power1 in-out" },
+        { "value": "power2.inOut", "label": "Power2 in-out" },
+        { "value": "power3.inOut", "label": "Power3 in-out" }
+      ]
+    }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <!--
+      ===================================================================
+      DOLLY ZOOM (Vertigo / Hitchcock shot)
+      ===================================================================
+
+      The camera tracks toward or away from the subject while the field of
+      view changes the opposite way, so the SUBJECT HOLDS ITS FRAME SIZE
+      while the background collapses behind it or rushes in.
+
+      THE CONSTRAINT (this is the whole effect, and it is exact, not taste):
+
+          d * tan(FOV / 2) = constant
+
+      where d is the camera-to-subject distance. Get it wrong and the shot
+      reads as a clumsy zoom. So focal length is SOLVED from distance every
+      frame; the two are never keyframed side by side.
+
+      In CSS 3D, `perspective: P px` IS the focal length in pixels, and it
+      also places the camera exactly P px in front of the z = 0 plane, so
+      tan(FOV / 2) = (viewportWidth / 2) / P. Substituting collapses the
+      invariant to a single ratio:
+
+          P(t) / d(t) = SUBJECT_SCALE   (constant)
+
+      Everything the rig animates falls out of that one line (see the script).
+
+      -------------------------------------------------------------------
+      WHAT THIS PRIMITIVE REQUIRES OF ITS CONTENT
+      -------------------------------------------------------------------
+
+      DEPTH. A flat element gains nothing from a dolly zoom -- with one
+      layer there is no background to collapse and the move is invisible.
+      Content dropped into #dz-rig MUST be layered or genuinely 3D:
+
+        * The SUBJECT sits on the z = 0 plane -- `translateZ(0)`. That is
+          the plane the solve holds; anything you want frame-locked goes
+          there and nowhere else.
+        * BACKGROUND layers get `translateZ(-N px)`, N > 0, at least two or
+          three distinct depths (this demo ships five arches plus a back
+          wall). More separation = stronger effect.
+        * Everything inside #dz-rig must keep `transform-style: preserve-3d`
+          on its ancestors and must NOT sit behind `overflow: hidden`, or
+          the browser flattens the scene and the depth disappears.
+        * Keep every layer at a depth where `d + N > 0` for the whole move,
+          i.e. no layer in front of the camera's closest approach.
+
+      -------------------------------------------------------------------
+      DETERMINISM
+      -------------------------------------------------------------------
+
+      State at frame N is computed from N alone. d(t) is a lerp of the
+      eased tween progress, P is solved from d, and both are written by a
+      property setter on the tweened driver object. Nothing accumulates,
+      nothing reads a clock, and no frame depends on the frame before it.
+      (The setter matters: `tl.eventCallback("onUpdate", ...)` does NOT
+      fire on `tl.seek()`, so anything driven that way freezes on frame 0.)
+    -->
+    <div
+      id="dz-root"
+      data-composition-id="camera-dolly-zoom"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <style>
+        #dz-root {
+          width: 1920px;
+          height: 1080px;
+          position: relative;
+          overflow: hidden;
+          background: #0b1020;
+          font-family: Inter, sans-serif;
+        }
+
+        /* The camera. `perspective` is the focal length and is solved from
+           the dolly distance every frame -- see the script. */
+        #dz-stage {
+          position: absolute;
+          inset: 0;
+          perspective-origin: 50% 50%;
+        }
+
+        /* The rig root. Carries the camera's z offset so the subject plane
+           always sits exactly `d` in front of the camera. */
+        #dz-rig {
+          position: absolute;
+          inset: 0;
+          transform-style: preserve-3d;
+        }
+
+        /* --- authored depth layers ------------------------------------ */
+
+        .dz-arch {
+          position: absolute;
+          left: -140px;
+          top: -80px;
+          width: 2200px;
+          height: 1240px;
+          border: 16px solid #465280;
+          border-radius: 8px;
+          transform-style: preserve-3d;
+        }
+
+        #dz-backwall {
+          position: absolute;
+          left: -3040px;
+          top: -1710px;
+          width: 8000px;
+          height: 4500px;
+          background: #10162c;
+          transform-style: preserve-3d;
+        }
+
+        /* Bright doorway on the back wall -- the layer whose on-screen size
+           changes while the subject's does not. */
+        #dz-portal {
+          position: absolute;
+          left: 3300px;
+          top: 1850px;
+          width: 1400px;
+          height: 1500px;
+          background: #cfe4ff;
+        }
+
+        /* --- the subject: z = 0, the plane the solve holds ------------- */
+
+        #dz-subject {
+          position: absolute;
+          left: 840px;
+          top: 300px;
+          width: 240px;
+          height: 620px;
+          transform-style: preserve-3d;
+        }
+        .dz-fig-head {
+          width: 120px;
+          height: 120px;
+          margin: 0 auto;
+          border-radius: 50%;
+          background: #f2b134;
+        }
+        .dz-fig-body {
+          width: 240px;
+          height: 470px;
+          margin-top: 30px;
+          border-radius: 120px 120px 10px 10px;
+          background: #f2b134;
+        }
+
+        /* --- flat overlay (outside the 3D rig) ------------------------- */
+
+        .dz-label {
+          position: absolute;
+          left: 64px;
+          bottom: 56px;
+          padding: 14px 22px;
+          border-radius: 8px;
+          background: #0b1020;
+          color: #e9eeff;
+          font-size: 26px;
+          letter-spacing: 0.14em;
+          text-transform: uppercase;
+        }
+      </style>
+
+      <div id="dz-stage" class="clip" data-start="0" data-duration="4" data-track-index="0">
+        <div id="dz-rig">
+          <div id="dz-backwall" data-layout-allow-overflow style="transform: translateZ(-3200px)">
+            <div id="dz-portal"></div>
+          </div>
+
+          <div
+            class="dz-arch"
+            data-layout-allow-overflow
+            style="transform: translateZ(-2360px); border-color: #384166"
+          ></div>
+          <div
+            class="dz-arch"
+            data-layout-allow-overflow
+            style="transform: translateZ(-1720px); border-color: #465280"
+          ></div>
+          <div
+            class="dz-arch"
+            data-layout-allow-overflow
+            style="transform: translateZ(-1120px); border-color: #57669c"
+          ></div>
+          <div
+            class="dz-arch"
+            data-layout-allow-overflow
+            style="transform: translateZ(-560px); border-color: #6b7cb8"
+          ></div>
+          <div
+            class="dz-arch"
+            data-layout-allow-overflow
+            style="transform: translateZ(0px); border-color: #8194d4"
+          ></div>
+
+          <div id="dz-subject" style="transform: translateZ(0px)">
+            <div class="dz-fig-head"></div>
+            <div class="dz-fig-body"></div>
+          </div>
+        </div>
+      </div>
+
+      <div class="dz-label">Dolly zoom &middot; d &times; tan(fov/2) = const</div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      (function () {
+        var DEFAULTS = {
+          direction: "out",
+          strength: 2,
+          subjectDistance: 1400,
+          easing: "power2.inOut",
+        };
+        var declared =
+          window.__hyperframes && window.__hyperframes.getVariables
+            ? window.__hyperframes.getVariables()
+            : {};
+        var vars = Object.assign({}, DEFAULTS, declared);
+
+        function clamp(value, lo, hi, fallback) {
+          var n = Number(value);
+          if (!isFinite(n)) return fallback;
+          return Math.min(hi, Math.max(lo, n));
+        }
+        function oneOf(value, allowed, fallback) {
+          return allowed.indexOf(String(value)) >= 0 ? String(value) : fallback;
+        }
+
+        var direction = oneOf(vars.direction, ["in", "out"], DEFAULTS.direction);
+        var strength = clamp(vars.strength, 1.1, 4, DEFAULTS.strength);
+        var ease = oneOf(
+          vars.easing,
+          ["none", "sine.inOut", "power1.inOut", "power2.inOut", "power3.inOut"],
+          DEFAULTS.easing,
+        );
+
+        // d0 = camera-to-subject distance at the start of the move (px).
+        // d1 = distance at the end. "out" pulls the camera back and zooms in;
+        // "in" pushes the camera forward and zooms out.
+        var d0 = clamp(vars.subjectDistance, 600, 3000, DEFAULTS.subjectDistance);
+        var d1 = direction === "in" ? d0 / strength : d0 * strength;
+
+        // ---- the solve --------------------------------------------------
+        // Subject size is fixed iff  d * tan(FOV/2) = const. With CSS 3D,
+        // tan(FOV/2) = (width/2) / perspective, so that invariant is exactly
+        // perspective / distance = SUBJECT_SCALE. Focal length is therefore
+        // derived from the dolly, never animated alongside it.
+        var SUBJECT_SCALE = 1; // subject renders 1:1 => its plane is z = 0
+
+        var stage = document.getElementById("dz-stage");
+        var rig = document.getElementById("dz-rig");
+
+        function applyCamera(u) {
+          var d = d0 + (d1 - d0) * u; // dolly -- pure function of u
+          var P = SUBJECT_SCALE * d; // focal length solved from d
+          var camZ = P - d; // put the subject plane at camera distance d
+          stage.style.perspective = P + "px";
+          rig.style.transform = "translateZ(" + camZ + "px)";
+        }
+
+        // GSAP suppresses timeline-level onUpdate during seek(), so the camera
+        // is driven by a property setter on the tweened object instead: that
+        // fires on every render, seeks included.
+        var camera = {
+          _u: 0,
+          get u() {
+            return this._u;
+          },
+          set u(value) {
+            this._u = value;
+            applyCamera(value);
+          },
+        };
+
+        applyCamera(0);
+
+        var tl = gsap.timeline({ paused: true });
+        tl.to(camera, { u: 1, duration: 4, ease: ease }, 0);
+        window.__timelines["camera-dolly-zoom"] = tl;
+      })();
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "camera-dolly-zoom.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/blocks/chromatic-radial-split/chromatic-radial-split.html b/docs/public/catalog/blocks/chromatic-radial-split/chromatic-radial-split.html
new file mode 100644
index 0000000000..cdbd1c5d61
--- /dev/null
+++ b/docs/public/catalog/blocks/chromatic-radial-split/chromatic-radial-split.html
@@ -0,0 +1,366 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      @import url("https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Bebas+Neue&family=JetBrains+Mono:wght@400;700&family=Lato:wght@400;700&display=block");
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <style>
+        [data-composition-id="main"] {
+          width: 1920px;
+          height: 1080px;
+          overflow: hidden;
+          position: relative;
+          background: #22223b;
+        }
+
+        /* Blueprint grid */
+        .bp-grid {
+          position: absolute;
+          inset: 0;
+          background-image:
+            linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
+            linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
+          background-size: 40px 40px;
+          pointer-events: none;
+        }
+
+        /* Layout */
+        .bp-left {
+          position: absolute;
+          left: 0;
+          top: 0;
+          bottom: 0;
+          width: 1200px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .bp-right {
+          position: absolute;
+          right: 0;
+          top: 0;
+          bottom: 0;
+          width: 720px;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          padding: 60px 60px 60px 40px;
+        }
+        .bp-divider {
+          position: absolute;
+          left: 1200px;
+          top: 60px;
+          bottom: 60px;
+          width: 1px;
+          background: #7678ed;
+          opacity: 0.15;
+        }
+        .bp-number {
+          font-family: "Space Mono", monospace;
+          font-size: 14px;
+          font-weight: 700;
+          letter-spacing: 0.4em;
+          text-transform: uppercase;
+          position: absolute;
+          top: 40px;
+          left: 60px;
+          color: #7678ed;
+        }
+
+        /* Right panel typography */
+        .bp-name {
+          font-family: "Bebas Neue", sans-serif;
+          font-size: 38px;
+          letter-spacing: 0.08em;
+          margin-bottom: 20px;
+          color: #7678ed;
+        }
+        .bp-plabel {
+          font-family: "Space Mono", monospace;
+          font-size: 11px;
+          font-weight: 700;
+          letter-spacing: 0.3em;
+          text-transform: uppercase;
+          margin-bottom: 10px;
+          color: #7678ed;
+          opacity: 0.5;
+        }
+        .bp-prompt {
+          font-family: "JetBrains Mono", monospace;
+          font-size: 20px;
+          line-height: 1.6;
+          padding: 16px 20px;
+          border-radius: 6px;
+          margin-bottom: 20px;
+          color: #7678ed;
+          background: rgba(118, 120, 237, 0.06);
+          border: 1px solid rgba(118, 120, 237, 0.12);
+        }
+        .bp-desc {
+          font-family: "Lato", sans-serif;
+          font-size: 17px;
+          line-height: 1.6;
+          color: #9a8c98;
+          opacity: 0.55;
+        }
+
+        /* GL scenes (hidden, just for texture capture) */
+        .scene {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1200px;
+          height: 1080px;
+          overflow: hidden;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .scene-label {
+          font-family: "Bebas Neue", sans-serif;
+          font-size: 140px;
+          letter-spacing: 0.06em;
+          opacity: 0.12;
+        }
+      </style>
+
+      <div class="bp-grid"></div>
+      <div class="bp-divider"></div>
+      <div class="bp-number">08 / 14</div>
+
+      <!-- GL demo scenes (captured as textures, then hidden) -->
+      <div id="s1" class="scene" style="background: #22223b">
+        <div class="scene-label" style="color: #7678ed">SCENE A</div>
+      </div>
+      <div id="s2" class="scene" style="background: #7678ed; opacity: 0">
+        <div class="scene-label" style="color: #22223b">SCENE B</div>
+      </div>
+
+      <!-- GL canvas (left panel only) -->
+      <canvas
+        id="gl-canvas"
+        width="1200"
+        height="1080"
+        style="
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1200px;
+          height: 1080px;
+          z-index: 10;
+          pointer-events: none;
+          display: none;
+        "
+      >
+      </canvas>
+
+      <!-- Right panel metadata -->
+      <div class="bp-right">
+        <div class="bp-name">Chromatic Radial Split</div>
+        <div class="bp-plabel">Prompt</div>
+        <div class="bp-prompt">"use chromatic radial split shader transition"</div>
+        <div class="bp-desc">
+          RGB channels separate and converge radially. From-scene splits outward, to-scene converges
+          inward.
+        </div>
+      </div>
+
+      <div
+        id="driver"
+        class="clip"
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+      var glCanvas = document.getElementById("gl-canvas");
+      var gl = glCanvas.getContext("webgl", { preserveDrawingBuffer: true });
+      if (!gl) {
+        console.warn("WebGL not available");
+        window.__timelines["main"] = gsap.timeline({ paused: true });
+      } else {
+        gl.viewport(0, 0, 1200, 1080);
+        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
+        var sceneTextures = {};
+
+        function captureScene(sceneId) {
+          var scene = document.getElementById(sceneId);
+          var origOpacity = scene.style.opacity;
+          var origZ = scene.style.zIndex;
+          scene.style.opacity = "1";
+          scene.style.zIndex = "999";
+          scene.offsetHeight;
+          var c = document.createElement("canvas");
+          c.width = 1200;
+          c.height = 1080;
+          var ctx = c.getContext("2d");
+          ctx.fillStyle = window.getComputedStyle(scene).backgroundColor;
+          ctx.fillRect(0, 0, 1200, 1080);
+          var sr = scene.getBoundingClientRect();
+          var els = scene.querySelectorAll("*");
+          for (var i = 0; i < els.length; i++) {
+            var el = els[i],
+              cs = window.getComputedStyle(el);
+            if (cs.display === "none" || cs.visibility === "hidden") continue;
+            var r = el.getBoundingClientRect();
+            if (r.width < 1 || r.height < 1) continue;
+            var x = r.left - sr.left,
+              y = r.top - sr.top,
+              w = r.width,
+              h = r.height;
+            ctx.save();
+            ctx.globalAlpha = parseFloat(cs.opacity) || 1;
+            var bg = cs.backgroundColor;
+            if (bg && bg !== "rgba(0, 0, 0, 0)" && bg !== "transparent") {
+              ctx.fillStyle = bg;
+              ctx.fillRect(x, y, w, h);
+            }
+            var hasChildEls = el.querySelector("div,span,img,video");
+            var text = "";
+            for (var j = 0; j < el.childNodes.length; j++)
+              if (el.childNodes[j].nodeType === 3) text += el.childNodes[j].textContent;
+            text = text.trim();
+            if (text && !hasChildEls) {
+              ctx.font = cs.fontWeight + " " + cs.fontSize + " " + cs.fontFamily;
+              ctx.fillStyle = cs.color;
+              if (cs.letterSpacing && cs.letterSpacing !== "normal")
+                ctx.letterSpacing = cs.letterSpacing;
+              ctx.textAlign = "center";
+              ctx.textBaseline = "middle";
+              ctx.fillText(text, x + w / 2, y + h / 2);
+            }
+            ctx.restore();
+          }
+          scene.style.opacity = origOpacity;
+          scene.style.zIndex = origZ;
+          var tex = gl.createTexture();
+          gl.bindTexture(gl.TEXTURE_2D, tex);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+          gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, c);
+          sceneTextures[sceneId] = tex;
+        }
+
+        var vertSrc =
+          "attribute vec2 a_pos; varying vec2 v_uv; void main(){" +
+          "v_uv=a_pos*0.5+0.5; v_uv.y=1.0-v_uv.y; gl_Position=vec4(a_pos,0,1);}";
+        var quadBuf = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);
+        gl.bufferData(
+          gl.ARRAY_BUFFER,
+          new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),
+          gl.STATIC_DRAW,
+        );
+        function compileShader(src, type) {
+          var s = gl.createShader(type);
+          gl.shaderSource(s, src);
+          gl.compileShader(s);
+          if (!gl.getShaderParameter(s, gl.COMPILE_STATUS))
+            console.error("Shader:", gl.getShaderInfoLog(s));
+          return s;
+        }
+        function mkProg(fragSrc) {
+          var p = gl.createProgram();
+          gl.attachShader(p, compileShader(vertSrc, gl.VERTEX_SHADER));
+          gl.attachShader(p, compileShader(fragSrc, gl.FRAGMENT_SHADER));
+          gl.linkProgram(p);
+          if (!gl.getProgramParameter(p, gl.LINK_STATUS))
+            console.error("Link:", gl.getProgramInfoLog(p));
+          return p;
+        }
+
+        var H =
+          "precision mediump float;" +
+          "varying vec2 v_uv;" +
+          "uniform sampler2D u_from, u_to;" +
+          "uniform float u_progress;" +
+          "uniform vec2 u_resolution;\n";
+
+        var progPass = mkProg(H + "void main(){gl_FragColor=texture2D(u_from,v_uv);}");
+        var progTrans = mkProg(
+          H +
+            "void main(){vec2 c=v_uv-.5;float fromShift=u_progress*.06;float fr=texture2D(u_from,clamp(v_uv+c*fromShift,0.,1.)).r;float fg=texture2D(u_from,v_uv).g;float fb=texture2D(u_from,clamp(v_uv-c*fromShift,0.,1.)).b;vec3 fromSplit=vec3(fr,fg,fb);float toShift=(1.-u_progress)*.06;float tr=texture2D(u_to,clamp(v_uv-c*toShift,0.,1.)).r;float tg=texture2D(u_to,v_uv).g;float tb=texture2D(u_to,clamp(v_uv+c*toShift,0.,1.)).b;vec3 toSplit=vec3(tr,tg,tb);gl_FragColor=vec4(mix(fromSplit,toSplit,u_progress),1.);}",
+        );
+
+        function renderShader(prog, texFrom, texTo, progress) {
+          gl.useProgram(prog);
+          gl.activeTexture(gl.TEXTURE0);
+          gl.bindTexture(gl.TEXTURE_2D, texFrom);
+          gl.uniform1i(gl.getUniformLocation(prog, "u_from"), 0);
+          gl.activeTexture(gl.TEXTURE1);
+          gl.bindTexture(gl.TEXTURE_2D, texTo);
+          gl.uniform1i(gl.getUniformLocation(prog, "u_to"), 1);
+          gl.uniform1f(gl.getUniformLocation(prog, "u_progress"), progress);
+          gl.uniform2f(gl.getUniformLocation(prog, "u_resolution"), 1200, 1080);
+          var pos = gl.getAttribLocation(prog, "a_pos");
+          gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);
+          gl.enableVertexAttribArray(pos);
+          gl.vertexAttribPointer(pos, 2, gl.FLOAT, false, 0, 0);
+          gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+        }
+
+        function easeInOut(p) {
+          return p < 0.5 ? 2 * p * p : 1 - Math.pow(-2 * p + 2, 2) / 2;
+        }
+
+        captureScene("s1");
+        captureScene("s2");
+        glCanvas.style.display = "block";
+        renderShader(progPass, sceneTextures["s1"], sceneTextures["s1"], 0);
+        document.querySelectorAll(".scene").forEach(function (s) {
+          s.style.opacity = "0";
+        });
+
+        var tl = gsap.timeline({
+          paused: true,
+          onUpdate: function () {
+            var t = tl.time();
+            if (t >= 1.0 && t < 3.0) {
+              renderShader(
+                progTrans,
+                sceneTextures["s1"],
+                sceneTextures["s2"],
+                easeInOut((t - 1.0) / 2.0),
+              );
+            } else if (t >= 3.0) {
+              renderShader(progPass, sceneTextures["s2"], sceneTextures["s2"], 0);
+            } else {
+              renderShader(progPass, sceneTextures["s1"], sceneTextures["s1"], 0);
+            }
+          },
+        });
+        tl.to({ v: 0 }, { v: 1, duration: 4, ease: "none" }, 0);
+        window.__timelines["main"] = tl;
+      } // end if (gl)
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/cinematic-zoom/cinematic-zoom.html b/docs/public/catalog/blocks/cinematic-zoom/cinematic-zoom.html
new file mode 100644
index 0000000000..6354373481
--- /dev/null
+++ b/docs/public/catalog/blocks/cinematic-zoom/cinematic-zoom.html
@@ -0,0 +1,366 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      @import url("https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Bebas+Neue&family=JetBrains+Mono:wght@400;700&family=Lato:wght@400;700&display=block");
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <style>
+        [data-composition-id="main"] {
+          width: 1920px;
+          height: 1080px;
+          overflow: hidden;
+          position: relative;
+          background: #3d348b;
+        }
+
+        /* Blueprint grid */
+        .bp-grid {
+          position: absolute;
+          inset: 0;
+          background-image:
+            linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
+            linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
+          background-size: 40px 40px;
+          pointer-events: none;
+        }
+
+        /* Layout */
+        .bp-left {
+          position: absolute;
+          left: 0;
+          top: 0;
+          bottom: 0;
+          width: 1200px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .bp-right {
+          position: absolute;
+          right: 0;
+          top: 0;
+          bottom: 0;
+          width: 720px;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          padding: 60px 60px 60px 40px;
+        }
+        .bp-divider {
+          position: absolute;
+          left: 1200px;
+          top: 60px;
+          bottom: 60px;
+          width: 1px;
+          background: #f7b801;
+          opacity: 0.15;
+        }
+        .bp-number {
+          font-family: "Space Mono", monospace;
+          font-size: 14px;
+          font-weight: 700;
+          letter-spacing: 0.4em;
+          text-transform: uppercase;
+          position: absolute;
+          top: 40px;
+          left: 60px;
+          color: #f7b801;
+        }
+
+        /* Right panel typography */
+        .bp-name {
+          font-family: "Bebas Neue", sans-serif;
+          font-size: 38px;
+          letter-spacing: 0.08em;
+          margin-bottom: 20px;
+          color: #f7b801;
+        }
+        .bp-plabel {
+          font-family: "Space Mono", monospace;
+          font-size: 11px;
+          font-weight: 700;
+          letter-spacing: 0.3em;
+          text-transform: uppercase;
+          margin-bottom: 10px;
+          color: #f7b801;
+          opacity: 0.5;
+        }
+        .bp-prompt {
+          font-family: "JetBrains Mono", monospace;
+          font-size: 20px;
+          line-height: 1.6;
+          padding: 16px 20px;
+          border-radius: 6px;
+          margin-bottom: 20px;
+          color: #f7b801;
+          background: rgba(247, 184, 1, 0.06);
+          border: 1px solid rgba(247, 184, 1, 0.12);
+        }
+        .bp-desc {
+          font-family: "Lato", sans-serif;
+          font-size: 17px;
+          line-height: 1.6;
+          color: #a0a0c0;
+          opacity: 0.55;
+        }
+
+        /* GL scenes (hidden, just for texture capture) */
+        .scene {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1200px;
+          height: 1080px;
+          overflow: hidden;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .scene-label {
+          font-family: "Bebas Neue", sans-serif;
+          font-size: 140px;
+          letter-spacing: 0.06em;
+          opacity: 0.12;
+        }
+      </style>
+
+      <div class="bp-grid"></div>
+      <div class="bp-divider"></div>
+      <div class="bp-number">07 / 14</div>
+
+      <!-- GL demo scenes (captured as textures, then hidden) -->
+      <div id="s1" class="scene" style="background: #3d348b">
+        <div class="scene-label" style="color: #f7b801">SCENE A</div>
+      </div>
+      <div id="s2" class="scene" style="background: #f7b801; opacity: 0">
+        <div class="scene-label" style="color: #3d348b">SCENE B</div>
+      </div>
+
+      <!-- GL canvas (left panel only) -->
+      <canvas
+        id="gl-canvas"
+        width="1200"
+        height="1080"
+        style="
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1200px;
+          height: 1080px;
+          z-index: 10;
+          pointer-events: none;
+          display: none;
+        "
+      >
+      </canvas>
+
+      <!-- Right panel metadata -->
+      <div class="bp-right">
+        <div class="bp-name">Cinematic Zoom</div>
+        <div class="bp-plabel">Prompt</div>
+        <div class="bp-prompt">"use cinematic zoom shader transition"</div>
+        <div class="bp-desc">
+          Both scenes zoom-blur with per-channel radial offset. From zooms outward, to zooms inward
+          from tight.
+        </div>
+      </div>
+
+      <div
+        id="driver"
+        class="clip"
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+      var glCanvas = document.getElementById("gl-canvas");
+      var gl = glCanvas.getContext("webgl", { preserveDrawingBuffer: true });
+      if (!gl) {
+        console.warn("WebGL not available");
+        window.__timelines["main"] = gsap.timeline({ paused: true });
+      } else {
+        gl.viewport(0, 0, 1200, 1080);
+        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
+        var sceneTextures = {};
+
+        function captureScene(sceneId) {
+          var scene = document.getElementById(sceneId);
+          var origOpacity = scene.style.opacity;
+          var origZ = scene.style.zIndex;
+          scene.style.opacity = "1";
+          scene.style.zIndex = "999";
+          scene.offsetHeight;
+          var c = document.createElement("canvas");
+          c.width = 1200;
+          c.height = 1080;
+          var ctx = c.getContext("2d");
+          ctx.fillStyle = window.getComputedStyle(scene).backgroundColor;
+          ctx.fillRect(0, 0, 1200, 1080);
+          var sr = scene.getBoundingClientRect();
+          var els = scene.querySelectorAll("*");
+          for (var i = 0; i < els.length; i++) {
+            var el = els[i],
+              cs = window.getComputedStyle(el);
+            if (cs.display === "none" || cs.visibility === "hidden") continue;
+            var r = el.getBoundingClientRect();
+            if (r.width < 1 || r.height < 1) continue;
+            var x = r.left - sr.left,
+              y = r.top - sr.top,
+              w = r.width,
+              h = r.height;
+            ctx.save();
+            ctx.globalAlpha = parseFloat(cs.opacity) || 1;
+            var bg = cs.backgroundColor;
+            if (bg && bg !== "rgba(0, 0, 0, 0)" && bg !== "transparent") {
+              ctx.fillStyle = bg;
+              ctx.fillRect(x, y, w, h);
+            }
+            var hasChildEls = el.querySelector("div,span,img,video");
+            var text = "";
+            for (var j = 0; j < el.childNodes.length; j++)
+              if (el.childNodes[j].nodeType === 3) text += el.childNodes[j].textContent;
+            text = text.trim();
+            if (text && !hasChildEls) {
+              ctx.font = cs.fontWeight + " " + cs.fontSize + " " + cs.fontFamily;
+              ctx.fillStyle = cs.color;
+              if (cs.letterSpacing && cs.letterSpacing !== "normal")
+                ctx.letterSpacing = cs.letterSpacing;
+              ctx.textAlign = "center";
+              ctx.textBaseline = "middle";
+              ctx.fillText(text, x + w / 2, y + h / 2);
+            }
+            ctx.restore();
+          }
+          scene.style.opacity = origOpacity;
+          scene.style.zIndex = origZ;
+          var tex = gl.createTexture();
+          gl.bindTexture(gl.TEXTURE_2D, tex);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+          gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, c);
+          sceneTextures[sceneId] = tex;
+        }
+
+        var vertSrc =
+          "attribute vec2 a_pos; varying vec2 v_uv; void main(){" +
+          "v_uv=a_pos*0.5+0.5; v_uv.y=1.0-v_uv.y; gl_Position=vec4(a_pos,0,1);}";
+        var quadBuf = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);
+        gl.bufferData(
+          gl.ARRAY_BUFFER,
+          new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),
+          gl.STATIC_DRAW,
+        );
+        function compileShader(src, type) {
+          var s = gl.createShader(type);
+          gl.shaderSource(s, src);
+          gl.compileShader(s);
+          if (!gl.getShaderParameter(s, gl.COMPILE_STATUS))
+            console.error("Shader:", gl.getShaderInfoLog(s));
+          return s;
+        }
+        function mkProg(fragSrc) {
+          var p = gl.createProgram();
+          gl.attachShader(p, compileShader(vertSrc, gl.VERTEX_SHADER));
+          gl.attachShader(p, compileShader(fragSrc, gl.FRAGMENT_SHADER));
+          gl.linkProgram(p);
+          if (!gl.getProgramParameter(p, gl.LINK_STATUS))
+            console.error("Link:", gl.getProgramInfoLog(p));
+          return p;
+        }
+
+        var H =
+          "precision mediump float;" +
+          "varying vec2 v_uv;" +
+          "uniform sampler2D u_from, u_to;" +
+          "uniform float u_progress;" +
+          "uniform vec2 u_resolution;\n";
+
+        var progPass = mkProg(H + "void main(){gl_FragColor=texture2D(u_from,v_uv);}");
+        var progTrans = mkProg(
+          H +
+            "void main(){vec2 d=v_uv-vec2(.5);float fromS=u_progress*.08;float toS=(1.-u_progress)*.06;float fr=0.,fg=0.,fb=0.;for(int i=0;i<12;i++){float f=float(i)/12.;fr+=texture2D(u_from,v_uv-d*(fromS*1.06)*f).r;fg+=texture2D(u_from,v_uv-d*fromS*f).g;fb+=texture2D(u_from,v_uv-d*(fromS*.94)*f).b;}vec3 fromBl=vec3(fr,fg,fb)/12.;float tr=0.,tg=0.,tb=0.;for(int i=0;i<12;i++){float f=float(i)/12.;tr+=texture2D(u_to,v_uv+d*(toS*1.06)*f).r;tg+=texture2D(u_to,v_uv+d*toS*f).g;tb+=texture2D(u_to,v_uv+d*(toS*.94)*f).b;}vec3 toBl=vec3(tr,tg,tb)/12.;gl_FragColor=vec4(mix(fromBl,toBl,u_progress),1.);}",
+        );
+
+        function renderShader(prog, texFrom, texTo, progress) {
+          gl.useProgram(prog);
+          gl.activeTexture(gl.TEXTURE0);
+          gl.bindTexture(gl.TEXTURE_2D, texFrom);
+          gl.uniform1i(gl.getUniformLocation(prog, "u_from"), 0);
+          gl.activeTexture(gl.TEXTURE1);
+          gl.bindTexture(gl.TEXTURE_2D, texTo);
+          gl.uniform1i(gl.getUniformLocation(prog, "u_to"), 1);
+          gl.uniform1f(gl.getUniformLocation(prog, "u_progress"), progress);
+          gl.uniform2f(gl.getUniformLocation(prog, "u_resolution"), 1200, 1080);
+          var pos = gl.getAttribLocation(prog, "a_pos");
+          gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);
+          gl.enableVertexAttribArray(pos);
+          gl.vertexAttribPointer(pos, 2, gl.FLOAT, false, 0, 0);
+          gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+        }
+
+        function easeInOut(p) {
+          return p < 0.5 ? 2 * p * p : 1 - Math.pow(-2 * p + 2, 2) / 2;
+        }
+
+        captureScene("s1");
+        captureScene("s2");
+        glCanvas.style.display = "block";
+        renderShader(progPass, sceneTextures["s1"], sceneTextures["s1"], 0);
+        document.querySelectorAll(".scene").forEach(function (s) {
+          s.style.opacity = "0";
+        });
+
+        var tl = gsap.timeline({
+          paused: true,
+          onUpdate: function () {
+            var t = tl.time();
+            if (t >= 1.0 && t < 3.0) {
+              renderShader(
+                progTrans,
+                sceneTextures["s1"],
+                sceneTextures["s2"],
+                easeInOut((t - 1.0) / 2.0),
+              );
+            } else if (t >= 3.0) {
+              renderShader(progPass, sceneTextures["s2"], sceneTextures["s2"], 0);
+            } else {
+              renderShader(progPass, sceneTextures["s1"], sceneTextures["s1"], 0);
+            }
+          },
+        });
+        tl.to({ v: 0 }, { v: 1, duration: 4, ease: "none" }, 0);
+        window.__timelines["main"] = tl;
+      } // end if (gl)
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/code-3d-extrude/code-3d-extrude.html b/docs/public/catalog/blocks/code-3d-extrude/code-3d-extrude.html
new file mode 100644
index 0000000000..db6ba28ce4
--- /dev/null
+++ b/docs/public/catalog/blocks/code-3d-extrude/code-3d-extrude.html
@@ -0,0 +1,613 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Code 3D Extrude</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #05070b;
+      }
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+      }
+      #gl {
+        position: absolute;
+        inset: 0;
+        width: 1920px;
+        height: 1080px;
+        display: block;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="code-3d-extrude"
+      data-start="0"
+      data-duration="8"
+      data-width="1920"
+      data-height="1080"
+    >
+      <canvas id="gl" width="1920" height="1080"></canvas>
+    </div>
+    <script>
+      window.__TOKENS = {
+        feature: {
+          lang: "js",
+          theme: "github-dark",
+          bg: "#24292e",
+          fg: "#e1e4e8",
+          states: [
+            {
+              code: 'async function loadConfig(path) {\n  const raw = await readFile(path, "utf8")\n  const config = JSON.parse(raw)\n  return validate(config)\n}',
+              tokens: [
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-0",
+                  content: "async",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-1",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-2",
+                  content: "function",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-3",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-4",
+                  content: "loadConfig",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-5",
+                  content: "(",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-6",
+                  content: "path",
+                  color: "#FFAB70",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-7",
+                  content: ") {",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-8",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-9",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-10",
+                  content: "const",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-11",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-12",
+                  content: "raw",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-13",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-14",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-15",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-16",
+                  content: "await",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-17",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-18",
+                  content: "readFile",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-19",
+                  content: "(path,",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-20",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-21",
+                  content: '"utf8"',
+                  color: "#9ECBFF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-22",
+                  content: ")",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-23",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-24",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-25",
+                  content: "const",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-26",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-27",
+                  content: "config",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-28",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-29",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-30",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-31",
+                  content: "JSON",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-32",
+                  content: ".",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-33",
+                  content: "parse",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-34",
+                  content: "(raw)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-35",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-36",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-37",
+                  content: "return",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-38",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-39",
+                  content: "validate",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-40",
+                  content: "(config)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-41",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-42",
+                  content: "}",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-43",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+              ],
+            },
+          ],
+        },
+      };
+      window.__BLOCK = {
+        id: "code-3d-extrude",
+        effect: "extrude",
+        seq: "feature",
+        duration: 8,
+        seed: 7,
+      };
+    </script>
+    <script>
+      // hf-code-anim-gl.js — WebGL code-animation engine for the "crazy" Code Animations blocks.
+      //
+      // Bridges the baked Shiki tokens (window.__TOKENS) into Three.js: the tokens are drawn once
+      // to an offscreen 2D canvas (a CanvasTexture), which then drives a lit 3D slab, a dissolve
+      // shader, or a GPU particle system. Determinism per the project contract:
+      //   - render only via tl.eventCallback("onUpdate", …) + one initial render() — never rAF
+      //   - all randomness from a seeded mulberry32 — never Math.random / Date.now
+      //   - canvas drawn once after document.fonts.ready (final glyph metrics)
+      //   - paused GSAP timeline registered on window.__timelines[id]; HF seeks it per frame
+      //
+      // Each block sets window.__BLOCK = { id, effect, seq, duration, seed } and includes this engine.
+      (function () {
+        "use strict";
+        var T = window.__TOKENS || {};
+
+        // ---- seeded PRNG (no Math.random) -----------------------------------------
+        function mulberry32(a) {
+          return function () {
+            a |= 0;
+            a = (a + 0x6d2b79f5) | 0;
+            var t = Math.imul(a ^ (a >>> 15), 1 | a);
+            t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+            return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+          };
+        }
+
+        // ---- split a token state into lines of {content,color} --------------------
+        function splitLines(state) {
+          var lines = [[]];
+          for (var i = 0; i < state.tokens.length; i++) {
+            var t = state.tokens[i];
+            if (t.content === "\n") {
+              lines.push([]);
+              continue;
+            }
+            lines[lines.length - 1].push(t);
+          }
+          while (lines.length && lines[lines.length - 1].length === 0) lines.pop();
+          return lines;
+        }
+
+        // ---- THE BRIDGE: draw baked tokens to an offscreen 2D canvas ---------------
+        // Returns { canvas, W, H, lines, lineH, padY, fontPx } so effects can sample it.
+        function drawCodeToCanvas(state, opts) {
+          opts = opts || {};
+          var fontPx = opts.fontPx || 36;
+          var lineH = opts.lineH || 54;
+          var padX = opts.padX || 70;
+          var padY = opts.padY || 60;
+          var weight = opts.weight || 500;
+          var font = weight + " " + fontPx + 'px "JetBrains Mono", monospace';
+
+          var lines = splitLines(state);
+          var measure = document.createElement("canvas").getContext("2d");
+          measure.font = font;
+          var maxW = 0;
+          for (var i = 0; i < lines.length; i++) {
+            var w = 0;
+            for (var j = 0; j < lines[i].length; j++)
+              w += measure.measureText(lines[i][j].content).width;
+            if (w > maxW) maxW = w;
+          }
+          var W = Math.max(2, Math.ceil(maxW + padX * 2));
+          var H = Math.max(2, Math.ceil(lines.length * lineH + padY * 2));
+
+          var canvas = document.createElement("canvas");
+          canvas.width = W;
+          canvas.height = H;
+          var ctx = canvas.getContext("2d");
+          if (opts.transparent) {
+            ctx.clearRect(0, 0, W, H);
+          } else {
+            ctx.fillStyle = opts.bg || "#0b0f17";
+            ctx.fillRect(0, 0, W, H);
+          }
+          ctx.textBaseline = "top";
+          ctx.font = font;
+          for (var li = 0; li < lines.length; li++) {
+            var x = padX;
+            var y = padY + li * lineH;
+            for (var k = 0; k < lines[li].length; k++) {
+              var tok = lines[li][k];
+              ctx.fillStyle = tok.color;
+              ctx.fillText(tok.content, x, y);
+              x += ctx.measureText(tok.content).width;
+            }
+          }
+          return {
+            canvas: canvas,
+            W: W,
+            H: H,
+            lines: lines.length,
+            lineH: lineH,
+            padY: padY,
+            fontPx: fontPx,
+          };
+        }
+
+        function fxExtrude(THREE, scene, camera, renderer, state, st, tl, dur) {
+          scene.background = new THREE.Color(0x05070b);
+          var code = drawCodeToCanvas(state, {
+            fontPx: 38,
+            lineH: 56,
+            padX: 80,
+            padY: 70,
+            weight: 600,
+          });
+          var tex = new THREE.CanvasTexture(code.canvas);
+          tex.minFilter = THREE.LinearFilter;
+          tex.magFilter = THREE.LinearFilter;
+          tex.generateMipmaps = false;
+
+          var aspect = code.W / code.H;
+          var slabH = 6.2;
+          var slabW = slabH * aspect;
+          var depth = 0.5;
+
+          // beveled slab: rounded extruded rectangle
+          var hw = slabW / 2;
+          var hh = slabH / 2;
+          var r = 0.18;
+          var shape = new THREE.Shape();
+          shape.moveTo(-hw + r, -hh);
+          shape.lineTo(hw - r, -hh);
+          shape.quadraticCurveTo(hw, -hh, hw, -hh + r);
+          shape.lineTo(hw, hh - r);
+          shape.quadraticCurveTo(hw, hh, hw - r, hh);
+          shape.lineTo(-hw + r, hh);
+          shape.quadraticCurveTo(-hw, hh, -hw, hh - r);
+          shape.lineTo(-hw, -hh + r);
+          shape.quadraticCurveTo(-hw, -hh, -hw + r, -hh);
+          var geo = new THREE.ExtrudeGeometry(shape, {
+            depth: depth,
+            bevelEnabled: true,
+            bevelThickness: 0.12,
+            bevelSize: 0.1,
+            bevelSegments: 3,
+            steps: 1,
+          });
+          geo.center();
+          // UVs from ExtrudeGeometry don't map the texture nicely to the face; remap front-face UVs from XY bounds.
+          geo.computeBoundingBox();
+          var bb = geo.boundingBox;
+          var sizeX = bb.max.x - bb.min.x;
+          var sizeY = bb.max.y - bb.min.y;
+          var pos = geo.attributes.position;
+          var uv = geo.attributes.uv;
+          for (var vi = 0; vi < pos.count; vi++) {
+            uv.setXY(vi, (pos.getX(vi) - bb.min.x) / sizeX, (pos.getY(vi) - bb.min.y) / sizeY);
+          }
+          uv.needsUpdate = true;
+
+          // Face is an unlit "screen" — shows the exact vivid Shiki colors (no PBR/emissive wash).
+          // The 3D read comes from the lit, beveled EDGES + perspective, like a glowing monitor.
+          var faceMat = new THREE.MeshBasicMaterial({ map: tex });
+          var edgeMat = new THREE.MeshStandardMaterial({
+            color: 0x141d2b,
+            roughness: 0.3,
+            metalness: 0.4,
+          });
+          // ExtrudeGeometry groups: 0 = front+back faces, 1 = sides. Front shows the code.
+          var slab = new THREE.Mesh(geo, [faceMat, edgeMat]);
+          scene.add(slab);
+
+          scene.add(new THREE.AmbientLight(0xffffff, 0.5));
+          var key = new THREE.DirectionalLight(0xbcd4ff, 1.25);
+          key.position.set(5, 7, 9);
+          scene.add(key);
+          var rim = new THREE.DirectionalLight(0x4fffa0, 0.45);
+          rim.position.set(-7, -3, 5);
+          scene.add(rim);
+
+          camera.position.set(0, 0, 10);
+
+          // fit camera distance so the WHOLE slab fits (width-limited for wide code), ~78% fill
+          var vfov = (camera.fov * Math.PI) / 180;
+          var screenAspect = 1920 / 1080;
+          var fitH = slabH / 2 / Math.tan(vfov / 2) / 0.78;
+          var fitW = slabW / 2 / (Math.tan(vfov / 2) * screenAspect) / 0.78;
+          var fitZ = Math.max(fitH, fitW);
+
+          st.rotY = -1.0;
+          st.rotX = 0.4;
+          st.camZ = fitZ + 6;
+          tl.to(st, { rotY: 0, rotX: 0, camZ: fitZ, duration: dur * 0.6, ease: "power3.out" }, 0);
+          // gentle breathing drift at rest (subtle — stays readable)
+          tl.to(
+            st,
+            { rotY: 0.06, rotX: -0.02, duration: dur * 0.4, ease: "sine.inOut" },
+            dur * 0.6,
+          );
+
+          return function () {
+            slab.rotation.y = st.rotY;
+            slab.rotation.x = st.rotX;
+            camera.position.z = st.camZ;
+            camera.lookAt(0, 0, 0);
+            // boot loop's render() issues the single renderer.render() — don't double-render here
+          };
+        }
+
+        // ---- dispatch + boot ------------------------------------------------------
+        function buildEffect(THREE, scene, camera, renderer, spec, st, tl) {
+          var state = T[spec.seq].states[0];
+          var dur = spec.duration;
+          if (spec.effect === "extrude")
+            return fxExtrude(THREE, scene, camera, renderer, state, st, tl, dur);
+          return function () {};
+        }
+
+        // Free GPU resources (renderer, geometries, materials, textures) on page teardown.
+        // One-shot renders exit per job so nothing leaks there; this guards long-lived
+        // Studio/player sessions that reload. Fires only on unload — never during capture.
+        function disposeGL(renderer, scene) {
+          scene.traverse(function (o) {
+            if (o.geometry && o.geometry.dispose) o.geometry.dispose();
+            var mats = o.material ? (Array.isArray(o.material) ? o.material : [o.material]) : [];
+            mats.forEach(function (m) {
+              if (m.map && m.map.dispose) m.map.dispose();
+              if (
+                m.uniforms &&
+                m.uniforms.uTex &&
+                m.uniforms.uTex.value &&
+                m.uniforms.uTex.value.dispose
+              ) {
+                m.uniforms.uTex.value.dispose();
+              }
+              if (m.dispose) m.dispose();
+            });
+          });
+          if (renderer.dispose) renderer.dispose();
+        }
+
+        function go() {
+          var spec = window.__BLOCK;
+          var root = document.getElementById("root");
+          var glcanvas = document.getElementById("gl");
+          var W = 1920;
+          var H = 1080;
+          window.__timelines = window.__timelines || {};
+          var tl = gsap.timeline({ paused: true });
+          window.__timelines[spec.id] = tl; // register synchronously
+
+          var THREE = window.THREE;
+          var renderer = new THREE.WebGLRenderer({
+            canvas: glcanvas,
+            antialias: true,
+            alpha: false,
+            preserveDrawingBuffer: true,
+          });
+          renderer.setPixelRatio(1);
+          renderer.setSize(W, H, false);
+          var scene = new THREE.Scene();
+          var camera = new THREE.PerspectiveCamera(45, W / H, 0.1, 200);
+          var st = {};
+
+          document.fonts.ready.then(function () {
+            var renderFn = buildEffect(THREE, scene, camera, renderer, spec, st, tl);
+            function render() {
+              renderFn();
+              renderer.render(scene, camera);
+            }
+            tl.eventCallback("onUpdate", render);
+            var dur = parseFloat(root.dataset.duration) || tl.duration();
+            tl.to({}, { duration: dur }, 0); // pad to full composition length
+            render(); // paint frame 0
+            window.addEventListener("beforeunload", function () {
+              disposeGL(renderer, scene);
+            });
+          });
+        }
+
+        if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", go);
+        else go();
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/code-diff/code-diff.html b/docs/public/catalog/blocks/code-diff/code-diff.html
new file mode 100644
index 0000000000..03c5a940c3
--- /dev/null
+++ b/docs/public/catalog/blocks/code-diff/code-diff.html
@@ -0,0 +1,816 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Code Diff</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #05070b;
+      }
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        font-family: "JetBrains Mono", monospace;
+        color: #e6edf3;
+      }
+      .bg-field {
+        position: absolute;
+        inset: 0;
+        background: radial-gradient(1200px 700px at 50% 18%, #0e1726 0%, #070b12 55%, #05070b 100%);
+      }
+      .bg-grid {
+        position: absolute;
+        inset: 0;
+        background-image:
+          linear-gradient(rgba(88, 166, 255, 0.05) 1px, transparent 1px),
+          linear-gradient(90deg, rgba(88, 166, 255, 0.05) 1px, transparent 1px);
+        background-size: 64px 64px;
+        mask-image: radial-gradient(1100px 620px at 50% 42%, #000 0%, transparent 78%);
+      }
+      .bg-glow {
+        position: absolute;
+        width: 900px;
+        height: 900px;
+        border-radius: 50%;
+        filter: blur(120px);
+        opacity: 0.5;
+      }
+      .bg-glow.a {
+        background: #1f6feb55;
+        left: -180px;
+        top: -200px;
+      }
+      .bg-glow.b {
+        background: #2ea04355;
+        right: -200px;
+        bottom: -260px;
+      }
+      .editor {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        width: 1380px;
+        height: 800px;
+        background: #0b0f17;
+        border: 1px solid #1d2733;
+        border-radius: 16px;
+        box-shadow:
+          0 40px 120px rgba(0, 0, 0, 0.6),
+          0 2px 0 rgba(255, 255, 255, 0.03) inset;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+      }
+      .titlebar {
+        height: 56px;
+        flex: 0 0 56px;
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        padding: 0 22px;
+        background: linear-gradient(#11161f, #0c111a);
+        border-bottom: 1px solid #1b2430;
+      }
+      .dots {
+        display: flex;
+        gap: 10px;
+      }
+      .dot {
+        width: 14px;
+        height: 14px;
+        border-radius: 50%;
+      }
+      .dot.r {
+        background: #ff5f57;
+      }
+      .dot.y {
+        background: #febc2e;
+      }
+      .dot.g {
+        background: #28c840;
+      }
+      .filename {
+        font-size: 19px;
+        color: #8b98a9;
+        letter-spacing: 0.2px;
+      }
+      .filename .accent {
+        color: #d6e2f0;
+      }
+      .code-surface {
+        position: relative;
+        flex: 1 1 auto;
+        overflow: hidden;
+      }
+      .scene {
+        position: absolute;
+        inset: 0;
+        opacity: 0;
+        will-change: opacity;
+      }
+      .code {
+        position: absolute;
+        top: 38px;
+        left: 0;
+        right: 0;
+        padding: 0 44px 0 104px;
+        font-size: 30px;
+        line-height: 46px;
+        font-variant-ligatures: none;
+        tab-size: 2;
+      }
+      .gutter {
+        position: absolute;
+        top: 38px;
+        left: 0;
+        width: 84px;
+        padding-right: 18px;
+        font-size: 30px;
+        line-height: 46px;
+        text-align: right;
+        color: #828c9b;
+        user-select: none;
+      }
+      .ln {
+        display: block;
+        height: 46px;
+      }
+      .line {
+        display: block;
+        min-height: 46px;
+        white-space: pre;
+        position: relative;
+        z-index: 1;
+      }
+      .tok {
+        display: inline-block;
+        white-space: pre;
+        will-change: transform, opacity;
+      }
+      .caret {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 3px;
+        height: 32px;
+        margin-top: 6px;
+        background: #58a6ff;
+        border-radius: 1px;
+        z-index: 3;
+      }
+      .hl-box {
+        position: absolute;
+        background: rgba(88, 166, 255, 0.16);
+        border-left: 3px solid #58a6ff;
+        border-radius: 6px;
+        z-index: 0;
+        overflow: hidden;
+      }
+      .diff-line {
+        display: block;
+        min-height: 0;
+        line-height: 46px;
+        white-space: pre;
+        position: relative;
+        overflow: hidden;
+        padding-left: 14px;
+      }
+      .diff-sign {
+        display: inline-block;
+        width: 22px;
+        color: #41506220;
+      }
+      .diff-del {
+        background: rgba(248, 81, 73, 0.12);
+        box-shadow: inset 3px 0 #f85149;
+      }
+      .diff-add {
+        background: rgba(63, 185, 80, 0.12);
+        box-shadow: inset 3px 0 #3fb950;
+      }
+      .diff-del .diff-sign {
+        color: #f85149;
+      }
+      .diff-add .diff-sign {
+        color: #3fb950;
+      }
+      .flight-block {
+        position: absolute;
+        white-space: pre;
+        font-size: 27px;
+        line-height: 40px;
+        padding: 11px 22px;
+        border-radius: 11px;
+        background: #0f1722;
+        border: 1px solid #233044;
+        box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5);
+        will-change: transform, opacity;
+      }
+      .flight-target {
+        position: absolute;
+        border: 1.5px dashed #2a3a4f;
+        border-radius: 14px;
+        opacity: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="code-diff"
+      data-start="0"
+      data-duration="6"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="bg-field" data-layout-ignore></div>
+      <div class="bg-grid" data-layout-ignore></div>
+      <div class="bg-glow a" data-layout-ignore></div>
+      <div class="bg-glow b" data-layout-ignore></div>
+      <div class="editor" id="editor" data-layout-ignore>
+        <div class="titlebar">
+          <div class="dots">
+            <span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
+          </div>
+          <span class="filename"><span class="accent">greet.js</span> — Code Diff</span>
+        </div>
+        <div class="code-surface" id="surface"></div>
+      </div>
+    </div>
+    <script>
+      window.__TOKENS = {
+        diff: {
+          lang: "js",
+          theme: "github-dark",
+          bg: "#24292e",
+          fg: "#e1e4e8",
+          states: [
+            {
+              code: 'function greet(name) {\n  console.log("hi " + name)\n}',
+              tokens: [
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-0",
+                  content: "function",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-1",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-2",
+                  content: "greet",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-3",
+                  content: "(",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-4",
+                  content: "name",
+                  color: "#FFAB70",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-5",
+                  content: ") {",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-6",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-7",
+                  content: "  ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-8",
+                  content: "console.",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-9",
+                  content: "log",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-10",
+                  content: "(",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-11",
+                  content: '"hi "',
+                  color: "#9ECBFF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-12",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-13",
+                  content: "+",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-14",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-15",
+                  content: "name)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-16",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-17",
+                  content: "}",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-18",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+              ],
+            },
+            {
+              code: 'function greet(name, lang) {\n  const msg = translate("hi", lang)\n  console.log(`${msg} ${name}`)\n}',
+              tokens: [
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-0",
+                  content: "function",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-1",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-2",
+                  content: "greet",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-3",
+                  content: "(",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-4",
+                  content: "name",
+                  color: "#FFAB70",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-5",
+                  content: ",",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-6",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-7",
+                  content: "lang",
+                  color: "#FFAB70",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-5",
+                  content: ") {",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-6",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-7",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-11",
+                  content: "const",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-12",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-13",
+                  content: "msg",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-14",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-15",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-16",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-17",
+                  content: "translate",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-10",
+                  content: "(",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-19",
+                  content: '"hi"',
+                  color: "#9ECBFF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-20",
+                  content: ", lang)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-21",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-22",
+                  content: "  ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-23",
+                  content: "console.",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-9",
+                  content: "log",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-25",
+                  content: "(",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-26",
+                  content: "`${",
+                  color: "#9ECBFF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-27",
+                  content: "msg",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-28",
+                  content: "} ${",
+                  color: "#9ECBFF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-29",
+                  content: "name",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-30",
+                  content: "}`",
+                  color: "#9ECBFF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-31",
+                  content: ")",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-16",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-17",
+                  content: "}",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-34",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+              ],
+            },
+          ],
+        },
+      };
+      window.__BLOCK = { id: "code-diff", effect: "diff", seq: "diff", duration: 6 };
+    </script>
+    <script>
+      // hf-code-anim.js — self-contained code-animation engine for HyperFrames registry blocks.
+      //
+      // Reuses Shiki Magic Move's baked output (window.__TOKENS, baked at author time) and
+      // drives the animation as a PAUSED GSAP timeline the HyperFrames engine seeks per frame —
+      // NOT CSS transitions (those break under non-sequential frame seeking). FLIP measurement
+      // runs once inside document.fonts.ready (glyph metrics must be final). Each block sets
+      // window.__BLOCK = { id, effect, seq, line?, duration } and includes this engine; the
+      // engine builds one scene that fills the composition and registers window.__timelines[id].
+      (function () {
+        "use strict";
+        var T = window.__TOKENS || {};
+
+        function lineDiv() {
+          var d = document.createElement("div");
+          d.className = "line";
+          return d;
+        }
+
+        // Render a code state's keyed tokens into codeEl as lines of inline-block .tok spans.
+        function renderState(codeEl, state) {
+          codeEl.textContent = "";
+          var keyToEl = new Map();
+          var line = lineDiv();
+          codeEl.appendChild(line);
+          for (var i = 0; i < state.tokens.length; i++) {
+            var t = state.tokens[i];
+            if (t.content === "\n") {
+              line = lineDiv();
+              codeEl.appendChild(line);
+              continue;
+            }
+            var span = document.createElement("span");
+            span.className = "tok";
+            span.textContent = t.content;
+            span.style.color = t.color;
+            if (t.fontStyle & 1) span.style.fontStyle = "italic";
+            if (t.fontStyle & 2) span.style.fontWeight = "700";
+            line.appendChild(span);
+            keyToEl.set(t.key, span);
+          }
+          var last = codeEl.lastChild;
+          if (last && last.className === "line" && last.children.length === 0)
+            codeEl.removeChild(last);
+          return keyToEl;
+        }
+
+        function rectsOf(keyToEl) {
+          var m = new Map();
+          keyToEl.forEach(function (el, k) {
+            var r = el.getBoundingClientRect();
+            m.set(k, { left: r.left, top: r.top });
+          });
+          return m;
+        }
+
+        function makeScene(surface, withGutter) {
+          var scene = document.createElement("div");
+          scene.className = "scene";
+          if (withGutter) {
+            var g = document.createElement("div");
+            g.className = "gutter";
+            scene.appendChild(g);
+          }
+          var code = document.createElement("div");
+          code.className = "code";
+          scene.appendChild(code);
+          surface.appendChild(scene);
+          return { scene: scene, code: code, gutter: scene.querySelector(".gutter") };
+        }
+
+        function fillGutter(g, n) {
+          var html = "";
+          for (var i = 1; i <= n; i++) html += '<span class="ln">' + i + "</span>";
+          g.innerHTML = html;
+        }
+
+        function splitLines(state) {
+          var lines = [{ text: "", tokens: [] }];
+          for (var i = 0; i < state.tokens.length; i++) {
+            var t = state.tokens[i];
+            if (t.content === "\n") {
+              lines.push({ text: "", tokens: [] });
+              continue;
+            }
+            var cur = lines[lines.length - 1];
+            cur.tokens.push(t);
+            cur.text += t.content;
+          }
+          if (lines.length && lines[lines.length - 1].tokens.length === 0) lines.pop();
+          return lines;
+        }
+
+        function lineDiff(a, b) {
+          var n = a.length;
+          var m = b.length;
+          var dp = [];
+          for (var i = 0; i <= n; i++) dp.push(new Array(m + 1).fill(0));
+          for (var i = n - 1; i >= 0; i--) {
+            for (var j = m - 1; j >= 0; j--) {
+              dp[i][j] =
+                a[i].text === b[j].text
+                  ? dp[i + 1][j + 1] + 1
+                  : Math.max(dp[i + 1][j], dp[i][j + 1]);
+            }
+          }
+          var ops = [];
+          var i = 0;
+          var j = 0;
+          while (i < n && j < m) {
+            if (a[i].text === b[j].text) {
+              ops.push({ type: "same", line: b[j] });
+              i++;
+              j++;
+            } else if (dp[i + 1][j] >= dp[i][j + 1]) {
+              ops.push({ type: "del", line: a[i] });
+              i++;
+            } else {
+              ops.push({ type: "add", line: b[j] });
+              j++;
+            }
+          }
+          while (i < n) ops.push({ type: "del", line: a[i++] });
+          while (j < m) ops.push({ type: "add", line: b[j++] });
+          return ops;
+        }
+
+        // ---- single-scene effect builders (fade in, play, hold to end) -------------
+        var FADE = 0.45;
+
+        function diff(tl, surface, states, start) {
+          var DEL = 0.55;
+          var ADD = 0.6;
+          var ops = lineDiff(splitLines(states[0]), splitLines(states[1]));
+          var parts = makeScene(surface, false);
+          var code = parts.code;
+          var delEls = [];
+          var addEls = [];
+          ops.forEach(function (op) {
+            var ln = document.createElement("div");
+            ln.className =
+              "diff-line" +
+              (op.type === "del" ? " diff-del" : op.type === "add" ? " diff-add" : "");
+            var sign = document.createElement("span");
+            sign.className = "diff-sign";
+            sign.textContent = op.type === "del" ? "- " : op.type === "add" ? "+ " : "  ";
+            ln.appendChild(sign);
+            op.line.tokens.forEach(function (t) {
+              var s = document.createElement("span");
+              s.className = "tok";
+              s.textContent = t.content;
+              s.style.color = t.color;
+              ln.appendChild(s);
+            });
+            code.appendChild(ln);
+            if (op.type === "del") delEls.push(ln);
+            if (op.type === "add") addEls.push(ln);
+          });
+          tl.set(parts.scene, { opacity: 0 }, 0);
+          tl.to(parts.scene, { opacity: 1, duration: FADE, ease: "power1.out" }, start);
+          var atDel = start + FADE + 0.3;
+          delEls.forEach(function (el, k) {
+            tl.fromTo(
+              el,
+              { height: 46, opacity: 1 },
+              { height: 0, opacity: 0, duration: DEL, ease: "power2.inOut" },
+              atDel + k * 0.08,
+            );
+          });
+          var atAdd = atDel + DEL + 0.15;
+          addEls.forEach(function (el, k) {
+            tl.set(el, { height: 0, opacity: 0 }, 0);
+            tl.fromTo(
+              el,
+              { height: 0, opacity: 0 },
+              { height: 46, opacity: 1, duration: ADD, ease: "power2.out" },
+              atAdd + k * 0.12,
+            );
+          });
+        }
+
+        function buildEffect(tl, surface, spec) {
+          var start = 0.45;
+          var seq = T[spec.seq];
+          if (spec.effect === "diff") diff(tl, surface, seq.states, start);
+        }
+
+        function go() {
+          var spec = window.__BLOCK;
+          var surface = document.getElementById("surface");
+          var root = document.getElementById("root");
+          window.__timelines = window.__timelines || {};
+          var tl = gsap.timeline({ paused: true });
+          // Build inside fonts.ready (glyph metrics must be final), then register.
+          // Register ONLY after the timeline is fully built: the runtime's
+          // sub-composition readiness gate treats "key present" as "ready" and
+          // nests the child once. An empty timeline registered before this build
+          // would be nested empty and never re-nested → blank render when used as
+          // a sub-composition. See the contract in engine frameCapture.ts.
+          document.fonts.ready.then(function () {
+            tl.from("#editor", { opacity: 0, scale: 0.985, duration: 0.5, ease: "power2.out" }, 0);
+            buildEffect(tl, surface, spec);
+            var dur = parseFloat(root.dataset.duration) || tl.duration();
+            tl.to({}, { duration: dur }, 0); // pad to full composition length
+            window.__timelines["code-diff"] = tl; // register AFTER setup completes
+            if (typeof window.__hfForceTimelineRebind === "function") {
+              window.__hfForceTimelineRebind(); // re-nest now that we are populated
+            }
+          });
+        }
+
+        if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", go);
+        else go();
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/code-highlight/code-highlight.html b/docs/public/catalog/blocks/code-highlight/code-highlight.html
new file mode 100644
index 0000000000..1d6dd76e94
--- /dev/null
+++ b/docs/public/catalog/blocks/code-highlight/code-highlight.html
@@ -0,0 +1,745 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Code Highlight Sweep</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #05070b;
+      }
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        font-family: "JetBrains Mono", monospace;
+        color: #e6edf3;
+      }
+      .bg-field {
+        position: absolute;
+        inset: 0;
+        background: radial-gradient(1200px 700px at 50% 18%, #0e1726 0%, #070b12 55%, #05070b 100%);
+      }
+      .bg-grid {
+        position: absolute;
+        inset: 0;
+        background-image:
+          linear-gradient(rgba(88, 166, 255, 0.05) 1px, transparent 1px),
+          linear-gradient(90deg, rgba(88, 166, 255, 0.05) 1px, transparent 1px);
+        background-size: 64px 64px;
+        mask-image: radial-gradient(1100px 620px at 50% 42%, #000 0%, transparent 78%);
+      }
+      .bg-glow {
+        position: absolute;
+        width: 900px;
+        height: 900px;
+        border-radius: 50%;
+        filter: blur(120px);
+        opacity: 0.5;
+      }
+      .bg-glow.a {
+        background: #1f6feb55;
+        left: -180px;
+        top: -200px;
+      }
+      .bg-glow.b {
+        background: #2ea04355;
+        right: -200px;
+        bottom: -260px;
+      }
+      .editor {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        width: 1380px;
+        height: 800px;
+        background: #0b0f17;
+        border: 1px solid #1d2733;
+        border-radius: 16px;
+        box-shadow:
+          0 40px 120px rgba(0, 0, 0, 0.6),
+          0 2px 0 rgba(255, 255, 255, 0.03) inset;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+      }
+      .titlebar {
+        height: 56px;
+        flex: 0 0 56px;
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        padding: 0 22px;
+        background: linear-gradient(#11161f, #0c111a);
+        border-bottom: 1px solid #1b2430;
+      }
+      .dots {
+        display: flex;
+        gap: 10px;
+      }
+      .dot {
+        width: 14px;
+        height: 14px;
+        border-radius: 50%;
+      }
+      .dot.r {
+        background: #ff5f57;
+      }
+      .dot.y {
+        background: #febc2e;
+      }
+      .dot.g {
+        background: #28c840;
+      }
+      .filename {
+        font-size: 19px;
+        color: #8b98a9;
+        letter-spacing: 0.2px;
+      }
+      .filename .accent {
+        color: #d6e2f0;
+      }
+      .code-surface {
+        position: relative;
+        flex: 1 1 auto;
+        overflow: hidden;
+      }
+      .scene {
+        position: absolute;
+        inset: 0;
+        opacity: 0;
+        will-change: opacity;
+      }
+      .code {
+        position: absolute;
+        top: 38px;
+        left: 0;
+        right: 0;
+        padding: 0 44px 0 104px;
+        font-size: 30px;
+        line-height: 46px;
+        font-variant-ligatures: none;
+        tab-size: 2;
+      }
+      .gutter {
+        position: absolute;
+        top: 38px;
+        left: 0;
+        width: 84px;
+        padding-right: 18px;
+        font-size: 30px;
+        line-height: 46px;
+        text-align: right;
+        color: #828c9b;
+        user-select: none;
+      }
+      .ln {
+        display: block;
+        height: 46px;
+      }
+      .line {
+        display: block;
+        min-height: 46px;
+        white-space: pre;
+        position: relative;
+        z-index: 1;
+      }
+      .tok {
+        display: inline-block;
+        white-space: pre;
+        will-change: transform, opacity;
+      }
+      .caret {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 3px;
+        height: 32px;
+        margin-top: 6px;
+        background: #58a6ff;
+        border-radius: 1px;
+        z-index: 3;
+      }
+      .hl-box {
+        position: absolute;
+        background: rgba(88, 166, 255, 0.16);
+        border-left: 3px solid #58a6ff;
+        border-radius: 6px;
+        z-index: 0;
+        overflow: hidden;
+      }
+      .diff-line {
+        display: block;
+        min-height: 0;
+        line-height: 46px;
+        white-space: pre;
+        position: relative;
+        overflow: hidden;
+        padding-left: 14px;
+      }
+      .diff-sign {
+        display: inline-block;
+        width: 22px;
+        color: #41506220;
+      }
+      .diff-del {
+        background: rgba(248, 81, 73, 0.12);
+        box-shadow: inset 3px 0 #f85149;
+      }
+      .diff-add {
+        background: rgba(63, 185, 80, 0.12);
+        box-shadow: inset 3px 0 #3fb950;
+      }
+      .diff-del .diff-sign {
+        color: #f85149;
+      }
+      .diff-add .diff-sign {
+        color: #3fb950;
+      }
+      .flight-block {
+        position: absolute;
+        white-space: pre;
+        font-size: 27px;
+        line-height: 40px;
+        padding: 11px 22px;
+        border-radius: 11px;
+        background: #0f1722;
+        border: 1px solid #233044;
+        box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5);
+        will-change: transform, opacity;
+      }
+      .flight-target {
+        position: absolute;
+        border: 1.5px dashed #2a3a4f;
+        border-radius: 14px;
+        opacity: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="code-highlight"
+      data-start="0"
+      data-duration="5"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="bg-field" data-layout-ignore></div>
+      <div class="bg-grid" data-layout-ignore></div>
+      <div class="bg-glow a" data-layout-ignore></div>
+      <div class="bg-glow b" data-layout-ignore></div>
+      <div class="editor" id="editor" data-layout-ignore>
+        <div class="titlebar">
+          <div class="dots">
+            <span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
+          </div>
+          <span class="filename"
+            ><span class="accent">loadConfig.js</span> — Code Highlight Sweep</span
+          >
+        </div>
+        <div class="code-surface" id="surface"></div>
+      </div>
+    </div>
+    <script>
+      window.__TOKENS = {
+        feature: {
+          lang: "js",
+          theme: "github-dark",
+          bg: "#24292e",
+          fg: "#e1e4e8",
+          states: [
+            {
+              code: 'async function loadConfig(path) {\n  const raw = await readFile(path, "utf8")\n  const config = JSON.parse(raw)\n  return validate(config)\n}',
+              tokens: [
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-0",
+                  content: "async",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-1",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-2",
+                  content: "function",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-3",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-4",
+                  content: "loadConfig",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-5",
+                  content: "(",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-6",
+                  content: "path",
+                  color: "#FFAB70",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-7",
+                  content: ") {",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-8",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-9",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-10",
+                  content: "const",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-11",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-12",
+                  content: "raw",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-13",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-14",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-15",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-16",
+                  content: "await",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-17",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-18",
+                  content: "readFile",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-19",
+                  content: "(path,",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-20",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-21",
+                  content: '"utf8"',
+                  color: "#9ECBFF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-22",
+                  content: ")",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-23",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-24",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-25",
+                  content: "const",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-26",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-27",
+                  content: "config",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-28",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-29",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-30",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-31",
+                  content: "JSON",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-32",
+                  content: ".",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-33",
+                  content: "parse",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-34",
+                  content: "(raw)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-35",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-36",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-37",
+                  content: "return",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-38",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-39",
+                  content: "validate",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-40",
+                  content: "(config)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-41",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-42",
+                  content: "}",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-43",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+              ],
+            },
+          ],
+        },
+      };
+      window.__BLOCK = {
+        id: "code-highlight",
+        effect: "highlight",
+        seq: "feature",
+        line: 1,
+        duration: 5,
+      };
+    </script>
+    <script>
+      // hf-code-anim.js — self-contained code-animation engine for HyperFrames registry blocks.
+      //
+      // Reuses Shiki Magic Move's baked output (window.__TOKENS, baked at author time) and
+      // drives the animation as a PAUSED GSAP timeline the HyperFrames engine seeks per frame —
+      // NOT CSS transitions (those break under non-sequential frame seeking). FLIP measurement
+      // runs once inside document.fonts.ready (glyph metrics must be final). Each block sets
+      // window.__BLOCK = { id, effect, seq, line?, duration } and includes this engine; the
+      // engine builds one scene that fills the composition and registers window.__timelines[id].
+      (function () {
+        "use strict";
+        var T = window.__TOKENS || {};
+
+        function lineDiv() {
+          var d = document.createElement("div");
+          d.className = "line";
+          return d;
+        }
+
+        // Render a code state's keyed tokens into codeEl as lines of inline-block .tok spans.
+        function renderState(codeEl, state) {
+          codeEl.textContent = "";
+          var keyToEl = new Map();
+          var line = lineDiv();
+          codeEl.appendChild(line);
+          for (var i = 0; i < state.tokens.length; i++) {
+            var t = state.tokens[i];
+            if (t.content === "\n") {
+              line = lineDiv();
+              codeEl.appendChild(line);
+              continue;
+            }
+            var span = document.createElement("span");
+            span.className = "tok";
+            span.textContent = t.content;
+            span.style.color = t.color;
+            if (t.fontStyle & 1) span.style.fontStyle = "italic";
+            if (t.fontStyle & 2) span.style.fontWeight = "700";
+            line.appendChild(span);
+            keyToEl.set(t.key, span);
+          }
+          var last = codeEl.lastChild;
+          if (last && last.className === "line" && last.children.length === 0)
+            codeEl.removeChild(last);
+          return keyToEl;
+        }
+
+        function rectsOf(keyToEl) {
+          var m = new Map();
+          keyToEl.forEach(function (el, k) {
+            var r = el.getBoundingClientRect();
+            m.set(k, { left: r.left, top: r.top });
+          });
+          return m;
+        }
+
+        function makeScene(surface, withGutter) {
+          var scene = document.createElement("div");
+          scene.className = "scene";
+          if (withGutter) {
+            var g = document.createElement("div");
+            g.className = "gutter";
+            scene.appendChild(g);
+          }
+          var code = document.createElement("div");
+          code.className = "code";
+          scene.appendChild(code);
+          surface.appendChild(scene);
+          return { scene: scene, code: code, gutter: scene.querySelector(".gutter") };
+        }
+
+        function fillGutter(g, n) {
+          var html = "";
+          for (var i = 1; i <= n; i++) html += '<span class="ln">' + i + "</span>";
+          g.innerHTML = html;
+        }
+
+        function splitLines(state) {
+          var lines = [{ text: "", tokens: [] }];
+          for (var i = 0; i < state.tokens.length; i++) {
+            var t = state.tokens[i];
+            if (t.content === "\n") {
+              lines.push({ text: "", tokens: [] });
+              continue;
+            }
+            var cur = lines[lines.length - 1];
+            cur.tokens.push(t);
+            cur.text += t.content;
+          }
+          if (lines.length && lines[lines.length - 1].tokens.length === 0) lines.pop();
+          return lines;
+        }
+
+        function lineDiff(a, b) {
+          var n = a.length;
+          var m = b.length;
+          var dp = [];
+          for (var i = 0; i <= n; i++) dp.push(new Array(m + 1).fill(0));
+          for (var i = n - 1; i >= 0; i--) {
+            for (var j = m - 1; j >= 0; j--) {
+              dp[i][j] =
+                a[i].text === b[j].text
+                  ? dp[i + 1][j + 1] + 1
+                  : Math.max(dp[i + 1][j], dp[i][j + 1]);
+            }
+          }
+          var ops = [];
+          var i = 0;
+          var j = 0;
+          while (i < n && j < m) {
+            if (a[i].text === b[j].text) {
+              ops.push({ type: "same", line: b[j] });
+              i++;
+              j++;
+            } else if (dp[i + 1][j] >= dp[i][j + 1]) {
+              ops.push({ type: "del", line: a[i] });
+              i++;
+            } else {
+              ops.push({ type: "add", line: b[j] });
+              j++;
+            }
+          }
+          while (i < n) ops.push({ type: "del", line: a[i++] });
+          while (j < m) ops.push({ type: "add", line: b[j++] });
+          return ops;
+        }
+
+        // ---- single-scene effect builders (fade in, play, hold to end) -------------
+        var FADE = 0.45;
+
+        function highlight(tl, surface, state, start, targetIdx) {
+          var SWEEP = 0.9;
+          var parts = makeScene(surface, true);
+          var code = parts.code;
+          renderState(code, state);
+          var lines = code.querySelectorAll(".line");
+          fillGutter(parts.gutter, lines.length);
+          var base = code.getBoundingClientRect();
+          var idx = Math.max(0, Math.min(lines.length - 1, targetIdx));
+          var lr = lines[idx].getBoundingClientRect();
+          var box = document.createElement("div");
+          box.className = "hl-box";
+          box.style.left = lr.left - base.left - 8 + "px";
+          box.style.top = lr.top - base.top - 1 + "px";
+          box.style.height = lr.height + 2 + "px";
+          code.insertBefore(box, code.firstChild);
+          tl.set(parts.scene, { opacity: 0 }, 0);
+          tl.to(parts.scene, { opacity: 1, duration: FADE, ease: "power1.out" }, start);
+          var at = start + FADE + 0.2;
+          tl.fromTo(
+            box,
+            { width: 0, opacity: 0 },
+            { width: lr.width + 18, opacity: 1, duration: SWEEP, ease: "power2.inOut" },
+            at,
+          );
+          for (var i = 0; i < lines.length; i++) {
+            if (i === idx) continue;
+            tl.fromTo(
+              lines[i],
+              { opacity: 1 },
+              { opacity: 0.45, duration: SWEEP, ease: "power2.inOut" },
+              at,
+            );
+          }
+        }
+
+        function buildEffect(tl, surface, spec) {
+          var start = 0.45;
+          var seq = T[spec.seq];
+          if (spec.effect === "highlight")
+            highlight(tl, surface, seq.states[0], start, spec.line || 0);
+        }
+
+        function go() {
+          var spec = window.__BLOCK;
+          var surface = document.getElementById("surface");
+          var root = document.getElementById("root");
+          window.__timelines = window.__timelines || {};
+          var tl = gsap.timeline({ paused: true });
+          // Build inside fonts.ready (glyph metrics must be final), then register.
+          // Register ONLY after the timeline is fully built: the runtime's
+          // sub-composition readiness gate treats "key present" as "ready" and
+          // nests the child once. An empty timeline registered before this build
+          // would be nested empty and never re-nested → blank render when used as
+          // a sub-composition. See the contract in engine frameCapture.ts.
+          document.fonts.ready.then(function () {
+            tl.from("#editor", { opacity: 0, scale: 0.985, duration: 0.5, ease: "power2.out" }, 0);
+            buildEffect(tl, surface, spec);
+            var dur = parseFloat(root.dataset.duration) || tl.duration();
+            tl.to({}, { duration: dur }, 0); // pad to full composition length
+            window.__timelines["code-highlight"] = tl; // register AFTER setup completes
+            if (typeof window.__hfForceTimelineRebind === "function") {
+              window.__hfForceTimelineRebind(); // re-nest now that we are populated
+            }
+          });
+        }
+
+        if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", go);
+        else go();
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/code-morph/code-morph.html b/docs/public/catalog/blocks/code-morph/code-morph.html
new file mode 100644
index 0000000000..b79c584392
--- /dev/null
+++ b/docs/public/catalog/blocks/code-morph/code-morph.html
@@ -0,0 +1,1216 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Code Morph</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #05070b;
+      }
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        font-family: "JetBrains Mono", monospace;
+        color: #e6edf3;
+      }
+      .bg-field {
+        position: absolute;
+        inset: 0;
+        background: radial-gradient(1200px 700px at 50% 18%, #0e1726 0%, #070b12 55%, #05070b 100%);
+      }
+      .bg-grid {
+        position: absolute;
+        inset: 0;
+        background-image:
+          linear-gradient(rgba(88, 166, 255, 0.05) 1px, transparent 1px),
+          linear-gradient(90deg, rgba(88, 166, 255, 0.05) 1px, transparent 1px);
+        background-size: 64px 64px;
+        mask-image: radial-gradient(1100px 620px at 50% 42%, #000 0%, transparent 78%);
+      }
+      .bg-glow {
+        position: absolute;
+        width: 900px;
+        height: 900px;
+        border-radius: 50%;
+        filter: blur(120px);
+        opacity: 0.5;
+      }
+      .bg-glow.a {
+        background: #1f6feb55;
+        left: -180px;
+        top: -200px;
+      }
+      .bg-glow.b {
+        background: #2ea04355;
+        right: -200px;
+        bottom: -260px;
+      }
+      .editor {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        width: 1380px;
+        height: 800px;
+        background: #0b0f17;
+        border: 1px solid #1d2733;
+        border-radius: 16px;
+        box-shadow:
+          0 40px 120px rgba(0, 0, 0, 0.6),
+          0 2px 0 rgba(255, 255, 255, 0.03) inset;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+      }
+      .titlebar {
+        height: 56px;
+        flex: 0 0 56px;
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        padding: 0 22px;
+        background: linear-gradient(#11161f, #0c111a);
+        border-bottom: 1px solid #1b2430;
+      }
+      .dots {
+        display: flex;
+        gap: 10px;
+      }
+      .dot {
+        width: 14px;
+        height: 14px;
+        border-radius: 50%;
+      }
+      .dot.r {
+        background: #ff5f57;
+      }
+      .dot.y {
+        background: #febc2e;
+      }
+      .dot.g {
+        background: #28c840;
+      }
+      .filename {
+        font-size: 19px;
+        color: #8b98a9;
+        letter-spacing: 0.2px;
+      }
+      .filename .accent {
+        color: #d6e2f0;
+      }
+      .code-surface {
+        position: relative;
+        flex: 1 1 auto;
+        overflow: hidden;
+      }
+      .scene {
+        position: absolute;
+        inset: 0;
+        opacity: 0;
+        will-change: opacity;
+      }
+      .code {
+        position: absolute;
+        top: 38px;
+        left: 0;
+        right: 0;
+        padding: 0 44px 0 104px;
+        font-size: 30px;
+        line-height: 46px;
+        font-variant-ligatures: none;
+        tab-size: 2;
+      }
+      .gutter {
+        position: absolute;
+        top: 38px;
+        left: 0;
+        width: 84px;
+        padding-right: 18px;
+        font-size: 30px;
+        line-height: 46px;
+        text-align: right;
+        color: #828c9b;
+        user-select: none;
+      }
+      .ln {
+        display: block;
+        height: 46px;
+      }
+      .line {
+        display: block;
+        min-height: 46px;
+        white-space: pre;
+        position: relative;
+        z-index: 1;
+      }
+      .tok {
+        display: inline-block;
+        white-space: pre;
+        will-change: transform, opacity;
+      }
+      .caret {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 3px;
+        height: 32px;
+        margin-top: 6px;
+        background: #58a6ff;
+        border-radius: 1px;
+        z-index: 3;
+      }
+      .hl-box {
+        position: absolute;
+        background: rgba(88, 166, 255, 0.16);
+        border-left: 3px solid #58a6ff;
+        border-radius: 6px;
+        z-index: 0;
+        overflow: hidden;
+      }
+      .diff-line {
+        display: block;
+        min-height: 0;
+        line-height: 46px;
+        white-space: pre;
+        position: relative;
+        overflow: hidden;
+        padding-left: 14px;
+      }
+      .diff-sign {
+        display: inline-block;
+        width: 22px;
+        color: #41506220;
+      }
+      .diff-del {
+        background: rgba(248, 81, 73, 0.12);
+        box-shadow: inset 3px 0 #f85149;
+      }
+      .diff-add {
+        background: rgba(63, 185, 80, 0.12);
+        box-shadow: inset 3px 0 #3fb950;
+      }
+      .diff-del .diff-sign {
+        color: #f85149;
+      }
+      .diff-add .diff-sign {
+        color: #3fb950;
+      }
+      .flight-block {
+        position: absolute;
+        white-space: pre;
+        font-size: 27px;
+        line-height: 40px;
+        padding: 11px 22px;
+        border-radius: 11px;
+        background: #0f1722;
+        border: 1px solid #233044;
+        box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5);
+        will-change: transform, opacity;
+      }
+      .flight-target {
+        position: absolute;
+        border: 1.5px dashed #2a3a4f;
+        border-radius: 14px;
+        opacity: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="code-morph"
+      data-start="0"
+      data-duration="7"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="bg-field" data-layout-ignore></div>
+      <div class="bg-grid" data-layout-ignore></div>
+      <div class="bg-glow a" data-layout-ignore></div>
+      <div class="bg-glow b" data-layout-ignore></div>
+      <div class="editor" id="editor" data-layout-ignore>
+        <div class="titlebar">
+          <div class="dots">
+            <span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
+          </div>
+          <span class="filename"><span class="accent">refactor.js</span> — Code Morph</span>
+        </div>
+        <div class="code-surface" id="surface"></div>
+      </div>
+    </div>
+    <script>
+      window.__TOKENS = {
+        morph: {
+          lang: "js",
+          theme: "github-dark",
+          bg: "#24292e",
+          fg: "#e1e4e8",
+          states: [
+            {
+              code: "function activeNames(users) {\n  const out = []\n  for (const u of users) {\n    if (u.active) {\n      out.push(u.name)\n    }\n  }\n  return out\n}",
+              tokens: [
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-0",
+                  content: "function",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-1",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-2",
+                  content: "activeNames",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-3",
+                  content: "(",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-4",
+                  content: "users",
+                  color: "#FFAB70",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-5",
+                  content: ") {",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-6",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-7",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-8",
+                  content: "const",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-9",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-10",
+                  content: "out",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-11",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-12",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-13",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-14",
+                  content: "[]",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-15",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-16",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-17",
+                  content: "for",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-18",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-19",
+                  content: "(",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-20",
+                  content: "const",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-21",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-22",
+                  content: "u",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-23",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-24",
+                  content: "of",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-25",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-26",
+                  content: "users) {",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-27",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-28",
+                  content: "    ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-29",
+                  content: "if",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-30",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-31",
+                  content: "(u.active) {",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-32",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-33",
+                  content: "      ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-34",
+                  content: "out.",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-35",
+                  content: "push",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-36",
+                  content: "(u.name)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-37",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-38",
+                  content: "    ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-39",
+                  content: "}",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-40",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-41",
+                  content: "  ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-42",
+                  content: "}",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-43",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-44",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-45",
+                  content: "return",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-46",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-47",
+                  content: "out",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-48",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-49",
+                  content: "}",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-50",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+              ],
+            },
+            {
+              code: "function activeNames(users) {\n  return users\n    .filter((u) => u.active)\n    .map((u) => u.name)\n}",
+              tokens: [
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-0",
+                  content: "function",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-1",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-2",
+                  content: "activeNames",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-3",
+                  content: "(",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-4",
+                  content: "users",
+                  color: "#FFAB70",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-5",
+                  content: ") {",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-6",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-7",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-45",
+                  content: "return",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-25",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-10",
+                  content: "users",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-27",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-28",
+                  content: "    ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-13",
+                  content: ".",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-14",
+                  content: "filter",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-15",
+                  content: "((",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-16",
+                  content: "u",
+                  color: "#FFAB70",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-17",
+                  content: ")",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-18",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-19",
+                  content: "=>",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-20",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-21",
+                  content: "u.active)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-32",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-23",
+                  content: "    ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-24",
+                  content: ".",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-25",
+                  content: "map",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-26",
+                  content: "((",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-27",
+                  content: "u",
+                  color: "#FFAB70",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-28",
+                  content: ")",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-29",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-30",
+                  content: "=>",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-31",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-32",
+                  content: "u.name)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-48",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-49",
+                  content: "}",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-35",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+              ],
+            },
+            {
+              code: "const activeNames = (users) =>\n  users.filter((u) => u.active).map((u) => u.name)",
+              tokens: [
+                {
+                  key: "VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-0",
+                  content: "const",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-1",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-2",
+                  content: "activeNames",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-3",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-4",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-5",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-3",
+                  content: "(",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-4",
+                  content: "users",
+                  color: "#FFAB70",
+                  fontStyle: 0,
+                },
+                {
+                  key: "VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-8",
+                  content: ")",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-9",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-10",
+                  content: "=>",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-6",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-7",
+                  content: "  ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-13",
+                  content: "users.",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-14",
+                  content: "filter",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-15",
+                  content: "((",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-16",
+                  content: "u",
+                  color: "#FFAB70",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-17",
+                  content: ")",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-18",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-19",
+                  content: "=>",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-20",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-21",
+                  content: "u.active).",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-25",
+                  content: "map",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-26",
+                  content: "((",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-27",
+                  content: "u",
+                  color: "#FFAB70",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-28",
+                  content: ")",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-29",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-30",
+                  content: "=>",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-31",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-32",
+                  content: "u.name)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-30",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+              ],
+            },
+          ],
+        },
+      };
+      window.__BLOCK = { id: "code-morph", effect: "morph", seq: "morph", duration: 7 };
+    </script>
+    <script>
+      // hf-code-anim.js — self-contained code-animation engine for HyperFrames registry blocks.
+      //
+      // Reuses Shiki Magic Move's baked output (window.__TOKENS, baked at author time) and
+      // drives the animation as a PAUSED GSAP timeline the HyperFrames engine seeks per frame —
+      // NOT CSS transitions (those break under non-sequential frame seeking). FLIP measurement
+      // runs once inside document.fonts.ready (glyph metrics must be final). Each block sets
+      // window.__BLOCK = { id, effect, seq, line?, duration } and includes this engine; the
+      // engine builds one scene that fills the composition and registers window.__timelines[id].
+      (function () {
+        "use strict";
+        var T = window.__TOKENS || {};
+
+        function lineDiv() {
+          var d = document.createElement("div");
+          d.className = "line";
+          return d;
+        }
+
+        // Render a code state's keyed tokens into codeEl as lines of inline-block .tok spans.
+        function renderState(codeEl, state) {
+          codeEl.textContent = "";
+          var keyToEl = new Map();
+          var line = lineDiv();
+          codeEl.appendChild(line);
+          for (var i = 0; i < state.tokens.length; i++) {
+            var t = state.tokens[i];
+            if (t.content === "\n") {
+              line = lineDiv();
+              codeEl.appendChild(line);
+              continue;
+            }
+            var span = document.createElement("span");
+            span.className = "tok";
+            span.textContent = t.content;
+            span.style.color = t.color;
+            if (t.fontStyle & 1) span.style.fontStyle = "italic";
+            if (t.fontStyle & 2) span.style.fontWeight = "700";
+            line.appendChild(span);
+            keyToEl.set(t.key, span);
+          }
+          var last = codeEl.lastChild;
+          if (last && last.className === "line" && last.children.length === 0)
+            codeEl.removeChild(last);
+          return keyToEl;
+        }
+
+        function rectsOf(keyToEl) {
+          var m = new Map();
+          keyToEl.forEach(function (el, k) {
+            var r = el.getBoundingClientRect();
+            m.set(k, { left: r.left, top: r.top });
+          });
+          return m;
+        }
+
+        function makeScene(surface, withGutter) {
+          var scene = document.createElement("div");
+          scene.className = "scene";
+          if (withGutter) {
+            var g = document.createElement("div");
+            g.className = "gutter";
+            scene.appendChild(g);
+          }
+          var code = document.createElement("div");
+          code.className = "code";
+          scene.appendChild(code);
+          surface.appendChild(scene);
+          return { scene: scene, code: code, gutter: scene.querySelector(".gutter") };
+        }
+
+        function fillGutter(g, n) {
+          var html = "";
+          for (var i = 1; i <= n; i++) html += '<span class="ln">' + i + "</span>";
+          g.innerHTML = html;
+        }
+
+        function splitLines(state) {
+          var lines = [{ text: "", tokens: [] }];
+          for (var i = 0; i < state.tokens.length; i++) {
+            var t = state.tokens[i];
+            if (t.content === "\n") {
+              lines.push({ text: "", tokens: [] });
+              continue;
+            }
+            var cur = lines[lines.length - 1];
+            cur.tokens.push(t);
+            cur.text += t.content;
+          }
+          if (lines.length && lines[lines.length - 1].tokens.length === 0) lines.pop();
+          return lines;
+        }
+
+        function lineDiff(a, b) {
+          var n = a.length;
+          var m = b.length;
+          var dp = [];
+          for (var i = 0; i <= n; i++) dp.push(new Array(m + 1).fill(0));
+          for (var i = n - 1; i >= 0; i--) {
+            for (var j = m - 1; j >= 0; j--) {
+              dp[i][j] =
+                a[i].text === b[j].text
+                  ? dp[i + 1][j + 1] + 1
+                  : Math.max(dp[i + 1][j], dp[i][j + 1]);
+            }
+          }
+          var ops = [];
+          var i = 0;
+          var j = 0;
+          while (i < n && j < m) {
+            if (a[i].text === b[j].text) {
+              ops.push({ type: "same", line: b[j] });
+              i++;
+              j++;
+            } else if (dp[i + 1][j] >= dp[i][j + 1]) {
+              ops.push({ type: "del", line: a[i] });
+              i++;
+            } else {
+              ops.push({ type: "add", line: b[j] });
+              j++;
+            }
+          }
+          while (i < n) ops.push({ type: "del", line: a[i++] });
+          while (j < m) ops.push({ type: "add", line: b[j++] });
+          return ops;
+        }
+
+        // ---- single-scene effect builders (fade in, play, hold to end) -------------
+        var FADE = 0.45;
+
+        function morph(tl, surface, states, start) {
+          var STEP = 1.2;
+          var HOLD = 1.0;
+          var t = start;
+          for (var s = 0; s < states.length - 1; s++) {
+            var parts = makeScene(surface, false);
+            var code = parts.code;
+            var fromEls = renderState(code, states[s]);
+            var fromR = rectsOf(fromEls);
+            var toEls = renderState(code, states[s + 1]);
+            var toR = rectsOf(toEls);
+            var base = code.getBoundingClientRect();
+            var seg = gsap.timeline();
+            var ENTER_AT = STEP * 0.45;
+            var FD = STEP * 0.5;
+            toEls.forEach(function (el, k) {
+              var fr = fromR.get(k);
+              var tr = toR.get(k);
+              if (fr) {
+                seg.fromTo(
+                  el,
+                  { x: fr.left - tr.left, y: fr.top - tr.top },
+                  { x: 0, y: 0, duration: STEP, ease: "power2.inOut" },
+                  0,
+                );
+              } else {
+                seg.fromTo(
+                  el,
+                  { opacity: 0 },
+                  { opacity: 1, duration: FD, ease: "power1.out" },
+                  ENTER_AT,
+                );
+              }
+            });
+            var toKeys = new Set(toEls.keys());
+            var fromState = states[s];
+            for (var i = 0; i < fromState.tokens.length; i++) {
+              var tok = fromState.tokens[i];
+              if (tok.content === "\n" || toKeys.has(tok.key) || !fromR.has(tok.key)) continue;
+              var r = fromR.get(tok.key);
+              var span = document.createElement("span");
+              span.className = "tok";
+              span.textContent = tok.content;
+              span.style.position = "absolute";
+              span.style.left = r.left - base.left + "px";
+              span.style.top = r.top - base.top + "px";
+              span.style.color = tok.color;
+              code.appendChild(span);
+              seg.fromTo(span, { opacity: 1 }, { opacity: 0, duration: FD, ease: "power1.in" }, 0);
+            }
+            var segStart = t + FADE;
+            var segEnd = segStart + STEP + HOLD;
+            var isLast = s === states.length - 2;
+            tl.set(parts.scene, { opacity: 0 }, 0);
+            tl.to(parts.scene, { opacity: 1, duration: FADE, ease: "power1.out" }, t);
+            if (!isLast)
+              tl.to(parts.scene, { opacity: 0, duration: FADE, ease: "power1.in" }, segEnd - FADE);
+            tl.add(seg, segStart);
+            t = segEnd - FADE;
+          }
+        }
+
+        function buildEffect(tl, surface, spec) {
+          var start = 0.45;
+          var seq = T[spec.seq];
+          if (spec.effect === "morph") morph(tl, surface, seq.states, start);
+        }
+
+        function go() {
+          var spec = window.__BLOCK;
+          var surface = document.getElementById("surface");
+          var root = document.getElementById("root");
+          window.__timelines = window.__timelines || {};
+          var tl = gsap.timeline({ paused: true });
+          // Build inside fonts.ready (glyph metrics must be final), then register.
+          // Register ONLY after the timeline is fully built: the runtime's
+          // sub-composition readiness gate treats "key present" as "ready" and
+          // nests the child once. An empty timeline registered before this build
+          // would be nested empty and never re-nested → blank render when used as
+          // a sub-composition. See the contract in engine frameCapture.ts.
+          document.fonts.ready.then(function () {
+            tl.from("#editor", { opacity: 0, scale: 0.985, duration: 0.5, ease: "power2.out" }, 0);
+            buildEffect(tl, surface, spec);
+            var dur = parseFloat(root.dataset.duration) || tl.duration();
+            tl.to({}, { duration: dur }, 0); // pad to full composition length
+            window.__timelines["code-morph"] = tl; // register AFTER setup completes
+            if (typeof window.__hfForceTimelineRebind === "function") {
+              window.__hfForceTimelineRebind(); // re-nest now that we are populated
+            }
+          });
+        }
+
+        if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", go);
+        else go();
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/code-particle-assemble/code-particle-assemble.html b/docs/public/catalog/blocks/code-particle-assemble/code-particle-assemble.html
new file mode 100644
index 0000000000..5734fdab50
--- /dev/null
+++ b/docs/public/catalog/blocks/code-particle-assemble/code-particle-assemble.html
@@ -0,0 +1,479 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Code Particle Assemble</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #05070b;
+      }
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+      }
+      #gl {
+        position: absolute;
+        inset: 0;
+        width: 1920px;
+        height: 1080px;
+        display: block;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="code-particle-assemble"
+      data-start="0"
+      data-duration="8"
+      data-width="1920"
+      data-height="1080"
+    >
+      <canvas id="gl" width="1920" height="1080"></canvas>
+    </div>
+    <script>
+      window.__TOKENS = {
+        assemble: {
+          lang: "js",
+          theme: "github-dark",
+          bg: "#24292e",
+          fg: "#e1e4e8",
+          states: [
+            {
+              code: "const app = pipe(\n  parse,\n  optimize,\n  emit,\n)",
+              tokens: [
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-0",
+                  content: "const",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-1",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-2",
+                  content: "app",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-3",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-4",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-5",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-6",
+                  content: "pipe",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-7",
+                  content: "(",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-8",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-9",
+                  content: "  ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-10",
+                  content: "parse,",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-11",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-12",
+                  content: "  ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-13",
+                  content: "optimize,",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-14",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-15",
+                  content: "  ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-16",
+                  content: "emit,",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-17",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-18",
+                  content: ")",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-19",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+              ],
+            },
+          ],
+        },
+      };
+      window.__BLOCK = {
+        id: "code-particle-assemble",
+        effect: "particles",
+        seq: "assemble",
+        duration: 8,
+        seed: 23,
+      };
+    </script>
+    <script>
+      // hf-code-anim-gl.js — WebGL code-animation engine for the "crazy" Code Animations blocks.
+      //
+      // Bridges the baked Shiki tokens (window.__TOKENS) into Three.js: the tokens are drawn once
+      // to an offscreen 2D canvas (a CanvasTexture), which then drives a lit 3D slab, a dissolve
+      // shader, or a GPU particle system. Determinism per the project contract:
+      //   - render only via tl.eventCallback("onUpdate", …) + one initial render() — never rAF
+      //   - all randomness from a seeded mulberry32 — never Math.random / Date.now
+      //   - canvas drawn once after document.fonts.ready (final glyph metrics)
+      //   - paused GSAP timeline registered on window.__timelines[id]; HF seeks it per frame
+      //
+      // Each block sets window.__BLOCK = { id, effect, seq, duration, seed } and includes this engine.
+      (function () {
+        "use strict";
+        var T = window.__TOKENS || {};
+
+        // ---- seeded PRNG (no Math.random) -----------------------------------------
+        function mulberry32(a) {
+          return function () {
+            a |= 0;
+            a = (a + 0x6d2b79f5) | 0;
+            var t = Math.imul(a ^ (a >>> 15), 1 | a);
+            t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+            return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+          };
+        }
+
+        // ---- split a token state into lines of {content,color} --------------------
+        function splitLines(state) {
+          var lines = [[]];
+          for (var i = 0; i < state.tokens.length; i++) {
+            var t = state.tokens[i];
+            if (t.content === "\n") {
+              lines.push([]);
+              continue;
+            }
+            lines[lines.length - 1].push(t);
+          }
+          while (lines.length && lines[lines.length - 1].length === 0) lines.pop();
+          return lines;
+        }
+
+        // ---- THE BRIDGE: draw baked tokens to an offscreen 2D canvas ---------------
+        // Returns { canvas, W, H, lines, lineH, padY, fontPx } so effects can sample it.
+        function drawCodeToCanvas(state, opts) {
+          opts = opts || {};
+          var fontPx = opts.fontPx || 36;
+          var lineH = opts.lineH || 54;
+          var padX = opts.padX || 70;
+          var padY = opts.padY || 60;
+          var weight = opts.weight || 500;
+          var font = weight + " " + fontPx + 'px "JetBrains Mono", monospace';
+
+          var lines = splitLines(state);
+          var measure = document.createElement("canvas").getContext("2d");
+          measure.font = font;
+          var maxW = 0;
+          for (var i = 0; i < lines.length; i++) {
+            var w = 0;
+            for (var j = 0; j < lines[i].length; j++)
+              w += measure.measureText(lines[i][j].content).width;
+            if (w > maxW) maxW = w;
+          }
+          var W = Math.max(2, Math.ceil(maxW + padX * 2));
+          var H = Math.max(2, Math.ceil(lines.length * lineH + padY * 2));
+
+          var canvas = document.createElement("canvas");
+          canvas.width = W;
+          canvas.height = H;
+          var ctx = canvas.getContext("2d");
+          if (opts.transparent) {
+            ctx.clearRect(0, 0, W, H);
+          } else {
+            ctx.fillStyle = opts.bg || "#0b0f17";
+            ctx.fillRect(0, 0, W, H);
+          }
+          ctx.textBaseline = "top";
+          ctx.font = font;
+          for (var li = 0; li < lines.length; li++) {
+            var x = padX;
+            var y = padY + li * lineH;
+            for (var k = 0; k < lines[li].length; k++) {
+              var tok = lines[li][k];
+              ctx.fillStyle = tok.color;
+              ctx.fillText(tok.content, x, y);
+              x += ctx.measureText(tok.content).width;
+            }
+          }
+          return {
+            canvas: canvas,
+            W: W,
+            H: H,
+            lines: lines.length,
+            lineH: lineH,
+            padY: padY,
+            fontPx: fontPx,
+          };
+        }
+
+        function fxParticles(THREE, scene, camera, renderer, state, st, tl, dur, seed) {
+          scene.background = new THREE.Color(0x05070b);
+          var code = drawCodeToCanvas(state, {
+            fontPx: 46,
+            lineH: 70,
+            padX: 70,
+            padY: 64,
+            weight: 700,
+          });
+          var cw = code.W;
+          var ch = code.H;
+          var data = code.canvas.getContext("2d").getImageData(0, 0, cw, ch).data;
+          var rng = mulberry32(((seed || 1) * 2654435761) >>> 0);
+
+          var worldW = 13.0;
+          var worldH = worldW * (ch / cw);
+
+          // sample glyph pixels (brighter than the dark bg) on a fixed grid
+          var step = 2;
+          var tx = [];
+          var col = [];
+          for (var y = 0; y < ch; y += step) {
+            for (var x = 0; x < cw; x += step) {
+              var idx = (y * cw + x) * 4;
+              var r = data[idx];
+              var g = data[idx + 1];
+              var b = data[idx + 2];
+              if (r + g + b < 120) continue; // skip background
+              tx.push((x / cw - 0.5) * worldW, -(y / ch - 0.5) * worldH, 0);
+              col.push(r / 255, g / 255, b / 255);
+            }
+          }
+          var n = tx.length / 3;
+
+          var positions = new Float32Array(n * 3);
+          var aOrigin = new Float32Array(n * 3);
+          var aTarget = new Float32Array(tx);
+          var aColor = new Float32Array(col);
+          var aDelay = new Float32Array(n);
+          for (var i = 0; i < n; i++) {
+            var sx = (rng() * 2 - 1) * worldW * 1.15;
+            var sy = (rng() * 2 - 1) * worldH * 1.7;
+            var sz = (rng() * 2 - 1) * 9.0 - 2.0;
+            aOrigin[i * 3] = sx;
+            aOrigin[i * 3 + 1] = sy;
+            aOrigin[i * 3 + 2] = sz;
+            positions[i * 3] = sx;
+            positions[i * 3 + 1] = sy;
+            positions[i * 3 + 2] = sz;
+            aDelay[i] = rng();
+          }
+
+          var geo = new THREE.BufferGeometry();
+          geo.setAttribute("position", new THREE.BufferAttribute(positions, 3));
+          geo.setAttribute("aOrigin", new THREE.BufferAttribute(aOrigin, 3));
+          geo.setAttribute("aTarget", new THREE.BufferAttribute(aTarget, 3));
+          geo.setAttribute("aColor", new THREE.BufferAttribute(aColor, 3));
+          geo.setAttribute("aDelay", new THREE.BufferAttribute(aDelay, 1));
+
+          var uniforms = { uProgress: { value: 0 }, uSize: { value: 3.4 } };
+          var mat = new THREE.ShaderMaterial({
+            uniforms: uniforms,
+            transparent: true,
+            depthTest: false,
+            depthWrite: false,
+            blending: THREE.NormalBlending,
+            vertexShader: [
+              "attribute vec3 aOrigin; attribute vec3 aTarget; attribute vec3 aColor; attribute float aDelay;",
+              "uniform float uProgress; uniform float uSize;",
+              "varying vec3 vColor; varying float vP;",
+              "void main(){",
+              "  float span = 0.62;",
+              "  float p = clamp((uProgress - aDelay*(1.0-span)) / span, 0.0, 1.0);",
+              "  p = p*p*(3.0-2.0*p);",
+              "  vec3 pos = mix(aOrigin, aTarget, p);",
+              "  vec4 mv = modelViewMatrix * vec4(pos, 1.0);",
+              "  gl_Position = projectionMatrix * mv;",
+              "  gl_PointSize = uSize * (60.0 / -mv.z) * (0.45 + 0.55*p);",
+              "  vColor = aColor; vP = p;",
+              "}",
+            ].join("\n"),
+            fragmentShader: [
+              "precision highp float;",
+              "varying vec3 vColor; varying float vP;",
+              "void main(){",
+              "  vec2 d = gl_PointCoord - 0.5;",
+              "  float r2 = dot(d, d);",
+              "  if (r2 > 0.25) discard;",
+              "  float a = smoothstep(0.25, 0.02, r2);",
+              // brighter & whiter in flight, resolves to true color as it lands
+              "  vec3 c = mix(vColor + vec3(0.32)*(1.0-vP), vColor, vP);",
+              "  gl_FragColor = vec4(c, a * (0.7 + 0.3*vP));",
+              "}",
+            ].join("\n"),
+          });
+
+          var pts = new THREE.Points(geo, mat);
+          scene.add(pts);
+
+          camera.position.set(0, 0, 10);
+          var vfov = (camera.fov * Math.PI) / 180;
+          var sa = 1920 / 1080;
+          var fitH = worldH / 2 / Math.tan(vfov / 2) / 0.78;
+          var fitW = worldW / 2 / (Math.tan(vfov / 2) * sa) / 0.78;
+          camera.position.z = Math.max(fitH, fitW);
+          camera.lookAt(0, 0, 0);
+
+          tl.to(uniforms.uProgress, { value: 1.0, duration: dur * 0.72, ease: "power2.out" }, 0);
+
+          // uProgress is tweened by GSAP; the boot loop's render() draws once per frame.
+          return function () {};
+        }
+
+        // ---- dispatch + boot ------------------------------------------------------
+        function buildEffect(THREE, scene, camera, renderer, spec, st, tl) {
+          var state = T[spec.seq].states[0];
+          var dur = spec.duration;
+          if (spec.effect === "particles")
+            return fxParticles(THREE, scene, camera, renderer, state, st, tl, dur, spec.seed);
+          return function () {};
+        }
+
+        // Free GPU resources (renderer, geometries, materials, textures) on page teardown.
+        // One-shot renders exit per job so nothing leaks there; this guards long-lived
+        // Studio/player sessions that reload. Fires only on unload — never during capture.
+        function disposeGL(renderer, scene) {
+          scene.traverse(function (o) {
+            if (o.geometry && o.geometry.dispose) o.geometry.dispose();
+            var mats = o.material ? (Array.isArray(o.material) ? o.material : [o.material]) : [];
+            mats.forEach(function (m) {
+              if (m.map && m.map.dispose) m.map.dispose();
+              if (
+                m.uniforms &&
+                m.uniforms.uTex &&
+                m.uniforms.uTex.value &&
+                m.uniforms.uTex.value.dispose
+              ) {
+                m.uniforms.uTex.value.dispose();
+              }
+              if (m.dispose) m.dispose();
+            });
+          });
+          if (renderer.dispose) renderer.dispose();
+        }
+
+        function go() {
+          var spec = window.__BLOCK;
+          var root = document.getElementById("root");
+          var glcanvas = document.getElementById("gl");
+          var W = 1920;
+          var H = 1080;
+          window.__timelines = window.__timelines || {};
+          var tl = gsap.timeline({ paused: true });
+          window.__timelines[spec.id] = tl; // register synchronously
+
+          var THREE = window.THREE;
+          var renderer = new THREE.WebGLRenderer({
+            canvas: glcanvas,
+            antialias: true,
+            alpha: false,
+            preserveDrawingBuffer: true,
+          });
+          renderer.setPixelRatio(1);
+          renderer.setSize(W, H, false);
+          var scene = new THREE.Scene();
+          var camera = new THREE.PerspectiveCamera(45, W / H, 0.1, 200);
+          var st = {};
+
+          document.fonts.ready.then(function () {
+            var renderFn = buildEffect(THREE, scene, camera, renderer, spec, st, tl);
+            function render() {
+              renderFn();
+              renderer.render(scene, camera);
+            }
+            tl.eventCallback("onUpdate", render);
+            var dur = parseFloat(root.dataset.duration) || tl.duration();
+            tl.to({}, { duration: dur }, 0); // pad to full composition length
+            render(); // paint frame 0
+            window.addEventListener("beforeunload", function () {
+              disposeGL(renderer, scene);
+            });
+          });
+        }
+
+        if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", go);
+        else go();
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/code-scroll/code-scroll.html b/docs/public/catalog/blocks/code-scroll/code-scroll.html
new file mode 100644
index 0000000000..55517a332c
--- /dev/null
+++ b/docs/public/catalog/blocks/code-scroll/code-scroll.html
@@ -0,0 +1,1560 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Code Scroll To Line</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #05070b;
+      }
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        font-family: "JetBrains Mono", monospace;
+        color: #e6edf3;
+      }
+      .bg-field {
+        position: absolute;
+        inset: 0;
+        background: radial-gradient(1200px 700px at 50% 18%, #0e1726 0%, #070b12 55%, #05070b 100%);
+      }
+      .bg-grid {
+        position: absolute;
+        inset: 0;
+        background-image:
+          linear-gradient(rgba(88, 166, 255, 0.05) 1px, transparent 1px),
+          linear-gradient(90deg, rgba(88, 166, 255, 0.05) 1px, transparent 1px);
+        background-size: 64px 64px;
+        mask-image: radial-gradient(1100px 620px at 50% 42%, #000 0%, transparent 78%);
+      }
+      .bg-glow {
+        position: absolute;
+        width: 900px;
+        height: 900px;
+        border-radius: 50%;
+        filter: blur(120px);
+        opacity: 0.5;
+      }
+      .bg-glow.a {
+        background: #1f6feb55;
+        left: -180px;
+        top: -200px;
+      }
+      .bg-glow.b {
+        background: #2ea04355;
+        right: -200px;
+        bottom: -260px;
+      }
+      .editor {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        width: 1380px;
+        height: 800px;
+        background: #0b0f17;
+        border: 1px solid #1d2733;
+        border-radius: 16px;
+        box-shadow:
+          0 40px 120px rgba(0, 0, 0, 0.6),
+          0 2px 0 rgba(255, 255, 255, 0.03) inset;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+      }
+      .titlebar {
+        height: 56px;
+        flex: 0 0 56px;
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        padding: 0 22px;
+        background: linear-gradient(#11161f, #0c111a);
+        border-bottom: 1px solid #1b2430;
+      }
+      .dots {
+        display: flex;
+        gap: 10px;
+      }
+      .dot {
+        width: 14px;
+        height: 14px;
+        border-radius: 50%;
+      }
+      .dot.r {
+        background: #ff5f57;
+      }
+      .dot.y {
+        background: #febc2e;
+      }
+      .dot.g {
+        background: #28c840;
+      }
+      .filename {
+        font-size: 19px;
+        color: #8b98a9;
+        letter-spacing: 0.2px;
+      }
+      .filename .accent {
+        color: #d6e2f0;
+      }
+      .code-surface {
+        position: relative;
+        flex: 1 1 auto;
+        overflow: hidden;
+      }
+      .scene {
+        position: absolute;
+        inset: 0;
+        opacity: 0;
+        will-change: opacity;
+      }
+      .code {
+        position: absolute;
+        top: 38px;
+        left: 0;
+        right: 0;
+        padding: 0 44px 0 104px;
+        font-size: 30px;
+        line-height: 46px;
+        font-variant-ligatures: none;
+        tab-size: 2;
+      }
+      .gutter {
+        position: absolute;
+        top: 38px;
+        left: 0;
+        width: 84px;
+        padding-right: 18px;
+        font-size: 30px;
+        line-height: 46px;
+        text-align: right;
+        color: #828c9b;
+        user-select: none;
+      }
+      .ln {
+        display: block;
+        height: 46px;
+      }
+      .line {
+        display: block;
+        min-height: 46px;
+        white-space: pre;
+        position: relative;
+        z-index: 1;
+      }
+      .tok {
+        display: inline-block;
+        white-space: pre;
+        will-change: transform, opacity;
+      }
+      .caret {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 3px;
+        height: 32px;
+        margin-top: 6px;
+        background: #58a6ff;
+        border-radius: 1px;
+        z-index: 3;
+      }
+      .hl-box {
+        position: absolute;
+        background: rgba(88, 166, 255, 0.16);
+        border-left: 3px solid #58a6ff;
+        border-radius: 6px;
+        z-index: 0;
+        overflow: hidden;
+      }
+      .diff-line {
+        display: block;
+        min-height: 0;
+        line-height: 46px;
+        white-space: pre;
+        position: relative;
+        overflow: hidden;
+        padding-left: 14px;
+      }
+      .diff-sign {
+        display: inline-block;
+        width: 22px;
+        color: #41506220;
+      }
+      .diff-del {
+        background: rgba(248, 81, 73, 0.12);
+        box-shadow: inset 3px 0 #f85149;
+      }
+      .diff-add {
+        background: rgba(63, 185, 80, 0.12);
+        box-shadow: inset 3px 0 #3fb950;
+      }
+      .diff-del .diff-sign {
+        color: #f85149;
+      }
+      .diff-add .diff-sign {
+        color: #3fb950;
+      }
+      .flight-block {
+        position: absolute;
+        white-space: pre;
+        font-size: 27px;
+        line-height: 40px;
+        padding: 11px 22px;
+        border-radius: 11px;
+        background: #0f1722;
+        border: 1px solid #233044;
+        box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5);
+        will-change: transform, opacity;
+      }
+      .flight-target {
+        position: absolute;
+        border: 1.5px dashed #2a3a4f;
+        border-radius: 14px;
+        opacity: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="code-scroll"
+      data-start="0"
+      data-duration="6"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="bg-field" data-layout-ignore></div>
+      <div class="bg-grid" data-layout-ignore></div>
+      <div class="bg-glow a" data-layout-ignore></div>
+      <div class="bg-glow b" data-layout-ignore></div>
+      <div class="editor" id="editor" data-layout-ignore>
+        <div class="titlebar">
+          <div class="dots">
+            <span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
+          </div>
+          <span class="filename"
+            ><span class="accent">fetchWithRetry.js</span> — Code Scroll To Line</span
+          >
+        </div>
+        <div class="code-surface" id="surface"></div>
+      </div>
+    </div>
+    <script>
+      window.__TOKENS = {
+        scroll: {
+          lang: "js",
+          theme: "github-dark",
+          bg: "#24292e",
+          fg: "#e1e4e8",
+          states: [
+            {
+              code: 'import { createClient } from "./client"\nimport { logger } from "./logger"\n\nconst RETRIES = 3\n\nexport async function fetchWithRetry(url, opts = {}) {\n  const client = createClient(opts)\n  let lastError = null\n\n  for (let attempt = 1; attempt <= RETRIES; attempt++) {\n    try {\n      const res = await client.get(url)\n      if (res.ok) return res.body\n      lastError = new Error("bad status " + res.status)\n    } catch (err) {\n      lastError = err\n      logger.warn("attempt " + attempt + " failed")\n    }\n    await sleep(attempt * 250)\n  }\n\n  throw lastError\n}',
+              tokens: [
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-0",
+                  content: "import",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-1",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-2",
+                  content: "{ createClient }",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-3",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-4",
+                  content: "from",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-5",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-6",
+                  content: '"./client"',
+                  color: "#9ECBFF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-7",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-8",
+                  content: "import",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-9",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-10",
+                  content: "{ logger }",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-11",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-12",
+                  content: "from",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-13",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-14",
+                  content: '"./logger"',
+                  color: "#9ECBFF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-15",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-16",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-17",
+                  content: "const",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-18",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-19",
+                  content: "RETRIES",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-20",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-21",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-22",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-23",
+                  content: "3",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-24",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-25",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-26",
+                  content: "export",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-27",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-28",
+                  content: "async",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-29",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-30",
+                  content: "function",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-31",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-32",
+                  content: "fetchWithRetry",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-33",
+                  content: "(",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-34",
+                  content: "url",
+                  color: "#FFAB70",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-35",
+                  content: ",",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-36",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-37",
+                  content: "opts",
+                  color: "#FFAB70",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-38",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-39",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-40",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-41",
+                  content: "{}) {",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-42",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-43",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-44",
+                  content: "const",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-45",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-46",
+                  content: "client",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-47",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-48",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-49",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-50",
+                  content: "createClient",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-51",
+                  content: "(opts)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-52",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-53",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-54",
+                  content: "let",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-55",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-56",
+                  content: "lastError",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-57",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-58",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-59",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-60",
+                  content: "null",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-61",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-62",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-63",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-64",
+                  content: "for",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-65",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-66",
+                  content: "(",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-67",
+                  content: "let",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-68",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-69",
+                  content: "attempt",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-70",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-71",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-72",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-73",
+                  content: "1",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-74",
+                  content: "; attempt",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-75",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-76",
+                  content: "<=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-77",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-78",
+                  content: "RETRIES",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-79",
+                  content: "; attempt",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-80",
+                  content: "++",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-81",
+                  content: ") {",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-82",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-83",
+                  content: "    ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-84",
+                  content: "try",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-85",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-86",
+                  content: "{",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-87",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-88",
+                  content: "      ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-89",
+                  content: "const",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-90",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-91",
+                  content: "res",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-92",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-93",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-94",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-95",
+                  content: "await",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-96",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-97",
+                  content: "client.",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-98",
+                  content: "get",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-99",
+                  content: "(url)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-100",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-101",
+                  content: "      ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-102",
+                  content: "if",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-103",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-104",
+                  content: "(res.ok)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-105",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-106",
+                  content: "return",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-107",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-108",
+                  content: "res.body",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-109",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-110",
+                  content: "      ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-111",
+                  content: "lastError",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-112",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-113",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-114",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-115",
+                  content: "new",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-116",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-117",
+                  content: "Error",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-118",
+                  content: "(",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-119",
+                  content: '"bad status "',
+                  color: "#9ECBFF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-120",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-121",
+                  content: "+",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-122",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-123",
+                  content: "res.status)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-124",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-125",
+                  content: "    ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-126",
+                  content: "}",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-127",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-128",
+                  content: "catch",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-129",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-130",
+                  content: "(err) {",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-131",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-132",
+                  content: "      ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-133",
+                  content: "lastError",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-134",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-135",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-136",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-137",
+                  content: "err",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-138",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-139",
+                  content: "      ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-140",
+                  content: "logger.",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-141",
+                  content: "warn",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-142",
+                  content: "(",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-143",
+                  content: '"attempt "',
+                  color: "#9ECBFF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-144",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-145",
+                  content: "+",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-146",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-147",
+                  content: "attempt",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-148",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-149",
+                  content: "+",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-150",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-151",
+                  content: '" failed"',
+                  color: "#9ECBFF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-152",
+                  content: ")",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-153",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-154",
+                  content: "    ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-155",
+                  content: "}",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-156",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-157",
+                  content: "    ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-158",
+                  content: "await",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-159",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-160",
+                  content: "sleep",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-161",
+                  content: "(attempt",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-162",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-163",
+                  content: "*",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-164",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-165",
+                  content: "250",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-166",
+                  content: ")",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-167",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-168",
+                  content: "  ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-169",
+                  content: "}",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-170",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-171",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-172",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-173",
+                  content: "throw",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-174",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-175",
+                  content: "lastError",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-176",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-177",
+                  content: "}",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-178",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+              ],
+            },
+          ],
+        },
+      };
+      window.__BLOCK = {
+        id: "code-scroll",
+        effect: "scroll",
+        seq: "scroll",
+        line: 12,
+        duration: 6,
+      };
+    </script>
+    <script>
+      // hf-code-anim.js — self-contained code-animation engine for HyperFrames registry blocks.
+      //
+      // Reuses Shiki Magic Move's baked output (window.__TOKENS, baked at author time) and
+      // drives the animation as a PAUSED GSAP timeline the HyperFrames engine seeks per frame —
+      // NOT CSS transitions (those break under non-sequential frame seeking). FLIP measurement
+      // runs once inside document.fonts.ready (glyph metrics must be final). Each block sets
+      // window.__BLOCK = { id, effect, seq, line?, duration } and includes this engine; the
+      // engine builds one scene that fills the composition and registers window.__timelines[id].
+      (function () {
+        "use strict";
+        var T = window.__TOKENS || {};
+
+        function lineDiv() {
+          var d = document.createElement("div");
+          d.className = "line";
+          return d;
+        }
+
+        // Render a code state's keyed tokens into codeEl as lines of inline-block .tok spans.
+        function renderState(codeEl, state) {
+          codeEl.textContent = "";
+          var keyToEl = new Map();
+          var line = lineDiv();
+          codeEl.appendChild(line);
+          for (var i = 0; i < state.tokens.length; i++) {
+            var t = state.tokens[i];
+            if (t.content === "\n") {
+              line = lineDiv();
+              codeEl.appendChild(line);
+              continue;
+            }
+            var span = document.createElement("span");
+            span.className = "tok";
+            span.textContent = t.content;
+            span.style.color = t.color;
+            if (t.fontStyle & 1) span.style.fontStyle = "italic";
+            if (t.fontStyle & 2) span.style.fontWeight = "700";
+            line.appendChild(span);
+            keyToEl.set(t.key, span);
+          }
+          var last = codeEl.lastChild;
+          if (last && last.className === "line" && last.children.length === 0)
+            codeEl.removeChild(last);
+          return keyToEl;
+        }
+
+        function rectsOf(keyToEl) {
+          var m = new Map();
+          keyToEl.forEach(function (el, k) {
+            var r = el.getBoundingClientRect();
+            m.set(k, { left: r.left, top: r.top });
+          });
+          return m;
+        }
+
+        function makeScene(surface, withGutter) {
+          var scene = document.createElement("div");
+          scene.className = "scene";
+          if (withGutter) {
+            var g = document.createElement("div");
+            g.className = "gutter";
+            scene.appendChild(g);
+          }
+          var code = document.createElement("div");
+          code.className = "code";
+          scene.appendChild(code);
+          surface.appendChild(scene);
+          return { scene: scene, code: code, gutter: scene.querySelector(".gutter") };
+        }
+
+        function fillGutter(g, n) {
+          var html = "";
+          for (var i = 1; i <= n; i++) html += '<span class="ln">' + i + "</span>";
+          g.innerHTML = html;
+        }
+
+        function splitLines(state) {
+          var lines = [{ text: "", tokens: [] }];
+          for (var i = 0; i < state.tokens.length; i++) {
+            var t = state.tokens[i];
+            if (t.content === "\n") {
+              lines.push({ text: "", tokens: [] });
+              continue;
+            }
+            var cur = lines[lines.length - 1];
+            cur.tokens.push(t);
+            cur.text += t.content;
+          }
+          if (lines.length && lines[lines.length - 1].tokens.length === 0) lines.pop();
+          return lines;
+        }
+
+        function lineDiff(a, b) {
+          var n = a.length;
+          var m = b.length;
+          var dp = [];
+          for (var i = 0; i <= n; i++) dp.push(new Array(m + 1).fill(0));
+          for (var i = n - 1; i >= 0; i--) {
+            for (var j = m - 1; j >= 0; j--) {
+              dp[i][j] =
+                a[i].text === b[j].text
+                  ? dp[i + 1][j + 1] + 1
+                  : Math.max(dp[i + 1][j], dp[i][j + 1]);
+            }
+          }
+          var ops = [];
+          var i = 0;
+          var j = 0;
+          while (i < n && j < m) {
+            if (a[i].text === b[j].text) {
+              ops.push({ type: "same", line: b[j] });
+              i++;
+              j++;
+            } else if (dp[i + 1][j] >= dp[i][j + 1]) {
+              ops.push({ type: "del", line: a[i] });
+              i++;
+            } else {
+              ops.push({ type: "add", line: b[j] });
+              j++;
+            }
+          }
+          while (i < n) ops.push({ type: "del", line: a[i++] });
+          while (j < m) ops.push({ type: "add", line: b[j++] });
+          return ops;
+        }
+
+        // ---- single-scene effect builders (fade in, play, hold to end) -------------
+        var FADE = 0.45;
+
+        function scroll(tl, surface, state, start, targetLine) {
+          var SCROLL = 1.7;
+          var parts = makeScene(surface, true);
+          var code = parts.code;
+          renderState(code, state);
+          var lines = code.querySelectorAll(".line");
+          fillGutter(parts.gutter, lines.length);
+          var surfRect = surface.getBoundingClientRect();
+          var idx = Math.max(0, Math.min(lines.length - 1, targetLine - 1));
+          var lr = lines[idx].getBoundingClientRect();
+          var lineCenter = lr.top + lr.height / 2 - surfRect.top;
+          var dy = surfRect.height * 0.5 - lineCenter;
+          var box = document.createElement("div");
+          box.className = "hl-box";
+          box.style.left = lines[idx].offsetLeft - 8 + "px";
+          box.style.top = lines[idx].offsetTop - 1 + "px";
+          box.style.width = lr.width + 18 + "px";
+          box.style.height = lr.height + 2 + "px";
+          code.insertBefore(box, code.firstChild);
+          tl.set(parts.scene, { opacity: 0 }, 0);
+          tl.to(parts.scene, { opacity: 1, duration: FADE, ease: "power1.out" }, start);
+          tl.set(box, { opacity: 0 }, 0);
+          var at = start + FADE + 0.35;
+          tl.fromTo(
+            [code, parts.gutter],
+            { y: 0 },
+            { y: dy, duration: SCROLL, ease: "power2.inOut" },
+            at,
+          );
+          var arrAt = at + SCROLL;
+          for (var i = 0; i < lines.length; i++) {
+            if (i === idx) continue;
+            tl.fromTo(
+              lines[i],
+              { opacity: 1 },
+              { opacity: 0.35, duration: 0.5, ease: "power1.out" },
+              arrAt - 0.35,
+            );
+          }
+          tl.to(box, { opacity: 1, duration: 0.45, ease: "power1.out" }, arrAt - 0.35);
+        }
+
+        function buildEffect(tl, surface, spec) {
+          var start = 0.45;
+          var seq = T[spec.seq];
+          if (spec.effect === "scroll") scroll(tl, surface, seq.states[0], start, spec.line || 1);
+        }
+
+        function go() {
+          var spec = window.__BLOCK;
+          var surface = document.getElementById("surface");
+          var root = document.getElementById("root");
+          window.__timelines = window.__timelines || {};
+          var tl = gsap.timeline({ paused: true });
+          // Build inside fonts.ready (glyph metrics must be final), then register.
+          // Register ONLY after the timeline is fully built: the runtime's
+          // sub-composition readiness gate treats "key present" as "ready" and
+          // nests the child once. An empty timeline registered before this build
+          // would be nested empty and never re-nested → blank render when used as
+          // a sub-composition. See the contract in engine frameCapture.ts.
+          document.fonts.ready.then(function () {
+            tl.from("#editor", { opacity: 0, scale: 0.985, duration: 0.5, ease: "power2.out" }, 0);
+            buildEffect(tl, surface, spec);
+            var dur = parseFloat(root.dataset.duration) || tl.duration();
+            tl.to({}, { duration: dur }, 0); // pad to full composition length
+            window.__timelines["code-scroll"] = tl; // register AFTER setup completes
+            if (typeof window.__hfForceTimelineRebind === "function") {
+              window.__hfForceTimelineRebind(); // re-nest now that we are populated
+            }
+          });
+        }
+
+        if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", go);
+        else go();
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/code-shader-dissolve/code-shader-dissolve.html b/docs/public/catalog/blocks/code-shader-dissolve/code-shader-dissolve.html
new file mode 100644
index 0000000000..45a13c4343
--- /dev/null
+++ b/docs/public/catalog/blocks/code-shader-dissolve/code-shader-dissolve.html
@@ -0,0 +1,535 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Code Shader Dissolve</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #05070b;
+      }
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+      }
+      #gl {
+        position: absolute;
+        inset: 0;
+        width: 1920px;
+        height: 1080px;
+        display: block;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="code-shader-dissolve"
+      data-start="0"
+      data-duration="7"
+      data-width="1920"
+      data-height="1080"
+    >
+      <canvas id="gl" width="1920" height="1080"></canvas>
+    </div>
+    <script>
+      window.__TOKENS = {
+        compile: {
+          lang: "js",
+          theme: "github-dark",
+          bg: "#24292e",
+          fg: "#e1e4e8",
+          states: [
+            {
+              code: "function compile(src) {\n  const ast = parse(src)\n  const ir = optimize(ast)\n  return emit(ir)\n}",
+              tokens: [
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-0",
+                  content: "function",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-1",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-2",
+                  content: "compile",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-3",
+                  content: "(",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-4",
+                  content: "src",
+                  color: "#FFAB70",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-5",
+                  content: ") {",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-6",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-7",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-8",
+                  content: "const",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-9",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-10",
+                  content: "ast",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-11",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-12",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-13",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-14",
+                  content: "parse",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-15",
+                  content: "(src)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-16",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-17",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-18",
+                  content: "const",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-19",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-20",
+                  content: "ir",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-21",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-22",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-23",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-24",
+                  content: "optimize",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-25",
+                  content: "(ast)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-26",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-27",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-28",
+                  content: "return",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-29",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-30",
+                  content: "emit",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-31",
+                  content: "(ir)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-32",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-33",
+                  content: "}",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-34",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+              ],
+            },
+          ],
+        },
+      };
+      window.__BLOCK = {
+        id: "code-shader-dissolve",
+        effect: "dissolve",
+        seq: "compile",
+        duration: 7,
+        seed: 11,
+      };
+    </script>
+    <script>
+      // hf-code-anim-gl.js — WebGL code-animation engine for the "crazy" Code Animations blocks.
+      //
+      // Bridges the baked Shiki tokens (window.__TOKENS) into Three.js: the tokens are drawn once
+      // to an offscreen 2D canvas (a CanvasTexture), which then drives a lit 3D slab, a dissolve
+      // shader, or a GPU particle system. Determinism per the project contract:
+      //   - render only via tl.eventCallback("onUpdate", …) + one initial render() — never rAF
+      //   - all randomness from a seeded mulberry32 — never Math.random / Date.now
+      //   - canvas drawn once after document.fonts.ready (final glyph metrics)
+      //   - paused GSAP timeline registered on window.__timelines[id]; HF seeks it per frame
+      //
+      // Each block sets window.__BLOCK = { id, effect, seq, duration, seed } and includes this engine.
+      (function () {
+        "use strict";
+        var T = window.__TOKENS || {};
+
+        // ---- seeded PRNG (no Math.random) -----------------------------------------
+        function mulberry32(a) {
+          return function () {
+            a |= 0;
+            a = (a + 0x6d2b79f5) | 0;
+            var t = Math.imul(a ^ (a >>> 15), 1 | a);
+            t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+            return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+          };
+        }
+
+        // ---- split a token state into lines of {content,color} --------------------
+        function splitLines(state) {
+          var lines = [[]];
+          for (var i = 0; i < state.tokens.length; i++) {
+            var t = state.tokens[i];
+            if (t.content === "\n") {
+              lines.push([]);
+              continue;
+            }
+            lines[lines.length - 1].push(t);
+          }
+          while (lines.length && lines[lines.length - 1].length === 0) lines.pop();
+          return lines;
+        }
+
+        // ---- THE BRIDGE: draw baked tokens to an offscreen 2D canvas ---------------
+        // Returns { canvas, W, H, lines, lineH, padY, fontPx } so effects can sample it.
+        function drawCodeToCanvas(state, opts) {
+          opts = opts || {};
+          var fontPx = opts.fontPx || 36;
+          var lineH = opts.lineH || 54;
+          var padX = opts.padX || 70;
+          var padY = opts.padY || 60;
+          var weight = opts.weight || 500;
+          var font = weight + " " + fontPx + 'px "JetBrains Mono", monospace';
+
+          var lines = splitLines(state);
+          var measure = document.createElement("canvas").getContext("2d");
+          measure.font = font;
+          var maxW = 0;
+          for (var i = 0; i < lines.length; i++) {
+            var w = 0;
+            for (var j = 0; j < lines[i].length; j++)
+              w += measure.measureText(lines[i][j].content).width;
+            if (w > maxW) maxW = w;
+          }
+          var W = Math.max(2, Math.ceil(maxW + padX * 2));
+          var H = Math.max(2, Math.ceil(lines.length * lineH + padY * 2));
+
+          var canvas = document.createElement("canvas");
+          canvas.width = W;
+          canvas.height = H;
+          var ctx = canvas.getContext("2d");
+          if (opts.transparent) {
+            ctx.clearRect(0, 0, W, H);
+          } else {
+            ctx.fillStyle = opts.bg || "#0b0f17";
+            ctx.fillRect(0, 0, W, H);
+          }
+          ctx.textBaseline = "top";
+          ctx.font = font;
+          for (var li = 0; li < lines.length; li++) {
+            var x = padX;
+            var y = padY + li * lineH;
+            for (var k = 0; k < lines[li].length; k++) {
+              var tok = lines[li][k];
+              ctx.fillStyle = tok.color;
+              ctx.fillText(tok.content, x, y);
+              x += ctx.measureText(tok.content).width;
+            }
+          }
+          return {
+            canvas: canvas,
+            W: W,
+            H: H,
+            lines: lines.length,
+            lineH: lineH,
+            padY: padY,
+            fontPx: fontPx,
+          };
+        }
+
+        function fxDissolve(THREE, scene, camera, renderer, state, st, tl, dur, seed) {
+          scene.background = new THREE.Color(0x05070b);
+          var code = drawCodeToCanvas(state, {
+            fontPx: 40,
+            lineH: 60,
+            padX: 90,
+            padY: 80,
+            weight: 600,
+          });
+          var tex = new THREE.CanvasTexture(code.canvas);
+          tex.minFilter = THREE.LinearFilter;
+          tex.magFilter = THREE.LinearFilter;
+          tex.generateMipmaps = false;
+
+          var aspect = code.W / code.H;
+          var planeH = 6.6;
+          var planeW = planeH * aspect;
+
+          var uniforms = {
+            uTex: { value: tex },
+            uProgress: { value: 0 },
+            uSeed: { value: (seed || 1) * 13.37 },
+          };
+          var mat = new THREE.ShaderMaterial({
+            uniforms: uniforms,
+            transparent: true,
+            vertexShader: [
+              "varying vec2 vUv;",
+              "void main(){ vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0); }",
+            ].join("\n"),
+            fragmentShader: [
+              "precision highp float;",
+              "uniform sampler2D uTex;",
+              "uniform float uProgress;",
+              "uniform float uSeed;",
+              "varying vec2 vUv;",
+              "float hash(vec2 p){ p=fract(p*vec2(123.34,456.21)); p+=dot(p,p+45.32); return fract(p.x*p.y); }",
+              "float noise(vec2 p){ vec2 i=floor(p),f=fract(p); float a=hash(i),b=hash(i+vec2(1.,0.)),c=hash(i+vec2(0.,1.)),d=hash(i+vec2(1.,1.)); vec2 u=f*f*(3.-2.*f); return mix(mix(a,b,u.x),mix(c,d,u.x),u.y); }",
+              "void main(){",
+              "  vec2 uv = vUv;",
+              // multi-octave seeded noise field
+              "  float n = noise(uv*16.0+uSeed)*0.6 + noise(uv*48.0+uSeed*1.7)*0.3 + noise(uv*120.0+uSeed*2.3)*0.1;",
+              "  float edge = 0.12;",
+              "  float reveal = smoothstep(n-edge, n+edge, uProgress);", // 0 hidden -> 1 shown
+              // chromatic fringe strongest at the dissolving edge
+              "  float band = reveal*(1.0-reveal)*4.0;",
+              "  float off = band*0.010;",
+              "  float r = texture2D(uTex, uv+vec2(off,0.0)).r;",
+              "  float g = texture2D(uTex, uv).g;",
+              "  float b = texture2D(uTex, uv-vec2(off,0.0)).b;",
+              "  vec3 codeCol = vec3(r,g,b);",
+              // additive cyan edge glow along the dissolve front
+              "  vec3 glow = vec3(0.30,0.72,1.0) * band * 0.9;",
+              "  vec3 outc = codeCol*reveal + glow;",
+              "  float a = max(reveal, band*0.8);",
+              "  gl_FragColor = vec4(outc, a);",
+              "}",
+            ].join("\n"),
+          });
+
+          var plane = new THREE.Mesh(new THREE.PlaneGeometry(planeW, planeH), mat);
+          scene.add(plane);
+
+          camera.position.set(0, 0, 10);
+          var vfov = (camera.fov * Math.PI) / 180;
+          var screenAspect = 1920 / 1080;
+          var fitH = planeH / 2 / Math.tan(vfov / 2) / 0.82;
+          var fitW = planeW / 2 / (Math.tan(vfov / 2) * screenAspect) / 0.82;
+          camera.position.z = Math.max(fitH, fitW);
+          camera.lookAt(0, 0, 0);
+
+          // compile in, then hold crisp. Overshoot to 1.15 so even max-noise pixels
+          // (n up to ~1.0, edge 0.12) fully resolve — no leftover specks at rest.
+          tl.to(uniforms.uProgress, { value: 1.15, duration: dur * 0.62, ease: "power1.inOut" }, 0);
+
+          // uProgress is tweened by GSAP; the boot loop's render() draws once per frame.
+          return function () {};
+        }
+
+        // ---- dispatch + boot ------------------------------------------------------
+        function buildEffect(THREE, scene, camera, renderer, spec, st, tl) {
+          var state = T[spec.seq].states[0];
+          var dur = spec.duration;
+          if (spec.effect === "dissolve")
+            return fxDissolve(THREE, scene, camera, renderer, state, st, tl, dur, spec.seed);
+          return function () {};
+        }
+
+        // Free GPU resources (renderer, geometries, materials, textures) on page teardown.
+        // One-shot renders exit per job so nothing leaks there; this guards long-lived
+        // Studio/player sessions that reload. Fires only on unload — never during capture.
+        function disposeGL(renderer, scene) {
+          scene.traverse(function (o) {
+            if (o.geometry && o.geometry.dispose) o.geometry.dispose();
+            var mats = o.material ? (Array.isArray(o.material) ? o.material : [o.material]) : [];
+            mats.forEach(function (m) {
+              if (m.map && m.map.dispose) m.map.dispose();
+              if (
+                m.uniforms &&
+                m.uniforms.uTex &&
+                m.uniforms.uTex.value &&
+                m.uniforms.uTex.value.dispose
+              ) {
+                m.uniforms.uTex.value.dispose();
+              }
+              if (m.dispose) m.dispose();
+            });
+          });
+          if (renderer.dispose) renderer.dispose();
+        }
+
+        function go() {
+          var spec = window.__BLOCK;
+          var root = document.getElementById("root");
+          var glcanvas = document.getElementById("gl");
+          var W = 1920;
+          var H = 1080;
+          window.__timelines = window.__timelines || {};
+          var tl = gsap.timeline({ paused: true });
+          window.__timelines[spec.id] = tl; // register synchronously
+
+          var THREE = window.THREE;
+          var renderer = new THREE.WebGLRenderer({
+            canvas: glcanvas,
+            antialias: true,
+            alpha: false,
+            preserveDrawingBuffer: true,
+          });
+          renderer.setPixelRatio(1);
+          renderer.setSize(W, H, false);
+          var scene = new THREE.Scene();
+          var camera = new THREE.PerspectiveCamera(45, W / H, 0.1, 200);
+          var st = {};
+
+          document.fonts.ready.then(function () {
+            var renderFn = buildEffect(THREE, scene, camera, renderer, spec, st, tl);
+            function render() {
+              renderFn();
+              renderer.render(scene, camera);
+            }
+            tl.eventCallback("onUpdate", render);
+            var dur = parseFloat(root.dataset.duration) || tl.duration();
+            tl.to({}, { duration: dur }, 0); // pad to full composition length
+            render(); // paint frame 0
+            window.addEventListener("beforeunload", function () {
+              disposeGL(renderer, scene);
+            });
+          });
+        }
+
+        if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", go);
+        else go();
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/code-snippet-apple-terminal-basic/code-snippet-apple-terminal-basic.html b/docs/public/catalog/blocks/code-snippet-apple-terminal-basic/code-snippet-apple-terminal-basic.html
new file mode 100644
index 0000000000..3d7290423c
--- /dev/null
+++ b/docs/public/catalog/blocks/code-snippet-apple-terminal-basic/code-snippet-apple-terminal-basic.html
@@ -0,0 +1,249 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Apple Terminal Basic</title>
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #ececec;
+        font-family: "SF Mono", Menlo, Monaco, Consolas, "Courier New", monospace;
+      }
+
+      #scene {
+        width: 1920px;
+        height: 1080px;
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: linear-gradient(135deg, #e8e8e8 0%, #d8d8d8 100%);
+      }
+
+      .terminal-window {
+        width: 1400px;
+        height: 700px;
+        border-radius: 10px;
+        overflow: hidden;
+        box-shadow:
+          0 30px 80px rgba(0, 0, 0, 0.25),
+          0 10px 30px rgba(0, 0, 0, 0.15);
+        display: flex;
+        flex-direction: column;
+      }
+
+      .titlebar {
+        height: 38px;
+        background: #ececec;
+        display: flex;
+        align-items: center;
+        padding: 0 14px;
+        gap: 0;
+        flex-shrink: 0;
+        border-bottom: 1px solid #d0d0d0;
+        position: relative;
+      }
+
+      .traffic-lights {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+      }
+
+      .traffic-lights span {
+        width: 13px;
+        height: 13px;
+        border-radius: 50%;
+        display: inline-block;
+      }
+
+      .traffic-lights .close {
+        background: #ff5f57;
+        border: 1px solid #e0443e;
+      }
+
+      .traffic-lights .minimize {
+        background: #ffbd2e;
+        border: 1px solid #dfa123;
+      }
+
+      .traffic-lights .fullscreen {
+        background: #28c840;
+        border: 1px solid #1aab29;
+      }
+
+      .window-title {
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        font-size: 13px;
+        color: #333333;
+        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
+        font-weight: 500;
+        letter-spacing: -0.1px;
+      }
+
+      .terminal-canvas {
+        flex: 1;
+        background: #ffffff;
+        padding: 18px 20px;
+        overflow: hidden;
+        font-size: 14px;
+        line-height: 1.6;
+        color: #000000;
+      }
+
+      .output-lines {
+        margin-bottom: 4px;
+      }
+
+      .output-line {
+        display: block;
+        white-space: pre;
+        opacity: 0;
+        color: #000000;
+      }
+
+      .output-line.bold {
+        font-weight: bold;
+        color: #000000;
+      }
+
+      .input-line {
+        display: flex;
+        align-items: center;
+        white-space: pre;
+      }
+
+      .prompt {
+        color: #000000;
+        font-weight: bold;
+        user-select: none;
+      }
+
+      .typed-command {
+        color: #000000;
+      }
+
+      .cursor-block {
+        display: inline-block;
+        width: 9px;
+        height: 16px;
+        background: #000000;
+        vertical-align: text-bottom;
+        margin-left: 1px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="scene"
+      data-composition-id="code-snippet-apple-terminal-basic"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="terminal-window">
+        <div class="titlebar">
+          <div class="traffic-lights">
+            <span class="close"></span>
+            <span class="minimize"></span>
+            <span class="fullscreen"></span>
+          </div>
+          <span class="window-title">bash — 80×24</span>
+        </div>
+        <div class="terminal-canvas">
+          <div class="output-lines">
+            <span class="output-line">Last login: Mon Jun 2 09:14:22 on ttys001</span>
+            <span class="output-line">total 48</span>
+            <span class="output-line bold">drwxr-xr-x 8 user staff 256 Jun 2 09:10 .</span>
+            <span class="output-line">drwxr-xr-x 42 user staff 1344 Jun 1 18:22 ..</span>
+            <span class="output-line">-rw-r--r-- 1 user staff 872 May 30 14:05 README.md</span>
+            <span class="output-line bold">drwxr-xr-x 5 user staff 160 Jun 2 09:10 dist</span>
+            <span class="output-line bold"
+              >drwxr-xr-x 12 user staff 384 Jun 2 09:10 node_modules</span
+            >
+            <span class="output-line">-rw-r--r-- 1 user staff 1204 Jun 2 09:08 package.json</span>
+            <span class="output-line bold">drwxr-xr-x 6 user staff 192 Jun 2 09:10 src</span>
+            <span class="output-line">-rw-r--r-- 1 user staff 348 May 29 11:42 tsconfig.json</span>
+          </div>
+          <div class="input-line">
+            <span class="prompt">user@Mac ~ % </span><span class="typed-command"></span
+            ><span class="cursor-block"></span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      const command = "ls -la";
+      const typedEl = document.querySelector(".typed-command");
+      const cursorEl = document.querySelector(".cursor-block");
+      const outputLines = document.querySelectorAll(".output-line");
+
+      const tl = gsap.timeline({ paused: true });
+
+      // Phase 1 (0–0.5s): hold on empty prompt
+      tl.set(typedEl, { text: "" }, 0);
+
+      // Phase 2 (0.5–2s): type command char by char
+      const charDuration = 1.5 / command.length;
+      command.split("").forEach((char, i) => {
+        tl.add(
+          () => {
+            typedEl.textContent = command.slice(0, i + 1);
+          },
+          0.5 + i * charDuration,
+        );
+      });
+
+      // Phase 3 (2.2s): hide cursor, show first output line (login message)
+      tl.set(cursorEl, { opacity: 0 }, 2.2);
+      tl.set(outputLines[0], { opacity: 1 }, 2.3);
+
+      // Phase 4 (2.5s): clear command, show ls output line by line
+      tl.add(() => {
+        typedEl.textContent = "";
+      }, 2.5);
+
+      outputLines.forEach((line, i) => {
+        if (i === 0) return; // already shown
+        tl.set(line, { opacity: 1 }, 2.8 + i * 0.08);
+      });
+
+      // Phase 5 (4s): new prompt with blinking cursor
+      tl.add(() => {
+        const inputLine = document.querySelector(".input-line");
+        const newPrompt = document.createElement("div");
+        newPrompt.className = "input-line";
+        newPrompt.innerHTML =
+          '<span class="prompt">user@Mac ~ % </span><span class="typed-command"></span><span class="cursor-block" id="final-cursor"></span>';
+        inputLine.style.display = "none";
+        inputLine.parentNode.appendChild(newPrompt);
+      }, 4.0);
+
+      // Phase 6 (4.2–10s): blink cursor 3 times then stop
+      const blinkTimes = [4.2, 4.6, 5.0, 5.4, 5.8, 6.2];
+      blinkTimes.forEach((t, i) => {
+        tl.add(() => {
+          const fc = document.getElementById("final-cursor");
+          if (fc) fc.style.opacity = i % 2 === 0 ? "0" : "1";
+        }, t);
+      });
+      tl.add(() => {
+        const fc = document.getElementById("final-cursor");
+        if (fc) fc.style.opacity = "1";
+      }, 6.6);
+
+      window.__timelines["code-snippet-apple-terminal-basic"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/code-snippet-apple-terminal-clear-dark/code-snippet-apple-terminal-clear-dark.html b/docs/public/catalog/blocks/code-snippet-apple-terminal-clear-dark/code-snippet-apple-terminal-clear-dark.html
new file mode 100644
index 0000000000..cb909740f0
--- /dev/null
+++ b/docs/public/catalog/blocks/code-snippet-apple-terminal-clear-dark/code-snippet-apple-terminal-clear-dark.html
@@ -0,0 +1,244 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Apple Terminal Clear Dark</title>
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #1a1a1a;
+        font-family: "SF Mono", Menlo, Monaco, Consolas, "Courier New", monospace;
+      }
+
+      #scene {
+        width: 1920px;
+        height: 1080px;
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: linear-gradient(135deg, #1a1a1a 0%, #111111 100%);
+      }
+
+      .terminal-window {
+        width: 1400px;
+        height: 700px;
+        border-radius: 10px;
+        overflow: hidden;
+        box-shadow:
+          0 30px 80px rgba(0, 0, 0, 0.7),
+          0 10px 30px rgba(0, 0, 0, 0.5);
+        display: flex;
+        flex-direction: column;
+      }
+
+      .titlebar {
+        height: 38px;
+        background: rgba(0, 0, 0, 0.4);
+        display: flex;
+        align-items: center;
+        padding: 0 14px;
+        flex-shrink: 0;
+        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+        position: relative;
+      }
+
+      .traffic-lights {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+      }
+
+      .traffic-lights span {
+        width: 13px;
+        height: 13px;
+        border-radius: 50%;
+        display: inline-block;
+      }
+
+      .traffic-lights .close {
+        background: #ff5f57;
+        border: 1px solid #e0443e;
+      }
+
+      .traffic-lights .minimize {
+        background: #ffbd2e;
+        border: 1px solid #dfa123;
+      }
+
+      .traffic-lights .fullscreen {
+        background: #28c840;
+        border: 1px solid #1aab29;
+      }
+
+      .window-title {
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        font-size: 13px;
+        color: #ffffff;
+        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
+        font-weight: 500;
+        letter-spacing: -0.1px;
+      }
+
+      .terminal-canvas {
+        flex: 1;
+        background: rgba(0, 0, 0, 0.7);
+        padding: 18px 20px;
+        overflow: hidden;
+        font-size: 14px;
+        line-height: 1.6;
+        color: #ffffff;
+      }
+
+      .output-lines {
+        margin-bottom: 4px;
+      }
+
+      .output-line {
+        display: block;
+        white-space: pre;
+        opacity: 0;
+        color: #ffffff;
+      }
+
+      .output-line.bold {
+        font-weight: bold;
+        color: #ffffff;
+      }
+
+      .output-line.dim {
+        color: rgba(255, 255, 255, 0.6);
+      }
+
+      .input-line {
+        display: flex;
+        align-items: center;
+        white-space: pre;
+      }
+
+      .prompt {
+        color: #888888;
+        font-weight: bold;
+        user-select: none;
+      }
+
+      .typed-command {
+        color: #ffffff;
+      }
+
+      .cursor-block {
+        display: inline-block;
+        width: 9px;
+        height: 16px;
+        background: #888888;
+        vertical-align: text-bottom;
+        margin-left: 1px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="scene"
+      data-composition-id="code-snippet-apple-terminal-clear-dark"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="terminal-window">
+        <div class="titlebar">
+          <div class="traffic-lights">
+            <span class="close"></span>
+            <span class="minimize"></span>
+            <span class="fullscreen"></span>
+          </div>
+          <span class="window-title">bash — 80×24</span>
+        </div>
+        <div class="terminal-canvas">
+          <div class="output-lines">
+            <span class="output-line dim">Last login: Mon Jun 2 09:14:22 on ttys002</span>
+            <span class="output-line">Scanning dependencies...</span>
+            <span class="output-line">Found 3 vulnerabilities (1 moderate, 2 low)</span>
+            <span class="output-line dim"> package: lodash@4.17.20</span>
+            <span class="output-line dim"> severity: moderate</span>
+            <span class="output-line dim"> fix: lodash@4.17.21</span>
+            <span class="output-line dim"> package: minimist@1.2.5</span>
+            <span class="output-line dim"> severity: low</span>
+            <span class="output-line dim"> fix: minimist@1.2.6</span>
+            <span class="output-line bold">Run `npm audit fix` to fix them.</span>
+          </div>
+          <div class="input-line">
+            <span class="prompt">user@Mac ~ % </span><span class="typed-command"></span
+            ><span class="cursor-block"></span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      const command = "npm audit";
+      const typedEl = document.querySelector(".typed-command");
+      const cursorEl = document.querySelector(".cursor-block");
+      const outputLines = document.querySelectorAll(".output-line");
+
+      const tl = gsap.timeline({ paused: true });
+
+      tl.set(typedEl, { text: "" }, 0);
+
+      const charDuration = 1.5 / command.length;
+      command.split("").forEach((char, i) => {
+        tl.add(
+          () => {
+            typedEl.textContent = command.slice(0, i + 1);
+          },
+          0.5 + i * charDuration,
+        );
+      });
+
+      tl.set(cursorEl, { opacity: 0 }, 2.2);
+      tl.set(outputLines[0], { opacity: 1 }, 2.3);
+
+      tl.add(() => {
+        typedEl.textContent = "";
+      }, 2.5);
+
+      outputLines.forEach((line, i) => {
+        if (i === 0) return;
+        tl.set(line, { opacity: 1 }, 2.8 + i * 0.1);
+      });
+
+      tl.add(() => {
+        const inputLine = document.querySelector(".input-line");
+        const newPrompt = document.createElement("div");
+        newPrompt.className = "input-line";
+        newPrompt.innerHTML =
+          '<span class="prompt">user@Mac ~ % </span><span class="typed-command"></span><span class="cursor-block" id="final-cursor"></span>';
+        inputLine.style.display = "none";
+        inputLine.parentNode.appendChild(newPrompt);
+      }, 4.2);
+
+      const blinkTimes = [4.4, 4.8, 5.2, 5.6, 6.0, 6.4];
+      blinkTimes.forEach((t, i) => {
+        tl.add(() => {
+          const fc = document.getElementById("final-cursor");
+          if (fc) fc.style.opacity = i % 2 === 0 ? "0" : "1";
+        }, t);
+      });
+      tl.add(() => {
+        const fc = document.getElementById("final-cursor");
+        if (fc) fc.style.opacity = "1";
+      }, 6.8);
+
+      window.__timelines["code-snippet-apple-terminal-clear-dark"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/code-snippet-apple-terminal-clear-light/code-snippet-apple-terminal-clear-light.html b/docs/public/catalog/blocks/code-snippet-apple-terminal-clear-light/code-snippet-apple-terminal-clear-light.html
new file mode 100644
index 0000000000..7f3f7769bc
--- /dev/null
+++ b/docs/public/catalog/blocks/code-snippet-apple-terminal-clear-light/code-snippet-apple-terminal-clear-light.html
@@ -0,0 +1,244 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Apple Terminal Clear Light</title>
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        font-family: "SF Mono", Menlo, Monaco, Consolas, "Courier New", monospace;
+      }
+
+      #scene {
+        width: 1920px;
+        height: 1080px;
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
+      }
+
+      .terminal-window {
+        width: 1400px;
+        height: 700px;
+        border-radius: 10px;
+        overflow: hidden;
+        box-shadow:
+          0 30px 80px rgba(0, 0, 0, 0.18),
+          0 10px 30px rgba(0, 0, 0, 0.1);
+        display: flex;
+        flex-direction: column;
+      }
+
+      .titlebar {
+        height: 38px;
+        background: rgba(255, 255, 255, 0.4);
+        display: flex;
+        align-items: center;
+        padding: 0 14px;
+        flex-shrink: 0;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+        position: relative;
+        backdrop-filter: blur(10px);
+      }
+
+      .traffic-lights {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+      }
+
+      .traffic-lights span {
+        width: 13px;
+        height: 13px;
+        border-radius: 50%;
+        display: inline-block;
+      }
+
+      .traffic-lights .close {
+        background: #ff5f57;
+        border: 1px solid #e0443e;
+      }
+
+      .traffic-lights .minimize {
+        background: #ffbd2e;
+        border: 1px solid #dfa123;
+      }
+
+      .traffic-lights .fullscreen {
+        background: #28c840;
+        border: 1px solid #1aab29;
+      }
+
+      .window-title {
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        font-size: 13px;
+        color: #333333;
+        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
+        font-weight: 500;
+        letter-spacing: -0.1px;
+      }
+
+      .terminal-canvas {
+        flex: 1;
+        background: rgba(255, 255, 255, 0.7);
+        padding: 18px 20px;
+        overflow: hidden;
+        font-size: 14px;
+        line-height: 1.6;
+        color: #000000;
+        backdrop-filter: blur(8px);
+      }
+
+      .output-lines {
+        margin-bottom: 4px;
+      }
+
+      .output-line {
+        display: block;
+        white-space: pre;
+        opacity: 0;
+        color: #000000;
+      }
+
+      .output-line.bold {
+        font-weight: bold;
+      }
+
+      .output-line.muted {
+        color: #666666;
+      }
+
+      .input-line {
+        display: flex;
+        align-items: center;
+        white-space: pre;
+      }
+
+      .prompt {
+        color: #888888;
+        font-weight: bold;
+        user-select: none;
+      }
+
+      .typed-command {
+        color: #000000;
+      }
+
+      .cursor-block {
+        display: inline-block;
+        width: 9px;
+        height: 16px;
+        background: #888888;
+        vertical-align: text-bottom;
+        margin-left: 1px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="scene"
+      data-composition-id="code-snippet-apple-terminal-clear-light"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="terminal-window">
+        <div class="titlebar">
+          <div class="traffic-lights">
+            <span class="close"></span>
+            <span class="minimize"></span>
+            <span class="fullscreen"></span>
+          </div>
+          <span class="window-title">bash — 80×24</span>
+        </div>
+        <div class="terminal-canvas">
+          <div class="output-lines">
+            <span class="output-line muted">Last login: Mon Jun 2 09:14:22 on ttys003</span>
+            <span class="output-line bold">git log --oneline -8</span>
+            <span class="output-line">a3f2c19 fix: correct off-by-one in pagination</span>
+            <span class="output-line">b7e8d04 feat: add dark mode toggle</span>
+            <span class="output-line">c1a9f55 refactor: extract auth helpers</span>
+            <span class="output-line">d4e2b31 test: add unit tests for parser</span>
+            <span class="output-line">e6c8a72 docs: update API reference</span>
+            <span class="output-line">f9b1d44 chore: bump dependencies</span>
+            <span class="output-line">2a7e890 feat: implement search endpoint</span>
+            <span class="output-line">3c5f012 init: project bootstrap</span>
+          </div>
+          <div class="input-line">
+            <span class="prompt">user@Mac myproject % </span><span class="typed-command"></span
+            ><span class="cursor-block"></span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      const command = "git log --oneline -8";
+      const typedEl = document.querySelector(".typed-command");
+      const cursorEl = document.querySelector(".cursor-block");
+      const outputLines = document.querySelectorAll(".output-line");
+
+      const tl = gsap.timeline({ paused: true });
+
+      tl.set(typedEl, { text: "" }, 0);
+
+      const charDuration = 1.5 / command.length;
+      command.split("").forEach((char, i) => {
+        tl.add(
+          () => {
+            typedEl.textContent = command.slice(0, i + 1);
+          },
+          0.5 + i * charDuration,
+        );
+      });
+
+      tl.set(cursorEl, { opacity: 0 }, 2.2);
+      tl.set(outputLines[0], { opacity: 1 }, 2.3);
+
+      tl.add(() => {
+        typedEl.textContent = "";
+      }, 2.5);
+
+      outputLines.forEach((line, i) => {
+        if (i === 0) return;
+        tl.set(line, { opacity: 1 }, 2.8 + i * 0.09);
+      });
+
+      tl.add(() => {
+        const inputLine = document.querySelector(".input-line");
+        const newPrompt = document.createElement("div");
+        newPrompt.className = "input-line";
+        newPrompt.innerHTML =
+          '<span class="prompt">user@Mac myproject % </span><span class="typed-command"></span><span class="cursor-block" id="final-cursor"></span>';
+        inputLine.style.display = "none";
+        inputLine.parentNode.appendChild(newPrompt);
+      }, 4.0);
+
+      const blinkTimes = [4.2, 4.6, 5.0, 5.4, 5.8, 6.2];
+      blinkTimes.forEach((t, i) => {
+        tl.add(() => {
+          const fc = document.getElementById("final-cursor");
+          if (fc) fc.style.opacity = i % 2 === 0 ? "0" : "1";
+        }, t);
+      });
+      tl.add(() => {
+        const fc = document.getElementById("final-cursor");
+        if (fc) fc.style.opacity = "1";
+      }, 6.6);
+
+      window.__timelines["code-snippet-apple-terminal-clear-light"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/code-snippet-apple-terminal-grass/code-snippet-apple-terminal-grass.html b/docs/public/catalog/blocks/code-snippet-apple-terminal-grass/code-snippet-apple-terminal-grass.html
new file mode 100644
index 0000000000..4556df094a
--- /dev/null
+++ b/docs/public/catalog/blocks/code-snippet-apple-terminal-grass/code-snippet-apple-terminal-grass.html
@@ -0,0 +1,243 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Apple Terminal Grass</title>
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000000;
+        font-family: "SF Mono", Menlo, Monaco, Consolas, "Courier New", monospace;
+      }
+
+      #scene {
+        width: 1920px;
+        height: 1080px;
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: radial-gradient(ellipse at center, #0a1a0a 0%, #000000 70%);
+      }
+
+      .terminal-window {
+        width: 1400px;
+        height: 700px;
+        border-radius: 10px;
+        overflow: hidden;
+        box-shadow:
+          0 30px 80px rgba(0, 193, 0, 0.15),
+          0 10px 30px rgba(0, 0, 0, 0.8);
+        display: flex;
+        flex-direction: column;
+      }
+
+      .titlebar {
+        height: 38px;
+        background: #1c1c1c;
+        display: flex;
+        align-items: center;
+        padding: 0 14px;
+        flex-shrink: 0;
+        border-bottom: 1px solid #00c100;
+        position: relative;
+      }
+
+      .traffic-lights {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+      }
+
+      .traffic-lights span {
+        width: 13px;
+        height: 13px;
+        border-radius: 50%;
+        display: inline-block;
+      }
+
+      .traffic-lights .close {
+        background: #ff5f57;
+        border: 1px solid #e0443e;
+      }
+
+      .traffic-lights .minimize {
+        background: #ffbd2e;
+        border: 1px solid #dfa123;
+      }
+
+      .traffic-lights .fullscreen {
+        background: #28c840;
+        border: 1px solid #1aab29;
+      }
+
+      .window-title {
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        font-size: 13px;
+        color: #00c100;
+        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
+        font-weight: 500;
+        letter-spacing: -0.1px;
+      }
+
+      .terminal-canvas {
+        flex: 1;
+        background: #000000;
+        padding: 18px 20px;
+        overflow: hidden;
+        font-size: 14px;
+        line-height: 1.6;
+        color: #00c100;
+      }
+
+      .output-lines {
+        margin-bottom: 4px;
+      }
+
+      .output-line {
+        display: block;
+        white-space: pre;
+        opacity: 0;
+        color: #00c100;
+      }
+
+      .output-line.bold {
+        font-weight: bold;
+        color: #00c100;
+      }
+
+      .output-line.dim {
+        color: #006600;
+      }
+
+      .input-line {
+        display: flex;
+        align-items: center;
+        white-space: pre;
+      }
+
+      .prompt {
+        color: #00c100;
+        font-weight: bold;
+        user-select: none;
+      }
+
+      .typed-command {
+        color: #00c100;
+      }
+
+      .cursor-block {
+        display: inline-block;
+        width: 9px;
+        height: 16px;
+        background: #00c100;
+        vertical-align: text-bottom;
+        margin-left: 1px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="scene"
+      data-composition-id="code-snippet-apple-terminal-grass"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="terminal-window">
+        <div class="titlebar">
+          <div class="traffic-lights">
+            <span class="close"></span>
+            <span class="minimize"></span>
+            <span class="fullscreen"></span>
+          </div>
+          <span class="window-title">bash — 80×24</span>
+        </div>
+        <div class="terminal-canvas">
+          <div class="output-lines">
+            <span class="output-line dim">Last login: Mon Jun 2 09:14:22 on ttys004</span>
+            <span class="output-line">Running test suite...</span>
+            <span class="output-line dim"> ✓ should initialize with defaults (2ms)</span>
+            <span class="output-line dim"> ✓ should parse config correctly (4ms)</span>
+            <span class="output-line dim"> ✓ should handle empty input (1ms)</span>
+            <span class="output-line dim"> ✓ should reject invalid tokens (3ms)</span>
+            <span class="output-line dim"> ✓ should emit events on change (5ms)</span>
+            <span class="output-line dim"> ✓ should clean up on destroy (2ms)</span>
+            <span class="output-line bold"> 6 passing (18ms)</span>
+          </div>
+          <div class="input-line">
+            <span class="prompt">user@Mac ~ % </span><span class="typed-command"></span
+            ><span class="cursor-block"></span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      const command = "npm test";
+      const typedEl = document.querySelector(".typed-command");
+      const cursorEl = document.querySelector(".cursor-block");
+      const outputLines = document.querySelectorAll(".output-line");
+
+      const tl = gsap.timeline({ paused: true });
+
+      tl.set(typedEl, { text: "" }, 0);
+
+      const charDuration = 1.5 / command.length;
+      command.split("").forEach((char, i) => {
+        tl.add(
+          () => {
+            typedEl.textContent = command.slice(0, i + 1);
+          },
+          0.5 + i * charDuration,
+        );
+      });
+
+      tl.set(cursorEl, { opacity: 0 }, 2.2);
+      tl.set(outputLines[0], { opacity: 1 }, 2.3);
+
+      tl.add(() => {
+        typedEl.textContent = "";
+      }, 2.5);
+
+      outputLines.forEach((line, i) => {
+        if (i === 0) return;
+        tl.set(line, { opacity: 1 }, 2.8 + i * 0.12);
+      });
+
+      tl.add(() => {
+        const inputLine = document.querySelector(".input-line");
+        const newPrompt = document.createElement("div");
+        newPrompt.className = "input-line";
+        newPrompt.innerHTML =
+          '<span class="prompt">user@Mac ~ % </span><span class="typed-command"></span><span class="cursor-block" id="final-cursor"></span>';
+        inputLine.style.display = "none";
+        inputLine.parentNode.appendChild(newPrompt);
+      }, 4.0);
+
+      const blinkTimes = [4.2, 4.6, 5.0, 5.4, 5.8, 6.2];
+      blinkTimes.forEach((t, i) => {
+        tl.add(() => {
+          const fc = document.getElementById("final-cursor");
+          if (fc) fc.style.opacity = i % 2 === 0 ? "0" : "1";
+        }, t);
+      });
+      tl.add(() => {
+        const fc = document.getElementById("final-cursor");
+        if (fc) fc.style.opacity = "1";
+      }, 6.6);
+
+      window.__timelines["code-snippet-apple-terminal-grass"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/code-snippet-apple-terminal-homebrew/code-snippet-apple-terminal-homebrew.html b/docs/public/catalog/blocks/code-snippet-apple-terminal-homebrew/code-snippet-apple-terminal-homebrew.html
new file mode 100644
index 0000000000..b7169c1b8f
--- /dev/null
+++ b/docs/public/catalog/blocks/code-snippet-apple-terminal-homebrew/code-snippet-apple-terminal-homebrew.html
@@ -0,0 +1,248 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Apple Terminal Homebrew</title>
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000000;
+        font-family: "SF Mono", Menlo, Monaco, Consolas, "Courier New", monospace;
+      }
+
+      #scene {
+        width: 1920px;
+        height: 1080px;
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: radial-gradient(ellipse at center, #0d1a0d 0%, #000000 70%);
+      }
+
+      .terminal-window {
+        width: 1400px;
+        height: 700px;
+        border-radius: 10px;
+        overflow: hidden;
+        box-shadow:
+          0 30px 80px rgba(0, 207, 0, 0.18),
+          0 10px 30px rgba(0, 0, 0, 0.85);
+        display: flex;
+        flex-direction: column;
+      }
+
+      .titlebar {
+        height: 38px;
+        background: #1c1c1c;
+        display: flex;
+        align-items: center;
+        padding: 0 14px;
+        flex-shrink: 0;
+        border-bottom: 1px solid #006900;
+        position: relative;
+      }
+
+      .traffic-lights {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+      }
+
+      .traffic-lights span {
+        width: 13px;
+        height: 13px;
+        border-radius: 50%;
+        display: inline-block;
+      }
+
+      .traffic-lights .close {
+        background: #ff5f57;
+        border: 1px solid #e0443e;
+      }
+
+      .traffic-lights .minimize {
+        background: #ffbd2e;
+        border: 1px solid #dfa123;
+      }
+
+      .traffic-lights .fullscreen {
+        background: #28c840;
+        border: 1px solid #1aab29;
+      }
+
+      .window-title {
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        font-size: 13px;
+        color: #00cf00;
+        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
+        font-weight: 500;
+        letter-spacing: -0.1px;
+      }
+
+      .terminal-canvas {
+        flex: 1;
+        background: #000000;
+        padding: 18px 20px;
+        overflow: hidden;
+        font-size: 14px;
+        line-height: 1.6;
+        color: #00cf00;
+      }
+
+      .output-lines {
+        margin-bottom: 4px;
+      }
+
+      .output-line {
+        display: block;
+        white-space: pre;
+        opacity: 0;
+        color: #00cf00;
+      }
+
+      .output-line.bold {
+        font-weight: bold;
+        color: #00de00;
+      }
+
+      .output-line.dim {
+        color: #006600;
+      }
+
+      .output-line.bright {
+        color: #48f800;
+        font-weight: bold;
+      }
+
+      .input-line {
+        display: flex;
+        align-items: center;
+        white-space: pre;
+      }
+
+      .prompt {
+        color: #48f800;
+        font-weight: bold;
+        user-select: none;
+      }
+
+      .typed-command {
+        color: #00cf00;
+      }
+
+      .cursor-block {
+        display: inline-block;
+        width: 9px;
+        height: 16px;
+        background: #48f800;
+        vertical-align: text-bottom;
+        margin-left: 1px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="scene"
+      data-composition-id="code-snippet-apple-terminal-homebrew"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="terminal-window">
+        <div class="titlebar">
+          <div class="traffic-lights">
+            <span class="close"></span>
+            <span class="minimize"></span>
+            <span class="fullscreen"></span>
+          </div>
+          <span class="window-title">bash — 80×24</span>
+        </div>
+        <div class="terminal-canvas">
+          <div class="output-lines">
+            <span class="output-line dim">Last login: Mon Jun 2 09:14:22 on ttys005</span>
+            <span class="output-line">==> Updating Homebrew...</span>
+            <span class="output-line dim">Already up-to-date.</span>
+            <span class="output-line">==> Outdated formulae</span>
+            <span class="output-line">node 20.11.0 -> 22.3.0</span>
+            <span class="output-line">python 3.11.6 -> 3.12.4</span>
+            <span class="output-line">git 2.43.0 -> 2.45.2</span>
+            <span class="output-line">ffmpeg 6.1.1 -> 7.0.0</span>
+            <span class="output-line bright">==> Run `brew upgrade` to update 4 formulae.</span>
+          </div>
+          <div class="input-line">
+            <span class="prompt">user@Mac ~ % </span><span class="typed-command"></span
+            ><span class="cursor-block"></span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      const command = "brew outdated";
+      const typedEl = document.querySelector(".typed-command");
+      const cursorEl = document.querySelector(".cursor-block");
+      const outputLines = document.querySelectorAll(".output-line");
+
+      const tl = gsap.timeline({ paused: true });
+
+      tl.set(typedEl, { text: "" }, 0);
+
+      const charDuration = 1.5 / command.length;
+      command.split("").forEach((char, i) => {
+        tl.add(
+          () => {
+            typedEl.textContent = command.slice(0, i + 1);
+          },
+          0.5 + i * charDuration,
+        );
+      });
+
+      tl.set(cursorEl, { opacity: 0 }, 2.2);
+      tl.set(outputLines[0], { opacity: 1 }, 2.3);
+
+      tl.add(() => {
+        typedEl.textContent = "";
+      }, 2.5);
+
+      outputLines.forEach((line, i) => {
+        if (i === 0) return;
+        tl.set(line, { opacity: 1 }, 2.8 + i * 0.1);
+      });
+
+      tl.add(() => {
+        const inputLine = document.querySelector(".input-line");
+        const newPrompt = document.createElement("div");
+        newPrompt.className = "input-line";
+        newPrompt.innerHTML =
+          '<span class="prompt">user@Mac ~ % </span><span class="typed-command"></span><span class="cursor-block" id="final-cursor"></span>';
+        inputLine.style.display = "none";
+        inputLine.parentNode.appendChild(newPrompt);
+      }, 4.2);
+
+      const blinkTimes = [4.4, 4.8, 5.2, 5.6, 6.0, 6.4];
+      blinkTimes.forEach((t, i) => {
+        tl.add(() => {
+          const fc = document.getElementById("final-cursor");
+          if (fc) fc.style.opacity = i % 2 === 0 ? "0" : "1";
+        }, t);
+      });
+      tl.add(() => {
+        const fc = document.getElementById("final-cursor");
+        if (fc) fc.style.opacity = "1";
+      }, 6.8);
+
+      window.__timelines["code-snippet-apple-terminal-homebrew"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/code-snippet-apple-terminal-man-page/code-snippet-apple-terminal-man-page.html b/docs/public/catalog/blocks/code-snippet-apple-terminal-man-page/code-snippet-apple-terminal-man-page.html
new file mode 100644
index 0000000000..16935d5389
--- /dev/null
+++ b/docs/public/catalog/blocks/code-snippet-apple-terminal-man-page/code-snippet-apple-terminal-man-page.html
@@ -0,0 +1,248 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Apple Terminal Man Page</title>
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        font-family: "SF Mono", Menlo, Monaco, Consolas, "Courier New", monospace;
+      }
+
+      #scene {
+        width: 1920px;
+        height: 1080px;
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: linear-gradient(135deg, #ede87a 0%, #ddd566 100%);
+      }
+
+      .terminal-window {
+        width: 1400px;
+        height: 700px;
+        border-radius: 10px;
+        overflow: hidden;
+        box-shadow:
+          0 30px 80px rgba(0, 0, 0, 0.2),
+          0 10px 30px rgba(0, 0, 0, 0.12);
+        display: flex;
+        flex-direction: column;
+      }
+
+      .titlebar {
+        height: 38px;
+        background: #f0e680;
+        display: flex;
+        align-items: center;
+        padding: 0 14px;
+        flex-shrink: 0;
+        border-bottom: 1px solid #c8be40;
+        position: relative;
+      }
+
+      .traffic-lights {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+      }
+
+      .traffic-lights span {
+        width: 13px;
+        height: 13px;
+        border-radius: 50%;
+        display: inline-block;
+      }
+
+      .traffic-lights .close {
+        background: #ff5f57;
+        border: 1px solid #e0443e;
+      }
+
+      .traffic-lights .minimize {
+        background: #ffbd2e;
+        border: 1px solid #dfa123;
+      }
+
+      .traffic-lights .fullscreen {
+        background: #28c840;
+        border: 1px solid #1aab29;
+      }
+
+      .window-title {
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        font-size: 13px;
+        color: #333333;
+        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
+        font-weight: 500;
+        letter-spacing: -0.1px;
+      }
+
+      .terminal-canvas {
+        flex: 1;
+        background: #fef49c;
+        padding: 18px 20px;
+        overflow: hidden;
+        font-size: 14px;
+        line-height: 1.6;
+        color: #000000;
+      }
+
+      .output-lines {
+        margin-bottom: 4px;
+      }
+
+      .output-line {
+        display: block;
+        white-space: pre;
+        opacity: 0;
+        color: #000000;
+      }
+
+      .output-line.bold {
+        font-weight: bold;
+      }
+
+      .output-line.indent {
+        padding-left: 24px;
+        color: #222222;
+      }
+
+      .output-line.section {
+        font-weight: bold;
+        margin-top: 2px;
+      }
+
+      .input-line {
+        display: flex;
+        align-items: center;
+        white-space: pre;
+      }
+
+      .prompt {
+        color: #000000;
+        font-weight: bold;
+        user-select: none;
+      }
+
+      .typed-command {
+        color: #000000;
+      }
+
+      .cursor-block {
+        display: inline-block;
+        width: 9px;
+        height: 16px;
+        background: #000000;
+        vertical-align: text-bottom;
+        margin-left: 1px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="scene"
+      data-composition-id="code-snippet-apple-terminal-man-page"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="terminal-window">
+        <div class="titlebar">
+          <div class="traffic-lights">
+            <span class="close"></span>
+            <span class="minimize"></span>
+            <span class="fullscreen"></span>
+          </div>
+          <span class="window-title">man — 80×24</span>
+        </div>
+        <div class="terminal-canvas">
+          <div class="output-lines">
+            <span class="output-line section">CURL(1) General Commands Manual CURL(1)</span>
+            <span class="output-line"></span>
+            <span class="output-line section">NAME</span>
+            <span class="output-line indent">curl -- transfer a URL</span>
+            <span class="output-line"></span>
+            <span class="output-line section">SYNOPSIS</span>
+            <span class="output-line indent">curl [options / URLs]</span>
+            <span class="output-line"></span>
+            <span class="output-line section">DESCRIPTION</span>
+            <span class="output-line indent"
+              >curl is a tool for transferring data from or to a server using URLs.</span
+            >
+          </div>
+          <div class="input-line">
+            <span class="prompt">user@Mac ~ % </span><span class="typed-command"></span
+            ><span class="cursor-block"></span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      const command = "man curl";
+      const typedEl = document.querySelector(".typed-command");
+      const cursorEl = document.querySelector(".cursor-block");
+      const outputLines = document.querySelectorAll(".output-line");
+
+      const tl = gsap.timeline({ paused: true });
+
+      tl.set(typedEl, { text: "" }, 0);
+
+      const charDuration = 1.5 / command.length;
+      command.split("").forEach((char, i) => {
+        tl.add(
+          () => {
+            typedEl.textContent = command.slice(0, i + 1);
+          },
+          0.5 + i * charDuration,
+        );
+      });
+
+      tl.set(cursorEl, { opacity: 0 }, 2.2);
+
+      tl.add(() => {
+        typedEl.textContent = "";
+      }, 2.4);
+
+      outputLines.forEach((line, i) => {
+        tl.set(line, { opacity: 1 }, 2.5 + i * 0.1);
+      });
+
+      tl.add(() => {
+        const inputLine = document.querySelector(".input-line");
+        const newPrompt = document.createElement("div");
+        newPrompt.className = "input-line";
+        newPrompt.innerHTML =
+          '<span class="prompt">user@Mac ~ % </span><span class="typed-command"></span><span class="cursor-block" id="final-cursor"></span>';
+        inputLine.style.display = "none";
+        inputLine.parentNode.appendChild(newPrompt);
+      }, 4.0);
+
+      const blinkTimes = [4.2, 4.6, 5.0, 5.4, 5.8, 6.2];
+      blinkTimes.forEach((t, i) => {
+        tl.add(() => {
+          const fc = document.getElementById("final-cursor");
+          if (fc) fc.style.opacity = i % 2 === 0 ? "0" : "1";
+        }, t);
+      });
+      tl.add(() => {
+        const fc = document.getElementById("final-cursor");
+        if (fc) fc.style.opacity = "1";
+      }, 6.6);
+
+      window.__timelines["code-snippet-apple-terminal-man-page"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/code-snippet-apple-terminal-novel/code-snippet-apple-terminal-novel.html b/docs/public/catalog/blocks/code-snippet-apple-terminal-novel/code-snippet-apple-terminal-novel.html
new file mode 100644
index 0000000000..0478047adf
--- /dev/null
+++ b/docs/public/catalog/blocks/code-snippet-apple-terminal-novel/code-snippet-apple-terminal-novel.html
@@ -0,0 +1,244 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Apple Terminal Novel</title>
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        font-family: "SF Mono", Menlo, Monaco, Consolas, "Courier New", monospace;
+      }
+
+      #scene {
+        width: 1920px;
+        height: 1080px;
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: linear-gradient(135deg, #c9a86c 0%, #b8955a 100%);
+      }
+
+      .terminal-window {
+        width: 1400px;
+        height: 700px;
+        border-radius: 10px;
+        overflow: hidden;
+        box-shadow:
+          0 30px 80px rgba(62, 41, 0, 0.3),
+          0 10px 30px rgba(0, 0, 0, 0.15);
+        display: flex;
+        flex-direction: column;
+      }
+
+      .titlebar {
+        height: 38px;
+        background: #c9a86c;
+        display: flex;
+        align-items: center;
+        padding: 0 14px;
+        flex-shrink: 0;
+        border-bottom: 1px solid #a88040;
+        position: relative;
+      }
+
+      .traffic-lights {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+      }
+
+      .traffic-lights span {
+        width: 13px;
+        height: 13px;
+        border-radius: 50%;
+        display: inline-block;
+      }
+
+      .traffic-lights .close {
+        background: #ff5f57;
+        border: 1px solid #e0443e;
+      }
+
+      .traffic-lights .minimize {
+        background: #ffbd2e;
+        border: 1px solid #dfa123;
+      }
+
+      .traffic-lights .fullscreen {
+        background: #28c840;
+        border: 1px solid #1aab29;
+      }
+
+      .window-title {
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        font-size: 13px;
+        color: #3e2900;
+        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
+        font-weight: 600;
+        letter-spacing: -0.1px;
+      }
+
+      .terminal-canvas {
+        flex: 1;
+        background: #dfc18a;
+        padding: 18px 20px;
+        overflow: hidden;
+        font-size: 14px;
+        line-height: 1.6;
+        color: #3e2900;
+      }
+
+      .output-lines {
+        margin-bottom: 4px;
+      }
+
+      .output-line {
+        display: block;
+        white-space: pre;
+        opacity: 0;
+        color: #3e2900;
+      }
+
+      .output-line.bold {
+        font-weight: bold;
+        color: #3e2900;
+      }
+
+      .output-line.muted {
+        color: #7a5a20;
+      }
+
+      .input-line {
+        display: flex;
+        align-items: center;
+        white-space: pre;
+      }
+
+      .prompt {
+        color: #3e2900;
+        font-weight: bold;
+        user-select: none;
+      }
+
+      .typed-command {
+        color: #3e2900;
+      }
+
+      .cursor-block {
+        display: inline-block;
+        width: 9px;
+        height: 16px;
+        background: #3e2900;
+        vertical-align: text-bottom;
+        margin-left: 1px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="scene"
+      data-composition-id="code-snippet-apple-terminal-novel"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="terminal-window">
+        <div class="titlebar">
+          <div class="traffic-lights">
+            <span class="close"></span>
+            <span class="minimize"></span>
+            <span class="fullscreen"></span>
+          </div>
+          <span class="window-title">bash — 80×24</span>
+        </div>
+        <div class="terminal-canvas">
+          <div class="output-lines">
+            <span class="output-line muted">Last login: Mon Jun 2 09:14:22 on ttys006</span>
+            <span class="output-line muted">Python 3.12.4 (main, Jun 6 2024, 18:26:44)</span>
+            <span class="output-line muted"
+              >Type "help", "copyright", "credits" or "license" for more information.</span
+            >
+            <span class="output-line bold">>>> import hyperframes</span>
+            <span class="output-line bold">>>> hf = hyperframes.Composition("intro.html")</span>
+            <span class="output-line">>>> hf.duration</span>
+            <span class="output-line">12.0</span>
+            <span class="output-line">>>> hf.dimensions</span>
+            <span class="output-line">Dimensions(width=1920, height=1080)</span>
+          </div>
+          <div class="input-line">
+            <span class="prompt">user@Mac ~ % </span><span class="typed-command"></span
+            ><span class="cursor-block"></span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      const command = "python3";
+      const typedEl = document.querySelector(".typed-command");
+      const cursorEl = document.querySelector(".cursor-block");
+      const outputLines = document.querySelectorAll(".output-line");
+
+      const tl = gsap.timeline({ paused: true });
+
+      tl.set(typedEl, { text: "" }, 0);
+
+      const charDuration = 1.5 / command.length;
+      command.split("").forEach((char, i) => {
+        tl.add(
+          () => {
+            typedEl.textContent = command.slice(0, i + 1);
+          },
+          0.5 + i * charDuration,
+        );
+      });
+
+      tl.set(cursorEl, { opacity: 0 }, 2.2);
+      tl.set(outputLines[0], { opacity: 1 }, 2.3);
+
+      tl.add(() => {
+        typedEl.textContent = "";
+      }, 2.5);
+
+      outputLines.forEach((line, i) => {
+        if (i === 0) return;
+        tl.set(line, { opacity: 1 }, 2.8 + i * 0.1);
+      });
+
+      tl.add(() => {
+        const inputLine = document.querySelector(".input-line");
+        const newPrompt = document.createElement("div");
+        newPrompt.className = "input-line";
+        newPrompt.innerHTML =
+          '<span class="prompt">user@Mac ~ % </span><span class="typed-command"></span><span class="cursor-block" id="final-cursor"></span>';
+        inputLine.style.display = "none";
+        inputLine.parentNode.appendChild(newPrompt);
+      }, 4.2);
+
+      const blinkTimes = [4.4, 4.8, 5.2, 5.6, 6.0, 6.4];
+      blinkTimes.forEach((t, i) => {
+        tl.add(() => {
+          const fc = document.getElementById("final-cursor");
+          if (fc) fc.style.opacity = i % 2 === 0 ? "0" : "1";
+        }, t);
+      });
+      tl.add(() => {
+        const fc = document.getElementById("final-cursor");
+        if (fc) fc.style.opacity = "1";
+      }, 6.8);
+
+      window.__timelines["code-snippet-apple-terminal-novel"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/code-snippet-apple-terminal-ocean/code-snippet-apple-terminal-ocean.html b/docs/public/catalog/blocks/code-snippet-apple-terminal-ocean/code-snippet-apple-terminal-ocean.html
new file mode 100644
index 0000000000..d165071494
--- /dev/null
+++ b/docs/public/catalog/blocks/code-snippet-apple-terminal-ocean/code-snippet-apple-terminal-ocean.html
@@ -0,0 +1,253 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Apple Terminal Ocean</title>
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #1a3f9e;
+        font-family: "SF Mono", Menlo, Monaco, Consolas, "Courier New", monospace;
+      }
+
+      #scene {
+        width: 1920px;
+        height: 1080px;
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: radial-gradient(ellipse at center, #224fbe 0%, #0e2878 100%);
+      }
+
+      .terminal-window {
+        width: 1400px;
+        height: 700px;
+        border-radius: 10px;
+        overflow: hidden;
+        box-shadow:
+          0 30px 80px rgba(0, 0, 0, 0.6),
+          0 10px 30px rgba(34, 79, 190, 0.3);
+        display: flex;
+        flex-direction: column;
+      }
+
+      .titlebar {
+        height: 38px;
+        background: #1a3f9e;
+        display: flex;
+        align-items: center;
+        padding: 0 14px;
+        flex-shrink: 0;
+        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
+        position: relative;
+      }
+
+      .traffic-lights {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+      }
+
+      .traffic-lights span {
+        width: 13px;
+        height: 13px;
+        border-radius: 50%;
+        display: inline-block;
+      }
+
+      .traffic-lights .close {
+        background: #ff5f57;
+        border: 1px solid #e0443e;
+      }
+
+      .traffic-lights .minimize {
+        background: #ffbd2e;
+        border: 1px solid #dfa123;
+      }
+
+      .traffic-lights .fullscreen {
+        background: #28c840;
+        border: 1px solid #1aab29;
+      }
+
+      .window-title {
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        font-size: 13px;
+        color: #ffffff;
+        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
+        font-weight: 500;
+        letter-spacing: -0.1px;
+      }
+
+      .terminal-canvas {
+        flex: 1;
+        background: #224fbe;
+        padding: 18px 20px;
+        overflow: hidden;
+        font-size: 14px;
+        line-height: 1.6;
+        color: #ffffff;
+      }
+
+      .output-lines {
+        margin-bottom: 4px;
+      }
+
+      .output-line {
+        display: block;
+        white-space: pre;
+        opacity: 0;
+        color: #ffffff;
+      }
+
+      .output-line.bold {
+        font-weight: bold;
+        color: #ffffff;
+      }
+
+      .output-line.dim {
+        color: rgba(255, 255, 255, 0.65);
+      }
+
+      .output-line.success {
+        color: #7fffb3;
+        font-weight: bold;
+      }
+
+      .input-line {
+        display: flex;
+        align-items: center;
+        white-space: pre;
+      }
+
+      .prompt {
+        color: rgba(255, 255, 255, 0.8);
+        font-weight: bold;
+        user-select: none;
+      }
+
+      .typed-command {
+        color: #ffffff;
+      }
+
+      .cursor-block {
+        display: inline-block;
+        width: 9px;
+        height: 16px;
+        background: #ffffff;
+        vertical-align: text-bottom;
+        margin-left: 1px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="scene"
+      data-composition-id="code-snippet-apple-terminal-ocean"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="terminal-window">
+        <div class="titlebar">
+          <div class="traffic-lights">
+            <span class="close"></span>
+            <span class="minimize"></span>
+            <span class="fullscreen"></span>
+          </div>
+          <span class="window-title">bash — 80×24</span>
+        </div>
+        <div class="terminal-canvas">
+          <div class="output-lines">
+            <span class="output-line dim">Last login: Mon Jun 2 09:14:22 on ttys007</span>
+            <span class="output-line bold">docker ps</span>
+            <span class="output-line dim">CONTAINER ID IMAGE COMMAND CREATED</span>
+            <span class="output-line"
+              >a1b2c3d4e5f6 nginx:latest "/docker-entrypoint.…" 2 hours ago</span
+            >
+            <span class="output-line"
+              >b2c3d4e5f6a7 postgres:15 "docker-entrypoint.s…" 2 hours ago</span
+            >
+            <span class="output-line"
+              >c3d4e5f6a7b8 redis:alpine "docker-entrypoint.s…" 2 hours ago</span
+            >
+            <span class="output-line success">3 containers running</span>
+            <span class="output-line dim">Use 'docker logs CONTAINER' to view output</span>
+          </div>
+          <div class="input-line">
+            <span class="prompt">user@Mac ~ % </span><span class="typed-command"></span
+            ><span class="cursor-block"></span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      const command = "docker ps";
+      const typedEl = document.querySelector(".typed-command");
+      const cursorEl = document.querySelector(".cursor-block");
+      const outputLines = document.querySelectorAll(".output-line");
+
+      const tl = gsap.timeline({ paused: true });
+
+      tl.set(typedEl, { text: "" }, 0);
+
+      const charDuration = 1.5 / command.length;
+      command.split("").forEach((char, i) => {
+        tl.add(
+          () => {
+            typedEl.textContent = command.slice(0, i + 1);
+          },
+          0.5 + i * charDuration,
+        );
+      });
+
+      tl.set(cursorEl, { opacity: 0 }, 2.2);
+      tl.set(outputLines[0], { opacity: 1 }, 2.3);
+
+      tl.add(() => {
+        typedEl.textContent = "";
+      }, 2.5);
+
+      outputLines.forEach((line, i) => {
+        if (i === 0) return;
+        tl.set(line, { opacity: 1 }, 2.8 + i * 0.1);
+      });
+
+      tl.add(() => {
+        const inputLine = document.querySelector(".input-line");
+        const newPrompt = document.createElement("div");
+        newPrompt.className = "input-line";
+        newPrompt.innerHTML =
+          '<span class="prompt">user@Mac ~ % </span><span class="typed-command"></span><span class="cursor-block" id="final-cursor"></span>';
+        inputLine.style.display = "none";
+        inputLine.parentNode.appendChild(newPrompt);
+      }, 4.2);
+
+      const blinkTimes = [4.4, 4.8, 5.2, 5.6, 6.0, 6.4];
+      blinkTimes.forEach((t, i) => {
+        tl.add(() => {
+          const fc = document.getElementById("final-cursor");
+          if (fc) fc.style.opacity = i % 2 === 0 ? "0" : "1";
+        }, t);
+      });
+      tl.add(() => {
+        const fc = document.getElementById("final-cursor");
+        if (fc) fc.style.opacity = "1";
+      }, 6.8);
+
+      window.__timelines["code-snippet-apple-terminal-ocean"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/code-snippet-apple-terminal-pro/code-snippet-apple-terminal-pro.html b/docs/public/catalog/blocks/code-snippet-apple-terminal-pro/code-snippet-apple-terminal-pro.html
new file mode 100644
index 0000000000..830fdfef27
--- /dev/null
+++ b/docs/public/catalog/blocks/code-snippet-apple-terminal-pro/code-snippet-apple-terminal-pro.html
@@ -0,0 +1,247 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Apple Terminal Pro</title>
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000000;
+        font-family: "SF Mono", Menlo, Monaco, Consolas, "Courier New", monospace;
+      }
+
+      #scene {
+        width: 1920px;
+        height: 1080px;
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: radial-gradient(ellipse at center, #141414 0%, #000000 70%);
+      }
+
+      .terminal-window {
+        width: 1400px;
+        height: 700px;
+        border-radius: 10px;
+        overflow: hidden;
+        box-shadow:
+          0 30px 80px rgba(136, 255, 103, 0.08),
+          0 10px 30px rgba(0, 0, 0, 0.9);
+        display: flex;
+        flex-direction: column;
+      }
+
+      .titlebar {
+        height: 38px;
+        background: #1c1c1c;
+        display: flex;
+        align-items: center;
+        padding: 0 14px;
+        flex-shrink: 0;
+        border-bottom: 1px solid #333333;
+        position: relative;
+      }
+
+      .traffic-lights {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+      }
+
+      .traffic-lights span {
+        width: 13px;
+        height: 13px;
+        border-radius: 50%;
+        display: inline-block;
+      }
+
+      .traffic-lights .close {
+        background: #ff5f57;
+        border: 1px solid #e0443e;
+      }
+
+      .traffic-lights .minimize {
+        background: #ffbd2e;
+        border: 1px solid #dfa123;
+      }
+
+      .traffic-lights .fullscreen {
+        background: #28c840;
+        border: 1px solid #1aab29;
+      }
+
+      .window-title {
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        font-size: 13px;
+        color: #bbbbbb;
+        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
+        font-weight: 500;
+        letter-spacing: -0.1px;
+      }
+
+      .terminal-canvas {
+        flex: 1;
+        background: #000000;
+        padding: 18px 20px;
+        overflow: hidden;
+        font-size: 14px;
+        line-height: 1.6;
+        color: #bbbbbb;
+      }
+
+      .output-lines {
+        margin-bottom: 4px;
+      }
+
+      .output-line {
+        display: block;
+        white-space: pre;
+        opacity: 0;
+        color: #bbbbbb;
+      }
+
+      .output-line.bold {
+        font-weight: bold;
+        color: #ffffff;
+      }
+
+      .output-line.accent {
+        color: #88ff67;
+        font-weight: bold;
+      }
+
+      .output-line.dim {
+        color: #666666;
+      }
+
+      .input-line {
+        display: flex;
+        align-items: center;
+        white-space: pre;
+      }
+
+      .prompt {
+        color: #88ff67;
+        font-weight: bold;
+        user-select: none;
+      }
+
+      .typed-command {
+        color: #bbbbbb;
+      }
+
+      .cursor-block {
+        display: inline-block;
+        width: 9px;
+        height: 16px;
+        background: #88ff67;
+        vertical-align: text-bottom;
+        margin-left: 1px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="scene"
+      data-composition-id="code-snippet-apple-terminal-pro"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="terminal-window">
+        <div class="titlebar">
+          <div class="traffic-lights">
+            <span class="close"></span>
+            <span class="minimize"></span>
+            <span class="fullscreen"></span>
+          </div>
+          <span class="window-title">bash — 80×24</span>
+        </div>
+        <div class="terminal-canvas">
+          <div class="output-lines">
+            <span class="output-line dim">Last login: Mon Jun 2 09:14:22 on ttys008</span>
+            <span class="output-line dim">Building production bundle...</span>
+            <span class="output-line"> vite v5.3.1 building for production...</span>
+            <span class="output-line"> ✓ 142 modules transformed.</span>
+            <span class="output-line"> dist/index.html 0.48 kB</span>
+            <span class="output-line"> dist/assets/index-Cv3rN.js 284.12 kB</span>
+            <span class="output-line"> dist/assets/index-Du4mP.css 42.08 kB</span>
+            <span class="output-line accent"> ✓ built in 2.31s</span>
+          </div>
+          <div class="input-line">
+            <span class="prompt">user@Mac myapp % </span><span class="typed-command"></span
+            ><span class="cursor-block"></span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      const command = "npm run build";
+      const typedEl = document.querySelector(".typed-command");
+      const cursorEl = document.querySelector(".cursor-block");
+      const outputLines = document.querySelectorAll(".output-line");
+
+      const tl = gsap.timeline({ paused: true });
+
+      tl.set(typedEl, { text: "" }, 0);
+
+      const charDuration = 1.5 / command.length;
+      command.split("").forEach((char, i) => {
+        tl.add(
+          () => {
+            typedEl.textContent = command.slice(0, i + 1);
+          },
+          0.5 + i * charDuration,
+        );
+      });
+
+      tl.set(cursorEl, { opacity: 0 }, 2.2);
+      tl.set(outputLines[0], { opacity: 1 }, 2.3);
+
+      tl.add(() => {
+        typedEl.textContent = "";
+      }, 2.5);
+
+      outputLines.forEach((line, i) => {
+        if (i === 0) return;
+        tl.set(line, { opacity: 1 }, 2.8 + i * 0.1);
+      });
+
+      tl.add(() => {
+        const inputLine = document.querySelector(".input-line");
+        const newPrompt = document.createElement("div");
+        newPrompt.className = "input-line";
+        newPrompt.innerHTML =
+          '<span class="prompt">user@Mac myapp % </span><span class="typed-command"></span><span class="cursor-block" id="final-cursor"></span>';
+        inputLine.style.display = "none";
+        inputLine.parentNode.appendChild(newPrompt);
+      }, 4.2);
+
+      const blinkTimes = [4.4, 4.8, 5.2, 5.6, 6.0, 6.4];
+      blinkTimes.forEach((t, i) => {
+        tl.add(() => {
+          const fc = document.getElementById("final-cursor");
+          if (fc) fc.style.opacity = i % 2 === 0 ? "0" : "1";
+        }, t);
+      });
+      tl.add(() => {
+        const fc = document.getElementById("final-cursor");
+        if (fc) fc.style.opacity = "1";
+      }, 6.8);
+
+      window.__timelines["code-snippet-apple-terminal-pro"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/code-snippet-apple-terminal-red-sands/code-snippet-apple-terminal-red-sands.html b/docs/public/catalog/blocks/code-snippet-apple-terminal-red-sands/code-snippet-apple-terminal-red-sands.html
new file mode 100644
index 0000000000..fc7240eb9c
--- /dev/null
+++ b/docs/public/catalog/blocks/code-snippet-apple-terminal-red-sands/code-snippet-apple-terminal-red-sands.html
@@ -0,0 +1,244 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Apple Terminal Red Sands</title>
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #7b140e;
+        font-family: "SF Mono", Menlo, Monaco, Consolas, "Courier New", monospace;
+      }
+
+      #scene {
+        width: 1920px;
+        height: 1080px;
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: radial-gradient(ellipse at center, #8a1a12 0%, #4a0a06 100%);
+      }
+
+      .terminal-window {
+        width: 1400px;
+        height: 700px;
+        border-radius: 10px;
+        overflow: hidden;
+        box-shadow:
+          0 30px 80px rgba(0, 0, 0, 0.7),
+          0 10px 30px rgba(123, 20, 14, 0.4);
+        display: flex;
+        flex-direction: column;
+      }
+
+      .titlebar {
+        height: 38px;
+        background: #5e0f0a;
+        display: flex;
+        align-items: center;
+        padding: 0 14px;
+        flex-shrink: 0;
+        border-bottom: 1px solid #8b2018;
+        position: relative;
+      }
+
+      .traffic-lights {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+      }
+
+      .traffic-lights span {
+        width: 13px;
+        height: 13px;
+        border-radius: 50%;
+        display: inline-block;
+      }
+
+      .traffic-lights .close {
+        background: #ff5f57;
+        border: 1px solid #e0443e;
+      }
+
+      .traffic-lights .minimize {
+        background: #ffbd2e;
+        border: 1px solid #dfa123;
+      }
+
+      .traffic-lights .fullscreen {
+        background: #28c840;
+        border: 1px solid #1aab29;
+      }
+
+      .window-title {
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        font-size: 13px;
+        color: #ffe1b9;
+        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
+        font-weight: 500;
+        letter-spacing: -0.1px;
+      }
+
+      .terminal-canvas {
+        flex: 1;
+        background: #7b140e;
+        padding: 18px 20px;
+        overflow: hidden;
+        font-size: 14px;
+        line-height: 1.6;
+        color: #ffe1b9;
+      }
+
+      .output-lines {
+        margin-bottom: 4px;
+      }
+
+      .output-line {
+        display: block;
+        white-space: pre;
+        opacity: 0;
+        color: #ffe1b9;
+      }
+
+      .output-line.bold {
+        font-weight: bold;
+        color: #ffffff;
+      }
+
+      .output-line.dim {
+        color: #c4916a;
+      }
+
+      .input-line {
+        display: flex;
+        align-items: center;
+        white-space: pre;
+      }
+
+      .prompt {
+        color: #ffe1b9;
+        font-weight: bold;
+        user-select: none;
+      }
+
+      .typed-command {
+        color: #ffe1b9;
+      }
+
+      .cursor-block {
+        display: inline-block;
+        width: 9px;
+        height: 16px;
+        background: #ffffff;
+        vertical-align: text-bottom;
+        margin-left: 1px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="scene"
+      data-composition-id="code-snippet-apple-terminal-red-sands"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="terminal-window">
+        <div class="titlebar">
+          <div class="traffic-lights">
+            <span class="close"></span>
+            <span class="minimize"></span>
+            <span class="fullscreen"></span>
+          </div>
+          <span class="window-title">bash — 80×24</span>
+        </div>
+        <div class="terminal-canvas">
+          <div class="output-lines">
+            <span class="output-line dim">Last login: Mon Jun 2 09:14:22 on ttys009</span>
+            <span class="output-line">Fetching https://api.example.com/status</span>
+            <span class="output-line dim"> HTTP/2 200</span>
+            <span class="output-line dim"> content-type: application/json</span>
+            <span class="output-line dim"> x-request-id: a3f9c21e-04b2-4d78</span>
+            <span class="output-line">{</span>
+            <span class="output-line"> "status": "healthy",</span>
+            <span class="output-line"> "version": "2.4.1",</span>
+            <span class="output-line bold"> "uptime": "14d 6h 32m"</span>
+            <span class="output-line">}</span>
+          </div>
+          <div class="input-line">
+            <span class="prompt">user@Mac ~ % </span><span class="typed-command"></span
+            ><span class="cursor-block"></span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      const command = "curl -s api.example.com/status | jq";
+      const typedEl = document.querySelector(".typed-command");
+      const cursorEl = document.querySelector(".cursor-block");
+      const outputLines = document.querySelectorAll(".output-line");
+
+      const tl = gsap.timeline({ paused: true });
+
+      tl.set(typedEl, { text: "" }, 0);
+
+      const charDuration = 1.5 / command.length;
+      command.split("").forEach((char, i) => {
+        tl.add(
+          () => {
+            typedEl.textContent = command.slice(0, i + 1);
+          },
+          0.5 + i * charDuration,
+        );
+      });
+
+      tl.set(cursorEl, { opacity: 0 }, 2.2);
+      tl.set(outputLines[0], { opacity: 1 }, 2.3);
+
+      tl.add(() => {
+        typedEl.textContent = "";
+      }, 2.5);
+
+      outputLines.forEach((line, i) => {
+        if (i === 0) return;
+        tl.set(line, { opacity: 1 }, 2.8 + i * 0.1);
+      });
+
+      tl.add(() => {
+        const inputLine = document.querySelector(".input-line");
+        const newPrompt = document.createElement("div");
+        newPrompt.className = "input-line";
+        newPrompt.innerHTML =
+          '<span class="prompt">user@Mac ~ % </span><span class="typed-command"></span><span class="cursor-block" id="final-cursor"></span>';
+        inputLine.style.display = "none";
+        inputLine.parentNode.appendChild(newPrompt);
+      }, 4.4);
+
+      const blinkTimes = [4.6, 5.0, 5.4, 5.8, 6.2, 6.6];
+      blinkTimes.forEach((t, i) => {
+        tl.add(() => {
+          const fc = document.getElementById("final-cursor");
+          if (fc) fc.style.opacity = i % 2 === 0 ? "0" : "1";
+        }, t);
+      });
+      tl.add(() => {
+        const fc = document.getElementById("final-cursor");
+        if (fc) fc.style.opacity = "1";
+      }, 7.0);
+
+      window.__timelines["code-snippet-apple-terminal-red-sands"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/code-snippet-apple-terminal-silver-aerogel/code-snippet-apple-terminal-silver-aerogel.html b/docs/public/catalog/blocks/code-snippet-apple-terminal-silver-aerogel/code-snippet-apple-terminal-silver-aerogel.html
new file mode 100644
index 0000000000..7c56fbd4d7
--- /dev/null
+++ b/docs/public/catalog/blocks/code-snippet-apple-terminal-silver-aerogel/code-snippet-apple-terminal-silver-aerogel.html
@@ -0,0 +1,250 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Apple Terminal Silver Aerogel</title>
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #2a2a2a;
+        font-family: "SF Mono", Menlo, Monaco, Consolas, "Courier New", monospace;
+      }
+
+      #scene {
+        width: 1920px;
+        height: 1080px;
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: radial-gradient(ellipse at center, #3a3a3a 0%, #1c1c1c 100%);
+      }
+
+      .terminal-window {
+        width: 1400px;
+        height: 700px;
+        border-radius: 10px;
+        overflow: hidden;
+        box-shadow:
+          0 30px 80px rgba(0, 0, 0, 0.6),
+          0 10px 30px rgba(232, 232, 232, 0.05);
+        display: flex;
+        flex-direction: column;
+      }
+
+      .titlebar {
+        height: 38px;
+        background: #2a2a2a;
+        display: flex;
+        align-items: center;
+        padding: 0 14px;
+        flex-shrink: 0;
+        border-bottom: 1px solid #444444;
+        position: relative;
+      }
+
+      .traffic-lights {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+      }
+
+      .traffic-lights span {
+        width: 13px;
+        height: 13px;
+        border-radius: 50%;
+        display: inline-block;
+      }
+
+      .traffic-lights .close {
+        background: #ff5f57;
+        border: 1px solid #e0443e;
+      }
+
+      .traffic-lights .minimize {
+        background: #ffbd2e;
+        border: 1px solid #dfa123;
+      }
+
+      .traffic-lights .fullscreen {
+        background: #28c840;
+        border: 1px solid #1aab29;
+      }
+
+      .window-title {
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        font-size: 13px;
+        color: #ffffff;
+        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
+        font-weight: 500;
+        letter-spacing: -0.1px;
+      }
+
+      .terminal-canvas {
+        flex: 1;
+        background: #3d3d3d;
+        padding: 18px 20px;
+        overflow: hidden;
+        font-size: 14px;
+        line-height: 1.6;
+        color: #ffffff;
+      }
+
+      .output-lines {
+        margin-bottom: 4px;
+      }
+
+      .output-line {
+        display: block;
+        white-space: pre;
+        opacity: 0;
+        color: #ffffff;
+      }
+
+      .output-line.bold {
+        font-weight: bold;
+        color: #ffffff;
+      }
+
+      .output-line.dim {
+        color: #aaaaaa;
+      }
+
+      .output-line.success {
+        color: #7fffb3;
+      }
+
+      .output-line.warn {
+        color: #ffd700;
+      }
+
+      .input-line {
+        display: flex;
+        align-items: center;
+        white-space: pre;
+      }
+
+      .prompt {
+        color: #e8e8e8;
+        font-weight: bold;
+        user-select: none;
+      }
+
+      .typed-command {
+        color: #ffffff;
+      }
+
+      .cursor-block {
+        display: inline-block;
+        width: 9px;
+        height: 16px;
+        background: #e8e8e8;
+        vertical-align: text-bottom;
+        margin-left: 1px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="scene"
+      data-composition-id="code-snippet-apple-terminal-silver-aerogel"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="terminal-window">
+        <div class="titlebar">
+          <div class="traffic-lights">
+            <span class="close"></span>
+            <span class="minimize"></span>
+            <span class="fullscreen"></span>
+          </div>
+          <span class="window-title">bash — 80×24</span>
+        </div>
+        <div class="terminal-canvas">
+          <div class="output-lines">
+            <span class="output-line dim">Last login: Mon Jun 2 09:14:22 on ttys010</span>
+            <span class="output-line">Checking system resources...</span>
+            <span class="output-line">Filesystem Size Used Avail Use%</span>
+            <span class="output-line">/dev/disk3s1s1 460G 142G 302G 32%</span>
+            <span class="output-line dim">/dev/disk3s6 460G 5.0G 302G 2%</span>
+            <span class="output-line">/dev/disk3s2 460G 11G 302G 4%</span>
+            <span class="output-line warn">Memory: 14.2 GB / 16.0 GB used (89%)</span>
+            <span class="output-line success">CPU: 8-core, 12% load average</span>
+          </div>
+          <div class="input-line">
+            <span class="prompt">user@Mac ~ % </span><span class="typed-command"></span
+            ><span class="cursor-block"></span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      const command = "df -h && vm_stat";
+      const typedEl = document.querySelector(".typed-command");
+      const cursorEl = document.querySelector(".cursor-block");
+      const outputLines = document.querySelectorAll(".output-line");
+
+      const tl = gsap.timeline({ paused: true });
+
+      tl.set(typedEl, { text: "" }, 0);
+
+      const charDuration = 1.5 / command.length;
+      command.split("").forEach((char, i) => {
+        tl.add(
+          () => {
+            typedEl.textContent = command.slice(0, i + 1);
+          },
+          0.5 + i * charDuration,
+        );
+      });
+
+      tl.set(cursorEl, { opacity: 0 }, 2.2);
+      tl.set(outputLines[0], { opacity: 1 }, 2.3);
+
+      tl.add(() => {
+        typedEl.textContent = "";
+      }, 2.5);
+
+      outputLines.forEach((line, i) => {
+        if (i === 0) return;
+        tl.set(line, { opacity: 1 }, 2.8 + i * 0.1);
+      });
+
+      tl.add(() => {
+        const inputLine = document.querySelector(".input-line");
+        const newPrompt = document.createElement("div");
+        newPrompt.className = "input-line";
+        newPrompt.innerHTML =
+          '<span class="prompt">user@Mac ~ % </span><span class="typed-command"></span><span class="cursor-block" id="final-cursor"></span>';
+        inputLine.style.display = "none";
+        inputLine.parentNode.appendChild(newPrompt);
+      }, 4.2);
+
+      const blinkTimes = [4.4, 4.8, 5.2, 5.6, 6.0, 6.4];
+      blinkTimes.forEach((t, i) => {
+        tl.add(() => {
+          const fc = document.getElementById("final-cursor");
+          if (fc) fc.style.opacity = i % 2 === 0 ? "0" : "1";
+        }, t);
+      });
+      tl.add(() => {
+        const fc = document.getElementById("final-cursor");
+        if (fc) fc.style.opacity = "1";
+      }, 6.8);
+
+      window.__timelines["code-snippet-apple-terminal-silver-aerogel"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/code-snippet-apple-terminal-solid-colors/code-snippet-apple-terminal-solid-colors.html b/docs/public/catalog/blocks/code-snippet-apple-terminal-solid-colors/code-snippet-apple-terminal-solid-colors.html
new file mode 100644
index 0000000000..f8164fb0cf
--- /dev/null
+++ b/docs/public/catalog/blocks/code-snippet-apple-terminal-solid-colors/code-snippet-apple-terminal-solid-colors.html
@@ -0,0 +1,247 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Apple Terminal Solid Colors</title>
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #4c0099;
+        font-family: "SF Mono", Menlo, Monaco, Consolas, "Courier New", monospace;
+      }
+
+      #scene {
+        width: 1920px;
+        height: 1080px;
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: radial-gradient(ellipse at center, #5a00b3 0%, #2e0060 100%);
+      }
+
+      .terminal-window {
+        width: 1400px;
+        height: 700px;
+        border-radius: 10px;
+        overflow: hidden;
+        box-shadow:
+          0 30px 80px rgba(0, 0, 0, 0.7),
+          0 10px 30px rgba(76, 0, 153, 0.4);
+        display: flex;
+        flex-direction: column;
+      }
+
+      .titlebar {
+        height: 38px;
+        background: #3a0077;
+        display: flex;
+        align-items: center;
+        padding: 0 14px;
+        flex-shrink: 0;
+        border-bottom: 1px solid #6600bb;
+        position: relative;
+      }
+
+      .traffic-lights {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+      }
+
+      .traffic-lights span {
+        width: 13px;
+        height: 13px;
+        border-radius: 50%;
+        display: inline-block;
+      }
+
+      .traffic-lights .close {
+        background: #ff5f57;
+        border: 1px solid #e0443e;
+      }
+
+      .traffic-lights .minimize {
+        background: #ffbd2e;
+        border: 1px solid #dfa123;
+      }
+
+      .traffic-lights .fullscreen {
+        background: #28c840;
+        border: 1px solid #1aab29;
+      }
+
+      .window-title {
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        font-size: 13px;
+        color: #ffffff;
+        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
+        font-weight: 500;
+        letter-spacing: -0.1px;
+      }
+
+      .terminal-canvas {
+        flex: 1;
+        background: #4c0099;
+        padding: 18px 20px;
+        overflow: hidden;
+        font-size: 14px;
+        line-height: 1.6;
+        color: #ffffff;
+      }
+
+      .output-lines {
+        margin-bottom: 4px;
+      }
+
+      .output-line {
+        display: block;
+        white-space: pre;
+        opacity: 0;
+        color: #ffffff;
+      }
+
+      .output-line.bold {
+        font-weight: bold;
+        color: #ffffff;
+      }
+
+      .output-line.dim {
+        color: rgba(255, 255, 255, 0.55);
+      }
+
+      .output-line.accent {
+        color: #cc99ff;
+        font-weight: bold;
+      }
+
+      .input-line {
+        display: flex;
+        align-items: center;
+        white-space: pre;
+      }
+
+      .prompt {
+        color: #cc99ff;
+        font-weight: bold;
+        user-select: none;
+      }
+
+      .typed-command {
+        color: #ffffff;
+      }
+
+      .cursor-block {
+        display: inline-block;
+        width: 9px;
+        height: 16px;
+        background: #ffffff;
+        vertical-align: text-bottom;
+        margin-left: 1px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="scene"
+      data-composition-id="code-snippet-apple-terminal-solid-colors"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="terminal-window">
+        <div class="titlebar">
+          <div class="traffic-lights">
+            <span class="close"></span>
+            <span class="minimize"></span>
+            <span class="fullscreen"></span>
+          </div>
+          <span class="window-title">bash — 80×24</span>
+        </div>
+        <div class="terminal-canvas">
+          <div class="output-lines">
+            <span class="output-line dim">Last login: Mon Jun 2 09:14:22 on ttys011</span>
+            <span class="output-line">Initializing HyperFrames project...</span>
+            <span class="output-line dim"> Creating project structure</span>
+            <span class="output-line dim"> Copying template files</span>
+            <span class="output-line dim"> Installing dependencies</span>
+            <span class="output-line"> added 142 packages in 3.4s</span>
+            <span class="output-line accent"> ✓ Project ready at ./my-video</span>
+            <span class="output-line bold"> Run: cd my-video && npx hyperframes preview</span>
+          </div>
+          <div class="input-line">
+            <span class="prompt">user@Mac ~ % </span><span class="typed-command"></span
+            ><span class="cursor-block"></span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      const command = "npx hyperframes init my-video";
+      const typedEl = document.querySelector(".typed-command");
+      const cursorEl = document.querySelector(".cursor-block");
+      const outputLines = document.querySelectorAll(".output-line");
+
+      const tl = gsap.timeline({ paused: true });
+
+      tl.set(typedEl, { text: "" }, 0);
+
+      const charDuration = 1.5 / command.length;
+      command.split("").forEach((char, i) => {
+        tl.add(
+          () => {
+            typedEl.textContent = command.slice(0, i + 1);
+          },
+          0.5 + i * charDuration,
+        );
+      });
+
+      tl.set(cursorEl, { opacity: 0 }, 2.2);
+      tl.set(outputLines[0], { opacity: 1 }, 2.3);
+
+      tl.add(() => {
+        typedEl.textContent = "";
+      }, 2.5);
+
+      outputLines.forEach((line, i) => {
+        if (i === 0) return;
+        tl.set(line, { opacity: 1 }, 2.8 + i * 0.1);
+      });
+
+      tl.add(() => {
+        const inputLine = document.querySelector(".input-line");
+        const newPrompt = document.createElement("div");
+        newPrompt.className = "input-line";
+        newPrompt.innerHTML =
+          '<span class="prompt">user@Mac ~ % </span><span class="typed-command"></span><span class="cursor-block" id="final-cursor"></span>';
+        inputLine.style.display = "none";
+        inputLine.parentNode.appendChild(newPrompt);
+      }, 4.2);
+
+      const blinkTimes = [4.4, 4.8, 5.2, 5.6, 6.0, 6.4];
+      blinkTimes.forEach((t, i) => {
+        tl.add(() => {
+          const fc = document.getElementById("final-cursor");
+          if (fc) fc.style.opacity = i % 2 === 0 ? "0" : "1";
+        }, t);
+      });
+      tl.add(() => {
+        const fc = document.getElementById("final-cursor");
+        if (fc) fc.style.opacity = "1";
+      }, 6.8);
+
+      window.__timelines["code-snippet-apple-terminal-solid-colors"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/code-snippet-dark-2026/background.jpeg b/docs/public/catalog/blocks/code-snippet-dark-2026/background.jpeg
new file mode 100644
index 0000000000..1f3e465cd2
Binary files /dev/null and b/docs/public/catalog/blocks/code-snippet-dark-2026/background.jpeg differ
diff --git a/docs/public/catalog/blocks/code-snippet-dark-2026/code-snippet-dark-2026.html b/docs/public/catalog/blocks/code-snippet-dark-2026/code-snippet-dark-2026.html
new file mode 100644
index 0000000000..944432036f
--- /dev/null
+++ b/docs/public/catalog/blocks/code-snippet-dark-2026/code-snippet-dark-2026.html
@@ -0,0 +1,1090 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Dark 2026 VS Code Theme Composition</title>
+  </head>
+  <body>
+    <template id="vscode-dark-2026-template">
+      <div
+        class="vscode-theme-scene"
+        data-composition-id="vscode-dark-2026"
+        data-width="1920"
+        data-height="1080"
+      >
+        <main class="scene-content">
+          <section class="header">
+            <div>
+              <p class="kicker">Official VS Code built-in theme</p>
+              <h1 class="title"><span class="theme-label">Dark 2026</span></h1>
+            </div>
+            <p class="source-note">
+              Typing `functional_toolkit.py` with workbench colors from
+              <span class="theme-source">2026-dark.json</span>.
+            </p>
+          </section>
+
+          <section class="workbench">
+            <div class="titlebar">
+              <div class="traffic"><span></span><span></span><span></span></div>
+              <div class="window-title">functional-toolkit - Visual Studio Code</div>
+              <div class="command-center">Search</div>
+            </div>
+
+            <aside class="activity" aria-label="Activity bar">
+              <svg class="activity-icon active" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="currentColor"
+                  d="M4 4h7v7H4V4Zm9 0h7v7h-7V4ZM4 13h7v7H4v-7Zm9 0h7v7h-7v-7Z"
+                />
+              </svg>
+              <svg class="activity-icon" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  d="m21 21-5.2-5.2M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Z"
+                />
+              </svg>
+              <svg class="activity-icon" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  d="M8 18 3 12l5-6m8 12 5-6-5-6"
+                />
+              </svg>
+              <svg class="activity-icon" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  d="M12 3v18m0-18 6 6m-6-6L6 9m6 12 6-6m-6 6-6-6"
+                />
+              </svg>
+            </aside>
+
+            <aside class="sidebar">
+              <div class="sidebar-title">Explorer</div>
+              <div class="section-title">⌄ Functional Toolkit</div>
+              <div class="tree">
+                <div class="tree-row">⌄ src</div>
+                <div class="tree-row child selected">◇ functional_toolkit.py</div>
+                <div class="tree-row child">◇ test_toolkit.py</div>
+                <div class="tree-row">◇ pyproject.toml</div>
+                <div class="tree-row">◇ README.md</div>
+              </div>
+            </aside>
+
+            <section class="editor-area">
+              <div class="tabs">
+                <div class="tab">◇ functional_toolkit.py</div>
+                <div class="tab inactive">README.md</div>
+              </div>
+              <div class="breadcrumbs">functional-toolkit › src › functional_toolkit.py</div>
+              <div class="editor">
+                <div class="active-line"></div>
+                <div class="code"></div>
+              </div>
+              <div class="terminal">
+                <div class="panel-tabs">
+                  <span class="active">Terminal</span><span>Problems</span><span>Output</span>
+                </div>
+                <div class="terminal-body">
+                  <div><span class="prompt">functional-toolkit %</span> python -m pytest</div>
+                  <div>collected 3 items</div>
+                  <div>tests/test_toolkit.py ... <span class="tok-comment">passed</span></div>
+                </div>
+              </div>
+            </section>
+
+            <footer class="statusbar">
+              <div class="status-left">
+                <span class="remote">main</span>
+                <span>0 errors</span>
+                <span>0 warnings</span>
+              </div>
+              <div class="status-right">
+                <span>Ln 17, Col 1</span>
+                <span>Spaces: 4</span>
+                <span>UTF-8</span>
+                <span>Python 3.12</span>
+              </div>
+            </footer>
+          </section>
+        </main>
+        <style>
+          * {
+            box-sizing: border-box;
+            letter-spacing: 0;
+          }
+
+          html,
+          body {
+            margin: 0;
+            width: 1920px;
+            height: 1080px;
+            overflow: hidden;
+            background: #000000;
+            font-family:
+              Inter,
+              -apple-system,
+              BlinkMacSystemFont,
+              "Segoe UI",
+              sans-serif;
+          }
+
+          .vscode-theme-scene {
+            --activity-bg: #181818;
+            --activity-fg: #d7d7d7;
+            --activity-muted: #868686;
+            --activity-active: #0078d4;
+            --sidebar-bg: #181818;
+            --sidebar-fg: #cccccc;
+            --sidebar-border: #2b2b2b;
+            --tab-bg: #181818;
+            --tab-active-bg: #1f1f1f;
+            --tab-active-fg: #ffffff;
+            --tab-inactive-fg: #9d9d9d;
+            --tab-border: #2b2b2b;
+            --editor-bg: #1f1f1f;
+            --editor-fg: #cccccc;
+            --editor-line: rgba(255, 255, 255, 0.04);
+            --gutter-fg: #6e7681;
+            --gutter-active-fg: #cccccc;
+            --panel-bg: #181818;
+            --panel-border: #2b2b2b;
+            --status-bg: #181818;
+            --status-fg: #cccccc;
+            --status-border: #2b2b2b;
+            --title-bg: #181818;
+            --title-fg: #cccccc;
+            --token-comment: #6a9955;
+            --token-keyword: #c586c0;
+            --token-function: #dcdcaa;
+            --token-string: #ce9178;
+            --token-number: #b5cea8;
+            --token-variable: #9cdcfe;
+            --token-parameter: #9cdcfe;
+            --token-operator: #d4d4d4;
+            --token-punctuation: #d4d4d4;
+            --token-class-name: #4ec9b0;
+            position: relative;
+            width: 1920px;
+            height: 1080px;
+            overflow: hidden;
+            background:
+              linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.32)),
+              url("../assets/background.jpeg") center / cover no-repeat;
+            color: var(--editor-fg);
+          }
+
+          .scene-content {
+            position: relative;
+            z-index: 1;
+            width: 100%;
+            height: 100%;
+            padding: 54px 70px 92px;
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+            perspective: 2200px;
+            perspective-origin: 56% 52%;
+          }
+
+          .header {
+            display: flex;
+            align-items: end;
+            justify-content: space-between;
+            min-height: 66px;
+            text-shadow:
+              0 2px 12px rgba(0, 0, 0, 0.42),
+              0 14px 34px rgba(0, 0, 0, 0.32);
+          }
+
+          .kicker {
+            margin: 0 0 7px;
+            color: var(--gutter-fg);
+            font-size: 15px;
+            font-weight: 650;
+            text-transform: uppercase;
+            text-shadow:
+              0 2px 8px rgba(0, 0, 0, 0.48),
+              0 10px 26px rgba(0, 0, 0, 0.36);
+          }
+
+          .title {
+            margin: 0;
+            color: var(--editor-fg);
+            font-size: 44px;
+            line-height: 1;
+            font-weight: 760;
+          }
+
+          .source-note {
+            width: 510px;
+            color: var(--gutter-fg);
+            font-size: 16px;
+            line-height: 1.35;
+            text-align: right;
+            text-shadow:
+              0 2px 10px rgba(0, 0, 0, 0.46),
+              0 12px 30px rgba(0, 0, 0, 0.34);
+          }
+
+          .workbench {
+            height: 824px;
+            display: grid;
+            grid-template-columns: 54px 290px 1fr;
+            grid-template-rows: 36px 1fr 26px;
+            overflow: hidden;
+            border: 1px solid var(--sidebar-border);
+            border-radius: 8px;
+            background: var(--editor-bg);
+            box-shadow: 0 34px 90px rgba(0, 0, 0, 0.42);
+            transform: translateZ(0);
+            transform-origin: 82% 50%;
+            transform-style: preserve-3d;
+            will-change: transform;
+          }
+
+          .titlebar {
+            grid-column: 1 / -1;
+            display: grid;
+            grid-template-columns: 120px 1fr 210px;
+            align-items: center;
+            background: var(--title-bg);
+            color: var(--title-fg);
+            border-bottom: 1px solid var(--tab-border);
+            font-size: 12px;
+          }
+
+          .traffic {
+            display: flex;
+            gap: 8px;
+            padding-left: 18px;
+          }
+
+          .traffic span {
+            width: 12px;
+            height: 12px;
+            border-radius: 999px;
+          }
+
+          .traffic span:nth-child(1) {
+            background: #ff5f57;
+          }
+          .traffic span:nth-child(2) {
+            background: #ffbd2e;
+          }
+          .traffic span:nth-child(3) {
+            background: #28c840;
+          }
+
+          .window-title {
+            justify-self: center;
+            opacity: 0.84;
+          }
+
+          .command-center {
+            justify-self: end;
+            width: 176px;
+            height: 22px;
+            margin-right: 16px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border: 1px solid color-mix(in srgb, var(--title-fg), transparent 78%);
+            border-radius: 5px;
+            color: color-mix(in srgb, var(--title-fg), transparent 18%);
+          }
+
+          .activity {
+            grid-row: 2 / 3;
+            background: var(--activity-bg);
+            border-right: 1px solid var(--sidebar-border);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 10px 0;
+            gap: 18px;
+          }
+
+          .activity-icon {
+            width: 28px;
+            height: 28px;
+            color: var(--activity-muted);
+          }
+
+          .activity-icon.active {
+            color: var(--activity-fg);
+            border-left: 2px solid var(--activity-active);
+            padding-left: 4px;
+          }
+
+          .sidebar {
+            grid-row: 2 / 3;
+            background: var(--sidebar-bg);
+            color: var(--sidebar-fg);
+            border-right: 1px solid var(--sidebar-border);
+            display: flex;
+            flex-direction: column;
+            min-width: 0;
+          }
+
+          .sidebar-title {
+            height: 38px;
+            display: flex;
+            align-items: center;
+            padding: 0 20px;
+            color: var(--sidebar-fg);
+            font-size: 11px;
+            text-transform: uppercase;
+          }
+
+          .section-title {
+            height: 24px;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            padding: 0 14px;
+            background: color-mix(in srgb, var(--sidebar-bg), var(--sidebar-fg) 5%);
+            border-top: 1px solid var(--sidebar-border);
+            border-bottom: 1px solid var(--sidebar-border);
+            color: var(--sidebar-fg);
+            font-size: 11px;
+            font-weight: 700;
+          }
+
+          .tree {
+            padding: 8px 0;
+            font-size: 13px;
+            line-height: 24px;
+          }
+
+          .tree-row {
+            height: 24px;
+            display: flex;
+            align-items: center;
+            gap: 7px;
+            padding: 0 10px 0 18px;
+            color: color-mix(in srgb, var(--sidebar-fg), transparent 8%);
+            white-space: nowrap;
+          }
+
+          .tree-row.child {
+            padding-left: 34px;
+          }
+
+          .tree-row.selected {
+            background: color-mix(in srgb, var(--sidebar-fg), transparent 88%);
+            color: var(--sidebar-fg);
+          }
+
+          .editor-area {
+            grid-row: 2 / 3;
+            display: grid;
+            grid-template-rows: 36px 30px 1fr 138px;
+            min-width: 0;
+            background: var(--editor-bg);
+          }
+
+          .tabs {
+            display: flex;
+            background: var(--tab-bg);
+            border-bottom: 1px solid var(--tab-border);
+          }
+
+          .tab {
+            width: 205px;
+            height: 36px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 0 13px;
+            border-right: 1px solid var(--tab-border);
+            background: var(--tab-active-bg);
+            color: var(--tab-active-fg);
+            border-top: 2px solid var(--activity-active);
+            font-size: 13px;
+          }
+
+          .tab.inactive {
+            background: var(--tab-bg);
+            color: var(--tab-inactive-fg);
+            border-top-color: transparent;
+          }
+
+          .breadcrumbs {
+            display: flex;
+            align-items: center;
+            gap: 7px;
+            padding: 0 18px;
+            color: var(--gutter-fg);
+            border-bottom: 1px solid color-mix(in srgb, var(--tab-border), transparent 20%);
+            font-size: 12px;
+          }
+
+          .editor {
+            position: relative;
+            overflow: hidden;
+            background: var(--editor-bg);
+            color: var(--editor-fg);
+            font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+            font-size: 18px;
+            line-height: 1.52;
+          }
+
+          .active-line {
+            position: absolute;
+            left: 0;
+            right: 0;
+            top: 0;
+            height: 28px;
+            background: var(--editor-line);
+            will-change: transform;
+          }
+
+          .code {
+            position: relative;
+            padding: 20px 36px 18px 0;
+          }
+
+          .line {
+            height: 28px;
+            display: grid;
+            grid-template-columns: 72px 1fr;
+            align-items: center;
+          }
+
+          .line-number {
+            padding-right: 18px;
+            color: var(--gutter-fg);
+            text-align: right;
+            user-select: none;
+          }
+
+          .line.is-active .line-number {
+            color: var(--gutter-active-fg);
+          }
+
+          .line-code {
+            white-space: pre;
+          }
+
+          .char {
+            opacity: 0;
+          }
+
+          .tok-comment {
+            color: var(--token-comment);
+          }
+          .tok-keyword {
+            color: var(--token-keyword);
+          }
+          .tok-function {
+            color: var(--token-function);
+          }
+          .tok-string {
+            color: var(--token-string);
+          }
+          .tok-number {
+            color: var(--token-number);
+          }
+          .tok-variable {
+            color: var(--token-variable);
+          }
+          .tok-parameter {
+            color: var(--token-parameter);
+          }
+          .tok-operator {
+            color: var(--token-operator);
+          }
+          .tok-punctuation {
+            color: var(--token-punctuation);
+          }
+          .tok-class-name {
+            color: var(--token-class-name);
+          }
+
+          .caret {
+            position: absolute;
+            left: 0;
+            top: 0;
+            z-index: 3;
+            display: block;
+            width: 2px;
+            height: 22px;
+            background: var(--editor-fg);
+            pointer-events: none;
+            will-change: transform, opacity;
+          }
+
+          .terminal {
+            display: grid;
+            grid-template-rows: 32px 1fr;
+            background: var(--panel-bg);
+            border-top: 1px solid var(--panel-border);
+            color: var(--editor-fg);
+            font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+            font-size: 14px;
+          }
+
+          .panel-tabs {
+            display: flex;
+            align-items: center;
+            gap: 22px;
+            padding: 0 18px;
+            border-bottom: 1px solid var(--panel-border);
+            color: var(--gutter-fg);
+            font-family:
+              Inter,
+              -apple-system,
+              BlinkMacSystemFont,
+              "Segoe UI",
+              sans-serif;
+            font-size: 12px;
+            text-transform: uppercase;
+          }
+
+          .panel-tabs .active {
+            color: var(--editor-fg);
+            border-bottom: 1px solid var(--activity-active);
+            height: 32px;
+            display: flex;
+            align-items: center;
+          }
+
+          .terminal-body {
+            padding: 12px 20px;
+            color: var(--editor-fg);
+            line-height: 1.8;
+          }
+
+          .prompt {
+            color: var(--token-function);
+          }
+
+          .statusbar {
+            grid-column: 1 / -1;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            background: var(--status-bg);
+            color: var(--status-fg);
+            border-top: 1px solid var(--status-border);
+            font-size: 12px;
+          }
+
+          .status-left,
+          .status-right {
+            display: flex;
+            align-items: center;
+            gap: 18px;
+            padding: 0 12px;
+          }
+
+          .remote {
+            align-self: stretch;
+            display: flex;
+            align-items: center;
+            padding: 0 12px;
+            margin-left: -12px;
+            background: var(--status-remote-bg, var(--activity-active));
+            color: var(--status-remote-fg, #ffffff);
+          }
+
+          svg {
+            display: block;
+          }
+        </style>
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (() => {
+            const codeLines = [
+              [{ text: "# A small functional toolkit", token: "comment" }],
+              [
+                { text: "def", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "pluck_deep", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "key", token: "parameter" },
+                { text: "):", token: "punctuation" },
+              ],
+              [
+                { text: "    ", token: "plain" },
+                { text: "return", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "obj", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "reduce", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "acc", token: "parameter" },
+                { text: ", ", token: "punctuation" },
+                { text: "k", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "acc", token: "variable" },
+                { text: "[", token: "punctuation" },
+                { text: "k", token: "variable" },
+                { text: "]", token: "punctuation" },
+                { text: ", ", token: "punctuation" },
+                { text: "key", token: "variable" },
+                { text: ".split", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "'.'", token: "string" },
+                { text: "), ", token: "punctuation" },
+                { text: "obj", token: "variable" },
+                { text: ")", token: "punctuation" },
+              ],
+              [],
+              [
+                { text: "def", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "compose", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "*", token: "operator" },
+                { text: "fns", token: "parameter" },
+                { text: "):", token: "punctuation" },
+              ],
+              [
+                { text: "    ", token: "plain" },
+                { text: "return", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "res", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "reduce", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "acc", token: "parameter" },
+                { text: ", ", token: "punctuation" },
+                { text: "fn", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "fn", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "acc", token: "variable" },
+                { text: "), ", token: "punctuation" },
+                { text: "fns", token: "variable" },
+                { text: ", ", token: "punctuation" },
+                { text: "res", token: "variable" },
+                { text: ")", token: "punctuation" },
+              ],
+              [],
+              [
+                { text: "def", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "unfold", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "f", token: "parameter" },
+                { text: ", ", token: "punctuation" },
+                { text: "seed", token: "parameter" },
+                { text: "):", token: "punctuation" },
+              ],
+              [
+                { text: "    ", token: "plain" },
+                { text: '"""Build a list by repeatedly applying f to a seed."""', token: "string" },
+              ],
+              [
+                { text: "    acc", token: "variable" },
+                { text: " = ", token: "operator" },
+                { text: "[]", token: "punctuation" },
+              ],
+              [
+                { text: "    while", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "True", token: "className" },
+                { text: ":", token: "punctuation" },
+              ],
+              [
+                { text: "        result", token: "variable" },
+                { text: " = ", token: "operator" },
+                { text: "f", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "seed", token: "variable" },
+                { text: ")", token: "punctuation" },
+              ],
+              [
+                { text: "        if", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "result", token: "variable" },
+                { text: " is ", token: "keyword" },
+                { text: "None", token: "className" },
+                { text: ":", token: "punctuation" },
+              ],
+              [
+                { text: "            return", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "acc", token: "variable" },
+              ],
+              [
+                { text: "        acc", token: "variable" },
+                { text: ".append", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "result", token: "variable" },
+                { text: "[", token: "punctuation" },
+                { text: "0", token: "number" },
+                { text: "])", token: "punctuation" },
+              ],
+              [
+                { text: "        seed", token: "variable" },
+                { text: " = ", token: "operator" },
+                { text: "result", token: "variable" },
+                { text: "[", token: "punctuation" },
+                { text: "1", token: "number" },
+                { text: "]", token: "punctuation" },
+              ],
+              [],
+            ];
+
+            const fallback = {
+              "activityBar.background": "#181818",
+              "activityBar.foreground": "#d7d7d7",
+              "activityBar.inactiveForeground": "#868686",
+              "activityBar.activeBorder": "#0078d4",
+              "sideBar.background": "#181818",
+              "sideBar.foreground": "#cccccc",
+              "sideBar.border": "#2b2b2b",
+              "tab.activeBackground": "#1f1f1f",
+              "tab.activeForeground": "#ffffff",
+              "tab.inactiveBackground": "#181818",
+              "tab.inactiveForeground": "#9d9d9d",
+              "tab.border": "#2b2b2b",
+              "editor.background": "#1f1f1f",
+              "editor.foreground": "#cccccc",
+              "editor.lineHighlightBackground": "#ffffff0a",
+              "editorLineNumber.foreground": "#6e7681",
+              "editorLineNumber.activeForeground": "#cccccc",
+              "panel.background": "#181818",
+              "panel.border": "#2b2b2b",
+              "statusBar.background": "#181818",
+              "statusBar.foreground": "#cccccc",
+              "statusBar.border": "#2b2b2b",
+              "titleBar.activeBackground": "#181818",
+              "titleBar.activeForeground": "#cccccc",
+            };
+
+            function color(theme, key) {
+              return theme.colors[key] || fallback[key] || theme.colors.foreground || "#cccccc";
+            }
+
+            function solarizedGrey(theme) {
+              return (
+                theme.colors["tab.inactiveForeground"] ||
+                theme.colors["editor.foreground"] ||
+                "#586E75"
+              );
+            }
+
+            function setVar(root, name, value) {
+              root.style.setProperty(name, value);
+            }
+
+            function applyTheme(root, theme) {
+              const solarizedUiGrey = theme.id === "solarized-light" ? solarizedGrey(theme) : null;
+              setVar(root, "--activity-bg", color(theme, "activityBar.background"));
+              setVar(
+                root,
+                "--activity-fg",
+                solarizedUiGrey || color(theme, "activityBar.foreground"),
+              );
+              setVar(
+                root,
+                "--activity-muted",
+                solarizedUiGrey || color(theme, "activityBar.inactiveForeground"),
+              );
+              setVar(root, "--activity-active", color(theme, "activityBar.activeBorder"));
+              setVar(root, "--sidebar-bg", color(theme, "sideBar.background"));
+              setVar(root, "--sidebar-fg", solarizedUiGrey || color(theme, "sideBar.foreground"));
+              setVar(root, "--sidebar-border", color(theme, "sideBar.border"));
+              setVar(root, "--tab-bg", color(theme, "tab.inactiveBackground"));
+              setVar(root, "--tab-active-bg", color(theme, "tab.activeBackground"));
+              setVar(
+                root,
+                "--tab-active-fg",
+                solarizedUiGrey || color(theme, "tab.activeForeground"),
+              );
+              setVar(
+                root,
+                "--tab-inactive-fg",
+                solarizedUiGrey || color(theme, "tab.inactiveForeground"),
+              );
+              setVar(root, "--tab-border", color(theme, "tab.border"));
+              setVar(root, "--editor-bg", color(theme, "editor.background"));
+              setVar(root, "--editor-fg", color(theme, "editor.foreground"));
+              setVar(root, "--editor-line", color(theme, "editor.lineHighlightBackground"));
+              setVar(root, "--gutter-fg", color(theme, "editorLineNumber.foreground"));
+              setVar(root, "--gutter-active-fg", color(theme, "editorLineNumber.activeForeground"));
+              setVar(root, "--panel-bg", color(theme, "panel.background"));
+              setVar(root, "--panel-border", color(theme, "panel.border"));
+              setVar(root, "--status-bg", color(theme, "statusBar.background"));
+              setVar(root, "--status-fg", color(theme, "statusBar.foreground"));
+              setVar(root, "--status-border", color(theme, "statusBar.border"));
+              setVar(root, "--status-remote-bg", color(theme, "statusBarItem.remoteBackground"));
+              setVar(
+                root,
+                "--status-remote-fg",
+                solarizedUiGrey || color(theme, "statusBarItem.remoteForeground"),
+              );
+              setVar(root, "--title-bg", color(theme, "titleBar.activeBackground"));
+              setVar(
+                root,
+                "--title-fg",
+                solarizedUiGrey || color(theme, "titleBar.activeForeground"),
+              );
+              setVar(root, "--token-comment", theme.tokens.comment);
+              setVar(root, "--token-keyword", theme.tokens.keyword);
+              setVar(root, "--token-function", theme.tokens.function);
+              setVar(root, "--token-string", theme.tokens.string);
+              setVar(root, "--token-number", theme.tokens.number);
+              setVar(root, "--token-variable", theme.tokens.variable);
+              setVar(root, "--token-parameter", theme.tokens.parameter);
+              setVar(root, "--token-operator", theme.tokens.operator);
+              setVar(root, "--token-punctuation", theme.tokens.punctuation);
+              setVar(root, "--token-class-name", theme.tokens.className);
+            }
+
+            function renderCode(root) {
+              const code = root.querySelector(".code");
+              codeLines.forEach((segments, index) => {
+                const line = document.createElement("div");
+                line.className = "line";
+                line.dataset.lineIndex = String(index);
+
+                const lineNumber = document.createElement("span");
+                lineNumber.className = "line-number";
+                lineNumber.textContent = String(index + 1);
+                line.appendChild(lineNumber);
+
+                const lineCode = document.createElement("span");
+                lineCode.className = "line-code";
+                segments.forEach((segment) => {
+                  [...segment.text].forEach((char) => {
+                    const span = document.createElement("span");
+                    span.className =
+                      segment.token === "plain"
+                        ? "char"
+                        : "char tok-" +
+                          segment.token.replace(/[A-Z]/g, (match) => "-" + match.toLowerCase());
+                    span.dataset.lineIndex = String(index);
+                    span.textContent = char;
+                    lineCode.appendChild(span);
+                  });
+                });
+                line.appendChild(lineCode);
+                code.appendChild(line);
+              });
+
+              const caret = document.createElement("span");
+              caret.className = "caret";
+              root.querySelector(".editor").appendChild(caret);
+            }
+
+            function caretPointForElement(editor, el) {
+              const editorBox = editor.getBoundingClientRect();
+              const charBox = el.getBoundingClientRect();
+              return {
+                x: charBox.right - editorBox.left + 2,
+                y: charBox.top - editorBox.top + 3,
+              };
+            }
+
+            function caretPointForLineStart(editor, line) {
+              const editorBox = editor.getBoundingClientRect();
+              const lineBox = line.getBoundingClientRect();
+              const codeBox = line.querySelector(".line-code").getBoundingClientRect();
+              return {
+                x: codeBox.left - editorBox.left,
+                y: lineBox.top - editorBox.top + 3,
+              };
+            }
+
+            function lineHighlightY(editor, line) {
+              const editorBox = editor.getBoundingClientRect();
+              const lineBox = line.getBoundingClientRect();
+              return lineBox.top - editorBox.top;
+            }
+
+            function buildTimeline(root, compositionId) {
+              const tl = gsap.timeline({ paused: true });
+              const editor = root.querySelector(".editor");
+              const caret = root.querySelector(".caret");
+              const activeLine = root.querySelector(".active-line");
+              const lineEls = gsap.utils.toArray(root.querySelectorAll(".line"));
+              const lineStartTimes = [];
+              const charSchedule = [];
+              let cursorTime = 0.95;
+
+              lineEls.forEach((line, lineIndex) => {
+                const lineChars = gsap.utils.toArray(line.querySelectorAll(".char"));
+                lineStartTimes[lineIndex] = cursorTime;
+                lineChars.forEach((char, charIndex) => {
+                  charSchedule.push({ char, time: cursorTime + charIndex * 0.012 });
+                });
+                cursorTime += Math.max(lineChars.length * 0.012, 0.08) + 0.045;
+              });
+
+              gsap.set(activeLine, { y: lineHighlightY(editor, lineEls[0]) });
+              gsap.set(caret, caretPointForLineStart(editor, lineEls[0]));
+
+              tl.from(
+                root.querySelector(".header"),
+                { y: 24, opacity: 0, duration: 0.45, ease: "power3.out" },
+                0,
+              );
+              tl.from(
+                root.querySelector(".workbench"),
+                { y: 42, opacity: 0, scale: 0.986, duration: 0.58, ease: "power3.out" },
+                0.1,
+              );
+              tl.from(activeLine, { opacity: 0, duration: 0.22, ease: "power2.out" }, 0.74);
+              lineStartTimes.forEach((time, lineIndex) => {
+                const line = lineEls[lineIndex];
+                tl.set(activeLine, { y: lineHighlightY(editor, line) }, time);
+                tl.set(caret, caretPointForLineStart(editor, line), time);
+                tl.call(
+                  () => {
+                    lineEls.forEach((item) => item.classList.toggle("is-active", item === line));
+                  },
+                  [],
+                  time,
+                );
+              });
+              charSchedule.forEach(({ char, time }) => {
+                tl.set(char, { opacity: 1 }, time);
+                tl.set(caret, caretPointForElement(editor, char), time + 0.002);
+              });
+              tl.to(
+                root.querySelector(".caret"),
+                { opacity: 0, duration: 0.34, repeat: 25, yoyo: true, ease: "steps(1)" },
+                0.95,
+              );
+              tl.from(
+                root.querySelector(".terminal"),
+                { y: 140, opacity: 0, duration: 0.56, ease: "power3.out" },
+                7.55,
+              );
+              tl.from(
+                root.querySelector(".terminal-body").children,
+                { opacity: 0, y: 8, duration: 0.24, stagger: 0.16, ease: "power2.out" },
+                8.05,
+              );
+              tl.to(
+                root.querySelector(".workbench"),
+                { rotateY: -10.5, z: 74, duration: 0.72, ease: "power2.inOut" },
+                9.35,
+              );
+              tl.to(
+                root.querySelector(".workbench"),
+                { rotateY: 0, z: 0, duration: 0.62, ease: "power2.inOut" },
+                10.08,
+              );
+
+              window.__timelines = window.__timelines || {};
+              window.__timelines[compositionId] = tl;
+
+              const previewTime = new URLSearchParams(window.location.search).get("t");
+              if (previewTime !== null) {
+                tl.time(Number(previewTime));
+              }
+            }
+
+            window.createVSCodeThemeComposition = (compositionId, themeOrId) => {
+              const root =
+                document.querySelector(
+                  '[data-composition-id="' + compositionId + '"] .vscode-theme-scene',
+                ) ||
+                document.querySelector(
+                  '.vscode-theme-scene[data-composition-id="' + compositionId + '"]',
+                ) ||
+                document.querySelector('[data-composition-id="' + compositionId + '"]');
+              const theme =
+                typeof themeOrId === "string"
+                  ? window.VSCODE_THEME_REGISTRY.find((item) => item.id === themeOrId)
+                  : themeOrId;
+              if (!root || !theme) return;
+              root.querySelector(".theme-label").textContent = theme.label;
+              root.querySelector(".theme-source").textContent = theme.sourceFile;
+              applyTheme(root, theme);
+              renderCode(root);
+              buildTimeline(root, compositionId);
+            };
+          })();
+        </script>
+        <script>
+          window.__timelines = window.__timelines || {};
+          window.__timelines["vscode-dark-2026"] =
+            window.__timelines["vscode-dark-2026"] || gsap.timeline({ paused: true });
+          window.createVSCodeThemeComposition("vscode-dark-2026", {
+            id: "dark-2026",
+            label: "Dark 2026",
+            sourceFile: "2026-dark.json",
+            uiTheme: "vs-dark",
+            colors: {
+              "activityBar.activeBorder": "#bfbfbf",
+              "activityBar.background": "#191A1B",
+              "activityBar.border": "#2A2B2CFF",
+              "activityBar.foreground": "#bfbfbf",
+              "activityBar.inactiveForeground": "#8C8C8C",
+              "editor.background": "#121314",
+              "editor.foreground": "#BBBEBF",
+              "editor.lineHighlightBackground": "#242526",
+              "editor.selectionBackground": "#276782dd",
+              "editorGroup.border": "#FFFFFF17",
+              "editorGroupHeader.tabsBackground": "#191A1B",
+              "editorGroupHeader.tabsBorder": "#2A2B2CFF",
+              "editorLineNumber.activeForeground": "#BBBEBF",
+              "editorLineNumber.foreground": "#858889",
+              foreground: "#bfbfbf",
+              "icon.foreground": "#8C8C8C",
+              "panel.background": "#191A1B",
+              "panel.border": "#2A2B2CFF",
+              "sideBar.background": "#191A1B",
+              "sideBar.border": "#2A2B2CFF",
+              "sideBar.foreground": "#bfbfbf",
+              "sideBarSectionHeader.background": "#191A1B",
+              "sideBarSectionHeader.border": "#2A2B2CFF",
+              "sideBarSectionHeader.foreground": "#bfbfbf",
+              "sideBarTitle.foreground": "#bfbfbf",
+              "statusBar.background": "#191A1B",
+              "statusBar.border": "#2A2B2CFF",
+              "statusBar.foreground": "#8C8C8C",
+              "statusBarItem.remoteBackground": "#0078D4",
+              "statusBarItem.remoteForeground": "#FFFFFF",
+              "tab.activeBackground": "#121314",
+              "tab.activeBorder": "#121314",
+              "tab.activeBorderTop": "#3994BC",
+              "tab.activeForeground": "#bfbfbf",
+              "tab.border": "#2A2B2CFF",
+              "tab.inactiveBackground": "#191A1B",
+              "tab.inactiveForeground": "#8C8C8C",
+              "terminal.background": "#191A1B",
+              "terminal.foreground": "#CCCCCC",
+              "terminalCursor.foreground": "#bfbfbf",
+              "titleBar.activeBackground": "#191A1B",
+              "titleBar.activeForeground": "#8C8C8C",
+            },
+            tokens: {
+              comment: "#8b949e",
+              keyword: "#c9d1d9",
+              function: "#79c0ff",
+              string: "#a5d6ff",
+              number: "#79c0ff",
+              variable: "#c9d1d9",
+              parameter: "#ffa657",
+              operator: "#ff7b72",
+              punctuation: "#ffa657",
+              className: "#7ee787",
+            },
+          });
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/code-snippet-dark-modern/background.jpeg b/docs/public/catalog/blocks/code-snippet-dark-modern/background.jpeg
new file mode 100644
index 0000000000..1f3e465cd2
Binary files /dev/null and b/docs/public/catalog/blocks/code-snippet-dark-modern/background.jpeg differ
diff --git a/docs/public/catalog/blocks/code-snippet-dark-modern/code-snippet-dark-modern.html b/docs/public/catalog/blocks/code-snippet-dark-modern/code-snippet-dark-modern.html
new file mode 100644
index 0000000000..bc94fb6aeb
--- /dev/null
+++ b/docs/public/catalog/blocks/code-snippet-dark-modern/code-snippet-dark-modern.html
@@ -0,0 +1,1086 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Dark Modern VS Code Theme Composition</title>
+  </head>
+  <body>
+    <template id="vscode-dark-modern-template">
+      <div
+        class="vscode-theme-scene"
+        data-composition-id="vscode-dark-modern"
+        data-width="1920"
+        data-height="1080"
+      >
+        <main class="scene-content">
+          <section class="header">
+            <div>
+              <p class="kicker">Official VS Code built-in theme</p>
+              <h1 class="title"><span class="theme-label">Dark Modern</span></h1>
+            </div>
+            <p class="source-note">
+              Typing `functional_toolkit.py` with workbench colors from
+              <span class="theme-source">dark_modern.json</span>.
+            </p>
+          </section>
+
+          <section class="workbench">
+            <div class="titlebar">
+              <div class="traffic"><span></span><span></span><span></span></div>
+              <div class="window-title">functional-toolkit - Visual Studio Code</div>
+              <div class="command-center">Search</div>
+            </div>
+
+            <aside class="activity" aria-label="Activity bar">
+              <svg class="activity-icon active" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="currentColor"
+                  d="M4 4h7v7H4V4Zm9 0h7v7h-7V4ZM4 13h7v7H4v-7Zm9 0h7v7h-7v-7Z"
+                />
+              </svg>
+              <svg class="activity-icon" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  d="m21 21-5.2-5.2M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Z"
+                />
+              </svg>
+              <svg class="activity-icon" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  d="M8 18 3 12l5-6m8 12 5-6-5-6"
+                />
+              </svg>
+              <svg class="activity-icon" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  d="M12 3v18m0-18 6 6m-6-6L6 9m6 12 6-6m-6 6-6-6"
+                />
+              </svg>
+            </aside>
+
+            <aside class="sidebar">
+              <div class="sidebar-title">Explorer</div>
+              <div class="section-title">⌄ Functional Toolkit</div>
+              <div class="tree">
+                <div class="tree-row">⌄ src</div>
+                <div class="tree-row child selected">◇ functional_toolkit.py</div>
+                <div class="tree-row child">◇ test_toolkit.py</div>
+                <div class="tree-row">◇ pyproject.toml</div>
+                <div class="tree-row">◇ README.md</div>
+              </div>
+            </aside>
+
+            <section class="editor-area">
+              <div class="tabs">
+                <div class="tab">◇ functional_toolkit.py</div>
+                <div class="tab inactive">README.md</div>
+              </div>
+              <div class="breadcrumbs">functional-toolkit › src › functional_toolkit.py</div>
+              <div class="editor">
+                <div class="active-line"></div>
+                <div class="code"></div>
+              </div>
+              <div class="terminal">
+                <div class="panel-tabs">
+                  <span class="active">Terminal</span><span>Problems</span><span>Output</span>
+                </div>
+                <div class="terminal-body">
+                  <div><span class="prompt">functional-toolkit %</span> python -m pytest</div>
+                  <div>collected 3 items</div>
+                  <div>tests/test_toolkit.py ... <span class="tok-comment">passed</span></div>
+                </div>
+              </div>
+            </section>
+
+            <footer class="statusbar">
+              <div class="status-left">
+                <span class="remote">main</span>
+                <span>0 errors</span>
+                <span>0 warnings</span>
+              </div>
+              <div class="status-right">
+                <span>Ln 17, Col 1</span>
+                <span>Spaces: 4</span>
+                <span>UTF-8</span>
+                <span>Python 3.12</span>
+              </div>
+            </footer>
+          </section>
+        </main>
+        <style>
+          * {
+            box-sizing: border-box;
+            letter-spacing: 0;
+          }
+
+          html,
+          body {
+            margin: 0;
+            width: 1920px;
+            height: 1080px;
+            overflow: hidden;
+            background: #000000;
+            font-family:
+              Inter,
+              -apple-system,
+              BlinkMacSystemFont,
+              "Segoe UI",
+              sans-serif;
+          }
+
+          .vscode-theme-scene {
+            --activity-bg: #181818;
+            --activity-fg: #d7d7d7;
+            --activity-muted: #868686;
+            --activity-active: #0078d4;
+            --sidebar-bg: #181818;
+            --sidebar-fg: #cccccc;
+            --sidebar-border: #2b2b2b;
+            --tab-bg: #181818;
+            --tab-active-bg: #1f1f1f;
+            --tab-active-fg: #ffffff;
+            --tab-inactive-fg: #9d9d9d;
+            --tab-border: #2b2b2b;
+            --editor-bg: #1f1f1f;
+            --editor-fg: #cccccc;
+            --editor-line: rgba(255, 255, 255, 0.04);
+            --gutter-fg: #6e7681;
+            --gutter-active-fg: #cccccc;
+            --panel-bg: #181818;
+            --panel-border: #2b2b2b;
+            --status-bg: #181818;
+            --status-fg: #cccccc;
+            --status-border: #2b2b2b;
+            --title-bg: #181818;
+            --title-fg: #cccccc;
+            --token-comment: #6a9955;
+            --token-keyword: #c586c0;
+            --token-function: #dcdcaa;
+            --token-string: #ce9178;
+            --token-number: #b5cea8;
+            --token-variable: #9cdcfe;
+            --token-parameter: #9cdcfe;
+            --token-operator: #d4d4d4;
+            --token-punctuation: #d4d4d4;
+            --token-class-name: #4ec9b0;
+            position: relative;
+            width: 1920px;
+            height: 1080px;
+            overflow: hidden;
+            background:
+              linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.32)),
+              url("../assets/background.jpeg") center / cover no-repeat;
+            color: var(--editor-fg);
+          }
+
+          .scene-content {
+            position: relative;
+            z-index: 1;
+            width: 100%;
+            height: 100%;
+            padding: 54px 70px 92px;
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+            perspective: 2200px;
+            perspective-origin: 56% 52%;
+          }
+
+          .header {
+            display: flex;
+            align-items: end;
+            justify-content: space-between;
+            min-height: 66px;
+            text-shadow:
+              0 2px 12px rgba(0, 0, 0, 0.42),
+              0 14px 34px rgba(0, 0, 0, 0.32);
+          }
+
+          .kicker {
+            margin: 0 0 7px;
+            color: var(--gutter-fg);
+            font-size: 15px;
+            font-weight: 650;
+            text-transform: uppercase;
+            text-shadow:
+              0 2px 8px rgba(0, 0, 0, 0.48),
+              0 10px 26px rgba(0, 0, 0, 0.36);
+          }
+
+          .title {
+            margin: 0;
+            color: var(--editor-fg);
+            font-size: 44px;
+            line-height: 1;
+            font-weight: 760;
+          }
+
+          .source-note {
+            width: 510px;
+            color: var(--gutter-fg);
+            font-size: 16px;
+            line-height: 1.35;
+            text-align: right;
+            text-shadow:
+              0 2px 10px rgba(0, 0, 0, 0.46),
+              0 12px 30px rgba(0, 0, 0, 0.34);
+          }
+
+          .workbench {
+            height: 824px;
+            display: grid;
+            grid-template-columns: 54px 290px 1fr;
+            grid-template-rows: 36px 1fr 26px;
+            overflow: hidden;
+            border: 1px solid var(--sidebar-border);
+            border-radius: 8px;
+            background: var(--editor-bg);
+            box-shadow: 0 34px 90px rgba(0, 0, 0, 0.42);
+            transform: translateZ(0);
+            transform-origin: 82% 50%;
+            transform-style: preserve-3d;
+            will-change: transform;
+          }
+
+          .titlebar {
+            grid-column: 1 / -1;
+            display: grid;
+            grid-template-columns: 120px 1fr 210px;
+            align-items: center;
+            background: var(--title-bg);
+            color: var(--title-fg);
+            border-bottom: 1px solid var(--tab-border);
+            font-size: 12px;
+          }
+
+          .traffic {
+            display: flex;
+            gap: 8px;
+            padding-left: 18px;
+          }
+
+          .traffic span {
+            width: 12px;
+            height: 12px;
+            border-radius: 999px;
+          }
+
+          .traffic span:nth-child(1) {
+            background: #ff5f57;
+          }
+          .traffic span:nth-child(2) {
+            background: #ffbd2e;
+          }
+          .traffic span:nth-child(3) {
+            background: #28c840;
+          }
+
+          .window-title {
+            justify-self: center;
+            opacity: 0.84;
+          }
+
+          .command-center {
+            justify-self: end;
+            width: 176px;
+            height: 22px;
+            margin-right: 16px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border: 1px solid color-mix(in srgb, var(--title-fg), transparent 78%);
+            border-radius: 5px;
+            color: color-mix(in srgb, var(--title-fg), transparent 18%);
+          }
+
+          .activity {
+            grid-row: 2 / 3;
+            background: var(--activity-bg);
+            border-right: 1px solid var(--sidebar-border);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 10px 0;
+            gap: 18px;
+          }
+
+          .activity-icon {
+            width: 28px;
+            height: 28px;
+            color: var(--activity-muted);
+          }
+
+          .activity-icon.active {
+            color: var(--activity-fg);
+            border-left: 2px solid var(--activity-active);
+            padding-left: 4px;
+          }
+
+          .sidebar {
+            grid-row: 2 / 3;
+            background: var(--sidebar-bg);
+            color: var(--sidebar-fg);
+            border-right: 1px solid var(--sidebar-border);
+            display: flex;
+            flex-direction: column;
+            min-width: 0;
+          }
+
+          .sidebar-title {
+            height: 38px;
+            display: flex;
+            align-items: center;
+            padding: 0 20px;
+            color: var(--sidebar-fg);
+            font-size: 11px;
+            text-transform: uppercase;
+          }
+
+          .section-title {
+            height: 24px;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            padding: 0 14px;
+            background: color-mix(in srgb, var(--sidebar-bg), var(--sidebar-fg) 5%);
+            border-top: 1px solid var(--sidebar-border);
+            border-bottom: 1px solid var(--sidebar-border);
+            color: var(--sidebar-fg);
+            font-size: 11px;
+            font-weight: 700;
+          }
+
+          .tree {
+            padding: 8px 0;
+            font-size: 13px;
+            line-height: 24px;
+          }
+
+          .tree-row {
+            height: 24px;
+            display: flex;
+            align-items: center;
+            gap: 7px;
+            padding: 0 10px 0 18px;
+            color: color-mix(in srgb, var(--sidebar-fg), transparent 8%);
+            white-space: nowrap;
+          }
+
+          .tree-row.child {
+            padding-left: 34px;
+          }
+
+          .tree-row.selected {
+            background: color-mix(in srgb, var(--sidebar-fg), transparent 88%);
+            color: var(--sidebar-fg);
+          }
+
+          .editor-area {
+            grid-row: 2 / 3;
+            display: grid;
+            grid-template-rows: 36px 30px 1fr 138px;
+            min-width: 0;
+            background: var(--editor-bg);
+          }
+
+          .tabs {
+            display: flex;
+            background: var(--tab-bg);
+            border-bottom: 1px solid var(--tab-border);
+          }
+
+          .tab {
+            width: 205px;
+            height: 36px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 0 13px;
+            border-right: 1px solid var(--tab-border);
+            background: var(--tab-active-bg);
+            color: var(--tab-active-fg);
+            border-top: 2px solid var(--activity-active);
+            font-size: 13px;
+          }
+
+          .tab.inactive {
+            background: var(--tab-bg);
+            color: var(--tab-inactive-fg);
+            border-top-color: transparent;
+          }
+
+          .breadcrumbs {
+            display: flex;
+            align-items: center;
+            gap: 7px;
+            padding: 0 18px;
+            color: var(--gutter-fg);
+            border-bottom: 1px solid color-mix(in srgb, var(--tab-border), transparent 20%);
+            font-size: 12px;
+          }
+
+          .editor {
+            position: relative;
+            overflow: hidden;
+            background: var(--editor-bg);
+            color: var(--editor-fg);
+            font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+            font-size: 18px;
+            line-height: 1.52;
+          }
+
+          .active-line {
+            position: absolute;
+            left: 0;
+            right: 0;
+            top: 0;
+            height: 28px;
+            background: var(--editor-line);
+            will-change: transform;
+          }
+
+          .code {
+            position: relative;
+            padding: 20px 36px 18px 0;
+          }
+
+          .line {
+            height: 28px;
+            display: grid;
+            grid-template-columns: 72px 1fr;
+            align-items: center;
+          }
+
+          .line-number {
+            padding-right: 18px;
+            color: var(--gutter-fg);
+            text-align: right;
+            user-select: none;
+          }
+
+          .line.is-active .line-number {
+            color: var(--gutter-active-fg);
+          }
+
+          .line-code {
+            white-space: pre;
+          }
+
+          .char {
+            opacity: 0;
+          }
+
+          .tok-comment {
+            color: var(--token-comment);
+          }
+          .tok-keyword {
+            color: var(--token-keyword);
+          }
+          .tok-function {
+            color: var(--token-function);
+          }
+          .tok-string {
+            color: var(--token-string);
+          }
+          .tok-number {
+            color: var(--token-number);
+          }
+          .tok-variable {
+            color: var(--token-variable);
+          }
+          .tok-parameter {
+            color: var(--token-parameter);
+          }
+          .tok-operator {
+            color: var(--token-operator);
+          }
+          .tok-punctuation {
+            color: var(--token-punctuation);
+          }
+          .tok-class-name {
+            color: var(--token-class-name);
+          }
+
+          .caret {
+            position: absolute;
+            left: 0;
+            top: 0;
+            z-index: 3;
+            display: block;
+            width: 2px;
+            height: 22px;
+            background: var(--editor-fg);
+            pointer-events: none;
+            will-change: transform, opacity;
+          }
+
+          .terminal {
+            display: grid;
+            grid-template-rows: 32px 1fr;
+            background: var(--panel-bg);
+            border-top: 1px solid var(--panel-border);
+            color: var(--editor-fg);
+            font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+            font-size: 14px;
+          }
+
+          .panel-tabs {
+            display: flex;
+            align-items: center;
+            gap: 22px;
+            padding: 0 18px;
+            border-bottom: 1px solid var(--panel-border);
+            color: var(--gutter-fg);
+            font-family:
+              Inter,
+              -apple-system,
+              BlinkMacSystemFont,
+              "Segoe UI",
+              sans-serif;
+            font-size: 12px;
+            text-transform: uppercase;
+          }
+
+          .panel-tabs .active {
+            color: var(--editor-fg);
+            border-bottom: 1px solid var(--activity-active);
+            height: 32px;
+            display: flex;
+            align-items: center;
+          }
+
+          .terminal-body {
+            padding: 12px 20px;
+            color: var(--editor-fg);
+            line-height: 1.8;
+          }
+
+          .prompt {
+            color: var(--token-function);
+          }
+
+          .statusbar {
+            grid-column: 1 / -1;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            background: var(--status-bg);
+            color: var(--status-fg);
+            border-top: 1px solid var(--status-border);
+            font-size: 12px;
+          }
+
+          .status-left,
+          .status-right {
+            display: flex;
+            align-items: center;
+            gap: 18px;
+            padding: 0 12px;
+          }
+
+          .remote {
+            align-self: stretch;
+            display: flex;
+            align-items: center;
+            padding: 0 12px;
+            margin-left: -12px;
+            background: var(--status-remote-bg, var(--activity-active));
+            color: var(--status-remote-fg, #ffffff);
+          }
+
+          svg {
+            display: block;
+          }
+        </style>
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (() => {
+            const codeLines = [
+              [{ text: "# A small functional toolkit", token: "comment" }],
+              [
+                { text: "def", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "pluck_deep", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "key", token: "parameter" },
+                { text: "):", token: "punctuation" },
+              ],
+              [
+                { text: "    ", token: "plain" },
+                { text: "return", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "obj", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "reduce", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "acc", token: "parameter" },
+                { text: ", ", token: "punctuation" },
+                { text: "k", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "acc", token: "variable" },
+                { text: "[", token: "punctuation" },
+                { text: "k", token: "variable" },
+                { text: "]", token: "punctuation" },
+                { text: ", ", token: "punctuation" },
+                { text: "key", token: "variable" },
+                { text: ".split", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "'.'", token: "string" },
+                { text: "), ", token: "punctuation" },
+                { text: "obj", token: "variable" },
+                { text: ")", token: "punctuation" },
+              ],
+              [],
+              [
+                { text: "def", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "compose", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "*", token: "operator" },
+                { text: "fns", token: "parameter" },
+                { text: "):", token: "punctuation" },
+              ],
+              [
+                { text: "    ", token: "plain" },
+                { text: "return", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "res", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "reduce", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "acc", token: "parameter" },
+                { text: ", ", token: "punctuation" },
+                { text: "fn", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "fn", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "acc", token: "variable" },
+                { text: "), ", token: "punctuation" },
+                { text: "fns", token: "variable" },
+                { text: ", ", token: "punctuation" },
+                { text: "res", token: "variable" },
+                { text: ")", token: "punctuation" },
+              ],
+              [],
+              [
+                { text: "def", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "unfold", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "f", token: "parameter" },
+                { text: ", ", token: "punctuation" },
+                { text: "seed", token: "parameter" },
+                { text: "):", token: "punctuation" },
+              ],
+              [
+                { text: "    ", token: "plain" },
+                { text: '"""Build a list by repeatedly applying f to a seed."""', token: "string" },
+              ],
+              [
+                { text: "    acc", token: "variable" },
+                { text: " = ", token: "operator" },
+                { text: "[]", token: "punctuation" },
+              ],
+              [
+                { text: "    while", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "True", token: "className" },
+                { text: ":", token: "punctuation" },
+              ],
+              [
+                { text: "        result", token: "variable" },
+                { text: " = ", token: "operator" },
+                { text: "f", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "seed", token: "variable" },
+                { text: ")", token: "punctuation" },
+              ],
+              [
+                { text: "        if", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "result", token: "variable" },
+                { text: " is ", token: "keyword" },
+                { text: "None", token: "className" },
+                { text: ":", token: "punctuation" },
+              ],
+              [
+                { text: "            return", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "acc", token: "variable" },
+              ],
+              [
+                { text: "        acc", token: "variable" },
+                { text: ".append", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "result", token: "variable" },
+                { text: "[", token: "punctuation" },
+                { text: "0", token: "number" },
+                { text: "])", token: "punctuation" },
+              ],
+              [
+                { text: "        seed", token: "variable" },
+                { text: " = ", token: "operator" },
+                { text: "result", token: "variable" },
+                { text: "[", token: "punctuation" },
+                { text: "1", token: "number" },
+                { text: "]", token: "punctuation" },
+              ],
+              [],
+            ];
+
+            const fallback = {
+              "activityBar.background": "#181818",
+              "activityBar.foreground": "#d7d7d7",
+              "activityBar.inactiveForeground": "#868686",
+              "activityBar.activeBorder": "#0078d4",
+              "sideBar.background": "#181818",
+              "sideBar.foreground": "#cccccc",
+              "sideBar.border": "#2b2b2b",
+              "tab.activeBackground": "#1f1f1f",
+              "tab.activeForeground": "#ffffff",
+              "tab.inactiveBackground": "#181818",
+              "tab.inactiveForeground": "#9d9d9d",
+              "tab.border": "#2b2b2b",
+              "editor.background": "#1f1f1f",
+              "editor.foreground": "#cccccc",
+              "editor.lineHighlightBackground": "#ffffff0a",
+              "editorLineNumber.foreground": "#6e7681",
+              "editorLineNumber.activeForeground": "#cccccc",
+              "panel.background": "#181818",
+              "panel.border": "#2b2b2b",
+              "statusBar.background": "#181818",
+              "statusBar.foreground": "#cccccc",
+              "statusBar.border": "#2b2b2b",
+              "titleBar.activeBackground": "#181818",
+              "titleBar.activeForeground": "#cccccc",
+            };
+
+            function color(theme, key) {
+              return theme.colors[key] || fallback[key] || theme.colors.foreground || "#cccccc";
+            }
+
+            function solarizedGrey(theme) {
+              return (
+                theme.colors["tab.inactiveForeground"] ||
+                theme.colors["editor.foreground"] ||
+                "#586E75"
+              );
+            }
+
+            function setVar(root, name, value) {
+              root.style.setProperty(name, value);
+            }
+
+            function applyTheme(root, theme) {
+              const solarizedUiGrey = theme.id === "solarized-light" ? solarizedGrey(theme) : null;
+              setVar(root, "--activity-bg", color(theme, "activityBar.background"));
+              setVar(
+                root,
+                "--activity-fg",
+                solarizedUiGrey || color(theme, "activityBar.foreground"),
+              );
+              setVar(
+                root,
+                "--activity-muted",
+                solarizedUiGrey || color(theme, "activityBar.inactiveForeground"),
+              );
+              setVar(root, "--activity-active", color(theme, "activityBar.activeBorder"));
+              setVar(root, "--sidebar-bg", color(theme, "sideBar.background"));
+              setVar(root, "--sidebar-fg", solarizedUiGrey || color(theme, "sideBar.foreground"));
+              setVar(root, "--sidebar-border", color(theme, "sideBar.border"));
+              setVar(root, "--tab-bg", color(theme, "tab.inactiveBackground"));
+              setVar(root, "--tab-active-bg", color(theme, "tab.activeBackground"));
+              setVar(
+                root,
+                "--tab-active-fg",
+                solarizedUiGrey || color(theme, "tab.activeForeground"),
+              );
+              setVar(
+                root,
+                "--tab-inactive-fg",
+                solarizedUiGrey || color(theme, "tab.inactiveForeground"),
+              );
+              setVar(root, "--tab-border", color(theme, "tab.border"));
+              setVar(root, "--editor-bg", color(theme, "editor.background"));
+              setVar(root, "--editor-fg", color(theme, "editor.foreground"));
+              setVar(root, "--editor-line", color(theme, "editor.lineHighlightBackground"));
+              setVar(root, "--gutter-fg", color(theme, "editorLineNumber.foreground"));
+              setVar(root, "--gutter-active-fg", color(theme, "editorLineNumber.activeForeground"));
+              setVar(root, "--panel-bg", color(theme, "panel.background"));
+              setVar(root, "--panel-border", color(theme, "panel.border"));
+              setVar(root, "--status-bg", color(theme, "statusBar.background"));
+              setVar(root, "--status-fg", color(theme, "statusBar.foreground"));
+              setVar(root, "--status-border", color(theme, "statusBar.border"));
+              setVar(root, "--status-remote-bg", color(theme, "statusBarItem.remoteBackground"));
+              setVar(
+                root,
+                "--status-remote-fg",
+                solarizedUiGrey || color(theme, "statusBarItem.remoteForeground"),
+              );
+              setVar(root, "--title-bg", color(theme, "titleBar.activeBackground"));
+              setVar(
+                root,
+                "--title-fg",
+                solarizedUiGrey || color(theme, "titleBar.activeForeground"),
+              );
+              setVar(root, "--token-comment", theme.tokens.comment);
+              setVar(root, "--token-keyword", theme.tokens.keyword);
+              setVar(root, "--token-function", theme.tokens.function);
+              setVar(root, "--token-string", theme.tokens.string);
+              setVar(root, "--token-number", theme.tokens.number);
+              setVar(root, "--token-variable", theme.tokens.variable);
+              setVar(root, "--token-parameter", theme.tokens.parameter);
+              setVar(root, "--token-operator", theme.tokens.operator);
+              setVar(root, "--token-punctuation", theme.tokens.punctuation);
+              setVar(root, "--token-class-name", theme.tokens.className);
+            }
+
+            function renderCode(root) {
+              const code = root.querySelector(".code");
+              codeLines.forEach((segments, index) => {
+                const line = document.createElement("div");
+                line.className = "line";
+                line.dataset.lineIndex = String(index);
+
+                const lineNumber = document.createElement("span");
+                lineNumber.className = "line-number";
+                lineNumber.textContent = String(index + 1);
+                line.appendChild(lineNumber);
+
+                const lineCode = document.createElement("span");
+                lineCode.className = "line-code";
+                segments.forEach((segment) => {
+                  [...segment.text].forEach((char) => {
+                    const span = document.createElement("span");
+                    span.className =
+                      segment.token === "plain"
+                        ? "char"
+                        : "char tok-" +
+                          segment.token.replace(/[A-Z]/g, (match) => "-" + match.toLowerCase());
+                    span.dataset.lineIndex = String(index);
+                    span.textContent = char;
+                    lineCode.appendChild(span);
+                  });
+                });
+                line.appendChild(lineCode);
+                code.appendChild(line);
+              });
+
+              const caret = document.createElement("span");
+              caret.className = "caret";
+              root.querySelector(".editor").appendChild(caret);
+            }
+
+            function caretPointForElement(editor, el) {
+              const editorBox = editor.getBoundingClientRect();
+              const charBox = el.getBoundingClientRect();
+              return {
+                x: charBox.right - editorBox.left + 2,
+                y: charBox.top - editorBox.top + 3,
+              };
+            }
+
+            function caretPointForLineStart(editor, line) {
+              const editorBox = editor.getBoundingClientRect();
+              const lineBox = line.getBoundingClientRect();
+              const codeBox = line.querySelector(".line-code").getBoundingClientRect();
+              return {
+                x: codeBox.left - editorBox.left,
+                y: lineBox.top - editorBox.top + 3,
+              };
+            }
+
+            function lineHighlightY(editor, line) {
+              const editorBox = editor.getBoundingClientRect();
+              const lineBox = line.getBoundingClientRect();
+              return lineBox.top - editorBox.top;
+            }
+
+            function buildTimeline(root, compositionId) {
+              const tl = gsap.timeline({ paused: true });
+              const editor = root.querySelector(".editor");
+              const caret = root.querySelector(".caret");
+              const activeLine = root.querySelector(".active-line");
+              const lineEls = gsap.utils.toArray(root.querySelectorAll(".line"));
+              const lineStartTimes = [];
+              const charSchedule = [];
+              let cursorTime = 0.95;
+
+              lineEls.forEach((line, lineIndex) => {
+                const lineChars = gsap.utils.toArray(line.querySelectorAll(".char"));
+                lineStartTimes[lineIndex] = cursorTime;
+                lineChars.forEach((char, charIndex) => {
+                  charSchedule.push({ char, time: cursorTime + charIndex * 0.012 });
+                });
+                cursorTime += Math.max(lineChars.length * 0.012, 0.08) + 0.045;
+              });
+
+              gsap.set(activeLine, { y: lineHighlightY(editor, lineEls[0]) });
+              gsap.set(caret, caretPointForLineStart(editor, lineEls[0]));
+
+              tl.from(
+                root.querySelector(".header"),
+                { y: 24, opacity: 0, duration: 0.45, ease: "power3.out" },
+                0,
+              );
+              tl.from(
+                root.querySelector(".workbench"),
+                { y: 42, opacity: 0, scale: 0.986, duration: 0.58, ease: "power3.out" },
+                0.1,
+              );
+              tl.from(activeLine, { opacity: 0, duration: 0.22, ease: "power2.out" }, 0.74);
+              lineStartTimes.forEach((time, lineIndex) => {
+                const line = lineEls[lineIndex];
+                tl.set(activeLine, { y: lineHighlightY(editor, line) }, time);
+                tl.set(caret, caretPointForLineStart(editor, line), time);
+                tl.call(
+                  () => {
+                    lineEls.forEach((item) => item.classList.toggle("is-active", item === line));
+                  },
+                  [],
+                  time,
+                );
+              });
+              charSchedule.forEach(({ char, time }) => {
+                tl.set(char, { opacity: 1 }, time);
+                tl.set(caret, caretPointForElement(editor, char), time + 0.002);
+              });
+              tl.to(
+                root.querySelector(".caret"),
+                { opacity: 0, duration: 0.34, repeat: 25, yoyo: true, ease: "steps(1)" },
+                0.95,
+              );
+              tl.from(
+                root.querySelector(".terminal"),
+                { y: 140, opacity: 0, duration: 0.56, ease: "power3.out" },
+                7.55,
+              );
+              tl.from(
+                root.querySelector(".terminal-body").children,
+                { opacity: 0, y: 8, duration: 0.24, stagger: 0.16, ease: "power2.out" },
+                8.05,
+              );
+              tl.to(
+                root.querySelector(".workbench"),
+                { rotateY: -10.5, z: 74, duration: 0.72, ease: "power2.inOut" },
+                9.35,
+              );
+              tl.to(
+                root.querySelector(".workbench"),
+                { rotateY: 0, z: 0, duration: 0.62, ease: "power2.inOut" },
+                10.08,
+              );
+
+              window.__timelines = window.__timelines || {};
+              window.__timelines[compositionId] = tl;
+
+              const previewTime = new URLSearchParams(window.location.search).get("t");
+              if (previewTime !== null) {
+                tl.time(Number(previewTime));
+              }
+            }
+
+            window.createVSCodeThemeComposition = (compositionId, themeOrId) => {
+              const root =
+                document.querySelector(
+                  '[data-composition-id="' + compositionId + '"] .vscode-theme-scene',
+                ) ||
+                document.querySelector(
+                  '.vscode-theme-scene[data-composition-id="' + compositionId + '"]',
+                ) ||
+                document.querySelector('[data-composition-id="' + compositionId + '"]');
+              const theme =
+                typeof themeOrId === "string"
+                  ? window.VSCODE_THEME_REGISTRY.find((item) => item.id === themeOrId)
+                  : themeOrId;
+              if (!root || !theme) return;
+              root.querySelector(".theme-label").textContent = theme.label;
+              root.querySelector(".theme-source").textContent = theme.sourceFile;
+              applyTheme(root, theme);
+              renderCode(root);
+              buildTimeline(root, compositionId);
+            };
+          })();
+        </script>
+        <script>
+          window.__timelines = window.__timelines || {};
+          window.__timelines["vscode-dark-modern"] =
+            window.__timelines["vscode-dark-modern"] || gsap.timeline({ paused: true });
+          window.createVSCodeThemeComposition("vscode-dark-modern", {
+            id: "dark-modern",
+            label: "Dark Modern",
+            sourceFile: "dark_modern.json",
+            uiTheme: "vs-dark",
+            colors: {
+              "activityBar.activeBorder": "#0078D4",
+              "activityBar.background": "#181818",
+              "activityBar.border": "#2B2B2B",
+              "activityBar.foreground": "#D7D7D7",
+              "activityBar.inactiveForeground": "#868686",
+              "editor.background": "#1F1F1F",
+              "editor.foreground": "#CCCCCC",
+              "editorGroup.border": "#FFFFFF17",
+              "editorGroupHeader.tabsBackground": "#181818",
+              "editorGroupHeader.tabsBorder": "#2B2B2B",
+              "editorLineNumber.activeForeground": "#CCCCCC",
+              "editorLineNumber.foreground": "#6E7681",
+              foreground: "#CCCCCC",
+              "icon.foreground": "#CCCCCC",
+              "panel.background": "#181818",
+              "panel.border": "#2B2B2B",
+              "sideBar.background": "#181818",
+              "sideBar.border": "#2B2B2B",
+              "sideBar.foreground": "#CCCCCC",
+              "sideBarSectionHeader.background": "#181818",
+              "sideBarSectionHeader.border": "#2B2B2B",
+              "sideBarSectionHeader.foreground": "#CCCCCC",
+              "sideBarTitle.foreground": "#CCCCCC",
+              "statusBar.background": "#181818",
+              "statusBar.border": "#2B2B2B",
+              "statusBar.foreground": "#CCCCCC",
+              "statusBarItem.remoteBackground": "#0078D4",
+              "statusBarItem.remoteForeground": "#FFFFFF",
+              "tab.activeBackground": "#1F1F1F",
+              "tab.activeBorder": "#1F1F1F",
+              "tab.activeBorderTop": "#0078D4",
+              "tab.activeForeground": "#FFFFFF",
+              "tab.border": "#2B2B2B",
+              "tab.inactiveBackground": "#181818",
+              "tab.inactiveForeground": "#9D9D9D",
+              "terminal.foreground": "#CCCCCC",
+              "titleBar.activeBackground": "#181818",
+              "titleBar.activeForeground": "#CCCCCC",
+            },
+            tokens: {
+              comment: "#6A9955",
+              keyword: "#d7ba7d",
+              function: "#DCDCAA",
+              string: "#d16969",
+              number: "#b5cea8",
+              variable: "#4FC1FF",
+              parameter: "#9CDCFE",
+              operator: "#d7ba7d",
+              punctuation: "#CE9178",
+              className: "#4EC9B0",
+            },
+          });
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/code-snippet-dark-plus/background.jpeg b/docs/public/catalog/blocks/code-snippet-dark-plus/background.jpeg
new file mode 100644
index 0000000000..1f3e465cd2
Binary files /dev/null and b/docs/public/catalog/blocks/code-snippet-dark-plus/background.jpeg differ
diff --git a/docs/public/catalog/blocks/code-snippet-dark-plus/code-snippet-dark-plus.html b/docs/public/catalog/blocks/code-snippet-dark-plus/code-snippet-dark-plus.html
new file mode 100644
index 0000000000..a1049df31a
--- /dev/null
+++ b/docs/public/catalog/blocks/code-snippet-dark-plus/code-snippet-dark-plus.html
@@ -0,0 +1,1055 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Dark+ VS Code Theme Composition</title>
+  </head>
+  <body>
+    <template id="vscode-dark-plus-template">
+      <div
+        class="vscode-theme-scene"
+        data-composition-id="vscode-dark-plus"
+        data-width="1920"
+        data-height="1080"
+      >
+        <main class="scene-content">
+          <section class="header">
+            <div>
+              <p class="kicker">Official VS Code built-in theme</p>
+              <h1 class="title"><span class="theme-label">Dark+</span></h1>
+            </div>
+            <p class="source-note">
+              Typing `functional_toolkit.py` with workbench colors from
+              <span class="theme-source">dark_plus.json</span>.
+            </p>
+          </section>
+
+          <section class="workbench">
+            <div class="titlebar">
+              <div class="traffic"><span></span><span></span><span></span></div>
+              <div class="window-title">functional-toolkit - Visual Studio Code</div>
+              <div class="command-center">Search</div>
+            </div>
+
+            <aside class="activity" aria-label="Activity bar">
+              <svg class="activity-icon active" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="currentColor"
+                  d="M4 4h7v7H4V4Zm9 0h7v7h-7V4ZM4 13h7v7H4v-7Zm9 0h7v7h-7v-7Z"
+                />
+              </svg>
+              <svg class="activity-icon" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  d="m21 21-5.2-5.2M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Z"
+                />
+              </svg>
+              <svg class="activity-icon" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  d="M8 18 3 12l5-6m8 12 5-6-5-6"
+                />
+              </svg>
+              <svg class="activity-icon" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  d="M12 3v18m0-18 6 6m-6-6L6 9m6 12 6-6m-6 6-6-6"
+                />
+              </svg>
+            </aside>
+
+            <aside class="sidebar">
+              <div class="sidebar-title">Explorer</div>
+              <div class="section-title">⌄ Functional Toolkit</div>
+              <div class="tree">
+                <div class="tree-row">⌄ src</div>
+                <div class="tree-row child selected">◇ functional_toolkit.py</div>
+                <div class="tree-row child">◇ test_toolkit.py</div>
+                <div class="tree-row">◇ pyproject.toml</div>
+                <div class="tree-row">◇ README.md</div>
+              </div>
+            </aside>
+
+            <section class="editor-area">
+              <div class="tabs">
+                <div class="tab">◇ functional_toolkit.py</div>
+                <div class="tab inactive">README.md</div>
+              </div>
+              <div class="breadcrumbs">functional-toolkit › src › functional_toolkit.py</div>
+              <div class="editor">
+                <div class="active-line"></div>
+                <div class="code"></div>
+              </div>
+              <div class="terminal">
+                <div class="panel-tabs">
+                  <span class="active">Terminal</span><span>Problems</span><span>Output</span>
+                </div>
+                <div class="terminal-body">
+                  <div><span class="prompt">functional-toolkit %</span> python -m pytest</div>
+                  <div>collected 3 items</div>
+                  <div>tests/test_toolkit.py ... <span class="tok-comment">passed</span></div>
+                </div>
+              </div>
+            </section>
+
+            <footer class="statusbar">
+              <div class="status-left">
+                <span class="remote">main</span>
+                <span>0 errors</span>
+                <span>0 warnings</span>
+              </div>
+              <div class="status-right">
+                <span>Ln 17, Col 1</span>
+                <span>Spaces: 4</span>
+                <span>UTF-8</span>
+                <span>Python 3.12</span>
+              </div>
+            </footer>
+          </section>
+        </main>
+        <style>
+          * {
+            box-sizing: border-box;
+            letter-spacing: 0;
+          }
+
+          html,
+          body {
+            margin: 0;
+            width: 1920px;
+            height: 1080px;
+            overflow: hidden;
+            background: #000000;
+            font-family:
+              Inter,
+              -apple-system,
+              BlinkMacSystemFont,
+              "Segoe UI",
+              sans-serif;
+          }
+
+          .vscode-theme-scene {
+            --activity-bg: #181818;
+            --activity-fg: #d7d7d7;
+            --activity-muted: #868686;
+            --activity-active: #0078d4;
+            --sidebar-bg: #181818;
+            --sidebar-fg: #cccccc;
+            --sidebar-border: #2b2b2b;
+            --tab-bg: #181818;
+            --tab-active-bg: #1f1f1f;
+            --tab-active-fg: #ffffff;
+            --tab-inactive-fg: #9d9d9d;
+            --tab-border: #2b2b2b;
+            --editor-bg: #1f1f1f;
+            --editor-fg: #cccccc;
+            --editor-line: rgba(255, 255, 255, 0.04);
+            --gutter-fg: #6e7681;
+            --gutter-active-fg: #cccccc;
+            --panel-bg: #181818;
+            --panel-border: #2b2b2b;
+            --status-bg: #181818;
+            --status-fg: #cccccc;
+            --status-border: #2b2b2b;
+            --title-bg: #181818;
+            --title-fg: #cccccc;
+            --token-comment: #6a9955;
+            --token-keyword: #c586c0;
+            --token-function: #dcdcaa;
+            --token-string: #ce9178;
+            --token-number: #b5cea8;
+            --token-variable: #9cdcfe;
+            --token-parameter: #9cdcfe;
+            --token-operator: #d4d4d4;
+            --token-punctuation: #d4d4d4;
+            --token-class-name: #4ec9b0;
+            position: relative;
+            width: 1920px;
+            height: 1080px;
+            overflow: hidden;
+            background:
+              linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.32)),
+              url("../assets/background.jpeg") center / cover no-repeat;
+            color: var(--editor-fg);
+          }
+
+          .scene-content {
+            position: relative;
+            z-index: 1;
+            width: 100%;
+            height: 100%;
+            padding: 54px 70px 92px;
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+            perspective: 2200px;
+            perspective-origin: 56% 52%;
+          }
+
+          .header {
+            display: flex;
+            align-items: end;
+            justify-content: space-between;
+            min-height: 66px;
+            text-shadow:
+              0 2px 12px rgba(0, 0, 0, 0.42),
+              0 14px 34px rgba(0, 0, 0, 0.32);
+          }
+
+          .kicker {
+            margin: 0 0 7px;
+            color: var(--gutter-fg);
+            font-size: 15px;
+            font-weight: 650;
+            text-transform: uppercase;
+            text-shadow:
+              0 2px 8px rgba(0, 0, 0, 0.48),
+              0 10px 26px rgba(0, 0, 0, 0.36);
+          }
+
+          .title {
+            margin: 0;
+            color: var(--editor-fg);
+            font-size: 44px;
+            line-height: 1;
+            font-weight: 760;
+          }
+
+          .source-note {
+            width: 510px;
+            color: var(--gutter-fg);
+            font-size: 16px;
+            line-height: 1.35;
+            text-align: right;
+            text-shadow:
+              0 2px 10px rgba(0, 0, 0, 0.46),
+              0 12px 30px rgba(0, 0, 0, 0.34);
+          }
+
+          .workbench {
+            height: 824px;
+            display: grid;
+            grid-template-columns: 54px 290px 1fr;
+            grid-template-rows: 36px 1fr 26px;
+            overflow: hidden;
+            border: 1px solid var(--sidebar-border);
+            border-radius: 8px;
+            background: var(--editor-bg);
+            box-shadow: 0 34px 90px rgba(0, 0, 0, 0.42);
+            transform: translateZ(0);
+            transform-origin: 82% 50%;
+            transform-style: preserve-3d;
+            will-change: transform;
+          }
+
+          .titlebar {
+            grid-column: 1 / -1;
+            display: grid;
+            grid-template-columns: 120px 1fr 210px;
+            align-items: center;
+            background: var(--title-bg);
+            color: var(--title-fg);
+            border-bottom: 1px solid var(--tab-border);
+            font-size: 12px;
+          }
+
+          .traffic {
+            display: flex;
+            gap: 8px;
+            padding-left: 18px;
+          }
+
+          .traffic span {
+            width: 12px;
+            height: 12px;
+            border-radius: 999px;
+          }
+
+          .traffic span:nth-child(1) {
+            background: #ff5f57;
+          }
+          .traffic span:nth-child(2) {
+            background: #ffbd2e;
+          }
+          .traffic span:nth-child(3) {
+            background: #28c840;
+          }
+
+          .window-title {
+            justify-self: center;
+            opacity: 0.84;
+          }
+
+          .command-center {
+            justify-self: end;
+            width: 176px;
+            height: 22px;
+            margin-right: 16px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border: 1px solid color-mix(in srgb, var(--title-fg), transparent 78%);
+            border-radius: 5px;
+            color: color-mix(in srgb, var(--title-fg), transparent 18%);
+          }
+
+          .activity {
+            grid-row: 2 / 3;
+            background: var(--activity-bg);
+            border-right: 1px solid var(--sidebar-border);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 10px 0;
+            gap: 18px;
+          }
+
+          .activity-icon {
+            width: 28px;
+            height: 28px;
+            color: var(--activity-muted);
+          }
+
+          .activity-icon.active {
+            color: var(--activity-fg);
+            border-left: 2px solid var(--activity-active);
+            padding-left: 4px;
+          }
+
+          .sidebar {
+            grid-row: 2 / 3;
+            background: var(--sidebar-bg);
+            color: var(--sidebar-fg);
+            border-right: 1px solid var(--sidebar-border);
+            display: flex;
+            flex-direction: column;
+            min-width: 0;
+          }
+
+          .sidebar-title {
+            height: 38px;
+            display: flex;
+            align-items: center;
+            padding: 0 20px;
+            color: var(--sidebar-fg);
+            font-size: 11px;
+            text-transform: uppercase;
+          }
+
+          .section-title {
+            height: 24px;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            padding: 0 14px;
+            background: color-mix(in srgb, var(--sidebar-bg), var(--sidebar-fg) 5%);
+            border-top: 1px solid var(--sidebar-border);
+            border-bottom: 1px solid var(--sidebar-border);
+            color: var(--sidebar-fg);
+            font-size: 11px;
+            font-weight: 700;
+          }
+
+          .tree {
+            padding: 8px 0;
+            font-size: 13px;
+            line-height: 24px;
+          }
+
+          .tree-row {
+            height: 24px;
+            display: flex;
+            align-items: center;
+            gap: 7px;
+            padding: 0 10px 0 18px;
+            color: color-mix(in srgb, var(--sidebar-fg), transparent 8%);
+            white-space: nowrap;
+          }
+
+          .tree-row.child {
+            padding-left: 34px;
+          }
+
+          .tree-row.selected {
+            background: color-mix(in srgb, var(--sidebar-fg), transparent 88%);
+            color: var(--sidebar-fg);
+          }
+
+          .editor-area {
+            grid-row: 2 / 3;
+            display: grid;
+            grid-template-rows: 36px 30px 1fr 138px;
+            min-width: 0;
+            background: var(--editor-bg);
+          }
+
+          .tabs {
+            display: flex;
+            background: var(--tab-bg);
+            border-bottom: 1px solid var(--tab-border);
+          }
+
+          .tab {
+            width: 205px;
+            height: 36px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 0 13px;
+            border-right: 1px solid var(--tab-border);
+            background: var(--tab-active-bg);
+            color: var(--tab-active-fg);
+            border-top: 2px solid var(--activity-active);
+            font-size: 13px;
+          }
+
+          .tab.inactive {
+            background: var(--tab-bg);
+            color: var(--tab-inactive-fg);
+            border-top-color: transparent;
+          }
+
+          .breadcrumbs {
+            display: flex;
+            align-items: center;
+            gap: 7px;
+            padding: 0 18px;
+            color: var(--gutter-fg);
+            border-bottom: 1px solid color-mix(in srgb, var(--tab-border), transparent 20%);
+            font-size: 12px;
+          }
+
+          .editor {
+            position: relative;
+            overflow: hidden;
+            background: var(--editor-bg);
+            color: var(--editor-fg);
+            font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+            font-size: 18px;
+            line-height: 1.52;
+          }
+
+          .active-line {
+            position: absolute;
+            left: 0;
+            right: 0;
+            top: 0;
+            height: 28px;
+            background: var(--editor-line);
+            will-change: transform;
+          }
+
+          .code {
+            position: relative;
+            padding: 20px 36px 18px 0;
+          }
+
+          .line {
+            height: 28px;
+            display: grid;
+            grid-template-columns: 72px 1fr;
+            align-items: center;
+          }
+
+          .line-number {
+            padding-right: 18px;
+            color: var(--gutter-fg);
+            text-align: right;
+            user-select: none;
+          }
+
+          .line.is-active .line-number {
+            color: var(--gutter-active-fg);
+          }
+
+          .line-code {
+            white-space: pre;
+          }
+
+          .char {
+            opacity: 0;
+          }
+
+          .tok-comment {
+            color: var(--token-comment);
+          }
+          .tok-keyword {
+            color: var(--token-keyword);
+          }
+          .tok-function {
+            color: var(--token-function);
+          }
+          .tok-string {
+            color: var(--token-string);
+          }
+          .tok-number {
+            color: var(--token-number);
+          }
+          .tok-variable {
+            color: var(--token-variable);
+          }
+          .tok-parameter {
+            color: var(--token-parameter);
+          }
+          .tok-operator {
+            color: var(--token-operator);
+          }
+          .tok-punctuation {
+            color: var(--token-punctuation);
+          }
+          .tok-class-name {
+            color: var(--token-class-name);
+          }
+
+          .caret {
+            position: absolute;
+            left: 0;
+            top: 0;
+            z-index: 3;
+            display: block;
+            width: 2px;
+            height: 22px;
+            background: var(--editor-fg);
+            pointer-events: none;
+            will-change: transform, opacity;
+          }
+
+          .terminal {
+            display: grid;
+            grid-template-rows: 32px 1fr;
+            background: var(--panel-bg);
+            border-top: 1px solid var(--panel-border);
+            color: var(--editor-fg);
+            font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+            font-size: 14px;
+          }
+
+          .panel-tabs {
+            display: flex;
+            align-items: center;
+            gap: 22px;
+            padding: 0 18px;
+            border-bottom: 1px solid var(--panel-border);
+            color: var(--gutter-fg);
+            font-family:
+              Inter,
+              -apple-system,
+              BlinkMacSystemFont,
+              "Segoe UI",
+              sans-serif;
+            font-size: 12px;
+            text-transform: uppercase;
+          }
+
+          .panel-tabs .active {
+            color: var(--editor-fg);
+            border-bottom: 1px solid var(--activity-active);
+            height: 32px;
+            display: flex;
+            align-items: center;
+          }
+
+          .terminal-body {
+            padding: 12px 20px;
+            color: var(--editor-fg);
+            line-height: 1.8;
+          }
+
+          .prompt {
+            color: var(--token-function);
+          }
+
+          .statusbar {
+            grid-column: 1 / -1;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            background: var(--status-bg);
+            color: var(--status-fg);
+            border-top: 1px solid var(--status-border);
+            font-size: 12px;
+          }
+
+          .status-left,
+          .status-right {
+            display: flex;
+            align-items: center;
+            gap: 18px;
+            padding: 0 12px;
+          }
+
+          .remote {
+            align-self: stretch;
+            display: flex;
+            align-items: center;
+            padding: 0 12px;
+            margin-left: -12px;
+            background: var(--status-remote-bg, var(--activity-active));
+            color: var(--status-remote-fg, #ffffff);
+          }
+
+          svg {
+            display: block;
+          }
+        </style>
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (() => {
+            const codeLines = [
+              [{ text: "# A small functional toolkit", token: "comment" }],
+              [
+                { text: "def", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "pluck_deep", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "key", token: "parameter" },
+                { text: "):", token: "punctuation" },
+              ],
+              [
+                { text: "    ", token: "plain" },
+                { text: "return", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "obj", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "reduce", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "acc", token: "parameter" },
+                { text: ", ", token: "punctuation" },
+                { text: "k", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "acc", token: "variable" },
+                { text: "[", token: "punctuation" },
+                { text: "k", token: "variable" },
+                { text: "]", token: "punctuation" },
+                { text: ", ", token: "punctuation" },
+                { text: "key", token: "variable" },
+                { text: ".split", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "'.'", token: "string" },
+                { text: "), ", token: "punctuation" },
+                { text: "obj", token: "variable" },
+                { text: ")", token: "punctuation" },
+              ],
+              [],
+              [
+                { text: "def", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "compose", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "*", token: "operator" },
+                { text: "fns", token: "parameter" },
+                { text: "):", token: "punctuation" },
+              ],
+              [
+                { text: "    ", token: "plain" },
+                { text: "return", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "res", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "reduce", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "acc", token: "parameter" },
+                { text: ", ", token: "punctuation" },
+                { text: "fn", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "fn", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "acc", token: "variable" },
+                { text: "), ", token: "punctuation" },
+                { text: "fns", token: "variable" },
+                { text: ", ", token: "punctuation" },
+                { text: "res", token: "variable" },
+                { text: ")", token: "punctuation" },
+              ],
+              [],
+              [
+                { text: "def", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "unfold", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "f", token: "parameter" },
+                { text: ", ", token: "punctuation" },
+                { text: "seed", token: "parameter" },
+                { text: "):", token: "punctuation" },
+              ],
+              [
+                { text: "    ", token: "plain" },
+                { text: '"""Build a list by repeatedly applying f to a seed."""', token: "string" },
+              ],
+              [
+                { text: "    acc", token: "variable" },
+                { text: " = ", token: "operator" },
+                { text: "[]", token: "punctuation" },
+              ],
+              [
+                { text: "    while", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "True", token: "className" },
+                { text: ":", token: "punctuation" },
+              ],
+              [
+                { text: "        result", token: "variable" },
+                { text: " = ", token: "operator" },
+                { text: "f", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "seed", token: "variable" },
+                { text: ")", token: "punctuation" },
+              ],
+              [
+                { text: "        if", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "result", token: "variable" },
+                { text: " is ", token: "keyword" },
+                { text: "None", token: "className" },
+                { text: ":", token: "punctuation" },
+              ],
+              [
+                { text: "            return", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "acc", token: "variable" },
+              ],
+              [
+                { text: "        acc", token: "variable" },
+                { text: ".append", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "result", token: "variable" },
+                { text: "[", token: "punctuation" },
+                { text: "0", token: "number" },
+                { text: "])", token: "punctuation" },
+              ],
+              [
+                { text: "        seed", token: "variable" },
+                { text: " = ", token: "operator" },
+                { text: "result", token: "variable" },
+                { text: "[", token: "punctuation" },
+                { text: "1", token: "number" },
+                { text: "]", token: "punctuation" },
+              ],
+              [],
+            ];
+
+            const fallback = {
+              "activityBar.background": "#181818",
+              "activityBar.foreground": "#d7d7d7",
+              "activityBar.inactiveForeground": "#868686",
+              "activityBar.activeBorder": "#0078d4",
+              "sideBar.background": "#181818",
+              "sideBar.foreground": "#cccccc",
+              "sideBar.border": "#2b2b2b",
+              "tab.activeBackground": "#1f1f1f",
+              "tab.activeForeground": "#ffffff",
+              "tab.inactiveBackground": "#181818",
+              "tab.inactiveForeground": "#9d9d9d",
+              "tab.border": "#2b2b2b",
+              "editor.background": "#1f1f1f",
+              "editor.foreground": "#cccccc",
+              "editor.lineHighlightBackground": "#ffffff0a",
+              "editorLineNumber.foreground": "#6e7681",
+              "editorLineNumber.activeForeground": "#cccccc",
+              "panel.background": "#181818",
+              "panel.border": "#2b2b2b",
+              "statusBar.background": "#181818",
+              "statusBar.foreground": "#cccccc",
+              "statusBar.border": "#2b2b2b",
+              "titleBar.activeBackground": "#181818",
+              "titleBar.activeForeground": "#cccccc",
+            };
+
+            function color(theme, key) {
+              return theme.colors[key] || fallback[key] || theme.colors.foreground || "#cccccc";
+            }
+
+            function solarizedGrey(theme) {
+              return (
+                theme.colors["tab.inactiveForeground"] ||
+                theme.colors["editor.foreground"] ||
+                "#586E75"
+              );
+            }
+
+            function setVar(root, name, value) {
+              root.style.setProperty(name, value);
+            }
+
+            function applyTheme(root, theme) {
+              const solarizedUiGrey = theme.id === "solarized-light" ? solarizedGrey(theme) : null;
+              setVar(root, "--activity-bg", color(theme, "activityBar.background"));
+              setVar(
+                root,
+                "--activity-fg",
+                solarizedUiGrey || color(theme, "activityBar.foreground"),
+              );
+              setVar(
+                root,
+                "--activity-muted",
+                solarizedUiGrey || color(theme, "activityBar.inactiveForeground"),
+              );
+              setVar(root, "--activity-active", color(theme, "activityBar.activeBorder"));
+              setVar(root, "--sidebar-bg", color(theme, "sideBar.background"));
+              setVar(root, "--sidebar-fg", solarizedUiGrey || color(theme, "sideBar.foreground"));
+              setVar(root, "--sidebar-border", color(theme, "sideBar.border"));
+              setVar(root, "--tab-bg", color(theme, "tab.inactiveBackground"));
+              setVar(root, "--tab-active-bg", color(theme, "tab.activeBackground"));
+              setVar(
+                root,
+                "--tab-active-fg",
+                solarizedUiGrey || color(theme, "tab.activeForeground"),
+              );
+              setVar(
+                root,
+                "--tab-inactive-fg",
+                solarizedUiGrey || color(theme, "tab.inactiveForeground"),
+              );
+              setVar(root, "--tab-border", color(theme, "tab.border"));
+              setVar(root, "--editor-bg", color(theme, "editor.background"));
+              setVar(root, "--editor-fg", color(theme, "editor.foreground"));
+              setVar(root, "--editor-line", color(theme, "editor.lineHighlightBackground"));
+              setVar(root, "--gutter-fg", color(theme, "editorLineNumber.foreground"));
+              setVar(root, "--gutter-active-fg", color(theme, "editorLineNumber.activeForeground"));
+              setVar(root, "--panel-bg", color(theme, "panel.background"));
+              setVar(root, "--panel-border", color(theme, "panel.border"));
+              setVar(root, "--status-bg", color(theme, "statusBar.background"));
+              setVar(root, "--status-fg", color(theme, "statusBar.foreground"));
+              setVar(root, "--status-border", color(theme, "statusBar.border"));
+              setVar(root, "--status-remote-bg", color(theme, "statusBarItem.remoteBackground"));
+              setVar(
+                root,
+                "--status-remote-fg",
+                solarizedUiGrey || color(theme, "statusBarItem.remoteForeground"),
+              );
+              setVar(root, "--title-bg", color(theme, "titleBar.activeBackground"));
+              setVar(
+                root,
+                "--title-fg",
+                solarizedUiGrey || color(theme, "titleBar.activeForeground"),
+              );
+              setVar(root, "--token-comment", theme.tokens.comment);
+              setVar(root, "--token-keyword", theme.tokens.keyword);
+              setVar(root, "--token-function", theme.tokens.function);
+              setVar(root, "--token-string", theme.tokens.string);
+              setVar(root, "--token-number", theme.tokens.number);
+              setVar(root, "--token-variable", theme.tokens.variable);
+              setVar(root, "--token-parameter", theme.tokens.parameter);
+              setVar(root, "--token-operator", theme.tokens.operator);
+              setVar(root, "--token-punctuation", theme.tokens.punctuation);
+              setVar(root, "--token-class-name", theme.tokens.className);
+            }
+
+            function renderCode(root) {
+              const code = root.querySelector(".code");
+              codeLines.forEach((segments, index) => {
+                const line = document.createElement("div");
+                line.className = "line";
+                line.dataset.lineIndex = String(index);
+
+                const lineNumber = document.createElement("span");
+                lineNumber.className = "line-number";
+                lineNumber.textContent = String(index + 1);
+                line.appendChild(lineNumber);
+
+                const lineCode = document.createElement("span");
+                lineCode.className = "line-code";
+                segments.forEach((segment) => {
+                  [...segment.text].forEach((char) => {
+                    const span = document.createElement("span");
+                    span.className =
+                      segment.token === "plain"
+                        ? "char"
+                        : "char tok-" +
+                          segment.token.replace(/[A-Z]/g, (match) => "-" + match.toLowerCase());
+                    span.dataset.lineIndex = String(index);
+                    span.textContent = char;
+                    lineCode.appendChild(span);
+                  });
+                });
+                line.appendChild(lineCode);
+                code.appendChild(line);
+              });
+
+              const caret = document.createElement("span");
+              caret.className = "caret";
+              root.querySelector(".editor").appendChild(caret);
+            }
+
+            function caretPointForElement(editor, el) {
+              const editorBox = editor.getBoundingClientRect();
+              const charBox = el.getBoundingClientRect();
+              return {
+                x: charBox.right - editorBox.left + 2,
+                y: charBox.top - editorBox.top + 3,
+              };
+            }
+
+            function caretPointForLineStart(editor, line) {
+              const editorBox = editor.getBoundingClientRect();
+              const lineBox = line.getBoundingClientRect();
+              const codeBox = line.querySelector(".line-code").getBoundingClientRect();
+              return {
+                x: codeBox.left - editorBox.left,
+                y: lineBox.top - editorBox.top + 3,
+              };
+            }
+
+            function lineHighlightY(editor, line) {
+              const editorBox = editor.getBoundingClientRect();
+              const lineBox = line.getBoundingClientRect();
+              return lineBox.top - editorBox.top;
+            }
+
+            function buildTimeline(root, compositionId) {
+              const tl = gsap.timeline({ paused: true });
+              const editor = root.querySelector(".editor");
+              const caret = root.querySelector(".caret");
+              const activeLine = root.querySelector(".active-line");
+              const lineEls = gsap.utils.toArray(root.querySelectorAll(".line"));
+              const lineStartTimes = [];
+              const charSchedule = [];
+              let cursorTime = 0.95;
+
+              lineEls.forEach((line, lineIndex) => {
+                const lineChars = gsap.utils.toArray(line.querySelectorAll(".char"));
+                lineStartTimes[lineIndex] = cursorTime;
+                lineChars.forEach((char, charIndex) => {
+                  charSchedule.push({ char, time: cursorTime + charIndex * 0.012 });
+                });
+                cursorTime += Math.max(lineChars.length * 0.012, 0.08) + 0.045;
+              });
+
+              gsap.set(activeLine, { y: lineHighlightY(editor, lineEls[0]) });
+              gsap.set(caret, caretPointForLineStart(editor, lineEls[0]));
+
+              tl.from(
+                root.querySelector(".header"),
+                { y: 24, opacity: 0, duration: 0.45, ease: "power3.out" },
+                0,
+              );
+              tl.from(
+                root.querySelector(".workbench"),
+                { y: 42, opacity: 0, scale: 0.986, duration: 0.58, ease: "power3.out" },
+                0.1,
+              );
+              tl.from(activeLine, { opacity: 0, duration: 0.22, ease: "power2.out" }, 0.74);
+              lineStartTimes.forEach((time, lineIndex) => {
+                const line = lineEls[lineIndex];
+                tl.set(activeLine, { y: lineHighlightY(editor, line) }, time);
+                tl.set(caret, caretPointForLineStart(editor, line), time);
+                tl.call(
+                  () => {
+                    lineEls.forEach((item) => item.classList.toggle("is-active", item === line));
+                  },
+                  [],
+                  time,
+                );
+              });
+              charSchedule.forEach(({ char, time }) => {
+                tl.set(char, { opacity: 1 }, time);
+                tl.set(caret, caretPointForElement(editor, char), time + 0.002);
+              });
+              tl.to(
+                root.querySelector(".caret"),
+                { opacity: 0, duration: 0.34, repeat: 25, yoyo: true, ease: "steps(1)" },
+                0.95,
+              );
+              tl.from(
+                root.querySelector(".terminal"),
+                { y: 140, opacity: 0, duration: 0.56, ease: "power3.out" },
+                7.55,
+              );
+              tl.from(
+                root.querySelector(".terminal-body").children,
+                { opacity: 0, y: 8, duration: 0.24, stagger: 0.16, ease: "power2.out" },
+                8.05,
+              );
+              tl.to(
+                root.querySelector(".workbench"),
+                { rotateY: -10.5, z: 74, duration: 0.72, ease: "power2.inOut" },
+                9.35,
+              );
+              tl.to(
+                root.querySelector(".workbench"),
+                { rotateY: 0, z: 0, duration: 0.62, ease: "power2.inOut" },
+                10.08,
+              );
+
+              window.__timelines = window.__timelines || {};
+              window.__timelines[compositionId] = tl;
+
+              const previewTime = new URLSearchParams(window.location.search).get("t");
+              if (previewTime !== null) {
+                tl.time(Number(previewTime));
+              }
+            }
+
+            window.createVSCodeThemeComposition = (compositionId, themeOrId) => {
+              const root =
+                document.querySelector(
+                  '[data-composition-id="' + compositionId + '"] .vscode-theme-scene',
+                ) ||
+                document.querySelector(
+                  '.vscode-theme-scene[data-composition-id="' + compositionId + '"]',
+                ) ||
+                document.querySelector('[data-composition-id="' + compositionId + '"]');
+              const theme =
+                typeof themeOrId === "string"
+                  ? window.VSCODE_THEME_REGISTRY.find((item) => item.id === themeOrId)
+                  : themeOrId;
+              if (!root || !theme) return;
+              root.querySelector(".theme-label").textContent = theme.label;
+              root.querySelector(".theme-source").textContent = theme.sourceFile;
+              applyTheme(root, theme);
+              renderCode(root);
+              buildTimeline(root, compositionId);
+            };
+          })();
+        </script>
+        <script>
+          window.__timelines = window.__timelines || {};
+          window.__timelines["vscode-dark-plus"] =
+            window.__timelines["vscode-dark-plus"] || gsap.timeline({ paused: true });
+          window.createVSCodeThemeComposition("vscode-dark-plus", {
+            id: "dark-plus",
+            label: "Dark+",
+            sourceFile: "dark_plus.json",
+            uiTheme: "vs-dark",
+            colors: {
+              "editor.background": "#1E1E1E",
+              "editor.foreground": "#D4D4D4",
+              "sideBarSectionHeader.background": "#0000",
+              "sideBarSectionHeader.border": "#ccc3",
+              "sideBarTitle.foreground": "#BBBBBB",
+              "statusBarItem.remoteBackground": "#16825D",
+              "statusBarItem.remoteForeground": "#FFF",
+            },
+            tokens: {
+              comment: "#6A9955",
+              keyword: "#d7ba7d",
+              function: "#DCDCAA",
+              string: "#d16969",
+              number: "#b5cea8",
+              variable: "#4FC1FF",
+              parameter: "#9CDCFE",
+              operator: "#d7ba7d",
+              punctuation: "#CE9178",
+              className: "#4EC9B0",
+            },
+          });
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/code-snippet-flight/code-snippet-flight.html b/docs/public/catalog/blocks/code-snippet-flight/code-snippet-flight.html
new file mode 100644
index 0000000000..25a700c3c7
--- /dev/null
+++ b/docs/public/catalog/blocks/code-snippet-flight/code-snippet-flight.html
@@ -0,0 +1,665 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Code Snippet Flight</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #05070b;
+      }
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        font-family: "JetBrains Mono", monospace;
+        color: #e6edf3;
+      }
+      .bg-field {
+        position: absolute;
+        inset: 0;
+        background: radial-gradient(1200px 700px at 50% 18%, #0e1726 0%, #070b12 55%, #05070b 100%);
+      }
+      .bg-grid {
+        position: absolute;
+        inset: 0;
+        background-image:
+          linear-gradient(rgba(88, 166, 255, 0.05) 1px, transparent 1px),
+          linear-gradient(90deg, rgba(88, 166, 255, 0.05) 1px, transparent 1px);
+        background-size: 64px 64px;
+        mask-image: radial-gradient(1100px 620px at 50% 42%, #000 0%, transparent 78%);
+      }
+      .bg-glow {
+        position: absolute;
+        width: 900px;
+        height: 900px;
+        border-radius: 50%;
+        filter: blur(120px);
+        opacity: 0.5;
+      }
+      .bg-glow.a {
+        background: #1f6feb55;
+        left: -180px;
+        top: -200px;
+      }
+      .bg-glow.b {
+        background: #2ea04355;
+        right: -200px;
+        bottom: -260px;
+      }
+      .editor {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        width: 1380px;
+        height: 800px;
+        background: #0b0f17;
+        border: 1px solid #1d2733;
+        border-radius: 16px;
+        box-shadow:
+          0 40px 120px rgba(0, 0, 0, 0.6),
+          0 2px 0 rgba(255, 255, 255, 0.03) inset;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+      }
+      .titlebar {
+        height: 56px;
+        flex: 0 0 56px;
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        padding: 0 22px;
+        background: linear-gradient(#11161f, #0c111a);
+        border-bottom: 1px solid #1b2430;
+      }
+      .dots {
+        display: flex;
+        gap: 10px;
+      }
+      .dot {
+        width: 14px;
+        height: 14px;
+        border-radius: 50%;
+      }
+      .dot.r {
+        background: #ff5f57;
+      }
+      .dot.y {
+        background: #febc2e;
+      }
+      .dot.g {
+        background: #28c840;
+      }
+      .filename {
+        font-size: 19px;
+        color: #8b98a9;
+        letter-spacing: 0.2px;
+      }
+      .filename .accent {
+        color: #d6e2f0;
+      }
+      .code-surface {
+        position: relative;
+        flex: 1 1 auto;
+        overflow: hidden;
+      }
+      .scene {
+        position: absolute;
+        inset: 0;
+        opacity: 0;
+        will-change: opacity;
+      }
+      .code {
+        position: absolute;
+        top: 38px;
+        left: 0;
+        right: 0;
+        padding: 0 44px 0 104px;
+        font-size: 30px;
+        line-height: 46px;
+        font-variant-ligatures: none;
+        tab-size: 2;
+      }
+      .gutter {
+        position: absolute;
+        top: 38px;
+        left: 0;
+        width: 84px;
+        padding-right: 18px;
+        font-size: 30px;
+        line-height: 46px;
+        text-align: right;
+        color: #828c9b;
+        user-select: none;
+      }
+      .ln {
+        display: block;
+        height: 46px;
+      }
+      .line {
+        display: block;
+        min-height: 46px;
+        white-space: pre;
+        position: relative;
+        z-index: 1;
+      }
+      .tok {
+        display: inline-block;
+        white-space: pre;
+        will-change: transform, opacity;
+      }
+      .caret {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 3px;
+        height: 32px;
+        margin-top: 6px;
+        background: #58a6ff;
+        border-radius: 1px;
+        z-index: 3;
+      }
+      .hl-box {
+        position: absolute;
+        background: rgba(88, 166, 255, 0.16);
+        border-left: 3px solid #58a6ff;
+        border-radius: 6px;
+        z-index: 0;
+        overflow: hidden;
+      }
+      .diff-line {
+        display: block;
+        min-height: 0;
+        line-height: 46px;
+        white-space: pre;
+        position: relative;
+        overflow: hidden;
+        padding-left: 14px;
+      }
+      .diff-sign {
+        display: inline-block;
+        width: 22px;
+        color: #41506220;
+      }
+      .diff-del {
+        background: rgba(248, 81, 73, 0.12);
+        box-shadow: inset 3px 0 #f85149;
+      }
+      .diff-add {
+        background: rgba(63, 185, 80, 0.12);
+        box-shadow: inset 3px 0 #3fb950;
+      }
+      .diff-del .diff-sign {
+        color: #f85149;
+      }
+      .diff-add .diff-sign {
+        color: #3fb950;
+      }
+      .flight-block {
+        position: absolute;
+        white-space: pre;
+        font-size: 27px;
+        line-height: 40px;
+        padding: 11px 22px;
+        border-radius: 11px;
+        background: #0f1722;
+        border: 1px solid #233044;
+        box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5);
+        will-change: transform, opacity;
+      }
+      .flight-target {
+        position: absolute;
+        border: 1.5px dashed #2a3a4f;
+        border-radius: 14px;
+        opacity: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="code-snippet-flight"
+      data-start="0"
+      data-duration="6"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="bg-field" data-layout-ignore></div>
+      <div class="bg-grid" data-layout-ignore></div>
+      <div class="bg-glow a" data-layout-ignore></div>
+      <div class="bg-glow b" data-layout-ignore></div>
+      <div class="editor" id="editor" data-layout-ignore>
+        <div class="titlebar">
+          <div class="dots">
+            <span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
+          </div>
+          <span class="filename"
+            ><span class="accent">pipeline.js</span> — Code Snippet Flight</span
+          >
+        </div>
+        <div class="code-surface" id="surface"></div>
+      </div>
+    </div>
+    <script>
+      window.__TOKENS = {
+        flight: {
+          lang: "js",
+          theme: "github-dark",
+          bg: "#24292e",
+          fg: "#e1e4e8",
+          states: [
+            {
+              code: "const x = parse(input)",
+              tokens: [
+                {
+                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-0",
+                  content: "const",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-1",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-2",
+                  content: "x",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-3",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-4",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-5",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-6",
+                  content: "parse",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-7",
+                  content: "(input)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-8",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+              ],
+            },
+            {
+              code: "const y = transform(x)",
+              tokens: [
+                {
+                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-0",
+                  content: "const",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-1",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "ulDeJnFQa2Vy-61y5zTTA7sNfq7d4aUawNMAxQ6sVgg-2",
+                  content: "y",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-3",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-4",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-5",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "ulDeJnFQa2Vy-61y5zTTA7sNfq7d4aUawNMAxQ6sVgg-6",
+                  content: "transform",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "ulDeJnFQa2Vy-61y5zTTA7sNfq7d4aUawNMAxQ6sVgg-7",
+                  content: "(x)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "ulDeJnFQa2Vy-61y5zTTA7sNfq7d4aUawNMAxQ6sVgg-8",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+              ],
+            },
+            {
+              code: "const z = render(y)",
+              tokens: [
+                {
+                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-0",
+                  content: "const",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-1",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "wFuhzZNydG-3inU2s1h1gU8Kivya8CAP9gl9S4MBQj4-2",
+                  content: "z",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-3",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-4",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-5",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "wFuhzZNydG-3inU2s1h1gU8Kivya8CAP9gl9S4MBQj4-6",
+                  content: "render",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "wFuhzZNydG-3inU2s1h1gU8Kivya8CAP9gl9S4MBQj4-7",
+                  content: "(y)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "wFuhzZNydG-3inU2s1h1gU8Kivya8CAP9gl9S4MBQj4-8",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+              ],
+            },
+          ],
+        },
+      };
+      window.__BLOCK = { id: "code-snippet-flight", effect: "flight", seq: "flight", duration: 6 };
+    </script>
+    <script>
+      // hf-code-anim.js — self-contained code-animation engine for HyperFrames registry blocks.
+      //
+      // Reuses Shiki Magic Move's baked output (window.__TOKENS, baked at author time) and
+      // drives the animation as a PAUSED GSAP timeline the HyperFrames engine seeks per frame —
+      // NOT CSS transitions (those break under non-sequential frame seeking). FLIP measurement
+      // runs once inside document.fonts.ready (glyph metrics must be final). Each block sets
+      // window.__BLOCK = { id, effect, seq, line?, duration } and includes this engine; the
+      // engine builds one scene that fills the composition and registers window.__timelines[id].
+      (function () {
+        "use strict";
+        var T = window.__TOKENS || {};
+
+        function lineDiv() {
+          var d = document.createElement("div");
+          d.className = "line";
+          return d;
+        }
+
+        // Render a code state's keyed tokens into codeEl as lines of inline-block .tok spans.
+        function renderState(codeEl, state) {
+          codeEl.textContent = "";
+          var keyToEl = new Map();
+          var line = lineDiv();
+          codeEl.appendChild(line);
+          for (var i = 0; i < state.tokens.length; i++) {
+            var t = state.tokens[i];
+            if (t.content === "\n") {
+              line = lineDiv();
+              codeEl.appendChild(line);
+              continue;
+            }
+            var span = document.createElement("span");
+            span.className = "tok";
+            span.textContent = t.content;
+            span.style.color = t.color;
+            if (t.fontStyle & 1) span.style.fontStyle = "italic";
+            if (t.fontStyle & 2) span.style.fontWeight = "700";
+            line.appendChild(span);
+            keyToEl.set(t.key, span);
+          }
+          var last = codeEl.lastChild;
+          if (last && last.className === "line" && last.children.length === 0)
+            codeEl.removeChild(last);
+          return keyToEl;
+        }
+
+        function rectsOf(keyToEl) {
+          var m = new Map();
+          keyToEl.forEach(function (el, k) {
+            var r = el.getBoundingClientRect();
+            m.set(k, { left: r.left, top: r.top });
+          });
+          return m;
+        }
+
+        function makeScene(surface, withGutter) {
+          var scene = document.createElement("div");
+          scene.className = "scene";
+          if (withGutter) {
+            var g = document.createElement("div");
+            g.className = "gutter";
+            scene.appendChild(g);
+          }
+          var code = document.createElement("div");
+          code.className = "code";
+          scene.appendChild(code);
+          surface.appendChild(scene);
+          return { scene: scene, code: code, gutter: scene.querySelector(".gutter") };
+        }
+
+        function fillGutter(g, n) {
+          var html = "";
+          for (var i = 1; i <= n; i++) html += '<span class="ln">' + i + "</span>";
+          g.innerHTML = html;
+        }
+
+        function splitLines(state) {
+          var lines = [{ text: "", tokens: [] }];
+          for (var i = 0; i < state.tokens.length; i++) {
+            var t = state.tokens[i];
+            if (t.content === "\n") {
+              lines.push({ text: "", tokens: [] });
+              continue;
+            }
+            var cur = lines[lines.length - 1];
+            cur.tokens.push(t);
+            cur.text += t.content;
+          }
+          if (lines.length && lines[lines.length - 1].tokens.length === 0) lines.pop();
+          return lines;
+        }
+
+        function lineDiff(a, b) {
+          var n = a.length;
+          var m = b.length;
+          var dp = [];
+          for (var i = 0; i <= n; i++) dp.push(new Array(m + 1).fill(0));
+          for (var i = n - 1; i >= 0; i--) {
+            for (var j = m - 1; j >= 0; j--) {
+              dp[i][j] =
+                a[i].text === b[j].text
+                  ? dp[i + 1][j + 1] + 1
+                  : Math.max(dp[i + 1][j], dp[i][j + 1]);
+            }
+          }
+          var ops = [];
+          var i = 0;
+          var j = 0;
+          while (i < n && j < m) {
+            if (a[i].text === b[j].text) {
+              ops.push({ type: "same", line: b[j] });
+              i++;
+              j++;
+            } else if (dp[i + 1][j] >= dp[i][j + 1]) {
+              ops.push({ type: "del", line: a[i] });
+              i++;
+            } else {
+              ops.push({ type: "add", line: b[j] });
+              j++;
+            }
+          }
+          while (i < n) ops.push({ type: "del", line: a[i++] });
+          while (j < m) ops.push({ type: "add", line: b[j++] });
+          return ops;
+        }
+
+        // ---- single-scene effect builders (fade in, play, hold to end) -------------
+        var FADE = 0.45;
+
+        function flight(tl, surface, states, start) {
+          var FLY = 0.95;
+          var STAGGER = 0.26;
+          var GAP = 20;
+          var parts = makeScene(surface, false);
+          parts.code.remove();
+          var scene = parts.scene;
+          var target = document.createElement("div");
+          target.className = "flight-target";
+          scene.appendChild(target);
+          var W = surface.clientWidth;
+          var H = surface.clientHeight;
+
+          var blocks = states.map(function (st) {
+            var blk = document.createElement("div");
+            blk.className = "flight-block";
+            renderState(blk, st);
+            scene.appendChild(blk);
+            return blk;
+          });
+          var n = blocks.length;
+
+          // Pass 1: measure natural size, then make every chip the SAME width (symmetry).
+          var maxW = 0;
+          var chipH = 0;
+          blocks.forEach(function (blk) {
+            var r = blk.getBoundingClientRect();
+            if (r.width > maxW) maxW = r.width;
+            if (r.height > chipH) chipH = r.height;
+          });
+          blocks.forEach(function (blk) {
+            blk.style.width = maxW + "px";
+          });
+
+          // Pass 2: evenly-stacked, left-aligned, group centered in the surface.
+          var stackH = n * chipH + (n - 1) * GAP;
+          var destLeft = Math.round((W - maxW) / 2);
+          var topY = Math.round((H - stackH) / 2);
+          blocks.forEach(function (blk, i) {
+            var destY = topY + i * (chipH + GAP);
+            blk.style.left = destLeft + "px";
+            blk.style.top = destY + "px";
+            // fly straight in from the left to the shared left edge — clean, no skew
+            var srcX = destLeft - W * 0.32;
+            tl.fromTo(
+              blk,
+              { x: srcX - destLeft, opacity: 0, scale: 0.96 },
+              { x: 0, opacity: 1, scale: 1, duration: FLY, ease: "power3.out" },
+              start + FADE + i * STAGGER,
+            );
+          });
+
+          // Even-padded panel tightly wrapping the uniform stack.
+          var padX = 30;
+          var padY = 24;
+          target.style.left = destLeft - padX + "px";
+          target.style.top = topY - padY + "px";
+          target.style.width = maxW + padX * 2 + "px";
+          target.style.height = stackH + padY * 2 + "px";
+          var landAt = start + FADE + (n - 1) * STAGGER + FLY;
+          tl.set(scene, { opacity: 1 }, 0);
+          tl.to(target, { opacity: 1, duration: 0.5, ease: "power1.out" }, landAt - 0.5);
+        }
+
+        function buildEffect(tl, surface, spec) {
+          var start = 0.45;
+          var seq = T[spec.seq];
+          if (spec.effect === "flight") flight(tl, surface, seq.states, start);
+        }
+
+        function go() {
+          var spec = window.__BLOCK;
+          var surface = document.getElementById("surface");
+          var root = document.getElementById("root");
+          window.__timelines = window.__timelines || {};
+          var tl = gsap.timeline({ paused: true });
+          window.__timelines["code-snippet-flight"] = tl; // register synchronously
+          document.fonts.ready.then(function () {
+            tl.from("#editor", { opacity: 0, scale: 0.985, duration: 0.5, ease: "power2.out" }, 0);
+            buildEffect(tl, surface, spec);
+            var dur = parseFloat(root.dataset.duration) || tl.duration();
+            tl.to({}, { duration: dur }, 0); // pad to full composition length
+          });
+        }
+
+        if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", go);
+        else go();
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/code-snippet-high-contrast-light/background.jpeg b/docs/public/catalog/blocks/code-snippet-high-contrast-light/background.jpeg
new file mode 100644
index 0000000000..1f3e465cd2
Binary files /dev/null and b/docs/public/catalog/blocks/code-snippet-high-contrast-light/background.jpeg differ
diff --git a/docs/public/catalog/blocks/code-snippet-high-contrast-light/code-snippet-high-contrast-light.html b/docs/public/catalog/blocks/code-snippet-high-contrast-light/code-snippet-high-contrast-light.html
new file mode 100644
index 0000000000..4d1e6b2abb
--- /dev/null
+++ b/docs/public/catalog/blocks/code-snippet-high-contrast-light/code-snippet-high-contrast-light.html
@@ -0,0 +1,1050 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Default High Contrast Light VS Code Theme Composition</title>
+  </head>
+  <body>
+    <template id="vscode-high-contrast-light-template">
+      <div
+        class="vscode-theme-scene"
+        data-composition-id="vscode-high-contrast-light"
+        data-width="1920"
+        data-height="1080"
+      >
+        <main class="scene-content">
+          <section class="header">
+            <div>
+              <p class="kicker">Official VS Code built-in theme</p>
+              <h1 class="title"><span class="theme-label">Default High Contrast Light</span></h1>
+            </div>
+            <p class="source-note">
+              Typing `functional_toolkit.py` with workbench colors from
+              <span class="theme-source">hc_light.json</span>.
+            </p>
+          </section>
+
+          <section class="workbench">
+            <div class="titlebar">
+              <div class="traffic"><span></span><span></span><span></span></div>
+              <div class="window-title">functional-toolkit - Visual Studio Code</div>
+              <div class="command-center">Search</div>
+            </div>
+
+            <aside class="activity" aria-label="Activity bar">
+              <svg class="activity-icon active" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="currentColor"
+                  d="M4 4h7v7H4V4Zm9 0h7v7h-7V4ZM4 13h7v7H4v-7Zm9 0h7v7h-7v-7Z"
+                />
+              </svg>
+              <svg class="activity-icon" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  d="m21 21-5.2-5.2M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Z"
+                />
+              </svg>
+              <svg class="activity-icon" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  d="M8 18 3 12l5-6m8 12 5-6-5-6"
+                />
+              </svg>
+              <svg class="activity-icon" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  d="M12 3v18m0-18 6 6m-6-6L6 9m6 12 6-6m-6 6-6-6"
+                />
+              </svg>
+            </aside>
+
+            <aside class="sidebar">
+              <div class="sidebar-title">Explorer</div>
+              <div class="section-title">⌄ Functional Toolkit</div>
+              <div class="tree">
+                <div class="tree-row">⌄ src</div>
+                <div class="tree-row child selected">◇ functional_toolkit.py</div>
+                <div class="tree-row child">◇ test_toolkit.py</div>
+                <div class="tree-row">◇ pyproject.toml</div>
+                <div class="tree-row">◇ README.md</div>
+              </div>
+            </aside>
+
+            <section class="editor-area">
+              <div class="tabs">
+                <div class="tab">◇ functional_toolkit.py</div>
+                <div class="tab inactive">README.md</div>
+              </div>
+              <div class="breadcrumbs">functional-toolkit › src › functional_toolkit.py</div>
+              <div class="editor">
+                <div class="active-line"></div>
+                <div class="code"></div>
+              </div>
+              <div class="terminal">
+                <div class="panel-tabs">
+                  <span class="active">Terminal</span><span>Problems</span><span>Output</span>
+                </div>
+                <div class="terminal-body">
+                  <div><span class="prompt">functional-toolkit %</span> python -m pytest</div>
+                  <div>collected 3 items</div>
+                  <div>tests/test_toolkit.py ... <span class="tok-comment">passed</span></div>
+                </div>
+              </div>
+            </section>
+
+            <footer class="statusbar">
+              <div class="status-left">
+                <span class="remote">main</span>
+                <span>0 errors</span>
+                <span>0 warnings</span>
+              </div>
+              <div class="status-right">
+                <span>Ln 17, Col 1</span>
+                <span>Spaces: 4</span>
+                <span>UTF-8</span>
+                <span>Python 3.12</span>
+              </div>
+            </footer>
+          </section>
+        </main>
+        <style>
+          * {
+            box-sizing: border-box;
+            letter-spacing: 0;
+          }
+
+          html,
+          body {
+            margin: 0;
+            width: 1920px;
+            height: 1080px;
+            overflow: hidden;
+            background: #000000;
+            font-family:
+              Inter,
+              -apple-system,
+              BlinkMacSystemFont,
+              "Segoe UI",
+              sans-serif;
+          }
+
+          .vscode-theme-scene {
+            --activity-bg: #181818;
+            --activity-fg: #d7d7d7;
+            --activity-muted: #868686;
+            --activity-active: #0078d4;
+            --sidebar-bg: #181818;
+            --sidebar-fg: #cccccc;
+            --sidebar-border: #2b2b2b;
+            --tab-bg: #181818;
+            --tab-active-bg: #1f1f1f;
+            --tab-active-fg: #ffffff;
+            --tab-inactive-fg: #9d9d9d;
+            --tab-border: #2b2b2b;
+            --editor-bg: #1f1f1f;
+            --editor-fg: #cccccc;
+            --editor-line: rgba(255, 255, 255, 0.04);
+            --gutter-fg: #6e7681;
+            --gutter-active-fg: #cccccc;
+            --panel-bg: #181818;
+            --panel-border: #2b2b2b;
+            --status-bg: #181818;
+            --status-fg: #cccccc;
+            --status-border: #2b2b2b;
+            --title-bg: #181818;
+            --title-fg: #cccccc;
+            --token-comment: #6a9955;
+            --token-keyword: #c586c0;
+            --token-function: #dcdcaa;
+            --token-string: #ce9178;
+            --token-number: #b5cea8;
+            --token-variable: #9cdcfe;
+            --token-parameter: #9cdcfe;
+            --token-operator: #d4d4d4;
+            --token-punctuation: #d4d4d4;
+            --token-class-name: #4ec9b0;
+            position: relative;
+            width: 1920px;
+            height: 1080px;
+            overflow: hidden;
+            background:
+              linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.32)),
+              url("../assets/background.jpeg") center / cover no-repeat;
+            color: var(--editor-fg);
+          }
+
+          .scene-content {
+            position: relative;
+            z-index: 1;
+            width: 100%;
+            height: 100%;
+            padding: 54px 70px 92px;
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+            perspective: 2200px;
+            perspective-origin: 56% 52%;
+          }
+
+          .header {
+            display: flex;
+            align-items: end;
+            justify-content: space-between;
+            min-height: 66px;
+            text-shadow:
+              0 2px 12px rgba(0, 0, 0, 0.42),
+              0 14px 34px rgba(0, 0, 0, 0.32);
+          }
+
+          .kicker {
+            margin: 0 0 7px;
+            color: var(--gutter-fg);
+            font-size: 15px;
+            font-weight: 650;
+            text-transform: uppercase;
+            text-shadow:
+              0 2px 8px rgba(0, 0, 0, 0.48),
+              0 10px 26px rgba(0, 0, 0, 0.36);
+          }
+
+          .title {
+            margin: 0;
+            color: var(--editor-fg);
+            font-size: 44px;
+            line-height: 1;
+            font-weight: 760;
+          }
+
+          .source-note {
+            width: 510px;
+            color: var(--gutter-fg);
+            font-size: 16px;
+            line-height: 1.35;
+            text-align: right;
+            text-shadow:
+              0 2px 10px rgba(0, 0, 0, 0.46),
+              0 12px 30px rgba(0, 0, 0, 0.34);
+          }
+
+          .workbench {
+            height: 824px;
+            display: grid;
+            grid-template-columns: 54px 290px 1fr;
+            grid-template-rows: 36px 1fr 26px;
+            overflow: hidden;
+            border: 1px solid var(--sidebar-border);
+            border-radius: 8px;
+            background: var(--editor-bg);
+            box-shadow: 0 34px 90px rgba(0, 0, 0, 0.42);
+            transform: translateZ(0);
+            transform-origin: 82% 50%;
+            transform-style: preserve-3d;
+            will-change: transform;
+          }
+
+          .titlebar {
+            grid-column: 1 / -1;
+            display: grid;
+            grid-template-columns: 120px 1fr 210px;
+            align-items: center;
+            background: var(--title-bg);
+            color: var(--title-fg);
+            border-bottom: 1px solid var(--tab-border);
+            font-size: 12px;
+          }
+
+          .traffic {
+            display: flex;
+            gap: 8px;
+            padding-left: 18px;
+          }
+
+          .traffic span {
+            width: 12px;
+            height: 12px;
+            border-radius: 999px;
+          }
+
+          .traffic span:nth-child(1) {
+            background: #ff5f57;
+          }
+          .traffic span:nth-child(2) {
+            background: #ffbd2e;
+          }
+          .traffic span:nth-child(3) {
+            background: #28c840;
+          }
+
+          .window-title {
+            justify-self: center;
+            opacity: 0.84;
+          }
+
+          .command-center {
+            justify-self: end;
+            width: 176px;
+            height: 22px;
+            margin-right: 16px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border: 1px solid color-mix(in srgb, var(--title-fg), transparent 78%);
+            border-radius: 5px;
+            color: color-mix(in srgb, var(--title-fg), transparent 18%);
+          }
+
+          .activity {
+            grid-row: 2 / 3;
+            background: var(--activity-bg);
+            border-right: 1px solid var(--sidebar-border);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 10px 0;
+            gap: 18px;
+          }
+
+          .activity-icon {
+            width: 28px;
+            height: 28px;
+            color: var(--activity-muted);
+          }
+
+          .activity-icon.active {
+            color: var(--activity-fg);
+            border-left: 2px solid var(--activity-active);
+            padding-left: 4px;
+          }
+
+          .sidebar {
+            grid-row: 2 / 3;
+            background: var(--sidebar-bg);
+            color: var(--sidebar-fg);
+            border-right: 1px solid var(--sidebar-border);
+            display: flex;
+            flex-direction: column;
+            min-width: 0;
+          }
+
+          .sidebar-title {
+            height: 38px;
+            display: flex;
+            align-items: center;
+            padding: 0 20px;
+            color: var(--sidebar-fg);
+            font-size: 11px;
+            text-transform: uppercase;
+          }
+
+          .section-title {
+            height: 24px;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            padding: 0 14px;
+            background: color-mix(in srgb, var(--sidebar-bg), var(--sidebar-fg) 5%);
+            border-top: 1px solid var(--sidebar-border);
+            border-bottom: 1px solid var(--sidebar-border);
+            color: var(--sidebar-fg);
+            font-size: 11px;
+            font-weight: 700;
+          }
+
+          .tree {
+            padding: 8px 0;
+            font-size: 13px;
+            line-height: 24px;
+          }
+
+          .tree-row {
+            height: 24px;
+            display: flex;
+            align-items: center;
+            gap: 7px;
+            padding: 0 10px 0 18px;
+            color: color-mix(in srgb, var(--sidebar-fg), transparent 8%);
+            white-space: nowrap;
+          }
+
+          .tree-row.child {
+            padding-left: 34px;
+          }
+
+          .tree-row.selected {
+            background: color-mix(in srgb, var(--sidebar-fg), transparent 88%);
+            color: var(--sidebar-fg);
+          }
+
+          .editor-area {
+            grid-row: 2 / 3;
+            display: grid;
+            grid-template-rows: 36px 30px 1fr 138px;
+            min-width: 0;
+            background: var(--editor-bg);
+          }
+
+          .tabs {
+            display: flex;
+            background: var(--tab-bg);
+            border-bottom: 1px solid var(--tab-border);
+          }
+
+          .tab {
+            width: 205px;
+            height: 36px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 0 13px;
+            border-right: 1px solid var(--tab-border);
+            background: var(--tab-active-bg);
+            color: var(--tab-active-fg);
+            border-top: 2px solid var(--activity-active);
+            font-size: 13px;
+          }
+
+          .tab.inactive {
+            background: var(--tab-bg);
+            color: var(--tab-inactive-fg);
+            border-top-color: transparent;
+          }
+
+          .breadcrumbs {
+            display: flex;
+            align-items: center;
+            gap: 7px;
+            padding: 0 18px;
+            color: var(--gutter-fg);
+            border-bottom: 1px solid color-mix(in srgb, var(--tab-border), transparent 20%);
+            font-size: 12px;
+          }
+
+          .editor {
+            position: relative;
+            overflow: hidden;
+            background: var(--editor-bg);
+            color: var(--editor-fg);
+            font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+            font-size: 18px;
+            line-height: 1.52;
+          }
+
+          .active-line {
+            position: absolute;
+            left: 0;
+            right: 0;
+            top: 0;
+            height: 28px;
+            background: var(--editor-line);
+            will-change: transform;
+          }
+
+          .code {
+            position: relative;
+            padding: 20px 36px 18px 0;
+          }
+
+          .line {
+            height: 28px;
+            display: grid;
+            grid-template-columns: 72px 1fr;
+            align-items: center;
+          }
+
+          .line-number {
+            padding-right: 18px;
+            color: var(--gutter-fg);
+            text-align: right;
+            user-select: none;
+          }
+
+          .line.is-active .line-number {
+            color: var(--gutter-active-fg);
+          }
+
+          .line-code {
+            white-space: pre;
+          }
+
+          .char {
+            opacity: 0;
+          }
+
+          .tok-comment {
+            color: var(--token-comment);
+          }
+          .tok-keyword {
+            color: var(--token-keyword);
+          }
+          .tok-function {
+            color: var(--token-function);
+          }
+          .tok-string {
+            color: var(--token-string);
+          }
+          .tok-number {
+            color: var(--token-number);
+          }
+          .tok-variable {
+            color: var(--token-variable);
+          }
+          .tok-parameter {
+            color: var(--token-parameter);
+          }
+          .tok-operator {
+            color: var(--token-operator);
+          }
+          .tok-punctuation {
+            color: var(--token-punctuation);
+          }
+          .tok-class-name {
+            color: var(--token-class-name);
+          }
+
+          .caret {
+            position: absolute;
+            left: 0;
+            top: 0;
+            z-index: 3;
+            display: block;
+            width: 2px;
+            height: 22px;
+            background: var(--editor-fg);
+            pointer-events: none;
+            will-change: transform, opacity;
+          }
+
+          .terminal {
+            display: grid;
+            grid-template-rows: 32px 1fr;
+            background: var(--panel-bg);
+            border-top: 1px solid var(--panel-border);
+            color: var(--editor-fg);
+            font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+            font-size: 14px;
+          }
+
+          .panel-tabs {
+            display: flex;
+            align-items: center;
+            gap: 22px;
+            padding: 0 18px;
+            border-bottom: 1px solid var(--panel-border);
+            color: var(--gutter-fg);
+            font-family:
+              Inter,
+              -apple-system,
+              BlinkMacSystemFont,
+              "Segoe UI",
+              sans-serif;
+            font-size: 12px;
+            text-transform: uppercase;
+          }
+
+          .panel-tabs .active {
+            color: var(--editor-fg);
+            border-bottom: 1px solid var(--activity-active);
+            height: 32px;
+            display: flex;
+            align-items: center;
+          }
+
+          .terminal-body {
+            padding: 12px 20px;
+            color: var(--editor-fg);
+            line-height: 1.8;
+          }
+
+          .prompt {
+            color: var(--token-function);
+          }
+
+          .statusbar {
+            grid-column: 1 / -1;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            background: var(--status-bg);
+            color: var(--status-fg);
+            border-top: 1px solid var(--status-border);
+            font-size: 12px;
+          }
+
+          .status-left,
+          .status-right {
+            display: flex;
+            align-items: center;
+            gap: 18px;
+            padding: 0 12px;
+          }
+
+          .remote {
+            align-self: stretch;
+            display: flex;
+            align-items: center;
+            padding: 0 12px;
+            margin-left: -12px;
+            background: var(--status-remote-bg, var(--activity-active));
+            color: var(--status-remote-fg, #ffffff);
+          }
+
+          svg {
+            display: block;
+          }
+        </style>
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (() => {
+            const codeLines = [
+              [{ text: "# A small functional toolkit", token: "comment" }],
+              [
+                { text: "def", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "pluck_deep", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "key", token: "parameter" },
+                { text: "):", token: "punctuation" },
+              ],
+              [
+                { text: "    ", token: "plain" },
+                { text: "return", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "obj", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "reduce", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "acc", token: "parameter" },
+                { text: ", ", token: "punctuation" },
+                { text: "k", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "acc", token: "variable" },
+                { text: "[", token: "punctuation" },
+                { text: "k", token: "variable" },
+                { text: "]", token: "punctuation" },
+                { text: ", ", token: "punctuation" },
+                { text: "key", token: "variable" },
+                { text: ".split", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "'.'", token: "string" },
+                { text: "), ", token: "punctuation" },
+                { text: "obj", token: "variable" },
+                { text: ")", token: "punctuation" },
+              ],
+              [],
+              [
+                { text: "def", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "compose", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "*", token: "operator" },
+                { text: "fns", token: "parameter" },
+                { text: "):", token: "punctuation" },
+              ],
+              [
+                { text: "    ", token: "plain" },
+                { text: "return", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "res", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "reduce", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "acc", token: "parameter" },
+                { text: ", ", token: "punctuation" },
+                { text: "fn", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "fn", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "acc", token: "variable" },
+                { text: "), ", token: "punctuation" },
+                { text: "fns", token: "variable" },
+                { text: ", ", token: "punctuation" },
+                { text: "res", token: "variable" },
+                { text: ")", token: "punctuation" },
+              ],
+              [],
+              [
+                { text: "def", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "unfold", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "f", token: "parameter" },
+                { text: ", ", token: "punctuation" },
+                { text: "seed", token: "parameter" },
+                { text: "):", token: "punctuation" },
+              ],
+              [
+                { text: "    ", token: "plain" },
+                { text: '"""Build a list by repeatedly applying f to a seed."""', token: "string" },
+              ],
+              [
+                { text: "    acc", token: "variable" },
+                { text: " = ", token: "operator" },
+                { text: "[]", token: "punctuation" },
+              ],
+              [
+                { text: "    while", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "True", token: "className" },
+                { text: ":", token: "punctuation" },
+              ],
+              [
+                { text: "        result", token: "variable" },
+                { text: " = ", token: "operator" },
+                { text: "f", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "seed", token: "variable" },
+                { text: ")", token: "punctuation" },
+              ],
+              [
+                { text: "        if", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "result", token: "variable" },
+                { text: " is ", token: "keyword" },
+                { text: "None", token: "className" },
+                { text: ":", token: "punctuation" },
+              ],
+              [
+                { text: "            return", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "acc", token: "variable" },
+              ],
+              [
+                { text: "        acc", token: "variable" },
+                { text: ".append", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "result", token: "variable" },
+                { text: "[", token: "punctuation" },
+                { text: "0", token: "number" },
+                { text: "])", token: "punctuation" },
+              ],
+              [
+                { text: "        seed", token: "variable" },
+                { text: " = ", token: "operator" },
+                { text: "result", token: "variable" },
+                { text: "[", token: "punctuation" },
+                { text: "1", token: "number" },
+                { text: "]", token: "punctuation" },
+              ],
+              [],
+            ];
+
+            const fallback = {
+              "activityBar.background": "#181818",
+              "activityBar.foreground": "#d7d7d7",
+              "activityBar.inactiveForeground": "#868686",
+              "activityBar.activeBorder": "#0078d4",
+              "sideBar.background": "#181818",
+              "sideBar.foreground": "#cccccc",
+              "sideBar.border": "#2b2b2b",
+              "tab.activeBackground": "#1f1f1f",
+              "tab.activeForeground": "#ffffff",
+              "tab.inactiveBackground": "#181818",
+              "tab.inactiveForeground": "#9d9d9d",
+              "tab.border": "#2b2b2b",
+              "editor.background": "#1f1f1f",
+              "editor.foreground": "#cccccc",
+              "editor.lineHighlightBackground": "#ffffff0a",
+              "editorLineNumber.foreground": "#6e7681",
+              "editorLineNumber.activeForeground": "#cccccc",
+              "panel.background": "#181818",
+              "panel.border": "#2b2b2b",
+              "statusBar.background": "#181818",
+              "statusBar.foreground": "#cccccc",
+              "statusBar.border": "#2b2b2b",
+              "titleBar.activeBackground": "#181818",
+              "titleBar.activeForeground": "#cccccc",
+            };
+
+            function color(theme, key) {
+              return theme.colors[key] || fallback[key] || theme.colors.foreground || "#cccccc";
+            }
+
+            function solarizedGrey(theme) {
+              return (
+                theme.colors["tab.inactiveForeground"] ||
+                theme.colors["editor.foreground"] ||
+                "#586E75"
+              );
+            }
+
+            function setVar(root, name, value) {
+              root.style.setProperty(name, value);
+            }
+
+            function applyTheme(root, theme) {
+              const solarizedUiGrey = theme.id === "solarized-light" ? solarizedGrey(theme) : null;
+              setVar(root, "--activity-bg", color(theme, "activityBar.background"));
+              setVar(
+                root,
+                "--activity-fg",
+                solarizedUiGrey || color(theme, "activityBar.foreground"),
+              );
+              setVar(
+                root,
+                "--activity-muted",
+                solarizedUiGrey || color(theme, "activityBar.inactiveForeground"),
+              );
+              setVar(root, "--activity-active", color(theme, "activityBar.activeBorder"));
+              setVar(root, "--sidebar-bg", color(theme, "sideBar.background"));
+              setVar(root, "--sidebar-fg", solarizedUiGrey || color(theme, "sideBar.foreground"));
+              setVar(root, "--sidebar-border", color(theme, "sideBar.border"));
+              setVar(root, "--tab-bg", color(theme, "tab.inactiveBackground"));
+              setVar(root, "--tab-active-bg", color(theme, "tab.activeBackground"));
+              setVar(
+                root,
+                "--tab-active-fg",
+                solarizedUiGrey || color(theme, "tab.activeForeground"),
+              );
+              setVar(
+                root,
+                "--tab-inactive-fg",
+                solarizedUiGrey || color(theme, "tab.inactiveForeground"),
+              );
+              setVar(root, "--tab-border", color(theme, "tab.border"));
+              setVar(root, "--editor-bg", color(theme, "editor.background"));
+              setVar(root, "--editor-fg", color(theme, "editor.foreground"));
+              setVar(root, "--editor-line", color(theme, "editor.lineHighlightBackground"));
+              setVar(root, "--gutter-fg", color(theme, "editorLineNumber.foreground"));
+              setVar(root, "--gutter-active-fg", color(theme, "editorLineNumber.activeForeground"));
+              setVar(root, "--panel-bg", color(theme, "panel.background"));
+              setVar(root, "--panel-border", color(theme, "panel.border"));
+              setVar(root, "--status-bg", color(theme, "statusBar.background"));
+              setVar(root, "--status-fg", color(theme, "statusBar.foreground"));
+              setVar(root, "--status-border", color(theme, "statusBar.border"));
+              setVar(root, "--status-remote-bg", color(theme, "statusBarItem.remoteBackground"));
+              setVar(
+                root,
+                "--status-remote-fg",
+                solarizedUiGrey || color(theme, "statusBarItem.remoteForeground"),
+              );
+              setVar(root, "--title-bg", color(theme, "titleBar.activeBackground"));
+              setVar(
+                root,
+                "--title-fg",
+                solarizedUiGrey || color(theme, "titleBar.activeForeground"),
+              );
+              setVar(root, "--token-comment", theme.tokens.comment);
+              setVar(root, "--token-keyword", theme.tokens.keyword);
+              setVar(root, "--token-function", theme.tokens.function);
+              setVar(root, "--token-string", theme.tokens.string);
+              setVar(root, "--token-number", theme.tokens.number);
+              setVar(root, "--token-variable", theme.tokens.variable);
+              setVar(root, "--token-parameter", theme.tokens.parameter);
+              setVar(root, "--token-operator", theme.tokens.operator);
+              setVar(root, "--token-punctuation", theme.tokens.punctuation);
+              setVar(root, "--token-class-name", theme.tokens.className);
+            }
+
+            function renderCode(root) {
+              const code = root.querySelector(".code");
+              codeLines.forEach((segments, index) => {
+                const line = document.createElement("div");
+                line.className = "line";
+                line.dataset.lineIndex = String(index);
+
+                const lineNumber = document.createElement("span");
+                lineNumber.className = "line-number";
+                lineNumber.textContent = String(index + 1);
+                line.appendChild(lineNumber);
+
+                const lineCode = document.createElement("span");
+                lineCode.className = "line-code";
+                segments.forEach((segment) => {
+                  [...segment.text].forEach((char) => {
+                    const span = document.createElement("span");
+                    span.className =
+                      segment.token === "plain"
+                        ? "char"
+                        : "char tok-" +
+                          segment.token.replace(/[A-Z]/g, (match) => "-" + match.toLowerCase());
+                    span.dataset.lineIndex = String(index);
+                    span.textContent = char;
+                    lineCode.appendChild(span);
+                  });
+                });
+                line.appendChild(lineCode);
+                code.appendChild(line);
+              });
+
+              const caret = document.createElement("span");
+              caret.className = "caret";
+              root.querySelector(".editor").appendChild(caret);
+            }
+
+            function caretPointForElement(editor, el) {
+              const editorBox = editor.getBoundingClientRect();
+              const charBox = el.getBoundingClientRect();
+              return {
+                x: charBox.right - editorBox.left + 2,
+                y: charBox.top - editorBox.top + 3,
+              };
+            }
+
+            function caretPointForLineStart(editor, line) {
+              const editorBox = editor.getBoundingClientRect();
+              const lineBox = line.getBoundingClientRect();
+              const codeBox = line.querySelector(".line-code").getBoundingClientRect();
+              return {
+                x: codeBox.left - editorBox.left,
+                y: lineBox.top - editorBox.top + 3,
+              };
+            }
+
+            function lineHighlightY(editor, line) {
+              const editorBox = editor.getBoundingClientRect();
+              const lineBox = line.getBoundingClientRect();
+              return lineBox.top - editorBox.top;
+            }
+
+            function buildTimeline(root, compositionId) {
+              const tl = gsap.timeline({ paused: true });
+              const editor = root.querySelector(".editor");
+              const caret = root.querySelector(".caret");
+              const activeLine = root.querySelector(".active-line");
+              const lineEls = gsap.utils.toArray(root.querySelectorAll(".line"));
+              const lineStartTimes = [];
+              const charSchedule = [];
+              let cursorTime = 0.95;
+
+              lineEls.forEach((line, lineIndex) => {
+                const lineChars = gsap.utils.toArray(line.querySelectorAll(".char"));
+                lineStartTimes[lineIndex] = cursorTime;
+                lineChars.forEach((char, charIndex) => {
+                  charSchedule.push({ char, time: cursorTime + charIndex * 0.012 });
+                });
+                cursorTime += Math.max(lineChars.length * 0.012, 0.08) + 0.045;
+              });
+
+              gsap.set(activeLine, { y: lineHighlightY(editor, lineEls[0]) });
+              gsap.set(caret, caretPointForLineStart(editor, lineEls[0]));
+
+              tl.from(
+                root.querySelector(".header"),
+                { y: 24, opacity: 0, duration: 0.45, ease: "power3.out" },
+                0,
+              );
+              tl.from(
+                root.querySelector(".workbench"),
+                { y: 42, opacity: 0, scale: 0.986, duration: 0.58, ease: "power3.out" },
+                0.1,
+              );
+              tl.from(activeLine, { opacity: 0, duration: 0.22, ease: "power2.out" }, 0.74);
+              lineStartTimes.forEach((time, lineIndex) => {
+                const line = lineEls[lineIndex];
+                tl.set(activeLine, { y: lineHighlightY(editor, line) }, time);
+                tl.set(caret, caretPointForLineStart(editor, line), time);
+                tl.call(
+                  () => {
+                    lineEls.forEach((item) => item.classList.toggle("is-active", item === line));
+                  },
+                  [],
+                  time,
+                );
+              });
+              charSchedule.forEach(({ char, time }) => {
+                tl.set(char, { opacity: 1 }, time);
+                tl.set(caret, caretPointForElement(editor, char), time + 0.002);
+              });
+              tl.to(
+                root.querySelector(".caret"),
+                { opacity: 0, duration: 0.34, repeat: 25, yoyo: true, ease: "steps(1)" },
+                0.95,
+              );
+              tl.from(
+                root.querySelector(".terminal"),
+                { y: 140, opacity: 0, duration: 0.56, ease: "power3.out" },
+                7.55,
+              );
+              tl.from(
+                root.querySelector(".terminal-body").children,
+                { opacity: 0, y: 8, duration: 0.24, stagger: 0.16, ease: "power2.out" },
+                8.05,
+              );
+              tl.to(
+                root.querySelector(".workbench"),
+                { rotateY: -10.5, z: 74, duration: 0.72, ease: "power2.inOut" },
+                9.35,
+              );
+              tl.to(
+                root.querySelector(".workbench"),
+                { rotateY: 0, z: 0, duration: 0.62, ease: "power2.inOut" },
+                10.08,
+              );
+
+              window.__timelines = window.__timelines || {};
+              window.__timelines[compositionId] = tl;
+
+              const previewTime = new URLSearchParams(window.location.search).get("t");
+              if (previewTime !== null) {
+                tl.time(Number(previewTime));
+              }
+            }
+
+            window.createVSCodeThemeComposition = (compositionId, themeOrId) => {
+              const root =
+                document.querySelector(
+                  '[data-composition-id="' + compositionId + '"] .vscode-theme-scene',
+                ) ||
+                document.querySelector(
+                  '.vscode-theme-scene[data-composition-id="' + compositionId + '"]',
+                ) ||
+                document.querySelector('[data-composition-id="' + compositionId + '"]');
+              const theme =
+                typeof themeOrId === "string"
+                  ? window.VSCODE_THEME_REGISTRY.find((item) => item.id === themeOrId)
+                  : themeOrId;
+              if (!root || !theme) return;
+              root.querySelector(".theme-label").textContent = theme.label;
+              root.querySelector(".theme-source").textContent = theme.sourceFile;
+              applyTheme(root, theme);
+              renderCode(root);
+              buildTimeline(root, compositionId);
+            };
+          })();
+        </script>
+        <script>
+          window.__timelines = window.__timelines || {};
+          window.__timelines["vscode-high-contrast-light"] =
+            window.__timelines["vscode-high-contrast-light"] || gsap.timeline({ paused: true });
+          window.createVSCodeThemeComposition("vscode-high-contrast-light", {
+            id: "high-contrast-light",
+            label: "Default High Contrast Light",
+            sourceFile: "hc_light.json",
+            uiTheme: "vs",
+            colors: {
+              "statusBarItem.remoteBackground": "#FFFFFF",
+              "statusBarItem.remoteForeground": "#000000",
+            },
+            tokens: {
+              comment: "#515151",
+              keyword: "#EE0000",
+              function: "#5e2cbc",
+              string: "#811F3F",
+              number: "#096d48",
+              variable: "#02715D",
+              parameter: "#001080",
+              operator: "#EE0000",
+              punctuation: "#D16969",
+              className: "#185E73",
+            },
+          });
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/code-snippet-high-contrast/background.jpeg b/docs/public/catalog/blocks/code-snippet-high-contrast/background.jpeg
new file mode 100644
index 0000000000..1f3e465cd2
Binary files /dev/null and b/docs/public/catalog/blocks/code-snippet-high-contrast/background.jpeg differ
diff --git a/docs/public/catalog/blocks/code-snippet-high-contrast/code-snippet-high-contrast.html b/docs/public/catalog/blocks/code-snippet-high-contrast/code-snippet-high-contrast.html
new file mode 100644
index 0000000000..c9b6ece431
--- /dev/null
+++ b/docs/public/catalog/blocks/code-snippet-high-contrast/code-snippet-high-contrast.html
@@ -0,0 +1,1053 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Default High Contrast VS Code Theme Composition</title>
+  </head>
+  <body>
+    <template id="vscode-high-contrast-template">
+      <div
+        class="vscode-theme-scene"
+        data-composition-id="vscode-high-contrast"
+        data-width="1920"
+        data-height="1080"
+      >
+        <main class="scene-content">
+          <section class="header">
+            <div>
+              <p class="kicker">Official VS Code built-in theme</p>
+              <h1 class="title"><span class="theme-label">Default High Contrast</span></h1>
+            </div>
+            <p class="source-note">
+              Typing `functional_toolkit.py` with workbench colors from
+              <span class="theme-source">hc_black.json</span>.
+            </p>
+          </section>
+
+          <section class="workbench">
+            <div class="titlebar">
+              <div class="traffic"><span></span><span></span><span></span></div>
+              <div class="window-title">functional-toolkit - Visual Studio Code</div>
+              <div class="command-center">Search</div>
+            </div>
+
+            <aside class="activity" aria-label="Activity bar">
+              <svg class="activity-icon active" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="currentColor"
+                  d="M4 4h7v7H4V4Zm9 0h7v7h-7V4ZM4 13h7v7H4v-7Zm9 0h7v7h-7v-7Z"
+                />
+              </svg>
+              <svg class="activity-icon" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  d="m21 21-5.2-5.2M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Z"
+                />
+              </svg>
+              <svg class="activity-icon" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  d="M8 18 3 12l5-6m8 12 5-6-5-6"
+                />
+              </svg>
+              <svg class="activity-icon" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  d="M12 3v18m0-18 6 6m-6-6L6 9m6 12 6-6m-6 6-6-6"
+                />
+              </svg>
+            </aside>
+
+            <aside class="sidebar">
+              <div class="sidebar-title">Explorer</div>
+              <div class="section-title">⌄ Functional Toolkit</div>
+              <div class="tree">
+                <div class="tree-row">⌄ src</div>
+                <div class="tree-row child selected">◇ functional_toolkit.py</div>
+                <div class="tree-row child">◇ test_toolkit.py</div>
+                <div class="tree-row">◇ pyproject.toml</div>
+                <div class="tree-row">◇ README.md</div>
+              </div>
+            </aside>
+
+            <section class="editor-area">
+              <div class="tabs">
+                <div class="tab">◇ functional_toolkit.py</div>
+                <div class="tab inactive">README.md</div>
+              </div>
+              <div class="breadcrumbs">functional-toolkit › src › functional_toolkit.py</div>
+              <div class="editor">
+                <div class="active-line"></div>
+                <div class="code"></div>
+              </div>
+              <div class="terminal">
+                <div class="panel-tabs">
+                  <span class="active">Terminal</span><span>Problems</span><span>Output</span>
+                </div>
+                <div class="terminal-body">
+                  <div><span class="prompt">functional-toolkit %</span> python -m pytest</div>
+                  <div>collected 3 items</div>
+                  <div>tests/test_toolkit.py ... <span class="tok-comment">passed</span></div>
+                </div>
+              </div>
+            </section>
+
+            <footer class="statusbar">
+              <div class="status-left">
+                <span class="remote">main</span>
+                <span>0 errors</span>
+                <span>0 warnings</span>
+              </div>
+              <div class="status-right">
+                <span>Ln 17, Col 1</span>
+                <span>Spaces: 4</span>
+                <span>UTF-8</span>
+                <span>Python 3.12</span>
+              </div>
+            </footer>
+          </section>
+        </main>
+        <style>
+          * {
+            box-sizing: border-box;
+            letter-spacing: 0;
+          }
+
+          html,
+          body {
+            margin: 0;
+            width: 1920px;
+            height: 1080px;
+            overflow: hidden;
+            background: #000000;
+            font-family:
+              Inter,
+              -apple-system,
+              BlinkMacSystemFont,
+              "Segoe UI",
+              sans-serif;
+          }
+
+          .vscode-theme-scene {
+            --activity-bg: #181818;
+            --activity-fg: #d7d7d7;
+            --activity-muted: #868686;
+            --activity-active: #0078d4;
+            --sidebar-bg: #181818;
+            --sidebar-fg: #cccccc;
+            --sidebar-border: #2b2b2b;
+            --tab-bg: #181818;
+            --tab-active-bg: #1f1f1f;
+            --tab-active-fg: #ffffff;
+            --tab-inactive-fg: #9d9d9d;
+            --tab-border: #2b2b2b;
+            --editor-bg: #1f1f1f;
+            --editor-fg: #cccccc;
+            --editor-line: rgba(255, 255, 255, 0.04);
+            --gutter-fg: #6e7681;
+            --gutter-active-fg: #cccccc;
+            --panel-bg: #181818;
+            --panel-border: #2b2b2b;
+            --status-bg: #181818;
+            --status-fg: #cccccc;
+            --status-border: #2b2b2b;
+            --title-bg: #181818;
+            --title-fg: #cccccc;
+            --token-comment: #6a9955;
+            --token-keyword: #c586c0;
+            --token-function: #dcdcaa;
+            --token-string: #ce9178;
+            --token-number: #b5cea8;
+            --token-variable: #9cdcfe;
+            --token-parameter: #9cdcfe;
+            --token-operator: #d4d4d4;
+            --token-punctuation: #d4d4d4;
+            --token-class-name: #4ec9b0;
+            position: relative;
+            width: 1920px;
+            height: 1080px;
+            overflow: hidden;
+            background:
+              linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.32)),
+              url("../assets/background.jpeg") center / cover no-repeat;
+            color: var(--editor-fg);
+          }
+
+          .scene-content {
+            position: relative;
+            z-index: 1;
+            width: 100%;
+            height: 100%;
+            padding: 54px 70px 92px;
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+            perspective: 2200px;
+            perspective-origin: 56% 52%;
+          }
+
+          .header {
+            display: flex;
+            align-items: end;
+            justify-content: space-between;
+            min-height: 66px;
+            text-shadow:
+              0 2px 12px rgba(0, 0, 0, 0.42),
+              0 14px 34px rgba(0, 0, 0, 0.32);
+          }
+
+          .kicker {
+            margin: 0 0 7px;
+            color: var(--gutter-fg);
+            font-size: 15px;
+            font-weight: 650;
+            text-transform: uppercase;
+            text-shadow:
+              0 2px 8px rgba(0, 0, 0, 0.48),
+              0 10px 26px rgba(0, 0, 0, 0.36);
+          }
+
+          .title {
+            margin: 0;
+            color: var(--editor-fg);
+            font-size: 44px;
+            line-height: 1;
+            font-weight: 760;
+          }
+
+          .source-note {
+            width: 510px;
+            color: var(--gutter-fg);
+            font-size: 16px;
+            line-height: 1.35;
+            text-align: right;
+            text-shadow:
+              0 2px 10px rgba(0, 0, 0, 0.46),
+              0 12px 30px rgba(0, 0, 0, 0.34);
+          }
+
+          .workbench {
+            height: 824px;
+            display: grid;
+            grid-template-columns: 54px 290px 1fr;
+            grid-template-rows: 36px 1fr 26px;
+            overflow: hidden;
+            border: 1px solid var(--sidebar-border);
+            border-radius: 8px;
+            background: var(--editor-bg);
+            box-shadow: 0 34px 90px rgba(0, 0, 0, 0.42);
+            transform: translateZ(0);
+            transform-origin: 82% 50%;
+            transform-style: preserve-3d;
+            will-change: transform;
+          }
+
+          .titlebar {
+            grid-column: 1 / -1;
+            display: grid;
+            grid-template-columns: 120px 1fr 210px;
+            align-items: center;
+            background: var(--title-bg);
+            color: var(--title-fg);
+            border-bottom: 1px solid var(--tab-border);
+            font-size: 12px;
+          }
+
+          .traffic {
+            display: flex;
+            gap: 8px;
+            padding-left: 18px;
+          }
+
+          .traffic span {
+            width: 12px;
+            height: 12px;
+            border-radius: 999px;
+          }
+
+          .traffic span:nth-child(1) {
+            background: #ff5f57;
+          }
+          .traffic span:nth-child(2) {
+            background: #ffbd2e;
+          }
+          .traffic span:nth-child(3) {
+            background: #28c840;
+          }
+
+          .window-title {
+            justify-self: center;
+            opacity: 0.84;
+          }
+
+          .command-center {
+            justify-self: end;
+            width: 176px;
+            height: 22px;
+            margin-right: 16px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border: 1px solid color-mix(in srgb, var(--title-fg), transparent 78%);
+            border-radius: 5px;
+            color: color-mix(in srgb, var(--title-fg), transparent 18%);
+          }
+
+          .activity {
+            grid-row: 2 / 3;
+            background: var(--activity-bg);
+            border-right: 1px solid var(--sidebar-border);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 10px 0;
+            gap: 18px;
+          }
+
+          .activity-icon {
+            width: 28px;
+            height: 28px;
+            color: var(--activity-muted);
+          }
+
+          .activity-icon.active {
+            color: var(--activity-fg);
+            border-left: 2px solid var(--activity-active);
+            padding-left: 4px;
+          }
+
+          .sidebar {
+            grid-row: 2 / 3;
+            background: var(--sidebar-bg);
+            color: var(--sidebar-fg);
+            border-right: 1px solid var(--sidebar-border);
+            display: flex;
+            flex-direction: column;
+            min-width: 0;
+          }
+
+          .sidebar-title {
+            height: 38px;
+            display: flex;
+            align-items: center;
+            padding: 0 20px;
+            color: var(--sidebar-fg);
+            font-size: 11px;
+            text-transform: uppercase;
+          }
+
+          .section-title {
+            height: 24px;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            padding: 0 14px;
+            background: color-mix(in srgb, var(--sidebar-bg), var(--sidebar-fg) 5%);
+            border-top: 1px solid var(--sidebar-border);
+            border-bottom: 1px solid var(--sidebar-border);
+            color: var(--sidebar-fg);
+            font-size: 11px;
+            font-weight: 700;
+          }
+
+          .tree {
+            padding: 8px 0;
+            font-size: 13px;
+            line-height: 24px;
+          }
+
+          .tree-row {
+            height: 24px;
+            display: flex;
+            align-items: center;
+            gap: 7px;
+            padding: 0 10px 0 18px;
+            color: color-mix(in srgb, var(--sidebar-fg), transparent 8%);
+            white-space: nowrap;
+          }
+
+          .tree-row.child {
+            padding-left: 34px;
+          }
+
+          .tree-row.selected {
+            background: color-mix(in srgb, var(--sidebar-fg), transparent 88%);
+            color: var(--sidebar-fg);
+          }
+
+          .editor-area {
+            grid-row: 2 / 3;
+            display: grid;
+            grid-template-rows: 36px 30px 1fr 138px;
+            min-width: 0;
+            background: var(--editor-bg);
+          }
+
+          .tabs {
+            display: flex;
+            background: var(--tab-bg);
+            border-bottom: 1px solid var(--tab-border);
+          }
+
+          .tab {
+            width: 205px;
+            height: 36px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 0 13px;
+            border-right: 1px solid var(--tab-border);
+            background: var(--tab-active-bg);
+            color: var(--tab-active-fg);
+            border-top: 2px solid var(--activity-active);
+            font-size: 13px;
+          }
+
+          .tab.inactive {
+            background: var(--tab-bg);
+            color: var(--tab-inactive-fg);
+            border-top-color: transparent;
+          }
+
+          .breadcrumbs {
+            display: flex;
+            align-items: center;
+            gap: 7px;
+            padding: 0 18px;
+            color: var(--gutter-fg);
+            border-bottom: 1px solid color-mix(in srgb, var(--tab-border), transparent 20%);
+            font-size: 12px;
+          }
+
+          .editor {
+            position: relative;
+            overflow: hidden;
+            background: var(--editor-bg);
+            color: var(--editor-fg);
+            font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+            font-size: 18px;
+            line-height: 1.52;
+          }
+
+          .active-line {
+            position: absolute;
+            left: 0;
+            right: 0;
+            top: 0;
+            height: 28px;
+            background: var(--editor-line);
+            will-change: transform;
+          }
+
+          .code {
+            position: relative;
+            padding: 20px 36px 18px 0;
+          }
+
+          .line {
+            height: 28px;
+            display: grid;
+            grid-template-columns: 72px 1fr;
+            align-items: center;
+          }
+
+          .line-number {
+            padding-right: 18px;
+            color: var(--gutter-fg);
+            text-align: right;
+            user-select: none;
+          }
+
+          .line.is-active .line-number {
+            color: var(--gutter-active-fg);
+          }
+
+          .line-code {
+            white-space: pre;
+          }
+
+          .char {
+            opacity: 0;
+          }
+
+          .tok-comment {
+            color: var(--token-comment);
+          }
+          .tok-keyword {
+            color: var(--token-keyword);
+          }
+          .tok-function {
+            color: var(--token-function);
+          }
+          .tok-string {
+            color: var(--token-string);
+          }
+          .tok-number {
+            color: var(--token-number);
+          }
+          .tok-variable {
+            color: var(--token-variable);
+          }
+          .tok-parameter {
+            color: var(--token-parameter);
+          }
+          .tok-operator {
+            color: var(--token-operator);
+          }
+          .tok-punctuation {
+            color: var(--token-punctuation);
+          }
+          .tok-class-name {
+            color: var(--token-class-name);
+          }
+
+          .caret {
+            position: absolute;
+            left: 0;
+            top: 0;
+            z-index: 3;
+            display: block;
+            width: 2px;
+            height: 22px;
+            background: var(--editor-fg);
+            pointer-events: none;
+            will-change: transform, opacity;
+          }
+
+          .terminal {
+            display: grid;
+            grid-template-rows: 32px 1fr;
+            background: var(--panel-bg);
+            border-top: 1px solid var(--panel-border);
+            color: var(--editor-fg);
+            font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+            font-size: 14px;
+          }
+
+          .panel-tabs {
+            display: flex;
+            align-items: center;
+            gap: 22px;
+            padding: 0 18px;
+            border-bottom: 1px solid var(--panel-border);
+            color: var(--gutter-fg);
+            font-family:
+              Inter,
+              -apple-system,
+              BlinkMacSystemFont,
+              "Segoe UI",
+              sans-serif;
+            font-size: 12px;
+            text-transform: uppercase;
+          }
+
+          .panel-tabs .active {
+            color: var(--editor-fg);
+            border-bottom: 1px solid var(--activity-active);
+            height: 32px;
+            display: flex;
+            align-items: center;
+          }
+
+          .terminal-body {
+            padding: 12px 20px;
+            color: var(--editor-fg);
+            line-height: 1.8;
+          }
+
+          .prompt {
+            color: var(--token-function);
+          }
+
+          .statusbar {
+            grid-column: 1 / -1;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            background: var(--status-bg);
+            color: var(--status-fg);
+            border-top: 1px solid var(--status-border);
+            font-size: 12px;
+          }
+
+          .status-left,
+          .status-right {
+            display: flex;
+            align-items: center;
+            gap: 18px;
+            padding: 0 12px;
+          }
+
+          .remote {
+            align-self: stretch;
+            display: flex;
+            align-items: center;
+            padding: 0 12px;
+            margin-left: -12px;
+            background: var(--status-remote-bg, var(--activity-active));
+            color: var(--status-remote-fg, #ffffff);
+          }
+
+          svg {
+            display: block;
+          }
+        </style>
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (() => {
+            const codeLines = [
+              [{ text: "# A small functional toolkit", token: "comment" }],
+              [
+                { text: "def", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "pluck_deep", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "key", token: "parameter" },
+                { text: "):", token: "punctuation" },
+              ],
+              [
+                { text: "    ", token: "plain" },
+                { text: "return", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "obj", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "reduce", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "acc", token: "parameter" },
+                { text: ", ", token: "punctuation" },
+                { text: "k", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "acc", token: "variable" },
+                { text: "[", token: "punctuation" },
+                { text: "k", token: "variable" },
+                { text: "]", token: "punctuation" },
+                { text: ", ", token: "punctuation" },
+                { text: "key", token: "variable" },
+                { text: ".split", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "'.'", token: "string" },
+                { text: "), ", token: "punctuation" },
+                { text: "obj", token: "variable" },
+                { text: ")", token: "punctuation" },
+              ],
+              [],
+              [
+                { text: "def", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "compose", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "*", token: "operator" },
+                { text: "fns", token: "parameter" },
+                { text: "):", token: "punctuation" },
+              ],
+              [
+                { text: "    ", token: "plain" },
+                { text: "return", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "res", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "reduce", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "acc", token: "parameter" },
+                { text: ", ", token: "punctuation" },
+                { text: "fn", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "fn", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "acc", token: "variable" },
+                { text: "), ", token: "punctuation" },
+                { text: "fns", token: "variable" },
+                { text: ", ", token: "punctuation" },
+                { text: "res", token: "variable" },
+                { text: ")", token: "punctuation" },
+              ],
+              [],
+              [
+                { text: "def", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "unfold", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "f", token: "parameter" },
+                { text: ", ", token: "punctuation" },
+                { text: "seed", token: "parameter" },
+                { text: "):", token: "punctuation" },
+              ],
+              [
+                { text: "    ", token: "plain" },
+                { text: '"""Build a list by repeatedly applying f to a seed."""', token: "string" },
+              ],
+              [
+                { text: "    acc", token: "variable" },
+                { text: " = ", token: "operator" },
+                { text: "[]", token: "punctuation" },
+              ],
+              [
+                { text: "    while", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "True", token: "className" },
+                { text: ":", token: "punctuation" },
+              ],
+              [
+                { text: "        result", token: "variable" },
+                { text: " = ", token: "operator" },
+                { text: "f", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "seed", token: "variable" },
+                { text: ")", token: "punctuation" },
+              ],
+              [
+                { text: "        if", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "result", token: "variable" },
+                { text: " is ", token: "keyword" },
+                { text: "None", token: "className" },
+                { text: ":", token: "punctuation" },
+              ],
+              [
+                { text: "            return", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "acc", token: "variable" },
+              ],
+              [
+                { text: "        acc", token: "variable" },
+                { text: ".append", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "result", token: "variable" },
+                { text: "[", token: "punctuation" },
+                { text: "0", token: "number" },
+                { text: "])", token: "punctuation" },
+              ],
+              [
+                { text: "        seed", token: "variable" },
+                { text: " = ", token: "operator" },
+                { text: "result", token: "variable" },
+                { text: "[", token: "punctuation" },
+                { text: "1", token: "number" },
+                { text: "]", token: "punctuation" },
+              ],
+              [],
+            ];
+
+            const fallback = {
+              "activityBar.background": "#181818",
+              "activityBar.foreground": "#d7d7d7",
+              "activityBar.inactiveForeground": "#868686",
+              "activityBar.activeBorder": "#0078d4",
+              "sideBar.background": "#181818",
+              "sideBar.foreground": "#cccccc",
+              "sideBar.border": "#2b2b2b",
+              "tab.activeBackground": "#1f1f1f",
+              "tab.activeForeground": "#ffffff",
+              "tab.inactiveBackground": "#181818",
+              "tab.inactiveForeground": "#9d9d9d",
+              "tab.border": "#2b2b2b",
+              "editor.background": "#1f1f1f",
+              "editor.foreground": "#cccccc",
+              "editor.lineHighlightBackground": "#ffffff0a",
+              "editorLineNumber.foreground": "#6e7681",
+              "editorLineNumber.activeForeground": "#cccccc",
+              "panel.background": "#181818",
+              "panel.border": "#2b2b2b",
+              "statusBar.background": "#181818",
+              "statusBar.foreground": "#cccccc",
+              "statusBar.border": "#2b2b2b",
+              "titleBar.activeBackground": "#181818",
+              "titleBar.activeForeground": "#cccccc",
+            };
+
+            function color(theme, key) {
+              return theme.colors[key] || fallback[key] || theme.colors.foreground || "#cccccc";
+            }
+
+            function solarizedGrey(theme) {
+              return (
+                theme.colors["tab.inactiveForeground"] ||
+                theme.colors["editor.foreground"] ||
+                "#586E75"
+              );
+            }
+
+            function setVar(root, name, value) {
+              root.style.setProperty(name, value);
+            }
+
+            function applyTheme(root, theme) {
+              const solarizedUiGrey = theme.id === "solarized-light" ? solarizedGrey(theme) : null;
+              setVar(root, "--activity-bg", color(theme, "activityBar.background"));
+              setVar(
+                root,
+                "--activity-fg",
+                solarizedUiGrey || color(theme, "activityBar.foreground"),
+              );
+              setVar(
+                root,
+                "--activity-muted",
+                solarizedUiGrey || color(theme, "activityBar.inactiveForeground"),
+              );
+              setVar(root, "--activity-active", color(theme, "activityBar.activeBorder"));
+              setVar(root, "--sidebar-bg", color(theme, "sideBar.background"));
+              setVar(root, "--sidebar-fg", solarizedUiGrey || color(theme, "sideBar.foreground"));
+              setVar(root, "--sidebar-border", color(theme, "sideBar.border"));
+              setVar(root, "--tab-bg", color(theme, "tab.inactiveBackground"));
+              setVar(root, "--tab-active-bg", color(theme, "tab.activeBackground"));
+              setVar(
+                root,
+                "--tab-active-fg",
+                solarizedUiGrey || color(theme, "tab.activeForeground"),
+              );
+              setVar(
+                root,
+                "--tab-inactive-fg",
+                solarizedUiGrey || color(theme, "tab.inactiveForeground"),
+              );
+              setVar(root, "--tab-border", color(theme, "tab.border"));
+              setVar(root, "--editor-bg", color(theme, "editor.background"));
+              setVar(root, "--editor-fg", color(theme, "editor.foreground"));
+              setVar(root, "--editor-line", color(theme, "editor.lineHighlightBackground"));
+              setVar(root, "--gutter-fg", color(theme, "editorLineNumber.foreground"));
+              setVar(root, "--gutter-active-fg", color(theme, "editorLineNumber.activeForeground"));
+              setVar(root, "--panel-bg", color(theme, "panel.background"));
+              setVar(root, "--panel-border", color(theme, "panel.border"));
+              setVar(root, "--status-bg", color(theme, "statusBar.background"));
+              setVar(root, "--status-fg", color(theme, "statusBar.foreground"));
+              setVar(root, "--status-border", color(theme, "statusBar.border"));
+              setVar(root, "--status-remote-bg", color(theme, "statusBarItem.remoteBackground"));
+              setVar(
+                root,
+                "--status-remote-fg",
+                solarizedUiGrey || color(theme, "statusBarItem.remoteForeground"),
+              );
+              setVar(root, "--title-bg", color(theme, "titleBar.activeBackground"));
+              setVar(
+                root,
+                "--title-fg",
+                solarizedUiGrey || color(theme, "titleBar.activeForeground"),
+              );
+              setVar(root, "--token-comment", theme.tokens.comment);
+              setVar(root, "--token-keyword", theme.tokens.keyword);
+              setVar(root, "--token-function", theme.tokens.function);
+              setVar(root, "--token-string", theme.tokens.string);
+              setVar(root, "--token-number", theme.tokens.number);
+              setVar(root, "--token-variable", theme.tokens.variable);
+              setVar(root, "--token-parameter", theme.tokens.parameter);
+              setVar(root, "--token-operator", theme.tokens.operator);
+              setVar(root, "--token-punctuation", theme.tokens.punctuation);
+              setVar(root, "--token-class-name", theme.tokens.className);
+            }
+
+            function renderCode(root) {
+              const code = root.querySelector(".code");
+              codeLines.forEach((segments, index) => {
+                const line = document.createElement("div");
+                line.className = "line";
+                line.dataset.lineIndex = String(index);
+
+                const lineNumber = document.createElement("span");
+                lineNumber.className = "line-number";
+                lineNumber.textContent = String(index + 1);
+                line.appendChild(lineNumber);
+
+                const lineCode = document.createElement("span");
+                lineCode.className = "line-code";
+                segments.forEach((segment) => {
+                  [...segment.text].forEach((char) => {
+                    const span = document.createElement("span");
+                    span.className =
+                      segment.token === "plain"
+                        ? "char"
+                        : "char tok-" +
+                          segment.token.replace(/[A-Z]/g, (match) => "-" + match.toLowerCase());
+                    span.dataset.lineIndex = String(index);
+                    span.textContent = char;
+                    lineCode.appendChild(span);
+                  });
+                });
+                line.appendChild(lineCode);
+                code.appendChild(line);
+              });
+
+              const caret = document.createElement("span");
+              caret.className = "caret";
+              root.querySelector(".editor").appendChild(caret);
+            }
+
+            function caretPointForElement(editor, el) {
+              const editorBox = editor.getBoundingClientRect();
+              const charBox = el.getBoundingClientRect();
+              return {
+                x: charBox.right - editorBox.left + 2,
+                y: charBox.top - editorBox.top + 3,
+              };
+            }
+
+            function caretPointForLineStart(editor, line) {
+              const editorBox = editor.getBoundingClientRect();
+              const lineBox = line.getBoundingClientRect();
+              const codeBox = line.querySelector(".line-code").getBoundingClientRect();
+              return {
+                x: codeBox.left - editorBox.left,
+                y: lineBox.top - editorBox.top + 3,
+              };
+            }
+
+            function lineHighlightY(editor, line) {
+              const editorBox = editor.getBoundingClientRect();
+              const lineBox = line.getBoundingClientRect();
+              return lineBox.top - editorBox.top;
+            }
+
+            function buildTimeline(root, compositionId) {
+              const tl = gsap.timeline({ paused: true });
+              const editor = root.querySelector(".editor");
+              const caret = root.querySelector(".caret");
+              const activeLine = root.querySelector(".active-line");
+              const lineEls = gsap.utils.toArray(root.querySelectorAll(".line"));
+              const lineStartTimes = [];
+              const charSchedule = [];
+              let cursorTime = 0.95;
+
+              lineEls.forEach((line, lineIndex) => {
+                const lineChars = gsap.utils.toArray(line.querySelectorAll(".char"));
+                lineStartTimes[lineIndex] = cursorTime;
+                lineChars.forEach((char, charIndex) => {
+                  charSchedule.push({ char, time: cursorTime + charIndex * 0.012 });
+                });
+                cursorTime += Math.max(lineChars.length * 0.012, 0.08) + 0.045;
+              });
+
+              gsap.set(activeLine, { y: lineHighlightY(editor, lineEls[0]) });
+              gsap.set(caret, caretPointForLineStart(editor, lineEls[0]));
+
+              tl.from(
+                root.querySelector(".header"),
+                { y: 24, opacity: 0, duration: 0.45, ease: "power3.out" },
+                0,
+              );
+              tl.from(
+                root.querySelector(".workbench"),
+                { y: 42, opacity: 0, scale: 0.986, duration: 0.58, ease: "power3.out" },
+                0.1,
+              );
+              tl.from(activeLine, { opacity: 0, duration: 0.22, ease: "power2.out" }, 0.74);
+              lineStartTimes.forEach((time, lineIndex) => {
+                const line = lineEls[lineIndex];
+                tl.set(activeLine, { y: lineHighlightY(editor, line) }, time);
+                tl.set(caret, caretPointForLineStart(editor, line), time);
+                tl.call(
+                  () => {
+                    lineEls.forEach((item) => item.classList.toggle("is-active", item === line));
+                  },
+                  [],
+                  time,
+                );
+              });
+              charSchedule.forEach(({ char, time }) => {
+                tl.set(char, { opacity: 1 }, time);
+                tl.set(caret, caretPointForElement(editor, char), time + 0.002);
+              });
+              tl.to(
+                root.querySelector(".caret"),
+                { opacity: 0, duration: 0.34, repeat: 25, yoyo: true, ease: "steps(1)" },
+                0.95,
+              );
+              tl.from(
+                root.querySelector(".terminal"),
+                { y: 140, opacity: 0, duration: 0.56, ease: "power3.out" },
+                7.55,
+              );
+              tl.from(
+                root.querySelector(".terminal-body").children,
+                { opacity: 0, y: 8, duration: 0.24, stagger: 0.16, ease: "power2.out" },
+                8.05,
+              );
+              tl.to(
+                root.querySelector(".workbench"),
+                { rotateY: -10.5, z: 74, duration: 0.72, ease: "power2.inOut" },
+                9.35,
+              );
+              tl.to(
+                root.querySelector(".workbench"),
+                { rotateY: 0, z: 0, duration: 0.62, ease: "power2.inOut" },
+                10.08,
+              );
+
+              window.__timelines = window.__timelines || {};
+              window.__timelines[compositionId] = tl;
+
+              const previewTime = new URLSearchParams(window.location.search).get("t");
+              if (previewTime !== null) {
+                tl.time(Number(previewTime));
+              }
+            }
+
+            window.createVSCodeThemeComposition = (compositionId, themeOrId) => {
+              const root =
+                document.querySelector(
+                  '[data-composition-id="' + compositionId + '"] .vscode-theme-scene',
+                ) ||
+                document.querySelector(
+                  '.vscode-theme-scene[data-composition-id="' + compositionId + '"]',
+                ) ||
+                document.querySelector('[data-composition-id="' + compositionId + '"]');
+              const theme =
+                typeof themeOrId === "string"
+                  ? window.VSCODE_THEME_REGISTRY.find((item) => item.id === themeOrId)
+                  : themeOrId;
+              if (!root || !theme) return;
+              root.querySelector(".theme-label").textContent = theme.label;
+              root.querySelector(".theme-source").textContent = theme.sourceFile;
+              applyTheme(root, theme);
+              renderCode(root);
+              buildTimeline(root, compositionId);
+            };
+          })();
+        </script>
+        <script>
+          window.__timelines = window.__timelines || {};
+          window.__timelines["vscode-high-contrast"] =
+            window.__timelines["vscode-high-contrast"] || gsap.timeline({ paused: true });
+          window.createVSCodeThemeComposition("vscode-high-contrast", {
+            id: "high-contrast",
+            label: "Default High Contrast",
+            sourceFile: "hc_black.json",
+            uiTheme: "vs-dark",
+            colors: {
+              "editor.background": "#000000",
+              "editor.foreground": "#FFFFFF",
+              "editor.selectionBackground": "#FFFFFF",
+              "sideBarTitle.foreground": "#FFFFFF",
+              "statusBarItem.remoteBackground": "#00000000",
+            },
+            tokens: {
+              comment: "#7ca668",
+              keyword: "#C586C0",
+              function: "#DCDCAA",
+              string: "#d16969",
+              number: "#b5cea8",
+              variable: "#9CDCFE",
+              parameter: "#9CDCFE",
+              operator: "#569cd6",
+              punctuation: "#4EC9B0",
+              className: "#4EC9B0",
+            },
+          });
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/code-snippet-light-2026/background.jpeg b/docs/public/catalog/blocks/code-snippet-light-2026/background.jpeg
new file mode 100644
index 0000000000..1f3e465cd2
Binary files /dev/null and b/docs/public/catalog/blocks/code-snippet-light-2026/background.jpeg differ
diff --git a/docs/public/catalog/blocks/code-snippet-light-2026/code-snippet-light-2026.html b/docs/public/catalog/blocks/code-snippet-light-2026/code-snippet-light-2026.html
new file mode 100644
index 0000000000..492d930b13
--- /dev/null
+++ b/docs/public/catalog/blocks/code-snippet-light-2026/code-snippet-light-2026.html
@@ -0,0 +1,1089 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Light 2026 VS Code Theme Composition</title>
+  </head>
+  <body>
+    <template id="vscode-light-2026-template">
+      <div
+        class="vscode-theme-scene"
+        data-composition-id="vscode-light-2026"
+        data-width="1920"
+        data-height="1080"
+      >
+        <main class="scene-content">
+          <section class="header">
+            <div>
+              <p class="kicker">Official VS Code built-in theme</p>
+              <h1 class="title"><span class="theme-label">Light 2026</span></h1>
+            </div>
+            <p class="source-note">
+              Typing `functional_toolkit.py` with workbench colors from
+              <span class="theme-source">2026-light.json</span>.
+            </p>
+          </section>
+
+          <section class="workbench">
+            <div class="titlebar">
+              <div class="traffic"><span></span><span></span><span></span></div>
+              <div class="window-title">functional-toolkit - Visual Studio Code</div>
+              <div class="command-center">Search</div>
+            </div>
+
+            <aside class="activity" aria-label="Activity bar">
+              <svg class="activity-icon active" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="currentColor"
+                  d="M4 4h7v7H4V4Zm9 0h7v7h-7V4ZM4 13h7v7H4v-7Zm9 0h7v7h-7v-7Z"
+                />
+              </svg>
+              <svg class="activity-icon" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  d="m21 21-5.2-5.2M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Z"
+                />
+              </svg>
+              <svg class="activity-icon" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  d="M8 18 3 12l5-6m8 12 5-6-5-6"
+                />
+              </svg>
+              <svg class="activity-icon" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  d="M12 3v18m0-18 6 6m-6-6L6 9m6 12 6-6m-6 6-6-6"
+                />
+              </svg>
+            </aside>
+
+            <aside class="sidebar">
+              <div class="sidebar-title">Explorer</div>
+              <div class="section-title">⌄ Functional Toolkit</div>
+              <div class="tree">
+                <div class="tree-row">⌄ src</div>
+                <div class="tree-row child selected">◇ functional_toolkit.py</div>
+                <div class="tree-row child">◇ test_toolkit.py</div>
+                <div class="tree-row">◇ pyproject.toml</div>
+                <div class="tree-row">◇ README.md</div>
+              </div>
+            </aside>
+
+            <section class="editor-area">
+              <div class="tabs">
+                <div class="tab">◇ functional_toolkit.py</div>
+                <div class="tab inactive">README.md</div>
+              </div>
+              <div class="breadcrumbs">functional-toolkit › src › functional_toolkit.py</div>
+              <div class="editor">
+                <div class="active-line"></div>
+                <div class="code"></div>
+              </div>
+              <div class="terminal">
+                <div class="panel-tabs">
+                  <span class="active">Terminal</span><span>Problems</span><span>Output</span>
+                </div>
+                <div class="terminal-body">
+                  <div><span class="prompt">functional-toolkit %</span> python -m pytest</div>
+                  <div>collected 3 items</div>
+                  <div>tests/test_toolkit.py ... <span class="tok-comment">passed</span></div>
+                </div>
+              </div>
+            </section>
+
+            <footer class="statusbar">
+              <div class="status-left">
+                <span class="remote">main</span>
+                <span>0 errors</span>
+                <span>0 warnings</span>
+              </div>
+              <div class="status-right">
+                <span>Ln 17, Col 1</span>
+                <span>Spaces: 4</span>
+                <span>UTF-8</span>
+                <span>Python 3.12</span>
+              </div>
+            </footer>
+          </section>
+        </main>
+        <style>
+          * {
+            box-sizing: border-box;
+            letter-spacing: 0;
+          }
+
+          html,
+          body {
+            margin: 0;
+            width: 1920px;
+            height: 1080px;
+            overflow: hidden;
+            background: #000000;
+            font-family:
+              Inter,
+              -apple-system,
+              BlinkMacSystemFont,
+              "Segoe UI",
+              sans-serif;
+          }
+
+          .vscode-theme-scene {
+            --activity-bg: #181818;
+            --activity-fg: #d7d7d7;
+            --activity-muted: #868686;
+            --activity-active: #0078d4;
+            --sidebar-bg: #181818;
+            --sidebar-fg: #cccccc;
+            --sidebar-border: #2b2b2b;
+            --tab-bg: #181818;
+            --tab-active-bg: #1f1f1f;
+            --tab-active-fg: #ffffff;
+            --tab-inactive-fg: #9d9d9d;
+            --tab-border: #2b2b2b;
+            --editor-bg: #1f1f1f;
+            --editor-fg: #cccccc;
+            --editor-line: rgba(255, 255, 255, 0.04);
+            --gutter-fg: #6e7681;
+            --gutter-active-fg: #cccccc;
+            --panel-bg: #181818;
+            --panel-border: #2b2b2b;
+            --status-bg: #181818;
+            --status-fg: #cccccc;
+            --status-border: #2b2b2b;
+            --title-bg: #181818;
+            --title-fg: #cccccc;
+            --token-comment: #6a9955;
+            --token-keyword: #c586c0;
+            --token-function: #dcdcaa;
+            --token-string: #ce9178;
+            --token-number: #b5cea8;
+            --token-variable: #9cdcfe;
+            --token-parameter: #9cdcfe;
+            --token-operator: #d4d4d4;
+            --token-punctuation: #d4d4d4;
+            --token-class-name: #4ec9b0;
+            position: relative;
+            width: 1920px;
+            height: 1080px;
+            overflow: hidden;
+            background:
+              linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.32)),
+              url("../assets/background.jpeg") center / cover no-repeat;
+            color: var(--editor-fg);
+          }
+
+          .scene-content {
+            position: relative;
+            z-index: 1;
+            width: 100%;
+            height: 100%;
+            padding: 54px 70px 92px;
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+            perspective: 2200px;
+            perspective-origin: 56% 52%;
+          }
+
+          .header {
+            display: flex;
+            align-items: end;
+            justify-content: space-between;
+            min-height: 66px;
+            text-shadow:
+              0 2px 12px rgba(0, 0, 0, 0.42),
+              0 14px 34px rgba(0, 0, 0, 0.32);
+          }
+
+          .kicker {
+            margin: 0 0 7px;
+            color: var(--gutter-fg);
+            font-size: 15px;
+            font-weight: 650;
+            text-transform: uppercase;
+            text-shadow:
+              0 2px 8px rgba(0, 0, 0, 0.48),
+              0 10px 26px rgba(0, 0, 0, 0.36);
+          }
+
+          .title {
+            margin: 0;
+            color: var(--editor-fg);
+            font-size: 44px;
+            line-height: 1;
+            font-weight: 760;
+          }
+
+          .source-note {
+            width: 510px;
+            color: var(--gutter-fg);
+            font-size: 16px;
+            line-height: 1.35;
+            text-align: right;
+            text-shadow:
+              0 2px 10px rgba(0, 0, 0, 0.46),
+              0 12px 30px rgba(0, 0, 0, 0.34);
+          }
+
+          .workbench {
+            height: 824px;
+            display: grid;
+            grid-template-columns: 54px 290px 1fr;
+            grid-template-rows: 36px 1fr 26px;
+            overflow: hidden;
+            border: 1px solid var(--sidebar-border);
+            border-radius: 8px;
+            background: var(--editor-bg);
+            box-shadow: 0 34px 90px rgba(0, 0, 0, 0.42);
+            transform: translateZ(0);
+            transform-origin: 82% 50%;
+            transform-style: preserve-3d;
+            will-change: transform;
+          }
+
+          .titlebar {
+            grid-column: 1 / -1;
+            display: grid;
+            grid-template-columns: 120px 1fr 210px;
+            align-items: center;
+            background: var(--title-bg);
+            color: var(--title-fg);
+            border-bottom: 1px solid var(--tab-border);
+            font-size: 12px;
+          }
+
+          .traffic {
+            display: flex;
+            gap: 8px;
+            padding-left: 18px;
+          }
+
+          .traffic span {
+            width: 12px;
+            height: 12px;
+            border-radius: 999px;
+          }
+
+          .traffic span:nth-child(1) {
+            background: #ff5f57;
+          }
+          .traffic span:nth-child(2) {
+            background: #ffbd2e;
+          }
+          .traffic span:nth-child(3) {
+            background: #28c840;
+          }
+
+          .window-title {
+            justify-self: center;
+            opacity: 0.84;
+          }
+
+          .command-center {
+            justify-self: end;
+            width: 176px;
+            height: 22px;
+            margin-right: 16px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border: 1px solid color-mix(in srgb, var(--title-fg), transparent 78%);
+            border-radius: 5px;
+            color: color-mix(in srgb, var(--title-fg), transparent 18%);
+          }
+
+          .activity {
+            grid-row: 2 / 3;
+            background: var(--activity-bg);
+            border-right: 1px solid var(--sidebar-border);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 10px 0;
+            gap: 18px;
+          }
+
+          .activity-icon {
+            width: 28px;
+            height: 28px;
+            color: var(--activity-muted);
+          }
+
+          .activity-icon.active {
+            color: var(--activity-fg);
+            border-left: 2px solid var(--activity-active);
+            padding-left: 4px;
+          }
+
+          .sidebar {
+            grid-row: 2 / 3;
+            background: var(--sidebar-bg);
+            color: var(--sidebar-fg);
+            border-right: 1px solid var(--sidebar-border);
+            display: flex;
+            flex-direction: column;
+            min-width: 0;
+          }
+
+          .sidebar-title {
+            height: 38px;
+            display: flex;
+            align-items: center;
+            padding: 0 20px;
+            color: var(--sidebar-fg);
+            font-size: 11px;
+            text-transform: uppercase;
+          }
+
+          .section-title {
+            height: 24px;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            padding: 0 14px;
+            background: color-mix(in srgb, var(--sidebar-bg), var(--sidebar-fg) 5%);
+            border-top: 1px solid var(--sidebar-border);
+            border-bottom: 1px solid var(--sidebar-border);
+            color: var(--sidebar-fg);
+            font-size: 11px;
+            font-weight: 700;
+          }
+
+          .tree {
+            padding: 8px 0;
+            font-size: 13px;
+            line-height: 24px;
+          }
+
+          .tree-row {
+            height: 24px;
+            display: flex;
+            align-items: center;
+            gap: 7px;
+            padding: 0 10px 0 18px;
+            color: color-mix(in srgb, var(--sidebar-fg), transparent 8%);
+            white-space: nowrap;
+          }
+
+          .tree-row.child {
+            padding-left: 34px;
+          }
+
+          .tree-row.selected {
+            background: color-mix(in srgb, var(--sidebar-fg), transparent 88%);
+            color: var(--sidebar-fg);
+          }
+
+          .editor-area {
+            grid-row: 2 / 3;
+            display: grid;
+            grid-template-rows: 36px 30px 1fr 138px;
+            min-width: 0;
+            background: var(--editor-bg);
+          }
+
+          .tabs {
+            display: flex;
+            background: var(--tab-bg);
+            border-bottom: 1px solid var(--tab-border);
+          }
+
+          .tab {
+            width: 205px;
+            height: 36px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 0 13px;
+            border-right: 1px solid var(--tab-border);
+            background: var(--tab-active-bg);
+            color: var(--tab-active-fg);
+            border-top: 2px solid var(--activity-active);
+            font-size: 13px;
+          }
+
+          .tab.inactive {
+            background: var(--tab-bg);
+            color: var(--tab-inactive-fg);
+            border-top-color: transparent;
+          }
+
+          .breadcrumbs {
+            display: flex;
+            align-items: center;
+            gap: 7px;
+            padding: 0 18px;
+            color: var(--gutter-fg);
+            border-bottom: 1px solid color-mix(in srgb, var(--tab-border), transparent 20%);
+            font-size: 12px;
+          }
+
+          .editor {
+            position: relative;
+            overflow: hidden;
+            background: var(--editor-bg);
+            color: var(--editor-fg);
+            font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+            font-size: 18px;
+            line-height: 1.52;
+          }
+
+          .active-line {
+            position: absolute;
+            left: 0;
+            right: 0;
+            top: 0;
+            height: 28px;
+            background: var(--editor-line);
+            will-change: transform;
+          }
+
+          .code {
+            position: relative;
+            padding: 20px 36px 18px 0;
+          }
+
+          .line {
+            height: 28px;
+            display: grid;
+            grid-template-columns: 72px 1fr;
+            align-items: center;
+          }
+
+          .line-number {
+            padding-right: 18px;
+            color: var(--gutter-fg);
+            text-align: right;
+            user-select: none;
+          }
+
+          .line.is-active .line-number {
+            color: var(--gutter-active-fg);
+          }
+
+          .line-code {
+            white-space: pre;
+          }
+
+          .char {
+            opacity: 0;
+          }
+
+          .tok-comment {
+            color: var(--token-comment);
+          }
+          .tok-keyword {
+            color: var(--token-keyword);
+          }
+          .tok-function {
+            color: var(--token-function);
+          }
+          .tok-string {
+            color: var(--token-string);
+          }
+          .tok-number {
+            color: var(--token-number);
+          }
+          .tok-variable {
+            color: var(--token-variable);
+          }
+          .tok-parameter {
+            color: var(--token-parameter);
+          }
+          .tok-operator {
+            color: var(--token-operator);
+          }
+          .tok-punctuation {
+            color: var(--token-punctuation);
+          }
+          .tok-class-name {
+            color: var(--token-class-name);
+          }
+
+          .caret {
+            position: absolute;
+            left: 0;
+            top: 0;
+            z-index: 3;
+            display: block;
+            width: 2px;
+            height: 22px;
+            background: var(--editor-fg);
+            pointer-events: none;
+            will-change: transform, opacity;
+          }
+
+          .terminal {
+            display: grid;
+            grid-template-rows: 32px 1fr;
+            background: var(--panel-bg);
+            border-top: 1px solid var(--panel-border);
+            color: var(--editor-fg);
+            font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+            font-size: 14px;
+          }
+
+          .panel-tabs {
+            display: flex;
+            align-items: center;
+            gap: 22px;
+            padding: 0 18px;
+            border-bottom: 1px solid var(--panel-border);
+            color: var(--gutter-fg);
+            font-family:
+              Inter,
+              -apple-system,
+              BlinkMacSystemFont,
+              "Segoe UI",
+              sans-serif;
+            font-size: 12px;
+            text-transform: uppercase;
+          }
+
+          .panel-tabs .active {
+            color: var(--editor-fg);
+            border-bottom: 1px solid var(--activity-active);
+            height: 32px;
+            display: flex;
+            align-items: center;
+          }
+
+          .terminal-body {
+            padding: 12px 20px;
+            color: var(--editor-fg);
+            line-height: 1.8;
+          }
+
+          .prompt {
+            color: var(--token-function);
+          }
+
+          .statusbar {
+            grid-column: 1 / -1;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            background: var(--status-bg);
+            color: var(--status-fg);
+            border-top: 1px solid var(--status-border);
+            font-size: 12px;
+          }
+
+          .status-left,
+          .status-right {
+            display: flex;
+            align-items: center;
+            gap: 18px;
+            padding: 0 12px;
+          }
+
+          .remote {
+            align-self: stretch;
+            display: flex;
+            align-items: center;
+            padding: 0 12px;
+            margin-left: -12px;
+            background: var(--status-remote-bg, var(--activity-active));
+            color: var(--status-remote-fg, #ffffff);
+          }
+
+          svg {
+            display: block;
+          }
+        </style>
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (() => {
+            const codeLines = [
+              [{ text: "# A small functional toolkit", token: "comment" }],
+              [
+                { text: "def", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "pluck_deep", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "key", token: "parameter" },
+                { text: "):", token: "punctuation" },
+              ],
+              [
+                { text: "    ", token: "plain" },
+                { text: "return", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "obj", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "reduce", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "acc", token: "parameter" },
+                { text: ", ", token: "punctuation" },
+                { text: "k", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "acc", token: "variable" },
+                { text: "[", token: "punctuation" },
+                { text: "k", token: "variable" },
+                { text: "]", token: "punctuation" },
+                { text: ", ", token: "punctuation" },
+                { text: "key", token: "variable" },
+                { text: ".split", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "'.'", token: "string" },
+                { text: "), ", token: "punctuation" },
+                { text: "obj", token: "variable" },
+                { text: ")", token: "punctuation" },
+              ],
+              [],
+              [
+                { text: "def", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "compose", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "*", token: "operator" },
+                { text: "fns", token: "parameter" },
+                { text: "):", token: "punctuation" },
+              ],
+              [
+                { text: "    ", token: "plain" },
+                { text: "return", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "res", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "reduce", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "acc", token: "parameter" },
+                { text: ", ", token: "punctuation" },
+                { text: "fn", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "fn", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "acc", token: "variable" },
+                { text: "), ", token: "punctuation" },
+                { text: "fns", token: "variable" },
+                { text: ", ", token: "punctuation" },
+                { text: "res", token: "variable" },
+                { text: ")", token: "punctuation" },
+              ],
+              [],
+              [
+                { text: "def", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "unfold", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "f", token: "parameter" },
+                { text: ", ", token: "punctuation" },
+                { text: "seed", token: "parameter" },
+                { text: "):", token: "punctuation" },
+              ],
+              [
+                { text: "    ", token: "plain" },
+                { text: '"""Build a list by repeatedly applying f to a seed."""', token: "string" },
+              ],
+              [
+                { text: "    acc", token: "variable" },
+                { text: " = ", token: "operator" },
+                { text: "[]", token: "punctuation" },
+              ],
+              [
+                { text: "    while", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "True", token: "className" },
+                { text: ":", token: "punctuation" },
+              ],
+              [
+                { text: "        result", token: "variable" },
+                { text: " = ", token: "operator" },
+                { text: "f", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "seed", token: "variable" },
+                { text: ")", token: "punctuation" },
+              ],
+              [
+                { text: "        if", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "result", token: "variable" },
+                { text: " is ", token: "keyword" },
+                { text: "None", token: "className" },
+                { text: ":", token: "punctuation" },
+              ],
+              [
+                { text: "            return", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "acc", token: "variable" },
+              ],
+              [
+                { text: "        acc", token: "variable" },
+                { text: ".append", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "result", token: "variable" },
+                { text: "[", token: "punctuation" },
+                { text: "0", token: "number" },
+                { text: "])", token: "punctuation" },
+              ],
+              [
+                { text: "        seed", token: "variable" },
+                { text: " = ", token: "operator" },
+                { text: "result", token: "variable" },
+                { text: "[", token: "punctuation" },
+                { text: "1", token: "number" },
+                { text: "]", token: "punctuation" },
+              ],
+              [],
+            ];
+
+            const fallback = {
+              "activityBar.background": "#181818",
+              "activityBar.foreground": "#d7d7d7",
+              "activityBar.inactiveForeground": "#868686",
+              "activityBar.activeBorder": "#0078d4",
+              "sideBar.background": "#181818",
+              "sideBar.foreground": "#cccccc",
+              "sideBar.border": "#2b2b2b",
+              "tab.activeBackground": "#1f1f1f",
+              "tab.activeForeground": "#ffffff",
+              "tab.inactiveBackground": "#181818",
+              "tab.inactiveForeground": "#9d9d9d",
+              "tab.border": "#2b2b2b",
+              "editor.background": "#1f1f1f",
+              "editor.foreground": "#cccccc",
+              "editor.lineHighlightBackground": "#ffffff0a",
+              "editorLineNumber.foreground": "#6e7681",
+              "editorLineNumber.activeForeground": "#cccccc",
+              "panel.background": "#181818",
+              "panel.border": "#2b2b2b",
+              "statusBar.background": "#181818",
+              "statusBar.foreground": "#cccccc",
+              "statusBar.border": "#2b2b2b",
+              "titleBar.activeBackground": "#181818",
+              "titleBar.activeForeground": "#cccccc",
+            };
+
+            function color(theme, key) {
+              return theme.colors[key] || fallback[key] || theme.colors.foreground || "#cccccc";
+            }
+
+            function solarizedGrey(theme) {
+              return (
+                theme.colors["tab.inactiveForeground"] ||
+                theme.colors["editor.foreground"] ||
+                "#586E75"
+              );
+            }
+
+            function setVar(root, name, value) {
+              root.style.setProperty(name, value);
+            }
+
+            function applyTheme(root, theme) {
+              const solarizedUiGrey = theme.id === "solarized-light" ? solarizedGrey(theme) : null;
+              setVar(root, "--activity-bg", color(theme, "activityBar.background"));
+              setVar(
+                root,
+                "--activity-fg",
+                solarizedUiGrey || color(theme, "activityBar.foreground"),
+              );
+              setVar(
+                root,
+                "--activity-muted",
+                solarizedUiGrey || color(theme, "activityBar.inactiveForeground"),
+              );
+              setVar(root, "--activity-active", color(theme, "activityBar.activeBorder"));
+              setVar(root, "--sidebar-bg", color(theme, "sideBar.background"));
+              setVar(root, "--sidebar-fg", solarizedUiGrey || color(theme, "sideBar.foreground"));
+              setVar(root, "--sidebar-border", color(theme, "sideBar.border"));
+              setVar(root, "--tab-bg", color(theme, "tab.inactiveBackground"));
+              setVar(root, "--tab-active-bg", color(theme, "tab.activeBackground"));
+              setVar(
+                root,
+                "--tab-active-fg",
+                solarizedUiGrey || color(theme, "tab.activeForeground"),
+              );
+              setVar(
+                root,
+                "--tab-inactive-fg",
+                solarizedUiGrey || color(theme, "tab.inactiveForeground"),
+              );
+              setVar(root, "--tab-border", color(theme, "tab.border"));
+              setVar(root, "--editor-bg", color(theme, "editor.background"));
+              setVar(root, "--editor-fg", color(theme, "editor.foreground"));
+              setVar(root, "--editor-line", color(theme, "editor.lineHighlightBackground"));
+              setVar(root, "--gutter-fg", color(theme, "editorLineNumber.foreground"));
+              setVar(root, "--gutter-active-fg", color(theme, "editorLineNumber.activeForeground"));
+              setVar(root, "--panel-bg", color(theme, "panel.background"));
+              setVar(root, "--panel-border", color(theme, "panel.border"));
+              setVar(root, "--status-bg", color(theme, "statusBar.background"));
+              setVar(root, "--status-fg", color(theme, "statusBar.foreground"));
+              setVar(root, "--status-border", color(theme, "statusBar.border"));
+              setVar(root, "--status-remote-bg", color(theme, "statusBarItem.remoteBackground"));
+              setVar(
+                root,
+                "--status-remote-fg",
+                solarizedUiGrey || color(theme, "statusBarItem.remoteForeground"),
+              );
+              setVar(root, "--title-bg", color(theme, "titleBar.activeBackground"));
+              setVar(
+                root,
+                "--title-fg",
+                solarizedUiGrey || color(theme, "titleBar.activeForeground"),
+              );
+              setVar(root, "--token-comment", theme.tokens.comment);
+              setVar(root, "--token-keyword", theme.tokens.keyword);
+              setVar(root, "--token-function", theme.tokens.function);
+              setVar(root, "--token-string", theme.tokens.string);
+              setVar(root, "--token-number", theme.tokens.number);
+              setVar(root, "--token-variable", theme.tokens.variable);
+              setVar(root, "--token-parameter", theme.tokens.parameter);
+              setVar(root, "--token-operator", theme.tokens.operator);
+              setVar(root, "--token-punctuation", theme.tokens.punctuation);
+              setVar(root, "--token-class-name", theme.tokens.className);
+            }
+
+            function renderCode(root) {
+              const code = root.querySelector(".code");
+              codeLines.forEach((segments, index) => {
+                const line = document.createElement("div");
+                line.className = "line";
+                line.dataset.lineIndex = String(index);
+
+                const lineNumber = document.createElement("span");
+                lineNumber.className = "line-number";
+                lineNumber.textContent = String(index + 1);
+                line.appendChild(lineNumber);
+
+                const lineCode = document.createElement("span");
+                lineCode.className = "line-code";
+                segments.forEach((segment) => {
+                  [...segment.text].forEach((char) => {
+                    const span = document.createElement("span");
+                    span.className =
+                      segment.token === "plain"
+                        ? "char"
+                        : "char tok-" +
+                          segment.token.replace(/[A-Z]/g, (match) => "-" + match.toLowerCase());
+                    span.dataset.lineIndex = String(index);
+                    span.textContent = char;
+                    lineCode.appendChild(span);
+                  });
+                });
+                line.appendChild(lineCode);
+                code.appendChild(line);
+              });
+
+              const caret = document.createElement("span");
+              caret.className = "caret";
+              root.querySelector(".editor").appendChild(caret);
+            }
+
+            function caretPointForElement(editor, el) {
+              const editorBox = editor.getBoundingClientRect();
+              const charBox = el.getBoundingClientRect();
+              return {
+                x: charBox.right - editorBox.left + 2,
+                y: charBox.top - editorBox.top + 3,
+              };
+            }
+
+            function caretPointForLineStart(editor, line) {
+              const editorBox = editor.getBoundingClientRect();
+              const lineBox = line.getBoundingClientRect();
+              const codeBox = line.querySelector(".line-code").getBoundingClientRect();
+              return {
+                x: codeBox.left - editorBox.left,
+                y: lineBox.top - editorBox.top + 3,
+              };
+            }
+
+            function lineHighlightY(editor, line) {
+              const editorBox = editor.getBoundingClientRect();
+              const lineBox = line.getBoundingClientRect();
+              return lineBox.top - editorBox.top;
+            }
+
+            function buildTimeline(root, compositionId) {
+              const tl = gsap.timeline({ paused: true });
+              const editor = root.querySelector(".editor");
+              const caret = root.querySelector(".caret");
+              const activeLine = root.querySelector(".active-line");
+              const lineEls = gsap.utils.toArray(root.querySelectorAll(".line"));
+              const lineStartTimes = [];
+              const charSchedule = [];
+              let cursorTime = 0.95;
+
+              lineEls.forEach((line, lineIndex) => {
+                const lineChars = gsap.utils.toArray(line.querySelectorAll(".char"));
+                lineStartTimes[lineIndex] = cursorTime;
+                lineChars.forEach((char, charIndex) => {
+                  charSchedule.push({ char, time: cursorTime + charIndex * 0.012 });
+                });
+                cursorTime += Math.max(lineChars.length * 0.012, 0.08) + 0.045;
+              });
+
+              gsap.set(activeLine, { y: lineHighlightY(editor, lineEls[0]) });
+              gsap.set(caret, caretPointForLineStart(editor, lineEls[0]));
+
+              tl.from(
+                root.querySelector(".header"),
+                { y: 24, opacity: 0, duration: 0.45, ease: "power3.out" },
+                0,
+              );
+              tl.from(
+                root.querySelector(".workbench"),
+                { y: 42, opacity: 0, scale: 0.986, duration: 0.58, ease: "power3.out" },
+                0.1,
+              );
+              tl.from(activeLine, { opacity: 0, duration: 0.22, ease: "power2.out" }, 0.74);
+              lineStartTimes.forEach((time, lineIndex) => {
+                const line = lineEls[lineIndex];
+                tl.set(activeLine, { y: lineHighlightY(editor, line) }, time);
+                tl.set(caret, caretPointForLineStart(editor, line), time);
+                tl.call(
+                  () => {
+                    lineEls.forEach((item) => item.classList.toggle("is-active", item === line));
+                  },
+                  [],
+                  time,
+                );
+              });
+              charSchedule.forEach(({ char, time }) => {
+                tl.set(char, { opacity: 1 }, time);
+                tl.set(caret, caretPointForElement(editor, char), time + 0.002);
+              });
+              tl.to(
+                root.querySelector(".caret"),
+                { opacity: 0, duration: 0.34, repeat: 25, yoyo: true, ease: "steps(1)" },
+                0.95,
+              );
+              tl.from(
+                root.querySelector(".terminal"),
+                { y: 140, opacity: 0, duration: 0.56, ease: "power3.out" },
+                7.55,
+              );
+              tl.from(
+                root.querySelector(".terminal-body").children,
+                { opacity: 0, y: 8, duration: 0.24, stagger: 0.16, ease: "power2.out" },
+                8.05,
+              );
+              tl.to(
+                root.querySelector(".workbench"),
+                { rotateY: -10.5, z: 74, duration: 0.72, ease: "power2.inOut" },
+                9.35,
+              );
+              tl.to(
+                root.querySelector(".workbench"),
+                { rotateY: 0, z: 0, duration: 0.62, ease: "power2.inOut" },
+                10.08,
+              );
+
+              window.__timelines = window.__timelines || {};
+              window.__timelines[compositionId] = tl;
+
+              const previewTime = new URLSearchParams(window.location.search).get("t");
+              if (previewTime !== null) {
+                tl.time(Number(previewTime));
+              }
+            }
+
+            window.createVSCodeThemeComposition = (compositionId, themeOrId) => {
+              const root =
+                document.querySelector(
+                  '[data-composition-id="' + compositionId + '"] .vscode-theme-scene',
+                ) ||
+                document.querySelector(
+                  '.vscode-theme-scene[data-composition-id="' + compositionId + '"]',
+                ) ||
+                document.querySelector('[data-composition-id="' + compositionId + '"]');
+              const theme =
+                typeof themeOrId === "string"
+                  ? window.VSCODE_THEME_REGISTRY.find((item) => item.id === themeOrId)
+                  : themeOrId;
+              if (!root || !theme) return;
+              root.querySelector(".theme-label").textContent = theme.label;
+              root.querySelector(".theme-source").textContent = theme.sourceFile;
+              applyTheme(root, theme);
+              renderCode(root);
+              buildTimeline(root, compositionId);
+            };
+          })();
+        </script>
+        <script>
+          window.__timelines = window.__timelines || {};
+          window.__timelines["vscode-light-2026"] =
+            window.__timelines["vscode-light-2026"] || gsap.timeline({ paused: true });
+          window.createVSCodeThemeComposition("vscode-light-2026", {
+            id: "light-2026",
+            label: "Light 2026",
+            sourceFile: "2026-light.json",
+            uiTheme: "vs",
+            colors: {
+              "activityBar.activeBorder": "#000000",
+              "activityBar.background": "#FAFAFD",
+              "activityBar.border": "#F0F1F2FF",
+              "activityBar.foreground": "#202020",
+              "activityBar.inactiveForeground": "#606060",
+              "editor.background": "#FFFFFF",
+              "editor.foreground": "#202020",
+              "editor.lineHighlightBackground": "#EAEAEA40",
+              "editor.selectionBackground": "#0069CC40",
+              "editorGroup.border": "#E5E5E5",
+              "editorGroupHeader.tabsBackground": "#FAFAFD",
+              "editorGroupHeader.tabsBorder": "#F0F1F2FF",
+              "editorLineNumber.activeForeground": "#202020",
+              "editorLineNumber.foreground": "#606060",
+              foreground: "#202020",
+              "icon.foreground": "#606060",
+              "panel.background": "#FAFAFD",
+              "panel.border": "#F0F1F2FF",
+              "sideBar.background": "#FAFAFD",
+              "sideBar.border": "#F0F1F2FF",
+              "sideBar.foreground": "#202020",
+              "sideBarSectionHeader.background": "#FAFAFD",
+              "sideBarSectionHeader.border": "#F0F1F2FF",
+              "sideBarSectionHeader.foreground": "#202020",
+              "sideBarTitle.foreground": "#202020",
+              "statusBar.background": "#FAFAFD",
+              "statusBar.border": "#F0F1F2FF",
+              "statusBar.foreground": "#606060",
+              "statusBarItem.remoteBackground": "#005FB8",
+              "statusBarItem.remoteForeground": "#FFFFFF",
+              "tab.activeBackground": "#FFFFFF",
+              "tab.activeBorder": "#FFFFFF",
+              "tab.activeBorderTop": "#000000",
+              "tab.activeForeground": "#202020",
+              "tab.border": "#F0F1F2FF",
+              "tab.inactiveBackground": "#FAFAFD",
+              "tab.inactiveForeground": "#606060",
+              "terminal.foreground": "#3B3B3B",
+              "terminalCursor.foreground": "#202020",
+              "titleBar.activeBackground": "#FAFAFD",
+              "titleBar.activeForeground": "#606060",
+            },
+            tokens: {
+              comment: "#6e7781",
+              keyword: "#1f2328",
+              function: "#0550ae",
+              string: "#0a3069",
+              number: "#0550ae",
+              variable: "#1f2328",
+              parameter: "#953800",
+              operator: "#cf222e",
+              punctuation: "#953800",
+              className: "#116329",
+            },
+          });
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/code-snippet-light-modern/background.jpeg b/docs/public/catalog/blocks/code-snippet-light-modern/background.jpeg
new file mode 100644
index 0000000000..1f3e465cd2
Binary files /dev/null and b/docs/public/catalog/blocks/code-snippet-light-modern/background.jpeg differ
diff --git a/docs/public/catalog/blocks/code-snippet-light-modern/code-snippet-light-modern.html b/docs/public/catalog/blocks/code-snippet-light-modern/code-snippet-light-modern.html
new file mode 100644
index 0000000000..c86428cc19
--- /dev/null
+++ b/docs/public/catalog/blocks/code-snippet-light-modern/code-snippet-light-modern.html
@@ -0,0 +1,1087 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Light Modern VS Code Theme Composition</title>
+  </head>
+  <body>
+    <template id="vscode-light-modern-template">
+      <div
+        class="vscode-theme-scene"
+        data-composition-id="vscode-light-modern"
+        data-width="1920"
+        data-height="1080"
+      >
+        <main class="scene-content">
+          <section class="header">
+            <div>
+              <p class="kicker">Official VS Code built-in theme</p>
+              <h1 class="title"><span class="theme-label">Light Modern</span></h1>
+            </div>
+            <p class="source-note">
+              Typing `functional_toolkit.py` with workbench colors from
+              <span class="theme-source">light_modern.json</span>.
+            </p>
+          </section>
+
+          <section class="workbench">
+            <div class="titlebar">
+              <div class="traffic"><span></span><span></span><span></span></div>
+              <div class="window-title">functional-toolkit - Visual Studio Code</div>
+              <div class="command-center">Search</div>
+            </div>
+
+            <aside class="activity" aria-label="Activity bar">
+              <svg class="activity-icon active" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="currentColor"
+                  d="M4 4h7v7H4V4Zm9 0h7v7h-7V4ZM4 13h7v7H4v-7Zm9 0h7v7h-7v-7Z"
+                />
+              </svg>
+              <svg class="activity-icon" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  d="m21 21-5.2-5.2M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Z"
+                />
+              </svg>
+              <svg class="activity-icon" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  d="M8 18 3 12l5-6m8 12 5-6-5-6"
+                />
+              </svg>
+              <svg class="activity-icon" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  d="M12 3v18m0-18 6 6m-6-6L6 9m6 12 6-6m-6 6-6-6"
+                />
+              </svg>
+            </aside>
+
+            <aside class="sidebar">
+              <div class="sidebar-title">Explorer</div>
+              <div class="section-title">⌄ Functional Toolkit</div>
+              <div class="tree">
+                <div class="tree-row">⌄ src</div>
+                <div class="tree-row child selected">◇ functional_toolkit.py</div>
+                <div class="tree-row child">◇ test_toolkit.py</div>
+                <div class="tree-row">◇ pyproject.toml</div>
+                <div class="tree-row">◇ README.md</div>
+              </div>
+            </aside>
+
+            <section class="editor-area">
+              <div class="tabs">
+                <div class="tab">◇ functional_toolkit.py</div>
+                <div class="tab inactive">README.md</div>
+              </div>
+              <div class="breadcrumbs">functional-toolkit › src › functional_toolkit.py</div>
+              <div class="editor">
+                <div class="active-line"></div>
+                <div class="code"></div>
+              </div>
+              <div class="terminal">
+                <div class="panel-tabs">
+                  <span class="active">Terminal</span><span>Problems</span><span>Output</span>
+                </div>
+                <div class="terminal-body">
+                  <div><span class="prompt">functional-toolkit %</span> python -m pytest</div>
+                  <div>collected 3 items</div>
+                  <div>tests/test_toolkit.py ... <span class="tok-comment">passed</span></div>
+                </div>
+              </div>
+            </section>
+
+            <footer class="statusbar">
+              <div class="status-left">
+                <span class="remote">main</span>
+                <span>0 errors</span>
+                <span>0 warnings</span>
+              </div>
+              <div class="status-right">
+                <span>Ln 17, Col 1</span>
+                <span>Spaces: 4</span>
+                <span>UTF-8</span>
+                <span>Python 3.12</span>
+              </div>
+            </footer>
+          </section>
+        </main>
+        <style>
+          * {
+            box-sizing: border-box;
+            letter-spacing: 0;
+          }
+
+          html,
+          body {
+            margin: 0;
+            width: 1920px;
+            height: 1080px;
+            overflow: hidden;
+            background: #000000;
+            font-family:
+              Inter,
+              -apple-system,
+              BlinkMacSystemFont,
+              "Segoe UI",
+              sans-serif;
+          }
+
+          .vscode-theme-scene {
+            --activity-bg: #181818;
+            --activity-fg: #d7d7d7;
+            --activity-muted: #868686;
+            --activity-active: #0078d4;
+            --sidebar-bg: #181818;
+            --sidebar-fg: #cccccc;
+            --sidebar-border: #2b2b2b;
+            --tab-bg: #181818;
+            --tab-active-bg: #1f1f1f;
+            --tab-active-fg: #ffffff;
+            --tab-inactive-fg: #9d9d9d;
+            --tab-border: #2b2b2b;
+            --editor-bg: #1f1f1f;
+            --editor-fg: #cccccc;
+            --editor-line: rgba(255, 255, 255, 0.04);
+            --gutter-fg: #6e7681;
+            --gutter-active-fg: #cccccc;
+            --panel-bg: #181818;
+            --panel-border: #2b2b2b;
+            --status-bg: #181818;
+            --status-fg: #cccccc;
+            --status-border: #2b2b2b;
+            --title-bg: #181818;
+            --title-fg: #cccccc;
+            --token-comment: #6a9955;
+            --token-keyword: #c586c0;
+            --token-function: #dcdcaa;
+            --token-string: #ce9178;
+            --token-number: #b5cea8;
+            --token-variable: #9cdcfe;
+            --token-parameter: #9cdcfe;
+            --token-operator: #d4d4d4;
+            --token-punctuation: #d4d4d4;
+            --token-class-name: #4ec9b0;
+            position: relative;
+            width: 1920px;
+            height: 1080px;
+            overflow: hidden;
+            background:
+              linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.32)),
+              url("../assets/background.jpeg") center / cover no-repeat;
+            color: var(--editor-fg);
+          }
+
+          .scene-content {
+            position: relative;
+            z-index: 1;
+            width: 100%;
+            height: 100%;
+            padding: 54px 70px 92px;
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+            perspective: 2200px;
+            perspective-origin: 56% 52%;
+          }
+
+          .header {
+            display: flex;
+            align-items: end;
+            justify-content: space-between;
+            min-height: 66px;
+            text-shadow:
+              0 2px 12px rgba(0, 0, 0, 0.42),
+              0 14px 34px rgba(0, 0, 0, 0.32);
+          }
+
+          .kicker {
+            margin: 0 0 7px;
+            color: var(--gutter-fg);
+            font-size: 15px;
+            font-weight: 650;
+            text-transform: uppercase;
+            text-shadow:
+              0 2px 8px rgba(0, 0, 0, 0.48),
+              0 10px 26px rgba(0, 0, 0, 0.36);
+          }
+
+          .title {
+            margin: 0;
+            color: var(--editor-fg);
+            font-size: 44px;
+            line-height: 1;
+            font-weight: 760;
+          }
+
+          .source-note {
+            width: 510px;
+            color: var(--gutter-fg);
+            font-size: 16px;
+            line-height: 1.35;
+            text-align: right;
+            text-shadow:
+              0 2px 10px rgba(0, 0, 0, 0.46),
+              0 12px 30px rgba(0, 0, 0, 0.34);
+          }
+
+          .workbench {
+            height: 824px;
+            display: grid;
+            grid-template-columns: 54px 290px 1fr;
+            grid-template-rows: 36px 1fr 26px;
+            overflow: hidden;
+            border: 1px solid var(--sidebar-border);
+            border-radius: 8px;
+            background: var(--editor-bg);
+            box-shadow: 0 34px 90px rgba(0, 0, 0, 0.42);
+            transform: translateZ(0);
+            transform-origin: 82% 50%;
+            transform-style: preserve-3d;
+            will-change: transform;
+          }
+
+          .titlebar {
+            grid-column: 1 / -1;
+            display: grid;
+            grid-template-columns: 120px 1fr 210px;
+            align-items: center;
+            background: var(--title-bg);
+            color: var(--title-fg);
+            border-bottom: 1px solid var(--tab-border);
+            font-size: 12px;
+          }
+
+          .traffic {
+            display: flex;
+            gap: 8px;
+            padding-left: 18px;
+          }
+
+          .traffic span {
+            width: 12px;
+            height: 12px;
+            border-radius: 999px;
+          }
+
+          .traffic span:nth-child(1) {
+            background: #ff5f57;
+          }
+          .traffic span:nth-child(2) {
+            background: #ffbd2e;
+          }
+          .traffic span:nth-child(3) {
+            background: #28c840;
+          }
+
+          .window-title {
+            justify-self: center;
+            opacity: 0.84;
+          }
+
+          .command-center {
+            justify-self: end;
+            width: 176px;
+            height: 22px;
+            margin-right: 16px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border: 1px solid color-mix(in srgb, var(--title-fg), transparent 78%);
+            border-radius: 5px;
+            color: color-mix(in srgb, var(--title-fg), transparent 18%);
+          }
+
+          .activity {
+            grid-row: 2 / 3;
+            background: var(--activity-bg);
+            border-right: 1px solid var(--sidebar-border);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 10px 0;
+            gap: 18px;
+          }
+
+          .activity-icon {
+            width: 28px;
+            height: 28px;
+            color: var(--activity-muted);
+          }
+
+          .activity-icon.active {
+            color: var(--activity-fg);
+            border-left: 2px solid var(--activity-active);
+            padding-left: 4px;
+          }
+
+          .sidebar {
+            grid-row: 2 / 3;
+            background: var(--sidebar-bg);
+            color: var(--sidebar-fg);
+            border-right: 1px solid var(--sidebar-border);
+            display: flex;
+            flex-direction: column;
+            min-width: 0;
+          }
+
+          .sidebar-title {
+            height: 38px;
+            display: flex;
+            align-items: center;
+            padding: 0 20px;
+            color: var(--sidebar-fg);
+            font-size: 11px;
+            text-transform: uppercase;
+          }
+
+          .section-title {
+            height: 24px;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            padding: 0 14px;
+            background: color-mix(in srgb, var(--sidebar-bg), var(--sidebar-fg) 5%);
+            border-top: 1px solid var(--sidebar-border);
+            border-bottom: 1px solid var(--sidebar-border);
+            color: var(--sidebar-fg);
+            font-size: 11px;
+            font-weight: 700;
+          }
+
+          .tree {
+            padding: 8px 0;
+            font-size: 13px;
+            line-height: 24px;
+          }
+
+          .tree-row {
+            height: 24px;
+            display: flex;
+            align-items: center;
+            gap: 7px;
+            padding: 0 10px 0 18px;
+            color: color-mix(in srgb, var(--sidebar-fg), transparent 8%);
+            white-space: nowrap;
+          }
+
+          .tree-row.child {
+            padding-left: 34px;
+          }
+
+          .tree-row.selected {
+            background: color-mix(in srgb, var(--sidebar-fg), transparent 88%);
+            color: var(--sidebar-fg);
+          }
+
+          .editor-area {
+            grid-row: 2 / 3;
+            display: grid;
+            grid-template-rows: 36px 30px 1fr 138px;
+            min-width: 0;
+            background: var(--editor-bg);
+          }
+
+          .tabs {
+            display: flex;
+            background: var(--tab-bg);
+            border-bottom: 1px solid var(--tab-border);
+          }
+
+          .tab {
+            width: 205px;
+            height: 36px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 0 13px;
+            border-right: 1px solid var(--tab-border);
+            background: var(--tab-active-bg);
+            color: var(--tab-active-fg);
+            border-top: 2px solid var(--activity-active);
+            font-size: 13px;
+          }
+
+          .tab.inactive {
+            background: var(--tab-bg);
+            color: var(--tab-inactive-fg);
+            border-top-color: transparent;
+          }
+
+          .breadcrumbs {
+            display: flex;
+            align-items: center;
+            gap: 7px;
+            padding: 0 18px;
+            color: var(--gutter-fg);
+            border-bottom: 1px solid color-mix(in srgb, var(--tab-border), transparent 20%);
+            font-size: 12px;
+          }
+
+          .editor {
+            position: relative;
+            overflow: hidden;
+            background: var(--editor-bg);
+            color: var(--editor-fg);
+            font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+            font-size: 18px;
+            line-height: 1.52;
+          }
+
+          .active-line {
+            position: absolute;
+            left: 0;
+            right: 0;
+            top: 0;
+            height: 28px;
+            background: var(--editor-line);
+            will-change: transform;
+          }
+
+          .code {
+            position: relative;
+            padding: 20px 36px 18px 0;
+          }
+
+          .line {
+            height: 28px;
+            display: grid;
+            grid-template-columns: 72px 1fr;
+            align-items: center;
+          }
+
+          .line-number {
+            padding-right: 18px;
+            color: var(--gutter-fg);
+            text-align: right;
+            user-select: none;
+          }
+
+          .line.is-active .line-number {
+            color: var(--gutter-active-fg);
+          }
+
+          .line-code {
+            white-space: pre;
+          }
+
+          .char {
+            opacity: 0;
+          }
+
+          .tok-comment {
+            color: var(--token-comment);
+          }
+          .tok-keyword {
+            color: var(--token-keyword);
+          }
+          .tok-function {
+            color: var(--token-function);
+          }
+          .tok-string {
+            color: var(--token-string);
+          }
+          .tok-number {
+            color: var(--token-number);
+          }
+          .tok-variable {
+            color: var(--token-variable);
+          }
+          .tok-parameter {
+            color: var(--token-parameter);
+          }
+          .tok-operator {
+            color: var(--token-operator);
+          }
+          .tok-punctuation {
+            color: var(--token-punctuation);
+          }
+          .tok-class-name {
+            color: var(--token-class-name);
+          }
+
+          .caret {
+            position: absolute;
+            left: 0;
+            top: 0;
+            z-index: 3;
+            display: block;
+            width: 2px;
+            height: 22px;
+            background: var(--editor-fg);
+            pointer-events: none;
+            will-change: transform, opacity;
+          }
+
+          .terminal {
+            display: grid;
+            grid-template-rows: 32px 1fr;
+            background: var(--panel-bg);
+            border-top: 1px solid var(--panel-border);
+            color: var(--editor-fg);
+            font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+            font-size: 14px;
+          }
+
+          .panel-tabs {
+            display: flex;
+            align-items: center;
+            gap: 22px;
+            padding: 0 18px;
+            border-bottom: 1px solid var(--panel-border);
+            color: var(--gutter-fg);
+            font-family:
+              Inter,
+              -apple-system,
+              BlinkMacSystemFont,
+              "Segoe UI",
+              sans-serif;
+            font-size: 12px;
+            text-transform: uppercase;
+          }
+
+          .panel-tabs .active {
+            color: var(--editor-fg);
+            border-bottom: 1px solid var(--activity-active);
+            height: 32px;
+            display: flex;
+            align-items: center;
+          }
+
+          .terminal-body {
+            padding: 12px 20px;
+            color: var(--editor-fg);
+            line-height: 1.8;
+          }
+
+          .prompt {
+            color: var(--token-function);
+          }
+
+          .statusbar {
+            grid-column: 1 / -1;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            background: var(--status-bg);
+            color: var(--status-fg);
+            border-top: 1px solid var(--status-border);
+            font-size: 12px;
+          }
+
+          .status-left,
+          .status-right {
+            display: flex;
+            align-items: center;
+            gap: 18px;
+            padding: 0 12px;
+          }
+
+          .remote {
+            align-self: stretch;
+            display: flex;
+            align-items: center;
+            padding: 0 12px;
+            margin-left: -12px;
+            background: var(--status-remote-bg, var(--activity-active));
+            color: var(--status-remote-fg, #ffffff);
+          }
+
+          svg {
+            display: block;
+          }
+        </style>
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (() => {
+            const codeLines = [
+              [{ text: "# A small functional toolkit", token: "comment" }],
+              [
+                { text: "def", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "pluck_deep", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "key", token: "parameter" },
+                { text: "):", token: "punctuation" },
+              ],
+              [
+                { text: "    ", token: "plain" },
+                { text: "return", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "obj", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "reduce", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "acc", token: "parameter" },
+                { text: ", ", token: "punctuation" },
+                { text: "k", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "acc", token: "variable" },
+                { text: "[", token: "punctuation" },
+                { text: "k", token: "variable" },
+                { text: "]", token: "punctuation" },
+                { text: ", ", token: "punctuation" },
+                { text: "key", token: "variable" },
+                { text: ".split", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "'.'", token: "string" },
+                { text: "), ", token: "punctuation" },
+                { text: "obj", token: "variable" },
+                { text: ")", token: "punctuation" },
+              ],
+              [],
+              [
+                { text: "def", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "compose", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "*", token: "operator" },
+                { text: "fns", token: "parameter" },
+                { text: "):", token: "punctuation" },
+              ],
+              [
+                { text: "    ", token: "plain" },
+                { text: "return", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "res", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "reduce", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "acc", token: "parameter" },
+                { text: ", ", token: "punctuation" },
+                { text: "fn", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "fn", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "acc", token: "variable" },
+                { text: "), ", token: "punctuation" },
+                { text: "fns", token: "variable" },
+                { text: ", ", token: "punctuation" },
+                { text: "res", token: "variable" },
+                { text: ")", token: "punctuation" },
+              ],
+              [],
+              [
+                { text: "def", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "unfold", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "f", token: "parameter" },
+                { text: ", ", token: "punctuation" },
+                { text: "seed", token: "parameter" },
+                { text: "):", token: "punctuation" },
+              ],
+              [
+                { text: "    ", token: "plain" },
+                { text: '"""Build a list by repeatedly applying f to a seed."""', token: "string" },
+              ],
+              [
+                { text: "    acc", token: "variable" },
+                { text: " = ", token: "operator" },
+                { text: "[]", token: "punctuation" },
+              ],
+              [
+                { text: "    while", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "True", token: "className" },
+                { text: ":", token: "punctuation" },
+              ],
+              [
+                { text: "        result", token: "variable" },
+                { text: " = ", token: "operator" },
+                { text: "f", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "seed", token: "variable" },
+                { text: ")", token: "punctuation" },
+              ],
+              [
+                { text: "        if", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "result", token: "variable" },
+                { text: " is ", token: "keyword" },
+                { text: "None", token: "className" },
+                { text: ":", token: "punctuation" },
+              ],
+              [
+                { text: "            return", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "acc", token: "variable" },
+              ],
+              [
+                { text: "        acc", token: "variable" },
+                { text: ".append", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "result", token: "variable" },
+                { text: "[", token: "punctuation" },
+                { text: "0", token: "number" },
+                { text: "])", token: "punctuation" },
+              ],
+              [
+                { text: "        seed", token: "variable" },
+                { text: " = ", token: "operator" },
+                { text: "result", token: "variable" },
+                { text: "[", token: "punctuation" },
+                { text: "1", token: "number" },
+                { text: "]", token: "punctuation" },
+              ],
+              [],
+            ];
+
+            const fallback = {
+              "activityBar.background": "#181818",
+              "activityBar.foreground": "#d7d7d7",
+              "activityBar.inactiveForeground": "#868686",
+              "activityBar.activeBorder": "#0078d4",
+              "sideBar.background": "#181818",
+              "sideBar.foreground": "#cccccc",
+              "sideBar.border": "#2b2b2b",
+              "tab.activeBackground": "#1f1f1f",
+              "tab.activeForeground": "#ffffff",
+              "tab.inactiveBackground": "#181818",
+              "tab.inactiveForeground": "#9d9d9d",
+              "tab.border": "#2b2b2b",
+              "editor.background": "#1f1f1f",
+              "editor.foreground": "#cccccc",
+              "editor.lineHighlightBackground": "#ffffff0a",
+              "editorLineNumber.foreground": "#6e7681",
+              "editorLineNumber.activeForeground": "#cccccc",
+              "panel.background": "#181818",
+              "panel.border": "#2b2b2b",
+              "statusBar.background": "#181818",
+              "statusBar.foreground": "#cccccc",
+              "statusBar.border": "#2b2b2b",
+              "titleBar.activeBackground": "#181818",
+              "titleBar.activeForeground": "#cccccc",
+            };
+
+            function color(theme, key) {
+              return theme.colors[key] || fallback[key] || theme.colors.foreground || "#cccccc";
+            }
+
+            function solarizedGrey(theme) {
+              return (
+                theme.colors["tab.inactiveForeground"] ||
+                theme.colors["editor.foreground"] ||
+                "#586E75"
+              );
+            }
+
+            function setVar(root, name, value) {
+              root.style.setProperty(name, value);
+            }
+
+            function applyTheme(root, theme) {
+              const solarizedUiGrey = theme.id === "solarized-light" ? solarizedGrey(theme) : null;
+              setVar(root, "--activity-bg", color(theme, "activityBar.background"));
+              setVar(
+                root,
+                "--activity-fg",
+                solarizedUiGrey || color(theme, "activityBar.foreground"),
+              );
+              setVar(
+                root,
+                "--activity-muted",
+                solarizedUiGrey || color(theme, "activityBar.inactiveForeground"),
+              );
+              setVar(root, "--activity-active", color(theme, "activityBar.activeBorder"));
+              setVar(root, "--sidebar-bg", color(theme, "sideBar.background"));
+              setVar(root, "--sidebar-fg", solarizedUiGrey || color(theme, "sideBar.foreground"));
+              setVar(root, "--sidebar-border", color(theme, "sideBar.border"));
+              setVar(root, "--tab-bg", color(theme, "tab.inactiveBackground"));
+              setVar(root, "--tab-active-bg", color(theme, "tab.activeBackground"));
+              setVar(
+                root,
+                "--tab-active-fg",
+                solarizedUiGrey || color(theme, "tab.activeForeground"),
+              );
+              setVar(
+                root,
+                "--tab-inactive-fg",
+                solarizedUiGrey || color(theme, "tab.inactiveForeground"),
+              );
+              setVar(root, "--tab-border", color(theme, "tab.border"));
+              setVar(root, "--editor-bg", color(theme, "editor.background"));
+              setVar(root, "--editor-fg", color(theme, "editor.foreground"));
+              setVar(root, "--editor-line", color(theme, "editor.lineHighlightBackground"));
+              setVar(root, "--gutter-fg", color(theme, "editorLineNumber.foreground"));
+              setVar(root, "--gutter-active-fg", color(theme, "editorLineNumber.activeForeground"));
+              setVar(root, "--panel-bg", color(theme, "panel.background"));
+              setVar(root, "--panel-border", color(theme, "panel.border"));
+              setVar(root, "--status-bg", color(theme, "statusBar.background"));
+              setVar(root, "--status-fg", color(theme, "statusBar.foreground"));
+              setVar(root, "--status-border", color(theme, "statusBar.border"));
+              setVar(root, "--status-remote-bg", color(theme, "statusBarItem.remoteBackground"));
+              setVar(
+                root,
+                "--status-remote-fg",
+                solarizedUiGrey || color(theme, "statusBarItem.remoteForeground"),
+              );
+              setVar(root, "--title-bg", color(theme, "titleBar.activeBackground"));
+              setVar(
+                root,
+                "--title-fg",
+                solarizedUiGrey || color(theme, "titleBar.activeForeground"),
+              );
+              setVar(root, "--token-comment", theme.tokens.comment);
+              setVar(root, "--token-keyword", theme.tokens.keyword);
+              setVar(root, "--token-function", theme.tokens.function);
+              setVar(root, "--token-string", theme.tokens.string);
+              setVar(root, "--token-number", theme.tokens.number);
+              setVar(root, "--token-variable", theme.tokens.variable);
+              setVar(root, "--token-parameter", theme.tokens.parameter);
+              setVar(root, "--token-operator", theme.tokens.operator);
+              setVar(root, "--token-punctuation", theme.tokens.punctuation);
+              setVar(root, "--token-class-name", theme.tokens.className);
+            }
+
+            function renderCode(root) {
+              const code = root.querySelector(".code");
+              codeLines.forEach((segments, index) => {
+                const line = document.createElement("div");
+                line.className = "line";
+                line.dataset.lineIndex = String(index);
+
+                const lineNumber = document.createElement("span");
+                lineNumber.className = "line-number";
+                lineNumber.textContent = String(index + 1);
+                line.appendChild(lineNumber);
+
+                const lineCode = document.createElement("span");
+                lineCode.className = "line-code";
+                segments.forEach((segment) => {
+                  [...segment.text].forEach((char) => {
+                    const span = document.createElement("span");
+                    span.className =
+                      segment.token === "plain"
+                        ? "char"
+                        : "char tok-" +
+                          segment.token.replace(/[A-Z]/g, (match) => "-" + match.toLowerCase());
+                    span.dataset.lineIndex = String(index);
+                    span.textContent = char;
+                    lineCode.appendChild(span);
+                  });
+                });
+                line.appendChild(lineCode);
+                code.appendChild(line);
+              });
+
+              const caret = document.createElement("span");
+              caret.className = "caret";
+              root.querySelector(".editor").appendChild(caret);
+            }
+
+            function caretPointForElement(editor, el) {
+              const editorBox = editor.getBoundingClientRect();
+              const charBox = el.getBoundingClientRect();
+              return {
+                x: charBox.right - editorBox.left + 2,
+                y: charBox.top - editorBox.top + 3,
+              };
+            }
+
+            function caretPointForLineStart(editor, line) {
+              const editorBox = editor.getBoundingClientRect();
+              const lineBox = line.getBoundingClientRect();
+              const codeBox = line.querySelector(".line-code").getBoundingClientRect();
+              return {
+                x: codeBox.left - editorBox.left,
+                y: lineBox.top - editorBox.top + 3,
+              };
+            }
+
+            function lineHighlightY(editor, line) {
+              const editorBox = editor.getBoundingClientRect();
+              const lineBox = line.getBoundingClientRect();
+              return lineBox.top - editorBox.top;
+            }
+
+            function buildTimeline(root, compositionId) {
+              const tl = gsap.timeline({ paused: true });
+              const editor = root.querySelector(".editor");
+              const caret = root.querySelector(".caret");
+              const activeLine = root.querySelector(".active-line");
+              const lineEls = gsap.utils.toArray(root.querySelectorAll(".line"));
+              const lineStartTimes = [];
+              const charSchedule = [];
+              let cursorTime = 0.95;
+
+              lineEls.forEach((line, lineIndex) => {
+                const lineChars = gsap.utils.toArray(line.querySelectorAll(".char"));
+                lineStartTimes[lineIndex] = cursorTime;
+                lineChars.forEach((char, charIndex) => {
+                  charSchedule.push({ char, time: cursorTime + charIndex * 0.012 });
+                });
+                cursorTime += Math.max(lineChars.length * 0.012, 0.08) + 0.045;
+              });
+
+              gsap.set(activeLine, { y: lineHighlightY(editor, lineEls[0]) });
+              gsap.set(caret, caretPointForLineStart(editor, lineEls[0]));
+
+              tl.from(
+                root.querySelector(".header"),
+                { y: 24, opacity: 0, duration: 0.45, ease: "power3.out" },
+                0,
+              );
+              tl.from(
+                root.querySelector(".workbench"),
+                { y: 42, opacity: 0, scale: 0.986, duration: 0.58, ease: "power3.out" },
+                0.1,
+              );
+              tl.from(activeLine, { opacity: 0, duration: 0.22, ease: "power2.out" }, 0.74);
+              lineStartTimes.forEach((time, lineIndex) => {
+                const line = lineEls[lineIndex];
+                tl.set(activeLine, { y: lineHighlightY(editor, line) }, time);
+                tl.set(caret, caretPointForLineStart(editor, line), time);
+                tl.call(
+                  () => {
+                    lineEls.forEach((item) => item.classList.toggle("is-active", item === line));
+                  },
+                  [],
+                  time,
+                );
+              });
+              charSchedule.forEach(({ char, time }) => {
+                tl.set(char, { opacity: 1 }, time);
+                tl.set(caret, caretPointForElement(editor, char), time + 0.002);
+              });
+              tl.to(
+                root.querySelector(".caret"),
+                { opacity: 0, duration: 0.34, repeat: 25, yoyo: true, ease: "steps(1)" },
+                0.95,
+              );
+              tl.from(
+                root.querySelector(".terminal"),
+                { y: 140, opacity: 0, duration: 0.56, ease: "power3.out" },
+                7.55,
+              );
+              tl.from(
+                root.querySelector(".terminal-body").children,
+                { opacity: 0, y: 8, duration: 0.24, stagger: 0.16, ease: "power2.out" },
+                8.05,
+              );
+              tl.to(
+                root.querySelector(".workbench"),
+                { rotateY: -10.5, z: 74, duration: 0.72, ease: "power2.inOut" },
+                9.35,
+              );
+              tl.to(
+                root.querySelector(".workbench"),
+                { rotateY: 0, z: 0, duration: 0.62, ease: "power2.inOut" },
+                10.08,
+              );
+
+              window.__timelines = window.__timelines || {};
+              window.__timelines[compositionId] = tl;
+
+              const previewTime = new URLSearchParams(window.location.search).get("t");
+              if (previewTime !== null) {
+                tl.time(Number(previewTime));
+              }
+            }
+
+            window.createVSCodeThemeComposition = (compositionId, themeOrId) => {
+              const root =
+                document.querySelector(
+                  '[data-composition-id="' + compositionId + '"] .vscode-theme-scene',
+                ) ||
+                document.querySelector(
+                  '.vscode-theme-scene[data-composition-id="' + compositionId + '"]',
+                ) ||
+                document.querySelector('[data-composition-id="' + compositionId + '"]');
+              const theme =
+                typeof themeOrId === "string"
+                  ? window.VSCODE_THEME_REGISTRY.find((item) => item.id === themeOrId)
+                  : themeOrId;
+              if (!root || !theme) return;
+              root.querySelector(".theme-label").textContent = theme.label;
+              root.querySelector(".theme-source").textContent = theme.sourceFile;
+              applyTheme(root, theme);
+              renderCode(root);
+              buildTimeline(root, compositionId);
+            };
+          })();
+        </script>
+        <script>
+          window.__timelines = window.__timelines || {};
+          window.__timelines["vscode-light-modern"] =
+            window.__timelines["vscode-light-modern"] || gsap.timeline({ paused: true });
+          window.createVSCodeThemeComposition("vscode-light-modern", {
+            id: "light-modern",
+            label: "Light Modern",
+            sourceFile: "light_modern.json",
+            uiTheme: "vs",
+            colors: {
+              "activityBar.activeBorder": "#005FB8",
+              "activityBar.background": "#F8F8F8",
+              "activityBar.border": "#E5E5E5",
+              "activityBar.foreground": "#1F1F1F",
+              "activityBar.inactiveForeground": "#616161",
+              "editor.background": "#FFFFFF",
+              "editor.foreground": "#3B3B3B",
+              "editorGroup.border": "#E5E5E5",
+              "editorGroupHeader.tabsBackground": "#F8F8F8",
+              "editorGroupHeader.tabsBorder": "#E5E5E5",
+              "editorLineNumber.activeForeground": "#171184",
+              "editorLineNumber.foreground": "#6E7681",
+              foreground: "#3B3B3B",
+              "icon.foreground": "#3B3B3B",
+              "panel.background": "#F8F8F8",
+              "panel.border": "#E5E5E5",
+              "sideBar.background": "#F8F8F8",
+              "sideBar.border": "#E5E5E5",
+              "sideBar.foreground": "#3B3B3B",
+              "sideBarSectionHeader.background": "#F8F8F8",
+              "sideBarSectionHeader.border": "#E5E5E5",
+              "sideBarSectionHeader.foreground": "#3B3B3B",
+              "sideBarTitle.foreground": "#3B3B3B",
+              "statusBar.background": "#F8F8F8",
+              "statusBar.border": "#E5E5E5",
+              "statusBar.foreground": "#3B3B3B",
+              "statusBarItem.remoteBackground": "#005FB8",
+              "statusBarItem.remoteForeground": "#FFFFFF",
+              "tab.activeBackground": "#FFFFFF",
+              "tab.activeBorder": "#F8F8F8",
+              "tab.activeBorderTop": "#005FB8",
+              "tab.activeForeground": "#3B3B3B",
+              "tab.border": "#E5E5E5",
+              "tab.inactiveBackground": "#F8F8F8",
+              "tab.inactiveForeground": "#868686",
+              "terminal.foreground": "#3B3B3B",
+              "terminalCursor.foreground": "#005FB8",
+              "titleBar.activeBackground": "#F8F8F8",
+              "titleBar.activeForeground": "#1E1E1E",
+            },
+            tokens: {
+              comment: "#008000",
+              keyword: "#EE0000",
+              function: "#795E26",
+              string: "#811f3f",
+              number: "#098658",
+              variable: "#0070C1",
+              parameter: "#001080",
+              operator: "#EE0000",
+              punctuation: "#d16969",
+              className: "#267f99",
+            },
+          });
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/code-snippet-light-plus/background.jpeg b/docs/public/catalog/blocks/code-snippet-light-plus/background.jpeg
new file mode 100644
index 0000000000..1f3e465cd2
Binary files /dev/null and b/docs/public/catalog/blocks/code-snippet-light-plus/background.jpeg differ
diff --git a/docs/public/catalog/blocks/code-snippet-light-plus/code-snippet-light-plus.html b/docs/public/catalog/blocks/code-snippet-light-plus/code-snippet-light-plus.html
new file mode 100644
index 0000000000..49d4e44ee0
--- /dev/null
+++ b/docs/public/catalog/blocks/code-snippet-light-plus/code-snippet-light-plus.html
@@ -0,0 +1,1055 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Light+ VS Code Theme Composition</title>
+  </head>
+  <body>
+    <template id="vscode-light-plus-template">
+      <div
+        class="vscode-theme-scene"
+        data-composition-id="vscode-light-plus"
+        data-width="1920"
+        data-height="1080"
+      >
+        <main class="scene-content">
+          <section class="header">
+            <div>
+              <p class="kicker">Official VS Code built-in theme</p>
+              <h1 class="title"><span class="theme-label">Light+</span></h1>
+            </div>
+            <p class="source-note">
+              Typing `functional_toolkit.py` with workbench colors from
+              <span class="theme-source">light_plus.json</span>.
+            </p>
+          </section>
+
+          <section class="workbench">
+            <div class="titlebar">
+              <div class="traffic"><span></span><span></span><span></span></div>
+              <div class="window-title">functional-toolkit - Visual Studio Code</div>
+              <div class="command-center">Search</div>
+            </div>
+
+            <aside class="activity" aria-label="Activity bar">
+              <svg class="activity-icon active" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="currentColor"
+                  d="M4 4h7v7H4V4Zm9 0h7v7h-7V4ZM4 13h7v7H4v-7Zm9 0h7v7h-7v-7Z"
+                />
+              </svg>
+              <svg class="activity-icon" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  d="m21 21-5.2-5.2M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Z"
+                />
+              </svg>
+              <svg class="activity-icon" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  d="M8 18 3 12l5-6m8 12 5-6-5-6"
+                />
+              </svg>
+              <svg class="activity-icon" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  d="M12 3v18m0-18 6 6m-6-6L6 9m6 12 6-6m-6 6-6-6"
+                />
+              </svg>
+            </aside>
+
+            <aside class="sidebar">
+              <div class="sidebar-title">Explorer</div>
+              <div class="section-title">⌄ Functional Toolkit</div>
+              <div class="tree">
+                <div class="tree-row">⌄ src</div>
+                <div class="tree-row child selected">◇ functional_toolkit.py</div>
+                <div class="tree-row child">◇ test_toolkit.py</div>
+                <div class="tree-row">◇ pyproject.toml</div>
+                <div class="tree-row">◇ README.md</div>
+              </div>
+            </aside>
+
+            <section class="editor-area">
+              <div class="tabs">
+                <div class="tab">◇ functional_toolkit.py</div>
+                <div class="tab inactive">README.md</div>
+              </div>
+              <div class="breadcrumbs">functional-toolkit › src › functional_toolkit.py</div>
+              <div class="editor">
+                <div class="active-line"></div>
+                <div class="code"></div>
+              </div>
+              <div class="terminal">
+                <div class="panel-tabs">
+                  <span class="active">Terminal</span><span>Problems</span><span>Output</span>
+                </div>
+                <div class="terminal-body">
+                  <div><span class="prompt">functional-toolkit %</span> python -m pytest</div>
+                  <div>collected 3 items</div>
+                  <div>tests/test_toolkit.py ... <span class="tok-comment">passed</span></div>
+                </div>
+              </div>
+            </section>
+
+            <footer class="statusbar">
+              <div class="status-left">
+                <span class="remote">main</span>
+                <span>0 errors</span>
+                <span>0 warnings</span>
+              </div>
+              <div class="status-right">
+                <span>Ln 17, Col 1</span>
+                <span>Spaces: 4</span>
+                <span>UTF-8</span>
+                <span>Python 3.12</span>
+              </div>
+            </footer>
+          </section>
+        </main>
+        <style>
+          * {
+            box-sizing: border-box;
+            letter-spacing: 0;
+          }
+
+          html,
+          body {
+            margin: 0;
+            width: 1920px;
+            height: 1080px;
+            overflow: hidden;
+            background: #000000;
+            font-family:
+              Inter,
+              -apple-system,
+              BlinkMacSystemFont,
+              "Segoe UI",
+              sans-serif;
+          }
+
+          .vscode-theme-scene {
+            --activity-bg: #181818;
+            --activity-fg: #d7d7d7;
+            --activity-muted: #868686;
+            --activity-active: #0078d4;
+            --sidebar-bg: #181818;
+            --sidebar-fg: #cccccc;
+            --sidebar-border: #2b2b2b;
+            --tab-bg: #181818;
+            --tab-active-bg: #1f1f1f;
+            --tab-active-fg: #ffffff;
+            --tab-inactive-fg: #9d9d9d;
+            --tab-border: #2b2b2b;
+            --editor-bg: #1f1f1f;
+            --editor-fg: #cccccc;
+            --editor-line: rgba(255, 255, 255, 0.04);
+            --gutter-fg: #6e7681;
+            --gutter-active-fg: #cccccc;
+            --panel-bg: #181818;
+            --panel-border: #2b2b2b;
+            --status-bg: #181818;
+            --status-fg: #cccccc;
+            --status-border: #2b2b2b;
+            --title-bg: #181818;
+            --title-fg: #cccccc;
+            --token-comment: #6a9955;
+            --token-keyword: #c586c0;
+            --token-function: #dcdcaa;
+            --token-string: #ce9178;
+            --token-number: #b5cea8;
+            --token-variable: #9cdcfe;
+            --token-parameter: #9cdcfe;
+            --token-operator: #d4d4d4;
+            --token-punctuation: #d4d4d4;
+            --token-class-name: #4ec9b0;
+            position: relative;
+            width: 1920px;
+            height: 1080px;
+            overflow: hidden;
+            background:
+              linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.32)),
+              url("../assets/background.jpeg") center / cover no-repeat;
+            color: var(--editor-fg);
+          }
+
+          .scene-content {
+            position: relative;
+            z-index: 1;
+            width: 100%;
+            height: 100%;
+            padding: 54px 70px 92px;
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+            perspective: 2200px;
+            perspective-origin: 56% 52%;
+          }
+
+          .header {
+            display: flex;
+            align-items: end;
+            justify-content: space-between;
+            min-height: 66px;
+            text-shadow:
+              0 2px 12px rgba(0, 0, 0, 0.42),
+              0 14px 34px rgba(0, 0, 0, 0.32);
+          }
+
+          .kicker {
+            margin: 0 0 7px;
+            color: var(--gutter-fg);
+            font-size: 15px;
+            font-weight: 650;
+            text-transform: uppercase;
+            text-shadow:
+              0 2px 8px rgba(0, 0, 0, 0.48),
+              0 10px 26px rgba(0, 0, 0, 0.36);
+          }
+
+          .title {
+            margin: 0;
+            color: var(--editor-fg);
+            font-size: 44px;
+            line-height: 1;
+            font-weight: 760;
+          }
+
+          .source-note {
+            width: 510px;
+            color: var(--gutter-fg);
+            font-size: 16px;
+            line-height: 1.35;
+            text-align: right;
+            text-shadow:
+              0 2px 10px rgba(0, 0, 0, 0.46),
+              0 12px 30px rgba(0, 0, 0, 0.34);
+          }
+
+          .workbench {
+            height: 824px;
+            display: grid;
+            grid-template-columns: 54px 290px 1fr;
+            grid-template-rows: 36px 1fr 26px;
+            overflow: hidden;
+            border: 1px solid var(--sidebar-border);
+            border-radius: 8px;
+            background: var(--editor-bg);
+            box-shadow: 0 34px 90px rgba(0, 0, 0, 0.42);
+            transform: translateZ(0);
+            transform-origin: 82% 50%;
+            transform-style: preserve-3d;
+            will-change: transform;
+          }
+
+          .titlebar {
+            grid-column: 1 / -1;
+            display: grid;
+            grid-template-columns: 120px 1fr 210px;
+            align-items: center;
+            background: var(--title-bg);
+            color: var(--title-fg);
+            border-bottom: 1px solid var(--tab-border);
+            font-size: 12px;
+          }
+
+          .traffic {
+            display: flex;
+            gap: 8px;
+            padding-left: 18px;
+          }
+
+          .traffic span {
+            width: 12px;
+            height: 12px;
+            border-radius: 999px;
+          }
+
+          .traffic span:nth-child(1) {
+            background: #ff5f57;
+          }
+          .traffic span:nth-child(2) {
+            background: #ffbd2e;
+          }
+          .traffic span:nth-child(3) {
+            background: #28c840;
+          }
+
+          .window-title {
+            justify-self: center;
+            opacity: 0.84;
+          }
+
+          .command-center {
+            justify-self: end;
+            width: 176px;
+            height: 22px;
+            margin-right: 16px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border: 1px solid color-mix(in srgb, var(--title-fg), transparent 78%);
+            border-radius: 5px;
+            color: color-mix(in srgb, var(--title-fg), transparent 18%);
+          }
+
+          .activity {
+            grid-row: 2 / 3;
+            background: var(--activity-bg);
+            border-right: 1px solid var(--sidebar-border);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 10px 0;
+            gap: 18px;
+          }
+
+          .activity-icon {
+            width: 28px;
+            height: 28px;
+            color: var(--activity-muted);
+          }
+
+          .activity-icon.active {
+            color: var(--activity-fg);
+            border-left: 2px solid var(--activity-active);
+            padding-left: 4px;
+          }
+
+          .sidebar {
+            grid-row: 2 / 3;
+            background: var(--sidebar-bg);
+            color: var(--sidebar-fg);
+            border-right: 1px solid var(--sidebar-border);
+            display: flex;
+            flex-direction: column;
+            min-width: 0;
+          }
+
+          .sidebar-title {
+            height: 38px;
+            display: flex;
+            align-items: center;
+            padding: 0 20px;
+            color: var(--sidebar-fg);
+            font-size: 11px;
+            text-transform: uppercase;
+          }
+
+          .section-title {
+            height: 24px;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            padding: 0 14px;
+            background: color-mix(in srgb, var(--sidebar-bg), var(--sidebar-fg) 5%);
+            border-top: 1px solid var(--sidebar-border);
+            border-bottom: 1px solid var(--sidebar-border);
+            color: var(--sidebar-fg);
+            font-size: 11px;
+            font-weight: 700;
+          }
+
+          .tree {
+            padding: 8px 0;
+            font-size: 13px;
+            line-height: 24px;
+          }
+
+          .tree-row {
+            height: 24px;
+            display: flex;
+            align-items: center;
+            gap: 7px;
+            padding: 0 10px 0 18px;
+            color: color-mix(in srgb, var(--sidebar-fg), transparent 8%);
+            white-space: nowrap;
+          }
+
+          .tree-row.child {
+            padding-left: 34px;
+          }
+
+          .tree-row.selected {
+            background: color-mix(in srgb, var(--sidebar-fg), transparent 88%);
+            color: var(--sidebar-fg);
+          }
+
+          .editor-area {
+            grid-row: 2 / 3;
+            display: grid;
+            grid-template-rows: 36px 30px 1fr 138px;
+            min-width: 0;
+            background: var(--editor-bg);
+          }
+
+          .tabs {
+            display: flex;
+            background: var(--tab-bg);
+            border-bottom: 1px solid var(--tab-border);
+          }
+
+          .tab {
+            width: 205px;
+            height: 36px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 0 13px;
+            border-right: 1px solid var(--tab-border);
+            background: var(--tab-active-bg);
+            color: var(--tab-active-fg);
+            border-top: 2px solid var(--activity-active);
+            font-size: 13px;
+          }
+
+          .tab.inactive {
+            background: var(--tab-bg);
+            color: var(--tab-inactive-fg);
+            border-top-color: transparent;
+          }
+
+          .breadcrumbs {
+            display: flex;
+            align-items: center;
+            gap: 7px;
+            padding: 0 18px;
+            color: var(--gutter-fg);
+            border-bottom: 1px solid color-mix(in srgb, var(--tab-border), transparent 20%);
+            font-size: 12px;
+          }
+
+          .editor {
+            position: relative;
+            overflow: hidden;
+            background: var(--editor-bg);
+            color: var(--editor-fg);
+            font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+            font-size: 18px;
+            line-height: 1.52;
+          }
+
+          .active-line {
+            position: absolute;
+            left: 0;
+            right: 0;
+            top: 0;
+            height: 28px;
+            background: var(--editor-line);
+            will-change: transform;
+          }
+
+          .code {
+            position: relative;
+            padding: 20px 36px 18px 0;
+          }
+
+          .line {
+            height: 28px;
+            display: grid;
+            grid-template-columns: 72px 1fr;
+            align-items: center;
+          }
+
+          .line-number {
+            padding-right: 18px;
+            color: var(--gutter-fg);
+            text-align: right;
+            user-select: none;
+          }
+
+          .line.is-active .line-number {
+            color: var(--gutter-active-fg);
+          }
+
+          .line-code {
+            white-space: pre;
+          }
+
+          .char {
+            opacity: 0;
+          }
+
+          .tok-comment {
+            color: var(--token-comment);
+          }
+          .tok-keyword {
+            color: var(--token-keyword);
+          }
+          .tok-function {
+            color: var(--token-function);
+          }
+          .tok-string {
+            color: var(--token-string);
+          }
+          .tok-number {
+            color: var(--token-number);
+          }
+          .tok-variable {
+            color: var(--token-variable);
+          }
+          .tok-parameter {
+            color: var(--token-parameter);
+          }
+          .tok-operator {
+            color: var(--token-operator);
+          }
+          .tok-punctuation {
+            color: var(--token-punctuation);
+          }
+          .tok-class-name {
+            color: var(--token-class-name);
+          }
+
+          .caret {
+            position: absolute;
+            left: 0;
+            top: 0;
+            z-index: 3;
+            display: block;
+            width: 2px;
+            height: 22px;
+            background: var(--editor-fg);
+            pointer-events: none;
+            will-change: transform, opacity;
+          }
+
+          .terminal {
+            display: grid;
+            grid-template-rows: 32px 1fr;
+            background: var(--panel-bg);
+            border-top: 1px solid var(--panel-border);
+            color: var(--editor-fg);
+            font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+            font-size: 14px;
+          }
+
+          .panel-tabs {
+            display: flex;
+            align-items: center;
+            gap: 22px;
+            padding: 0 18px;
+            border-bottom: 1px solid var(--panel-border);
+            color: var(--gutter-fg);
+            font-family:
+              Inter,
+              -apple-system,
+              BlinkMacSystemFont,
+              "Segoe UI",
+              sans-serif;
+            font-size: 12px;
+            text-transform: uppercase;
+          }
+
+          .panel-tabs .active {
+            color: var(--editor-fg);
+            border-bottom: 1px solid var(--activity-active);
+            height: 32px;
+            display: flex;
+            align-items: center;
+          }
+
+          .terminal-body {
+            padding: 12px 20px;
+            color: var(--editor-fg);
+            line-height: 1.8;
+          }
+
+          .prompt {
+            color: var(--token-function);
+          }
+
+          .statusbar {
+            grid-column: 1 / -1;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            background: var(--status-bg);
+            color: var(--status-fg);
+            border-top: 1px solid var(--status-border);
+            font-size: 12px;
+          }
+
+          .status-left,
+          .status-right {
+            display: flex;
+            align-items: center;
+            gap: 18px;
+            padding: 0 12px;
+          }
+
+          .remote {
+            align-self: stretch;
+            display: flex;
+            align-items: center;
+            padding: 0 12px;
+            margin-left: -12px;
+            background: var(--status-remote-bg, var(--activity-active));
+            color: var(--status-remote-fg, #ffffff);
+          }
+
+          svg {
+            display: block;
+          }
+        </style>
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (() => {
+            const codeLines = [
+              [{ text: "# A small functional toolkit", token: "comment" }],
+              [
+                { text: "def", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "pluck_deep", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "key", token: "parameter" },
+                { text: "):", token: "punctuation" },
+              ],
+              [
+                { text: "    ", token: "plain" },
+                { text: "return", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "obj", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "reduce", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "acc", token: "parameter" },
+                { text: ", ", token: "punctuation" },
+                { text: "k", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "acc", token: "variable" },
+                { text: "[", token: "punctuation" },
+                { text: "k", token: "variable" },
+                { text: "]", token: "punctuation" },
+                { text: ", ", token: "punctuation" },
+                { text: "key", token: "variable" },
+                { text: ".split", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "'.'", token: "string" },
+                { text: "), ", token: "punctuation" },
+                { text: "obj", token: "variable" },
+                { text: ")", token: "punctuation" },
+              ],
+              [],
+              [
+                { text: "def", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "compose", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "*", token: "operator" },
+                { text: "fns", token: "parameter" },
+                { text: "):", token: "punctuation" },
+              ],
+              [
+                { text: "    ", token: "plain" },
+                { text: "return", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "res", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "reduce", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "acc", token: "parameter" },
+                { text: ", ", token: "punctuation" },
+                { text: "fn", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "fn", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "acc", token: "variable" },
+                { text: "), ", token: "punctuation" },
+                { text: "fns", token: "variable" },
+                { text: ", ", token: "punctuation" },
+                { text: "res", token: "variable" },
+                { text: ")", token: "punctuation" },
+              ],
+              [],
+              [
+                { text: "def", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "unfold", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "f", token: "parameter" },
+                { text: ", ", token: "punctuation" },
+                { text: "seed", token: "parameter" },
+                { text: "):", token: "punctuation" },
+              ],
+              [
+                { text: "    ", token: "plain" },
+                { text: '"""Build a list by repeatedly applying f to a seed."""', token: "string" },
+              ],
+              [
+                { text: "    acc", token: "variable" },
+                { text: " = ", token: "operator" },
+                { text: "[]", token: "punctuation" },
+              ],
+              [
+                { text: "    while", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "True", token: "className" },
+                { text: ":", token: "punctuation" },
+              ],
+              [
+                { text: "        result", token: "variable" },
+                { text: " = ", token: "operator" },
+                { text: "f", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "seed", token: "variable" },
+                { text: ")", token: "punctuation" },
+              ],
+              [
+                { text: "        if", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "result", token: "variable" },
+                { text: " is ", token: "keyword" },
+                { text: "None", token: "className" },
+                { text: ":", token: "punctuation" },
+              ],
+              [
+                { text: "            return", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "acc", token: "variable" },
+              ],
+              [
+                { text: "        acc", token: "variable" },
+                { text: ".append", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "result", token: "variable" },
+                { text: "[", token: "punctuation" },
+                { text: "0", token: "number" },
+                { text: "])", token: "punctuation" },
+              ],
+              [
+                { text: "        seed", token: "variable" },
+                { text: " = ", token: "operator" },
+                { text: "result", token: "variable" },
+                { text: "[", token: "punctuation" },
+                { text: "1", token: "number" },
+                { text: "]", token: "punctuation" },
+              ],
+              [],
+            ];
+
+            const fallback = {
+              "activityBar.background": "#181818",
+              "activityBar.foreground": "#d7d7d7",
+              "activityBar.inactiveForeground": "#868686",
+              "activityBar.activeBorder": "#0078d4",
+              "sideBar.background": "#181818",
+              "sideBar.foreground": "#cccccc",
+              "sideBar.border": "#2b2b2b",
+              "tab.activeBackground": "#1f1f1f",
+              "tab.activeForeground": "#ffffff",
+              "tab.inactiveBackground": "#181818",
+              "tab.inactiveForeground": "#9d9d9d",
+              "tab.border": "#2b2b2b",
+              "editor.background": "#1f1f1f",
+              "editor.foreground": "#cccccc",
+              "editor.lineHighlightBackground": "#ffffff0a",
+              "editorLineNumber.foreground": "#6e7681",
+              "editorLineNumber.activeForeground": "#cccccc",
+              "panel.background": "#181818",
+              "panel.border": "#2b2b2b",
+              "statusBar.background": "#181818",
+              "statusBar.foreground": "#cccccc",
+              "statusBar.border": "#2b2b2b",
+              "titleBar.activeBackground": "#181818",
+              "titleBar.activeForeground": "#cccccc",
+            };
+
+            function color(theme, key) {
+              return theme.colors[key] || fallback[key] || theme.colors.foreground || "#cccccc";
+            }
+
+            function solarizedGrey(theme) {
+              return (
+                theme.colors["tab.inactiveForeground"] ||
+                theme.colors["editor.foreground"] ||
+                "#586E75"
+              );
+            }
+
+            function setVar(root, name, value) {
+              root.style.setProperty(name, value);
+            }
+
+            function applyTheme(root, theme) {
+              const solarizedUiGrey = theme.id === "solarized-light" ? solarizedGrey(theme) : null;
+              setVar(root, "--activity-bg", color(theme, "activityBar.background"));
+              setVar(
+                root,
+                "--activity-fg",
+                solarizedUiGrey || color(theme, "activityBar.foreground"),
+              );
+              setVar(
+                root,
+                "--activity-muted",
+                solarizedUiGrey || color(theme, "activityBar.inactiveForeground"),
+              );
+              setVar(root, "--activity-active", color(theme, "activityBar.activeBorder"));
+              setVar(root, "--sidebar-bg", color(theme, "sideBar.background"));
+              setVar(root, "--sidebar-fg", solarizedUiGrey || color(theme, "sideBar.foreground"));
+              setVar(root, "--sidebar-border", color(theme, "sideBar.border"));
+              setVar(root, "--tab-bg", color(theme, "tab.inactiveBackground"));
+              setVar(root, "--tab-active-bg", color(theme, "tab.activeBackground"));
+              setVar(
+                root,
+                "--tab-active-fg",
+                solarizedUiGrey || color(theme, "tab.activeForeground"),
+              );
+              setVar(
+                root,
+                "--tab-inactive-fg",
+                solarizedUiGrey || color(theme, "tab.inactiveForeground"),
+              );
+              setVar(root, "--tab-border", color(theme, "tab.border"));
+              setVar(root, "--editor-bg", color(theme, "editor.background"));
+              setVar(root, "--editor-fg", color(theme, "editor.foreground"));
+              setVar(root, "--editor-line", color(theme, "editor.lineHighlightBackground"));
+              setVar(root, "--gutter-fg", color(theme, "editorLineNumber.foreground"));
+              setVar(root, "--gutter-active-fg", color(theme, "editorLineNumber.activeForeground"));
+              setVar(root, "--panel-bg", color(theme, "panel.background"));
+              setVar(root, "--panel-border", color(theme, "panel.border"));
+              setVar(root, "--status-bg", color(theme, "statusBar.background"));
+              setVar(root, "--status-fg", color(theme, "statusBar.foreground"));
+              setVar(root, "--status-border", color(theme, "statusBar.border"));
+              setVar(root, "--status-remote-bg", color(theme, "statusBarItem.remoteBackground"));
+              setVar(
+                root,
+                "--status-remote-fg",
+                solarizedUiGrey || color(theme, "statusBarItem.remoteForeground"),
+              );
+              setVar(root, "--title-bg", color(theme, "titleBar.activeBackground"));
+              setVar(
+                root,
+                "--title-fg",
+                solarizedUiGrey || color(theme, "titleBar.activeForeground"),
+              );
+              setVar(root, "--token-comment", theme.tokens.comment);
+              setVar(root, "--token-keyword", theme.tokens.keyword);
+              setVar(root, "--token-function", theme.tokens.function);
+              setVar(root, "--token-string", theme.tokens.string);
+              setVar(root, "--token-number", theme.tokens.number);
+              setVar(root, "--token-variable", theme.tokens.variable);
+              setVar(root, "--token-parameter", theme.tokens.parameter);
+              setVar(root, "--token-operator", theme.tokens.operator);
+              setVar(root, "--token-punctuation", theme.tokens.punctuation);
+              setVar(root, "--token-class-name", theme.tokens.className);
+            }
+
+            function renderCode(root) {
+              const code = root.querySelector(".code");
+              codeLines.forEach((segments, index) => {
+                const line = document.createElement("div");
+                line.className = "line";
+                line.dataset.lineIndex = String(index);
+
+                const lineNumber = document.createElement("span");
+                lineNumber.className = "line-number";
+                lineNumber.textContent = String(index + 1);
+                line.appendChild(lineNumber);
+
+                const lineCode = document.createElement("span");
+                lineCode.className = "line-code";
+                segments.forEach((segment) => {
+                  [...segment.text].forEach((char) => {
+                    const span = document.createElement("span");
+                    span.className =
+                      segment.token === "plain"
+                        ? "char"
+                        : "char tok-" +
+                          segment.token.replace(/[A-Z]/g, (match) => "-" + match.toLowerCase());
+                    span.dataset.lineIndex = String(index);
+                    span.textContent = char;
+                    lineCode.appendChild(span);
+                  });
+                });
+                line.appendChild(lineCode);
+                code.appendChild(line);
+              });
+
+              const caret = document.createElement("span");
+              caret.className = "caret";
+              root.querySelector(".editor").appendChild(caret);
+            }
+
+            function caretPointForElement(editor, el) {
+              const editorBox = editor.getBoundingClientRect();
+              const charBox = el.getBoundingClientRect();
+              return {
+                x: charBox.right - editorBox.left + 2,
+                y: charBox.top - editorBox.top + 3,
+              };
+            }
+
+            function caretPointForLineStart(editor, line) {
+              const editorBox = editor.getBoundingClientRect();
+              const lineBox = line.getBoundingClientRect();
+              const codeBox = line.querySelector(".line-code").getBoundingClientRect();
+              return {
+                x: codeBox.left - editorBox.left,
+                y: lineBox.top - editorBox.top + 3,
+              };
+            }
+
+            function lineHighlightY(editor, line) {
+              const editorBox = editor.getBoundingClientRect();
+              const lineBox = line.getBoundingClientRect();
+              return lineBox.top - editorBox.top;
+            }
+
+            function buildTimeline(root, compositionId) {
+              const tl = gsap.timeline({ paused: true });
+              const editor = root.querySelector(".editor");
+              const caret = root.querySelector(".caret");
+              const activeLine = root.querySelector(".active-line");
+              const lineEls = gsap.utils.toArray(root.querySelectorAll(".line"));
+              const lineStartTimes = [];
+              const charSchedule = [];
+              let cursorTime = 0.95;
+
+              lineEls.forEach((line, lineIndex) => {
+                const lineChars = gsap.utils.toArray(line.querySelectorAll(".char"));
+                lineStartTimes[lineIndex] = cursorTime;
+                lineChars.forEach((char, charIndex) => {
+                  charSchedule.push({ char, time: cursorTime + charIndex * 0.012 });
+                });
+                cursorTime += Math.max(lineChars.length * 0.012, 0.08) + 0.045;
+              });
+
+              gsap.set(activeLine, { y: lineHighlightY(editor, lineEls[0]) });
+              gsap.set(caret, caretPointForLineStart(editor, lineEls[0]));
+
+              tl.from(
+                root.querySelector(".header"),
+                { y: 24, opacity: 0, duration: 0.45, ease: "power3.out" },
+                0,
+              );
+              tl.from(
+                root.querySelector(".workbench"),
+                { y: 42, opacity: 0, scale: 0.986, duration: 0.58, ease: "power3.out" },
+                0.1,
+              );
+              tl.from(activeLine, { opacity: 0, duration: 0.22, ease: "power2.out" }, 0.74);
+              lineStartTimes.forEach((time, lineIndex) => {
+                const line = lineEls[lineIndex];
+                tl.set(activeLine, { y: lineHighlightY(editor, line) }, time);
+                tl.set(caret, caretPointForLineStart(editor, line), time);
+                tl.call(
+                  () => {
+                    lineEls.forEach((item) => item.classList.toggle("is-active", item === line));
+                  },
+                  [],
+                  time,
+                );
+              });
+              charSchedule.forEach(({ char, time }) => {
+                tl.set(char, { opacity: 1 }, time);
+                tl.set(caret, caretPointForElement(editor, char), time + 0.002);
+              });
+              tl.to(
+                root.querySelector(".caret"),
+                { opacity: 0, duration: 0.34, repeat: 25, yoyo: true, ease: "steps(1)" },
+                0.95,
+              );
+              tl.from(
+                root.querySelector(".terminal"),
+                { y: 140, opacity: 0, duration: 0.56, ease: "power3.out" },
+                7.55,
+              );
+              tl.from(
+                root.querySelector(".terminal-body").children,
+                { opacity: 0, y: 8, duration: 0.24, stagger: 0.16, ease: "power2.out" },
+                8.05,
+              );
+              tl.to(
+                root.querySelector(".workbench"),
+                { rotateY: -10.5, z: 74, duration: 0.72, ease: "power2.inOut" },
+                9.35,
+              );
+              tl.to(
+                root.querySelector(".workbench"),
+                { rotateY: 0, z: 0, duration: 0.62, ease: "power2.inOut" },
+                10.08,
+              );
+
+              window.__timelines = window.__timelines || {};
+              window.__timelines[compositionId] = tl;
+
+              const previewTime = new URLSearchParams(window.location.search).get("t");
+              if (previewTime !== null) {
+                tl.time(Number(previewTime));
+              }
+            }
+
+            window.createVSCodeThemeComposition = (compositionId, themeOrId) => {
+              const root =
+                document.querySelector(
+                  '[data-composition-id="' + compositionId + '"] .vscode-theme-scene',
+                ) ||
+                document.querySelector(
+                  '.vscode-theme-scene[data-composition-id="' + compositionId + '"]',
+                ) ||
+                document.querySelector('[data-composition-id="' + compositionId + '"]');
+              const theme =
+                typeof themeOrId === "string"
+                  ? window.VSCODE_THEME_REGISTRY.find((item) => item.id === themeOrId)
+                  : themeOrId;
+              if (!root || !theme) return;
+              root.querySelector(".theme-label").textContent = theme.label;
+              root.querySelector(".theme-source").textContent = theme.sourceFile;
+              applyTheme(root, theme);
+              renderCode(root);
+              buildTimeline(root, compositionId);
+            };
+          })();
+        </script>
+        <script>
+          window.__timelines = window.__timelines || {};
+          window.__timelines["vscode-light-plus"] =
+            window.__timelines["vscode-light-plus"] || gsap.timeline({ paused: true });
+          window.createVSCodeThemeComposition("vscode-light-plus", {
+            id: "light-plus",
+            label: "Light+",
+            sourceFile: "light_plus.json",
+            uiTheme: "vs",
+            colors: {
+              "editor.background": "#FFFFFF",
+              "editor.foreground": "#000000",
+              "sideBarSectionHeader.background": "#0000",
+              "sideBarSectionHeader.border": "#61616130",
+              "sideBarTitle.foreground": "#6F6F6F",
+              "statusBarItem.remoteBackground": "#16825D",
+              "statusBarItem.remoteForeground": "#FFF",
+            },
+            tokens: {
+              comment: "#008000",
+              keyword: "#EE0000",
+              function: "#795E26",
+              string: "#811f3f",
+              number: "#098658",
+              variable: "#0070C1",
+              parameter: "#001080",
+              operator: "#EE0000",
+              punctuation: "#d16969",
+              className: "#267f99",
+            },
+          });
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/code-snippet-monokai/background.jpeg b/docs/public/catalog/blocks/code-snippet-monokai/background.jpeg
new file mode 100644
index 0000000000..1f3e465cd2
Binary files /dev/null and b/docs/public/catalog/blocks/code-snippet-monokai/background.jpeg differ
diff --git a/docs/public/catalog/blocks/code-snippet-monokai/code-snippet-monokai.html b/docs/public/catalog/blocks/code-snippet-monokai/code-snippet-monokai.html
new file mode 100644
index 0000000000..d6956a864d
--- /dev/null
+++ b/docs/public/catalog/blocks/code-snippet-monokai/code-snippet-monokai.html
@@ -0,0 +1,1067 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Monokai VS Code Theme Composition</title>
+  </head>
+  <body>
+    <template id="vscode-monokai-template">
+      <div
+        class="vscode-theme-scene"
+        data-composition-id="vscode-monokai"
+        data-width="1920"
+        data-height="1080"
+      >
+        <main class="scene-content">
+          <section class="header">
+            <div>
+              <p class="kicker">Official VS Code built-in theme</p>
+              <h1 class="title"><span class="theme-label">Monokai</span></h1>
+            </div>
+            <p class="source-note">
+              Typing `functional_toolkit.py` with workbench colors from
+              <span class="theme-source">monokai-color-theme.json</span>.
+            </p>
+          </section>
+
+          <section class="workbench">
+            <div class="titlebar">
+              <div class="traffic"><span></span><span></span><span></span></div>
+              <div class="window-title">functional-toolkit - Visual Studio Code</div>
+              <div class="command-center">Search</div>
+            </div>
+
+            <aside class="activity" aria-label="Activity bar">
+              <svg class="activity-icon active" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="currentColor"
+                  d="M4 4h7v7H4V4Zm9 0h7v7h-7V4ZM4 13h7v7H4v-7Zm9 0h7v7h-7v-7Z"
+                />
+              </svg>
+              <svg class="activity-icon" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  d="m21 21-5.2-5.2M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Z"
+                />
+              </svg>
+              <svg class="activity-icon" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  d="M8 18 3 12l5-6m8 12 5-6-5-6"
+                />
+              </svg>
+              <svg class="activity-icon" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  d="M12 3v18m0-18 6 6m-6-6L6 9m6 12 6-6m-6 6-6-6"
+                />
+              </svg>
+            </aside>
+
+            <aside class="sidebar">
+              <div class="sidebar-title">Explorer</div>
+              <div class="section-title">⌄ Functional Toolkit</div>
+              <div class="tree">
+                <div class="tree-row">⌄ src</div>
+                <div class="tree-row child selected">◇ functional_toolkit.py</div>
+                <div class="tree-row child">◇ test_toolkit.py</div>
+                <div class="tree-row">◇ pyproject.toml</div>
+                <div class="tree-row">◇ README.md</div>
+              </div>
+            </aside>
+
+            <section class="editor-area">
+              <div class="tabs">
+                <div class="tab">◇ functional_toolkit.py</div>
+                <div class="tab inactive">README.md</div>
+              </div>
+              <div class="breadcrumbs">functional-toolkit › src › functional_toolkit.py</div>
+              <div class="editor">
+                <div class="active-line"></div>
+                <div class="code"></div>
+              </div>
+              <div class="terminal">
+                <div class="panel-tabs">
+                  <span class="active">Terminal</span><span>Problems</span><span>Output</span>
+                </div>
+                <div class="terminal-body">
+                  <div><span class="prompt">functional-toolkit %</span> python -m pytest</div>
+                  <div>collected 3 items</div>
+                  <div>tests/test_toolkit.py ... <span class="tok-comment">passed</span></div>
+                </div>
+              </div>
+            </section>
+
+            <footer class="statusbar">
+              <div class="status-left">
+                <span class="remote">main</span>
+                <span>0 errors</span>
+                <span>0 warnings</span>
+              </div>
+              <div class="status-right">
+                <span>Ln 17, Col 1</span>
+                <span>Spaces: 4</span>
+                <span>UTF-8</span>
+                <span>Python 3.12</span>
+              </div>
+            </footer>
+          </section>
+        </main>
+        <style>
+          * {
+            box-sizing: border-box;
+            letter-spacing: 0;
+          }
+
+          html,
+          body {
+            margin: 0;
+            width: 1920px;
+            height: 1080px;
+            overflow: hidden;
+            background: #000000;
+            font-family:
+              Inter,
+              -apple-system,
+              BlinkMacSystemFont,
+              "Segoe UI",
+              sans-serif;
+          }
+
+          .vscode-theme-scene {
+            --activity-bg: #181818;
+            --activity-fg: #d7d7d7;
+            --activity-muted: #868686;
+            --activity-active: #0078d4;
+            --sidebar-bg: #181818;
+            --sidebar-fg: #cccccc;
+            --sidebar-border: #2b2b2b;
+            --tab-bg: #181818;
+            --tab-active-bg: #1f1f1f;
+            --tab-active-fg: #ffffff;
+            --tab-inactive-fg: #9d9d9d;
+            --tab-border: #2b2b2b;
+            --editor-bg: #1f1f1f;
+            --editor-fg: #cccccc;
+            --editor-line: rgba(255, 255, 255, 0.04);
+            --gutter-fg: #6e7681;
+            --gutter-active-fg: #cccccc;
+            --panel-bg: #181818;
+            --panel-border: #2b2b2b;
+            --status-bg: #181818;
+            --status-fg: #cccccc;
+            --status-border: #2b2b2b;
+            --title-bg: #181818;
+            --title-fg: #cccccc;
+            --token-comment: #6a9955;
+            --token-keyword: #c586c0;
+            --token-function: #dcdcaa;
+            --token-string: #ce9178;
+            --token-number: #b5cea8;
+            --token-variable: #9cdcfe;
+            --token-parameter: #9cdcfe;
+            --token-operator: #d4d4d4;
+            --token-punctuation: #d4d4d4;
+            --token-class-name: #4ec9b0;
+            position: relative;
+            width: 1920px;
+            height: 1080px;
+            overflow: hidden;
+            background:
+              linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.32)),
+              url("../assets/background.jpeg") center / cover no-repeat;
+            color: var(--editor-fg);
+          }
+
+          .scene-content {
+            position: relative;
+            z-index: 1;
+            width: 100%;
+            height: 100%;
+            padding: 54px 70px 92px;
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+            perspective: 2200px;
+            perspective-origin: 56% 52%;
+          }
+
+          .header {
+            display: flex;
+            align-items: end;
+            justify-content: space-between;
+            min-height: 66px;
+            text-shadow:
+              0 2px 12px rgba(0, 0, 0, 0.42),
+              0 14px 34px rgba(0, 0, 0, 0.32);
+          }
+
+          .kicker {
+            margin: 0 0 7px;
+            color: var(--gutter-fg);
+            font-size: 15px;
+            font-weight: 650;
+            text-transform: uppercase;
+            text-shadow:
+              0 2px 8px rgba(0, 0, 0, 0.48),
+              0 10px 26px rgba(0, 0, 0, 0.36);
+          }
+
+          .title {
+            margin: 0;
+            color: var(--editor-fg);
+            font-size: 44px;
+            line-height: 1;
+            font-weight: 760;
+          }
+
+          .source-note {
+            width: 510px;
+            color: var(--gutter-fg);
+            font-size: 16px;
+            line-height: 1.35;
+            text-align: right;
+            text-shadow:
+              0 2px 10px rgba(0, 0, 0, 0.46),
+              0 12px 30px rgba(0, 0, 0, 0.34);
+          }
+
+          .workbench {
+            height: 824px;
+            display: grid;
+            grid-template-columns: 54px 290px 1fr;
+            grid-template-rows: 36px 1fr 26px;
+            overflow: hidden;
+            border: 1px solid var(--sidebar-border);
+            border-radius: 8px;
+            background: var(--editor-bg);
+            box-shadow: 0 34px 90px rgba(0, 0, 0, 0.42);
+            transform: translateZ(0);
+            transform-origin: 82% 50%;
+            transform-style: preserve-3d;
+            will-change: transform;
+          }
+
+          .titlebar {
+            grid-column: 1 / -1;
+            display: grid;
+            grid-template-columns: 120px 1fr 210px;
+            align-items: center;
+            background: var(--title-bg);
+            color: var(--title-fg);
+            border-bottom: 1px solid var(--tab-border);
+            font-size: 12px;
+          }
+
+          .traffic {
+            display: flex;
+            gap: 8px;
+            padding-left: 18px;
+          }
+
+          .traffic span {
+            width: 12px;
+            height: 12px;
+            border-radius: 999px;
+          }
+
+          .traffic span:nth-child(1) {
+            background: #ff5f57;
+          }
+          .traffic span:nth-child(2) {
+            background: #ffbd2e;
+          }
+          .traffic span:nth-child(3) {
+            background: #28c840;
+          }
+
+          .window-title {
+            justify-self: center;
+            opacity: 0.84;
+          }
+
+          .command-center {
+            justify-self: end;
+            width: 176px;
+            height: 22px;
+            margin-right: 16px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border: 1px solid color-mix(in srgb, var(--title-fg), transparent 78%);
+            border-radius: 5px;
+            color: color-mix(in srgb, var(--title-fg), transparent 18%);
+          }
+
+          .activity {
+            grid-row: 2 / 3;
+            background: var(--activity-bg);
+            border-right: 1px solid var(--sidebar-border);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 10px 0;
+            gap: 18px;
+          }
+
+          .activity-icon {
+            width: 28px;
+            height: 28px;
+            color: var(--activity-muted);
+          }
+
+          .activity-icon.active {
+            color: var(--activity-fg);
+            border-left: 2px solid var(--activity-active);
+            padding-left: 4px;
+          }
+
+          .sidebar {
+            grid-row: 2 / 3;
+            background: var(--sidebar-bg);
+            color: var(--sidebar-fg);
+            border-right: 1px solid var(--sidebar-border);
+            display: flex;
+            flex-direction: column;
+            min-width: 0;
+          }
+
+          .sidebar-title {
+            height: 38px;
+            display: flex;
+            align-items: center;
+            padding: 0 20px;
+            color: var(--sidebar-fg);
+            font-size: 11px;
+            text-transform: uppercase;
+          }
+
+          .section-title {
+            height: 24px;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            padding: 0 14px;
+            background: color-mix(in srgb, var(--sidebar-bg), var(--sidebar-fg) 5%);
+            border-top: 1px solid var(--sidebar-border);
+            border-bottom: 1px solid var(--sidebar-border);
+            color: var(--sidebar-fg);
+            font-size: 11px;
+            font-weight: 700;
+          }
+
+          .tree {
+            padding: 8px 0;
+            font-size: 13px;
+            line-height: 24px;
+          }
+
+          .tree-row {
+            height: 24px;
+            display: flex;
+            align-items: center;
+            gap: 7px;
+            padding: 0 10px 0 18px;
+            color: color-mix(in srgb, var(--sidebar-fg), transparent 8%);
+            white-space: nowrap;
+          }
+
+          .tree-row.child {
+            padding-left: 34px;
+          }
+
+          .tree-row.selected {
+            background: color-mix(in srgb, var(--sidebar-fg), transparent 88%);
+            color: var(--sidebar-fg);
+          }
+
+          .editor-area {
+            grid-row: 2 / 3;
+            display: grid;
+            grid-template-rows: 36px 30px 1fr 138px;
+            min-width: 0;
+            background: var(--editor-bg);
+          }
+
+          .tabs {
+            display: flex;
+            background: var(--tab-bg);
+            border-bottom: 1px solid var(--tab-border);
+          }
+
+          .tab {
+            width: 205px;
+            height: 36px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 0 13px;
+            border-right: 1px solid var(--tab-border);
+            background: var(--tab-active-bg);
+            color: var(--tab-active-fg);
+            border-top: 2px solid var(--activity-active);
+            font-size: 13px;
+          }
+
+          .tab.inactive {
+            background: var(--tab-bg);
+            color: var(--tab-inactive-fg);
+            border-top-color: transparent;
+          }
+
+          .breadcrumbs {
+            display: flex;
+            align-items: center;
+            gap: 7px;
+            padding: 0 18px;
+            color: var(--gutter-fg);
+            border-bottom: 1px solid color-mix(in srgb, var(--tab-border), transparent 20%);
+            font-size: 12px;
+          }
+
+          .editor {
+            position: relative;
+            overflow: hidden;
+            background: var(--editor-bg);
+            color: var(--editor-fg);
+            font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+            font-size: 18px;
+            line-height: 1.52;
+          }
+
+          .active-line {
+            position: absolute;
+            left: 0;
+            right: 0;
+            top: 0;
+            height: 28px;
+            background: var(--editor-line);
+            will-change: transform;
+          }
+
+          .code {
+            position: relative;
+            padding: 20px 36px 18px 0;
+          }
+
+          .line {
+            height: 28px;
+            display: grid;
+            grid-template-columns: 72px 1fr;
+            align-items: center;
+          }
+
+          .line-number {
+            padding-right: 18px;
+            color: var(--gutter-fg);
+            text-align: right;
+            user-select: none;
+          }
+
+          .line.is-active .line-number {
+            color: var(--gutter-active-fg);
+          }
+
+          .line-code {
+            white-space: pre;
+          }
+
+          .char {
+            opacity: 0;
+          }
+
+          .tok-comment {
+            color: var(--token-comment);
+          }
+          .tok-keyword {
+            color: var(--token-keyword);
+          }
+          .tok-function {
+            color: var(--token-function);
+          }
+          .tok-string {
+            color: var(--token-string);
+          }
+          .tok-number {
+            color: var(--token-number);
+          }
+          .tok-variable {
+            color: var(--token-variable);
+          }
+          .tok-parameter {
+            color: var(--token-parameter);
+          }
+          .tok-operator {
+            color: var(--token-operator);
+          }
+          .tok-punctuation {
+            color: var(--token-punctuation);
+          }
+          .tok-class-name {
+            color: var(--token-class-name);
+          }
+
+          .caret {
+            position: absolute;
+            left: 0;
+            top: 0;
+            z-index: 3;
+            display: block;
+            width: 2px;
+            height: 22px;
+            background: var(--editor-fg);
+            pointer-events: none;
+            will-change: transform, opacity;
+          }
+
+          .terminal {
+            display: grid;
+            grid-template-rows: 32px 1fr;
+            background: var(--panel-bg);
+            border-top: 1px solid var(--panel-border);
+            color: var(--editor-fg);
+            font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+            font-size: 14px;
+          }
+
+          .panel-tabs {
+            display: flex;
+            align-items: center;
+            gap: 22px;
+            padding: 0 18px;
+            border-bottom: 1px solid var(--panel-border);
+            color: var(--gutter-fg);
+            font-family:
+              Inter,
+              -apple-system,
+              BlinkMacSystemFont,
+              "Segoe UI",
+              sans-serif;
+            font-size: 12px;
+            text-transform: uppercase;
+          }
+
+          .panel-tabs .active {
+            color: var(--editor-fg);
+            border-bottom: 1px solid var(--activity-active);
+            height: 32px;
+            display: flex;
+            align-items: center;
+          }
+
+          .terminal-body {
+            padding: 12px 20px;
+            color: var(--editor-fg);
+            line-height: 1.8;
+          }
+
+          .prompt {
+            color: var(--token-function);
+          }
+
+          .statusbar {
+            grid-column: 1 / -1;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            background: var(--status-bg);
+            color: var(--status-fg);
+            border-top: 1px solid var(--status-border);
+            font-size: 12px;
+          }
+
+          .status-left,
+          .status-right {
+            display: flex;
+            align-items: center;
+            gap: 18px;
+            padding: 0 12px;
+          }
+
+          .remote {
+            align-self: stretch;
+            display: flex;
+            align-items: center;
+            padding: 0 12px;
+            margin-left: -12px;
+            background: var(--status-remote-bg, var(--activity-active));
+            color: var(--status-remote-fg, #ffffff);
+          }
+
+          svg {
+            display: block;
+          }
+        </style>
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (() => {
+            const codeLines = [
+              [{ text: "# A small functional toolkit", token: "comment" }],
+              [
+                { text: "def", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "pluck_deep", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "key", token: "parameter" },
+                { text: "):", token: "punctuation" },
+              ],
+              [
+                { text: "    ", token: "plain" },
+                { text: "return", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "obj", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "reduce", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "acc", token: "parameter" },
+                { text: ", ", token: "punctuation" },
+                { text: "k", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "acc", token: "variable" },
+                { text: "[", token: "punctuation" },
+                { text: "k", token: "variable" },
+                { text: "]", token: "punctuation" },
+                { text: ", ", token: "punctuation" },
+                { text: "key", token: "variable" },
+                { text: ".split", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "'.'", token: "string" },
+                { text: "), ", token: "punctuation" },
+                { text: "obj", token: "variable" },
+                { text: ")", token: "punctuation" },
+              ],
+              [],
+              [
+                { text: "def", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "compose", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "*", token: "operator" },
+                { text: "fns", token: "parameter" },
+                { text: "):", token: "punctuation" },
+              ],
+              [
+                { text: "    ", token: "plain" },
+                { text: "return", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "res", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "reduce", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "acc", token: "parameter" },
+                { text: ", ", token: "punctuation" },
+                { text: "fn", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "fn", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "acc", token: "variable" },
+                { text: "), ", token: "punctuation" },
+                { text: "fns", token: "variable" },
+                { text: ", ", token: "punctuation" },
+                { text: "res", token: "variable" },
+                { text: ")", token: "punctuation" },
+              ],
+              [],
+              [
+                { text: "def", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "unfold", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "f", token: "parameter" },
+                { text: ", ", token: "punctuation" },
+                { text: "seed", token: "parameter" },
+                { text: "):", token: "punctuation" },
+              ],
+              [
+                { text: "    ", token: "plain" },
+                { text: '"""Build a list by repeatedly applying f to a seed."""', token: "string" },
+              ],
+              [
+                { text: "    acc", token: "variable" },
+                { text: " = ", token: "operator" },
+                { text: "[]", token: "punctuation" },
+              ],
+              [
+                { text: "    while", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "True", token: "className" },
+                { text: ":", token: "punctuation" },
+              ],
+              [
+                { text: "        result", token: "variable" },
+                { text: " = ", token: "operator" },
+                { text: "f", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "seed", token: "variable" },
+                { text: ")", token: "punctuation" },
+              ],
+              [
+                { text: "        if", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "result", token: "variable" },
+                { text: " is ", token: "keyword" },
+                { text: "None", token: "className" },
+                { text: ":", token: "punctuation" },
+              ],
+              [
+                { text: "            return", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "acc", token: "variable" },
+              ],
+              [
+                { text: "        acc", token: "variable" },
+                { text: ".append", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "result", token: "variable" },
+                { text: "[", token: "punctuation" },
+                { text: "0", token: "number" },
+                { text: "])", token: "punctuation" },
+              ],
+              [
+                { text: "        seed", token: "variable" },
+                { text: " = ", token: "operator" },
+                { text: "result", token: "variable" },
+                { text: "[", token: "punctuation" },
+                { text: "1", token: "number" },
+                { text: "]", token: "punctuation" },
+              ],
+              [],
+            ];
+
+            const fallback = {
+              "activityBar.background": "#181818",
+              "activityBar.foreground": "#d7d7d7",
+              "activityBar.inactiveForeground": "#868686",
+              "activityBar.activeBorder": "#0078d4",
+              "sideBar.background": "#181818",
+              "sideBar.foreground": "#cccccc",
+              "sideBar.border": "#2b2b2b",
+              "tab.activeBackground": "#1f1f1f",
+              "tab.activeForeground": "#ffffff",
+              "tab.inactiveBackground": "#181818",
+              "tab.inactiveForeground": "#9d9d9d",
+              "tab.border": "#2b2b2b",
+              "editor.background": "#1f1f1f",
+              "editor.foreground": "#cccccc",
+              "editor.lineHighlightBackground": "#ffffff0a",
+              "editorLineNumber.foreground": "#6e7681",
+              "editorLineNumber.activeForeground": "#cccccc",
+              "panel.background": "#181818",
+              "panel.border": "#2b2b2b",
+              "statusBar.background": "#181818",
+              "statusBar.foreground": "#cccccc",
+              "statusBar.border": "#2b2b2b",
+              "titleBar.activeBackground": "#181818",
+              "titleBar.activeForeground": "#cccccc",
+            };
+
+            function color(theme, key) {
+              return theme.colors[key] || fallback[key] || theme.colors.foreground || "#cccccc";
+            }
+
+            function solarizedGrey(theme) {
+              return (
+                theme.colors["tab.inactiveForeground"] ||
+                theme.colors["editor.foreground"] ||
+                "#586E75"
+              );
+            }
+
+            function setVar(root, name, value) {
+              root.style.setProperty(name, value);
+            }
+
+            function applyTheme(root, theme) {
+              const solarizedUiGrey = theme.id === "solarized-light" ? solarizedGrey(theme) : null;
+              setVar(root, "--activity-bg", color(theme, "activityBar.background"));
+              setVar(
+                root,
+                "--activity-fg",
+                solarizedUiGrey || color(theme, "activityBar.foreground"),
+              );
+              setVar(
+                root,
+                "--activity-muted",
+                solarizedUiGrey || color(theme, "activityBar.inactiveForeground"),
+              );
+              setVar(root, "--activity-active", color(theme, "activityBar.activeBorder"));
+              setVar(root, "--sidebar-bg", color(theme, "sideBar.background"));
+              setVar(root, "--sidebar-fg", solarizedUiGrey || color(theme, "sideBar.foreground"));
+              setVar(root, "--sidebar-border", color(theme, "sideBar.border"));
+              setVar(root, "--tab-bg", color(theme, "tab.inactiveBackground"));
+              setVar(root, "--tab-active-bg", color(theme, "tab.activeBackground"));
+              setVar(
+                root,
+                "--tab-active-fg",
+                solarizedUiGrey || color(theme, "tab.activeForeground"),
+              );
+              setVar(
+                root,
+                "--tab-inactive-fg",
+                solarizedUiGrey || color(theme, "tab.inactiveForeground"),
+              );
+              setVar(root, "--tab-border", color(theme, "tab.border"));
+              setVar(root, "--editor-bg", color(theme, "editor.background"));
+              setVar(root, "--editor-fg", color(theme, "editor.foreground"));
+              setVar(root, "--editor-line", color(theme, "editor.lineHighlightBackground"));
+              setVar(root, "--gutter-fg", color(theme, "editorLineNumber.foreground"));
+              setVar(root, "--gutter-active-fg", color(theme, "editorLineNumber.activeForeground"));
+              setVar(root, "--panel-bg", color(theme, "panel.background"));
+              setVar(root, "--panel-border", color(theme, "panel.border"));
+              setVar(root, "--status-bg", color(theme, "statusBar.background"));
+              setVar(root, "--status-fg", color(theme, "statusBar.foreground"));
+              setVar(root, "--status-border", color(theme, "statusBar.border"));
+              setVar(root, "--status-remote-bg", color(theme, "statusBarItem.remoteBackground"));
+              setVar(
+                root,
+                "--status-remote-fg",
+                solarizedUiGrey || color(theme, "statusBarItem.remoteForeground"),
+              );
+              setVar(root, "--title-bg", color(theme, "titleBar.activeBackground"));
+              setVar(
+                root,
+                "--title-fg",
+                solarizedUiGrey || color(theme, "titleBar.activeForeground"),
+              );
+              setVar(root, "--token-comment", theme.tokens.comment);
+              setVar(root, "--token-keyword", theme.tokens.keyword);
+              setVar(root, "--token-function", theme.tokens.function);
+              setVar(root, "--token-string", theme.tokens.string);
+              setVar(root, "--token-number", theme.tokens.number);
+              setVar(root, "--token-variable", theme.tokens.variable);
+              setVar(root, "--token-parameter", theme.tokens.parameter);
+              setVar(root, "--token-operator", theme.tokens.operator);
+              setVar(root, "--token-punctuation", theme.tokens.punctuation);
+              setVar(root, "--token-class-name", theme.tokens.className);
+            }
+
+            function renderCode(root) {
+              const code = root.querySelector(".code");
+              codeLines.forEach((segments, index) => {
+                const line = document.createElement("div");
+                line.className = "line";
+                line.dataset.lineIndex = String(index);
+
+                const lineNumber = document.createElement("span");
+                lineNumber.className = "line-number";
+                lineNumber.textContent = String(index + 1);
+                line.appendChild(lineNumber);
+
+                const lineCode = document.createElement("span");
+                lineCode.className = "line-code";
+                segments.forEach((segment) => {
+                  [...segment.text].forEach((char) => {
+                    const span = document.createElement("span");
+                    span.className =
+                      segment.token === "plain"
+                        ? "char"
+                        : "char tok-" +
+                          segment.token.replace(/[A-Z]/g, (match) => "-" + match.toLowerCase());
+                    span.dataset.lineIndex = String(index);
+                    span.textContent = char;
+                    lineCode.appendChild(span);
+                  });
+                });
+                line.appendChild(lineCode);
+                code.appendChild(line);
+              });
+
+              const caret = document.createElement("span");
+              caret.className = "caret";
+              root.querySelector(".editor").appendChild(caret);
+            }
+
+            function caretPointForElement(editor, el) {
+              const editorBox = editor.getBoundingClientRect();
+              const charBox = el.getBoundingClientRect();
+              return {
+                x: charBox.right - editorBox.left + 2,
+                y: charBox.top - editorBox.top + 3,
+              };
+            }
+
+            function caretPointForLineStart(editor, line) {
+              const editorBox = editor.getBoundingClientRect();
+              const lineBox = line.getBoundingClientRect();
+              const codeBox = line.querySelector(".line-code").getBoundingClientRect();
+              return {
+                x: codeBox.left - editorBox.left,
+                y: lineBox.top - editorBox.top + 3,
+              };
+            }
+
+            function lineHighlightY(editor, line) {
+              const editorBox = editor.getBoundingClientRect();
+              const lineBox = line.getBoundingClientRect();
+              return lineBox.top - editorBox.top;
+            }
+
+            function buildTimeline(root, compositionId) {
+              const tl = gsap.timeline({ paused: true });
+              const editor = root.querySelector(".editor");
+              const caret = root.querySelector(".caret");
+              const activeLine = root.querySelector(".active-line");
+              const lineEls = gsap.utils.toArray(root.querySelectorAll(".line"));
+              const lineStartTimes = [];
+              const charSchedule = [];
+              let cursorTime = 0.95;
+
+              lineEls.forEach((line, lineIndex) => {
+                const lineChars = gsap.utils.toArray(line.querySelectorAll(".char"));
+                lineStartTimes[lineIndex] = cursorTime;
+                lineChars.forEach((char, charIndex) => {
+                  charSchedule.push({ char, time: cursorTime + charIndex * 0.012 });
+                });
+                cursorTime += Math.max(lineChars.length * 0.012, 0.08) + 0.045;
+              });
+
+              gsap.set(activeLine, { y: lineHighlightY(editor, lineEls[0]) });
+              gsap.set(caret, caretPointForLineStart(editor, lineEls[0]));
+
+              tl.from(
+                root.querySelector(".header"),
+                { y: 24, opacity: 0, duration: 0.45, ease: "power3.out" },
+                0,
+              );
+              tl.from(
+                root.querySelector(".workbench"),
+                { y: 42, opacity: 0, scale: 0.986, duration: 0.58, ease: "power3.out" },
+                0.1,
+              );
+              tl.from(activeLine, { opacity: 0, duration: 0.22, ease: "power2.out" }, 0.74);
+              lineStartTimes.forEach((time, lineIndex) => {
+                const line = lineEls[lineIndex];
+                tl.set(activeLine, { y: lineHighlightY(editor, line) }, time);
+                tl.set(caret, caretPointForLineStart(editor, line), time);
+                tl.call(
+                  () => {
+                    lineEls.forEach((item) => item.classList.toggle("is-active", item === line));
+                  },
+                  [],
+                  time,
+                );
+              });
+              charSchedule.forEach(({ char, time }) => {
+                tl.set(char, { opacity: 1 }, time);
+                tl.set(caret, caretPointForElement(editor, char), time + 0.002);
+              });
+              tl.to(
+                root.querySelector(".caret"),
+                { opacity: 0, duration: 0.34, repeat: 25, yoyo: true, ease: "steps(1)" },
+                0.95,
+              );
+              tl.from(
+                root.querySelector(".terminal"),
+                { y: 140, opacity: 0, duration: 0.56, ease: "power3.out" },
+                7.55,
+              );
+              tl.from(
+                root.querySelector(".terminal-body").children,
+                { opacity: 0, y: 8, duration: 0.24, stagger: 0.16, ease: "power2.out" },
+                8.05,
+              );
+              tl.to(
+                root.querySelector(".workbench"),
+                { rotateY: -10.5, z: 74, duration: 0.72, ease: "power2.inOut" },
+                9.35,
+              );
+              tl.to(
+                root.querySelector(".workbench"),
+                { rotateY: 0, z: 0, duration: 0.62, ease: "power2.inOut" },
+                10.08,
+              );
+
+              window.__timelines = window.__timelines || {};
+              window.__timelines[compositionId] = tl;
+
+              const previewTime = new URLSearchParams(window.location.search).get("t");
+              if (previewTime !== null) {
+                tl.time(Number(previewTime));
+              }
+            }
+
+            window.createVSCodeThemeComposition = (compositionId, themeOrId) => {
+              const root =
+                document.querySelector(
+                  '[data-composition-id="' + compositionId + '"] .vscode-theme-scene',
+                ) ||
+                document.querySelector(
+                  '.vscode-theme-scene[data-composition-id="' + compositionId + '"]',
+                ) ||
+                document.querySelector('[data-composition-id="' + compositionId + '"]');
+              const theme =
+                typeof themeOrId === "string"
+                  ? window.VSCODE_THEME_REGISTRY.find((item) => item.id === themeOrId)
+                  : themeOrId;
+              if (!root || !theme) return;
+              root.querySelector(".theme-label").textContent = theme.label;
+              root.querySelector(".theme-source").textContent = theme.sourceFile;
+              applyTheme(root, theme);
+              renderCode(root);
+              buildTimeline(root, compositionId);
+            };
+          })();
+        </script>
+        <script>
+          window.__timelines = window.__timelines || {};
+          window.__timelines["vscode-monokai"] =
+            window.__timelines["vscode-monokai"] || gsap.timeline({ paused: true });
+          window.createVSCodeThemeComposition("vscode-monokai", {
+            id: "monokai",
+            label: "Monokai",
+            sourceFile: "monokai-color-theme.json",
+            uiTheme: "vs-dark",
+            colors: {
+              "activityBar.background": "#272822",
+              "activityBar.foreground": "#f8f8f2",
+              "editor.background": "#272822",
+              "editor.foreground": "#f8f8f2",
+              "editor.lineHighlightBackground": "#3e3d32",
+              "editor.selectionBackground": "#878b9180",
+              "editorGroup.border": "#34352f",
+              "editorGroupHeader.tabsBackground": "#1e1f1c",
+              "editorLineNumber.activeForeground": "#c2c2bf",
+              "editorLineNumber.foreground": "#90908a",
+              "panel.border": "#414339",
+              "sideBar.background": "#1e1f1c",
+              "sideBarSectionHeader.background": "#272822",
+              "statusBar.background": "#414339",
+              "statusBarItem.remoteBackground": "#AC6218",
+              "tab.border": "#1e1f1c",
+              "tab.inactiveBackground": "#34352f",
+              "tab.inactiveForeground": "#ccccc7",
+              "titleBar.activeBackground": "#1e1f1c",
+            },
+            tokens: {
+              comment: "#88846f",
+              keyword: "#66D9EF",
+              function: "#66D9EF",
+              string: "#AE81FF",
+              number: "#AE81FFA0",
+              variable: "#FD971F",
+              parameter: "#FD971F",
+              operator: "#F92672",
+              punctuation: "#A6E22E",
+              className: "#66D9EF",
+            },
+          });
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/code-snippet-solarized-light/background.jpeg b/docs/public/catalog/blocks/code-snippet-solarized-light/background.jpeg
new file mode 100644
index 0000000000..1f3e465cd2
Binary files /dev/null and b/docs/public/catalog/blocks/code-snippet-solarized-light/background.jpeg differ
diff --git a/docs/public/catalog/blocks/code-snippet-solarized-light/code-snippet-solarized-light.html b/docs/public/catalog/blocks/code-snippet-solarized-light/code-snippet-solarized-light.html
new file mode 100644
index 0000000000..fd933b0a77
--- /dev/null
+++ b/docs/public/catalog/blocks/code-snippet-solarized-light/code-snippet-solarized-light.html
@@ -0,0 +1,1069 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Solarized Light VS Code Theme Composition</title>
+  </head>
+  <body>
+    <template id="vscode-solarized-light-template">
+      <div
+        class="vscode-theme-scene"
+        data-composition-id="vscode-solarized-light"
+        data-width="1920"
+        data-height="1080"
+      >
+        <main class="scene-content">
+          <section class="header">
+            <div>
+              <p class="kicker">Official VS Code built-in theme</p>
+              <h1 class="title"><span class="theme-label">Solarized Light</span></h1>
+            </div>
+            <p class="source-note">
+              Typing `functional_toolkit.py` with workbench colors from
+              <span class="theme-source">solarized-light-color-theme.json</span>.
+            </p>
+          </section>
+
+          <section class="workbench">
+            <div class="titlebar">
+              <div class="traffic"><span></span><span></span><span></span></div>
+              <div class="window-title">functional-toolkit - Visual Studio Code</div>
+              <div class="command-center">Search</div>
+            </div>
+
+            <aside class="activity" aria-label="Activity bar">
+              <svg class="activity-icon active" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="currentColor"
+                  d="M4 4h7v7H4V4Zm9 0h7v7h-7V4ZM4 13h7v7H4v-7Zm9 0h7v7h-7v-7Z"
+                />
+              </svg>
+              <svg class="activity-icon" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  d="m21 21-5.2-5.2M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Z"
+                />
+              </svg>
+              <svg class="activity-icon" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  d="M8 18 3 12l5-6m8 12 5-6-5-6"
+                />
+              </svg>
+              <svg class="activity-icon" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  d="M12 3v18m0-18 6 6m-6-6L6 9m6 12 6-6m-6 6-6-6"
+                />
+              </svg>
+            </aside>
+
+            <aside class="sidebar">
+              <div class="sidebar-title">Explorer</div>
+              <div class="section-title">⌄ Functional Toolkit</div>
+              <div class="tree">
+                <div class="tree-row">⌄ src</div>
+                <div class="tree-row child selected">◇ functional_toolkit.py</div>
+                <div class="tree-row child">◇ test_toolkit.py</div>
+                <div class="tree-row">◇ pyproject.toml</div>
+                <div class="tree-row">◇ README.md</div>
+              </div>
+            </aside>
+
+            <section class="editor-area">
+              <div class="tabs">
+                <div class="tab">◇ functional_toolkit.py</div>
+                <div class="tab inactive">README.md</div>
+              </div>
+              <div class="breadcrumbs">functional-toolkit › src › functional_toolkit.py</div>
+              <div class="editor">
+                <div class="active-line"></div>
+                <div class="code"></div>
+              </div>
+              <div class="terminal">
+                <div class="panel-tabs">
+                  <span class="active">Terminal</span><span>Problems</span><span>Output</span>
+                </div>
+                <div class="terminal-body">
+                  <div><span class="prompt">functional-toolkit %</span> python -m pytest</div>
+                  <div>collected 3 items</div>
+                  <div>tests/test_toolkit.py ... <span class="tok-comment">passed</span></div>
+                </div>
+              </div>
+            </section>
+
+            <footer class="statusbar">
+              <div class="status-left">
+                <span class="remote">main</span>
+                <span>0 errors</span>
+                <span>0 warnings</span>
+              </div>
+              <div class="status-right">
+                <span>Ln 17, Col 1</span>
+                <span>Spaces: 4</span>
+                <span>UTF-8</span>
+                <span>Python 3.12</span>
+              </div>
+            </footer>
+          </section>
+        </main>
+        <style>
+          * {
+            box-sizing: border-box;
+            letter-spacing: 0;
+          }
+
+          html,
+          body {
+            margin: 0;
+            width: 1920px;
+            height: 1080px;
+            overflow: hidden;
+            background: #000000;
+            font-family:
+              Inter,
+              -apple-system,
+              BlinkMacSystemFont,
+              "Segoe UI",
+              sans-serif;
+          }
+
+          .vscode-theme-scene {
+            --activity-bg: #181818;
+            --activity-fg: #d7d7d7;
+            --activity-muted: #868686;
+            --activity-active: #0078d4;
+            --sidebar-bg: #181818;
+            --sidebar-fg: #cccccc;
+            --sidebar-border: #2b2b2b;
+            --tab-bg: #181818;
+            --tab-active-bg: #1f1f1f;
+            --tab-active-fg: #ffffff;
+            --tab-inactive-fg: #9d9d9d;
+            --tab-border: #2b2b2b;
+            --editor-bg: #1f1f1f;
+            --editor-fg: #cccccc;
+            --editor-line: rgba(255, 255, 255, 0.04);
+            --gutter-fg: #6e7681;
+            --gutter-active-fg: #cccccc;
+            --panel-bg: #181818;
+            --panel-border: #2b2b2b;
+            --status-bg: #181818;
+            --status-fg: #cccccc;
+            --status-border: #2b2b2b;
+            --title-bg: #181818;
+            --title-fg: #cccccc;
+            --token-comment: #6a9955;
+            --token-keyword: #c586c0;
+            --token-function: #dcdcaa;
+            --token-string: #ce9178;
+            --token-number: #b5cea8;
+            --token-variable: #9cdcfe;
+            --token-parameter: #9cdcfe;
+            --token-operator: #d4d4d4;
+            --token-punctuation: #d4d4d4;
+            --token-class-name: #4ec9b0;
+            position: relative;
+            width: 1920px;
+            height: 1080px;
+            overflow: hidden;
+            background:
+              linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.32)),
+              url("../assets/background.jpeg") center / cover no-repeat;
+            color: var(--editor-fg);
+          }
+
+          .scene-content {
+            position: relative;
+            z-index: 1;
+            width: 100%;
+            height: 100%;
+            padding: 54px 70px 92px;
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+            perspective: 2200px;
+            perspective-origin: 56% 52%;
+          }
+
+          .header {
+            display: flex;
+            align-items: end;
+            justify-content: space-between;
+            min-height: 66px;
+            text-shadow:
+              0 2px 12px rgba(0, 0, 0, 0.42),
+              0 14px 34px rgba(0, 0, 0, 0.32);
+          }
+
+          .kicker {
+            margin: 0 0 7px;
+            color: var(--gutter-fg);
+            font-size: 15px;
+            font-weight: 650;
+            text-transform: uppercase;
+            text-shadow:
+              0 2px 8px rgba(0, 0, 0, 0.48),
+              0 10px 26px rgba(0, 0, 0, 0.36);
+          }
+
+          .title {
+            margin: 0;
+            color: var(--editor-fg);
+            font-size: 44px;
+            line-height: 1;
+            font-weight: 760;
+          }
+
+          .source-note {
+            width: 510px;
+            color: var(--gutter-fg);
+            font-size: 16px;
+            line-height: 1.35;
+            text-align: right;
+            text-shadow:
+              0 2px 10px rgba(0, 0, 0, 0.46),
+              0 12px 30px rgba(0, 0, 0, 0.34);
+          }
+
+          .workbench {
+            height: 824px;
+            display: grid;
+            grid-template-columns: 54px 290px 1fr;
+            grid-template-rows: 36px 1fr 26px;
+            overflow: hidden;
+            border: 1px solid var(--sidebar-border);
+            border-radius: 8px;
+            background: var(--editor-bg);
+            box-shadow: 0 34px 90px rgba(0, 0, 0, 0.42);
+            transform: translateZ(0);
+            transform-origin: 82% 50%;
+            transform-style: preserve-3d;
+            will-change: transform;
+          }
+
+          .titlebar {
+            grid-column: 1 / -1;
+            display: grid;
+            grid-template-columns: 120px 1fr 210px;
+            align-items: center;
+            background: var(--title-bg);
+            color: var(--title-fg);
+            border-bottom: 1px solid var(--tab-border);
+            font-size: 12px;
+          }
+
+          .traffic {
+            display: flex;
+            gap: 8px;
+            padding-left: 18px;
+          }
+
+          .traffic span {
+            width: 12px;
+            height: 12px;
+            border-radius: 999px;
+          }
+
+          .traffic span:nth-child(1) {
+            background: #ff5f57;
+          }
+          .traffic span:nth-child(2) {
+            background: #ffbd2e;
+          }
+          .traffic span:nth-child(3) {
+            background: #28c840;
+          }
+
+          .window-title {
+            justify-self: center;
+            opacity: 0.84;
+          }
+
+          .command-center {
+            justify-self: end;
+            width: 176px;
+            height: 22px;
+            margin-right: 16px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border: 1px solid color-mix(in srgb, var(--title-fg), transparent 78%);
+            border-radius: 5px;
+            color: color-mix(in srgb, var(--title-fg), transparent 18%);
+          }
+
+          .activity {
+            grid-row: 2 / 3;
+            background: var(--activity-bg);
+            border-right: 1px solid var(--sidebar-border);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 10px 0;
+            gap: 18px;
+          }
+
+          .activity-icon {
+            width: 28px;
+            height: 28px;
+            color: var(--activity-muted);
+          }
+
+          .activity-icon.active {
+            color: var(--activity-fg);
+            border-left: 2px solid var(--activity-active);
+            padding-left: 4px;
+          }
+
+          .sidebar {
+            grid-row: 2 / 3;
+            background: var(--sidebar-bg);
+            color: var(--sidebar-fg);
+            border-right: 1px solid var(--sidebar-border);
+            display: flex;
+            flex-direction: column;
+            min-width: 0;
+          }
+
+          .sidebar-title {
+            height: 38px;
+            display: flex;
+            align-items: center;
+            padding: 0 20px;
+            color: var(--sidebar-fg);
+            font-size: 11px;
+            text-transform: uppercase;
+          }
+
+          .section-title {
+            height: 24px;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            padding: 0 14px;
+            background: color-mix(in srgb, var(--sidebar-bg), var(--sidebar-fg) 5%);
+            border-top: 1px solid var(--sidebar-border);
+            border-bottom: 1px solid var(--sidebar-border);
+            color: var(--sidebar-fg);
+            font-size: 11px;
+            font-weight: 700;
+          }
+
+          .tree {
+            padding: 8px 0;
+            font-size: 13px;
+            line-height: 24px;
+          }
+
+          .tree-row {
+            height: 24px;
+            display: flex;
+            align-items: center;
+            gap: 7px;
+            padding: 0 10px 0 18px;
+            color: color-mix(in srgb, var(--sidebar-fg), transparent 8%);
+            white-space: nowrap;
+          }
+
+          .tree-row.child {
+            padding-left: 34px;
+          }
+
+          .tree-row.selected {
+            background: color-mix(in srgb, var(--sidebar-fg), transparent 88%);
+            color: var(--sidebar-fg);
+          }
+
+          .editor-area {
+            grid-row: 2 / 3;
+            display: grid;
+            grid-template-rows: 36px 30px 1fr 138px;
+            min-width: 0;
+            background: var(--editor-bg);
+          }
+
+          .tabs {
+            display: flex;
+            background: var(--tab-bg);
+            border-bottom: 1px solid var(--tab-border);
+          }
+
+          .tab {
+            width: 205px;
+            height: 36px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 0 13px;
+            border-right: 1px solid var(--tab-border);
+            background: var(--tab-active-bg);
+            color: var(--tab-active-fg);
+            border-top: 2px solid var(--activity-active);
+            font-size: 13px;
+          }
+
+          .tab.inactive {
+            background: var(--tab-bg);
+            color: var(--tab-inactive-fg);
+            border-top-color: transparent;
+          }
+
+          .breadcrumbs {
+            display: flex;
+            align-items: center;
+            gap: 7px;
+            padding: 0 18px;
+            color: var(--gutter-fg);
+            border-bottom: 1px solid color-mix(in srgb, var(--tab-border), transparent 20%);
+            font-size: 12px;
+          }
+
+          .editor {
+            position: relative;
+            overflow: hidden;
+            background: var(--editor-bg);
+            color: var(--editor-fg);
+            font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+            font-size: 18px;
+            line-height: 1.52;
+          }
+
+          .active-line {
+            position: absolute;
+            left: 0;
+            right: 0;
+            top: 0;
+            height: 28px;
+            background: var(--editor-line);
+            will-change: transform;
+          }
+
+          .code {
+            position: relative;
+            padding: 20px 36px 18px 0;
+          }
+
+          .line {
+            height: 28px;
+            display: grid;
+            grid-template-columns: 72px 1fr;
+            align-items: center;
+          }
+
+          .line-number {
+            padding-right: 18px;
+            color: var(--gutter-fg);
+            text-align: right;
+            user-select: none;
+          }
+
+          .line.is-active .line-number {
+            color: var(--gutter-active-fg);
+          }
+
+          .line-code {
+            white-space: pre;
+          }
+
+          .char {
+            opacity: 0;
+          }
+
+          .tok-comment {
+            color: var(--token-comment);
+          }
+          .tok-keyword {
+            color: var(--token-keyword);
+          }
+          .tok-function {
+            color: var(--token-function);
+          }
+          .tok-string {
+            color: var(--token-string);
+          }
+          .tok-number {
+            color: var(--token-number);
+          }
+          .tok-variable {
+            color: var(--token-variable);
+          }
+          .tok-parameter {
+            color: var(--token-parameter);
+          }
+          .tok-operator {
+            color: var(--token-operator);
+          }
+          .tok-punctuation {
+            color: var(--token-punctuation);
+          }
+          .tok-class-name {
+            color: var(--token-class-name);
+          }
+
+          .caret {
+            position: absolute;
+            left: 0;
+            top: 0;
+            z-index: 3;
+            display: block;
+            width: 2px;
+            height: 22px;
+            background: var(--editor-fg);
+            pointer-events: none;
+            will-change: transform, opacity;
+          }
+
+          .terminal {
+            display: grid;
+            grid-template-rows: 32px 1fr;
+            background: var(--panel-bg);
+            border-top: 1px solid var(--panel-border);
+            color: var(--editor-fg);
+            font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+            font-size: 14px;
+          }
+
+          .panel-tabs {
+            display: flex;
+            align-items: center;
+            gap: 22px;
+            padding: 0 18px;
+            border-bottom: 1px solid var(--panel-border);
+            color: var(--gutter-fg);
+            font-family:
+              Inter,
+              -apple-system,
+              BlinkMacSystemFont,
+              "Segoe UI",
+              sans-serif;
+            font-size: 12px;
+            text-transform: uppercase;
+          }
+
+          .panel-tabs .active {
+            color: var(--editor-fg);
+            border-bottom: 1px solid var(--activity-active);
+            height: 32px;
+            display: flex;
+            align-items: center;
+          }
+
+          .terminal-body {
+            padding: 12px 20px;
+            color: var(--editor-fg);
+            line-height: 1.8;
+          }
+
+          .prompt {
+            color: var(--token-function);
+          }
+
+          .statusbar {
+            grid-column: 1 / -1;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            background: var(--status-bg);
+            color: var(--status-fg);
+            border-top: 1px solid var(--status-border);
+            font-size: 12px;
+          }
+
+          .status-left,
+          .status-right {
+            display: flex;
+            align-items: center;
+            gap: 18px;
+            padding: 0 12px;
+          }
+
+          .remote {
+            align-self: stretch;
+            display: flex;
+            align-items: center;
+            padding: 0 12px;
+            margin-left: -12px;
+            background: var(--status-remote-bg, var(--activity-active));
+            color: var(--status-remote-fg, #ffffff);
+          }
+
+          svg {
+            display: block;
+          }
+        </style>
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (() => {
+            const codeLines = [
+              [{ text: "# A small functional toolkit", token: "comment" }],
+              [
+                { text: "def", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "pluck_deep", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "key", token: "parameter" },
+                { text: "):", token: "punctuation" },
+              ],
+              [
+                { text: "    ", token: "plain" },
+                { text: "return", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "obj", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "reduce", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "acc", token: "parameter" },
+                { text: ", ", token: "punctuation" },
+                { text: "k", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "acc", token: "variable" },
+                { text: "[", token: "punctuation" },
+                { text: "k", token: "variable" },
+                { text: "]", token: "punctuation" },
+                { text: ", ", token: "punctuation" },
+                { text: "key", token: "variable" },
+                { text: ".split", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "'.'", token: "string" },
+                { text: "), ", token: "punctuation" },
+                { text: "obj", token: "variable" },
+                { text: ")", token: "punctuation" },
+              ],
+              [],
+              [
+                { text: "def", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "compose", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "*", token: "operator" },
+                { text: "fns", token: "parameter" },
+                { text: "):", token: "punctuation" },
+              ],
+              [
+                { text: "    ", token: "plain" },
+                { text: "return", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "res", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "reduce", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "acc", token: "parameter" },
+                { text: ", ", token: "punctuation" },
+                { text: "fn", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "fn", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "acc", token: "variable" },
+                { text: "), ", token: "punctuation" },
+                { text: "fns", token: "variable" },
+                { text: ", ", token: "punctuation" },
+                { text: "res", token: "variable" },
+                { text: ")", token: "punctuation" },
+              ],
+              [],
+              [
+                { text: "def", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "unfold", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "f", token: "parameter" },
+                { text: ", ", token: "punctuation" },
+                { text: "seed", token: "parameter" },
+                { text: "):", token: "punctuation" },
+              ],
+              [
+                { text: "    ", token: "plain" },
+                { text: '"""Build a list by repeatedly applying f to a seed."""', token: "string" },
+              ],
+              [
+                { text: "    acc", token: "variable" },
+                { text: " = ", token: "operator" },
+                { text: "[]", token: "punctuation" },
+              ],
+              [
+                { text: "    while", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "True", token: "className" },
+                { text: ":", token: "punctuation" },
+              ],
+              [
+                { text: "        result", token: "variable" },
+                { text: " = ", token: "operator" },
+                { text: "f", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "seed", token: "variable" },
+                { text: ")", token: "punctuation" },
+              ],
+              [
+                { text: "        if", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "result", token: "variable" },
+                { text: " is ", token: "keyword" },
+                { text: "None", token: "className" },
+                { text: ":", token: "punctuation" },
+              ],
+              [
+                { text: "            return", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "acc", token: "variable" },
+              ],
+              [
+                { text: "        acc", token: "variable" },
+                { text: ".append", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "result", token: "variable" },
+                { text: "[", token: "punctuation" },
+                { text: "0", token: "number" },
+                { text: "])", token: "punctuation" },
+              ],
+              [
+                { text: "        seed", token: "variable" },
+                { text: " = ", token: "operator" },
+                { text: "result", token: "variable" },
+                { text: "[", token: "punctuation" },
+                { text: "1", token: "number" },
+                { text: "]", token: "punctuation" },
+              ],
+              [],
+            ];
+
+            const fallback = {
+              "activityBar.background": "#181818",
+              "activityBar.foreground": "#d7d7d7",
+              "activityBar.inactiveForeground": "#868686",
+              "activityBar.activeBorder": "#0078d4",
+              "sideBar.background": "#181818",
+              "sideBar.foreground": "#cccccc",
+              "sideBar.border": "#2b2b2b",
+              "tab.activeBackground": "#1f1f1f",
+              "tab.activeForeground": "#ffffff",
+              "tab.inactiveBackground": "#181818",
+              "tab.inactiveForeground": "#9d9d9d",
+              "tab.border": "#2b2b2b",
+              "editor.background": "#1f1f1f",
+              "editor.foreground": "#cccccc",
+              "editor.lineHighlightBackground": "#ffffff0a",
+              "editorLineNumber.foreground": "#6e7681",
+              "editorLineNumber.activeForeground": "#cccccc",
+              "panel.background": "#181818",
+              "panel.border": "#2b2b2b",
+              "statusBar.background": "#181818",
+              "statusBar.foreground": "#cccccc",
+              "statusBar.border": "#2b2b2b",
+              "titleBar.activeBackground": "#181818",
+              "titleBar.activeForeground": "#cccccc",
+            };
+
+            function color(theme, key) {
+              return theme.colors[key] || fallback[key] || theme.colors.foreground || "#cccccc";
+            }
+
+            function solarizedGrey(theme) {
+              return (
+                theme.colors["tab.inactiveForeground"] ||
+                theme.colors["editor.foreground"] ||
+                "#586E75"
+              );
+            }
+
+            function setVar(root, name, value) {
+              root.style.setProperty(name, value);
+            }
+
+            function applyTheme(root, theme) {
+              const solarizedUiGrey = theme.id === "solarized-light" ? solarizedGrey(theme) : null;
+              setVar(root, "--activity-bg", color(theme, "activityBar.background"));
+              setVar(
+                root,
+                "--activity-fg",
+                solarizedUiGrey || color(theme, "activityBar.foreground"),
+              );
+              setVar(
+                root,
+                "--activity-muted",
+                solarizedUiGrey || color(theme, "activityBar.inactiveForeground"),
+              );
+              setVar(root, "--activity-active", color(theme, "activityBar.activeBorder"));
+              setVar(root, "--sidebar-bg", color(theme, "sideBar.background"));
+              setVar(root, "--sidebar-fg", solarizedUiGrey || color(theme, "sideBar.foreground"));
+              setVar(root, "--sidebar-border", color(theme, "sideBar.border"));
+              setVar(root, "--tab-bg", color(theme, "tab.inactiveBackground"));
+              setVar(root, "--tab-active-bg", color(theme, "tab.activeBackground"));
+              setVar(
+                root,
+                "--tab-active-fg",
+                solarizedUiGrey || color(theme, "tab.activeForeground"),
+              );
+              setVar(
+                root,
+                "--tab-inactive-fg",
+                solarizedUiGrey || color(theme, "tab.inactiveForeground"),
+              );
+              setVar(root, "--tab-border", color(theme, "tab.border"));
+              setVar(root, "--editor-bg", color(theme, "editor.background"));
+              setVar(root, "--editor-fg", color(theme, "editor.foreground"));
+              setVar(root, "--editor-line", color(theme, "editor.lineHighlightBackground"));
+              setVar(root, "--gutter-fg", color(theme, "editorLineNumber.foreground"));
+              setVar(root, "--gutter-active-fg", color(theme, "editorLineNumber.activeForeground"));
+              setVar(root, "--panel-bg", color(theme, "panel.background"));
+              setVar(root, "--panel-border", color(theme, "panel.border"));
+              setVar(root, "--status-bg", color(theme, "statusBar.background"));
+              setVar(root, "--status-fg", color(theme, "statusBar.foreground"));
+              setVar(root, "--status-border", color(theme, "statusBar.border"));
+              setVar(root, "--status-remote-bg", color(theme, "statusBarItem.remoteBackground"));
+              setVar(
+                root,
+                "--status-remote-fg",
+                solarizedUiGrey || color(theme, "statusBarItem.remoteForeground"),
+              );
+              setVar(root, "--title-bg", color(theme, "titleBar.activeBackground"));
+              setVar(
+                root,
+                "--title-fg",
+                solarizedUiGrey || color(theme, "titleBar.activeForeground"),
+              );
+              setVar(root, "--token-comment", theme.tokens.comment);
+              setVar(root, "--token-keyword", theme.tokens.keyword);
+              setVar(root, "--token-function", theme.tokens.function);
+              setVar(root, "--token-string", theme.tokens.string);
+              setVar(root, "--token-number", theme.tokens.number);
+              setVar(root, "--token-variable", theme.tokens.variable);
+              setVar(root, "--token-parameter", theme.tokens.parameter);
+              setVar(root, "--token-operator", theme.tokens.operator);
+              setVar(root, "--token-punctuation", theme.tokens.punctuation);
+              setVar(root, "--token-class-name", theme.tokens.className);
+            }
+
+            function renderCode(root) {
+              const code = root.querySelector(".code");
+              codeLines.forEach((segments, index) => {
+                const line = document.createElement("div");
+                line.className = "line";
+                line.dataset.lineIndex = String(index);
+
+                const lineNumber = document.createElement("span");
+                lineNumber.className = "line-number";
+                lineNumber.textContent = String(index + 1);
+                line.appendChild(lineNumber);
+
+                const lineCode = document.createElement("span");
+                lineCode.className = "line-code";
+                segments.forEach((segment) => {
+                  [...segment.text].forEach((char) => {
+                    const span = document.createElement("span");
+                    span.className =
+                      segment.token === "plain"
+                        ? "char"
+                        : "char tok-" +
+                          segment.token.replace(/[A-Z]/g, (match) => "-" + match.toLowerCase());
+                    span.dataset.lineIndex = String(index);
+                    span.textContent = char;
+                    lineCode.appendChild(span);
+                  });
+                });
+                line.appendChild(lineCode);
+                code.appendChild(line);
+              });
+
+              const caret = document.createElement("span");
+              caret.className = "caret";
+              root.querySelector(".editor").appendChild(caret);
+            }
+
+            function caretPointForElement(editor, el) {
+              const editorBox = editor.getBoundingClientRect();
+              const charBox = el.getBoundingClientRect();
+              return {
+                x: charBox.right - editorBox.left + 2,
+                y: charBox.top - editorBox.top + 3,
+              };
+            }
+
+            function caretPointForLineStart(editor, line) {
+              const editorBox = editor.getBoundingClientRect();
+              const lineBox = line.getBoundingClientRect();
+              const codeBox = line.querySelector(".line-code").getBoundingClientRect();
+              return {
+                x: codeBox.left - editorBox.left,
+                y: lineBox.top - editorBox.top + 3,
+              };
+            }
+
+            function lineHighlightY(editor, line) {
+              const editorBox = editor.getBoundingClientRect();
+              const lineBox = line.getBoundingClientRect();
+              return lineBox.top - editorBox.top;
+            }
+
+            function buildTimeline(root, compositionId) {
+              const tl = gsap.timeline({ paused: true });
+              const editor = root.querySelector(".editor");
+              const caret = root.querySelector(".caret");
+              const activeLine = root.querySelector(".active-line");
+              const lineEls = gsap.utils.toArray(root.querySelectorAll(".line"));
+              const lineStartTimes = [];
+              const charSchedule = [];
+              let cursorTime = 0.95;
+
+              lineEls.forEach((line, lineIndex) => {
+                const lineChars = gsap.utils.toArray(line.querySelectorAll(".char"));
+                lineStartTimes[lineIndex] = cursorTime;
+                lineChars.forEach((char, charIndex) => {
+                  charSchedule.push({ char, time: cursorTime + charIndex * 0.012 });
+                });
+                cursorTime += Math.max(lineChars.length * 0.012, 0.08) + 0.045;
+              });
+
+              gsap.set(activeLine, { y: lineHighlightY(editor, lineEls[0]) });
+              gsap.set(caret, caretPointForLineStart(editor, lineEls[0]));
+
+              tl.from(
+                root.querySelector(".header"),
+                { y: 24, opacity: 0, duration: 0.45, ease: "power3.out" },
+                0,
+              );
+              tl.from(
+                root.querySelector(".workbench"),
+                { y: 42, opacity: 0, scale: 0.986, duration: 0.58, ease: "power3.out" },
+                0.1,
+              );
+              tl.from(activeLine, { opacity: 0, duration: 0.22, ease: "power2.out" }, 0.74);
+              lineStartTimes.forEach((time, lineIndex) => {
+                const line = lineEls[lineIndex];
+                tl.set(activeLine, { y: lineHighlightY(editor, line) }, time);
+                tl.set(caret, caretPointForLineStart(editor, line), time);
+                tl.call(
+                  () => {
+                    lineEls.forEach((item) => item.classList.toggle("is-active", item === line));
+                  },
+                  [],
+                  time,
+                );
+              });
+              charSchedule.forEach(({ char, time }) => {
+                tl.set(char, { opacity: 1 }, time);
+                tl.set(caret, caretPointForElement(editor, char), time + 0.002);
+              });
+              tl.to(
+                root.querySelector(".caret"),
+                { opacity: 0, duration: 0.34, repeat: 25, yoyo: true, ease: "steps(1)" },
+                0.95,
+              );
+              tl.from(
+                root.querySelector(".terminal"),
+                { y: 140, opacity: 0, duration: 0.56, ease: "power3.out" },
+                7.55,
+              );
+              tl.from(
+                root.querySelector(".terminal-body").children,
+                { opacity: 0, y: 8, duration: 0.24, stagger: 0.16, ease: "power2.out" },
+                8.05,
+              );
+              tl.to(
+                root.querySelector(".workbench"),
+                { rotateY: -10.5, z: 74, duration: 0.72, ease: "power2.inOut" },
+                9.35,
+              );
+              tl.to(
+                root.querySelector(".workbench"),
+                { rotateY: 0, z: 0, duration: 0.62, ease: "power2.inOut" },
+                10.08,
+              );
+
+              window.__timelines = window.__timelines || {};
+              window.__timelines[compositionId] = tl;
+
+              const previewTime = new URLSearchParams(window.location.search).get("t");
+              if (previewTime !== null) {
+                tl.time(Number(previewTime));
+              }
+            }
+
+            window.createVSCodeThemeComposition = (compositionId, themeOrId) => {
+              const root =
+                document.querySelector(
+                  '[data-composition-id="' + compositionId + '"] .vscode-theme-scene',
+                ) ||
+                document.querySelector(
+                  '.vscode-theme-scene[data-composition-id="' + compositionId + '"]',
+                ) ||
+                document.querySelector('[data-composition-id="' + compositionId + '"]');
+              const theme =
+                typeof themeOrId === "string"
+                  ? window.VSCODE_THEME_REGISTRY.find((item) => item.id === themeOrId)
+                  : themeOrId;
+              if (!root || !theme) return;
+              root.querySelector(".theme-label").textContent = theme.label;
+              root.querySelector(".theme-source").textContent = theme.sourceFile;
+              applyTheme(root, theme);
+              renderCode(root);
+              buildTimeline(root, compositionId);
+            };
+          })();
+        </script>
+        <script>
+          window.__timelines = window.__timelines || {};
+          window.__timelines["vscode-solarized-light"] =
+            window.__timelines["vscode-solarized-light"] || gsap.timeline({ paused: true });
+          window.createVSCodeThemeComposition("vscode-solarized-light", {
+            id: "solarized-light",
+            label: "Solarized Light",
+            sourceFile: "solarized-light-color-theme.json",
+            uiTheme: "vs",
+            colors: {
+              "activityBar.background": "#DDD6C1",
+              "activityBar.foreground": "#584c27",
+              "editor.background": "#FDF6E3",
+              "editor.foreground": "#657B83",
+              "editor.lineHighlightBackground": "#EEE8D5",
+              "editor.selectionBackground": "#EEE8D5",
+              "editorGroup.border": "#DDD6C1",
+              "editorGroupHeader.tabsBackground": "#D9D2C2",
+              "editorLineNumber.activeForeground": "#567983",
+              "panel.border": "#DDD6C1",
+              "sideBar.background": "#EEE8D5",
+              "sideBarTitle.foreground": "#586E75",
+              "statusBar.background": "#EEE8D5",
+              "statusBar.foreground": "#586E75",
+              "statusBarItem.remoteBackground": "#AC9D57",
+              "tab.activeBackground": "#FDF6E3",
+              "tab.border": "#DDD6C1",
+              "tab.inactiveBackground": "#D3CBB7",
+              "tab.inactiveForeground": "#586E75",
+              "terminal.background": "#FDF6E3",
+              "titleBar.activeBackground": "#EEE8D5",
+            },
+            tokens: {
+              comment: "#93A1A1",
+              keyword: "#CB4B16",
+              function: "#268BD2",
+              string: "#DC322F",
+              number: "#D33682",
+              variable: "#268BD2",
+              parameter: "#9CDCFE",
+              operator: "#859900",
+              punctuation: "#DC322F",
+              className: "#CB4B16",
+            },
+          });
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/code-snippet-visual-studio-dark/background.jpeg b/docs/public/catalog/blocks/code-snippet-visual-studio-dark/background.jpeg
new file mode 100644
index 0000000000..1f3e465cd2
Binary files /dev/null and b/docs/public/catalog/blocks/code-snippet-visual-studio-dark/background.jpeg differ
diff --git a/docs/public/catalog/blocks/code-snippet-visual-studio-dark/code-snippet-visual-studio-dark.html b/docs/public/catalog/blocks/code-snippet-visual-studio-dark/code-snippet-visual-studio-dark.html
new file mode 100644
index 0000000000..437dc16874
--- /dev/null
+++ b/docs/public/catalog/blocks/code-snippet-visual-studio-dark/code-snippet-visual-studio-dark.html
@@ -0,0 +1,1055 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Visual Studio Dark VS Code Theme Composition</title>
+  </head>
+  <body>
+    <template id="vscode-visual-studio-dark-template">
+      <div
+        class="vscode-theme-scene"
+        data-composition-id="vscode-visual-studio-dark"
+        data-width="1920"
+        data-height="1080"
+      >
+        <main class="scene-content">
+          <section class="header">
+            <div>
+              <p class="kicker">Official VS Code built-in theme</p>
+              <h1 class="title"><span class="theme-label">Visual Studio Dark</span></h1>
+            </div>
+            <p class="source-note">
+              Typing `functional_toolkit.py` with workbench colors from
+              <span class="theme-source">dark_vs.json</span>.
+            </p>
+          </section>
+
+          <section class="workbench">
+            <div class="titlebar">
+              <div class="traffic"><span></span><span></span><span></span></div>
+              <div class="window-title">functional-toolkit - Visual Studio Code</div>
+              <div class="command-center">Search</div>
+            </div>
+
+            <aside class="activity" aria-label="Activity bar">
+              <svg class="activity-icon active" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="currentColor"
+                  d="M4 4h7v7H4V4Zm9 0h7v7h-7V4ZM4 13h7v7H4v-7Zm9 0h7v7h-7v-7Z"
+                />
+              </svg>
+              <svg class="activity-icon" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  d="m21 21-5.2-5.2M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Z"
+                />
+              </svg>
+              <svg class="activity-icon" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  d="M8 18 3 12l5-6m8 12 5-6-5-6"
+                />
+              </svg>
+              <svg class="activity-icon" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  d="M12 3v18m0-18 6 6m-6-6L6 9m6 12 6-6m-6 6-6-6"
+                />
+              </svg>
+            </aside>
+
+            <aside class="sidebar">
+              <div class="sidebar-title">Explorer</div>
+              <div class="section-title">⌄ Functional Toolkit</div>
+              <div class="tree">
+                <div class="tree-row">⌄ src</div>
+                <div class="tree-row child selected">◇ functional_toolkit.py</div>
+                <div class="tree-row child">◇ test_toolkit.py</div>
+                <div class="tree-row">◇ pyproject.toml</div>
+                <div class="tree-row">◇ README.md</div>
+              </div>
+            </aside>
+
+            <section class="editor-area">
+              <div class="tabs">
+                <div class="tab">◇ functional_toolkit.py</div>
+                <div class="tab inactive">README.md</div>
+              </div>
+              <div class="breadcrumbs">functional-toolkit › src › functional_toolkit.py</div>
+              <div class="editor">
+                <div class="active-line"></div>
+                <div class="code"></div>
+              </div>
+              <div class="terminal">
+                <div class="panel-tabs">
+                  <span class="active">Terminal</span><span>Problems</span><span>Output</span>
+                </div>
+                <div class="terminal-body">
+                  <div><span class="prompt">functional-toolkit %</span> python -m pytest</div>
+                  <div>collected 3 items</div>
+                  <div>tests/test_toolkit.py ... <span class="tok-comment">passed</span></div>
+                </div>
+              </div>
+            </section>
+
+            <footer class="statusbar">
+              <div class="status-left">
+                <span class="remote">main</span>
+                <span>0 errors</span>
+                <span>0 warnings</span>
+              </div>
+              <div class="status-right">
+                <span>Ln 17, Col 1</span>
+                <span>Spaces: 4</span>
+                <span>UTF-8</span>
+                <span>Python 3.12</span>
+              </div>
+            </footer>
+          </section>
+        </main>
+        <style>
+          * {
+            box-sizing: border-box;
+            letter-spacing: 0;
+          }
+
+          html,
+          body {
+            margin: 0;
+            width: 1920px;
+            height: 1080px;
+            overflow: hidden;
+            background: #000000;
+            font-family:
+              Inter,
+              -apple-system,
+              BlinkMacSystemFont,
+              "Segoe UI",
+              sans-serif;
+          }
+
+          .vscode-theme-scene {
+            --activity-bg: #181818;
+            --activity-fg: #d7d7d7;
+            --activity-muted: #868686;
+            --activity-active: #0078d4;
+            --sidebar-bg: #181818;
+            --sidebar-fg: #cccccc;
+            --sidebar-border: #2b2b2b;
+            --tab-bg: #181818;
+            --tab-active-bg: #1f1f1f;
+            --tab-active-fg: #ffffff;
+            --tab-inactive-fg: #9d9d9d;
+            --tab-border: #2b2b2b;
+            --editor-bg: #1f1f1f;
+            --editor-fg: #cccccc;
+            --editor-line: rgba(255, 255, 255, 0.04);
+            --gutter-fg: #6e7681;
+            --gutter-active-fg: #cccccc;
+            --panel-bg: #181818;
+            --panel-border: #2b2b2b;
+            --status-bg: #181818;
+            --status-fg: #cccccc;
+            --status-border: #2b2b2b;
+            --title-bg: #181818;
+            --title-fg: #cccccc;
+            --token-comment: #6a9955;
+            --token-keyword: #c586c0;
+            --token-function: #dcdcaa;
+            --token-string: #ce9178;
+            --token-number: #b5cea8;
+            --token-variable: #9cdcfe;
+            --token-parameter: #9cdcfe;
+            --token-operator: #d4d4d4;
+            --token-punctuation: #d4d4d4;
+            --token-class-name: #4ec9b0;
+            position: relative;
+            width: 1920px;
+            height: 1080px;
+            overflow: hidden;
+            background:
+              linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.32)),
+              url("../assets/background.jpeg") center / cover no-repeat;
+            color: var(--editor-fg);
+          }
+
+          .scene-content {
+            position: relative;
+            z-index: 1;
+            width: 100%;
+            height: 100%;
+            padding: 54px 70px 92px;
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+            perspective: 2200px;
+            perspective-origin: 56% 52%;
+          }
+
+          .header {
+            display: flex;
+            align-items: end;
+            justify-content: space-between;
+            min-height: 66px;
+            text-shadow:
+              0 2px 12px rgba(0, 0, 0, 0.42),
+              0 14px 34px rgba(0, 0, 0, 0.32);
+          }
+
+          .kicker {
+            margin: 0 0 7px;
+            color: var(--gutter-fg);
+            font-size: 15px;
+            font-weight: 650;
+            text-transform: uppercase;
+            text-shadow:
+              0 2px 8px rgba(0, 0, 0, 0.48),
+              0 10px 26px rgba(0, 0, 0, 0.36);
+          }
+
+          .title {
+            margin: 0;
+            color: var(--editor-fg);
+            font-size: 44px;
+            line-height: 1;
+            font-weight: 760;
+          }
+
+          .source-note {
+            width: 510px;
+            color: var(--gutter-fg);
+            font-size: 16px;
+            line-height: 1.35;
+            text-align: right;
+            text-shadow:
+              0 2px 10px rgba(0, 0, 0, 0.46),
+              0 12px 30px rgba(0, 0, 0, 0.34);
+          }
+
+          .workbench {
+            height: 824px;
+            display: grid;
+            grid-template-columns: 54px 290px 1fr;
+            grid-template-rows: 36px 1fr 26px;
+            overflow: hidden;
+            border: 1px solid var(--sidebar-border);
+            border-radius: 8px;
+            background: var(--editor-bg);
+            box-shadow: 0 34px 90px rgba(0, 0, 0, 0.42);
+            transform: translateZ(0);
+            transform-origin: 82% 50%;
+            transform-style: preserve-3d;
+            will-change: transform;
+          }
+
+          .titlebar {
+            grid-column: 1 / -1;
+            display: grid;
+            grid-template-columns: 120px 1fr 210px;
+            align-items: center;
+            background: var(--title-bg);
+            color: var(--title-fg);
+            border-bottom: 1px solid var(--tab-border);
+            font-size: 12px;
+          }
+
+          .traffic {
+            display: flex;
+            gap: 8px;
+            padding-left: 18px;
+          }
+
+          .traffic span {
+            width: 12px;
+            height: 12px;
+            border-radius: 999px;
+          }
+
+          .traffic span:nth-child(1) {
+            background: #ff5f57;
+          }
+          .traffic span:nth-child(2) {
+            background: #ffbd2e;
+          }
+          .traffic span:nth-child(3) {
+            background: #28c840;
+          }
+
+          .window-title {
+            justify-self: center;
+            opacity: 0.84;
+          }
+
+          .command-center {
+            justify-self: end;
+            width: 176px;
+            height: 22px;
+            margin-right: 16px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border: 1px solid color-mix(in srgb, var(--title-fg), transparent 78%);
+            border-radius: 5px;
+            color: color-mix(in srgb, var(--title-fg), transparent 18%);
+          }
+
+          .activity {
+            grid-row: 2 / 3;
+            background: var(--activity-bg);
+            border-right: 1px solid var(--sidebar-border);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 10px 0;
+            gap: 18px;
+          }
+
+          .activity-icon {
+            width: 28px;
+            height: 28px;
+            color: var(--activity-muted);
+          }
+
+          .activity-icon.active {
+            color: var(--activity-fg);
+            border-left: 2px solid var(--activity-active);
+            padding-left: 4px;
+          }
+
+          .sidebar {
+            grid-row: 2 / 3;
+            background: var(--sidebar-bg);
+            color: var(--sidebar-fg);
+            border-right: 1px solid var(--sidebar-border);
+            display: flex;
+            flex-direction: column;
+            min-width: 0;
+          }
+
+          .sidebar-title {
+            height: 38px;
+            display: flex;
+            align-items: center;
+            padding: 0 20px;
+            color: var(--sidebar-fg);
+            font-size: 11px;
+            text-transform: uppercase;
+          }
+
+          .section-title {
+            height: 24px;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            padding: 0 14px;
+            background: color-mix(in srgb, var(--sidebar-bg), var(--sidebar-fg) 5%);
+            border-top: 1px solid var(--sidebar-border);
+            border-bottom: 1px solid var(--sidebar-border);
+            color: var(--sidebar-fg);
+            font-size: 11px;
+            font-weight: 700;
+          }
+
+          .tree {
+            padding: 8px 0;
+            font-size: 13px;
+            line-height: 24px;
+          }
+
+          .tree-row {
+            height: 24px;
+            display: flex;
+            align-items: center;
+            gap: 7px;
+            padding: 0 10px 0 18px;
+            color: color-mix(in srgb, var(--sidebar-fg), transparent 8%);
+            white-space: nowrap;
+          }
+
+          .tree-row.child {
+            padding-left: 34px;
+          }
+
+          .tree-row.selected {
+            background: color-mix(in srgb, var(--sidebar-fg), transparent 88%);
+            color: var(--sidebar-fg);
+          }
+
+          .editor-area {
+            grid-row: 2 / 3;
+            display: grid;
+            grid-template-rows: 36px 30px 1fr 138px;
+            min-width: 0;
+            background: var(--editor-bg);
+          }
+
+          .tabs {
+            display: flex;
+            background: var(--tab-bg);
+            border-bottom: 1px solid var(--tab-border);
+          }
+
+          .tab {
+            width: 205px;
+            height: 36px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 0 13px;
+            border-right: 1px solid var(--tab-border);
+            background: var(--tab-active-bg);
+            color: var(--tab-active-fg);
+            border-top: 2px solid var(--activity-active);
+            font-size: 13px;
+          }
+
+          .tab.inactive {
+            background: var(--tab-bg);
+            color: var(--tab-inactive-fg);
+            border-top-color: transparent;
+          }
+
+          .breadcrumbs {
+            display: flex;
+            align-items: center;
+            gap: 7px;
+            padding: 0 18px;
+            color: var(--gutter-fg);
+            border-bottom: 1px solid color-mix(in srgb, var(--tab-border), transparent 20%);
+            font-size: 12px;
+          }
+
+          .editor {
+            position: relative;
+            overflow: hidden;
+            background: var(--editor-bg);
+            color: var(--editor-fg);
+            font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+            font-size: 18px;
+            line-height: 1.52;
+          }
+
+          .active-line {
+            position: absolute;
+            left: 0;
+            right: 0;
+            top: 0;
+            height: 28px;
+            background: var(--editor-line);
+            will-change: transform;
+          }
+
+          .code {
+            position: relative;
+            padding: 20px 36px 18px 0;
+          }
+
+          .line {
+            height: 28px;
+            display: grid;
+            grid-template-columns: 72px 1fr;
+            align-items: center;
+          }
+
+          .line-number {
+            padding-right: 18px;
+            color: var(--gutter-fg);
+            text-align: right;
+            user-select: none;
+          }
+
+          .line.is-active .line-number {
+            color: var(--gutter-active-fg);
+          }
+
+          .line-code {
+            white-space: pre;
+          }
+
+          .char {
+            opacity: 0;
+          }
+
+          .tok-comment {
+            color: var(--token-comment);
+          }
+          .tok-keyword {
+            color: var(--token-keyword);
+          }
+          .tok-function {
+            color: var(--token-function);
+          }
+          .tok-string {
+            color: var(--token-string);
+          }
+          .tok-number {
+            color: var(--token-number);
+          }
+          .tok-variable {
+            color: var(--token-variable);
+          }
+          .tok-parameter {
+            color: var(--token-parameter);
+          }
+          .tok-operator {
+            color: var(--token-operator);
+          }
+          .tok-punctuation {
+            color: var(--token-punctuation);
+          }
+          .tok-class-name {
+            color: var(--token-class-name);
+          }
+
+          .caret {
+            position: absolute;
+            left: 0;
+            top: 0;
+            z-index: 3;
+            display: block;
+            width: 2px;
+            height: 22px;
+            background: var(--editor-fg);
+            pointer-events: none;
+            will-change: transform, opacity;
+          }
+
+          .terminal {
+            display: grid;
+            grid-template-rows: 32px 1fr;
+            background: var(--panel-bg);
+            border-top: 1px solid var(--panel-border);
+            color: var(--editor-fg);
+            font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+            font-size: 14px;
+          }
+
+          .panel-tabs {
+            display: flex;
+            align-items: center;
+            gap: 22px;
+            padding: 0 18px;
+            border-bottom: 1px solid var(--panel-border);
+            color: var(--gutter-fg);
+            font-family:
+              Inter,
+              -apple-system,
+              BlinkMacSystemFont,
+              "Segoe UI",
+              sans-serif;
+            font-size: 12px;
+            text-transform: uppercase;
+          }
+
+          .panel-tabs .active {
+            color: var(--editor-fg);
+            border-bottom: 1px solid var(--activity-active);
+            height: 32px;
+            display: flex;
+            align-items: center;
+          }
+
+          .terminal-body {
+            padding: 12px 20px;
+            color: var(--editor-fg);
+            line-height: 1.8;
+          }
+
+          .prompt {
+            color: var(--token-function);
+          }
+
+          .statusbar {
+            grid-column: 1 / -1;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            background: var(--status-bg);
+            color: var(--status-fg);
+            border-top: 1px solid var(--status-border);
+            font-size: 12px;
+          }
+
+          .status-left,
+          .status-right {
+            display: flex;
+            align-items: center;
+            gap: 18px;
+            padding: 0 12px;
+          }
+
+          .remote {
+            align-self: stretch;
+            display: flex;
+            align-items: center;
+            padding: 0 12px;
+            margin-left: -12px;
+            background: var(--status-remote-bg, var(--activity-active));
+            color: var(--status-remote-fg, #ffffff);
+          }
+
+          svg {
+            display: block;
+          }
+        </style>
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (() => {
+            const codeLines = [
+              [{ text: "# A small functional toolkit", token: "comment" }],
+              [
+                { text: "def", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "pluck_deep", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "key", token: "parameter" },
+                { text: "):", token: "punctuation" },
+              ],
+              [
+                { text: "    ", token: "plain" },
+                { text: "return", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "obj", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "reduce", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "acc", token: "parameter" },
+                { text: ", ", token: "punctuation" },
+                { text: "k", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "acc", token: "variable" },
+                { text: "[", token: "punctuation" },
+                { text: "k", token: "variable" },
+                { text: "]", token: "punctuation" },
+                { text: ", ", token: "punctuation" },
+                { text: "key", token: "variable" },
+                { text: ".split", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "'.'", token: "string" },
+                { text: "), ", token: "punctuation" },
+                { text: "obj", token: "variable" },
+                { text: ")", token: "punctuation" },
+              ],
+              [],
+              [
+                { text: "def", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "compose", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "*", token: "operator" },
+                { text: "fns", token: "parameter" },
+                { text: "):", token: "punctuation" },
+              ],
+              [
+                { text: "    ", token: "plain" },
+                { text: "return", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "res", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "reduce", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "acc", token: "parameter" },
+                { text: ", ", token: "punctuation" },
+                { text: "fn", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "fn", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "acc", token: "variable" },
+                { text: "), ", token: "punctuation" },
+                { text: "fns", token: "variable" },
+                { text: ", ", token: "punctuation" },
+                { text: "res", token: "variable" },
+                { text: ")", token: "punctuation" },
+              ],
+              [],
+              [
+                { text: "def", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "unfold", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "f", token: "parameter" },
+                { text: ", ", token: "punctuation" },
+                { text: "seed", token: "parameter" },
+                { text: "):", token: "punctuation" },
+              ],
+              [
+                { text: "    ", token: "plain" },
+                { text: '"""Build a list by repeatedly applying f to a seed."""', token: "string" },
+              ],
+              [
+                { text: "    acc", token: "variable" },
+                { text: " = ", token: "operator" },
+                { text: "[]", token: "punctuation" },
+              ],
+              [
+                { text: "    while", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "True", token: "className" },
+                { text: ":", token: "punctuation" },
+              ],
+              [
+                { text: "        result", token: "variable" },
+                { text: " = ", token: "operator" },
+                { text: "f", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "seed", token: "variable" },
+                { text: ")", token: "punctuation" },
+              ],
+              [
+                { text: "        if", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "result", token: "variable" },
+                { text: " is ", token: "keyword" },
+                { text: "None", token: "className" },
+                { text: ":", token: "punctuation" },
+              ],
+              [
+                { text: "            return", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "acc", token: "variable" },
+              ],
+              [
+                { text: "        acc", token: "variable" },
+                { text: ".append", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "result", token: "variable" },
+                { text: "[", token: "punctuation" },
+                { text: "0", token: "number" },
+                { text: "])", token: "punctuation" },
+              ],
+              [
+                { text: "        seed", token: "variable" },
+                { text: " = ", token: "operator" },
+                { text: "result", token: "variable" },
+                { text: "[", token: "punctuation" },
+                { text: "1", token: "number" },
+                { text: "]", token: "punctuation" },
+              ],
+              [],
+            ];
+
+            const fallback = {
+              "activityBar.background": "#181818",
+              "activityBar.foreground": "#d7d7d7",
+              "activityBar.inactiveForeground": "#868686",
+              "activityBar.activeBorder": "#0078d4",
+              "sideBar.background": "#181818",
+              "sideBar.foreground": "#cccccc",
+              "sideBar.border": "#2b2b2b",
+              "tab.activeBackground": "#1f1f1f",
+              "tab.activeForeground": "#ffffff",
+              "tab.inactiveBackground": "#181818",
+              "tab.inactiveForeground": "#9d9d9d",
+              "tab.border": "#2b2b2b",
+              "editor.background": "#1f1f1f",
+              "editor.foreground": "#cccccc",
+              "editor.lineHighlightBackground": "#ffffff0a",
+              "editorLineNumber.foreground": "#6e7681",
+              "editorLineNumber.activeForeground": "#cccccc",
+              "panel.background": "#181818",
+              "panel.border": "#2b2b2b",
+              "statusBar.background": "#181818",
+              "statusBar.foreground": "#cccccc",
+              "statusBar.border": "#2b2b2b",
+              "titleBar.activeBackground": "#181818",
+              "titleBar.activeForeground": "#cccccc",
+            };
+
+            function color(theme, key) {
+              return theme.colors[key] || fallback[key] || theme.colors.foreground || "#cccccc";
+            }
+
+            function solarizedGrey(theme) {
+              return (
+                theme.colors["tab.inactiveForeground"] ||
+                theme.colors["editor.foreground"] ||
+                "#586E75"
+              );
+            }
+
+            function setVar(root, name, value) {
+              root.style.setProperty(name, value);
+            }
+
+            function applyTheme(root, theme) {
+              const solarizedUiGrey = theme.id === "solarized-light" ? solarizedGrey(theme) : null;
+              setVar(root, "--activity-bg", color(theme, "activityBar.background"));
+              setVar(
+                root,
+                "--activity-fg",
+                solarizedUiGrey || color(theme, "activityBar.foreground"),
+              );
+              setVar(
+                root,
+                "--activity-muted",
+                solarizedUiGrey || color(theme, "activityBar.inactiveForeground"),
+              );
+              setVar(root, "--activity-active", color(theme, "activityBar.activeBorder"));
+              setVar(root, "--sidebar-bg", color(theme, "sideBar.background"));
+              setVar(root, "--sidebar-fg", solarizedUiGrey || color(theme, "sideBar.foreground"));
+              setVar(root, "--sidebar-border", color(theme, "sideBar.border"));
+              setVar(root, "--tab-bg", color(theme, "tab.inactiveBackground"));
+              setVar(root, "--tab-active-bg", color(theme, "tab.activeBackground"));
+              setVar(
+                root,
+                "--tab-active-fg",
+                solarizedUiGrey || color(theme, "tab.activeForeground"),
+              );
+              setVar(
+                root,
+                "--tab-inactive-fg",
+                solarizedUiGrey || color(theme, "tab.inactiveForeground"),
+              );
+              setVar(root, "--tab-border", color(theme, "tab.border"));
+              setVar(root, "--editor-bg", color(theme, "editor.background"));
+              setVar(root, "--editor-fg", color(theme, "editor.foreground"));
+              setVar(root, "--editor-line", color(theme, "editor.lineHighlightBackground"));
+              setVar(root, "--gutter-fg", color(theme, "editorLineNumber.foreground"));
+              setVar(root, "--gutter-active-fg", color(theme, "editorLineNumber.activeForeground"));
+              setVar(root, "--panel-bg", color(theme, "panel.background"));
+              setVar(root, "--panel-border", color(theme, "panel.border"));
+              setVar(root, "--status-bg", color(theme, "statusBar.background"));
+              setVar(root, "--status-fg", color(theme, "statusBar.foreground"));
+              setVar(root, "--status-border", color(theme, "statusBar.border"));
+              setVar(root, "--status-remote-bg", color(theme, "statusBarItem.remoteBackground"));
+              setVar(
+                root,
+                "--status-remote-fg",
+                solarizedUiGrey || color(theme, "statusBarItem.remoteForeground"),
+              );
+              setVar(root, "--title-bg", color(theme, "titleBar.activeBackground"));
+              setVar(
+                root,
+                "--title-fg",
+                solarizedUiGrey || color(theme, "titleBar.activeForeground"),
+              );
+              setVar(root, "--token-comment", theme.tokens.comment);
+              setVar(root, "--token-keyword", theme.tokens.keyword);
+              setVar(root, "--token-function", theme.tokens.function);
+              setVar(root, "--token-string", theme.tokens.string);
+              setVar(root, "--token-number", theme.tokens.number);
+              setVar(root, "--token-variable", theme.tokens.variable);
+              setVar(root, "--token-parameter", theme.tokens.parameter);
+              setVar(root, "--token-operator", theme.tokens.operator);
+              setVar(root, "--token-punctuation", theme.tokens.punctuation);
+              setVar(root, "--token-class-name", theme.tokens.className);
+            }
+
+            function renderCode(root) {
+              const code = root.querySelector(".code");
+              codeLines.forEach((segments, index) => {
+                const line = document.createElement("div");
+                line.className = "line";
+                line.dataset.lineIndex = String(index);
+
+                const lineNumber = document.createElement("span");
+                lineNumber.className = "line-number";
+                lineNumber.textContent = String(index + 1);
+                line.appendChild(lineNumber);
+
+                const lineCode = document.createElement("span");
+                lineCode.className = "line-code";
+                segments.forEach((segment) => {
+                  [...segment.text].forEach((char) => {
+                    const span = document.createElement("span");
+                    span.className =
+                      segment.token === "plain"
+                        ? "char"
+                        : "char tok-" +
+                          segment.token.replace(/[A-Z]/g, (match) => "-" + match.toLowerCase());
+                    span.dataset.lineIndex = String(index);
+                    span.textContent = char;
+                    lineCode.appendChild(span);
+                  });
+                });
+                line.appendChild(lineCode);
+                code.appendChild(line);
+              });
+
+              const caret = document.createElement("span");
+              caret.className = "caret";
+              root.querySelector(".editor").appendChild(caret);
+            }
+
+            function caretPointForElement(editor, el) {
+              const editorBox = editor.getBoundingClientRect();
+              const charBox = el.getBoundingClientRect();
+              return {
+                x: charBox.right - editorBox.left + 2,
+                y: charBox.top - editorBox.top + 3,
+              };
+            }
+
+            function caretPointForLineStart(editor, line) {
+              const editorBox = editor.getBoundingClientRect();
+              const lineBox = line.getBoundingClientRect();
+              const codeBox = line.querySelector(".line-code").getBoundingClientRect();
+              return {
+                x: codeBox.left - editorBox.left,
+                y: lineBox.top - editorBox.top + 3,
+              };
+            }
+
+            function lineHighlightY(editor, line) {
+              const editorBox = editor.getBoundingClientRect();
+              const lineBox = line.getBoundingClientRect();
+              return lineBox.top - editorBox.top;
+            }
+
+            function buildTimeline(root, compositionId) {
+              const tl = gsap.timeline({ paused: true });
+              const editor = root.querySelector(".editor");
+              const caret = root.querySelector(".caret");
+              const activeLine = root.querySelector(".active-line");
+              const lineEls = gsap.utils.toArray(root.querySelectorAll(".line"));
+              const lineStartTimes = [];
+              const charSchedule = [];
+              let cursorTime = 0.95;
+
+              lineEls.forEach((line, lineIndex) => {
+                const lineChars = gsap.utils.toArray(line.querySelectorAll(".char"));
+                lineStartTimes[lineIndex] = cursorTime;
+                lineChars.forEach((char, charIndex) => {
+                  charSchedule.push({ char, time: cursorTime + charIndex * 0.012 });
+                });
+                cursorTime += Math.max(lineChars.length * 0.012, 0.08) + 0.045;
+              });
+
+              gsap.set(activeLine, { y: lineHighlightY(editor, lineEls[0]) });
+              gsap.set(caret, caretPointForLineStart(editor, lineEls[0]));
+
+              tl.from(
+                root.querySelector(".header"),
+                { y: 24, opacity: 0, duration: 0.45, ease: "power3.out" },
+                0,
+              );
+              tl.from(
+                root.querySelector(".workbench"),
+                { y: 42, opacity: 0, scale: 0.986, duration: 0.58, ease: "power3.out" },
+                0.1,
+              );
+              tl.from(activeLine, { opacity: 0, duration: 0.22, ease: "power2.out" }, 0.74);
+              lineStartTimes.forEach((time, lineIndex) => {
+                const line = lineEls[lineIndex];
+                tl.set(activeLine, { y: lineHighlightY(editor, line) }, time);
+                tl.set(caret, caretPointForLineStart(editor, line), time);
+                tl.call(
+                  () => {
+                    lineEls.forEach((item) => item.classList.toggle("is-active", item === line));
+                  },
+                  [],
+                  time,
+                );
+              });
+              charSchedule.forEach(({ char, time }) => {
+                tl.set(char, { opacity: 1 }, time);
+                tl.set(caret, caretPointForElement(editor, char), time + 0.002);
+              });
+              tl.to(
+                root.querySelector(".caret"),
+                { opacity: 0, duration: 0.34, repeat: 25, yoyo: true, ease: "steps(1)" },
+                0.95,
+              );
+              tl.from(
+                root.querySelector(".terminal"),
+                { y: 140, opacity: 0, duration: 0.56, ease: "power3.out" },
+                7.55,
+              );
+              tl.from(
+                root.querySelector(".terminal-body").children,
+                { opacity: 0, y: 8, duration: 0.24, stagger: 0.16, ease: "power2.out" },
+                8.05,
+              );
+              tl.to(
+                root.querySelector(".workbench"),
+                { rotateY: -10.5, z: 74, duration: 0.72, ease: "power2.inOut" },
+                9.35,
+              );
+              tl.to(
+                root.querySelector(".workbench"),
+                { rotateY: 0, z: 0, duration: 0.62, ease: "power2.inOut" },
+                10.08,
+              );
+
+              window.__timelines = window.__timelines || {};
+              window.__timelines[compositionId] = tl;
+
+              const previewTime = new URLSearchParams(window.location.search).get("t");
+              if (previewTime !== null) {
+                tl.time(Number(previewTime));
+              }
+            }
+
+            window.createVSCodeThemeComposition = (compositionId, themeOrId) => {
+              const root =
+                document.querySelector(
+                  '[data-composition-id="' + compositionId + '"] .vscode-theme-scene',
+                ) ||
+                document.querySelector(
+                  '.vscode-theme-scene[data-composition-id="' + compositionId + '"]',
+                ) ||
+                document.querySelector('[data-composition-id="' + compositionId + '"]');
+              const theme =
+                typeof themeOrId === "string"
+                  ? window.VSCODE_THEME_REGISTRY.find((item) => item.id === themeOrId)
+                  : themeOrId;
+              if (!root || !theme) return;
+              root.querySelector(".theme-label").textContent = theme.label;
+              root.querySelector(".theme-source").textContent = theme.sourceFile;
+              applyTheme(root, theme);
+              renderCode(root);
+              buildTimeline(root, compositionId);
+            };
+          })();
+        </script>
+        <script>
+          window.__timelines = window.__timelines || {};
+          window.__timelines["vscode-visual-studio-dark"] =
+            window.__timelines["vscode-visual-studio-dark"] || gsap.timeline({ paused: true });
+          window.createVSCodeThemeComposition("vscode-visual-studio-dark", {
+            id: "visual-studio-dark",
+            label: "Visual Studio Dark",
+            sourceFile: "dark_vs.json",
+            uiTheme: "vs-dark",
+            colors: {
+              "editor.background": "#1E1E1E",
+              "editor.foreground": "#D4D4D4",
+              "sideBarSectionHeader.background": "#0000",
+              "sideBarSectionHeader.border": "#ccc3",
+              "sideBarTitle.foreground": "#BBBBBB",
+              "statusBarItem.remoteBackground": "#16825D",
+              "statusBarItem.remoteForeground": "#FFF",
+            },
+            tokens: {
+              comment: "#6A9955",
+              keyword: "#d4d4d4",
+              function: "#9cdcfe",
+              string: "#d16969",
+              number: "#b5cea8",
+              variable: "#569cd6",
+              parameter: "#9CDCFE",
+              operator: "#569cd6",
+              punctuation: "#569cd6",
+              className: "#9cdcfe",
+            },
+          });
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/code-snippet-visual-studio-light/background.jpeg b/docs/public/catalog/blocks/code-snippet-visual-studio-light/background.jpeg
new file mode 100644
index 0000000000..1f3e465cd2
Binary files /dev/null and b/docs/public/catalog/blocks/code-snippet-visual-studio-light/background.jpeg differ
diff --git a/docs/public/catalog/blocks/code-snippet-visual-studio-light/code-snippet-visual-studio-light.html b/docs/public/catalog/blocks/code-snippet-visual-studio-light/code-snippet-visual-studio-light.html
new file mode 100644
index 0000000000..982d261993
--- /dev/null
+++ b/docs/public/catalog/blocks/code-snippet-visual-studio-light/code-snippet-visual-studio-light.html
@@ -0,0 +1,1055 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Visual Studio Light VS Code Theme Composition</title>
+  </head>
+  <body>
+    <template id="vscode-visual-studio-light-template">
+      <div
+        class="vscode-theme-scene"
+        data-composition-id="vscode-visual-studio-light"
+        data-width="1920"
+        data-height="1080"
+      >
+        <main class="scene-content">
+          <section class="header">
+            <div>
+              <p class="kicker">Official VS Code built-in theme</p>
+              <h1 class="title"><span class="theme-label">Visual Studio Light</span></h1>
+            </div>
+            <p class="source-note">
+              Typing `functional_toolkit.py` with workbench colors from
+              <span class="theme-source">light_vs.json</span>.
+            </p>
+          </section>
+
+          <section class="workbench">
+            <div class="titlebar">
+              <div class="traffic"><span></span><span></span><span></span></div>
+              <div class="window-title">functional-toolkit - Visual Studio Code</div>
+              <div class="command-center">Search</div>
+            </div>
+
+            <aside class="activity" aria-label="Activity bar">
+              <svg class="activity-icon active" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="currentColor"
+                  d="M4 4h7v7H4V4Zm9 0h7v7h-7V4ZM4 13h7v7H4v-7Zm9 0h7v7h-7v-7Z"
+                />
+              </svg>
+              <svg class="activity-icon" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  d="m21 21-5.2-5.2M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Z"
+                />
+              </svg>
+              <svg class="activity-icon" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  d="M8 18 3 12l5-6m8 12 5-6-5-6"
+                />
+              </svg>
+              <svg class="activity-icon" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  d="M12 3v18m0-18 6 6m-6-6L6 9m6 12 6-6m-6 6-6-6"
+                />
+              </svg>
+            </aside>
+
+            <aside class="sidebar">
+              <div class="sidebar-title">Explorer</div>
+              <div class="section-title">⌄ Functional Toolkit</div>
+              <div class="tree">
+                <div class="tree-row">⌄ src</div>
+                <div class="tree-row child selected">◇ functional_toolkit.py</div>
+                <div class="tree-row child">◇ test_toolkit.py</div>
+                <div class="tree-row">◇ pyproject.toml</div>
+                <div class="tree-row">◇ README.md</div>
+              </div>
+            </aside>
+
+            <section class="editor-area">
+              <div class="tabs">
+                <div class="tab">◇ functional_toolkit.py</div>
+                <div class="tab inactive">README.md</div>
+              </div>
+              <div class="breadcrumbs">functional-toolkit › src › functional_toolkit.py</div>
+              <div class="editor">
+                <div class="active-line"></div>
+                <div class="code"></div>
+              </div>
+              <div class="terminal">
+                <div class="panel-tabs">
+                  <span class="active">Terminal</span><span>Problems</span><span>Output</span>
+                </div>
+                <div class="terminal-body">
+                  <div><span class="prompt">functional-toolkit %</span> python -m pytest</div>
+                  <div>collected 3 items</div>
+                  <div>tests/test_toolkit.py ... <span class="tok-comment">passed</span></div>
+                </div>
+              </div>
+            </section>
+
+            <footer class="statusbar">
+              <div class="status-left">
+                <span class="remote">main</span>
+                <span>0 errors</span>
+                <span>0 warnings</span>
+              </div>
+              <div class="status-right">
+                <span>Ln 17, Col 1</span>
+                <span>Spaces: 4</span>
+                <span>UTF-8</span>
+                <span>Python 3.12</span>
+              </div>
+            </footer>
+          </section>
+        </main>
+        <style>
+          * {
+            box-sizing: border-box;
+            letter-spacing: 0;
+          }
+
+          html,
+          body {
+            margin: 0;
+            width: 1920px;
+            height: 1080px;
+            overflow: hidden;
+            background: #000000;
+            font-family:
+              Inter,
+              -apple-system,
+              BlinkMacSystemFont,
+              "Segoe UI",
+              sans-serif;
+          }
+
+          .vscode-theme-scene {
+            --activity-bg: #181818;
+            --activity-fg: #d7d7d7;
+            --activity-muted: #868686;
+            --activity-active: #0078d4;
+            --sidebar-bg: #181818;
+            --sidebar-fg: #cccccc;
+            --sidebar-border: #2b2b2b;
+            --tab-bg: #181818;
+            --tab-active-bg: #1f1f1f;
+            --tab-active-fg: #ffffff;
+            --tab-inactive-fg: #9d9d9d;
+            --tab-border: #2b2b2b;
+            --editor-bg: #1f1f1f;
+            --editor-fg: #cccccc;
+            --editor-line: rgba(255, 255, 255, 0.04);
+            --gutter-fg: #6e7681;
+            --gutter-active-fg: #cccccc;
+            --panel-bg: #181818;
+            --panel-border: #2b2b2b;
+            --status-bg: #181818;
+            --status-fg: #cccccc;
+            --status-border: #2b2b2b;
+            --title-bg: #181818;
+            --title-fg: #cccccc;
+            --token-comment: #6a9955;
+            --token-keyword: #c586c0;
+            --token-function: #dcdcaa;
+            --token-string: #ce9178;
+            --token-number: #b5cea8;
+            --token-variable: #9cdcfe;
+            --token-parameter: #9cdcfe;
+            --token-operator: #d4d4d4;
+            --token-punctuation: #d4d4d4;
+            --token-class-name: #4ec9b0;
+            position: relative;
+            width: 1920px;
+            height: 1080px;
+            overflow: hidden;
+            background:
+              linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.32)),
+              url("../assets/background.jpeg") center / cover no-repeat;
+            color: var(--editor-fg);
+          }
+
+          .scene-content {
+            position: relative;
+            z-index: 1;
+            width: 100%;
+            height: 100%;
+            padding: 54px 70px 92px;
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+            perspective: 2200px;
+            perspective-origin: 56% 52%;
+          }
+
+          .header {
+            display: flex;
+            align-items: end;
+            justify-content: space-between;
+            min-height: 66px;
+            text-shadow:
+              0 2px 12px rgba(0, 0, 0, 0.42),
+              0 14px 34px rgba(0, 0, 0, 0.32);
+          }
+
+          .kicker {
+            margin: 0 0 7px;
+            color: var(--gutter-fg);
+            font-size: 15px;
+            font-weight: 650;
+            text-transform: uppercase;
+            text-shadow:
+              0 2px 8px rgba(0, 0, 0, 0.48),
+              0 10px 26px rgba(0, 0, 0, 0.36);
+          }
+
+          .title {
+            margin: 0;
+            color: var(--editor-fg);
+            font-size: 44px;
+            line-height: 1;
+            font-weight: 760;
+          }
+
+          .source-note {
+            width: 510px;
+            color: var(--gutter-fg);
+            font-size: 16px;
+            line-height: 1.35;
+            text-align: right;
+            text-shadow:
+              0 2px 10px rgba(0, 0, 0, 0.46),
+              0 12px 30px rgba(0, 0, 0, 0.34);
+          }
+
+          .workbench {
+            height: 824px;
+            display: grid;
+            grid-template-columns: 54px 290px 1fr;
+            grid-template-rows: 36px 1fr 26px;
+            overflow: hidden;
+            border: 1px solid var(--sidebar-border);
+            border-radius: 8px;
+            background: var(--editor-bg);
+            box-shadow: 0 34px 90px rgba(0, 0, 0, 0.42);
+            transform: translateZ(0);
+            transform-origin: 82% 50%;
+            transform-style: preserve-3d;
+            will-change: transform;
+          }
+
+          .titlebar {
+            grid-column: 1 / -1;
+            display: grid;
+            grid-template-columns: 120px 1fr 210px;
+            align-items: center;
+            background: var(--title-bg);
+            color: var(--title-fg);
+            border-bottom: 1px solid var(--tab-border);
+            font-size: 12px;
+          }
+
+          .traffic {
+            display: flex;
+            gap: 8px;
+            padding-left: 18px;
+          }
+
+          .traffic span {
+            width: 12px;
+            height: 12px;
+            border-radius: 999px;
+          }
+
+          .traffic span:nth-child(1) {
+            background: #ff5f57;
+          }
+          .traffic span:nth-child(2) {
+            background: #ffbd2e;
+          }
+          .traffic span:nth-child(3) {
+            background: #28c840;
+          }
+
+          .window-title {
+            justify-self: center;
+            opacity: 0.84;
+          }
+
+          .command-center {
+            justify-self: end;
+            width: 176px;
+            height: 22px;
+            margin-right: 16px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border: 1px solid color-mix(in srgb, var(--title-fg), transparent 78%);
+            border-radius: 5px;
+            color: color-mix(in srgb, var(--title-fg), transparent 18%);
+          }
+
+          .activity {
+            grid-row: 2 / 3;
+            background: var(--activity-bg);
+            border-right: 1px solid var(--sidebar-border);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 10px 0;
+            gap: 18px;
+          }
+
+          .activity-icon {
+            width: 28px;
+            height: 28px;
+            color: var(--activity-muted);
+          }
+
+          .activity-icon.active {
+            color: var(--activity-fg);
+            border-left: 2px solid var(--activity-active);
+            padding-left: 4px;
+          }
+
+          .sidebar {
+            grid-row: 2 / 3;
+            background: var(--sidebar-bg);
+            color: var(--sidebar-fg);
+            border-right: 1px solid var(--sidebar-border);
+            display: flex;
+            flex-direction: column;
+            min-width: 0;
+          }
+
+          .sidebar-title {
+            height: 38px;
+            display: flex;
+            align-items: center;
+            padding: 0 20px;
+            color: var(--sidebar-fg);
+            font-size: 11px;
+            text-transform: uppercase;
+          }
+
+          .section-title {
+            height: 24px;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            padding: 0 14px;
+            background: color-mix(in srgb, var(--sidebar-bg), var(--sidebar-fg) 5%);
+            border-top: 1px solid var(--sidebar-border);
+            border-bottom: 1px solid var(--sidebar-border);
+            color: var(--sidebar-fg);
+            font-size: 11px;
+            font-weight: 700;
+          }
+
+          .tree {
+            padding: 8px 0;
+            font-size: 13px;
+            line-height: 24px;
+          }
+
+          .tree-row {
+            height: 24px;
+            display: flex;
+            align-items: center;
+            gap: 7px;
+            padding: 0 10px 0 18px;
+            color: color-mix(in srgb, var(--sidebar-fg), transparent 8%);
+            white-space: nowrap;
+          }
+
+          .tree-row.child {
+            padding-left: 34px;
+          }
+
+          .tree-row.selected {
+            background: color-mix(in srgb, var(--sidebar-fg), transparent 88%);
+            color: var(--sidebar-fg);
+          }
+
+          .editor-area {
+            grid-row: 2 / 3;
+            display: grid;
+            grid-template-rows: 36px 30px 1fr 138px;
+            min-width: 0;
+            background: var(--editor-bg);
+          }
+
+          .tabs {
+            display: flex;
+            background: var(--tab-bg);
+            border-bottom: 1px solid var(--tab-border);
+          }
+
+          .tab {
+            width: 205px;
+            height: 36px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 0 13px;
+            border-right: 1px solid var(--tab-border);
+            background: var(--tab-active-bg);
+            color: var(--tab-active-fg);
+            border-top: 2px solid var(--activity-active);
+            font-size: 13px;
+          }
+
+          .tab.inactive {
+            background: var(--tab-bg);
+            color: var(--tab-inactive-fg);
+            border-top-color: transparent;
+          }
+
+          .breadcrumbs {
+            display: flex;
+            align-items: center;
+            gap: 7px;
+            padding: 0 18px;
+            color: var(--gutter-fg);
+            border-bottom: 1px solid color-mix(in srgb, var(--tab-border), transparent 20%);
+            font-size: 12px;
+          }
+
+          .editor {
+            position: relative;
+            overflow: hidden;
+            background: var(--editor-bg);
+            color: var(--editor-fg);
+            font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+            font-size: 18px;
+            line-height: 1.52;
+          }
+
+          .active-line {
+            position: absolute;
+            left: 0;
+            right: 0;
+            top: 0;
+            height: 28px;
+            background: var(--editor-line);
+            will-change: transform;
+          }
+
+          .code {
+            position: relative;
+            padding: 20px 36px 18px 0;
+          }
+
+          .line {
+            height: 28px;
+            display: grid;
+            grid-template-columns: 72px 1fr;
+            align-items: center;
+          }
+
+          .line-number {
+            padding-right: 18px;
+            color: var(--gutter-fg);
+            text-align: right;
+            user-select: none;
+          }
+
+          .line.is-active .line-number {
+            color: var(--gutter-active-fg);
+          }
+
+          .line-code {
+            white-space: pre;
+          }
+
+          .char {
+            opacity: 0;
+          }
+
+          .tok-comment {
+            color: var(--token-comment);
+          }
+          .tok-keyword {
+            color: var(--token-keyword);
+          }
+          .tok-function {
+            color: var(--token-function);
+          }
+          .tok-string {
+            color: var(--token-string);
+          }
+          .tok-number {
+            color: var(--token-number);
+          }
+          .tok-variable {
+            color: var(--token-variable);
+          }
+          .tok-parameter {
+            color: var(--token-parameter);
+          }
+          .tok-operator {
+            color: var(--token-operator);
+          }
+          .tok-punctuation {
+            color: var(--token-punctuation);
+          }
+          .tok-class-name {
+            color: var(--token-class-name);
+          }
+
+          .caret {
+            position: absolute;
+            left: 0;
+            top: 0;
+            z-index: 3;
+            display: block;
+            width: 2px;
+            height: 22px;
+            background: var(--editor-fg);
+            pointer-events: none;
+            will-change: transform, opacity;
+          }
+
+          .terminal {
+            display: grid;
+            grid-template-rows: 32px 1fr;
+            background: var(--panel-bg);
+            border-top: 1px solid var(--panel-border);
+            color: var(--editor-fg);
+            font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+            font-size: 14px;
+          }
+
+          .panel-tabs {
+            display: flex;
+            align-items: center;
+            gap: 22px;
+            padding: 0 18px;
+            border-bottom: 1px solid var(--panel-border);
+            color: var(--gutter-fg);
+            font-family:
+              Inter,
+              -apple-system,
+              BlinkMacSystemFont,
+              "Segoe UI",
+              sans-serif;
+            font-size: 12px;
+            text-transform: uppercase;
+          }
+
+          .panel-tabs .active {
+            color: var(--editor-fg);
+            border-bottom: 1px solid var(--activity-active);
+            height: 32px;
+            display: flex;
+            align-items: center;
+          }
+
+          .terminal-body {
+            padding: 12px 20px;
+            color: var(--editor-fg);
+            line-height: 1.8;
+          }
+
+          .prompt {
+            color: var(--token-function);
+          }
+
+          .statusbar {
+            grid-column: 1 / -1;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            background: var(--status-bg);
+            color: var(--status-fg);
+            border-top: 1px solid var(--status-border);
+            font-size: 12px;
+          }
+
+          .status-left,
+          .status-right {
+            display: flex;
+            align-items: center;
+            gap: 18px;
+            padding: 0 12px;
+          }
+
+          .remote {
+            align-self: stretch;
+            display: flex;
+            align-items: center;
+            padding: 0 12px;
+            margin-left: -12px;
+            background: var(--status-remote-bg, var(--activity-active));
+            color: var(--status-remote-fg, #ffffff);
+          }
+
+          svg {
+            display: block;
+          }
+        </style>
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (() => {
+            const codeLines = [
+              [{ text: "# A small functional toolkit", token: "comment" }],
+              [
+                { text: "def", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "pluck_deep", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "key", token: "parameter" },
+                { text: "):", token: "punctuation" },
+              ],
+              [
+                { text: "    ", token: "plain" },
+                { text: "return", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "obj", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "reduce", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "acc", token: "parameter" },
+                { text: ", ", token: "punctuation" },
+                { text: "k", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "acc", token: "variable" },
+                { text: "[", token: "punctuation" },
+                { text: "k", token: "variable" },
+                { text: "]", token: "punctuation" },
+                { text: ", ", token: "punctuation" },
+                { text: "key", token: "variable" },
+                { text: ".split", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "'.'", token: "string" },
+                { text: "), ", token: "punctuation" },
+                { text: "obj", token: "variable" },
+                { text: ")", token: "punctuation" },
+              ],
+              [],
+              [
+                { text: "def", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "compose", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "*", token: "operator" },
+                { text: "fns", token: "parameter" },
+                { text: "):", token: "punctuation" },
+              ],
+              [
+                { text: "    ", token: "plain" },
+                { text: "return", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "res", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "reduce", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "lambda", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "acc", token: "parameter" },
+                { text: ", ", token: "punctuation" },
+                { text: "fn", token: "parameter" },
+                { text: ": ", token: "punctuation" },
+                { text: "fn", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "acc", token: "variable" },
+                { text: "), ", token: "punctuation" },
+                { text: "fns", token: "variable" },
+                { text: ", ", token: "punctuation" },
+                { text: "res", token: "variable" },
+                { text: ")", token: "punctuation" },
+              ],
+              [],
+              [
+                { text: "def", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "unfold", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "f", token: "parameter" },
+                { text: ", ", token: "punctuation" },
+                { text: "seed", token: "parameter" },
+                { text: "):", token: "punctuation" },
+              ],
+              [
+                { text: "    ", token: "plain" },
+                { text: '"""Build a list by repeatedly applying f to a seed."""', token: "string" },
+              ],
+              [
+                { text: "    acc", token: "variable" },
+                { text: " = ", token: "operator" },
+                { text: "[]", token: "punctuation" },
+              ],
+              [
+                { text: "    while", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "True", token: "className" },
+                { text: ":", token: "punctuation" },
+              ],
+              [
+                { text: "        result", token: "variable" },
+                { text: " = ", token: "operator" },
+                { text: "f", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "seed", token: "variable" },
+                { text: ")", token: "punctuation" },
+              ],
+              [
+                { text: "        if", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "result", token: "variable" },
+                { text: " is ", token: "keyword" },
+                { text: "None", token: "className" },
+                { text: ":", token: "punctuation" },
+              ],
+              [
+                { text: "            return", token: "keyword" },
+                { text: " ", token: "plain" },
+                { text: "acc", token: "variable" },
+              ],
+              [
+                { text: "        acc", token: "variable" },
+                { text: ".append", token: "function" },
+                { text: "(", token: "punctuation" },
+                { text: "result", token: "variable" },
+                { text: "[", token: "punctuation" },
+                { text: "0", token: "number" },
+                { text: "])", token: "punctuation" },
+              ],
+              [
+                { text: "        seed", token: "variable" },
+                { text: " = ", token: "operator" },
+                { text: "result", token: "variable" },
+                { text: "[", token: "punctuation" },
+                { text: "1", token: "number" },
+                { text: "]", token: "punctuation" },
+              ],
+              [],
+            ];
+
+            const fallback = {
+              "activityBar.background": "#181818",
+              "activityBar.foreground": "#d7d7d7",
+              "activityBar.inactiveForeground": "#868686",
+              "activityBar.activeBorder": "#0078d4",
+              "sideBar.background": "#181818",
+              "sideBar.foreground": "#cccccc",
+              "sideBar.border": "#2b2b2b",
+              "tab.activeBackground": "#1f1f1f",
+              "tab.activeForeground": "#ffffff",
+              "tab.inactiveBackground": "#181818",
+              "tab.inactiveForeground": "#9d9d9d",
+              "tab.border": "#2b2b2b",
+              "editor.background": "#1f1f1f",
+              "editor.foreground": "#cccccc",
+              "editor.lineHighlightBackground": "#ffffff0a",
+              "editorLineNumber.foreground": "#6e7681",
+              "editorLineNumber.activeForeground": "#cccccc",
+              "panel.background": "#181818",
+              "panel.border": "#2b2b2b",
+              "statusBar.background": "#181818",
+              "statusBar.foreground": "#cccccc",
+              "statusBar.border": "#2b2b2b",
+              "titleBar.activeBackground": "#181818",
+              "titleBar.activeForeground": "#cccccc",
+            };
+
+            function color(theme, key) {
+              return theme.colors[key] || fallback[key] || theme.colors.foreground || "#cccccc";
+            }
+
+            function solarizedGrey(theme) {
+              return (
+                theme.colors["tab.inactiveForeground"] ||
+                theme.colors["editor.foreground"] ||
+                "#586E75"
+              );
+            }
+
+            function setVar(root, name, value) {
+              root.style.setProperty(name, value);
+            }
+
+            function applyTheme(root, theme) {
+              const solarizedUiGrey = theme.id === "solarized-light" ? solarizedGrey(theme) : null;
+              setVar(root, "--activity-bg", color(theme, "activityBar.background"));
+              setVar(
+                root,
+                "--activity-fg",
+                solarizedUiGrey || color(theme, "activityBar.foreground"),
+              );
+              setVar(
+                root,
+                "--activity-muted",
+                solarizedUiGrey || color(theme, "activityBar.inactiveForeground"),
+              );
+              setVar(root, "--activity-active", color(theme, "activityBar.activeBorder"));
+              setVar(root, "--sidebar-bg", color(theme, "sideBar.background"));
+              setVar(root, "--sidebar-fg", solarizedUiGrey || color(theme, "sideBar.foreground"));
+              setVar(root, "--sidebar-border", color(theme, "sideBar.border"));
+              setVar(root, "--tab-bg", color(theme, "tab.inactiveBackground"));
+              setVar(root, "--tab-active-bg", color(theme, "tab.activeBackground"));
+              setVar(
+                root,
+                "--tab-active-fg",
+                solarizedUiGrey || color(theme, "tab.activeForeground"),
+              );
+              setVar(
+                root,
+                "--tab-inactive-fg",
+                solarizedUiGrey || color(theme, "tab.inactiveForeground"),
+              );
+              setVar(root, "--tab-border", color(theme, "tab.border"));
+              setVar(root, "--editor-bg", color(theme, "editor.background"));
+              setVar(root, "--editor-fg", color(theme, "editor.foreground"));
+              setVar(root, "--editor-line", color(theme, "editor.lineHighlightBackground"));
+              setVar(root, "--gutter-fg", color(theme, "editorLineNumber.foreground"));
+              setVar(root, "--gutter-active-fg", color(theme, "editorLineNumber.activeForeground"));
+              setVar(root, "--panel-bg", color(theme, "panel.background"));
+              setVar(root, "--panel-border", color(theme, "panel.border"));
+              setVar(root, "--status-bg", color(theme, "statusBar.background"));
+              setVar(root, "--status-fg", color(theme, "statusBar.foreground"));
+              setVar(root, "--status-border", color(theme, "statusBar.border"));
+              setVar(root, "--status-remote-bg", color(theme, "statusBarItem.remoteBackground"));
+              setVar(
+                root,
+                "--status-remote-fg",
+                solarizedUiGrey || color(theme, "statusBarItem.remoteForeground"),
+              );
+              setVar(root, "--title-bg", color(theme, "titleBar.activeBackground"));
+              setVar(
+                root,
+                "--title-fg",
+                solarizedUiGrey || color(theme, "titleBar.activeForeground"),
+              );
+              setVar(root, "--token-comment", theme.tokens.comment);
+              setVar(root, "--token-keyword", theme.tokens.keyword);
+              setVar(root, "--token-function", theme.tokens.function);
+              setVar(root, "--token-string", theme.tokens.string);
+              setVar(root, "--token-number", theme.tokens.number);
+              setVar(root, "--token-variable", theme.tokens.variable);
+              setVar(root, "--token-parameter", theme.tokens.parameter);
+              setVar(root, "--token-operator", theme.tokens.operator);
+              setVar(root, "--token-punctuation", theme.tokens.punctuation);
+              setVar(root, "--token-class-name", theme.tokens.className);
+            }
+
+            function renderCode(root) {
+              const code = root.querySelector(".code");
+              codeLines.forEach((segments, index) => {
+                const line = document.createElement("div");
+                line.className = "line";
+                line.dataset.lineIndex = String(index);
+
+                const lineNumber = document.createElement("span");
+                lineNumber.className = "line-number";
+                lineNumber.textContent = String(index + 1);
+                line.appendChild(lineNumber);
+
+                const lineCode = document.createElement("span");
+                lineCode.className = "line-code";
+                segments.forEach((segment) => {
+                  [...segment.text].forEach((char) => {
+                    const span = document.createElement("span");
+                    span.className =
+                      segment.token === "plain"
+                        ? "char"
+                        : "char tok-" +
+                          segment.token.replace(/[A-Z]/g, (match) => "-" + match.toLowerCase());
+                    span.dataset.lineIndex = String(index);
+                    span.textContent = char;
+                    lineCode.appendChild(span);
+                  });
+                });
+                line.appendChild(lineCode);
+                code.appendChild(line);
+              });
+
+              const caret = document.createElement("span");
+              caret.className = "caret";
+              root.querySelector(".editor").appendChild(caret);
+            }
+
+            function caretPointForElement(editor, el) {
+              const editorBox = editor.getBoundingClientRect();
+              const charBox = el.getBoundingClientRect();
+              return {
+                x: charBox.right - editorBox.left + 2,
+                y: charBox.top - editorBox.top + 3,
+              };
+            }
+
+            function caretPointForLineStart(editor, line) {
+              const editorBox = editor.getBoundingClientRect();
+              const lineBox = line.getBoundingClientRect();
+              const codeBox = line.querySelector(".line-code").getBoundingClientRect();
+              return {
+                x: codeBox.left - editorBox.left,
+                y: lineBox.top - editorBox.top + 3,
+              };
+            }
+
+            function lineHighlightY(editor, line) {
+              const editorBox = editor.getBoundingClientRect();
+              const lineBox = line.getBoundingClientRect();
+              return lineBox.top - editorBox.top;
+            }
+
+            function buildTimeline(root, compositionId) {
+              const tl = gsap.timeline({ paused: true });
+              const editor = root.querySelector(".editor");
+              const caret = root.querySelector(".caret");
+              const activeLine = root.querySelector(".active-line");
+              const lineEls = gsap.utils.toArray(root.querySelectorAll(".line"));
+              const lineStartTimes = [];
+              const charSchedule = [];
+              let cursorTime = 0.95;
+
+              lineEls.forEach((line, lineIndex) => {
+                const lineChars = gsap.utils.toArray(line.querySelectorAll(".char"));
+                lineStartTimes[lineIndex] = cursorTime;
+                lineChars.forEach((char, charIndex) => {
+                  charSchedule.push({ char, time: cursorTime + charIndex * 0.012 });
+                });
+                cursorTime += Math.max(lineChars.length * 0.012, 0.08) + 0.045;
+              });
+
+              gsap.set(activeLine, { y: lineHighlightY(editor, lineEls[0]) });
+              gsap.set(caret, caretPointForLineStart(editor, lineEls[0]));
+
+              tl.from(
+                root.querySelector(".header"),
+                { y: 24, opacity: 0, duration: 0.45, ease: "power3.out" },
+                0,
+              );
+              tl.from(
+                root.querySelector(".workbench"),
+                { y: 42, opacity: 0, scale: 0.986, duration: 0.58, ease: "power3.out" },
+                0.1,
+              );
+              tl.from(activeLine, { opacity: 0, duration: 0.22, ease: "power2.out" }, 0.74);
+              lineStartTimes.forEach((time, lineIndex) => {
+                const line = lineEls[lineIndex];
+                tl.set(activeLine, { y: lineHighlightY(editor, line) }, time);
+                tl.set(caret, caretPointForLineStart(editor, line), time);
+                tl.call(
+                  () => {
+                    lineEls.forEach((item) => item.classList.toggle("is-active", item === line));
+                  },
+                  [],
+                  time,
+                );
+              });
+              charSchedule.forEach(({ char, time }) => {
+                tl.set(char, { opacity: 1 }, time);
+                tl.set(caret, caretPointForElement(editor, char), time + 0.002);
+              });
+              tl.to(
+                root.querySelector(".caret"),
+                { opacity: 0, duration: 0.34, repeat: 25, yoyo: true, ease: "steps(1)" },
+                0.95,
+              );
+              tl.from(
+                root.querySelector(".terminal"),
+                { y: 140, opacity: 0, duration: 0.56, ease: "power3.out" },
+                7.55,
+              );
+              tl.from(
+                root.querySelector(".terminal-body").children,
+                { opacity: 0, y: 8, duration: 0.24, stagger: 0.16, ease: "power2.out" },
+                8.05,
+              );
+              tl.to(
+                root.querySelector(".workbench"),
+                { rotateY: -10.5, z: 74, duration: 0.72, ease: "power2.inOut" },
+                9.35,
+              );
+              tl.to(
+                root.querySelector(".workbench"),
+                { rotateY: 0, z: 0, duration: 0.62, ease: "power2.inOut" },
+                10.08,
+              );
+
+              window.__timelines = window.__timelines || {};
+              window.__timelines[compositionId] = tl;
+
+              const previewTime = new URLSearchParams(window.location.search).get("t");
+              if (previewTime !== null) {
+                tl.time(Number(previewTime));
+              }
+            }
+
+            window.createVSCodeThemeComposition = (compositionId, themeOrId) => {
+              const root =
+                document.querySelector(
+                  '[data-composition-id="' + compositionId + '"] .vscode-theme-scene',
+                ) ||
+                document.querySelector(
+                  '.vscode-theme-scene[data-composition-id="' + compositionId + '"]',
+                ) ||
+                document.querySelector('[data-composition-id="' + compositionId + '"]');
+              const theme =
+                typeof themeOrId === "string"
+                  ? window.VSCODE_THEME_REGISTRY.find((item) => item.id === themeOrId)
+                  : themeOrId;
+              if (!root || !theme) return;
+              root.querySelector(".theme-label").textContent = theme.label;
+              root.querySelector(".theme-source").textContent = theme.sourceFile;
+              applyTheme(root, theme);
+              renderCode(root);
+              buildTimeline(root, compositionId);
+            };
+          })();
+        </script>
+        <script>
+          window.__timelines = window.__timelines || {};
+          window.__timelines["vscode-visual-studio-light"] =
+            window.__timelines["vscode-visual-studio-light"] || gsap.timeline({ paused: true });
+          window.createVSCodeThemeComposition("vscode-visual-studio-light", {
+            id: "visual-studio-light",
+            label: "Visual Studio Light",
+            sourceFile: "light_vs.json",
+            uiTheme: "vs",
+            colors: {
+              "editor.background": "#FFFFFF",
+              "editor.foreground": "#000000",
+              "sideBarSectionHeader.background": "#0000",
+              "sideBarSectionHeader.border": "#61616130",
+              "sideBarTitle.foreground": "#6F6F6F",
+              "statusBarItem.remoteBackground": "#16825D",
+              "statusBarItem.remoteForeground": "#FFF",
+            },
+            tokens: {
+              comment: "#008000",
+              keyword: "#000000",
+              function: "#0451a5",
+              string: "#811f3f",
+              number: "#098658",
+              variable: "#0000ff",
+              parameter: "#9CDCFE",
+              operator: "#0000ff",
+              punctuation: "#800000",
+              className: "#0451a5",
+            },
+          });
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/code-typing/code-typing.html b/docs/public/catalog/blocks/code-typing/code-typing.html
new file mode 100644
index 0000000000..5a30750005
--- /dev/null
+++ b/docs/public/catalog/blocks/code-typing/code-typing.html
@@ -0,0 +1,763 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Code Typing</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #05070b;
+      }
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        font-family: "JetBrains Mono", monospace;
+        color: #e6edf3;
+      }
+      .bg-field {
+        position: absolute;
+        inset: 0;
+        background: radial-gradient(1200px 700px at 50% 18%, #0e1726 0%, #070b12 55%, #05070b 100%);
+      }
+      .bg-grid {
+        position: absolute;
+        inset: 0;
+        background-image:
+          linear-gradient(rgba(88, 166, 255, 0.05) 1px, transparent 1px),
+          linear-gradient(90deg, rgba(88, 166, 255, 0.05) 1px, transparent 1px);
+        background-size: 64px 64px;
+        mask-image: radial-gradient(1100px 620px at 50% 42%, #000 0%, transparent 78%);
+      }
+      .bg-glow {
+        position: absolute;
+        width: 900px;
+        height: 900px;
+        border-radius: 50%;
+        filter: blur(120px);
+        opacity: 0.5;
+      }
+      .bg-glow.a {
+        background: #1f6feb55;
+        left: -180px;
+        top: -200px;
+      }
+      .bg-glow.b {
+        background: #2ea04355;
+        right: -200px;
+        bottom: -260px;
+      }
+      .editor {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        width: 1380px;
+        height: 800px;
+        background: #0b0f17;
+        border: 1px solid #1d2733;
+        border-radius: 16px;
+        box-shadow:
+          0 40px 120px rgba(0, 0, 0, 0.6),
+          0 2px 0 rgba(255, 255, 255, 0.03) inset;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+      }
+      .titlebar {
+        height: 56px;
+        flex: 0 0 56px;
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        padding: 0 22px;
+        background: linear-gradient(#11161f, #0c111a);
+        border-bottom: 1px solid #1b2430;
+      }
+      .dots {
+        display: flex;
+        gap: 10px;
+      }
+      .dot {
+        width: 14px;
+        height: 14px;
+        border-radius: 50%;
+      }
+      .dot.r {
+        background: #ff5f57;
+      }
+      .dot.y {
+        background: #febc2e;
+      }
+      .dot.g {
+        background: #28c840;
+      }
+      .filename {
+        font-size: 19px;
+        color: #8b98a9;
+        letter-spacing: 0.2px;
+      }
+      .filename .accent {
+        color: #d6e2f0;
+      }
+      .code-surface {
+        position: relative;
+        flex: 1 1 auto;
+        overflow: hidden;
+      }
+      .scene {
+        position: absolute;
+        inset: 0;
+        opacity: 0;
+        will-change: opacity;
+      }
+      .code {
+        position: absolute;
+        top: 38px;
+        left: 0;
+        right: 0;
+        padding: 0 44px 0 104px;
+        font-size: 30px;
+        line-height: 46px;
+        font-variant-ligatures: none;
+        tab-size: 2;
+      }
+      .gutter {
+        position: absolute;
+        top: 38px;
+        left: 0;
+        width: 84px;
+        padding-right: 18px;
+        font-size: 30px;
+        line-height: 46px;
+        text-align: right;
+        color: #828c9b;
+        user-select: none;
+      }
+      .ln {
+        display: block;
+        height: 46px;
+      }
+      .line {
+        display: block;
+        min-height: 46px;
+        white-space: pre;
+        position: relative;
+        z-index: 1;
+      }
+      .tok {
+        display: inline-block;
+        white-space: pre;
+        will-change: transform, opacity;
+      }
+      .caret {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 3px;
+        height: 32px;
+        margin-top: 6px;
+        background: #58a6ff;
+        border-radius: 1px;
+        z-index: 3;
+      }
+      .hl-box {
+        position: absolute;
+        background: rgba(88, 166, 255, 0.16);
+        border-left: 3px solid #58a6ff;
+        border-radius: 6px;
+        z-index: 0;
+        overflow: hidden;
+      }
+      .diff-line {
+        display: block;
+        min-height: 0;
+        line-height: 46px;
+        white-space: pre;
+        position: relative;
+        overflow: hidden;
+        padding-left: 14px;
+      }
+      .diff-sign {
+        display: inline-block;
+        width: 22px;
+        color: #41506220;
+      }
+      .diff-del {
+        background: rgba(248, 81, 73, 0.12);
+        box-shadow: inset 3px 0 #f85149;
+      }
+      .diff-add {
+        background: rgba(63, 185, 80, 0.12);
+        box-shadow: inset 3px 0 #3fb950;
+      }
+      .diff-del .diff-sign {
+        color: #f85149;
+      }
+      .diff-add .diff-sign {
+        color: #3fb950;
+      }
+      .flight-block {
+        position: absolute;
+        white-space: pre;
+        font-size: 27px;
+        line-height: 40px;
+        padding: 11px 22px;
+        border-radius: 11px;
+        background: #0f1722;
+        border: 1px solid #233044;
+        box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5);
+        will-change: transform, opacity;
+      }
+      .flight-target {
+        position: absolute;
+        border: 1.5px dashed #2a3a4f;
+        border-radius: 14px;
+        opacity: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="code-typing"
+      data-start="0"
+      data-duration="5"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="bg-field" data-layout-ignore></div>
+      <div class="bg-grid" data-layout-ignore></div>
+      <div class="bg-glow a" data-layout-ignore></div>
+      <div class="bg-glow b" data-layout-ignore></div>
+      <div class="editor" id="editor" data-layout-ignore>
+        <div class="titlebar">
+          <div class="dots">
+            <span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
+          </div>
+          <span class="filename"><span class="accent">loadConfig.js</span> — Code Typing</span>
+        </div>
+        <div class="code-surface" id="surface"></div>
+      </div>
+    </div>
+    <script>
+      window.__TOKENS = {
+        feature: {
+          lang: "js",
+          theme: "github-dark",
+          bg: "#24292e",
+          fg: "#e1e4e8",
+          states: [
+            {
+              code: 'async function loadConfig(path) {\n  const raw = await readFile(path, "utf8")\n  const config = JSON.parse(raw)\n  return validate(config)\n}',
+              tokens: [
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-0",
+                  content: "async",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-1",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-2",
+                  content: "function",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-3",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-4",
+                  content: "loadConfig",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-5",
+                  content: "(",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-6",
+                  content: "path",
+                  color: "#FFAB70",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-7",
+                  content: ") {",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-8",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-9",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-10",
+                  content: "const",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-11",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-12",
+                  content: "raw",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-13",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-14",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-15",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-16",
+                  content: "await",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-17",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-18",
+                  content: "readFile",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-19",
+                  content: "(path,",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-20",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-21",
+                  content: '"utf8"',
+                  color: "#9ECBFF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-22",
+                  content: ")",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-23",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-24",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-25",
+                  content: "const",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-26",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-27",
+                  content: "config",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-28",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-29",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-30",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-31",
+                  content: "JSON",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-32",
+                  content: ".",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-33",
+                  content: "parse",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-34",
+                  content: "(raw)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-35",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-36",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-37",
+                  content: "return",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-38",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-39",
+                  content: "validate",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-40",
+                  content: "(config)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-41",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-42",
+                  content: "}",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-43",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+              ],
+            },
+          ],
+        },
+      };
+      window.__BLOCK = { id: "code-typing", effect: "typing", seq: "feature", duration: 5 };
+    </script>
+    <script>
+      // hf-code-anim.js — self-contained code-animation engine for HyperFrames registry blocks.
+      //
+      // Reuses Shiki Magic Move's baked output (window.__TOKENS, baked at author time) and
+      // drives the animation as a PAUSED GSAP timeline the HyperFrames engine seeks per frame —
+      // NOT CSS transitions (those break under non-sequential frame seeking). FLIP measurement
+      // runs once inside document.fonts.ready (glyph metrics must be final). Each block sets
+      // window.__BLOCK = { id, effect, seq, line?, duration } and includes this engine; the
+      // engine builds one scene that fills the composition and registers window.__timelines[id].
+      (function () {
+        "use strict";
+        var T = window.__TOKENS || {};
+
+        function lineDiv() {
+          var d = document.createElement("div");
+          d.className = "line";
+          return d;
+        }
+
+        // Render a code state's keyed tokens into codeEl as lines of inline-block .tok spans.
+        function renderState(codeEl, state) {
+          codeEl.textContent = "";
+          var keyToEl = new Map();
+          var line = lineDiv();
+          codeEl.appendChild(line);
+          for (var i = 0; i < state.tokens.length; i++) {
+            var t = state.tokens[i];
+            if (t.content === "\n") {
+              line = lineDiv();
+              codeEl.appendChild(line);
+              continue;
+            }
+            var span = document.createElement("span");
+            span.className = "tok";
+            span.textContent = t.content;
+            span.style.color = t.color;
+            if (t.fontStyle & 1) span.style.fontStyle = "italic";
+            if (t.fontStyle & 2) span.style.fontWeight = "700";
+            line.appendChild(span);
+            keyToEl.set(t.key, span);
+          }
+          var last = codeEl.lastChild;
+          if (last && last.className === "line" && last.children.length === 0)
+            codeEl.removeChild(last);
+          return keyToEl;
+        }
+
+        function rectsOf(keyToEl) {
+          var m = new Map();
+          keyToEl.forEach(function (el, k) {
+            var r = el.getBoundingClientRect();
+            m.set(k, { left: r.left, top: r.top });
+          });
+          return m;
+        }
+
+        function makeScene(surface, withGutter) {
+          var scene = document.createElement("div");
+          scene.className = "scene";
+          if (withGutter) {
+            var g = document.createElement("div");
+            g.className = "gutter";
+            scene.appendChild(g);
+          }
+          var code = document.createElement("div");
+          code.className = "code";
+          scene.appendChild(code);
+          surface.appendChild(scene);
+          return { scene: scene, code: code, gutter: scene.querySelector(".gutter") };
+        }
+
+        function fillGutter(g, n) {
+          var html = "";
+          for (var i = 1; i <= n; i++) html += '<span class="ln">' + i + "</span>";
+          g.innerHTML = html;
+        }
+
+        function splitLines(state) {
+          var lines = [{ text: "", tokens: [] }];
+          for (var i = 0; i < state.tokens.length; i++) {
+            var t = state.tokens[i];
+            if (t.content === "\n") {
+              lines.push({ text: "", tokens: [] });
+              continue;
+            }
+            var cur = lines[lines.length - 1];
+            cur.tokens.push(t);
+            cur.text += t.content;
+          }
+          if (lines.length && lines[lines.length - 1].tokens.length === 0) lines.pop();
+          return lines;
+        }
+
+        function lineDiff(a, b) {
+          var n = a.length;
+          var m = b.length;
+          var dp = [];
+          for (var i = 0; i <= n; i++) dp.push(new Array(m + 1).fill(0));
+          for (var i = n - 1; i >= 0; i--) {
+            for (var j = m - 1; j >= 0; j--) {
+              dp[i][j] =
+                a[i].text === b[j].text
+                  ? dp[i + 1][j + 1] + 1
+                  : Math.max(dp[i + 1][j], dp[i][j + 1]);
+            }
+          }
+          var ops = [];
+          var i = 0;
+          var j = 0;
+          while (i < n && j < m) {
+            if (a[i].text === b[j].text) {
+              ops.push({ type: "same", line: b[j] });
+              i++;
+              j++;
+            } else if (dp[i + 1][j] >= dp[i][j + 1]) {
+              ops.push({ type: "del", line: a[i] });
+              i++;
+            } else {
+              ops.push({ type: "add", line: b[j] });
+              j++;
+            }
+          }
+          while (i < n) ops.push({ type: "del", line: a[i++] });
+          while (j < m) ops.push({ type: "add", line: b[j++] });
+          return ops;
+        }
+
+        // ---- single-scene effect builders (fade in, play, hold to end) -------------
+        var FADE = 0.45;
+
+        function typing(tl, surface, state, start) {
+          var PER = 0.028; // seconds per character — smooth, fast typewriter
+          var parts = makeScene(surface, true);
+          var code = parts.code;
+
+          // Per-CHARACTER render (granular reveal reads smoother than per-token pops).
+          code.textContent = "";
+          var line = document.createElement("div");
+          line.className = "line";
+          code.appendChild(line);
+          var chars = [];
+          for (var i = 0; i < state.tokens.length; i++) {
+            var t = state.tokens[i];
+            if (t.content === "\n") {
+              line = document.createElement("div");
+              line.className = "line";
+              code.appendChild(line);
+              continue;
+            }
+            for (var c = 0; c < t.content.length; c++) {
+              var span = document.createElement("span");
+              span.className = "tok";
+              span.textContent = t.content[c];
+              span.style.color = t.color;
+              if (t.fontStyle & 1) span.style.fontStyle = "italic";
+              if (t.fontStyle & 2) span.style.fontWeight = "700";
+              line.appendChild(span);
+              chars.push({ el: span, ws: t.content[c] === " " });
+            }
+          }
+          var last = code.lastChild;
+          if (last && last.className === "line" && last.children.length === 0)
+            code.removeChild(last);
+
+          fillGutter(parts.gutter, code.querySelectorAll(".line").length);
+          var base = code.getBoundingClientRect();
+          var caret = document.createElement("div");
+          caret.className = "caret";
+          code.appendChild(caret);
+
+          tl.set(parts.scene, { opacity: 0 }, 0);
+          tl.to(parts.scene, { opacity: 1, duration: FADE, ease: "power1.out" }, start);
+
+          var t0 = start + FADE;
+          if (chars.length) {
+            var r0 = chars[0].el.getBoundingClientRect();
+            tl.set(caret, { x: r0.left - base.left, y: r0.top - base.top, opacity: 1 }, 0);
+          }
+          chars.forEach(function (c, i) {
+            var at = t0 + i * PER;
+            tl.set(c.el, { opacity: 0 }, 0);
+            // soft per-char fade (overlaps neighbors → smooth wave); whitespace appears instantly
+            tl.to(c.el, { opacity: 1, duration: c.ws ? 0.01 : 0.12, ease: "power1.out" }, at);
+            // caret glides at constant speed to each char's right edge (linear = no stop-start jitter)
+            var r = c.el.getBoundingClientRect();
+            tl.to(
+              caret,
+              { x: r.right - base.left, y: r.top - base.top, duration: PER, ease: "none" },
+              at,
+            );
+          });
+        }
+
+        function buildEffect(tl, surface, spec) {
+          var start = 0.45;
+          var seq = T[spec.seq];
+          if (spec.effect === "typing") typing(tl, surface, seq.states[0], start);
+        }
+
+        function go() {
+          var spec = window.__BLOCK;
+          var surface = document.getElementById("surface");
+          var root = document.getElementById("root");
+          window.__timelines = window.__timelines || {};
+          var tl = gsap.timeline({ paused: true });
+          // Build inside fonts.ready (glyph metrics must be final), then register.
+          // Register ONLY after the timeline is fully built: the runtime's
+          // sub-composition readiness gate treats "key present" as "ready" and
+          // nests the child once. An empty timeline registered before this build
+          // would be nested empty and never re-nested → blank render when used as
+          // a sub-composition. See the contract in engine frameCapture.ts.
+          document.fonts.ready.then(function () {
+            tl.from("#editor", { opacity: 0, scale: 0.985, duration: 0.5, ease: "power2.out" }, 0);
+            buildEffect(tl, surface, spec);
+            var dur = parseFloat(root.dataset.duration) || tl.duration();
+            tl.to({}, { duration: dur }, 0); // pad to full composition length
+            window.__timelines["code-typing"] = tl; // register AFTER setup completes
+            if (typeof window.__hfForceTimelineRebind === "function") {
+              window.__hfForceTimelineRebind(); // re-nest now that we are populated
+            }
+          });
+        }
+
+        if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", go);
+        else go();
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/cosmic-orb/__hf-variables-preview.html b/docs/public/catalog/blocks/cosmic-orb/__hf-variables-preview.html
new file mode 100644
index 0000000000..df81663f45
--- /dev/null
+++ b/docs/public/catalog/blocks/cosmic-orb/__hf-variables-preview.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Cosmic Orb variables preview</title>
+    <style>
+      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #000; }
+      #hf-vars-root { position: relative; width: 1920px; height: 1080px; }
+      #hf-vars-mount { position: absolute; inset: 0; display: grid; place-items: center; }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  </head>
+  <body>
+    <div id="hf-vars-root" data-composition-id="cosmic-orb-variables-preview" data-start="0" data-width="1920" data-height="1080" data-duration="10" data-fps="30">
+      <div id="hf-vars-mount" class="clip" data-composition-id="cosmic-orb" data-composition-src="./cosmic-orb.html" data-start="0" data-duration="10" data-track-index="0" data-width="1920" data-height="1080"></div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["cosmic-orb-variables-preview"] = gsap.timeline({ paused: true });
+    </script>
+<script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "cosmic-orb.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/cosmic-orb/cosmic-orb.html b/docs/public/catalog/blocks/cosmic-orb/cosmic-orb.html
new file mode 100644
index 0000000000..dfce9f080e
--- /dev/null
+++ b/docs/public/catalog/blocks/cosmic-orb/cosmic-orb.html
@@ -0,0 +1,447 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Cosmic Orb</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #000;
+        overflow: hidden;
+      }
+      #co-root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #co-backdrop {
+        position: absolute;
+        inset: 0;
+        background: #04040a;
+      }
+      #co-canvas {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="co-root"
+      data-composition-id="cosmic-orb"
+      data-root="true"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="10"
+      data-composition-variables='[
+        {"id":"hue","type":"number","label":"Nebula hue","default":268,"min":0,"max":360,"step":1,"unit":"deg"},
+        {"id":"accent","type":"number","label":"Accent hue","default":196,"min":0,"max":360,"step":1,"unit":"deg"},
+        {"id":"spin","type":"number","label":"Spin rate","default":0.035,"min":0,"max":0.5,"step":0.005,"unit":"turns/s"},
+        {"id":"stars","type":"number","label":"Star density","default":1,"min":0,"max":2,"step":0.05},
+        {"id":"glow","type":"number","label":"Glow intensity","default":1,"min":0,"max":2,"step":0.05},
+        {"id":"size","type":"number","label":"Orb size","default":0.86,"min":0.2,"max":1.2,"step":0.01},
+        {"id":"pulse","type":"number","label":"Beat pulse","default":0,"min":0,"max":1,"step":0.01},
+        {"id":"pulseEnvelope","type":"string","label":"Beat pulse envelope (comma-separated 0-1 samples)","default":"","placeholder":"0,0.2,1,0.4,0"},
+        {"id":"backdrop","type":"color","label":"Backdrop","default":"#04040a"}
+      ]'
+    >
+      <div id="co-backdrop"></div>
+      <canvas id="co-canvas" width="1920" height="1080"></canvas>
+
+      <!-- Driver clip: gives HyperFrames a timed element to own on track 0. -->
+      <div
+        id="co-drv"
+        class="clip"
+        data-start="0"
+        data-duration="10"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+
+    <script>
+      (function () {
+        var DUR = 10;
+        var W = 1920;
+        var H = 1080;
+
+        var ROOT = document.getElementById("co-root");
+        var CS = getComputedStyle(ROOT);
+
+        // `data-composition-variables` is the single owner of every declared
+        // default — parse it rather than repeating each default a second time
+        // in JS. `window.__hyperframes` is NOT guaranteed to exist yet when this
+        // inline script runs, so it can only ever be an override, never the
+        // source. Precedence: host CSS custom property, runtime variable bag,
+        // declared default.
+        var DECL = {};
+        JSON.parse(ROOT.getAttribute("data-composition-variables") || "[]").forEach(function (v) {
+          DECL[v.id] = v.default;
+        });
+        var HF = window.__hyperframes;
+        var V = (HF && HF.getVariables && HF.getVariables()) || {};
+
+        function raw(id) {
+          var css = CS.getPropertyValue("--" + id.toLowerCase()).trim();
+          if (css !== "") return css;
+          if (V[id] !== undefined && V[id] !== "") return V[id];
+          return DECL[id];
+        }
+        function num(id) {
+          var n = parseFloat(raw(id));
+          return isFinite(n) ? n : 0;
+        }
+        function str(id) {
+          var s = raw(id);
+          return typeof s === "string" ? s.trim() : "";
+        }
+
+        var HUE = num("hue");
+        var ACCENT = num("accent");
+        var SPIN = num("spin");
+        var STARS = num("stars");
+        var GLOW = num("glow");
+        var SIZE = num("size");
+        var PULSE = num("pulse");
+        var BACKDROP = str("backdrop");
+
+        document.getElementById("co-backdrop").style.background = BACKDROP;
+
+        // Beat hook. A precomputed envelope (comma-separated 0-1 samples spread
+        // evenly across the clip) is sampled closed-form at time t — no audio
+        // analysis, no accumulator. Empty envelope => the flat `pulse` value.
+        var ENV = str("pulseEnvelope")
+          .split(",")
+          .map(function (s) {
+            return parseFloat(s);
+          })
+          .filter(function (n) {
+            return isFinite(n);
+          });
+
+        function pulseAt(t) {
+          if (ENV.length === 0) return PULSE;
+          if (ENV.length === 1) return ENV[0];
+          var x = Math.min(1, Math.max(0, t / DUR)) * (ENV.length - 1);
+          var i = Math.floor(x);
+          var j = Math.min(i + 1, ENV.length - 1);
+          return ENV[i] + (ENV[j] - ENV[i]) * (x - i);
+        }
+
+        var canvas = document.getElementById("co-canvas");
+        var gl =
+          canvas.getContext("webgl", {
+            alpha: true,
+            antialias: false,
+            depth: false,
+            stencil: false,
+            preserveDrawingBuffer: true,
+            powerPreference: "high-performance",
+          }) ||
+          canvas.getContext("experimental-webgl", {
+            alpha: true,
+            preserveDrawingBuffer: true,
+          });
+
+        var VERT = [
+          "attribute vec2 aPos;",
+          "void main() { gl_Position = vec4(aPos, 0.0, 1.0); }",
+        ].join("\n");
+
+        var FRAG = [
+          "precision highp float;",
+          "uniform vec2 uRes;",
+          "uniform float uTime;",
+          "uniform float uRadius;",
+          "uniform float uSpin;",
+          "uniform float uHue;",
+          "uniform float uAccent;",
+          "uniform float uStars;",
+          "uniform float uGlow;",
+          "uniform float uPulse;",
+          "const float TAU = 6.28318531;",
+          "",
+          "// One cheap hash for every random-looking thing in here.",
+          "float h1(float x) { return fract(sin(x * 127.1) * 43758.5453); }",
+          "float h2(vec2 p) { return h1(dot(p, vec2(1.0, 157.31))); }",
+          "",
+          "vec3 hue2rgb(float h) {",
+          "  return clamp(abs(mod(h * 6.0 + vec3(0.0, 4.0, 2.0), 6.0) - 3.0) - 1.0, 0.0, 1.0);",
+          "}",
+          "",
+          "vec3 rotX(vec3 p, float a) { float c = cos(a), s = sin(a); return vec3(p.x, c * p.y - s * p.z, s * p.y + c * p.z); }",
+          "vec3 rotY(vec3 p, float a) { float c = cos(a), s = sin(a); return vec3(c * p.x + s * p.z, p.y, -s * p.x + c * p.z); }",
+          "vec3 rotZ(vec3 p, float a) { float c = cos(a), s = sin(a); return vec3(c * p.x - s * p.y, s * p.x + c * p.y, p.z); }",
+          "",
+          "vec3 safeDir(vec3 v) {",
+          "  float l = dot(v, v);",
+          "  if (l < 1e-6) return vec3(0.0, 0.0, -1.0);",
+          "  return v * inversesqrt(l);",
+          "}",
+          "",
+          "// Fixed axial tilt, then spin about the tilted polar axis.",
+          "vec3 toBody(vec3 n, float spin) { return rotY(rotZ(rotX(n, -0.34), 0.42), -spin); }",
+          "vec2 lonlat(vec3 d) { return vec2(atan(d.x, d.z), asin(clamp(d.y, -1.0, 1.0))); }",
+          "",
+          "float dens(float base) { return clamp(1.0 - (1.0 - base) * uStars, 0.0, 1.0); }",
+          "",
+          "// One star size-class: cell grid, seeded jitter, soft round core.",
+          "float starField(vec2 q, float freq, float base, float rad) {",
+          "  vec2 g = q * freq;",
+          "  vec2 id = floor(g);",
+          "  float h = h2(id);",
+          "  if (h < dens(base)) return 0.0;",
+          "  vec2 c = vec2(h2(id + vec2(3.7, 1.3)), h2(id + vec2(9.1, 5.5)));",
+          "  float d = length(fract(g) - c);",
+          "  float core = smoothstep(rad, 0.0, d);",
+          "  // Twinkle: a per-star phase driven straight off uTime, no accumulator.",
+          "  float tw = 0.62 + 0.38 * sin(uTime * 2.4 + h * 53.7);",
+          "  return core * core * (0.45 + 0.55 * h1(h * 91.7)) * tw;",
+          "}",
+          "",
+          "// 4-point diffraction glare, only worth paying for on the brightest class.",
+          "float starGlare(vec2 q, float freq, float base) {",
+          "  vec2 g = q * freq;",
+          "  vec2 id = floor(g);",
+          "  float h = h2(id);",
+          "  if (h < dens(base)) return 0.0;",
+          "  vec2 c = vec2(h2(id + vec2(3.7, 1.3)), h2(id + vec2(9.1, 5.5)));",
+          "  vec2 dv = abs(fract(g) - c);",
+          "  float hx = exp(-dv.x * 70.0) * exp(-dv.y * 9.0);",
+          "  float hy = exp(-dv.y * 70.0) * exp(-dv.x * 9.0);",
+          "  return max(hx, hy) * 0.45;",
+          "}",
+          "",
+          "// Three size-classes at ~6 / 11 / 19 cell frequency.",
+          "float starsAll(vec2 q, float gain) {",
+          "  float s = starField(q, 6.0, 0.958, 0.20);",
+          "  s += starGlare(q, 6.0, 0.958);",
+          "  s += starField(q, 11.0, 0.920, 0.18) * 0.95;",
+          "  s += starField(q, 19.0, 0.865, 0.17) * 0.75;",
+          "  return s * gain;",
+          "}",
+          "",
+          "vec3 nebula(vec2 q) {",
+          "  // Two sin-field turbulence layers.",
+          "  float t1 = sin(q.x * 3.1 + sin(q.y * 2.7) * 1.9) * sin(q.y * 4.3 + sin(q.x * 1.7) * 2.3);",
+          "  float t2 = sin(q.x * 7.9 + sin(q.y * 5.1) * 1.3) * sin(q.y * 9.7 + sin(q.x * 4.4) * 1.1);",
+          "  float turb = t1 * 0.66 + t2 * 0.34;",
+          "",
+          "  // Galaxy bands, warped by the turbulence.",
+          "  float band = sin(q.y * 3.2 + turb * 1.7 + q.x * 0.55);",
+          "  float bands = pow(max(0.0, band * 0.5 + 0.5), 3.2);",
+          "",
+          "  // Dust lanes: broad darkened swathes, not a thin curve.",
+          "  float lane = sin(q.y * 2.9 + q.x * 1.3 + t1 * 1.6);",
+          "  float dust = 0.22 + 0.78 * smoothstep(-0.45, 0.75, lane);",
+          "",
+          "  // Core bulge.",
+          "  float dc = length(vec2((q.x - 0.55) * 0.5, (q.y + 0.12) * 1.1));",
+          "  float core = exp(-dc * dc * 2.6);",
+          "",
+          "  // Two pocket glows.",
+          "  float dA = length(vec2((q.x + 1.95) * 0.62, (q.y - 0.52) * 1.45));",
+          "  float dB = length(vec2((q.x - 2.35) * 0.55, (q.y + 0.78) * 1.30));",
+          "  float pA = exp(-dA * dA * 4.0);",
+          "  float pB = exp(-dB * dB * 5.0);",
+          "",
+          "  vec3 cNeb = hue2rgb(uHue / 360.0);",
+          "  vec3 cAcc = hue2rgb(uAccent / 360.0);",
+          "  vec3 cWarm = hue2rgb(uHue / 360.0 + 0.07);",
+          "",
+          "  vec3 col = mix(cNeb, cWarm, 0.5 + 0.5 * turb) * bands * dust * 0.17;",
+          "  col += mix(cNeb, vec3(1.0), 0.50) * core * dust * 0.13;",
+          "  col += mix(cAcc, vec3(1.0), 0.60) * pA * 0.30 * uGlow;",
+          "  col += mix(cNeb, vec3(1.0), 0.50) * pB * 0.24 * uGlow;",
+          "  return col;",
+          "}",
+          "",
+          "void main() {",
+          "  vec2 p = (gl_FragCoord.xy - uRes * 0.5) / uRadius;",
+          "  float r = length(p);",
+          "  float aa = 1.4 / uRadius;",
+          "  float spin = TAU * uSpin * uTime;",
+          "",
+          "  vec3 cNeb = hue2rgb(uHue / 360.0);",
+          "  vec3 cAcc = hue2rgb(uAccent / 360.0);",
+          "",
+          "  float mask = smoothstep(1.0 + aa, 1.0 - aa, r);",
+          "  float halo = exp(-max(0.0, r - 1.0) * 13.0) * (1.0 - mask);",
+          "",
+          "  vec3 body = vec3(0.0);",
+          "  if (mask > 0.001) {",
+          "    float rc = min(r, 1.0);",
+          "    // Analytic sphere: the normal falls straight out of z = sqrt(1 - r^2).",
+          "    float z = sqrt(max(0.0, 1.0 - rc * rc));",
+          "    vec3 N = vec3(p.x, p.y, z);",
+          "    vec2 q = lonlat(toBody(safeDir(N), spin));",
+          "",
+          "    float gain = 0.9 + 2.6 * uPulse;",
+          "    body = nebula(q);",
+          "    body += vec3(1.0) * starsAll(q, gain) * (0.95 + 0.15 * uGlow);",
+          "",
+          "    // Limb darkening.",
+          "    body *= mix(0.32, 1.0, pow(z, 0.5));",
+          "",
+          "    // Refract-sampled back layer, split per channel: the chromatic",
+          "    // aberration that reads as glass at the limb.",
+          "    vec3 I = vec3(0.0, 0.0, -1.0);",
+          "    vec3 dR = safeDir(refract(I, N, 1.0 / 1.09));",
+          "    vec3 dG = safeDir(refract(I, N, 1.0 / 1.13));",
+          "    vec3 dB = safeDir(refract(I, N, 1.0 / 1.17));",
+          "    vec2 qR = lonlat(toBody(dR, spin));",
+          "    vec2 qG = lonlat(toBody(dG, spin));",
+          "    vec2 qB = lonlat(toBody(dB, spin));",
+          "    vec3 back = vec3(starsAll(qR, gain), starsAll(qG, gain), starsAll(qB, gain));",
+          "    float fres = pow(1.0 - z, 1.8);",
+          "    body += back * fres * 2.2;",
+          "    body += nebula(qG) * fres * 0.8;",
+          "",
+          "    // Aurora sheen riding the glass shell.",
+          "    float ang = atan(p.y, p.x);",
+          "    float sheen = smoothstep(0.72, 0.99, r) * smoothstep(1.0, 0.90, r);",
+          "    float w = 0.5 + 0.5 * sin(ang * 2.0 + spin * 1.6);",
+          "    body += (mix(cNeb, cAcc, w) * 0.55 + vec3(0.16)) * sheen * 0.30 * uGlow;",
+          "",
+          "    // Three speculars, fixed in screen space: the key light does not spin.",
+          "    vec2 a1 = p - vec2(-0.34, 0.62);",
+          "    vec2 a2 = p - vec2(0.58, 0.60);",
+          "    vec2 a3 = p - vec2(0.24, -0.80);",
+          "    float sp = exp(-dot(a1, a1) * 30.0) * 0.30;",
+          "    sp += exp(-dot(a2, a2) * 150.0) * 0.80;",
+          "    sp += exp(-dot(a3, a3) * 70.0) * 0.30;",
+          "    body += vec3(1.0) * sp * (0.30 + 0.70 * pow(1.0 - z, 1.5)) * uGlow;",
+          "",
+          "    // Fresnel void glow hugging the inside of the rim.",
+          "    body += mix(cAcc, vec3(1.0), 0.4) * pow(1.0 - z, 6.0) * 0.30 * uGlow;",
+          "  }",
+          "",
+          "  vec3 haloCol = mix(cNeb, cAcc, 0.35);",
+          "  vec3 outCol = body * mask + haloCol * halo * 0.22 * uGlow;",
+          "  float outA = clamp(mask + halo * 0.16 * uGlow, 0.0, 1.0);",
+          "  gl_FragColor = vec4(clamp(outCol, 0.0, 4.0), outA);",
+          "}",
+        ].join("\n");
+
+        var uni = {};
+        var ready = false;
+
+        function compile(type, src) {
+          var sh = gl.createShader(type);
+          gl.shaderSource(sh, src);
+          gl.compileShader(sh);
+          if (!gl.getShaderParameter(sh, gl.COMPILE_STATUS)) {
+            throw new Error("cosmic-orb shader: " + gl.getShaderInfoLog(sh));
+          }
+          return sh;
+        }
+
+        if (gl) {
+          var prog = gl.createProgram();
+          gl.attachShader(prog, compile(gl.VERTEX_SHADER, VERT));
+          gl.attachShader(prog, compile(gl.FRAGMENT_SHADER, FRAG));
+          gl.linkProgram(prog);
+          if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {
+            throw new Error("cosmic-orb link: " + gl.getProgramInfoLog(prog));
+          }
+          gl.useProgram(prog);
+
+          var buf = gl.createBuffer();
+          gl.bindBuffer(gl.ARRAY_BUFFER, buf);
+          gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
+          var loc = gl.getAttribLocation(prog, "aPos");
+          gl.enableVertexAttribArray(loc);
+          gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0);
+
+          [
+            "uRes",
+            "uTime",
+            "uRadius",
+            "uSpin",
+            "uHue",
+            "uAccent",
+            "uStars",
+            "uGlow",
+            "uPulse",
+          ].forEach(function (n) {
+            uni[n] = gl.getUniformLocation(prog, n);
+          });
+
+          gl.viewport(0, 0, W, H);
+          gl.uniform2f(uni.uRes, W, H);
+          gl.uniform1f(uni.uRadius, (SIZE * H) / 2);
+          gl.uniform1f(uni.uSpin, SPIN);
+          gl.uniform1f(uni.uHue, HUE);
+          gl.uniform1f(uni.uAccent, ACCENT);
+          gl.uniform1f(uni.uStars, STARS);
+          gl.uniform1f(uni.uGlow, GLOW);
+          ready = true;
+        }
+
+        // Every frame is computed from t alone: spin is spin_rate * t, the
+        // pulse is sampled from the envelope at t. No accumulators, no clocks.
+        function draw(t) {
+          if (!ready) return;
+          gl.uniform1f(uni.uTime, t);
+          gl.uniform1f(uni.uPulse, pulseAt(t));
+          gl.clearColor(0, 0, 0, 0);
+          gl.clear(gl.COLOR_BUFFER_BIT);
+          gl.drawArrays(gl.TRIANGLES, 0, 3);
+          gl.flush();
+        }
+
+        window.__timelines = window.__timelines || {};
+        var tl = gsap.timeline({ paused: true });
+
+        // The canvas is repainted from a property SETTER, not from onUpdate:
+        // gsap's seek(t) suppresses events by default, so an onUpdate callback
+        // silently never fires on a scrub and the canvas freezes on frame 0.
+        // Tweened values are always written during render, suppressed or not,
+        // so this fires on every seek — and hands us the frame time directly.
+        var driver = { _t: 0 };
+        Object.defineProperty(driver, "t", {
+          get: function () {
+            return this._t;
+          },
+          set: function (v) {
+            this._t = v;
+            draw(v);
+          },
+        });
+        tl.to(driver, { t: DUR, duration: DUR, ease: "none" }, 0);
+        window.__timelines["cosmic-orb"] = tl;
+
+        draw(0);
+      })();
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "cosmic-orb.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/blocks/cross-warp-morph/cross-warp-morph.html b/docs/public/catalog/blocks/cross-warp-morph/cross-warp-morph.html
new file mode 100644
index 0000000000..6945d3dd94
--- /dev/null
+++ b/docs/public/catalog/blocks/cross-warp-morph/cross-warp-morph.html
@@ -0,0 +1,377 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      @import url("https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Bebas+Neue&family=JetBrains+Mono:wght@400;700&family=Lato:wght@400;700&display=block");
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <style>
+        [data-composition-id="main"] {
+          width: 1920px;
+          height: 1080px;
+          overflow: hidden;
+          position: relative;
+          background: #283618;
+        }
+
+        /* Blueprint grid */
+        .bp-grid {
+          position: absolute;
+          inset: 0;
+          background-image:
+            linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
+            linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
+          background-size: 40px 40px;
+          pointer-events: none;
+        }
+
+        /* Layout */
+        .bp-left {
+          position: absolute;
+          left: 0;
+          top: 0;
+          bottom: 0;
+          width: 1200px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .bp-right {
+          position: absolute;
+          right: 0;
+          top: 0;
+          bottom: 0;
+          width: 720px;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          padding: 60px 60px 60px 40px;
+        }
+        .bp-divider {
+          position: absolute;
+          left: 1200px;
+          top: 60px;
+          bottom: 60px;
+          width: 1px;
+          background: #a7c957;
+          opacity: 0.15;
+        }
+        .bp-number {
+          font-family: "Space Mono", monospace;
+          font-size: 14px;
+          font-weight: 700;
+          letter-spacing: 0.4em;
+          text-transform: uppercase;
+          position: absolute;
+          top: 40px;
+          left: 60px;
+          color: #a7c957;
+        }
+
+        /* Right panel typography */
+        .bp-name {
+          font-family: "Bebas Neue", sans-serif;
+          font-size: 38px;
+          letter-spacing: 0.08em;
+          margin-bottom: 20px;
+          color: #a7c957;
+        }
+        .bp-plabel {
+          font-family: "Space Mono", monospace;
+          font-size: 11px;
+          font-weight: 700;
+          letter-spacing: 0.3em;
+          text-transform: uppercase;
+          margin-bottom: 10px;
+          color: #a7c957;
+          opacity: 0.5;
+        }
+        .bp-prompt {
+          font-family: "JetBrains Mono", monospace;
+          font-size: 20px;
+          line-height: 1.6;
+          padding: 16px 20px;
+          border-radius: 6px;
+          margin-bottom: 20px;
+          color: #a7c957;
+          background: rgba(167, 201, 87, 0.06);
+          border: 1px solid rgba(167, 201, 87, 0.12);
+        }
+        .bp-desc {
+          font-family: "Lato", sans-serif;
+          font-size: 17px;
+          line-height: 1.6;
+          color: #8aaa9a;
+          opacity: 0.55;
+        }
+
+        /* GL scenes (hidden, just for texture capture) */
+        .scene {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1200px;
+          height: 1080px;
+          overflow: hidden;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .scene-label {
+          font-family: "Bebas Neue", sans-serif;
+          font-size: 140px;
+          letter-spacing: 0.06em;
+          opacity: 0.12;
+        }
+      </style>
+
+      <div class="bp-grid"></div>
+      <div class="bp-divider"></div>
+      <div class="bp-number">13 / 14</div>
+
+      <!-- GL demo scenes (captured as textures, then hidden) -->
+      <div id="s1" class="scene" style="background: #283618">
+        <div class="scene-label" style="color: #a7c957">SCENE A</div>
+      </div>
+      <div id="s2" class="scene" style="background: #a7c957; opacity: 0">
+        <div class="scene-label" style="color: #283618">SCENE B</div>
+      </div>
+
+      <!-- GL canvas (left panel only) -->
+      <canvas
+        id="gl-canvas"
+        width="1200"
+        height="1080"
+        style="
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1200px;
+          height: 1080px;
+          z-index: 10;
+          pointer-events: none;
+          display: none;
+        "
+      >
+      </canvas>
+
+      <!-- Right panel metadata -->
+      <div class="bp-right">
+        <div class="bp-name">Cross-Warp Morph</div>
+        <div class="bp-plabel">Prompt</div>
+        <div class="bp-prompt">"use cross-warp morph shader transition"</div>
+        <div class="bp-desc">
+          Both scenes displace along a shared FBM noise field in opposite directions. Noise-driven
+          blend boundary.
+        </div>
+      </div>
+
+      <div
+        id="driver"
+        class="clip"
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+      var glCanvas = document.getElementById("gl-canvas");
+      var gl = glCanvas.getContext("webgl", { preserveDrawingBuffer: true });
+      if (!gl) {
+        console.warn("WebGL not available");
+        window.__timelines["main"] = gsap.timeline({ paused: true });
+      } else {
+        gl.viewport(0, 0, 1200, 1080);
+        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
+        var sceneTextures = {};
+
+        function captureScene(sceneId) {
+          var scene = document.getElementById(sceneId);
+          var origOpacity = scene.style.opacity;
+          var origZ = scene.style.zIndex;
+          scene.style.opacity = "1";
+          scene.style.zIndex = "999";
+          scene.offsetHeight;
+          var c = document.createElement("canvas");
+          c.width = 1200;
+          c.height = 1080;
+          var ctx = c.getContext("2d");
+          ctx.fillStyle = window.getComputedStyle(scene).backgroundColor;
+          ctx.fillRect(0, 0, 1200, 1080);
+          var sr = scene.getBoundingClientRect();
+          var els = scene.querySelectorAll("*");
+          for (var i = 0; i < els.length; i++) {
+            var el = els[i],
+              cs = window.getComputedStyle(el);
+            if (cs.display === "none" || cs.visibility === "hidden") continue;
+            var r = el.getBoundingClientRect();
+            if (r.width < 1 || r.height < 1) continue;
+            var x = r.left - sr.left,
+              y = r.top - sr.top,
+              w = r.width,
+              h = r.height;
+            ctx.save();
+            ctx.globalAlpha = parseFloat(cs.opacity) || 1;
+            var bg = cs.backgroundColor;
+            if (bg && bg !== "rgba(0, 0, 0, 0)" && bg !== "transparent") {
+              ctx.fillStyle = bg;
+              ctx.fillRect(x, y, w, h);
+            }
+            var hasChildEls = el.querySelector("div,span,img,video");
+            var text = "";
+            for (var j = 0; j < el.childNodes.length; j++)
+              if (el.childNodes[j].nodeType === 3) text += el.childNodes[j].textContent;
+            text = text.trim();
+            if (text && !hasChildEls) {
+              ctx.font = cs.fontWeight + " " + cs.fontSize + " " + cs.fontFamily;
+              ctx.fillStyle = cs.color;
+              if (cs.letterSpacing && cs.letterSpacing !== "normal")
+                ctx.letterSpacing = cs.letterSpacing;
+              ctx.textAlign = "center";
+              ctx.textBaseline = "middle";
+              ctx.fillText(text, x + w / 2, y + h / 2);
+            }
+            ctx.restore();
+          }
+          scene.style.opacity = origOpacity;
+          scene.style.zIndex = origZ;
+          var tex = gl.createTexture();
+          gl.bindTexture(gl.TEXTURE_2D, tex);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+          gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, c);
+          sceneTextures[sceneId] = tex;
+        }
+
+        var vertSrc =
+          "attribute vec2 a_pos; varying vec2 v_uv; void main(){" +
+          "v_uv=a_pos*0.5+0.5; v_uv.y=1.0-v_uv.y; gl_Position=vec4(a_pos,0,1);}";
+        var quadBuf = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);
+        gl.bufferData(
+          gl.ARRAY_BUFFER,
+          new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),
+          gl.STATIC_DRAW,
+        );
+        function compileShader(src, type) {
+          var s = gl.createShader(type);
+          gl.shaderSource(s, src);
+          gl.compileShader(s);
+          if (!gl.getShaderParameter(s, gl.COMPILE_STATUS))
+            console.error("Shader:", gl.getShaderInfoLog(s));
+          return s;
+        }
+        function mkProg(fragSrc) {
+          var p = gl.createProgram();
+          gl.attachShader(p, compileShader(vertSrc, gl.VERTEX_SHADER));
+          gl.attachShader(p, compileShader(fragSrc, gl.FRAGMENT_SHADER));
+          gl.linkProgram(p);
+          if (!gl.getProgramParameter(p, gl.LINK_STATUS))
+            console.error("Link:", gl.getProgramInfoLog(p));
+          return p;
+        }
+
+        var H =
+          "precision mediump float;" +
+          "varying vec2 v_uv;" +
+          "uniform sampler2D u_from, u_to;" +
+          "uniform float u_progress;" +
+          "uniform vec2 u_resolution;\n";
+
+        var NQ =
+          "float hash(vec2 p){return fract(sin(dot(p,vec2(127.1,311.7)))*43758.5453);}" +
+          "float vnoise(vec2 p){vec2 i=floor(p),f=fract(p);" +
+          "f=f*f*f*(f*(f*6.-15.)+10.);" +
+          "return mix(mix(hash(i),hash(i+vec2(1,0)),f.x)," +
+          "mix(hash(i+vec2(0,1)),hash(i+vec2(1,1)),f.x),f.y);}" +
+          "float fbm(vec2 p){float v=0.,a=.5;" +
+          "mat2 R=mat2(.8,.6,-.6,.8);" +
+          "for(int i=0;i<5;i++){v+=a*vnoise(p);p=R*p*2.02;a*=.5;}return v;}";
+
+        var progPass = mkProg(H + "void main(){gl_FragColor=texture2D(u_from,v_uv);}");
+        var progTrans = mkProg(
+          H +
+            NQ +
+            "void main(){vec2 disp=vec2(fbm(v_uv*3.),fbm(v_uv*3.+vec2(7.3,3.7)))-.5;vec2 fromUv=clamp(v_uv+disp*u_progress*.5,0.,1.);vec2 toUv=clamp(v_uv-disp*(1.-u_progress)*.5,0.,1.);vec4 A=texture2D(u_from,fromUv);vec4 B=texture2D(u_to,toUv);float n=fbm(v_uv*4.+vec2(3.1,1.7));float blend=smoothstep(.4,.6,n+u_progress*1.2-.6);gl_FragColor=mix(A,B,blend);}",
+        );
+
+        function renderShader(prog, texFrom, texTo, progress) {
+          gl.useProgram(prog);
+          gl.activeTexture(gl.TEXTURE0);
+          gl.bindTexture(gl.TEXTURE_2D, texFrom);
+          gl.uniform1i(gl.getUniformLocation(prog, "u_from"), 0);
+          gl.activeTexture(gl.TEXTURE1);
+          gl.bindTexture(gl.TEXTURE_2D, texTo);
+          gl.uniform1i(gl.getUniformLocation(prog, "u_to"), 1);
+          gl.uniform1f(gl.getUniformLocation(prog, "u_progress"), progress);
+          gl.uniform2f(gl.getUniformLocation(prog, "u_resolution"), 1200, 1080);
+          var pos = gl.getAttribLocation(prog, "a_pos");
+          gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);
+          gl.enableVertexAttribArray(pos);
+          gl.vertexAttribPointer(pos, 2, gl.FLOAT, false, 0, 0);
+          gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+        }
+
+        function easeInOut(p) {
+          return p < 0.5 ? 2 * p * p : 1 - Math.pow(-2 * p + 2, 2) / 2;
+        }
+
+        captureScene("s1");
+        captureScene("s2");
+        glCanvas.style.display = "block";
+        renderShader(progPass, sceneTextures["s1"], sceneTextures["s1"], 0);
+        document.querySelectorAll(".scene").forEach(function (s) {
+          s.style.opacity = "0";
+        });
+
+        var tl = gsap.timeline({
+          paused: true,
+          onUpdate: function () {
+            var t = tl.time();
+            if (t >= 1.0 && t < 3.0) {
+              renderShader(
+                progTrans,
+                sceneTextures["s1"],
+                sceneTextures["s2"],
+                easeInOut((t - 1.0) / 2.0),
+              );
+            } else if (t >= 3.0) {
+              renderShader(progPass, sceneTextures["s2"], sceneTextures["s2"], 0);
+            } else {
+              renderShader(progPass, sceneTextures["s1"], sceneTextures["s1"], 0);
+            }
+          },
+        });
+        tl.to({ v: 0 }, { v: 1, duration: 4, ease: "none" }, 0);
+        window.__timelines["main"] = tl;
+      } // end if (gl)
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/data-chart/data-chart.html b/docs/public/catalog/blocks/data-chart/data-chart.html
new file mode 100644
index 0000000000..328576615d
--- /dev/null
+++ b/docs/public/catalog/blocks/data-chart/data-chart.html
@@ -0,0 +1,457 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Data Chart</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&family=Libre+Franklin:wght@300;400;600&display=block"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background-color: #faf9f6;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="data-chart"
+      data-composition-id="data-chart"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="15"
+    >
+      <div class="chart-container">
+        <!-- Header Section -->
+        <div class="header">
+          <h1 class="headline">Monthly Revenue vs. Conversion Rate</h1>
+          <p class="subtitle">Jan–Jun 2024, in thousands</p>
+          <div class="key">
+            <div class="key-item">
+              <div class="key-box revenue-box"></div>
+              <span class="key-text">Revenue</span>
+            </div>
+            <div class="key-item">
+              <div class="key-line conversion-line"></div>
+              <span class="key-text">Conversion Rate</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- SVG Chart Area -->
+        <svg class="chart-svg" viewBox="0 0 1600 700" preserveAspectRatio="xMidYMid meet">
+          <!-- Gridlines Group -->
+          <g class="gridlines"></g>
+
+          <!-- X-Axis Labels -->
+          <g class="x-axis-labels"></g>
+
+          <!-- Bars Group (Revenue) -->
+          <g class="bars-group"></g>
+
+          <!-- Bar Labels Group -->
+          <g class="bar-labels-group"></g>
+
+          <!-- Line Group (Conversion Rate) -->
+          <g class="line-group">
+            <path class="conversion-path" fill="none" stroke="#326FA8" stroke-width="1.5" />
+            <circle class="line-dot" r="5" fill="#326FA8" style="opacity: 0" />
+          </g>
+
+          <!-- Line Labels Group -->
+          <g class="line-labels-group"></g>
+
+          <!-- Baseline -->
+          <line x1="100" y1="600" x2="1500" y2="600" stroke="black" stroke-width="1" />
+        </svg>
+
+        <!-- Source Line -->
+        <div class="source">Source: Internal analytics</div>
+      </div>
+
+      <style>
+        [data-composition-id="data-chart"] {
+          width: 1920px;
+          height: 1080px;
+          background-color: #faf9f6;
+          font-family: "Libre Franklin", sans-serif;
+          color: #333;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          overflow: hidden;
+        }
+
+        [data-composition-id="data-chart"] .chart-container {
+          width: 1600px;
+          height: 900px;
+          display: flex;
+          flex-direction: column;
+          position: relative;
+          transform: scale(1.15);
+          transform-origin: center center;
+        }
+
+        [data-composition-id="data-chart"] .header {
+          margin-bottom: 40px;
+          text-align: left;
+        }
+
+        [data-composition-id="data-chart"] .headline {
+          font-family: "Libre Baskerville", serif;
+          font-size: 42px;
+          margin: 0;
+          padding: 0;
+          clip-path: inset(0 100% 0 0);
+          white-space: nowrap;
+        }
+
+        [data-composition-id="data-chart"] .subtitle {
+          font-size: 16px;
+          color: #666;
+          margin: 8px 0 16px 0;
+          clip-path: inset(0 100% 0 0);
+          white-space: nowrap;
+        }
+
+        [data-composition-id="data-chart"] .key {
+          display: flex;
+          gap: 24px;
+          opacity: 0;
+        }
+
+        [data-composition-id="data-chart"] .key-item {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+        }
+
+        [data-composition-id="data-chart"] .key-box {
+          width: 10px;
+          height: 10px;
+          background-color: #5c5c5c;
+        }
+
+        [data-composition-id="data-chart"] .key-line {
+          width: 16px;
+          height: 1.5px;
+          background-color: #326fa8;
+        }
+
+        [data-composition-id="data-chart"] .key-text {
+          font-size: 13px;
+          color: #666;
+        }
+
+        [data-composition-id="data-chart"] .chart-svg {
+          width: 100%;
+          height: 600px;
+          overflow: visible;
+        }
+
+        [data-composition-id="data-chart"] .source {
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          font-size: 11px;
+          color: #999;
+          opacity: 0;
+        }
+
+        [data-composition-id="data-chart"] .grid-line {
+          stroke: #e8e8e8;
+          stroke-width: 0.5px;
+          opacity: 0;
+        }
+
+        [data-composition-id="data-chart"] .axis-label {
+          font-size: 14px;
+          fill: #666;
+          text-anchor: middle;
+        }
+
+        [data-composition-id="data-chart"] .bar {
+          fill: #5c5c5c;
+        }
+
+        [data-composition-id="data-chart"] .bar-label {
+          font-size: 14px;
+          fill: #333;
+          text-anchor: middle;
+          opacity: 0;
+        }
+
+        [data-composition-id="data-chart"] .line-label {
+          font-size: 14px;
+          fill: #326fa8;
+          font-weight: 600;
+          text-anchor: middle;
+          opacity: 0;
+        }
+      </style>
+
+      <script>
+        (function () {
+          const svg = document.querySelector('[data-composition-id="data-chart"] .chart-svg');
+          const tl = gsap.timeline({ paused: true });
+
+          // Data
+          const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"];
+          const revenueData = [8, 12, 15, 11, 18, 22];
+          const conversionData = [2.1, 2.8, 3.2, 2.9, 3.8, 4.2];
+
+          // Chart Dimensions
+          const chartWidth = 1400;
+          const chartHeight = 500;
+          const startX = 100;
+          const startY = 600;
+          const barWidth = 80;
+          const spacing = (chartWidth - barWidth * months.length) / (months.length + 1);
+
+          // Scales
+          const maxRevenue = 25;
+          const maxConversion = 5;
+
+          const getBarY = (val) => startY - (val / maxRevenue) * chartHeight;
+          const getLineY = (val) => startY - (val / maxConversion) * chartHeight;
+          const getX = (i) => startX + spacing + i * (barWidth + spacing) + barWidth / 2;
+
+          // Setup Elements
+          const gridGroup = svg.querySelector(".gridlines");
+          const xAxisGroup = svg.querySelector(".x-axis-labels");
+          const barsGroup = svg.querySelector(".bars-group");
+          const barLabelsGroup = svg.querySelector(".bar-labels-group");
+          const lineLabelsGroup = svg.querySelector(".line-labels-group");
+          const conversionPath = svg.querySelector(".conversion-path");
+          const lineDot = svg.querySelector(".line-dot");
+
+          // Create Gridlines
+          for (let i = 1; i <= 5; i++) {
+            const y = startY - i * (chartHeight / 5);
+            const line = document.createElementNS("http://www.w3.org/2000/svg", "line");
+            line.setAttribute("x1", startX);
+            line.setAttribute("y1", y);
+            line.setAttribute("x2", startX + chartWidth);
+            line.setAttribute("y2", y);
+            line.setAttribute("class", "grid-line");
+            gridGroup.appendChild(line);
+          }
+
+          // Create X-Axis Labels & Bars & Bar Labels
+          const linePoints = [];
+          months.forEach((month, i) => {
+            const x = getX(i);
+
+            const label = document.createElementNS("http://www.w3.org/2000/svg", "text");
+            label.setAttribute("x", x);
+            label.setAttribute("y", startY + 30);
+            label.setAttribute("class", "axis-label");
+            label.textContent = month;
+            xAxisGroup.appendChild(label);
+
+            const barHeight = (revenueData[i] / maxRevenue) * chartHeight;
+            const bar = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+            bar.setAttribute("x", x - barWidth / 2);
+            bar.setAttribute("y", startY);
+            bar.setAttribute("width", barWidth);
+            bar.setAttribute("height", 0);
+            bar.setAttribute("class", "bar");
+            barsGroup.appendChild(bar);
+
+            const barLabel = document.createElementNS("http://www.w3.org/2000/svg", "text");
+            barLabel.setAttribute("x", x);
+            barLabel.setAttribute("y", getBarY(revenueData[i]) - 10);
+            barLabel.setAttribute("class", "bar-label");
+            barLabel.textContent = `$${revenueData[i]}K`;
+            barLabelsGroup.appendChild(barLabel);
+
+            linePoints.push(`${x},${getLineY(conversionData[i])}`);
+
+            const lineLabel = document.createElementNS("http://www.w3.org/2000/svg", "text");
+            lineLabel.setAttribute("x", x);
+            lineLabel.setAttribute("y", getLineY(conversionData[i]) - 15);
+            lineLabel.setAttribute("class", "line-label");
+            lineLabel.textContent = `${conversionData[i]}%`;
+            lineLabelsGroup.appendChild(lineLabel);
+          });
+
+          // Set Path Data
+          conversionPath.setAttribute("d", `M ${linePoints.join(" L ")}`);
+          const pathLength = conversionPath.getTotalLength();
+          conversionPath.style.strokeDasharray = pathLength;
+          conversionPath.style.strokeDashoffset = pathLength;
+
+          // --- ANIMATION TIMELINE ---
+
+          tl.to(
+            '[data-composition-id="data-chart"] .headline',
+            {
+              clipPath: "inset(0 0% 0 0)",
+              duration: 1.2,
+              ease: "power1.inOut",
+            },
+            0,
+          );
+
+          tl.to(
+            '[data-composition-id="data-chart"] .subtitle',
+            {
+              clipPath: "inset(0 0% 0 0)",
+              duration: 1.2,
+              ease: "power1.inOut",
+            },
+            0.2,
+          );
+
+          tl.to(
+            '[data-composition-id="data-chart"] .key',
+            {
+              opacity: 1,
+              duration: 0.4,
+              ease: "power2.out",
+            },
+            1.0,
+          );
+
+          tl.to(
+            '[data-composition-id="data-chart"] .grid-line',
+            {
+              opacity: 1,
+              duration: 0.5,
+              stagger: 0.25,
+              ease: "power2.out",
+            },
+            0.5,
+          );
+
+          // Bars
+          const bars = barsGroup.querySelectorAll(".bar");
+          const barLabels = barLabelsGroup.querySelectorAll(".bar-label");
+
+          bars.forEach((bar, i) => {
+            const barHeight = (revenueData[i] / maxRevenue) * chartHeight;
+            const startTime = 1.5 + i * 0.5;
+
+            tl.to(
+              bar,
+              {
+                attr: { height: barHeight, y: startY - barHeight },
+                duration: 0.8,
+                ease: "power2.out",
+              },
+              startTime,
+            );
+
+            tl.to(
+              barLabels[i],
+              {
+                opacity: 1,
+                duration: 0.3,
+                ease: "power2.out",
+              },
+              startTime + 0.8,
+            );
+          });
+
+          // Line
+          const lastBarStartTime = 1.5 + (months.length - 1) * 0.5;
+          const lineStartTime = lastBarStartTime + 0.5;
+
+          tl.to(
+            conversionPath,
+            {
+              strokeDashoffset: 0,
+              duration: 3,
+              ease: "none",
+            },
+            lineStartTime,
+          );
+
+          // Line Dot & Labels
+          tl.set(
+            lineDot,
+            {
+              opacity: 1,
+              attr: { cx: getX(0), cy: getLineY(conversionData[0]) },
+            },
+            lineStartTime,
+          );
+
+          const lineLabels = lineLabelsGroup.querySelectorAll(".line-label");
+          months.forEach((_, i) => {
+            if (i > 0) {
+              const x = getX(i);
+              const y = getLineY(conversionData[i]);
+              tl.to(
+                lineDot,
+                {
+                  attr: { cx: x, cy: y },
+                  duration: 3 / (months.length - 1),
+                  ease: "none",
+                },
+                lineStartTime + ((i - 1) / (months.length - 1)) * 3,
+              );
+            }
+
+            const labelTime = lineStartTime + (i / (months.length - 1)) * 3 + 0.2;
+
+            lineLabels[i].textContent = "0.0%";
+
+            tl.to(
+              lineLabels[i],
+              {
+                opacity: 1,
+                duration: 0.1,
+                ease: "power2.out",
+              },
+              labelTime,
+            );
+
+            const dummy = { val: 0 };
+            tl.to(
+              dummy,
+              {
+                val: conversionData[i],
+                duration: 0.8,
+                ease: "power2.out",
+                onUpdate: () => {
+                  lineLabels[i].textContent = dummy.val.toFixed(1) + "%";
+                },
+              },
+              labelTime,
+            );
+          });
+
+          // Source Line
+          tl.to(
+            '[data-composition-id="data-chart"] .source',
+            {
+              opacity: 1,
+              duration: 0.5,
+              ease: "power2.out",
+            },
+            ">+0.5",
+          );
+
+          window.__timelines = window.__timelines || {};
+          window.__timelines["data-chart"] = tl;
+        })();
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/domain-warp-dissolve/domain-warp-dissolve.html b/docs/public/catalog/blocks/domain-warp-dissolve/domain-warp-dissolve.html
new file mode 100644
index 0000000000..8a24dc98d2
--- /dev/null
+++ b/docs/public/catalog/blocks/domain-warp-dissolve/domain-warp-dissolve.html
@@ -0,0 +1,380 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      @import url("https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Bebas+Neue&family=JetBrains+Mono:wght@400;700&family=Lato:wght@400;700&display=block");
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <style>
+        [data-composition-id="main"] {
+          width: 1920px;
+          height: 1080px;
+          overflow: hidden;
+          position: relative;
+          background: #0d1b2a;
+        }
+
+        /* Blueprint grid */
+        .bp-grid {
+          position: absolute;
+          inset: 0;
+          background-image:
+            linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
+            linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
+          background-size: 40px 40px;
+          pointer-events: none;
+        }
+
+        /* Layout */
+        .bp-left {
+          position: absolute;
+          left: 0;
+          top: 0;
+          bottom: 0;
+          width: 1200px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .bp-right {
+          position: absolute;
+          right: 0;
+          top: 0;
+          bottom: 0;
+          width: 720px;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          padding: 60px 60px 60px 40px;
+        }
+        .bp-divider {
+          position: absolute;
+          left: 1200px;
+          top: 60px;
+          bottom: 60px;
+          width: 1px;
+          background: #00f5d4;
+          opacity: 0.15;
+        }
+        .bp-number {
+          font-family: "Space Mono", monospace;
+          font-size: 14px;
+          font-weight: 700;
+          letter-spacing: 0.4em;
+          text-transform: uppercase;
+          position: absolute;
+          top: 40px;
+          left: 60px;
+          color: #00f5d4;
+        }
+
+        /* Right panel typography */
+        .bp-name {
+          font-family: "Bebas Neue", sans-serif;
+          font-size: 38px;
+          letter-spacing: 0.08em;
+          margin-bottom: 20px;
+          color: #00f5d4;
+        }
+        .bp-plabel {
+          font-family: "Space Mono", monospace;
+          font-size: 11px;
+          font-weight: 700;
+          letter-spacing: 0.3em;
+          text-transform: uppercase;
+          margin-bottom: 10px;
+          color: #00f5d4;
+          opacity: 0.5;
+        }
+        .bp-prompt {
+          font-family: "JetBrains Mono", monospace;
+          font-size: 20px;
+          line-height: 1.6;
+          padding: 16px 20px;
+          border-radius: 6px;
+          margin-bottom: 20px;
+          color: #00f5d4;
+          background: rgba(0, 245, 212, 0.06);
+          border: 1px solid rgba(0, 245, 212, 0.12);
+        }
+        .bp-desc {
+          font-family: "Lato", sans-serif;
+          font-size: 17px;
+          line-height: 1.6;
+          color: #8aa8c0;
+          opacity: 0.55;
+        }
+
+        /* GL scenes (hidden, just for texture capture) */
+        .scene {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1200px;
+          height: 1080px;
+          overflow: hidden;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .scene-label {
+          font-family: "Bebas Neue", sans-serif;
+          font-size: 140px;
+          letter-spacing: 0.06em;
+          opacity: 0.12;
+        }
+      </style>
+
+      <div class="bp-grid"></div>
+      <div class="bp-divider"></div>
+      <div class="bp-number">01 / 14</div>
+
+      <!-- GL demo scenes (captured as textures, then hidden) -->
+      <div id="s1" class="scene" style="background: #0d1b2a">
+        <div class="scene-label" style="color: #00f5d4">SCENE A</div>
+      </div>
+      <div id="s2" class="scene" style="background: #00f5d4; opacity: 0">
+        <div class="scene-label" style="color: #0d1b2a">SCENE B</div>
+      </div>
+
+      <!-- GL canvas (left panel only) -->
+      <canvas
+        id="gl-canvas"
+        width="1200"
+        height="1080"
+        style="
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1200px;
+          height: 1080px;
+          z-index: 10;
+          pointer-events: none;
+          display: none;
+        "
+      >
+      </canvas>
+
+      <!-- Right panel metadata -->
+      <div class="bp-right">
+        <div class="bp-name">Domain Warp Dissolve</div>
+        <div class="bp-plabel">Prompt</div>
+        <div class="bp-prompt">"use domain warp dissolve shader transition"</div>
+        <div class="bp-desc">
+          Cascaded fbm(p + fbm(p)) displaces both scenes along a warp field. Iridescent
+          cosine-palette edge glow.
+        </div>
+      </div>
+
+      <div
+        id="driver"
+        class="clip"
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+      var glCanvas = document.getElementById("gl-canvas");
+      var gl = glCanvas.getContext("webgl", { preserveDrawingBuffer: true });
+      if (!gl) {
+        console.warn("WebGL not available");
+        window.__timelines["main"] = gsap.timeline({ paused: true });
+      } else {
+        gl.viewport(0, 0, 1200, 1080);
+        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
+        var sceneTextures = {};
+
+        function captureScene(sceneId) {
+          var scene = document.getElementById(sceneId);
+          var origOpacity = scene.style.opacity;
+          var origZ = scene.style.zIndex;
+          scene.style.opacity = "1";
+          scene.style.zIndex = "999";
+          scene.offsetHeight;
+          var c = document.createElement("canvas");
+          c.width = 1200;
+          c.height = 1080;
+          var ctx = c.getContext("2d");
+          ctx.fillStyle = window.getComputedStyle(scene).backgroundColor;
+          ctx.fillRect(0, 0, 1200, 1080);
+          var sr = scene.getBoundingClientRect();
+          var els = scene.querySelectorAll("*");
+          for (var i = 0; i < els.length; i++) {
+            var el = els[i],
+              cs = window.getComputedStyle(el);
+            if (cs.display === "none" || cs.visibility === "hidden") continue;
+            var r = el.getBoundingClientRect();
+            if (r.width < 1 || r.height < 1) continue;
+            var x = r.left - sr.left,
+              y = r.top - sr.top,
+              w = r.width,
+              h = r.height;
+            ctx.save();
+            ctx.globalAlpha = parseFloat(cs.opacity) || 1;
+            var bg = cs.backgroundColor;
+            if (bg && bg !== "rgba(0, 0, 0, 0)" && bg !== "transparent") {
+              ctx.fillStyle = bg;
+              ctx.fillRect(x, y, w, h);
+            }
+            var hasChildEls = el.querySelector("div,span,img,video");
+            var text = "";
+            for (var j = 0; j < el.childNodes.length; j++)
+              if (el.childNodes[j].nodeType === 3) text += el.childNodes[j].textContent;
+            text = text.trim();
+            if (text && !hasChildEls) {
+              ctx.font = cs.fontWeight + " " + cs.fontSize + " " + cs.fontFamily;
+              ctx.fillStyle = cs.color;
+              if (cs.letterSpacing && cs.letterSpacing !== "normal")
+                ctx.letterSpacing = cs.letterSpacing;
+              ctx.textAlign = "center";
+              ctx.textBaseline = "middle";
+              ctx.fillText(text, x + w / 2, y + h / 2);
+            }
+            ctx.restore();
+          }
+          scene.style.opacity = origOpacity;
+          scene.style.zIndex = origZ;
+          var tex = gl.createTexture();
+          gl.bindTexture(gl.TEXTURE_2D, tex);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+          gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, c);
+          sceneTextures[sceneId] = tex;
+        }
+
+        var vertSrc =
+          "attribute vec2 a_pos; varying vec2 v_uv; void main(){" +
+          "v_uv=a_pos*0.5+0.5; v_uv.y=1.0-v_uv.y; gl_Position=vec4(a_pos,0,1);}";
+        var quadBuf = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);
+        gl.bufferData(
+          gl.ARRAY_BUFFER,
+          new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),
+          gl.STATIC_DRAW,
+        );
+        function compileShader(src, type) {
+          var s = gl.createShader(type);
+          gl.shaderSource(s, src);
+          gl.compileShader(s);
+          if (!gl.getShaderParameter(s, gl.COMPILE_STATUS))
+            console.error("Shader:", gl.getShaderInfoLog(s));
+          return s;
+        }
+        function mkProg(fragSrc) {
+          var p = gl.createProgram();
+          gl.attachShader(p, compileShader(vertSrc, gl.VERTEX_SHADER));
+          gl.attachShader(p, compileShader(fragSrc, gl.FRAGMENT_SHADER));
+          gl.linkProgram(p);
+          if (!gl.getProgramParameter(p, gl.LINK_STATUS))
+            console.error("Link:", gl.getProgramInfoLog(p));
+          return p;
+        }
+
+        var H =
+          "precision mediump float;" +
+          "varying vec2 v_uv;" +
+          "uniform sampler2D u_from, u_to;" +
+          "uniform float u_progress;" +
+          "uniform vec2 u_resolution;\n";
+
+        var NQ =
+          "float hash(vec2 p){return fract(sin(dot(p,vec2(127.1,311.7)))*43758.5453);}" +
+          "float vnoise(vec2 p){vec2 i=floor(p),f=fract(p);" +
+          "f=f*f*f*(f*(f*6.-15.)+10.);" +
+          "return mix(mix(hash(i),hash(i+vec2(1,0)),f.x)," +
+          "mix(hash(i+vec2(0,1)),hash(i+vec2(1,1)),f.x),f.y);}" +
+          "float fbm(vec2 p){float v=0.,a=.5;" +
+          "mat2 R=mat2(.8,.6,-.6,.8);" +
+          "for(int i=0;i<5;i++){v+=a*vnoise(p);p=R*p*2.02;a*=.5;}return v;}";
+        var CP =
+          "vec3 palette(float t,vec3 a,vec3 b,vec3 c,vec3 d){" + "return a+b*cos(6.2832*(c*t+d));}";
+
+        var progPass = mkProg(H + "void main(){gl_FragColor=texture2D(u_from,v_uv);}");
+        var progTrans = mkProg(
+          H +
+            NQ +
+            CP +
+            "void main(){vec2 q=vec2(fbm(v_uv*3.),fbm(v_uv*3.+vec2(5.2,1.3)));vec2 r=vec2(fbm(v_uv*3.+q*4.+vec2(1.7,9.2)),fbm(v_uv*3.+q*4.+vec2(8.3,2.8)));float n=fbm(v_uv*3.+r*2.);vec2 warpDir=(q-.5)*.4;vec4 A=texture2D(u_from,clamp(v_uv+warpDir*u_progress,0.,1.));vec4 B=texture2D(u_to,clamp(v_uv-warpDir*(1.-u_progress),0.,1.));float e=smoothstep(u_progress-.08,u_progress+.08,n);float ed=abs(n-u_progress);float em=smoothstep(.1,0.,ed)*(1.-step(1.,u_progress));vec3 ec=palette(ed*8.,vec3(.5),vec3(.5),vec3(1.),vec3(0.,.33,.67));gl_FragColor=vec4(mix(B,A,e).rgb+ec*em*2.,1.);}",
+        );
+
+        function renderShader(prog, texFrom, texTo, progress) {
+          gl.useProgram(prog);
+          gl.activeTexture(gl.TEXTURE0);
+          gl.bindTexture(gl.TEXTURE_2D, texFrom);
+          gl.uniform1i(gl.getUniformLocation(prog, "u_from"), 0);
+          gl.activeTexture(gl.TEXTURE1);
+          gl.bindTexture(gl.TEXTURE_2D, texTo);
+          gl.uniform1i(gl.getUniformLocation(prog, "u_to"), 1);
+          gl.uniform1f(gl.getUniformLocation(prog, "u_progress"), progress);
+          gl.uniform2f(gl.getUniformLocation(prog, "u_resolution"), 1200, 1080);
+          var pos = gl.getAttribLocation(prog, "a_pos");
+          gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);
+          gl.enableVertexAttribArray(pos);
+          gl.vertexAttribPointer(pos, 2, gl.FLOAT, false, 0, 0);
+          gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+        }
+
+        function easeInOut(p) {
+          return p < 0.5 ? 2 * p * p : 1 - Math.pow(-2 * p + 2, 2) / 2;
+        }
+
+        captureScene("s1");
+        captureScene("s2");
+        glCanvas.style.display = "block";
+        renderShader(progPass, sceneTextures["s1"], sceneTextures["s1"], 0);
+        document.querySelectorAll(".scene").forEach(function (s) {
+          s.style.opacity = "0";
+        });
+
+        var tl = gsap.timeline({
+          paused: true,
+          onUpdate: function () {
+            var t = tl.time();
+            if (t >= 1.0 && t < 3.0) {
+              renderShader(
+                progTrans,
+                sceneTextures["s1"],
+                sceneTextures["s2"],
+                easeInOut((t - 1.0) / 2.0),
+              );
+            } else if (t >= 3.0) {
+              renderShader(progPass, sceneTextures["s2"], sceneTextures["s2"], 0);
+            } else {
+              renderShader(progPass, sceneTextures["s1"], sceneTextures["s1"], 0);
+            }
+          },
+        });
+        tl.to({ v: 0 }, { v: 1, duration: 4, ease: "none" }, 0);
+        window.__timelines["main"] = tl;
+      } // end if (gl)
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/editorial-flash-overlay/demo-backdrop.jpg b/docs/public/catalog/blocks/editorial-flash-overlay/demo-backdrop.jpg
new file mode 100644
index 0000000000..077705a002
Binary files /dev/null and b/docs/public/catalog/blocks/editorial-flash-overlay/demo-backdrop.jpg differ
diff --git a/docs/public/catalog/blocks/editorial-flash-overlay/demo.html b/docs/public/catalog/blocks/editorial-flash-overlay/demo.html
new file mode 100644
index 0000000000..4705557b2c
--- /dev/null
+++ b/docs/public/catalog/blocks/editorial-flash-overlay/demo.html
@@ -0,0 +1,73 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+
+      html,
+      body,
+      #editorial-flash-demo {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: #080808;
+      }
+
+      #ef-demo-backdrop,
+      #ef-demo-overlay {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+      }
+
+      #ef-demo-backdrop {
+        object-fit: cover;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="editorial-flash-demo"
+      data-composition-id="editorial-flash-demo"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <img
+        id="ef-demo-backdrop"
+        class="clip"
+        src="./demo-backdrop.jpg"
+        alt=""
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+      />
+      <div
+        id="ef-demo-overlay"
+        data-composition-id="editorial-flash-overlay"
+        data-composition-src="editorial-flash-overlay.html"
+        data-start="0"
+        data-duration="4"
+        data-track-index="1"
+        data-width="1920"
+        data-height="1080"
+      ></div>
+    </div>
+
+    <script>
+      var tl = gsap.timeline({ paused: true });
+      tl.to("#ef-demo-backdrop", { scale: 1.035, duration: 4, ease: "none" }, 0);
+      window.__timelines = window.__timelines || {};
+      window.__timelines["editorial-flash-demo"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/editorial-flash-overlay/editorial-flash-overlay.html b/docs/public/catalog/blocks/editorial-flash-overlay/editorial-flash-overlay.html
new file mode 100644
index 0000000000..9b2c8d4502
--- /dev/null
+++ b/docs/public/catalog/blocks/editorial-flash-overlay/editorial-flash-overlay.html
@@ -0,0 +1,129 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: transparent;
+      }
+
+      #ef-flash {
+        --hf-editorial-flash-wash: 255 253 250;
+        --hf-editorial-flash-warm: 255 174 105;
+        --hf-editorial-flash-cool: 183 218 255;
+        position: absolute;
+        inset: -12%;
+        overflow: hidden;
+        pointer-events: none;
+      }
+
+      #ef-flash .ef-layer {
+        position: absolute;
+        inset: 0;
+        opacity: 0;
+        will-change: opacity, transform;
+      }
+
+      #ef-wash {
+        background: rgb(var(--hf-editorial-flash-wash));
+      }
+
+      #ef-core {
+        inset: -18%;
+        background: radial-gradient(
+          ellipse 68% 92% at 37% 47%,
+          rgb(255 255 255) 0%,
+          rgb(255 255 255 / 98%) 20%,
+          rgb(var(--hf-editorial-flash-wash) / 86%) 45%,
+          rgb(var(--hf-editorial-flash-warm) / 32%) 67%,
+          transparent 86%
+        );
+        mix-blend-mode: screen;
+        transform-origin: 38% 48%;
+      }
+
+      #ef-sweep {
+        inset: -28%;
+        background: linear-gradient(
+          108deg,
+          transparent 21%,
+          rgb(var(--hf-editorial-flash-warm) / 10%) 38%,
+          rgb(var(--hf-editorial-flash-wash) / 90%) 49%,
+          rgb(255 255 255 / 98%) 53%,
+          rgb(var(--hf-editorial-flash-cool) / 24%) 62%,
+          transparent 79%
+        );
+        mix-blend-mode: screen;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="editorial-flash-overlay"
+      data-composition-id="editorial-flash-overlay"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="ef-flash" aria-hidden="true">
+        <div id="ef-wash" class="ef-layer"></div>
+        <div id="ef-core" class="ef-layer" data-layout-allow-overflow></div>
+        <div id="ef-sweep" class="ef-layer" data-layout-allow-overflow></div>
+      </div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      var flash = document.getElementById("ef-flash");
+      var host = flash && flash.closest("[data-composition-id]");
+      if (!host) throw new Error("Editorial Flash could not find its composition host");
+
+      var compositionId = host.getAttribute("data-composition-id");
+      var duration = Number(host.getAttribute("data-duration")) || 4;
+      var hit = Math.max(0.12, duration * 0.58);
+      var tl = gsap.timeline({ paused: true });
+
+      tl.to({}, { duration: duration, ease: "none" }, 0);
+      tl.to("#ef-wash", { opacity: 0.92, duration: 0.04, ease: "power4.in" }, hit);
+      tl.fromTo(
+        "#ef-core",
+        { opacity: 0, scale: 0.86, rotation: -5 },
+        { opacity: 1, scale: 1, rotation: -5, duration: 0.05, ease: "power4.in" },
+        hit - 0.01,
+      );
+      tl.fromTo(
+        "#ef-sweep",
+        { opacity: 0, xPercent: -12, rotation: -2 },
+        { opacity: 0.9, xPercent: 8, rotation: -2, duration: 0.04, ease: "power4.in" },
+        hit,
+      );
+      tl.to("#ef-wash", { opacity: 0, duration: 0.18, ease: "power3.out" }, hit + 0.04);
+      tl.to(
+        "#ef-core",
+        { opacity: 0, scale: 1.18, rotation: -5, duration: 0.34, ease: "power2.out" },
+        hit + 0.04,
+      );
+      tl.to(
+        "#ef-sweep",
+        { opacity: 0, xPercent: 28, rotation: -2, duration: 0.3, ease: "power2.out" },
+        hit + 0.04,
+      );
+
+      window.__timelines[compositionId] = tl;
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/flash-through-white/flash-through-white.html b/docs/public/catalog/blocks/flash-through-white/flash-through-white.html
new file mode 100644
index 0000000000..930b6e100f
--- /dev/null
+++ b/docs/public/catalog/blocks/flash-through-white/flash-through-white.html
@@ -0,0 +1,366 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      @import url("https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Bebas+Neue&family=JetBrains+Mono:wght@400;700&family=Lato:wght@400;700&display=block");
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <style>
+        [data-composition-id="main"] {
+          width: 1920px;
+          height: 1080px;
+          overflow: hidden;
+          position: relative;
+          background: #03071e;
+        }
+
+        /* Blueprint grid */
+        .bp-grid {
+          position: absolute;
+          inset: 0;
+          background-image:
+            linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
+            linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
+          background-size: 40px 40px;
+          pointer-events: none;
+        }
+
+        /* Layout */
+        .bp-left {
+          position: absolute;
+          left: 0;
+          top: 0;
+          bottom: 0;
+          width: 1200px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .bp-right {
+          position: absolute;
+          right: 0;
+          top: 0;
+          bottom: 0;
+          width: 720px;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          padding: 60px 60px 60px 40px;
+        }
+        .bp-divider {
+          position: absolute;
+          left: 1200px;
+          top: 60px;
+          bottom: 60px;
+          width: 1px;
+          background: #ffba08;
+          opacity: 0.15;
+        }
+        .bp-number {
+          font-family: "Space Mono", monospace;
+          font-size: 14px;
+          font-weight: 700;
+          letter-spacing: 0.4em;
+          text-transform: uppercase;
+          position: absolute;
+          top: 40px;
+          left: 60px;
+          color: #ffba08;
+        }
+
+        /* Right panel typography */
+        .bp-name {
+          font-family: "Bebas Neue", sans-serif;
+          font-size: 38px;
+          letter-spacing: 0.08em;
+          margin-bottom: 20px;
+          color: #ffba08;
+        }
+        .bp-plabel {
+          font-family: "Space Mono", monospace;
+          font-size: 11px;
+          font-weight: 700;
+          letter-spacing: 0.3em;
+          text-transform: uppercase;
+          margin-bottom: 10px;
+          color: #ffba08;
+          opacity: 0.5;
+        }
+        .bp-prompt {
+          font-family: "JetBrains Mono", monospace;
+          font-size: 20px;
+          line-height: 1.6;
+          padding: 16px 20px;
+          border-radius: 6px;
+          margin-bottom: 20px;
+          color: #ffba08;
+          background: rgba(255, 186, 8, 0.06);
+          border: 1px solid rgba(255, 186, 8, 0.12);
+        }
+        .bp-desc {
+          font-family: "Lato", sans-serif;
+          font-size: 17px;
+          line-height: 1.6;
+          color: #888;
+          opacity: 0.55;
+        }
+
+        /* GL scenes (hidden, just for texture capture) */
+        .scene {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1200px;
+          height: 1080px;
+          overflow: hidden;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .scene-label {
+          font-family: "Bebas Neue", sans-serif;
+          font-size: 140px;
+          letter-spacing: 0.06em;
+          opacity: 0.12;
+        }
+      </style>
+
+      <div class="bp-grid"></div>
+      <div class="bp-divider"></div>
+      <div class="bp-number">12 / 14</div>
+
+      <!-- GL demo scenes (captured as textures, then hidden) -->
+      <div id="s1" class="scene" style="background: #03071e">
+        <div class="scene-label" style="color: #ffba08">SCENE A</div>
+      </div>
+      <div id="s2" class="scene" style="background: #ffba08; opacity: 0">
+        <div class="scene-label" style="color: #03071e">SCENE B</div>
+      </div>
+
+      <!-- GL canvas (left panel only) -->
+      <canvas
+        id="gl-canvas"
+        width="1200"
+        height="1080"
+        style="
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1200px;
+          height: 1080px;
+          z-index: 10;
+          pointer-events: none;
+          display: none;
+        "
+      >
+      </canvas>
+
+      <!-- Right panel metadata -->
+      <div class="bp-right">
+        <div class="bp-name">Flash Through White</div>
+        <div class="bp-plabel">Prompt</div>
+        <div class="bp-prompt">"use flash through white shader transition"</div>
+        <div class="bp-desc">
+          Both scenes brighten to a white midpoint. Works on dark backgrounds where
+          color-dip-to-black is invisible.
+        </div>
+      </div>
+
+      <div
+        id="driver"
+        class="clip"
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+      var glCanvas = document.getElementById("gl-canvas");
+      var gl = glCanvas.getContext("webgl", { preserveDrawingBuffer: true });
+      if (!gl) {
+        console.warn("WebGL not available");
+        window.__timelines["main"] = gsap.timeline({ paused: true });
+      } else {
+        gl.viewport(0, 0, 1200, 1080);
+        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
+        var sceneTextures = {};
+
+        function captureScene(sceneId) {
+          var scene = document.getElementById(sceneId);
+          var origOpacity = scene.style.opacity;
+          var origZ = scene.style.zIndex;
+          scene.style.opacity = "1";
+          scene.style.zIndex = "999";
+          scene.offsetHeight;
+          var c = document.createElement("canvas");
+          c.width = 1200;
+          c.height = 1080;
+          var ctx = c.getContext("2d");
+          ctx.fillStyle = window.getComputedStyle(scene).backgroundColor;
+          ctx.fillRect(0, 0, 1200, 1080);
+          var sr = scene.getBoundingClientRect();
+          var els = scene.querySelectorAll("*");
+          for (var i = 0; i < els.length; i++) {
+            var el = els[i],
+              cs = window.getComputedStyle(el);
+            if (cs.display === "none" || cs.visibility === "hidden") continue;
+            var r = el.getBoundingClientRect();
+            if (r.width < 1 || r.height < 1) continue;
+            var x = r.left - sr.left,
+              y = r.top - sr.top,
+              w = r.width,
+              h = r.height;
+            ctx.save();
+            ctx.globalAlpha = parseFloat(cs.opacity) || 1;
+            var bg = cs.backgroundColor;
+            if (bg && bg !== "rgba(0, 0, 0, 0)" && bg !== "transparent") {
+              ctx.fillStyle = bg;
+              ctx.fillRect(x, y, w, h);
+            }
+            var hasChildEls = el.querySelector("div,span,img,video");
+            var text = "";
+            for (var j = 0; j < el.childNodes.length; j++)
+              if (el.childNodes[j].nodeType === 3) text += el.childNodes[j].textContent;
+            text = text.trim();
+            if (text && !hasChildEls) {
+              ctx.font = cs.fontWeight + " " + cs.fontSize + " " + cs.fontFamily;
+              ctx.fillStyle = cs.color;
+              if (cs.letterSpacing && cs.letterSpacing !== "normal")
+                ctx.letterSpacing = cs.letterSpacing;
+              ctx.textAlign = "center";
+              ctx.textBaseline = "middle";
+              ctx.fillText(text, x + w / 2, y + h / 2);
+            }
+            ctx.restore();
+          }
+          scene.style.opacity = origOpacity;
+          scene.style.zIndex = origZ;
+          var tex = gl.createTexture();
+          gl.bindTexture(gl.TEXTURE_2D, tex);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+          gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, c);
+          sceneTextures[sceneId] = tex;
+        }
+
+        var vertSrc =
+          "attribute vec2 a_pos; varying vec2 v_uv; void main(){" +
+          "v_uv=a_pos*0.5+0.5; v_uv.y=1.0-v_uv.y; gl_Position=vec4(a_pos,0,1);}";
+        var quadBuf = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);
+        gl.bufferData(
+          gl.ARRAY_BUFFER,
+          new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),
+          gl.STATIC_DRAW,
+        );
+        function compileShader(src, type) {
+          var s = gl.createShader(type);
+          gl.shaderSource(s, src);
+          gl.compileShader(s);
+          if (!gl.getShaderParameter(s, gl.COMPILE_STATUS))
+            console.error("Shader:", gl.getShaderInfoLog(s));
+          return s;
+        }
+        function mkProg(fragSrc) {
+          var p = gl.createProgram();
+          gl.attachShader(p, compileShader(vertSrc, gl.VERTEX_SHADER));
+          gl.attachShader(p, compileShader(fragSrc, gl.FRAGMENT_SHADER));
+          gl.linkProgram(p);
+          if (!gl.getProgramParameter(p, gl.LINK_STATUS))
+            console.error("Link:", gl.getProgramInfoLog(p));
+          return p;
+        }
+
+        var H =
+          "precision mediump float;" +
+          "varying vec2 v_uv;" +
+          "uniform sampler2D u_from, u_to;" +
+          "uniform float u_progress;" +
+          "uniform vec2 u_resolution;\n";
+
+        var progPass = mkProg(H + "void main(){gl_FragColor=texture2D(u_from,v_uv);}");
+        var progTrans = mkProg(
+          H +
+            "void main(){vec4 A=texture2D(u_from,v_uv),B=texture2D(u_to,v_uv);float toWhite=smoothstep(0.,.45,u_progress);vec3 fromC=mix(A.rgb,vec3(1.),toWhite);float fromWhite=1.-smoothstep(.5,1.,u_progress);vec3 toC=mix(B.rgb,vec3(1.),fromWhite);gl_FragColor=vec4(mix(fromC,toC,smoothstep(.35,.65,u_progress)),1.);}",
+        );
+
+        function renderShader(prog, texFrom, texTo, progress) {
+          gl.useProgram(prog);
+          gl.activeTexture(gl.TEXTURE0);
+          gl.bindTexture(gl.TEXTURE_2D, texFrom);
+          gl.uniform1i(gl.getUniformLocation(prog, "u_from"), 0);
+          gl.activeTexture(gl.TEXTURE1);
+          gl.bindTexture(gl.TEXTURE_2D, texTo);
+          gl.uniform1i(gl.getUniformLocation(prog, "u_to"), 1);
+          gl.uniform1f(gl.getUniformLocation(prog, "u_progress"), progress);
+          gl.uniform2f(gl.getUniformLocation(prog, "u_resolution"), 1200, 1080);
+          var pos = gl.getAttribLocation(prog, "a_pos");
+          gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);
+          gl.enableVertexAttribArray(pos);
+          gl.vertexAttribPointer(pos, 2, gl.FLOAT, false, 0, 0);
+          gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+        }
+
+        function easeInOut(p) {
+          return p < 0.5 ? 2 * p * p : 1 - Math.pow(-2 * p + 2, 2) / 2;
+        }
+
+        captureScene("s1");
+        captureScene("s2");
+        glCanvas.style.display = "block";
+        renderShader(progPass, sceneTextures["s1"], sceneTextures["s1"], 0);
+        document.querySelectorAll(".scene").forEach(function (s) {
+          s.style.opacity = "0";
+        });
+
+        var tl = gsap.timeline({
+          paused: true,
+          onUpdate: function () {
+            var t = tl.time();
+            if (t >= 1.0 && t < 3.0) {
+              renderShader(
+                progTrans,
+                sceneTextures["s1"],
+                sceneTextures["s2"],
+                easeInOut((t - 1.0) / 2.0),
+              );
+            } else if (t >= 3.0) {
+              renderShader(progPass, sceneTextures["s2"], sceneTextures["s2"], 0);
+            } else {
+              renderShader(progPass, sceneTextures["s1"], sceneTextures["s1"], 0);
+            }
+          },
+        });
+        tl.to({ v: 0 }, { v: 1, duration: 4, ease: "none" }, 0);
+        window.__timelines["main"] = tl;
+      } // end if (gl)
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/flowchart-vertical/flowchart-vertical.html b/docs/public/catalog/blocks/flowchart-vertical/flowchart-vertical.html
new file mode 100644
index 0000000000..872a16d07e
--- /dev/null
+++ b/docs/public/catalog/blocks/flowchart-vertical/flowchart-vertical.html
@@ -0,0 +1,467 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1440, height=2560" />
+    <title>Flowchart Vertical</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=block"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1440px;
+        height: 2560px;
+        overflow: hidden;
+        background-color: #ffffff;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="flowchart-vertical"
+      data-composition-id="flowchart-vertical"
+      data-width="1440"
+      data-height="2560"
+      data-start="0"
+      data-duration="12"
+    >
+      <div class="canvas">
+        <svg class="connectors" width="1440" height="2560" viewBox="0 0 1440 2560">
+          <!-- Level 1 to 2 -->
+          <path
+            id="path-1-L"
+            class="connector"
+            d="M 720 210 L 720 360 L 440 360 L 440 530"
+            fill="none"
+            stroke="#333"
+            stroke-width="4"
+          />
+          <path
+            id="path-1-R"
+            class="connector"
+            d="M 720 210 L 720 360 L 1000 360 L 1000 530"
+            fill="none"
+            stroke="#333"
+            stroke-width="4"
+          />
+
+          <!-- Level 2 to 3 (Left side) -->
+          <path
+            id="path-2-LL"
+            class="connector"
+            d="M 440 590 L 440 760 L 280 760 L 280 930"
+            fill="none"
+            stroke="#333"
+            stroke-width="4"
+          />
+          <path
+            id="path-2-LR"
+            class="connector"
+            d="M 440 590 L 440 760 L 600 760 L 600 930"
+            fill="none"
+            stroke="#333"
+            stroke-width="4"
+          />
+
+          <!-- Level 2 to 3 (Right side) -->
+          <path
+            id="path-2-RL"
+            class="connector"
+            d="M 1000 590 L 1000 760 L 840 760 L 840 930"
+            fill="none"
+            stroke="#333"
+            stroke-width="4"
+          />
+          <path
+            id="path-2-RR"
+            class="connector"
+            d="M 1000 590 L 1000 760 L 1160 760 L 1160 930"
+            fill="none"
+            stroke="#333"
+            stroke-width="4"
+          />
+        </svg>
+
+        <div id="label-yes" class="connector-label">Yes</div>
+        <div id="label-not-sure" class="connector-label">Not sure</div>
+
+        <!-- Level 1 -->
+        <div id="node-root" class="node yellow" style="left: 720px; top: 180px">
+          Should I learn to code?
+        </div>
+
+        <!-- Level 2 -->
+        <div id="node-yes" class="node green" style="left: 440px; top: 560px">Yes</div>
+        <div id="node-not-sure" class="node peach" style="left: 1000px; top: 560px">Not sure</div>
+
+        <!-- Level 3 -->
+        <div id="node-python" class="node lavender" style="left: 280px; top: 960px">
+          <div style="position: relative; display: inline-block">
+            <span id="python-text">Start with Pythom</span>
+            <svg class="squiggle-container" width="64" height="6" viewBox="0 0 64 6">
+              <path
+                id="squiggle"
+                d="M 0 3 Q 2 0 4 3 T 8 3 T 12 3 T 16 3 T 20 3 T 24 3 T 28 3 T 32 3 T 36 3 T 40 3 T 44 3 T 48 3 T 52 3 T 56 3 T 60 3 T 64 3"
+                fill="none"
+                stroke="#E53935"
+                stroke-width="2"
+              />
+            </svg>
+          </div>
+        </div>
+        <div id="node-nocode" class="node blue" style="left: 600px; top: 960px">
+          Try no-code first
+        </div>
+        <div id="node-website" class="node pink" style="left: 840px; top: 960px">
+          Build a personal website
+        </div>
+        <div id="node-course" class="node yellow" style="left: 1160px; top: 960px">
+          Take a free intro course
+        </div>
+
+        <!-- Cursor -->
+        <div id="cursor" class="cursor-container">
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+            <path
+              d="M5.65376 12.3673H5.46026L5.31717 12.4976L0.500002 16.8829L0.500002 1.19841L11.7841 12.3673H5.65376Z"
+              fill="white"
+              stroke="black"
+            />
+          </svg>
+          <div class="cursor-tag">You</div>
+        </div>
+
+        <!-- Emoji -->
+        <div id="emoji-thumb" class="emoji">👍</div>
+
+        <!-- Overlay -->
+        <div id="fade-overlay"></div>
+      </div>
+
+      <style>
+        #flowchart-vertical {
+          width: 1440px;
+          height: 2560px;
+          background-color: #ffffff;
+          background-image: radial-gradient(#e5e5e5 1px, transparent 1px);
+          background-size: 20px 20px;
+          position: absolute;
+          overflow: hidden;
+          font-family: "Inter", sans-serif;
+        }
+
+        #flowchart-vertical .canvas {
+          width: 100%;
+          height: 100%;
+          position: absolute;
+          transform: none;
+          transform-origin: 720px 640px;
+        }
+
+        #flowchart-vertical .node {
+          position: absolute;
+          transform: translate(-50%, -50%) scale(0);
+          padding: 16px 24px;
+          border-radius: 12px;
+          font-size: 18px;
+          font-weight: 500;
+          color: #333;
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+          white-space: nowrap;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          z-index: 10;
+        }
+
+        #flowchart-vertical .node.yellow {
+          background-color: #e8d44d;
+        }
+        #flowchart-vertical .node.green {
+          background-color: #c2e8a0;
+        }
+        #flowchart-vertical .node.peach {
+          background-color: #f5c5a3;
+        }
+        #flowchart-vertical .node.lavender {
+          background-color: #d4c5f9;
+        }
+        #flowchart-vertical .node.blue {
+          background-color: #a8d8f0;
+        }
+        #flowchart-vertical .node.pink {
+          background-color: #f8b4c8;
+        }
+
+        #flowchart-vertical .connectors {
+          position: absolute;
+          top: 0;
+          left: 0;
+          z-index: 5;
+          pointer-events: none;
+        }
+
+        #flowchart-vertical .connector {
+          stroke-dasharray: 1000;
+          stroke-dashoffset: 1000;
+        }
+
+        #flowchart-vertical .connector-label {
+          position: absolute;
+          font-size: 14px;
+          font-weight: 600;
+          color: #333;
+          background: white;
+          padding: 2px 6px;
+          border-radius: 4px;
+          opacity: 0;
+          z-index: 6;
+          transform: translate(-50%, -50%);
+        }
+
+        #flowchart-vertical #label-yes {
+          left: 580px;
+          top: 420px;
+        }
+        #flowchart-vertical #label-not-sure {
+          left: 860px;
+          top: 420px;
+        }
+
+        #flowchart-vertical .cursor-container {
+          position: absolute;
+          left: 1440px;
+          top: 2560px;
+          z-index: 100;
+          pointer-events: none;
+          display: flex;
+          align-items: flex-start;
+        }
+
+        #flowchart-vertical .cursor-tag {
+          background-color: #9747ff;
+          color: white;
+          padding: 2px 8px;
+          border-radius: 4px;
+          font-size: 12px;
+          font-weight: 600;
+          margin-left: 4px;
+          margin-top: 12px;
+        }
+
+        #flowchart-vertical .squiggle-container {
+          position: absolute;
+          right: 0;
+          bottom: -4px;
+          opacity: 0;
+        }
+
+        #flowchart-vertical .emoji {
+          position: absolute;
+          font-size: 32px;
+          left: 390px;
+          top: 960px;
+          transform: translate(-50%, -50%) scale(0);
+          z-index: 20;
+        }
+
+        #flowchart-vertical #fade-overlay {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          background-color: white;
+          opacity: 0;
+          z-index: 1000;
+          pointer-events: none;
+        }
+
+        #flowchart-vertical .selection-border {
+          position: absolute;
+          top: -4px;
+          left: -4px;
+          right: -4px;
+          bottom: -4px;
+          border: 2px solid #0b84f3;
+          border-radius: 16px;
+          pointer-events: none;
+          opacity: 0;
+        }
+
+        #flowchart-vertical .text-highlight {
+          background-color: #d0e4ff;
+        }
+      </style>
+
+      <script>
+        (function () {
+          const tl = gsap.timeline({ paused: true });
+          const S = "#flowchart-vertical";
+          const nodePython = document.querySelector(S + " #node-python");
+          const pythonText = document.querySelector(S + " #python-text");
+
+          // 1. Root node scales in
+          tl.to(S + " #node-root", { scale: 1, duration: 0.4, ease: "power2.out" });
+
+          // 2. Hold
+          tl.addLabel("hold1", "+=0.6");
+
+          // 3. Connectors draw
+          tl.to(
+            S + " .connector#path-1-L, " + S + " .connector#path-1-R",
+            { strokeDashoffset: 0, duration: 0.5, ease: "none" },
+            "hold1",
+          );
+
+          tl.to(
+            S + " #label-yes, " + S + " #label-not-sure",
+            { opacity: 1, duration: 0.2 },
+            "hold1+=0.25",
+          );
+
+          // 4. Level 2 nodes
+          tl.to(S + " #node-yes", { scale: 1, duration: 0.4, ease: "back.out(1.7)" }, "hold1+=0.4");
+          tl.to(
+            S + " #node-not-sure",
+            { scale: 1, duration: 0.4, ease: "back.out(1.7)" },
+            "hold1+=0.6",
+          );
+
+          // 5. Hold
+          tl.addLabel("hold2", "+=0.5");
+
+          // 6. Level 2→3 connectors
+          tl.to(
+            S +
+              " .connector#path-2-LL, " +
+              S +
+              " .connector#path-2-LR, " +
+              S +
+              " .connector#path-2-RL, " +
+              S +
+              " .connector#path-2-RR",
+            { strokeDashoffset: 0, duration: 0.4, ease: "none" },
+            "hold2",
+          );
+
+          // 7. Leaf nodes
+          const leafNodes = [
+            S + " #node-python",
+            S + " #node-nocode",
+            S + " #node-website",
+            S + " #node-course",
+          ];
+          leafNodes.forEach((id, i) => {
+            tl.to(
+              id,
+              { scale: 1, duration: 0.4, ease: "back.out(1.7)" },
+              `hold2+=${0.3 + i * 0.15}`,
+            );
+          });
+
+          tl.to(S + " .squiggle-container", { opacity: 1, duration: 0.1 }, "hold2+=0.3");
+
+          // 8. Hold
+          tl.addLabel("hold3", "+=0.8");
+
+          // 9. Cursor drifts in
+          tl.to(S + " #cursor", { x: -1110, y: -1560, duration: 1, ease: "power1.inOut" }, "hold3");
+
+          // 10. Cursor clicks — selection border
+          tl.add(() => {
+            if (!nodePython) return;
+            if (!nodePython.querySelector(".selection-border")) {
+              const border = document.createElement("div");
+              border.className = "selection-border";
+              nodePython.appendChild(border);
+            }
+            gsap.set(S + " .selection-border", { opacity: 1 });
+          }, "hold3+=1");
+
+          tl.to(
+            S + " #cursor",
+            { scale: 0.8, duration: 0.05, yoyo: true, repeat: 1, overwrite: "auto" },
+            "hold3+=1",
+          );
+
+          // 11. Hold
+          tl.addLabel("hold4", "+=0.3");
+
+          // 12. Double-click to highlight "Pythom"
+          tl.to(
+            S + " #cursor",
+            { scale: 0.8, duration: 0.05, yoyo: true, repeat: 3, overwrite: "auto" },
+            "hold4",
+          );
+          tl.add(() => {
+            if (!pythonText) return;
+            pythonText.innerHTML = 'Start with <span class="text-highlight">Pythom</span>';
+          }, "hold4+=0.1");
+
+          // 13. Hold
+          tl.addLabel("hold5", "+=0.2");
+
+          // 14. Type correction: "Pythom" → "Python"
+          const typingStart = tl.labels["hold5"];
+          const words = ["P", "Py", "Pyt", "Pyth", "Pytho", "Python"];
+          words.forEach((word, i) => {
+            tl.add(
+              () => {
+                if (pythonText)
+                  pythonText.innerHTML = `Start with <span class="text-highlight">${word}</span>`;
+              },
+              typingStart + i * 0.05,
+            );
+          });
+
+          const typingEnd = typingStart + words.length * 0.05;
+          tl.add(() => {
+            if (pythonText) pythonText.innerHTML = "Start with Python";
+            gsap.set(S + " .squiggle-container", { opacity: 0 });
+          }, typingEnd);
+
+          // 15. Hold
+          tl.addLabel("hold6", typingEnd + 0.5);
+
+          // 16. Cursor clicks away to deselect
+          tl.to(S + " #cursor", { x: -1050, y: -1520, duration: 0.3, overwrite: "auto" }, "hold6");
+          tl.to(
+            S + " #cursor",
+            { scale: 0.8, duration: 0.05, yoyo: true, repeat: 1, overwrite: "auto" },
+            "hold6+=0.3",
+          );
+          tl.to(S + " .selection-border", { opacity: 0, duration: 0.1 }, "hold6+=0.3");
+
+          // 17. Emoji pop
+          tl.to(
+            S + " #emoji-thumb",
+            { scale: 1, duration: 0.15, ease: "back.out(2)" },
+            "hold6+=0.4",
+          );
+
+          // 18. Hold
+          tl.addLabel("hold7", "+=2");
+
+          // 19. Fade out
+          tl.to(S + " #fade-overlay", { opacity: 1, duration: 0.5 }, "hold7");
+
+          window.__timelines = window.__timelines || {};
+          window.__timelines["flowchart-vertical"] = tl;
+        })();
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/flowchart/flowchart.html b/docs/public/catalog/blocks/flowchart/flowchart.html
new file mode 100644
index 0000000000..da31cbcac5
--- /dev/null
+++ b/docs/public/catalog/blocks/flowchart/flowchart.html
@@ -0,0 +1,467 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Flowchart</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=block"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background-color: #ffffff;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="flowchart"
+      data-composition-id="flowchart"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="12"
+    >
+      <div class="canvas">
+        <svg class="connectors" width="1920" height="1080" viewBox="0 0 1920 1080">
+          <!-- Level 1 to 2 -->
+          <path
+            id="path-1-L"
+            class="connector"
+            d="M 960 130 L 960 200 L 600 200 L 600 270"
+            fill="none"
+            stroke="#333"
+            stroke-width="4"
+          />
+          <path
+            id="path-1-R"
+            class="connector"
+            d="M 960 130 L 960 200 L 1320 200 L 1320 270"
+            fill="none"
+            stroke="#333"
+            stroke-width="4"
+          />
+
+          <!-- Level 2 to 3 (Left side) -->
+          <path
+            id="path-2-LL"
+            class="connector"
+            d="M 600 330 L 600 400 L 400 400 L 400 470"
+            fill="none"
+            stroke="#333"
+            stroke-width="4"
+          />
+          <path
+            id="path-2-LR"
+            class="connector"
+            d="M 600 330 L 600 400 L 800 400 L 800 470"
+            fill="none"
+            stroke="#333"
+            stroke-width="4"
+          />
+
+          <!-- Level 2 to 3 (Right side) -->
+          <path
+            id="path-2-RL"
+            class="connector"
+            d="M 1320 330 L 1320 400 L 1120 400 L 1120 470"
+            fill="none"
+            stroke="#333"
+            stroke-width="4"
+          />
+          <path
+            id="path-2-RR"
+            class="connector"
+            d="M 1320 330 L 1320 400 L 1520 400 L 1520 470"
+            fill="none"
+            stroke="#333"
+            stroke-width="4"
+          />
+        </svg>
+
+        <div id="label-yes" class="connector-label">Yes</div>
+        <div id="label-not-sure" class="connector-label">Not sure</div>
+
+        <!-- Level 1 -->
+        <div id="node-root" class="node yellow" style="left: 960px; top: 100px">
+          Should I learn to code?
+        </div>
+
+        <!-- Level 2 -->
+        <div id="node-yes" class="node green" style="left: 600px; top: 300px">Yes</div>
+        <div id="node-not-sure" class="node peach" style="left: 1320px; top: 300px">Not sure</div>
+
+        <!-- Level 3 -->
+        <div id="node-python" class="node lavender" style="left: 400px; top: 500px">
+          <div style="position: relative; display: inline-block">
+            <span id="python-text">Start with Pythom</span>
+            <svg class="squiggle-container" width="64" height="6" viewBox="0 0 64 6">
+              <path
+                id="squiggle"
+                d="M 0 3 Q 2 0 4 3 T 8 3 T 12 3 T 16 3 T 20 3 T 24 3 T 28 3 T 32 3 T 36 3 T 40 3 T 44 3 T 48 3 T 52 3 T 56 3 T 60 3 T 64 3"
+                fill="none"
+                stroke="#E53935"
+                stroke-width="2"
+              />
+            </svg>
+          </div>
+        </div>
+        <div id="node-nocode" class="node blue" style="left: 800px; top: 500px">
+          Try no-code first
+        </div>
+        <div id="node-website" class="node pink" style="left: 1120px; top: 500px">
+          Build a personal website
+        </div>
+        <div id="node-course" class="node yellow" style="left: 1520px; top: 500px">
+          Take a free intro course
+        </div>
+
+        <!-- Cursor -->
+        <div id="cursor" class="cursor-container">
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+            <path
+              d="M5.65376 12.3673H5.46026L5.31717 12.4976L0.500002 16.8829L0.500002 1.19841L11.7841 12.3673H5.65376Z"
+              fill="white"
+              stroke="black"
+            />
+          </svg>
+          <div class="cursor-tag">You</div>
+        </div>
+
+        <!-- Emoji -->
+        <div id="emoji-thumb" class="emoji">👍</div>
+
+        <!-- Overlay -->
+        <div id="fade-overlay"></div>
+      </div>
+
+      <style>
+        [data-composition-id="flowchart"] {
+          width: 1920px;
+          height: 1080px;
+          background-color: #ffffff;
+          background-image: radial-gradient(#e5e5e5 1px, transparent 1px);
+          background-size: 20px 20px;
+          position: absolute;
+          overflow: hidden;
+          font-family: "Inter", sans-serif;
+        }
+
+        [data-composition-id="flowchart"] .canvas {
+          width: 100%;
+          height: 100%;
+          position: absolute;
+          transform: scale(1.2);
+          transform-origin: 960px 300px;
+        }
+
+        [data-composition-id="flowchart"] .node {
+          position: absolute;
+          transform: translate(-50%, -50%) scale(0);
+          padding: 16px 24px;
+          border-radius: 12px;
+          font-size: 18px;
+          font-weight: 500;
+          color: #333;
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+          white-space: nowrap;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          z-index: 10;
+        }
+
+        [data-composition-id="flowchart"] .node.yellow {
+          background-color: #e8d44d;
+        }
+        [data-composition-id="flowchart"] .node.green {
+          background-color: #c2e8a0;
+        }
+        [data-composition-id="flowchart"] .node.peach {
+          background-color: #f5c5a3;
+        }
+        [data-composition-id="flowchart"] .node.lavender {
+          background-color: #d4c5f9;
+        }
+        [data-composition-id="flowchart"] .node.blue {
+          background-color: #a8d8f0;
+        }
+        [data-composition-id="flowchart"] .node.pink {
+          background-color: #f8b4c8;
+        }
+
+        [data-composition-id="flowchart"] .connectors {
+          position: absolute;
+          top: 0;
+          left: 0;
+          z-index: 5;
+          pointer-events: none;
+        }
+
+        [data-composition-id="flowchart"] .connector {
+          stroke-dasharray: 1000;
+          stroke-dashoffset: 1000;
+        }
+
+        [data-composition-id="flowchart"] .connector-label {
+          position: absolute;
+          font-size: 14px;
+          font-weight: 600;
+          color: #333;
+          background: white;
+          padding: 2px 6px;
+          border-radius: 4px;
+          opacity: 0;
+          z-index: 6;
+          transform: translate(-50%, -50%);
+        }
+
+        [data-composition-id="flowchart"] #label-yes {
+          left: 780px;
+          top: 230px;
+        }
+        [data-composition-id="flowchart"] #label-not-sure {
+          left: 1140px;
+          top: 230px;
+        }
+
+        [data-composition-id="flowchart"] .cursor-container {
+          position: absolute;
+          left: 1920px;
+          top: 1080px;
+          z-index: 100;
+          pointer-events: none;
+          display: flex;
+          align-items: flex-start;
+        }
+
+        [data-composition-id="flowchart"] .cursor-tag {
+          background-color: #9747ff;
+          color: white;
+          padding: 2px 8px;
+          border-radius: 4px;
+          font-size: 12px;
+          font-weight: 600;
+          margin-left: 4px;
+          margin-top: 12px;
+        }
+
+        [data-composition-id="flowchart"] .squiggle-container {
+          position: absolute;
+          right: 0;
+          bottom: -4px;
+          opacity: 0;
+        }
+
+        [data-composition-id="flowchart"] .emoji {
+          position: absolute;
+          font-size: 32px;
+          left: 510px;
+          top: 500px;
+          transform: translate(-50%, -50%) scale(0);
+          z-index: 20;
+        }
+
+        [data-composition-id="flowchart"] #fade-overlay {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          background-color: white;
+          opacity: 0;
+          z-index: 1000;
+          pointer-events: none;
+        }
+
+        [data-composition-id="flowchart"] .selection-border {
+          position: absolute;
+          top: -4px;
+          left: -4px;
+          right: -4px;
+          bottom: -4px;
+          border: 2px solid #0b84f3;
+          border-radius: 16px;
+          pointer-events: none;
+          opacity: 0;
+        }
+
+        [data-composition-id="flowchart"] .text-highlight {
+          background-color: #d0e4ff;
+        }
+      </style>
+
+      <script>
+        (function () {
+          const tl = gsap.timeline({ paused: true });
+          const S = '[data-composition-id="flowchart"]';
+          const nodePython = document.querySelector(S + " #node-python");
+          const pythonText = document.querySelector(S + " #python-text");
+
+          // 1. Root node scales in
+          tl.to(S + " #node-root", { scale: 1, duration: 0.4, ease: "power2.out" });
+
+          // 2. Hold
+          tl.addLabel("hold1", "+=0.6");
+
+          // 3. Connectors draw
+          tl.to(
+            S + " .connector#path-1-L, " + S + " .connector#path-1-R",
+            { strokeDashoffset: 0, duration: 0.5, ease: "none" },
+            "hold1",
+          );
+
+          tl.to(
+            S + " #label-yes, " + S + " #label-not-sure",
+            { opacity: 1, duration: 0.2 },
+            "hold1+=0.25",
+          );
+
+          // 4. Level 2 nodes
+          tl.to(S + " #node-yes", { scale: 1, duration: 0.4, ease: "back.out(1.7)" }, "hold1+=0.4");
+          tl.to(
+            S + " #node-not-sure",
+            { scale: 1, duration: 0.4, ease: "back.out(1.7)" },
+            "hold1+=0.6",
+          );
+
+          // 5. Hold
+          tl.addLabel("hold2", "+=0.5");
+
+          // 6. Level 2→3 connectors
+          tl.to(
+            S +
+              " .connector#path-2-LL, " +
+              S +
+              " .connector#path-2-LR, " +
+              S +
+              " .connector#path-2-RL, " +
+              S +
+              " .connector#path-2-RR",
+            { strokeDashoffset: 0, duration: 0.4, ease: "none" },
+            "hold2",
+          );
+
+          // 7. Leaf nodes
+          const leafNodes = [
+            S + " #node-python",
+            S + " #node-nocode",
+            S + " #node-website",
+            S + " #node-course",
+          ];
+          leafNodes.forEach((id, i) => {
+            tl.to(
+              id,
+              { scale: 1, duration: 0.4, ease: "back.out(1.7)" },
+              `hold2+=${0.3 + i * 0.15}`,
+            );
+          });
+
+          tl.to(S + " .squiggle-container", { opacity: 1, duration: 0.1 }, "hold2+=0.3");
+
+          // 8. Hold
+          tl.addLabel("hold3", "+=0.8");
+
+          // 9. Cursor drifts in
+          tl.to(S + " #cursor", { x: -1470, y: -540, duration: 1, ease: "power1.inOut" }, "hold3");
+
+          // 10. Cursor clicks — selection border
+          tl.add(() => {
+            if (!nodePython) return;
+            if (!nodePython.querySelector(".selection-border")) {
+              const border = document.createElement("div");
+              border.className = "selection-border";
+              nodePython.appendChild(border);
+            }
+            gsap.set(S + " .selection-border", { opacity: 1 });
+          }, "hold3+=1");
+
+          tl.to(
+            S + " #cursor",
+            { scale: 0.8, duration: 0.05, yoyo: true, repeat: 1, overwrite: "auto" },
+            "hold3+=1",
+          );
+
+          // 11. Hold
+          tl.addLabel("hold4", "+=0.3");
+
+          // 12. Double-click to highlight "Pythom"
+          tl.to(
+            S + " #cursor",
+            { scale: 0.8, duration: 0.05, yoyo: true, repeat: 3, overwrite: "auto" },
+            "hold4",
+          );
+          tl.add(() => {
+            if (!pythonText) return;
+            pythonText.innerHTML = 'Start with <span class="text-highlight">Pythom</span>';
+          }, "hold4+=0.1");
+
+          // 13. Hold
+          tl.addLabel("hold5", "+=0.2");
+
+          // 14. Type correction: "Pythom" → "Python"
+          const typingStart = tl.labels["hold5"];
+          const words = ["P", "Py", "Pyt", "Pyth", "Pytho", "Python"];
+          words.forEach((word, i) => {
+            tl.add(
+              () => {
+                if (pythonText)
+                  pythonText.innerHTML = `Start with <span class="text-highlight">${word}</span>`;
+              },
+              typingStart + i * 0.05,
+            );
+          });
+
+          const typingEnd = typingStart + words.length * 0.05;
+          tl.add(() => {
+            if (pythonText) pythonText.innerHTML = "Start with Python";
+            gsap.set(S + " .squiggle-container", { opacity: 0 });
+          }, typingEnd);
+
+          // 15. Hold
+          tl.addLabel("hold6", typingEnd + 0.5);
+
+          // 16. Cursor clicks away to deselect
+          tl.to(S + " #cursor", { x: -1420, y: -500, duration: 0.3, overwrite: "auto" }, "hold6");
+          tl.to(
+            S + " #cursor",
+            { scale: 0.8, duration: 0.05, yoyo: true, repeat: 1, overwrite: "auto" },
+            "hold6+=0.3",
+          );
+          tl.to(S + " .selection-border", { opacity: 0, duration: 0.1 }, "hold6+=0.3");
+
+          // 17. Emoji pop
+          tl.to(
+            S + " #emoji-thumb",
+            { scale: 1, duration: 0.15, ease: "back.out(2)" },
+            "hold6+=0.4",
+          );
+
+          // 18. Hold
+          tl.addLabel("hold7", "+=2");
+
+          // 19. Fade out
+          tl.to(S + " #fade-overlay", { opacity: 1, duration: 0.5 }, "hold7");
+
+          window.__timelines = window.__timelines || {};
+          window.__timelines["flowchart"] = tl;
+        })();
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/freeze-frame-dressing/demo-background.jpg b/docs/public/catalog/blocks/freeze-frame-dressing/demo-background.jpg
new file mode 100644
index 0000000000..4f944ae6b4
Binary files /dev/null and b/docs/public/catalog/blocks/freeze-frame-dressing/demo-background.jpg differ
diff --git a/docs/public/catalog/blocks/freeze-frame-dressing/demo-cutout.webp b/docs/public/catalog/blocks/freeze-frame-dressing/demo-cutout.webp
new file mode 100644
index 0000000000..383d554f34
Binary files /dev/null and b/docs/public/catalog/blocks/freeze-frame-dressing/demo-cutout.webp differ
diff --git a/docs/public/catalog/blocks/freeze-frame-dressing/demo.html b/docs/public/catalog/blocks/freeze-frame-dressing/demo.html
new file mode 100644
index 0000000000..cd0f2e5c84
--- /dev/null
+++ b/docs/public/catalog/blocks/freeze-frame-dressing/demo.html
@@ -0,0 +1,102 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+
+      html,
+      body,
+      #freeze-frame-demo {
+        width: 960px;
+        height: 540px;
+        margin: 0;
+        overflow: hidden;
+        background: #111;
+      }
+
+      #freeze-demo-background,
+      #freeze-demo-cutout,
+      #freeze-demo-overlay {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+      }
+
+      #freeze-demo-background {
+        object-fit: cover;
+        filter: saturate(0.28) contrast(1.1) brightness(0.72);
+        transform: scale(1.04) rotate(-0.4deg);
+      }
+
+      #freeze-demo-cutout {
+        z-index: 10;
+        object-fit: contain;
+        filter: drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff)
+          drop-shadow(0 -3px 0 #fff) drop-shadow(14px 18px 8px rgb(16 18 23 / 46%));
+      }
+
+      #freeze-demo-overlay {
+        z-index: 20;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="freeze-frame-demo"
+      data-composition-id="freeze-frame-demo"
+      data-start="0"
+      data-duration="4"
+      data-width="960"
+      data-height="540"
+    >
+      <img
+        id="freeze-demo-background"
+        class="clip"
+        src="./demo-background.jpg"
+        alt=""
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+      />
+      <img
+        id="freeze-demo-cutout"
+        class="clip"
+        src="./demo-cutout.webp"
+        alt=""
+        data-start="0"
+        data-duration="4"
+        data-track-index="1"
+      />
+      <div
+        id="freeze-demo-overlay"
+        data-composition-id="freeze-frame-dressing"
+        data-composition-src="freeze-frame-dressing.html"
+        data-start="0"
+        data-duration="4"
+        data-track-index="2"
+        data-width="960"
+        data-height="540"
+      ></div>
+    </div>
+
+    <script>
+      var tl = gsap.timeline({ paused: true });
+      tl.fromTo(
+        "#freeze-demo-cutout",
+        { y: 42, scale: 0.86, rotation: -2 },
+        { y: 0, scale: 1, rotation: 0.4, duration: 0.5, ease: "back.out(1.35)" },
+        1,
+      );
+      tl.to({}, { duration: 4, ease: "none" }, 0);
+      window.__timelines = window.__timelines || {};
+      window.__timelines["freeze-frame-demo"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/freeze-frame-dressing/freeze-frame-dressing.html b/docs/public/catalog/blocks/freeze-frame-dressing/freeze-frame-dressing.html
new file mode 100644
index 0000000000..458db7e892
--- /dev/null
+++ b/docs/public/catalog/blocks/freeze-frame-dressing/freeze-frame-dressing.html
@@ -0,0 +1,120 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: transparent;
+      }
+
+      #hf-freeze-paper {
+        position: absolute;
+        inset: 0;
+        opacity: 0;
+        background:
+          linear-gradient(115deg, rgb(248 84 73 / 86%) 0 16%, transparent 16%),
+          linear-gradient(345deg, rgb(255 221 82 / 92%) 0 17%, transparent 17%),
+          linear-gradient(rgb(244 240 224 / 78%), rgb(244 240 224 / 78%));
+        clip-path: polygon(2% 8%, 97% 2%, 94% 94%, 6% 98%);
+        mix-blend-mode: screen;
+        pointer-events: none;
+      }
+
+      .hf-freeze-tape {
+        position: absolute;
+        width: 12.5vmin;
+        height: 2.9vmin;
+        opacity: 0;
+        background: rgb(255 236 168 / 76%);
+        border: 1px solid rgb(110 91 55 / 18%);
+        box-shadow: 0 0.3vmin 0.8vmin rgb(20 16 10 / 18%);
+        pointer-events: none;
+      }
+
+      #hf-freeze-tape-a {
+        top: 8%;
+        left: 12.5%;
+        transform: rotate(-8deg);
+      }
+
+      #hf-freeze-tape-b {
+        right: 12.5%;
+        bottom: 7%;
+        transform: rotate(7deg);
+      }
+
+      #hf-freeze-flash {
+        position: absolute;
+        inset: 0;
+        opacity: 0;
+        background: #fff;
+        pointer-events: none;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="freeze-frame-dressing"
+      data-composition-id="freeze-frame-dressing"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="hf-freeze-paper" aria-hidden="true"></div>
+      <div id="hf-freeze-tape-a" class="hf-freeze-tape" aria-hidden="true"></div>
+      <div id="hf-freeze-tape-b" class="hf-freeze-tape" aria-hidden="true"></div>
+      <div id="hf-freeze-flash" aria-hidden="true"></div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      var paper = document.getElementById("hf-freeze-paper");
+      var host = paper && paper.closest("[data-composition-id]");
+      if (!host) throw new Error("Freeze-Frame Dressing could not find its composition host");
+
+      var compositionId = host.getAttribute("data-composition-id");
+      var duration = Number(host.getAttribute("data-duration")) || 4;
+      var hit = Math.max(0.1, duration * 0.24);
+      var exit = Math.max(hit + 0.7, duration - 0.3);
+      var tl = gsap.timeline({ paused: true });
+
+      tl.to({}, { duration: duration, ease: "none" }, 0);
+      tl.to("#hf-freeze-flash", { opacity: 0.95, duration: 0.06, ease: "power2.out" }, hit);
+      tl.to("#hf-freeze-flash", { opacity: 0, duration: 0.24, ease: "power2.in" }, hit + 0.06);
+      tl.to("#hf-freeze-paper", { opacity: 0.64, duration: 0.18, ease: "power2.out" }, hit + 0.04);
+      tl.fromTo(
+        "#hf-freeze-tape-a",
+        { opacity: 0, scale: 1.18 },
+        { opacity: 1, scale: 1, duration: 0.24, ease: "power2.out" },
+        hit + 0.3,
+      );
+      tl.fromTo(
+        "#hf-freeze-tape-b",
+        { opacity: 0, scale: 1.18 },
+        { opacity: 1, scale: 1, duration: 0.24, ease: "power2.out" },
+        hit + 0.42,
+      );
+      tl.to(
+        ["#hf-freeze-paper", "#hf-freeze-tape-a", "#hf-freeze-tape-b"],
+        { opacity: 0, duration: 0.24, ease: "power2.in" },
+        exit,
+      );
+
+      window.__timelines[compositionId] = tl;
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/gallery-tunnel/gallery-tunnel.html b/docs/public/catalog/blocks/gallery-tunnel/gallery-tunnel.html
new file mode 100644
index 0000000000..d016b1bc99
--- /dev/null
+++ b/docs/public/catalog/blocks/gallery-tunnel/gallery-tunnel.html
@@ -0,0 +1,470 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Gallery Tunnel</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #000;
+        overflow: hidden;
+      }
+      #gt-root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #gt-backdrop {
+        position: absolute;
+        inset: 0;
+        background: #000000;
+      }
+      #gt-canvas {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+      }
+      /* Off-screen decode well: the <img> elements live in the DOM so the page
+         load event waits for them, but they are never composited themselves —
+         WebGL reads them as textures. The well is clipped to 1px; the images
+         inside keep their natural layout size on purpose, because texImage2D
+         uploads an <img> at its LAID-OUT size — sizing them down with CSS
+         uploads a 1x1 texture and every panel samples one dark pixel. */
+      #gt-assets {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1px;
+        height: 1px;
+        overflow: hidden;
+        opacity: 0;
+        pointer-events: none;
+      }
+    </style>
+  </head>
+  <body>
+    <!--
+      Content slots. Every panel in the corridor is a slot, and `images` fills a
+      share of them with your own artwork — drop the files in the project's
+      assets/ and list them, either by editing the `images` default below or from
+      the host composition:
+
+        <div
+          data-composition-id="gallery-tunnel"
+          data-composition-src="compositions/gallery-tunnel.html"
+          data-start="0" data-duration="12" data-track-index="0"
+          data-width="1920" data-height="1080"
+          style="--images: assets/shot-1.png, assets/shot-2.png, assets/shot-3.png; --imagemix: 0.7"
+        ></div>
+
+      Any number of images works; they are dealt to slots by hash, so one image
+      recurs at different depths rather than appearing once. Each is contain-fit
+      inside its slot, so a 16:9 screenshot keeps its aspect. `imageMix` sets the
+      image-vs-colour split (1 = every filled slot is an image), `fill` how many
+      slots are filled at all.
+    -->
+    <div
+      id="gt-root"
+      data-composition-id="gallery-tunnel"
+      data-root="true"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="12"
+      data-composition-variables='[
+        {"id":"images","type":"string","label":"Image slots: comma-separated paths, tiled into the panels (e.g. assets/shot-1.png,assets/shot-2.png)","default":"","placeholder":"assets/shot-1.png,assets/shot-2.png"},
+        {"id":"imageMix","type":"number","label":"Image share of filled slots (0 = all colour, 1 = all images)","default":0.5,"min":0,"max":1,"step":0.05},
+        {"id":"speed","type":"number","label":"Flight speed","default":3,"min":0,"max":8,"step":0.1,"unit":"segments/s"},
+        {"id":"palette","type":"string","label":"Slab palette: comma-separated hex colours","default":"#FF6A00,#AB54F7,#EA3737,#0072E3,#00AA3C,#FFB200"},
+        {"id":"grid","type":"number","label":"Grid density: slots per wall face per axis (2 = 4 per face, 16 per segment)","default":2,"min":1,"max":4,"step":1},
+        {"id":"fill","type":"number","label":"Slot fill rate","default":0.5,"min":0,"max":1,"step":0.05},
+        {"id":"fog","type":"number","label":"Fog distance: depth at which the corridor reaches pure backdrop","default":14.25,"min":3,"max":14.5,"step":0.25,"unit":"segments"},
+        {"id":"edgeColor","type":"color","label":"Edge line colour","default":"#B0B0B0"},
+        {"id":"edgeOpacity","type":"number","label":"Edge line opacity","default":0.5,"min":0,"max":1,"step":0.05},
+        {"id":"backdrop","type":"color","label":"Backdrop and fog colour","default":"#000000"}
+      ]'
+    >
+      <div id="gt-backdrop"></div>
+      <canvas id="gt-canvas" width="1920" height="1080"></canvas>
+      <div id="gt-assets" aria-hidden="true" data-layout-allow-overflow></div>
+
+      <!-- Driver clip: gives HyperFrames a timed element to own on track 0. -->
+      <div
+        id="gt-drv"
+        class="clip"
+        data-start="0"
+        data-duration="12"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+
+    <script>
+      (function () {
+        var DUR = 12;
+        var W = 1920;
+        var H = 1080;
+
+        // Fixed tunnel geometry, measured off the reference.
+        var TUNNEL_WIDTH = 2;
+        var TUNNEL_HEIGHT = 1.8;
+        var SEGMENT_DEPTH = 1;
+        var NUM_SEGMENTS = 15;
+        var LINE_RADIUS = 0.003;
+        var FOV = 75;
+        var INSET = 0.94; // slab gutter inside its cell, so tiles read as discrete
+        var SKIN = 0.002; // push slabs just behind the wall plane so edges stay on top
+
+        var ROOT = document.getElementById("gt-root");
+        var CS = getComputedStyle(ROOT);
+
+        // `data-composition-variables` is the single owner of every declared
+        // default — parse it rather than repeating each default a second time
+        // in JS. `window.__hyperframes` is NOT guaranteed to exist yet when this
+        // inline script runs, so it can only ever be an override, never the
+        // source. Precedence: host CSS custom property, runtime variable bag,
+        // declared default.
+        var DECL = {};
+        JSON.parse(ROOT.getAttribute("data-composition-variables") || "[]").forEach(function (v) {
+          DECL[v.id] = v.default;
+        });
+        var HF = window.__hyperframes;
+        var V = (HF && HF.getVariables && HF.getVariables()) || {};
+
+        function raw(id) {
+          var css = CS.getPropertyValue("--" + id.toLowerCase()).trim();
+          if (css !== "") return css;
+          if (V[id] !== undefined && V[id] !== "") return V[id];
+          return DECL[id];
+        }
+        function num(id) {
+          var n = parseFloat(raw(id));
+          return isFinite(n) ? n : 0;
+        }
+        function str(id) {
+          var s = raw(id);
+          return typeof s === "string" ? s.trim() : "";
+        }
+        function list(id) {
+          return str(id)
+            .split(",")
+            .map(function (s) {
+              return s.trim();
+            })
+            .filter(function (s) {
+              return s !== "";
+            });
+        }
+
+        var SPEED = num("speed");
+        var GRID = Math.max(1, Math.min(4, Math.round(num("grid"))));
+        var FILL = num("fill");
+        var IMAGE_MIX = num("imageMix");
+        var FOG_FAR = Math.max(3, Math.min(14.5, num("fog")));
+        var EDGE_OPACITY = num("edgeOpacity");
+        var EDGE_COLOR = str("edgeColor");
+        var BACKDROP = str("backdrop");
+        var PALETTE = list("palette");
+        var IMAGE_SRCS = list("images");
+
+        document.getElementById("gt-backdrop").style.background = BACKDROP;
+
+        // How far behind the camera a segment travels before it recycles. Tying
+        // it to the fog distance is the whole trick: the recycle boundary lands
+        // at exactly FOG_FAR, so a segment reappears already fogged to pure
+        // backdrop and nothing ever pops in at the far end. One owner for the
+        // invariant — move the fog and the boundary follows.
+        var BACK = Math.max(0, Math.min(1.5, NUM_SEGMENTS * SEGMENT_DEPTH - FOG_FAR));
+
+        // Deterministic 2D integer hash — the only source of "randomness".
+        // Content at frame N is a pure function of (absolute segment, slot).
+        function hash2(a, b) {
+          var h = Math.imul(a | 0, 0x27d4eb2d) ^ Math.imul(b | 0, 0x165667b1);
+          h = Math.imul(h ^ (h >>> 15), 0x2545f491);
+          h ^= h >>> 13;
+          return (h >>> 0) / 4294967296;
+        }
+
+        var THREEJS = window.THREE;
+        var canvas = document.getElementById("gt-canvas");
+        var renderer = new THREEJS.WebGLRenderer({
+          canvas: canvas,
+          antialias: true,
+          alpha: false,
+          preserveDrawingBuffer: true,
+        });
+        renderer.setPixelRatio(1);
+        renderer.setSize(W, H, false);
+        renderer.setClearColor(new THREEJS.Color(BACKDROP), 1);
+
+        var scene = new THREEJS.Scene();
+        scene.fog = new THREEJS.Fog(new THREEJS.Color(BACKDROP), 1, FOG_FAR * SEGMENT_DEPTH);
+
+        // Camera sits still at the origin looking down -z; the corridor moves.
+        // Same picture as a moving camera, and the modulo keeps every coordinate
+        // bounded no matter how long the clip runs.
+        var camera = new THREEJS.PerspectiveCamera(FOV, W / H, 0.05, 40);
+        camera.position.set(0, 0, 0);
+        camera.lookAt(0, 0, -1);
+
+        var PLANE = new THREEJS.PlaneGeometry(1, 1);
+
+        var COLOR_MATS = PALETTE.map(function (hex) {
+          return new THREEJS.MeshBasicMaterial({ color: new THREEJS.Color(hex), fog: true });
+        });
+        if (COLOR_MATS.length === 0) {
+          COLOR_MATS.push(new THREEJS.MeshBasicMaterial({ color: 0xffffff, fog: true }));
+        }
+
+        // Caller-supplied content slots. Real <img> elements (so the page load
+        // event waits for the decode) used directly as WebGL textures.
+        var assets = document.getElementById("gt-assets");
+        var IMAGES = IMAGE_SRCS.map(function (src, k) {
+          var el = document.createElement("img");
+          el.id = "gt-img-" + k;
+          el.alt = "";
+          el.src = src;
+          assets.appendChild(el);
+
+          var tex = new THREEJS.Texture(el);
+          tex.minFilter = THREEJS.LinearFilter;
+          tex.magFilter = THREEJS.LinearFilter;
+          tex.generateMipmaps = false;
+          var rec = {
+            aspect: 0,
+            mat: new THREEJS.MeshBasicMaterial({ map: tex, fog: true }),
+          };
+          function ready() {
+            if (!el.naturalWidth) return;
+            rec.aspect = el.naturalWidth / el.naturalHeight;
+            tex.needsUpdate = true;
+          }
+          el.addEventListener("load", ready);
+          ready(); // a cache hit can complete before the listener is attached
+          return rec;
+        });
+
+        var edgeMat = new THREEJS.MeshBasicMaterial({
+          color: new THREEJS.Color(EDGE_COLOR),
+          fog: true,
+          transparent: true,
+          opacity: EDGE_OPACITY,
+        });
+
+        var HW = TUNNEL_WIDTH / 2;
+        var HH = TUNNEL_HEIGHT / 2;
+        var cellZ = SEGMENT_DEPTH / GRID;
+        var cellX = TUNNEL_WIDTH / GRID;
+        var cellY = TUNNEL_HEIGHT / GRID;
+
+        // Four faces of a segment box. `place` maps a cell to a world position
+        // inside the segment (origin at the segment's near boundary, growing
+        // toward -z); `rot` orients the unit plane into that face, inward-facing.
+        // `cw`/`ch` are the cell's extent in the plane's own local axes.
+        var FACES = [
+          {
+            // floor
+            rot: [-Math.PI / 2, 0, 0],
+            cw: cellX,
+            ch: cellZ,
+            place: function (iu, iz) {
+              return [-HW + (iu + 0.5) * cellX, -HH - SKIN, -(iz + 0.5) * cellZ];
+            },
+          },
+          {
+            // ceiling
+            rot: [Math.PI / 2, 0, 0],
+            cw: cellX,
+            ch: cellZ,
+            place: function (iu, iz) {
+              return [-HW + (iu + 0.5) * cellX, HH + SKIN, -(iz + 0.5) * cellZ];
+            },
+          },
+          {
+            // left wall
+            rot: [0, Math.PI / 2, 0],
+            cw: cellZ,
+            ch: cellY,
+            place: function (iu, iz) {
+              return [-HW - SKIN, -HH + (iu + 0.5) * cellY, -(iz + 0.5) * cellZ];
+            },
+          },
+          {
+            // right wall
+            rot: [0, -Math.PI / 2, 0],
+            cw: cellZ,
+            ch: cellY,
+            place: function (iu, iz) {
+              return [HW + SKIN, -HH + (iu + 0.5) * cellY, -(iz + 0.5) * cellZ];
+            },
+          },
+        ];
+
+        var UP = new THREEJS.Vector3(0, 1, 0);
+        // Edges are solid tube geometry, not lines: a cylinder thickens with
+        // perspective the way a real moulding does, which is the whole reason
+        // the corridor reads as built rather than drawn.
+        function tube(group, ax, ay, az, bx, by, bz) {
+          var dx = bx - ax,
+            dy = by - ay,
+            dz = bz - az;
+          var len = Math.sqrt(dx * dx + dy * dy + dz * dz);
+          if (len < 1e-6) return;
+          var mesh = new THREEJS.Mesh(
+            new THREEJS.CylinderGeometry(LINE_RADIUS, LINE_RADIUS, len, 6, 1),
+            edgeMat,
+          );
+          mesh.position.set((ax + bx) / 2, (ay + by) / 2, (az + bz) / 2);
+          mesh.quaternion.setFromUnitVectors(UP, new THREEJS.Vector3(dx / len, dy / len, dz / len));
+          group.add(mesh);
+        }
+
+        function buildEdges(group) {
+          var D = SEGMENT_DEPTH;
+          var k, j, u, z;
+          // The four corner runs (and any interior wall divisions) come from the
+          // side walls; floor/ceiling only contribute their interior lines, so
+          // corners are drawn once and never double-blend at 50% opacity.
+          for (k = 1; k < GRID; k++) {
+            u = -HW + k * cellX;
+            tube(group, u, -HH, 0, u, -HH, -D);
+            tube(group, u, HH, 0, u, HH, -D);
+          }
+          for (k = 0; k <= GRID; k++) {
+            u = -HH + k * cellY;
+            tube(group, -HW, u, 0, -HW, u, -D);
+            tube(group, HW, u, 0, HW, u, -D);
+          }
+          // Ring lines at each depth boundary. The far boundary belongs to the
+          // next segment, so stop one short and the tiling stays seamless.
+          for (j = 0; j < GRID; j++) {
+            z = -j * cellZ;
+            tube(group, -HW, -HH, z, HW, -HH, z);
+            tube(group, -HW, HH, z, HW, HH, z);
+            tube(group, -HW, -HH, z, -HW, HH, z);
+            tube(group, HW, -HH, z, HW, HH, z);
+          }
+        }
+
+        var segs = [];
+        for (var i = 0; i < NUM_SEGMENTS; i++) {
+          var group = new THREEJS.Group();
+          var panels = [];
+          for (var f = 0; f < FACES.length; f++) {
+            var face = FACES[f];
+            for (var iz = 0; iz < GRID; iz++) {
+              for (var iu = 0; iu < GRID; iu++) {
+                var mesh = new THREEJS.Mesh(PLANE, COLOR_MATS[0]);
+                var p = face.place(iu, iz);
+                mesh.position.set(p[0], p[1], p[2]);
+                mesh.rotation.set(face.rot[0], face.rot[1], face.rot[2]);
+                mesh.visible = false;
+                group.add(mesh);
+                panels.push({ mesh: mesh, cw: face.cw * INSET, ch: face.ch * INSET });
+              }
+            }
+          }
+          buildEdges(group);
+          scene.add(group);
+          segs.push({ group: group, panels: panels });
+        }
+
+        // Contain-fit so a supplied screenshot keeps its aspect inside the slot
+        // instead of being squashed to the cell (wall cells are portrait).
+        function fit(p, ar) {
+          if (!ar) {
+            p.mesh.scale.set(p.cw, p.ch, 1);
+            return;
+          }
+          if (ar > p.cw / p.ch) p.mesh.scale.set(p.cw, p.cw / ar, 1);
+          else p.mesh.scale.set(p.ch * ar, p.ch, 1);
+        }
+
+        // Everything about frame t is computed from t alone. `d` is the distance
+        // flown in segments; `a` is the ABSOLUTE segment number occupying pool
+        // slot i right now, which is what content hashes and the every-other
+        // rhythm key off — so a segment carries the same panels every time it is
+        // looked at, no matter how the timeline is scrubbed.
+        function draw(t) {
+          var d = SPEED * t;
+          for (var i = 0; i < NUM_SEGMENTS; i++) {
+            var seg = segs[i];
+            var a = i + NUM_SEGMENTS * Math.ceil((d - i - BACK) / NUM_SEGMENTS);
+            seg.group.position.z = -(a - d) * SEGMENT_DEPTH;
+
+            var lit = a % 2 === 0;
+            var panels = seg.panels;
+            for (var s = 0; s < panels.length; s++) {
+              var p = panels[s];
+              if (!lit || hash2(a, s * 4 + 1) >= FILL) {
+                p.mesh.visible = false;
+                continue;
+              }
+              p.mesh.visible = true;
+              if (IMAGES.length > 0 && hash2(a, s * 4 + 2) < IMAGE_MIX) {
+                var im = IMAGES[Math.floor(hash2(a, s * 4 + 4) * IMAGES.length) % IMAGES.length];
+                p.mesh.material = im.mat;
+                fit(p, im.aspect);
+              } else {
+                var ci = Math.floor(hash2(a, s * 4 + 3) * COLOR_MATS.length) % COLOR_MATS.length;
+                p.mesh.material = COLOR_MATS[ci];
+                p.mesh.scale.set(p.cw, p.ch, 1);
+              }
+            }
+          }
+          renderer.render(scene, camera);
+        }
+
+        window.__timelines = window.__timelines || {};
+        var tl = gsap.timeline({ paused: true });
+
+        // Repaint from a property SETTER, not from onUpdate: gsap's seek(t)
+        // suppresses events by default, so an onUpdate callback silently never
+        // fires on a scrub and the canvas freezes on frame 0. Tweened values are
+        // always written during render, suppressed or not.
+        var driver = { _t: 0 };
+        Object.defineProperty(driver, "t", {
+          get: function () {
+            return this._t;
+          },
+          set: function (v) {
+            this._t = v;
+            draw(v);
+          },
+        });
+        tl.to(driver, { t: DUR, duration: DUR, ease: "none" }, 0);
+        window.__timelines["gallery-tunnel"] = tl;
+
+        draw(0);
+      })();
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "gallery-tunnel.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/blocks/glitch/glitch.html b/docs/public/catalog/blocks/glitch/glitch.html
new file mode 100644
index 0000000000..79fc5206bc
--- /dev/null
+++ b/docs/public/catalog/blocks/glitch/glitch.html
@@ -0,0 +1,366 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      @import url("https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Bebas+Neue&family=JetBrains+Mono:wght@400;700&family=Lato:wght@400;700&display=block");
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <style>
+        [data-composition-id="main"] {
+          width: 1920px;
+          height: 1080px;
+          overflow: hidden;
+          position: relative;
+          background: #293241;
+        }
+
+        /* Blueprint grid */
+        .bp-grid {
+          position: absolute;
+          inset: 0;
+          background-image:
+            linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
+            linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
+          background-size: 40px 40px;
+          pointer-events: none;
+        }
+
+        /* Layout */
+        .bp-left {
+          position: absolute;
+          left: 0;
+          top: 0;
+          bottom: 0;
+          width: 1200px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .bp-right {
+          position: absolute;
+          right: 0;
+          top: 0;
+          bottom: 0;
+          width: 720px;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          padding: 60px 60px 60px 40px;
+        }
+        .bp-divider {
+          position: absolute;
+          left: 1200px;
+          top: 60px;
+          bottom: 60px;
+          width: 1px;
+          background: #ee6c4d;
+          opacity: 0.15;
+        }
+        .bp-number {
+          font-family: "Space Mono", monospace;
+          font-size: 14px;
+          font-weight: 700;
+          letter-spacing: 0.4em;
+          text-transform: uppercase;
+          position: absolute;
+          top: 40px;
+          left: 60px;
+          color: #ee6c4d;
+        }
+
+        /* Right panel typography */
+        .bp-name {
+          font-family: "Bebas Neue", sans-serif;
+          font-size: 38px;
+          letter-spacing: 0.08em;
+          margin-bottom: 20px;
+          color: #ee6c4d;
+        }
+        .bp-plabel {
+          font-family: "Space Mono", monospace;
+          font-size: 11px;
+          font-weight: 700;
+          letter-spacing: 0.3em;
+          text-transform: uppercase;
+          margin-bottom: 10px;
+          color: #ee6c4d;
+          opacity: 0.5;
+        }
+        .bp-prompt {
+          font-family: "JetBrains Mono", monospace;
+          font-size: 20px;
+          line-height: 1.6;
+          padding: 16px 20px;
+          border-radius: 6px;
+          margin-bottom: 20px;
+          color: #ee6c4d;
+          background: rgba(238, 108, 77, 0.06);
+          border: 1px solid rgba(238, 108, 77, 0.12);
+        }
+        .bp-desc {
+          font-family: "Lato", sans-serif;
+          font-size: 17px;
+          line-height: 1.6;
+          color: #98c1d9;
+          opacity: 0.55;
+        }
+
+        /* GL scenes (hidden, just for texture capture) */
+        .scene {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1200px;
+          height: 1080px;
+          overflow: hidden;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .scene-label {
+          font-family: "Bebas Neue", sans-serif;
+          font-size: 140px;
+          letter-spacing: 0.06em;
+          opacity: 0.12;
+        }
+      </style>
+
+      <div class="bp-grid"></div>
+      <div class="bp-divider"></div>
+      <div class="bp-number">09 / 14</div>
+
+      <!-- GL demo scenes (captured as textures, then hidden) -->
+      <div id="s1" class="scene" style="background: #293241">
+        <div class="scene-label" style="color: #ee6c4d">SCENE A</div>
+      </div>
+      <div id="s2" class="scene" style="background: #ee6c4d; opacity: 0">
+        <div class="scene-label" style="color: #293241">SCENE B</div>
+      </div>
+
+      <!-- GL canvas (left panel only) -->
+      <canvas
+        id="gl-canvas"
+        width="1200"
+        height="1080"
+        style="
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1200px;
+          height: 1080px;
+          z-index: 10;
+          pointer-events: none;
+          display: none;
+        "
+      >
+      </canvas>
+
+      <!-- Right panel metadata -->
+      <div class="bp-right">
+        <div class="bp-name">Glitch</div>
+        <div class="bp-plabel">Prompt</div>
+        <div class="bp-prompt">"use glitch shader transition"</div>
+        <div class="bp-desc">
+          Scan lines, block scramble, chromatic aberration, brightness flicker, and color
+          posterization.
+        </div>
+      </div>
+
+      <div
+        id="driver"
+        class="clip"
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+      var glCanvas = document.getElementById("gl-canvas");
+      var gl = glCanvas.getContext("webgl", { preserveDrawingBuffer: true });
+      if (!gl) {
+        console.warn("WebGL not available");
+        window.__timelines["main"] = gsap.timeline({ paused: true });
+      } else {
+        gl.viewport(0, 0, 1200, 1080);
+        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
+        var sceneTextures = {};
+
+        function captureScene(sceneId) {
+          var scene = document.getElementById(sceneId);
+          var origOpacity = scene.style.opacity;
+          var origZ = scene.style.zIndex;
+          scene.style.opacity = "1";
+          scene.style.zIndex = "999";
+          scene.offsetHeight;
+          var c = document.createElement("canvas");
+          c.width = 1200;
+          c.height = 1080;
+          var ctx = c.getContext("2d");
+          ctx.fillStyle = window.getComputedStyle(scene).backgroundColor;
+          ctx.fillRect(0, 0, 1200, 1080);
+          var sr = scene.getBoundingClientRect();
+          var els = scene.querySelectorAll("*");
+          for (var i = 0; i < els.length; i++) {
+            var el = els[i],
+              cs = window.getComputedStyle(el);
+            if (cs.display === "none" || cs.visibility === "hidden") continue;
+            var r = el.getBoundingClientRect();
+            if (r.width < 1 || r.height < 1) continue;
+            var x = r.left - sr.left,
+              y = r.top - sr.top,
+              w = r.width,
+              h = r.height;
+            ctx.save();
+            ctx.globalAlpha = parseFloat(cs.opacity) || 1;
+            var bg = cs.backgroundColor;
+            if (bg && bg !== "rgba(0, 0, 0, 0)" && bg !== "transparent") {
+              ctx.fillStyle = bg;
+              ctx.fillRect(x, y, w, h);
+            }
+            var hasChildEls = el.querySelector("div,span,img,video");
+            var text = "";
+            for (var j = 0; j < el.childNodes.length; j++)
+              if (el.childNodes[j].nodeType === 3) text += el.childNodes[j].textContent;
+            text = text.trim();
+            if (text && !hasChildEls) {
+              ctx.font = cs.fontWeight + " " + cs.fontSize + " " + cs.fontFamily;
+              ctx.fillStyle = cs.color;
+              if (cs.letterSpacing && cs.letterSpacing !== "normal")
+                ctx.letterSpacing = cs.letterSpacing;
+              ctx.textAlign = "center";
+              ctx.textBaseline = "middle";
+              ctx.fillText(text, x + w / 2, y + h / 2);
+            }
+            ctx.restore();
+          }
+          scene.style.opacity = origOpacity;
+          scene.style.zIndex = origZ;
+          var tex = gl.createTexture();
+          gl.bindTexture(gl.TEXTURE_2D, tex);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+          gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, c);
+          sceneTextures[sceneId] = tex;
+        }
+
+        var vertSrc =
+          "attribute vec2 a_pos; varying vec2 v_uv; void main(){" +
+          "v_uv=a_pos*0.5+0.5; v_uv.y=1.0-v_uv.y; gl_Position=vec4(a_pos,0,1);}";
+        var quadBuf = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);
+        gl.bufferData(
+          gl.ARRAY_BUFFER,
+          new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),
+          gl.STATIC_DRAW,
+        );
+        function compileShader(src, type) {
+          var s = gl.createShader(type);
+          gl.shaderSource(s, src);
+          gl.compileShader(s);
+          if (!gl.getShaderParameter(s, gl.COMPILE_STATUS))
+            console.error("Shader:", gl.getShaderInfoLog(s));
+          return s;
+        }
+        function mkProg(fragSrc) {
+          var p = gl.createProgram();
+          gl.attachShader(p, compileShader(vertSrc, gl.VERTEX_SHADER));
+          gl.attachShader(p, compileShader(fragSrc, gl.FRAGMENT_SHADER));
+          gl.linkProgram(p);
+          if (!gl.getProgramParameter(p, gl.LINK_STATUS))
+            console.error("Link:", gl.getProgramInfoLog(p));
+          return p;
+        }
+
+        var H =
+          "precision mediump float;" +
+          "varying vec2 v_uv;" +
+          "uniform sampler2D u_from, u_to;" +
+          "uniform float u_progress;" +
+          "uniform vec2 u_resolution;\n";
+
+        var progPass = mkProg(H + "void main(){gl_FragColor=texture2D(u_from,v_uv);}");
+        var progTrans = mkProg(
+          H +
+            "float rand(vec2 co){return fract(sin(dot(co,vec2(12.9898,78.233)))*43758.5453);}void main(){float inten=u_progress*(1.-u_progress)*4.;float lineY=floor(v_uv.y*60.)/60.;float lineDisp=(rand(vec2(lineY,floor(u_progress*17.)))-.5)*.18*inten;vec2 block=floor(v_uv*vec2(12.,8.));float br=rand(block+vec2(floor(u_progress*11.)));float ba=step(.83,br)*inten;vec2 bd=(vec2(rand(block*2.1),rand(block*3.7))-.5)*.35*ba;vec2 uv=clamp(v_uv+vec2(lineDisp,0.)+bd,0.,1.);float shift=inten*.035;float r=texture2D(u_from,uv+vec2(shift,0.)).r;float g=texture2D(u_from,uv).g;float b=texture2D(u_from,uv-vec2(shift,0.)).b;vec3 col=vec3(r,g,b);col-=step(.5,fract(v_uv.y*u_resolution.y*.5))*.05*inten;col*=1.+(rand(vec2(floor(u_progress*23.)))-.5)*.3*inten;float levels=mix(256.,8.,inten*.5);col=floor(col*levels)/levels;gl_FragColor=mix(vec4(col,1.),texture2D(u_to,v_uv),u_progress);}",
+        );
+
+        function renderShader(prog, texFrom, texTo, progress) {
+          gl.useProgram(prog);
+          gl.activeTexture(gl.TEXTURE0);
+          gl.bindTexture(gl.TEXTURE_2D, texFrom);
+          gl.uniform1i(gl.getUniformLocation(prog, "u_from"), 0);
+          gl.activeTexture(gl.TEXTURE1);
+          gl.bindTexture(gl.TEXTURE_2D, texTo);
+          gl.uniform1i(gl.getUniformLocation(prog, "u_to"), 1);
+          gl.uniform1f(gl.getUniformLocation(prog, "u_progress"), progress);
+          gl.uniform2f(gl.getUniformLocation(prog, "u_resolution"), 1200, 1080);
+          var pos = gl.getAttribLocation(prog, "a_pos");
+          gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);
+          gl.enableVertexAttribArray(pos);
+          gl.vertexAttribPointer(pos, 2, gl.FLOAT, false, 0, 0);
+          gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+        }
+
+        function easeInOut(p) {
+          return p < 0.5 ? 2 * p * p : 1 - Math.pow(-2 * p + 2, 2) / 2;
+        }
+
+        captureScene("s1");
+        captureScene("s2");
+        glCanvas.style.display = "block";
+        renderShader(progPass, sceneTextures["s1"], sceneTextures["s1"], 0);
+        document.querySelectorAll(".scene").forEach(function (s) {
+          s.style.opacity = "0";
+        });
+
+        var tl = gsap.timeline({
+          paused: true,
+          onUpdate: function () {
+            var t = tl.time();
+            if (t >= 1.0 && t < 3.0) {
+              renderShader(
+                progTrans,
+                sceneTextures["s1"],
+                sceneTextures["s2"],
+                easeInOut((t - 1.0) / 2.0),
+              );
+            } else if (t >= 3.0) {
+              renderShader(progPass, sceneTextures["s2"], sceneTextures["s2"], 0);
+            } else {
+              renderShader(progPass, sceneTextures["s1"], sceneTextures["s1"], 0);
+            }
+          },
+        });
+        tl.to({ v: 0 }, { v: 1, duration: 4, ease: "none" }, 0);
+        window.__timelines["main"] = tl;
+      } // end if (gl)
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/gravitational-lens/gravitational-lens.html b/docs/public/catalog/blocks/gravitational-lens/gravitational-lens.html
new file mode 100644
index 0000000000..2feb83f7ae
--- /dev/null
+++ b/docs/public/catalog/blocks/gravitational-lens/gravitational-lens.html
@@ -0,0 +1,365 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      @import url("https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Bebas+Neue&family=JetBrains+Mono:wght@400;700&family=Lato:wght@400;700&display=block");
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <style>
+        [data-composition-id="main"] {
+          width: 1920px;
+          height: 1080px;
+          overflow: hidden;
+          position: relative;
+          background: #10002b;
+        }
+
+        /* Blueprint grid */
+        .bp-grid {
+          position: absolute;
+          inset: 0;
+          background-image:
+            linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
+            linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
+          background-size: 40px 40px;
+          pointer-events: none;
+        }
+
+        /* Layout */
+        .bp-left {
+          position: absolute;
+          left: 0;
+          top: 0;
+          bottom: 0;
+          width: 1200px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .bp-right {
+          position: absolute;
+          right: 0;
+          top: 0;
+          bottom: 0;
+          width: 720px;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          padding: 60px 60px 60px 40px;
+        }
+        .bp-divider {
+          position: absolute;
+          left: 1200px;
+          top: 60px;
+          bottom: 60px;
+          width: 1px;
+          background: #f20089;
+          opacity: 0.15;
+        }
+        .bp-number {
+          font-family: "Space Mono", monospace;
+          font-size: 14px;
+          font-weight: 700;
+          letter-spacing: 0.4em;
+          text-transform: uppercase;
+          position: absolute;
+          top: 40px;
+          left: 60px;
+          color: #f20089;
+        }
+
+        /* Right panel typography */
+        .bp-name {
+          font-family: "Bebas Neue", sans-serif;
+          font-size: 38px;
+          letter-spacing: 0.08em;
+          margin-bottom: 20px;
+          color: #f20089;
+        }
+        .bp-plabel {
+          font-family: "Space Mono", monospace;
+          font-size: 11px;
+          font-weight: 700;
+          letter-spacing: 0.3em;
+          text-transform: uppercase;
+          margin-bottom: 10px;
+          color: #f20089;
+          opacity: 0.5;
+        }
+        .bp-prompt {
+          font-family: "JetBrains Mono", monospace;
+          font-size: 20px;
+          line-height: 1.6;
+          padding: 16px 20px;
+          border-radius: 6px;
+          margin-bottom: 20px;
+          color: #f20089;
+          background: rgba(242, 0, 137, 0.06);
+          border: 1px solid rgba(242, 0, 137, 0.12);
+        }
+        .bp-desc {
+          font-family: "Lato", sans-serif;
+          font-size: 17px;
+          line-height: 1.6;
+          color: #a080a0;
+          opacity: 0.55;
+        }
+
+        /* GL scenes (hidden, just for texture capture) */
+        .scene {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1200px;
+          height: 1080px;
+          overflow: hidden;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .scene-label {
+          font-family: "Bebas Neue", sans-serif;
+          font-size: 140px;
+          letter-spacing: 0.06em;
+          opacity: 0.12;
+        }
+      </style>
+
+      <div class="bp-grid"></div>
+      <div class="bp-divider"></div>
+      <div class="bp-number">06 / 14</div>
+
+      <!-- GL demo scenes (captured as textures, then hidden) -->
+      <div id="s1" class="scene" style="background: #10002b">
+        <div class="scene-label" style="color: #f20089">SCENE A</div>
+      </div>
+      <div id="s2" class="scene" style="background: #f20089; opacity: 0">
+        <div class="scene-label" style="color: #10002b">SCENE B</div>
+      </div>
+
+      <!-- GL canvas (left panel only) -->
+      <canvas
+        id="gl-canvas"
+        width="1200"
+        height="1080"
+        style="
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1200px;
+          height: 1080px;
+          z-index: 10;
+          pointer-events: none;
+          display: none;
+        "
+      >
+      </canvas>
+
+      <!-- Right panel metadata -->
+      <div class="bp-right">
+        <div class="bp-name">Gravitational Lens</div>
+        <div class="bp-plabel">Prompt</div>
+        <div class="bp-prompt">"use gravitational lens shader transition"</div>
+        <div class="bp-desc">
+          Content warps toward a gravity well with chromatic aberration and event horizon darkening.
+        </div>
+      </div>
+
+      <div
+        id="driver"
+        class="clip"
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+      var glCanvas = document.getElementById("gl-canvas");
+      var gl = glCanvas.getContext("webgl", { preserveDrawingBuffer: true });
+      if (!gl) {
+        console.warn("WebGL not available");
+        window.__timelines["main"] = gsap.timeline({ paused: true });
+      } else {
+        gl.viewport(0, 0, 1200, 1080);
+        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
+        var sceneTextures = {};
+
+        function captureScene(sceneId) {
+          var scene = document.getElementById(sceneId);
+          var origOpacity = scene.style.opacity;
+          var origZ = scene.style.zIndex;
+          scene.style.opacity = "1";
+          scene.style.zIndex = "999";
+          scene.offsetHeight;
+          var c = document.createElement("canvas");
+          c.width = 1200;
+          c.height = 1080;
+          var ctx = c.getContext("2d");
+          ctx.fillStyle = window.getComputedStyle(scene).backgroundColor;
+          ctx.fillRect(0, 0, 1200, 1080);
+          var sr = scene.getBoundingClientRect();
+          var els = scene.querySelectorAll("*");
+          for (var i = 0; i < els.length; i++) {
+            var el = els[i],
+              cs = window.getComputedStyle(el);
+            if (cs.display === "none" || cs.visibility === "hidden") continue;
+            var r = el.getBoundingClientRect();
+            if (r.width < 1 || r.height < 1) continue;
+            var x = r.left - sr.left,
+              y = r.top - sr.top,
+              w = r.width,
+              h = r.height;
+            ctx.save();
+            ctx.globalAlpha = parseFloat(cs.opacity) || 1;
+            var bg = cs.backgroundColor;
+            if (bg && bg !== "rgba(0, 0, 0, 0)" && bg !== "transparent") {
+              ctx.fillStyle = bg;
+              ctx.fillRect(x, y, w, h);
+            }
+            var hasChildEls = el.querySelector("div,span,img,video");
+            var text = "";
+            for (var j = 0; j < el.childNodes.length; j++)
+              if (el.childNodes[j].nodeType === 3) text += el.childNodes[j].textContent;
+            text = text.trim();
+            if (text && !hasChildEls) {
+              ctx.font = cs.fontWeight + " " + cs.fontSize + " " + cs.fontFamily;
+              ctx.fillStyle = cs.color;
+              if (cs.letterSpacing && cs.letterSpacing !== "normal")
+                ctx.letterSpacing = cs.letterSpacing;
+              ctx.textAlign = "center";
+              ctx.textBaseline = "middle";
+              ctx.fillText(text, x + w / 2, y + h / 2);
+            }
+            ctx.restore();
+          }
+          scene.style.opacity = origOpacity;
+          scene.style.zIndex = origZ;
+          var tex = gl.createTexture();
+          gl.bindTexture(gl.TEXTURE_2D, tex);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+          gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, c);
+          sceneTextures[sceneId] = tex;
+        }
+
+        var vertSrc =
+          "attribute vec2 a_pos; varying vec2 v_uv; void main(){" +
+          "v_uv=a_pos*0.5+0.5; v_uv.y=1.0-v_uv.y; gl_Position=vec4(a_pos,0,1);}";
+        var quadBuf = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);
+        gl.bufferData(
+          gl.ARRAY_BUFFER,
+          new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),
+          gl.STATIC_DRAW,
+        );
+        function compileShader(src, type) {
+          var s = gl.createShader(type);
+          gl.shaderSource(s, src);
+          gl.compileShader(s);
+          if (!gl.getShaderParameter(s, gl.COMPILE_STATUS))
+            console.error("Shader:", gl.getShaderInfoLog(s));
+          return s;
+        }
+        function mkProg(fragSrc) {
+          var p = gl.createProgram();
+          gl.attachShader(p, compileShader(vertSrc, gl.VERTEX_SHADER));
+          gl.attachShader(p, compileShader(fragSrc, gl.FRAGMENT_SHADER));
+          gl.linkProgram(p);
+          if (!gl.getProgramParameter(p, gl.LINK_STATUS))
+            console.error("Link:", gl.getProgramInfoLog(p));
+          return p;
+        }
+
+        var H =
+          "precision mediump float;" +
+          "varying vec2 v_uv;" +
+          "uniform sampler2D u_from, u_to;" +
+          "uniform float u_progress;" +
+          "uniform vec2 u_resolution;\n";
+
+        var progPass = mkProg(H + "void main(){gl_FragColor=texture2D(u_from,v_uv);}");
+        var progTrans = mkProg(
+          H +
+            "void main(){vec4 B=texture2D(u_to,v_uv);vec2 uv=v_uv-.5;float dist=length(uv);float pull=u_progress*2.;float warpStr=pull*.3/(dist+.1);vec2 warped=clamp(v_uv-uv*warpStr,0.,1.);vec4 A=texture2D(u_from,warped);float horizon=smoothstep(0.,.3,dist/(1.-u_progress*.85+.001));float shift=pull*.02/(dist+.2);float r=texture2D(u_from,clamp(v_uv-uv*(warpStr+shift),0.,1.)).r;float b=texture2D(u_from,clamp(v_uv-uv*(warpStr-shift),0.,1.)).b;vec3 lensed=vec3(r,A.g,b)*horizon;gl_FragColor=vec4(mix(lensed,B.rgb,smoothstep(.3,.9,u_progress)),1.);}",
+        );
+
+        function renderShader(prog, texFrom, texTo, progress) {
+          gl.useProgram(prog);
+          gl.activeTexture(gl.TEXTURE0);
+          gl.bindTexture(gl.TEXTURE_2D, texFrom);
+          gl.uniform1i(gl.getUniformLocation(prog, "u_from"), 0);
+          gl.activeTexture(gl.TEXTURE1);
+          gl.bindTexture(gl.TEXTURE_2D, texTo);
+          gl.uniform1i(gl.getUniformLocation(prog, "u_to"), 1);
+          gl.uniform1f(gl.getUniformLocation(prog, "u_progress"), progress);
+          gl.uniform2f(gl.getUniformLocation(prog, "u_resolution"), 1200, 1080);
+          var pos = gl.getAttribLocation(prog, "a_pos");
+          gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);
+          gl.enableVertexAttribArray(pos);
+          gl.vertexAttribPointer(pos, 2, gl.FLOAT, false, 0, 0);
+          gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+        }
+
+        function easeInOut(p) {
+          return p < 0.5 ? 2 * p * p : 1 - Math.pow(-2 * p + 2, 2) / 2;
+        }
+
+        captureScene("s1");
+        captureScene("s2");
+        glCanvas.style.display = "block";
+        renderShader(progPass, sceneTextures["s1"], sceneTextures["s1"], 0);
+        document.querySelectorAll(".scene").forEach(function (s) {
+          s.style.opacity = "0";
+        });
+
+        var tl = gsap.timeline({
+          paused: true,
+          onUpdate: function () {
+            var t = tl.time();
+            if (t >= 1.0 && t < 3.0) {
+              renderShader(
+                progTrans,
+                sceneTextures["s1"],
+                sceneTextures["s2"],
+                easeInOut((t - 1.0) / 2.0),
+              );
+            } else if (t >= 3.0) {
+              renderShader(progPass, sceneTextures["s2"], sceneTextures["s2"], 0);
+            } else {
+              renderShader(progPass, sceneTextures["s1"], sceneTextures["s1"], 0);
+            }
+          },
+        });
+        tl.to({ v: 0 }, { v: 1, duration: 4, ease: "none" }, 0);
+        window.__timelines["main"] = tl;
+      } // end if (gl)
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/halftone-field/__hf-variables-preview.html b/docs/public/catalog/blocks/halftone-field/__hf-variables-preview.html
new file mode 100644
index 0000000000..afca6d9635
--- /dev/null
+++ b/docs/public/catalog/blocks/halftone-field/__hf-variables-preview.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Halftone Field variables preview</title>
+    <style>
+      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #000; }
+      #hf-vars-root { position: relative; width: 1920px; height: 1080px; }
+      #hf-vars-mount { position: absolute; inset: 0; display: grid; place-items: center; }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  </head>
+  <body>
+    <div id="hf-vars-root" data-composition-id="halftone-field-variables-preview" data-start="0" data-width="1920" data-height="1080" data-duration="10" data-fps="30">
+      <div id="hf-vars-mount" class="clip" data-composition-id="halftone-field" data-composition-src="./halftone-field.html" data-start="0" data-duration="10" data-track-index="0" data-width="1920" data-height="1080"></div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["halftone-field-variables-preview"] = gsap.timeline({ paused: true });
+    </script>
+<script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "halftone-field.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/halftone-field/halftone-field.html b/docs/public/catalog/blocks/halftone-field/halftone-field.html
new file mode 100644
index 0000000000..89e2564ae0
--- /dev/null
+++ b/docs/public/catalog/blocks/halftone-field/halftone-field.html
@@ -0,0 +1,394 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Halftone Field</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #000;
+        overflow: hidden;
+      }
+      #hlf-root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #hlf-backdrop {
+        position: absolute;
+        inset: 0;
+        background: #000000;
+      }
+      #hlf-canvas {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="hlf-root"
+      data-composition-id="halftone-field"
+      data-root="true"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="10"
+      data-composition-variables='[
+        {"id":"frequency","type":"number","label":"Field frequency","default":2,"min":1,"max":10,"step":0.1},
+        {"id":"speed","type":"number","label":"Flow speed","default":5,"min":0,"max":10,"step":0.1},
+        {"id":"cellSize","type":"number","label":"Cell size","default":54,"min":1,"max":100,"step":1},
+        {"id":"gamma","type":"number","label":"Gamma (midtone crush)","default":12,"min":1,"max":20,"step":0.1},
+        {"id":"paletteBias","type":"number","label":"Palette bias","default":2,"min":0,"max":20,"step":0.5},
+        {"id":"palette1","type":"color","label":"Palette stop 1 (lows)","default":"#00AAFF"},
+        {"id":"palette2","type":"color","label":"Palette stop 2","default":"#C2FF67"},
+        {"id":"palette3","type":"color","label":"Palette stop 3","default":"#6600FF"},
+        {"id":"palette4","type":"color","label":"Palette stop 4 (crests)","default":"#000000"},
+        {"id":"background","type":"color","label":"Background","default":"#000000"},
+        {"id":"quantize","type":"boolean","label":"Quantise to 30fps (stepped)","default":false}
+      ]'
+    >
+      <div id="hlf-backdrop"></div>
+      <canvas id="hlf-canvas" width="1920" height="1080"></canvas>
+
+      <!-- Driver clip: gives HyperFrames a timed element to own on track 0. -->
+      <div
+        id="hlf-drv"
+        class="clip"
+        data-start="0"
+        data-duration="10"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+
+    <script>
+      (function () {
+        var DUR = 10;
+        var W = 1920;
+        var H = 1080;
+
+        var V = (window.__hyperframes && window.__hyperframes.getVariables()) || {};
+        var CS = getComputedStyle(document.getElementById("hlf-root"));
+
+        // The runtime defines every declared variable as `--<id>` on the root,
+        // so a host stylesheet can override one there too. Read the custom
+        // property first, fall back to the declared value when it is unset.
+        function raw(id) {
+          var css = CS.getPropertyValue("--" + id.toLowerCase()).trim();
+          return css !== "" ? css : V[id];
+        }
+        function num(id, fallback) {
+          var n = parseFloat(raw(id));
+          return isFinite(n) ? n : fallback;
+        }
+        function bool(id) {
+          var v = raw(id);
+          return v === true || /^(true|1|on|yes)$/i.test(String(v));
+        }
+        // #RGB / #RRGGBB -> [r, g, b] in 0..1. Anything else falls back.
+        function rgb(id, fallback) {
+          var s = String(raw(id) || "").trim();
+          var m = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(s);
+          if (!m) s = fallback;
+          else s = "#" + m[1];
+          var hex = s.slice(1);
+          if (hex.length === 3) {
+            hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+          }
+          var n = parseInt(hex, 16);
+          return [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255];
+        }
+        // The reference exposes 1-10 / 1-100 / 1-20 dials and maps them onto
+        // the ranges the shader actually wants.
+        function mapLinear(x, a1, a2, b1, b2) {
+          return b1 + ((x - a1) * (b2 - b1)) / (a2 - a1);
+        }
+
+        var FREQ = mapLinear(num("frequency", 2), 1, 10, 0.3, 6);
+        var SPEED = num("speed", 5) * 0.05;
+        var CELL = mapLinear(num("cellSize", 54), 1, 100, 6, 60);
+        var GAMMA = mapLinear(num("gamma", 12), 1, 20, 0.5, 8);
+        var BIAS = num("paletteBias", 2) * 0.05;
+        var PAL = [
+          rgb("palette1", "#00AAFF"),
+          rgb("palette2", "#C2FF67"),
+          rgb("palette3", "#6600FF"),
+          rgb("palette4", "#000000"),
+        ];
+        var BG = rgb("background", "#000000");
+        var QUANTIZE = bool("quantize");
+
+        document.getElementById("hlf-backdrop").style.background =
+          "rgb(" +
+          BG.map(function (c) {
+            return Math.round(c * 255);
+          }).join(",") +
+          ")";
+
+        var canvas = document.getElementById("hlf-canvas");
+        var gl =
+          canvas.getContext("webgl", {
+            alpha: false,
+            antialias: false,
+            depth: false,
+            stencil: false,
+            preserveDrawingBuffer: true,
+            powerPreference: "high-performance",
+          }) ||
+          canvas.getContext("experimental-webgl", {
+            alpha: false,
+            preserveDrawingBuffer: true,
+          });
+
+        var VERT = "attribute vec2 aPos;\nvoid main() { gl_Position = vec4(aPos, 0.0, 1.0); }";
+
+        // Single pass. The reference renders the colour field into a target and
+        // samples it at each cell centre, but the field is analytic, so
+        // evaluating it at the cell centre here is the same value without the
+        // round trip through a texture.
+        var FRAG = `
+precision highp float;
+uniform vec2 uRes;
+uniform float uTime;
+uniform float uFreq;
+uniform float uSpeed;
+uniform float uCell;
+uniform float uGamma;
+uniform float uBias;
+uniform vec3 uPal0;
+uniform vec3 uPal1;
+uniform vec3 uPal2;
+uniform vec3 uPal3;
+uniform vec3 uBg;
+
+// 3D simplex noise — Ashima Arts / Stefan Gustavson (MIT).
+vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
+vec4 mod289(vec4 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
+vec4 permute(vec4 x) { return mod289(((x * 34.0) + 1.0) * x); }
+vec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; }
+
+float snoise(vec3 v) {
+  const vec2 C = vec2(1.0 / 6.0, 1.0 / 3.0);
+  const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);
+
+  vec3 i = floor(v + dot(v, C.yyy));
+  vec3 x0 = v - i + dot(i, C.xxx);
+
+  vec3 g = step(x0.yzx, x0.xyz);
+  vec3 l = 1.0 - g;
+  vec3 i1 = min(g.xyz, l.zxy);
+  vec3 i2 = max(g.xyz, l.zxy);
+
+  vec3 x1 = x0 - i1 + C.xxx;
+  vec3 x2 = x0 - i2 + C.yyy;
+  vec3 x3 = x0 - D.yyy;
+
+  i = mod289(i);
+  vec4 p = permute(permute(permute(
+      i.z + vec4(0.0, i1.z, i2.z, 1.0)) +
+      i.y + vec4(0.0, i1.y, i2.y, 1.0)) +
+      i.x + vec4(0.0, i1.x, i2.x, 1.0));
+
+  float n_ = 0.142857142857;
+  vec3 ns = n_ * D.wyz - D.xzx;
+
+  vec4 j = p - 49.0 * floor(p * ns.z * ns.z);
+
+  vec4 x_ = floor(j * ns.z);
+  vec4 y_ = floor(j - 7.0 * x_);
+
+  vec4 x = x_ * ns.x + ns.yyyy;
+  vec4 y = y_ * ns.x + ns.yyyy;
+  vec4 h = 1.0 - abs(x) - abs(y);
+
+  vec4 b0 = vec4(x.xy, y.xy);
+  vec4 b1 = vec4(x.zw, y.zw);
+
+  vec4 s0 = floor(b0) * 2.0 + 1.0;
+  vec4 s1 = floor(b1) * 2.0 + 1.0;
+  vec4 sh = -step(h, vec4(0.0));
+
+  vec4 a0 = b0.xzyw + s0.xzyw * sh.xxyy;
+  vec4 a1 = b1.xzyw + s1.xzyw * sh.zzww;
+
+  vec3 p0 = vec3(a0.xy, h.x);
+  vec3 p1 = vec3(a0.zw, h.y);
+  vec3 p2 = vec3(a1.xy, h.z);
+  vec3 p3 = vec3(a1.zw, h.w);
+
+  vec4 norm = taylorInvSqrt(vec4(dot(p0, p0), dot(p1, p1), dot(p2, p2), dot(p3, p3)));
+  p0 *= norm.x;
+  p1 *= norm.y;
+  p2 *= norm.z;
+  p3 *= norm.w;
+
+  vec4 m = max(0.6 - vec4(dot(x0, x0), dot(x1, x1), dot(x2, x2), dot(x3, x3)), 0.0);
+  m = m * m;
+  return 42.0 * dot(m * m, vec4(dot(p0, x0), dot(p1, x1), dot(p2, x2), dot(p3, x3)));
+}
+
+// Full-saturation, full-value HSV: only the hue ramp survives.
+vec3 hue2rgb(float h) {
+  return clamp(abs(mod(h * 6.0 + vec3(0.0, 4.0, 2.0), 6.0) - 3.0) - 1.0, 0.0, 1.0);
+}
+
+// Piecewise-linear ramp across the four palette stops.
+vec3 ramp(float v) {
+  float x = clamp(v, 0.0, 1.0) * 3.0;
+  vec3 c = mix(uPal0, uPal1, clamp(x, 0.0, 1.0));
+  c = mix(c, uPal2, clamp(x - 1.0, 0.0, 1.0));
+  c = mix(c, uPal3, clamp(x - 2.0, 0.0, 1.0));
+  return c;
+}
+
+void main() {
+  // One sample per cell, taken at the cell centre.
+  vec2 cell = floor(gl_FragCoord.xy / uCell);
+  vec2 centre = (cell + 0.5) * uCell;
+
+  vec2 st = centre / uRes;
+  st.x *= uRes.x / uRes.y;
+
+  float hue = abs(snoise(vec3(st * uFreq, uTime * uSpeed)));
+  vec3 field = hue2rgb(hue);
+
+  // The gamma is the whole look: it crushes the midtones so most of the frame
+  // stays background and only the crests of the field open up.
+  float gray = pow(dot(field, vec3(0.2126, 0.7152, 0.0722)), uGamma);
+  float v = clamp(gray + uBias, 0.0, 1.0);
+
+  float radius = v * 0.5 * uCell;
+  float d = length(gl_FragCoord.xy - centre);
+  float mask = 1.0 - smoothstep(radius - 1.0, radius + 1.0, d);
+
+  gl_FragColor = vec4(mix(uBg, ramp(v), mask), 1.0);
+}
+`;
+
+        var uni = {};
+        var ready = false;
+
+        function compile(type, src) {
+          var sh = gl.createShader(type);
+          gl.shaderSource(sh, src);
+          gl.compileShader(sh);
+          if (!gl.getShaderParameter(sh, gl.COMPILE_STATUS)) {
+            throw new Error("halftone-field shader: " + gl.getShaderInfoLog(sh));
+          }
+          return sh;
+        }
+
+        if (gl) {
+          var prog = gl.createProgram();
+          gl.attachShader(prog, compile(gl.VERTEX_SHADER, VERT));
+          gl.attachShader(prog, compile(gl.FRAGMENT_SHADER, FRAG));
+          gl.linkProgram(prog);
+          if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {
+            throw new Error("halftone-field link: " + gl.getProgramInfoLog(prog));
+          }
+          gl.useProgram(prog);
+
+          var buf = gl.createBuffer();
+          gl.bindBuffer(gl.ARRAY_BUFFER, buf);
+          gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
+          var loc = gl.getAttribLocation(prog, "aPos");
+          gl.enableVertexAttribArray(loc);
+          gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0);
+
+          [
+            "uRes",
+            "uTime",
+            "uFreq",
+            "uSpeed",
+            "uCell",
+            "uGamma",
+            "uBias",
+            "uPal0",
+            "uPal1",
+            "uPal2",
+            "uPal3",
+            "uBg",
+          ].forEach(function (n) {
+            uni[n] = gl.getUniformLocation(prog, n);
+          });
+
+          gl.viewport(0, 0, W, H);
+          gl.uniform2f(uni.uRes, W, H);
+          gl.uniform1f(uni.uFreq, FREQ);
+          gl.uniform1f(uni.uSpeed, SPEED);
+          gl.uniform1f(uni.uCell, CELL);
+          gl.uniform1f(uni.uGamma, GAMMA);
+          gl.uniform1f(uni.uBias, BIAS);
+          gl.uniform3f(uni.uPal0, PAL[0][0], PAL[0][1], PAL[0][2]);
+          gl.uniform3f(uni.uPal1, PAL[1][0], PAL[1][1], PAL[1][2]);
+          gl.uniform3f(uni.uPal2, PAL[2][0], PAL[2][1], PAL[2][2]);
+          gl.uniform3f(uni.uPal3, PAL[3][0], PAL[3][1], PAL[3][2]);
+          gl.uniform3f(uni.uBg, BG[0], BG[1], BG[2]);
+          ready = true;
+        }
+
+        // Every frame is computed from t alone — the field is a closed-form
+        // function of position and time. No accumulator, no clock, no PRNG.
+        // `quantize` snaps t to a 30fps grid for the stepped LED-wall look.
+        function draw(t) {
+          if (!ready) return;
+          gl.uniform1f(uni.uTime, QUANTIZE ? Math.floor(t * 30) / 30 : t);
+          gl.drawArrays(gl.TRIANGLES, 0, 3);
+          gl.flush();
+        }
+
+        window.__timelines = window.__timelines || {};
+        var tl = gsap.timeline({ paused: true });
+
+        // The canvas is repainted from a property SETTER, not from onUpdate:
+        // gsap's seek(t) suppresses events by default, so an onUpdate callback
+        // silently never fires on a scrub and the canvas freezes on frame 0.
+        // Tweened values are always written during render, suppressed or not,
+        // so this fires on every seek — and hands us the frame time directly.
+        var driver = { _t: 0 };
+        Object.defineProperty(driver, "t", {
+          get: function () {
+            return this._t;
+          },
+          set: function (v) {
+            this._t = v;
+            draw(v);
+          },
+        });
+        tl.to(driver, { t: DUR, duration: DUR, ease: "none" }, 0);
+        window.__timelines["halftone-field"] = tl;
+
+        draw(0);
+      })();
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "halftone-field.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/blocks/hw-frame/assets/fonts/Caveat-700-latin.woff2 b/docs/public/catalog/blocks/hw-frame/assets/fonts/Caveat-700-latin.woff2
new file mode 100644
index 0000000000..5a3423426f
Binary files /dev/null and b/docs/public/catalog/blocks/hw-frame/assets/fonts/Caveat-700-latin.woff2 differ
diff --git a/docs/public/catalog/blocks/hw-frame/hw-frame.html b/docs/public/catalog/blocks/hw-frame/hw-frame.html
new file mode 100644
index 0000000000..8bfb70a440
--- /dev/null
+++ b/docs/public/catalog/blocks/hw-frame/hw-frame.html
@@ -0,0 +1,302 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      @font-face {
+        font-family: "Caveat";
+        src: url("assets/fonts/Caveat-700-latin.woff2") format("woff2");
+        font-weight: 700;
+        font-display: block;
+      }
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      #hw-fr-root {
+        --hw-font-print: "Caveat", cursive;
+        --hw-font-script: "Caveat", cursive;
+        --hw-ink: #f4f2ec;
+        --hw-accent-warm: #ffb020;
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #1b1a1e;
+        font-family: var(--hw-font-print, "Caveat", cursive);
+      }
+      #hw-fr-media {
+        position: absolute;
+        overflow: hidden;
+        border-radius: 10px;
+      }
+      #hw-fr-media img,
+      #hw-fr-media .hw-fr-fill {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+      .hw-fr-fill {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: 700;
+        font-size: 110px;
+        color: rgba(244, 242, 236, 0.9);
+        background: linear-gradient(150deg, #35604a 0%, #14231c 100%);
+      }
+      #hw-fr-svg {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        overflow: visible;
+      }
+      #hw-fr-svg path {
+        fill: none;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+      #hw-fr-border {
+        stroke: var(--hw-ink);
+        stroke-width: 7;
+      }
+      .hw-fr-doodle {
+        stroke: var(--hw-accent-warm);
+        stroke-width: 5;
+      }
+      #hw-fr-caption {
+        position: absolute;
+        width: 100%;
+        text-align: center;
+        font-weight: 700;
+        font-size: 58px;
+        color: var(--hw-ink);
+        opacity: 0;
+        text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="hw-fr-root"
+      data-composition-id="hw-frame"
+      data-start="0"
+      data-duration="8"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="hw-fr-media"></div>
+      <svg id="hw-fr-svg" viewBox="0 0 1920 1080"><path id="hw-fr-border"></path></svg>
+      <div id="hw-fr-caption"></div>
+      <div
+        id="hw-fr-drv"
+        class="clip"
+        data-start="0"
+        data-duration="8"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- published parameters ----
+           A sketched frame: content inside a hand-drawn border with
+           corner doodles + optional caption. IMAGES ONLY inside this block
+           (learning: the runtime never seeks media elements inside
+           sub-compositions) — for live footage keep the media element in
+           the HOST root positioned over the documented media slot below;
+           layering two framed clips = instant PiP. */
+        var CONFIG = {
+          src: null, // IMAGE path; null -> stand-in gradient (demo)
+          slot: { x: 480, y: 180, w: 960, h: 620 }, // the media window (documented for host-side footage)
+          caption: "our trip!",
+          doodles: true, // corner sparks
+          tilt: -1.2, // deg — the whole framed unit sits slightly rotated
+          seed: 14,
+          boil: { enabled: true, amp: 1.6, rot: 0.35, frameDrop: 3 },
+          animationIn: true,
+          animationOut: true,
+        };
+
+        var DUR = 8;
+        function clamp(v, lo, hi) {
+          return Math.min(hi, Math.max(lo, v));
+        }
+        var IN = clamp(DUR * 0.08, 0.3, 0.8);
+        var OUT = clamp(DUR * 0.06, 0.25, 0.6);
+
+        /* hw family runtime */
+        window.hwOnUpdate = function (tl, fn) {
+          if (!tl.__hwRenders) {
+            tl.__hwRenders = [];
+            tl.eventCallback("onUpdate", function () {
+              for (var i = 0; i < tl.__hwRenders.length; i++) tl.__hwRenders[i]();
+            });
+          }
+          tl.__hwRenders.push(fn);
+          fn();
+        };
+        window.hwHash = function (n, seed) {
+          var x = Math.sin(n * 127.1 + (seed || 1) * 311.7) * 43758.5453;
+          return (x - Math.floor(x)) * 2 - 1;
+        };
+        window.hwBoil = function (tl, target, opts) {
+          opts = opts || {};
+          var amp = opts.amp !== undefined ? opts.amp : 1.6;
+          var rot = opts.rot !== undefined ? opts.rot : 0.5;
+          var fps = opts.fps || 30;
+          var drop = opts.frameDrop || 3;
+          var seed = opts.seed || 1;
+          var els = gsap.utils.toArray(target);
+          window.hwOnUpdate(tl, function () {
+            var step = Math.floor((tl.time() * fps) / drop);
+            for (var i = 0; i < els.length; i++) {
+              gsap.set(els[i], {
+                x: window.hwHash(step * 3 + i * 97, seed) * amp,
+                y: window.hwHash(step * 3 + 1 + i * 97, seed) * amp,
+                rotation: (opts.baseRot || 0) + window.hwHash(step * 3 + 2 + i * 97, seed) * rot,
+              });
+            }
+          });
+        };
+        window.hwWobbleRect = function (w, h, r, seed, amp) {
+          amp = amp === undefined ? 3.5 : amp;
+          function wob(n) {
+            return window.hwHash(n, seed) * amp;
+          }
+          var d = "M " + (r + wob(1)) + " " + wob(2);
+          d += " L " + (w / 2 + wob(3)) + " " + wob(4);
+          d += " L " + (w - r + wob(5)) + " " + wob(6);
+          d += " Q " + (w + wob(7)) + " " + wob(8) + " " + (w + wob(9)) + " " + (r + wob(10));
+          d += " L " + (w + wob(11)) + " " + (h / 2 + wob(12));
+          d += " L " + (w + wob(13)) + " " + (h - r + wob(14));
+          d +=
+            " Q " +
+            (w + wob(15)) +
+            " " +
+            (h + wob(16)) +
+            " " +
+            (w - r + wob(17)) +
+            " " +
+            (h + wob(18));
+          d += " L " + (w / 2 + wob(19)) + " " + (h + wob(20));
+          d += " L " + (r + wob(21)) + " " + (h + wob(22));
+          d += " Q " + wob(23) + " " + (h + wob(24)) + " " + wob(25) + " " + (h - r + wob(26));
+          d += " L " + wob(27) + " " + (h / 2 + wob(28));
+          d += " L " + wob(29) + " " + (r + wob(30));
+          d += " Q " + wob(31) + " " + wob(32) + " " + (r + wob(33)) + " " + wob(34);
+          return d;
+        };
+
+        var S = CONFIG.slot;
+        var media = document.getElementById("hw-fr-media");
+        media.style.left = S.x + "px";
+        media.style.top = S.y + "px";
+        media.style.width = S.w + "px";
+        media.style.height = S.h + "px";
+        if (CONFIG.src) {
+          var img = document.createElement("img");
+          img.src = CONFIG.src;
+          media.appendChild(img);
+        } else {
+          var d = document.createElement("div");
+          d.className = "hw-fr-fill";
+          d.textContent = "photo";
+          media.appendChild(d);
+        }
+
+        /* border drawn slightly outside the slot */
+        var NS = "http://www.w3.org/2000/svg";
+        var border = document.getElementById("hw-fr-border");
+        var m = 16;
+        border.setAttribute("d", window.hwWobbleRect(S.w + m * 2, S.h + m * 2, 18, CONFIG.seed, 5));
+        border.setAttribute("transform", "translate(" + (S.x - m) + " " + (S.y - m) + ")");
+
+        /* corner doodles: little three-spark bursts */
+        var svg = document.getElementById("hw-fr-svg");
+        var doodles = [];
+        if (CONFIG.doodles) {
+          [
+            [S.x - 40, S.y - 34],
+            [S.x + S.w + 40, S.y - 26],
+            [S.x + S.w + 36, S.y + S.h + 30],
+          ].forEach(function (pt, i) {
+            var p = document.createElementNS(NS, "path");
+            p.setAttribute("class", "hw-fr-doodle");
+            p.setAttribute("id", "hw-fr-doodle-" + i);
+            var dd = "";
+            for (var k = 0; k < 3; k++) {
+              var a = -0.6 - k * 0.5 + window.hwHash(i * 9 + k, CONFIG.seed) * 0.2;
+              var l = 26 + window.hwHash(i * 9 + k + 4, CONFIG.seed) * 8;
+              dd +=
+                "M " +
+                pt[0] +
+                " " +
+                pt[1] +
+                " l " +
+                (Math.cos(a) * l).toFixed(1) +
+                " " +
+                (Math.sin(a) * l).toFixed(1) +
+                " ";
+            }
+            p.setAttribute("d", dd);
+            svg.appendChild(p);
+            doodles.push(p);
+          });
+        }
+
+        var caption = document.getElementById("hw-fr-caption");
+        caption.textContent = CONFIG.caption || "";
+        caption.style.top = S.y + S.h + 42 + "px";
+
+        var tl = gsap.timeline({ paused: true });
+
+        if (CONFIG.animationIn) {
+          gsap.set(media, { opacity: 0, scale: 0.96 });
+          tl.to(media, { opacity: 1, scale: 1, duration: IN * 1.4, ease: "power2.out" }, IN * 0.8);
+        }
+        var blen = border.getTotalLength();
+        gsap.set(border, { strokeDasharray: blen, strokeDashoffset: blen });
+        tl.to(border, { strokeDashoffset: 0, duration: 0.9, ease: "power2.inOut" }, 0.2);
+        doodles.forEach(function (p, i) {
+          var l = p.getTotalLength();
+          gsap.set(p, { strokeDasharray: l, strokeDashoffset: l });
+          tl.to(p, { strokeDashoffset: 0, duration: 0.3, ease: "power2.out" }, 1.1 + i * 0.12);
+        });
+        if (CONFIG.caption) tl.to(caption, { opacity: 1, duration: 0.4, ease: "power2.out" }, 1.4);
+
+        /* whole framed unit tilts + boils together */
+        var unit = [media, svg, caption];
+        gsap.set(unit, { rotation: CONFIG.tilt, transformOrigin: "50% 50%" });
+        if (CONFIG.boil.enabled) {
+          window.hwBoil(tl, unit, {
+            amp: CONFIG.boil.amp,
+            rot: CONFIG.boil.rot,
+            frameDrop: CONFIG.boil.frameDrop,
+            seed: CONFIG.seed,
+            baseRot: CONFIG.tilt,
+          });
+        }
+
+        if (CONFIG.animationOut) {
+          tl.to(unit, { opacity: 0, duration: OUT, ease: "power2.in" }, DUR - OUT - 0.05);
+        }
+        tl.set("#hw-fr-root", { visibility: "hidden" }, DUR - 0.02);
+
+        window.__timelines["hw-frame"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/hw-path-text/assets/fonts/Caveat-700-latin.woff2 b/docs/public/catalog/blocks/hw-path-text/assets/fonts/Caveat-700-latin.woff2
new file mode 100644
index 0000000000..5a3423426f
Binary files /dev/null and b/docs/public/catalog/blocks/hw-path-text/assets/fonts/Caveat-700-latin.woff2 differ
diff --git a/docs/public/catalog/blocks/hw-path-text/demo.html b/docs/public/catalog/blocks/hw-path-text/demo.html
new file mode 100644
index 0000000000..3dc31619d8
--- /dev/null
+++ b/docs/public/catalog/blocks/hw-path-text/demo.html
@@ -0,0 +1,196 @@
+<!doctype html>
+<!-- Demo plate for the catalog preview. Identical to hw-path-text.html except the
+     root background, which is opaque here so the transparent overlay reads.
+     Not installed by `hyperframes add` - registry-item.json lists hw-path-text.html only. -->
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      @font-face {
+        font-family: "Caveat";
+        src: url("assets/fonts/Caveat-700-latin.woff2") format("woff2");
+        font-weight: 700;
+        font-display: block;
+      }
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #17161a;
+        overflow: hidden;
+      }
+      #hw-pt-root {
+        --hw-font-print: "Caveat", cursive;
+        --hw-font-script: "Caveat", cursive;
+        --hw-ink: #f4f2ec;
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent;
+        font-family: var(--hw-font-print, "Caveat", cursive);
+      }
+      #hw-pt-svg {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        overflow: visible;
+      }
+      /* The textPath carrier is geometry only — without fill:none it inherits
+         SVG's default black fill and renders as a solid blob under the text. */
+      #hw-pt-path {
+        fill: none;
+      }
+      #hw-pt-guide {
+        fill: none;
+        stroke: rgba(244, 242, 236, 0.22);
+        stroke-width: 3;
+        stroke-dasharray: 2 14;
+        stroke-linecap: round;
+      }
+      #hw-pt-svg text {
+        font-family: var(--hw-font-print, "Caveat", cursive);
+        font-weight: 700;
+        fill: var(--hw-ink);
+      }
+      #hw-pt-svg tspan {
+        opacity: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="hw-pt-root"
+      data-composition-id="hw-path-text"
+      data-start="0"
+      data-duration="6"
+      data-width="1920"
+      data-height="1080"
+    >
+      <svg id="hw-pt-svg" viewBox="0 0 1920 1080">
+        <path id="hw-pt-path" d=""></path>
+        <path id="hw-pt-guide" d=""></path>
+        <text id="hw-pt-text" font-size="92">
+          <textPath id="hw-pt-tp" href="#hw-pt-path" startOffset="4%"></textPath>
+        </text>
+      </svg>
+      <div
+        id="hw-pt-drv"
+        class="clip"
+        data-start="0"
+        data-duration="6"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- published parameters ----
+           Handwriting along any path — custom path text, natively via
+           SVG textPath (no Fusion overlay). CONFIG.d is the whole design. */
+        var CONFIG = {
+          text: "come on this wild journey with me...",
+          d: "M 220 700 C 520 480, 900 820, 1230 560 S 1700 380, 1780 420",
+          fontSize: 92,
+          showGuide: true, // faint dotted guide under the writing
+          typeCharDelay: 0.05,
+          seed: 12,
+          boil: { enabled: true, amp: 1.4, rot: 0.3, frameDrop: 3 },
+          animationOut: true,
+        };
+
+        var DUR = 6;
+        function clamp(v, lo, hi) {
+          return Math.min(hi, Math.max(lo, v));
+        }
+        var OUT = clamp(DUR * 0.06, 0.25, 0.6);
+
+        /* hw family runtime */
+        window.hwOnUpdate = function (tl, fn) {
+          if (!tl.__hwRenders) {
+            tl.__hwRenders = [];
+            tl.eventCallback("onUpdate", function () {
+              for (var i = 0; i < tl.__hwRenders.length; i++) tl.__hwRenders[i]();
+            });
+          }
+          tl.__hwRenders.push(fn);
+          fn();
+        };
+        window.hwHash = function (n, seed) {
+          var x = Math.sin(n * 127.1 + (seed || 1) * 311.7) * 43758.5453;
+          return (x - Math.floor(x)) * 2 - 1;
+        };
+        window.hwBoil = function (tl, target, opts) {
+          opts = opts || {};
+          var amp = opts.amp !== undefined ? opts.amp : 1.6;
+          var rot = opts.rot !== undefined ? opts.rot : 0.5;
+          var fps = opts.fps || 30;
+          var drop = opts.frameDrop || 3;
+          var seed = opts.seed || 1;
+          var els = gsap.utils.toArray(target);
+          window.hwOnUpdate(tl, function () {
+            var step = Math.floor((tl.time() * fps) / drop);
+            for (var i = 0; i < els.length; i++) {
+              gsap.set(els[i], {
+                x: window.hwHash(step * 3 + i * 97, seed) * amp,
+                y: window.hwHash(step * 3 + 1 + i * 97, seed) * amp,
+                rotation: (opts.baseRot || 0) + window.hwHash(step * 3 + 2 + i * 97, seed) * rot,
+              });
+            }
+          });
+        };
+
+        document.getElementById("hw-pt-path").setAttribute("d", CONFIG.d);
+        if (CONFIG.showGuide) document.getElementById("hw-pt-guide").setAttribute("d", CONFIG.d);
+        document.getElementById("hw-pt-text").setAttribute("font-size", CONFIG.fontSize);
+
+        /* per-char tspans along the path */
+        var NS = "http://www.w3.org/2000/svg";
+        var tp = document.getElementById("hw-pt-tp");
+        Array.from(CONFIG.text).forEach(function (ch) {
+          var t = document.createElementNS(NS, "tspan");
+          t.textContent = ch;
+          tp.appendChild(t);
+        });
+
+        var tl = gsap.timeline({ paused: true });
+
+        /* guide draws first, then the handwriting types along it */
+        var guide = document.getElementById("hw-pt-guide");
+        if (CONFIG.showGuide) {
+          var glen = guide.getTotalLength();
+          gsap.set(guide, { strokeDasharray: "2 14", strokeDashoffset: glen });
+          tl.to(guide, { strokeDashoffset: 0, duration: 0.9, ease: "power2.inOut" }, 0.2);
+        }
+        var chars = tp.querySelectorAll("tspan");
+        var delay = Math.min(CONFIG.typeCharDelay, 2.6 / Math.max(1, chars.length));
+        tl.to(chars, { opacity: 1, duration: 0.03, stagger: delay, ease: "none" }, 0.7);
+
+        if (CONFIG.boil.enabled) {
+          window.hwBoil(tl, "#hw-pt-svg", {
+            amp: CONFIG.boil.amp,
+            rot: CONFIG.boil.rot,
+            frameDrop: CONFIG.boil.frameDrop,
+            seed: CONFIG.seed,
+          });
+        }
+
+        if (CONFIG.animationOut) {
+          tl.to("#hw-pt-svg", { opacity: 0, duration: OUT, ease: "power2.in" }, DUR - OUT - 0.05);
+        }
+        tl.set("#hw-pt-root", { visibility: "hidden" }, DUR - 0.02);
+
+        window.__timelines["hw-path-text"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/hw-path-text/hw-path-text.html b/docs/public/catalog/blocks/hw-path-text/hw-path-text.html
new file mode 100644
index 0000000000..fa10379cd9
--- /dev/null
+++ b/docs/public/catalog/blocks/hw-path-text/hw-path-text.html
@@ -0,0 +1,193 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      @font-face {
+        font-family: "Caveat";
+        src: url("assets/fonts/Caveat-700-latin.woff2") format("woff2");
+        font-weight: 700;
+        font-display: block;
+      }
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      #hw-pt-root {
+        --hw-font-print: "Caveat", cursive;
+        --hw-font-script: "Caveat", cursive;
+        --hw-ink: #f4f2ec;
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent;
+        font-family: var(--hw-font-print, "Caveat", cursive);
+      }
+      #hw-pt-svg {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        overflow: visible;
+      }
+      /* The textPath carrier is geometry only — without fill:none it inherits
+         SVG's default black fill and renders as a solid blob under the text. */
+      #hw-pt-path {
+        fill: none;
+      }
+      #hw-pt-guide {
+        fill: none;
+        stroke: rgba(244, 242, 236, 0.22);
+        stroke-width: 3;
+        stroke-dasharray: 2 14;
+        stroke-linecap: round;
+      }
+      #hw-pt-svg text {
+        font-family: var(--hw-font-print, "Caveat", cursive);
+        font-weight: 700;
+        fill: var(--hw-ink);
+      }
+      #hw-pt-svg tspan {
+        opacity: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="hw-pt-root"
+      data-composition-id="hw-path-text"
+      data-start="0"
+      data-duration="6"
+      data-width="1920"
+      data-height="1080"
+    >
+      <svg id="hw-pt-svg" viewBox="0 0 1920 1080">
+        <path id="hw-pt-path" d=""></path>
+        <path id="hw-pt-guide" d=""></path>
+        <text id="hw-pt-text" font-size="92">
+          <textPath id="hw-pt-tp" href="#hw-pt-path" startOffset="4%"></textPath>
+        </text>
+      </svg>
+      <div
+        id="hw-pt-drv"
+        class="clip"
+        data-start="0"
+        data-duration="6"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- published parameters ----
+           Handwriting along any path — custom path text, natively via
+           SVG textPath (no Fusion overlay). CONFIG.d is the whole design. */
+        var CONFIG = {
+          text: "come on this wild journey with me...",
+          d: "M 220 700 C 520 480, 900 820, 1230 560 S 1700 380, 1780 420",
+          fontSize: 92,
+          showGuide: true, // faint dotted guide under the writing
+          typeCharDelay: 0.05,
+          seed: 12,
+          boil: { enabled: true, amp: 1.4, rot: 0.3, frameDrop: 3 },
+          animationOut: true,
+        };
+
+        var DUR = 6;
+        function clamp(v, lo, hi) {
+          return Math.min(hi, Math.max(lo, v));
+        }
+        var OUT = clamp(DUR * 0.06, 0.25, 0.6);
+
+        /* hw family runtime */
+        window.hwOnUpdate = function (tl, fn) {
+          if (!tl.__hwRenders) {
+            tl.__hwRenders = [];
+            tl.eventCallback("onUpdate", function () {
+              for (var i = 0; i < tl.__hwRenders.length; i++) tl.__hwRenders[i]();
+            });
+          }
+          tl.__hwRenders.push(fn);
+          fn();
+        };
+        window.hwHash = function (n, seed) {
+          var x = Math.sin(n * 127.1 + (seed || 1) * 311.7) * 43758.5453;
+          return (x - Math.floor(x)) * 2 - 1;
+        };
+        window.hwBoil = function (tl, target, opts) {
+          opts = opts || {};
+          var amp = opts.amp !== undefined ? opts.amp : 1.6;
+          var rot = opts.rot !== undefined ? opts.rot : 0.5;
+          var fps = opts.fps || 30;
+          var drop = opts.frameDrop || 3;
+          var seed = opts.seed || 1;
+          var els = gsap.utils.toArray(target);
+          window.hwOnUpdate(tl, function () {
+            var step = Math.floor((tl.time() * fps) / drop);
+            for (var i = 0; i < els.length; i++) {
+              gsap.set(els[i], {
+                x: window.hwHash(step * 3 + i * 97, seed) * amp,
+                y: window.hwHash(step * 3 + 1 + i * 97, seed) * amp,
+                rotation: (opts.baseRot || 0) + window.hwHash(step * 3 + 2 + i * 97, seed) * rot,
+              });
+            }
+          });
+        };
+
+        document.getElementById("hw-pt-path").setAttribute("d", CONFIG.d);
+        if (CONFIG.showGuide) document.getElementById("hw-pt-guide").setAttribute("d", CONFIG.d);
+        document.getElementById("hw-pt-text").setAttribute("font-size", CONFIG.fontSize);
+
+        /* per-char tspans along the path */
+        var NS = "http://www.w3.org/2000/svg";
+        var tp = document.getElementById("hw-pt-tp");
+        Array.from(CONFIG.text).forEach(function (ch) {
+          var t = document.createElementNS(NS, "tspan");
+          t.textContent = ch;
+          tp.appendChild(t);
+        });
+
+        var tl = gsap.timeline({ paused: true });
+
+        /* guide draws first, then the handwriting types along it */
+        var guide = document.getElementById("hw-pt-guide");
+        if (CONFIG.showGuide) {
+          var glen = guide.getTotalLength();
+          gsap.set(guide, { strokeDasharray: "2 14", strokeDashoffset: glen });
+          tl.to(guide, { strokeDashoffset: 0, duration: 0.9, ease: "power2.inOut" }, 0.2);
+        }
+        var chars = tp.querySelectorAll("tspan");
+        var delay = Math.min(CONFIG.typeCharDelay, 2.6 / Math.max(1, chars.length));
+        tl.to(chars, { opacity: 1, duration: 0.03, stagger: delay, ease: "none" }, 0.7);
+
+        if (CONFIG.boil.enabled) {
+          window.hwBoil(tl, "#hw-pt-svg", {
+            amp: CONFIG.boil.amp,
+            rot: CONFIG.boil.rot,
+            frameDrop: CONFIG.boil.frameDrop,
+            seed: CONFIG.seed,
+          });
+        }
+
+        if (CONFIG.animationOut) {
+          tl.to("#hw-pt-svg", { opacity: 0, duration: OUT, ease: "power2.in" }, DUR - OUT - 0.05);
+        }
+        tl.set("#hw-pt-root", { visibility: "hidden" }, DUR - 0.02);
+
+        window.__timelines["hw-path-text"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/hw-pipeline/assets/fonts/Caveat-700-latin.woff2 b/docs/public/catalog/blocks/hw-pipeline/assets/fonts/Caveat-700-latin.woff2
new file mode 100644
index 0000000000..5a3423426f
Binary files /dev/null and b/docs/public/catalog/blocks/hw-pipeline/assets/fonts/Caveat-700-latin.woff2 differ
diff --git a/docs/public/catalog/blocks/hw-pipeline/demo.html b/docs/public/catalog/blocks/hw-pipeline/demo.html
new file mode 100644
index 0000000000..41555efcc8
--- /dev/null
+++ b/docs/public/catalog/blocks/hw-pipeline/demo.html
@@ -0,0 +1,320 @@
+<!doctype html>
+<!-- Demo plate for the catalog preview. Identical to hw-pipeline.html except the
+     root background, which is opaque here so the transparent overlay reads.
+     Not installed by `hyperframes add` - registry-item.json lists hw-pipeline.html only. -->
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      @font-face {
+        font-family: "Caveat";
+        src: url("assets/fonts/Caveat-700-latin.woff2") format("woff2");
+        font-weight: 700;
+        font-display: block;
+      }
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #17161a;
+        overflow: hidden;
+      }
+      #hw-pl-root {
+        --hw-font-print: "Caveat", cursive;
+        --hw-font-script: "Caveat", cursive;
+        --hw-ink: #f4f2ec;
+        /* Warm marker accent, matching hw-frame / hw-title / hw-underline. The
+           previous #6d6dff read as a default UI blue against the family's ink. */
+        --hw-accent: #ffb020;
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent; /* overlays footage or boards */
+        font-family: var(--hw-font-print, "Caveat", cursive);
+      }
+      #hw-pl-svg {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        overflow: visible;
+      }
+      #hw-pl-svg path {
+        fill: none;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+      .hw-pl-box {
+        stroke: var(--hw-ink);
+        stroke-width: 6;
+      }
+      .hw-pl-conn {
+        stroke: var(--hw-accent);
+        stroke-width: 5;
+      }
+      .hw-pl-label {
+        position: absolute;
+        text-align: center;
+        font-weight: 700;
+        color: var(--hw-ink);
+        white-space: nowrap;
+        opacity: 0;
+        text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="hw-pl-root"
+      data-composition-id="hw-pipeline"
+      data-start="0"
+      data-duration="7"
+      data-width="1920"
+      data-height="1080"
+    >
+      <svg id="hw-pl-svg" viewBox="0 0 1920 1080"></svg>
+      <div id="hw-pl-labels"></div>
+      <div
+        id="hw-pl-drv"
+        class="clip"
+        data-start="0"
+        data-duration="7"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- published parameters ----
+           A flowchart "pipeline": wobbled boxes joined by curved
+           connectors, drawing on in sequence, all boiling. */
+        var CONFIG = {
+          nodes: [{ label: "Idea" }, { label: "Record" }, { label: "Shine!" }],
+          boxW: 320,
+          boxH: 170,
+          gap: 190, // px between boxes
+          y: 455, // top of the row; x centers automatically
+          fontSize: 56,
+          seed: 11,
+          boil: { enabled: true, amp: 1.6, rot: 0.4, frameDrop: 3 },
+          animationOut: true,
+        };
+
+        var DUR = 7;
+        function clamp(v, lo, hi) {
+          return Math.min(hi, Math.max(lo, v));
+        }
+        var OUT = clamp(DUR * 0.06, 0.25, 0.6);
+
+        /* hw family runtime */
+        window.hwOnUpdate = function (tl, fn) {
+          if (!tl.__hwRenders) {
+            tl.__hwRenders = [];
+            tl.eventCallback("onUpdate", function () {
+              for (var i = 0; i < tl.__hwRenders.length; i++) tl.__hwRenders[i]();
+            });
+          }
+          tl.__hwRenders.push(fn);
+          fn();
+        };
+        window.hwHash = function (n, seed) {
+          var x = Math.sin(n * 127.1 + (seed || 1) * 311.7) * 43758.5453;
+          return (x - Math.floor(x)) * 2 - 1;
+        };
+        window.hwBoil = function (tl, target, opts) {
+          opts = opts || {};
+          var amp = opts.amp !== undefined ? opts.amp : 1.6;
+          var rot = opts.rot !== undefined ? opts.rot : 0.5;
+          var fps = opts.fps || 30;
+          var drop = opts.frameDrop || 3;
+          var seed = opts.seed || 1;
+          var els = gsap.utils.toArray(target);
+          window.hwOnUpdate(tl, function () {
+            var step = Math.floor((tl.time() * fps) / drop);
+            for (var i = 0; i < els.length; i++) {
+              gsap.set(els[i], {
+                x: window.hwHash(step * 3 + i * 97, seed) * amp,
+                y: window.hwHash(step * 3 + 1 + i * 97, seed) * amp,
+                rotation: (opts.baseRot || 0) + window.hwHash(step * 3 + 2 + i * 97, seed) * rot,
+              });
+            }
+          });
+        };
+        window.hwWobbleRect = function (w, h, r, seed, amp) {
+          amp = amp === undefined ? 3.5 : amp;
+          function wob(n) {
+            return window.hwHash(n, seed) * amp;
+          }
+          var d = "M " + (r + wob(1)) + " " + wob(2);
+          d += " L " + (w / 2 + wob(3)) + " " + wob(4);
+          d += " L " + (w - r + wob(5)) + " " + wob(6);
+          d += " Q " + (w + wob(7)) + " " + wob(8) + " " + (w + wob(9)) + " " + (r + wob(10));
+          d += " L " + (w + wob(11)) + " " + (h / 2 + wob(12));
+          d += " L " + (w + wob(13)) + " " + (h - r + wob(14));
+          d +=
+            " Q " +
+            (w + wob(15)) +
+            " " +
+            (h + wob(16)) +
+            " " +
+            (w - r + wob(17)) +
+            " " +
+            (h + wob(18));
+          d += " L " + (w / 2 + wob(19)) + " " + (h + wob(20));
+          d += " L " + (r + wob(21)) + " " + (h + wob(22));
+          d += " Q " + wob(23) + " " + (h + wob(24)) + " " + wob(25) + " " + (h - r + wob(26));
+          d += " L " + wob(27) + " " + (h / 2 + wob(28));
+          d += " L " + wob(29) + " " + (r + wob(30));
+          d += " Q " + wob(31) + " " + wob(32) + " " + (r + wob(33)) + " " + wob(34);
+          return d;
+        };
+
+        var NS = "http://www.w3.org/2000/svg";
+        var svg = document.getElementById("hw-pl-svg");
+        var labels = document.getElementById("hw-pl-labels");
+        var n = CONFIG.nodes.length;
+        var totalW = n * CONFIG.boxW + (n - 1) * CONFIG.gap;
+        var x0 = (1920 - totalW) / 2;
+
+        var boxes = [],
+          conns = [],
+          labelEls = [];
+        CONFIG.nodes.forEach(function (node, i) {
+          var bx = x0 + i * (CONFIG.boxW + CONFIG.gap);
+          /* outer g owns the translate (GSAP transforms REPLACE the SVG
+             transform attribute — never boil the element that carries it);
+             inner g is the boil target */
+          var gOuter = document.createElementNS(NS, "g");
+          gOuter.setAttribute("transform", "translate(" + bx + " " + CONFIG.y + ")");
+          var g = document.createElementNS(NS, "g");
+          g.setAttribute("id", "hw-pl-box-g-" + i);
+          gOuter.appendChild(g);
+          var p = document.createElementNS(NS, "path");
+          p.setAttribute("class", "hw-pl-box");
+          p.setAttribute("id", "hw-pl-box-" + i);
+          p.setAttribute("d", window.hwWobbleRect(CONFIG.boxW, CONFIG.boxH, 24, CONFIG.seed + i));
+          g.appendChild(p);
+          svg.appendChild(gOuter);
+          boxes.push(p);
+
+          var label = document.createElement("div");
+          label.className = "hw-pl-label";
+          label.id = "hw-pl-label-" + i;
+          label.textContent = node.label;
+          label.style.left = bx + "px";
+          label.style.top = CONFIG.y + CONFIG.boxH / 2 - CONFIG.fontSize * 0.62 + "px";
+          label.style.width = CONFIG.boxW + "px";
+          label.style.fontSize = CONFIG.fontSize + "px";
+          labels.appendChild(label);
+          labelEls.push(label);
+
+          if (i < n - 1) {
+            var cx = bx + CONFIG.boxW,
+              cy = CONFIG.y + CONFIG.boxH / 2;
+            var ex = cx + CONFIG.gap,
+              ey = cy;
+            var c = document.createElementNS(NS, "path");
+            c.setAttribute("class", "hw-pl-conn");
+            c.setAttribute("id", "hw-pl-conn-" + i);
+            var sx = cx + 10,
+              tx = ex - 10;
+            var qx = cx + CONFIG.gap / 2 + window.hwHash(i * 9 + 2, CONFIG.seed) * 16,
+              qy = cy - 46 - window.hwHash(i * 9 + 3, CONFIG.seed) * 12;
+            /* Barbs follow the curve's incoming tangent. A quadratic's tangent
+               at its end is (end - control); barbs fixed to horizontal left the
+               head detached from a curve that arrives descending. Symmetric
+               length and angle, so it reads as one arrowhead. */
+            var ang = Math.atan2(ey - qy, tx - qx) + Math.PI;
+            var BARB = 26,
+              SPREAD = 0.42;
+            var b1x = tx + BARB * Math.cos(ang - SPREAD),
+              b1y = ey + BARB * Math.sin(ang - SPREAD);
+            var b2x = tx + BARB * Math.cos(ang + SPREAD),
+              b2y = ey + BARB * Math.sin(ang + SPREAD);
+            c.setAttribute(
+              "d",
+              "M " +
+                sx +
+                " " +
+                cy +
+                " Q " +
+                qx +
+                " " +
+                qy +
+                " " +
+                tx +
+                " " +
+                ey +
+                " M " +
+                tx +
+                " " +
+                ey +
+                " L " +
+                b1x +
+                " " +
+                b1y +
+                " M " +
+                tx +
+                " " +
+                ey +
+                " L " +
+                b2x +
+                " " +
+                b2y,
+            );
+            svg.appendChild(c);
+            conns.push(c);
+          }
+        });
+
+        var tl = gsap.timeline({ paused: true });
+
+        /* sequence: box draws -> label -> connector -> next box... */
+        var t = 0.3;
+        CONFIG.nodes.forEach(function (_, i) {
+          var p = boxes[i];
+          var len = p.getTotalLength();
+          gsap.set(p, { strokeDasharray: len, strokeDashoffset: len });
+          tl.to(p, { strokeDashoffset: 0, duration: 0.65, ease: "power2.inOut" }, t);
+          tl.to(labelEls[i], { opacity: 1, duration: 0.35, ease: "power2.out" }, t + 0.45);
+          t += 0.7;
+          if (i < conns.length) {
+            var c = conns[i];
+            var cl = c.getTotalLength();
+            gsap.set(c, { strokeDasharray: cl, strokeDashoffset: cl });
+            tl.to(c, { strokeDashoffset: 0, duration: 0.45, ease: "power2.inOut" }, t);
+            t += 0.5;
+          }
+        });
+
+        if (CONFIG.boil.enabled) {
+          var targets = boxes.map(function (_, i) {
+            return "#hw-pl-box-g-" + i;
+          });
+          window.hwBoil(tl, targets.concat([".hw-pl-conn", ".hw-pl-label"]), {
+            amp: CONFIG.boil.amp,
+            rot: CONFIG.boil.rot,
+            frameDrop: CONFIG.boil.frameDrop,
+            seed: CONFIG.seed,
+          });
+        }
+
+        if (CONFIG.animationOut) {
+          tl.to([svg, labels], { opacity: 0, duration: OUT, ease: "power2.in" }, DUR - OUT - 0.05);
+        }
+        tl.set("#hw-pl-root", { visibility: "hidden" }, DUR - 0.02);
+
+        window.__timelines["hw-pipeline"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/hw-pipeline/hw-pipeline.html b/docs/public/catalog/blocks/hw-pipeline/hw-pipeline.html
new file mode 100644
index 0000000000..376e443940
--- /dev/null
+++ b/docs/public/catalog/blocks/hw-pipeline/hw-pipeline.html
@@ -0,0 +1,317 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      @font-face {
+        font-family: "Caveat";
+        src: url("assets/fonts/Caveat-700-latin.woff2") format("woff2");
+        font-weight: 700;
+        font-display: block;
+      }
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      #hw-pl-root {
+        --hw-font-print: "Caveat", cursive;
+        --hw-font-script: "Caveat", cursive;
+        --hw-ink: #f4f2ec;
+        /* Warm marker accent, matching hw-frame / hw-title / hw-underline. The
+           previous #6d6dff read as a default UI blue against the family's ink. */
+        --hw-accent: #ffb020;
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent; /* overlays footage or boards */
+        font-family: var(--hw-font-print, "Caveat", cursive);
+      }
+      #hw-pl-svg {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        overflow: visible;
+      }
+      #hw-pl-svg path {
+        fill: none;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+      .hw-pl-box {
+        stroke: var(--hw-ink);
+        stroke-width: 6;
+      }
+      .hw-pl-conn {
+        stroke: var(--hw-accent);
+        stroke-width: 5;
+      }
+      .hw-pl-label {
+        position: absolute;
+        text-align: center;
+        font-weight: 700;
+        color: var(--hw-ink);
+        white-space: nowrap;
+        opacity: 0;
+        text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="hw-pl-root"
+      data-composition-id="hw-pipeline"
+      data-start="0"
+      data-duration="7"
+      data-width="1920"
+      data-height="1080"
+    >
+      <svg id="hw-pl-svg" viewBox="0 0 1920 1080"></svg>
+      <div id="hw-pl-labels"></div>
+      <div
+        id="hw-pl-drv"
+        class="clip"
+        data-start="0"
+        data-duration="7"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- published parameters ----
+           A flowchart "pipeline": wobbled boxes joined by curved
+           connectors, drawing on in sequence, all boiling. */
+        var CONFIG = {
+          nodes: [{ label: "Idea" }, { label: "Record" }, { label: "Shine!" }],
+          boxW: 320,
+          boxH: 170,
+          gap: 190, // px between boxes
+          y: 455, // top of the row; x centers automatically
+          fontSize: 56,
+          seed: 11,
+          boil: { enabled: true, amp: 1.6, rot: 0.4, frameDrop: 3 },
+          animationOut: true,
+        };
+
+        var DUR = 7;
+        function clamp(v, lo, hi) {
+          return Math.min(hi, Math.max(lo, v));
+        }
+        var OUT = clamp(DUR * 0.06, 0.25, 0.6);
+
+        /* hw family runtime */
+        window.hwOnUpdate = function (tl, fn) {
+          if (!tl.__hwRenders) {
+            tl.__hwRenders = [];
+            tl.eventCallback("onUpdate", function () {
+              for (var i = 0; i < tl.__hwRenders.length; i++) tl.__hwRenders[i]();
+            });
+          }
+          tl.__hwRenders.push(fn);
+          fn();
+        };
+        window.hwHash = function (n, seed) {
+          var x = Math.sin(n * 127.1 + (seed || 1) * 311.7) * 43758.5453;
+          return (x - Math.floor(x)) * 2 - 1;
+        };
+        window.hwBoil = function (tl, target, opts) {
+          opts = opts || {};
+          var amp = opts.amp !== undefined ? opts.amp : 1.6;
+          var rot = opts.rot !== undefined ? opts.rot : 0.5;
+          var fps = opts.fps || 30;
+          var drop = opts.frameDrop || 3;
+          var seed = opts.seed || 1;
+          var els = gsap.utils.toArray(target);
+          window.hwOnUpdate(tl, function () {
+            var step = Math.floor((tl.time() * fps) / drop);
+            for (var i = 0; i < els.length; i++) {
+              gsap.set(els[i], {
+                x: window.hwHash(step * 3 + i * 97, seed) * amp,
+                y: window.hwHash(step * 3 + 1 + i * 97, seed) * amp,
+                rotation: (opts.baseRot || 0) + window.hwHash(step * 3 + 2 + i * 97, seed) * rot,
+              });
+            }
+          });
+        };
+        window.hwWobbleRect = function (w, h, r, seed, amp) {
+          amp = amp === undefined ? 3.5 : amp;
+          function wob(n) {
+            return window.hwHash(n, seed) * amp;
+          }
+          var d = "M " + (r + wob(1)) + " " + wob(2);
+          d += " L " + (w / 2 + wob(3)) + " " + wob(4);
+          d += " L " + (w - r + wob(5)) + " " + wob(6);
+          d += " Q " + (w + wob(7)) + " " + wob(8) + " " + (w + wob(9)) + " " + (r + wob(10));
+          d += " L " + (w + wob(11)) + " " + (h / 2 + wob(12));
+          d += " L " + (w + wob(13)) + " " + (h - r + wob(14));
+          d +=
+            " Q " +
+            (w + wob(15)) +
+            " " +
+            (h + wob(16)) +
+            " " +
+            (w - r + wob(17)) +
+            " " +
+            (h + wob(18));
+          d += " L " + (w / 2 + wob(19)) + " " + (h + wob(20));
+          d += " L " + (r + wob(21)) + " " + (h + wob(22));
+          d += " Q " + wob(23) + " " + (h + wob(24)) + " " + wob(25) + " " + (h - r + wob(26));
+          d += " L " + wob(27) + " " + (h / 2 + wob(28));
+          d += " L " + wob(29) + " " + (r + wob(30));
+          d += " Q " + wob(31) + " " + wob(32) + " " + (r + wob(33)) + " " + wob(34);
+          return d;
+        };
+
+        var NS = "http://www.w3.org/2000/svg";
+        var svg = document.getElementById("hw-pl-svg");
+        var labels = document.getElementById("hw-pl-labels");
+        var n = CONFIG.nodes.length;
+        var totalW = n * CONFIG.boxW + (n - 1) * CONFIG.gap;
+        var x0 = (1920 - totalW) / 2;
+
+        var boxes = [],
+          conns = [],
+          labelEls = [];
+        CONFIG.nodes.forEach(function (node, i) {
+          var bx = x0 + i * (CONFIG.boxW + CONFIG.gap);
+          /* outer g owns the translate (GSAP transforms REPLACE the SVG
+             transform attribute — never boil the element that carries it);
+             inner g is the boil target */
+          var gOuter = document.createElementNS(NS, "g");
+          gOuter.setAttribute("transform", "translate(" + bx + " " + CONFIG.y + ")");
+          var g = document.createElementNS(NS, "g");
+          g.setAttribute("id", "hw-pl-box-g-" + i);
+          gOuter.appendChild(g);
+          var p = document.createElementNS(NS, "path");
+          p.setAttribute("class", "hw-pl-box");
+          p.setAttribute("id", "hw-pl-box-" + i);
+          p.setAttribute("d", window.hwWobbleRect(CONFIG.boxW, CONFIG.boxH, 24, CONFIG.seed + i));
+          g.appendChild(p);
+          svg.appendChild(gOuter);
+          boxes.push(p);
+
+          var label = document.createElement("div");
+          label.className = "hw-pl-label";
+          label.id = "hw-pl-label-" + i;
+          label.textContent = node.label;
+          label.style.left = bx + "px";
+          label.style.top = CONFIG.y + CONFIG.boxH / 2 - CONFIG.fontSize * 0.62 + "px";
+          label.style.width = CONFIG.boxW + "px";
+          label.style.fontSize = CONFIG.fontSize + "px";
+          labels.appendChild(label);
+          labelEls.push(label);
+
+          if (i < n - 1) {
+            var cx = bx + CONFIG.boxW,
+              cy = CONFIG.y + CONFIG.boxH / 2;
+            var ex = cx + CONFIG.gap,
+              ey = cy;
+            var c = document.createElementNS(NS, "path");
+            c.setAttribute("class", "hw-pl-conn");
+            c.setAttribute("id", "hw-pl-conn-" + i);
+            var sx = cx + 10,
+              tx = ex - 10;
+            var qx = cx + CONFIG.gap / 2 + window.hwHash(i * 9 + 2, CONFIG.seed) * 16,
+              qy = cy - 46 - window.hwHash(i * 9 + 3, CONFIG.seed) * 12;
+            /* Barbs follow the curve's incoming tangent. A quadratic's tangent
+               at its end is (end - control); barbs fixed to horizontal left the
+               head detached from a curve that arrives descending. Symmetric
+               length and angle, so it reads as one arrowhead. */
+            var ang = Math.atan2(ey - qy, tx - qx) + Math.PI;
+            var BARB = 26,
+              SPREAD = 0.42;
+            var b1x = tx + BARB * Math.cos(ang - SPREAD),
+              b1y = ey + BARB * Math.sin(ang - SPREAD);
+            var b2x = tx + BARB * Math.cos(ang + SPREAD),
+              b2y = ey + BARB * Math.sin(ang + SPREAD);
+            c.setAttribute(
+              "d",
+              "M " +
+                sx +
+                " " +
+                cy +
+                " Q " +
+                qx +
+                " " +
+                qy +
+                " " +
+                tx +
+                " " +
+                ey +
+                " M " +
+                tx +
+                " " +
+                ey +
+                " L " +
+                b1x +
+                " " +
+                b1y +
+                " M " +
+                tx +
+                " " +
+                ey +
+                " L " +
+                b2x +
+                " " +
+                b2y,
+            );
+            svg.appendChild(c);
+            conns.push(c);
+          }
+        });
+
+        var tl = gsap.timeline({ paused: true });
+
+        /* sequence: box draws -> label -> connector -> next box... */
+        var t = 0.3;
+        CONFIG.nodes.forEach(function (_, i) {
+          var p = boxes[i];
+          var len = p.getTotalLength();
+          gsap.set(p, { strokeDasharray: len, strokeDashoffset: len });
+          tl.to(p, { strokeDashoffset: 0, duration: 0.65, ease: "power2.inOut" }, t);
+          tl.to(labelEls[i], { opacity: 1, duration: 0.35, ease: "power2.out" }, t + 0.45);
+          t += 0.7;
+          if (i < conns.length) {
+            var c = conns[i];
+            var cl = c.getTotalLength();
+            gsap.set(c, { strokeDasharray: cl, strokeDashoffset: cl });
+            tl.to(c, { strokeDashoffset: 0, duration: 0.45, ease: "power2.inOut" }, t);
+            t += 0.5;
+          }
+        });
+
+        if (CONFIG.boil.enabled) {
+          var targets = boxes.map(function (_, i) {
+            return "#hw-pl-box-g-" + i;
+          });
+          window.hwBoil(tl, targets.concat([".hw-pl-conn", ".hw-pl-label"]), {
+            amp: CONFIG.boil.amp,
+            rot: CONFIG.boil.rot,
+            frameDrop: CONFIG.boil.frameDrop,
+            seed: CONFIG.seed,
+          });
+        }
+
+        if (CONFIG.animationOut) {
+          tl.to([svg, labels], { opacity: 0, duration: OUT, ease: "power2.in" }, DUR - OUT - 0.05);
+        }
+        tl.set("#hw-pl-root", { visibility: "hidden" }, DUR - 0.02);
+
+        window.__timelines["hw-pipeline"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/hw-scribble-transition/hw-scribble-transition.html b/docs/public/catalog/blocks/hw-scribble-transition/hw-scribble-transition.html
new file mode 100644
index 0000000000..6cf993833f
--- /dev/null
+++ b/docs/public/catalog/blocks/hw-scribble-transition/hw-scribble-transition.html
@@ -0,0 +1,152 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      #hw-st-root {
+        /* Warm marker accent, consistent with the rest of the hw family.
+           Override per use via CONFIG.color. */
+        --hw-accent: #ffb020;
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent;
+      }
+      #hw-st-svg {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+      }
+      #hw-st-svg path {
+        fill: none;
+        stroke: var(--hw-accent);
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+      /* solid backstop that guarantees full coverage at the midpoint */
+      #hw-st-solid {
+        position: absolute;
+        inset: 0;
+        background: var(--hw-accent);
+        opacity: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="hw-st-root"
+      data-composition-id="hw-scribble-transition"
+      data-start="0"
+      data-duration="2.2"
+      data-width="1920"
+      data-height="1080"
+    >
+      <svg id="hw-st-svg" viewBox="0 0 1920 1080" data-layout-allow-overflow></svg>
+      <div id="hw-st-solid"></div>
+      <div
+        id="hw-st-drv"
+        class="clip"
+        data-start="0"
+        data-duration="2.2"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- published parameters ----
+           Overlay-transition (the mk-clone-wall model): fat scribble strokes
+           sweep across and cover the frame, a solid backstop guarantees full
+           coverage at the midpoint (the host hard-cuts beneath, ~0.9-1.4s
+           local), then everything clears. Place spanning the host's cut. */
+        var CONFIG = {
+          color: null, // css color; null = --hw-accent (warm marker)
+          bands: 7, // horizontal scribble bands
+          strokeScale: 1.0,
+          seed: 17,
+        };
+
+        var W = 1920,
+          H = 1080,
+          DUR = 2.2;
+
+        window.hwHash = function (n, seed) {
+          var x = Math.sin(n * 127.1 + (seed || 1) * 311.7) * 43758.5453;
+          return (x - Math.floor(x)) * 2 - 1;
+        };
+
+        var root = document.getElementById("hw-st-root");
+        if (CONFIG.color) root.style.setProperty("--hw-accent", CONFIG.color);
+        var NS = "http://www.w3.org/2000/svg";
+        var svg = document.getElementById("hw-st-svg");
+
+        /* fat zigzag bands, each covering a horizontal slice edge-to-edge */
+        var bandH = H / CONFIG.bands;
+        var paths = [];
+        for (var b = 0; b < CONFIG.bands; b++) {
+          var y0 = b * bandH + bandH / 2;
+          var d = "M -80 " + (y0 + window.hwHash(b * 17, CONFIG.seed) * 20).toFixed(1);
+          var zigs = 7;
+          for (var i = 1; i <= zigs; i++) {
+            var x = (W + 160) * (i / zigs) - 80;
+            var y =
+              y0 + (i % 2 ? -1 : 1) * bandH * 0.32 + window.hwHash(b * 17 + i, CONFIG.seed) * 16;
+            d += " L " + x.toFixed(1) + " " + y.toFixed(1);
+          }
+          var p = document.createElementNS(NS, "path");
+          p.setAttribute("d", d);
+          p.setAttribute("stroke-width", Math.ceil(bandH * 0.85 * CONFIG.strokeScale));
+          p.setAttribute("id", "hw-st-band-" + b);
+          svg.appendChild(p);
+          paths.push(p);
+        }
+
+        var tl = gsap.timeline({ paused: true });
+
+        /* 0-0.85: bands scribble on (staggered, alternating direction) */
+        paths.forEach(function (p, i) {
+          var len = p.getTotalLength();
+          gsap.set(p, { strokeDasharray: len, strokeDashoffset: i % 2 ? -len : len });
+          tl.to(p, { strokeDashoffset: 0, duration: 0.55, ease: "power2.in" }, 0.04 * i);
+        });
+        /* 0.8: solid backstop snaps in beneath the finished scribble — full
+           coverage guaranteed 0.85-1.35 (the host's cut window) */
+        tl.to("#hw-st-solid", { opacity: 1, duration: 0.12, ease: "none" }, 0.8);
+
+        /* 1.35-1.95: clear — bands scribble off the other way, backstop lifts */
+        tl.to("#hw-st-solid", { opacity: 0, duration: 0.15, ease: "none" }, 1.42);
+        paths.forEach(function (p, i) {
+          var len = p.getTotalLength();
+          tl.to(
+            p,
+            { strokeDashoffset: i % 2 ? len : -len, duration: 0.5, ease: "power2.out" },
+            1.42 + 0.035 * i,
+          );
+        });
+
+        /* hard kill the moment the last band clears (learning: kill roots
+           when the final fade completes, not at DUR) */
+        tl.set(root, { visibility: "hidden" }, 2.17);
+
+        window.__timelines["hw-scribble-transition"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/hw-text-cloud/assets/fonts/Caveat-700-latin.woff2 b/docs/public/catalog/blocks/hw-text-cloud/assets/fonts/Caveat-700-latin.woff2
new file mode 100644
index 0000000000..5a3423426f
Binary files /dev/null and b/docs/public/catalog/blocks/hw-text-cloud/assets/fonts/Caveat-700-latin.woff2 differ
diff --git a/docs/public/catalog/blocks/hw-text-cloud/hw-text-cloud.html b/docs/public/catalog/blocks/hw-text-cloud/hw-text-cloud.html
new file mode 100644
index 0000000000..88db90f00b
--- /dev/null
+++ b/docs/public/catalog/blocks/hw-text-cloud/hw-text-cloud.html
@@ -0,0 +1,285 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      @font-face {
+        font-family: "Caveat";
+        src: url("assets/fonts/Caveat-700-latin.woff2") format("woff2");
+        font-weight: 700;
+        font-display: block;
+      }
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      #hw-tc-root {
+        /* ---- hw tokens ---- */
+        --hw-font-print: "Caveat", cursive;
+        --hw-font-script: "Caveat", cursive;
+        --hw-ink: #f4f2ec;
+        --hw-ink-dark: #26241f;
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent; /* overlays footage */
+        font-family: var(--hw-font-print, "Caveat", cursive);
+      }
+      #hw-tc-wrap {
+        position: absolute;
+        pointer-events: none;
+      }
+      #hw-tc-wrap svg {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        overflow: visible;
+      }
+      #hw-tc-fill {
+        fill: var(--hw-ink);
+        opacity: 0;
+      }
+      #hw-tc-stroke {
+        fill: none;
+        stroke: var(--hw-ink-dark);
+        stroke-width: 4;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+      #hw-tc-text {
+        position: absolute;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        font-weight: 700;
+        color: var(--hw-ink-dark);
+        line-height: 1.05;
+      }
+      #hw-tc-text .ch {
+        opacity: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="hw-tc-root"
+      data-composition-id="hw-text-cloud"
+      data-start="0"
+      data-duration="6"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="hw-tc-wrap">
+        <svg id="hw-tc-svg">
+          <path id="hw-tc-fill"></path>
+          <path id="hw-tc-stroke"></path>
+        </svg>
+        <div id="hw-tc-text"></div>
+      </div>
+      <div
+        id="hw-tc-drv"
+        class="clip"
+        data-start="0"
+        data-duration="6"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- published parameters ----
+           Speech bubble with a movable tip (pointable at any subject): wobbled
+           cloud, draw-on outline, paper fill, per-char handwritten text. */
+        var CONFIG = {
+          text: "what are you looking at?",
+          x: 620, // wrapper left
+          y: 180, // wrapper top
+          w: 560,
+          h: 300,
+          fontSize: 58,
+          tip: { side: "bottom-left", len: 90 }, // "bottom-left"|"bottom-right"
+          seed: 6,
+          boil: { enabled: true, amp: 1.6, rot: 0.4, frameDrop: 3 },
+          typeCharDelay: 0.03,
+          animationIn: true,
+          animationOut: true,
+        };
+
+        var DUR = 6;
+        function clamp(v, lo, hi) {
+          return Math.min(hi, Math.max(lo, v));
+        }
+        var OUT = clamp(DUR * 0.06, 0.25, 0.6);
+
+        /* hw family runtime */
+        window.hwOnUpdate = function (tl, fn) {
+          if (!tl.__hwRenders) {
+            tl.__hwRenders = [];
+            tl.eventCallback("onUpdate", function () {
+              for (var i = 0; i < tl.__hwRenders.length; i++) tl.__hwRenders[i]();
+            });
+          }
+          tl.__hwRenders.push(fn);
+          fn();
+        };
+        window.hwHash = function (n, seed) {
+          var x = Math.sin(n * 127.1 + (seed || 1) * 311.7) * 43758.5453;
+          return (x - Math.floor(x)) * 2 - 1;
+        };
+        window.hwBoil = function (tl, target, opts) {
+          opts = opts || {};
+          var amp = opts.amp !== undefined ? opts.amp : 1.6;
+          var rot = opts.rot !== undefined ? opts.rot : 0.5;
+          var fps = opts.fps || 30;
+          var drop = opts.frameDrop || 3;
+          var seed = opts.seed || 1;
+          var els = gsap.utils.toArray(target);
+          window.hwOnUpdate(tl, function () {
+            var step = Math.floor((tl.time() * fps) / drop);
+            for (var i = 0; i < els.length; i++) {
+              gsap.set(els[i], {
+                x: window.hwHash(step * 3 + i * 97, seed) * amp,
+                y: window.hwHash(step * 3 + 1 + i * 97, seed) * amp,
+                rotation: (opts.baseRot || 0) + window.hwHash(step * 3 + 2 + i * 97, seed) * rot,
+              });
+            }
+          });
+        };
+
+        /* wobbled cloud with a tail tip */
+        function cloudPath(W, H, tip, seed) {
+          var cx = W / 2,
+            cy = H / 2 - 14,
+            rx = W / 2 - 12,
+            ry = H / 2 - 34;
+          var N = 16,
+            pts = [];
+          for (var i = 0; i < N; i++) {
+            var a = (i / N) * Math.PI * 2;
+            var wr = 1 + window.hwHash(i * 11 + 3, seed) * 0.06;
+            pts.push([cx + Math.cos(a) * rx * wr, cy + Math.sin(a) * ry * wr]);
+          }
+          var mx = (pts[0][0] + pts[N - 1][0]) / 2,
+            my = (pts[0][1] + pts[N - 1][1]) / 2;
+          var d = "M" + mx.toFixed(1) + " " + my.toFixed(1);
+          for (var j = 0; j < N; j++) {
+            var p = pts[j],
+              q = pts[(j + 1) % N];
+            d +=
+              " Q" +
+              p[0].toFixed(1) +
+              " " +
+              p[1].toFixed(1) +
+              " " +
+              ((p[0] + q[0]) / 2).toFixed(1) +
+              " " +
+              ((p[1] + q[1]) / 2).toFixed(1);
+          }
+          d += "Z";
+          /* tail */
+          var left = tip.side !== "bottom-right";
+          var bx = cx + (left ? -rx * 0.45 : rx * 0.45),
+            by = cy + ry * 0.92;
+          var tx = bx + (left ? -tip.len * 0.5 : tip.len * 0.5),
+            ty = by + tip.len;
+          d +=
+            " M " +
+            (bx - 26).toFixed(1) +
+            " " +
+            (by - 6).toFixed(1) +
+            " Q " +
+            (bx - 8 + window.hwHash(31, seed) * 6).toFixed(1) +
+            " " +
+            ((by + ty) / 2).toFixed(1) +
+            " " +
+            tx.toFixed(1) +
+            " " +
+            ty.toFixed(1) +
+            " Q " +
+            (bx + 18).toFixed(1) +
+            " " +
+            ((by + ty) / 2).toFixed(1) +
+            " " +
+            (bx + 30).toFixed(1) +
+            " " +
+            (by - 2).toFixed(1);
+          return d;
+        }
+
+        var wrap = document.getElementById("hw-tc-wrap");
+        wrap.style.left = CONFIG.x + "px";
+        wrap.style.top = CONFIG.y + "px";
+        wrap.style.width = CONFIG.w + "px";
+        wrap.style.height = CONFIG.h + "px";
+        var svg = document.getElementById("hw-tc-svg");
+        svg.setAttribute("viewBox", "0 0 " + CONFIG.w + " " + CONFIG.h);
+        var d = cloudPath(CONFIG.w, CONFIG.h, CONFIG.tip, CONFIG.seed);
+        document.getElementById("hw-tc-fill").setAttribute("d", d);
+        document.getElementById("hw-tc-stroke").setAttribute("d", d);
+
+        var text = document.getElementById("hw-tc-text");
+        text.style.left = CONFIG.w * 0.12 + "px";
+        text.style.top = CONFIG.h * 0.1 + "px";
+        text.style.width = CONFIG.w * 0.76 + "px";
+        text.style.height = CONFIG.h * 0.62 + "px";
+        text.style.fontSize = CONFIG.fontSize + "px";
+        var inner = document.createElement("div");
+        Array.from(CONFIG.text).forEach(function (ch) {
+          var s = document.createElement("span");
+          s.className = "ch";
+          s.textContent = ch;
+          inner.appendChild(s);
+        });
+        text.appendChild(inner);
+
+        var tl = gsap.timeline({ paused: true });
+
+        /* draw outline, fade fill, type text */
+        var stroke = document.getElementById("hw-tc-stroke");
+        var len = stroke.getTotalLength();
+        gsap.set(stroke, { strokeDasharray: len, strokeDashoffset: len });
+        var t0 = CONFIG.animationIn ? 0.3 : 0;
+        if (CONFIG.animationIn) {
+          tl.to(stroke, { strokeDashoffset: 0, duration: 0.8, ease: "power2.inOut" }, t0);
+          tl.to("#hw-tc-fill", { opacity: 0.94, duration: 0.4, ease: "power2.out" }, t0 + 0.55);
+        } else {
+          gsap.set(stroke, { strokeDashoffset: 0 });
+          gsap.set("#hw-tc-fill", { opacity: 0.94 });
+        }
+        var chars = text.querySelectorAll(".ch");
+        var delay = Math.min(CONFIG.typeCharDelay, 1.8 / Math.max(1, chars.length));
+        tl.to(chars, { opacity: 1, duration: 0.02, stagger: delay, ease: "none" }, t0 + 0.9);
+
+        if (CONFIG.boil.enabled) {
+          window.hwBoil(tl, "#hw-tc-wrap", {
+            amp: CONFIG.boil.amp,
+            rot: CONFIG.boil.rot,
+            frameDrop: CONFIG.boil.frameDrop,
+            seed: CONFIG.seed,
+          });
+        }
+
+        if (CONFIG.animationOut) {
+          tl.to(wrap, { opacity: 0, duration: OUT, ease: "power2.in" }, DUR - OUT - 0.05);
+        }
+        tl.set("#hw-tc-root", { visibility: "hidden" }, DUR - 0.02);
+
+        window.__timelines["hw-text-cloud"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/hw-title/assets/fonts/Caveat-700-latin.woff2 b/docs/public/catalog/blocks/hw-title/assets/fonts/Caveat-700-latin.woff2
new file mode 100644
index 0000000000..5a3423426f
Binary files /dev/null and b/docs/public/catalog/blocks/hw-title/assets/fonts/Caveat-700-latin.woff2 differ
diff --git a/docs/public/catalog/blocks/hw-title/demo.html b/docs/public/catalog/blocks/hw-title/demo.html
new file mode 100644
index 0000000000..9a0cfa0234
--- /dev/null
+++ b/docs/public/catalog/blocks/hw-title/demo.html
@@ -0,0 +1,260 @@
+<!doctype html>
+<!-- Demo plate for the catalog preview. Identical to hw-title.html except the
+     root background, which is opaque here so the transparent overlay reads.
+     Not installed by `hyperframes add` - registry-item.json lists hw-title.html only. -->
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      @font-face {
+        font-family: "Caveat";
+        src: url("assets/fonts/Caveat-700-latin.woff2") format("woff2");
+        font-weight: 700;
+        font-display: block;
+      }
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #17161a;
+        overflow: hidden;
+      }
+      #hw-t-root {
+        /* ---- hw tokens ---- */
+        --hw-font-print: "Caveat", cursive;
+        --hw-font-script: "Caveat", cursive;
+        --hw-ink: #f4f2ec;
+        --hw-ink-dark: #26241f;
+        --hw-accent-warm: #ffb020;
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent; /* overlays footage or a board */
+        font-family: var(--hw-font-print, "Caveat", cursive);
+      }
+      #hw-t-wrap {
+        position: absolute;
+        pointer-events: none;
+      }
+      #hw-t-line {
+        font-weight: 700;
+        line-height: 1.1;
+        white-space: nowrap;
+        text-shadow: 0 2px 18px rgba(0, 0, 0, 0.4);
+      }
+      #hw-t-line .w {
+        display: inline;
+      }
+      #hw-t-under {
+        overflow: visible;
+        display: block;
+      }
+      #hw-t-under path {
+        fill: none;
+        stroke: var(--hw-accent-warm);
+        stroke-width: 7;
+        stroke-linecap: round;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="hw-t-root"
+      data-composition-id="hw-title"
+      data-start="0"
+      data-duration="6"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="hw-t-wrap">
+        <div id="hw-t-line"></div>
+        <svg id="hw-t-under" width="10" height="34"><path id="hw-t-under-path"></path></svg>
+      </div>
+      <div
+        id="hw-t-drv"
+        class="clip"
+        data-start="0"
+        data-duration="6"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- published parameters ----
+           Handwritten title with the highlight-sweep scalar (the shared
+           mk-callout-highlight mechanic) + squiggle underline + the boil.
+           Demonstrates the dispatcher composing sweep + boil on one
+           timeline (learning: one onUpdate — everything through hwOnUpdate). */
+        var CONFIG = {
+          text: "shine like the star you are",
+          fontSize: 120,
+          scheme: "chalk", // "chalk" (white, over footage) | "ink" (dark, boards)
+          sweep: { enabled: true, start: 0.8, end: 3.2 },
+          underline: { enabled: true, wobble: 6 },
+          boil: { enabled: true, amp: 1.4, rot: 0.3, frameDrop: 3 },
+          seed: 8,
+          x: null, // null = centered
+          y: null,
+          animationIn: true,
+          animationOut: true,
+        };
+
+        var DUR = 6;
+        function clamp(v, lo, hi) {
+          return Math.min(hi, Math.max(lo, v));
+        }
+        var IN = clamp(DUR * 0.08, 0.3, 0.8);
+        var OUT = clamp(DUR * 0.06, 0.25, 0.6);
+
+        /* hw family runtime */
+        window.hwOnUpdate = function (tl, fn) {
+          if (!tl.__hwRenders) {
+            tl.__hwRenders = [];
+            tl.eventCallback("onUpdate", function () {
+              for (var i = 0; i < tl.__hwRenders.length; i++) tl.__hwRenders[i]();
+            });
+          }
+          tl.__hwRenders.push(fn);
+          fn();
+        };
+        window.hwHash = function (n, seed) {
+          var x = Math.sin(n * 127.1 + (seed || 1) * 311.7) * 43758.5453;
+          return (x - Math.floor(x)) * 2 - 1;
+        };
+        window.hwBoil = function (tl, target, opts) {
+          opts = opts || {};
+          var amp = opts.amp !== undefined ? opts.amp : 1.6;
+          var rot = opts.rot !== undefined ? opts.rot : 0.5;
+          var fps = opts.fps || 30;
+          var drop = opts.frameDrop || 3;
+          var seed = opts.seed || 1;
+          var els = gsap.utils.toArray(target);
+          window.hwOnUpdate(tl, function () {
+            var step = Math.floor((tl.time() * fps) / drop);
+            for (var i = 0; i < els.length; i++) {
+              gsap.set(els[i], {
+                x: window.hwHash(step * 3 + i * 97, seed) * amp,
+                y: window.hwHash(step * 3 + 1 + i * 97, seed) * amp,
+                rotation: (opts.baseRot || 0) + window.hwHash(step * 3 + 2 + i * 97, seed) * rot,
+              });
+            }
+          });
+        };
+
+        var FULL = CONFIG.scheme === "ink" ? "#26241f" : "#f4f2ec";
+        var FAINT = CONFIG.scheme === "ink" ? "rgba(38,36,31,0.3)" : "rgba(244,242,236,0.32)";
+
+        var wrap = document.getElementById("hw-t-wrap");
+        var line = document.getElementById("hw-t-line");
+        line.style.fontSize = CONFIG.fontSize + "px";
+
+        /* word spans */
+        var wordEls = [];
+        CONFIG.text.split(/\s+/).forEach(function (w, i) {
+          if (i > 0) line.appendChild(document.createTextNode(" "));
+          var span = document.createElement("span");
+          span.className = "w";
+          span.textContent = w;
+          span.style.color = CONFIG.sweep.enabled ? FAINT : FULL;
+          line.appendChild(span);
+          wordEls.push(span);
+        });
+
+        /* measure + position; build squiggle underline to match width */
+        var rect = line.getBoundingClientRect();
+        wrap.style.left =
+          (CONFIG.x === null ? Math.round((1920 - rect.width) / 2) : CONFIG.x) + "px";
+        wrap.style.top =
+          (CONFIG.y === null ? Math.round((1080 - rect.height) / 2) - 20 : CONFIG.y) + "px";
+
+        var underPath = document.getElementById("hw-t-under-path");
+        if (CONFIG.underline.enabled) {
+          var uw = Math.round(rect.width);
+          var svg = document.getElementById("hw-t-under");
+          svg.setAttribute("width", uw);
+          svg.setAttribute("viewBox", "0 0 " + uw + " 34");
+          var segs = Math.max(6, Math.round(uw / 90));
+          var d = "M 2 " + (16 + window.hwHash(0, CONFIG.seed) * 4).toFixed(1);
+          for (var i = 1; i <= segs; i++) {
+            var x = (uw / segs) * i;
+            var y = 16 + window.hwHash(i * 5 + 1, CONFIG.seed) * CONFIG.underline.wobble;
+            var cxp = x - uw / segs / 2 + window.hwHash(i * 5 + 2, CONFIG.seed) * 10;
+            var cyp = 16 + (i % 2 ? -1 : 1) * (8 + window.hwHash(i * 5 + 3, CONFIG.seed) * 4);
+            d +=
+              " Q " +
+              cxp.toFixed(1) +
+              " " +
+              cyp.toFixed(1) +
+              " " +
+              x.toFixed(1) +
+              " " +
+              y.toFixed(1);
+          }
+          underPath.setAttribute("d", d);
+        } else {
+          document.getElementById("hw-t-under").style.display = "none";
+        }
+
+        var tl = gsap.timeline({ paused: true });
+
+        if (CONFIG.animationIn) {
+          gsap.set(wrap, { opacity: 0 });
+          tl.to(wrap, { opacity: 1, duration: IN, ease: "power2.out" }, 0.1);
+        }
+
+        /* the sweep scalar — registered through the dispatcher so it
+           coexists with the boil on the same timeline */
+        if (CONFIG.sweep.enabled) {
+          var mix = gsap.utils.interpolate(FAINT, FULL);
+          var st = { p: 0 };
+          window.hwOnUpdate(tl, function () {
+            var k = st.p * wordEls.length;
+            for (var i = 0; i < wordEls.length; i++) {
+              var f = Math.max(0, Math.min(1, k - i));
+              wordEls[i].style.color = mix(f);
+            }
+          });
+          tl.to(
+            st,
+            { p: 1, duration: CONFIG.sweep.end - CONFIG.sweep.start, ease: "none" },
+            CONFIG.sweep.start,
+          );
+        }
+
+        /* underline draws as the sweep lands */
+        if (CONFIG.underline.enabled) {
+          var len = underPath.getTotalLength();
+          gsap.set(underPath, { strokeDasharray: len, strokeDashoffset: len });
+          var uAt = CONFIG.sweep.enabled ? CONFIG.sweep.end - 0.2 : 0.8;
+          tl.to(underPath, { strokeDashoffset: 0, duration: 0.7, ease: "power2.inOut" }, uAt);
+        }
+
+        if (CONFIG.boil.enabled) {
+          window.hwBoil(tl, "#hw-t-wrap", {
+            amp: CONFIG.boil.amp,
+            rot: CONFIG.boil.rot,
+            frameDrop: CONFIG.boil.frameDrop,
+            seed: CONFIG.seed,
+          });
+        }
+
+        if (CONFIG.animationOut) {
+          tl.to(wrap, { opacity: 0, duration: OUT, ease: "power2.in" }, DUR - OUT - 0.05);
+        }
+        tl.set("#hw-t-root", { visibility: "hidden" }, DUR - 0.02);
+
+        window.__timelines["hw-title"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/hw-title/hw-title.html b/docs/public/catalog/blocks/hw-title/hw-title.html
new file mode 100644
index 0000000000..9dd74677f5
--- /dev/null
+++ b/docs/public/catalog/blocks/hw-title/hw-title.html
@@ -0,0 +1,257 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      @font-face {
+        font-family: "Caveat";
+        src: url("assets/fonts/Caveat-700-latin.woff2") format("woff2");
+        font-weight: 700;
+        font-display: block;
+      }
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      #hw-t-root {
+        /* ---- hw tokens ---- */
+        --hw-font-print: "Caveat", cursive;
+        --hw-font-script: "Caveat", cursive;
+        --hw-ink: #f4f2ec;
+        --hw-ink-dark: #26241f;
+        --hw-accent-warm: #ffb020;
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent; /* overlays footage or a board */
+        font-family: var(--hw-font-print, "Caveat", cursive);
+      }
+      #hw-t-wrap {
+        position: absolute;
+        pointer-events: none;
+      }
+      #hw-t-line {
+        font-weight: 700;
+        line-height: 1.1;
+        white-space: nowrap;
+        text-shadow: 0 2px 18px rgba(0, 0, 0, 0.4);
+      }
+      #hw-t-line .w {
+        display: inline;
+      }
+      #hw-t-under {
+        overflow: visible;
+        display: block;
+      }
+      #hw-t-under path {
+        fill: none;
+        stroke: var(--hw-accent-warm);
+        stroke-width: 7;
+        stroke-linecap: round;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="hw-t-root"
+      data-composition-id="hw-title"
+      data-start="0"
+      data-duration="6"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="hw-t-wrap">
+        <div id="hw-t-line"></div>
+        <svg id="hw-t-under" width="10" height="34"><path id="hw-t-under-path"></path></svg>
+      </div>
+      <div
+        id="hw-t-drv"
+        class="clip"
+        data-start="0"
+        data-duration="6"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- published parameters ----
+           Handwritten title with the highlight-sweep scalar (the shared
+           mk-callout-highlight mechanic) + squiggle underline + the boil.
+           Demonstrates the dispatcher composing sweep + boil on one
+           timeline (learning: one onUpdate — everything through hwOnUpdate). */
+        var CONFIG = {
+          text: "shine like the star you are",
+          fontSize: 120,
+          scheme: "chalk", // "chalk" (white, over footage) | "ink" (dark, boards)
+          sweep: { enabled: true, start: 0.8, end: 3.2 },
+          underline: { enabled: true, wobble: 6 },
+          boil: { enabled: true, amp: 1.4, rot: 0.3, frameDrop: 3 },
+          seed: 8,
+          x: null, // null = centered
+          y: null,
+          animationIn: true,
+          animationOut: true,
+        };
+
+        var DUR = 6;
+        function clamp(v, lo, hi) {
+          return Math.min(hi, Math.max(lo, v));
+        }
+        var IN = clamp(DUR * 0.08, 0.3, 0.8);
+        var OUT = clamp(DUR * 0.06, 0.25, 0.6);
+
+        /* hw family runtime */
+        window.hwOnUpdate = function (tl, fn) {
+          if (!tl.__hwRenders) {
+            tl.__hwRenders = [];
+            tl.eventCallback("onUpdate", function () {
+              for (var i = 0; i < tl.__hwRenders.length; i++) tl.__hwRenders[i]();
+            });
+          }
+          tl.__hwRenders.push(fn);
+          fn();
+        };
+        window.hwHash = function (n, seed) {
+          var x = Math.sin(n * 127.1 + (seed || 1) * 311.7) * 43758.5453;
+          return (x - Math.floor(x)) * 2 - 1;
+        };
+        window.hwBoil = function (tl, target, opts) {
+          opts = opts || {};
+          var amp = opts.amp !== undefined ? opts.amp : 1.6;
+          var rot = opts.rot !== undefined ? opts.rot : 0.5;
+          var fps = opts.fps || 30;
+          var drop = opts.frameDrop || 3;
+          var seed = opts.seed || 1;
+          var els = gsap.utils.toArray(target);
+          window.hwOnUpdate(tl, function () {
+            var step = Math.floor((tl.time() * fps) / drop);
+            for (var i = 0; i < els.length; i++) {
+              gsap.set(els[i], {
+                x: window.hwHash(step * 3 + i * 97, seed) * amp,
+                y: window.hwHash(step * 3 + 1 + i * 97, seed) * amp,
+                rotation: (opts.baseRot || 0) + window.hwHash(step * 3 + 2 + i * 97, seed) * rot,
+              });
+            }
+          });
+        };
+
+        var FULL = CONFIG.scheme === "ink" ? "#26241f" : "#f4f2ec";
+        var FAINT = CONFIG.scheme === "ink" ? "rgba(38,36,31,0.3)" : "rgba(244,242,236,0.32)";
+
+        var wrap = document.getElementById("hw-t-wrap");
+        var line = document.getElementById("hw-t-line");
+        line.style.fontSize = CONFIG.fontSize + "px";
+
+        /* word spans */
+        var wordEls = [];
+        CONFIG.text.split(/\s+/).forEach(function (w, i) {
+          if (i > 0) line.appendChild(document.createTextNode(" "));
+          var span = document.createElement("span");
+          span.className = "w";
+          span.textContent = w;
+          span.style.color = CONFIG.sweep.enabled ? FAINT : FULL;
+          line.appendChild(span);
+          wordEls.push(span);
+        });
+
+        /* measure + position; build squiggle underline to match width */
+        var rect = line.getBoundingClientRect();
+        wrap.style.left =
+          (CONFIG.x === null ? Math.round((1920 - rect.width) / 2) : CONFIG.x) + "px";
+        wrap.style.top =
+          (CONFIG.y === null ? Math.round((1080 - rect.height) / 2) - 20 : CONFIG.y) + "px";
+
+        var underPath = document.getElementById("hw-t-under-path");
+        if (CONFIG.underline.enabled) {
+          var uw = Math.round(rect.width);
+          var svg = document.getElementById("hw-t-under");
+          svg.setAttribute("width", uw);
+          svg.setAttribute("viewBox", "0 0 " + uw + " 34");
+          var segs = Math.max(6, Math.round(uw / 90));
+          var d = "M 2 " + (16 + window.hwHash(0, CONFIG.seed) * 4).toFixed(1);
+          for (var i = 1; i <= segs; i++) {
+            var x = (uw / segs) * i;
+            var y = 16 + window.hwHash(i * 5 + 1, CONFIG.seed) * CONFIG.underline.wobble;
+            var cxp = x - uw / segs / 2 + window.hwHash(i * 5 + 2, CONFIG.seed) * 10;
+            var cyp = 16 + (i % 2 ? -1 : 1) * (8 + window.hwHash(i * 5 + 3, CONFIG.seed) * 4);
+            d +=
+              " Q " +
+              cxp.toFixed(1) +
+              " " +
+              cyp.toFixed(1) +
+              " " +
+              x.toFixed(1) +
+              " " +
+              y.toFixed(1);
+          }
+          underPath.setAttribute("d", d);
+        } else {
+          document.getElementById("hw-t-under").style.display = "none";
+        }
+
+        var tl = gsap.timeline({ paused: true });
+
+        if (CONFIG.animationIn) {
+          gsap.set(wrap, { opacity: 0 });
+          tl.to(wrap, { opacity: 1, duration: IN, ease: "power2.out" }, 0.1);
+        }
+
+        /* the sweep scalar — registered through the dispatcher so it
+           coexists with the boil on the same timeline */
+        if (CONFIG.sweep.enabled) {
+          var mix = gsap.utils.interpolate(FAINT, FULL);
+          var st = { p: 0 };
+          window.hwOnUpdate(tl, function () {
+            var k = st.p * wordEls.length;
+            for (var i = 0; i < wordEls.length; i++) {
+              var f = Math.max(0, Math.min(1, k - i));
+              wordEls[i].style.color = mix(f);
+            }
+          });
+          tl.to(
+            st,
+            { p: 1, duration: CONFIG.sweep.end - CONFIG.sweep.start, ease: "none" },
+            CONFIG.sweep.start,
+          );
+        }
+
+        /* underline draws as the sweep lands */
+        if (CONFIG.underline.enabled) {
+          var len = underPath.getTotalLength();
+          gsap.set(underPath, { strokeDasharray: len, strokeDashoffset: len });
+          var uAt = CONFIG.sweep.enabled ? CONFIG.sweep.end - 0.2 : 0.8;
+          tl.to(underPath, { strokeDashoffset: 0, duration: 0.7, ease: "power2.inOut" }, uAt);
+        }
+
+        if (CONFIG.boil.enabled) {
+          window.hwBoil(tl, "#hw-t-wrap", {
+            amp: CONFIG.boil.amp,
+            rot: CONFIG.boil.rot,
+            frameDrop: CONFIG.boil.frameDrop,
+            seed: CONFIG.seed,
+          });
+        }
+
+        if (CONFIG.animationOut) {
+          tl.to(wrap, { opacity: 0, duration: OUT, ease: "power2.in" }, DUR - OUT - 0.05);
+        }
+        tl.set("#hw-t-root", { visibility: "hidden" }, DUR - 0.02);
+
+        window.__timelines["hw-title"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/instagram-follow/assets/avatar.jpg b/docs/public/catalog/blocks/instagram-follow/assets/avatar.jpg
new file mode 100644
index 0000000000..d5ca2e945b
Binary files /dev/null and b/docs/public/catalog/blocks/instagram-follow/assets/avatar.jpg differ
diff --git a/docs/public/catalog/blocks/instagram-follow/instagram-follow.html b/docs/public/catalog/blocks/instagram-follow/instagram-follow.html
new file mode 100644
index 0000000000..d168f4c4b4
--- /dev/null
+++ b/docs/public/catalog/blocks/instagram-follow/instagram-follow.html
@@ -0,0 +1,288 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&display=block"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+      }
+      html,
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      body {
+        width: 1080px;
+        height: 1920px;
+        font-family: "DM Sans", sans-serif;
+      }
+
+      [data-composition-id="instagram-follow"] .lower-third {
+        position: absolute;
+        bottom: 160px;
+        left: 50%;
+        transform: translateX(-50%);
+        display: flex;
+        align-items: center;
+        gap: 30px;
+        background: #1a1a1a;
+        border-radius: 75px;
+        padding: 25px 40px 25px 25px;
+        box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
+      }
+
+      [data-composition-id="instagram-follow"] .avatar {
+        width: 120px;
+        height: 120px;
+        border-radius: 50%;
+        object-fit: cover;
+        flex-shrink: 0;
+        border: 3px solid #333;
+      }
+
+      [data-composition-id="instagram-follow"] .profile-info {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        margin-right: 20px;
+      }
+
+      [data-composition-id="instagram-follow"] .name-row {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+      }
+
+      [data-composition-id="instagram-follow"] .display-name {
+        font-size: 42px;
+        font-weight: 700;
+        color: #ffffff;
+        line-height: 1.3;
+        letter-spacing: -0.01em;
+      }
+
+      [data-composition-id="instagram-follow"] .verified-badge {
+        width: 34px;
+        height: 34px;
+        flex-shrink: 0;
+      }
+
+      [data-composition-id="instagram-follow"] .verified-badge svg {
+        width: 34px;
+        height: 34px;
+        display: block;
+      }
+
+      [data-composition-id="instagram-follow"] .handle {
+        font-size: 28px;
+        font-weight: 400;
+        color: #a0a0a0;
+        line-height: 1.3;
+      }
+
+      [data-composition-id="instagram-follow"] .follower-count {
+        font-size: 25px;
+        font-weight: 400;
+        color: #737373;
+        line-height: 1.3;
+      }
+
+      [data-composition-id="instagram-follow"] .follow-btn {
+        position: relative;
+        width: 250px;
+        height: 80px;
+        border-radius: 40px;
+        background: #0095f6;
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+      }
+
+      [data-composition-id="instagram-follow"] .btn-text {
+        position: absolute;
+        font-family: "DM Sans", sans-serif;
+        font-size: 30px;
+        font-weight: 700;
+        color: #ffffff;
+        letter-spacing: 0.02em;
+        white-space: nowrap;
+      }
+
+      [data-composition-id="instagram-follow"] .btn-text-follow {
+        opacity: 1;
+      }
+
+      [data-composition-id="instagram-follow"] .btn-text-following {
+        opacity: 0;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+
+      [data-composition-id="instagram-follow"] .chevron-icon {
+        display: inline-block;
+        width: 18px;
+        height: 18px;
+      }
+
+      [data-composition-id="instagram-follow"] .chevron-icon svg {
+        width: 18px;
+        height: 18px;
+        display: block;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="instagram-follow"
+      data-width="1080"
+      data-height="1920"
+      data-start="0"
+      data-duration="4.5"
+    >
+      <div
+        id="card"
+        class="clip lower-third"
+        data-start="0"
+        data-duration="4.5"
+        data-track-index="0"
+      >
+        <img class="avatar" src="assets/avatar.jpg" alt="HeyGen" crossorigin="anonymous" />
+        <div class="profile-info">
+          <div class="name-row">
+            <div class="display-name">HeyGen</div>
+            <span class="verified-badge"
+              ><svg viewBox="0 0 40 40" fill="none">
+                <circle cx="20" cy="20" r="20" fill="#0095F6" />
+                <path d="M17.5 27.5L10 20l2.5-2.5 5 5 10-10L30 15 17.5 27.5z" fill="#fff" /></svg
+            ></span>
+          </div>
+          <div class="handle">@heygen_official</div>
+          <div class="follower-count">47.5K followers</div>
+        </div>
+        <div id="follow-btn" class="follow-btn">
+          <span id="btn-follow" class="btn-text btn-text-follow">Follow</span>
+          <span id="btn-following" class="btn-text btn-text-following">
+            <span>Following</span>
+            <span class="chevron-icon"
+              ><svg
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="#fff"
+                stroke-width="3"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <polyline points="6 9 12 15 18 9"></polyline></svg
+            ></span>
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      var tl = gsap.timeline({ paused: true });
+
+      var card = document.getElementById("card");
+      var btn = document.getElementById("follow-btn");
+      var textFollow = document.getElementById("btn-follow");
+      var textFollowing = document.getElementById("btn-following");
+
+      // Start off-screen
+      gsap.set(card, { y: 300, opacity: 0 });
+
+      // Slide in from bottom
+      tl.to(
+        card,
+        {
+          y: 0,
+          opacity: 1,
+          duration: 0.5,
+          ease: "power3.out",
+        },
+        0.1,
+      );
+
+      // Hold, then button press-in
+      tl.to(
+        btn,
+        {
+          scale: 0.92,
+          duration: 0.15,
+          ease: "power2.out",
+        },
+        1.0,
+      );
+
+      // Button release with spring bounce
+      tl.to(
+        btn,
+        {
+          scale: 1,
+          duration: 0.4,
+          ease: "elastic.out(1, 0.4)",
+        },
+        1.15,
+      );
+
+      // Button background: IG blue → dark gray
+      tl.to(
+        btn,
+        {
+          backgroundColor: "#2f2f2f",
+          duration: 0.12,
+          ease: "none",
+        },
+        1.15,
+      );
+
+      // Fade out "Follow", fade in "Following"
+      tl.to(
+        textFollow,
+        {
+          opacity: 0,
+          duration: 0.08,
+          ease: "none",
+        },
+        1.15,
+      );
+
+      tl.to(
+        textFollowing,
+        {
+          opacity: 1,
+          duration: 0.08,
+          ease: "none",
+        },
+        1.18,
+      );
+
+      // Slide out to bottom
+      tl.to(
+        card,
+        {
+          y: 300,
+          opacity: 0,
+          duration: 0.25,
+          ease: "power3.in",
+        },
+        3.8,
+      );
+
+      window.__timelines["instagram-follow"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/ios26-liquid-glass/assets/icons/books.jpg b/docs/public/catalog/blocks/ios26-liquid-glass/assets/icons/books.jpg
new file mode 100644
index 0000000000..a06d0b265e
Binary files /dev/null and b/docs/public/catalog/blocks/ios26-liquid-glass/assets/icons/books.jpg differ
diff --git a/docs/public/catalog/blocks/ios26-liquid-glass/assets/icons/brave.jpg b/docs/public/catalog/blocks/ios26-liquid-glass/assets/icons/brave.jpg
new file mode 100644
index 0000000000..4735f43773
Binary files /dev/null and b/docs/public/catalog/blocks/ios26-liquid-glass/assets/icons/brave.jpg differ
diff --git a/docs/public/catalog/blocks/ios26-liquid-glass/assets/icons/calendar.jpg b/docs/public/catalog/blocks/ios26-liquid-glass/assets/icons/calendar.jpg
new file mode 100644
index 0000000000..8d2571c5ad
Binary files /dev/null and b/docs/public/catalog/blocks/ios26-liquid-glass/assets/icons/calendar.jpg differ
diff --git a/docs/public/catalog/blocks/ios26-liquid-glass/assets/icons/chatgpt.jpg b/docs/public/catalog/blocks/ios26-liquid-glass/assets/icons/chatgpt.jpg
new file mode 100644
index 0000000000..e00ea5c9cc
Binary files /dev/null and b/docs/public/catalog/blocks/ios26-liquid-glass/assets/icons/chatgpt.jpg differ
diff --git a/docs/public/catalog/blocks/ios26-liquid-glass/assets/icons/contacts.jpg b/docs/public/catalog/blocks/ios26-liquid-glass/assets/icons/contacts.jpg
new file mode 100644
index 0000000000..b24bdd1b1e
Binary files /dev/null and b/docs/public/catalog/blocks/ios26-liquid-glass/assets/icons/contacts.jpg differ
diff --git a/docs/public/catalog/blocks/ios26-liquid-glass/assets/icons/files.jpg b/docs/public/catalog/blocks/ios26-liquid-glass/assets/icons/files.jpg
new file mode 100644
index 0000000000..3fe8efcde5
Binary files /dev/null and b/docs/public/catalog/blocks/ios26-liquid-glass/assets/icons/files.jpg differ
diff --git a/docs/public/catalog/blocks/ios26-liquid-glass/assets/icons/find-my.jpg b/docs/public/catalog/blocks/ios26-liquid-glass/assets/icons/find-my.jpg
new file mode 100644
index 0000000000..3279638836
Binary files /dev/null and b/docs/public/catalog/blocks/ios26-liquid-glass/assets/icons/find-my.jpg differ
diff --git a/docs/public/catalog/blocks/ios26-liquid-glass/assets/icons/fitness.jpg b/docs/public/catalog/blocks/ios26-liquid-glass/assets/icons/fitness.jpg
new file mode 100644
index 0000000000..a16da13a34
Binary files /dev/null and b/docs/public/catalog/blocks/ios26-liquid-glass/assets/icons/fitness.jpg differ
diff --git a/docs/public/catalog/blocks/ios26-liquid-glass/assets/icons/gmail.jpg b/docs/public/catalog/blocks/ios26-liquid-glass/assets/icons/gmail.jpg
new file mode 100644
index 0000000000..ae9c23d192
Binary files /dev/null and b/docs/public/catalog/blocks/ios26-liquid-glass/assets/icons/gmail.jpg differ
diff --git a/docs/public/catalog/blocks/ios26-liquid-glass/assets/icons/home.jpg b/docs/public/catalog/blocks/ios26-liquid-glass/assets/icons/home.jpg
new file mode 100644
index 0000000000..816d5ee0e8
Binary files /dev/null and b/docs/public/catalog/blocks/ios26-liquid-glass/assets/icons/home.jpg differ
diff --git a/docs/public/catalog/blocks/ios26-liquid-glass/assets/icons/instagram.jpg b/docs/public/catalog/blocks/ios26-liquid-glass/assets/icons/instagram.jpg
new file mode 100644
index 0000000000..c3d9cccbb5
Binary files /dev/null and b/docs/public/catalog/blocks/ios26-liquid-glass/assets/icons/instagram.jpg differ
diff --git a/docs/public/catalog/blocks/ios26-liquid-glass/assets/icons/itunes-store.jpg b/docs/public/catalog/blocks/ios26-liquid-glass/assets/icons/itunes-store.jpg
new file mode 100644
index 0000000000..886c240ab3
Binary files /dev/null and b/docs/public/catalog/blocks/ios26-liquid-glass/assets/icons/itunes-store.jpg differ
diff --git a/docs/public/catalog/blocks/ios26-liquid-glass/assets/icons/messages.jpg b/docs/public/catalog/blocks/ios26-liquid-glass/assets/icons/messages.jpg
new file mode 100644
index 0000000000..bfd11fcaaa
Binary files /dev/null and b/docs/public/catalog/blocks/ios26-liquid-glass/assets/icons/messages.jpg differ
diff --git a/docs/public/catalog/blocks/ios26-liquid-glass/assets/icons/music.jpg b/docs/public/catalog/blocks/ios26-liquid-glass/assets/icons/music.jpg
new file mode 100644
index 0000000000..ea48e518c6
Binary files /dev/null and b/docs/public/catalog/blocks/ios26-liquid-glass/assets/icons/music.jpg differ
diff --git a/docs/public/catalog/blocks/ios26-liquid-glass/assets/icons/notify-messages.jpg b/docs/public/catalog/blocks/ios26-liquid-glass/assets/icons/notify-messages.jpg
new file mode 100644
index 0000000000..bfd11fcaaa
Binary files /dev/null and b/docs/public/catalog/blocks/ios26-liquid-glass/assets/icons/notify-messages.jpg differ
diff --git a/docs/public/catalog/blocks/ios26-liquid-glass/assets/icons/phone.jpg b/docs/public/catalog/blocks/ios26-liquid-glass/assets/icons/phone.jpg
new file mode 100644
index 0000000000..596d527624
Binary files /dev/null and b/docs/public/catalog/blocks/ios26-liquid-glass/assets/icons/phone.jpg differ
diff --git a/docs/public/catalog/blocks/ios26-liquid-glass/assets/icons/photos.jpg b/docs/public/catalog/blocks/ios26-liquid-glass/assets/icons/photos.jpg
new file mode 100644
index 0000000000..994653ef38
Binary files /dev/null and b/docs/public/catalog/blocks/ios26-liquid-glass/assets/icons/photos.jpg differ
diff --git a/docs/public/catalog/blocks/ios26-liquid-glass/assets/icons/proton-mail.jpg b/docs/public/catalog/blocks/ios26-liquid-glass/assets/icons/proton-mail.jpg
new file mode 100644
index 0000000000..e710fc2418
Binary files /dev/null and b/docs/public/catalog/blocks/ios26-liquid-glass/assets/icons/proton-mail.jpg differ
diff --git a/docs/public/catalog/blocks/ios26-liquid-glass/assets/icons/revolut.jpg b/docs/public/catalog/blocks/ios26-liquid-glass/assets/icons/revolut.jpg
new file mode 100644
index 0000000000..da674ae8c3
Binary files /dev/null and b/docs/public/catalog/blocks/ios26-liquid-glass/assets/icons/revolut.jpg differ
diff --git a/docs/public/catalog/blocks/ios26-liquid-glass/assets/icons/slack.jpg b/docs/public/catalog/blocks/ios26-liquid-glass/assets/icons/slack.jpg
new file mode 100644
index 0000000000..92116c7f80
Binary files /dev/null and b/docs/public/catalog/blocks/ios26-liquid-glass/assets/icons/slack.jpg differ
diff --git a/docs/public/catalog/blocks/ios26-liquid-glass/assets/icons/stocks.jpg b/docs/public/catalog/blocks/ios26-liquid-glass/assets/icons/stocks.jpg
new file mode 100644
index 0000000000..ad73252f40
Binary files /dev/null and b/docs/public/catalog/blocks/ios26-liquid-glass/assets/icons/stocks.jpg differ
diff --git a/docs/public/catalog/blocks/ios26-liquid-glass/assets/icons/translate.jpg b/docs/public/catalog/blocks/ios26-liquid-glass/assets/icons/translate.jpg
new file mode 100644
index 0000000000..236f696322
Binary files /dev/null and b/docs/public/catalog/blocks/ios26-liquid-glass/assets/icons/translate.jpg differ
diff --git a/docs/public/catalog/blocks/ios26-liquid-glass/assets/icons/watch.jpg b/docs/public/catalog/blocks/ios26-liquid-glass/assets/icons/watch.jpg
new file mode 100644
index 0000000000..3903507d07
Binary files /dev/null and b/docs/public/catalog/blocks/ios26-liquid-glass/assets/icons/watch.jpg differ
diff --git a/docs/public/catalog/blocks/ios26-liquid-glass/assets/icons/weather.jpg b/docs/public/catalog/blocks/ios26-liquid-glass/assets/icons/weather.jpg
new file mode 100644
index 0000000000..12311bd5b2
Binary files /dev/null and b/docs/public/catalog/blocks/ios26-liquid-glass/assets/icons/weather.jpg differ
diff --git a/docs/public/catalog/blocks/ios26-liquid-glass/assets/icons/whatsapp.jpg b/docs/public/catalog/blocks/ios26-liquid-glass/assets/icons/whatsapp.jpg
new file mode 100644
index 0000000000..24dc61dc17
Binary files /dev/null and b/docs/public/catalog/blocks/ios26-liquid-glass/assets/icons/whatsapp.jpg differ
diff --git a/docs/public/catalog/blocks/ios26-liquid-glass/assets/icons/x.jpg b/docs/public/catalog/blocks/ios26-liquid-glass/assets/icons/x.jpg
new file mode 100644
index 0000000000..2279b8c282
Binary files /dev/null and b/docs/public/catalog/blocks/ios26-liquid-glass/assets/icons/x.jpg differ
diff --git a/docs/public/catalog/blocks/ios26-liquid-glass/ios26-liquid-glass.html b/docs/public/catalog/blocks/ios26-liquid-glass/ios26-liquid-glass.html
new file mode 100644
index 0000000000..12a00efc01
--- /dev/null
+++ b/docs/public/catalog/blocks/ios26-liquid-glass/ios26-liquid-glass.html
@@ -0,0 +1,1342 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Devices Canvas — HTML-in-Canvas API Showcase</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/loaders/DRACOLoader.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/loaders/GLTFLoader.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #050508;
+        overflow: hidden;
+      }
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #050508;
+      }
+      .ios-home {
+        position: relative;
+        height: 844px;
+        overflow: hidden;
+        background: #010101;
+      }
+      .ios-wallpaper {
+        position: absolute;
+        inset: 0;
+        background:
+          radial-gradient(ellipse at 50% 50%, rgba(12, 16, 24, 0.96), transparent 31%),
+          radial-gradient(circle at 50% 54%, rgba(255, 255, 255, 0.06), transparent 8%),
+          linear-gradient(180deg, #020202, #000);
+      }
+      .ios-wallpaper::before,
+      .ios-wallpaper::after {
+        content: "";
+        position: absolute;
+        left: 92px;
+        top: 210px;
+        width: 210px;
+        height: 360px;
+        border-radius: 50% 50% 42% 46%;
+        border: 4px solid transparent;
+        background:
+          linear-gradient(#020202, #020202) padding-box,
+          conic-gradient(
+              from 215deg,
+              rgba(255, 255, 255, 0),
+              rgba(255, 255, 255, 0.92),
+              rgba(53, 131, 255, 0.92),
+              rgba(38, 255, 168, 0.8),
+              rgba(255, 63, 54, 0.72),
+              rgba(255, 255, 255, 0)
+            )
+            border-box;
+        filter: blur(0.35px) saturate(1.25);
+        opacity: 0.82;
+        transform: rotate(7deg);
+      }
+      .ios-wallpaper::after {
+        left: 118px;
+        top: 400px;
+        width: 140px;
+        height: 190px;
+        border-width: 3px;
+        opacity: 0.62;
+        transform: rotate(-27deg);
+      }
+      .ios-status {
+        position: relative;
+        z-index: 2;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 27px 30px 10px;
+        color: #f6f6f6;
+        font-size: 22px;
+        font-weight: 760;
+        letter-spacing: 0;
+        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
+      }
+      .ios-status-left,
+      .ios-status-right {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+      .ios-location {
+        display: grid;
+        place-items: center;
+        width: 18px;
+        height: 18px;
+        border-radius: 999px;
+        background: #2f80ed;
+        color: #fff;
+        font-size: 12px;
+        line-height: 1;
+      }
+      .ios-signal {
+        display: flex;
+        align-items: end;
+        gap: 3px;
+        height: 18px;
+      }
+      .ios-signal span {
+        width: 5px;
+        border-radius: 3px;
+        background: rgba(255, 255, 255, 0.92);
+      }
+      .ios-signal span:nth-child(1) {
+        height: 7px;
+      }
+      .ios-signal span:nth-child(2) {
+        height: 10px;
+      }
+      .ios-signal span:nth-child(3) {
+        height: 13px;
+      }
+      .ios-signal span:nth-child(4) {
+        height: 17px;
+        background: rgba(255, 255, 255, 0.48);
+      }
+      .ios-wifi {
+        position: relative;
+        width: 23px;
+        height: 17px;
+      }
+      .ios-wifi span {
+        position: absolute;
+        left: 50%;
+        border: 4px solid rgba(255, 255, 255, 0.94);
+        border-color: rgba(255, 255, 255, 0.94) transparent transparent transparent;
+        border-radius: 50%;
+        transform: translateX(-50%);
+      }
+      .ios-wifi span:nth-child(1) {
+        top: 0;
+        width: 28px;
+        height: 28px;
+      }
+      .ios-wifi span:nth-child(2) {
+        top: 6px;
+        width: 18px;
+        height: 18px;
+      }
+      .ios-wifi span:nth-child(3) {
+        top: 13px;
+        width: 7px;
+        height: 7px;
+        border-radius: 999px;
+        background: #fff;
+        border: 0;
+      }
+      .ios-battery {
+        position: relative;
+        min-width: 34px;
+        height: 21px;
+        padding: 1px 5px 0;
+        border-radius: 6px;
+        background: #59d768;
+        color: #fff;
+        font-size: 15px;
+        font-weight: 850;
+        line-height: 20px;
+      }
+      .ios-battery::after {
+        content: "";
+        position: absolute;
+        right: -3px;
+        top: 7px;
+        width: 3px;
+        height: 7px;
+        border-radius: 0 3px 3px 0;
+        background: rgba(255, 255, 255, 0.5);
+      }
+      .ios-app-grid {
+        position: relative;
+        z-index: 2;
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        gap: 14px 22px;
+        padding: 20px 28px 0;
+      }
+      .ios-app {
+        position: relative;
+        text-align: center;
+      }
+      .ios-app-icon,
+      .ios-dock-icon {
+        display: block;
+        object-fit: cover;
+        box-shadow:
+          0 8px 20px rgba(0, 0, 0, 0.34),
+          inset 0 1px 0 rgba(255, 255, 255, 0.24);
+        filter: grayscale(1) saturate(0.08) contrast(1.2) brightness(0.86);
+      }
+      .ios-app-icon {
+        width: 62px;
+        height: 62px;
+        margin: 0 auto 7px;
+        border-radius: 18px;
+      }
+      .ios-app-label {
+        color: #fff;
+        font-size: 13px;
+        font-weight: 640;
+        line-height: 1.1;
+        text-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
+        white-space: nowrap;
+      }
+      .ios-badge {
+        position: absolute;
+        top: -8px;
+        right: -8px;
+        min-width: 24px;
+        padding: 3px 7px;
+        border-radius: 999px;
+        background: #f7f7f7;
+        color: #303030;
+        font-size: 15px;
+        font-weight: 700;
+        font-variant-numeric: tabular-nums;
+        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.32);
+      }
+      .ios-search-pill {
+        position: absolute;
+        z-index: 2;
+        left: 50%;
+        bottom: 105px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 7px;
+        width: 116px;
+        padding: 9px 0;
+        border-radius: 19px;
+        background: rgba(255, 255, 255, 0.11);
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        color: rgba(255, 255, 255, 0.72);
+        font-size: 15px;
+        font-weight: 650;
+        text-align: center;
+        transform: translateX(-50%);
+        box-shadow:
+          inset 0 1px 0 rgba(255, 255, 255, 0.17),
+          0 10px 22px rgba(0, 0, 0, 0.34);
+      }
+      .ios-search-pill::before {
+        content: "";
+        width: 12px;
+        height: 12px;
+        border: 3px solid rgba(255, 255, 255, 0.72);
+        border-radius: 999px;
+        box-sizing: border-box;
+      }
+      .ios-search-pill::after {
+        content: "";
+        width: 7px;
+        height: 3px;
+        border-radius: 999px;
+        background: rgba(255, 255, 255, 0.72);
+        transform: rotate(45deg) translate(-6px, 6px);
+        margin-left: -10px;
+      }
+      .ios-notification-layer {
+        display: none;
+        position: absolute;
+        z-index: 5;
+        top: 82px;
+        left: 15px;
+        right: 15px;
+        height: 222px;
+        pointer-events: none;
+      }
+      .ios-notification-card {
+        position: absolute;
+        left: 0;
+        right: 0;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        min-height: 60px;
+        padding: 9px 12px;
+        border-radius: 23px;
+        border: 1px solid rgba(255, 255, 255, 0.27);
+        background:
+          linear-gradient(135deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.13)),
+          rgba(140, 150, 164, 0.52);
+        -webkit-backdrop-filter: blur(22px) saturate(1.35);
+        backdrop-filter: blur(22px) saturate(1.35);
+        box-shadow:
+          inset 0 1px 0 rgba(255, 255, 255, 0.46),
+          0 14px 34px rgba(0, 0, 0, 0.38);
+        opacity: 0;
+        transform: translateY(-120px) scale(0.98);
+      }
+      .ios-notification-card:nth-child(2) {
+        top: 68px;
+      }
+      .ios-notification-card:nth-child(3) {
+        top: 136px;
+      }
+      .ios-notification-icon {
+        width: 38px;
+        height: 38px;
+        border-radius: 11px;
+        background-position: center;
+        background-size: cover;
+        flex: 0 0 auto;
+      }
+      .ios-notification-messages {
+        background-image: url("assets/icons/notify-messages.jpg");
+      }
+      .ios-notification-hyperframes {
+        background-image: url("assets/icons/slack.jpg");
+      }
+      .ios-notification-gmail {
+        background-image: url("assets/icons/gmail.jpg");
+      }
+      .ios-icon-preload {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        opacity: 0;
+        pointer-events: none;
+      }
+      .ios-notification-copy {
+        min-width: 0;
+        flex: 1;
+      }
+      .ios-notification-title {
+        display: flex;
+        justify-content: space-between;
+        gap: 8px;
+        color: #fff;
+        font-size: 12px;
+        font-weight: 750;
+      }
+      .ios-notification-body {
+        margin-top: 2px;
+        color: rgba(255, 255, 255, 0.72);
+        font-size: 11px;
+        line-height: 1.25;
+      }
+      .ios-dock {
+        position: absolute;
+        z-index: 2;
+        left: 14px;
+        right: 14px;
+        bottom: 13px;
+        display: flex;
+        justify-content: space-around;
+        padding: 10px 16px;
+        border-radius: 37px;
+        background: rgba(255, 255, 255, 0.08);
+        border: 1px solid rgba(255, 255, 255, 0.16);
+        -webkit-backdrop-filter: blur(18px) saturate(1.2);
+        backdrop-filter: blur(18px) saturate(1.2);
+        box-shadow:
+          inset 0 1px 0 rgba(255, 255, 255, 0.16),
+          0 14px 36px rgba(0, 0, 0, 0.24);
+      }
+      .ios-dock-item {
+        position: relative;
+        width: 62px;
+        height: 62px;
+      }
+      .ios-dock-icon {
+        width: 62px;
+        height: 62px;
+        border-radius: 18px;
+        background-position: center;
+        background-size: cover;
+      }
+      .ios-dock-phone {
+        background-image: url("assets/icons/phone.jpg");
+      }
+      .ios-dock-brave {
+        background-image: url("assets/icons/brave.jpg");
+      }
+      .ios-dock-whatsapp {
+        background-image: url("assets/icons/whatsapp.jpg");
+      }
+      .ios-dock-music {
+        background-image: url("assets/icons/music.jpg");
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="ios26-liquid-glass"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="15"
+      data-root="true"
+    >
+      <!-- LIVE HTML captured every frame via drawElementImage  -->
+      <canvas
+        id="cap-phone"
+        layoutsubtree
+        width="390"
+        height="844"
+        style="
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 390px;
+          height: 844px;
+          z-index: -1;
+          pointer-events: none;
+        "
+      >
+        <div
+          id="phone-html"
+          style="
+            width: 390px;
+            height: 844px;
+            overflow: hidden;
+            font-family: Inter, system-ui, sans-serif;
+            color: #e2e8f0;
+          "
+        >
+          <div id="phone-scroll" class="ios-home" style="color: #fff; transform: translateY(0)">
+            <div id="phone-title" style="display: none"></div>
+            <span id="phone-count" style="display: none"></span>
+            <div id="phone-cards" style="display: none"></div>
+            <img
+              id="ios-notify-messages-preload"
+              class="ios-icon-preload"
+              src="assets/icons/notify-messages.jpg"
+              alt=""
+            />
+            <div class="ios-wallpaper"></div>
+            <div class="ios-status">
+              <div class="ios-status-left">
+                <span style="font-variant-numeric: tabular-nums">15:16</span>
+                <span class="ios-location">▲</span>
+              </div>
+              <div class="ios-status-right">
+                <div class="ios-signal"><span></span><span></span><span></span><span></span></div>
+                <div class="ios-wifi"><span></span><span></span><span></span></div>
+                <div class="ios-battery">92</div>
+              </div>
+            </div>
+            <div id="ios-app-grid" class="ios-app-grid">
+              <div class="ios-app">
+                <img class="ios-app-icon" src="assets/icons/weather.jpg" alt="" />
+                <div class="ios-app-label">Weather</div>
+              </div>
+              <div class="ios-app">
+                <img class="ios-app-icon" src="assets/icons/stocks.jpg" alt="" />
+                <div class="ios-app-label">Stocks</div>
+              </div>
+              <div class="ios-app">
+                <img class="ios-app-icon" src="assets/icons/find-my.jpg" alt="" />
+                <div class="ios-app-label">Find My</div>
+              </div>
+              <div class="ios-app">
+                <img class="ios-app-icon" src="assets/icons/home.jpg" alt="" />
+                <div class="ios-app-label">Home</div>
+              </div>
+              <div class="ios-app">
+                <img class="ios-app-icon" src="assets/icons/books.jpg" alt="" />
+                <div class="ios-app-label">Books</div>
+              </div>
+              <div class="ios-app">
+                <img class="ios-app-icon" src="assets/icons/itunes-store.jpg" alt="" />
+                <div class="ios-app-label">iTunes Store</div>
+              </div>
+              <div class="ios-app">
+                <img class="ios-app-icon" src="assets/icons/fitness.jpg" alt="" />
+                <div class="ios-app-label">Fitness</div>
+              </div>
+              <div class="ios-app">
+                <img class="ios-app-icon" src="assets/icons/watch.jpg" alt="" />
+                <div class="ios-app-label">Watch</div>
+              </div>
+              <div class="ios-app">
+                <img class="ios-app-icon" src="assets/icons/contacts.jpg" alt="" />
+                <div class="ios-app-label">Contacts</div>
+              </div>
+              <div class="ios-app">
+                <img class="ios-app-icon" src="assets/icons/files.jpg" alt="" />
+                <div class="ios-app-label">Files</div>
+              </div>
+              <div class="ios-app">
+                <img class="ios-app-icon" src="assets/icons/translate.jpg" alt="" />
+                <div class="ios-app-label">Translate</div>
+              </div>
+              <div class="ios-app">
+                <img class="ios-app-icon" src="assets/icons/calendar.jpg" alt="" />
+                <div class="ios-app-label">Calendar</div>
+              </div>
+              <div class="ios-app">
+                <img class="ios-app-icon" src="assets/icons/photos.jpg" alt="" />
+                <div class="ios-app-label">Photos</div>
+              </div>
+              <div class="ios-app">
+                <img class="ios-app-icon" src="assets/icons/chatgpt.jpg" alt="" />
+                <div class="ios-app-label">ChatGPT</div>
+              </div>
+              <div class="ios-app">
+                <img class="ios-app-icon" src="assets/icons/slack.jpg" alt="" />
+                <div class="ios-app-label">Slack</div>
+              </div>
+              <div class="ios-app">
+                <img class="ios-app-icon" src="assets/icons/instagram.jpg" alt="" />
+                <span class="ios-badge">1</span>
+                <div class="ios-app-label">Instagram</div>
+              </div>
+              <div class="ios-app">
+                <img class="ios-app-icon" src="assets/icons/x.jpg" alt="" />
+                <span class="ios-badge">4</span>
+                <div class="ios-app-label">X</div>
+              </div>
+              <div class="ios-app">
+                <img class="ios-app-icon" src="assets/icons/proton-mail.jpg" alt="" />
+                <span class="ios-badge">797</span>
+                <div class="ios-app-label">Proton Mail</div>
+              </div>
+              <div class="ios-app">
+                <img class="ios-app-icon" src="assets/icons/gmail.jpg" alt="" />
+                <span class="ios-badge">31.8K</span>
+                <div class="ios-app-label">Gmail</div>
+              </div>
+              <div class="ios-app">
+                <img class="ios-app-icon" src="assets/icons/revolut.jpg" alt="" />
+                <div class="ios-app-label">Revolut</div>
+              </div>
+              <div class="ios-app">
+                <img class="ios-app-icon" src="assets/icons/phone.jpg" alt="" />
+                <span class="ios-badge">9+</span>
+                <div class="ios-app-label">Phone</div>
+              </div>
+              <div class="ios-app">
+                <img class="ios-app-icon" src="assets/icons/brave.jpg" alt="" />
+                <div class="ios-app-label">Brave</div>
+              </div>
+              <div class="ios-app">
+                <img class="ios-app-icon" src="assets/icons/whatsapp.jpg" alt="" />
+                <span class="ios-badge">282</span>
+                <div class="ios-app-label">WhatsApp</div>
+              </div>
+              <div class="ios-app">
+                <img class="ios-app-icon" src="assets/icons/music.jpg" alt="" />
+                <div class="ios-app-label">Music</div>
+              </div>
+            </div>
+
+            <div class="ios-notification-layer">
+              <div id="ios-notification-a" class="ios-notification-card">
+                <div class="ios-notification-icon ios-notification-messages"></div>
+                <div class="ios-notification-copy">
+                  <div class="ios-notification-title"><span>Messages</span><span>now</span></div>
+                  <div class="ios-notification-body">Liquid Glass preview is ready for review.</div>
+                </div>
+              </div>
+              <div id="ios-notification-b" class="ios-notification-card">
+                <div class="ios-notification-icon ios-notification-hyperframes"></div>
+                <div class="ios-notification-copy">
+                  <div class="ios-notification-title"><span>HyperFrames</span><span>1m</span></div>
+                  <div class="ios-notification-body">One-worker render is ready.</div>
+                </div>
+              </div>
+              <div id="ios-notification-c" class="ios-notification-card">
+                <div class="ios-notification-icon ios-notification-gmail"></div>
+                <div class="ios-notification-copy">
+                  <div class="ios-notification-title"><span>Gmail</span><span>2m</span></div>
+                  <div class="ios-notification-body">Preview videos are live on CDN.</div>
+                </div>
+              </div>
+            </div>
+
+            <div class="ios-search-pill">Search</div>
+
+            <div id="ios-real-dock" class="ios-dock">
+              <div class="ios-dock-item">
+                <div class="ios-dock-icon ios-dock-phone"></div>
+                <span class="ios-badge">9+</span>
+              </div>
+              <div class="ios-dock-item">
+                <div class="ios-dock-icon ios-dock-brave"></div>
+              </div>
+              <div class="ios-dock-item">
+                <div class="ios-dock-icon ios-dock-whatsapp"></div>
+                <span class="ios-badge">282</span>
+              </div>
+              <div class="ios-dock-item">
+                <div class="ios-dock-icon ios-dock-music"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </canvas>
+
+      <canvas
+        id="cap-laptop"
+        layoutsubtree
+        width="1440"
+        height="900"
+        style="
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1440px;
+          height: 900px;
+          z-index: -1;
+          pointer-events: none;
+        "
+      >
+        <div
+          id="laptop-html"
+          style="
+            width: 1440px;
+            height: 900px;
+            overflow: hidden;
+            font-family: Inter, system-ui, sans-serif;
+            color: #e2e8f0;
+          "
+        >
+          <div
+            id="laptop-scroll"
+            style="background: linear-gradient(180deg, #0a0a12, #0f0f1a); transform: translateY(0)"
+          >
+            <div
+              style="
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                padding: 18px 36px;
+                border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+              "
+            >
+              <span
+                style="
+                  font-weight: 800;
+                  font-size: 17px;
+                  background: linear-gradient(135deg, #34d399, #3b82f6);
+                  -webkit-background-clip: text;
+                  -webkit-text-fill-color: transparent;
+                "
+                >HyperFrames</span
+              >
+              <div
+                style="display: flex; gap: 20px; font-size: 12px; color: rgba(255, 255, 255, 0.5)"
+              >
+                <span>Docs</span><span>Playground</span><span>Pricing</span>
+              </div>
+              <span
+                style="
+                  font-size: 11px;
+                  font-weight: 600;
+                  padding: 6px 14px;
+                  border-radius: 6px;
+                  background: #10b981;
+                  color: #fff;
+                "
+                >Log in</span
+              >
+            </div>
+            <div
+              id="laptop-title"
+              style="
+                font-size: 40px;
+                font-weight: 800;
+                letter-spacing: -1px;
+                padding: 28px 36px 10px;
+                opacity: 0;
+              "
+            >
+              Community Playground
+            </div>
+            <div style="font-size: 13px; color: rgba(255, 255, 255, 0.4); padding: 0 36px 18px">
+              Create videos with HTML — powered by HyperFrames
+            </div>
+            <div style="display: flex; gap: 8px; padding: 0 36px 20px">
+              <span
+                style="
+                  font-size: 10px;
+                  font-weight: 600;
+                  padding: 5px 12px;
+                  border-radius: 16px;
+                  background: rgba(16, 185, 129, 0.15);
+                  color: #10b981;
+                  border: 1px solid rgba(16, 185, 129, 0.3);
+                "
+                >Examples</span
+              ><span
+                id="laptop-count"
+                style="
+                  font-size: 10px;
+                  font-weight: 600;
+                  padding: 5px 12px;
+                  border-radius: 16px;
+                  border: 1px solid rgba(255, 255, 255, 0.1);
+                  color: rgba(255, 255, 255, 0.5);
+                "
+                >Catalog 0</span
+              >
+            </div>
+            <div
+              id="laptop-cards"
+              style="
+                display: grid;
+                grid-template-columns: repeat(3, 1fr);
+                gap: 14px;
+                padding: 0 36px 36px;
+              "
+            ></div>
+          </div>
+        </div>
+      </canvas>
+
+      <canvas
+        id="theater"
+        width="1920"
+        height="1080"
+        style="position: absolute; top: 0; left: 0; width: 1920px; height: 1080px"
+      ></canvas>
+      <div
+        id="driver"
+        class="clip"
+        data-start="0"
+        data-duration="15"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      var W = 1920,
+        H = 1080,
+        PI = Math.PI;
+
+      // ── Renderer ───────────────────────────────────────────────────────
+      var renderer = new THREE.WebGLRenderer({
+        canvas: document.getElementById("theater"),
+        antialias: true,
+        preserveDrawingBuffer: true,
+      });
+      renderer.setSize(W, H, false);
+      renderer.setPixelRatio(1);
+      renderer.toneMapping = THREE.ACESFilmicToneMapping;
+      renderer.toneMappingExposure = 1.15;
+      renderer.outputEncoding = THREE.sRGBEncoding;
+      renderer.setClearColor(0x050508, 1);
+
+      var scene = new THREE.Scene();
+      scene.background = new THREE.Color(0x050508);
+      var camera = new THREE.PerspectiveCamera(34, W / H, 0.1, 100);
+
+      // ── Environment Map ────────────────────────────────────────────────
+      var eC = document.createElement("canvas");
+      eC.width = 1024;
+      eC.height = 512;
+      var ec = eC.getContext("2d");
+      var eg = ec.createLinearGradient(0, 0, 1024, 512);
+      eg.addColorStop(0, "#020307");
+      eg.addColorStop(0.15, "#1a1a2e");
+      eg.addColorStop(0.3, "#ffffff");
+      eg.addColorStop(0.45, "#0a0a1e");
+      eg.addColorStop(0.6, "#ffffff");
+      eg.addColorStop(0.75, "#1e1e2e");
+      eg.addColorStop(1, "#020307");
+      ec.fillStyle = eg;
+      ec.fillRect(0, 0, 1024, 512);
+      ec.globalCompositeOperation = "screen";
+      for (var ei = 0; ei < 7; ei++) {
+        ec.fillStyle = "rgba(255,255,255," + (ei % 2 === 0 ? 0.15 : 0.08) + ")";
+        ec.fillRect((ei % 3) * 100, 60 + ei * 56, 700, 3 + (ei % 2) * 2);
+      }
+      var eT = new THREE.CanvasTexture(eC);
+      eT.mapping = THREE.EquirectangularReflectionMapping;
+      var pm = new THREE.PMREMGenerator(renderer);
+      scene.environment = pm.fromEquirectangular(eT).texture;
+      eT.dispose();
+      pm.dispose();
+
+      // ── Three.js shader backdrop ────────────────────────────────────────
+      var bgUniforms = { uTime: { value: 0 }, uAspect: { value: W / H } };
+      var bgPlane = new THREE.Mesh(
+        new THREE.PlaneGeometry(28, 16),
+        new THREE.ShaderMaterial({
+          uniforms: bgUniforms,
+          vertexShader:
+            "varying vec2 v;void main(){v=uv;gl_Position=projectionMatrix*modelViewMatrix*vec4(position,1.0);}",
+          fragmentShader:
+            "uniform float uTime;uniform float uAspect;varying vec2 v;float wave(vec2 p,float s,float t){return sin(p.x*s+p.y*s*.57+uTime*t);}void main(){vec2 p=v*2.0-1.0;p.x*=uAspect;float w=wave(p,3.0,.22)+.55*wave(p.yx+vec2(.7,-.2),5.1,.16)+.32*wave(p+vec2(-.4,.5),8.0,-.12);float a=smoothstep(-.75,1.05,w);vec3 navy=vec3(.015,.013,.055);vec3 cyan=vec3(.02,.42,.72);vec3 violet=vec3(.30,.08,.55);vec3 amber=vec3(.95,.42,.04);float ribbon=smoothstep(.22,.95,sin(p.x*2.2-p.y*3.1+uTime*.18));vec3 c=mix(navy,cyan,a);c=mix(c,violet,smoothstep(.16,1.1,wave(p+vec2(.8,.1),2.4,.1)));c+=amber*ribbon*.33;float glow=exp(-dot(p+vec2(.62,-.08),p+vec2(.62,-.08))*1.7);c+=vec3(.10,.45,.55)*glow;float vign=smoothstep(1.85,.25,length(p));gl_FragColor=vec4(c*vign,1.0);}",
+          depthTest: false,
+          depthWrite: false,
+        }),
+      );
+      bgPlane.position.z = -7.5;
+      scene.add(bgPlane);
+
+      // Vibrant aurora-colored floor
+      var floor = new THREE.Mesh(
+        new THREE.PlaneGeometry(30, 30),
+        new THREE.MeshStandardMaterial({ color: 0x081427, metalness: 0.86, roughness: 0.22 }),
+      );
+      floor.rotation.x = -PI / 2;
+      floor.position.y = -2.5;
+      scene.add(floor);
+
+      scene.add(new THREE.AmbientLight(0x222233, 0.5));
+      var kL = new THREE.DirectionalLight(0xffffff, 2.2);
+      kL.position.set(-3, 4, 5);
+      scene.add(kL);
+      var rL = new THREE.PointLight(0x6366f1, 3, 15);
+      rL.position.set(4, 2, 3);
+      scene.add(rL);
+      var wL = new THREE.PointLight(0xffc8a8, 1.5, 12);
+      wL.position.set(-3, -1, 4);
+      scene.add(wL);
+
+      // ── Live HTML → WebGL Texture  ─
+      var capPhoneCvs = document.getElementById("cap-phone");
+      var capPhoneCtx = capPhoneCvs.getContext("2d");
+      var phoneHtmlEl = document.getElementById("phone-html");
+
+      var capLapCvs = document.getElementById("cap-laptop");
+      var capLapCtx = capLapCvs.getContext("2d");
+      var lapHtmlEl = document.getElementById("laptop-html");
+
+      var apiOk = (function () {
+        var tc = document.createElement("canvas");
+        if (!("layoutSubtree" in tc)) return false;
+        tc.setAttribute("layoutsubtree", "");
+        var ctx = tc.getContext("2d");
+        return ctx && typeof ctx.drawElementImage === "function";
+      })();
+      var paintReady = false;
+
+      function waitForImages() {
+        var images = Array.prototype.slice.call(document.querySelectorAll("img"));
+        return Promise.all(
+          images.map(function (image) {
+            if (image.complete) return Promise.resolve();
+            return new Promise(function (resolveImage) {
+              image.onload = resolveImage;
+              image.onerror = resolveImage;
+            });
+          }),
+        );
+      }
+
+      function waitForPaint(canvas) {
+        return new Promise(function (resolvePaint) {
+          if (!canvas || typeof canvas.requestPaint !== "function") {
+            resolvePaint();
+            return;
+          }
+          var resolved = false;
+          function done() {
+            if (resolved) return;
+            resolved = true;
+            canvas.onpaint = null;
+            resolvePaint();
+          }
+          canvas.onpaint = done;
+          canvas.requestPaint();
+          setTimeout(done, 100);
+        });
+      }
+
+      // Generate card HTML for both screens
+      var cardData = [
+        {
+          bg: "linear-gradient(135deg,#1e3a5f,#2563eb)",
+          text: "100M+ AI team",
+          title: "Notion Showcase",
+          meta: "15s · 1920×1080",
+        },
+        {
+          bg: "linear-gradient(135deg,#4a1942,#db2777)",
+          text: "Design System v4",
+          title: "Dribbble Showcase",
+          meta: "12s · 1920×1080",
+        },
+        {
+          bg: "linear-gradient(135deg,#451a03,#f59e0b)",
+          text: "$1.9T Market Cap",
+          title: "Stripe Showcase",
+          meta: "10s · 1920×1080",
+        },
+        {
+          bg: "linear-gradient(135deg,#064e3b,#10b981)",
+          text: "Ship faster with AI",
+          title: "Vercel Promo",
+          meta: "20s · 1080×1920",
+        },
+        {
+          bg: "linear-gradient(135deg,#1e3a5f,#3b82f6)",
+          text: "Privacy App",
+          title: "iPhone App Store",
+          meta: "8s · 1080×1920",
+        },
+        {
+          bg: "linear-gradient(135deg,#4a1942,#a855f7)",
+          text: "Audio Visualizer",
+          title: "Spotify Remix",
+          meta: "15s · 1920×1080",
+        },
+        {
+          bg: "linear-gradient(135deg,#064e3b,#059669)",
+          text: "Code Animation",
+          title: "Terminal Demo",
+          meta: "12s · 1920×1080",
+        },
+        {
+          bg: "linear-gradient(135deg,#451a03,#d97706)",
+          text: "Launch Video",
+          title: "Product Hunt",
+          meta: "30s · 1920×1080",
+        },
+        {
+          bg: "linear-gradient(135deg,#1e3a5f,#6366f1)",
+          text: "3D Devices",
+          title: "Device Mockups",
+          meta: "15s · 1920×1080",
+        },
+      ];
+      function makeCardHTML(cd, isMobile) {
+        var fs = isMobile ? 12 : 16;
+        return (
+          '<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:' +
+          (isMobile ? 10 : 12) +
+          'px;overflow:hidden;opacity:0" class="anim-card">' +
+          '<div style="width:100%;aspect-ratio:16/9;background:' +
+          cd.bg +
+          ';display:flex;align-items:center;justify-content:center"><span style="font-size:' +
+          fs +
+          'px;font-weight:700;color:rgba(255,255,255,0.7)">' +
+          cd.text +
+          "</span></div>" +
+          '<div style="padding:' +
+          (isMobile ? "8px 10px" : "10px 14px") +
+          '"><div style="font-size:' +
+          (isMobile ? 11 : 13) +
+          'px;font-weight:600;margin-bottom:2px">' +
+          cd.title +
+          '</div><div style="font-size:' +
+          (isMobile ? 9 : 10) +
+          'px;color:rgba(255,255,255,0.3)">' +
+          cd.meta +
+          "</div></div></div>"
+        );
+      }
+      var phoneCardsEl = document.getElementById("phone-cards");
+      var laptopCardsEl = document.getElementById("laptop-cards");
+      for (var ci = 0; ci < cardData.length; ci++) {
+        if (ci < 6) phoneCardsEl.innerHTML += makeCardHTML(cardData[ci], true);
+        laptopCardsEl.innerHTML += makeCardHTML(cardData[ci], false);
+      }
+
+      var phoneTex = new THREE.CanvasTexture(capPhoneCvs);
+      phoneTex.minFilter = THREE.LinearFilter;
+      phoneTex.magFilter = THREE.LinearFilter;
+      phoneTex.generateMipmaps = false;
+      var lapTex = new THREE.CanvasTexture(capLapCvs);
+      lapTex.minFilter = THREE.LinearFilter;
+      lapTex.magFilter = THREE.LinearFilter;
+      lapTex.generateMipmaps = false;
+      var glassBuffer = document.createElement("canvas");
+      glassBuffer.width = 390;
+      glassBuffer.height = 844;
+      var glassBufferCtx = glassBuffer.getContext("2d");
+
+      function pathRoundRect(ctx, x, y, w, h, r) {
+        var rr = Math.min(r, w / 2, h / 2);
+        ctx.beginPath();
+        ctx.moveTo(x + rr, y);
+        ctx.lineTo(x + w - rr, y);
+        ctx.quadraticCurveTo(x + w, y, x + w, y + rr);
+        ctx.lineTo(x + w, y + h - rr);
+        ctx.quadraticCurveTo(x + w, y + h, x + w - rr, y + h);
+        ctx.lineTo(x + rr, y + h);
+        ctx.quadraticCurveTo(x, y + h, x, y + h - rr);
+        ctx.lineTo(x, y + rr);
+        ctx.quadraticCurveTo(x, y, x + rr, y);
+        ctx.closePath();
+      }
+
+      function drawNotificationCard(ctx, progress, top, iconSelector, title, time, body) {
+        var p = Math.max(0, Math.min(1, progress));
+        if (p <= 0.001) return;
+        var q = notificationEase(p);
+        var lift = Math.sin(q * PI);
+        var y = 106 + top + (1 - q) * -58 + lift * 6;
+        var x = 13;
+        var w = 364;
+        var h = 66 + lift * 2;
+        ctx.save();
+        ctx.globalAlpha = q * 0.98;
+        ctx.shadowColor = "rgba(0,0,0,0.54)";
+        ctx.shadowBlur = 22;
+        ctx.shadowOffsetY = 14;
+        pathRoundRect(ctx, x, y, w, h, 23);
+        ctx.clip();
+        ctx.filter = "blur(12px) saturate(1.55) brightness(1.24)";
+        ctx.drawImage(glassBuffer, -4, -4, 398, 852);
+        ctx.filter = "none";
+        pathRoundRect(ctx, x, y, w, h, 23);
+        var fill = ctx.createLinearGradient(x, y, x + w, y + h);
+        fill.addColorStop(0, "rgba(255,255,255,0.54)");
+        fill.addColorStop(0.45, "rgba(188,202,219,0.46)");
+        fill.addColorStop(1, "rgba(94,108,130,0.36)");
+        ctx.fillStyle = fill;
+        ctx.fill();
+        ctx.globalCompositeOperation = "screen";
+        var caustic = ctx.createLinearGradient(x + 40, y, x + w - 20, y + h);
+        caustic.addColorStop(0, "rgba(255,255,255,0.18)");
+        caustic.addColorStop(0.36, "rgba(117,230,255,0.15)");
+        caustic.addColorStop(0.64, "rgba(255,143,220,0.12)");
+        caustic.addColorStop(1, "rgba(255,255,255,0.08)");
+        ctx.fillStyle = caustic;
+        ctx.fillRect(x, y, w, h);
+        ctx.globalCompositeOperation = "source-over";
+        ctx.shadowColor = "transparent";
+        pathRoundRect(ctx, x + 0.5, y + 0.5, w - 1, h - 1, 22.5);
+        ctx.strokeStyle = "rgba(255,255,255,0.72)";
+        ctx.lineWidth = 1;
+        ctx.stroke();
+        ctx.beginPath();
+        ctx.moveTo(x + 24, y + 11);
+        ctx.bezierCurveTo(x + 105, y - 2, x + 220, y + 7, x + w - 42, y + 12);
+        ctx.strokeStyle = "rgba(255,255,255,0.38)";
+        ctx.lineWidth = 2;
+        ctx.stroke();
+        pathRoundRect(ctx, x + 10, y + 14, 38, 38, 11);
+        ctx.fillStyle = "rgba(255,255,255,0.58)";
+        ctx.fill();
+        var icon = document.querySelector(iconSelector);
+        if (icon && icon.complete) {
+          ctx.save();
+          pathRoundRect(ctx, x + 10, y + 14, 38, 38, 11);
+          ctx.clip();
+          ctx.drawImage(icon, x + 10, y + 14, 38, 38);
+          ctx.restore();
+        }
+        ctx.fillStyle = "#fff";
+        ctx.shadowColor = "rgba(0,0,0,0.32)";
+        ctx.shadowBlur = 3;
+        ctx.shadowOffsetY = 1;
+        ctx.font = "800 13px Inter, system-ui, sans-serif";
+        ctx.textBaseline = "top";
+        ctx.fillText(title, x + 60, y + 13);
+        ctx.globalAlpha = q * 0.92;
+        ctx.font = "800 12px Inter, system-ui, sans-serif";
+        ctx.fillText(time, x + w - ctx.measureText(time).width - 14, y + 13);
+        ctx.globalAlpha = q * 0.95;
+        ctx.font = "650 12px Inter, system-ui, sans-serif";
+        ctx.fillText(body, x + 60, y + 34);
+        ctx.restore();
+      }
+
+      function drawCanvasNotifications(ctx) {
+        glassBufferCtx.clearRect(0, 0, 390, 844);
+        glassBufferCtx.drawImage(ctx.canvas, 0, 0);
+        drawNotificationCard(
+          ctx,
+          S.iosN1,
+          0,
+          "#ios-notify-messages-preload",
+          "Messages",
+          "now",
+          "Liquid Glass preview is ready for review.",
+        );
+        drawNotificationCard(
+          ctx,
+          S.iosN2,
+          68,
+          'img[src="assets/icons/slack.jpg"]',
+          "HyperFrames",
+          "1m",
+          "One-worker render is ready.",
+        );
+        drawNotificationCard(
+          ctx,
+          S.iosN3,
+          136,
+          'img[src="assets/icons/gmail.jpg"]',
+          "Gmail",
+          "2m",
+          "Preview videos are live on CDN.",
+        );
+      }
+
+      function captureScreens() {
+        if (!apiOk || !paintReady) return;
+        try {
+          capPhoneCtx.clearRect(0, 0, 390, 844);
+          capPhoneCtx.drawElementImage(phoneHtmlEl, 0, 0, 390, 844);
+          drawCanvasNotifications(capPhoneCtx);
+          capLapCtx.clearRect(0, 0, 1440, 900);
+          capLapCtx.drawElementImage(lapHtmlEl, 0, 0, 1440, 900);
+          phoneTex.needsUpdate = true;
+          lapTex.needsUpdate = true;
+        } catch (e) {}
+      }
+
+      // ── Turntable Group (both devices rotate together for 360° orbit) ──
+      var turntable = new THREE.Group();
+      scene.add(turntable);
+
+      // ── Model Groups ───────────────────────────────────────────────────
+      var phoneGrp = new THREE.Group();
+      turntable.add(phoneGrp);
+      var lapGrp = new THREE.Group();
+      turntable.add(lapGrp);
+      var ready = 0;
+
+      var draco = new THREE.DRACOLoader();
+      draco.setDecoderPath("https://www.gstatic.com/draco/versioned/decoders/1.5.6/");
+      var loader = new THREE.GLTFLoader();
+      loader.setDRACOLoader(draco);
+
+      // iPhone
+      // The replacement device models carry UVs authored for a tiling material
+      // (the laptop panel runs u -6.3..6.3), so mapping one screen image onto
+      // them clamps at the edges and smears the last row of pixels across the
+      // whole panel. Both screens are flat planes, so derive planar UVs from
+      // the mesh's own bounds instead of trusting what shipped.
+      function planarScreenUv(mesh) {
+        var g = mesh.geometry;
+        g.computeBoundingBox();
+        var bb = g.boundingBox;
+        var pos = g.attributes.position;
+        var w = bb.max.x - bb.min.x || 1;
+        var h = bb.max.y - bb.min.y || 1;
+        var uv = new Float32Array(pos.count * 2);
+        for (var i = 0; i < pos.count; i++) {
+          uv[i * 2] = (pos.getX(i) - bb.min.x) / w;
+          uv[i * 2 + 1] = (pos.getY(i) - bb.min.y) / h;
+        }
+        g.setAttribute("uv", new THREE.BufferAttribute(uv, 2));
+      }
+
+      // These compositions were authored around a model whose screen faced -Z
+      // (the old asset's display plane sat at its minimum Z) and every camera
+      // move and spin in the timeline assumes it. The replacement faces +Z, so
+      // align the model rather than re-time the animation. Reads the model's
+      // own parts, so a re-export facing the other way still lands right.
+      function alignScreenToMinusZ(root, frontName, backName) {
+        var front = root.getObjectByName(frontName);
+        var back = root.getObjectByName(backName);
+        if (!front || !back) return;
+        // matrixWorld is only refreshed during a render, and this runs at load,
+        // so without this the two parts both read as the origin and the test
+        // silently never fires.
+        root.updateWorldMatrix(true, true);
+        var fp = new THREE.Vector3();
+        var bp = new THREE.Vector3();
+        front.getWorldPosition(fp);
+        back.getWorldPosition(bp);
+        if (fp.z > bp.z) root.rotation.y += Math.PI;
+      }
+
+      loader.load("models/iphone.glb", function (gltf) {
+        var m = gltf.scene;
+        var box = new THREE.Box3().setFromObject(m);
+        var sz = box.getSize(new THREE.Vector3());
+        var s = 3.2 / sz.y;
+        m.scale.setScalar(s);
+        box.setFromObject(m);
+        m.position.sub(box.getCenter(new THREE.Vector3()));
+        m.traverse(function (child) {
+          if (!child.isMesh) return;
+          // `front-glass` is the display face; Blender's exporter suffixes the
+          // mesh name and leaves the node name bare, so match the prefix.
+          if (child.name.indexOf("front-glass") === 0) {
+            planarScreenUv(child);
+            child.material = new THREE.MeshBasicMaterial({ map: phoneTex });
+          }
+        });
+        alignScreenToMinusZ(m, "front-glass", "rear-window");
+        phoneGrp.add(m);
+        ready++;
+        if (ready === 1) onReady();
+      });
+
+      function onReady() {
+        waitForImages()
+          .then(function () {
+            return waitForPaint(capPhoneCvs);
+          })
+          .then(function () {
+            paintReady = true;
+            captureScreens();
+            render();
+          });
+      }
+
+      // ── Cubic Bezier Implementation ────────────────────────────────────
+      function cbz(p1x, p1y, p2x, p2y) {
+        var ax = 3 * p1x - 3 * p2x + 1,
+          bx = 3 * p2x - 6 * p1x,
+          cx = 3 * p1x;
+        var ay = 3 * p1y - 3 * p2y + 1,
+          by = 3 * p2y - 6 * p1y,
+          cy = 3 * p1y;
+        return function (t) {
+          var s = t;
+          for (var i = 0; i < 12; i++) {
+            var x = ((ax * s + bx) * s + cx) * s - t;
+            var dx = (3 * ax * s + 2 * bx) * s + cx;
+            if (Math.abs(dx) < 1e-10) break;
+            s -= x / dx;
+          }
+          s = Math.max(0, Math.min(1, s));
+          return ((ay * s + by) * s + cy) * s;
+        };
+      }
+
+      var enterEase = cbz(0.16, 1.0, 0.3, 1.0);
+      var notificationEase = cbz(0.22, 0.0, 0.16, 1.0);
+      var spinEase = cbz(0.76, 0.0, 0.18, 1.0);
+      var driftEase = cbz(0.45, 0.0, 0.15, 1.0);
+      var snapEase = cbz(0.22, 1.15, 0.36, 1.0);
+      var breatheEase = cbz(0.37, 0.0, 0.63, 1.0);
+
+      // ── Animation State ────────────────────────────────────────────────
+      var S = {
+        phX: 0,
+        phY: 0.1,
+        phZ: 0.5,
+        phRX: 0,
+        phRY: PI,
+        phRZ: 0,
+        lpX: 10,
+        lpY: -0.2,
+        lpZ: -0.6,
+        lpRX: 0,
+        lpRY: 0,
+        lpRZ: 0,
+        cX: 0,
+        cY: 0.18,
+        cZ: 6.15,
+        clX: 0,
+        clY: 0.1,
+        clZ: 0,
+        drift: 0,
+        turn: 0,
+        cardReveal: 0,
+        titleFade: 0,
+        counter: 0,
+        iosN1: 0,
+        iosN2: 0,
+        iosN3: 0,
+        p: 0,
+      };
+
+      function render() {
+        var d = S.drift;
+
+        // ── Animate live HTML content (captured to texture every frame) ──
+        // Title fade-in
+        document.getElementById("phone-title").style.opacity = S.titleFade;
+        document.getElementById("laptop-title").style.opacity = S.titleFade;
+        // Counter
+        var cnt = Math.round(S.counter);
+        document.getElementById("phone-count").textContent = "Catalog " + cnt;
+        document.getElementById("laptop-count").textContent = "Catalog " + cnt;
+        // Staggered card reveal
+        var allCards = document.querySelectorAll(".anim-card");
+        for (var ci2 = 0; ci2 < allCards.length; ci2++) {
+          var cardProgress = Math.max(0, Math.min(1, (S.cardReveal * allCards.length - ci2) * 1.5));
+          allCards[ci2].style.opacity = cardProgress;
+          allCards[ci2].style.transform = "translateY(" + (1 - cardProgress) * 15 + "px)";
+        }
+        function dropNotification(id, progress) {
+          var el = document.getElementById(id);
+          if (!el) return;
+          var p = Math.max(0, Math.min(1, progress));
+          var q = notificationEase(p);
+          var overshoot = Math.sin(q * PI) * 5;
+          el.style.opacity = q;
+          el.style.transform =
+            "translateY(" + ((1 - q) * -125 + overshoot) + "px) scale(" + (0.98 + q * 0.02) + ")";
+        }
+        dropNotification("ios-notification-a", S.iosN1);
+        dropNotification("ios-notification-b", S.iosN2);
+        dropNotification("ios-notification-c", S.iosN3);
+        // Re-capture HTML to texture
+        captureScreens();
+
+        phoneGrp.position.set(
+          S.phX + Math.sin(d * 0.5) * 0.015,
+          S.phY + Math.sin(d * 0.7) * 0.008,
+          S.phZ + Math.cos(d * 0.4) * 0.008,
+        );
+        phoneGrp.rotation.set(S.phRX, S.phRY, S.phRZ);
+        lapGrp.position.set(
+          S.lpX - Math.sin(d * 0.4) * 0.012,
+          S.lpY + Math.sin(d * 0.6) * 0.006,
+          S.lpZ + Math.cos(d * 0.35) * 0.008,
+        );
+        lapGrp.rotation.set(S.lpRX, S.lpRY, S.lpRZ);
+        turntable.rotation.y = S.turn;
+        bgUniforms.uTime.value = d;
+        camera.position.set(S.cX, S.cY, S.cZ);
+        camera.lookAt(S.clX, S.clY, S.clZ);
+        renderer.render(scene, camera);
+      }
+
+      // ── GSAP Timeline — Product Review Edit ────────────────────────────
+      var tl = gsap.timeline({ paused: true });
+      window.__timelines = window.__timelines || {};
+      window.__timelines["ios26-liquid-glass"] = tl;
+
+      tl.to(S, { p: 1, drift: 15, duration: 15, ease: "none" }, 0);
+
+      // ── iOS 26 Showcase: full-device hero with a subtle drift-in ──
+      tl.to(S, { cZ: 6.45, duration: 12, ease: driftEase }, 0.5);
+      tl.to(S, { cY: 0.16, duration: 12, ease: driftEase }, 0.5);
+
+      // Very gentle tilt — shows the glass icon refraction from slightly different angles
+      tl.to(S, { phRY: PI + 0.04, phRX: 0.01, duration: 4, ease: breatheEase }, 0.5);
+      tl.to(S, { phRY: PI - 0.03, phRX: -0.008, duration: 4, ease: breatheEase }, 4.5);
+      tl.to(S, { phRY: PI + 0.02, phRX: 0.005, duration: 4, ease: breatheEase }, 8.5);
+
+      // No scroll — keep the home screen static
+      // No 360° turntable — just the gentle zoom out
+
+      // Move MacBook off screen so it doesn't appear
+      tl.set(S, { lpX: 10 }, 0);
+      tl.to(S, { iosN1: 1, duration: 0.72, ease: "none" }, 0.85);
+      tl.to(S, { iosN2: 1, duration: 0.74, ease: "none" }, 1.7);
+      tl.to(S, { iosN3: 1, duration: 0.76, ease: "none" }, 2.55);
+      tl.to({}, { duration: 15, ease: "none", onUpdate: render }, 0);
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/ios26-liquid-glass/lib/liquid-glass.iife.js b/docs/public/catalog/blocks/ios26-liquid-glass/lib/liquid-glass.iife.js
new file mode 100644
index 0000000000..ae5210629b
--- /dev/null
+++ b/docs/public/catalog/blocks/ios26-liquid-glass/lib/liquid-glass.iife.js
@@ -0,0 +1,1048 @@
+var LiquidGlass = (() => {
+  var E = Object.defineProperty;
+  var D = Object.getOwnPropertyDescriptor;
+  var z = Object.getOwnPropertyNames;
+  var N = Object.prototype.hasOwnProperty;
+  var O = (m, e) => {
+      for (var t in e) E(m, t, { get: e[t], enumerable: !0 });
+    },
+    H = (m, e, t, r) => {
+      if ((e && typeof e == "object") || typeof e == "function")
+        for (let n of z(e))
+          !N.call(m, n) &&
+            n !== t &&
+            E(m, n, { get: () => e[n], enumerable: !(r = D(e, n)) || r.enumerable });
+      return m;
+    };
+  var I = (m) => H(E({}, "__esModule", { value: !0 }), m);
+  var Y = {};
+  O(Y, {
+    CSS_PROPERTY_MAP: () => _,
+    DEFAULTS: () => w,
+    GlassRendererGPU: () => y,
+    LiquidGlassCanvas: () => R,
+  });
+  var w = {
+      blurAmount: 0,
+      refraction: 0.69,
+      chromAberration: 0.05,
+      edgeHighlight: 0.05,
+      specular: 0,
+      fresnel: 1,
+      distortion: 0,
+      cornerRadius: 65,
+      zRadius: 40,
+      opacity: 1,
+      saturation: 0,
+      tintStrength: 0,
+      brightness: 0,
+      shadowOpacity: 0.3,
+      shadowSpread: 10,
+      shadowOffsetY: 1,
+      bevelMode: 0,
+    },
+    _ = {
+      "--lg-blur": "blurAmount",
+      "--lg-refraction": "refraction",
+      "--lg-chrom-aberration": "chromAberration",
+      "--lg-edge-highlight": "edgeHighlight",
+      "--lg-specular": "specular",
+      "--lg-fresnel": "fresnel",
+      "--lg-distortion": "distortion",
+      "--lg-corner-radius": "cornerRadius",
+      "--lg-z-radius": "zRadius",
+      "--lg-opacity": "opacity",
+      "--lg-saturation": "saturation",
+      "--lg-tint": "tintStrength",
+      "--lg-brightness": "brightness",
+      "--lg-shadow-opacity": "shadowOpacity",
+      "--lg-shadow-spread": "shadowSpread",
+      "--lg-shadow-offset-y": "shadowOffsetY",
+      "--lg-bevel-mode": "bevelMode",
+    },
+    L = 6,
+    T = 20;
+  var q = `// Blit shader - copy texture with UV transform
+
+struct BlitUniforms {
+  scale: vec2f,
+  offset: vec2f,
+}
+
+@group(0) @binding(0) var<uniform> u: BlitUniforms;
+@group(0) @binding(1) var texSampler: sampler;
+@group(0) @binding(2) var tex: texture_2d<f32>;
+
+struct VertexOutput {
+  @builtin(position) position: vec4f,
+  @location(0) uv: vec2f,
+}
+
+@vertex
+fn vertexMain(@location(0) pos: vec2f) -> VertexOutput {
+  var out: VertexOutput;
+  out.uv = pos * 0.5 + 0.5;
+  out.position = vec4f(pos, 0.0, 1.0);
+  return out;
+}
+
+@fragment
+fn fragmentMain(in: VertexOutput) -> @location(0) vec4f {
+  return textureSample(tex, texSampler, in.uv * u.scale + u.offset);
+}
+`,
+    k = `// Blur shader - 9-tap Gaussian blur (single direction)
+
+struct BlurUniforms {
+  dir: vec2f,
+  _pad: vec2f,
+}
+
+@group(0) @binding(0) var<uniform> u: BlurUniforms;
+@group(0) @binding(1) var texSampler: sampler;
+@group(0) @binding(2) var tex: texture_2d<f32>;
+
+struct VertexOutput {
+  @builtin(position) position: vec4f,
+  @location(0) uv: vec2f,
+}
+
+@vertex
+fn vertexMain(@location(0) pos: vec2f) -> VertexOutput {
+  var out: VertexOutput;
+  out.uv = pos * 0.5 + 0.5;
+  out.position = vec4f(pos, 0.0, 1.0);
+  return out;
+}
+
+@fragment
+fn fragmentMain(in: VertexOutput) -> @location(0) vec4f {
+  var s = textureSample(tex, texSampler, in.uv) * 0.227027;
+  s += textureSample(tex, texSampler, in.uv + u.dir * 1.0) * 0.194594;
+  s += textureSample(tex, texSampler, in.uv - u.dir * 1.0) * 0.194594;
+  s += textureSample(tex, texSampler, in.uv + u.dir * 2.0) * 0.121622;
+  s += textureSample(tex, texSampler, in.uv - u.dir * 2.0) * 0.121622;
+  s += textureSample(tex, texSampler, in.uv + u.dir * 3.0) * 0.054054;
+  s += textureSample(tex, texSampler, in.uv - u.dir * 3.0) * 0.054054;
+  s += textureSample(tex, texSampler, in.uv + u.dir * 4.0) * 0.016216;
+  s += textureSample(tex, texSampler, in.uv - u.dir * 4.0) * 0.016216;
+  return s;
+}
+`,
+    W = `// Glass shader - the core liquid glass effect
+
+struct GlassUniforms {
+  center: vec2f,
+  size: vec2f,
+  res: vec2f,
+  radius: f32,
+  pad: f32,
+  refract: f32,
+  chroma: f32,
+  edgeHL: f32,
+  spec: f32,
+  fresnel: f32,
+  distort: f32,
+  alpha: f32,
+  sat: f32,
+  tint: f32,
+  zRadius: f32,
+  brightness: f32,
+  shadowAlpha: f32,
+  shadowSpread: f32,
+  shadowOffY: f32,
+  bevelMode: f32,
+  _pad: vec2f,
+}
+
+@group(0) @binding(0) var<uniform> u: GlassUniforms;
+@group(0) @binding(1) var texSampler: sampler;
+@group(0) @binding(2) var bgTex: texture_2d<f32>;
+@group(0) @binding(3) var blurTex: texture_2d<f32>;
+
+struct VertexOutput {
+  @builtin(position) position: vec4f,
+  @location(0) localPx: vec2f,
+  @location(1) screenUV: vec2f,
+}
+
+@vertex
+fn vertexMain(@location(0) pos: vec2f) -> VertexOutput {
+  var out: VertexOutput;
+  let total = u.size + vec2f(u.pad * 2.0);
+  out.localPx = pos * total;
+  let px = u.center + pos * total;
+  out.screenUV = vec2f(px.x / u.res.x, 1.0 - px.y / u.res.y);
+  var ndc = (px / u.res) * 2.0 - 1.0;
+  ndc.y = -ndc.y;
+  out.position = vec4f(ndc, 0.0, 1.0);
+  return out;
+}
+
+// Rounded-rect signed distance
+fn rrSDF(p: vec2f, b: vec2f, r: f32) -> f32 {
+  let q = abs(p) - b + vec2f(r);
+  return min(max(q.x, q.y), 0.0) + length(max(q, vec2f(0.0))) - r;
+}
+
+// Bevel height field
+fn bevelHeight(d: f32, zR: f32) -> f32 {
+  if (d <= 0.0) { return 0.0; }
+  if (d >= zR) { return zR; }
+  return sqrt(d * (2.0 * zR - d));
+}
+
+fn hash(p: vec2f) -> f32 {
+  return fract(sin(dot(p, vec2f(127.1, 311.7))) * 43758.5453);
+}
+
+@fragment
+fn fragmentMain(in: VertexOutput) -> @location(0) vec4f {
+  let half_ = u.size * 0.5;
+  let r = min(u.radius, min(half_.x, half_.y));
+  let sdf = rrSDF(in.localPx, half_, r);
+
+  // Anti-aliased mask
+  let mask = 1.0 - smoothstep(-1.5, 0.5, sdf);
+
+  let maxD = min(half_.x, half_.y);
+  let inside = -sdf;
+  let edge = smoothstep(maxD * 0.35, 0.0, inside);
+
+  // Surface normal via bevel height field
+  let zR = u.zRadius;
+  let e = 2.0;
+  let dC = inside;
+  let dR = -rrSDF(in.localPx + vec2f(e, 0.0), half_, r);
+  let dL = -rrSDF(in.localPx - vec2f(e, 0.0), half_, r);
+  let dU = -rrSDF(in.localPx + vec2f(0.0, e), half_, r);
+  let dD = -rrSDF(in.localPx - vec2f(0.0, e), half_, r);
+  let hC = bevelHeight(dC, zR);
+  let hR = bevelHeight(dR, zR);
+  let hL = bevelHeight(dL, zR);
+  let hU = bevelHeight(dU, zR);
+  let hD = bevelHeight(dD, zR);
+  let hGrad = vec2f(hR - hL, hU - hD) / (2.0 * e);
+  let N = normalize(vec3f(-hGrad, 1.0));
+
+  let depth = smoothstep(0.0, zR, inside);
+
+  // Refraction - compute both modes and select
+  let pxToUV = vec2f(1.0, -1.0) / u.res;
+  let ior = 1.5;
+  let refrPow = 1.0 - 1.0 / ior;
+  let thickness = hC * 2.0;
+  let thickNorm = thickness / max(zR * 2.0, 1.0);
+
+  // Biconvex mode
+  let exitRefr = hGrad * refrPow;
+  let entryRefr = hGrad * refrPow;
+  let throughRefr = entryRefr * thickNorm * 0.5;
+  var refrPxBiconvex = (exitRefr + entryRefr + throughRefr) * u.refract * 30.0;
+  let centerDir = -in.localPx / max(half_, vec2f(1.0));
+  refrPxBiconvex += centerDir * u.refract * 4.0 * depth;
+
+  // Dome mode
+  let refrPxDome = -in.localPx * u.refract * depth * 0.35;
+
+  // Select based on bevel mode
+  let refrPx = select(refrPxBiconvex, refrPxDome, u.bevelMode >= 0.5);
+  let refr = refrPx * pxToUV;
+
+  // Micro-distortion noise
+  let ns = in.localPx * 0.08;
+  let absPxToUV = vec2f(1.0) / u.res;
+  let micro = (vec2f(hash(ns), hash(ns + vec2f(37.0))) - 0.5) * u.distort * 4.0 * absPxToUV;
+
+  // Chromatic aberration
+  let caS = u.chroma * 18.0 * (edge * 0.7 + 0.3) * 2.0;
+  let caD = N.xy * caS * pxToUV;
+  let base = in.screenUV + refr + micro;
+
+  // Sample textures (must be in uniform control flow)
+  let sharpR = textureSample(bgTex, texSampler, base + caD).r;
+  let sharpG = textureSample(bgTex, texSampler, base).g;
+  let sharpB = textureSample(bgTex, texSampler, base - caD).b;
+  let sharp = vec3f(sharpR, sharpG, sharpB);
+
+  let blurR = textureSample(blurTex, texSampler, base + caD).r;
+  let blurG = textureSample(blurTex, texSampler, base).g;
+  let blurB = textureSample(blurTex, texSampler, base - caD).b;
+  let blur = vec3f(blurR, blurG, blurB);
+
+  // Edge-weighted blur mix
+  let edgeMix = 1.0 - edge * 0.15;
+  var col = mix(sharp, blur, edgeMix);
+
+  // Brightness
+  col *= 1.0 + u.brightness;
+
+  // Saturation
+  let lum = dot(col, vec3f(0.299, 0.587, 0.114));
+  col = mix(vec3f(lum), col, 1.0 + u.sat);
+
+  // Cool glass tint
+  col = mix(col, col * vec3f(0.92, 0.95, 1.05), u.tint);
+  col *= 1.0 + 0.06 * depth;
+
+  // Fresnel
+  let fres = pow(1.0 - abs(N.z), 4.0) * u.fresnel;
+
+  // Specular highlights (multi-light Blinn-Phong)
+  let V = vec3f(0.0, 0.0, 1.0);
+  let L1 = normalize(vec3f(0.4, 0.7, 1.0));
+  let H1 = normalize(L1 + V);
+  let sp1 = pow(max(dot(N, H1), 0.0), 90.0);
+  let L2 = normalize(vec3f(-0.3, -0.5, 1.0));
+  let H2 = normalize(L2 + V);
+  let sp2 = pow(max(dot(N, H2), 0.0), 50.0) * 0.3;
+  let L3 = normalize(vec3f(0.1, 0.3, 1.0));
+  let spB = pow(max(dot(N, L3), 0.0), 6.0) * 0.1;
+  let L4 = normalize(vec3f(0.0, 0.9, 0.4));
+  let H4 = normalize(L4 + V);
+  let sp4 = pow(max(dot(N, H4), 0.0), 120.0) * 0.6;
+  let totalSpec = (sp1 + sp2 + spB + sp4) * u.spec;
+
+  // Inner border / stroke highlight
+  let borderWidth = 1.5;
+  let innerStroke = smoothstep(-borderWidth - 1.0, -borderWidth, sdf)
+                  * (1.0 - smoothstep(-1.0, 0.0, sdf));
+  let topBias = 0.5 + 0.5 * (-in.localPx.y / half_.y);
+  let innerStrokeFinal = innerStroke * (0.4 + 0.6 * topBias);
+
+  // Edge highlight & inner glow
+  let rim = edge * u.edgeHL * 0.22;
+  let innerGlow = smoothstep(5.0, 0.0, -sdf) * u.edgeHL * 0.15;
+
+  // Environment-like reflection (fake)
+  let envRefl = (N.y * 0.5 + 0.5) * fres * 0.08;
+
+  // Composite glass effect
+  var fin = col;
+  fin += vec3f(totalSpec);
+  fin += vec3f(rim + innerGlow);
+  fin += vec3f(innerStrokeFinal * u.edgeHL * 0.55);
+  fin += vec3f(envRefl);
+  fin = mix(fin, vec3f(1.0), fres * 0.2);
+
+  // Shadow calculation (outside panel)
+  let sdfShadow = rrSDF(in.localPx - vec2f(0.0, u.shadowOffY), half_, r);
+  let shadowD = max(sdfShadow - 1.0, 0.0);
+  let spread = max(u.shadowSpread, 1.0);
+  let falloff = 1.0 / (spread * spread);
+  let outerShadow = exp(-shadowD * shadowD * falloff) * 0.65;
+  let contactShadow = exp(-shadowD * 0.08 / max(spread * 0.04, 0.01)) * 0.35;
+  let shadow = (outerShadow + contactShadow) * u.shadowAlpha;
+
+  // Select between shadow (outside) and glass (inside)
+  let isOutside = sdf > 0.0;
+  let finalColor = select(fin, vec3f(0.0), isOutside);
+  let finalAlpha = select(mask * u.alpha, shadow, isOutside);
+
+  return vec4f(finalColor, finalAlpha);
+}
+`,
+    y = class {
+      canvas;
+      device = null;
+      context = null;
+      format = "bgra8unorm";
+      blitPipeline = null;
+      blurPipeline = null;
+      glassPipeline = null;
+      quadBuffer = null;
+      panelBuffer = null;
+      blitUniformBuffer = null;
+      blurUniformBuffer = null;
+      glassUniformBuffer = null;
+      sampler = null;
+      targetCache = new Map();
+      activeTargets = null;
+      bgTexture = null;
+      bgTextureView = null;
+      width = 0;
+      height = 0;
+      _initPromise = null;
+      _initialized = !1;
+      constructor() {
+        ((this.canvas = document.createElement("canvas")),
+          (this.canvas.style.display = "none"),
+          document.body.appendChild(this.canvas));
+      }
+      async init() {
+        return this._initPromise
+          ? this._initPromise
+          : ((this._initPromise = this._doInit()), this._initPromise);
+      }
+      async _doInit() {
+        if (!navigator.gpu) return (console.warn("WebGPU not supported"), !1);
+        let e = await navigator.gpu.requestAdapter();
+        return e
+          ? ((this.device = await e.requestDevice()),
+            this.device
+              ? ((this.context = this.canvas.getContext("webgpu")),
+                this.context
+                  ? ((this.format = navigator.gpu.getPreferredCanvasFormat()),
+                    this.context.configure({
+                      device: this.device,
+                      format: this.format,
+                      alphaMode: "premultiplied",
+                    }),
+                    this._initPipelines(),
+                    this._initBuffers(),
+                    (this._initialized = !0),
+                    !0)
+                  : (console.warn("Failed to get WebGPU context"), !1))
+              : (console.warn("Failed to get WebGPU device"), !1))
+          : (console.warn("No WebGPU adapter found"), !1);
+      }
+      get initialized() {
+        return this._initialized;
+      }
+      _initPipelines() {
+        let e = this.device;
+        this.sampler = e.createSampler({
+          magFilter: "linear",
+          minFilter: "linear",
+          addressModeU: "clamp-to-edge",
+          addressModeV: "clamp-to-edge",
+        });
+        let t = e.createShaderModule({ code: q }),
+          r = e.createBindGroupLayout({
+            entries: [
+              {
+                binding: 0,
+                visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+                buffer: { type: "uniform" },
+              },
+              { binding: 1, visibility: GPUShaderStage.FRAGMENT, sampler: { type: "filtering" } },
+              { binding: 2, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "float" } },
+            ],
+          });
+        this.blitPipeline = e.createRenderPipeline({
+          layout: e.createPipelineLayout({ bindGroupLayouts: [r] }),
+          vertex: {
+            module: t,
+            entryPoint: "vertexMain",
+            buffers: [
+              {
+                arrayStride: 8,
+                attributes: [{ shaderLocation: 0, offset: 0, format: "float32x2" }],
+              },
+            ],
+          },
+          fragment: { module: t, entryPoint: "fragmentMain", targets: [{ format: "rgba8unorm" }] },
+          primitive: { topology: "triangle-strip" },
+        });
+        let n = e.createShaderModule({ code: k }),
+          i = e.createBindGroupLayout({
+            entries: [
+              {
+                binding: 0,
+                visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+                buffer: { type: "uniform" },
+              },
+              { binding: 1, visibility: GPUShaderStage.FRAGMENT, sampler: { type: "filtering" } },
+              { binding: 2, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "float" } },
+            ],
+          });
+        this.blurPipeline = e.createRenderPipeline({
+          layout: e.createPipelineLayout({ bindGroupLayouts: [i] }),
+          vertex: {
+            module: n,
+            entryPoint: "vertexMain",
+            buffers: [
+              {
+                arrayStride: 8,
+                attributes: [{ shaderLocation: 0, offset: 0, format: "float32x2" }],
+              },
+            ],
+          },
+          fragment: { module: n, entryPoint: "fragmentMain", targets: [{ format: "rgba8unorm" }] },
+          primitive: { topology: "triangle-strip" },
+        });
+        let s = e.createShaderModule({ code: W }),
+          l = e.createBindGroupLayout({
+            entries: [
+              {
+                binding: 0,
+                visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+                buffer: { type: "uniform" },
+              },
+              { binding: 1, visibility: GPUShaderStage.FRAGMENT, sampler: { type: "filtering" } },
+              { binding: 2, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "float" } },
+              { binding: 3, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "float" } },
+            ],
+          });
+        this.glassPipeline = e.createRenderPipeline({
+          layout: e.createPipelineLayout({ bindGroupLayouts: [l] }),
+          vertex: {
+            module: s,
+            entryPoint: "vertexMain",
+            buffers: [
+              {
+                arrayStride: 8,
+                attributes: [{ shaderLocation: 0, offset: 0, format: "float32x2" }],
+              },
+            ],
+          },
+          fragment: {
+            module: s,
+            entryPoint: "fragmentMain",
+            targets: [
+              {
+                format: this.format,
+                blend: {
+                  color: {
+                    srcFactor: "src-alpha",
+                    dstFactor: "one-minus-src-alpha",
+                    operation: "add",
+                  },
+                  alpha: { srcFactor: "one", dstFactor: "one-minus-src-alpha", operation: "add" },
+                },
+              },
+            ],
+          },
+          primitive: { topology: "triangle-strip" },
+        });
+      }
+      _initBuffers() {
+        let e = this.device;
+        ((this.quadBuffer = e.createBuffer({
+          size: 32,
+          usage: GPUBufferUsage.VERTEX,
+          mappedAtCreation: !0,
+        })),
+          new Float32Array(this.quadBuffer.getMappedRange()).set([-1, -1, 1, -1, -1, 1, 1, 1]),
+          this.quadBuffer.unmap(),
+          (this.panelBuffer = e.createBuffer({
+            size: 32,
+            usage: GPUBufferUsage.VERTEX,
+            mappedAtCreation: !0,
+          })),
+          new Float32Array(this.panelBuffer.getMappedRange()).set([
+            -0.5, -0.5, 0.5, -0.5, -0.5, 0.5, 0.5, 0.5,
+          ]),
+          this.panelBuffer.unmap(),
+          (this.blitUniformBuffer = e.createBuffer({
+            size: 16,
+            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+          })),
+          (this.blurUniformBuffer = e.createBuffer({
+            size: 16,
+            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+          })),
+          (this.glassUniformBuffer = e.createBuffer({
+            size: 112,
+            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+          })));
+      }
+      resize(e, t) {
+        if (!(this.width === e && this.height === t)) {
+          ((this.width = e), (this.height = t));
+          for (let r of this.targetCache.values()) this._freeTargetSet(r);
+          (this.targetCache.clear(), (this.activeTargets = null));
+        }
+      }
+      uploadAndBlur(e, t, r, n, i, s) {
+        if (!this._initialized || !this.device || !this._setActiveSize(n, i)) return;
+        let l = this.device,
+          a = this.width,
+          u = this.height,
+          o = this.activeTargets,
+          d = document.createElement("canvas");
+        ((d.width = a),
+          (d.height = u),
+          d.getContext("2d").drawImage(e, -t, -r),
+          (!this.bgTexture || this.bgTexture.width !== a || this.bgTexture.height !== u) &&
+            (this.bgTexture && this.bgTexture.destroy(),
+            (this.bgTexture = l.createTexture({
+              size: [a, u],
+              format: "rgba8unorm",
+              usage:
+                GPUTextureUsage.TEXTURE_BINDING |
+                GPUTextureUsage.COPY_DST |
+                GPUTextureUsage.RENDER_ATTACHMENT,
+            })),
+            (this.bgTextureView = this.bgTexture.createView())),
+          l.queue.copyExternalImageToTexture(
+            { source: d, flipY: !0 },
+            { texture: this.bgTexture },
+            [a, u],
+          ));
+        let f = l.createCommandEncoder();
+        this._blitPass(f, this.bgTextureView, o.bg.view, a, u, 1, 1, 0, 0);
+        let h = o.blurA.w,
+          b = o.blurA.h;
+        if ((this._blitPass(f, o.bg.view, o.blurA.view, h, b, 1, 1, 0, 0), s > 0)) {
+          let g = s * 2.5;
+          for (let p = 0; p < L; p++)
+            (this._blurPass(f, o.blurA.view, o.blurB.view, h, b, g / h, 0),
+              this._blurPass(f, o.blurB.view, o.blurA.view, h, b, 0, g / b));
+        }
+        l.queue.submit([f.finish()]);
+      }
+      _blitPass(e, t, r, n, i, s, l, a, u) {
+        let o = this.device;
+        o.queue.writeBuffer(this.blitUniformBuffer, 0, new Float32Array([s, l, a, u]));
+        let d = o.createBindGroup({
+            layout: this.blitPipeline.getBindGroupLayout(0),
+            entries: [
+              { binding: 0, resource: { buffer: this.blitUniformBuffer } },
+              { binding: 1, resource: this.sampler },
+              { binding: 2, resource: t },
+            ],
+          }),
+          c = e.beginRenderPass({
+            colorAttachments: [
+              {
+                view: r,
+                loadOp: "clear",
+                storeOp: "store",
+                clearValue: { r: 0, g: 0, b: 0, a: 0 },
+              },
+            ],
+          });
+        (c.setPipeline(this.blitPipeline),
+          c.setBindGroup(0, d),
+          c.setVertexBuffer(0, this.quadBuffer),
+          c.setViewport(0, 0, n, i, 0, 1),
+          c.draw(4),
+          c.end());
+      }
+      _blurPass(e, t, r, n, i, s, l) {
+        let a = this.device;
+        a.queue.writeBuffer(this.blurUniformBuffer, 0, new Float32Array([s, l, 0, 0]));
+        let u = a.createBindGroup({
+            layout: this.blurPipeline.getBindGroupLayout(0),
+            entries: [
+              { binding: 0, resource: { buffer: this.blurUniformBuffer } },
+              { binding: 1, resource: this.sampler },
+              { binding: 2, resource: t },
+            ],
+          }),
+          o = e.beginRenderPass({
+            colorAttachments: [
+              {
+                view: r,
+                loadOp: "clear",
+                storeOp: "store",
+                clearValue: { r: 0, g: 0, b: 0, a: 0 },
+              },
+            ],
+          });
+        (o.setPipeline(this.blurPipeline),
+          o.setBindGroup(0, u),
+          o.setVertexBuffer(0, this.quadBuffer),
+          o.setViewport(0, 0, n, i, 0, 1),
+          o.draw(4),
+          o.end());
+      }
+      renderGlassPanel(e, t, r, n) {
+        if (!this._initialized || !this.device || !this.context) return;
+        let i = this.device,
+          s = this.width,
+          l = this.height,
+          a = this.activeTargets,
+          u = new Float32Array([
+            s * 0.5,
+            l * 0.5,
+            t * n,
+            r * n,
+            s,
+            l,
+            e.cornerRadius * n,
+            T * n,
+            e.refraction,
+            e.chromAberration,
+            e.edgeHighlight,
+            e.specular,
+            e.fresnel,
+            e.distortion,
+            e.opacity,
+            e.saturation,
+            e.tintStrength,
+            e.zRadius * n,
+            e.brightness,
+            e.shadowOpacity,
+            e.shadowSpread * n,
+            e.shadowOffsetY * n,
+            e.bevelMode,
+            0,
+            0,
+            0,
+            0,
+            0,
+          ]);
+        i.queue.writeBuffer(this.glassUniformBuffer, 0, u);
+        let o = i.createBindGroup({
+            layout: this.glassPipeline.getBindGroupLayout(0),
+            entries: [
+              { binding: 0, resource: { buffer: this.glassUniformBuffer } },
+              { binding: 1, resource: this.sampler },
+              { binding: 2, resource: a.bg.view },
+              { binding: 3, resource: a.blurA.view },
+            ],
+          }),
+          d = i.createCommandEncoder(),
+          c = d.beginRenderPass({
+            colorAttachments: [
+              {
+                view: this.context.getCurrentTexture().createView(),
+                loadOp: "load",
+                storeOp: "store",
+              },
+            ],
+          });
+        (c.setPipeline(this.glassPipeline),
+          c.setBindGroup(0, o),
+          c.setVertexBuffer(0, this.panelBuffer),
+          c.setViewport(0, 0, s, l, 0, 1),
+          c.draw(4),
+          c.end(),
+          i.queue.submit([d.finish()]));
+      }
+      clear() {
+        if (!this._initialized || !this.device || !this.context) return;
+        let e = this.device.createCommandEncoder(),
+          t = e.beginRenderPass({
+            colorAttachments: [
+              {
+                view: this.context.getCurrentTexture().createView(),
+                loadOp: "clear",
+                storeOp: "store",
+                clearValue: { r: 0, g: 0, b: 0, a: 0 },
+              },
+            ],
+          });
+        (t.setViewport(0, 0, this.width, this.height, 0, 1),
+          t.end(),
+          this.device.queue.submit([e.finish()]));
+      }
+      destroy() {
+        for (let e of this.targetCache.values()) this._freeTargetSet(e);
+        (this.targetCache.clear(),
+          this.bgTexture && this.bgTexture.destroy(),
+          this.quadBuffer && this.quadBuffer.destroy(),
+          this.panelBuffer && this.panelBuffer.destroy(),
+          this.blitUniformBuffer && this.blitUniformBuffer.destroy(),
+          this.blurUniformBuffer && this.blurUniformBuffer.destroy(),
+          this.glassUniformBuffer && this.glassUniformBuffer.destroy(),
+          this.device?.destroy(),
+          this.canvas.remove());
+      }
+      _setActiveSize(e, t) {
+        if (e <= 0 || t <= 0) return !1;
+        ((this.width = e),
+          (this.height = t),
+          (this.canvas.width < e || this.canvas.height < t) &&
+            ((this.canvas.width = Math.max(this.canvas.width, e)),
+            (this.canvas.height = Math.max(this.canvas.height, t)),
+            this.context?.configure({
+              device: this.device,
+              format: this.format,
+              alphaMode: "premultiplied",
+            })));
+        let r = `${e}x${t}`,
+          n = this.targetCache.get(r);
+        return (
+          n ||
+            ((n = {
+              bg: this._makeTarget(e, t),
+              blurA: this._makeTarget(e, t),
+              blurB: this._makeTarget(e, t),
+            }),
+            this.targetCache.set(r, n)),
+          (this.activeTargets = n),
+          !0
+        );
+      }
+      _makeTarget(e, t) {
+        let r = this.device.createTexture({
+          size: [e, t],
+          format: "rgba8unorm",
+          usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.RENDER_ATTACHMENT,
+        });
+        return { texture: r, view: r.createView(), w: e, h: t };
+      }
+      _freeTarget(e) {
+        e && e.texture.destroy();
+      }
+      _freeTargetSet(e) {
+        (this._freeTarget(e.bg), this._freeTarget(e.blurA), this._freeTarget(e.blurB));
+      }
+    };
+  var R = class {
+    canvas;
+    ctx;
+    renderer;
+    sceneCanvas;
+    sceneCtx;
+    drawElementImage;
+    _initPromise;
+    _initialized = !1;
+    constructor(e) {
+      ((this.canvas = e),
+        (this.ctx = e.getContext("2d")),
+        (this.renderer = new y()),
+        (this.sceneCanvas = document.createElement("canvas")),
+        (this.sceneCtx = this.sceneCanvas.getContext("2d")));
+      let t = this.ctx;
+      ((this.drawElementImage = t.drawElementImage?.bind(t) ?? t.drawElement?.bind(t) ?? null),
+        (this._initPromise = this._initWebGPU()));
+    }
+    async _initWebGPU() {
+      try {
+        return (await this.renderer.init())
+          ? ((this._initialized = !0), console.log("LiquidGlass: WebGPU renderer initialized"), !0)
+          : (console.error("LiquidGlass: WebGPU not available"), !1);
+      } catch (e) {
+        return (console.error("LiquidGlass: WebGPU init failed", e), !1);
+      }
+    }
+    get isReady() {
+      return this._initialized;
+    }
+    async waitForInit() {
+      return this._initPromise;
+    }
+    render() {
+      let e = this.canvas.width,
+        t = this.canvas.height;
+      if (e === 0 || t === 0 || !this.drawElementImage || !this._initialized) return;
+      this.ctx.clearRect(0, 0, e, t);
+      let r = window.devicePixelRatio || 1,
+        n = this.canvas.getBoundingClientRect(),
+        i = Array.from(this.canvas.children),
+        s = Array.from(this.canvas.querySelectorAll(".liquid-glass")),
+        l = new Set(s);
+      i.length === 0 &&
+        !this.__lg_warn_empty &&
+        (console.warn("LiquidGlass: No children found inside the canvas to render."),
+        (this.__lg_warn_empty = !0));
+      for (let a of i)
+        if (!l.has(a)) {
+          let u = a,
+            o = this._getElementPosition(u, n);
+          if (o.w <= 0 || o.h <= 0) continue;
+          let d = o.x * r,
+            c = o.y * r;
+          try {
+            let f = this.drawElementImage(a, d, c);
+            f && (u.style.transform = f.toString());
+          } catch (f) {
+            a.__lg_error_logged ||
+              (console.warn(
+                `LiquidGlass: Failed to draw background element ${a.tagName}.${a.className}:`,
+                f.message || f,
+              ),
+              (a.__lg_error_logged = !0));
+          }
+        }
+      for (let a of s)
+        try {
+          this._renderGlassElement(a, n, r);
+        } catch (u) {
+          a.__lg_error_logged_glass ||
+            (console.error(
+              `LiquidGlass: Failed to render glass effect for ${a.tagName}.${a.className}:`,
+              u.message || u,
+            ),
+            (a.__lg_error_logged_glass = !0));
+        }
+    }
+    renderGlassElements() {
+      let e = this.canvas.width,
+        t = this.canvas.height;
+      if (e === 0 || t === 0 || !this.drawElementImage || !this._initialized) return;
+      let r = window.devicePixelRatio || 1,
+        n = this.canvas.getBoundingClientRect(),
+        i = this.canvas.querySelectorAll(".liquid-glass");
+      for (let s of i) this._renderGlassElement(s, n, r);
+    }
+    _parseCSSLength(e, t) {
+      return !e || e === "auto"
+        ? NaN
+        : ((e = e.trim()),
+          e.startsWith("calc(")
+            ? this._parseCalc(e, t)
+            : e.endsWith("%")
+              ? (parseFloat(e) / 100) * t
+              : parseFloat(e) || 0);
+    }
+    _parseCalc(e, t) {
+      let r = e.match(/calc\((.+)\)/);
+      if (!r) return 0;
+      let n = r[1].trim(),
+        i = n.match(/(.+)\s*\+\s*(.+)/),
+        s = n.match(/(.+)\s*-\s*(.+)/);
+      if (s) {
+        let l = this._parseCSSLength(s[1].trim(), t),
+          a = this._parseCSSLength(s[2].trim(), t);
+        return l - a;
+      }
+      if (i) {
+        let l = this._parseCSSLength(i[1].trim(), t),
+          a = this._parseCSSLength(i[2].trim(), t);
+        return l + a;
+      }
+      return this._parseCSSLength(n, t);
+    }
+    _parseTransform(e, t, r) {
+      let n = 0,
+        i = 0;
+      if (!e || e === "none") return { tx: n, ty: i };
+      let s = e.match(/translate\(\s*([^,)]+)(?:\s*,\s*([^)]+))?\s*\)/);
+      s &&
+        ((n = this._parseTranslateValue(s[1], t)),
+        (i = s[2] ? this._parseTranslateValue(s[2], r) : 0));
+      let l = e.match(/translateX\(\s*([^)]+)\s*\)/);
+      l && (n = this._parseTranslateValue(l[1], t));
+      let a = e.match(/translateY\(\s*([^)]+)\s*\)/);
+      a && (i = this._parseTranslateValue(a[1], r));
+      let u = e.match(/translate3d\(\s*([^,]+)\s*,\s*([^,]+)\s*,\s*[^)]+\s*\)/);
+      return (
+        u && ((n = this._parseTranslateValue(u[1], t)), (i = this._parseTranslateValue(u[2], r))),
+        { tx: n, ty: i }
+      );
+    }
+    _parseTranslateValue(e, t) {
+      return ((e = e.trim()), e.endsWith("%") ? (parseFloat(e) / 100) * t : parseFloat(e) || 0);
+    }
+    _getElementPosition(e, t) {
+      let r = getComputedStyle(e),
+        n = parseFloat(getComputedStyle(this.canvas).width) || this.canvas.width || 1536,
+        i = parseFloat(getComputedStyle(this.canvas).height) || this.canvas.height || 1024,
+        s = e.getBoundingClientRect(),
+        l = s.width || parseFloat(r.width) || 0,
+        a = s.height || parseFloat(r.height) || 0,
+        u = 0,
+        o = 0,
+        d = e.style,
+        c = d.left || r.left,
+        f = d.right || r.right,
+        h = d.top || r.top,
+        b = d.bottom || r.bottom,
+        g = this._parseCSSLength(c, n),
+        p = this._parseCSSLength(f, n),
+        v = this._parseCSSLength(h, i),
+        S = this._parseCSSLength(b, i),
+        P = parseFloat(r.marginLeft) || 0,
+        x = parseFloat(r.marginRight) || 0,
+        M = parseFloat(r.marginTop) || 0,
+        A = parseFloat(r.marginBottom) || 0,
+        G = !isNaN(g),
+        U = !isNaN(p);
+      G && U && g === 0 && p === 0
+        ? (u = (n - l) / 2)
+        : (G && U) || G
+          ? (u = g + P)
+          : U && (u = n - l - p - x);
+      let B = !isNaN(v),
+        C = !isNaN(S);
+      B && C && v === 0 && S === 0
+        ? (o = (i - a) / 2)
+        : (B && C) || B
+          ? (o = v + M)
+          : C && (o = i - a - S - A);
+      let { tx: V, ty: F } = this._parseTransform(r.transform, l, a);
+      return ((u += V), (o += F), { x: u, y: o, w: l, h: a });
+    }
+    _renderGlassElement(e, t, r) {
+      if (!this.drawElementImage) return;
+      let n = this._getConfigFromCSS(e),
+        i = this._getElementPosition(e, t),
+        s = i.x,
+        l = i.y,
+        a = i.w,
+        u = i.h,
+        o = s * r,
+        d = l * r,
+        c = a * r,
+        f = u * r,
+        h = T * r,
+        b = o - h,
+        g = d - h,
+        p = c + h * 2,
+        v = f + h * 2;
+      this._captureRegion(b, g, p, v);
+      let S = Math.round(p),
+        P = Math.round(v);
+      (this.renderer.clear(),
+        this.renderer.uploadAndBlur(this.sceneCanvas, 0, 0, S, P, n.blurAmount),
+        this.renderer.renderGlassPanel(n, a, u, r),
+        this.ctx.drawImage(this.renderer.canvas, 0, 0, p, v, b, g, p, v));
+      try {
+        let x = this._drawGlassElementContent(e, o, d);
+        x && (e.style.transform = x.toString());
+      } catch (x) {
+        e.__lg_error_logged ||
+          (console.warn(
+            `LiquidGlass: Failed to draw glass element ${e.tagName}.${e.className}:`,
+            x,
+          ),
+          (e.__lg_error_logged = !0));
+      }
+    }
+    _drawGlassElementContent(e, t, r) {
+      if (!this.drawElementImage) return;
+      let n = this._suppressGlassChrome(e);
+      try {
+        return this.drawElementImage(e, t, r);
+      } finally {
+        this._restoreInlineStyles(e, n);
+      }
+    }
+    _suppressGlassChrome(e) {
+      let t = new Map(),
+        r = [
+          "background",
+          "backgroundColor",
+          "backgroundImage",
+          "borderColor",
+          "boxShadow",
+          "filter",
+          "outlineColor",
+        ];
+      for (let n of r) t.set(n, e.style[n]);
+      return (
+        (e.style.background = "transparent"),
+        (e.style.backgroundColor = "transparent"),
+        (e.style.backgroundImage = "none"),
+        (e.style.borderColor = "transparent"),
+        (e.style.boxShadow = "none"),
+        (e.style.filter = "none"),
+        (e.style.outlineColor = "transparent"),
+        t
+      );
+    }
+    _restoreInlineStyles(e, t) {
+      for (let [r, n] of t) e.style[r] = n;
+    }
+    _captureRegion(e, t, r, n) {
+      let i = Math.round(r),
+        s = Math.round(n);
+      ((this.sceneCanvas.width !== i || this.sceneCanvas.height !== s) &&
+        ((this.sceneCanvas.width = i), (this.sceneCanvas.height = s)),
+        (this.sceneCtx.fillStyle = "#ffffff"),
+        this.sceneCtx.fillRect(0, 0, i, s),
+        this.sceneCtx.drawImage(this.canvas, e, t, r, n, 0, 0, i, s));
+    }
+    _getConfigFromCSS(e) {
+      let t = getComputedStyle(e),
+        r = { ...w };
+      for (let [n, i] of Object.entries(_)) {
+        let s = t.getPropertyValue(n).trim();
+        if (s) {
+          let l = parseFloat(s);
+          isNaN(l) || (r[i] = l);
+        }
+      }
+      return r;
+    }
+    destroy() {
+      this.renderer.destroy();
+    }
+  };
+  return I(Y);
+})();
diff --git a/docs/public/catalog/blocks/ios26-liquid-glass/models/hyperframes-desktop.png b/docs/public/catalog/blocks/ios26-liquid-glass/models/hyperframes-desktop.png
new file mode 100644
index 0000000000..2f168445ca
Binary files /dev/null and b/docs/public/catalog/blocks/ios26-liquid-glass/models/hyperframes-desktop.png differ
diff --git a/docs/public/catalog/blocks/ios26-liquid-glass/models/hyperframes-mobile.png b/docs/public/catalog/blocks/ios26-liquid-glass/models/hyperframes-mobile.png
new file mode 100644
index 0000000000..3995bb6f98
Binary files /dev/null and b/docs/public/catalog/blocks/ios26-liquid-glass/models/hyperframes-mobile.png differ
diff --git a/docs/public/catalog/blocks/ios26-liquid-glass/models/iphone.glb b/docs/public/catalog/blocks/ios26-liquid-glass/models/iphone.glb
new file mode 100644
index 0000000000..f042300855
Binary files /dev/null and b/docs/public/catalog/blocks/ios26-liquid-glass/models/iphone.glb differ
diff --git a/docs/public/catalog/blocks/ios26-liquid-glass/models/macbook.glb b/docs/public/catalog/blocks/ios26-liquid-glass/models/macbook.glb
new file mode 100644
index 0000000000..762511110a
Binary files /dev/null and b/docs/public/catalog/blocks/ios26-liquid-glass/models/macbook.glb differ
diff --git a/docs/public/catalog/blocks/light-leak/light-leak.html b/docs/public/catalog/blocks/light-leak/light-leak.html
new file mode 100644
index 0000000000..8385d63a1a
--- /dev/null
+++ b/docs/public/catalog/blocks/light-leak/light-leak.html
@@ -0,0 +1,365 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      @import url("https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Bebas+Neue&family=JetBrains+Mono:wght@400;700&family=Lato:wght@400;700&display=block");
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <style>
+        [data-composition-id="main"] {
+          width: 1920px;
+          height: 1080px;
+          overflow: hidden;
+          position: relative;
+          background: #001524;
+        }
+
+        /* Blueprint grid */
+        .bp-grid {
+          position: absolute;
+          inset: 0;
+          background-image:
+            linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
+            linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
+          background-size: 40px 40px;
+          pointer-events: none;
+        }
+
+        /* Layout */
+        .bp-left {
+          position: absolute;
+          left: 0;
+          top: 0;
+          bottom: 0;
+          width: 1200px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .bp-right {
+          position: absolute;
+          right: 0;
+          top: 0;
+          bottom: 0;
+          width: 720px;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          padding: 60px 60px 60px 40px;
+        }
+        .bp-divider {
+          position: absolute;
+          left: 1200px;
+          top: 60px;
+          bottom: 60px;
+          width: 1px;
+          background: #fb8b24;
+          opacity: 0.15;
+        }
+        .bp-number {
+          font-family: "Space Mono", monospace;
+          font-size: 14px;
+          font-weight: 700;
+          letter-spacing: 0.4em;
+          text-transform: uppercase;
+          position: absolute;
+          top: 40px;
+          left: 60px;
+          color: #fb8b24;
+        }
+
+        /* Right panel typography */
+        .bp-name {
+          font-family: "Bebas Neue", sans-serif;
+          font-size: 38px;
+          letter-spacing: 0.08em;
+          margin-bottom: 20px;
+          color: #fb8b24;
+        }
+        .bp-plabel {
+          font-family: "Space Mono", monospace;
+          font-size: 11px;
+          font-weight: 700;
+          letter-spacing: 0.3em;
+          text-transform: uppercase;
+          margin-bottom: 10px;
+          color: #fb8b24;
+          opacity: 0.5;
+        }
+        .bp-prompt {
+          font-family: "JetBrains Mono", monospace;
+          font-size: 20px;
+          line-height: 1.6;
+          padding: 16px 20px;
+          border-radius: 6px;
+          margin-bottom: 20px;
+          color: #fb8b24;
+          background: rgba(251, 139, 36, 0.06);
+          border: 1px solid rgba(251, 139, 36, 0.12);
+        }
+        .bp-desc {
+          font-family: "Lato", sans-serif;
+          font-size: 17px;
+          line-height: 1.6;
+          color: #708d81;
+          opacity: 0.55;
+        }
+
+        /* GL scenes (hidden, just for texture capture) */
+        .scene {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1200px;
+          height: 1080px;
+          overflow: hidden;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .scene-label {
+          font-family: "Bebas Neue", sans-serif;
+          font-size: 140px;
+          letter-spacing: 0.06em;
+          opacity: 0.12;
+        }
+      </style>
+
+      <div class="bp-grid"></div>
+      <div class="bp-divider"></div>
+      <div class="bp-number">14 / 14</div>
+
+      <!-- GL demo scenes (captured as textures, then hidden) -->
+      <div id="s1" class="scene" style="background: #001524">
+        <div class="scene-label" style="color: #fb8b24">SCENE A</div>
+      </div>
+      <div id="s2" class="scene" style="background: #fb8b24; opacity: 0">
+        <div class="scene-label" style="color: #001524">SCENE B</div>
+      </div>
+
+      <!-- GL canvas (left panel only) -->
+      <canvas
+        id="gl-canvas"
+        width="1200"
+        height="1080"
+        style="
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1200px;
+          height: 1080px;
+          z-index: 10;
+          pointer-events: none;
+          display: none;
+        "
+      >
+      </canvas>
+
+      <!-- Right panel metadata -->
+      <div class="bp-right">
+        <div class="bp-name">Light Leak</div>
+        <div class="bp-plabel">Prompt</div>
+        <div class="bp-prompt">"use light leak shader transition"</div>
+        <div class="bp-desc">
+          Beer-Lambert exponential falloff with ACES tone mapping and directional flare streak.
+        </div>
+      </div>
+
+      <div
+        id="driver"
+        class="clip"
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+      var glCanvas = document.getElementById("gl-canvas");
+      var gl = glCanvas.getContext("webgl", { preserveDrawingBuffer: true });
+      if (!gl) {
+        console.warn("WebGL not available");
+        window.__timelines["main"] = gsap.timeline({ paused: true });
+      } else {
+        gl.viewport(0, 0, 1200, 1080);
+        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
+        var sceneTextures = {};
+
+        function captureScene(sceneId) {
+          var scene = document.getElementById(sceneId);
+          var origOpacity = scene.style.opacity;
+          var origZ = scene.style.zIndex;
+          scene.style.opacity = "1";
+          scene.style.zIndex = "999";
+          scene.offsetHeight;
+          var c = document.createElement("canvas");
+          c.width = 1200;
+          c.height = 1080;
+          var ctx = c.getContext("2d");
+          ctx.fillStyle = window.getComputedStyle(scene).backgroundColor;
+          ctx.fillRect(0, 0, 1200, 1080);
+          var sr = scene.getBoundingClientRect();
+          var els = scene.querySelectorAll("*");
+          for (var i = 0; i < els.length; i++) {
+            var el = els[i],
+              cs = window.getComputedStyle(el);
+            if (cs.display === "none" || cs.visibility === "hidden") continue;
+            var r = el.getBoundingClientRect();
+            if (r.width < 1 || r.height < 1) continue;
+            var x = r.left - sr.left,
+              y = r.top - sr.top,
+              w = r.width,
+              h = r.height;
+            ctx.save();
+            ctx.globalAlpha = parseFloat(cs.opacity) || 1;
+            var bg = cs.backgroundColor;
+            if (bg && bg !== "rgba(0, 0, 0, 0)" && bg !== "transparent") {
+              ctx.fillStyle = bg;
+              ctx.fillRect(x, y, w, h);
+            }
+            var hasChildEls = el.querySelector("div,span,img,video");
+            var text = "";
+            for (var j = 0; j < el.childNodes.length; j++)
+              if (el.childNodes[j].nodeType === 3) text += el.childNodes[j].textContent;
+            text = text.trim();
+            if (text && !hasChildEls) {
+              ctx.font = cs.fontWeight + " " + cs.fontSize + " " + cs.fontFamily;
+              ctx.fillStyle = cs.color;
+              if (cs.letterSpacing && cs.letterSpacing !== "normal")
+                ctx.letterSpacing = cs.letterSpacing;
+              ctx.textAlign = "center";
+              ctx.textBaseline = "middle";
+              ctx.fillText(text, x + w / 2, y + h / 2);
+            }
+            ctx.restore();
+          }
+          scene.style.opacity = origOpacity;
+          scene.style.zIndex = origZ;
+          var tex = gl.createTexture();
+          gl.bindTexture(gl.TEXTURE_2D, tex);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+          gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, c);
+          sceneTextures[sceneId] = tex;
+        }
+
+        var vertSrc =
+          "attribute vec2 a_pos; varying vec2 v_uv; void main(){" +
+          "v_uv=a_pos*0.5+0.5; v_uv.y=1.0-v_uv.y; gl_Position=vec4(a_pos,0,1);}";
+        var quadBuf = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);
+        gl.bufferData(
+          gl.ARRAY_BUFFER,
+          new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),
+          gl.STATIC_DRAW,
+        );
+        function compileShader(src, type) {
+          var s = gl.createShader(type);
+          gl.shaderSource(s, src);
+          gl.compileShader(s);
+          if (!gl.getShaderParameter(s, gl.COMPILE_STATUS))
+            console.error("Shader:", gl.getShaderInfoLog(s));
+          return s;
+        }
+        function mkProg(fragSrc) {
+          var p = gl.createProgram();
+          gl.attachShader(p, compileShader(vertSrc, gl.VERTEX_SHADER));
+          gl.attachShader(p, compileShader(fragSrc, gl.FRAGMENT_SHADER));
+          gl.linkProgram(p);
+          if (!gl.getProgramParameter(p, gl.LINK_STATUS))
+            console.error("Link:", gl.getProgramInfoLog(p));
+          return p;
+        }
+
+        var H =
+          "precision mediump float;" +
+          "varying vec2 v_uv;" +
+          "uniform sampler2D u_from, u_to;" +
+          "uniform float u_progress;" +
+          "uniform vec2 u_resolution;\n";
+
+        var progPass = mkProg(H + "void main(){gl_FragColor=texture2D(u_from,v_uv);}");
+        var progTrans = mkProg(
+          H +
+            "vec3 aces(vec3 x){return clamp((x*(2.51*x+.03))/(x*(2.43*x+.59)+.14),0.,1.);}void main(){vec4 A=texture2D(u_from,v_uv),B=texture2D(u_to,v_uv);vec2 lp=vec2(1.3,-.2);float dist=length(v_uv-lp);float leak=clamp(exp(-dist*1.8)*u_progress*4.,0.,1.);vec3 warmColor=mix(vec3(1.,.5,.15),vec3(1.,.9,.75),dist*.7);float flare=exp(-abs(v_uv.y-(-.2+v_uv.x*.3))*15.)*leak*.3;vec3 overexposed=A.rgb+warmColor*leak*3.+vec3(1.,.8,.5)*flare;overexposed=aces(overexposed);gl_FragColor=vec4(mix(overexposed,B.rgb,smoothstep(.15,.85,u_progress)),1.);}",
+        );
+
+        function renderShader(prog, texFrom, texTo, progress) {
+          gl.useProgram(prog);
+          gl.activeTexture(gl.TEXTURE0);
+          gl.bindTexture(gl.TEXTURE_2D, texFrom);
+          gl.uniform1i(gl.getUniformLocation(prog, "u_from"), 0);
+          gl.activeTexture(gl.TEXTURE1);
+          gl.bindTexture(gl.TEXTURE_2D, texTo);
+          gl.uniform1i(gl.getUniformLocation(prog, "u_to"), 1);
+          gl.uniform1f(gl.getUniformLocation(prog, "u_progress"), progress);
+          gl.uniform2f(gl.getUniformLocation(prog, "u_resolution"), 1200, 1080);
+          var pos = gl.getAttribLocation(prog, "a_pos");
+          gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);
+          gl.enableVertexAttribArray(pos);
+          gl.vertexAttribPointer(pos, 2, gl.FLOAT, false, 0, 0);
+          gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+        }
+
+        function easeInOut(p) {
+          return p < 0.5 ? 2 * p * p : 1 - Math.pow(-2 * p + 2, 2) / 2;
+        }
+
+        captureScene("s1");
+        captureScene("s2");
+        glCanvas.style.display = "block";
+        renderShader(progPass, sceneTextures["s1"], sceneTextures["s1"], 0);
+        document.querySelectorAll(".scene").forEach(function (s) {
+          s.style.opacity = "0";
+        });
+
+        var tl = gsap.timeline({
+          paused: true,
+          onUpdate: function () {
+            var t = tl.time();
+            if (t >= 1.0 && t < 3.0) {
+              renderShader(
+                progTrans,
+                sceneTextures["s1"],
+                sceneTextures["s2"],
+                easeInOut((t - 1.0) / 2.0),
+              );
+            } else if (t >= 3.0) {
+              renderShader(progPass, sceneTextures["s2"], sceneTextures["s2"], 0);
+            } else {
+              renderShader(progPass, sceneTextures["s1"], sceneTextures["s1"], 0);
+            }
+          },
+        });
+        tl.to({ v: 0 }, { v: 1, duration: 4, ease: "none" }, 0);
+        window.__timelines["main"] = tl;
+      } // end if (gl)
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/liquid-glass-context-menu/lib/liquid-glass.iife.js b/docs/public/catalog/blocks/liquid-glass-context-menu/lib/liquid-glass.iife.js
new file mode 100644
index 0000000000..ae5210629b
--- /dev/null
+++ b/docs/public/catalog/blocks/liquid-glass-context-menu/lib/liquid-glass.iife.js
@@ -0,0 +1,1048 @@
+var LiquidGlass = (() => {
+  var E = Object.defineProperty;
+  var D = Object.getOwnPropertyDescriptor;
+  var z = Object.getOwnPropertyNames;
+  var N = Object.prototype.hasOwnProperty;
+  var O = (m, e) => {
+      for (var t in e) E(m, t, { get: e[t], enumerable: !0 });
+    },
+    H = (m, e, t, r) => {
+      if ((e && typeof e == "object") || typeof e == "function")
+        for (let n of z(e))
+          !N.call(m, n) &&
+            n !== t &&
+            E(m, n, { get: () => e[n], enumerable: !(r = D(e, n)) || r.enumerable });
+      return m;
+    };
+  var I = (m) => H(E({}, "__esModule", { value: !0 }), m);
+  var Y = {};
+  O(Y, {
+    CSS_PROPERTY_MAP: () => _,
+    DEFAULTS: () => w,
+    GlassRendererGPU: () => y,
+    LiquidGlassCanvas: () => R,
+  });
+  var w = {
+      blurAmount: 0,
+      refraction: 0.69,
+      chromAberration: 0.05,
+      edgeHighlight: 0.05,
+      specular: 0,
+      fresnel: 1,
+      distortion: 0,
+      cornerRadius: 65,
+      zRadius: 40,
+      opacity: 1,
+      saturation: 0,
+      tintStrength: 0,
+      brightness: 0,
+      shadowOpacity: 0.3,
+      shadowSpread: 10,
+      shadowOffsetY: 1,
+      bevelMode: 0,
+    },
+    _ = {
+      "--lg-blur": "blurAmount",
+      "--lg-refraction": "refraction",
+      "--lg-chrom-aberration": "chromAberration",
+      "--lg-edge-highlight": "edgeHighlight",
+      "--lg-specular": "specular",
+      "--lg-fresnel": "fresnel",
+      "--lg-distortion": "distortion",
+      "--lg-corner-radius": "cornerRadius",
+      "--lg-z-radius": "zRadius",
+      "--lg-opacity": "opacity",
+      "--lg-saturation": "saturation",
+      "--lg-tint": "tintStrength",
+      "--lg-brightness": "brightness",
+      "--lg-shadow-opacity": "shadowOpacity",
+      "--lg-shadow-spread": "shadowSpread",
+      "--lg-shadow-offset-y": "shadowOffsetY",
+      "--lg-bevel-mode": "bevelMode",
+    },
+    L = 6,
+    T = 20;
+  var q = `// Blit shader - copy texture with UV transform
+
+struct BlitUniforms {
+  scale: vec2f,
+  offset: vec2f,
+}
+
+@group(0) @binding(0) var<uniform> u: BlitUniforms;
+@group(0) @binding(1) var texSampler: sampler;
+@group(0) @binding(2) var tex: texture_2d<f32>;
+
+struct VertexOutput {
+  @builtin(position) position: vec4f,
+  @location(0) uv: vec2f,
+}
+
+@vertex
+fn vertexMain(@location(0) pos: vec2f) -> VertexOutput {
+  var out: VertexOutput;
+  out.uv = pos * 0.5 + 0.5;
+  out.position = vec4f(pos, 0.0, 1.0);
+  return out;
+}
+
+@fragment
+fn fragmentMain(in: VertexOutput) -> @location(0) vec4f {
+  return textureSample(tex, texSampler, in.uv * u.scale + u.offset);
+}
+`,
+    k = `// Blur shader - 9-tap Gaussian blur (single direction)
+
+struct BlurUniforms {
+  dir: vec2f,
+  _pad: vec2f,
+}
+
+@group(0) @binding(0) var<uniform> u: BlurUniforms;
+@group(0) @binding(1) var texSampler: sampler;
+@group(0) @binding(2) var tex: texture_2d<f32>;
+
+struct VertexOutput {
+  @builtin(position) position: vec4f,
+  @location(0) uv: vec2f,
+}
+
+@vertex
+fn vertexMain(@location(0) pos: vec2f) -> VertexOutput {
+  var out: VertexOutput;
+  out.uv = pos * 0.5 + 0.5;
+  out.position = vec4f(pos, 0.0, 1.0);
+  return out;
+}
+
+@fragment
+fn fragmentMain(in: VertexOutput) -> @location(0) vec4f {
+  var s = textureSample(tex, texSampler, in.uv) * 0.227027;
+  s += textureSample(tex, texSampler, in.uv + u.dir * 1.0) * 0.194594;
+  s += textureSample(tex, texSampler, in.uv - u.dir * 1.0) * 0.194594;
+  s += textureSample(tex, texSampler, in.uv + u.dir * 2.0) * 0.121622;
+  s += textureSample(tex, texSampler, in.uv - u.dir * 2.0) * 0.121622;
+  s += textureSample(tex, texSampler, in.uv + u.dir * 3.0) * 0.054054;
+  s += textureSample(tex, texSampler, in.uv - u.dir * 3.0) * 0.054054;
+  s += textureSample(tex, texSampler, in.uv + u.dir * 4.0) * 0.016216;
+  s += textureSample(tex, texSampler, in.uv - u.dir * 4.0) * 0.016216;
+  return s;
+}
+`,
+    W = `// Glass shader - the core liquid glass effect
+
+struct GlassUniforms {
+  center: vec2f,
+  size: vec2f,
+  res: vec2f,
+  radius: f32,
+  pad: f32,
+  refract: f32,
+  chroma: f32,
+  edgeHL: f32,
+  spec: f32,
+  fresnel: f32,
+  distort: f32,
+  alpha: f32,
+  sat: f32,
+  tint: f32,
+  zRadius: f32,
+  brightness: f32,
+  shadowAlpha: f32,
+  shadowSpread: f32,
+  shadowOffY: f32,
+  bevelMode: f32,
+  _pad: vec2f,
+}
+
+@group(0) @binding(0) var<uniform> u: GlassUniforms;
+@group(0) @binding(1) var texSampler: sampler;
+@group(0) @binding(2) var bgTex: texture_2d<f32>;
+@group(0) @binding(3) var blurTex: texture_2d<f32>;
+
+struct VertexOutput {
+  @builtin(position) position: vec4f,
+  @location(0) localPx: vec2f,
+  @location(1) screenUV: vec2f,
+}
+
+@vertex
+fn vertexMain(@location(0) pos: vec2f) -> VertexOutput {
+  var out: VertexOutput;
+  let total = u.size + vec2f(u.pad * 2.0);
+  out.localPx = pos * total;
+  let px = u.center + pos * total;
+  out.screenUV = vec2f(px.x / u.res.x, 1.0 - px.y / u.res.y);
+  var ndc = (px / u.res) * 2.0 - 1.0;
+  ndc.y = -ndc.y;
+  out.position = vec4f(ndc, 0.0, 1.0);
+  return out;
+}
+
+// Rounded-rect signed distance
+fn rrSDF(p: vec2f, b: vec2f, r: f32) -> f32 {
+  let q = abs(p) - b + vec2f(r);
+  return min(max(q.x, q.y), 0.0) + length(max(q, vec2f(0.0))) - r;
+}
+
+// Bevel height field
+fn bevelHeight(d: f32, zR: f32) -> f32 {
+  if (d <= 0.0) { return 0.0; }
+  if (d >= zR) { return zR; }
+  return sqrt(d * (2.0 * zR - d));
+}
+
+fn hash(p: vec2f) -> f32 {
+  return fract(sin(dot(p, vec2f(127.1, 311.7))) * 43758.5453);
+}
+
+@fragment
+fn fragmentMain(in: VertexOutput) -> @location(0) vec4f {
+  let half_ = u.size * 0.5;
+  let r = min(u.radius, min(half_.x, half_.y));
+  let sdf = rrSDF(in.localPx, half_, r);
+
+  // Anti-aliased mask
+  let mask = 1.0 - smoothstep(-1.5, 0.5, sdf);
+
+  let maxD = min(half_.x, half_.y);
+  let inside = -sdf;
+  let edge = smoothstep(maxD * 0.35, 0.0, inside);
+
+  // Surface normal via bevel height field
+  let zR = u.zRadius;
+  let e = 2.0;
+  let dC = inside;
+  let dR = -rrSDF(in.localPx + vec2f(e, 0.0), half_, r);
+  let dL = -rrSDF(in.localPx - vec2f(e, 0.0), half_, r);
+  let dU = -rrSDF(in.localPx + vec2f(0.0, e), half_, r);
+  let dD = -rrSDF(in.localPx - vec2f(0.0, e), half_, r);
+  let hC = bevelHeight(dC, zR);
+  let hR = bevelHeight(dR, zR);
+  let hL = bevelHeight(dL, zR);
+  let hU = bevelHeight(dU, zR);
+  let hD = bevelHeight(dD, zR);
+  let hGrad = vec2f(hR - hL, hU - hD) / (2.0 * e);
+  let N = normalize(vec3f(-hGrad, 1.0));
+
+  let depth = smoothstep(0.0, zR, inside);
+
+  // Refraction - compute both modes and select
+  let pxToUV = vec2f(1.0, -1.0) / u.res;
+  let ior = 1.5;
+  let refrPow = 1.0 - 1.0 / ior;
+  let thickness = hC * 2.0;
+  let thickNorm = thickness / max(zR * 2.0, 1.0);
+
+  // Biconvex mode
+  let exitRefr = hGrad * refrPow;
+  let entryRefr = hGrad * refrPow;
+  let throughRefr = entryRefr * thickNorm * 0.5;
+  var refrPxBiconvex = (exitRefr + entryRefr + throughRefr) * u.refract * 30.0;
+  let centerDir = -in.localPx / max(half_, vec2f(1.0));
+  refrPxBiconvex += centerDir * u.refract * 4.0 * depth;
+
+  // Dome mode
+  let refrPxDome = -in.localPx * u.refract * depth * 0.35;
+
+  // Select based on bevel mode
+  let refrPx = select(refrPxBiconvex, refrPxDome, u.bevelMode >= 0.5);
+  let refr = refrPx * pxToUV;
+
+  // Micro-distortion noise
+  let ns = in.localPx * 0.08;
+  let absPxToUV = vec2f(1.0) / u.res;
+  let micro = (vec2f(hash(ns), hash(ns + vec2f(37.0))) - 0.5) * u.distort * 4.0 * absPxToUV;
+
+  // Chromatic aberration
+  let caS = u.chroma * 18.0 * (edge * 0.7 + 0.3) * 2.0;
+  let caD = N.xy * caS * pxToUV;
+  let base = in.screenUV + refr + micro;
+
+  // Sample textures (must be in uniform control flow)
+  let sharpR = textureSample(bgTex, texSampler, base + caD).r;
+  let sharpG = textureSample(bgTex, texSampler, base).g;
+  let sharpB = textureSample(bgTex, texSampler, base - caD).b;
+  let sharp = vec3f(sharpR, sharpG, sharpB);
+
+  let blurR = textureSample(blurTex, texSampler, base + caD).r;
+  let blurG = textureSample(blurTex, texSampler, base).g;
+  let blurB = textureSample(blurTex, texSampler, base - caD).b;
+  let blur = vec3f(blurR, blurG, blurB);
+
+  // Edge-weighted blur mix
+  let edgeMix = 1.0 - edge * 0.15;
+  var col = mix(sharp, blur, edgeMix);
+
+  // Brightness
+  col *= 1.0 + u.brightness;
+
+  // Saturation
+  let lum = dot(col, vec3f(0.299, 0.587, 0.114));
+  col = mix(vec3f(lum), col, 1.0 + u.sat);
+
+  // Cool glass tint
+  col = mix(col, col * vec3f(0.92, 0.95, 1.05), u.tint);
+  col *= 1.0 + 0.06 * depth;
+
+  // Fresnel
+  let fres = pow(1.0 - abs(N.z), 4.0) * u.fresnel;
+
+  // Specular highlights (multi-light Blinn-Phong)
+  let V = vec3f(0.0, 0.0, 1.0);
+  let L1 = normalize(vec3f(0.4, 0.7, 1.0));
+  let H1 = normalize(L1 + V);
+  let sp1 = pow(max(dot(N, H1), 0.0), 90.0);
+  let L2 = normalize(vec3f(-0.3, -0.5, 1.0));
+  let H2 = normalize(L2 + V);
+  let sp2 = pow(max(dot(N, H2), 0.0), 50.0) * 0.3;
+  let L3 = normalize(vec3f(0.1, 0.3, 1.0));
+  let spB = pow(max(dot(N, L3), 0.0), 6.0) * 0.1;
+  let L4 = normalize(vec3f(0.0, 0.9, 0.4));
+  let H4 = normalize(L4 + V);
+  let sp4 = pow(max(dot(N, H4), 0.0), 120.0) * 0.6;
+  let totalSpec = (sp1 + sp2 + spB + sp4) * u.spec;
+
+  // Inner border / stroke highlight
+  let borderWidth = 1.5;
+  let innerStroke = smoothstep(-borderWidth - 1.0, -borderWidth, sdf)
+                  * (1.0 - smoothstep(-1.0, 0.0, sdf));
+  let topBias = 0.5 + 0.5 * (-in.localPx.y / half_.y);
+  let innerStrokeFinal = innerStroke * (0.4 + 0.6 * topBias);
+
+  // Edge highlight & inner glow
+  let rim = edge * u.edgeHL * 0.22;
+  let innerGlow = smoothstep(5.0, 0.0, -sdf) * u.edgeHL * 0.15;
+
+  // Environment-like reflection (fake)
+  let envRefl = (N.y * 0.5 + 0.5) * fres * 0.08;
+
+  // Composite glass effect
+  var fin = col;
+  fin += vec3f(totalSpec);
+  fin += vec3f(rim + innerGlow);
+  fin += vec3f(innerStrokeFinal * u.edgeHL * 0.55);
+  fin += vec3f(envRefl);
+  fin = mix(fin, vec3f(1.0), fres * 0.2);
+
+  // Shadow calculation (outside panel)
+  let sdfShadow = rrSDF(in.localPx - vec2f(0.0, u.shadowOffY), half_, r);
+  let shadowD = max(sdfShadow - 1.0, 0.0);
+  let spread = max(u.shadowSpread, 1.0);
+  let falloff = 1.0 / (spread * spread);
+  let outerShadow = exp(-shadowD * shadowD * falloff) * 0.65;
+  let contactShadow = exp(-shadowD * 0.08 / max(spread * 0.04, 0.01)) * 0.35;
+  let shadow = (outerShadow + contactShadow) * u.shadowAlpha;
+
+  // Select between shadow (outside) and glass (inside)
+  let isOutside = sdf > 0.0;
+  let finalColor = select(fin, vec3f(0.0), isOutside);
+  let finalAlpha = select(mask * u.alpha, shadow, isOutside);
+
+  return vec4f(finalColor, finalAlpha);
+}
+`,
+    y = class {
+      canvas;
+      device = null;
+      context = null;
+      format = "bgra8unorm";
+      blitPipeline = null;
+      blurPipeline = null;
+      glassPipeline = null;
+      quadBuffer = null;
+      panelBuffer = null;
+      blitUniformBuffer = null;
+      blurUniformBuffer = null;
+      glassUniformBuffer = null;
+      sampler = null;
+      targetCache = new Map();
+      activeTargets = null;
+      bgTexture = null;
+      bgTextureView = null;
+      width = 0;
+      height = 0;
+      _initPromise = null;
+      _initialized = !1;
+      constructor() {
+        ((this.canvas = document.createElement("canvas")),
+          (this.canvas.style.display = "none"),
+          document.body.appendChild(this.canvas));
+      }
+      async init() {
+        return this._initPromise
+          ? this._initPromise
+          : ((this._initPromise = this._doInit()), this._initPromise);
+      }
+      async _doInit() {
+        if (!navigator.gpu) return (console.warn("WebGPU not supported"), !1);
+        let e = await navigator.gpu.requestAdapter();
+        return e
+          ? ((this.device = await e.requestDevice()),
+            this.device
+              ? ((this.context = this.canvas.getContext("webgpu")),
+                this.context
+                  ? ((this.format = navigator.gpu.getPreferredCanvasFormat()),
+                    this.context.configure({
+                      device: this.device,
+                      format: this.format,
+                      alphaMode: "premultiplied",
+                    }),
+                    this._initPipelines(),
+                    this._initBuffers(),
+                    (this._initialized = !0),
+                    !0)
+                  : (console.warn("Failed to get WebGPU context"), !1))
+              : (console.warn("Failed to get WebGPU device"), !1))
+          : (console.warn("No WebGPU adapter found"), !1);
+      }
+      get initialized() {
+        return this._initialized;
+      }
+      _initPipelines() {
+        let e = this.device;
+        this.sampler = e.createSampler({
+          magFilter: "linear",
+          minFilter: "linear",
+          addressModeU: "clamp-to-edge",
+          addressModeV: "clamp-to-edge",
+        });
+        let t = e.createShaderModule({ code: q }),
+          r = e.createBindGroupLayout({
+            entries: [
+              {
+                binding: 0,
+                visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+                buffer: { type: "uniform" },
+              },
+              { binding: 1, visibility: GPUShaderStage.FRAGMENT, sampler: { type: "filtering" } },
+              { binding: 2, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "float" } },
+            ],
+          });
+        this.blitPipeline = e.createRenderPipeline({
+          layout: e.createPipelineLayout({ bindGroupLayouts: [r] }),
+          vertex: {
+            module: t,
+            entryPoint: "vertexMain",
+            buffers: [
+              {
+                arrayStride: 8,
+                attributes: [{ shaderLocation: 0, offset: 0, format: "float32x2" }],
+              },
+            ],
+          },
+          fragment: { module: t, entryPoint: "fragmentMain", targets: [{ format: "rgba8unorm" }] },
+          primitive: { topology: "triangle-strip" },
+        });
+        let n = e.createShaderModule({ code: k }),
+          i = e.createBindGroupLayout({
+            entries: [
+              {
+                binding: 0,
+                visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+                buffer: { type: "uniform" },
+              },
+              { binding: 1, visibility: GPUShaderStage.FRAGMENT, sampler: { type: "filtering" } },
+              { binding: 2, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "float" } },
+            ],
+          });
+        this.blurPipeline = e.createRenderPipeline({
+          layout: e.createPipelineLayout({ bindGroupLayouts: [i] }),
+          vertex: {
+            module: n,
+            entryPoint: "vertexMain",
+            buffers: [
+              {
+                arrayStride: 8,
+                attributes: [{ shaderLocation: 0, offset: 0, format: "float32x2" }],
+              },
+            ],
+          },
+          fragment: { module: n, entryPoint: "fragmentMain", targets: [{ format: "rgba8unorm" }] },
+          primitive: { topology: "triangle-strip" },
+        });
+        let s = e.createShaderModule({ code: W }),
+          l = e.createBindGroupLayout({
+            entries: [
+              {
+                binding: 0,
+                visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+                buffer: { type: "uniform" },
+              },
+              { binding: 1, visibility: GPUShaderStage.FRAGMENT, sampler: { type: "filtering" } },
+              { binding: 2, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "float" } },
+              { binding: 3, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "float" } },
+            ],
+          });
+        this.glassPipeline = e.createRenderPipeline({
+          layout: e.createPipelineLayout({ bindGroupLayouts: [l] }),
+          vertex: {
+            module: s,
+            entryPoint: "vertexMain",
+            buffers: [
+              {
+                arrayStride: 8,
+                attributes: [{ shaderLocation: 0, offset: 0, format: "float32x2" }],
+              },
+            ],
+          },
+          fragment: {
+            module: s,
+            entryPoint: "fragmentMain",
+            targets: [
+              {
+                format: this.format,
+                blend: {
+                  color: {
+                    srcFactor: "src-alpha",
+                    dstFactor: "one-minus-src-alpha",
+                    operation: "add",
+                  },
+                  alpha: { srcFactor: "one", dstFactor: "one-minus-src-alpha", operation: "add" },
+                },
+              },
+            ],
+          },
+          primitive: { topology: "triangle-strip" },
+        });
+      }
+      _initBuffers() {
+        let e = this.device;
+        ((this.quadBuffer = e.createBuffer({
+          size: 32,
+          usage: GPUBufferUsage.VERTEX,
+          mappedAtCreation: !0,
+        })),
+          new Float32Array(this.quadBuffer.getMappedRange()).set([-1, -1, 1, -1, -1, 1, 1, 1]),
+          this.quadBuffer.unmap(),
+          (this.panelBuffer = e.createBuffer({
+            size: 32,
+            usage: GPUBufferUsage.VERTEX,
+            mappedAtCreation: !0,
+          })),
+          new Float32Array(this.panelBuffer.getMappedRange()).set([
+            -0.5, -0.5, 0.5, -0.5, -0.5, 0.5, 0.5, 0.5,
+          ]),
+          this.panelBuffer.unmap(),
+          (this.blitUniformBuffer = e.createBuffer({
+            size: 16,
+            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+          })),
+          (this.blurUniformBuffer = e.createBuffer({
+            size: 16,
+            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+          })),
+          (this.glassUniformBuffer = e.createBuffer({
+            size: 112,
+            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+          })));
+      }
+      resize(e, t) {
+        if (!(this.width === e && this.height === t)) {
+          ((this.width = e), (this.height = t));
+          for (let r of this.targetCache.values()) this._freeTargetSet(r);
+          (this.targetCache.clear(), (this.activeTargets = null));
+        }
+      }
+      uploadAndBlur(e, t, r, n, i, s) {
+        if (!this._initialized || !this.device || !this._setActiveSize(n, i)) return;
+        let l = this.device,
+          a = this.width,
+          u = this.height,
+          o = this.activeTargets,
+          d = document.createElement("canvas");
+        ((d.width = a),
+          (d.height = u),
+          d.getContext("2d").drawImage(e, -t, -r),
+          (!this.bgTexture || this.bgTexture.width !== a || this.bgTexture.height !== u) &&
+            (this.bgTexture && this.bgTexture.destroy(),
+            (this.bgTexture = l.createTexture({
+              size: [a, u],
+              format: "rgba8unorm",
+              usage:
+                GPUTextureUsage.TEXTURE_BINDING |
+                GPUTextureUsage.COPY_DST |
+                GPUTextureUsage.RENDER_ATTACHMENT,
+            })),
+            (this.bgTextureView = this.bgTexture.createView())),
+          l.queue.copyExternalImageToTexture(
+            { source: d, flipY: !0 },
+            { texture: this.bgTexture },
+            [a, u],
+          ));
+        let f = l.createCommandEncoder();
+        this._blitPass(f, this.bgTextureView, o.bg.view, a, u, 1, 1, 0, 0);
+        let h = o.blurA.w,
+          b = o.blurA.h;
+        if ((this._blitPass(f, o.bg.view, o.blurA.view, h, b, 1, 1, 0, 0), s > 0)) {
+          let g = s * 2.5;
+          for (let p = 0; p < L; p++)
+            (this._blurPass(f, o.blurA.view, o.blurB.view, h, b, g / h, 0),
+              this._blurPass(f, o.blurB.view, o.blurA.view, h, b, 0, g / b));
+        }
+        l.queue.submit([f.finish()]);
+      }
+      _blitPass(e, t, r, n, i, s, l, a, u) {
+        let o = this.device;
+        o.queue.writeBuffer(this.blitUniformBuffer, 0, new Float32Array([s, l, a, u]));
+        let d = o.createBindGroup({
+            layout: this.blitPipeline.getBindGroupLayout(0),
+            entries: [
+              { binding: 0, resource: { buffer: this.blitUniformBuffer } },
+              { binding: 1, resource: this.sampler },
+              { binding: 2, resource: t },
+            ],
+          }),
+          c = e.beginRenderPass({
+            colorAttachments: [
+              {
+                view: r,
+                loadOp: "clear",
+                storeOp: "store",
+                clearValue: { r: 0, g: 0, b: 0, a: 0 },
+              },
+            ],
+          });
+        (c.setPipeline(this.blitPipeline),
+          c.setBindGroup(0, d),
+          c.setVertexBuffer(0, this.quadBuffer),
+          c.setViewport(0, 0, n, i, 0, 1),
+          c.draw(4),
+          c.end());
+      }
+      _blurPass(e, t, r, n, i, s, l) {
+        let a = this.device;
+        a.queue.writeBuffer(this.blurUniformBuffer, 0, new Float32Array([s, l, 0, 0]));
+        let u = a.createBindGroup({
+            layout: this.blurPipeline.getBindGroupLayout(0),
+            entries: [
+              { binding: 0, resource: { buffer: this.blurUniformBuffer } },
+              { binding: 1, resource: this.sampler },
+              { binding: 2, resource: t },
+            ],
+          }),
+          o = e.beginRenderPass({
+            colorAttachments: [
+              {
+                view: r,
+                loadOp: "clear",
+                storeOp: "store",
+                clearValue: { r: 0, g: 0, b: 0, a: 0 },
+              },
+            ],
+          });
+        (o.setPipeline(this.blurPipeline),
+          o.setBindGroup(0, u),
+          o.setVertexBuffer(0, this.quadBuffer),
+          o.setViewport(0, 0, n, i, 0, 1),
+          o.draw(4),
+          o.end());
+      }
+      renderGlassPanel(e, t, r, n) {
+        if (!this._initialized || !this.device || !this.context) return;
+        let i = this.device,
+          s = this.width,
+          l = this.height,
+          a = this.activeTargets,
+          u = new Float32Array([
+            s * 0.5,
+            l * 0.5,
+            t * n,
+            r * n,
+            s,
+            l,
+            e.cornerRadius * n,
+            T * n,
+            e.refraction,
+            e.chromAberration,
+            e.edgeHighlight,
+            e.specular,
+            e.fresnel,
+            e.distortion,
+            e.opacity,
+            e.saturation,
+            e.tintStrength,
+            e.zRadius * n,
+            e.brightness,
+            e.shadowOpacity,
+            e.shadowSpread * n,
+            e.shadowOffsetY * n,
+            e.bevelMode,
+            0,
+            0,
+            0,
+            0,
+            0,
+          ]);
+        i.queue.writeBuffer(this.glassUniformBuffer, 0, u);
+        let o = i.createBindGroup({
+            layout: this.glassPipeline.getBindGroupLayout(0),
+            entries: [
+              { binding: 0, resource: { buffer: this.glassUniformBuffer } },
+              { binding: 1, resource: this.sampler },
+              { binding: 2, resource: a.bg.view },
+              { binding: 3, resource: a.blurA.view },
+            ],
+          }),
+          d = i.createCommandEncoder(),
+          c = d.beginRenderPass({
+            colorAttachments: [
+              {
+                view: this.context.getCurrentTexture().createView(),
+                loadOp: "load",
+                storeOp: "store",
+              },
+            ],
+          });
+        (c.setPipeline(this.glassPipeline),
+          c.setBindGroup(0, o),
+          c.setVertexBuffer(0, this.panelBuffer),
+          c.setViewport(0, 0, s, l, 0, 1),
+          c.draw(4),
+          c.end(),
+          i.queue.submit([d.finish()]));
+      }
+      clear() {
+        if (!this._initialized || !this.device || !this.context) return;
+        let e = this.device.createCommandEncoder(),
+          t = e.beginRenderPass({
+            colorAttachments: [
+              {
+                view: this.context.getCurrentTexture().createView(),
+                loadOp: "clear",
+                storeOp: "store",
+                clearValue: { r: 0, g: 0, b: 0, a: 0 },
+              },
+            ],
+          });
+        (t.setViewport(0, 0, this.width, this.height, 0, 1),
+          t.end(),
+          this.device.queue.submit([e.finish()]));
+      }
+      destroy() {
+        for (let e of this.targetCache.values()) this._freeTargetSet(e);
+        (this.targetCache.clear(),
+          this.bgTexture && this.bgTexture.destroy(),
+          this.quadBuffer && this.quadBuffer.destroy(),
+          this.panelBuffer && this.panelBuffer.destroy(),
+          this.blitUniformBuffer && this.blitUniformBuffer.destroy(),
+          this.blurUniformBuffer && this.blurUniformBuffer.destroy(),
+          this.glassUniformBuffer && this.glassUniformBuffer.destroy(),
+          this.device?.destroy(),
+          this.canvas.remove());
+      }
+      _setActiveSize(e, t) {
+        if (e <= 0 || t <= 0) return !1;
+        ((this.width = e),
+          (this.height = t),
+          (this.canvas.width < e || this.canvas.height < t) &&
+            ((this.canvas.width = Math.max(this.canvas.width, e)),
+            (this.canvas.height = Math.max(this.canvas.height, t)),
+            this.context?.configure({
+              device: this.device,
+              format: this.format,
+              alphaMode: "premultiplied",
+            })));
+        let r = `${e}x${t}`,
+          n = this.targetCache.get(r);
+        return (
+          n ||
+            ((n = {
+              bg: this._makeTarget(e, t),
+              blurA: this._makeTarget(e, t),
+              blurB: this._makeTarget(e, t),
+            }),
+            this.targetCache.set(r, n)),
+          (this.activeTargets = n),
+          !0
+        );
+      }
+      _makeTarget(e, t) {
+        let r = this.device.createTexture({
+          size: [e, t],
+          format: "rgba8unorm",
+          usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.RENDER_ATTACHMENT,
+        });
+        return { texture: r, view: r.createView(), w: e, h: t };
+      }
+      _freeTarget(e) {
+        e && e.texture.destroy();
+      }
+      _freeTargetSet(e) {
+        (this._freeTarget(e.bg), this._freeTarget(e.blurA), this._freeTarget(e.blurB));
+      }
+    };
+  var R = class {
+    canvas;
+    ctx;
+    renderer;
+    sceneCanvas;
+    sceneCtx;
+    drawElementImage;
+    _initPromise;
+    _initialized = !1;
+    constructor(e) {
+      ((this.canvas = e),
+        (this.ctx = e.getContext("2d")),
+        (this.renderer = new y()),
+        (this.sceneCanvas = document.createElement("canvas")),
+        (this.sceneCtx = this.sceneCanvas.getContext("2d")));
+      let t = this.ctx;
+      ((this.drawElementImage = t.drawElementImage?.bind(t) ?? t.drawElement?.bind(t) ?? null),
+        (this._initPromise = this._initWebGPU()));
+    }
+    async _initWebGPU() {
+      try {
+        return (await this.renderer.init())
+          ? ((this._initialized = !0), console.log("LiquidGlass: WebGPU renderer initialized"), !0)
+          : (console.error("LiquidGlass: WebGPU not available"), !1);
+      } catch (e) {
+        return (console.error("LiquidGlass: WebGPU init failed", e), !1);
+      }
+    }
+    get isReady() {
+      return this._initialized;
+    }
+    async waitForInit() {
+      return this._initPromise;
+    }
+    render() {
+      let e = this.canvas.width,
+        t = this.canvas.height;
+      if (e === 0 || t === 0 || !this.drawElementImage || !this._initialized) return;
+      this.ctx.clearRect(0, 0, e, t);
+      let r = window.devicePixelRatio || 1,
+        n = this.canvas.getBoundingClientRect(),
+        i = Array.from(this.canvas.children),
+        s = Array.from(this.canvas.querySelectorAll(".liquid-glass")),
+        l = new Set(s);
+      i.length === 0 &&
+        !this.__lg_warn_empty &&
+        (console.warn("LiquidGlass: No children found inside the canvas to render."),
+        (this.__lg_warn_empty = !0));
+      for (let a of i)
+        if (!l.has(a)) {
+          let u = a,
+            o = this._getElementPosition(u, n);
+          if (o.w <= 0 || o.h <= 0) continue;
+          let d = o.x * r,
+            c = o.y * r;
+          try {
+            let f = this.drawElementImage(a, d, c);
+            f && (u.style.transform = f.toString());
+          } catch (f) {
+            a.__lg_error_logged ||
+              (console.warn(
+                `LiquidGlass: Failed to draw background element ${a.tagName}.${a.className}:`,
+                f.message || f,
+              ),
+              (a.__lg_error_logged = !0));
+          }
+        }
+      for (let a of s)
+        try {
+          this._renderGlassElement(a, n, r);
+        } catch (u) {
+          a.__lg_error_logged_glass ||
+            (console.error(
+              `LiquidGlass: Failed to render glass effect for ${a.tagName}.${a.className}:`,
+              u.message || u,
+            ),
+            (a.__lg_error_logged_glass = !0));
+        }
+    }
+    renderGlassElements() {
+      let e = this.canvas.width,
+        t = this.canvas.height;
+      if (e === 0 || t === 0 || !this.drawElementImage || !this._initialized) return;
+      let r = window.devicePixelRatio || 1,
+        n = this.canvas.getBoundingClientRect(),
+        i = this.canvas.querySelectorAll(".liquid-glass");
+      for (let s of i) this._renderGlassElement(s, n, r);
+    }
+    _parseCSSLength(e, t) {
+      return !e || e === "auto"
+        ? NaN
+        : ((e = e.trim()),
+          e.startsWith("calc(")
+            ? this._parseCalc(e, t)
+            : e.endsWith("%")
+              ? (parseFloat(e) / 100) * t
+              : parseFloat(e) || 0);
+    }
+    _parseCalc(e, t) {
+      let r = e.match(/calc\((.+)\)/);
+      if (!r) return 0;
+      let n = r[1].trim(),
+        i = n.match(/(.+)\s*\+\s*(.+)/),
+        s = n.match(/(.+)\s*-\s*(.+)/);
+      if (s) {
+        let l = this._parseCSSLength(s[1].trim(), t),
+          a = this._parseCSSLength(s[2].trim(), t);
+        return l - a;
+      }
+      if (i) {
+        let l = this._parseCSSLength(i[1].trim(), t),
+          a = this._parseCSSLength(i[2].trim(), t);
+        return l + a;
+      }
+      return this._parseCSSLength(n, t);
+    }
+    _parseTransform(e, t, r) {
+      let n = 0,
+        i = 0;
+      if (!e || e === "none") return { tx: n, ty: i };
+      let s = e.match(/translate\(\s*([^,)]+)(?:\s*,\s*([^)]+))?\s*\)/);
+      s &&
+        ((n = this._parseTranslateValue(s[1], t)),
+        (i = s[2] ? this._parseTranslateValue(s[2], r) : 0));
+      let l = e.match(/translateX\(\s*([^)]+)\s*\)/);
+      l && (n = this._parseTranslateValue(l[1], t));
+      let a = e.match(/translateY\(\s*([^)]+)\s*\)/);
+      a && (i = this._parseTranslateValue(a[1], r));
+      let u = e.match(/translate3d\(\s*([^,]+)\s*,\s*([^,]+)\s*,\s*[^)]+\s*\)/);
+      return (
+        u && ((n = this._parseTranslateValue(u[1], t)), (i = this._parseTranslateValue(u[2], r))),
+        { tx: n, ty: i }
+      );
+    }
+    _parseTranslateValue(e, t) {
+      return ((e = e.trim()), e.endsWith("%") ? (parseFloat(e) / 100) * t : parseFloat(e) || 0);
+    }
+    _getElementPosition(e, t) {
+      let r = getComputedStyle(e),
+        n = parseFloat(getComputedStyle(this.canvas).width) || this.canvas.width || 1536,
+        i = parseFloat(getComputedStyle(this.canvas).height) || this.canvas.height || 1024,
+        s = e.getBoundingClientRect(),
+        l = s.width || parseFloat(r.width) || 0,
+        a = s.height || parseFloat(r.height) || 0,
+        u = 0,
+        o = 0,
+        d = e.style,
+        c = d.left || r.left,
+        f = d.right || r.right,
+        h = d.top || r.top,
+        b = d.bottom || r.bottom,
+        g = this._parseCSSLength(c, n),
+        p = this._parseCSSLength(f, n),
+        v = this._parseCSSLength(h, i),
+        S = this._parseCSSLength(b, i),
+        P = parseFloat(r.marginLeft) || 0,
+        x = parseFloat(r.marginRight) || 0,
+        M = parseFloat(r.marginTop) || 0,
+        A = parseFloat(r.marginBottom) || 0,
+        G = !isNaN(g),
+        U = !isNaN(p);
+      G && U && g === 0 && p === 0
+        ? (u = (n - l) / 2)
+        : (G && U) || G
+          ? (u = g + P)
+          : U && (u = n - l - p - x);
+      let B = !isNaN(v),
+        C = !isNaN(S);
+      B && C && v === 0 && S === 0
+        ? (o = (i - a) / 2)
+        : (B && C) || B
+          ? (o = v + M)
+          : C && (o = i - a - S - A);
+      let { tx: V, ty: F } = this._parseTransform(r.transform, l, a);
+      return ((u += V), (o += F), { x: u, y: o, w: l, h: a });
+    }
+    _renderGlassElement(e, t, r) {
+      if (!this.drawElementImage) return;
+      let n = this._getConfigFromCSS(e),
+        i = this._getElementPosition(e, t),
+        s = i.x,
+        l = i.y,
+        a = i.w,
+        u = i.h,
+        o = s * r,
+        d = l * r,
+        c = a * r,
+        f = u * r,
+        h = T * r,
+        b = o - h,
+        g = d - h,
+        p = c + h * 2,
+        v = f + h * 2;
+      this._captureRegion(b, g, p, v);
+      let S = Math.round(p),
+        P = Math.round(v);
+      (this.renderer.clear(),
+        this.renderer.uploadAndBlur(this.sceneCanvas, 0, 0, S, P, n.blurAmount),
+        this.renderer.renderGlassPanel(n, a, u, r),
+        this.ctx.drawImage(this.renderer.canvas, 0, 0, p, v, b, g, p, v));
+      try {
+        let x = this._drawGlassElementContent(e, o, d);
+        x && (e.style.transform = x.toString());
+      } catch (x) {
+        e.__lg_error_logged ||
+          (console.warn(
+            `LiquidGlass: Failed to draw glass element ${e.tagName}.${e.className}:`,
+            x,
+          ),
+          (e.__lg_error_logged = !0));
+      }
+    }
+    _drawGlassElementContent(e, t, r) {
+      if (!this.drawElementImage) return;
+      let n = this._suppressGlassChrome(e);
+      try {
+        return this.drawElementImage(e, t, r);
+      } finally {
+        this._restoreInlineStyles(e, n);
+      }
+    }
+    _suppressGlassChrome(e) {
+      let t = new Map(),
+        r = [
+          "background",
+          "backgroundColor",
+          "backgroundImage",
+          "borderColor",
+          "boxShadow",
+          "filter",
+          "outlineColor",
+        ];
+      for (let n of r) t.set(n, e.style[n]);
+      return (
+        (e.style.background = "transparent"),
+        (e.style.backgroundColor = "transparent"),
+        (e.style.backgroundImage = "none"),
+        (e.style.borderColor = "transparent"),
+        (e.style.boxShadow = "none"),
+        (e.style.filter = "none"),
+        (e.style.outlineColor = "transparent"),
+        t
+      );
+    }
+    _restoreInlineStyles(e, t) {
+      for (let [r, n] of t) e.style[r] = n;
+    }
+    _captureRegion(e, t, r, n) {
+      let i = Math.round(r),
+        s = Math.round(n);
+      ((this.sceneCanvas.width !== i || this.sceneCanvas.height !== s) &&
+        ((this.sceneCanvas.width = i), (this.sceneCanvas.height = s)),
+        (this.sceneCtx.fillStyle = "#ffffff"),
+        this.sceneCtx.fillRect(0, 0, i, s),
+        this.sceneCtx.drawImage(this.canvas, e, t, r, n, 0, 0, i, s));
+    }
+    _getConfigFromCSS(e) {
+      let t = getComputedStyle(e),
+        r = { ...w };
+      for (let [n, i] of Object.entries(_)) {
+        let s = t.getPropertyValue(n).trim();
+        if (s) {
+          let l = parseFloat(s);
+          isNaN(l) || (r[i] = l);
+        }
+      }
+      return r;
+    }
+    destroy() {
+      this.renderer.destroy();
+    }
+  };
+  return I(Y);
+})();
diff --git a/docs/public/catalog/blocks/liquid-glass-context-menu/liquid-glass-context-menu.html b/docs/public/catalog/blocks/liquid-glass-context-menu/liquid-glass-context-menu.html
new file mode 100644
index 0000000000..a3fd2c0f5d
--- /dev/null
+++ b/docs/public/catalog/blocks/liquid-glass-context-menu/liquid-glass-context-menu.html
@@ -0,0 +1,623 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Liquid Glass Context Menu</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script src="lib/liquid-glass.iife.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #0a0218;
+        overflow: hidden;
+        font-family: "Inter", system-ui, sans-serif;
+      }
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #three-canvas {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        z-index: 0;
+      }
+      #glass-canvas {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        z-index: 1;
+      }
+
+      /* ── Glass Panel ── */
+      .menu-panel {
+        position: absolute;
+        width: 390px;
+        height: 506px;
+        background: rgba(255, 255, 255, 0.15);
+        --lg-blur: 0.56;
+        --lg-refraction: 0.52;
+        --lg-corner-radius: 30;
+        --lg-z-radius: 48;
+        --lg-specular: 0.26;
+        --lg-fresnel: 1;
+        --lg-edge-highlight: 0.2;
+        --lg-chrom-aberration: 0.035;
+        --lg-tint: 0.88;
+        --lg-brightness: 0.54;
+        --lg-shadow-opacity: 0;
+        --lg-shadow-spread: 0;
+        --lg-shadow-offset-y: 0;
+        --lg-saturation: -0.24;
+      }
+      #glass-menu {
+        top: 270px;
+        left: 1980px;
+      }
+      .file-panel {
+        position: absolute;
+        top: 372px;
+        left: 500px;
+        width: 360px;
+        height: 104px;
+        background: rgba(255, 255, 255, 0.11);
+        --lg-blur: 0.52;
+        --lg-refraction: 0.48;
+        --lg-corner-radius: 28;
+        --lg-z-radius: 36;
+        --lg-specular: 0.28;
+        --lg-fresnel: 0.94;
+        --lg-edge-highlight: 0.18;
+        --lg-chrom-aberration: 0.03;
+        --lg-tint: 0.74;
+        --lg-brightness: 0.34;
+        --lg-shadow-opacity: 0;
+        --lg-shadow-spread: 0;
+        --lg-shadow-offset-y: 0;
+        --lg-saturation: -0.18;
+      }
+      .submenu-panel {
+        position: absolute;
+        top: 456px;
+        left: 1980px;
+        width: 230px;
+        height: 58px;
+        background: rgba(255, 255, 255, 0.11);
+        --lg-blur: 0.52;
+        --lg-refraction: 0.5;
+        --lg-corner-radius: 20;
+        --lg-z-radius: 28;
+        --lg-specular: 0.3;
+        --lg-fresnel: 0.96;
+        --lg-edge-highlight: 0.18;
+        --lg-chrom-aberration: 0.03;
+        --lg-tint: 0.74;
+        --lg-brightness: 0.36;
+        --lg-shadow-opacity: 0;
+        --lg-shadow-spread: 0;
+        --lg-shadow-offset-y: 0;
+        --lg-saturation: -0.2;
+      }
+
+      /* ── Text Overlay ── */
+      .text-overlay {
+        position: absolute;
+        z-index: 2;
+        pointer-events: none;
+      }
+      .context-file {
+        position: absolute;
+        top: 340px;
+        left: 500px;
+        z-index: 2;
+        width: 360px;
+        height: 104px;
+        display: flex;
+        align-items: center;
+        gap: 18px;
+        padding: 18px 22px;
+        border-radius: 26px;
+        background: linear-gradient(
+          180deg,
+          rgba(255, 255, 255, 0.095) 0%,
+          rgba(255, 255, 255, 0.036) 38%,
+          rgba(255, 255, 255, 0.006) 100%
+        );
+        box-shadow: none;
+      }
+      .file-icon {
+        width: 58px;
+        height: 68px;
+        flex-shrink: 0;
+        border-radius: 16px;
+        background:
+          linear-gradient(135deg, rgba(6, 227, 250, 0.92), rgba(79, 219, 94, 0.85)),
+          rgba(255, 255, 255, 0.12);
+        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34);
+      }
+      .file-meta {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+      }
+      .file-title {
+        color: rgba(5, 17, 28, 0.9);
+        font-size: 21px;
+        font-weight: 780;
+        letter-spacing: 0;
+        text-shadow:
+          0 1px 0 rgba(255, 255, 255, 0.24),
+          0 10px 20px rgba(255, 255, 255, 0.14);
+      }
+      .file-subtitle {
+        color: rgba(5, 17, 28, 0.72);
+        font-size: 15px;
+        font-weight: 650;
+        text-shadow:
+          0 1px 0 rgba(255, 255, 255, 0.2),
+          0 8px 18px rgba(255, 255, 255, 0.12);
+      }
+      .pointer {
+        position: absolute;
+        top: 395px;
+        left: 778px;
+        z-index: 4;
+        width: 34px;
+        height: 44px;
+        border-radius: 2px;
+        background: #fff;
+        clip-path: polygon(0 0, 0 100%, 31% 73%, 47% 100%, 62% 93%, 46% 67%, 82% 67%);
+        filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.4));
+      }
+      .click-ring {
+        position: absolute;
+        top: 390px;
+        left: 770px;
+        z-index: 3;
+        width: 46px;
+        height: 46px;
+        border: 2px solid rgba(255, 255, 255, 0.75);
+        border-radius: 50%;
+        opacity: 0;
+      }
+      .menu-text {
+        width: 390px;
+        height: 506px;
+        display: flex;
+        flex-direction: column;
+        padding: 18px 0;
+        background: transparent;
+        border-radius: 30px;
+        box-shadow: none;
+        overflow: hidden;
+      }
+      #text-menu {
+        top: 270px;
+        left: 1980px;
+      }
+
+      .menu-highlight {
+        position: absolute;
+        top: 17px;
+        left: 14px;
+        z-index: 0;
+        width: 362px;
+        height: 52px;
+        border-radius: 17px;
+        background:
+          radial-gradient(circle at 24% 22%, rgba(255, 255, 255, 0.48), transparent 42%),
+          linear-gradient(90deg, rgba(255, 255, 255, 0.29), rgba(255, 255, 255, 0.12));
+        box-shadow:
+          inset 0 1px 0 rgba(255, 255, 255, 0.38),
+          inset 0 -1px 0 rgba(255, 255, 255, 0.1);
+        opacity: 0;
+      }
+      .menu-item {
+        position: relative;
+        z-index: 1;
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        padding: 14px 28px;
+        font-size: 18px;
+        font-weight: 650;
+        color: rgb(0, 7, 14);
+        cursor: default;
+        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.26);
+      }
+      .menu-item svg {
+        width: 22px;
+        height: 22px;
+        flex-shrink: 0;
+        stroke: rgb(0, 7, 14);
+        fill: none;
+        stroke-width: 2;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+      .menu-sep {
+        height: 1px;
+        margin: 10px 28px;
+        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.24), transparent);
+      }
+      .menu-footer {
+        position: relative;
+        z-index: 1;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 14px 26px;
+        margin-top: auto;
+      }
+      .menu-footer-item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 4px;
+        font-size: 13px;
+        font-weight: 650;
+        color: rgba(0, 7, 14, 0.9);
+        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.24);
+      }
+      .menu-footer-item svg {
+        width: 24px;
+        height: 24px;
+        stroke: rgba(0, 7, 14, 0.84);
+        fill: none;
+        stroke-width: 2;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+      .menu-kbd {
+        margin-left: auto;
+        font-size: 14px;
+        font-weight: 650;
+        color: rgba(0, 7, 14, 0.82);
+        font-variant-numeric: tabular-nums;
+      }
+      .submenu-preview {
+        position: absolute;
+        top: 456px;
+        left: 1980px;
+        z-index: 2;
+        width: 230px;
+        height: 58px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 20px;
+        background: transparent;
+        box-shadow: none;
+        color: rgba(0, 7, 14, 0.92);
+        font-size: 15px;
+        font-weight: 760;
+        opacity: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="liquid-glass-context-menu"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="8"
+      data-root="true"
+    >
+      <canvas id="three-canvas" width="1920" height="1080"></canvas>
+
+      <canvas id="glass-canvas" layoutsubtree width="1920" height="1080">
+        <div id="glass-file" class="file-panel liquid-glass"></div>
+        <div id="glass-menu" class="menu-panel liquid-glass"></div>
+        <div id="glass-submenu" class="submenu-panel liquid-glass"></div>
+      </canvas>
+
+      <div id="context-file" class="context-file">
+        <div class="file-icon"></div>
+        <div class="file-meta">
+          <div class="file-title">liquid-glass.mov</div>
+          <div class="file-subtitle">Preview render - 08s</div>
+        </div>
+      </div>
+      <div id="click-ring" class="click-ring"></div>
+      <div id="pointer" class="pointer"></div>
+
+      <div id="text-menu" class="text-overlay menu-text">
+        <div id="menu-highlight" class="menu-highlight"></div>
+        <div class="menu-item">
+          <svg viewBox="0 0 24 24">
+            <path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8" />
+            <polyline points="16 6 12 2 8 6" />
+            <line x1="12" y1="2" x2="12" y2="15" />
+          </svg>
+          <span>Share</span>
+        </div>
+        <div class="menu-item">
+          <svg viewBox="0 0 24 24">
+            <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z" />
+          </svg>
+          <span>Add to Bookmarks</span>
+        </div>
+        <div class="menu-item">
+          <svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14" /></svg>
+          <span>Add Bookmark to...</span>
+        </div>
+        <div class="menu-sep"></div>
+        <div class="menu-item">
+          <svg viewBox="0 0 24 24">
+            <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
+            <line x1="9" y1="3" x2="9" y2="21" />
+          </svg>
+          <span>New Tab</span>
+          <span class="menu-kbd">&#8984;T</span>
+        </div>
+        <div class="menu-item">
+          <svg viewBox="0 0 24 24">
+            <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
+            <path d="M9 3v18" />
+            <path d="M14 9l3 3-3 3" />
+          </svg>
+          <span>New Private Tab</span>
+          <span class="menu-kbd">&#8679;&#8984;N</span>
+        </div>
+        <div class="menu-sep"></div>
+        <div class="menu-footer">
+          <div class="menu-footer-item">
+            <svg viewBox="0 0 24 24">
+              <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z" />
+            </svg>
+            <span>Bookmarks</span>
+          </div>
+          <div class="menu-footer-item">
+            <svg viewBox="0 0 24 24">
+              <rect x="3" y="3" width="7" height="7" />
+              <rect x="14" y="3" width="7" height="7" />
+              <rect x="3" y="14" width="7" height="7" />
+              <rect x="14" y="14" width="7" height="7" />
+            </svg>
+            <span>All Tabs</span>
+          </div>
+        </div>
+      </div>
+      <div id="submenu-preview" class="submenu-preview">Open in New Tab</div>
+
+      <div
+        id="driver"
+        class="clip"
+        data-start="0"
+        data-duration="8"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+
+    <script>
+      var W = 1920,
+        H = 1080,
+        DURATION = 8;
+
+      /* ── Three.js Aurora Shader ─────────────────────────────────────── */
+      var vs = "varying vec2 vUv; void main() { vUv = uv; gl_Position = vec4(position, 1.0); }";
+      var fs = [
+        "precision highp float;",
+        "varying vec2 vUv;",
+        "uniform float uTime;",
+        "vec3 mod289(vec3 x){return x-floor(x*(1.0/289.0))*289.0;}",
+        "vec4 mod289(vec4 x){return x-floor(x*(1.0/289.0))*289.0;}",
+        "vec4 permute(vec4 x){return mod289(((x*34.0)+1.0)*x);}",
+        "vec4 taylorInvSqrt(vec4 r){return 1.79284291400159-0.85373472095314*r;}",
+        "float snoise(vec3 v){",
+        "  const vec2 C=vec2(1.0/6.0,1.0/3.0);const vec4 D=vec4(0.0,0.5,1.0,2.0);",
+        "  vec3 i=floor(v+dot(v,C.yyy));vec3 x0=v-i+dot(i,C.xxx);",
+        "  vec3 g=step(x0.yzx,x0.xyz);vec3 l=1.0-g;",
+        "  vec3 i1=min(g.xyz,l.zxy);vec3 i2=max(g.xyz,l.zxy);",
+        "  vec3 x1=x0-i1+C.xxx;vec3 x2=x0-i2+C.yyy;vec3 x3=x0-D.yyy;",
+        "  i=mod289(i);",
+        "  vec4 p=permute(permute(permute(i.z+vec4(0.0,i1.z,i2.z,1.0))+i.y+vec4(0.0,i1.y,i2.y,1.0))+i.x+vec4(0.0,i1.x,i2.x,1.0));",
+        "  float n_=0.142857142857;vec3 ns=n_*D.wyz-D.xzx;",
+        "  vec4 j=p-49.0*floor(p*ns.z*ns.z);vec4 x_=floor(j*ns.z);vec4 y_=floor(j-7.0*x_);",
+        "  vec4 x=x_*ns.x+ns.yyyy;vec4 y=y_*ns.x+ns.yyyy;vec4 h=1.0-abs(x)-abs(y);",
+        "  vec4 b0=vec4(x.xy,y.xy);vec4 b1=vec4(x.zw,y.zw);",
+        "  vec4 s0=floor(b0)*2.0+1.0;vec4 s1=floor(b1)*2.0+1.0;",
+        "  vec4 sh=-step(h,vec4(0.0));",
+        "  vec4 a0=b0.xzyw+s0.xzyw*sh.xxyy;vec4 a1=b1.xzyw+s1.xzyw*sh.zzww;",
+        "  vec3 p0=vec3(a0.xy,h.x);vec3 p1=vec3(a0.zw,h.y);vec3 p2=vec3(a1.xy,h.z);vec3 p3=vec3(a1.zw,h.w);",
+        "  vec4 norm=taylorInvSqrt(vec4(dot(p0,p0),dot(p1,p1),dot(p2,p2),dot(p3,p3)));",
+        "  p0*=norm.x;p1*=norm.y;p2*=norm.z;p3*=norm.w;",
+        "  vec4 m=max(0.6-vec4(dot(x0,x0),dot(x1,x1),dot(x2,x2),dot(x3,x3)),0.0);m=m*m;",
+        "  return 42.0*dot(m*m,vec4(dot(p0,x0),dot(p1,x1),dot(p2,x2),dot(p3,x3)));",
+        "}",
+        "void main(){",
+        "  vec2 uv=vUv;float ar=1920.0/1080.0;vec2 p=vec2(uv.x*ar,uv.y);float t=uTime*0.06;",
+        "  float wx=snoise(vec3(p*1.4,t*0.5))*0.2;float wy=snoise(vec3(p*1.4+100.0,t*0.5))*0.2;",
+        "  vec2 wp=p+vec2(wx,wy);",
+        "  vec3 base=mix(vec3(0.10,0.02,0.22),vec3(0.04,0.10,0.25),smoothstep(0.0,1.0,uv.x*0.6+uv.y*0.4));",
+        "  float angle=0.65;float ridgeUv=dot(wp,vec2(cos(angle),sin(angle)));",
+        "  float ridge1=sin(ridgeUv*8.0+t*2.0+snoise(vec3(wp*0.8,t))*1.5);",
+        "  float ridge2=sin(ridgeUv*5.5-t*1.4+snoise(vec3(wp*1.2+50.0,t*0.7))*2.0);",
+        "  float ridge3=sin(ridgeUv*12.0+t*3.0+snoise(vec3(wp*0.6+80.0,t*0.4))*1.0);",
+        "  float crease1=pow(abs(ridge1),0.35)*sign(ridge1)*0.5+0.5;",
+        "  float crease2=pow(abs(ridge2),0.4)*sign(ridge2)*0.5+0.5;",
+        "  float crease3=pow(abs(ridge3),0.5)*sign(ridge3)*0.5+0.5;",
+        "  vec3 warm=mix(vec3(0.9,0.4,0.08),vec3(0.95,0.65,0.15),crease1);",
+        "  float warmZone=smoothstep(0.15,0.75,uv.x+uv.y*0.4+snoise(vec3(uv*2.0,t))*0.3);",
+        "  vec3 cool=mix(vec3(0.02,0.4,0.55),vec3(0.25,0.7,0.82),crease2);",
+        "  float coolZone=smoothstep(0.25,0.85,1.2-uv.x+uv.y*0.5+snoise(vec3(uv*2.0+40.0,t*0.8))*0.25);",
+        "  vec3 hot=mix(vec3(0.8,0.1,0.4),vec3(0.6,0.08,0.65),crease3);",
+        "  float hotZone=smoothstep(0.5,0.9,snoise(vec3(uv*2.5+20.0,t*0.6))*0.5+0.5);",
+        "  vec3 col=base;",
+        "  col=mix(col,warm,warmZone*0.75*smoothstep(0.3,0.7,crease1));",
+        "  col=mix(col,cool,coolZone*0.65*smoothstep(0.2,0.65,crease2));",
+        "  col=mix(col,hot,hotZone*0.5*smoothstep(0.35,0.8,crease3));",
+        "  float edgeGlow=pow(1.0-abs(ridge1),6.0)*0.4+pow(1.0-abs(ridge2),5.0)*0.25;",
+        "  col+=edgeGlow*mix(warm,cool,uv.x)*0.8;",
+        "  col*=1.0-pow(abs(ridge1),4.0)*0.15;",
+        "  float vig=1.0-smoothstep(0.5,1.5,length((uv-0.5)*vec2(1.3,1.0)));",
+        "  col*=0.65+vig*0.5;",
+        "  float luma=dot(col,vec3(0.299,0.587,0.114));col=mix(vec3(luma),col,1.5);",
+        "  col=clamp(col,0.0,1.0);col=pow(col,vec3(0.9));",
+        "  gl_FragColor=vec4(col,1.0);",
+        "}",
+      ].join("\n");
+
+      /* ── Three.js Setup ─────────────────────────────────────────────── */
+      var threeCanvas = document.getElementById("three-canvas");
+      var renderer = new THREE.WebGLRenderer({ canvas: threeCanvas, alpha: false });
+      renderer.setSize(W, H, false);
+      renderer.setPixelRatio(1);
+
+      var scene = new THREE.Scene();
+      var camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
+      var uniforms = { uTime: { value: 0 } };
+      var mat = new THREE.ShaderMaterial({
+        vertexShader: vs,
+        fragmentShader: fs,
+        uniforms: uniforms,
+      });
+      var quad = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), mat);
+      scene.add(quad);
+
+      /* ── Glass Canvas ───────────────────────────────────────────────── */
+      var glassCanvas = document.getElementById("glass-canvas");
+      var ctx = glassCanvas.getContext("2d");
+      var lg = new LiquidGlass.LiquidGlassCanvas(glassCanvas);
+      var lgReady = false;
+
+      function renderGlass(time) {
+        if (!lgReady) return;
+        uniforms.uTime.value = time;
+        renderer.render(scene, camera);
+        ctx.clearRect(0, 0, W, H);
+        ctx.drawImage(threeCanvas, 0, 0, W, H);
+        lg.renderGlassElements();
+      }
+
+      function requestGlassRender(time) {
+        if (glassCanvas.requestPaint) {
+          glassCanvas.onpaint = function () {
+            renderGlass(time);
+          };
+          glassCanvas.requestPaint();
+          return;
+        }
+        renderGlass(time);
+      }
+
+      lg.waitForInit().then(function (ok) {
+        if (!ok) return;
+        lgReady = true;
+        requestGlassRender(0);
+      });
+
+      /* ── GSAP Timeline ──────────────────────────────────────────────── */
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+
+      var gm = document.getElementById("glass-menu");
+      var gf = document.getElementById("glass-file");
+      var gsm = document.getElementById("glass-submenu");
+      var tm = document.getElementById("text-menu");
+      var pointer = document.getElementById("pointer");
+      var fileCard = document.getElementById("context-file");
+
+      gsap.set([gm, tm], {
+        left: 860,
+        top: 270,
+        opacity: 0,
+        scale: 0.82,
+        y: -8,
+        transformOrigin: "0% 18%",
+      });
+      // glass (#glass-file) is html-in-canvas — stays on left/top (exempt, no stutter)
+      gsap.set(gf, { top: 372, opacity: 1, scale: 1, transformOrigin: "78% 54%" });
+      // plain DOM (#context-file) — CSS resting top is 340px, so top:372 becomes y:32
+      gsap.set(fileCard, { y: 32, opacity: 1, scale: 1, transformOrigin: "78% 54%" });
+      gsap.set([gsm, "#submenu-preview"], {
+        left: 1980,
+        opacity: 0,
+        scale: 0.86,
+        x: -12,
+        transformOrigin: "0% 50%",
+      });
+      gsap.set(".menu-item", { y: -4, opacity: 0 });
+      // #menu-highlight plain DOM — CSS resting top:17; top:17 seed is y:0, tweens use y
+      gsap.set("#menu-highlight", { y: 0, opacity: 0 });
+
+      tl.to(gf, { top: 340, duration: 0.38, ease: "power3.out" }, 0.1);
+      tl.to(fileCard, { y: 0, duration: 0.38, ease: "power3.out" }, 0.1);
+      // #pointer plain DOM — CSS resting left:778 top:395; convert left/top → x/y offsets
+      tl.fromTo(
+        pointer,
+        { x: -158, y: 125 },
+        { x: 0, y: 0, duration: 0.55, ease: "power3.out" },
+        0.35,
+      );
+      tl.set("#click-ring", { left: 756, top: 372, scale: 0.72 }, 0.84);
+      tl.to("#click-ring", { opacity: 0.7, scale: 1.18, duration: 0.16, ease: "power2.out" }, 0.86);
+      tl.to("#click-ring", { opacity: 0, scale: 1.8, duration: 0.28, ease: "power2.out" }, 1.02);
+      tl.to(
+        [gf, fileCard],
+        { scale: 0.985, duration: 0.08, ease: "power2.out", yoyo: true, repeat: 1 },
+        0.86,
+      );
+
+      tl.to([gm, tm], { opacity: 1, scale: 1, y: 0, duration: 0.36, ease: "back.out(1.08)" }, 0.98);
+      tl.to(
+        ".menu-item",
+        { y: 0, opacity: 1, duration: 0.24, ease: "power3.out", stagger: 0.026 },
+        1.07,
+      );
+
+      tl.to("#menu-highlight", { opacity: 1, duration: 0.12, ease: "none" }, 1.35);
+      tl.to("#menu-highlight", { y: 52, duration: 0.22, ease: "power2.out" }, 2.0);
+      tl.to(pointer, { x: 350, y: 73, duration: 0.46, ease: "power3.inOut" }, 2.48);
+      tl.to("#menu-highlight", { y: 170, duration: 0.22, ease: "power2.out" }, 2.58);
+      tl.set([gsm, "#submenu-preview"], { left: 1236 }, 3.04);
+      tl.fromTo(
+        [gsm, "#submenu-preview"],
+        { scale: 0.86, opacity: 0, x: -12 },
+        { scale: 1, opacity: 1, x: 0, duration: 0.24, ease: "back.out(1.04)" },
+        3.08,
+      );
+      tl.to(pointer, { x: 540, y: 89, duration: 0.5, ease: "power3.inOut" }, 3.32);
+      tl.set("#click-ring", { left: 1295, top: 461, scale: 0.72 }, 3.86);
+      tl.to(
+        "#click-ring",
+        { opacity: 0.72, scale: 1.08, duration: 0.12, ease: "power2.out" },
+        3.88,
+      );
+      tl.to("#click-ring", { opacity: 0, scale: 1.58, duration: 0.24, ease: "power2.out" }, 4.0);
+      tl.to(
+        [gsm, "#submenu-preview"],
+        { scale: 0.965, duration: 0.09, ease: "power2.out", yoyo: true, repeat: 1 },
+        3.92,
+      );
+
+      tl.to(pointer, { opacity: 0, duration: 0.35, ease: "power2.out" }, 5.85);
+
+      /* Duration driver */
+      tl.to({ v: 0 }, { v: 1, duration: DURATION, ease: "none" }, 0);
+
+      tl.eventCallback("onUpdate", function () {
+        requestGlassRender(tl.time());
+      });
+
+      window.__timelines["liquid-glass-context-menu"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/liquid-glass-media-controls/lib/liquid-glass.iife.js b/docs/public/catalog/blocks/liquid-glass-media-controls/lib/liquid-glass.iife.js
new file mode 100644
index 0000000000..ae5210629b
--- /dev/null
+++ b/docs/public/catalog/blocks/liquid-glass-media-controls/lib/liquid-glass.iife.js
@@ -0,0 +1,1048 @@
+var LiquidGlass = (() => {
+  var E = Object.defineProperty;
+  var D = Object.getOwnPropertyDescriptor;
+  var z = Object.getOwnPropertyNames;
+  var N = Object.prototype.hasOwnProperty;
+  var O = (m, e) => {
+      for (var t in e) E(m, t, { get: e[t], enumerable: !0 });
+    },
+    H = (m, e, t, r) => {
+      if ((e && typeof e == "object") || typeof e == "function")
+        for (let n of z(e))
+          !N.call(m, n) &&
+            n !== t &&
+            E(m, n, { get: () => e[n], enumerable: !(r = D(e, n)) || r.enumerable });
+      return m;
+    };
+  var I = (m) => H(E({}, "__esModule", { value: !0 }), m);
+  var Y = {};
+  O(Y, {
+    CSS_PROPERTY_MAP: () => _,
+    DEFAULTS: () => w,
+    GlassRendererGPU: () => y,
+    LiquidGlassCanvas: () => R,
+  });
+  var w = {
+      blurAmount: 0,
+      refraction: 0.69,
+      chromAberration: 0.05,
+      edgeHighlight: 0.05,
+      specular: 0,
+      fresnel: 1,
+      distortion: 0,
+      cornerRadius: 65,
+      zRadius: 40,
+      opacity: 1,
+      saturation: 0,
+      tintStrength: 0,
+      brightness: 0,
+      shadowOpacity: 0.3,
+      shadowSpread: 10,
+      shadowOffsetY: 1,
+      bevelMode: 0,
+    },
+    _ = {
+      "--lg-blur": "blurAmount",
+      "--lg-refraction": "refraction",
+      "--lg-chrom-aberration": "chromAberration",
+      "--lg-edge-highlight": "edgeHighlight",
+      "--lg-specular": "specular",
+      "--lg-fresnel": "fresnel",
+      "--lg-distortion": "distortion",
+      "--lg-corner-radius": "cornerRadius",
+      "--lg-z-radius": "zRadius",
+      "--lg-opacity": "opacity",
+      "--lg-saturation": "saturation",
+      "--lg-tint": "tintStrength",
+      "--lg-brightness": "brightness",
+      "--lg-shadow-opacity": "shadowOpacity",
+      "--lg-shadow-spread": "shadowSpread",
+      "--lg-shadow-offset-y": "shadowOffsetY",
+      "--lg-bevel-mode": "bevelMode",
+    },
+    L = 6,
+    T = 20;
+  var q = `// Blit shader - copy texture with UV transform
+
+struct BlitUniforms {
+  scale: vec2f,
+  offset: vec2f,
+}
+
+@group(0) @binding(0) var<uniform> u: BlitUniforms;
+@group(0) @binding(1) var texSampler: sampler;
+@group(0) @binding(2) var tex: texture_2d<f32>;
+
+struct VertexOutput {
+  @builtin(position) position: vec4f,
+  @location(0) uv: vec2f,
+}
+
+@vertex
+fn vertexMain(@location(0) pos: vec2f) -> VertexOutput {
+  var out: VertexOutput;
+  out.uv = pos * 0.5 + 0.5;
+  out.position = vec4f(pos, 0.0, 1.0);
+  return out;
+}
+
+@fragment
+fn fragmentMain(in: VertexOutput) -> @location(0) vec4f {
+  return textureSample(tex, texSampler, in.uv * u.scale + u.offset);
+}
+`,
+    k = `// Blur shader - 9-tap Gaussian blur (single direction)
+
+struct BlurUniforms {
+  dir: vec2f,
+  _pad: vec2f,
+}
+
+@group(0) @binding(0) var<uniform> u: BlurUniforms;
+@group(0) @binding(1) var texSampler: sampler;
+@group(0) @binding(2) var tex: texture_2d<f32>;
+
+struct VertexOutput {
+  @builtin(position) position: vec4f,
+  @location(0) uv: vec2f,
+}
+
+@vertex
+fn vertexMain(@location(0) pos: vec2f) -> VertexOutput {
+  var out: VertexOutput;
+  out.uv = pos * 0.5 + 0.5;
+  out.position = vec4f(pos, 0.0, 1.0);
+  return out;
+}
+
+@fragment
+fn fragmentMain(in: VertexOutput) -> @location(0) vec4f {
+  var s = textureSample(tex, texSampler, in.uv) * 0.227027;
+  s += textureSample(tex, texSampler, in.uv + u.dir * 1.0) * 0.194594;
+  s += textureSample(tex, texSampler, in.uv - u.dir * 1.0) * 0.194594;
+  s += textureSample(tex, texSampler, in.uv + u.dir * 2.0) * 0.121622;
+  s += textureSample(tex, texSampler, in.uv - u.dir * 2.0) * 0.121622;
+  s += textureSample(tex, texSampler, in.uv + u.dir * 3.0) * 0.054054;
+  s += textureSample(tex, texSampler, in.uv - u.dir * 3.0) * 0.054054;
+  s += textureSample(tex, texSampler, in.uv + u.dir * 4.0) * 0.016216;
+  s += textureSample(tex, texSampler, in.uv - u.dir * 4.0) * 0.016216;
+  return s;
+}
+`,
+    W = `// Glass shader - the core liquid glass effect
+
+struct GlassUniforms {
+  center: vec2f,
+  size: vec2f,
+  res: vec2f,
+  radius: f32,
+  pad: f32,
+  refract: f32,
+  chroma: f32,
+  edgeHL: f32,
+  spec: f32,
+  fresnel: f32,
+  distort: f32,
+  alpha: f32,
+  sat: f32,
+  tint: f32,
+  zRadius: f32,
+  brightness: f32,
+  shadowAlpha: f32,
+  shadowSpread: f32,
+  shadowOffY: f32,
+  bevelMode: f32,
+  _pad: vec2f,
+}
+
+@group(0) @binding(0) var<uniform> u: GlassUniforms;
+@group(0) @binding(1) var texSampler: sampler;
+@group(0) @binding(2) var bgTex: texture_2d<f32>;
+@group(0) @binding(3) var blurTex: texture_2d<f32>;
+
+struct VertexOutput {
+  @builtin(position) position: vec4f,
+  @location(0) localPx: vec2f,
+  @location(1) screenUV: vec2f,
+}
+
+@vertex
+fn vertexMain(@location(0) pos: vec2f) -> VertexOutput {
+  var out: VertexOutput;
+  let total = u.size + vec2f(u.pad * 2.0);
+  out.localPx = pos * total;
+  let px = u.center + pos * total;
+  out.screenUV = vec2f(px.x / u.res.x, 1.0 - px.y / u.res.y);
+  var ndc = (px / u.res) * 2.0 - 1.0;
+  ndc.y = -ndc.y;
+  out.position = vec4f(ndc, 0.0, 1.0);
+  return out;
+}
+
+// Rounded-rect signed distance
+fn rrSDF(p: vec2f, b: vec2f, r: f32) -> f32 {
+  let q = abs(p) - b + vec2f(r);
+  return min(max(q.x, q.y), 0.0) + length(max(q, vec2f(0.0))) - r;
+}
+
+// Bevel height field
+fn bevelHeight(d: f32, zR: f32) -> f32 {
+  if (d <= 0.0) { return 0.0; }
+  if (d >= zR) { return zR; }
+  return sqrt(d * (2.0 * zR - d));
+}
+
+fn hash(p: vec2f) -> f32 {
+  return fract(sin(dot(p, vec2f(127.1, 311.7))) * 43758.5453);
+}
+
+@fragment
+fn fragmentMain(in: VertexOutput) -> @location(0) vec4f {
+  let half_ = u.size * 0.5;
+  let r = min(u.radius, min(half_.x, half_.y));
+  let sdf = rrSDF(in.localPx, half_, r);
+
+  // Anti-aliased mask
+  let mask = 1.0 - smoothstep(-1.5, 0.5, sdf);
+
+  let maxD = min(half_.x, half_.y);
+  let inside = -sdf;
+  let edge = smoothstep(maxD * 0.35, 0.0, inside);
+
+  // Surface normal via bevel height field
+  let zR = u.zRadius;
+  let e = 2.0;
+  let dC = inside;
+  let dR = -rrSDF(in.localPx + vec2f(e, 0.0), half_, r);
+  let dL = -rrSDF(in.localPx - vec2f(e, 0.0), half_, r);
+  let dU = -rrSDF(in.localPx + vec2f(0.0, e), half_, r);
+  let dD = -rrSDF(in.localPx - vec2f(0.0, e), half_, r);
+  let hC = bevelHeight(dC, zR);
+  let hR = bevelHeight(dR, zR);
+  let hL = bevelHeight(dL, zR);
+  let hU = bevelHeight(dU, zR);
+  let hD = bevelHeight(dD, zR);
+  let hGrad = vec2f(hR - hL, hU - hD) / (2.0 * e);
+  let N = normalize(vec3f(-hGrad, 1.0));
+
+  let depth = smoothstep(0.0, zR, inside);
+
+  // Refraction - compute both modes and select
+  let pxToUV = vec2f(1.0, -1.0) / u.res;
+  let ior = 1.5;
+  let refrPow = 1.0 - 1.0 / ior;
+  let thickness = hC * 2.0;
+  let thickNorm = thickness / max(zR * 2.0, 1.0);
+
+  // Biconvex mode
+  let exitRefr = hGrad * refrPow;
+  let entryRefr = hGrad * refrPow;
+  let throughRefr = entryRefr * thickNorm * 0.5;
+  var refrPxBiconvex = (exitRefr + entryRefr + throughRefr) * u.refract * 30.0;
+  let centerDir = -in.localPx / max(half_, vec2f(1.0));
+  refrPxBiconvex += centerDir * u.refract * 4.0 * depth;
+
+  // Dome mode
+  let refrPxDome = -in.localPx * u.refract * depth * 0.35;
+
+  // Select based on bevel mode
+  let refrPx = select(refrPxBiconvex, refrPxDome, u.bevelMode >= 0.5);
+  let refr = refrPx * pxToUV;
+
+  // Micro-distortion noise
+  let ns = in.localPx * 0.08;
+  let absPxToUV = vec2f(1.0) / u.res;
+  let micro = (vec2f(hash(ns), hash(ns + vec2f(37.0))) - 0.5) * u.distort * 4.0 * absPxToUV;
+
+  // Chromatic aberration
+  let caS = u.chroma * 18.0 * (edge * 0.7 + 0.3) * 2.0;
+  let caD = N.xy * caS * pxToUV;
+  let base = in.screenUV + refr + micro;
+
+  // Sample textures (must be in uniform control flow)
+  let sharpR = textureSample(bgTex, texSampler, base + caD).r;
+  let sharpG = textureSample(bgTex, texSampler, base).g;
+  let sharpB = textureSample(bgTex, texSampler, base - caD).b;
+  let sharp = vec3f(sharpR, sharpG, sharpB);
+
+  let blurR = textureSample(blurTex, texSampler, base + caD).r;
+  let blurG = textureSample(blurTex, texSampler, base).g;
+  let blurB = textureSample(blurTex, texSampler, base - caD).b;
+  let blur = vec3f(blurR, blurG, blurB);
+
+  // Edge-weighted blur mix
+  let edgeMix = 1.0 - edge * 0.15;
+  var col = mix(sharp, blur, edgeMix);
+
+  // Brightness
+  col *= 1.0 + u.brightness;
+
+  // Saturation
+  let lum = dot(col, vec3f(0.299, 0.587, 0.114));
+  col = mix(vec3f(lum), col, 1.0 + u.sat);
+
+  // Cool glass tint
+  col = mix(col, col * vec3f(0.92, 0.95, 1.05), u.tint);
+  col *= 1.0 + 0.06 * depth;
+
+  // Fresnel
+  let fres = pow(1.0 - abs(N.z), 4.0) * u.fresnel;
+
+  // Specular highlights (multi-light Blinn-Phong)
+  let V = vec3f(0.0, 0.0, 1.0);
+  let L1 = normalize(vec3f(0.4, 0.7, 1.0));
+  let H1 = normalize(L1 + V);
+  let sp1 = pow(max(dot(N, H1), 0.0), 90.0);
+  let L2 = normalize(vec3f(-0.3, -0.5, 1.0));
+  let H2 = normalize(L2 + V);
+  let sp2 = pow(max(dot(N, H2), 0.0), 50.0) * 0.3;
+  let L3 = normalize(vec3f(0.1, 0.3, 1.0));
+  let spB = pow(max(dot(N, L3), 0.0), 6.0) * 0.1;
+  let L4 = normalize(vec3f(0.0, 0.9, 0.4));
+  let H4 = normalize(L4 + V);
+  let sp4 = pow(max(dot(N, H4), 0.0), 120.0) * 0.6;
+  let totalSpec = (sp1 + sp2 + spB + sp4) * u.spec;
+
+  // Inner border / stroke highlight
+  let borderWidth = 1.5;
+  let innerStroke = smoothstep(-borderWidth - 1.0, -borderWidth, sdf)
+                  * (1.0 - smoothstep(-1.0, 0.0, sdf));
+  let topBias = 0.5 + 0.5 * (-in.localPx.y / half_.y);
+  let innerStrokeFinal = innerStroke * (0.4 + 0.6 * topBias);
+
+  // Edge highlight & inner glow
+  let rim = edge * u.edgeHL * 0.22;
+  let innerGlow = smoothstep(5.0, 0.0, -sdf) * u.edgeHL * 0.15;
+
+  // Environment-like reflection (fake)
+  let envRefl = (N.y * 0.5 + 0.5) * fres * 0.08;
+
+  // Composite glass effect
+  var fin = col;
+  fin += vec3f(totalSpec);
+  fin += vec3f(rim + innerGlow);
+  fin += vec3f(innerStrokeFinal * u.edgeHL * 0.55);
+  fin += vec3f(envRefl);
+  fin = mix(fin, vec3f(1.0), fres * 0.2);
+
+  // Shadow calculation (outside panel)
+  let sdfShadow = rrSDF(in.localPx - vec2f(0.0, u.shadowOffY), half_, r);
+  let shadowD = max(sdfShadow - 1.0, 0.0);
+  let spread = max(u.shadowSpread, 1.0);
+  let falloff = 1.0 / (spread * spread);
+  let outerShadow = exp(-shadowD * shadowD * falloff) * 0.65;
+  let contactShadow = exp(-shadowD * 0.08 / max(spread * 0.04, 0.01)) * 0.35;
+  let shadow = (outerShadow + contactShadow) * u.shadowAlpha;
+
+  // Select between shadow (outside) and glass (inside)
+  let isOutside = sdf > 0.0;
+  let finalColor = select(fin, vec3f(0.0), isOutside);
+  let finalAlpha = select(mask * u.alpha, shadow, isOutside);
+
+  return vec4f(finalColor, finalAlpha);
+}
+`,
+    y = class {
+      canvas;
+      device = null;
+      context = null;
+      format = "bgra8unorm";
+      blitPipeline = null;
+      blurPipeline = null;
+      glassPipeline = null;
+      quadBuffer = null;
+      panelBuffer = null;
+      blitUniformBuffer = null;
+      blurUniformBuffer = null;
+      glassUniformBuffer = null;
+      sampler = null;
+      targetCache = new Map();
+      activeTargets = null;
+      bgTexture = null;
+      bgTextureView = null;
+      width = 0;
+      height = 0;
+      _initPromise = null;
+      _initialized = !1;
+      constructor() {
+        ((this.canvas = document.createElement("canvas")),
+          (this.canvas.style.display = "none"),
+          document.body.appendChild(this.canvas));
+      }
+      async init() {
+        return this._initPromise
+          ? this._initPromise
+          : ((this._initPromise = this._doInit()), this._initPromise);
+      }
+      async _doInit() {
+        if (!navigator.gpu) return (console.warn("WebGPU not supported"), !1);
+        let e = await navigator.gpu.requestAdapter();
+        return e
+          ? ((this.device = await e.requestDevice()),
+            this.device
+              ? ((this.context = this.canvas.getContext("webgpu")),
+                this.context
+                  ? ((this.format = navigator.gpu.getPreferredCanvasFormat()),
+                    this.context.configure({
+                      device: this.device,
+                      format: this.format,
+                      alphaMode: "premultiplied",
+                    }),
+                    this._initPipelines(),
+                    this._initBuffers(),
+                    (this._initialized = !0),
+                    !0)
+                  : (console.warn("Failed to get WebGPU context"), !1))
+              : (console.warn("Failed to get WebGPU device"), !1))
+          : (console.warn("No WebGPU adapter found"), !1);
+      }
+      get initialized() {
+        return this._initialized;
+      }
+      _initPipelines() {
+        let e = this.device;
+        this.sampler = e.createSampler({
+          magFilter: "linear",
+          minFilter: "linear",
+          addressModeU: "clamp-to-edge",
+          addressModeV: "clamp-to-edge",
+        });
+        let t = e.createShaderModule({ code: q }),
+          r = e.createBindGroupLayout({
+            entries: [
+              {
+                binding: 0,
+                visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+                buffer: { type: "uniform" },
+              },
+              { binding: 1, visibility: GPUShaderStage.FRAGMENT, sampler: { type: "filtering" } },
+              { binding: 2, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "float" } },
+            ],
+          });
+        this.blitPipeline = e.createRenderPipeline({
+          layout: e.createPipelineLayout({ bindGroupLayouts: [r] }),
+          vertex: {
+            module: t,
+            entryPoint: "vertexMain",
+            buffers: [
+              {
+                arrayStride: 8,
+                attributes: [{ shaderLocation: 0, offset: 0, format: "float32x2" }],
+              },
+            ],
+          },
+          fragment: { module: t, entryPoint: "fragmentMain", targets: [{ format: "rgba8unorm" }] },
+          primitive: { topology: "triangle-strip" },
+        });
+        let n = e.createShaderModule({ code: k }),
+          i = e.createBindGroupLayout({
+            entries: [
+              {
+                binding: 0,
+                visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+                buffer: { type: "uniform" },
+              },
+              { binding: 1, visibility: GPUShaderStage.FRAGMENT, sampler: { type: "filtering" } },
+              { binding: 2, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "float" } },
+            ],
+          });
+        this.blurPipeline = e.createRenderPipeline({
+          layout: e.createPipelineLayout({ bindGroupLayouts: [i] }),
+          vertex: {
+            module: n,
+            entryPoint: "vertexMain",
+            buffers: [
+              {
+                arrayStride: 8,
+                attributes: [{ shaderLocation: 0, offset: 0, format: "float32x2" }],
+              },
+            ],
+          },
+          fragment: { module: n, entryPoint: "fragmentMain", targets: [{ format: "rgba8unorm" }] },
+          primitive: { topology: "triangle-strip" },
+        });
+        let s = e.createShaderModule({ code: W }),
+          l = e.createBindGroupLayout({
+            entries: [
+              {
+                binding: 0,
+                visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+                buffer: { type: "uniform" },
+              },
+              { binding: 1, visibility: GPUShaderStage.FRAGMENT, sampler: { type: "filtering" } },
+              { binding: 2, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "float" } },
+              { binding: 3, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "float" } },
+            ],
+          });
+        this.glassPipeline = e.createRenderPipeline({
+          layout: e.createPipelineLayout({ bindGroupLayouts: [l] }),
+          vertex: {
+            module: s,
+            entryPoint: "vertexMain",
+            buffers: [
+              {
+                arrayStride: 8,
+                attributes: [{ shaderLocation: 0, offset: 0, format: "float32x2" }],
+              },
+            ],
+          },
+          fragment: {
+            module: s,
+            entryPoint: "fragmentMain",
+            targets: [
+              {
+                format: this.format,
+                blend: {
+                  color: {
+                    srcFactor: "src-alpha",
+                    dstFactor: "one-minus-src-alpha",
+                    operation: "add",
+                  },
+                  alpha: { srcFactor: "one", dstFactor: "one-minus-src-alpha", operation: "add" },
+                },
+              },
+            ],
+          },
+          primitive: { topology: "triangle-strip" },
+        });
+      }
+      _initBuffers() {
+        let e = this.device;
+        ((this.quadBuffer = e.createBuffer({
+          size: 32,
+          usage: GPUBufferUsage.VERTEX,
+          mappedAtCreation: !0,
+        })),
+          new Float32Array(this.quadBuffer.getMappedRange()).set([-1, -1, 1, -1, -1, 1, 1, 1]),
+          this.quadBuffer.unmap(),
+          (this.panelBuffer = e.createBuffer({
+            size: 32,
+            usage: GPUBufferUsage.VERTEX,
+            mappedAtCreation: !0,
+          })),
+          new Float32Array(this.panelBuffer.getMappedRange()).set([
+            -0.5, -0.5, 0.5, -0.5, -0.5, 0.5, 0.5, 0.5,
+          ]),
+          this.panelBuffer.unmap(),
+          (this.blitUniformBuffer = e.createBuffer({
+            size: 16,
+            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+          })),
+          (this.blurUniformBuffer = e.createBuffer({
+            size: 16,
+            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+          })),
+          (this.glassUniformBuffer = e.createBuffer({
+            size: 112,
+            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+          })));
+      }
+      resize(e, t) {
+        if (!(this.width === e && this.height === t)) {
+          ((this.width = e), (this.height = t));
+          for (let r of this.targetCache.values()) this._freeTargetSet(r);
+          (this.targetCache.clear(), (this.activeTargets = null));
+        }
+      }
+      uploadAndBlur(e, t, r, n, i, s) {
+        if (!this._initialized || !this.device || !this._setActiveSize(n, i)) return;
+        let l = this.device,
+          a = this.width,
+          u = this.height,
+          o = this.activeTargets,
+          d = document.createElement("canvas");
+        ((d.width = a),
+          (d.height = u),
+          d.getContext("2d").drawImage(e, -t, -r),
+          (!this.bgTexture || this.bgTexture.width !== a || this.bgTexture.height !== u) &&
+            (this.bgTexture && this.bgTexture.destroy(),
+            (this.bgTexture = l.createTexture({
+              size: [a, u],
+              format: "rgba8unorm",
+              usage:
+                GPUTextureUsage.TEXTURE_BINDING |
+                GPUTextureUsage.COPY_DST |
+                GPUTextureUsage.RENDER_ATTACHMENT,
+            })),
+            (this.bgTextureView = this.bgTexture.createView())),
+          l.queue.copyExternalImageToTexture(
+            { source: d, flipY: !0 },
+            { texture: this.bgTexture },
+            [a, u],
+          ));
+        let f = l.createCommandEncoder();
+        this._blitPass(f, this.bgTextureView, o.bg.view, a, u, 1, 1, 0, 0);
+        let h = o.blurA.w,
+          b = o.blurA.h;
+        if ((this._blitPass(f, o.bg.view, o.blurA.view, h, b, 1, 1, 0, 0), s > 0)) {
+          let g = s * 2.5;
+          for (let p = 0; p < L; p++)
+            (this._blurPass(f, o.blurA.view, o.blurB.view, h, b, g / h, 0),
+              this._blurPass(f, o.blurB.view, o.blurA.view, h, b, 0, g / b));
+        }
+        l.queue.submit([f.finish()]);
+      }
+      _blitPass(e, t, r, n, i, s, l, a, u) {
+        let o = this.device;
+        o.queue.writeBuffer(this.blitUniformBuffer, 0, new Float32Array([s, l, a, u]));
+        let d = o.createBindGroup({
+            layout: this.blitPipeline.getBindGroupLayout(0),
+            entries: [
+              { binding: 0, resource: { buffer: this.blitUniformBuffer } },
+              { binding: 1, resource: this.sampler },
+              { binding: 2, resource: t },
+            ],
+          }),
+          c = e.beginRenderPass({
+            colorAttachments: [
+              {
+                view: r,
+                loadOp: "clear",
+                storeOp: "store",
+                clearValue: { r: 0, g: 0, b: 0, a: 0 },
+              },
+            ],
+          });
+        (c.setPipeline(this.blitPipeline),
+          c.setBindGroup(0, d),
+          c.setVertexBuffer(0, this.quadBuffer),
+          c.setViewport(0, 0, n, i, 0, 1),
+          c.draw(4),
+          c.end());
+      }
+      _blurPass(e, t, r, n, i, s, l) {
+        let a = this.device;
+        a.queue.writeBuffer(this.blurUniformBuffer, 0, new Float32Array([s, l, 0, 0]));
+        let u = a.createBindGroup({
+            layout: this.blurPipeline.getBindGroupLayout(0),
+            entries: [
+              { binding: 0, resource: { buffer: this.blurUniformBuffer } },
+              { binding: 1, resource: this.sampler },
+              { binding: 2, resource: t },
+            ],
+          }),
+          o = e.beginRenderPass({
+            colorAttachments: [
+              {
+                view: r,
+                loadOp: "clear",
+                storeOp: "store",
+                clearValue: { r: 0, g: 0, b: 0, a: 0 },
+              },
+            ],
+          });
+        (o.setPipeline(this.blurPipeline),
+          o.setBindGroup(0, u),
+          o.setVertexBuffer(0, this.quadBuffer),
+          o.setViewport(0, 0, n, i, 0, 1),
+          o.draw(4),
+          o.end());
+      }
+      renderGlassPanel(e, t, r, n) {
+        if (!this._initialized || !this.device || !this.context) return;
+        let i = this.device,
+          s = this.width,
+          l = this.height,
+          a = this.activeTargets,
+          u = new Float32Array([
+            s * 0.5,
+            l * 0.5,
+            t * n,
+            r * n,
+            s,
+            l,
+            e.cornerRadius * n,
+            T * n,
+            e.refraction,
+            e.chromAberration,
+            e.edgeHighlight,
+            e.specular,
+            e.fresnel,
+            e.distortion,
+            e.opacity,
+            e.saturation,
+            e.tintStrength,
+            e.zRadius * n,
+            e.brightness,
+            e.shadowOpacity,
+            e.shadowSpread * n,
+            e.shadowOffsetY * n,
+            e.bevelMode,
+            0,
+            0,
+            0,
+            0,
+            0,
+          ]);
+        i.queue.writeBuffer(this.glassUniformBuffer, 0, u);
+        let o = i.createBindGroup({
+            layout: this.glassPipeline.getBindGroupLayout(0),
+            entries: [
+              { binding: 0, resource: { buffer: this.glassUniformBuffer } },
+              { binding: 1, resource: this.sampler },
+              { binding: 2, resource: a.bg.view },
+              { binding: 3, resource: a.blurA.view },
+            ],
+          }),
+          d = i.createCommandEncoder(),
+          c = d.beginRenderPass({
+            colorAttachments: [
+              {
+                view: this.context.getCurrentTexture().createView(),
+                loadOp: "load",
+                storeOp: "store",
+              },
+            ],
+          });
+        (c.setPipeline(this.glassPipeline),
+          c.setBindGroup(0, o),
+          c.setVertexBuffer(0, this.panelBuffer),
+          c.setViewport(0, 0, s, l, 0, 1),
+          c.draw(4),
+          c.end(),
+          i.queue.submit([d.finish()]));
+      }
+      clear() {
+        if (!this._initialized || !this.device || !this.context) return;
+        let e = this.device.createCommandEncoder(),
+          t = e.beginRenderPass({
+            colorAttachments: [
+              {
+                view: this.context.getCurrentTexture().createView(),
+                loadOp: "clear",
+                storeOp: "store",
+                clearValue: { r: 0, g: 0, b: 0, a: 0 },
+              },
+            ],
+          });
+        (t.setViewport(0, 0, this.width, this.height, 0, 1),
+          t.end(),
+          this.device.queue.submit([e.finish()]));
+      }
+      destroy() {
+        for (let e of this.targetCache.values()) this._freeTargetSet(e);
+        (this.targetCache.clear(),
+          this.bgTexture && this.bgTexture.destroy(),
+          this.quadBuffer && this.quadBuffer.destroy(),
+          this.panelBuffer && this.panelBuffer.destroy(),
+          this.blitUniformBuffer && this.blitUniformBuffer.destroy(),
+          this.blurUniformBuffer && this.blurUniformBuffer.destroy(),
+          this.glassUniformBuffer && this.glassUniformBuffer.destroy(),
+          this.device?.destroy(),
+          this.canvas.remove());
+      }
+      _setActiveSize(e, t) {
+        if (e <= 0 || t <= 0) return !1;
+        ((this.width = e),
+          (this.height = t),
+          (this.canvas.width < e || this.canvas.height < t) &&
+            ((this.canvas.width = Math.max(this.canvas.width, e)),
+            (this.canvas.height = Math.max(this.canvas.height, t)),
+            this.context?.configure({
+              device: this.device,
+              format: this.format,
+              alphaMode: "premultiplied",
+            })));
+        let r = `${e}x${t}`,
+          n = this.targetCache.get(r);
+        return (
+          n ||
+            ((n = {
+              bg: this._makeTarget(e, t),
+              blurA: this._makeTarget(e, t),
+              blurB: this._makeTarget(e, t),
+            }),
+            this.targetCache.set(r, n)),
+          (this.activeTargets = n),
+          !0
+        );
+      }
+      _makeTarget(e, t) {
+        let r = this.device.createTexture({
+          size: [e, t],
+          format: "rgba8unorm",
+          usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.RENDER_ATTACHMENT,
+        });
+        return { texture: r, view: r.createView(), w: e, h: t };
+      }
+      _freeTarget(e) {
+        e && e.texture.destroy();
+      }
+      _freeTargetSet(e) {
+        (this._freeTarget(e.bg), this._freeTarget(e.blurA), this._freeTarget(e.blurB));
+      }
+    };
+  var R = class {
+    canvas;
+    ctx;
+    renderer;
+    sceneCanvas;
+    sceneCtx;
+    drawElementImage;
+    _initPromise;
+    _initialized = !1;
+    constructor(e) {
+      ((this.canvas = e),
+        (this.ctx = e.getContext("2d")),
+        (this.renderer = new y()),
+        (this.sceneCanvas = document.createElement("canvas")),
+        (this.sceneCtx = this.sceneCanvas.getContext("2d")));
+      let t = this.ctx;
+      ((this.drawElementImage = t.drawElementImage?.bind(t) ?? t.drawElement?.bind(t) ?? null),
+        (this._initPromise = this._initWebGPU()));
+    }
+    async _initWebGPU() {
+      try {
+        return (await this.renderer.init())
+          ? ((this._initialized = !0), console.log("LiquidGlass: WebGPU renderer initialized"), !0)
+          : (console.error("LiquidGlass: WebGPU not available"), !1);
+      } catch (e) {
+        return (console.error("LiquidGlass: WebGPU init failed", e), !1);
+      }
+    }
+    get isReady() {
+      return this._initialized;
+    }
+    async waitForInit() {
+      return this._initPromise;
+    }
+    render() {
+      let e = this.canvas.width,
+        t = this.canvas.height;
+      if (e === 0 || t === 0 || !this.drawElementImage || !this._initialized) return;
+      this.ctx.clearRect(0, 0, e, t);
+      let r = window.devicePixelRatio || 1,
+        n = this.canvas.getBoundingClientRect(),
+        i = Array.from(this.canvas.children),
+        s = Array.from(this.canvas.querySelectorAll(".liquid-glass")),
+        l = new Set(s);
+      i.length === 0 &&
+        !this.__lg_warn_empty &&
+        (console.warn("LiquidGlass: No children found inside the canvas to render."),
+        (this.__lg_warn_empty = !0));
+      for (let a of i)
+        if (!l.has(a)) {
+          let u = a,
+            o = this._getElementPosition(u, n);
+          if (o.w <= 0 || o.h <= 0) continue;
+          let d = o.x * r,
+            c = o.y * r;
+          try {
+            let f = this.drawElementImage(a, d, c);
+            f && (u.style.transform = f.toString());
+          } catch (f) {
+            a.__lg_error_logged ||
+              (console.warn(
+                `LiquidGlass: Failed to draw background element ${a.tagName}.${a.className}:`,
+                f.message || f,
+              ),
+              (a.__lg_error_logged = !0));
+          }
+        }
+      for (let a of s)
+        try {
+          this._renderGlassElement(a, n, r);
+        } catch (u) {
+          a.__lg_error_logged_glass ||
+            (console.error(
+              `LiquidGlass: Failed to render glass effect for ${a.tagName}.${a.className}:`,
+              u.message || u,
+            ),
+            (a.__lg_error_logged_glass = !0));
+        }
+    }
+    renderGlassElements() {
+      let e = this.canvas.width,
+        t = this.canvas.height;
+      if (e === 0 || t === 0 || !this.drawElementImage || !this._initialized) return;
+      let r = window.devicePixelRatio || 1,
+        n = this.canvas.getBoundingClientRect(),
+        i = this.canvas.querySelectorAll(".liquid-glass");
+      for (let s of i) this._renderGlassElement(s, n, r);
+    }
+    _parseCSSLength(e, t) {
+      return !e || e === "auto"
+        ? NaN
+        : ((e = e.trim()),
+          e.startsWith("calc(")
+            ? this._parseCalc(e, t)
+            : e.endsWith("%")
+              ? (parseFloat(e) / 100) * t
+              : parseFloat(e) || 0);
+    }
+    _parseCalc(e, t) {
+      let r = e.match(/calc\((.+)\)/);
+      if (!r) return 0;
+      let n = r[1].trim(),
+        i = n.match(/(.+)\s*\+\s*(.+)/),
+        s = n.match(/(.+)\s*-\s*(.+)/);
+      if (s) {
+        let l = this._parseCSSLength(s[1].trim(), t),
+          a = this._parseCSSLength(s[2].trim(), t);
+        return l - a;
+      }
+      if (i) {
+        let l = this._parseCSSLength(i[1].trim(), t),
+          a = this._parseCSSLength(i[2].trim(), t);
+        return l + a;
+      }
+      return this._parseCSSLength(n, t);
+    }
+    _parseTransform(e, t, r) {
+      let n = 0,
+        i = 0;
+      if (!e || e === "none") return { tx: n, ty: i };
+      let s = e.match(/translate\(\s*([^,)]+)(?:\s*,\s*([^)]+))?\s*\)/);
+      s &&
+        ((n = this._parseTranslateValue(s[1], t)),
+        (i = s[2] ? this._parseTranslateValue(s[2], r) : 0));
+      let l = e.match(/translateX\(\s*([^)]+)\s*\)/);
+      l && (n = this._parseTranslateValue(l[1], t));
+      let a = e.match(/translateY\(\s*([^)]+)\s*\)/);
+      a && (i = this._parseTranslateValue(a[1], r));
+      let u = e.match(/translate3d\(\s*([^,]+)\s*,\s*([^,]+)\s*,\s*[^)]+\s*\)/);
+      return (
+        u && ((n = this._parseTranslateValue(u[1], t)), (i = this._parseTranslateValue(u[2], r))),
+        { tx: n, ty: i }
+      );
+    }
+    _parseTranslateValue(e, t) {
+      return ((e = e.trim()), e.endsWith("%") ? (parseFloat(e) / 100) * t : parseFloat(e) || 0);
+    }
+    _getElementPosition(e, t) {
+      let r = getComputedStyle(e),
+        n = parseFloat(getComputedStyle(this.canvas).width) || this.canvas.width || 1536,
+        i = parseFloat(getComputedStyle(this.canvas).height) || this.canvas.height || 1024,
+        s = e.getBoundingClientRect(),
+        l = s.width || parseFloat(r.width) || 0,
+        a = s.height || parseFloat(r.height) || 0,
+        u = 0,
+        o = 0,
+        d = e.style,
+        c = d.left || r.left,
+        f = d.right || r.right,
+        h = d.top || r.top,
+        b = d.bottom || r.bottom,
+        g = this._parseCSSLength(c, n),
+        p = this._parseCSSLength(f, n),
+        v = this._parseCSSLength(h, i),
+        S = this._parseCSSLength(b, i),
+        P = parseFloat(r.marginLeft) || 0,
+        x = parseFloat(r.marginRight) || 0,
+        M = parseFloat(r.marginTop) || 0,
+        A = parseFloat(r.marginBottom) || 0,
+        G = !isNaN(g),
+        U = !isNaN(p);
+      G && U && g === 0 && p === 0
+        ? (u = (n - l) / 2)
+        : (G && U) || G
+          ? (u = g + P)
+          : U && (u = n - l - p - x);
+      let B = !isNaN(v),
+        C = !isNaN(S);
+      B && C && v === 0 && S === 0
+        ? (o = (i - a) / 2)
+        : (B && C) || B
+          ? (o = v + M)
+          : C && (o = i - a - S - A);
+      let { tx: V, ty: F } = this._parseTransform(r.transform, l, a);
+      return ((u += V), (o += F), { x: u, y: o, w: l, h: a });
+    }
+    _renderGlassElement(e, t, r) {
+      if (!this.drawElementImage) return;
+      let n = this._getConfigFromCSS(e),
+        i = this._getElementPosition(e, t),
+        s = i.x,
+        l = i.y,
+        a = i.w,
+        u = i.h,
+        o = s * r,
+        d = l * r,
+        c = a * r,
+        f = u * r,
+        h = T * r,
+        b = o - h,
+        g = d - h,
+        p = c + h * 2,
+        v = f + h * 2;
+      this._captureRegion(b, g, p, v);
+      let S = Math.round(p),
+        P = Math.round(v);
+      (this.renderer.clear(),
+        this.renderer.uploadAndBlur(this.sceneCanvas, 0, 0, S, P, n.blurAmount),
+        this.renderer.renderGlassPanel(n, a, u, r),
+        this.ctx.drawImage(this.renderer.canvas, 0, 0, p, v, b, g, p, v));
+      try {
+        let x = this._drawGlassElementContent(e, o, d);
+        x && (e.style.transform = x.toString());
+      } catch (x) {
+        e.__lg_error_logged ||
+          (console.warn(
+            `LiquidGlass: Failed to draw glass element ${e.tagName}.${e.className}:`,
+            x,
+          ),
+          (e.__lg_error_logged = !0));
+      }
+    }
+    _drawGlassElementContent(e, t, r) {
+      if (!this.drawElementImage) return;
+      let n = this._suppressGlassChrome(e);
+      try {
+        return this.drawElementImage(e, t, r);
+      } finally {
+        this._restoreInlineStyles(e, n);
+      }
+    }
+    _suppressGlassChrome(e) {
+      let t = new Map(),
+        r = [
+          "background",
+          "backgroundColor",
+          "backgroundImage",
+          "borderColor",
+          "boxShadow",
+          "filter",
+          "outlineColor",
+        ];
+      for (let n of r) t.set(n, e.style[n]);
+      return (
+        (e.style.background = "transparent"),
+        (e.style.backgroundColor = "transparent"),
+        (e.style.backgroundImage = "none"),
+        (e.style.borderColor = "transparent"),
+        (e.style.boxShadow = "none"),
+        (e.style.filter = "none"),
+        (e.style.outlineColor = "transparent"),
+        t
+      );
+    }
+    _restoreInlineStyles(e, t) {
+      for (let [r, n] of t) e.style[r] = n;
+    }
+    _captureRegion(e, t, r, n) {
+      let i = Math.round(r),
+        s = Math.round(n);
+      ((this.sceneCanvas.width !== i || this.sceneCanvas.height !== s) &&
+        ((this.sceneCanvas.width = i), (this.sceneCanvas.height = s)),
+        (this.sceneCtx.fillStyle = "#ffffff"),
+        this.sceneCtx.fillRect(0, 0, i, s),
+        this.sceneCtx.drawImage(this.canvas, e, t, r, n, 0, 0, i, s));
+    }
+    _getConfigFromCSS(e) {
+      let t = getComputedStyle(e),
+        r = { ...w };
+      for (let [n, i] of Object.entries(_)) {
+        let s = t.getPropertyValue(n).trim();
+        if (s) {
+          let l = parseFloat(s);
+          isNaN(l) || (r[i] = l);
+        }
+      }
+      return r;
+    }
+    destroy() {
+      this.renderer.destroy();
+    }
+  };
+  return I(Y);
+})();
diff --git a/docs/public/catalog/blocks/liquid-glass-media-controls/liquid-glass-media-controls.html b/docs/public/catalog/blocks/liquid-glass-media-controls/liquid-glass-media-controls.html
new file mode 100644
index 0000000000..c5fb811d6e
--- /dev/null
+++ b/docs/public/catalog/blocks/liquid-glass-media-controls/liquid-glass-media-controls.html
@@ -0,0 +1,684 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Liquid Glass Media Controls</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script src="lib/liquid-glass.iife.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #0a0218;
+        overflow: hidden;
+        font-family: "Inter", system-ui, sans-serif;
+      }
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #three-canvas {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        z-index: 0;
+      }
+      #glass-canvas {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        z-index: 1;
+      }
+
+      /* ── Glass Panels ── */
+      .glass-panel {
+        position: absolute;
+        background: rgba(255, 255, 255, 0.055);
+        --lg-blur: 0.42;
+        --lg-refraction: 0.92;
+        --lg-corner-radius: 36;
+        --lg-z-radius: 58;
+        --lg-specular: 0.46;
+        --lg-fresnel: 1.15;
+        --lg-edge-highlight: 0.34;
+        --lg-chrom-aberration: 0.08;
+        --lg-shadow-opacity: 0;
+        --lg-shadow-spread: 0;
+        --lg-shadow-offset-y: 0;
+        --lg-saturation: 1.1;
+      }
+      .search-panel {
+        width: 640px;
+        height: 72px;
+        --lg-corner-radius: 24;
+      }
+      .toggle-panel {
+        width: 640px;
+        height: 64px;
+        --lg-corner-radius: 44;
+      }
+      .media-panel {
+        width: 640px;
+        height: 116px;
+        --lg-corner-radius: 44;
+      }
+      .slider-panel {
+        width: 640px;
+        height: 76px;
+        --lg-corner-radius: 28;
+      }
+
+      #glass-search {
+        top: 300px;
+        left: 640px;
+      }
+      #glass-toggle {
+        top: 390px;
+        left: 640px;
+      }
+      #glass-media {
+        top: 476px;
+        left: 640px;
+      }
+      #glass-slider {
+        top: 616px;
+        left: 640px;
+      }
+
+      /* ── Text Overlays ── */
+      .text-overlay {
+        position: absolute;
+        z-index: 2;
+        pointer-events: none;
+      }
+
+      /* Search bar */
+      .search-text {
+        width: 640px;
+        height: 72px;
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        padding: 0 28px;
+        background: transparent;
+        border-radius: 24px;
+        box-shadow: none;
+      }
+      .search-text svg {
+        width: 22px;
+        height: 22px;
+        stroke: rgba(255, 255, 255, 0.86);
+        fill: none;
+        stroke-width: 2;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        flex-shrink: 0;
+      }
+      .search-label {
+        font-size: 19px;
+        font-weight: 650;
+        color: #fff;
+        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.42);
+      }
+      .search-caret {
+        width: 2px;
+        height: 25px;
+        border-radius: 999px;
+        background: rgba(255, 255, 255, 0.82);
+        opacity: 0;
+      }
+      #text-search {
+        top: 300px;
+        left: 640px;
+      }
+
+      /* Toggle row */
+      .toggle-text {
+        width: 640px;
+        height: 64px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0;
+        position: relative;
+        padding: 6px;
+        background: transparent;
+        border-radius: 44px;
+        box-shadow: none;
+      }
+      .toggle-active-pill {
+        position: absolute;
+        top: 6px;
+        left: 6px;
+        z-index: 0;
+        width: 209px;
+        height: 52px;
+        border-radius: 999px;
+        background:
+          radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.32), transparent 42%),
+          rgba(255, 255, 255, 0.14);
+        box-shadow:
+          inset 0 1px 0 rgba(255, 255, 255, 0.32),
+          inset 0 -1px 0 rgba(255, 255, 255, 0.09);
+      }
+      .toggle-item {
+        flex: 1;
+        position: relative;
+        z-index: 1;
+        text-align: center;
+        font-size: 16px;
+        font-weight: 700;
+        color: rgba(255, 255, 255, 0.96);
+        line-height: 52px;
+        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.42);
+      }
+      .toggle-item.active {
+        color: #fff;
+      }
+      #text-toggle {
+        top: 390px;
+        left: 640px;
+      }
+
+      /* Media pill */
+      .media-text {
+        width: 640px;
+        height: 116px;
+        display: flex;
+        align-items: center;
+        gap: 22px;
+        padding: 0 24px;
+        background: transparent;
+        border-radius: 44px;
+        box-shadow: none;
+      }
+      .album-art {
+        position: relative;
+        overflow: hidden;
+        width: 78px;
+        height: 78px;
+        border-radius: 20px;
+        background:
+          radial-gradient(circle at 70% 28%, rgba(255, 255, 255, 0.78), transparent 16%),
+          conic-gradient(from 210deg, #06e3fa, #4fdb5e, #f59e0b, #ec4899, #06e3fa);
+        flex-shrink: 0;
+        box-shadow:
+          inset 0 1px 0 rgba(255, 255, 255, 0.28),
+          0 12px 26px rgba(0, 0, 0, 0.24);
+      }
+      .album-sheen {
+        position: absolute;
+        top: -10px;
+        left: -70px;
+        width: 38px;
+        height: 110px;
+        background: rgba(255, 255, 255, 0.34);
+        filter: blur(8px);
+        transform: rotate(24deg);
+      }
+      .media-info {
+        display: flex;
+        flex-direction: column;
+        gap: 7px;
+        flex: 1;
+        min-width: 0;
+      }
+      .media-title {
+        font-size: 22px;
+        font-weight: 700;
+        color: #fff;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.42);
+      }
+      .media-artist {
+        font-size: 16px;
+        font-weight: 600;
+        color: rgba(255, 255, 255, 0.84);
+        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.42);
+      }
+      .media-meta-row {
+        display: flex;
+        align-items: center;
+        gap: 9px;
+      }
+      .live-dot {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background: #4ade80;
+        box-shadow: 0 0 14px rgba(74, 222, 128, 0.76);
+      }
+      .sound-wave {
+        display: flex;
+        align-items: end;
+        gap: 3px;
+        height: 16px;
+      }
+      .sound-wave span {
+        width: 3px;
+        height: 7px;
+        border-radius: 999px;
+        background: rgba(255, 255, 255, 0.74);
+      }
+      .transport {
+        display: flex;
+        align-items: center;
+        gap: 24px;
+        margin-left: auto;
+        padding-right: 4px;
+      }
+      .transport svg {
+        width: 28px;
+        height: 28px;
+        fill: #fff;
+        stroke: none;
+      }
+      .transport .play-btn svg {
+        width: 38px;
+        height: 38px;
+      }
+      #text-media {
+        top: 476px;
+        left: 640px;
+      }
+
+      /* Brightness slider */
+      .slider-text {
+        width: 640px;
+        height: 76px;
+        display: flex;
+        align-items: center;
+        gap: 18px;
+        padding: 0 28px;
+        background: transparent;
+        border-radius: 28px;
+        box-shadow: none;
+      }
+      .slider-text svg {
+        width: 26px;
+        height: 26px;
+        stroke: rgba(255, 255, 255, 0.88);
+        fill: none;
+        stroke-width: 2;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        flex-shrink: 0;
+      }
+      .slider-track {
+        flex: 1;
+        height: 8px;
+        background: rgba(255, 255, 255, 0.24);
+        border-radius: 4px;
+        position: relative;
+      }
+      .slider-fill {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 34%;
+        height: 100%;
+        background: #fff;
+        border-radius: 3px;
+        box-shadow: 0 0 14px rgba(255, 255, 255, 0.5);
+      }
+      .slider-pct {
+        font-size: 17px;
+        font-weight: 600;
+        color: rgba(255, 255, 255, 0.9);
+        font-variant-numeric: tabular-nums;
+        width: 42px;
+        text-align: right;
+        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.42);
+      }
+      #text-slider {
+        top: 616px;
+        left: 640px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="liquid-glass-media-controls"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="8"
+      data-root="true"
+    >
+      <canvas id="three-canvas" width="1920" height="1080"></canvas>
+
+      <canvas id="glass-canvas" layoutsubtree width="1920" height="1080">
+        <div id="glass-search" class="glass-panel search-panel liquid-glass"></div>
+        <div id="glass-toggle" class="glass-panel toggle-panel liquid-glass"></div>
+        <div id="glass-media" class="glass-panel media-panel liquid-glass"></div>
+        <div id="glass-slider" class="glass-panel slider-panel liquid-glass"></div>
+      </canvas>
+
+      <!-- Search bar -->
+      <div id="text-search" class="text-overlay search-text">
+        <svg viewBox="0 0 24 24">
+          <circle cx="11" cy="11" r="8" />
+          <line x1="21" y1="21" x2="16.65" y2="16.65" />
+        </svg>
+        <span id="search-label" class="search-label">Search</span>
+        <span id="search-caret" class="search-caret"></span>
+      </div>
+
+      <!-- Toggle row -->
+      <div id="text-toggle" class="text-overlay toggle-text">
+        <div id="toggle-pill" class="toggle-active-pill"></div>
+        <div class="toggle-item active">All</div>
+        <div class="toggle-item">Favorites</div>
+        <div class="toggle-item">Recent</div>
+      </div>
+
+      <!-- Media pill -->
+      <div id="text-media" class="text-overlay media-text">
+        <div class="album-art"><span id="album-sheen" class="album-sheen"></span></div>
+        <div class="media-info">
+          <div class="media-title">Midnight Drive</div>
+          <div class="media-meta-row">
+            <span id="live-dot" class="live-dot"></span>
+            <div class="media-artist">Glass Resonance</div>
+            <div id="sound-wave" class="sound-wave">
+              <span></span><span></span><span></span><span></span>
+            </div>
+          </div>
+        </div>
+        <div class="transport">
+          <span>
+            <svg viewBox="0 0 24 24">
+              <polygon points="19 20 9 12 19 4" />
+              <line x1="5" y1="4" x2="5" y2="20" stroke="#fff" stroke-width="2" />
+            </svg>
+          </span>
+          <span class="play-btn">
+            <svg viewBox="0 0 24 24"><polygon points="5 3 19 12 5 21" /></svg>
+          </span>
+          <span>
+            <svg viewBox="0 0 24 24">
+              <polygon points="5 4 15 12 5 20" />
+              <line x1="19" y1="4" x2="19" y2="20" stroke="#fff" stroke-width="2" />
+            </svg>
+          </span>
+        </div>
+      </div>
+
+      <!-- Brightness slider -->
+      <div id="text-slider" class="text-overlay slider-text">
+        <svg viewBox="0 0 24 24">
+          <circle cx="12" cy="12" r="5" />
+          <line x1="12" y1="1" x2="12" y2="3" />
+          <line x1="12" y1="21" x2="12" y2="23" />
+          <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+          <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+          <line x1="1" y1="12" x2="3" y2="12" />
+          <line x1="21" y1="12" x2="23" y2="12" />
+          <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+          <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+        </svg>
+        <div class="slider-track"><div id="slider-fill" class="slider-fill"></div></div>
+        <span id="slider-pct" class="slider-pct">34%</span>
+      </div>
+
+      <div
+        id="driver"
+        class="clip"
+        data-start="0"
+        data-duration="8"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+
+    <script>
+      var W = 1920,
+        H = 1080,
+        DURATION = 8;
+
+      /* ── Three.js Aurora Shader ─────────────────────────────────────── */
+      var vs = "varying vec2 vUv; void main() { vUv = uv; gl_Position = vec4(position, 1.0); }";
+      var fs = [
+        "precision highp float;",
+        "varying vec2 vUv;",
+        "uniform float uTime;",
+        "vec3 mod289(vec3 x){return x-floor(x*(1.0/289.0))*289.0;}",
+        "vec4 mod289(vec4 x){return x-floor(x*(1.0/289.0))*289.0;}",
+        "vec4 permute(vec4 x){return mod289(((x*34.0)+1.0)*x);}",
+        "vec4 taylorInvSqrt(vec4 r){return 1.79284291400159-0.85373472095314*r;}",
+        "float snoise(vec3 v){",
+        "  const vec2 C=vec2(1.0/6.0,1.0/3.0);const vec4 D=vec4(0.0,0.5,1.0,2.0);",
+        "  vec3 i=floor(v+dot(v,C.yyy));vec3 x0=v-i+dot(i,C.xxx);",
+        "  vec3 g=step(x0.yzx,x0.xyz);vec3 l=1.0-g;",
+        "  vec3 i1=min(g.xyz,l.zxy);vec3 i2=max(g.xyz,l.zxy);",
+        "  vec3 x1=x0-i1+C.xxx;vec3 x2=x0-i2+C.yyy;vec3 x3=x0-D.yyy;",
+        "  i=mod289(i);",
+        "  vec4 p=permute(permute(permute(i.z+vec4(0.0,i1.z,i2.z,1.0))+i.y+vec4(0.0,i1.y,i2.y,1.0))+i.x+vec4(0.0,i1.x,i2.x,1.0));",
+        "  float n_=0.142857142857;vec3 ns=n_*D.wyz-D.xzx;",
+        "  vec4 j=p-49.0*floor(p*ns.z*ns.z);vec4 x_=floor(j*ns.z);vec4 y_=floor(j-7.0*x_);",
+        "  vec4 x=x_*ns.x+ns.yyyy;vec4 y=y_*ns.x+ns.yyyy;vec4 h=1.0-abs(x)-abs(y);",
+        "  vec4 b0=vec4(x.xy,y.xy);vec4 b1=vec4(x.zw,y.zw);",
+        "  vec4 s0=floor(b0)*2.0+1.0;vec4 s1=floor(b1)*2.0+1.0;",
+        "  vec4 sh=-step(h,vec4(0.0));",
+        "  vec4 a0=b0.xzyw+s0.xzyw*sh.xxyy;vec4 a1=b1.xzyw+s1.xzyw*sh.zzww;",
+        "  vec3 p0=vec3(a0.xy,h.x);vec3 p1=vec3(a0.zw,h.y);vec3 p2=vec3(a1.xy,h.z);vec3 p3=vec3(a1.zw,h.w);",
+        "  vec4 norm=taylorInvSqrt(vec4(dot(p0,p0),dot(p1,p1),dot(p2,p2),dot(p3,p3)));",
+        "  p0*=norm.x;p1*=norm.y;p2*=norm.z;p3*=norm.w;",
+        "  vec4 m=max(0.6-vec4(dot(x0,x0),dot(x1,x1),dot(x2,x2),dot(x3,x3)),0.0);m=m*m;",
+        "  return 42.0*dot(m*m,vec4(dot(p0,x0),dot(p1,x1),dot(p2,x2),dot(p3,x3)));",
+        "}",
+        "void main(){",
+        "  vec2 uv=vUv;float ar=1920.0/1080.0;vec2 p=vec2(uv.x*ar,uv.y);float t=uTime*0.06;",
+        "  float wx=snoise(vec3(p*1.4,t*0.5))*0.2;float wy=snoise(vec3(p*1.4+100.0,t*0.5))*0.2;",
+        "  vec2 wp=p+vec2(wx,wy);",
+        "  vec3 base=mix(vec3(0.10,0.02,0.22),vec3(0.04,0.10,0.25),smoothstep(0.0,1.0,uv.x*0.6+uv.y*0.4));",
+        "  float angle=0.65;float ridgeUv=dot(wp,vec2(cos(angle),sin(angle)));",
+        "  float ridge1=sin(ridgeUv*8.0+t*2.0+snoise(vec3(wp*0.8,t))*1.5);",
+        "  float ridge2=sin(ridgeUv*5.5-t*1.4+snoise(vec3(wp*1.2+50.0,t*0.7))*2.0);",
+        "  float ridge3=sin(ridgeUv*12.0+t*3.0+snoise(vec3(wp*0.6+80.0,t*0.4))*1.0);",
+        "  float crease1=pow(abs(ridge1),0.35)*sign(ridge1)*0.5+0.5;",
+        "  float crease2=pow(abs(ridge2),0.4)*sign(ridge2)*0.5+0.5;",
+        "  float crease3=pow(abs(ridge3),0.5)*sign(ridge3)*0.5+0.5;",
+        "  vec3 warm=mix(vec3(0.9,0.4,0.08),vec3(0.95,0.65,0.15),crease1);",
+        "  float warmZone=smoothstep(0.15,0.75,uv.x+uv.y*0.4+snoise(vec3(uv*2.0,t))*0.3);",
+        "  vec3 cool=mix(vec3(0.02,0.4,0.55),vec3(0.25,0.7,0.82),crease2);",
+        "  float coolZone=smoothstep(0.25,0.85,1.2-uv.x+uv.y*0.5+snoise(vec3(uv*2.0+40.0,t*0.8))*0.25);",
+        "  vec3 hot=mix(vec3(0.8,0.1,0.4),vec3(0.6,0.08,0.65),crease3);",
+        "  float hotZone=smoothstep(0.5,0.9,snoise(vec3(uv*2.5+20.0,t*0.6))*0.5+0.5);",
+        "  vec3 col=base;",
+        "  col=mix(col,warm,warmZone*0.75*smoothstep(0.3,0.7,crease1));",
+        "  col=mix(col,cool,coolZone*0.65*smoothstep(0.2,0.65,crease2));",
+        "  col=mix(col,hot,hotZone*0.5*smoothstep(0.35,0.8,crease3));",
+        "  float edgeGlow=pow(1.0-abs(ridge1),6.0)*0.4+pow(1.0-abs(ridge2),5.0)*0.25;",
+        "  col+=edgeGlow*mix(warm,cool,uv.x)*0.8;",
+        "  col*=1.0-pow(abs(ridge1),4.0)*0.15;",
+        "  float vig=1.0-smoothstep(0.5,1.5,length((uv-0.5)*vec2(1.3,1.0)));",
+        "  col*=0.65+vig*0.5;",
+        "  float luma=dot(col,vec3(0.299,0.587,0.114));col=mix(vec3(luma),col,1.5);",
+        "  col=clamp(col,0.0,1.0);col=pow(col,vec3(0.9));",
+        "  gl_FragColor=vec4(col,1.0);",
+        "}",
+      ].join("\n");
+
+      /* ── Three.js Setup ─────────────────────────────────────────────── */
+      var threeCanvas = document.getElementById("three-canvas");
+      var renderer = new THREE.WebGLRenderer({ canvas: threeCanvas, alpha: false });
+      renderer.setSize(W, H, false);
+      renderer.setPixelRatio(1);
+
+      var scene = new THREE.Scene();
+      var camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
+      var uniforms = { uTime: { value: 0 } };
+      var shaderMat = new THREE.ShaderMaterial({
+        vertexShader: vs,
+        fragmentShader: fs,
+        uniforms: uniforms,
+      });
+      var quad = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), shaderMat);
+      scene.add(quad);
+
+      /* ── Glass Canvas ───────────────────────────────────────────────── */
+      var glassCanvas = document.getElementById("glass-canvas");
+      var ctx = glassCanvas.getContext("2d");
+      var lg = new LiquidGlass.LiquidGlassCanvas(glassCanvas);
+      var lgReady = false;
+
+      function renderGlass(time) {
+        if (!lgReady) return;
+        uniforms.uTime.value = time;
+        renderer.render(scene, camera);
+        ctx.clearRect(0, 0, W, H);
+        ctx.drawImage(threeCanvas, 0, 0, W, H);
+        lg.renderGlassElements();
+      }
+
+      function requestGlassRender(time) {
+        if (glassCanvas.requestPaint) {
+          glassCanvas.onpaint = function () {
+            renderGlass(time);
+          };
+          glassCanvas.requestPaint();
+          return;
+        }
+        renderGlass(time);
+      }
+
+      lg.waitForInit().then(function (ok) {
+        if (!ok) return;
+        lgReady = true;
+        requestGlassRender(0);
+      });
+
+      /* ── GSAP Timeline ──────────────────────────────────────────────── */
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+
+      var gs = document.getElementById("glass-search");
+      var gt = document.getElementById("glass-toggle");
+      var gm = document.getElementById("glass-media");
+      var gsl = document.getElementById("glass-slider");
+      var ts = document.getElementById("text-search");
+      var tt = document.getElementById("text-toggle");
+      var tm = document.getElementById("text-media");
+      var tsl = document.getElementById("text-slider");
+      var searchLabel = document.getElementById("search-label");
+      var sliderPct = document.getElementById("slider-pct");
+      var sliderValue = { value: 34 };
+
+      // Glass panels live inside <canvas layoutsubtree> (html-in-canvas): the canvas lib
+      // reads their sub-pixel computed top/left, so animating layout props on them does
+      // NOT stutter and is exempt from gsap_non_transform_motion. They keep top/left.
+      // Plain-DOM text overlays DO stutter on layout props, so they use transforms (x/y).
+      // CSS resting tops — search 300, toggle 390, media 476, slider 616 — are the
+      // transform base; the original set seeded top:1160, i.e. y = 1160 - restingTop.
+      gsap.set([gs, gt, gm, gsl], { top: 1160, opacity: 1 });
+      gsap.set(ts, { y: 860, opacity: 1 });
+      gsap.set(tt, { y: 770, opacity: 1 });
+      gsap.set(tm, { y: 684, opacity: 1 });
+      gsap.set(tsl, { y: 544, opacity: 1 });
+      gsap.set("#sound-wave span", { height: 7 });
+
+      tl.to(gs, { top: 300, duration: 0.48, ease: "power3.out" }, 0.12);
+      tl.to(ts, { y: 0, duration: 0.48, ease: "power3.out" }, 0.12);
+      tl.to(gt, { top: 390, duration: 0.44, ease: "power3.out" }, 0.22);
+      tl.to(tt, { y: 0, duration: 0.44, ease: "power3.out" }, 0.22);
+      tl.to(gm, { top: 476, duration: 0.44, ease: "power3.out" }, 0.32);
+      tl.to(tm, { y: 0, duration: 0.44, ease: "power3.out" }, 0.32);
+      tl.to(gsl, { top: 616, duration: 0.46, ease: "power3.out" }, 0.42);
+      tl.to(tsl, { y: 0, duration: 0.46, ease: "power3.out" }, 0.42);
+
+      tl.call(
+        function () {
+          searchLabel.textContent = "Search Music";
+        },
+        null,
+        0.9,
+      );
+      tl.to(
+        "#search-caret",
+        { opacity: 1, duration: 0.1, yoyo: true, repeat: 5, ease: "none" },
+        0.94,
+      );
+      tl.call(
+        function () {
+          searchLabel.textContent = "Midnight Drive";
+        },
+        null,
+        1.55,
+      );
+      tl.to("#toggle-pill", { x: 209, duration: 0.24, ease: "power2.out" }, 1.82);
+      tl.to(
+        ".play-btn",
+        { scale: 0.86, duration: 0.12, ease: "power2.out", yoyo: true, repeat: 1 },
+        2.18,
+      );
+      tl.to("#album-sheen", { x: 182, duration: 0.75, ease: "power2.out" }, 2.2);
+      tl.to(
+        "#sound-wave span",
+        { height: 15, duration: 0.22, ease: "power2.inOut", stagger: 0.05, yoyo: true, repeat: 12 },
+        2.2,
+      );
+      tl.to(
+        sliderValue,
+        {
+          value: 82,
+          duration: 4.4,
+          ease: "none",
+          onUpdate: function () {
+            sliderPct.textContent = Math.round(sliderValue.value) + "%";
+          },
+        },
+        1.2,
+      );
+      tl.to("#slider-fill", { width: "82%", duration: 4.4, ease: "none" }, 1.2);
+      tl.to(
+        "#live-dot",
+        { scale: 1.45, duration: 0.24, ease: "power2.out", yoyo: true, repeat: 4 },
+        2.6,
+      );
+      tl.to("#toggle-pill", { x: 419, duration: 0.24, ease: "power2.out" }, 4.15);
+
+      // Settle + exit. Split so glass panels keep relative top (exempt, html-in-canvas)
+      // and plain-DOM text overlays use the relative transform equivalent (y). Inline
+      // array literals so the linter can resolve each group's targets; a pre-declared
+      // array variable resolves to __unresolved__ and would lose the canvas exemption.
+      tl.to(
+        [gs, gt, gm, gsl],
+        { top: "-=8", duration: 0.22, ease: "power2.out", yoyo: true, repeat: 1 },
+        5.55,
+      );
+      tl.to(
+        [ts, tt, tm, tsl],
+        { y: "-=8", duration: 0.22, ease: "power2.out", yoyo: true, repeat: 1 },
+        5.55,
+      );
+      tl.to([gs, gt, gm, gsl], { top: "+=760", duration: 0.42, ease: "power2.in" }, 6.72);
+      tl.to([ts, tt, tm, tsl], { y: "+=760", duration: 0.42, ease: "power2.in" }, 6.72);
+
+      /* Duration driver */
+      tl.to({ v: 0 }, { v: 1, duration: DURATION, ease: "none" }, 0);
+
+      tl.eventCallback("onUpdate", function () {
+        requestGlassRender(tl.time());
+      });
+
+      window.__timelines["liquid-glass-media-controls"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/liquid-glass-notification/assets/hyperframes-logo-dark.svg b/docs/public/catalog/blocks/liquid-glass-notification/assets/hyperframes-logo-dark.svg
new file mode 100644
index 0000000000..1d5721e7c0
--- /dev/null
+++ b/docs/public/catalog/blocks/liquid-glass-notification/assets/hyperframes-logo-dark.svg
@@ -0,0 +1,31 @@
+<svg width="263" height="79" viewBox="0 0 263 79" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 16.6738H4.96V23.3838H11.53V16.6738H16.49V35.4538H11.53V27.6738H4.96V35.4538H0V16.6738Z" fill="white"/>
+<path d="M17.8899 28.0137C17.8899 23.4237 21.2399 20.0237 25.7999 20.0237C30.0099 20.0237 32.9399 23.0837 32.9399 27.5637C32.9399 28.2037 32.8599 28.8237 32.8299 29.3337H22.6099C23.0399 31.1337 24.6199 32.1237 27.1399 32.1237C28.7199 32.1237 30.2199 31.7237 31.2999 31.0237V34.6737C30.1699 35.3937 28.2999 35.8537 26.3599 35.8537C21.2599 35.8537 17.8799 32.6037 17.8799 28.0237L17.8899 28.0137ZM28.5699 26.1937C28.4899 24.5337 27.3899 23.5637 25.7499 23.5637C24.1099 23.5637 22.9599 24.5337 22.6099 26.1937H28.5699Z" fill="white"/>
+<path d="M37.85 33.8638L32 20.4238H37.29L40.46 28.1538L43.6 20.4238H48.48L40.33 39.5738H35.26L37.86 33.8638H37.85Z" fill="white"/>
+<path d="M48.1797 26.1138C48.1797 20.4238 52.7097 16.2438 58.9397 16.2438C61.2997 16.2438 63.5297 16.8038 64.8197 17.7238V21.9338C63.5597 20.9138 61.6797 20.2938 59.7497 20.2938C55.7797 20.2938 53.2597 22.6238 53.2597 26.1438C53.2597 29.6638 55.5697 31.8838 58.8897 31.8838C59.6397 31.8838 60.4997 31.7538 61.1997 31.5038V27.8838H57.4697V24.2338H65.5197V33.7038C63.6697 35.0938 61.1997 35.8738 58.5997 35.8738C52.5397 35.8738 48.1897 31.7438 48.1897 26.1138H48.1797Z" fill="white"/>
+<path d="M66.6604 28.0137C66.6604 23.4237 70.0104 20.0237 74.5704 20.0237C78.7804 20.0237 81.7104 23.0837 81.7104 27.5637C81.7104 28.2037 81.6304 28.8237 81.6004 29.3337H71.3804C71.8104 31.1337 73.3904 32.1237 75.9104 32.1237C77.4904 32.1237 78.9904 31.7237 80.0704 31.0237V34.6737C78.9404 35.3937 77.0704 35.8537 75.1304 35.8537C70.0304 35.8537 66.6504 32.6037 66.6504 28.0237L66.6604 28.0137ZM77.3404 26.1937C77.2604 24.5337 76.1604 23.5637 74.5204 23.5637C72.8804 23.5637 71.7304 24.5337 71.3804 26.1937H77.3404Z" fill="white"/>
+<path d="M82.9697 20.4238H87.8497V22.4138C88.7597 20.9638 90.3497 20.1038 92.3297 20.1038C95.4997 20.1038 97.3997 22.3338 97.3997 25.8138V35.4438H92.5197V26.8638C92.5197 25.0438 91.8197 24.1838 90.4797 24.1838C88.9497 24.1838 87.8497 25.3638 87.8497 27.2638V35.4438H82.9697V20.4238Z" fill="white"/>
+<path d="M195.219 26.1937L213.529 38.9937C216.009 40.7237 220.239 38.7637 221.009 35.5337L228.419 4.33374C229.189 1.10374 225.879 -0.856262 222.589 0.873738L198.199 13.6737C192.649 16.5837 191.059 23.2837 195.219 26.1937Z" fill="url(#paint0_linear_2204_3044)"/>
+<path d="M256.97 25.9638L232.58 38.7638C229.28 40.4938 225.98 38.5338 226.75 35.3038L234.16 4.10376C234.93 0.873757 239.16 -1.08624 241.64 0.643757L259.95 13.4438C264.12 16.3538 262.52 23.0538 256.97 25.9638Z" fill="url(#paint1_linear_2204_3044)"/>
+<path d="M252.115 72.502C250.192 72.502 248.268 72.0838 246.93 71.3728V65.6853C247.808 66.3126 248.937 66.689 250.066 66.689C251.739 66.689 252.784 65.8526 252.784 64.5562C252.784 63.8452 252.492 63.0925 251.655 62.0888L249.899 59.956C248.728 58.4923 248.226 56.9031 248.226 55.2721C248.226 51.0065 251.864 48.0791 256.883 48.0791C258.723 48.0791 260.438 48.4555 261.65 49.0828V54.7703C260.898 54.2266 259.768 53.8503 258.723 53.8503C257.092 53.8503 256.046 54.6867 256.046 55.8994C256.046 56.6522 256.423 57.405 257.259 58.4086L258.974 60.4996C260.187 62.047 260.73 63.5943 260.73 65.2671C260.73 69.5746 257.05 72.502 252.115 72.502Z" fill="white"/>
+<path d="M236.338 72.6269C228.392 72.6269 223.123 67.5667 223.123 60.4155C223.123 53.2643 228.351 47.9531 235.46 47.9531C242.026 47.9531 246.584 52.7206 246.584 59.7045C246.584 60.7082 246.459 61.6701 246.417 62.4647H230.483C231.152 65.2666 233.62 66.8139 237.551 66.8139C240.018 66.8139 242.36 66.1866 244.033 65.0993V70.7868C242.277 71.916 239.349 72.6269 236.338 72.6269ZM230.483 57.5717H239.767C239.642 54.9789 237.927 53.4734 235.376 53.4734C232.867 53.4734 231.027 54.9789 230.483 57.5717Z" fill="white"/>
+<path d="M184.998 72.0001V48.5809H192.609V51.6756C193.989 49.4173 196.373 48.0791 199.426 48.0791C202.521 48.0791 204.779 49.5428 206.075 52.052C207.497 49.5846 210.132 48.0791 213.352 48.0791C218.245 48.0791 221.214 51.592 221.214 57.0286V72.0001H213.603V58.5341C213.603 55.774 212.557 54.4357 210.634 54.4357C208.459 54.4357 206.912 56.234 206.912 59.0778V72.0001H199.3V58.5341C199.3 55.774 198.255 54.4357 196.373 54.4357C194.157 54.4357 192.609 56.234 192.609 59.0778V72.0001H184.998Z" fill="white"/>
+<path d="M167.26 72.4602C161.154 72.4602 156.596 67.2745 156.596 60.3324C156.596 53.3066 161.196 48.0791 167.302 48.0791C170.438 48.0791 173.031 49.4173 174.536 51.8429V48.5809H182.148V72.0001H174.536V68.4873C173.031 71.0801 170.438 72.4602 167.26 72.4602ZM169.393 66.1872C172.78 66.1872 174.536 63.3434 174.536 60.876V59.6632C174.536 57.2377 172.78 54.4357 169.393 54.4357C166.298 54.4357 164.207 56.7777 164.207 60.2905C164.207 63.7616 166.298 66.1872 169.393 66.1872Z" fill="white"/>
+<path d="M141.258 72V48.5808H148.827V52.9719C149.831 50.0445 151.796 48.2881 154.306 48.2881C154.975 48.2881 155.602 48.4135 156.02 48.6645V55.8993C155.435 55.5648 154.724 55.4393 153.887 55.4393C150.751 55.4393 148.869 57.6558 148.869 61.2941V72H141.258Z" fill="white"/>
+<path d="M122.643 71.9996V42.7256H139.371V49.124H130.379V54.477H138.911V60.5827H130.379V71.9996H122.643Z" fill="white"/>
+<path d="M105.645 72V48.5808H113.214V52.9719C114.218 50.0445 116.183 48.2881 118.692 48.2881C119.361 48.2881 119.989 48.4135 120.407 48.6645V55.8993C119.822 55.5648 119.111 55.4393 118.274 55.4393C115.138 55.4393 113.256 57.6558 113.256 61.2941V72H105.645Z" fill="white"/>
+<path d="M93.4397 72.6269C85.4939 72.6269 80.2246 67.5667 80.2246 60.4155C80.2246 53.2643 85.4521 47.9531 92.5615 47.9531C99.1273 47.9531 103.686 52.7206 103.686 59.7045C103.686 60.7082 103.56 61.6701 103.518 62.4647H87.5849C88.2541 65.2666 90.7214 66.8139 94.6525 66.8139C97.1199 66.8139 99.4618 66.1866 101.135 65.0993V70.7868C99.3782 71.916 96.4508 72.6269 93.4397 72.6269ZM87.5849 57.5717H96.869C96.7435 54.9789 95.0289 53.4734 92.4779 53.4734C89.9687 53.4734 88.1286 54.9789 87.5849 57.5717Z" fill="white"/>
+<path d="M53.3711 78.4404V48.5809H60.9823V52.052C62.446 49.501 65.0807 48.0791 68.3008 48.0791C74.3647 48.0791 78.9649 53.3066 78.9649 60.2487C78.9649 67.2745 74.3229 72.4602 68.259 72.4602C65.0807 72.4602 62.446 71.1637 60.9823 68.78V78.4404H53.3711ZM66.1262 66.1872C69.2627 66.1872 71.3119 63.7616 71.3119 60.2905C71.3119 56.8195 69.2627 54.4357 66.1262 54.4357C62.7388 54.4357 60.9823 57.2795 60.9823 59.7051V60.9178C60.9823 63.3434 62.7388 66.1872 66.1262 66.1872Z" fill="white"/>
+<path d="M31.9606 78.4405L36.0171 69.5329L26.9004 48.5811H35.1389L40.0737 60.6252L44.9666 48.5811H52.5779L39.8646 78.4405H31.9606Z" fill="white"/>
+<path d="M0 71.9996V42.7256H7.7367V53.1806H17.9826V42.7256H25.7193V71.9996H17.9826V59.8718H7.7367V71.9996H0Z" fill="white"/>
+<defs>
+<linearGradient id="paint0_linear_2204_3044" x1="225.869" y1="-3.06048e-05" x2="222.845" y2="37.4821" gradientUnits="userSpaceOnUse">
+<stop stop-color="#06E3FA"/>
+<stop offset="1" stop-color="#4FDB5E"/>
+</linearGradient>
+<linearGradient id="paint1_linear_2204_3044" x1="230.87" y1="39" x2="244.661" y2="6.30303" gradientUnits="userSpaceOnUse">
+<stop stop-color="#06E3FA"/>
+<stop offset="1" stop-color="#4FDB5E"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/docs/public/catalog/blocks/liquid-glass-notification/lib/liquid-glass.iife.js b/docs/public/catalog/blocks/liquid-glass-notification/lib/liquid-glass.iife.js
new file mode 100644
index 0000000000..ae5210629b
--- /dev/null
+++ b/docs/public/catalog/blocks/liquid-glass-notification/lib/liquid-glass.iife.js
@@ -0,0 +1,1048 @@
+var LiquidGlass = (() => {
+  var E = Object.defineProperty;
+  var D = Object.getOwnPropertyDescriptor;
+  var z = Object.getOwnPropertyNames;
+  var N = Object.prototype.hasOwnProperty;
+  var O = (m, e) => {
+      for (var t in e) E(m, t, { get: e[t], enumerable: !0 });
+    },
+    H = (m, e, t, r) => {
+      if ((e && typeof e == "object") || typeof e == "function")
+        for (let n of z(e))
+          !N.call(m, n) &&
+            n !== t &&
+            E(m, n, { get: () => e[n], enumerable: !(r = D(e, n)) || r.enumerable });
+      return m;
+    };
+  var I = (m) => H(E({}, "__esModule", { value: !0 }), m);
+  var Y = {};
+  O(Y, {
+    CSS_PROPERTY_MAP: () => _,
+    DEFAULTS: () => w,
+    GlassRendererGPU: () => y,
+    LiquidGlassCanvas: () => R,
+  });
+  var w = {
+      blurAmount: 0,
+      refraction: 0.69,
+      chromAberration: 0.05,
+      edgeHighlight: 0.05,
+      specular: 0,
+      fresnel: 1,
+      distortion: 0,
+      cornerRadius: 65,
+      zRadius: 40,
+      opacity: 1,
+      saturation: 0,
+      tintStrength: 0,
+      brightness: 0,
+      shadowOpacity: 0.3,
+      shadowSpread: 10,
+      shadowOffsetY: 1,
+      bevelMode: 0,
+    },
+    _ = {
+      "--lg-blur": "blurAmount",
+      "--lg-refraction": "refraction",
+      "--lg-chrom-aberration": "chromAberration",
+      "--lg-edge-highlight": "edgeHighlight",
+      "--lg-specular": "specular",
+      "--lg-fresnel": "fresnel",
+      "--lg-distortion": "distortion",
+      "--lg-corner-radius": "cornerRadius",
+      "--lg-z-radius": "zRadius",
+      "--lg-opacity": "opacity",
+      "--lg-saturation": "saturation",
+      "--lg-tint": "tintStrength",
+      "--lg-brightness": "brightness",
+      "--lg-shadow-opacity": "shadowOpacity",
+      "--lg-shadow-spread": "shadowSpread",
+      "--lg-shadow-offset-y": "shadowOffsetY",
+      "--lg-bevel-mode": "bevelMode",
+    },
+    L = 6,
+    T = 20;
+  var q = `// Blit shader - copy texture with UV transform
+
+struct BlitUniforms {
+  scale: vec2f,
+  offset: vec2f,
+}
+
+@group(0) @binding(0) var<uniform> u: BlitUniforms;
+@group(0) @binding(1) var texSampler: sampler;
+@group(0) @binding(2) var tex: texture_2d<f32>;
+
+struct VertexOutput {
+  @builtin(position) position: vec4f,
+  @location(0) uv: vec2f,
+}
+
+@vertex
+fn vertexMain(@location(0) pos: vec2f) -> VertexOutput {
+  var out: VertexOutput;
+  out.uv = pos * 0.5 + 0.5;
+  out.position = vec4f(pos, 0.0, 1.0);
+  return out;
+}
+
+@fragment
+fn fragmentMain(in: VertexOutput) -> @location(0) vec4f {
+  return textureSample(tex, texSampler, in.uv * u.scale + u.offset);
+}
+`,
+    k = `// Blur shader - 9-tap Gaussian blur (single direction)
+
+struct BlurUniforms {
+  dir: vec2f,
+  _pad: vec2f,
+}
+
+@group(0) @binding(0) var<uniform> u: BlurUniforms;
+@group(0) @binding(1) var texSampler: sampler;
+@group(0) @binding(2) var tex: texture_2d<f32>;
+
+struct VertexOutput {
+  @builtin(position) position: vec4f,
+  @location(0) uv: vec2f,
+}
+
+@vertex
+fn vertexMain(@location(0) pos: vec2f) -> VertexOutput {
+  var out: VertexOutput;
+  out.uv = pos * 0.5 + 0.5;
+  out.position = vec4f(pos, 0.0, 1.0);
+  return out;
+}
+
+@fragment
+fn fragmentMain(in: VertexOutput) -> @location(0) vec4f {
+  var s = textureSample(tex, texSampler, in.uv) * 0.227027;
+  s += textureSample(tex, texSampler, in.uv + u.dir * 1.0) * 0.194594;
+  s += textureSample(tex, texSampler, in.uv - u.dir * 1.0) * 0.194594;
+  s += textureSample(tex, texSampler, in.uv + u.dir * 2.0) * 0.121622;
+  s += textureSample(tex, texSampler, in.uv - u.dir * 2.0) * 0.121622;
+  s += textureSample(tex, texSampler, in.uv + u.dir * 3.0) * 0.054054;
+  s += textureSample(tex, texSampler, in.uv - u.dir * 3.0) * 0.054054;
+  s += textureSample(tex, texSampler, in.uv + u.dir * 4.0) * 0.016216;
+  s += textureSample(tex, texSampler, in.uv - u.dir * 4.0) * 0.016216;
+  return s;
+}
+`,
+    W = `// Glass shader - the core liquid glass effect
+
+struct GlassUniforms {
+  center: vec2f,
+  size: vec2f,
+  res: vec2f,
+  radius: f32,
+  pad: f32,
+  refract: f32,
+  chroma: f32,
+  edgeHL: f32,
+  spec: f32,
+  fresnel: f32,
+  distort: f32,
+  alpha: f32,
+  sat: f32,
+  tint: f32,
+  zRadius: f32,
+  brightness: f32,
+  shadowAlpha: f32,
+  shadowSpread: f32,
+  shadowOffY: f32,
+  bevelMode: f32,
+  _pad: vec2f,
+}
+
+@group(0) @binding(0) var<uniform> u: GlassUniforms;
+@group(0) @binding(1) var texSampler: sampler;
+@group(0) @binding(2) var bgTex: texture_2d<f32>;
+@group(0) @binding(3) var blurTex: texture_2d<f32>;
+
+struct VertexOutput {
+  @builtin(position) position: vec4f,
+  @location(0) localPx: vec2f,
+  @location(1) screenUV: vec2f,
+}
+
+@vertex
+fn vertexMain(@location(0) pos: vec2f) -> VertexOutput {
+  var out: VertexOutput;
+  let total = u.size + vec2f(u.pad * 2.0);
+  out.localPx = pos * total;
+  let px = u.center + pos * total;
+  out.screenUV = vec2f(px.x / u.res.x, 1.0 - px.y / u.res.y);
+  var ndc = (px / u.res) * 2.0 - 1.0;
+  ndc.y = -ndc.y;
+  out.position = vec4f(ndc, 0.0, 1.0);
+  return out;
+}
+
+// Rounded-rect signed distance
+fn rrSDF(p: vec2f, b: vec2f, r: f32) -> f32 {
+  let q = abs(p) - b + vec2f(r);
+  return min(max(q.x, q.y), 0.0) + length(max(q, vec2f(0.0))) - r;
+}
+
+// Bevel height field
+fn bevelHeight(d: f32, zR: f32) -> f32 {
+  if (d <= 0.0) { return 0.0; }
+  if (d >= zR) { return zR; }
+  return sqrt(d * (2.0 * zR - d));
+}
+
+fn hash(p: vec2f) -> f32 {
+  return fract(sin(dot(p, vec2f(127.1, 311.7))) * 43758.5453);
+}
+
+@fragment
+fn fragmentMain(in: VertexOutput) -> @location(0) vec4f {
+  let half_ = u.size * 0.5;
+  let r = min(u.radius, min(half_.x, half_.y));
+  let sdf = rrSDF(in.localPx, half_, r);
+
+  // Anti-aliased mask
+  let mask = 1.0 - smoothstep(-1.5, 0.5, sdf);
+
+  let maxD = min(half_.x, half_.y);
+  let inside = -sdf;
+  let edge = smoothstep(maxD * 0.35, 0.0, inside);
+
+  // Surface normal via bevel height field
+  let zR = u.zRadius;
+  let e = 2.0;
+  let dC = inside;
+  let dR = -rrSDF(in.localPx + vec2f(e, 0.0), half_, r);
+  let dL = -rrSDF(in.localPx - vec2f(e, 0.0), half_, r);
+  let dU = -rrSDF(in.localPx + vec2f(0.0, e), half_, r);
+  let dD = -rrSDF(in.localPx - vec2f(0.0, e), half_, r);
+  let hC = bevelHeight(dC, zR);
+  let hR = bevelHeight(dR, zR);
+  let hL = bevelHeight(dL, zR);
+  let hU = bevelHeight(dU, zR);
+  let hD = bevelHeight(dD, zR);
+  let hGrad = vec2f(hR - hL, hU - hD) / (2.0 * e);
+  let N = normalize(vec3f(-hGrad, 1.0));
+
+  let depth = smoothstep(0.0, zR, inside);
+
+  // Refraction - compute both modes and select
+  let pxToUV = vec2f(1.0, -1.0) / u.res;
+  let ior = 1.5;
+  let refrPow = 1.0 - 1.0 / ior;
+  let thickness = hC * 2.0;
+  let thickNorm = thickness / max(zR * 2.0, 1.0);
+
+  // Biconvex mode
+  let exitRefr = hGrad * refrPow;
+  let entryRefr = hGrad * refrPow;
+  let throughRefr = entryRefr * thickNorm * 0.5;
+  var refrPxBiconvex = (exitRefr + entryRefr + throughRefr) * u.refract * 30.0;
+  let centerDir = -in.localPx / max(half_, vec2f(1.0));
+  refrPxBiconvex += centerDir * u.refract * 4.0 * depth;
+
+  // Dome mode
+  let refrPxDome = -in.localPx * u.refract * depth * 0.35;
+
+  // Select based on bevel mode
+  let refrPx = select(refrPxBiconvex, refrPxDome, u.bevelMode >= 0.5);
+  let refr = refrPx * pxToUV;
+
+  // Micro-distortion noise
+  let ns = in.localPx * 0.08;
+  let absPxToUV = vec2f(1.0) / u.res;
+  let micro = (vec2f(hash(ns), hash(ns + vec2f(37.0))) - 0.5) * u.distort * 4.0 * absPxToUV;
+
+  // Chromatic aberration
+  let caS = u.chroma * 18.0 * (edge * 0.7 + 0.3) * 2.0;
+  let caD = N.xy * caS * pxToUV;
+  let base = in.screenUV + refr + micro;
+
+  // Sample textures (must be in uniform control flow)
+  let sharpR = textureSample(bgTex, texSampler, base + caD).r;
+  let sharpG = textureSample(bgTex, texSampler, base).g;
+  let sharpB = textureSample(bgTex, texSampler, base - caD).b;
+  let sharp = vec3f(sharpR, sharpG, sharpB);
+
+  let blurR = textureSample(blurTex, texSampler, base + caD).r;
+  let blurG = textureSample(blurTex, texSampler, base).g;
+  let blurB = textureSample(blurTex, texSampler, base - caD).b;
+  let blur = vec3f(blurR, blurG, blurB);
+
+  // Edge-weighted blur mix
+  let edgeMix = 1.0 - edge * 0.15;
+  var col = mix(sharp, blur, edgeMix);
+
+  // Brightness
+  col *= 1.0 + u.brightness;
+
+  // Saturation
+  let lum = dot(col, vec3f(0.299, 0.587, 0.114));
+  col = mix(vec3f(lum), col, 1.0 + u.sat);
+
+  // Cool glass tint
+  col = mix(col, col * vec3f(0.92, 0.95, 1.05), u.tint);
+  col *= 1.0 + 0.06 * depth;
+
+  // Fresnel
+  let fres = pow(1.0 - abs(N.z), 4.0) * u.fresnel;
+
+  // Specular highlights (multi-light Blinn-Phong)
+  let V = vec3f(0.0, 0.0, 1.0);
+  let L1 = normalize(vec3f(0.4, 0.7, 1.0));
+  let H1 = normalize(L1 + V);
+  let sp1 = pow(max(dot(N, H1), 0.0), 90.0);
+  let L2 = normalize(vec3f(-0.3, -0.5, 1.0));
+  let H2 = normalize(L2 + V);
+  let sp2 = pow(max(dot(N, H2), 0.0), 50.0) * 0.3;
+  let L3 = normalize(vec3f(0.1, 0.3, 1.0));
+  let spB = pow(max(dot(N, L3), 0.0), 6.0) * 0.1;
+  let L4 = normalize(vec3f(0.0, 0.9, 0.4));
+  let H4 = normalize(L4 + V);
+  let sp4 = pow(max(dot(N, H4), 0.0), 120.0) * 0.6;
+  let totalSpec = (sp1 + sp2 + spB + sp4) * u.spec;
+
+  // Inner border / stroke highlight
+  let borderWidth = 1.5;
+  let innerStroke = smoothstep(-borderWidth - 1.0, -borderWidth, sdf)
+                  * (1.0 - smoothstep(-1.0, 0.0, sdf));
+  let topBias = 0.5 + 0.5 * (-in.localPx.y / half_.y);
+  let innerStrokeFinal = innerStroke * (0.4 + 0.6 * topBias);
+
+  // Edge highlight & inner glow
+  let rim = edge * u.edgeHL * 0.22;
+  let innerGlow = smoothstep(5.0, 0.0, -sdf) * u.edgeHL * 0.15;
+
+  // Environment-like reflection (fake)
+  let envRefl = (N.y * 0.5 + 0.5) * fres * 0.08;
+
+  // Composite glass effect
+  var fin = col;
+  fin += vec3f(totalSpec);
+  fin += vec3f(rim + innerGlow);
+  fin += vec3f(innerStrokeFinal * u.edgeHL * 0.55);
+  fin += vec3f(envRefl);
+  fin = mix(fin, vec3f(1.0), fres * 0.2);
+
+  // Shadow calculation (outside panel)
+  let sdfShadow = rrSDF(in.localPx - vec2f(0.0, u.shadowOffY), half_, r);
+  let shadowD = max(sdfShadow - 1.0, 0.0);
+  let spread = max(u.shadowSpread, 1.0);
+  let falloff = 1.0 / (spread * spread);
+  let outerShadow = exp(-shadowD * shadowD * falloff) * 0.65;
+  let contactShadow = exp(-shadowD * 0.08 / max(spread * 0.04, 0.01)) * 0.35;
+  let shadow = (outerShadow + contactShadow) * u.shadowAlpha;
+
+  // Select between shadow (outside) and glass (inside)
+  let isOutside = sdf > 0.0;
+  let finalColor = select(fin, vec3f(0.0), isOutside);
+  let finalAlpha = select(mask * u.alpha, shadow, isOutside);
+
+  return vec4f(finalColor, finalAlpha);
+}
+`,
+    y = class {
+      canvas;
+      device = null;
+      context = null;
+      format = "bgra8unorm";
+      blitPipeline = null;
+      blurPipeline = null;
+      glassPipeline = null;
+      quadBuffer = null;
+      panelBuffer = null;
+      blitUniformBuffer = null;
+      blurUniformBuffer = null;
+      glassUniformBuffer = null;
+      sampler = null;
+      targetCache = new Map();
+      activeTargets = null;
+      bgTexture = null;
+      bgTextureView = null;
+      width = 0;
+      height = 0;
+      _initPromise = null;
+      _initialized = !1;
+      constructor() {
+        ((this.canvas = document.createElement("canvas")),
+          (this.canvas.style.display = "none"),
+          document.body.appendChild(this.canvas));
+      }
+      async init() {
+        return this._initPromise
+          ? this._initPromise
+          : ((this._initPromise = this._doInit()), this._initPromise);
+      }
+      async _doInit() {
+        if (!navigator.gpu) return (console.warn("WebGPU not supported"), !1);
+        let e = await navigator.gpu.requestAdapter();
+        return e
+          ? ((this.device = await e.requestDevice()),
+            this.device
+              ? ((this.context = this.canvas.getContext("webgpu")),
+                this.context
+                  ? ((this.format = navigator.gpu.getPreferredCanvasFormat()),
+                    this.context.configure({
+                      device: this.device,
+                      format: this.format,
+                      alphaMode: "premultiplied",
+                    }),
+                    this._initPipelines(),
+                    this._initBuffers(),
+                    (this._initialized = !0),
+                    !0)
+                  : (console.warn("Failed to get WebGPU context"), !1))
+              : (console.warn("Failed to get WebGPU device"), !1))
+          : (console.warn("No WebGPU adapter found"), !1);
+      }
+      get initialized() {
+        return this._initialized;
+      }
+      _initPipelines() {
+        let e = this.device;
+        this.sampler = e.createSampler({
+          magFilter: "linear",
+          minFilter: "linear",
+          addressModeU: "clamp-to-edge",
+          addressModeV: "clamp-to-edge",
+        });
+        let t = e.createShaderModule({ code: q }),
+          r = e.createBindGroupLayout({
+            entries: [
+              {
+                binding: 0,
+                visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+                buffer: { type: "uniform" },
+              },
+              { binding: 1, visibility: GPUShaderStage.FRAGMENT, sampler: { type: "filtering" } },
+              { binding: 2, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "float" } },
+            ],
+          });
+        this.blitPipeline = e.createRenderPipeline({
+          layout: e.createPipelineLayout({ bindGroupLayouts: [r] }),
+          vertex: {
+            module: t,
+            entryPoint: "vertexMain",
+            buffers: [
+              {
+                arrayStride: 8,
+                attributes: [{ shaderLocation: 0, offset: 0, format: "float32x2" }],
+              },
+            ],
+          },
+          fragment: { module: t, entryPoint: "fragmentMain", targets: [{ format: "rgba8unorm" }] },
+          primitive: { topology: "triangle-strip" },
+        });
+        let n = e.createShaderModule({ code: k }),
+          i = e.createBindGroupLayout({
+            entries: [
+              {
+                binding: 0,
+                visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+                buffer: { type: "uniform" },
+              },
+              { binding: 1, visibility: GPUShaderStage.FRAGMENT, sampler: { type: "filtering" } },
+              { binding: 2, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "float" } },
+            ],
+          });
+        this.blurPipeline = e.createRenderPipeline({
+          layout: e.createPipelineLayout({ bindGroupLayouts: [i] }),
+          vertex: {
+            module: n,
+            entryPoint: "vertexMain",
+            buffers: [
+              {
+                arrayStride: 8,
+                attributes: [{ shaderLocation: 0, offset: 0, format: "float32x2" }],
+              },
+            ],
+          },
+          fragment: { module: n, entryPoint: "fragmentMain", targets: [{ format: "rgba8unorm" }] },
+          primitive: { topology: "triangle-strip" },
+        });
+        let s = e.createShaderModule({ code: W }),
+          l = e.createBindGroupLayout({
+            entries: [
+              {
+                binding: 0,
+                visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+                buffer: { type: "uniform" },
+              },
+              { binding: 1, visibility: GPUShaderStage.FRAGMENT, sampler: { type: "filtering" } },
+              { binding: 2, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "float" } },
+              { binding: 3, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "float" } },
+            ],
+          });
+        this.glassPipeline = e.createRenderPipeline({
+          layout: e.createPipelineLayout({ bindGroupLayouts: [l] }),
+          vertex: {
+            module: s,
+            entryPoint: "vertexMain",
+            buffers: [
+              {
+                arrayStride: 8,
+                attributes: [{ shaderLocation: 0, offset: 0, format: "float32x2" }],
+              },
+            ],
+          },
+          fragment: {
+            module: s,
+            entryPoint: "fragmentMain",
+            targets: [
+              {
+                format: this.format,
+                blend: {
+                  color: {
+                    srcFactor: "src-alpha",
+                    dstFactor: "one-minus-src-alpha",
+                    operation: "add",
+                  },
+                  alpha: { srcFactor: "one", dstFactor: "one-minus-src-alpha", operation: "add" },
+                },
+              },
+            ],
+          },
+          primitive: { topology: "triangle-strip" },
+        });
+      }
+      _initBuffers() {
+        let e = this.device;
+        ((this.quadBuffer = e.createBuffer({
+          size: 32,
+          usage: GPUBufferUsage.VERTEX,
+          mappedAtCreation: !0,
+        })),
+          new Float32Array(this.quadBuffer.getMappedRange()).set([-1, -1, 1, -1, -1, 1, 1, 1]),
+          this.quadBuffer.unmap(),
+          (this.panelBuffer = e.createBuffer({
+            size: 32,
+            usage: GPUBufferUsage.VERTEX,
+            mappedAtCreation: !0,
+          })),
+          new Float32Array(this.panelBuffer.getMappedRange()).set([
+            -0.5, -0.5, 0.5, -0.5, -0.5, 0.5, 0.5, 0.5,
+          ]),
+          this.panelBuffer.unmap(),
+          (this.blitUniformBuffer = e.createBuffer({
+            size: 16,
+            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+          })),
+          (this.blurUniformBuffer = e.createBuffer({
+            size: 16,
+            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+          })),
+          (this.glassUniformBuffer = e.createBuffer({
+            size: 112,
+            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+          })));
+      }
+      resize(e, t) {
+        if (!(this.width === e && this.height === t)) {
+          ((this.width = e), (this.height = t));
+          for (let r of this.targetCache.values()) this._freeTargetSet(r);
+          (this.targetCache.clear(), (this.activeTargets = null));
+        }
+      }
+      uploadAndBlur(e, t, r, n, i, s) {
+        if (!this._initialized || !this.device || !this._setActiveSize(n, i)) return;
+        let l = this.device,
+          a = this.width,
+          u = this.height,
+          o = this.activeTargets,
+          d = document.createElement("canvas");
+        ((d.width = a),
+          (d.height = u),
+          d.getContext("2d").drawImage(e, -t, -r),
+          (!this.bgTexture || this.bgTexture.width !== a || this.bgTexture.height !== u) &&
+            (this.bgTexture && this.bgTexture.destroy(),
+            (this.bgTexture = l.createTexture({
+              size: [a, u],
+              format: "rgba8unorm",
+              usage:
+                GPUTextureUsage.TEXTURE_BINDING |
+                GPUTextureUsage.COPY_DST |
+                GPUTextureUsage.RENDER_ATTACHMENT,
+            })),
+            (this.bgTextureView = this.bgTexture.createView())),
+          l.queue.copyExternalImageToTexture(
+            { source: d, flipY: !0 },
+            { texture: this.bgTexture },
+            [a, u],
+          ));
+        let f = l.createCommandEncoder();
+        this._blitPass(f, this.bgTextureView, o.bg.view, a, u, 1, 1, 0, 0);
+        let h = o.blurA.w,
+          b = o.blurA.h;
+        if ((this._blitPass(f, o.bg.view, o.blurA.view, h, b, 1, 1, 0, 0), s > 0)) {
+          let g = s * 2.5;
+          for (let p = 0; p < L; p++)
+            (this._blurPass(f, o.blurA.view, o.blurB.view, h, b, g / h, 0),
+              this._blurPass(f, o.blurB.view, o.blurA.view, h, b, 0, g / b));
+        }
+        l.queue.submit([f.finish()]);
+      }
+      _blitPass(e, t, r, n, i, s, l, a, u) {
+        let o = this.device;
+        o.queue.writeBuffer(this.blitUniformBuffer, 0, new Float32Array([s, l, a, u]));
+        let d = o.createBindGroup({
+            layout: this.blitPipeline.getBindGroupLayout(0),
+            entries: [
+              { binding: 0, resource: { buffer: this.blitUniformBuffer } },
+              { binding: 1, resource: this.sampler },
+              { binding: 2, resource: t },
+            ],
+          }),
+          c = e.beginRenderPass({
+            colorAttachments: [
+              {
+                view: r,
+                loadOp: "clear",
+                storeOp: "store",
+                clearValue: { r: 0, g: 0, b: 0, a: 0 },
+              },
+            ],
+          });
+        (c.setPipeline(this.blitPipeline),
+          c.setBindGroup(0, d),
+          c.setVertexBuffer(0, this.quadBuffer),
+          c.setViewport(0, 0, n, i, 0, 1),
+          c.draw(4),
+          c.end());
+      }
+      _blurPass(e, t, r, n, i, s, l) {
+        let a = this.device;
+        a.queue.writeBuffer(this.blurUniformBuffer, 0, new Float32Array([s, l, 0, 0]));
+        let u = a.createBindGroup({
+            layout: this.blurPipeline.getBindGroupLayout(0),
+            entries: [
+              { binding: 0, resource: { buffer: this.blurUniformBuffer } },
+              { binding: 1, resource: this.sampler },
+              { binding: 2, resource: t },
+            ],
+          }),
+          o = e.beginRenderPass({
+            colorAttachments: [
+              {
+                view: r,
+                loadOp: "clear",
+                storeOp: "store",
+                clearValue: { r: 0, g: 0, b: 0, a: 0 },
+              },
+            ],
+          });
+        (o.setPipeline(this.blurPipeline),
+          o.setBindGroup(0, u),
+          o.setVertexBuffer(0, this.quadBuffer),
+          o.setViewport(0, 0, n, i, 0, 1),
+          o.draw(4),
+          o.end());
+      }
+      renderGlassPanel(e, t, r, n) {
+        if (!this._initialized || !this.device || !this.context) return;
+        let i = this.device,
+          s = this.width,
+          l = this.height,
+          a = this.activeTargets,
+          u = new Float32Array([
+            s * 0.5,
+            l * 0.5,
+            t * n,
+            r * n,
+            s,
+            l,
+            e.cornerRadius * n,
+            T * n,
+            e.refraction,
+            e.chromAberration,
+            e.edgeHighlight,
+            e.specular,
+            e.fresnel,
+            e.distortion,
+            e.opacity,
+            e.saturation,
+            e.tintStrength,
+            e.zRadius * n,
+            e.brightness,
+            e.shadowOpacity,
+            e.shadowSpread * n,
+            e.shadowOffsetY * n,
+            e.bevelMode,
+            0,
+            0,
+            0,
+            0,
+            0,
+          ]);
+        i.queue.writeBuffer(this.glassUniformBuffer, 0, u);
+        let o = i.createBindGroup({
+            layout: this.glassPipeline.getBindGroupLayout(0),
+            entries: [
+              { binding: 0, resource: { buffer: this.glassUniformBuffer } },
+              { binding: 1, resource: this.sampler },
+              { binding: 2, resource: a.bg.view },
+              { binding: 3, resource: a.blurA.view },
+            ],
+          }),
+          d = i.createCommandEncoder(),
+          c = d.beginRenderPass({
+            colorAttachments: [
+              {
+                view: this.context.getCurrentTexture().createView(),
+                loadOp: "load",
+                storeOp: "store",
+              },
+            ],
+          });
+        (c.setPipeline(this.glassPipeline),
+          c.setBindGroup(0, o),
+          c.setVertexBuffer(0, this.panelBuffer),
+          c.setViewport(0, 0, s, l, 0, 1),
+          c.draw(4),
+          c.end(),
+          i.queue.submit([d.finish()]));
+      }
+      clear() {
+        if (!this._initialized || !this.device || !this.context) return;
+        let e = this.device.createCommandEncoder(),
+          t = e.beginRenderPass({
+            colorAttachments: [
+              {
+                view: this.context.getCurrentTexture().createView(),
+                loadOp: "clear",
+                storeOp: "store",
+                clearValue: { r: 0, g: 0, b: 0, a: 0 },
+              },
+            ],
+          });
+        (t.setViewport(0, 0, this.width, this.height, 0, 1),
+          t.end(),
+          this.device.queue.submit([e.finish()]));
+      }
+      destroy() {
+        for (let e of this.targetCache.values()) this._freeTargetSet(e);
+        (this.targetCache.clear(),
+          this.bgTexture && this.bgTexture.destroy(),
+          this.quadBuffer && this.quadBuffer.destroy(),
+          this.panelBuffer && this.panelBuffer.destroy(),
+          this.blitUniformBuffer && this.blitUniformBuffer.destroy(),
+          this.blurUniformBuffer && this.blurUniformBuffer.destroy(),
+          this.glassUniformBuffer && this.glassUniformBuffer.destroy(),
+          this.device?.destroy(),
+          this.canvas.remove());
+      }
+      _setActiveSize(e, t) {
+        if (e <= 0 || t <= 0) return !1;
+        ((this.width = e),
+          (this.height = t),
+          (this.canvas.width < e || this.canvas.height < t) &&
+            ((this.canvas.width = Math.max(this.canvas.width, e)),
+            (this.canvas.height = Math.max(this.canvas.height, t)),
+            this.context?.configure({
+              device: this.device,
+              format: this.format,
+              alphaMode: "premultiplied",
+            })));
+        let r = `${e}x${t}`,
+          n = this.targetCache.get(r);
+        return (
+          n ||
+            ((n = {
+              bg: this._makeTarget(e, t),
+              blurA: this._makeTarget(e, t),
+              blurB: this._makeTarget(e, t),
+            }),
+            this.targetCache.set(r, n)),
+          (this.activeTargets = n),
+          !0
+        );
+      }
+      _makeTarget(e, t) {
+        let r = this.device.createTexture({
+          size: [e, t],
+          format: "rgba8unorm",
+          usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.RENDER_ATTACHMENT,
+        });
+        return { texture: r, view: r.createView(), w: e, h: t };
+      }
+      _freeTarget(e) {
+        e && e.texture.destroy();
+      }
+      _freeTargetSet(e) {
+        (this._freeTarget(e.bg), this._freeTarget(e.blurA), this._freeTarget(e.blurB));
+      }
+    };
+  var R = class {
+    canvas;
+    ctx;
+    renderer;
+    sceneCanvas;
+    sceneCtx;
+    drawElementImage;
+    _initPromise;
+    _initialized = !1;
+    constructor(e) {
+      ((this.canvas = e),
+        (this.ctx = e.getContext("2d")),
+        (this.renderer = new y()),
+        (this.sceneCanvas = document.createElement("canvas")),
+        (this.sceneCtx = this.sceneCanvas.getContext("2d")));
+      let t = this.ctx;
+      ((this.drawElementImage = t.drawElementImage?.bind(t) ?? t.drawElement?.bind(t) ?? null),
+        (this._initPromise = this._initWebGPU()));
+    }
+    async _initWebGPU() {
+      try {
+        return (await this.renderer.init())
+          ? ((this._initialized = !0), console.log("LiquidGlass: WebGPU renderer initialized"), !0)
+          : (console.error("LiquidGlass: WebGPU not available"), !1);
+      } catch (e) {
+        return (console.error("LiquidGlass: WebGPU init failed", e), !1);
+      }
+    }
+    get isReady() {
+      return this._initialized;
+    }
+    async waitForInit() {
+      return this._initPromise;
+    }
+    render() {
+      let e = this.canvas.width,
+        t = this.canvas.height;
+      if (e === 0 || t === 0 || !this.drawElementImage || !this._initialized) return;
+      this.ctx.clearRect(0, 0, e, t);
+      let r = window.devicePixelRatio || 1,
+        n = this.canvas.getBoundingClientRect(),
+        i = Array.from(this.canvas.children),
+        s = Array.from(this.canvas.querySelectorAll(".liquid-glass")),
+        l = new Set(s);
+      i.length === 0 &&
+        !this.__lg_warn_empty &&
+        (console.warn("LiquidGlass: No children found inside the canvas to render."),
+        (this.__lg_warn_empty = !0));
+      for (let a of i)
+        if (!l.has(a)) {
+          let u = a,
+            o = this._getElementPosition(u, n);
+          if (o.w <= 0 || o.h <= 0) continue;
+          let d = o.x * r,
+            c = o.y * r;
+          try {
+            let f = this.drawElementImage(a, d, c);
+            f && (u.style.transform = f.toString());
+          } catch (f) {
+            a.__lg_error_logged ||
+              (console.warn(
+                `LiquidGlass: Failed to draw background element ${a.tagName}.${a.className}:`,
+                f.message || f,
+              ),
+              (a.__lg_error_logged = !0));
+          }
+        }
+      for (let a of s)
+        try {
+          this._renderGlassElement(a, n, r);
+        } catch (u) {
+          a.__lg_error_logged_glass ||
+            (console.error(
+              `LiquidGlass: Failed to render glass effect for ${a.tagName}.${a.className}:`,
+              u.message || u,
+            ),
+            (a.__lg_error_logged_glass = !0));
+        }
+    }
+    renderGlassElements() {
+      let e = this.canvas.width,
+        t = this.canvas.height;
+      if (e === 0 || t === 0 || !this.drawElementImage || !this._initialized) return;
+      let r = window.devicePixelRatio || 1,
+        n = this.canvas.getBoundingClientRect(),
+        i = this.canvas.querySelectorAll(".liquid-glass");
+      for (let s of i) this._renderGlassElement(s, n, r);
+    }
+    _parseCSSLength(e, t) {
+      return !e || e === "auto"
+        ? NaN
+        : ((e = e.trim()),
+          e.startsWith("calc(")
+            ? this._parseCalc(e, t)
+            : e.endsWith("%")
+              ? (parseFloat(e) / 100) * t
+              : parseFloat(e) || 0);
+    }
+    _parseCalc(e, t) {
+      let r = e.match(/calc\((.+)\)/);
+      if (!r) return 0;
+      let n = r[1].trim(),
+        i = n.match(/(.+)\s*\+\s*(.+)/),
+        s = n.match(/(.+)\s*-\s*(.+)/);
+      if (s) {
+        let l = this._parseCSSLength(s[1].trim(), t),
+          a = this._parseCSSLength(s[2].trim(), t);
+        return l - a;
+      }
+      if (i) {
+        let l = this._parseCSSLength(i[1].trim(), t),
+          a = this._parseCSSLength(i[2].trim(), t);
+        return l + a;
+      }
+      return this._parseCSSLength(n, t);
+    }
+    _parseTransform(e, t, r) {
+      let n = 0,
+        i = 0;
+      if (!e || e === "none") return { tx: n, ty: i };
+      let s = e.match(/translate\(\s*([^,)]+)(?:\s*,\s*([^)]+))?\s*\)/);
+      s &&
+        ((n = this._parseTranslateValue(s[1], t)),
+        (i = s[2] ? this._parseTranslateValue(s[2], r) : 0));
+      let l = e.match(/translateX\(\s*([^)]+)\s*\)/);
+      l && (n = this._parseTranslateValue(l[1], t));
+      let a = e.match(/translateY\(\s*([^)]+)\s*\)/);
+      a && (i = this._parseTranslateValue(a[1], r));
+      let u = e.match(/translate3d\(\s*([^,]+)\s*,\s*([^,]+)\s*,\s*[^)]+\s*\)/);
+      return (
+        u && ((n = this._parseTranslateValue(u[1], t)), (i = this._parseTranslateValue(u[2], r))),
+        { tx: n, ty: i }
+      );
+    }
+    _parseTranslateValue(e, t) {
+      return ((e = e.trim()), e.endsWith("%") ? (parseFloat(e) / 100) * t : parseFloat(e) || 0);
+    }
+    _getElementPosition(e, t) {
+      let r = getComputedStyle(e),
+        n = parseFloat(getComputedStyle(this.canvas).width) || this.canvas.width || 1536,
+        i = parseFloat(getComputedStyle(this.canvas).height) || this.canvas.height || 1024,
+        s = e.getBoundingClientRect(),
+        l = s.width || parseFloat(r.width) || 0,
+        a = s.height || parseFloat(r.height) || 0,
+        u = 0,
+        o = 0,
+        d = e.style,
+        c = d.left || r.left,
+        f = d.right || r.right,
+        h = d.top || r.top,
+        b = d.bottom || r.bottom,
+        g = this._parseCSSLength(c, n),
+        p = this._parseCSSLength(f, n),
+        v = this._parseCSSLength(h, i),
+        S = this._parseCSSLength(b, i),
+        P = parseFloat(r.marginLeft) || 0,
+        x = parseFloat(r.marginRight) || 0,
+        M = parseFloat(r.marginTop) || 0,
+        A = parseFloat(r.marginBottom) || 0,
+        G = !isNaN(g),
+        U = !isNaN(p);
+      G && U && g === 0 && p === 0
+        ? (u = (n - l) / 2)
+        : (G && U) || G
+          ? (u = g + P)
+          : U && (u = n - l - p - x);
+      let B = !isNaN(v),
+        C = !isNaN(S);
+      B && C && v === 0 && S === 0
+        ? (o = (i - a) / 2)
+        : (B && C) || B
+          ? (o = v + M)
+          : C && (o = i - a - S - A);
+      let { tx: V, ty: F } = this._parseTransform(r.transform, l, a);
+      return ((u += V), (o += F), { x: u, y: o, w: l, h: a });
+    }
+    _renderGlassElement(e, t, r) {
+      if (!this.drawElementImage) return;
+      let n = this._getConfigFromCSS(e),
+        i = this._getElementPosition(e, t),
+        s = i.x,
+        l = i.y,
+        a = i.w,
+        u = i.h,
+        o = s * r,
+        d = l * r,
+        c = a * r,
+        f = u * r,
+        h = T * r,
+        b = o - h,
+        g = d - h,
+        p = c + h * 2,
+        v = f + h * 2;
+      this._captureRegion(b, g, p, v);
+      let S = Math.round(p),
+        P = Math.round(v);
+      (this.renderer.clear(),
+        this.renderer.uploadAndBlur(this.sceneCanvas, 0, 0, S, P, n.blurAmount),
+        this.renderer.renderGlassPanel(n, a, u, r),
+        this.ctx.drawImage(this.renderer.canvas, 0, 0, p, v, b, g, p, v));
+      try {
+        let x = this._drawGlassElementContent(e, o, d);
+        x && (e.style.transform = x.toString());
+      } catch (x) {
+        e.__lg_error_logged ||
+          (console.warn(
+            `LiquidGlass: Failed to draw glass element ${e.tagName}.${e.className}:`,
+            x,
+          ),
+          (e.__lg_error_logged = !0));
+      }
+    }
+    _drawGlassElementContent(e, t, r) {
+      if (!this.drawElementImage) return;
+      let n = this._suppressGlassChrome(e);
+      try {
+        return this.drawElementImage(e, t, r);
+      } finally {
+        this._restoreInlineStyles(e, n);
+      }
+    }
+    _suppressGlassChrome(e) {
+      let t = new Map(),
+        r = [
+          "background",
+          "backgroundColor",
+          "backgroundImage",
+          "borderColor",
+          "boxShadow",
+          "filter",
+          "outlineColor",
+        ];
+      for (let n of r) t.set(n, e.style[n]);
+      return (
+        (e.style.background = "transparent"),
+        (e.style.backgroundColor = "transparent"),
+        (e.style.backgroundImage = "none"),
+        (e.style.borderColor = "transparent"),
+        (e.style.boxShadow = "none"),
+        (e.style.filter = "none"),
+        (e.style.outlineColor = "transparent"),
+        t
+      );
+    }
+    _restoreInlineStyles(e, t) {
+      for (let [r, n] of t) e.style[r] = n;
+    }
+    _captureRegion(e, t, r, n) {
+      let i = Math.round(r),
+        s = Math.round(n);
+      ((this.sceneCanvas.width !== i || this.sceneCanvas.height !== s) &&
+        ((this.sceneCanvas.width = i), (this.sceneCanvas.height = s)),
+        (this.sceneCtx.fillStyle = "#ffffff"),
+        this.sceneCtx.fillRect(0, 0, i, s),
+        this.sceneCtx.drawImage(this.canvas, e, t, r, n, 0, 0, i, s));
+    }
+    _getConfigFromCSS(e) {
+      let t = getComputedStyle(e),
+        r = { ...w };
+      for (let [n, i] of Object.entries(_)) {
+        let s = t.getPropertyValue(n).trim();
+        if (s) {
+          let l = parseFloat(s);
+          isNaN(l) || (r[i] = l);
+        }
+      }
+      return r;
+    }
+    destroy() {
+      this.renderer.destroy();
+    }
+  };
+  return I(Y);
+})();
diff --git a/docs/public/catalog/blocks/liquid-glass-notification/liquid-glass-notification.html b/docs/public/catalog/blocks/liquid-glass-notification/liquid-glass-notification.html
new file mode 100644
index 0000000000..85f968d54d
--- /dev/null
+++ b/docs/public/catalog/blocks/liquid-glass-notification/liquid-glass-notification.html
@@ -0,0 +1,481 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script src="lib/liquid-glass.iife.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000;
+      }
+      body {
+        font-family: "Inter", sans-serif;
+        color: #fff;
+      }
+
+      #three-canvas {
+        position: absolute;
+        inset: 0;
+        z-index: 0;
+        display: block;
+      }
+      #glass-canvas {
+        position: absolute;
+        inset: 0;
+        z-index: 1;
+        display: block;
+        width: 1920px;
+        height: 1080px;
+      }
+      .text-overlay {
+        position: absolute;
+        inset: 0;
+        z-index: 2;
+        pointer-events: none;
+      }
+
+      .glass-panel {
+        position: absolute;
+        width: 520px;
+        height: 118px;
+        background: rgba(255, 255, 255, 0.06);
+        --lg-blur: 0.22;
+        --lg-refraction: 0.6;
+        --lg-corner-radius: 36;
+        --lg-z-radius: 38;
+        --lg-specular: 0.2;
+        --lg-fresnel: 0.9;
+        --lg-edge-highlight: 0.1;
+        --lg-chrom-aberration: 0.05;
+        --lg-shadow-opacity: 0.35;
+        --lg-shadow-spread: 14;
+        --lg-shadow-offset-y: 4;
+        --lg-saturation: 0.25;
+      }
+      .glass-panel.p1 {
+        top: 60px;
+        left: 1340px;
+      }
+      .glass-panel.p2 {
+        top: 196px;
+        left: 1340px;
+      }
+
+      .notif-card {
+        position: absolute;
+        width: 520px;
+        height: 118px;
+        padding: 18px 24px;
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        color: #fff;
+      }
+      .notif-card.c1 {
+        top: 60px;
+        left: 1340px;
+      }
+      .notif-card.c2 {
+        top: 196px;
+        left: 1340px;
+      }
+
+      .avatar {
+        width: 48px;
+        height: 48px;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 19px;
+        font-weight: 800;
+        flex-shrink: 0;
+        box-shadow:
+          inset 0 1px 0 rgba(255, 255, 255, 0.35),
+          0 10px 24px rgba(0, 0, 0, 0.24);
+      }
+      .avatar-ja {
+        width: 128px;
+        border-radius: 20px;
+        background: rgba(2, 4, 10, 0.72);
+        box-shadow:
+          inset 0 1px 0 rgba(255, 255, 255, 0.18),
+          0 10px 24px rgba(0, 0, 0, 0.24);
+      }
+      .hyperframes-logo {
+        width: 102px;
+        height: auto;
+        display: block;
+      }
+      .avatar-kl {
+        background: linear-gradient(135deg, #ff7ab6, #8b5cf6);
+      }
+      .notif-body {
+        flex: 1;
+        min-width: 0;
+      }
+      .notif-header {
+        display: flex;
+        align-items: baseline;
+        gap: 8px;
+        margin-bottom: 3px;
+      }
+      .notif-name {
+        font-size: 20px;
+        font-weight: 700;
+      }
+      .notif-time {
+        font-size: 14px;
+        font-weight: 500;
+        color: rgba(255, 255, 255, 0.55);
+      }
+      .notif-text {
+        font-size: 17px;
+        font-weight: 500;
+        color: rgba(255, 255, 255, 0.88);
+        line-height: 1.32;
+      }
+      .notif-progress {
+        position: absolute;
+        right: 26px;
+        bottom: 15px;
+        left: 168px;
+        height: 3px;
+        overflow: hidden;
+        border-radius: 999px;
+        background: rgba(255, 255, 255, 0.18);
+      }
+      .notif-progress-fill {
+        width: 0%;
+        height: 100%;
+        border-radius: inherit;
+        background: linear-gradient(90deg, #06e3fa, #4fdb5e);
+        box-shadow: 0 0 16px rgba(79, 219, 94, 0.55);
+      }
+      .status-dot {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background: #06e3fa;
+        box-shadow: 0 0 16px rgba(6, 227, 250, 0.65);
+      }
+      .notif-actions {
+        position: absolute;
+        right: 22px;
+        bottom: 13px;
+        display: flex;
+        gap: 8px;
+        opacity: 0;
+      }
+      .action-chip {
+        padding: 5px 11px;
+        border-radius: 999px;
+        background: rgba(255, 255, 255, 0.16);
+        color: rgba(255, 255, 255, 0.94);
+        font-size: 12px;
+        font-weight: 750;
+        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
+      }
+      .typing-dots {
+        display: inline-flex;
+        gap: 3px;
+        margin-left: 5px;
+        transform: translateY(-1px);
+      }
+      .typing-dots span {
+        width: 4px;
+        height: 4px;
+        border-radius: 50%;
+        background: rgba(255, 255, 255, 0.72);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="liquid-glass-notification"
+      data-start="0"
+      data-duration="8"
+      data-width="1920"
+      data-height="1080"
+    >
+      <canvas id="three-canvas"></canvas>
+
+      <canvas id="glass-canvas" layoutsubtree width="1920" height="1080">
+        <div class="glass-panel liquid-glass p1" id="gp1"></div>
+        <div class="glass-panel liquid-glass p2" id="gp2"></div>
+      </canvas>
+
+      <div class="text-overlay">
+        <div class="notif-card c1" id="txt1">
+          <div class="avatar avatar-ja">
+            <img
+              class="hyperframes-logo"
+              src="assets/hyperframes-logo-dark.svg"
+              alt="HyperFrames"
+            />
+          </div>
+          <div class="notif-body">
+            <div class="notif-header">
+              <span class="notif-name">Render complete</span>
+              <span class="status-dot" id="status-dot"></span>
+              <span class="notif-time" id="render-status">rendering</span>
+            </div>
+            <div class="notif-text" id="render-copy">
+              Liquid glass preview is encoding with GPU capture.
+            </div>
+            <div class="notif-progress">
+              <div class="notif-progress-fill" id="render-progress"></div>
+            </div>
+          </div>
+        </div>
+        <div class="notif-card c2" id="txt2">
+          <div class="avatar avatar-kl">M</div>
+          <div class="notif-body">
+            <div class="notif-header">
+              <span class="notif-name">Messages</span>
+              <span class="notif-time">now</span>
+            </div>
+            <div class="notif-text">
+              Miguel: can it feel alive but still native?
+              <span class="typing-dots" id="typing-dots"
+                ><span></span><span></span><span></span
+              ></span>
+            </div>
+            <div class="notif-actions" id="reply-actions">
+              <span class="action-chip">Reply</span>
+              <span class="action-chip">Mark Read</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      (function () {
+        var threeCanvas = document.getElementById("three-canvas");
+        var threeRenderer = new THREE.WebGLRenderer({
+          canvas: threeCanvas,
+          antialias: false,
+          preserveDrawingBuffer: true,
+        });
+        threeRenderer.setSize(1920, 1080);
+        threeRenderer.setPixelRatio(1);
+        var threeScene = new THREE.Scene();
+        var threeCamera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
+
+        var fs = [
+          "precision highp float;",
+          "varying vec2 vUv;",
+          "uniform float uTime;",
+          "vec3 mod289(vec3 x){return x-floor(x*(1.0/289.0))*289.0;}",
+          "vec4 mod289(vec4 x){return x-floor(x*(1.0/289.0))*289.0;}",
+          "vec4 permute(vec4 x){return mod289(((x*34.0)+1.0)*x);}",
+          "vec4 taylorInvSqrt(vec4 r){return 1.79284291400159-0.85373472095314*r;}",
+          "float snoise(vec3 v){",
+          "  const vec2 C=vec2(1.0/6.0,1.0/3.0);const vec4 D=vec4(0.0,0.5,1.0,2.0);",
+          "  vec3 i=floor(v+dot(v,C.yyy));vec3 x0=v-i+dot(i,C.xxx);",
+          "  vec3 g=step(x0.yzx,x0.xyz);vec3 l=1.0-g;",
+          "  vec3 i1=min(g.xyz,l.zxy);vec3 i2=max(g.xyz,l.zxy);",
+          "  vec3 x1=x0-i1+C.xxx;vec3 x2=x0-i2+C.yyy;vec3 x3=x0-D.yyy;",
+          "  i=mod289(i);",
+          "  vec4 p=permute(permute(permute(i.z+vec4(0.0,i1.z,i2.z,1.0))+i.y+vec4(0.0,i1.y,i2.y,1.0))+i.x+vec4(0.0,i1.x,i2.x,1.0));",
+          "  float n_=0.142857142857;vec3 ns=n_*D.wyz-D.xzx;",
+          "  vec4 j=p-49.0*floor(p*ns.z*ns.z);vec4 x_=floor(j*ns.z);vec4 y_=floor(j-7.0*x_);",
+          "  vec4 x=x_*ns.x+ns.yyyy;vec4 y=y_*ns.x+ns.yyyy;vec4 h=1.0-abs(x)-abs(y);",
+          "  vec4 b0=vec4(x.xy,y.xy);vec4 b1=vec4(x.zw,y.zw);",
+          "  vec4 s0=floor(b0)*2.0+1.0;vec4 s1=floor(b1)*2.0+1.0;",
+          "  vec4 sh=-step(h,vec4(0.0));",
+          "  vec4 a0=b0.xzyw+s0.xzyw*sh.xxyy;vec4 a1=b1.xzyw+s1.xzyw*sh.zzww;",
+          "  vec3 p0=vec3(a0.xy,h.x);vec3 p1=vec3(a0.zw,h.y);vec3 p2=vec3(a1.xy,h.z);vec3 p3=vec3(a1.zw,h.w);",
+          "  vec4 norm=taylorInvSqrt(vec4(dot(p0,p0),dot(p1,p1),dot(p2,p2),dot(p3,p3)));",
+          "  p0*=norm.x;p1*=norm.y;p2*=norm.z;p3*=norm.w;",
+          "  vec4 m=max(0.6-vec4(dot(x0,x0),dot(x1,x1),dot(x2,x2),dot(x3,x3)),0.0);m=m*m;",
+          "  return 42.0*dot(m*m,vec4(dot(p0,x0),dot(p1,x1),dot(p2,x2),dot(p3,x3)));",
+          "}",
+          "void main(){",
+          "  vec2 uv=vUv;float ar=1920.0/1080.0;vec2 p=vec2(uv.x*ar,uv.y);float t=uTime*0.06;",
+          "  float wx=snoise(vec3(p*1.4,t*0.5))*0.2;float wy=snoise(vec3(p*1.4+100.0,t*0.5))*0.2;",
+          "  vec2 wp=p+vec2(wx,wy);",
+          "  vec3 base=mix(vec3(0.10,0.02,0.22),vec3(0.04,0.10,0.25),smoothstep(0.0,1.0,uv.x*0.6+uv.y*0.4));",
+          "  float angle=0.65;float ridgeUv=dot(wp,vec2(cos(angle),sin(angle)));",
+          "  float ridge1=sin(ridgeUv*8.0+t*2.0+snoise(vec3(wp*0.8,t))*1.5);",
+          "  float ridge2=sin(ridgeUv*5.5-t*1.4+snoise(vec3(wp*1.2+50.0,t*0.7))*2.0);",
+          "  float ridge3=sin(ridgeUv*12.0+t*3.0+snoise(vec3(wp*0.6+80.0,t*0.4))*1.0);",
+          "  float crease1=pow(abs(ridge1),0.35)*sign(ridge1)*0.5+0.5;",
+          "  float crease2=pow(abs(ridge2),0.4)*sign(ridge2)*0.5+0.5;",
+          "  float crease3=pow(abs(ridge3),0.5)*sign(ridge3)*0.5+0.5;",
+          "  vec3 warm=mix(vec3(0.9,0.4,0.08),vec3(0.95,0.65,0.15),crease1);",
+          "  float warmZone=smoothstep(0.15,0.75,uv.x+uv.y*0.4+snoise(vec3(uv*2.0,t))*0.3);",
+          "  vec3 cool=mix(vec3(0.02,0.4,0.55),vec3(0.25,0.7,0.82),crease2);",
+          "  float coolZone=smoothstep(0.25,0.85,1.2-uv.x+uv.y*0.5+snoise(vec3(uv*2.0+40.0,t*0.8))*0.25);",
+          "  vec3 hot=mix(vec3(0.8,0.1,0.4),vec3(0.6,0.08,0.65),crease3);",
+          "  float hotZone=smoothstep(0.5,0.9,snoise(vec3(uv*2.5+20.0,t*0.6))*0.5+0.5);",
+          "  vec3 col=base;",
+          "  col=mix(col,warm,warmZone*0.75*smoothstep(0.3,0.7,crease1));",
+          "  col=mix(col,cool,coolZone*0.65*smoothstep(0.2,0.65,crease2));",
+          "  col=mix(col,hot,hotZone*0.5*smoothstep(0.35,0.8,crease3));",
+          "  float edgeGlow=pow(1.0-abs(ridge1),6.0)*0.4+pow(1.0-abs(ridge2),5.0)*0.25;",
+          "  col+=edgeGlow*mix(warm,cool,uv.x)*0.8;",
+          "  col*=1.0-pow(abs(ridge1),4.0)*0.15;",
+          "  float vig=1.0-smoothstep(0.5,1.5,length((uv-0.5)*vec2(1.3,1.0)));",
+          "  col*=0.65+vig*0.5;",
+          "  float luma=dot(col,vec3(0.299,0.587,0.114));col=mix(vec3(luma),col,1.5);",
+          "  col=clamp(col,0.0,1.0);col=pow(col,vec3(0.9));",
+          "  gl_FragColor=vec4(col,1.0);",
+          "}",
+        ].join("\n");
+
+        var uniforms = { uTime: { value: 0.0 } };
+        threeScene.add(
+          new THREE.Mesh(
+            new THREE.PlaneGeometry(2, 2),
+            new THREE.ShaderMaterial({
+              vertexShader:
+                "varying vec2 vUv; void main() { vUv = uv; gl_Position = vec4(position, 1.0); }",
+              fragmentShader: fs,
+              uniforms: uniforms,
+            }),
+          ),
+        );
+        threeRenderer.render(threeScene, threeCamera);
+
+        var glassCanvas = document.getElementById("glass-canvas");
+        var glassCtx = glassCanvas.getContext("2d");
+        var lg = new LiquidGlass.LiquidGlassCanvas(glassCanvas);
+
+        function renderFrame(time) {
+          uniforms.uTime.value = time;
+          threeRenderer.render(threeScene, threeCamera);
+          if (!lg.isReady) return;
+          glassCtx.clearRect(0, 0, 1920, 1080);
+          glassCtx.drawImage(threeCanvas, 0, 0, 1920, 1080);
+          lg.renderGlassElements();
+        }
+
+        var lgReady = false;
+        lg.waitForInit().then(function (ok) {
+          if (!ok) return;
+          lgReady = true;
+          glassCanvas.onpaint = function () {
+            renderFrame(0);
+          };
+          if (glassCanvas.requestPaint) glassCanvas.requestPaint();
+        });
+
+        window.__timelines = window.__timelines || {};
+        var tl = gsap.timeline({ paused: true });
+
+        tl.to(
+          {},
+          {
+            duration: 8,
+            ease: "none",
+            onUpdate: function () {
+              var t = tl.time();
+              uniforms.uTime.value = t;
+              threeRenderer.render(threeScene, threeCamera);
+              if (lgReady) {
+                glassCanvas.onpaint = function () {
+                  glassCtx.clearRect(0, 0, 1920, 1080);
+                  glassCtx.drawImage(threeCanvas, 0, 0, 1920, 1080);
+                  lg.renderGlassElements();
+                };
+                if (glassCanvas.requestPaint) glassCanvas.requestPaint();
+              }
+            },
+          },
+          0,
+        );
+
+        var renderStatus = document.getElementById("render-status");
+        var renderCopy = document.getElementById("render-copy");
+
+        gsap.set(["#gp1", "#gp2"], { left: "1980px", opacity: 0 });
+        gsap.set(["#txt1", "#txt2"], { x: 640, opacity: 0 });
+        gsap.set("#reply-actions", { y: 8, opacity: 0 });
+        gsap.set("#typing-dots span", { opacity: 0.35 });
+
+        tl.to("#gp1", { left: "1326px", opacity: 1, duration: 0.38, ease: "power3.out" }, 0.18);
+        tl.to("#txt1", { x: -14, opacity: 1, duration: 0.38, ease: "power3.out" }, 0.18);
+        tl.to("#gp1", { left: "1340px", duration: 0.16, ease: "power2.out" }, 0.56);
+        tl.to("#txt1", { x: 0, duration: 0.16, ease: "power2.out" }, 0.56);
+
+        tl.to("#gp2", { left: "1326px", opacity: 1, duration: 0.36, ease: "power3.out" }, 0.82);
+        tl.to("#txt2", { x: -14, opacity: 1, duration: 0.36, ease: "power3.out" }, 0.82);
+        tl.to("#gp2", { left: "1340px", duration: 0.16, ease: "power2.out" }, 1.18);
+        tl.to("#txt2", { x: 0, duration: 0.16, ease: "power2.out" }, 1.18);
+
+        tl.to("#render-progress", { width: "100%", duration: 3.4, ease: "none" }, 0.82);
+        tl.to(
+          "#status-dot",
+          { scale: 1.45, duration: 0.18, ease: "power2.out", yoyo: true, repeat: 1 },
+          1.1,
+        );
+        tl.to(
+          "#typing-dots span",
+          {
+            opacity: 1,
+            y: -2,
+            duration: 0.22,
+            ease: "power2.out",
+            stagger: 0.08,
+            yoyo: true,
+            repeat: 5,
+          },
+          1.2,
+        );
+        tl.to("#gp2", { top: "+=10", duration: 0.18, ease: "power2.out" }, 2.55);
+        tl.to("#txt2", { y: "+=10", duration: 0.18, ease: "power2.out" }, 2.55);
+        tl.to("#gp2", { top: "-=10", duration: 0.22, ease: "power2.out" }, 2.73);
+        tl.to("#txt2", { y: "-=10", duration: 0.22, ease: "power2.out" }, 2.73);
+        tl.to("#reply-actions", { y: 0, opacity: 1, duration: 0.24, ease: "power2.out" }, 2.72);
+        tl.to(
+          "#status-dot",
+          {
+            backgroundColor: "#4ade80",
+            boxShadow: "0 0 18px rgba(74, 222, 128, 0.8)",
+            duration: 0.15,
+          },
+          4.25,
+        );
+        tl.call(
+          function () {
+            renderStatus.textContent = "complete";
+            renderCopy.textContent = "liquid-glass-notification.mp4 is ready.";
+          },
+          null,
+          4.25,
+        );
+        tl.to(
+          "#gp1",
+          { top: "-=8", duration: 0.2, ease: "power2.out", yoyo: true, repeat: 1 },
+          4.25,
+        );
+        tl.to(
+          "#txt1",
+          { y: "-=8", duration: 0.2, ease: "power2.out", yoyo: true, repeat: 1 },
+          4.25,
+        );
+
+        tl.to("#gp1", { left: "1980px", opacity: 0, duration: 0.42, ease: "power2.in" }, 6.72);
+        tl.to("#txt1", { x: 640, opacity: 0, duration: 0.42, ease: "power2.in" }, 6.72);
+        tl.to("#gp2", { left: "1980px", opacity: 0, duration: 0.42, ease: "power2.in" }, 6.9);
+        tl.to("#txt2", { x: 640, opacity: 0, duration: 0.42, ease: "power2.in" }, 6.9);
+
+        window.__timelines["liquid-glass-notification"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/liquid-glass-widgets/assets/hyperframes-logo-dark.svg b/docs/public/catalog/blocks/liquid-glass-widgets/assets/hyperframes-logo-dark.svg
new file mode 100644
index 0000000000..1d5721e7c0
--- /dev/null
+++ b/docs/public/catalog/blocks/liquid-glass-widgets/assets/hyperframes-logo-dark.svg
@@ -0,0 +1,31 @@
+<svg width="263" height="79" viewBox="0 0 263 79" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 16.6738H4.96V23.3838H11.53V16.6738H16.49V35.4538H11.53V27.6738H4.96V35.4538H0V16.6738Z" fill="white"/>
+<path d="M17.8899 28.0137C17.8899 23.4237 21.2399 20.0237 25.7999 20.0237C30.0099 20.0237 32.9399 23.0837 32.9399 27.5637C32.9399 28.2037 32.8599 28.8237 32.8299 29.3337H22.6099C23.0399 31.1337 24.6199 32.1237 27.1399 32.1237C28.7199 32.1237 30.2199 31.7237 31.2999 31.0237V34.6737C30.1699 35.3937 28.2999 35.8537 26.3599 35.8537C21.2599 35.8537 17.8799 32.6037 17.8799 28.0237L17.8899 28.0137ZM28.5699 26.1937C28.4899 24.5337 27.3899 23.5637 25.7499 23.5637C24.1099 23.5637 22.9599 24.5337 22.6099 26.1937H28.5699Z" fill="white"/>
+<path d="M37.85 33.8638L32 20.4238H37.29L40.46 28.1538L43.6 20.4238H48.48L40.33 39.5738H35.26L37.86 33.8638H37.85Z" fill="white"/>
+<path d="M48.1797 26.1138C48.1797 20.4238 52.7097 16.2438 58.9397 16.2438C61.2997 16.2438 63.5297 16.8038 64.8197 17.7238V21.9338C63.5597 20.9138 61.6797 20.2938 59.7497 20.2938C55.7797 20.2938 53.2597 22.6238 53.2597 26.1438C53.2597 29.6638 55.5697 31.8838 58.8897 31.8838C59.6397 31.8838 60.4997 31.7538 61.1997 31.5038V27.8838H57.4697V24.2338H65.5197V33.7038C63.6697 35.0938 61.1997 35.8738 58.5997 35.8738C52.5397 35.8738 48.1897 31.7438 48.1897 26.1138H48.1797Z" fill="white"/>
+<path d="M66.6604 28.0137C66.6604 23.4237 70.0104 20.0237 74.5704 20.0237C78.7804 20.0237 81.7104 23.0837 81.7104 27.5637C81.7104 28.2037 81.6304 28.8237 81.6004 29.3337H71.3804C71.8104 31.1337 73.3904 32.1237 75.9104 32.1237C77.4904 32.1237 78.9904 31.7237 80.0704 31.0237V34.6737C78.9404 35.3937 77.0704 35.8537 75.1304 35.8537C70.0304 35.8537 66.6504 32.6037 66.6504 28.0237L66.6604 28.0137ZM77.3404 26.1937C77.2604 24.5337 76.1604 23.5637 74.5204 23.5637C72.8804 23.5637 71.7304 24.5337 71.3804 26.1937H77.3404Z" fill="white"/>
+<path d="M82.9697 20.4238H87.8497V22.4138C88.7597 20.9638 90.3497 20.1038 92.3297 20.1038C95.4997 20.1038 97.3997 22.3338 97.3997 25.8138V35.4438H92.5197V26.8638C92.5197 25.0438 91.8197 24.1838 90.4797 24.1838C88.9497 24.1838 87.8497 25.3638 87.8497 27.2638V35.4438H82.9697V20.4238Z" fill="white"/>
+<path d="M195.219 26.1937L213.529 38.9937C216.009 40.7237 220.239 38.7637 221.009 35.5337L228.419 4.33374C229.189 1.10374 225.879 -0.856262 222.589 0.873738L198.199 13.6737C192.649 16.5837 191.059 23.2837 195.219 26.1937Z" fill="url(#paint0_linear_2204_3044)"/>
+<path d="M256.97 25.9638L232.58 38.7638C229.28 40.4938 225.98 38.5338 226.75 35.3038L234.16 4.10376C234.93 0.873757 239.16 -1.08624 241.64 0.643757L259.95 13.4438C264.12 16.3538 262.52 23.0538 256.97 25.9638Z" fill="url(#paint1_linear_2204_3044)"/>
+<path d="M252.115 72.502C250.192 72.502 248.268 72.0838 246.93 71.3728V65.6853C247.808 66.3126 248.937 66.689 250.066 66.689C251.739 66.689 252.784 65.8526 252.784 64.5562C252.784 63.8452 252.492 63.0925 251.655 62.0888L249.899 59.956C248.728 58.4923 248.226 56.9031 248.226 55.2721C248.226 51.0065 251.864 48.0791 256.883 48.0791C258.723 48.0791 260.438 48.4555 261.65 49.0828V54.7703C260.898 54.2266 259.768 53.8503 258.723 53.8503C257.092 53.8503 256.046 54.6867 256.046 55.8994C256.046 56.6522 256.423 57.405 257.259 58.4086L258.974 60.4996C260.187 62.047 260.73 63.5943 260.73 65.2671C260.73 69.5746 257.05 72.502 252.115 72.502Z" fill="white"/>
+<path d="M236.338 72.6269C228.392 72.6269 223.123 67.5667 223.123 60.4155C223.123 53.2643 228.351 47.9531 235.46 47.9531C242.026 47.9531 246.584 52.7206 246.584 59.7045C246.584 60.7082 246.459 61.6701 246.417 62.4647H230.483C231.152 65.2666 233.62 66.8139 237.551 66.8139C240.018 66.8139 242.36 66.1866 244.033 65.0993V70.7868C242.277 71.916 239.349 72.6269 236.338 72.6269ZM230.483 57.5717H239.767C239.642 54.9789 237.927 53.4734 235.376 53.4734C232.867 53.4734 231.027 54.9789 230.483 57.5717Z" fill="white"/>
+<path d="M184.998 72.0001V48.5809H192.609V51.6756C193.989 49.4173 196.373 48.0791 199.426 48.0791C202.521 48.0791 204.779 49.5428 206.075 52.052C207.497 49.5846 210.132 48.0791 213.352 48.0791C218.245 48.0791 221.214 51.592 221.214 57.0286V72.0001H213.603V58.5341C213.603 55.774 212.557 54.4357 210.634 54.4357C208.459 54.4357 206.912 56.234 206.912 59.0778V72.0001H199.3V58.5341C199.3 55.774 198.255 54.4357 196.373 54.4357C194.157 54.4357 192.609 56.234 192.609 59.0778V72.0001H184.998Z" fill="white"/>
+<path d="M167.26 72.4602C161.154 72.4602 156.596 67.2745 156.596 60.3324C156.596 53.3066 161.196 48.0791 167.302 48.0791C170.438 48.0791 173.031 49.4173 174.536 51.8429V48.5809H182.148V72.0001H174.536V68.4873C173.031 71.0801 170.438 72.4602 167.26 72.4602ZM169.393 66.1872C172.78 66.1872 174.536 63.3434 174.536 60.876V59.6632C174.536 57.2377 172.78 54.4357 169.393 54.4357C166.298 54.4357 164.207 56.7777 164.207 60.2905C164.207 63.7616 166.298 66.1872 169.393 66.1872Z" fill="white"/>
+<path d="M141.258 72V48.5808H148.827V52.9719C149.831 50.0445 151.796 48.2881 154.306 48.2881C154.975 48.2881 155.602 48.4135 156.02 48.6645V55.8993C155.435 55.5648 154.724 55.4393 153.887 55.4393C150.751 55.4393 148.869 57.6558 148.869 61.2941V72H141.258Z" fill="white"/>
+<path d="M122.643 71.9996V42.7256H139.371V49.124H130.379V54.477H138.911V60.5827H130.379V71.9996H122.643Z" fill="white"/>
+<path d="M105.645 72V48.5808H113.214V52.9719C114.218 50.0445 116.183 48.2881 118.692 48.2881C119.361 48.2881 119.989 48.4135 120.407 48.6645V55.8993C119.822 55.5648 119.111 55.4393 118.274 55.4393C115.138 55.4393 113.256 57.6558 113.256 61.2941V72H105.645Z" fill="white"/>
+<path d="M93.4397 72.6269C85.4939 72.6269 80.2246 67.5667 80.2246 60.4155C80.2246 53.2643 85.4521 47.9531 92.5615 47.9531C99.1273 47.9531 103.686 52.7206 103.686 59.7045C103.686 60.7082 103.56 61.6701 103.518 62.4647H87.5849C88.2541 65.2666 90.7214 66.8139 94.6525 66.8139C97.1199 66.8139 99.4618 66.1866 101.135 65.0993V70.7868C99.3782 71.916 96.4508 72.6269 93.4397 72.6269ZM87.5849 57.5717H96.869C96.7435 54.9789 95.0289 53.4734 92.4779 53.4734C89.9687 53.4734 88.1286 54.9789 87.5849 57.5717Z" fill="white"/>
+<path d="M53.3711 78.4404V48.5809H60.9823V52.052C62.446 49.501 65.0807 48.0791 68.3008 48.0791C74.3647 48.0791 78.9649 53.3066 78.9649 60.2487C78.9649 67.2745 74.3229 72.4602 68.259 72.4602C65.0807 72.4602 62.446 71.1637 60.9823 68.78V78.4404H53.3711ZM66.1262 66.1872C69.2627 66.1872 71.3119 63.7616 71.3119 60.2905C71.3119 56.8195 69.2627 54.4357 66.1262 54.4357C62.7388 54.4357 60.9823 57.2795 60.9823 59.7051V60.9178C60.9823 63.3434 62.7388 66.1872 66.1262 66.1872Z" fill="white"/>
+<path d="M31.9606 78.4405L36.0171 69.5329L26.9004 48.5811H35.1389L40.0737 60.6252L44.9666 48.5811H52.5779L39.8646 78.4405H31.9606Z" fill="white"/>
+<path d="M0 71.9996V42.7256H7.7367V53.1806H17.9826V42.7256H25.7193V71.9996H17.9826V59.8718H7.7367V71.9996H0Z" fill="white"/>
+<defs>
+<linearGradient id="paint0_linear_2204_3044" x1="225.869" y1="-3.06048e-05" x2="222.845" y2="37.4821" gradientUnits="userSpaceOnUse">
+<stop stop-color="#06E3FA"/>
+<stop offset="1" stop-color="#4FDB5E"/>
+</linearGradient>
+<linearGradient id="paint1_linear_2204_3044" x1="230.87" y1="39" x2="244.661" y2="6.30303" gradientUnits="userSpaceOnUse">
+<stop stop-color="#06E3FA"/>
+<stop offset="1" stop-color="#4FDB5E"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/docs/public/catalog/blocks/liquid-glass-widgets/lib/liquid-glass.iife.js b/docs/public/catalog/blocks/liquid-glass-widgets/lib/liquid-glass.iife.js
new file mode 100644
index 0000000000..ae5210629b
--- /dev/null
+++ b/docs/public/catalog/blocks/liquid-glass-widgets/lib/liquid-glass.iife.js
@@ -0,0 +1,1048 @@
+var LiquidGlass = (() => {
+  var E = Object.defineProperty;
+  var D = Object.getOwnPropertyDescriptor;
+  var z = Object.getOwnPropertyNames;
+  var N = Object.prototype.hasOwnProperty;
+  var O = (m, e) => {
+      for (var t in e) E(m, t, { get: e[t], enumerable: !0 });
+    },
+    H = (m, e, t, r) => {
+      if ((e && typeof e == "object") || typeof e == "function")
+        for (let n of z(e))
+          !N.call(m, n) &&
+            n !== t &&
+            E(m, n, { get: () => e[n], enumerable: !(r = D(e, n)) || r.enumerable });
+      return m;
+    };
+  var I = (m) => H(E({}, "__esModule", { value: !0 }), m);
+  var Y = {};
+  O(Y, {
+    CSS_PROPERTY_MAP: () => _,
+    DEFAULTS: () => w,
+    GlassRendererGPU: () => y,
+    LiquidGlassCanvas: () => R,
+  });
+  var w = {
+      blurAmount: 0,
+      refraction: 0.69,
+      chromAberration: 0.05,
+      edgeHighlight: 0.05,
+      specular: 0,
+      fresnel: 1,
+      distortion: 0,
+      cornerRadius: 65,
+      zRadius: 40,
+      opacity: 1,
+      saturation: 0,
+      tintStrength: 0,
+      brightness: 0,
+      shadowOpacity: 0.3,
+      shadowSpread: 10,
+      shadowOffsetY: 1,
+      bevelMode: 0,
+    },
+    _ = {
+      "--lg-blur": "blurAmount",
+      "--lg-refraction": "refraction",
+      "--lg-chrom-aberration": "chromAberration",
+      "--lg-edge-highlight": "edgeHighlight",
+      "--lg-specular": "specular",
+      "--lg-fresnel": "fresnel",
+      "--lg-distortion": "distortion",
+      "--lg-corner-radius": "cornerRadius",
+      "--lg-z-radius": "zRadius",
+      "--lg-opacity": "opacity",
+      "--lg-saturation": "saturation",
+      "--lg-tint": "tintStrength",
+      "--lg-brightness": "brightness",
+      "--lg-shadow-opacity": "shadowOpacity",
+      "--lg-shadow-spread": "shadowSpread",
+      "--lg-shadow-offset-y": "shadowOffsetY",
+      "--lg-bevel-mode": "bevelMode",
+    },
+    L = 6,
+    T = 20;
+  var q = `// Blit shader - copy texture with UV transform
+
+struct BlitUniforms {
+  scale: vec2f,
+  offset: vec2f,
+}
+
+@group(0) @binding(0) var<uniform> u: BlitUniforms;
+@group(0) @binding(1) var texSampler: sampler;
+@group(0) @binding(2) var tex: texture_2d<f32>;
+
+struct VertexOutput {
+  @builtin(position) position: vec4f,
+  @location(0) uv: vec2f,
+}
+
+@vertex
+fn vertexMain(@location(0) pos: vec2f) -> VertexOutput {
+  var out: VertexOutput;
+  out.uv = pos * 0.5 + 0.5;
+  out.position = vec4f(pos, 0.0, 1.0);
+  return out;
+}
+
+@fragment
+fn fragmentMain(in: VertexOutput) -> @location(0) vec4f {
+  return textureSample(tex, texSampler, in.uv * u.scale + u.offset);
+}
+`,
+    k = `// Blur shader - 9-tap Gaussian blur (single direction)
+
+struct BlurUniforms {
+  dir: vec2f,
+  _pad: vec2f,
+}
+
+@group(0) @binding(0) var<uniform> u: BlurUniforms;
+@group(0) @binding(1) var texSampler: sampler;
+@group(0) @binding(2) var tex: texture_2d<f32>;
+
+struct VertexOutput {
+  @builtin(position) position: vec4f,
+  @location(0) uv: vec2f,
+}
+
+@vertex
+fn vertexMain(@location(0) pos: vec2f) -> VertexOutput {
+  var out: VertexOutput;
+  out.uv = pos * 0.5 + 0.5;
+  out.position = vec4f(pos, 0.0, 1.0);
+  return out;
+}
+
+@fragment
+fn fragmentMain(in: VertexOutput) -> @location(0) vec4f {
+  var s = textureSample(tex, texSampler, in.uv) * 0.227027;
+  s += textureSample(tex, texSampler, in.uv + u.dir * 1.0) * 0.194594;
+  s += textureSample(tex, texSampler, in.uv - u.dir * 1.0) * 0.194594;
+  s += textureSample(tex, texSampler, in.uv + u.dir * 2.0) * 0.121622;
+  s += textureSample(tex, texSampler, in.uv - u.dir * 2.0) * 0.121622;
+  s += textureSample(tex, texSampler, in.uv + u.dir * 3.0) * 0.054054;
+  s += textureSample(tex, texSampler, in.uv - u.dir * 3.0) * 0.054054;
+  s += textureSample(tex, texSampler, in.uv + u.dir * 4.0) * 0.016216;
+  s += textureSample(tex, texSampler, in.uv - u.dir * 4.0) * 0.016216;
+  return s;
+}
+`,
+    W = `// Glass shader - the core liquid glass effect
+
+struct GlassUniforms {
+  center: vec2f,
+  size: vec2f,
+  res: vec2f,
+  radius: f32,
+  pad: f32,
+  refract: f32,
+  chroma: f32,
+  edgeHL: f32,
+  spec: f32,
+  fresnel: f32,
+  distort: f32,
+  alpha: f32,
+  sat: f32,
+  tint: f32,
+  zRadius: f32,
+  brightness: f32,
+  shadowAlpha: f32,
+  shadowSpread: f32,
+  shadowOffY: f32,
+  bevelMode: f32,
+  _pad: vec2f,
+}
+
+@group(0) @binding(0) var<uniform> u: GlassUniforms;
+@group(0) @binding(1) var texSampler: sampler;
+@group(0) @binding(2) var bgTex: texture_2d<f32>;
+@group(0) @binding(3) var blurTex: texture_2d<f32>;
+
+struct VertexOutput {
+  @builtin(position) position: vec4f,
+  @location(0) localPx: vec2f,
+  @location(1) screenUV: vec2f,
+}
+
+@vertex
+fn vertexMain(@location(0) pos: vec2f) -> VertexOutput {
+  var out: VertexOutput;
+  let total = u.size + vec2f(u.pad * 2.0);
+  out.localPx = pos * total;
+  let px = u.center + pos * total;
+  out.screenUV = vec2f(px.x / u.res.x, 1.0 - px.y / u.res.y);
+  var ndc = (px / u.res) * 2.0 - 1.0;
+  ndc.y = -ndc.y;
+  out.position = vec4f(ndc, 0.0, 1.0);
+  return out;
+}
+
+// Rounded-rect signed distance
+fn rrSDF(p: vec2f, b: vec2f, r: f32) -> f32 {
+  let q = abs(p) - b + vec2f(r);
+  return min(max(q.x, q.y), 0.0) + length(max(q, vec2f(0.0))) - r;
+}
+
+// Bevel height field
+fn bevelHeight(d: f32, zR: f32) -> f32 {
+  if (d <= 0.0) { return 0.0; }
+  if (d >= zR) { return zR; }
+  return sqrt(d * (2.0 * zR - d));
+}
+
+fn hash(p: vec2f) -> f32 {
+  return fract(sin(dot(p, vec2f(127.1, 311.7))) * 43758.5453);
+}
+
+@fragment
+fn fragmentMain(in: VertexOutput) -> @location(0) vec4f {
+  let half_ = u.size * 0.5;
+  let r = min(u.radius, min(half_.x, half_.y));
+  let sdf = rrSDF(in.localPx, half_, r);
+
+  // Anti-aliased mask
+  let mask = 1.0 - smoothstep(-1.5, 0.5, sdf);
+
+  let maxD = min(half_.x, half_.y);
+  let inside = -sdf;
+  let edge = smoothstep(maxD * 0.35, 0.0, inside);
+
+  // Surface normal via bevel height field
+  let zR = u.zRadius;
+  let e = 2.0;
+  let dC = inside;
+  let dR = -rrSDF(in.localPx + vec2f(e, 0.0), half_, r);
+  let dL = -rrSDF(in.localPx - vec2f(e, 0.0), half_, r);
+  let dU = -rrSDF(in.localPx + vec2f(0.0, e), half_, r);
+  let dD = -rrSDF(in.localPx - vec2f(0.0, e), half_, r);
+  let hC = bevelHeight(dC, zR);
+  let hR = bevelHeight(dR, zR);
+  let hL = bevelHeight(dL, zR);
+  let hU = bevelHeight(dU, zR);
+  let hD = bevelHeight(dD, zR);
+  let hGrad = vec2f(hR - hL, hU - hD) / (2.0 * e);
+  let N = normalize(vec3f(-hGrad, 1.0));
+
+  let depth = smoothstep(0.0, zR, inside);
+
+  // Refraction - compute both modes and select
+  let pxToUV = vec2f(1.0, -1.0) / u.res;
+  let ior = 1.5;
+  let refrPow = 1.0 - 1.0 / ior;
+  let thickness = hC * 2.0;
+  let thickNorm = thickness / max(zR * 2.0, 1.0);
+
+  // Biconvex mode
+  let exitRefr = hGrad * refrPow;
+  let entryRefr = hGrad * refrPow;
+  let throughRefr = entryRefr * thickNorm * 0.5;
+  var refrPxBiconvex = (exitRefr + entryRefr + throughRefr) * u.refract * 30.0;
+  let centerDir = -in.localPx / max(half_, vec2f(1.0));
+  refrPxBiconvex += centerDir * u.refract * 4.0 * depth;
+
+  // Dome mode
+  let refrPxDome = -in.localPx * u.refract * depth * 0.35;
+
+  // Select based on bevel mode
+  let refrPx = select(refrPxBiconvex, refrPxDome, u.bevelMode >= 0.5);
+  let refr = refrPx * pxToUV;
+
+  // Micro-distortion noise
+  let ns = in.localPx * 0.08;
+  let absPxToUV = vec2f(1.0) / u.res;
+  let micro = (vec2f(hash(ns), hash(ns + vec2f(37.0))) - 0.5) * u.distort * 4.0 * absPxToUV;
+
+  // Chromatic aberration
+  let caS = u.chroma * 18.0 * (edge * 0.7 + 0.3) * 2.0;
+  let caD = N.xy * caS * pxToUV;
+  let base = in.screenUV + refr + micro;
+
+  // Sample textures (must be in uniform control flow)
+  let sharpR = textureSample(bgTex, texSampler, base + caD).r;
+  let sharpG = textureSample(bgTex, texSampler, base).g;
+  let sharpB = textureSample(bgTex, texSampler, base - caD).b;
+  let sharp = vec3f(sharpR, sharpG, sharpB);
+
+  let blurR = textureSample(blurTex, texSampler, base + caD).r;
+  let blurG = textureSample(blurTex, texSampler, base).g;
+  let blurB = textureSample(blurTex, texSampler, base - caD).b;
+  let blur = vec3f(blurR, blurG, blurB);
+
+  // Edge-weighted blur mix
+  let edgeMix = 1.0 - edge * 0.15;
+  var col = mix(sharp, blur, edgeMix);
+
+  // Brightness
+  col *= 1.0 + u.brightness;
+
+  // Saturation
+  let lum = dot(col, vec3f(0.299, 0.587, 0.114));
+  col = mix(vec3f(lum), col, 1.0 + u.sat);
+
+  // Cool glass tint
+  col = mix(col, col * vec3f(0.92, 0.95, 1.05), u.tint);
+  col *= 1.0 + 0.06 * depth;
+
+  // Fresnel
+  let fres = pow(1.0 - abs(N.z), 4.0) * u.fresnel;
+
+  // Specular highlights (multi-light Blinn-Phong)
+  let V = vec3f(0.0, 0.0, 1.0);
+  let L1 = normalize(vec3f(0.4, 0.7, 1.0));
+  let H1 = normalize(L1 + V);
+  let sp1 = pow(max(dot(N, H1), 0.0), 90.0);
+  let L2 = normalize(vec3f(-0.3, -0.5, 1.0));
+  let H2 = normalize(L2 + V);
+  let sp2 = pow(max(dot(N, H2), 0.0), 50.0) * 0.3;
+  let L3 = normalize(vec3f(0.1, 0.3, 1.0));
+  let spB = pow(max(dot(N, L3), 0.0), 6.0) * 0.1;
+  let L4 = normalize(vec3f(0.0, 0.9, 0.4));
+  let H4 = normalize(L4 + V);
+  let sp4 = pow(max(dot(N, H4), 0.0), 120.0) * 0.6;
+  let totalSpec = (sp1 + sp2 + spB + sp4) * u.spec;
+
+  // Inner border / stroke highlight
+  let borderWidth = 1.5;
+  let innerStroke = smoothstep(-borderWidth - 1.0, -borderWidth, sdf)
+                  * (1.0 - smoothstep(-1.0, 0.0, sdf));
+  let topBias = 0.5 + 0.5 * (-in.localPx.y / half_.y);
+  let innerStrokeFinal = innerStroke * (0.4 + 0.6 * topBias);
+
+  // Edge highlight & inner glow
+  let rim = edge * u.edgeHL * 0.22;
+  let innerGlow = smoothstep(5.0, 0.0, -sdf) * u.edgeHL * 0.15;
+
+  // Environment-like reflection (fake)
+  let envRefl = (N.y * 0.5 + 0.5) * fres * 0.08;
+
+  // Composite glass effect
+  var fin = col;
+  fin += vec3f(totalSpec);
+  fin += vec3f(rim + innerGlow);
+  fin += vec3f(innerStrokeFinal * u.edgeHL * 0.55);
+  fin += vec3f(envRefl);
+  fin = mix(fin, vec3f(1.0), fres * 0.2);
+
+  // Shadow calculation (outside panel)
+  let sdfShadow = rrSDF(in.localPx - vec2f(0.0, u.shadowOffY), half_, r);
+  let shadowD = max(sdfShadow - 1.0, 0.0);
+  let spread = max(u.shadowSpread, 1.0);
+  let falloff = 1.0 / (spread * spread);
+  let outerShadow = exp(-shadowD * shadowD * falloff) * 0.65;
+  let contactShadow = exp(-shadowD * 0.08 / max(spread * 0.04, 0.01)) * 0.35;
+  let shadow = (outerShadow + contactShadow) * u.shadowAlpha;
+
+  // Select between shadow (outside) and glass (inside)
+  let isOutside = sdf > 0.0;
+  let finalColor = select(fin, vec3f(0.0), isOutside);
+  let finalAlpha = select(mask * u.alpha, shadow, isOutside);
+
+  return vec4f(finalColor, finalAlpha);
+}
+`,
+    y = class {
+      canvas;
+      device = null;
+      context = null;
+      format = "bgra8unorm";
+      blitPipeline = null;
+      blurPipeline = null;
+      glassPipeline = null;
+      quadBuffer = null;
+      panelBuffer = null;
+      blitUniformBuffer = null;
+      blurUniformBuffer = null;
+      glassUniformBuffer = null;
+      sampler = null;
+      targetCache = new Map();
+      activeTargets = null;
+      bgTexture = null;
+      bgTextureView = null;
+      width = 0;
+      height = 0;
+      _initPromise = null;
+      _initialized = !1;
+      constructor() {
+        ((this.canvas = document.createElement("canvas")),
+          (this.canvas.style.display = "none"),
+          document.body.appendChild(this.canvas));
+      }
+      async init() {
+        return this._initPromise
+          ? this._initPromise
+          : ((this._initPromise = this._doInit()), this._initPromise);
+      }
+      async _doInit() {
+        if (!navigator.gpu) return (console.warn("WebGPU not supported"), !1);
+        let e = await navigator.gpu.requestAdapter();
+        return e
+          ? ((this.device = await e.requestDevice()),
+            this.device
+              ? ((this.context = this.canvas.getContext("webgpu")),
+                this.context
+                  ? ((this.format = navigator.gpu.getPreferredCanvasFormat()),
+                    this.context.configure({
+                      device: this.device,
+                      format: this.format,
+                      alphaMode: "premultiplied",
+                    }),
+                    this._initPipelines(),
+                    this._initBuffers(),
+                    (this._initialized = !0),
+                    !0)
+                  : (console.warn("Failed to get WebGPU context"), !1))
+              : (console.warn("Failed to get WebGPU device"), !1))
+          : (console.warn("No WebGPU adapter found"), !1);
+      }
+      get initialized() {
+        return this._initialized;
+      }
+      _initPipelines() {
+        let e = this.device;
+        this.sampler = e.createSampler({
+          magFilter: "linear",
+          minFilter: "linear",
+          addressModeU: "clamp-to-edge",
+          addressModeV: "clamp-to-edge",
+        });
+        let t = e.createShaderModule({ code: q }),
+          r = e.createBindGroupLayout({
+            entries: [
+              {
+                binding: 0,
+                visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+                buffer: { type: "uniform" },
+              },
+              { binding: 1, visibility: GPUShaderStage.FRAGMENT, sampler: { type: "filtering" } },
+              { binding: 2, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "float" } },
+            ],
+          });
+        this.blitPipeline = e.createRenderPipeline({
+          layout: e.createPipelineLayout({ bindGroupLayouts: [r] }),
+          vertex: {
+            module: t,
+            entryPoint: "vertexMain",
+            buffers: [
+              {
+                arrayStride: 8,
+                attributes: [{ shaderLocation: 0, offset: 0, format: "float32x2" }],
+              },
+            ],
+          },
+          fragment: { module: t, entryPoint: "fragmentMain", targets: [{ format: "rgba8unorm" }] },
+          primitive: { topology: "triangle-strip" },
+        });
+        let n = e.createShaderModule({ code: k }),
+          i = e.createBindGroupLayout({
+            entries: [
+              {
+                binding: 0,
+                visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+                buffer: { type: "uniform" },
+              },
+              { binding: 1, visibility: GPUShaderStage.FRAGMENT, sampler: { type: "filtering" } },
+              { binding: 2, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "float" } },
+            ],
+          });
+        this.blurPipeline = e.createRenderPipeline({
+          layout: e.createPipelineLayout({ bindGroupLayouts: [i] }),
+          vertex: {
+            module: n,
+            entryPoint: "vertexMain",
+            buffers: [
+              {
+                arrayStride: 8,
+                attributes: [{ shaderLocation: 0, offset: 0, format: "float32x2" }],
+              },
+            ],
+          },
+          fragment: { module: n, entryPoint: "fragmentMain", targets: [{ format: "rgba8unorm" }] },
+          primitive: { topology: "triangle-strip" },
+        });
+        let s = e.createShaderModule({ code: W }),
+          l = e.createBindGroupLayout({
+            entries: [
+              {
+                binding: 0,
+                visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+                buffer: { type: "uniform" },
+              },
+              { binding: 1, visibility: GPUShaderStage.FRAGMENT, sampler: { type: "filtering" } },
+              { binding: 2, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "float" } },
+              { binding: 3, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "float" } },
+            ],
+          });
+        this.glassPipeline = e.createRenderPipeline({
+          layout: e.createPipelineLayout({ bindGroupLayouts: [l] }),
+          vertex: {
+            module: s,
+            entryPoint: "vertexMain",
+            buffers: [
+              {
+                arrayStride: 8,
+                attributes: [{ shaderLocation: 0, offset: 0, format: "float32x2" }],
+              },
+            ],
+          },
+          fragment: {
+            module: s,
+            entryPoint: "fragmentMain",
+            targets: [
+              {
+                format: this.format,
+                blend: {
+                  color: {
+                    srcFactor: "src-alpha",
+                    dstFactor: "one-minus-src-alpha",
+                    operation: "add",
+                  },
+                  alpha: { srcFactor: "one", dstFactor: "one-minus-src-alpha", operation: "add" },
+                },
+              },
+            ],
+          },
+          primitive: { topology: "triangle-strip" },
+        });
+      }
+      _initBuffers() {
+        let e = this.device;
+        ((this.quadBuffer = e.createBuffer({
+          size: 32,
+          usage: GPUBufferUsage.VERTEX,
+          mappedAtCreation: !0,
+        })),
+          new Float32Array(this.quadBuffer.getMappedRange()).set([-1, -1, 1, -1, -1, 1, 1, 1]),
+          this.quadBuffer.unmap(),
+          (this.panelBuffer = e.createBuffer({
+            size: 32,
+            usage: GPUBufferUsage.VERTEX,
+            mappedAtCreation: !0,
+          })),
+          new Float32Array(this.panelBuffer.getMappedRange()).set([
+            -0.5, -0.5, 0.5, -0.5, -0.5, 0.5, 0.5, 0.5,
+          ]),
+          this.panelBuffer.unmap(),
+          (this.blitUniformBuffer = e.createBuffer({
+            size: 16,
+            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+          })),
+          (this.blurUniformBuffer = e.createBuffer({
+            size: 16,
+            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+          })),
+          (this.glassUniformBuffer = e.createBuffer({
+            size: 112,
+            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+          })));
+      }
+      resize(e, t) {
+        if (!(this.width === e && this.height === t)) {
+          ((this.width = e), (this.height = t));
+          for (let r of this.targetCache.values()) this._freeTargetSet(r);
+          (this.targetCache.clear(), (this.activeTargets = null));
+        }
+      }
+      uploadAndBlur(e, t, r, n, i, s) {
+        if (!this._initialized || !this.device || !this._setActiveSize(n, i)) return;
+        let l = this.device,
+          a = this.width,
+          u = this.height,
+          o = this.activeTargets,
+          d = document.createElement("canvas");
+        ((d.width = a),
+          (d.height = u),
+          d.getContext("2d").drawImage(e, -t, -r),
+          (!this.bgTexture || this.bgTexture.width !== a || this.bgTexture.height !== u) &&
+            (this.bgTexture && this.bgTexture.destroy(),
+            (this.bgTexture = l.createTexture({
+              size: [a, u],
+              format: "rgba8unorm",
+              usage:
+                GPUTextureUsage.TEXTURE_BINDING |
+                GPUTextureUsage.COPY_DST |
+                GPUTextureUsage.RENDER_ATTACHMENT,
+            })),
+            (this.bgTextureView = this.bgTexture.createView())),
+          l.queue.copyExternalImageToTexture(
+            { source: d, flipY: !0 },
+            { texture: this.bgTexture },
+            [a, u],
+          ));
+        let f = l.createCommandEncoder();
+        this._blitPass(f, this.bgTextureView, o.bg.view, a, u, 1, 1, 0, 0);
+        let h = o.blurA.w,
+          b = o.blurA.h;
+        if ((this._blitPass(f, o.bg.view, o.blurA.view, h, b, 1, 1, 0, 0), s > 0)) {
+          let g = s * 2.5;
+          for (let p = 0; p < L; p++)
+            (this._blurPass(f, o.blurA.view, o.blurB.view, h, b, g / h, 0),
+              this._blurPass(f, o.blurB.view, o.blurA.view, h, b, 0, g / b));
+        }
+        l.queue.submit([f.finish()]);
+      }
+      _blitPass(e, t, r, n, i, s, l, a, u) {
+        let o = this.device;
+        o.queue.writeBuffer(this.blitUniformBuffer, 0, new Float32Array([s, l, a, u]));
+        let d = o.createBindGroup({
+            layout: this.blitPipeline.getBindGroupLayout(0),
+            entries: [
+              { binding: 0, resource: { buffer: this.blitUniformBuffer } },
+              { binding: 1, resource: this.sampler },
+              { binding: 2, resource: t },
+            ],
+          }),
+          c = e.beginRenderPass({
+            colorAttachments: [
+              {
+                view: r,
+                loadOp: "clear",
+                storeOp: "store",
+                clearValue: { r: 0, g: 0, b: 0, a: 0 },
+              },
+            ],
+          });
+        (c.setPipeline(this.blitPipeline),
+          c.setBindGroup(0, d),
+          c.setVertexBuffer(0, this.quadBuffer),
+          c.setViewport(0, 0, n, i, 0, 1),
+          c.draw(4),
+          c.end());
+      }
+      _blurPass(e, t, r, n, i, s, l) {
+        let a = this.device;
+        a.queue.writeBuffer(this.blurUniformBuffer, 0, new Float32Array([s, l, 0, 0]));
+        let u = a.createBindGroup({
+            layout: this.blurPipeline.getBindGroupLayout(0),
+            entries: [
+              { binding: 0, resource: { buffer: this.blurUniformBuffer } },
+              { binding: 1, resource: this.sampler },
+              { binding: 2, resource: t },
+            ],
+          }),
+          o = e.beginRenderPass({
+            colorAttachments: [
+              {
+                view: r,
+                loadOp: "clear",
+                storeOp: "store",
+                clearValue: { r: 0, g: 0, b: 0, a: 0 },
+              },
+            ],
+          });
+        (o.setPipeline(this.blurPipeline),
+          o.setBindGroup(0, u),
+          o.setVertexBuffer(0, this.quadBuffer),
+          o.setViewport(0, 0, n, i, 0, 1),
+          o.draw(4),
+          o.end());
+      }
+      renderGlassPanel(e, t, r, n) {
+        if (!this._initialized || !this.device || !this.context) return;
+        let i = this.device,
+          s = this.width,
+          l = this.height,
+          a = this.activeTargets,
+          u = new Float32Array([
+            s * 0.5,
+            l * 0.5,
+            t * n,
+            r * n,
+            s,
+            l,
+            e.cornerRadius * n,
+            T * n,
+            e.refraction,
+            e.chromAberration,
+            e.edgeHighlight,
+            e.specular,
+            e.fresnel,
+            e.distortion,
+            e.opacity,
+            e.saturation,
+            e.tintStrength,
+            e.zRadius * n,
+            e.brightness,
+            e.shadowOpacity,
+            e.shadowSpread * n,
+            e.shadowOffsetY * n,
+            e.bevelMode,
+            0,
+            0,
+            0,
+            0,
+            0,
+          ]);
+        i.queue.writeBuffer(this.glassUniformBuffer, 0, u);
+        let o = i.createBindGroup({
+            layout: this.glassPipeline.getBindGroupLayout(0),
+            entries: [
+              { binding: 0, resource: { buffer: this.glassUniformBuffer } },
+              { binding: 1, resource: this.sampler },
+              { binding: 2, resource: a.bg.view },
+              { binding: 3, resource: a.blurA.view },
+            ],
+          }),
+          d = i.createCommandEncoder(),
+          c = d.beginRenderPass({
+            colorAttachments: [
+              {
+                view: this.context.getCurrentTexture().createView(),
+                loadOp: "load",
+                storeOp: "store",
+              },
+            ],
+          });
+        (c.setPipeline(this.glassPipeline),
+          c.setBindGroup(0, o),
+          c.setVertexBuffer(0, this.panelBuffer),
+          c.setViewport(0, 0, s, l, 0, 1),
+          c.draw(4),
+          c.end(),
+          i.queue.submit([d.finish()]));
+      }
+      clear() {
+        if (!this._initialized || !this.device || !this.context) return;
+        let e = this.device.createCommandEncoder(),
+          t = e.beginRenderPass({
+            colorAttachments: [
+              {
+                view: this.context.getCurrentTexture().createView(),
+                loadOp: "clear",
+                storeOp: "store",
+                clearValue: { r: 0, g: 0, b: 0, a: 0 },
+              },
+            ],
+          });
+        (t.setViewport(0, 0, this.width, this.height, 0, 1),
+          t.end(),
+          this.device.queue.submit([e.finish()]));
+      }
+      destroy() {
+        for (let e of this.targetCache.values()) this._freeTargetSet(e);
+        (this.targetCache.clear(),
+          this.bgTexture && this.bgTexture.destroy(),
+          this.quadBuffer && this.quadBuffer.destroy(),
+          this.panelBuffer && this.panelBuffer.destroy(),
+          this.blitUniformBuffer && this.blitUniformBuffer.destroy(),
+          this.blurUniformBuffer && this.blurUniformBuffer.destroy(),
+          this.glassUniformBuffer && this.glassUniformBuffer.destroy(),
+          this.device?.destroy(),
+          this.canvas.remove());
+      }
+      _setActiveSize(e, t) {
+        if (e <= 0 || t <= 0) return !1;
+        ((this.width = e),
+          (this.height = t),
+          (this.canvas.width < e || this.canvas.height < t) &&
+            ((this.canvas.width = Math.max(this.canvas.width, e)),
+            (this.canvas.height = Math.max(this.canvas.height, t)),
+            this.context?.configure({
+              device: this.device,
+              format: this.format,
+              alphaMode: "premultiplied",
+            })));
+        let r = `${e}x${t}`,
+          n = this.targetCache.get(r);
+        return (
+          n ||
+            ((n = {
+              bg: this._makeTarget(e, t),
+              blurA: this._makeTarget(e, t),
+              blurB: this._makeTarget(e, t),
+            }),
+            this.targetCache.set(r, n)),
+          (this.activeTargets = n),
+          !0
+        );
+      }
+      _makeTarget(e, t) {
+        let r = this.device.createTexture({
+          size: [e, t],
+          format: "rgba8unorm",
+          usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.RENDER_ATTACHMENT,
+        });
+        return { texture: r, view: r.createView(), w: e, h: t };
+      }
+      _freeTarget(e) {
+        e && e.texture.destroy();
+      }
+      _freeTargetSet(e) {
+        (this._freeTarget(e.bg), this._freeTarget(e.blurA), this._freeTarget(e.blurB));
+      }
+    };
+  var R = class {
+    canvas;
+    ctx;
+    renderer;
+    sceneCanvas;
+    sceneCtx;
+    drawElementImage;
+    _initPromise;
+    _initialized = !1;
+    constructor(e) {
+      ((this.canvas = e),
+        (this.ctx = e.getContext("2d")),
+        (this.renderer = new y()),
+        (this.sceneCanvas = document.createElement("canvas")),
+        (this.sceneCtx = this.sceneCanvas.getContext("2d")));
+      let t = this.ctx;
+      ((this.drawElementImage = t.drawElementImage?.bind(t) ?? t.drawElement?.bind(t) ?? null),
+        (this._initPromise = this._initWebGPU()));
+    }
+    async _initWebGPU() {
+      try {
+        return (await this.renderer.init())
+          ? ((this._initialized = !0), console.log("LiquidGlass: WebGPU renderer initialized"), !0)
+          : (console.error("LiquidGlass: WebGPU not available"), !1);
+      } catch (e) {
+        return (console.error("LiquidGlass: WebGPU init failed", e), !1);
+      }
+    }
+    get isReady() {
+      return this._initialized;
+    }
+    async waitForInit() {
+      return this._initPromise;
+    }
+    render() {
+      let e = this.canvas.width,
+        t = this.canvas.height;
+      if (e === 0 || t === 0 || !this.drawElementImage || !this._initialized) return;
+      this.ctx.clearRect(0, 0, e, t);
+      let r = window.devicePixelRatio || 1,
+        n = this.canvas.getBoundingClientRect(),
+        i = Array.from(this.canvas.children),
+        s = Array.from(this.canvas.querySelectorAll(".liquid-glass")),
+        l = new Set(s);
+      i.length === 0 &&
+        !this.__lg_warn_empty &&
+        (console.warn("LiquidGlass: No children found inside the canvas to render."),
+        (this.__lg_warn_empty = !0));
+      for (let a of i)
+        if (!l.has(a)) {
+          let u = a,
+            o = this._getElementPosition(u, n);
+          if (o.w <= 0 || o.h <= 0) continue;
+          let d = o.x * r,
+            c = o.y * r;
+          try {
+            let f = this.drawElementImage(a, d, c);
+            f && (u.style.transform = f.toString());
+          } catch (f) {
+            a.__lg_error_logged ||
+              (console.warn(
+                `LiquidGlass: Failed to draw background element ${a.tagName}.${a.className}:`,
+                f.message || f,
+              ),
+              (a.__lg_error_logged = !0));
+          }
+        }
+      for (let a of s)
+        try {
+          this._renderGlassElement(a, n, r);
+        } catch (u) {
+          a.__lg_error_logged_glass ||
+            (console.error(
+              `LiquidGlass: Failed to render glass effect for ${a.tagName}.${a.className}:`,
+              u.message || u,
+            ),
+            (a.__lg_error_logged_glass = !0));
+        }
+    }
+    renderGlassElements() {
+      let e = this.canvas.width,
+        t = this.canvas.height;
+      if (e === 0 || t === 0 || !this.drawElementImage || !this._initialized) return;
+      let r = window.devicePixelRatio || 1,
+        n = this.canvas.getBoundingClientRect(),
+        i = this.canvas.querySelectorAll(".liquid-glass");
+      for (let s of i) this._renderGlassElement(s, n, r);
+    }
+    _parseCSSLength(e, t) {
+      return !e || e === "auto"
+        ? NaN
+        : ((e = e.trim()),
+          e.startsWith("calc(")
+            ? this._parseCalc(e, t)
+            : e.endsWith("%")
+              ? (parseFloat(e) / 100) * t
+              : parseFloat(e) || 0);
+    }
+    _parseCalc(e, t) {
+      let r = e.match(/calc\((.+)\)/);
+      if (!r) return 0;
+      let n = r[1].trim(),
+        i = n.match(/(.+)\s*\+\s*(.+)/),
+        s = n.match(/(.+)\s*-\s*(.+)/);
+      if (s) {
+        let l = this._parseCSSLength(s[1].trim(), t),
+          a = this._parseCSSLength(s[2].trim(), t);
+        return l - a;
+      }
+      if (i) {
+        let l = this._parseCSSLength(i[1].trim(), t),
+          a = this._parseCSSLength(i[2].trim(), t);
+        return l + a;
+      }
+      return this._parseCSSLength(n, t);
+    }
+    _parseTransform(e, t, r) {
+      let n = 0,
+        i = 0;
+      if (!e || e === "none") return { tx: n, ty: i };
+      let s = e.match(/translate\(\s*([^,)]+)(?:\s*,\s*([^)]+))?\s*\)/);
+      s &&
+        ((n = this._parseTranslateValue(s[1], t)),
+        (i = s[2] ? this._parseTranslateValue(s[2], r) : 0));
+      let l = e.match(/translateX\(\s*([^)]+)\s*\)/);
+      l && (n = this._parseTranslateValue(l[1], t));
+      let a = e.match(/translateY\(\s*([^)]+)\s*\)/);
+      a && (i = this._parseTranslateValue(a[1], r));
+      let u = e.match(/translate3d\(\s*([^,]+)\s*,\s*([^,]+)\s*,\s*[^)]+\s*\)/);
+      return (
+        u && ((n = this._parseTranslateValue(u[1], t)), (i = this._parseTranslateValue(u[2], r))),
+        { tx: n, ty: i }
+      );
+    }
+    _parseTranslateValue(e, t) {
+      return ((e = e.trim()), e.endsWith("%") ? (parseFloat(e) / 100) * t : parseFloat(e) || 0);
+    }
+    _getElementPosition(e, t) {
+      let r = getComputedStyle(e),
+        n = parseFloat(getComputedStyle(this.canvas).width) || this.canvas.width || 1536,
+        i = parseFloat(getComputedStyle(this.canvas).height) || this.canvas.height || 1024,
+        s = e.getBoundingClientRect(),
+        l = s.width || parseFloat(r.width) || 0,
+        a = s.height || parseFloat(r.height) || 0,
+        u = 0,
+        o = 0,
+        d = e.style,
+        c = d.left || r.left,
+        f = d.right || r.right,
+        h = d.top || r.top,
+        b = d.bottom || r.bottom,
+        g = this._parseCSSLength(c, n),
+        p = this._parseCSSLength(f, n),
+        v = this._parseCSSLength(h, i),
+        S = this._parseCSSLength(b, i),
+        P = parseFloat(r.marginLeft) || 0,
+        x = parseFloat(r.marginRight) || 0,
+        M = parseFloat(r.marginTop) || 0,
+        A = parseFloat(r.marginBottom) || 0,
+        G = !isNaN(g),
+        U = !isNaN(p);
+      G && U && g === 0 && p === 0
+        ? (u = (n - l) / 2)
+        : (G && U) || G
+          ? (u = g + P)
+          : U && (u = n - l - p - x);
+      let B = !isNaN(v),
+        C = !isNaN(S);
+      B && C && v === 0 && S === 0
+        ? (o = (i - a) / 2)
+        : (B && C) || B
+          ? (o = v + M)
+          : C && (o = i - a - S - A);
+      let { tx: V, ty: F } = this._parseTransform(r.transform, l, a);
+      return ((u += V), (o += F), { x: u, y: o, w: l, h: a });
+    }
+    _renderGlassElement(e, t, r) {
+      if (!this.drawElementImage) return;
+      let n = this._getConfigFromCSS(e),
+        i = this._getElementPosition(e, t),
+        s = i.x,
+        l = i.y,
+        a = i.w,
+        u = i.h,
+        o = s * r,
+        d = l * r,
+        c = a * r,
+        f = u * r,
+        h = T * r,
+        b = o - h,
+        g = d - h,
+        p = c + h * 2,
+        v = f + h * 2;
+      this._captureRegion(b, g, p, v);
+      let S = Math.round(p),
+        P = Math.round(v);
+      (this.renderer.clear(),
+        this.renderer.uploadAndBlur(this.sceneCanvas, 0, 0, S, P, n.blurAmount),
+        this.renderer.renderGlassPanel(n, a, u, r),
+        this.ctx.drawImage(this.renderer.canvas, 0, 0, p, v, b, g, p, v));
+      try {
+        let x = this._drawGlassElementContent(e, o, d);
+        x && (e.style.transform = x.toString());
+      } catch (x) {
+        e.__lg_error_logged ||
+          (console.warn(
+            `LiquidGlass: Failed to draw glass element ${e.tagName}.${e.className}:`,
+            x,
+          ),
+          (e.__lg_error_logged = !0));
+      }
+    }
+    _drawGlassElementContent(e, t, r) {
+      if (!this.drawElementImage) return;
+      let n = this._suppressGlassChrome(e);
+      try {
+        return this.drawElementImage(e, t, r);
+      } finally {
+        this._restoreInlineStyles(e, n);
+      }
+    }
+    _suppressGlassChrome(e) {
+      let t = new Map(),
+        r = [
+          "background",
+          "backgroundColor",
+          "backgroundImage",
+          "borderColor",
+          "boxShadow",
+          "filter",
+          "outlineColor",
+        ];
+      for (let n of r) t.set(n, e.style[n]);
+      return (
+        (e.style.background = "transparent"),
+        (e.style.backgroundColor = "transparent"),
+        (e.style.backgroundImage = "none"),
+        (e.style.borderColor = "transparent"),
+        (e.style.boxShadow = "none"),
+        (e.style.filter = "none"),
+        (e.style.outlineColor = "transparent"),
+        t
+      );
+    }
+    _restoreInlineStyles(e, t) {
+      for (let [r, n] of t) e.style[r] = n;
+    }
+    _captureRegion(e, t, r, n) {
+      let i = Math.round(r),
+        s = Math.round(n);
+      ((this.sceneCanvas.width !== i || this.sceneCanvas.height !== s) &&
+        ((this.sceneCanvas.width = i), (this.sceneCanvas.height = s)),
+        (this.sceneCtx.fillStyle = "#ffffff"),
+        this.sceneCtx.fillRect(0, 0, i, s),
+        this.sceneCtx.drawImage(this.canvas, e, t, r, n, 0, 0, i, s));
+    }
+    _getConfigFromCSS(e) {
+      let t = getComputedStyle(e),
+        r = { ...w };
+      for (let [n, i] of Object.entries(_)) {
+        let s = t.getPropertyValue(n).trim();
+        if (s) {
+          let l = parseFloat(s);
+          isNaN(l) || (r[i] = l);
+        }
+      }
+      return r;
+    }
+    destroy() {
+      this.renderer.destroy();
+    }
+  };
+  return I(Y);
+})();
diff --git a/docs/public/catalog/blocks/liquid-glass-widgets/liquid-glass-widgets.html b/docs/public/catalog/blocks/liquid-glass-widgets/liquid-glass-widgets.html
new file mode 100644
index 0000000000..de6ac24be8
--- /dev/null
+++ b/docs/public/catalog/blocks/liquid-glass-widgets/liquid-glass-widgets.html
@@ -0,0 +1,759 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Liquid Glass Widgets</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script src="lib/liquid-glass.iife.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #0a0218;
+        overflow: hidden;
+        font-family: "Inter", system-ui, sans-serif;
+      }
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #three-canvas {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        z-index: 0;
+      }
+      #glass-canvas {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        z-index: 1;
+      }
+
+      /* ── Glass Panels ── */
+      .glass-panel {
+        position: absolute;
+        background: rgba(255, 255, 255, 0.025);
+        --lg-blur: 0.42;
+        --lg-refraction: 0.82;
+        --lg-corner-radius: 28;
+        --lg-z-radius: 46;
+        --lg-specular: 0.34;
+        --lg-fresnel: 1.25;
+        --lg-edge-highlight: 0.26;
+        --lg-chrom-aberration: 0.08;
+        --lg-shadow-opacity: 0;
+        --lg-shadow-spread: 0;
+        --lg-shadow-offset-y: 0;
+        --lg-saturation: 0.38;
+      }
+      .stat-card {
+        width: 220px;
+        height: 220px;
+      }
+      .showcase-card {
+        width: 500px;
+        height: 320px;
+      }
+      .pill-chip {
+        width: 130px;
+        height: 36px;
+        --lg-corner-radius: 40;
+      }
+
+      #glass-stat1 {
+        top: 300px;
+        left: 200px;
+      }
+      #glass-stat2 {
+        top: 300px;
+        left: 460px;
+      }
+      #glass-stat3 {
+        top: 300px;
+        left: 720px;
+      }
+      #glass-showcase {
+        top: 380px;
+        left: 1100px;
+      }
+      #glass-pill1 {
+        top: 720px;
+        left: 300px;
+      }
+      #glass-pill2 {
+        top: 720px;
+        left: 460px;
+      }
+      #glass-pill3 {
+        top: 720px;
+        left: 620px;
+      }
+
+      /* ── Text Overlays ── */
+      .text-overlay {
+        position: absolute;
+        z-index: 2;
+        pointer-events: none;
+      }
+
+      /* Stat cards */
+      .stat-text {
+        width: 220px;
+        height: 220px;
+        position: absolute;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 10px;
+        padding: 22px;
+        border-radius: 28px;
+        background:
+          linear-gradient(
+            150deg,
+            rgba(255, 255, 255, 0.28),
+            rgba(255, 255, 255, 0.06) 46%,
+            rgba(255, 255, 255, 0.16)
+          ),
+          linear-gradient(180deg, rgba(9, 18, 31, 0.2), rgba(255, 255, 255, 0.04));
+        border: 1px solid rgba(255, 255, 255, 0.36);
+        box-shadow:
+          inset 0 1px 0 rgba(255, 255, 255, 0.5),
+          inset 0 -18px 38px rgba(255, 255, 255, 0.08);
+        overflow: hidden;
+        text-shadow: 0 2px 16px rgba(0, 0, 0, 0.38);
+      }
+      .stat-text::before,
+      .showcase-text::before,
+      .pill-text::before {
+        content: "";
+        position: absolute;
+        inset: 1px;
+        border-radius: inherit;
+        pointer-events: none;
+        background: linear-gradient(
+          120deg,
+          rgba(255, 255, 255, 0.44),
+          transparent 28%,
+          transparent 66%,
+          rgba(255, 255, 255, 0.2)
+        );
+        opacity: 0.32;
+        mix-blend-mode: screen;
+      }
+      .stat-label {
+        position: relative;
+        font-size: 14px;
+        font-weight: 650;
+        color: #fff;
+        text-transform: uppercase;
+        letter-spacing: 1.5px;
+      }
+      .stat-value {
+        position: relative;
+        font-size: 52px;
+        font-weight: 700;
+        color: #fff;
+        font-variant-numeric: tabular-nums;
+        line-height: 1;
+      }
+      .stat-unit {
+        position: relative;
+        font-size: 24px;
+        font-weight: 500;
+        color: #fff;
+      }
+      .mini-meter {
+        position: relative;
+        width: 140px;
+        height: 6px;
+        overflow: hidden;
+        border-radius: 999px;
+        background: rgba(255, 255, 255, 0.28);
+      }
+      .mini-meter-fill {
+        width: 0%;
+        height: 100%;
+        border-radius: inherit;
+        background: linear-gradient(90deg, #06e3fa, #4fdb5e);
+        box-shadow: 0 0 12px rgba(79, 219, 94, 0.55);
+      }
+      .battery-shell {
+        position: relative;
+        width: 118px;
+        height: 40px;
+        padding: 4px;
+        border: 2px solid rgba(255, 255, 255, 0.66);
+        border-radius: 12px;
+      }
+      .battery-shell::after {
+        content: "";
+        position: absolute;
+        top: 12px;
+        right: -9px;
+        width: 5px;
+        height: 14px;
+        border-radius: 0 5px 5px 0;
+        background: rgba(255, 255, 255, 0.66);
+      }
+      .battery-fill {
+        width: 72%;
+        height: 100%;
+        border-radius: 8px;
+        background: linear-gradient(90deg, #4ade80, #06e3fa);
+        box-shadow: 0 0 18px rgba(74, 222, 128, 0.45);
+      }
+      .steps-ring {
+        width: 106px;
+        height: 106px;
+        display: grid;
+        place-items: center;
+        border-radius: 50%;
+        background: conic-gradient(#a78bfa 0deg, #06e3fa 180deg, rgba(255, 255, 255, 0.18) 180deg);
+      }
+      .steps-ring-inner {
+        width: 78px;
+        height: 78px;
+        display: grid;
+        place-items: center;
+        border-radius: 50%;
+        background: rgba(7, 10, 18, 0.36);
+        box-shadow:
+          inset 0 1px 0 rgba(255, 255, 255, 0.22),
+          inset 0 -8px 20px rgba(0, 0, 0, 0.14);
+        color: #fff;
+        font-size: 30px;
+        font-weight: 800;
+        font-variant-numeric: tabular-nums;
+      }
+      #text-stat1 {
+        top: 300px;
+        left: 200px;
+      }
+      #text-stat2 {
+        top: 300px;
+        left: 460px;
+      }
+      #text-stat3 {
+        top: 300px;
+        left: 720px;
+      }
+
+      /* Showcase card */
+      .showcase-text {
+        width: 500px;
+        height: 320px;
+        position: absolute;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 20px;
+        padding: 32px;
+        border-radius: 28px;
+        background:
+          radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.38), transparent 24%),
+          linear-gradient(
+            135deg,
+            rgba(255, 255, 255, 0.24),
+            rgba(255, 255, 255, 0.07) 52%,
+            rgba(255, 255, 255, 0.18)
+          );
+        border: 1px solid rgba(255, 255, 255, 0.38);
+        box-shadow:
+          inset 0 1px 0 rgba(255, 255, 255, 0.5),
+          inset 0 -24px 48px rgba(255, 255, 255, 0.08);
+        overflow: hidden;
+        text-shadow: 0 2px 18px rgba(0, 0, 0, 0.4);
+      }
+      .showcase-icon {
+        position: relative;
+        width: 168px;
+        height: 52px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .showcase-logo {
+        width: 150px;
+        height: auto;
+        display: block;
+      }
+      .showcase-title {
+        position: relative;
+        font-size: 28px;
+        font-weight: 700;
+        color: #fff;
+        text-align: center;
+        line-height: 1.2;
+      }
+      .showcase-desc {
+        position: relative;
+        font-size: 15px;
+        font-weight: 500;
+        color: #fff;
+        text-align: center;
+        line-height: 1.5;
+        max-width: 380px;
+      }
+      .showcase-status {
+        position: relative;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        color: #fff;
+        font-size: 14px;
+        font-weight: 700;
+      }
+      .showcase-dot {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background: #4ade80;
+        box-shadow: 0 0 14px rgba(74, 222, 128, 0.7);
+      }
+      .showcase-progress {
+        position: relative;
+        width: 300px;
+        height: 7px;
+        overflow: hidden;
+        border-radius: 999px;
+        background: rgba(255, 255, 255, 0.18);
+      }
+      .showcase-progress-fill {
+        width: 18%;
+        height: 100%;
+        border-radius: inherit;
+        background: linear-gradient(90deg, #06e3fa, #4fdb5e);
+      }
+      #text-showcase {
+        top: 380px;
+        left: 1100px;
+      }
+
+      /* Pill chips */
+      .pill-text {
+        width: 130px;
+        height: 36px;
+        position: absolute;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 8px;
+        border-radius: 40px;
+        background: linear-gradient(130deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.1));
+        border: 1px solid rgba(255, 255, 255, 0.34);
+        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.48);
+        overflow: hidden;
+      }
+      .pill-dot {
+        position: relative;
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        flex-shrink: 0;
+      }
+      .dot-green {
+        background: #4ade80;
+      }
+      .dot-blue {
+        background: #60a5fa;
+      }
+      .dot-violet {
+        background: #a78bfa;
+      }
+      .pill-label {
+        position: relative;
+        font-size: 13px;
+        font-weight: 600;
+        color: #fff;
+      }
+      #text-pill1 {
+        top: 720px;
+        left: 300px;
+      }
+      #text-pill2 {
+        top: 720px;
+        left: 460px;
+      }
+      #text-pill3 {
+        top: 720px;
+        left: 620px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="liquid-glass-widgets"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="8"
+      data-root="true"
+    >
+      <canvas id="three-canvas" width="1920" height="1080"></canvas>
+
+      <canvas id="glass-canvas" layoutsubtree width="1920" height="1080">
+        <div id="glass-stat1" class="glass-panel stat-card liquid-glass"></div>
+        <div id="glass-stat2" class="glass-panel stat-card liquid-glass"></div>
+        <div id="glass-stat3" class="glass-panel stat-card liquid-glass"></div>
+        <div id="glass-showcase" class="glass-panel showcase-card liquid-glass"></div>
+        <div id="glass-pill1" class="glass-panel pill-chip liquid-glass"></div>
+        <div id="glass-pill2" class="glass-panel pill-chip liquid-glass"></div>
+        <div id="glass-pill3" class="glass-panel pill-chip liquid-glass"></div>
+      </canvas>
+
+      <!-- Stat cards -->
+      <div id="text-stat1" class="text-overlay stat-text">
+        <span class="stat-label">Temperature</span>
+        <span class="stat-value"
+          ><span id="temp-value">21</span><span class="stat-unit">&deg;</span></span
+        >
+        <div class="mini-meter"><div id="temp-meter" class="mini-meter-fill"></div></div>
+      </div>
+      <div id="text-stat2" class="text-overlay stat-text">
+        <span class="stat-label">Battery</span>
+        <div class="battery-shell"><div id="battery-fill" class="battery-fill"></div></div>
+        <span class="stat-value"
+          ><span id="battery-value">87</span><span class="stat-unit">%</span></span
+        >
+      </div>
+      <div id="text-stat3" class="text-overlay stat-text">
+        <span class="stat-label">Steps</span>
+        <div id="steps-ring" class="steps-ring">
+          <div id="steps-value" class="steps-ring-inner">8.2K</div>
+        </div>
+      </div>
+
+      <!-- Showcase card -->
+      <div id="text-showcase" class="text-overlay showcase-text">
+        <div class="showcase-icon">
+          <img class="showcase-logo" src="assets/hyperframes-logo-dark.svg" alt="HyperFrames" />
+        </div>
+        <div class="showcase-title">Preview pipeline</div>
+        <div class="showcase-desc">
+          Write HTML, render video. Ship compositions at the speed of code.
+        </div>
+        <div class="showcase-status">
+          <span class="showcase-dot" id="showcase-dot"></span
+          ><span id="showcase-status">Encoding frames</span>
+        </div>
+        <div class="showcase-progress">
+          <div id="showcase-progress" class="showcase-progress-fill"></div>
+        </div>
+      </div>
+
+      <!-- Pill chips -->
+      <div id="text-pill1" class="text-overlay pill-text">
+        <span class="pill-dot dot-green"></span>
+        <span class="pill-label">Connected</span>
+      </div>
+      <div id="text-pill2" class="text-overlay pill-text">
+        <span class="pill-dot dot-blue"></span>
+        <span class="pill-label">Bluetooth</span>
+      </div>
+      <div id="text-pill3" class="text-overlay pill-text">
+        <span class="pill-dot dot-violet"></span>
+        <span class="pill-label">Focus</span>
+      </div>
+
+      <div
+        id="driver"
+        class="clip"
+        data-start="0"
+        data-duration="8"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+
+    <script>
+      var W = 1920,
+        H = 1080,
+        DURATION = 8;
+
+      /* ── Three.js Aurora Shader ─────────────────────────────────────── */
+      var vs = "varying vec2 vUv; void main() { vUv = uv; gl_Position = vec4(position, 1.0); }";
+      var fs = [
+        "precision highp float;",
+        "varying vec2 vUv;",
+        "uniform float uTime;",
+        "vec3 mod289(vec3 x){return x-floor(x*(1.0/289.0))*289.0;}",
+        "vec4 mod289(vec4 x){return x-floor(x*(1.0/289.0))*289.0;}",
+        "vec4 permute(vec4 x){return mod289(((x*34.0)+1.0)*x);}",
+        "vec4 taylorInvSqrt(vec4 r){return 1.79284291400159-0.85373472095314*r;}",
+        "float snoise(vec3 v){",
+        "  const vec2 C=vec2(1.0/6.0,1.0/3.0);const vec4 D=vec4(0.0,0.5,1.0,2.0);",
+        "  vec3 i=floor(v+dot(v,C.yyy));vec3 x0=v-i+dot(i,C.xxx);",
+        "  vec3 g=step(x0.yzx,x0.xyz);vec3 l=1.0-g;",
+        "  vec3 i1=min(g.xyz,l.zxy);vec3 i2=max(g.xyz,l.zxy);",
+        "  vec3 x1=x0-i1+C.xxx;vec3 x2=x0-i2+C.yyy;vec3 x3=x0-D.yyy;",
+        "  i=mod289(i);",
+        "  vec4 p=permute(permute(permute(i.z+vec4(0.0,i1.z,i2.z,1.0))+i.y+vec4(0.0,i1.y,i2.y,1.0))+i.x+vec4(0.0,i1.x,i2.x,1.0));",
+        "  float n_=0.142857142857;vec3 ns=n_*D.wyz-D.xzx;",
+        "  vec4 j=p-49.0*floor(p*ns.z*ns.z);vec4 x_=floor(j*ns.z);vec4 y_=floor(j-7.0*x_);",
+        "  vec4 x=x_*ns.x+ns.yyyy;vec4 y=y_*ns.x+ns.yyyy;vec4 h=1.0-abs(x)-abs(y);",
+        "  vec4 b0=vec4(x.xy,y.xy);vec4 b1=vec4(x.zw,y.zw);",
+        "  vec4 s0=floor(b0)*2.0+1.0;vec4 s1=floor(b1)*2.0+1.0;",
+        "  vec4 sh=-step(h,vec4(0.0));",
+        "  vec4 a0=b0.xzyw+s0.xzyw*sh.xxyy;vec4 a1=b1.xzyw+s1.xzyw*sh.zzww;",
+        "  vec3 p0=vec3(a0.xy,h.x);vec3 p1=vec3(a0.zw,h.y);vec3 p2=vec3(a1.xy,h.z);vec3 p3=vec3(a1.zw,h.w);",
+        "  vec4 norm=taylorInvSqrt(vec4(dot(p0,p0),dot(p1,p1),dot(p2,p2),dot(p3,p3)));",
+        "  p0*=norm.x;p1*=norm.y;p2*=norm.z;p3*=norm.w;",
+        "  vec4 m=max(0.6-vec4(dot(x0,x0),dot(x1,x1),dot(x2,x2),dot(x3,x3)),0.0);m=m*m;",
+        "  return 42.0*dot(m*m,vec4(dot(p0,x0),dot(p1,x1),dot(p2,x2),dot(p3,x3)));",
+        "}",
+        "void main(){",
+        "  vec2 uv=vUv;float ar=1920.0/1080.0;vec2 p=vec2(uv.x*ar,uv.y);float t=uTime*0.06;",
+        "  float wx=snoise(vec3(p*1.4,t*0.5))*0.2;float wy=snoise(vec3(p*1.4+100.0,t*0.5))*0.2;",
+        "  vec2 wp=p+vec2(wx,wy);",
+        "  vec3 base=mix(vec3(0.10,0.02,0.22),vec3(0.04,0.10,0.25),smoothstep(0.0,1.0,uv.x*0.6+uv.y*0.4));",
+        "  float angle=0.65;float ridgeUv=dot(wp,vec2(cos(angle),sin(angle)));",
+        "  float ridge1=sin(ridgeUv*8.0+t*2.0+snoise(vec3(wp*0.8,t))*1.5);",
+        "  float ridge2=sin(ridgeUv*5.5-t*1.4+snoise(vec3(wp*1.2+50.0,t*0.7))*2.0);",
+        "  float ridge3=sin(ridgeUv*12.0+t*3.0+snoise(vec3(wp*0.6+80.0,t*0.4))*1.0);",
+        "  float crease1=pow(abs(ridge1),0.35)*sign(ridge1)*0.5+0.5;",
+        "  float crease2=pow(abs(ridge2),0.4)*sign(ridge2)*0.5+0.5;",
+        "  float crease3=pow(abs(ridge3),0.5)*sign(ridge3)*0.5+0.5;",
+        "  vec3 warm=mix(vec3(0.9,0.4,0.08),vec3(0.95,0.65,0.15),crease1);",
+        "  float warmZone=smoothstep(0.15,0.75,uv.x+uv.y*0.4+snoise(vec3(uv*2.0,t))*0.3);",
+        "  vec3 cool=mix(vec3(0.02,0.4,0.55),vec3(0.25,0.7,0.82),crease2);",
+        "  float coolZone=smoothstep(0.25,0.85,1.2-uv.x+uv.y*0.5+snoise(vec3(uv*2.0+40.0,t*0.8))*0.25);",
+        "  vec3 hot=mix(vec3(0.8,0.1,0.4),vec3(0.6,0.08,0.65),crease3);",
+        "  float hotZone=smoothstep(0.5,0.9,snoise(vec3(uv*2.5+20.0,t*0.6))*0.5+0.5);",
+        "  vec3 col=base;",
+        "  col=mix(col,warm,warmZone*0.75*smoothstep(0.3,0.7,crease1));",
+        "  col=mix(col,cool,coolZone*0.65*smoothstep(0.2,0.65,crease2));",
+        "  col=mix(col,hot,hotZone*0.5*smoothstep(0.35,0.8,crease3));",
+        "  float edgeGlow=pow(1.0-abs(ridge1),6.0)*0.4+pow(1.0-abs(ridge2),5.0)*0.25;",
+        "  col+=edgeGlow*mix(warm,cool,uv.x)*0.8;",
+        "  col*=1.0-pow(abs(ridge1),4.0)*0.15;",
+        "  float vig=1.0-smoothstep(0.5,1.5,length((uv-0.5)*vec2(1.3,1.0)));",
+        "  col*=0.65+vig*0.5;",
+        "  float luma=dot(col,vec3(0.299,0.587,0.114));col=mix(vec3(luma),col,1.5);",
+        "  col=clamp(col,0.0,1.0);col=pow(col,vec3(0.9));",
+        "  gl_FragColor=vec4(col,1.0);",
+        "}",
+      ].join("\n");
+
+      /* ── Three.js Setup ─────────────────────────────────────────────── */
+      var threeCanvas = document.getElementById("three-canvas");
+      var renderer = new THREE.WebGLRenderer({ canvas: threeCanvas, alpha: false });
+      renderer.setSize(W, H, false);
+      renderer.setPixelRatio(1);
+
+      var scene = new THREE.Scene();
+      var camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
+      var uniforms = { uTime: { value: 0 } };
+      var shaderMat = new THREE.ShaderMaterial({
+        vertexShader: vs,
+        fragmentShader: fs,
+        uniforms: uniforms,
+      });
+      var quad = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), shaderMat);
+      scene.add(quad);
+
+      /* ── Glass Canvas ───────────────────────────────────────────────── */
+      var glassCanvas = document.getElementById("glass-canvas");
+      var ctx = glassCanvas.getContext("2d");
+      var lg = new LiquidGlass.LiquidGlassCanvas(glassCanvas);
+      var lgReady = false;
+
+      function renderGlass(time) {
+        if (!lgReady) return;
+        uniforms.uTime.value = time;
+        renderer.render(scene, camera);
+        ctx.clearRect(0, 0, W, H);
+        ctx.drawImage(threeCanvas, 0, 0, W, H);
+        lg.renderGlassElements();
+      }
+
+      function requestGlassRender(time) {
+        if (glassCanvas.requestPaint) {
+          glassCanvas.onpaint = function () {
+            renderGlass(time);
+          };
+          glassCanvas.requestPaint();
+          return;
+        }
+        renderGlass(time);
+      }
+
+      lg.waitForInit().then(function (ok) {
+        if (!ok) return;
+        lgReady = true;
+        requestGlassRender(0);
+      });
+
+      /* ── GSAP Timeline ──────────────────────────────────────────────── */
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+
+      /* Glass + text element pairs */
+      var s1g = document.getElementById("glass-stat1");
+      var s2g = document.getElementById("glass-stat2");
+      var s3g = document.getElementById("glass-stat3");
+      var scg = document.getElementById("glass-showcase");
+      var p1g = document.getElementById("glass-pill1");
+      var p2g = document.getElementById("glass-pill2");
+      var p3g = document.getElementById("glass-pill3");
+      var s1t = document.getElementById("text-stat1");
+      var s2t = document.getElementById("text-stat2");
+      var s3t = document.getElementById("text-stat3");
+      var sct = document.getElementById("text-showcase");
+      var p1t = document.getElementById("text-pill1");
+      var p2t = document.getElementById("text-pill2");
+      var p3t = document.getElementById("text-pill3");
+
+      var tempValue = document.getElementById("temp-value");
+      var batteryValue = document.getElementById("battery-value");
+      var stepsValue = document.getElementById("steps-value");
+      var stepsRing = document.getElementById("steps-ring");
+      var showcaseStatus = document.getElementById("showcase-status");
+      var tempCounter = { value: 21 };
+      var batteryCounter = { value: 87 };
+      var stepsCounter = { value: 8.2 };
+
+      // Glass panels (rasterized by the html-in-canvas API) animate top — the API
+      // reads sub-pixel getComputedStyle().top, so layout-prop motion does not
+      // stutter and the lint rule exempts them. Plain-DOM text overlays DO stutter on
+      // layout props, so they animate the transform equivalent (y). y is relative to
+      // each text element's CSS resting top (stats 300, showcase 380, pills 720), so the
+      // initial seed to visual 1160 is y = 1160 - restingTop.
+      var glassPanels = [s1g, s2g, s3g, scg, p1g, p2g, p3g];
+      var statText = [s1t, s2t, s3t];
+      var showcaseText = sct;
+      var pillText = [p1t, p2t, p3t];
+      gsap.set(glassPanels, { opacity: 1, top: 1160 });
+      gsap.set(statText, { opacity: 1, y: 860 }); // 1160 - 300
+      gsap.set(showcaseText, { opacity: 1, y: 780 }); // 1160 - 380
+      gsap.set(pillText, { opacity: 1, y: 440 }); // 1160 - 720
+
+      tl.to(s1g, { top: 300, duration: 0.46, ease: "power3.out" }, 0.12);
+      tl.to(s1t, { y: 0, duration: 0.46, ease: "power3.out" }, 0.12); // 300 - 300
+      tl.to(s2g, { top: 300, duration: 0.46, ease: "power3.out" }, 0.24);
+      tl.to(s2t, { y: 0, duration: 0.46, ease: "power3.out" }, 0.24); // 300 - 300
+      tl.to(s3g, { top: 300, duration: 0.46, ease: "power3.out" }, 0.36);
+      tl.to(s3t, { y: 0, duration: 0.46, ease: "power3.out" }, 0.36); // 300 - 300
+      tl.to(scg, { top: 380, duration: 0.5, ease: "power3.out" }, 0.5);
+      tl.to(sct, { y: 0, duration: 0.5, ease: "power3.out" }, 0.5); // 380 - 380
+      tl.to(p1g, { top: 720, duration: 0.32, ease: "power3.out" }, 0.9);
+      tl.to(p1t, { y: 0, duration: 0.32, ease: "power3.out" }, 0.9); // 720 - 720
+      tl.to(p2g, { top: 720, duration: 0.32, ease: "power3.out" }, 1.0);
+      tl.to(p2t, { y: 0, duration: 0.32, ease: "power3.out" }, 1.0); // 720 - 720
+      tl.to(p3g, { top: 720, duration: 0.32, ease: "power3.out" }, 1.1);
+      tl.to(p3t, { y: 0, duration: 0.32, ease: "power3.out" }, 1.1); // 720 - 720
+
+      tl.to("#temp-meter", { width: "76%", duration: 1.7, ease: "power2.out" }, 0.9);
+      tl.to(
+        tempCounter,
+        {
+          value: 25,
+          duration: 2.2,
+          ease: "power2.out",
+          onUpdate: function () {
+            tempValue.textContent = Math.round(tempCounter.value);
+          },
+        },
+        0.9,
+      );
+      tl.to("#battery-fill", { width: "91%", duration: 2.4, ease: "power2.out" }, 1.05);
+      tl.to(
+        batteryCounter,
+        {
+          value: 91,
+          duration: 2.4,
+          ease: "power2.out",
+          onUpdate: function () {
+            batteryValue.textContent = Math.round(batteryCounter.value);
+          },
+        },
+        1.05,
+      );
+      tl.to(
+        stepsCounter,
+        {
+          value: 9.1,
+          duration: 2.6,
+          ease: "power2.out",
+          onUpdate: function () {
+            var degrees = Math.round(stepsCounter.value * 31.4);
+            stepsValue.textContent = stepsCounter.value.toFixed(1) + "K";
+            stepsRing.style.background =
+              "conic-gradient(#a78bfa 0deg, #06e3fa " +
+              degrees +
+              "deg, rgba(255, 255, 255, 0.18) " +
+              degrees +
+              "deg)";
+          },
+        },
+        1.2,
+      );
+      tl.to("#showcase-progress", { width: "92%", duration: 4.1, ease: "none" }, 1.2);
+      tl.to(
+        "#showcase-dot",
+        { scale: 1.5, duration: 0.25, ease: "power2.out", yoyo: true, repeat: 7 },
+        1.4,
+      );
+      tl.call(
+        function () {
+          showcaseStatus.textContent = "Preview ready";
+        },
+        null,
+        5.2,
+      );
+      tl.to(scg, { top: "-=10", duration: 0.2, ease: "power2.out", yoyo: true, repeat: 1 }, 5.2);
+      tl.to(sct, { y: "-=10", duration: 0.2, ease: "power2.out", yoyo: true, repeat: 1 }, 5.2);
+      tl.to(
+        ".pill-dot",
+        { scale: 1.55, duration: 0.2, ease: "power2.out", stagger: 0.12, yoyo: true, repeat: 3 },
+        2.2,
+      );
+
+      tl.to(
+        [s1g, s2g, s3g],
+        { top: "-=12", duration: 0.2, ease: "power2.out", yoyo: true, repeat: 1 },
+        5.7,
+      );
+      tl.to(
+        [s1t, s2t, s3t],
+        { y: "-=12", duration: 0.2, ease: "power2.out", yoyo: true, repeat: 1 },
+        5.7,
+      );
+      tl.to(
+        [s1g, s2g, s3g, scg, p1g, p2g, p3g],
+        { top: "+=760", duration: 0.42, ease: "power2.in" },
+        6.74,
+      );
+      tl.to(
+        [s1t, s2t, s3t, sct, p1t, p2t, p3t],
+        { y: "+=760", duration: 0.42, ease: "power2.in" },
+        6.74,
+      );
+
+      /* Duration driver */
+      tl.to({ v: 0 }, { v: 1, duration: DURATION, ease: "none" }, 0);
+
+      tl.eventCallback("onUpdate", function () {
+        requestGlassRender(tl.time());
+      });
+
+      window.__timelines["liquid-glass-widgets"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/logo-outro/logo-outro.html b/docs/public/catalog/blocks/logo-outro/logo-outro.html
new file mode 100644
index 0000000000..0aeb77ba7a
--- /dev/null
+++ b/docs/public/catalog/blocks/logo-outro/logo-outro.html
@@ -0,0 +1,226 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Logo Outro</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=block"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0a0a0f;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="logo-outro"
+      data-composition-id="logo-outro"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="6"
+    >
+      <div class="canvas">
+        <!-- Glow effect behind the logo -->
+        <div class="logo-glow"></div>
+
+        <!-- Logo Container -->
+        <div class="logo-container">
+          <svg viewBox="0 0 160 240" width="160" height="240" class="logo-svg">
+            <!-- Replace these paths with your own logo SVG -->
+            <path
+              class="logo-piece logo-tl"
+              d="M 0 40 C 0 17.9 17.9 0 40 0 L 80 0 L 80 80 L 40 80 C 17.9 80 0 62.1 0 40 Z"
+              fill="#F24E1E"
+            />
+            <path
+              class="logo-piece logo-tr"
+              d="M 80 0 L 120 0 C 142.1 0 160 17.9 160 40 C 160 62.1 142.1 80 120 80 L 80 80 L 80 0 Z"
+              fill="#A259FF"
+            />
+            <path
+              class="logo-piece logo-ml"
+              d="M 0 120 C 0 97.9 17.9 80 40 80 L 80 80 L 80 160 L 40 160 C 17.9 160 0 142.1 0 120 Z"
+              fill="#FF7262"
+            />
+            <circle class="logo-piece logo-mr" cx="120" cy="120" r="40" fill="#1ABCFE" />
+            <path
+              class="logo-piece logo-bl"
+              d="M 0 200 C 0 177.9 17.9 160 40 160 L 80 160 L 80 200 C 80 222.1 62.1 240 40 240 C 17.9 240 0 222.1 0 200 Z"
+              fill="#0ACF83"
+            />
+          </svg>
+        </div>
+
+        <div class="text-container">
+          <div class="tagline">Nothing great is made alone.</div>
+          <div class="url-pill">
+            <span class="url-text">figma.com</span>
+          </div>
+        </div>
+      </div>
+
+      <style>
+        [data-composition-id="logo-outro"] .canvas {
+          width: 1920px;
+          height: 1080px;
+          background: #0a0a0f;
+          position: relative;
+          overflow: hidden;
+          font-family: "Inter", sans-serif;
+        }
+
+        [data-composition-id="logo-outro"] .logo-container {
+          position: absolute;
+          left: 880px;
+          top: 380px;
+          width: 160px;
+          height: 240px;
+          z-index: 2;
+        }
+
+        [data-composition-id="logo-outro"] .logo-piece {
+          transform-origin: center center;
+          opacity: 0;
+        }
+
+        [data-composition-id="logo-outro"] .logo-glow {
+          position: absolute;
+          left: 760px;
+          top: 300px;
+          width: 400px;
+          height: 400px;
+          background: radial-gradient(circle, rgba(162, 89, 255, 0.25) 0%, rgba(10, 10, 15, 0) 70%);
+          border-radius: 50%;
+          opacity: 0;
+          pointer-events: none;
+          z-index: 1;
+        }
+
+        [data-composition-id="logo-outro"] .text-container {
+          position: absolute;
+          top: 720px;
+          width: 100%;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          z-index: 3;
+        }
+
+        [data-composition-id="logo-outro"] .tagline {
+          font-size: 44px;
+          font-weight: 500;
+          color: white;
+          opacity: 0;
+          margin-bottom: 32px;
+          text-align: center;
+        }
+
+        [data-composition-id="logo-outro"] .url-pill {
+          background: #1a1a1f;
+          border: 1px solid #2c2c2c;
+          border-radius: 100px;
+          padding: 8px 24px;
+          opacity: 0;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+
+        [data-composition-id="logo-outro"] .url-text {
+          font-size: 18px;
+          color: #666;
+          letter-spacing: 0.5px;
+        }
+      </style>
+
+      <script>
+        (function () {
+          const tl = gsap.timeline({ paused: true });
+
+          const pieces = {
+            tl: '[data-composition-id="logo-outro"] .logo-tl',
+            tr: '[data-composition-id="logo-outro"] .logo-tr',
+            ml: '[data-composition-id="logo-outro"] .logo-ml',
+            mr: '[data-composition-id="logo-outro"] .logo-mr',
+            bl: '[data-composition-id="logo-outro"] .logo-bl',
+          };
+
+          const pieceArray = [pieces.tl, pieces.tr, pieces.ml, pieces.mr, pieces.bl];
+          const logoGlow = '[data-composition-id="logo-outro"] .logo-glow';
+          const tagline = '[data-composition-id="logo-outro"] .tagline';
+          const urlPill = '[data-composition-id="logo-outro"] .url-pill';
+
+          // 1. Pieces slide in from the right with ripple stagger
+          pieceArray.forEach((piece, i) => {
+            tl.fromTo(
+              piece,
+              { x: 1920, opacity: 0 },
+              { x: 0, opacity: 1, duration: 1.2, ease: "power4.out" },
+              i * 0.08,
+            );
+          });
+
+          // 2. Expand and close
+          const expandTime = 1.2;
+
+          tl.to(
+            pieceArray,
+            { scale: 1.15, duration: 0.5, ease: "back.out(1.7)", stagger: 0.02 },
+            expandTime,
+          );
+
+          tl.to(pieceArray, { scale: 1, duration: 0.4, ease: "power2.inOut" }, expandTime + 0.3);
+
+          // 3. Glow bloom
+          tl.fromTo(
+            logoGlow,
+            { opacity: 0, scale: 0.5 },
+            { opacity: 1, scale: 1.2, duration: 0.4, ease: "power2.out" },
+            expandTime,
+          );
+          tl.to(
+            logoGlow,
+            { opacity: 0, scale: 1.8, duration: 1.2, ease: "power2.out" },
+            expandTime + 0.4,
+          );
+
+          // 4. Tagline and URL pill fade in
+          const textStartTime = expandTime + 0.8;
+          tl.fromTo(
+            tagline,
+            { opacity: 0, y: 20 },
+            { opacity: 1, y: 0, duration: 1, ease: "power3.out" },
+            textStartTime,
+          );
+
+          tl.fromTo(
+            urlPill,
+            { opacity: 0, y: 15 },
+            { opacity: 1, y: 0, duration: 0.8, ease: "power3.out" },
+            textStartTime + 0.4,
+          );
+
+          window.__timelines = window.__timelines || {};
+          window.__timelines["logo-outro"] = tl;
+        })();
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/lower-third-bild/__hf-variables-preview.html b/docs/public/catalog/blocks/lower-third-bild/__hf-variables-preview.html
new file mode 100644
index 0000000000..fc6b0017c4
--- /dev/null
+++ b/docs/public/catalog/blocks/lower-third-bild/__hf-variables-preview.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Lower Third — BILD Style variables preview</title>
+    <style>
+      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: transparent; }
+      #hf-vars-root { position: relative; width: 1920px; height: 1080px; }
+      #hf-vars-mount { position: absolute; inset: 0; display: grid; place-items: center; }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  </head>
+  <body>
+    <div id="hf-vars-root" data-composition-id="lower-third-bild-variables-preview" data-start="0" data-width="1920" data-height="1080" data-duration="8" data-fps="30">
+      <div id="hf-vars-mount" class="clip" data-composition-id="lower-third-bild" data-composition-src="./lower-third-bild.html" data-start="0" data-duration="8" data-track-index="0" data-width="1920" data-height="1080"></div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["lower-third-bild-variables-preview"] = gsap.timeline({ paused: true });
+    </script>
+<script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "lower-third-bild.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/lower-third-bild/assets/fonts/BarlowCondensed-Bold.woff2 b/docs/public/catalog/blocks/lower-third-bild/assets/fonts/BarlowCondensed-Bold.woff2
new file mode 100644
index 0000000000..10ee1a8721
Binary files /dev/null and b/docs/public/catalog/blocks/lower-third-bild/assets/fonts/BarlowCondensed-Bold.woff2 differ
diff --git a/docs/public/catalog/blocks/lower-third-bild/assets/fonts/BarlowCondensed-ExtraBold.woff2 b/docs/public/catalog/blocks/lower-third-bild/assets/fonts/BarlowCondensed-ExtraBold.woff2
new file mode 100644
index 0000000000..4889581437
Binary files /dev/null and b/docs/public/catalog/blocks/lower-third-bild/assets/fonts/BarlowCondensed-ExtraBold.woff2 differ
diff --git a/docs/public/catalog/blocks/lower-third-bild/lower-third-bild.html b/docs/public/catalog/blocks/lower-third-bild/lower-third-bild.html
new file mode 100644
index 0000000000..ed2ffb1ada
--- /dev/null
+++ b/docs/public/catalog/blocks/lower-third-bild/lower-third-bild.html
@@ -0,0 +1,167 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <style>
+      @font-face {
+        font-family: "Barlow Condensed";
+        font-style: normal;
+        font-weight: 700;
+        font-display: block;
+        src: url("assets/fonts/BarlowCondensed-Bold.woff2") format("woff2");
+      }
+      @font-face {
+        font-family: "Barlow Condensed";
+        font-style: normal;
+        font-weight: 800;
+        font-display: block;
+        src: url("assets/fonts/BarlowCondensed-ExtraBold.woff2") format("woff2");
+      }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      body {
+        width: 1920px;
+        height: 1080px;
+      }
+
+      #lb-root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent;
+      }
+
+      #lb-main-outer {
+        position: absolute;
+        bottom: 215px;
+        left: 80px;
+        padding-right: 14px;
+        padding-bottom: 14px;
+      }
+
+      #lb-main-text {
+        font-family: "Barlow Condensed", sans-serif;
+        font-size: 88px;
+        font-weight: 800;
+        line-height: 1.05;
+        color: #212529;
+        background: #ffffff;
+        padding: 10px 22px 8px;
+        white-space: nowrap;
+        text-transform: uppercase;
+        letter-spacing: 0.02em;
+        box-shadow: 12px 12px 0 0 #dd0000;
+      }
+
+      #lb-sub-outer {
+        position: absolute;
+        bottom: 135px;
+        left: 80px;
+        padding-right: 10px;
+        padding-bottom: 10px;
+      }
+
+      #lb-sub-text {
+        font-family: "Barlow Condensed", sans-serif;
+        font-size: 48px;
+        font-weight: 700;
+        line-height: 1.1;
+        color: #ffffff;
+        background: #dd0000;
+        padding: 6px 18px 5px;
+        white-space: nowrap;
+        text-transform: uppercase;
+        letter-spacing: 0.04em;
+        box-shadow: 8px 8px 0 0 #ffffff;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="lb-root"
+      data-composition-id="lower-third-bild"
+      data-composition-variables='{"TXT_MAIN_1_Line":{"type":"string","default":"BILD EXKLUSIV"},"TXT_SUB":{"type":"string","default":"Sonderbericht"}}'
+      data-start="0"
+      data-duration="8"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div
+        id="lb-drv"
+        class="clip"
+        data-start="0"
+        data-duration="8"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+
+      <div id="lb-main-outer">
+        <div id="lb-main-text"></div>
+      </div>
+
+      <div id="lb-sub-outer">
+        <div id="lb-sub-text"></div>
+      </div>
+
+      <script>
+        (function () {
+          window.__timelines = window.__timelines || {};
+
+          var vars =
+            window.__hyperframes && window.__hyperframes.getVariables
+              ? window.__hyperframes.getVariables()
+              : {};
+
+          var mainText = (vars.TXT_MAIN_1_Line || "BILD EXKLUSIV").trim();
+          var subText = (vars.TXT_SUB || "Sonderbericht").trim();
+
+          var dur = parseFloat(document.getElementById("lb-drv").dataset.duration) || 8;
+
+          document.getElementById("lb-main-text").textContent = mainText;
+          document.getElementById("lb-sub-text").textContent = subText || " ";
+
+          var mainOuter = document.getElementById("lb-main-outer");
+          var subOuter = document.getElementById("lb-sub-outer");
+
+          var tl = gsap.timeline({ paused: true });
+
+          gsap.set([mainOuter, subOuter], { opacity: 1 });
+
+          tl.set([mainOuter, subOuter], { opacity: 0, visibility: "hidden" }, dur);
+
+          window.__timelines["lower-third-bild"] = tl;
+        })();
+      </script>
+    </div>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "lower-third-bild.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/blocks/lt-accent-underline/lt-accent-underline.html b/docs/public/catalog/blocks/lt-accent-underline/lt-accent-underline.html
new file mode 100644
index 0000000000..1d79eb50b0
--- /dev/null
+++ b/docs/public/catalog/blocks/lt-accent-underline/lt-accent-underline.html
@@ -0,0 +1,106 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      body {
+        width: 1920px;
+        height: 1080px;
+      }
+
+      #root .lt {
+        position: absolute;
+        left: 130px;
+        bottom: 120px;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 14px;
+      }
+      #root .lt-name {
+        font-family: "Oswald", sans-serif;
+        font-size: 76px;
+        font-weight: 700;
+        color: #ffffff;
+        line-height: 0.96;
+        letter-spacing: 0.005em;
+        text-transform: uppercase;
+        white-space: nowrap;
+        text-shadow: 0 2px 22px rgba(0, 0, 0, 0.45);
+      }
+      #root .lt-rule {
+        height: 6px;
+        width: 100%;
+        background: #46e5b7;
+        border-radius: 3px;
+        transform-origin: 0% 50%;
+      }
+      #root .lt-role {
+        font-family: "Space Mono", monospace;
+        font-size: 28px;
+        font-weight: 400;
+        color: #e7eaf0;
+        line-height: 1.2;
+        letter-spacing: 0.04em;
+        white-space: nowrap;
+        text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="lt-accent-underline"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="4.8"
+    >
+      <div id="lt-clip" class="clip" data-start="0" data-duration="4.8" data-track-index="0">
+        <div id="lt" class="lt">
+          <div id="lt-name" class="lt-name">Dr. Maya Chen</div>
+          <div id="lt-rule" class="lt-rule"></div>
+          <div id="lt-role" class="lt-role">Host · Neuroscientist</div>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+
+      var wrap = document.getElementById("lt");
+      var nameEl = document.getElementById("lt-name");
+      var rule = document.getElementById("lt-rule");
+      var role = document.getElementById("lt-role");
+
+      // Name slides up, accent rule draws left→right, role fades up under it.
+      gsap.set(nameEl, { y: 28, opacity: 0 });
+      gsap.set(rule, { scaleX: 0 });
+      gsap.set(role, { y: 16, opacity: 0 });
+
+      tl.to(nameEl, { y: 0, opacity: 1, duration: 0.55, ease: "power3.out" }, 0.1);
+      tl.to(rule, { scaleX: 1, duration: 0.5, ease: "power4.out" }, 0.3);
+      tl.to(role, { y: 0, opacity: 1, duration: 0.5, ease: "power3.out" }, 0.46);
+
+      // Exit: role fades, rule retracts, name lifts, then hard kill.
+      tl.to(role, { opacity: 0, duration: 0.3, ease: "power2.in" }, 4.25);
+      tl.to(rule, { scaleX: 0, duration: 0.3, ease: "power2.in" }, 4.3);
+      tl.to(nameEl, { y: -16, opacity: 0, duration: 0.32, ease: "power2.in" }, 4.35);
+      tl.set(wrap, { visibility: "hidden" }, 4.75);
+
+      window.__timelines["lt-accent-underline"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/lt-bold-block/lt-bold-block.html b/docs/public/catalog/blocks/lt-bold-block/lt-bold-block.html
new file mode 100644
index 0000000000..c5a7a32b1f
--- /dev/null
+++ b/docs/public/catalog/blocks/lt-bold-block/lt-bold-block.html
@@ -0,0 +1,108 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      body {
+        width: 1920px;
+        height: 1080px;
+      }
+
+      #root .lt {
+        position: absolute;
+        left: 120px;
+        bottom: 116px;
+      }
+      #root .lt-block {
+        background: #141518;
+        padding: 18px 34px 22px 30px;
+        display: inline-flex;
+        flex-direction: column;
+        gap: 12px;
+        will-change: clip-path;
+      }
+      #root .lt-name {
+        font-family: "Archivo Black", sans-serif;
+        font-size: 58px;
+        font-weight: 400;
+        color: #ffffff;
+        line-height: 0.98;
+        letter-spacing: -0.015em;
+        text-transform: uppercase;
+        white-space: nowrap;
+      }
+      #root .lt-tagwrap {
+        overflow: hidden;
+      }
+      #root .lt-tag {
+        display: inline-block;
+        background: #ffd23f;
+        color: #141518;
+        font-family: "Space Mono", monospace;
+        font-size: 24px;
+        font-weight: 700;
+        letter-spacing: 0.06em;
+        text-transform: uppercase;
+        padding: 7px 16px;
+        white-space: nowrap;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="lt-bold-block"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="4.8"
+    >
+      <div id="lt-clip" class="clip" data-start="0" data-duration="4.8" data-track-index="0">
+        <div id="lt" class="lt">
+          <div id="lt-block" class="lt-block">
+            <div id="lt-name" class="lt-name">Maya Chen</div>
+            <div class="lt-tagwrap">
+              <span id="lt-tag" class="lt-tag">Host · Neuroscientist</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+
+      var wrap = document.getElementById("lt");
+      var block = document.getElementById("lt-block");
+      var nameEl = document.getElementById("lt-name");
+      var tag = document.getElementById("lt-tag");
+
+      // Solid block wipes in from the left, name slams up inside it, tag pops up after.
+      gsap.set(block, { clipPath: "inset(0 100% 0 0)" });
+      gsap.set(nameEl, { y: 30, opacity: 0 });
+      gsap.set(tag, { y: 40 });
+
+      tl.to(block, { clipPath: "inset(0 0% 0 0)", duration: 0.5, ease: "power4.out" }, 0.1);
+      tl.to(nameEl, { y: 0, opacity: 1, duration: 0.42, ease: "back.out(1.6)" }, 0.26);
+      tl.to(tag, { y: 0, duration: 0.45, ease: "back.out(2)" }, 0.5);
+
+      // Exit: block wipes out to the left, then hard kill.
+      tl.to(block, { clipPath: "inset(0 0 0 100%)", duration: 0.4, ease: "power3.in" }, 4.3);
+      tl.set(wrap, { visibility: "hidden" }, 4.75);
+
+      window.__timelines["lt-bold-block"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/lt-clean-bar/lt-clean-bar.html b/docs/public/catalog/blocks/lt-clean-bar/lt-clean-bar.html
new file mode 100644
index 0000000000..143fe94dc3
--- /dev/null
+++ b/docs/public/catalog/blocks/lt-clean-bar/lt-clean-bar.html
@@ -0,0 +1,111 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      body {
+        width: 1920px;
+        height: 1080px;
+        font-family: "Montserrat", sans-serif;
+      }
+
+      #root .lt {
+        position: absolute;
+        left: 120px;
+        bottom: 110px;
+        display: flex;
+        align-items: stretch;
+        border-radius: 16px;
+        overflow: hidden;
+        box-shadow: 0 14px 44px rgba(15, 17, 21, 0.18);
+        will-change: clip-path;
+      }
+      #root .lt-tab {
+        width: 12px;
+        background: #ff5a36;
+        flex-shrink: 0;
+      }
+      #root .lt-body {
+        background: #ffffff;
+        padding: 22px 40px 24px 30px;
+        display: flex;
+        flex-direction: column;
+        gap: 7px;
+      }
+      #root .lt-name {
+        font-size: 52px;
+        font-weight: 700;
+        color: #0f1115;
+        line-height: 1.06;
+        letter-spacing: -0.015em;
+        white-space: nowrap;
+      }
+      #root .lt-role {
+        font-size: 27px;
+        font-weight: 400;
+        color: #5a6170;
+        line-height: 1.2;
+        letter-spacing: 0.01em;
+        white-space: nowrap;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="lt-clean-bar"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="4.8"
+    >
+      <div id="lt-clip" class="clip" data-start="0" data-duration="4.8" data-track-index="0">
+        <div id="lt" class="lt">
+          <div id="lt-tab" class="lt-tab"></div>
+          <div class="lt-body">
+            <div id="lt-name" class="lt-name">Dr. Maya Chen</div>
+            <div id="lt-role" class="lt-role">Host · Neuroscientist</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+
+      var card = document.getElementById("lt");
+      var tab = document.getElementById("lt-tab");
+      var nameEl = document.getElementById("lt-name");
+      var role = document.getElementById("lt-role");
+
+      // Card wipes in from the left (clip-path), accent tab grows, text rises with a small stagger.
+      gsap.set(card, { clipPath: "inset(0 100% 0 0)" });
+      gsap.set(tab, { scaleY: 0, transformOrigin: "50% 0%" });
+      gsap.set(nameEl, { y: 22, opacity: 0 });
+      gsap.set(role, { y: 22, opacity: 0 });
+
+      tl.to(card, { clipPath: "inset(0 0% 0 0)", duration: 0.55, ease: "power3.out" }, 0.1);
+      tl.to(tab, { scaleY: 1, duration: 0.45, ease: "power2.out" }, 0.28);
+      tl.to(nameEl, { y: 0, opacity: 1, duration: 0.5, ease: "power3.out" }, 0.34);
+      tl.to(role, { y: 0, opacity: 1, duration: 0.5, ease: "power3.out" }, 0.44);
+
+      // Exit: settle out, then hard kill the inner element.
+      tl.to(card, { y: 18, opacity: 0, duration: 0.35, ease: "power2.in" }, 4.3);
+      tl.set(card, { visibility: "hidden" }, 4.75);
+
+      window.__timelines["lt-clean-bar"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/lt-color-block/lt-color-block.html b/docs/public/catalog/blocks/lt-color-block/lt-color-block.html
new file mode 100644
index 0000000000..be68219e3b
--- /dev/null
+++ b/docs/public/catalog/blocks/lt-color-block/lt-color-block.html
@@ -0,0 +1,100 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      body {
+        width: 1920px;
+        height: 1080px;
+      }
+
+      #root .lt {
+        position: absolute;
+        left: 120px;
+        bottom: 116px;
+      }
+      #root .lt-block {
+        background: #2756ff;
+        padding: 20px 36px 24px 32px;
+        box-shadow: 0 16px 44px rgba(39, 86, 255, 0.34);
+        display: inline-flex;
+        flex-direction: column;
+        gap: 8px;
+      }
+      #root .lt-name {
+        font-family: "League Gothic", sans-serif;
+        font-size: 84px;
+        font-weight: 400;
+        color: #ffffff;
+        line-height: 0.86;
+        letter-spacing: 0.01em;
+        text-transform: uppercase;
+        white-space: nowrap;
+      }
+      #root .lt-role {
+        font-family: "Space Mono", monospace;
+        font-size: 24px;
+        font-weight: 400;
+        color: rgba(255, 255, 255, 0.86);
+        line-height: 1.2;
+        letter-spacing: 0.05em;
+        white-space: nowrap;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="lt-color-block"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="4.8"
+    >
+      <div id="lt-clip" class="clip" data-start="0" data-duration="4.8" data-track-index="0">
+        <div id="lt" class="lt">
+          <div id="lt-block" class="lt-block">
+            <div id="lt-name" class="lt-name">Dr. Maya Chen</div>
+            <div id="lt-role" class="lt-role">Host · Neuroscientist</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+
+      var wrap = document.getElementById("lt");
+      var block = document.getElementById("lt-block");
+      var nameEl = document.getElementById("lt-name");
+      var role = document.getElementById("lt-role");
+
+      // Color block slides in from the left and overshoots slightly; name and role rise inside it.
+      gsap.set(block, { x: -80, opacity: 0 });
+      gsap.set(nameEl, { y: 24, opacity: 0 });
+      gsap.set(role, { y: 18, opacity: 0 });
+
+      tl.to(block, { x: 0, opacity: 1, duration: 0.5, ease: "back.out(1.4)" }, 0.1);
+      tl.to(nameEl, { y: 0, opacity: 1, duration: 0.42, ease: "power3.out" }, 0.3);
+      tl.to(role, { y: 0, opacity: 1, duration: 0.42, ease: "power3.out" }, 0.4);
+
+      // Exit: slide out left, hard kill.
+      tl.to(block, { x: -60, opacity: 0, duration: 0.35, ease: "power2.in" }, 4.3);
+      tl.set(wrap, { visibility: "hidden" }, 4.75);
+
+      window.__timelines["lt-color-block"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/lt-dark-card/lt-dark-card.html b/docs/public/catalog/blocks/lt-dark-card/lt-dark-card.html
new file mode 100644
index 0000000000..1b9d2e74af
--- /dev/null
+++ b/docs/public/catalog/blocks/lt-dark-card/lt-dark-card.html
@@ -0,0 +1,110 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      body {
+        width: 1920px;
+        height: 1080px;
+        font-family: "Montserrat", sans-serif;
+      }
+
+      #root .lt {
+        position: absolute;
+        left: 120px;
+        bottom: 110px;
+      }
+      #root .lt-card {
+        background: #16181d;
+        border-radius: 14px;
+        padding: 24px 38px 26px 32px;
+        box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4);
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+      }
+      #root .lt-name {
+        font-size: 48px;
+        font-weight: 700;
+        color: #ffffff;
+        line-height: 1.02;
+        letter-spacing: -0.015em;
+        white-space: nowrap;
+      }
+      #root .lt-underline {
+        height: 4px;
+        width: 100%;
+        background: #f5b942;
+        border-radius: 2px;
+        transform-origin: 0% 50%;
+      }
+      #root .lt-role {
+        font-size: 25px;
+        font-weight: 400;
+        color: #aeb6c2;
+        line-height: 1.2;
+        letter-spacing: 0.02em;
+        white-space: nowrap;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="lt-dark-card"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="4.8"
+    >
+      <div id="lt-clip" class="clip" data-start="0" data-duration="4.8" data-track-index="0">
+        <div id="lt" class="lt">
+          <div id="lt-card" class="lt-card">
+            <div id="lt-name" class="lt-name">Dr. Maya Chen</div>
+            <div id="lt-underline" class="lt-underline"></div>
+            <div id="lt-role" class="lt-role">Host · Neuroscientist</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+
+      var wrap = document.getElementById("lt");
+      var card = document.getElementById("lt-card");
+      var nameEl = document.getElementById("lt-name");
+      var underline = document.getElementById("lt-underline");
+      var role = document.getElementById("lt-role");
+
+      // Card slides up from below, name fades, accent underline draws, role fades.
+      gsap.set(card, { y: 60, opacity: 0 });
+      gsap.set(nameEl, { y: 14, opacity: 0 });
+      gsap.set(underline, { scaleX: 0 });
+      gsap.set(role, { opacity: 0 });
+
+      tl.to(card, { y: 0, opacity: 1, duration: 0.5, ease: "power3.out" }, 0.1);
+      tl.to(nameEl, { y: 0, opacity: 1, duration: 0.45, ease: "power3.out" }, 0.26);
+      tl.to(underline, { scaleX: 1, duration: 0.5, ease: "power4.out" }, 0.42);
+      tl.to(role, { opacity: 1, duration: 0.45, ease: "power2.out" }, 0.56);
+
+      // Exit: slide down + hard kill.
+      tl.to(card, { y: 24, opacity: 0, duration: 0.35, ease: "power2.in" }, 4.3);
+      tl.set(wrap, { visibility: "hidden" }, 4.75);
+
+      window.__timelines["lt-dark-card"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/lt-kicker-name/lt-kicker-name.html b/docs/public/catalog/blocks/lt-kicker-name/lt-kicker-name.html
new file mode 100644
index 0000000000..69958af413
--- /dev/null
+++ b/docs/public/catalog/blocks/lt-kicker-name/lt-kicker-name.html
@@ -0,0 +1,113 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      body {
+        width: 1920px;
+        height: 1080px;
+      }
+
+      #root .lt {
+        position: absolute;
+        left: 130px;
+        bottom: 122px;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 14px;
+      }
+      #root .lt-kickwrap {
+        overflow: hidden;
+      }
+      #root .lt-kicker {
+        display: inline-block;
+        font-family: "Space Mono", monospace;
+        font-size: 22px;
+        font-weight: 700;
+        color: #141518;
+        background: #46e5b7;
+        padding: 6px 14px;
+        letter-spacing: 0.1em;
+        text-transform: uppercase;
+        white-space: nowrap;
+      }
+      #root .lt-name {
+        font-family: "Archivo Black", sans-serif;
+        font-size: 70px;
+        font-weight: 400;
+        color: #ffffff;
+        line-height: 0.98;
+        letter-spacing: -0.015em;
+        text-transform: uppercase;
+        white-space: nowrap;
+        text-shadow: 0 2px 22px rgba(0, 0, 0, 0.5);
+      }
+      #root .lt-baseline {
+        height: 5px;
+        width: 100%;
+        background: #46e5b7;
+        border-radius: 3px;
+        transform-origin: 0% 50%;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="lt-kicker-name"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="4.8"
+    >
+      <div id="lt-clip" class="clip" data-start="0" data-duration="4.8" data-track-index="0">
+        <div id="lt" class="lt">
+          <div class="lt-kickwrap">
+            <span id="lt-kicker" class="lt-kicker">Episode 47</span>
+          </div>
+          <div id="lt-name" class="lt-name">Maya Chen</div>
+          <div id="lt-baseline" class="lt-baseline"></div>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+
+      var wrap = document.getElementById("lt");
+      var kicker = document.getElementById("lt-kicker");
+      var nameEl = document.getElementById("lt-name");
+      var baseline = document.getElementById("lt-baseline");
+
+      // Kicker drops in, name slams up, accent baseline draws.
+      gsap.set(kicker, { y: -40 });
+      gsap.set(nameEl, { y: 34, opacity: 0 });
+      gsap.set(baseline, { scaleX: 0 });
+
+      tl.to(kicker, { y: 0, duration: 0.42, ease: "back.out(2)" }, 0.1);
+      tl.to(nameEl, { y: 0, opacity: 1, duration: 0.45, ease: "back.out(1.5)" }, 0.32);
+      tl.to(baseline, { scaleX: 1, duration: 0.5, ease: "power4.out" }, 0.5);
+
+      // Exit: baseline retracts, text lifts, hard kill.
+      tl.to(baseline, { scaleX: 0, duration: 0.3, ease: "power2.in" }, 4.25);
+      tl.to(nameEl, { y: -16, opacity: 0, duration: 0.32, ease: "power2.in" }, 4.3);
+      tl.to(kicker, { y: -40, duration: 0.3, ease: "power2.in" }, 4.32);
+      tl.set(wrap, { visibility: "hidden" }, 4.75);
+
+      window.__timelines["lt-kicker-name"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/lt-mask-reveal/lt-mask-reveal.html b/docs/public/catalog/blocks/lt-mask-reveal/lt-mask-reveal.html
new file mode 100644
index 0000000000..13ce8def3e
--- /dev/null
+++ b/docs/public/catalog/blocks/lt-mask-reveal/lt-mask-reveal.html
@@ -0,0 +1,119 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      body {
+        width: 1920px;
+        height: 1080px;
+        font-family: "Montserrat", sans-serif;
+      }
+
+      #root .lt {
+        position: absolute;
+        left: 130px;
+        bottom: 122px;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 14px;
+      }
+      #root .lt-namewrap {
+        position: relative;
+        overflow: hidden;
+        padding: 2px 0;
+      }
+      #root .lt-name {
+        font-size: 72px;
+        font-weight: 900;
+        color: #ffffff;
+        line-height: 0.98;
+        letter-spacing: -0.02em;
+        white-space: nowrap;
+        text-shadow: 0 2px 22px rgba(0, 0, 0, 0.45);
+        will-change: clip-path;
+      }
+      #root .lt-sweep {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        width: 8px;
+        background: #ffd23f;
+      }
+      #root .lt-role {
+        font-size: 28px;
+        font-weight: 500;
+        color: #e7eaf0;
+        line-height: 1.2;
+        letter-spacing: 0.02em;
+        white-space: nowrap;
+        text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="lt-mask-reveal"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="4.8"
+    >
+      <div id="lt-clip" class="clip" data-start="0" data-duration="4.8" data-track-index="0">
+        <div id="lt" class="lt">
+          <div class="lt-namewrap">
+            <div id="lt-name" class="lt-name">Dr. Maya Chen</div>
+            <div id="lt-sweep" class="lt-sweep"></div>
+          </div>
+          <div id="lt-role" class="lt-role">Host · Neuroscientist</div>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+
+      var wrap = document.getElementById("lt");
+      var nameEl = document.getElementById("lt-name");
+      var sweep = document.getElementById("lt-sweep");
+      var role = document.getElementById("lt-role");
+
+      // An accent sweep crosses left→right; the name is revealed by a clip-path wipe behind it; role fades up.
+      // Sweep travel: left:"100%" was parent-relative (offsetParent = .lt-namewrap). Since the sweep is
+      // only 8px wide, xPercent would travel just 8px, so translate by the container width in pixels instead.
+      // The .lt-namewrap shrink-wraps the name "Dr. Maya Chen" to 536px (no horizontal padding/border, so
+      // clientWidth == content width), which is exactly what left:"100%" resolved to.
+      var SWEEP_TRAVEL = 536;
+      gsap.set(nameEl, { clipPath: "inset(0 100% 0 0)" });
+      gsap.set(sweep, { x: 0, opacity: 0 });
+      gsap.set(role, { y: 14, opacity: 0 });
+
+      tl.to(sweep, { opacity: 1, duration: 0.12, ease: "none" }, 0.1);
+      tl.to(sweep, { x: SWEEP_TRAVEL, duration: 0.55, ease: "power2.inOut" }, 0.12);
+      tl.to(nameEl, { clipPath: "inset(0 0% 0 0)", duration: 0.5, ease: "power2.inOut" }, 0.16);
+      tl.to(sweep, { opacity: 0, duration: 0.15, ease: "none" }, 0.6);
+      tl.to(role, { y: 0, opacity: 1, duration: 0.5, ease: "power3.out" }, 0.55);
+
+      // Exit: name un-wipes, role fades, hard kill.
+      tl.to(role, { opacity: 0, duration: 0.3, ease: "power2.in" }, 4.25);
+      tl.to(nameEl, { clipPath: "inset(0 0 0 100%)", duration: 0.4, ease: "power2.in" }, 4.3);
+      tl.set(wrap, { visibility: "hidden" }, 4.75);
+
+      window.__timelines["lt-mask-reveal"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/lt-neon-border/__hf-variables-preview.html b/docs/public/catalog/blocks/lt-neon-border/__hf-variables-preview.html
new file mode 100644
index 0000000000..2988f1a3cc
--- /dev/null
+++ b/docs/public/catalog/blocks/lt-neon-border/__hf-variables-preview.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Neon Border variables preview</title>
+    <style>
+      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: transparent; }
+      #hf-vars-root { position: relative; width: 1920px; height: 1080px; }
+      #hf-vars-mount { position: absolute; inset: 0; display: grid; place-items: center; }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  </head>
+  <body>
+    <div id="hf-vars-root" data-composition-id="lt-neon-border-variables-preview" data-start="0" data-width="1920" data-height="1080" data-duration="4.8" data-fps="30">
+      <div id="hf-vars-mount" class="clip" data-composition-id="lt-neon-border" data-composition-src="./lt-neon-border.html" data-start="0" data-duration="4.8" data-track-index="0" data-width="1920" data-height="1080"></div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["lt-neon-border-variables-preview"] = gsap.timeline({ paused: true });
+    </script>
+<script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "lt-neon-border.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/lt-neon-border/lt-neon-border.html b/docs/public/catalog/blocks/lt-neon-border/lt-neon-border.html
new file mode 100644
index 0000000000..4aa34fbd43
--- /dev/null
+++ b/docs/public/catalog/blocks/lt-neon-border/lt-neon-border.html
@@ -0,0 +1,406 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      body {
+        width: 1920px;
+        height: 1080px;
+        font-family: "Inter", sans-serif;
+      }
+
+      #root .nb-wrap {
+        position: absolute;
+        left: 50px;
+        bottom: 56px;
+        width: 1120px;
+        height: 510px;
+      }
+      #root .nb-svg {
+        position: absolute;
+        inset: 0;
+        display: block;
+      }
+      /* The frame's inner box, inset by the bloom padding so the copy lands
+         inside the traced rectangle. */
+      #root .nb-panel {
+        position: absolute;
+        left: 150px;
+        top: 150px;
+        width: 820px;
+        height: 210px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        gap: 14px;
+        padding: 0 52px;
+      }
+      #root .nb-name {
+        display: block;
+        font-size: 54px;
+        font-weight: 700;
+        color: #ffffff;
+        line-height: 1;
+        letter-spacing: -0.015em;
+        white-space: nowrap;
+        text-shadow: 0 2px 20px rgba(0, 0, 0, 0.75);
+      }
+      #root .nb-role {
+        display: block;
+        font-size: 25px;
+        font-weight: 400;
+        color: #d5dae3;
+        line-height: 1.2;
+        letter-spacing: 0.06em;
+        text-transform: uppercase;
+        white-space: nowrap;
+        text-shadow: 0 2px 16px rgba(0, 0, 0, 0.75);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="lt-neon-border"
+      data-composition-variables='[
+        {"id":"name","type":"string","label":"Name","default":"Dr. Maya Chen"},
+        {"id":"role","type":"string","label":"Role","default":"Host · Neuroscientist"},
+        {"id":"accent","type":"color","label":"Accent","default":"#cc9149"},
+        {"id":"movement","type":"enum","label":"Movement","default":"step","options":[{"value":"step","label":"Step (snap at corners)"},{"value":"glide","label":"Glide (smooth)"}]},
+        {"id":"speed","type":"number","label":"Speed","default":1.6,"min":0.2,"max":6,"step":0.1,"unit":"corners/s"},
+        {"id":"cornerRadius","type":"number","label":"Corner radius","default":26,"min":0,"max":90,"step":1,"unit":"px"},
+        {"id":"thickness","type":"number","label":"Thickness","default":5,"min":1,"max":16,"step":1,"unit":"px"},
+        {"id":"arcLength","type":"number","label":"Arc length","default":22,"min":5,"max":100,"step":1,"unit":"%"},
+        {"id":"glow","type":"number","label":"Glow","default":1,"min":0,"max":2,"step":0.05,"unit":"x"}
+      ]'
+      data-start="0"
+      data-duration="4.8"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="nb-clip" class="clip" data-start="0" data-duration="4.8" data-track-index="0">
+        <div id="nb-wrap" class="nb-wrap">
+          <svg
+            id="nb-svg"
+            class="nb-svg"
+            width="1120"
+            height="510"
+            viewBox="0 0 1120 510"
+            fill="none"
+            aria-hidden="true"
+          >
+            <defs>
+              <g id="nb-seg-a-glow"></g>
+              <g id="nb-seg-a-core"></g>
+              <g id="nb-seg-b-glow"></g>
+              <g id="nb-seg-b-core"></g>
+            </defs>
+            <g transform="translate(150,150)">
+              <!-- Wide bloom sits UNDER the panel so the halo reads outside the
+                   frame and the interior stays hardware-clean. -->
+              <g id="nb-bloom-under"></g>
+              <path id="nb-fill" d="" fill="rgba(9,11,15,0.78)" />
+              <path id="nb-rail" d="" fill="none" stroke-linejoin="round" />
+              <g id="nb-bloom-over"></g>
+            </g>
+          </svg>
+          <div id="nb-panel" class="nb-panel">
+            <span id="nb-name" class="nb-name" data-var-text="name">Dr. Maya Chen</span>
+            <span id="nb-role" class="nb-role" data-var-text="role">Host · Neuroscientist</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        var SVG_NS = "http://www.w3.org/2000/svg";
+        var W = 820; // traced rectangle width
+        var H = 210; // traced rectangle height
+        var DUR = 4.8;
+
+        var vars =
+          window.__hyperframes && window.__hyperframes.getVariables
+            ? window.__hyperframes.getVariables()
+            : {};
+
+        function num(v, fallback) {
+          var n = typeof v === "number" ? v : parseFloat(v);
+          return isFinite(n) ? n : fallback;
+        }
+
+        var accent = /^#[0-9a-fA-F]{6}$/.test(String(vars.accent))
+          ? String(vars.accent)
+          : "#cc9149";
+        var mode = vars.movement === "glide" ? "glide" : "step";
+        var speed = Math.max(0.05, num(vars.speed, 1.6)); // corners per second
+        var radius = Math.min(Math.min(W, H) / 2, Math.max(0, num(vars.cornerRadius, 26)));
+        var thickness = Math.max(0.5, num(vars.thickness, 5));
+        var arcFrac = Math.min(1, Math.max(0.02, num(vars.arcLength, 22) / 100));
+        var glow = Math.max(0, num(vars.glow, 1));
+
+        // Hot core: the accent lifted most of the way to white, the way a real
+        // filament reads brighter than its halo.
+        function towardWhite(hex, amount) {
+          var v = parseInt(hex.slice(1), 16);
+          var out = "#";
+          for (var s = 16; s >= 0; s -= 8) {
+            var c = (v >> s) & 255;
+            var m = Math.round(c + (255 - c) * amount);
+            out += (m < 16 ? "0" : "") + m.toString(16);
+          }
+          return out;
+        }
+        var hot = towardWhite(accent, 0.78);
+
+        // ---- geometry -------------------------------------------------------
+        // Rounded rect, clockwise, starting where the top edge leaves the
+        // top-left corner arc.
+        var r = radius;
+        var arc = "A " + r + " " + r + " 0 0 1 ";
+        var d = [
+          "M " + r + " 0",
+          "H " + (W - r),
+          arc + W + " " + r,
+          "V " + (H - r),
+          arc + (W - r) + " " + H,
+          "H " + r,
+          arc + "0 " + (H - r),
+          "V " + r,
+          arc + r + " 0",
+          "Z",
+        ].join(" ");
+
+        var fillEl = document.getElementById("nb-fill");
+        var railEl = document.getElementById("nb-rail");
+        fillEl.setAttribute("d", d);
+        railEl.setAttribute("d", d);
+        railEl.setAttribute("stroke", accent);
+        railEl.setAttribute("stroke-width", String(thickness));
+        railEl.setAttribute("stroke-opacity", "0.14");
+
+        // Analytic perimeter, then rescaled to whatever length the renderer
+        // actually measures for the path so dash distances line up exactly.
+        var SW = W - 2 * r; // straight run, horizontal
+        var SH = H - 2 * r; // straight run, vertical
+        var AC = (Math.PI * r) / 2; // one corner arc
+        var P_ANALYTIC = 2 * SW + 2 * SH + 4 * AC;
+        var P = railEl.getTotalLength() || P_ANALYTIC;
+        var K = P / P_ANALYTIC;
+
+        // Distance along the path of the MIDPOINT of each corner arc, so the
+        // light parks centred on the corner rather than skidding past it.
+        var CORNERS = [
+          (SW + AC / 2) * K, // top-right
+          (SW + SH + 1.5 * AC) * K, // bottom-right
+          (2 * SW + SH + 2.5 * AC) * K, // bottom-left
+          (2 * SW + 2 * SH + 3.5 * AC) * K, // top-left
+        ];
+
+        /** Absolute path distance of corner k, for any integer k (k may be
+         * negative or beyond one lap). Pure function of k — no accumulator. */
+        function cornerPos(k) {
+          var lap = Math.floor(k / 4);
+          var i = k - lap * 4;
+          return CORNERS[i] + lap * P;
+        }
+
+        // ---- easing ---------------------------------------------------------
+        // The step curve overshoots (y2 = 1.05); that overshoot IS the snap.
+        function cubicBezier(x1, y1, x2, y2) {
+          function axis(t, a, b) {
+            var u = 1 - t;
+            return 3 * u * u * t * a + 3 * u * t * t * b + t * t * t;
+          }
+          return function (x) {
+            if (x <= 0) return 0;
+            if (x >= 1) return 1;
+            var lo = 0;
+            var hi = 1;
+            var t = x;
+            // Fixed iteration count: same input, same output, every run.
+            for (var i = 0; i < 32; i++) {
+              t = (lo + hi) / 2;
+              if (axis(t, x1, x2) < x) lo = t;
+              else hi = t;
+            }
+            return axis(t, y1, y2);
+          };
+        }
+        var ease =
+          mode === "glide" ? cubicBezier(0.65, 0, 0.35, 1) : cubicBezier(0.72, 0.16, 0.18, 1.05);
+
+        var beat = 1 / speed; // seconds per corner hop
+
+        /** Head position (path distance) at time t. floor/frac of t/beat is the
+         * closed form of the reference's `stepT += dt` accumulator. */
+        function headAt(t) {
+          var total = t / beat;
+          var k = Math.floor(total);
+          var u = total - k;
+          var a = cornerPos(k);
+          var b = cornerPos(k + 1);
+          return a + (b - a) * ease(u);
+        }
+
+        // ---- arc construction ----------------------------------------------
+        // Each arc is a run of abutting dash segments whose opacity falls off
+        // behind the head; that ramp is the taper. Geometry lives once in
+        // <defs> and is shared by every bloom layer through <use>.
+        function buildSegments(groupId, count, falloff) {
+          var g = document.getElementById(groupId);
+          var segs = [];
+          for (var i = 0; i < count; i++) {
+            var p = document.createElementNS(SVG_NS, "path");
+            p.setAttribute("d", d);
+            p.setAttribute("fill", "none");
+            p.setAttribute("stroke-linecap", i === 0 ? "round" : "butt");
+            p.setAttribute("opacity", String(Math.pow(1 - i / count, falloff)));
+            g.appendChild(p);
+            segs.push(p);
+          }
+          return segs;
+        }
+
+        var GLOW_SEGS = 20;
+        var CORE_SEGS = 26;
+        var glowLen = arcFrac * P;
+        var coreLen = 0.34 * glowLen;
+
+        var arcs = [
+          {
+            offset: 0,
+            glow: buildSegments("nb-seg-a-glow", GLOW_SEGS, 2.6),
+            core: buildSegments("nb-seg-a-core", CORE_SEGS, 1.4),
+          },
+          {
+            // Half a lap behind: the diametrically opposite corner. The pairing
+            // is most of why the effect reads as designed rather than random.
+            offset: 2,
+            glow: buildSegments("nb-seg-b-glow", GLOW_SEGS, 2.6),
+            core: buildSegments("nb-seg-b-core", CORE_SEGS, 1.4),
+          },
+        ];
+
+        // Three stacked bloom layers (soft / medium / wide) plus the filament.
+        // `spread` widens the stroke before it is blurred — that pairing, not
+        // the blur alone, is what makes the halo read as emitted light.
+        var MAX_REACH = 36;
+        var LAYERS = [
+          { blur: 30, spread: 1, opacity: 0.18, stroke: accent, deep: true },
+          { blur: 15, spread: 0.6, opacity: 0.3, stroke: accent, deep: true },
+          { blur: 8, spread: 0.3, opacity: 0.5, stroke: accent, deep: true },
+          { blur: 4, spread: 0.05, opacity: 0.9, stroke: hot, core: true },
+          { blur: 0, spread: -0.012, opacity: 1, stroke: "#ffffff", core: true },
+        ];
+
+        var under = document.getElementById("nb-bloom-under");
+        var over = document.getElementById("nb-bloom-over");
+        ["a", "b"].forEach(function (tag) {
+          LAYERS.forEach(function (layer) {
+            var u = document.createElementNS(SVG_NS, "use");
+            u.setAttribute("href", "#nb-seg-" + tag + "-" + (layer.core ? "core" : "glow"));
+            u.setAttribute("stroke", layer.stroke);
+            u.setAttribute(
+              "stroke-width",
+              String(Math.max(0.5, thickness + 2 * layer.spread * MAX_REACH * glow)),
+            );
+            u.setAttribute("opacity", String(Math.min(1, layer.opacity * glow)));
+            if (layer.blur > 0) u.style.filter = "blur(" + layer.blur + "px)";
+            (layer.deep ? under : over).appendChild(u);
+          });
+        });
+
+        /** Lay a segment run out behind `head`. Every value derives from head. */
+        function layout(segs, head, length) {
+          var step = length / segs.length;
+          for (var i = 0; i < segs.length; i++) {
+            var start = head - (i + 1) * step;
+            start = ((start % P) + P) % P;
+            segs[i].setAttribute("stroke-dasharray", step + " " + (P - step));
+            segs[i].setAttribute("stroke-dashoffset", String(-start));
+          }
+        }
+
+        function render(t) {
+          for (var i = 0; i < arcs.length; i++) {
+            var head = headAt(t + arcs[i].offset * beat);
+            layout(arcs[i].glow, head, glowLen);
+            layout(arcs[i].core, head, coreLen);
+          }
+        }
+
+        // ---- timeline -------------------------------------------------------
+        var wrap = document.getElementById("nb-wrap");
+        var panel = document.getElementById("nb-panel");
+        var nameEl = document.getElementById("nb-name");
+        var roleEl = document.getElementById("nb-role");
+
+        var tl = gsap.timeline({ paused: true });
+
+        gsap.set(wrap, { opacity: 0, scale: 0.965, transformOrigin: "0% 100%" });
+        gsap.set(nameEl, { y: 18, opacity: 0 });
+        gsap.set(roleEl, { y: 12, opacity: 0 });
+
+        // The driver: linear, spans the whole clip, and every arc position is
+        // recomputed from its own time value. Seeking to frame N gives the same
+        // state as playing to frame N because nothing carries over.
+        var driver = { t: 0 };
+        tl.to(
+          driver,
+          {
+            t: DUR,
+            duration: DUR,
+            ease: "none",
+            onUpdate: function () {
+              render(driver.t);
+            },
+          },
+          0,
+        );
+
+        tl.to(wrap, { opacity: 1, scale: 1, duration: 0.55, ease: "power3.out" }, 0.08);
+        tl.to(nameEl, { y: 0, opacity: 1, duration: 0.5, ease: "power3.out" }, 0.3);
+        tl.to(roleEl, { y: 0, opacity: 1, duration: 0.5, ease: "power3.out" }, 0.44);
+
+        tl.to(roleEl, { y: -10, opacity: 0, duration: 0.3, ease: "power2.in" }, 4.24);
+        tl.to(nameEl, { y: -14, opacity: 0, duration: 0.32, ease: "power2.in" }, 4.3);
+        tl.to(wrap, { opacity: 0, scale: 0.985, duration: 0.36, ease: "power2.in" }, 4.36);
+        tl.set(panel, { visibility: "hidden" }, 4.76);
+
+        render(0);
+
+        window.__timelines["lt-neon-border"] = tl;
+      })();
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "lt-neon-border.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/blocks/lt-side-rule/lt-side-rule.html b/docs/public/catalog/blocks/lt-side-rule/lt-side-rule.html
new file mode 100644
index 0000000000..4f62f4a4f2
--- /dev/null
+++ b/docs/public/catalog/blocks/lt-side-rule/lt-side-rule.html
@@ -0,0 +1,113 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      body {
+        width: 1920px;
+        height: 1080px;
+      }
+
+      #root .lt {
+        position: absolute;
+        left: 130px;
+        bottom: 120px;
+        display: flex;
+        align-items: stretch;
+        gap: 26px;
+      }
+      #root .lt-bar {
+        width: 8px;
+        background: #46e5b7;
+        border-radius: 4px;
+        transform-origin: 50% 0%;
+        flex-shrink: 0;
+      }
+      #root .lt-text {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        gap: 12px;
+      }
+      #root .lt-name {
+        font-family: "League Gothic", sans-serif;
+        font-size: 92px;
+        font-weight: 400;
+        color: #ffffff;
+        line-height: 0.86;
+        letter-spacing: 0.01em;
+        text-transform: uppercase;
+        white-space: nowrap;
+        text-shadow: 0 2px 22px rgba(0, 0, 0, 0.5);
+      }
+      #root .lt-role {
+        font-family: "JetBrains Mono", monospace;
+        font-size: 26px;
+        font-weight: 400;
+        color: #e7eaf0;
+        line-height: 1.2;
+        letter-spacing: 0.04em;
+        white-space: nowrap;
+        text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="lt-side-rule"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="4.8"
+    >
+      <div id="lt-clip" class="clip" data-start="0" data-duration="4.8" data-track-index="0">
+        <div id="lt" class="lt">
+          <div id="lt-bar" class="lt-bar"></div>
+          <div class="lt-text">
+            <div id="lt-name" class="lt-name">Dr. Maya Chen</div>
+            <div id="lt-role" class="lt-role">Host · Neuroscientist</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+
+      var wrap = document.getElementById("lt");
+      var bar = document.getElementById("lt-bar");
+      var nameEl = document.getElementById("lt-name");
+      var role = document.getElementById("lt-role");
+
+      // Vertical accent bar draws top→down, name and role slide in from the left.
+      gsap.set(bar, { scaleY: 0 });
+      gsap.set(nameEl, { x: -24, opacity: 0 });
+      gsap.set(role, { x: -24, opacity: 0 });
+
+      tl.to(bar, { scaleY: 1, duration: 0.5, ease: "power3.out" }, 0.1);
+      tl.to(nameEl, { x: 0, opacity: 1, duration: 0.5, ease: "power3.out" }, 0.26);
+      tl.to(role, { x: 0, opacity: 1, duration: 0.5, ease: "power3.out" }, 0.38);
+
+      // Exit: bar retracts, text lifts, hard kill.
+      tl.to(role, { opacity: 0, duration: 0.3, ease: "power2.in" }, 4.25);
+      tl.to(nameEl, { y: -14, opacity: 0, duration: 0.32, ease: "power2.in" }, 4.3);
+      tl.to(bar, { scaleY: 0, duration: 0.32, ease: "power2.in" }, 4.32);
+      tl.set(wrap, { visibility: "hidden" }, 4.75);
+
+      window.__timelines["lt-side-rule"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/lt-soft-pill/lt-soft-pill.html b/docs/public/catalog/blocks/lt-soft-pill/lt-soft-pill.html
new file mode 100644
index 0000000000..940a13f096
--- /dev/null
+++ b/docs/public/catalog/blocks/lt-soft-pill/lt-soft-pill.html
@@ -0,0 +1,118 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      body {
+        width: 1920px;
+        height: 1080px;
+        font-family: "Montserrat", sans-serif;
+      }
+
+      #root .lt {
+        position: absolute;
+        left: 120px;
+        bottom: 120px;
+      }
+      #root .lt-pill {
+        display: flex;
+        align-items: center;
+        gap: 22px;
+        background: #ffffff;
+        border-radius: 999px;
+        padding: 20px 40px 20px 26px;
+        box-shadow: 0 16px 46px rgba(15, 17, 21, 0.2);
+        transform-origin: 0% 100%;
+        will-change: transform;
+      }
+      #root .lt-dot {
+        width: 18px;
+        height: 18px;
+        border-radius: 50%;
+        background: #ff5a36;
+        flex-shrink: 0;
+      }
+      #root .lt-text {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+      }
+      #root .lt-name {
+        font-size: 46px;
+        font-weight: 700;
+        color: #0f1115;
+        line-height: 1.04;
+        letter-spacing: -0.015em;
+        white-space: nowrap;
+      }
+      #root .lt-role {
+        font-size: 25px;
+        font-weight: 400;
+        color: #5a6170;
+        line-height: 1.2;
+        letter-spacing: 0.01em;
+        white-space: nowrap;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="lt-soft-pill"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="4.8"
+    >
+      <div id="lt-clip" class="clip" data-start="0" data-duration="4.8" data-track-index="0">
+        <div id="lt" class="lt">
+          <div id="lt-pill" class="lt-pill">
+            <div id="lt-dot" class="lt-dot"></div>
+            <div class="lt-text">
+              <div id="lt-name" class="lt-name">Dr. Maya Chen</div>
+              <div id="lt-role" class="lt-role">Host · Neuroscientist</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+
+      var wrap = document.getElementById("lt");
+      var pill = document.getElementById("lt-pill");
+      var dot = document.getElementById("lt-dot");
+      var nameEl = document.getElementById("lt-name");
+      var role = document.getElementById("lt-role");
+
+      // Pill scales up from the lower-left anchor, dot pulses in, text settles.
+      gsap.set(pill, { scale: 0.88, y: 18, opacity: 0 });
+      gsap.set(dot, { scale: 0 });
+      gsap.set([nameEl, role], { opacity: 0, x: -10 });
+
+      tl.to(pill, { scale: 1, y: 0, opacity: 1, duration: 0.55, ease: "back.out(1.7)" }, 0.1);
+      tl.to(dot, { scale: 1, duration: 0.4, ease: "back.out(3)" }, 0.4);
+      tl.to(nameEl, { opacity: 1, x: 0, duration: 0.45, ease: "power3.out" }, 0.42);
+      tl.to(role, { opacity: 1, x: 0, duration: 0.45, ease: "power3.out" }, 0.5);
+
+      // Exit: settle down + hard kill.
+      tl.to(pill, { scale: 0.94, y: 14, opacity: 0, duration: 0.35, ease: "power2.in" }, 4.3);
+      tl.set(wrap, { visibility: "hidden" }, 4.75);
+
+      window.__timelines["lt-soft-pill"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/lt-stack-bars/lt-stack-bars.html b/docs/public/catalog/blocks/lt-stack-bars/lt-stack-bars.html
new file mode 100644
index 0000000000..c5ac05d409
--- /dev/null
+++ b/docs/public/catalog/blocks/lt-stack-bars/lt-stack-bars.html
@@ -0,0 +1,108 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      body {
+        width: 1920px;
+        height: 1080px;
+      }
+
+      #root .lt {
+        position: absolute;
+        left: 120px;
+        bottom: 116px;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 8px;
+      }
+      #root .lt-namebar {
+        background: #141518;
+        padding: 14px 30px;
+        will-change: clip-path;
+      }
+      #root .lt-name {
+        font-family: "Archivo Black", sans-serif;
+        font-size: 52px;
+        font-weight: 400;
+        color: #ffffff;
+        line-height: 1;
+        letter-spacing: -0.015em;
+        text-transform: uppercase;
+        white-space: nowrap;
+      }
+      #root .lt-rolebar {
+        background: #ffd23f;
+        padding: 9px 22px;
+        margin-left: 14px;
+        will-change: clip-path;
+      }
+      #root .lt-role {
+        font-family: "Space Mono", monospace;
+        font-size: 23px;
+        font-weight: 700;
+        color: #141518;
+        line-height: 1;
+        letter-spacing: 0.06em;
+        text-transform: uppercase;
+        white-space: nowrap;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="lt-stack-bars"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="4.8"
+    >
+      <div id="lt-clip" class="clip" data-start="0" data-duration="4.8" data-track-index="0">
+        <div id="lt" class="lt">
+          <div id="lt-namebar" class="lt-namebar">
+            <div id="lt-name" class="lt-name">Maya Chen</div>
+          </div>
+          <div id="lt-rolebar" class="lt-rolebar">
+            <div id="lt-role" class="lt-role">Host · Neuroscientist</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+
+      var wrap = document.getElementById("lt");
+      var namebar = document.getElementById("lt-namebar");
+      var rolebar = document.getElementById("lt-rolebar");
+
+      // Name bar wipes in from the left; role bar wipes in from the right (opposing).
+      gsap.set(namebar, { clipPath: "inset(0 100% 0 0)" });
+      gsap.set(rolebar, { clipPath: "inset(0 0 0 100%)" });
+
+      tl.to(namebar, { clipPath: "inset(0 0% 0 0)", duration: 0.5, ease: "power4.out" }, 0.1);
+      tl.to(rolebar, { clipPath: "inset(0 0% 0 0%)", duration: 0.5, ease: "power4.out" }, 0.34);
+
+      // Exit: both wipe back out, hard kill.
+      tl.to(rolebar, { clipPath: "inset(0 0 0 100%)", duration: 0.32, ease: "power3.in" }, 4.25);
+      tl.to(namebar, { clipPath: "inset(0 100% 0 0)", duration: 0.36, ease: "power3.in" }, 4.32);
+      tl.set(wrap, { visibility: "hidden" }, 4.75);
+
+      window.__timelines["lt-stack-bars"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/macos-notification/macos-notification.html b/docs/public/catalog/blocks/macos-notification/macos-notification.html
new file mode 100644
index 0000000000..db499016d0
--- /dev/null
+++ b/docs/public/catalog/blocks/macos-notification/macos-notification.html
@@ -0,0 +1,201 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=block"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      body {
+        width: 1920px;
+        height: 1080px;
+        font-family: "Inter", sans-serif;
+      }
+
+      [data-composition-id="macos-notification"] .notification-card {
+        position: absolute;
+        top: 24px;
+        right: 24px;
+        width: 380px;
+        background: rgba(30, 30, 30, 0.82);
+        backdrop-filter: blur(40px);
+        -webkit-backdrop-filter: blur(40px);
+        border-radius: 16px;
+        padding: 16px;
+        box-shadow:
+          0 8px 32px rgba(0, 0, 0, 0.4),
+          inset 0 0 0 0.5px rgba(255, 255, 255, 0.1);
+        display: flex;
+        gap: 12px;
+        align-items: flex-start;
+      }
+
+      [data-composition-id="macos-notification"] .app-icon {
+        width: 36px;
+        height: 36px;
+        border-radius: 8px;
+        flex-shrink: 0;
+        overflow: hidden;
+      }
+
+      [data-composition-id="macos-notification"] .app-icon svg {
+        width: 36px;
+        height: 36px;
+        display: block;
+      }
+
+      [data-composition-id="macos-notification"] .notification-content {
+        flex: 1;
+        min-width: 0;
+      }
+
+      [data-composition-id="macos-notification"] .notification-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 2px;
+      }
+
+      [data-composition-id="macos-notification"] .app-name {
+        font-size: 13px;
+        font-weight: 600;
+        color: rgba(255, 255, 255, 0.5);
+        text-transform: uppercase;
+        letter-spacing: 0.02em;
+      }
+
+      [data-composition-id="macos-notification"] .time-label {
+        font-size: 13px;
+        font-weight: 400;
+        color: rgba(255, 255, 255, 0.35);
+      }
+
+      [data-composition-id="macos-notification"] .notification-title {
+        font-size: 15px;
+        font-weight: 600;
+        color: #ffffff;
+        line-height: 1.3;
+        margin-bottom: 2px;
+      }
+
+      [data-composition-id="macos-notification"] .notification-body {
+        font-size: 13px;
+        font-weight: 400;
+        color: rgba(255, 255, 255, 0.6);
+        line-height: 1.35;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="macos-notification"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="5"
+    >
+      <div
+        id="notification"
+        class="clip notification-card"
+        data-start="0"
+        data-duration="5"
+        data-track-index="0"
+      >
+        <div class="app-icon">
+          <svg viewBox="0 0 36 36" fill="none">
+            <defs>
+              <linearGradient
+                id="icon-grad"
+                x1="0"
+                y1="0"
+                x2="36"
+                y2="36"
+                gradientUnits="userSpaceOnUse"
+              >
+                <stop offset="0%" stop-color="#6366f1" />
+                <stop offset="100%" stop-color="#8b5cf6" />
+              </linearGradient>
+            </defs>
+            <rect width="36" height="36" rx="8" fill="url(#icon-grad)" />
+            <text
+              x="18"
+              y="23"
+              text-anchor="middle"
+              font-family="Inter, sans-serif"
+              font-size="14"
+              font-weight="700"
+              fill="#fff"
+            >
+              HF
+            </text>
+          </svg>
+        </div>
+        <div class="notification-content">
+          <div class="notification-header">
+            <span class="app-name">HyperFrames</span>
+            <span class="time-label">now</span>
+          </div>
+          <div class="notification-title">Prompt to replace this title</div>
+          <div class="notification-body">
+            Prompt to change this body text, the app icon, and the app name to match your content.
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      var tl = gsap.timeline({ paused: true });
+      var notification = document.getElementById("notification");
+
+      // Start off-screen to the right
+      gsap.set(notification, { x: 420, opacity: 0 });
+
+      // Slide in from right
+      tl.to(
+        notification,
+        {
+          x: 0,
+          opacity: 1,
+          duration: 0.5,
+          ease: "power3.out",
+        },
+        0.2,
+      );
+
+      // Slide out to right
+      tl.to(
+        notification,
+        {
+          x: 420,
+          opacity: 0,
+          duration: 0.3,
+          ease: "power3.in",
+        },
+        4.2,
+      );
+
+      window.__timelines["macos-notification"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/macos-tahoe-liquid-glass/assets/icons/brave.jpg b/docs/public/catalog/blocks/macos-tahoe-liquid-glass/assets/icons/brave.jpg
new file mode 100644
index 0000000000..4735f43773
Binary files /dev/null and b/docs/public/catalog/blocks/macos-tahoe-liquid-glass/assets/icons/brave.jpg differ
diff --git a/docs/public/catalog/blocks/macos-tahoe-liquid-glass/assets/icons/calendar.jpg b/docs/public/catalog/blocks/macos-tahoe-liquid-glass/assets/icons/calendar.jpg
new file mode 100644
index 0000000000..8d2571c5ad
Binary files /dev/null and b/docs/public/catalog/blocks/macos-tahoe-liquid-glass/assets/icons/calendar.jpg differ
diff --git a/docs/public/catalog/blocks/macos-tahoe-liquid-glass/assets/icons/dock-finder.png b/docs/public/catalog/blocks/macos-tahoe-liquid-glass/assets/icons/dock-finder.png
new file mode 100644
index 0000000000..2cff579e61
Binary files /dev/null and b/docs/public/catalog/blocks/macos-tahoe-liquid-glass/assets/icons/dock-finder.png differ
diff --git a/docs/public/catalog/blocks/macos-tahoe-liquid-glass/assets/icons/dock-mail.jpg b/docs/public/catalog/blocks/macos-tahoe-liquid-glass/assets/icons/dock-mail.jpg
new file mode 100644
index 0000000000..a6d9ae080b
Binary files /dev/null and b/docs/public/catalog/blocks/macos-tahoe-liquid-glass/assets/icons/dock-mail.jpg differ
diff --git a/docs/public/catalog/blocks/macos-tahoe-liquid-glass/assets/icons/dock-music.jpg b/docs/public/catalog/blocks/macos-tahoe-liquid-glass/assets/icons/dock-music.jpg
new file mode 100644
index 0000000000..ea48e518c6
Binary files /dev/null and b/docs/public/catalog/blocks/macos-tahoe-liquid-glass/assets/icons/dock-music.jpg differ
diff --git a/docs/public/catalog/blocks/macos-tahoe-liquid-glass/assets/icons/dock-photos.jpg b/docs/public/catalog/blocks/macos-tahoe-liquid-glass/assets/icons/dock-photos.jpg
new file mode 100644
index 0000000000..994653ef38
Binary files /dev/null and b/docs/public/catalog/blocks/macos-tahoe-liquid-glass/assets/icons/dock-photos.jpg differ
diff --git a/docs/public/catalog/blocks/macos-tahoe-liquid-glass/assets/icons/dock-safari.jpg b/docs/public/catalog/blocks/macos-tahoe-liquid-glass/assets/icons/dock-safari.jpg
new file mode 100644
index 0000000000..0d1c628ac7
Binary files /dev/null and b/docs/public/catalog/blocks/macos-tahoe-liquid-glass/assets/icons/dock-safari.jpg differ
diff --git a/docs/public/catalog/blocks/macos-tahoe-liquid-glass/assets/icons/files.jpg b/docs/public/catalog/blocks/macos-tahoe-liquid-glass/assets/icons/files.jpg
new file mode 100644
index 0000000000..3fe8efcde5
Binary files /dev/null and b/docs/public/catalog/blocks/macos-tahoe-liquid-glass/assets/icons/files.jpg differ
diff --git a/docs/public/catalog/blocks/macos-tahoe-liquid-glass/assets/icons/finder.png b/docs/public/catalog/blocks/macos-tahoe-liquid-glass/assets/icons/finder.png
new file mode 100644
index 0000000000..2cff579e61
Binary files /dev/null and b/docs/public/catalog/blocks/macos-tahoe-liquid-glass/assets/icons/finder.png differ
diff --git a/docs/public/catalog/blocks/macos-tahoe-liquid-glass/assets/icons/mail.jpg b/docs/public/catalog/blocks/macos-tahoe-liquid-glass/assets/icons/mail.jpg
new file mode 100644
index 0000000000..a6d9ae080b
Binary files /dev/null and b/docs/public/catalog/blocks/macos-tahoe-liquid-glass/assets/icons/mail.jpg differ
diff --git a/docs/public/catalog/blocks/macos-tahoe-liquid-glass/assets/icons/messages.jpg b/docs/public/catalog/blocks/macos-tahoe-liquid-glass/assets/icons/messages.jpg
new file mode 100644
index 0000000000..bfd11fcaaa
Binary files /dev/null and b/docs/public/catalog/blocks/macos-tahoe-liquid-glass/assets/icons/messages.jpg differ
diff --git a/docs/public/catalog/blocks/macos-tahoe-liquid-glass/assets/icons/music.jpg b/docs/public/catalog/blocks/macos-tahoe-liquid-glass/assets/icons/music.jpg
new file mode 100644
index 0000000000..ea48e518c6
Binary files /dev/null and b/docs/public/catalog/blocks/macos-tahoe-liquid-glass/assets/icons/music.jpg differ
diff --git a/docs/public/catalog/blocks/macos-tahoe-liquid-glass/assets/icons/photos.jpg b/docs/public/catalog/blocks/macos-tahoe-liquid-glass/assets/icons/photos.jpg
new file mode 100644
index 0000000000..994653ef38
Binary files /dev/null and b/docs/public/catalog/blocks/macos-tahoe-liquid-glass/assets/icons/photos.jpg differ
diff --git a/docs/public/catalog/blocks/macos-tahoe-liquid-glass/assets/icons/safari.jpg b/docs/public/catalog/blocks/macos-tahoe-liquid-glass/assets/icons/safari.jpg
new file mode 100644
index 0000000000..0d1c628ac7
Binary files /dev/null and b/docs/public/catalog/blocks/macos-tahoe-liquid-glass/assets/icons/safari.jpg differ
diff --git a/docs/public/catalog/blocks/macos-tahoe-liquid-glass/assets/icons/slack.jpg b/docs/public/catalog/blocks/macos-tahoe-liquid-glass/assets/icons/slack.jpg
new file mode 100644
index 0000000000..92116c7f80
Binary files /dev/null and b/docs/public/catalog/blocks/macos-tahoe-liquid-glass/assets/icons/slack.jpg differ
diff --git a/docs/public/catalog/blocks/macos-tahoe-liquid-glass/assets/icons/toast-messages.jpg b/docs/public/catalog/blocks/macos-tahoe-liquid-glass/assets/icons/toast-messages.jpg
new file mode 100644
index 0000000000..bfd11fcaaa
Binary files /dev/null and b/docs/public/catalog/blocks/macos-tahoe-liquid-glass/assets/icons/toast-messages.jpg differ
diff --git a/docs/public/catalog/blocks/macos-tahoe-liquid-glass/assets/wallpapers/golden-gate-bridge-san-francisco-5k-0g.jpg b/docs/public/catalog/blocks/macos-tahoe-liquid-glass/assets/wallpapers/golden-gate-bridge-san-francisco-5k-0g.jpg
new file mode 100644
index 0000000000..2aac50833d
Binary files /dev/null and b/docs/public/catalog/blocks/macos-tahoe-liquid-glass/assets/wallpapers/golden-gate-bridge-san-francisco-5k-0g.jpg differ
diff --git a/docs/public/catalog/blocks/macos-tahoe-liquid-glass/macos-tahoe-liquid-glass.html b/docs/public/catalog/blocks/macos-tahoe-liquid-glass/macos-tahoe-liquid-glass.html
new file mode 100644
index 0000000000..fe8da43ff7
--- /dev/null
+++ b/docs/public/catalog/blocks/macos-tahoe-liquid-glass/macos-tahoe-liquid-glass.html
@@ -0,0 +1,1461 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Devices Canvas — HTML-in-Canvas API Showcase</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/loaders/DRACOLoader.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/loaders/GLTFLoader.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #050508;
+        overflow: hidden;
+      }
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #050508;
+      }
+      .tahoe-desktop {
+        position: relative;
+        width: 1440px;
+        height: 900px;
+        overflow: hidden;
+        isolation: isolate;
+        background-image:
+          linear-gradient(
+            180deg,
+            rgba(7, 18, 34, 0.08),
+            rgba(7, 18, 34, 0.02) 44%,
+            rgba(7, 18, 34, 0.22)
+          ),
+          url("assets/wallpapers/golden-gate-bridge-san-francisco-5k-0g.jpg");
+        background-size: cover;
+        background-position: center center;
+        color: #fff;
+      }
+      .tahoe-desktop::before {
+        content: "";
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        z-index: 0;
+        background:
+          radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.2), transparent 28%),
+          linear-gradient(90deg, rgba(0, 0, 0, 0.1), transparent 32%, rgba(255, 255, 255, 0.08));
+      }
+      .tahoe-menu-bar {
+        position: relative;
+        z-index: 6;
+        display: flex;
+        align-items: center;
+        gap: 14px;
+        height: 28px;
+        padding: 5px 14px;
+        background: rgba(20, 47, 83, 0.28);
+        border-bottom: 1px solid rgba(255, 255, 255, 0.22);
+        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38);
+        font-size: 10px;
+        font-weight: 600;
+        color: rgba(255, 255, 255, 0.94);
+        backdrop-filter: blur(30px) saturate(1.45);
+      }
+      .tahoe-stage {
+        position: relative;
+        z-index: 5;
+        height: 690px;
+      }
+      .tahoe-window {
+        position: absolute;
+        left: 106px;
+        top: 226px;
+        width: 610px;
+        height: 360px;
+        z-index: 5;
+        overflow: hidden;
+        border: 1px solid rgba(255, 255, 255, 0.34);
+        border-radius: 18px;
+        background: rgba(246, 252, 255, 0.7);
+        color: rgba(18, 40, 66, 0.92);
+        backdrop-filter: blur(26px) saturate(1.3);
+        box-shadow:
+          0 22px 58px rgba(6, 38, 82, 0.22),
+          inset 0 1px 0 rgba(255, 255, 255, 0.62);
+      }
+      .tahoe-window-titlebar {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        height: 38px;
+        padding: 9px 14px;
+        background: rgba(255, 255, 255, 0.34);
+        border-bottom: 1px solid rgba(255, 255, 255, 0.28);
+      }
+      .tahoe-traffic-light {
+        display: inline-block;
+        width: 12px;
+        height: 12px;
+        border-radius: 50%;
+      }
+      .tahoe-finder-body {
+        position: relative;
+        display: flex;
+        height: 322px;
+      }
+      .tahoe-sidebar {
+        width: 158px;
+        padding: 12px;
+        border-right: 1px solid rgba(255, 255, 255, 0.26);
+        background: rgba(255, 255, 255, 0.2);
+        font-size: 10px;
+      }
+      .tahoe-sidebar-row {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 6px 8px;
+        border-radius: 8px;
+        color: rgba(10, 35, 64, 0.78);
+      }
+      .tahoe-sidebar-row.active {
+        background: rgba(52, 147, 236, 0.26);
+        color: rgba(4, 50, 110, 0.98);
+        font-weight: 700;
+      }
+      .tahoe-sidebar-icon {
+        width: 16px;
+        height: 16px;
+        object-fit: cover;
+        border-radius: 5px;
+        flex: 0 0 auto;
+      }
+      .tahoe-file-grid {
+        flex: 1;
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        gap: 10px 8px;
+        align-content: start;
+        padding: 18px 18px;
+      }
+      .tahoe-file {
+        padding: 8px;
+        text-align: center;
+      }
+      .tahoe-folder-icon,
+      .tahoe-document-icon {
+        position: relative;
+        width: 54px;
+        height: 42px;
+        margin: 0 auto 8px;
+        border-radius: 10px;
+        background: linear-gradient(180deg, #9fe1ff 0%, #258dff 100%);
+        box-shadow:
+          inset 0 1px 0 rgba(255, 255, 255, 0.5),
+          0 10px 20px rgba(0, 0, 0, 0.24);
+      }
+      .tahoe-folder-icon::before {
+        content: "";
+        position: absolute;
+        top: -7px;
+        left: 6px;
+        width: 26px;
+        height: 12px;
+        border-radius: 7px 7px 2px 2px;
+        background: linear-gradient(180deg, #9ad8ff 0%, #3ca2ff 100%);
+      }
+      .tahoe-document-icon {
+        width: 40px;
+        height: 52px;
+        border-radius: 8px;
+        background: linear-gradient(180deg, #ffffff 0%, #cfd8e6 100%);
+      }
+      .tahoe-document-icon::after {
+        content: "";
+        position: absolute;
+        top: 9px;
+        left: 9px;
+        width: 22px;
+        height: 3px;
+        border-radius: 2px;
+        background: #7b8796;
+        box-shadow:
+          0 9px 0 #9aa5b2,
+          0 18px 0 #b2bcc8;
+      }
+      .tahoe-file-label {
+        color: rgba(7, 31, 58, 0.94);
+        font-size: 10px;
+        font-weight: 700;
+        line-height: 1.15;
+        text-shadow: 0 1px 4px rgba(255, 255, 255, 0.6);
+      }
+      .tahoe-widgets {
+        position: absolute;
+        left: 28px;
+        top: 44px;
+        z-index: 5;
+        display: grid;
+        grid-template-columns: 92px 92px;
+        gap: 8px;
+      }
+      .tahoe-widget {
+        overflow: hidden;
+        border: 1px solid rgba(255, 255, 255, 0.42);
+        border-radius: 18px;
+        background: rgba(247, 253, 255, 0.72);
+        color: rgba(14, 45, 76, 0.9);
+        backdrop-filter: blur(26px) saturate(1.45);
+        box-shadow:
+          0 18px 34px rgba(13, 61, 115, 0.2),
+          inset 0 1px 0 rgba(255, 255, 255, 0.72);
+      }
+      .tahoe-calendar-widget {
+        width: 92px;
+        height: 110px;
+        padding: 9px;
+      }
+      .tahoe-weather-widget {
+        width: 92px;
+        height: 110px;
+        padding: 9px;
+        background: linear-gradient(160deg, rgba(30, 119, 238, 0.72), rgba(255, 255, 255, 0.44));
+        color: #fff;
+      }
+      .tahoe-media-widget {
+        grid-column: 1 / span 2;
+        width: 192px;
+        height: 96px;
+        background:
+          linear-gradient(140deg, rgba(13, 16, 22, 0.12), rgba(255, 255, 255, 0.24)),
+          radial-gradient(circle at 18% 20%, #ffb88b, transparent 32%),
+          radial-gradient(circle at 76% 28%, #ed2f7a, transparent 34%),
+          linear-gradient(135deg, #451a03, #0f172a);
+      }
+      .tahoe-calendar-days {
+        display: grid;
+        grid-template-columns: repeat(7, 1fr);
+        gap: 2px;
+        margin-top: 7px;
+        font-size: 5.5px;
+        font-weight: 800;
+        text-align: center;
+        color: rgba(20, 51, 83, 0.66);
+      }
+      .tahoe-glass-panel {
+        border: 1px solid rgba(255, 255, 255, 0.22);
+        border-radius: 24px;
+        background:
+          linear-gradient(135deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.1)),
+          rgba(10, 14, 24, 0.78);
+        box-shadow:
+          inset 0 1px 0 rgba(255, 255, 255, 0.32),
+          0 20px 54px rgba(0, 0, 0, 0.34);
+      }
+      .tahoe-notification {
+        position: absolute;
+        z-index: 7;
+        top: 58px;
+        right: 36px;
+        width: 374px;
+        display: flex;
+        gap: 12px;
+        min-height: 86px;
+        padding: 14px 16px;
+        border: 1px solid rgba(255, 255, 255, 0.42);
+        border-radius: 28px;
+        background:
+          linear-gradient(
+            140deg,
+            rgba(255, 255, 255, 0.62),
+            rgba(255, 255, 255, 0.26) 48%,
+            rgba(255, 255, 255, 0.42)
+          ),
+          rgba(233, 249, 255, 0.56);
+        color: #fff;
+        backdrop-filter: blur(30px) saturate(1.55);
+        box-shadow:
+          0 22px 46px rgba(4, 55, 112, 0.25),
+          inset 0 1px 0 rgba(255, 255, 255, 0.72),
+          inset 0 -18px 38px rgba(255, 255, 255, 0.1);
+      }
+      .tahoe-notification::before {
+        content: "";
+        position: absolute;
+        inset: 1px;
+        border-radius: inherit;
+        pointer-events: none;
+        background: linear-gradient(
+          120deg,
+          rgba(255, 255, 255, 0.58),
+          transparent 34%,
+          rgba(255, 255, 255, 0.22)
+        );
+        mix-blend-mode: screen;
+        opacity: 0.5;
+      }
+      .tahoe-notification img {
+        position: relative;
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+        object-fit: cover;
+        flex: 0 0 auto;
+      }
+      .tahoe-panel-title {
+        position: relative;
+        color: rgba(8, 30, 58, 0.98);
+        font-size: 17px;
+        font-weight: 800;
+        line-height: 1.1;
+        text-shadow: 0 1px 6px rgba(255, 255, 255, 0.56);
+      }
+      .tahoe-panel-subtitle {
+        position: relative;
+        margin-top: 4px;
+        color: rgba(9, 36, 66, 0.86);
+        font-size: 12.5px;
+        font-weight: 700;
+        line-height: 1.35;
+        text-shadow: 0 1px 6px rgba(255, 255, 255, 0.48);
+      }
+      .tahoe-control-center {
+        padding: 14px;
+      }
+      .tahoe-toggle-grid {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 10px;
+        margin-top: 12px;
+      }
+      .tahoe-toggle {
+        min-height: 48px;
+        padding: 9px 10px;
+        border-radius: 16px;
+        background: rgba(255, 255, 255, 0.16);
+        color: rgba(255, 255, 255, 0.9);
+        font-size: 12px;
+        font-weight: 760;
+        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
+      }
+      .tahoe-toggle.active {
+        background: linear-gradient(135deg, rgba(0, 122, 255, 0.9), rgba(52, 211, 153, 0.68));
+      }
+      .tahoe-slider {
+        height: 12px;
+        margin-top: 12px;
+        border-radius: 999px;
+        background: rgba(255, 255, 255, 0.18);
+        overflow: hidden;
+      }
+      .tahoe-slider::before {
+        content: "";
+        display: block;
+        width: 72%;
+        height: 100%;
+        border-radius: inherit;
+        background: linear-gradient(90deg, #a7f3d0, #38bdf8, #c084fc);
+      }
+      .tahoe-media {
+        padding: 14px;
+      }
+      .tahoe-media-row {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        margin-top: 12px;
+      }
+      .tahoe-album {
+        width: 48px;
+        height: 48px;
+        border-radius: 14px;
+        background: linear-gradient(135deg, #ec4899, #f59e0b 48%, #38bdf8);
+        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
+      }
+      .tahoe-dock {
+        position: absolute;
+        z-index: 6;
+        left: 50%;
+        bottom: 24px;
+        width: auto;
+        display: flex;
+        align-items: flex-end;
+        gap: 7px;
+        padding: 8px 12px;
+        border: 1px solid rgba(255, 255, 255, 0.42);
+        border-radius: 22px;
+        background: rgba(255, 255, 255, 0.52);
+        transform: translateX(-50%);
+        backdrop-filter: blur(28px) saturate(1.45);
+        box-shadow:
+          0 22px 44px rgba(6, 38, 82, 0.24),
+          inset 0 1px 0 rgba(255, 255, 255, 0.72);
+      }
+      .tahoe-dock-icon {
+        display: block;
+        width: 46px;
+        height: 46px;
+        object-fit: cover;
+        border-radius: 13px;
+        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="macos-tahoe-liquid-glass"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="15"
+      data-root="true"
+    >
+      <!-- LIVE HTML captured every frame via drawElementImage  -->
+      <canvas
+        id="cap-phone"
+        layoutsubtree
+        aria-hidden="true"
+        width="390"
+        height="844"
+        style="
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 390px;
+          height: 844px;
+          z-index: -1;
+          pointer-events: none;
+        "
+      >
+        <div
+          id="phone-html"
+          style="
+            width: 390px;
+            height: 844px;
+            overflow: hidden;
+            font-family: Inter, system-ui, sans-serif;
+            color: #e2e8f0;
+          "
+        >
+          <div
+            id="phone-scroll"
+            style="background: linear-gradient(180deg, #0a0a12, #0f0f1a); transform: translateY(0)"
+          >
+            <div
+              style="
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                padding: 14px 18px;
+                border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+              "
+            >
+              <span
+                style="
+                  font-weight: 800;
+                  font-size: 14px;
+                  background: linear-gradient(135deg, #34d399, #3b82f6);
+                  -webkit-background-clip: text;
+                  -webkit-text-fill-color: transparent;
+                "
+                >HyperFrames</span
+              ><span
+                style="
+                  font-size: 10px;
+                  font-weight: 600;
+                  padding: 5px 12px;
+                  border-radius: 6px;
+                  background: #10b981;
+                  color: #fff;
+                "
+                >Log in</span
+              >
+            </div>
+            <div
+              id="phone-title"
+              style="
+                font-size: 26px;
+                font-weight: 800;
+                letter-spacing: -0.5px;
+                padding: 18px 18px 6px;
+                line-height: 1.1;
+                opacity: 0;
+              "
+            >
+              Community Playground
+            </div>
+            <div style="font-size: 11px; color: rgba(255, 255, 255, 0.4); padding: 0 18px 14px">
+              Made with HyperFrames
+            </div>
+            <div style="display: flex; gap: 6px; padding: 0 18px 14px">
+              <span
+                style="
+                  font-size: 9px;
+                  font-weight: 600;
+                  padding: 4px 10px;
+                  border-radius: 16px;
+                  background: rgba(16, 185, 129, 0.15);
+                  color: #10b981;
+                  border: 1px solid rgba(16, 185, 129, 0.3);
+                "
+                >Examples</span
+              ><span
+                id="phone-count"
+                style="
+                  font-size: 9px;
+                  font-weight: 600;
+                  padding: 4px 10px;
+                  border-radius: 16px;
+                  border: 1px solid rgba(255, 255, 255, 0.1);
+                  color: rgba(255, 255, 255, 0.5);
+                "
+                >Catalog 0</span
+              >
+            </div>
+            <div id="phone-cards" style="display: grid; gap: 10px; padding: 0 18px 18px"></div>
+          </div>
+        </div>
+      </canvas>
+
+      <img
+        src="assets/wallpapers/golden-gate-bridge-san-francisco-5k-0g.jpg"
+        alt=""
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      />
+
+      <canvas
+        id="cap-laptop"
+        layoutsubtree
+        aria-hidden="true"
+        width="1440"
+        height="900"
+        style="
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1440px;
+          height: 900px;
+          z-index: -1;
+          pointer-events: none;
+        "
+      >
+        <div
+          id="laptop-html"
+          style="
+            width: 1440px;
+            height: 900px;
+            overflow: hidden;
+            font-family: Inter, system-ui, sans-serif;
+            color: #e2e8f0;
+          "
+        >
+          <div id="laptop-scroll" class="tahoe-desktop" style="transform: translateY(0)">
+            <div id="laptop-title" style="display: none"></div>
+            <span id="laptop-count" style="display: none"></span>
+            <div id="laptop-cards" style="display: none"></div>
+            <!-- Menu Bar -->
+            <div class="tahoe-menu-bar">
+              <span style="font-weight: 800; font-size: 15px">&#63743;</span>
+              <span style="font-weight: 600">Finder</span>
+              <span>File</span><span>Edit</span><span>View</span><span>Go</span><span>Window</span
+              ><span>Help</span>
+              <div style="flex: 1"></div>
+              <span style="font-size: 10px">CC</span>
+              <span style="font-size: 10px">Search</span>
+              <span style="font-size: 10px">92%</span>
+              <span style="font-size: 10px">Wi-Fi</span>
+              <span style="font-size: 10px; font-variant-numeric: tabular-nums"
+                >Tue Apr 1 9:41 AM</span
+              >
+            </div>
+            <div class="tahoe-widgets">
+              <div class="tahoe-widget tahoe-calendar-widget">
+                <div style="font-size: 6px; font-weight: 900; color: rgba(249, 66, 58, 0.84)">
+                  APRIL
+                </div>
+                <div class="tahoe-calendar-days">
+                  <span>S</span><span>M</span><span>T</span><span>W</span><span>T</span
+                  ><span>F</span><span>S</span> <span></span><span></span
+                  ><span style="color: #fff; background: #f0423a; border-radius: 99px">1</span
+                  ><span>2</span><span>3</span><span>4</span><span>5</span> <span>6</span
+                  ><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span
+                  ><span>12</span> <span>13</span><span>14</span><span>15</span><span>16</span
+                  ><span>17</span><span>18</span><span>19</span> <span>20</span><span>21</span
+                  ><span>22</span><span>23</span><span>24</span><span>25</span><span>26</span>
+                </div>
+              </div>
+              <div class="tahoe-widget tahoe-weather-widget">
+                <div style="font-size: 7px; font-weight: 900">San Francisco</div>
+                <div style="font-size: 28px; font-weight: 800; line-height: 1; margin-top: 4px">
+                  53&deg;
+                </div>
+                <div style="font-size: 7px; font-weight: 800; opacity: 0.9; margin-top: 12px">
+                  Partly Cloudy
+                </div>
+                <div style="font-size: 6px; font-weight: 800; opacity: 0.82">H:58° L:50°</div>
+              </div>
+              <div class="tahoe-widget tahoe-media-widget"></div>
+            </div>
+            <div id="mac-toast" class="tahoe-notification">
+              <img src="assets/icons/toast-messages.jpg" alt="" />
+              <div>
+                <div class="tahoe-panel-title">
+                  <span>Messages</span> <span style="font-size: 11px; opacity: 0.78">now</span>
+                </div>
+                <div class="tahoe-panel-subtitle">Liquid Glass preview is ready for review.</div>
+              </div>
+            </div>
+            <div class="tahoe-stage">
+              <div class="tahoe-window">
+                <div class="tahoe-window-titlebar">
+                  <span class="tahoe-traffic-light" style="background: #ff5f57"></span>
+                  <span class="tahoe-traffic-light" style="background: #febc2e"></span>
+                  <span class="tahoe-traffic-light" style="background: #28c840"></span>
+                  <span
+                    style="
+                      flex: 1;
+                      text-align: center;
+                      font-size: 13px;
+                      font-weight: 600;
+                      color: rgba(20, 46, 76, 0.72);
+                    "
+                    >HyperFrames</span
+                  >
+                </div>
+                <div id="macos-finder-body" class="tahoe-finder-body">
+                  <div class="tahoe-sidebar">
+                    <div class="tahoe-sidebar-row active">
+                      <img class="tahoe-sidebar-icon" src="assets/icons/finder.png" alt="" />
+                      Favorites
+                    </div>
+                    <div class="tahoe-sidebar-row">
+                      <img class="tahoe-sidebar-icon" src="assets/icons/files.jpg" alt="" />
+                      Home
+                    </div>
+                    <div class="tahoe-sidebar-row">
+                      <img class="tahoe-sidebar-icon" src="assets/icons/safari.jpg" alt="" />
+                      Desktop
+                    </div>
+                    <div class="tahoe-sidebar-row">
+                      <img class="tahoe-sidebar-icon" src="assets/icons/mail.jpg" alt="" />
+                      Downloads
+                    </div>
+                    <div class="tahoe-sidebar-row">
+                      <img class="tahoe-sidebar-icon" src="assets/icons/photos.jpg" alt="" />
+                      Pictures
+                    </div>
+                    <div class="tahoe-sidebar-row">
+                      <img class="tahoe-sidebar-icon" src="assets/icons/music.jpg" alt="" />
+                      Music
+                    </div>
+                  </div>
+                  <div class="tahoe-file-grid">
+                    <div class="tahoe-file">
+                      <div class="tahoe-folder-icon"></div>
+                      <div class="tahoe-file-label">packages</div>
+                    </div>
+                    <div class="tahoe-file">
+                      <div class="tahoe-folder-icon"></div>
+                      <div class="tahoe-file-label">registry</div>
+                    </div>
+                    <div class="tahoe-file">
+                      <div class="tahoe-folder-icon"></div>
+                      <div class="tahoe-file-label">docs</div>
+                    </div>
+                    <div class="tahoe-file">
+                      <div class="tahoe-folder-icon"></div>
+                      <div class="tahoe-file-label">skills</div>
+                    </div>
+                    <div class="tahoe-file">
+                      <div class="tahoe-document-icon"></div>
+                      <div class="tahoe-file-label">AGENTS.md</div>
+                    </div>
+                    <div class="tahoe-file">
+                      <div class="tahoe-document-icon"></div>
+                      <div class="tahoe-file-label">package.json</div>
+                    </div>
+                    <div class="tahoe-file">
+                      <div class="tahoe-folder-icon"></div>
+                      <div class="tahoe-file-label">playground</div>
+                    </div>
+                    <div class="tahoe-file">
+                      <div class="tahoe-folder-icon"></div>
+                      <div class="tahoe-file-label">scripts</div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="tahoe-dock">
+              <img class="tahoe-dock-icon" src="assets/icons/dock-finder.png" alt="" />
+              <img class="tahoe-dock-icon" src="assets/icons/dock-safari.jpg" alt="" />
+              <img class="tahoe-dock-icon" src="assets/icons/dock-mail.jpg" alt="" />
+              <img class="tahoe-dock-icon" src="assets/icons/calendar.jpg" alt="" />
+              <img class="tahoe-dock-icon" src="assets/icons/dock-photos.jpg" alt="" />
+              <img class="tahoe-dock-icon" src="assets/icons/messages.jpg" alt="" />
+              <img class="tahoe-dock-icon" src="assets/icons/dock-music.jpg" alt="" />
+              <img class="tahoe-dock-icon" src="assets/icons/brave.jpg" alt="" />
+              <img class="tahoe-dock-icon" src="assets/icons/slack.jpg" alt="" />
+            </div>
+          </div>
+        </div>
+      </canvas>
+
+      <canvas
+        id="theater"
+        width="1920"
+        height="1080"
+        style="position: absolute; top: 0; left: 0; width: 1920px; height: 1080px"
+      ></canvas>
+      <div
+        id="driver"
+        class="clip"
+        data-start="0"
+        data-duration="15"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      var W = 1920,
+        H = 1080,
+        PI = Math.PI;
+
+      // ── Renderer ───────────────────────────────────────────────────────
+      var renderer = new THREE.WebGLRenderer({
+        canvas: document.getElementById("theater"),
+        antialias: true,
+        preserveDrawingBuffer: true,
+      });
+      renderer.setSize(W, H, false);
+      renderer.setPixelRatio(1);
+      renderer.toneMapping = THREE.ACESFilmicToneMapping;
+      renderer.toneMappingExposure = 1.15;
+      renderer.outputEncoding = THREE.sRGBEncoding;
+      renderer.setClearColor(0x050508, 1);
+
+      var scene = new THREE.Scene();
+      scene.background = new THREE.Color(0x050508);
+      var camera = new THREE.PerspectiveCamera(34, W / H, 0.1, 100);
+
+      // ── Environment Map ────────────────────────────────────────────────
+      var eC = document.createElement("canvas");
+      eC.width = 1024;
+      eC.height = 512;
+      var ec = eC.getContext("2d");
+      var eg = ec.createLinearGradient(0, 0, 1024, 512);
+      eg.addColorStop(0, "#020307");
+      eg.addColorStop(0.15, "#1a1a2e");
+      eg.addColorStop(0.3, "#ffffff");
+      eg.addColorStop(0.45, "#0a0a1e");
+      eg.addColorStop(0.6, "#ffffff");
+      eg.addColorStop(0.75, "#1e1e2e");
+      eg.addColorStop(1, "#020307");
+      ec.fillStyle = eg;
+      ec.fillRect(0, 0, 1024, 512);
+      ec.globalCompositeOperation = "screen";
+      for (var ei = 0; ei < 7; ei++) {
+        ec.fillStyle = "rgba(255,255,255," + (ei % 2 === 0 ? 0.15 : 0.08) + ")";
+        ec.fillRect((ei % 3) * 100, 60 + ei * 56, 700, 3 + (ei % 2) * 2);
+      }
+      var eT = new THREE.CanvasTexture(eC);
+      eT.mapping = THREE.EquirectangularReflectionMapping;
+      var pm = new THREE.PMREMGenerator(renderer);
+      scene.environment = pm.fromEquirectangular(eT).texture;
+      eT.dispose();
+      pm.dispose();
+
+      // ── Three.js shader backdrop ────────────────────────────────────────
+      var bgUniforms = { uTime: { value: 0 }, uAspect: { value: W / H } };
+      var bgPlane = new THREE.Mesh(
+        new THREE.PlaneGeometry(28, 16),
+        new THREE.ShaderMaterial({
+          uniforms: bgUniforms,
+          vertexShader:
+            "varying vec2 v;void main(){v=uv;gl_Position=projectionMatrix*modelViewMatrix*vec4(position,1.0);}",
+          fragmentShader:
+            "uniform float uTime;uniform float uAspect;varying vec2 v;float wave(vec2 p,float s,float t){return sin(p.x*s+p.y*s*.57+uTime*t);}void main(){vec2 p=v*2.0-1.0;p.x*=uAspect;float w=wave(p,3.0,.22)+.55*wave(p.yx+vec2(.7,-.2),5.1,.16)+.32*wave(p+vec2(-.4,.5),8.0,-.12);float a=smoothstep(-.75,1.05,w);vec3 navy=vec3(.015,.013,.055);vec3 cyan=vec3(.02,.42,.72);vec3 violet=vec3(.30,.08,.55);vec3 amber=vec3(.95,.42,.04);float ribbon=smoothstep(.22,.95,sin(p.x*2.2-p.y*3.1+uTime*.18));vec3 c=mix(navy,cyan,a);c=mix(c,violet,smoothstep(.16,1.1,wave(p+vec2(.8,.1),2.4,.1)));c+=amber*ribbon*.33;float glow=exp(-dot(p+vec2(.62,-.08),p+vec2(.62,-.08))*1.7);c+=vec3(.10,.45,.55)*glow;float vign=smoothstep(1.85,.25,length(p));gl_FragColor=vec4(c*vign,1.0);}",
+          depthTest: false,
+          depthWrite: false,
+        }),
+      );
+      bgPlane.position.z = -7.5;
+      scene.add(bgPlane);
+
+      var floor = new THREE.Mesh(
+        new THREE.PlaneGeometry(30, 30),
+        new THREE.MeshStandardMaterial({ color: 0x081427, metalness: 0.9, roughness: 0.2 }),
+      );
+      floor.rotation.x = -PI / 2;
+      floor.position.y = -2.5;
+      scene.add(floor);
+
+      scene.add(new THREE.AmbientLight(0x222233, 0.5));
+      var kL = new THREE.DirectionalLight(0xffffff, 2.2);
+      kL.position.set(-3, 4, 5);
+      scene.add(kL);
+      var rL = new THREE.PointLight(0x6366f1, 3, 15);
+      rL.position.set(4, 2, 3);
+      scene.add(rL);
+      var wL = new THREE.PointLight(0xffc8a8, 1.5, 12);
+      wL.position.set(-3, -1, 4);
+      scene.add(wL);
+
+      // ── Live HTML → WebGL Texture  ─
+      var capPhoneCvs = document.getElementById("cap-phone");
+      var capPhoneCtx = capPhoneCvs.getContext("2d");
+      var phoneHtmlEl = document.getElementById("phone-html");
+
+      var capLapCvs = document.getElementById("cap-laptop");
+      var capLapCtx = capLapCvs.getContext("2d");
+      var lapHtmlEl = document.getElementById("laptop-html");
+
+      var apiOk = (function () {
+        var tc = document.createElement("canvas");
+        if (!("layoutSubtree" in tc)) return false;
+        tc.setAttribute("layoutsubtree", "");
+        var ctx = tc.getContext("2d");
+        return ctx && typeof ctx.drawElementImage === "function";
+      })();
+      var paintReady = false;
+
+      function waitForImages() {
+        var images = Array.prototype.slice.call(document.querySelectorAll("img"));
+        return Promise.all(
+          images.map(function (image) {
+            if (image.complete) return Promise.resolve();
+            return new Promise(function (resolveImage) {
+              image.onload = resolveImage;
+              image.onerror = resolveImage;
+            });
+          }),
+        );
+      }
+
+      function waitForPaint(canvas) {
+        return new Promise(function (resolvePaint) {
+          if (!canvas || typeof canvas.requestPaint !== "function") {
+            resolvePaint();
+            return;
+          }
+          var resolved = false;
+          function done() {
+            if (resolved) return;
+            resolved = true;
+            canvas.onpaint = null;
+            resolvePaint();
+          }
+          canvas.onpaint = done;
+          canvas.requestPaint();
+          setTimeout(done, 100);
+        });
+      }
+
+      // Generate card HTML for both screens
+      var cardData = [
+        {
+          bg: "linear-gradient(135deg,#1e3a5f,#2563eb)",
+          text: "100M+ AI team",
+          title: "Notion Showcase",
+          meta: "15s · 1920×1080",
+        },
+        {
+          bg: "linear-gradient(135deg,#4a1942,#db2777)",
+          text: "Design System v4",
+          title: "Dribbble Showcase",
+          meta: "12s · 1920×1080",
+        },
+        {
+          bg: "linear-gradient(135deg,#451a03,#f59e0b)",
+          text: "$1.9T Market Cap",
+          title: "Stripe Showcase",
+          meta: "10s · 1920×1080",
+        },
+        {
+          bg: "linear-gradient(135deg,#064e3b,#10b981)",
+          text: "Ship faster with AI",
+          title: "Vercel Promo",
+          meta: "20s · 1080×1920",
+        },
+        {
+          bg: "linear-gradient(135deg,#1e3a5f,#3b82f6)",
+          text: "Privacy App",
+          title: "iPhone App Store",
+          meta: "8s · 1080×1920",
+        },
+        {
+          bg: "linear-gradient(135deg,#4a1942,#a855f7)",
+          text: "Audio Visualizer",
+          title: "Spotify Remix",
+          meta: "15s · 1920×1080",
+        },
+        {
+          bg: "linear-gradient(135deg,#064e3b,#059669)",
+          text: "Code Animation",
+          title: "Terminal Demo",
+          meta: "12s · 1920×1080",
+        },
+        {
+          bg: "linear-gradient(135deg,#451a03,#d97706)",
+          text: "Launch Video",
+          title: "Product Hunt",
+          meta: "30s · 1920×1080",
+        },
+        {
+          bg: "linear-gradient(135deg,#1e3a5f,#6366f1)",
+          text: "3D Devices",
+          title: "Device Mockups",
+          meta: "15s · 1920×1080",
+        },
+      ];
+      function makeCardHTML(cd, isMobile) {
+        var fs = isMobile ? 12 : 16;
+        return (
+          '<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:' +
+          (isMobile ? 10 : 12) +
+          'px;overflow:hidden;opacity:0" class="anim-card">' +
+          '<div style="width:100%;aspect-ratio:16/9;background:' +
+          cd.bg +
+          ';display:flex;align-items:center;justify-content:center"><span style="font-size:' +
+          fs +
+          'px;font-weight:700;color:rgba(255,255,255,0.7)">' +
+          cd.text +
+          "</span></div>" +
+          '<div style="padding:' +
+          (isMobile ? "8px 10px" : "10px 14px") +
+          '"><div style="font-size:' +
+          (isMobile ? 11 : 13) +
+          'px;font-weight:600;margin-bottom:2px">' +
+          cd.title +
+          '</div><div style="font-size:' +
+          (isMobile ? 9 : 10) +
+          'px;color:rgba(255,255,255,0.3)">' +
+          cd.meta +
+          "</div></div></div>"
+        );
+      }
+      var phoneCardsEl = document.getElementById("phone-cards");
+      var laptopCardsEl = document.getElementById("laptop-cards");
+      for (var ci = 0; ci < cardData.length; ci++) {
+        if (ci < 6) phoneCardsEl.innerHTML += makeCardHTML(cardData[ci], true);
+        laptopCardsEl.innerHTML += makeCardHTML(cardData[ci], false);
+      }
+
+      var phoneTex = new THREE.CanvasTexture(capPhoneCvs);
+      phoneTex.minFilter = THREE.LinearFilter;
+      phoneTex.magFilter = THREE.LinearFilter;
+      phoneTex.generateMipmaps = false;
+      var lapTex = new THREE.CanvasTexture(capLapCvs);
+      lapTex.minFilter = THREE.LinearFilter;
+      lapTex.magFilter = THREE.LinearFilter;
+      lapTex.generateMipmaps = false;
+      var macToastIcon = document.querySelector("#mac-toast img");
+      var macDockIcons = Array.prototype.slice.call(document.querySelectorAll(".tahoe-dock-icon"));
+      var macSidebarIcons = Array.prototype.slice.call(
+        document.querySelectorAll(".tahoe-sidebar-icon"),
+      );
+
+      function roundedRect(ctx, x, y, w, h, r) {
+        ctx.beginPath();
+        ctx.moveTo(x + r, y);
+        ctx.lineTo(x + w - r, y);
+        ctx.quadraticCurveTo(x + w, y, x + w, y + r);
+        ctx.lineTo(x + w, y + h - r);
+        ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
+        ctx.lineTo(x + r, y + h);
+        ctx.quadraticCurveTo(x, y + h, x, y + h - r);
+        ctx.lineTo(x, y + r);
+        ctx.quadraticCurveTo(x, y, x + r, y);
+        ctx.closePath();
+      }
+
+      function drawRoundedImage(ctx, image, x, y, w, h, r) {
+        if (!image || !image.complete) return;
+        ctx.save();
+        roundedRect(ctx, x, y, w, h, r);
+        ctx.clip();
+        ctx.drawImage(image, x, y, w, h);
+        ctx.restore();
+      }
+
+      function drawGlassPanel(ctx, x, y, w, h, r) {
+        var g = ctx.createLinearGradient(x, y, x + w, y + h);
+        g.addColorStop(0, "rgba(255,255,255,0.82)");
+        g.addColorStop(0.46, "rgba(245,253,255,0.42)");
+        g.addColorStop(1, "rgba(211,237,255,0.3)");
+        ctx.save();
+        ctx.shadowColor = "rgba(7,47,96,0.2)";
+        ctx.shadowBlur = 24;
+        ctx.shadowOffsetY = 12;
+        roundedRect(ctx, x, y, w, h, r);
+        ctx.fillStyle = g;
+        ctx.fill();
+        ctx.shadowColor = "transparent";
+        ctx.lineWidth = 1.25;
+        ctx.strokeStyle = "rgba(255,255,255,0.72)";
+        ctx.stroke();
+        roundedRect(ctx, x + 2, y + 2, w - 4, h - 4, Math.max(0, r - 2));
+        ctx.strokeStyle = "rgba(255,255,255,0.24)";
+        ctx.stroke();
+        ctx.restore();
+      }
+
+      function drawMenuBar(ctx) {
+        ctx.save();
+        var g = ctx.createLinearGradient(0, 0, 1440, 0);
+        g.addColorStop(0, "rgba(255,255,255,0.34)");
+        g.addColorStop(0.52, "rgba(255,255,255,0.18)");
+        g.addColorStop(1, "rgba(255,255,255,0.3)");
+        ctx.fillStyle = g;
+        ctx.fillRect(0, 0, 1440, 28);
+        ctx.strokeStyle = "rgba(255,255,255,0.46)";
+        ctx.lineWidth = 1;
+        ctx.beginPath();
+        ctx.moveTo(0, 28);
+        ctx.lineTo(1440, 28);
+        ctx.stroke();
+        ctx.fillStyle = "rgba(255,255,255,0.96)";
+        ctx.font = "800 14px Inter, system-ui, sans-serif";
+        ctx.fillText("Finder", 50, 18);
+        ctx.font = "700 11px Inter, system-ui, sans-serif";
+        var items = ["File", "Edit", "View", "Go", "Window", "Help"];
+        for (var mi = 0; mi < items.length; mi++) ctx.fillText(items[mi], 108 + mi * 46, 18);
+        ctx.textAlign = "right";
+        ctx.fillText("92%   Wi-Fi   Tue Apr 1 9:41 AM", 1414, 18);
+        ctx.textAlign = "left";
+        ctx.restore();
+      }
+
+      function drawDesktopWidgets(ctx) {
+        ctx.save();
+        ctx.textBaseline = "top";
+        drawGlassPanel(ctx, 28, 48, 100, 112, 18);
+        ctx.fillStyle = "rgba(239,68,68,0.92)";
+        ctx.font = "900 8px Inter, system-ui, sans-serif";
+        ctx.fillText("APRIL", 44, 62);
+        ctx.fillStyle = "rgba(15,45,80,0.72)";
+        ctx.font = "800 7px Inter, system-ui, sans-serif";
+        var days = ["S", "M", "T", "W", "T", "F", "S"];
+        for (var di = 0; di < days.length; di++) ctx.fillText(days[di], 42 + di * 10, 82);
+        for (var da = 1; da <= 26; da++) {
+          var dx = 42 + ((da + 1) % 7) * 10;
+          var dy = 98 + Math.floor((da + 1) / 7) * 12;
+          if (da === 1) {
+            ctx.fillStyle = "#ef4444";
+            ctx.beginPath();
+            ctx.arc(dx + 3, dy + 4, 6, 0, PI * 2);
+            ctx.fill();
+            ctx.fillStyle = "#fff";
+          } else {
+            ctx.fillStyle = "rgba(15,45,80,0.62)";
+          }
+          ctx.fillText(String(da), dx, dy);
+        }
+
+        drawGlassPanel(ctx, 138, 48, 112, 112, 18);
+        var wg = ctx.createLinearGradient(138, 48, 250, 160);
+        wg.addColorStop(0, "rgba(43,133,245,0.72)");
+        wg.addColorStop(0.64, "rgba(163,220,255,0.54)");
+        wg.addColorStop(1, "rgba(255,255,255,0.3)");
+        roundedRect(ctx, 138, 48, 112, 112, 18);
+        ctx.fillStyle = wg;
+        ctx.fill();
+        ctx.fillStyle = "rgba(255,255,255,0.96)";
+        ctx.font = "900 9px Inter, system-ui, sans-serif";
+        ctx.fillText("San Francisco", 154, 64);
+        ctx.font = "900 31px Inter, system-ui, sans-serif";
+        ctx.fillText("53°", 154, 84);
+        ctx.font = "800 8px Inter, system-ui, sans-serif";
+        ctx.fillText("Partly Cloudy", 154, 130);
+        ctx.fillText("H:58° L:50°", 154, 142);
+
+        drawGlassPanel(ctx, 28, 170, 222, 92, 22);
+        var pg = ctx.createLinearGradient(44, 188, 130, 244);
+        pg.addColorStop(0, "#ffb27a");
+        pg.addColorStop(0.52, "#ce2b6f");
+        pg.addColorStop(1, "#1d4ed8");
+        roundedRect(ctx, 44, 188, 72, 56, 14);
+        ctx.fillStyle = pg;
+        ctx.fill();
+        ctx.fillStyle = "rgba(18,40,68,0.92)";
+        ctx.font = "900 14px Inter, system-ui, sans-serif";
+        ctx.fillText("Now Playing", 130, 193);
+        ctx.font = "800 10px Inter, system-ui, sans-serif";
+        ctx.fillStyle = "rgba(18,40,68,0.68)";
+        ctx.fillText("Glass preview mix", 130, 216);
+        ctx.restore();
+      }
+
+      function drawFinderWindow(ctx) {
+        var x = 112;
+        var y = 236;
+        var w = 620;
+        var h = 338;
+        drawGlassPanel(ctx, x, y, w, h, 18);
+        roundedRect(ctx, x, y, w, 42, 18);
+        ctx.fillStyle = "rgba(255,255,255,0.38)";
+        ctx.fill();
+        ctx.fillStyle = "#ff5f57";
+        ctx.beginPath();
+        ctx.arc(x + 26, y + 21, 6, 0, PI * 2);
+        ctx.fill();
+        ctx.fillStyle = "#febc2e";
+        ctx.beginPath();
+        ctx.arc(x + 46, y + 21, 6, 0, PI * 2);
+        ctx.fill();
+        ctx.fillStyle = "#28c840";
+        ctx.beginPath();
+        ctx.arc(x + 66, y + 21, 6, 0, PI * 2);
+        ctx.fill();
+        ctx.fillStyle = "rgba(14,42,74,0.72)";
+        ctx.font = "800 13px Inter, system-ui, sans-serif";
+        ctx.textAlign = "center";
+        ctx.fillText("HyperFrames", x + w / 2, y + 25);
+        ctx.textAlign = "left";
+
+        ctx.fillStyle = "rgba(255,255,255,0.23)";
+        ctx.fillRect(x, y + 42, 164, h - 42);
+        var sidebar = ["Favorites", "Home", "Desktop", "Downloads", "Pictures", "Music"];
+        for (var si = 0; si < sidebar.length; si++) {
+          var sy = y + 70 + si * 34;
+          if (si === 0) {
+            roundedRect(ctx, x + 16, sy - 17, 132, 26, 8);
+            ctx.fillStyle = "rgba(43,139,235,0.24)";
+            ctx.fill();
+          }
+          drawRoundedImage(ctx, macSidebarIcons[si], x + 28, sy - 14, 18, 18, 5);
+          ctx.fillStyle = "rgba(18,45,76,0.78)";
+          ctx.font =
+            si === 0
+              ? "900 12px Inter, system-ui, sans-serif"
+              : "800 12px Inter, system-ui, sans-serif";
+          ctx.fillText(sidebar[si], x + 54, sy);
+        }
+
+        var files = [
+          "packages",
+          "registry",
+          "docs",
+          "skills",
+          "AGENTS.md",
+          "package.json",
+          "playground",
+          "scripts",
+        ];
+        for (var fi = 0; fi < files.length; fi++) {
+          var fx = x + 226 + (fi % 4) * 94;
+          var fy = y + 94 + Math.floor(fi / 4) * 112;
+          roundedRect(ctx, fx, fy, 54, 42, 10);
+          ctx.fillStyle =
+            fi === 4 || fi === 5 ? "rgba(255,255,255,0.82)" : "rgba(112,202,255,0.74)";
+          ctx.fill();
+          if (fi < 4 || fi > 5) {
+            roundedRect(ctx, fx + 4, fy - 8, 28, 13, 6);
+            ctx.fillStyle = "rgba(119,204,255,0.78)";
+            ctx.fill();
+          } else {
+            ctx.fillStyle = "rgba(104,122,142,0.46)";
+            ctx.fillRect(fx + 10, fy + 12, 34, 3);
+            ctx.fillRect(fx + 10, fy + 22, 26, 3);
+          }
+          ctx.fillStyle = "rgba(12,38,68,0.9)";
+          ctx.font = "900 11px Inter, system-ui, sans-serif";
+          ctx.textAlign = "center";
+          ctx.fillText(files[fi], fx + 27, fy + 62);
+          ctx.textAlign = "left";
+        }
+      }
+
+      function drawNotification(ctx, x, y) {
+        drawGlassPanel(ctx, x, y, 390, 96, 28);
+        drawRoundedImage(ctx, macToastIcon, x + 20, y + 22, 44, 44, 12);
+        ctx.fillStyle = "rgba(10,34,62,0.96)";
+        ctx.font = "900 18px Inter, system-ui, sans-serif";
+        ctx.fillText("Messages", x + 80, y + 26);
+        ctx.font = "800 12px Inter, system-ui, sans-serif";
+        ctx.fillStyle = "rgba(10,34,62,0.58)";
+        ctx.fillText("now", x + 176, y + 28);
+        ctx.font = "800 13px Inter, system-ui, sans-serif";
+        ctx.fillStyle = "rgba(10,34,62,0.78)";
+        ctx.fillText("Liquid Glass preview is ready for review.", x + 80, y + 54);
+      }
+
+      function drawDock(ctx) {
+        var icons = macDockIcons;
+        var size = 46;
+        var gap = 8;
+        var padX = 14;
+        var padY = 9;
+        var w = icons.length * size + (icons.length - 1) * gap + padX * 2;
+        var x = Math.round((1440 - w) / 2);
+        var y = 792;
+        drawGlassPanel(ctx, x, y, w, size + padY * 2, 23);
+        for (var ii = 0; ii < icons.length; ii++) {
+          var ix = x + padX + ii * (size + gap);
+          drawRoundedImage(ctx, icons[ii], ix, y + padY, size, size, 13);
+        }
+      }
+
+      function drawMacGlassOverlay(ctx) {
+        ctx.save();
+        drawMenuBar(ctx);
+        drawDesktopWidgets(ctx);
+        drawFinderWindow(ctx);
+        ctx.textBaseline = "top";
+        if (S.macToastOpacity > 0.01) {
+          ctx.save();
+          ctx.globalAlpha = S.macToastOpacity;
+          drawNotification(ctx, S.macToastX, S.macToastY);
+          ctx.restore();
+        }
+        drawDock(ctx);
+        ctx.restore();
+      }
+
+      function captureScreens() {
+        if (!apiOk || !paintReady) return;
+        try {
+          capPhoneCtx.clearRect(0, 0, 390, 844);
+          capPhoneCtx.drawElementImage(phoneHtmlEl, 0, 0, 390, 844);
+          capLapCtx.clearRect(0, 0, 1440, 900);
+          capLapCtx.drawElementImage(lapHtmlEl, 0, 0, 1440, 900);
+          drawMacGlassOverlay(capLapCtx);
+          phoneTex.needsUpdate = true;
+          lapTex.needsUpdate = true;
+        } catch (e) {}
+      }
+
+      // ── Turntable Group (both devices rotate together for 360° orbit) ──
+      var turntable = new THREE.Group();
+      scene.add(turntable);
+
+      // ── Model Groups ───────────────────────────────────────────────────
+      var phoneGrp = new THREE.Group();
+      turntable.add(phoneGrp);
+      var lapGrp = new THREE.Group();
+      turntable.add(lapGrp);
+      var ready = 0;
+
+      var draco = new THREE.DRACOLoader();
+      draco.setDecoderPath("https://www.gstatic.com/draco/versioned/decoders/1.5.6/");
+      var loader = new THREE.GLTFLoader();
+      loader.setDRACOLoader(draco);
+
+      // MacBook
+      // The replacement device models carry UVs authored for a tiling material
+      // (the laptop panel runs u -6.3..6.3), so mapping one screen image onto
+      // them clamps at the edges and smears the last row of pixels across the
+      // whole panel. Both screens are flat planes, so derive planar UVs from
+      // the mesh's own bounds instead of trusting what shipped.
+      function planarScreenUv(mesh) {
+        var g = mesh.geometry;
+        g.computeBoundingBox();
+        var bb = g.boundingBox;
+        var pos = g.attributes.position;
+        var w = bb.max.x - bb.min.x || 1;
+        var h = bb.max.y - bb.min.y || 1;
+        var uv = new Float32Array(pos.count * 2);
+        for (var i = 0; i < pos.count; i++) {
+          uv[i * 2] = (pos.getX(i) - bb.min.x) / w;
+          uv[i * 2 + 1] = (pos.getY(i) - bb.min.y) / h;
+        }
+        g.setAttribute("uv", new THREE.BufferAttribute(uv, 2));
+      }
+
+      loader.load("models/macbook.glb", function (gltf) {
+        var m = gltf.scene;
+        var box = new THREE.Box3().setFromObject(m);
+        var sz = box.getSize(new THREE.Vector3());
+        var s = 4.5 / Math.max(sz.x, sz.z);
+        m.scale.setScalar(s);
+        box.setFromObject(m);
+        m.position.sub(box.getCenter(new THREE.Vector3()));
+
+        m.traverse(function (child) {
+          // `display` is the panel. `display-notch` is the bezel cut-out beside
+          // it and must keep its own material, so this cannot be a prefix test.
+          if (child.isMesh && child.name.replace(/\.\d+$/, "") === "display") {
+            planarScreenUv(child);
+            child.material = new THREE.MeshBasicMaterial({ map: lapTex });
+          }
+        });
+
+        lapGrp.add(m);
+        ready++;
+        if (ready === 1) onReady();
+      });
+
+      function onReady() {
+        waitForImages()
+          .then(function () {
+            return waitForPaint(capLapCvs);
+          })
+          .then(function () {
+            paintReady = true;
+            captureScreens();
+            render();
+          });
+      }
+
+      // ── Cubic Bezier Implementation ────────────────────────────────────
+      function cbz(p1x, p1y, p2x, p2y) {
+        var ax = 3 * p1x - 3 * p2x + 1,
+          bx = 3 * p2x - 6 * p1x,
+          cx = 3 * p1x;
+        var ay = 3 * p1y - 3 * p2y + 1,
+          by = 3 * p2y - 6 * p1y,
+          cy = 3 * p1y;
+        return function (t) {
+          var s = t;
+          for (var i = 0; i < 12; i++) {
+            var x = ((ax * s + bx) * s + cx) * s - t;
+            var dx = (3 * ax * s + 2 * bx) * s + cx;
+            if (Math.abs(dx) < 1e-10) break;
+            s -= x / dx;
+          }
+          s = Math.max(0, Math.min(1, s));
+          return ((ay * s + by) * s + cy) * s;
+        };
+      }
+
+      var enterEase = cbz(0.16, 1.0, 0.3, 1.0);
+      var spinEase = cbz(0.76, 0.0, 0.18, 1.0);
+      var driftEase = cbz(0.45, 0.0, 0.15, 1.0);
+      var snapEase = cbz(0.22, 1.15, 0.36, 1.0);
+      var breatheEase = cbz(0.37, 0.0, 0.63, 1.0);
+
+      // ── Animation State ────────────────────────────────────────────────
+      var S = {
+        phX: 0,
+        phY: 0.1,
+        phZ: 0.5,
+        phRX: 0,
+        phRY: PI,
+        phRZ: 0,
+        lpX: 10,
+        lpY: -0.2,
+        lpZ: -0.6,
+        lpRX: 0,
+        lpRY: 0,
+        lpRZ: 0,
+        cX: 0,
+        cY: 0.15,
+        cZ: 2.8,
+        clX: 0,
+        clY: 0.1,
+        clZ: 0,
+        drift: 0,
+        turn: 0,
+        cardReveal: 0,
+        titleFade: 0,
+        counter: 0,
+        macToastOpacity: 0,
+        macToastX: 1464,
+        macToastY: 62,
+        macPanel: 0,
+        p: 0,
+      };
+
+      function render() {
+        var d = S.drift;
+
+        // ── Animate live HTML content (captured to texture every frame) ──
+        // Title fade-in
+        document.getElementById("phone-title").style.opacity = S.titleFade;
+        document.getElementById("laptop-title").style.opacity = S.titleFade;
+        // Counter
+        var cnt = Math.round(S.counter);
+        document.getElementById("phone-count").textContent = "Catalog " + cnt;
+        document.getElementById("laptop-count").textContent = "Catalog " + cnt;
+        // Staggered card reveal
+        var allCards = document.querySelectorAll(".anim-card");
+        for (var ci2 = 0; ci2 < allCards.length; ci2++) {
+          var cardProgress = Math.max(0, Math.min(1, (S.cardReveal * allCards.length - ci2) * 1.5));
+          allCards[ci2].style.opacity = cardProgress;
+          allCards[ci2].style.transform = "translateY(" + (1 - cardProgress) * 15 + "px)";
+        }
+        var macToast = document.getElementById("mac-toast");
+        var macControl = document.getElementById("mac-control");
+        var macMedia = document.getElementById("mac-media");
+        if (macToast) {
+          macToast.style.opacity = S.macToastOpacity;
+          macToast.style.transform = "translateX(" + (S.macToastX - 1002) + "px)";
+          macToast.style.filter = "none";
+        }
+        if (macControl) {
+          macControl.style.opacity = 0.5 + S.macPanel * 0.5;
+          macControl.style.transform = "translateY(" + (1 - S.macPanel) * 18 + "px)";
+        }
+        if (macMedia) {
+          macMedia.style.opacity = 0.55 + S.macPanel * 0.45;
+          macMedia.style.transform = "translateY(" + (1 - S.macPanel) * 18 + "px)";
+        }
+        // Re-capture HTML to texture
+        captureScreens();
+
+        phoneGrp.position.set(
+          S.phX + Math.sin(d * 0.5) * 0.015,
+          S.phY + Math.sin(d * 0.7) * 0.008,
+          S.phZ + Math.cos(d * 0.4) * 0.008,
+        );
+        phoneGrp.rotation.set(S.phRX, S.phRY, S.phRZ);
+        lapGrp.position.set(
+          S.lpX - Math.sin(d * 0.4) * 0.012,
+          S.lpY + Math.sin(d * 0.6) * 0.006,
+          S.lpZ + Math.cos(d * 0.35) * 0.008,
+        );
+        lapGrp.rotation.set(S.lpRX, S.lpRY, S.lpRZ);
+        turntable.rotation.y = S.turn;
+        bgUniforms.uTime.value = d;
+        camera.position.set(S.cX, S.cY, S.cZ);
+        camera.lookAt(S.clX, S.clY, S.clZ);
+        renderer.render(scene, camera);
+      }
+
+      // ── GSAP Timeline — Product Review Edit ────────────────────────────
+      var tl = gsap.timeline({ paused: true });
+      window.__timelines = window.__timelines || {};
+      window.__timelines["macos-tahoe-liquid-glass"] = tl;
+
+      tl.to(S, { p: 1, drift: 15, duration: 15, ease: "none", onUpdate: render }, 0);
+
+      // ── macOS Tahoe: MacBook hero — zoomed close, slow pull-back ──
+      // Move iPhone off screen immediately
+      tl.set(S, { phX: 10 }, 0);
+      // Start MacBook centered and close
+      tl.set(S, { lpX: 0, lpRY: 0 }, 0);
+      tl.set(S, { cX: 0, clX: 0, cZ: 4.5, cY: 0.4, clY: -0.1 }, 0);
+
+      // Slow zoom out
+      tl.to(S, { cZ: 7, cY: 0.6, duration: 12, ease: driftEase }, 0.5);
+
+      // Gentle breathing tilt
+      tl.to(S, { lpRY: 0.04, duration: 4, ease: breatheEase }, 1);
+      tl.to(S, { lpRY: -0.03, duration: 4, ease: breatheEase }, 5);
+      tl.to(S, { lpRY: 0.02, duration: 4, ease: breatheEase }, 9);
+
+      // ── Live HTML Animations (captured to 3D textures every frame) ──
+      // Title fade in
+      tl.to(S, { titleFade: 1, duration: 0.8, ease: breatheEase }, 0.3);
+      // Counter animates up
+      tl.to(S, { counter: 43, duration: 2, ease: driftEase }, 0.5);
+      // Cards stagger in (0→1 reveals all cards sequentially)
+      tl.to(S, { cardReveal: 1, duration: 3, ease: breatheEase }, 0.8);
+      tl.set(S, { macToastX: 1464, macToastY: 62, macToastOpacity: 0 }, 0);
+      tl.to(S, { macToastX: 988, macToastOpacity: 1, duration: 0.38, ease: "power3.out" }, 0.45);
+      tl.to(S, { macToastX: 1002, duration: 0.16, ease: "power2.out" }, 0.83);
+      tl.to(S, { macToastY: 72, duration: 0.18, ease: "power2.out" }, 4.25);
+      tl.to(S, { macToastY: 62, duration: 0.22, ease: "power2.out" }, 4.43);
+      tl.to(S, { macPanel: 1, duration: 1.1, ease: breatheEase }, 0.45);
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/macos-tahoe-liquid-glass/models/hyperframes-desktop.png b/docs/public/catalog/blocks/macos-tahoe-liquid-glass/models/hyperframes-desktop.png
new file mode 100644
index 0000000000..2f168445ca
Binary files /dev/null and b/docs/public/catalog/blocks/macos-tahoe-liquid-glass/models/hyperframes-desktop.png differ
diff --git a/docs/public/catalog/blocks/macos-tahoe-liquid-glass/models/hyperframes-mobile.png b/docs/public/catalog/blocks/macos-tahoe-liquid-glass/models/hyperframes-mobile.png
new file mode 100644
index 0000000000..3995bb6f98
Binary files /dev/null and b/docs/public/catalog/blocks/macos-tahoe-liquid-glass/models/hyperframes-mobile.png differ
diff --git a/docs/public/catalog/blocks/macos-tahoe-liquid-glass/models/iphone.glb b/docs/public/catalog/blocks/macos-tahoe-liquid-glass/models/iphone.glb
new file mode 100644
index 0000000000..f042300855
Binary files /dev/null and b/docs/public/catalog/blocks/macos-tahoe-liquid-glass/models/iphone.glb differ
diff --git a/docs/public/catalog/blocks/macos-tahoe-liquid-glass/models/macbook.glb b/docs/public/catalog/blocks/macos-tahoe-liquid-glass/models/macbook.glb
new file mode 100644
index 0000000000..762511110a
Binary files /dev/null and b/docs/public/catalog/blocks/macos-tahoe-liquid-glass/models/macbook.glb differ
diff --git a/docs/public/catalog/blocks/mk-background/mk-background.html b/docs/public/catalog/blocks/mk-background/mk-background.html
new file mode 100644
index 0000000000..66eac9304f
--- /dev/null
+++ b/docs/public/catalog/blocks/mk-background/mk-background.html
@@ -0,0 +1,235 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      #mk-bg-root {
+        /* ---- mk tokens: override these in the host to re-skin the family ---- */
+        --mk-font: "Inter", -apple-system, sans-serif;
+        --mk-stage: #f5f5f7;
+        --mk-base: #ffffff;
+        --mk-blob-1: #ff7ac8;
+        --mk-blob-2: #45d6c8;
+        --mk-stage-dark: #000000;
+        --mk-base-dark: #0a0a0c;
+        --mk-blob-1-dark: #7d5cff;
+        --mk-blob-2-dark: #2d1b69;
+        --mk-radius-card: 40px;
+        --mk-shadow: 0 30px 80px rgba(0, 0, 0, 0.18);
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--mk-stage);
+      }
+      #mk-bg-root.mk-dark {
+        background: var(--mk-stage-dark);
+      }
+      /* The "Bar" — an animatable rounded-rect mask. Full-bleed by default,
+         animatable down to a floating card over the stage. */
+      #mk-bg-card {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        border-radius: 0;
+        background: var(--mk-base);
+        box-shadow: var(--mk-shadow);
+      }
+      .mk-dark #mk-bg-card {
+        background: var(--mk-base-dark);
+      }
+      /* Soft radial blobs — the procedural "mesh gradient". Two oversized
+         radial gradients with a long falloff, drifting slowly. */
+      .mk-bg-blob {
+        position: absolute;
+        border-radius: 50%;
+        will-change: transform;
+      }
+      #mk-bg-blob1 {
+        background: radial-gradient(
+          circle closest-side,
+          var(--mk-blob-1) 0%,
+          rgba(255, 255, 255, 0) 72%
+        );
+      }
+      #mk-bg-blob2 {
+        background: radial-gradient(
+          circle closest-side,
+          var(--mk-blob-2) 0%,
+          rgba(255, 255, 255, 0) 72%
+        );
+      }
+      .mk-dark #mk-bg-blob1 {
+        background: radial-gradient(
+          circle closest-side,
+          var(--mk-blob-1-dark) 0%,
+          rgba(0, 0, 0, 0) 72%
+        );
+      }
+      .mk-dark #mk-bg-blob2 {
+        background: radial-gradient(
+          circle closest-side,
+          var(--mk-blob-2-dark) 0%,
+          rgba(0, 0, 0, 0) 72%
+        );
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="mk-bg-root"
+      data-composition-id="mk-background"
+      data-start="0"
+      data-duration="10"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="mk-bg-card">
+        <div id="mk-bg-blob1" class="mk-bg-blob" data-layout-allow-overflow></div>
+        <div id="mk-bg-blob2" class="mk-bg-blob" data-layout-allow-overflow></div>
+      </div>
+      <div
+        id="mk-bg-drv"
+        class="clip"
+        data-start="0"
+        data-duration="10"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- published parameters (inspector-style CONFIG) ---- */
+        var CONFIG = {
+          scheme: "light", // "light" | "dark"
+          animationIn: true, // fade/settle entrance
+          animationOut: true, // fade exit
+          drift: true, // ambient blob motion
+          // Soft BG blobs: center as fraction of canvas, radius in px
+          blob1: { x: 0.28, y: 0.32, r: 950, opacity: 0.85 },
+          blob2: { x: 0.74, y: 0.66, r: 1100, opacity: 0.8 },
+          // Bar mask (rounded-rect card). demo:true plays full-bleed -> card -> full-bleed
+          bar: {
+            demo: true, // full-bleed -> rounded card -> full-bleed showcase
+            x: 240,
+            y: 140,
+            width: 1440,
+            height: 800,
+            roundness: 40,
+          },
+          // Content opacity + frost only matter with footage beneath the block
+          contentOpacity: 1,
+          frostBlur: 0, // px; e.g. 24 for the frosted-card look over footage
+        };
+
+        var W = 1920,
+          H = 1080,
+          DUR = 10;
+
+        var root = document.getElementById("mk-bg-root");
+        var card = document.getElementById("mk-bg-card");
+        var blob1 = document.getElementById("mk-bg-blob1");
+        var blob2 = document.getElementById("mk-bg-blob2");
+
+        if (CONFIG.scheme === "dark") root.classList.add("mk-dark");
+
+        function placeBlob(el, b) {
+          var d = b.r * 2;
+          el.style.width = d + "px";
+          el.style.height = d + "px";
+          el.style.left = b.x * W - b.r + "px";
+          el.style.top = b.y * H - b.r + "px";
+          el.style.opacity = String(b.opacity);
+        }
+        placeBlob(blob1, CONFIG.blob1);
+        placeBlob(blob2, CONFIG.blob2);
+
+        card.style.opacity = String(CONFIG.contentOpacity);
+        if (CONFIG.frostBlur > 0) {
+          card.style.backdropFilter = "blur(" + CONFIG.frostBlur + "px) saturate(1.4)";
+        }
+
+        var tl = gsap.timeline({ paused: true });
+
+        /* entrance — fade + blobs settle (power3, no bounce) */
+        if (CONFIG.animationIn) {
+          tl.from(root, { opacity: 0, duration: 0.7, ease: "power2.out" }, 0);
+          tl.from([blob1, blob2], { scale: 1.14, duration: 1.2, ease: "power3.out" }, 0);
+        }
+
+        /* ambient drift — slow sine yoyo, seek-safe timeline tweens */
+        if (CONFIG.drift) {
+          tl.to(
+            blob1,
+            { x: 70, y: 42, duration: 2.35, ease: "sine.inOut", yoyo: true, repeat: 3 },
+            0.3,
+          );
+          tl.to(
+            blob2,
+            { x: -84, y: -36, duration: 2.35, ease: "sine.inOut", yoyo: true, repeat: 3 },
+            0.3,
+          );
+        }
+
+        /* bar-mask demo: full-bleed -> rounded card over the stage -> full-bleed.
+           Offset via x/y transforms, not top/left: layout properties snap to
+           integer device pixels and stutter under seek-by-frame capture. The
+           card's CSS base is top:0/left:0, so the transform values match 1:1. */
+        if (CONFIG.bar.demo) {
+          tl.to(
+            card,
+            {
+              y: CONFIG.bar.y,
+              x: CONFIG.bar.x,
+              width: CONFIG.bar.width,
+              height: CONFIG.bar.height,
+              borderRadius: CONFIG.bar.roundness,
+              duration: 1.1,
+              ease: "power3.inOut",
+            },
+            3.8,
+          );
+          tl.to(
+            card,
+            {
+              y: 0,
+              x: 0,
+              width: W,
+              height: H,
+              borderRadius: 0,
+              duration: 1.0,
+              ease: "power3.inOut",
+            },
+            7.6,
+          );
+        }
+
+        /* exit + hard kill */
+        if (CONFIG.animationOut) {
+          tl.to(root, { opacity: 0, duration: 0.4, ease: "power2.in" }, DUR - 0.45);
+        }
+        tl.set(root, { visibility: "hidden" }, DUR - 0.02);
+
+        window.__timelines["mk-background"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/mk-callout-highlight/mk-callout-highlight.html b/docs/public/catalog/blocks/mk-callout-highlight/mk-callout-highlight.html
new file mode 100644
index 0000000000..f1176a4629
--- /dev/null
+++ b/docs/public/catalog/blocks/mk-callout-highlight/mk-callout-highlight.html
@@ -0,0 +1,156 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      #mk-ch-root {
+        /* ---- mk tokens: override in the host to re-skin the family ---- */
+        --mk-font: "Inter", -apple-system, sans-serif;
+        --mk-ink: #1d1d1f;
+        /* faint = transient pre-sweep tier (tweens up to full ink) — distinct from the family --mk-ink-dim */
+        --mk-ink-faint: #bcbcc2;
+        --mk-ink-dark: #f5f5f7;
+        --mk-ink-faint-dark: rgba(245, 245, 247, 0.32);
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent; /* overlays footage or mk-background */
+      }
+      #mk-ch-box {
+        position: absolute;
+        font-family: var(--mk-font);
+        font-weight: 500;
+        letter-spacing: -0.015em;
+      }
+      .mk-ch-word {
+        display: inline;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="mk-ch-root"
+      data-composition-id="mk-callout-highlight"
+      data-start="0"
+      data-duration="8"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="mk-ch-box" data-layout-allow-occlusion></div>
+      <div
+        id="mk-ch-drv"
+        class="clip"
+        data-start="0"
+        data-duration="8"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- published parameters (inspector-style CONFIG) ----
+           The mechanic: one scalar (highlight progress 0..1) sweeps word-by-word
+           emphasis across the sentence — a "highlight amount"
+           slider. Tween the scalar over the speaker's sentence to follow speech. */
+        var CONFIG = {
+          scheme: "light", // "light" (ink on light bg) | "dark" (white on footage)
+          text: "Functionality was our goal from the very beginning",
+          fontSize: 60,
+          lineHeight: 1.3,
+          maxWidth: 700, // px; sentence wraps inside this
+          x: 1030, // box left edge; null = centered horizontally
+          y: null, // box top edge; null = centered vertically
+          align: "left",
+          sweep: { start: 1.2, end: 6.2 }, // block-local seconds, linear
+          animationIn: true, // fade/rise entrance before the sweep
+          animationOut: true,
+        };
+
+        var DUR = 8;
+        var root = document.getElementById("mk-ch-root");
+        var box = document.getElementById("mk-ch-box");
+
+        var FULL = CONFIG.scheme === "dark" ? "#f5f5f7" : "#1d1d1f";
+        var FAINT = CONFIG.scheme === "dark" ? "rgba(245,245,247,0.32)" : "#bcbcc2";
+
+        box.style.fontSize = CONFIG.fontSize + "px";
+        box.style.lineHeight = String(CONFIG.lineHeight);
+        box.style.maxWidth = CONFIG.maxWidth + "px";
+        box.style.textAlign = CONFIG.align;
+
+        /* build word spans */
+        var wordEls = [];
+        CONFIG.text.split(/\s+/).forEach(function (w, i) {
+          if (i > 0) box.appendChild(document.createTextNode(" "));
+          var span = document.createElement("span");
+          span.id = "mk-ch-w-" + i;
+          span.className = "mk-ch-word";
+          span.textContent = w;
+          span.style.color = FAINT;
+          box.appendChild(span);
+          wordEls.push(span);
+        });
+
+        /* position (measure after building) */
+        var rect = box.getBoundingClientRect();
+        box.style.left =
+          (CONFIG.x === null ? Math.round((1920 - rect.width) / 2) : CONFIG.x) + "px";
+        box.style.top =
+          (CONFIG.y === null ? Math.round((1080 - rect.height) / 2) : CONFIG.y) + "px";
+
+        /* state proxy: GSAP animates st.p, render derives every word color from it */
+        var st = { p: 0 };
+        var mix = gsap.utils.interpolate(FAINT, FULL);
+        function render() {
+          var k = st.p * wordEls.length;
+          for (var i = 0; i < wordEls.length; i++) {
+            var f = Math.max(0, Math.min(1, k - i));
+            wordEls[i].style.color = mix(f);
+          }
+        }
+
+        var tl = gsap.timeline({ paused: true });
+
+        if (CONFIG.animationIn) {
+          gsap.set(box, { opacity: 0, y: 24 });
+          tl.to(box, { opacity: 1, y: 0, duration: 0.7, ease: "power3.out" }, 0.3);
+        }
+
+        /* the highlight sweep — one scalar, linear so it tracks speech evenly.
+           To follow a real voiceover, replace with several tweens between
+           per-phrase progress values (keyframes on the slider). */
+        tl.to(
+          st,
+          { p: 1, duration: CONFIG.sweep.end - CONFIG.sweep.start, ease: "none" },
+          CONFIG.sweep.start,
+        );
+
+        if (CONFIG.animationOut) {
+          tl.to(box, { opacity: 0, y: -16, duration: 0.4, ease: "power2.in" }, DUR - 0.5);
+        }
+        tl.set(root, { visibility: "hidden" }, DUR - 0.02);
+
+        tl.eventCallback("onUpdate", render);
+        render();
+
+        window.__timelines["mk-callout-highlight"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/mk-clone-wall-transition/mk-clone-wall-transition.html b/docs/public/catalog/blocks/mk-clone-wall-transition/mk-clone-wall-transition.html
new file mode 100644
index 0000000000..784aade22a
--- /dev/null
+++ b/docs/public/catalog/blocks/mk-clone-wall-transition/mk-clone-wall-transition.html
@@ -0,0 +1,225 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      #mk-cw-root {
+        /* ---- mk tokens: override in the host to re-skin the family ---- */
+        --mk-font: "Inter", -apple-system, sans-serif;
+        --mk-ink: #1d1d1f;
+        --mk-paper: #ffffff;
+        --mk-blob-1: #ff7ac8;
+        --mk-blob-2: #45d6c8;
+        --mk-radius-card: 40px;
+        --mk-shadow: 0 30px 80px rgba(0, 0, 0, 0.22);
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent;
+      }
+      /* the wall: paper sheet + tiled word rows + inversion layer, exits as one */
+      #mk-cw-wall {
+        position: absolute;
+        inset: 0;
+        background: var(--mk-paper);
+        /* no overflow:hidden — the composition root clips; isolation keeps the
+           difference blend scoped to the wall's own tiles */
+        isolation: isolate;
+      }
+      .mk-cw-row {
+        position: absolute;
+        white-space: nowrap;
+        font-family: var(--mk-font);
+        font-weight: 600;
+        letter-spacing: -0.02em;
+        color: var(--mk-ink);
+        line-height: 1;
+      }
+      .mk-cw-tile {
+        display: inline-block;
+      }
+      /* inversion sweep — a paper-colored rect in difference blend:
+         a paper-colored rect XORs the wall, flipping paper<->ink as it arrives */
+      #mk-cw-invert {
+        position: absolute;
+        inset: 0;
+        background: var(--mk-paper);
+        mix-blend-mode: difference;
+      }
+      /* the outgoing frame shrinking to a rounded card mid-transition */
+      #mk-cw-card {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        border-radius: 0;
+        overflow: hidden;
+        background: linear-gradient(
+          120deg,
+          #fdfbfd 0%,
+          var(--mk-blob-1) 38%,
+          var(--mk-blob-2) 100%
+        );
+        box-shadow: var(--mk-shadow);
+        transform-origin: 50% 50%;
+      }
+      #mk-cw-card img {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="mk-cw-root"
+      data-composition-id="mk-clone-wall-transition"
+      data-start="0"
+      data-duration="2.4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="mk-cw-wall" data-layout-allow-overflow>
+        <div id="mk-cw-tiles" data-layout-allow-overflow></div>
+        <div id="mk-cw-invert" data-layout-allow-overflow></div>
+      </div>
+      <div id="mk-cw-card" data-layout-allow-overflow></div>
+      <div
+        id="mk-cw-drv"
+        class="clip"
+        data-start="0"
+        data-duration="2.4"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- published parameters (inspector-style CONFIG) ----
+           Overlay-transition model: place this block spanning the host's cut
+           point (e.g. start 0.9s before the cut). The wall fully covers the
+           frame from ~0.6s to ~1.9s local — hard-cut the content beneath
+           anywhere in that window. */
+        var CONFIG = {
+          // no scheme param — scheme-agnostic; re-skin via the --mk-* tokens
+          word: "HyperFrames", // the cloned word
+          fontSize: 240, // px — the tiled text size
+          spreadX: 90, // px gap between tiles (tile spread X)
+          spreadY: 60, // px gap between rows (Spread Y)
+          brickOffset: true, // alternate rows offset by half a tile
+          card: {
+            enabled: true, // outgoing-frame card. In real use set src to a
+            src: null, //     still of the outgoing clip; null = family gradient
+          },
+          driftX: -46, // slow wall drift during the hold
+        };
+
+        var W = 1920,
+          H = 1080,
+          DUR = 2.4;
+
+        var root = document.getElementById("mk-cw-root");
+        var wall = document.getElementById("mk-cw-wall");
+        var tilesBox = document.getElementById("mk-cw-tiles");
+        var invert = document.getElementById("mk-cw-invert");
+        var card = document.getElementById("mk-cw-card");
+
+        /* build the tile wall — rows of repeated words, brick-offset */
+        var rowH = CONFIG.fontSize + CONFIG.spreadY;
+        var rows = Math.ceil(H / rowH) + 1;
+        /* rough tile width estimate to fill each row past both edges */
+        var tileW = CONFIG.word.length * CONFIG.fontSize * 0.58 + CONFIG.spreadX;
+        var perRow = Math.ceil(W / tileW) + 2;
+        for (var r = 0; r < rows; r++) {
+          var row = document.createElement("div");
+          row.id = "mk-cw-row-" + r;
+          row.className = "mk-cw-row";
+          /* rows intentionally run past the canvas and sit beneath the card */
+          row.setAttribute("data-layout-allow-overflow", "");
+          row.setAttribute("data-layout-allow-occlusion", "");
+          row.style.fontSize = CONFIG.fontSize + "px";
+          row.style.top = r * rowH - CONFIG.fontSize * 0.35 + "px";
+          var offset = CONFIG.brickOffset && r % 2 === 1 ? -Math.round(tileW / 2) : 0;
+          row.style.left = offset - tileW + "px";
+          for (var c = 0; c < perRow + 1; c++) {
+            var tile = document.createElement("span");
+            tile.className = "mk-cw-tile";
+            tile.textContent = CONFIG.word;
+            tile.style.marginRight = CONFIG.spreadX + "px";
+            row.appendChild(tile);
+          }
+          tilesBox.appendChild(row);
+        }
+
+        if (CONFIG.card.enabled && CONFIG.card.src) {
+          var img = document.createElement("img");
+          img.src = CONFIG.card.src;
+          card.appendChild(img);
+        }
+        if (!CONFIG.card.enabled) card.style.display = "none";
+
+        var tl = gsap.timeline({ paused: true });
+
+        /* The wall sits in place from t=0, fully hidden beneath the
+           full-bleed card — the card's shrink IS the wall's reveal. */
+
+        /* 0.2–0.95  outgoing frame shrinks to a rounded card on the wall.
+           x/y rather than left/top — layout properties snap to integer device
+           pixels under seek-by-frame capture. Base is top:0/left:0, so the
+           values carry over unchanged, and the later scale composes cleanly. */
+        if (CONFIG.card.enabled) {
+          tl.to(
+            card,
+            {
+              y: 330,
+              x: 640,
+              width: 640,
+              height: 420,
+              borderRadius: 40,
+              duration: 0.75,
+              ease: "power3.inOut",
+            },
+            0.2,
+          );
+          /* 1.35–1.75  card is put away */
+          tl.to(card, { scale: 0.6, opacity: 0, duration: 0.4, ease: "power2.in" }, 1.35);
+        }
+
+        /* slow drift keeps the wall alive during the hold */
+        tl.to(tilesBox, { x: CONFIG.driftX, duration: 1.8, ease: "sine.inOut" }, 0.3);
+
+        /* 0.85–1.5  inversion sweeps in and STAYS — wall flips ink<->paper */
+        gsap.set(invert, { x: -W });
+        tl.to(invert, { x: 0, duration: 0.65, ease: "power3.inOut" }, 0.85);
+
+        /* 1.9–2.35  the inverted wall fades off, revealing the cut beneath */
+        tl.to(wall, { opacity: 0, duration: 0.45, ease: "power2.inOut" }, 1.9);
+
+        /* hard kills — wall and card die the moment their fades complete */
+        if (CONFIG.card.enabled) tl.set(card, { visibility: "hidden" }, 1.76);
+        tl.set(root, { visibility: "hidden" }, 2.36);
+
+        window.__timelines["mk-clone-wall-transition"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/mk-line-graph/mk-line-graph.html b/docs/public/catalog/blocks/mk-line-graph/mk-line-graph.html
new file mode 100644
index 0000000000..6ff9487b3b
--- /dev/null
+++ b/docs/public/catalog/blocks/mk-line-graph/mk-line-graph.html
@@ -0,0 +1,292 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      #mk-lg-root {
+        /* ---- mk tokens: override in the host to re-skin the family ---- */
+        --mk-font: "Inter", -apple-system, sans-serif;
+        --mk-ink: #1d1d1f;
+        --mk-ink-dim: #6e6e73;
+        --mk-accent: #0071e3;
+        --mk-paper: #ffffff;
+        --mk-blob-2: #45d6c8;
+        --mk-axis: rgba(29, 29, 31, 0.22);
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent; /* overlays footage or mk-background */
+        font-family: var(--mk-font);
+      }
+      #mk-lg-svg {
+        position: absolute;
+        inset: 0;
+      }
+      .mk-lg-line {
+        fill: none;
+        stroke-width: 5;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+      .mk-lg-dot {
+        stroke-width: 4;
+        fill: var(--mk-paper);
+      }
+      .mk-lg-axis {
+        stroke: var(--mk-axis);
+        stroke-width: 2;
+      }
+      .mk-lg-value {
+        position: absolute;
+        font-weight: 600;
+        font-size: 30px;
+        letter-spacing: -0.01em;
+        color: var(--mk-ink);
+        font-variant-numeric: tabular-nums;
+        /* Horizontal centring only. The label's vertical offset is baked into
+           `top` instead of a CSS translate, because the entrance tween animates
+           `y` and GSAP rewrites this transform, dropping any vertical shift. */
+        transform: translate(-50%, 0);
+        line-height: 38px;
+        white-space: nowrap;
+      }
+      .mk-lg-xlabel {
+        position: absolute;
+        font-weight: 400;
+        font-size: 26px;
+        color: var(--mk-ink-dim);
+        transform: translateX(-50%);
+        white-space: nowrap;
+      }
+      .mk-lg-legend {
+        position: absolute;
+        display: flex;
+        gap: 40px;
+      }
+      .mk-lg-legend-item {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        font-weight: 500;
+        font-size: 30px;
+        color: var(--mk-ink-dim);
+      }
+      .mk-lg-legend-dot {
+        width: 14px;
+        height: 14px;
+        border-radius: 50%;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="mk-lg-root"
+      data-composition-id="mk-line-graph"
+      data-start="0"
+      data-duration="7"
+      data-width="1920"
+      data-height="1080"
+    >
+      <svg id="mk-lg-svg" viewBox="0 0 1920 1080"></svg>
+      <div id="mk-lg-labels"></div>
+      <div
+        id="mk-lg-drv"
+        class="clip"
+        data-start="0"
+        data-duration="7"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- published parameters (inspector-style CONFIG) ----
+           A minimal presentation line graph: 1–2 series draw on, dots pop, value labels
+           ride their points, axes dimmer than labels (clear hierarchy). */
+        var CONFIG = {
+          // no scheme param — scheme-agnostic; re-skin via the --mk-* tokens
+          series: [
+            { name: "Renders", color: null /* accent */, values: [12, 26, 22, 38, 44, 58] },
+            { name: "Projects", color: null /* blob-2 */, values: [8, 14, 18, 16, 28, 36] },
+          ],
+          xLabels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
+          showValues: true,
+          area: { x: 160, y: 240, w: 980, h: 500 }, // plot rectangle
+          animationIn: true,
+          animationOut: true,
+        };
+
+        var DUR = 7;
+        var NS = "http://www.w3.org/2000/svg";
+        var root = document.getElementById("mk-lg-root");
+        var svg = document.getElementById("mk-lg-svg");
+        var labels = document.getElementById("mk-lg-labels");
+        var A = CONFIG.area;
+
+        var accent = getComputedStyle(root).getPropertyValue("--mk-accent").trim();
+        var blob2 = getComputedStyle(root).getPropertyValue("--mk-blob-2").trim();
+        if (CONFIG.series[1] && !CONFIG.series[1].color) CONFIG.series[1].color = blob2;
+
+        /* scale: 0..max(all values)*1.15 into the plot rect */
+        var max = 0;
+        CONFIG.series.forEach(function (s) {
+          s.values.forEach(function (v) {
+            if (v > max) max = v;
+          });
+        });
+        max *= 1.15;
+        var n = CONFIG.series[0].values.length;
+        function px(i) {
+          return A.x + (i / (n - 1)) * A.w;
+        }
+        function py(v) {
+          return A.y + A.h - (v / max) * A.h;
+        }
+
+        /* baseline axis */
+        var axis = document.createElementNS(NS, "line");
+        axis.setAttribute("class", "mk-lg-axis");
+        axis.setAttribute("x1", A.x - 20);
+        axis.setAttribute("y1", A.y + A.h);
+        axis.setAttribute("x2", A.x + A.w + 20);
+        axis.setAttribute("y2", A.y + A.h);
+        axis.id = "mk-lg-axis";
+        svg.appendChild(axis);
+
+        /* series paths, dots, value labels */
+        var paths = [],
+          dots = [],
+          vals = [];
+        CONFIG.series.forEach(function (s, si) {
+          var color = s.color || accent;
+          var d = s.values
+            .map(function (v, i) {
+              return (i === 0 ? "M" : "L") + px(i) + " " + py(v);
+            })
+            .join(" ");
+          var path = document.createElementNS(NS, "path");
+          path.setAttribute("class", "mk-lg-line");
+          path.setAttribute("d", d);
+          path.setAttribute("stroke", color);
+          path.id = "mk-lg-path-" + si;
+          svg.appendChild(path);
+          paths.push(path);
+
+          s.values.forEach(function (v, i) {
+            var dot = document.createElementNS(NS, "circle");
+            dot.setAttribute("class", "mk-lg-dot");
+            dot.setAttribute("cx", px(i));
+            dot.setAttribute("cy", py(v));
+            dot.setAttribute("r", 9);
+            dot.setAttribute("stroke", color);
+            dot.id = "mk-lg-dot-" + si + "-" + i;
+            svg.appendChild(dot);
+            dots.push({ el: dot, si: si, i: i });
+
+            if (CONFIG.showValues) {
+              var val = document.createElement("div");
+              /* Series after the first label downward. With every series
+                 labelling upward the numbers collide wherever the lines run
+                 close together. GAP clears the dot radius plus line stroke. */
+              var below = si > 0;
+              var GAP = 22;
+              val.className = "mk-lg-value";
+              val.id = "mk-lg-val-" + si + "-" + i;
+              val.textContent = v;
+              val.style.left = px(i) + "px";
+              val.style.top = py(v) + (below ? GAP : -(GAP + 38)) + "px";
+              labels.appendChild(val);
+              vals.push({ el: val, si: si, i: i });
+            }
+          });
+        });
+
+        /* x labels + legend */
+        CONFIG.xLabels.slice(0, n).forEach(function (t, i) {
+          var xl = document.createElement("div");
+          xl.className = "mk-lg-xlabel";
+          xl.id = "mk-lg-xl-" + i;
+          xl.textContent = t;
+          xl.style.left = px(i) + "px";
+          xl.style.top = A.y + A.h + 24 + "px";
+          labels.appendChild(xl);
+        });
+        var legend = document.createElement("div");
+        legend.className = "mk-lg-legend";
+        legend.id = "mk-lg-legend";
+        legend.style.left = A.x + "px";
+        legend.style.top = A.y + A.h + 90 + "px";
+        CONFIG.series.forEach(function (s) {
+          var item = document.createElement("div");
+          item.className = "mk-lg-legend-item";
+          var dot = document.createElement("span");
+          dot.className = "mk-lg-legend-dot";
+          dot.style.background = s.color || accent;
+          item.appendChild(dot);
+          item.appendChild(document.createTextNode(s.name));
+          legend.appendChild(item);
+        });
+        labels.appendChild(legend);
+
+        var tl = gsap.timeline({ paused: true });
+        var DRAW = 1.3;
+
+        /* entrance: axis + x labels settle first */
+        gsap.set([axis, legend], { opacity: 0 });
+        tl.to(axis, { opacity: 1, duration: 0.5, ease: "power2.out" }, 0.2);
+        CONFIG.xLabels.slice(0, n).forEach(function (t, i) {
+          var xl = document.getElementById("mk-lg-xl-" + i);
+          gsap.set(xl, { opacity: 0, y: 10 });
+          tl.to(xl, { opacity: 1, y: 0, duration: 0.4, ease: "power2.out" }, 0.25 + i * 0.05);
+        });
+
+        /* draw each series, dots + values riding the draw front */
+        CONFIG.series.forEach(function (s, si) {
+          var t0 = (CONFIG.animationIn ? 0.5 : 0) + si * 0.35;
+          var path = paths[si];
+          var len = path.getTotalLength();
+          gsap.set(path, { strokeDasharray: len, strokeDashoffset: len });
+          tl.to(path, { strokeDashoffset: 0, duration: DRAW, ease: "power2.inOut" }, t0);
+
+          s.values.forEach(function (v, i) {
+            var dot = document.getElementById("mk-lg-dot-" + si + "-" + i);
+            var td = t0 + (i / (n - 1)) * DRAW * 0.92;
+            gsap.set(dot, { scale: 0, transformOrigin: "50% 50%" });
+            tl.to(dot, { scale: 1, duration: 0.35, ease: "back.out(1.2)" }, td);
+            if (CONFIG.showValues) {
+              var val = document.getElementById("mk-lg-val-" + si + "-" + i);
+              gsap.set(val, { opacity: 0, y: 8 });
+              tl.to(val, { opacity: 1, y: 0, duration: 0.35, ease: "power2.out" }, td + 0.06);
+            }
+          });
+        });
+
+        tl.to(legend, { opacity: 1, duration: 0.5, ease: "power2.out" }, 2.3);
+
+        /* exit + hard kill */
+        if (CONFIG.animationOut) {
+          tl.to([svg, labels], { opacity: 0, y: -20, duration: 0.4, ease: "power2.in" }, DUR - 0.5);
+        }
+        tl.set(root, { visibility: "hidden" }, DUR - 0.02);
+
+        window.__timelines["mk-line-graph"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/mk-placeholder-grid/mk-placeholder-grid.html b/docs/public/catalog/blocks/mk-placeholder-grid/mk-placeholder-grid.html
new file mode 100644
index 0000000000..1d3292defe
--- /dev/null
+++ b/docs/public/catalog/blocks/mk-placeholder-grid/mk-placeholder-grid.html
@@ -0,0 +1,233 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      #mk-pg-root {
+        /* ---- mk tokens: override in the host to re-skin the family ---- */
+        --mk-font: "Inter", -apple-system, sans-serif;
+        --mk-ink-dim: #6e6e73;
+        --mk-paper: #ffffff;
+        --mk-blob-1: #ff7ac8;
+        --mk-blob-2: #45d6c8;
+        --mk-accent-dark: #7d5cff;
+        --mk-blob-1-soft: #ffd3ec;
+        --mk-blob-2-soft: #d9fff8;
+        --mk-accent-dark-soft: #cabdff;
+        --mk-well-warm: #ffb86b;
+        --mk-well-warm-soft: #ffe3c2;
+        --mk-well-sky: #5cb8ff;
+        --mk-well-sky-soft: #cfe9ff;
+        --mk-well-rose: #ff8f8f;
+        --mk-well-rose-soft: #ffd6d6;
+        --mk-well-num: rgba(255, 255, 255, 0.9);
+        --mk-radius-card: 40px;
+        --mk-shadow: 0 24px 64px rgba(0, 0, 0, 0.16);
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent; /* pair with mk-background beneath for the gradient backdrop */
+      }
+      .mk-pg-cell {
+        position: absolute;
+        border-radius: var(--mk-radius-card);
+        overflow: hidden;
+        background: var(--mk-paper);
+        box-shadow: var(--mk-shadow);
+      }
+      .mk-pg-media {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+      /* empty drop-zone well: soft gradient + index numeral */
+      .mk-pg-well {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .mk-pg-well-num {
+        font-family: var(--mk-font);
+        font-weight: 600;
+        font-size: 88px;
+        letter-spacing: -0.02em;
+        color: var(--mk-well-num);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="mk-pg-root"
+      data-composition-id="mk-placeholder-grid"
+      data-start="0"
+      data-duration="8"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="mk-pg-grid"></div>
+      <div
+        id="mk-pg-drv"
+        class="clip"
+        data-start="0"
+        data-duration="8"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- published parameters (inspector-style CONFIG) ---- */
+        var CONFIG = {
+          // no scheme param — scheme-agnostic; re-skin via the --mk-* tokens
+          layout: "1+2", // "2up" | "3up" | "4up" | "3x2" | "1+2" (hero left + two stacked)
+          margin: 120, // outer margin, px
+          gap: 40, // px between cells
+          radius: 40, // cell corner radius (rounded-edge look)
+          // One entry per cell (in layout order). src: image path, or null for a
+          // styled drop-zone well. insideScale: media scale inside the mask —
+          // an "inside scale" convention (1 = cover-fit).
+          cells: [
+            { src: null, insideScale: 1 },
+            { src: null, insideScale: 1 },
+            { src: null, insideScale: 1 },
+          ],
+          kenBurns: true, // slow media settle inside the mask
+          stagger: 0.15, // "box, box, box" entrance
+          animationIn: true,
+          animationOut: true,
+        };
+
+        /* decorative fills for empty wells (cycled) */
+        var WELL_FILLS = [
+          "linear-gradient(135deg, var(--mk-blob-1) 0%, var(--mk-blob-1-soft) 100%)",
+          "linear-gradient(135deg, var(--mk-blob-2) 0%, var(--mk-blob-2-soft) 100%)",
+          "linear-gradient(135deg, var(--mk-accent-dark) 0%, var(--mk-accent-dark-soft) 100%)",
+          "linear-gradient(135deg, var(--mk-well-warm) 0%, var(--mk-well-warm-soft) 100%)",
+          "linear-gradient(135deg, var(--mk-well-sky) 0%, var(--mk-well-sky-soft) 100%)",
+          "linear-gradient(135deg, var(--mk-well-rose) 0%, var(--mk-well-rose-soft) 100%)",
+        ];
+
+        var W = 1920,
+          H = 1080,
+          DUR = 8;
+
+        function rects(layout, m, g) {
+          var iw = W - 2 * m,
+            ih = H - 2 * m;
+          function grid(cols, rows) {
+            var cw = (iw - (cols - 1) * g) / cols,
+              ch = (ih - (rows - 1) * g) / rows,
+              out = [];
+            for (var r = 0; r < rows; r++)
+              for (var c = 0; c < cols; c++)
+                out.push({ x: m + c * (cw + g), y: m + r * (ch + g), w: cw, h: ch });
+            return out;
+          }
+          if (layout === "2up") return grid(2, 1);
+          if (layout === "3up") return grid(3, 1);
+          if (layout === "4up") return grid(2, 2);
+          if (layout === "3x2") return grid(3, 2);
+          /* "1+2": hero left (58%), two stacked right */
+          var w1 = Math.round((iw - g) * 0.58),
+            w2 = iw - g - w1,
+            h2 = (ih - g) / 2;
+          return [
+            { x: m, y: m, w: w1, h: ih },
+            { x: m + w1 + g, y: m, w: w2, h: h2 },
+            { x: m + w1 + g, y: m + h2 + g, w: w2, h: h2 },
+          ];
+        }
+
+        var root = document.getElementById("mk-pg-root");
+        var grid = document.getElementById("mk-pg-grid");
+        var R = rects(CONFIG.layout, CONFIG.margin, CONFIG.gap);
+
+        var cells = [],
+          medias = [];
+        R.forEach(function (r, i) {
+          var conf = CONFIG.cells[i] || {};
+          var cell = document.createElement("div");
+          cell.id = "mk-pg-cell-" + i;
+          cell.className = "mk-pg-cell";
+          cell.style.left = r.x + "px";
+          cell.style.top = r.y + "px";
+          cell.style.width = r.w + "px";
+          cell.style.height = r.h + "px";
+          cell.style.borderRadius = CONFIG.radius + "px";
+
+          var inner;
+          if (conf.src) {
+            inner = document.createElement("img");
+            inner.className = "mk-pg-media";
+            inner.src = conf.src;
+          } else {
+            inner = document.createElement("div");
+            inner.className = "mk-pg-well";
+            inner.style.background = WELL_FILLS[i % WELL_FILLS.length];
+            var num = document.createElement("span");
+            num.className = "mk-pg-well-num";
+            num.textContent = String(i + 1);
+            inner.appendChild(num);
+          }
+          inner.id = "mk-pg-inner-" + i;
+          inner.setAttribute("data-layout-allow-overflow", ""); // ken-burns scales past the mask by design
+          cell.appendChild(inner);
+          grid.appendChild(cell);
+          cells.push(cell);
+          medias.push(inner);
+
+          gsap.set(inner, { scale: conf.insideScale || 1 });
+        });
+
+        var tl = gsap.timeline({ paused: true });
+
+        cells.forEach(function (cell, i) {
+          var t0 = (CONFIG.animationIn ? 0.3 : 0) + i * CONFIG.stagger;
+
+          if (CONFIG.animationIn) {
+            gsap.set(cell, { opacity: 0, scale: 0.92, y: 28 });
+            tl.to(cell, { opacity: 1, scale: 1, y: 0, duration: 0.65, ease: "power3.out" }, t0);
+          }
+
+          if (CONFIG.kenBurns) {
+            var base = (CONFIG.cells[i] && CONFIG.cells[i].insideScale) || 1;
+            tl.fromTo(
+              medias[i],
+              { scale: base * 1.06 },
+              { scale: base, duration: DUR - t0 - 0.6, ease: "sine.out" },
+              t0,
+            );
+          }
+        });
+
+        /* exit + hard kill */
+        if (CONFIG.animationOut) {
+          tl.to(grid, { opacity: 0, y: -20, duration: 0.4, ease: "power2.in" }, DUR - 0.5);
+        }
+        tl.set(root, { visibility: "hidden" }, DUR - 0.02);
+
+        window.__timelines["mk-placeholder-grid"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/mk-progress-stat/mk-progress-stat.html b/docs/public/catalog/blocks/mk-progress-stat/mk-progress-stat.html
new file mode 100644
index 0000000000..a1c0852a7e
--- /dev/null
+++ b/docs/public/catalog/blocks/mk-progress-stat/mk-progress-stat.html
@@ -0,0 +1,185 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      #mk-ps-root {
+        /* ---- mk tokens: override in the host to re-skin the family ---- */
+        --mk-font: "Inter", -apple-system, sans-serif;
+        --mk-ink: #1d1d1f;
+        --mk-ink-dim: #6e6e73;
+        --mk-ink-dark: #f5f5f7;
+        --mk-ink-dim-dark: #a1a1a6;
+        --mk-accent: #0071e3;
+        --mk-accent-dark: #7d5cff;
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent; /* overlays footage or mk-background */
+      }
+      #mk-ps-group {
+        position: absolute;
+        font-family: var(--mk-font);
+      }
+      #mk-ps-num {
+        font-weight: 600;
+        font-size: 190px;
+        line-height: 1;
+        letter-spacing: -0.03em;
+        color: var(--mk-ink);
+        font-variant-numeric: tabular-nums;
+      }
+      #mk-ps-label {
+        margin-top: 10px;
+        font-weight: 500;
+        font-size: 42px;
+        letter-spacing: -0.01em;
+        color: var(--mk-ink);
+      }
+      #mk-ps-track {
+        position: relative;
+        margin-top: 28px;
+        height: 6px;
+        border-radius: 3px;
+        background: rgba(29, 29, 31, 0.1);
+        overflow: hidden;
+      }
+      #mk-ps-fill {
+        position: absolute;
+        inset: 0;
+        border-radius: 3px;
+        background: var(--mk-accent);
+        transform-origin: left center;
+      }
+      #mk-ps-caption {
+        margin-top: 22px;
+        font-weight: 400;
+        font-size: 30px;
+        color: var(--mk-ink-dim);
+      }
+      .mk-dark #mk-ps-num,
+      .mk-dark #mk-ps-label {
+        color: var(--mk-ink-dark);
+      }
+      .mk-dark #mk-ps-caption {
+        color: var(--mk-ink-dim-dark);
+      }
+      .mk-dark #mk-ps-track {
+        background: rgba(245, 245, 247, 0.18);
+      }
+      .mk-dark #mk-ps-fill {
+        background: var(--mk-accent-dark);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="mk-ps-root"
+      data-composition-id="mk-progress-stat"
+      data-start="0"
+      data-duration="7"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="mk-ps-group">
+        <div id="mk-ps-num">0</div>
+        <div id="mk-ps-label"></div>
+        <div id="mk-ps-track"><div id="mk-ps-fill"></div></div>
+        <div id="mk-ps-caption"></div>
+      </div>
+      <div
+        id="mk-ps-drv"
+        class="clip"
+        data-start="0"
+        data-duration="7"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- published parameters (inspector-style CONFIG) ----
+           A "22 · Goals reached" progress card: big count-up
+           numeral, label, thin accent track filling to value/max, caption. */
+        var CONFIG = {
+          scheme: "light", // "light" | "dark"
+          value: 22,
+          suffix: "", // e.g. "%", "K"
+          label: "Goals reached",
+          caption: "Great job, we are getting closer!",
+          max: 30, // track fills to value/max
+          trackWidth: 480, // px
+          x: 1300, // group left edge; null = centered
+          y: 250, // group top edge; null = centered
+          animationIn: true,
+          animationOut: true,
+        };
+
+        var DUR = 7;
+        var root = document.getElementById("mk-ps-root");
+        var group = document.getElementById("mk-ps-group");
+        var num = document.getElementById("mk-ps-num");
+        var fill = document.getElementById("mk-ps-fill");
+
+        if (CONFIG.scheme === "dark") root.classList.add("mk-dark");
+        document.getElementById("mk-ps-label").textContent = CONFIG.label;
+        document.getElementById("mk-ps-caption").textContent = CONFIG.caption;
+        document.getElementById("mk-ps-track").style.width = CONFIG.trackWidth + "px";
+
+        /* position (measure after filling text) */
+        var rect = group.getBoundingClientRect();
+        group.style.left =
+          (CONFIG.x === null ? Math.round((1920 - rect.width) / 2) : CONFIG.x) + "px";
+        group.style.top =
+          (CONFIG.y === null ? Math.round((1080 - rect.height) / 2) : CONFIG.y) + "px";
+
+        var tl = gsap.timeline({ paused: true });
+
+        if (CONFIG.animationIn) {
+          gsap.set(group, { opacity: 0, y: 28 });
+          tl.to(group, { opacity: 1, y: 0, duration: 0.7, ease: "power3.out" }, 0.3);
+        }
+
+        /* count-up + track fill on the same ease (the data-viz recipe) */
+        var st = { v: 0 };
+        tl.to(
+          st,
+          {
+            v: CONFIG.value,
+            duration: 1.6,
+            ease: "power2.out",
+            onUpdate: function () {
+              num.textContent = Math.round(st.v) + CONFIG.suffix;
+            },
+          },
+          0.5,
+        );
+        gsap.set(fill, { scaleX: 0 });
+        tl.to(fill, { scaleX: CONFIG.value / CONFIG.max, duration: 1.6, ease: "power2.out" }, 0.5);
+
+        if (CONFIG.animationOut) {
+          tl.to(group, { opacity: 0, y: -20, duration: 0.4, ease: "power2.in" }, DUR - 0.5);
+        }
+        tl.set(root, { visibility: "hidden" }, DUR - 0.02);
+
+        window.__timelines["mk-progress-stat"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/mk-specs-list/mk-specs-list.html b/docs/public/catalog/blocks/mk-specs-list/mk-specs-list.html
new file mode 100644
index 0000000000..b0af58c46d
--- /dev/null
+++ b/docs/public/catalog/blocks/mk-specs-list/mk-specs-list.html
@@ -0,0 +1,222 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      #mk-sl-root {
+        /* ---- mk tokens: override in the host to re-skin the family ---- */
+        --mk-font: "Inter", -apple-system, sans-serif;
+        --mk-ink: #1d1d1f;
+        --mk-ink-dim: #6e6e73;
+        --mk-ink-dark: #f5f5f7;
+        --mk-ink-dim-dark: #a1a1a6;
+        --mk-accent: #0071e3;
+        --mk-accent-dark: #7d5cff;
+        --mk-hairline: 2px;
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent; /* overlays footage or mk-background */
+      }
+      #mk-sl-scrim {
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 62%);
+        opacity: 0;
+      }
+      #mk-sl-col {
+        position: absolute;
+        display: flex;
+        flex-direction: column;
+      }
+      .mk-sl-row {
+        font-family: var(--mk-font);
+        line-height: 1;
+        opacity: 0;
+      }
+      .mk-sl-text {
+        display: flex;
+        align-items: baseline;
+        gap: 18px;
+        white-space: nowrap;
+      }
+      .mk-sl-label {
+        font-weight: 600;
+        font-size: 46px;
+        letter-spacing: -0.015em;
+        color: var(--mk-ink);
+      }
+      .mk-sl-value {
+        font-weight: 400;
+        font-size: 40px;
+        letter-spacing: -0.01em;
+        color: var(--mk-ink-dim);
+      }
+      .mk-sl-line {
+        position: relative;
+        margin-top: 22px;
+        height: var(--mk-hairline);
+        background: rgba(0, 0, 0, 0.1);
+        border-radius: 2px;
+        overflow: hidden;
+      }
+      .mk-sl-line-fill {
+        position: absolute;
+        inset: 0;
+        background: var(--mk-accent);
+        transform-origin: left center;
+      }
+      /* dark scheme: white rows for use over footage (overlay look) */
+      .mk-dark .mk-sl-label {
+        color: var(--mk-ink-dark);
+      }
+      .mk-dark .mk-sl-value {
+        color: var(--mk-ink-dim-dark);
+      }
+      .mk-dark .mk-sl-line {
+        background: rgba(255, 255, 255, 0.18);
+      }
+      .mk-dark .mk-sl-line-fill {
+        background: var(--mk-accent-dark);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="mk-sl-root"
+      data-composition-id="mk-specs-list"
+      data-start="0"
+      data-duration="8"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="mk-sl-scrim"></div>
+      <div id="mk-sl-col"></div>
+      <div
+        id="mk-sl-drv"
+        class="clip"
+        data-start="0"
+        data-duration="8"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- published parameters (inspector-style CONFIG) ---- */
+        var CONFIG = {
+          scheme: "light", // "light" (ink rows) | "dark" (white rows, for footage)
+          rows: [
+            { label: "Design", value: "Minimal, clean lines" },
+            { label: "Typography", value: "Inter SemiBold" },
+            { label: "Motion", value: "Restrained, no bounce" },
+            { label: "Color", value: "Stage + one accent" },
+            { label: "Shapes", value: "Capsules & rounded cards" },
+          ],
+          underline: true, // accent sweep under each row
+          lineWidth: 660, // px
+          scrim: 0, // 0–1 left-edge dark scrim for readability over footage
+          x: 160, // column left edge
+          rowGap: 44, // px between rows
+          stagger: 0.18, // s between row entrances
+          animationIn: true,
+          animationOut: true,
+        };
+
+        var DUR = 8;
+        var root = document.getElementById("mk-sl-root");
+        var col = document.getElementById("mk-sl-col");
+        var scrim = document.getElementById("mk-sl-scrim");
+
+        if (CONFIG.scheme === "dark") root.classList.add("mk-dark");
+        scrim.style.opacity = String(CONFIG.scrim);
+
+        /* build rows */
+        CONFIG.rows.forEach(function (r, i) {
+          var row = document.createElement("div");
+          row.id = "mk-sl-row-" + i;
+          row.className = "mk-sl-row";
+          if (i > 0) row.style.marginTop = CONFIG.rowGap + "px";
+
+          var text = document.createElement("div");
+          text.className = "mk-sl-text";
+          var label = document.createElement("span");
+          label.className = "mk-sl-label";
+          label.textContent = r.label;
+          text.appendChild(label);
+          if (r.value) {
+            var value = document.createElement("span");
+            value.className = "mk-sl-value";
+            value.textContent = r.value;
+            text.appendChild(value);
+          }
+          row.appendChild(text);
+
+          if (CONFIG.underline) {
+            var line = document.createElement("div");
+            line.className = "mk-sl-line";
+            line.style.width = CONFIG.lineWidth + "px";
+            var fill = document.createElement("div");
+            fill.id = "mk-sl-fill-" + i;
+            fill.className = "mk-sl-line-fill";
+            line.appendChild(fill);
+            row.appendChild(line);
+          }
+          col.appendChild(row);
+        });
+
+        /* center the column vertically */
+        var colH =
+          CONFIG.rows.length * (46 + 22 + (CONFIG.underline ? 2 : 0)) +
+          (CONFIG.rows.length - 1) * CONFIG.rowGap;
+        col.style.left = CONFIG.x + "px";
+        col.style.top = Math.round((1080 - colH) / 2) + "px";
+
+        var tl = gsap.timeline({ paused: true });
+
+        CONFIG.rows.forEach(function (r, i) {
+          var row = document.getElementById("mk-sl-row-" + i);
+          var t0 = (CONFIG.animationIn ? 0.3 : 0) + i * CONFIG.stagger;
+
+          if (CONFIG.animationIn) {
+            gsap.set(row, { opacity: 0, x: -36 });
+            tl.to(row, { opacity: 1, x: 0, duration: 0.7, ease: "power3.out" }, t0);
+          } else {
+            gsap.set(row, { opacity: 1 });
+          }
+
+          if (CONFIG.underline) {
+            var fill = document.getElementById("mk-sl-fill-" + i);
+            gsap.set(fill, { scaleX: 0 });
+            tl.to(fill, { scaleX: 1, duration: 0.8, ease: "power2.inOut" }, t0 + 0.15);
+          }
+        });
+
+        /* exit + hard kill */
+        if (CONFIG.animationOut) {
+          tl.to(col, { opacity: 0, y: -20, duration: 0.4, ease: "power2.in" }, DUR - 0.5);
+          tl.to(scrim, { opacity: 0, duration: 0.4, ease: "power2.in" }, DUR - 0.5);
+        }
+        tl.set(root, { visibility: "hidden" }, DUR - 0.02);
+
+        window.__timelines["mk-specs-list"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/news-ticker/news-ticker.html b/docs/public/catalog/blocks/news-ticker/news-ticker.html
new file mode 100644
index 0000000000..024fdfd899
--- /dev/null
+++ b/docs/public/catalog/blocks/news-ticker/news-ticker.html
@@ -0,0 +1,408 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>News Ticker</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent;
+      }
+
+      body {
+        font-family: "Inter", sans-serif;
+      }
+
+      #nt-root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        color: #f8fafc;
+        background: transparent;
+      }
+
+      #nt-root .nt-shell {
+        position: absolute;
+        left: 96px;
+        right: 96px;
+        bottom: 72px;
+        height: 216px;
+        filter: drop-shadow(0 28px 44px rgba(0, 0, 0, 0.32));
+      }
+
+      #nt-root .nt-panel {
+        position: absolute;
+        inset: 0;
+        overflow: hidden;
+        border: 1px solid rgba(255, 255, 255, 0.18);
+        border-radius: 28px;
+        background:
+          linear-gradient(180deg, rgba(21, 31, 48, 0.96), rgba(7, 13, 24, 0.98)),
+          linear-gradient(90deg, rgba(201, 31, 45, 0.72), transparent 38%);
+      }
+
+      #nt-root .nt-panel::before {
+        position: absolute;
+        inset: 0;
+        content: "";
+        background:
+          radial-gradient(circle at 14% 0%, rgba(255, 255, 255, 0.2), transparent 26%),
+          linear-gradient(
+            110deg,
+            transparent 0 42%,
+            rgba(255, 255, 255, 0.06) 42% 43%,
+            transparent 43% 100%
+          );
+        opacity: 0.72;
+        pointer-events: none;
+      }
+
+      #nt-root .nt-top-row {
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        height: 126px;
+        display: flex;
+        align-items: stretch;
+      }
+
+      #nt-root .nt-brand {
+        width: 294px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 16px;
+        background: linear-gradient(135deg, #e11d2e, #9f1220);
+        box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.16);
+      }
+
+      #nt-root .nt-live-dot {
+        width: 18px;
+        height: 18px;
+        border-radius: 999px;
+        background: #ffffff;
+        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55);
+      }
+
+      #nt-root .nt-brand-text {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        text-transform: uppercase;
+      }
+
+      #nt-root .nt-live {
+        font-size: 22px;
+        font-weight: 900;
+        line-height: 1;
+        letter-spacing: 0.16em;
+      }
+
+      #nt-root .nt-desk {
+        font-size: 15px;
+        font-weight: 700;
+        line-height: 1;
+        letter-spacing: 0.22em;
+        color: #ffffff;
+      }
+
+      #nt-root .nt-headline-wrap {
+        position: relative;
+        flex: 1;
+        display: flex;
+        align-items: center;
+        padding: 0 250px 0 44px;
+        overflow: hidden;
+      }
+
+      #nt-root .nt-headline {
+        position: relative;
+        z-index: 1;
+        font-size: 48px;
+        font-weight: 850;
+        line-height: 1.02;
+        letter-spacing: 0;
+        white-space: nowrap;
+        color: #ffffff;
+        text-shadow: 0 2px 14px rgba(0, 0, 0, 0.34);
+      }
+
+      #nt-root .nt-headline-accent {
+        color: #ff4455;
+      }
+
+      #nt-root .nt-time {
+        position: absolute;
+        top: 25px;
+        right: 38px;
+        padding: 10px 16px;
+        border: 1px solid rgba(255, 255, 255, 0.18);
+        border-radius: 999px;
+        background: rgba(255, 255, 255, 0.08);
+        color: rgba(255, 255, 255, 0.74);
+        font-size: 18px;
+        font-weight: 700;
+        line-height: 1;
+        letter-spacing: 0.08em;
+        font-variant-numeric: tabular-nums;
+      }
+
+      #nt-root .nt-bottom-row {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        height: 90px;
+        display: flex;
+        align-items: center;
+        border-top: 1px solid rgba(255, 255, 255, 0.11);
+        background: rgba(2, 6, 13, 0.58);
+      }
+
+      #nt-root .nt-label {
+        width: 294px;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-right: 1px solid rgba(255, 255, 255, 0.14);
+        background: #5f0712;
+        color: #ffffff;
+        font-size: 24px;
+        font-weight: 900;
+        line-height: 1;
+        letter-spacing: 0.14em;
+        text-transform: uppercase;
+      }
+
+      #nt-root .nt-ticker-window {
+        position: relative;
+        flex: 1;
+        height: 100%;
+        overflow: hidden;
+        background: #050b15;
+      }
+
+      #nt-root .nt-ticker-window::before,
+      #nt-root .nt-ticker-window::after {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        z-index: 2;
+        width: 90px;
+        content: "";
+        pointer-events: none;
+      }
+
+      #nt-root .nt-ticker-window::before {
+        left: 0;
+        background: linear-gradient(90deg, #050b15, transparent);
+      }
+
+      #nt-root .nt-ticker-window::after {
+        right: 0;
+        background: linear-gradient(270deg, #050b15, transparent);
+      }
+
+      #nt-root .nt-ticker-track {
+        position: absolute;
+        left: 34px;
+        top: 0;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        gap: 34px;
+        white-space: nowrap;
+        will-change: transform;
+      }
+
+      #nt-root .nt-item {
+        display: inline-flex;
+        align-items: center;
+        gap: 14px;
+        padding: 13px 18px;
+        border: 1px solid rgba(255, 255, 255, 0.08);
+        border-radius: 999px;
+        background: #08111f;
+        color: #ffffff;
+        font-size: 31px;
+        font-weight: 650;
+        line-height: 1;
+        letter-spacing: 0;
+      }
+
+      #nt-root .nt-separator {
+        width: 9px;
+        height: 9px;
+        border-radius: 999px;
+        background: #e11d2e;
+        box-shadow: 0 0 22px rgba(225, 29, 46, 0.75);
+      }
+
+      #nt-root .nt-metric {
+        padding: 4px 8px;
+        border-radius: 8px;
+        background: #063344;
+        color: #c8f8ff;
+        font-weight: 850;
+        font-variant-numeric: tabular-nums;
+      }
+
+      #nt-root .nt-flash {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: -260px;
+        z-index: 3;
+        width: 210px;
+        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
+        transform: skewX(-16deg);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="nt-root"
+      data-composition-id="news-ticker"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="7"
+    >
+      <section
+        id="nt-shell"
+        class="clip nt-shell"
+        data-start="0"
+        data-duration="7"
+        data-track-index="0"
+      >
+        <div class="nt-panel">
+          <div id="nt-flash" class="nt-flash"></div>
+          <div class="nt-top-row">
+            <div id="nt-brand" class="nt-brand">
+              <div id="nt-live-dot" class="nt-live-dot"></div>
+              <div class="nt-brand-text">
+                <div class="nt-live">Live</div>
+                <div class="nt-desk">Global Desk</div>
+              </div>
+            </div>
+            <div class="nt-headline-wrap">
+              <h1 id="nt-headline" class="nt-headline">
+                AI video tools move from <span class="nt-headline-accent">prototype</span> to
+                production
+              </h1>
+              <div id="nt-time" class="nt-time">09:41 UTC</div>
+            </div>
+          </div>
+          <div class="nt-bottom-row">
+            <div id="nt-label" class="nt-label">Breaking</div>
+            <div class="nt-ticker-window">
+              <div id="nt-ticker-track" class="nt-ticker-track">
+                <span class="nt-item"
+                  ><span class="nt-separator"></span>Creator teams shorten launch cycles by
+                  <span class="nt-metric">38%</span></span
+                >
+                <span class="nt-item"
+                  ><span class="nt-separator"></span>Rendering queues clear in under
+                  <span class="nt-metric">2 min</span></span
+                >
+                <span class="nt-item"
+                  ><span class="nt-separator"></span>New catalog blocks trending across product
+                  demos</span
+                >
+                <span class="nt-item"
+                  ><span class="nt-separator"></span>Studio editors adopt HTML-first motion
+                  systems</span
+                >
+                <span class="nt-item"
+                  ><span class="nt-separator"></span>Creator teams shorten launch cycles by
+                  <span class="nt-metric">38%</span></span
+                >
+                <span class="nt-item"
+                  ><span class="nt-separator"></span>Rendering queues clear in under
+                  <span class="nt-metric">2 min</span></span
+                >
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      var tl = gsap.timeline({ paused: true });
+      var shell = document.getElementById("nt-shell");
+      var brand = document.getElementById("nt-brand");
+      var headline = document.getElementById("nt-headline");
+      var label = document.getElementById("nt-label");
+      var tickerTrack = document.getElementById("nt-ticker-track");
+      var liveDot = document.getElementById("nt-live-dot");
+      var flash = document.getElementById("nt-flash");
+      var time = document.getElementById("nt-time");
+
+      gsap.set(shell, { y: 260, opacity: 0 });
+      gsap.set(brand, { x: -80, opacity: 0 });
+      gsap.set(headline, { y: 26, opacity: 0, clipPath: "inset(0 100% 0 0)" });
+      gsap.set(label, { y: 18, opacity: 0 });
+      gsap.set(time, { y: -10, opacity: 0 });
+      gsap.set(tickerTrack, { x: 1260 });
+
+      tl.to(shell, { y: 0, opacity: 1, duration: 0.52, ease: "power4.out" }, 0);
+      tl.to(brand, { x: 0, opacity: 1, duration: 0.42, ease: "power3.out" }, 0.08);
+      tl.to(
+        headline,
+        {
+          y: 0,
+          opacity: 1,
+          clipPath: "inset(0 0% 0 0)",
+          duration: 0.62,
+          ease: "power3.out",
+        },
+        0.18,
+      );
+      tl.to(time, { y: 0, opacity: 1, duration: 0.32, ease: "power2.out" }, 0.5);
+      tl.to(label, { y: 0, opacity: 1, duration: 0.28, ease: "power2.out" }, 0.55);
+      tl.to(flash, { x: 2040, duration: 0.86, ease: "power2.inOut" }, 0.34);
+      tl.to(
+        tickerTrack,
+        {
+          x: -1120,
+          duration: 6.05,
+          ease: "none",
+        },
+        0.62,
+      );
+      tl.to(
+        liveDot,
+        {
+          scale: 1.32,
+          boxShadow: "0 0 0 18px rgba(255,255,255,0)",
+          duration: 0.42,
+          repeat: 11,
+          yoyo: true,
+          ease: "sine.inOut",
+        },
+        0.58,
+      );
+      tl.to(flash, { x: 4080, duration: 0.72, ease: "power2.inOut" }, 3.42);
+      tl.to(shell, { y: 170, opacity: 0, duration: 0.34, ease: "power3.in" }, 6.62);
+
+      window.__timelines["news-ticker"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/north-korea-locked-down/assets/korea-map.png b/docs/public/catalog/blocks/north-korea-locked-down/assets/korea-map.png
new file mode 100644
index 0000000000..3b7c4ba981
Binary files /dev/null and b/docs/public/catalog/blocks/north-korea-locked-down/assets/korea-map.png differ
diff --git a/docs/public/catalog/blocks/north-korea-locked-down/north-korea-locked-down.html b/docs/public/catalog/blocks/north-korea-locked-down/north-korea-locked-down.html
new file mode 100644
index 0000000000..bd40ca0099
--- /dev/null
+++ b/docs/public/catalog/blocks/north-korea-locked-down/north-korea-locked-down.html
@@ -0,0 +1,305 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #eef3f4;
+        font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
+      }
+
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #eef3f4;
+        color: #151515;
+      }
+
+      .camera {
+        position: absolute;
+        inset: 0;
+        z-index: 0;
+        transform-origin: 50% 51%;
+        will-change: transform, filter;
+      }
+
+      .map {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
+      .paper-depth {
+        position: absolute;
+        inset: 0;
+        background:
+          radial-gradient(circle at 52% 50%, rgba(255, 255, 255, 0.08), transparent 28%),
+          linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(10, 20, 24, 0.12));
+        mix-blend-mode: multiply;
+        pointer-events: none;
+      }
+
+      .annotation {
+        position: absolute;
+        left: 652px;
+        top: 235px;
+        z-index: 4;
+        width: 560px;
+        height: 392px;
+        overflow: visible;
+        transform-origin: center;
+        will-change: transform, opacity;
+      }
+
+      .scribble {
+        position: absolute;
+        inset: 0;
+        width: 560px;
+        height: 392px;
+        overflow: visible;
+      }
+
+      .scribble path {
+        fill: none;
+        stroke: #e21d2f;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        filter: drop-shadow(0 8px 12px rgba(226, 29, 47, 0.24));
+      }
+
+      #circle-a {
+        stroke-width: 12;
+        stroke-dasharray: 980;
+        stroke-dashoffset: 980;
+      }
+
+      #circle-b {
+        stroke-width: 6;
+        opacity: 0.82;
+        stroke-dasharray: 910;
+        stroke-dashoffset: 910;
+      }
+
+      .label {
+        position: absolute;
+        left: 50%;
+        top: -146px;
+        transform: translateX(-50%) scale(0.82);
+        transform-origin: 50% 100%;
+        min-width: 370px;
+        padding: 18px 26px 20px;
+        border-radius: 18px;
+        color: #ffffff;
+        background: #111111;
+        box-shadow:
+          0 22px 54px rgba(25, 4, 7, 0.24),
+          inset 0 0 0 1px rgba(255, 255, 255, 0.12);
+        font-size: 60px;
+        line-height: 0.9;
+        font-weight: 900;
+        letter-spacing: 0;
+        text-align: center;
+        text-transform: uppercase;
+        opacity: 0;
+      }
+
+      .label::after {
+        content: "";
+        position: absolute;
+        left: 50%;
+        bottom: -16px;
+        width: 32px;
+        height: 32px;
+        background: #111111;
+        transform: translateX(-50%) rotate(45deg);
+      }
+
+      .red-wash {
+        position: absolute;
+        inset: 0;
+        z-index: 2;
+        background:
+          radial-gradient(
+            circle at 50% 48%,
+            rgba(255, 59, 48, 0.3),
+            rgba(255, 59, 48, 0.06) 42%,
+            rgba(79, 0, 8, 0.22) 100%
+          ),
+          linear-gradient(90deg, rgba(99, 0, 12, 0.12), rgba(255, 59, 48, 0.2));
+        opacity: 0;
+        mix-blend-mode: multiply;
+        pointer-events: none;
+      }
+
+      .scanline {
+        position: absolute;
+        inset: 0;
+        z-index: 3;
+        opacity: 0;
+        background: repeating-linear-gradient(
+          0deg,
+          rgba(65, 0, 0, 0.12) 0,
+          rgba(65, 0, 0, 0.12) 1px,
+          transparent 1px,
+          transparent 7px
+        );
+        mix-blend-mode: multiply;
+        pointer-events: none;
+      }
+
+      .corner {
+        position: absolute;
+        z-index: 6;
+        width: 84px;
+        height: 84px;
+        border-color: rgba(17, 17, 17, 0.62);
+        opacity: 0;
+      }
+
+      .corner.tl {
+        left: 86px;
+        top: 78px;
+        border-top: 5px solid;
+        border-left: 5px solid;
+      }
+
+      .corner.tr {
+        right: 86px;
+        top: 78px;
+        border-top: 5px solid;
+        border-right: 5px solid;
+      }
+
+      .corner.bl {
+        left: 86px;
+        bottom: 78px;
+        border-bottom: 5px solid;
+        border-left: 5px solid;
+      }
+
+      .corner.br {
+        right: 86px;
+        bottom: 78px;
+        border-bottom: 5px solid;
+        border-right: 5px solid;
+      }
+
+      .attribution {
+        position: absolute;
+        right: 28px;
+        bottom: 22px;
+        z-index: 7;
+        color: rgba(17, 17, 17, 0.44);
+        font-size: 19px;
+        font-weight: 650;
+        opacity: 0.7;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="north-korea-locked-down"
+      data-root="true"
+      data-start="0"
+      data-duration="7"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="camera" class="camera">
+        <img class="map" src="assets/korea-map.png" alt="" />
+        <div class="paper-depth"></div>
+      </div>
+
+      <div id="annotation" class="annotation">
+        <div id="label" class="label">LOCKED<br />DOWN</div>
+        <svg class="scribble" viewBox="0 0 560 392" aria-hidden="true" data-layout-ignore>
+          <path
+            id="circle-a"
+            d="M 74 211 C 42 119 118 42 254 36 C 410 30 524 111 508 222 C 494 320 350 377 208 346 C 94 322 37 278 74 211"
+          />
+          <path
+            id="circle-b"
+            d="M 92 231 C 33 150 105 55 243 44 C 408 31 529 126 501 244 C 480 334 335 370 197 342 C 83 319 47 269 92 231"
+          />
+        </svg>
+      </div>
+
+      <div id="redWash" class="red-wash"></div>
+      <div id="scanline" class="scanline"></div>
+      <div class="corner tl"></div>
+      <div class="corner tr"></div>
+      <div class="corner bl"></div>
+      <div class="corner br"></div>
+      <div class="attribution">© OpenStreetMap contributors © CARTO</div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      const tl = gsap.timeline({
+        paused: true,
+        defaults: { overwrite: "auto" },
+      });
+
+      tl.fromTo(
+        "#camera",
+        { scale: 0.92, x: -70, y: 18, filter: "saturate(0.92) contrast(0.98)" },
+        {
+          scale: 2.12,
+          x: -56,
+          y: -22,
+          filter: "saturate(1.08) contrast(1.04)",
+          duration: 3.18,
+          ease: "expo.inOut",
+        },
+        0,
+      );
+      tl.to("#camera", { scale: 2.2, x: -44, y: -34, duration: 0.42, ease: "back.out(1.5)" }, 3.18);
+      tl.from(
+        ".corner",
+        { opacity: 0, scale: 0.72, duration: 0.28, stagger: 0.035, ease: "power3.out" },
+        0.42,
+      );
+      tl.to(".corner", { opacity: 0.72, duration: 0.18, ease: "power2.out" }, 1.2);
+      tl.fromTo(
+        "#annotation",
+        { opacity: 0, scale: 0.92, x: 4, y: -4 },
+        { opacity: 1, scale: 1, x: 0, y: 0, duration: 0.16, ease: "power2.out" },
+        3.12,
+      );
+      tl.to("#circle-a", { strokeDashoffset: 0, duration: 0.62, ease: "power2.out" }, 3.24);
+      tl.to("#circle-b", { strokeDashoffset: 0, duration: 0.44, ease: "power3.out" }, 3.46);
+      tl.to("#label", { opacity: 1, scale: 1, duration: 0.28, ease: "back.out(2.1)" }, 3.78);
+      tl.to("#redWash", { opacity: 1, duration: 0.24, ease: "power2.out" }, 3.82);
+      tl.to("#scanline", { opacity: 0.44, duration: 0.18, ease: "none" }, 3.86);
+      tl.to(
+        "#annotation",
+        { scale: 1.045, duration: 0.14, yoyo: true, repeat: 1, ease: "sine.inOut" },
+        4.1,
+      );
+      tl.to("#camera", { scale: 2.06, x: -82, y: -8, duration: 2.35, ease: "sine.inOut" }, 4.2);
+      tl.to("#redWash", { opacity: 0.82, duration: 2.35, ease: "sine.inOut" }, 4.2);
+      tl.to(".corner", { opacity: 0.38, duration: 0.72, ease: "sine.inOut" }, 5.82);
+      tl.to("#label", { y: -6, duration: 0.4, yoyo: true, repeat: 1, ease: "sine.inOut" }, 5.94);
+
+      window.__timelines["north-korea-locked-down"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/nyc-paris-flight/assets/map-nyc-paris.png b/docs/public/catalog/blocks/nyc-paris-flight/assets/map-nyc-paris.png
new file mode 100644
index 0000000000..0a9d0e077a
Binary files /dev/null and b/docs/public/catalog/blocks/nyc-paris-flight/assets/map-nyc-paris.png differ
diff --git a/docs/public/catalog/blocks/nyc-paris-flight/assets/sfx-mix.wav b/docs/public/catalog/blocks/nyc-paris-flight/assets/sfx-mix.wav
new file mode 100644
index 0000000000..fff1a74458
Binary files /dev/null and b/docs/public/catalog/blocks/nyc-paris-flight/assets/sfx-mix.wav differ
diff --git a/docs/public/catalog/blocks/nyc-paris-flight/nyc-paris-flight.html b/docs/public/catalog/blocks/nyc-paris-flight/nyc-paris-flight.html
new file mode 100644
index 0000000000..6114986850
--- /dev/null
+++ b/docs/public/catalog/blocks/nyc-paris-flight/nyc-paris-flight.html
@@ -0,0 +1,525 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #f5f5f7;
+        font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
+      }
+
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #f5f5f7;
+        color: #1d1d1f;
+      }
+
+      .stage {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        background: #f5f5f7;
+      }
+
+      .map-plane {
+        position: absolute;
+        inset: 0;
+        transform-origin: 52% 48%;
+        will-change: transform, opacity;
+      }
+
+      .map-image {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
+      .soft-ocean {
+        position: absolute;
+        inset: 0;
+        background:
+          radial-gradient(circle at 50% 24%, rgba(0, 113, 227, 0.18), rgba(0, 113, 227, 0) 34%),
+          linear-gradient(180deg, rgba(245, 245, 247, 0.05), rgba(245, 245, 247, 0.3));
+        mix-blend-mode: multiply;
+        opacity: 0.72;
+      }
+
+      .route-svg,
+      .doodle-svg {
+        position: absolute;
+        inset: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: visible;
+      }
+
+      .route-glow {
+        fill: none;
+        stroke: rgba(0, 113, 227, 0.23);
+        stroke-width: 24;
+        stroke-linecap: round;
+        stroke-dasharray: 2000;
+        stroke-dashoffset: 2000;
+        filter: blur(4px);
+      }
+
+      .route-path {
+        fill: none;
+        stroke: #0071e3;
+        stroke-width: 9;
+        stroke-linecap: round;
+        stroke-dasharray: 2000;
+        stroke-dashoffset: 2000;
+        filter: drop-shadow(0 10px 20px rgba(0, 113, 227, 0.22));
+      }
+
+      .route-thread {
+        fill: none;
+        stroke: rgba(255, 255, 255, 0.86);
+        stroke-width: 3;
+        stroke-linecap: round;
+        stroke-dasharray: 2000;
+        stroke-dashoffset: 2000;
+      }
+
+      .route-tick {
+        position: absolute;
+        width: 14px;
+        height: 14px;
+        margin: -7px 0 0 -7px;
+        border-radius: 999px;
+        background: #ffffff;
+        border: 3px solid #0071e3;
+        box-shadow: 0 8px 26px rgba(0, 113, 227, 0.32);
+        opacity: 0;
+      }
+
+      .pin {
+        position: absolute;
+        width: 26px;
+        height: 26px;
+        border-radius: 999px;
+        background: #ffffff;
+        border: 7px solid #0071e3;
+        box-shadow:
+          0 15px 34px rgba(0, 0, 0, 0.18),
+          0 0 0 10px rgba(0, 113, 227, 0.12);
+        transform: translate(-50%, -50%);
+        transform-origin: center;
+        will-change: transform, opacity;
+      }
+
+      .pin::after {
+        content: "";
+        position: absolute;
+        inset: -20px;
+        border-radius: 999px;
+        border: 2px solid rgba(0, 113, 227, 0.25);
+      }
+
+      .pin-label {
+        position: absolute;
+        top: 32px;
+        min-width: 142px;
+        padding: 12px 16px 13px;
+        border-radius: 20px;
+        background: rgba(255, 255, 255, 0.84);
+        border: 1px solid rgba(255, 255, 255, 0.88);
+        color: #1d1d1f;
+        font-size: 22px;
+        font-weight: 800;
+        line-height: 1;
+        letter-spacing: 0;
+        box-shadow: 0 18px 38px rgba(29, 29, 31, 0.16);
+        backdrop-filter: blur(18px);
+        white-space: nowrap;
+      }
+
+      .pin-label span {
+        display: block;
+        margin-top: 7px;
+        color: #6e6e73;
+        font-size: 13px;
+        font-weight: 700;
+      }
+
+      #nyc-pin {
+        left: 308.41px;
+        top: 584.16px;
+      }
+
+      #nyc-pin .pin-label {
+        left: 28px;
+      }
+
+      #paris-pin {
+        left: 1611.59px;
+        top: 387.84px;
+      }
+
+      #paris-pin .pin-label {
+        right: 28px;
+      }
+
+      .plane {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 112px;
+        height: 112px;
+        offset-path: path("M 308.41 584.158 C 650 520 1120 245 1611.59 387.842");
+        offset-distance: 0%;
+        offset-rotate: auto;
+        offset-anchor: 50% 50%;
+        transform-origin: center;
+        filter: drop-shadow(0 22px 22px rgba(0, 0, 0, 0.24));
+        opacity: 1;
+        will-change: offset-distance, transform, opacity;
+      }
+
+      .plane-core {
+        position: absolute;
+        inset: 0;
+        transform-origin: center;
+        will-change: transform;
+      }
+
+      .plane svg {
+        width: 100%;
+        height: 100%;
+        overflow: visible;
+      }
+
+      .doodle-line {
+        fill: none;
+        stroke: #ff3b30;
+        stroke-width: 13;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        stroke-dasharray: 900;
+        stroke-dashoffset: 900;
+        filter: drop-shadow(0 10px 14px rgba(255, 59, 48, 0.18));
+      }
+
+      .doodle-line.secondary {
+        stroke-width: 6;
+        opacity: 0.82;
+      }
+
+      .paris-pulse {
+        position: absolute;
+        left: 1611.59px;
+        top: 387.84px;
+        width: 126px;
+        height: 126px;
+        margin: -63px 0 0 -63px;
+        border-radius: 999px;
+        border: 4px solid rgba(255, 59, 48, 0.34);
+        opacity: 0;
+      }
+
+      .landing-badge {
+        position: absolute;
+        left: 1500px;
+        top: 502px;
+        padding: 15px 20px 16px;
+        border-radius: 999px;
+        background: rgba(255, 255, 255, 0.9);
+        color: #d70015;
+        font-size: 24px;
+        font-weight: 900;
+        line-height: 1;
+        letter-spacing: 0;
+        box-shadow: 0 20px 44px rgba(29, 29, 31, 0.14);
+        opacity: 0;
+        transform: scale(0.78);
+        transform-origin: center;
+      }
+
+      .title-stack {
+        position: absolute;
+        left: 82px;
+        top: 70px;
+        z-index: 6;
+        max-width: 780px;
+        padding: 30px 34px 33px;
+        border-radius: 30px;
+        background: rgba(255, 255, 255, 0.72);
+        border: 1px solid rgba(255, 255, 255, 0.86);
+        box-shadow: 0 28px 70px rgba(29, 29, 31, 0.12);
+        backdrop-filter: blur(22px);
+      }
+
+      .eyebrow {
+        color: #6e6e73;
+        font-size: 19px;
+        font-weight: 800;
+        letter-spacing: 0;
+      }
+
+      .headline {
+        margin-top: 11px;
+        color: #1d1d1f;
+        font-size: 84px;
+        font-weight: 900;
+        line-height: 0.92;
+        letter-spacing: 0;
+      }
+
+      .headline span {
+        color: #0071e3;
+      }
+
+      .route-meta {
+        display: flex;
+        align-items: center;
+        gap: 14px;
+        margin-top: 18px;
+        color: #6e6e73;
+        font-size: 25px;
+        font-weight: 800;
+      }
+
+      .route-meta i {
+        display: block;
+        width: 54px;
+        height: 6px;
+        border-radius: 999px;
+        background: #0071e3;
+      }
+
+      .attribution {
+        position: absolute;
+        right: 28px;
+        bottom: 24px;
+        z-index: 5;
+        padding: 8px 12px;
+        border-radius: 999px;
+        background: rgba(255, 255, 255, 0.68);
+        color: rgba(29, 29, 31, 0.76);
+        font-size: 14px;
+        font-weight: 700;
+        line-height: 1;
+      }
+
+      .white-screen {
+        position: absolute;
+        inset: 0;
+        z-index: 30;
+        background: #ffffff;
+        opacity: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="nyc-paris-flight"
+      data-start="0"
+      data-duration="6"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div
+        id="flight-scene"
+        class="clip stage"
+        data-start="0"
+        data-duration="6"
+        data-track-index="0"
+      >
+        <div id="map-plane" class="map-plane" data-layout-allow-overflow>
+          <img class="map-image" src="assets/map-nyc-paris.png" alt="" />
+          <div class="soft-ocean" data-layout-ignore></div>
+
+          <svg class="route-svg" viewBox="0 0 1920 1080" aria-hidden="true" data-layout-ignore>
+            <path
+              id="route-glow"
+              class="route-glow"
+              d="M 308.41 584.158 C 650 520 1120 245 1611.59 387.842"
+            />
+            <path
+              id="route-path"
+              class="route-path"
+              d="M 308.41 584.158 C 650 520 1120 245 1611.59 387.842"
+            />
+            <path
+              id="route-thread"
+              class="route-thread"
+              d="M 308.41 584.158 C 650 520 1120 245 1611.59 387.842"
+            />
+          </svg>
+
+          <div class="route-tick" style="left: 481.8px; top: 539.7px"></div>
+          <div class="route-tick" style="left: 647.6px; top: 486.5px"></div>
+          <div class="route-tick" style="left: 824.8px; top: 430.6px"></div>
+          <div class="route-tick" style="left: 1011.5px; top: 382.4px"></div>
+          <div class="route-tick" style="left: 1206.1px; top: 352.3px"></div>
+          <div class="route-tick" style="left: 1406.7px; top: 350.7px"></div>
+
+          <div id="nyc-pin" class="pin">
+            <div class="pin-label">New York<span>JFK / NYC</span></div>
+          </div>
+
+          <div id="paris-pin" class="pin">
+            <div class="pin-label">Paris<span>CDG / FR</span></div>
+          </div>
+
+          <div id="plane" class="plane" aria-hidden="true">
+            <div id="plane-core" class="plane-core">
+              <svg viewBox="-64 -64 128 128">
+                <path
+                  d="M 58 0 C 52 -10 37 -15 15 -16 L -18 -56 C -23 -62 -34 -58 -32 -49 L -21 -15 L -48 -12 C -56 -11 -60 -6 -60 0 C -60 6 -56 11 -48 12 L -21 15 L -32 49 C -34 58 -23 62 -18 56 L 15 16 C 37 15 52 10 58 0 Z"
+                  fill="#ffffff"
+                />
+                <path
+                  d="M 54 0 C 46 -6 33 -9 14 -10 L -19 -50 C -21 -53 -25 -52 -25 -47 L -15 -10 L -49 -6 C -53 -5 -55 -2 -55 0 C -55 2 -53 5 -49 6 L -15 10 L -25 47 C -25 52 -21 53 -19 50 L 14 10 C 33 9 46 6 54 0 Z"
+                  fill="#0071e3"
+                />
+                <circle cx="18" cy="0" r="6" fill="#f5f5f7" opacity="0.95" />
+              </svg>
+            </div>
+          </div>
+
+          <svg class="doodle-svg" viewBox="0 0 1920 1080" aria-hidden="true" data-layout-ignore>
+            <path
+              id="doodle-a"
+              class="doodle-line"
+              d="M 1510 382 C 1505 323 1560 287 1627 300 C 1700 315 1740 358 1720 416 C 1705 468 1624 486 1556 462 C 1518 449 1494 417 1510 382"
+            />
+            <path
+              id="doodle-b"
+              class="doodle-line secondary"
+              d="M 1518 396 C 1488 356 1528 307 1605 296 C 1688 284 1748 338 1730 397 C 1713 453 1641 480 1570 463 C 1526 453 1504 427 1518 396"
+            />
+          </svg>
+
+          <div id="paris-pulse" class="paris-pulse"></div>
+          <div id="landing-badge" class="landing-badge">ARRIVED</div>
+        </div>
+
+        <div class="title-stack">
+          <div class="eyebrow">Six-second transatlantic hop</div>
+          <div class="headline">NEW YORK <span>TO</span> PARIS</div>
+          <div class="route-meta">
+            <i></i>
+            <p>5,837 km compressed</p>
+          </div>
+        </div>
+
+        <div class="attribution">© OpenStreetMap contributors © CARTO</div>
+        <div id="white-screen" class="white-screen"></div>
+      </div>
+
+      <audio
+        id="sfx"
+        data-start="0"
+        data-duration="6"
+        data-track-index="1"
+        src="assets/sfx-mix.wav"
+        data-volume="0.95"
+      ></audio>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      const tl = gsap.timeline({
+        paused: true,
+        defaults: { overwrite: "auto" },
+      });
+
+      tl.from(
+        "#map-plane",
+        { scale: 1.1, x: -38, y: 20, opacity: 0.94, duration: 1.05, ease: "power2.out" },
+        0.16,
+      );
+      tl.from(
+        ".title-stack",
+        { y: 28, scale: 0.97, opacity: 0, duration: 0.52, ease: "expo.out" },
+        0.24,
+      );
+      tl.from(".eyebrow", { x: -22, opacity: 0, duration: 0.36, ease: "power3.out" }, 0.32);
+      tl.from(".headline", { y: 34, opacity: 0, duration: 0.5, ease: "back.out(1.45)" }, 0.4);
+      tl.from(".route-meta", { x: -26, opacity: 0, duration: 0.38, ease: "circ.out" }, 0.58);
+
+      tl.from("#nyc-pin", { scale: 0.12, opacity: 0, duration: 0.34, ease: "back.out(2.8)" }, 0.7);
+      tl.from(
+        "#paris-pin",
+        { scale: 0.12, opacity: 0, duration: 0.34, ease: "elastic.out(1, 0.5)" },
+        0.86,
+      );
+
+      tl.from("#plane", { scale: 0.48, opacity: 0, duration: 0.3, ease: "back.out(2.2)" }, 1.08);
+      tl.to("#route-glow", { strokeDashoffset: 0, duration: 3.1, ease: "power1.inOut" }, 1.16);
+      tl.to("#route-path", { strokeDashoffset: 0, duration: 3.05, ease: "power2.inOut" }, 1.2);
+      tl.to("#route-thread", { strokeDashoffset: 0, duration: 2.92, ease: "sine.inOut" }, 1.26);
+      tl.to("#plane", { offsetDistance: "100%", duration: 3.25, ease: "sine.inOut" }, 1.17);
+      tl.to(
+        "#plane-core",
+        { scale: 1.06, duration: 0.2, repeat: 12, yoyo: true, ease: "sine.inOut" },
+        1.22,
+      );
+      tl.to("#map-plane", { scale: 1.025, duration: 3.2, ease: "sine.inOut" }, 1.28);
+
+      gsap.utils.toArray(".route-tick").forEach((tick, index) => {
+        tl.fromTo(
+          tick,
+          { scale: 0.2, opacity: 0 },
+          { scale: 1, opacity: 1, duration: 0.16, ease: "back.out(3)" },
+          1.34 + index * 0.44,
+        );
+        tl.to(
+          tick,
+          { scale: 0.6, opacity: 0.18, duration: 0.34, ease: "power2.out" },
+          1.48 + index * 0.44,
+        );
+      });
+
+      tl.from(
+        "#paris-pulse",
+        { scale: 0.52, opacity: 0, duration: 0.26, ease: "back.out(2.4)" },
+        4.06,
+      );
+      tl.to("#doodle-a", { strokeDashoffset: 0, duration: 0.54, ease: "power2.out" }, 4.18);
+      tl.to("#doodle-b", { strokeDashoffset: 0, duration: 0.36, ease: "power3.out" }, 4.36);
+      tl.to("#paris-pulse", { scale: 1.5, opacity: 0, duration: 0.58, ease: "power3.out" }, 4.64);
+
+      tl.to("#plane-core", { scale: 1.23, duration: 0.16, ease: "back.out(3)" }, 4.96);
+      tl.to("#plane-core", { scale: 0.9, duration: 0.12, ease: "power2.in" }, 5.12);
+      tl.to("#plane-core", { scale: 1, duration: 0.22, ease: "elastic.out(1, 0.45)" }, 5.24);
+      tl.to(
+        "#landing-badge",
+        { scale: 1, opacity: 1, duration: 0.28, ease: "back.out(2.4)" },
+        5.02,
+      );
+      tl.to(
+        "#landing-badge",
+        { scale: 1.06, duration: 0.16, yoyo: true, repeat: 1, ease: "sine.inOut" },
+        5.3,
+      );
+
+      tl.set("#white-screen", { opacity: 1 }, 5.5);
+
+      window.__timelines["nyc-paris-flight"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/organic-light-leak-overlay/demo-backdrop.jpg b/docs/public/catalog/blocks/organic-light-leak-overlay/demo-backdrop.jpg
new file mode 100644
index 0000000000..e7f2ba592a
Binary files /dev/null and b/docs/public/catalog/blocks/organic-light-leak-overlay/demo-backdrop.jpg differ
diff --git a/docs/public/catalog/blocks/organic-light-leak-overlay/demo.html b/docs/public/catalog/blocks/organic-light-leak-overlay/demo.html
new file mode 100644
index 0000000000..f8d15dbaea
--- /dev/null
+++ b/docs/public/catalog/blocks/organic-light-leak-overlay/demo.html
@@ -0,0 +1,77 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+
+      html,
+      body,
+      #organic-light-leak-demo {
+        width: 960px;
+        height: 540px;
+        margin: 0;
+        overflow: hidden;
+        background: #090909;
+      }
+
+      #light-leak-demo-backdrop,
+      #light-leak-demo-overlay {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+      }
+
+      #light-leak-demo-backdrop {
+        object-fit: cover;
+      }
+
+      #light-leak-demo-overlay {
+        z-index: 20;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="organic-light-leak-demo"
+      data-composition-id="organic-light-leak-demo"
+      data-start="0"
+      data-duration="4"
+      data-width="960"
+      data-height="540"
+    >
+      <img
+        id="light-leak-demo-backdrop"
+        class="clip"
+        src="./demo-backdrop.jpg"
+        alt=""
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+      />
+      <div
+        id="light-leak-demo-overlay"
+        data-composition-id="organic-light-leak-overlay"
+        data-composition-src="organic-light-leak-overlay.html"
+        data-start="0"
+        data-duration="4"
+        data-track-index="1"
+        data-width="960"
+        data-height="540"
+      ></div>
+    </div>
+
+    <script>
+      var tl = gsap.timeline({ paused: true });
+      tl.to("#light-leak-demo-backdrop", { scale: 1.025, duration: 4, ease: "none" }, 0);
+      window.__timelines = window.__timelines || {};
+      window.__timelines["organic-light-leak-demo"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/organic-light-leak-overlay/organic-light-leak-overlay.html b/docs/public/catalog/blocks/organic-light-leak-overlay/organic-light-leak-overlay.html
new file mode 100644
index 0000000000..206e92f847
--- /dev/null
+++ b/docs/public/catalog/blocks/organic-light-leak-overlay/organic-light-leak-overlay.html
@@ -0,0 +1,125 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: transparent;
+      }
+
+      #hf-light-leak {
+        position: absolute;
+        inset: -16%;
+        opacity: 0;
+        overflow: hidden;
+        pointer-events: none;
+        mix-blend-mode: screen;
+      }
+
+      #hf-light-leak .hf-leak-layer {
+        position: absolute;
+        inset: -20%;
+        will-change: opacity, transform;
+      }
+
+      #hf-light-leak .hf-leak-amber {
+        background:
+          radial-gradient(ellipse 52% 110% at 10% 58%, rgb(255 241 197 / 92%), transparent 45%),
+          radial-gradient(ellipse 72% 120% at 24% 54%, rgb(255 126 57 / 78%), transparent 66%);
+        filter: blur(2.8vmin);
+      }
+
+      #hf-light-leak .hf-leak-red {
+        background: radial-gradient(
+          ellipse 58% 105% at 78% 34%,
+          rgb(255 79 61 / 72%),
+          rgb(255 44 92 / 28%) 48%,
+          transparent 76%
+        );
+        filter: blur(4vmin);
+      }
+
+      #hf-light-leak .hf-leak-gold {
+        background: linear-gradient(
+          104deg,
+          transparent 24%,
+          rgb(255 144 62 / 30%) 40%,
+          rgb(255 247 205 / 72%) 51%,
+          rgb(255 124 48 / 22%) 62%,
+          transparent 78%
+        );
+        filter: blur(2vmin);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="organic-light-leak-overlay"
+      data-composition-id="organic-light-leak-overlay"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="hf-light-leak" aria-hidden="true">
+        <div class="hf-leak-layer hf-leak-amber"></div>
+        <div class="hf-leak-layer hf-leak-red"></div>
+        <div class="hf-leak-layer hf-leak-gold"></div>
+      </div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      var leak = document.getElementById("hf-light-leak");
+      var host = leak && leak.closest("[data-composition-id]");
+      if (!host) throw new Error("Organic Light Leak could not find its composition host");
+
+      var compositionId = host.getAttribute("data-composition-id");
+      var duration = Number(host.getAttribute("data-duration")) || 4;
+      var tl = gsap.timeline({ paused: true });
+
+      tl.to({}, { duration: duration, ease: "none" }, 0);
+      tl.fromTo(
+        leak,
+        { opacity: 0 },
+        { opacity: 0.9, duration: duration * 0.24, ease: "sine.out" },
+        duration * 0.08,
+      );
+      tl.to(leak, { opacity: 0.46, duration: duration * 0.2, ease: "sine.inOut" }, duration * 0.42);
+      tl.to(leak, { opacity: 0, duration: duration * 0.26, ease: "sine.in" }, duration * 0.68);
+      tl.fromTo(
+        ".hf-leak-amber",
+        { xPercent: -20, scale: 0.92, rotation: -4 },
+        { xPercent: 18, scale: 1.1, rotation: 2, duration: duration, ease: "sine.inOut" },
+        0,
+      );
+      tl.fromTo(
+        ".hf-leak-red",
+        { xPercent: 20, yPercent: -8, scale: 1.08 },
+        { xPercent: -16, yPercent: 8, scale: 0.94, duration: duration, ease: "sine.inOut" },
+        0,
+      );
+      tl.fromTo(
+        ".hf-leak-gold",
+        { xPercent: -28, rotation: -6 },
+        { xPercent: 24, rotation: 4, duration: duration, ease: "sine.inOut" },
+        0,
+      );
+
+      window.__timelines[compositionId] = tl;
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/oscilloscope-trace/__hf-variables-preview.html b/docs/public/catalog/blocks/oscilloscope-trace/__hf-variables-preview.html
new file mode 100644
index 0000000000..3cc1f28c1b
--- /dev/null
+++ b/docs/public/catalog/blocks/oscilloscope-trace/__hf-variables-preview.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Oscilloscope Trace variables preview</title>
+    <style>
+      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #05070a; }
+      #hf-vars-root { position: relative; width: 1920px; height: 1080px; }
+      #hf-vars-mount { position: absolute; inset: 0; display: grid; place-items: center; }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  </head>
+  <body>
+    <div id="hf-vars-root" data-composition-id="oscilloscope-trace-variables-preview" data-start="0" data-width="1920" data-height="1080" data-duration="6" data-fps="30">
+      <div id="hf-vars-mount" class="clip" data-composition-id="oscilloscope-trace" data-composition-src="./oscilloscope-trace.html" data-start="0" data-duration="6" data-track-index="0" data-width="1920" data-height="1080"></div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["oscilloscope-trace-variables-preview"] = gsap.timeline({ paused: true });
+    </script>
+<script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "oscilloscope-trace.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/oscilloscope-trace/oscilloscope-trace.html b/docs/public/catalog/blocks/oscilloscope-trace/oscilloscope-trace.html
new file mode 100644
index 0000000000..d9812361e9
--- /dev/null
+++ b/docs/public/catalog/blocks/oscilloscope-trace/oscilloscope-trace.html
@@ -0,0 +1,536 @@
+<!doctype html>
+<html
+  lang="en"
+  data-composition-variables='[
+    {"id":"waveform","type":"enum","label":"Waveform","default":"sine","options":[{"value":"sine","label":"Sine"},{"value":"square","label":"Square"},{"value":"triangle","label":"Triangle"},{"value":"data","label":"Data series"}]},
+    {"id":"frequency","type":"number","label":"Signal frequency","unit":"Hz","default":12,"min":0.1,"max":200,"step":0.1},
+    {"id":"amplitude","type":"number","label":"Amplitude","unit":"div","default":3,"min":0.1,"max":4,"step":0.1},
+    {"id":"persistenceMs","type":"number","label":"Phosphor persistence (tau)","unit":"ms","default":100,"min":1,"max":1000,"step":1},
+    {"id":"phosphorColor","type":"color","label":"Phosphor colour","default":"#5dff8f"},
+    {"id":"sweepRate","type":"number","label":"Sweep rate","unit":"sweeps/s","default":5,"min":0.25,"max":60,"step":0.25},
+    {"id":"dataSeries","type":"string","label":"Data series (waveform=data)","default":"","placeholder":"0,0.4,0.9,0.3,-0.6,-1,-0.2,0.5"}
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Oscilloscope Trace</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #05070a;
+      }
+      #os-root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        font-family: "JetBrains Mono", ui-monospace, monospace;
+      }
+      #os-bg {
+        position: absolute;
+        inset: 0;
+        background: radial-gradient(120% 120% at 30% 25%, #0d141b 0%, #05070a 68%);
+      }
+      #os-screen {
+        position: absolute;
+        inset: 0;
+        width: 1920px;
+        height: 1080px;
+        display: block;
+      }
+      /* Purely decorative CRT falloff — no timing, no motion. */
+      #os-vignette {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        background: radial-gradient(
+          78% 78% at 34% 50%,
+          rgba(0, 0, 0, 0) 55%,
+          rgba(0, 0, 0, 0.55) 100%
+        );
+      }
+      #os-readout {
+        position: absolute;
+        left: 1250px;
+        top: 150px;
+        width: 520px;
+        color: #6f8794;
+        font-size: 26px;
+        line-height: 1.15;
+        letter-spacing: 0.04em;
+      }
+      #os-readout .os-title {
+        color: #b9ccd6;
+        font-size: 34px;
+        letter-spacing: 0.22em;
+        padding-bottom: 26px;
+        border-bottom: 2px solid #1d2a33;
+        margin-bottom: 26px;
+      }
+      #os-readout .os-row {
+        display: flex;
+        justify-content: space-between;
+        padding: 13px 0;
+      }
+      #os-readout .os-val {
+        color: #d7e6ee;
+      }
+      #os-readout .os-note {
+        margin-top: 28px;
+        font-size: 20px;
+        color: #6a7b85;
+        line-height: 1.5;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="os-root"
+      data-composition-id="oscilloscope-trace"
+      data-start="0"
+      data-duration="6"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="os-bg"></div>
+      <canvas
+        id="os-screen"
+        class="clip"
+        width="1920"
+        height="1080"
+        data-start="0"
+        data-duration="6"
+        data-track-index="0"
+      ></canvas>
+      <div id="os-vignette"></div>
+      <div id="os-readout" class="clip" data-start="0" data-duration="6" data-track-index="1">
+        <div class="os-title">OSCILLOSCOPE</div>
+        <div class="os-row"><span>SOURCE</span><span class="os-val" id="os-r-wave">SINE</span></div>
+        <div class="os-row"><span>FREQ</span><span class="os-val" id="os-r-freq">-</span></div>
+        <div class="os-row"><span>TIMEBASE</span><span class="os-val" id="os-r-time">-</span></div>
+        <div class="os-row"><span>VERT</span><span class="os-val" id="os-r-amp">-</span></div>
+        <div class="os-row"><span>PHOSPHOR</span><span class="os-val" id="os-r-phos">-</span></div>
+        <div class="os-note" id="os-r-note"></div>
+      </div>
+    </div>
+    <script>
+      (function () {
+        "use strict";
+
+        // ---------------------------------------------------------------
+        // Oscilloscope trace with phosphor persistence.
+        //
+        // Two pieces of physical truth drive the look:
+        //
+        //  1. PERSISTENCE. The phosphor keeps emitting after the beam has
+        //     passed, decaying as exp(-age/tau). Decay constants by EIA
+        //     phosphor class (research entry F#10):
+        //       P11/P31 - 0.01-1 ms   (what a real bench scope uses: no
+        //                              visible afterglow at video rates)
+        //       P1      - 80-150 ms   (the "vintage glow" look; tau ~= 100 ms
+        //                              is the entry's recommended default)
+        //       P33     - > 1 s
+        //       P2/P7   - 30 s .. ~1 min (radar territory, out of range here)
+        //     The tail window is 3*tau: after three time constants ~5% of the
+        //     brightness remains, which the entry gives as the safe cutoff.
+        //
+        //  2. BEAM-VELOCITY BRIGHTNESS. A trace is brighter where the beam
+        //     moves slower, because the same deposited energy is spread over
+        //     a shorter path. Each sub-step deposits a fixed amount of energy
+        //     (constant dt), so surface brightness goes as 1/segment-length.
+        //     Flat parts of the waveform are bright; fast vertical edges are
+        //     faint. Qualitative law only - the research entry states it with
+        //     no proportionality constant, so the reference length below is
+        //     the physical minimum (pure horizontal sweep motion), not a
+        //     fudge factor.
+        //
+        // SWEEP RATE PROVENANCE. The phosphor decay constants above are
+        // measured; the sweep rate is NOT - the research entry gives no
+        // timebase figure. The default of 5 sweeps/s is authored: across the
+        // 10-division graticule it works out to 20 ms/div, a real value from
+        // the standard 1-2-5 timebase sequence, picked because it puts a few
+        // cycles of the default signal on screen. Treat it as a dial, not as
+        // a measurement.
+        //
+        // NO FEEDBACK BUFFER. The canvas is cleared every frame and the tail
+        // is recomputed by evaluating the beam curve backwards in time from
+        // the current frame: P(t - k*dt) for k = 0..K. Frame N depends only
+        // on N, so seeking anywhere is exact rather than approximate.
+        // ---------------------------------------------------------------
+
+        var COMP_ID = "oscilloscope-trace";
+        var DURATION = 6;
+
+        // Screen geometry: a 10x8 division graticule of SQUARE divisions,
+        // the standard CRT scope face.
+        var DIV = 100;
+        var DIVS_X = 10;
+        var DIVS_Y = 8;
+        var SW = DIV * DIVS_X;
+        var SH = DIV * DIVS_Y;
+        var SX = 140;
+        var SY = 140;
+        var CY = SY + SH / 2;
+
+        // Tail window in time constants (research entry F#10: 3*tau leaves
+        // ~5% weight, stated there as the safe cutoff).
+        var TAIL_TAUS = 3;
+        // Sub-step count. The entry suggests K ~= 24 steps across the window,
+        // which is enough to quantise the DECAY but far too coarse spatially:
+        // at 12 Hz the beam would advance 0.15 of a cycle per step and the
+        // trace would render as a polygon. So K is derived from how fast the
+        // beam actually moves - keep each sub-step under SEG_TARGET_PX of
+        // travel. That target and the clamps are MY numbers, not measured
+        // ones; the clamp bounds per-frame cost when persistence is long.
+        var SEG_TARGET_PX = 3;
+        var K_MIN = 120;
+        var K_MAX = 8000;
+
+        // Band-limit for the square wave. A real generator + a real scope
+        // front end both have finite bandwidth, so the edge is steep but not
+        // instantaneous; a mathematical step would make the vertical edge one
+        // sub-step long and the velocity law would erase it entirely.
+        var SQUARE_SHARPNESS = 8;
+
+        function readVariables() {
+          var api = window.__hyperframes && window.__hyperframes.getVariables;
+          if (typeof api === "function") return api() || {};
+          // Standalone fallback (raw file opened without the runtime): read
+          // the same declaration the runtime reads, so defaults have exactly
+          // one home.
+          var out = {};
+          try {
+            var raw = document.documentElement.getAttribute("data-composition-variables");
+            var decls = JSON.parse(raw || "[]");
+            for (var i = 0; i < decls.length; i++) out[decls[i].id] = decls[i].default;
+          } catch (err) {
+            /* declaration missing or malformed - fall through to hard defaults */
+          }
+          return out;
+        }
+
+        function num(value, fallback, min, max) {
+          var n = typeof value === "number" ? value : parseFloat(value);
+          if (!isFinite(n)) n = fallback;
+          return Math.min(max, Math.max(min, n));
+        }
+
+        var V = readVariables();
+        var waveform =
+          ["sine", "square", "triangle", "data"].indexOf(String(V.waveform)) >= 0
+            ? String(V.waveform)
+            : "sine";
+        var frequency = num(V.frequency, 12, 0.1, 200);
+        var amplitude = num(V.amplitude, 3, 0.1, 4);
+        var tau = num(V.persistenceMs, 100, 1, 1000) / 1000;
+        var sweepRate = num(V.sweepRate, 5, 0.25, 60);
+        var phosphor = parseColor(V.phosphorColor, [93, 255, 143]);
+
+        // waveform="data" replays a supplied series instead of a synthetic
+        // shape: comma/whitespace separated numbers, clamped to -1..1, linearly
+        // interpolated, one full pass of the series per `frequency` cycle.
+        // Empty or unparseable -> falls back to sine.
+        var series = String(V.dataSeries == null ? "" : V.dataSeries)
+          .split(/[\s,]+/)
+          .map(parseFloat)
+          .filter(function (n) {
+            return isFinite(n);
+          })
+          .map(function (n) {
+            return Math.min(1, Math.max(-1, n));
+          });
+        if (waveform === "data" && series.length < 2) waveform = "sine";
+
+        function parseColor(value, fallback) {
+          var m = /^#?([0-9a-f]{6})$/i.exec(String(value == null ? "" : value).trim());
+          if (!m) return fallback;
+          var v = parseInt(m[1], 16);
+          return [(v >> 16) & 255, (v >> 8) & 255, v & 255];
+        }
+
+        function rgba(c, a) {
+          return "rgba(" + c[0] + "," + c[1] + "," + c[2] + "," + a.toFixed(4) + ")";
+        }
+
+        // --- the signal: pure function of time, no state ------------------
+
+        function wave(t) {
+          var p = frequency * t; // cycles elapsed
+          if (waveform === "square") {
+            return Math.tanh(SQUARE_SHARPNESS * Math.sin(2 * Math.PI * p));
+          }
+          if (waveform === "triangle") {
+            return (2 / Math.PI) * Math.asin(Math.sin(2 * Math.PI * p));
+          }
+          if (waveform === "data") {
+            var frac = p - Math.floor(p);
+            var pos = frac * (series.length - 1);
+            var i = Math.floor(pos);
+            var f = pos - i;
+            var a = series[i];
+            var b = series[Math.min(series.length - 1, i + 1)];
+            return a + (b - a) * f;
+          }
+          return Math.sin(2 * Math.PI * p);
+        }
+
+        /** Horizontal sweep position, 0..1 across the graticule. */
+        function sweepU(t) {
+          var s = t * sweepRate;
+          return s - Math.floor(s);
+        }
+
+        function beamX(t) {
+          return SX + sweepU(t) * SW;
+        }
+
+        function beamY(t) {
+          return CY - wave(t) * amplitude * DIV;
+        }
+
+        // Upper bound on beam speed, in px/s, used to pick the sub-step count.
+        // Horizontal is the constant sweep; vertical is the waveform's steepest
+        // slope, which differs per shape - a band-limited square is
+        // SQUARE_SHARPNESS times steeper at its edge than a sine of the same
+        // frequency, and under-sampling exactly there is what turns the edge
+        // into a polygon.
+        var slopeBound;
+        if (waveform === "square") {
+          slopeBound = SQUARE_SHARPNESS * 2 * Math.PI * frequency;
+        } else if (waveform === "triangle") {
+          slopeBound = 4 * frequency;
+        } else if (waveform === "data") {
+          var maxStep = 0;
+          for (var si = 1; si < series.length; si++) {
+            maxStep = Math.max(maxStep, Math.abs(series[si] - series[si - 1]));
+          }
+          slopeBound = maxStep * (series.length - 1) * frequency;
+        } else {
+          slopeBound = 2 * Math.PI * frequency;
+        }
+        var beamSpeedMax = Math.sqrt(
+          Math.pow(SW * sweepRate, 2) + Math.pow(slopeBound * amplitude * DIV, 2),
+        );
+
+        // --- graticule (drawn once to an offscreen canvas) ----------------
+
+        var grat = document.createElement("canvas");
+        grat.width = 1920;
+        grat.height = 1080;
+        (function drawGraticule() {
+          var g = grat.getContext("2d");
+          g.fillStyle = "#04080a";
+          g.fillRect(SX, SY, SW, SH);
+          g.strokeStyle = "rgba(120,180,160,0.16)";
+          g.lineWidth = 1;
+          for (var i = 1; i < DIVS_X; i++) {
+            g.beginPath();
+            g.moveTo(SX + i * DIV + 0.5, SY);
+            g.lineTo(SX + i * DIV + 0.5, SY + SH);
+            g.stroke();
+          }
+          for (var j = 1; j < DIVS_Y; j++) {
+            g.beginPath();
+            g.moveTo(SX, SY + j * DIV + 0.5);
+            g.lineTo(SX + SW, SY + j * DIV + 0.5);
+            g.stroke();
+          }
+          // Centre axes carry the fine 0.2-division ticks, as on a real face.
+          g.strokeStyle = "rgba(150,205,185,0.32)";
+          var cx = SX + SW / 2 + 0.5;
+          var cy = CY + 0.5;
+          g.beginPath();
+          g.moveTo(cx, SY);
+          g.lineTo(cx, SY + SH);
+          g.moveTo(SX, cy);
+          g.lineTo(SX + SW, cy);
+          g.stroke();
+          g.strokeStyle = "rgba(150,205,185,0.42)";
+          for (var k = 1; k < DIVS_X * 5; k++) {
+            var x = SX + (k * DIV) / 5 + 0.5;
+            g.beginPath();
+            g.moveTo(x, cy - 9);
+            g.lineTo(x, cy + 9);
+            g.stroke();
+          }
+          for (var m = 1; m < DIVS_Y * 5; m++) {
+            var y = SY + (m * DIV) / 5 + 0.5;
+            g.beginPath();
+            g.moveTo(cx - 9, y);
+            g.lineTo(cx + 9, y);
+            g.stroke();
+          }
+          g.strokeStyle = "rgba(160,215,195,0.55)";
+          g.lineWidth = 2;
+          g.strokeRect(SX + 1, SY + 1, SW - 2, SH - 2);
+        })();
+
+        // --- per-frame paint ----------------------------------------------
+
+        var canvas = document.getElementById("os-screen");
+        var ctx = canvas.getContext("2d");
+
+        function draw(t) {
+          ctx.globalCompositeOperation = "source-over";
+          ctx.clearRect(0, 0, 1920, 1080);
+          ctx.drawImage(grat, 0, 0);
+
+          var windowS = TAIL_TAUS * tau;
+          var K = Math.max(
+            K_MIN,
+            Math.min(K_MAX, Math.round((windowS * beamSpeedMax) / SEG_TARGET_PX)),
+          );
+          var dt = windowS / K;
+          // Length the beam covers in one sub-step with zero vertical motion.
+          // That is the slowest the beam can ever move, so it is the maximum
+          // brightness reference and the velocity weight never exceeds 1.
+          var lRef = SW * sweepRate * dt;
+
+          ctx.globalCompositeOperation = "lighter";
+          ctx.lineCap = "round";
+
+          // Oldest -> newest, so the bright head lands on top.
+          var prevX = 0;
+          var prevY = 0;
+          var prevU = 0;
+          var havePrev = false;
+          for (var k = K; k >= 0; k--) {
+            var tk = t - k * dt;
+            if (tk < 0) {
+              // Before frame 0 the beam had not been switched on yet.
+              havePrev = false;
+              continue;
+            }
+            var u = sweepU(tk);
+            var x = SX + u * SW;
+            var y = beamY(tk);
+            if (havePrev && u >= prevU) {
+              var dx = x - prevX;
+              var dy = y - prevY;
+              var len = Math.sqrt(dx * dx + dy * dy);
+              // Beam-velocity law: brightness ~ 1 / path length per unit time.
+              var vel = len > 1e-6 ? Math.min(1, lRef / len) : 1;
+              var decay = Math.exp((-k * dt) / tau);
+              var a = decay * vel;
+              if (a > 0.002) {
+                ctx.beginPath();
+                ctx.moveTo(prevX, prevY);
+                ctx.lineTo(x, y);
+                ctx.strokeStyle = rgba(phosphor, a * 0.13);
+                ctx.lineWidth = 13;
+                ctx.stroke();
+                ctx.strokeStyle = rgba(phosphor, a * 0.9);
+                ctx.lineWidth = 3;
+                ctx.stroke();
+                if (a > 0.55) {
+                  // Overdriven phosphor saturates towards white at the head.
+                  ctx.strokeStyle =
+                    "rgba(255,255,255," + (((a - 0.55) / 0.45) * 0.7).toFixed(4) + ")";
+                  ctx.lineWidth = 1.4;
+                  ctx.stroke();
+                }
+              }
+            }
+            // Retrace is blanked on a real scope: when u wraps, drop the
+            // connecting segment instead of drawing a line back across.
+            prevX = x;
+            prevY = y;
+            prevU = u;
+            havePrev = true;
+          }
+
+          // Beam head: the spot itself, brightest point on the screen.
+          var hx = beamX(t);
+          var hy = beamY(t);
+          var glow = ctx.createRadialGradient(hx, hy, 0, hx, hy, 22);
+          glow.addColorStop(0, "rgba(255,255,255,0.95)");
+          glow.addColorStop(0.22, rgba(phosphor, 0.85));
+          glow.addColorStop(1, rgba(phosphor, 0));
+          ctx.fillStyle = glow;
+          ctx.beginPath();
+          ctx.arc(hx, hy, 22, 0, Math.PI * 2);
+          ctx.fill();
+
+          ctx.globalCompositeOperation = "source-over";
+        }
+
+        // --- readout --------------------------------------------------------
+
+        (function fillReadout() {
+          // Nearest EIA phosphor class for the chosen tau (bands from the
+          // research entry). Labelling, not simulation.
+          var tauMs = tau * 1000;
+          var cls = tauMs <= 1 ? "P31" : tauMs <= 150 ? "P1" : "P33";
+          var msPerDiv = 1000 / (sweepRate * DIVS_X);
+          function set(id, text) {
+            document.getElementById(id).textContent = text;
+          }
+          set("os-r-wave", waveform.toUpperCase());
+          set("os-r-freq", frequency.toFixed(frequency < 10 ? 2 : 1) + " Hz");
+          set(
+            "os-r-time",
+            (msPerDiv >= 10 ? msPerDiv.toFixed(0) : msPerDiv.toFixed(2)) + " ms/div",
+          );
+          set("os-r-amp", amplitude.toFixed(1) + " div pk");
+          set("os-r-phos", cls + "  tau " + tauMs.toFixed(0) + " ms");
+          set(
+            "os-r-note",
+            "Trace brightness falls as exp(-age/tau) behind the beam, and rises where the beam slows.",
+          );
+        })();
+
+        // --- timeline -------------------------------------------------------
+        //
+        // tl.eventCallback("onUpdate", ...) is NOT usable here: the runtime
+        // seeks with suppressEvents, so the callback never fires on a seek and
+        // the canvas would keep whatever the last played frame drew. A tweened
+        // property with an accessor is applied by GSAP on every render,
+        // including suppressed ones, so the repaint is driven from the setter.
+
+        var beam = { t: 0 };
+        var driver = {};
+        Object.defineProperty(driver, "t", {
+          get: function () {
+            return beam.t;
+          },
+          set: function (value) {
+            beam.t = value;
+            draw(value);
+          },
+        });
+
+        window.__timelines = window.__timelines || {};
+        var tl = gsap.timeline({ paused: true });
+        tl.to(driver, { t: DURATION, duration: DURATION, ease: "none", lazy: false }, 0);
+        window.__timelines[COMP_ID] = tl;
+
+        draw(0);
+      })();
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "oscilloscope-trace.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/blocks/rack-focus/__hf-variables-preview.html b/docs/public/catalog/blocks/rack-focus/__hf-variables-preview.html
new file mode 100644
index 0000000000..25939ab433
--- /dev/null
+++ b/docs/public/catalog/blocks/rack-focus/__hf-variables-preview.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Rack Focus variables preview</title>
+    <style>
+      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #000; }
+      #hf-vars-root { position: relative; width: 1920px; height: 1080px; }
+      #hf-vars-mount { position: absolute; inset: 0; display: grid; place-items: center; }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  </head>
+  <body>
+    <div id="hf-vars-root" data-composition-id="rack-focus-variables-preview" data-start="0" data-width="1920" data-height="1080" data-duration="6" data-fps="30">
+      <div id="hf-vars-mount" class="clip" data-composition-id="rack-focus" data-composition-src="./rack-focus.html" data-start="0" data-duration="6" data-track-index="0" data-width="1920" data-height="1080"></div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["rack-focus-variables-preview"] = gsap.timeline({ paused: true });
+    </script>
+<script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "rack-focus.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/rack-focus/rack-focus.html b/docs/public/catalog/blocks/rack-focus/rack-focus.html
new file mode 100644
index 0000000000..fab2d7a3e3
--- /dev/null
+++ b/docs/public/catalog/blocks/rack-focus/rack-focus.html
@@ -0,0 +1,621 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Rack Focus</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <!--
+      RACK FOCUS: a focus pull with real aperture bokeh.
+
+      WHAT THIS NEEDS TO READ AT ALL
+      ------------------------------
+      A focus pull is a depth effect. It only reads when the frame holds
+      content at two clearly separated depths: something near the lens and
+      something far behind it. Point it at flat, single-plane content and
+      nothing happens, exactly like a dolly zoom on a flat card.
+
+      This block therefore carries its own depth-layered scene, a night
+      exterior built from light sources spread from 1.15 m to 90 m, so it
+      works standalone. Every depth is a variable: `nearfocus` is where the
+      pull starts, `farfocus` is where it ends, and the scene's two subjects
+      sit at those depths. Change them and the subjects move with them.
+
+      WHY THIS IS NOT A BLUR
+      ----------------------
+      A CSS/Gaussian blur softens everything uniformly. A real defocus turns
+      each point of light into an image of the APERTURE, scaled by its circle
+      of confusion, so a bright point becomes a hard-edged polygon disc whose
+      size grows with distance from the focal plane, and which clips to a
+      cat's-eye toward the frame corners. Every light in this scene is
+      splatted as an aperture-shaped sprite at its own circle of confusion.
+
+      CIRCLE OF CONFUSION, from three.js BokehShader2 (MIT), Martins Upitis
+      --------------------------------------------------------------------
+      Read from examples/jsm/shaders/BokehShader2.js:
+
+          float CoC = 0.03;              // circle of confusion in mm
+                                         // (35mm film = 0.03mm)
+          float f = focalLength;         // mm
+          float d = fDepth * 1000.0;     // focal plane in mm
+          float o = depth  * 1000.0;     // object depth in mm
+          float a = (o * f) / (o - f);
+          float b = (d * f) / (d - f);
+          float c = (d - f) / (d * fstop * CoC);
+          blur = abs(a - b) * c;
+
+      `blur` comes out in units of that 0.03 mm acceptable-sharpness circle,
+      so the defocus DIAMETER on the sensor is `blur * 0.03` mm, which this
+      block converts to pixels with the sensor width. Same constants, same
+      formula, independently written, no code copied. This agrees with the
+      Zeiss thin-lens form CoC = (f²/N)·|1/S - 1/U| for S >> f.
+
+      Aperture shape is the community-standard regular-polygon boundary
+      d(θ) = cos(π/n) / cos(mod(θ, 2π/n) - π/n), n = blade count (real
+      irises ship 5, 6, 8 or 9 blades). Cat's-eye clipping is the aperture
+      intersected with two barrel openings offset along the radial direction,
+      which is the actual mechanism of mechanical vignetting.
+
+      DETERMINISM
+      -----------
+      State at frame N is computed from N. The focal distance is a closed-form
+      function of t, every circle of confusion follows from a static depth and
+      that focal distance, and the scene point cloud is built once from a
+      seeded PRNG. No accumulation, no clocks, no unseeded randomness.
+    -->
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #000;
+        overflow: hidden;
+      }
+      #rf-root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #rf-backdrop {
+        position: absolute;
+        inset: 0;
+        background: #05060a;
+      }
+      #rf-canvas {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="rf-root"
+      data-composition-id="rack-focus"
+      data-root="true"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="6"
+      data-composition-variables='[
+        {"id":"nearfocus","type":"number","label":"Near focal distance","default":1.2,"min":0.2,"max":100,"step":0.05,"unit":"m"},
+        {"id":"farfocus","type":"number","label":"Far focal distance","default":80,"min":0.3,"max":400,"step":0.5,"unit":"m"},
+        {"id":"focallength","type":"number","label":"Focal length","default":85,"min":12,"max":300,"step":1,"unit":"mm"},
+        {"id":"aperture","type":"number","label":"Aperture (f-number)","default":1.8,"min":0.95,"max":22,"step":0.05},
+        {"id":"blades","type":"number","label":"Aperture blades (bokeh shape)","default":6,"min":3,"max":14,"step":1},
+        {"id":"catseye","type":"number","label":"Cat eye clipping at the corners","default":0.62,"min":0,"max":1,"step":0.02},
+        {"id":"pullstart","type":"number","label":"Pull start","default":1.2,"min":0,"max":30,"step":0.05,"unit":"s"},
+        {"id":"pullduration","type":"number","label":"Pull duration","default":3.2,"min":0.1,"max":30,"step":0.05,"unit":"s"},
+        {"id":"pullease","type":"string","label":"Pull easing (GSAP ease)","default":"power2.inOut","placeholder":"power2.inOut"},
+        {"id":"bokeh","type":"number","label":"Bokeh exposure","default":1,"min":0,"max":3,"step":0.05},
+        {"id":"backdrop","type":"color","label":"Backdrop","default":"#05060a"}
+      ]'
+    >
+      <div id="rf-backdrop"></div>
+      <canvas id="rf-canvas" width="1920" height="1080"></canvas>
+
+      <!-- Driver clip: gives HyperFrames a timed element to own on track 0. -->
+      <div
+        id="rf-drv"
+        class="clip"
+        data-start="0"
+        data-duration="6"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+
+    <script>
+      (function () {
+        var DUR = 6;
+        var W = 1920;
+        var H = 1080;
+
+        // 36mm-wide sensor, 16:9 active area. Pixels per millimetre is the
+        // only thing the projection needs, and it is the same on both axes.
+        var SENSOR_W_MM = 36;
+        var PX_PER_MM = W / SENSOR_W_MM;
+
+        // BokehShader2's acceptable-sharpness circle, in mm (35mm film).
+        var COC_MM = 0.03;
+
+        // Defocus is clamped so a wildly out-of-range focus setting cannot
+        // splat sprites the size of the frame. BokehShader2 clamps the same
+        // quantity with its `maxblur` uniform.
+        var MAX_COC_R_PX = 0.1 * H;
+        // Smallest sprite half-width. Below roughly one pixel a splat is an
+        // aliasing machine, so points in focus bottom out here.
+        var MIN_R_PX = 0.75;
+
+        var V = (window.__hyperframes && window.__hyperframes.getVariables()) || {};
+        var CS = getComputedStyle(document.getElementById("rf-root"));
+
+        // The runtime defines every declared variable as `--<slug>` on the
+        // root (packages/core/src/tokenSlug.ts), so a host stylesheet can
+        // override one there too. Read the custom property first, fall back
+        // to the declared value when it is unset.
+        function raw(id) {
+          var css = CS.getPropertyValue("--" + id.toLowerCase()).trim();
+          return css !== "" ? css : V[id];
+        }
+        function num(id, fallback) {
+          var n = parseFloat(raw(id));
+          return isFinite(n) ? n : fallback;
+        }
+
+        var NEAR = num("nearfocus", 1.2);
+        var FAR = num("farfocus", 80);
+        var FOCAL = num("focallength", 85);
+        var FSTOP = num("aperture", 1.8);
+        var BLADES = Math.max(3, Math.round(num("blades", 6)));
+        var CATSEYE = num("catseye", 0.62);
+        var PULL_START = num("pullstart", 1.2);
+        var PULL_DUR = Math.max(0.001, num("pullduration", 3.2));
+        var BOKEH = num("bokeh", 1);
+        var EASE_NAME = String(raw("pullease") || "power2.inOut");
+        var BACKDROP =
+          typeof raw("backdrop") === "string" && raw("backdrop") ? raw("backdrop") : "#05060a";
+
+        document.getElementById("rf-backdrop").style.background = BACKDROP;
+
+        var EASE = gsap.parseEase(EASE_NAME) || gsap.parseEase("power2.inOut");
+
+        // A focus ring is roughly linear in dioptres, not in metres: a rack
+        // from 1.2m to 80m spends its first millimetre of barrel rotation
+        // crossing most of the distance. Interpolating 1/distance is what
+        // makes the pull travel evenly instead of snapping to the far plane.
+        function focusAt(t) {
+          var u = Math.min(1, Math.max(0, (t - PULL_START) / PULL_DUR));
+          var e = EASE(u);
+          var inv = 1 / NEAR + (1 / FAR - 1 / NEAR) * e;
+          return 1 / inv;
+        }
+
+        // ── Scene ────────────────────────────────────────────────────────
+        // A night exterior: a string of practical lights right in front of
+        // the lens, a lit city block far behind it, and scattered lights
+        // through every depth between so the pull reads as a continuous
+        // travel rather than a cut between two planes.
+
+        function mulberry32(a) {
+          return function () {
+            a |= 0;
+            a = (a + 0x6d2b79f5) | 0;
+            var t = Math.imul(a ^ (a >>> 15), 1 | a);
+            t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+            return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+          };
+        }
+        var rnd = mulberry32(0x5eed1a3);
+        function rr(lo, hi) {
+          return lo + (hi - lo) * rnd();
+        }
+
+        // x, y in metres (y up, origin on the optical axis), z in metres,
+        // r0 = the light's own physical radius in metres, b = peak
+        // brightness when perfectly in focus (values above 1 are highlights
+        // that clip, which is exactly why they stay visible once spread
+        // across a bokeh disc), rgb = colour.
+        var P = [];
+        function light(x, y, z, r0, b, c) {
+          P.push(x, y, z, r0, b, c[0], c[1], c[2]);
+        }
+
+        var TUNGSTEN = [1.0, 0.74, 0.45];
+        var FILAMENT = [1.0, 0.9, 0.74];
+        var WIRE = [0.86, 0.74, 0.6];
+        var WARM_WIN = [1.0, 0.79, 0.52];
+        var COOL_WIN = [0.6, 0.75, 1.0];
+        var SIGN_A = [0.35, 0.95, 1.0];
+        var SIGN_B = [1.0, 0.42, 0.72];
+
+        // Half the frame's width, in metres, at depth z. Both subjects are
+        // laid out against the reference framing (85mm, 1.2m / 80m) and then
+        // scaled by this, so retuning the lens or either focal distance moves
+        // the subjects with the frame instead of pushing them out of it.
+        function halfW(z) {
+          return (0.5 * SENSOR_W_MM * z) / FOCAL;
+        }
+
+        // Near subject: a catenary string of bulbs at `nearfocus`. The wire is
+        // what makes "sharp" unmistakable, a one-pixel line either resolves
+        // or it does not, and the filament inside each bulb is the second cue.
+        var NEAR_Z = NEAR;
+        var NS = halfW(NEAR_Z) / 0.25412;
+        var X_END = 0.4;
+        var SAG_A = 0.3;
+        var SAG = 0.1;
+        var COSH_END = Math.cosh(X_END / SAG_A);
+        function stringY(x) {
+          var s = (COSH_END - Math.cosh(x / SAG_A)) / (COSH_END - 1);
+          return 0.075 - SAG * s - 0.035 * (x / X_END);
+        }
+        function stringZ(x) {
+          return NEAR_Z + 0.05 * (x / X_END);
+        }
+        for (var i = 0; i < 1100; i++) {
+          var wx = -0.42 + (0.84 * i) / 1099;
+          light(wx * NS, stringY(wx) * NS, stringZ(wx), 0.0006 * NS, 1.4, WIRE);
+        }
+        for (var k = -5; k <= 5; k++) {
+          var bx = k * 0.085;
+          var by = stringY(bx) - 0.011;
+          var bz = stringZ(bx);
+          light(bx * NS, by * NS, bz, 0.006 * NS, 26, TUNGSTEN);
+          light((bx - 0.0022) * NS, by * NS, bz, 0.0006 * NS, 7, FILAMENT);
+          light(bx * NS, (by - 0.0022) * NS, bz, 0.0006 * NS, 7, FILAMENT);
+          light((bx + 0.0022) * NS, by * NS, bz, 0.0006 * NS, 7, FILAMENT);
+        }
+
+        // Far subject: three lit towers plus a dense LED sign strip, sitting
+        // around `farfocus`. The sign's pitch is fine enough that it only
+        // resolves into separate lamps when focus actually arrives.
+        var FAR_Z = FAR;
+        var FS = halfW(FAR_Z) / 16.941;
+        function tower(cx, hw, topY, botY, cols, rows, z, lit) {
+          for (var c = 0; c < cols; c++) {
+            for (var r = 0; r < rows; r++) {
+              if (rnd() > lit) continue;
+              var x = cx - hw + (2 * hw * (c + 0.5)) / cols;
+              var y = botY + ((topY - botY) * (r + 0.5)) / rows;
+              var cool = rnd() < 0.28;
+              light(x, y, z + rr(-0.4, 0.4) * FS, 0.24 * FS, rr(9, 20), cool ? COOL_WIN : WARM_WIN);
+            }
+          }
+        }
+        tower(-9.5 * FS, 3.5 * FS, 9.6 * FS, -4.0 * FS, 6, 14, FAR_Z * 1.03, 0.34);
+        tower(2.0 * FS, 4.5 * FS, 6.4 * FS, -4.0 * FS, 8, 12, FAR_Z * 0.98, 0.3);
+        tower(12.5 * FS, 3.0 * FS, 11.0 * FS, -4.0 * FS, 5, 15, FAR_Z * 1.08, 0.36);
+        for (var s = 0; s < 40; s++) {
+          var sx = (-5.5 + (11 * s) / 39) * FS;
+          var mixc = s / 39;
+          var sc = [
+            SIGN_A[0] + (SIGN_B[0] - SIGN_A[0]) * mixc,
+            SIGN_A[1] + (SIGN_B[1] - SIGN_A[1]) * mixc,
+            SIGN_A[2] + (SIGN_B[2] - SIGN_A[2]) * mixc,
+          ];
+          light(sx, -5.0 * FS, FAR_Z * 0.99, 0.1 * FS, 7, sc);
+          light(sx, -5.55 * FS, FAR_Z * 0.99, 0.1 * FS, 7, sc);
+        }
+
+        // Everything between. Depth is drawn log-uniform between the two
+        // subjects and the screen position is uniform, so the mid-ground
+        // stays evenly spread whatever the two focal distances are.
+        var Z_LO = Math.min(NEAR_Z, FAR_Z) * 1.9;
+        var Z_HI = Math.max(NEAR_Z, FAR_Z) * 0.85;
+        for (var m = 0; m < 90; m++) {
+          var z = Z_LO * Math.pow(Z_HI / Z_LO, rnd());
+          var halfWm = (0.5 * SENSOR_W_MM * z) / FOCAL;
+          var halfHm = (halfWm * H) / W;
+          var warm = rnd() < 0.66;
+          light(
+            rr(-1.05, 1.05) * halfWm,
+            rr(-1.0, 0.75) * halfHm,
+            z,
+            rr(0.006, 0.05) * (z / 12),
+            rr(5, 18),
+            warm ? WARM_WIN : COOL_WIN,
+          );
+        }
+
+        // ── GL ───────────────────────────────────────────────────────────
+        var canvas = document.getElementById("rf-canvas");
+        var gl =
+          canvas.getContext("webgl", {
+            alpha: true,
+            antialias: false,
+            depth: false,
+            stencil: false,
+            preserveDrawingBuffer: true,
+            powerPreference: "high-performance",
+          }) ||
+          canvas.getContext("experimental-webgl", {
+            alpha: true,
+            preserveDrawingBuffer: true,
+          });
+
+        var VERT = [
+          "precision highp float;",
+          "attribute vec2 aCorner;", // -1..1 quad corner
+          "attribute vec3 aPos;", // metres, y up, z away from the lens
+          "attribute vec2 aSize;", // x = own radius (m), y = in-focus peak
+          "attribute vec3 aColor;",
+          "uniform vec2 uRes;",
+          "uniform float uPxPerMm;",
+          "uniform float uFocal;", // mm
+          "uniform float uFocus;", // metres
+          "uniform float uFstop;",
+          "uniform float uCoCmm;",
+          "uniform float uMaxR;",
+          "uniform float uMinR;",
+          "uniform float uCatsEye;",
+          "uniform float uBokeh;",
+          "varying vec2 vQ;",
+          "varying vec3 vColor;",
+          "varying float vGain;",
+          "varying float vShape;",
+          "varying float vAA;",
+          "varying vec2 vRadial;",
+          "varying float vCat;",
+          "void main() {",
+          "  float z = max(aPos.z, 0.001);",
+          "  float ppm = uPxPerMm * uFocal / z;", // pixels per metre at this depth
+          "  vec2 centre = uRes * 0.5 + aPos.xy * ppm;",
+          "  float r0 = max(aSize.x * ppm, uMinR);",
+          "",
+          "  // BokehShader2's circle of confusion, in units of uCoCmm.",
+          "  float f = uFocal;",
+          "  float d = uFocus * 1000.0;",
+          "  float o = z * 1000.0;",
+          "  float a = (o * f) / max(o - f, 1e-4);",
+          "  float b = (d * f) / max(d - f, 1e-4);",
+          "  float c = (d - f) / max(d * uFstop * uCoCmm, 1e-6);",
+          "  float blur = abs(a - b) * c;",
+          "  // -> defocus diameter in mm -> pixels -> radius.",
+          "  float cocR = min(blur * uCoCmm * uPxPerMm * 0.5, uMaxR);",
+          "",
+          "  // A finite source convolved with the defocus disc: radii add in",
+          "  // quadrature. Flux is conserved, so peak brightness falls as the",
+          "  // inverse square of the radius. That single term is why an",
+          "  // in-focus lamp clips to white and a defocused one is a readable",
+          "  // disc instead of a smear.",
+          "  float R = sqrt(r0 * r0 + cocR * cocR);",
+          "  vGain = aSize.y * uBokeh * (r0 * r0) / (R * R);",
+          "  // Near focus the sprite is the lamp (round); far from it the",
+          "  // sprite is an image of the aperture (polygonal).",
+          "  vShape = (cocR * cocR) / (cocR * cocR + r0 * r0);",
+          "  vAA = 1.0 / max(R, 0.5);",
+          "  vColor = aColor;",
+          "  vQ = aCorner;",
+          "",
+          "  // Mechanical vignetting: the barrel openings clip the aperture",
+          "  // harder the further the sprite sits from the optical axis.",
+          "  vec2 off = centre - uRes * 0.5;",
+          "  float rad = length(off);",
+          "  vRadial = rad > 1.0 ? off / rad : vec2(1.0, 0.0);",
+          "  vCat = uCatsEye * min(1.0, rad / (length(uRes) * 0.5));",
+          "",
+          "  // A light spread thin enough to land under half a display code",
+          "  // value contributes nothing but fill rate. Culling it here is what",
+          "  // keeps a 900-point wire from splatting 900 invisible discs the",
+          "  // moment it goes out of focus.",
+          "  if (vGain < 0.0015) {",
+          "    gl_Position = vec4(2.0, 2.0, 2.0, 1.0);",
+          "    return;",
+          "  }",
+          "",
+          "  vec2 p = centre + aCorner * R;",
+          "  gl_Position = vec4((p / uRes) * 2.0 - 1.0, 0.0, 1.0);",
+          "}",
+        ].join("\n");
+
+        var FRAG = [
+          "precision highp float;",
+          "varying vec2 vQ;",
+          "varying vec3 vColor;",
+          "varying float vGain;",
+          "varying float vShape;",
+          "varying float vAA;",
+          "varying vec2 vRadial;",
+          "varying float vCat;",
+          "uniform float uBlades;",
+          "const float PI = 3.14159265;",
+          "void main() {",
+          "  float r = length(vQ);",
+          "  if (r > 1.0) discard;",
+          "  float th = r > 1e-5 ? atan(vQ.y, vQ.x) : 0.0;",
+          "",
+          "  // Regular-polygon aperture boundary: circumradius 1 at a blade",
+          "  // vertex, cos(PI/n) at a blade midpoint.",
+          "  float n = uBlades;",
+          "  float seg = 2.0 * PI / n;",
+          "  float poly = cos(PI / n) / cos(mod(th, seg) - PI / n);",
+          "  float bound = mix(1.0, poly, vShape);",
+          "",
+          "  float cov = smoothstep(bound, bound - vAA, r);",
+          "  // Two offset barrel openings cut the disc from opposite sides,",
+          "  // which is what turns a corner bokeh into a cat's eye.",
+          "  float cut = vCat * vShape;",
+          "  cov *= smoothstep(1.0, 1.0 - vAA, length(vQ - vRadial * cut));",
+          "  cov *= smoothstep(1.0, 1.0 - vAA, length(vQ + vRadial * cut));",
+          "",
+          "  gl_FragColor = vec4(vColor * (vGain * cov), 1.0);",
+          "}",
+        ].join("\n");
+
+        var uni = {};
+        var ready = false;
+        var count = 0;
+
+        function compile(type, src) {
+          var sh = gl.createShader(type);
+          gl.shaderSource(sh, src);
+          gl.compileShader(sh);
+          if (!gl.getShaderParameter(sh, gl.COMPILE_STATUS)) {
+            throw new Error("rack-focus shader: " + gl.getShaderInfoLog(sh));
+          }
+          return sh;
+        }
+
+        function hexToRgb(hex) {
+          var h = String(hex).trim().replace("#", "");
+          if (h.length === 3) h = h[0] + h[0] + h[1] + h[1] + h[2] + h[2];
+          var v = parseInt(h, 16);
+          if (!isFinite(v)) return [0.02, 0.024, 0.039];
+          return [((v >> 16) & 255) / 255, ((v >> 8) & 255) / 255, (v & 255) / 255];
+        }
+        var BG = hexToRgb(BACKDROP);
+
+        if (gl) {
+          var prog = gl.createProgram();
+          gl.attachShader(prog, compile(gl.VERTEX_SHADER, VERT));
+          gl.attachShader(prog, compile(gl.FRAGMENT_SHADER, FRAG));
+          gl.linkProgram(prog);
+          if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {
+            throw new Error("rack-focus link: " + gl.getProgramInfoLog(prog));
+          }
+          gl.useProgram(prog);
+
+          // Six vertices per light: two triangles carrying the same point
+          // payload and four distinct corner offsets.
+          var CORNERS = [
+            [-1, -1],
+            [1, -1],
+            [1, 1],
+            [-1, -1],
+            [1, 1],
+            [-1, 1],
+          ];
+          var n = P.length / 8;
+          count = n * 6;
+          var STRIDE = 10;
+          var data = new Float32Array(count * STRIDE);
+          var w = 0;
+          for (var pi = 0; pi < n; pi++) {
+            var o = pi * 8;
+            for (var ci = 0; ci < 6; ci++) {
+              data[w++] = CORNERS[ci][0];
+              data[w++] = CORNERS[ci][1];
+              data[w++] = P[o];
+              data[w++] = P[o + 1];
+              data[w++] = P[o + 2];
+              data[w++] = P[o + 3];
+              data[w++] = P[o + 4];
+              data[w++] = P[o + 5];
+              data[w++] = P[o + 6];
+              data[w++] = P[o + 7];
+            }
+          }
+
+          var buf = gl.createBuffer();
+          gl.bindBuffer(gl.ARRAY_BUFFER, buf);
+          gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
+          var BYTES = STRIDE * 4;
+          [
+            ["aCorner", 2, 0],
+            ["aPos", 3, 8],
+            ["aSize", 2, 20],
+            ["aColor", 3, 28],
+          ].forEach(function (spec) {
+            var loc = gl.getAttribLocation(prog, spec[0]);
+            gl.enableVertexAttribArray(loc);
+            gl.vertexAttribPointer(loc, spec[1], gl.FLOAT, false, BYTES, spec[2]);
+          });
+
+          [
+            "uRes",
+            "uPxPerMm",
+            "uFocal",
+            "uFocus",
+            "uFstop",
+            "uCoCmm",
+            "uMaxR",
+            "uMinR",
+            "uCatsEye",
+            "uBlades",
+            "uBokeh",
+          ].forEach(function (nm) {
+            uni[nm] = gl.getUniformLocation(prog, nm);
+          });
+
+          gl.viewport(0, 0, W, H);
+          gl.uniform2f(uni.uRes, W, H);
+          gl.uniform1f(uni.uPxPerMm, PX_PER_MM);
+          gl.uniform1f(uni.uFocal, FOCAL);
+          gl.uniform1f(uni.uFstop, FSTOP);
+          gl.uniform1f(uni.uCoCmm, COC_MM);
+          gl.uniform1f(uni.uMaxR, MAX_COC_R_PX);
+          gl.uniform1f(uni.uMinR, MIN_R_PX);
+          gl.uniform1f(uni.uCatsEye, CATSEYE);
+          gl.uniform1f(uni.uBlades, BLADES);
+          gl.uniform1f(uni.uBokeh, BOKEH);
+
+          // Light adds to light. Overlapping bokeh discs are brighter where
+          // they cross, which is the whole texture of a bokeh field.
+          gl.disable(gl.DEPTH_TEST);
+          gl.enable(gl.BLEND);
+          gl.blendFunc(gl.ONE, gl.ONE);
+          ready = true;
+        }
+
+        // Every frame is computed from t alone: the focal distance is a
+        // closed-form function of t, and each sprite's circle of confusion
+        // falls out of its own static depth and that distance.
+        function draw(t) {
+          if (!ready) return;
+          gl.uniform1f(uni.uFocus, focusAt(t));
+          gl.clearColor(BG[0], BG[1], BG[2], 1);
+          gl.clear(gl.COLOR_BUFFER_BIT);
+          gl.drawArrays(gl.TRIANGLES, 0, count);
+          gl.flush();
+        }
+
+        window.__timelines = window.__timelines || {};
+        var tl = gsap.timeline({ paused: true });
+
+        // The canvas is repainted from a property SETTER, not from onUpdate:
+        // gsap's seek(t) suppresses events by default, so an onUpdate callback
+        // silently never fires on a scrub and the canvas freezes on frame 0.
+        // Tweened values are always written during render, suppressed or not,
+        // so this fires on every seek, and hands us the frame time directly.
+        var driver = { _t: 0 };
+        Object.defineProperty(driver, "t", {
+          get: function () {
+            return this._t;
+          },
+          set: function (v) {
+            this._t = v;
+            draw(v);
+          },
+        });
+        tl.to(driver, { t: DUR, duration: DUR, ease: "none" }, 0);
+        window.__timelines["rack-focus"] = tl;
+
+        draw(0);
+      })();
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "rack-focus.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/blocks/reddit-post/reddit-post.html b/docs/public/catalog/blocks/reddit-post/reddit-post.html
new file mode 100644
index 0000000000..9938be7a00
--- /dev/null
+++ b/docs/public/catalog/blocks/reddit-post/reddit-post.html
@@ -0,0 +1,346 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&display=block"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      body {
+        width: 1920px;
+        height: 1080px;
+        font-family: "DM Sans", sans-serif;
+      }
+
+      [data-composition-id="reddit-post"] .reddit-card {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 860px;
+        background: #1a1a2e;
+        border-radius: 16px;
+        padding: 32px;
+        box-shadow: 0 12px 60px rgba(0, 0, 0, 0.6);
+      }
+
+      /* Header */
+      [data-composition-id="reddit-post"] .post-header {
+        display: flex;
+        align-items: center;
+        gap: 14px;
+        margin-bottom: 24px;
+      }
+
+      [data-composition-id="reddit-post"] .subreddit-icon {
+        width: 48px;
+        height: 48px;
+        flex-shrink: 0;
+      }
+
+      [data-composition-id="reddit-post"] .subreddit-icon svg {
+        width: 48px;
+        height: 48px;
+        display: block;
+      }
+
+      [data-composition-id="reddit-post"] .post-meta {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+      }
+
+      [data-composition-id="reddit-post"] .subreddit-name {
+        font-size: 28px;
+        font-weight: 700;
+        color: #d7dadc;
+        line-height: 1.3;
+      }
+
+      [data-composition-id="reddit-post"] .post-author {
+        font-size: 24px;
+        font-weight: 400;
+        color: #818384;
+        line-height: 1.3;
+      }
+
+      /* Content */
+      [data-composition-id="reddit-post"] .post-title {
+        font-size: 38px;
+        font-weight: 700;
+        color: #d7dadc;
+        line-height: 1.35;
+        margin-bottom: 16px;
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+      }
+
+      [data-composition-id="reddit-post"] .post-body {
+        font-size: 28px;
+        font-weight: 400;
+        color: #818384;
+        line-height: 1.45;
+        margin-bottom: 28px;
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+      }
+
+      /* Action bar */
+      [data-composition-id="reddit-post"] .action-bar {
+        display: flex;
+        align-items: center;
+        gap: 28px;
+        padding-top: 20px;
+        border-top: 1px solid #343536;
+      }
+
+      [data-composition-id="reddit-post"] .vote-group {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        background: #272729;
+        border-radius: 24px;
+        padding: 8px 16px;
+      }
+
+      [data-composition-id="reddit-post"] .vote-btn {
+        width: 32px;
+        height: 32px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+      }
+
+      [data-composition-id="reddit-post"] .vote-btn svg {
+        width: 28px;
+        height: 28px;
+        display: block;
+      }
+
+      [data-composition-id="reddit-post"] .vote-count {
+        font-size: 26px;
+        font-weight: 700;
+        color: #d7dadc;
+        min-width: 50px;
+        text-align: center;
+      }
+
+      [data-composition-id="reddit-post"] .action-btn {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        background: #272729;
+        border-radius: 24px;
+        padding: 10px 20px;
+      }
+
+      [data-composition-id="reddit-post"] .action-btn svg {
+        width: 26px;
+        height: 26px;
+        display: block;
+      }
+
+      [data-composition-id="reddit-post"] .action-btn span {
+        font-size: 24px;
+        font-weight: 400;
+        color: #818384;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="reddit-post"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="5"
+    >
+      <div id="card" class="clip reddit-card" data-start="0" data-duration="5" data-track-index="0">
+        <!-- Header -->
+        <div class="post-header">
+          <div class="subreddit-icon">
+            <svg viewBox="0 0 48 48" fill="none">
+              <circle cx="24" cy="24" r="24" fill="#4A90D9" />
+              <text
+                x="24"
+                y="30"
+                text-anchor="middle"
+                font-family="DM Sans, sans-serif"
+                font-size="22"
+                font-weight="700"
+                fill="#fff"
+              >
+                r/
+              </text>
+            </svg>
+          </div>
+          <div class="post-meta">
+            <span class="subreddit-name">r/hyperframes</span>
+            <span class="post-author">u/placeholder_user &middot; 3h</span>
+          </div>
+        </div>
+
+        <!-- Content -->
+        <div class="post-title">Prompt to change this title to whatever you want</div>
+        <div class="post-body">
+          Prompt to change this body text, the subreddit, username, and vote count to match your
+          content.
+        </div>
+
+        <!-- Action bar -->
+        <div class="action-bar">
+          <div class="vote-group">
+            <div id="upvote-btn" class="vote-btn">
+              <svg viewBox="0 0 24 24" fill="none">
+                <path id="upvote-arrow" d="M12 4L3 14h5v6h8v-6h5L12 4z" fill="#818384" />
+              </svg>
+            </div>
+            <span id="vote-count" class="vote-count">4.2k</span>
+            <div class="vote-btn">
+              <svg viewBox="0 0 24 24" fill="none">
+                <path d="M12 20l9-10h-5V4H8v6H3l9 10z" fill="#818384" />
+              </svg>
+            </div>
+          </div>
+
+          <div class="action-btn">
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="#818384"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z" />
+            </svg>
+            <span>328</span>
+          </div>
+
+          <div class="action-btn">
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="#818384"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path d="M4 12v8a2 2 0 002 2h12a2 2 0 002-2v-8" />
+              <polyline points="16 6 12 2 8 6" />
+              <line x1="12" y1="2" x2="12" y2="15" />
+            </svg>
+            <span>Share</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      var tl = gsap.timeline({ paused: true });
+
+      var card = document.getElementById("card");
+      var upvoteBtn = document.getElementById("upvote-btn");
+      var upvoteArrow = document.getElementById("upvote-arrow");
+      var voteCount = document.getElementById("vote-count");
+
+      // Start off-screen below
+      gsap.set(card, { y: 400, opacity: 0 });
+
+      // Slide in from bottom
+      tl.to(
+        card,
+        {
+          y: 0,
+          opacity: 1,
+          duration: 0.6,
+          ease: "power3.out",
+        },
+        0.1,
+      );
+
+      // Upvote press-in
+      tl.to(
+        upvoteBtn,
+        {
+          scale: 0.85,
+          duration: 0.12,
+          ease: "power2.out",
+        },
+        1.5,
+      );
+
+      // Upvote release with spring bounce
+      tl.to(
+        upvoteBtn,
+        {
+          scale: 1,
+          duration: 0.4,
+          ease: "elastic.out(1, 0.4)",
+        },
+        1.62,
+      );
+
+      // Arrow turns orange
+      tl.to(
+        upvoteArrow,
+        {
+          attr: { fill: "#ff4500" },
+          duration: 0.12,
+          ease: "none",
+        },
+        1.62,
+      );
+
+      // Vote count turns orange + increments
+      tl.to(
+        voteCount,
+        {
+          color: "#ff4500",
+          duration: 0.12,
+          ease: "none",
+          onStart: function () {
+            voteCount.textContent = "4.3k";
+          },
+        },
+        1.62,
+      );
+
+      // Slide out to bottom
+      tl.to(
+        card,
+        {
+          y: 400,
+          opacity: 0,
+          duration: 0.3,
+          ease: "power3.in",
+        },
+        4.2,
+      );
+
+      window.__timelines["reddit-post"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/ridged-burn/ridged-burn.html b/docs/public/catalog/blocks/ridged-burn/ridged-burn.html
new file mode 100644
index 0000000000..94629341cf
--- /dev/null
+++ b/docs/public/catalog/blocks/ridged-burn/ridged-burn.html
@@ -0,0 +1,377 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      @import url("https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Bebas+Neue&family=JetBrains+Mono:wght@400;700&family=Lato:wght@400;700&display=block");
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <style>
+        [data-composition-id="main"] {
+          width: 1920px;
+          height: 1080px;
+          overflow: hidden;
+          position: relative;
+          background: #0b090a;
+        }
+
+        /* Blueprint grid */
+        .bp-grid {
+          position: absolute;
+          inset: 0;
+          background-image:
+            linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
+            linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
+          background-size: 40px 40px;
+          pointer-events: none;
+        }
+
+        /* Layout */
+        .bp-left {
+          position: absolute;
+          left: 0;
+          top: 0;
+          bottom: 0;
+          width: 1200px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .bp-right {
+          position: absolute;
+          right: 0;
+          top: 0;
+          bottom: 0;
+          width: 720px;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          padding: 60px 60px 60px 40px;
+        }
+        .bp-divider {
+          position: absolute;
+          left: 1200px;
+          top: 60px;
+          bottom: 60px;
+          width: 1px;
+          background: #e5383b;
+          opacity: 0.15;
+        }
+        .bp-number {
+          font-family: "Space Mono", monospace;
+          font-size: 14px;
+          font-weight: 700;
+          letter-spacing: 0.4em;
+          text-transform: uppercase;
+          position: absolute;
+          top: 40px;
+          left: 60px;
+          color: #e5383b;
+        }
+
+        /* Right panel typography */
+        .bp-name {
+          font-family: "Bebas Neue", sans-serif;
+          font-size: 38px;
+          letter-spacing: 0.08em;
+          margin-bottom: 20px;
+          color: #e5383b;
+        }
+        .bp-plabel {
+          font-family: "Space Mono", monospace;
+          font-size: 11px;
+          font-weight: 700;
+          letter-spacing: 0.3em;
+          text-transform: uppercase;
+          margin-bottom: 10px;
+          color: #e5383b;
+          opacity: 0.5;
+        }
+        .bp-prompt {
+          font-family: "JetBrains Mono", monospace;
+          font-size: 20px;
+          line-height: 1.6;
+          padding: 16px 20px;
+          border-radius: 6px;
+          margin-bottom: 20px;
+          color: #e5383b;
+          background: rgba(229, 56, 59, 0.06);
+          border: 1px solid rgba(229, 56, 59, 0.12);
+        }
+        .bp-desc {
+          font-family: "Lato", sans-serif;
+          font-size: 17px;
+          line-height: 1.6;
+          color: #777;
+          opacity: 0.55;
+        }
+
+        /* GL scenes (hidden, just for texture capture) */
+        .scene {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1200px;
+          height: 1080px;
+          overflow: hidden;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .scene-label {
+          font-family: "Bebas Neue", sans-serif;
+          font-size: 140px;
+          letter-spacing: 0.06em;
+          opacity: 0.12;
+        }
+      </style>
+
+      <div class="bp-grid"></div>
+      <div class="bp-divider"></div>
+      <div class="bp-number">02 / 14</div>
+
+      <!-- GL demo scenes (captured as textures, then hidden) -->
+      <div id="s1" class="scene" style="background: #0b090a">
+        <div class="scene-label" style="color: #e5383b">SCENE A</div>
+      </div>
+      <div id="s2" class="scene" style="background: #e5383b; opacity: 0">
+        <div class="scene-label" style="color: #0b090a">SCENE B</div>
+      </div>
+
+      <!-- GL canvas (left panel only) -->
+      <canvas
+        id="gl-canvas"
+        width="1200"
+        height="1080"
+        style="
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1200px;
+          height: 1080px;
+          z-index: 10;
+          pointer-events: none;
+          display: none;
+        "
+      >
+      </canvas>
+
+      <!-- Right panel metadata -->
+      <div class="bp-right">
+        <div class="bp-name">Ridged Burn</div>
+        <div class="bp-plabel">Prompt</div>
+        <div class="bp-prompt">"use ridged burn shader transition"</div>
+        <div class="bp-desc">
+          abs(noise) creates sharp lightning-crack edges. Blackbody color gradient with
+          high-frequency ember sparks.
+        </div>
+      </div>
+
+      <div
+        id="driver"
+        class="clip"
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+      var glCanvas = document.getElementById("gl-canvas");
+      var gl = glCanvas.getContext("webgl", { preserveDrawingBuffer: true });
+      if (!gl) {
+        console.warn("WebGL not available");
+        window.__timelines["main"] = gsap.timeline({ paused: true });
+      } else {
+        gl.viewport(0, 0, 1200, 1080);
+        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
+        var sceneTextures = {};
+
+        function captureScene(sceneId) {
+          var scene = document.getElementById(sceneId);
+          var origOpacity = scene.style.opacity;
+          var origZ = scene.style.zIndex;
+          scene.style.opacity = "1";
+          scene.style.zIndex = "999";
+          scene.offsetHeight;
+          var c = document.createElement("canvas");
+          c.width = 1200;
+          c.height = 1080;
+          var ctx = c.getContext("2d");
+          ctx.fillStyle = window.getComputedStyle(scene).backgroundColor;
+          ctx.fillRect(0, 0, 1200, 1080);
+          var sr = scene.getBoundingClientRect();
+          var els = scene.querySelectorAll("*");
+          for (var i = 0; i < els.length; i++) {
+            var el = els[i],
+              cs = window.getComputedStyle(el);
+            if (cs.display === "none" || cs.visibility === "hidden") continue;
+            var r = el.getBoundingClientRect();
+            if (r.width < 1 || r.height < 1) continue;
+            var x = r.left - sr.left,
+              y = r.top - sr.top,
+              w = r.width,
+              h = r.height;
+            ctx.save();
+            ctx.globalAlpha = parseFloat(cs.opacity) || 1;
+            var bg = cs.backgroundColor;
+            if (bg && bg !== "rgba(0, 0, 0, 0)" && bg !== "transparent") {
+              ctx.fillStyle = bg;
+              ctx.fillRect(x, y, w, h);
+            }
+            var hasChildEls = el.querySelector("div,span,img,video");
+            var text = "";
+            for (var j = 0; j < el.childNodes.length; j++)
+              if (el.childNodes[j].nodeType === 3) text += el.childNodes[j].textContent;
+            text = text.trim();
+            if (text && !hasChildEls) {
+              ctx.font = cs.fontWeight + " " + cs.fontSize + " " + cs.fontFamily;
+              ctx.fillStyle = cs.color;
+              if (cs.letterSpacing && cs.letterSpacing !== "normal")
+                ctx.letterSpacing = cs.letterSpacing;
+              ctx.textAlign = "center";
+              ctx.textBaseline = "middle";
+              ctx.fillText(text, x + w / 2, y + h / 2);
+            }
+            ctx.restore();
+          }
+          scene.style.opacity = origOpacity;
+          scene.style.zIndex = origZ;
+          var tex = gl.createTexture();
+          gl.bindTexture(gl.TEXTURE_2D, tex);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+          gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, c);
+          sceneTextures[sceneId] = tex;
+        }
+
+        var vertSrc =
+          "attribute vec2 a_pos; varying vec2 v_uv; void main(){" +
+          "v_uv=a_pos*0.5+0.5; v_uv.y=1.0-v_uv.y; gl_Position=vec4(a_pos,0,1);}";
+        var quadBuf = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);
+        gl.bufferData(
+          gl.ARRAY_BUFFER,
+          new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),
+          gl.STATIC_DRAW,
+        );
+        function compileShader(src, type) {
+          var s = gl.createShader(type);
+          gl.shaderSource(s, src);
+          gl.compileShader(s);
+          if (!gl.getShaderParameter(s, gl.COMPILE_STATUS))
+            console.error("Shader:", gl.getShaderInfoLog(s));
+          return s;
+        }
+        function mkProg(fragSrc) {
+          var p = gl.createProgram();
+          gl.attachShader(p, compileShader(vertSrc, gl.VERTEX_SHADER));
+          gl.attachShader(p, compileShader(fragSrc, gl.FRAGMENT_SHADER));
+          gl.linkProgram(p);
+          if (!gl.getProgramParameter(p, gl.LINK_STATUS))
+            console.error("Link:", gl.getProgramInfoLog(p));
+          return p;
+        }
+
+        var H =
+          "precision mediump float;" +
+          "varying vec2 v_uv;" +
+          "uniform sampler2D u_from, u_to;" +
+          "uniform float u_progress;" +
+          "uniform vec2 u_resolution;\n";
+
+        var NQ =
+          "float hash(vec2 p){return fract(sin(dot(p,vec2(127.1,311.7)))*43758.5453);}" +
+          "float vnoise(vec2 p){vec2 i=floor(p),f=fract(p);" +
+          "f=f*f*f*(f*(f*6.-15.)+10.);" +
+          "return mix(mix(hash(i),hash(i+vec2(1,0)),f.x)," +
+          "mix(hash(i+vec2(0,1)),hash(i+vec2(1,1)),f.x),f.y);}" +
+          "float fbm(vec2 p){float v=0.,a=.5;" +
+          "mat2 R=mat2(.8,.6,-.6,.8);" +
+          "for(int i=0;i<5;i++){v+=a*vnoise(p);p=R*p*2.02;a*=.5;}return v;}";
+
+        var progPass = mkProg(H + "void main(){gl_FragColor=texture2D(u_from,v_uv);}");
+        var progTrans = mkProg(
+          H +
+            NQ +
+            "float ridged(vec2 p){float v=0.,a=.5;mat2 R=mat2(.8,.6,-.6,.8);for(int i=0;i<5;i++){v+=a*abs(vnoise(p)*2.-1.);p=R*p*2.02;a*=.5;}return v;}void main(){vec4 A=texture2D(u_from,v_uv),B=texture2D(u_to,v_uv);float n=ridged(v_uv*4.);float e=smoothstep(u_progress-.04,u_progress+.04,n);float heat=smoothstep(.12,0.,abs(n-u_progress))*(1.-step(1.,u_progress));vec3 burn=mix(vec3(.4,0,0),vec3(1,.4,0),smoothstep(0.,.25,heat));burn=mix(burn,vec3(1,.85,.3),smoothstep(.25,.5,heat));burn=mix(burn,vec3(1),smoothstep(.5,1.,heat));float sparks=step(.92,vnoise(v_uv*80.))*heat*3.;gl_FragColor=vec4(mix(B,A,e).rgb+burn*heat*3.5+vec3(1.,.7,.3)*sparks,1.);}",
+        );
+
+        function renderShader(prog, texFrom, texTo, progress) {
+          gl.useProgram(prog);
+          gl.activeTexture(gl.TEXTURE0);
+          gl.bindTexture(gl.TEXTURE_2D, texFrom);
+          gl.uniform1i(gl.getUniformLocation(prog, "u_from"), 0);
+          gl.activeTexture(gl.TEXTURE1);
+          gl.bindTexture(gl.TEXTURE_2D, texTo);
+          gl.uniform1i(gl.getUniformLocation(prog, "u_to"), 1);
+          gl.uniform1f(gl.getUniformLocation(prog, "u_progress"), progress);
+          gl.uniform2f(gl.getUniformLocation(prog, "u_resolution"), 1200, 1080);
+          var pos = gl.getAttribLocation(prog, "a_pos");
+          gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);
+          gl.enableVertexAttribArray(pos);
+          gl.vertexAttribPointer(pos, 2, gl.FLOAT, false, 0, 0);
+          gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+        }
+
+        function easeInOut(p) {
+          return p < 0.5 ? 2 * p * p : 1 - Math.pow(-2 * p + 2, 2) / 2;
+        }
+
+        captureScene("s1");
+        captureScene("s2");
+        glCanvas.style.display = "block";
+        renderShader(progPass, sceneTextures["s1"], sceneTextures["s1"], 0);
+        document.querySelectorAll(".scene").forEach(function (s) {
+          s.style.opacity = "0";
+        });
+
+        var tl = gsap.timeline({
+          paused: true,
+          onUpdate: function () {
+            var t = tl.time();
+            if (t >= 1.0 && t < 3.0) {
+              renderShader(
+                progTrans,
+                sceneTextures["s1"],
+                sceneTextures["s2"],
+                easeInOut((t - 1.0) / 2.0),
+              );
+            } else if (t >= 3.0) {
+              renderShader(progPass, sceneTextures["s2"], sceneTextures["s2"], 0);
+            } else {
+              renderShader(progPass, sceneTextures["s1"], sceneTextures["s1"], 0);
+            }
+          },
+        });
+        tl.to({ v: 0 }, { v: 1, duration: 4, ease: "none" }, 0);
+        window.__timelines["main"] = tl;
+      } // end if (gl)
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/ripple-waves/ripple-waves.html b/docs/public/catalog/blocks/ripple-waves/ripple-waves.html
new file mode 100644
index 0000000000..27e09015e7
--- /dev/null
+++ b/docs/public/catalog/blocks/ripple-waves/ripple-waves.html
@@ -0,0 +1,366 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      @import url("https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Bebas+Neue&family=JetBrains+Mono:wght@400;700&family=Lato:wght@400;700&display=block");
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <style>
+        [data-composition-id="main"] {
+          width: 1920px;
+          height: 1080px;
+          overflow: hidden;
+          position: relative;
+          background: #264653;
+        }
+
+        /* Blueprint grid */
+        .bp-grid {
+          position: absolute;
+          inset: 0;
+          background-image:
+            linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
+            linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
+          background-size: 40px 40px;
+          pointer-events: none;
+        }
+
+        /* Layout */
+        .bp-left {
+          position: absolute;
+          left: 0;
+          top: 0;
+          bottom: 0;
+          width: 1200px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .bp-right {
+          position: absolute;
+          right: 0;
+          top: 0;
+          bottom: 0;
+          width: 720px;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          padding: 60px 60px 60px 40px;
+        }
+        .bp-divider {
+          position: absolute;
+          left: 1200px;
+          top: 60px;
+          bottom: 60px;
+          width: 1px;
+          background: #e9c46a;
+          opacity: 0.15;
+        }
+        .bp-number {
+          font-family: "Space Mono", monospace;
+          font-size: 14px;
+          font-weight: 700;
+          letter-spacing: 0.4em;
+          text-transform: uppercase;
+          position: absolute;
+          top: 40px;
+          left: 60px;
+          color: #e9c46a;
+        }
+
+        /* Right panel typography */
+        .bp-name {
+          font-family: "Bebas Neue", sans-serif;
+          font-size: 38px;
+          letter-spacing: 0.08em;
+          margin-bottom: 20px;
+          color: #e9c46a;
+        }
+        .bp-plabel {
+          font-family: "Space Mono", monospace;
+          font-size: 11px;
+          font-weight: 700;
+          letter-spacing: 0.3em;
+          text-transform: uppercase;
+          margin-bottom: 10px;
+          color: #e9c46a;
+          opacity: 0.5;
+        }
+        .bp-prompt {
+          font-family: "JetBrains Mono", monospace;
+          font-size: 20px;
+          line-height: 1.6;
+          padding: 16px 20px;
+          border-radius: 6px;
+          margin-bottom: 20px;
+          color: #e9c46a;
+          background: rgba(233, 196, 106, 0.06);
+          border: 1px solid rgba(233, 196, 106, 0.12);
+        }
+        .bp-desc {
+          font-family: "Lato", sans-serif;
+          font-size: 17px;
+          line-height: 1.6;
+          color: #8aaa9a;
+          opacity: 0.55;
+        }
+
+        /* GL scenes (hidden, just for texture capture) */
+        .scene {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1200px;
+          height: 1080px;
+          overflow: hidden;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .scene-label {
+          font-family: "Bebas Neue", sans-serif;
+          font-size: 140px;
+          letter-spacing: 0.06em;
+          opacity: 0.12;
+        }
+      </style>
+
+      <div class="bp-grid"></div>
+      <div class="bp-divider"></div>
+      <div class="bp-number">05 / 14</div>
+
+      <!-- GL demo scenes (captured as textures, then hidden) -->
+      <div id="s1" class="scene" style="background: #264653">
+        <div class="scene-label" style="color: #e9c46a">SCENE A</div>
+      </div>
+      <div id="s2" class="scene" style="background: #e9c46a; opacity: 0">
+        <div class="scene-label" style="color: #264653">SCENE B</div>
+      </div>
+
+      <!-- GL canvas (left panel only) -->
+      <canvas
+        id="gl-canvas"
+        width="1200"
+        height="1080"
+        style="
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1200px;
+          height: 1080px;
+          z-index: 10;
+          pointer-events: none;
+          display: none;
+        "
+      >
+      </canvas>
+
+      <!-- Right panel metadata -->
+      <div class="bp-right">
+        <div class="bp-name">Ripple Waves</div>
+        <div class="bp-plabel">Prompt</div>
+        <div class="bp-prompt">"use ripple waves shader transition"</div>
+        <div class="bp-desc">
+          Exponential sine waves with sharp crests and broad troughs. Both scenes ripple in opposite
+          phases.
+        </div>
+      </div>
+
+      <div
+        id="driver"
+        class="clip"
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+      var glCanvas = document.getElementById("gl-canvas");
+      var gl = glCanvas.getContext("webgl", { preserveDrawingBuffer: true });
+      if (!gl) {
+        console.warn("WebGL not available");
+        window.__timelines["main"] = gsap.timeline({ paused: true });
+      } else {
+        gl.viewport(0, 0, 1200, 1080);
+        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
+        var sceneTextures = {};
+
+        function captureScene(sceneId) {
+          var scene = document.getElementById(sceneId);
+          var origOpacity = scene.style.opacity;
+          var origZ = scene.style.zIndex;
+          scene.style.opacity = "1";
+          scene.style.zIndex = "999";
+          scene.offsetHeight;
+          var c = document.createElement("canvas");
+          c.width = 1200;
+          c.height = 1080;
+          var ctx = c.getContext("2d");
+          ctx.fillStyle = window.getComputedStyle(scene).backgroundColor;
+          ctx.fillRect(0, 0, 1200, 1080);
+          var sr = scene.getBoundingClientRect();
+          var els = scene.querySelectorAll("*");
+          for (var i = 0; i < els.length; i++) {
+            var el = els[i],
+              cs = window.getComputedStyle(el);
+            if (cs.display === "none" || cs.visibility === "hidden") continue;
+            var r = el.getBoundingClientRect();
+            if (r.width < 1 || r.height < 1) continue;
+            var x = r.left - sr.left,
+              y = r.top - sr.top,
+              w = r.width,
+              h = r.height;
+            ctx.save();
+            ctx.globalAlpha = parseFloat(cs.opacity) || 1;
+            var bg = cs.backgroundColor;
+            if (bg && bg !== "rgba(0, 0, 0, 0)" && bg !== "transparent") {
+              ctx.fillStyle = bg;
+              ctx.fillRect(x, y, w, h);
+            }
+            var hasChildEls = el.querySelector("div,span,img,video");
+            var text = "";
+            for (var j = 0; j < el.childNodes.length; j++)
+              if (el.childNodes[j].nodeType === 3) text += el.childNodes[j].textContent;
+            text = text.trim();
+            if (text && !hasChildEls) {
+              ctx.font = cs.fontWeight + " " + cs.fontSize + " " + cs.fontFamily;
+              ctx.fillStyle = cs.color;
+              if (cs.letterSpacing && cs.letterSpacing !== "normal")
+                ctx.letterSpacing = cs.letterSpacing;
+              ctx.textAlign = "center";
+              ctx.textBaseline = "middle";
+              ctx.fillText(text, x + w / 2, y + h / 2);
+            }
+            ctx.restore();
+          }
+          scene.style.opacity = origOpacity;
+          scene.style.zIndex = origZ;
+          var tex = gl.createTexture();
+          gl.bindTexture(gl.TEXTURE_2D, tex);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+          gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, c);
+          sceneTextures[sceneId] = tex;
+        }
+
+        var vertSrc =
+          "attribute vec2 a_pos; varying vec2 v_uv; void main(){" +
+          "v_uv=a_pos*0.5+0.5; v_uv.y=1.0-v_uv.y; gl_Position=vec4(a_pos,0,1);}";
+        var quadBuf = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);
+        gl.bufferData(
+          gl.ARRAY_BUFFER,
+          new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),
+          gl.STATIC_DRAW,
+        );
+        function compileShader(src, type) {
+          var s = gl.createShader(type);
+          gl.shaderSource(s, src);
+          gl.compileShader(s);
+          if (!gl.getShaderParameter(s, gl.COMPILE_STATUS))
+            console.error("Shader:", gl.getShaderInfoLog(s));
+          return s;
+        }
+        function mkProg(fragSrc) {
+          var p = gl.createProgram();
+          gl.attachShader(p, compileShader(vertSrc, gl.VERTEX_SHADER));
+          gl.attachShader(p, compileShader(fragSrc, gl.FRAGMENT_SHADER));
+          gl.linkProgram(p);
+          if (!gl.getProgramParameter(p, gl.LINK_STATUS))
+            console.error("Link:", gl.getProgramInfoLog(p));
+          return p;
+        }
+
+        var H =
+          "precision mediump float;" +
+          "varying vec2 v_uv;" +
+          "uniform sampler2D u_from, u_to;" +
+          "uniform float u_progress;" +
+          "uniform vec2 u_resolution;\n";
+
+        var progPass = mkProg(H + "void main(){gl_FragColor=texture2D(u_from,v_uv);}");
+        var progTrans = mkProg(
+          H +
+            "void main(){vec2 uv=v_uv-.5;float dist=length(uv);vec2 dir=normalize(uv+.001);float fromAmp=u_progress*.04;float fw1=exp(sin(dist*25.-u_progress*12.)-1.);float fw2=exp(sin(dist*50.-u_progress*18.)-1.)*.5;vec2 fromUv=clamp(v_uv+dir*(fw1+fw2)*fromAmp,0.,1.);float toAmp=(1.-u_progress)*.04;float tw1=exp(sin(dist*25.+u_progress*12.)-1.);float tw2=exp(sin(dist*50.+u_progress*18.)-1.)*.5;vec2 toUv=clamp(v_uv-dir*(tw1+tw2)*toAmp,0.,1.);vec4 A=texture2D(u_from,fromUv);vec4 B=texture2D(u_to,toUv);float peak=fw1*u_progress;vec3 tint=vec3(.9,.95,1.)*peak*.1;gl_FragColor=vec4(mix(A.rgb+tint,B.rgb,u_progress),1.);}",
+        );
+
+        function renderShader(prog, texFrom, texTo, progress) {
+          gl.useProgram(prog);
+          gl.activeTexture(gl.TEXTURE0);
+          gl.bindTexture(gl.TEXTURE_2D, texFrom);
+          gl.uniform1i(gl.getUniformLocation(prog, "u_from"), 0);
+          gl.activeTexture(gl.TEXTURE1);
+          gl.bindTexture(gl.TEXTURE_2D, texTo);
+          gl.uniform1i(gl.getUniformLocation(prog, "u_to"), 1);
+          gl.uniform1f(gl.getUniformLocation(prog, "u_progress"), progress);
+          gl.uniform2f(gl.getUniformLocation(prog, "u_resolution"), 1200, 1080);
+          var pos = gl.getAttribLocation(prog, "a_pos");
+          gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);
+          gl.enableVertexAttribArray(pos);
+          gl.vertexAttribPointer(pos, 2, gl.FLOAT, false, 0, 0);
+          gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+        }
+
+        function easeInOut(p) {
+          return p < 0.5 ? 2 * p * p : 1 - Math.pow(-2 * p + 2, 2) / 2;
+        }
+
+        captureScene("s1");
+        captureScene("s2");
+        glCanvas.style.display = "block";
+        renderShader(progPass, sceneTextures["s1"], sceneTextures["s1"], 0);
+        document.querySelectorAll(".scene").forEach(function (s) {
+          s.style.opacity = "0";
+        });
+
+        var tl = gsap.timeline({
+          paused: true,
+          onUpdate: function () {
+            var t = tl.time();
+            if (t >= 1.0 && t < 3.0) {
+              renderShader(
+                progTrans,
+                sceneTextures["s1"],
+                sceneTextures["s2"],
+                easeInOut((t - 1.0) / 2.0),
+              );
+            } else if (t >= 3.0) {
+              renderShader(progPass, sceneTextures["s2"], sceneTextures["s2"], 0);
+            } else {
+              renderShader(progPass, sceneTextures["s1"], sceneTextures["s1"], 0);
+            }
+          },
+        });
+        tl.to({ v: 0 }, { v: 1, duration: 4, ease: "none" }, 0);
+        window.__timelines["main"] = tl;
+      } // end if (gl)
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/sdf-iris/sdf-iris.html b/docs/public/catalog/blocks/sdf-iris/sdf-iris.html
new file mode 100644
index 0000000000..21a13a91d4
--- /dev/null
+++ b/docs/public/catalog/blocks/sdf-iris/sdf-iris.html
@@ -0,0 +1,366 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      @import url("https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Bebas+Neue&family=JetBrains+Mono:wght@400;700&family=Lato:wght@400;700&display=block");
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <style>
+        [data-composition-id="main"] {
+          width: 1920px;
+          height: 1080px;
+          overflow: hidden;
+          position: relative;
+          background: #003049;
+        }
+
+        /* Blueprint grid */
+        .bp-grid {
+          position: absolute;
+          inset: 0;
+          background-image:
+            linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
+            linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
+          background-size: 40px 40px;
+          pointer-events: none;
+        }
+
+        /* Layout */
+        .bp-left {
+          position: absolute;
+          left: 0;
+          top: 0;
+          bottom: 0;
+          width: 1200px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .bp-right {
+          position: absolute;
+          right: 0;
+          top: 0;
+          bottom: 0;
+          width: 720px;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          padding: 60px 60px 60px 40px;
+        }
+        .bp-divider {
+          position: absolute;
+          left: 1200px;
+          top: 60px;
+          bottom: 60px;
+          width: 1px;
+          background: #ffc300;
+          opacity: 0.15;
+        }
+        .bp-number {
+          font-family: "Space Mono", monospace;
+          font-size: 14px;
+          font-weight: 700;
+          letter-spacing: 0.4em;
+          text-transform: uppercase;
+          position: absolute;
+          top: 40px;
+          left: 60px;
+          color: #ffc300;
+        }
+
+        /* Right panel typography */
+        .bp-name {
+          font-family: "Bebas Neue", sans-serif;
+          font-size: 38px;
+          letter-spacing: 0.08em;
+          margin-bottom: 20px;
+          color: #ffc300;
+        }
+        .bp-plabel {
+          font-family: "Space Mono", monospace;
+          font-size: 11px;
+          font-weight: 700;
+          letter-spacing: 0.3em;
+          text-transform: uppercase;
+          margin-bottom: 10px;
+          color: #ffc300;
+          opacity: 0.5;
+        }
+        .bp-prompt {
+          font-family: "JetBrains Mono", monospace;
+          font-size: 20px;
+          line-height: 1.6;
+          padding: 16px 20px;
+          border-radius: 6px;
+          margin-bottom: 20px;
+          color: #ffc300;
+          background: rgba(255, 195, 0, 0.06);
+          border: 1px solid rgba(255, 195, 0, 0.12);
+        }
+        .bp-desc {
+          font-family: "Lato", sans-serif;
+          font-size: 17px;
+          line-height: 1.6;
+          color: #7a9ab0;
+          opacity: 0.55;
+        }
+
+        /* GL scenes (hidden, just for texture capture) */
+        .scene {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1200px;
+          height: 1080px;
+          overflow: hidden;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .scene-label {
+          font-family: "Bebas Neue", sans-serif;
+          font-size: 140px;
+          letter-spacing: 0.06em;
+          opacity: 0.12;
+        }
+      </style>
+
+      <div class="bp-grid"></div>
+      <div class="bp-divider"></div>
+      <div class="bp-number">04 / 14</div>
+
+      <!-- GL demo scenes (captured as textures, then hidden) -->
+      <div id="s1" class="scene" style="background: #003049">
+        <div class="scene-label" style="color: #ffc300">SCENE A</div>
+      </div>
+      <div id="s2" class="scene" style="background: #ffc300; opacity: 0">
+        <div class="scene-label" style="color: #003049">SCENE B</div>
+      </div>
+
+      <!-- GL canvas (left panel only) -->
+      <canvas
+        id="gl-canvas"
+        width="1200"
+        height="1080"
+        style="
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1200px;
+          height: 1080px;
+          z-index: 10;
+          pointer-events: none;
+          display: none;
+        "
+      >
+      </canvas>
+
+      <!-- Right panel metadata -->
+      <div class="bp-right">
+        <div class="bp-name">SDF Iris</div>
+        <div class="bp-plabel">Prompt</div>
+        <div class="bp-prompt">"use sdf iris shader transition"</div>
+        <div class="bp-desc">
+          Aspect-corrected circle SDF opening from center. Triple onion ring glow with warm
+          exponential falloff.
+        </div>
+      </div>
+
+      <div
+        id="driver"
+        class="clip"
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+      var glCanvas = document.getElementById("gl-canvas");
+      var gl = glCanvas.getContext("webgl", { preserveDrawingBuffer: true });
+      if (!gl) {
+        console.warn("WebGL not available");
+        window.__timelines["main"] = gsap.timeline({ paused: true });
+      } else {
+        gl.viewport(0, 0, 1200, 1080);
+        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
+        var sceneTextures = {};
+
+        function captureScene(sceneId) {
+          var scene = document.getElementById(sceneId);
+          var origOpacity = scene.style.opacity;
+          var origZ = scene.style.zIndex;
+          scene.style.opacity = "1";
+          scene.style.zIndex = "999";
+          scene.offsetHeight;
+          var c = document.createElement("canvas");
+          c.width = 1200;
+          c.height = 1080;
+          var ctx = c.getContext("2d");
+          ctx.fillStyle = window.getComputedStyle(scene).backgroundColor;
+          ctx.fillRect(0, 0, 1200, 1080);
+          var sr = scene.getBoundingClientRect();
+          var els = scene.querySelectorAll("*");
+          for (var i = 0; i < els.length; i++) {
+            var el = els[i],
+              cs = window.getComputedStyle(el);
+            if (cs.display === "none" || cs.visibility === "hidden") continue;
+            var r = el.getBoundingClientRect();
+            if (r.width < 1 || r.height < 1) continue;
+            var x = r.left - sr.left,
+              y = r.top - sr.top,
+              w = r.width,
+              h = r.height;
+            ctx.save();
+            ctx.globalAlpha = parseFloat(cs.opacity) || 1;
+            var bg = cs.backgroundColor;
+            if (bg && bg !== "rgba(0, 0, 0, 0)" && bg !== "transparent") {
+              ctx.fillStyle = bg;
+              ctx.fillRect(x, y, w, h);
+            }
+            var hasChildEls = el.querySelector("div,span,img,video");
+            var text = "";
+            for (var j = 0; j < el.childNodes.length; j++)
+              if (el.childNodes[j].nodeType === 3) text += el.childNodes[j].textContent;
+            text = text.trim();
+            if (text && !hasChildEls) {
+              ctx.font = cs.fontWeight + " " + cs.fontSize + " " + cs.fontFamily;
+              ctx.fillStyle = cs.color;
+              if (cs.letterSpacing && cs.letterSpacing !== "normal")
+                ctx.letterSpacing = cs.letterSpacing;
+              ctx.textAlign = "center";
+              ctx.textBaseline = "middle";
+              ctx.fillText(text, x + w / 2, y + h / 2);
+            }
+            ctx.restore();
+          }
+          scene.style.opacity = origOpacity;
+          scene.style.zIndex = origZ;
+          var tex = gl.createTexture();
+          gl.bindTexture(gl.TEXTURE_2D, tex);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+          gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, c);
+          sceneTextures[sceneId] = tex;
+        }
+
+        var vertSrc =
+          "attribute vec2 a_pos; varying vec2 v_uv; void main(){" +
+          "v_uv=a_pos*0.5+0.5; v_uv.y=1.0-v_uv.y; gl_Position=vec4(a_pos,0,1);}";
+        var quadBuf = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);
+        gl.bufferData(
+          gl.ARRAY_BUFFER,
+          new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),
+          gl.STATIC_DRAW,
+        );
+        function compileShader(src, type) {
+          var s = gl.createShader(type);
+          gl.shaderSource(s, src);
+          gl.compileShader(s);
+          if (!gl.getShaderParameter(s, gl.COMPILE_STATUS))
+            console.error("Shader:", gl.getShaderInfoLog(s));
+          return s;
+        }
+        function mkProg(fragSrc) {
+          var p = gl.createProgram();
+          gl.attachShader(p, compileShader(vertSrc, gl.VERTEX_SHADER));
+          gl.attachShader(p, compileShader(fragSrc, gl.FRAGMENT_SHADER));
+          gl.linkProgram(p);
+          if (!gl.getProgramParameter(p, gl.LINK_STATUS))
+            console.error("Link:", gl.getProgramInfoLog(p));
+          return p;
+        }
+
+        var H =
+          "precision mediump float;" +
+          "varying vec2 v_uv;" +
+          "uniform sampler2D u_from, u_to;" +
+          "uniform float u_progress;" +
+          "uniform vec2 u_resolution;\n";
+
+        var progPass = mkProg(H + "void main(){gl_FragColor=texture2D(u_from,v_uv);}");
+        var progTrans = mkProg(
+          H +
+            "void main(){vec4 A=texture2D(u_from,v_uv),B=texture2D(u_to,v_uv);vec2 uv=(v_uv-.5)*vec2(u_resolution.x/u_resolution.y,1.);float d=length(uv);float radius=u_progress*1.2;float fw=.003;float edge=smoothstep(radius+fw,radius-fw,d);float ring1=exp(-abs(d-radius)*25.);float ring2=exp(-abs(d-radius+.04)*20.)*.5;float ring3=exp(-abs(d-radius+.08)*15.)*.25;float glow=(ring1+ring2+ring3)*u_progress*(1.-u_progress)*4.;gl_FragColor=vec4(mix(A,B,edge).rgb+vec3(1.,.85,.6)*glow*.6,1.);}",
+        );
+
+        function renderShader(prog, texFrom, texTo, progress) {
+          gl.useProgram(prog);
+          gl.activeTexture(gl.TEXTURE0);
+          gl.bindTexture(gl.TEXTURE_2D, texFrom);
+          gl.uniform1i(gl.getUniformLocation(prog, "u_from"), 0);
+          gl.activeTexture(gl.TEXTURE1);
+          gl.bindTexture(gl.TEXTURE_2D, texTo);
+          gl.uniform1i(gl.getUniformLocation(prog, "u_to"), 1);
+          gl.uniform1f(gl.getUniformLocation(prog, "u_progress"), progress);
+          gl.uniform2f(gl.getUniformLocation(prog, "u_resolution"), 1200, 1080);
+          var pos = gl.getAttribLocation(prog, "a_pos");
+          gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);
+          gl.enableVertexAttribArray(pos);
+          gl.vertexAttribPointer(pos, 2, gl.FLOAT, false, 0, 0);
+          gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+        }
+
+        function easeInOut(p) {
+          return p < 0.5 ? 2 * p * p : 1 - Math.pow(-2 * p + 2, 2) / 2;
+        }
+
+        captureScene("s1");
+        captureScene("s2");
+        glCanvas.style.display = "block";
+        renderShader(progPass, sceneTextures["s1"], sceneTextures["s1"], 0);
+        document.querySelectorAll(".scene").forEach(function (s) {
+          s.style.opacity = "0";
+        });
+
+        var tl = gsap.timeline({
+          paused: true,
+          onUpdate: function () {
+            var t = tl.time();
+            if (t >= 1.0 && t < 3.0) {
+              renderShader(
+                progTrans,
+                sceneTextures["s1"],
+                sceneTextures["s2"],
+                easeInOut((t - 1.0) / 2.0),
+              );
+            } else if (t >= 3.0) {
+              renderShader(progPass, sceneTextures["s2"], sceneTextures["s2"], 0);
+            } else {
+              renderShader(progPass, sceneTextures["s1"], sceneTextures["s1"], 0);
+            }
+          },
+        });
+        tl.to({ v: 0 }, { v: 1, duration: 4, ease: "none" }, 0);
+        window.__timelines["main"] = tl;
+      } // end if (gl)
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/spain-map/spain-map.html b/docs/public/catalog/blocks/spain-map/spain-map.html
new file mode 100644
index 0000000000..28e52d495f
--- /dev/null
+++ b/docs/public/catalog/blocks/spain-map/spain-map.html
@@ -0,0 +1,393 @@
+<!doctype html>
+<html lang="es">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Spain Map</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=block"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/topojson-client@3.1.0/dist/topojson-client.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background-color: #0f172a;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="spain-map"
+      data-composition-id="spain-map"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="12"
+    >
+      <div class="map-container">
+        <div class="header">
+          <h1 class="headline">PIB per c&aacute;pita por Comunidad Aut&oacute;noma</h1>
+          <p class="subtitle">Producto Interior Bruto per c&aacute;pita, estimaci&oacute;n 2024</p>
+        </div>
+
+        <svg class="map-svg" viewBox="0 0 1400 820" preserveAspectRatio="xMidYMid meet">
+          <g class="regions-group"></g>
+          <g class="labels-group"></g>
+        </svg>
+
+        <div class="legend">
+          <span class="legend-label legend-low">Bajo</span>
+          <div class="legend-bar"></div>
+          <span class="legend-label legend-high">Alto</span>
+        </div>
+
+        <div class="source">Fuente: Instituto Nacional de Estad&iacute;stica</div>
+      </div>
+
+      <style>
+        #spain-map {
+          width: 1920px;
+          height: 1080px;
+          background: linear-gradient(145deg, #0f172a 0%, #1e293b 100%);
+          font-family: "Inter", sans-serif;
+          color: #e2e8f0;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          overflow: hidden;
+        }
+
+        #spain-map .map-container {
+          width: 1700px;
+          height: 950px;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          position: relative;
+        }
+
+        #spain-map .header {
+          text-align: center;
+          margin-bottom: 20px;
+        }
+
+        #spain-map .headline {
+          font-size: 48px;
+          font-weight: 700;
+          letter-spacing: -0.02em;
+          color: #f8fafc;
+          clip-path: inset(0 100% 0 0);
+        }
+
+        #spain-map .subtitle {
+          font-size: 20px;
+          font-weight: 300;
+          color: #94a3b8;
+          margin-top: 8px;
+          opacity: 0;
+        }
+
+        #spain-map .map-svg {
+          width: 1500px;
+          height: 750px;
+          overflow: visible;
+        }
+
+        #spain-map .region-path {
+          stroke: #1e293b;
+          stroke-width: 0.8;
+          opacity: 0;
+          cursor: default;
+        }
+
+        #spain-map .region-label {
+          font-size: 11px;
+          font-weight: 500;
+          fill: #f8fafc;
+          text-anchor: middle;
+          dominant-baseline: central;
+          opacity: 0;
+          pointer-events: none;
+        }
+
+        #spain-map .legend {
+          display: flex;
+          align-items: center;
+          gap: 12px;
+          margin-top: 16px;
+          opacity: 0;
+        }
+
+        #spain-map .legend-bar {
+          width: 300px;
+          height: 12px;
+          border-radius: 6px;
+          background: linear-gradient(90deg, #7f1d1d, #dc2626, #fbbf24);
+        }
+
+        #spain-map .legend-label {
+          font-size: 14px;
+          font-weight: 500;
+          color: #94a3b8;
+        }
+
+        #spain-map .source {
+          position: absolute;
+          bottom: 0;
+          right: 40px;
+          font-size: 12px;
+          color: #475569;
+          opacity: 0;
+        }
+      </style>
+
+      <script>
+        (function () {
+          var SPAIN_TOPO_URL =
+            "https://cdn.jsdelivr.net/npm/es-atlas@0.6.0/es/autonomous_regions.json";
+
+          var data = {
+            "01": { name: "Andalucía", abbr: "AND", gdp: 20200 },
+            "02": { name: "Aragón", abbr: "ARA", gdp: 30500 },
+            "03": { name: "Asturias", abbr: "AST", gdp: 24100 },
+            "04": { name: "Illes Balears", abbr: "BAL", gdp: 28900 },
+            "05": { name: "Canarias", abbr: "CAN", gdp: 21500 },
+            "06": { name: "Cantabria", abbr: "CNT", gdp: 25200 },
+            "07": { name: "Castilla y León", abbr: "CYL", gdp: 25800 },
+            "08": { name: "Castilla-La Mancha", abbr: "CLM", gdp: 21400 },
+            "09": { name: "Catalunya", abbr: "CAT", gdp: 33700 },
+            10: { name: "Comunitat Valenciana", abbr: "VAL", gdp: 23800 },
+            11: { name: "Extremadura", abbr: "EXT", gdp: 19200 },
+            12: { name: "Galicia", abbr: "GAL", gdp: 24500 },
+            13: { name: "Comunidad de Madrid", abbr: "MAD", gdp: 38100 },
+            14: { name: "Región de Murcia", abbr: "MUR", gdp: 22100 },
+            15: { name: "Navarra", abbr: "NAV", gdp: 35200 },
+            16: { name: "País Vasco", abbr: "PVA", gdp: 36800 },
+            17: { name: "La Rioja", abbr: "RIO", gdp: 29800 },
+            18: { name: "Ceuta", abbr: "CEU", gdp: 21000 },
+            19: { name: "Melilla", abbr: "MEL", gdp: 19500 },
+          };
+
+          var nameMap = {};
+          for (var key in data) {
+            nameMap[data[key].name.toLowerCase()] = key;
+          }
+
+          var minGdp = 19200;
+          var maxGdp = 38100;
+
+          function gdpToColor(gdp) {
+            var t = Math.min(Math.max((gdp - minGdp) / (maxGdp - minGdp), 0), 1);
+            if (t < 0.5) {
+              var s = t / 0.5;
+              return lerpColor([127, 29, 29], [220, 38, 38], s);
+            } else {
+              var s2 = (t - 0.5) / 0.5;
+              return lerpColor([220, 38, 38], [251, 191, 36], s2);
+            }
+          }
+
+          function lerpColor(a, b, t) {
+            var r = Math.round(a[0] + (b[0] - a[0]) * t);
+            var g = Math.round(a[1] + (b[1] - a[1]) * t);
+            var bl = Math.round(a[2] + (b[2] - a[2]) * t);
+            return "rgb(" + r + "," + g + "," + bl + ")";
+          }
+
+          function findData(feature) {
+            var id = String(feature.id).padStart(2, "0");
+            if (data[id]) return data[id];
+            var fname = (feature.properties && feature.properties.name) || "";
+            var fnameLower = fname.toLowerCase();
+            for (var k in data) {
+              var dname = data[k].name.toLowerCase();
+              if (fnameLower.indexOf(dname) >= 0 || dname.indexOf(fnameLower) >= 0) {
+                return data[k];
+              }
+            }
+            return null;
+          }
+
+          var svg = document.querySelector("#spain-map .map-svg");
+          var regionsGroup = svg.querySelector(".regions-group");
+          var labelsGroup = svg.querySelector(".labels-group");
+          var tl = gsap.timeline({ paused: true });
+
+          fetch(SPAIN_TOPO_URL)
+            .then(function (r) {
+              return r.json();
+            })
+            .then(function (es) {
+              var featureCollection = topojson.feature(es, es.objects.autonomous_regions);
+              var features = featureCollection.features;
+
+              var projection = d3
+                .geoConicConformal()
+                .center([0, 39.5])
+                .rotate([3.5, 0])
+                .fitSize([1200, 750], featureCollection);
+              var path = d3.geoPath().projection(projection);
+
+              var sortedFeatures = features
+                .filter(function (f) {
+                  return findData(f) !== null;
+                })
+                .sort(function (a, b) {
+                  return findData(a).gdp - findData(b).gdp;
+                });
+
+              sortedFeatures.forEach(function (feature) {
+                var info = findData(feature);
+                if (!info) return;
+
+                var d = path(feature);
+                if (!d) return;
+
+                var el = document.createElementNS("http://www.w3.org/2000/svg", "path");
+                el.setAttribute("d", d);
+                el.setAttribute("class", "region-path");
+                el.setAttribute("data-region", info.abbr);
+                el.setAttribute("data-gdp", String(info.gdp));
+                el.style.fill = gdpToColor(info.gdp);
+                regionsGroup.appendChild(el);
+
+                var centroid = path.centroid(feature);
+                if (centroid[0] && centroid[1]) {
+                  var label = document.createElementNS("http://www.w3.org/2000/svg", "text");
+                  label.setAttribute("x", String(centroid[0]));
+                  label.setAttribute("y", String(centroid[1]));
+                  label.setAttribute("class", "region-label");
+                  label.textContent = info.abbr;
+                  labelsGroup.appendChild(label);
+                }
+              });
+
+              buildTimeline();
+            });
+
+          function buildTimeline() {
+            var regionPaths = regionsGroup.querySelectorAll(".region-path");
+            var regionLabels = labelsGroup.querySelectorAll(".region-label");
+
+            tl.to(
+              "#spain-map .headline",
+              {
+                clipPath: "inset(0 0% 0 0)",
+                duration: 1.0,
+                ease: "power2.inOut",
+              },
+              0,
+            );
+
+            tl.to(
+              "#spain-map .subtitle",
+              {
+                opacity: 1,
+                duration: 0.6,
+                ease: "power2.out",
+              },
+              0.4,
+            );
+
+            tl.to(
+              regionPaths,
+              {
+                opacity: 1,
+                scale: 1,
+                duration: 0.4,
+                stagger: {
+                  each: 0.08,
+                  from: "center",
+                },
+                ease: "back.out(1.4)",
+              },
+              1.0,
+            );
+
+            tl.to(
+              regionLabels,
+              {
+                opacity: 1,
+                duration: 0.3,
+                stagger: {
+                  each: 0.05,
+                  from: "center",
+                },
+                ease: "power2.out",
+              },
+              4.0,
+            );
+
+            tl.to(
+              "#spain-map .legend",
+              {
+                opacity: 1,
+                y: 0,
+                duration: 0.6,
+                ease: "power2.out",
+              },
+              5.5,
+            );
+
+            tl.to(
+              "#spain-map .source",
+              {
+                opacity: 1,
+                duration: 0.5,
+                ease: "power2.out",
+              },
+              6.0,
+            );
+
+            var highlightRegions = ["MAD", "PVA", "NAV"];
+            highlightRegions.forEach(function (abbr, i) {
+              var el = regionsGroup.querySelector('[data-region="' + abbr + '"]');
+              if (!el) return;
+
+              tl.to(
+                el,
+                {
+                  filter: "brightness(1.5) drop-shadow(0 0 8px rgba(255,255,255,0.4))",
+                  stroke: "#f8fafc",
+                  strokeWidth: 2.5,
+                  duration: 0.5,
+                  ease: "power2.out",
+                },
+                6.5 + i * 0.8,
+              );
+
+              tl.to(
+                el,
+                {
+                  filter: "brightness(1) drop-shadow(0 0 0px rgba(255,255,255,0))",
+                  stroke: "#1e293b",
+                  strokeWidth: 0.8,
+                  duration: 0.5,
+                  ease: "power2.in",
+                },
+                7.0 + i * 0.8,
+              );
+            });
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines["spain-map"] = tl;
+          }
+        })();
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/spiral-galaxy/__hf-variables-preview.html b/docs/public/catalog/blocks/spiral-galaxy/__hf-variables-preview.html
new file mode 100644
index 0000000000..8b2e151d19
--- /dev/null
+++ b/docs/public/catalog/blocks/spiral-galaxy/__hf-variables-preview.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Spiral Galaxy variables preview</title>
+    <style>
+      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #03040a; }
+      #hf-vars-root { position: relative; width: 1920px; height: 1080px; }
+      #hf-vars-mount { position: absolute; inset: 0; display: grid; place-items: center; }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  </head>
+  <body>
+    <div id="hf-vars-root" data-composition-id="spiral-galaxy-variables-preview" data-start="0" data-width="1920" data-height="1080" data-duration="10" data-fps="30">
+      <div id="hf-vars-mount" class="clip" data-composition-id="spiral-galaxy" data-composition-src="./spiral-galaxy.html" data-start="0" data-duration="10" data-track-index="0" data-width="1920" data-height="1080"></div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["spiral-galaxy-variables-preview"] = gsap.timeline({ paused: true });
+    </script>
+<script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "spiral-galaxy.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/spiral-galaxy/spiral-galaxy.html b/docs/public/catalog/blocks/spiral-galaxy/spiral-galaxy.html
new file mode 100644
index 0000000000..e8d3129bc8
--- /dev/null
+++ b/docs/public/catalog/blocks/spiral-galaxy/spiral-galaxy.html
@@ -0,0 +1,328 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Spiral Galaxy</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #03040a;
+      }
+      #sg-root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      /* Full-bleed child carries the scene fill; never the composition root. */
+      #sg-fill {
+        position: absolute;
+        inset: 0;
+        background: #03040a;
+      }
+      #sg-gl {
+        position: absolute;
+        inset: 0;
+        display: block;
+        width: 1920px;
+        height: 1080px;
+      }
+      /* Ambient halo in the rim colour, screen-blended over the point cloud.
+         Reads the declared `rim` variable. Variable ids are single lowercase
+         words on purpose: the runtime injects `--<id>` while the compiler
+         injects `--<slugify(id)>`, and those two only agree when the id has
+         no capitals or separators. */
+      #sg-halo {
+        position: absolute;
+        inset: 0;
+        mix-blend-mode: screen;
+        opacity: 0.12;
+        background: radial-gradient(72% 46% at 50% 50%, var(--rim, #311599) 0%, #000000 70%);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="sg-root"
+      data-composition-id="spiral-galaxy"
+      data-composition-variables='[
+        {"id":"stars","type":"number","label":"Star count","default":20000,"min":2000,"max":40000,"step":1000},
+        {"id":"arms","type":"number","label":"Arm count","default":3,"min":2,"max":8,"step":1},
+        {"id":"rate","type":"number","label":"Rotation rate","default":0.25,"min":0,"max":1.5,"step":0.05,"unit":"rad/s"},
+        {"id":"glow","type":"number","label":"Core brightness","default":1.9,"min":0.2,"max":4,"step":0.1},
+        {"id":"size","type":"number","label":"Star size","default":10,"min":2,"max":40,"step":1,"unit":"px"},
+        {"id":"core","type":"color","label":"Core colour","default":"#ffa575"},
+        {"id":"rim","type":"color","label":"Rim colour","default":"#311599"}
+      ]'
+      data-start="0"
+      data-duration="10"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="sg-fill"></div>
+      <canvas id="sg-gl" width="1920" height="1080"></canvas>
+      <div id="sg-halo"></div>
+
+      <!-- Driver clip: gives the block a timed element for the host timeline. -->
+      <div
+        id="sg-drv"
+        class="clip"
+        data-start="0"
+        data-duration="10"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+
+    <script>
+      (function () {
+        var COMP_ID = "spiral-galaxy";
+        var DURATION = 10;
+        var W = 1920,
+          H = 1080;
+
+        // ── Measured constants ────────────────────────────────────────────
+        // Read from the three.js galaxy examples (MIT) during reference
+        // research; reimplemented here, nothing copied.
+        //   count 20000 · branches 3 · radius = ratio^1.5 * 5 · spin 1
+        //   angle = branchAngle + spin * radius + t * (1 - radiusRatio)
+        //   randomnessPower 3 · inside #ffa575 · outside #311599
+        var DISC_RADIUS = 5.0; // world units, from `radius = ratio^1.5 * 5`
+        var RADIUS_POWER = 1.5; // ratio -> radius exponent
+        // Static Archimedean twist, radians per world unit. This is what draws
+        // the arm across the WHOLE disc; the time term below then winds it.
+        // Slightly under the example's 1.0 so the outer arms stay open.
+        var SPIN = 0.78;
+        var RANDOMNESS = 0.2; // arm thickness, as a fraction of DISC_RADIUS
+        var RANDOM_POWER = 3.0; // pow(u, 3): most stars hug the arm, a few stray
+        var TANGENT_SQUEEZE = 0.62; // arms are thin across, long along
+        var DISC_FLATNESS = 0.3; // vertical jitter relative to in-plane jitter
+        var SEED = 20240817; // fixes every per-star attribute
+
+        // ── Variables ─────────────────────────────────────────────────────
+        // Read ONCE at init. Variables never change mid-render.
+        var vars =
+          window.__hyperframes && window.__hyperframes.getVariables
+            ? window.__hyperframes.getVariables()
+            : {};
+        function clampNum(value, lo, hi, fallback) {
+          var n = Number(value);
+          if (!isFinite(n)) n = fallback;
+          return Math.min(hi, Math.max(lo, n));
+        }
+        var STARS = Math.round(clampNum(vars.stars, 2000, 40000, 20000));
+        var ARMS = Math.round(clampNum(vars.arms, 2, 8, 3));
+        var RATE = clampNum(vars.rate, 0, 1.5, 0.25);
+        var GLOW = clampNum(vars.glow, 0.2, 4, 1.9);
+        var SIZE = clampNum(vars.size, 2, 40, 10);
+        var CORE_COLOR = typeof vars.core === "string" ? vars.core : "#ffa575";
+        var RIM_COLOR = typeof vars.rim === "string" ? vars.rim : "#311599";
+
+        // ── Seeded PRNG (mulberry32) ──────────────────────────────────────
+        function mulberry32(seed) {
+          return function () {
+            seed |= 0;
+            seed = (seed + 0x6d2b79f5) | 0;
+            var t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
+            t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+            return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+          };
+        }
+
+        // ── Per-star attributes, seeded once ──────────────────────────────
+        // Nothing here depends on time. Every frame is computed from these
+        // plus `uTime` alone, so frame N never reads frame N-1.
+        var rng = mulberry32(SEED);
+        var aRatio = new Float32Array(STARS); // 0 = core, 1 = rim
+        var aBranch = new Float32Array(STARS); // base arm angle
+        var aJitterR = new Float32Array(STARS); // offset along the arm's radial axis
+        var aJitterT = new Float32Array(STARS); // offset along the arm's tangent
+        var aJitterY = new Float32Array(STARS); // disc thickness
+        var aSpark = new Float32Array(STARS); // per-star size variation
+
+        function jitter() {
+          var magnitude = Math.pow(rng(), RANDOM_POWER) * RANDOMNESS * DISC_RADIUS;
+          return rng() < 0.5 ? -magnitude : magnitude;
+        }
+        for (var i = 0; i < STARS; i++) {
+          aRatio[i] = rng();
+          aBranch[i] = ((i % ARMS) / ARMS) * Math.PI * 2;
+          aJitterR[i] = jitter();
+          aJitterT[i] = jitter() * TANGENT_SQUEEZE;
+          aJitterY[i] = jitter() * DISC_FLATNESS;
+          aSpark[i] = rng();
+        }
+
+        // ── Scene ─────────────────────────────────────────────────────────
+        var renderer = new THREE.WebGLRenderer({
+          canvas: document.getElementById("sg-gl"),
+          antialias: false,
+          alpha: false,
+          preserveDrawingBuffer: true, // survives seek-capture screenshots
+        });
+        renderer.setPixelRatio(1);
+        renderer.setSize(W, H, false);
+        renderer.setClearColor(0x03040a, 1);
+
+        var scene = new THREE.Scene();
+        var camera = new THREE.PerspectiveCamera(45, W / H, 0.1, 200);
+        camera.position.set(0, 2.9, 7.6);
+        camera.lookAt(0, 0, 0);
+
+        var uniforms = {
+          uTime: { value: 0 },
+          uRate: { value: RATE },
+          uSpin: { value: SPIN },
+          uRadius: { value: DISC_RADIUS },
+          uPower: { value: RADIUS_POWER },
+          uSize: { value: SIZE },
+          uRefDist: { value: camera.position.length() },
+          uGlow: { value: GLOW },
+          uCore: { value: new THREE.Color(CORE_COLOR) },
+          uRim: { value: new THREE.Color(RIM_COLOR) },
+        };
+
+        var VERT = [
+          "attribute float aRatio;",
+          "attribute float aBranch;",
+          "attribute float aJitterR;",
+          "attribute float aJitterT;",
+          "attribute float aJitterY;",
+          "attribute float aSpark;",
+          "uniform float uTime;",
+          "uniform float uRate;",
+          "uniform float uSpin;",
+          "uniform float uRadius;",
+          "uniform float uPower;",
+          "uniform float uSize;",
+          "uniform float uRefDist;",
+          "uniform float uGlow;",
+          "uniform vec3 uCore;",
+          "uniform vec3 uRim;",
+          "varying vec3 vColor;",
+          "varying float vBright;",
+          "void main() {",
+          "  float ratio = clamp(aRatio, 0.0, 1.0);",
+          // Differential rotation. omega falls to zero at the rim, so the
+          // core laps the outer disc and the arms wind up over time.
+          // Solved directly from uTime — never integrated frame to frame.
+          "  float omega = 1.0 - ratio;",
+          "  float r = pow(ratio, uPower) * uRadius;",
+          // uSpin * r is the static arm shape (time-independent, so it drops
+          // out of any inner-vs-outer rotation measurement); uRate * uTime *
+          // omega is the winding.
+          "  float theta = aBranch + uSpin * r + uRate * uTime * omega;",
+          "  vec2 radial = vec2(cos(theta), sin(theta));",
+          "  vec2 tangent = vec2(-radial.y, radial.x);",
+          // Jitter rides in the star's own rotating frame, so arm thickness
+          // holds its shape instead of smearing as the disc turns.
+          "  vec2 xz = radial * (r + aJitterR) + tangent * aJitterT;",
+          "  vec4 mv = modelViewMatrix * vec4(xz.x, aJitterY, xz.y, 1.0);",
+          "  gl_Position = projectionMatrix * mv;",
+          "  gl_PointSize = uSize * (uRefDist / max(-mv.z, 0.001)) * (0.55 + 0.75 * aSpark);",
+          // Lerp by r/R (i.e. ratio^1.5), matching the example's colour ramp:
+          // the disc stays warm well past mid-radius and only the rim goes cold.
+          "  vColor = mix(uCore, uRim, pow(ratio, uPower));",
+          "  vBright = uGlow * (0.22 + 0.78 * exp(-ratio * 3.0));",
+          "}",
+        ].join("\n");
+
+        var FRAG = [
+          "varying vec3 vColor;",
+          "varying float vBright;",
+          "void main() {",
+          "  float d = length(gl_PointCoord - vec2(0.5));",
+          "  float a = smoothstep(0.5, 0.0, d);",
+          "  a = a * a;",
+          "  gl_FragColor = vec4(vColor * vBright, a);",
+          "}",
+        ].join("\n");
+
+        var geometry = new THREE.BufferGeometry();
+        // The vertex shader builds every position from the attributes below;
+        // `position` exists only because three.js counts vertices from it.
+        geometry.setAttribute(
+          "position",
+          new THREE.BufferAttribute(new Float32Array(STARS * 3), 3),
+        );
+        geometry.setAttribute("aRatio", new THREE.BufferAttribute(aRatio, 1));
+        geometry.setAttribute("aBranch", new THREE.BufferAttribute(aBranch, 1));
+        geometry.setAttribute("aJitterR", new THREE.BufferAttribute(aJitterR, 1));
+        geometry.setAttribute("aJitterT", new THREE.BufferAttribute(aJitterT, 1));
+        geometry.setAttribute("aJitterY", new THREE.BufferAttribute(aJitterY, 1));
+        geometry.setAttribute("aSpark", new THREE.BufferAttribute(aSpark, 1));
+
+        var material = new THREE.ShaderMaterial({
+          uniforms: uniforms,
+          vertexShader: VERT,
+          fragmentShader: FRAG,
+          blending: THREE.AdditiveBlending,
+          transparent: true,
+          depthTest: false,
+          depthWrite: false,
+        });
+
+        var points = new THREE.Points(geometry, material);
+        points.frustumCulled = false; // positions live in the shader, not in `position`
+        scene.add(points);
+
+        function draw(t) {
+          uniforms.uTime.value = t;
+          renderer.render(scene, camera);
+        }
+
+        // ── Timeline ──────────────────────────────────────────────────────
+        // `tl.eventCallback("onUpdate", ...)` does NOT fire on tl.seek(), so
+        // the repaint hangs off a property setter on the tweened driver —
+        // that setter runs on every render, seek included.
+        var driver = { _t: 0 };
+        Object.defineProperty(driver, "t", {
+          get: function () {
+            return this._t;
+          },
+          set: function (value) {
+            this._t = value;
+            draw(value);
+          },
+        });
+
+        window.__timelines = window.__timelines || {};
+        var tl = gsap.timeline({ paused: true });
+        // ease "none" over the full duration makes driver.t === tl.time().
+        tl.to(driver, { t: DURATION, duration: DURATION, ease: "none", lazy: false }, 0);
+        window.__timelines[COMP_ID] = tl;
+
+        draw(0); // paint frame 0; GSAP skips the setter when the value is unchanged
+      })();
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "spiral-galaxy.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/blocks/split-flap-board/__hf-variables-preview.html b/docs/public/catalog/blocks/split-flap-board/__hf-variables-preview.html
new file mode 100644
index 0000000000..aa10da9140
--- /dev/null
+++ b/docs/public/catalog/blocks/split-flap-board/__hf-variables-preview.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Split-Flap Board variables preview</title>
+    <style>
+      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: transparent; }
+      #hf-vars-root { position: relative; width: 1920px; height: 1080px; }
+      #hf-vars-mount { position: absolute; inset: 0; display: grid; place-items: center; }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  </head>
+  <body>
+    <div id="hf-vars-root" data-composition-id="split-flap-board-variables-preview" data-start="0" data-width="1920" data-height="1080" data-duration="3.5" data-fps="30">
+      <div id="hf-vars-mount" class="clip" data-composition-id="split-flap-board" data-composition-src="./split-flap-board.html" data-start="0" data-duration="3.5" data-track-index="0" data-width="1920" data-height="1080"></div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["split-flap-board-variables-preview"] = gsap.timeline({ paused: true });
+    </script>
+<script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "split-flap-board.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/split-flap-board/split-flap-board.html b/docs/public/catalog/blocks/split-flap-board/split-flap-board.html
new file mode 100644
index 0000000000..16103fc2a1
--- /dev/null
+++ b/docs/public/catalog/blocks/split-flap-board/split-flap-board.html
@@ -0,0 +1,362 @@
+<!doctype html>
+<html
+  lang="en"
+  data-composition-variables='[
+    {"id":"boardText","type":"string","label":"Board text","default":"NOW BOARDING","maxLength":24},
+    {"id":"flapAlphabet","type":"string","label":"Flap alphabet (drum order)","default":" ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789.,&#39;","maxLength":64},
+    {"id":"flipDuration","type":"number","label":"Seconds per flap","default":0.09,"min":0.03,"max":1.2,"step":0.01,"unit":"s"},
+    {"id":"cellStagger","type":"number","label":"Per-cell start stagger","default":0.05,"min":0,"max":0.5,"step":0.01,"unit":"s"},
+    {"id":"cellCount","type":"number","label":"Cells on the board","default":12,"min":1,"max":24,"step":1}
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Split-Flap Board</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="sf-root"
+      data-composition-id="split-flap-board"
+      data-start="0"
+      data-duration="3.5"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+      style="position: relative; width: 1920px; height: 1080px; overflow: hidden"
+    >
+      <style>
+        /* The root's own box lives in an inline style, not a rule: every
+           sub-composition rule is rewritten to
+           `[data-composition-id="split-flap-board"] <selector>` at render,
+           which can never match the root element itself. */
+        #sf-bg {
+          position: absolute;
+          inset: 0;
+          background:
+            radial-gradient(120% 90% at 50% 42%, #23242a 0%, #121317 62%, #0a0a0c 100%), #0a0a0c;
+        }
+        #sf-board {
+          position: absolute;
+          inset: 0;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .sf-cell {
+          position: relative;
+          flex: 0 0 auto;
+          perspective: 900px;
+          border-radius: 9px;
+          background: #0c0c0e;
+          box-shadow:
+            0 18px 34px rgba(0, 0, 0, 0.55),
+            0 0 0 1px rgba(255, 255, 255, 0.05);
+        }
+        .sf-face {
+          position: absolute;
+          left: 0;
+          width: 100%;
+          height: 50%;
+          overflow: hidden;
+          background: linear-gradient(180deg, #26272c 0%, #1a1b1f 100%);
+        }
+        .sf-top,
+        .sf-leaf-a {
+          top: 0;
+          border-radius: 9px 9px 0 0;
+        }
+        .sf-bot,
+        .sf-leaf-b {
+          top: 50%;
+          border-radius: 0 0 9px 9px;
+          background: linear-gradient(180deg, #191a1e 0%, #232429 100%);
+        }
+        .sf-leaf-a {
+          transform-origin: 50% 100%;
+          z-index: 3;
+          backface-visibility: hidden;
+        }
+        .sf-leaf-b {
+          transform-origin: 50% 0%;
+          z-index: 3;
+          backface-visibility: hidden;
+        }
+        .sf-glyph {
+          position: absolute;
+          left: 0;
+          width: 100%;
+          display: block;
+          text-align: center;
+          font-family: ui-monospace, monospace;
+          font-weight: 700;
+          color: #f4efe2;
+          white-space: pre;
+        }
+        .sf-seam {
+          position: absolute;
+          left: 0;
+          top: 50%;
+          width: 100%;
+          height: 3px;
+          margin-top: -1.5px;
+          background: #050506;
+          z-index: 4;
+        }
+      </style>
+
+      <div id="sf-bg"></div>
+      <div id="sf-board" class="clip" data-start="0" data-duration="3.5" data-track-index="0"></div>
+
+      <script>
+        (function () {
+          window.__timelines = window.__timelines || {};
+
+          // ---------------------------------------------------------------
+          // Reference numbers (see report / research entry F#1)
+          //
+          // Alphabet: the 40-position drum from the scottbez1/splitflap
+          // project (Apache-2.0, README read) — blank, A-Z, 0-9, then `.,'`.
+          // Drum order is what makes the cascade read as a real board: a cell
+          // never jumps, it walks the drum forward through every intervening
+          // character, so letters resolve early and digits/punctuation late.
+          //
+          // Flip duration: the only published-ish figure is a DIY firmware
+          // proxy (28BYJ-48 stepper, ~83.59 steps/flap, a=500 steps/s^2 ->
+          // triangular profile -> ~1.16 s/flap). That is a hobby build, NOT a
+          // Solari spec, and real boards audibly flutter at tens of ms per
+          // flap. The default below sits in that observed band; the DIY proxy
+          // is still reachable at the top of the `flipDuration` range.
+          //
+          // Flap fall: constant angular acceleration through 180 degrees,
+          // theta(p) = 180 * p^2. The flap therefore hangs near the top and
+          // slaps down — no ease-out, because a falling leaf does not
+          // decelerate. The two CSS leaves are the two faces of that one flap
+          // (hand-off at theta = 90, i.e. p = 0.707).
+          // ---------------------------------------------------------------
+          var DEFAULT_ALPHABET = " ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789.,'";
+          var DEG = Math.PI / 180;
+
+          function num(value, min, max, fallback) {
+            var n = typeof value === "number" ? value : parseFloat(value);
+            if (!isFinite(n)) return fallback;
+            return Math.min(max, Math.max(min, n));
+          }
+
+          var vars =
+            window.__hyperframes && window.__hyperframes.getVariables
+              ? window.__hyperframes.getVariables()
+              : {};
+
+          var alphabet = String(vars.flapAlphabet || DEFAULT_ALPHABET);
+          if (alphabet.length < 2) alphabet = DEFAULT_ALPHABET;
+          var N = alphabet.length;
+
+          var flipDur = num(vars.flipDuration, 0.03, 1.2, 0.09);
+          var stagger = num(vars.cellStagger, 0, 0.5, 0.05);
+          var cellCount = Math.round(num(vars.cellCount, 1, 24, 12));
+
+          var text = String(vars.boardText == null ? "NOW BOARDING" : vars.boardText)
+            .toUpperCase()
+            .slice(0, cellCount);
+          // Centre the string across the board; unused cells stay on the
+          // drum's first position (blank in the default alphabet).
+          var lead = Math.floor((cellCount - text.length) / 2);
+          var targets = [];
+          for (var i = 0; i < cellCount; i++) {
+            var ch =
+              i >= lead && i < lead + text.length ? text.charAt(i - lead) : alphabet.charAt(0);
+            var g = alphabet.indexOf(ch);
+            targets.push(g < 0 ? 0 : g);
+          }
+
+          // Geometry: fit `cellCount` cells across 1920 with a 120px margin.
+          var GAP = 10;
+          var cw = Math.min(130, Math.floor((1920 - 240 - (cellCount - 1) * GAP) / cellCount));
+          var chh = Math.round(cw * 1.45);
+
+          var board = document.getElementById("sf-board");
+          board.style.gap = GAP + "px";
+
+          function makeFace(cls, glyphTop) {
+            var face = document.createElement("div");
+            face.className = "sf-face " + cls;
+            var glyph = document.createElement("span");
+            glyph.className = "sf-glyph";
+            glyph.style.height = chh + "px";
+            glyph.style.lineHeight = chh + "px";
+            glyph.style.fontSize = Math.round(cw * 0.78) + "px";
+            glyph.style.top = glyphTop + "px";
+            face.appendChild(glyph);
+            return face;
+          }
+
+          var cells = [];
+          for (var c = 0; c < cellCount; c++) {
+            var cell = document.createElement("div");
+            cell.className = "sf-cell";
+            cell.id = "sf-cell-" + c;
+            cell.style.width = cw + "px";
+            cell.style.height = chh + "px";
+            // The mechanism IS clipped, stacked half-glyphs: each face holds a
+            // whole character and shows half of it, and the falling leaf sits
+            // on top of the face behind it. Declared intentional so the layout
+            // auditor reports real regressions instead of the design.
+            cell.setAttribute("data-layout-allow-overlap", "");
+            cell.setAttribute("data-layout-allow-occlusion", "");
+            cell.setAttribute("data-layout-allow-overflow", "");
+
+            var top = makeFace("sf-top", 0);
+            var bot = makeFace("sf-bot", -Math.round(chh / 2));
+            var leafA = makeFace("sf-leaf-a", 0);
+            var leafB = makeFace("sf-leaf-b", -Math.round(chh / 2));
+
+            var seam = document.createElement("div");
+            seam.className = "sf-seam";
+
+            cell.appendChild(top);
+            cell.appendChild(bot);
+            cell.appendChild(leafA);
+            cell.appendChild(leafB);
+            cell.appendChild(seam);
+            board.appendChild(cell);
+
+            cells.push({
+              // steps is unidirectional: the drum only ever spins forward,
+              // start position is always the drum's first flap (index 0).
+              steps: targets[c],
+              top: top.firstChild,
+              bot: bot.firstChild,
+              leafA: leafA,
+              leafB: leafB,
+              glyphA: leafA.firstChild,
+              glyphB: leafB.firstChild,
+            });
+          }
+
+          // A face that is not in use must be wiped, not merely hidden.
+          // Leaving a stale transform/filter/glyph on an opacity-0 leaf makes
+          // the DOM (and, via layer promotion, the rasterised pixels) depend
+          // on which frames were visited before this one — the exact failure
+          // seeking is supposed to be immune to.
+          function clearLeaf(leaf, glyph) {
+            leaf.style.opacity = "0";
+            leaf.style.transform = "";
+            leaf.style.filter = "";
+            glyph.textContent = "";
+          }
+
+          function showLeaf(leaf, glyph, char, angle, shade) {
+            glyph.textContent = char;
+            leaf.style.opacity = "1";
+            leaf.style.transform = "rotateX(" + angle.toFixed(2) + "deg)";
+            leaf.style.filter = "brightness(" + shade + ")";
+          }
+
+          // Pure function of absolute composition time. No accumulator, no
+          // dependence on the previous frame — seeking to any t reconstructs
+          // the whole board from t alone.
+          function paint(t) {
+            for (var i = 0; i < cells.length; i++) {
+              var cell = cells[i];
+              var tLocal = t - i * stagger;
+              var raw = tLocal <= 0 ? 0 : tLocal / flipDur;
+              var count = Math.floor(raw);
+              var p = raw - count;
+              if (count >= cell.steps) {
+                count = cell.steps;
+                p = 0;
+              }
+
+              var outgoing = alphabet.charAt(count % N);
+              var incoming = alphabet.charAt((count + 1) % N);
+              var flipping = count < cell.steps && p > 0;
+
+              if (!flipping) {
+                cell.top.textContent = outgoing;
+                cell.bot.textContent = outgoing;
+                clearLeaf(cell.leafA, cell.glyphA);
+                clearLeaf(cell.leafB, cell.glyphB);
+                continue;
+              }
+
+              // The new character is already seated behind the falling flap:
+              // its top half shows, its bottom half is still hidden by the
+              // outgoing flap lying in the lower slot.
+              cell.top.textContent = incoming;
+              cell.bot.textContent = outgoing;
+
+              var theta = 180 * p * p;
+              var shade = (1 - 0.5 * Math.sin(theta * DEG)).toFixed(3);
+              if (theta < 90) {
+                showLeaf(cell.leafA, cell.glyphA, outgoing, -theta, shade);
+                clearLeaf(cell.leafB, cell.glyphB);
+              } else {
+                clearLeaf(cell.leafA, cell.glyphA);
+                showLeaf(cell.leafB, cell.glyphB, incoming, 180 - theta, shade);
+              }
+            }
+          }
+
+          var duration = parseFloat(document.getElementById("sf-root").dataset.duration) || 8;
+
+          // GSAP suppresses events on seek(), so onUpdate callbacks never fire
+          // during a render. A property setter on the tweened driver always
+          // runs, because GSAP writes the value itself.
+          var driverTime = 0;
+          var driver = {};
+          Object.defineProperty(driver, "t", {
+            configurable: true,
+            get: function () {
+              return driverTime;
+            },
+            set: function (value) {
+              driverTime = value;
+              paint(value);
+            },
+          });
+
+          var tl = gsap.timeline({ paused: true });
+          tl.to(driver, { t: duration, duration: duration, ease: "none" }, 0);
+
+          paint(0);
+
+          window.__timelines["split-flap-board"] = tl;
+        })();
+      </script>
+    </div>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "split-flap-board.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/blocks/spotify-card/spotify-card.html b/docs/public/catalog/blocks/spotify-card/spotify-card.html
new file mode 100644
index 0000000000..80c8549b74
--- /dev/null
+++ b/docs/public/catalog/blocks/spotify-card/spotify-card.html
@@ -0,0 +1,299 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=block"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      body {
+        width: 1080px;
+        height: 1920px;
+        font-family: "Inter", sans-serif;
+      }
+
+      [data-composition-id="spotify-card"] .card {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        margin-top: -495px;
+        margin-left: -390px;
+        width: 780px;
+        background: linear-gradient(
+          165deg,
+          rgba(140, 155, 170, 0.42) 0%,
+          rgba(100, 115, 130, 0.35) 30%,
+          rgba(75, 88, 105, 0.38) 60%,
+          rgba(60, 72, 88, 0.44) 100%
+        );
+        border-radius: 28px;
+        padding: 36px;
+        border: 1px solid rgba(255, 255, 255, 0.22);
+        box-shadow:
+          0 24px 48px rgba(0, 0, 0, 0.3),
+          0 2px 6px rgba(0, 0, 0, 0.12),
+          inset 0 1px 0 rgba(255, 255, 255, 0.32),
+          inset 0 -1px 0 rgba(0, 0, 0, 0.12);
+        backdrop-filter: blur(40px) saturate(180%);
+        -webkit-backdrop-filter: blur(40px) saturate(180%);
+        overflow: hidden;
+      }
+
+      /* Specular highlight — light refraction across top */
+      [data-composition-id="spotify-card"] .card::before {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 55%;
+        background: linear-gradient(
+          180deg,
+          rgba(255, 255, 255, 0.18) 0%,
+          rgba(255, 255, 255, 0.07) 35%,
+          transparent 100%
+        );
+        border-radius: 28px 28px 0 0;
+        pointer-events: none;
+      }
+
+      /* Edge shine — bottom rim catch light */
+      [data-composition-id="spotify-card"] .card::after {
+        content: "";
+        position: absolute;
+        bottom: 0;
+        left: 20px;
+        right: 20px;
+        height: 1px;
+        background: linear-gradient(
+          90deg,
+          transparent 0%,
+          rgba(255, 255, 255, 0.08) 30%,
+          rgba(255, 255, 255, 0.12) 50%,
+          rgba(255, 255, 255, 0.08) 70%,
+          transparent 100%
+        );
+        pointer-events: none;
+      }
+
+      /* Album Art */
+      [data-composition-id="spotify-card"] .album-art {
+        width: 708px;
+        height: 708px;
+        border-radius: 16px;
+        overflow: hidden;
+        position: relative;
+        z-index: 1;
+        background: linear-gradient(145deg, #1db954 0%, #17a34a 30%, #0f7234 60%, #191414 100%);
+        margin-bottom: 36px;
+      }
+
+      [data-composition-id="spotify-card"] .album-art-icon {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        opacity: 0.2;
+      }
+
+      /* Track Info */
+      [data-composition-id="spotify-card"] .track-info {
+        position: relative;
+        z-index: 1;
+        margin-bottom: 28px;
+        padding: 0 8px;
+      }
+
+      [data-composition-id="spotify-card"] .track-name {
+        font-size: 52px;
+        font-weight: 700;
+        color: #ffffff;
+        letter-spacing: -0.02em;
+        line-height: 1.15;
+        margin-bottom: 8px;
+      }
+
+      [data-composition-id="spotify-card"] .artist-name {
+        font-size: 34px;
+        font-weight: 400;
+        color: rgba(255, 255, 255, 0.7);
+        line-height: 1.3;
+      }
+
+      /* Spotify Branding */
+      [data-composition-id="spotify-card"] .spotify-brand {
+        position: relative;
+        z-index: 1;
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 0 8px;
+      }
+
+      [data-composition-id="spotify-card"] .spotify-logo {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      [data-composition-id="spotify-card"] .spotify-brand-text {
+        font-size: 26px;
+        font-weight: 600;
+        color: rgba(255, 255, 255, 0.55);
+        letter-spacing: 0.01em;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="spotify-card"
+      data-width="1080"
+      data-height="1920"
+      data-start="0"
+      data-duration="5"
+    >
+      <div id="card" class="clip card" data-start="0" data-duration="5" data-track-index="0">
+        <!-- Album Art -->
+        <div id="album-art" class="album-art">
+          <svg class="album-art-icon" width="200" height="200" viewBox="0 0 24 24" fill="none">
+            <path
+              d="M9 18V5l12-2v13"
+              stroke="rgba(255,255,255,0.7)"
+              stroke-width="1"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+            <circle cx="6" cy="18" r="3" stroke="rgba(255,255,255,0.7)" stroke-width="1" />
+            <circle cx="18" cy="16" r="3" stroke="rgba(255,255,255,0.7)" stroke-width="1" />
+          </svg>
+        </div>
+
+        <!-- Track Info -->
+        <div class="track-info">
+          <div id="track-name" class="track-name">HyperFrames</div>
+          <div id="artist-name" class="artist-name">HeyGen</div>
+        </div>
+
+        <!-- Spotify Branding -->
+        <div id="spotify-brand" class="spotify-brand">
+          <div class="spotify-logo">
+            <svg width="32" height="32" viewBox="0 0 16 16" fill="rgba(255,255,255,0.55)">
+              <path
+                d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0m3.669 11.538a.5.5 0 0 1-.686.165c-1.879-1.147-4.243-1.407-7.028-.77a.499.499 0 0 1-.222-.973c3.048-.696 5.662-.397 7.77.892a.5.5 0 0 1 .166.686m.979-2.178a.624.624 0 0 1-.858.205c-2.15-1.321-5.428-1.704-7.972-.932a.625.625 0 0 1-.362-1.194c2.905-.881 6.517-.454 8.986 1.063a.624.624 0 0 1 .206.858m.084-2.268C10.154 5.56 5.9 5.419 3.438 6.166a.748.748 0 1 1-.434-1.432c2.825-.857 7.523-.692 10.492 1.07a.747.747 0 1 1-.764 1.288"
+              />
+            </svg>
+          </div>
+          <span class="spotify-brand-text">Spotify</span>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      var tl = gsap.timeline({ paused: true });
+
+      var card = document.getElementById("card");
+      var albumArt = document.getElementById("album-art");
+      var trackName = document.getElementById("track-name");
+      var artistName = document.getElementById("artist-name");
+      var spotifyBrand = document.getElementById("spotify-brand");
+
+      // Start state
+      gsap.set(card, { y: 60, opacity: 0, scale: 0.94 });
+      gsap.set(trackName, { y: 20, opacity: 0 });
+      gsap.set(artistName, { y: 16, opacity: 0 });
+      gsap.set(spotifyBrand, { y: 12, opacity: 0 });
+
+      // ── Card entrance ────────────────────────────────────────
+      tl.to(
+        card,
+        {
+          y: 0,
+          opacity: 1,
+          scale: 1,
+          duration: 0.7,
+          ease: "power3.out",
+        },
+        0.1,
+      );
+
+      // ── Text stagger in ─────────────────────────────────────
+      tl.to(
+        trackName,
+        {
+          y: 0,
+          opacity: 1,
+          duration: 0.5,
+          ease: "power2.out",
+        },
+        0.55,
+      );
+
+      tl.to(
+        artistName,
+        {
+          y: 0,
+          opacity: 1,
+          duration: 0.45,
+          ease: "power2.out",
+        },
+        0.7,
+      );
+
+      tl.to(
+        spotifyBrand,
+        {
+          y: 0,
+          opacity: 1,
+          duration: 0.4,
+          ease: "power2.out",
+        },
+        0.85,
+      );
+
+      // ── Subtle album art breathe ────────────────────────────
+      tl.to(
+        albumArt,
+        {
+          scale: 1.015,
+          duration: 1.5,
+          ease: "power1.inOut",
+          yoyo: true,
+          repeat: 1,
+        },
+        1.2,
+      );
+
+      // ── Card exit ────────────────────────────────────────────
+      tl.to(
+        card,
+        {
+          y: -40,
+          opacity: 0,
+          scale: 0.96,
+          duration: 0.5,
+          ease: "power2.in",
+        },
+        4.2,
+      );
+
+      window.__timelines["spotify-card"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/swirl-vortex/swirl-vortex.html b/docs/public/catalog/blocks/swirl-vortex/swirl-vortex.html
new file mode 100644
index 0000000000..6b7dc8bf8d
--- /dev/null
+++ b/docs/public/catalog/blocks/swirl-vortex/swirl-vortex.html
@@ -0,0 +1,376 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      @import url("https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Bebas+Neue&family=JetBrains+Mono:wght@400;700&family=Lato:wght@400;700&display=block");
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <style>
+        [data-composition-id="main"] {
+          width: 1920px;
+          height: 1080px;
+          overflow: hidden;
+          position: relative;
+          background: #073b4c;
+        }
+
+        /* Blueprint grid */
+        .bp-grid {
+          position: absolute;
+          inset: 0;
+          background-image:
+            linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
+            linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
+          background-size: 40px 40px;
+          pointer-events: none;
+        }
+
+        /* Layout */
+        .bp-left {
+          position: absolute;
+          left: 0;
+          top: 0;
+          bottom: 0;
+          width: 1200px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .bp-right {
+          position: absolute;
+          right: 0;
+          top: 0;
+          bottom: 0;
+          width: 720px;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          padding: 60px 60px 60px 40px;
+        }
+        .bp-divider {
+          position: absolute;
+          left: 1200px;
+          top: 60px;
+          bottom: 60px;
+          width: 1px;
+          background: #06d6a0;
+          opacity: 0.15;
+        }
+        .bp-number {
+          font-family: "Space Mono", monospace;
+          font-size: 14px;
+          font-weight: 700;
+          letter-spacing: 0.4em;
+          text-transform: uppercase;
+          position: absolute;
+          top: 40px;
+          left: 60px;
+          color: #06d6a0;
+        }
+
+        /* Right panel typography */
+        .bp-name {
+          font-family: "Bebas Neue", sans-serif;
+          font-size: 38px;
+          letter-spacing: 0.08em;
+          margin-bottom: 20px;
+          color: #06d6a0;
+        }
+        .bp-plabel {
+          font-family: "Space Mono", monospace;
+          font-size: 11px;
+          font-weight: 700;
+          letter-spacing: 0.3em;
+          text-transform: uppercase;
+          margin-bottom: 10px;
+          color: #06d6a0;
+          opacity: 0.5;
+        }
+        .bp-prompt {
+          font-family: "JetBrains Mono", monospace;
+          font-size: 20px;
+          line-height: 1.6;
+          padding: 16px 20px;
+          border-radius: 6px;
+          margin-bottom: 20px;
+          color: #06d6a0;
+          background: rgba(6, 214, 160, 0.06);
+          border: 1px solid rgba(6, 214, 160, 0.12);
+        }
+        .bp-desc {
+          font-family: "Lato", sans-serif;
+          font-size: 17px;
+          line-height: 1.6;
+          color: #7a9ab0;
+          opacity: 0.55;
+        }
+
+        /* GL scenes (hidden, just for texture capture) */
+        .scene {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1200px;
+          height: 1080px;
+          overflow: hidden;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .scene-label {
+          font-family: "Bebas Neue", sans-serif;
+          font-size: 140px;
+          letter-spacing: 0.06em;
+          opacity: 0.12;
+        }
+      </style>
+
+      <div class="bp-grid"></div>
+      <div class="bp-divider"></div>
+      <div class="bp-number">10 / 14</div>
+
+      <!-- GL demo scenes (captured as textures, then hidden) -->
+      <div id="s1" class="scene" style="background: #073b4c">
+        <div class="scene-label" style="color: #06d6a0">SCENE A</div>
+      </div>
+      <div id="s2" class="scene" style="background: #06d6a0; opacity: 0">
+        <div class="scene-label" style="color: #073b4c">SCENE B</div>
+      </div>
+
+      <!-- GL canvas (left panel only) -->
+      <canvas
+        id="gl-canvas"
+        width="1200"
+        height="1080"
+        style="
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1200px;
+          height: 1080px;
+          z-index: 10;
+          pointer-events: none;
+          display: none;
+        "
+      >
+      </canvas>
+
+      <!-- Right panel metadata -->
+      <div class="bp-right">
+        <div class="bp-name">Swirl Vortex</div>
+        <div class="bp-plabel">Prompt</div>
+        <div class="bp-prompt">"use swirl vortex shader transition"</div>
+        <div class="bp-desc">
+          Both scenes swirl in opposite directions with FBM-warped spiral path. Organic distortion.
+        </div>
+      </div>
+
+      <div
+        id="driver"
+        class="clip"
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+      var glCanvas = document.getElementById("gl-canvas");
+      var gl = glCanvas.getContext("webgl", { preserveDrawingBuffer: true });
+      if (!gl) {
+        console.warn("WebGL not available");
+        window.__timelines["main"] = gsap.timeline({ paused: true });
+      } else {
+        gl.viewport(0, 0, 1200, 1080);
+        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
+        var sceneTextures = {};
+
+        function captureScene(sceneId) {
+          var scene = document.getElementById(sceneId);
+          var origOpacity = scene.style.opacity;
+          var origZ = scene.style.zIndex;
+          scene.style.opacity = "1";
+          scene.style.zIndex = "999";
+          scene.offsetHeight;
+          var c = document.createElement("canvas");
+          c.width = 1200;
+          c.height = 1080;
+          var ctx = c.getContext("2d");
+          ctx.fillStyle = window.getComputedStyle(scene).backgroundColor;
+          ctx.fillRect(0, 0, 1200, 1080);
+          var sr = scene.getBoundingClientRect();
+          var els = scene.querySelectorAll("*");
+          for (var i = 0; i < els.length; i++) {
+            var el = els[i],
+              cs = window.getComputedStyle(el);
+            if (cs.display === "none" || cs.visibility === "hidden") continue;
+            var r = el.getBoundingClientRect();
+            if (r.width < 1 || r.height < 1) continue;
+            var x = r.left - sr.left,
+              y = r.top - sr.top,
+              w = r.width,
+              h = r.height;
+            ctx.save();
+            ctx.globalAlpha = parseFloat(cs.opacity) || 1;
+            var bg = cs.backgroundColor;
+            if (bg && bg !== "rgba(0, 0, 0, 0)" && bg !== "transparent") {
+              ctx.fillStyle = bg;
+              ctx.fillRect(x, y, w, h);
+            }
+            var hasChildEls = el.querySelector("div,span,img,video");
+            var text = "";
+            for (var j = 0; j < el.childNodes.length; j++)
+              if (el.childNodes[j].nodeType === 3) text += el.childNodes[j].textContent;
+            text = text.trim();
+            if (text && !hasChildEls) {
+              ctx.font = cs.fontWeight + " " + cs.fontSize + " " + cs.fontFamily;
+              ctx.fillStyle = cs.color;
+              if (cs.letterSpacing && cs.letterSpacing !== "normal")
+                ctx.letterSpacing = cs.letterSpacing;
+              ctx.textAlign = "center";
+              ctx.textBaseline = "middle";
+              ctx.fillText(text, x + w / 2, y + h / 2);
+            }
+            ctx.restore();
+          }
+          scene.style.opacity = origOpacity;
+          scene.style.zIndex = origZ;
+          var tex = gl.createTexture();
+          gl.bindTexture(gl.TEXTURE_2D, tex);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+          gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, c);
+          sceneTextures[sceneId] = tex;
+        }
+
+        var vertSrc =
+          "attribute vec2 a_pos; varying vec2 v_uv; void main(){" +
+          "v_uv=a_pos*0.5+0.5; v_uv.y=1.0-v_uv.y; gl_Position=vec4(a_pos,0,1);}";
+        var quadBuf = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);
+        gl.bufferData(
+          gl.ARRAY_BUFFER,
+          new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),
+          gl.STATIC_DRAW,
+        );
+        function compileShader(src, type) {
+          var s = gl.createShader(type);
+          gl.shaderSource(s, src);
+          gl.compileShader(s);
+          if (!gl.getShaderParameter(s, gl.COMPILE_STATUS))
+            console.error("Shader:", gl.getShaderInfoLog(s));
+          return s;
+        }
+        function mkProg(fragSrc) {
+          var p = gl.createProgram();
+          gl.attachShader(p, compileShader(vertSrc, gl.VERTEX_SHADER));
+          gl.attachShader(p, compileShader(fragSrc, gl.FRAGMENT_SHADER));
+          gl.linkProgram(p);
+          if (!gl.getProgramParameter(p, gl.LINK_STATUS))
+            console.error("Link:", gl.getProgramInfoLog(p));
+          return p;
+        }
+
+        var H =
+          "precision mediump float;" +
+          "varying vec2 v_uv;" +
+          "uniform sampler2D u_from, u_to;" +
+          "uniform float u_progress;" +
+          "uniform vec2 u_resolution;\n";
+
+        var NQ =
+          "float hash(vec2 p){return fract(sin(dot(p,vec2(127.1,311.7)))*43758.5453);}" +
+          "float vnoise(vec2 p){vec2 i=floor(p),f=fract(p);" +
+          "f=f*f*f*(f*(f*6.-15.)+10.);" +
+          "return mix(mix(hash(i),hash(i+vec2(1,0)),f.x)," +
+          "mix(hash(i+vec2(0,1)),hash(i+vec2(1,1)),f.x),f.y);}" +
+          "float fbm(vec2 p){float v=0.,a=.5;" +
+          "mat2 R=mat2(.8,.6,-.6,.8);" +
+          "for(int i=0;i<5;i++){v+=a*vnoise(p);p=R*p*2.02;a*=.5;}return v;}";
+
+        var progPass = mkProg(H + "void main(){gl_FragColor=texture2D(u_from,v_uv);}");
+        var progTrans = mkProg(
+          H +
+            NQ +
+            "void main(){vec2 uv=v_uv-.5;float dist=length(uv);float warp=fbm(v_uv*4.)*.5;float fromAng=u_progress*(1.-dist)*10.+warp*u_progress*3.;float fs=sin(fromAng),fc=cos(fromAng);vec2 fromUv=clamp(vec2(uv.x*fc-uv.y*fs,uv.x*fs+uv.y*fc)+.5,0.,1.);float toAng=-(1.-u_progress)*(1.-dist)*10.-warp*(1.-u_progress)*3.;float ts=sin(toAng),tc=cos(toAng);vec2 toUv=clamp(vec2(uv.x*tc-uv.y*ts,uv.x*ts+uv.y*tc)+.5,0.,1.);vec4 A=texture2D(u_from,fromUv);vec4 B=texture2D(u_to,toUv);gl_FragColor=mix(A,B,u_progress);}",
+        );
+
+        function renderShader(prog, texFrom, texTo, progress) {
+          gl.useProgram(prog);
+          gl.activeTexture(gl.TEXTURE0);
+          gl.bindTexture(gl.TEXTURE_2D, texFrom);
+          gl.uniform1i(gl.getUniformLocation(prog, "u_from"), 0);
+          gl.activeTexture(gl.TEXTURE1);
+          gl.bindTexture(gl.TEXTURE_2D, texTo);
+          gl.uniform1i(gl.getUniformLocation(prog, "u_to"), 1);
+          gl.uniform1f(gl.getUniformLocation(prog, "u_progress"), progress);
+          gl.uniform2f(gl.getUniformLocation(prog, "u_resolution"), 1200, 1080);
+          var pos = gl.getAttribLocation(prog, "a_pos");
+          gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);
+          gl.enableVertexAttribArray(pos);
+          gl.vertexAttribPointer(pos, 2, gl.FLOAT, false, 0, 0);
+          gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+        }
+
+        function easeInOut(p) {
+          return p < 0.5 ? 2 * p * p : 1 - Math.pow(-2 * p + 2, 2) / 2;
+        }
+
+        captureScene("s1");
+        captureScene("s2");
+        glCanvas.style.display = "block";
+        renderShader(progPass, sceneTextures["s1"], sceneTextures["s1"], 0);
+        document.querySelectorAll(".scene").forEach(function (s) {
+          s.style.opacity = "0";
+        });
+
+        var tl = gsap.timeline({
+          paused: true,
+          onUpdate: function () {
+            var t = tl.time();
+            if (t >= 1.0 && t < 3.0) {
+              renderShader(
+                progTrans,
+                sceneTextures["s1"],
+                sceneTextures["s2"],
+                easeInOut((t - 1.0) / 2.0),
+              );
+            } else if (t >= 3.0) {
+              renderShader(progPass, sceneTextures["s2"], sceneTextures["s2"], 0);
+            } else {
+              renderShader(progPass, sceneTextures["s1"], sceneTextures["s1"], 0);
+            }
+          },
+        });
+        tl.to({ v: 0 }, { v: 1, duration: 4, ease: "none" }, 0);
+        window.__timelines["main"] = tl;
+      } // end if (gl)
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/thermal-distortion/thermal-distortion.html b/docs/public/catalog/blocks/thermal-distortion/thermal-distortion.html
new file mode 100644
index 0000000000..ec5c04f027
--- /dev/null
+++ b/docs/public/catalog/blocks/thermal-distortion/thermal-distortion.html
@@ -0,0 +1,377 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      @import url("https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Bebas+Neue&family=JetBrains+Mono:wght@400;700&family=Lato:wght@400;700&display=block");
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <style>
+        [data-composition-id="main"] {
+          width: 1920px;
+          height: 1080px;
+          overflow: hidden;
+          position: relative;
+          background: #3d405b;
+        }
+
+        /* Blueprint grid */
+        .bp-grid {
+          position: absolute;
+          inset: 0;
+          background-image:
+            linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
+            linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
+          background-size: 40px 40px;
+          pointer-events: none;
+        }
+
+        /* Layout */
+        .bp-left {
+          position: absolute;
+          left: 0;
+          top: 0;
+          bottom: 0;
+          width: 1200px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .bp-right {
+          position: absolute;
+          right: 0;
+          top: 0;
+          bottom: 0;
+          width: 720px;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          padding: 60px 60px 60px 40px;
+        }
+        .bp-divider {
+          position: absolute;
+          left: 1200px;
+          top: 60px;
+          bottom: 60px;
+          width: 1px;
+          background: #e07a5f;
+          opacity: 0.15;
+        }
+        .bp-number {
+          font-family: "Space Mono", monospace;
+          font-size: 14px;
+          font-weight: 700;
+          letter-spacing: 0.4em;
+          text-transform: uppercase;
+          position: absolute;
+          top: 40px;
+          left: 60px;
+          color: #e07a5f;
+        }
+
+        /* Right panel typography */
+        .bp-name {
+          font-family: "Bebas Neue", sans-serif;
+          font-size: 38px;
+          letter-spacing: 0.08em;
+          margin-bottom: 20px;
+          color: #e07a5f;
+        }
+        .bp-plabel {
+          font-family: "Space Mono", monospace;
+          font-size: 11px;
+          font-weight: 700;
+          letter-spacing: 0.3em;
+          text-transform: uppercase;
+          margin-bottom: 10px;
+          color: #e07a5f;
+          opacity: 0.5;
+        }
+        .bp-prompt {
+          font-family: "JetBrains Mono", monospace;
+          font-size: 20px;
+          line-height: 1.6;
+          padding: 16px 20px;
+          border-radius: 6px;
+          margin-bottom: 20px;
+          color: #e07a5f;
+          background: rgba(224, 122, 95, 0.06);
+          border: 1px solid rgba(224, 122, 95, 0.12);
+        }
+        .bp-desc {
+          font-family: "Lato", sans-serif;
+          font-size: 17px;
+          line-height: 1.6;
+          color: #a0a0b0;
+          opacity: 0.55;
+        }
+
+        /* GL scenes (hidden, just for texture capture) */
+        .scene {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1200px;
+          height: 1080px;
+          overflow: hidden;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .scene-label {
+          font-family: "Bebas Neue", sans-serif;
+          font-size: 140px;
+          letter-spacing: 0.06em;
+          opacity: 0.12;
+        }
+      </style>
+
+      <div class="bp-grid"></div>
+      <div class="bp-divider"></div>
+      <div class="bp-number">11 / 14</div>
+
+      <!-- GL demo scenes (captured as textures, then hidden) -->
+      <div id="s1" class="scene" style="background: #3d405b">
+        <div class="scene-label" style="color: #e07a5f">SCENE A</div>
+      </div>
+      <div id="s2" class="scene" style="background: #e07a5f; opacity: 0">
+        <div class="scene-label" style="color: #3d405b">SCENE B</div>
+      </div>
+
+      <!-- GL canvas (left panel only) -->
+      <canvas
+        id="gl-canvas"
+        width="1200"
+        height="1080"
+        style="
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1200px;
+          height: 1080px;
+          z-index: 10;
+          pointer-events: none;
+          display: none;
+        "
+      >
+      </canvas>
+
+      <!-- Right panel metadata -->
+      <div class="bp-right">
+        <div class="bp-name">Thermal Distortion</div>
+        <div class="bp-plabel">Prompt</div>
+        <div class="bp-prompt">"use thermal distortion shader transition"</div>
+        <div class="bp-desc">
+          FBM-driven heat shimmer rising from the bottom. Sine displacement modulated by noise with
+          warm haze.
+        </div>
+      </div>
+
+      <div
+        id="driver"
+        class="clip"
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+      var glCanvas = document.getElementById("gl-canvas");
+      var gl = glCanvas.getContext("webgl", { preserveDrawingBuffer: true });
+      if (!gl) {
+        console.warn("WebGL not available");
+        window.__timelines["main"] = gsap.timeline({ paused: true });
+      } else {
+        gl.viewport(0, 0, 1200, 1080);
+        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
+        var sceneTextures = {};
+
+        function captureScene(sceneId) {
+          var scene = document.getElementById(sceneId);
+          var origOpacity = scene.style.opacity;
+          var origZ = scene.style.zIndex;
+          scene.style.opacity = "1";
+          scene.style.zIndex = "999";
+          scene.offsetHeight;
+          var c = document.createElement("canvas");
+          c.width = 1200;
+          c.height = 1080;
+          var ctx = c.getContext("2d");
+          ctx.fillStyle = window.getComputedStyle(scene).backgroundColor;
+          ctx.fillRect(0, 0, 1200, 1080);
+          var sr = scene.getBoundingClientRect();
+          var els = scene.querySelectorAll("*");
+          for (var i = 0; i < els.length; i++) {
+            var el = els[i],
+              cs = window.getComputedStyle(el);
+            if (cs.display === "none" || cs.visibility === "hidden") continue;
+            var r = el.getBoundingClientRect();
+            if (r.width < 1 || r.height < 1) continue;
+            var x = r.left - sr.left,
+              y = r.top - sr.top,
+              w = r.width,
+              h = r.height;
+            ctx.save();
+            ctx.globalAlpha = parseFloat(cs.opacity) || 1;
+            var bg = cs.backgroundColor;
+            if (bg && bg !== "rgba(0, 0, 0, 0)" && bg !== "transparent") {
+              ctx.fillStyle = bg;
+              ctx.fillRect(x, y, w, h);
+            }
+            var hasChildEls = el.querySelector("div,span,img,video");
+            var text = "";
+            for (var j = 0; j < el.childNodes.length; j++)
+              if (el.childNodes[j].nodeType === 3) text += el.childNodes[j].textContent;
+            text = text.trim();
+            if (text && !hasChildEls) {
+              ctx.font = cs.fontWeight + " " + cs.fontSize + " " + cs.fontFamily;
+              ctx.fillStyle = cs.color;
+              if (cs.letterSpacing && cs.letterSpacing !== "normal")
+                ctx.letterSpacing = cs.letterSpacing;
+              ctx.textAlign = "center";
+              ctx.textBaseline = "middle";
+              ctx.fillText(text, x + w / 2, y + h / 2);
+            }
+            ctx.restore();
+          }
+          scene.style.opacity = origOpacity;
+          scene.style.zIndex = origZ;
+          var tex = gl.createTexture();
+          gl.bindTexture(gl.TEXTURE_2D, tex);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+          gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, c);
+          sceneTextures[sceneId] = tex;
+        }
+
+        var vertSrc =
+          "attribute vec2 a_pos; varying vec2 v_uv; void main(){" +
+          "v_uv=a_pos*0.5+0.5; v_uv.y=1.0-v_uv.y; gl_Position=vec4(a_pos,0,1);}";
+        var quadBuf = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);
+        gl.bufferData(
+          gl.ARRAY_BUFFER,
+          new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),
+          gl.STATIC_DRAW,
+        );
+        function compileShader(src, type) {
+          var s = gl.createShader(type);
+          gl.shaderSource(s, src);
+          gl.compileShader(s);
+          if (!gl.getShaderParameter(s, gl.COMPILE_STATUS))
+            console.error("Shader:", gl.getShaderInfoLog(s));
+          return s;
+        }
+        function mkProg(fragSrc) {
+          var p = gl.createProgram();
+          gl.attachShader(p, compileShader(vertSrc, gl.VERTEX_SHADER));
+          gl.attachShader(p, compileShader(fragSrc, gl.FRAGMENT_SHADER));
+          gl.linkProgram(p);
+          if (!gl.getProgramParameter(p, gl.LINK_STATUS))
+            console.error("Link:", gl.getProgramInfoLog(p));
+          return p;
+        }
+
+        var H =
+          "precision mediump float;" +
+          "varying vec2 v_uv;" +
+          "uniform sampler2D u_from, u_to;" +
+          "uniform float u_progress;" +
+          "uniform vec2 u_resolution;\n";
+
+        var NQ =
+          "float hash(vec2 p){return fract(sin(dot(p,vec2(127.1,311.7)))*43758.5453);}" +
+          "float vnoise(vec2 p){vec2 i=floor(p),f=fract(p);" +
+          "f=f*f*f*(f*(f*6.-15.)+10.);" +
+          "return mix(mix(hash(i),hash(i+vec2(1,0)),f.x)," +
+          "mix(hash(i+vec2(0,1)),hash(i+vec2(1,1)),f.x),f.y);}" +
+          "float fbm(vec2 p){float v=0.,a=.5;" +
+          "mat2 R=mat2(.8,.6,-.6,.8);" +
+          "for(int i=0;i<5;i++){v+=a*vnoise(p);p=R*p*2.02;a*=.5;}return v;}";
+
+        var progPass = mkProg(H + "void main(){gl_FragColor=texture2D(u_from,v_uv);}");
+        var progTrans = mkProg(
+          H +
+            NQ +
+            "void main(){float heat=u_progress*1.5;float yFade=smoothstep(1.,0.,v_uv.y);float shimmer=sin(v_uv.y*40.+fbm(v_uv*6.)*8.)*fbm(v_uv*3.+vec2(0.,u_progress*2.));float dispX=shimmer*heat*.03*yFade;vec2 fromUv=clamp(v_uv+vec2(dispX,0.),0.,1.);vec4 A=texture2D(u_from,fromUv);float invShimmer=sin(v_uv.y*40.+fbm(v_uv*6.+3.)*8.)*fbm(v_uv*3.+vec2(3.,u_progress*2.));float dispX2=invShimmer*(1.-u_progress)*.03*yFade;vec2 toUv=clamp(v_uv+vec2(dispX2,0.),0.,1.);vec4 B=texture2D(u_to,toUv);float haze=heat*yFade*.15*(1.-u_progress);gl_FragColor=vec4(mix(A.rgb,B.rgb,u_progress)+vec3(1.,.9,.7)*haze,1.);}",
+        );
+
+        function renderShader(prog, texFrom, texTo, progress) {
+          gl.useProgram(prog);
+          gl.activeTexture(gl.TEXTURE0);
+          gl.bindTexture(gl.TEXTURE_2D, texFrom);
+          gl.uniform1i(gl.getUniformLocation(prog, "u_from"), 0);
+          gl.activeTexture(gl.TEXTURE1);
+          gl.bindTexture(gl.TEXTURE_2D, texTo);
+          gl.uniform1i(gl.getUniformLocation(prog, "u_to"), 1);
+          gl.uniform1f(gl.getUniformLocation(prog, "u_progress"), progress);
+          gl.uniform2f(gl.getUniformLocation(prog, "u_resolution"), 1200, 1080);
+          var pos = gl.getAttribLocation(prog, "a_pos");
+          gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);
+          gl.enableVertexAttribArray(pos);
+          gl.vertexAttribPointer(pos, 2, gl.FLOAT, false, 0, 0);
+          gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+        }
+
+        function easeInOut(p) {
+          return p < 0.5 ? 2 * p * p : 1 - Math.pow(-2 * p + 2, 2) / 2;
+        }
+
+        captureScene("s1");
+        captureScene("s2");
+        glCanvas.style.display = "block";
+        renderShader(progPass, sceneTextures["s1"], sceneTextures["s1"], 0);
+        document.querySelectorAll(".scene").forEach(function (s) {
+          s.style.opacity = "0";
+        });
+
+        var tl = gsap.timeline({
+          paused: true,
+          onUpdate: function () {
+            var t = tl.time();
+            if (t >= 1.0 && t < 3.0) {
+              renderShader(
+                progTrans,
+                sceneTextures["s1"],
+                sceneTextures["s2"],
+                easeInOut((t - 1.0) / 2.0),
+              );
+            } else if (t >= 3.0) {
+              renderShader(progPass, sceneTextures["s2"], sceneTextures["s2"], 0);
+            } else {
+              renderShader(progPass, sceneTextures["s1"], sceneTextures["s1"], 0);
+            }
+          },
+        });
+        tl.to({ v: 0 }, { v: 1, duration: 4, ease: "none" }, 0);
+        window.__timelines["main"] = tl;
+      } // end if (gl)
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/thread-message-stack/thread-message-stack.html b/docs/public/catalog/blocks/thread-message-stack/thread-message-stack.html
new file mode 100644
index 0000000000..ce5277f003
--- /dev/null
+++ b/docs/public/catalog/blocks/thread-message-stack/thread-message-stack.html
@@ -0,0 +1,239 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Thread Message Stack</title>
+  </head>
+  <body>
+    <template id="tms-template">
+      <div
+        id="tms-root"
+        data-composition-id="thread-message-stack"
+        data-start="0"
+        data-duration="8"
+        data-width="1920"
+        data-height="1080"
+      >
+        <style>
+          #tms-root,
+          #tms-root * {
+            box-sizing: border-box;
+          }
+
+          #tms-root {
+            position: relative;
+            width: 1920px;
+            height: 1080px;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            background: #2e241a;
+            color: #ffffff;
+            font-family: -apple-system, "Helvetica Neue", "Segoe UI", sans-serif;
+            --tms-out-fill: #2d89e1;
+            --tms-out-ink: #ffffff;
+            --tms-in-fill: rgba(240, 240, 245, 0.82);
+            --tms-in-ink: #101216;
+          }
+
+          #tms-roll,
+          #tms-scrim,
+          #tms-view {
+            position: absolute;
+            inset: 0;
+          }
+
+          #tms-roll {
+            overflow: hidden;
+            background:
+              radial-gradient(circle at 18% 20%, #f0d3a6 0, transparent 31%),
+              radial-gradient(circle at 75% 18%, #e8a86a 0, transparent 34%),
+              radial-gradient(circle at 62% 74%, #2e6a8c 0, transparent 32%),
+              radial-gradient(circle at 18% 82%, #6b4a7a 0, transparent 35%), #2e241a;
+            transform: scale(1.12);
+            will-change: transform;
+          }
+
+          #tms-scrim {
+            background:
+              linear-gradient(
+                to bottom,
+                transparent 0,
+                rgba(0, 0, 0, 0.18) 42%,
+                rgba(0, 0, 0, 0.38) 100%
+              ),
+              linear-gradient(to right, rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0) 78%);
+          }
+
+          #tms-view {
+            overflow: hidden;
+            -webkit-mask-image: linear-gradient(to bottom, transparent 5%, #000 24%, #000 100%);
+            mask-image: linear-gradient(to bottom, transparent 5%, #000 24%, #000 100%);
+          }
+
+          #tms-column {
+            position: absolute;
+            inset: 0;
+          }
+
+          .tms-row {
+            position: absolute;
+            right: 6%;
+            bottom: 10%;
+            left: 6%;
+            display: flex;
+            flex-direction: column;
+            opacity: 0;
+            will-change: transform, opacity;
+          }
+
+          .tms-row[data-side="incoming"] {
+            align-items: flex-start;
+          }
+
+          .tms-row[data-side="outgoing"] {
+            align-items: flex-end;
+          }
+
+          .tms-sender {
+            min-height: 30px;
+            padding: 0 18px 8px;
+            color: #ffffff;
+            font-size: 24px;
+            font-weight: 700;
+            line-height: 1;
+            text-shadow: 0 3px 12px rgba(0, 0, 0, 0.72);
+          }
+
+          .tms-bubble {
+            max-width: min(72%, 920px);
+            padding: 24px 38px;
+            border-radius: 42px;
+            font-size: 42px;
+            font-weight: 500;
+            letter-spacing: -0.015em;
+            line-height: 1.3;
+            overflow-wrap: anywhere;
+            white-space: pre-wrap;
+          }
+
+          .tms-row[data-side="incoming"] .tms-bubble {
+            color: var(--tms-in-ink);
+            background:
+              linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(0, 0, 0, 0.05)),
+              var(--tms-in-fill);
+            box-shadow: 0 12px 34px rgba(0, 0, 0, 0.3);
+            transform-origin: 0 100%;
+          }
+
+          .tms-row[data-side="outgoing"] .tms-bubble {
+            color: var(--tms-out-ink);
+            background:
+              linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.17)),
+              var(--tms-out-fill);
+            box-shadow: 0 12px 38px rgba(0, 0, 0, 0.38);
+            transform-origin: 100% 100%;
+          }
+
+          #tms-driver {
+            position: absolute;
+            width: 1px;
+            height: 1px;
+            opacity: 0;
+            pointer-events: none;
+          }
+        </style>
+
+        <div id="tms-roll" data-layout-ignore></div>
+        <div id="tms-scrim" data-layout-ignore></div>
+        <div id="tms-view"><div id="tms-column"></div></div>
+        <div
+          id="tms-driver"
+          class="clip"
+          data-start="0"
+          data-duration="8"
+          data-track-index="0"
+        ></div>
+
+        <div hidden data-hf-primitive-data>
+          { "messages": [ { "side": "incoming", "text": "wait, that is actually wild", "sender":
+          "Northbeam support" }, { "side": "outgoing", "text": "can you fix it?" }, { "side":
+          "incoming", "text": "way ahead of you" }, { "side": "outgoing", "text": "you are unreal"
+          }, { "side": "incoming", "text": "he owes you dinner for this one" }, { "side":
+          "outgoing", "text": "already booked" } ], "stagger": 0.86, "hold": 1 }
+        </div>
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+            window.__timelines = window.__timelines || {};
+            var root = document.getElementById("tms-root");
+            var column = document.getElementById("tms-column");
+            var roll = document.getElementById("tms-roll");
+            var data = JSON.parse(
+              root
+                .querySelector("[data-hf-primitive-data]")
+                .textContent.replace(/\s*[\r\n]+\s*/g, " "),
+            );
+            var messages = data.messages;
+            var duration = Number(root.dataset.duration || 8);
+            var available = Math.max(0.2, duration - Math.max(0, Number(data.hold || 0)) - 0.35);
+            var requestedStagger = Math.max(0, Number(data.stagger == null ? 0.72 : data.stagger));
+            var stagger =
+              messages.length <= 1 ? 0 : Math.min(requestedStagger, available / messages.length);
+            var start = 0.25;
+            var rows = [];
+
+            messages.forEach(function (message, index) {
+              var row = document.createElement("div");
+              row.id = "tms-message-" + index;
+              row.className = "tms-row";
+              row.dataset.side = message.side;
+              if (message.sender !== undefined) {
+                var sender = document.createElement("div");
+                sender.className = "tms-sender";
+                sender.textContent = message.sender;
+                row.appendChild(sender);
+              }
+              var bubble = document.createElement("div");
+              bubble.className = "tms-bubble";
+              bubble.textContent = message.text;
+              row.appendChild(bubble);
+              column.appendChild(row);
+              rows.push(row);
+            });
+
+            var heights = rows.map(function (row) {
+              return Math.max(118, row.offsetHeight || 118) + 22;
+            });
+            var tl = gsap.timeline({ paused: true });
+            tl.fromTo(
+              roll,
+              { x: 0, y: 0, scale: 1.12 },
+              { x: -54, y: -22, scale: 1.18, duration: duration, ease: "sine.inOut" },
+              0,
+            );
+
+            rows.forEach(function (row, index) {
+              var at = start + index * stagger;
+              var direction = row.dataset.side === "incoming" ? -1 : 1;
+              tl.fromTo(
+                row,
+                { x: direction * 34, y: 0, scale: 0.94, opacity: 0 },
+                { x: 0, y: 0, scale: 1, opacity: 1, duration: 0.28, ease: "back.out(1.45)" },
+                at,
+              );
+              var offset = 0;
+              for (var previous = index - 1; previous >= 0; previous -= 1) {
+                offset += heights[previous + 1];
+                tl.to(rows[previous], { y: -offset, duration: 0.24, ease: "power3.out" }, at);
+              }
+            });
+
+            window.__timelines["thread-message-stack"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/tiktok-follow/assets/avatar.jpg b/docs/public/catalog/blocks/tiktok-follow/assets/avatar.jpg
new file mode 100644
index 0000000000..d5ca2e945b
Binary files /dev/null and b/docs/public/catalog/blocks/tiktok-follow/assets/avatar.jpg differ
diff --git a/docs/public/catalog/blocks/tiktok-follow/tiktok-follow.html b/docs/public/catalog/blocks/tiktok-follow/tiktok-follow.html
new file mode 100644
index 0000000000..631e7ef858
--- /dev/null
+++ b/docs/public/catalog/blocks/tiktok-follow/tiktok-follow.html
@@ -0,0 +1,263 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&display=block"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+      }
+      html,
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      body {
+        width: 1080px;
+        height: 1920px;
+        font-family: "DM Sans", sans-serif;
+      }
+
+      [data-composition-id="tiktok-follow"] .lower-third {
+        position: absolute;
+        bottom: 160px;
+        left: 50%;
+        transform: translateX(-50%);
+        display: flex;
+        align-items: center;
+        gap: 30px;
+        background: #1a1a1a;
+        border-radius: 75px;
+        padding: 25px 40px 25px 25px;
+        box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
+      }
+
+      [data-composition-id="tiktok-follow"] .avatar {
+        width: 120px;
+        height: 120px;
+        border-radius: 50%;
+        object-fit: cover;
+        flex-shrink: 0;
+        border: 3px solid #333;
+      }
+
+      [data-composition-id="tiktok-follow"] .profile-info {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        margin-right: 20px;
+      }
+
+      [data-composition-id="tiktok-follow"] .display-name {
+        font-size: 42px;
+        font-weight: 700;
+        color: #ffffff;
+        line-height: 1.3;
+        letter-spacing: -0.01em;
+      }
+
+      [data-composition-id="tiktok-follow"] .handle {
+        font-size: 28px;
+        font-weight: 400;
+        color: #a0a0a0;
+        line-height: 1.3;
+      }
+
+      [data-composition-id="tiktok-follow"] .follower-count {
+        font-size: 25px;
+        font-weight: 400;
+        color: #737373;
+        line-height: 1.3;
+      }
+
+      [data-composition-id="tiktok-follow"] .follow-btn {
+        position: relative;
+        width: 250px;
+        height: 80px;
+        border-radius: 40px;
+        background: #fe2c55;
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+      }
+
+      [data-composition-id="tiktok-follow"] .btn-text {
+        position: absolute;
+        font-family: "DM Sans", sans-serif;
+        font-size: 30px;
+        font-weight: 700;
+        color: #ffffff;
+        letter-spacing: 0.02em;
+        white-space: nowrap;
+      }
+
+      [data-composition-id="tiktok-follow"] .btn-text-follow {
+        opacity: 1;
+      }
+
+      [data-composition-id="tiktok-follow"] .btn-text-following {
+        opacity: 0;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+
+      [data-composition-id="tiktok-follow"] .check-icon {
+        display: inline-block;
+        width: 22px;
+        height: 22px;
+      }
+
+      [data-composition-id="tiktok-follow"] .check-icon svg {
+        width: 22px;
+        height: 22px;
+        display: block;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="tiktok-follow"
+      data-width="1080"
+      data-height="1920"
+      data-start="0"
+      data-duration="4.5"
+    >
+      <div
+        id="card"
+        class="clip lower-third"
+        data-start="0"
+        data-duration="4.5"
+        data-track-index="0"
+      >
+        <img class="avatar" src="assets/avatar.jpg" alt="HeyGen" crossorigin="anonymous" />
+        <div class="profile-info">
+          <div class="display-name">HeyGen</div>
+          <div class="handle">@heygen.com</div>
+          <div class="follower-count">1,999 followers</div>
+        </div>
+        <div id="follow-btn" class="follow-btn">
+          <span id="btn-follow" class="btn-text btn-text-follow">Follow</span>
+          <span id="btn-following" class="btn-text btn-text-following">
+            <span>Following</span>
+            <span class="check-icon"
+              ><svg
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="#fff"
+                stroke-width="2.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <polyline points="20 6 9 17 4 12"></polyline></svg
+            ></span>
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      var tl = gsap.timeline({ paused: true });
+
+      var card = document.getElementById("card");
+      var btn = document.getElementById("follow-btn");
+      var textFollow = document.getElementById("btn-follow");
+      var textFollowing = document.getElementById("btn-following");
+
+      // Start off-screen
+      gsap.set(card, { y: 300, opacity: 0 });
+
+      // Slide in from bottom
+      tl.to(
+        card,
+        {
+          y: 0,
+          opacity: 1,
+          duration: 0.5,
+          ease: "power3.out",
+        },
+        0.1,
+      );
+
+      // Hold, then button press-in
+      tl.to(
+        btn,
+        {
+          scale: 0.92,
+          duration: 0.15,
+          ease: "power2.out",
+        },
+        1.0,
+      );
+
+      // Button release with spring bounce
+      tl.to(
+        btn,
+        {
+          scale: 1,
+          duration: 0.4,
+          ease: "elastic.out(1, 0.4)",
+        },
+        1.15,
+      );
+
+      // Button background: rose-red → dark gray
+      tl.to(
+        btn,
+        {
+          backgroundColor: "#2f2f2f",
+          duration: 0.12,
+          ease: "none",
+        },
+        1.15,
+      );
+
+      // Fade out "Follow", fade in "Following"
+      tl.to(
+        textFollow,
+        {
+          opacity: 0,
+          duration: 0.08,
+          ease: "none",
+        },
+        1.15,
+      );
+
+      tl.to(
+        textFollowing,
+        {
+          opacity: 1,
+          duration: 0.08,
+          ease: "none",
+        },
+        1.18,
+      );
+
+      // Slide out to bottom
+      tl.to(
+        card,
+        {
+          y: 300,
+          opacity: 0,
+          duration: 0.25,
+          ease: "power3.in",
+        },
+        3.8,
+      );
+
+      window.__timelines["tiktok-follow"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/transitions-3d/transitions-3d.html b/docs/public/catalog/blocks/transitions-3d/transitions-3d.html
new file mode 100644
index 0000000000..308b776326
--- /dev/null
+++ b/docs/public/catalog/blocks/transitions-3d/transitions-3d.html
@@ -0,0 +1,297 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920" />
+    <title>3D Transitions</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #000;
+        overflow: hidden;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+      }
+
+      .scene {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        transform-style: preserve-3d;
+      }
+
+      .scene-inner {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        backface-visibility: hidden;
+      }
+
+      #scene1 {
+        z-index: 1;
+      }
+      #scene2 {
+        z-index: 2;
+        opacity: 0;
+      }
+
+      #s1 {
+        background: #1b263b;
+      }
+      #s2 {
+        background: #e07a5f;
+      }
+
+      .big-text {
+        font-size: 200px;
+        font-weight: 900;
+        line-height: 1;
+        user-select: none;
+        pointer-events: none;
+      }
+      #s1 .big-text {
+        color: rgba(255, 255, 255, 0.08);
+      }
+      #s2 .big-text {
+        color: rgba(255, 255, 255, 0.15);
+      }
+
+      .label {
+        font-size: 32px;
+        font-weight: 600;
+        letter-spacing: 6px;
+        text-transform: uppercase;
+        margin-top: 12px;
+      }
+      #s1 .label {
+        color: #778da9;
+      }
+      #s2 .label {
+        color: #fff;
+      }
+
+      #info-bar {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 1920px;
+        height: 80px;
+        background: rgba(0, 0, 0, 0.88);
+        z-index: 100;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0;
+      }
+      #info-bar span {
+        color: #fff;
+        font-size: 22px;
+        font-weight: 500;
+        letter-spacing: 2px;
+      }
+
+      #title-card {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        background: #0d1b2a;
+        z-index: 200;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        opacity: 0;
+      }
+      #title-card .category {
+        font-size: 64px;
+        font-weight: 800;
+        color: #fff;
+        letter-spacing: 8px;
+        text-transform: uppercase;
+      }
+      #title-card .subtitle {
+        font-size: 24px;
+        font-weight: 400;
+        color: #778da9;
+        margin-top: 16px;
+        letter-spacing: 4px;
+      }
+
+      #outro-card {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        background: #0d1b2a;
+        z-index: 200;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        opacity: 0;
+      }
+      #outro-card .category {
+        font-size: 48px;
+        font-weight: 700;
+        color: #778da9;
+        letter-spacing: 6px;
+        text-transform: uppercase;
+      }
+
+      /* 3D perspective wrapper */
+      #composition {
+        perspective: 1200px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="composition"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="11"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="title-card">
+        <div class="category">3D Transitions</div>
+        <div class="subtitle">1 Transition</div>
+      </div>
+
+      <div id="scene1" class="scene">
+        <div id="s1" class="scene-inner">
+          <div class="big-text">ONE</div>
+          <div class="label">Scene A</div>
+        </div>
+      </div>
+
+      <div id="scene2" class="scene">
+        <div id="s2" class="scene-inner">
+          <div class="big-text">TWO</div>
+          <div class="label">Scene B</div>
+        </div>
+      </div>
+
+      <div id="info-bar"><span id="info-text">Transition Name</span></div>
+
+      <div id="outro-card">
+        <div class="category">End of 3D Transitions</div>
+      </div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      (function () {
+        var tl = gsap.timeline({ paused: true });
+        var t = 0;
+
+        function resetScenes() {
+          tl.set(
+            "#scene1",
+            {
+              opacity: 1,
+              x: 0,
+              y: 0,
+              scale: 1,
+              scaleX: 1,
+              rotation: 0,
+              rotationY: 0,
+              filter: "none",
+              clipPath: "none",
+              zIndex: 1,
+              skewX: 0,
+            },
+            t,
+          );
+          tl.set(
+            "#scene2",
+            {
+              opacity: 0,
+              x: 0,
+              y: 0,
+              scale: 1,
+              scaleX: 1,
+              rotation: 0,
+              rotationY: 0,
+              filter: "none",
+              clipPath: "none",
+              zIndex: 2,
+              skewX: 0,
+            },
+            t,
+          );
+          tl.set(
+            "#s1",
+            {
+              opacity: 1,
+              x: 0,
+              y: 0,
+              scale: 1,
+              rotation: 0,
+              rotationY: 0,
+              filter: "none",
+              skewX: 0,
+              clipPath: "none",
+            },
+            t,
+          );
+          tl.set(
+            "#s2",
+            {
+              opacity: 1,
+              x: 0,
+              y: 0,
+              scale: 1,
+              rotation: 0,
+              rotationY: 0,
+              filter: "none",
+              skewX: 0,
+              clipPath: "none",
+            },
+            t,
+          );
+        }
+
+        /* ── Title card (3s) ── */
+        tl.set("#title-card", { opacity: 1 }, 0);
+        tl.to("#title-card", { opacity: 0, duration: 0.5 }, 2.5);
+        t = 3;
+
+        /* ── Demo 1: 3D Card Flip ── */
+        resetScenes();
+        tl.set("#info-text", { textContent: "3D Card Flip" }, t);
+        tl.to("#info-bar", { opacity: 1, duration: 0.3 }, t);
+        t += 1.5;
+        var T = t;
+        tl.set("#scene2", { opacity: 1 }, T);
+        tl.set("#s2", { rotationY: -180 }, T);
+        tl.to("#s1", { rotationY: 180, duration: 0.6, ease: "power2.inOut" }, T);
+        tl.to("#s2", { rotationY: 0, duration: 0.6, ease: "power2.inOut" }, T);
+        tl.set("#scene1", { opacity: 0 }, T + 0.65);
+        t = T + 1.5;
+        tl.to("#info-bar", { opacity: 0, duration: 0.3 }, t);
+        t += 0.5;
+
+        /* ── Outro (3s) ── */
+        tl.set("#outro-card", { opacity: 1 }, t);
+        tl.to("#outro-card", { opacity: 0, duration: 0.5 }, t + 2.5);
+
+        window.__timelines["main"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/transitions-blur/transitions-blur.html b/docs/public/catalog/blocks/transitions-blur/transitions-blur.html
new file mode 100644
index 0000000000..ed50af942f
--- /dev/null
+++ b/docs/public/catalog/blocks/transitions-blur/transitions-blur.html
@@ -0,0 +1,387 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+      }
+      .scene {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      .scene-inner {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+      }
+      .info-bar {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        z-index: 100;
+        background: rgba(0, 0, 0, 0.88);
+        padding: 24px 60px;
+        display: flex;
+        align-items: center;
+        gap: 40px;
+        opacity: 0;
+      }
+      .info-num {
+        font-size: 14px;
+        font-weight: 700;
+        color: #e07a5f;
+        letter-spacing: 0.1em;
+      }
+      .info-name {
+        font-size: 20px;
+        font-weight: 700;
+        color: #fff;
+      }
+      .info-desc {
+        font-size: 14px;
+        color: rgba(255, 255, 255, 0.5);
+      }
+      #title-card {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        background: #0d1b2a;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        z-index: 50;
+      }
+      #outro-card {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        background: #0d1b2a;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        z-index: 50;
+        opacity: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      data-composition-id="main"
+      data-start="0"
+      data-duration="20"
+      data-width="1920"
+      data-height="1080"
+    >
+      <!-- Title Card -->
+      <div id="title-card">
+        <div
+          id="title-label"
+          style="
+            font-size: 14px;
+            font-weight: 700;
+            color: #e07a5f;
+            letter-spacing: 0.2em;
+            text-transform: uppercase;
+            opacity: 0;
+          "
+        >
+          TRANSITION CATALOG
+        </div>
+        <div
+          id="title-main"
+          style="font-size: 72px; font-weight: 900; color: #fff; margin-top: 16px; opacity: 0"
+        >
+          Blur Transitions
+        </div>
+        <div
+          id="title-count"
+          style="
+            font-size: 24px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.4);
+            margin-top: 12px;
+            opacity: 0;
+          "
+        >
+          3 transitions
+        </div>
+      </div>
+
+      <!-- Scene A -->
+      <div id="scene1" class="scene" style="z-index: 1">
+        <div class="scene-inner" id="s1" style="background: #1b263b">
+          <div style="font-size: 200px; font-weight: 900; color: rgba(255, 255, 255, 0.08)">
+            ONE
+          </div>
+          <div
+            style="
+              font-size: 32px;
+              font-weight: 700;
+              color: #778da9;
+              letter-spacing: 0.15em;
+              margin-top: -20px;
+            "
+          >
+            SCENE A
+          </div>
+        </div>
+      </div>
+
+      <!-- Scene B -->
+      <div id="scene2" class="scene" style="z-index: 2; opacity: 0">
+        <div class="scene-inner" id="s2" style="background: #e07a5f">
+          <div style="font-size: 200px; font-weight: 900; color: rgba(255, 255, 255, 0.15)">
+            TWO
+          </div>
+          <div
+            style="
+              font-size: 32px;
+              font-weight: 700;
+              color: #fff;
+              letter-spacing: 0.15em;
+              margin-top: -20px;
+            "
+          >
+            SCENE B
+          </div>
+        </div>
+      </div>
+
+      <!-- Info Bars -->
+      <div id="info-1" class="info-bar">
+        <div class="info-num">01</div>
+        <div class="info-name">Blur Through</div>
+        <div class="info-desc">Use a blur through transition</div>
+      </div>
+      <div id="info-2" class="info-bar">
+        <div class="info-num">02</div>
+        <div class="info-name">Directional Blur</div>
+        <div class="info-desc">Use a directional blur transition with motion skew</div>
+      </div>
+      <div id="info-3" class="info-bar">
+        <div class="info-num">03</div>
+        <div class="info-name">Calm Blur Through</div>
+        <div class="info-desc">Use a slow calm blur through transition</div>
+      </div>
+
+      <!-- Outro Card -->
+      <div id="outro-card">
+        <div
+          id="outro-label"
+          style="
+            font-size: 14px;
+            font-weight: 700;
+            color: #e07a5f;
+            letter-spacing: 0.2em;
+            text-transform: uppercase;
+            opacity: 0;
+          "
+        >
+          BLUR TRANSITIONS
+        </div>
+        <div
+          id="outro-main"
+          style="font-size: 56px; font-weight: 900; color: #fff; margin-top: 16px; opacity: 0"
+        >
+          3 Transitions
+        </div>
+      </div>
+    </div>
+
+    <script>
+      (function () {
+        var tl = gsap.timeline({ paused: true });
+        var t = 0;
+
+        // === TITLE CARD (3s) ===
+        tl.to("#title-label", { opacity: 1, y: 0, duration: 0.4, ease: "power2.out" }, t + 0.3);
+        tl.fromTo(
+          "#title-main",
+          { opacity: 0, y: 20 },
+          { opacity: 1, y: 0, duration: 0.5, ease: "power2.out" },
+          t + 0.6,
+        );
+        tl.fromTo(
+          "#title-count",
+          { opacity: 0 },
+          { opacity: 1, duration: 0.4, ease: "power2.out" },
+          t + 1.0,
+        );
+        tl.to("#title-card", { opacity: 0, duration: 0.4, ease: "power2.inOut" }, t + 2.4);
+        t += 3;
+
+        function resetScenes() {
+          tl.set(
+            "#scene1",
+            {
+              opacity: 1,
+              x: 0,
+              y: 0,
+              scale: 1,
+              scaleX: 1,
+              rotation: 0,
+              filter: "none",
+              clipPath: "none",
+              zIndex: 1,
+              skewX: 0,
+            },
+            t,
+          );
+          tl.set(
+            "#scene2",
+            {
+              opacity: 0,
+              x: 0,
+              y: 0,
+              scale: 1,
+              scaleX: 1,
+              rotation: 0,
+              filter: "none",
+              clipPath: "none",
+              zIndex: 2,
+              skewX: 0,
+            },
+            t,
+          );
+          tl.set(
+            "#s1",
+            {
+              opacity: 1,
+              x: 0,
+              y: 0,
+              scale: 1,
+              rotation: 0,
+              filter: "none",
+              skewX: 0,
+              scaleX: 1,
+              transformOrigin: "50% 50%",
+            },
+            t,
+          );
+          tl.set(
+            "#s2",
+            {
+              opacity: 1,
+              x: 0,
+              y: 0,
+              scale: 1,
+              rotation: 0,
+              filter: "none",
+              skewX: 0,
+              scaleX: 1,
+              transformOrigin: "50% 50%",
+            },
+            t,
+          );
+        }
+
+        // === TRANSITION 1: Blur Through ===
+        resetScenes();
+        tl.to("#info-1", { opacity: 1, duration: 0.3 }, t + 0.2);
+        var T = t + 1.5;
+        tl.to(
+          "#s1",
+          { filter: "blur(15px)", scale: 1.05, opacity: 0, duration: 0.4, ease: "power2.in" },
+          T,
+        );
+        tl.set("#scene2", { opacity: 1 }, T);
+        tl.fromTo(
+          "#s2",
+          { filter: "blur(15px)", scale: 0.95, opacity: 0 },
+          { filter: "blur(0px)", scale: 1, opacity: 1, duration: 0.4, ease: "power2.out" },
+          T + 0.2,
+        );
+        t = T + 1.5 + 1.0;
+        tl.to("#info-1", { opacity: 0, duration: 0.2 }, t);
+        t += 0.5;
+
+        // === TRANSITION 2: Directional Blur ===
+        resetScenes();
+        tl.to("#info-2", { opacity: 1, duration: 0.3 }, t + 0.2);
+        T = t + 1.5;
+        tl.to(
+          "#s1",
+          {
+            filter: "blur(12px)",
+            skewX: -8,
+            x: -200,
+            opacity: 0,
+            duration: 0.4,
+            ease: "power3.in",
+          },
+          T,
+        );
+        tl.set("#scene2", { opacity: 1 }, T);
+        tl.fromTo(
+          "#s2",
+          { filter: "blur(12px)", skewX: 8, x: 200, opacity: 0 },
+          { filter: "blur(0px)", skewX: 0, x: 0, opacity: 1, duration: 0.4, ease: "power3.out" },
+          T + 0.15,
+        );
+        t = T + 1.5 + 1.0;
+        tl.to("#info-2", { opacity: 0, duration: 0.2 }, t);
+        t += 0.5;
+
+        // === TRANSITION 3: Calm Blur Through ===
+        resetScenes();
+        tl.to("#info-3", { opacity: 1, duration: 0.3 }, t + 0.2);
+        T = t + 1.5;
+        tl.to("#s1", { filter: "blur(30px)", scale: 1.08, duration: 0.5, ease: "power1.in" }, T);
+        tl.to("#s1", { opacity: 0, duration: 0.3, ease: "power1.in" }, T + 0.3);
+        tl.set("#scene2", { opacity: 1 }, T + 0.3);
+        tl.fromTo(
+          "#s2",
+          { filter: "blur(30px)", scale: 0.92, opacity: 0 },
+          { filter: "blur(30px)", scale: 0.92, opacity: 1, duration: 0.2, ease: "none" },
+          T + 0.5,
+        );
+        tl.to("#s2", { filter: "blur(0px)", scale: 1, duration: 0.7, ease: "power1.out" }, T + 0.7);
+        t = T + 1.5 + 1.0;
+        tl.to("#info-3", { opacity: 0, duration: 0.2 }, t);
+        t += 0.5;
+
+        // === OUTRO (3s) ===
+        tl.set("#scene1", { opacity: 0 }, t);
+        tl.set("#scene2", { opacity: 0 }, t);
+        tl.to("#outro-card", { opacity: 1, duration: 0.4, ease: "power2.inOut" }, t);
+        tl.to("#outro-label", { opacity: 1, duration: 0.4, ease: "power2.out" }, t + 0.3);
+        tl.fromTo(
+          "#outro-main",
+          { opacity: 0, y: 20 },
+          { opacity: 1, y: 0, duration: 0.5, ease: "power2.out" },
+          t + 0.6,
+        );
+        tl.to("#outro-card", { opacity: 0, duration: 0.4, ease: "power2.inOut" }, t + 2.4);
+
+        window.__timelines = window.__timelines || {};
+        window.__timelines["main"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/transitions-cover/transitions-cover.html b/docs/public/catalog/blocks/transitions-cover/transitions-cover.html
new file mode 100644
index 0000000000..1d03ae644b
--- /dev/null
+++ b/docs/public/catalog/blocks/transitions-cover/transitions-cover.html
@@ -0,0 +1,385 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cover Transitions Showcase</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #000;
+        overflow: hidden;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+      }
+
+      /* Title Card */
+      #title-card {
+        position: absolute;
+        inset: 0;
+        z-index: 10;
+        background: linear-gradient(135deg, #0d1b2a 0%, #1b263b 100%);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        opacity: 1;
+      }
+      #title-card h1 {
+        font-size: 72px;
+        font-weight: 800;
+        color: #fff;
+        letter-spacing: -1px;
+        opacity: 0;
+        transform: translateY(30px);
+      }
+      #title-card .subtitle {
+        font-size: 28px;
+        font-weight: 400;
+        color: rgba(255, 255, 255, 0.5);
+        margin-top: 12px;
+        opacity: 0;
+        transform: translateY(20px);
+      }
+
+      /* Scenes */
+      #scene1,
+      #scene2 {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+      }
+      #scene1 {
+        background: #1b263b;
+        z-index: 2;
+        opacity: 0;
+      }
+      #scene2 {
+        background: #e07a5f;
+        z-index: 1;
+        opacity: 0;
+      }
+
+      .scene-number {
+        font-size: 180px;
+        font-weight: 900;
+        line-height: 1;
+        opacity: 0.12;
+        letter-spacing: -6px;
+      }
+      #scene1 .scene-number {
+        color: #fff;
+      }
+      #scene2 .scene-number {
+        color: #000;
+      }
+
+      .scene-label {
+        font-size: 48px;
+        font-weight: 700;
+        margin-top: -20px;
+      }
+      #scene1 .scene-label {
+        color: #fff;
+      }
+      #scene2 .scene-label {
+        color: #fff;
+      }
+
+      /* Info bar */
+      .info-bar {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 80px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 48px;
+      }
+      #scene1 .info-bar {
+        background: rgba(0, 0, 0, 0.3);
+      }
+      #scene2 .info-bar {
+        background: rgba(0, 0, 0, 0.2);
+      }
+      .info-bar .label {
+        font-size: 18px;
+        font-weight: 600;
+        color: rgba(255, 255, 255, 0.7);
+        text-transform: uppercase;
+        letter-spacing: 2px;
+      }
+      .info-bar .desc {
+        font-size: 16px;
+        color: rgba(255, 255, 255, 0.5);
+        font-style: italic;
+      }
+
+      /* Outro */
+      #outro {
+        position: absolute;
+        inset: 0;
+        z-index: 10;
+        background: linear-gradient(135deg, #0d1b2a 0%, #1b263b 100%);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        opacity: 0;
+      }
+      #outro h2 {
+        font-size: 56px;
+        font-weight: 800;
+        color: #fff;
+        opacity: 0;
+        transform: translateY(20px);
+      }
+      #outro .tag {
+        font-size: 22px;
+        color: rgba(255, 255, 255, 0.4);
+        margin-top: 10px;
+        opacity: 0;
+        transform: translateY(15px);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="comp"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="21"
+      data-width="1920"
+      data-height="1080"
+      style="position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #000"
+    >
+      <!-- Title Card -->
+      <div id="title-card">
+        <h1 id="title-h1">Cover Transitions</h1>
+        <div class="subtitle" id="title-sub">3 transition styles</div>
+      </div>
+
+      <!-- Scene A -->
+      <div id="scene1">
+        <div class="scene-number">ONE</div>
+        <div class="scene-label">SCENE A</div>
+        <div class="info-bar">
+          <span class="label" id="info-label-a"></span>
+          <span class="desc" id="info-desc-a"></span>
+        </div>
+      </div>
+
+      <!-- Scene B -->
+      <div id="scene2">
+        <div class="scene-number">TWO</div>
+        <div class="scene-label">SCENE B</div>
+        <div class="info-bar">
+          <span class="label" id="info-label-b"></span>
+          <span class="desc" id="info-desc-b"></span>
+        </div>
+      </div>
+
+      <!-- Staggered Blocks Wipes -->
+      <div
+        id="wipe-a"
+        style="
+          position: absolute;
+          inset: 0;
+          background: #f72585;
+          z-index: 50;
+          transform: translateX(-1920px);
+        "
+      ></div>
+      <div
+        id="wipe-b"
+        style="
+          position: absolute;
+          inset: 0;
+          background: #7209b7;
+          z-index: 49;
+          transform: translateX(-1920px);
+        "
+      ></div>
+
+      <!-- Horizontal Blinds Container -->
+      <div
+        id="blinds-container"
+        style="position: absolute; inset: 0; z-index: 50; pointer-events: none"
+      ></div>
+
+      <!-- Vertical Blinds Container -->
+      <div
+        id="vblinds-container"
+        style="position: absolute; inset: 0; z-index: 50; pointer-events: none"
+      ></div>
+
+      <!-- Outro -->
+      <div id="outro">
+        <h2 id="outro-h2">Cover Transitions</h2>
+        <div class="tag" id="outro-tag">End of showcase</div>
+      </div>
+    </div>
+
+    <script>
+      (function () {
+        // Generate horizontal blind strips
+        var blindsHTML = "";
+        for (var i = 0; i < 8; i++) {
+          blindsHTML +=
+            '<div id="blind-' +
+            i +
+            '" style="position:absolute; left:0; width:1920px; height:135px; top:' +
+            i * 135 +
+            "px; background:" +
+            [
+              "#3A0CA3",
+              "#4361EE",
+              "#4CC9F0",
+              "#F72585",
+              "#3A0CA3",
+              "#4361EE",
+              "#4CC9F0",
+              "#F72585",
+            ][i] +
+            '; transform:translateX(-1920px);"></div>';
+        }
+        document.getElementById("blinds-container").innerHTML = blindsHTML;
+
+        // Generate vertical blind strips
+        var vblindsHTML = "";
+        for (var i = 0; i < 8; i++) {
+          vblindsHTML +=
+            '<div id="vblind-' +
+            i +
+            '" style="position:absolute; top:0; height:1080px; width:240px; left:' +
+            i * 240 +
+            "px; background:" +
+            [
+              "#3A0CA3",
+              "#4361EE",
+              "#4CC9F0",
+              "#F72585",
+              "#3A0CA3",
+              "#4361EE",
+              "#4CC9F0",
+              "#F72585",
+            ][i] +
+            '; transform:translateY(-1080px);"></div>';
+        }
+        document.getElementById("vblinds-container").innerHTML = vblindsHTML;
+
+        var tl = gsap.timeline({ paused: false });
+        window.__timelines = window.__timelines || {};
+        window.__timelines["main"] = tl;
+
+        // Transition demos config
+        var demos = [
+          { label: "STAGGERED BLOCKS", desc: "Use a staggered color blocks transition" },
+          { label: "HORIZONTAL BLINDS", desc: "Use a horizontal blinds transition" },
+          { label: "VERTICAL BLINDS", desc: "Use a vertical blinds transition" },
+        ];
+
+        // Reset scenes helper
+        function resetScenes(t, demoIndex) {
+          tl.set("#scene1", { opacity: 1 }, t);
+          tl.set("#scene2", { opacity: 0 }, t);
+          tl.set("#info-label-a", { textContent: demos[demoIndex].label }, t);
+          tl.set("#info-desc-a", { textContent: demos[demoIndex].desc }, t);
+          tl.set("#info-label-b", { textContent: demos[demoIndex].label }, t);
+          tl.set("#info-desc-b", { textContent: demos[demoIndex].desc }, t);
+          // Reset wipes
+          tl.set("#wipe-a", { x: -1920 }, t);
+          tl.set("#wipe-b", { x: -1920 }, t);
+          // Reset horizontal blinds
+          for (var i = 0; i < 8; i++) {
+            tl.set("#blind-" + i, { x: -1920 }, t);
+          }
+          // Reset vertical blinds
+          for (var i = 0; i < 8; i++) {
+            tl.set("#vblind-" + i, { y: -1080 }, t);
+          }
+        }
+
+        // ===== TITLE CARD (0s - 3s) =====
+        tl.to("#title-h1", { opacity: 1, y: 0, duration: 0.6, ease: "power2.out" }, 0.3);
+        tl.to("#title-sub", { opacity: 1, y: 0, duration: 0.5, ease: "power2.out" }, 0.6);
+        tl.to("#title-card", { opacity: 0, duration: 0.4, ease: "power1.inOut" }, 2.5);
+
+        // ===== DEMO 1: STAGGERED BLOCKS (3s - 8s) =====
+        var T1 = 3;
+        resetScenes(T1, 0);
+        // Show Scene A for a beat, then transition at midpoint
+        var T = T1 + 2;
+        tl.set("#wipe-a", { x: -1920 }, T - 0.01);
+        tl.set("#wipe-b", { x: -1920 }, T - 0.01);
+        tl.to("#wipe-a", { x: 0, duration: 0.25, ease: "power3.inOut" }, T);
+        tl.to("#wipe-b", { x: 0, duration: 0.25, ease: "power3.inOut" }, T + 0.06);
+        tl.set("#scene1", { opacity: 0 }, T + 0.2);
+        tl.set("#scene2", { opacity: 1 }, T + 0.2);
+        tl.to("#wipe-a", { x: 1920, duration: 0.25, ease: "power3.inOut" }, T + 0.28);
+        tl.to("#wipe-b", { x: 1920, duration: 0.25, ease: "power3.inOut" }, T + 0.34);
+
+        // ===== DEMO 2: HORIZONTAL BLINDS (8s - 13s) =====
+        var T2 = 8;
+        resetScenes(T2, 1);
+        T = T2 + 2;
+        var stagger = 0.03;
+        for (var i = 0; i < 8; i++) {
+          tl.fromTo(
+            "#blind-" + i,
+            { x: -1920 },
+            { x: 0, duration: 0.2, ease: "power3.inOut" },
+            T + i * stagger,
+          );
+        }
+        tl.set("#scene1", { opacity: 0 }, T + 0.5);
+        tl.set("#scene2", { opacity: 1 }, T + 0.5);
+        for (var i = 0; i < 8; i++) {
+          tl.to(
+            "#blind-" + i,
+            { x: 1920, duration: 0.2, ease: "power3.inOut" },
+            T + 0.55 + i * stagger,
+          );
+        }
+
+        // ===== DEMO 3: VERTICAL BLINDS (13s - 18s) =====
+        var T3 = 13;
+        resetScenes(T3, 2);
+        T = T3 + 2;
+        for (var i = 0; i < 8; i++) {
+          tl.fromTo(
+            "#vblind-" + i,
+            { y: -1080 },
+            { y: 0, duration: 0.2, ease: "power3.inOut" },
+            T + i * 0.03,
+          );
+        }
+        tl.set("#scene1", { opacity: 0 }, T + 0.5);
+        tl.set("#scene2", { opacity: 1 }, T + 0.5);
+        for (var i = 0; i < 8; i++) {
+          tl.to(
+            "#vblind-" + i,
+            { y: 1080, duration: 0.2, ease: "power3.inOut" },
+            T + 0.55 + i * 0.03,
+          );
+        }
+
+        // ===== OUTRO (18s - 21s) =====
+        tl.to("#scene1", { opacity: 0, duration: 0.3 }, 18);
+        tl.to("#scene2", { opacity: 0, duration: 0.3 }, 18);
+        tl.to("#outro", { opacity: 1, duration: 0.4, ease: "power1.inOut" }, 18.2);
+        tl.to("#outro-h2", { opacity: 1, y: 0, duration: 0.5, ease: "power2.out" }, 18.5);
+        tl.to("#outro-tag", { opacity: 1, y: 0, duration: 0.4, ease: "power2.out" }, 18.8);
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/transitions-destruction/transitions-destruction.html b/docs/public/catalog/blocks/transitions-destruction/transitions-destruction.html
new file mode 100644
index 0000000000..32807555c3
--- /dev/null
+++ b/docs/public/catalog/blocks/transitions-destruction/transitions-destruction.html
@@ -0,0 +1,414 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+      }
+      .scene {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      .scene-inner {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+      }
+      .info-bar {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        z-index: 100;
+        background: rgba(0, 0, 0, 0.88);
+        padding: 24px 60px;
+        display: flex;
+        align-items: center;
+        gap: 40px;
+        opacity: 0;
+      }
+      .info-num {
+        font-size: 14px;
+        font-weight: 700;
+        color: #e07a5f;
+        letter-spacing: 0.1em;
+      }
+      .info-name {
+        font-size: 20px;
+        font-weight: 700;
+        color: #fff;
+      }
+      .info-desc {
+        font-size: 14px;
+        color: rgba(255, 255, 255, 0.5);
+      }
+      #title-card {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        background: #0d1b2a;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        z-index: 50;
+      }
+      #outro-card {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        background: #0d1b2a;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        z-index: 50;
+        opacity: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      data-composition-id="main"
+      data-start="0"
+      data-duration="14"
+      data-width="1920"
+      data-height="1080"
+    >
+      <!-- Title Card -->
+      <div id="title-card">
+        <div
+          id="title-label"
+          style="
+            font-size: 14px;
+            font-weight: 700;
+            color: #e07a5f;
+            letter-spacing: 0.2em;
+            text-transform: uppercase;
+            opacity: 0;
+          "
+        >
+          TRANSITION CATALOG
+        </div>
+        <div
+          id="title-main"
+          style="font-size: 72px; font-weight: 900; color: #fff; margin-top: 16px; opacity: 0"
+        >
+          Destruction Transitions
+        </div>
+        <div
+          id="title-count"
+          style="
+            font-size: 24px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.4);
+            margin-top: 12px;
+            opacity: 0;
+          "
+        >
+          1 transition
+        </div>
+      </div>
+
+      <!-- Scene A -->
+      <div id="scene1" class="scene" style="z-index: 1">
+        <div class="scene-inner" id="s1" style="background: #1b263b">
+          <div style="font-size: 200px; font-weight: 900; color: rgba(255, 255, 255, 0.08)">
+            ONE
+          </div>
+          <div
+            style="
+              font-size: 32px;
+              font-weight: 700;
+              color: #778da9;
+              letter-spacing: 0.15em;
+              margin-top: -20px;
+            "
+          >
+            SCENE A
+          </div>
+        </div>
+      </div>
+
+      <!-- Scene B -->
+      <div id="scene2" class="scene" style="z-index: 2; opacity: 0">
+        <div class="scene-inner" id="s2" style="background: #e07a5f">
+          <div style="font-size: 200px; font-weight: 900; color: rgba(255, 255, 255, 0.15)">
+            TWO
+          </div>
+          <div
+            style="
+              font-size: 32px;
+              font-weight: 700;
+              color: #fff;
+              letter-spacing: 0.15em;
+              margin-top: -20px;
+            "
+          >
+            SCENE B
+          </div>
+        </div>
+      </div>
+
+      <!-- Burn Canvas -->
+      <canvas
+        id="burn-canvas"
+        width="1920"
+        height="1080"
+        style="position: absolute; inset: 0; z-index: 40; pointer-events: none"
+      ></canvas>
+
+      <!-- Info Bar -->
+      <div id="info-1" class="info-bar">
+        <div class="info-num">01</div>
+        <div class="info-name">Page Burn</div>
+        <div class="info-desc">Use a page burn destruction transition</div>
+      </div>
+
+      <!-- Outro Card -->
+      <div id="outro-card">
+        <div
+          id="outro-label"
+          style="
+            font-size: 14px;
+            font-weight: 700;
+            color: #e07a5f;
+            letter-spacing: 0.2em;
+            text-transform: uppercase;
+            opacity: 0;
+          "
+        >
+          DESTRUCTION TRANSITIONS
+        </div>
+        <div
+          id="outro-main"
+          style="font-size: 56px; font-weight: 900; color: #fff; margin-top: 16px; opacity: 0"
+        >
+          1 Transition
+        </div>
+      </div>
+    </div>
+
+    <script>
+      (function () {
+        var tl = gsap.timeline({ paused: true });
+        var t = 0;
+
+        // === TITLE CARD (3s) ===
+        tl.to("#title-label", { opacity: 1, y: 0, duration: 0.4, ease: "power2.out" }, t + 0.3);
+        tl.fromTo(
+          "#title-main",
+          { opacity: 0, y: 20 },
+          { opacity: 1, y: 0, duration: 0.5, ease: "power2.out" },
+          t + 0.6,
+        );
+        tl.fromTo(
+          "#title-count",
+          { opacity: 0 },
+          { opacity: 1, duration: 0.4, ease: "power2.out" },
+          t + 1.0,
+        );
+        tl.to("#title-card", { opacity: 0, duration: 0.4, ease: "power2.inOut" }, t + 2.4);
+        t += 3;
+
+        // === TRANSITION 1: Page Burn (8s total: 2s build, 3s burn, 3s settle) ===
+        tl.set(
+          "#scene1",
+          {
+            opacity: 1,
+            x: 0,
+            y: 0,
+            scale: 1,
+            rotation: 0,
+            filter: "none",
+            clipPath: "none",
+            zIndex: 1,
+          },
+          t,
+        );
+        tl.set(
+          "#scene2",
+          {
+            opacity: 0,
+            x: 0,
+            y: 0,
+            scale: 1,
+            rotation: 0,
+            filter: "none",
+            clipPath: "none",
+            zIndex: 2,
+          },
+          t,
+        );
+        tl.set("#s1", { opacity: 1, x: 0, y: 0, scale: 1, rotation: 0, filter: "none" }, t);
+        tl.set("#s2", { opacity: 1, x: 0, y: 0, scale: 1, rotation: 0, filter: "none" }, t);
+
+        // Show info bar
+        tl.to("#info-1", { opacity: 1, duration: 0.3 }, t + 0.2);
+
+        // Burn transition starts at t+2
+        var T = t + 2;
+
+        var burnCanvas = document.getElementById("burn-canvas");
+        var burnCtx = burnCanvas.getContext("2d");
+        var burnState = { progress: 0 };
+
+        function noise(x) {
+          var ix = Math.floor(x),
+            fx = x - ix;
+          var a = Math.sin(ix * 127.1 + 311.7) * 43758.5453;
+          var b = Math.sin((ix + 1) * 127.1 + 311.7) * 43758.5453;
+          var t2 = fx * fx * (3 - 2 * fx);
+          return a - Math.floor(a) + (b - Math.floor(b) - (a - Math.floor(a))) * t2;
+        }
+
+        function drawBurn(progress) {
+          burnCtx.clearRect(0, 0, 1920, 1080);
+          if (progress <= 0 || progress >= 1) return;
+
+          var maxR = 1400;
+          var cx = 960,
+            cy = 540;
+
+          // Draw fire edge glow
+          burnCtx.beginPath();
+          var steps = 60;
+          for (var i = 0; i <= steps; i++) {
+            var angle = (i / steps) * Math.PI * 2;
+            var baseR = progress * maxR;
+            var r =
+              baseR + noise(angle * 3 + progress * 4) * 80 + noise(angle * 8 + progress * 9) * 30;
+            var px = cx + Math.cos(angle) * r;
+            var py = cy + Math.sin(angle) * r;
+            if (i === 0) burnCtx.moveTo(px, py);
+            else burnCtx.lineTo(px, py);
+          }
+          burnCtx.closePath();
+
+          // Orange/red edge glow
+          var grad = burnCtx.createRadialGradient(
+            cx,
+            cy,
+            progress * maxR * 0.8,
+            cx,
+            cy,
+            progress * maxR * 1.1,
+          );
+          grad.addColorStop(0, "rgba(0,0,0,0)");
+          grad.addColorStop(0.7, "rgba(255,100,0,0.6)");
+          grad.addColorStop(0.9, "rgba(255,50,0,0.8)");
+          grad.addColorStop(1, "rgba(200,30,0,0.4)");
+          burnCtx.fillStyle = grad;
+          burnCtx.fill();
+
+          // Inner ember particles
+          var particleCount = Math.floor(progress * 40);
+          for (var p = 0; p < particleCount; p++) {
+            var pAngle = noise(p * 0.7 + progress * 2) * Math.PI * 2;
+            var pDist = progress * maxR * (0.85 + noise(p * 1.3 + progress * 5) * 0.15);
+            var ex = cx + Math.cos(pAngle) * pDist;
+            var ey = cy + Math.sin(pAngle) * pDist;
+            var pSize = 2 + noise(p * 2.1) * 4;
+            burnCtx.beginPath();
+            burnCtx.arc(ex, ey, pSize, 0, Math.PI * 2);
+            burnCtx.fillStyle =
+              "rgba(255," +
+              Math.floor(80 + noise(p * 3) * 120) +
+              ",0," +
+              (0.4 + noise(p * 1.7) * 0.4) +
+              ")";
+            burnCtx.fill();
+          }
+        }
+
+        // Animate burn progress over 3 seconds
+        tl.to(
+          burnState,
+          {
+            progress: 1,
+            duration: 3.0,
+            ease: "power1.in",
+            onUpdate: function () {
+              var p = burnState.progress;
+              drawBurn(p);
+              var scene1El = document.getElementById("scene1");
+              if (p <= 0) {
+                scene1El.style.clipPath = "none";
+              } else if (p < 1) {
+                // Shrink scene1 with circular clip from center
+                var radius = Math.max(0, 75 - p * 80);
+                scene1El.style.clipPath = "circle(" + radius + "% at 50% 50%)";
+              } else {
+                scene1El.style.clipPath = "circle(0% at 50% 50%)";
+              }
+            },
+          },
+          T,
+        );
+
+        // Scene 2 fades in from behind as burn progresses
+        tl.set("#scene2", { opacity: 1 }, T + 0.5);
+        tl.fromTo(
+          "#s2",
+          { opacity: 0 },
+          { opacity: 1, duration: 2.0, ease: "power1.out" },
+          T + 0.5,
+        );
+
+        // Clean up after burn completes
+        tl.set("#scene1", { opacity: 0, clipPath: "none" }, T + 3.0);
+        tl.call(
+          function () {
+            burnCtx.clearRect(0, 0, 1920, 1080);
+          },
+          null,
+          T + 3.0,
+        );
+
+        // Settle time (hold scene B)
+        t = T + 3.0 + 2.0;
+        tl.to("#info-1", { opacity: 0, duration: 0.2 }, t);
+        t += 0.5;
+
+        // === OUTRO (3s) ===
+        tl.set("#scene1", { opacity: 0 }, t);
+        tl.set("#scene2", { opacity: 0 }, t);
+        tl.to("#outro-card", { opacity: 1, duration: 0.4, ease: "power2.inOut" }, t);
+        tl.to("#outro-label", { opacity: 1, duration: 0.4, ease: "power2.out" }, t + 0.3);
+        tl.fromTo(
+          "#outro-main",
+          { opacity: 0, y: 20 },
+          { opacity: 1, y: 0, duration: 0.5, ease: "power2.out" },
+          t + 0.6,
+        );
+        tl.to("#outro-card", { opacity: 0, duration: 0.4, ease: "power2.inOut" }, t + 2.4);
+
+        window.__timelines = window.__timelines || {};
+        window.__timelines["main"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/transitions-dissolve/transitions-dissolve.html b/docs/public/catalog/blocks/transitions-dissolve/transitions-dissolve.html
new file mode 100644
index 0000000000..0c97ee786a
--- /dev/null
+++ b/docs/public/catalog/blocks/transitions-dissolve/transitions-dissolve.html
@@ -0,0 +1,391 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+      }
+      .scene {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      .scene-inner {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+      }
+      .info-bar {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        z-index: 100;
+        background: rgba(0, 0, 0, 0.88);
+        padding: 24px 60px;
+        display: flex;
+        align-items: center;
+        gap: 40px;
+        opacity: 0;
+      }
+      .info-num {
+        font-size: 14px;
+        font-weight: 700;
+        color: #e07a5f;
+        letter-spacing: 0.1em;
+      }
+      .info-name {
+        font-size: 20px;
+        font-weight: 700;
+        color: #fff;
+      }
+      .info-desc {
+        font-size: 14px;
+        color: rgba(255, 255, 255, 0.5);
+      }
+      #title-card {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        background: #0d1b2a;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        z-index: 50;
+      }
+      #outro-card {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        background: #0d1b2a;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        z-index: 50;
+        opacity: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      data-composition-id="main"
+      data-start="0"
+      data-duration="24"
+      data-width="1920"
+      data-height="1080"
+    >
+      <!-- Title Card -->
+      <div id="title-card">
+        <div
+          id="title-label"
+          style="
+            font-size: 14px;
+            font-weight: 700;
+            color: #e07a5f;
+            letter-spacing: 0.2em;
+            text-transform: uppercase;
+            opacity: 0;
+          "
+        >
+          TRANSITION CATALOG
+        </div>
+        <div
+          id="title-main"
+          style="font-size: 72px; font-weight: 900; color: #fff; margin-top: 16px; opacity: 0"
+        >
+          Dissolve Transitions
+        </div>
+        <div
+          id="title-count"
+          style="
+            font-size: 24px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.4);
+            margin-top: 12px;
+            opacity: 0;
+          "
+        >
+          4 transitions
+        </div>
+      </div>
+
+      <!-- Scene A -->
+      <div id="scene1" class="scene" style="z-index: 1">
+        <div class="scene-inner" id="s1" style="background: #1b263b">
+          <div style="font-size: 200px; font-weight: 900; color: rgba(255, 255, 255, 0.08)">
+            ONE
+          </div>
+          <div
+            style="
+              font-size: 32px;
+              font-weight: 700;
+              color: #778da9;
+              letter-spacing: 0.15em;
+              margin-top: -20px;
+            "
+          >
+            SCENE A
+          </div>
+        </div>
+      </div>
+
+      <!-- Scene B -->
+      <div id="scene2" class="scene" style="z-index: 2; opacity: 0">
+        <div class="scene-inner" id="s2" style="background: #e07a5f">
+          <div style="font-size: 200px; font-weight: 900; color: rgba(255, 255, 255, 0.15)">
+            TWO
+          </div>
+          <div
+            style="
+              font-size: 32px;
+              font-weight: 700;
+              color: #fff;
+              letter-spacing: 0.15em;
+              margin-top: -20px;
+            "
+          >
+            SCENE B
+          </div>
+        </div>
+      </div>
+
+      <!-- Info Bars -->
+      <div id="info-1" class="info-bar">
+        <div class="info-num">01</div>
+        <div class="info-name">Crossfade</div>
+        <div class="info-desc">Use a crossfade transition</div>
+      </div>
+      <div id="info-2" class="info-bar">
+        <div class="info-num">02</div>
+        <div class="info-name">Blur Crossfade</div>
+        <div class="info-desc">Use a blur crossfade transition</div>
+      </div>
+      <div id="info-3" class="info-bar">
+        <div class="info-num">03</div>
+        <div class="info-name">Focus Pull</div>
+        <div class="info-desc">Use a focus pull transition</div>
+      </div>
+      <div id="info-4" class="info-bar">
+        <div class="info-num">04</div>
+        <div class="info-name">Color Dip</div>
+        <div class="info-desc">Use a color dip to black transition</div>
+      </div>
+
+      <!-- Outro Card -->
+      <div id="outro-card">
+        <div
+          id="outro-label"
+          style="
+            font-size: 14px;
+            font-weight: 700;
+            color: #e07a5f;
+            letter-spacing: 0.2em;
+            text-transform: uppercase;
+            opacity: 0;
+          "
+        >
+          DISSOLVE TRANSITIONS
+        </div>
+        <div
+          id="outro-main"
+          style="font-size: 56px; font-weight: 900; color: #fff; margin-top: 16px; opacity: 0"
+        >
+          4 Transitions
+        </div>
+      </div>
+    </div>
+
+    <script>
+      (function () {
+        var tl = gsap.timeline({ paused: true });
+        var t = 0;
+
+        // === TITLE CARD (3s) ===
+        tl.to("#title-label", { opacity: 1, y: 0, duration: 0.4, ease: "power2.out" }, t + 0.3);
+        tl.fromTo(
+          "#title-main",
+          { opacity: 0, y: 20 },
+          { opacity: 1, y: 0, duration: 0.5, ease: "power2.out" },
+          t + 0.6,
+        );
+        tl.fromTo(
+          "#title-count",
+          { opacity: 0 },
+          { opacity: 1, duration: 0.4, ease: "power2.out" },
+          t + 1.0,
+        );
+        tl.to("#title-card", { opacity: 0, duration: 0.4, ease: "power2.inOut" }, t + 2.4);
+        t += 3;
+
+        function resetScenes() {
+          tl.set(
+            "#scene1",
+            {
+              opacity: 1,
+              x: 0,
+              y: 0,
+              scale: 1,
+              scaleX: 1,
+              rotation: 0,
+              filter: "none",
+              clipPath: "none",
+              zIndex: 1,
+              skewX: 0,
+            },
+            t,
+          );
+          tl.set(
+            "#scene2",
+            {
+              opacity: 0,
+              x: 0,
+              y: 0,
+              scale: 1,
+              scaleX: 1,
+              rotation: 0,
+              filter: "none",
+              clipPath: "none",
+              zIndex: 2,
+              skewX: 0,
+            },
+            t,
+          );
+          tl.set(
+            "#s1",
+            {
+              opacity: 1,
+              x: 0,
+              y: 0,
+              scale: 1,
+              rotation: 0,
+              filter: "none",
+              skewX: 0,
+              scaleX: 1,
+              transformOrigin: "50% 50%",
+            },
+            t,
+          );
+          tl.set(
+            "#s2",
+            {
+              opacity: 1,
+              x: 0,
+              y: 0,
+              scale: 1,
+              rotation: 0,
+              filter: "none",
+              skewX: 0,
+              scaleX: 1,
+              transformOrigin: "50% 50%",
+            },
+            t,
+          );
+        }
+
+        // === TRANSITION 1: Crossfade ===
+        resetScenes();
+        tl.to("#info-1", { opacity: 1, duration: 0.3 }, t + 0.2);
+        var T = t + 1.5;
+        tl.to("#s1", { opacity: 0, duration: 0.5, ease: "power2.inOut" }, T);
+        tl.set("#scene2", { opacity: 1 }, T);
+        tl.fromTo("#s2", { opacity: 0 }, { opacity: 1, duration: 0.5, ease: "power2.inOut" }, T);
+        t = T + 1.5 + 1.0;
+        tl.to("#info-1", { opacity: 0, duration: 0.2 }, t);
+        t += 0.5;
+
+        // === TRANSITION 2: Blur Crossfade ===
+        resetScenes();
+        tl.to("#info-2", { opacity: 1, duration: 0.3 }, t + 0.2);
+        T = t + 1.5;
+        tl.to(
+          "#s1",
+          { filter: "blur(10px)", scale: 1.03, opacity: 0, duration: 0.5, ease: "power2.inOut" },
+          T,
+        );
+        tl.set("#scene2", { opacity: 1 }, T);
+        tl.fromTo(
+          "#s2",
+          { filter: "blur(10px)", scale: 0.97, opacity: 0 },
+          { filter: "blur(0px)", scale: 1, opacity: 1, duration: 0.5, ease: "power2.inOut" },
+          T + 0.1,
+        );
+        t = T + 1.5 + 1.0;
+        tl.to("#info-2", { opacity: 0, duration: 0.2 }, t);
+        t += 0.5;
+
+        // === TRANSITION 3: Focus Pull ===
+        resetScenes();
+        tl.to("#info-3", { opacity: 1, duration: 0.3 }, t + 0.2);
+        T = t + 1.5;
+        tl.to("#s1", { filter: "blur(15px)", duration: 0.5, ease: "power1.in" }, T);
+        tl.to("#s1", { opacity: 0, duration: 0.3, ease: "power2.in" }, T + 0.25);
+        tl.set("#scene2", { opacity: 1 }, T);
+        tl.fromTo(
+          "#s2",
+          { opacity: 0 },
+          { opacity: 1, duration: 0.3, ease: "power2.out" },
+          T + 0.25,
+        );
+        t = T + 1.5 + 1.0;
+        tl.to("#info-3", { opacity: 0, duration: 0.2 }, t);
+        t += 0.5;
+
+        // === TRANSITION 4: Color Dip ===
+        resetScenes();
+        tl.to("#info-4", { opacity: 1, duration: 0.3 }, t + 0.2);
+        T = t + 1.5;
+        tl.to("#s1", { opacity: 0, duration: 0.2, ease: "power2.in" }, T);
+        tl.set("#scene2", { opacity: 1 }, T);
+        tl.fromTo(
+          "#s2",
+          { opacity: 0 },
+          { opacity: 1, duration: 0.2, ease: "power2.out" },
+          T + 0.25,
+        );
+        t = T + 1.5 + 1.0;
+        tl.to("#info-4", { opacity: 0, duration: 0.2 }, t);
+        t += 0.5;
+
+        // === OUTRO (3s) ===
+        tl.set("#scene1", { opacity: 0 }, t);
+        tl.set("#scene2", { opacity: 0 }, t);
+        tl.to("#outro-card", { opacity: 1, duration: 0.4, ease: "power2.inOut" }, t);
+        tl.to("#outro-label", { opacity: 1, duration: 0.4, ease: "power2.out" }, t + 0.3);
+        tl.fromTo(
+          "#outro-main",
+          { opacity: 0, y: 20 },
+          { opacity: 1, y: 0, duration: 0.5, ease: "power2.out" },
+          t + 0.6,
+        );
+        tl.to("#outro-card", { opacity: 0, duration: 0.4, ease: "power2.inOut" }, t + 2.4);
+
+        window.__timelines = window.__timelines || {};
+        window.__timelines["main"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/transitions-distortion/transitions-distortion.html b/docs/public/catalog/blocks/transitions-distortion/transitions-distortion.html
new file mode 100644
index 0000000000..e60f1319ac
--- /dev/null
+++ b/docs/public/catalog/blocks/transitions-distortion/transitions-distortion.html
@@ -0,0 +1,385 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Distortion Transitions</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #000;
+        overflow: hidden;
+      }
+
+      .scene {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .scene-inner {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+      }
+
+      #scene1 .scene-inner {
+        background: #1b263b;
+      }
+      #scene2 .scene-inner {
+        background: #e07a5f;
+      }
+
+      .scene-num {
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+        font-size: 200px;
+        font-weight: 900;
+        color: rgba(255, 255, 255, 0.08);
+        line-height: 1;
+      }
+      .scene-label {
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+        font-size: 48px;
+        font-weight: 600;
+        color: rgba(255, 255, 255, 0.25);
+        letter-spacing: 12px;
+        text-transform: uppercase;
+        margin-top: 10px;
+      }
+
+      .info-bar {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        z-index: 100;
+        background: rgba(0, 0, 0, 0.88);
+        padding: 28px 60px;
+        opacity: 0;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+      .info-bar .info-name {
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+        font-size: 32px;
+        font-weight: 700;
+        color: #fff;
+      }
+      .info-bar .info-cat {
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+        font-size: 18px;
+        font-weight: 500;
+        color: rgba(255, 255, 255, 0.4);
+        letter-spacing: 4px;
+        text-transform: uppercase;
+      }
+
+      /* Title / Outro */
+      #title-card,
+      #outro-card {
+        position: absolute;
+        inset: 0;
+        z-index: 200;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        background: #0d1117;
+        opacity: 0;
+      }
+      .card-title {
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+        font-size: 72px;
+        font-weight: 800;
+        color: #fff;
+      }
+      .card-sub {
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+        font-size: 28px;
+        font-weight: 400;
+        color: rgba(255, 255, 255, 0.4);
+        margin-top: 16px;
+        letter-spacing: 6px;
+        text-transform: uppercase;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="main"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="21"
+      data-width="1920"
+      data-height="1080"
+      style="position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #000"
+    >
+      <!-- Title Card -->
+      <div id="title-card">
+        <div class="card-title">Distortion Transitions</div>
+        <div class="card-sub">Glitch &bull; Chromatic &bull; Ripple</div>
+      </div>
+
+      <!-- Scene A -->
+      <div id="scene1" class="scene" style="opacity: 0">
+        <div id="s1" class="scene-inner">
+          <div class="scene-num">ONE</div>
+          <div class="scene-label">Scene A</div>
+        </div>
+      </div>
+
+      <!-- Scene B -->
+      <div id="scene2" class="scene" style="opacity: 0">
+        <div id="s2" class="scene-inner">
+          <div class="scene-num">TWO</div>
+          <div class="scene-label">Scene B</div>
+        </div>
+      </div>
+
+      <!-- RGB channel overlays for glitch/chromatic -->
+      <div
+        id="glitch-r"
+        style="
+          position: absolute;
+          inset: 0;
+          z-index: 30;
+          opacity: 0;
+          pointer-events: none;
+          mix-blend-mode: screen;
+        "
+      >
+        <div
+          class="scene-inner"
+          style="
+            background: rgba(229, 56, 59, 0.35);
+            width: 100%;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+          "
+        >
+          <div style="font-size: 200px; font-weight: 900; color: rgba(255, 255, 255, 0.08)">
+            ONE
+          </div>
+        </div>
+      </div>
+      <div
+        id="glitch-b"
+        style="
+          position: absolute;
+          inset: 0;
+          z-index: 30;
+          opacity: 0;
+          pointer-events: none;
+          mix-blend-mode: screen;
+        "
+      >
+        <div
+          class="scene-inner"
+          style="
+            background: rgba(72, 191, 227, 0.35);
+            width: 100%;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+          "
+        >
+          <div style="font-size: 200px; font-weight: 900; color: rgba(255, 255, 255, 0.08)">
+            ONE
+          </div>
+        </div>
+      </div>
+
+      <!-- Info Bars -->
+      <div id="info1" class="info-bar">
+        <div class="info-name">Glitch</div>
+        <div class="info-cat">Distortion</div>
+      </div>
+      <div id="info2" class="info-bar">
+        <div class="info-name">Chromatic Aberration</div>
+        <div class="info-cat">Distortion</div>
+      </div>
+      <div id="info3" class="info-bar">
+        <div class="info-name">Ripple</div>
+        <div class="info-cat">Distortion</div>
+      </div>
+
+      <!-- Outro Card -->
+      <div id="outro-card">
+        <div class="card-title">Distortion Transitions</div>
+        <div class="card-sub">End</div>
+      </div>
+    </div>
+
+    <script>
+      (function () {
+        var tl = gsap.timeline({ defaults: { ease: "none" } });
+        window.__timelines = window.__timelines || {};
+        window.__timelines["main"] = tl;
+
+        function resetScenes() {
+          tl.set("#scene1", { opacity: 1 });
+          tl.set("#scene2", { opacity: 0 });
+          tl.set("#s1", { x: 0, y: 0, scale: 1, filter: "blur(0px)", opacity: 1 });
+          tl.set("#s2", { x: 0, y: 0, scale: 1, filter: "blur(0px)", opacity: 1 });
+          tl.set("#glitch-r", { opacity: 0, x: 0, y: 0 });
+          tl.set("#glitch-b", { opacity: 0, x: 0, y: 0 });
+        }
+
+        // ===== TITLE CARD (0–3s) =====
+        tl.set("#title-card", { opacity: 1 }, 0);
+        tl.fromTo(
+          ".card-title",
+          { y: 30, opacity: 0 },
+          { y: 0, opacity: 1, duration: 0.6, ease: "power2.out" },
+          0.4,
+        );
+        tl.fromTo(
+          ".card-sub",
+          { y: 20, opacity: 0 },
+          { y: 0, opacity: 1, duration: 0.5, ease: "power2.out" },
+          0.8,
+        );
+        tl.to("#title-card", { opacity: 0, duration: 0.4, ease: "power2.in" }, 2.6);
+
+        // ===== DEMO 1: Glitch (3–8s) =====
+        var T;
+
+        // Reset & show scene A
+        tl.call(function () {}, [], 3);
+        resetScenes();
+
+        // Show info bar
+        tl.to("#info1", { opacity: 1, duration: 0.3, ease: "power2.out" }, 3);
+
+        // Hold 1.5s, transition at T=4.5
+        T = 4.5;
+
+        // Glitch transition
+        tl.set("#glitch-r", { opacity: 1, x: 40, y: -8 }, T);
+        tl.set("#glitch-b", { opacity: 1, x: -30, y: 12 }, T);
+        tl.set("#s1", { x: -15 }, T);
+
+        tl.set("#glitch-r", { x: -30, y: 15 }, T + 0.03);
+        tl.set("#glitch-b", { x: 50, y: -10 }, T + 0.03);
+        tl.set("#s1", { x: 20 }, T + 0.03);
+
+        tl.set("#glitch-r", { x: 60, y: -20 }, T + 0.06);
+        tl.set("#glitch-b", { x: -40, y: 8 }, T + 0.06);
+        tl.set("#s1", { x: -25 }, T + 0.06);
+
+        tl.set("#glitch-r", { x: -20, y: 5 }, T + 0.09);
+        tl.set("#glitch-b", { x: 35, y: -15 }, T + 0.09);
+
+        // Swap at T + 0.12
+        tl.set("#scene1", { opacity: 0 }, T + 0.12);
+        tl.set("#scene2", { opacity: 1 }, T + 0.12);
+
+        // Clear
+        tl.set("#glitch-r", { opacity: 0, x: 0, y: 0 }, T + 0.15);
+        tl.set("#glitch-b", { opacity: 0, x: 0, y: 0 }, T + 0.15);
+        tl.set("#s1", { x: 0 }, T + 0.15);
+
+        // Hold 1.0s, hide info, gap 0.5s
+        tl.to("#info1", { opacity: 0, duration: 0.3, ease: "power2.in" }, 7.0);
+
+        // ===== DEMO 2: Chromatic Aberration (8–13s) =====
+        tl.call(function () {}, [], 8);
+        resetScenes();
+
+        tl.to("#info2", { opacity: 1, duration: 0.3, ease: "power2.out" }, 8);
+
+        T = 9.5;
+
+        // Chromatic aberration transition
+        tl.set("#glitch-r", { opacity: 0.6, x: 0 }, T);
+        tl.set("#glitch-b", { opacity: 0.6, x: 0 }, T);
+        tl.to("#glitch-r", { x: -80, opacity: 0.8, duration: 0.3, ease: "power2.in" }, T);
+        tl.to("#glitch-b", { x: 80, opacity: 0.8, duration: 0.3, ease: "power2.in" }, T);
+
+        // Swap
+        tl.set("#scene1", { opacity: 0 }, T + 0.3);
+        tl.set("#scene2", { opacity: 1 }, T + 0.3);
+
+        // Converge back
+        tl.to("#glitch-r", { x: 0, opacity: 0, duration: 0.3, ease: "power2.out" }, T + 0.3);
+        tl.to("#glitch-b", { x: 0, opacity: 0, duration: 0.3, ease: "power2.out" }, T + 0.3);
+
+        tl.to("#info2", { opacity: 0, duration: 0.3, ease: "power2.in" }, 12.0);
+
+        // ===== DEMO 3: Ripple (13–18s) =====
+        tl.call(function () {}, [], 13);
+        resetScenes();
+
+        tl.to("#info3", { opacity: 1, duration: 0.3, ease: "power2.out" }, 13);
+
+        T = 14.5;
+
+        // Ripple distortion transition
+        tl.to("#s1", { x: 30, scale: 1.02, duration: 0.04, ease: "none" }, T);
+        tl.to(
+          "#s1",
+          { x: -25, scale: 0.98, filter: "blur(4px)", duration: 0.04, ease: "none" },
+          T + 0.04,
+        );
+        tl.to(
+          "#s1",
+          { x: 20, scale: 1.01, filter: "blur(6px)", duration: 0.04, ease: "none" },
+          T + 0.08,
+        );
+        tl.to(
+          "#s1",
+          { x: -15, scale: 0.99, filter: "blur(8px)", duration: 0.04, ease: "none" },
+          T + 0.12,
+        );
+        tl.to(
+          "#s1",
+          { x: 10, opacity: 0, filter: "blur(10px)", duration: 0.04, ease: "none" },
+          T + 0.16,
+        );
+        tl.set("#scene2", { opacity: 1 }, T + 0.16);
+        tl.fromTo(
+          "#s2",
+          { x: -15, scale: 1.02, filter: "blur(8px)" },
+          { x: 0, scale: 1, filter: "blur(0px)", duration: 0.2, ease: "power2.out" },
+          T + 0.2,
+        );
+
+        tl.to("#info3", { opacity: 0, duration: 0.3, ease: "power2.in" }, 17.0);
+
+        // ===== OUTRO (18–21s) =====
+        tl.set("#scene1", { opacity: 0 }, 18);
+        tl.set("#scene2", { opacity: 0 }, 18);
+        tl.set("#outro-card", { opacity: 1 }, 18);
+        tl.fromTo(
+          "#outro-card .card-title",
+          { y: 30, opacity: 0 },
+          { y: 0, opacity: 1, duration: 0.6, ease: "power2.out" },
+          18.3,
+        );
+        tl.fromTo(
+          "#outro-card .card-sub",
+          { y: 20, opacity: 0 },
+          { y: 0, opacity: 1, duration: 0.5, ease: "power2.out" },
+          18.7,
+        );
+        tl.to("#outro-card", { opacity: 0, duration: 0.4, ease: "power2.in" }, 20.5);
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/transitions-grid/transitions-grid.html b/docs/public/catalog/blocks/transitions-grid/transitions-grid.html
new file mode 100644
index 0000000000..c6e9503120
--- /dev/null
+++ b/docs/public/catalog/blocks/transitions-grid/transitions-grid.html
@@ -0,0 +1,305 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Grid Transitions</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #000;
+        overflow: hidden;
+      }
+
+      .scene {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .scene-inner {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+      }
+
+      #scene1 .scene-inner {
+        background: #1b263b;
+      }
+      #scene2 .scene-inner {
+        background: #e07a5f;
+      }
+
+      .scene-num {
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+        font-size: 200px;
+        font-weight: 900;
+        color: rgba(255, 255, 255, 0.08);
+        line-height: 1;
+      }
+      .scene-label {
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+        font-size: 48px;
+        font-weight: 600;
+        color: rgba(255, 255, 255, 0.25);
+        letter-spacing: 12px;
+        text-transform: uppercase;
+        margin-top: 10px;
+      }
+
+      .info-bar {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        z-index: 100;
+        background: rgba(0, 0, 0, 0.88);
+        padding: 28px 60px;
+        opacity: 0;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+      .info-bar .info-name {
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+        font-size: 32px;
+        font-weight: 700;
+        color: #fff;
+      }
+      .info-bar .info-cat {
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+        font-size: 18px;
+        font-weight: 500;
+        color: rgba(255, 255, 255, 0.4);
+        letter-spacing: 4px;
+        text-transform: uppercase;
+      }
+
+      /* Title / Outro */
+      #title-card,
+      #outro-card {
+        position: absolute;
+        inset: 0;
+        z-index: 200;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        background: #0d1117;
+        opacity: 0;
+      }
+      .card-title {
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+        font-size: 72px;
+        font-weight: 800;
+        color: #fff;
+      }
+      .card-sub {
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+        font-size: 28px;
+        font-weight: 400;
+        color: rgba(255, 255, 255, 0.4);
+        margin-top: 16px;
+        letter-spacing: 6px;
+        text-transform: uppercase;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="main"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="11"
+      data-width="1920"
+      data-height="1080"
+      style="position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #000"
+    >
+      <!-- Title Card -->
+      <div id="title-card">
+        <div class="card-title">Grid Transitions</div>
+        <div class="card-sub">Grid Dissolve</div>
+      </div>
+
+      <!-- Scene A -->
+      <div id="scene1" class="scene" style="opacity: 0">
+        <div id="s1" class="scene-inner">
+          <div class="scene-num">ONE</div>
+          <div class="scene-label">Scene A</div>
+        </div>
+      </div>
+
+      <!-- Scene B -->
+      <div id="scene2" class="scene" style="opacity: 0">
+        <div id="s2" class="scene-inner">
+          <div class="scene-num">TWO</div>
+          <div class="scene-label">Scene B</div>
+        </div>
+      </div>
+
+      <!-- Grid container -->
+      <div
+        id="grid-container"
+        style="
+          position: absolute;
+          inset: 0;
+          z-index: 50;
+          pointer-events: none;
+          display: grid;
+          grid-template-columns: repeat(4, 480px);
+          grid-template-rows: repeat(3, 360px);
+        "
+      ></div>
+
+      <!-- Info Bar -->
+      <div id="info1" class="info-bar">
+        <div class="info-name">Grid Dissolve</div>
+        <div class="info-cat">Grid</div>
+      </div>
+
+      <!-- Outro Card -->
+      <div id="outro-card">
+        <div class="card-title">Grid Transitions</div>
+        <div class="card-sub">End</div>
+      </div>
+    </div>
+
+    <script>
+      (function () {
+        var tl = gsap.timeline({ defaults: { ease: "none" } });
+        window.__timelines = window.__timelines || {};
+        window.__timelines["main"] = tl;
+
+        // Generate grid cells
+        var gridColors = [
+          "#F72585",
+          "#7209B7",
+          "#3A0CA3",
+          "#4361EE",
+          "#4CC9F0",
+          "#F72585",
+          "#7209B7",
+          "#3A0CA3",
+          "#4361EE",
+          "#4CC9F0",
+          "#F72585",
+          "#7209B7",
+        ];
+        var gridHTML = "";
+        for (var g = 0; g < 12; g++) {
+          gridHTML +=
+            '<div id="cell-' +
+            g +
+            '" style="background:' +
+            gridColors[g % gridColors.length] +
+            '; opacity:0;"></div>';
+        }
+        document.getElementById("grid-container").innerHTML = gridHTML;
+
+        function resetScenes() {
+          tl.set("#scene1", { opacity: 1 });
+          tl.set("#scene2", { opacity: 0 });
+          tl.set("#s1", { x: 0, y: 0, scale: 1, filter: "blur(0px)", opacity: 1 });
+          tl.set("#s2", { x: 0, y: 0, scale: 1, filter: "blur(0px)", opacity: 1 });
+          for (var g = 0; g < 12; g++) {
+            tl.set("#cell-" + g, { opacity: 0 });
+          }
+        }
+
+        // ===== TITLE CARD (0–3s) =====
+        tl.set("#title-card", { opacity: 1 }, 0);
+        tl.fromTo(
+          ".card-title",
+          { y: 30, opacity: 0 },
+          { y: 0, opacity: 1, duration: 0.6, ease: "power2.out" },
+          0.4,
+        );
+        tl.fromTo(
+          ".card-sub",
+          { y: 20, opacity: 0 },
+          { y: 0, opacity: 1, duration: 0.5, ease: "power2.out" },
+          0.8,
+        );
+        tl.to("#title-card", { opacity: 0, duration: 0.4, ease: "power2.in" }, 2.6);
+
+        // ===== DEMO 1: Grid Dissolve (3–8s) =====
+        var T;
+
+        tl.call(function () {}, [], 3);
+        resetScenes();
+
+        // Show info bar
+        tl.to("#info1", { opacity: 1, duration: 0.3, ease: "power2.out" }, 3);
+
+        // Hold 1.5s, transition at T=4.5
+        T = 4.5;
+
+        // Cell positions (col, row) and distance from center (1.5, 1)
+        var cells = [];
+        for (var g = 0; g < 12; g++) {
+          var col = g % 4;
+          var row = Math.floor(g / 4);
+          var dist = Math.sqrt(Math.pow(col - 1.5, 2) + Math.pow(row - 1, 2));
+          cells.push({ id: g, dist: dist });
+        }
+        cells.sort(function (a, b) {
+          return a.dist - b.dist;
+        });
+
+        // Ripple in from center
+        var stag = 0.04;
+        for (var c = 0; c < cells.length; c++) {
+          tl.to(
+            "#cell-" + cells[c].id,
+            { opacity: 1, duration: 0.15, ease: "power2.out" },
+            T + c * stag,
+          );
+        }
+
+        // Swap scenes at midpoint
+        tl.set("#scene1", { opacity: 0 }, T + 0.35);
+        tl.set("#scene2", { opacity: 1 }, T + 0.35);
+
+        // Ripple out
+        for (var c = 0; c < cells.length; c++) {
+          tl.to(
+            "#cell-" + cells[c].id,
+            { opacity: 0, duration: 0.15, ease: "power2.in" },
+            T + 0.5 + c * stag,
+          );
+        }
+
+        // Hold 1.0s, hide info, gap 0.5s
+        tl.to("#info1", { opacity: 0, duration: 0.3, ease: "power2.in" }, 7.0);
+
+        // ===== OUTRO (8–11s) =====
+        tl.set("#scene1", { opacity: 0 }, 8);
+        tl.set("#scene2", { opacity: 0 }, 8);
+        tl.set("#outro-card", { opacity: 1 }, 8);
+        tl.fromTo(
+          "#outro-card .card-title",
+          { y: 30, opacity: 0 },
+          { y: 0, opacity: 1, duration: 0.6, ease: "power2.out" },
+          8.3,
+        );
+        tl.fromTo(
+          "#outro-card .card-sub",
+          { y: 20, opacity: 0 },
+          { y: 0, opacity: 1, duration: 0.5, ease: "power2.out" },
+          8.7,
+        );
+        tl.to("#outro-card", { opacity: 0, duration: 0.4, ease: "power2.in" }, 10.5);
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/transitions-light/transitions-light.html b/docs/public/catalog/blocks/transitions-light/transitions-light.html
new file mode 100644
index 0000000000..f5f32b03f5
--- /dev/null
+++ b/docs/public/catalog/blocks/transitions-light/transitions-light.html
@@ -0,0 +1,391 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Light Transitions Showcase</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #000;
+        overflow: hidden;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+      }
+
+      /* Title Card */
+      #title-card {
+        position: absolute;
+        inset: 0;
+        z-index: 10;
+        background: linear-gradient(135deg, #0d1b2a 0%, #1b263b 100%);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        opacity: 1;
+      }
+      #title-card h1 {
+        font-size: 72px;
+        font-weight: 800;
+        color: #fff;
+        letter-spacing: -1px;
+        opacity: 0;
+        transform: translateY(30px);
+      }
+      #title-card .subtitle {
+        font-size: 28px;
+        font-weight: 400;
+        color: rgba(255, 255, 255, 0.5);
+        margin-top: 12px;
+        opacity: 0;
+        transform: translateY(20px);
+      }
+
+      /* Scenes */
+      #scene1,
+      #scene2 {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+      }
+      #scene1 {
+        background: #1b263b;
+        z-index: 2;
+        opacity: 0;
+      }
+      #scene2 {
+        background: #e07a5f;
+        z-index: 1;
+        opacity: 0;
+      }
+
+      .scene-number {
+        font-size: 180px;
+        font-weight: 900;
+        line-height: 1;
+        opacity: 0.12;
+        letter-spacing: -6px;
+      }
+      #scene1 .scene-number {
+        color: #fff;
+      }
+      #scene2 .scene-number {
+        color: #000;
+      }
+
+      .scene-label {
+        font-size: 48px;
+        font-weight: 700;
+        margin-top: -20px;
+      }
+      #scene1 .scene-label {
+        color: #fff;
+      }
+      #scene2 .scene-label {
+        color: #fff;
+      }
+
+      /* Info bar */
+      .info-bar {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 80px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 48px;
+      }
+      #scene1 .info-bar {
+        background: rgba(0, 0, 0, 0.3);
+      }
+      #scene2 .info-bar {
+        background: rgba(0, 0, 0, 0.2);
+      }
+      .info-bar .label {
+        font-size: 18px;
+        font-weight: 600;
+        color: rgba(255, 255, 255, 0.7);
+        text-transform: uppercase;
+        letter-spacing: 2px;
+      }
+      .info-bar .desc {
+        font-size: 16px;
+        color: rgba(255, 255, 255, 0.5);
+        font-style: italic;
+      }
+
+      /* Outro */
+      #outro {
+        position: absolute;
+        inset: 0;
+        z-index: 10;
+        background: linear-gradient(135deg, #0d1b2a 0%, #1b263b 100%);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        opacity: 0;
+      }
+      #outro h2 {
+        font-size: 56px;
+        font-weight: 800;
+        color: #fff;
+        opacity: 0;
+        transform: translateY(20px);
+      }
+      #outro .tag {
+        font-size: 22px;
+        color: rgba(255, 255, 255, 0.4);
+        margin-top: 10px;
+        opacity: 0;
+        transform: translateY(15px);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="comp"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="21"
+      data-width="1920"
+      data-height="1080"
+      style="position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #000"
+    >
+      <!-- Title Card -->
+      <div id="title-card">
+        <h1 id="title-h1">Light Transitions</h1>
+        <div class="subtitle" id="title-sub">3 transition styles</div>
+      </div>
+
+      <!-- Scene A -->
+      <div id="scene1">
+        <div class="scene-number">ONE</div>
+        <div class="scene-label">SCENE A</div>
+        <div class="info-bar">
+          <span class="label" id="info-label-a"></span>
+          <span class="desc" id="info-desc-a"></span>
+        </div>
+      </div>
+
+      <!-- Scene B -->
+      <div id="scene2">
+        <div class="scene-number">TWO</div>
+        <div class="scene-label">SCENE B</div>
+        <div class="info-bar">
+          <span class="label" id="info-label-b"></span>
+          <span class="desc" id="info-desc-b"></span>
+        </div>
+      </div>
+
+      <!-- Light Leak Overlays -->
+      <div
+        id="leak-warm"
+        style="
+          position: absolute;
+          inset: 0;
+          background: linear-gradient(135deg, rgba(255, 165, 0, 0.6), transparent 60%);
+          z-index: 50;
+          opacity: 0;
+          pointer-events: none;
+        "
+      ></div>
+      <div
+        id="leak-1"
+        style="
+          position: absolute;
+          top: -200px;
+          left: -400px;
+          width: 2400px;
+          height: 1500px;
+          background: radial-gradient(ellipse at 30% 40%, rgba(255, 140, 0, 0.5), transparent 50%);
+          z-index: 51;
+          opacity: 0;
+          pointer-events: none;
+        "
+      ></div>
+      <div
+        id="leak-2"
+        style="
+          position: absolute;
+          top: -100px;
+          left: -200px;
+          width: 2400px;
+          height: 1400px;
+          background: radial-gradient(ellipse at 60% 50%, rgba(255, 200, 0, 0.4), transparent 50%);
+          z-index: 51;
+          opacity: 0;
+          pointer-events: none;
+        "
+      ></div>
+
+      <!-- Flash Overlay -->
+      <div
+        id="flash-overlay"
+        style="
+          position: absolute;
+          inset: 0;
+          background: #fff;
+          z-index: 50;
+          opacity: 0;
+          pointer-events: none;
+        "
+      ></div>
+
+      <!-- Film Burn Overlays -->
+      <div
+        id="burn-a"
+        style="
+          position: absolute;
+          top: -300px;
+          right: -800px;
+          width: 2400px;
+          height: 1800px;
+          background: radial-gradient(ellipse at 70% 40%, rgba(255, 100, 0, 0.5), transparent 50%);
+          z-index: 51;
+          opacity: 0;
+          pointer-events: none;
+        "
+      ></div>
+      <div
+        id="burn-b"
+        style="
+          position: absolute;
+          top: -200px;
+          right: -600px;
+          width: 2400px;
+          height: 1600px;
+          background: radial-gradient(ellipse at 80% 50%, rgba(255, 160, 0, 0.4), transparent 50%);
+          z-index: 51;
+          opacity: 0;
+          pointer-events: none;
+        "
+      ></div>
+      <div
+        id="burn-c"
+        style="
+          position: absolute;
+          top: -100px;
+          right: -500px;
+          width: 2200px;
+          height: 1400px;
+          background: radial-gradient(ellipse at 60% 60%, rgba(255, 200, 50, 0.3), transparent 50%);
+          z-index: 51;
+          opacity: 0;
+          pointer-events: none;
+        "
+      ></div>
+
+      <!-- Outro -->
+      <div id="outro">
+        <h2 id="outro-h2">Light Transitions</h2>
+        <div class="tag" id="outro-tag">End of showcase</div>
+      </div>
+    </div>
+
+    <script>
+      (function () {
+        var tl = gsap.timeline({ paused: false });
+        window.__timelines = window.__timelines || {};
+        window.__timelines["main"] = tl;
+
+        // Transition demos config
+        var demos = [
+          { label: "LIGHT LEAK", desc: "Use a light leak transition with warm overlays" },
+          { label: "OVEREXPOSURE BURN", desc: "Use an overexposure burn transition" },
+          { label: "FILM BURN", desc: "Use a film burn transition with warm edge bleeds" },
+        ];
+
+        // Reset scenes helper
+        function resetScenes(t, demoIndex) {
+          tl.set("#scene1", { opacity: 1, filter: "none", scale: 1 }, t);
+          tl.set("#scene2", { opacity: 0 }, t);
+          tl.set("#info-label-a", { textContent: demos[demoIndex].label }, t);
+          tl.set("#info-desc-a", { textContent: demos[demoIndex].desc }, t);
+          tl.set("#info-label-b", { textContent: demos[demoIndex].label }, t);
+          tl.set("#info-desc-b", { textContent: demos[demoIndex].desc }, t);
+          // Reset light leak overlays
+          tl.set("#leak-warm", { opacity: 0 }, t);
+          tl.set("#leak-1", { opacity: 0, x: 0 }, t);
+          tl.set("#leak-2", { opacity: 0, x: 0 }, t);
+          // Reset flash
+          tl.set("#flash-overlay", { opacity: 0 }, t);
+          // Reset burn overlays
+          tl.set("#burn-a", { opacity: 0, x: 0 }, t);
+          tl.set("#burn-b", { opacity: 0, x: 0 }, t);
+          tl.set("#burn-c", { opacity: 0, x: 0 }, t);
+        }
+
+        // ===== TITLE CARD (0s - 3s) =====
+        tl.to("#title-h1", { opacity: 1, y: 0, duration: 0.6, ease: "power2.out" }, 0.3);
+        tl.to("#title-sub", { opacity: 1, y: 0, duration: 0.5, ease: "power2.out" }, 0.6);
+        tl.to("#title-card", { opacity: 0, duration: 0.4, ease: "power1.inOut" }, 2.5);
+
+        // ===== DEMO 1: LIGHT LEAK (3s - 8s) =====
+        var T1 = 3;
+        resetScenes(T1, 0);
+        var T = T1 + 2;
+        tl.to("#leak-warm", { opacity: 0.4, duration: 0.3, ease: "power1.in" }, T);
+        tl.to("#leak-1", { opacity: 0.9, x: 300, duration: 0.5, ease: "sine.inOut" }, T + 0.05);
+        tl.to("#leak-2", { opacity: 0.8, x: 200, duration: 0.6, ease: "sine.inOut" }, T + 0.1);
+        tl.to("#leak-warm", { opacity: 0.6, duration: 0.15, ease: "power2.in" }, T + 0.35);
+        tl.set("#scene1", { opacity: 0 }, T + 0.45);
+        tl.set("#scene2", { opacity: 1 }, T + 0.45);
+        tl.to("#leak-warm", { opacity: 0, duration: 0.4, ease: "power2.out" }, T + 0.5);
+        tl.to("#leak-1", { opacity: 0, x: 600, duration: 0.35, ease: "power1.out" }, T + 0.5);
+        tl.to("#leak-2", { opacity: 0, x: 400, duration: 0.35, ease: "power1.out" }, T + 0.55);
+
+        // ===== DEMO 2: OVEREXPOSURE BURN (8s - 13s) =====
+        var T2 = 8;
+        resetScenes(T2, 1);
+        T = T2 + 2;
+        tl.to(
+          "#scene1",
+          { filter: "brightness(1.5)", scale: 1.03, duration: 0.2, ease: "power1.in" },
+          T,
+        );
+        tl.to(
+          "#scene1",
+          { filter: "brightness(3)", scale: 1.06, duration: 0.2, ease: "power2.in" },
+          T + 0.2,
+        );
+        tl.to("#flash-overlay", { opacity: 0.5, duration: 0.25, ease: "power1.in" }, T + 0.15);
+        tl.to("#flash-overlay", { opacity: 1, duration: 0.15, ease: "power2.in" }, T + 0.4);
+        tl.set("#scene1", { opacity: 0 }, T + 0.55);
+        tl.set("#scene2", { opacity: 1 }, T + 0.55);
+        tl.set("#scene1", { filter: "none", scale: 1 }, T + 0.55);
+        tl.to("#flash-overlay", { opacity: 0, duration: 0.35, ease: "power2.out" }, T + 0.55);
+
+        // ===== DEMO 3: FILM BURN (13s - 18s) =====
+        var T3 = 13;
+        resetScenes(T3, 2);
+        T = T3 + 2;
+        tl.to("#burn-a", { opacity: 1, x: -300, duration: 0.4, ease: "power1.in" }, T);
+        tl.to("#burn-b", { opacity: 1, x: -500, duration: 0.5, ease: "power1.in" }, T + 0.05);
+        tl.to("#burn-c", { opacity: 1, x: -200, duration: 0.45, ease: "power1.in" }, T + 0.1);
+        tl.set("#scene1", { opacity: 0 }, T + 0.35);
+        tl.set("#scene2", { opacity: 1 }, T + 0.35);
+        tl.to("#burn-a", { opacity: 0, duration: 0.3, ease: "power2.out" }, T + 0.45);
+        tl.to("#burn-b", { opacity: 0, duration: 0.3, ease: "power2.out" }, T + 0.5);
+        tl.to("#burn-c", { opacity: 0, duration: 0.3, ease: "power2.out" }, T + 0.55);
+
+        // ===== OUTRO (18s - 21s) =====
+        tl.to("#scene1", { opacity: 0, duration: 0.3 }, 18);
+        tl.to("#scene2", { opacity: 0, duration: 0.3 }, 18);
+        tl.to("#outro", { opacity: 1, duration: 0.4, ease: "power1.inOut" }, 18.2);
+        tl.to("#outro-h2", { opacity: 1, y: 0, duration: 0.5, ease: "power2.out" }, 18.5);
+        tl.to("#outro-tag", { opacity: 1, y: 0, duration: 0.4, ease: "power2.out" }, 18.8);
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/transitions-mechanical/transitions-mechanical.html b/docs/public/catalog/blocks/transitions-mechanical/transitions-mechanical.html
new file mode 100644
index 0000000000..ec0547f7b7
--- /dev/null
+++ b/docs/public/catalog/blocks/transitions-mechanical/transitions-mechanical.html
@@ -0,0 +1,423 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+      }
+      .scene {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      .scene-inner {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+      }
+      .info-bar {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        z-index: 100;
+        background: rgba(0, 0, 0, 0.88);
+        padding: 24px 60px;
+        display: flex;
+        align-items: center;
+        gap: 40px;
+        opacity: 0;
+      }
+      .info-num {
+        font-size: 14px;
+        font-weight: 700;
+        color: #e07a5f;
+        letter-spacing: 0.1em;
+      }
+      .info-name {
+        font-size: 20px;
+        font-weight: 700;
+        color: #fff;
+      }
+      .info-desc {
+        font-size: 14px;
+        color: rgba(255, 255, 255, 0.5);
+      }
+      #title-card {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        background: #0d1b2a;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        z-index: 50;
+      }
+      #outro-card {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        background: #0d1b2a;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        z-index: 50;
+        opacity: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      data-composition-id="main"
+      data-start="0"
+      data-duration="15"
+      data-width="1920"
+      data-height="1080"
+    >
+      <!-- Title Card -->
+      <div id="title-card">
+        <div
+          id="title-label"
+          style="
+            font-size: 14px;
+            font-weight: 700;
+            color: #e07a5f;
+            letter-spacing: 0.2em;
+            text-transform: uppercase;
+            opacity: 0;
+          "
+        >
+          TRANSITION CATALOG
+        </div>
+        <div
+          id="title-main"
+          style="font-size: 72px; font-weight: 900; color: #fff; margin-top: 16px; opacity: 0"
+        >
+          Mechanical Transitions
+        </div>
+        <div
+          id="title-count"
+          style="
+            font-size: 24px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.4);
+            margin-top: 12px;
+            opacity: 0;
+          "
+        >
+          2 transitions
+        </div>
+      </div>
+
+      <!-- Scene A -->
+      <div id="scene1" class="scene" style="z-index: 1">
+        <div class="scene-inner" id="s1" style="background: #1b263b">
+          <div style="font-size: 200px; font-weight: 900; color: rgba(255, 255, 255, 0.08)">
+            ONE
+          </div>
+          <div
+            style="
+              font-size: 32px;
+              font-weight: 700;
+              color: #778da9;
+              letter-spacing: 0.15em;
+              margin-top: -20px;
+            "
+          >
+            SCENE A
+          </div>
+        </div>
+      </div>
+
+      <!-- Scene B -->
+      <div id="scene2" class="scene" style="z-index: 2; opacity: 0">
+        <div class="scene-inner" id="s2" style="background: #e07a5f">
+          <div style="font-size: 200px; font-weight: 900; color: rgba(255, 255, 255, 0.15)">
+            TWO
+          </div>
+          <div
+            style="
+              font-size: 32px;
+              font-weight: 700;
+              color: #fff;
+              letter-spacing: 0.15em;
+              margin-top: -20px;
+            "
+          >
+            SCENE B
+          </div>
+        </div>
+      </div>
+
+      <!-- Shutter Halves -->
+      <div
+        id="shutter-top"
+        style="
+          position: absolute;
+          top: -540px;
+          left: 0;
+          width: 1920px;
+          height: 540px;
+          background: #111;
+          z-index: 50;
+        "
+      ></div>
+      <div
+        id="shutter-bot"
+        style="
+          position: absolute;
+          bottom: -540px;
+          left: 0;
+          width: 1920px;
+          height: 540px;
+          background: #111;
+          z-index: 50;
+        "
+      ></div>
+
+      <!-- Info Bars -->
+      <div id="info-1" class="info-bar">
+        <div class="info-num">01</div>
+        <div class="info-name">Shutter</div>
+        <div class="info-desc">Use a shutter close/open transition</div>
+      </div>
+      <div id="info-2" class="info-bar">
+        <div class="info-num">02</div>
+        <div class="info-name">Clock Wipe</div>
+        <div class="info-desc">Use a clock wipe transition</div>
+      </div>
+
+      <!-- Outro Card -->
+      <div id="outro-card">
+        <div
+          id="outro-label"
+          style="
+            font-size: 14px;
+            font-weight: 700;
+            color: #e07a5f;
+            letter-spacing: 0.2em;
+            text-transform: uppercase;
+            opacity: 0;
+          "
+        >
+          MECHANICAL TRANSITIONS
+        </div>
+        <div
+          id="outro-main"
+          style="font-size: 56px; font-weight: 900; color: #fff; margin-top: 16px; opacity: 0"
+        >
+          2 Transitions
+        </div>
+      </div>
+    </div>
+
+    <script>
+      (function () {
+        var tl = gsap.timeline({ paused: true });
+        var t = 0;
+
+        // === TITLE CARD (3s) ===
+        tl.to("#title-label", { opacity: 1, y: 0, duration: 0.4, ease: "power2.out" }, t + 0.3);
+        tl.fromTo(
+          "#title-main",
+          { opacity: 0, y: 20 },
+          { opacity: 1, y: 0, duration: 0.5, ease: "power2.out" },
+          t + 0.6,
+        );
+        tl.fromTo(
+          "#title-count",
+          { opacity: 0 },
+          { opacity: 1, duration: 0.4, ease: "power2.out" },
+          t + 1.0,
+        );
+        tl.to("#title-card", { opacity: 0, duration: 0.4, ease: "power2.inOut" }, t + 2.4);
+        t += 3;
+
+        function resetScenes() {
+          tl.set(
+            "#scene1",
+            {
+              opacity: 1,
+              x: 0,
+              y: 0,
+              scale: 1,
+              scaleX: 1,
+              rotation: 0,
+              filter: "none",
+              clipPath: "none",
+              zIndex: 1,
+              skewX: 0,
+            },
+            t,
+          );
+          tl.set(
+            "#scene2",
+            {
+              opacity: 0,
+              x: 0,
+              y: 0,
+              scale: 1,
+              scaleX: 1,
+              rotation: 0,
+              filter: "none",
+              clipPath: "none",
+              zIndex: 2,
+              skewX: 0,
+            },
+            t,
+          );
+          tl.set(
+            "#s1",
+            {
+              opacity: 1,
+              x: 0,
+              y: 0,
+              scale: 1,
+              rotation: 0,
+              filter: "none",
+              skewX: 0,
+              scaleX: 1,
+              transformOrigin: "50% 50%",
+            },
+            t,
+          );
+          tl.set(
+            "#s2",
+            {
+              opacity: 1,
+              x: 0,
+              y: 0,
+              scale: 1,
+              rotation: 0,
+              filter: "none",
+              skewX: 0,
+              scaleX: 1,
+              transformOrigin: "50% 50%",
+            },
+            t,
+          );
+          tl.set("#shutter-top", { y: 0 }, t);
+          tl.set("#shutter-bot", { y: 0 }, t);
+        }
+
+        // === TRANSITION 1: Shutter ===
+        resetScenes();
+        tl.to("#info-1", { opacity: 1, duration: 0.3 }, t + 0.2);
+        var T = t + 1.5;
+        tl.to("#shutter-top", { y: 540, duration: 0.25, ease: "power3.in" }, T);
+        tl.to("#shutter-bot", { y: -540, duration: 0.25, ease: "power3.in" }, T);
+        tl.set("#scene1", { opacity: 0 }, T + 0.25);
+        tl.set("#scene2", { opacity: 1 }, T + 0.25);
+        tl.to("#shutter-top", { y: 0, duration: 0.25, ease: "power3.out" }, T + 0.3);
+        tl.to("#shutter-bot", { y: 0, duration: 0.25, ease: "power3.out" }, T + 0.3);
+        t = T + 1.5 + 1.0;
+        tl.to("#info-1", { opacity: 0, duration: 0.2 }, t);
+        // Reset shutters after demo
+        tl.set("#shutter-top", { y: 0 }, t + 0.2);
+        tl.set("#shutter-bot", { y: 0 }, t + 0.2);
+        t += 0.5;
+
+        // === TRANSITION 2: Clock Wipe ===
+        resetScenes();
+        tl.to("#info-2", { opacity: 1, duration: 0.3 }, t + 0.2);
+        T = t + 1.5;
+        var d = 0.1;
+        tl.set(
+          "#scene2",
+          {
+            opacity: 1,
+            zIndex: 10,
+            clipPath:
+              "polygon(50% 50%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%)",
+          },
+          T,
+        );
+        tl.to(
+          "#scene2",
+          {
+            clipPath:
+              "polygon(50% 50%, 50% 0%, 100% 0%, 100% 50%, 100% 50%, 100% 50%, 100% 50%, 100% 50%, 100% 50%)",
+            duration: d,
+            ease: "none",
+          },
+          T,
+        );
+        tl.to(
+          "#scene2",
+          {
+            clipPath:
+              "polygon(50% 50%, 50% 0%, 100% 0%, 100% 50%, 100% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%)",
+            duration: d,
+            ease: "none",
+          },
+          T + d,
+        );
+        tl.to(
+          "#scene2",
+          {
+            clipPath:
+              "polygon(50% 50%, 50% 0%, 100% 0%, 100% 50%, 100% 100%, 50% 100%, 0% 100%, 0% 50%, 0% 50%)",
+            duration: d,
+            ease: "none",
+          },
+          T + d * 2,
+        );
+        tl.to(
+          "#scene2",
+          {
+            clipPath:
+              "polygon(50% 50%, 50% 0%, 100% 0%, 100% 50%, 100% 100%, 50% 100%, 0% 100%, 0% 50%, 0% 0%)",
+            duration: d,
+            ease: "none",
+          },
+          T + d * 3,
+        );
+        tl.set("#scene2", { clipPath: "none", zIndex: 2 }, T + d * 4 + 0.02);
+        tl.set("#scene1", { opacity: 0 }, T + d * 4 + 0.02);
+        t = T + 1.5 + 1.0;
+        tl.to("#info-2", { opacity: 0, duration: 0.2 }, t);
+        t += 0.5;
+
+        // === OUTRO (3s) ===
+        tl.set("#scene1", { opacity: 0 }, t);
+        tl.set("#scene2", { opacity: 0 }, t);
+        tl.to("#outro-card", { opacity: 1, duration: 0.4, ease: "power2.inOut" }, t);
+        tl.to("#outro-label", { opacity: 1, duration: 0.4, ease: "power2.out" }, t + 0.3);
+        tl.fromTo(
+          "#outro-main",
+          { opacity: 0, y: 20 },
+          { opacity: 1, y: 0, duration: 0.5, ease: "power2.out" },
+          t + 0.6,
+        );
+        tl.to("#outro-card", { opacity: 0, duration: 0.4, ease: "power2.inOut" }, t + 2.4);
+
+        window.__timelines = window.__timelines || {};
+        window.__timelines["main"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/transitions-other/transitions-other.html b/docs/public/catalog/blocks/transitions-other/transitions-other.html
new file mode 100644
index 0000000000..cc905c4caf
--- /dev/null
+++ b/docs/public/catalog/blocks/transitions-other/transitions-other.html
@@ -0,0 +1,392 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+      }
+      .scene {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      .scene-inner {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+      }
+      .info-bar {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        z-index: 100;
+        background: rgba(0, 0, 0, 0.88);
+        padding: 24px 60px;
+        display: flex;
+        align-items: center;
+        gap: 40px;
+        opacity: 0;
+      }
+      .info-num {
+        font-size: 14px;
+        font-weight: 700;
+        color: #e07a5f;
+        letter-spacing: 0.1em;
+      }
+      .info-name {
+        font-size: 20px;
+        font-weight: 700;
+        color: #fff;
+      }
+      .info-desc {
+        font-size: 14px;
+        color: rgba(255, 255, 255, 0.5);
+      }
+      #title-card {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        background: #0d1b2a;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        z-index: 50;
+      }
+      #outro-card {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        background: #0d1b2a;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        z-index: 50;
+        opacity: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      data-composition-id="main"
+      data-start="0"
+      data-duration="20"
+      data-width="1920"
+      data-height="1080"
+    >
+      <!-- Title Card -->
+      <div id="title-card">
+        <div
+          id="title-label"
+          style="
+            font-size: 14px;
+            font-weight: 700;
+            color: #e07a5f;
+            letter-spacing: 0.2em;
+            text-transform: uppercase;
+            opacity: 0;
+          "
+        >
+          TRANSITION CATALOG
+        </div>
+        <div
+          id="title-main"
+          style="font-size: 72px; font-weight: 900; color: #fff; margin-top: 16px; opacity: 0"
+        >
+          Other Transitions
+        </div>
+        <div
+          id="title-count"
+          style="
+            font-size: 24px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.4);
+            margin-top: 12px;
+            opacity: 0;
+          "
+        >
+          3 transitions
+        </div>
+      </div>
+
+      <!-- Scene A -->
+      <div id="scene1" class="scene" style="z-index: 1">
+        <div class="scene-inner" id="s1" style="background: #1b263b">
+          <div style="font-size: 200px; font-weight: 900; color: rgba(255, 255, 255, 0.08)">
+            ONE
+          </div>
+          <div
+            style="
+              font-size: 32px;
+              font-weight: 700;
+              color: #778da9;
+              letter-spacing: 0.15em;
+              margin-top: -20px;
+            "
+          >
+            SCENE A
+          </div>
+        </div>
+      </div>
+
+      <!-- Scene B -->
+      <div id="scene2" class="scene" style="z-index: 2; opacity: 0">
+        <div class="scene-inner" id="s2" style="background: #e07a5f">
+          <div style="font-size: 200px; font-weight: 900; color: rgba(255, 255, 255, 0.15)">
+            TWO
+          </div>
+          <div
+            style="
+              font-size: 32px;
+              font-weight: 700;
+              color: #fff;
+              letter-spacing: 0.15em;
+              margin-top: -20px;
+            "
+          >
+            SCENE B
+          </div>
+        </div>
+      </div>
+
+      <!-- Flash Overlay -->
+      <div
+        id="flash-overlay"
+        style="
+          position: absolute;
+          inset: 0;
+          background: #fff;
+          z-index: 50;
+          opacity: 0;
+          pointer-events: none;
+        "
+      ></div>
+
+      <!-- Morph Circle -->
+      <div
+        id="morph-circle"
+        style="
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          width: 50px;
+          height: 50px;
+          border-radius: 50%;
+          transform: translate(-50%, -50%) scale(0);
+          z-index: 50;
+          opacity: 0;
+          pointer-events: none;
+          background: #e07a5f;
+        "
+      ></div>
+
+      <!-- Info Bars -->
+      <div id="info-1" class="info-bar">
+        <div class="info-num">01</div>
+        <div class="info-name">Flash Cut</div>
+        <div class="info-desc">Use a flash cut transition</div>
+      </div>
+      <div id="info-2" class="info-bar">
+        <div class="info-num">02</div>
+        <div class="info-name">Gravity Drop</div>
+        <div class="info-desc">Use a gravity drop transition</div>
+      </div>
+      <div id="info-3" class="info-bar">
+        <div class="info-num">03</div>
+        <div class="info-name">Morph Circle</div>
+        <div class="info-desc">Use a morph circle expanding transition</div>
+      </div>
+
+      <!-- Outro Card -->
+      <div id="outro-card">
+        <div
+          id="outro-label"
+          style="
+            font-size: 14px;
+            font-weight: 700;
+            color: #e07a5f;
+            letter-spacing: 0.2em;
+            text-transform: uppercase;
+            opacity: 0;
+          "
+        >
+          OTHER TRANSITIONS
+        </div>
+        <div
+          id="outro-main"
+          style="font-size: 56px; font-weight: 900; color: #fff; margin-top: 16px; opacity: 0"
+        >
+          3 Transitions
+        </div>
+      </div>
+    </div>
+
+    <script>
+      (function () {
+        var tl = gsap.timeline({ paused: true });
+        var t = 0;
+
+        // === TITLE CARD (3s) ===
+        tl.to("#title-label", { opacity: 1, y: 0, duration: 0.4, ease: "power2.out" }, t + 0.3);
+        tl.fromTo(
+          "#title-main",
+          { opacity: 0, y: 20 },
+          { opacity: 1, y: 0, duration: 0.5, ease: "power2.out" },
+          t + 0.6,
+        );
+        tl.fromTo(
+          "#title-count",
+          { opacity: 0 },
+          { opacity: 1, duration: 0.4, ease: "power2.out" },
+          t + 1.0,
+        );
+        tl.to("#title-card", { opacity: 0, duration: 0.4, ease: "power2.inOut" }, t + 2.4);
+        t += 3;
+
+        function resetScenes() {
+          tl.set(
+            "#scene1",
+            {
+              opacity: 1,
+              x: 0,
+              y: 0,
+              scale: 1,
+              scaleX: 1,
+              rotation: 0,
+              filter: "none",
+              clipPath: "none",
+              zIndex: 1,
+              skewX: 0,
+            },
+            t,
+          );
+          tl.set(
+            "#scene2",
+            {
+              opacity: 0,
+              x: 0,
+              y: 0,
+              scale: 1,
+              scaleX: 1,
+              rotation: 0,
+              filter: "none",
+              clipPath: "none",
+              zIndex: 2,
+              skewX: 0,
+            },
+            t,
+          );
+          tl.set(
+            "#s1",
+            {
+              opacity: 1,
+              x: 0,
+              y: 0,
+              scale: 1,
+              rotation: 0,
+              filter: "none",
+              skewX: 0,
+              scaleX: 1,
+              transformOrigin: "50% 50%",
+            },
+            t,
+          );
+          tl.set(
+            "#s2",
+            {
+              opacity: 1,
+              x: 0,
+              y: 0,
+              scale: 1,
+              rotation: 0,
+              filter: "none",
+              skewX: 0,
+              scaleX: 1,
+              transformOrigin: "50% 50%",
+            },
+            t,
+          );
+        }
+
+        // === TRANSITION 1: Flash Cut ===
+        resetScenes();
+        tl.to("#info-1", { opacity: 1, duration: 0.3 }, t + 0.2);
+        var T = t + 1.5;
+        tl.to("#flash-overlay", { opacity: 1, duration: 0.03, ease: "power4.out" }, T);
+        tl.set("#scene1", { opacity: 0 }, T + 0.03);
+        tl.set("#scene2", { opacity: 1 }, T + 0.03);
+        tl.to("#flash-overlay", { opacity: 0, duration: 0.1, ease: "power2.out" }, T + 0.05);
+        t = T + 1.5 + 1.0;
+        tl.to("#info-1", { opacity: 0, duration: 0.2 }, t);
+        t += 0.5;
+
+        // === TRANSITION 2: Gravity Drop ===
+        resetScenes();
+        tl.to("#info-2", { opacity: 1, duration: 0.3 }, t + 0.2);
+        T = t + 1.5;
+        tl.set("#scene2", { opacity: 1, zIndex: 1 }, T);
+        tl.set("#scene1", { zIndex: 10 }, T);
+        tl.to("#s1", { y: 1200, rotation: 4, duration: 0.5, ease: "power3.in" }, T);
+        tl.set("#scene1", { opacity: 0, zIndex: 1 }, T + 0.55);
+        tl.set("#scene2", { zIndex: 2 }, T + 0.55);
+        t = T + 1.5 + 1.0;
+        tl.to("#info-2", { opacity: 0, duration: 0.2 }, t);
+        t += 0.5;
+
+        // === TRANSITION 3: Morph Circle ===
+        resetScenes();
+        tl.to("#info-3", { opacity: 1, duration: 0.3 }, t + 0.2);
+        T = t + 1.5;
+        tl.set("#morph-circle", { opacity: 1, scale: 0 }, T);
+        tl.to("#morph-circle", { scale: 60, duration: 0.5, ease: "power3.in" }, T);
+        tl.set("#scene1", { opacity: 0 }, T + 0.4);
+        tl.set("#scene2", { opacity: 1 }, T + 0.4);
+        tl.to("#morph-circle", { opacity: 0, duration: 0.15, ease: "power2.out" }, T + 0.5);
+        tl.set("#morph-circle", { scale: 0 }, T + 0.7);
+        t = T + 1.5 + 1.0;
+        tl.to("#info-3", { opacity: 0, duration: 0.2 }, t);
+        t += 0.5;
+
+        // === OUTRO (3s) ===
+        tl.set("#scene1", { opacity: 0 }, t);
+        tl.set("#scene2", { opacity: 0 }, t);
+        tl.to("#outro-card", { opacity: 1, duration: 0.4, ease: "power2.inOut" }, t);
+        tl.to("#outro-label", { opacity: 1, duration: 0.4, ease: "power2.out" }, t + 0.3);
+        tl.fromTo(
+          "#outro-main",
+          { opacity: 0, y: 20 },
+          { opacity: 1, y: 0, duration: 0.5, ease: "power2.out" },
+          t + 0.6,
+        );
+        tl.to("#outro-card", { opacity: 0, duration: 0.4, ease: "power2.inOut" }, t + 2.4);
+
+        window.__timelines = window.__timelines || {};
+        window.__timelines["main"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/transitions-push/transitions-push.html b/docs/public/catalog/blocks/transitions-push/transitions-push.html
new file mode 100644
index 0000000000..bb96cb3fa8
--- /dev/null
+++ b/docs/public/catalog/blocks/transitions-push/transitions-push.html
@@ -0,0 +1,383 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+      }
+      .scene {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      .scene-inner {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+      }
+      .info-bar {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        z-index: 100;
+        background: rgba(0, 0, 0, 0.88);
+        padding: 24px 60px;
+        display: flex;
+        align-items: center;
+        gap: 40px;
+        opacity: 0;
+      }
+      .info-num {
+        font-size: 14px;
+        font-weight: 700;
+        color: #e07a5f;
+        letter-spacing: 0.1em;
+      }
+      .info-name {
+        font-size: 20px;
+        font-weight: 700;
+        color: #fff;
+      }
+      .info-desc {
+        font-size: 14px;
+        color: rgba(255, 255, 255, 0.5);
+      }
+      #title-card {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        background: #0d1b2a;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        z-index: 50;
+      }
+      #outro-card {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        background: #0d1b2a;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        z-index: 50;
+        opacity: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      data-composition-id="main"
+      data-start="0"
+      data-duration="24"
+      data-width="1920"
+      data-height="1080"
+    >
+      <!-- Title Card -->
+      <div id="title-card">
+        <div
+          id="title-label"
+          style="
+            font-size: 14px;
+            font-weight: 700;
+            color: #e07a5f;
+            letter-spacing: 0.2em;
+            text-transform: uppercase;
+            opacity: 0;
+          "
+        >
+          TRANSITION CATALOG
+        </div>
+        <div
+          id="title-main"
+          style="font-size: 72px; font-weight: 900; color: #fff; margin-top: 16px; opacity: 0"
+        >
+          Push Transitions
+        </div>
+        <div
+          id="title-count"
+          style="
+            font-size: 24px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.4);
+            margin-top: 12px;
+            opacity: 0;
+          "
+        >
+          4 transitions
+        </div>
+      </div>
+
+      <!-- Scene A -->
+      <div id="scene1" class="scene" style="z-index: 1">
+        <div class="scene-inner" id="s1" style="background: #1b263b">
+          <div style="font-size: 200px; font-weight: 900; color: rgba(255, 255, 255, 0.08)">
+            ONE
+          </div>
+          <div
+            style="
+              font-size: 32px;
+              font-weight: 700;
+              color: #778da9;
+              letter-spacing: 0.15em;
+              margin-top: -20px;
+            "
+          >
+            SCENE A
+          </div>
+        </div>
+      </div>
+
+      <!-- Scene B -->
+      <div id="scene2" class="scene" style="z-index: 2; opacity: 0">
+        <div class="scene-inner" id="s2" style="background: #e07a5f">
+          <div style="font-size: 200px; font-weight: 900; color: rgba(255, 255, 255, 0.15)">
+            TWO
+          </div>
+          <div
+            style="
+              font-size: 32px;
+              font-weight: 700;
+              color: #fff;
+              letter-spacing: 0.15em;
+              margin-top: -20px;
+            "
+          >
+            SCENE B
+          </div>
+        </div>
+      </div>
+
+      <!-- Info Bars -->
+      <div id="info-1" class="info-bar">
+        <div class="info-num">01</div>
+        <div class="info-name">Push Slide</div>
+        <div class="info-desc">Use a push slide transition</div>
+      </div>
+      <div id="info-2" class="info-bar">
+        <div class="info-num">02</div>
+        <div class="info-name">Vertical Push</div>
+        <div class="info-desc">Use a vertical push transition</div>
+      </div>
+      <div id="info-3" class="info-bar">
+        <div class="info-num">03</div>
+        <div class="info-name">Elastic Push</div>
+        <div class="info-desc">Use an elastic push transition with overshoot</div>
+      </div>
+      <div id="info-4" class="info-bar">
+        <div class="info-num">04</div>
+        <div class="info-name">Squeeze</div>
+        <div class="info-desc">Use a squeeze transition</div>
+      </div>
+
+      <!-- Outro Card -->
+      <div id="outro-card">
+        <div
+          id="outro-label"
+          style="
+            font-size: 14px;
+            font-weight: 700;
+            color: #e07a5f;
+            letter-spacing: 0.2em;
+            text-transform: uppercase;
+            opacity: 0;
+          "
+        >
+          PUSH TRANSITIONS
+        </div>
+        <div
+          id="outro-main"
+          style="font-size: 56px; font-weight: 900; color: #fff; margin-top: 16px; opacity: 0"
+        >
+          4 Transitions
+        </div>
+      </div>
+    </div>
+
+    <script>
+      (function () {
+        var tl = gsap.timeline({ paused: true });
+        var t = 0;
+
+        // === TITLE CARD (3s) ===
+        tl.to("#title-label", { opacity: 1, y: 0, duration: 0.4, ease: "power2.out" }, t + 0.3);
+        tl.fromTo(
+          "#title-main",
+          { opacity: 0, y: 20 },
+          { opacity: 1, y: 0, duration: 0.5, ease: "power2.out" },
+          t + 0.6,
+        );
+        tl.fromTo(
+          "#title-count",
+          { opacity: 0 },
+          { opacity: 1, duration: 0.4, ease: "power2.out" },
+          t + 1.0,
+        );
+        tl.to("#title-card", { opacity: 0, duration: 0.4, ease: "power2.inOut" }, t + 2.4);
+        t += 3;
+
+        function resetScenes() {
+          tl.set(
+            "#scene1",
+            {
+              opacity: 1,
+              x: 0,
+              y: 0,
+              scale: 1,
+              scaleX: 1,
+              rotation: 0,
+              filter: "none",
+              clipPath: "none",
+              zIndex: 1,
+              skewX: 0,
+            },
+            t,
+          );
+          tl.set(
+            "#scene2",
+            {
+              opacity: 0,
+              x: 0,
+              y: 0,
+              scale: 1,
+              scaleX: 1,
+              rotation: 0,
+              filter: "none",
+              clipPath: "none",
+              zIndex: 2,
+              skewX: 0,
+            },
+            t,
+          );
+          tl.set(
+            "#s1",
+            {
+              opacity: 1,
+              x: 0,
+              y: 0,
+              scale: 1,
+              rotation: 0,
+              filter: "none",
+              skewX: 0,
+              scaleX: 1,
+              transformOrigin: "50% 50%",
+            },
+            t,
+          );
+          tl.set(
+            "#s2",
+            {
+              opacity: 1,
+              x: 0,
+              y: 0,
+              scale: 1,
+              rotation: 0,
+              filter: "none",
+              skewX: 0,
+              scaleX: 1,
+              transformOrigin: "50% 50%",
+            },
+            t,
+          );
+        }
+
+        // === TRANSITION 1: Push Slide ===
+        resetScenes();
+        tl.to("#info-1", { opacity: 1, duration: 0.3 }, t + 0.2);
+        var T = t + 1.5;
+        tl.to("#s1", { x: -1920, duration: 0.5, ease: "power3.inOut" }, T);
+        tl.fromTo("#s2", { x: 1920 }, { x: 0, duration: 0.5, ease: "power3.inOut" }, T);
+        tl.set("#scene2", { opacity: 1 }, T);
+        t = T + 1.5 + 1.0;
+        tl.to("#info-1", { opacity: 0, duration: 0.2 }, t);
+        t += 0.5;
+
+        // === TRANSITION 2: Vertical Push ===
+        resetScenes();
+        tl.to("#info-2", { opacity: 1, duration: 0.3 }, t + 0.2);
+        T = t + 1.5;
+        tl.to("#s1", { y: -1080, duration: 0.5, ease: "power3.inOut" }, T);
+        tl.fromTo("#s2", { y: 1080 }, { y: 0, duration: 0.5, ease: "power3.inOut" }, T);
+        tl.set("#scene2", { opacity: 1 }, T);
+        t = T + 1.5 + 1.0;
+        tl.to("#info-2", { opacity: 0, duration: 0.2 }, t);
+        t += 0.5;
+
+        // === TRANSITION 3: Elastic Push ===
+        resetScenes();
+        tl.to("#info-3", { opacity: 1, duration: 0.3 }, t + 0.2);
+        T = t + 1.5;
+        tl.set("#scene2", { opacity: 1 }, T);
+        tl.to("#s1", { x: -1920, duration: 0.5, ease: "power3.in" }, T);
+        tl.fromTo("#s2", { x: 1920 }, { x: 30, duration: 0.4, ease: "power4.out" }, T + 0.1);
+        tl.to("#s2", { x: -15, duration: 0.15, ease: "sine.inOut" }, T + 0.5);
+        tl.to("#s2", { x: 0, duration: 0.1, ease: "sine.out" }, T + 0.65);
+        t = T + 1.5 + 1.0;
+        tl.to("#info-3", { opacity: 0, duration: 0.2 }, t);
+        t += 0.5;
+
+        // === TRANSITION 4: Squeeze ===
+        resetScenes();
+        tl.to("#info-4", { opacity: 1, duration: 0.3 }, t + 0.2);
+        T = t + 1.5;
+        tl.to(
+          "#s1",
+          { scaleX: 0, transformOrigin: "left center", duration: 0.4, ease: "power3.inOut" },
+          T,
+        );
+        tl.set("#scene2", { opacity: 1 }, T);
+        tl.fromTo(
+          "#s2",
+          { scaleX: 0, transformOrigin: "right center" },
+          { scaleX: 1, duration: 0.4, ease: "power3.inOut" },
+          T + 0.1,
+        );
+        tl.set("#scene1", { opacity: 0 }, T + 0.5);
+        t = T + 1.5 + 1.0;
+        tl.to("#info-4", { opacity: 0, duration: 0.2 }, t);
+        t += 0.5;
+
+        // === OUTRO (3s) ===
+        tl.set("#scene1", { opacity: 0 }, t);
+        tl.set("#scene2", { opacity: 0 }, t);
+        tl.to("#outro-card", { opacity: 1, duration: 0.4, ease: "power2.inOut" }, t);
+        tl.to("#outro-label", { opacity: 1, duration: 0.4, ease: "power2.out" }, t + 0.3);
+        tl.fromTo(
+          "#outro-main",
+          { opacity: 0, y: 20 },
+          { opacity: 1, y: 0, duration: 0.5, ease: "power2.out" },
+          t + 0.6,
+        );
+        tl.to("#outro-card", { opacity: 0, duration: 0.4, ease: "power2.inOut" }, t + 2.4);
+
+        window.__timelines = window.__timelines || {};
+        window.__timelines["main"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/transitions-radial/transitions-radial.html b/docs/public/catalog/blocks/transitions-radial/transitions-radial.html
new file mode 100644
index 0000000000..bd6aaf0334
--- /dev/null
+++ b/docs/public/catalog/blocks/transitions-radial/transitions-radial.html
@@ -0,0 +1,355 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920" />
+    <title>Radial Transitions</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #000;
+        overflow: hidden;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+      }
+
+      .scene {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+
+      .scene-inner {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+      }
+
+      #scene1 {
+        z-index: 1;
+      }
+      #scene2 {
+        z-index: 2;
+        opacity: 0;
+      }
+
+      #s1 {
+        background: #1b263b;
+      }
+      #s2 {
+        background: #e07a5f;
+      }
+
+      .big-text {
+        font-size: 200px;
+        font-weight: 900;
+        line-height: 1;
+        user-select: none;
+        pointer-events: none;
+      }
+      #s1 .big-text {
+        color: rgba(255, 255, 255, 0.08);
+      }
+      #s2 .big-text {
+        color: rgba(255, 255, 255, 0.15);
+      }
+
+      .label {
+        font-size: 32px;
+        font-weight: 600;
+        letter-spacing: 6px;
+        text-transform: uppercase;
+        margin-top: 12px;
+      }
+      #s1 .label {
+        color: #778da9;
+      }
+      #s2 .label {
+        color: #fff;
+      }
+
+      #info-bar {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 1920px;
+        height: 80px;
+        background: rgba(0, 0, 0, 0.88);
+        z-index: 100;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0;
+      }
+      #info-bar span {
+        color: #fff;
+        font-size: 22px;
+        font-weight: 500;
+        letter-spacing: 2px;
+      }
+
+      #title-card {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        background: #0d1b2a;
+        z-index: 200;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        opacity: 0;
+      }
+      #title-card .category {
+        font-size: 64px;
+        font-weight: 800;
+        color: #fff;
+        letter-spacing: 8px;
+        text-transform: uppercase;
+      }
+      #title-card .subtitle {
+        font-size: 24px;
+        font-weight: 400;
+        color: #778da9;
+        margin-top: 16px;
+        letter-spacing: 4px;
+      }
+
+      #outro-card {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        background: #0d1b2a;
+        z-index: 200;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        opacity: 0;
+      }
+      #outro-card .category {
+        font-size: 48px;
+        font-weight: 700;
+        color: #778da9;
+        letter-spacing: 6px;
+        text-transform: uppercase;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="composition"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="20"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="title-card">
+        <div class="category">Radial Transitions</div>
+        <div class="subtitle">3 Transitions</div>
+      </div>
+
+      <div id="scene1" class="scene">
+        <div id="s1" class="scene-inner">
+          <div class="big-text">ONE</div>
+          <div class="label">Scene A</div>
+        </div>
+      </div>
+
+      <div id="scene2" class="scene">
+        <div id="s2" class="scene-inner">
+          <div class="big-text">TWO</div>
+          <div class="label">Scene B</div>
+        </div>
+      </div>
+
+      <div id="info-bar"><span id="info-text">Transition Name</span></div>
+
+      <div id="outro-card">
+        <div class="category">End of Radial Transitions</div>
+      </div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      (function () {
+        var tl = gsap.timeline({ paused: true });
+        var t = 0;
+
+        var demos = [
+          { name: "Circle Iris", time: 0 },
+          { name: "Diamond Iris", time: 0 },
+          { name: "Diagonal Split", time: 0 },
+        ];
+
+        function resetScenes() {
+          tl.set(
+            "#scene1",
+            {
+              opacity: 1,
+              x: 0,
+              y: 0,
+              scale: 1,
+              scaleX: 1,
+              rotation: 0,
+              rotationY: 0,
+              filter: "none",
+              clipPath: "none",
+              zIndex: 1,
+              skewX: 0,
+            },
+            t,
+          );
+          tl.set(
+            "#scene2",
+            {
+              opacity: 0,
+              x: 0,
+              y: 0,
+              scale: 1,
+              scaleX: 1,
+              rotation: 0,
+              rotationY: 0,
+              filter: "none",
+              clipPath: "none",
+              zIndex: 2,
+              skewX: 0,
+            },
+            t,
+          );
+          tl.set(
+            "#s1",
+            {
+              opacity: 1,
+              x: 0,
+              y: 0,
+              scale: 1,
+              rotation: 0,
+              rotationY: 0,
+              filter: "none",
+              skewX: 0,
+              clipPath: "none",
+            },
+            t,
+          );
+          tl.set(
+            "#s2",
+            {
+              opacity: 1,
+              x: 0,
+              y: 0,
+              scale: 1,
+              rotation: 0,
+              rotationY: 0,
+              filter: "none",
+              skewX: 0,
+              clipPath: "none",
+            },
+            t,
+          );
+        }
+
+        /* ── Title card (3s) ── */
+        tl.set("#title-card", { opacity: 1 }, 0);
+        tl.to("#title-card", { opacity: 0, duration: 0.5 }, 2.5);
+        t = 3;
+
+        /* ── Demo 1: Circle Iris ── */
+        resetScenes();
+        tl.set("#info-text", { textContent: "Circle Iris" }, t);
+        tl.to("#info-bar", { opacity: 1, duration: 0.3 }, t);
+        t += 1.5;
+        var T = t;
+        demos[0].time = T;
+        tl.set("#scene2", { opacity: 1, clipPath: "circle(0% at 50% 50%)" }, T);
+        tl.to(
+          "#scene2",
+          { clipPath: "circle(75% at 50% 50%)", duration: 0.5, ease: "power2.out" },
+          T,
+        );
+        tl.set("#scene1", { opacity: 0 }, T + 0.5);
+        tl.set("#scene2", { clipPath: "none" }, T + 0.55);
+        t = T + 1.5;
+        tl.to("#info-bar", { opacity: 0, duration: 0.3 }, t);
+        t += 0.5;
+
+        /* ── Demo 2: Diamond Iris ── */
+        resetScenes();
+        tl.set("#info-text", { textContent: "Diamond Iris" }, t);
+        tl.to("#info-bar", { opacity: 1, duration: 0.3 }, t);
+        t += 1.5;
+        T = t;
+        demos[1].time = T;
+        tl.set(
+          "#scene2",
+          { opacity: 1, clipPath: "polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%)" },
+          T,
+        );
+        tl.to(
+          "#scene2",
+          {
+            clipPath: "polygon(50% -20%, 120% 50%, 50% 120%, -20% 50%)",
+            duration: 0.5,
+            ease: "power2.out",
+          },
+          T,
+        );
+        tl.set("#scene1", { opacity: 0 }, T + 0.5);
+        tl.set("#scene2", { clipPath: "none" }, T + 0.55);
+        t = T + 1.5;
+        tl.to("#info-bar", { opacity: 0, duration: 0.3 }, t);
+        t += 0.5;
+
+        /* ── Demo 3: Diagonal Split ── */
+        resetScenes();
+        tl.set("#info-text", { textContent: "Diagonal Split" }, t);
+        tl.to("#info-bar", { opacity: 1, duration: 0.3 }, t);
+        t += 1.5;
+        T = t;
+        demos[2].time = T;
+        tl.set("#scene2", { opacity: 1, zIndex: 1 }, T);
+        tl.set(
+          "#scene1",
+          { zIndex: 10, clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)" },
+          T,
+        );
+        tl.to(
+          "#scene1",
+          {
+            clipPath: "polygon(60% 0%, 100% 0%, 100% 40%, 60% 0%)",
+            duration: 0.5,
+            ease: "power3.inOut",
+          },
+          T,
+        );
+        tl.set("#scene1", { opacity: 0, zIndex: 1, clipPath: "none" }, T + 0.55);
+        tl.set("#scene2", { zIndex: 2 }, T + 0.55);
+        t = T + 1.5;
+        tl.to("#info-bar", { opacity: 0, duration: 0.3 }, t);
+        t += 0.5;
+
+        /* ── Outro (3s) ── */
+        tl.set("#outro-card", { opacity: 1 }, t);
+        tl.to("#outro-card", { opacity: 0, duration: 0.5 }, t + 2.5);
+
+        window.__timelines["main"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/transitions-scale/transitions-scale.html b/docs/public/catalog/blocks/transitions-scale/transitions-scale.html
new file mode 100644
index 0000000000..797c6b7edf
--- /dev/null
+++ b/docs/public/catalog/blocks/transitions-scale/transitions-scale.html
@@ -0,0 +1,350 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+      }
+      .scene {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      .scene-inner {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+      }
+      .info-bar {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        z-index: 100;
+        background: rgba(0, 0, 0, 0.88);
+        padding: 24px 60px;
+        display: flex;
+        align-items: center;
+        gap: 40px;
+        opacity: 0;
+      }
+      .info-num {
+        font-size: 14px;
+        font-weight: 700;
+        color: #e07a5f;
+        letter-spacing: 0.1em;
+      }
+      .info-name {
+        font-size: 20px;
+        font-weight: 700;
+        color: #fff;
+      }
+      .info-desc {
+        font-size: 14px;
+        color: rgba(255, 255, 255, 0.5);
+      }
+      #title-card {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        background: #0d1b2a;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        z-index: 50;
+      }
+      #outro-card {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        background: #0d1b2a;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        z-index: 50;
+        opacity: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      data-composition-id="main"
+      data-start="0"
+      data-duration="15"
+      data-width="1920"
+      data-height="1080"
+    >
+      <!-- Title Card -->
+      <div id="title-card">
+        <div
+          id="title-label"
+          style="
+            font-size: 14px;
+            font-weight: 700;
+            color: #e07a5f;
+            letter-spacing: 0.2em;
+            text-transform: uppercase;
+            opacity: 0;
+          "
+        >
+          TRANSITION CATALOG
+        </div>
+        <div
+          id="title-main"
+          style="font-size: 72px; font-weight: 900; color: #fff; margin-top: 16px; opacity: 0"
+        >
+          Scale Transitions
+        </div>
+        <div
+          id="title-count"
+          style="
+            font-size: 24px;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.4);
+            margin-top: 12px;
+            opacity: 0;
+          "
+        >
+          2 transitions
+        </div>
+      </div>
+
+      <!-- Scene A -->
+      <div id="scene1" class="scene" style="z-index: 1">
+        <div class="scene-inner" id="s1" style="background: #1b263b">
+          <div style="font-size: 200px; font-weight: 900; color: rgba(255, 255, 255, 0.08)">
+            ONE
+          </div>
+          <div
+            style="
+              font-size: 32px;
+              font-weight: 700;
+              color: #778da9;
+              letter-spacing: 0.15em;
+              margin-top: -20px;
+            "
+          >
+            SCENE A
+          </div>
+        </div>
+      </div>
+
+      <!-- Scene B -->
+      <div id="scene2" class="scene" style="z-index: 2; opacity: 0">
+        <div class="scene-inner" id="s2" style="background: #e07a5f">
+          <div style="font-size: 200px; font-weight: 900; color: rgba(255, 255, 255, 0.15)">
+            TWO
+          </div>
+          <div
+            style="
+              font-size: 32px;
+              font-weight: 700;
+              color: #fff;
+              letter-spacing: 0.15em;
+              margin-top: -20px;
+            "
+          >
+            SCENE B
+          </div>
+        </div>
+      </div>
+
+      <!-- Info Bars -->
+      <div id="info-1" class="info-bar">
+        <div class="info-num">01</div>
+        <div class="info-name">Zoom Through</div>
+        <div class="info-desc">Use a zoom through transition</div>
+      </div>
+      <div id="info-2" class="info-bar">
+        <div class="info-num">02</div>
+        <div class="info-name">Zoom Out</div>
+        <div class="info-desc">Use a zoom out transition</div>
+      </div>
+
+      <!-- Outro Card -->
+      <div id="outro-card">
+        <div
+          id="outro-label"
+          style="
+            font-size: 14px;
+            font-weight: 700;
+            color: #e07a5f;
+            letter-spacing: 0.2em;
+            text-transform: uppercase;
+            opacity: 0;
+          "
+        >
+          SCALE TRANSITIONS
+        </div>
+        <div
+          id="outro-main"
+          style="font-size: 56px; font-weight: 900; color: #fff; margin-top: 16px; opacity: 0"
+        >
+          2 Transitions
+        </div>
+      </div>
+    </div>
+
+    <script>
+      (function () {
+        var tl = gsap.timeline({ paused: true });
+        var t = 0;
+
+        // === TITLE CARD (3s) ===
+        tl.to("#title-label", { opacity: 1, y: 0, duration: 0.4, ease: "power2.out" }, t + 0.3);
+        tl.fromTo(
+          "#title-main",
+          { opacity: 0, y: 20 },
+          { opacity: 1, y: 0, duration: 0.5, ease: "power2.out" },
+          t + 0.6,
+        );
+        tl.fromTo(
+          "#title-count",
+          { opacity: 0 },
+          { opacity: 1, duration: 0.4, ease: "power2.out" },
+          t + 1.0,
+        );
+        tl.to("#title-card", { opacity: 0, duration: 0.4, ease: "power2.inOut" }, t + 2.4);
+        t += 3;
+
+        function resetScenes() {
+          tl.set(
+            "#scene1",
+            {
+              opacity: 1,
+              x: 0,
+              y: 0,
+              scale: 1,
+              scaleX: 1,
+              rotation: 0,
+              filter: "none",
+              clipPath: "none",
+              zIndex: 1,
+              skewX: 0,
+            },
+            t,
+          );
+          tl.set(
+            "#scene2",
+            {
+              opacity: 0,
+              x: 0,
+              y: 0,
+              scale: 1,
+              scaleX: 1,
+              rotation: 0,
+              filter: "none",
+              clipPath: "none",
+              zIndex: 2,
+              skewX: 0,
+            },
+            t,
+          );
+          tl.set(
+            "#s1",
+            {
+              opacity: 1,
+              x: 0,
+              y: 0,
+              scale: 1,
+              rotation: 0,
+              filter: "none",
+              skewX: 0,
+              scaleX: 1,
+              transformOrigin: "50% 50%",
+            },
+            t,
+          );
+          tl.set(
+            "#s2",
+            {
+              opacity: 1,
+              x: 0,
+              y: 0,
+              scale: 1,
+              rotation: 0,
+              filter: "none",
+              skewX: 0,
+              scaleX: 1,
+              transformOrigin: "50% 50%",
+            },
+            t,
+          );
+        }
+
+        // === TRANSITION 1: Zoom Through ===
+        resetScenes();
+        tl.to("#info-1", { opacity: 1, duration: 0.3 }, t + 0.2);
+        var T = t + 1.5;
+        tl.to(
+          "#s1",
+          { scale: 2.5, opacity: 0, filter: "blur(8px)", duration: 0.4, ease: "power3.in" },
+          T,
+        );
+        tl.set("#scene2", { opacity: 1 }, T);
+        tl.fromTo(
+          "#s2",
+          { scale: 0.5, opacity: 0, filter: "blur(8px)" },
+          { scale: 1, opacity: 1, filter: "blur(0px)", duration: 0.4, ease: "power3.out" },
+          T + 0.15,
+        );
+        t = T + 1.5 + 1.0;
+        tl.to("#info-1", { opacity: 0, duration: 0.2 }, t);
+        t += 0.5;
+
+        // === TRANSITION 2: Zoom Out ===
+        resetScenes();
+        tl.to("#info-2", { opacity: 1, duration: 0.3 }, t + 0.2);
+        T = t + 1.5;
+        tl.set("#scene2", { opacity: 1, zIndex: 1 }, T);
+        tl.set("#scene1", { zIndex: 10, transformOrigin: "50% 50%" }, T);
+        tl.to("#s1", { scale: 0.3, opacity: 0, duration: 0.4, ease: "power3.in" }, T);
+        tl.set("#scene1", { zIndex: 1 }, T + 0.5);
+        tl.set("#scene2", { zIndex: 2 }, T + 0.5);
+        t = T + 1.5 + 1.0;
+        tl.to("#info-2", { opacity: 0, duration: 0.2 }, t);
+        t += 0.5;
+
+        // === OUTRO (3s) ===
+        tl.set("#scene1", { opacity: 0 }, t);
+        tl.set("#scene2", { opacity: 0 }, t);
+        tl.to("#outro-card", { opacity: 1, duration: 0.4, ease: "power2.inOut" }, t);
+        tl.to("#outro-label", { opacity: 1, duration: 0.4, ease: "power2.out" }, t + 0.3);
+        tl.fromTo(
+          "#outro-main",
+          { opacity: 0, y: 20 },
+          { opacity: 1, y: 0, duration: 0.5, ease: "power2.out" },
+          t + 0.6,
+        );
+        tl.to("#outro-card", { opacity: 0, duration: 0.4, ease: "power2.inOut" }, t + 2.4);
+
+        window.__timelines = window.__timelines || {};
+        window.__timelines["main"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/ui-3d-reveal/ui-3d-reveal.html b/docs/public/catalog/blocks/ui-3d-reveal/ui-3d-reveal.html
new file mode 100644
index 0000000000..ba6237c4d8
--- /dev/null
+++ b/docs/public/catalog/blocks/ui-3d-reveal/ui-3d-reveal.html
@@ -0,0 +1,2764 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>ui-3d-reveal</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=block"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background-color: #0a0a0f;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      data-composition-id="ui-3d-reveal"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="13"
+    >
+      <!-- Background: Figma outer canvas dark -->
+      <div class="bg-base"></div>
+      <div class="bg-glow" id="bgGlow"></div>
+
+      <!-- ══════════════════════════════════════════
+         INTRO: Figma logo stroke draw + fill
+    ══════════════════════════════════════════ -->
+      <div class="intro-layer" id="introLayer">
+        <svg class="intro-svg" viewBox="0 0 1920 1080" xmlns="http://www.w3.org/2000/svg">
+          <g class="intro-logo" transform="translate(865, 397.5)">
+            <!-- Fill layer -->
+            <path
+              class="il-fill il-fill-1"
+              d="M95 0H47.5C21.27 0 0 21.27 0 47.5S21.27 95 47.5 95H95V0Z"
+              fill="#F24E1E"
+              opacity="0"
+            />
+            <path
+              class="il-fill il-fill-2"
+              d="M95 0V95H142.5C168.73 95 190 73.73 190 47.5S168.73 0 142.5 0H95Z"
+              fill="#FF7262"
+              opacity="0"
+            />
+            <path
+              class="il-fill il-fill-3"
+              d="M95 95H47.5C21.27 95 0 116.27 0 142.5S21.27 190 47.5 190H95V95Z"
+              fill="#A259FF"
+              opacity="0"
+            />
+            <circle
+              class="il-fill il-fill-4"
+              cx="142.5"
+              cy="142.5"
+              r="47.5"
+              fill="#1ABCFE"
+              opacity="0"
+            />
+            <path
+              class="il-fill il-fill-5"
+              d="M47.5 190C21.27 190 0 211.27 0 237.5S21.27 285 47.5 285 95 263.73 95 237.5V190H47.5Z"
+              fill="#0ACF83"
+              opacity="0"
+            />
+            <!-- Stroke layer -->
+            <path
+              class="il-stroke il-stroke-1"
+              d="M95 0H47.5C21.27 0 0 21.27 0 47.5S21.27 95 47.5 95H95V0Z"
+              fill="none"
+              stroke="#F24E1E"
+              stroke-width="2"
+            />
+            <path
+              class="il-stroke il-stroke-2"
+              d="M95 0V95H142.5C168.73 95 190 73.73 190 47.5S168.73 0 142.5 0H95Z"
+              fill="none"
+              stroke="#FF7262"
+              stroke-width="2"
+            />
+            <path
+              class="il-stroke il-stroke-3"
+              d="M95 95H47.5C21.27 95 0 116.27 0 142.5S21.27 190 47.5 190H95V95Z"
+              fill="none"
+              stroke="#A259FF"
+              stroke-width="2"
+            />
+            <circle
+              class="il-stroke il-stroke-4"
+              cx="142.5"
+              cy="142.5"
+              r="47.5"
+              fill="none"
+              stroke="#1ABCFE"
+              stroke-width="2"
+            />
+            <path
+              class="il-stroke il-stroke-5"
+              d="M47.5 190C21.27 190 0 211.27 0 237.5S21.27 285 47.5 285 95 263.73 95 237.5V190H47.5Z"
+              fill="none"
+              stroke="#0ACF83"
+              stroke-width="2"
+            />
+          </g>
+        </svg>
+      </div>
+
+      <!-- 3D scene -->
+      <div class="scene" id="scene">
+        <div class="card-glow" id="cardGlow"></div>
+
+        <div class="card-wrapper" id="cardWrapper">
+          <!-- ═══════════════════════════════════════
+             FRONT FACE — Figma Interface
+        ═══════════════════════════════════════ -->
+          <div class="ui-card" id="uiCard">
+            <!-- ── TOOLBAR ── -->
+            <div class="fig-toolbar" id="figToolbar">
+              <!-- Left: logo + tools -->
+              <div class="tb-left">
+                <div class="fig-logo">
+                  <svg width="18" height="26" viewBox="0 0 18 26" fill="none">
+                    <rect x="0" y="0" width="9" height="9" rx="4.5" fill="#F24E1E" />
+                    <rect x="9" y="0" width="9" height="9" rx="4.5" fill="#FF7262" />
+                    <rect x="0" y="8.5" width="9" height="9" rx="4.5" fill="#A259FF" />
+                    <circle cx="13.5" cy="13" r="4.5" fill="#1ABCFE" />
+                    <rect x="0" y="17" width="9" height="9" rx="4.5" fill="#0ACF83" />
+                  </svg>
+                </div>
+                <div class="tool-divider"></div>
+                <div class="tool-group">
+                  <div class="tool-btn active" title="Move (V)">
+                    <svg viewBox="0 0 16 16" fill="none" width="14" height="14">
+                      <path d="M2 2l5 12 2-4 4-2L2 2z" fill="currentColor" />
+                    </svg>
+                  </div>
+                  <div class="tool-btn" title="Scale (K)">
+                    <svg viewBox="0 0 16 16" fill="none" width="14" height="14">
+                      <path
+                        d="M3 3l10 10M10 3h3v3M3 10H6"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        stroke-linecap="round"
+                      />
+                    </svg>
+                  </div>
+                  <div class="tool-divider"></div>
+                  <div class="tool-btn" title="Frame (F)">
+                    <svg viewBox="0 0 16 16" fill="none" width="14" height="14">
+                      <rect
+                        x="2"
+                        y="5"
+                        width="12"
+                        height="9"
+                        rx="1"
+                        stroke="currentColor"
+                        stroke-width="1.4"
+                      />
+                      <path
+                        d="M5 5V3M11 5V3M5 14v2M11 14v2M2 8H0M14 8h2"
+                        stroke="currentColor"
+                        stroke-width="1.4"
+                        stroke-linecap="round"
+                      />
+                    </svg>
+                  </div>
+                  <div class="tool-btn" title="Rectangle (R)">
+                    <svg viewBox="0 0 16 16" fill="none" width="14" height="14">
+                      <rect
+                        x="2"
+                        y="4"
+                        width="12"
+                        height="9"
+                        rx="1.5"
+                        stroke="currentColor"
+                        stroke-width="1.4"
+                      />
+                    </svg>
+                  </div>
+                  <div class="tool-btn" title="Text (T)">
+                    <svg viewBox="0 0 16 16" fill="none" width="14" height="14">
+                      <path
+                        d="M2 4h12M8 4v9M5 13h6"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        stroke-linecap="round"
+                      />
+                    </svg>
+                  </div>
+                  <div class="tool-btn" title="Pen (P)">
+                    <svg viewBox="0 0 16 16" fill="none" width="14" height="14">
+                      <path
+                        d="M3 13L8 3l5 10M5.5 8.5h5"
+                        stroke="currentColor"
+                        stroke-width="1.4"
+                        stroke-linecap="round"
+                      />
+                    </svg>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Center: file breadcrumb -->
+              <div class="tb-center">
+                <span class="file-name">App Redesign</span>
+                <span class="file-chevron">›</span>
+                <span class="file-page">Design System</span>
+                <svg class="file-arrow" viewBox="0 0 10 6" width="10" height="6" fill="none">
+                  <path
+                    d="M1 1l4 4 4-4"
+                    stroke="currentColor"
+                    stroke-width="1.4"
+                    stroke-linecap="round"
+                  />
+                </svg>
+              </div>
+
+              <!-- Right: mode tabs + share + avatars -->
+              <div class="tb-right">
+                <div class="mode-tabs">
+                  <span class="mode-tab">Design</span>
+                  <span class="mode-tab active">Dev</span>
+                </div>
+                <div class="share-btn">
+                  <svg viewBox="0 0 16 16" fill="none" width="12" height="12">
+                    <path
+                      d="M4 8H12M9 5l3 3-3 3"
+                      stroke="white"
+                      stroke-width="1.5"
+                      stroke-linecap="round"
+                    />
+                  </svg>
+                  Share
+                </div>
+                <div class="avatar-cluster">
+                  <div class="fig-avatar" style="background: #a259ff; z-index: 3">S</div>
+                  <div
+                    class="fig-avatar"
+                    style="background: #f24e1e; z-index: 2; margin-left: -8px"
+                  >
+                    J
+                  </div>
+                  <div
+                    class="fig-avatar"
+                    style="background: #1abcfe; z-index: 1; margin-left: -8px"
+                  >
+                    K
+                  </div>
+                </div>
+                <div class="present-btn">▶</div>
+              </div>
+            </div>
+
+            <!-- ── BODY ── -->
+            <div class="fig-body">
+              <!-- LAYERS PANEL -->
+              <div class="fig-layers" id="figLayers">
+                <div class="panel-tabs">
+                  <span class="ptab active">Layers</span>
+                  <span class="ptab">Assets</span>
+                </div>
+
+                <div class="layer-search">
+                  <svg viewBox="0 0 14 14" fill="none" width="12" height="12">
+                    <circle cx="6" cy="6" r="4.5" stroke="currentColor" stroke-width="1.3" />
+                    <path
+                      d="M9.5 9.5l2.5 2.5"
+                      stroke="currentColor"
+                      stroke-width="1.3"
+                      stroke-linecap="round"
+                    />
+                  </svg>
+                  <span class="search-placeholder">Search layers</span>
+                </div>
+
+                <div class="layer-list">
+                  <div class="layer-item page-item">
+                    <svg class="li-icon" viewBox="0 0 12 12" fill="none" width="12" height="12">
+                      <rect
+                        x="1"
+                        y="1"
+                        width="8"
+                        height="10"
+                        rx="1"
+                        stroke="currentColor"
+                        stroke-width="1.2"
+                      />
+                      <path
+                        d="M3 4h5M3 7h3"
+                        stroke="currentColor"
+                        stroke-width="1.2"
+                        stroke-linecap="round"
+                      />
+                    </svg>
+                    <span>Page 1</span>
+                  </div>
+
+                  <div class="layer-item frame-item expanded">
+                    <svg class="li-collapse" viewBox="0 0 8 8" width="8" height="8" fill="none">
+                      <path
+                        d="M2 3l2 2 2-2"
+                        stroke="currentColor"
+                        stroke-width="1.2"
+                        stroke-linecap="round"
+                      />
+                    </svg>
+                    <svg
+                      class="li-icon frame-icon"
+                      viewBox="0 0 12 12"
+                      fill="none"
+                      width="12"
+                      height="12"
+                    >
+                      <rect
+                        x="2"
+                        y="3"
+                        width="8"
+                        height="6"
+                        stroke="currentColor"
+                        stroke-width="1.2"
+                      />
+                      <path
+                        d="M4 3V1M8 3V1M4 9v2M8 9v2M2 6H0M10 6h2"
+                        stroke="currentColor"
+                        stroke-width="1.2"
+                        stroke-linecap="round"
+                      />
+                    </svg>
+                    <span>HeyGen — Home</span>
+                  </div>
+
+                  <div class="layer-item group-item indent-1">
+                    <svg class="li-collapse" viewBox="0 0 8 8" width="8" height="8" fill="none">
+                      <path
+                        d="M2 3l2 2 2-2"
+                        stroke="currentColor"
+                        stroke-width="1.2"
+                        stroke-linecap="round"
+                      />
+                    </svg>
+                    <svg class="li-icon" viewBox="0 0 12 12" fill="none" width="12" height="12">
+                      <rect
+                        x="1"
+                        y="1"
+                        width="10"
+                        height="10"
+                        rx="1"
+                        stroke="currentColor"
+                        stroke-width="1.2"
+                      />
+                    </svg>
+                    <span>Navigation</span>
+                  </div>
+
+                  <div class="layer-item comp-item indent-2">
+                    <svg
+                      class="li-icon comp-icon"
+                      viewBox="0 0 12 12"
+                      fill="none"
+                      width="12"
+                      height="12"
+                    >
+                      <path
+                        d="M6 1L11 6 6 11 1 6z"
+                        fill="none"
+                        stroke="#A259FF"
+                        stroke-width="1.2"
+                      />
+                    </svg>
+                    <span>Logo / Mark</span>
+                  </div>
+
+                  <div class="layer-item text-item indent-2">
+                    <svg class="li-icon" viewBox="0 0 12 12" fill="none" width="12" height="12">
+                      <path
+                        d="M2 3h8M6 3v7M3 10h6"
+                        stroke="currentColor"
+                        stroke-width="1.2"
+                        stroke-linecap="round"
+                      />
+                    </svg>
+                    <span>Nav Links</span>
+                  </div>
+
+                  <div class="layer-item comp-item indent-2 selected-layer" id="selectedLayer">
+                    <svg
+                      class="li-icon comp-icon"
+                      viewBox="0 0 12 12"
+                      fill="none"
+                      width="12"
+                      height="12"
+                    >
+                      <path
+                        d="M6 1L11 6 6 11 1 6z"
+                        fill="none"
+                        stroke="#A259FF"
+                        stroke-width="1.2"
+                      />
+                    </svg>
+                    <span>Create Card</span>
+                  </div>
+
+                  <div class="layer-item group-item indent-1 collapsed">
+                    <svg
+                      class="li-collapse"
+                      viewBox="0 0 8 8"
+                      width="8"
+                      height="8"
+                      fill="none"
+                      style="transform: rotate(-90deg)"
+                    >
+                      <path
+                        d="M2 3l2 2 2-2"
+                        stroke="currentColor"
+                        stroke-width="1.2"
+                        stroke-linecap="round"
+                      />
+                    </svg>
+                    <svg class="li-icon" viewBox="0 0 12 12" fill="none" width="12" height="12">
+                      <rect
+                        x="1"
+                        y="1"
+                        width="10"
+                        height="10"
+                        rx="1"
+                        stroke="currentColor"
+                        stroke-width="1.2"
+                      />
+                    </svg>
+                    <span>Hero</span>
+                  </div>
+
+                  <div class="layer-item group-item indent-1 collapsed">
+                    <svg
+                      class="li-collapse"
+                      viewBox="0 0 8 8"
+                      width="8"
+                      height="8"
+                      fill="none"
+                      style="transform: rotate(-90deg)"
+                    >
+                      <path
+                        d="M2 3l2 2 2-2"
+                        stroke="currentColor"
+                        stroke-width="1.2"
+                        stroke-linecap="round"
+                      />
+                    </svg>
+                    <svg class="li-icon" viewBox="0 0 12 12" fill="none" width="12" height="12">
+                      <rect
+                        x="1"
+                        y="1"
+                        width="10"
+                        height="10"
+                        rx="1"
+                        stroke="currentColor"
+                        stroke-width="1.2"
+                      />
+                    </svg>
+                    <span>Feature Grid</span>
+                  </div>
+
+                  <div class="layer-item group-item indent-1 collapsed">
+                    <svg
+                      class="li-collapse"
+                      viewBox="0 0 8 8"
+                      width="8"
+                      height="8"
+                      fill="none"
+                      style="transform: rotate(-90deg)"
+                    >
+                      <path
+                        d="M2 3l2 2 2-2"
+                        stroke="currentColor"
+                        stroke-width="1.2"
+                        stroke-linecap="round"
+                      />
+                    </svg>
+                    <svg class="li-icon" viewBox="0 0 12 12" fill="none" width="12" height="12">
+                      <rect
+                        x="1"
+                        y="1"
+                        width="10"
+                        height="10"
+                        rx="1"
+                        stroke="currentColor"
+                        stroke-width="1.2"
+                      />
+                    </svg>
+                    <span>Footer</span>
+                  </div>
+                </div>
+
+                <div class="page-bar">
+                  <div class="pbar-tab active">Design System</div>
+                  <div class="pbar-tab">Landing</div>
+                  <div class="pbar-add">+</div>
+                </div>
+              </div>
+
+              <!-- CANVAS -->
+              <div class="fig-canvas" id="figCanvas">
+                <div class="canvas-frame-label">HeyGen — Home</div>
+
+                <!-- The artboard / HeyGen app.heygen.com — light mode -->
+                <div class="artboard" id="artboard">
+                  <!-- ══ LEFT ICON NAV (56px) ══ -->
+                  <div class="hg-icnav">
+                    <div class="hg-iclogo">
+                      <img
+                        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAYAAACohjseAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAOKADAAQAAAABAAAAOAAAAAANV2hTAAAM+0lEQVRoBe2ZeZAU1R3Hf6+n59zZ2WWQQ0MUgqCoq6iIgIKYAgoTExMPCGI8qqIUJpZHLINltNQylWiViUlKqxRTKB6UWwWFURQPXJVDUTSAinIootzsxVw93dPdL9/f6+ndddwZd5a1yj/2Vb199/F53987ppeo3/WvQP8K9K9A/wr8EFfgk3VJWvPC70jKgD+9hqVy08zlcsXcu2XCz/u+Q9HnAzQ2Rmnk0JVBcicTSaG1fva5OX3+8TzOyBekPTlJAWmR7WTpuacvFFf0+fglHWol6SNLfrz2LP34wQeD5EypEaaIaxZFaupHDFy+YBp37OTojVXtRIEI6aGBNPf3K+XBG16Spx/ZoJVb9x3g+tWnxc3smrgw43GtQBFhwlsUi8W1YDT5EE/jy9liRsQh13W9SQVqaVBNiN677Xl5Z+Vp9r60bwCbmuK1gdzbcS0fipBJYcpTGHBBhCGkY/H4Cckld/xYTTNPn77a1jlhVjOZoHsfeEmu6cztu1ifANbHM5viupUIQ7UwzJJ9qBgPijxFaiP6oPrAczzt7bPEKXUOSVYxg9HTOAX4GIrE6JxHXpctT66U4/sOj+iIAQe+v+yVRND6CQOFoBorxsoFNQ6RB9ggyqI1sTP8ExXVDrxSVFEAkEGz8BGNknqI1j79prynryCPCDC5ftkDdSFjRhgqKSiGBBiD+mmG1FEeqA+Hz3r51uU88RtH0LEJmyTHWUH27BjUFKTXW3TX8ib5bmOXK8arUf3fXgMOWf/snLqwdWuUlSqqx6rpSjXOAySXMTCrGEBYE5nKU5w3ThR0hzIvtHZOmOGUA3YO8YRBZydfp+ZlTfLczlrVx/xuq2o5ZF1jQ0I3FkcDOcFAvM88k0QIWF15T1Ud5hoommworsWnNF7xbx5sgkPDB+dI7jQ85TgvCyVz8NJBiDTWpP7otHxz+Yvyb1zeG1c14KCmh+N1kfbVsbCls/kxUJAVUqboKcZQCrSoroojL5nLky6dCE/0P7NEa9SmhbtbSO4xPTPNFN88OSHJwMykK0kWKDDMlH/671L3g8a7ZahayKoB62sCGxOhXJ2nVBEEk+d95oP4cAyqs9kKQ4VHWcJ9Y/aSa/1Jbpgj5h3l0kO7m0m+nSECF6WViQrAeSryIaTZRMcZ8ozEaGpe9JSc6rfvSVgV4Inv/mNlXU1+pLfXfJUQFpXyYLw0AytTVfAmDfgqTaaZ3Vg6qXdmi1tGmTQhnCH30XaSBh89UI5NFcjKVHOSM4mG2m7tKOmuemyx83eV0YM/qpse1KMx7zxwf20t3aYJV03cGx9HHgBgTPCIAwqBSnaNR/ZkqNCSbXvxsqXJSmOd95zcaAXp1B3o5Ryd6HL0Gy0QJaFgsCApCFW5eweyfGZra+deLb7zAOoR4Jg1f51dP8BeogtX8AisjHJYWVaN+diU+DBRM0ChAufet6ZlPms0vzb7xcFeo8p/N2yQwfu+oBVtQZqiB3DjoO9deLSfDMhbspL4Z4i3nOhaik2zr9LGVurxOwEb1t3bEIu6H8ailo6LWvXVAciwSkFvCF0DIKpI1HN3p8hoTrua7b62au7rMytNolJZU5OMPHWQHmwN0+U5nRImlG0TUgzJSbEgRbRZaM/cfGX5XyUVAac2Xh83RiZ2x2JaXYfJYTZ8iDCEUrOLauahNkrvOezaOdMICu2tdVeu/nmlyZcrG7u56epkMHxJi+00bmqY/FRpvcsfl1P2D6CFIkLDwyna8NIccU5pHT9dEXDSezdvrUmI0Wx+DFgUEGbpKcWdFHIZOrRjt7Qylilsua22JnLB2jlr9/oDVBuO/2jV50Pq3RHtgcNC4FYwCpFC2rSa05bcmnHD6w5njUU06SJs0565soAT3rr+vvqjxR2iwyw7DxByLdq7dRdl21Kmlcvvj+iB+Vuu2/KyP+SKhw8OPYYijyQjofEREaiz8LRut52WVst59rwbav/s1ysNj12/7KMRR4tTHDxz+Jnsqqcyrgzsbldq2IkBMt0wZU3XMB13d8HRNxYovKJlzMQnS/vy02UBp6y75mDdIDFIVYQ1asKm5l37qG1/m51Pp9twJ/9z+/ytf/E7arp7Z2TQ0IH/SoZCM+qDwWFhVyte234NIgu325ac8XU0Hpt40m/Fvs4SxF5ddOfY4TX31MQDOFd0D473M6D4Scqhq75+4PIvlnMosU8OZZ3/7Rs96Yxv9FdMYMt27wIil9Dwyy7TmqJDX+53cql0RhQKq7Zfv+2Sri12Pm7cVavrv4kFAqPCLl5u7Io/aLvW43iIhDY2Fjvu47zxIfbwMCEES6VcfSxwUywe4kuoQy0+miWUc6GgendDDoZUirLCiPP2iYSCDX4/pWFZwJbPv1i8d4v5K9uydkV1/cId135ywG+854nMNXEKzw/pgdNCrghhxLJQfhsOfe5RkejQ9xfl2KRnqPKVz0wbnIwOcLDnlGJKNU89z0xZKZzMrqekb7JYIHIA77h4GZRxZQE3X/H+dWjDXjljsfwpPhfdrkkxKeBSjO8n9N5jx3B8QfOe4KZH6cGJfmPh5m9MJAbilmX1PMv2IDy1GI7TvpmqRVD9eHvTtPPNfl+lYVlArggzClhL6AlN0i9hTAlhl92ypf12pJVqaObA465WJoXHCSWCwZo1j7Yee+685Fe6rv9IinDR/Lw95pshd+TF/YOGr+MiMB8+8GZBWQNX/ZarCGgvoY/0Ao35VqseZEgAKZF9MLRhBdnZCAEpDCEnIPmVoGDQ4R2KBE+YzdLfXwzn8AmKUEJhH07VQ37eLBTaA7GbuN/uXFnAzPNyCKWqh+sAK47GVszC82FQYEBQF4pxKBdS1TQdm0hT+0kdItiDXN8uXg3qkGFAtGV4/xR1cCBl86kH6eRT08XhvhWUBXQ1GoAxqnIMx2bIUqjtyWn2XcC4TCmI0CQ7yNWhDn7jhpR63j7zpOa4Uzw1uZ5StnhFcDybTm9Ln3zq7VxWznk9dVOa+IX4zFGv524KS7J4n/lwvNfYs0oMp9TiECMpMIQcZ69rAfyFw2raEp+LAcmhCzAb8YLKQxrqcZzzbABy3DRt27Lz01T7Cn+8AcpUwKn8RJkilY3fFhjc21smevLV4kOEYQzYhw/DoYX6nMdhAYelVXA9ExWaUlDB8Z4DiINvBL6qDMVpW3mUQdVcLrvAaGj4utL8uKwiYHS2mG9FaGdpJ75ibIZ8cHDIUBxXymHyCgh5vjn66uGrGVkMy+0CQpkoFHQZRh0orBIUYpW+oRyuW6Ui9mU2k95gNJzwILr/Tld2D/otI4JOzEZpdSRP4/nuY1NkE+TDwj88lHKcB8+A6kApxrkfhu3I8645/jwIU8TdACc1fpoVT08VohIG40uczVVd5gDj/s28aRgH3OncricOrSo7MUtY8Vni7FSU7sdvMZcPEfZKObRmOGVyiCv1EKo08n3V2BwZiM1YeW7DKgeKJkpBxze/TuU8xSwoyd4BqIlDwUpnrqXzR7RXnnVnKYbsmUteJha0xmgG1MwwHIMxUA4TZZAOGMQ5T5koQjZFhsvCGBmU89X+Q+gS7A5OQl4GLEgd/TIYDhJYL38nt5C2sZNMQBqH215zTh/+TM9m7NXCMD13w34tVrVLGtYapU954mqyDIo4q8aQHPp7jMF8GAWKcl9FTtv+BnGFZJUK6nCBSoBiIHy+Aiwuc4RWLnuYGo75Wc9n69XEMNW5kbPE4REXi5PaYvSYGcRnS54oe1arCKuUYrXgfUgGUwuBkM2TAWVQVy85vtMKgOK9ZkK9PODwHVylCzhBpYN3gJGahY2srtlqZoxheudGXyTmpWN0qYH/lzFYVxCG8RVTMAzEsMjvKON0kL94shPSxtFvwiwZjKFgvsqr4raWJTT22FdVvMo/vQbkcRouEMtagzQiE6NdJiac4XuPYYogrBjnMTz7Dljkc7yg4xkPxy8ZfEXFYeKBcV6HS6X20+lD53akq4wcESCPNWWm2DfuAjE8E6WlecAwnG+KSq0icFcFUzhw8qgno5p60eF3MJ6Z3UylYLmUyvbqw5W/Dt306hdVF54/XVxqRui6fJgKHWaI3pVZArIDFnG+R9UrKKypPchPtW5da/tDNPGYD7st62FmmZ572Lqk2sypYmE2RKdYUTrAQOqQQeibJqumHgnFdkIvAqorvKSztvYdNG7IH0tyq072KSCPfvFksQ1+aD5Gq/gjLcP5YKxaV+eKIqDo8vWYKxhGjkL2eV3r9jbe54D+ROZOEtPwWL8d54ZTCqbqANaJkmd+heD9ZOS8/ZhKtWLfTaYTB+31+zqSsGRNj6Sr7tsu/ECeiXfYcvxcGMbvV9/hl+D2G8aL0X6aVm8+kwI102nSyF7/s7Ojry6R7x3QH+vhD+RMfBO8Ck+8ITCb9/4wTizwy/rD/hXoX4H+FehfgR/qCvwfTSeznkI0t8oAAAAASUVORK5CYII="
+                        width="30"
+                        height="30"
+                        style="display: block"
+                        alt="HeyGen"
+                      />
+                    </div>
+                    <div class="hg-icitem">
+                      <svg viewBox="0 0 16 16" fill="none" width="16" height="16">
+                        <circle cx="8" cy="5.5" r="2.8" stroke="currentColor" stroke-width="1.3" />
+                        <path
+                          d="M2 14.5c0-3.31 2.69-6 6-6s6 2.69 6 6"
+                          stroke="currentColor"
+                          stroke-width="1.3"
+                          stroke-linecap="round"
+                        />
+                      </svg>
+                      <span>Avatar</span>
+                    </div>
+                    <div class="hg-icitem hg-icactive">
+                      <div class="hg-icbg">
+                        <svg viewBox="0 0 16 16" fill="none" width="15" height="15">
+                          <circle cx="8" cy="5.5" r="2.5" stroke="white" stroke-width="1.3" />
+                          <path
+                            d="M2.5 14c0-3.04 2.46-5.5 5.5-5.5s5.5 2.46 5.5 5.5"
+                            stroke="white"
+                            stroke-width="1.3"
+                            stroke-linecap="round"
+                          />
+                        </svg>
+                      </div>
+                      <span>Video Agent</span>
+                    </div>
+                    <div class="hg-icitem">
+                      <svg viewBox="0 0 16 16" fill="none" width="16" height="16">
+                        <path
+                          d="M3 4l3 8M10 4l3 8M6 10h4"
+                          stroke="currentColor"
+                          stroke-width="1.4"
+                          stroke-linecap="round"
+                        />
+                      </svg>
+                      <span>Motion Cut</span>
+                    </div>
+                    <div class="hg-icitem">
+                      <svg viewBox="0 0 16 16" fill="none" width="16" height="16">
+                        <path
+                          d="M2 4h12M8 4v9M5 13h6"
+                          stroke="currentColor"
+                          stroke-width="1.4"
+                          stroke-linecap="round"
+                        />
+                        <circle cx="12" cy="3" r="1.5" fill="#3B82F6" />
+                      </svg>
+                      <span>Translate</span>
+                    </div>
+                    <div class="hg-icitem">
+                      <svg viewBox="0 0 16 16" fill="none" width="16" height="16">
+                        <rect
+                          x="2"
+                          y="2"
+                          width="5"
+                          height="5"
+                          rx="1.5"
+                          fill="currentColor"
+                          opacity="0.45"
+                        />
+                        <rect
+                          x="9"
+                          y="2"
+                          width="5"
+                          height="5"
+                          rx="1.5"
+                          fill="currentColor"
+                          opacity="0.45"
+                        />
+                        <rect
+                          x="2"
+                          y="9"
+                          width="5"
+                          height="5"
+                          rx="1.5"
+                          fill="currentColor"
+                          opacity="0.45"
+                        />
+                        <rect
+                          x="9"
+                          y="9"
+                          width="5"
+                          height="5"
+                          rx="1.5"
+                          fill="currentColor"
+                          opacity="0.45"
+                        />
+                      </svg>
+                      <span>Apps</span>
+                    </div>
+                    <div class="hg-icitem">
+                      <svg viewBox="0 0 16 16" fill="none" width="16" height="16">
+                        <path
+                          d="M2 6a2 2 0 012-2h2l2 2h4a2 2 0 012 2v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
+                          stroke="currentColor"
+                          stroke-width="1.3"
+                        />
+                      </svg>
+                      <span>Projects</span>
+                    </div>
+                    <div class="hg-icuser">J</div>
+                  </div>
+
+                  <!-- ══ HISTORY PANEL (105px) ══ -->
+                  <div class="hg-histpanel">
+                    <div class="hg-histhead">
+                      <span>Video Agent</span>
+                      <svg viewBox="0 0 14 14" fill="none" width="12" height="12">
+                        <rect
+                          x="1"
+                          y="1"
+                          width="4.5"
+                          height="12"
+                          rx="1"
+                          stroke="currentColor"
+                          stroke-width="1.2"
+                        />
+                        <rect
+                          x="8.5"
+                          y="1"
+                          width="4.5"
+                          height="12"
+                          rx="1"
+                          stroke="currentColor"
+                          stroke-width="1.2"
+                        />
+                      </svg>
+                    </div>
+                    <div class="hg-newitem">
+                      <svg viewBox="0 0 12 12" fill="none" width="11" height="11">
+                        <path
+                          d="M1 6.5L6 1.5l5 5V11H7.5V8H4.5v3H1V6.5Z"
+                          fill="#3B82F6"
+                          fill-opacity="0.85"
+                        />
+                      </svg>
+                      New video
+                    </div>
+                    <div class="hg-histcat">YESTERDAY</div>
+                    <div class="hg-histrow">AI Skills Gap: Alien</div>
+                    <div class="hg-histcat">PREVIOUS 3 DAYS</div>
+                    <div class="hg-histrow">AI Skills Gap: Alien</div>
+                    <div class="hg-histrow">Product Strategy: An AI...</div>
+                    <div class="hg-histrow">S9</div>
+                    <div class="hg-histrow">S7</div>
+                    <div class="hg-histrow">S5</div>
+                    <div class="hg-histrow">S3</div>
+                    <div class="hg-histcat">PREVIOUS 7 DAYS</div>
+                    <div class="hg-histrow">S8 lock</div>
+                    <div class="hg-histrow">S4</div>
+                    <div class="hg-histrow">S2</div>
+                    <div class="hg-histrow">Moody t2</div>
+                  </div>
+
+                  <!-- ══ MAIN CONTENT (359px) ══ -->
+                  <div class="hg-maincnt">
+                    <!-- Top-right icon cluster -->
+                    <div class="hg-toprighticons">
+                      <div class="hg-ticon">
+                        <svg viewBox="0 0 14 14" fill="none" width="11" height="11">
+                          <circle cx="6" cy="6" r="4.5" stroke="currentColor" stroke-width="1.3" />
+                          <path
+                            d="M9.5 9.5l2.5 2.5"
+                            stroke="currentColor"
+                            stroke-width="1.3"
+                            stroke-linecap="round"
+                          />
+                        </svg>
+                      </div>
+                      <div class="hg-ticon hg-notifico">
+                        <svg viewBox="0 0 14 14" fill="none" width="11" height="11">
+                          <path
+                            d="M7 1.5a4 4 0 00-4 4v3l-1 2h10l-1-2v-3a4 4 0 00-4-4z"
+                            stroke="currentColor"
+                            stroke-width="1.2"
+                          />
+                          <path
+                            d="M5.5 10.5a1.5 1.5 0 003 0"
+                            stroke="currentColor"
+                            stroke-width="1.2"
+                          />
+                        </svg>
+                        <div class="hg-notifbadge">99+</div>
+                      </div>
+                      <div class="hg-ticon">
+                        <svg viewBox="0 0 14 14" fill="none" width="11" height="11">
+                          <path
+                            d="M7 2l1.2 3.8H12L9 8.2l1.2 3.8L7 9.5l-3.2 2.5L5 8.2 2 5.8h3.8z"
+                            stroke="currentColor"
+                            stroke-width="1.1"
+                          />
+                        </svg>
+                      </div>
+                    </div>
+
+                    <!-- Hero heading -->
+                    <div class="hg-herotitle">Turn your ideas into<br />production-ready video</div>
+
+                    <!-- ─ Create card ─ -->
+                    <div class="hg-createcard" id="hgCreateCard">
+                      <!-- Selector row: Avatar | Voice | Style -->
+                      <div class="hg-selrow">
+                        <div class="hg-sel">
+                          <span class="hg-sellbl">Avatar</span>
+                          <div class="hg-selbox">
+                            <div class="hg-avphoto"></div>
+                            <span class="hg-seltxt">Jordan</span>
+                          </div>
+                        </div>
+                        <div class="hg-seldiv"></div>
+                        <div class="hg-sel">
+                          <span class="hg-sellbl">Voice</span>
+                          <div class="hg-selbox">
+                            <div class="hg-voicebars">
+                              <div class="hg-vbar" style="height: 5px"></div>
+                              <div class="hg-vbar" style="height: 9px"></div>
+                              <div class="hg-vbar" style="height: 7px"></div>
+                              <div class="hg-vbar" style="height: 11px"></div>
+                              <div class="hg-vbar" style="height: 5px"></div>
+                            </div>
+                            <span class="hg-seltxt">Auto</span>
+                          </div>
+                        </div>
+                        <div class="hg-seldiv"></div>
+                        <div class="hg-sel">
+                          <span class="hg-sellbl">Style</span>
+                          <div class="hg-selbox">
+                            <div class="hg-styleico">
+                              <svg viewBox="0 0 14 14" fill="none" width="12" height="12">
+                                <rect
+                                  x="1"
+                                  y="1"
+                                  width="12"
+                                  height="12"
+                                  rx="2"
+                                  stroke="currentColor"
+                                  stroke-width="1.2"
+                                />
+                                <path
+                                  d="M4.5 7l2 2 3-3"
+                                  stroke="currentColor"
+                                  stroke-width="1.2"
+                                  stroke-linecap="round"
+                                />
+                              </svg>
+                            </div>
+                            <span class="hg-seltxt">Auto</span>
+                          </div>
+                        </div>
+                        <div class="hg-settico">
+                          <svg viewBox="0 0 14 14" fill="none" width="13" height="13">
+                            <circle cx="7" cy="7" r="2" stroke="currentColor" stroke-width="1.2" />
+                            <path
+                              d="M7 1.5V3M7 11v1.5M1.5 7H3M11 7h1.5M3.4 3.4l1 1M9.6 9.6l1 1M3.4 10.6l1-1M9.6 4.4l1-1"
+                              stroke="currentColor"
+                              stroke-width="1.2"
+                              stroke-linecap="round"
+                            />
+                          </svg>
+                        </div>
+                      </div>
+                      <!-- Input -->
+                      <div class="hg-cinput">Describe your video idea ...</div>
+                      <!-- Bottom bar -->
+                      <div class="hg-cbottom">
+                        <div class="hg-cbleft">
+                          <div class="hg-cbtn">
+                            <svg viewBox="0 0 12 12" fill="none" width="11" height="11">
+                              <path
+                                d="M6 2v8M2 6h8"
+                                stroke="currentColor"
+                                stroke-width="1.4"
+                                stroke-linecap="round"
+                              />
+                            </svg>
+                          </div>
+                          <div class="hg-cbtn">
+                            <svg viewBox="0 0 12 12" fill="none" width="11" height="11">
+                              <path
+                                d="M6 1.5l1 3H10L7.5 6.5l1 3L6 8 3.5 9.5l1-3L2 4.5H5z"
+                                fill="#9CA3AF"
+                              />
+                            </svg>
+                          </div>
+                          <div class="hg-cbtn">
+                            <svg viewBox="0 0 12 12" fill="none" width="11" height="11">
+                              <path
+                                d="M1.5 3h9M1.5 6h9M1.5 9h6"
+                                stroke="currentColor"
+                                stroke-width="1.3"
+                                stroke-linecap="round"
+                              />
+                            </svg>
+                          </div>
+                        </div>
+                        <div class="hg-cbright">
+                          <div class="hg-genbtn">
+                            <svg viewBox="0 0 10 10" fill="none" width="9" height="9">
+                              <path d="M5 1l1 3h3L7 6l1 3L5 7.5 2 9l1-3L1 4h3z" fill="#6B7280" />
+                            </svg>
+                            Generate
+                            <svg viewBox="0 0 8 6" fill="none" width="8" height="6">
+                              <path
+                                d="M1 1l3 3 3-3"
+                                stroke="#6B7280"
+                                stroke-width="1.3"
+                                stroke-linecap="round"
+                              />
+                            </svg>
+                          </div>
+                          <div class="hg-submitbtn">
+                            <svg viewBox="0 0 12 12" fill="none" width="10" height="10">
+                              <path
+                                d="M6 9V3M3 6l3-3 3 3"
+                                stroke="white"
+                                stroke-width="1.5"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                              />
+                            </svg>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+                    <!-- Styles from community -->
+                    <div class="hg-stylessec">
+                      <div class="hg-stitle">Styles from the community</div>
+                      <div class="hg-spills">
+                        <div class="hg-spill hg-spactive">All Styles</div>
+                        <div class="hg-spill">Retro Tech</div>
+                        <div class="hg-spill">Iconic Artist</div>
+                        <div class="hg-spill">Pop Culture</div>
+                        <div class="hg-spill">Print</div>
+                        <div class="hg-spill">Cinematic</div>
+                      </div>
+                      <div class="hg-scards">
+                        <div
+                          class="hg-sc"
+                          style="background: linear-gradient(135deg, #1b2a5e, #2d4a9a)"
+                        >
+                          <span class="hg-sclbl">IMPLEMENTATION DEPTH</span>
+                        </div>
+                        <div
+                          class="hg-sc"
+                          style="background: linear-gradient(160deg, #c9ad88, #b89668)"
+                        >
+                          <span
+                            class="hg-sclbl"
+                            style="font-style: italic; color: #3d2810; font-size: 5.5px"
+                            >Strategy means saying NO</span
+                          >
+                        </div>
+                        <div
+                          class="hg-sc"
+                          style="
+                            background: #ede9e0;
+                            display: flex;
+                            align-items: center;
+                            justify-content: center;
+                          "
+                        >
+                          <span style="color: #cc4422; font-size: 14px; font-weight: 700">?</span>
+                        </div>
+                        <div
+                          class="hg-sc"
+                          style="background: linear-gradient(135deg, #8b1515, #c92020)"
+                        >
+                          <span class="hg-sclbl" style="color: #ffd9a0; font-size: 5px"
+                            >THINK BIG.<br />START SMALL.</span
+                          >
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Figma selection handles on the first video card -->
+                <div class="selection-ring" id="selectionRing">
+                  <div class="sel-handle tl"></div>
+                  <div class="sel-handle tr"></div>
+                  <div class="sel-handle bl"></div>
+                  <div class="sel-handle br"></div>
+                  <div class="sel-label">Create Card · W 322 H 110</div>
+                </div>
+              </div>
+
+              <!-- DESIGN PROPERTIES PANEL -->
+              <div class="fig-props" id="figProps">
+                <div class="panel-tabs">
+                  <span class="ptab active">Design</span>
+                  <span class="ptab">Prototype</span>
+                  <span class="ptab">Inspect</span>
+                </div>
+
+                <!-- Alignment row -->
+                <div class="prop-align">
+                  <div class="align-btn">⬓</div>
+                  <div class="align-btn">⬒</div>
+                  <div class="align-btn active-align">⬔</div>
+                  <div class="align-divider"></div>
+                  <div class="align-btn">⬕</div>
+                  <div class="align-btn">⬗</div>
+                </div>
+
+                <!-- Frame section -->
+                <div class="prop-section">
+                  <div class="prop-row-2">
+                    <div class="prop-field">
+                      <span class="prop-pre">W</span>
+                      <span class="prop-val">108</span>
+                    </div>
+                    <div class="prop-field">
+                      <span class="prop-pre">H</span>
+                      <span class="prop-val">34</span>
+                    </div>
+                  </div>
+                  <div class="prop-row-2">
+                    <div class="prop-field">
+                      <span class="prop-pre">X</span>
+                      <span class="prop-val">1244</span>
+                    </div>
+                    <div class="prop-field">
+                      <span class="prop-pre">Y</span>
+                      <span class="prop-val">18</span>
+                    </div>
+                  </div>
+                  <div class="prop-row-2">
+                    <div class="prop-field">
+                      <span class="prop-pre">↺</span>
+                      <span class="prop-val">0°</span>
+                    </div>
+                    <div class="prop-field">
+                      <span class="prop-pre">⌐</span>
+                      <span class="prop-val">8</span>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Auto layout -->
+                <div class="prop-section">
+                  <div class="prop-section-head">
+                    <span class="prop-section-label">Auto layout</span>
+                    <span class="prop-section-icon">−</span>
+                  </div>
+                  <div class="prop-row-2">
+                    <div class="prop-field">
+                      <span class="prop-pre">→</span>
+                      <span class="prop-val">12px</span>
+                    </div>
+                    <div class="prop-field">
+                      <span class="prop-pre">⊡</span>
+                      <span class="prop-val">14 / 8</span>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Fill -->
+                <div class="prop-section">
+                  <div class="prop-section-head">
+                    <span class="prop-section-label">Fill</span>
+                    <span class="prop-section-icon">+</span>
+                  </div>
+                  <div class="fill-row">
+                    <div class="fill-preview" style="background: #ffffff"></div>
+                    <span class="fill-hex">FFFFFF</span>
+                    <span class="fill-pct">100%</span>
+                  </div>
+                </div>
+
+                <!-- Stroke -->
+                <div class="prop-section">
+                  <div class="prop-section-head">
+                    <span class="prop-section-label">Stroke</span>
+                    <span class="prop-section-icon">+</span>
+                  </div>
+                  <div class="fill-row muted">
+                    <span class="prop-empty">No strokes</span>
+                  </div>
+                </div>
+
+                <!-- Effects -->
+                <div class="prop-section">
+                  <div class="prop-section-head">
+                    <span class="prop-section-label">Effects</span>
+                    <span class="prop-section-icon">+</span>
+                  </div>
+                  <div class="effect-row">
+                    <div class="effect-dot"></div>
+                    <span class="effect-name">Drop shadow</span>
+                  </div>
+                </div>
+
+                <!-- Export -->
+                <div class="prop-section">
+                  <div class="prop-section-head">
+                    <span class="prop-section-label">Export</span>
+                    <span class="prop-section-icon">+</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <!-- /fig-body -->
+          </div>
+          <!-- /ui-card -->
+
+          <!-- RIGHT DEPTH FACE -->
+          <div class="depth-right" id="depthRight"></div>
+        </div>
+        <!-- /card-wrapper -->
+      </div>
+      <!-- /scene -->
+
+      <!-- ══════════════════════════════════════════
+         OUTRO: Logo rebuild + tagline + URL pill
+    ══════════════════════════════════════════ -->
+      <div class="outro-layer" id="outroLayer">
+        <svg class="outro-svg" viewBox="0 0 1920 1080" xmlns="http://www.w3.org/2000/svg">
+          <g class="outro-logo" transform="translate(880, 310)">
+            <!-- Fill layer -->
+            <path
+              class="ol-fill ol-fill-1"
+              d="M80 0H40C17.9 0 0 17.9 0 40S17.9 80 40 80H80V0Z"
+              fill="#F24E1E"
+              opacity="0"
+            />
+            <path
+              class="ol-fill ol-fill-2"
+              d="M80 0V80H120C142.1 80 160 62.1 160 40S142.1 0 120 0H80Z"
+              fill="#FF7262"
+              opacity="0"
+            />
+            <path
+              class="ol-fill ol-fill-3"
+              d="M80 80H40C17.9 80 0 97.9 0 120S17.9 160 40 160H80V80Z"
+              fill="#A259FF"
+              opacity="0"
+            />
+            <circle class="ol-fill ol-fill-4" cx="120" cy="120" r="40" fill="#1ABCFE" opacity="0" />
+            <path
+              class="ol-fill ol-fill-5"
+              d="M40 160C17.9 160 0 177.9 0 200S17.9 240 40 240 80 222.1 80 200V160H40Z"
+              fill="#0ACF83"
+              opacity="0"
+            />
+            <!-- Stroke layer -->
+            <path
+              class="ol-stroke ol-stroke-1"
+              d="M80 0H40C17.9 0 0 17.9 0 40S17.9 80 40 80H80V0Z"
+              fill="none"
+              stroke="#F24E1E"
+              stroke-width="2"
+            />
+            <path
+              class="ol-stroke ol-stroke-2"
+              d="M80 0V80H120C142.1 80 160 62.1 160 40S142.1 0 120 0H80Z"
+              fill="none"
+              stroke="#FF7262"
+              stroke-width="2"
+            />
+            <path
+              class="ol-stroke ol-stroke-3"
+              d="M80 80H40C17.9 80 0 97.9 0 120S17.9 160 40 160H80V80Z"
+              fill="none"
+              stroke="#A259FF"
+              stroke-width="2"
+            />
+            <circle
+              class="ol-stroke ol-stroke-4"
+              cx="120"
+              cy="120"
+              r="40"
+              fill="none"
+              stroke="#1ABCFE"
+              stroke-width="2"
+            />
+            <path
+              class="ol-stroke ol-stroke-5"
+              d="M40 160C17.9 160 0 177.9 0 200S17.9 240 40 240 80 222.1 80 200V160H40Z"
+              fill="none"
+              stroke="#0ACF83"
+              stroke-width="2"
+            />
+          </g>
+
+          <!-- Tagline — individual tspan letters for stagger -->
+          <text class="outro-tagline" x="960" y="648" text-anchor="middle">
+            <tspan class="otl">N</tspan>
+            <tspan class="otl">o</tspan>
+            <tspan class="otl">t</tspan>
+            <tspan class="otl">h</tspan>
+            <tspan class="otl">i</tspan>
+            <tspan class="otl">n</tspan>
+            <tspan class="otl">g</tspan>
+            <tspan class="otl"></tspan>
+            <tspan class="otl">g</tspan>
+            <tspan class="otl">r</tspan>
+            <tspan class="otl">e</tspan>
+            <tspan class="otl">a</tspan>
+            <tspan class="otl">t</tspan>
+            <tspan class="otl"></tspan>
+            <tspan class="otl">i</tspan>
+            <tspan class="otl">s</tspan>
+            <tspan class="otl"></tspan>
+            <tspan class="otl">m</tspan>
+            <tspan class="otl">a</tspan>
+            <tspan class="otl">d</tspan>
+            <tspan class="otl">e</tspan>
+            <tspan class="otl"></tspan>
+            <tspan class="otl">a</tspan>
+            <tspan class="otl">l</tspan>
+            <tspan class="otl">o</tspan>
+            <tspan class="otl">n</tspan>
+            <tspan class="otl">e</tspan>
+            <tspan class="otl">.</tspan>
+          </text>
+
+          <!-- URL pill -->
+          <rect
+            class="url-border"
+            x="885"
+            y="688"
+            width="150"
+            height="40"
+            rx="20"
+            fill="none"
+            stroke="#3C3C3C"
+            stroke-width="1.5"
+          />
+          <rect
+            class="url-bg"
+            x="885"
+            y="688"
+            width="150"
+            height="40"
+            rx="20"
+            fill="#2C2C2C"
+            opacity="0"
+          />
+          <text
+            class="url-text"
+            x="960"
+            y="713"
+            text-anchor="middle"
+            fill="#868686"
+            font-size="16"
+            font-weight="400"
+            opacity="0"
+          >
+            figma.com
+          </text>
+        </svg>
+      </div>
+
+      <!-- Fade to black -->
+      <div class="outro-fade" id="outroFade"></div>
+
+      <style>
+        @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap");
+
+        /*
+        Figma palette:
+        canvas-bg:    #1E1E1E
+        panel-bg:     #2C2C2C
+        panel-dark:   #252525
+        toolbar:      #2C2C2C
+        divider:      rgba(255,255,255,0.1)
+        text:         #E8E8E8
+        text-muted:   #868686
+        text-dim:     #555555
+        selected-bg:  rgba(24,160,251,0.14)
+        blue:         #18A0FB
+        purple:       #A259FF
+        green:        #0ACF83
+        red:          #F24E1E
+        orange:       #FF7262
+      */
+
+        [data-composition-id="ui-3d-reveal"] {
+          position: relative;
+          width: 1920px;
+          height: 1080px;
+          overflow: hidden;
+          font-family: "Inter", sans-serif;
+          background: #111111;
+        }
+
+        /* ── Background ── */
+        [data-composition-id="ui-3d-reveal"] .bg-base {
+          position: absolute;
+          inset: 0;
+          background: #111111;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .bg-glow {
+          position: absolute;
+          inset: 0;
+          background:
+            radial-gradient(
+              ellipse 900px 600px at 50% 52%,
+              rgba(24, 160, 251, 0.06) 0%,
+              transparent 65%
+            ),
+            radial-gradient(
+              ellipse 500px 300px at 20% 75%,
+              rgba(162, 89, 255, 0.04) 0%,
+              transparent 60%
+            );
+          pointer-events: none;
+        }
+
+        /* ── Scene ── */
+        [data-composition-id="ui-3d-reveal"] .scene {
+          position: absolute;
+          inset: 0;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          perspective: 2800px;
+          perspective-origin: 50% 50%;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .card-glow {
+          position: absolute;
+          width: 1200px;
+          height: 780px;
+          border-radius: 24px;
+          background: radial-gradient(
+            ellipse at 50% 50%,
+            rgba(24, 160, 251, 0.18) 0%,
+            transparent 65%
+          );
+          filter: blur(50px);
+          pointer-events: none;
+          opacity: 0;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .card-wrapper {
+          position: relative;
+          transform-style: preserve-3d;
+          will-change: transform;
+        }
+
+        /* ── Front face ── */
+        [data-composition-id="ui-3d-reveal"] .ui-card {
+          width: 1100px;
+          height: 680px;
+          background: #1e1e1e;
+          border-radius: 12px;
+          overflow: hidden;
+          border: 1px solid rgba(255, 255, 255, 0.1);
+          position: relative;
+          box-shadow:
+            inset -1px 0 0 rgba(24, 160, 251, 0.2),
+            0 40px 120px rgba(0, 0, 0, 0.7);
+        }
+
+        /* ── Depth face ── */
+        [data-composition-id="ui-3d-reveal"] .depth-right {
+          position: absolute;
+          top: 12px;
+          left: 1100px;
+          width: 10px;
+          height: 656px;
+          transform-origin: 0% 50%;
+          transform: rotateY(90deg);
+          background: linear-gradient(
+            to right,
+            rgba(80, 160, 255, 0.4) 0%,
+            rgba(40, 100, 200, 0.2) 40%,
+            rgba(10, 20, 50, 0.9) 100%
+          );
+          border-radius: 3px 2px 2px 3px;
+        }
+
+        /* ═══════════════════════════
+         TOOLBAR
+      ═══════════════════════════ */
+        [data-composition-id="ui-3d-reveal"] .fig-toolbar {
+          height: 48px;
+          background: #2c2c2c;
+          border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+          display: flex;
+          align-items: center;
+          padding: 0 12px;
+          gap: 0;
+          flex-shrink: 0;
+          position: relative;
+          z-index: 2;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .tb-left {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          flex: 0 0 auto;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .fig-logo {
+          width: 32px;
+          height: 32px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-radius: 6px;
+          cursor: default;
+          flex-shrink: 0;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .fig-logo:hover {
+          background: rgba(255, 255, 255, 0.08);
+        }
+
+        [data-composition-id="ui-3d-reveal"] .tool-divider {
+          width: 1px;
+          height: 20px;
+          background: rgba(255, 255, 255, 0.12);
+          flex-shrink: 0;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .tool-group {
+          display: flex;
+          align-items: center;
+          gap: 2px;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .tool-btn {
+          width: 30px;
+          height: 30px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-radius: 5px;
+          color: #868686;
+          cursor: default;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .tool-btn.active {
+          background: rgba(24, 160, 251, 0.18);
+          color: #18a0fb;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .tb-center {
+          flex: 1;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          gap: 5px;
+          font-size: 12px;
+          color: #e8e8e8;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .file-name {
+          font-weight: 500;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .file-chevron {
+          color: #555;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .file-page {
+          color: #868686;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .file-arrow {
+          color: #868686;
+          margin-left: 2px;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .tb-right {
+          flex: 0 0 auto;
+          display: flex;
+          align-items: center;
+          gap: 8px;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .mode-tabs {
+          display: flex;
+          background: rgba(255, 255, 255, 0.06);
+          border-radius: 6px;
+          padding: 2px;
+          gap: 2px;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .mode-tab {
+          font-size: 11px;
+          font-weight: 500;
+          color: #868686;
+          padding: 4px 10px;
+          border-radius: 4px;
+          cursor: default;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .mode-tab.active {
+          background: #3c3c3c;
+          color: #e8e8e8;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .share-btn {
+          display: flex;
+          align-items: center;
+          gap: 5px;
+          background: #18a0fb;
+          color: white;
+          font-size: 11px;
+          font-weight: 600;
+          padding: 6px 12px;
+          border-radius: 6px;
+          cursor: default;
+          white-space: nowrap;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .avatar-cluster {
+          display: flex;
+          align-items: center;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .fig-avatar {
+          width: 26px;
+          height: 26px;
+          border-radius: 50%;
+          font-size: 9px;
+          font-weight: 700;
+          color: white;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border: 2px solid #2c2c2c;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .present-btn {
+          width: 28px;
+          height: 28px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-radius: 5px;
+          background: rgba(255, 255, 255, 0.06);
+          color: #868686;
+          font-size: 9px;
+          cursor: default;
+        }
+
+        /* ═══════════════════════════
+         BODY LAYOUT
+      ═══════════════════════════ */
+        [data-composition-id="ui-3d-reveal"] .fig-body {
+          display: flex;
+          height: 632px; /* 680 - 48 toolbar */
+        }
+
+        /* ═══════════════════════════
+         LAYERS PANEL
+      ═══════════════════════════ */
+        [data-composition-id="ui-3d-reveal"] .fig-layers {
+          width: 210px;
+          flex-shrink: 0;
+          background: #2c2c2c;
+          border-right: 1px solid rgba(255, 255, 255, 0.08);
+          display: flex;
+          flex-direction: column;
+          overflow: hidden;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .panel-tabs {
+          display: flex;
+          border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+          flex-shrink: 0;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .ptab {
+          flex: 1;
+          text-align: center;
+          font-size: 11px;
+          font-weight: 500;
+          color: #868686;
+          padding: 9px 0 8px;
+          cursor: default;
+          border-bottom: 2px solid transparent;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .ptab.active {
+          color: #e8e8e8;
+          border-bottom-color: #18a0fb;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .layer-search {
+          display: flex;
+          align-items: center;
+          gap: 6px;
+          padding: 7px 10px;
+          border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+          color: #555;
+          flex-shrink: 0;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .search-placeholder {
+          font-size: 11px;
+          color: #555;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .layer-list {
+          flex: 1;
+          overflow: hidden;
+          padding: 4px 0;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .layer-item {
+          display: flex;
+          align-items: center;
+          gap: 5px;
+          padding: 4px 8px;
+          font-size: 11px;
+          color: #868686;
+          cursor: default;
+          height: 26px;
+          white-space: nowrap;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .layer-item.page-item {
+          color: #e8e8e8;
+          font-weight: 500;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .layer-item.frame-item {
+          color: #e8e8e8;
+          font-weight: 500;
+          padding-left: 6px;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .layer-item.indent-1 {
+          padding-left: 18px;
+        }
+        [data-composition-id="ui-3d-reveal"] .layer-item.indent-2 {
+          padding-left: 30px;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .layer-item.comp-item {
+          color: #c9a0ff;
+        }
+        [data-composition-id="ui-3d-reveal"] .frame-icon {
+          color: #6ca9ff !important;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .selected-layer {
+          background: rgba(24, 160, 251, 0.15);
+          border-radius: 4px;
+          color: #18a0fb !important;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .li-collapse {
+          color: #555;
+          flex-shrink: 0;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .li-icon {
+          flex-shrink: 0;
+          color: #868686;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .comp-icon {
+          color: #a259ff !important;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .page-bar {
+          display: flex;
+          align-items: center;
+          border-top: 1px solid rgba(255, 255, 255, 0.08);
+          padding: 0 4px;
+          height: 34px;
+          flex-shrink: 0;
+          gap: 2px;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .pbar-tab {
+          font-size: 10px;
+          color: #868686;
+          padding: 4px 8px;
+          border-radius: 4px;
+          white-space: nowrap;
+          cursor: default;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .pbar-tab.active {
+          background: rgba(255, 255, 255, 0.08);
+          color: #e8e8e8;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .pbar-add {
+          font-size: 14px;
+          color: #555;
+          padding: 2px 6px;
+          cursor: default;
+          margin-left: auto;
+        }
+
+        /* ═══════════════════════════
+         CANVAS
+      ═══════════════════════════ */
+        [data-composition-id="ui-3d-reveal"] .fig-canvas {
+          flex: 1;
+          background: #1e1e1e;
+          position: relative;
+          overflow: hidden;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .canvas-frame-label {
+          position: absolute;
+          top: 18px;
+          left: 50%;
+          transform: translateX(-50%);
+          font-size: 10px;
+          color: #555;
+          white-space: nowrap;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .artboard {
+          width: 520px;
+          height: 360px;
+          background: #ffffff;
+          border-radius: 4px;
+          overflow: hidden;
+          position: relative;
+          display: flex;
+          box-shadow:
+            0 8px 40px rgba(0, 0, 0, 0.5),
+            0 0 0 1px rgba(0, 0, 0, 0.08);
+          margin-top: 20px;
+        }
+
+        /* ── Selection handles ── */
+        [data-composition-id="ui-3d-reveal"] .selection-ring {
+          position: absolute;
+          width: 322px;
+          height: 110px;
+          border: 1px solid #18a0fb;
+          pointer-events: none;
+          /* positioned over the create card in main content */
+          top: calc(50% - 40px);
+          left: calc(50% + 86px);
+          transform: translate(-50%, -50%);
+        }
+
+        [data-composition-id="ui-3d-reveal"] .sel-handle {
+          position: absolute;
+          width: 7px;
+          height: 7px;
+          background: white;
+          border: 1.5px solid #18a0fb;
+          border-radius: 1px;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .sel-handle.tl {
+          top: -4px;
+          left: -4px;
+        }
+        [data-composition-id="ui-3d-reveal"] .sel-handle.tr {
+          top: -4px;
+          right: -4px;
+        }
+        [data-composition-id="ui-3d-reveal"] .sel-handle.bl {
+          bottom: -4px;
+          left: -4px;
+        }
+        [data-composition-id="ui-3d-reveal"] .sel-handle.br {
+          bottom: -4px;
+          right: -4px;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .sel-label {
+          position: absolute;
+          top: -22px;
+          left: -1px;
+          font-size: 9px;
+          color: #18a0fb;
+          white-space: nowrap;
+          font-family: "Inter", sans-serif;
+          font-weight: 500;
+        }
+
+        /* ═══════════════════════════
+         PROPERTIES PANEL
+      ═══════════════════════════ */
+        [data-composition-id="ui-3d-reveal"] .fig-props {
+          width: 240px;
+          flex-shrink: 0;
+          background: #2c2c2c;
+          border-left: 1px solid rgba(255, 255, 255, 0.08);
+          display: flex;
+          flex-direction: column;
+          overflow: hidden;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .prop-align {
+          display: flex;
+          align-items: center;
+          gap: 3px;
+          padding: 8px 12px;
+          border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+          flex-shrink: 0;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .align-btn {
+          width: 24px;
+          height: 24px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-radius: 4px;
+          color: #868686;
+          font-size: 14px;
+          cursor: default;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .active-align {
+          background: rgba(255, 255, 255, 0.08);
+          color: #e8e8e8;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .align-divider {
+          width: 1px;
+          height: 16px;
+          background: rgba(255, 255, 255, 0.1);
+          margin: 0 2px;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .prop-section {
+          padding: 10px 12px;
+          border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+          flex-shrink: 0;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .prop-section-head {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          margin-bottom: 8px;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .prop-section-label {
+          font-size: 11px;
+          font-weight: 500;
+          color: #e8e8e8;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .prop-section-icon {
+          font-size: 14px;
+          color: #555;
+          cursor: default;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .prop-row-2 {
+          display: grid;
+          grid-template-columns: 1fr 1fr;
+          gap: 6px;
+          margin-bottom: 5px;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .prop-field {
+          display: flex;
+          align-items: center;
+          gap: 5px;
+          background: rgba(255, 255, 255, 0.06);
+          border-radius: 4px;
+          padding: 5px 7px;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .prop-pre {
+          font-size: 10px;
+          color: #555;
+          flex-shrink: 0;
+          font-family: "Inter", sans-serif;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .prop-val {
+          font-size: 11px;
+          color: #e8e8e8;
+          font-family: "Inter", sans-serif;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .fill-row {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .fill-preview {
+          width: 18px;
+          height: 18px;
+          border-radius: 3px;
+          border: 1px solid rgba(255, 255, 255, 0.15);
+          flex-shrink: 0;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .fill-hex {
+          font-size: 11px;
+          color: #e8e8e8;
+          font-family: "Inter", sans-serif;
+          flex: 1;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .fill-pct {
+          font-size: 11px;
+          color: #868686;
+          font-family: "Inter", sans-serif;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .prop-empty {
+          font-size: 11px;
+          color: #555;
+          font-style: italic;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .effect-row {
+          display: flex;
+          align-items: center;
+          gap: 7px;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .effect-dot {
+          width: 8px;
+          height: 8px;
+          border-radius: 50%;
+          background: rgba(255, 255, 255, 0.2);
+          flex-shrink: 0;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .effect-name {
+          font-size: 11px;
+          color: #868686;
+        }
+
+        /* ═══════════════════════════
+         HEYGEN APP UI — LIGHT MODE
+      ═══════════════════════════ */
+
+        /* ── Icon nav (56px) ── */
+        [data-composition-id="ui-3d-reveal"] .hg-icnav {
+          width: 56px;
+          flex-shrink: 0;
+          height: 360px;
+          background: #ffffff;
+          border-right: 1px solid #ebebeb;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          padding-top: 0;
+          position: relative;
+          overflow: hidden;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-iclogo {
+          width: 56px;
+          height: 50px;
+          flex-shrink: 0;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-bottom: 1px solid #f0f0f0;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-icitem {
+          width: 100%;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          gap: 3px;
+          padding: 8px 0;
+          color: #9ca3af;
+          cursor: default;
+          flex-shrink: 0;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-icitem span {
+          font-size: 7px;
+          color: inherit;
+          font-family: "Inter", sans-serif;
+          text-align: center;
+          line-height: 1;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-icactive {
+          color: #10b8a9 !important;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-icactive span {
+          color: #10b8a9 !important;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-icbg {
+          width: 34px;
+          height: 34px;
+          border-radius: 9px;
+          background: #10b8a9;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-icuser {
+          position: absolute;
+          bottom: 10px;
+          width: 26px;
+          height: 26px;
+          border-radius: 50%;
+          background: #1a1a1a;
+          font-size: 9px;
+          font-weight: 700;
+          color: white;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-family: "Inter", sans-serif;
+        }
+
+        /* ── History panel (120px) ── */
+        [data-composition-id="ui-3d-reveal"] .hg-histpanel {
+          width: 120px;
+          flex-shrink: 0;
+          height: 360px;
+          background: #f7f7f8;
+          border-right: 1px solid #ebebeb;
+          display: flex;
+          flex-direction: column;
+          overflow: hidden;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-histhead {
+          height: 44px;
+          flex-shrink: 0;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 0 10px;
+          font-size: 10px;
+          font-weight: 600;
+          color: #111;
+          border-bottom: 1px solid #efefef;
+          font-family: "Inter", sans-serif;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-newitem {
+          display: flex;
+          align-items: center;
+          gap: 6px;
+          padding: 7px 8px;
+          margin: 6px 6px 0;
+          background: #e8f0fe;
+          border-radius: 7px;
+          font-size: 9.5px;
+          font-weight: 500;
+          color: #1a1a1a;
+          flex-shrink: 0;
+          font-family: "Inter", sans-serif;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-histcat {
+          font-size: 7px;
+          font-weight: 600;
+          color: #b0b0b0;
+          letter-spacing: 0.06em;
+          padding: 9px 10px 3px;
+          flex-shrink: 0;
+          font-family: "Inter", sans-serif;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-histrow {
+          padding: 3.5px 10px;
+          font-size: 9px;
+          color: #444;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          flex-shrink: 0;
+          font-family: "Inter", sans-serif;
+        }
+
+        /* ── Main content (359px) ── */
+        [data-composition-id="ui-3d-reveal"] .hg-maincnt {
+          flex: 1;
+          height: 360px;
+          background: #ffffff;
+          position: relative;
+          display: flex;
+          flex-direction: column;
+          padding: 10px 14px 10px;
+          overflow: hidden;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-toprighticons {
+          position: absolute;
+          top: 9px;
+          right: 10px;
+          display: flex;
+          align-items: center;
+          gap: 6px;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-ticon {
+          width: 26px;
+          height: 26px;
+          border-radius: 50%;
+          border: 1px solid #e5e7eb;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          color: #6b7280;
+          cursor: default;
+          position: relative;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-notifico {
+          position: relative;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-notifbadge {
+          position: absolute;
+          top: -5px;
+          right: -7px;
+          background: #ef4444;
+          color: white;
+          font-size: 5.5px;
+          font-weight: 700;
+          padding: 1.5px 3px;
+          border-radius: 8px;
+          font-family: "Inter", sans-serif;
+          border: 1.5px solid white;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-herotitle {
+          font-size: 15px;
+          font-weight: 800;
+          color: #111111;
+          line-height: 1.22;
+          letter-spacing: -0.04em;
+          margin-bottom: 12px;
+          font-family: "Inter", sans-serif;
+          padding-right: 84px;
+          margin-top: 2px;
+        }
+
+        /* ── Create card ── */
+        [data-composition-id="ui-3d-reveal"] .hg-createcard {
+          border: 2px solid #7dd4cf;
+          border-radius: 12px;
+          overflow: hidden;
+          background: #ffffff;
+          flex-shrink: 0;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-selrow {
+          display: flex;
+          align-items: stretch;
+          border-bottom: 1px solid #f3f4f6;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-sel {
+          flex: 1;
+          padding: 8px 10px;
+          display: flex;
+          flex-direction: column;
+          gap: 5px;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-seldiv {
+          width: 1px;
+          background: #f0f0f0;
+          flex-shrink: 0;
+          margin: 8px 0;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-settico {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding: 0 10px;
+          color: #9ca3af;
+          flex-shrink: 0;
+          border-left: 1px solid #f0f0f0;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-sellbl {
+          font-size: 8px;
+          color: #9ca3af;
+          font-weight: 500;
+          font-family: "Inter", sans-serif;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-selbox {
+          display: flex;
+          align-items: center;
+          gap: 6px;
+          background: #f4f4f5;
+          border-radius: 7px;
+          padding: 5px 7px;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-avphoto {
+          width: 30px;
+          height: 26px;
+          border-radius: 5px;
+          flex-shrink: 0;
+          background: linear-gradient(170deg, #7a4b2a 0%, #b07540 45%, #d4a070 100%);
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-seltxt {
+          font-size: 9px;
+          font-weight: 500;
+          color: #1a1a1a;
+          font-family: "Inter", sans-serif;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-voicebars {
+          display: flex;
+          align-items: center;
+          gap: 2px;
+          width: 22px;
+          justify-content: center;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-vbar {
+          width: 2.5px;
+          background: #c4c4c4;
+          border-radius: 1.5px;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-styleico {
+          width: 22px;
+          height: 22px;
+          background: #e8e8e8;
+          border-radius: 5px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          color: #888;
+          flex-shrink: 0;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-cinput {
+          padding: 10px 12px 8px;
+          font-size: 10px;
+          color: #c4c4c4;
+          font-family: "Inter", sans-serif;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-cbottom {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 6px 10px;
+          border-top: 1px solid #f3f4f6;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-cbleft {
+          display: flex;
+          align-items: center;
+          gap: 6px;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-cbtn {
+          width: 24px;
+          height: 24px;
+          border: 1px solid #e4e4e7;
+          border-radius: 6px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          color: #6b7280;
+          cursor: default;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-cbright {
+          display: flex;
+          align-items: center;
+          gap: 5px;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-genbtn {
+          display: flex;
+          align-items: center;
+          gap: 4px;
+          background: #f4f4f5;
+          border: 1px solid #e4e4e7;
+          border-radius: 8px;
+          padding: 5px 9px;
+          font-size: 9px;
+          font-weight: 500;
+          color: #374151;
+          font-family: "Inter", sans-serif;
+          cursor: default;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-submitbtn {
+          width: 26px;
+          height: 26px;
+          border-radius: 50%;
+          background: #111111;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          cursor: default;
+        }
+
+        /* ── Styles from community ── */
+        [data-composition-id="ui-3d-reveal"] .hg-stylessec {
+          margin-top: 10px;
+          flex: 1;
+          overflow: hidden;
+          display: flex;
+          flex-direction: column;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-stitle {
+          font-size: 10.5px;
+          font-weight: 600;
+          color: #111;
+          margin-bottom: 7px;
+          flex-shrink: 0;
+          font-family: "Inter", sans-serif;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-spills {
+          display: flex;
+          gap: 5px;
+          margin-bottom: 8px;
+          flex-shrink: 0;
+          overflow: hidden;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-spill {
+          font-size: 8.5px;
+          font-weight: 500;
+          white-space: nowrap;
+          padding: 4px 9px;
+          border: 1.5px solid #e0e0e3;
+          border-radius: 20px;
+          color: #555;
+          font-family: "Inter", sans-serif;
+          cursor: default;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-spactive {
+          border-color: #10b8a9;
+          color: #10b8a9;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-scards {
+          display: grid;
+          grid-template-columns: repeat(4, 1fr);
+          gap: 6px;
+          flex: 1;
+          overflow: hidden;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-sc {
+          border-radius: 6px;
+          overflow: hidden;
+          display: flex;
+          align-items: flex-end;
+          padding: 5px;
+          position: relative;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-sclbl {
+          font-size: 6px;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.85);
+          font-family: "Inter", sans-serif;
+          letter-spacing: 0.04em;
+          line-height: 1.3;
+          text-transform: uppercase;
+        }
+
+        /* ══ INTRO LAYER ══ */
+        [data-composition-id="ui-3d-reveal"] .intro-layer {
+          position: absolute;
+          inset: 0;
+          z-index: 10;
+          pointer-events: none;
+        }
+        [data-composition-id="ui-3d-reveal"] .intro-svg {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1920px;
+          height: 1080px;
+        }
+        [data-composition-id="ui-3d-reveal"] .il-stroke {
+          stroke-linecap: round;
+          stroke-linejoin: round;
+        }
+
+        /* ══ OUTRO LAYER ══ */
+        [data-composition-id="ui-3d-reveal"] .outro-layer {
+          position: absolute;
+          inset: 0;
+          z-index: 10;
+          pointer-events: none;
+          opacity: 0;
+        }
+        [data-composition-id="ui-3d-reveal"] .outro-svg {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1920px;
+          height: 1080px;
+        }
+        [data-composition-id="ui-3d-reveal"] .ol-stroke {
+          stroke-linecap: round;
+          stroke-linejoin: round;
+        }
+        [data-composition-id="ui-3d-reveal"] .outro-tagline {
+          font-family: "Inter", sans-serif;
+          font-size: 42px;
+          font-weight: 500;
+          fill: #fff;
+          letter-spacing: -0.5px;
+        }
+        [data-composition-id="ui-3d-reveal"] .otl {
+          opacity: 0;
+        }
+        [data-composition-id="ui-3d-reveal"] .url-border {
+          stroke-dasharray: 500;
+          stroke-dashoffset: 500;
+        }
+
+        /* ══ OUTRO FADE OVERLAY ══ */
+        [data-composition-id="ui-3d-reveal"] .outro-fade {
+          position: absolute;
+          inset: 0;
+          background: #000;
+          opacity: 0;
+          z-index: 20;
+          pointer-events: none;
+        }
+      </style>
+
+      <script>
+        (function () {
+          var S = '[data-composition-id="ui-3d-reveal"]';
+          var tl = gsap.timeline({ paused: true });
+
+          var wrapper = document.querySelector(S + " .card-wrapper");
+          var scene = document.querySelector(S + " .scene");
+          var cardGlow = document.querySelector(S + " .card-glow");
+
+          // ── Calculate intro stroke lengths ──
+          document.querySelectorAll(S + " .il-stroke").forEach(function (el) {
+            var len =
+              el.tagName === "circle"
+                ? 2 * Math.PI * parseFloat(el.getAttribute("r"))
+                : el.getTotalLength();
+            el.style.strokeDasharray = len;
+            el.style.strokeDashoffset = len;
+          });
+
+          // ── Calculate outro stroke lengths ──
+          document.querySelectorAll(S + " .ol-stroke").forEach(function (el) {
+            var len =
+              el.tagName === "circle"
+                ? 2 * Math.PI * parseFloat(el.getAttribute("r"))
+                : el.getTotalLength();
+            el.style.strokeDasharray = len;
+            el.style.strokeDashoffset = len;
+          });
+
+          // ─────────────────────────────────────────────────────
+          // INITIAL STATE
+          // ─────────────────────────────────────────────────────
+          gsap.set(wrapper, { opacity: 0, scale: 0.74, rotationY: 0, y: 24 });
+          gsap.set(
+            [
+              S + " .fig-toolbar",
+              S + " .fig-layers",
+              S + " .fig-props",
+              S + " .fig-canvas",
+              S + " .layer-item",
+              S + " .selection-ring",
+            ],
+            { opacity: 0 },
+          );
+          gsap.set(S + " .fig-toolbar", { y: -10 });
+          gsap.set(S + " .fig-layers", { x: -16 });
+          gsap.set(S + " .fig-props", { x: 16 });
+          gsap.set(S + " .layer-item", { x: -8 });
+          gsap.set(S + " .artboard", { scale: 0.94, opacity: 0 });
+
+          // ═════════════════════════════════════════════════════
+          // PHASE 0 — LOGO INTRO  (0 – 1.35s)
+          // Stroke draw cascade → color fill flash → scale to 0
+          // ═════════════════════════════════════════════════════
+
+          tl.to(
+            S + " .il-stroke-1",
+            { strokeDashoffset: 0, duration: 0.4, ease: "power1.inOut" },
+            0.0,
+          );
+          tl.to(
+            S + " .il-stroke-2",
+            { strokeDashoffset: 0, duration: 0.4, ease: "power1.inOut" },
+            0.06,
+          );
+          tl.to(
+            S + " .il-stroke-3",
+            { strokeDashoffset: 0, duration: 0.4, ease: "power1.inOut" },
+            0.12,
+          );
+          tl.to(
+            S + " .il-stroke-4",
+            { strokeDashoffset: 0, duration: 0.4, ease: "power1.inOut" },
+            0.18,
+          );
+          tl.to(
+            S + " .il-stroke-5",
+            { strokeDashoffset: 0, duration: 0.4, ease: "power1.inOut" },
+            0.24,
+          );
+
+          tl.to(S + " .il-fill-1", { opacity: 1, duration: 0.08 }, 0.5);
+          tl.to(S + " .il-fill-2", { opacity: 1, duration: 0.08 }, 0.54);
+          tl.to(S + " .il-fill-3", { opacity: 1, duration: 0.08 }, 0.58);
+          tl.to(S + " .il-fill-4", { opacity: 1, duration: 0.08 }, 0.62);
+          tl.to(S + " .il-fill-5", { opacity: 1, duration: 0.08 }, 0.66);
+          tl.to(S + " .il-stroke", { opacity: 0.3, duration: 0.15 }, 0.6);
+
+          // Scale the logo down to nothing
+          tl.to(S + " .il-stroke", { opacity: 0, duration: 0.2 }, 1.0);
+          tl.to(
+            S + " .intro-logo",
+            {
+              scale: 0,
+              transformOrigin: "95px 142.5px",
+              duration: 0.35,
+              ease: "power2.in",
+            },
+            1.0,
+          );
+
+          // ═════════════════════════════════════════════════════
+          // PHASE 1 — FLAT REVEAL  (1.5 – 3.4s)
+          // ═════════════════════════════════════════════════════
+          var T = 1.5;
+
+          tl.to(
+            wrapper,
+            {
+              opacity: 1,
+              scale: 0.79,
+              y: 0,
+              duration: 0.55,
+              ease: "expo.out",
+            },
+            T + 0.0,
+          );
+
+          tl.to(
+            cardGlow,
+            {
+              opacity: 0.5,
+              duration: 0.8,
+              ease: "power2.out",
+            },
+            T + 0.05,
+          );
+
+          tl.to(
+            S + " .fig-toolbar",
+            {
+              opacity: 1,
+              y: 0,
+              duration: 0.4,
+              ease: "power2.out",
+            },
+            T + 0.23,
+          );
+
+          tl.to(
+            S + " .fig-layers",
+            {
+              opacity: 1,
+              x: 0,
+              duration: 0.45,
+              ease: "expo.out",
+            },
+            T + 0.35,
+          );
+
+          tl.to(
+            S + " .fig-props",
+            {
+              opacity: 1,
+              x: 0,
+              duration: 0.45,
+              ease: "expo.out",
+            },
+            T + 0.37,
+          );
+
+          tl.to(
+            S + " .fig-canvas",
+            {
+              opacity: 1,
+              duration: 0.4,
+              ease: "power2.out",
+            },
+            T + 0.45,
+          );
+
+          tl.to(
+            S + " .artboard",
+            {
+              opacity: 1,
+              scale: 1,
+              duration: 0.55,
+              ease: "back.out(1.4)",
+            },
+            T + 0.5,
+          );
+
+          tl.to(
+            S + " .layer-item",
+            {
+              opacity: 1,
+              x: 0,
+              duration: 0.35,
+              stagger: { each: 0.045, ease: "power1.in" },
+              ease: "power2.out",
+            },
+            T + 0.57,
+          );
+
+          tl.to(
+            S + " .selection-ring",
+            {
+              opacity: 1,
+              duration: 0.25,
+              ease: "power2.out",
+            },
+            T + 1.25,
+          );
+
+          // ═════════════════════════════════════════════════════
+          // PHASE 2 — CAMERA PUSH  (3.5 – 4.8s)
+          // Bigger zoom: 0.79 → 1.15 so the UI fills the frame
+          // ═════════════════════════════════════════════════════
+
+          tl.to(
+            wrapper,
+            {
+              scale: 1.15,
+              duration: 1.3,
+              ease: "power3.inOut",
+            },
+            3.5,
+          );
+
+          tl.to(
+            cardGlow,
+            {
+              opacity: 0.85,
+              scale: 1.25,
+              duration: 1.2,
+              ease: "power2.inOut",
+            },
+            3.5,
+          );
+
+          // ═════════════════════════════════════════════════════
+          // PHASE 3 — 3D TILT  (4.2 – 5.55s)
+          // Steeper angle (-34°) for more dramatic depth reveal
+          // ═════════════════════════════════════════════════════
+
+          tl.to(
+            wrapper,
+            {
+              rotationY: -34,
+              duration: 1.35,
+              ease: "expo.out",
+            },
+            4.2,
+          );
+
+          tl.to(
+            wrapper,
+            {
+              y: -16,
+              duration: 1.1,
+              ease: "power2.out",
+            },
+            4.3,
+          );
+
+          // ═════════════════════════════════════════════════════
+          // PHASE 4 — 3D HOLD  (5.55 – 7.3s)
+          // ═════════════════════════════════════════════════════
+
+          tl.to(
+            wrapper,
+            {
+              y: -8,
+              rotationY: -31,
+              duration: 0.9,
+              ease: "sine.inOut",
+            },
+            5.55,
+          );
+
+          tl.to(
+            wrapper,
+            {
+              y: -20,
+              rotationY: -35,
+              duration: 0.9,
+              ease: "sine.inOut",
+            },
+            6.45,
+          );
+
+          tl.to(
+            cardGlow,
+            {
+              opacity: 0.7,
+              duration: 0.9,
+              ease: "sine.inOut",
+              yoyo: true,
+              repeat: 1,
+            },
+            5.55,
+          );
+
+          // ═════════════════════════════════════════════════════
+          // SLIDE OFF — 3D depth fly-away  (7.3 – 7.85s)
+          // Scene x exits left. Wrapper z shrinks into distance.
+          // Deeper z (-4000) + steeper rotation (-55°) = very
+          // dramatic 3D exit — card turns away and vanishes.
+          // ═════════════════════════════════════════════════════
+
+          tl.to(
+            scene,
+            {
+              x: -2200,
+              duration: 0.55,
+              ease: "power4.in",
+            },
+            7.3,
+          );
+
+          tl.to(
+            wrapper,
+            {
+              z: -7500,
+              rotationY: -65,
+              duration: 0.55,
+              ease: "power4.in",
+            },
+            7.3,
+          );
+
+          tl.to(
+            cardGlow,
+            {
+              opacity: 0,
+              duration: 0.3,
+              ease: "power3.in",
+            },
+            7.3,
+          );
+
+          // ═════════════════════════════════════════════════════
+          // OUTRO — LOGO BUILD + TAGLINE + PILL  (7.9 – 13s)
+          // ═════════════════════════════════════════════════════
+          var O = 7.9;
+
+          tl.set(S + " .outro-layer", { opacity: 1 }, O);
+
+          // Stroke draw cascade
+          tl.to(
+            S + " .ol-stroke-1",
+            { strokeDashoffset: 0, duration: 0.8, ease: "power1.inOut" },
+            O + 0.0,
+          );
+          tl.to(
+            S + " .ol-stroke-2",
+            { strokeDashoffset: 0, duration: 0.8, ease: "power1.inOut" },
+            O + 0.15,
+          );
+          tl.to(
+            S + " .ol-stroke-3",
+            { strokeDashoffset: 0, duration: 0.8, ease: "power1.inOut" },
+            O + 0.3,
+          );
+          tl.to(
+            S + " .ol-stroke-4",
+            { strokeDashoffset: 0, duration: 0.8, ease: "power1.inOut" },
+            O + 0.45,
+          );
+          tl.to(
+            S + " .ol-stroke-5",
+            { strokeDashoffset: 0, duration: 0.8, ease: "power1.inOut" },
+            O + 0.6,
+          );
+
+          // Color fill cascade
+          tl.to(S + " .ol-fill-1", { opacity: 1, duration: 0.15, ease: "power1.out" }, O + 1.4);
+          tl.to(S + " .ol-fill-2", { opacity: 1, duration: 0.15, ease: "power1.out" }, O + 1.55);
+          tl.to(S + " .ol-fill-3", { opacity: 1, duration: 0.15, ease: "power1.out" }, O + 1.7);
+          tl.to(S + " .ol-fill-4", { opacity: 1, duration: 0.15, ease: "power1.out" }, O + 1.85);
+          tl.to(S + " .ol-fill-5", { opacity: 1, duration: 0.15, ease: "power1.out" }, O + 2.0);
+          tl.to(S + " .ol-stroke", { opacity: 0.3, duration: 0.4, ease: "none" }, O + 1.8);
+
+          // Subtle scale settle
+          tl.fromTo(
+            S + " .outro-logo",
+            { scale: 1, transformOrigin: "80px 120px" },
+            { scale: 1.04, duration: 0.2, ease: "power2.out" },
+            O + 2.3,
+          );
+          tl.to(
+            S + " .outro-logo",
+            {
+              scale: 1,
+              transformOrigin: "80px 120px",
+              duration: 0.2,
+              ease: "power2.inOut",
+            },
+            O + 2.5,
+          );
+
+          // Tagline letter stagger
+          var letters = document.querySelectorAll(S + " .otl");
+          for (var k = 0; k < letters.length; k++) {
+            tl.fromTo(
+              letters[k],
+              { opacity: 0, y: 8 },
+              { opacity: 1, y: 0, duration: 0.12, ease: "power2.out" },
+              O + 2.8 + k * 0.025,
+            );
+          }
+
+          // URL pill: stroke draw → fill → text
+          tl.to(
+            S + " .url-border",
+            {
+              strokeDashoffset: 0,
+              duration: 0.35,
+              ease: "power1.inOut",
+            },
+            O + 3.8,
+          );
+          tl.to(S + " .url-bg", { opacity: 1, duration: 0.15 }, O + 4.15);
+          tl.to(S + " .url-text", { opacity: 1, duration: 0.2 }, O + 4.2);
+
+          // Fade to black
+          tl.to(
+            S + " .outro-fade",
+            {
+              opacity: 1,
+              duration: 0.6,
+              ease: "none",
+            },
+            O + 4.8,
+          );
+
+          window.__timelines = window.__timelines || {};
+          window.__timelines["ui-3d-reveal"] = tl;
+        })();
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/us-map-bubble/us-map-bubble.html b/docs/public/catalog/blocks/us-map-bubble/us-map-bubble.html
new file mode 100644
index 0000000000..943269a942
--- /dev/null
+++ b/docs/public/catalog/blocks/us-map-bubble/us-map-bubble.html
@@ -0,0 +1,477 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>US Bubble Map</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=block"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/topojson-client@3.1.0/dist/topojson-client.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background-color: #0f172a;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="us-map-bubble"
+      data-composition-id="us-map-bubble"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="12"
+    >
+      <div class="map-container">
+        <div class="header">
+          <h1 class="headline">Top 20 US Cities by Population</h1>
+          <p class="subtitle">Proportional bubble markers by metropolitan population</p>
+        </div>
+
+        <svg class="map-svg" viewBox="0 0 1400 820" preserveAspectRatio="xMidYMid meet">
+          <g class="states-group"></g>
+          <g class="connections-group"></g>
+          <g class="bubbles-group"></g>
+          <g class="callouts-group"></g>
+        </svg>
+
+        <div class="source">Source: U.S. Census Bureau, 2024</div>
+      </div>
+
+      <style>
+        #us-map-bubble {
+          width: 1920px;
+          height: 1080px;
+          background: linear-gradient(145deg, #0f172a 0%, #1e293b 100%);
+          font-family: "Inter", sans-serif;
+          color: #e2e8f0;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          overflow: hidden;
+        }
+
+        #us-map-bubble .map-container {
+          width: 1700px;
+          height: 950px;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          position: relative;
+        }
+
+        #us-map-bubble .header {
+          text-align: center;
+          margin-bottom: 20px;
+        }
+
+        #us-map-bubble .headline {
+          font-size: 52px;
+          font-weight: 700;
+          letter-spacing: -0.02em;
+          color: #f8fafc;
+          clip-path: inset(0 100% 0 0);
+        }
+
+        #us-map-bubble .subtitle {
+          font-size: 20px;
+          font-weight: 300;
+          color: #94a3b8;
+          margin-top: 8px;
+          opacity: 0;
+        }
+
+        #us-map-bubble .map-svg {
+          width: 1500px;
+          height: 750px;
+          overflow: visible;
+        }
+
+        #us-map-bubble .state-path {
+          fill: #1e293b;
+          stroke: #334155;
+          stroke-width: 0.5;
+          opacity: 0;
+        }
+
+        #us-map-bubble .city-bubble {
+          fill: rgba(59, 130, 246, 0.6);
+          stroke: #ffffff;
+          stroke-width: 1;
+          transform-origin: center center;
+          transform: scale(0);
+        }
+
+        #us-map-bubble .city-pulse {
+          fill: none;
+          stroke: rgba(59, 130, 246, 0.4);
+          stroke-width: 2;
+          opacity: 0;
+        }
+
+        #us-map-bubble .callout-group {
+          opacity: 0;
+        }
+
+        #us-map-bubble .callout-line {
+          stroke: rgba(148, 163, 184, 0.5);
+          stroke-width: 1;
+          fill: none;
+        }
+
+        #us-map-bubble .callout-name {
+          font-size: 13px;
+          font-weight: 600;
+          fill: #f8fafc;
+        }
+
+        #us-map-bubble .callout-value {
+          font-size: 11px;
+          font-weight: 400;
+          fill: #94a3b8;
+        }
+
+        #us-map-bubble .connection-line {
+          stroke: rgba(59, 130, 246, 0.3);
+          stroke-width: 1;
+          fill: none;
+          stroke-dasharray: 6 4;
+        }
+
+        #us-map-bubble .source {
+          position: absolute;
+          bottom: 0;
+          right: 40px;
+          font-size: 12px;
+          color: #475569;
+          opacity: 0;
+        }
+      </style>
+
+      <script>
+        (function () {
+          var US_TOPO_URL = "https://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.json";
+
+          var cities = [
+            { name: "New York", lat: 40.7128, lon: -74.006, pop: 8300000 },
+            { name: "Los Angeles", lat: 34.0522, lon: -118.2437, pop: 3900000 },
+            { name: "Chicago", lat: 41.8781, lon: -87.6298, pop: 2700000 },
+            { name: "Houston", lat: 29.7604, lon: -95.3698, pop: 2300000 },
+            { name: "Phoenix", lat: 33.4484, lon: -112.074, pop: 1600000 },
+            { name: "Philadelphia", lat: 39.9526, lon: -75.1652, pop: 1600000 },
+            { name: "San Antonio", lat: 29.4241, lon: -98.4936, pop: 1400000 },
+            { name: "San Diego", lat: 32.7157, lon: -117.1611, pop: 1400000 },
+            { name: "Dallas", lat: 32.7767, lon: -96.797, pop: 1300000 },
+            { name: "Jacksonville", lat: 30.3322, lon: -81.6557, pop: 950000 },
+            { name: "Austin", lat: 30.2672, lon: -97.7431, pop: 960000 },
+            { name: "San Jose", lat: 37.3382, lon: -121.8863, pop: 1000000 },
+            { name: "Fort Worth", lat: 32.7555, lon: -97.3308, pop: 930000 },
+            { name: "Columbus", lat: 39.9612, lon: -82.9988, pop: 910000 },
+            { name: "Charlotte", lat: 35.2271, lon: -80.8431, pop: 870000 },
+            { name: "Indianapolis", lat: 39.7684, lon: -86.1581, pop: 880000 },
+            { name: "San Francisco", lat: 37.7749, lon: -122.4194, pop: 870000 },
+            { name: "Seattle", lat: 47.6062, lon: -122.3321, pop: 740000 },
+            { name: "Denver", lat: 39.7392, lon: -104.9903, pop: 710000 },
+            { name: "Nashville", lat: 36.1627, lon: -86.7816, pop: 690000 },
+          ];
+
+          var radiusScale = d3.scaleSqrt().domain([500000, 8500000]).range([6, 45]);
+
+          var svg = document.querySelector("#us-map-bubble .map-svg");
+          var statesGroup = svg.querySelector(".states-group");
+          var bubblesGroup = svg.querySelector(".bubbles-group");
+          var calloutsGroup = svg.querySelector(".callouts-group");
+          var connectionsGroup = svg.querySelector(".connections-group");
+          var tl = gsap.timeline({ paused: true });
+
+          function formatPop(n) {
+            if (n >= 1000000) {
+              return (n / 1000000).toFixed(1) + "M";
+            }
+            return (n / 1000).toFixed(0) + "K";
+          }
+
+          fetch(US_TOPO_URL)
+            .then(function (r) {
+              return r.json();
+            })
+            .then(function (us) {
+              var states = topojson.feature(us, us.objects.states).features;
+              var projection = d3.geoAlbersUsa().fitSize([1380, 800], {
+                type: "FeatureCollection",
+                features: states,
+              });
+              var path = d3.geoPath().projection(projection);
+
+              states.forEach(function (feature) {
+                var d = path(feature);
+                if (!d) return;
+
+                var el = document.createElementNS("http://www.w3.org/2000/svg", "path");
+                el.setAttribute("d", d);
+                el.setAttribute("class", "state-path");
+                statesGroup.appendChild(el);
+              });
+
+              var projectedCities = [];
+              cities.forEach(function (city) {
+                var coords = projection([city.lon, city.lat]);
+                if (!coords) return;
+                projectedCities.push({
+                  name: city.name,
+                  pop: city.pop,
+                  x: coords[0],
+                  y: coords[1],
+                  r: radiusScale(city.pop),
+                });
+              });
+
+              projectedCities.sort(function (a, b) {
+                return b.pop - a.pop;
+              });
+
+              var nycCoords = null;
+              projectedCities.forEach(function (city) {
+                if (city.name === "New York") {
+                  nycCoords = { x: city.x, y: city.y };
+                }
+              });
+
+              var connectionTargets = ["Los Angeles", "Chicago", "Houston", "Phoenix"];
+              connectionTargets.forEach(function (targetName) {
+                if (!nycCoords) return;
+                var target = null;
+                projectedCities.forEach(function (c) {
+                  if (c.name === targetName) target = c;
+                });
+                if (!target) return;
+
+                var midX = (nycCoords.x + target.x) / 2;
+                var midY = Math.min(nycCoords.y, target.y) - 60;
+
+                var pathD =
+                  "M " +
+                  nycCoords.x +
+                  " " +
+                  nycCoords.y +
+                  " Q " +
+                  midX +
+                  " " +
+                  midY +
+                  " " +
+                  target.x +
+                  " " +
+                  target.y;
+
+                var line = document.createElementNS("http://www.w3.org/2000/svg", "path");
+                line.setAttribute("d", pathD);
+                line.setAttribute("class", "connection-line");
+                connectionsGroup.appendChild(line);
+
+                var length = line.getTotalLength();
+                line.style.strokeDasharray = length;
+                line.style.strokeDashoffset = length;
+              });
+
+              projectedCities.forEach(function (city) {
+                var circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+                circle.setAttribute("cx", city.x);
+                circle.setAttribute("cy", city.y);
+                circle.setAttribute("r", city.r);
+                circle.setAttribute("class", "city-bubble");
+                circle.setAttribute("data-city", city.name);
+                bubblesGroup.appendChild(circle);
+              });
+
+              var pulseCircle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+              if (nycCoords) {
+                pulseCircle.setAttribute("cx", nycCoords.x);
+                pulseCircle.setAttribute("cy", nycCoords.y);
+                pulseCircle.setAttribute("r", radiusScale(8300000));
+                pulseCircle.setAttribute("class", "city-pulse");
+                bubblesGroup.appendChild(pulseCircle);
+              }
+
+              var top5 = projectedCities.slice(0, 5);
+              top5.forEach(function (city, i) {
+                var g = document.createElementNS("http://www.w3.org/2000/svg", "g");
+                g.setAttribute("class", "callout-group");
+
+                var offsetX = city.r + 12;
+                var offsetY = -8;
+
+                if (city.name === "Los Angeles" || city.name === "San Francisco") {
+                  offsetX = -(city.r + 80);
+                }
+
+                var calloutLine = document.createElementNS("http://www.w3.org/2000/svg", "line");
+                calloutLine.setAttribute("x1", city.x);
+                calloutLine.setAttribute("y1", city.y);
+                calloutLine.setAttribute("x2", city.x + offsetX);
+                calloutLine.setAttribute("y2", city.y + offsetY);
+                calloutLine.setAttribute("class", "callout-line");
+                g.appendChild(calloutLine);
+
+                var nameText = document.createElementNS("http://www.w3.org/2000/svg", "text");
+                nameText.setAttribute("x", city.x + offsetX + (offsetX > 0 ? 6 : -6));
+                nameText.setAttribute("y", city.y + offsetY - 2);
+                nameText.setAttribute("class", "callout-name");
+                if (offsetX < 0) {
+                  nameText.setAttribute("text-anchor", "end");
+                }
+                nameText.textContent = city.name;
+                g.appendChild(nameText);
+
+                var valueText = document.createElementNS("http://www.w3.org/2000/svg", "text");
+                valueText.setAttribute("x", city.x + offsetX + (offsetX > 0 ? 6 : -6));
+                valueText.setAttribute("y", city.y + offsetY + 14);
+                valueText.setAttribute("class", "callout-value");
+                if (offsetX < 0) {
+                  valueText.setAttribute("text-anchor", "end");
+                }
+                valueText.textContent = formatPop(city.pop) + " residents";
+                g.appendChild(valueText);
+
+                calloutsGroup.appendChild(g);
+              });
+
+              buildTimeline(projectedCities, pulseCircle);
+            });
+
+          function buildTimeline(projectedCities, pulseCircle) {
+            var statePaths = statesGroup.querySelectorAll(".state-path");
+            var bubbles = bubblesGroup.querySelectorAll(".city-bubble");
+            var callouts = calloutsGroup.querySelectorAll(".callout-group");
+            var connections = connectionsGroup.querySelectorAll(".connection-line");
+
+            tl.to(
+              "#us-map-bubble .headline",
+              {
+                clipPath: "inset(0 0% 0 0)",
+                duration: 1.0,
+                ease: "power2.inOut",
+              },
+              0,
+            );
+
+            tl.to(
+              "#us-map-bubble .subtitle",
+              {
+                opacity: 1,
+                duration: 0.6,
+                ease: "power2.out",
+              },
+              0.4,
+            );
+
+            tl.to(
+              statePaths,
+              {
+                opacity: 0.8,
+                duration: 0.6,
+                ease: "power2.out",
+              },
+              0.8,
+            );
+
+            tl.to(
+              bubbles,
+              {
+                scale: 1,
+                duration: 0.5,
+                stagger: {
+                  each: 0.08,
+                  from: "start",
+                },
+                ease: "back.out(1.7)",
+              },
+              1.5,
+            );
+
+            tl.set(callouts, { x: 20 }, 3.9);
+
+            tl.to(
+              callouts,
+              {
+                opacity: 1,
+                x: 0,
+                duration: 0.6,
+                stagger: 0.3,
+                ease: "power2.out",
+              },
+              4.0,
+            );
+
+            connections.forEach(function (line) {
+              tl.to(
+                line,
+                {
+                  strokeDashoffset: 0,
+                  duration: 1.2,
+                  ease: "power2.inOut",
+                },
+                6.0,
+              );
+            });
+
+            if (pulseCircle) {
+              tl.to(
+                pulseCircle,
+                {
+                  opacity: 1,
+                  duration: 0.01,
+                },
+                8.0,
+              );
+
+              tl.fromTo(
+                pulseCircle,
+                {
+                  attr: { r: radiusScale(8300000) },
+                  opacity: 0.6,
+                },
+                {
+                  attr: { r: radiusScale(8300000) + 30 },
+                  opacity: 0,
+                  duration: 1.5,
+                  repeat: 2,
+                  ease: "power2.out",
+                },
+                8.0,
+              );
+            }
+
+            tl.to(
+              "#us-map-bubble .source",
+              {
+                opacity: 1,
+                duration: 0.5,
+                ease: "power2.out",
+              },
+              5.5,
+            );
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines["us-map-bubble"] = tl;
+          }
+        })();
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/us-map-flow/us-map-flow.html b/docs/public/catalog/blocks/us-map-flow/us-map-flow.html
new file mode 100644
index 0000000000..1805d7c3a5
--- /dev/null
+++ b/docs/public/catalog/blocks/us-map-flow/us-map-flow.html
@@ -0,0 +1,429 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>US Flow Map</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=block"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/topojson-client@3.1.0/dist/topojson-client.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0f172a;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="us-map-flow"
+      data-composition-id="us-map-flow"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="12"
+    >
+      <div class="flow-header">
+        <h1 class="flow-headline">Interstate Flow Connections</h1>
+        <p class="flow-subtitle">Relative volume of major city-to-city corridors</p>
+      </div>
+
+      <svg class="flow-svg" viewBox="0 0 1920 1080" preserveAspectRatio="xMidYMid meet">
+        <defs>
+          <filter id="arc-glow">
+            <feGaussianBlur stdDeviation="3" result="blur" />
+            <feMerge>
+              <feMergeNode in="blur" />
+              <feMergeNode in="SourceGraphic" />
+            </feMerge>
+          </filter>
+          <filter id="dot-glow">
+            <feGaussianBlur stdDeviation="4" result="blur" />
+            <feMerge>
+              <feMergeNode in="blur" />
+              <feMergeNode in="SourceGraphic" />
+            </feMerge>
+          </filter>
+        </defs>
+        <g class="states-group"></g>
+        <g class="arcs-group"></g>
+        <g class="traveling-dots-group"></g>
+        <g class="city-dots-group"></g>
+        <g class="city-labels-group"></g>
+      </svg>
+
+      <div class="flow-source">Source: Illustrative data</div>
+
+      <style>
+        #us-map-flow {
+          position: relative;
+          width: 1920px;
+          height: 1080px;
+          background: linear-gradient(145deg, #0f172a 0%, #1e293b 100%);
+          font-family: "Inter", sans-serif;
+          color: #ffffff;
+          overflow: hidden;
+        }
+
+        #us-map-flow .flow-header {
+          position: absolute;
+          top: 40px;
+          left: 60px;
+          z-index: 2;
+        }
+
+        #us-map-flow .flow-headline {
+          font-size: 48px;
+          font-weight: 700;
+          color: #f8fafc;
+          letter-spacing: -0.02em;
+          clip-path: inset(0 100% 0 0);
+        }
+
+        #us-map-flow .flow-subtitle {
+          font-size: 22px;
+          font-weight: 300;
+          color: #94a3b8;
+          margin-top: 8px;
+          opacity: 0;
+        }
+
+        #us-map-flow .flow-svg {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1920px;
+          height: 1080px;
+        }
+
+        #us-map-flow .state-path {
+          fill: #1e293b;
+          stroke: #334155;
+          stroke-width: 0.5;
+          opacity: 0;
+        }
+
+        #us-map-flow .arc-path {
+          fill: none;
+          stroke: #3b82f6;
+          filter: url(#arc-glow);
+          stroke-linecap: round;
+        }
+
+        #us-map-flow .city-dot {
+          fill: #ffffff;
+          filter: url(#dot-glow);
+          opacity: 0;
+        }
+
+        #us-map-flow .city-label {
+          fill: #cbd5e1;
+          font-family: "Inter", sans-serif;
+          font-size: 13px;
+          font-weight: 500;
+          opacity: 0;
+        }
+
+        #us-map-flow .traveling-dot {
+          fill: #60a5fa;
+          opacity: 0;
+        }
+
+        #us-map-flow .flow-source {
+          position: absolute;
+          bottom: 30px;
+          right: 60px;
+          font-size: 14px;
+          font-weight: 400;
+          color: #475569;
+          opacity: 0;
+        }
+      </style>
+
+      <script>
+        (function () {
+          var NS = "http://www.w3.org/2000/svg";
+          var root = document.getElementById("us-map-flow");
+          var svg = root.querySelector(".flow-svg");
+          var statesGroup = svg.querySelector(".states-group");
+          var arcsGroup = svg.querySelector(".arcs-group");
+          var travelingDotsGroup = svg.querySelector(".traveling-dots-group");
+          var cityDotsGroup = svg.querySelector(".city-dots-group");
+          var cityLabelsGroup = svg.querySelector(".city-labels-group");
+
+          var tl = gsap.timeline({ paused: true });
+
+          /* --- City data: name → [longitude, latitude] (D3 uses [lon, lat]) --- */
+          var cities = {
+            "San Francisco": [-122.4194, 37.7749],
+            "New York": [-74.006, 40.7128],
+            "Los Angeles": [-118.2437, 34.0522],
+            Chicago: [-87.6298, 41.8781],
+            Seattle: [-122.3321, 47.6062],
+            Austin: [-97.7431, 30.2672],
+            Miami: [-80.1918, 25.7617],
+            Denver: [-104.9903, 39.7392],
+            Houston: [-95.3698, 29.7604],
+            Atlanta: [-84.388, 33.749],
+            Boston: [-71.0589, 42.3601],
+            Dallas: [-96.797, 32.7767],
+          };
+
+          /* --- Flow connections --- */
+          var flows = [
+            { from: "San Francisco", to: "New York", volume: 100 },
+            { from: "Los Angeles", to: "Chicago", volume: 85 },
+            { from: "Seattle", to: "Austin", volume: 70 },
+            { from: "New York", to: "Miami", volume: 90 },
+            { from: "Chicago", to: "Denver", volume: 65 },
+            { from: "Houston", to: "Atlanta", volume: 75 },
+            { from: "Boston", to: "San Francisco", volume: 80 },
+            { from: "Denver", to: "Los Angeles", volume: 60 },
+            { from: "Atlanta", to: "Dallas", volume: 55 },
+            { from: "Miami", to: "New York", volume: 50 },
+            { from: "Austin", to: "Seattle", volume: 45 },
+            { from: "Dallas", to: "Chicago", volume: 40 },
+          ];
+
+          var maxVolume = 100;
+          var minWidth = 1.5;
+          var maxWidth = 4;
+
+          /* --- Projection centered on continental US --- */
+          var projection = d3.geoAlbersUsa().scale(1300).translate([960, 560]);
+
+          var pathGen = d3.geoPath().projection(projection);
+
+          /* --- Project city positions --- */
+          var projected = {};
+          var cityNames = Object.keys(cities);
+          cityNames.forEach(function (name) {
+            var p = projection(cities[name]);
+            if (p) {
+              projected[name] = { x: p[0], y: p[1] };
+            }
+          });
+
+          /* --- Unique city list for dots/labels (only those that project) --- */
+          var visibleCities = Object.keys(projected);
+
+          /* --- Build arc path string (quadratic bezier curving upward) --- */
+          function buildArcPath(fromName, toName) {
+            var p1 = projected[fromName];
+            var p2 = projected[toName];
+            if (!p1 || !p2) return null;
+            var x1 = p1.x;
+            var y1 = p1.y;
+            var x2 = p2.x;
+            var y2 = p2.y;
+            var midX = (x1 + x2) / 2;
+            var midY = Math.min(y1, y2) - Math.abs(x2 - x1) * 0.15;
+            return "M" + x1 + "," + y1 + " Q" + midX + "," + midY + " " + x2 + "," + y2;
+          }
+
+          /* --- Load topology and render states --- */
+          d3.json("https://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.json").then(function (us) {
+            var states = topojson.feature(us, us.objects.states).features;
+
+            states.forEach(function (feature) {
+              var d = pathGen(feature);
+              if (!d) return;
+              var path = document.createElementNS(NS, "path");
+              path.setAttribute("d", d);
+              path.setAttribute("class", "state-path");
+              statesGroup.appendChild(path);
+            });
+
+            /* --- Create arc paths --- */
+            var arcPaths = [];
+            flows.forEach(function (flow) {
+              var d = buildArcPath(flow.from, flow.to);
+              if (!d) return;
+
+              var strokeW = minWidth + (flow.volume / maxVolume) * (maxWidth - minWidth);
+              var arcOpacity = 0.4 + (flow.volume / maxVolume) * 0.6;
+
+              var path = document.createElementNS(NS, "path");
+              path.setAttribute("d", d);
+              path.setAttribute("class", "arc-path");
+              path.setAttribute("stroke-width", strokeW);
+              path.style.opacity = arcOpacity;
+              arcsGroup.appendChild(path);
+
+              var len = path.getTotalLength();
+              path.style.strokeDasharray = len;
+              path.style.strokeDashoffset = len;
+
+              arcPaths.push({ el: path, length: len });
+            });
+
+            /* --- Create city dots --- */
+            visibleCities.forEach(function (name) {
+              var p = projected[name];
+              var circle = document.createElementNS(NS, "circle");
+              circle.setAttribute("cx", p.x);
+              circle.setAttribute("cy", p.y);
+              circle.setAttribute("r", 5);
+              circle.setAttribute("class", "city-dot");
+              cityDotsGroup.appendChild(circle);
+            });
+
+            /* --- Create city labels with offset --- */
+            visibleCities.forEach(function (name) {
+              var p = projected[name];
+              var text = document.createElementNS(NS, "text");
+              text.setAttribute("x", p.x + 10);
+              text.setAttribute("y", p.y - 10);
+              text.setAttribute("class", "city-label");
+              text.textContent = name;
+              cityLabelsGroup.appendChild(text);
+            });
+
+            /* --- Create traveling dots (one per arc) --- */
+            var travelingDots = [];
+            arcPaths.forEach(function () {
+              var dot = document.createElementNS(NS, "circle");
+              dot.setAttribute("r", 3);
+              dot.setAttribute("class", "traveling-dot");
+              travelingDotsGroup.appendChild(dot);
+              travelingDots.push(dot);
+            });
+
+            /* ===== GSAP TIMELINE ===== */
+
+            /* 0s: headline clip-path wipe */
+            tl.to(
+              "#us-map-flow .flow-headline",
+              {
+                clipPath: "inset(0 0% 0 0)",
+                duration: 1,
+                ease: "power2.inOut",
+              },
+              0,
+            );
+
+            /* 0.3s: subtitle fade */
+            tl.to(
+              "#us-map-flow .flow-subtitle",
+              {
+                opacity: 1,
+                duration: 0.5,
+                ease: "power2.out",
+              },
+              0.3,
+            );
+
+            /* 0.6s: states fade in */
+            tl.to(
+              "#us-map-flow .state-path",
+              {
+                opacity: 1,
+                duration: 0.8,
+                ease: "power2.out",
+              },
+              0.6,
+            );
+
+            /* 1.5s: city dots pop in */
+            tl.to(
+              "#us-map-flow .city-dot",
+              {
+                opacity: 1,
+                scale: 1,
+                transformOrigin: "center center",
+                duration: 0.4,
+                stagger: 0.05,
+                ease: "back.out(1.7)",
+              },
+              1.5,
+            );
+
+            /* 2.5s: city labels fade in */
+            tl.to(
+              "#us-map-flow .city-label",
+              {
+                opacity: 1,
+                duration: 0.3,
+                stagger: 0.05,
+                ease: "power2.out",
+              },
+              2.5,
+            );
+
+            /* 3.5s: arcs draw sequentially */
+            arcPaths.forEach(function (arc, i) {
+              tl.to(
+                arc.el,
+                {
+                  strokeDashoffset: 0,
+                  duration: 1,
+                  ease: "power2.inOut",
+                },
+                3.5 + i * 0.2,
+              );
+            });
+
+            /* 7.0s: traveling dots animate along paths */
+            arcPaths.forEach(function (arc, i) {
+              var dot = travelingDots[i];
+              var pathEl = arc.el;
+              var pathLength = arc.length;
+
+              tl.set(dot, { opacity: 0.9 }, 7.0 + i * 0.1);
+
+              var progress = { value: 0 };
+              tl.to(
+                progress,
+                {
+                  value: 1,
+                  duration: 1.5,
+                  ease: "power1.inOut",
+                  onUpdate: function () {
+                    var pt = pathEl.getPointAtLength(progress.value * pathLength);
+                    dot.setAttribute("cx", pt.x);
+                    dot.setAttribute("cy", pt.y);
+                  },
+                  onComplete: function () {
+                    gsap.to(dot, { opacity: 0, duration: 0.3 });
+                  },
+                },
+                7.0 + i * 0.1,
+              );
+            });
+
+            /* 9.0s: source fade in */
+            tl.to(
+              "#us-map-flow .flow-source",
+              {
+                opacity: 1,
+                duration: 0.6,
+                ease: "power2.out",
+              },
+              9.0,
+            );
+
+            /* Register timeline */
+            window.__timelines = window.__timelines || {};
+            window.__timelines["us-map-flow"] = tl;
+          });
+        })();
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/us-map-hex/us-map-hex.html b/docs/public/catalog/blocks/us-map-hex/us-map-hex.html
new file mode 100644
index 0000000000..3d8ec4faf7
--- /dev/null
+++ b/docs/public/catalog/blocks/us-map-hex/us-map-hex.html
@@ -0,0 +1,559 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>US Hex Grid Map</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=block"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: linear-gradient(145deg, #0f172a 0%, #1e293b 100%);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="us-map-hex"
+      data-composition-id="us-map-hex"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="10"
+    >
+      <div class="map-header">
+        <h1 class="map-headline">Median Household Income by State</h1>
+        <p class="map-subtitle">American Community Survey, 2024</p>
+      </div>
+
+      <svg class="hex-svg" viewBox="0 0 1920 1080" preserveAspectRatio="xMidYMid meet">
+        <g class="hex-grid"></g>
+        <g class="hex-labels"></g>
+      </svg>
+
+      <div class="map-legend">
+        <div class="legend-label legend-low">$52k</div>
+        <div class="legend-bar"></div>
+        <div class="legend-label legend-high">$107k</div>
+      </div>
+
+      <div class="map-source">Source: U.S. Census Bureau, American Community Survey 2024</div>
+
+      <style>
+        #us-map-hex {
+          width: 1920px;
+          height: 1080px;
+          background: linear-gradient(145deg, #0f172a 0%, #1e293b 100%);
+          font-family: "Inter", sans-serif;
+          color: #f8fafc;
+          position: relative;
+          overflow: hidden;
+        }
+
+        #us-map-hex .map-header {
+          position: absolute;
+          top: 48px;
+          left: 80px;
+          z-index: 2;
+        }
+
+        #us-map-hex .map-headline {
+          font-size: 48px;
+          font-weight: 700;
+          letter-spacing: -0.02em;
+          color: #f8fafc;
+          clip-path: inset(0 100% 0 0);
+          white-space: nowrap;
+        }
+
+        #us-map-hex .map-subtitle {
+          font-size: 20px;
+          font-weight: 400;
+          color: #94a3b8;
+          margin-top: 8px;
+          opacity: 0;
+        }
+
+        #us-map-hex .hex-svg {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1920px;
+          height: 1080px;
+        }
+
+        #us-map-hex .hex-poly {
+          stroke: #0f172a;
+          stroke-width: 2;
+          opacity: 0;
+        }
+
+        #us-map-hex .hex-text {
+          font-family: "Inter", sans-serif;
+          font-size: 14px;
+          font-weight: 600;
+          fill: #0f172a;
+          text-anchor: middle;
+          dominant-baseline: central;
+          pointer-events: none;
+          opacity: 0;
+        }
+
+        #us-map-hex .hex-text.light-text {
+          fill: #fef3c7;
+        }
+
+        #us-map-hex .map-legend {
+          position: absolute;
+          bottom: 80px;
+          left: 80px;
+          display: flex;
+          align-items: center;
+          gap: 12px;
+          opacity: 0;
+        }
+
+        #us-map-hex .legend-bar {
+          width: 240px;
+          height: 16px;
+          border-radius: 4px;
+          background: linear-gradient(90deg, #451a03 0%, #f59e0b 50%, #fef3c7 100%);
+        }
+
+        #us-map-hex .legend-label {
+          font-size: 14px;
+          font-weight: 500;
+          color: #94a3b8;
+        }
+
+        #us-map-hex .map-source {
+          position: absolute;
+          bottom: 48px;
+          left: 80px;
+          font-size: 12px;
+          color: #475569;
+          opacity: 0;
+        }
+      </style>
+
+      <script>
+        (function () {
+          var NS = "http://www.w3.org/2000/svg";
+          var hexGrid = document.querySelector("#us-map-hex .hex-grid");
+          var hexLabels = document.querySelector("#us-map-hex .hex-labels");
+
+          /* --- State grid positions (col, row) --- */
+          var positions = {
+            ME: [10, 0],
+            VT: [9, 1],
+            NH: [10, 1],
+            WA: [0, 2],
+            MT: [1, 2],
+            ND: [2, 2],
+            MN: [3, 2],
+            WI: [4, 2],
+            MI: [7, 2],
+            NY: [8, 2],
+            MA: [9, 2],
+            RI: [10, 2],
+            ID: [0, 3],
+            WY: [1, 3],
+            SD: [2, 3],
+            IA: [3, 3],
+            IL: [4, 3],
+            IN: [5, 3],
+            OH: [6, 3],
+            PA: [7, 3],
+            NJ: [8, 3],
+            CT: [9, 3],
+            OR: [0, 4],
+            NV: [1, 4],
+            CO: [2, 4],
+            NE: [3, 4],
+            MO: [4, 4],
+            KY: [5, 4],
+            WV: [6, 4],
+            VA: [7, 4],
+            MD: [8, 4],
+            DE: [9, 4],
+            CA: [0, 5],
+            UT: [1, 5],
+            NM: [2, 5],
+            KS: [3, 5],
+            AR: [4, 5],
+            TN: [5, 5],
+            NC: [6, 5],
+            SC: [7, 5],
+            DC: [8, 5],
+            AZ: [1, 6],
+            OK: [3, 6],
+            LA: [4, 6],
+            MS: [5, 6],
+            AL: [6, 6],
+            GA: [7, 6],
+            HI: [0, 7],
+            TX: [3, 7],
+            FL: [7, 7],
+            AK: [0, 8],
+          };
+
+          /* --- Median household income (2024 ACS, rounded to nearest $1k) --- */
+          var income = {
+            MD: 106998,
+            NJ: 101778,
+            MA: 101079,
+            CT: 92545,
+            HI: 91010,
+            NH: 90845,
+            WA: 90325,
+            CA: 89648,
+            CO: 87598,
+            VA: 87249,
+            UT: 86833,
+            MN: 84313,
+            AK: 83601,
+            NY: 81386,
+            RI: 81370,
+            IL: 79253,
+            OR: 76632,
+            DE: 75932,
+            WI: 72458,
+            NV: 71646,
+            VT: 71560,
+            PA: 71610,
+            ND: 71017,
+            NE: 70654,
+            TX: 70813,
+            AZ: 70821,
+            ID: 69973,
+            MT: 68091,
+            GA: 67992,
+            ME: 67587,
+            FL: 67917,
+            IA: 67684,
+            WY: 67249,
+            SD: 66894,
+            MI: 66986,
+            IN: 65834,
+            OH: 64018,
+            MO: 63594,
+            KS: 66354,
+            NC: 65070,
+            TN: 63426,
+            SC: 62064,
+            OK: 60438,
+            KY: 57584,
+            NM: 58257,
+            AL: 57563,
+            LA: 55728,
+            WV: 52520,
+            AR: 53289,
+            MS: 52434,
+            DC: 101722,
+          };
+
+          /* --- Color interpolation --- */
+          var incomeValues = [];
+          var stateKeys = Object.keys(income);
+          for (var i = 0; i < stateKeys.length; i++) {
+            incomeValues.push(income[stateKeys[i]]);
+          }
+          var minIncome = Math.min.apply(null, incomeValues);
+          var maxIncome = Math.max.apply(null, incomeValues);
+
+          function lerp(a, b, t) {
+            return a + (b - a) * t;
+          }
+
+          function hexToRgb(hex) {
+            var r = parseInt(hex.substring(1, 3), 16);
+            var g = parseInt(hex.substring(3, 5), 16);
+            var b = parseInt(hex.substring(5, 7), 16);
+            return [r, g, b];
+          }
+
+          var colorLow = hexToRgb("#451a03");
+          var colorMid = hexToRgb("#f59e0b");
+          var colorHigh = hexToRgb("#fef3c7");
+
+          function getColor(val) {
+            var t = (val - minIncome) / (maxIncome - minIncome);
+            var r, g, b;
+            if (t < 0.5) {
+              var t2 = t / 0.5;
+              r = Math.round(lerp(colorLow[0], colorMid[0], t2));
+              g = Math.round(lerp(colorLow[1], colorMid[1], t2));
+              b = Math.round(lerp(colorLow[2], colorMid[2], t2));
+            } else {
+              var t2 = (t - 0.5) / 0.5;
+              r = Math.round(lerp(colorMid[0], colorHigh[0], t2));
+              g = Math.round(lerp(colorMid[1], colorHigh[1], t2));
+              b = Math.round(lerp(colorMid[2], colorHigh[2], t2));
+            }
+            return "rgb(" + r + "," + g + "," + b + ")";
+          }
+
+          /* Determine if text should be light on dark hex */
+          function isLightText(val) {
+            var t = (val - minIncome) / (maxIncome - minIncome);
+            return t < 0.35;
+          }
+
+          /* --- Hex geometry (flat-top) --- */
+          var hexW = 80;
+          var hexS = hexW / 2;
+          var hexH = hexS * Math.sqrt(3);
+          var startX = 480;
+          var startY = 200;
+
+          function hexCenter(col, row) {
+            var cx = startX + col * (hexW * 0.75);
+            var cy = startY + row * hexH;
+            if (row % 2 === 1) {
+              cx += hexW * 0.375;
+            }
+            return [cx, cy];
+          }
+
+          function hexPoints(cx, cy) {
+            var pts = [
+              [cx - hexS, cy],
+              [cx - hexS / 2, cy - hexH / 2],
+              [cx + hexS / 2, cy - hexH / 2],
+              [cx + hexS, cy],
+              [cx + hexS / 2, cy + hexH / 2],
+              [cx - hexS / 2, cy + hexH / 2],
+            ];
+            var strs = [];
+            for (var i = 0; i < pts.length; i++) {
+              strs.push(pts[i][0].toFixed(2) + "," + pts[i][1].toFixed(2));
+            }
+            return strs.join(" ");
+          }
+
+          /* --- Compute center of all hexes for stagger distance --- */
+          var allCenters = [];
+          var allStates = Object.keys(positions);
+          for (var i = 0; i < allStates.length; i++) {
+            var pos = positions[allStates[i]];
+            var center = hexCenter(pos[0], pos[1]);
+            allCenters.push(center);
+          }
+          var avgCx = 0;
+          var avgCy = 0;
+          for (var i = 0; i < allCenters.length; i++) {
+            avgCx += allCenters[i][0];
+            avgCy += allCenters[i][1];
+          }
+          avgCx /= allCenters.length;
+          avgCy /= allCenters.length;
+
+          /* --- Create hex elements --- */
+          var hexPolys = [];
+          var hexTexts = [];
+          var distances = [];
+
+          for (var i = 0; i < allStates.length; i++) {
+            var st = allStates[i];
+            var pos = positions[st];
+            var center = hexCenter(pos[0], pos[1]);
+            var cx = center[0];
+            var cy = center[1];
+
+            var poly = document.createElementNS(NS, "polygon");
+            poly.setAttribute("points", hexPoints(cx, cy));
+            poly.setAttribute("fill", getColor(income[st]));
+            poly.setAttribute("class", "hex-poly");
+            poly.setAttribute("data-state", st);
+            hexGrid.appendChild(poly);
+            hexPolys.push(poly);
+
+            var text = document.createElementNS(NS, "text");
+            text.setAttribute("x", cx);
+            text.setAttribute("y", cy);
+            var textClass = "hex-text";
+            if (isLightText(income[st])) {
+              textClass += " light-text";
+            }
+            text.setAttribute("class", textClass);
+            text.textContent = st;
+            hexLabels.appendChild(text);
+            hexTexts.push(text);
+
+            var dx = cx - avgCx;
+            var dy = cy - avgCy;
+            distances.push(Math.sqrt(dx * dx + dy * dy));
+          }
+
+          /* --- Sort indices by distance from center (for stagger) --- */
+          var sortedIndices = [];
+          for (var i = 0; i < allStates.length; i++) {
+            sortedIndices.push(i);
+          }
+          sortedIndices.sort(function (a, b) {
+            return distances[a] - distances[b];
+          });
+
+          var sortedPolys = [];
+          var sortedTexts = [];
+          for (var i = 0; i < sortedIndices.length; i++) {
+            sortedPolys.push(hexPolys[sortedIndices[i]]);
+            sortedTexts.push(hexTexts[sortedIndices[i]]);
+          }
+
+          /* --- GSAP Timeline --- */
+          var tl = gsap.timeline({ paused: true });
+
+          /* 0s: headline wipe */
+          tl.to(
+            "#us-map-hex .map-headline",
+            {
+              clipPath: "inset(0 0% 0 0)",
+              duration: 1,
+              ease: "power2.inOut",
+            },
+            0,
+          );
+
+          /* 0.3s: subtitle fade */
+          tl.to(
+            "#us-map-hex .map-subtitle",
+            {
+              opacity: 1,
+              duration: 0.5,
+              ease: "power2.out",
+            },
+            0.3,
+          );
+
+          /* 0.8s: hexagons stagger in from center outward */
+          tl.fromTo(
+            sortedPolys,
+            {
+              opacity: 0,
+              scale: 0,
+              transformOrigin: "50% 50%",
+            },
+            {
+              opacity: 1,
+              scale: 1,
+              duration: 0.4,
+              stagger: 0.03,
+              ease: "back.out(1.4)",
+            },
+            0.8,
+          );
+
+          /* 3.5s: state labels fade in */
+          tl.fromTo(
+            sortedTexts,
+            { opacity: 0 },
+            {
+              opacity: 1,
+              duration: 0.3,
+              stagger: 0.02,
+              ease: "power2.out",
+            },
+            3.5,
+          );
+
+          /* 5.0s: legend fade */
+          tl.to(
+            "#us-map-hex .map-legend",
+            {
+              opacity: 1,
+              duration: 0.6,
+              ease: "power2.out",
+            },
+            5.0,
+          );
+
+          /* 5.5s: source fade */
+          tl.to(
+            "#us-map-hex .map-source",
+            {
+              opacity: 1,
+              duration: 0.5,
+              ease: "power2.out",
+            },
+            5.5,
+          );
+
+          /* 6.0s: top 5 income states pulse */
+          var topStates = ["MD", "NJ", "MA", "CT", "HI"];
+          var topPolys = [];
+          for (var i = 0; i < topStates.length; i++) {
+            for (var j = 0; j < allStates.length; j++) {
+              if (allStates[j] === topStates[i]) {
+                topPolys.push(hexPolys[j]);
+                break;
+              }
+            }
+          }
+
+          tl.to(
+            topPolys,
+            {
+              filter: "brightness(1.4)",
+              duration: 0.4,
+              stagger: 0.08,
+              ease: "power2.out",
+            },
+            6.0,
+          );
+
+          tl.to(
+            topPolys,
+            {
+              filter: "brightness(1)",
+              duration: 0.4,
+              stagger: 0.08,
+              ease: "power2.in",
+            },
+            6.8,
+          );
+
+          tl.to(
+            topPolys,
+            {
+              filter: "brightness(1.3)",
+              duration: 0.3,
+              stagger: 0.06,
+              ease: "power2.out",
+            },
+            7.4,
+          );
+
+          tl.to(
+            topPolys,
+            {
+              filter: "brightness(1)",
+              duration: 0.5,
+              stagger: 0.06,
+              ease: "power2.in",
+            },
+            8.0,
+          );
+
+          window.__timelines = window.__timelines || {};
+          window.__timelines["us-map-hex"] = tl;
+        })();
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/us-map/us-map.html b/docs/public/catalog/blocks/us-map/us-map.html
new file mode 100644
index 0000000000..3a8c59a3b6
--- /dev/null
+++ b/docs/public/catalog/blocks/us-map/us-map.html
@@ -0,0 +1,402 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>US Map</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=block"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/topojson-client@3.1.0/dist/topojson-client.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background-color: #0f172a;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="us-map"
+      data-composition-id="us-map"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="12"
+    >
+      <div class="map-container">
+        <div class="header">
+          <h1 class="headline">Population Density by State</h1>
+          <p class="subtitle">Residents per square mile, 2024 Census estimates</p>
+        </div>
+
+        <svg class="map-svg" viewBox="0 0 1400 820" preserveAspectRatio="xMidYMid meet">
+          <g class="states-group"></g>
+          <g class="labels-group"></g>
+        </svg>
+
+        <div class="legend">
+          <span class="legend-label legend-low">Low</span>
+          <div class="legend-bar"></div>
+          <span class="legend-label legend-high">High</span>
+        </div>
+
+        <div class="source">Source: U.S. Census Bureau</div>
+      </div>
+
+      <style>
+        #us-map {
+          width: 1920px;
+          height: 1080px;
+          background: linear-gradient(145deg, #0f172a 0%, #1e293b 100%);
+          font-family: "Inter", sans-serif;
+          color: #e2e8f0;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          overflow: hidden;
+        }
+
+        #us-map .map-container {
+          width: 1700px;
+          height: 950px;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          position: relative;
+        }
+
+        #us-map .header {
+          text-align: center;
+          margin-bottom: 20px;
+        }
+
+        #us-map .headline {
+          font-size: 52px;
+          font-weight: 700;
+          letter-spacing: -0.02em;
+          color: #f8fafc;
+          clip-path: inset(0 100% 0 0);
+        }
+
+        #us-map .subtitle {
+          font-size: 20px;
+          font-weight: 300;
+          color: #94a3b8;
+          margin-top: 8px;
+          opacity: 0;
+        }
+
+        #us-map .map-svg {
+          width: 1500px;
+          height: 750px;
+          overflow: visible;
+        }
+
+        #us-map .state-path {
+          stroke: #1e293b;
+          stroke-width: 1.2;
+          opacity: 0;
+          cursor: default;
+        }
+
+        #us-map .state-label {
+          font-size: 10px;
+          font-weight: 500;
+          fill: #f8fafc;
+          text-anchor: middle;
+          dominant-baseline: central;
+          opacity: 0;
+          pointer-events: none;
+          text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+        }
+
+        #us-map .legend {
+          display: flex;
+          align-items: center;
+          gap: 12px;
+          margin-top: 16px;
+          opacity: 0;
+        }
+
+        #us-map .legend-bar {
+          width: 300px;
+          height: 12px;
+          border-radius: 6px;
+          background: linear-gradient(90deg, #1e3a5f, #2563eb, #7c3aed, #ec4899);
+        }
+
+        #us-map .legend-label {
+          font-size: 14px;
+          font-weight: 500;
+          color: #94a3b8;
+        }
+
+        #us-map .source {
+          position: absolute;
+          bottom: 0;
+          right: 40px;
+          font-size: 12px;
+          color: #475569;
+          opacity: 0;
+        }
+      </style>
+
+      <script>
+        (function () {
+          const US_TOPO_URL = "https://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.json";
+
+          const stateData = {
+            "01": { name: "Alabama", abbr: "AL", density: 99.2 },
+            "02": { name: "Alaska", abbr: "AK", density: 1.3 },
+            "04": { name: "Arizona", abbr: "AZ", density: 63.5 },
+            "05": { name: "Arkansas", abbr: "AR", density: 58.1 },
+            "06": { name: "California", abbr: "CA", density: 253.9 },
+            "08": { name: "Colorado", abbr: "CO", density: 56.5 },
+            "09": { name: "Connecticut", abbr: "CT", density: 738.1 },
+            10: { name: "Delaware", abbr: "DE", density: 508.0 },
+            12: { name: "Florida", abbr: "FL", density: 410.5 },
+            13: { name: "Georgia", abbr: "GA", density: 185.6 },
+            15: { name: "Hawaii", abbr: "HI", density: 226.6 },
+            16: { name: "Idaho", abbr: "ID", density: 22.8 },
+            17: { name: "Illinois", abbr: "IL", density: 228.2 },
+            18: { name: "Indiana", abbr: "IN", density: 186.7 },
+            19: { name: "Iowa", abbr: "IA", density: 57.1 },
+            20: { name: "Kansas", abbr: "KS", density: 35.9 },
+            21: { name: "Kentucky", abbr: "KY", density: 113.2 },
+            22: { name: "Louisiana", abbr: "LA", density: 107.7 },
+            23: { name: "Maine", abbr: "ME", density: 43.8 },
+            24: { name: "Maryland", abbr: "MD", density: 636.1 },
+            25: { name: "Massachusetts", abbr: "MA", density: 901.2 },
+            26: { name: "Michigan", abbr: "MI", density: 176.4 },
+            27: { name: "Minnesota", abbr: "MN", density: 71.7 },
+            28: { name: "Mississippi", abbr: "MS", density: 63.5 },
+            29: { name: "Missouri", abbr: "MO", density: 89.5 },
+            30: { name: "Montana", abbr: "MT", density: 7.6 },
+            31: { name: "Nebraska", abbr: "NE", density: 25.3 },
+            32: { name: "Nevada", abbr: "NV", density: 28.3 },
+            33: { name: "New Hampshire", abbr: "NH", density: 153.2 },
+            34: { name: "New Jersey", abbr: "NJ", density: 1263.0 },
+            35: { name: "New Mexico", abbr: "NM", density: 17.4 },
+            36: { name: "New York", abbr: "NY", density: 415.3 },
+            37: { name: "North Carolina", abbr: "NC", density: 214.7 },
+            38: { name: "North Dakota", abbr: "ND", density: 11.3 },
+            39: { name: "Ohio", abbr: "OH", density: 288.8 },
+            40: { name: "Oklahoma", abbr: "OK", density: 57.7 },
+            41: { name: "Oregon", abbr: "OR", density: 43.9 },
+            42: { name: "Pennsylvania", abbr: "PA", density: 286.1 },
+            44: { name: "Rhode Island", abbr: "RI", density: 1061.4 },
+            45: { name: "South Carolina", abbr: "SC", density: 170.2 },
+            46: { name: "South Dakota", abbr: "SD", density: 12.2 },
+            47: { name: "Tennessee", abbr: "TN", density: 167.0 },
+            48: { name: "Texas", abbr: "TX", density: 112.8 },
+            49: { name: "Utah", abbr: "UT", density: 40.3 },
+            50: { name: "Vermont", abbr: "VT", density: 68.0 },
+            51: { name: "Virginia", abbr: "VA", density: 218.6 },
+            53: { name: "Washington", abbr: "WA", density: 115.9 },
+            54: { name: "West Virginia", abbr: "WV", density: 74.6 },
+            55: { name: "Wisconsin", abbr: "WI", density: 108.8 },
+            56: { name: "Wyoming", abbr: "WY", density: 5.8 },
+          };
+
+          const maxDensity = 500;
+
+          function densityToColor(d) {
+            const t = Math.min(d / maxDensity, 1);
+            if (t < 0.33) {
+              const s = t / 0.33;
+              return lerpColor([30, 58, 95], [37, 99, 235], s);
+            } else if (t < 0.66) {
+              const s = (t - 0.33) / 0.33;
+              return lerpColor([37, 99, 235], [124, 58, 237], s);
+            } else {
+              const s = (t - 0.66) / 0.34;
+              return lerpColor([124, 58, 237], [236, 72, 153], s);
+            }
+          }
+
+          function lerpColor(a, b, t) {
+            const r = Math.round(a[0] + (b[0] - a[0]) * t);
+            const g = Math.round(a[1] + (b[1] - a[1]) * t);
+            const bl = Math.round(a[2] + (b[2] - a[2]) * t);
+            return "rgb(" + r + "," + g + "," + bl + ")";
+          }
+
+          const svg = document.querySelector("#us-map .map-svg");
+          const statesGroup = svg.querySelector(".states-group");
+          const labelsGroup = svg.querySelector(".labels-group");
+          const tl = gsap.timeline({ paused: true });
+
+          fetch(US_TOPO_URL)
+            .then((r) => r.json())
+            .then((us) => {
+              const states = topojson.feature(us, us.objects.states).features;
+              const projection = d3
+                .geoAlbersUsa()
+                .fitSize([1380, 800], { type: "FeatureCollection", features: states });
+              const path = d3.geoPath().projection(projection);
+
+              const sortedStates = states
+                .filter((f) => stateData[String(f.id).padStart(2, "0")])
+                .sort((a, b) => {
+                  const aData = stateData[String(a.id).padStart(2, "0")];
+                  const bData = stateData[String(b.id).padStart(2, "0")];
+                  return aData.density - bData.density;
+                });
+
+              sortedStates.forEach((feature) => {
+                const fips = String(feature.id).padStart(2, "0");
+                const info = stateData[fips];
+                if (!info) return;
+
+                const d = path(feature);
+                if (!d) return;
+
+                const el = document.createElementNS("http://www.w3.org/2000/svg", "path");
+                el.setAttribute("d", d);
+                el.setAttribute("class", "state-path");
+                el.setAttribute("data-state", info.abbr);
+                el.setAttribute("data-density", info.density);
+                el.style.fill = densityToColor(info.density);
+                statesGroup.appendChild(el);
+
+                const centroid = path.centroid(feature);
+                if (centroid[0] && centroid[1]) {
+                  const label = document.createElementNS("http://www.w3.org/2000/svg", "text");
+                  label.setAttribute("x", centroid[0]);
+                  label.setAttribute("y", centroid[1]);
+                  label.setAttribute("class", "state-label");
+                  label.textContent = info.abbr;
+                  labelsGroup.appendChild(label);
+                }
+              });
+
+              buildTimeline();
+            });
+
+          function buildTimeline() {
+            const statePaths = statesGroup.querySelectorAll(".state-path");
+            const stateLabels = labelsGroup.querySelectorAll(".state-label");
+
+            tl.to(
+              "#us-map .headline",
+              {
+                clipPath: "inset(0 0% 0 0)",
+                duration: 1.0,
+                ease: "power2.inOut",
+              },
+              0,
+            );
+
+            tl.to(
+              "#us-map .subtitle",
+              {
+                opacity: 1,
+                duration: 0.6,
+                ease: "power2.out",
+              },
+              0.4,
+            );
+
+            tl.to(
+              statePaths,
+              {
+                opacity: 1,
+                scale: 1,
+                duration: 0.4,
+                stagger: {
+                  each: 0.06,
+                  from: "center",
+                },
+                ease: "back.out(1.4)",
+              },
+              1.0,
+            );
+
+            tl.to(
+              stateLabels,
+              {
+                opacity: 1,
+                duration: 0.3,
+                stagger: {
+                  each: 0.04,
+                  from: "center",
+                },
+                ease: "power2.out",
+              },
+              3.5,
+            );
+
+            tl.to(
+              "#us-map .legend",
+              {
+                opacity: 1,
+                y: 0,
+                duration: 0.6,
+                ease: "power2.out",
+              },
+              5.0,
+            );
+
+            tl.to(
+              "#us-map .source",
+              {
+                opacity: 1,
+                duration: 0.5,
+                ease: "power2.out",
+              },
+              5.5,
+            );
+
+            const highlightStates = ["CA", "NY", "TX", "FL", "NJ"];
+            highlightStates.forEach((abbr, i) => {
+              const el = statesGroup.querySelector('[data-state="' + abbr + '"]');
+              if (!el) return;
+
+              tl.to(
+                el,
+                {
+                  filter: "brightness(1.6) drop-shadow(0 0 8px rgba(255,255,255,0.4))",
+                  stroke: "#f8fafc",
+                  strokeWidth: 2.5,
+                  duration: 0.5,
+                  ease: "power2.out",
+                },
+                6.5 + i * 0.8,
+              );
+
+              tl.to(
+                el,
+                {
+                  filter: "brightness(1) drop-shadow(0 0 0px rgba(255,255,255,0))",
+                  stroke: "#1e293b",
+                  strokeWidth: 1.2,
+                  duration: 0.5,
+                  ease: "power2.in",
+                },
+                7.0 + i * 0.8,
+              );
+            });
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines["us-map"] = tl;
+          }
+        })();
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/vfx-anamorphic-flare/__hf-variables-preview.html b/docs/public/catalog/blocks/vfx-anamorphic-flare/__hf-variables-preview.html
new file mode 100644
index 0000000000..3e8e343e16
--- /dev/null
+++ b/docs/public/catalog/blocks/vfx-anamorphic-flare/__hf-variables-preview.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Anamorphic Streak Flare variables preview</title>
+    <style>
+      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #000; }
+      #hf-vars-root { position: relative; width: 1920px; height: 1080px; }
+      #hf-vars-mount { position: absolute; inset: 0; display: grid; place-items: center; }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  </head>
+  <body>
+    <div id="hf-vars-root" data-composition-id="vfx-anamorphic-flare-variables-preview" data-start="0" data-width="1920" data-height="1080" data-duration="10" data-fps="30">
+      <div id="hf-vars-mount" class="clip" data-composition-id="vfx-anamorphic-flare" data-composition-src="./vfx-anamorphic-flare.html" data-start="0" data-duration="10" data-track-index="0" data-width="1920" data-height="1080"></div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["vfx-anamorphic-flare-variables-preview"] = gsap.timeline({ paused: true });
+    </script>
+<script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "vfx-anamorphic-flare.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/vfx-anamorphic-flare/vfx-anamorphic-flare.html b/docs/public/catalog/blocks/vfx-anamorphic-flare/vfx-anamorphic-flare.html
new file mode 100644
index 0000000000..3bd54b0b71
--- /dev/null
+++ b/docs/public/catalog/blocks/vfx-anamorphic-flare/vfx-anamorphic-flare.html
@@ -0,0 +1,388 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Anamorphic Streak Flare</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #000;
+        overflow: hidden;
+      }
+      #af-root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #af-canvas {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="af-root"
+      data-composition-id="vfx-anamorphic-flare"
+      data-root="true"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="10"
+      data-composition-variables='[
+        {"id":"intensity","type":"number","label":"Streak intensity","default":5,"min":0,"max":20,"step":0.1},
+        {"id":"threshold","type":"number","label":"High-pass threshold","default":0.3,"min":0,"max":1,"step":0.01},
+        {"id":"streakLength","type":"number","label":"Streak length gain","default":1,"min":0.1,"max":6,"step":0.05},
+        {"id":"tint","type":"color","label":"Streak tint","default":"#7a8aff"},
+        {"id":"bloomRadius","type":"number","label":"Bloom radius","default":0,"min":0,"max":80,"step":1,"unit":"px"},
+        {"id":"timeScale","type":"number","label":"Drift rate","default":0.5,"min":0,"max":3,"step":0.05},
+        {"id":"emitters","type":"number","label":"Emitter count","default":140,"min":1,"max":400,"step":1},
+        {"id":"backdrop","type":"color","label":"Backdrop","default":"#04040a"}
+      ]'
+    >
+      <canvas id="af-canvas" width="1920" height="1080"></canvas>
+
+      <!-- Driver clip: gives HyperFrames a timed element to own on track 0. -->
+      <div
+        id="af-drv"
+        class="clip"
+        data-start="0"
+        data-duration="10"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+
+    <script>
+      (function () {
+        var DUR = 10;
+        var W = 1920;
+        var H = 1080;
+
+        var root = document.getElementById("af-root");
+        var V = (window.__hyperframes && window.__hyperframes.getVariables()) || {};
+        var CS = getComputedStyle(root);
+
+        // A declared variable reaches CSS as a custom property on the root.
+        // Read that first so a host stylesheet can retheme the block, then
+        // fall back to the declared value. Both the namespaced and the bare
+        // property name are probed: which one the runtime emits has changed
+        // across versions, and the block should not care.
+        function raw(id) {
+          var slug = id.toLowerCase();
+          var css =
+            CS.getPropertyValue("--hf-var-" + slug).trim() ||
+            CS.getPropertyValue("--" + slug).trim();
+          return css !== "" ? css : V[id];
+        }
+        function num(id, fallback) {
+          var n = parseFloat(raw(id));
+          return isFinite(n) ? n : fallback;
+        }
+        function str(id, fallback) {
+          var s = raw(id);
+          return typeof s === "string" && s !== "" ? s : fallback;
+        }
+
+        // ---------------------------------------------------------------
+        // Measured constants.
+        //
+        // Read from the three.js anamorphic post-processing example (MIT),
+        // cross-checked against a live capture of that demo's own GUI:
+        //
+        //   tint 0x7a8aff, threshold 0.3, intensity 5, bloom radius 0,
+        //   samples 80, time scale 0.5, resolution scale 0.25.
+        //
+        // The filter walks samples/2 taps in each direction HORIZONTALLY
+        // only, weights each tap by 1 - |i| / halfSamples (a tent), and
+        // normalises the sum by samples / 3.0. Dividing by samples/3 rather
+        // than by the weight sum is deliberate: it is a gain above 1, not
+        // an average, which is why a dim highlight still throws a readable
+        // streak.
+        //
+        // This implementation evaluates that convolution in closed form
+        // instead of running the 80-tap loop. For a small bright source the
+        // tent-weighted horizontal blur has an exact analytic result: the
+        // tent itself, centred on the source. So one horizontal gradient
+        // per highlight is the same arithmetic the loop would perform, at
+        // a fraction of the cost, and with no dependence on WebGL surviving
+        // seek capture.
+        // ---------------------------------------------------------------
+        var SAMPLES = 80;
+        var HALF_SAMPLES = SAMPLES / 2; // 40 taps each side
+        var RES_SCALE = 0.25; // the streak buffer runs at quarter resolution
+        var NORM = SAMPLES / 3; // total / (samples / 3.0)
+        var REF_W = 1280; // width the constants were measured at
+
+        // 40 taps of a 1/(0.25 * 1280) texel step = 12.5% of frame width per
+        // side. Held as a fraction rather than as absolute pixels so the look
+        // matches the reference at any output size.
+        var HALF_FRAC = HALF_SAMPLES / (RES_SCALE * REF_W);
+
+        var INTENSITY = num("intensity", 5);
+        var THRESHOLD = num("threshold", 0.3);
+        var STREAK_LEN = num("streakLength", 1);
+        var BLOOM_R = num("bloomRadius", 0);
+        var TIME_SCALE = num("timeScale", 0.5);
+        var COUNT = Math.max(1, Math.round(num("emitters", 140)));
+        var BACKDROP = str("backdrop", "#04040a");
+        var TINT = hexRgb(str("tint", "#7a8aff"), [0.478, 0.541, 1.0]);
+
+        function hexRgb(hex, fallback) {
+          var m = /^#?([0-9a-f]{6})$/i.exec(String(hex).trim());
+          if (!m) return fallback;
+          var n = parseInt(m[1], 16);
+          return [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255];
+        }
+
+        function mulberry32(seed) {
+          return function () {
+            seed |= 0;
+            seed = (seed + 0x6d2b79f5) | 0;
+            var t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
+            t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+            return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+          };
+        }
+
+        function hsv(h, s, v) {
+          var hh = ((((h % 360) + 360) % 360) / 60) % 6;
+          var c = v * s;
+          var x = c * (1 - Math.abs((hh % 2) - 1));
+          var m = v - c;
+          var r = 0;
+          var g = 0;
+          var b = 0;
+          if (hh < 1) {
+            r = c;
+            g = x;
+          } else if (hh < 2) {
+            r = x;
+            g = c;
+          } else if (hh < 3) {
+            g = c;
+            b = x;
+          } else if (hh < 4) {
+            g = x;
+            b = c;
+          } else if (hh < 5) {
+            r = x;
+            b = c;
+          } else {
+            r = c;
+            b = x;
+          }
+          return [r + m, g + m, b + m];
+        }
+
+        // ---------------------------------------------------------------
+        // The emitter field. Every emitter is a closed-form function of t:
+        // two incommensurate sinusoids for position and one for brightness.
+        // The seeded PRNG runs once, at setup, so the field is identical on
+        // every load and every seek.
+        // ---------------------------------------------------------------
+        var rng = mulberry32(1337);
+        var EM = [];
+        for (var i = 0; i < COUNT; i++) {
+          EM.push({
+            x0: rng() * W,
+            y0: rng() * H,
+            ax: 24 + rng() * 90,
+            ay: 12 + rng() * 48,
+            fx: 0.018 + rng() * 0.05,
+            fy: 0.015 + rng() * 0.045,
+            px: rng(),
+            py: rng(),
+            r: 3 + Math.pow(rng(), 1.6) * 10,
+            h: rng() * 360,
+            s: 0.62 + rng() * 0.38,
+            v: 0.7 + rng() * 0.3,
+            fb: 0.03 + rng() * 0.09,
+            pb: rng(),
+          });
+        }
+
+        var TAU = Math.PI * 2;
+        var canvas = document.getElementById("af-canvas");
+        var ctx = canvas.getContext("2d");
+
+        // Streaks are accumulated in a quarter-resolution buffer, matching
+        // the reference's setResolutionScale(0.25). Upscaling it bilinearly
+        // is what gives the streak its soft vertical falloff, and it is the
+        // reason the streak reads as smooth rather than as a hard bar.
+        var SW = Math.round(W * RES_SCALE);
+        var SH = Math.round(H * RES_SCALE);
+        var sbuf = document.createElement("canvas");
+        sbuf.width = SW;
+        sbuf.height = SH;
+        var sctx = sbuf.getContext("2d");
+
+        function rgba(c, a) {
+          return (
+            "rgba(" +
+            Math.round(Math.min(1, Math.max(0, c[0])) * 255) +
+            "," +
+            Math.round(Math.min(1, Math.max(0, c[1])) * 255) +
+            "," +
+            Math.round(Math.min(1, Math.max(0, c[2])) * 255) +
+            "," +
+            Math.min(1, Math.max(0, a)) +
+            ")"
+          );
+        }
+
+        // A slow swell across the clip so the field reads as a shot rather
+        // than as a loop. Closed form in t, like everything else here.
+        function gainAt(t) {
+          var u = Math.min(1, Math.max(0, t / DUR));
+          return 0.75 + 0.35 * Math.sin(Math.PI * u);
+        }
+
+        function draw(t) {
+          var tau = t * TIME_SCALE;
+          var gain = gainAt(t);
+          var halfLen = HALF_FRAC * W * STREAK_LEN;
+
+          sctx.setTransform(1, 0, 0, 1, 0, 0);
+          sctx.clearRect(0, 0, SW, SH);
+          sctx.globalCompositeOperation = "lighter";
+
+          var e;
+          var k;
+          var col;
+          var bright;
+          var x;
+          var y;
+          for (k = 0; k < EM.length; k++) {
+            e = EM[k];
+            x = e.x0 + e.ax * Math.sin(TAU * (e.fx * tau + e.px));
+            y = e.y0 + e.ay * Math.sin(TAU * (e.fy * tau + e.py));
+            bright = e.v * (0.62 + 0.38 * Math.sin(TAU * (e.fb * tau + e.pb)));
+            col = hsv(e.h, e.s, Math.max(0, bright));
+
+            // High pass, then tint, exactly as the reference filter does:
+            // max(colour - threshold, 0) * tint. Below threshold there is no
+            // streak at all, which is what keeps the field from smearing.
+            var hp = [
+              Math.max(0, col[0] - THRESHOLD) * TINT[0],
+              Math.max(0, col[1] - THRESHOLD) * TINT[1],
+              Math.max(0, col[2] - THRESHOLD) * TINT[2],
+            ];
+            var peak = Math.max(hp[0], Math.max(hp[1], hp[2]));
+            if (peak <= 0.0001) continue;
+
+            // Peak of the tent equals the source value times intensity over
+            // the samples/3 normaliser. Magnitude is carried in alpha so the
+            // hue keeps full 8-bit precision at low brightness.
+            var alpha = (peak * INTENSITY * gain) / NORM;
+            if (alpha < 0.003) continue;
+            var hue = [hp[0] / peak, hp[1] / peak, hp[2] / peak];
+
+            var bx = x * RES_SCALE;
+            var by = y * RES_SCALE;
+            var bh = Math.max(1, e.r * 2 * RES_SCALE);
+            var bl = halfLen * RES_SCALE;
+
+            var g = sctx.createLinearGradient(bx - bl, 0, bx + bl, 0);
+            g.addColorStop(0, rgba(hue, 0));
+            g.addColorStop(0.5, rgba(hue, alpha));
+            g.addColorStop(1, rgba(hue, 0));
+            sctx.fillStyle = g;
+            sctx.fillRect(bx - bl, by - bh / 2, bl * 2, bh);
+          }
+
+          ctx.setTransform(1, 0, 0, 1, 0, 0);
+          ctx.globalCompositeOperation = "source-over";
+          ctx.fillStyle = BACKDROP;
+          ctx.fillRect(0, 0, W, H);
+
+          ctx.globalCompositeOperation = "lighter";
+          ctx.imageSmoothingEnabled = true;
+          ctx.imageSmoothingQuality = "high";
+          ctx.drawImage(sbuf, 0, 0, SW, SH, 0, 0, W, H);
+
+          // The highlights themselves, drawn at full resolution on top.
+          for (k = 0; k < EM.length; k++) {
+            e = EM[k];
+            x = e.x0 + e.ax * Math.sin(TAU * (e.fx * tau + e.px));
+            y = e.y0 + e.ay * Math.sin(TAU * (e.fy * tau + e.py));
+            bright = e.v * (0.62 + 0.38 * Math.sin(TAU * (e.fb * tau + e.pb)));
+            col = hsv(e.h, e.s, Math.max(0, bright));
+
+            if (BLOOM_R > 0) {
+              var br = e.r + BLOOM_R;
+              var gb = ctx.createRadialGradient(x, y, 0, x, y, br);
+              gb.addColorStop(0, rgba(col, 0.5 * gain));
+              gb.addColorStop(0.35, rgba(col, 0.16 * gain));
+              gb.addColorStop(1, rgba(col, 0));
+              ctx.fillStyle = gb;
+              ctx.fillRect(x - br, y - br, br * 2, br * 2);
+            }
+
+            var core = ctx.createRadialGradient(x, y, 0, x, y, e.r);
+            core.addColorStop(
+              0,
+              rgba([col[0] * 0.88 + 0.12, col[1] * 0.88 + 0.12, col[2] * 0.88 + 0.12], 1),
+            );
+            core.addColorStop(0.72, rgba(col, 0.96));
+            core.addColorStop(1, rgba(col, 0));
+            ctx.fillStyle = core;
+            ctx.fillRect(x - e.r, y - e.r, e.r * 2, e.r * 2);
+          }
+        }
+
+        window.__timelines = window.__timelines || {};
+        var tl = gsap.timeline({ paused: true });
+
+        // The canvas is repainted from a property SETTER, not from a
+        // timeline onUpdate callback: gsap suppresses events on seek(), so a
+        // callback-driven canvas silently freezes on frame 0 under any
+        // consumer that scrubs. Tweened values are written on every render,
+        // suppressed or not, so the setter fires on seek and hands us the
+        // frame time directly.
+        var driver = { _t: 0 };
+        Object.defineProperty(driver, "t", {
+          get: function () {
+            return this._t;
+          },
+          set: function (v) {
+            this._t = v;
+            draw(v);
+          },
+        });
+        tl.to(driver, { t: DUR, duration: DUR, ease: "none" }, 0);
+        window.__timelines["vfx-anamorphic-flare"] = tl;
+
+        draw(0);
+      })();
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "vfx-anamorphic-flare.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/blocks/vfx-iphone-device/models/hyperframes-desktop.png b/docs/public/catalog/blocks/vfx-iphone-device/models/hyperframes-desktop.png
new file mode 100644
index 0000000000..2f168445ca
Binary files /dev/null and b/docs/public/catalog/blocks/vfx-iphone-device/models/hyperframes-desktop.png differ
diff --git a/docs/public/catalog/blocks/vfx-iphone-device/models/hyperframes-mobile.png b/docs/public/catalog/blocks/vfx-iphone-device/models/hyperframes-mobile.png
new file mode 100644
index 0000000000..3995bb6f98
Binary files /dev/null and b/docs/public/catalog/blocks/vfx-iphone-device/models/hyperframes-mobile.png differ
diff --git a/docs/public/catalog/blocks/vfx-iphone-device/models/iphone.glb b/docs/public/catalog/blocks/vfx-iphone-device/models/iphone.glb
new file mode 100644
index 0000000000..f042300855
Binary files /dev/null and b/docs/public/catalog/blocks/vfx-iphone-device/models/iphone.glb differ
diff --git a/docs/public/catalog/blocks/vfx-iphone-device/models/macbook.glb b/docs/public/catalog/blocks/vfx-iphone-device/models/macbook.glb
new file mode 100644
index 0000000000..762511110a
Binary files /dev/null and b/docs/public/catalog/blocks/vfx-iphone-device/models/macbook.glb differ
diff --git a/docs/public/catalog/blocks/vfx-iphone-device/vfx-iphone-device.html b/docs/public/catalog/blocks/vfx-iphone-device/vfx-iphone-device.html
new file mode 100644
index 0000000000..f48fa9e02a
--- /dev/null
+++ b/docs/public/catalog/blocks/vfx-iphone-device/vfx-iphone-device.html
@@ -0,0 +1,832 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Devices Canvas — HTML-in-Canvas API Showcase</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/loaders/DRACOLoader.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/loaders/GLTFLoader.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #050508;
+        overflow: hidden;
+      }
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #050508;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="devices-canvas"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="15"
+      data-root="true"
+    >
+      <!-- LIVE HTML captured every frame via drawElementImage  -->
+      <canvas
+        id="cap-phone"
+        layoutsubtree
+        width="390"
+        height="844"
+        style="
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 390px;
+          height: 844px;
+          z-index: -1;
+          pointer-events: none;
+        "
+      >
+        <div
+          id="phone-html"
+          style="
+            width: 390px;
+            height: 844px;
+            overflow: hidden;
+            font-family: Inter, system-ui, sans-serif;
+            color: #e2e8f0;
+          "
+        >
+          <div
+            id="phone-scroll"
+            style="background: linear-gradient(180deg, #0a0a12, #0f0f1a); transform: translateY(0)"
+          >
+            <div
+              style="
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                padding: 14px 18px;
+                border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+              "
+            >
+              <span
+                style="
+                  font-weight: 800;
+                  font-size: 14px;
+                  background: linear-gradient(135deg, #34d399, #3b82f6);
+                  -webkit-background-clip: text;
+                  -webkit-text-fill-color: transparent;
+                "
+                >HyperFrames</span
+              ><span
+                style="
+                  font-size: 10px;
+                  font-weight: 600;
+                  padding: 5px 12px;
+                  border-radius: 6px;
+                  background: #10b981;
+                  color: #fff;
+                "
+                >Log in</span
+              >
+            </div>
+            <div
+              id="phone-title"
+              style="
+                font-size: 26px;
+                font-weight: 800;
+                letter-spacing: -0.5px;
+                padding: 18px 18px 6px;
+                line-height: 1.1;
+                opacity: 0;
+              "
+            >
+              Community Playground
+            </div>
+            <div style="font-size: 11px; color: rgba(255, 255, 255, 0.4); padding: 0 18px 14px">
+              Made with HyperFrames
+            </div>
+            <div style="display: flex; gap: 6px; padding: 0 18px 14px">
+              <span
+                style="
+                  font-size: 9px;
+                  font-weight: 600;
+                  padding: 4px 10px;
+                  border-radius: 16px;
+                  background: rgba(16, 185, 129, 0.15);
+                  color: #10b981;
+                  border: 1px solid rgba(16, 185, 129, 0.3);
+                "
+                >Examples</span
+              ><span
+                id="phone-count"
+                style="
+                  font-size: 9px;
+                  font-weight: 600;
+                  padding: 4px 10px;
+                  border-radius: 16px;
+                  border: 1px solid rgba(255, 255, 255, 0.1);
+                  color: rgba(255, 255, 255, 0.5);
+                "
+                >Catalog 0</span
+              >
+            </div>
+            <div id="phone-cards" style="display: grid; gap: 10px; padding: 0 18px 18px"></div>
+          </div>
+        </div>
+      </canvas>
+
+      <canvas
+        id="cap-laptop"
+        layoutsubtree
+        width="1440"
+        height="900"
+        style="
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1440px;
+          height: 900px;
+          z-index: -1;
+          pointer-events: none;
+        "
+      >
+        <div
+          id="laptop-html"
+          style="
+            width: 1440px;
+            height: 900px;
+            overflow: hidden;
+            font-family: Inter, system-ui, sans-serif;
+            color: #e2e8f0;
+          "
+        >
+          <div
+            id="laptop-scroll"
+            style="background: linear-gradient(180deg, #0a0a12, #0f0f1a); transform: translateY(0)"
+          >
+            <div
+              style="
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                padding: 18px 36px;
+                border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+              "
+            >
+              <span
+                style="
+                  font-weight: 800;
+                  font-size: 17px;
+                  background: linear-gradient(135deg, #34d399, #3b82f6);
+                  -webkit-background-clip: text;
+                  -webkit-text-fill-color: transparent;
+                "
+                >HyperFrames</span
+              >
+              <div
+                style="display: flex; gap: 20px; font-size: 12px; color: rgba(255, 255, 255, 0.5)"
+              >
+                <span>Docs</span><span>Playground</span><span>Pricing</span>
+              </div>
+              <span
+                style="
+                  font-size: 11px;
+                  font-weight: 600;
+                  padding: 6px 14px;
+                  border-radius: 6px;
+                  background: #10b981;
+                  color: #fff;
+                "
+                >Log in</span
+              >
+            </div>
+            <div
+              id="laptop-title"
+              style="
+                font-size: 40px;
+                font-weight: 800;
+                letter-spacing: -1px;
+                padding: 28px 36px 10px;
+                opacity: 0;
+              "
+            >
+              Community Playground
+            </div>
+            <div style="font-size: 13px; color: rgba(255, 255, 255, 0.4); padding: 0 36px 18px">
+              Create videos with HTML — powered by HyperFrames
+            </div>
+            <div style="display: flex; gap: 8px; padding: 0 36px 20px">
+              <span
+                style="
+                  font-size: 10px;
+                  font-weight: 600;
+                  padding: 5px 12px;
+                  border-radius: 16px;
+                  background: rgba(16, 185, 129, 0.15);
+                  color: #10b981;
+                  border: 1px solid rgba(16, 185, 129, 0.3);
+                "
+                >Examples</span
+              ><span
+                id="laptop-count"
+                style="
+                  font-size: 10px;
+                  font-weight: 600;
+                  padding: 5px 12px;
+                  border-radius: 16px;
+                  border: 1px solid rgba(255, 255, 255, 0.1);
+                  color: rgba(255, 255, 255, 0.5);
+                "
+                >Catalog 0</span
+              >
+            </div>
+            <div
+              id="laptop-cards"
+              style="
+                display: grid;
+                grid-template-columns: repeat(3, 1fr);
+                gap: 14px;
+                padding: 0 36px 36px;
+              "
+            ></div>
+          </div>
+        </div>
+      </canvas>
+
+      <canvas
+        id="theater"
+        width="1920"
+        height="1080"
+        style="position: absolute; top: 0; left: 0; width: 1920px; height: 1080px"
+      ></canvas>
+      <div
+        id="driver"
+        class="clip"
+        data-start="0"
+        data-duration="15"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      var W = 1920,
+        H = 1080,
+        PI = Math.PI;
+
+      // ── Renderer ───────────────────────────────────────────────────────
+      var renderer = new THREE.WebGLRenderer({
+        canvas: document.getElementById("theater"),
+        antialias: true,
+        preserveDrawingBuffer: true,
+      });
+      renderer.setSize(W, H, false);
+      renderer.setPixelRatio(1);
+      renderer.toneMapping = THREE.ACESFilmicToneMapping;
+      renderer.toneMappingExposure = 1.15;
+      renderer.outputEncoding = THREE.sRGBEncoding;
+      renderer.setClearColor(0x050508, 1);
+
+      var scene = new THREE.Scene();
+      scene.background = new THREE.Color(0x050508);
+      var camera = new THREE.PerspectiveCamera(34, W / H, 0.1, 100);
+
+      // ── Environment Map ────────────────────────────────────────────────
+      var eC = document.createElement("canvas");
+      eC.width = 1024;
+      eC.height = 512;
+      var ec = eC.getContext("2d");
+      var eg = ec.createLinearGradient(0, 0, 1024, 512);
+      eg.addColorStop(0, "#020307");
+      eg.addColorStop(0.15, "#1a1a2e");
+      eg.addColorStop(0.3, "#ffffff");
+      eg.addColorStop(0.45, "#0a0a1e");
+      eg.addColorStop(0.6, "#ffffff");
+      eg.addColorStop(0.75, "#1e1e2e");
+      eg.addColorStop(1, "#020307");
+      ec.fillStyle = eg;
+      ec.fillRect(0, 0, 1024, 512);
+      ec.globalCompositeOperation = "screen";
+      for (var ei = 0; ei < 7; ei++) {
+        ec.fillStyle = "rgba(255,255,255," + (ei % 2 === 0 ? 0.15 : 0.08) + ")";
+        ec.fillRect((ei % 3) * 100, 60 + ei * 56, 700, 3 + (ei % 2) * 2);
+      }
+      var eT = new THREE.CanvasTexture(eC);
+      eT.mapping = THREE.EquirectangularReflectionMapping;
+      var pm = new THREE.PMREMGenerator(renderer);
+      scene.environment = pm.fromEquirectangular(eT).texture;
+      eT.dispose();
+      pm.dispose();
+
+      // ── Background ─────────────────────────────────────────────────────
+      scene.add(
+        new THREE.Mesh(
+          new THREE.PlaneGeometry(22, 14),
+          new THREE.ShaderMaterial({
+            uniforms: {},
+            vertexShader:
+              "varying vec2 v;void main(){v=uv;gl_Position=projectionMatrix*modelViewMatrix*vec4(position,1.0);}",
+            fragmentShader:
+              "varying vec2 v;void main(){vec3 c=vec3(0.02,0.02,0.03);c+=vec3(0.05,0.02,0.1)*exp(-pow(length(v-vec2(0.3,0.55)),2.0)*5.0);c+=vec3(0.02,0.05,0.1)*exp(-pow(length(v-vec2(0.7,0.45)),2.0)*5.0);gl_FragColor=vec4(c,1.0);}",
+            depthWrite: false,
+          }),
+        ),
+      ).position.z = -6;
+
+      var floor = new THREE.Mesh(
+        new THREE.PlaneGeometry(30, 30),
+        new THREE.MeshStandardMaterial({ color: 0x050508, metalness: 0.95, roughness: 0.18 }),
+      );
+      floor.rotation.x = -PI / 2;
+      floor.position.y = -2.5;
+      scene.add(floor);
+
+      scene.add(new THREE.AmbientLight(0x222233, 0.5));
+      var kL = new THREE.DirectionalLight(0xffffff, 2.2);
+      kL.position.set(-3, 4, 5);
+      scene.add(kL);
+      var rL = new THREE.PointLight(0x6366f1, 3, 15);
+      rL.position.set(4, 2, 3);
+      scene.add(rL);
+      var wL = new THREE.PointLight(0xffc8a8, 1.5, 12);
+      wL.position.set(-3, -1, 4);
+      scene.add(wL);
+
+      // ── Live HTML → WebGL Texture  ─
+      var capPhoneCvs = document.getElementById("cap-phone");
+      var capPhoneCtx = capPhoneCvs.getContext("2d");
+      var phoneHtmlEl = document.getElementById("phone-html");
+      var phoneScrollEl = document.getElementById("phone-scroll");
+
+      var capLapCvs = document.getElementById("cap-laptop");
+      var capLapCtx = capLapCvs.getContext("2d");
+      var lapHtmlEl = document.getElementById("laptop-html");
+      var lapScrollEl = document.getElementById("laptop-scroll");
+
+      var apiOk = (function () {
+        var tc = document.createElement("canvas");
+        if (!("layoutSubtree" in tc)) return false;
+        tc.setAttribute("layoutsubtree", "");
+        var ctx = tc.getContext("2d");
+        return ctx && typeof ctx.drawElementImage === "function";
+      })();
+      var paintReady = false;
+
+      // Generate card HTML for both screens
+      var cardData = [
+        {
+          bg: "linear-gradient(135deg,#1e3a5f,#2563eb)",
+          text: "100M+ AI team",
+          title: "Notion Showcase",
+          meta: "15s · 1920×1080",
+        },
+        {
+          bg: "linear-gradient(135deg,#4a1942,#db2777)",
+          text: "Design System v4",
+          title: "Dribbble Showcase",
+          meta: "12s · 1920×1080",
+        },
+        {
+          bg: "linear-gradient(135deg,#451a03,#f59e0b)",
+          text: "$1.9T Market Cap",
+          title: "Stripe Showcase",
+          meta: "10s · 1920×1080",
+        },
+        {
+          bg: "linear-gradient(135deg,#064e3b,#10b981)",
+          text: "Ship faster with AI",
+          title: "Vercel Promo",
+          meta: "20s · 1080×1920",
+        },
+        {
+          bg: "linear-gradient(135deg,#1e3a5f,#3b82f6)",
+          text: "Privacy App",
+          title: "iPhone App Store",
+          meta: "8s · 1080×1920",
+        },
+        {
+          bg: "linear-gradient(135deg,#4a1942,#a855f7)",
+          text: "Audio Visualizer",
+          title: "Spotify Remix",
+          meta: "15s · 1920×1080",
+        },
+        {
+          bg: "linear-gradient(135deg,#064e3b,#059669)",
+          text: "Code Animation",
+          title: "Terminal Demo",
+          meta: "12s · 1920×1080",
+        },
+        {
+          bg: "linear-gradient(135deg,#451a03,#d97706)",
+          text: "Launch Video",
+          title: "Product Hunt",
+          meta: "30s · 1920×1080",
+        },
+        {
+          bg: "linear-gradient(135deg,#1e3a5f,#6366f1)",
+          text: "3D Devices",
+          title: "Device Mockups",
+          meta: "15s · 1920×1080",
+        },
+      ];
+      function makeCardHTML(cd, isMobile) {
+        var fs = isMobile ? 12 : 16;
+        return (
+          '<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:' +
+          (isMobile ? 10 : 12) +
+          'px;overflow:hidden;opacity:0" class="anim-card">' +
+          '<div style="width:100%;aspect-ratio:16/9;background:' +
+          cd.bg +
+          ';display:flex;align-items:center;justify-content:center"><span style="font-size:' +
+          fs +
+          'px;font-weight:700;color:rgba(255,255,255,0.7)">' +
+          cd.text +
+          "</span></div>" +
+          '<div style="padding:' +
+          (isMobile ? "8px 10px" : "10px 14px") +
+          '"><div style="font-size:' +
+          (isMobile ? 11 : 13) +
+          'px;font-weight:600;margin-bottom:2px">' +
+          cd.title +
+          '</div><div style="font-size:' +
+          (isMobile ? 9 : 10) +
+          'px;color:rgba(255,255,255,0.3)">' +
+          cd.meta +
+          "</div></div></div>"
+        );
+      }
+      var phoneCardsEl = document.getElementById("phone-cards");
+      var laptopCardsEl = document.getElementById("laptop-cards");
+      for (var ci = 0; ci < cardData.length; ci++) {
+        if (ci < 6) phoneCardsEl.innerHTML += makeCardHTML(cardData[ci], true);
+        laptopCardsEl.innerHTML += makeCardHTML(cardData[ci], false);
+      }
+
+      var phoneTex = new THREE.CanvasTexture(capPhoneCvs);
+      phoneTex.minFilter = THREE.LinearFilter;
+      phoneTex.magFilter = THREE.LinearFilter;
+      phoneTex.generateMipmaps = false;
+      var lapTex = new THREE.CanvasTexture(capLapCvs);
+      lapTex.minFilter = THREE.LinearFilter;
+      lapTex.magFilter = THREE.LinearFilter;
+      lapTex.generateMipmaps = false;
+
+      function captureScreens() {
+        if (!apiOk || !paintReady) return;
+        try {
+          capPhoneCtx.clearRect(0, 0, 390, 844);
+          capPhoneCtx.drawElementImage(phoneHtmlEl, 0, 0, 390, 844);
+          capLapCtx.clearRect(0, 0, 1440, 900);
+          capLapCtx.drawElementImage(lapHtmlEl, 0, 0, 1440, 900);
+          phoneTex.needsUpdate = true;
+          lapTex.needsUpdate = true;
+        } catch (e) {}
+      }
+
+      // ── Turntable Group (both devices rotate together for 360° orbit) ──
+      var turntable = new THREE.Group();
+      scene.add(turntable);
+
+      // ── Model Groups ───────────────────────────────────────────────────
+      var phoneGrp = new THREE.Group();
+      turntable.add(phoneGrp);
+      var lapGrp = new THREE.Group();
+      turntable.add(lapGrp);
+      var ready = 0;
+
+      var draco = new THREE.DRACOLoader();
+      draco.setDecoderPath("https://www.gstatic.com/draco/versioned/decoders/1.5.6/");
+      var loader = new THREE.GLTFLoader();
+      loader.setDRACOLoader(draco);
+
+      // ── Morphing Glass Lens (single, shared between devices) ───────────
+      var glassMat = new THREE.MeshPhysicalMaterial({
+        color: 0xffffff,
+        metalness: 0,
+        roughness: 0.02,
+        transmission: 1,
+        thickness: 1.8,
+        ior: 1.45,
+        attenuationColor: new THREE.Color(0xe8f4ff),
+        attenuationDistance: 10,
+        clearcoat: 1,
+        clearcoatRoughness: 0.03,
+        specularIntensity: 1,
+        envMapIntensity: 2.5,
+        transparent: true,
+        opacity: 0.85,
+        side: THREE.DoubleSide,
+      });
+
+      var glassGeos = [
+        new THREE.SphereGeometry(0.22, 32, 32),
+        new THREE.IcosahedronGeometry(0.22, 1),
+        new THREE.OctahedronGeometry(0.25, 0),
+        new THREE.DodecahedronGeometry(0.22, 0),
+        new THREE.TetrahedronGeometry(0.28, 0),
+        new THREE.TorusGeometry(0.16, 0.07, 16, 32),
+      ];
+      var glassLens = new THREE.Mesh(glassGeos[0], glassMat);
+      glassLens.renderOrder = 10;
+
+      // iPhone
+      // The replacement device models carry UVs authored for a tiling material
+      // (the laptop panel runs u -6.3..6.3), so mapping one screen image onto
+      // them clamps at the edges and smears the last row of pixels across the
+      // whole panel. Both screens are flat planes, so derive planar UVs from
+      // the mesh's own bounds instead of trusting what shipped.
+      function planarScreenUv(mesh) {
+        var g = mesh.geometry;
+        g.computeBoundingBox();
+        var bb = g.boundingBox;
+        var pos = g.attributes.position;
+        var w = bb.max.x - bb.min.x || 1;
+        var h = bb.max.y - bb.min.y || 1;
+        var uv = new Float32Array(pos.count * 2);
+        for (var i = 0; i < pos.count; i++) {
+          uv[i * 2] = (pos.getX(i) - bb.min.x) / w;
+          uv[i * 2 + 1] = (pos.getY(i) - bb.min.y) / h;
+        }
+        g.setAttribute("uv", new THREE.BufferAttribute(uv, 2));
+      }
+
+      // These compositions were authored around a model whose screen faced -Z
+      // (the old asset's display plane sat at its minimum Z) and every camera
+      // move and spin in the timeline assumes it. The replacement faces +Z, so
+      // align the model rather than re-time the animation. Reads the model's
+      // own parts, so a re-export facing the other way still lands right.
+      function alignScreenToMinusZ(root, frontName, backName) {
+        var front = root.getObjectByName(frontName);
+        var back = root.getObjectByName(backName);
+        if (!front || !back) return;
+        // matrixWorld is only refreshed during a render, and this runs at load,
+        // so without this the two parts both read as the origin and the test
+        // silently never fires.
+        root.updateWorldMatrix(true, true);
+        var fp = new THREE.Vector3();
+        var bp = new THREE.Vector3();
+        front.getWorldPosition(fp);
+        back.getWorldPosition(bp);
+        if (fp.z > bp.z) root.rotation.y += Math.PI;
+      }
+
+      loader.load("models/iphone.glb", function (gltf) {
+        var m = gltf.scene;
+        var box = new THREE.Box3().setFromObject(m);
+        var sz = box.getSize(new THREE.Vector3());
+        var s = 3.2 / sz.y;
+        m.scale.setScalar(s);
+        box.setFromObject(m);
+        m.position.sub(box.getCenter(new THREE.Vector3()));
+        m.traverse(function (child) {
+          if (!child.isMesh) return;
+          // `front-glass` is the display face; Blender's exporter suffixes the
+          // mesh name and leaves the node name bare, so match the prefix.
+          if (child.name.indexOf("front-glass") === 0) {
+            planarScreenUv(child);
+            child.material = new THREE.MeshBasicMaterial({ map: phoneTex });
+          }
+        });
+        scene.add(glassLens);
+
+        alignScreenToMinusZ(m, "front-glass", "rear-window");
+        phoneGrp.add(m);
+        ready++;
+        if (ready === 2) onReady();
+      });
+
+      // MacBook
+      loader.load("models/macbook.glb", function (gltf) {
+        var m = gltf.scene;
+        var box = new THREE.Box3().setFromObject(m);
+        var sz = box.getSize(new THREE.Vector3());
+        var s = 4.5 / Math.max(sz.x, sz.z);
+        m.scale.setScalar(s);
+        box.setFromObject(m);
+        m.position.sub(box.getCenter(new THREE.Vector3()));
+
+        m.traverse(function (child) {
+          // `display` is the panel. `display-notch` is the bezel cut-out beside
+          // it and must keep its own material, so this cannot be a prefix test.
+          if (child.isMesh && child.name.replace(/\.\d+$/, "") === "display") {
+            planarScreenUv(child);
+            child.material = new THREE.MeshBasicMaterial({ map: lapTex });
+          }
+        });
+
+        lapGrp.add(m);
+        ready++;
+        if (ready === 2) onReady();
+      });
+
+      function onReady() {
+        requestAnimationFrame(function () {
+          requestAnimationFrame(function () {
+            paintReady = true;
+            captureScreens();
+            window.__timelines = window.__timelines || {};
+            window.__timelines["devices-canvas"] = tl;
+          });
+        });
+      }
+
+      // ── Cubic Bezier Implementation ────────────────────────────────────
+      function cbz(p1x, p1y, p2x, p2y) {
+        var ax = 3 * p1x - 3 * p2x + 1,
+          bx = 3 * p2x - 6 * p1x,
+          cx = 3 * p1x;
+        var ay = 3 * p1y - 3 * p2y + 1,
+          by = 3 * p2y - 6 * p1y,
+          cy = 3 * p1y;
+        return function (t) {
+          var s = t;
+          for (var i = 0; i < 12; i++) {
+            var x = ((ax * s + bx) * s + cx) * s - t;
+            var dx = (3 * ax * s + 2 * bx) * s + cx;
+            if (Math.abs(dx) < 1e-10) break;
+            s -= x / dx;
+          }
+          s = Math.max(0, Math.min(1, s));
+          return ((ay * s + by) * s + cy) * s;
+        };
+      }
+
+      var enterEase = cbz(0.16, 1.0, 0.3, 1.0);
+      var spinEase = cbz(0.76, 0.0, 0.18, 1.0);
+      var driftEase = cbz(0.45, 0.0, 0.15, 1.0);
+      var snapEase = cbz(0.22, 1.15, 0.36, 1.0);
+      var breatheEase = cbz(0.37, 0.0, 0.63, 1.0);
+
+      // ── Animation State ────────────────────────────────────────────────
+      var S = {
+        phX: 0,
+        phY: 0.1,
+        phZ: 0.5,
+        phRX: 0,
+        phRY: PI,
+        phRZ: 0,
+        lpX: 10,
+        lpY: -0.2,
+        lpZ: -0.6,
+        lpRX: 0,
+        lpRY: 0,
+        lpRZ: 0,
+        cX: 0,
+        cY: 0.15,
+        cZ: 2.8,
+        clX: 0,
+        clY: 0.1,
+        clZ: 0,
+        drift: 0,
+        turn: 0,
+        scroll: 0,
+        cardReveal: 0,
+        titleFade: 0,
+        counter: 0,
+        p: 0,
+      };
+
+      function render() {
+        var d = S.drift;
+
+        // ── Animate live HTML content (captured to texture every frame) ──
+        // Title fade-in
+        document.getElementById("phone-title").style.opacity = S.titleFade;
+        document.getElementById("laptop-title").style.opacity = S.titleFade;
+        // Counter
+        var cnt = Math.round(S.counter);
+        document.getElementById("phone-count").textContent = "Catalog " + cnt;
+        document.getElementById("laptop-count").textContent = "Catalog " + cnt;
+        // Staggered card reveal
+        var allCards = document.querySelectorAll(".anim-card");
+        for (var ci2 = 0; ci2 < allCards.length; ci2++) {
+          var cardProgress = Math.max(0, Math.min(1, (S.cardReveal * allCards.length - ci2) * 1.5));
+          allCards[ci2].style.opacity = cardProgress;
+          allCards[ci2].style.transform = "translateY(" + (1 - cardProgress) * 15 + "px)";
+        }
+        // Scroll
+        phoneScrollEl.style.transform = "translateY(-" + S.scroll * 500 + "px)";
+        lapScrollEl.style.transform = "translateY(-" + S.scroll * 300 + "px)";
+        // Re-capture HTML to texture
+        captureScreens();
+
+        phoneGrp.position.set(
+          S.phX + Math.sin(d * 0.5) * 0.015,
+          S.phY + Math.sin(d * 0.7) * 0.008,
+          S.phZ + Math.cos(d * 0.4) * 0.008,
+        );
+        phoneGrp.rotation.set(S.phRX, S.phRY, S.phRZ);
+        lapGrp.position.set(
+          S.lpX - Math.sin(d * 0.4) * 0.012,
+          S.lpY + Math.sin(d * 0.6) * 0.006,
+          S.lpZ + Math.cos(d * 0.35) * 0.008,
+        );
+        lapGrp.rotation.set(S.lpRX, S.lpRY, S.lpRZ);
+        turntable.rotation.y = S.turn;
+        // Single morphing glass — orbits around device edges, never overlaps screen
+        var t = tl.time();
+        var geoIdx = Math.floor(d * 0.8) % glassGeos.length;
+        if (glassLens.geometry !== glassGeos[geoIdx]) glassLens.geometry = glassGeos[geoIdx];
+        glassLens.rotation.set(d * 0.7, d * 0.9, d * 0.4);
+
+        // Glass glides across screen surface — hide during rotations to avoid clipping
+        glassLens.visible = t < 3.3 || (t >= 9.5 && t < 12.5) || t >= 13.5;
+        var gx, gy, gz;
+        if (t < 7) {
+          // Slide across iPhone screen face
+          var px = phoneGrp.position.x,
+            py = phoneGrp.position.y,
+            pz = phoneGrp.position.z;
+          gx = px + Math.sin(d * 1.4) * 0.35;
+          gy = py + Math.cos(d * 1.1) * 0.6;
+          gz = pz + 0.15;
+        } else if (t < 11) {
+          // Slide across MacBook screen face
+          var lx2 = lapGrp.position.x,
+            ly2 = lapGrp.position.y,
+            lz2 = lapGrp.position.z;
+          gx = lx2 + Math.sin(d * 1.2) * 1.2;
+          gy = ly2 + 0.3 + Math.cos(d * 0.9) * 0.6;
+          gz = lz2 + 0.2;
+        } else {
+          // Glide between both screens
+          var mx = (phoneGrp.position.x + lapGrp.position.x) * 0.5;
+          var my = (phoneGrp.position.y + lapGrp.position.y) * 0.5;
+          gx = mx + Math.sin(d * 1.0) * 1.5;
+          gy = my + 0.2 + Math.cos(d * 0.8) * 0.5;
+          gz = 0.3;
+        }
+        glassLens.position.set(gx, gy, gz);
+        camera.position.set(S.cX, S.cY, S.cZ);
+        camera.lookAt(S.clX, S.clY, S.clZ);
+        renderer.render(scene, camera);
+      }
+
+      // ── GSAP Timeline — Product Review Edit ────────────────────────────
+      // __timelines created in onReady() after GLTF models load
+      var tl = gsap.timeline({ paused: true });
+
+      tl.to(S, { p: 1, drift: 15, duration: 15, ease: "none", onUpdate: render }, 0);
+
+      // ── Act 1 (0–3.5s): iPhone FRONT — hero close-up showing hyperframes.dev
+      tl.to(S, { phRY: PI + 0.06, phRX: 0.015, duration: 1.5, ease: breatheEase }, 0.3);
+      tl.to(S, { phRY: PI - 0.04, phRX: -0.01, duration: 1.5, ease: breatheEase }, 1.8);
+
+      // ── Act 2 (3.5–7s): iPhone spins 180° to show BACK (camera, titanium, Apple logo)
+      tl.to(S, { phRY: PI * 2, duration: 2.2, ease: spinEase }, 3.5);
+      tl.to(S, { cZ: 4.8, cY: 0.25, duration: 2, ease: driftEase }, 3.5);
+      // Hold back view — slight orbit to appreciate hardware
+      tl.to(
+        S,
+        { phRY: PI * 2 + 0.15, phRX: 0.04, cX: 0.15, duration: 1.5, ease: breatheEase },
+        5.5,
+      );
+
+      // ── Act 3 (7–9s): iPhone spins back to front, then exits LEFT off screen
+      tl.to(S, { phRY: PI * 3, duration: 1.8, ease: snapEase }, 7);
+      tl.to(S, { cZ: 3.5, cY: 0.2, duration: 1.5, ease: driftEase }, 7);
+      tl.to(S, { phX: -6, phZ: 0.3, duration: 2, ease: spinEase }, 8);
+
+      // ── Act 4 (9–11s): MacBook enters from right, hero close-up
+      tl.to(S, { lpX: 0, duration: 2, ease: enterEase }, 9);
+      tl.to(S, { cX: 0, clX: 0, cZ: 5, cY: 0.3, clY: -0.1, duration: 2, ease: driftEase }, 9);
+      tl.to(S, { lpRY: 0.06, duration: 1.5, ease: breatheEase }, 10);
+
+      // ── Act 5 (11–12.5s): iPhone returns, both settle for turntable
+      tl.to(S, { phX: -2.0, duration: 1.5, ease: enterEase }, 11);
+      tl.to(S, { lpX: 2.2, duration: 1.5, ease: breatheEase }, 11);
+      tl.to(
+        S,
+        { cX: 0.1, clX: 0.1, cZ: 7.5, cY: 0.5, clY: -0.1, duration: 1.5, ease: driftEase },
+        11,
+      );
+      tl.to(S, { phRY: PI * 3, lpRY: 0, duration: 1, ease: breatheEase }, 11);
+
+      // ── Act 6 (12.5–15s): 360° turntable — both devices rotate together
+      tl.to(S, { turn: PI * 2, duration: 2.5, ease: spinEase }, 12.5);
+
+      // ── Live HTML Animations (captured to 3D textures every frame) ──
+      // Title fade in
+      tl.to(S, { titleFade: 1, duration: 0.8, ease: breatheEase }, 0.3);
+      // Counter animates up
+      tl.to(S, { counter: 43, duration: 2, ease: driftEase }, 0.5);
+      // Cards stagger in (0→1 reveals all cards sequentially)
+      tl.to(S, { cardReveal: 1, duration: 3, ease: breatheEase }, 0.8);
+      // Scroll during hero shots
+      tl.to(S, { scroll: 0.6, duration: 3, ease: breatheEase }, 1.5);
+      tl.to(S, { scroll: 0, duration: 1.5, ease: driftEase }, 7);
+      // Scroll on MacBook reveal
+      tl.to(S, { scroll: 0.8, duration: 3, ease: breatheEase }, 9.5);
+      tl.to(S, { scroll: 0.3, duration: 2, ease: driftEase }, 13);
+
+      // __timelines registered in onReady() after GLTF models load
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/vfx-liquid-background/vfx-liquid-background.html b/docs/public/catalog/blocks/vfx-liquid-background/vfx-liquid-background.html
new file mode 100644
index 0000000000..c0f1b7a026
--- /dev/null
+++ b/docs/public/catalog/blocks/vfx-liquid-background/vfx-liquid-background.html
@@ -0,0 +1,1244 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+  </head>
+  <body style="margin: 0; overflow: hidden">
+    <div
+      id="root"
+      data-composition-id="vfx-liquid-background"
+      data-root="true"
+      data-start="0"
+      data-duration="12"
+      data-width="1920"
+      data-height="1080"
+    >
+      <!-- ═══════════════ PANEL A: Fintech Dashboard ═══════════════ -->
+      <div
+        id="panel-a"
+        data-panel-a
+        style="
+          position: absolute;
+          left: 0;
+          top: 0;
+          width: 1920px;
+          height: 1080px;
+          opacity: 0;
+          pointer-events: none;
+        "
+      >
+        <div
+          style="
+            width: 100%;
+            height: 100%;
+            background: #0a0e17;
+            color: #e2e8f0;
+            font-family:
+              &quot;Inter&quot;,
+              -apple-system,
+              BlinkMacSystemFont,
+              sans-serif;
+            padding: 60px 80px;
+            display: flex;
+            flex-direction: column;
+          "
+        >
+          <!-- Top bar -->
+          <div
+            style="
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+              margin-bottom: 48px;
+            "
+          >
+            <div style="display: flex; align-items: center; gap: 12px">
+              <div
+                style="
+                  width: 36px;
+                  height: 36px;
+                  border-radius: 10px;
+                  background: linear-gradient(135deg, #6366f1, #8b5cf6);
+                "
+              ></div>
+              <span style="font-size: 22px; font-weight: 700; letter-spacing: -0.02em">Vault</span>
+            </div>
+            <div style="display: flex; gap: 32px; font-size: 15px; color: #64748b">
+              <span style="color: #e2e8f0">Portfolio</span>
+              <span>Markets</span>
+              <span>Activity</span>
+              <span>Settings</span>
+            </div>
+            <div
+              style="
+                width: 40px;
+                height: 40px;
+                border-radius: 50%;
+                background: #1e293b;
+                border: 2px solid #334155;
+              "
+            ></div>
+          </div>
+
+          <!-- Balance section -->
+          <div style="margin-bottom: 40px">
+            <div
+              style="
+                font-size: 14px;
+                color: #64748b;
+                letter-spacing: 0.08em;
+                text-transform: uppercase;
+                margin-bottom: 8px;
+              "
+            >
+              Total Balance
+            </div>
+            <div style="display: flex; align-items: baseline; gap: 16px">
+              <span
+                style="font-size: 72px; font-weight: 800; letter-spacing: -0.03em; color: #f8fafc"
+                >$2,847,391.24</span
+              >
+              <span
+                style="
+                  padding: 6px 14px;
+                  border-radius: 20px;
+                  background: rgba(34, 197, 94, 0.15);
+                  color: #4ade80;
+                  font-size: 16px;
+                  font-weight: 600;
+                "
+                >+12.4%</span
+              >
+            </div>
+          </div>
+
+          <!-- Chart area -->
+          <div style="flex: 1; min-height: 0; margin-bottom: 40px; position: relative">
+            <svg
+              viewBox="0 0 1760 360"
+              style="width: 100%; height: 100%"
+              preserveAspectRatio="none"
+            >
+              <defs>
+                <linearGradient id="chart-grad" x1="0" y1="0" x2="0" y2="1">
+                  <stop offset="0%" stop-color="#6366f1" stop-opacity="0.4" />
+                  <stop offset="100%" stop-color="#6366f1" stop-opacity="0" />
+                </linearGradient>
+              </defs>
+              <path
+                d="M0,280 C150,260 300,180 450,200 C600,220 700,120 880,140 C1060,160 1150,60 1320,80 C1490,100 1600,40 1760,30 L1760,360 L0,360 Z"
+                fill="url(#chart-grad)"
+              />
+              <path
+                d="M0,280 C150,260 300,180 450,200 C600,220 700,120 880,140 C1060,160 1150,60 1320,80 C1490,100 1600,40 1760,30"
+                fill="none"
+                stroke="#6366f1"
+                stroke-width="3"
+              />
+            </svg>
+          </div>
+
+          <!-- Holdings row -->
+          <div style="display: flex; gap: 24px">
+            <div style="flex: 1; background: #111827; border-radius: 16px; padding: 24px">
+              <div
+                style="
+                  display: flex;
+                  justify-content: space-between;
+                  align-items: center;
+                  margin-bottom: 12px;
+                "
+              >
+                <div style="display: flex; align-items: center; gap: 10px">
+                  <div
+                    style="
+                      width: 32px;
+                      height: 32px;
+                      border-radius: 8px;
+                      background: #1e293b;
+                      display: flex;
+                      align-items: center;
+                      justify-content: center;
+                      font-size: 12px;
+                      font-weight: 700;
+                      color: #94a3b8;
+                    "
+                  >
+                    AA
+                  </div>
+                  <div>
+                    <div style="font-weight: 600; font-size: 16px">AAPL</div>
+                    <div style="font-size: 13px; color: #64748b">Apple Inc.</div>
+                  </div>
+                </div>
+                <span style="color: #4ade80; font-size: 14px; font-weight: 600">+2.31%</span>
+              </div>
+              <div style="font-size: 28px; font-weight: 700">$189.84</div>
+            </div>
+            <div style="flex: 1; background: #111827; border-radius: 16px; padding: 24px">
+              <div
+                style="
+                  display: flex;
+                  justify-content: space-between;
+                  align-items: center;
+                  margin-bottom: 12px;
+                "
+              >
+                <div style="display: flex; align-items: center; gap: 10px">
+                  <div
+                    style="
+                      width: 32px;
+                      height: 32px;
+                      border-radius: 8px;
+                      background: #1e293b;
+                      display: flex;
+                      align-items: center;
+                      justify-content: center;
+                      font-size: 12px;
+                      font-weight: 700;
+                      color: #94a3b8;
+                    "
+                  >
+                    NV
+                  </div>
+                  <div>
+                    <div style="font-weight: 600; font-size: 16px">NVDA</div>
+                    <div style="font-size: 13px; color: #64748b">NVIDIA Corp.</div>
+                  </div>
+                </div>
+                <span style="color: #4ade80; font-size: 14px; font-weight: 600">+5.67%</span>
+              </div>
+              <div style="font-size: 28px; font-weight: 700">$721.33</div>
+            </div>
+            <div style="flex: 1; background: #111827; border-radius: 16px; padding: 24px">
+              <div
+                style="
+                  display: flex;
+                  justify-content: space-between;
+                  align-items: center;
+                  margin-bottom: 12px;
+                "
+              >
+                <div style="display: flex; align-items: center; gap: 10px">
+                  <div
+                    style="
+                      width: 32px;
+                      height: 32px;
+                      border-radius: 8px;
+                      background: #1e293b;
+                      display: flex;
+                      align-items: center;
+                      justify-content: center;
+                      font-size: 12px;
+                      font-weight: 700;
+                      color: #94a3b8;
+                    "
+                  >
+                    TS
+                  </div>
+                  <div>
+                    <div style="font-weight: 600; font-size: 16px">TSLA</div>
+                    <div style="font-size: 13px; color: #64748b">Tesla Inc.</div>
+                  </div>
+                </div>
+                <span style="color: #f87171; font-size: 14px; font-weight: 600">-1.42%</span>
+              </div>
+              <div style="font-size: 28px; font-weight: 700">$248.50</div>
+            </div>
+          </div>
+
+          <!-- Bottom nav -->
+          <div
+            style="
+              display: flex;
+              justify-content: center;
+              gap: 48px;
+              margin-top: 32px;
+              padding-top: 24px;
+              border-top: 1px solid #1e293b;
+            "
+          >
+            <div
+              style="
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                gap: 4px;
+                color: #6366f1;
+              "
+            >
+              <div
+                style="
+                  width: 24px;
+                  height: 24px;
+                  border-radius: 6px;
+                  background: #6366f1;
+                  opacity: 0.2;
+                "
+              ></div>
+              <span style="font-size: 12px; font-weight: 500">Home</span>
+            </div>
+            <div
+              style="
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                gap: 4px;
+                color: #64748b;
+              "
+            >
+              <div style="width: 24px; height: 24px; border-radius: 6px; background: #334155"></div>
+              <span style="font-size: 12px">Trade</span>
+            </div>
+            <div
+              style="
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                gap: 4px;
+                color: #64748b;
+              "
+            >
+              <div style="width: 24px; height: 24px; border-radius: 6px; background: #334155"></div>
+              <span style="font-size: 12px">Wallet</span>
+            </div>
+            <div
+              style="
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                gap: 4px;
+                color: #64748b;
+              "
+            >
+              <div style="width: 24px; height: 24px; border-radius: 6px; background: #334155"></div>
+              <span style="font-size: 12px">Profile</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- ═══════════════ PANEL B: Social Feed ═══════════════ -->
+      <div
+        id="panel-b"
+        data-panel-b
+        style="
+          position: absolute;
+          left: 0;
+          top: 0;
+          width: 1920px;
+          height: 1080px;
+          opacity: 0;
+          pointer-events: none;
+        "
+      >
+        <div
+          style="
+            width: 100%;
+            height: 100%;
+            background: #0f1419;
+            color: #e7e9ea;
+            font-family:
+              &quot;Inter&quot;,
+              -apple-system,
+              BlinkMacSystemFont,
+              sans-serif;
+            padding: 60px 80px;
+            display: flex;
+            flex-direction: column;
+          "
+        >
+          <!-- Profile header -->
+          <div
+            style="
+              display: flex;
+              align-items: center;
+              gap: 16px;
+              margin-bottom: 32px;
+              padding-bottom: 28px;
+              border-bottom: 1px solid #2f3336;
+            "
+          >
+            <div
+              style="
+                width: 56px;
+                height: 56px;
+                border-radius: 50%;
+                background: linear-gradient(135deg, #1d9bf0, #7856ff);
+              "
+            ></div>
+            <div>
+              <div style="font-size: 22px; font-weight: 700">Sarah Chen</div>
+              <div style="font-size: 16px; color: #71767b">@sarahchen</div>
+            </div>
+            <div
+              style="
+                margin-left: auto;
+                padding: 8px 20px;
+                border-radius: 20px;
+                background: #1d9bf0;
+                color: #fff;
+                font-size: 15px;
+                font-weight: 600;
+              "
+            >
+              Follow
+            </div>
+          </div>
+
+          <!-- Compose -->
+          <div
+            style="
+              display: flex;
+              align-items: center;
+              gap: 16px;
+              padding: 20px 0;
+              margin-bottom: 24px;
+              border-bottom: 1px solid #2f3336;
+            "
+          >
+            <div style="width: 44px; height: 44px; border-radius: 50%; background: #1e293b"></div>
+            <span style="font-size: 20px; color: #71767b">What's happening?</span>
+          </div>
+
+          <!-- Post 1 -->
+          <div style="padding: 24px 0; border-bottom: 1px solid #2f3336">
+            <div style="display: flex; gap: 14px">
+              <div
+                style="
+                  width: 44px;
+                  height: 44px;
+                  border-radius: 50%;
+                  background: linear-gradient(135deg, #1d9bf0, #7856ff);
+                  flex-shrink: 0;
+                "
+              ></div>
+              <div style="flex: 1">
+                <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 6px">
+                  <span style="font-weight: 700; font-size: 16px">Sarah Chen</span>
+                  <span style="color: #71767b; font-size: 15px">@sarahchen · 2h</span>
+                </div>
+                <div style="font-size: 17px; line-height: 1.5; margin-bottom: 14px">
+                  Just shipped the new real-time collaboration feature. The CRDT sync engine handles
+                  50k concurrent edits without breaking a sweat. This is what engineering craft
+                  looks like.
+                </div>
+                <div style="display: flex; gap: 48px; color: #71767b; font-size: 14px">
+                  <span>42 replies</span>
+                  <span style="color: #00ba7c">1.2K retweets</span>
+                  <span style="color: #f91880">8.4K likes</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Post 2 -->
+          <div style="padding: 24px 0; border-bottom: 1px solid #2f3336">
+            <div style="display: flex; gap: 14px">
+              <div
+                style="
+                  width: 44px;
+                  height: 44px;
+                  border-radius: 50%;
+                  background: linear-gradient(135deg, #ff6b35, #ffc107);
+                  flex-shrink: 0;
+                "
+              ></div>
+              <div style="flex: 1">
+                <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 6px">
+                  <span style="font-weight: 700; font-size: 16px">Alex Rivera</span>
+                  <span style="color: #71767b; font-size: 15px">@alexrivera · 4h</span>
+                </div>
+                <div style="font-size: 17px; line-height: 1.5; margin-bottom: 14px">
+                  The secret to great developer tools: make the easy things instant and the hard
+                  things possible. Stop adding config options and start removing them.
+                </div>
+                <div style="display: flex; gap: 48px; color: #71767b; font-size: 14px">
+                  <span>18 replies</span>
+                  <span style="color: #00ba7c">847 retweets</span>
+                  <span style="color: #f91880">3.1K likes</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Post 3 -->
+          <div style="padding: 24px 0">
+            <div style="display: flex; gap: 14px">
+              <div
+                style="
+                  width: 44px;
+                  height: 44px;
+                  border-radius: 50%;
+                  background: linear-gradient(135deg, #10b981, #06b6d4);
+                  flex-shrink: 0;
+                "
+              ></div>
+              <div style="flex: 1">
+                <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 6px">
+                  <span style="font-weight: 700; font-size: 16px">Maya Patel</span>
+                  <span style="color: #71767b; font-size: 15px">@mayapatel · 6h</span>
+                </div>
+                <div style="font-size: 17px; line-height: 1.5; margin-bottom: 14px">
+                  Benchmarked our new rendering pipeline against the previous version. 4.7x faster
+                  on large scenes. Sometimes the best optimization is rewriting the architecture
+                  from scratch.
+                </div>
+                <div style="display: flex; gap: 48px; color: #71767b; font-size: 14px">
+                  <span>31 replies</span>
+                  <span style="color: #00ba7c">2.3K retweets</span>
+                  <span style="color: #f91880">11K likes</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- ═══════════════ THREE.JS CANVAS ═══════════════ -->
+      <canvas
+        id="liquid-canvas"
+        class="clip"
+        data-start="0"
+        data-duration="12"
+        data-track-index="0"
+        style="position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; z-index: 10"
+      ></canvas>
+
+      <!-- ═══════════════ STYLES ═══════════════ -->
+      <style>
+        @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=block");
+
+        [data-composition-id="vfx-liquid-background"] {
+          background: #000;
+          position: relative;
+          overflow: hidden;
+        }
+      </style>
+
+      <!-- ═══════════════ SCRIPTS ═══════════════ -->
+      <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+      <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js"></script>
+
+      <script>
+        window.__timelines = window.__timelines || {};
+
+        setTimeout(function () {
+          // ── Capture panel textures via html2canvas-like rasterization ──
+          // We use hidden canvases + drawImage of the panels for texture source.
+          // Since drawElementImage requires chrome flags, we rasterize the panels
+          // into canvas textures using SVG foreignObject serialization.
+
+          var W = 1920;
+          var H = 1080;
+          var canvas = document.getElementById("liquid-canvas");
+
+          // ── Rasterize an HTML panel into a canvas texture ──
+          function rasterizePanel(panelEl) {
+            return new Promise(function (resolve) {
+              // Clone the panel, make it visible for serialization
+              var clone = panelEl.cloneNode(true);
+              clone.style.opacity = "1";
+              clone.style.position = "relative";
+              clone.style.left = "0";
+              clone.style.top = "0";
+
+              var svgNS = "http://www.w3.org/2000/svg";
+              var xhtmlNS = "http://www.w3.org/1999/xhtml";
+
+              var svg = document.createElementNS(svgNS, "svg");
+              svg.setAttribute("width", W);
+              svg.setAttribute("height", H);
+              svg.setAttribute("xmlns", svgNS);
+
+              var fo = document.createElementNS(svgNS, "foreignObject");
+              fo.setAttribute("width", "100%");
+              fo.setAttribute("height", "100%");
+
+              // Wrap in a body-like container with the font
+              var wrapper = document.createElementNS(xhtmlNS, "div");
+              wrapper.setAttribute("xmlns", xhtmlNS);
+              wrapper.style.cssText =
+                "width:" + W + "px;height:" + H + "px;margin:0;padding:0;overflow:hidden;";
+              wrapper.innerHTML = clone.innerHTML;
+              fo.appendChild(wrapper);
+              svg.appendChild(fo);
+
+              var svgData = new XMLSerializer().serializeToString(svg);
+              var img = new Image();
+              var blob = new Blob([svgData], { type: "image/svg+xml;charset=utf-8" });
+              var url = URL.createObjectURL(blob);
+
+              img.onload = function () {
+                var c = document.createElement("canvas");
+                c.width = W;
+                c.height = H;
+                var ctx = c.getContext("2d");
+                ctx.drawImage(img, 0, 0, W, H);
+                URL.revokeObjectURL(url);
+                resolve(c);
+              };
+              img.onerror = function () {
+                // Fallback: solid color canvas
+                var c = document.createElement("canvas");
+                c.width = W;
+                c.height = H;
+                var ctx = c.getContext("2d");
+                ctx.fillStyle = panelEl.id === "panel-a" ? "#0a0e17" : "#0f1419";
+                ctx.fillRect(0, 0, W, H);
+                URL.revokeObjectURL(url);
+                resolve(c);
+              };
+              img.src = url;
+            });
+          }
+
+          // ── Fallback: create panel textures from direct canvas drawing ──
+          function drawPanelATexture() {
+            var c = document.createElement("canvas");
+            c.width = W;
+            c.height = H;
+            var ctx = c.getContext("2d");
+
+            // Background
+            ctx.fillStyle = "#0a0e17";
+            ctx.fillRect(0, 0, W, H);
+
+            // Logo
+            var grad = ctx.createLinearGradient(80, 60, 116, 96);
+            grad.addColorStop(0, "#6366f1");
+            grad.addColorStop(1, "#8b5cf6");
+            roundRect(ctx, 80, 60, 36, 36, 10, grad);
+
+            ctx.fillStyle = "#e2e8f0";
+            ctx.font = "700 22px Inter, sans-serif";
+            ctx.fillText("Vault", 126, 86);
+
+            // Nav
+            ctx.font = "400 15px Inter, sans-serif";
+            ctx.fillStyle = "#e2e8f0";
+            ctx.fillText("Portfolio", 600, 82);
+            ctx.fillStyle = "#64748b";
+            ctx.fillText("Markets", 700, 82);
+            ctx.fillText("Activity", 800, 82);
+            ctx.fillText("Settings", 900, 82);
+
+            // Balance label
+            ctx.fillStyle = "#64748b";
+            ctx.font = "400 14px Inter, sans-serif";
+            ctx.letterSpacing = "0.08em";
+            ctx.fillText("TOTAL BALANCE", 80, 150);
+
+            // Balance amount
+            ctx.fillStyle = "#f8fafc";
+            ctx.font = "800 72px Inter, sans-serif";
+            ctx.fillText("$2,847,391.24", 80, 230);
+
+            // Badge
+            ctx.fillStyle = "rgba(34,197,94,0.15)";
+            roundRect(ctx, 780, 195, 100, 32, 16, "rgba(34,197,94,0.15)");
+            ctx.fillStyle = "#4ade80";
+            ctx.font = "600 16px Inter, sans-serif";
+            ctx.fillText("+12.4%", 793, 217);
+
+            // Chart area - gradient fill
+            ctx.beginPath();
+            ctx.moveTo(80, 500);
+            ctx.bezierCurveTo(280, 480, 460, 400, 640, 420);
+            ctx.bezierCurveTo(820, 440, 920, 340, 1100, 360);
+            ctx.bezierCurveTo(1280, 380, 1370, 280, 1540, 300);
+            ctx.bezierCurveTo(1710, 320, 1780, 260, 1840, 250);
+            ctx.lineTo(1840, 600);
+            ctx.lineTo(80, 600);
+            ctx.closePath();
+            var chartGrad = ctx.createLinearGradient(0, 250, 0, 600);
+            chartGrad.addColorStop(0, "rgba(99,102,241,0.4)");
+            chartGrad.addColorStop(1, "rgba(99,102,241,0)");
+            ctx.fillStyle = chartGrad;
+            ctx.fill();
+
+            // Chart line
+            ctx.beginPath();
+            ctx.moveTo(80, 500);
+            ctx.bezierCurveTo(280, 480, 460, 400, 640, 420);
+            ctx.bezierCurveTo(820, 440, 920, 340, 1100, 360);
+            ctx.bezierCurveTo(1280, 380, 1370, 280, 1540, 300);
+            ctx.bezierCurveTo(1710, 320, 1780, 260, 1840, 250);
+            ctx.strokeStyle = "#6366f1";
+            ctx.lineWidth = 3;
+            ctx.stroke();
+
+            // Holding cards
+            var cardY = 660;
+            var cards = [
+              {
+                sym: "AAPL",
+                name: "Apple Inc.",
+                price: "$189.84",
+                change: "+2.31%",
+                color: "#4ade80",
+              },
+              {
+                sym: "NVDA",
+                name: "NVIDIA Corp.",
+                price: "$721.33",
+                change: "+5.67%",
+                color: "#4ade80",
+              },
+              {
+                sym: "TSLA",
+                name: "Tesla Inc.",
+                price: "$248.50",
+                change: "-1.42%",
+                color: "#f87171",
+              },
+            ];
+            var cardW = 540;
+            for (var i = 0; i < 3; i++) {
+              var cx = 80 + i * (cardW + 24);
+              roundRect(ctx, cx, cardY, cardW, 150, 16, "#111827");
+
+              ctx.fillStyle = "#1e293b";
+              roundRect(ctx, cx + 24, cardY + 24, 32, 32, 8, "#1e293b");
+
+              ctx.fillStyle = "#94a3b8";
+              ctx.font = "700 12px Inter, sans-serif";
+              ctx.fillText(cards[i].sym.substring(0, 2), cx + 32, cardY + 46);
+
+              ctx.fillStyle = "#e2e8f0";
+              ctx.font = "600 16px Inter, sans-serif";
+              ctx.fillText(cards[i].sym, cx + 68, cardY + 40);
+
+              ctx.fillStyle = "#64748b";
+              ctx.font = "400 13px Inter, sans-serif";
+              ctx.fillText(cards[i].name, cx + 68, cardY + 58);
+
+              ctx.fillStyle = cards[i].color;
+              ctx.font = "600 14px Inter, sans-serif";
+              ctx.fillText(cards[i].change, cx + cardW - 80, cardY + 44);
+
+              ctx.fillStyle = "#e2e8f0";
+              ctx.font = "700 28px Inter, sans-serif";
+              ctx.fillText(cards[i].price, cx + 24, cardY + 120);
+            }
+
+            // Bottom nav bar
+            ctx.strokeStyle = "#1e293b";
+            ctx.lineWidth = 1;
+            ctx.beginPath();
+            ctx.moveTo(80, 880);
+            ctx.lineTo(1840, 880);
+            ctx.stroke();
+
+            var navItems = ["Home", "Trade", "Wallet", "Profile"];
+            var navCx = W / 2 - ((navItems.length - 1) * 48) / 2;
+            for (var n = 0; n < navItems.length; n++) {
+              var nx = navCx + (n - 1.5) * 96;
+              ctx.fillStyle = n === 0 ? "rgba(99,102,241,0.2)" : "#334155";
+              roundRect(ctx, nx - 12, 900, 24, 24, 6, ctx.fillStyle);
+              ctx.fillStyle = n === 0 ? "#6366f1" : "#64748b";
+              ctx.font = (n === 0 ? "500" : "400") + " 12px Inter, sans-serif";
+              ctx.fillText(navItems[n], nx - 12, 944);
+            }
+
+            return c;
+          }
+
+          function drawPanelBTexture() {
+            var c = document.createElement("canvas");
+            c.width = W;
+            c.height = H;
+            var ctx = c.getContext("2d");
+
+            // Background
+            ctx.fillStyle = "#0f1419";
+            ctx.fillRect(0, 0, W, H);
+
+            // Profile header
+            var profileGrad = ctx.createLinearGradient(80, 60, 136, 116);
+            profileGrad.addColorStop(0, "#1d9bf0");
+            profileGrad.addColorStop(1, "#7856ff");
+            ctx.beginPath();
+            ctx.arc(108, 88, 28, 0, Math.PI * 2);
+            ctx.fillStyle = profileGrad;
+            ctx.fill();
+
+            ctx.fillStyle = "#e7e9ea";
+            ctx.font = "700 22px Inter, sans-serif";
+            ctx.fillText("Sarah Chen", 150, 82);
+            ctx.fillStyle = "#71767b";
+            ctx.font = "400 16px Inter, sans-serif";
+            ctx.fillText("@sarahchen", 150, 104);
+
+            // Follow button
+            roundRect(ctx, 1720, 68, 100, 40, 20, "#1d9bf0");
+            ctx.fillStyle = "#fff";
+            ctx.font = "600 15px Inter, sans-serif";
+            ctx.fillText("Follow", 1744, 94);
+
+            // Separator
+            ctx.strokeStyle = "#2f3336";
+            ctx.lineWidth = 1;
+            ctx.beginPath();
+            ctx.moveTo(80, 140);
+            ctx.lineTo(1840, 140);
+            ctx.stroke();
+
+            // Compose
+            ctx.beginPath();
+            ctx.arc(102, 178, 22, 0, Math.PI * 2);
+            ctx.fillStyle = "#1e293b";
+            ctx.fill();
+            ctx.fillStyle = "#71767b";
+            ctx.font = "400 20px Inter, sans-serif";
+            ctx.fillText("What's happening?", 140, 184);
+
+            ctx.beginPath();
+            ctx.moveTo(80, 216);
+            ctx.lineTo(1840, 216);
+            ctx.strokeStyle = "#2f3336";
+            ctx.stroke();
+
+            // Posts
+            var posts = [
+              {
+                name: "Sarah Chen",
+                handle: "@sarahchen",
+                time: "2h",
+                grad: ["#1d9bf0", "#7856ff"],
+                text: "Just shipped the new real-time collaboration feature. The CRDT sync engine handles 50k concurrent edits without breaking a sweat.",
+                replies: "42",
+                retweets: "1.2K",
+                likes: "8.4K",
+              },
+              {
+                name: "Alex Rivera",
+                handle: "@alexrivera",
+                time: "4h",
+                grad: ["#ff6b35", "#ffc107"],
+                text: "The secret to great developer tools: make the easy things instant and the hard things possible. Stop adding config options.",
+                replies: "18",
+                retweets: "847",
+                likes: "3.1K",
+              },
+              {
+                name: "Maya Patel",
+                handle: "@mayapatel",
+                time: "6h",
+                grad: ["#10b981", "#06b6d4"],
+                text: "Benchmarked our new rendering pipeline against the previous version. 4.7x faster on large scenes. Architecture rewrite pays off.",
+                replies: "31",
+                retweets: "2.3K",
+                likes: "11K",
+              },
+            ];
+
+            var py = 240;
+            for (var p = 0; p < posts.length; p++) {
+              var post = posts[p];
+              // Avatar
+              var ag = ctx.createLinearGradient(80, py + 4, 124, py + 48);
+              ag.addColorStop(0, post.grad[0]);
+              ag.addColorStop(1, post.grad[1]);
+              ctx.beginPath();
+              ctx.arc(102, py + 26, 22, 0, Math.PI * 2);
+              ctx.fillStyle = ag;
+              ctx.fill();
+
+              // Name and handle
+              ctx.fillStyle = "#e7e9ea";
+              ctx.font = "700 16px Inter, sans-serif";
+              ctx.fillText(post.name, 140, py + 20);
+              ctx.fillStyle = "#71767b";
+              ctx.font = "400 15px Inter, sans-serif";
+              ctx.fillText(
+                post.handle + " · " + post.time,
+                140 + ctx.measureText(post.name).width + 10,
+                py + 20,
+              );
+
+              // Post text
+              ctx.fillStyle = "#e7e9ea";
+              ctx.font = "400 17px Inter, sans-serif";
+              wrapText(ctx, post.text, 140, py + 50, 1680, 26);
+
+              // Engagement
+              var ey = py + 120;
+              ctx.font = "400 14px Inter, sans-serif";
+              ctx.fillStyle = "#71767b";
+              ctx.fillText(post.replies + " replies", 140, ey);
+              ctx.fillStyle = "#00ba7c";
+              ctx.fillText(post.retweets + " retweets", 340, ey);
+              ctx.fillStyle = "#f91880";
+              ctx.fillText(post.likes + " likes", 560, ey);
+
+              // Separator
+              py += 160;
+              if (p < 2) {
+                ctx.beginPath();
+                ctx.moveTo(80, py);
+                ctx.lineTo(1840, py);
+                ctx.strokeStyle = "#2f3336";
+                ctx.stroke();
+              }
+              py += 20;
+            }
+
+            return c;
+          }
+
+          function wrapText(ctx, text, x, y, maxWidth, lineHeight) {
+            var words = text.split(" ");
+            var line = "";
+            for (var n = 0; n < words.length; n++) {
+              var testLine = line + words[n] + " ";
+              if (ctx.measureText(testLine).width > maxWidth && n > 0) {
+                ctx.fillText(line.trim(), x, y);
+                line = words[n] + " ";
+                y += lineHeight;
+              } else {
+                line = testLine;
+              }
+            }
+            ctx.fillText(line.trim(), x, y);
+          }
+
+          function roundRect(ctx, x, y, w, h, r, fill) {
+            ctx.beginPath();
+            ctx.moveTo(x + r, y);
+            ctx.lineTo(x + w - r, y);
+            ctx.quadraticCurveTo(x + w, y, x + w, y + r);
+            ctx.lineTo(x + w, y + h - r);
+            ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
+            ctx.lineTo(x + r, y + h);
+            ctx.quadraticCurveTo(x, y + h, x, y + h - r);
+            ctx.lineTo(x, y + r);
+            ctx.quadraticCurveTo(x, y, x + r, y);
+            ctx.closePath();
+            if (fill) {
+              ctx.fillStyle = fill;
+              ctx.fill();
+            }
+          }
+
+          // ── Build textures (canvas-drawn fallback — works everywhere) ──
+          var canvasA = drawPanelATexture();
+          var canvasB = drawPanelBTexture();
+
+          // ═══════════════════════════════════════════════════════
+          // THREE.JS LIQUID SIMULATION
+          // ═══════════════════════════════════════════════════════
+
+          var renderer = new THREE.WebGLRenderer({
+            canvas: canvas,
+            antialias: true,
+            alpha: false,
+          });
+          renderer.setSize(W, H, false);
+          renderer.setPixelRatio(1);
+          renderer.setClearColor(0x000000, 1);
+
+          var scene = new THREE.Scene();
+
+          // Camera: slight perspective to show surface deformation
+          var camera = new THREE.PerspectiveCamera(45, W / H, 0.1, 100);
+          camera.position.set(0, 0, 2.8);
+          camera.lookAt(0, 0, 0);
+
+          // Create textures from panel canvases
+          var textureA = new THREE.CanvasTexture(canvasA);
+          textureA.minFilter = THREE.LinearFilter;
+          textureA.magFilter = THREE.LinearFilter;
+
+          var textureB = new THREE.CanvasTexture(canvasB);
+          textureB.minFilter = THREE.LinearFilter;
+          textureB.magFilter = THREE.LinearFilter;
+
+          // ── Shader material ──
+          var vertexShader = [
+            "uniform float uTime;",
+            "uniform float uWaveIntensity;",
+            "uniform float uRippleIntensity;",
+            "varying vec2 vUv;",
+            "varying float vDisplacement;",
+            "",
+            "void main() {",
+            "  vUv = uv;",
+            "  vec3 pos = position;",
+            "",
+            "  // Wave 1: large slow horizontal wave",
+            "  float wave1 = sin(pos.x * 3.0 + uTime * 1.2) * 0.04 * uWaveIntensity;",
+            "",
+            "  // Wave 2: medium diagonal wave",
+            "  float wave2 = sin((pos.x + pos.y) * 5.0 + uTime * 1.8) * 0.025 * uWaveIntensity;",
+            "",
+            "  // Wave 3: small fast ripples",
+            "  float wave3 = sin(pos.x * 12.0 - uTime * 3.0) * sin(pos.y * 10.0 + uTime * 2.5) * 0.015 * uRippleIntensity;",
+            "",
+            "  float displacement = wave1 + wave2 + wave3;",
+            "  pos.z += displacement;",
+            "  vDisplacement = displacement;",
+            "",
+            "  gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);",
+            "}",
+          ].join("\n");
+
+          var fragmentShader = [
+            "uniform sampler2D uTextureA;",
+            "uniform sampler2D uTextureB;",
+            "uniform float uTime;",
+            "uniform float uMix;",
+            "uniform float uWaveIntensity;",
+            "uniform float uRippleIntensity;",
+            "varying vec2 vUv;",
+            "varying float vDisplacement;",
+            "",
+            "void main() {",
+            "  // Distort UVs to match vertex displacement for consistency",
+            "  vec2 distortedUv = vUv;",
+            "  distortedUv.x += sin(vUv.y * 10.0 + uTime * 1.8) * 0.008 * uWaveIntensity;",
+            "  distortedUv.y += sin(vUv.x * 8.0 + uTime * 1.2) * 0.006 * uWaveIntensity;",
+            "",
+            "  // Small ripple distortion",
+            "  distortedUv.x += sin(vUv.x * 20.0 - uTime * 3.0) * 0.003 * uRippleIntensity;",
+            "  distortedUv.y += cos(vUv.y * 18.0 + uTime * 2.5) * 0.003 * uRippleIntensity;",
+            "",
+            "  vec4 colorA = texture2D(uTextureA, distortedUv);",
+            "  vec4 colorB = texture2D(uTextureB, distortedUv);",
+            "",
+            "  // Crossfade between panels",
+            "  vec4 color = mix(colorA, colorB, uMix);",
+            "",
+            "  // Subtle specular highlight from displacement",
+            "  float highlight = vDisplacement * 3.0;",
+            "  color.rgb += vec3(highlight * 0.15, highlight * 0.12, highlight * 0.2);",
+            "",
+            "  // Slight vignette",
+            "  float vignette = 1.0 - 0.3 * length((vUv - 0.5) * 1.4);",
+            "  color.rgb *= vignette;",
+            "",
+            "  gl_FragColor = color;",
+            "}",
+          ].join("\n");
+
+          var uniforms = {
+            uTime: { value: 0.0 },
+            uTextureA: { value: textureA },
+            uTextureB: { value: textureB },
+            uMix: { value: 0.0 },
+            uWaveIntensity: { value: 0.0 },
+            uRippleIntensity: { value: 0.0 },
+          };
+
+          var material = new THREE.ShaderMaterial({
+            vertexShader: vertexShader,
+            fragmentShader: fragmentShader,
+            uniforms: uniforms,
+            side: THREE.FrontSide,
+          });
+
+          // Subdivided plane: 100x60 segments for smooth deformation
+          // Size matches camera frustum at z=0 for the perspective camera
+          var planeW = 4.8;
+          var planeH = planeW * (H / W);
+          var geometry = new THREE.PlaneGeometry(planeW, planeH, 100, 60);
+          var mesh = new THREE.Mesh(geometry, material);
+          scene.add(mesh);
+
+          // ── Render function ──
+          function renderAt(t) {
+            uniforms.uTime.value = t;
+            renderer.render(scene, camera);
+          }
+
+          // ═══════════════════════════════════════════════════════
+          // GSAP DRIVER TIMELINE
+          // ═══════════════════════════════════════════════════════
+
+          var tl = gsap.timeline({ paused: true });
+
+          // Phase 1 (0-2s): Panel A appears, gentle waves begin
+          tl.to(
+            uniforms.uWaveIntensity,
+            {
+              value: 1.0,
+              duration: 2,
+              ease: "power2.out",
+            },
+            0,
+          );
+
+          tl.to(
+            uniforms.uRippleIntensity,
+            {
+              value: 0.6,
+              duration: 2.5,
+              ease: "power2.out",
+            },
+            0.5,
+          );
+
+          // Phase 2 (2-4.5s): Waves flowing, camera tilts slightly
+          tl.to(
+            camera.rotation,
+            {
+              x: 0.06,
+              y: -0.04,
+              duration: 2.5,
+              ease: "power1.inOut",
+            },
+            2,
+          );
+
+          // Phase 3 (4.5-5.5s): Waves intensify for transition
+          tl.to(
+            uniforms.uWaveIntensity,
+            {
+              value: 2.5,
+              duration: 1.0,
+              ease: "power2.in",
+            },
+            4.5,
+          );
+
+          tl.to(
+            uniforms.uRippleIntensity,
+            {
+              value: 2.0,
+              duration: 1.0,
+              ease: "power2.in",
+            },
+            4.5,
+          );
+
+          // Phase 4 (5-7s): Crossfade from Panel A to Panel B
+          tl.to(
+            uniforms.uMix,
+            {
+              value: 1.0,
+              duration: 2.0,
+              ease: "power2.inOut",
+            },
+            5,
+          );
+
+          // Phase 5 (6.5-8.5s): Waves settle back down
+          tl.to(
+            uniforms.uWaveIntensity,
+            {
+              value: 1.0,
+              duration: 2.0,
+              ease: "power2.out",
+            },
+            6.5,
+          );
+
+          tl.to(
+            uniforms.uRippleIntensity,
+            {
+              value: 0.5,
+              duration: 2.0,
+              ease: "power2.out",
+            },
+            6.5,
+          );
+
+          // Camera returns to center
+          tl.to(
+            camera.rotation,
+            {
+              x: -0.03,
+              y: 0.03,
+              duration: 2.5,
+              ease: "power1.inOut",
+            },
+            6.5,
+          );
+
+          // Phase 6 (9-11s): Gentle breathing waves on Panel B
+          tl.to(
+            uniforms.uWaveIntensity,
+            {
+              value: 0.7,
+              duration: 2.0,
+              ease: "sine.inOut",
+            },
+            9,
+          );
+
+          tl.to(
+            uniforms.uRippleIntensity,
+            {
+              value: 0.3,
+              duration: 2.0,
+              ease: "sine.inOut",
+            },
+            9,
+          );
+
+          // Phase 7 (10.5-12s): Waves fade to still
+          tl.to(
+            uniforms.uWaveIntensity,
+            {
+              value: 0.0,
+              duration: 1.5,
+              ease: "power2.inOut",
+            },
+            10.5,
+          );
+
+          tl.to(
+            uniforms.uRippleIntensity,
+            {
+              value: 0.0,
+              duration: 1.5,
+              ease: "power2.inOut",
+            },
+            10.5,
+          );
+
+          tl.to(
+            camera.rotation,
+            {
+              x: 0,
+              y: 0,
+              duration: 1.5,
+              ease: "power2.inOut",
+            },
+            10.5,
+          );
+
+          // Driver tween: runs the full 12s, drives uTime and renders each frame
+          tl.to(
+            { frame: 0 },
+            {
+              frame: 1,
+              duration: 12,
+              ease: "none",
+              onUpdate: function () {
+                var time = tl.time();
+                uniforms.uTime.value = time;
+                renderer.render(scene, camera);
+              },
+            },
+            0,
+          );
+
+          window.__timelines["vfx-liquid-background"] = tl;
+
+          // ── hf-seek integration for Three.js adapter ──
+          window.addEventListener("hf-seek", function (e) {
+            var t = e.detail.time;
+            tl.seek(t);
+            uniforms.uTime.value = t;
+            renderer.render(scene, camera);
+          });
+
+          // Initial render
+          renderAt(0);
+        }, 0);
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/vfx-liquid-glass/vfx-liquid-glass.html b/docs/public/catalog/blocks/vfx-liquid-glass/vfx-liquid-glass.html
new file mode 100644
index 0000000000..2ac7ac0543
--- /dev/null
+++ b/docs/public/catalog/blocks/vfx-liquid-glass/vfx-liquid-glass.html
@@ -0,0 +1,752 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Liquid Glass Parallax</title>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/shaders/CopyShader.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/shaders/LuminosityHighPassShader.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/postprocessing/EffectComposer.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/postprocessing/RenderPass.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/postprocessing/ShaderPass.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/postprocessing/UnrealBloomPass.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #030407;
+        overflow: hidden;
+        font-family: "Inter", system-ui, sans-serif;
+      }
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #030407;
+      }
+
+      .text-source {
+        width: 1920px;
+        height: 1080px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        background: linear-gradient(160deg, #030407 0%, #0a1020 40%, #070910 70%, #030407 100%);
+        text-align: center;
+        padding: 0 120px;
+        gap: 32px;
+        position: relative;
+        overflow: hidden;
+      }
+      .text-source::before {
+        content: "";
+        position: absolute;
+        width: 700px;
+        height: 700px;
+        border-radius: 50%;
+        background: radial-gradient(circle, rgba(0, 212, 255, 0.06) 0%, transparent 70%);
+        top: -150px;
+        right: -100px;
+        pointer-events: none;
+      }
+      .text-source::after {
+        content: "";
+        position: absolute;
+        width: 500px;
+        height: 500px;
+        border-radius: 50%;
+        background: radial-gradient(circle, rgba(124, 58, 237, 0.05) 0%, transparent 70%);
+        bottom: -100px;
+        left: -50px;
+        pointer-events: none;
+      }
+      .badge {
+        font-size: 14px;
+        font-weight: 600;
+        letter-spacing: 3px;
+        text-transform: uppercase;
+        color: rgba(0, 212, 255, 0.8);
+      }
+      .text-source h1 {
+        font-size: 148px;
+        font-weight: 900;
+        line-height: 0.9;
+        color: rgba(248, 249, 253, 0.96);
+        text-shadow: 0 0 60px rgba(255, 255, 255, 0.15);
+        letter-spacing: -5px;
+        max-width: 1400px;
+      }
+      .text-source h1 span {
+        background: linear-gradient(135deg, #00d4ff, #a855f7);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+      }
+      .subtitle {
+        font-size: 28px;
+        font-weight: 400;
+        color: rgba(255, 255, 255, 0.35);
+        max-width: 800px;
+        line-height: 1.5;
+      }
+      .stats {
+        display: flex;
+        gap: 48px;
+        margin-top: 16px;
+      }
+      .stat {
+        text-align: center;
+      }
+      .stat-val {
+        font-size: 42px;
+        font-weight: 800;
+        color: #00d4ff;
+        letter-spacing: -1px;
+      }
+      .stat-label {
+        font-size: 12px;
+        font-weight: 600;
+        color: rgba(255, 255, 255, 0.3);
+        text-transform: uppercase;
+        letter-spacing: 2px;
+        margin-top: 4px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="liquid-glass"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="20"
+      data-root="true"
+    >
+      <canvas
+        id="cap-text"
+        layoutsubtree
+        width="1920"
+        height="1080"
+        style="
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1920px;
+          height: 1080px;
+          z-index: -1;
+          pointer-events: none;
+        "
+      >
+        <div class="text-source">
+          <div class="badge">Write HTML → Render Video</div>
+          <h1>Ship videos <span>10x faster</span></h1>
+          <div class="subtitle">
+            HTML is the source of truth for video. No timeline editors, no After Effects — just
+            code.
+          </div>
+          <div class="stats">
+            <div class="stat">
+              <div class="stat-val">47x</div>
+              <div class="stat-label">Faster than AE</div>
+            </div>
+            <div class="stat">
+              <div class="stat-val">12.4K</div>
+              <div class="stat-label">Creators</div>
+            </div>
+            <div class="stat">
+              <div class="stat-val">2.4M</div>
+              <div class="stat-label">Videos Rendered</div>
+            </div>
+          </div>
+        </div>
+      </canvas>
+
+      <canvas
+        id="theater"
+        width="1920"
+        height="1080"
+        style="position: absolute; top: 0; left: 0; width: 1920px; height: 1080px"
+      ></canvas>
+
+      <div
+        id="driver"
+        class="clip"
+        data-start="0"
+        data-duration="20"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+
+    <script>
+      var W = 1920,
+        H = 1080,
+        DURATION = 20,
+        ASPECT = W / H;
+      var TEXT_Z = -3.08;
+
+      // ── Seeded PRNG ────────────────────────────────────────────────────
+      function seededRandom(seed) {
+        var v = seed >>> 0;
+        return function () {
+          v += 0x6d2b79f5;
+          var m = v;
+          m = Math.imul(m ^ (m >>> 15), m | 1);
+          m ^= m + Math.imul(m ^ (m >>> 7), m | 61);
+          return ((m ^ (m >>> 14)) >>> 0) / 4294967296;
+        };
+      }
+
+      // ── Voronoi (self-contained, no d3) ────────────────────────────────
+      function polygonArea(pts) {
+        var a = 0;
+        for (var i = 0; i < pts.length; i++) {
+          var j = (i + 1) % pts.length;
+          a += pts[i][0] * pts[j][1] - pts[j][0] * pts[i][1];
+        }
+        return a * 0.5;
+      }
+
+      function polygonCentroid(pts) {
+        var sa = polygonArea(pts) || 1;
+        var cx = 0,
+          cy = 0;
+        for (var i = 0; i < pts.length; i++) {
+          var j = (i + 1) % pts.length;
+          var f = pts[i][0] * pts[j][1] - pts[j][0] * pts[i][1];
+          cx += (pts[i][0] + pts[j][0]) * f;
+          cy += (pts[i][1] + pts[j][1]) * f;
+        }
+        return { x: cx / (6 * sa), y: cy / (6 * sa) };
+      }
+
+      function clipPoly(poly, px, py, nx, ny) {
+        var out = [];
+        for (var i = 0; i < poly.length; i++) {
+          var c = poly[i],
+            n = poly[(i + 1) % poly.length];
+          var dc = (c[0] - px) * nx + (c[1] - py) * ny;
+          var dn = (n[0] - px) * nx + (n[1] - py) * ny;
+          if (dc <= 0) out.push(c);
+          if (dc <= 0 !== dn <= 0) {
+            var t = dc / (dc - dn);
+            out.push([c[0] + t * (n[0] - c[0]), c[1] + t * (n[1] - c[1])]);
+          }
+        }
+        return out;
+      }
+
+      function computeVoronoi(points, xmin, ymin, xmax, ymax) {
+        var cells = [];
+        for (var i = 0; i < points.length; i++) {
+          var px = points[i][0],
+            py = points[i][1];
+          var poly = [
+            [xmin, ymin],
+            [xmax, ymin],
+            [xmax, ymax],
+            [xmin, ymax],
+          ];
+          for (var j = 0; j < points.length; j++) {
+            if (i === j) continue;
+            var qx = points[j][0],
+              qy = points[j][1];
+            var mx = (px + qx) * 0.5,
+              my = (py + qy) * 0.5;
+            poly = clipPoly(poly, mx, my, qx - px, qy - py);
+            if (poly.length < 3) break;
+          }
+          cells.push(poly.length >= 3 ? poly : null);
+        }
+        return cells;
+      }
+
+      // ── Feature Detection ──────────────────────────────────────────────
+      function canCapture() {
+        var tc = document.createElement("canvas");
+        if (!("layoutSubtree" in tc)) return false;
+        tc.setAttribute("layoutsubtree", "");
+        var ctx = tc.getContext("2d");
+        return ctx && typeof ctx.drawElementImage === "function";
+      }
+      var apiOk = canCapture();
+
+      // ── Capture backdrop ───────────────────────────────────────────────
+      var capCanvas = document.getElementById("cap-text");
+      var capCtx = capCanvas.getContext("2d");
+      var textEl = capCanvas.querySelector(".text-source");
+
+      function captureBackdrop() {
+        capCtx.clearRect(0, 0, W, H);
+        if (apiOk) {
+          capCtx.drawElementImage(textEl, 0, 0, W, H);
+        } else {
+          var g = capCtx.createLinearGradient(0, 0, W, H);
+          g.addColorStop(0, "#030407");
+          g.addColorStop(0.5, "#070910");
+          g.addColorStop(1, "#030407");
+          capCtx.fillStyle = g;
+          capCtx.fillRect(0, 0, W, H);
+          capCtx.textAlign = "center";
+          capCtx.textBaseline = "middle";
+          capCtx.font = "900 172px Inter, system-ui, sans-serif";
+          capCtx.shadowColor = "rgba(255,255,255,0.22)";
+          capCtx.shadowBlur = 20;
+          capCtx.fillStyle = "rgba(248,249,253,0.94)";
+          capCtx.fillText("Liquid Glass", W / 2, H / 2 - 80);
+          capCtx.fillText("Design", W / 2, H / 2 + 90);
+        }
+      }
+
+      // ── Three.js Renderer ──────────────────────────────────────────────
+      var theaterCanvas = document.getElementById("theater");
+      var renderer = new THREE.WebGLRenderer({
+        canvas: theaterCanvas,
+        antialias: true,
+        alpha: false,
+        powerPreference: "high-performance",
+        preserveDrawingBuffer: true,
+      });
+      renderer.setSize(W, H, false);
+      renderer.setPixelRatio(1);
+      renderer.outputEncoding = THREE.sRGBEncoding;
+      renderer.toneMapping = THREE.ACESFilmicToneMapping;
+      renderer.toneMappingExposure = 1.08;
+      renderer.setClearColor(0x030407, 1);
+
+      var scene = new THREE.Scene();
+      scene.background = new THREE.Color(0x030407);
+
+      // ── Environment Map (procedural) ───────────────────────────────────
+      var envCanvas = document.createElement("canvas");
+      envCanvas.width = 1024;
+      envCanvas.height = 512;
+      var ectx = envCanvas.getContext("2d");
+      var eg = ectx.createLinearGradient(0, 0, 1024, 512);
+      eg.addColorStop(0, "#020307");
+      eg.addColorStop(0.18, "#ffffff");
+      eg.addColorStop(0.24, "#7fdcff");
+      eg.addColorStop(0.42, "#07101c");
+      eg.addColorStop(0.58, "#ffffff");
+      eg.addColorStop(0.64, "#ffc4a6");
+      eg.addColorStop(0.82, "#0b0c12");
+      eg.addColorStop(1, "#020307");
+      ectx.fillStyle = eg;
+      ectx.fillRect(0, 0, 1024, 512);
+      ectx.globalCompositeOperation = "screen";
+      var envRng = seededRandom(999);
+      for (var ei = 0; ei < 9; ei++) {
+        var ey = 36 + ei * 52;
+        ectx.fillStyle = "rgba(255,255,255," + (ei % 3 === 0 ? 0.22 : 0.1) + ")";
+        ectx.fillRect((ei % 2) * 120, ey, 1024 * 0.72, 4 + (ei % 3) * 2);
+      }
+      var envTex = new THREE.CanvasTexture(envCanvas);
+      envTex.mapping = THREE.EquirectangularReflectionMapping;
+      var pmrem = new THREE.PMREMGenerator(renderer);
+      var envMap = pmrem.fromEquirectangular(envTex);
+      scene.environment = envMap.texture;
+      envTex.dispose();
+      pmrem.dispose();
+
+      // ── Camera ─────────────────────────────────────────────────────────
+      var CAM_Z = 9.35;
+      var camera = new THREE.PerspectiveCamera(34, ASPECT, 0.1, 80);
+      camera.position.set(0, 0, CAM_Z);
+
+      // ── Scene Groups ───────────────────────────────────────────────────
+      var rig = new THREE.Group();
+      scene.add(rig);
+      var textRig = new THREE.Group();
+      rig.add(textRig);
+
+      // ── Backdrop Plane (text behind glass) ─────────────────────────────
+      var backdropTex = new THREE.CanvasTexture(capCanvas);
+      backdropTex.minFilter = THREE.LinearFilter;
+      backdropTex.magFilter = THREE.LinearFilter;
+      backdropTex.generateMipmaps = false;
+
+      function viewportAtZ(z) {
+        var d = camera.position.z - z;
+        var h = 2 * Math.tan(THREE.MathUtils.degToRad(camera.fov * 0.5)) * d;
+        return { w: h * camera.aspect, h: h };
+      }
+      var vp = viewportAtZ(TEXT_Z);
+      var backdropMesh = new THREE.Mesh(
+        new THREE.PlaneGeometry(vp.w * 1.18, vp.h * 1.18),
+        new THREE.MeshBasicMaterial({ map: backdropTex, depthWrite: true, depthTest: true }),
+      );
+      backdropMesh.position.z = TEXT_Z;
+      backdropMesh.renderOrder = -4;
+      textRig.add(backdropMesh);
+
+      // ── Light Bands ────────────────────────────────────────────────────
+      var bandSpecs = [
+        [-2.8, 1.45, -1.78, 3.2, 0.035, 0.13, 0x9edaff, 0.24],
+        [2.7, -1.24, -1.76, 3.0, 0.032, -0.1, 0xffd1b5, 0.18],
+        [0.0, 2.05, -1.82, 5.2, 0.026, 0.02, 0xffffff, 0.13],
+        [-0.55, -1.92, -1.8, 4.2, 0.024, -0.03, 0xc7f6ff, 0.1],
+      ];
+      bandSpecs.forEach(function (s) {
+        var m = new THREE.Mesh(
+          new THREE.PlaneGeometry(s[3], s[4]),
+          new THREE.MeshBasicMaterial({
+            color: s[6],
+            transparent: true,
+            opacity: s[7],
+            blending: THREE.AdditiveBlending,
+            depthWrite: false,
+          }),
+        );
+        m.position.set(s[0], s[1], s[2]);
+        m.rotation.z = s[5];
+        rig.add(m);
+      });
+
+      // ── Glass Shards (Voronoi fracture) ────────────────────────────────
+      var LAYOUT = { width: 9.7, height: 5.78, cols: 9, rows: 6, seed: 5297 };
+      var rng = seededRandom(LAYOUT.seed);
+      var seedPoints = [];
+      var cw = LAYOUT.width / LAYOUT.cols,
+        ch = LAYOUT.height / LAYOUT.rows;
+
+      for (var row = 0; row < LAYOUT.rows; row++) {
+        for (var col = 0; col < LAYOUT.cols; col++) {
+          var cp =
+            1 -
+            Math.min(
+              0.62,
+              Math.hypot((col + 0.5) / LAYOUT.cols - 0.5, (row + 0.5) / LAYOUT.rows - 0.5),
+            );
+          var jx = (rng() - 0.5) * cw * (0.58 + cp * 0.16);
+          var jy = (rng() - 0.5) * ch * (0.58 + cp * 0.16);
+          seedPoints.push([(col + 0.5) * cw + jx, (row + 0.5) * ch + jy]);
+        }
+      }
+
+      var voronoiCells = computeVoronoi(seedPoints, 0, 0, LAYOUT.width, LAYOUT.height);
+
+      var glassRig = new THREE.Group();
+      glassRig.scale.setScalar(1.025);
+      glassRig.position.set(0, 0, 0.08);
+      rig.add(glassRig);
+
+      var panes = [];
+      var GAP_SCALE = 0.954;
+
+      for (var pi = 0; pi < voronoiCells.length; pi++) {
+        var cell = voronoiCells[pi];
+        if (!cell || cell.length < 3) continue;
+
+        var worldPts = cell.map(function (p) {
+          return [p[0] - LAYOUT.width / 2, LAYOUT.height / 2 - p[1]];
+        });
+        var area = Math.abs(polygonArea(worldPts));
+        if (area < 0.034) continue;
+
+        var cent = polygonCentroid(worldPts);
+        var rad = new THREE.Vector2(cent.x, cent.y);
+        var radLen = Math.max(rad.length(), 0.001);
+        rad.divideScalar(radLen);
+
+        var localPts = worldPts.map(function (p) {
+          return [(p[0] - cent.x) * GAP_SCALE, (p[1] - cent.y) * GAP_SCALE];
+        });
+        var outward = 0.046 + rng() * 0.105;
+        var depthLift = (area / (LAYOUT.width * LAYOUT.height)) * 1.42;
+        var phase = pi * 0.71 + rng() * 4;
+        var depth = 0.18 + rng() * 0.1;
+        var bevel = Math.min(0.108, Math.sqrt(area) * 0.095);
+        var roughness = pi % 7 === 0 ? 0.08 + rng() * 0.035 : 0.012 + rng() * 0.038;
+        var thickness = 1.45 + rng() * 1.25;
+
+        // Geometry
+        var shape = new THREE.Shape();
+        localPts.forEach(function (p, idx) {
+          idx === 0 ? shape.moveTo(p[0], p[1]) : shape.lineTo(p[0], p[1]);
+        });
+        shape.closePath();
+        var geo = new THREE.ExtrudeGeometry(shape, {
+          depth: depth,
+          bevelEnabled: true,
+          bevelThickness: bevel,
+          bevelSize: bevel,
+          bevelSegments: 9,
+          curveSegments: 2,
+          steps: 2,
+        });
+        geo.center();
+        geo.computeVertexNormals();
+
+        // Material
+        var mat = new THREE.MeshPhysicalMaterial({
+          color: 0xf7fbff,
+          metalness: 0,
+          roughness: roughness,
+          transmission: 1,
+          thickness: thickness,
+          ior: 1.55,
+          attenuationColor: new THREE.Color(0xe5f8ff),
+          attenuationDistance: 12,
+          clearcoat: 1,
+          clearcoatRoughness: Math.min(0.12, roughness + 0.035),
+          specularIntensity: 1,
+          envMapIntensity: 2.1,
+          transparent: true,
+          opacity: 0.76,
+          side: THREE.DoubleSide,
+        });
+
+        var pane = new THREE.Group();
+        var mesh = new THREE.Mesh(geo, mat);
+        mesh.renderOrder = 4 + pi;
+        pane.add(mesh);
+
+        // Edge highlights (white + cyan + pink for chromatic aberration look)
+        var edgeGeo = new THREE.EdgesGeometry(geo, 18);
+        var whiteEdge = new THREE.LineSegments(
+          edgeGeo,
+          new THREE.LineBasicMaterial({
+            color: 0xffffff,
+            transparent: true,
+            opacity: roughness > 0.08 ? 0.32 : 0.44,
+            blending: THREE.AdditiveBlending,
+            depthWrite: false,
+          }),
+        );
+        pane.add(whiteEdge);
+        var cyanEdge = new THREE.LineSegments(
+          edgeGeo.clone(),
+          new THREE.LineBasicMaterial({
+            color: 0x72e8ff,
+            transparent: true,
+            opacity: 0.18,
+            blending: THREE.AdditiveBlending,
+            depthWrite: false,
+          }),
+        );
+        cyanEdge.position.set(0.008, -0.002, -0.008);
+        pane.add(cyanEdge);
+        var pinkEdge = new THREE.LineSegments(
+          edgeGeo.clone(),
+          new THREE.LineBasicMaterial({
+            color: 0xff6f8d,
+            transparent: true,
+            opacity: 0.14,
+            blending: THREE.AdditiveBlending,
+            depthWrite: false,
+          }),
+        );
+        pinkEdge.position.set(-0.009, 0.003, 0.006);
+        pane.add(pinkEdge);
+
+        var basePos = new THREE.Vector3(
+          cent.x + rad.x * outward,
+          cent.y + rad.y * outward,
+          0.28 + depthLift + rng() * 0.18,
+        );
+        var baseRot = new THREE.Euler(
+          (rng() - 0.5) * 0.074,
+          (rng() - 0.5) * 0.086,
+          (rng() - 0.5) * 0.052,
+        );
+        pane.position.copy(basePos);
+        pane.rotation.copy(baseRot);
+
+        pane.userData = {
+          basePos: basePos.clone(),
+          baseRot: { x: baseRot.x, y: baseRot.y, z: baseRot.z },
+          phase: phase,
+          speed: 0.28 + rng() * 0.16,
+          drift: new THREE.Vector3(
+            0.02 + rng() * 0.026,
+            0.018 + rng() * 0.024,
+            0.068 + rng() * 0.092,
+          ),
+          rotDrift: new THREE.Vector3(
+            0.016 + rng() * 0.026,
+            0.018 + rng() * 0.03,
+            0.008 + rng() * 0.016,
+          ),
+          ptrWeight: 0.04 + rng() * 0.052,
+          rad: rad.clone(),
+          baseOpacity: 0.76,
+          baseRoughness: roughness,
+          glassMat: mat,
+          edgeW: whiteEdge.material,
+          edgeC: cyanEdge.material,
+          edgeP: pinkEdge.material,
+          edgeWBase: whiteEdge.material.opacity,
+          edgeCBase: cyanEdge.material.opacity,
+          edgePBase: pinkEdge.material.opacity,
+        };
+
+        panes.push(pane);
+        glassRig.add(pane);
+      }
+
+      // ── Lighting ───────────────────────────────────────────────────────
+      scene.add(new THREE.HemisphereLight(0xe8f0ff, 0x07040b, 1.1));
+      var keyLight = new THREE.DirectionalLight(0xffffff, 3.4);
+      keyLight.position.set(-3.8, 4.4, 5.6);
+      scene.add(keyLight);
+      var edgeLight = new THREE.PointLight(0x8bdcff, 14, 12);
+      edgeLight.position.set(3.1, 1.4, 3.4);
+      scene.add(edgeLight);
+      var warmLight = new THREE.PointLight(0xffc8a8, 7, 12);
+      warmLight.position.set(-4.4, -2.2, 3.2);
+      scene.add(warmLight);
+
+      // ── Post-Processing ────────────────────────────────────────────────
+      var GrainShader = {
+        uniforms: { tDiffuse: { value: null }, time: { value: 0 }, strength: { value: 0.024 } },
+        vertexShader:
+          "varying vec2 vUv; void main(){ vUv=uv; gl_Position=projectionMatrix*modelViewMatrix*vec4(position,1.0); }",
+        fragmentShader: [
+          "uniform sampler2D tDiffuse; uniform float time; uniform float strength; varying vec2 vUv;",
+          "float n(vec2 v){ return fract(sin(dot(v+time,vec2(12.9898,78.233)))*43758.5453); }",
+          "void main(){",
+          "  vec4 c=texture2D(tDiffuse,vUv);",
+          "  c.rgb+=(n(vUv*vec2(1520.0,940.0))-0.5)*strength;",
+          "  c.rgb=pow(max(c.rgb,vec3(0.0)),vec3(0.985));",
+          "  gl_FragColor=c;",
+          "}",
+        ].join("\n"),
+      };
+
+      var composer = new THREE.EffectComposer(renderer);
+      composer.addPass(new THREE.RenderPass(scene, camera));
+      var bloomPass = new THREE.UnrealBloomPass(new THREE.Vector2(W, H), 0.32, 0.4, 0.86);
+      composer.addPass(bloomPass);
+      var grainPass = new THREE.ShaderPass(GrainShader);
+      composer.addPass(grainPass);
+
+      // ── Pointer State (GSAP-animated, replaces mouse) ──────────────────
+      var ptr = { x: 0.16, y: 0.04 };
+      var REVEAL_R = 2.18;
+      var PTR_WORLD = new THREE.Vector2();
+
+      function updatePtrWorld() {
+        PTR_WORLD.set(ptr.x * 4.86, ptr.y * 2.84);
+      }
+
+      // ── Render Function (deterministic, seekable) ──────────────────────
+      function renderScene(elapsed) {
+        updatePtrWorld();
+
+        camera.position.x = ptr.x * 0.38;
+        camera.position.y = -ptr.y * 0.27;
+        camera.position.z = CAM_Z;
+        camera.lookAt(0, 0, 0);
+
+        textRig.position.x = -ptr.x * 0.56;
+        textRig.position.y = ptr.y * 0.36;
+        textRig.position.z = Math.sin(elapsed * 0.28) * 0.018;
+        textRig.rotation.x = ptr.y * 0.028;
+        textRig.rotation.y = ptr.x * 0.042;
+
+        glassRig.rotation.x = -ptr.y * 0.064;
+        glassRig.rotation.y = ptr.x * 0.078;
+
+        edgeLight.position.x = 3.1 + ptr.x * 0.9;
+        edgeLight.position.y = 1.4 + ptr.y * 0.55;
+        warmLight.position.x = -4.4 - ptr.x * 0.65;
+
+        for (var i = 0; i < panes.length; i++) {
+          var pane = panes[i];
+          var d = pane.userData;
+          var t = elapsed * d.speed + d.phase;
+          var ptrDist = PTR_WORLD.distanceTo(new THREE.Vector2(d.basePos.x, d.basePos.y));
+          var reveal = Math.pow(Math.max(0, 1 - ptrDist / REVEAL_R), 2);
+          var shatter = reveal * 0.36;
+          var awayX = d.basePos.x - PTR_WORLD.x;
+          var awayY = d.basePos.y - PTR_WORLD.y;
+          var awayLen = Math.max(Math.hypot(awayX, awayY), 0.001);
+          var revealSpread = reveal * 0.24;
+          var shatterSpread = shatter * 0.68;
+          var pSlide = d.ptrWeight * 1.9;
+
+          pane.position.x =
+            d.basePos.x +
+            Math.sin(t * 0.42) * d.drift.x +
+            ptr.x * pSlide +
+            (awayX / awayLen) * (revealSpread + shatterSpread);
+          pane.position.y =
+            d.basePos.y +
+            Math.cos(t * 0.38) * d.drift.y -
+            ptr.y * pSlide * 0.72 +
+            (awayY / awayLen) * (revealSpread + shatterSpread * 0.84);
+          pane.position.z =
+            d.basePos.z + Math.sin(t * 0.52 + i) * d.drift.z + reveal * 0.32 + shatter * 0.74;
+
+          pane.rotation.x =
+            d.baseRot.x +
+            Math.sin(t * 0.46) * d.rotDrift.x -
+            ptr.y * d.ptrWeight * 1.15 +
+            reveal * (awayY / awayLen) * 0.16 +
+            shatter * (awayY / awayLen) * 0.58;
+          pane.rotation.y =
+            d.baseRot.y +
+            Math.cos(t * 0.43) * d.rotDrift.y +
+            ptr.x * d.ptrWeight * 1.38 -
+            reveal * (awayX / awayLen) * 0.2 -
+            shatter * (awayX / awayLen) * 0.66;
+          pane.rotation.z =
+            d.baseRot.z +
+            Math.sin(t * 0.34) * d.rotDrift.z +
+            reveal * Math.sin(t + i) * 0.028 +
+            shatter * (d.rad.x * awayY - d.rad.y * awayX) * 0.18;
+
+          d.glassMat.opacity = d.baseOpacity + shatter * 0.14;
+          d.glassMat.roughness = Math.min(0.14, d.baseRoughness + shatter * 0.048);
+          d.edgeW.opacity = d.edgeWBase + shatter * 0.34;
+          d.edgeC.opacity = d.edgeCBase + shatter * 0.22;
+          d.edgeP.opacity = d.edgePBase + shatter * 0.2;
+        }
+
+        grainPass.uniforms.time.value = elapsed;
+        composer.render();
+      }
+
+      // ── GSAP Timeline ──────────────────────────────────────────────────
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+
+      tl.to({ _: 0 }, { _: 1, duration: DURATION, ease: "none" }, 0);
+
+      // Pointer choreography — smooth wandering reveal
+      tl.set(ptr, { x: 0.16, y: 0.04 }, 0);
+      tl.to(ptr, { x: 0.45, y: -0.15, duration: 3.5, ease: "sine.inOut" }, 0.5);
+      tl.to(ptr, { x: -0.35, y: 0.25, duration: 3.5, ease: "sine.inOut" }, 4);
+      tl.to(ptr, { x: 0.15, y: -0.35, duration: 3, ease: "sine.inOut" }, 7.5);
+      tl.to(ptr, { x: -0.45, y: 0.05, duration: 3, ease: "sine.inOut" }, 10.5);
+      tl.to(ptr, { x: 0.3, y: 0.2, duration: 3, ease: "sine.inOut" }, 13.5);
+      tl.to(ptr, { x: -0.1, y: -0.1, duration: 2.5, ease: "sine.inOut" }, 16.5);
+      tl.to(ptr, { x: 0.16, y: 0.04, duration: 1, ease: "power2.inOut" }, 19);
+
+      tl.eventCallback("onUpdate", function () {
+        renderScene(tl.time());
+      });
+
+      window.__timelines["liquid-glass"] = tl;
+
+      setTimeout(function () {
+        captureBackdrop();
+        backdropTex.needsUpdate = true;
+        tl.seek(0);
+      }, 0);
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/vfx-magnetic/vfx-magnetic.html b/docs/public/catalog/blocks/vfx-magnetic/vfx-magnetic.html
new file mode 100644
index 0000000000..521020e0a7
--- /dev/null
+++ b/docs/public/catalog/blocks/vfx-magnetic/vfx-magnetic.html
@@ -0,0 +1,464 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Magnetic Cursor — HTML-in-Canvas</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #0c0c0c;
+        overflow: hidden;
+        font-family:
+          system-ui,
+          -apple-system,
+          sans-serif;
+        color: #e8e8e8;
+      }
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0c0c0c;
+      }
+      canvas {
+        display: block;
+      }
+
+      .page-content {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        font-family:
+          system-ui,
+          -apple-system,
+          sans-serif;
+        color: #e8e8e8;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .page-inner {
+        max-width: 900px;
+        padding: 0 48px;
+      }
+      .heading {
+        font-size: 64px;
+        font-weight: 700;
+        line-height: 1.15;
+        letter-spacing: -0.03em;
+        color: #f0f0f0;
+        margin-bottom: 32px;
+      }
+      .heading em {
+        font-style: normal;
+        color: #70c7ed;
+      }
+      .body-text {
+        font-size: 22px;
+        line-height: 1.7;
+        color: rgba(255, 255, 255, 0.6);
+        margin-bottom: 24px;
+      }
+      .body-text:last-of-type {
+        margin-bottom: 48px;
+      }
+      .hint {
+        font-size: 15px;
+        color: rgba(255, 255, 255, 0.3);
+        font-family: ui-monospace, "SF Mono", monospace;
+        margin-bottom: 48px;
+        letter-spacing: 0.02em;
+      }
+      .card-grid {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 20px;
+      }
+      .card {
+        background: rgba(255, 255, 255, 0.04);
+        border: 1px solid rgba(255, 255, 255, 0.08);
+        border-radius: 14px;
+        padding: 24px;
+      }
+      .card-icon {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+        margin-bottom: 14px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 20px;
+        background: rgba(112, 199, 237, 0.12);
+      }
+      .card-title {
+        font-size: 16px;
+        font-weight: 600;
+        color: rgba(255, 255, 255, 0.85);
+        margin-bottom: 8px;
+      }
+      .card-desc {
+        font-size: 14px;
+        line-height: 1.5;
+        color: rgba(255, 255, 255, 0.4);
+      }
+
+      /* Subtitles */
+      .subtitle-bar {
+        position: absolute;
+        bottom: 60px;
+        left: 50%;
+        transform: translateX(-50%);
+        z-index: 10;
+        pointer-events: none;
+      }
+      .subtitle {
+        font-size: 28px;
+        font-weight: 500;
+        color: white;
+        text-align: center;
+        background: rgba(0, 0, 0, 0.7);
+        padding: 12px 32px;
+        border-radius: 8px;
+        backdrop-filter: blur(8px);
+        white-space: nowrap;
+        opacity: 0;
+        font-family:
+          system-ui,
+          -apple-system,
+          sans-serif;
+      }
+
+      /* Cursor dot */
+      .cursor-dot {
+        position: absolute;
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        background: rgba(112, 199, 237, 0.8);
+        box-shadow:
+          0 0 20px rgba(112, 199, 237, 0.5),
+          0 0 40px rgba(112, 199, 237, 0.3);
+        z-index: 10;
+        pointer-events: none;
+        transform: translate(-50%, -50%);
+        opacity: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="magnetic-cursor"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="15"
+      data-root="true"
+    >
+      <canvas
+        id="gl-canvas"
+        layoutsubtree
+        width="1920"
+        height="1080"
+        style="position: absolute; top: 0; left: 0; width: 1920px; height: 1080px"
+      >
+        <div class="page-content" id="content" style="width: 1920px; height: 1080px">
+          <div class="page-inner">
+            <h1 class="heading">Pixels bend toward<br />your <em>cursor</em></h1>
+            <p class="body-text">
+              Move your mouse across this page. Every pixel is drawn through a WebGL shader that
+              warps space toward your cursor position, like a magnet pulling iron filings beneath a
+              thin rubber sheet.
+            </p>
+            <p class="body-text">
+              The distortion follows a Gaussian falloff — strong at close range, tapering smoothly
+              to nothing. The text remains readable even under deformation.
+            </p>
+            <p class="hint">HTML-in-Canvas API + WebGL2 shader distortion</p>
+            <div class="card-grid">
+              <div class="card">
+                <div class="card-icon">&#9889;</div>
+                <div class="card-title">Real-time</div>
+                <div class="card-desc">
+                  60fps distortion on live DOM content via texElementImage2D
+                </div>
+              </div>
+              <div class="card">
+                <div class="card-icon">&#128268;</div>
+                <div class="card-title">Native API</div>
+                <div class="card-desc">
+                  No html2canvas. Browser's own rasterizer at full fidelity.
+                </div>
+              </div>
+              <div class="card">
+                <div class="card-icon">&#127912;</div>
+                <div class="card-title">GPU Shaders</div>
+                <div class="card-desc">
+                  Gaussian warp + chromatic aberration in one fragment shader pass.
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </canvas>
+
+      <!-- Visible cursor dot -->
+      <div class="cursor-dot" id="cursor-dot"></div>
+
+      <!-- Subtitles -->
+      <div class="subtitle-bar">
+        <div class="subtitle" id="sub1">
+          The HTML-in-Canvas API renders live DOM as a WebGL texture
+        </div>
+        <div class="subtitle" id="sub2">A magnetic shader warps every pixel toward the cursor</div>
+        <div class="subtitle" id="sub3">
+          Chromatic aberration splits RGB channels at the distortion site
+        </div>
+        <div class="subtitle" id="sub4">
+          Impossible without native drawElementImage — no polyfill exists
+        </div>
+      </div>
+
+      <div
+        id="driver"
+        class="clip"
+        data-start="0"
+        data-duration="15"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+
+    <script>
+      var W = 1920,
+        H = 1080;
+      var canvas = document.getElementById("gl-canvas");
+      var content = document.getElementById("content");
+      var cursorDot = document.getElementById("cursor-dot");
+
+      function isSupported() {
+        var tc = document.createElement("canvas");
+        if (!("layoutSubtree" in tc)) return false;
+        tc.setAttribute("layoutsubtree", "");
+        var ctx = tc.getContext("2d");
+        return ctx && typeof ctx.drawElementImage === "function";
+      }
+
+      // ── WebGL2 Setup ─────────────────────────────────────────────────
+      var gl = canvas.getContext("webgl2", { alpha: false, preserveDrawingBuffer: true });
+
+      function compile(type, src) {
+        var s = gl.createShader(type);
+        gl.shaderSource(s, src);
+        gl.compileShader(s);
+        if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) console.error(gl.getShaderInfoLog(s));
+        return s;
+      }
+      function link(vsSrc, fsSrc) {
+        var p = gl.createProgram();
+        gl.attachShader(p, compile(gl.VERTEX_SHADER, vsSrc));
+        gl.attachShader(p, compile(gl.FRAGMENT_SHADER, fsSrc));
+        gl.linkProgram(p);
+        return p;
+      }
+
+      var VS = [
+        "#version 300 es",
+        "in vec2 a_pos;",
+        "out vec2 v_uv;",
+        "void main() {",
+        "  v_uv = vec2(a_pos.x * 0.5 + 0.5, 0.5 - a_pos.y * 0.5);",
+        "  gl_Position = vec4(a_pos, 0.0, 1.0);",
+        "}",
+      ].join("\n");
+
+      var FS = [
+        "#version 300 es",
+        "precision highp float;",
+        "in vec2 v_uv;",
+        "out vec4 fragColor;",
+        "uniform sampler2D u_content;",
+        "uniform vec2 u_mouse;",
+        "uniform vec2 u_resolution;",
+        "uniform float u_repel;",
+        "uniform float u_strength;",
+        "",
+        "void main() {",
+        "  vec2 uv = v_uv;",
+        "  float aspect = u_resolution.x / u_resolution.y;",
+        "  vec2 delta = u_mouse - uv;",
+        "  vec2 aspectDelta = delta * vec2(aspect, 1.0);",
+        "  float dist = length(aspectDelta);",
+        "  float strength = exp(-dist * dist * 20.0) * 0.04 * u_strength;",
+        "  float direction = mix(1.0, -1.0, u_repel);",
+        "  vec2 displaced = uv + delta * strength * direction;",
+        "  displaced = clamp(displaced, vec2(0.0), vec2(1.0));",
+        "  float aberration = strength * 0.6;",
+        "  vec2 aberDir = normalize(delta + 0.0001) * aberration;",
+        "  float r = texture(u_content, displaced + aberDir * 0.3).r;",
+        "  float g = texture(u_content, displaced).g;",
+        "  float b = texture(u_content, displaced - aberDir * 0.3).b;",
+        "  fragColor = vec4(r, g, b, 1.0);",
+        "}",
+      ].join("\n");
+
+      var prog = link(VS, FS);
+
+      // Quad
+      var vao = gl.createVertexArray();
+      gl.bindVertexArray(vao);
+      var buf = gl.createBuffer();
+      gl.bindBuffer(gl.ARRAY_BUFFER, buf);
+      gl.bufferData(
+        gl.ARRAY_BUFFER,
+        new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),
+        gl.STATIC_DRAW,
+      );
+      var aPos = gl.getAttribLocation(prog, "a_pos");
+      gl.enableVertexAttribArray(aPos);
+      gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);
+
+      // Texture
+      var tex = gl.createTexture();
+      gl.bindTexture(gl.TEXTURE_2D, tex);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+
+      // Uniforms
+      gl.useProgram(prog);
+      var U = {};
+      ["u_content", "u_mouse", "u_resolution", "u_repel", "u_strength"].forEach(function (n) {
+        U[n] = gl.getUniformLocation(prog, n);
+      });
+
+      // ── Capture + Render ─────────────────────────────────────────────
+      var captured = false;
+
+      function captureContent() {
+        if (!isSupported()) return;
+        gl.bindTexture(gl.TEXTURE_2D, tex);
+        gl.texElementImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, content);
+        captured = true;
+      }
+
+      // Also support drawElementImage fallback via 2D context capture
+      function captureVia2D() {
+        var tc = document.createElement("canvas");
+        tc.setAttribute("layoutsubtree", "");
+        tc.width = W;
+        tc.height = H;
+        // Can't use drawElementImage from a different canvas — skip fallback
+      }
+
+      function render(mouseX, mouseY, repel, strength) {
+        gl.viewport(0, 0, W, H);
+        gl.useProgram(prog);
+        gl.bindVertexArray(vao);
+        gl.activeTexture(gl.TEXTURE0);
+        gl.bindTexture(gl.TEXTURE_2D, tex);
+        gl.uniform1i(U.u_content, 0);
+        gl.uniform2f(U.u_mouse, mouseX, mouseY);
+        gl.uniform2f(U.u_resolution, W, H);
+        gl.uniform1f(U.u_repel, repel);
+        gl.uniform1f(U.u_strength, strength);
+        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+      }
+
+      // ── Animation State ──────────────────────────────────────────────
+      var S = {
+        mouseX: 0.5,
+        mouseY: 0.5,
+        repel: 0,
+        strength: 0,
+        progress: 0,
+      };
+
+      // ── GSAP Timeline ────────────────────────────────────────────────
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+
+      // Driver tween
+      tl.to(
+        S,
+        {
+          progress: 1,
+          duration: 15,
+          ease: "none",
+          onUpdate: function () {
+            // Update cursor dot position
+            cursorDot.style.left = S.mouseX * W + "px";
+            cursorDot.style.top = S.mouseY * H + "px";
+            render(S.mouseX, S.mouseY, S.repel, S.strength);
+          },
+        },
+        0,
+      );
+
+      // Cursor appears
+      tl.to(cursorDot, { opacity: 1, duration: 0.3 }, 0.5);
+      tl.to(S, { strength: 1, duration: 0.5, ease: "power2.out" }, 0.5);
+
+      // Cursor path: smooth figure-8 across the page
+      // Phase 1: sweep across heading
+      tl.to(S, { mouseX: 0.35, mouseY: 0.3, duration: 2, ease: "power1.inOut" }, 1);
+      tl.to(S, { mouseX: 0.6, mouseY: 0.35, duration: 2, ease: "power1.inOut" }, 3);
+
+      // Phase 2: circle around text
+      tl.to(S, { mouseX: 0.4, mouseY: 0.5, duration: 1.5, ease: "sine.inOut" }, 5);
+      tl.to(S, { mouseX: 0.55, mouseY: 0.55, duration: 1.5, ease: "sine.inOut" }, 6.5);
+
+      // Phase 3: repel pulse
+      tl.to(S, { repel: 1, duration: 0.2, ease: "power4.out" }, 8);
+      tl.to(S, { repel: 0, duration: 0.5, ease: "power2.out" }, 8.5);
+
+      // Phase 4: sweep across cards
+      tl.to(S, { mouseX: 0.3, mouseY: 0.75, duration: 2, ease: "power1.inOut" }, 9);
+      tl.to(S, { mouseX: 0.65, mouseY: 0.72, duration: 2, ease: "power1.inOut" }, 11);
+
+      // Phase 5: exit
+      tl.to(S, { mouseX: 0.8, mouseY: 0.2, duration: 1.5, ease: "power2.inOut" }, 13);
+      tl.to(S, { strength: 0, duration: 0.5 }, 14);
+      tl.to(cursorDot, { opacity: 0, duration: 0.3 }, 14.2);
+
+      // Subtitles
+      tl.to("#sub1", { opacity: 1, duration: 0.3 }, 1);
+      tl.to("#sub1", { opacity: 0, duration: 0.3 }, 3.5);
+      tl.to("#sub2", { opacity: 1, duration: 0.3 }, 4);
+      tl.to("#sub2", { opacity: 0, duration: 0.3 }, 6.5);
+      tl.to("#sub3", { opacity: 1, duration: 0.3 }, 7.5);
+      tl.to("#sub3", { opacity: 0, duration: 0.3 }, 9.5);
+      tl.to("#sub4", { opacity: 1, duration: 0.3 }, 10.5);
+      tl.to("#sub4", { opacity: 0, duration: 0.3 }, 13);
+
+      window.__timelines["magnetic-cursor"] = tl;
+
+      // Paint event for texture upload
+      canvas.onpaint = function () {
+        if (!captured) {
+          gl.bindTexture(gl.TEXTURE_2D, tex);
+          gl.texElementImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, content);
+          captured = true;
+        }
+      };
+
+      setTimeout(function () {
+        if (isSupported()) {
+          canvas.requestPaint();
+        }
+        tl.seek(0);
+      }, 0);
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/vfx-portal/vfx-portal.html b/docs/public/catalog/blocks/vfx-portal/vfx-portal.html
new file mode 100644
index 0000000000..aec7eb4b2c
--- /dev/null
+++ b/docs/public/catalog/blocks/vfx-portal/vfx-portal.html
@@ -0,0 +1,863 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>HTML Portal Transition</title>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #000;
+        overflow: hidden;
+        font-family: "Inter", system-ui, sans-serif;
+      }
+
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000;
+      }
+
+      .panel {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+
+      /* ── Shared Site Layout ──────────────────────────────── */
+      .site-wrap {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        height: 100%;
+      }
+
+      .topbar {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 28px 64px;
+      }
+      .logo {
+        font-size: 24px;
+        font-weight: 800;
+        letter-spacing: -0.5px;
+      }
+      .nav {
+        display: flex;
+        gap: 36px;
+      }
+      .nav span {
+        font-size: 15px;
+        font-weight: 500;
+      }
+      .nav-cta {
+        font-size: 14px;
+        font-weight: 600;
+        padding: 10px 24px;
+        border-radius: 8px;
+        border: none;
+        cursor: pointer;
+      }
+
+      .hero {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        gap: 24px;
+        padding: 0 200px;
+      }
+      .hero-title {
+        font-size: 72px;
+        font-weight: 800;
+        letter-spacing: -2px;
+        line-height: 1.05;
+      }
+      .hero-sub {
+        font-size: 20px;
+        line-height: 1.6;
+        max-width: 640px;
+      }
+      .hero-btn {
+        display: inline-block;
+        padding: 16px 40px;
+        border-radius: 12px;
+        font-size: 17px;
+        font-weight: 700;
+        border: none;
+        cursor: pointer;
+        letter-spacing: -0.2px;
+      }
+
+      .cards-row {
+        display: flex;
+        gap: 24px;
+        padding: 0 64px 56px;
+      }
+      .feature-card {
+        flex: 1;
+        padding: 32px;
+        border-radius: 16px;
+      }
+      .card-icon {
+        width: 44px;
+        height: 44px;
+        border-radius: 10px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 22px;
+        margin-bottom: 16px;
+      }
+      .card-title {
+        font-size: 18px;
+        font-weight: 700;
+        margin-bottom: 6px;
+      }
+      .card-desc {
+        font-size: 14px;
+        line-height: 1.5;
+      }
+
+      /* ── Light Mode ──────────────────────────────────────── */
+      .light .site-wrap {
+        background: #fafafa;
+        color: #111;
+      }
+      .light .logo {
+        color: #111;
+      }
+      .light .nav span {
+        color: #555;
+      }
+      .light .nav-cta {
+        background: #7c3aed;
+        color: #fff;
+      }
+      .light .hero-title {
+        color: #111;
+      }
+      .light .hero-sub {
+        color: #666;
+      }
+      .light .hero-btn {
+        background: #7c3aed;
+        color: #fff;
+      }
+      .light .feature-card {
+        background: #fff;
+        border: 1px solid #e5e7eb;
+      }
+      .light .card-icon {
+        background: #f3f0ff;
+        color: #7c3aed;
+      }
+      .light .card-title {
+        color: #111;
+      }
+      .light .card-desc {
+        color: #777;
+      }
+
+      /* ── Dark Mode ───────────────────────────────────────── */
+      .dark .site-wrap {
+        background: #0a0a0f;
+        color: #f0f0f5;
+      }
+      .dark .logo {
+        background: linear-gradient(135deg, #a78bfa, #c084fc);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+      }
+      .dark .nav span {
+        color: rgba(255, 255, 255, 0.5);
+      }
+      .dark .nav-cta {
+        background: linear-gradient(135deg, #7c3aed, #a855f7);
+        color: #fff;
+        box-shadow: 0 0 24px rgba(124, 58, 237, 0.3);
+      }
+      .dark .hero-title {
+        color: #f0f0f5;
+      }
+      .dark .hero-sub {
+        color: rgba(255, 255, 255, 0.5);
+      }
+      .dark .hero-btn {
+        background: linear-gradient(135deg, #7c3aed, #a855f7);
+        color: #fff;
+        box-shadow: 0 0 32px rgba(124, 58, 237, 0.35);
+      }
+      .dark .feature-card {
+        background: rgba(255, 255, 255, 0.03);
+        border: 1px solid rgba(255, 255, 255, 0.08);
+        box-shadow: 0 0 20px rgba(124, 58, 237, 0.06);
+      }
+      .dark .card-icon {
+        background: rgba(124, 58, 237, 0.15);
+        color: #a78bfa;
+      }
+      .dark .card-title {
+        color: #f0f0f5;
+      }
+      .dark .card-desc {
+        color: rgba(255, 255, 255, 0.45);
+      }
+
+      #error-overlay {
+        position: absolute;
+        inset: 0;
+        background: #000;
+        display: none;
+        align-items: center;
+        justify-content: center;
+        z-index: 100;
+        flex-direction: column;
+        gap: 16px;
+        color: #fff;
+      }
+      #error-overlay.visible {
+        display: flex;
+      }
+      #error-overlay h2 {
+        font-size: 24px;
+        font-weight: 600;
+      }
+      #error-overlay p {
+        font-size: 14px;
+        color: rgba(255, 255, 255, 0.5);
+        max-width: 480px;
+        text-align: center;
+        line-height: 1.6;
+      }
+      #error-overlay code {
+        background: rgba(255, 255, 255, 0.1);
+        padding: 2px 8px;
+        border-radius: 4px;
+        font-size: 13px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="portal-transition"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="10"
+      data-root="true"
+    >
+      <!-- Light mode panel (front) -->
+      <canvas
+        id="cap-light"
+        layoutsubtree
+        width="1920"
+        height="1080"
+        style="
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1920px;
+          height: 1080px;
+          z-index: -1;
+          pointer-events: none;
+        "
+      >
+        <section
+          class="panel light"
+          id="panel-light"
+          data-panel-start="0"
+          data-panel-duration="10"
+          style="width: 1920px; height: 1080px"
+        >
+          <div class="site-wrap">
+            <div class="topbar">
+              <div class="logo">HyperFrames</div>
+              <div class="nav">
+                <span>Docs</span>
+                <span>Catalog</span>
+                <span>GitHub</span>
+                <button class="nav-cta">Sign In</button>
+              </div>
+            </div>
+            <div class="hero">
+              <h1 class="hero-title">Write HTML<br />Render Video</h1>
+              <p class="hero-sub">
+                Ship faster with a platform that handles the hard parts. Analytics, infrastructure,
+                and developer tools — all in one place.
+              </p>
+              <button class="hero-btn">Start Creating</button>
+            </div>
+            <div class="cards-row">
+              <div class="feature-card">
+                <div class="card-icon">&#9889;</div>
+                <div class="card-title">Lightning Fast</div>
+                <div class="card-desc">
+                  Sub-millisecond response times with edge deployment across 40+ regions worldwide.
+                </div>
+              </div>
+              <div class="feature-card">
+                <div class="card-icon">&#128274;</div>
+                <div class="card-title">Secure by Default</div>
+                <div class="card-desc">
+                  SOC2 certified. End-to-end encryption. Role-based access out of the box.
+                </div>
+              </div>
+              <div class="feature-card">
+                <div class="card-icon">&#128268;</div>
+                <div class="card-title">Plug and Play</div>
+                <div class="card-desc">
+                  200+ integrations. Connect your existing stack in minutes, not weeks.
+                </div>
+              </div>
+              <div class="feature-card">
+                <div class="card-icon">&#128200;</div>
+                <div class="card-title">Real-time Insights</div>
+                <div class="card-desc">
+                  Live dashboards, anomaly detection, and AI-powered recommendations.
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+      </canvas>
+
+      <!-- Dark mode panel (back) -->
+      <canvas
+        id="cap-dark"
+        layoutsubtree
+        width="1920"
+        height="1080"
+        style="
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1920px;
+          height: 1080px;
+          z-index: -1;
+          pointer-events: none;
+        "
+      >
+        <section
+          class="panel dark"
+          id="panel-dark"
+          data-panel-start="0"
+          data-panel-duration="10"
+          style="width: 1920px; height: 1080px"
+        >
+          <div class="site-wrap">
+            <div class="topbar">
+              <div class="logo">HyperFrames</div>
+              <div class="nav">
+                <span>Docs</span>
+                <span>Catalog</span>
+                <span>GitHub</span>
+                <button class="nav-cta">Sign In</button>
+              </div>
+            </div>
+            <div class="hero">
+              <h1 class="hero-title">Write HTML<br />Render Video</h1>
+              <p class="hero-sub">
+                Ship faster with a platform that handles the hard parts. Analytics, infrastructure,
+                and developer tools — all in one place.
+              </p>
+              <button class="hero-btn">Start Creating</button>
+            </div>
+            <div class="cards-row">
+              <div class="feature-card">
+                <div class="card-icon">&#9889;</div>
+                <div class="card-title">Lightning Fast</div>
+                <div class="card-desc">
+                  Sub-millisecond response times with edge deployment across 40+ regions worldwide.
+                </div>
+              </div>
+              <div class="feature-card">
+                <div class="card-icon">&#128274;</div>
+                <div class="card-title">Secure by Default</div>
+                <div class="card-desc">
+                  SOC2 certified. End-to-end encryption. Role-based access out of the box.
+                </div>
+              </div>
+              <div class="feature-card">
+                <div class="card-icon">&#128268;</div>
+                <div class="card-title">Plug and Play</div>
+                <div class="card-desc">
+                  200+ integrations. Connect your existing stack in minutes, not weeks.
+                </div>
+              </div>
+              <div class="feature-card">
+                <div class="card-icon">&#128200;</div>
+                <div class="card-title">Real-time Insights</div>
+                <div class="card-desc">
+                  Live dashboards, anomaly detection, and AI-powered recommendations.
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+      </canvas>
+
+      <!-- Three.js render target -->
+      <canvas
+        id="theater"
+        width="1920"
+        height="1080"
+        style="position: absolute; top: 0; left: 0; width: 1920px; height: 1080px"
+      ></canvas>
+
+      <div id="error-overlay">
+        <h2>HTML-in-Canvas Required</h2>
+        <p>
+          This composition requires the experimental CanvasDrawElement API. Enable it in Chrome or
+          Brave:
+        </p>
+        <p><code>chrome://flags/#canvas-draw-element</code></p>
+      </div>
+
+      <!-- Driver clip for HyperFrames timeline sync -->
+      <div
+        id="driver"
+        class="clip"
+        data-start="0"
+        data-duration="10"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+
+    <script>
+      var theaterCanvas = document.getElementById("theater");
+      var W = 1920,
+        H = 1080;
+
+      // ── Feature Detection ──────────────────────────────────────────────
+      function isSupported() {
+        if (!("layoutSubtree" in document.createElement("canvas"))) return false;
+        var tc = document.createElement("canvas");
+        tc.setAttribute("layoutsubtree", "");
+        var ctx = tc.getContext("2d");
+        return ctx && typeof ctx.drawElementImage === "function";
+      }
+
+      if (!isSupported()) {
+        document.getElementById("error-overlay").classList.add("visible");
+      }
+
+      // ── Seeded PRNG (mulberry32) ───────────────────────────────────────
+      function mulberry32(seed) {
+        return function () {
+          seed |= 0;
+          seed = (seed + 0x6d2b79f5) | 0;
+          var t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
+          t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+          return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+        };
+      }
+      var rng = mulberry32(42);
+
+      // ── Canvas Capture ─────────────────────────────────────────────────
+      var capLight = document.getElementById("cap-light");
+      var capDark = document.getElementById("cap-dark");
+      var ctxLight = capLight.getContext("2d");
+      var ctxDark = capDark.getContext("2d");
+      var panelLight = document.getElementById("panel-light");
+      var panelDark = document.getElementById("panel-dark");
+
+      function capturePanels() {
+        ctxLight.clearRect(0, 0, W, H);
+        ctxLight.drawElementImage(panelLight, 0, 0, W, H);
+        ctxDark.clearRect(0, 0, W, H);
+        ctxDark.drawElementImage(panelDark, 0, 0, W, H);
+        lightTexture.needsUpdate = true;
+        darkTexture.needsUpdate = true;
+      }
+
+      // ── Three.js Scene ─────────────────────────────────────────────────
+      var renderer = new THREE.WebGLRenderer({
+        canvas: theaterCanvas,
+        antialias: false,
+        alpha: false,
+        powerPreference: "high-performance",
+        preserveDrawingBuffer: true,
+      });
+      renderer.setSize(W, H, false);
+      renderer.setPixelRatio(1);
+      renderer.setClearColor(0x000000, 1);
+
+      var scene = new THREE.Scene();
+      var camera = new THREE.PerspectiveCamera(50, W / H, 0.1, 100);
+      camera.position.set(0, 0, 2.8);
+      camera.lookAt(0, 0, 0);
+
+      // Calculate quad dimensions to fill the camera frustum at z=0
+      var vFov = (camera.fov * Math.PI) / 180;
+      var quadH = 2 * Math.tan(vFov / 2) * camera.position.z;
+      var quadW = quadH * (W / H);
+
+      // ── Textures from Captured Canvases ────────────────────────────────
+      var lightTexture = new THREE.CanvasTexture(capLight);
+      lightTexture.minFilter = THREE.LinearFilter;
+      lightTexture.magFilter = THREE.LinearFilter;
+      lightTexture.generateMipmaps = false;
+
+      var darkTexture = new THREE.CanvasTexture(capDark);
+      darkTexture.minFilter = THREE.LinearFilter;
+      darkTexture.magFilter = THREE.LinearFilter;
+      darkTexture.generateMipmaps = false;
+
+      // ── Back Quad: Dark Mode (sits behind) ─────────────────────────────
+      var darkGeo = new THREE.PlaneGeometry(quadW, quadH);
+      var darkMat = new THREE.MeshBasicMaterial({ map: darkTexture, side: THREE.FrontSide });
+      var darkQuad = new THREE.Mesh(darkGeo, darkMat);
+      darkQuad.position.z = -0.01;
+      scene.add(darkQuad);
+
+      // ── Front Quad: Light Mode with Portal Shader ──────────────────────
+      var portalUniforms = {
+        tLight: { value: lightTexture },
+        portalRadius: { value: 0.0 },
+        portalCenter: { value: new THREE.Vector2(0.5, 0.5) },
+        edgeWidth: { value: 0.06 },
+        glowColor: { value: new THREE.Vector3(0.486, 0.227, 0.929) },
+        glowColor2: { value: new THREE.Vector3(0.29, 0.565, 1.0) },
+        chromaticStrength: { value: 0.025 },
+        distortionStrength: { value: 0.04 },
+        time: { value: 0.0 },
+        energyIntensity: { value: 1.0 },
+      };
+
+      var portalVertShader = [
+        "varying vec2 vUv;",
+        "void main() {",
+        "  vUv = uv;",
+        "  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);",
+        "}",
+      ].join("\n");
+
+      var portalFragShader = [
+        "uniform sampler2D tLight;",
+        "uniform float portalRadius;",
+        "uniform vec2 portalCenter;",
+        "uniform float edgeWidth;",
+        "uniform vec3 glowColor;",
+        "uniform vec3 glowColor2;",
+        "uniform float chromaticStrength;",
+        "uniform float distortionStrength;",
+        "uniform float time;",
+        "uniform float energyIntensity;",
+        "varying vec2 vUv;",
+        "",
+        "float hash(vec2 p) {",
+        "  return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453);",
+        "}",
+        "",
+        "float noise(vec2 p) {",
+        "  vec2 i = floor(p);",
+        "  vec2 f = fract(p);",
+        "  f = f * f * (3.0 - 2.0 * f);",
+        "  float a = hash(i);",
+        "  float b = hash(i + vec2(1.0, 0.0));",
+        "  float c = hash(i + vec2(0.0, 1.0));",
+        "  float d = hash(i + vec2(1.0, 1.0));",
+        "  return mix(mix(a, b, f.x), mix(c, d, f.x), f.y);",
+        "}",
+        "",
+        "void main() {",
+        "  vec2 uv = vUv;",
+        "  vec2 aspect = vec2(" + (W / H).toFixed(4) + ", 1.0);",
+        "  vec2 centered = (uv - portalCenter) * aspect;",
+        "  float dist = length(centered);",
+        "",
+        "  // Noise-modulated edge for organic tear look",
+        "  float angle = atan(centered.y, centered.x);",
+        "  float edgeNoise = noise(vec2(angle * 3.0, time * 2.0)) * 0.03 * energyIntensity;",
+        "  float portalEdge = portalRadius + edgeNoise;",
+        "",
+        "  // Distortion near portal edge: warp UVs radially",
+        "  float edgeDist = abs(dist - portalEdge);",
+        "  float distortMask = smoothstep(edgeWidth * 1.5, 0.0, edgeDist) * distortionStrength;",
+        "  vec2 distortDir = normalize(centered + 0.0001);",
+        "  vec2 distortedUv = uv + distortDir * distortMask * sin(angle * 8.0 + time * 5.0);",
+        "",
+        "  // Chromatic aberration near portal edge",
+        "  float chromaMask = smoothstep(edgeWidth * 2.0, 0.0, edgeDist) * chromaticStrength;",
+        "  vec2 chromaOffset = distortDir * chromaMask;",
+        "  float r = texture2D(tLight, distortedUv + chromaOffset).r;",
+        "  float g = texture2D(tLight, distortedUv).g;",
+        "  float b = texture2D(tLight, distortedUv - chromaOffset).b;",
+        "  vec3 lightColor = vec3(r, g, b);",
+        "",
+        "  // Portal mask: inside = transparent (show dark behind), outside = light",
+        "  float mask = smoothstep(portalEdge - 0.008, portalEdge + 0.008, dist);",
+        "",
+        "  // Glow ring at portal edge",
+        "  float glowInner = smoothstep(edgeWidth, 0.0, edgeDist);",
+        "  float glowOuter = smoothstep(edgeWidth * 2.5, edgeWidth * 0.5, edgeDist);",
+        "  float glow = glowInner * glowOuter * energyIntensity;",
+        "",
+        "  // Animated color cycling along the ring",
+        "  float colorPhase = fract(angle / 6.2832 + time * 0.4);",
+        "  vec3 ringColor = mix(glowColor, glowColor2, sin(colorPhase * 6.2832) * 0.5 + 0.5);",
+        "",
+        "  // Secondary energy sparks",
+        "  float sparks = noise(vec2(angle * 12.0, time * 8.0));",
+        "  sparks = pow(sparks, 4.0) * glowInner * energyIntensity * 2.0;",
+        "",
+        "  vec3 finalColor = lightColor * mask;",
+        "  finalColor += ringColor * glow * 2.5;",
+        "  finalColor += vec3(1.0, 0.9, 1.0) * sparks;",
+        "",
+        "  // When portal is large enough, alpha fades out completely",
+        "  float alpha = mask + glow * 0.5 + sparks * 0.3;",
+        "  alpha = clamp(alpha, 0.0, 1.0);",
+        "",
+        "  gl_FragColor = vec4(finalColor, alpha);",
+        "}",
+      ].join("\n");
+
+      var frontGeo = new THREE.PlaneGeometry(quadW, quadH);
+      var frontMat = new THREE.ShaderMaterial({
+        uniforms: portalUniforms,
+        vertexShader: portalVertShader,
+        fragmentShader: portalFragShader,
+        transparent: true,
+        side: THREE.FrontSide,
+        depthWrite: false,
+      });
+      var frontQuad = new THREE.Mesh(frontGeo, frontMat);
+      frontQuad.position.z = 0.0;
+      scene.add(frontQuad);
+
+      // ── Animation State ────────────────────────────────────────────────
+      var animState = {
+        portalRadius: 0.0,
+        cameraZ: 2.8,
+        energyIntensity: 0.0,
+        chromaticStrength: 0.0,
+        distortionStrength: 0.0,
+        edgeWidth: 0.06,
+        time: 0.0,
+      };
+
+      // ── GSAP Timeline ──────────────────────────────────────────────────
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+
+      // Phase 1: Hold on light mode (0 - 1.5s)
+      // Subtle energy buildup at center before portal opens
+      tl.to(
+        animState,
+        {
+          energyIntensity: 0.3,
+          duration: 1.2,
+          ease: "power2.in",
+        },
+        0.3,
+      );
+
+      // Phase 2: Portal tears open (1.5 - 5.0s)
+      tl.to(
+        animState,
+        {
+          portalRadius: 0.85,
+          duration: 3.5,
+          ease: "power2.inOut",
+        },
+        1.5,
+      );
+
+      tl.to(
+        animState,
+        {
+          energyIntensity: 1.0,
+          duration: 0.6,
+          ease: "power3.out",
+        },
+        1.5,
+      );
+
+      tl.to(
+        animState,
+        {
+          chromaticStrength: 0.035,
+          duration: 2.0,
+          ease: "power2.in",
+        },
+        1.5,
+      );
+
+      tl.to(
+        animState,
+        {
+          distortionStrength: 0.06,
+          duration: 2.5,
+          ease: "power2.inOut",
+        },
+        1.5,
+      );
+
+      tl.to(
+        animState,
+        {
+          edgeWidth: 0.08,
+          duration: 2.0,
+          ease: "sine.inOut",
+        },
+        2.0,
+      );
+
+      // Phase 3: Camera pushes through portal (3.5 - 6.5s)
+      tl.to(
+        animState,
+        {
+          cameraZ: 1.4,
+          duration: 3.0,
+          ease: "power2.inOut",
+        },
+        3.5,
+      );
+
+      // Phase 4: Portal overshoots to cover full screen (5.0 - 7.0s)
+      tl.to(
+        animState,
+        {
+          portalRadius: 1.8,
+          duration: 2.0,
+          ease: "power3.in",
+        },
+        5.0,
+      );
+
+      // Energy peaks then fades as we emerge
+      tl.to(
+        animState,
+        {
+          energyIntensity: 1.5,
+          duration: 0.8,
+          ease: "power2.in",
+        },
+        5.0,
+      );
+
+      tl.to(
+        animState,
+        {
+          energyIntensity: 0.0,
+          duration: 1.2,
+          ease: "power2.out",
+        },
+        6.2,
+      );
+
+      // Chromatic aberration peaks during push-through
+      tl.to(
+        animState,
+        {
+          chromaticStrength: 0.06,
+          duration: 1.0,
+          ease: "power3.in",
+        },
+        5.5,
+      );
+
+      tl.to(
+        animState,
+        {
+          chromaticStrength: 0.0,
+          duration: 1.0,
+          ease: "power2.out",
+        },
+        6.8,
+      );
+
+      // Distortion fades
+      tl.to(
+        animState,
+        {
+          distortionStrength: 0.0,
+          duration: 1.0,
+          ease: "power2.out",
+        },
+        6.5,
+      );
+
+      // Phase 5: Settle in dark mode (7.0 - 10s)
+      // Camera eases to final position
+      tl.to(
+        animState,
+        {
+          cameraZ: 2.8,
+          duration: 2.5,
+          ease: "power2.out",
+        },
+        7.0,
+      );
+
+      // ── Render Loop via Timeline ───────────────────────────────────────
+      tl.to(
+        { v: 0 },
+        {
+          v: 1,
+          duration: 10,
+          ease: "none",
+          onUpdate: function () {
+            var t = tl.time();
+            animState.time = t;
+
+            // Update portal shader uniforms
+            portalUniforms.portalRadius.value = animState.portalRadius;
+            portalUniforms.edgeWidth.value = animState.edgeWidth;
+            portalUniforms.chromaticStrength.value = animState.chromaticStrength;
+            portalUniforms.distortionStrength.value = animState.distortionStrength;
+            portalUniforms.time.value = t;
+            portalUniforms.energyIntensity.value = animState.energyIntensity;
+
+            // Update camera Z for push-through effect
+            camera.position.z = animState.cameraZ;
+
+            // Recalculate quad scale to always fill the view at current camera Z
+            var currentVFov = (camera.fov * Math.PI) / 180;
+            var currentH = 2 * Math.tan(currentVFov / 2) * camera.position.z;
+            var currentW = currentH * (W / H);
+            frontQuad.scale.set(currentW / quadW, currentH / quadH, 1);
+            darkQuad.scale.set(currentW / quadW, currentH / quadH, 1);
+
+            renderer.render(scene, camera);
+          },
+        },
+        0,
+      );
+
+      window.__timelines["portal-transition"] = tl;
+
+      // ── Deferred Init ──────────────────────────────────────────────────
+      setTimeout(function () {
+        if (isSupported()) {
+          capturePanels();
+        }
+        tl.seek(0);
+      }, 0);
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/vfx-shatter/vfx-shatter.html b/docs/public/catalog/blocks/vfx-shatter/vfx-shatter.html
new file mode 100644
index 0000000000..ab5a7dd211
--- /dev/null
+++ b/docs/public/catalog/blocks/vfx-shatter/vfx-shatter.html
@@ -0,0 +1,1156 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>HTML Glass Shatter</title>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #000;
+        overflow: hidden;
+        font-family: "Inter", system-ui, sans-serif;
+      }
+
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #06080d;
+      }
+
+      #scene-canvas {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+      }
+
+      .panel {
+        position: absolute;
+        top: 0;
+        left: 0;
+        overflow: hidden;
+        color: #fff;
+      }
+
+      /* ── Panel A: Write HTML, Render Video ─────────────────────────── */
+      .panel-a-inner {
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(160deg, #0a0c14 0%, #0d1117 40%, #111820 100%);
+        display: flex;
+        flex-direction: column;
+        padding: 80px 120px;
+        gap: 0;
+        position: relative;
+        overflow: hidden;
+      }
+      .panel-a-inner::before {
+        content: "";
+        position: absolute;
+        top: -200px;
+        right: -200px;
+        width: 600px;
+        height: 600px;
+        background: radial-gradient(circle, rgba(56, 189, 248, 0.06) 0%, transparent 70%);
+        pointer-events: none;
+      }
+      .panel-a-inner::after {
+        content: "";
+        position: absolute;
+        bottom: -150px;
+        left: -150px;
+        width: 500px;
+        height: 500px;
+        background: radial-gradient(circle, rgba(139, 92, 246, 0.05) 0%, transparent 70%);
+        pointer-events: none;
+      }
+
+      .pa-badge {
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+        padding: 8px 20px;
+        background: rgba(56, 189, 248, 0.08);
+        border: 1px solid rgba(56, 189, 248, 0.15);
+        border-radius: 100px;
+        font-size: 14px;
+        font-weight: 600;
+        color: #38bdf8;
+        letter-spacing: 1.5px;
+        text-transform: uppercase;
+        width: fit-content;
+        margin-bottom: 40px;
+      }
+      .pa-badge-dot {
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background: #38bdf8;
+      }
+
+      .pa-headline {
+        font-size: 88px;
+        font-weight: 800;
+        letter-spacing: -3px;
+        line-height: 1;
+        color: #f0f4f8;
+        margin-bottom: 48px;
+        max-width: 1100px;
+      }
+      .pa-headline em {
+        font-style: normal;
+        color: #38bdf8;
+      }
+
+      .pa-chart {
+        display: flex;
+        align-items: flex-end;
+        gap: 40px;
+        margin-bottom: 56px;
+      }
+      .pa-chart-group {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 12px;
+      }
+      .pa-chart-bars {
+        display: flex;
+        align-items: flex-end;
+        gap: 8px;
+        height: 160px;
+      }
+      .pa-bar {
+        width: 64px;
+        border-radius: 6px 6px 0 0;
+      }
+      .pa-bar-v1 {
+        height: 60px;
+        background: rgba(255, 255, 255, 0.08);
+        border: 1px solid rgba(255, 255, 255, 0.06);
+      }
+      .pa-bar-v2 {
+        height: 150px;
+        background: linear-gradient(to top, #38bdf8, #818cf8);
+      }
+      .pa-chart-label {
+        font-size: 14px;
+        color: rgba(255, 255, 255, 0.4);
+        font-weight: 500;
+      }
+      .pa-chart-sublabel {
+        font-size: 13px;
+        font-weight: 600;
+      }
+      .pa-chart-sublabel.dim {
+        color: rgba(255, 255, 255, 0.25);
+      }
+      .pa-chart-sublabel.lit {
+        color: #38bdf8;
+      }
+
+      .pa-features {
+        display: flex;
+        gap: 32px;
+        margin-bottom: 56px;
+      }
+      .pa-feature {
+        display: flex;
+        align-items: flex-start;
+        gap: 14px;
+        flex: 1;
+      }
+      .pa-feature-icon {
+        width: 44px;
+        height: 44px;
+        border-radius: 10px;
+        background: rgba(56, 189, 248, 0.08);
+        border: 1px solid rgba(56, 189, 248, 0.12);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 20px;
+        flex-shrink: 0;
+        color: #38bdf8;
+      }
+      .pa-feature-text h3 {
+        font-size: 16px;
+        font-weight: 600;
+        color: #e2e8f0;
+        margin-bottom: 4px;
+      }
+      .pa-feature-text p {
+        font-size: 13px;
+        color: rgba(255, 255, 255, 0.35);
+        line-height: 1.5;
+      }
+
+      .pa-cta {
+        display: inline-flex;
+        align-items: center;
+        gap: 10px;
+        padding: 16px 40px;
+        background: linear-gradient(135deg, #38bdf8, #818cf8);
+        border-radius: 12px;
+        font-size: 18px;
+        font-weight: 700;
+        color: #fff;
+        border: none;
+        width: fit-content;
+        letter-spacing: -0.3px;
+      }
+
+      /* ── Panel B: Welcome to v2.0 ──────────────────────────── */
+      .panel-b-inner {
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(160deg, #0a0f1a 0%, #0c1220 50%, #0f1628 100%);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 80px 120px;
+        gap: 48px;
+        position: relative;
+        overflow: hidden;
+      }
+
+      .pb-confetti {
+        position: absolute;
+        inset: 0;
+        overflow: hidden;
+        pointer-events: none;
+      }
+      .pb-dot {
+        position: absolute;
+        border-radius: 50%;
+        opacity: 0.12;
+      }
+
+      .pb-badge {
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+        padding: 10px 24px;
+        background: rgba(52, 211, 153, 0.08);
+        border: 1px solid rgba(52, 211, 153, 0.2);
+        border-radius: 100px;
+        font-size: 15px;
+        font-weight: 600;
+        color: #34d399;
+        letter-spacing: 1px;
+      }
+
+      .pb-headline {
+        font-size: 80px;
+        font-weight: 800;
+        letter-spacing: -3px;
+        color: #f0f4f8;
+        text-align: center;
+      }
+
+      .pb-metrics {
+        display: flex;
+        gap: 48px;
+      }
+      .pb-metric {
+        text-align: center;
+        padding: 32px 48px;
+        background: rgba(255, 255, 255, 0.03);
+        border: 1px solid rgba(255, 255, 255, 0.06);
+        border-radius: 16px;
+        min-width: 220px;
+      }
+      .pb-metric-value {
+        font-size: 52px;
+        font-weight: 800;
+        letter-spacing: -2px;
+        margin-bottom: 8px;
+      }
+      .pb-metric-value.green {
+        color: #34d399;
+      }
+      .pb-metric-value.blue {
+        color: #38bdf8;
+      }
+      .pb-metric-value.purple {
+        color: #a78bfa;
+      }
+      .pb-metric-label {
+        font-size: 15px;
+        color: rgba(255, 255, 255, 0.4);
+        font-weight: 500;
+      }
+
+      .pb-cta {
+        display: inline-flex;
+        align-items: center;
+        gap: 10px;
+        padding: 16px 40px;
+        background: linear-gradient(135deg, #34d399, #38bdf8);
+        border-radius: 12px;
+        font-size: 18px;
+        font-weight: 700;
+        color: #fff;
+        border: none;
+        letter-spacing: -0.3px;
+      }
+
+      /* ── Error Overlay ─────────────────────────────────────── */
+      #error-overlay {
+        position: absolute;
+        inset: 0;
+        background: #06080d;
+        display: none;
+        align-items: center;
+        justify-content: center;
+        z-index: 100;
+        flex-direction: column;
+        gap: 16px;
+      }
+      #error-overlay.visible {
+        display: flex;
+      }
+      #error-overlay h2 {
+        font-size: 24px;
+        color: #f0f4f8;
+        font-weight: 600;
+      }
+      #error-overlay p {
+        font-size: 14px;
+        color: rgba(255, 255, 255, 0.5);
+        max-width: 480px;
+        text-align: center;
+        line-height: 1.6;
+      }
+      #error-overlay code {
+        background: rgba(255, 255, 255, 0.1);
+        padding: 2px 8px;
+        border-radius: 4px;
+        font-size: 13px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="glass-shatter"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="12"
+      data-root="true"
+    >
+      <!-- Capture canvas: Panel A -->
+      <canvas
+        id="cap-a"
+        layoutsubtree
+        width="1920"
+        height="1080"
+        style="
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1920px;
+          height: 1080px;
+          z-index: -1;
+          pointer-events: none;
+        "
+      >
+        <section class="panel" id="panel-a" data-panel-a style="width: 1920px; height: 1080px">
+          <div class="panel-a-inner">
+            <div class="pa-badge">
+              <span class="pa-badge-dot"></span>
+              Write HTML, Render Video
+            </div>
+
+            <h1 class="pa-headline">Everything you loved.<br /><em>Now 10x faster.</em></h1>
+
+            <div class="pa-chart">
+              <div class="pa-chart-group">
+                <div class="pa-chart-bars">
+                  <div class="pa-bar pa-bar-v1"></div>
+                  <div class="pa-bar pa-bar-v2"></div>
+                </div>
+                <div class="pa-chart-label">Render Speed</div>
+                <div style="display: flex; gap: 16px">
+                  <span class="pa-chart-sublabel dim">v1</span>
+                  <span class="pa-chart-sublabel lit">v2</span>
+                </div>
+              </div>
+              <div class="pa-chart-group">
+                <div class="pa-chart-bars">
+                  <div class="pa-bar pa-bar-v1" style="height: 90px"></div>
+                  <div class="pa-bar pa-bar-v2" style="height: 145px"></div>
+                </div>
+                <div class="pa-chart-label">Throughput</div>
+                <div style="display: flex; gap: 16px">
+                  <span class="pa-chart-sublabel dim">v1</span>
+                  <span class="pa-chart-sublabel lit">v2</span>
+                </div>
+              </div>
+              <div class="pa-chart-group">
+                <div class="pa-chart-bars">
+                  <div class="pa-bar pa-bar-v1" style="height: 110px"></div>
+                  <div class="pa-bar pa-bar-v2" style="height: 155px"></div>
+                </div>
+                <div class="pa-chart-label">Reliability</div>
+                <div style="display: flex; gap: 16px">
+                  <span class="pa-chart-sublabel dim">v1</span>
+                  <span class="pa-chart-sublabel lit">v2</span>
+                </div>
+              </div>
+            </div>
+
+            <div class="pa-features">
+              <div class="pa-feature">
+                <div class="pa-feature-icon">&#9889;</div>
+                <div class="pa-feature-text">
+                  <h3>Instant Deploys</h3>
+                  <p>Zero-downtime rollouts in under 3 seconds globally.</p>
+                </div>
+              </div>
+              <div class="pa-feature">
+                <div class="pa-feature-icon">&#128274;</div>
+                <div class="pa-feature-text">
+                  <h3>End-to-End Encryption</h3>
+                  <p>AES-256 at rest, TLS 1.3 in transit. SOC2 certified.</p>
+                </div>
+              </div>
+              <div class="pa-feature">
+                <div class="pa-feature-icon">&#128200;</div>
+                <div class="pa-feature-text">
+                  <h3>Real-time Analytics</h3>
+                  <p>Sub-second queries across billions of events.</p>
+                </div>
+              </div>
+            </div>
+
+            <button class="pa-cta">Start Creating &rarr;</button>
+          </div>
+        </section>
+      </canvas>
+
+      <!-- Capture canvas: Panel B -->
+      <canvas
+        id="cap-b"
+        layoutsubtree
+        width="1920"
+        height="1080"
+        style="
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1920px;
+          height: 1080px;
+          z-index: -1;
+          pointer-events: none;
+        "
+      >
+        <section class="panel" id="panel-b" data-panel-b style="width: 1920px; height: 1080px">
+          <div class="panel-b-inner">
+            <div class="pb-confetti" id="confetti-container"></div>
+
+            <div class="pb-badge">&#10003; Powered by HyperFrames</div>
+
+            <h1 class="pb-headline">HTML is Video</h1>
+
+            <div class="pb-metrics">
+              <div class="pb-metric">
+                <div class="pb-metric-value green">10x</div>
+                <div class="pb-metric-label">Render Speed</div>
+              </div>
+              <div class="pb-metric">
+                <div class="pb-metric-value blue">50%</div>
+                <div class="pb-metric-label">File Size</div>
+              </div>
+              <div class="pb-metric">
+                <div class="pb-metric-value purple">99.99%</div>
+                <div class="pb-metric-label">Reliability</div>
+              </div>
+            </div>
+
+            <button class="pb-cta">View Catalog &rarr;</button>
+          </div>
+        </section>
+      </canvas>
+
+      <!-- Three.js render target -->
+      <canvas id="scene-canvas" width="1920" height="1080"></canvas>
+
+      <!-- Error overlay -->
+      <div id="error-overlay">
+        <h2>HTML-in-Canvas Required</h2>
+        <p>
+          This composition requires the experimental CanvasDrawElement API. Enable it in Chrome or
+          Brave:
+        </p>
+        <p><code>chrome://flags/#canvas-draw-element</code></p>
+      </div>
+
+      <!-- Driver clip -->
+      <div
+        id="driver"
+        class="clip"
+        data-start="0"
+        data-duration="12"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+
+    <script>
+      var W = 1920,
+        H = 1080;
+      var DURATION = 12;
+      var SHARD_COUNT = 200;
+      var CRACK_START = 2.0;
+      var CRACK_END = 4.0;
+      var SHATTER_START = 4.0;
+      var SHATTER_SETTLE = 10.0;
+
+      // ── Feature Detection ──────────────────────────────────────────────
+      function isSupported() {
+        if (!("layoutSubtree" in document.createElement("canvas"))) return false;
+        var tc = document.createElement("canvas");
+        tc.setAttribute("layoutsubtree", "");
+        var ctx = tc.getContext("2d");
+        return ctx && typeof ctx.drawElementImage === "function";
+      }
+
+      if (!isSupported()) {
+        document.getElementById("error-overlay").classList.add("visible");
+      }
+
+      // ── Seeded PRNG (mulberry32, seed 42) ──────────────────────────────
+      function mulberry32(seed) {
+        return function () {
+          seed |= 0;
+          seed = (seed + 0x6d2b79f5) | 0;
+          var t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
+          t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+          return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+        };
+      }
+      var rng = mulberry32(42);
+
+      // ── Generate confetti dots for Panel B ─────────────────────────────
+      var confettiEl = document.getElementById("confetti-container");
+      if (confettiEl) {
+        var dotColors = ["#34d399", "#38bdf8", "#a78bfa", "#f472b6", "#fbbf24"];
+        for (var d = 0; d < 60; d++) {
+          var dot = document.createElement("div");
+          dot.className = "pb-dot";
+          var sz = 4 + rng() * 12;
+          dot.style.width = sz + "px";
+          dot.style.height = sz + "px";
+          dot.style.left = rng() * 100 + "%";
+          dot.style.top = rng() * 100 + "%";
+          dot.style.background = dotColors[Math.floor(rng() * dotColors.length)];
+          dot.style.opacity = (0.06 + rng() * 0.12).toFixed(3);
+          confettiEl.appendChild(dot);
+        }
+      }
+
+      // ── Parse capture canvases ─────────────────────────────────────────
+      var capA = document.getElementById("cap-a");
+      var capB = document.getElementById("cap-b");
+      var ctxA = capA.getContext("2d");
+      var ctxB = capB.getContext("2d");
+      var panelA = document.getElementById("panel-a");
+      var panelB = document.getElementById("panel-b");
+
+      function capturePanels() {
+        ctxA.clearRect(0, 0, W, H);
+        ctxA.drawElementImage(panelA, 0, 0, W, H);
+        ctxB.clearRect(0, 0, W, H);
+        ctxB.drawElementImage(panelB, 0, 0, W, H);
+      }
+
+      // ── Voronoi Shard Generation ───────────────────────────────────────
+      // Generate ~200 seed points, compute Voronoi via brute force,
+      // triangulate each cell, extract per-shard geometry + UVs.
+
+      // Normalized coordinates: x in [0, aspectRatio], y in [0, 1]
+      var aspect = W / H;
+
+      // Generate seed points with weighted density toward center
+      var seeds = [];
+      for (var s = 0; s < SHARD_COUNT; s++) {
+        var sx, sy;
+        // 40% of points biased toward center for denser cracking there
+        if (s < SHARD_COUNT * 0.4) {
+          var angle = rng() * Math.PI * 2;
+          var radius = rng() * 0.35;
+          sx = 0.5 * aspect + Math.cos(angle) * radius * aspect;
+          sy = 0.5 + Math.sin(angle) * radius;
+        } else {
+          sx = rng() * aspect;
+          sy = rng();
+        }
+        seeds.push({ x: sx, y: sy });
+      }
+
+      // For each seed, compute a convex polygon via intersection of half-planes
+      // (simplified: sample angles around seed, find nearest boundary)
+      function computeShardPolygons(seeds) {
+        var shards = [];
+        var ANGLES = 32;
+
+        for (var i = 0; i < seeds.length; i++) {
+          var cx = seeds[i].x;
+          var cy = seeds[i].y;
+          var verts = [];
+
+          for (var a = 0; a < ANGLES; a++) {
+            var theta = (a / ANGLES) * Math.PI * 2;
+            var dx = Math.cos(theta);
+            var dy = Math.sin(theta);
+
+            // Find closest bisector intersection along this ray
+            var minT = 999;
+
+            for (var j = 0; j < seeds.length; j++) {
+              if (j === i) continue;
+              // Midpoint between seeds i and j
+              var mx = (cx + seeds[j].x) * 0.5;
+              var my = (cy + seeds[j].y) * 0.5;
+              // Normal of bisector: direction from i to j
+              var nx = seeds[j].x - cx;
+              var ny = seeds[j].y - cy;
+              // Ray-plane intersection: t = dot(m - c, n) / dot(d, n)
+              var denom = dx * nx + dy * ny;
+              if (denom <= 0.0001) continue;
+              var t = ((mx - cx) * nx + (my - cy) * ny) / denom;
+              if (t > 0.001 && t < minT) minT = t;
+            }
+
+            // Clamp to bounding box
+            if (dx > 0) {
+              var tb = (aspect - cx) / dx;
+              if (tb > 0 && tb < minT) minT = tb;
+            }
+            if (dx < 0) {
+              var tb2 = -cx / dx;
+              if (tb2 > 0 && tb2 < minT) minT = tb2;
+            }
+            if (dy > 0) {
+              var tb3 = (1 - cy) / dy;
+              if (tb3 > 0 && tb3 < minT) minT = tb3;
+            }
+            if (dy < 0) {
+              var tb4 = -cy / dy;
+              if (tb4 > 0 && tb4 < minT) minT = tb4;
+            }
+
+            if (minT < 998) {
+              verts.push({
+                x: cx + dx * minT,
+                y: cy + dy * minT,
+              });
+            }
+          }
+
+          if (verts.length < 3) continue;
+
+          // Sort vertices by angle from centroid
+          var centX = 0,
+            centY = 0;
+          for (var v = 0; v < verts.length; v++) {
+            centX += verts[v].x;
+            centY += verts[v].y;
+          }
+          centX /= verts.length;
+          centY /= verts.length;
+
+          verts.sort(function (a, b) {
+            return Math.atan2(a.y - centY, a.x - centX) - Math.atan2(b.y - centY, b.x - centX);
+          });
+
+          // Fan triangulation from centroid
+          var triangles = [];
+          for (var v2 = 0; v2 < verts.length; v2++) {
+            var next = (v2 + 1) % verts.length;
+            triangles.push([{ x: centX, y: centY }, verts[v2], verts[next]]);
+          }
+
+          shards.push({
+            seedX: cx,
+            seedY: cy,
+            centroidX: centX,
+            centroidY: centY,
+            triangles: triangles,
+            verts: verts,
+          });
+        }
+
+        return shards;
+      }
+
+      var shardData = computeShardPolygons(seeds);
+
+      // ── Three.js Scene ─────────────────────────────────────────────────
+      var sceneCanvas = document.getElementById("scene-canvas");
+      var renderer = new THREE.WebGLRenderer({
+        canvas: sceneCanvas,
+        antialias: true,
+        alpha: false,
+        preserveDrawingBuffer: true,
+        powerPreference: "high-performance",
+      });
+      renderer.setSize(W, H, false);
+      renderer.setPixelRatio(1);
+      renderer.toneMapping = THREE.NoToneMapping;
+      renderer.setClearColor(0x06080d, 1);
+
+      var scene = new THREE.Scene();
+      var camera = new THREE.OrthographicCamera(-aspect * 0.5, aspect * 0.5, 0.5, -0.5, 0.1, 100);
+      camera.position.z = 10;
+
+      // ── Textures from capture canvases ─────────────────────────────────
+      var texA = new THREE.CanvasTexture(capA);
+      texA.minFilter = THREE.LinearFilter;
+      texA.magFilter = THREE.LinearFilter;
+      texA.generateMipmaps = false;
+
+      var texB = new THREE.CanvasTexture(capB);
+      texB.minFilter = THREE.LinearFilter;
+      texB.magFilter = THREE.LinearFilter;
+      texB.generateMipmaps = false;
+
+      // ── Phase 1 & 2: Full plane with panel A + crack shader ────────────
+      var crackShaderMaterial = new THREE.ShaderMaterial({
+        uniforms: {
+          tPanel: { value: texA },
+          uCrackProgress: { value: 0.0 },
+          uAspect: { value: aspect },
+          uTime: { value: 0.0 },
+        },
+        vertexShader: [
+          "varying vec2 vUv;",
+          "void main() {",
+          "  vUv = uv;",
+          "  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);",
+          "}",
+        ].join("\n"),
+        fragmentShader: [
+          "uniform sampler2D tPanel;",
+          "uniform float uCrackProgress;",
+          "uniform float uAspect;",
+          "uniform float uTime;",
+          "varying vec2 vUv;",
+          "",
+          "// Hash functions for Voronoi",
+          "vec2 hash22(vec2 p) {",
+          "  p = vec2(dot(p, vec2(127.1, 311.7)), dot(p, vec2(269.5, 183.3)));",
+          "  return fract(sin(p) * 43758.5453);",
+          "}",
+          "",
+          "// Voronoi distance for crack pattern",
+          "float voronoi(vec2 p) {",
+          "  vec2 ip = floor(p);",
+          "  vec2 fp = fract(p);",
+          "  float d1 = 8.0;",
+          "  float d2 = 8.0;",
+          "  for (int x = -1; x <= 1; x++) {",
+          "    for (int y = -1; y <= 1; y++) {",
+          "      vec2 neighbor = vec2(float(x), float(y));",
+          "      vec2 point = hash22(ip + neighbor);",
+          "      vec2 diff = neighbor + point - fp;",
+          "      float dist = length(diff);",
+          "      if (dist < d1) {",
+          "        d2 = d1;",
+          "        d1 = dist;",
+          "      } else if (dist < d2) {",
+          "        d2 = dist;",
+          "      }",
+          "    }",
+          "  }",
+          "  return d2 - d1;",
+          "}",
+          "",
+          "void main() {",
+          "  vec4 color = texture2D(tPanel, vUv);",
+          "  ",
+          "  if (uCrackProgress <= 0.0) {",
+          "    gl_FragColor = color;",
+          "    return;",
+          "  }",
+          "  ",
+          "  // Distance from center (in UV space, aspect-corrected)",
+          "  vec2 center = vec2(0.5, 0.5);",
+          "  vec2 uv_aspect = vec2((vUv.x - 0.5) * uAspect, vUv.y - 0.5);",
+          "  float distFromCenter = length(uv_aspect);",
+          "  ",
+          "  // Crack wavefront: radiates outward based on progress",
+          "  float maxRadius = length(vec2(uAspect * 0.5, 0.5));",
+          "  float wavefront = uCrackProgress * maxRadius * 1.4;",
+          "  ",
+          "  if (distFromCenter > wavefront) {",
+          "    gl_FragColor = color;",
+          "    return;",
+          "  }",
+          "  ",
+          "  // Multi-scale Voronoi for cracks",
+          "  vec2 crackUV = vUv * vec2(uAspect, 1.0);",
+          "  float v1 = voronoi(crackUV * 8.0);",
+          "  float v2 = voronoi(crackUV * 16.0);",
+          "  float v3 = voronoi(crackUV * 4.0);",
+          "  ",
+          "  // Blend scales based on distance from center",
+          "  float normalizedDist = distFromCenter / maxRadius;",
+          "  float crackPattern = mix(v1, v2, smoothstep(0.0, 0.5, normalizedDist));",
+          "  crackPattern = mix(crackPattern, v3, smoothstep(0.3, 0.8, normalizedDist) * 0.4);",
+          "  ",
+          "  // Crack intensity: thinner = more crack-like",
+          "  float crackWidth = 0.04 + uCrackProgress * 0.02;",
+          "  float crack = smoothstep(crackWidth, 0.0, crackPattern);",
+          "  ",
+          "  // Fade in based on wavefront proximity",
+          "  float waveFade = smoothstep(wavefront, wavefront * 0.6, distFromCenter);",
+          "  crack *= waveFade;",
+          "  ",
+          "  // Impact point glow",
+          "  float impactGlow = exp(-distFromCenter * 6.0) * uCrackProgress * 0.6;",
+          "  ",
+          "  // Refraction distortion along cracks",
+          "  vec2 distortUV = vUv;",
+          "  if (crack > 0.1) {",
+          "    vec2 offset = (hash22(floor(crackUV * 8.0)) - 0.5) * 0.008 * crack;",
+          "    distortUV += offset;",
+          "  }",
+          "  vec4 distortedColor = texture2D(tPanel, distortUV);",
+          "  ",
+          "  // Composite: panel + bright crack lines + refraction",
+          "  vec3 crackColor = vec3(0.85, 0.92, 1.0);",
+          "  vec3 result = mix(distortedColor.rgb, crackColor, crack * 0.7);",
+          "  result += vec3(impactGlow * 0.3, impactGlow * 0.4, impactGlow * 0.6);",
+          "  ",
+          "  // Glass surface highlight along cracks",
+          "  float highlight = crack * 0.15 * (1.0 - normalizedDist);",
+          "  result += vec3(highlight);",
+          "  ",
+          "  gl_FragColor = vec4(result, 1.0);",
+          "}",
+        ].join("\n"),
+        transparent: false,
+      });
+
+      var fullPlane = new THREE.Mesh(new THREE.PlaneGeometry(aspect, 1), crackShaderMaterial);
+      fullPlane.position.set(0, 0, 0);
+      scene.add(fullPlane);
+
+      // ── Panel B: static plane behind shards ────────────────────────────
+      var panelBMesh = new THREE.Mesh(
+        new THREE.PlaneGeometry(aspect, 1),
+        new THREE.MeshBasicMaterial({ map: texB, side: THREE.FrontSide }),
+      );
+      panelBMesh.position.set(0, 0, -0.5);
+      panelBMesh.visible = false;
+      scene.add(panelBMesh);
+
+      // ── Phase 3: Shard meshes ──────────────────────────────────────────
+      // Each shard is a THREE.Mesh with its own geometry from the Voronoi subdivision.
+      // UV mapping samples the correct region of panel A's texture.
+
+      var shardMeshes = [];
+      var shardPhysics = [];
+
+      for (var si = 0; si < shardData.length; si++) {
+        var sd = shardData[si];
+        var tris = sd.triangles;
+
+        // Build merged geometry for all triangles in this shard
+        var positions = [];
+        var uvs = [];
+
+        for (var ti = 0; ti < tris.length; ti++) {
+          var tri = tris[ti];
+          for (var vi = 0; vi < 3; vi++) {
+            // Convert from Voronoi space (x in [0,aspect], y in [0,1]) to mesh space
+            var px = tri[vi].x - aspect * 0.5;
+            var py = -(tri[vi].y - 0.5); // flip Y for Three.js
+            positions.push(px, py, 0);
+
+            // UV: map from Voronoi space to [0,1]
+            var u = tri[vi].x / aspect;
+            var v = 1.0 - tri[vi].y; // flip V
+            uvs.push(u, v);
+          }
+        }
+
+        if (positions.length < 9) continue;
+
+        var geo = new THREE.BufferGeometry();
+        geo.setAttribute("position", new THREE.Float32BufferAttribute(positions, 3));
+        geo.setAttribute("uv", new THREE.Float32BufferAttribute(uvs, 2));
+
+        var mat = new THREE.MeshBasicMaterial({
+          map: texA,
+          side: THREE.DoubleSide,
+          transparent: true,
+          opacity: 1.0,
+        });
+
+        var mesh = new THREE.Mesh(geo, mat);
+        mesh.visible = false;
+        scene.add(mesh);
+        shardMeshes.push(mesh);
+
+        // Physics state for this shard
+        // Direction outward from center + random upward kick
+        var fromCenterX = sd.centroidX - aspect * 0.5;
+        var fromCenterY = sd.centroidY - 0.5;
+        var fromCenterLen =
+          Math.sqrt(fromCenterX * fromCenterX + fromCenterY * fromCenterY) + 0.001;
+        var outDirX = fromCenterX / fromCenterLen;
+        var outDirY = fromCenterY / fromCenterLen;
+
+        // Initial velocity: outward + upward component + randomness
+        var speed = 0.3 + rng() * 0.7;
+        var upKick = 0.2 + rng() * 0.5;
+
+        shardPhysics.push({
+          // Centroid in mesh-space for pivot
+          cx: sd.centroidX - aspect * 0.5,
+          cy: -(sd.centroidY - 0.5),
+          // Velocity
+          vx: outDirX * speed * (0.5 + rng() * 0.8),
+          vy: -outDirY * speed * (0.3 + rng() * 0.6) + upKick,
+          vz: (rng() - 0.5) * 0.3,
+          // Angular velocity
+          rx: (rng() - 0.5) * 4.0,
+          ry: (rng() - 0.5) * 4.0,
+          rz: (rng() - 0.5) * 6.0,
+          // Current state (written by physics step)
+          posX: 0,
+          posY: 0,
+          posZ: 0,
+          rotX: 0,
+          rotY: 0,
+          rotZ: 0,
+          opacity: 1.0,
+          settled: false,
+        });
+      }
+
+      // ── Physics Update ─────────────────────────────────────────────────
+      var GRAVITY = -2.5;
+      var FLOOR_Y = -0.8;
+      var DAMPING = 0.6;
+      var FRICTION = 0.92;
+
+      function updateShardPhysics(t) {
+        // t is time since shatter start (0 at SHATTER_START)
+        var dt = 1 / 30; // fixed step for determinism
+        var steps = Math.floor(t / dt);
+
+        for (var i = 0; i < shardPhysics.length; i++) {
+          var sp = shardPhysics[i];
+
+          // Reset and simulate from zero for determinism
+          var px = 0,
+            py = 0,
+            pz = 0;
+          var rx = 0,
+            ry = 0,
+            rz = 0;
+          var vx = sp.vx,
+            vy = sp.vy,
+            vz = sp.vz;
+          var avx = sp.rx,
+            avy = sp.ry,
+            avz = sp.rz;
+          var settled = false;
+
+          for (var step = 0; step < steps && !settled; step++) {
+            // Apply gravity
+            vy += GRAVITY * dt;
+
+            // Update position
+            px += vx * dt;
+            py += vy * dt;
+            pz += vz * dt;
+
+            // Update rotation
+            rx += avx * dt;
+            ry += avy * dt;
+            rz += avz * dt;
+
+            // Floor collision (relative to shard centroid)
+            var worldY = sp.cy + py;
+            if (worldY < FLOOR_Y && vy < 0) {
+              py = FLOOR_Y - sp.cy;
+              vy = -vy * DAMPING;
+              vx *= FRICTION;
+              vz *= FRICTION;
+              avx *= FRICTION;
+              avy *= FRICTION;
+              avz *= FRICTION;
+
+              // Settle if velocity is very small
+              if (Math.abs(vy) < 0.05) {
+                vy = 0;
+                settled = true;
+              }
+            }
+          }
+
+          sp.posX = px;
+          sp.posY = py;
+          sp.posZ = pz;
+          sp.rotX = rx;
+          sp.rotY = ry;
+          sp.rotZ = rz;
+          sp.settled = settled;
+
+          // Fade out shards at the very end
+          var fadeDuration = DURATION - SHATTER_SETTLE;
+          var elapsed = t + SHATTER_START;
+          if (elapsed > SHATTER_SETTLE) {
+            sp.opacity = Math.max(0, 1.0 - (elapsed - SHATTER_SETTLE) / fadeDuration);
+          } else {
+            sp.opacity = 1.0;
+          }
+        }
+      }
+
+      // ── Render State ───────────────────────────────────────────────────
+      var renderState = {
+        phase: 0, // 0=clean, 1=cracking, 2=shattered
+        crackProgress: 0,
+        shardsVisible: false,
+        panelBOpacity: 0,
+      };
+
+      function renderFrame(time) {
+        // Phase determination
+        if (time < CRACK_START) {
+          renderState.phase = 0;
+        } else if (time < SHATTER_START) {
+          renderState.phase = 1;
+        } else {
+          renderState.phase = 2;
+        }
+
+        // Capture HTML panels to texture each frame
+        capturePanels();
+        texA.needsUpdate = true;
+        texB.needsUpdate = true;
+
+        if (renderState.phase === 0) {
+          // Clean glass: show full plane, no cracks
+          fullPlane.visible = true;
+          crackShaderMaterial.uniforms.uCrackProgress.value = 0;
+          crackShaderMaterial.uniforms.uTime.value = time;
+          panelBMesh.visible = false;
+
+          // Hide all shards
+          for (var i = 0; i < shardMeshes.length; i++) {
+            shardMeshes[i].visible = false;
+          }
+        } else if (renderState.phase === 1) {
+          // Cracking: show full plane with crack shader
+          fullPlane.visible = true;
+          var crackT = (time - CRACK_START) / (CRACK_END - CRACK_START);
+          crackT = Math.max(0, Math.min(1, crackT));
+          // Ease in: slow start, accelerating
+          crackT = crackT * crackT;
+          crackShaderMaterial.uniforms.uCrackProgress.value = crackT;
+          crackShaderMaterial.uniforms.uTime.value = time;
+          panelBMesh.visible = false;
+
+          for (var i2 = 0; i2 < shardMeshes.length; i2++) {
+            shardMeshes[i2].visible = false;
+          }
+        } else {
+          // Shattered: hide full plane, show shards + panel B
+          fullPlane.visible = false;
+          panelBMesh.visible = true;
+
+          // Panel B fade-in
+          var panelBFadeT = Math.min(1, (time - SHATTER_START) / 1.5);
+          panelBFadeT = panelBFadeT * panelBFadeT * (3 - 2 * panelBFadeT); // smoothstep
+          panelBMesh.material.opacity = panelBFadeT;
+          panelBMesh.material.transparent = true;
+
+          // Update shard physics
+          var shatterTime = time - SHATTER_START;
+          updateShardPhysics(shatterTime);
+
+          // Apply physics to shard meshes
+          for (var i3 = 0; i3 < shardMeshes.length; i3++) {
+            var sm = shardMeshes[i3];
+            var sp = shardPhysics[i3];
+
+            sm.visible = true;
+
+            // Set position: centroid + physics offset
+            sm.position.set(sp.posX, sp.posY, sp.posZ + 0.01);
+            sm.rotation.set(sp.rotX, sp.rotY, sp.rotZ);
+
+            // Set pivot point to centroid
+            sm.position.x +=
+              sp.cx * (1 - Math.cos(sp.rotZ)) + sp.cy * Math.sin(sp.rotZ) - sp.cx + sp.posX;
+            sm.position.y +=
+              -sp.cx * Math.sin(sp.rotZ) + sp.cy * (1 - Math.cos(sp.rotZ)) - sp.cy + sp.posY;
+
+            // Simpler: just translate by physics offset, rotate around centroid
+            sm.position.set(sp.posX, sp.posY, sp.posZ + 0.01);
+            sm.rotation.set(sp.rotX, sp.rotY, sp.rotZ);
+
+            sm.material.opacity = sp.opacity;
+            sm.material.transparent = sp.opacity < 1.0;
+          }
+        }
+
+        renderer.render(scene, camera);
+      }
+
+      // ── GSAP Timeline ──────────────────────────────────────────────────
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+
+      // Driver tween: spans full duration, renders each frame via onUpdate
+      var timeProxy = { t: 0 };
+      tl.to(
+        timeProxy,
+        {
+          t: DURATION,
+          duration: DURATION,
+          ease: "none",
+          onUpdate: function () {
+            renderFrame(timeProxy.t);
+          },
+        },
+        0,
+      );
+
+      window.__timelines["glass-shatter"] = tl;
+
+      // ── Deferred Init ──────────────────────────────────────────────────
+      setTimeout(function () {
+        capturePanels();
+        texA.needsUpdate = true;
+        texB.needsUpdate = true;
+        tl.seek(0);
+      }, 0);
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/vfx-text-cursor/vfx-text-cursor.html b/docs/public/catalog/blocks/vfx-text-cursor/vfx-text-cursor.html
new file mode 100644
index 0000000000..64661b91d4
--- /dev/null
+++ b/docs/public/catalog/blocks/vfx-text-cursor/vfx-text-cursor.html
@@ -0,0 +1,855 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>VFX Text Cursor</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  </head>
+  <body style="margin: 0; overflow: hidden">
+    <div
+      id="vfx-text-cursor"
+      data-composition-id="vfx-text-cursor"
+      data-start="0"
+      data-duration="8"
+      data-width="1920"
+      data-height="1080"
+      data-root="true"
+    >
+      <canvas id="vfx-canvas" width="1920" height="1080" aria-hidden="true"></canvas>
+      <div class="stage-logo-wrap" aria-hidden="true">
+        <svg
+          class="stage-logo"
+          width="263"
+          height="79"
+          viewBox="0 0 263 79"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M0 16.6738H4.96V23.3838H11.53V16.6738H16.49V35.4538H11.53V27.6738H4.96V35.4538H0V16.6738Z"
+            fill="white"
+          />
+          <path
+            d="M17.8899 28.0137C17.8899 23.4237 21.2399 20.0237 25.7999 20.0237C30.0099 20.0237 32.9399 23.0837 32.9399 27.5637C32.9399 28.2037 32.8599 28.8237 32.8299 29.3337H22.6099C23.0399 31.1337 24.6199 32.1237 27.1399 32.1237C28.7199 32.1237 30.2199 31.7237 31.2999 31.0237V34.6737C30.1699 35.3937 28.2999 35.8537 26.3599 35.8537C21.2599 35.8537 17.8799 32.6037 17.8799 28.0237L17.8899 28.0137ZM28.5699 26.1937C28.4899 24.5337 27.3899 23.5637 25.7499 23.5637C24.1099 23.5637 22.9599 24.5337 22.6099 26.1937H28.5699Z"
+            fill="white"
+          />
+          <path
+            d="M37.85 33.8638L32 20.4238H37.29L40.46 28.1538L43.6 20.4238H48.48L40.33 39.5738H35.26L37.86 33.8638H37.85Z"
+            fill="white"
+          />
+          <path
+            d="M48.1797 26.1138C48.1797 20.4238 52.7097 16.2438 58.9397 16.2438C61.2997 16.2438 63.5297 16.8038 64.8197 17.7238V21.9338C63.5597 20.9138 61.6797 20.2938 59.7497 20.2938C55.7797 20.2938 53.2597 22.6238 53.2597 26.1438C53.2597 29.6638 55.5697 31.8838 58.8897 31.8838C59.6397 31.8838 60.4997 31.7538 61.1997 31.5038V27.8838H57.4697V24.2338H65.5197V33.7038C63.6697 35.0938 61.1997 35.8738 58.5997 35.8738C52.5397 35.8738 48.1897 31.7438 48.1897 26.1138H48.1797Z"
+            fill="white"
+          />
+          <path
+            d="M66.6604 28.0137C66.6604 23.4237 70.0104 20.0237 74.5704 20.0237C78.7804 20.0237 81.7104 23.0837 81.7104 27.5637C81.7104 28.2037 81.6304 28.8237 81.6004 29.3337H71.3804C71.8104 31.1337 73.3904 32.1237 75.9104 32.1237C77.4904 32.1237 78.9904 31.7237 80.0704 31.0237V34.6737C78.9404 35.3937 77.0704 35.8537 75.1304 35.8537C70.0304 35.8537 66.6504 32.6037 66.6504 28.0237L66.6604 28.0137ZM77.3404 26.1937C77.2604 24.5337 76.1604 23.5637 74.5204 23.5637C72.8804 23.5637 71.7304 24.5337 71.3804 26.1937H77.3404Z"
+            fill="white"
+          />
+          <path
+            d="M82.9697 20.4238H87.8497V22.4138C88.7597 20.9638 90.3497 20.1038 92.3297 20.1038C95.4997 20.1038 97.3997 22.3338 97.3997 25.8138V35.4438H92.5197V26.8638C92.5197 25.0438 91.8197 24.1838 90.4797 24.1838C88.9497 24.1838 87.8497 25.3638 87.8497 27.2638V35.4438H82.9697V20.4238Z"
+            fill="white"
+          />
+          <path
+            d="M195.219 26.1937L213.529 38.9937C216.009 40.7237 220.239 38.7637 221.009 35.5337L228.419 4.33374C229.189 1.10374 225.879 -0.856262 222.589 0.873738L198.199 13.6737C192.649 16.5837 191.059 23.2837 195.219 26.1937Z"
+            fill="url(#paint0_linear_2204_3044)"
+          />
+          <path
+            d="M256.97 25.9638L232.58 38.7638C229.28 40.4938 225.98 38.5338 226.75 35.3038L234.16 4.10376C234.93 0.873757 239.16 -1.08624 241.64 0.643757L259.95 13.4438C264.12 16.3538 262.52 23.0538 256.97 25.9638Z"
+            fill="url(#paint1_linear_2204_3044)"
+          />
+          <path
+            d="M252.115 72.502C250.192 72.502 248.268 72.0838 246.93 71.3728V65.6853C247.808 66.3126 248.937 66.689 250.066 66.689C251.739 66.689 252.784 65.8526 252.784 64.5562C252.784 63.8452 252.492 63.0925 251.655 62.0888L249.899 59.956C248.728 58.4923 248.226 56.9031 248.226 55.2721C248.226 51.0065 251.864 48.0791 256.883 48.0791C258.723 48.0791 260.438 48.4555 261.65 49.0828V54.7703C260.898 54.2266 259.768 53.8503 258.723 53.8503C257.092 53.8503 256.046 54.6867 256.046 55.8994C256.046 56.6522 256.423 57.405 257.259 58.4086L258.974 60.4996C260.187 62.047 260.73 63.5943 260.73 65.2671C260.73 69.5746 257.05 72.502 252.115 72.502Z"
+            fill="white"
+          />
+          <path
+            d="M236.338 72.6269C228.392 72.6269 223.123 67.5667 223.123 60.4155C223.123 53.2643 228.351 47.9531 235.46 47.9531C242.026 47.9531 246.584 52.7206 246.584 59.7045C246.584 60.7082 246.459 61.6701 246.417 62.4647H230.483C231.152 65.2666 233.62 66.8139 237.551 66.8139C240.018 66.8139 242.36 66.1866 244.033 65.0993V70.7868C242.277 71.916 239.349 72.6269 236.338 72.6269ZM230.483 57.5717H239.767C239.642 54.9789 237.927 53.4734 235.376 53.4734C232.867 53.4734 231.027 54.9789 230.483 57.5717Z"
+            fill="white"
+          />
+          <path
+            d="M184.998 72.0001V48.5809H192.609V51.6756C193.989 49.4173 196.373 48.0791 199.426 48.0791C202.521 48.0791 204.779 49.5428 206.075 52.052C207.497 49.5846 210.132 48.0791 213.352 48.0791C218.245 48.0791 221.214 51.592 221.214 57.0286V72.0001H213.603V58.5341C213.603 55.774 212.557 54.4357 210.634 54.4357C208.459 54.4357 206.912 56.234 206.912 59.0778V72.0001H199.3V58.5341C199.3 55.774 198.255 54.4357 196.373 54.4357C194.157 54.4357 192.609 56.234 192.609 59.0778V72.0001H184.998Z"
+            fill="white"
+          />
+          <path
+            d="M167.26 72.4602C161.154 72.4602 156.596 67.2745 156.596 60.3324C156.596 53.3066 161.196 48.0791 167.302 48.0791C170.438 48.0791 173.031 49.4173 174.536 51.8429V48.5809H182.148V72.0001H174.536V68.4873C173.031 71.0801 170.438 72.4602 167.26 72.4602ZM169.393 66.1872C172.78 66.1872 174.536 63.3434 174.536 60.876V59.6632C174.536 57.2377 172.78 54.4357 169.393 54.4357C166.298 54.4357 164.207 56.7777 164.207 60.2905C164.207 63.7616 166.298 66.1872 169.393 66.1872Z"
+            fill="white"
+          />
+          <path
+            d="M141.258 72V48.5808H148.827V52.9719C149.831 50.0445 151.796 48.2881 154.306 48.2881C154.975 48.2881 155.602 48.4135 156.02 48.6645V55.8993C155.435 55.5648 154.724 55.4393 153.887 55.4393C150.751 55.4393 148.869 57.6558 148.869 61.2941V72H141.258Z"
+            fill="white"
+          />
+          <path
+            d="M122.643 71.9996V42.7256H139.371V49.124H130.379V54.477H138.911V60.5827H130.379V71.9996H122.643Z"
+            fill="white"
+          />
+          <path
+            d="M105.645 72V48.5808H113.214V52.9719C114.218 50.0445 116.183 48.2881 118.692 48.2881C119.361 48.2881 119.989 48.4135 120.407 48.6645V55.8993C119.822 55.5648 119.111 55.4393 118.274 55.4393C115.138 55.4393 113.256 57.6558 113.256 61.2941V72H105.645Z"
+            fill="white"
+          />
+          <path
+            d="M93.4397 72.6269C85.4939 72.6269 80.2246 67.5667 80.2246 60.4155C80.2246 53.2643 85.4521 47.9531 92.5615 47.9531C99.1273 47.9531 103.686 52.7206 103.686 59.7045C103.686 60.7082 103.56 61.6701 103.518 62.4647H87.5849C88.2541 65.2666 90.7214 66.8139 94.6525 66.8139C97.1199 66.8139 99.4618 66.1866 101.135 65.0993V70.7868C99.3782 71.916 96.4508 72.6269 93.4397 72.6269ZM87.5849 57.5717H96.869C96.7435 54.9789 95.0289 53.4734 92.4779 53.4734C89.9687 53.4734 88.1286 54.9789 87.5849 57.5717Z"
+            fill="white"
+          />
+          <path
+            d="M53.3711 78.4404V48.5809H60.9823V52.052C62.446 49.501 65.0807 48.0791 68.3008 48.0791C74.3647 48.0791 78.9649 53.3066 78.9649 60.2487C78.9649 67.2745 74.3229 72.4602 68.259 72.4602C65.0807 72.4602 62.446 71.1637 60.9823 68.78V78.4404H53.3711ZM66.1262 66.1872C69.2627 66.1872 71.3119 63.7616 71.3119 60.2905C71.3119 56.8195 69.2627 54.4357 66.1262 54.4357C62.7388 54.4357 60.9823 57.2795 60.9823 59.7051V60.9178C60.9823 63.3434 62.7388 66.1872 66.1262 66.1872Z"
+            fill="white"
+          />
+          <path
+            d="M31.9606 78.4405L36.0171 69.5329L26.9004 48.5811H35.1389L40.0737 60.6252L44.9666 48.5811H52.5779L39.8646 78.4405H31.9606Z"
+            fill="white"
+          />
+          <path
+            d="M0 71.9996V42.7256H7.7367V53.1806H17.9826V42.7256H25.7193V71.9996H17.9826V59.8718H7.7367V71.9996H0Z"
+            fill="white"
+          />
+          <defs>
+            <linearGradient
+              id="paint0_linear_2204_3044"
+              x1="225.869"
+              y1="-3.06048e-05"
+              x2="222.845"
+              y2="37.4821"
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop stop-color="#06E3FA" />
+              <stop offset="1" stop-color="#4FDB5E" />
+            </linearGradient>
+            <linearGradient
+              id="paint1_linear_2204_3044"
+              x1="230.87"
+              y1="39"
+              x2="244.661"
+              y2="6.30303"
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop stop-color="#06E3FA" />
+              <stop offset="1" stop-color="#4FDB5E" />
+            </linearGradient>
+          </defs>
+        </svg>
+      </div>
+
+      <div id="next-card" aria-hidden="true">
+        <h1 id="phrase-a" class="card-text">
+          <span
+            ><span class="headline-word html-word"
+              ><span class="html-type"></span><span class="html-caret">|</span></span
+            >
+            <span class="headline-word supporting-word">in</span></span
+          >
+          <span><span class="headline-word supporting-word canvas-word">canvas</span></span>
+        </h1>
+        <h2 id="phrase-b" class="card-text availability">
+          <span>Now available</span>
+          <span>in HyperFrames</span>
+        </h2>
+      </div>
+
+      <!-- Driver clip -->
+      <div
+        id="driver"
+        class="clip"
+        data-start="0"
+        data-duration="8"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+
+      <style>
+        @import url("https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@800;900&display=block");
+
+        [data-composition-id="vfx-text-cursor"] {
+          position: relative;
+          width: 1920px;
+          height: 1080px;
+          overflow: hidden;
+          background: #000000;
+          font-family: Inter, "Arial Black", Arial, sans-serif;
+        }
+
+        [data-composition-id="vfx-text-cursor"] #vfx-canvas {
+          position: absolute;
+          inset: 0;
+          width: 1920px;
+          height: 1080px;
+          z-index: 1;
+        }
+
+        [data-composition-id="vfx-text-cursor"] .stage-logo-wrap {
+          position: absolute;
+          left: 420px;
+          top: 369.8px;
+          z-index: 2;
+          width: 1080px;
+          height: 324.4px;
+          opacity: 0;
+          filter: drop-shadow(0 0 22px rgba(73, 242, 255, 0.12));
+        }
+
+        [data-composition-id="vfx-text-cursor"] .stage-logo {
+          display: block;
+          width: 100%;
+          height: auto;
+        }
+
+        [data-composition-id="vfx-text-cursor"] #next-card {
+          position: absolute;
+          left: 120px;
+          top: 67.5px;
+          width: 1680px;
+          height: 945px;
+          padding: 96px 126px;
+          box-sizing: border-box;
+          border-radius: 56px;
+          background: linear-gradient(
+            160deg,
+            rgba(255, 255, 255, 0.11) 0%,
+            rgba(255, 255, 255, 0.045) 42%,
+            rgba(255, 255, 255, 0.018) 70%,
+            rgba(255, 255, 255, 0.075) 100%
+          );
+          backdrop-filter: blur(14px) saturate(1.12);
+          -webkit-backdrop-filter: blur(14px) saturate(1.12);
+          border: 1px solid rgba(255, 255, 255, 0.17);
+          box-shadow:
+            0 30px 90px rgba(0, 0, 0, 0.42),
+            inset 0 1px 0 rgba(255, 255, 255, 0.22);
+          transform-origin: 50% 50%;
+          z-index: 3;
+          opacity: 0;
+          overflow: hidden;
+        }
+
+        [data-composition-id="vfx-text-cursor"] #next-card::before {
+          content: "";
+          position: absolute;
+          inset: 0;
+          background:
+            radial-gradient(circle at 18% 78%, rgba(73, 242, 255, 0.14), transparent 38%),
+            radial-gradient(circle at 82% 22%, rgba(255, 79, 216, 0.11), transparent 34%);
+          pointer-events: none;
+        }
+
+        [data-composition-id="vfx-text-cursor"] #next-card::after {
+          content: "";
+          position: absolute;
+          inset: 1px;
+          border-radius: 55px;
+          box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
+          pointer-events: none;
+        }
+
+        [data-composition-id="vfx-text-cursor"] .card-text {
+          position: absolute;
+          z-index: 1;
+          left: 126px;
+          right: 126px;
+          top: 96px;
+          bottom: 96px;
+          margin: 0;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          color: #ffffff;
+          font-size: 292px;
+          line-height: 0.88;
+          font-weight: 900;
+          letter-spacing: 0;
+          text-align: center;
+          text-shadow:
+            -5px 0 18px rgba(73, 242, 255, 0.38),
+            5px 0 18px rgba(255, 79, 216, 0.28),
+            0 24px 80px rgba(0, 0, 0, 0.58);
+        }
+
+        [data-composition-id="vfx-text-cursor"] .card-text > span {
+          display: block;
+          white-space: nowrap;
+        }
+
+        [data-composition-id="vfx-text-cursor"] .headline-word {
+          display: inline-block;
+        }
+
+        [data-composition-id="vfx-text-cursor"] .html-word {
+          position: relative;
+          width: 1.78em;
+          margin-right: 0.08em;
+          text-align: left;
+          color: #f6ff7a;
+          font-family: "Big Shoulders Display", Impact, "Arial Black", sans-serif;
+          font-weight: 900;
+          letter-spacing: 0.015em;
+          text-transform: uppercase;
+          text-shadow:
+            -6px 0 16px rgba(73, 242, 255, 0.48),
+            6px 0 16px rgba(255, 79, 216, 0.34),
+            0 0 24px rgba(246, 255, 122, 0.34),
+            0 24px 72px rgba(0, 0, 0, 0.56);
+        }
+
+        [data-composition-id="vfx-text-cursor"] .html-type,
+        [data-composition-id="vfx-text-cursor"] .html-caret {
+          display: inline-block;
+        }
+
+        [data-composition-id="vfx-text-cursor"] .html-caret {
+          position: absolute;
+          left: 0;
+          top: 0;
+          width: auto;
+          margin-left: 0;
+          opacity: 0;
+          color: #f6ff7a;
+          text-shadow:
+            0 0 12px rgba(246, 255, 122, 0.7),
+            -4px 0 14px rgba(73, 242, 255, 0.36),
+            4px 0 14px rgba(255, 79, 216, 0.26);
+        }
+
+        [data-composition-id="vfx-text-cursor"] .canvas-word {
+          color: #ffffff;
+          text-shadow:
+            -4px 0 18px rgba(246, 255, 122, 0.26),
+            5px 0 18px rgba(255, 79, 216, 0.25),
+            0 22px 72px rgba(0, 0, 0, 0.58);
+        }
+
+        [data-composition-id="vfx-text-cursor"] .availability {
+          font-size: 178px;
+          line-height: 0.94;
+        }
+      </style>
+
+      <script>
+        window.__timelines = window.__timelines || {};
+
+        (function () {
+          var WIDTH = 1920;
+          var HEIGHT = 1080;
+          var LOGO_VIEWBOX = { width: 263, height: 79 };
+          var LOGO_WIDTH = 1080;
+          var LOGO_SCALE = LOGO_WIDTH / LOGO_VIEWBOX.width;
+          var LOGO_HEIGHT = LOGO_VIEWBOX.height * LOGO_SCALE;
+          var LOGO_X = (WIDTH - LOGO_WIDTH) * 0.5;
+          var LOGO_Y = (HEIGHT - LOGO_HEIGHT) * 0.5 - 8;
+          var root = document.querySelector('[data-composition-id="vfx-text-cursor"]');
+          var canvas = root.querySelector("#vfx-canvas");
+          var nextCard = root.querySelector("#next-card");
+          var phraseA = root.querySelector("#phrase-a");
+          var phraseB = root.querySelector("#phrase-b");
+          var htmlWord = root.querySelector(".html-word");
+          var htmlType = root.querySelector(".html-type");
+          var htmlCaret = root.querySelector(".html-caret");
+          var supportingWords = Array.from(root.querySelectorAll(".supporting-word"));
+          var stageLogo = root.querySelector(".stage-logo-wrap");
+          var gl = canvas.getContext("webgl", {
+            premultipliedAlpha: false,
+            preserveDrawingBuffer: true,
+          });
+          var state = { progress: 0, logoY: 760, effectMix: 0, logoScale: 1 };
+          var mouse = { x: 0, y: HEIGHT * 0.5 };
+          var entryEase = function (t) {
+            return -0.806 * t * t + 1.806 * t;
+          };
+          var htmlText = "HTML";
+
+          function getTitleOffset() {
+            var cardRect = nextCard.getBoundingClientRect();
+            htmlType.textContent = htmlText;
+            var htmlRect = htmlType.getBoundingClientRect();
+            htmlType.textContent = "";
+            return {
+              x: cardRect.left + cardRect.width * 0.5 - (htmlRect.left + htmlRect.width * 0.5),
+              y: cardRect.top + cardRect.height * 0.5 - (htmlRect.top + htmlRect.height * 0.5),
+            };
+          }
+
+          function addTextCardSequence(tl, htmlStart) {
+            var typeStep = 0.085;
+            var titleHold = 0.25;
+            var typeEnd = htmlStart + (htmlText.length - 1) * typeStep;
+            var slideStart = typeEnd + titleHold;
+            var slideEnd = slideStart + 0.05;
+            var titleOffset = getTitleOffset();
+
+            tl.call(
+              function () {
+                htmlType.textContent = "";
+                htmlCaret.style.left = "0px";
+              },
+              [],
+              0,
+            );
+            tl.set(
+              htmlWord,
+              { x: titleOffset.x, y: titleOffset.y, scale: 1.8, transformOrigin: "50% 50%" },
+              0,
+            );
+            tl.set(htmlCaret, { opacity: 0 }, 0);
+            tl.set(htmlCaret, { opacity: 1 }, htmlStart - 0.05);
+
+            for (var i = 1; i <= htmlText.length; i += 1) {
+              (function (idx) {
+                tl.call(
+                  function () {
+                    htmlType.textContent = htmlText.slice(0, idx);
+                    htmlCaret.style.left = htmlType.offsetWidth + "px";
+                    if (idx === htmlText.length) {
+                      htmlCaret.style.opacity = "0";
+                    }
+                  },
+                  [],
+                  htmlStart + (idx - 1) * typeStep,
+                );
+              })(i);
+            }
+
+            tl.to(
+              htmlWord,
+              {
+                x: 0,
+                y: 0,
+                scale: 1,
+                duration: 0.05,
+                ease: "power2.out",
+              },
+              slideStart,
+            );
+            tl.to(
+              supportingWords,
+              {
+                opacity: 1,
+                y: 0,
+                scale: 1,
+                filter: "blur(0px)",
+                duration: 0.42,
+                stagger: 0.08,
+                ease: "expo.out",
+              },
+              slideEnd,
+            );
+
+            return slideEnd + 0.42 + (supportingWords.length - 1) * 0.08;
+          }
+
+          if (!gl) {
+            var ctx = canvas.getContext("2d");
+            ctx.fillStyle = "#000";
+            ctx.fillRect(0, 0, WIDTH, HEIGHT);
+
+            var tl = gsap.timeline({ paused: true });
+            tl.set(nextCard, { opacity: 0, scale: 1.45, filter: "blur(14px)" }, 0);
+            tl.set(phraseA, { opacity: 1, x: 0, y: 0, scale: 1, filter: "blur(0px)" }, 0);
+            tl.set(supportingWords, { opacity: 0, y: 54, scale: 0.96, filter: "blur(10px)" }, 0);
+            tl.set(phraseB, { opacity: 0, x: 1480, y: 0, scale: 1, filter: "blur(8px)" }, 0);
+            tl.to(state, { logoY: 0, duration: 1, ease: "power4.out" }, 0);
+            tl.set(nextCard, { opacity: 1, scale: 1.45, filter: "blur(14px)" }, 3.1);
+            tl.to(
+              nextCard,
+              { scale: 0.88, filter: "blur(0px)", duration: 0.9, ease: entryEase },
+              3.1,
+            );
+            tl.to(
+              nextCard,
+              { scale: 0.84, filter: "blur(1.5px)", duration: 0.4, ease: "none" },
+              4.0,
+            );
+            var phraseAReady = addTextCardSequence(tl, 3.15);
+            var phraseAExit = phraseAReady + 0.5;
+            var phraseBStart = phraseAExit + 0.36;
+            tl.to(
+              phraseA,
+              { x: -1480, filter: "blur(8px)", duration: 0.36, ease: "power2.in" },
+              phraseAExit,
+            );
+            tl.set(phraseA, { opacity: 0 }, phraseBStart);
+            tl.set(
+              phraseB,
+              { opacity: 1, x: 1480, y: 0, scale: 1, filter: "blur(8px)" },
+              phraseBStart,
+            );
+            tl.to(
+              phraseB,
+              { x: 0, filter: "blur(0px)", duration: 0.48, ease: "expo.out" },
+              phraseBStart,
+            );
+            window.__timelines["vfx-text-cursor"] = tl;
+            return;
+          }
+
+          var vertexSource = [
+            "attribute vec2 position;",
+            "varying vec2 vUv;",
+            "void main() {",
+            "  vUv = position * 0.5 + 0.5;",
+            "  gl_Position = vec4(position, 0.0, 1.0);",
+            "}",
+          ].join("\n");
+
+          var fragmentSource = [
+            "precision highp float;",
+            "varying vec2 vUv;",
+            "uniform vec2 resolution;",
+            "uniform vec2 mouse;",
+            "uniform float logoY;",
+            "uniform float logoScale;",
+            "uniform float effectMix;",
+            "uniform sampler2D src;",
+            "uniform sampler2D colorSrc;",
+            "",
+            "#define PI 3.141593",
+            "#define SAMPLES 112.0",
+            "",
+            "float hash(vec2 p) {",
+            "  return fract(sin(dot(p, vec2(489.0, 589.0))) * 492.0) * 2.0 - 1.0;",
+            "}",
+            "",
+            "float hash(vec3 p) {",
+            "  return fract(sin(dot(p, vec3(489.0, 589.0, 58.0))) * 492.0) * 2.0 - 1.0;",
+            "}",
+            "",
+            "vec2 hash2(vec3 p) {",
+            "  return vec2(hash(p), hash(p + 1.0));",
+            "}",
+            "",
+            "vec4 readMask(vec2 uv) {",
+            "  if (uv.x < 0.0 || uv.x > 1.0 || uv.y < 0.0 || uv.y > 1.0) {",
+            "    return vec4(0.0);",
+            "  }",
+            "  return texture2D(src, uv);",
+            "}",
+            "",
+            "vec4 readColor(vec2 uv) {",
+            "  if (uv.x < 0.0 || uv.x > 1.0 || uv.y < 0.0 || uv.y > 1.0) {",
+            "    return vec4(0.0);",
+            "  }",
+            "  return texture2D(colorSrc, uv);",
+            "}",
+            "",
+            "vec3 spectrum(float x) {",
+            "  return cos((x - vec3(0.0, 0.5, 1.0)) * vec3(0.6, 1.0, 0.5) * PI);",
+            "}",
+            "",
+            "void main() {",
+            "  vec2 uv = vUv;",
+            "  vec2 logoCenter = vec2(0.5, 0.5);",
+            "  vec2 logoUv = (uv - logoCenter) / logoScale + logoCenter + vec2(0.0, logoY / resolution.y);",
+            "  float mask = readMask(logoUv).r;",
+            "  vec4 logo = readColor(logoUv);",
+            "  vec2 p = uv * 2.0 - 1.0;",
+            "  p.x *= resolution.x / resolution.y;",
+            "",
+            "  vec2 mp = mouse / resolution;",
+            "  mp.y = 1.0 - mp.y;",
+            "  mp = mp * 2.0 - 1.0;",
+            "  mp.x *= resolution.x / resolution.y;",
+            "",
+            "  vec2 rp = p;",
+            "  vec2 d = (mp - p) / SAMPLES;",
+            "  float acc = 0.0;",
+            "",
+            "  for (float i = 0.0; i < SAMPLES; i++) {",
+            "    rp += d;",
+            "    rp += hash2(vec3(rp, i)) * 0.5 / SAMPLES;",
+            "",
+            "    vec2 uv2 = rp;",
+            "    uv2.x /= resolution.x / resolution.y;",
+            "    uv2 = uv2 * 0.5 + 0.5;",
+            "    vec2 rayLogoUv = (uv2 - logoCenter) / logoScale + logoCenter + vec2(0.0, logoY / resolution.y);",
+            "    acc += readMask(rayLogoUv).r / SAMPLES;",
+            "  }",
+            "",
+            "  vec4 c = vec4(0.0, 0.0, 0.0, 1.0);",
+            "  c -= acc * 0.24;",
+            "  c += vec4(spectrum(cos(acc * 4.9)), 1.0) * acc * 3.65;",
+            "  c.rgb = max(c.rgb - 0.035, 0.0);",
+            "  c.rgb *= 1.16;",
+            "  float cursorX = mouse.x / resolution.x;",
+            "  float sweep = exp(-pow((uv.x - cursorX) * 6.2, 2.0));",
+            "  float textProximity = smoothstep(0.006, 0.34, acc);",
+            "  float longRay = smoothstep(0.004, 0.18, acc);",
+            "  vec3 sweepColor = vec3(0.14, 0.65, 0.85) + spectrum(cursorX * 1.8) * 0.28;",
+            "  c.rgb += sweepColor * sweep * (0.34 + textProximity * 2.35);",
+            "  c.rgb += spectrum(cursorX + acc * 2.0) * longRay * 0.58;",
+            "  c.rgb += logo.rgb * acc * 1.18;",
+            "  c.rgb += logo.rgb * sweep * mask * 0.92;",
+            "  c.rgb *= effectMix;",
+            "  c.rgb = mix(c.rgb, logo.rgb, smoothstep(0.02, 0.75, logo.a));",
+            "  c.rgb += vec3(1.0) * smoothstep(0.04, 0.38, mask) * 0.12 * effectMix;",
+            "  float grain = hash(vec3(uv.xyy + mouse.x * 0.0007));",
+            "  float logoDust = smoothstep(0.02, 0.38, acc) + smoothstep(0.03, 0.22, mask);",
+            "  c.rgb += grain * 0.07 * (0.42 + logoDust) * effectMix;",
+            "  c.rgb += spectrum(grain + cursorX) * abs(grain) * 0.045 * smoothstep(0.02, 0.5, acc) * effectMix;",
+            "  c.a = 1.0;",
+            "  gl_FragColor = c;",
+            "}",
+          ].join("\n");
+
+          function compile(type, source) {
+            var shader = gl.createShader(type);
+            gl.shaderSource(shader, source);
+            gl.compileShader(shader);
+            if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+              throw new Error(gl.getShaderInfoLog(shader));
+            }
+            return shader;
+          }
+
+          var program = gl.createProgram();
+          gl.attachShader(program, compile(gl.VERTEX_SHADER, vertexSource));
+          gl.attachShader(program, compile(gl.FRAGMENT_SHADER, fragmentSource));
+          gl.linkProgram(program);
+          if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+            throw new Error(gl.getProgramInfoLog(program));
+          }
+
+          var mask = document.createElement("canvas");
+          mask.width = WIDTH;
+          mask.height = HEIGHT;
+          var maskCtx = mask.getContext("2d");
+          var colorMask = document.createElement("canvas");
+          colorMask.width = WIDTH;
+          colorMask.height = HEIGHT;
+          var colorCtx = colorMask.getContext("2d");
+
+          function parseOffset(value) {
+            if (!value) return 0;
+            return value.indexOf("%") > -1 ? parseFloat(value) / 100 : parseFloat(value);
+          }
+
+          function makeFill(ctx, fill) {
+            if (!fill || fill === "none") return null;
+            var match = fill.match(/^url\(#(.+)\)$/);
+            if (!match) return fill;
+
+            var gradient = root.querySelector("#" + match[1]);
+            if (!gradient) return "#ffffff";
+
+            var x1 = parseFloat(gradient.getAttribute("x1") || "0");
+            var y1 = parseFloat(gradient.getAttribute("y1") || "0");
+            var x2 = parseFloat(gradient.getAttribute("x2") || "0");
+            var y2 = parseFloat(gradient.getAttribute("y2") || "0");
+            var canvasGradient = ctx.createLinearGradient(x1, y1, x2, y2);
+            gradient.querySelectorAll("stop").forEach(function (stop) {
+              var offset = parseOffset(stop.getAttribute("offset") || "0");
+              var color = stop.getAttribute("stop-color") || "#ffffff";
+              canvasGradient.addColorStop(Math.max(0, Math.min(1, offset)), color);
+            });
+            return canvasGradient;
+          }
+
+          function drawLogoMasks() {
+            maskCtx.clearRect(0, 0, WIDTH, HEIGHT);
+            colorCtx.clearRect(0, 0, WIDTH, HEIGHT);
+            maskCtx.save();
+            colorCtx.save();
+            maskCtx.translate(LOGO_X, LOGO_Y);
+            colorCtx.translate(LOGO_X, LOGO_Y);
+            maskCtx.scale(LOGO_SCALE, LOGO_SCALE);
+            colorCtx.scale(LOGO_SCALE, LOGO_SCALE);
+            maskCtx.fillStyle = "#fff";
+
+            root.querySelectorAll(".stage-logo path[d]").forEach(function (path) {
+              var shape = new Path2D(path.getAttribute("d"));
+              var fill = makeFill(colorCtx, path.getAttribute("fill"));
+              maskCtx.fill(shape);
+              if (fill) {
+                colorCtx.fillStyle = fill;
+                colorCtx.fill(shape);
+              }
+            });
+
+            maskCtx.restore();
+            colorCtx.restore();
+          }
+          drawLogoMasks();
+
+          function createTexture(source) {
+            var texture = gl.createTexture();
+            gl.bindTexture(gl.TEXTURE_2D, texture);
+            gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
+            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+            return texture;
+          }
+
+          var texture = createTexture(mask);
+          var colorTexture = createTexture(colorMask);
+
+          var buffer = gl.createBuffer();
+          gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+          gl.bufferData(
+            gl.ARRAY_BUFFER,
+            new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),
+            gl.STATIC_DRAW,
+          );
+
+          var positionLoc = gl.getAttribLocation(program, "position");
+          var resolutionLoc = gl.getUniformLocation(program, "resolution");
+          var mouseLoc = gl.getUniformLocation(program, "mouse");
+          var logoYLoc = gl.getUniformLocation(program, "logoY");
+          var logoScaleLoc = gl.getUniformLocation(program, "logoScale");
+          var effectMixLoc = gl.getUniformLocation(program, "effectMix");
+          var srcLoc = gl.getUniformLocation(program, "src");
+          var colorSrcLoc = gl.getUniformLocation(program, "colorSrc");
+
+          function render() {
+            mouse.x = state.progress * WIDTH;
+            mouse.y = HEIGHT * 0.5;
+
+            gl.viewport(0, 0, WIDTH, HEIGHT);
+            gl.clearColor(0, 0, 0, 1);
+            gl.clear(gl.COLOR_BUFFER_BIT);
+            gl.useProgram(program);
+            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+            gl.enableVertexAttribArray(positionLoc);
+            gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0);
+            gl.activeTexture(gl.TEXTURE0);
+            gl.bindTexture(gl.TEXTURE_2D, texture);
+            gl.uniform1i(srcLoc, 0);
+            gl.activeTexture(gl.TEXTURE1);
+            gl.bindTexture(gl.TEXTURE_2D, colorTexture);
+            gl.uniform1i(colorSrcLoc, 1);
+            gl.uniform2f(resolutionLoc, WIDTH, HEIGHT);
+            gl.uniform2f(mouseLoc, mouse.x, mouse.y);
+            gl.uniform1f(logoYLoc, state.logoY);
+            gl.uniform1f(logoScaleLoc, state.logoScale);
+            gl.uniform1f(effectMixLoc, state.effectMix);
+            gl.drawArrays(gl.TRIANGLES, 0, 6);
+          }
+
+          render();
+          var tl = gsap.timeline({
+            paused: true,
+            onUpdate: render,
+          });
+
+          tl.set(canvas, { opacity: 1, filter: "blur(0px)" }, 0);
+          tl.set(nextCard, { opacity: 0, scale: 1.45, filter: "blur(14px)" }, 0);
+          tl.set(phraseA, { opacity: 1, x: 0, y: 0, scale: 1, filter: "blur(0px)" }, 0);
+          tl.set(supportingWords, { opacity: 0, y: 54, scale: 0.96, filter: "blur(10px)" }, 0);
+          tl.set(phraseB, { opacity: 0, x: 1480, y: 0, scale: 1, filter: "blur(8px)" }, 0);
+          tl.set(state, { logoY: 760, effectMix: 0, progress: 0, logoScale: 1 }, 0);
+          tl.to(
+            state,
+            {
+              logoY: 0,
+              duration: 1,
+              ease: "power4.out",
+              onUpdate: render,
+            },
+            0,
+          );
+
+          tl.to(
+            state,
+            {
+              effectMix: 1,
+              duration: 0.34,
+              ease: "power3.out",
+              onUpdate: render,
+            },
+            0.72,
+          );
+
+          tl.to(
+            state,
+            {
+              progress: 1,
+              duration: 2.28,
+              ease: "none",
+              onUpdate: render,
+            },
+            0.72,
+          );
+
+          tl.to(
+            state,
+            {
+              logoScale: 0.4,
+              duration: 0.2,
+              ease: "expo.in",
+              onUpdate: render,
+            },
+            2.9,
+          );
+
+          tl.to(
+            canvas,
+            {
+              opacity: 0,
+              filter: "blur(16px)",
+              duration: 0.2,
+              ease: "expo.in",
+            },
+            2.9,
+          );
+
+          tl.set(nextCard, { opacity: 1, scale: 1.45, filter: "blur(14px)" }, 3.1);
+          tl.to(
+            nextCard,
+            {
+              scale: 0.88,
+              filter: "blur(0px)",
+              duration: 0.9,
+              ease: entryEase,
+            },
+            3.1,
+          );
+          tl.to(
+            nextCard,
+            {
+              scale: 0.84,
+              filter: "blur(1.5px)",
+              duration: 0.4,
+              ease: "none",
+            },
+            4.0,
+          );
+          var phraseAReady = addTextCardSequence(tl, 3.15);
+          var phraseAExit = phraseAReady + 0.5;
+          var phraseBStart = phraseAExit + 0.36;
+          tl.to(
+            phraseA,
+            {
+              x: -1480,
+              filter: "blur(8px)",
+              duration: 0.36,
+              ease: "power2.in",
+            },
+            phraseAExit,
+          );
+          tl.set(phraseA, { opacity: 0 }, phraseBStart);
+          tl.set(
+            phraseB,
+            {
+              opacity: 1,
+              x: 1480,
+              y: 0,
+              scale: 1,
+              filter: "blur(8px)",
+            },
+            phraseBStart,
+          );
+          tl.to(
+            phraseB,
+            {
+              x: 0,
+              filter: "blur(0px)",
+              duration: 0.48,
+              ease: "expo.out",
+            },
+            phraseBStart,
+          );
+
+          window.__timelines["vfx-text-cursor"] = tl;
+        })();
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/vpn-youtube-spot/assets/vpn-sfx.wav b/docs/public/catalog/blocks/vpn-youtube-spot/assets/vpn-sfx.wav
new file mode 100644
index 0000000000..3dd731b052
Binary files /dev/null and b/docs/public/catalog/blocks/vpn-youtube-spot/assets/vpn-sfx.wav differ
diff --git a/docs/public/catalog/blocks/vpn-youtube-spot/vpn-youtube-spot.html b/docs/public/catalog/blocks/vpn-youtube-spot/vpn-youtube-spot.html
new file mode 100644
index 0000000000..ca0cdf5c81
--- /dev/null
+++ b/docs/public/catalog/blocks/vpn-youtube-spot/vpn-youtube-spot.html
@@ -0,0 +1,987 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #ffffff;
+        font-family:
+          -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Helvetica Neue", Arial,
+          sans-serif;
+      }
+
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        color: #111111;
+        background:
+          radial-gradient(circle at 20% 16%, rgba(0, 122, 255, 0.13), transparent 24%),
+          radial-gradient(circle at 82% 22%, rgba(52, 199, 89, 0.14), transparent 22%),
+          linear-gradient(180deg, #ffffff 0%, #f5f5f7 100%);
+      }
+
+      .stage {
+        position: absolute;
+        inset: 0;
+        display: grid;
+        place-items: center;
+        padding: 70px 120px;
+      }
+
+      .headline {
+        position: absolute;
+        left: 118px;
+        top: 104px;
+        width: 580px;
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        z-index: 2;
+        pointer-events: none;
+      }
+
+      .headline span {
+        display: block;
+        font-size: 92px;
+        line-height: 0.92;
+        font-weight: 900;
+        letter-spacing: 0;
+      }
+
+      .headline .blue {
+        color: #007aff;
+      }
+
+      .headline .sub {
+        margin-top: 20px;
+        width: 410px;
+        color: #6e6e73;
+        font-size: 27px;
+        line-height: 1.18;
+        font-weight: 700;
+      }
+
+      .ambient-word {
+        position: absolute;
+        right: 78px;
+        bottom: 64px;
+        color: rgba(17, 17, 17, 0.05);
+        font-size: 208px;
+        line-height: 0.84;
+        font-weight: 900;
+        letter-spacing: 0;
+        pointer-events: none;
+      }
+
+      .ambient-line {
+        position: absolute;
+        height: 2px;
+        width: 360px;
+        border-radius: 999px;
+        background: rgba(0, 122, 255, 0.2);
+        transform-origin: center;
+        pointer-events: none;
+      }
+
+      .line-a {
+        left: 198px;
+        bottom: 230px;
+      }
+
+      .line-b {
+        right: 208px;
+        top: 196px;
+        width: 248px;
+        background: rgba(52, 199, 89, 0.2);
+      }
+
+      .snap-shadow {
+        position: absolute;
+        left: 50%;
+        bottom: 132px;
+        width: 560px;
+        height: 52px;
+        border-radius: 50%;
+        transform: translateX(-50%);
+        background: rgba(17, 17, 17, 0.14);
+        filter: blur(24px);
+        opacity: 0;
+      }
+
+      .phone {
+        position: relative;
+        width: 462px;
+        height: 952px;
+        border-radius: 72px;
+        padding: 16px;
+        background: linear-gradient(145deg, #1f2025 0%, #07070a 100%);
+        box-shadow:
+          0 46px 120px rgba(17, 17, 17, 0.22),
+          inset 0 0 0 2px rgba(255, 255, 255, 0.12);
+        z-index: 4;
+        will-change: transform;
+      }
+
+      .phone::before {
+        content: "";
+        position: absolute;
+        inset: 8px;
+        border-radius: 64px;
+        border: 2px solid rgba(255, 255, 255, 0.07);
+        pointer-events: none;
+      }
+
+      .screen {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        border-radius: 56px;
+        background: #f5f5f7;
+        box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
+      }
+
+      .island {
+        position: absolute;
+        left: 50%;
+        top: 15px;
+        width: 138px;
+        height: 38px;
+        border-radius: 999px;
+        transform: translateX(-50%);
+        background: #07070a;
+        z-index: 30;
+      }
+
+      .store-view,
+      .detail-view,
+      .white-wipe {
+        position: absolute;
+        inset: 0;
+      }
+
+      .store-view {
+        padding: 70px 24px 26px;
+        z-index: 2;
+      }
+
+      .store-top {
+        display: flex;
+        align-items: flex-end;
+        justify-content: space-between;
+        margin-bottom: 16px;
+      }
+
+      .store-title {
+        font-size: 38px;
+        line-height: 1;
+        font-weight: 900;
+        letter-spacing: 0;
+      }
+
+      .avatar {
+        width: 38px;
+        height: 38px;
+        border-radius: 50%;
+        background:
+          radial-gradient(circle at 62% 38%, rgba(255, 255, 255, 0.9) 0 10%, transparent 11%),
+          linear-gradient(135deg, #007aff, #34c759);
+        box-shadow: 0 8px 18px rgba(0, 122, 255, 0.25);
+      }
+
+      .search-pill {
+        display: flex;
+        align-items: center;
+        gap: 9px;
+        height: 45px;
+        padding: 0 16px;
+        border-radius: 15px;
+        background: #e9e9ed;
+        color: #6e6e73;
+        font-size: 18px;
+        font-weight: 700;
+        margin-bottom: 16px;
+      }
+
+      .search-icon {
+        width: 16px;
+        height: 16px;
+        border: 3px solid #8e8e93;
+        border-radius: 50%;
+        position: relative;
+      }
+
+      .search-icon::after {
+        content: "";
+        position: absolute;
+        right: -8px;
+        bottom: -5px;
+        width: 9px;
+        height: 3px;
+        border-radius: 999px;
+        background: #8e8e93;
+        transform: rotate(45deg);
+      }
+
+      .screen-window {
+        height: 720px;
+        overflow: hidden;
+        border-radius: 26px;
+      }
+
+      .scroll-content {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+        will-change: transform;
+      }
+
+      .store-row {
+        display: grid;
+        grid-template-columns: 72px 1fr 78px;
+        align-items: center;
+        gap: 13px;
+        min-height: 104px;
+        padding: 13px 12px;
+        border-radius: 23px;
+        background: rgba(255, 255, 255, 0.88);
+        box-shadow: 0 2px 0 rgba(0, 0, 0, 0.035);
+      }
+
+      .app-icon {
+        width: 72px;
+        height: 72px;
+        border-radius: 18px;
+        position: relative;
+        overflow: hidden;
+        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.38);
+      }
+
+      .icon-cloud {
+        background: linear-gradient(135deg, #70d7ff, #007aff);
+      }
+
+      .icon-photo {
+        background:
+          radial-gradient(circle at 32% 35%, #ffffff 0 10%, transparent 11%),
+          linear-gradient(135deg, #ff9f0a, #ff375f);
+      }
+
+      .icon-music {
+        background: linear-gradient(135deg, #ff2d55, #5856d6);
+      }
+
+      .icon-bank {
+        background: linear-gradient(135deg, #111111, #8e8e93);
+      }
+
+      .icon-map {
+        background: linear-gradient(135deg, #34c759, #ffd60a);
+      }
+
+      .icon-vpn {
+        background:
+          radial-gradient(circle at 72% 16%, rgba(255, 255, 255, 0.62) 0 12%, transparent 13%),
+          linear-gradient(145deg, #101828 0%, #007aff 64%, #34c759 100%);
+      }
+
+      .icon-vpn::before {
+        content: "";
+        position: absolute;
+        left: 21px;
+        top: 16px;
+        width: 30px;
+        height: 38px;
+        border-radius: 16px 16px 18px 18px;
+        background: rgba(255, 255, 255, 0.94);
+        clip-path: polygon(50% 0, 88% 13%, 88% 46%, 50% 100%, 12% 46%, 12% 13%);
+      }
+
+      .icon-vpn::after {
+        content: "";
+        position: absolute;
+        left: 31px;
+        top: 29px;
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        background: #007aff;
+      }
+
+      .row-copy {
+        min-width: 0;
+      }
+
+      .row-title {
+        color: #111111;
+        font-size: 18px;
+        line-height: 1.24;
+        font-weight: 800;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .row-sub {
+        margin-top: 4px;
+        color: #6e6e73;
+        font-size: 12px;
+        line-height: 1.28;
+        font-weight: 600;
+      }
+
+      .stars {
+        margin-top: 6px;
+        color: #8e8e93;
+        font-size: 12px;
+        line-height: 1.25;
+        font-weight: 800;
+      }
+
+      .get-button,
+      .install-button,
+      .open-button {
+        display: grid;
+        place-items: center;
+        height: 34px;
+        border-radius: 999px;
+        font-size: 14px;
+        line-height: 1;
+        font-weight: 900;
+        letter-spacing: 0;
+      }
+
+      .get-button,
+      .open-button {
+        width: 72px;
+        color: #007aff;
+        background: #ececf1;
+      }
+
+      #vpn-row {
+        position: relative;
+        transform-origin: center;
+        outline: 0 solid rgba(0, 122, 255, 0);
+      }
+
+      .tap-dot {
+        position: absolute;
+        right: 47px;
+        top: 52px;
+        width: 42px;
+        height: 42px;
+        border-radius: 50%;
+        border: 4px solid rgba(0, 122, 255, 0.8);
+        background: rgba(0, 122, 255, 0.18);
+        opacity: 0;
+        z-index: 9;
+      }
+
+      .detail-view {
+        padding: 78px 24px 26px;
+        background: #f5f5f7;
+        opacity: 0;
+        z-index: 8;
+      }
+
+      .detail-card {
+        height: 100%;
+        border-radius: 36px;
+        padding: 28px 22px 24px;
+        background: #ffffff;
+        box-shadow: 0 26px 70px rgba(17, 17, 17, 0.12);
+        overflow: hidden;
+      }
+
+      .detail-hero {
+        display: grid;
+        grid-template-columns: 108px 1fr;
+        gap: 16px;
+        align-items: center;
+      }
+
+      .detail-icon {
+        width: 108px;
+        height: 108px;
+        border-radius: 26px;
+      }
+
+      .detail-title {
+        font-size: 31px;
+        line-height: 1;
+        font-weight: 900;
+      }
+
+      .detail-sub {
+        margin-top: 7px;
+        color: #6e6e73;
+        font-size: 14px;
+        line-height: 1.2;
+        font-weight: 700;
+      }
+
+      .install-button {
+        position: relative;
+        width: 94px;
+        margin-top: 15px;
+        color: #ffffff;
+        background: #007aff;
+        overflow: hidden;
+      }
+
+      .install-label,
+      .open-label,
+      .ring {
+        position: absolute;
+      }
+
+      .install-label,
+      .open-label {
+        inset: 0;
+        display: grid;
+        place-items: center;
+      }
+
+      .open-label,
+      .ring {
+        opacity: 0;
+      }
+
+      .ring {
+        inset: 4px auto auto 34px;
+        width: 26px;
+        height: 26px;
+        transform: rotate(-90deg);
+      }
+
+      .ring .track {
+        fill: none;
+        stroke: rgba(255, 255, 255, 0.36);
+        stroke-width: 4;
+      }
+
+      .ring .progress {
+        fill: none;
+        stroke: #ffffff;
+        stroke-width: 4;
+        stroke-linecap: round;
+        stroke-dasharray: 69;
+        stroke-dashoffset: 69;
+      }
+
+      .stats {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 8px;
+        margin: 26px 0;
+      }
+
+      .stat {
+        min-height: 72px;
+        border-radius: 22px;
+        padding: 12px 8px;
+        background: #f5f5f7;
+        text-align: center;
+      }
+
+      .stat-label {
+        color: #8e8e93;
+        font-size: 11px;
+        font-weight: 800;
+      }
+
+      .stat-value {
+        margin-top: 7px;
+        color: #111111;
+        font-size: 22px;
+        line-height: 1;
+        font-weight: 900;
+      }
+
+      .progress-panel {
+        position: relative;
+        display: grid;
+        place-items: center;
+        height: 260px;
+        border-radius: 34px;
+        background:
+          radial-gradient(circle at 50% 40%, rgba(0, 122, 255, 0.12), transparent 48%), #f5f5f7;
+        overflow: hidden;
+      }
+
+      .progress-halo {
+        position: absolute;
+        width: 196px;
+        height: 196px;
+        border-radius: 50%;
+        border: 24px solid rgba(0, 122, 255, 0.1);
+      }
+
+      .progress-big {
+        width: 190px;
+        height: 190px;
+        transform: rotate(-90deg);
+      }
+
+      .big-track,
+      .big-progress {
+        fill: none;
+        stroke-width: 18;
+      }
+
+      .big-track {
+        stroke: rgba(0, 122, 255, 0.12);
+      }
+
+      .big-progress {
+        stroke: #007aff;
+        stroke-linecap: round;
+        stroke-dasharray: 440;
+        stroke-dashoffset: 440;
+      }
+
+      .percent {
+        position: absolute;
+        color: #111111;
+        font-size: 48px;
+        line-height: 1;
+        font-weight: 900;
+      }
+
+      .shield-status {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 10px;
+        margin-top: 18px;
+        color: #34c759;
+        font-size: 20px;
+        font-weight: 900;
+        opacity: 0;
+      }
+
+      .check {
+        width: 30px;
+        height: 30px;
+        border-radius: 50%;
+        display: grid;
+        place-items: center;
+        color: #ffffff;
+        background: #34c759;
+      }
+
+      .speed-lines {
+        position: absolute;
+        inset: 0;
+        opacity: 0;
+        z-index: 20;
+        pointer-events: none;
+      }
+
+      .speed-lines i {
+        position: absolute;
+        left: 50%;
+        width: 4px;
+        height: 210px;
+        border-radius: 999px;
+        background: rgba(17, 17, 17, 0.18);
+        transform: translateX(-50%);
+      }
+
+      .speed-lines i:nth-child(1) {
+        top: 70px;
+        margin-left: -310px;
+      }
+
+      .speed-lines i:nth-child(2) {
+        top: 130px;
+        margin-left: 304px;
+        height: 240px;
+      }
+
+      .speed-lines i:nth-child(3) {
+        top: 260px;
+        margin-left: -232px;
+        height: 300px;
+      }
+
+      .speed-lines i:nth-child(4) {
+        top: 220px;
+        margin-left: 228px;
+        height: 320px;
+      }
+
+      .white-wipe {
+        background: #ffffff;
+        opacity: 0;
+        z-index: 40;
+        pointer-events: none;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="vpn-youtube-spot"
+      data-start="0"
+      data-duration="7"
+      data-width="1920"
+      data-height="1080"
+    >
+      <audio
+        id="sfx"
+        data-start="0"
+        data-duration="7"
+        data-track-index="1"
+        src="assets/vpn-sfx.wav"
+        data-volume="0.95"
+      ></audio>
+
+      <div class="stage">
+        <div class="headline" id="stageHeadline">
+          <span>PRIVATE</span>
+          <span class="blue">SIMPLY</span>
+          <div class="sub">A calmer way to browse.</div>
+        </div>
+        <div class="ambient-word">SAFE</div>
+        <div class="ambient-line line-a"></div>
+        <div class="ambient-line line-b"></div>
+        <div class="snap-shadow"></div>
+
+        <div class="phone">
+          <div class="screen">
+            <div class="island"></div>
+
+            <section class="store-view">
+              <div class="store-top">
+                <div class="store-title">Search</div>
+                <div class="avatar"></div>
+              </div>
+              <div class="search-pill">
+                <div class="search-icon"></div>
+                <div>privacy apps</div>
+              </div>
+              <div class="screen-window" data-layout-allow-overflow>
+                <div class="scroll-content">
+                  <div class="store-row">
+                    <div class="app-icon icon-cloud"></div>
+                    <div class="row-copy">
+                      <div class="row-title">CloudPocket</div>
+                      <div class="row-sub">Files and backups</div>
+                      <div class="stars">4.6 ★★★★★</div>
+                    </div>
+                    <div class="get-button">GET</div>
+                  </div>
+                  <div class="store-row">
+                    <div class="app-icon icon-photo"></div>
+                    <div class="row-copy">
+                      <div class="row-title">LensLab</div>
+                      <div class="row-sub">Photo editor</div>
+                      <div class="stars">4.8 ★★★★★</div>
+                    </div>
+                    <div class="get-button">GET</div>
+                  </div>
+                  <div class="store-row">
+                    <div class="app-icon icon-music"></div>
+                    <div class="row-copy">
+                      <div class="row-title">BeatShelf</div>
+                      <div class="row-sub">Music discovery</div>
+                      <div class="stars">4.4 ★★★★☆</div>
+                    </div>
+                    <div class="get-button">GET</div>
+                  </div>
+                  <div class="store-row">
+                    <div class="app-icon icon-bank"></div>
+                    <div class="row-copy">
+                      <div class="row-title">VaultPay</div>
+                      <div class="row-sub">Budget tracker</div>
+                      <div class="stars">4.7 ★★★★★</div>
+                    </div>
+                    <div class="get-button">GET</div>
+                  </div>
+                  <div class="store-row">
+                    <div class="app-icon icon-map"></div>
+                    <div class="row-copy">
+                      <div class="row-title">TrailPing</div>
+                      <div class="row-sub">Maps for trips</div>
+                      <div class="stars">4.5 ★★★★☆</div>
+                    </div>
+                    <div class="get-button">GET</div>
+                  </div>
+                  <div class="store-row" id="vpn-row">
+                    <div class="app-icon icon-vpn"></div>
+                    <div class="row-copy">
+                      <div class="row-title">VPN</div>
+                      <div class="row-sub">Simple private browsing</div>
+                      <div class="stars">4.9 ★★★★★</div>
+                    </div>
+                    <div class="get-button">GET</div>
+                    <div class="tap-dot"></div>
+                  </div>
+                  <div class="store-row">
+                    <div class="app-icon icon-cloud"></div>
+                    <div class="row-copy">
+                      <div class="row-title">QuickTunnel</div>
+                      <div class="row-sub">Network tools</div>
+                      <div class="stars">4.2 ★★★★☆</div>
+                    </div>
+                    <div class="get-button">GET</div>
+                  </div>
+                  <div class="store-row">
+                    <div class="app-icon icon-photo"></div>
+                    <div class="row-copy">
+                      <div class="row-title">PrivateFrame</div>
+                      <div class="row-sub">Photo lockers</div>
+                      <div class="stars">4.3 ★★★★☆</div>
+                    </div>
+                    <div class="get-button">GET</div>
+                  </div>
+                </div>
+              </div>
+            </section>
+
+            <section class="detail-view">
+              <div class="detail-card">
+                <div class="detail-hero">
+                  <div class="app-icon icon-vpn detail-icon"></div>
+                  <div>
+                    <div class="detail-title">VPN</div>
+                    <div class="detail-sub">Friendly privacy for everyday browsing.</div>
+                    <div class="install-button">
+                      <span class="install-label">GET</span>
+                      <svg class="ring" viewBox="0 0 28 28" aria-hidden="true">
+                        <circle class="track" cx="14" cy="14" r="11"></circle>
+                        <circle class="progress" cx="14" cy="14" r="11"></circle>
+                      </svg>
+                      <span class="open-label"></span>
+                    </div>
+                  </div>
+                </div>
+
+                <div class="stats">
+                  <div class="stat">
+                    <div class="stat-label">RATING</div>
+                    <div class="stat-value">4.9</div>
+                  </div>
+                  <div class="stat">
+                    <div class="stat-label">SPEED</div>
+                    <div class="stat-value">Fast</div>
+                  </div>
+                  <div class="stat">
+                    <div class="stat-label">AGE</div>
+                    <div class="stat-value">4+</div>
+                  </div>
+                </div>
+
+                <div class="progress-panel">
+                  <div class="progress-halo"></div>
+                  <svg class="progress-big" viewBox="0 0 160 160" aria-hidden="true">
+                    <circle class="big-track" cx="80" cy="80" r="70"></circle>
+                    <circle id="progressArc" class="big-progress" cx="80" cy="80" r="70"></circle>
+                  </svg>
+                  <div class="percent" id="progressText">0%</div>
+                </div>
+                <div class="shield-status">
+                  <div class="check">✓</div>
+                  <div>Ready to browse</div>
+                </div>
+              </div>
+            </section>
+          </div>
+        </div>
+      </div>
+
+      <div class="speed-lines">
+        <i></i>
+        <i></i>
+        <i></i>
+        <i></i>
+      </div>
+      <div class="white-wipe"></div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      gsap.defaults({ force3D: true });
+
+      const tl = gsap.timeline({
+        paused: true,
+        defaults: { duration: 0.45, ease: "power3.out" },
+      });
+
+      const breatheRepeats = Math.ceil(7 / 2.4) - 1;
+
+      tl.from(
+        ".headline span",
+        { y: 46, opacity: 0, stagger: 0.055, duration: 0.38, ease: "back.out(1.35)" },
+        0.05,
+      )
+        .from(".headline .sub", { y: 20, opacity: 0, duration: 0.28 }, 0.2)
+        .from(".ambient-word", { scale: 0.92, opacity: 0, duration: 0.5 }, 0.08)
+        .from(".ambient-line", { scaleX: 0, opacity: 0, stagger: 0.08, duration: 0.42 }, 0.16)
+        .to(
+          ".ambient-line",
+          {
+            scaleX: 1.08,
+            opacity: 0.55,
+            duration: 2.4,
+            yoyo: true,
+            repeat: breatheRepeats,
+            ease: "sine.inOut",
+          },
+          0.55,
+        )
+        .from(
+          ".phone",
+          {
+            y: 760,
+            scale: 0.82,
+            rotation: -2.5,
+            opacity: 0,
+            duration: 0.47,
+            ease: "back.out(1.6)",
+          },
+          0,
+        )
+        .from(".store-title", { y: 26, opacity: 0, duration: 0.28 }, 0.28)
+        .from(".avatar", { scale: 0.4, opacity: 0, duration: 0.24, ease: "back.out(1.8)" }, 0.34)
+        .from(".search-pill", { y: 18, opacity: 0, duration: 0.26 }, 0.4)
+        .from(
+          ".store-row",
+          { y: 44, opacity: 0, stagger: 0.035, duration: 0.36, ease: "power3.out" },
+          0.48,
+        );
+
+      tl.to(".scroll-content", { y: -456, duration: 1.2, ease: "power4.out" }, 0.62)
+        .to(
+          ".screen-window",
+          { scale: 1.012, duration: 0.18, yoyo: true, repeat: 1, ease: "power2.out" },
+          0.92,
+        )
+        .to(
+          ".screen-window",
+          { scale: 1.014, duration: 0.14, yoyo: true, repeat: 1, ease: "power2.out" },
+          1.25,
+        )
+        .to(
+          "#vpn-row",
+          {
+            scale: 1.035,
+            outlineWidth: 3,
+            outlineColor: "rgba(0,122,255,0.34)",
+            duration: 0.2,
+            ease: "back.out(1.7)",
+          },
+          1.72,
+        )
+        .to("#vpn-row", { scale: 1, duration: 0.22 }, 1.93)
+        .fromTo(
+          ".tap-dot",
+          { scale: 0.25, opacity: 0.95 },
+          { scale: 2.15, opacity: 0, duration: 0.42, ease: "power2.out" },
+          2.02,
+        )
+        .to("#vpn-row .get-button", { scale: 0.82, duration: 0.1, ease: "power3.in" }, 2.04)
+        .to("#vpn-row .get-button", { scale: 1, duration: 0.14, ease: "back.out(2)" }, 2.14);
+
+      tl.fromTo(
+        ".detail-view",
+        { y: 620, scale: 0.92, opacity: 0 },
+        { y: 0, scale: 1, opacity: 1, duration: 0.46, ease: "power4.out" },
+        2.32,
+      )
+        .from(".detail-card", { y: 56, scale: 0.96, duration: 0.42, ease: "back.out(1.2)" }, 2.34)
+        .from(
+          ".detail-icon",
+          { scale: 0.55, rotation: -8, opacity: 0, duration: 0.32, ease: "back.out(1.8)" },
+          2.47,
+        )
+        .from(".detail-title", { y: 20, opacity: 0, duration: 0.28 }, 2.54)
+        .from(".detail-sub", { y: 14, opacity: 0, duration: 0.24 }, 2.6)
+        .from(
+          ".install-button",
+          { scale: 0.72, opacity: 0, duration: 0.24, ease: "back.out(2)" },
+          2.66,
+        )
+        .from(".stat", { y: 28, opacity: 0, stagger: 0.05, duration: 0.3 }, 2.78)
+        .from(".progress-panel", { y: 42, scale: 0.96, opacity: 0, duration: 0.38 }, 2.92);
+
+      tl.to(".install-label", { y: -18, opacity: 0, duration: 0.16 }, 2.86)
+        .set(".install-label", { textContent: "" }, 3.02)
+        .to(".ring", { opacity: 1, duration: 0.16 }, 2.96)
+        .fromTo(
+          ".ring .progress",
+          { strokeDashoffset: 69 },
+          { strokeDashoffset: 0, duration: 1.2, ease: "power2.inOut" },
+          3.04,
+        )
+        .fromTo(
+          "#progressArc",
+          { strokeDashoffset: 440 },
+          { strokeDashoffset: 0, duration: 1.42, ease: "power2.inOut" },
+          3.02,
+        )
+        .set("#progressText", { textContent: "18%" }, 3.18)
+        .to(".progress-panel", { scale: 1.025, duration: 0.12, yoyo: true, repeat: 1 }, 3.18)
+        .set("#progressText", { textContent: "52%" }, 3.56)
+        .to(".progress-panel", { scale: 1.03, duration: 0.12, yoyo: true, repeat: 1 }, 3.56)
+        .set("#progressText", { textContent: "87%" }, 3.9)
+        .to(".progress-panel", { scale: 1.035, duration: 0.12, yoyo: true, repeat: 1 }, 3.9)
+        .set("#progressText", { textContent: "100%" }, 4.28)
+        .to(
+          ".progress-panel",
+          { scale: 1.04, duration: 0.12, yoyo: true, repeat: 1, ease: "back.out(1.7)" },
+          4.28,
+        )
+        .to(".ring", { scale: 0.35, opacity: 0, duration: 0.16 }, 4.44)
+        .to(".install-button", { backgroundColor: "#34c759", width: 94, duration: 0.18 }, 4.5)
+        .set(".open-label", { textContent: "OPEN" }, 4.52)
+        .to(".open-label", { opacity: 1, duration: 0.16 }, 4.56)
+        .fromTo(
+          ".shield-status",
+          { y: 22, scale: 0.9, opacity: 0 },
+          { y: 0, scale: 1, opacity: 1, duration: 0.34, ease: "back.out(1.8)" },
+          4.62,
+        )
+        .to(
+          ".phone",
+          { scale: 1.025, duration: 0.18, yoyo: true, repeat: 1, ease: "back.out(1.5)" },
+          4.7,
+        );
+
+      tl.to(".headline", { y: -18, opacity: 0.35, duration: 0.22 }, 5.18)
+        .to(".ambient-word", { opacity: 0.018, duration: 0.22 }, 5.18)
+        .to(".snap-shadow", { opacity: 1, scaleX: 0.8, duration: 0.16 }, 5.35)
+        .fromTo(
+          ".speed-lines",
+          { y: -220, opacity: 0 },
+          { y: 420, opacity: 1, duration: 0.26, ease: "power4.in" },
+          5.42,
+        )
+        .to(
+          ".phone",
+          { y: 1050, scale: 0.78, rotation: -3.5, duration: 0.48, ease: "power4.in" },
+          5.44,
+        )
+        .to(".snap-shadow", { opacity: 0, scaleX: 1.6, duration: 0.28 }, 5.62)
+        .to(".speed-lines", { opacity: 0, duration: 0.2 }, 5.74)
+        .to(".white-wipe", { opacity: 1, duration: 0.42, ease: "power2.out" }, 5.86);
+
+      window.__timelines["vpn-youtube-spot"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/weight-wave/__hf-variables-preview.html b/docs/public/catalog/blocks/weight-wave/__hf-variables-preview.html
new file mode 100644
index 0000000000..0838cecf23
--- /dev/null
+++ b/docs/public/catalog/blocks/weight-wave/__hf-variables-preview.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Weight Wave variables preview</title>
+    <style>
+      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: transparent; }
+      #hf-vars-root { position: relative; width: 1920px; height: 1080px; }
+      #hf-vars-mount { position: absolute; inset: 0; display: grid; place-items: center; }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  </head>
+  <body>
+    <div id="hf-vars-root" data-composition-id="weight-wave-variables-preview" data-start="0" data-width="1920" data-height="1080" data-duration="6" data-fps="30">
+      <div id="hf-vars-mount" class="clip" data-composition-id="weight-wave" data-composition-src="./weight-wave.html" data-start="0" data-duration="6" data-track-index="0" data-width="1920" data-height="1080"></div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["weight-wave-variables-preview"] = gsap.timeline({ paused: true });
+    </script>
+<script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "weight-wave.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/weight-wave/assets/fonts/OFL.txt b/docs/public/catalog/blocks/weight-wave/assets/fonts/OFL.txt
new file mode 100644
index 0000000000..d4361a99fe
--- /dev/null
+++ b/docs/public/catalog/blocks/weight-wave/assets/fonts/OFL.txt
@@ -0,0 +1,93 @@
+Copyright 2020 The Recursive Project Authors (https://github.com/arrowtype/recursive)
+
+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/docs/public/catalog/blocks/weight-wave/assets/fonts/Recursive-wght-slnt-latin.woff2 b/docs/public/catalog/blocks/weight-wave/assets/fonts/Recursive-wght-slnt-latin.woff2
new file mode 100644
index 0000000000..f7205e9b80
Binary files /dev/null and b/docs/public/catalog/blocks/weight-wave/assets/fonts/Recursive-wght-slnt-latin.woff2 differ
diff --git a/docs/public/catalog/blocks/weight-wave/weight-wave.html b/docs/public/catalog/blocks/weight-wave/weight-wave.html
new file mode 100644
index 0000000000..bd41c2bcb0
--- /dev/null
+++ b/docs/public/catalog/blocks/weight-wave/weight-wave.html
@@ -0,0 +1,315 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Weight Wave</title>
+    <style>
+      /*
+        Real variable font, bundled locally — a CDN fetch would be a render-time
+        network dependency, and a STATIC font would silently render every
+        character at one weight (the whole effect vanishes while nothing errors).
+        Subset of Recursive (SIL OFL 1.1) with every axis pinned except the two
+        this block drives. Ranges below are the font's REAL fvar records, read
+        out of the binary: wght 300..1000 (not 100..900) and slnt -15..0. The
+        pinned three are MONO 0 (proportional sans, not the monospace face),
+        CASL 0 (linear/neutral, not casual) and CRSV 0 (roman letterforms —
+        Recursive's 0.5 default swaps in cursive singlestorey forms as soon as
+        slnt goes negative, which would pop mid-wave instead of interpolating).
+      */
+      @font-face {
+        font-family: "Recursive Wave";
+        font-style: normal;
+        font-weight: 300 1000;
+        font-display: block;
+        src: url("assets/fonts/Recursive-wght-slnt-latin.woff2") format("woff2");
+      }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      body {
+        width: 1920px;
+        height: 1080px;
+      }
+
+      #ww-root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+
+      /* Full-bleed fill lives on a CHILD: the producer can drop a background
+         painted on the composition root itself (frame renders black). */
+      #ww-bg {
+        position: absolute;
+        inset: 0;
+        background: var(--background, #0b0b0d);
+      }
+
+      #ww-stage {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      #ww-line {
+        display: block;
+        width: 1760px;
+        text-align: center;
+        white-space: pre;
+        font-family: "Recursive Wave", sans-serif;
+        font-size: 132px;
+        line-height: 1.15;
+        letter-spacing: 0.005em;
+        color: var(--color, #f5f5f7);
+        /* Default instance: the resting end of the wave. If the variable font
+           fails to load, every glyph stays here and the probe below shouts. */
+        font-variation-settings:
+          "wght" 400,
+          "slnt" 0;
+      }
+
+      /* Per-character axis stamping target: no transform, no opacity — the
+         letterforms themselves change. */
+      .ww-ch {
+        display: inline-block;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="ww-root"
+      data-composition-id="weight-wave"
+      data-start="0"
+      data-duration="6"
+      data-width="1920"
+      data-height="1080"
+      data-composition-variables='[
+        {"id":"text","type":"string","label":"Headline","default":"PRESSURE MOVES THROUGH TYPE","maxLength":64},
+        {"id":"color","type":"color","label":"Text color","default":"#f5f5f7"},
+        {"id":"background","type":"color","label":"Background","default":"#0b0b0d"},
+        {"id":"weightFrom","type":"number","label":"Weight (rest)","default":400,"min":300,"max":1000,"step":10},
+        {"id":"weightTo","type":"number","label":"Weight (crest)","default":1000,"min":300,"max":1000,"step":10},
+        {"id":"crestWidth","type":"number","label":"Crest width","default":4,"min":1,"max":24,"step":0.5,"unit":"chars"},
+        {"id":"sweepSpeed","type":"number","label":"Sweep speed","default":0.5,"min":0.05,"max":3,"step":0.05,"unit":"passes/s"},
+        {"id":"slant","type":"number","label":"Slant at crest","default":-12,"min":-15,"max":0,"step":0.5,"unit":"deg"},
+        {"id":"direction","type":"enum","label":"Direction","default":"ltr","options":[{"value":"ltr","label":"Left to right"},{"value":"rtl","label":"Right to left"}]}
+      ]'
+    >
+      <div id="ww-bg"></div>
+
+      <div id="ww-stage" class="clip" data-start="0" data-duration="6" data-track-index="0">
+        <div id="ww-line"></div>
+      </div>
+
+      <script>
+        (function () {
+          window.__timelines = window.__timelines || {};
+
+          var FONT_FAMILY = '"Recursive Wave", sans-serif';
+          /* The bundled font's real fvar bounds — declared once here, and
+             mirrored in the variable min/max above. A slider must not offer a
+             weight the font cannot render. */
+          var WGHT_MIN = 300;
+          var WGHT_MAX = 1000;
+          var SLNT_MIN = -15;
+          var LINE_MAX_WIDTH = 1760;
+          var BASE_FONT_SIZE = 132;
+          var MIN_FONT_SIZE = 40;
+
+          var root = document.getElementById("ww-root");
+          var line = document.getElementById("ww-line");
+          var duration = Number(root.getAttribute("data-duration")) || 6;
+
+          var vars =
+            window.__hyperframes && window.__hyperframes.getVariables
+              ? window.__hyperframes.getVariables()
+              : {};
+
+          function num(value, fallback, min, max) {
+            var n = Number(value);
+            if (!Number.isFinite(n)) n = fallback;
+            return Math.min(max, Math.max(min, n));
+          }
+
+          var TEXT =
+            typeof vars.text === "string" && vars.text.length
+              ? vars.text
+              : "PRESSURE MOVES THROUGH TYPE";
+          var W_FROM = num(vars.weightFrom, 400, WGHT_MIN, WGHT_MAX);
+          var W_TO = num(vars.weightTo, 1000, WGHT_MIN, WGHT_MAX);
+          var CREST = num(vars.crestWidth, 4, 1, 24);
+          var SPEED = num(vars.sweepSpeed, 0.5, 0.05, 3);
+          var SLANT = num(vars.slant, -12, SLNT_MIN, 0);
+          var RTL = vars.direction === "rtl";
+
+          /* ── Build one span per character ─────────────────────────────────
+             Spaces get a span too, so the crest travels at a constant rate in
+             index space and the visual gap between words is honoured. */
+          var chars = Array.prototype.slice.call(TEXT);
+          var spans = chars.map(function (ch) {
+            var el = document.createElement("span");
+            el.className = "ww-ch";
+            el.textContent = ch;
+            line.appendChild(el);
+            return el;
+          });
+          var N = spans.length;
+
+          /* Fit at the HEAVIEST instance so the line never overflows mid-sweep;
+             the crest widens glyphs as it passes. */
+          var fitCanvas = document.createElement("canvas").getContext("2d");
+          var heaviest = Math.max(W_FROM, W_TO);
+          var fontSize = BASE_FONT_SIZE;
+          while (fontSize > MIN_FONT_SIZE) {
+            fitCanvas.font = heaviest + " " + fontSize + "px " + FONT_FAMILY;
+            if (fitCanvas.measureText(TEXT).width <= LINE_MAX_WIDTH) break;
+            fontSize -= 2;
+          }
+          line.style.fontSize = fontSize + "px";
+
+          /* ── The wave ─────────────────────────────────────────────────────
+             Closed form, no accumulators: every frame's state is a pure
+             function of the timeline position p, so a direct seek to frame N
+             and playing through to frame N produce identical pixels.
+
+               crest(p) = -CREST + wrap(p * duration * SPEED) * (N - 1 + 2*CREST)
+               f_i      = clamp(0, 1, 1 - |i - crest| / CREST)
+               wght_i   = round(lerp(W_FROM, W_TO, f_i))
+               slnt_i   = lerp(0, SLANT, f_i)
+
+             Per-character stagger is not a separate mechanism — it falls out of
+             the crest's distance to each index. */
+          var state = { p: 0 };
+          var travel = N - 1 + 2 * CREST;
+
+          function paint() {
+            var pass = state.p * duration * SPEED;
+            var phase = pass - Math.floor(pass); // wraps cleanly: f_i == 0 at both ends
+            var crest = -CREST + phase * travel;
+            if (RTL) crest = N - 1 - crest;
+            for (var i = 0; i < N; i++) {
+              var f = 1 - Math.abs(i - crest) / CREST;
+              if (f < 0) f = 0;
+              else if (f > 1) f = 1;
+              var wght = Math.round(W_FROM + (W_TO - W_FROM) * f);
+              var slnt = SLANT * f;
+              spans[i].style.fontVariationSettings =
+                '"wght" ' + wght + ', "slnt" ' + slnt.toFixed(2);
+            }
+          }
+
+          var tl = gsap.timeline({ paused: true });
+          tl.to(state, { p: 1, duration: duration, ease: "none", onUpdate: paint }, 0);
+          paint();
+          window.__timelines["weight-wave"] = tl;
+
+          /* ── The trap, made loud ──────────────────────────────────────────
+             A static font (or a failed load) renders every character at one
+             weight: the effect is invisible and nothing throws.
+
+             Measuring advance width does NOT detect that here. Recursive is
+             DUPLEXED — "HAMBURGEFONSTIV" measures exactly 925px at wght 300 and
+             at wght 1000, and identically at slnt 0 and -15. (Nice for layout:
+             the headline never reflows as the crest passes. Fatal for a
+             width-delta probe, which reads every weight as identical and cries
+             wolf on a perfectly healthy font.)
+
+             So rasterize and count ink, which cannot be duplexed away, AND ask
+             the font-loading API whether the family is actually there. Both are
+             needed: ink alone gives a false PASS when the family is missing,
+             because the fallback varies its ink with weight too. */
+          function probeAxes() {
+            var family = "Recursive Wave";
+            var loaded = !!(document.fonts && document.fonts.check('100px "' + family + '"'));
+            var c = document.createElement("canvas");
+            c.width = 1000;
+            c.height = 160;
+            var ctx = c.getContext("2d", { willReadFrequently: true });
+            function ink(weight) {
+              ctx.clearRect(0, 0, c.width, c.height);
+              ctx.font = weight + ' 100px "' + family + '"';
+              ctx.fillStyle = "#fff";
+              ctx.fillText("HAMBURGEFONSTIV", 10, 120);
+              var data = ctx.getImageData(0, 0, c.width, c.height).data;
+              var n = 0;
+              for (var i = 3; i < data.length; i += 4) if (data[i] > 8) n++;
+              return n;
+            }
+            var light = ink(WGHT_MIN);
+            var black = ink(WGHT_MAX);
+            // Only wght is probed: it is the axis whose absence is measurable
+            // from JS, and both axes ship in the same file — if wght is live,
+            // the variable font loaded. slnt is verified visually.
+            return {
+              fontLoaded: loaded,
+              wghtLive: black > light * 1.2,
+              inkAtMinWeight: light,
+              inkAtMaxWeight: black,
+            };
+          }
+
+          function publishProbe() {
+            var status = probeAxes();
+            status.ok = status.fontLoaded && status.wghtLive;
+            window.__WW_FONT_STATUS = status;
+            root.setAttribute("data-ww-font", status.ok ? "ok" : "missing-axes");
+            if (!status.ok) {
+              console.error(
+                "weight-wave: the variable font is not usable (loaded=" +
+                  status.fontLoaded +
+                  ", ink at wght " +
+                  WGHT_MIN +
+                  "=" +
+                  status.inkAtMinWeight +
+                  " vs " +
+                  WGHT_MAX +
+                  "=" +
+                  status.inkAtMaxWeight +
+                  "). assets/fonts/Recursive-wght-slnt-latin.woff2 did not load, or was " +
+                  "replaced with a static font — every character will render at one weight.",
+              );
+            }
+          }
+
+          if (document.fonts && document.fonts.ready) {
+            document.fonts.ready.then(publishProbe);
+          } else {
+            publishProbe();
+          }
+        })();
+      </script>
+    </div>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "weight-wave.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/blocks/whip-pan/whip-pan.html b/docs/public/catalog/blocks/whip-pan/whip-pan.html
new file mode 100644
index 0000000000..d1ea5aa1c0
--- /dev/null
+++ b/docs/public/catalog/blocks/whip-pan/whip-pan.html
@@ -0,0 +1,366 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      @import url("https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Bebas+Neue&family=JetBrains+Mono:wght@400;700&family=Lato:wght@400;700&display=block");
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <style>
+        [data-composition-id="main"] {
+          width: 1920px;
+          height: 1080px;
+          overflow: hidden;
+          position: relative;
+          background: #0b132b;
+        }
+
+        /* Blueprint grid */
+        .bp-grid {
+          position: absolute;
+          inset: 0;
+          background-image:
+            linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
+            linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
+          background-size: 40px 40px;
+          pointer-events: none;
+        }
+
+        /* Layout */
+        .bp-left {
+          position: absolute;
+          left: 0;
+          top: 0;
+          bottom: 0;
+          width: 1200px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .bp-right {
+          position: absolute;
+          right: 0;
+          top: 0;
+          bottom: 0;
+          width: 720px;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          padding: 60px 60px 60px 40px;
+        }
+        .bp-divider {
+          position: absolute;
+          left: 1200px;
+          top: 60px;
+          bottom: 60px;
+          width: 1px;
+          background: #48bfe3;
+          opacity: 0.15;
+        }
+        .bp-number {
+          font-family: "Space Mono", monospace;
+          font-size: 14px;
+          font-weight: 700;
+          letter-spacing: 0.4em;
+          text-transform: uppercase;
+          position: absolute;
+          top: 40px;
+          left: 60px;
+          color: #48bfe3;
+        }
+
+        /* Right panel typography */
+        .bp-name {
+          font-family: "Bebas Neue", sans-serif;
+          font-size: 38px;
+          letter-spacing: 0.08em;
+          margin-bottom: 20px;
+          color: #48bfe3;
+        }
+        .bp-plabel {
+          font-family: "Space Mono", monospace;
+          font-size: 11px;
+          font-weight: 700;
+          letter-spacing: 0.3em;
+          text-transform: uppercase;
+          margin-bottom: 10px;
+          color: #48bfe3;
+          opacity: 0.5;
+        }
+        .bp-prompt {
+          font-family: "JetBrains Mono", monospace;
+          font-size: 20px;
+          line-height: 1.6;
+          padding: 16px 20px;
+          border-radius: 6px;
+          margin-bottom: 20px;
+          color: #48bfe3;
+          background: rgba(72, 191, 227, 0.06);
+          border: 1px solid rgba(72, 191, 227, 0.12);
+        }
+        .bp-desc {
+          font-family: "Lato", sans-serif;
+          font-size: 17px;
+          line-height: 1.6;
+          color: #7a9ab0;
+          opacity: 0.55;
+        }
+
+        /* GL scenes (hidden, just for texture capture) */
+        .scene {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1200px;
+          height: 1080px;
+          overflow: hidden;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .scene-label {
+          font-family: "Bebas Neue", sans-serif;
+          font-size: 140px;
+          letter-spacing: 0.06em;
+          opacity: 0.12;
+        }
+      </style>
+
+      <div class="bp-grid"></div>
+      <div class="bp-divider"></div>
+      <div class="bp-number">03 / 14</div>
+
+      <!-- GL demo scenes (captured as textures, then hidden) -->
+      <div id="s1" class="scene" style="background: #0b132b">
+        <div class="scene-label" style="color: #48bfe3">SCENE A</div>
+      </div>
+      <div id="s2" class="scene" style="background: #48bfe3; opacity: 0">
+        <div class="scene-label" style="color: #0b132b">SCENE B</div>
+      </div>
+
+      <!-- GL canvas (left panel only) -->
+      <canvas
+        id="gl-canvas"
+        width="1200"
+        height="1080"
+        style="
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1200px;
+          height: 1080px;
+          z-index: 10;
+          pointer-events: none;
+          display: none;
+        "
+      >
+      </canvas>
+
+      <!-- Right panel metadata -->
+      <div class="bp-right">
+        <div class="bp-name">Whip Pan</div>
+        <div class="bp-plabel">Prompt</div>
+        <div class="bp-prompt">"use whip pan shader transition"</div>
+        <div class="bp-desc">
+          Both scenes slide horizontally with 10-sample directional motion blur simulating a fast
+          camera pan.
+        </div>
+      </div>
+
+      <div
+        id="driver"
+        class="clip"
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+      var glCanvas = document.getElementById("gl-canvas");
+      var gl = glCanvas.getContext("webgl", { preserveDrawingBuffer: true });
+      if (!gl) {
+        console.warn("WebGL not available");
+        window.__timelines["main"] = gsap.timeline({ paused: true });
+      } else {
+        gl.viewport(0, 0, 1200, 1080);
+        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
+        var sceneTextures = {};
+
+        function captureScene(sceneId) {
+          var scene = document.getElementById(sceneId);
+          var origOpacity = scene.style.opacity;
+          var origZ = scene.style.zIndex;
+          scene.style.opacity = "1";
+          scene.style.zIndex = "999";
+          scene.offsetHeight;
+          var c = document.createElement("canvas");
+          c.width = 1200;
+          c.height = 1080;
+          var ctx = c.getContext("2d");
+          ctx.fillStyle = window.getComputedStyle(scene).backgroundColor;
+          ctx.fillRect(0, 0, 1200, 1080);
+          var sr = scene.getBoundingClientRect();
+          var els = scene.querySelectorAll("*");
+          for (var i = 0; i < els.length; i++) {
+            var el = els[i],
+              cs = window.getComputedStyle(el);
+            if (cs.display === "none" || cs.visibility === "hidden") continue;
+            var r = el.getBoundingClientRect();
+            if (r.width < 1 || r.height < 1) continue;
+            var x = r.left - sr.left,
+              y = r.top - sr.top,
+              w = r.width,
+              h = r.height;
+            ctx.save();
+            ctx.globalAlpha = parseFloat(cs.opacity) || 1;
+            var bg = cs.backgroundColor;
+            if (bg && bg !== "rgba(0, 0, 0, 0)" && bg !== "transparent") {
+              ctx.fillStyle = bg;
+              ctx.fillRect(x, y, w, h);
+            }
+            var hasChildEls = el.querySelector("div,span,img,video");
+            var text = "";
+            for (var j = 0; j < el.childNodes.length; j++)
+              if (el.childNodes[j].nodeType === 3) text += el.childNodes[j].textContent;
+            text = text.trim();
+            if (text && !hasChildEls) {
+              ctx.font = cs.fontWeight + " " + cs.fontSize + " " + cs.fontFamily;
+              ctx.fillStyle = cs.color;
+              if (cs.letterSpacing && cs.letterSpacing !== "normal")
+                ctx.letterSpacing = cs.letterSpacing;
+              ctx.textAlign = "center";
+              ctx.textBaseline = "middle";
+              ctx.fillText(text, x + w / 2, y + h / 2);
+            }
+            ctx.restore();
+          }
+          scene.style.opacity = origOpacity;
+          scene.style.zIndex = origZ;
+          var tex = gl.createTexture();
+          gl.bindTexture(gl.TEXTURE_2D, tex);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+          gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, c);
+          sceneTextures[sceneId] = tex;
+        }
+
+        var vertSrc =
+          "attribute vec2 a_pos; varying vec2 v_uv; void main(){" +
+          "v_uv=a_pos*0.5+0.5; v_uv.y=1.0-v_uv.y; gl_Position=vec4(a_pos,0,1);}";
+        var quadBuf = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);
+        gl.bufferData(
+          gl.ARRAY_BUFFER,
+          new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),
+          gl.STATIC_DRAW,
+        );
+        function compileShader(src, type) {
+          var s = gl.createShader(type);
+          gl.shaderSource(s, src);
+          gl.compileShader(s);
+          if (!gl.getShaderParameter(s, gl.COMPILE_STATUS))
+            console.error("Shader:", gl.getShaderInfoLog(s));
+          return s;
+        }
+        function mkProg(fragSrc) {
+          var p = gl.createProgram();
+          gl.attachShader(p, compileShader(vertSrc, gl.VERTEX_SHADER));
+          gl.attachShader(p, compileShader(fragSrc, gl.FRAGMENT_SHADER));
+          gl.linkProgram(p);
+          if (!gl.getProgramParameter(p, gl.LINK_STATUS))
+            console.error("Link:", gl.getProgramInfoLog(p));
+          return p;
+        }
+
+        var H =
+          "precision mediump float;" +
+          "varying vec2 v_uv;" +
+          "uniform sampler2D u_from, u_to;" +
+          "uniform float u_progress;" +
+          "uniform vec2 u_resolution;\n";
+
+        var progPass = mkProg(H + "void main(){gl_FragColor=texture2D(u_from,v_uv);}");
+        var progTrans = mkProg(
+          H +
+            "void main(){float fromOff=u_progress*1.5;vec3 fromC=vec3(0.);for(int i=0;i<10;i++){float f=float(i)/10.;vec2 fuv=vec2(v_uv.x+fromOff+u_progress*.08*f,v_uv.y);fromC+=texture2D(u_from,clamp(fuv,0.,1.)).rgb;}fromC/=10.;float toOff=(1.-u_progress)*1.5;vec3 toC=vec3(0.);for(int i=0;i<10;i++){float f=float(i)/10.;vec2 tuv=vec2(v_uv.x-toOff-(1.-u_progress)*.08*f,v_uv.y);toC+=texture2D(u_to,clamp(tuv,0.,1.)).rgb;}toC/=10.;gl_FragColor=vec4(mix(fromC,toC,u_progress),1.);}",
+        );
+
+        function renderShader(prog, texFrom, texTo, progress) {
+          gl.useProgram(prog);
+          gl.activeTexture(gl.TEXTURE0);
+          gl.bindTexture(gl.TEXTURE_2D, texFrom);
+          gl.uniform1i(gl.getUniformLocation(prog, "u_from"), 0);
+          gl.activeTexture(gl.TEXTURE1);
+          gl.bindTexture(gl.TEXTURE_2D, texTo);
+          gl.uniform1i(gl.getUniformLocation(prog, "u_to"), 1);
+          gl.uniform1f(gl.getUniformLocation(prog, "u_progress"), progress);
+          gl.uniform2f(gl.getUniformLocation(prog, "u_resolution"), 1200, 1080);
+          var pos = gl.getAttribLocation(prog, "a_pos");
+          gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);
+          gl.enableVertexAttribArray(pos);
+          gl.vertexAttribPointer(pos, 2, gl.FLOAT, false, 0, 0);
+          gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+        }
+
+        function easeInOut(p) {
+          return p < 0.5 ? 2 * p * p : 1 - Math.pow(-2 * p + 2, 2) / 2;
+        }
+
+        captureScene("s1");
+        captureScene("s2");
+        glCanvas.style.display = "block";
+        renderShader(progPass, sceneTextures["s1"], sceneTextures["s1"], 0);
+        document.querySelectorAll(".scene").forEach(function (s) {
+          s.style.opacity = "0";
+        });
+
+        var tl = gsap.timeline({
+          paused: true,
+          onUpdate: function () {
+            var t = tl.time();
+            if (t >= 1.0 && t < 3.0) {
+              renderShader(
+                progTrans,
+                sceneTextures["s1"],
+                sceneTextures["s2"],
+                easeInOut((t - 1.0) / 2.0),
+              );
+            } else if (t >= 3.0) {
+              renderShader(progPass, sceneTextures["s2"], sceneTextures["s2"], 0);
+            } else {
+              renderShader(progPass, sceneTextures["s1"], sceneTextures["s1"], 0);
+            }
+          },
+        });
+        tl.to({ v: 0 }, { v: 1, duration: 4, ease: "none" }, 0);
+        window.__timelines["main"] = tl;
+      } // end if (gl)
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/world-map/world-map.html b/docs/public/catalog/blocks/world-map/world-map.html
new file mode 100644
index 0000000000..4e451c217b
--- /dev/null
+++ b/docs/public/catalog/blocks/world-map/world-map.html
@@ -0,0 +1,435 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>World Map</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=block"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/topojson-client@3.1.0/dist/topojson-client.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0f172a;
+      }
+
+      #world-map {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        background: linear-gradient(145deg, #0f172a 0%, #1e293b 100%);
+        font-family: "Inter", sans-serif;
+        color: #f0fdfa;
+        overflow: hidden;
+      }
+
+      #world-map .headline {
+        position: absolute;
+        top: 48px;
+        left: 80px;
+        font-size: 52px;
+        font-weight: 700;
+        letter-spacing: -0.02em;
+        color: #f0fdfa;
+        clip-path: inset(0 100% 0 0);
+      }
+
+      #world-map .subtitle {
+        position: absolute;
+        top: 114px;
+        left: 80px;
+        font-size: 22px;
+        font-weight: 300;
+        color: #94a3b8;
+        opacity: 0;
+      }
+
+      #world-map .map-container {
+        position: absolute;
+        top: 170px;
+        left: 80px;
+        width: 1380px;
+        height: 700px;
+      }
+
+      #world-map .map-container svg {
+        width: 1380px;
+        height: 700px;
+      }
+
+      #world-map .country-path {
+        stroke: #1e293b;
+        stroke-width: 0.6;
+        opacity: 0;
+        cursor: default;
+      }
+
+      #world-map .ocean {
+        fill: none;
+      }
+
+      #world-map .graticule {
+        fill: none;
+        stroke: #1e293b;
+        stroke-width: 0.3;
+        stroke-opacity: 0.4;
+      }
+
+      #world-map .legend-group {
+        position: absolute;
+        bottom: 80px;
+        right: 80px;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+        gap: 8px;
+        opacity: 0;
+      }
+
+      #world-map .legend-bar {
+        width: 280px;
+        height: 14px;
+        border-radius: 7px;
+      }
+
+      #world-map .legend-labels {
+        display: flex;
+        justify-content: space-between;
+        width: 280px;
+        font-size: 13px;
+        font-weight: 500;
+        color: #94a3b8;
+      }
+
+      #world-map .source {
+        position: absolute;
+        bottom: 36px;
+        left: 80px;
+        font-size: 13px;
+        font-weight: 400;
+        color: #475569;
+        opacity: 0;
+      }
+
+      #world-map .tooltip {
+        position: absolute;
+        pointer-events: none;
+        background: rgba(15, 23, 42, 0.92);
+        border: 1px solid #334155;
+        border-radius: 8px;
+        padding: 10px 16px;
+        font-size: 14px;
+        font-weight: 500;
+        color: #f0fdfa;
+        white-space: nowrap;
+        opacity: 0;
+        transform: translateY(4px);
+        backdrop-filter: blur(8px);
+        z-index: 10;
+      }
+
+      #world-map .tooltip .tt-value {
+        color: #22d3ee;
+        font-weight: 600;
+        margin-left: 6px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="world-map"
+      data-composition-id="world-map"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="14"
+    >
+      <h1 class="headline">Global GDP per Capita</h1>
+      <p class="subtitle">Nominal GDP per capita, 2024 IMF estimates</p>
+
+      <div class="map-container">
+        <svg id="world-map-svg"></svg>
+      </div>
+
+      <div class="legend-group">
+        <div
+          class="legend-bar"
+          style="
+            background: linear-gradient(90deg, #064e3b 0%, #0d9488 33%, #22d3ee 66%, #f0fdfa 100%);
+          "
+        ></div>
+        <div class="legend-labels">
+          <span>Low</span>
+          <span>High</span>
+        </div>
+      </div>
+
+      <p class="source">Source: International Monetary Fund</p>
+
+      <div class="tooltip"></div>
+    </div>
+
+    <script>
+      (function () {
+        /* ── GDP per capita data (2024 IMF estimates, USD) ── */
+        /* Keys are ISO 3166-1 numeric codes as strings (3-digit, zero-padded) */
+        var gdpData = {
+          840: { name: "United States", gdp: 85373 },
+          156: { name: "China", gdp: 13136 },
+          356: { name: "India", gdp: 2731 },
+          276: { name: "Germany", gdp: 54291 },
+          826: { name: "United Kingdom", gdp: 48913 },
+          250: { name: "France", gdp: 44408 },
+          392: { name: "Japan", gdp: 33950 },
+          "076": { name: "Brazil", gdp: 10412 },
+          "036": { name: "Australia", gdp: 65366 },
+          124: { name: "Canada", gdp: 54866 },
+          643: { name: "Russia", gdp: 14403 },
+          410: { name: "South Korea", gdp: 33147 },
+          484: { name: "Mexico", gdp: 13434 },
+          360: { name: "Indonesia", gdp: 5108 },
+          566: { name: "Nigeria", gdp: 1621 },
+          710: { name: "South Africa", gdp: 6190 },
+          818: { name: "Egypt", gdp: 4295 },
+          792: { name: "Turkey", gdp: 13110 },
+          682: { name: "Saudi Arabia", gdp: 32270 },
+          764: { name: "Thailand", gdp: 7647 },
+          704: { name: "Vietnam", gdp: 4623 },
+          616: { name: "Poland", gdp: 22393 },
+          752: { name: "Sweden", gdp: 59324 },
+          578: { name: "Norway", gdp: 94660 },
+          756: { name: "Switzerland", gdp: 105669 },
+          "032": { name: "Argentina", gdp: 13709 },
+          170: { name: "Colombia", gdp: 7230 },
+          404: { name: "Kenya", gdp: 2198 },
+          586: { name: "Pakistan", gdp: 1658 },
+          "050": { name: "Bangladesh", gdp: 2688 },
+        };
+
+        /* Top 5 GDP countries for highlight pulse */
+        var top5Codes = ["756", "578", "840", "036", "752"];
+
+        /* GDP range for color scale */
+        var gdpValues = [];
+        var codes = Object.keys(gdpData);
+        for (var i = 0; i < codes.length; i++) {
+          gdpValues.push(gdpData[codes[i]].gdp);
+        }
+        var minGdp = Math.min.apply(null, gdpValues);
+        var maxGdp = Math.max.apply(null, gdpValues);
+
+        /* Color interpolation: green → teal → cyan → white */
+        var colorStops = [
+          { r: 6, g: 78, b: 59 },
+          { r: 13, g: 148, b: 136 },
+          { r: 34, g: 211, b: 238 },
+          { r: 240, g: 253, b: 250 },
+        ];
+
+        function gdpToColor(value) {
+          var t = (value - minGdp) / (maxGdp - minGdp);
+          t = Math.max(0, Math.min(1, t));
+          var scaledT = t * (colorStops.length - 1);
+          var idx = Math.floor(scaledT);
+          if (idx >= colorStops.length - 1) idx = colorStops.length - 2;
+          var localT = scaledT - idx;
+          var c0 = colorStops[idx];
+          var c1 = colorStops[idx + 1];
+          var r = Math.round(c0.r + (c1.r - c0.r) * localT);
+          var g = Math.round(c0.g + (c1.g - c0.g) * localT);
+          var b = Math.round(c0.b + (c1.b - c0.b) * localT);
+          return "rgb(" + r + "," + g + "," + b + ")";
+        }
+
+        /* Default fill for countries without data */
+        var defaultFill = "#1e293b";
+
+        /* ── Build the map ── */
+        var svg = d3
+          .select("#world-map-svg")
+          .attr("viewBox", "0 0 1380 700")
+          .attr("preserveAspectRatio", "xMidYMid meet");
+
+        var projection = d3.geoNaturalEarth1().fitSize([1380, 700], { type: "Sphere" });
+
+        var pathGenerator = d3.geoPath().projection(projection);
+
+        /* Graticule */
+        var graticule = d3.geoGraticule10();
+        svg.append("path").datum(graticule).attr("class", "graticule").attr("d", pathGenerator);
+
+        /* Tooltip element */
+        var tooltipEl = document.querySelector("#world-map .tooltip");
+
+        /* Fetch topology and render countries */
+        d3.json("https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json").then(
+          function (world) {
+            var countries = topojson.feature(world, world.objects.countries).features;
+
+            svg
+              .selectAll(".country-path")
+              .data(countries)
+              .enter()
+              .append("path")
+              .attr("class", "country-path")
+              .attr("d", pathGenerator)
+              .attr("data-country", function (d) {
+                return String(d.id).padStart(3, "0");
+              })
+              .attr("fill", function (d) {
+                var code = String(d.id).padStart(3, "0");
+                if (gdpData[code]) {
+                  return gdpToColor(gdpData[code].gdp);
+                }
+                return defaultFill;
+              })
+              .on("mouseenter", function (event, d) {
+                var code = String(d.id).padStart(3, "0");
+                if (gdpData[code]) {
+                  var entry = gdpData[code];
+                  tooltipEl.innerHTML =
+                    entry.name +
+                    '<span class="tt-value">$' +
+                    entry.gdp.toLocaleString() +
+                    "</span>";
+                  tooltipEl.style.opacity = "1";
+                  tooltipEl.style.transform = "translateY(0)";
+                }
+              })
+              .on("mousemove", function (event) {
+                var container = document.querySelector("#world-map");
+                var rect = container.getBoundingClientRect();
+                var x = event.clientX - rect.left + 16;
+                var y = event.clientY - rect.top - 40;
+                tooltipEl.style.left = x + "px";
+                tooltipEl.style.top = y + "px";
+              })
+              .on("mouseleave", function () {
+                tooltipEl.style.opacity = "0";
+                tooltipEl.style.transform = "translateY(4px)";
+              });
+
+            /* ── GSAP Timeline ── */
+            buildTimeline();
+          },
+        );
+
+        function buildTimeline() {
+          var tl = gsap.timeline({ paused: true });
+
+          /* 0s: Headline clip-path wipe reveal (1s) */
+          tl.to(
+            "#world-map .headline",
+            {
+              clipPath: "inset(0 0% 0 0)",
+              duration: 1,
+              ease: "power3.inOut",
+            },
+            0,
+          );
+
+          /* 0.4s: Subtitle fade in (0.6s) */
+          tl.to(
+            "#world-map .subtitle",
+            {
+              opacity: 1,
+              duration: 0.6,
+              ease: "power2.out",
+            },
+            0.4,
+          );
+
+          /* 1.0s: Countries stagger reveal */
+          tl.to(
+            "#world-map .country-path",
+            {
+              opacity: 1,
+              duration: 0.3,
+              stagger: {
+                each: 0.02,
+                from: "center",
+              },
+              ease: "power1.out",
+            },
+            1.0,
+          );
+
+          /* 4.0s: Legend fade in */
+          tl.to(
+            "#world-map .legend-group",
+            {
+              opacity: 1,
+              duration: 0.6,
+              ease: "power2.out",
+            },
+            4.0,
+          );
+
+          /* 4.5s: Source fade in */
+          tl.to(
+            "#world-map .source",
+            {
+              opacity: 1,
+              duration: 0.5,
+              ease: "power2.out",
+            },
+            4.5,
+          );
+
+          /* 5.0s: Highlight pulse on top 5 GDP countries */
+          for (var i = 0; i < top5Codes.length; i++) {
+            var selector = '#world-map [data-country="' + top5Codes[i] + '"]';
+
+            /* Pulse up: brightness + white stroke */
+            tl.to(
+              selector,
+              {
+                filter: "brightness(1.5)",
+                stroke: "#ffffff",
+                strokeWidth: 1.8,
+                duration: 0.4,
+                ease: "power2.out",
+              },
+              5.0 + i * 0.15,
+            );
+
+            /* Pulse back to normal */
+            tl.to(
+              selector,
+              {
+                filter: "brightness(1)",
+                stroke: "#1e293b",
+                strokeWidth: 0.6,
+                duration: 0.6,
+                ease: "power2.inOut",
+              },
+              5.0 + i * 0.15 + 0.4,
+            );
+          }
+
+          /* Register timeline */
+          if (!window.__timelines) {
+            window.__timelines = {};
+          }
+          window.__timelines["world-map"] = tl;
+        }
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/x-post/x-post.html b/docs/public/catalog/blocks/x-post/x-post.html
new file mode 100644
index 0000000000..fa81aa7c3b
--- /dev/null
+++ b/docs/public/catalog/blocks/x-post/x-post.html
@@ -0,0 +1,442 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=block"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      body {
+        width: 1920px;
+        height: 1080px;
+        font-family: "Inter", sans-serif;
+      }
+
+      [data-composition-id="x-post"] .x-card {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 880px;
+        background: #15202b;
+        border-radius: 20px;
+        padding: 36px 36px 28px;
+        box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
+        border: 1px solid #38444d;
+        overflow: hidden;
+      }
+
+      /* Bottom glow */
+      [data-composition-id="x-post"] .x-card::after {
+        content: "";
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 80px;
+        background: linear-gradient(to top, rgba(29, 155, 240, 0.08), transparent);
+        pointer-events: none;
+      }
+
+      /* Header row */
+      [data-composition-id="x-post"] .post-header {
+        display: flex;
+        align-items: flex-start;
+        gap: 14px;
+        margin-bottom: 18px;
+        position: relative;
+      }
+
+      [data-composition-id="x-post"] .avatar {
+        width: 52px;
+        height: 52px;
+        flex-shrink: 0;
+        border-radius: 50%;
+        overflow: hidden;
+      }
+
+      [data-composition-id="x-post"] .avatar svg {
+        width: 52px;
+        height: 52px;
+        display: block;
+      }
+
+      [data-composition-id="x-post"] .user-info {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        flex: 1;
+      }
+
+      [data-composition-id="x-post"] .name-row {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+      }
+
+      [data-composition-id="x-post"] .display-name {
+        font-size: 26px;
+        font-weight: 700;
+        color: #e7e9ea;
+        line-height: 1.3;
+      }
+
+      [data-composition-id="x-post"] .verified-badge svg {
+        width: 22px;
+        height: 22px;
+        display: block;
+      }
+
+      [data-composition-id="x-post"] .handle {
+        font-size: 22px;
+        font-weight: 400;
+        color: #8b98a5;
+        line-height: 1.3;
+      }
+
+      /* X logo top-right */
+      [data-composition-id="x-post"] .x-logo {
+        position: absolute;
+        top: 2px;
+        right: 0;
+        width: 32px;
+        height: 32px;
+      }
+
+      [data-composition-id="x-post"] .x-logo svg {
+        width: 32px;
+        height: 32px;
+        display: block;
+      }
+
+      /* Tweet body */
+      [data-composition-id="x-post"] .tweet-body {
+        font-size: 30px;
+        font-weight: 400;
+        color: #e7e9ea;
+        line-height: 1.45;
+        margin-bottom: 12px;
+        display: -webkit-box;
+        -webkit-line-clamp: 4;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+      }
+
+      [data-composition-id="x-post"] .hashtag {
+        color: #1d9bf0;
+      }
+
+      /* Timestamp */
+      [data-composition-id="x-post"] .timestamp {
+        font-size: 22px;
+        color: #8b98a5;
+        padding-bottom: 20px;
+        border-bottom: 1px solid #38444d;
+        margin-bottom: 16px;
+      }
+
+      /* Metrics bar — matches real X spacing */
+      [data-composition-id="x-post"] .metrics-bar {
+        display: flex;
+        align-items: center;
+        padding: 0;
+        position: relative;
+        z-index: 1;
+      }
+
+      [data-composition-id="x-post"] .metrics-left {
+        display: flex;
+        align-items: center;
+        flex: 1;
+        justify-content: space-between;
+        padding-right: 60px;
+      }
+
+      [data-composition-id="x-post"] .metrics-right {
+        display: flex;
+        align-items: center;
+        gap: 20px;
+      }
+
+      [data-composition-id="x-post"] .metric {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+
+      [data-composition-id="x-post"] .metric-icon {
+        width: 35px;
+        height: 35px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      [data-composition-id="x-post"] .metric-icon svg {
+        width: 35px;
+        height: 35px;
+        display: block;
+      }
+
+      [data-composition-id="x-post"] .metric-count {
+        font-size: 20px;
+        font-weight: 400;
+        color: #8b98a5;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="x-post"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="5"
+    >
+      <div id="card" class="clip x-card" data-start="0" data-duration="5" data-track-index="0">
+        <!-- Header: prompt to replace display name, handle, and avatar -->
+        <div class="post-header">
+          <div class="avatar">
+            <svg viewBox="0 0 52 52" fill="none">
+              <circle cx="26" cy="26" r="26" fill="#536471" />
+              <circle cx="26" cy="21" r="10" fill="#8b98a5" />
+              <ellipse cx="26" cy="42" rx="16" ry="12" fill="#8b98a5" />
+            </svg>
+          </div>
+          <div class="user-info">
+            <div class="name-row">
+              <span class="display-name">Hyperframes</span>
+              <span class="verified-badge">
+                <svg viewBox="0 0 22 22" fill="none">
+                  <circle cx="11" cy="11" r="11" fill="#1d9bf0" />
+                  <path
+                    d="M9.5 14.25L6.25 11l1.06-1.06 2.19 2.19 4.69-4.69L15.25 8.5 9.5 14.25z"
+                    fill="#fff"
+                  />
+                </svg>
+              </span>
+            </div>
+            <span class="handle">@hyperframes</span>
+          </div>
+          <div class="x-logo">
+            <svg viewBox="0 0 24 24" fill="#e7e9ea">
+              <path
+                d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"
+              />
+            </svg>
+          </div>
+        </div>
+
+        <!-- Tweet body: prompt to replace with your content -->
+        <div class="tweet-body">
+          Prompt to replace this text with your tweet. Change the display name, handle, timestamp,
+          and engagement counts to match your content. <span class="hashtag">#YourHashtag</span>
+        </div>
+
+        <!-- Timestamp: prompt to replace -->
+        <div class="timestamp">1:10 PM &middot; Apr 7, 2026</div>
+
+        <!-- Metrics bar -->
+        <div class="metrics-bar">
+          <div class="metrics-left">
+            <!-- Reply -->
+            <div class="metric">
+              <div class="metric-icon">
+                <svg viewBox="0 0 24 24" fill="#8b98a5">
+                  <path
+                    d="M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z"
+                  />
+                </svg>
+              </div>
+              <span class="metric-count">34</span>
+            </div>
+
+            <!-- Repost -->
+            <div class="metric">
+              <div class="metric-icon">
+                <svg viewBox="0 0 24 24" fill="#8b98a5">
+                  <path
+                    d="M4.5 3.88l4.432 4.14-1.364 1.46L5.5 7.55V16c0 1.1.896 2 2 2H13v2H7.5c-2.209 0-4-1.79-4-4V7.55L1.432 9.48.068 8.02 4.5 3.88zM16.5 6H11V4h5.5c2.209 0 4 1.79 4 4v8.45l2.068-1.93 1.364 1.46-4.432 4.14-4.432-4.14 1.364-1.46 2.068 1.93V8c0-1.1-.896-2-2-2z"
+                  />
+                </svg>
+              </div>
+              <span class="metric-count">2.3K</span>
+            </div>
+
+            <!-- Like -->
+            <div id="like-btn" class="metric">
+              <div class="metric-icon">
+                <svg viewBox="0 0 24 24">
+                  <!-- Outline heart (visible initially) -->
+                  <path
+                    id="heart-outline"
+                    d="M16.697 5.5c-1.222-.06-2.679.51-3.89 2.16l-.805 1.09-.806-1.09C9.984 6.01 8.526 5.44 7.304 5.5c-1.243.07-2.349.78-2.91 1.91-.552 1.12-.633 2.78.479 4.82 1.074 1.97 3.257 4.27 7.129 6.61 3.87-2.34 6.052-4.64 7.126-6.61 1.111-2.04 1.03-3.7.477-4.82-.561-1.13-1.666-1.84-2.908-1.91zm4.187 7.69c-1.351 2.48-4.001 5.12-8.379 7.67l-.503.3-.504-.3c-4.379-2.55-7.029-5.19-8.382-7.67-1.36-2.5-1.41-4.86-.514-6.67.887-1.79 2.647-2.91 4.601-3.01 1.651-.09 3.368.56 4.798 2.01 1.429-1.45 3.146-2.1 4.796-2.01 1.954.1 3.714 1.22 4.601 3.01.896 1.81.846 4.17-.514 6.67z"
+                    fill="#8b98a5"
+                  />
+                  <!-- Filled heart (hidden initially, shown on like) -->
+                  <path
+                    id="heart-filled"
+                    d="M20.884 13.19c-1.351 2.48-4.001 5.12-8.379 7.67l-.503.3-.504-.3c-4.379-2.55-7.029-5.19-8.382-7.67-1.36-2.5-1.41-4.86-.514-6.67.887-1.79 2.647-2.91 4.601-3.01 1.651-.09 3.368.56 4.798 2.01 1.429-1.45 3.146-2.1 4.796-2.01 1.954.1 3.714 1.22 4.601 3.01.896 1.81.846 4.17-.514 6.67z"
+                    fill="#f91880"
+                    opacity="0"
+                  />
+                </svg>
+              </div>
+              <span id="like-count" class="metric-count">10.9K</span>
+            </div>
+
+            <!-- Views -->
+            <div class="metric">
+              <div class="metric-icon">
+                <svg viewBox="0 0 24 24" fill="#8b98a5">
+                  <path
+                    d="M8.75 21V3h2v18h-2zM18 21V8.5h2V21h-2zM4 21l.004-10h2L6 21H4zm9.248 0v-7h2v7h-2z"
+                  />
+                </svg>
+              </div>
+              <span class="metric-count">150K</span>
+            </div>
+          </div>
+
+          <div class="metrics-right">
+            <!-- Bookmark -->
+            <div class="metric">
+              <div class="metric-icon">
+                <svg viewBox="0 0 24 24" fill="#8b98a5">
+                  <path
+                    d="M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5zM6.5 4c-.276 0-.5.22-.5.5v14.56l6-4.29 6 4.29V4.5c0-.28-.224-.5-.5-.5h-11z"
+                  />
+                </svg>
+              </div>
+            </div>
+
+            <!-- Share -->
+            <div class="metric">
+              <div class="metric-icon">
+                <svg viewBox="0 0 24 24" fill="#8b98a5">
+                  <path
+                    d="M12 2.59l5.7 5.7-1.41 1.42L13 6.41V16h-2V6.41l-3.3 3.3-1.41-1.42L12 2.59zM21 15l-.02 3.51c0 1.38-1.12 2.49-2.5 2.49H5.5C4.11 21 3 19.88 3 18.5V15h2v3.5c0 .28.22.5.5.5h12.98c.28 0 .5-.22.5-.5L19 15h2z"
+                  />
+                </svg>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      var tl = gsap.timeline({ paused: true });
+
+      var card = document.getElementById("card");
+      var likeBtn = document.getElementById("like-btn");
+      var heartOutline = document.getElementById("heart-outline");
+      var heartFilled = document.getElementById("heart-filled");
+      var likeCount = document.getElementById("like-count");
+
+      // Start off-screen below
+      gsap.set(card, { y: 400, opacity: 0 });
+
+      // Slide in from bottom
+      tl.to(
+        card,
+        {
+          y: 0,
+          opacity: 1,
+          duration: 0.6,
+          ease: "power3.out",
+        },
+        0.1,
+      );
+
+      // Like press-in
+      tl.to(
+        likeBtn,
+        {
+          scale: 0.85,
+          duration: 0.12,
+          ease: "power2.out",
+        },
+        1.5,
+      );
+
+      // Like release with spring bounce
+      tl.to(
+        likeBtn,
+        {
+          scale: 1,
+          duration: 0.4,
+          ease: "elastic.out(1, 0.4)",
+        },
+        1.62,
+      );
+
+      // Hide outline heart
+      tl.to(
+        heartOutline,
+        {
+          opacity: 0,
+          duration: 0.01,
+          ease: "none",
+        },
+        1.62,
+      );
+
+      // Show filled heart
+      tl.to(
+        heartFilled,
+        {
+          opacity: 1,
+          duration: 0.12,
+          ease: "none",
+        },
+        1.62,
+      );
+
+      // Like count turns pink + increments
+      tl.to(
+        likeCount,
+        {
+          color: "#f91880",
+          duration: 0.12,
+          ease: "none",
+          onStart: function () {
+            likeCount.textContent = "11.0K";
+          },
+        },
+        1.62,
+      );
+
+      // Slide out to bottom
+      tl.to(
+        card,
+        {
+          y: 400,
+          opacity: 0,
+          duration: 0.3,
+          ease: "power3.in",
+        },
+        4.2,
+      );
+
+      window.__timelines["x-post"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/yt-comment-card/yt-comment-card.html b/docs/public/catalog/blocks/yt-comment-card/yt-comment-card.html
new file mode 100644
index 0000000000..4c999d5621
--- /dev/null
+++ b/docs/public/catalog/blocks/yt-comment-card/yt-comment-card.html
@@ -0,0 +1,318 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      #yt-cc-root {
+        /* ---- yt tokens: override in the host to re-skin the family ---- */
+        --yt-font: "Inter", -apple-system, sans-serif;
+        --yt-ink: #1d1d1f;
+        --yt-ink-dim: #5a5a5f;
+        /* overlay-scheme text over footage — distinct from the --yt-ink board tokens */
+        --yt-text: #ffffff;
+        --yt-text-dim: rgba(255, 255, 255, 0.72);
+        --yt-red: #e62e2e;
+        --yt-cyan: #35c8d9;
+        --yt-scanline-alpha: 0.04;
+        --yt-scanline-gap: 3px;
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent; /* overlays footage or a yt-lcd board */
+        font-family: var(--yt-font);
+      }
+      /* optional full-frame LCD pass while comments are up */
+      #yt-cc-scan {
+        position: absolute;
+        inset: 0;
+        display: none;
+        background: repeating-linear-gradient(
+          0deg,
+          rgba(0, 0, 0, var(--yt-scanline-alpha)) 0 1px,
+          transparent 1px var(--yt-scanline-gap)
+        );
+      }
+      #yt-cc-col {
+        position: absolute;
+        display: flex;
+        flex-direction: column;
+        gap: 40px;
+      }
+      .yt-cc-card {
+        display: flex;
+        gap: 22px;
+        align-items: flex-start;
+      }
+      .yt-cc-avatar {
+        flex: none;
+        width: 64px;
+        height: 64px;
+        border-radius: 50%;
+        overflow: hidden;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: 700;
+        font-size: 26px;
+        color: #ffffff;
+        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
+      }
+      .yt-cc-avatar img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+      .yt-cc-meta {
+        display: flex;
+        align-items: baseline;
+        gap: 14px;
+      }
+      .yt-cc-user {
+        font-weight: 700;
+        font-size: 27px;
+      }
+      .yt-cc-time {
+        font-weight: 400;
+        font-size: 23px;
+      }
+      .yt-cc-text {
+        margin-top: 8px;
+        font-weight: 500;
+        font-size: 34px;
+        line-height: 1.35;
+        letter-spacing: -0.01em;
+        max-width: 860px;
+      }
+      .yt-cc-text .ch {
+        opacity: 0;
+      }
+      .yt-cc-row {
+        margin-top: 12px;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        font-weight: 600;
+        font-size: 22px;
+        opacity: 0;
+      }
+      .yt-cc-row svg {
+        width: 24px;
+        stroke-width: 2.4;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        fill: none;
+      }
+      .yt-cc-reply {
+        margin-left: 18px;
+        letter-spacing: 0.1em;
+      }
+      /* scheme: overlay (white over footage, w/ shadow) vs light (ink on boards) */
+      .yt-overlay .yt-cc-user,
+      .yt-overlay .yt-cc-text {
+        color: var(--yt-text);
+        text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
+      }
+      .yt-overlay .yt-cc-time,
+      .yt-overlay .yt-cc-row {
+        color: var(--yt-text-dim);
+        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
+      }
+      .yt-overlay .yt-cc-row svg {
+        stroke: var(--yt-text-dim);
+      }
+      .yt-light .yt-cc-user,
+      .yt-light .yt-cc-text {
+        color: var(--yt-ink);
+      }
+      .yt-light .yt-cc-time,
+      .yt-light .yt-cc-row {
+        color: var(--yt-ink-dim);
+      }
+      .yt-light .yt-cc-row svg {
+        stroke: var(--yt-ink-dim);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="yt-cc-root"
+      data-composition-id="yt-comment-card"
+      data-start="0"
+      data-duration="8"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="yt-cc-scan"></div>
+      <div id="yt-cc-col"></div>
+      <div
+        id="yt-cc-drv"
+        class="clip"
+        data-start="0"
+        data-duration="8"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- published parameters (inspector-style CONFIG) ----
+           Social comments typing on over footage — creator-style
+           comment cards. avatar: image path, or null -> initials chip. */
+        var CONFIG = {
+          scheme: "overlay", // "overlay" (white over footage) | "light" (ink on boards)
+          comments: [
+            {
+              avatar: null,
+              initials: "PW",
+              avatarHue: 210, // initials-chip hue when no image
+              username: "@pixelwaves",
+              time: "2 days ago",
+              text: "Your videos are the best!",
+              likes: 47,
+            },
+            {
+              avatar: null,
+              initials: "FR",
+              avatarHue: 340,
+              username: "@framerate",
+              time: "1 day ago",
+              text: "That camera move at 0:12 though 🔥",
+              likes: 12,
+            },
+          ],
+          x: 140,
+          y: null, // null = vertically centered
+          typeCharDelay: 0.024, // s per character (capped so a comment types <= 2.2s)
+          scanlines: false, // full-frame LCD pass while comments are up
+          animationIn: true,
+          animationOut: true,
+        };
+
+        var DUR = 8;
+        function clamp(v, lo, hi) {
+          return Math.min(hi, Math.max(lo, v));
+        }
+        var OUT = clamp(DUR * 0.06, 0.25, 0.6);
+
+        var root = document.getElementById("yt-cc-root");
+        var col = document.getElementById("yt-cc-col");
+        root.classList.add(CONFIG.scheme === "light" ? "yt-light" : "yt-overlay");
+        if (CONFIG.scanlines) document.getElementById("yt-cc-scan").style.display = "block";
+
+        var THUMB =
+          '<svg viewBox="0 0 24 24"><path d="M7 11v9M7 11l3.2-6.4a2 2 0 0 1 3.6 1.2V9h4.6a2 2 0 0 1 2 2.4l-1.2 6a2 2 0 0 1-2 1.6H7M7 11H4a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h3"/></svg>';
+
+        /* build cards */
+        CONFIG.comments.forEach(function (c, i) {
+          var card = document.createElement("div");
+          card.className = "yt-cc-card";
+          card.id = "yt-cc-card-" + i;
+
+          var av = document.createElement("div");
+          av.className = "yt-cc-avatar";
+          av.id = "yt-cc-av-" + i;
+          if (c.avatar) {
+            var img = document.createElement("img");
+            img.src = c.avatar;
+            av.appendChild(img);
+          } else {
+            av.textContent = c.initials || "?";
+            av.style.background =
+              "linear-gradient(135deg, hsl(" +
+              (c.avatarHue || 210) +
+              ", 62%, 52%), hsl(" +
+              ((c.avatarHue || 210) + 40) +
+              ", 62%, 42%))";
+          }
+          card.appendChild(av);
+
+          var body = document.createElement("div");
+          var meta = document.createElement("div");
+          meta.className = "yt-cc-meta";
+          meta.id = "yt-cc-meta-" + i;
+          var user = document.createElement("span");
+          user.className = "yt-cc-user";
+          user.textContent = c.username;
+          var time = document.createElement("span");
+          time.className = "yt-cc-time";
+          time.textContent = c.time || "";
+          meta.appendChild(user);
+          meta.appendChild(time);
+          body.appendChild(meta);
+
+          var text = document.createElement("div");
+          text.className = "yt-cc-text";
+          text.id = "yt-cc-text-" + i;
+          Array.from(c.text).forEach(function (ch) {
+            var span = document.createElement("span");
+            span.className = "ch";
+            span.textContent = ch;
+            text.appendChild(span);
+          });
+          body.appendChild(text);
+
+          var row = document.createElement("div");
+          row.className = "yt-cc-row";
+          row.id = "yt-cc-row-" + i;
+          row.innerHTML =
+            THUMB + "<span>" + (c.likes || 0) + '</span><span class="yt-cc-reply">REPLY</span>';
+          body.appendChild(row);
+          card.appendChild(body);
+          col.appendChild(card);
+        });
+
+        /* position (measure after building) */
+        col.style.left = CONFIG.x + "px";
+        var rect = col.getBoundingClientRect();
+        col.style.top =
+          (CONFIG.y === null ? Math.round((1080 - rect.height) / 2) : CONFIG.y) + "px";
+
+        var tl = gsap.timeline({ paused: true });
+
+        /* comments enter sequentially: avatar pops, meta fades, text types, row fades */
+        var t = CONFIG.animationIn ? 0.3 : 0;
+        CONFIG.comments.forEach(function (c, i) {
+          var av = "#yt-cc-av-" + i,
+            meta = "#yt-cc-meta-" + i,
+            row = "#yt-cc-row-" + i;
+          var chars = document.querySelectorAll("#yt-cc-text-" + i + " .ch");
+          var delay = Math.min(CONFIG.typeCharDelay, 2.2 / Math.max(1, chars.length));
+
+          gsap.set(av, { opacity: 0, scale: 0.5 });
+          gsap.set(meta, { opacity: 0, y: 10 });
+          tl.to(av, { opacity: 1, scale: 1, duration: 0.45, ease: "back.out(1.6)" }, t);
+          tl.to(meta, { opacity: 1, y: 0, duration: 0.4, ease: "power2.out" }, t + 0.12);
+          t += 0.4;
+          tl.to(chars, { opacity: 1, duration: 0.02, stagger: delay, ease: "none" }, t);
+          t += chars.length * delay + 0.15;
+          tl.to(row, { opacity: 1, duration: 0.35, ease: "power2.out" }, t);
+          t += 0.5;
+        });
+
+        /* exit + hard kill (auto-scaled out) */
+        if (CONFIG.animationOut) {
+          tl.to(col, { opacity: 0, y: -18, duration: OUT, ease: "power2.in" }, DUR - OUT - 0.05);
+        }
+        tl.set(root, { visibility: "hidden" }, DUR - 0.02);
+
+        window.__timelines["yt-comment-card"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/yt-lcd-background/yt-lcd-background.html b/docs/public/catalog/blocks/yt-lcd-background/yt-lcd-background.html
new file mode 100644
index 0000000000..8c283bec17
--- /dev/null
+++ b/docs/public/catalog/blocks/yt-lcd-background/yt-lcd-background.html
@@ -0,0 +1,306 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      #yt-lcd-root {
+        /* ---- yt tokens: override in the host to re-skin the family ---- */
+        --yt-font: "Inter", -apple-system, sans-serif;
+        --yt-paper: #e9e9e6;
+        --yt-paper-dark: #1c1c1e;
+        --yt-ink: #1d1d1f;
+        --yt-ink-dark: #e8e8e4;
+        --yt-cyan: #35c8d9;
+        --yt-prism-r: #ff2a4d;
+        --yt-prism-b: #2a7fff;
+        --yt-scanline-alpha: 0.05;
+        --yt-scanline-gap: 3px;
+        --yt-grid-size: 28px;
+        --yt-grid-alpha: 0.06;
+        --yt-grain-alpha: 0.08;
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--yt-paper);
+        font-family: var(--yt-font);
+      }
+      #yt-lcd-root.yt-dark {
+        background: var(--yt-paper-dark);
+      }
+      /* the LCD surface: scanlines + optional pixel grid + static grain */
+      #yt-lcd-scan {
+        position: absolute;
+        inset: -20px;
+        background: repeating-linear-gradient(
+          0deg,
+          rgba(0, 0, 0, var(--yt-scanline-alpha)) 0 1px,
+          transparent 1px var(--yt-scanline-gap)
+        );
+      }
+      .yt-dark #yt-lcd-scan {
+        background: repeating-linear-gradient(
+          0deg,
+          rgba(255, 255, 255, calc(var(--yt-scanline-alpha) * 1.4)) 0 1px,
+          transparent 1px var(--yt-scanline-gap)
+        );
+      }
+      #yt-lcd-grid {
+        position: absolute;
+        inset: 0;
+        background:
+          repeating-linear-gradient(
+            0deg,
+            rgba(0, 0, 0, var(--yt-grid-alpha)) 0 1px,
+            transparent 1px var(--yt-grid-size)
+          ),
+          repeating-linear-gradient(
+            90deg,
+            rgba(0, 0, 0, var(--yt-grid-alpha)) 0 1px,
+            transparent 1px var(--yt-grid-size)
+          );
+      }
+      .yt-dark #yt-lcd-grid {
+        background:
+          repeating-linear-gradient(
+            0deg,
+            rgba(255, 255, 255, var(--yt-grid-alpha)) 0 1px,
+            transparent 1px var(--yt-grid-size)
+          ),
+          repeating-linear-gradient(
+            90deg,
+            rgba(255, 255, 255, var(--yt-grid-alpha)) 0 1px,
+            transparent 1px var(--yt-grid-size)
+          );
+      }
+      #yt-lcd-grain {
+        position: absolute;
+        inset: 0;
+        opacity: var(--yt-grain-alpha);
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
+      }
+      /* the display text: prism copies behind the main fill, optional bow */
+      #yt-lcd-bow {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 26px;
+      }
+      .yt-lcd-line {
+        position: relative;
+        font-weight: 700;
+        line-height: 1;
+        letter-spacing: -0.02em;
+        white-space: nowrap;
+      }
+      .yt-lcd-copy {
+        position: absolute;
+        inset: 0;
+      }
+      .yt-lcd-copy.r {
+        color: var(--yt-prism-r);
+      }
+      .yt-lcd-copy.b {
+        color: var(--yt-prism-b);
+      }
+      .yt-lcd-main {
+        position: relative;
+      }
+      #yt-lcd-sub {
+        font-weight: 500;
+        letter-spacing: 0.14em;
+        text-transform: uppercase;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="yt-lcd-root"
+      data-composition-id="yt-lcd-background"
+      data-start="0"
+      data-duration="10"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="yt-lcd-scan" data-layout-allow-overflow></div>
+      <div id="yt-lcd-grid"></div>
+      <div id="yt-lcd-grain"></div>
+      <div id="yt-lcd-bow"></div>
+      <div
+        id="yt-lcd-drv"
+        class="clip"
+        data-start="0"
+        data-duration="10"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- published parameters (inspector-style CONFIG) ---- */
+        var CONFIG = {
+          scheme: "light", // "light" | "dark" (light/dark toggle)
+          title: "yt-lcd",
+          subtitle: "background 01",
+          fontSize: 230,
+          subSize: 34,
+          color: null, // null = scheme ink (AA). Cyan "#35c8d9" is dark-scheme only: 1.66:1 on light paper fails AA
+          blur: 2.2, // resting text blur px (blur amount)
+          prism: { enabled: true, offset: 3 }, // chromatic fringe (chromatic fringe)
+          bow: { enabled: true, deg: 7 }, // perspective bow (safe CRT-bow variant)
+          grid: { enabled: true }, // pixel grid (pixel grid)
+          scanDrift: true, // slow scanline scroll for life
+          animationIn: true,
+          animationOut: true,
+        };
+
+        var DUR = 10;
+        /* the yt- family improvement: in/out durations auto-scale to block
+           length (animations adjust to the layer length) */
+        function clamp(v, lo, hi) {
+          return Math.min(hi, Math.max(lo, v));
+        }
+        var IN = clamp(DUR * 0.08, 0.3, 0.8);
+        var OUT = clamp(DUR * 0.06, 0.25, 0.6);
+
+        var root = document.getElementById("yt-lcd-root");
+        var bow = document.getElementById("yt-lcd-bow");
+        var grid = document.getElementById("yt-lcd-grid");
+        var scan = document.getElementById("yt-lcd-scan");
+
+        if (CONFIG.scheme === "dark") root.classList.add("yt-dark");
+        if (!CONFIG.grid.enabled) grid.style.display = "none";
+
+        var mainColor =
+          CONFIG.color || (CONFIG.scheme === "dark" ? "var(--yt-ink-dark)" : "var(--yt-ink)");
+
+        /* build a line: prism copies behind + main fill */
+        function buildLine(text, size, idBase, prismOn) {
+          var line = document.createElement("div");
+          line.className = "yt-lcd-line";
+          line.style.fontSize = size + "px";
+          ["r", "b"].forEach(function (ch) {
+            if (!CONFIG.prism.enabled || !prismOn) return;
+            var c = document.createElement("div");
+            c.className = "yt-lcd-copy " + ch;
+            c.id = idBase + "-" + ch;
+            c.textContent = text;
+            line.appendChild(c);
+          });
+          var main = document.createElement("div");
+          main.className = "yt-lcd-main";
+          main.id = idBase + "-main";
+          main.textContent = text;
+          main.style.color = mainColor;
+          line.appendChild(main);
+          return line;
+        }
+
+        var titleLine = buildLine(CONFIG.title, CONFIG.fontSize, "yt-lcd-t", true);
+        bow.appendChild(titleLine);
+        if (CONFIG.subtitle) {
+          var sub = buildLine(
+            CONFIG.subtitle,
+            CONFIG.subSize,
+            "yt-lcd-s",
+            false,
+          ); /* fringe is title-only */
+          sub.id = "yt-lcd-sub";
+          bow.appendChild(sub);
+        }
+        if (CONFIG.bow.enabled) {
+          bow.style.transform = "perspective(950px) rotateX(" + CONFIG.bow.deg + "deg)";
+        }
+
+        var O = CONFIG.prism.offset;
+        var tl = gsap.timeline({ paused: true });
+
+        /* entrance: board fades, text focuses in from heavy blur while the
+           prism fringe settles from wide to resting offset */
+        if (CONFIG.animationIn) {
+          tl.from(root, { opacity: 0, duration: IN, ease: "power2.out" }, 0);
+          gsap.set(bow, { opacity: 0, filter: "blur(16px)" });
+          tl.to(bow, { opacity: 1, duration: IN * 1.4, ease: "power2.out" }, IN * 0.4);
+          tl.to(
+            bow,
+            { filter: "blur(" + CONFIG.blur + "px)", duration: IN * 2.2, ease: "power2.out" },
+            IN * 0.4,
+          );
+          if (CONFIG.prism.enabled) {
+            gsap.set(".yt-lcd-copy.r", { x: -O * 4, opacity: 0.5 });
+            gsap.set(".yt-lcd-copy.b", { x: O * 4, opacity: 0.5 });
+            tl.to(
+              ".yt-lcd-copy.r",
+              { x: -O, opacity: 0.85, duration: IN * 2.2, ease: "power2.out" },
+              IN * 0.4,
+            );
+            tl.to(
+              ".yt-lcd-copy.b",
+              { x: O, opacity: 0.85, duration: IN * 2.2, ease: "power2.out" },
+              IN * 0.4,
+            );
+          }
+        } else {
+          gsap.set(bow, { filter: "blur(" + CONFIG.blur + "px)" });
+          if (CONFIG.prism.enabled) {
+            gsap.set(".yt-lcd-copy.r", { x: -O, opacity: 0.85 });
+            gsap.set(".yt-lcd-copy.b", { x: O, opacity: 0.85 });
+          }
+        }
+
+        /* ambient: slow scanline drift + a breath of prism wobble */
+        if (CONFIG.scanDrift) {
+          tl.to(
+            scan,
+            {
+              y: 14,
+              duration: 3.1,
+              ease: "sine.inOut",
+              yoyo: true,
+              repeat: Math.max(1, Math.floor((DUR - 1) / 3.1) - 0),
+            },
+            0.5,
+          );
+        }
+        if (CONFIG.prism.enabled) {
+          tl.to(
+            ".yt-lcd-copy.r",
+            { x: -O - 1.2, duration: 2.4, ease: "sine.inOut", yoyo: true, repeat: 2 },
+            2.0,
+          );
+          tl.to(
+            ".yt-lcd-copy.b",
+            { x: O + 1.2, duration: 2.4, ease: "sine.inOut", yoyo: true, repeat: 2 },
+            2.0,
+          );
+        }
+
+        /* exit + hard kill */
+        if (CONFIG.animationOut) {
+          tl.to(root, { opacity: 0, duration: OUT, ease: "power2.in" }, DUR - OUT - 0.05);
+        }
+        tl.set(root, { visibility: "hidden" }, DUR - 0.02);
+
+        window.__timelines["yt-lcd-background"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/yt-logo-intro/yt-logo-intro.html b/docs/public/catalog/blocks/yt-logo-intro/yt-logo-intro.html
new file mode 100644
index 0000000000..102fdac5b7
--- /dev/null
+++ b/docs/public/catalog/blocks/yt-logo-intro/yt-logo-intro.html
@@ -0,0 +1,251 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      #yt-li-root {
+        /* ---- yt tokens ---- */
+        --yt-font: "Inter", -apple-system, sans-serif;
+        --yt-paper: #e9e9e6;
+        --yt-paper-dark: #1c1c1e;
+        --yt-ink: #1d1d1f;
+        --yt-ink-dark: #e8e8e4;
+        --yt-red: #e62e2e;
+        --yt-line-alpha: 0.1;
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--yt-paper);
+        font-family: var(--yt-font);
+      }
+      #yt-li-root.yt-dark {
+        background: var(--yt-paper-dark);
+      }
+      #yt-li-lines {
+        position: absolute;
+        inset: 0;
+      }
+      .yt-li-line {
+        position: absolute;
+        left: -40px;
+        right: -40px;
+        height: 2px;
+        background: rgba(0, 0, 0, var(--yt-line-alpha));
+      }
+      .yt-dark .yt-li-line {
+        background: rgba(255, 255, 255, var(--yt-line-alpha));
+      }
+      #yt-li-center {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 42px;
+      }
+      #yt-li-logo {
+        width: 220px;
+        height: 220px;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: var(--yt-ink);
+        color: #ffffff;
+        font-weight: 700;
+        font-size: 92px;
+        letter-spacing: -0.03em;
+        overflow: hidden;
+      }
+      .yt-dark #yt-li-logo {
+        background: var(--yt-ink-dark);
+        color: var(--yt-paper-dark);
+      }
+      #yt-li-logo img {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+      }
+      .yt-li-shadow #yt-li-logo,
+      .yt-li-shadow #yt-li-text {
+        filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.22));
+      }
+      #yt-li-textrow {
+        display: flex;
+        align-items: center;
+        gap: 26px;
+        min-height: 96px;
+      }
+      #yt-li-text {
+        font-weight: 700;
+        font-size: 74px;
+        letter-spacing: -0.015em;
+        color: var(--yt-ink);
+        white-space: nowrap;
+      }
+      .yt-dark #yt-li-text {
+        color: var(--yt-ink-dark);
+      }
+      #yt-li-arrow {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 84px;
+        height: 64px;
+        border-radius: 16px;
+        background: var(--yt-red);
+        opacity: 0;
+      }
+      #yt-li-arrow svg {
+        width: 38px;
+        stroke: #ffffff;
+        stroke-width: 3.2;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        fill: none;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="yt-li-root"
+      data-composition-id="yt-logo-intro"
+      data-start="0"
+      data-duration="6"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="yt-li-lines"></div>
+      <div id="yt-li-center">
+        <div id="yt-li-logo"></div>
+        <div id="yt-li-textrow">
+          <div id="yt-li-text"></div>
+          <div id="yt-li-arrow">
+            <svg viewBox="0 0 24 24"><path d="M4 12h15M13 5l7 7-7 7" /></svg>
+          </div>
+        </div>
+      </div>
+      <div
+        id="yt-li-drv"
+        class="clip"
+        data-start="0"
+        data-duration="6"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- published parameters ----
+           A logo intro: logo drops in, a kicker line, then the title
+           with an accent-red arrow. Background lines with frequency +
+           distortion (seeded offsets — no randomness). */
+        var CONFIG = {
+          scheme: "light", // "light" | "dark"
+          logoType: "text", // "text" | "image"
+          logoText: "YT",
+          logoSrc: null,
+          kicker: "LET'S DIVE IN",
+          title: "yt-logo-intro",
+          arrow: { enabled: true },
+          lines: { enabled: true, count: 12, distort: 10 },
+          dropShadow: true,
+          animationIn: true,
+          animationOut: true,
+        };
+
+        var DUR = 6;
+        function clamp(v, lo, hi) {
+          return Math.min(hi, Math.max(lo, v));
+        }
+        var IN = clamp(DUR * 0.08, 0.3, 0.8);
+        var OUT = clamp(DUR * 0.06, 0.25, 0.6);
+
+        var root = document.getElementById("yt-li-root");
+        var lines = document.getElementById("yt-li-lines");
+        var logo = document.getElementById("yt-li-logo");
+        var text = document.getElementById("yt-li-text");
+        var arrow = document.getElementById("yt-li-arrow");
+
+        if (CONFIG.scheme === "dark") root.classList.add("yt-dark");
+        if (CONFIG.dropShadow) root.classList.add("yt-li-shadow");
+
+        /* background lines: even spacing + seeded sine distortion */
+        if (CONFIG.lines.enabled) {
+          var gap = 1080 / (CONFIG.lines.count + 1);
+          for (var i = 1; i <= CONFIG.lines.count; i++) {
+            var l = document.createElement("div");
+            l.className = "yt-li-line";
+            var wobble = Math.sin(i * 2.399) * CONFIG.lines.distort;
+            l.style.top = Math.round(i * gap + wobble) + "px";
+            l.style.transform = "rotate(" + (Math.sin(i * 1.7) * 0.35).toFixed(2) + "deg)";
+            lines.appendChild(l);
+          }
+        }
+
+        if (CONFIG.logoType === "image" && CONFIG.logoSrc) {
+          var img = document.createElement("img");
+          img.src = CONFIG.logoSrc;
+          logo.appendChild(img);
+        } else {
+          logo.textContent = CONFIG.logoText;
+        }
+        if (!CONFIG.arrow.enabled) arrow.style.display = "none";
+
+        var tl = gsap.timeline({ paused: true });
+
+        if (CONFIG.animationIn) tl.from(root, { opacity: 0, duration: IN, ease: "power2.out" }, 0);
+
+        /* logo pops */
+        gsap.set(logo, { opacity: 0, scale: 0.55, y: 24 });
+        tl.to(
+          logo,
+          { opacity: 1, scale: 1, y: 0, duration: 0.55, ease: "back.out(1.5)" },
+          IN * 0.6,
+        );
+
+        /* kicker -> swap -> title + arrow */
+        gsap.set(text, { opacity: 0, y: 14 });
+        tl.set(text, { textContent: CONFIG.kicker, letterSpacing: "0.22em", fontSize: "40px" }, 0);
+        tl.to(text, { opacity: 1, y: 0, duration: 0.45, ease: "power2.out" }, IN * 0.6 + 0.45);
+        tl.to(text, { opacity: 0, y: -12, duration: 0.3, ease: "power2.in" }, 2.3);
+        tl.set(
+          text,
+          { textContent: CONFIG.title, letterSpacing: "-0.015em", fontSize: "74px", y: 14 },
+          2.62,
+        );
+        tl.to(text, { opacity: 1, y: 0, duration: 0.5, ease: "power3.out" }, 2.66);
+        gsap.set(arrow, { scale: 0.5, x: -14 });
+        tl.to(arrow, { opacity: 1, scale: 1, x: 0, duration: 0.45, ease: "back.out(1.6)" }, 2.9);
+
+        /* ambient: lines breathe */
+        tl.to(lines, { y: 8, duration: 2.2, ease: "sine.inOut", yoyo: true, repeat: 1 }, 0.8);
+
+        /* exit + hard kill */
+        if (CONFIG.animationOut) {
+          tl.to(root, { opacity: 0, duration: OUT, ease: "power2.in" }, DUR - OUT - 0.05);
+        }
+        tl.set(root, { visibility: "hidden" }, DUR - 0.02);
+
+        window.__timelines["yt-logo-intro"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/yt-lower-third/assets/avatar.jpg b/docs/public/catalog/blocks/yt-lower-third/assets/avatar.jpg
new file mode 100644
index 0000000000..d5ca2e945b
Binary files /dev/null and b/docs/public/catalog/blocks/yt-lower-third/assets/avatar.jpg differ
diff --git a/docs/public/catalog/blocks/yt-lower-third/yt-lower-third.html b/docs/public/catalog/blocks/yt-lower-third/yt-lower-third.html
new file mode 100644
index 0000000000..b69fbb1a52
--- /dev/null
+++ b/docs/public/catalog/blocks/yt-lower-third/yt-lower-third.html
@@ -0,0 +1,242 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&display=block"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+      }
+      html,
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      body {
+        width: 1920px;
+        height: 1080px;
+        font-family: "DM Sans", sans-serif;
+      }
+
+      [data-composition-id="yt-lower-third"] .lower-third {
+        position: absolute;
+        bottom: 80px;
+        left: 50%;
+        transform: translateX(-50%);
+        display: flex;
+        align-items: center;
+        gap: 28px;
+        background: #ffffff;
+        border-radius: 60px;
+        padding: 20px 32px 20px 20px;
+        box-shadow: 0 6px 32px rgba(0, 0, 0, 0.14);
+      }
+
+      [data-composition-id="yt-lower-third"] .avatar {
+        width: 96px;
+        height: 96px;
+        border-radius: 50%;
+        object-fit: cover;
+        flex-shrink: 0;
+      }
+
+      [data-composition-id="yt-lower-third"] .channel-info {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        margin-right: 20px;
+      }
+
+      [data-composition-id="yt-lower-third"] .channel-name {
+        font-size: 34px;
+        font-weight: 700;
+        color: #0f0f0f;
+        line-height: 1.3;
+        letter-spacing: -0.01em;
+      }
+
+      [data-composition-id="yt-lower-third"] .subscriber-count {
+        font-size: 22px;
+        font-weight: 400;
+        color: #606060;
+        line-height: 1.3;
+      }
+
+      [data-composition-id="yt-lower-third"] .subscribe-btn {
+        position: relative;
+        width: 220px;
+        height: 68px;
+        border-radius: 34px;
+        background: #0f0f0f;
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+      }
+
+      [data-composition-id="yt-lower-third"] .btn-text {
+        position: absolute;
+        font-family: "DM Sans", sans-serif;
+        font-size: 24px;
+        font-weight: 700;
+        color: #ffffff;
+        letter-spacing: 0.02em;
+        white-space: nowrap;
+      }
+
+      [data-composition-id="yt-lower-third"] .btn-text-subscribe {
+        opacity: 1;
+      }
+
+      [data-composition-id="yt-lower-third"] .btn-text-subscribed {
+        opacity: 0;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+
+      [data-composition-id="yt-lower-third"] .check-icon {
+        display: inline-block;
+        width: 24px;
+        height: 24px;
+      }
+
+      [data-composition-id="yt-lower-third"] .check-icon svg {
+        width: 24px;
+        height: 24px;
+        display: block;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="yt-lower-third"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="4.5"
+    >
+      <div
+        id="card"
+        class="clip lower-third"
+        data-start="0"
+        data-duration="4.5"
+        data-track-index="0"
+      >
+        <img class="avatar" src="assets/avatar.jpg" alt="HeyGen" crossorigin="anonymous" />
+        <div class="channel-info">
+          <div class="channel-name">HeyGen</div>
+          <div class="subscriber-count">82.2K subscribers</div>
+        </div>
+        <div id="subscribe-btn" class="subscribe-btn">
+          <span id="btn-subscribe" class="btn-text btn-text-subscribe">Subscribe</span>
+          <span id="btn-subscribed" class="btn-text btn-text-subscribed">
+            <span class="check-icon"
+              ><svg
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="#fff"
+                stroke-width="2.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <polyline points="20 6 9 17 4 12"></polyline></svg
+            ></span>
+            Subscribed
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      var tl = gsap.timeline({ paused: true });
+
+      var card = document.getElementById("card");
+      var btn = document.getElementById("subscribe-btn");
+      var textSub = document.getElementById("btn-subscribe");
+      var textSubd = document.getElementById("btn-subscribed");
+
+      // Slide in from bottom
+      gsap.set(card, { y: 300, opacity: 0 });
+
+      tl.to(
+        card,
+        {
+          y: 0,
+          opacity: 1,
+          duration: 0.5,
+          ease: "power3.out",
+        },
+        0.1,
+      );
+
+      // Hold, then button press-in
+      tl.to(
+        btn,
+        {
+          scale: 0.92,
+          duration: 0.15,
+          ease: "power2.out",
+        },
+        1.0,
+      );
+
+      // Button release with spring bounce + text swap
+      tl.to(
+        btn,
+        {
+          scale: 1,
+          duration: 0.4,
+          ease: "elastic.out(1, 0.4)",
+        },
+        1.15,
+      );
+
+      // Fade out "Subscribe", fade in "Subscribed"
+      tl.to(
+        textSub,
+        {
+          opacity: 0,
+          duration: 0.08,
+          ease: "none",
+        },
+        1.15,
+      );
+
+      tl.to(
+        textSubd,
+        {
+          opacity: 1,
+          duration: 0.08,
+          ease: "none",
+        },
+        1.18,
+      );
+
+      // Slide out to bottom (inverse of entrance)
+      tl.to(
+        card,
+        {
+          y: 300,
+          opacity: 0,
+          duration: 0.25,
+          ease: "power3.in",
+        },
+        3.8,
+      );
+
+      window.__timelines["yt-lower-third"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/yt-prism-title/yt-prism-title.html b/docs/public/catalog/blocks/yt-prism-title/yt-prism-title.html
new file mode 100644
index 0000000000..fd26b6193f
--- /dev/null
+++ b/docs/public/catalog/blocks/yt-prism-title/yt-prism-title.html
@@ -0,0 +1,204 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      #yt-pt-root {
+        /* ---- yt tokens: override in the host to re-skin the family ---- */
+        --yt-font: "Inter", -apple-system, sans-serif;
+        --yt-cyan: #35c8d9;
+        --yt-prism-r: #ff2a4d;
+        --yt-prism-b: #2a7fff;
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent; /* overlays footage, a yt-lcd board, anything */
+        font-family: var(--yt-font);
+      }
+      #yt-pt-bow {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      #yt-pt-line {
+        position: relative;
+        font-weight: 700;
+        line-height: 1;
+        letter-spacing: -0.02em;
+        white-space: nowrap;
+      }
+      .yt-pt-copy {
+        position: absolute;
+        inset: 0;
+      }
+      .yt-pt-copy.r {
+        color: var(--yt-prism-r);
+      }
+      .yt-pt-copy.b {
+        color: var(--yt-prism-b);
+      }
+      #yt-pt-main {
+        position: relative;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="yt-pt-root"
+      data-composition-id="yt-prism-title"
+      data-start="0"
+      data-duration="6"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="yt-pt-bow"></div>
+      <div
+        id="yt-pt-drv"
+        class="clip"
+        data-start="0"
+        data-duration="6"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- published parameters (inspector-style CONFIG) ----
+           The cyan hero title with the full treatment stack, on a
+           transparent root — drop it over footage or a yt-lcd board. */
+        var CONFIG = {
+          title: "yt-prism",
+          fontSize: 260,
+          color: "#35c8d9", // bright cyan, for dark footage/boards (1.66:1 on light paper fails AA); use a darker cyan e.g. "#0f7d8a" on light boards
+          blur: 2.5, // resting blur px
+          prism: { enabled: true, offset: 4 },
+          bow: { enabled: true, deg: 6 },
+          drift: true, // slow scale breath while held
+          x: null, // null = centered
+          y: null,
+          animationIn: true,
+          animationOut: true,
+        };
+
+        var DUR = 6;
+        function clamp(v, lo, hi) {
+          return Math.min(hi, Math.max(lo, v));
+        }
+        var IN = clamp(DUR * 0.08, 0.3, 0.8);
+        var OUT = clamp(DUR * 0.06, 0.25, 0.6);
+
+        var root = document.getElementById("yt-pt-root");
+        var bow = document.getElementById("yt-pt-bow");
+
+        /* build: prism copies behind the main fill */
+        var line = document.createElement("div");
+        line.id = "yt-pt-line";
+        line.style.fontSize = CONFIG.fontSize + "px";
+        ["r", "b"].forEach(function (ch) {
+          if (!CONFIG.prism.enabled) return;
+          var c = document.createElement("div");
+          c.className = "yt-pt-copy " + ch;
+          c.textContent = CONFIG.title;
+          line.appendChild(c);
+        });
+        var main = document.createElement("div");
+        main.id = "yt-pt-main";
+        main.textContent = CONFIG.title;
+        main.style.color = CONFIG.color;
+        line.appendChild(main);
+        bow.appendChild(line);
+
+        if (CONFIG.bow.enabled) {
+          bow.style.transform = "perspective(950px) rotateX(" + CONFIG.bow.deg + "deg)";
+        }
+        if (CONFIG.x !== null || CONFIG.y !== null) {
+          bow.style.justifyContent = CONFIG.x === null ? "center" : "flex-start";
+          bow.style.alignItems = CONFIG.y === null ? "center" : "flex-start";
+          if (CONFIG.x !== null) line.style.marginLeft = CONFIG.x + "px";
+          if (CONFIG.y !== null) line.style.marginTop = CONFIG.y + "px";
+        }
+
+        var O = CONFIG.prism.offset;
+        var tl = gsap.timeline({ paused: true });
+
+        /* entrance: focus in from heavy blur, prism settles wide -> resting */
+        if (CONFIG.animationIn) {
+          gsap.set(bow, { opacity: 0, filter: "blur(18px)" });
+          tl.to(bow, { opacity: 1, duration: IN * 1.4, ease: "power2.out" }, 0.1);
+          tl.to(
+            bow,
+            { filter: "blur(" + CONFIG.blur + "px)", duration: IN * 2.4, ease: "power2.out" },
+            0.1,
+          );
+          if (CONFIG.prism.enabled) {
+            gsap.set(".yt-pt-copy.r", { x: -O * 4.5, opacity: 0.45 });
+            gsap.set(".yt-pt-copy.b", { x: O * 4.5, opacity: 0.45 });
+            tl.to(
+              ".yt-pt-copy.r",
+              { x: -O, opacity: 0.85, duration: IN * 2.4, ease: "power2.out" },
+              0.1,
+            );
+            tl.to(
+              ".yt-pt-copy.b",
+              { x: O, opacity: 0.85, duration: IN * 2.4, ease: "power2.out" },
+              0.1,
+            );
+          }
+        } else {
+          gsap.set(bow, { filter: "blur(" + CONFIG.blur + "px)" });
+          if (CONFIG.prism.enabled) {
+            gsap.set(".yt-pt-copy.r", { x: -O, opacity: 0.85 });
+            gsap.set(".yt-pt-copy.b", { x: O, opacity: 0.85 });
+          }
+        }
+
+        /* ambient: slow scale breath + prism wobble */
+        if (CONFIG.drift) {
+          tl.to(line, { scale: 1.035, duration: DUR - 1, ease: "sine.out" }, 0.4);
+        }
+        if (CONFIG.prism.enabled) {
+          tl.to(
+            ".yt-pt-copy.r",
+            { x: -O - 1.4, duration: 1.9, ease: "sine.inOut", yoyo: true, repeat: 1 },
+            1.4,
+          );
+          tl.to(
+            ".yt-pt-copy.b",
+            { x: O + 1.4, duration: 1.9, ease: "sine.inOut", yoyo: true, repeat: 1 },
+            1.4,
+          );
+        }
+
+        /* exit + hard kill */
+        if (CONFIG.animationOut) {
+          tl.to(
+            bow,
+            { opacity: 0, filter: "blur(12px)", duration: OUT, ease: "power2.in" },
+            DUR - OUT - 0.05,
+          );
+        }
+        tl.set(root, { visibility: "hidden" }, DUR - 0.02);
+
+        window.__timelines["yt-prism-title"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/blocks/yt-vertical-fill/yt-vertical-fill.html b/docs/public/catalog/blocks/yt-vertical-fill/yt-vertical-fill.html
new file mode 100644
index 0000000000..8f35e23de6
--- /dev/null
+++ b/docs/public/catalog/blocks/yt-vertical-fill/yt-vertical-fill.html
@@ -0,0 +1,228 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      #yt-vf-root {
+        /* ---- yt tokens ---- */
+        --yt-font: "Inter", -apple-system, sans-serif;
+        --yt-grid-size: 28px;
+        --yt-grid-alpha: 0.05;
+        --yt-stage: #101012;
+        --yt-scrim: rgba(8, 8, 10, 0.28);
+        --yt-cyan: #35c8d9;
+        --yt-prism-b: #2a7fff;
+        --yt-violet: #7d5cff;
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--yt-stage);
+        font-family: var(--yt-font);
+      }
+      .yt-vf-media {
+        position: absolute;
+        overflow: hidden;
+      }
+      .yt-vf-media img,
+      .yt-vf-media .yt-vf-fill {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+      #yt-vf-bg {
+        inset: -60px;
+        filter: blur(42px) brightness(0.75);
+      }
+      .yt-vf-side {
+        top: 0;
+        bottom: 0;
+        width: 656px;
+      }
+      #yt-vf-scrim {
+        position: absolute;
+        inset: 0;
+        background: var(--yt-scrim);
+      }
+      #yt-vf-grid {
+        position: absolute;
+        inset: 0;
+        background:
+          repeating-linear-gradient(
+            0deg,
+            rgba(255, 255, 255, var(--yt-grid-alpha)) 0 1px,
+            transparent 1px var(--yt-grid-size)
+          ),
+          repeating-linear-gradient(
+            90deg,
+            rgba(255, 255, 255, var(--yt-grid-alpha)) 0 1px,
+            transparent 1px var(--yt-grid-size)
+          );
+      }
+      #yt-vf-fg {
+        top: 0;
+        bottom: 0;
+        left: 656px;
+        width: 608px;
+        box-shadow: 0 0 90px rgba(0, 0, 0, 0.55);
+      }
+      /* stand-in portrait when no media is configured (self-demo) */
+      .yt-vf-fill {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: 700;
+        font-size: 120px;
+        color: rgba(255, 255, 255, 0.9);
+        background: linear-gradient(
+          160deg,
+          var(--yt-cyan) 0%,
+          var(--yt-prism-b) 50%,
+          var(--yt-violet) 100%
+        );
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="yt-vf-root"
+      data-composition-id="yt-vertical-fill"
+      data-start="0"
+      data-duration="8"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="yt-vf-media" id="yt-vf-bg" data-layout-allow-overflow></div>
+      <div class="yt-vf-media yt-vf-side" id="yt-vf-side-l" style="left: 0"></div>
+      <div class="yt-vf-media yt-vf-side" id="yt-vf-side-r" style="right: 0"></div>
+      <div id="yt-vf-scrim"></div>
+      <div id="yt-vf-grid"></div>
+      <div class="yt-vf-media" id="yt-vf-fg"></div>
+      <div
+        id="yt-vf-drv"
+        class="clip"
+        data-start="0"
+        data-duration="8"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- published parameters ----
+           Vertical media filling a 16:9 frame — three fill modes:
+           mode "scale" (big blurred copy behind), "mirror" (flanking
+           mirrored copies), "copy" (flanking straight copies).
+           IMAGES ONLY inside this block: the runtime never seeks media
+           elements inside a sub-composition (renders black). For live
+           vertical FOOTAGE, keep the media element in the HOST root
+           positioned over the fg slot (left:656px width:608px) and feed
+           this block a representative still for the fill layers. */
+        var CONFIG = {
+          src: null, // portrait IMAGE path; null -> stand-in gradient (demo)
+          mode: "scale", // "scale" | "mirror" | "copy"
+          fgContrast: 1.06,
+          fgBrightness: 1.03,
+          fgSaturation: 1.08,
+          grid: { enabled: true },
+          kenBurns: true,
+          animationIn: true,
+          animationOut: true,
+        };
+
+        var DUR = 8;
+        function clamp(v, lo, hi) {
+          return Math.min(hi, Math.max(lo, v));
+        }
+        var IN = clamp(DUR * 0.08, 0.3, 0.8);
+        var OUT = clamp(DUR * 0.06, 0.25, 0.6);
+
+        var root = document.getElementById("yt-vf-root");
+        var bg = document.getElementById("yt-vf-bg");
+        var sideL = document.getElementById("yt-vf-side-l");
+        var sideR = document.getElementById("yt-vf-side-r");
+        var fg = document.getElementById("yt-vf-fg");
+        var grid = document.getElementById("yt-vf-grid");
+
+        if (!CONFIG.grid.enabled) grid.style.display = "none";
+
+        function media(id) {
+          if (!CONFIG.src) {
+            var d = document.createElement("div");
+            d.className = "yt-vf-fill";
+            d.textContent = "9:16";
+            return d;
+          }
+          var img = document.createElement("img");
+          img.src = CONFIG.src;
+          img.id = id;
+          return img;
+        }
+
+        fg.appendChild(media("yt-vf-m-fg"));
+        fg.style.filter =
+          "contrast(" +
+          CONFIG.fgContrast +
+          ") brightness(" +
+          CONFIG.fgBrightness +
+          ") saturate(" +
+          CONFIG.fgSaturation +
+          ")";
+
+        if (CONFIG.mode === "scale") {
+          bg.appendChild(media("yt-vf-m-bg"));
+          sideL.style.display = "none";
+          sideR.style.display = "none";
+        } else {
+          bg.style.display = "none";
+          sideL.appendChild(media("yt-vf-m-l"));
+          sideR.appendChild(media("yt-vf-m-r"));
+          if (CONFIG.mode === "mirror") {
+            sideL.firstChild.style.transform = "scaleX(-1)";
+            sideR.firstChild.style.transform = "scaleX(-1)";
+          }
+          sideL.style.filter = "blur(6px) brightness(0.72)";
+          sideR.style.filter = "blur(6px) brightness(0.72)";
+        }
+
+        var tl = gsap.timeline({ paused: true });
+
+        if (CONFIG.animationIn) {
+          tl.from(root, { opacity: 0, duration: IN, ease: "power2.out" }, 0);
+          gsap.set(fg, { y: 34, opacity: 0 });
+          tl.to(fg, { y: 0, opacity: 1, duration: IN * 1.6, ease: "power3.out" }, IN * 0.5);
+        }
+        if (CONFIG.kenBurns) {
+          tl.fromTo(
+            fg.firstChild,
+            { scale: 1.05 },
+            { scale: 1, duration: DUR - 1, ease: "sine.out" },
+            0.4,
+          );
+        }
+
+        if (CONFIG.animationOut) {
+          tl.to(root, { opacity: 0, duration: OUT, ease: "power2.in" }, DUR - OUT - 0.05);
+        }
+        tl.set(root, { visibility: "hidden" }, DUR - 0.02);
+
+        window.__timelines["yt-vertical-fill"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/ai-generation-canvas/ai-generation-canvas.html b/docs/public/catalog/components/ai-generation-canvas/ai-generation-canvas.html
new file mode 100644
index 0000000000..6ae7ce64ad
--- /dev/null
+++ b/docs/public/catalog/components/ai-generation-canvas/ai-generation-canvas.html
@@ -0,0 +1,94 @@
+<!--
+  AI Generation Canvas - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-ai-generation-canvas">
+  <div class="panel prompt">
+    <h3>AI Generation Canvas</h3>
+    <p>A prompt composer expands into a generated dashboard preview.</p>
+    <div class="pill">Generate scene</div>
+    <div class="pill">Refine motion</div>
+    <div class="pill">Export</div>
+  </div>
+  <div class="panel preview">
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+  </div>
+</div>
+
+<style>
+  .hf-remocn-ai-generation-canvas {
+    --hf-accent: var(--accent, #18181b);
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-ai-generation-canvas {
+    width: 820px;
+    min-height: 460px;
+    border-radius: 34px;
+    padding: 28px;
+    background: linear-gradient(135deg, #fafafa, #e4e4e7);
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);
+    display: grid;
+    grid-template-columns: 280px 1fr;
+    gap: 22px;
+    overflow: hidden;
+  }
+  .hf-remocn-ai-generation-canvas .panel {
+    border: 1px solid rgba(15, 23, 42, 0.08);
+    border-radius: 24px;
+    background: rgba(255, 255, 255, 0.76);
+    padding: 22px;
+    backdrop-filter: blur(12px);
+  }
+  .hf-remocn-ai-generation-canvas .prompt {
+    display: grid;
+    gap: 12px;
+    align-content: start;
+  }
+  .hf-remocn-ai-generation-canvas .pill {
+    height: 42px;
+    border-radius: 999px;
+    background: #111827;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    padding: 0 18px;
+    font-weight: 800;
+    transform: translateX(var(--hf-pill-x, 0px));
+  }
+  .hf-remocn-ai-generation-canvas .preview {
+    display: grid;
+    gap: 14px;
+  }
+  .hf-remocn-ai-generation-canvas .card {
+    min-height: 78px;
+    border-radius: 18px;
+    background: #fff;
+    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
+    transform: translate(var(--hf-card-x, 0px), var(--hf-card-y, 0px))
+      scale(var(--hf-card-scale, 1));
+    opacity: var(--hf-card-opacity, 1);
+  }
+  .hf-remocn-ai-generation-canvas h3 {
+    margin: 0 0 14px;
+    font-size: 32px;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-ai-generation-canvas p {
+    margin: 0;
+    color: #475569;
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-ai-generation-canvas .pill', { '--hf-pill-x': '-18px', opacity: 0 }, { '--hf-pill-x': '0px', opacity: 1, duration: 0.25, stagger: 0.08, ease: 'power2.out' }, startTime); tl.fromTo('.hf-remocn-ai-generation-canvas .card', { '--hf-card-y': '28px', '--hf-card-scale': 0.96, '--hf-card-opacity': 0 }, { '--hf-card-y': '0px', '--hf-card-scale': 1, '--hf-card-opacity': 1, duration: 0.42, stagger: 0.12, ease: 'power3.out' }, startTime + 0.2);
+-->
diff --git a/docs/public/catalog/components/ai-generation-canvas/demo.html b/docs/public/catalog/components/ai-generation-canvas/demo.html
new file mode 100644
index 0000000000..c10f732343
--- /dev/null
+++ b/docs/public/catalog/components/ai-generation-canvas/demo.html
@@ -0,0 +1,192 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>AI Generation Canvas - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+        /* ponytail: scale on wrapper (not GSAP target) to fill ~65% of 1920×1080 */
+        transform: scale(1.52);
+      }
+      .hf-remocn-ai-generation-canvas {
+        --hf-accent: var(--accent, #18181b);
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-ai-generation-canvas {
+        width: 820px;
+        min-height: 460px;
+        border-radius: 34px;
+        padding: 28px;
+        background: linear-gradient(135deg, #fafafa, #e4e4e7);
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);
+        display: grid;
+        grid-template-columns: 280px 1fr;
+        gap: 22px;
+        overflow: hidden;
+      }
+      .hf-remocn-ai-generation-canvas .panel {
+        border: 1px solid rgba(15, 23, 42, 0.08);
+        border-radius: 24px;
+        background: rgba(255, 255, 255, 0.76);
+        padding: 22px;
+        backdrop-filter: blur(12px);
+      }
+      .hf-remocn-ai-generation-canvas .prompt {
+        display: grid;
+        gap: 12px;
+        align-content: start;
+      }
+      .hf-remocn-ai-generation-canvas .pill {
+        height: 42px;
+        border-radius: 999px;
+        background: #111827;
+        color: #fff;
+        display: flex;
+        align-items: center;
+        padding: 0 18px;
+        font-weight: 800;
+        transform: translateX(var(--hf-pill-x, 0px));
+      }
+      .hf-remocn-ai-generation-canvas .preview {
+        display: grid;
+        gap: 14px;
+      }
+      .hf-remocn-ai-generation-canvas .card {
+        min-height: 78px;
+        border-radius: 18px;
+        background: #fff;
+        box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
+        transform: translate(var(--hf-card-x, 0px), var(--hf-card-y, 0px))
+          scale(var(--hf-card-scale, 1));
+        opacity: var(--hf-card-opacity, 1);
+        padding: 16px 18px;
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+      }
+      /* skeleton bars that make the dashboard cards readable as a thumbnail */
+      .hf-remocn-ai-generation-canvas .card-label {
+        height: 10px;
+        border-radius: 6px;
+        background: #e4e4e7;
+        width: 55%;
+      }
+      .hf-remocn-ai-generation-canvas .card-bar {
+        height: 8px;
+        border-radius: 6px;
+        background: #f4f4f5;
+        width: 85%;
+      }
+      .hf-remocn-ai-generation-canvas .card-bar.short {
+        width: 60%;
+      }
+      .hf-remocn-ai-generation-canvas .card-accent {
+        height: 28px;
+        border-radius: 8px;
+        background: #d4d4d8;
+        width: 100%;
+        margin-top: 2px;
+      }
+      .hf-remocn-ai-generation-canvas h3 {
+        margin: 0 0 14px;
+        font-size: 32px;
+        letter-spacing: -0.04em;
+      }
+      .hf-remocn-ai-generation-canvas p {
+        margin: 0;
+        color: #71717a;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="ai-generation-canvas-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-ai-generation-canvas">
+          <div class="panel prompt">
+            <h3>AI Generation Canvas</h3>
+            <p>A prompt composer expands into a generated dashboard preview.</p>
+            <div class="pill">Generate scene</div>
+            <div class="pill">Refine motion</div>
+            <div class="pill">Export</div>
+          </div>
+          <div class="panel preview">
+            <div class="card">
+              <div class="card-label"></div>
+              <div class="card-accent"></div>
+            </div>
+            <div class="card">
+              <div class="card-label"></div>
+              <div class="card-bar"></div>
+              <div class="card-bar short"></div>
+            </div>
+            <div class="card">
+              <div class="card-label"></div>
+              <div class="card-bar"></div>
+              <div class="card-bar short"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-ai-generation-canvas .pill",
+          { "--hf-pill-x": "-18px", opacity: 0 },
+          { "--hf-pill-x": "0px", opacity: 1, duration: 0.25, stagger: 0.08, ease: "power2.out" },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-ai-generation-canvas .card",
+          { "--hf-card-y": "28px", "--hf-card-scale": 0.96, "--hf-card-opacity": 0 },
+          {
+            "--hf-card-y": "0px",
+            "--hf-card-scale": 1,
+            "--hf-card-opacity": 1,
+            duration: 0.42,
+            stagger: 0.12,
+            ease: "power3.out",
+          },
+          startTime + 0.2,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["ai-generation-canvas-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/ai-prompt-flow/ai-prompt-flow.html b/docs/public/catalog/components/ai-prompt-flow/ai-prompt-flow.html
new file mode 100644
index 0000000000..fca8f75ef0
--- /dev/null
+++ b/docs/public/catalog/components/ai-prompt-flow/ai-prompt-flow.html
@@ -0,0 +1,103 @@
+<!--
+  AI Prompt Flow - Remocn-inspired composed UI flow for HyperFrames.
+
+  Paste the markup and CSS into a composition. Use the timeline integration
+  note at the bottom as the starting point for deterministic GSAP animation.
+-->
+
+<div class="hf-ui-ai-prompt-flow">
+  <div class="hf-ui-ai-prompt-panel">
+    <span class="hf-ui-ai-prompt-label">Prompt</span>
+    <div class="hf-ui-ai-prompt-field">Create a launch video for our new feature</div>
+    <div class="hf-ui-ai-prompt-chips">
+      <span>fast cuts</span><span>captions</span><span>product UI</span>
+    </div>
+    <button type="button">Generate</button>
+  </div>
+  <div class="hf-ui-ai-prompt-result">
+    <strong>Preview ready</strong><span>18 scenes matched</span>
+  </div>
+</div>
+
+<style>
+  .hf-ui-ai-prompt-flow {
+    display: grid;
+    gap: 18px;
+    width: 620px;
+    color: #18181b;
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-ui-ai-prompt-panel,
+  .hf-ui-ai-prompt-result {
+    border: 1px solid #e4e4e7;
+    border-radius: 26px;
+    background: #ffffff;
+    box-shadow: 0 26px 80px rgba(0, 0, 0, 0.1);
+  }
+  .hf-ui-ai-prompt-panel {
+    display: grid;
+    gap: 16px;
+    padding: 28px;
+  }
+  .hf-ui-ai-prompt-label {
+    color: #71717a;
+    font-size: 13px;
+    font-weight: 900;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+  }
+  .hf-ui-ai-prompt-field {
+    min-height: 92px;
+    padding: 18px;
+    border-radius: 18px;
+    background: #f4f4f5;
+    font-size: 22px;
+    font-weight: 760;
+    line-height: 1.25;
+  }
+  .hf-ui-ai-prompt-chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+  .hf-ui-ai-prompt-chips span {
+    padding: 8px 11px;
+    border-radius: 999px;
+    background: #eef2ff;
+    color: #4338ca;
+    font-size: 13px;
+    font-weight: 850;
+  }
+  .hf-ui-ai-prompt-panel button {
+    justify-self: start;
+    height: 46px;
+    padding: 0 20px;
+    border: 0;
+    border-radius: 13px;
+    background: #18181b;
+    color: #ffffff;
+    font-weight: 900;
+  }
+  .hf-ui-ai-prompt-result {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 18px 22px;
+  }
+  .hf-ui-ai-prompt-result strong {
+    font-size: 18px;
+  }
+  .hf-ui-ai-prompt-result span {
+    color: #16a34a;
+    font-size: 14px;
+    font-weight: 850;
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-ui-ai-prompt-panel', { opacity: 0, y: 26 }, { opacity: 1, y: 0, duration: 0.38, ease: 'power2.out' }, 0.25);
+  tl.fromTo('.hf-ui-ai-prompt-chips span', { y: 14, opacity: 0 }, { y: 0, opacity: 1, duration: 0.24, stagger: 0.06, ease: 'power2.out' }, 0.62);
+  tl.to('.hf-ui-ai-prompt-panel button', { scale: 0.96, duration: 0.12, yoyo: true, repeat: 1, ease: 'power1.inOut' }, 1.0);
+  tl.fromTo('.hf-ui-ai-prompt-result', { opacity: 0, y: 22, scale: 0.97 }, { opacity: 1, y: 0, scale: 1, duration: 0.36, ease: 'back.out(1.3)' }, 1.24);
+-->
diff --git a/docs/public/catalog/components/ai-prompt-flow/demo.html b/docs/public/catalog/components/ai-prompt-flow/demo.html
new file mode 100644
index 0000000000..19449e82ea
--- /dev/null
+++ b/docs/public/catalog/components/ai-prompt-flow/demo.html
@@ -0,0 +1,168 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>AI Prompt Flow - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f4f4f5;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        min-width: 760px;
+        min-height: 520px;
+        padding: 56px;
+        /* ponytail: scale-up only; demo-frame is not a GSAP target */
+        transform: scale(2.2);
+        transform-origin: center center;
+      }
+      .hf-ui-ai-prompt-flow {
+        display: grid;
+        gap: 18px;
+        width: 620px;
+        color: #18181b;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-ui-ai-prompt-panel,
+      .hf-ui-ai-prompt-result {
+        border: 1px solid #e4e4e7;
+        border-radius: 26px;
+        background: #ffffff;
+        box-shadow: 0 26px 80px rgba(0, 0, 0, 0.1);
+      }
+      .hf-ui-ai-prompt-panel {
+        display: grid;
+        gap: 16px;
+        padding: 28px;
+      }
+      .hf-ui-ai-prompt-label {
+        color: #71717a;
+        font-size: 13px;
+        font-weight: 900;
+        letter-spacing: 0.1em;
+        text-transform: uppercase;
+      }
+      .hf-ui-ai-prompt-field {
+        min-height: 92px;
+        padding: 18px;
+        border-radius: 18px;
+        background: #f4f4f5;
+        font-size: 22px;
+        font-weight: 760;
+        line-height: 1.25;
+      }
+      .hf-ui-ai-prompt-chips {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+      }
+      .hf-ui-ai-prompt-chips span {
+        padding: 8px 11px;
+        border-radius: 999px;
+        background: #eef2ff;
+        color: #4338ca;
+        font-size: 13px;
+        font-weight: 850;
+      }
+      .hf-ui-ai-prompt-panel button {
+        justify-self: start;
+        height: 46px;
+        padding: 0 20px;
+        border: 0;
+        border-radius: 13px;
+        background: #18181b;
+        color: #ffffff;
+        font-size: 15px;
+        font-weight: 700;
+        cursor: default;
+      }
+      .hf-ui-ai-prompt-result {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 18px 22px;
+      }
+      .hf-ui-ai-prompt-result strong {
+        font-size: 18px;
+      }
+      .hf-ui-ai-prompt-result span {
+        color: #16a34a;
+        font-size: 14px;
+        font-weight: 850;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="ai-prompt-flow-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-ui-ai-prompt-flow">
+          <div class="hf-ui-ai-prompt-panel">
+            <span class="hf-ui-ai-prompt-label">Prompt</span>
+            <div class="hf-ui-ai-prompt-field">Create a launch video for our new feature</div>
+            <div class="hf-ui-ai-prompt-chips">
+              <span>fast cuts</span><span>captions</span><span>product UI</span>
+            </div>
+            <button type="button">Generate</button>
+          </div>
+          <div class="hf-ui-ai-prompt-result">
+            <strong>Preview ready</strong><span>18 scenes matched</span>
+          </div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        tl.fromTo(
+          ".hf-ui-ai-prompt-panel",
+          { opacity: 0, y: 26 },
+          { opacity: 1, y: 0, duration: 0.38, ease: "power2.out" },
+          0.25,
+        );
+        tl.fromTo(
+          ".hf-ui-ai-prompt-chips span",
+          { y: 14, opacity: 0 },
+          { y: 0, opacity: 1, duration: 0.24, stagger: 0.06, ease: "power2.out" },
+          0.62,
+        );
+        tl.to(
+          ".hf-ui-ai-prompt-panel button",
+          { scale: 0.96, duration: 0.12, yoyo: true, repeat: 1, ease: "power1.inOut" },
+          1.0,
+        );
+        tl.fromTo(
+          ".hf-ui-ai-prompt-result",
+          { opacity: 0, y: 22, scale: 0.97 },
+          { opacity: 1, y: 0, scale: 1, duration: 0.36, ease: "back.out(1.3)" },
+          1.24,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["ai-prompt-flow-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/animated-bar-chart/animated-bar-chart.html b/docs/public/catalog/components/animated-bar-chart/animated-bar-chart.html
new file mode 100644
index 0000000000..3b68f46a4c
--- /dev/null
+++ b/docs/public/catalog/components/animated-bar-chart/animated-bar-chart.html
@@ -0,0 +1,98 @@
+<!--
+  Animated Bar Chart - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-animated-bar-chart">
+  <header>
+    <div>
+      <h3>Animated Bar Chart</h3>
+      <p>A compact data card with deterministic bar growth and value callouts.</p>
+    </div>
+    <strong>+42%</strong>
+  </header>
+  <div class="bars">
+    <span class="bar" style="--h: 42%"></span><span class="bar" style="--h: 72%"></span
+    ><span class="bar" style="--h: 56%"></span><span class="bar" style="--h: 88%"></span
+    ><span class="bar" style="--h: 64%"></span><span class="bar" style="--h: 95%"></span
+    ><span class="bar" style="--h: 78%"></span>
+  </div>
+  <svg viewBox="0 0 700 210">
+    <path
+      d="M20 172 C120 90, 190 118, 260 74 S430 112, 508 42 S620 82, 680 30"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="10"
+      stroke-linecap="round"
+    />
+  </svg>
+</div>
+
+<style>
+  .hf-remocn-animated-bar-chart {
+    --hf-accent: var(--accent, #111827);
+    --hf-ink: #111827;
+    --hf-l1: rgba(17, 24, 39, 0.72);
+    --hf-l2: rgba(17, 24, 39, 0.45);
+    --hf-l3: rgba(17, 24, 39, 0.18);
+    --hf-l4: rgba(17, 24, 39, 0.08);
+    --hf-hair: rgba(17, 24, 39, 0.14);
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-animated-bar-chart {
+    width: 760px;
+    min-height: 420px;
+    border-radius: 28px;
+    background: #fff;
+    padding: 34px;
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.16);
+    display: grid;
+    gap: 22px;
+  }
+  .hf-remocn-animated-bar-chart header {
+    display: flex;
+    justify-content: space-between;
+    align-items: end;
+  }
+  .hf-remocn-animated-bar-chart h3 {
+    margin: 0;
+    font-size: 34px;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-animated-bar-chart strong {
+    font-size: 54px;
+    letter-spacing: -0.06em;
+  }
+  .hf-remocn-animated-bar-chart .bars {
+    height: 210px;
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    align-items: end;
+    gap: 14px;
+  }
+  .hf-remocn-animated-bar-chart .bar {
+    height: calc(var(--h) * var(--hf-grow, 1));
+    border-radius: 14px 14px 5px 5px;
+    background: var(--hf-l1);
+  }
+  .hf-remocn-animated-bar-chart svg {
+    width: 100%;
+    height: 210px;
+    overflow: visible;
+  }
+  .hf-remocn-animated-bar-chart path {
+    color: var(--hf-l2);
+    stroke-dasharray: 900;
+    stroke-dashoffset: var(--hf-dash, 0);
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-animated-bar-chart', { '--hf-grow': 0, '--hf-dash': 900 }, { '--hf-grow': 1, '--hf-dash': 0, duration: 1.2, ease: 'power3.out' }, startTime);
+-->
diff --git a/docs/public/catalog/components/animated-bar-chart/demo.html b/docs/public/catalog/components/animated-bar-chart/demo.html
new file mode 100644
index 0000000000..c5c35e736e
--- /dev/null
+++ b/docs/public/catalog/components/animated-bar-chart/demo.html
@@ -0,0 +1,176 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Animated Bar Chart - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+        transform: scale(2.1);
+        transform-origin: center center;
+      }
+      .hf-remocn-animated-bar-chart {
+        --hf-accent: var(--accent, #111827);
+        --hf-ink: #111827;
+        --hf-l1: rgba(17, 24, 39, 0.72);
+        --hf-l2: rgba(17, 24, 39, 0.45);
+        --hf-l3: rgba(17, 24, 39, 0.18);
+        --hf-l4: rgba(17, 24, 39, 0.08);
+        --hf-hair: rgba(17, 24, 39, 0.14);
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-animated-bar-chart {
+        width: 760px;
+        min-height: 420px;
+        border-radius: 28px;
+        background: #fff;
+        padding: 34px;
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.16);
+        display: grid;
+        gap: 22px;
+      }
+      .hf-remocn-animated-bar-chart header {
+        display: flex;
+        justify-content: space-between;
+        align-items: end;
+      }
+      .hf-remocn-animated-bar-chart h3 {
+        margin: 0;
+        font-size: 34px;
+        letter-spacing: -0.04em;
+        font-weight: 700;
+        color: #111827;
+      }
+      .hf-remocn-animated-bar-chart header p {
+        margin: 6px 0 0;
+        font-size: 16px;
+        color: #6b7280;
+        font-weight: 400;
+      }
+      .hf-remocn-animated-bar-chart strong {
+        font-size: 54px;
+        letter-spacing: -0.06em;
+        color: var(--hf-accent);
+        font-weight: 700;
+      }
+      .hf-remocn-animated-bar-chart .bars {
+        height: 210px;
+        display: grid;
+        grid-template-columns: repeat(7, 1fr);
+        align-items: end;
+        gap: 14px;
+      }
+      .hf-remocn-animated-bar-chart .bar {
+        height: calc(var(--h) * var(--hf-grow, 1));
+        border-radius: 14px 14px 5px 5px;
+        background: var(--hf-l1);
+      }
+      .hf-remocn-animated-bar-chart .chart-footer {
+        display: grid;
+        gap: 6px;
+      }
+      .hf-remocn-animated-bar-chart svg {
+        width: 100%;
+        height: 180px;
+        overflow: visible;
+      }
+      .hf-remocn-animated-bar-chart path {
+        color: var(--hf-l2);
+        stroke-dasharray: 900;
+        stroke-dashoffset: var(--hf-dash, 0);
+      }
+      .hf-remocn-animated-bar-chart .bar-labels {
+        display: grid;
+        grid-template-columns: repeat(7, 1fr);
+        text-align: center;
+        font-size: 13px;
+        font-weight: 500;
+        color: #9ca3af;
+        padding: 0 2px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="animated-bar-chart-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-animated-bar-chart">
+          <header>
+            <div>
+              <h3>Animated Bar Chart</h3>
+              <p>A compact data card with deterministic bar growth and value callouts.</p>
+            </div>
+            <strong>+42%</strong>
+          </header>
+          <div class="bars">
+            <span class="bar" style="--h: 42%"></span><span class="bar" style="--h: 72%"></span
+            ><span class="bar" style="--h: 56%"></span><span class="bar" style="--h: 88%"></span
+            ><span class="bar" style="--h: 64%"></span><span class="bar" style="--h: 95%"></span
+            ><span class="bar" style="--h: 78%"></span>
+          </div>
+          <div class="chart-footer">
+            <svg viewBox="0 0 700 210">
+              <!-- baseline -->
+              <line x1="20" y1="185" x2="680" y2="185" stroke="#e4e4e7" stroke-width="1.5" />
+              <path
+                d="M20 172 C120 90, 190 118, 260 74 S430 112, 508 42 S620 82, 680 30"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="10"
+                stroke-linecap="round"
+              />
+            </svg>
+            <div class="bar-labels">
+              <span>Jan</span><span>Feb</span><span>Mar</span><span>Apr</span><span>May</span
+              ><span>Jun</span><span>Jul</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-animated-bar-chart",
+          { "--hf-grow": 0, "--hf-dash": 900 },
+          { "--hf-grow": 1, "--hf-dash": 0, duration: 1.2, ease: "power3.out" },
+          startTime,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["animated-bar-chart-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/animated-line-chart/animated-line-chart.html b/docs/public/catalog/components/animated-line-chart/animated-line-chart.html
new file mode 100644
index 0000000000..4e52c9bb8a
--- /dev/null
+++ b/docs/public/catalog/components/animated-line-chart/animated-line-chart.html
@@ -0,0 +1,98 @@
+<!--
+  Animated Line Chart - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-animated-line-chart">
+  <header>
+    <div>
+      <h3>Animated Line Chart</h3>
+      <p>A line chart draws across the card with endpoint emphasis.</p>
+    </div>
+    <strong>+42%</strong>
+  </header>
+  <div class="bars">
+    <span class="bar" style="--h: 42%"></span><span class="bar" style="--h: 72%"></span
+    ><span class="bar" style="--h: 56%"></span><span class="bar" style="--h: 88%"></span
+    ><span class="bar" style="--h: 64%"></span><span class="bar" style="--h: 95%"></span
+    ><span class="bar" style="--h: 78%"></span>
+  </div>
+  <svg viewBox="0 0 700 210">
+    <path
+      d="M20 172 C120 90, 190 118, 260 74 S430 112, 508 42 S620 82, 680 30"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="10"
+      stroke-linecap="round"
+    />
+  </svg>
+</div>
+
+<style>
+  .hf-remocn-animated-line-chart {
+    --hf-accent: var(--accent, #111827);
+    --hf-ink: #111827;
+    --hf-l1: rgba(17, 24, 39, 0.72);
+    --hf-l2: rgba(17, 24, 39, 0.45);
+    --hf-l3: rgba(17, 24, 39, 0.18);
+    --hf-l4: rgba(17, 24, 39, 0.08);
+    --hf-hair: rgba(17, 24, 39, 0.14);
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-animated-line-chart {
+    width: 760px;
+    min-height: 420px;
+    border-radius: 28px;
+    background: #fff;
+    padding: 34px;
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.16);
+    display: grid;
+    gap: 22px;
+  }
+  .hf-remocn-animated-line-chart header {
+    display: flex;
+    justify-content: space-between;
+    align-items: end;
+  }
+  .hf-remocn-animated-line-chart h3 {
+    margin: 0;
+    font-size: 34px;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-animated-line-chart strong {
+    font-size: 54px;
+    letter-spacing: -0.06em;
+  }
+  .hf-remocn-animated-line-chart .bars {
+    height: 210px;
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    align-items: end;
+    gap: 14px;
+  }
+  .hf-remocn-animated-line-chart .bar {
+    height: calc(var(--h) * var(--hf-grow, 1));
+    border-radius: 14px 14px 5px 5px;
+    background: var(--hf-l2);
+  }
+  .hf-remocn-animated-line-chart svg {
+    width: 100%;
+    height: 210px;
+    overflow: visible;
+  }
+  .hf-remocn-animated-line-chart path {
+    color: var(--hf-l1);
+    stroke-dasharray: 900;
+    stroke-dashoffset: var(--hf-dash, 0);
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-animated-line-chart', { '--hf-grow': 0, '--hf-dash': 900 }, { '--hf-grow': 1, '--hf-dash': 0, duration: 1.2, ease: 'power3.out' }, startTime);
+-->
diff --git a/docs/public/catalog/components/animated-line-chart/demo.html b/docs/public/catalog/components/animated-line-chart/demo.html
new file mode 100644
index 0000000000..f5d23b0c1a
--- /dev/null
+++ b/docs/public/catalog/components/animated-line-chart/demo.html
@@ -0,0 +1,152 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Animated Line Chart - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+        /* ponytail: scale-up wrapper (not a GSAP target) to fill ~65% of 1920px stage */
+        transform: scale(1.19);
+        transform-origin: center center;
+      }
+      .hf-remocn-animated-line-chart {
+        --hf-accent: var(--accent, #111827);
+        --hf-ink: #111827;
+        --hf-l1: rgba(17, 24, 39, 0.72);
+        --hf-l2: rgba(17, 24, 39, 0.45);
+        --hf-l3: rgba(17, 24, 39, 0.18);
+        --hf-l4: rgba(17, 24, 39, 0.08);
+        --hf-hair: rgba(17, 24, 39, 0.14);
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-animated-line-chart {
+        width: 760px;
+        min-height: 420px;
+        border-radius: 28px;
+        background: #fff;
+        padding: 34px;
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.16);
+        border: 1px solid #e4e4e7;
+        display: grid;
+        gap: 22px;
+      }
+      .hf-remocn-animated-line-chart header {
+        display: flex;
+        justify-content: space-between;
+        align-items: end;
+      }
+      .hf-remocn-animated-line-chart h3 {
+        margin: 0;
+        font-size: 34px;
+        letter-spacing: -0.04em;
+      }
+      .hf-remocn-animated-line-chart p {
+        margin: 4px 0 0;
+        font-size: 15px;
+        color: var(--hf-muted);
+      }
+      .hf-remocn-animated-line-chart strong {
+        font-size: 54px;
+        letter-spacing: -0.06em;
+      }
+      .hf-remocn-animated-line-chart .bars {
+        height: 210px;
+        display: grid;
+        grid-template-columns: repeat(7, 1fr);
+        align-items: end;
+        gap: 14px;
+      }
+      .hf-remocn-animated-line-chart .bar {
+        height: calc(var(--h) * var(--hf-grow, 1));
+        border-radius: 14px 14px 5px 5px;
+        background: var(--hf-l2);
+      }
+      .hf-remocn-animated-line-chart svg {
+        width: 100%;
+        height: 210px;
+        overflow: visible;
+      }
+      .hf-remocn-animated-line-chart path {
+        color: var(--hf-l1);
+        stroke-dasharray: 900;
+        stroke-dashoffset: var(--hf-dash, 0);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="animated-line-chart-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-animated-line-chart">
+          <header>
+            <div>
+              <h3>Animated Line Chart</h3>
+              <p>A line chart draws across the card with endpoint emphasis.</p>
+            </div>
+            <strong>+42%</strong>
+          </header>
+          <div class="bars">
+            <span class="bar" style="--h: 42%"></span><span class="bar" style="--h: 72%"></span
+            ><span class="bar" style="--h: 56%"></span><span class="bar" style="--h: 88%"></span
+            ><span class="bar" style="--h: 64%"></span><span class="bar" style="--h: 95%"></span
+            ><span class="bar" style="--h: 78%"></span>
+          </div>
+          <svg viewBox="0 0 700 210">
+            <path
+              d="M20 172 C120 90, 190 118, 260 74 S430 112, 508 42 S620 82, 680 30"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="10"
+              stroke-linecap="round"
+            />
+          </svg>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-animated-line-chart",
+          { "--hf-grow": 0, "--hf-dash": 900 },
+          { "--hf-grow": 1, "--hf-dash": 0, duration: 1.2, ease: "power3.out" },
+          startTime,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["animated-line-chart-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/arc-motion-path/arc-motion-path.html b/docs/public/catalog/components/arc-motion-path/arc-motion-path.html
new file mode 100644
index 0000000000..bd0b84a9f2
--- /dev/null
+++ b/docs/public/catalog/components/arc-motion-path/arc-motion-path.html
@@ -0,0 +1,99 @@
+<!--
+  Arc Motion Path - advanced HyperFrames primitive.
+
+  This is intentionally seekable: drive it from a paused GSAP timeline.
+  MotionPath examples require GSAP MotionPathPlugin. Three.js examples expose
+  a render(progress) adapter instead of a free-running requestAnimationFrame loop.
+-->
+
+<div class="hf-advanced-arc-motion-path">
+  <svg viewBox="0 0 760 430" aria-hidden="true">
+    <path
+      id="arc-motion-path-path-a"
+      class="path"
+      d="M104 310 C178 110, 334 74, 442 178 S592 306, 668 120"
+    />
+    <path id="arc-motion-path-path-b" class="path" d="M118 142 C224 300, 410 330, 642 206" />
+  </svg>
+  <div class="core">Arc Motion Path</div>
+  <div class="chip chip-a"><span class="dot"></span>Plan</div>
+  <div class="chip chip-b"><span class="dot"></span>Render</div>
+</div>
+
+<style>
+  .hf-advanced-arc-motion-path {
+    color: var(--fg, #111827);
+    font-family: var(--font-body, Inter, system-ui, sans-serif);
+  }
+  .hf-advanced-arc-motion-path {
+    position: relative;
+    width: 760px;
+    height: 430px;
+    border-radius: var(--radius, 30px);
+    overflow: hidden;
+    background: radial-gradient(
+      circle at 50% 20%,
+      var(--bg, #f4f4f5),
+      var(--bg, #f8fafc) 54%,
+      var(--bg, #e4e4e7)
+    );
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);
+  }
+  .hf-advanced-arc-motion-path svg {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    overflow: visible;
+  }
+  .hf-advanced-arc-motion-path .path {
+    fill: none;
+    stroke: color-mix(in srgb, var(--fg, #111827) 18%, transparent);
+    stroke-width: 3;
+    stroke-dasharray: 10 12;
+  }
+  .hf-advanced-arc-motion-path .core {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 176px;
+    height: 176px;
+    margin: -88px 0 0 -88px;
+    border-radius: 42px;
+    background: var(--fg, #111827);
+    color: var(--bg, #fff);
+    display: grid;
+    place-items: center;
+    text-align: center;
+    font-weight: 900;
+    letter-spacing: -0.04em;
+    box-shadow: 0 22px 54px rgba(15, 23, 42, 0.25);
+  }
+  .hf-advanced-arc-motion-path .chip {
+    position: absolute;
+    left: 0;
+    top: 0;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1, 8px);
+    height: 42px;
+    padding: 0 var(--space-2, 16px);
+    border-radius: var(--radius, 999px);
+    background: var(--surface, #fff);
+    box-shadow: 0 16px 42px rgba(15, 23, 42, 0.14);
+    font-weight: 800;
+    transform-origin: 50% 50%;
+  }
+  .hf-advanced-arc-motion-path .dot {
+    width: 10px;
+    height: 10px;
+    border-radius: var(--radius, 999px);
+    background: var(--accent, #18181b);
+  }
+</style>
+
+<!--
+  Timeline integration:
+  const startTime = 0;
+  if (window.MotionPathPlugin) gsap.registerPlugin(MotionPathPlugin); tl.to('.hf-advanced-arc-motion-path .chip-a', { motionPath: { path: '#arc-motion-path-path-a', align: '#arc-motion-path-path-a', alignOrigin: [0.5, 0.5], autoRotate: true }, duration: 2.4, ease: 'power1.inOut' }, startTime); tl.to('.hf-advanced-arc-motion-path .chip-b', { motionPath: { path: '#arc-motion-path-path-b', align: '#arc-motion-path-path-b', alignOrigin: [0.5, 0.5], autoRotate: true, start: 0.1, end: 0.92 }, duration: 2.1, ease: 'sine.inOut' }, startTime + 0.25);
+-->
diff --git a/docs/public/catalog/components/arc-motion-path/demo.html b/docs/public/catalog/components/arc-motion-path/demo.html
new file mode 100644
index 0000000000..4a22cf9957
--- /dev/null
+++ b/docs/public/catalog/components/arc-motion-path/demo.html
@@ -0,0 +1,164 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Arc Motion Path - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/MotionPathPlugin.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: var(--bg, #f7f7f8);
+        font-family: var(--font-body, Inter, system-ui, sans-serif);
+      }
+      .hf-advanced-arc-motion-path {
+        color: var(--fg, #111827);
+        font-family: var(--font-body, Inter, system-ui, sans-serif);
+      }
+      .hf-advanced-arc-motion-path {
+        position: relative;
+        width: 760px;
+        height: 430px;
+        border-radius: 30px;
+        overflow: hidden;
+        background: radial-gradient(
+          circle at 50% 20%,
+          var(--bg, #f4f4f5),
+          var(--bg, #f8fafc) 54%,
+          var(--bg, #e4e4e7)
+        );
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);
+        transform: scale(0.84);
+      }
+      .hf-advanced-arc-motion-path svg {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        overflow: visible;
+      }
+      .hf-advanced-arc-motion-path .path {
+        fill: none;
+        stroke: color-mix(in srgb, var(--fg, #111827) 18%, transparent);
+        stroke-width: 3;
+        stroke-dasharray: 10 12;
+      }
+      .hf-advanced-arc-motion-path .core {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        width: 176px;
+        height: 176px;
+        margin: -88px 0 0 -88px;
+        border-radius: 42px;
+        background: var(--fg, #111827);
+        color: var(--bg, #fff);
+        display: grid;
+        place-items: center;
+        text-align: center;
+        font-size: 15px;
+        font-weight: 900;
+        letter-spacing: -0.04em;
+        box-shadow: 0 22px 54px rgba(15, 23, 42, 0.25);
+      }
+      .hf-advanced-arc-motion-path .chip {
+        position: absolute;
+        left: 0;
+        top: 0;
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+        height: 42px;
+        padding: 0 16px;
+        border-radius: 999px;
+        background: var(--surface, #fff);
+        box-shadow: 0 16px 42px rgba(15, 23, 42, 0.14);
+        font-size: 13px;
+        font-weight: 800;
+        transform-origin: 50% 50%;
+      }
+      .hf-advanced-arc-motion-path .dot {
+        width: 10px;
+        height: 10px;
+        border-radius: 999px;
+        background: var(--accent, #18181b);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="arc-motion-path-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="hf-advanced-arc-motion-path">
+        <svg viewBox="0 0 760 430" aria-hidden="true">
+          <path
+            id="arc-motion-path-path-a"
+            class="path"
+            d="M104 310 C178 110, 334 74, 442 178 S592 306, 668 120"
+          />
+          <path id="arc-motion-path-path-b" class="path" d="M118 142 C224 300, 410 330, 642 206" />
+        </svg>
+        <div class="core">Arc Motion Path</div>
+        <div class="chip chip-a"><span class="dot"></span>Plan</div>
+        <div class="chip chip-b"><span class="dot"></span>Render</div>
+      </div>
+    </div>
+    <script>
+      const tl = gsap.timeline({ paused: true });
+      const startTime = 0.5;
+      if (window.MotionPathPlugin) gsap.registerPlugin(MotionPathPlugin);
+      tl.to(
+        ".hf-advanced-arc-motion-path .chip-a",
+        {
+          motionPath: {
+            path: "#arc-motion-path-path-a",
+            align: "#arc-motion-path-path-a",
+            alignOrigin: [0.5, 0.5],
+            autoRotate: true,
+          },
+          duration: 2.4,
+          ease: "power1.inOut",
+        },
+        startTime,
+      );
+      tl.to(
+        ".hf-advanced-arc-motion-path .chip-b",
+        {
+          motionPath: {
+            path: "#arc-motion-path-path-b",
+            align: "#arc-motion-path-path-b",
+            alignOrigin: [0.5, 0.5],
+            autoRotate: true,
+            start: 0.1,
+            end: 0.92,
+          },
+          duration: 2.1,
+          ease: "sine.inOut",
+        },
+        startTime + 0.25,
+      );
+      tl.set({}, {}, 5);
+      window.__timelines = window.__timelines || {};
+      window.__timelines["arc-motion-path-demo"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/ascii-render-pass/README.md b/docs/public/catalog/components/ascii-render-pass/README.md
new file mode 100644
index 0000000000..5184ad7023
--- /dev/null
+++ b/docs/public/catalog/components/ascii-render-pass/README.md
@@ -0,0 +1,75 @@
+# ascii-render-pass
+
+Wave M experiment (texture). A slotted scene renders as live ASCII: the
+source is rasterized once at mount to an offscreen canvas, a luminance
+summed-area table is built from it, and every frame draws one glyph per
+cell from a density ramp charset. Resolution animates coarse to fine on a
+stepped pitch ladder (5 steps, powers of sqrt(2)) at `resolve_at`, then
+holds legible-fine. 4s authored, elastic HOLD (never time-scaled).
+
+## Mounting
+
+```html
+<div
+  class="clip"
+  data-composition-id="ascii-render-pass"
+  data-composition-src="./components/ascii-render-pass.html"
+  data-variable-values='{"grid":"fine","resolve_at":1.2,"accent":"blue"}'
+  data-start="0"
+  data-duration="4"
+  data-track-index="0"
+></div>
+```
+
+## Scene slot
+
+The source scene is a slot. Place an inert template anywhere in the HOST
+page:
+
+```html
+<template data-slot="ascii-render-pass-scene"> ...scene... </template>
+```
+
+The slot is rasterized through an SVG foreignObject snapshot, so content
+must be self-contained: inline styles or rules carried by host `<style>`
+tags (both are copied into the snapshot), data-URI images only, system or
+already-active fonts. External resources do not load inside a snapshot.
+The DOM itself never displays; only its ASCII render does. A missing slot
+falls back to a token monogram tile rasterized synchronously from
+contract tokens.
+
+## Variables
+
+| id         | type   | default       | notes                                                                                                                           |
+| ---------- | ------ | ------------- | ------------------------------------------------------------------------------------------------------------------------------- |
+| charset    | string | " .:-=+\*#%@" | Density ramp, dark to light. A leading space keeps dark cells empty.                                                            |
+| grid       | enum   | med           | Final cell pitch: coarse (22 rows), med (36), fine (54).                                                                        |
+| resolve_at | number | 1.4           | Seconds from mount start when the coarse-to-fine resolve begins. Clamped so the 1.2s resolve and any exit stay inside the clip. |
+| accent     | enum   | green         | Glyph ink: green maps to --brand, blue to --accent, violet to --accent-2.                                                       |
+| exit       | enum   | none          | none holds the fine render (frame roots own transitions); fade or up add a 0.45s departure.                                     |
+
+## Choreography
+
+- 0.00s: the ASCII field fades up over 0.5s at the coarsest pitch (4x the
+  final cell), a blocky glyph read of the scene.
+- resolve_at: the pitch ladder steps coarse to fine over 1.2s. A stateless
+  per-cell hash shimmer rides the steps so each re-sample feels live.
+- resolve_at + 1.2s: the final pitch lands; shimmer amplitude is exactly
+  zero from here on.
+- HOLD: legible-fine, truly still, elastic with the clip duration.
+
+Sync point `resolve` fires as the ladder starts; align SFX to it.
+
+## Determinism
+
+The raster, its summed-area table, and every resolved color are fixed
+once at mount. One anchor tween spans the full duration and the
+timeline's onUpdate repaints the canvas from scratch, a pure function of
+(raster tables, timeline time). Cell shimmer is a stateless integer hash
+of (column, row, ladder step). No Math.random, no wall clock, no
+incremental state, so eventful seeks (suppressEvents false) land
+identical frames in any order and either direction. The no-slot monogram
+raster is drawn synchronously before the timeline registers; a slotted
+raster arrives from the snapshot decode (page-load scale, before capture
+begins) and repaints the current frame, after which all frames are pure
+f(t).
diff --git a/docs/public/catalog/components/ascii-render-pass/ascii-render-pass.html b/docs/public/catalog/components/ascii-render-pass/ascii-render-pass.html
new file mode 100644
index 0000000000..1975f735d7
--- /dev/null
+++ b/docs/public/catalog/components/ascii-render-pass/ascii-render-pass.html
@@ -0,0 +1,485 @@
+<!doctype html>
+<!--
+  ascii-render-pass: HyperFrames video primitive (Wave M experiment, texture)
+
+  A slotted scene renders as live ASCII: the source is rasterized ONCE at
+  mount to an offscreen canvas, its luminance grid is sampled per cell, and
+  each cell draws a glyph from a density ramp charset. Resolution animates
+  coarse to fine on a stepped pitch ladder as the piece resolves, then
+  holds legible-fine. The DOM source itself never displays; the canvas is
+  the whole picture.
+
+  The scene is a SLOT. Callers supply content by placing an inert template
+  anywhere in the HOST page (templates never render, and the runtime wipes
+  the host clip's own children on mount):
+
+    <template data-slot="ascii-render-pass-scene"> ... </template>
+
+  Slot content is rasterized through an SVG foreignObject snapshot, so it
+  must be self-contained: inline styles or rules carried by host <style>
+  tags (which are copied into the snapshot), data-URI images only, system
+  or already-active fonts. External resources do not load inside the
+  snapshot. When no slot exists, the primitive rasterizes a token monogram
+  tile drawn synchronously from contract tokens (no snapshot involved).
+
+  Variables (declared in data-composition-variables below):
+    - charset (string): density ramp, dark to light, first glyph may be a
+      space so dark cells stay empty. Default " .:-=+*#%@".
+    - grid ("coarse" | "med" | "fine", default "med"): final cell pitch.
+    - resolve_at (seconds): when the coarse-to-fine resolve begins.
+    - accent ("green" | "blue" | "violet", default "green"): glyph ink;
+      green rides --brand, blue rides --accent, violet rides --accent-2.
+    - exit ("none" | "fade" | "up", default "none"): frame roots own
+      transitions; the default holds the fine render to the cut.
+
+  Envelope, fixed segments with elastic HOLD only (never timeScale):
+    0.00s        canvas fades up over 0.5s at the coarsest pitch
+    resolve_at   pitch ladder steps coarse to fine over 1.2s (5 steps,
+                 powers of sqrt(2)); a per-cell hash shimmer rides the
+                 steps and lands at zero on the final step
+    then         legible-fine HOLD, truly still
+    OUT = 0.45s  only when exit is not none
+
+  Determinism (canvas 2D law): the raster, its luminance summed-area
+  table, and every resolved color are fixed once at mount. Every painted
+  frame is a pure function of (that raster, the timeline's current time):
+  the timeline's onUpdate clears the canvas and redraws every glyph from
+  scratch. Cell shimmer uses a stateless integer hash of (column, row,
+  ladder step), not a stream; there is no Math.random, no wall clock, no
+  incremental state. Eventful seeks (suppressEvents false, the engine's
+  render path) land identical frames in any order and either direction.
+  The no-slot monogram raster is drawn synchronously before the timeline
+  registers; a slotted raster arrives from the snapshot decode and
+  repaints the current frame, after which all frames are pure f(t).
+-->
+<html
+  lang="en"
+  data-composition-id="ascii-render-pass"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "charset", "type": "string", "role": "style", "label": "Charset", "description": "Density ramp, dark to light. A leading space keeps dark cells empty.", "default": " .:-=+*#%@" },
+    { "id": "grid", "type": "enum", "role": "style", "label": "Grid", "description": "Final cell pitch the resolve lands on.", "default": "med", "options": [{ "value": "coarse", "label": "Coarse" }, { "value": "med", "label": "Medium" }, { "value": "fine", "label": "Fine" }] },
+    { "id": "resolve_at", "type": "number", "role": "timing", "label": "Resolve at", "description": "Seconds from mount start when the coarse-to-fine resolve begins.", "default": 1.4, "min": 0.6, "max": 10, "step": 0.1, "unit": "s" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Glyph ink: green rides --brand, blue rides --accent, violet rides --accent-2.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the fine render holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>ASCII Render Pass</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="ascii-render-pass" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            pointer-events: none;
+          }
+
+          .arp-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .arp-stage {
+            position: absolute;
+            inset: 0;
+            will-change: transform, opacity;
+          }
+
+          .arp-canvas {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+          }
+        </style>
+
+        <div
+          id="ascii-render-pass-clip"
+          class="arp-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="arp-stage">
+            <canvas class="arp-canvas" aria-hidden="true"></canvas>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".arp-stage");
+            var canvas = root.querySelector(".arp-canvas");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            function num(value, fallback, min, max) {
+              var n = Number(value);
+              if (!isFinite(n)) n = fallback;
+              return Math.max(min, Math.min(max, n));
+            }
+
+            var charset =
+              typeof vars.charset === "string" && vars.charset.length >= 2
+                ? vars.charset
+                : " .:-=+*#%@";
+            var grid = vars.grid === "coarse" || vars.grid === "fine" ? vars.grid : "med";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            // Bundler mirrors composition variables as scoped CSS custom
+            // props; when this unit's accent variable shadows the --accent
+            // token ("blue" is a valid CSS color), fall back to the literal.
+            var computedAccent = getComputedStyle(root).getPropertyValue("--accent").trim();
+            if (
+              computedAccent === "green" ||
+              computedAccent === "blue" ||
+              computedAccent === "violet"
+            ) {
+              accentColors.blue = "#61a8ff";
+            }
+
+            // Envelope.
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var OUT = exit === "none" ? 0 : 0.45;
+            var RESOLVE = Math.min(1.2, Math.max(0.5, duration - OUT - 1.0));
+            var FADE_IN = 0.5;
+            var maxAt = Math.max(0.6, duration - RESOLVE - OUT - 0.05);
+            var resolveAt = num(vars.resolve_at, 1.4, 0.6, maxAt);
+            var OUT_START = duration - OUT;
+
+            // Canvas raster basis, fixed once at mount. Elastic root: the
+            // host box decides the resolution.
+            var dpr = Math.min(2, Math.max(1, Number(window.devicePixelRatio) || 1));
+            var box = root.getBoundingClientRect();
+            var cssW = Math.max(1, Math.round(box.width) || 640);
+            var cssH = Math.max(1, Math.round(box.height) || 360);
+            canvas.width = Math.round(cssW * dpr);
+            canvas.height = Math.round(cssH * dpr);
+            var ctx = canvas.getContext("2d");
+
+            // Resolve tokens to concrete values once at mount so nothing in
+            // the paint path depends on style recalc during seeks.
+            var hostDoc = root.ownerDocument;
+            function resolveColor(cssColor, fallback) {
+              var probe = hostDoc.createElement("span");
+              probe.style.color = cssColor;
+              root.appendChild(probe);
+              var out = getComputedStyle(probe).color || fallback;
+              probe.remove();
+              return out;
+            }
+            var bgColor = resolveColor("var(--bg, #0b0c0e)", "#0b0c0e");
+            var inkColor = resolveColor(accentColors[accent], "#71f5a7");
+            var probeFont = hostDoc.createElement("span");
+            probeFont.style.fontFamily =
+              'var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace)';
+            root.appendChild(probeFont);
+            var monoFamily = getComputedStyle(probeFont).fontFamily || "monospace";
+            probeFont.remove();
+
+            // Source raster: cssW x cssH capped to 1280 wide, composited
+            // over the resolved bg so luminance never depends on alpha.
+            var rasterScale = Math.min(1, 1280 / cssW);
+            var rw = Math.max(1, Math.round(cssW * rasterScale));
+            var rh = Math.max(1, Math.round(cssH * rasterScale));
+            var raster = hostDoc.createElement("canvas");
+            raster.width = rw;
+            raster.height = rh;
+            var rctx = raster.getContext("2d");
+
+            // Luminance summed-area table so any cell's average is O(1) and
+            // a pure function of the fixed raster.
+            var sat = null; // Float64Array (rw+1)*(rh+1)
+            function buildSat() {
+              var data = rctx.getImageData(0, 0, rw, rh).data;
+              var table = new Float64Array((rw + 1) * (rh + 1));
+              for (var y = 0; y < rh; y += 1) {
+                var rowSum = 0;
+                for (var x = 0; x < rw; x += 1) {
+                  var i = (y * rw + x) * 4;
+                  rowSum += (0.299 * data[i] + 0.587 * data[i + 1] + 0.114 * data[i + 2]) / 255;
+                  table[(y + 1) * (rw + 1) + (x + 1)] = table[y * (rw + 1) + (x + 1)] + rowSum;
+                }
+              }
+              sat = table;
+            }
+            function cellLuma(x0, y0, x1, y1) {
+              // Raster-space integer rect, clamped.
+              if (x1 <= x0 || y1 <= y0) return 0;
+              var s = rw + 1;
+              var sum = sat[y1 * s + x1] - sat[y0 * s + x1] - sat[y1 * s + x0] + sat[y0 * s + x0];
+              return sum / ((x1 - x0) * (y1 - y0));
+            }
+
+            function paintMonogram(target, w, h) {
+              // Synchronous token monogram raster: a surface tile with one
+              // display glyph, same vocabulary as the slot-less siblings.
+              var m = Math.min(w, h);
+              target.fillStyle = bgColor;
+              target.fillRect(0, 0, w, h);
+              var tile = m * 0.52;
+              var x = (w - tile) / 2;
+              var y = (h - tile) / 2;
+              var r = m * 0.05;
+              target.fillStyle = resolveColor(
+                "color-mix(in srgb, var(--surface, #14171c) 72%, " + accentColors[accent] + ")",
+                "#1a2a22",
+              );
+              target.beginPath();
+              if (target.roundRect) target.roundRect(x, y, tile, tile, r);
+              else target.rect(x, y, tile, tile);
+              target.fill();
+              target.fillStyle = resolveColor(
+                "color-mix(in srgb, var(--fg, #f8fafc) 30%, " + accentColors[accent] + ")",
+                "#a8f5c8",
+              );
+              target.font = "600 " + Math.round(m * 0.3) + "px " + monoFamily;
+              target.textAlign = "center";
+              target.textBaseline = "middle";
+              target.fillText("H", w / 2, h / 2 + m * 0.012);
+            }
+
+            // SLOT. Rasterized through an SVG foreignObject snapshot of the
+            // slot markup plus every host <style> tag and the resolved
+            // contract tokens, so host-authored rules and theme values
+            // apply inside the snapshot.
+            var slotTemplate = null;
+            try {
+              slotTemplate = hostDoc.querySelector('template[data-slot="ascii-render-pass-scene"]');
+            } catch (error) {
+              slotTemplate = null;
+            }
+
+            var rasterReady = false;
+            function finishRaster() {
+              buildSat();
+              rasterReady = true;
+              root.setAttribute("data-arp-raster", "ready");
+              paint(tl ? tl.time() : 0);
+            }
+
+            if (slotTemplate) {
+              var tokenNames = [
+                "--bg",
+                "--fg",
+                "--muted",
+                "--surface",
+                "--border",
+                "--brand",
+                "--accent",
+                "--accent-2",
+                "--font-display",
+                "--font-body",
+                "--font-mono",
+                "--radius",
+                "--space-1",
+                "--space-2",
+                "--space-3",
+                "--dur-beat",
+                "--ease-standard",
+                "--ease-emphasis",
+              ];
+              var rootStyle = getComputedStyle(root);
+              var tokenDecl = "";
+              for (var ti = 0; ti < tokenNames.length; ti += 1) {
+                var tv = rootStyle.getPropertyValue(tokenNames[ti]).trim();
+                if (tv) tokenDecl += tokenNames[ti] + ":" + tv + ";";
+              }
+              var styleTexts = "";
+              var styleTags = hostDoc.querySelectorAll("style");
+              for (var si = 0; si < styleTags.length; si += 1) {
+                styleTexts += styleTags[si].textContent || "";
+              }
+              var wrapper = hostDoc.createElement("div");
+              wrapper.setAttribute(
+                "style",
+                "width:" +
+                  rw +
+                  "px;height:" +
+                  rh +
+                  "px;overflow:hidden;position:relative;" +
+                  "display:grid;place-items:center;background:" +
+                  bgColor +
+                  ";" +
+                  tokenDecl,
+              );
+              wrapper.appendChild(hostDoc.importNode(slotTemplate.content, true));
+              var styleEl = hostDoc.createElement("style");
+              styleEl.textContent = styleTexts;
+              wrapper.insertBefore(styleEl, wrapper.firstChild);
+              var serialized = new XMLSerializer().serializeToString(wrapper);
+              var svgMarkup =
+                // No xmlns on foreignObject: a default xmlns declaration
+                // applies to the declaring element itself and would eject
+                // foreignObject from the SVG namespace (renders blank). The
+                // serialized wrapper div already carries the XHTML namespace.
+                '<svg xmlns="http://www.w3.org/2000/svg" width="' +
+                rw +
+                '" height="' +
+                rh +
+                '"><foreignObject width="' +
+                rw +
+                '" height="' +
+                rh +
+                '">' +
+                serialized +
+                "</foreignObject></svg>";
+              var snapshot = new Image();
+              snapshot.onload = function () {
+                rctx.fillStyle = bgColor;
+                rctx.fillRect(0, 0, rw, rh);
+                rctx.drawImage(snapshot, 0, 0, rw, rh);
+                try {
+                  finishRaster();
+                } catch (error) {
+                  // Tainted or unreadable snapshot: fall back to the monogram.
+                  paintMonogram(rctx, rw, rh);
+                  finishRaster();
+                }
+              };
+              snapshot.onerror = function () {
+                paintMonogram(rctx, rw, rh);
+                finishRaster();
+              };
+              snapshot.src = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svgMarkup);
+            } else {
+              paintMonogram(rctx, rw, rh);
+            }
+
+            // Final cell pitch (display px) per grid enum; the ladder steps
+            // down from 4x on powers of sqrt(2). Stepped, not continuous:
+            // each step is a stable re-sample, the digital resolve.
+            var rowsFinal = { coarse: 22, med: 36, fine: 54 };
+            var cellFinal = Math.max(4, cssH / rowsFinal[grid]);
+            var LADDER = [4, 2.83, 2, 1.41, 1];
+            var LAST = LADDER.length - 1;
+
+            function clamp01(v) {
+              return v < 0 ? 0 : v > 1 ? 1 : v;
+            }
+            // Stateless integer hash for per-cell shimmer: pure function of
+            // (col, row, step), no stream, no state.
+            function hash01(cx, cy, step) {
+              var h =
+                Math.imul(cx + 1, 0x9e3779b1) ^
+                Math.imul(cy + 1, 0x85ebca6b) ^
+                Math.imul(step + 1, 0xc2b2ae35);
+              h = Math.imul(h ^ (h >>> 15), 0x27d4eb2f);
+              h = (h ^ (h >>> 13)) >>> 0;
+              return h / 4294967296;
+            }
+
+            var glyphs = charset.split("");
+            var GN = glyphs.length;
+
+            // Pure repaint from (raster tables, t).
+            function paint(timeSeconds) {
+              ctx.fillStyle = bgColor;
+              ctx.fillRect(0, 0, canvas.width, canvas.height);
+              if (!rasterReady) return;
+              var t = timeSeconds;
+              var fade = clamp01(t / FADE_IN);
+              fade = 1 - (1 - fade) * (1 - fade); // power2.out
+              if (fade <= 0) return;
+              var rp = clamp01((t - resolveAt) / RESOLVE);
+              rp = rp * rp * (3 - 2 * rp); // smoothstep across the ladder
+              var step = Math.min(LAST, Math.floor(rp * LAST + 1e-6));
+              if (rp >= 1) step = LAST;
+              var cell = cellFinal * LADDER[step];
+              var cols = Math.ceil(cssW / cell);
+              var rows = Math.ceil(cssH / cell);
+              var cellDev = cell * dpr;
+              ctx.font = "600 " + cellDev * 0.92 + "px " + monoFamily;
+              ctx.textAlign = "center";
+              ctx.textBaseline = "middle";
+              ctx.fillStyle = inkColor;
+              // Shimmer amplitude decays to exactly zero on the final step
+              // so the HOLD is truly still.
+              var shimmerAmp = step === LAST && rp >= 1 ? 0 : 0.16;
+              for (var cy = 0; cy < rows; cy += 1) {
+                for (var cx = 0; cx < cols; cx += 1) {
+                  var x0 = Math.round(cx * cell * rasterScale);
+                  var y0 = Math.round(cy * cell * rasterScale);
+                  var x1 = Math.min(rw, Math.round((cx + 1) * cell * rasterScale));
+                  var y1 = Math.min(rh, Math.round((cy + 1) * cell * rasterScale));
+                  var luma = cellLuma(x0, Math.min(y0, rh), x1, Math.min(y1, rh));
+                  var idx = Math.round(luma * (GN - 1));
+                  if (idx <= 0 && glyphs[0] === " ") continue;
+                  var alpha = (0.3 + 0.7 * luma) * fade;
+                  if (shimmerAmp > 0) {
+                    alpha *= 1 - shimmerAmp + shimmerAmp * hash01(cx, cy, step);
+                  }
+                  if (alpha <= 0.01) continue;
+                  ctx.globalAlpha = clamp01(alpha);
+                  ctx.fillText(glyphs[idx], (cx + 0.5) * cellDev, (cy + 0.5) * cellDev);
+                }
+              }
+              ctx.globalAlpha = 1;
+            }
+
+            gsap.set(stage, { opacity: 1, y: "0cqh" });
+
+            var tl = gsap.timeline({
+              paused: true,
+              onUpdate: function () {
+                paint(tl.time());
+              },
+            });
+
+            // Anchor tween: spans the full authored duration so onUpdate
+            // (the canvas repaint) fires for every eventful seek in [0, D]
+            // and holds keep tl.time() honest.
+            tl.to({ t: 0 }, { t: 1, duration: duration, ease: "none" }, 0);
+
+            // HOLD: legible-fine, truly still (shimmer amplitude is zero
+            // past the final ladder step; the raster never changes).
+
+            // OUT: optional departure; exit none holds until the frame cuts.
+            if (exit === "up") {
+              tl.to(stage, { y: "-4cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "fade") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            }
+
+            tl.seek(0);
+            paint(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["ascii-render-pass"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/ascii-render-pass/demo.html b/docs/public/catalog/components/ascii-render-pass/demo.html
new file mode 100644
index 0000000000..02eb84189a
--- /dev/null
+++ b/docs/public/catalog/components/ascii-render-pass/demo.html
@@ -0,0 +1,142 @@
+<!doctype html>
+<!--
+  ascii-render-pass demo. A full-bleed 1920x1080 LIGHT host mounts the
+  primitive through data-composition-src with non-default variables
+  (fine grid, earlier resolve, blue accent) and supplies the scene slot
+  to prove the snapshot raster path while the primitive stays elastic.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>ASCII Render Pass Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #f5f6f8);
+      }
+
+      #root {
+        --bg: #f5f6f8;
+        --fg: #101318;
+        --muted: #5b6472;
+        --surface: #ffffff;
+        --border: #d7dce4;
+        --brand: #14a35e;
+        --accent: #2f6fed;
+        --accent-2: #7a5cd6;
+        --radius: 24px;
+        --font-display: "Inter", system-ui, sans-serif;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg);
+      }
+
+      .mount-stage {
+        position: absolute;
+        inset: 0;
+        container-type: size;
+        overflow: hidden;
+      }
+
+      .ascii-demo-scene {
+        display: grid;
+        place-items: center;
+        gap: 20px;
+      }
+
+      .ascii-demo-scene .panel {
+        display: grid;
+        place-items: center;
+        gap: 16px;
+        width: 860px;
+        height: 460px;
+        border-radius: 32px;
+        background: #101318;
+      }
+
+      .ascii-demo-scene .word {
+        color: #ffffff;
+        font-family: system-ui, sans-serif;
+        font-size: 132px;
+        font-weight: 600;
+        letter-spacing: -0.01em;
+      }
+
+      .ascii-demo-scene .tag {
+        color: #9aa5b4;
+        font-family: ui-monospace, Menlo, monospace;
+        font-size: 30px;
+        letter-spacing: 0.16em;
+        text-transform: uppercase;
+      }
+    </style>
+  </head>
+  <body>
+    <template data-slot="ascii-render-pass-scene">
+      <div class="ascii-demo-scene">
+        <div class="panel">
+          <span class="word">SHIP IT</span>
+          <span class="tag">build 4.2.0</span>
+        </div>
+      </div>
+    </template>
+
+    <div
+      id="root"
+      data-composition-id="ascii-render-pass-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="ascii-render-pass-mount"
+        class="mount-stage clip"
+        data-composition-id="ascii-render-pass"
+        data-composition-src="./ascii-render-pass.html"
+        data-variable-values='{"grid":"fine","resolve_at":1.2,"accent":"blue"}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="1920"
+        data-height="1080"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["ascii-render-pass-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "ascii-render-pass.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/ascii-trail-reveal/ascii-trail-reveal.html b/docs/public/catalog/components/ascii-trail-reveal/ascii-trail-reveal.html
new file mode 100644
index 0000000000..8852c87618
--- /dev/null
+++ b/docs/public/catalog/components/ascii-trail-reveal/ascii-trail-reveal.html
@@ -0,0 +1,380 @@
+<!doctype html>
+<!--
+  ascii-trail-reveal: HyperFrames video primitive (intros and reveals)
+
+  Concept: a luminous actor follows an authored S-curve across an ASCII
+  signal grid. Cells flip away behind the actor to reveal the real panel,
+  while the lagging edge dissolves in a deterministic cascade.
+
+  Variables:
+    - label (string, default "The reveal"): text on the revealed panel.
+    - accent (green | blue | violet, default "green"): trail and panel accent.
+    - trail_width (narrow | wide, default "narrow"): width of the reveal tail.
+
+  Envelope (fixed IN and OUT, elastic HOLD only, never timeScale):
+    IN_BASE  = 3.20s  the actor crosses the authored path, rests briefly,
+               then dissolves as the final cells complete their flip
+    HOLD     = elastic = max(0, D - IN_BASE), fully revealed content drifts
+               subtly and remains legible
+    OUT_BASE = 0.00s  the revealed panel is the required end state
+    If D is shorter than IN_BASE, IN compresses to D and HOLD is zero.
+
+  Determinism: glyphs, cell timing jitter, and reveal order come only from
+  row, column, and index math. No clock or random source participates.
+-->
+<html
+  lang="en"
+  data-composition-id="ascii-trail-reveal"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "label", "type": "string", "role": "content", "label": "Panel label", "description": "Text shown on the revealed panel.", "default": "The reveal" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Color used by the trail and revealed panel.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "trail_width", "type": "enum", "role": "layout", "label": "Trail width", "description": "Width of the cell reveal tail around the authored path.", "default": "narrow", "options": [{ "value": "narrow", "label": "Narrow" }, { "value": "wide", "label": "Wide" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>ASCII Trail Reveal</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="ascii-trail-reveal" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .atr-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+          }
+
+          .atr-panel {
+            position: relative;
+            width: 88cqw;
+            height: 76cqh;
+            overflow: hidden;
+            border: 0.16cqmin solid color-mix(in srgb, var(--atr-accent) 52%, #475569);
+            border-radius: 3cqmin;
+            background: #111820;
+            box-shadow:
+              0 4cqh 12cqh rgba(0, 0, 0, 0.45),
+              inset 0 0 0 0.12cqmin rgba(255, 255, 255, 0.04);
+            perspective: 80cqmin;
+          }
+
+          .atr-content {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            padding: 8cqw;
+            background:
+              radial-gradient(
+                circle at 50% 45%,
+                color-mix(in srgb, var(--atr-accent) 24%, transparent),
+                transparent 48%
+              ),
+              linear-gradient(145deg, #17212c, #0c1219);
+            transform-origin: 50% 50%;
+          }
+
+          .atr-label {
+            max-width: 76cqw;
+            color: #f8fafc;
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: clamp(24px, 10cqmin, 112px);
+            font-weight: 760;
+            line-height: 0.96;
+            letter-spacing: -0.045em;
+            text-align: center;
+            text-wrap: balance;
+            text-shadow: 0 0 4cqmin color-mix(in srgb, var(--atr-accent) 28%, transparent);
+          }
+
+          .atr-grid {
+            --atr-columns: 24;
+            --atr-rows: 14;
+            position: absolute;
+            inset: 0;
+            z-index: 2;
+            display: grid;
+            grid-template-columns: repeat(var(--atr-columns), 1fr);
+            grid-template-rows: repeat(var(--atr-rows), 1fr);
+            overflow: hidden;
+            background: #0b1016;
+            transform-style: preserve-3d;
+          }
+
+          .atr-cell {
+            display: grid;
+            place-items: center;
+            min-width: 0;
+            min-height: 0;
+            overflow: hidden;
+            border-right: 0.06cqmin solid rgba(148, 163, 184, 0.08);
+            border-bottom: 0.06cqmin solid rgba(148, 163, 184, 0.08);
+            background: color-mix(in srgb, #111820 94%, var(--atr-accent));
+            color: color-mix(in srgb, var(--atr-accent) 72%, #dbeafe);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
+            font-size: clamp(7px, 2.35cqmin, 22px);
+            font-weight: 650;
+            line-height: 1;
+            transform-origin: 50% 50%;
+            backface-visibility: hidden;
+            will-change: transform, opacity;
+          }
+
+          .atr-path-layer {
+            position: absolute;
+            inset: 0;
+            z-index: 3;
+            width: 100%;
+            height: 100%;
+            overflow: visible;
+          }
+
+          .atr-path-guide {
+            fill: none;
+            stroke: color-mix(in srgb, var(--atr-accent) 34%, transparent);
+            stroke-width: 2;
+            stroke-linecap: round;
+            stroke-dasharray: 3 14;
+          }
+
+          .atr-actor-halo {
+            fill: color-mix(in srgb, var(--atr-accent) 22%, transparent);
+          }
+
+          .atr-actor-core {
+            fill: #f8fafc;
+            stroke: var(--atr-accent);
+            stroke-width: 7;
+            filter: drop-shadow(0 0 18px var(--atr-accent));
+          }
+        </style>
+
+        <div
+          id="ascii-trail-reveal-clip"
+          class="atr-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="atr-panel">
+            <div class="atr-content">
+              <div class="atr-label"></div>
+            </div>
+            <div class="atr-grid" aria-hidden="true"></div>
+            <svg
+              class="atr-path-layer"
+              viewBox="0 0 1000 600"
+              preserveAspectRatio="none"
+              aria-hidden="true"
+            >
+              <path class="atr-path-guide"></path>
+              <g id="ascii-trail-reveal-actor">
+                <circle class="atr-actor-halo" r="42"></circle>
+                <circle class="atr-actor-core" r="13"></circle>
+              </g>
+            </svg>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var content = root.querySelector(".atr-content");
+            var label = root.querySelector(".atr-label");
+            var grid = root.querySelector(".atr-grid");
+            var guide = root.querySelector(".atr-path-guide");
+            var actor = root.querySelector("#ascii-trail-reveal-actor");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var labelText = vars.label == null ? "The reveal" : String(vars.label);
+            var accent = vars.accent === "blue" || vars.accent === "violet" ? vars.accent : "green";
+            var trailWidth = vars.trail_width === "wide" ? "wide" : "narrow";
+            var accentColors = {
+              green: "var(--brand, #4ade80)",
+              blue: "var(--accent, #38bdf8)",
+              violet: "var(--accent-2, #a78bfa)",
+            };
+
+            label.textContent = labelText;
+            root.style.setProperty("--atr-accent", accentColors[accent]);
+
+            var COLS = 24;
+            var ROWS = 14;
+            var GLYPHS = " .:-=+*#%@01/\\<>[]{}";
+            var PATH_POINTS = [
+              [-80, 460],
+              [340, 460],
+              [660, 140],
+              [1080, 140],
+            ];
+            var cells = [];
+
+            function sCurvePoint(progress) {
+              var inverse = 1 - progress;
+              var startWeight = inverse * inverse * inverse;
+              var firstWeight = 3 * inverse * inverse * progress;
+              var secondWeight = 3 * inverse * progress * progress;
+              var endWeight = progress * progress * progress;
+              return {
+                x:
+                  startWeight * PATH_POINTS[0][0] +
+                  firstWeight * PATH_POINTS[1][0] +
+                  secondWeight * PATH_POINTS[2][0] +
+                  endWeight * PATH_POINTS[3][0],
+                y:
+                  startWeight * PATH_POINTS[0][1] +
+                  firstWeight * PATH_POINTS[1][1] +
+                  secondWeight * PATH_POINTS[2][1] +
+                  endWeight * PATH_POINTS[3][1],
+              };
+            }
+
+            guide.setAttribute(
+              "d",
+              "M " +
+                PATH_POINTS[0].join(" ") +
+                " C " +
+                PATH_POINTS.slice(1)
+                  .map(function (point) {
+                    return point.join(" ");
+                  })
+                  .join(" "),
+            );
+
+            for (var row = 0; row < ROWS; row += 1) {
+              for (var column = 0; column < COLS; column += 1) {
+                var index = row * COLS + column;
+                var cell = document.createElement("span");
+                var glyphIndex = (index * 17 + row * 11 + column * 7) % GLYPHS.length;
+                cell.className = "atr-cell";
+                cell.textContent = GLYPHS.charAt(glyphIndex);
+                grid.appendChild(cell);
+                cells.push({ element: cell, row: row, column: column, index: index });
+              }
+            }
+
+            var IN_BASE = 3.2;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var IN = Math.min(IN_BASE, duration);
+            var HOLD = Math.max(0, duration - IN);
+            var phaseScale = IN / IN_BASE;
+            var actorState = { progress: 0 };
+
+            function updateActor() {
+              var point = sCurvePoint(actorState.progress);
+              actor.setAttribute("transform", "translate(" + point.x + " " + point.y + ")");
+            }
+
+            gsap.set(content, { scale: 0.985 });
+            gsap.set(guide, { opacity: 0 });
+            gsap.set(actor, { opacity: 0 });
+            updateActor();
+
+            var tl = gsap.timeline({ paused: true });
+
+            tl.to(content, { scale: 1, duration: IN, ease: "power2.out" }, 0);
+            tl.to(
+              guide,
+              { opacity: 0.72, duration: 0.24 * phaseScale, ease: "power2.out" },
+              0.18 * phaseScale,
+            );
+            tl.to(
+              actor,
+              { opacity: 1, duration: 0.24 * phaseScale, ease: "power2.out" },
+              0.22 * phaseScale,
+            );
+            tl.to(
+              actorState,
+              {
+                progress: 1,
+                duration: 2.35 * phaseScale,
+                ease: "power2.out",
+                onUpdate: updateActor,
+              },
+              0.34 * phaseScale,
+            );
+
+            cells.forEach(function (cellData) {
+              var progress = (cellData.column + 0.5) / COLS;
+              var pathPoint = sCurvePoint(progress);
+              var cellY = ((cellData.row + 0.5) / ROWS) * 600;
+              var distanceFromPath = Math.abs(cellY - pathPoint.y) / 600;
+              var distanceLag = distanceFromPath * (trailWidth === "wide" ? 0.5 : 0.8);
+              var indexJitter = ((cellData.index * 37) % 11) * 0.009;
+              var revealAt = (0.42 + progress * 1.92 + distanceLag + indexJitter) * phaseScale;
+              var flipDuration = (0.2 + ((cellData.index * 13) % 5) * 0.018) * phaseScale;
+
+              tl.to(
+                cellData.element,
+                {
+                  rotationY: 88,
+                  scaleX: 0.3,
+                  opacity: 0,
+                  duration: flipDuration,
+                  ease: "power2.in",
+                },
+                revealAt,
+              );
+            });
+
+            tl.to(
+              guide,
+              { opacity: 0, duration: 0.24 * phaseScale, ease: "power2.in" },
+              2.82 * phaseScale,
+            );
+            tl.to(
+              actor,
+              { opacity: 0, duration: 0.24 * phaseScale, ease: "power2.in" },
+              2.92 * phaseScale,
+            );
+
+            if (HOLD > 0) {
+              tl.to(
+                content,
+                {
+                  scale: 1.008,
+                  duration: HOLD / 2,
+                  ease: "sine.inOut",
+                  yoyo: true,
+                  repeat: 1,
+                },
+                IN,
+              );
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["ascii-trail-reveal"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/ascii-trail-reveal/demo.html b/docs/public/catalog/components/ascii-trail-reveal/demo.html
new file mode 100644
index 0000000000..9b5861e808
--- /dev/null
+++ b/docs/public/catalog/components/ascii-trail-reveal/demo.html
@@ -0,0 +1,103 @@
+<!doctype html>
+<!--
+  ascii-trail-reveal demo. This standalone composition mounts the primitive
+  through data-composition-src. Non-default label, accent, and trail width
+  values prove that all variables flow through the elastic host box.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>ASCII Trail Reveal Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0b0c0e;
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --surface: #151a22;
+        --border: #334155;
+        --brand: #4ade80;
+        --accent: #a78bfa;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-body: Inter, system-ui, sans-serif;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(circle at 50% 45%, #171b24 0%, #0b0c0e 68%);
+      }
+
+      .mount-card {
+        width: 82%;
+        height: 72%;
+        left: 9%;
+        top: 14%;
+        overflow: hidden;
+        container-type: size;
+        border-radius: 32px;
+        background: #10141a;
+        box-shadow: 0 50px 110px rgba(0, 0, 0, 0.48);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="ascii-trail-reveal-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="ascii-trail-reveal-mount"
+        class="mount-card clip"
+        data-composition-id="ascii-trail-reveal"
+        data-composition-src="./ascii-trail-reveal.html"
+        data-variable-values='{"label":"Signal restored","accent":"violet","trail_width":"wide"}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="1574"
+        data-height="778"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["ascii-trail-reveal-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "ascii-trail-reveal.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/aurora-drift/aurora-drift.html b/docs/public/catalog/components/aurora-drift/aurora-drift.html
new file mode 100644
index 0000000000..49ce87c211
--- /dev/null
+++ b/docs/public/catalog/components/aurora-drift/aurora-drift.html
@@ -0,0 +1,235 @@
+<!doctype html>
+<!--
+  aurora-drift: HyperFrames video primitive (backgrounds / ambient)
+
+  Concept: three oversized, softly blurred accent-derived fields drift over
+  a deep base beneath a faint vignette. The motion stays slow and restrained,
+  giving a scene color and depth without competing with foreground content.
+
+  Variables:
+    - accent (green | blue | violet, default green): selects the source token
+      from which the three related aurora hues are mixed.
+    - mood (deep | bright, default deep): controls base luminance and field
+      strength while preserving the same motion.
+
+  Envelope: IN = 0, HOLD = the full elastic duration, OUT = 0. The phase proxy
+  advances through exactly one whole sine cycle during HOLD. A longer mount
+  stretches only that ambient cycle.
+
+  Loop invariant: phase 2 * PI is normalized to phase 0 before any transform
+  is calculated, so every blob has exactly the same pose at t=0 and t=duration.
+
+  Sound: none.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, has no data-width or data-height,
+  and registers one paused timeline under the hardcoded aurora-drift id.
+-->
+<html
+  lang="en"
+  data-composition-id="aurora-drift"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Accent token family used to derive the aurora hues.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "mood", "type": "enum", "role": "style", "label": "Mood", "description": "Base luminance and aurora field strength.", "default": "deep", "options": [{ "value": "deep", "label": "Deep" }, { "value": "bright", "label": "Bright" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Aurora Drift</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="aurora-drift" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            pointer-events: none;
+          }
+
+          .ad-clip,
+          .ad-base,
+          .ad-vignette {
+            position: absolute;
+            inset: 0;
+          }
+
+          .ad-clip {
+            overflow: hidden;
+          }
+
+          .ad-base {
+            background:
+              radial-gradient(
+                ellipse at 50% 42%,
+                color-mix(in srgb, var(--ad-color) 8%, var(--ad-base)) 0%,
+                var(--ad-base) 68%
+              ),
+              var(--ad-base);
+          }
+
+          .ad-blob {
+            --ad-blob-opacity: 1;
+            position: absolute;
+            display: block;
+            border-radius: 50%;
+            filter: blur(12cqmin) saturate(0.84) opacity(var(--ad-blob-opacity));
+            mix-blend-mode: screen;
+            opacity: var(--ad-strength);
+            will-change: transform;
+          }
+
+          .ad-blob-a {
+            width: 76cqw;
+            height: 72cqh;
+            left: -18cqw;
+            top: -22cqh;
+            background: radial-gradient(
+              ellipse at center,
+              color-mix(in srgb, var(--ad-color) 88%, white) 0%,
+              color-mix(in srgb, var(--ad-color) 42%, transparent) 48%,
+              transparent 76%
+            );
+          }
+
+          .ad-blob-b {
+            width: 84cqw;
+            height: 78cqh;
+            right: -28cqw;
+            top: -2cqh;
+            --ad-blob-opacity: 0.82;
+            background: radial-gradient(
+              ellipse at center,
+              color-mix(in srgb, var(--ad-color) 72%, var(--accent, #38bdf8)) 0%,
+              color-mix(in srgb, var(--ad-color) 36%, transparent) 52%,
+              transparent 78%
+            );
+          }
+
+          .ad-blob-c {
+            width: 72cqw;
+            height: 74cqh;
+            left: 18cqw;
+            bottom: -34cqh;
+            --ad-blob-opacity: 0.68;
+            background: radial-gradient(
+              ellipse at center,
+              color-mix(in srgb, var(--ad-color) 72%, var(--accent-2, #a78bfa)) 0%,
+              color-mix(in srgb, var(--ad-color) 32%, transparent) 50%,
+              transparent 76%
+            );
+          }
+
+          .ad-vignette {
+            background: radial-gradient(
+              ellipse at center,
+              transparent 35%,
+              rgb(0 0 0 / var(--ad-vignette)) 100%
+            );
+          }
+        </style>
+
+        <div
+          id="aurora-drift-clip"
+          class="ad-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="ad-base"></div>
+          <div class="ad-blob ad-blob-a"></div>
+          <div class="ad-blob ad-blob-b"></div>
+          <div class="ad-blob ad-blob-c"></div>
+          <div class="ad-vignette"></div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            // Invalid enum overrides return to their declared defaults.
+            var accentTokens = {
+              green: "var(--brand, #34d399)",
+              blue: "var(--accent, #38bdf8)",
+              violet: "var(--accent-2, #a78bfa)",
+            };
+            var moodStyles = {
+              deep: { base: "#050711", strength: "0.42", vignette: "0.62" },
+              bright: { base: "#111827", strength: "0.56", vignette: "0.46" },
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentTokens, vars.accent)
+              ? vars.accent
+              : "green";
+            var mood = vars.mood === "bright" ? "bright" : "deep";
+            var moodStyle = moodStyles[mood];
+
+            root.style.setProperty("--ad-color", accentTokens[accent]);
+            root.style.setProperty("--ad-base", moodStyle.base);
+            root.style.setProperty("--ad-strength", moodStyle.strength);
+            root.style.setProperty("--ad-vignette", moodStyle.vignette);
+
+            var TAU = Math.PI * 2;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var state = { phase: 0 };
+            var paths = [
+              { element: root.querySelector(".ad-blob-a"), offset: 0, x: 4.6, y: 3.2 },
+              {
+                element: root.querySelector(".ad-blob-b"),
+                offset: TAU / 3,
+                x: 4.1,
+                y: 3.8,
+              },
+              {
+                element: root.querySelector(".ad-blob-c"),
+                offset: (TAU * 2) / 3,
+                x: 3.6,
+                y: 3,
+              },
+            ];
+
+            function renderPose() {
+              // The endpoint uses literal phase zero, avoiding the floating
+              // point residue from Math.sin(2 * PI).
+              var phase = state.phase === TAU ? 0 : state.phase;
+              paths.forEach(function (path) {
+                gsap.set(path.element, {
+                  x: Math.sin(phase + path.offset) * path.x + "cqw",
+                  y: Math.sin(phase + path.offset + Math.PI / 2) * path.y + "cqh",
+                });
+              });
+            }
+
+            var tl = gsap.timeline({ paused: true });
+
+            // HOLD: uniform phase travel produces smooth sine motion. Exactly
+            // one whole cycle is completed at the duration boundary.
+            tl.to(state, { phase: TAU, duration: duration, ease: "none", onUpdate: renderPose }, 0);
+
+            renderPose();
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines["aurora-drift"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/aurora-drift/demo.html b/docs/public/catalog/components/aurora-drift/demo.html
new file mode 100644
index 0000000000..91d7c3630b
--- /dev/null
+++ b/docs/public/catalog/components/aurora-drift/demo.html
@@ -0,0 +1,102 @@
+<!doctype html>
+<!--
+  aurora-drift demo. This standalone composition mounts aurora-drift.html
+  through data-composition-src. The bright violet overrides prove both
+  variables flow through the mount while the primitive stays host-sized.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Aurora Drift Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0b0c0e;
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --surface: #17191f;
+        --fg: #f8fafc;
+        --muted: #94a3b8;
+        --accent: #38bdf8;
+        --accent-2: #a78bfa;
+        --brand: #34d399;
+        --border: #334155;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 42%, #17191f 0%, #0b0c0e 72%);
+      }
+
+      .mount-card {
+        width: 75%;
+        height: 70%;
+        left: 12.5%;
+        top: 15%;
+        overflow: hidden;
+        border: 1px solid rgb(255 255 255 / 0.14);
+        border-radius: 28px;
+        background: #080a12;
+        box-shadow: 0 5cqh 14cqh rgb(0 0 0 / 0.52);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="aurora-drift-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="aurora-drift-mount"
+        class="mount-card clip"
+        data-composition-id="aurora-drift"
+        data-composition-src="./aurora-drift.html"
+        data-variable-values='{"accent":"violet","mood":"bright"}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="1440"
+        data-height="756"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["aurora-drift-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "aurora-drift.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/avatar-cloud/avatar-cloud.html b/docs/public/catalog/components/avatar-cloud/avatar-cloud.html
new file mode 100644
index 0000000000..05a1820d86
--- /dev/null
+++ b/docs/public/catalog/components/avatar-cloud/avatar-cloud.html
@@ -0,0 +1,470 @@
+<!doctype html>
+<!--
+  avatar-cloud: HyperFrames video primitive (effects / holdable / prove)
+
+  Concept: lettermark avatars populate a loose elliptical cloud around a
+  central proof label. Fine SVG links draw from the hub to every avatar, plus
+  selected avatar-to-avatar edges, so the beat communicates connection rather
+  than quantity alone. One mechanic, one job: prove community participation.
+
+  Compiled-from evidence: consumer-sim fixture plus the
+  avatar-cloud-network animation rule. The rule establishes the elliptical
+  cluster, layered hub, staggered avatar arrival, outward SVG link draw, and
+  readable climax dwell.
+
+  Use when: a scene needs to show an active builder, customer, creator, or
+  collaborator community without external photos or brand assets.
+
+  Variables (declared in data-composition-variables below):
+    - avatarCount (number, default 10, range 6 to 16): visible lettermarks.
+    - showLinks ("yes" | "no", default "yes"): include network links.
+    - label (string, default "50k builders"): proof copy in the center hub.
+
+  Envelope (fixed IN/OUT, elastic HOLD only, never gsap.timeScale()):
+    IN_BASE  = 2.20s  hub settles, avatars cascade in, then links draw.
+    HOLD     = elastic = max(0, D - (IN_BASE + OUT_BASE)); deterministic,
+               out-of-phase sine drift keeps the formed network alive.
+    OUT_BASE = 0.50s  the complete proof beat accelerates into a clean fade.
+    If D is shorter than IN_BASE + OUT_BASE, IN and OUT scale together so
+    IN + OUT equals D and HOLD equals 0.
+
+  Sync point: network-formed at 2.15s into IN. It is a fixed offset before the
+  elastic HOLD and scales proportionally only when the envelope is compressed.
+
+  Sound cue: none. The distributed community assembly has no truthful single
+  impact, so this primitive does not dispatch an hf:sfx event.
+
+  Mount contract: this file is a mountable sub-composition. A host loads it via
+  data-composition-src, and the runtime clones only <template> contents. Styles,
+  markup, GSAP, and registration therefore live inside <template>. #root fills
+  the host with inset:0 and container-type:size and has no data-width or
+  data-height. The hardcoded id "avatar-cloud" matches the host id and timeline
+  key after mount flattening. Variables come from
+  window.__hyperframes.getVariables(), which merges declarations with host
+  data-variable-values overrides.
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "avatarCount", "type": "number", "role": "layout", "label": "Avatar count", "description": "Number of lettermark avatars in the network cloud.", "default": 10, "min": 6, "max": 16, "step": 1 },
+    { "id": "showLinks", "type": "enum", "role": "content", "label": "Show links", "description": "Show or hide the connecting network lines.", "default": "yes", "options": [{ "value": "yes", "label": "Yes" }, { "value": "no", "label": "No" }] },
+    { "id": "label", "type": "string", "role": "content", "label": "Proof label", "description": "Community proof copy shown in the center hub.", "default": "50k builders" }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Avatar Cloud</title>
+    <!-- Metadata only. Mounting discards everything outside <template>. -->
+  </head>
+  <body>
+    <template>
+      <div
+        id="root"
+        data-composition-id="avatar-cloud"
+        data-start="0"
+        data-duration="5"
+        data-fps="30"
+      >
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          /* INVARIANT: the host owns the box. The primitive owns one isolated,
+             position-blind size container and no viewport-relative geometry. */
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+          }
+
+          .ac-clip,
+          .ac-stage,
+          .ac-avatar-layer,
+          .ac-links {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+          }
+
+          .ac-clip {
+            overflow: hidden;
+            background:
+              radial-gradient(
+                ellipse at 50% 47.5%,
+                color-mix(in srgb, var(--fg, #f8fafc) 8%, transparent),
+                transparent 48%
+              ),
+              var(--bg, #0b0c10);
+          }
+
+          .ac-stage {
+            overflow: hidden;
+            transform-origin: center;
+          }
+
+          /* EDIT ZONE: lines use the same token pair as the avatars and hub.
+             The SVG viewBox owns all endpoints, so links and positions cannot
+             derive independently. */
+          .ac-links {
+            z-index: 1;
+            overflow: visible;
+            pointer-events: none;
+          }
+
+          .ac-link {
+            fill: none;
+            stroke: color-mix(in srgb, var(--fg, #f8fafc) 22%, transparent);
+            stroke-width: 1.8;
+            vector-effect: non-scaling-stroke;
+          }
+
+          .ac-link-secondary {
+            stroke: color-mix(in srgb, var(--fg, #f8fafc) 14%, transparent);
+            stroke-width: 1.2;
+          }
+
+          .ac-avatar-layer {
+            z-index: 2;
+          }
+
+          .ac-avatar-position {
+            position: absolute;
+            transform: translate(-50%, -50%);
+          }
+
+          .ac-avatar {
+            display: grid;
+            place-items: center;
+            width: min(calc(var(--ac-size) * 1cqw), calc(var(--ac-size) * 1.65cqh));
+            aspect-ratio: 1;
+            border: 0.16cqw solid color-mix(in srgb, var(--fg, #f8fafc) 32%, transparent);
+            border-radius: 999cqw;
+            background: var(--ac-color, color-mix(in srgb, var(--fg, #f8fafc) 45%, transparent));
+            color: var(--bg, #0b0c10);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: min(calc(var(--ac-size) * 0.35cqw), calc(var(--ac-size) * 0.58cqh));
+            font-weight: 780;
+            letter-spacing: -0.04em;
+            line-height: 1;
+            box-shadow:
+              0 1.2cqh 2.8cqh color-mix(in srgb, var(--bg, #0b0c10) 48%, transparent),
+              inset 0 0.12cqw 0 color-mix(in srgb, var(--fg, #f8fafc) 26%, transparent);
+            will-change: transform, opacity;
+          }
+
+          /* Tones are depth steps of the ink, not hues: near faces sit at L1,
+             mid at L2, far at L3. Value alone separates the cloud. */
+          .ac-avatar[data-tone="0"] {
+            --ac-color: color-mix(in srgb, var(--fg, #f8fafc) 72%, transparent);
+          }
+
+          .ac-avatar[data-tone="1"] {
+            --ac-color: color-mix(in srgb, var(--fg, #f8fafc) 45%, transparent);
+          }
+
+          .ac-avatar[data-tone="2"] {
+            --ac-color: color-mix(in srgb, var(--fg, #f8fafc) 72%, transparent);
+          }
+
+          .ac-avatar[data-tone="3"] {
+            --ac-color: color-mix(in srgb, var(--fg, #f8fafc) 30%, transparent);
+          }
+
+          .ac-avatar[data-tone="4"] {
+            --ac-color: color-mix(in srgb, var(--fg, #f8fafc) 45%, transparent);
+          }
+
+          .ac-hub {
+            position: absolute;
+            left: 50%;
+            top: 47.5%;
+            z-index: 5;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            min-width: 24cqw;
+            max-width: 48cqw;
+            min-height: 16cqh;
+            padding: var(--space-2, 2cqh) var(--space-3, 3cqw);
+            overflow: hidden;
+            border: 0.16cqw solid color-mix(in srgb, var(--border, #334155) 82%, transparent);
+            border-radius: var(--radius, 2.4cqw);
+            background: var(--surface, #1e293b);
+            box-shadow:
+              0 2cqh 5cqh color-mix(in srgb, var(--bg, #0b0c10) 56%, transparent),
+              inset 0 0.14cqw 0 color-mix(in srgb, var(--fg, #f8fafc) 18%, transparent);
+            transform: translate(-50%, -50%);
+            transform-origin: center;
+          }
+
+          .ac-kicker {
+            color: var(--muted, #8b93a3);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: min(1.6cqw, 2.8cqh);
+            font-weight: 720;
+            letter-spacing: 0.16em;
+            line-height: 1;
+            text-transform: uppercase;
+          }
+
+          .ac-label {
+            max-width: 40cqw;
+            overflow: hidden;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: min(5.2cqw, 9cqh);
+            font-weight: 820;
+            letter-spacing: -0.045em;
+            line-height: 1.05;
+            text-align: center;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+        </style>
+
+        <div
+          id="avatar-cloud-clip"
+          class="ac-clip clip"
+          data-start="0"
+          data-duration="5"
+          data-track-index="0"
+        >
+          <section class="ac-stage" aria-label="Community network proof">
+            <svg
+              class="ac-links"
+              viewBox="0 0 1000 600"
+              preserveAspectRatio="none"
+              aria-hidden="true"
+              focusable="false"
+            ></svg>
+            <div class="ac-avatar-layer" aria-hidden="true"></div>
+            <div class="ac-hub">
+              <span class="ac-kicker">Community</span>
+              <span class="ac-label"></span>
+            </div>
+          </section>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.currentScript.closest("#root") || document.getElementById("root");
+            var compositionId = "avatar-cloud";
+            var stage = root.querySelector(".ac-stage");
+            var linksLayer = root.querySelector(".ac-links");
+            var avatarLayer = root.querySelector(".ac-avatar-layer");
+            var hub = root.querySelector(".ac-hub");
+            var labelElement = root.querySelector(".ac-label");
+
+            // EDIT ZONE: getVariables is the only owner of declared defaults
+            // plus host overrides. Values are normalized exactly once here.
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var rawCount = Number(vars.avatarCount);
+            var avatarCount = Number.isFinite(rawCount) ? Math.round(rawCount) : 10;
+            avatarCount = Math.max(6, Math.min(16, avatarCount));
+            var showLinks = vars.showLinks === "no" ? "no" : "yes";
+            var label = vars.label == null ? "50k builders" : String(vars.label);
+            labelElement.textContent = label;
+
+            // One normalized coordinate table owns both DOM placement and SVG
+            // endpoints. Index-based sine offsets make the ellipse loose while
+            // remaining identical under every seek and render.
+            var CENTER = { x: 500, y: 285 };
+            var positions = [];
+            var avatars = [];
+            var lettermarks = [
+              "AK",
+              "BM",
+              "CR",
+              "DL",
+              "ES",
+              "FT",
+              "GN",
+              "HP",
+              "IV",
+              "JO",
+              "KQ",
+              "LU",
+              "MW",
+              "NX",
+              "OY",
+              "PZ",
+            ];
+            var avatarFragment = document.createDocumentFragment();
+
+            for (var index = 0; index < avatarCount; index += 1) {
+              var angle = -Math.PI / 2 + (index / avatarCount) * Math.PI * 2;
+              var radiusX = 356 + Math.sin((index + 1) * 2.37) * 24;
+              var radiusY = 194 + Math.sin((index + 1) * 1.61) * 18;
+              var x = CENTER.x + Math.cos(angle) * radiusX;
+              var y = CENTER.y + Math.sin(angle) * radiusY;
+              var size = 7.5 + Math.sin((index + 1) * 1.93) * 0.8;
+
+              positions.push({ x: x, y: y });
+
+              var positionElement = document.createElement("div");
+              positionElement.className = "ac-avatar-position";
+              positionElement.style.left = x / 10 + "%";
+              positionElement.style.top = y / 6 + "%";
+
+              var avatar = document.createElement("div");
+              avatar.className = "ac-avatar";
+              avatar.dataset.tone = String(index % 5);
+              avatar.style.setProperty("--ac-size", size.toFixed(2));
+              avatar.textContent = lettermarks[index];
+              positionElement.appendChild(avatar);
+              avatarFragment.appendChild(positionElement);
+              avatars.push(avatar);
+            }
+
+            avatarLayer.replaceChildren(avatarFragment);
+
+            var lines = [];
+
+            function appendLine(from, to, secondary) {
+              var line = document.createElementNS("http://www.w3.org/2000/svg", "line");
+              var length = Math.hypot(to.x - from.x, to.y - from.y);
+              line.setAttribute("x1", String(from.x));
+              line.setAttribute("y1", String(from.y));
+              line.setAttribute("x2", String(to.x));
+              line.setAttribute("y2", String(to.y));
+              line.setAttribute("class", secondary ? "ac-link ac-link-secondary" : "ac-link");
+              line.style.strokeDasharray = length + " " + length;
+              line.dataset.length = String(length);
+              linksLayer.appendChild(line);
+              lines.push(line);
+            }
+
+            if (showLinks === "yes") {
+              positions.forEach(function (position) {
+                appendLine(CENTER, position, false);
+              });
+
+              positions.forEach(function (position, positionIndex) {
+                if (positionIndex % 3 === 0) {
+                  appendLine(position, positions[(positionIndex + 2) % avatarCount], true);
+                }
+              });
+            }
+
+            // RETIME RANGE: these values own the complete lifecycle. The link
+            // wave fits the maximum 22-line network before the fixed sync point.
+            var IN_BASE = 2.2;
+            var OUT_BASE = 0.5;
+            var HUB_START_BASE = 0.05;
+            var HUB_DURATION_BASE = 0.5;
+            var AVATAR_START_BASE = 0.24;
+            var AVATAR_DURATION_BASE = 0.5;
+            var AVATAR_STAGGER_BASE = 0.055;
+            var LINES_START_BASE = 1.02;
+            var LINES_DURATION_BASE = 0.55;
+            var LINE_STAGGER_BASE = 0.025;
+
+            var durationValue = Number(root.dataset.duration);
+            var duration = Number.isFinite(durationValue) && durationValue > 0 ? durationValue : 5;
+            var envelopeScale = duration < IN_BASE + OUT_BASE ? duration / (IN_BASE + OUT_BASE) : 1;
+            var IN = IN_BASE * envelopeScale;
+            var OUT = OUT_BASE * envelopeScale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var HOLD_START = IN;
+            var OUT_START = IN + HOLD;
+            var HUB_START = HUB_START_BASE * envelopeScale;
+            var HUB_DURATION = HUB_DURATION_BASE * envelopeScale;
+            var AVATAR_START = AVATAR_START_BASE * envelopeScale;
+            var AVATAR_DURATION = AVATAR_DURATION_BASE * envelopeScale;
+            var AVATAR_STAGGER = AVATAR_STAGGER_BASE * envelopeScale;
+            var LINES_START = LINES_START_BASE * envelopeScale;
+            var LINES_DURATION = LINES_DURATION_BASE * envelopeScale;
+            var LINE_STAGGER = LINE_STAGGER_BASE * envelopeScale;
+
+            gsap.set(stage, { opacity: 1, scale: 1 });
+            gsap.set(hub, { opacity: 0, scale: 0.94 });
+            gsap.set(avatars, { opacity: 0, scale: 0.92, x: 0, y: 0 });
+            lines.forEach(function (line) {
+              gsap.set(line, { opacity: 0, strokeDashoffset: Number(line.dataset.length) });
+            });
+
+            var timeline = gsap.timeline({ paused: true });
+
+            // IN: --ease-standard maps to GSAP power2.out in the shared easing
+            // vocabulary. No entrance starts at scale zero.
+            timeline.to(
+              hub,
+              { opacity: 1, scale: 1, duration: HUB_DURATION, ease: "power2.out" },
+              HUB_START,
+            );
+            timeline.to(
+              avatars,
+              {
+                opacity: 1,
+                scale: 1,
+                duration: AVATAR_DURATION,
+                ease: "power2.out",
+                stagger: { each: AVATAR_STAGGER, from: "start" },
+              },
+              AVATAR_START,
+            );
+
+            lines.forEach(function (line, lineIndex) {
+              timeline.to(
+                line,
+                {
+                  opacity: 1,
+                  strokeDashoffset: 0,
+                  duration: LINES_DURATION,
+                  ease: "power2.out",
+                },
+                LINES_START + lineIndex * LINE_STAGGER,
+              );
+            });
+
+            // HOLD: deterministic index-derived endpoints with --ease-drift's
+            // sine.inOut curve. One finite leg fills the elastic hold exactly.
+            if (HOLD > 0) {
+              avatars.forEach(function (avatar, avatarIndex) {
+                var driftX = Math.sin((avatarIndex + 1) * 1.73) * 0.85;
+                var driftY = Math.sin((avatarIndex + 1) * 2.41) * 1.15;
+                timeline.fromTo(
+                  avatar,
+                  { x: -driftX + "cqw", y: -driftY + "cqh" },
+                  {
+                    x: driftX + "cqw",
+                    y: driftY + "cqh",
+                    duration: HOLD,
+                    ease: "sine.inOut",
+                    immediateRender: false,
+                  },
+                  HOLD_START,
+                );
+              });
+            }
+
+            // OUT: the complete network leaves once with the asymmetric exit
+            // curve. HOLD motion resolves before this phase begins.
+            timeline.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+
+            timeline.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = timeline;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/avatar-cloud/demo.html b/docs/public/catalog/components/avatar-cloud/demo.html
new file mode 100644
index 0000000000..e6253e9cf2
--- /dev/null
+++ b/docs/public/catalog/components/avatar-cloud/demo.html
@@ -0,0 +1,111 @@
+<!doctype html>
+<!--
+  avatar-cloud: standalone 1920x1080 demo host.
+
+  The demo mounts avatar-cloud.html through data-composition-src. Its explicit
+  host card proves the primitive sizes from the supplied box and that variables
+  cross the mount boundary. It is kept in sync with avatar-cloud.html by hand
+  and is not installed by hyperframes add.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Avatar Cloud - Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #05070d;
+      }
+
+      #root {
+        --bg: #090d18;
+        --surface: #171e31;
+        --fg: #f8fafc;
+        --muted: #94a3b8;
+        --border: #334155;
+        --brand: #7c6cff;
+        --accent: #38bdf8;
+        --radius: 28px;
+        --space-2: 18px;
+        --space-3: 30px;
+        --font-body: Inter, system-ui, sans-serif;
+        --font-display: Inter, system-ui, sans-serif;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 42%, #111a32 0%, #05070d 72%);
+      }
+
+      /* A definite CSS box is required for the mounted primitive's cqw and cqh
+         units. Data dimensions stay aligned for runtime tooling. */
+      .mount-card {
+        width: 76%;
+        height: 72%;
+        left: 12%;
+        top: 14%;
+        overflow: hidden;
+        border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
+        border-radius: var(--radius);
+        box-shadow: 0 42px 110px color-mix(in srgb, var(--bg) 72%, transparent);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="avatar-cloud-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+      data-fps="30"
+    >
+      <div
+        id="avatar-cloud-mount"
+        class="mount-card clip"
+        data-composition-id="avatar-cloud"
+        data-composition-src="./avatar-cloud.html"
+        data-variable-values='{"avatarCount":12,"showLinks":"yes","label":"50k builders"}'
+        data-start="0"
+        data-duration="5"
+        data-track-index="0"
+        data-width="1459"
+        data-height="778"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      // This host has no motion. The mounted primitive owns its timeline.
+      window.__timelines = window.__timelines || {};
+      window.__timelines["avatar-cloud-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "avatar-cloud.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/avatar-group-hover/__hf-variables-preview.html b/docs/public/catalog/components/avatar-group-hover/__hf-variables-preview.html
new file mode 100644
index 0000000000..2ceb61a4cd
--- /dev/null
+++ b/docs/public/catalog/components/avatar-group-hover/__hf-variables-preview.html
@@ -0,0 +1,84 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Avatar Group Hover variables preview</title>
+    <style>
+      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #f7f7f8; }
+      #hf-vars-root { position: relative; width: 1920px; height: 1080px; }
+      #hf-vars-mount { position: absolute; inset: 0; display: grid; place-items: center; }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  </head>
+  <body>
+    <div id="hf-vars-root" data-composition-id="avatar-group-hover-variables-preview" data-start="0" data-width="1920" data-height="1080" data-duration="5" data-fps="30">
+      <div id="hf-vars-mount" class="clip" data-composition-id="avatar-group-hover" data-composition-src="./avatar-group-hover.html" data-start="0" data-duration="5" data-track-index="0" data-width="1920" data-height="1080"></div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["avatar-group-hover-variables-preview"] = gsap.timeline({ paused: true });
+    </script>
+    <script>
+      (function () {
+        var mount = document.getElementById("hf-vars-mount");
+        // The mount is filled asynchronously, and the demo script selects
+        // what it fills it with, so it cannot run before then.
+        var observer = new MutationObserver(build);
+        observer.observe(mount, { childList: true, subtree: true });
+        build();
+        function build() {
+          if (!mount.firstElementChild) return;
+          observer.disconnect();
+
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.to(
+          ".hf-transition-avatar-group-hover span",
+          {
+            "--hf-avatar-y": "-18px",
+            duration: 0.28,
+            stagger: { each: 0.035, from: "center" },
+            ease: "back.out(1.8)",
+          },
+          startTime,
+        );
+        tl.to(
+          ".hf-transition-avatar-group-hover span",
+          {
+            "--hf-avatar-y": "0px",
+            duration: 0.42,
+            stagger: { each: 0.035, from: "center" },
+            ease: "bounce.out",
+          },
+          startTime + 0.36,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["avatar-group-hover-demo"] = tl;
+          var child = window.__timelines["avatar-group-hover-demo"];
+          delete window.__timelines["avatar-group-hover-demo"];
+          if (!child || typeof child.paused !== "function") return;
+          child.paused(false);
+          window.__timelines["avatar-group-hover-variables-preview"].add(child, 0);
+        }
+      })();
+    </script>
+<script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "avatar-group-hover.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/avatar-group-hover/avatar-group-hover.html b/docs/public/catalog/components/avatar-group-hover/avatar-group-hover.html
new file mode 100644
index 0000000000..0cb2989e0e
--- /dev/null
+++ b/docs/public/catalog/components/avatar-group-hover/avatar-group-hover.html
@@ -0,0 +1,99 @@
+<!--
+  Avatar Group Hover - transitions.dev-inspired primitive for HyperFrames.
+
+  Paste the markup and CSS into a composition. Use the timeline integration
+  note at the bottom as the starting point for deterministic GSAP animation.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result as a custom property
+  the CSS consumes. The timeline recipe below is untouched by them: it still
+  drives one lift offset, and these decide what it lifts.
+
+    - size (small | standard | large, default standard): avatar diameter,
+      42px, 54px or 70px. The initials scale with it.
+    - overlap (tight | standard | loose, default standard): how far each
+      avatar tucks under the one before it, as a share of its own diameter:
+      half, a third, or barely an eighth.
+    - accent (blue | violet | green, default blue): the colour the avatar
+      gradient resolves into out of the shared near-black.
+
+  On every default the result is identical to the original: 54px avatars
+  overlapping by 18px in the blue gradient.
+-->
+
+<div
+  class="hf-transition-avatar-group-hover"
+  data-composition-variables='[
+    { "id": "size", "type": "enum", "role": "style", "label": "Size", "description": "Avatar diameter, with the initials scaling alongside it.", "default": "standard", "options": [{ "value": "small", "label": "Small" }, { "value": "standard", "label": "Standard" }, { "value": "large", "label": "Large" }] },
+    { "id": "overlap", "type": "enum", "role": "style", "label": "Overlap", "description": "How far each avatar tucks under the one before it, as a share of its own diameter.", "default": "standard", "options": [{ "value": "tight", "label": "Tight" }, { "value": "standard", "label": "Standard" }, { "value": "loose", "label": "Loose" }] },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Colour the avatar gradient resolves into.", "default": "blue", "options": [{ "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }, { "value": "green", "label": "Green" }] }
+  ]'
+>
+  <span>A</span><span>B</span><span>C</span><span>D</span>
+</div>
+
+<style>
+  .hf-transition-avatar-group-hover {
+    display: inline-flex;
+    align-items: center;
+    padding-left: var(--hf-avatar-overlap, 18px);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-transition-avatar-group-hover span {
+    display: grid;
+    place-items: center;
+    width: var(--hf-avatar-size, 54px);
+    height: var(--hf-avatar-size, 54px);
+    margin-left: calc(-1 * var(--hf-avatar-overlap, 18px));
+    border: 3px solid #fff;
+    border-radius: 999px;
+    background: linear-gradient(135deg, #111827, var(--hf-avatar-accent, #0ea5e9));
+    color: #fff;
+    font-size: var(--hf-avatar-font, 1em);
+    font-weight: 900;
+    box-shadow: 0 12px 30px rgba(24, 24, 27, 0.18);
+    transform: translateY(var(--hf-avatar-y, 0px));
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    var sizes = { small: 42, standard: 54, large: 70 };
+    var fonts = { small: "0.8em", standard: "1em", large: "1.3em" };
+    // Overlap is a share of the diameter, so the two knobs stay independent.
+    var overlaps = { tight: 0.5, standard: 1 / 3, loose: 0.12 };
+    var accents = { blue: "#0ea5e9", violet: "#a78bfa", green: "#34d399" };
+
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var sizeName = pick(sizes, vars.size, "standard");
+    var overlapName = pick(overlaps, vars.overlap, "standard");
+    var accent = accents[pick(accents, vars.accent, "blue")];
+    var diameter = sizes[sizeName];
+    var overlap = Math.round(diameter * overlaps[overlapName]);
+
+    var roots = document.querySelectorAll(".hf-transition-avatar-group-hover");
+    for (var i = 0; i < roots.length; i += 1) {
+      var style = roots[i].style;
+      style.setProperty("--hf-avatar-size", diameter + "px");
+      style.setProperty("--hf-avatar-font", fonts[sizeName]);
+      style.setProperty("--hf-avatar-overlap", overlap + "px");
+      style.setProperty("--hf-avatar-accent", accent);
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.to('.hf-transition-avatar-group-hover span', { '--hf-avatar-y': '-18px', duration: 0.28, stagger: { each: 0.035, from: 'center' }, ease: 'back.out(1.8)' }, startTime); tl.to('.hf-transition-avatar-group-hover span', { '--hf-avatar-y': '0px', duration: 0.42, stagger: { each: 0.035, from: 'center' }, ease: 'bounce.out' }, startTime + 0.36);
+-->
diff --git a/docs/public/catalog/components/avatar-group-hover/demo.html b/docs/public/catalog/components/avatar-group-hover/demo.html
new file mode 100644
index 0000000000..58979211c4
--- /dev/null
+++ b/docs/public/catalog/components/avatar-group-hover/demo.html
@@ -0,0 +1,119 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Avatar Group Hover - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        min-width: 760px;
+        min-height: 480px;
+        padding: 56px;
+        /* ponytail: scale-only fix — GSAP animates the spans inside, not this wrapper */
+        transform: scale(3.5);
+      }
+      .hf-transition-avatar-group-hover {
+        display: inline-flex;
+        align-items: center;
+        padding-left: 18px;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-transition-avatar-group-hover span {
+        display: grid;
+        place-items: center;
+        width: 54px;
+        height: 54px;
+        margin-left: -18px;
+        border: 3px solid #fff;
+        border-radius: 999px;
+        background: linear-gradient(135deg, #111827, #0ea5e9);
+        color: #fff;
+        font-size: 18px;
+        font-weight: 700;
+        letter-spacing: 0.01em;
+        box-shadow: 0 12px 30px rgba(24, 24, 27, 0.18);
+        transform: translateY(var(--hf-avatar-y, 0px));
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="avatar-group-hover-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-transition-avatar-group-hover">
+          <span>A</span><span>B</span><span>C</span><span>D</span>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.to(
+          ".hf-transition-avatar-group-hover span",
+          {
+            "--hf-avatar-y": "-18px",
+            duration: 0.28,
+            stagger: { each: 0.035, from: "center" },
+            ease: "back.out(1.8)",
+          },
+          startTime,
+        );
+        tl.to(
+          ".hf-transition-avatar-group-hover span",
+          {
+            "--hf-avatar-y": "0px",
+            duration: 0.42,
+            stagger: { each: 0.035, from: "center" },
+            ease: "bounce.out",
+          },
+          startTime + 0.36,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["avatar-group-hover-demo"] = tl;
+      </script>
+    </div>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "avatar-group-hover.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/badge-pop/__hf-variables-preview.html b/docs/public/catalog/components/badge-pop/__hf-variables-preview.html
new file mode 100644
index 0000000000..18dc5f7cb8
--- /dev/null
+++ b/docs/public/catalog/components/badge-pop/__hf-variables-preview.html
@@ -0,0 +1,80 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Badge Pop variables preview</title>
+    <style>
+      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #f4f4f5; }
+      #hf-vars-root { position: relative; width: 1920px; height: 1080px; }
+      #hf-vars-mount { position: absolute; inset: 0; display: grid; place-items: center; }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  </head>
+  <body>
+    <div id="hf-vars-root" data-composition-id="badge-pop-variables-preview" data-start="0" data-width="1920" data-height="1080" data-duration="5" data-fps="30">
+      <div id="hf-vars-mount" class="clip" data-composition-id="badge-pop" data-composition-src="./badge-pop.html" data-start="0" data-duration="5" data-track-index="0" data-width="1920" data-height="1080"></div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["badge-pop-variables-preview"] = gsap.timeline({ paused: true });
+    </script>
+    <script>
+      (function () {
+        var mount = document.getElementById("hf-vars-mount");
+        // The mount is filled asynchronously, and the demo script selects
+        // what it fills it with, so it cannot run before then.
+        var observer = new MutationObserver(build);
+        observer.observe(mount, { childList: true, subtree: true });
+        build();
+        function build() {
+          if (!mount.firstElementChild) return;
+          observer.disconnect();
+
+        const tl = gsap.timeline({ paused: true });
+        tl.fromTo(
+          ".hf-transition-badge-button",
+          { y: 18, opacity: 0 },
+          { y: 0, opacity: 1, duration: 0.34, ease: "power2.out" },
+          0.35,
+        );
+        tl.fromTo(
+          ".hf-transition-badge-count",
+          { scale: 0, opacity: 0 },
+          { scale: 1, opacity: 1, duration: 0.42, ease: "back.out(2.4)" },
+          0.7,
+        );
+        tl.to(
+          ".hf-transition-badge-count",
+          { scale: 1.18, duration: 0.12, yoyo: true, repeat: 1, ease: "power1.inOut" },
+          1.15,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["badge-pop-demo"] = tl;
+          var child = window.__timelines["badge-pop-demo"];
+          delete window.__timelines["badge-pop-demo"];
+          if (!child || typeof child.paused !== "function") return;
+          child.paused(false);
+          window.__timelines["badge-pop-variables-preview"].add(child, 0);
+        }
+      })();
+    </script>
+<script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "badge-pop.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/badge-pop/badge-pop.html b/docs/public/catalog/components/badge-pop/badge-pop.html
new file mode 100644
index 0000000000..335dfb37df
--- /dev/null
+++ b/docs/public/catalog/components/badge-pop/badge-pop.html
@@ -0,0 +1,148 @@
+<!--
+  Badge Pop - transitions.dev-inspired primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Use the timeline
+  integration note at the bottom as the starting point for deterministic GSAP
+  animation.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result as a custom property
+  the CSS below consumes, or as the badge text. The timeline recipe at the
+  bottom is untouched by them: it keeps popping the same badge, whatever the
+  badge says and however it is coloured.
+
+    - count (any text up to four characters, default "3"): what the badge
+      reads. Use it to say 1, 12, 99+ or NEW.
+    - accent (red | blue | green | violet, default red): the badge colour
+      family. red is the literal notification convention; the other three ride
+      the composition's own accent, brand and accent-2 tokens and fall back to
+      ink when the composition declares none. All four clear 3:1 against the
+      white count.
+    - surface (light | dark, default light): the chrome of the button and the
+      ring around the badge. light suits bright frames, dark suits dark ones.
+
+  On every default the result is identical to the original: a white bell tile
+  with a red 3 badge.
+-->
+
+<div
+  class="hf-transition-badge-pop"
+  data-composition-variables='[
+    { "id": "count", "type": "string", "role": "style", "label": "Count", "description": "Text shown inside the notification badge, up to four characters.", "default": "3", "maxLength": 4 },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Colour family of the badge.", "default": "red", "options": [{ "value": "red", "label": "Red" }, { "value": "blue", "label": "Blue" }, { "value": "green", "label": "Green" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "surface", "type": "enum", "role": "style", "label": "Surface", "description": "Chrome of the button and the badge ring: light for bright frames, dark for dark ones.", "default": "light", "options": [{ "value": "light", "label": "Light" }, { "value": "dark", "label": "Dark" }] }
+  ]'
+>
+  <button class="hf-transition-badge-button" type="button" aria-label="Notifications">
+    <svg viewBox="0 0 24 24" aria-hidden="true">
+      <path d="M18 8a6 6 0 10-12 0c0 7-3 7-3 7h18s-3 0-3-7" />
+      <path d="M10 20a2 2 0 004 0" />
+    </svg>
+  </button>
+  <span class="hf-transition-badge-count">3</span>
+</div>
+
+<style>
+  .hf-transition-badge-pop {
+    --hf-badge-pop-accent: #ef4444;
+    --hf-badge-pop-surface: #ffffff;
+    --hf-badge-pop-border: #e4e4e7;
+    --hf-badge-pop-ink: #18181b;
+    position: relative;
+    display: inline-grid;
+    place-items: center;
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-transition-badge-button {
+    display: grid;
+    place-items: center;
+    width: 76px;
+    height: 76px;
+    border: 1px solid var(--hf-badge-pop-border);
+    border-radius: 22px;
+    background: var(--hf-badge-pop-surface);
+    color: var(--hf-badge-pop-ink);
+    box-shadow: 0 20px 58px rgba(0, 0, 0, 0.12);
+  }
+  .hf-transition-badge-button svg {
+    width: 30px;
+    height: 30px;
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 2.2;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+  .hf-transition-badge-count {
+    position: absolute;
+    right: -8px;
+    top: -8px;
+    display: grid;
+    place-items: center;
+    min-width: 30px;
+    height: 30px;
+    padding: 0 8px;
+    border: 3px solid var(--hf-badge-pop-surface);
+    border-radius: 999px;
+    background: var(--hf-badge-pop-accent);
+    color: #ffffff;
+    font-size: 13px;
+    font-weight: 900;
+    transform-origin: center;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    // The badge is the one accent-carrying element here. red is the literal
+    // notification convention and stays; the decorative options ride the
+    // composition's own tokens and fall back to ink.
+    var accents = {
+      red: "#ef4444",
+      blue: "var(--accent, #18181b)",
+      green: "var(--brand, #18181b)",
+      violet: "var(--accent-2, #18181b)",
+    };
+    var surfaces = {
+      light: { surface: "#ffffff", border: "#e4e4e7", ink: "#18181b" },
+      dark: { surface: "#101014", border: "#2a2a32", ink: "#fafafa" },
+    };
+
+    var accent = accents[pick(accents, vars.accent, "red")];
+    var surface = surfaces[pick(surfaces, vars.surface, "light")];
+    var count =
+      typeof vars.count === "string" && vars.count.trim() ? vars.count.trim().slice(0, 4) : "3";
+
+    var roots = document.querySelectorAll(".hf-transition-badge-pop");
+    for (var i = 0; i < roots.length; i += 1) {
+      var root = roots[i];
+      root.style.setProperty("--hf-badge-pop-accent", accent);
+      root.style.setProperty("--hf-badge-pop-surface", surface.surface);
+      root.style.setProperty("--hf-badge-pop-border", surface.border);
+      root.style.setProperty("--hf-badge-pop-ink", surface.ink);
+      var label = root.querySelector(".hf-transition-badge-count");
+      if (label) {
+        label.textContent = count;
+      }
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-transition-badge-button', { y: 18, opacity: 0 }, { y: 0, opacity: 1, duration: 0.34, ease: 'power2.out' }, 0.35);
+  tl.fromTo('.hf-transition-badge-count', { scale: 0, opacity: 0 }, { scale: 1, opacity: 1, duration: 0.42, ease: 'back.out(2.4)' }, 0.7);
+  tl.to('.hf-transition-badge-count', { scale: 1.18, duration: 0.12, yoyo: true, repeat: 1, ease: 'power1.inOut' }, 1.15);
+-->
diff --git a/docs/public/catalog/components/badge-pop/demo.html b/docs/public/catalog/components/badge-pop/demo.html
new file mode 100644
index 0000000000..b77dd6342a
--- /dev/null
+++ b/docs/public/catalog/components/badge-pop/demo.html
@@ -0,0 +1,142 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Badge Pop - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f4f4f5;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 56px;
+        transform: scale(
+          3
+        ); /* ponytail: scale wrapper (hugs content — no min-width inflation), not GSAP targets */
+        transform-origin: center;
+      }
+      .hf-transition-badge-pop {
+        position: relative;
+        display: inline-grid;
+        place-items: center;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-transition-badge-button {
+        display: grid;
+        place-items: center;
+        width: 76px;
+        height: 76px;
+        border: 1px solid #e4e4e7;
+        border-radius: 22px;
+        background: #ffffff;
+        color: #18181b;
+        box-shadow: 0 20px 58px rgba(0, 0, 0, 0.12);
+      }
+      .hf-transition-badge-button svg {
+        width: 30px;
+        height: 30px;
+        fill: none;
+        stroke: currentColor;
+        stroke-width: 2.2;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+      .hf-transition-badge-count {
+        position: absolute;
+        right: -8px;
+        top: -8px;
+        display: grid;
+        place-items: center;
+        min-width: 30px;
+        height: 30px;
+        padding: 0 8px;
+        border: 3px solid #ffffff;
+        border-radius: 999px;
+        background: #ef4444;
+        color: #ffffff;
+        font-size: 13px;
+        font-weight: 900;
+        transform-origin: center;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="badge-pop-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-transition-badge-pop">
+          <button class="hf-transition-badge-button" type="button" aria-label="Notifications">
+            <svg viewBox="0 0 24 24" aria-hidden="true">
+              <path d="M18 8a6 6 0 10-12 0c0 7-3 7-3 7h18s-3 0-3-7" />
+              <path d="M10 20a2 2 0 004 0" />
+            </svg>
+          </button>
+          <span class="hf-transition-badge-count">3</span>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        tl.fromTo(
+          ".hf-transition-badge-button",
+          { y: 18, opacity: 0 },
+          { y: 0, opacity: 1, duration: 0.34, ease: "power2.out" },
+          0.35,
+        );
+        tl.fromTo(
+          ".hf-transition-badge-count",
+          { scale: 0, opacity: 0 },
+          { scale: 1, opacity: 1, duration: 0.42, ease: "back.out(2.4)" },
+          0.7,
+        );
+        tl.to(
+          ".hf-transition-badge-count",
+          { scale: 1.18, duration: 0.12, yoyo: true, repeat: 1, ease: "power1.inOut" },
+          1.15,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["badge-pop-demo"] = tl;
+      </script>
+    </div>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "badge-pop.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/beat-accent/beat-accent.html b/docs/public/catalog/components/beat-accent/beat-accent.html
new file mode 100644
index 0000000000..ab60393b1d
--- /dev/null
+++ b/docs/public/catalog/components/beat-accent/beat-accent.html
@@ -0,0 +1,324 @@
+<!doctype html>
+<!--
+  beat-accent: HyperFrames video primitive (effects / burst / emphasize)
+
+  Concept: a single music-hit sting. A centered word snaps up in scale as a
+  radial impact flash erupts behind it, shakes by a small amount, then settles
+  immediately. One mechanic, one job: visual punctuation on one beat during IN.
+  This burst fires once and never loops. HOLD stays deliberately calm and still
+  after the decay.
+
+  Compiled-from evidence: Video Primitives v1 GAP C1, "sting: impact
+  flash/scale on a music hit." The candidates catalog describes a C1 gap:
+  music-driven films need visual punctuation on the downbeat and had nothing
+  atomic to reach for. A declared sync point makes the primitive weldable to
+  any audio hit. Catalog shelf: effects / burst / emphasize. The impact uses
+  the easing vocabulary's --ease-slam, GSAP expo.out, with the CSS mirror
+  cubic-bezier(0.19, 1, 0.22, 1), kept brief per taste rule 3.
+
+  Use when: one downbeat, edit point, reveal, or hard musical hit needs a short
+  visual accent. Mount it over the subject or use its centered word as the
+  subject. Do not use it as an ambient loop or a repeated visualizer.
+
+  Variables (declared in data-composition-variables below):
+    - text (string, default "BOOM"): the word or label that receives the hit.
+    - flashColor (enum, default "accent"): accent, soft accent, or bright
+      accent. Every option is derived from var(--accent), so theme changes
+      always repaint the flash.
+    - intensity (number, 0.5 to 2, default 1, step 0.1): scales subject pulse,
+      flash opacity and spread, and shake distance as one legible control.
+
+  Envelope (fixed IN/OUT, elastic HOLD only, never gsap.timeScale()):
+    IN_BASE  = 0.90s, calm lead, impact snap, flash, shake, and full decay
+    HOLD     = elastic = max(0, D - (IN_BASE + OUT_BASE)), deliberately still
+    OUT_BASE = 0.40s, clean release fade
+    If D < IN_BASE + OUT_BASE, IN and OUT scale down together so IN + OUT == D
+    and HOLD == 0. All fixed offsets and motion durations use the same scale.
+
+  Sync point: impact-hard lands at IMPACT_AT = 0.25s into an unscaled IN. It
+  scales proportionally only when the full envelope is compressed. ADR-0007
+  requires declared sync points to remain in a fixed phase, never inside the
+  elastic HOLD, so audio and visual timing cannot drift as duration changes.
+
+  Sound cue: the primitive never plays audio. At IMPACT_AT it dispatches a
+  bubbling `hf:sfx` CustomEvent with detail { id: "impact-hard", t: IMPACT_AT }.
+  A host mix stage may catch that event and route the id to its chosen asset.
+
+  Mount contract: this file is a MOUNTABLE SUB-COMPOSITION, not a standalone
+  composition. A host loads it via data-composition-src; the runtime clones
+  only <template> contents, while everything outside <template>, including
+  <head>, is discarded on mount. #root has no data-width or data-height. It is
+  styled by id, never by class, and fills the host box with position:absolute,
+  inset:0, container-type:size. Variables are read through
+  window.__hyperframes.getVariables(), never by parsing document.documentElement,
+  because the mounted document element belongs to the host composition.
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "text", "type": "string", "role": "content", "label": "Accent text", "description": "Word or short label emphasized by the beat hit.", "default": "BOOM" },
+    { "id": "flashColor", "type": "enum", "role": "style", "label": "Flash color", "description": "Token-backed accent tone used by the radial flash.", "default": "accent", "options": [{ "value": "accent", "label": "Accent" }, { "value": "soft", "label": "Soft accent" }, { "value": "bright", "label": "Bright accent" }] },
+    { "id": "intensity", "type": "number", "role": "timing", "label": "Intensity", "description": "Strength of the scale pulse, flash, and shake.", "default": 1, "min": 0.5, "max": 2, "step": 0.1 }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Beat Accent</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="beat-accent" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            --ease-slam: cubic-bezier(0.19, 1, 0.22, 1);
+            --ba-flash-color: var(--accent, #ff4f8b);
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            background: var(--bg, #0b1120);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .ba-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+          }
+
+          .ba-stage {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            display: grid;
+            place-items: center;
+            will-change: transform, opacity;
+          }
+
+          .ba-flash {
+            position: absolute;
+            width: 62cqw;
+            aspect-ratio: 1;
+            border-radius: 50%;
+            background: radial-gradient(
+              circle,
+              color-mix(in srgb, var(--ba-flash-color) 92%, transparent) 0%,
+              color-mix(in srgb, var(--ba-flash-color) 54%, transparent) 24%,
+              color-mix(in srgb, var(--ba-flash-color) 16%, transparent) 48%,
+              transparent 72%
+            );
+            opacity: 0;
+            will-change: transform, opacity;
+          }
+
+          .ba-flash::after {
+            content: "";
+            position: absolute;
+            inset: 22%;
+            border: 0.45cqmin solid color-mix(in srgb, var(--ba-flash-color) 78%, transparent);
+            border-radius: 50%;
+          }
+
+          .ba-subject {
+            position: relative;
+            z-index: 1;
+            display: block;
+            width: 86cqw;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, var(--font-body, system-ui, sans-serif));
+            font-size: 20cqmin;
+            font-weight: 900;
+            line-height: 0.9;
+            letter-spacing: -0.055em;
+            text-align: center;
+            text-transform: uppercase;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            text-shadow:
+              0 0 2cqmin color-mix(in srgb, var(--accent, #ff4f8b) 46%, transparent),
+              0 1.2cqh 3.8cqh color-mix(in srgb, var(--bg, #0b1120) 68%, transparent);
+            transform-origin: 50% 50%;
+            will-change: transform;
+          }
+        </style>
+
+        <div
+          id="beat-accent-clip"
+          class="ba-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="ba-stage">
+            <div class="ba-flash" aria-hidden="true"></div>
+            <div class="ba-subject"></div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".ba-stage");
+            var flash = root.querySelector(".ba-flash");
+            var subject = root.querySelector(".ba-subject");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var text = vars.text == null ? "BOOM" : String(vars.text);
+            var flashChoice =
+              vars.flashColor === "soft" || vars.flashColor === "bright"
+                ? vars.flashColor
+                : "accent";
+            var intensityValue = Number(vars.intensity);
+            var intensity = Number.isFinite(intensityValue)
+              ? Math.max(0.5, Math.min(2, intensityValue))
+              : 1;
+
+            var flashColors = {
+              accent: "var(--accent, #ff4f8b)",
+              soft: "color-mix(in srgb, var(--accent, #ff4f8b) 70%, var(--bg, #0b1120))",
+              bright: "color-mix(in srgb, var(--accent, #ff4f8b) 72%, var(--fg, #f8fafc))",
+            };
+
+            subject.textContent = text;
+            root.style.setProperty("--ba-flash-color", flashColors[flashChoice]);
+
+            var IN_BASE = 0.9;
+            var OUT_BASE = 0.4;
+            var IMPACT_AT_BASE = 0.25;
+            var SNAP_BASE = 0.12;
+            var SETTLE_BASE = 0.28;
+            var FLASH_IN_BASE = 0.08;
+            var FLASH_OUT_BASE = 0.28;
+
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var totalBase = IN_BASE + OUT_BASE;
+            var envelopeScale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * envelopeScale;
+            var OUT = OUT_BASE * envelopeScale;
+            var IMPACT_AT = IMPACT_AT_BASE * envelopeScale;
+            var SNAP = SNAP_BASE * envelopeScale;
+            var SETTLE = SETTLE_BASE * envelopeScale;
+            var FLASH_IN = FLASH_IN_BASE * envelopeScale;
+            var FLASH_OUT = FLASH_OUT_BASE * envelopeScale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var OUT_START = IN + HOLD;
+
+            var restScale = 1 - 0.06 * intensity;
+            var peakScale = 1 + 0.18 * intensity;
+            var flashPeakScale = 0.78 + 0.3 * intensity;
+            var flashEndScale = 1.08 + 0.32 * intensity;
+            var flashPeakOpacity = Math.min(0.96, 0.5 + 0.23 * intensity);
+            var shakeX = 0.9 * intensity;
+            var shakeY = 0.34 * intensity;
+
+            gsap.set(stage, { x: 0, y: 0, opacity: 1 });
+            gsap.set(subject, { scale: restScale });
+            gsap.set(flash, { scale: 0.25, opacity: 0 });
+
+            var tl = gsap.timeline({ paused: true });
+
+            tl.to(subject, { scale: peakScale, duration: SNAP, ease: "expo.out" }, IMPACT_AT);
+            tl.to(subject, { scale: 1, duration: SETTLE, ease: "power3.out" }, IMPACT_AT + SNAP);
+
+            tl.to(
+              flash,
+              {
+                scale: flashPeakScale,
+                opacity: flashPeakOpacity,
+                duration: FLASH_IN,
+                ease: "expo.out",
+              },
+              IMPACT_AT,
+            );
+            tl.to(
+              flash,
+              { scale: flashEndScale, opacity: 0, duration: FLASH_OUT, ease: "power3.out" },
+              IMPACT_AT + FLASH_IN,
+            );
+
+            tl.to(
+              stage,
+              {
+                x: shakeX + "cqw",
+                y: -shakeY + "cqh",
+                duration: 0.04 * envelopeScale,
+                ease: "none",
+              },
+              IMPACT_AT,
+            );
+            tl.to(
+              stage,
+              {
+                x: -shakeX * 0.7 + "cqw",
+                y: shakeY * 0.75 + "cqh",
+                duration: 0.05 * envelopeScale,
+                ease: "none",
+              },
+              IMPACT_AT + 0.04 * envelopeScale,
+            );
+            tl.to(
+              stage,
+              {
+                x: shakeX * 0.3 + "cqw",
+                y: -shakeY * 0.35 + "cqh",
+                duration: 0.05 * envelopeScale,
+                ease: "none",
+              },
+              IMPACT_AT + 0.09 * envelopeScale,
+            );
+            tl.to(
+              stage,
+              {
+                x: 0,
+                y: 0,
+                duration: 0.12 * envelopeScale,
+                ease: "power3.out",
+              },
+              IMPACT_AT + 0.14 * envelopeScale,
+            );
+
+            tl.call(
+              function () {
+                root.dispatchEvent(
+                  new CustomEvent("hf:sfx", {
+                    detail: { id: "impact-hard", t: IMPACT_AT },
+                    bubbles: true,
+                  }),
+                );
+              },
+              [],
+              IMPACT_AT,
+            );
+
+            tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.out" }, OUT_START);
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            // Literal id is required. Mount flattening strips data-composition-id
+            // from this inner root, so reading the id from root would register
+            // under null and leave the host unable to find this timeline.
+            window.__timelines["beat-accent"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/beat-accent/demo.html b/docs/public/catalog/components/beat-accent/demo.html
new file mode 100644
index 0000000000..efebdeb92e
--- /dev/null
+++ b/docs/public/catalog/components/beat-accent/demo.html
@@ -0,0 +1,105 @@
+<!doctype html>
+<!--
+  beat-accent: demo. Standalone 1920x1080 host composition that mounts the
+  primitive from ./beat-accent.html through data-composition-src. The wide,
+  centered mount card gives the burst room for its word and radial flash.
+  Non-default text, flashColor, and intensity values prove per-instance
+  variables flow through the mount. This file is a host-only visual check and
+  is not installed by `hyperframes add`.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Beat Accent - Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #05070d;
+      }
+
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 42%, #17213a 0%, #05070d 72%);
+      }
+
+      .mount-card {
+        --bg: #101827;
+        --surface: #18233a;
+        --fg: #f8fafc;
+        --muted: #94a3b8;
+        --border: #334155;
+        --brand: #22c55e;
+        --accent: #ff4f8b;
+        --font-body: Inter, system-ui, sans-serif;
+        --font-display: Inter, system-ui, sans-serif;
+        width: 52%;
+        height: 44%;
+        left: 24%;
+        top: 28%;
+        border-radius: 32px;
+        border: 1px solid rgba(148, 163, 184, 0.28);
+        box-shadow: 0 40px 100px rgba(0, 0, 0, 0.52);
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="beat-accent-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="beat-accent-mount"
+        class="mount-card clip"
+        data-composition-id="beat-accent"
+        data-composition-src="./beat-accent.html"
+        data-variable-values='{"text":"DROP","flashColor":"bright","intensity":1.6}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="998"
+        data-height="475"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["beat-accent-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "beat-accent.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/beat-pulse-background/beat-pulse-background.html b/docs/public/catalog/components/beat-pulse-background/beat-pulse-background.html
new file mode 100644
index 0000000000..ddcab1a845
--- /dev/null
+++ b/docs/public/catalog/components/beat-pulse-background/beat-pulse-background.html
@@ -0,0 +1,208 @@
+<!doctype html>
+<!--
+  beat-pulse-background: HyperFrames video primitive (backgrounds / rhythmic)
+
+  Concept: a deep accent-derived backdrop pulses its glow intensity and
+  saturation on a supplied beat grid. Each retained beat owns one fast attack
+  and one slower decay. The pulses stay tasteful enough to carry foreground
+  content without reading as a strobe.
+
+  Variables:
+    - beats (string, default "0.5,1.0,1.5,2.0,2.5,3.0,3.5"): comma-separated
+      beat times in seconds. Junk and blank entries are ignored. Numeric times
+      are clamped to the composition duration.
+    - accent (green | blue | violet, default green): pulse color family.
+    - intensity (subtle | club, default subtle): glow and saturation strength.
+
+  Envelope: IN = 0, HOLD = the full elastic duration, OUT = 0. Beat times are
+  absolute data inside HOLD, so a longer mount extends HOLD without retiming
+  the supplied grid. Every pulse is constructed synchronously as one attack
+  and one decay tween pair.
+
+  Sound: none. Beats are supplied data, not audio analysis.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, has no data-width or data-height,
+  and registers one paused timeline under the hardcoded beat-pulse-background
+  id.
+-->
+<html
+  lang="en"
+  data-composition-id="beat-pulse-background"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "beats", "type": "string", "role": "timing", "label": "Beats", "description": "Comma-separated beat times in seconds. Invalid entries are ignored and numeric values are clamped to the composition duration.", "default": "0.5,1.0,1.5,2.0,2.5,3.0,3.5" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Accent token family used by the pulsing glow.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "intensity", "type": "enum", "role": "style", "label": "Intensity", "description": "Strength of the glow and saturation pulse.", "default": "subtle", "options": [{ "value": "subtle", "label": "Subtle" }, { "value": "club", "label": "Club" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Beat Pulse Background</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="beat-pulse-background" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            pointer-events: none;
+          }
+
+          .bpb-clip,
+          .bpb-base,
+          .bpb-pulse,
+          .bpb-vignette {
+            position: absolute;
+            inset: 0;
+          }
+
+          .bpb-clip {
+            overflow: hidden;
+          }
+
+          .bpb-base {
+            background:
+              radial-gradient(
+                ellipse at 50% 42%,
+                color-mix(in srgb, var(--bpb-accent) 10%, var(--bg, #070a12)) 0%,
+                var(--bg, #070a12) 70%
+              ),
+              var(--bg, #070a12);
+          }
+
+          .bpb-pulse {
+            background:
+              radial-gradient(
+                ellipse at 24% 30%,
+                color-mix(in srgb, var(--bpb-accent) 74%, transparent) 0%,
+                color-mix(in srgb, var(--bpb-accent) 28%, transparent) 34%,
+                transparent 66%
+              ),
+              radial-gradient(
+                ellipse at 76% 68%,
+                color-mix(in srgb, var(--bpb-accent) 60%, var(--accent-2, #a78bfa)) 0%,
+                color-mix(in srgb, var(--bpb-accent) 20%, transparent) 38%,
+                transparent 70%
+              );
+            filter: saturate(var(--bpb-saturation, 1));
+            mix-blend-mode: screen;
+            opacity: 0.2;
+            will-change: opacity, filter;
+          }
+
+          .bpb-vignette {
+            background: radial-gradient(
+              ellipse at center,
+              transparent 34%,
+              color-mix(in srgb, var(--bg, #000000) 58%, transparent) 100%
+            );
+          }
+        </style>
+
+        <div
+          id="beat-pulse-background-clip"
+          class="bpb-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="bpb-base"></div>
+          <div class="bpb-pulse"></div>
+          <div class="bpb-vignette"></div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var pulse = root.querySelector(".bpb-pulse");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var accentTokens = {
+              green: "var(--brand, #34d399)",
+              blue: "var(--accent, #38bdf8)",
+              violet: "var(--accent-2, #a78bfa)",
+            };
+            var intensityLevels = {
+              subtle: { baseOpacity: 0.2, peakOpacity: 0.5, peakSaturation: 1.3 },
+              club: { baseOpacity: 0.26, peakOpacity: 0.72, peakSaturation: 1.65 },
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentTokens, vars.accent)
+              ? vars.accent
+              : "green";
+            var intensity = vars.intensity === "club" ? "club" : "subtle";
+            var level = intensityLevels[intensity];
+
+            root.style.setProperty("--bpb-accent", accentTokens[accent]);
+
+            var durationValue = Number(root.dataset.duration);
+            var duration = Number.isFinite(durationValue) && durationValue > 0 ? durationValue : 4;
+            var defaultBeats = "0.5,1.0,1.5,2.0,2.5,3.0,3.5";
+            var beatsValue = vars.beats == null ? defaultBeats : String(vars.beats);
+            var beats = beatsValue.split(",").reduce(function (result, token) {
+              var trimmed = token.trim();
+              if (trimmed === "") return result;
+
+              var seconds = Number(trimmed);
+              if (!Number.isFinite(seconds)) return result;
+
+              result.push(Math.max(0, Math.min(duration, seconds)));
+              return result;
+            }, []);
+
+            var ATTACK = 0.08;
+            var DECAY = 0.36;
+
+            gsap.set(pulse, { opacity: level.baseOpacity, "--bpb-saturation": 1 });
+
+            var tl = gsap.timeline({ paused: true });
+
+            beats.forEach(function (beat) {
+              tl.to(
+                pulse,
+                {
+                  opacity: level.peakOpacity,
+                  "--bpb-saturation": level.peakSaturation,
+                  duration: ATTACK,
+                  ease: "expo.out",
+                },
+                beat,
+              );
+              tl.to(
+                pulse,
+                {
+                  opacity: level.baseOpacity,
+                  "--bpb-saturation": 1,
+                  duration: DECAY,
+                  ease: "power2.in",
+                },
+                beat + ATTACK,
+              );
+            });
+
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines["beat-pulse-background"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/beat-pulse-background/demo.html b/docs/public/catalog/components/beat-pulse-background/demo.html
new file mode 100644
index 0000000000..190c333ec1
--- /dev/null
+++ b/docs/public/catalog/components/beat-pulse-background/demo.html
@@ -0,0 +1,107 @@
+<!doctype html>
+<!--
+  beat-pulse-background demo. This standalone composition mounts the
+  primitive through data-composition-src. The irregular violet club grid
+  proves all variables flow through the mount while the background remains
+  sized by its host box.
+-->
+<html lang="en" data-composition-id="beat-pulse-background-demo" data-composition-duration="4">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Beat Pulse Background Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #0b0c0e);
+      }
+
+      #root {
+        --bg: #080a12;
+        --surface: #17191f;
+        --fg: #f8fafc;
+        --muted: #94a3b8;
+        --accent: #38bdf8;
+        --accent-2: #a78bfa;
+        --brand: #34d399;
+        --border: #334155;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(
+          ellipse at 50% 42%,
+          var(--bg, #17191f) 0%,
+          var(--bg, #0b0c0e) 72%
+        );
+      }
+
+      .mount-card {
+        width: 75%;
+        height: 70%;
+        left: 12.5%;
+        top: 15%;
+        overflow: hidden;
+        border: 1px solid color-mix(in srgb, var(--border, #ffffff) 14%, transparent);
+        border-radius: 28px;
+        background: var(--bg, #080a12);
+        box-shadow: 0 5cqh 14cqh color-mix(in srgb, var(--bg, #000000) 52%, transparent);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="beat-pulse-background-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="beat-pulse-background-mount"
+        class="mount-card clip"
+        data-composition-id="beat-pulse-background"
+        data-composition-src="./beat-pulse-background.html"
+        data-variable-values='{"beats":"0.25,0.75,1.5,2.25,3.25","accent":"violet","intensity":"club"}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="1440"
+        data-height="756"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["beat-pulse-background-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "beat-pulse-background.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/beat-timeline/beat-timeline.html b/docs/public/catalog/components/beat-timeline/beat-timeline.html
new file mode 100644
index 0000000000..40b1aab09f
--- /dev/null
+++ b/docs/public/catalog/components/beat-timeline/beat-timeline.html
@@ -0,0 +1,288 @@
+<!doctype html>
+<!--
+  beat-timeline -- HyperFrames video primitive (transitions / sequencing / bridge)
+
+  Concept: a visible orchestration spine made from a paused master GSAP
+  timeline. Each beat row is pinned to an evenly spaced named label, then
+  enters exactly on that mark. One mechanic, one job: bridge a sequence by
+  making its deterministic beat grid readable and copy-and-own-able.
+
+  Compiled-from evidence: launches-motion-vocabulary.md, "Paused, seeked
+  timeline orchestration" census entry (15/18 projects, 134/159 files).
+
+  Use when: a scene needs several titled beats to land in a clear order, or
+  when a copied composition needs a legible master-timeline sequencing spine.
+
+  Variables (declared in data-composition-variables below):
+    - beatCount (number, default 4): integer row count, clamped to 2..6.
+    - interval (number, default 0.6s): base spacing between named beat labels,
+      clamped to 0.2..2s before any short-duration compression.
+    - labels (string): comma-separated row titles. Missing entries fall back
+      to "Beat N" and extra entries are ignored.
+
+  Envelope (holdable orchestration adaptation, never gsap.timeScale()):
+    ENTRANCE_SPAN = (beatCount - 1) * interval + ROW_IN_DURATION.
+    HOLD = max(0, D - (ENTRANCE_SPAN + OUT_BASE)); every landed row remains
+           fully visible and deliberately still during this elastic phase.
+    OUT_BASE = 0.40s; all rows fade together with power2.in at D - OUT_BASE.
+    If D is shorter than ENTRANCE_SPAN + OUT_BASE, interval and each row's
+    entrance duration scale down together so the final row still lands before
+    OUT. Only a host duration at or below OUT_BASE also compresses OUT, which
+    keeps the full lifecycle inside an otherwise impossible time box.
+
+  Sync points: beat labels are fixed offsets inside IN. Every label owns one
+  declared SFX cue at the same offset, never inside elastic HOLD. Beats use
+  "beat-tick" and the last beat uses "beat-tick-final". The primitive only
+  dispatches bubbling hf:sfx events; scene-level audio mixing owns playback.
+
+  Mount contract: this file is a mountable sub-composition. The runtime clones
+  only <template> contents, so all live styles, markup, and scripts are inside
+  the template. #root fills the host-owned box with no data-width/data-height,
+  and all internal geometry is based on its own cqw/cqh container. Variables
+  come from window.__hyperframes.getVariables(), because document.documentElement
+  belongs to the host after mounting.
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "beatCount", "type": "number", "role": "content", "label": "Beat count", "description": "Number of beat rows in the sequence.", "default": 4, "min": 2, "max": 6, "step": 1 },
+    { "id": "interval", "type": "number", "role": "layout", "label": "Interval", "description": "Base time between consecutive beat markers.", "default": 0.6, "min": 0.2, "max": 2, "step": 0.05, "unit": "s" },
+    { "id": "labels", "type": "string", "role": "content", "label": "Labels", "description": "Comma-separated beat titles, one per beat. Extra entries are ignored and missing entries fall back to Beat N.", "default": "One,Two,Three,Four" }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Beat Timeline</title>
+    <!-- Metadata only. The loader reads variable declarations from <html>,
+         then discards everything outside <template> during mounting. -->
+  </head>
+  <body>
+    <template>
+      <div
+        id="root"
+        data-composition-id="beat-timeline"
+        data-start="0"
+        data-duration="5.5"
+        data-fps="30"
+      >
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          /* Root is styled by ID for mounted CSS scoping. It owns no stage
+             dimensions, only the host box and the container-unit basis. */
+          #root {
+            --ease-standard: cubic-bezier(0.215, 0.61, 0.355, 1);
+            --ease-exit: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            background: var(--bg, Canvas);
+            color: var(--fg, CanvasText);
+            font-family: var(--font-body, system-ui, sans-serif);
+          }
+
+          .bt-clip {
+            width: 100%;
+            height: 100%;
+            display: grid;
+            place-items: center;
+          }
+
+          .bt-stack {
+            width: 84cqw;
+            display: flex;
+            flex-direction: column;
+            gap: 1.4cqh;
+          }
+
+          /* EDIT ZONE: row geometry only. Motion timing is owned by the script's
+             RETIME RANGE below, and theme paint remains token-driven here. */
+          .bt-row {
+            min-height: 10cqh;
+            display: grid;
+            grid-template-columns: 6cqw 1fr;
+            align-items: center;
+            column-gap: 2.6cqw;
+            padding: 1.4cqh 2.4cqw;
+            border: 0.12cqw solid var(--border, currentColor);
+            border-radius: var(--radius, 2cqh);
+            background: var(--surface, Canvas);
+            box-shadow: 0 1.2cqh 4cqh color-mix(in srgb, var(--bg, Canvas) 52%, transparent);
+          }
+
+          .bt-index {
+            width: 6cqw;
+            height: 6cqw;
+            display: grid;
+            place-items: center;
+            border-radius: 50%;
+            background: var(--brand, currentColor);
+            color: var(--bg, Canvas);
+            font-family: var(--font-display, system-ui, sans-serif);
+            font-size: 1.8cqw;
+            font-weight: 750;
+            line-height: 1;
+          }
+
+          .bt-copy {
+            min-width: 0;
+          }
+
+          .bt-title {
+            overflow: hidden;
+            color: var(--fg, CanvasText);
+            font-family: var(--font-display, system-ui, sans-serif);
+            font-size: min(4.4cqw, 5.2cqh);
+            font-weight: 700;
+            line-height: 1.04;
+            letter-spacing: -0.08cqw;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          .bt-subtitle {
+            margin-top: 0.7cqh;
+            color: var(--muted, currentColor);
+            font-size: min(1.8cqw, 2.2cqh);
+            font-weight: 550;
+            line-height: 1.15;
+            letter-spacing: 0.04cqw;
+          }
+        </style>
+
+        <div
+          id="beat-timeline-clip"
+          class="bt-clip clip"
+          data-start="0"
+          data-duration="5.5"
+          data-track-index="0"
+        >
+          <div class="bt-stack" aria-label="Beat timeline"></div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            // Literal by contract: mounting strips data-composition-id from the
+            // flattened inner root, so reading the attribute post-mount would
+            // register under null and fail the timeline lookup.
+            var compositionId = "beat-timeline";
+            var stack = root.querySelector(".bt-stack");
+
+            // EDIT ZONE: declarations live on <html>; this runtime call is the
+            // single owner of declared defaults plus per-instance overrides.
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var parsedBeatCount = Number(vars.beatCount);
+            // INVARIANT: exactly 2..6 integer rows reach the DOM and timeline.
+            var beatCount = Math.max(
+              2,
+              Math.min(6, Math.round(Number.isFinite(parsedBeatCount) ? parsedBeatCount : 4)),
+            );
+            var parsedInterval = Number(vars.interval);
+            // INVARIANT: invalid timing falls back once, valid timing clamps to
+            // the declared range before duration elasticity is calculated.
+            var interval = Math.max(
+              0.2,
+              Math.min(2, Number.isFinite(parsedInterval) ? parsedInterval : 0.6),
+            );
+            // INVARIANT: labels is always a string; blank or missing entries
+            // fall back per row, while authored extra entries stay unused.
+            var labelsValue = vars.labels == null ? "One,Two,Three,Four" : String(vars.labels);
+            var suppliedLabels = labelsValue.split(",").map(function (label) {
+              return label.trim();
+            });
+
+            var parsedDuration = parseFloat(root.dataset.duration || "5.5");
+            // INVARIANT: the lifecycle remains finite even under a malformed
+            // host duration. The authored and demo durations are both 5.5s.
+            var duration = Math.max(0.001, Number.isFinite(parsedDuration) ? parsedDuration : 5.5);
+
+            // RETIME RANGE: these values own the whole pacing decision. The
+            // interval and row entrance compress together, never via timeScale.
+            var ROW_IN_BASE = 0.4;
+            var OUT_BASE = 0.4;
+            var baseEntranceSpan = (beatCount - 1) * interval + ROW_IN_BASE;
+            var OUT = duration <= OUT_BASE ? duration / 2 : OUT_BASE;
+            var entranceBudget = duration - OUT;
+            var scale = baseEntranceSpan > entranceBudget ? entranceBudget / baseEntranceSpan : 1;
+            var timedInterval = interval * scale;
+            var ROW_IN = ROW_IN_BASE * scale;
+            var ENTRANCE_SPAN = (beatCount - 1) * timedInterval + ROW_IN;
+            var HOLD = Math.max(0, duration - (ENTRANCE_SPAN + OUT));
+            var OUT_START = ENTRANCE_SPAN + HOLD;
+
+            function fireSfx(id, t) {
+              root.dispatchEvent(
+                new CustomEvent("hf:sfx", { detail: { id: id, t: t }, bubbles: true }),
+              );
+            }
+
+            var rows = [];
+            for (var i = 0; i < beatCount; i += 1) {
+              var title = suppliedLabels[i] || "Beat " + (i + 1);
+              var row = document.createElement("div");
+              row.className = "bt-row";
+              row.innerHTML =
+                '<div class="bt-index" aria-hidden="true"></div>' +
+                '<div class="bt-copy"><div class="bt-title"></div><div class="bt-subtitle"></div></div>';
+              row.querySelector(".bt-index").textContent = String(i + 1).padStart(2, "0");
+              row.querySelector(".bt-title").textContent = title;
+              row.querySelector(".bt-subtitle").textContent =
+                "Cue " +
+                String(i + 1).padStart(2, "0") +
+                "  ·  " +
+                (i * timedInterval).toFixed(2) +
+                "s";
+              stack.appendChild(row);
+              rows.push(row);
+            }
+
+            // Explicit entrance and exit endpoints make a direct seek to t=0
+            // correct without ever playing the timeline.
+            gsap.set(rows, { opacity: 0, y: "2cqh", scale: 0.98 });
+
+            var tl = gsap.timeline({ paused: true });
+
+            // ORCHESTRATION SPINE: every row tween and its declared cue are
+            // pinned to the named label, never to a duplicated numeric offset.
+            for (var beatIndex = 0; beatIndex < beatCount; beatIndex += 1) {
+              var labelName = "beat" + beatIndex;
+              var cueTime = beatIndex * timedInterval;
+              var cueId = beatIndex === beatCount - 1 ? "beat-tick-final" : "beat-tick";
+              tl.addLabel(labelName, cueTime);
+              tl.to(
+                rows[beatIndex],
+                { opacity: 1, y: "0cqh", scale: 1, duration: ROW_IN, ease: "power2.out" },
+                labelName,
+              );
+              // SFX CUE (IN, beat N): one scene-mixed cue at this beat label.
+              tl.call(fireSfx, [cueId, cueTime], labelName);
+            }
+
+            // HOLD is deliberately still. OUT accelerates every landed row away
+            // together, asymmetrically paired with the power2.out entrances.
+            tl.to(rows, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/beat-timeline/demo.html b/docs/public/catalog/components/beat-timeline/demo.html
new file mode 100644
index 0000000000..868b7dc26a
--- /dev/null
+++ b/docs/public/catalog/components/beat-timeline/demo.html
@@ -0,0 +1,115 @@
+<!doctype html>
+<!--
+  beat-timeline demo. Standalone 1920x1080 host that mounts the primitive via
+  data-composition-src. The mount uses non-default values for all variables:
+  five rows, a 0.5s interval, and custom titles. Its definite percentage-sized
+  card proves the primitive resolves cqw/cqh from the host box without
+  shrink-to-fit collapse. This demo is not installed by hyperframes add.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Beat Timeline - Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #05070d;
+      }
+
+      #root {
+        --bg: #070b14;
+        --fg: #f7f9fc;
+        --muted: #91a0b8;
+        --surface: #111a2b;
+        --border: rgba(145, 160, 184, 0.22);
+        --brand: #7dd3fc;
+        --accent: #c4b5fd;
+        --font-display: Inter, ui-sans-serif, system-ui, sans-serif;
+        --font-body: Inter, ui-sans-serif, system-ui, sans-serif;
+        --radius: 18px;
+        --space-1: 8px;
+        --space-2: 16px;
+        --space-3: 32px;
+        --ease-standard: cubic-bezier(0.215, 0.61, 0.355, 1);
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(circle at 50% 42%, var(--surface), var(--bg) 66%);
+        color: var(--fg);
+        font-family: var(--font-body);
+      }
+
+      /* Definite percentages resolve against #root's fixed pixel box. This
+         avoids the shrink-to-fit feedback collapse of a size-contained mount. */
+      .mount-card {
+        width: 50%;
+        height: 70%;
+        left: 25%;
+        top: 15%;
+        overflow: hidden;
+        border: 1px solid var(--border);
+        border-radius: 30px;
+        box-shadow: 0 48px 120px rgba(0, 0, 0, 0.48);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="beat-timeline-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5.5"
+      data-fps="30"
+    >
+      <div
+        id="beat-timeline-mount"
+        class="mount-card clip"
+        data-composition-id="beat-timeline"
+        data-composition-src="./beat-timeline.html"
+        data-variable-values='{"beatCount":5,"interval":0.5,"labels":"Capture,Draft,Review,Ship,Iterate"}'
+        data-start="0"
+        data-duration="5.5"
+        data-track-index="0"
+        data-width="960"
+        data-height="756"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      // The mounted primitive owns all visible motion. This empty paused host
+      // timeline satisfies the standalone composition registry contract.
+      window.__timelines = window.__timelines || {};
+      window.__timelines["beat-timeline-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "beat-timeline.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/before-after-wipe/README.md b/docs/public/catalog/components/before-after-wipe/README.md
new file mode 100644
index 0000000000..5f5cafed96
--- /dev/null
+++ b/docs/public/catalog/components/before-after-wipe/README.md
@@ -0,0 +1,93 @@
+# before-after-wipe
+
+Two full-bleed content panels compare a before and an after state. The before
+panel stays fully visible as the base layer; the after panel wipes over it from
+the left edge in one pass and the divider rests at `rest_split` percent for the
+whole hold. The divider (and its knob) stays hidden until the wipe starts, then
+fades in as it departs the left edge, so the lead-in never shows a half-clipped
+handle. Label chips mark each side. This ports comparison-split's divider-wipe mechanic onto real
+content slots: you supply the two visuals, the primitive supplies the wipe.
+
+## Files
+
+- `before-after-wipe.html`: the mountable sub-composition (install target:
+  `compositions/components/before-after-wipe.html`).
+- `registry-item.json`: registry metadata and the variables block.
+
+## Variables
+
+| id           | type   | default  | notes                                                                     |
+| ------------ | ------ | -------- | ------------------------------------------------------------------------- |
+| `label_a`    | string | `Before` | chip on the base panel; empty string hides it                             |
+| `label_b`    | string | `After`  | chip on the revealed panel; empty string hides it                         |
+| `rest_split` | number | `50`     | divider resting position, 0 to 100 percent                                |
+| `wipe_at`    | number | `0.25`   | seconds after mount start when the wipe begins (0 to 8)                   |
+| `accent`     | enum   | `green`  | `green` maps to `--brand`, `blue` to `--accent`, `violet` to `--accent-2` |
+| `exit`       | enum   | `none`   | `none` holds the final frame; `fade` and `up` release the stage           |
+
+Envelope: IN = `wipe_at` + 1.05s wipe travel, OUT = 0.5s only when `exit` is
+`fade` or `up`, HOLD is the sole elastic phase. The `wipe-land` sync point
+(`hf:sfx` id `wipe-land-soft`) fires when the divider lands, 1.30s at defaults.
+
+## The slot mechanism
+
+The primitive ships two named slot panels inside its `<template>`:
+
+```html
+<div class="baw-slot" data-slot="before">...</div>
+<div class="baw-slot" data-slot="after">...</div>
+```
+
+Each slot's default children are a token-styled wireframe card (muted on the
+before layer, brand-tinted on the after layer), so an untouched mount still
+reads as a tasteful comparison. To show your own content, install the
+component and **replace the children of each `[data-slot]` element in your
+installed copy** (the runtime clones only the primitive's own template on
+mount, so slot content lives in the component file, not on the host clip).
+
+Rules:
+
+- Both slots are full-bleed and share one coordinate space; align the two
+  states so the wipe reads as one surface changing, not two images sliding.
+- Direct `img`/`video` children are automatically sized to cover the panel
+  (`object-fit: cover`). Arbitrary HTML works too; size it in `cqw`/`cqh`.
+- Keep the label chips and divider alone; they render above slot content.
+
+## Worked example
+
+Install, then fill the slots with two screenshots:
+
+```bash
+npx hyperframes add before-after-wipe
+```
+
+In `compositions/components/before-after-wipe.html`, replace each slot's
+default block:
+
+```html
+<div class="baw-slot" data-slot="before">
+  <img src="../../assets/dashboard-old.png" alt="" />
+</div>
+...
+<div class="baw-slot" data-slot="after">
+  <img src="../../assets/dashboard-new.png" alt="" />
+</div>
+```
+
+Mount it from a host composition like any sub-composition:
+
+```html
+<div
+  class="clip"
+  data-composition-id="before-after-wipe"
+  data-composition-src="./components/before-after-wipe.html"
+  data-variable-values='{"label_a":"v1","label_b":"v2","rest_split":62,"accent":"blue"}'
+  data-start="2"
+  data-duration="5"
+  data-track-index="0"
+></div>
+```
+
+The wipe starts 0.25s after the clip mounts, lands at 62 percent, and the
+comparison holds still for the rest of the clip window (`exit` defaults to
+`none`; frame roots own scene transitions).
diff --git a/docs/public/catalog/components/before-after-wipe/before-after-wipe.html b/docs/public/catalog/components/before-after-wipe/before-after-wipe.html
new file mode 100644
index 0000000000..7efe185bfd
--- /dev/null
+++ b/docs/public/catalog/components/before-after-wipe/before-after-wipe.html
@@ -0,0 +1,478 @@
+<!doctype html>
+<!--
+  before-after-wipe: HyperFrames video primitive (ui-props / holdable / compare)
+
+  Concept: two full-bleed CONTENT SLOTS share one frame. The before slot stays
+  fully visible as the base layer while the after slot wipes over it from the
+  left edge, and a persistent divider rests at rest_split percent. Callers fill
+  the two named slot panels with their own content (screenshots, video, HTML);
+  when a slot is left untouched, a tasteful token-styled default renders
+  instead. One mechanic, one job: compare two visual states.
+
+  Ports the divider-wipe mechanic from comparison-split, with real content
+  slots instead of baked demo art (Wave J, U-B).
+
+  Slots (see README.md for a worked example):
+    - [data-slot="before"]: base layer content. Replace the children of this
+      element in your installed copy. Default: a muted token wireframe.
+    - [data-slot="after"]:  revealed layer content. Same mechanism. Default:
+      a brand-tinted version of the wireframe.
+    Direct img/video children of a slot are sized to cover the panel.
+
+  Variables (declared in data-composition-variables below):
+    - label_a (string, default "Before"): chip on the base panel. Empty hides it.
+    - label_b (string, default "After"): chip on the revealed panel. Empty hides it.
+    - rest_split (number, default 50, 0 to 100%): divider resting position.
+    - wipe_at (number, seconds, default 0.25): when the wipe starts, relative
+      to mount start. Clamped so the wipe always completes inside IN.
+    - accent (green | blue | violet, default green): divider handle and after
+      chip color. green maps to --brand, blue to --accent, violet to --accent-2.
+    - exit (none | fade | up, default none): outgoing transition. none holds
+      the final frame (frame roots own transitions; holds end films).
+
+  The divider (and its knob) stays hidden until the wipe starts, then fades in
+  as it departs the left edge: at split 0 the knob would straddle the frame
+  edge half-clipped, which reads as a rendering bug rather than a resting
+  state. One wipe pass, then the divider rests at rest_split for the whole
+  hold.
+
+  Envelope (fixed IN/OUT, elastic HOLD only, never gsap.timeScale()):
+    IN       = wipe_at + 1.05s wipe travel (stage settles during the first 0.32s)
+    HOLD     = elastic = max(0, D - (IN + OUT)); deliberately still so the
+               comparison stays easy to inspect
+    OUT      = 0.50s when exit is fade or up, 0 when exit is none
+    If D < IN + OUT, IN and OUT scale down together so IN + OUT == D.
+
+  Sync point: wipe-land at wipe_at + 1.05s inside IN (1.30s at defaults). It
+  never moves into elastic HOLD.
+
+  Sound cue: dispatches a bubbling `hf:sfx` CustomEvent with id
+  "wipe-land-soft" at wipe-land. This primitive never plays audio.
+
+  Mount contract: MOUNTABLE SUB-COMPOSITION. The runtime clones only
+  <template> contents; #root fills the host box (inset:0, container-type:
+  size), has no data-width/data-height, and registers one paused timeline
+  under the literal "before-after-wipe" key (mount flattening strips
+  data-composition-id from the live root). Variables come from
+  window.__hyperframes.getVariables().
+-->
+<html
+  lang="en"
+  data-composition-id="before-after-wipe"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "label_a", "type": "string", "role": "content", "label": "Before label", "description": "Chip shown on the base before panel. Blank hides the chip.", "default": "Before" },
+    { "id": "label_b", "type": "string", "role": "content", "label": "After label", "description": "Chip shown on the revealed after panel. Blank hides the chip.", "default": "After" },
+    { "id": "rest_split", "type": "number", "role": "layout", "label": "Resting split", "description": "Divider resting position after the wipe lands.", "default": 50, "min": 0, "max": 100, "step": 1, "unit": "%" },
+    { "id": "wipe_at", "type": "number", "role": "timing", "label": "Wipe start", "description": "Seconds after mount start when the wipe begins.", "default": 0.25, "min": 0, "max": 8, "step": 0.05, "unit": "s" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Divider handle and after chip color.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Outgoing transition. None holds the final comparison frame.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Before After Wipe</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="before-after-wipe" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          /* Root fills the host-owned box. Internal measurements use cqw/cqh
+             and every painted color comes from a contract token. */
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            background: var(--bg, #07111f);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+          }
+
+          .baw-clip,
+          .baw-stage,
+          .baw-panel,
+          .baw-slot {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+          }
+
+          .baw-clip {
+            overflow: hidden;
+          }
+
+          .baw-stage {
+            --baw-split: 0;
+            opacity: 0;
+          }
+
+          .baw-panel {
+            overflow: hidden;
+          }
+
+          /* The after layer wipes over the base via one clip-path driven by
+             --baw-split, the single owner of wipe progress. */
+          .baw-after {
+            z-index: 2;
+            clip-path: inset(0 calc((100 - var(--baw-split)) * 1%) 0 0);
+          }
+
+          /* Caller-supplied media covers its panel edge to edge. */
+          .baw-slot > img,
+          .baw-slot > video {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+          }
+
+          /* Token-styled default slot content: a wireframe card that reads
+             muted on the before layer and brand-tinted on the after layer.
+             Callers replacing slot children never see any of this. */
+          .baw-default {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+          }
+
+          .baw-before .baw-default {
+            background:
+              linear-gradient(
+                  color-mix(in srgb, var(--border, #334155) 34%, transparent) 0.12cqw,
+                  transparent 0.12cqw
+                )
+                0 0 / 5cqw 5cqw,
+              linear-gradient(
+                  90deg,
+                  color-mix(in srgb, var(--border, #334155) 34%, transparent) 0.12cqw,
+                  transparent 0.12cqw
+                )
+                0 0 / 5cqw 5cqw,
+              var(--surface, #172033);
+          }
+
+          .baw-after .baw-default {
+            background: linear-gradient(
+              135deg,
+              color-mix(in srgb, var(--brand, #22c55e) 32%, var(--surface, #172033)) 0%,
+              var(--surface, #172033) 58%,
+              color-mix(in srgb, var(--baw-accent, #22c55e) 22%, var(--surface, #172033)) 100%
+            );
+          }
+
+          .baw-card {
+            width: 56cqw;
+            height: 56cqh;
+            padding: var(--space-3, 4cqh) var(--space-3, 4cqw);
+            border: 0.16cqw solid var(--border, #334155);
+            border-radius: var(--radius, 2.4cqmin);
+            background: color-mix(in srgb, var(--surface, #172033) 88%, var(--bg, #07111f));
+            box-shadow: 0 2cqh 5cqw color-mix(in srgb, var(--bg, #07111f) 45%, transparent);
+          }
+
+          .baw-after .baw-card {
+            border-color: color-mix(
+              in srgb,
+              var(--baw-accent, #22c55e) 52%,
+              var(--border, #334155)
+            );
+            background: color-mix(in srgb, var(--surface, #172033) 86%, var(--brand, #22c55e));
+          }
+
+          .baw-bar {
+            width: 34%;
+            height: 4.4cqh;
+            margin-bottom: var(--space-3, 4cqh);
+            border-radius: 1.2cqh;
+            background: var(--muted, #94a3b8);
+            opacity: 0.5;
+          }
+
+          .baw-after .baw-bar {
+            background: var(--baw-accent, #22c55e);
+            opacity: 0.92;
+          }
+
+          .baw-line {
+            height: 2.4cqh;
+            margin-bottom: var(--space-2, 2.6cqh);
+            border-radius: 1.2cqh;
+            background: var(--muted, #94a3b8);
+            opacity: 0.4;
+          }
+
+          .baw-line:nth-of-type(2) {
+            width: 92%;
+          }
+
+          .baw-line:nth-of-type(3) {
+            width: 68%;
+          }
+
+          .baw-line:nth-of-type(4) {
+            width: 44%;
+          }
+
+          .baw-after .baw-line {
+            background: color-mix(in srgb, var(--brand, #22c55e) 70%, var(--fg, #f8fafc));
+            opacity: 0.75;
+          }
+
+          /* Label chips live outside the slots so they always render above
+             caller content. The after chip is clipped with its own panel, so
+             it appears only once the wipe has passed it. */
+          .baw-chip {
+            position: absolute;
+            z-index: 4;
+            top: var(--space-3, 4cqh);
+            padding: var(--space-1, 1.2cqh) var(--space-2, 2.2cqw);
+            border: 0.14cqw solid var(--border, #334155);
+            border-radius: 999cqw;
+            background: color-mix(in srgb, var(--surface, #172033) 88%, var(--bg, #07111f));
+            color: var(--muted, #94a3b8);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: min(3cqw, 4.2cqh);
+            font-weight: 600;
+            letter-spacing: 0.08em;
+            line-height: 1;
+            text-transform: uppercase;
+            white-space: nowrap;
+          }
+
+          .baw-chip:empty {
+            display: none;
+          }
+
+          .baw-before .baw-chip {
+            right: var(--space-3, 4cqw);
+          }
+
+          .baw-after .baw-chip {
+            left: var(--space-3, 4cqw);
+            border-color: color-mix(
+              in srgb,
+              var(--baw-accent, #22c55e) 62%,
+              var(--border, #334155)
+            );
+            color: var(--fg, #f8fafc);
+          }
+
+          .baw-divider {
+            position: absolute;
+            z-index: 5;
+            top: 0;
+            bottom: 0;
+            left: calc(var(--baw-split) * 1%);
+            width: 0.4cqw;
+            transform: translateX(-50%);
+            background: var(--fg, #f8fafc);
+            pointer-events: none;
+          }
+
+          .baw-divider::after {
+            content: "";
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            width: min(5cqw, 7cqh);
+            aspect-ratio: 1;
+            transform: translate(-50%, -50%);
+            border: 0.3cqw solid var(--baw-accent, #22c55e);
+            border-radius: 50%;
+            background: var(--fg, #f8fafc);
+          }
+        </style>
+
+        <div
+          id="before-after-wipe-clip"
+          class="baw-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="baw-stage">
+            <section class="baw-panel baw-before" aria-label="Before panel">
+              <div class="baw-slot" data-slot="before">
+                <!-- SLOT "before": replace the children of this element with
+                     your own content (img, video, or HTML). -->
+                <div class="baw-default" aria-hidden="true">
+                  <div class="baw-card">
+                    <div class="baw-bar"></div>
+                    <div class="baw-line"></div>
+                    <div class="baw-line"></div>
+                    <div class="baw-line"></div>
+                  </div>
+                </div>
+              </div>
+              <div class="baw-chip baw-chip-a"></div>
+            </section>
+
+            <section class="baw-panel baw-after" aria-label="After panel">
+              <div class="baw-slot" data-slot="after">
+                <!-- SLOT "after": replace the children of this element with
+                     your own content (img, video, or HTML). -->
+                <div class="baw-default" aria-hidden="true">
+                  <div class="baw-card">
+                    <div class="baw-bar"></div>
+                    <div class="baw-line"></div>
+                    <div class="baw-line"></div>
+                    <div class="baw-line"></div>
+                  </div>
+                </div>
+              </div>
+              <div class="baw-chip baw-chip-b"></div>
+            </section>
+
+            <div class="baw-divider" aria-hidden="true"></div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            // Literal id: mount flattening strips data-composition-id from the
+            // live root before this timeline registers.
+            var compositionId = "before-after-wipe";
+            var stage = root.querySelector(".baw-stage");
+            var divider = root.querySelector(".baw-divider");
+            var chipA = root.querySelector(".baw-chip-a");
+            var chipB = root.querySelector(".baw-chip-b");
+
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var labelA = vars.label_a == null ? "Before" : String(vars.label_a);
+            var labelB = vars.label_b == null ? "After" : String(vars.label_b);
+            var rawSplit = vars.rest_split == null ? 50 : Number(vars.rest_split);
+            // INVARIANT: rest_split always clamps into the declared 0-100 range.
+            var restSplit = Number.isFinite(rawSplit) ? Math.max(0, Math.min(100, rawSplit)) : 50;
+            var rawWipeAt = vars.wipe_at == null ? 0.25 : Number(vars.wipe_at);
+            var wipeAt = Number.isFinite(rawWipeAt) ? Math.max(0, Math.min(8, rawWipeAt)) : 0.25;
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #22c55e)",
+              blue: "var(--accent, #38bdf8)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            // The bundler mirrors composition variables as scoped CSS custom
+            // props, so this unit's own accent variable shadows the contract
+            // --accent token inside the subtree ("blue" is a valid CSS color
+            // and would render pure blue). When the shadow is present, fall
+            // back to the literal contract value instead of var(--accent).
+            var computedAccent = getComputedStyle(root).getPropertyValue("--accent").trim();
+            if (
+              computedAccent === "green" ||
+              computedAccent === "blue" ||
+              computedAccent === "violet"
+            ) {
+              accentColors.blue = "#38bdf8";
+            }
+            // INVARIANT: only none | fade | up reaches the timeline.
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            chipA.textContent = labelA;
+            chipB.textContent = labelB;
+            root.style.setProperty("--baw-accent", accentColors[accent]);
+
+            // RETIME RANGE: fixed IN and OUT scale together only when D is too
+            // short. HOLD is the sole elastic phase. Never use timeScale().
+            var STAGE_IN_BASE = 0.32;
+            var WIPE_DURATION_BASE = 1.05;
+            var IN_BASE = wipeAt + WIPE_DURATION_BASE;
+            var OUT_BASE = exit === "none" ? 0 : 0.5;
+
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var totalBase = IN_BASE + OUT_BASE;
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var STAGE_IN = Math.min(STAGE_IN_BASE * scale, IN);
+            var WIPE_AT = wipeAt * scale;
+            var WIPE_DURATION = WIPE_DURATION_BASE * scale;
+            var WIPE_END = IN;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var OUT_START = IN + HOLD;
+
+            function fireSfx(id, t) {
+              root.dispatchEvent(
+                new CustomEvent("hf:sfx", { detail: { id: id, t: t }, bubbles: true }),
+              );
+            }
+
+            // Explicit both-endpoints state makes tl.seek(0) deterministic.
+            // --baw-split is the only owner of both clip and divider progress.
+            // The divider starts hidden: at split 0 its knob would render
+            // half-clipped at the frame edge for the whole lead-in.
+            gsap.set(stage, { opacity: 0, y: 0, "--baw-split": 0 });
+            gsap.set(divider, { autoAlpha: 0 });
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: stage settle, then ONE wipe pass travels to rest_split and
+            // stays there. The divider fades in as it departs the left edge.
+            tl.to(stage, { opacity: 1, duration: STAGE_IN, ease: "power2.out" }, 0);
+            tl.to(
+              stage,
+              { "--baw-split": restSplit, duration: WIPE_DURATION, ease: "sine.inOut" },
+              WIPE_AT,
+            );
+            tl.fromTo(
+              divider,
+              { autoAlpha: 0 },
+              {
+                autoAlpha: 1,
+                duration: Math.min(0.22 * scale, WIPE_DURATION),
+                ease: "power1.out",
+                immediateRender: false,
+              },
+              WIPE_AT,
+            );
+            tl.call(
+              function () {
+                fireSfx("wipe-land-soft", WIPE_END);
+              },
+              [],
+              WIPE_END,
+            );
+
+            // HOLD: deliberately steady at the resting split.
+
+            // OUT: only when the exit variable asks for one; exit none holds
+            // the final comparison frame (frame roots own transitions).
+            if (exit !== "none") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+              if (exit === "up") {
+                tl.to(stage, { y: "-6cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              }
+            }
+
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/before-after-wipe/demo.html b/docs/public/catalog/components/before-after-wipe/demo.html
new file mode 100644
index 0000000000..e9c8e0e721
--- /dev/null
+++ b/docs/public/catalog/components/before-after-wipe/demo.html
@@ -0,0 +1,98 @@
+<!doctype html>
+<!--
+  before-after-wipe demo. Full-bleed mount on a light editorial backdrop: the
+  wipe sweeps the entire 1920x1080 frame, proving the before/after reveal
+  works as a full-frame transition rather than inside a small card.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>before-after-wipe Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #f4f6f9);
+      }
+
+      #root {
+        --bg: #f4f6f9;
+        --fg: #14161b;
+        --surface: #ffffff;
+        --border: #dfe4ec;
+        --brand: #1d4ed8;
+        --accent: #0284c7;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 40%, #ffffff 0%, var(--bg, #f4f6f9) 70%);
+      }
+
+      .mount-stage {
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        container-type: size;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="before-after-wipe-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="before-after-wipe-mount"
+        class="mount-stage clip"
+        data-composition-id="before-after-wipe"
+        data-composition-src="./before-after-wipe.html"
+        data-variable-values='{"label_a":"BEFORE","label_b":"AFTER","rest_split":55,"wipe_at":0.8,"accent":"violet"}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="1920"
+        data-height="1080"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["before-after-wipe-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "before-after-wipe.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/bezier-callout-route/bezier-callout-route.html b/docs/public/catalog/components/bezier-callout-route/bezier-callout-route.html
new file mode 100644
index 0000000000..7dffa7cf9c
--- /dev/null
+++ b/docs/public/catalog/components/bezier-callout-route/bezier-callout-route.html
@@ -0,0 +1,94 @@
+<!--
+  Bezier Callout Route - advanced HyperFrames primitive.
+
+  This is intentionally seekable: drive it from a paused GSAP timeline.
+  MotionPath examples require GSAP MotionPathPlugin. Three.js examples expose
+  a render(progress) adapter instead of a free-running requestAnimationFrame loop.
+-->
+
+<div class="hf-advanced-bezier-callout-route">
+  <svg viewBox="0 0 760 430" aria-hidden="true">
+    <path
+      id="bezier-callout-route-path-a"
+      class="path"
+      d="M104 310 C178 110, 334 74, 442 178 S592 306, 668 120"
+    />
+    <path id="bezier-callout-route-path-b" class="path" d="M118 142 C224 300, 410 330, 642 206" />
+  </svg>
+  <div class="core">Bezier Callout Route</div>
+  <div class="chip chip-a"><span class="dot"></span>Plan</div>
+  <div class="chip chip-b"><span class="dot"></span>Render</div>
+</div>
+
+<style>
+  .hf-advanced-bezier-callout-route {
+    color: #111827;
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-advanced-bezier-callout-route {
+    position: relative;
+    width: 760px;
+    height: 430px;
+    border-radius: 30px;
+    overflow: hidden;
+    background: radial-gradient(circle at 50% 20%, #dbeafe, #f8fafc 54%, #e0e7ff);
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);
+  }
+  .hf-advanced-bezier-callout-route svg {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    overflow: visible;
+  }
+  .hf-advanced-bezier-callout-route .path {
+    fill: none;
+    stroke: rgba(37, 99, 235, 0.28);
+    stroke-width: 3;
+    stroke-dasharray: 10 12;
+  }
+  .hf-advanced-bezier-callout-route .core {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 176px;
+    height: 176px;
+    margin: -88px 0 0 -88px;
+    border-radius: 42px;
+    background: #111827;
+    color: #fff;
+    display: grid;
+    place-items: center;
+    text-align: center;
+    font-weight: 900;
+    letter-spacing: -0.04em;
+    box-shadow: 0 22px 54px rgba(15, 23, 42, 0.25);
+  }
+  .hf-advanced-bezier-callout-route .chip {
+    position: absolute;
+    left: 0;
+    top: 0;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    height: 42px;
+    padding: 0 16px;
+    border-radius: 999px;
+    background: #fff;
+    box-shadow: 0 16px 42px rgba(15, 23, 42, 0.14);
+    font-weight: 800;
+    transform-origin: 50% 50%;
+  }
+  .hf-advanced-bezier-callout-route .dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 999px;
+    background: #2563eb;
+  }
+</style>
+
+<!--
+  Timeline integration:
+  const startTime = 0;
+  if (window.MotionPathPlugin) gsap.registerPlugin(MotionPathPlugin); tl.to('.hf-advanced-bezier-callout-route .chip-a', { motionPath: { path: '#bezier-callout-route-path-a', align: '#bezier-callout-route-path-a', alignOrigin: [0.5, 0.5], autoRotate: true }, duration: 2.4, ease: 'power1.inOut' }, startTime); tl.to('.hf-advanced-bezier-callout-route .chip-b', { motionPath: { path: '#bezier-callout-route-path-b', align: '#bezier-callout-route-path-b', alignOrigin: [0.5, 0.5], autoRotate: true, start: 0.1, end: 0.92 }, duration: 2.1, ease: 'sine.inOut' }, startTime + 0.25);
+-->
diff --git a/docs/public/catalog/components/bezier-callout-route/demo.html b/docs/public/catalog/components/bezier-callout-route/demo.html
new file mode 100644
index 0000000000..94857e5538
--- /dev/null
+++ b/docs/public/catalog/components/bezier-callout-route/demo.html
@@ -0,0 +1,164 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Bezier Callout Route - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/MotionPathPlugin.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-advanced-bezier-callout-route {
+        color: #111827;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-advanced-bezier-callout-route {
+        position: relative;
+        width: 760px;
+        height: 430px;
+        border-radius: 30px;
+        overflow: hidden;
+        background: radial-gradient(circle at 50% 20%, #dbeafe, #f8fafc 54%, #e0e7ff);
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);
+        /* ponytail: zoom scales the card without touching GSAP's motionPath transforms on chip-a/chip-b */
+        zoom: 1.72;
+      }
+      .hf-advanced-bezier-callout-route svg {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        overflow: visible;
+      }
+      .hf-advanced-bezier-callout-route .path {
+        fill: none;
+        stroke: rgba(37, 99, 235, 0.28);
+        stroke-width: 3;
+        stroke-dasharray: 10 12;
+      }
+      .hf-advanced-bezier-callout-route .core {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        width: 176px;
+        height: 176px;
+        margin: -88px 0 0 -88px;
+        border-radius: 42px;
+        background: #111827;
+        color: #fff;
+        display: grid;
+        place-items: center;
+        text-align: center;
+        font-size: 15px;
+        font-weight: 900;
+        letter-spacing: -0.04em;
+        box-shadow: 0 22px 54px rgba(15, 23, 42, 0.25);
+      }
+      .hf-advanced-bezier-callout-route .chip {
+        position: absolute;
+        left: 0;
+        top: 0;
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+        height: 42px;
+        padding: 0 16px;
+        border-radius: 999px;
+        background: #fff;
+        box-shadow: 0 16px 42px rgba(15, 23, 42, 0.14);
+        font-size: 13px;
+        font-weight: 800;
+        transform-origin: 50% 50%;
+      }
+      .hf-advanced-bezier-callout-route .dot {
+        width: 10px;
+        height: 10px;
+        border-radius: 999px;
+        background: #2563eb;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="bezier-callout-route-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="hf-advanced-bezier-callout-route">
+        <svg viewBox="0 0 760 430" aria-hidden="true">
+          <path
+            id="bezier-callout-route-path-a"
+            class="path"
+            d="M104 310 C178 110, 334 74, 442 178 S592 306, 668 120"
+          />
+          <path
+            id="bezier-callout-route-path-b"
+            class="path"
+            d="M118 142 C224 300, 410 330, 642 206"
+          />
+        </svg>
+        <div class="core">Bezier Callout Route</div>
+        <div class="chip chip-a"><span class="dot"></span>Plan</div>
+        <div class="chip chip-b"><span class="dot"></span>Render</div>
+      </div>
+    </div>
+    <script>
+      const tl = gsap.timeline({ paused: true });
+      const startTime = 0.5;
+      if (window.MotionPathPlugin) gsap.registerPlugin(MotionPathPlugin);
+      tl.to(
+        ".hf-advanced-bezier-callout-route .chip-a",
+        {
+          motionPath: {
+            path: "#bezier-callout-route-path-a",
+            align: "#bezier-callout-route-path-a",
+            alignOrigin: [0.5, 0.5],
+            autoRotate: true,
+          },
+          duration: 2.4,
+          ease: "power1.inOut",
+        },
+        startTime,
+      );
+      tl.to(
+        ".hf-advanced-bezier-callout-route .chip-b",
+        {
+          motionPath: {
+            path: "#bezier-callout-route-path-b",
+            align: "#bezier-callout-route-path-b",
+            alignOrigin: [0.5, 0.5],
+            autoRotate: true,
+            start: 0.1,
+            end: 0.92,
+          },
+          duration: 2.1,
+          ease: "sine.inOut",
+        },
+        startTime + 0.25,
+      );
+      tl.set({}, {}, 5);
+      window.__timelines = window.__timelines || {};
+      window.__timelines["bezier-callout-route-demo"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/blur-in/__hf-variables-preview.html b/docs/public/catalog/components/blur-in/__hf-variables-preview.html
new file mode 100644
index 0000000000..49726f2b84
--- /dev/null
+++ b/docs/public/catalog/components/blur-in/__hf-variables-preview.html
@@ -0,0 +1,79 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Blur In variables preview</title>
+    <style>
+      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #0a0a0a; }
+      #hf-vars-root { position: relative; width: 1920px; height: 1080px; }
+      #hf-vars-mount { position: absolute; inset: 0; display: grid; place-items: center; }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  </head>
+  <body>
+    <div id="hf-vars-root" data-composition-id="blur-in-variables-preview" data-start="0" data-width="1920" data-height="1080" data-duration="5" data-fps="30">
+      <div id="hf-vars-mount" class="clip" data-composition-id="blur-in" data-composition-src="./blur-in.html" data-start="0" data-duration="5" data-track-index="0" data-width="1920" data-height="1080"></div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["blur-in-variables-preview"] = gsap.timeline({ paused: true });
+    </script>
+    <script>
+      (function () {
+        var mount = document.getElementById("hf-vars-mount");
+        // The mount is filled asynchronously, and the demo script selects
+        // what it fills it with, so it cannot run before then.
+        var observer = new MutationObserver(build);
+        observer.observe(mount, { childList: true, subtree: true });
+        build();
+        function build() {
+          if (!mount.firstElementChild) return;
+          observer.disconnect();
+
+        const tl = gsap.timeline({ paused: true });
+        tl.addLabel("start", 0);
+        tl.set(".hf-ui-demo-stage", { opacity: 1 }, 0);
+        tl.fromTo(
+          ".hf-ui-blur-in span",
+          { opacity: 0, y: 8, filter: "blur(10px)" },
+          {
+            opacity: 1,
+            y: 0,
+            filter: "blur(0px)",
+            duration: 0.36,
+            stagger: 0.04,
+            ease: "power3.out",
+          },
+          0.3,
+        );
+        tl.addLabel("end", 4);
+        tl.set(".hf-ui-demo-stage", { opacity: 1 }, "end");
+        window.__timelines = window.__timelines || {};
+        window.__timelines["blur-in-demo"] = tl;
+          var child = window.__timelines["blur-in-demo"];
+          delete window.__timelines["blur-in-demo"];
+          if (!child || typeof child.paused !== "function") return;
+          child.paused(false);
+          window.__timelines["blur-in-variables-preview"].add(child, 0);
+        }
+      })();
+    </script>
+<script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "blur-in.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/blur-in/blur-in.html b/docs/public/catalog/components/blur-in/blur-in.html
new file mode 100644
index 0000000000..2354c5c895
--- /dev/null
+++ b/docs/public/catalog/components/blur-in/blur-in.html
@@ -0,0 +1,239 @@
+<!--
+  Blur In - Operator Black content-focus reveal primitive.
+
+  Paste the markup, CSS and script into a composition. Use the timeline
+  integration note at the bottom as the starting point for deterministic GSAP
+  animation.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result as a custom property
+  the CSS below consumes. The timeline recipe at the bottom is untouched by
+  them: it keeps resolving the same words out of the same blur.
+
+    - size (24 to 120, default 52, in px): the type size of the words. The gap
+      between words is set in em, so it scales with this.
+    - tone (strong | muted | accent, default strong): word colour. strong is
+      the headline text token, muted the supporting one, accent the theme
+      green, so all three track light and dark frames.
+    - align (left | center | right, default left): where the words sit across
+      the frame.
+
+  On every default the result is identical to the original: 52px strong words,
+  left aligned.
+-->
+
+<div
+  data-hf-ui-root
+  class="hf-ui-blur-in"
+  aria-label="Design systems for video"
+  data-composition-variables='[
+    { "id": "size", "type": "number", "role": "style", "label": "Size", "description": "Type size of the revealed words in pixels; the gap between words scales with it.", "default": 52, "min": 24, "max": 120, "step": 2, "unit": "px" },
+    { "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Word colour: strong for headlines, muted for supporting lines, accent for the brand green.", "default": "strong", "options": [{ "value": "strong", "label": "Strong" }, { "value": "muted", "label": "Muted" }, { "value": "accent", "label": "Accent" }] },
+    { "id": "align", "type": "enum", "role": "style", "label": "Align", "description": "Horizontal alignment of the words in the frame.", "default": "left", "options": [{ "value": "left", "label": "Left" }, { "value": "center", "label": "Center" }, { "value": "right", "label": "Right" }] }
+  ]'
+>
+  <span>Design</span>
+  <span>systems</span>
+  <span>for</span>
+  <span>video</span>
+</div>
+
+<style>
+  /* hf-ui:tokens:start */
+  /* prettier-ignore */
+  [data-hf-ui-root] {
+    --_hf-ui-accent: var(--hf-ui-accent, #3ce6ac);
+    --_hf-ui-action: var(--hf-ui-action, #eeeeee);
+    --_hf-ui-action-contrast: var(--hf-ui-action-contrast, #111111);
+    --_hf-ui-border: var(--hf-ui-border, #2a2a2a);
+    --_hf-ui-border-strong: var(--hf-ui-border-strong, #383838);
+    --_hf-ui-canvas: var(--hf-ui-canvas, #0a0a0a);
+    --_hf-ui-control-border: var(--hf-ui-control-border, #686868);
+    --_hf-ui-control-border-hover: var(--hf-ui-control-border-hover, #777777);
+    --_hf-ui-control-height: var(--hf-ui-control-height, 40px);
+    --_hf-ui-danger: var(--hf-ui-danger, #ff7878);
+    --_hf-ui-data-1: var(--hf-ui-data-1, #3ce6ac);
+    --_hf-ui-data-2: var(--hf-ui-data-2, #63a5ff);
+    --_hf-ui-data-3: var(--hf-ui-data-3, #e9ab55);
+    --_hf-ui-data-4: var(--hf-ui-data-4, #a78bfa);
+    --_hf-ui-data-5: var(--hf-ui-data-5, #ff8a75);
+    --_hf-ui-duration-drawer-enter: var(--hf-ui-duration-drawer-enter, 360ms);
+    --_hf-ui-duration-drawer-exit: var(--hf-ui-duration-drawer-exit, 240ms);
+    --_hf-ui-duration-modal-enter: var(--hf-ui-duration-modal-enter, 280ms);
+    --_hf-ui-duration-modal-exit: var(--hf-ui-duration-modal-exit, 180ms);
+    --_hf-ui-duration-overlay-enter: var(--hf-ui-duration-overlay-enter, 210ms);
+    --_hf-ui-duration-overlay-exit: var(--hf-ui-duration-overlay-exit, 140ms);
+    --_hf-ui-duration-press: var(--hf-ui-duration-press, 120ms);
+    --_hf-ui-duration-state: var(--hf-ui-duration-state, 160ms);
+    --_hf-ui-ease-enter: var(--hf-ui-ease-enter, cubic-bezier(0.32, 0.72, 0, 1));
+    --_hf-ui-ease-exit: var(--hf-ui-ease-exit, cubic-bezier(0.23, 1, 0.32, 1));
+    --_hf-ui-ease-response: var(--hf-ui-ease-response, cubic-bezier(0.23, 1, 0.32, 1));
+    --_hf-ui-font-mono: var(--hf-ui-font-mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
+    --_hf-ui-font-sans: var(--hf-ui-font-sans, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
+    --_hf-ui-hit-target: var(--hf-ui-hit-target, 44px);
+    --_hf-ui-radius-control: var(--hf-ui-radius-control, 5px);
+    --_hf-ui-radius-overlay: var(--hf-ui-radius-overlay, 10px);
+    --_hf-ui-radius-surface: var(--hf-ui-radius-surface, 7px);
+    --_hf-ui-shadow-contact: var(--hf-ui-shadow-contact, 0 8px 18px rgba(0, 0, 0, 0.38));
+    --_hf-ui-shadow-inset: var(--hf-ui-shadow-inset, inset 0 1px 0 rgba(255, 255, 255, 0.035));
+    --_hf-ui-shadow-modal: var(--hf-ui-shadow-modal, 0 18px 46px rgba(0, 0, 0, 0.52));
+    --_hf-ui-space-1: var(--hf-ui-space-1, 4px);
+    --_hf-ui-space-12: var(--hf-ui-space-12, 48px);
+    --_hf-ui-space-16: var(--hf-ui-space-16, 64px);
+    --_hf-ui-space-2: var(--hf-ui-space-2, 8px);
+    --_hf-ui-space-3: var(--hf-ui-space-3, 12px);
+    --_hf-ui-space-4: var(--hf-ui-space-4, 16px);
+    --_hf-ui-space-6: var(--hf-ui-space-6, 24px);
+    --_hf-ui-space-8: var(--hf-ui-space-8, 32px);
+    --_hf-ui-surface: var(--hf-ui-surface, #141414);
+    --_hf-ui-surface-inset: var(--hf-ui-surface-inset, #101010);
+    --_hf-ui-surface-raised: var(--hf-ui-surface-raised, #1a1a1a);
+    --_hf-ui-text: var(--hf-ui-text, #e5e5e5);
+    --_hf-ui-text-faint: var(--hf-ui-text-faint, #7e7e7e);
+    --_hf-ui-text-muted: var(--hf-ui-text-muted, #929292);
+    --_hf-ui-text-strong: var(--hf-ui-text-strong, #f3f3f3);
+    --_hf-ui-warning: var(--hf-ui-warning, #e9ab55);
+    --_hf-ui-weight-medium: var(--hf-ui-weight-medium, 500);
+    --_hf-ui-weight-regular: var(--hf-ui-weight-regular, 400);
+    --_hf-ui-weight-semibold: var(--hf-ui-weight-semibold, 600);
+    box-sizing: border-box;
+    color-scheme: dark;
+    font-family: var(--_hf-ui-font-sans);
+  }
+  /* prettier-ignore */
+  [data-hf-ui-root] *,
+  [data-hf-ui-root] *::before,
+  [data-hf-ui-root] *::after {
+    box-sizing: border-box;
+  }
+  /* prettier-ignore */
+  [data-hf-theme="light"] [data-hf-ui-root],
+  [data-hf-ui-root][data-hf-theme="light"] {
+    --_hf-ui-accent: var(--hf-ui-accent, #087a57);
+    --_hf-ui-action: var(--hf-ui-action, #171717);
+    --_hf-ui-action-contrast: var(--hf-ui-action-contrast, #ffffff);
+    --_hf-ui-border: var(--hf-ui-border, #e0dfdb);
+    --_hf-ui-border-strong: var(--hf-ui-border-strong, #cbc9c3);
+    --_hf-ui-canvas: var(--hf-ui-canvas, #f6f5f1);
+    --_hf-ui-control-border: var(--hf-ui-control-border, #888888);
+    --_hf-ui-control-border-hover: var(--hf-ui-control-border-hover, #6f6e68);
+    --_hf-ui-danger: var(--hf-ui-danger, #a61b1b);
+    --_hf-ui-data-1: var(--hf-ui-data-1, #087a57);
+    --_hf-ui-data-2: var(--hf-ui-data-2, #245ea8);
+    --_hf-ui-data-3: var(--hf-ui-data-3, #8a4b00);
+    --_hf-ui-data-4: var(--hf-ui-data-4, #6d3fc0);
+    --_hf-ui-data-5: var(--hf-ui-data-5, #a83d2d);
+    --_hf-ui-shadow-contact: var(--hf-ui-shadow-contact, 0 7px 16px rgba(26, 24, 20, 0.13));
+    --_hf-ui-shadow-inset: var(--hf-ui-shadow-inset, inset 0 1px 0 rgba(255, 255, 255, 0.78));
+    --_hf-ui-shadow-modal: var(--hf-ui-shadow-modal, 0 18px 46px rgba(26, 24, 20, 0.18));
+    --_hf-ui-surface: var(--hf-ui-surface, #ffffff);
+    --_hf-ui-surface-inset: var(--hf-ui-surface-inset, #f0efeb);
+    --_hf-ui-surface-raised: var(--hf-ui-surface-raised, #ffffff);
+    --_hf-ui-text: var(--hf-ui-text, #171717);
+    --_hf-ui-text-faint: var(--hf-ui-text-faint, #6f6e68);
+    --_hf-ui-text-muted: var(--hf-ui-text-muted, #5f5f5a);
+    --_hf-ui-text-strong: var(--hf-ui-text-strong, #0a0a0a);
+    --_hf-ui-warning: var(--hf-ui-warning, #8a4b00);
+    color-scheme: light;
+  }
+  /* prettier-ignore */
+  [data-hf-ui-root]:focus-visible {
+    outline: 2px solid var(--_hf-ui-accent);
+    outline-offset: 3px;
+  }
+  /* prettier-ignore */
+  [data-hf-rendering="true"][data-hf-ui-root],
+  [data-hf-rendering="true"] [data-hf-ui-root],
+  [data-hf-rendering="true"][data-hf-ui-root] *,
+  [data-hf-rendering="true"] [data-hf-ui-root] *,
+  [data-hf-rendering="true"][data-hf-ui-root]::before,
+  [data-hf-rendering="true"][data-hf-ui-root]::after,
+  [data-hf-rendering="true"] [data-hf-ui-root]::before,
+  [data-hf-rendering="true"] [data-hf-ui-root]::after,
+  [data-hf-rendering="true"][data-hf-ui-root] *::before,
+  [data-hf-rendering="true"][data-hf-ui-root] *::after,
+  [data-hf-rendering="true"] [data-hf-ui-root] *::before,
+  [data-hf-rendering="true"] [data-hf-ui-root] *::after {
+    animation-duration: 0s !important;
+    animation-delay: 0s !important;
+    transition-duration: 0s !important;
+    transition-delay: 0s !important;
+  }
+  /* prettier-ignore */
+  @media (prefers-reduced-motion: reduce) {
+    [data-hf-ui-root],
+    [data-hf-ui-root] *,
+    [data-hf-ui-root] *::before,
+    [data-hf-ui-root] *::after {
+      animation-duration: 0s !important;
+      animation-delay: 0s !important;
+      transition-duration: 0s !important;
+      transition-delay: 0s !important;
+      scroll-behavior: auto !important;
+    }
+  }
+  /* hf-ui:tokens:end */
+  .hf-ui-blur-in {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: var(--hf-blur-in-align, flex-start);
+    gap: 0.28em;
+    color: var(--hf-blur-in-color, var(--_hf-ui-text-strong));
+    font: var(--_hf-ui-weight-semibold) 52px/1 var(--_hf-ui-font-sans);
+    font-size: var(--hf-blur-in-size, 52px);
+    letter-spacing: -0.02em;
+  }
+  .hf-ui-blur-in span {
+    display: inline-block;
+    filter: blur(0px);
+    opacity: 1;
+    will-change: opacity, transform, filter;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    function clampNumber(value, min, max, fallback) {
+      var n = typeof value === "number" ? value : parseFloat(value);
+      if (!isFinite(n)) {
+        return fallback;
+      }
+      return Math.min(max, Math.max(min, n));
+    }
+
+    var tones = {
+      strong: "var(--_hf-ui-text-strong)",
+      muted: "var(--_hf-ui-text-muted)",
+      accent: "var(--_hf-ui-accent)",
+    };
+    var aligns = { left: "flex-start", center: "center", right: "flex-end" };
+
+    var size = clampNumber(vars.size, 24, 120, 52);
+    var tone = tones[pick(tones, vars.tone, "strong")];
+    var align = aligns[pick(aligns, vars.align, "left")];
+
+    var roots = document.querySelectorAll(".hf-ui-blur-in");
+    for (var i = 0; i < roots.length; i += 1) {
+      roots[i].style.setProperty("--hf-blur-in-size", size + "px");
+      roots[i].style.setProperty("--hf-blur-in-color", tone);
+      roots[i].style.setProperty("--hf-blur-in-align", align);
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-ui-blur-in span', { opacity: 0, y: 8, filter: 'blur(10px)' }, { opacity: 1, y: 0, filter: 'blur(0px)', duration: 0.36, stagger: 0.04, ease: 'power3.out' }, startTime);
+-->
diff --git a/docs/public/catalog/components/blur-in/demo.html b/docs/public/catalog/components/blur-in/demo.html
new file mode 100644
index 0000000000..431096dd8d
--- /dev/null
+++ b/docs/public/catalog/components/blur-in/demo.html
@@ -0,0 +1,281 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Blur In — Operator Black</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      body {
+        background: #0a0a0a;
+      }
+      .hf-ui-demo-canvas {
+        width: 1920px;
+        height: 1080px;
+        box-sizing: border-box;
+        display: grid;
+        grid-template-rows: 1fr auto;
+        place-items: center;
+        padding: 96px;
+        background: #0a0a0a;
+        color: #e5e5e5;
+        font-family:
+          ui-sans-serif,
+          -apple-system,
+          BlinkMacSystemFont,
+          "Segoe UI",
+          sans-serif;
+      }
+      .hf-ui-demo-stage {
+        display: grid;
+        place-items: center;
+        min-width: 0;
+        max-width: 100%;
+      }
+      .hf-ui-demo-caption {
+        justify-self: start;
+        color: #929292;
+        font:
+          500 18px/1.4 ui-monospace,
+          "SFMono-Regular",
+          Menlo,
+          Consolas,
+          monospace;
+        letter-spacing: 0.01em;
+      }
+    </style>
+  </head>
+  <body>
+    <main
+      class="hf-ui-demo-canvas"
+      data-composition-id="blur-in-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-hf-rendering="true"
+      data-hf-theme="dark"
+    >
+      <!-- prettier-ignore -->
+      <section class="hf-ui-demo-stage" aria-label="Blur In specimen" inert>
+        <!-- hf-ui:canonical:start -->
+<!--
+  Blur In - Operator Black content-focus reveal primitive.
+
+  Paste the markup and CSS into a composition. Use the timeline integration
+  note at the bottom as the starting point for deterministic GSAP animation.
+-->
+
+<div data-hf-ui-root class="hf-ui-blur-in" aria-label="Design systems for video">
+  <span>Design</span>
+  <span>systems</span>
+  <span>for</span>
+  <span>video</span>
+</div>
+
+<style>
+  /* hf-ui:tokens:start */
+  /* prettier-ignore */
+  [data-hf-ui-root] {
+    --_hf-ui-accent: var(--hf-ui-accent, #3ce6ac);
+    --_hf-ui-action: var(--hf-ui-action, #eeeeee);
+    --_hf-ui-action-contrast: var(--hf-ui-action-contrast, #111111);
+    --_hf-ui-border: var(--hf-ui-border, #2a2a2a);
+    --_hf-ui-border-strong: var(--hf-ui-border-strong, #383838);
+    --_hf-ui-canvas: var(--hf-ui-canvas, #0a0a0a);
+    --_hf-ui-control-border: var(--hf-ui-control-border, #686868);
+    --_hf-ui-control-border-hover: var(--hf-ui-control-border-hover, #777777);
+    --_hf-ui-control-height: var(--hf-ui-control-height, 40px);
+    --_hf-ui-danger: var(--hf-ui-danger, #ff7878);
+    --_hf-ui-data-1: var(--hf-ui-data-1, #3ce6ac);
+    --_hf-ui-data-2: var(--hf-ui-data-2, #63a5ff);
+    --_hf-ui-data-3: var(--hf-ui-data-3, #e9ab55);
+    --_hf-ui-data-4: var(--hf-ui-data-4, #a78bfa);
+    --_hf-ui-data-5: var(--hf-ui-data-5, #ff8a75);
+    --_hf-ui-duration-drawer-enter: var(--hf-ui-duration-drawer-enter, 360ms);
+    --_hf-ui-duration-drawer-exit: var(--hf-ui-duration-drawer-exit, 240ms);
+    --_hf-ui-duration-modal-enter: var(--hf-ui-duration-modal-enter, 280ms);
+    --_hf-ui-duration-modal-exit: var(--hf-ui-duration-modal-exit, 180ms);
+    --_hf-ui-duration-overlay-enter: var(--hf-ui-duration-overlay-enter, 210ms);
+    --_hf-ui-duration-overlay-exit: var(--hf-ui-duration-overlay-exit, 140ms);
+    --_hf-ui-duration-press: var(--hf-ui-duration-press, 120ms);
+    --_hf-ui-duration-state: var(--hf-ui-duration-state, 160ms);
+    --_hf-ui-ease-enter: var(--hf-ui-ease-enter, cubic-bezier(0.32, 0.72, 0, 1));
+    --_hf-ui-ease-exit: var(--hf-ui-ease-exit, cubic-bezier(0.23, 1, 0.32, 1));
+    --_hf-ui-ease-response: var(--hf-ui-ease-response, cubic-bezier(0.23, 1, 0.32, 1));
+    --_hf-ui-font-mono: var(--hf-ui-font-mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
+    --_hf-ui-font-sans: var(--hf-ui-font-sans, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
+    --_hf-ui-hit-target: var(--hf-ui-hit-target, 44px);
+    --_hf-ui-radius-control: var(--hf-ui-radius-control, 5px);
+    --_hf-ui-radius-overlay: var(--hf-ui-radius-overlay, 10px);
+    --_hf-ui-radius-surface: var(--hf-ui-radius-surface, 7px);
+    --_hf-ui-shadow-contact: var(--hf-ui-shadow-contact, 0 8px 18px rgba(0, 0, 0, 0.38));
+    --_hf-ui-shadow-inset: var(--hf-ui-shadow-inset, inset 0 1px 0 rgba(255, 255, 255, 0.035));
+    --_hf-ui-shadow-modal: var(--hf-ui-shadow-modal, 0 18px 46px rgba(0, 0, 0, 0.52));
+    --_hf-ui-space-1: var(--hf-ui-space-1, 4px);
+    --_hf-ui-space-12: var(--hf-ui-space-12, 48px);
+    --_hf-ui-space-16: var(--hf-ui-space-16, 64px);
+    --_hf-ui-space-2: var(--hf-ui-space-2, 8px);
+    --_hf-ui-space-3: var(--hf-ui-space-3, 12px);
+    --_hf-ui-space-4: var(--hf-ui-space-4, 16px);
+    --_hf-ui-space-6: var(--hf-ui-space-6, 24px);
+    --_hf-ui-space-8: var(--hf-ui-space-8, 32px);
+    --_hf-ui-surface: var(--hf-ui-surface, #141414);
+    --_hf-ui-surface-inset: var(--hf-ui-surface-inset, #101010);
+    --_hf-ui-surface-raised: var(--hf-ui-surface-raised, #1a1a1a);
+    --_hf-ui-text: var(--hf-ui-text, #e5e5e5);
+    --_hf-ui-text-faint: var(--hf-ui-text-faint, #7e7e7e);
+    --_hf-ui-text-muted: var(--hf-ui-text-muted, #929292);
+    --_hf-ui-text-strong: var(--hf-ui-text-strong, #f3f3f3);
+    --_hf-ui-warning: var(--hf-ui-warning, #e9ab55);
+    --_hf-ui-weight-medium: var(--hf-ui-weight-medium, 500);
+    --_hf-ui-weight-regular: var(--hf-ui-weight-regular, 400);
+    --_hf-ui-weight-semibold: var(--hf-ui-weight-semibold, 600);
+    box-sizing: border-box;
+    color-scheme: dark;
+    font-family: var(--_hf-ui-font-sans);
+  }
+  /* prettier-ignore */
+  [data-hf-ui-root] *,
+  [data-hf-ui-root] *::before,
+  [data-hf-ui-root] *::after {
+    box-sizing: border-box;
+  }
+  /* prettier-ignore */
+  [data-hf-theme="light"] [data-hf-ui-root],
+  [data-hf-ui-root][data-hf-theme="light"] {
+    --_hf-ui-accent: var(--hf-ui-accent, #087a57);
+    --_hf-ui-action: var(--hf-ui-action, #171717);
+    --_hf-ui-action-contrast: var(--hf-ui-action-contrast, #ffffff);
+    --_hf-ui-border: var(--hf-ui-border, #e0dfdb);
+    --_hf-ui-border-strong: var(--hf-ui-border-strong, #cbc9c3);
+    --_hf-ui-canvas: var(--hf-ui-canvas, #f6f5f1);
+    --_hf-ui-control-border: var(--hf-ui-control-border, #888888);
+    --_hf-ui-control-border-hover: var(--hf-ui-control-border-hover, #6f6e68);
+    --_hf-ui-danger: var(--hf-ui-danger, #a61b1b);
+    --_hf-ui-data-1: var(--hf-ui-data-1, #087a57);
+    --_hf-ui-data-2: var(--hf-ui-data-2, #245ea8);
+    --_hf-ui-data-3: var(--hf-ui-data-3, #8a4b00);
+    --_hf-ui-data-4: var(--hf-ui-data-4, #6d3fc0);
+    --_hf-ui-data-5: var(--hf-ui-data-5, #a83d2d);
+    --_hf-ui-shadow-contact: var(--hf-ui-shadow-contact, 0 7px 16px rgba(26, 24, 20, 0.13));
+    --_hf-ui-shadow-inset: var(--hf-ui-shadow-inset, inset 0 1px 0 rgba(255, 255, 255, 0.78));
+    --_hf-ui-shadow-modal: var(--hf-ui-shadow-modal, 0 18px 46px rgba(26, 24, 20, 0.18));
+    --_hf-ui-surface: var(--hf-ui-surface, #ffffff);
+    --_hf-ui-surface-inset: var(--hf-ui-surface-inset, #f0efeb);
+    --_hf-ui-surface-raised: var(--hf-ui-surface-raised, #ffffff);
+    --_hf-ui-text: var(--hf-ui-text, #171717);
+    --_hf-ui-text-faint: var(--hf-ui-text-faint, #6f6e68);
+    --_hf-ui-text-muted: var(--hf-ui-text-muted, #5f5f5a);
+    --_hf-ui-text-strong: var(--hf-ui-text-strong, #0a0a0a);
+    --_hf-ui-warning: var(--hf-ui-warning, #8a4b00);
+    color-scheme: light;
+  }
+  /* prettier-ignore */
+  [data-hf-ui-root]:focus-visible {
+    outline: 2px solid var(--_hf-ui-accent);
+    outline-offset: 3px;
+  }
+  /* prettier-ignore */
+  [data-hf-rendering="true"][data-hf-ui-root],
+  [data-hf-rendering="true"] [data-hf-ui-root],
+  [data-hf-rendering="true"][data-hf-ui-root] *,
+  [data-hf-rendering="true"] [data-hf-ui-root] *,
+  [data-hf-rendering="true"][data-hf-ui-root]::before,
+  [data-hf-rendering="true"][data-hf-ui-root]::after,
+  [data-hf-rendering="true"] [data-hf-ui-root]::before,
+  [data-hf-rendering="true"] [data-hf-ui-root]::after,
+  [data-hf-rendering="true"][data-hf-ui-root] *::before,
+  [data-hf-rendering="true"][data-hf-ui-root] *::after,
+  [data-hf-rendering="true"] [data-hf-ui-root] *::before,
+  [data-hf-rendering="true"] [data-hf-ui-root] *::after {
+    animation-duration: 0s !important;
+    animation-delay: 0s !important;
+    transition-duration: 0s !important;
+    transition-delay: 0s !important;
+  }
+  /* prettier-ignore */
+  @media (prefers-reduced-motion: reduce) {
+    [data-hf-ui-root],
+    [data-hf-ui-root] *,
+    [data-hf-ui-root] *::before,
+    [data-hf-ui-root] *::after {
+      animation-duration: 0s !important;
+      animation-delay: 0s !important;
+      transition-duration: 0s !important;
+      transition-delay: 0s !important;
+      scroll-behavior: auto !important;
+    }
+  }
+  /* hf-ui:tokens:end */
+  .hf-ui-blur-in {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.28em;
+    color: var(--_hf-ui-text-strong);
+    font: var(--_hf-ui-weight-semibold) 52px/1 var(--_hf-ui-font-sans);
+    letter-spacing: -0.02em;
+  }
+  .hf-ui-blur-in span {
+    display: inline-block;
+    filter: blur(0px);
+    opacity: 1;
+    will-change: opacity, transform, filter;
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-ui-blur-in span', { opacity: 0, y: 8, filter: 'blur(10px)' }, { opacity: 1, y: 0, filter: 'blur(0px)', duration: 0.36, stagger: 0.04, ease: 'power3.out' }, startTime);
+-->
+<!-- hf-ui:canonical:end -->
+      </section>
+      <p class="hf-ui-demo-caption">Blur In</p>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        tl.addLabel("start", 0);
+        tl.set(".hf-ui-demo-stage", { opacity: 1 }, 0);
+        tl.fromTo(
+          ".hf-ui-blur-in span",
+          { opacity: 0, y: 8, filter: "blur(10px)" },
+          {
+            opacity: 1,
+            y: 0,
+            filter: "blur(0px)",
+            duration: 0.36,
+            stagger: 0.04,
+            ease: "power3.out",
+          },
+          0.3,
+        );
+        tl.addLabel("end", 4);
+        tl.set(".hf-ui-demo-stage", { opacity: 1 }, "end");
+        window.__timelines = window.__timelines || {};
+        window.__timelines["blur-in-demo"] = tl;
+      </script>
+    </main>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "blur-in.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/blur-out-up/__hf-variables-preview.html b/docs/public/catalog/components/blur-out-up/__hf-variables-preview.html
new file mode 100644
index 0000000000..4dde590d26
--- /dev/null
+++ b/docs/public/catalog/components/blur-out-up/__hf-variables-preview.html
@@ -0,0 +1,78 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Blur Out Up variables preview</title>
+    <style>
+      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #f7f7f8; }
+      #hf-vars-root { position: relative; width: 1920px; height: 1080px; }
+      #hf-vars-mount { position: absolute; inset: 0; display: grid; place-items: center; }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  </head>
+  <body>
+    <div id="hf-vars-root" data-composition-id="blur-out-up-variables-preview" data-start="0" data-width="1920" data-height="1080" data-duration="5" data-fps="30">
+      <div id="hf-vars-mount" class="clip" data-composition-id="blur-out-up" data-composition-src="./blur-out-up.html" data-start="0" data-duration="5" data-track-index="0" data-width="1920" data-height="1080"></div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["blur-out-up-variables-preview"] = gsap.timeline({ paused: true });
+    </script>
+    <script>
+      (function () {
+        var mount = document.getElementById("hf-vars-mount");
+        // The mount is filled asynchronously, and the demo script selects
+        // what it fills it with, so it cannot run before then.
+        var observer = new MutationObserver(build);
+        observer.observe(mount, { childList: true, subtree: true });
+        build();
+        function build() {
+          if (!mount.firstElementChild) return;
+          observer.disconnect();
+
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-blur-out-up span",
+          { opacity: 0, "--hf-word-y": "22px", "--hf-word-scale": 0.92, "--hf-word-blur": "5px" },
+          {
+            opacity: 1,
+            "--hf-word-y": "0px",
+            "--hf-word-scale": 1,
+            "--hf-word-blur": "0px",
+            duration: 0.3,
+            stagger: 0.055,
+            ease: "power3.out",
+          },
+          startTime,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["blur-out-up-demo"] = tl;
+          var child = window.__timelines["blur-out-up-demo"];
+          delete window.__timelines["blur-out-up-demo"];
+          if (!child || typeof child.paused !== "function") return;
+          child.paused(false);
+          window.__timelines["blur-out-up-variables-preview"].add(child, 0);
+        }
+      })();
+    </script>
+<script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "blur-out-up.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/blur-out-up/blur-out-up.html b/docs/public/catalog/components/blur-out-up/blur-out-up.html
new file mode 100644
index 0000000000..970e47bb4a
--- /dev/null
+++ b/docs/public/catalog/components/blur-out-up/blur-out-up.html
@@ -0,0 +1,110 @@
+<!--
+  Blur Out Up - remocn typography primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Drive the timeline
+  integration from a paused GSAP timeline so renders remain deterministic.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result as a custom property
+  the CSS above consumes. The timeline recipe below is untouched by them: it
+  keeps driving one offset and one blur, and these decide what that offset and
+  that blur mean on screen.
+
+    - direction (up | down | left | right, default up): where the offset
+      points. up rises into place, down drops in, left and right slide in
+      along the baseline.
+    - distance (close | standard | far, default standard): scales the offset.
+      close covers half the run, far nearly double, in the same time.
+    - blur (soft | standard | heavy, default standard): scales the blur radius,
+      from a light haze to a full smear.
+    - tone (ink | paper | accent, default ink): word colour. ink is near-black
+      for light frames, paper near-white for dark ones, accent rides --brand.
+
+  On every default the result is identical to the original: words rise 22px
+  through a 5px blur in near-black.
+-->
+
+<div
+  class="hf-remocn-blur-out-up"
+  data-composition-variables='[
+    { "id": "direction", "type": "enum", "role": "motion", "label": "Direction", "description": "Where the offset the timeline drives points.", "default": "up", "options": [{ "value": "up", "label": "Up" }, { "value": "down", "label": "Down" }, { "value": "left", "label": "Left" }, { "value": "right", "label": "Right" }] },
+    { "id": "distance", "type": "enum", "role": "motion", "label": "Distance", "description": "Scales the travel offset, so the words cover a shorter or longer run in the same time.", "default": "standard", "options": [{ "value": "close", "label": "Close" }, { "value": "standard", "label": "Standard" }, { "value": "far", "label": "Far" }] },
+    { "id": "blur", "type": "enum", "role": "style", "label": "Blur", "description": "Scales the blur radius the timeline drives, from a light haze to a full smear.", "default": "standard", "options": [{ "value": "soft", "label": "Soft" }, { "value": "standard", "label": "Standard" }, { "value": "heavy", "label": "Heavy" }] },
+    { "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Word colour: ink for light frames, paper for dark ones, accent rides --brand.", "default": "ink", "options": [{ "value": "ink", "label": "Ink" }, { "value": "paper", "label": "Paper" }, { "value": "accent", "label": "Accent" }] }
+  ]'
+>
+  <span>HELLO</span>
+</div>
+
+<style>
+  .hf-remocn-blur-out-up {
+    color: var(--hf-word-color, #18181b);
+    font-family: Inter, system-ui, sans-serif;
+    font-weight: 900;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-blur-out-up {
+    display: inline-flex;
+    gap: 12px;
+    font-size: 56px;
+    line-height: 1;
+  }
+  .hf-remocn-blur-out-up span {
+    display: inline-block;
+    transform: translate(
+        calc(var(--hf-word-x, 0px) + var(--hf-word-y, 0px) * var(--hf-word-axis-x, 0)),
+        calc(var(--hf-word-y, 0px) * var(--hf-word-axis-y, 1))
+      )
+      scale(var(--hf-word-scale, 1));
+    filter: blur(calc(var(--hf-word-blur, 0px) * var(--hf-word-blur-scale, 1)));
+    will-change: transform, filter, opacity;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    var axes = {
+      up: { x: 0, y: 1 },
+      down: { x: 0, y: -1 },
+      left: { x: -1, y: 0 },
+      right: { x: 1, y: 0 },
+    };
+    var reaches = { close: 0.5, standard: 1, far: 1.85 };
+    var blurScales = { soft: 0.45, standard: 1, heavy: 2.2 };
+    var tones = {
+      ink: "#18181b",
+      paper: "#fafafa",
+      accent: "var(--brand, #34d399)",
+    };
+
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var axis = axes[pick(axes, vars.direction, "up")];
+    var reach = reaches[pick(reaches, vars.distance, "standard")];
+    var blurScale = blurScales[pick(blurScales, vars.blur, "standard")];
+    var tone = tones[pick(tones, vars.tone, "ink")];
+
+    var roots = document.querySelectorAll(".hf-remocn-blur-out-up");
+    for (var i = 0; i < roots.length; i += 1) {
+      roots[i].style.setProperty("--hf-word-axis-x", String(axis.x * reach));
+      roots[i].style.setProperty("--hf-word-axis-y", String(axis.y * reach));
+      roots[i].style.setProperty("--hf-word-blur-scale", String(blurScale));
+      roots[i].style.setProperty("--hf-word-color", tone);
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-blur-out-up span', { opacity: 0, '--hf-word-y': '22px', '--hf-word-scale': 0.92, '--hf-word-blur': '5px' }, { opacity: 1, '--hf-word-y': '0px', '--hf-word-scale': 1, '--hf-word-blur': '0px', duration: 0.3, stagger: 0.055, ease: 'power3.out' }, startTime);
+-->
diff --git a/docs/public/catalog/components/blur-out-up/demo.html b/docs/public/catalog/components/blur-out-up/demo.html
new file mode 100644
index 0000000000..e479d48df8
--- /dev/null
+++ b/docs/public/catalog/components/blur-out-up/demo.html
@@ -0,0 +1,108 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Blur Out Up - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        min-width: 900px;
+        min-height: 500px;
+        padding: 64px;
+        /* ponytail: scale wrapper — GSAP targets spans inside, not this element */
+        transform: scale(2.6);
+      }
+      .hf-remocn-blur-out-up {
+        color: #18181b;
+        font-family: Inter, system-ui, sans-serif;
+        font-weight: 900;
+        letter-spacing: -0.04em;
+      }
+      .hf-remocn-blur-out-up {
+        display: inline-flex;
+        gap: 12px;
+        font-size: 56px;
+        line-height: 1;
+      }
+      .hf-remocn-blur-out-up span {
+        display: inline-block;
+        transform: translate(var(--hf-word-x, 0px), var(--hf-word-y, 0px))
+          scale(var(--hf-word-scale, 1));
+        filter: blur(var(--hf-word-blur, 0px));
+        will-change: transform, filter, opacity;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="blur-out-up-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-blur-out-up"><span>BLUR</span><span>OUT</span><span>UP</span></div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-blur-out-up span",
+          { opacity: 0, "--hf-word-y": "22px", "--hf-word-scale": 0.92, "--hf-word-blur": "5px" },
+          {
+            opacity: 1,
+            "--hf-word-y": "0px",
+            "--hf-word-scale": 1,
+            "--hf-word-blur": "0px",
+            duration: 0.3,
+            stagger: 0.055,
+            ease: "power3.out",
+          },
+          startTime,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["blur-out-up-demo"] = tl;
+      </script>
+    </div>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "blur-out-up.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/bottom-up-letters/bottom-up-letters.html b/docs/public/catalog/components/bottom-up-letters/bottom-up-letters.html
new file mode 100644
index 0000000000..0005c2091e
--- /dev/null
+++ b/docs/public/catalog/components/bottom-up-letters/bottom-up-letters.html
@@ -0,0 +1,105 @@
+<!--
+  Bottom Up Letters - deterministic text splitter.
+
+  Add class="hf-bottom-up-letters" to a plain text element. This script wraps
+  each character in a span so your paused GSAP timeline can stagger the reveal.
+
+  Variables. This fragment has no markup of its own, so the declaration rides
+  the <style> element below; the runtime collects every element carrying
+  data-composition-variables, not just the document root. The script reads each
+  value, falls back to the declared default on anything missing or
+  unrecognised, and either changes how the text is split or writes a custom
+  property the CSS consumes. The timeline recipe below is untouched by them: it
+  still tweens opacity and y back to rest, and these decide what a single
+  stagger step covers and where rest is travelled from.
+
+    - unit (letter | word, default letter): what each animated span holds.
+      letter staggers glyph by glyph; word keeps whole words intact, so a long
+      line reads instead of shimmers.
+    - direction (up | down, default up): where the spans start. up starts
+      below the baseline and rises into place, down starts above and drops.
+    - travel (close | standard | far, default standard): how far each span
+      starts from rest, from 0.45em through 0.85em to 1.5em.
+
+  On every default the result is identical to the original: one span per
+  character, each starting 0.85em below the baseline.
+-->
+
+<style
+  data-composition-variables='[
+  { "id": "unit", "type": "enum", "role": "content", "label": "Split unit", "description": "What each animated span holds. Letter staggers glyph by glyph, word keeps whole words intact.", "default": "letter", "options": [{ "value": "letter", "label": "Letter" }, { "value": "word", "label": "Word" }] },
+  { "id": "direction", "type": "enum", "role": "motion", "label": "Direction", "description": "Where each span starts. Up starts below the baseline and rises, down starts above and drops.", "default": "up", "options": [{ "value": "up", "label": "Up" }, { "value": "down", "label": "Down" }] },
+  { "id": "travel", "type": "enum", "role": "motion", "label": "Travel", "description": "How far each span starts from its resting position, from 0.45em to 1.5em.", "default": "standard", "options": [{ "value": "close", "label": "Close" }, { "value": "standard", "label": "Standard" }, { "value": "far", "label": "Far" }] }
+]'
+>
+  .hf-bottom-up-letters {
+    display: inline-block;
+  }
+  .hf-bottom-up-letters-char {
+    display: inline-block;
+    opacity: 0;
+    transform: translate3d(
+      0,
+      calc(var(--hf-letters-travel, 0.85em) * var(--hf-letters-direction, 1)),
+      0
+    );
+    will-change: transform, opacity;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var travels = { close: "0.45em", standard: "0.85em", far: "1.5em" };
+    var directions = { up: "1", down: "-1" };
+    var units = { letter: true, word: true };
+
+    var travel = travels[pick(travels, vars.travel, "standard")];
+    var direction = directions[pick(directions, vars.direction, "up")];
+    var unit = pick(units, vars.unit, "letter");
+
+    document.querySelectorAll(".hf-bottom-up-letters").forEach((el) => {
+      el.style.setProperty("--hf-letters-travel", travel);
+      el.style.setProperty("--hf-letters-direction", direction);
+      if (el.dataset.hfLettersReady === "1") return;
+      const text = el.textContent || "";
+      el.textContent = "";
+      const parts = unit === "word" ? text.split(/(\s+)/) : Array.from(text);
+      for (const part of parts) {
+        if (part === "") continue;
+        if (unit === "word" && /^\s+$/.test(part)) {
+          el.appendChild(document.createTextNode(part));
+          continue;
+        }
+        const span = document.createElement("span");
+        span.className = "hf-bottom-up-letters-char";
+        span.textContent = part === " " ? "\u00a0" : part;
+        el.appendChild(span);
+      }
+      el.dataset.hfLettersReady = "1";
+    });
+  })();
+</script>
+
+<!--
+  Timeline integration:
+
+  tl.to(".hf-bottom-up-letters-char", {
+    opacity: 1,
+    y: 0,
+    duration: 0.48,
+    ease: "back.out(1.7)",
+    stagger: 0.025,
+  }, startTime);
+-->
diff --git a/docs/public/catalog/components/bottom-up-letters/demo.html b/docs/public/catalog/components/bottom-up-letters/demo.html
new file mode 100644
index 0000000000..46868643a8
--- /dev/null
+++ b/docs/public/catalog/components/bottom-up-letters/demo.html
@@ -0,0 +1,74 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Bottom Up Letters - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #16120e;
+        color: #f7ead6;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-bottom-up-letters {
+        display: inline-block;
+        font-size: 180px; /* ponytail: scaled up from 126px — fills ~65% of 1920px frame width */
+        line-height: 1;
+        font-weight: 900;
+        letter-spacing: -0.02em;
+      }
+      .hf-bottom-up-letters-char {
+        display: inline-block;
+        opacity: 0;
+        transform: translate3d(0, 0.85em, 0);
+        will-change: transform, opacity;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="bottom-up-letters-demo"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+    >
+      <div class="hf-bottom-up-letters">Build with motion</div>
+      <script>
+        document.querySelectorAll(".hf-bottom-up-letters").forEach((el) => {
+          const text = el.textContent || "";
+          el.textContent = "";
+          for (const char of text) {
+            const span = document.createElement("span");
+            span.className = "hf-bottom-up-letters-char";
+            span.textContent = char === " " ? "\u00a0" : char;
+            el.appendChild(span);
+          }
+        });
+        const tl = gsap.timeline({ paused: true });
+        tl.to(
+          ".hf-bottom-up-letters-char",
+          { opacity: 1, y: 0, duration: 0.48, ease: "back.out(1.7)", stagger: 0.025 },
+          0.45,
+        );
+        window.__timelines = window.__timelines || {};
+        window.__timelines["bottom-up-letters-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/browser-device-stage/README.md b/docs/public/catalog/components/browser-device-stage/README.md
new file mode 100644
index 0000000000..f747dbab5b
--- /dev/null
+++ b/docs/public/catalog/components/browser-device-stage/README.md
@@ -0,0 +1,97 @@
+# browser-device-stage
+
+A generic app surface presented in token-native device chrome. The stage settles in once (rise + soft scale, smooth ease-out), holds readable, and can optionally swap to a second screen at `swap_at` (a brief fade through the bare stage, so no frame shows two screens at partial opacity). The chrome is drawn entirely from contract tokens: hairline borders, surface mixes, muted dots, no traffic-light colors, no fake product branding.
+
+- 5s authored, elastic HOLD (the envelope never time-scales).
+- Timeline registered at `window.__timelines["browser-device-stage"]`.
+- Elastic root: no `data-width`/`data-height`, sized by the host clip, `cqmin` units.
+
+## Variables
+
+| Variable  | Type   | Default           | Notes                                                                                                                                 |
+| --------- | ------ | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| `chrome`  | enum   | `browser`         | `browser` (toolbar dots + address pill), `window` (title bar), `phone` (notch, portrait inset, centered).                             |
+| `title`   | string | `app.example.com` | Address pill text (browser) or title bar text (window). Phone shows no title.                                                         |
+| `swap_at` | number | `0`               | Seconds from mount start to swap to the second screen. `0` disables. Clamped inside the hold so it never fights the entrance or exit. |
+| `accent`  | enum   | `green`           | `green` rides `--brand`, `blue` rides `--accent`, `violet` rides `--accent-2`. Colors the skeleton mark, chip, and one card block.    |
+| `exit`    | enum   | `none`            | `none` holds the final frame (frame roots own transitions), `fade`, or `up`.                                                          |
+
+## The screen slot
+
+The screen area is a slot. Callers supply content by placing inert `<template>` elements anywhere in the **host page** (typically next to the mount clip). Templates never render on their own, and the runtime clears the host clip's children on mount, so the slot deliberately lives at document level:
+
+```html
+<template data-slot="browser-device-stage-screen"> ...first screen... </template>
+<template data-slot="browser-device-stage-screen-b">
+  ...second screen (used when swap_at > 0)...
+</template>
+```
+
+Slot content can be an `<img>`, a `<video>`, or arbitrary HTML. Direct `img`/`video` children of the screen are stretched to `object-fit: cover`. When no `screen` slot exists, the primitive renders a token-styled skeleton app (header bar, sidebar, content cards). When `swap_at > 0` and no `screen-b` slot exists, the second screen is a rearranged skeleton state so the swap still reads.
+
+Notes:
+
+- Slot lookup is by the fixed names above, so two slotted instances on one page share the same slot content. Give multiple instances distinct content by mounting them from different host frames.
+- A `<video>` in the slot is not seek-synced by the framework (framework-owned media playback applies to clips, not slot children). Prefer a still image or HTML for deterministic renders; if you need synced footage, use a media clip composition instead of this stage.
+- Slot HTML inherits the composition's fonts and tokens; style it inline or with your own host CSS.
+
+## Worked examples
+
+Mount host (any chrome):
+
+```html
+<div
+  class="clip"
+  data-composition-id="browser-device-stage"
+  data-composition-src="./components/browser-device-stage.html"
+  data-variable-values='{"chrome":"browser","title":"dash.acme.dev","swap_at":2.4,"accent":"blue"}'
+  data-start="0"
+  data-duration="5"
+  data-track-index="0"
+  style="position:absolute; inset:0; container-type:size;"
+></div>
+```
+
+### browser: product screenshot with a swap
+
+```html
+<template data-slot="browser-device-stage-screen">
+  <img src="./assets/dashboard-before.png" alt="" />
+</template>
+<template data-slot="browser-device-stage-screen-b">
+  <img src="./assets/dashboard-after.png" alt="" />
+</template>
+```
+
+Set `swap_at` to the moment the narration lands the change; the stage fades the first screen out, then rises the second in over the bare stage.
+
+### window: custom HTML screen
+
+```html
+<template data-slot="browser-device-stage-screen">
+  <div
+    style="position:absolute; inset:0; display:grid; place-items:center; background:var(--surface); color:var(--fg); font-family:var(--font-mono); font-size:3cqmin;"
+  >
+    $ hyperframes render scene.html
+  </div>
+</template>
+```
+
+Mount with `{"chrome":"window","title":"terminal"}` for a titled desktop window around your own markup.
+
+### phone: portrait screen
+
+```html
+<template data-slot="browser-device-stage-screen">
+  <img src="./assets/mobile-feed.png" alt="" />
+</template>
+```
+
+Mount with `{"chrome":"phone"}`. The device renders portrait and centered with a notch; leave roughly the top 8% of your artwork clear of critical content so the notch does not cover it. With no slot at all, the phone shows the skeleton in a single-column layout.
+
+## Motion envelope
+
+- IN 0.9s: one settle (rise from 4.5cqh + scale 0.965 to 1 + fade, power ease-out).
+- HOLD: elastic; a barely-there vertical drift, then authored stillness.
+- Swap (optional): 0.55s fade-through at `swap_at` (A empties, then B rises with a 1.6cqh slide), clamped into the hold.
+- OUT 0.5s only when `exit` is `fade` or `up`; the default `none` holds to the last frame.
diff --git a/docs/public/catalog/components/browser-device-stage/browser-device-stage.html b/docs/public/catalog/components/browser-device-stage/browser-device-stage.html
new file mode 100644
index 0000000000..5f37f6ed17
--- /dev/null
+++ b/docs/public/catalog/components/browser-device-stage/browser-device-stage.html
@@ -0,0 +1,648 @@
+<!doctype html>
+<!--
+  browser-device-stage -- HyperFrames video primitive (product demo / stage)
+
+  A generic app surface presented in token-native device chrome. One settle
+  entrance (rise + soft scale), then a slow readable hold; optionally the
+  screen swaps to a second screen at swap_at via a brief fade through the
+  bare stage (never two screens at partial opacity). The chrome is drawn
+  entirely from contract tokens: no traffic-light reds, no fake product
+  branding, hairline borders and surface mixes only.
+
+  Chrome (enum):
+    - browser: toolbar with three muted dots and a centered address pill
+      showing `title` in mono type.
+    - window: slim title bar with three muted dots and `title` centered in
+      body type.
+    - phone: portrait device, dark notch pill, bezel inset, centered.
+
+  The screen is a SLOT. Callers supply content by placing inert templates
+  anywhere in the HOST page (templates never render, and the runtime wipes
+  the host clip's own children on mount, so the slot lives at document
+  level):
+
+    <template data-slot="browser-device-stage-screen"> ... </template>
+    <template data-slot="browser-device-stage-screen-b"> ... </template>
+
+  Slot content may be an <img>, a muted <video>, or arbitrary HTML; direct
+  img/video children are stretched to cover the screen. When no screen slot
+  exists, the primitive renders a tasteful token-styled skeleton app (header
+  bar, sidebar, content cards; hairline borders, surface tokens, one accent
+  element). With swap_at > 0 and no screen-b slot, the second screen is a
+  rearranged skeleton state so the swap still reads.
+
+  Variables (declared in data-composition-variables below):
+    - chrome ("browser" | "window" | "phone", default "browser")
+    - title (string, default "app.example.com"): address pill / title bar text.
+    - swap_at (number seconds, default 0): swap to the second screen at
+      this offset from mount start; 0 disables. Clamped inside the hold so
+      the swap never fights the entrance or the exit.
+    - accent ("green" | "blue" | "violet", default "green"): green rides
+      --brand, blue rides --accent, violet rides --accent-2.
+    - exit ("none" | "fade" | "up", default "none"): frame roots own
+      transitions; the default holds the final frame to the last pixel.
+
+  Envelope, fixed IN and OUT with elastic HOLD only (never timeScale):
+    IN_BASE  = 0.90s  one settle: rise + soft scale + fade, smooth ease-out
+    HOLD     = max(0, D - IN - OUT); a barely-there vertical drift, then
+               authored stillness
+    OUT_BASE = 0.50s  only when exit != none
+    If D < IN_BASE + OUT_BASE, IN and OUT compress together.
+
+  Mount contract: the runtime clones only this template. #root fills the
+  host box (no data-width/data-height, container-type: size, cqmin units),
+  is styled via #root only, and registers one paused timeline under the
+  LITERAL "browser-device-stage" key. All state is set with explicit
+  endpoints (gsap.set + fromTo) so any seek order lands identical frames.
+-->
+<html
+  lang="en"
+  data-composition-id="browser-device-stage"
+  data-composition-duration="5"
+  data-composition-variables='[
+    { "id": "chrome", "type": "enum", "role": "content", "label": "Chrome", "description": "Device frame drawn around the screen slot.", "default": "browser", "options": [{ "value": "browser", "label": "Browser" }, { "value": "window", "label": "Window" }, { "value": "phone", "label": "Phone" }] },
+    { "id": "title", "type": "string", "role": "content", "label": "Title", "description": "Address pill text (browser) or title bar text (window).", "default": "app.example.com" },
+    { "id": "swap_at", "type": "number", "role": "content", "label": "Swap at", "description": "Seconds from mount start to swap to the second screen. 0 disables the swap.", "default": 0, "min": 0, "max": 30, "step": 0.1, "unit": "s" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Token the skeleton accent elements ride.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "style", "label": "Exit", "description": "Optional departure. None holds the final frame.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Browser Device Stage</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="browser-device-stage" data-duration="5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, ui-sans-serif, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .bds-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .bds-stage {
+            will-change: transform, opacity;
+          }
+
+          .bds-device {
+            display: grid;
+            grid-template-rows: auto minmax(0, 1fr);
+            overflow: hidden;
+            border: 0.16cqmin solid color-mix(in srgb, var(--border, #475569) 85%, transparent);
+            border-radius: calc(var(--radius, 2cqmin) * 1.3);
+            background: color-mix(in srgb, var(--surface, #0b1016) 96%, var(--bds-accent));
+            box-shadow: 0 3cqh 9cqh color-mix(in srgb, var(--bg, #000000) 45%, transparent);
+          }
+
+          .bds-browser,
+          .bds-window {
+            width: min(82cqw, 126cqh);
+            aspect-ratio: 16 / 10;
+          }
+
+          .bds-phone {
+            position: relative;
+            grid-template-rows: minmax(0, 1fr);
+            height: min(86cqh, 168cqw);
+            aspect-ratio: 9 / 19;
+            padding: 1.7cqmin;
+            border-radius: 7cqmin;
+          }
+
+          /* chrome bar (browser toolbar / window title bar) */
+          .bds-bar {
+            display: flex;
+            align-items: center;
+            gap: var(--space-2, 2.2cqmin);
+            padding: 1.5cqmin 2.4cqmin;
+            border-bottom: 0.14cqmin solid
+              color-mix(in srgb, var(--border, #475569) 60%, transparent);
+            background: color-mix(in srgb, var(--surface, #0b1016) 80%, var(--bg, #05070c));
+          }
+
+          .bds-phone .bds-bar {
+            display: none;
+          }
+
+          .bds-dots,
+          .bds-bar::after {
+            display: flex;
+            flex: 0 0 5.5cqmin;
+            gap: 0.95cqmin;
+          }
+
+          .bds-bar::after {
+            content: "";
+          }
+
+          .bds-dots i {
+            width: 1.15cqmin;
+            height: 1.15cqmin;
+            border-radius: 50%;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 26%, transparent);
+          }
+
+          .bds-pill {
+            display: block;
+            min-width: 36%;
+            max-width: 62%;
+            margin: 0 auto;
+            padding: 0.75cqmin 2.6cqmin;
+            overflow: hidden;
+            border: 0.14cqmin solid color-mix(in srgb, var(--border, #475569) 50%, transparent);
+            border-radius: 999px;
+            background: color-mix(in srgb, var(--bg, #05070c) 55%, var(--surface, #0b1016));
+            color: var(--muted, #8b93a3);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            font-size: 2cqmin;
+            line-height: 1.5;
+            white-space: nowrap;
+            text-align: center;
+            text-overflow: ellipsis;
+          }
+
+          .bds-bartitle {
+            display: block;
+            margin: 0 auto;
+            padding: 0.4cqmin 0;
+            overflow: hidden;
+            color: color-mix(in srgb, var(--fg, #f8fafc) 78%, transparent);
+            font-size: 2.15cqmin;
+            font-weight: 600;
+            letter-spacing: 0.02em;
+            line-height: 1.5;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+          }
+
+          .bds-browser .bds-bartitle,
+          .bds-window .bds-pill {
+            display: none;
+          }
+
+          .bds-notch {
+            display: none;
+          }
+
+          .bds-phone .bds-notch {
+            display: block;
+            position: absolute;
+            z-index: 2;
+            top: 3cqmin;
+            left: 50%;
+            width: 26%;
+            height: 2.2cqmin;
+            transform: translateX(-50%);
+            border-radius: 999px;
+            background: color-mix(in srgb, var(--bg, #05070c) 72%, #000000);
+          }
+
+          /* screen area: stacked slot layers */
+          .bds-screen {
+            position: relative;
+            overflow: hidden;
+            background: color-mix(in srgb, var(--surface, #0b1016) 86%, var(--bg, #05070c));
+          }
+
+          .bds-phone .bds-screen {
+            border-radius: 5.4cqmin;
+          }
+
+          .bds-screen-a,
+          .bds-screen-b {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+          }
+
+          .bds-screen-a > img,
+          .bds-screen-a > video,
+          .bds-screen-b > img,
+          .bds-screen-b > video {
+            display: block;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+          }
+
+          /* default skeleton screen: pure token furniture, no branding */
+          .bds-skel {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            grid-template-rows: auto minmax(0, 1fr);
+          }
+
+          .bds-skel-top {
+            display: flex;
+            align-items: center;
+            gap: var(--space-1, 1.6cqmin);
+            padding: 1.8cqmin 2.6cqmin;
+            border-bottom: 0.14cqmin solid
+              color-mix(in srgb, var(--border, #475569) 55%, transparent);
+          }
+
+          .bds-phone .bds-skel-top {
+            padding-top: 6.4cqmin;
+          }
+
+          .bds-skel-mark {
+            width: 2.6cqmin;
+            height: 2.6cqmin;
+            border-radius: 0.8cqmin;
+            background: color-mix(in srgb, var(--bds-accent) 74%, var(--surface, #0b1016));
+          }
+
+          .bds-skel-line {
+            height: 1.25cqmin;
+            border-radius: 999px;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 13%, transparent);
+          }
+
+          .bds-skel-top .bds-skel-line:nth-of-type(1) {
+            width: 9cqmin;
+          }
+
+          .bds-skel-top .bds-skel-line:nth-of-type(2) {
+            width: 6.5cqmin;
+          }
+
+          .bds-skel-spring {
+            flex: 1;
+          }
+
+          .bds-skel-chip {
+            width: 8.5cqmin;
+            height: 2.9cqmin;
+            border: 0.14cqmin solid color-mix(in srgb, var(--bds-accent) 55%, transparent);
+            border-radius: 999px;
+            background: color-mix(in srgb, var(--bds-accent) 28%, transparent);
+          }
+
+          .bds-skel-avatar {
+            width: 2.8cqmin;
+            height: 2.8cqmin;
+            border-radius: 50%;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 18%, transparent);
+          }
+
+          .bds-skel-body {
+            display: grid;
+            grid-template-columns: 24% minmax(0, 1fr);
+            min-height: 0;
+          }
+
+          .bds-phone .bds-skel-body {
+            grid-template-columns: minmax(0, 1fr);
+          }
+
+          .bds-skel-side {
+            display: flex;
+            flex-direction: column;
+            gap: 2cqmin;
+            padding: 2.6cqmin 2.6cqmin;
+            border-right: 0.14cqmin solid
+              color-mix(in srgb, var(--border, #475569) 55%, transparent);
+          }
+
+          .bds-phone .bds-skel-side {
+            display: none;
+          }
+
+          .bds-skel-side .bds-skel-line:nth-child(1) {
+            width: 78%;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 22%, transparent);
+          }
+
+          .bds-skel-side .bds-skel-line:nth-child(2) {
+            width: 56%;
+          }
+
+          .bds-skel-side .bds-skel-line:nth-child(3) {
+            width: 66%;
+          }
+
+          .bds-skel-side .bds-skel-line:nth-child(4) {
+            width: 44%;
+          }
+
+          .bds-skel-side .bds-skel-line:nth-child(5) {
+            width: 60%;
+          }
+
+          .bds-skel-main {
+            display: flex;
+            flex-direction: column;
+            gap: var(--space-2, 1.8cqmin);
+            min-height: 0;
+            padding: var(--space-3, 2.8cqmin);
+          }
+
+          .bds-skel-heading {
+            width: 34%;
+            height: 2.5cqmin;
+            border-radius: 999px;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 21%, transparent);
+          }
+
+          .bds-skel-sub {
+            width: 52%;
+            height: 1.25cqmin;
+            border-radius: 999px;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 9%, transparent);
+          }
+
+          .bds-skel-cards {
+            display: grid;
+            flex: 1;
+            grid-template-columns: repeat(3, minmax(0, 1fr));
+            gap: 2.1cqmin;
+            min-height: 0;
+            margin-top: 0.8cqmin;
+          }
+
+          .bds-phone .bds-skel-cards {
+            grid-template-columns: minmax(0, 1fr);
+          }
+
+          .bds-skel-card {
+            display: flex;
+            flex-direction: column;
+            gap: 1.5cqmin;
+            min-height: 0;
+            padding: 2.1cqmin;
+            border: 0.14cqmin solid color-mix(in srgb, var(--border, #475569) 60%, transparent);
+            border-radius: var(--radius, 1.6cqmin);
+            background: color-mix(in srgb, var(--bg, #05070c) 30%, transparent);
+          }
+
+          .bds-skel-card .bds-skel-line {
+            width: 55%;
+          }
+
+          .bds-skel-block {
+            flex: 1;
+            min-height: 3cqmin;
+            border-radius: calc(var(--radius, 1.6cqmin) * 0.6);
+            background: color-mix(in srgb, var(--fg, #f8fafc) 7%, transparent);
+          }
+
+          .bds-skel-card:nth-child(1) .bds-skel-block {
+            background: color-mix(in srgb, var(--bds-accent) 17%, transparent);
+          }
+
+          /* skeleton state B: rearranged furniture so the swap reads */
+          .bds-skel-b .bds-skel-heading {
+            width: 24%;
+          }
+
+          .bds-skel-b .bds-skel-sub {
+            width: 38%;
+          }
+
+          .bds-skel-b .bds-skel-cards {
+            grid-template-columns: 2fr 1fr;
+          }
+
+          .bds-phone .bds-skel-b .bds-skel-cards {
+            grid-template-columns: minmax(0, 1fr);
+          }
+
+          .bds-skel-b .bds-skel-card:nth-child(3) {
+            grid-column: 1 / -1;
+          }
+
+          .bds-skel-b .bds-skel-card:nth-child(1) .bds-skel-block {
+            background: color-mix(in srgb, var(--fg, #f8fafc) 7%, transparent);
+          }
+
+          .bds-skel-b .bds-skel-card:nth-child(2) .bds-skel-block {
+            background: color-mix(in srgb, var(--bds-accent) 17%, transparent);
+          }
+        </style>
+
+        <div
+          id="browser-device-stage-clip"
+          class="bds-clip clip"
+          data-start="0"
+          data-duration="5"
+          data-track-index="0"
+        >
+          <div class="bds-stage">
+            <div class="bds-device" role="img" aria-label="App screen in device chrome">
+              <div class="bds-bar">
+                <span class="bds-dots" aria-hidden="true"><i></i><i></i><i></i></span>
+                <span class="bds-pill"></span>
+                <span class="bds-bartitle"></span>
+              </div>
+              <span class="bds-notch" aria-hidden="true"></span>
+              <div class="bds-screen">
+                <div class="bds-screen-a">
+                  <div class="bds-skel" aria-hidden="true">
+                    <div class="bds-skel-top">
+                      <span class="bds-skel-mark"></span>
+                      <span class="bds-skel-line"></span>
+                      <span class="bds-skel-line"></span>
+                      <span class="bds-skel-spring"></span>
+                      <span class="bds-skel-chip"></span>
+                      <span class="bds-skel-avatar"></span>
+                    </div>
+                    <div class="bds-skel-body">
+                      <div class="bds-skel-side">
+                        <span class="bds-skel-line"></span>
+                        <span class="bds-skel-line"></span>
+                        <span class="bds-skel-line"></span>
+                        <span class="bds-skel-line"></span>
+                        <span class="bds-skel-line"></span>
+                      </div>
+                      <div class="bds-skel-main">
+                        <span class="bds-skel-heading"></span>
+                        <span class="bds-skel-sub"></span>
+                        <div class="bds-skel-cards">
+                          <div class="bds-skel-card">
+                            <span class="bds-skel-line"></span>
+                            <span class="bds-skel-block"></span>
+                          </div>
+                          <div class="bds-skel-card">
+                            <span class="bds-skel-line"></span>
+                            <span class="bds-skel-block"></span>
+                          </div>
+                          <div class="bds-skel-card">
+                            <span class="bds-skel-line"></span>
+                            <span class="bds-skel-block"></span>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".bds-stage");
+            var device = root.querySelector(".bds-device");
+            var screen = root.querySelector(".bds-screen");
+            var screenA = root.querySelector(".bds-screen-a");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var chromeKind =
+              vars.chrome === "window" || vars.chrome === "phone" ? vars.chrome : "browser";
+            var title = vars.title == null ? "app.example.com" : String(vars.title);
+            var swapAt = parseFloat(vars.swap_at);
+            if (!isFinite(swapAt) || swapAt <= 0) swapAt = 0;
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exitMode = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            root.style.setProperty("--bds-accent", accentColors[accent]);
+            device.classList.add("bds-" + chromeKind);
+            root.querySelector(".bds-pill").textContent = title;
+            root.querySelector(".bds-bartitle").textContent = title;
+
+            // SLOTS. Caller templates live at HOST DOCUMENT level (the mount
+            // wipes host-clip children, and templates never render). The
+            // scoped `document` proxy filters queries to this composition's
+            // subtree, so the lookup deliberately goes through ownerDocument.
+            var hostDoc = root.ownerDocument;
+            function slotContent(name) {
+              var tpl = null;
+              try {
+                tpl = hostDoc.querySelector(
+                  'template[data-slot="browser-device-stage-' + name + '"]',
+                );
+              } catch (error) {
+                tpl = null;
+              }
+              return tpl ? hostDoc.importNode(tpl.content, true) : null;
+            }
+
+            var skeleton = screenA.querySelector(".bds-skel");
+            var slotA = slotContent("screen");
+            var screenB = null;
+            if (swapAt > 0) {
+              screenB = hostDoc.createElement("div");
+              screenB.className = "bds-screen-b";
+              var slotB = slotContent("screen-b");
+              if (slotB) {
+                screenB.appendChild(slotB);
+              } else {
+                var skeletonB = skeleton.cloneNode(true);
+                skeletonB.classList.add("bds-skel-b");
+                screenB.appendChild(skeletonB);
+              }
+              screen.appendChild(screenB);
+            }
+            if (slotA) {
+              skeleton.remove();
+              screenA.appendChild(slotA);
+            }
+
+            // Envelope: fixed IN/OUT, elastic HOLD, never time-scaled.
+            var IN_BASE = 0.9;
+            var OUT_BASE = exitMode === "none" ? 0 : 0.5;
+            var SWAP_BASE = 0.55;
+            var STILLNESS = 0.35;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "5"));
+            var totalBase = IN_BASE + OUT_BASE;
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var OUT_START = IN + HOLD;
+
+            // Explicit both-endpoint state so a seek to t=0 is always correct.
+            gsap.set(stage, { opacity: 0, y: "4.5cqh", scale: 0.965, transformOrigin: "50% 60%" });
+            if (screenB) gsap.set(screenB, { opacity: 0, y: "1.6cqh" });
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: one settle. Rise + soft scale + fade, smooth ease-out.
+            tl.to(stage, { opacity: 1, duration: IN * 0.66, ease: "power2.out" }, 0);
+            tl.to(stage, { y: "0cqh", duration: IN, ease: "power3.out" }, 0);
+            tl.to(stage, { scale: 1, duration: IN, ease: "power2.out" }, 0);
+
+            // HOLD: barely-there drift as two explicit tweens (no yoyo
+            // re-tweens), then authored stillness until OUT.
+            var driftHalf = Math.max(0, HOLD - STILLNESS) / 2;
+            if (driftHalf >= 0.25) {
+              driftHalf = Math.min(driftHalf, 1.6);
+              tl.to(stage, { y: "-0.5cqh", duration: driftHalf, ease: "sine.inOut" }, IN);
+              tl.to(stage, { y: "0cqh", duration: driftHalf, ease: "sine.inOut" }, IN + driftHalf);
+            }
+
+            // Optional screen swap: fade-through, clamped inside
+            // [IN, D - OUT - SWAP] so it never fights the entrance or the
+            // exit. Screen A empties completely onto the bare stage before
+            // screen B rises in, so every frame shows at most one screen
+            // (no double-exposure furniture on a paused frame).
+            if (screenB) {
+              var SWAP = SWAP_BASE * scale;
+              var latest = Math.max(IN, duration - OUT - SWAP - 0.05);
+              var swapStart = Math.min(Math.max(swapAt, IN), latest);
+              var swapHalf = SWAP / 2;
+              tl.to(screenA, { opacity: 0, duration: swapHalf, ease: "power1.in" }, swapStart);
+              tl.fromTo(
+                screenB,
+                { opacity: 0, y: "1.6cqh" },
+                { opacity: 1, y: "0cqh", duration: swapHalf, ease: "power2.out" },
+                swapStart + swapHalf,
+              );
+            }
+
+            // OUT: only when exit != none; the default holds the last frame.
+            if (exitMode !== "none") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+              if (exitMode === "up") {
+                tl.to(stage, { y: "-4cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              }
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["browser-device-stage"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/browser-device-stage/demo.html b/docs/public/catalog/components/browser-device-stage/demo.html
new file mode 100644
index 0000000000..093125ae06
--- /dev/null
+++ b/docs/public/catalog/components/browser-device-stage/demo.html
@@ -0,0 +1,98 @@
+<!doctype html>
+<!--
+  browser-device-stage demo. Large centered mount (90% x 88%) on a light token
+  block (near-white bg, white surface, hairline borders) so the skeleton
+  chrome reads at app scale; browser chrome, screen swap at 2.2s, violet accent.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>browser-device-stage Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #eef0f3);
+      }
+
+      #root {
+        --bg: #eef0f3;
+        --fg: #14161b;
+        --surface: #ffffff;
+        --border: #d3d8e0;
+        --brand: #1d4ed8;
+        --accent: #0284c7;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 40%, #f7f8fa 0%, var(--bg, #eef0f3) 70%);
+      }
+
+      .mount-stage {
+        width: 90%;
+        height: 88%;
+        left: 5%;
+        top: 6%;
+        container-type: size;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="browser-device-stage-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+      data-fps="30"
+    >
+      <div
+        id="browser-device-stage-mount"
+        class="mount-stage clip"
+        data-composition-id="browser-device-stage"
+        data-composition-src="./browser-device-stage.html"
+        data-variable-values='{"chrome":"browser","title":"app.example.com","swap_at":2.2,"accent":"violet"}'
+        data-start="0"
+        data-duration="5"
+        data-track-index="0"
+        data-width="1728"
+        data-height="950"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["browser-device-stage-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "browser-device-stage.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/browser-flow/browser-flow.html b/docs/public/catalog/components/browser-flow/browser-flow.html
new file mode 100644
index 0000000000..09ce9d2c35
--- /dev/null
+++ b/docs/public/catalog/components/browser-flow/browser-flow.html
@@ -0,0 +1,94 @@
+<!--
+  Browser Flow - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-browser-flow">
+  <div class="panel prompt">
+    <h3>Browser Flow</h3>
+    <p>A browser frame walks through a three-step product flow.</p>
+    <div class="pill">Generate scene</div>
+    <div class="pill">Refine motion</div>
+    <div class="pill">Export</div>
+  </div>
+  <div class="panel preview">
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+  </div>
+</div>
+
+<style>
+  .hf-remocn-browser-flow {
+    --hf-accent: #2563eb;
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-browser-flow {
+    width: 820px;
+    min-height: 460px;
+    border-radius: 34px;
+    padding: 28px;
+    background: linear-gradient(135deg, #f8fafc, #e0f2fe);
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);
+    display: grid;
+    grid-template-columns: 280px 1fr;
+    gap: 22px;
+    overflow: hidden;
+  }
+  .hf-remocn-browser-flow .panel {
+    border: 1px solid rgba(15, 23, 42, 0.08);
+    border-radius: 24px;
+    background: rgba(255, 255, 255, 0.76);
+    padding: 22px;
+    backdrop-filter: blur(12px);
+  }
+  .hf-remocn-browser-flow .prompt {
+    display: grid;
+    gap: 12px;
+    align-content: start;
+  }
+  .hf-remocn-browser-flow .pill {
+    height: 42px;
+    border-radius: 999px;
+    background: #111827;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    padding: 0 18px;
+    font-weight: 800;
+    transform: translateX(var(--hf-pill-x, 0px));
+  }
+  .hf-remocn-browser-flow .preview {
+    display: grid;
+    gap: 14px;
+  }
+  .hf-remocn-browser-flow .card {
+    min-height: 78px;
+    border-radius: 18px;
+    background: #fff;
+    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
+    transform: translate(var(--hf-card-x, 0px), var(--hf-card-y, 0px))
+      scale(var(--hf-card-scale, 1));
+    opacity: var(--hf-card-opacity, 1);
+  }
+  .hf-remocn-browser-flow h3 {
+    margin: 0 0 14px;
+    font-size: 32px;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-browser-flow p {
+    margin: 0;
+    color: #475569;
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-browser-flow .pill', { '--hf-pill-x': '-18px', opacity: 0 }, { '--hf-pill-x': '0px', opacity: 1, duration: 0.25, stagger: 0.08, ease: 'power2.out' }, startTime); tl.fromTo('.hf-remocn-browser-flow .card', { '--hf-card-y': '28px', '--hf-card-scale': 0.96, '--hf-card-opacity': 0 }, { '--hf-card-y': '0px', '--hf-card-scale': 1, '--hf-card-opacity': 1, duration: 0.42, stagger: 0.12, ease: 'power3.out' }, startTime + 0.2);
+-->
diff --git a/docs/public/catalog/components/browser-flow/demo.html b/docs/public/catalog/components/browser-flow/demo.html
new file mode 100644
index 0000000000..c7cf3fb0fb
--- /dev/null
+++ b/docs/public/catalog/components/browser-flow/demo.html
@@ -0,0 +1,202 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Browser Flow - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f4f4f5;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+        /* ponytail: scale wrapper — GSAP targets .pill and .card, not this element */
+        transform: scale(0.93);
+      }
+      .hf-remocn-browser-flow {
+        --hf-accent: #2563eb;
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-browser-flow {
+        width: 820px;
+        min-height: 460px;
+        border-radius: 34px;
+        padding: 28px;
+        background: linear-gradient(135deg, #f8fafc, #e0f2fe);
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);
+        display: grid;
+        grid-template-columns: 280px 1fr;
+        gap: 22px;
+        overflow: hidden;
+      }
+      .hf-remocn-browser-flow .panel {
+        border: 1px solid rgba(15, 23, 42, 0.08);
+        border-radius: 24px;
+        background: rgba(255, 255, 255, 0.76);
+        padding: 22px;
+        backdrop-filter: blur(12px);
+      }
+      .hf-remocn-browser-flow .prompt {
+        display: grid;
+        gap: 12px;
+        align-content: start;
+      }
+      .hf-remocn-browser-flow .pill {
+        height: 42px;
+        border-radius: 999px;
+        background: #111827;
+        color: #fff;
+        display: flex;
+        align-items: center;
+        padding: 0 18px;
+        font-weight: 800;
+        transform: translateX(var(--hf-pill-x, 0px));
+      }
+      .hf-remocn-browser-flow .preview {
+        display: grid;
+        gap: 14px;
+      }
+      .hf-remocn-browser-flow .card {
+        min-height: 78px;
+        border-radius: 18px;
+        background: #fff;
+        box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
+        transform: translate(var(--hf-card-x, 0px), var(--hf-card-y, 0px))
+          scale(var(--hf-card-scale, 1));
+        opacity: var(--hf-card-opacity, 1);
+      }
+      .hf-remocn-browser-flow h3 {
+        margin: 0 0 14px;
+        font-size: 32px;
+        letter-spacing: -0.04em;
+      }
+      .hf-remocn-browser-flow p {
+        margin: 0;
+        color: #475569;
+        font-size: 13px;
+        line-height: 1.5;
+      }
+      /* skeleton lines inside preview cards */
+      .hf-remocn-browser-flow .card-inner {
+        padding: 18px 20px;
+        display: grid;
+        gap: 10px;
+      }
+      .hf-remocn-browser-flow .sk {
+        border-radius: 6px;
+        background: #e4e4e7;
+      }
+      .hf-remocn-browser-flow .sk-title {
+        height: 14px;
+        width: 62%;
+        background: #d4d4d8;
+      }
+      .hf-remocn-browser-flow .sk-line {
+        height: 10px;
+      }
+      .hf-remocn-browser-flow .sk-line:nth-child(2) { width: 90%; }
+      .hf-remocn-browser-flow .sk-line:nth-child(3) { width: 75%; }
+      .hf-remocn-browser-flow .sk-tag {
+        height: 22px;
+        width: 72px;
+        border-radius: 999px;
+        background: #dbeafe;
+        margin-top: 2px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="browser-flow-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-browser-flow">
+          <div class="panel prompt">
+            <h3>Browser Flow</h3>
+            <p>A browser frame walks through a three-step product flow.</p>
+            <div class="pill">Generate scene</div>
+            <div class="pill">Refine motion</div>
+            <div class="pill">Export</div>
+          </div>
+          <div class="panel preview">
+            <div class="card">
+              <div class="card-inner">
+                <div class="sk sk-title"></div>
+                <div class="sk sk-line"></div>
+                <div class="sk sk-line"></div>
+                <div class="sk sk-tag"></div>
+              </div>
+            </div>
+            <div class="card">
+              <div class="card-inner">
+                <div class="sk sk-title"></div>
+                <div class="sk sk-line"></div>
+                <div class="sk sk-line"></div>
+              </div>
+            </div>
+            <div class="card">
+              <div class="card-inner">
+                <div class="sk sk-title"></div>
+                <div class="sk sk-line"></div>
+                <div class="sk sk-tag"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-browser-flow .pill",
+          { "--hf-pill-x": "-18px", opacity: 0 },
+          { "--hf-pill-x": "0px", opacity: 1, duration: 0.25, stagger: 0.08, ease: "power2.out" },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-browser-flow .card",
+          { "--hf-card-y": "28px", "--hf-card-scale": 0.96, "--hf-card-opacity": 0 },
+          {
+            "--hf-card-y": "0px",
+            "--hf-card-scale": 1,
+            "--hf-card-opacity": 1,
+            duration: 0.42,
+            stagger: 0.12,
+            ease: "power3.out",
+          },
+          startTime + 0.2,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["browser-flow-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/camera-rig-depth-stack/camera-rig-depth-stack.html b/docs/public/catalog/components/camera-rig-depth-stack/camera-rig-depth-stack.html
new file mode 100644
index 0000000000..3787a814c3
--- /dev/null
+++ b/docs/public/catalog/components/camera-rig-depth-stack/camera-rig-depth-stack.html
@@ -0,0 +1,63 @@
+<!--
+  Camera Rig Depth Stack - advanced HyperFrames primitive.
+
+  This is intentionally seekable: drive it from a paused GSAP timeline.
+  MotionPath examples require GSAP MotionPathPlugin. Three.js examples expose
+  a render(progress) adapter instead of a free-running requestAnimationFrame loop.
+-->
+
+<div class="hf-advanced-camera-rig-depth-stack">
+  <div class="panel">
+    <div>
+      <h3>Camera Rig Depth Stack</h3>
+      <p>A 3D camera-rig-style card stack with depth, parallax, and focus shift.</p>
+    </div>
+  </div>
+</div>
+
+<style>
+  .hf-advanced-camera-rig-depth-stack {
+    color: #111827;
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-advanced-camera-rig-depth-stack {
+    position: relative;
+    width: 760px;
+    height: 430px;
+    perspective: 900px;
+    border-radius: 30px;
+    overflow: hidden;
+    background: linear-gradient(135deg, #0f172a, #312e81);
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+  }
+  .hf-advanced-camera-rig-depth-stack .panel {
+    position: absolute;
+    inset: 56px 90px;
+    border-radius: 30px;
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.52));
+    border: 1px solid rgba(255, 255, 255, 0.45);
+    backdrop-filter: blur(18px);
+    transform: rotateY(var(--hf-rotate-y, -16deg)) rotateX(var(--hf-rotate-x, 9deg))
+      translateZ(var(--hf-z, 0px));
+    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.22);
+    display: grid;
+    place-items: center;
+    text-align: center;
+  }
+  .hf-advanced-camera-rig-depth-stack h3 {
+    margin: 0;
+    color: #111827;
+    font-size: 42px;
+    letter-spacing: -0.05em;
+  }
+  .hf-advanced-camera-rig-depth-stack p {
+    margin: 8px 0 0;
+    color: #475569;
+  }
+</style>
+
+<!--
+  Timeline integration:
+  const startTime = 0;
+  tl.fromTo('.hf-advanced-camera-rig-depth-stack .panel', { '--hf-rotate-y': '-20deg', '--hf-rotate-x': '12deg', '--hf-z': '-80px', opacity: 0 }, { '--hf-rotate-y': '10deg', '--hf-rotate-x': '-4deg', '--hf-z': '80px', opacity: 1, duration: 1.2, ease: 'power3.out' }, startTime);
+-->
diff --git a/docs/public/catalog/components/camera-rig-depth-stack/demo.html b/docs/public/catalog/components/camera-rig-depth-stack/demo.html
new file mode 100644
index 0000000000..ef35741b0e
--- /dev/null
+++ b/docs/public/catalog/components/camera-rig-depth-stack/demo.html
@@ -0,0 +1,109 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Camera Rig Depth Stack - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-advanced-camera-rig-depth-stack {
+        color: #111827;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-advanced-camera-rig-depth-stack {
+        position: relative;
+        width: 760px;
+        height: 430px;
+        perspective: 900px;
+        border-radius: 30px;
+        overflow: hidden;
+        background: linear-gradient(135deg, #0f172a, #312e81);
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+        /* ponytail: scale root (not a GSAP target) to fill ~65% of 1080px height */
+        transform: scale(1.65);
+      }
+      .hf-advanced-camera-rig-depth-stack .panel {
+        position: absolute;
+        inset: 56px 90px;
+        border-radius: 30px;
+        background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.52));
+        border: 1px solid rgba(255, 255, 255, 0.45);
+        backdrop-filter: blur(18px);
+        transform: rotateY(var(--hf-rotate-y, -16deg)) rotateX(var(--hf-rotate-x, 9deg))
+          translateZ(var(--hf-z, 0px));
+        box-shadow: 0 28px 90px rgba(0, 0, 0, 0.22);
+        display: grid;
+        place-items: center;
+        text-align: center;
+      }
+      .hf-advanced-camera-rig-depth-stack h3 {
+        margin: 0;
+        color: #111827;
+        font-size: 42px;
+        letter-spacing: -0.05em;
+      }
+      .hf-advanced-camera-rig-depth-stack p {
+        margin: 8px 0 0;
+        color: #475569;
+        font-size: 18px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="camera-rig-depth-stack-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="hf-advanced-camera-rig-depth-stack">
+        <div class="panel">
+          <div>
+            <h3>Camera Rig Depth Stack</h3>
+            <p>A 3D camera-rig-style card stack with depth, parallax, and focus shift.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script>
+      const tl = gsap.timeline({ paused: true });
+      const startTime = 0.5;
+      tl.fromTo(
+        ".hf-advanced-camera-rig-depth-stack .panel",
+        { "--hf-rotate-y": "-20deg", "--hf-rotate-x": "12deg", "--hf-z": "-80px", opacity: 0 },
+        {
+          "--hf-rotate-y": "10deg",
+          "--hf-rotate-x": "-4deg",
+          "--hf-z": "80px",
+          opacity: 1,
+          duration: 1.2,
+          ease: "power3.out",
+        },
+        startTime,
+      );
+      tl.set({}, {}, 5);
+      window.__timelines = window.__timelines || {};
+      window.__timelines["camera-rig-depth-stack-demo"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/camera-scan-gate/camera-scan-gate.html b/docs/public/catalog/components/camera-scan-gate/camera-scan-gate.html
new file mode 100644
index 0000000000..176a3cb149
--- /dev/null
+++ b/docs/public/catalog/components/camera-scan-gate/camera-scan-gate.html
@@ -0,0 +1,522 @@
+<!doctype html>
+<!--
+  camera-scan-gate -- HyperFrames video primitive (ui-props / interaction / demonstrate)
+
+  Concept: a camera viewfinder scans once, tightens its four L-shaped corner
+  brackets onto a detected target, then confirms recognition with a pulse,
+  check flash, and target label. One mechanic, one job: demonstrate the causal
+  scan -> lock -> confirmation gate that unlocks a product's next beat.
+
+  Compiled-from evidence: SIM fixture; MOBILE mobile-inventory (scan-to-onboard
+  and scan-to-pay moments in the video-primitives candidates card).
+
+  Use when: a mobile product scene needs a camera, QR, identity, or payment
+  recognition moment whose successful lock causes the following action. Skip
+  it for passive camera decoration or a generic loading state.
+
+  Variables (declared in data-composition-variables below):
+    - scanColor (string, default "var(--brand)"): any CSS color value used by
+      the scan line, lock brackets, and confirmation glow.
+    - targetLabel (string, default "Verified"): label revealed at lock. Empty
+      string hides the label line entirely.
+    - sweepSpeed (number, default 1, range 0.8 to 1.6): scan sweep speed only.
+      It changes the sweep start while its landing sync point stays fixed.
+
+  Envelope (fixed IN/OUT, elastic HOLD only, never gsap.timeScale()):
+    IN_BASE  = 1.05s  stage settles, sweep lands, then recognition locks
+    HOLD     = elastic = max(0, D - (IN_BASE + OUT_BASE)); a faint finite
+               frame glow breathes, or remains still when HOLD == 0
+    OUT_BASE = 0.50s  resolved gate releases with a short fade
+    If D < IN_BASE + OUT_BASE, IN and OUT scale down together so IN + OUT == D
+    and HOLD == 0.
+
+  Sync points (fixed offsets into IN, never inside elastic HOLD):
+    - scan-landed: 0.50s into unscaled IN, the --ease-standard sweep completes
+    - recognition-lock: 0.68s into unscaled IN, brackets tighten with
+      --ease-overshoot while confirmation and the target label fire
+    Both offsets scale proportionally only when the full envelope compresses.
+
+  Sound cue: a soft recognition chime fires at recognition-lock. The primitive
+  never plays audio itself. It dispatches an `hf:sfx` CustomEvent
+  ({ id: "lock-chime", t: LOCK_AT }) for the host mix stage to route.
+
+  Mount contract: this file is a MOUNTABLE SUB-COMPOSITION, not a standalone
+  composition. A host loads it via data-composition-src; the runtime clones
+  only <template> contents, so all live style, markup, and script stays inside
+  the template. The root has no data-width/data-height and fills the host box
+  with position:absolute, inset:0, and container-type:size. It is styled by
+  #root because mounted CSS scoping would stop a root-class selector from
+  matching the root itself. The hardcoded "camera-scan-gate" composition id
+  is required because the mounted flattening step strips data-composition-id
+  before this script registers its timeline. Variables are read through
+  window.__hyperframes.getVariables(), which owns declared defaults merged
+  with per-instance host overrides after mounting.
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "scanColor", "type": "string", "role": "style", "label": "Scan color", "description": "Any CSS color value used by the scan line and recognition glow.", "default": "var(--brand)" },
+    { "id": "targetLabel", "type": "string", "role": "content", "label": "Target label", "description": "Confirmation label revealed at recognition lock. Blank hides the line.", "default": "Verified" },
+    { "id": "sweepSpeed", "type": "number", "role": "timing", "label": "Sweep speed", "description": "Speed multiplier for the scan sweep phase only.", "default": 1, "min": 0.8, "max": 1.6, "step": 0.1, "unit": "x" }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Camera Scan Gate</title>
+    <!-- Metadata only. The loader reads variable declarations from this html
+         element, while the mount runtime discards everything outside the
+         template. -->
+  </head>
+  <body>
+    <template>
+      <div
+        id="root"
+        data-composition-id="camera-scan-gate"
+        data-start="0"
+        data-duration="4"
+        data-fps="30"
+      >
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          /* INVARIANT: the host owns dimensions. #root fills that box and
+             establishes the cqw/cqh basis for every visible measurement. */
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+          }
+
+          .csg-clip {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+            background: var(--bg, #0b1120);
+          }
+
+          .csg-stage {
+            position: relative;
+            width: min(64cqw, 76cqh);
+            aspect-ratio: 1;
+            opacity: 0;
+          }
+
+          /* EDIT ZONE: the outer viewfinder is a square so one centered scale
+             operation tightens all four brackets onto the target equally. */
+          .csg-frame,
+          .csg-corner-layer,
+          .csg-scan-window {
+            position: absolute;
+            inset: 0;
+          }
+
+          .csg-frame {
+            border: 0.16cqw solid color-mix(in srgb, var(--border, #334155) 74%, transparent);
+            border-radius: var(--space-2, 2.4cqw);
+            background: color-mix(in srgb, var(--surface, #1e293b) 34%, transparent);
+            box-shadow: inset 0 0 5cqw color-mix(in srgb, var(--bg, #0b1120) 60%, transparent);
+          }
+
+          .csg-grid {
+            position: absolute;
+            inset: 0;
+            border-radius: inherit;
+            background-image:
+              linear-gradient(
+                to right,
+                transparent 33%,
+                color-mix(in srgb, var(--border, #334155) 32%, transparent) 33% 33.25%,
+                transparent 33.25% 66.5%,
+                color-mix(in srgb, var(--border, #334155) 32%, transparent) 66.5% 66.75%,
+                transparent 66.75%
+              ),
+              linear-gradient(
+                to bottom,
+                transparent 33%,
+                color-mix(in srgb, var(--border, #334155) 32%, transparent) 33% 33.25%,
+                transparent 33.25% 66.5%,
+                color-mix(in srgb, var(--border, #334155) 32%, transparent) 66.5% 66.75%,
+                transparent 66.75%
+              );
+            opacity: 0.55;
+          }
+
+          .csg-ambient {
+            position: absolute;
+            inset: -4%;
+            border: 0.45cqw solid
+              color-mix(in srgb, var(--csg-scan-color, var(--brand, #22c55e)) 48%, transparent);
+            border-radius: var(--space-3, 3.2cqw);
+            box-shadow: 0 0 4.5cqw
+              color-mix(in srgb, var(--csg-scan-color, var(--brand, #22c55e)) 38%, transparent);
+            opacity: 0;
+          }
+
+          .csg-corner-layer {
+            transform-origin: center;
+            z-index: 3;
+          }
+
+          .csg-corner {
+            position: absolute;
+            width: 18%;
+            height: 18%;
+            border-color: var(--csg-scan-color, var(--brand, #22c55e));
+            border-style: solid;
+            filter: drop-shadow(
+              0 0 0.9cqw
+                color-mix(in srgb, var(--csg-scan-color, var(--brand, #22c55e)) 56%, transparent)
+            );
+          }
+
+          .csg-corner-tl {
+            top: 0;
+            left: 0;
+            border-width: 0.65cqw 0 0 0.65cqw;
+            border-radius: var(--space-2, 2.4cqw) 0 0;
+          }
+
+          .csg-corner-tr {
+            top: 0;
+            right: 0;
+            border-width: 0.65cqw 0.65cqw 0 0;
+            border-radius: 0 var(--space-2, 2.4cqw) 0 0;
+          }
+
+          .csg-corner-br {
+            right: 0;
+            bottom: 0;
+            border-width: 0 0.65cqw 0.65cqw 0;
+            border-radius: 0 0 var(--space-2, 2.4cqw);
+          }
+
+          .csg-corner-bl {
+            bottom: 0;
+            left: 0;
+            border-width: 0 0 0.65cqw 0.65cqw;
+            border-radius: 0 0 0 var(--space-2, 2.4cqw);
+          }
+
+          .csg-scan-window {
+            z-index: 2;
+            inset: 3.5%;
+            overflow: hidden;
+          }
+
+          .csg-sweep {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+          }
+
+          .csg-scan-line {
+            position: absolute;
+            inset: 0 0 auto;
+            width: 100%;
+            height: 0.38cqh;
+            border-radius: 999cqw;
+            background: var(--csg-scan-color, var(--brand, #22c55e));
+            box-shadow:
+              0 0 1.2cqw var(--csg-scan-color, var(--brand, #22c55e)),
+              0 1.8cqh 3.6cqh
+                color-mix(in srgb, var(--csg-scan-color, var(--brand, #22c55e)) 42%, transparent);
+          }
+
+          .csg-target {
+            position: absolute;
+            z-index: 1;
+            width: 60%;
+            height: 60%;
+            top: 20%;
+            left: 20%;
+            border: 0.2cqw solid
+              color-mix(in srgb, var(--csg-scan-color, var(--brand, #22c55e)) 65%, transparent);
+            border-radius: var(--space-2, 2.4cqw);
+            background: color-mix(
+              in srgb,
+              var(--csg-scan-color, var(--brand, #22c55e)) 7%,
+              transparent
+            );
+            opacity: 0;
+          }
+
+          .csg-confirmation {
+            position: absolute;
+            z-index: 4;
+            inset: 0;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            gap: var(--space-2, 2.2cqh);
+          }
+
+          .csg-pulse {
+            position: absolute;
+            width: 30%;
+            aspect-ratio: 1;
+            border: 0.42cqw solid var(--csg-scan-color, var(--brand, #22c55e));
+            border-radius: 50%;
+            box-shadow: 0 0 4.5cqw
+              color-mix(in srgb, var(--csg-scan-color, var(--brand, #22c55e)) 58%, transparent);
+            opacity: 0;
+          }
+
+          .csg-check {
+            display: block;
+            width: 8.5%;
+            height: 15%;
+            margin-top: -5%;
+            border-right: 0.8cqw solid var(--csg-scan-color, var(--brand, #22c55e));
+            border-bottom: 0.8cqw solid var(--csg-scan-color, var(--brand, #22c55e));
+            filter: drop-shadow(
+              0 0 1.1cqw
+                color-mix(in srgb, var(--csg-scan-color, var(--brand, #22c55e)) 65%, transparent)
+            );
+            opacity: 0;
+            transform: rotate(45deg);
+          }
+
+          .csg-label {
+            min-width: 34%;
+            padding: var(--space-1, 1cqh) var(--space-3, 3cqw);
+            border: 0.14cqw solid
+              color-mix(in srgb, var(--csg-scan-color, var(--brand, #22c55e)) 48%, transparent);
+            border-radius: 999cqw;
+            background: color-mix(in srgb, var(--surface, #1e293b) 88%, transparent);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: clamp(2cqh, 2.8cqw, 3.3cqh);
+            font-weight: 760;
+            letter-spacing: 0.035em;
+            line-height: 1.1;
+            text-align: center;
+            opacity: 0;
+          }
+
+          .csg-label:empty {
+            display: none;
+          }
+        </style>
+
+        <div
+          id="camera-scan-gate-clip"
+          class="csg-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="csg-stage" role="img" aria-label="Camera recognition scanner">
+            <div class="csg-frame">
+              <div class="csg-grid" aria-hidden="true"></div>
+            </div>
+            <div class="csg-ambient" aria-hidden="true"></div>
+            <div class="csg-target" aria-hidden="true"></div>
+            <div class="csg-scan-window" aria-hidden="true">
+              <div class="csg-sweep">
+                <div class="csg-scan-line"></div>
+              </div>
+            </div>
+            <div class="csg-corner-layer" aria-hidden="true">
+              <span class="csg-corner csg-corner-tl"></span>
+              <span class="csg-corner csg-corner-tr"></span>
+              <span class="csg-corner csg-corner-br"></span>
+              <span class="csg-corner csg-corner-bl"></span>
+            </div>
+            <div class="csg-confirmation">
+              <span class="csg-pulse" aria-hidden="true"></span>
+              <span class="csg-check" aria-hidden="true"></span>
+              <span class="csg-label"></span>
+            </div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            // Literal, not read from the DOM. Mounted flattening strips the
+            // root's data-composition-id before timeline registration.
+            var compositionId = "camera-scan-gate";
+            var stage = root.querySelector(".csg-stage");
+            var cornerLayer = root.querySelector(".csg-corner-layer");
+            var sweep = root.querySelector(".csg-sweep");
+            var target = root.querySelector(".csg-target");
+            var ambient = root.querySelector(".csg-ambient");
+            var pulse = root.querySelector(".csg-pulse");
+            var check = root.querySelector(".csg-check");
+            var label = root.querySelector(".csg-label");
+
+            // EDIT ZONE: declared defaults and per-instance overrides have one
+            // owner after mount, window.__hyperframes.getVariables().
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+            var scanColor =
+              vars.scanColor == null || String(vars.scanColor).trim() === ""
+                ? "var(--brand)"
+                : String(vars.scanColor);
+            var targetLabel = vars.targetLabel == null ? "" : String(vars.targetLabel);
+            var rawSweepSpeed = Number(vars.sweepSpeed);
+            // INVARIANT: sweep speed is finite and clamped to the declared
+            // 0.8 to 1.6 range. It never changes IN, HOLD, OUT, or sync points.
+            var sweepSpeed = Number.isFinite(rawSweepSpeed)
+              ? Math.max(0.8, Math.min(1.6, rawSweepSpeed))
+              : 1;
+
+            root.style.setProperty("--csg-scan-color", scanColor);
+            label.textContent = targetLabel;
+
+            var beatValue = parseFloat(getComputedStyle(root).getPropertyValue("--dur-beat"));
+            var beat = Number.isFinite(beatValue) && beatValue > 0 ? beatValue : 0.5;
+            var AMBIENT_HALF = beat * 1.5;
+
+            // RETIME RANGE: IN_BASE and OUT_BASE own the interaction envelope.
+            // The only elastic phase is HOLD. Short durations scale IN and OUT
+            // together with one factor, never gsap.timeScale().
+            var IN_BASE = 1.05;
+            var OUT_BASE = 0.5;
+            var STAGE_IN_BASE = 0.28;
+            var SWEEP_DURATION_BASE = 0.4;
+            var SWEEP_LANDS_BASE = 0.5;
+            var LOCK_AT_BASE = 0.68;
+            var LOCK_DURATION_BASE = 0.22;
+            var CONFIRM_DURATION_BASE = 0.2;
+            var PULSE_HALF_BASE = 0.18;
+
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var totalBase = IN_BASE + OUT_BASE;
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var STAGE_IN = STAGE_IN_BASE * scale;
+            var SWEEP_LANDS = SWEEP_LANDS_BASE * scale;
+            var SWEEP_DURATION = (SWEEP_DURATION_BASE / sweepSpeed) * scale;
+            var SWEEP_START = Math.max(0, SWEEP_LANDS - SWEEP_DURATION);
+            var LOCK_AT = LOCK_AT_BASE * scale;
+            var LOCK_DURATION = LOCK_DURATION_BASE * scale;
+            var CONFIRM_DURATION = CONFIRM_DURATION_BASE * scale;
+            var PULSE_HALF = PULSE_HALF_BASE * scale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var HOLD_START = IN;
+            var OUT_START = IN + HOLD;
+
+            function fireSfx(id, t) {
+              root.dispatchEvent(
+                new CustomEvent("hf:sfx", { detail: { id: id, t: t }, bubbles: true }),
+              );
+            }
+
+            // Explicit both-endpoints state before timeline construction keeps
+            // direct seek to t=0 correct without playing through prior frames.
+            gsap.set(stage, { opacity: 0, scale: 0.94 });
+            gsap.set(cornerLayer, { scale: 1 });
+            gsap.set(sweep, { opacity: 1, yPercent: 0 });
+            gsap.set(target, { opacity: 0, scale: 0.96 });
+            gsap.set(ambient, { opacity: 0, scale: 1 });
+            gsap.set(pulse, { opacity: 0, scale: 0.9 });
+            gsap.set(check, { opacity: 0, scale: 0.94 });
+            gsap.set(label, { opacity: 0, y: "1.2cqh", scale: 0.96 });
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: settle, scan, then lock. The sweep uses --ease-standard's
+            // GSAP equivalent and lands at a fixed offset inside IN.
+            tl.to(stage, { opacity: 1, scale: 1, duration: STAGE_IN, ease: "power2.out" }, 0);
+            tl.to(
+              sweep,
+              { yPercent: 100, duration: SWEEP_DURATION, ease: "power2.out" },
+              SWEEP_START,
+            );
+            tl.set(sweep, { opacity: 0 }, SWEEP_LANDS);
+
+            // recognition-lock is the single causal gate. Corner tightening is
+            // the one moderate --ease-overshoot motion in this primitive.
+            tl.to(
+              cornerLayer,
+              { scale: 0.6, duration: LOCK_DURATION, ease: "back.out(1.7)" },
+              LOCK_AT,
+            );
+            tl.to(
+              target,
+              { opacity: 1, scale: 1, duration: CONFIRM_DURATION, ease: "power2.out" },
+              LOCK_AT,
+            );
+            tl.to(
+              check,
+              { opacity: 1, scale: 1, duration: CONFIRM_DURATION, ease: "power2.out" },
+              LOCK_AT,
+            );
+            tl.to(
+              label,
+              { opacity: 1, y: 0, scale: 1, duration: CONFIRM_DURATION, ease: "power2.out" },
+              LOCK_AT,
+            );
+            tl.to(
+              pulse,
+              {
+                opacity: 0.9,
+                scale: 1.25,
+                duration: PULSE_HALF,
+                ease: "power2.out",
+                yoyo: true,
+                repeat: 1,
+              },
+              LOCK_AT,
+            );
+            // Side-effect invariant: this timeline callback is the only actor
+            // that emits lock-chime, once at the recognition-lock sync point.
+            tl.call(
+              function () {
+                fireSfx("lock-chime", LOCK_AT);
+              },
+              [],
+              LOCK_AT,
+            );
+
+            // HOLD: a separate layer breathes with a finite repeat count, so
+            // the resolved gate stays alive without competing with lock tweens.
+            if (HOLD > AMBIENT_HALF) {
+              var ambientRepeat = Math.max(0, Math.floor(HOLD / AMBIENT_HALF) - 1);
+              tl.to(
+                ambient,
+                {
+                  opacity: 0.3,
+                  scale: 1.015,
+                  duration: AMBIENT_HALF,
+                  ease: "sine.inOut",
+                  yoyo: true,
+                  repeat: ambientRepeat,
+                },
+                HOLD_START,
+              );
+            }
+
+            // OUT: asymmetric release. HOLD alone absorbs duration changes.
+            tl.to(stage, { opacity: 0, scale: 0.98, duration: OUT, ease: "power2.in" }, OUT_START);
+
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/camera-scan-gate/demo.html b/docs/public/catalog/components/camera-scan-gate/demo.html
new file mode 100644
index 0000000000..e18ff92ee7
--- /dev/null
+++ b/docs/public/catalog/components/camera-scan-gate/demo.html
@@ -0,0 +1,111 @@
+<!doctype html>
+<!--
+  camera-scan-gate -- demo. Standalone 1920x1080 composition that MOUNTS the
+  primitive through data-composition-src instead of inlining it. The host clip
+  supplies deliberately non-default scanColor, targetLabel, and sweepSpeed
+  values so preview and snapshot verification prove variable flow through the
+  real sub-composition mount path. Kept in sync with camera-scan-gate.html by
+  hand; not installed by `hyperframes add`.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Camera Scan Gate - Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #05070d;
+      }
+
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 42%, #132036 0%, #05070d 72%);
+      }
+
+      /* A definite host box is required for the primitive's cqw/cqh geometry.
+         data-width/data-height below mirror these rendered dimensions for
+         tooling, while the primitive itself stays fully elastic. */
+      .mount-card {
+        --bg: #0d1728;
+        --fg: #f8fafc;
+        --surface: #17253a;
+        --border: #50647d;
+        --muted: #a5b4c7;
+        --brand: #22c55e;
+        --accent: #38bdf8;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-body: Inter, system-ui, sans-serif;
+        --dur-beat: 0.48s;
+        width: 48%;
+        height: 64%;
+        left: 26%;
+        top: 18%;
+        border: 1px solid rgba(148, 163, 184, 0.28);
+        border-radius: 32px;
+        box-shadow: 0 42px 100px rgba(0, 0, 0, 0.48);
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="camera-scan-gate-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="camera-scan-gate-mount"
+        class="mount-card clip"
+        data-composition-id="camera-scan-gate"
+        data-composition-src="./camera-scan-gate.html"
+        data-variable-values='{"scanColor":"var(--accent)","targetLabel":"Payment approved","sweepSpeed":1.1}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="922"
+        data-height="691"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      // The demo owns no motion. It registers one empty paused timeline under
+      // its own id, while the mounted primitive owns the interaction timeline.
+      window.__timelines = window.__timelines || {};
+      window.__timelines["camera-scan-gate-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "camera-scan-gate.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/camera-shake/__hf-variables-preview.html b/docs/public/catalog/components/camera-shake/__hf-variables-preview.html
new file mode 100644
index 0000000000..6537685d46
--- /dev/null
+++ b/docs/public/catalog/components/camera-shake/__hf-variables-preview.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Camera Shake variables preview</title>
+    <style>
+      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #05070f; }
+      #hf-vars-root { position: relative; width: 1920px; height: 1080px; }
+      #hf-vars-mount { position: absolute; inset: 0; display: grid; place-items: center; }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  </head>
+  <body>
+    <div id="hf-vars-root" data-composition-id="camera-shake-variables-preview" data-start="0" data-width="1920" data-height="1080" data-duration="5" data-fps="30">
+      <div id="hf-vars-mount" class="clip" data-composition-id="camera-shake" data-composition-src="./camera-shake.html" data-start="0" data-duration="5" data-track-index="0" data-width="1920" data-height="1080"></div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["camera-shake-variables-preview"] = gsap.timeline({ paused: true });
+    </script>
+<script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "camera-shake.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/camera-shake/camera-shake.html b/docs/public/catalog/components/camera-shake/camera-shake.html
new file mode 100644
index 0000000000..095b0efffa
--- /dev/null
+++ b/docs/public/catalog/components/camera-shake/camera-shake.html
@@ -0,0 +1,809 @@
+<!doctype html>
+<html
+  lang="en"
+  data-composition-variables='[
+    {
+      "id": "shakeProfile",
+      "type": "enum",
+      "label": "Shake profile",
+      "default": "handheld-normal-mild",
+      "options": [
+        { "value": "handheld-normal-mild", "label": "Handheld - normal lens, mild" },
+        { "value": "handheld-normal-strong", "label": "Handheld - normal lens, strong" },
+        { "value": "handheld-normal-extreme", "label": "Handheld - normal lens, extreme" },
+        { "value": "handheld-wideangle-mild", "label": "Handheld - wide angle, mild" },
+        { "value": "handheld-wideangle-strong", "label": "Handheld - wide angle, strong" },
+        { "value": "handheld-tele-mild", "label": "Handheld - telephoto, mild" },
+        { "value": "handheld-tele-strong", "label": "Handheld - telephoto, strong" },
+        { "value": "rig-6d-shake", "label": "Rig - 6D shake (engine buzz)" },
+        { "value": "rig-6d-wobble", "label": "Rig - 6D wobble" }
+      ]
+    },
+    {
+      "id": "shakeIntensity",
+      "type": "number",
+      "label": "Intensity multiplier",
+      "default": 1,
+      "min": 0,
+      "max": 3,
+      "step": 0.05
+    },
+    {
+      "id": "shakeFrequency",
+      "type": "number",
+      "label": "Frequency multiplier",
+      "default": 1,
+      "min": 0.1,
+      "max": 4,
+      "step": 0.05
+    },
+    {
+      "id": "shakeRotation",
+      "type": "boolean",
+      "label": "Include rotation (roll + tilt/pan)",
+      "default": true
+    }
+  ]'
+>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Camera Shake</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent;
+      }
+
+      /* ---- camera-shake ----------------------------------------------------
+         Procedural handheld / Steadicam / rig shake for ANY wrapper. Two
+         elements: an overflow-hidden FRAME that carries the lens perspective,
+         and a RIG inside it that gets the shake transform. Whatever you put
+         in the rig becomes "the shot".
+
+           <div class="camera-shake-frame">
+             <div class="camera-shake-rig">  ...your content...  </div>
+           </div>
+
+           cameraShake(tl, "#my-rig", { profile: "handheld-tele-mild", duration: 8 });
+
+         Layers inside the rig may carry data-cs-z="-800" to sit at a depth;
+         cameraShake() scales them to compensate so they parallax under the
+         camera instead of sliding as a flat card.
+      ------------------------------------------------------------------- */
+      .camera-shake-frame {
+        position: absolute;
+        inset: 0;
+        overflow: hidden;
+        /* perspective is written by cameraShake() from the profile's lens */
+      }
+      .camera-shake-rig {
+        position: absolute;
+        inset: 0;
+        transform-style: preserve-3d;
+        will-change: transform;
+      }
+      .camera-shake-rig > * {
+        transform-style: preserve-3d;
+      }
+
+      /* ---- self-preview stand-in "world" (not part of the snippet) ------- */
+      .cs-layer {
+        position: absolute;
+        inset: 0;
+      }
+      .cs-sky {
+        background: linear-gradient(#070b18 0%, #16264a 52%, #4a6ea8 78%, #b9852f 100%);
+      }
+      .cs-skyline {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 46%;
+        height: 220px;
+        background: repeating-linear-gradient(
+          90deg,
+          #0d1428 0 70px,
+          transparent 70px 96px,
+          #101a33 96px 140px,
+          transparent 140px 178px
+        );
+        opacity: 0.85;
+      }
+      .cs-tower {
+        position: absolute;
+        bottom: 44%;
+        width: 190px;
+        background: linear-gradient(#1d2b4d, #0a1024);
+        border-top: 6px solid #2f4a80;
+      }
+      .cs-tower::after {
+        content: "";
+        position: absolute;
+        inset: 18px 14px;
+        background:
+          repeating-linear-gradient(0deg, #ffd48a33 0 10px, transparent 10px 34px),
+          repeating-linear-gradient(90deg, #ffd48a2b 0 12px, transparent 12px 40px);
+      }
+      .cs-t1 {
+        left: 300px;
+        height: 430px;
+      }
+      .cs-t2 {
+        left: 820px;
+        width: 260px;
+        height: 640px;
+      }
+      .cs-t3 {
+        left: 1340px;
+        height: 380px;
+      }
+      /* Flat ground plane. A rotateX'd floor would poke through the title
+         plane under preserve-3d, so depth here comes from translateZ only. */
+      .cs-floor {
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 56%;
+        bottom: 0;
+        background:
+          repeating-linear-gradient(90deg, #4d6ea03d 0 3px, transparent 3px 150px),
+          repeating-linear-gradient(0deg, #4d6ea03d 0 3px, transparent 3px 70px),
+          linear-gradient(#0a1224, #04070f);
+      }
+      .cs-title {
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 300px;
+        text-align: center;
+        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+        font-weight: 800;
+        font-size: 148px;
+        line-height: 1.1;
+        letter-spacing: -0.03em;
+        color: #ffffff;
+        text-shadow: 0 12px 44px rgba(0, 0, 0, 0.75);
+      }
+      .cs-title span {
+        display: block;
+      }
+      .cs-post {
+        position: absolute;
+        left: 120px;
+        bottom: 0;
+        width: 46px;
+        height: 620px;
+        background: linear-gradient(#25324f, #060a14);
+        border-radius: 6px;
+      }
+      .cs-post-b {
+        left: auto;
+        right: 150px;
+        height: 720px;
+      }
+
+      /* ---- static frame guide: proves the WORLD moves, not the frame ----- */
+      #cs-guide {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+      }
+      /* Thirds as four thin bars, not one full-frame gradient layer: a
+         full-inset element over the title reads as an occluder to the
+         layout checker even when its paint is mostly transparent. */
+      #cs-guide .cs-line {
+        position: absolute;
+        background: rgba(255, 255, 255, 0.25);
+      }
+      #cs-guide .cs-v1 {
+        left: 639px;
+        top: 0;
+        width: 3px;
+        height: 1080px;
+      }
+      #cs-guide .cs-v2 {
+        left: 1279px;
+        top: 0;
+        width: 3px;
+        height: 1080px;
+      }
+      #cs-guide .cs-h1 {
+        left: 0;
+        top: 359px;
+        width: 1920px;
+        height: 3px;
+      }
+      #cs-guide .cs-h2 {
+        left: 0;
+        top: 719px;
+        width: 1920px;
+        height: 3px;
+      }
+      #cs-guide .cs-reticle {
+        position: absolute;
+        left: 910px;
+        top: 490px;
+        width: 100px;
+        height: 100px;
+        border: 3px solid #ff4d3d;
+        border-radius: 50%;
+      }
+      #cs-guide .cs-reticle::after {
+        content: "";
+        position: absolute;
+        left: 47px;
+        top: -40px;
+        width: 3px;
+        height: 180px;
+        background: #ff4d3d;
+      }
+      #cs-guide .cs-tick {
+        position: absolute;
+        width: 70px;
+        height: 70px;
+        border: 4px solid #ffffffbb;
+      }
+      #cs-guide .cs-tl {
+        left: 70px;
+        top: 70px;
+        border-right: 0;
+        border-bottom: 0;
+      }
+      #cs-guide .cs-tr {
+        right: 70px;
+        top: 70px;
+        border-left: 0;
+        border-bottom: 0;
+      }
+      #cs-guide .cs-bl {
+        left: 70px;
+        bottom: 70px;
+        border-right: 0;
+        border-top: 0;
+      }
+      #cs-guide .cs-br {
+        right: 70px;
+        bottom: 70px;
+        border-left: 0;
+        border-top: 0;
+      }
+      #cs-readout {
+        position: absolute;
+        left: 70px;
+        bottom: 170px;
+        font-family: Menlo, Consolas, monospace;
+        font-size: 30px;
+        letter-spacing: 0.02em;
+        color: #ffffffe6;
+        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
+      }
+    </style>
+  </head>
+  <body>
+    <!--
+      WIRING (what you copy into a host composition):
+        1. the .camera-shake-frame / .camera-shake-rig CSS above
+        2. the cameraShake() helper in the script below (profile table included)
+        3. wrap the thing you want shot:
+             <div class="camera-shake-frame">
+               <div class="camera-shake-rig" id="shot">  <video .../>  </div>
+             </div>
+        4. drive it from your paused timeline:
+             cameraShake(tl, "#shot", { profile: "handheld-wideangle-strong", duration: 8 });
+      Everything with a `cs-` class below is the self-preview world, not the snippet.
+    -->
+    <div
+      id="cs-root"
+      data-composition-id="camera-shake"
+      data-start="0"
+      data-duration="6"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+      style="position: relative; width: 1920px; height: 1080px; background: #05070f"
+    >
+      <div
+        class="camera-shake-frame clip"
+        id="cs-frame"
+        data-start="0"
+        data-duration="6"
+        data-track-index="0"
+      >
+        <!-- The rig is deliberately larger than the frame (overscan) and
+             deliberately leaves it under shake: that IS the effect, so every
+             moving layer is marked as intentional overflow. -->
+        <div class="camera-shake-rig" id="cs-rig" data-layout-allow-overflow>
+          <div class="cs-layer cs-sky" data-cs-z="-900" data-layout-allow-overflow></div>
+          <div class="cs-layer cs-farlayer" data-cs-z="-520" data-layout-allow-overflow>
+            <div class="cs-skyline" data-layout-allow-overflow></div>
+          </div>
+          <div class="cs-layer cs-midlayer" data-cs-z="-240" data-layout-allow-overflow>
+            <div class="cs-tower cs-t1" data-layout-allow-overflow></div>
+            <div class="cs-tower cs-t2" data-layout-allow-overflow></div>
+            <div class="cs-tower cs-t3" data-layout-allow-overflow></div>
+          </div>
+          <div class="cs-layer cs-floorlayer" data-cs-z="-90" data-layout-allow-overflow>
+            <div class="cs-floor" data-layout-allow-overflow></div>
+          </div>
+          <div class="cs-layer cs-titlelayer" data-cs-z="0" data-layout-allow-overflow>
+            <div class="cs-title">
+              <span>CAMERA</span>
+              <span>SHAKE</span>
+            </div>
+          </div>
+          <div class="cs-layer cs-nearlayer" data-cs-z="110" data-layout-allow-overflow>
+            <div class="cs-post" data-layout-allow-overflow></div>
+            <div class="cs-post cs-post-b" data-layout-allow-overflow></div>
+          </div>
+        </div>
+      </div>
+
+      <div id="cs-guide" class="clip" data-start="0" data-duration="6" data-track-index="1">
+        <div class="cs-line cs-v1"></div>
+        <div class="cs-line cs-v2"></div>
+        <div class="cs-line cs-h1"></div>
+        <div class="cs-line cs-h2"></div>
+        <div class="cs-tick cs-tl"></div>
+        <div class="cs-tick cs-tr"></div>
+        <div class="cs-tick cs-bl"></div>
+        <div class="cs-tick cs-br"></div>
+        <div class="cs-reticle"></div>
+        <div id="cs-readout">profile</div>
+      </div>
+    </div>
+
+    <script>
+      /* =====================================================================
+         camera-shake - procedural handheld / Steadicam / rig camera shake.
+
+         PROVENANCE + LICENCE. The nine profiles below are measured PARAMETER
+         VALUES (amplitudes in degrees, frequencies in Hz, three octaves per
+         axis) read off Unity Cinemachine's shipped noise presets. Cinemachine
+         is under the Unity Companion License, which is NOT permissive: no
+         Unity file is vendored, copied or imported here, and none of the code
+         below derives from Unity source. What is reused is the numeric data -
+         facts about how much a camera moves - plus a three-line sampler shape
+         that is standard mathematics (sum of octaves of noise / cosine). The
+         noise function, the screen-space projection, the lens model, the
+         overscan solver and the seek-safe driver are all original.
+
+         DETERMINISM. Every value is a closed-form function of `t`:
+             channel(t) = (valueNoise(freq*t + offset) - 0.5) * amplitude
+             channel(t) = cos((freq*t + offset) * 2PI) * amplitude * 0.5
+         No accumulator, no dt, no clock, no unseeded random. Seeking straight
+         to frame N produces exactly the same state as stepping to frame N.
+         The per-frame work is driven from a PROPERTY SETTER on a tweened
+         driver object - NOT from tl.eventCallback("onUpdate"), which GSAP
+         suppresses on seek() and which would freeze the shake on frame 0.
+         ===================================================================== */
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        var RAD = Math.PI / 180;
+
+        /* ---- the nine profiles ------------------------------------------
+           rot[octave] = [ [ampXdeg, freqHz], [ampY, freq], [ampZ, freq] ]
+           null = the preset has no channel on that axis for that octave.
+           `lens` selects the focal length used for the screen projection.
+
+           The optical truth in this table: wide-angle carries 12 deg on X
+           where telephoto carries 4 deg, because a long lens magnifies
+           angular jitter - amplitude scales inversely with focal length.
+           Keep the 3x ratio; it is the whole reason there are lens variants.
+        ------------------------------------------------------------------ */
+        var CS_PROFILES = {
+          "handheld-normal-mild": {
+            lens: "normal",
+            rot: [
+              [[7, 0.15], [5, 0.1], null],
+              [[4, 0.8], [2, 0.75], null],
+              [[1, 1.2], [0.8, 1.5], null],
+            ],
+          },
+          "handheld-normal-strong": {
+            lens: "normal",
+            rot: [
+              [[10, 0.4], [10, 0.06], null],
+              [[5, 1.44], [3, 0.73], null],
+              [[3, 2.49], [1, 2.0], null],
+            ],
+          },
+          "handheld-normal-extreme": {
+            lens: "normal",
+            rot: [
+              [[15, 0.2], [7, 0.25], null],
+              [[5, 0.9], [3, 1.0], null],
+              [[2, 2.0], null, null],
+            ],
+          },
+          "handheld-wideangle-mild": {
+            lens: "wide",
+            rot: [
+              [[12, 0.15], [5, 0.1], null],
+              [[5, 0.6], [4, 0.45], null],
+              [[1, 1.5], [1, 1.2], null],
+            ],
+          },
+          "handheld-wideangle-strong": {
+            lens: "wide",
+            rot: [
+              [[17.46, 0.5], [5, 0.25], null],
+              [
+                [12.47, 0.94],
+                [4, 0.5],
+                [1, 0.4],
+              ],
+              [[4, 1.2], [2, 1.3], null],
+            ],
+          },
+          "handheld-tele-mild": {
+            lens: "tele",
+            rot: [
+              [[4, 0.2], [2, 0.15], null],
+              [[2, 0.4], [2, 0.5], null],
+              [[1, 0.7], [1, 0.6], null],
+            ],
+          },
+          "handheld-tele-strong": {
+            lens: "tele",
+            rot: [
+              [
+                [6.19, 0.39],
+                [4, 0.15],
+                [1, 0.1],
+              ],
+              [[1.84, 1.75], [0.5, 0.9], null],
+              [[2.3, 2.0], [0.5, 1.4], null],
+            ],
+          },
+          /* 6D Shake also carries POSITION channels (Unity world units, not
+             degrees). Every position channel is a "constant" (cosine) channel
+             except octave-2 Y, which is noise - that asymmetry is in the
+             measured data and is kept. */
+          "rig-6d-shake": {
+            lens: "normal",
+            rot: [
+              [
+                [0.09, 5.83],
+                [0.059, 1.8],
+                [0.017, 2.38],
+              ],
+              [
+                [0.14, 9.17],
+                [0.041, 11.35],
+                [0.009, 10.52],
+              ],
+              [
+                [0.15, 57.17],
+                [0.048, 54.17],
+                [0.016, 63.76],
+              ],
+            ],
+            pos: [
+              [
+                [0.011, 3.2, 1],
+                [0.059, 1.9, 1],
+                [0.021, 3.33, 1],
+              ],
+              [
+                [0.009, 7.7, 1],
+                [0.04, 9.1, 0],
+                [0.009, 9.22, 1],
+              ],
+              [
+                [0.002, 51.51, 1],
+                [0.05, 55.54, 1],
+                [0.017, 58.55, 1],
+              ],
+            ],
+          },
+          "rig-6d-wobble": {
+            lens: "normal",
+            rot: [
+              [
+                [0.987, 5.2],
+                [1.34, 5.39],
+                [2, 2.23],
+              ],
+              [
+                [0.73, 9.17],
+                [0.86, 11.35],
+                [0.51, 8.31],
+              ],
+              [
+                [0.78, 13.52],
+                [0.55, 27.66],
+                [0.28, 18.91],
+              ],
+            ],
+          },
+        };
+
+        /* Lens -> pinhole projection distance, in pixels.
+
+           Two constraints, and they have to be satisfied together:
+           1) SCALE. These amplitudes were authored against a camera with a
+              60 degree VERTICAL field of view, so the "normal" lens must
+              reproduce that framing or every profile comes out roughly twice
+              as violent as intended: D_normal = (H/2) / tan(30deg).
+           2) RATIO. 28 / 50 / 85mm are the standard wide / normal / tele
+              primes; D scales with focal length, so wide:tele is 1:3.04 -
+              the exact reciprocal of the 12deg:4deg amplitude ratio in the
+              profile table. That reciprocal is why all seven handheld presets
+              land within ~15% of the same on-screen displacement while still
+              looking like completely different lenses. */
+        var CS_LENS_MM = { wide: 28, normal: 50, tele: 85 };
+        var CS_REF_VFOV_DEG = 60;
+
+        /* Unity position channels are world units with no pixel equivalent.
+           240 px/unit is AUTHORED (it puts 6D Shake's buzz at a few pixels,
+           which is what an engine-vibration preset should look like). It is
+           the one number here that is not measured. */
+        var CS_UNIT_PX = 240;
+
+        /* Tilting the content plate is a stand-in for rotating the camera, and
+           it degenerates. The plate is a finite rectangle sitting AT the
+           projection distance, so tipping it drives its far corner backwards
+           by (half-diagonal * sin tilt); once that approaches D the corner
+           crosses the eye plane, the projection blows up, and NO amount of
+           overscan covers the frame - increasing the scale only pushes the
+           corner further behind the eye. It bites first on wide lenses, where
+           D is small and the plate is optically enormous.
+
+           So the tilt ceiling is derived, not picked: allow the corner to sink
+           at most a quarter of the way to the eye. 28mm gets ~6.8 deg, 50mm
+           ~12.3 deg, 85mm ~21.2 deg - wide lenses keystone least, which is
+           also what they look like. The FRAMING swing, which is what the
+           measured degrees actually encode, is never clamped: the shot still
+           moves by the full authored amount and only the world's keystone
+           stops growing. */
+        var CS_TILT_DEPTH_BUDGET = 0.25;
+
+        /* ---- deterministic 1-D value noise (original implementation) ------
+           Integer hash -> [0,1), smootherstep interpolation between lattice
+           points. Pure function of (x, seed): no state, no Math.random. */
+        function csHash(i, seed) {
+          var h = Math.imul(i | 0, 374761393) + Math.imul(seed | 0, 668265263);
+          h = (h ^ (h >>> 13)) >>> 0;
+          h = Math.imul(h, 1274126177) >>> 0;
+          return ((h ^ (h >>> 16)) >>> 0) / 4294967296;
+        }
+        function csNoise(x, seed) {
+          var i = Math.floor(x);
+          var f = x - i;
+          var u = f * f * f * (f * (f * 6 - 15) + 10);
+          return csHash(i, seed) * (1 - u) + csHash(i + 1, seed) * u;
+        }
+
+        /* One channel of one octave. `constant` picks the cosine form.
+           Each channel gets its own seed AND its own time offset: sharing
+           offsets correlates the axes and the shake collapses into a diagonal
+           line, which is the classic tell of fake handheld. */
+        function csChannel(amp, freq, t, seed, constant) {
+          var u = freq * t + seed * 7.13;
+          if (constant) return Math.cos(u * 2 * Math.PI) * amp * 0.5;
+          return (csNoise(u, seed) - 0.5) * amp;
+        }
+
+        function csSample(profile, t, intensity, freqScale) {
+          var rot = [0, 0, 0];
+          var pos = [0, 0, 0];
+          var o, a, ch;
+          for (o = 0; o < profile.rot.length; o++) {
+            for (a = 0; a < 3; a++) {
+              ch = profile.rot[o][a];
+              if (!ch) continue;
+              rot[a] += csChannel(ch[0] * intensity, ch[1] * freqScale, t, o * 3 + a, 0);
+            }
+          }
+          if (profile.pos) {
+            for (o = 0; o < profile.pos.length; o++) {
+              for (a = 0; a < 3; a++) {
+                ch = profile.pos[o][a];
+                if (!ch) continue;
+                pos[a] += csChannel(ch[0] * intensity, ch[1] * freqScale, t, 32 + o * 3 + a, ch[2]);
+              }
+            }
+          }
+          return { pitch: rot[0], yaw: rot[1], roll: rot[2], px: pos[0], py: pos[1], pz: pos[2] };
+        }
+
+        /* ---- the public helper ------------------------------------------
+           cameraShake(tl, target, opts)
+             profile   one of the nine ids
+             intensity amplitude multiplier (default 1)
+             frequency frequency multiplier (default 1)
+             rotation  false = translation only (gimbal-stabilised look)
+             duration  seconds of shake (default 6)
+             at        timeline position (default 0)
+             fps       sampling rate for the overscan solve (default 30)
+             overscan  force a scale instead of solving for one
+           Returns { distance, overscan, peakX, peakY, peakRoll }.
+        ------------------------------------------------------------------ */
+        window.cameraShake = function (tl, target, opts) {
+          opts = opts || {};
+          var el = typeof target === "string" ? document.querySelector(target) : target;
+          if (!el) return null;
+
+          var profile = CS_PROFILES[opts.profile] || CS_PROFILES["handheld-normal-mild"];
+          var intensity = opts.intensity === undefined ? 1 : Number(opts.intensity);
+          var freqScale = opts.frequency === undefined ? 1 : Number(opts.frequency);
+          var withRotation = opts.rotation !== false;
+          var dur = opts.duration === undefined ? 6 : Number(opts.duration);
+          var at = opts.at === undefined ? 0 : Number(opts.at);
+          var fps = opts.fps === undefined ? 30 : Number(opts.fps);
+
+          var box = el.getBoundingClientRect();
+          var W = box.width || el.offsetWidth || 1920;
+          var H = box.height || el.offsetHeight || 1080;
+          var D = (H / 2 / Math.tan((CS_REF_VFOV_DEG / 2) * RAD)) * (CS_LENS_MM[profile.lens] / 50);
+
+          // The frame (overflow-hidden parent) carries the lens perspective so
+          // that depth layers inside the rig parallax instead of sliding flat.
+          var frame = el.parentElement;
+          if (frame) frame.style.perspective = D + "px";
+
+          // Depth layers: compensate scale so a layer at z still fills frame.
+          var layers = el.querySelectorAll("[data-cs-z]");
+          for (var i = 0; i < layers.length; i++) {
+            var z = Number(layers[i].getAttribute("data-cs-z")) || 0;
+            layers[i].style.transform = "translateZ(" + z + "px) scale(" + (D - z) / D + ")";
+          }
+
+          var maxTiltDeg =
+            Math.asin(Math.min(0.9, (CS_TILT_DEPTH_BUDGET * D) / Math.sqrt((W * W + H * H) / 4))) /
+            RAD;
+          function clampTilt(deg) {
+            return Math.max(-maxTiltDeg, Math.min(maxTiltDeg, deg));
+          }
+
+          function state(t) {
+            var s = csSample(profile, t, intensity, freqScale);
+            // Pinhole projection: a camera rotation of theta about its nodal
+            // point shifts the projected image by D*tan(theta). That shift and
+            // the plate rotation together ARE the rotation-about-the-nodal-
+            // point decomposition - it is not double counting.
+            var x = -D * Math.tan(s.yaw * RAD) + s.px * CS_UNIT_PX;
+            var y = D * Math.tan(s.pitch * RAD) + s.py * CS_UNIT_PX;
+            return {
+              x: x,
+              y: y,
+              roll: withRotation ? clampTilt(s.roll) : 0,
+              pitch: withRotation ? clampTilt(s.pitch) : 0,
+              yaw: withRotation ? clampTilt(s.yaw) : 0,
+              dolly: 1 + (s.pz * CS_UNIT_PX) / D,
+            };
+          }
+
+          // Overscan. The shake is a closed form, so the scale that keeps the
+          // plate covering the frame is computed per frame and the worst kept.
+          // Per frame, not worst-of-each-axis: peak pitch and peak yaw do not
+          // land on the same frame, and combining their maxima would zoom in
+          // for a frame that never exists. Three terms:
+          //   translation - the plate must reach 2*|offset| further
+          //   roll        - a rolled W x H rect covers W x H at
+          //                 (W cos r + H sin r) / W (and the H twin)
+          //   keystone    - under perspective the edge that tips AWAY shrinks
+          //                 toward the projection centre. The lever arm is NOT
+          //                 the plate half-size: CSS projects about the FRAME's
+          //                 perspective-origin, so a plate that is translated
+          //                 AND tipped swings its far corner about a point
+          //                 |offset| further out. Using (H/2 + |y|) instead of
+          //                 H/2 is what makes this hold on the wide-angle
+          //                 profiles; the earlier H/2 form tore a corner off
+          //                 the frame at 28mm. Verified by DOM hit-test probe
+          //                 across all nine profiles at intensity 1, 2 and 3.
+          var maxX = 0,
+            maxY = 0,
+            maxRoll = 0,
+            overscan = 1;
+          for (var f = 0; f <= Math.ceil(dur * fps); f++) {
+            var st = state(f / fps);
+            maxX = Math.max(maxX, Math.abs(st.x));
+            maxY = Math.max(maxY, Math.abs(st.y));
+            maxRoll = Math.max(maxRoll, Math.abs(st.roll));
+            var rr = Math.abs(st.roll) * RAD;
+            var need =
+              (Math.max(
+                (W * Math.cos(rr) + H * Math.sin(rr)) / W,
+                (H * Math.cos(rr) + W * Math.sin(rr)) / H,
+              ) *
+                Math.max(1 + (2 * Math.abs(st.x)) / W, 1 + (2 * Math.abs(st.y)) / H) *
+                (1 +
+                  ((H / 2 + Math.abs(st.y)) / D) * Math.sin(Math.abs(st.pitch) * RAD) +
+                  ((W / 2 + Math.abs(st.x)) / D) * Math.sin(Math.abs(st.yaw) * RAD))) /
+              Math.max(0.5, st.dolly);
+            overscan = Math.max(overscan, need);
+          }
+          overscan = opts.overscan === undefined ? overscan * 1.02 : Number(opts.overscan);
+
+          function apply(t) {
+            var s = state(t);
+            gsap.set(el, {
+              x: s.x,
+              y: s.y,
+              rotation: s.roll,
+              rotationX: s.pitch,
+              rotationY: -s.yaw,
+              scale: overscan * s.dolly,
+            });
+          }
+
+          // Seek-safe driver: GSAP writes `t` on every render, including
+          // seek(), so the setter runs on every frame. An onUpdate callback
+          // would NOT - GSAP suppresses events on seek and the shake would
+          // freeze on frame 0.
+          var driver = {};
+          var value = 0;
+          Object.defineProperty(driver, "t", {
+            get: function () {
+              return value;
+            },
+            set: function (next) {
+              value = next;
+              apply(next);
+            },
+          });
+          apply(0);
+          tl.to(driver, { t: dur, duration: dur, ease: "none" }, at);
+
+          return {
+            distance: D,
+            overscan: overscan,
+            peakX: maxX,
+            peakY: maxY,
+            peakRoll: maxRoll,
+          };
+        };
+
+        /* ---- self-preview (not part of the snippet) ----------------------- */
+        var vars =
+          window.__hyperframes && window.__hyperframes.getVariables
+            ? window.__hyperframes.getVariables()
+            : {};
+        var PROFILE = vars.shakeProfile || "handheld-normal-mild";
+        var INTENSITY = vars.shakeIntensity === undefined ? 1 : Number(vars.shakeIntensity);
+        var FREQUENCY = vars.shakeFrequency === undefined ? 1 : Number(vars.shakeFrequency);
+        var ROTATION = !(vars.shakeRotation === false || vars.shakeRotation === "false");
+
+        var tl = gsap.timeline({ paused: true });
+        var info = window.cameraShake(tl, "#cs-rig", {
+          profile: PROFILE,
+          intensity: INTENSITY,
+          frequency: FREQUENCY,
+          rotation: ROTATION,
+          duration: 6,
+          fps: 30,
+        });
+        var readout = document.getElementById("cs-readout");
+        if (readout && info) {
+          readout.textContent =
+            PROFILE +
+            "  |  " +
+            CS_LENS_MM[(CS_PROFILES[PROFILE] || CS_PROFILES["handheld-normal-mild"]).lens] +
+            "mm  |  x" +
+            INTENSITY +
+            " amp  x" +
+            FREQUENCY +
+            " freq  |  rot " +
+            (ROTATION ? "on" : "off") +
+            "  |  overscan " +
+            info.overscan.toFixed(3);
+        }
+        window.__timelines["camera-shake"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/camera-shake/demo.html b/docs/public/catalog/components/camera-shake/demo.html
new file mode 100644
index 0000000000..ebd71eab01
--- /dev/null
+++ b/docs/public/catalog/components/camera-shake/demo.html
@@ -0,0 +1,828 @@
+<!doctype html>
+<!-- Demo plate for the catalog preview. Identical to camera-shake.html except the
+     body background, which is opaque here so the plate reads on the catalog card.
+     Not installed by `hyperframes add` - registry-item.json lists camera-shake.html only. -->
+<html
+  lang="en"
+  data-composition-variables='[
+    {
+      "id": "shakeProfile",
+      "type": "enum",
+      "label": "Shake profile",
+      "default": "handheld-normal-mild",
+      "options": [
+        { "value": "handheld-normal-mild", "label": "Handheld - normal lens, mild" },
+        { "value": "handheld-normal-strong", "label": "Handheld - normal lens, strong" },
+        { "value": "handheld-normal-extreme", "label": "Handheld - normal lens, extreme" },
+        { "value": "handheld-wideangle-mild", "label": "Handheld - wide angle, mild" },
+        { "value": "handheld-wideangle-strong", "label": "Handheld - wide angle, strong" },
+        { "value": "handheld-tele-mild", "label": "Handheld - telephoto, mild" },
+        { "value": "handheld-tele-strong", "label": "Handheld - telephoto, strong" },
+        { "value": "rig-6d-shake", "label": "Rig - 6D shake (engine buzz)" },
+        { "value": "rig-6d-wobble", "label": "Rig - 6D wobble" }
+      ]
+    },
+    {
+      "id": "shakeIntensity",
+      "type": "number",
+      "label": "Intensity multiplier",
+      "default": 1,
+      "min": 0,
+      "max": 3,
+      "step": 0.05
+    },
+    {
+      "id": "shakeFrequency",
+      "type": "number",
+      "label": "Frequency multiplier",
+      "default": 1,
+      "min": 0.1,
+      "max": 4,
+      "step": 0.05
+    },
+    {
+      "id": "shakeRotation",
+      "type": "boolean",
+      "label": "Include rotation (roll + tilt/pan)",
+      "default": true
+    }
+  ]'
+>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Camera Shake</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #05070f;
+      }
+
+      /* ---- camera-shake ----------------------------------------------------
+         Procedural handheld / Steadicam / rig shake for ANY wrapper. Two
+         elements: an overflow-hidden FRAME that carries the lens perspective,
+         and a RIG inside it that gets the shake transform. Whatever you put
+         in the rig becomes "the shot".
+
+           <div class="camera-shake-frame">
+             <div class="camera-shake-rig">  ...your content...  </div>
+           </div>
+
+           cameraShake(tl, "#my-rig", { profile: "handheld-tele-mild", duration: 8 });
+
+         Layers inside the rig may carry data-cs-z="-800" to sit at a depth;
+         cameraShake() scales them to compensate so they parallax under the
+         camera instead of sliding as a flat card.
+      ------------------------------------------------------------------- */
+      .camera-shake-frame {
+        position: absolute;
+        inset: 0;
+        overflow: hidden;
+        /* perspective is written by cameraShake() from the profile's lens */
+      }
+      .camera-shake-rig {
+        position: absolute;
+        inset: 0;
+        transform-style: preserve-3d;
+        will-change: transform;
+      }
+      .camera-shake-rig > * {
+        transform-style: preserve-3d;
+      }
+
+      /* ---- self-preview stand-in "world" (not part of the snippet) ------- */
+      .cs-layer {
+        position: absolute;
+        inset: 0;
+      }
+      .cs-sky {
+        background: linear-gradient(#070b18 0%, #16264a 52%, #4a6ea8 78%, #b9852f 100%);
+      }
+      .cs-skyline {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 46%;
+        height: 220px;
+        background: repeating-linear-gradient(
+          90deg,
+          #0d1428 0 70px,
+          transparent 70px 96px,
+          #101a33 96px 140px,
+          transparent 140px 178px
+        );
+        opacity: 0.85;
+      }
+      .cs-tower {
+        position: absolute;
+        bottom: 44%;
+        width: 190px;
+        background: linear-gradient(#1d2b4d, #0a1024);
+        border-top: 6px solid #2f4a80;
+      }
+      .cs-tower::after {
+        content: "";
+        position: absolute;
+        inset: 18px 14px;
+        background:
+          repeating-linear-gradient(0deg, #ffd48a33 0 10px, transparent 10px 34px),
+          repeating-linear-gradient(90deg, #ffd48a2b 0 12px, transparent 12px 40px);
+      }
+      .cs-t1 {
+        left: 300px;
+        height: 430px;
+      }
+      .cs-t2 {
+        left: 820px;
+        width: 260px;
+        height: 640px;
+      }
+      .cs-t3 {
+        left: 1340px;
+        height: 380px;
+      }
+      /* Flat ground plane. A rotateX'd floor would poke through the title
+         plane under preserve-3d, so depth here comes from translateZ only. */
+      .cs-floor {
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 56%;
+        bottom: 0;
+        background:
+          repeating-linear-gradient(90deg, #4d6ea03d 0 3px, transparent 3px 150px),
+          repeating-linear-gradient(0deg, #4d6ea03d 0 3px, transparent 3px 70px),
+          linear-gradient(#0a1224, #04070f);
+      }
+      .cs-title {
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 300px;
+        text-align: center;
+        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+        font-weight: 800;
+        font-size: 148px;
+        line-height: 1.1;
+        letter-spacing: -0.03em;
+        color: #ffffff;
+        text-shadow: 0 12px 44px rgba(0, 0, 0, 0.75);
+      }
+      .cs-title span {
+        display: block;
+      }
+      .cs-post {
+        position: absolute;
+        left: 120px;
+        bottom: 0;
+        width: 46px;
+        height: 620px;
+        background: linear-gradient(#25324f, #060a14);
+        border-radius: 6px;
+      }
+      .cs-post-b {
+        left: auto;
+        right: 150px;
+        height: 720px;
+      }
+
+      /* ---- static frame guide: proves the WORLD moves, not the frame ----- */
+      #cs-guide {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+      }
+      /* Thirds as four thin bars, not one full-frame gradient layer: a
+         full-inset element over the title reads as an occluder to the
+         layout checker even when its paint is mostly transparent. */
+      #cs-guide .cs-line {
+        position: absolute;
+        background: rgba(255, 255, 255, 0.25);
+      }
+      #cs-guide .cs-v1 {
+        left: 639px;
+        top: 0;
+        width: 3px;
+        height: 1080px;
+      }
+      #cs-guide .cs-v2 {
+        left: 1279px;
+        top: 0;
+        width: 3px;
+        height: 1080px;
+      }
+      #cs-guide .cs-h1 {
+        left: 0;
+        top: 359px;
+        width: 1920px;
+        height: 3px;
+      }
+      #cs-guide .cs-h2 {
+        left: 0;
+        top: 719px;
+        width: 1920px;
+        height: 3px;
+      }
+      #cs-guide .cs-reticle {
+        position: absolute;
+        left: 910px;
+        top: 490px;
+        width: 100px;
+        height: 100px;
+        border: 3px solid #ff4d3d;
+        border-radius: 50%;
+      }
+      #cs-guide .cs-reticle::after {
+        content: "";
+        position: absolute;
+        left: 47px;
+        top: -40px;
+        width: 3px;
+        height: 180px;
+        background: #ff4d3d;
+      }
+      #cs-guide .cs-tick {
+        position: absolute;
+        width: 70px;
+        height: 70px;
+        border: 4px solid #ffffffbb;
+      }
+      #cs-guide .cs-tl {
+        left: 70px;
+        top: 70px;
+        border-right: 0;
+        border-bottom: 0;
+      }
+      #cs-guide .cs-tr {
+        right: 70px;
+        top: 70px;
+        border-left: 0;
+        border-bottom: 0;
+      }
+      #cs-guide .cs-bl {
+        left: 70px;
+        bottom: 70px;
+        border-right: 0;
+        border-top: 0;
+      }
+      #cs-guide .cs-br {
+        right: 70px;
+        bottom: 70px;
+        border-left: 0;
+        border-top: 0;
+      }
+      #cs-readout {
+        position: absolute;
+        left: 70px;
+        bottom: 170px;
+        font-family: Menlo, Consolas, monospace;
+        font-size: 30px;
+        letter-spacing: 0.02em;
+        color: #ffffffe6;
+        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
+      }
+    </style>
+  </head>
+  <body>
+    <!--
+      WIRING (what you copy into a host composition):
+        1. the .camera-shake-frame / .camera-shake-rig CSS above
+        2. the cameraShake() helper in the script below (profile table included)
+        3. wrap the thing you want shot:
+             <div class="camera-shake-frame">
+               <div class="camera-shake-rig" id="shot">  <video .../>  </div>
+             </div>
+        4. drive it from your paused timeline:
+             cameraShake(tl, "#shot", { profile: "handheld-wideangle-strong", duration: 8 });
+      Everything with a `cs-` class below is the self-preview world, not the snippet.
+    -->
+    <div
+      id="cs-root"
+      data-composition-id="camera-shake"
+      data-start="0"
+      data-duration="6"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+      style="position: relative; width: 1920px; height: 1080px; background: #05070f"
+    >
+      <div
+        class="camera-shake-frame clip"
+        id="cs-frame"
+        data-start="0"
+        data-duration="6"
+        data-track-index="0"
+      >
+        <!-- The rig is deliberately larger than the frame (overscan) and
+             deliberately leaves it under shake: that IS the effect, so every
+             moving layer is marked as intentional overflow. -->
+        <div class="camera-shake-rig" id="cs-rig" data-layout-allow-overflow>
+          <div class="cs-layer cs-sky" data-cs-z="-900" data-layout-allow-overflow></div>
+          <div class="cs-layer cs-farlayer" data-cs-z="-520" data-layout-allow-overflow>
+            <div class="cs-skyline" data-layout-allow-overflow></div>
+          </div>
+          <div class="cs-layer cs-midlayer" data-cs-z="-240" data-layout-allow-overflow>
+            <div class="cs-tower cs-t1" data-layout-allow-overflow></div>
+            <div class="cs-tower cs-t2" data-layout-allow-overflow></div>
+            <div class="cs-tower cs-t3" data-layout-allow-overflow></div>
+          </div>
+          <div class="cs-layer cs-floorlayer" data-cs-z="-90" data-layout-allow-overflow>
+            <div class="cs-floor" data-layout-allow-overflow></div>
+          </div>
+          <div class="cs-layer cs-titlelayer" data-cs-z="0" data-layout-allow-overflow>
+            <div class="cs-title">
+              <span>CAMERA</span>
+              <span>SHAKE</span>
+            </div>
+          </div>
+          <div class="cs-layer cs-nearlayer" data-cs-z="110" data-layout-allow-overflow>
+            <div class="cs-post" data-layout-allow-overflow></div>
+            <div class="cs-post cs-post-b" data-layout-allow-overflow></div>
+          </div>
+        </div>
+      </div>
+
+      <div id="cs-guide" class="clip" data-start="0" data-duration="6" data-track-index="1">
+        <div class="cs-line cs-v1"></div>
+        <div class="cs-line cs-v2"></div>
+        <div class="cs-line cs-h1"></div>
+        <div class="cs-line cs-h2"></div>
+        <div class="cs-tick cs-tl"></div>
+        <div class="cs-tick cs-tr"></div>
+        <div class="cs-tick cs-bl"></div>
+        <div class="cs-tick cs-br"></div>
+        <div class="cs-reticle"></div>
+        <div id="cs-readout">profile</div>
+      </div>
+    </div>
+
+    <script>
+      /* =====================================================================
+         camera-shake - procedural handheld / Steadicam / rig camera shake.
+
+         PROVENANCE + LICENCE. The nine profiles below are measured PARAMETER
+         VALUES (amplitudes in degrees, frequencies in Hz, three octaves per
+         axis) read off Unity Cinemachine's shipped noise presets. Cinemachine
+         is under the Unity Companion License, which is NOT permissive: no
+         Unity file is vendored, copied or imported here, and none of the code
+         below derives from Unity source. What is reused is the numeric data -
+         facts about how much a camera moves - plus a three-line sampler shape
+         that is standard mathematics (sum of octaves of noise / cosine). The
+         noise function, the screen-space projection, the lens model, the
+         overscan solver and the seek-safe driver are all original.
+
+         DETERMINISM. Every value is a closed-form function of `t`:
+             channel(t) = (valueNoise(freq*t + offset) - 0.5) * amplitude
+             channel(t) = cos((freq*t + offset) * 2PI) * amplitude * 0.5
+         No accumulator, no dt, no clock, no unseeded random. Seeking straight
+         to frame N produces exactly the same state as stepping to frame N.
+         The per-frame work is driven from a PROPERTY SETTER on a tweened
+         driver object - NOT from tl.eventCallback("onUpdate"), which GSAP
+         suppresses on seek() and which would freeze the shake on frame 0.
+         ===================================================================== */
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        var RAD = Math.PI / 180;
+
+        /* ---- the nine profiles ------------------------------------------
+           rot[octave] = [ [ampXdeg, freqHz], [ampY, freq], [ampZ, freq] ]
+           null = the preset has no channel on that axis for that octave.
+           `lens` selects the focal length used for the screen projection.
+
+           The optical truth in this table: wide-angle carries 12 deg on X
+           where telephoto carries 4 deg, because a long lens magnifies
+           angular jitter - amplitude scales inversely with focal length.
+           Keep the 3x ratio; it is the whole reason there are lens variants.
+        ------------------------------------------------------------------ */
+        var CS_PROFILES = {
+          "handheld-normal-mild": {
+            lens: "normal",
+            rot: [
+              [[7, 0.15], [5, 0.1], null],
+              [[4, 0.8], [2, 0.75], null],
+              [[1, 1.2], [0.8, 1.5], null],
+            ],
+          },
+          "handheld-normal-strong": {
+            lens: "normal",
+            rot: [
+              [[10, 0.4], [10, 0.06], null],
+              [[5, 1.44], [3, 0.73], null],
+              [[3, 2.49], [1, 2.0], null],
+            ],
+          },
+          "handheld-normal-extreme": {
+            lens: "normal",
+            rot: [
+              [[15, 0.2], [7, 0.25], null],
+              [[5, 0.9], [3, 1.0], null],
+              [[2, 2.0], null, null],
+            ],
+          },
+          "handheld-wideangle-mild": {
+            lens: "wide",
+            rot: [
+              [[12, 0.15], [5, 0.1], null],
+              [[5, 0.6], [4, 0.45], null],
+              [[1, 1.5], [1, 1.2], null],
+            ],
+          },
+          "handheld-wideangle-strong": {
+            lens: "wide",
+            rot: [
+              [[17.46, 0.5], [5, 0.25], null],
+              [
+                [12.47, 0.94],
+                [4, 0.5],
+                [1, 0.4],
+              ],
+              [[4, 1.2], [2, 1.3], null],
+            ],
+          },
+          "handheld-tele-mild": {
+            lens: "tele",
+            rot: [
+              [[4, 0.2], [2, 0.15], null],
+              [[2, 0.4], [2, 0.5], null],
+              [[1, 0.7], [1, 0.6], null],
+            ],
+          },
+          "handheld-tele-strong": {
+            lens: "tele",
+            rot: [
+              [
+                [6.19, 0.39],
+                [4, 0.15],
+                [1, 0.1],
+              ],
+              [[1.84, 1.75], [0.5, 0.9], null],
+              [[2.3, 2.0], [0.5, 1.4], null],
+            ],
+          },
+          /* 6D Shake also carries POSITION channels (Unity world units, not
+             degrees). Every position channel is a "constant" (cosine) channel
+             except octave-2 Y, which is noise - that asymmetry is in the
+             measured data and is kept. */
+          "rig-6d-shake": {
+            lens: "normal",
+            rot: [
+              [
+                [0.09, 5.83],
+                [0.059, 1.8],
+                [0.017, 2.38],
+              ],
+              [
+                [0.14, 9.17],
+                [0.041, 11.35],
+                [0.009, 10.52],
+              ],
+              [
+                [0.15, 57.17],
+                [0.048, 54.17],
+                [0.016, 63.76],
+              ],
+            ],
+            pos: [
+              [
+                [0.011, 3.2, 1],
+                [0.059, 1.9, 1],
+                [0.021, 3.33, 1],
+              ],
+              [
+                [0.009, 7.7, 1],
+                [0.04, 9.1, 0],
+                [0.009, 9.22, 1],
+              ],
+              [
+                [0.002, 51.51, 1],
+                [0.05, 55.54, 1],
+                [0.017, 58.55, 1],
+              ],
+            ],
+          },
+          "rig-6d-wobble": {
+            lens: "normal",
+            rot: [
+              [
+                [0.987, 5.2],
+                [1.34, 5.39],
+                [2, 2.23],
+              ],
+              [
+                [0.73, 9.17],
+                [0.86, 11.35],
+                [0.51, 8.31],
+              ],
+              [
+                [0.78, 13.52],
+                [0.55, 27.66],
+                [0.28, 18.91],
+              ],
+            ],
+          },
+        };
+
+        /* Lens -> pinhole projection distance, in pixels.
+
+           Two constraints, and they have to be satisfied together:
+           1) SCALE. These amplitudes were authored against a camera with a
+              60 degree VERTICAL field of view, so the "normal" lens must
+              reproduce that framing or every profile comes out roughly twice
+              as violent as intended: D_normal = (H/2) / tan(30deg).
+           2) RATIO. 28 / 50 / 85mm are the standard wide / normal / tele
+              primes; D scales with focal length, so wide:tele is 1:3.04 -
+              the exact reciprocal of the 12deg:4deg amplitude ratio in the
+              profile table. That reciprocal is why all seven handheld presets
+              land within ~15% of the same on-screen displacement while still
+              looking like completely different lenses. */
+        var CS_LENS_MM = { wide: 28, normal: 50, tele: 85 };
+        var CS_REF_VFOV_DEG = 60;
+
+        /* Unity position channels are world units with no pixel equivalent.
+           240 px/unit is AUTHORED (it puts 6D Shake's buzz at a few pixels,
+           which is what an engine-vibration preset should look like). It is
+           the one number here that is not measured. */
+        var CS_UNIT_PX = 240;
+
+        /* Tilting the content plate is a stand-in for rotating the camera, and
+           it degenerates. The plate is a finite rectangle sitting AT the
+           projection distance, so tipping it drives its far corner backwards
+           by (half-diagonal * sin tilt); once that approaches D the corner
+           crosses the eye plane, the projection blows up, and NO amount of
+           overscan covers the frame - increasing the scale only pushes the
+           corner further behind the eye. It bites first on wide lenses, where
+           D is small and the plate is optically enormous.
+
+           So the tilt ceiling is derived, not picked: allow the corner to sink
+           at most a quarter of the way to the eye. 28mm gets ~6.8 deg, 50mm
+           ~12.3 deg, 85mm ~21.2 deg - wide lenses keystone least, which is
+           also what they look like. The FRAMING swing, which is what the
+           measured degrees actually encode, is never clamped: the shot still
+           moves by the full authored amount and only the world's keystone
+           stops growing. */
+        var CS_TILT_DEPTH_BUDGET = 0.25;
+
+        /* ---- deterministic 1-D value noise (original implementation) ------
+           Integer hash -> [0,1), smootherstep interpolation between lattice
+           points. Pure function of (x, seed): no state, no Math.random. */
+        function csHash(i, seed) {
+          var h = Math.imul(i | 0, 374761393) + Math.imul(seed | 0, 668265263);
+          h = (h ^ (h >>> 13)) >>> 0;
+          h = Math.imul(h, 1274126177) >>> 0;
+          return ((h ^ (h >>> 16)) >>> 0) / 4294967296;
+        }
+        function csNoise(x, seed) {
+          var i = Math.floor(x);
+          var f = x - i;
+          var u = f * f * f * (f * (f * 6 - 15) + 10);
+          return csHash(i, seed) * (1 - u) + csHash(i + 1, seed) * u;
+        }
+
+        /* One channel of one octave. `constant` picks the cosine form.
+           Each channel gets its own seed AND its own time offset: sharing
+           offsets correlates the axes and the shake collapses into a diagonal
+           line, which is the classic tell of fake handheld. */
+        function csChannel(amp, freq, t, seed, constant) {
+          var u = freq * t + seed * 7.13;
+          if (constant) return Math.cos(u * 2 * Math.PI) * amp * 0.5;
+          return (csNoise(u, seed) - 0.5) * amp;
+        }
+
+        function csSample(profile, t, intensity, freqScale) {
+          var rot = [0, 0, 0];
+          var pos = [0, 0, 0];
+          var o, a, ch;
+          for (o = 0; o < profile.rot.length; o++) {
+            for (a = 0; a < 3; a++) {
+              ch = profile.rot[o][a];
+              if (!ch) continue;
+              rot[a] += csChannel(ch[0] * intensity, ch[1] * freqScale, t, o * 3 + a, 0);
+            }
+          }
+          if (profile.pos) {
+            for (o = 0; o < profile.pos.length; o++) {
+              for (a = 0; a < 3; a++) {
+                ch = profile.pos[o][a];
+                if (!ch) continue;
+                pos[a] += csChannel(ch[0] * intensity, ch[1] * freqScale, t, 32 + o * 3 + a, ch[2]);
+              }
+            }
+          }
+          return { pitch: rot[0], yaw: rot[1], roll: rot[2], px: pos[0], py: pos[1], pz: pos[2] };
+        }
+
+        /* ---- the public helper ------------------------------------------
+           cameraShake(tl, target, opts)
+             profile   one of the nine ids
+             intensity amplitude multiplier (default 1)
+             frequency frequency multiplier (default 1)
+             rotation  false = translation only (gimbal-stabilised look)
+             duration  seconds of shake (default 6)
+             at        timeline position (default 0)
+             fps       sampling rate for the overscan solve (default 30)
+             overscan  force a scale instead of solving for one
+           Returns { distance, overscan, peakX, peakY, peakRoll }.
+        ------------------------------------------------------------------ */
+        window.cameraShake = function (tl, target, opts) {
+          opts = opts || {};
+          var el = typeof target === "string" ? document.querySelector(target) : target;
+          if (!el) return null;
+
+          var profile = CS_PROFILES[opts.profile] || CS_PROFILES["handheld-normal-mild"];
+          var intensity = opts.intensity === undefined ? 1 : Number(opts.intensity);
+          var freqScale = opts.frequency === undefined ? 1 : Number(opts.frequency);
+          var withRotation = opts.rotation !== false;
+          var dur = opts.duration === undefined ? 6 : Number(opts.duration);
+          var at = opts.at === undefined ? 0 : Number(opts.at);
+          var fps = opts.fps === undefined ? 30 : Number(opts.fps);
+
+          var box = el.getBoundingClientRect();
+          var W = box.width || el.offsetWidth || 1920;
+          var H = box.height || el.offsetHeight || 1080;
+          var D = (H / 2 / Math.tan((CS_REF_VFOV_DEG / 2) * RAD)) * (CS_LENS_MM[profile.lens] / 50);
+
+          // The frame (overflow-hidden parent) carries the lens perspective so
+          // that depth layers inside the rig parallax instead of sliding flat.
+          var frame = el.parentElement;
+          if (frame) frame.style.perspective = D + "px";
+
+          // Depth layers: compensate scale so a layer at z still fills frame.
+          var layers = el.querySelectorAll("[data-cs-z]");
+          for (var i = 0; i < layers.length; i++) {
+            var z = Number(layers[i].getAttribute("data-cs-z")) || 0;
+            layers[i].style.transform = "translateZ(" + z + "px) scale(" + (D - z) / D + ")";
+          }
+
+          var maxTiltDeg =
+            Math.asin(Math.min(0.9, (CS_TILT_DEPTH_BUDGET * D) / Math.sqrt((W * W + H * H) / 4))) /
+            RAD;
+          function clampTilt(deg) {
+            return Math.max(-maxTiltDeg, Math.min(maxTiltDeg, deg));
+          }
+
+          function state(t) {
+            var s = csSample(profile, t, intensity, freqScale);
+            // Pinhole projection: a camera rotation of theta about its nodal
+            // point shifts the projected image by D*tan(theta). That shift and
+            // the plate rotation together ARE the rotation-about-the-nodal-
+            // point decomposition - it is not double counting.
+            var x = -D * Math.tan(s.yaw * RAD) + s.px * CS_UNIT_PX;
+            var y = D * Math.tan(s.pitch * RAD) + s.py * CS_UNIT_PX;
+            return {
+              x: x,
+              y: y,
+              roll: withRotation ? clampTilt(s.roll) : 0,
+              pitch: withRotation ? clampTilt(s.pitch) : 0,
+              yaw: withRotation ? clampTilt(s.yaw) : 0,
+              dolly: 1 + (s.pz * CS_UNIT_PX) / D,
+            };
+          }
+
+          // Overscan. The shake is a closed form, so the scale that keeps the
+          // plate covering the frame is computed per frame and the worst kept.
+          // Per frame, not worst-of-each-axis: peak pitch and peak yaw do not
+          // land on the same frame, and combining their maxima would zoom in
+          // for a frame that never exists. Three terms:
+          //   translation - the plate must reach 2*|offset| further
+          //   roll        - a rolled W x H rect covers W x H at
+          //                 (W cos r + H sin r) / W (and the H twin)
+          //   keystone    - under perspective the edge that tips AWAY shrinks
+          //                 toward the projection centre. The lever arm is NOT
+          //                 the plate half-size: CSS projects about the FRAME's
+          //                 perspective-origin, so a plate that is translated
+          //                 AND tipped swings its far corner about a point
+          //                 |offset| further out. Using (H/2 + |y|) instead of
+          //                 H/2 is what makes this hold on the wide-angle
+          //                 profiles; the earlier H/2 form tore a corner off
+          //                 the frame at 28mm. Verified by DOM hit-test probe
+          //                 across all nine profiles at intensity 1, 2 and 3.
+          var maxX = 0,
+            maxY = 0,
+            maxRoll = 0,
+            overscan = 1;
+          for (var f = 0; f <= Math.ceil(dur * fps); f++) {
+            var st = state(f / fps);
+            maxX = Math.max(maxX, Math.abs(st.x));
+            maxY = Math.max(maxY, Math.abs(st.y));
+            maxRoll = Math.max(maxRoll, Math.abs(st.roll));
+            var rr = Math.abs(st.roll) * RAD;
+            var need =
+              (Math.max(
+                (W * Math.cos(rr) + H * Math.sin(rr)) / W,
+                (H * Math.cos(rr) + W * Math.sin(rr)) / H,
+              ) *
+                Math.max(1 + (2 * Math.abs(st.x)) / W, 1 + (2 * Math.abs(st.y)) / H) *
+                (1 +
+                  ((H / 2 + Math.abs(st.y)) / D) * Math.sin(Math.abs(st.pitch) * RAD) +
+                  ((W / 2 + Math.abs(st.x)) / D) * Math.sin(Math.abs(st.yaw) * RAD))) /
+              Math.max(0.5, st.dolly);
+            overscan = Math.max(overscan, need);
+          }
+          overscan = opts.overscan === undefined ? overscan * 1.02 : Number(opts.overscan);
+
+          function apply(t) {
+            var s = state(t);
+            gsap.set(el, {
+              x: s.x,
+              y: s.y,
+              rotation: s.roll,
+              rotationX: s.pitch,
+              rotationY: -s.yaw,
+              scale: overscan * s.dolly,
+            });
+          }
+
+          // Seek-safe driver: GSAP writes `t` on every render, including
+          // seek(), so the setter runs on every frame. An onUpdate callback
+          // would NOT - GSAP suppresses events on seek and the shake would
+          // freeze on frame 0.
+          var driver = {};
+          var value = 0;
+          Object.defineProperty(driver, "t", {
+            get: function () {
+              return value;
+            },
+            set: function (next) {
+              value = next;
+              apply(next);
+            },
+          });
+          apply(0);
+          tl.to(driver, { t: dur, duration: dur, ease: "none" }, at);
+
+          return {
+            distance: D,
+            overscan: overscan,
+            peakX: maxX,
+            peakY: maxY,
+            peakRoll: maxRoll,
+          };
+        };
+
+        /* ---- self-preview (not part of the snippet) ----------------------- */
+        var vars =
+          window.__hyperframes && window.__hyperframes.getVariables
+            ? window.__hyperframes.getVariables()
+            : {};
+        var PROFILE = vars.shakeProfile || "handheld-normal-mild";
+        var INTENSITY = vars.shakeIntensity === undefined ? 1 : Number(vars.shakeIntensity);
+        var FREQUENCY = vars.shakeFrequency === undefined ? 1 : Number(vars.shakeFrequency);
+        var ROTATION = !(vars.shakeRotation === false || vars.shakeRotation === "false");
+
+        var tl = gsap.timeline({ paused: true });
+        var info = window.cameraShake(tl, "#cs-rig", {
+          profile: PROFILE,
+          intensity: INTENSITY,
+          frequency: FREQUENCY,
+          rotation: ROTATION,
+          duration: 6,
+          fps: 30,
+        });
+        var readout = document.getElementById("cs-readout");
+        if (readout && info) {
+          readout.textContent =
+            PROFILE +
+            "  |  " +
+            CS_LENS_MM[(CS_PROFILES[PROFILE] || CS_PROFILES["handheld-normal-mild"]).lens] +
+            "mm  |  x" +
+            INTENSITY +
+            " amp  x" +
+            FREQUENCY +
+            " freq  |  rot " +
+            (ROTATION ? "on" : "off") +
+            "  |  overscan " +
+            info.overscan.toFixed(3);
+        }
+        window.__timelines["camera-shake"] = tl;
+      })();
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "camera-shake.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/caption-blend-difference/caption-blend-difference.html b/docs/public/catalog/components/caption-blend-difference/caption-blend-difference.html
new file mode 100644
index 0000000000..dc4b54640a
--- /dev/null
+++ b/docs/public/catalog/components/caption-blend-difference/caption-blend-difference.html
@@ -0,0 +1,83 @@
+<!--
+  Blend Difference — auto-inverting captions via mix-blend-mode.
+
+  Text color inverts per-pixel against whatever is behind it:
+  white stays white on dark areas, flips to black on light areas.
+  On color video, white inverts to the complement (blue → orange,
+  red → cyan, green → magenta).
+
+  Setup:
+  1. The composition root (or a shared ancestor of both the video
+     and the caption layer) MUST have `isolation: isolate` so the
+     blend operates against sibling content, not the page background.
+  2. Add class="blend-difference" to any caption container.
+  3. Set caption text color to white. The blend mode handles the rest.
+
+  Works on any element — divs, spans, SVG text, even images.
+
+  Customize:
+  - --blend-caption-color: base text color (default white)
+  - Change blend mode via --blend-mode to 'exclusion' for a softer effect
+
+  Variants:
+  - .blend-difference         → standard per-pixel inversion
+  - .blend-difference-soft    → exclusion mode, less harsh contrast
+  - .blend-difference-screen  → text glows on dark, fades on light
+-->
+
+<style>
+  .blend-difference {
+    mix-blend-mode: var(--blend-mode, difference);
+    color: var(--blend-caption-color, white);
+    pointer-events: none;
+  }
+
+  .blend-difference-soft {
+    mix-blend-mode: exclusion;
+    color: var(--blend-caption-color, white);
+    pointer-events: none;
+  }
+
+  .blend-difference-screen {
+    mix-blend-mode: screen;
+    color: var(--blend-caption-color, white);
+    pointer-events: none;
+  }
+</style>
+
+<!--
+  Composition setup example:
+
+  <div data-composition-id="root" ... style="isolation: isolate;">
+
+    <video id="bg" data-start="0" data-duration="30" data-track-index="0"
+           src="video.mp4" muted playsinline></video>
+
+    <div class="clip blend-difference" data-start="0" data-duration="5" data-track-index="1"
+         style="position: absolute; inset: 0; z-index: 10;
+                display: flex; align-items: center; justify-content: center;">
+      <span style="font-size: 120px; font-weight: 800; text-transform: uppercase;">
+        YOUR CAPTION
+      </span>
+    </div>
+  </div>
+
+
+  Timeline integration — animate captions normally, blend mode is passive:
+
+  tl.from(".caption", {
+    y: 50, opacity: 0, duration: 0.6, ease: "expo.out"
+  }, 0.2);
+
+
+  Notes:
+  - isolation: isolate on the composition root is REQUIRED.
+    Without it, blend mode composes against the page background
+    (usually white or black) and you get no inversion.
+  - Works with any GSAP animation — the blend composites every frame.
+  - For caption containers with multiple text elements, apply the
+    class to the shared parent, not each text element individually.
+  - On pure black backgrounds, white text stays white (difference
+    of white and black = white). The effect is most visible when
+    the background has varied luminance or color.
+-->
diff --git a/docs/public/catalog/components/caption-blend-difference/demo.html b/docs/public/catalog/components/caption-blend-difference/demo.html
new file mode 100644
index 0000000000..dc4b54640a
--- /dev/null
+++ b/docs/public/catalog/components/caption-blend-difference/demo.html
@@ -0,0 +1,83 @@
+<!--
+  Blend Difference — auto-inverting captions via mix-blend-mode.
+
+  Text color inverts per-pixel against whatever is behind it:
+  white stays white on dark areas, flips to black on light areas.
+  On color video, white inverts to the complement (blue → orange,
+  red → cyan, green → magenta).
+
+  Setup:
+  1. The composition root (or a shared ancestor of both the video
+     and the caption layer) MUST have `isolation: isolate` so the
+     blend operates against sibling content, not the page background.
+  2. Add class="blend-difference" to any caption container.
+  3. Set caption text color to white. The blend mode handles the rest.
+
+  Works on any element — divs, spans, SVG text, even images.
+
+  Customize:
+  - --blend-caption-color: base text color (default white)
+  - Change blend mode via --blend-mode to 'exclusion' for a softer effect
+
+  Variants:
+  - .blend-difference         → standard per-pixel inversion
+  - .blend-difference-soft    → exclusion mode, less harsh contrast
+  - .blend-difference-screen  → text glows on dark, fades on light
+-->
+
+<style>
+  .blend-difference {
+    mix-blend-mode: var(--blend-mode, difference);
+    color: var(--blend-caption-color, white);
+    pointer-events: none;
+  }
+
+  .blend-difference-soft {
+    mix-blend-mode: exclusion;
+    color: var(--blend-caption-color, white);
+    pointer-events: none;
+  }
+
+  .blend-difference-screen {
+    mix-blend-mode: screen;
+    color: var(--blend-caption-color, white);
+    pointer-events: none;
+  }
+</style>
+
+<!--
+  Composition setup example:
+
+  <div data-composition-id="root" ... style="isolation: isolate;">
+
+    <video id="bg" data-start="0" data-duration="30" data-track-index="0"
+           src="video.mp4" muted playsinline></video>
+
+    <div class="clip blend-difference" data-start="0" data-duration="5" data-track-index="1"
+         style="position: absolute; inset: 0; z-index: 10;
+                display: flex; align-items: center; justify-content: center;">
+      <span style="font-size: 120px; font-weight: 800; text-transform: uppercase;">
+        YOUR CAPTION
+      </span>
+    </div>
+  </div>
+
+
+  Timeline integration — animate captions normally, blend mode is passive:
+
+  tl.from(".caption", {
+    y: 50, opacity: 0, duration: 0.6, ease: "expo.out"
+  }, 0.2);
+
+
+  Notes:
+  - isolation: isolate on the composition root is REQUIRED.
+    Without it, blend mode composes against the page background
+    (usually white or black) and you get no inversion.
+  - Works with any GSAP animation — the blend composites every frame.
+  - For caption containers with multiple text elements, apply the
+    class to the shared parent, not each text element individually.
+  - On pure black backgrounds, white text stays white (difference
+    of white and black = white). The effect is most visible when
+    the background has varied luminance or color.
+-->
diff --git a/docs/public/catalog/components/caption-camera-follow/__hf-variables-preview.html b/docs/public/catalog/components/caption-camera-follow/__hf-variables-preview.html
new file mode 100644
index 0000000000..049766c7f7
--- /dev/null
+++ b/docs/public/catalog/components/caption-camera-follow/__hf-variables-preview.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Camera Follow Captions variables preview</title>
+    <style>
+      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #0b0c0e; }
+      #hf-vars-root { position: relative; width: 1920px; height: 1080px; }
+      #hf-vars-mount { position: absolute; inset: 0; display: grid; place-items: center; }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  </head>
+  <body>
+    <div id="hf-vars-root" data-composition-id="caption-camera-follow-variables-preview" data-start="0" data-width="1920" data-height="1080" data-duration="5" data-fps="30">
+      <div id="hf-vars-mount" class="clip" data-composition-id="caption-camera-follow" data-composition-src="./caption-camera-follow.html" data-start="0" data-duration="5" data-track-index="0" data-width="1920" data-height="1080"></div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["caption-camera-follow-variables-preview"] = gsap.timeline({ paused: true });
+    </script>
+<script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "caption-camera-follow.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/caption-camera-follow/caption-camera-follow.html b/docs/public/catalog/components/caption-camera-follow/caption-camera-follow.html
new file mode 100644
index 0000000000..0eee029a36
--- /dev/null
+++ b/docs/public/catalog/components/caption-camera-follow/caption-camera-follow.html
@@ -0,0 +1,431 @@
+<!doctype html>
+<!--
+  caption-camera-follow: the words do not move, the camera does.
+
+  One sentence. Layout is self similar: every new word is sized as a fraction of the
+  bounding box of everything written so far, and is dropped either to the right of that
+  box or onto a new line below it, alternating. Because each word is measured against a
+  box that keeps growing, the box grows geometrically, so the camera pulls back at a
+  steady exponential rate and every word arrives at roughly the same size on screen. Old
+  words stay lit and simply become small, piling up toward the top left the way
+  handwriting fills a page. The last beat carries the same pull back all the way out
+  until the whole sentence is readable at once.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and applies it before the timeline is built.
+  Duration, word order and cadence are untouched by them.
+
+    - accent (gold | green | blue | violet, default gold): the colour of the
+      highlighted words.
+    - framing (tight | standard | wide, default standard): the air the camera
+      leaves around the written block. tight lands each word larger in frame,
+      wide sits further back. Every move and the closing pull back scale
+      together, so the shot stays one continuous camera.
+    - smear (off | subtle | standard | heavy, default standard): scales the
+      radial motion blur each move carries. off renders every frame sharp.
+
+  On every default the result is identical to the original: gold highlights, a
+  1.36 margin around the block and a peak smear of 2.6 percent of frame width.
+
+  Every ease is a cubic bezier written out by hand and solved in this file. No preset is
+  used anywhere. Motion blur is radial, the way it reads in real camera footage: each word
+  carries its own blur share, scaled by how far that word sits from the centre of the move,
+  so the frame smears outward from the point the camera is pushing toward. One shared
+  amount variable is tweened per move and every word multiplies it by its own distance
+  share, so the whole radial pulse costs one tween instead of fourteen.
+
+  Mount contract: everything lives inside <template>, styles and scripts included, and the
+  scripts sit INSIDE the composition root. A host clones template content into its own
+  mount and only runs scripts found inside the root; markup left outside is copied without
+  its behaviour, which renders a black card with no timeline at all.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Camera Follow Captions</title>
+  </head>
+  <body>
+    <template>
+      <div
+        id="root"
+        class="clip cf-root"
+        data-composition-id="caption-camera-follow"
+        data-duration="9"
+        data-fps="30"
+        data-composition-variables='[
+          { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Colour of the highlighted words. gold is the original.", "default": "gold", "options": [{ "value": "gold", "label": "Gold" }, { "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+          { "id": "framing", "type": "enum", "role": "style", "label": "Framing", "description": "Air the camera leaves around the written block, so the words land larger or smaller in frame.", "default": "standard", "options": [{ "value": "tight", "label": "Tight" }, { "value": "standard", "label": "Standard" }, { "value": "wide", "label": "Wide" }] },
+          { "id": "smear", "type": "enum", "role": "style", "label": "Smear", "description": "Scales the radial motion blur each camera move carries, from none to a heavy streak.", "default": "standard", "options": [{ "value": "off", "label": "Off" }, { "value": "subtle", "label": "Subtle" }, { "value": "standard", "label": "Standard" }, { "value": "heavy", "label": "Heavy" }] }
+        ]'
+      >
+        <style>
+          [data-composition-id="caption-camera-follow"] {
+            --cf-accent: #ffd84d;
+            --ink: #ffffff;
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            background: transparent;
+            pointer-events: none;
+          }
+          #cf-stage {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+          }
+          #cf-world {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 0;
+            height: 0;
+            --amt: 0px;
+          }
+          .cf-word {
+            position: absolute;
+            white-space: nowrap;
+            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+            font-weight: 700;
+            text-transform: uppercase;
+            letter-spacing: 0.005em;
+            line-height: 0.78;
+            color: var(--ink);
+            opacity: 0;
+            --k: 0;
+            filter: blur(calc(var(--k) * var(--amt)));
+          }
+          .cf-word.is-accent {
+            color: var(--cf-accent);
+          }
+          #cf-vignette {
+            position: absolute;
+            inset: 0;
+            background: radial-gradient(
+              ellipse at 50% 50%,
+              rgba(0, 0, 0, 0) 42%,
+              rgba(0, 0, 0, 0.55) 100%
+            );
+          }
+        </style>
+
+        <div id="cf-stage">
+          <div id="cf-world"></div>
+        </div>
+        <div id="cf-vignette"></div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            gsap.defaults({ immediateRender: false });
+
+            /* Cubic bezier solver. Newton first, bisection as the fallback, so it is
+               exact and deterministic for every input. */
+            function bezier(x1, y1, x2, y2) {
+              function curve(t, a1, a2) {
+                var A = 1 - 3 * a2 + 3 * a1;
+                var B = 3 * a2 - 6 * a1;
+                var C = 3 * a1;
+                return ((A * t + B) * t + C) * t;
+              }
+              function slope(t, a1, a2) {
+                var A = 1 - 3 * a2 + 3 * a1;
+                var B = 3 * a2 - 6 * a1;
+                var C = 3 * a1;
+                return (3 * A * t + 2 * B) * t + C;
+              }
+              return function (p) {
+                if (p <= 0) return 0;
+                if (p >= 1) return 1;
+                var t = p;
+                for (var i = 0; i < 8; i++) {
+                  var d = slope(t, x1, x2);
+                  if (Math.abs(d) < 1e-6) break;
+                  var e = curve(t, x1, x2) - p;
+                  if (Math.abs(e) < 1e-7) return curve(t, y1, y2);
+                  t -= e / d;
+                }
+                var lo = 0;
+                var hi = 1;
+                t = p;
+                for (var j = 0; j < 24; j++) {
+                  var x = curve(t, x1, x2);
+                  if (Math.abs(x - p) < 1e-7) break;
+                  if (x > p) hi = t;
+                  else lo = t;
+                  t = (lo + hi) / 2;
+                }
+                return curve(t, y1, y2);
+              };
+            }
+
+            /* Leaves the mark fast, spends most of its time arriving. */
+            var EASE_STEP = bezier(0.31, 0, 0.11, 1);
+            /* The closing pull back: slower to leave, glides a long way out. */
+            var EASE_WIDE = bezier(0.42, 0, 0.14, 1);
+            /* Word ink coming up. */
+            var EASE_INK = bezier(0.2, 0.7, 0.3, 1);
+            /* Blur rising into the move and wiped off out of it. */
+            var EASE_BLUR_UP = bezier(0.2, 0.8, 0.4, 1);
+            var EASE_BLUR_DOWN = bezier(0.5, 0, 0.2, 1);
+
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            /* Unrecognised overrides return to their declared defaults. */
+            function pick(table, value, fallback) {
+              return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+            }
+
+            var ACCENTS = {
+              gold: "#ffd84d",
+              green: "#34d399",
+              blue: "#38bdf8",
+              violet: "#a78bfa",
+            };
+            /* Framing scales the margin every camera pose is fitted with, so one
+               number moves the whole shot in or out without touching cadence. */
+            var FRAMINGS = { tight: 0.82, standard: 1, wide: 1.25 };
+            var SMEARS = { off: 0, subtle: 0.5, standard: 1, heavy: 1.9 };
+
+            var ACCENT = ACCENTS[pick(ACCENTS, vars.accent, "gold")];
+            var FRAMING = FRAMINGS[pick(FRAMINGS, vars.framing, "standard")];
+            var SMEAR = SMEARS[pick(SMEARS, vars.smear, "standard")];
+
+            var DUR = 9;
+            var STEP = 0.52;
+            var MOVE = 0.4;
+
+            var WORDS = [
+              { text: "write" },
+              { text: "the" },
+              { text: "html", accent: true },
+              { text: "and" },
+              { text: "the" },
+              { text: "video", accent: true },
+              { text: "renders" },
+              { text: "itself" },
+              { text: "no" },
+              { text: "timeline" },
+              { text: "no" },
+              { text: "keyframes", accent: true },
+              { text: "just" },
+              { text: "code", accent: true },
+            ];
+
+            var world = document.getElementById("cf-world");
+            var stage = document.getElementById("cf-stage");
+            /* The runtime strips the root id on clone, so reach the root through a
+               descendant instead of getElementById. */
+            var root = stage.parentElement;
+            var FRAME_W = root.clientWidth || 1080;
+            var FRAME_H = root.clientHeight || 1920;
+            root.style.setProperty("--cf-accent", ACCENT);
+
+            /* Base size is picked so the opening shot sits near 1:1. Everything after it
+               is a pull back, so the world is only ever scaled down and type stays crisp. */
+            var BASE = Math.max(FRAME_W, FRAME_H) * 0.16;
+            /* Each new word is this fraction of the current box height. */
+            var RATIO = 0.72;
+            var MARGIN = 1.36 * FRAMING;
+
+            var ruler = document.createElement("div");
+            ruler.style.cssText =
+              "position:absolute;left:-99999px;top:0;white-space:nowrap;visibility:hidden;" +
+              'font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;' +
+              "text-transform:uppercase;letter-spacing:0.005em;line-height:0.78";
+            world.appendChild(ruler);
+
+            var box = null;
+            WORDS.forEach(function (wd, i) {
+              var fs = i === 0 ? BASE : (box.y1 - box.y0) * RATIO;
+              ruler.style.fontSize = fs + "px";
+              ruler.textContent = wd.text;
+              var w = ruler.getBoundingClientRect().width;
+              var h = fs * 0.78;
+              var gap = fs * 0.07;
+
+              var x, y;
+              if (i === 0) {
+                x = 0;
+                y = 0;
+              } else if ((box.x1 - box.x0) / (box.y1 - box.y0) < FRAME_W / FRAME_H) {
+                /* block is narrower than the frame, so grow sideways: to the right of
+                   everything, sitting on the same baseline */
+                x = box.x1 + gap;
+                y = box.y1 - h;
+              } else {
+                /* block is already wide enough, so grow downward: onto a new line under
+                   everything, left edges aligned */
+                x = box.x0;
+                y = box.y1 + gap;
+              }
+
+              wd.fs = fs;
+              wd.x = x;
+              wd.y = y;
+
+              box = box
+                ? {
+                    x0: Math.min(box.x0, x),
+                    y0: Math.min(box.y0, y),
+                    x1: Math.max(box.x1, x + w),
+                    y1: Math.max(box.y1, y + h),
+                  }
+                : { x0: x, y0: y, x1: x + w, y1: y + h };
+              wd.box = { x0: box.x0, y0: box.y0, x1: box.x1, y1: box.y1 };
+            });
+            world.removeChild(ruler);
+
+            var FULL = box;
+
+            function poseFor(b, margin) {
+              var bw = (b.x1 - b.x0) * margin;
+              var bh = (b.y1 - b.y0) * margin;
+              var s = Math.min(FRAME_W / bw, FRAME_H / bh);
+              return {
+                x: FRAME_W / 2 - (s * (b.x0 + b.x1)) / 2,
+                y: FRAME_H / 2 - (s * (b.y0 + b.y1)) / 2,
+                scale: s,
+              };
+            }
+
+            var els = WORDS.map(function (wd) {
+              var el = document.createElement("div");
+              el.className = "cf-word" + (wd.accent ? " is-accent" : "");
+              el.textContent = wd.text;
+              el.style.left = wd.x + "px";
+              el.style.top = wd.y + "px";
+              el.style.fontSize = wd.fs + "px";
+              world.appendChild(el);
+              return el;
+            });
+
+            /* Re-derive every framing box from what the browser actually laid out, so
+               the camera is fitted to real ink and never to arithmetic that drifted. */
+            var run = null;
+            els.forEach(function (el, i) {
+              var r = {
+                x0: el.offsetLeft,
+                y0: el.offsetTop,
+                x1: el.offsetLeft + el.offsetWidth,
+                y1: el.offsetTop + el.offsetHeight,
+              };
+              run = run
+                ? {
+                    x0: Math.min(run.x0, r.x0),
+                    y0: Math.min(run.y0, r.y0),
+                    x1: Math.max(run.x1, r.x1),
+                    y1: Math.max(run.y1, r.y1),
+                  }
+                : r;
+              WORDS[i].box = { x0: run.x0, y0: run.y0, x1: run.x1, y1: run.y1 };
+            });
+            FULL = run;
+
+            /* Rest state is pinned outside the timeline. */
+            var first = poseFor(WORDS[0].box, MARGIN);
+            gsap.set(world, {
+              transformOrigin: "0 0",
+              x: first.x,
+              y: first.y,
+              scale: first.scale,
+            });
+            gsap.set(els, { opacity: 0, "--k": 0 });
+            gsap.set(world, { "--amt": "0px" });
+            /* The first word is already on the page when the shot opens, so frame zero
+               is never empty. */
+            gsap.set(els[0], { opacity: 1 });
+
+            var tl = gsap.timeline({ paused: true });
+            /* Peak smear at the rim of the frame, in screen pixels. */
+            var BLUR = FRAME_W * 0.026 * SMEAR;
+            var HALF_DIAG = Math.sqrt(FRAME_W * FRAME_W + FRAME_H * FRAME_H) / 2;
+
+            /* Radial blur, the way a real zoom smears: a point far from the centre of
+               the move sweeps across more of the frame than one sitting on it, so it
+               streaks more. Each word gets its own share, --k, of one shared amount,
+               --amt, which is the only thing that animates. The share is fixed for the
+               length of a move and set with the camera, so this stays one tween per
+               move rather than one per word per move. --amt is authored in world units,
+               because a filter on a scaled child is applied before the scale, so the
+               screen blur has to be divided back out by the camera scale. */
+            function smear(centre, scale, count, at, up, down, peak) {
+              for (var j = 0; j < count; j++) {
+                var el = els[j];
+                var cx = el.offsetLeft + el.offsetWidth / 2;
+                var cy = el.offsetTop + el.offsetHeight / 2;
+                var d =
+                  (scale *
+                    Math.sqrt(
+                      (cx - centre.x) * (cx - centre.x) + (cy - centre.y) * (cy - centre.y),
+                    )) /
+                  HALF_DIAG;
+                tl.set(el, { "--k": (0.2 + 1.15 * Math.min(1, d)).toFixed(3) }, at);
+              }
+              var amt = peak / scale;
+              tl.fromTo(
+                world,
+                { "--amt": "0px" },
+                { "--amt": amt + "px", duration: up, ease: EASE_BLUR_UP },
+                at,
+              );
+              tl.to(world, { "--amt": "0px", duration: down, ease: EASE_BLUR_DOWN }, at + up);
+            }
+
+            WORDS.forEach(function (wd, i) {
+              var t = i * STEP;
+              if (i === 0) return;
+
+              tl.fromTo(els[i], { opacity: 0 }, { opacity: 1, duration: 0.16, ease: EASE_INK }, t);
+
+              var p = poseFor(wd.box, MARGIN);
+              tl.to(world, { x: p.x, y: p.y, scale: p.scale, duration: MOVE, ease: EASE_STEP }, t);
+
+              smear(
+                { x: (wd.box.x0 + wd.box.x1) / 2, y: (wd.box.y0 + wd.box.y1) / 2 },
+                p.scale,
+                i + 1,
+                t,
+                MOVE * 0.24,
+                MOVE * 0.44,
+                BLUR,
+              );
+            });
+
+            /* The resolve: the same pull back, carried all the way out. */
+            var wide = poseFor(FULL, 1.2 * FRAMING);
+            var wideAt = (WORDS.length - 1) * STEP + 0.62;
+            tl.to(
+              world,
+              {
+                x: wide.x,
+                y: wide.y,
+                scale: wide.scale,
+                duration: 0.94,
+                ease: EASE_WIDE,
+              },
+              wideAt,
+            );
+            smear(
+              { x: (FULL.x0 + FULL.x1) / 2, y: (FULL.y0 + FULL.y1) / 2 },
+              wide.scale,
+              els.length,
+              wideAt,
+              0.3,
+              0.58,
+              BLUR * 0.8,
+            );
+
+            tl.set({}, {}, DUR);
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines["caption-camera-follow"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/caption-camera-follow/demo.html b/docs/public/catalog/components/caption-camera-follow/demo.html
new file mode 100644
index 0000000000..cde4f3c8f2
--- /dev/null
+++ b/docs/public/catalog/components/caption-camera-follow/demo.html
@@ -0,0 +1,400 @@
+<!doctype html>
+<!--
+  caption-camera-follow: the words do not move, the camera does.
+
+  One sentence. Layout is self similar: every new word is sized as a fraction of the
+  bounding box of everything written so far, and is dropped either to the right of that
+  box or onto a new line below it, alternating. Because each word is measured against a
+  box that keeps growing, the box grows geometrically, so the camera pulls back at a
+  steady exponential rate and every word arrives at roughly the same size on screen. Old
+  words stay lit and simply become small, piling up toward the top left the way
+  handwriting fills a page. The last beat carries the same pull back all the way out
+  until the whole sentence is readable at once.
+
+  Every ease is a cubic bezier written out by hand and solved in this file. No preset is
+  used anywhere. Motion blur is radial, the way it reads in real camera footage: each word
+  carries its own blur share, scaled by how far that word sits from the centre of the move,
+  so the frame smears outward from the point the camera is pushing toward. One shared
+  amount variable is tweened per move and every word multiplies it by its own distance
+  share, so the whole radial pulse costs one tween instead of fourteen.
+
+  Mount contract: everything lives inside <template>, styles and scripts included, and the
+  scripts sit INSIDE the composition root. A host clones template content into its own
+  mount and only runs scripts found inside the root; markup left outside is copied without
+  its behaviour, which renders a black card with no timeline at all.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Camera Follow Captions - Demo</title>
+  </head>
+  <body>
+    <template>
+      <div
+        id="root"
+        class="clip cf-root"
+        data-composition-id="caption-camera-follow"
+        data-duration="9"
+        data-fps="30"
+      >
+        <style>
+          .cf-root {
+            --accent: #ffd84d;
+            --ink: #ffffff;
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            background: #0b0b0d;
+            pointer-events: none;
+          }
+          #cf-stage {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+          }
+          #cf-world {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 0;
+            height: 0;
+            --amt: 0px;
+          }
+          .cf-word {
+            position: absolute;
+            white-space: nowrap;
+            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+            font-weight: 700;
+            text-transform: uppercase;
+            letter-spacing: 0.005em;
+            line-height: 0.78;
+            color: var(--ink);
+            opacity: 0;
+            --k: 0;
+            filter: blur(calc(var(--k) * var(--amt)));
+          }
+          .cf-word.is-accent {
+            color: var(--accent);
+          }
+          #cf-vignette {
+            position: absolute;
+            inset: 0;
+            background: radial-gradient(
+              ellipse at 50% 50%,
+              rgba(0, 0, 0, 0) 42%,
+              rgba(0, 0, 0, 0.55) 100%
+            );
+          }
+        </style>
+
+        <div id="cf-stage">
+          <div id="cf-world"></div>
+        </div>
+        <div id="cf-vignette"></div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            gsap.defaults({ immediateRender: false });
+
+            /* Cubic bezier solver. Newton first, bisection as the fallback, so it is
+               exact and deterministic for every input. */
+            function bezier(x1, y1, x2, y2) {
+              function curve(t, a1, a2) {
+                var A = 1 - 3 * a2 + 3 * a1;
+                var B = 3 * a2 - 6 * a1;
+                var C = 3 * a1;
+                return ((A * t + B) * t + C) * t;
+              }
+              function slope(t, a1, a2) {
+                var A = 1 - 3 * a2 + 3 * a1;
+                var B = 3 * a2 - 6 * a1;
+                var C = 3 * a1;
+                return (3 * A * t + 2 * B) * t + C;
+              }
+              return function (p) {
+                if (p <= 0) return 0;
+                if (p >= 1) return 1;
+                var t = p;
+                for (var i = 0; i < 8; i++) {
+                  var d = slope(t, x1, x2);
+                  if (Math.abs(d) < 1e-6) break;
+                  var e = curve(t, x1, x2) - p;
+                  if (Math.abs(e) < 1e-7) return curve(t, y1, y2);
+                  t -= e / d;
+                }
+                var lo = 0;
+                var hi = 1;
+                t = p;
+                for (var j = 0; j < 24; j++) {
+                  var x = curve(t, x1, x2);
+                  if (Math.abs(x - p) < 1e-7) break;
+                  if (x > p) hi = t;
+                  else lo = t;
+                  t = (lo + hi) / 2;
+                }
+                return curve(t, y1, y2);
+              };
+            }
+
+            /* Leaves the mark fast, spends most of its time arriving. */
+            var EASE_STEP = bezier(0.31, 0, 0.11, 1);
+            /* The closing pull back: slower to leave, glides a long way out. */
+            var EASE_WIDE = bezier(0.42, 0, 0.14, 1);
+            /* Word ink coming up. */
+            var EASE_INK = bezier(0.2, 0.7, 0.3, 1);
+            /* Blur rising into the move and wiped off out of it. */
+            var EASE_BLUR_UP = bezier(0.2, 0.8, 0.4, 1);
+            var EASE_BLUR_DOWN = bezier(0.5, 0, 0.2, 1);
+
+            var DUR = 9;
+            var STEP = 0.52;
+            var MOVE = 0.4;
+
+            var WORDS = [
+              { text: "write" },
+              { text: "the" },
+              { text: "html", accent: true },
+              { text: "and" },
+              { text: "the" },
+              { text: "video", accent: true },
+              { text: "renders" },
+              { text: "itself" },
+              { text: "no" },
+              { text: "timeline" },
+              { text: "no" },
+              { text: "keyframes", accent: true },
+              { text: "just" },
+              { text: "code", accent: true },
+            ];
+
+            var world = document.getElementById("cf-world");
+            var stage = document.getElementById("cf-stage");
+            /* The runtime strips the root id on clone, so reach the root through a
+               descendant instead of getElementById. */
+            var root = stage.parentElement;
+            var FRAME_W = root.clientWidth || 1080;
+            var FRAME_H = root.clientHeight || 1920;
+
+            /* Base size is picked so the opening shot sits near 1:1. Everything after it
+               is a pull back, so the world is only ever scaled down and type stays crisp. */
+            var BASE = Math.max(FRAME_W, FRAME_H) * 0.16;
+            /* Each new word is this fraction of the current box height. */
+            var RATIO = 0.72;
+            var MARGIN = 1.36;
+
+            var ruler = document.createElement("div");
+            ruler.style.cssText =
+              "position:absolute;left:-99999px;top:0;white-space:nowrap;visibility:hidden;" +
+              'font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;' +
+              "text-transform:uppercase;letter-spacing:0.005em;line-height:0.78";
+            world.appendChild(ruler);
+
+            var box = null;
+            WORDS.forEach(function (wd, i) {
+              var fs = i === 0 ? BASE : (box.y1 - box.y0) * RATIO;
+              ruler.style.fontSize = fs + "px";
+              ruler.textContent = wd.text;
+              var w = ruler.getBoundingClientRect().width;
+              var h = fs * 0.78;
+              var gap = fs * 0.07;
+
+              var x, y;
+              if (i === 0) {
+                x = 0;
+                y = 0;
+              } else if ((box.x1 - box.x0) / (box.y1 - box.y0) < FRAME_W / FRAME_H) {
+                /* block is narrower than the frame, so grow sideways: to the right of
+                   everything, sitting on the same baseline */
+                x = box.x1 + gap;
+                y = box.y1 - h;
+              } else {
+                /* block is already wide enough, so grow downward: onto a new line under
+                   everything, left edges aligned */
+                x = box.x0;
+                y = box.y1 + gap;
+              }
+
+              wd.fs = fs;
+              wd.x = x;
+              wd.y = y;
+
+              box = box
+                ? {
+                    x0: Math.min(box.x0, x),
+                    y0: Math.min(box.y0, y),
+                    x1: Math.max(box.x1, x + w),
+                    y1: Math.max(box.y1, y + h),
+                  }
+                : { x0: x, y0: y, x1: x + w, y1: y + h };
+              wd.box = { x0: box.x0, y0: box.y0, x1: box.x1, y1: box.y1 };
+            });
+            world.removeChild(ruler);
+
+            var FULL = box;
+
+            function poseFor(b, margin) {
+              var bw = (b.x1 - b.x0) * margin;
+              var bh = (b.y1 - b.y0) * margin;
+              var s = Math.min(FRAME_W / bw, FRAME_H / bh);
+              return {
+                x: FRAME_W / 2 - (s * (b.x0 + b.x1)) / 2,
+                y: FRAME_H / 2 - (s * (b.y0 + b.y1)) / 2,
+                scale: s,
+              };
+            }
+
+            var els = WORDS.map(function (wd) {
+              var el = document.createElement("div");
+              el.className = "cf-word" + (wd.accent ? " is-accent" : "");
+              el.textContent = wd.text;
+              el.style.left = wd.x + "px";
+              el.style.top = wd.y + "px";
+              el.style.fontSize = wd.fs + "px";
+              world.appendChild(el);
+              return el;
+            });
+
+            /* Re-derive every framing box from what the browser actually laid out, so
+               the camera is fitted to real ink and never to arithmetic that drifted. */
+            var run = null;
+            els.forEach(function (el, i) {
+              var r = {
+                x0: el.offsetLeft,
+                y0: el.offsetTop,
+                x1: el.offsetLeft + el.offsetWidth,
+                y1: el.offsetTop + el.offsetHeight,
+              };
+              run = run
+                ? {
+                    x0: Math.min(run.x0, r.x0),
+                    y0: Math.min(run.y0, r.y0),
+                    x1: Math.max(run.x1, r.x1),
+                    y1: Math.max(run.y1, r.y1),
+                  }
+                : r;
+              WORDS[i].box = { x0: run.x0, y0: run.y0, x1: run.x1, y1: run.y1 };
+            });
+            FULL = run;
+
+            /* Rest state is pinned outside the timeline. */
+            var first = poseFor(WORDS[0].box, MARGIN);
+            gsap.set(world, {
+              transformOrigin: "0 0",
+              x: first.x,
+              y: first.y,
+              scale: first.scale,
+            });
+            gsap.set(els, { opacity: 0, "--k": 0 });
+            gsap.set(world, { "--amt": "0px" });
+            /* The first word is already on the page when the shot opens, so frame zero
+               is never empty. */
+            gsap.set(els[0], { opacity: 1 });
+
+            var tl = gsap.timeline({ paused: true });
+            /* Peak smear at the rim of the frame, in screen pixels. */
+            var BLUR = FRAME_W * 0.026;
+            var HALF_DIAG = Math.sqrt(FRAME_W * FRAME_W + FRAME_H * FRAME_H) / 2;
+
+            /* Radial blur, the way a real zoom smears: a point far from the centre of
+               the move sweeps across more of the frame than one sitting on it, so it
+               streaks more. Each word gets its own share, --k, of one shared amount,
+               --amt, which is the only thing that animates. The share is fixed for the
+               length of a move and set with the camera, so this stays one tween per
+               move rather than one per word per move. --amt is authored in world units,
+               because a filter on a scaled child is applied before the scale, so the
+               screen blur has to be divided back out by the camera scale. */
+            function smear(centre, scale, count, at, up, down, peak) {
+              for (var j = 0; j < count; j++) {
+                var el = els[j];
+                var cx = el.offsetLeft + el.offsetWidth / 2;
+                var cy = el.offsetTop + el.offsetHeight / 2;
+                var d =
+                  (scale *
+                    Math.sqrt(
+                      (cx - centre.x) * (cx - centre.x) + (cy - centre.y) * (cy - centre.y),
+                    )) /
+                  HALF_DIAG;
+                tl.set(el, { "--k": (0.2 + 1.15 * Math.min(1, d)).toFixed(3) }, at);
+              }
+              var amt = peak / scale;
+              tl.fromTo(
+                world,
+                { "--amt": "0px" },
+                { "--amt": amt + "px", duration: up, ease: EASE_BLUR_UP },
+                at,
+              );
+              tl.to(world, { "--amt": "0px", duration: down, ease: EASE_BLUR_DOWN }, at + up);
+            }
+
+            WORDS.forEach(function (wd, i) {
+              var t = i * STEP;
+              if (i === 0) return;
+
+              tl.fromTo(els[i], { opacity: 0 }, { opacity: 1, duration: 0.16, ease: EASE_INK }, t);
+
+              var p = poseFor(wd.box, MARGIN);
+              tl.to(world, { x: p.x, y: p.y, scale: p.scale, duration: MOVE, ease: EASE_STEP }, t);
+
+              smear(
+                { x: (wd.box.x0 + wd.box.x1) / 2, y: (wd.box.y0 + wd.box.y1) / 2 },
+                p.scale,
+                i + 1,
+                t,
+                MOVE * 0.24,
+                MOVE * 0.44,
+                BLUR,
+              );
+            });
+
+            /* The resolve: the same pull back, carried all the way out. */
+            var wide = poseFor(FULL, 1.2);
+            var wideAt = (WORDS.length - 1) * STEP + 0.62;
+            tl.to(
+              world,
+              {
+                x: wide.x,
+                y: wide.y,
+                scale: wide.scale,
+                duration: 0.94,
+                ease: EASE_WIDE,
+              },
+              wideAt,
+            );
+            smear(
+              { x: (FULL.x0 + FULL.x1) / 2, y: (FULL.y0 + FULL.y1) / 2 },
+              wide.scale,
+              els.length,
+              wideAt,
+              0.3,
+              0.58,
+              BLUR * 0.8,
+            );
+
+            tl.set({}, {}, DUR);
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines["caption-camera-follow"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "caption-camera-follow.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/caption-clip-wipe/caption-clip-wipe.html b/docs/public/catalog/components/caption-clip-wipe/caption-clip-wipe.html
new file mode 100644
index 0000000000..9b5d55e599
--- /dev/null
+++ b/docs/public/catalog/components/caption-clip-wipe/caption-clip-wipe.html
@@ -0,0 +1,226 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Clip Wipe</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:wght@800&display=swap"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: transparent;
+      }
+      #clip-wipe {
+        pointer-events: none;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent;
+      }
+      .wp-overlay {
+        position: absolute;
+        inset: 0;
+        background: transparent;
+        z-index: 1;
+        pointer-events: none;
+      }
+      #wp-container {
+        position: absolute;
+        inset: 0;
+        z-index: 10;
+        pointer-events: none;
+      }
+      .wp-group {
+        position: absolute;
+        bottom: 120px;
+        left: 0;
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: flex-end;
+        justify-content: center;
+        gap: 24px;
+        padding: 0 100px;
+        visibility: hidden;
+      }
+      .wp-word {
+        font-family: "Poppins", sans-serif;
+        font-weight: 800;
+        font-size: 88px;
+        text-transform: uppercase;
+        color: #ffffff;
+        display: inline-block;
+        letter-spacing: 0.04em;
+        line-height: 1;
+        clip-path: inset(0 100% 0 0);
+        will-change: clip-path, color, opacity;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="clip-wipe"
+      data-composition-id="caption-clip-wipe"
+      data-timeline-locked
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="wp-overlay"></div>
+      <div id="wp-container"></div>
+    </div>
+
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        var _fitCanvas = document.createElement("canvas");
+        var _fitCtx = _fitCanvas.getContext("2d");
+        function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {
+          var size = baseFontSize;
+          var minSize = Math.floor(baseFontSize * 0.45);
+          while (size > minSize) {
+            _fitCtx.font = fontWeight + " " + size + "px " + fontFamily;
+            if (_fitCtx.measureText(text).width <= maxWidth) return size;
+            size -= 2;
+          }
+          return minSize;
+        }
+
+        var WORDS = [
+          { text: "Every", start: 0.0, end: 0.3 },
+          { text: "great", start: 0.3, end: 0.55 },
+          { text: "video", start: 0.55, end: 0.85 },
+          { text: "starts", start: 0.85, end: 1.1 },
+          { text: "with", start: 1.1, end: 1.25 },
+          { text: "a", start: 1.25, end: 1.35 },
+          { text: "single", start: 1.35, end: 1.65 },
+          { text: "frame.", start: 1.65, end: 2.0 },
+          { text: "HyperFrames", start: 2.1, end: 2.65 },
+          { text: "lets", start: 2.65, end: 2.85 },
+          { text: "you", start: 2.85, end: 2.95 },
+          { text: "write", start: 2.95, end: 3.15 },
+          { text: "HTML", start: 3.15, end: 3.55 },
+          { text: "and", start: 3.55, end: 3.65 },
+          { text: "render", start: 3.65, end: 3.95 },
+          { text: "professional", start: 3.95, end: 4.45 },
+          { text: "video.", start: 4.45, end: 4.8 },
+          { text: "No", start: 4.9, end: 5.05 },
+          { text: "timeline.", start: 5.05, end: 5.45 },
+          { text: "No", start: 5.5, end: 5.65 },
+          { text: "drag", start: 5.65, end: 5.85 },
+          { text: "and", start: 5.85, end: 5.95 },
+          { text: "drop.", start: 5.95, end: 6.25 },
+          { text: "Just", start: 6.35, end: 6.55 },
+          { text: "code", start: 6.55, end: 6.8 },
+          { text: "that", start: 6.8, end: 6.95 },
+          { text: "becomes", start: 6.95, end: 7.3 },
+          { text: "cinema.", start: 7.3, end: 7.7 },
+        ];
+
+        var KEYWORDS = new Set([8, 12, 15, 24, 27]); // HyperFrames, HTML, professional, code, cinema.
+
+        var RAW_GROUPS = [
+          [0, 3],
+          [4, 7],
+          [8, 8],
+          [9, 12],
+          [13, 15],
+          [16, 16],
+          [17, 19],
+          [20, 22],
+          [23, 24],
+          [25, 27],
+        ];
+        var GROUPS = RAW_GROUPS.map(function (pair, gi) {
+          var ws = pair[0],
+            we = pair[1];
+          var nextStart = gi + 1 < RAW_GROUPS.length ? WORDS[RAW_GROUPS[gi + 1][0]].start : 8.0;
+          var gEnd = Math.min(WORDS[we].end + 0.5, nextStart - 0.05);
+          return { wordStart: ws, wordEnd: we, start: WORDS[ws].start, end: gEnd };
+        });
+
+        var container = document.getElementById("wp-container");
+        var tl = gsap.timeline({ paused: true });
+
+        GROUPS.forEach(function (g, gi) {
+          var groupWords = WORDS.slice(g.wordStart, g.wordEnd + 1);
+          var grp = document.createElement("div");
+          grp.className = "wp-group";
+          grp.id = "wp-grp-" + gi;
+
+          var groupText = groupWords
+            .map(function (w) {
+              return w.text.toUpperCase();
+            })
+            .join(" ");
+          var computedSize = fitFontSize(groupText, 88, "800", "Poppins", 1720);
+
+          groupWords.forEach(function (w, i) {
+            var wi = g.wordStart + i;
+            var span = document.createElement("span");
+            span.className = "wp-word";
+            span.id = "wp-w-" + wi;
+            span.textContent = w.text.toUpperCase();
+            span.style.fontSize = computedSize + "px";
+            grp.appendChild(span);
+          });
+
+          container.appendChild(grp);
+
+          tl.set(grp, { visibility: "visible" }, g.start);
+
+          groupWords.forEach(function (w, i) {
+            var wi = g.wordStart + i;
+            var wordEl = document.getElementById("wp-w-" + wi);
+            var isKW = KEYWORDS.has(wi);
+
+            tl.to(
+              wordEl,
+              { clipPath: "inset(0 0% 0 0)", duration: 0.3, ease: "power2.out" },
+              w.start,
+            );
+            if (isKW) {
+              tl.to(wordEl, { color: "#FFD700", duration: 0.05 }, w.start + 0.1);
+            }
+            tl.to(wordEl, { color: "rgba(255,255,255,0.4)", duration: 0.2 }, w.end);
+          });
+
+          var wordEls = grp.querySelectorAll(".wp-word");
+          tl.to(
+            wordEls,
+            {
+              clipPath: "inset(0 0% 0 100%)",
+              duration: 0.25,
+              stagger: 0.04,
+              ease: "power2.in",
+            },
+            g.end - 0.2,
+          );
+          tl.set(grp, { visibility: "hidden", opacity: 0 }, g.end);
+        });
+
+        tl.seek(0);
+        window.__timelines["caption-clip-wipe"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/caption-clip-wipe/demo.html b/docs/public/catalog/components/caption-clip-wipe/demo.html
new file mode 100644
index 0000000000..c5d8c27552
--- /dev/null
+++ b/docs/public/catalog/components/caption-clip-wipe/demo.html
@@ -0,0 +1,224 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Clip Wipe</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:wght@800&display=swap"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: #0a0a0a;
+      }
+      #clip-wipe {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0a0a0a;
+      }
+      .wp-overlay {
+        position: absolute;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.45);
+        z-index: 1;
+        pointer-events: none;
+      }
+      #wp-container {
+        position: absolute;
+        inset: 0;
+        z-index: 10;
+        pointer-events: none;
+      }
+      .wp-group {
+        position: absolute;
+        bottom: 120px;
+        left: 0;
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: flex-end;
+        justify-content: center;
+        gap: 24px;
+        padding: 0 100px;
+        visibility: hidden;
+      }
+      .wp-word {
+        font-family: "Poppins", sans-serif;
+        font-weight: 800;
+        font-size: 88px;
+        text-transform: uppercase;
+        color: #ffffff;
+        display: inline-block;
+        letter-spacing: 0.04em;
+        line-height: 1;
+        clip-path: inset(0 100% 0 0);
+        will-change: clip-path, color, opacity;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="clip-wipe"
+      data-composition-id="caption-clip-wipe"
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="wp-overlay"></div>
+      <div id="wp-container"></div>
+    </div>
+
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        var _fitCanvas = document.createElement("canvas");
+        var _fitCtx = _fitCanvas.getContext("2d");
+        function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {
+          var size = baseFontSize;
+          var minSize = Math.floor(baseFontSize * 0.45);
+          while (size > minSize) {
+            _fitCtx.font = fontWeight + " " + size + "px " + fontFamily;
+            if (_fitCtx.measureText(text).width <= maxWidth) return size;
+            size -= 2;
+          }
+          return minSize;
+        }
+
+        var WORDS = [
+          { text: "Every", start: 0.0, end: 0.3 },
+          { text: "great", start: 0.3, end: 0.55 },
+          { text: "video", start: 0.55, end: 0.85 },
+          { text: "starts", start: 0.85, end: 1.1 },
+          { text: "with", start: 1.1, end: 1.25 },
+          { text: "a", start: 1.25, end: 1.35 },
+          { text: "single", start: 1.35, end: 1.65 },
+          { text: "frame.", start: 1.65, end: 2.0 },
+          { text: "HyperFrames", start: 2.1, end: 2.65 },
+          { text: "lets", start: 2.65, end: 2.85 },
+          { text: "you", start: 2.85, end: 2.95 },
+          { text: "write", start: 2.95, end: 3.15 },
+          { text: "HTML", start: 3.15, end: 3.55 },
+          { text: "and", start: 3.55, end: 3.65 },
+          { text: "render", start: 3.65, end: 3.95 },
+          { text: "professional", start: 3.95, end: 4.45 },
+          { text: "video.", start: 4.45, end: 4.8 },
+          { text: "No", start: 4.9, end: 5.05 },
+          { text: "timeline.", start: 5.05, end: 5.45 },
+          { text: "No", start: 5.5, end: 5.65 },
+          { text: "drag", start: 5.65, end: 5.85 },
+          { text: "and", start: 5.85, end: 5.95 },
+          { text: "drop.", start: 5.95, end: 6.25 },
+          { text: "Just", start: 6.35, end: 6.55 },
+          { text: "code", start: 6.55, end: 6.8 },
+          { text: "that", start: 6.8, end: 6.95 },
+          { text: "becomes", start: 6.95, end: 7.3 },
+          { text: "cinema.", start: 7.3, end: 7.7 },
+        ];
+
+        var KEYWORDS = new Set([8, 12, 15, 24, 27]); // HyperFrames, HTML, professional, code, cinema.
+
+        var RAW_GROUPS = [
+          [0, 3],
+          [4, 7],
+          [8, 8],
+          [9, 12],
+          [13, 15],
+          [16, 16],
+          [17, 19],
+          [20, 22],
+          [23, 24],
+          [25, 27],
+        ];
+        var GROUPS = RAW_GROUPS.map(function (pair, gi) {
+          var ws = pair[0],
+            we = pair[1];
+          var nextStart = gi + 1 < RAW_GROUPS.length ? WORDS[RAW_GROUPS[gi + 1][0]].start : 8.0;
+          var gEnd = Math.min(WORDS[we].end + 0.5, nextStart - 0.05);
+          return { wordStart: ws, wordEnd: we, start: WORDS[ws].start, end: gEnd };
+        });
+
+        var container = document.getElementById("wp-container");
+        var tl = gsap.timeline({ paused: true });
+
+        GROUPS.forEach(function (g, gi) {
+          var groupWords = WORDS.slice(g.wordStart, g.wordEnd + 1);
+          var grp = document.createElement("div");
+          grp.className = "wp-group";
+          grp.id = "wp-grp-" + gi;
+
+          var groupText = groupWords
+            .map(function (w) {
+              return w.text.toUpperCase();
+            })
+            .join(" ");
+          var computedSize = fitFontSize(groupText, 88, "800", "Poppins", 1720);
+
+          groupWords.forEach(function (w, i) {
+            var wi = g.wordStart + i;
+            var span = document.createElement("span");
+            span.className = "wp-word";
+            span.id = "wp-w-" + wi;
+            span.textContent = w.text.toUpperCase();
+            span.style.fontSize = computedSize + "px";
+            grp.appendChild(span);
+          });
+
+          container.appendChild(grp);
+
+          tl.set(grp, { visibility: "visible" }, g.start);
+
+          groupWords.forEach(function (w, i) {
+            var wi = g.wordStart + i;
+            var wordEl = document.getElementById("wp-w-" + wi);
+            var isKW = KEYWORDS.has(wi);
+
+            tl.to(
+              wordEl,
+              { clipPath: "inset(0 0% 0 0)", duration: 0.3, ease: "power2.out" },
+              w.start,
+            );
+            if (isKW) {
+              tl.to(wordEl, { color: "#FFD700", duration: 0.05 }, w.start + 0.1);
+            }
+            tl.to(wordEl, { color: "rgba(255,255,255,0.4)", duration: 0.2 }, w.end);
+          });
+
+          var wordEls = grp.querySelectorAll(".wp-word");
+          tl.to(
+            wordEls,
+            {
+              clipPath: "inset(0 0% 0 100%)",
+              duration: 0.25,
+              stagger: 0.04,
+              ease: "power2.in",
+            },
+            g.end - 0.2,
+          );
+          tl.set(grp, { visibility: "hidden", opacity: 0 }, g.end);
+        });
+
+        tl.seek(0);
+        window.__timelines["caption-clip-wipe"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/caption-editorial-emphasis/caption-editorial-emphasis.html b/docs/public/catalog/components/caption-editorial-emphasis/caption-editorial-emphasis.html
new file mode 100644
index 0000000000..50b41a1220
--- /dev/null
+++ b/docs/public/catalog/components/caption-editorial-emphasis/caption-editorial-emphasis.html
@@ -0,0 +1,412 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Editorial Emphasis</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400&family=Playfair+Display:ital,wght@0,800;1,800&display=swap"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: transparent;
+        font-family: "Inter", sans-serif;
+      }
+
+      #editorial-emphasis {
+        pointer-events: none;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent;
+      }
+
+      .caption-layer {
+        position: absolute;
+        inset: 0;
+        z-index: 20;
+        pointer-events: none;
+        transform: translateZ(0);
+      }
+
+      .safe-zone {
+        position: absolute;
+        top: 580px;
+        left: 60px;
+        width: 1800px;
+        height: 430px;
+        display: flex;
+        align-items: flex-start;
+        justify-content: flex-start;
+      }
+
+      .caption-block {
+        position: absolute;
+        left: 0;
+        top: 0;
+        opacity: 0;
+        transform-origin: 0% 0%;
+        will-change: transform, opacity;
+        backface-visibility: hidden;
+      }
+
+      .caption-line {
+        display: flex;
+        align-items: baseline;
+        gap: 14px;
+        line-height: 1.1;
+        white-space: nowrap;
+      }
+
+      .caption-line + .caption-line {
+        margin-top: 8px;
+      }
+
+      .word {
+        display: inline-block;
+        color: #f5f0d0;
+        text-shadow:
+          0 2px 12px rgba(0, 0, 0, 0.6),
+          0 4px 24px rgba(0, 0, 0, 0.35);
+        will-change: transform, opacity;
+        backface-visibility: hidden;
+      }
+
+      .word--normal {
+        font-family: "Inter", sans-serif;
+        font-size: 86px;
+        font-weight: 400;
+        font-style: normal;
+      }
+
+      .word--italic {
+        font-family: "Inter", sans-serif;
+        font-size: 86px;
+        font-weight: 400;
+        font-style: italic;
+      }
+
+      .word--emphasis {
+        font-family: "Playfair Display", serif;
+        font-size: 180px;
+        font-weight: 800;
+        font-style: italic;
+        line-height: 0.9;
+        color: #f5f0d0;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="editorial-emphasis"
+      data-composition-id="caption-editorial-emphasis"
+      data-timeline-locked
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="caption-layer" aria-hidden="true">
+        <div id="caption-stage" class="safe-zone"></div>
+      </div>
+    </div>
+
+    <script>
+      var DURATION = 8;
+      var SAFE_WIDTH = 1800;
+      var ENTRY_DUR = 0.1;
+      var SLIDE_DUR = 0.2;
+
+      var _fitCanvas = document.createElement("canvas");
+      var _fitCtx = _fitCanvas.getContext("2d");
+      function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {
+        var size = baseFontSize;
+        var minSize = Math.floor(baseFontSize * 0.45);
+        while (size > minSize) {
+          _fitCtx.font = fontWeight + " " + size + "px " + fontFamily;
+          if (_fitCtx.measureText(text).width <= maxWidth) return size;
+          size -= 2;
+        }
+        return minSize;
+      }
+
+      // Generic transcript words
+      var W = [
+        { text: "Every", start: 0.0, end: 0.3 },
+        { text: "great", start: 0.3, end: 0.55 },
+        { text: "video", start: 0.55, end: 0.85 },
+        { text: "starts", start: 0.85, end: 1.1 },
+        { text: "with", start: 1.1, end: 1.25 },
+        { text: "a", start: 1.25, end: 1.35 },
+        { text: "single", start: 1.35, end: 1.65 },
+        { text: "frame.", start: 1.65, end: 2.0 },
+        { text: "HyperFrames", start: 2.1, end: 2.65 },
+        { text: "lets", start: 2.65, end: 2.85 },
+        { text: "you", start: 2.85, end: 2.95 },
+        { text: "write", start: 2.95, end: 3.15 },
+        { text: "HTML", start: 3.15, end: 3.55 },
+        { text: "and", start: 3.55, end: 3.65 },
+        { text: "render", start: 3.65, end: 3.95 },
+        { text: "professional", start: 3.95, end: 4.45 },
+        { text: "video.", start: 4.45, end: 4.8 },
+        { text: "No", start: 4.9, end: 5.05 },
+        { text: "timeline.", start: 5.05, end: 5.45 },
+        { text: "No", start: 5.5, end: 5.65 },
+        { text: "drag", start: 5.65, end: 5.85 },
+        { text: "and", start: 5.85, end: 5.95 },
+        { text: "drop.", start: 5.95, end: 6.25 },
+        { text: "Just", start: 6.35, end: 6.55 },
+        { text: "code", start: 6.55, end: 6.8 },
+        { text: "that", start: 6.8, end: 6.95 },
+        { text: "becomes", start: 6.95, end: 7.3 },
+        { text: "cinema.", start: 7.3, end: 7.7 },
+      ];
+
+      // Block layout: [wordIndex, type] — n=normal, i=italic, e=emphasis(large)
+      // Emphasis words: HyperFrames(8), HTML(12), professional(15), code(24), cinema.(27)
+      var BLOCKS = [
+        {
+          line1: [
+            [0, "n"],
+            [1, "n"],
+            [2, "n"],
+          ],
+          line2: [
+            [3, "n"],
+            [4, "n"],
+          ],
+        },
+        {
+          line1: [
+            [5, "n"],
+            [6, "n"],
+          ],
+          line2: [[7, "e"]],
+        },
+        { line1: [[8, "e"]], line2: null },
+        {
+          line1: [
+            [9, "n"],
+            [10, "n"],
+            [11, "n"],
+          ],
+          line2: [[12, "e"]],
+        },
+        {
+          line1: [
+            [13, "n"],
+            [14, "n"],
+          ],
+          line2: [[15, "e"]],
+        },
+        {
+          line1: [
+            [16, "n"],
+            [17, "n"],
+          ],
+          line2: null,
+        },
+        {
+          line1: [[18, "n"]],
+          line2: [
+            [19, "n"],
+            [20, "n"],
+          ],
+        },
+        {
+          line1: [
+            [21, "n"],
+            [22, "n"],
+          ],
+          line2: null,
+        },
+        {
+          line1: [
+            [23, "i"],
+            [24, "e"],
+          ],
+          line2: null,
+        },
+        {
+          line1: [
+            [25, "n"],
+            [26, "n"],
+          ],
+          line2: [[27, "e"]],
+        },
+      ];
+
+      var CLASS_MAP = { n: "word word--normal", i: "word word--italic", e: "word word--emphasis" };
+
+      function computeLineSize(linePairs) {
+        var hasEmphasis = linePairs.some(function (p) {
+          return p[1] === "e";
+        });
+        if (hasEmphasis) {
+          var lineText = linePairs
+            .map(function (p) {
+              return W[p[0]].text;
+            })
+            .join(" ");
+          return fitFontSize(lineText, 180, "800", "Playfair Display", SAFE_WIDTH);
+        }
+        var lineText = linePairs
+          .map(function (p) {
+            return W[p[0]].text;
+          })
+          .join(" ");
+        return fitFontSize(lineText, 86, "400", "Inter", SAFE_WIDTH);
+      }
+
+      function buildBlocks() {
+        var stage = document.getElementById("caption-stage");
+        BLOCKS.forEach(function (block, bi) {
+          var el = document.createElement("div");
+          el.className = "caption-block";
+          el.id = "b" + bi;
+
+          var l1Size = computeLineSize(block.line1);
+          var l1 = document.createElement("div");
+          l1.className = "caption-line";
+          l1.id = "b" + bi + "L1";
+          block.line1.forEach(function (pair, wi) {
+            var span = document.createElement("span");
+            span.className = CLASS_MAP[pair[1]];
+            span.id = "b" + bi + "L1w" + wi;
+            span.textContent = W[pair[0]].text;
+            if (pair[1] === "e") {
+              span.style.fontSize = l1Size + "px";
+            } else {
+              span.style.fontSize = l1Size + "px";
+            }
+            l1.appendChild(span);
+          });
+          el.appendChild(l1);
+
+          if (block.line2) {
+            var l2Size = computeLineSize(block.line2);
+            var l2 = document.createElement("div");
+            l2.className = "caption-line";
+            l2.id = "b" + bi + "L2";
+            block.line2.forEach(function (pair, wi) {
+              var span = document.createElement("span");
+              span.className = CLASS_MAP[pair[1]];
+              span.id = "b" + bi + "L2w" + wi;
+              span.textContent = W[pair[0]].text;
+              if (pair[1] === "e") {
+                span.style.fontSize = l2Size + "px";
+              } else {
+                span.style.fontSize = l2Size + "px";
+              }
+              l2.appendChild(span);
+            });
+            el.appendChild(l2);
+          }
+
+          stage.appendChild(el);
+        });
+      }
+
+      buildBlocks();
+
+      // Scale blocks that exceed safe width
+      (function fitBlocks() {
+        BLOCKS.forEach(function (block, bi) {
+          var el = document.getElementById("b" + bi);
+          el.style.opacity = "1";
+          el.style.position = "relative";
+          var lines = el.querySelectorAll(".caption-line");
+          var maxW = 0;
+          lines.forEach(function (line) {
+            if (line.scrollWidth > maxW) maxW = line.scrollWidth;
+          });
+          if (maxW > SAFE_WIDTH) {
+            var s = SAFE_WIDTH / maxW;
+            el.style.transform = "scale(" + s + ")";
+          }
+          el.style.opacity = "0";
+          el.style.position = "";
+        });
+      })();
+
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+
+      var allEls = BLOCKS.map(function (_, i) {
+        return document.getElementById("b" + i);
+      });
+
+      function blockStart(bi) {
+        return W[BLOCKS[bi].line1[0][0]].start;
+      }
+
+      BLOCKS.forEach(function (block, bi) {
+        var el = allEls[bi];
+        var start = blockStart(bi);
+        var nextStart = bi < BLOCKS.length - 1 ? blockStart(bi + 1) : DURATION;
+
+        allEls.forEach(function (other, oi) {
+          if (oi !== bi) tl.set(other, { opacity: 0 }, start);
+        });
+        tl.set(el, { opacity: 1 }, start);
+
+        block.line1.forEach(function (pair, wi) {
+          var wordEl = document.getElementById("b" + bi + "L1w" + wi);
+          var wordStart = W[pair[0]].start;
+          tl.set(wordEl, { opacity: 0, scale: 1.12, transformOrigin: "0% 100%" }, start);
+          tl.to(
+            wordEl,
+            { opacity: 1, scale: 1, duration: ENTRY_DUR, ease: "power2.out" },
+            wordStart,
+          );
+        });
+
+        if (block.line2) {
+          var hasEmphasis = block.line2.some(function (p) {
+            return p[1] === "e";
+          });
+          var l2El = document.getElementById("b" + bi + "L2");
+          if (hasEmphasis) {
+            var l2Start = W[block.line2[0][0]].start;
+            tl.set(l2El, { opacity: 0, x: -1920 }, start);
+            tl.to(l2El, { opacity: 1, x: 0, duration: SLIDE_DUR, ease: "power2.out" }, l2Start);
+          } else {
+            tl.set(l2El, { opacity: 1 }, start);
+            block.line2.forEach(function (pair, wi) {
+              var wordEl = document.getElementById("b" + bi + "L2w" + wi);
+              var wordStart = W[pair[0]].start;
+              tl.set(wordEl, { opacity: 0, scale: 1.12, transformOrigin: "0% 100%" }, start);
+              tl.to(
+                wordEl,
+                { opacity: 1, scale: 1, duration: ENTRY_DUR, ease: "power2.out" },
+                wordStart,
+              );
+            });
+          }
+        }
+
+        tl.set(el, { opacity: 0 }, nextStart);
+      });
+
+      tl.to({}, { duration: DURATION }, 0);
+      window.__timelines["caption-editorial-emphasis"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/caption-editorial-emphasis/demo.html b/docs/public/catalog/components/caption-editorial-emphasis/demo.html
new file mode 100644
index 0000000000..d942f7ce7b
--- /dev/null
+++ b/docs/public/catalog/components/caption-editorial-emphasis/demo.html
@@ -0,0 +1,410 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Editorial Emphasis</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400&family=Playfair+Display:ital,wght@0,800;1,800&display=swap"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: #000;
+        font-family: "Inter", sans-serif;
+      }
+
+      #editorial-emphasis {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000;
+      }
+
+      .caption-layer {
+        position: absolute;
+        inset: 0;
+        z-index: 20;
+        pointer-events: none;
+        transform: translateZ(0);
+      }
+
+      .safe-zone {
+        position: absolute;
+        top: 580px;
+        left: 60px;
+        width: 1800px;
+        height: 430px;
+        display: flex;
+        align-items: flex-start;
+        justify-content: flex-start;
+      }
+
+      .caption-block {
+        position: absolute;
+        left: 0;
+        top: 0;
+        opacity: 0;
+        transform-origin: 0% 0%;
+        will-change: transform, opacity;
+        backface-visibility: hidden;
+      }
+
+      .caption-line {
+        display: flex;
+        align-items: baseline;
+        gap: 14px;
+        line-height: 1.1;
+        white-space: nowrap;
+      }
+
+      .caption-line + .caption-line {
+        margin-top: 8px;
+      }
+
+      .word {
+        display: inline-block;
+        color: #f5f0d0;
+        text-shadow:
+          0 2px 12px rgba(0, 0, 0, 0.6),
+          0 4px 24px rgba(0, 0, 0, 0.35);
+        will-change: transform, opacity;
+        backface-visibility: hidden;
+      }
+
+      .word--normal {
+        font-family: "Inter", sans-serif;
+        font-size: 86px;
+        font-weight: 400;
+        font-style: normal;
+      }
+
+      .word--italic {
+        font-family: "Inter", sans-serif;
+        font-size: 86px;
+        font-weight: 400;
+        font-style: italic;
+      }
+
+      .word--emphasis {
+        font-family: "Playfair Display", serif;
+        font-size: 180px;
+        font-weight: 800;
+        font-style: italic;
+        line-height: 0.9;
+        color: #f5f0d0;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="editorial-emphasis"
+      data-composition-id="caption-editorial-emphasis"
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="caption-layer" aria-hidden="true">
+        <div id="caption-stage" class="safe-zone"></div>
+      </div>
+    </div>
+
+    <script>
+      var DURATION = 8;
+      var SAFE_WIDTH = 1800;
+      var ENTRY_DUR = 0.1;
+      var SLIDE_DUR = 0.2;
+
+      var _fitCanvas = document.createElement("canvas");
+      var _fitCtx = _fitCanvas.getContext("2d");
+      function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {
+        var size = baseFontSize;
+        var minSize = Math.floor(baseFontSize * 0.45);
+        while (size > minSize) {
+          _fitCtx.font = fontWeight + " " + size + "px " + fontFamily;
+          if (_fitCtx.measureText(text).width <= maxWidth) return size;
+          size -= 2;
+        }
+        return minSize;
+      }
+
+      // Generic transcript words
+      var W = [
+        { text: "Every", start: 0.0, end: 0.3 },
+        { text: "great", start: 0.3, end: 0.55 },
+        { text: "video", start: 0.55, end: 0.85 },
+        { text: "starts", start: 0.85, end: 1.1 },
+        { text: "with", start: 1.1, end: 1.25 },
+        { text: "a", start: 1.25, end: 1.35 },
+        { text: "single", start: 1.35, end: 1.65 },
+        { text: "frame.", start: 1.65, end: 2.0 },
+        { text: "HyperFrames", start: 2.1, end: 2.65 },
+        { text: "lets", start: 2.65, end: 2.85 },
+        { text: "you", start: 2.85, end: 2.95 },
+        { text: "write", start: 2.95, end: 3.15 },
+        { text: "HTML", start: 3.15, end: 3.55 },
+        { text: "and", start: 3.55, end: 3.65 },
+        { text: "render", start: 3.65, end: 3.95 },
+        { text: "professional", start: 3.95, end: 4.45 },
+        { text: "video.", start: 4.45, end: 4.8 },
+        { text: "No", start: 4.9, end: 5.05 },
+        { text: "timeline.", start: 5.05, end: 5.45 },
+        { text: "No", start: 5.5, end: 5.65 },
+        { text: "drag", start: 5.65, end: 5.85 },
+        { text: "and", start: 5.85, end: 5.95 },
+        { text: "drop.", start: 5.95, end: 6.25 },
+        { text: "Just", start: 6.35, end: 6.55 },
+        { text: "code", start: 6.55, end: 6.8 },
+        { text: "that", start: 6.8, end: 6.95 },
+        { text: "becomes", start: 6.95, end: 7.3 },
+        { text: "cinema.", start: 7.3, end: 7.7 },
+      ];
+
+      // Block layout: [wordIndex, type] — n=normal, i=italic, e=emphasis(large)
+      // Emphasis words: HyperFrames(8), HTML(12), professional(15), code(24), cinema.(27)
+      var BLOCKS = [
+        {
+          line1: [
+            [0, "n"],
+            [1, "n"],
+            [2, "n"],
+          ],
+          line2: [
+            [3, "n"],
+            [4, "n"],
+          ],
+        },
+        {
+          line1: [
+            [5, "n"],
+            [6, "n"],
+          ],
+          line2: [[7, "e"]],
+        },
+        { line1: [[8, "e"]], line2: null },
+        {
+          line1: [
+            [9, "n"],
+            [10, "n"],
+            [11, "n"],
+          ],
+          line2: [[12, "e"]],
+        },
+        {
+          line1: [
+            [13, "n"],
+            [14, "n"],
+          ],
+          line2: [[15, "e"]],
+        },
+        {
+          line1: [
+            [16, "n"],
+            [17, "n"],
+          ],
+          line2: null,
+        },
+        {
+          line1: [[18, "n"]],
+          line2: [
+            [19, "n"],
+            [20, "n"],
+          ],
+        },
+        {
+          line1: [
+            [21, "n"],
+            [22, "n"],
+          ],
+          line2: null,
+        },
+        {
+          line1: [
+            [23, "i"],
+            [24, "e"],
+          ],
+          line2: null,
+        },
+        {
+          line1: [
+            [25, "n"],
+            [26, "n"],
+          ],
+          line2: [[27, "e"]],
+        },
+      ];
+
+      var CLASS_MAP = { n: "word word--normal", i: "word word--italic", e: "word word--emphasis" };
+
+      function computeLineSize(linePairs) {
+        var hasEmphasis = linePairs.some(function (p) {
+          return p[1] === "e";
+        });
+        if (hasEmphasis) {
+          var lineText = linePairs
+            .map(function (p) {
+              return W[p[0]].text;
+            })
+            .join(" ");
+          return fitFontSize(lineText, 180, "800", "Playfair Display", SAFE_WIDTH);
+        }
+        var lineText = linePairs
+          .map(function (p) {
+            return W[p[0]].text;
+          })
+          .join(" ");
+        return fitFontSize(lineText, 86, "400", "Inter", SAFE_WIDTH);
+      }
+
+      function buildBlocks() {
+        var stage = document.getElementById("caption-stage");
+        BLOCKS.forEach(function (block, bi) {
+          var el = document.createElement("div");
+          el.className = "caption-block";
+          el.id = "b" + bi;
+
+          var l1Size = computeLineSize(block.line1);
+          var l1 = document.createElement("div");
+          l1.className = "caption-line";
+          l1.id = "b" + bi + "L1";
+          block.line1.forEach(function (pair, wi) {
+            var span = document.createElement("span");
+            span.className = CLASS_MAP[pair[1]];
+            span.id = "b" + bi + "L1w" + wi;
+            span.textContent = W[pair[0]].text;
+            if (pair[1] === "e") {
+              span.style.fontSize = l1Size + "px";
+            } else {
+              span.style.fontSize = l1Size + "px";
+            }
+            l1.appendChild(span);
+          });
+          el.appendChild(l1);
+
+          if (block.line2) {
+            var l2Size = computeLineSize(block.line2);
+            var l2 = document.createElement("div");
+            l2.className = "caption-line";
+            l2.id = "b" + bi + "L2";
+            block.line2.forEach(function (pair, wi) {
+              var span = document.createElement("span");
+              span.className = CLASS_MAP[pair[1]];
+              span.id = "b" + bi + "L2w" + wi;
+              span.textContent = W[pair[0]].text;
+              if (pair[1] === "e") {
+                span.style.fontSize = l2Size + "px";
+              } else {
+                span.style.fontSize = l2Size + "px";
+              }
+              l2.appendChild(span);
+            });
+            el.appendChild(l2);
+          }
+
+          stage.appendChild(el);
+        });
+      }
+
+      buildBlocks();
+
+      // Scale blocks that exceed safe width
+      (function fitBlocks() {
+        BLOCKS.forEach(function (block, bi) {
+          var el = document.getElementById("b" + bi);
+          el.style.opacity = "1";
+          el.style.position = "relative";
+          var lines = el.querySelectorAll(".caption-line");
+          var maxW = 0;
+          lines.forEach(function (line) {
+            if (line.scrollWidth > maxW) maxW = line.scrollWidth;
+          });
+          if (maxW > SAFE_WIDTH) {
+            var s = SAFE_WIDTH / maxW;
+            el.style.transform = "scale(" + s + ")";
+          }
+          el.style.opacity = "0";
+          el.style.position = "";
+        });
+      })();
+
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+
+      var allEls = BLOCKS.map(function (_, i) {
+        return document.getElementById("b" + i);
+      });
+
+      function blockStart(bi) {
+        return W[BLOCKS[bi].line1[0][0]].start;
+      }
+
+      BLOCKS.forEach(function (block, bi) {
+        var el = allEls[bi];
+        var start = blockStart(bi);
+        var nextStart = bi < BLOCKS.length - 1 ? blockStart(bi + 1) : DURATION;
+
+        allEls.forEach(function (other, oi) {
+          if (oi !== bi) tl.set(other, { opacity: 0 }, start);
+        });
+        tl.set(el, { opacity: 1 }, start);
+
+        block.line1.forEach(function (pair, wi) {
+          var wordEl = document.getElementById("b" + bi + "L1w" + wi);
+          var wordStart = W[pair[0]].start;
+          tl.set(wordEl, { opacity: 0, scale: 1.12, transformOrigin: "0% 100%" }, start);
+          tl.to(
+            wordEl,
+            { opacity: 1, scale: 1, duration: ENTRY_DUR, ease: "power2.out" },
+            wordStart,
+          );
+        });
+
+        if (block.line2) {
+          var hasEmphasis = block.line2.some(function (p) {
+            return p[1] === "e";
+          });
+          var l2El = document.getElementById("b" + bi + "L2");
+          if (hasEmphasis) {
+            var l2Start = W[block.line2[0][0]].start;
+            tl.set(l2El, { opacity: 0, x: -1920 }, start);
+            tl.to(l2El, { opacity: 1, x: 0, duration: SLIDE_DUR, ease: "power2.out" }, l2Start);
+          } else {
+            tl.set(l2El, { opacity: 1 }, start);
+            block.line2.forEach(function (pair, wi) {
+              var wordEl = document.getElementById("b" + bi + "L2w" + wi);
+              var wordStart = W[pair[0]].start;
+              tl.set(wordEl, { opacity: 0, scale: 1.12, transformOrigin: "0% 100%" }, start);
+              tl.to(
+                wordEl,
+                { opacity: 1, scale: 1, duration: ENTRY_DUR, ease: "power2.out" },
+                wordStart,
+              );
+            });
+          }
+        }
+
+        tl.set(el, { opacity: 0 }, nextStart);
+      });
+
+      tl.to({}, { duration: DURATION }, 0);
+      window.__timelines["caption-editorial-emphasis"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/caption-emoji-pop/caption-emoji-pop.html b/docs/public/catalog/components/caption-emoji-pop/caption-emoji-pop.html
new file mode 100644
index 0000000000..f8a863d2e8
--- /dev/null
+++ b/docs/public/catalog/components/caption-emoji-pop/caption-emoji-pop.html
@@ -0,0 +1,467 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Emoji Pop</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Gabarito:wght@900&display=swap"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: transparent;
+        font-family: "Gabarito", Arial, sans-serif;
+      }
+
+      #emoji-pop {
+        pointer-events: none;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent;
+      }
+
+      .caption-layer {
+        position: absolute;
+        inset: 0;
+        z-index: 20;
+        pointer-events: none;
+        transform: translateZ(0);
+      }
+
+      .safe-zone {
+        position: absolute;
+        bottom: 80px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 1400px;
+        height: 280px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .caption-group {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 1400px;
+        height: 280px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0;
+        transform-origin: 50% 50%;
+        will-change: transform;
+        backface-visibility: hidden;
+      }
+
+      .caption-emoji {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, calc(-50% - 70px));
+        font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
+        font-size: 56px;
+        line-height: 1;
+        text-align: center;
+      }
+
+      .caption-line {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 14px;
+        width: max-content;
+        max-width: 1400px;
+        line-height: 1.1;
+        white-space: nowrap;
+      }
+
+      .caption-word {
+        display: inline-block;
+        color: #ffffff;
+        font-family: "Gabarito", Arial, sans-serif;
+        font-weight: 900;
+        font-size: 72px;
+        line-height: 1.1;
+        letter-spacing: -0.03em;
+        text-transform: uppercase;
+        -webkit-text-stroke: 3px #000000;
+        paint-order: stroke fill;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="emoji-pop"
+      data-composition-id="caption-emoji-pop"
+      data-timeline-locked
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="caption-layer" aria-hidden="true">
+        <div id="caption-stage" class="safe-zone"></div>
+      </div>
+    </div>
+
+    <script>
+      var DURATION = 8;
+      var SAFE_ZONE_WIDTH = 1400;
+      var CAPTION_FONT_SIZE = 72;
+      var MAX_WORDS_PER_GROUP = 3;
+      var WORD_SPACING = 14;
+      var PAUSE_THRESHOLD = 0.1;
+      var ENTRY_FRAMES = 4;
+      var EXIT_FRAMES = 3;
+      var FPS = 30;
+      var ENTRY_DURATION = ENTRY_FRAMES / FPS;
+      var EXIT_DURATION = EXIT_FRAMES / FPS;
+      var FONT_WIDTH_SAFETY = 1.14;
+      var PRIMARY_COLOR = "#FFFFFF";
+      var ACCENT_COLORS = ["#FF76FF", "#FF0002", "#B2F7FF"];
+      var KEYWORDS = new Set(["hyperframes", "html", "professional", "code", "cinema"]);
+      var TRANSITION_WORDS = new Set([
+        "the",
+        "a",
+        "an",
+        "and",
+        "or",
+        "but",
+        "is",
+        "are",
+        "was",
+        "were",
+        "to",
+        "of",
+        "in",
+        "on",
+        "at",
+        "for",
+        "with",
+        "by",
+        "from",
+        "as",
+        "it",
+        "its",
+        "this",
+        "that",
+        "these",
+        "those",
+        "be",
+        "been",
+        "have",
+        "has",
+        "had",
+        "do",
+        "does",
+        "did",
+        "will",
+        "would",
+        "could",
+        "should",
+        "may",
+        "might",
+        "must",
+        "can",
+        "if",
+        "then",
+        "so",
+        "just",
+        "not",
+        "no",
+        "yes",
+        "up",
+        "out",
+        "about",
+      ]);
+
+      // Emoji map for key words
+      var WORD_EMOJI = {
+        hyperframes: "🎬",
+        html: "💻",
+        professional: "✨",
+        code: "⌨️",
+        cinema: "🎥",
+        video: "📹",
+        frame: "🖼️",
+      };
+
+      var TRANSCRIPT = [
+        { text: "Every", start: 0.0, end: 0.3 },
+        { text: "great", start: 0.3, end: 0.55 },
+        { text: "video", start: 0.55, end: 0.85 },
+        { text: "starts", start: 0.85, end: 1.1 },
+        { text: "with", start: 1.1, end: 1.25 },
+        { text: "a", start: 1.25, end: 1.35 },
+        { text: "single", start: 1.35, end: 1.65 },
+        { text: "frame.", start: 1.65, end: 2.0 },
+        { text: "HyperFrames", start: 2.1, end: 2.65 },
+        { text: "lets", start: 2.65, end: 2.85 },
+        { text: "you", start: 2.85, end: 2.95 },
+        { text: "write", start: 2.95, end: 3.15 },
+        { text: "HTML", start: 3.15, end: 3.55 },
+        { text: "and", start: 3.55, end: 3.65 },
+        { text: "render", start: 3.65, end: 3.95 },
+        { text: "professional", start: 3.95, end: 4.45 },
+        { text: "video.", start: 4.45, end: 4.8 },
+        { text: "No", start: 4.9, end: 5.05 },
+        { text: "timeline.", start: 5.05, end: 5.45 },
+        { text: "No", start: 5.5, end: 5.65 },
+        { text: "drag", start: 5.65, end: 5.85 },
+        { text: "and", start: 5.85, end: 5.95 },
+        { text: "drop.", start: 5.95, end: 6.25 },
+        { text: "Just", start: 6.35, end: 6.55 },
+        { text: "code", start: 6.55, end: 6.8 },
+        { text: "that", start: 6.8, end: 6.95 },
+        { text: "becomes", start: 6.95, end: 7.3 },
+        { text: "cinema.", start: 7.3, end: 7.7 },
+      ];
+
+      function normalizeWords(rawWords) {
+        return rawWords
+          .map(function (item) {
+            var text = String(item.word || item.text || "").trim();
+            var clean = text.toLowerCase().replace(/[^a-z]/g, "");
+            return {
+              text: text,
+              start: Math.max(0, Number(item.start) || 0),
+              end: Math.min(DURATION, Math.max(Number(item.start) || 0, Number(item.end) || 0)),
+              emoji: WORD_EMOJI[clean] || null,
+            };
+          })
+          .filter(function (word) {
+            return word.text.length > 0;
+          });
+      }
+
+      function seededRandom(seed) {
+        var x = Math.sin(seed * 9999) * 10000;
+        return x - Math.floor(x);
+      }
+
+      function assignWordColors(words, groupIndex) {
+        return words.map(function (word, index) {
+          var clean = word.text.toLowerCase().replace(/[^a-z]/g, "");
+          if (KEYWORDS.has(clean)) {
+            var ci = Math.floor(seededRandom(groupIndex * 23 + index * 31) * ACCENT_COLORS.length);
+            return ACCENT_COLORS[ci];
+          }
+          if (TRANSITION_WORDS.has(clean)) return PRIMARY_COLOR;
+          var rand = seededRandom(groupIndex * 13 + index);
+          if (rand > 0.55) {
+            var ci2 = Math.floor(rand * ACCENT_COLORS.length) % ACCENT_COLORS.length;
+            return ACCENT_COLORS[ci2];
+          }
+          return PRIMARY_COLOR;
+        });
+      }
+
+      var _fitCanvas = document.createElement("canvas");
+      var _fitCtx = _fitCanvas.getContext("2d");
+      function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {
+        var size = baseFontSize;
+        var minSize = Math.floor(baseFontSize * 0.45);
+        while (size > minSize) {
+          _fitCtx.font = fontWeight + " " + size + "px " + fontFamily;
+          if (_fitCtx.measureText(text).width <= maxWidth) return size;
+          size -= 2;
+        }
+        return minSize;
+      }
+
+      var measureCanvas = document.createElement("canvas");
+      var measureContext = measureCanvas.getContext("2d");
+
+      function measureWord(word, fontSize) {
+        measureContext.font = "900 " + fontSize + "px Gabarito";
+        return measureContext.measureText(word.text.toUpperCase()).width * FONT_WIDTH_SAFETY;
+      }
+
+      function measureLineWidth(words, fontSize) {
+        return words.reduce(function (total, word, index) {
+          return total + measureWord(word, fontSize) + (index ? WORD_SPACING : 0);
+        }, 0);
+      }
+
+      function fitsLine(words) {
+        return measureLineWidth(words, CAPTION_FONT_SIZE) <= SAFE_ZONE_WIDTH;
+      }
+
+      function makeGroups(words) {
+        var groups = [];
+        var current = [];
+        words.forEach(function (word, index) {
+          var nextWord = words[index + 1];
+          var testGroup = current.concat([word]);
+          if (testGroup.length > MAX_WORDS_PER_GROUP || !fitsLine(testGroup)) {
+            if (current.length) groups.push(makeGroup(current, groups.length));
+            current = [word];
+            return;
+          }
+          current.push(word);
+          var punctuation = /[,.:!?]$/.test(word.text);
+          var pause = nextWord ? nextWord.start - word.end : 0;
+          if (
+            !nextWord ||
+            punctuation ||
+            pause >= PAUSE_THRESHOLD ||
+            current.length >= MAX_WORDS_PER_GROUP
+          ) {
+            groups.push(makeGroup(current, groups.length));
+            current = [];
+          }
+        });
+        if (current.length) groups.push(makeGroup(current, groups.length));
+        return groups;
+      }
+
+      function makeGroup(words, groupIndex) {
+        var colors = assignWordColors(words, groupIndex);
+        var emoji = null;
+        for (var i = 0; i < words.length; i++) {
+          if (words[i].emoji) {
+            emoji = words[i].emoji;
+            break;
+          }
+        }
+        return {
+          words: words.slice(),
+          colors: colors,
+          emoji: emoji,
+          start: words[0].start,
+          end: words[words.length - 1].end,
+        };
+      }
+
+      function shadowForColor(color) {
+        var hex = color.replace("#", "");
+        var r = parseInt(hex.slice(0, 2), 16);
+        var g = parseInt(hex.slice(2, 4), 16);
+        var b = parseInt(hex.slice(4, 6), 16);
+        return (
+          "0 4px 8px rgba(0,0,0,0.7), 0 0 2px rgba(" +
+          r +
+          "," +
+          g +
+          "," +
+          b +
+          ",1), 0 0 8px rgba(" +
+          r +
+          "," +
+          g +
+          "," +
+          b +
+          ",0.6)"
+        );
+      }
+
+      function buildCaptions(groups) {
+        var stage = document.getElementById("caption-stage");
+        groups.forEach(function (group, groupIndex) {
+          var groupText = group.words
+            .map(function (w) {
+              return w.text.toUpperCase();
+            })
+            .join(" ");
+          var computedSize = fitFontSize(
+            groupText,
+            CAPTION_FONT_SIZE,
+            "900",
+            "Gabarito",
+            SAFE_ZONE_WIDTH,
+          );
+          var groupEl = document.createElement("div");
+          groupEl.id = "caption-group-" + groupIndex;
+          groupEl.className = "caption-group";
+
+          if (group.emoji) {
+            var emojiEl = document.createElement("div");
+            emojiEl.className = "caption-emoji";
+            emojiEl.textContent = group.emoji;
+            groupEl.appendChild(emojiEl);
+          }
+
+          var lineEl = document.createElement("div");
+          lineEl.className = "caption-line";
+          group.words.forEach(function (word, wordIndex) {
+            var color = group.colors[wordIndex] || PRIMARY_COLOR;
+            var wordEl = document.createElement("span");
+            wordEl.className = "caption-word";
+            wordEl.textContent = word.text.toUpperCase();
+            wordEl.style.color = color;
+            wordEl.style.fontSize = computedSize + "px";
+            wordEl.style.textShadow = shadowForColor(color);
+            lineEl.appendChild(wordEl);
+          });
+
+          groupEl.appendChild(lineEl);
+          stage.appendChild(groupEl);
+        });
+      }
+
+      var WORDS = normalizeWords(TRANSCRIPT);
+      var GROUPS = makeGroups(WORDS);
+      buildCaptions(GROUPS);
+
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+
+      var visibleStarts = GROUPS.map(function (group, groupIndex) {
+        var prev = GROUPS[groupIndex - 1];
+        var availableGap = prev ? Math.max(0, group.start - prev.end) : ENTRY_DURATION;
+        var entryLead = Math.min(ENTRY_DURATION, availableGap);
+        return Math.max(0, group.start - entryLead);
+      });
+
+      var allGroupEls = GROUPS.map(function (_, i) {
+        return document.getElementById("caption-group-" + i);
+      });
+
+      GROUPS.forEach(function (group, groupIndex) {
+        var groupEl = allGroupEls[groupIndex];
+        var visibleStart = visibleStarts[groupIndex];
+        var visibleEnd = groupIndex < GROUPS.length - 1 ? visibleStarts[groupIndex + 1] : DURATION;
+        var exitStart = Math.max(visibleStart, visibleEnd - EXIT_DURATION);
+
+        allGroupEls.forEach(function (otherEl, otherIndex) {
+          if (otherIndex !== groupIndex) tl.set(otherEl, { opacity: 0 }, visibleStart);
+        });
+
+        tl.set(groupEl, { opacity: 0, scaleX: 0.8, scaleY: 1 }, visibleStart);
+        tl.to(
+          groupEl,
+          { opacity: 1, scaleX: 1, duration: ENTRY_DURATION, ease: "power3.out", force3D: true },
+          visibleStart,
+        );
+        tl.to(
+          groupEl,
+          { scaleX: 0.75, opacity: 0.8, duration: EXIT_DURATION, ease: "power2.in", force3D: true },
+          exitStart,
+        );
+        tl.set(groupEl, { opacity: 0 }, visibleEnd);
+      });
+
+      window.__timelines["caption-emoji-pop"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/caption-emoji-pop/demo.html b/docs/public/catalog/components/caption-emoji-pop/demo.html
new file mode 100644
index 0000000000..f488b6a6bf
--- /dev/null
+++ b/docs/public/catalog/components/caption-emoji-pop/demo.html
@@ -0,0 +1,465 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Emoji Pop</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Gabarito:wght@900&display=swap"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: #000000;
+        font-family: "Gabarito", Arial, sans-serif;
+      }
+
+      #emoji-pop {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000000;
+      }
+
+      .caption-layer {
+        position: absolute;
+        inset: 0;
+        z-index: 20;
+        pointer-events: none;
+        transform: translateZ(0);
+      }
+
+      .safe-zone {
+        position: absolute;
+        bottom: 80px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 1400px;
+        height: 280px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .caption-group {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 1400px;
+        height: 280px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0;
+        transform-origin: 50% 50%;
+        will-change: transform;
+        backface-visibility: hidden;
+      }
+
+      .caption-emoji {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, calc(-50% - 70px));
+        font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
+        font-size: 56px;
+        line-height: 1;
+        text-align: center;
+      }
+
+      .caption-line {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 14px;
+        width: max-content;
+        max-width: 1400px;
+        line-height: 1.1;
+        white-space: nowrap;
+      }
+
+      .caption-word {
+        display: inline-block;
+        color: #ffffff;
+        font-family: "Gabarito", Arial, sans-serif;
+        font-weight: 900;
+        font-size: 72px;
+        line-height: 1.1;
+        letter-spacing: -0.03em;
+        text-transform: uppercase;
+        -webkit-text-stroke: 3px #000000;
+        paint-order: stroke fill;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="emoji-pop"
+      data-composition-id="caption-emoji-pop"
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="caption-layer" aria-hidden="true">
+        <div id="caption-stage" class="safe-zone"></div>
+      </div>
+    </div>
+
+    <script>
+      var DURATION = 8;
+      var SAFE_ZONE_WIDTH = 1400;
+      var CAPTION_FONT_SIZE = 72;
+      var MAX_WORDS_PER_GROUP = 3;
+      var WORD_SPACING = 14;
+      var PAUSE_THRESHOLD = 0.1;
+      var ENTRY_FRAMES = 4;
+      var EXIT_FRAMES = 3;
+      var FPS = 30;
+      var ENTRY_DURATION = ENTRY_FRAMES / FPS;
+      var EXIT_DURATION = EXIT_FRAMES / FPS;
+      var FONT_WIDTH_SAFETY = 1.14;
+      var PRIMARY_COLOR = "#FFFFFF";
+      var ACCENT_COLORS = ["#FF76FF", "#FF0002", "#B2F7FF"];
+      var KEYWORDS = new Set(["hyperframes", "html", "professional", "code", "cinema"]);
+      var TRANSITION_WORDS = new Set([
+        "the",
+        "a",
+        "an",
+        "and",
+        "or",
+        "but",
+        "is",
+        "are",
+        "was",
+        "were",
+        "to",
+        "of",
+        "in",
+        "on",
+        "at",
+        "for",
+        "with",
+        "by",
+        "from",
+        "as",
+        "it",
+        "its",
+        "this",
+        "that",
+        "these",
+        "those",
+        "be",
+        "been",
+        "have",
+        "has",
+        "had",
+        "do",
+        "does",
+        "did",
+        "will",
+        "would",
+        "could",
+        "should",
+        "may",
+        "might",
+        "must",
+        "can",
+        "if",
+        "then",
+        "so",
+        "just",
+        "not",
+        "no",
+        "yes",
+        "up",
+        "out",
+        "about",
+      ]);
+
+      // Emoji map for key words
+      var WORD_EMOJI = {
+        hyperframes: "🎬",
+        html: "💻",
+        professional: "✨",
+        code: "⌨️",
+        cinema: "🎥",
+        video: "📹",
+        frame: "🖼️",
+      };
+
+      var TRANSCRIPT = [
+        { text: "Every", start: 0.0, end: 0.3 },
+        { text: "great", start: 0.3, end: 0.55 },
+        { text: "video", start: 0.55, end: 0.85 },
+        { text: "starts", start: 0.85, end: 1.1 },
+        { text: "with", start: 1.1, end: 1.25 },
+        { text: "a", start: 1.25, end: 1.35 },
+        { text: "single", start: 1.35, end: 1.65 },
+        { text: "frame.", start: 1.65, end: 2.0 },
+        { text: "HyperFrames", start: 2.1, end: 2.65 },
+        { text: "lets", start: 2.65, end: 2.85 },
+        { text: "you", start: 2.85, end: 2.95 },
+        { text: "write", start: 2.95, end: 3.15 },
+        { text: "HTML", start: 3.15, end: 3.55 },
+        { text: "and", start: 3.55, end: 3.65 },
+        { text: "render", start: 3.65, end: 3.95 },
+        { text: "professional", start: 3.95, end: 4.45 },
+        { text: "video.", start: 4.45, end: 4.8 },
+        { text: "No", start: 4.9, end: 5.05 },
+        { text: "timeline.", start: 5.05, end: 5.45 },
+        { text: "No", start: 5.5, end: 5.65 },
+        { text: "drag", start: 5.65, end: 5.85 },
+        { text: "and", start: 5.85, end: 5.95 },
+        { text: "drop.", start: 5.95, end: 6.25 },
+        { text: "Just", start: 6.35, end: 6.55 },
+        { text: "code", start: 6.55, end: 6.8 },
+        { text: "that", start: 6.8, end: 6.95 },
+        { text: "becomes", start: 6.95, end: 7.3 },
+        { text: "cinema.", start: 7.3, end: 7.7 },
+      ];
+
+      function normalizeWords(rawWords) {
+        return rawWords
+          .map(function (item) {
+            var text = String(item.word || item.text || "").trim();
+            var clean = text.toLowerCase().replace(/[^a-z]/g, "");
+            return {
+              text: text,
+              start: Math.max(0, Number(item.start) || 0),
+              end: Math.min(DURATION, Math.max(Number(item.start) || 0, Number(item.end) || 0)),
+              emoji: WORD_EMOJI[clean] || null,
+            };
+          })
+          .filter(function (word) {
+            return word.text.length > 0;
+          });
+      }
+
+      function seededRandom(seed) {
+        var x = Math.sin(seed * 9999) * 10000;
+        return x - Math.floor(x);
+      }
+
+      function assignWordColors(words, groupIndex) {
+        return words.map(function (word, index) {
+          var clean = word.text.toLowerCase().replace(/[^a-z]/g, "");
+          if (KEYWORDS.has(clean)) {
+            var ci = Math.floor(seededRandom(groupIndex * 23 + index * 31) * ACCENT_COLORS.length);
+            return ACCENT_COLORS[ci];
+          }
+          if (TRANSITION_WORDS.has(clean)) return PRIMARY_COLOR;
+          var rand = seededRandom(groupIndex * 13 + index);
+          if (rand > 0.55) {
+            var ci2 = Math.floor(rand * ACCENT_COLORS.length) % ACCENT_COLORS.length;
+            return ACCENT_COLORS[ci2];
+          }
+          return PRIMARY_COLOR;
+        });
+      }
+
+      var _fitCanvas = document.createElement("canvas");
+      var _fitCtx = _fitCanvas.getContext("2d");
+      function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {
+        var size = baseFontSize;
+        var minSize = Math.floor(baseFontSize * 0.45);
+        while (size > minSize) {
+          _fitCtx.font = fontWeight + " " + size + "px " + fontFamily;
+          if (_fitCtx.measureText(text).width <= maxWidth) return size;
+          size -= 2;
+        }
+        return minSize;
+      }
+
+      var measureCanvas = document.createElement("canvas");
+      var measureContext = measureCanvas.getContext("2d");
+
+      function measureWord(word, fontSize) {
+        measureContext.font = "900 " + fontSize + "px Gabarito";
+        return measureContext.measureText(word.text.toUpperCase()).width * FONT_WIDTH_SAFETY;
+      }
+
+      function measureLineWidth(words, fontSize) {
+        return words.reduce(function (total, word, index) {
+          return total + measureWord(word, fontSize) + (index ? WORD_SPACING : 0);
+        }, 0);
+      }
+
+      function fitsLine(words) {
+        return measureLineWidth(words, CAPTION_FONT_SIZE) <= SAFE_ZONE_WIDTH;
+      }
+
+      function makeGroups(words) {
+        var groups = [];
+        var current = [];
+        words.forEach(function (word, index) {
+          var nextWord = words[index + 1];
+          var testGroup = current.concat([word]);
+          if (testGroup.length > MAX_WORDS_PER_GROUP || !fitsLine(testGroup)) {
+            if (current.length) groups.push(makeGroup(current, groups.length));
+            current = [word];
+            return;
+          }
+          current.push(word);
+          var punctuation = /[,.:!?]$/.test(word.text);
+          var pause = nextWord ? nextWord.start - word.end : 0;
+          if (
+            !nextWord ||
+            punctuation ||
+            pause >= PAUSE_THRESHOLD ||
+            current.length >= MAX_WORDS_PER_GROUP
+          ) {
+            groups.push(makeGroup(current, groups.length));
+            current = [];
+          }
+        });
+        if (current.length) groups.push(makeGroup(current, groups.length));
+        return groups;
+      }
+
+      function makeGroup(words, groupIndex) {
+        var colors = assignWordColors(words, groupIndex);
+        var emoji = null;
+        for (var i = 0; i < words.length; i++) {
+          if (words[i].emoji) {
+            emoji = words[i].emoji;
+            break;
+          }
+        }
+        return {
+          words: words.slice(),
+          colors: colors,
+          emoji: emoji,
+          start: words[0].start,
+          end: words[words.length - 1].end,
+        };
+      }
+
+      function shadowForColor(color) {
+        var hex = color.replace("#", "");
+        var r = parseInt(hex.slice(0, 2), 16);
+        var g = parseInt(hex.slice(2, 4), 16);
+        var b = parseInt(hex.slice(4, 6), 16);
+        return (
+          "0 4px 8px rgba(0,0,0,0.7), 0 0 2px rgba(" +
+          r +
+          "," +
+          g +
+          "," +
+          b +
+          ",1), 0 0 8px rgba(" +
+          r +
+          "," +
+          g +
+          "," +
+          b +
+          ",0.6)"
+        );
+      }
+
+      function buildCaptions(groups) {
+        var stage = document.getElementById("caption-stage");
+        groups.forEach(function (group, groupIndex) {
+          var groupText = group.words
+            .map(function (w) {
+              return w.text.toUpperCase();
+            })
+            .join(" ");
+          var computedSize = fitFontSize(
+            groupText,
+            CAPTION_FONT_SIZE,
+            "900",
+            "Gabarito",
+            SAFE_ZONE_WIDTH,
+          );
+          var groupEl = document.createElement("div");
+          groupEl.id = "caption-group-" + groupIndex;
+          groupEl.className = "caption-group";
+
+          if (group.emoji) {
+            var emojiEl = document.createElement("div");
+            emojiEl.className = "caption-emoji";
+            emojiEl.textContent = group.emoji;
+            groupEl.appendChild(emojiEl);
+          }
+
+          var lineEl = document.createElement("div");
+          lineEl.className = "caption-line";
+          group.words.forEach(function (word, wordIndex) {
+            var color = group.colors[wordIndex] || PRIMARY_COLOR;
+            var wordEl = document.createElement("span");
+            wordEl.className = "caption-word";
+            wordEl.textContent = word.text.toUpperCase();
+            wordEl.style.color = color;
+            wordEl.style.fontSize = computedSize + "px";
+            wordEl.style.textShadow = shadowForColor(color);
+            lineEl.appendChild(wordEl);
+          });
+
+          groupEl.appendChild(lineEl);
+          stage.appendChild(groupEl);
+        });
+      }
+
+      var WORDS = normalizeWords(TRANSCRIPT);
+      var GROUPS = makeGroups(WORDS);
+      buildCaptions(GROUPS);
+
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+
+      var visibleStarts = GROUPS.map(function (group, groupIndex) {
+        var prev = GROUPS[groupIndex - 1];
+        var availableGap = prev ? Math.max(0, group.start - prev.end) : ENTRY_DURATION;
+        var entryLead = Math.min(ENTRY_DURATION, availableGap);
+        return Math.max(0, group.start - entryLead);
+      });
+
+      var allGroupEls = GROUPS.map(function (_, i) {
+        return document.getElementById("caption-group-" + i);
+      });
+
+      GROUPS.forEach(function (group, groupIndex) {
+        var groupEl = allGroupEls[groupIndex];
+        var visibleStart = visibleStarts[groupIndex];
+        var visibleEnd = groupIndex < GROUPS.length - 1 ? visibleStarts[groupIndex + 1] : DURATION;
+        var exitStart = Math.max(visibleStart, visibleEnd - EXIT_DURATION);
+
+        allGroupEls.forEach(function (otherEl, otherIndex) {
+          if (otherIndex !== groupIndex) tl.set(otherEl, { opacity: 0 }, visibleStart);
+        });
+
+        tl.set(groupEl, { opacity: 0, scaleX: 0.8, scaleY: 1 }, visibleStart);
+        tl.to(
+          groupEl,
+          { opacity: 1, scaleX: 1, duration: ENTRY_DURATION, ease: "power3.out", force3D: true },
+          visibleStart,
+        );
+        tl.to(
+          groupEl,
+          { scaleX: 0.75, opacity: 0.8, duration: EXIT_DURATION, ease: "power2.in", force3D: true },
+          exitStart,
+        );
+        tl.set(groupEl, { opacity: 0 }, visibleEnd);
+      });
+
+      window.__timelines["caption-emoji-pop"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/caption-glitch-rgb/caption-glitch-rgb.html b/docs/public/catalog/components/caption-glitch-rgb/caption-glitch-rgb.html
new file mode 100644
index 0000000000..e44a67674f
--- /dev/null
+++ b/docs/public/catalog/components/caption-glitch-rgb/caption-glitch-rgb.html
@@ -0,0 +1,329 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Glitch RGB</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@700&display=swap"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: transparent;
+      }
+      #caption-glitch-rgb {
+        pointer-events: none;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent;
+      }
+      .gl-overlay {
+        position: absolute;
+        inset: 0;
+        z-index: 1;
+        background: linear-gradient(
+          to bottom,
+          rgba(0, 0, 0, 0.08) 0%,
+          rgba(0, 0, 0, 0.16) 54%,
+          rgba(0, 0, 0, 0.5) 100%
+        );
+        pointer-events: none;
+      }
+      .gl-scanlines {
+        position: absolute;
+        inset: 0;
+        z-index: 5;
+        pointer-events: none;
+        background: repeating-linear-gradient(
+          to bottom,
+          transparent 0px,
+          transparent 3px,
+          rgba(0, 0, 0, 0.16) 3px,
+          rgba(0, 0, 0, 0.16) 4px
+        );
+        opacity: 0.55;
+      }
+      #gl-container {
+        position: absolute;
+        inset: 0;
+        z-index: 10;
+        pointer-events: none;
+      }
+      .gl-group {
+        position: absolute;
+        bottom: 120px;
+        left: 0;
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: flex-end;
+        justify-content: center;
+        gap: 14px;
+        padding: 0 100px;
+        opacity: 0;
+        visibility: hidden;
+      }
+      .gl-word {
+        font-family: "Space Grotesk", sans-serif;
+        font-weight: 700;
+        font-size: 88px;
+        text-transform: uppercase;
+        color: #ffffff;
+        display: inline-block;
+        letter-spacing: 0.03em;
+        line-height: 0.96;
+        text-shadow: 0 5px 18px rgba(0, 0, 0, 0.52);
+        will-change: transform, text-shadow;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="caption-glitch-rgb"
+      data-composition-id="caption-glitch-rgb"
+      data-timeline-locked
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="gl-overlay"></div>
+      <div class="gl-scanlines"></div>
+      <div id="gl-container"></div>
+    </div>
+
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        var TRANSCRIPT = [
+          { text: "Every", start: 0.0, end: 0.3 },
+          { text: "great", start: 0.3, end: 0.55 },
+          { text: "video", start: 0.55, end: 0.85 },
+          { text: "starts", start: 0.85, end: 1.1 },
+          { text: "with", start: 1.1, end: 1.25 },
+          { text: "a", start: 1.25, end: 1.35 },
+          { text: "single", start: 1.35, end: 1.65 },
+          { text: "frame.", start: 1.65, end: 2.0 },
+          { text: "HyperFrames", start: 2.1, end: 2.65 },
+          { text: "lets", start: 2.65, end: 2.85 },
+          { text: "you", start: 2.85, end: 2.95 },
+          { text: "write", start: 2.95, end: 3.15 },
+          { text: "HTML", start: 3.15, end: 3.55 },
+          { text: "and", start: 3.55, end: 3.65 },
+          { text: "render", start: 3.65, end: 3.95 },
+          { text: "professional", start: 3.95, end: 4.45 },
+          { text: "video.", start: 4.45, end: 4.8 },
+          { text: "No", start: 4.9, end: 5.05 },
+          { text: "timeline.", start: 5.05, end: 5.45 },
+          { text: "No", start: 5.5, end: 5.65 },
+          { text: "drag", start: 5.65, end: 5.85 },
+          { text: "and", start: 5.85, end: 5.95 },
+          { text: "drop.", start: 5.95, end: 6.25 },
+          { text: "Just", start: 6.35, end: 6.55 },
+          { text: "code", start: 6.55, end: 6.8 },
+          { text: "that", start: 6.8, end: 6.95 },
+          { text: "becomes", start: 6.95, end: 7.3 },
+          { text: "cinema.", start: 7.3, end: 7.7 },
+        ];
+
+        var _fitCanvas = document.createElement("canvas");
+        var _fitCtx = _fitCanvas.getContext("2d");
+        function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {
+          var size = baseFontSize;
+          var minSize = Math.floor(baseFontSize * 0.45);
+          while (size > minSize) {
+            _fitCtx.font = fontWeight + " " + size + "px " + fontFamily;
+            if (_fitCtx.measureText(text).width <= maxWidth) return size;
+            size -= 2;
+          }
+          return minSize;
+        }
+
+        function mulberry32(seed) {
+          return function () {
+            seed |= 0;
+            seed = (seed + 0x6d2b79f5) | 0;
+            var t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
+            t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+            return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+          };
+        }
+
+        function buildGroups(words) {
+          var groups = [];
+          var start = 0;
+          var chars = 0;
+          for (var i = 0; i < words.length; i++) {
+            chars += words[i].text.length + 1;
+            var endsSentence = /[.!?]$/.test(words[i].text);
+            var nextGap = i + 1 < words.length ? words[i + 1].start - words[i].end : 0;
+            var full = i - start >= 3 || chars >= 21;
+            if (endsSentence || nextGap > 0.28 || full || i === words.length - 1) {
+              groups.push([start, i]);
+              start = i + 1;
+              chars = 0;
+            }
+          }
+          return groups;
+        }
+
+        function glitchPlan(word, nextWord) {
+          var nextStart = nextWord ? nextWord.start : word.end + 0.3;
+          var available = Math.min(word.end, nextStart) - word.start - 0.02;
+          var total = Math.min(0.24, Math.max(0.08, available));
+          return {
+            d1: total * 0.35,
+            d2: total * 0.65,
+          };
+        }
+
+        function shouldAftershock(word) {
+          return /\d|\$|%/.test(word.text) || word.text.replace(/[^\w]/g, "").length >= 7;
+        }
+
+        var RAW_GROUPS = buildGroups(TRANSCRIPT);
+        var GROUPS = RAW_GROUPS.map(function (pair, gi) {
+          var ws = pair[0];
+          var we = pair[1];
+          var nextStart =
+            gi + 1 < RAW_GROUPS.length ? TRANSCRIPT[RAW_GROUPS[gi + 1][0]].start : 8.0;
+          var end = Math.min(TRANSCRIPT[we].end + 0.24, nextStart - 0.04);
+          return { wordStart: ws, wordEnd: we, start: TRANSCRIPT[ws].start, end: end };
+        });
+
+        var BASE_FONT = 88;
+        var container = document.getElementById("gl-container");
+        var tl = gsap.timeline({ paused: true });
+
+        GROUPS.forEach(function (g, gi) {
+          var groupWords = TRANSCRIPT.slice(g.wordStart, g.wordEnd + 1);
+          var grp = document.createElement("div");
+          grp.className = "gl-group";
+          grp.id = "gl-grp-" + gi;
+
+          var groupText = groupWords
+            .map(function (w) {
+              return w.text.toUpperCase();
+            })
+            .join(" ");
+          var computedSize = fitFontSize(groupText, BASE_FONT, "700", "Space Grotesk", 1720);
+
+          groupWords.forEach(function (w, i) {
+            var wi = g.wordStart + i;
+            var span = document.createElement("span");
+            span.className = "gl-word";
+            span.id = "gl-w-" + wi;
+            span.textContent = w.text.toUpperCase();
+            span.style.fontSize = computedSize + "px";
+            grp.appendChild(span);
+          });
+
+          container.appendChild(grp);
+
+          tl.set(grp, { visibility: "visible" }, g.start);
+          tl.fromTo(
+            grp,
+            { opacity: 0 },
+            { opacity: 1, duration: 0.12, ease: "power2.out" },
+            g.start,
+          );
+
+          groupWords.forEach(function (w, i) {
+            var wi = g.wordStart + i;
+            var wordEl = document.getElementById("gl-w-" + wi);
+            var plan = glitchPlan(w, TRANSCRIPT[wi + 1]);
+
+            var rng = mulberry32(wi * 777 + 13);
+            var travel = -(8 + rng() * 8);
+            var shadowMag = 5 + rng() * 7;
+            var sm = shadowMag.toFixed(1);
+            var nextWord = TRANSCRIPT[wi + 1];
+            var nextStart = nextWord ? nextWord.start : g.end;
+            var aftershockEnd = Math.min(g.end - 0.08, nextStart - 0.04);
+
+            tl.to(
+              wordEl,
+              {
+                x: travel,
+                textShadow:
+                  sm + "px 0 #ff003c, -" + sm + "px 0 #00e5ff, 0 5px 18px rgba(0,0,0,0.52)",
+                duration: plan.d1,
+                ease: "none",
+              },
+              w.start,
+            );
+            tl.to(
+              wordEl,
+              {
+                x: 0,
+                textShadow: "0 5px 18px rgba(0,0,0,0.52)",
+                duration: plan.d2,
+                ease: "power3.out",
+              },
+              w.start + plan.d1,
+            );
+
+            if (shouldAftershock(w) && aftershockEnd - w.end > 0.22) {
+              var pulseStart = w.end + 0.08;
+              var pulseIndex = 0;
+              while (pulseStart + 0.1 < aftershockEnd) {
+                var pulseTravel = -(3 + rng() * 5);
+                var pulseShadow = (3 + rng() * 5).toFixed(1);
+                tl.to(
+                  wordEl,
+                  {
+                    x: pulseTravel,
+                    textShadow:
+                      pulseShadow +
+                      "px 0 #ff003c, -" +
+                      pulseShadow +
+                      "px 0 #00e5ff, 0 5px 18px rgba(0,0,0,0.52)",
+                    duration: 0.045,
+                    ease: "none",
+                  },
+                  pulseStart,
+                );
+                tl.to(
+                  wordEl,
+                  {
+                    x: 0,
+                    textShadow: "0 5px 18px rgba(0,0,0,0.52)",
+                    duration: 0.075,
+                    ease: "power3.out",
+                  },
+                  pulseStart + 0.045,
+                );
+                pulseIndex++;
+                pulseStart += pulseIndex % 2 === 0 ? 0.18 : 0.24;
+              }
+            }
+          });
+
+          tl.to(grp, { opacity: 0, duration: 0.1, ease: "power2.in" }, g.end - 0.1);
+          tl.set(grp, { opacity: 0, visibility: "hidden" }, g.end);
+        });
+
+        tl.seek(0);
+        window.__timelines["caption-glitch-rgb"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/caption-glitch-rgb/demo.html b/docs/public/catalog/components/caption-glitch-rgb/demo.html
new file mode 100644
index 0000000000..c7cf5b9d77
--- /dev/null
+++ b/docs/public/catalog/components/caption-glitch-rgb/demo.html
@@ -0,0 +1,327 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Glitch RGB</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@700&display=swap"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: #0a0a0a;
+      }
+      #caption-glitch-rgb {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0a0a0a;
+      }
+      .gl-overlay {
+        position: absolute;
+        inset: 0;
+        z-index: 1;
+        background: linear-gradient(
+          to bottom,
+          rgba(0, 0, 0, 0.08) 0%,
+          rgba(0, 0, 0, 0.16) 54%,
+          rgba(0, 0, 0, 0.5) 100%
+        );
+        pointer-events: none;
+      }
+      .gl-scanlines {
+        position: absolute;
+        inset: 0;
+        z-index: 5;
+        pointer-events: none;
+        background: repeating-linear-gradient(
+          to bottom,
+          transparent 0px,
+          transparent 3px,
+          rgba(0, 0, 0, 0.16) 3px,
+          rgba(0, 0, 0, 0.16) 4px
+        );
+        opacity: 0.55;
+      }
+      #gl-container {
+        position: absolute;
+        inset: 0;
+        z-index: 10;
+        pointer-events: none;
+      }
+      .gl-group {
+        position: absolute;
+        bottom: 120px;
+        left: 0;
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: flex-end;
+        justify-content: center;
+        gap: 14px;
+        padding: 0 100px;
+        opacity: 0;
+        visibility: hidden;
+      }
+      .gl-word {
+        font-family: "Space Grotesk", sans-serif;
+        font-weight: 700;
+        font-size: 88px;
+        text-transform: uppercase;
+        color: #ffffff;
+        display: inline-block;
+        letter-spacing: 0.03em;
+        line-height: 0.96;
+        text-shadow: 0 5px 18px rgba(0, 0, 0, 0.52);
+        will-change: transform, text-shadow;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="caption-glitch-rgb"
+      data-composition-id="caption-glitch-rgb"
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="gl-overlay"></div>
+      <div class="gl-scanlines"></div>
+      <div id="gl-container"></div>
+    </div>
+
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        var TRANSCRIPT = [
+          { text: "Every", start: 0.0, end: 0.3 },
+          { text: "great", start: 0.3, end: 0.55 },
+          { text: "video", start: 0.55, end: 0.85 },
+          { text: "starts", start: 0.85, end: 1.1 },
+          { text: "with", start: 1.1, end: 1.25 },
+          { text: "a", start: 1.25, end: 1.35 },
+          { text: "single", start: 1.35, end: 1.65 },
+          { text: "frame.", start: 1.65, end: 2.0 },
+          { text: "HyperFrames", start: 2.1, end: 2.65 },
+          { text: "lets", start: 2.65, end: 2.85 },
+          { text: "you", start: 2.85, end: 2.95 },
+          { text: "write", start: 2.95, end: 3.15 },
+          { text: "HTML", start: 3.15, end: 3.55 },
+          { text: "and", start: 3.55, end: 3.65 },
+          { text: "render", start: 3.65, end: 3.95 },
+          { text: "professional", start: 3.95, end: 4.45 },
+          { text: "video.", start: 4.45, end: 4.8 },
+          { text: "No", start: 4.9, end: 5.05 },
+          { text: "timeline.", start: 5.05, end: 5.45 },
+          { text: "No", start: 5.5, end: 5.65 },
+          { text: "drag", start: 5.65, end: 5.85 },
+          { text: "and", start: 5.85, end: 5.95 },
+          { text: "drop.", start: 5.95, end: 6.25 },
+          { text: "Just", start: 6.35, end: 6.55 },
+          { text: "code", start: 6.55, end: 6.8 },
+          { text: "that", start: 6.8, end: 6.95 },
+          { text: "becomes", start: 6.95, end: 7.3 },
+          { text: "cinema.", start: 7.3, end: 7.7 },
+        ];
+
+        var _fitCanvas = document.createElement("canvas");
+        var _fitCtx = _fitCanvas.getContext("2d");
+        function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {
+          var size = baseFontSize;
+          var minSize = Math.floor(baseFontSize * 0.45);
+          while (size > minSize) {
+            _fitCtx.font = fontWeight + " " + size + "px " + fontFamily;
+            if (_fitCtx.measureText(text).width <= maxWidth) return size;
+            size -= 2;
+          }
+          return minSize;
+        }
+
+        function mulberry32(seed) {
+          return function () {
+            seed |= 0;
+            seed = (seed + 0x6d2b79f5) | 0;
+            var t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
+            t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+            return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+          };
+        }
+
+        function buildGroups(words) {
+          var groups = [];
+          var start = 0;
+          var chars = 0;
+          for (var i = 0; i < words.length; i++) {
+            chars += words[i].text.length + 1;
+            var endsSentence = /[.!?]$/.test(words[i].text);
+            var nextGap = i + 1 < words.length ? words[i + 1].start - words[i].end : 0;
+            var full = i - start >= 3 || chars >= 21;
+            if (endsSentence || nextGap > 0.28 || full || i === words.length - 1) {
+              groups.push([start, i]);
+              start = i + 1;
+              chars = 0;
+            }
+          }
+          return groups;
+        }
+
+        function glitchPlan(word, nextWord) {
+          var nextStart = nextWord ? nextWord.start : word.end + 0.3;
+          var available = Math.min(word.end, nextStart) - word.start - 0.02;
+          var total = Math.min(0.24, Math.max(0.08, available));
+          return {
+            d1: total * 0.35,
+            d2: total * 0.65,
+          };
+        }
+
+        function shouldAftershock(word) {
+          return /\d|\$|%/.test(word.text) || word.text.replace(/[^\w]/g, "").length >= 7;
+        }
+
+        var RAW_GROUPS = buildGroups(TRANSCRIPT);
+        var GROUPS = RAW_GROUPS.map(function (pair, gi) {
+          var ws = pair[0];
+          var we = pair[1];
+          var nextStart =
+            gi + 1 < RAW_GROUPS.length ? TRANSCRIPT[RAW_GROUPS[gi + 1][0]].start : 8.0;
+          var end = Math.min(TRANSCRIPT[we].end + 0.24, nextStart - 0.04);
+          return { wordStart: ws, wordEnd: we, start: TRANSCRIPT[ws].start, end: end };
+        });
+
+        var BASE_FONT = 88;
+        var container = document.getElementById("gl-container");
+        var tl = gsap.timeline({ paused: true });
+
+        GROUPS.forEach(function (g, gi) {
+          var groupWords = TRANSCRIPT.slice(g.wordStart, g.wordEnd + 1);
+          var grp = document.createElement("div");
+          grp.className = "gl-group";
+          grp.id = "gl-grp-" + gi;
+
+          var groupText = groupWords
+            .map(function (w) {
+              return w.text.toUpperCase();
+            })
+            .join(" ");
+          var computedSize = fitFontSize(groupText, BASE_FONT, "700", "Space Grotesk", 1720);
+
+          groupWords.forEach(function (w, i) {
+            var wi = g.wordStart + i;
+            var span = document.createElement("span");
+            span.className = "gl-word";
+            span.id = "gl-w-" + wi;
+            span.textContent = w.text.toUpperCase();
+            span.style.fontSize = computedSize + "px";
+            grp.appendChild(span);
+          });
+
+          container.appendChild(grp);
+
+          tl.set(grp, { visibility: "visible" }, g.start);
+          tl.fromTo(
+            grp,
+            { opacity: 0 },
+            { opacity: 1, duration: 0.12, ease: "power2.out" },
+            g.start,
+          );
+
+          groupWords.forEach(function (w, i) {
+            var wi = g.wordStart + i;
+            var wordEl = document.getElementById("gl-w-" + wi);
+            var plan = glitchPlan(w, TRANSCRIPT[wi + 1]);
+
+            var rng = mulberry32(wi * 777 + 13);
+            var travel = -(8 + rng() * 8);
+            var shadowMag = 5 + rng() * 7;
+            var sm = shadowMag.toFixed(1);
+            var nextWord = TRANSCRIPT[wi + 1];
+            var nextStart = nextWord ? nextWord.start : g.end;
+            var aftershockEnd = Math.min(g.end - 0.08, nextStart - 0.04);
+
+            tl.to(
+              wordEl,
+              {
+                x: travel,
+                textShadow:
+                  sm + "px 0 #ff003c, -" + sm + "px 0 #00e5ff, 0 5px 18px rgba(0,0,0,0.52)",
+                duration: plan.d1,
+                ease: "none",
+              },
+              w.start,
+            );
+            tl.to(
+              wordEl,
+              {
+                x: 0,
+                textShadow: "0 5px 18px rgba(0,0,0,0.52)",
+                duration: plan.d2,
+                ease: "power3.out",
+              },
+              w.start + plan.d1,
+            );
+
+            if (shouldAftershock(w) && aftershockEnd - w.end > 0.22) {
+              var pulseStart = w.end + 0.08;
+              var pulseIndex = 0;
+              while (pulseStart + 0.1 < aftershockEnd) {
+                var pulseTravel = -(3 + rng() * 5);
+                var pulseShadow = (3 + rng() * 5).toFixed(1);
+                tl.to(
+                  wordEl,
+                  {
+                    x: pulseTravel,
+                    textShadow:
+                      pulseShadow +
+                      "px 0 #ff003c, -" +
+                      pulseShadow +
+                      "px 0 #00e5ff, 0 5px 18px rgba(0,0,0,0.52)",
+                    duration: 0.045,
+                    ease: "none",
+                  },
+                  pulseStart,
+                );
+                tl.to(
+                  wordEl,
+                  {
+                    x: 0,
+                    textShadow: "0 5px 18px rgba(0,0,0,0.52)",
+                    duration: 0.075,
+                    ease: "power3.out",
+                  },
+                  pulseStart + 0.045,
+                );
+                pulseIndex++;
+                pulseStart += pulseIndex % 2 === 0 ? 0.18 : 0.24;
+              }
+            }
+          });
+
+          tl.to(grp, { opacity: 0, duration: 0.1, ease: "power2.in" }, g.end - 0.1);
+          tl.set(grp, { opacity: 0, visibility: "hidden" }, g.end);
+        });
+
+        tl.seek(0);
+        window.__timelines["caption-glitch-rgb"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/caption-gradient-fill/caption-gradient-fill.html b/docs/public/catalog/components/caption-gradient-fill/caption-gradient-fill.html
new file mode 100644
index 0000000000..23f46161fe
--- /dev/null
+++ b/docs/public/catalog/components/caption-gradient-fill/caption-gradient-fill.html
@@ -0,0 +1,219 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Gradient Fill</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: transparent;
+      }
+      #gradient-fill {
+        pointer-events: none;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent;
+      }
+      #gr-container {
+        position: absolute;
+        inset: 0;
+        z-index: 10;
+        pointer-events: none;
+      }
+      .gr-group {
+        position: absolute;
+        bottom: 120px;
+        left: 0;
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: flex-end;
+        justify-content: center;
+        gap: 24px;
+        padding: 0 80px;
+        opacity: 0;
+        visibility: hidden;
+      }
+      .gr-word {
+        font-family: "Montserrat", sans-serif;
+        font-weight: 900;
+        font-size: 100px;
+        display: inline-block;
+        letter-spacing: 0.04em;
+        line-height: 1.15;
+        padding-bottom: 0.05em;
+        -webkit-background-clip: text;
+        background-clip: text;
+        color: transparent;
+        background-size: 350% 100%;
+        background-position: 100% 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="gradient-fill"
+      data-composition-id="caption-gradient-fill"
+      data-timeline-locked
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="gr-container"></div>
+    </div>
+
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        var _fitCanvas = document.createElement("canvas");
+        var _fitCtx = _fitCanvas.getContext("2d");
+        function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {
+          var size = baseFontSize;
+          var minSize = Math.floor(baseFontSize * 0.45);
+          while (size > minSize) {
+            _fitCtx.font = fontWeight + " " + size + "px " + fontFamily;
+            if (_fitCtx.measureText(text).width <= maxWidth) return size;
+            size -= 2;
+          }
+          return minSize;
+        }
+
+        var WORDS = [
+          { text: "Every", start: 0.0, end: 0.3 },
+          { text: "great", start: 0.3, end: 0.55 },
+          { text: "video", start: 0.55, end: 0.85 },
+          { text: "starts", start: 0.85, end: 1.1 },
+          { text: "with", start: 1.1, end: 1.25 },
+          { text: "a", start: 1.25, end: 1.35 },
+          { text: "single", start: 1.35, end: 1.65 },
+          { text: "frame.", start: 1.65, end: 2.0 },
+          { text: "HyperFrames", start: 2.1, end: 2.65 },
+          { text: "lets", start: 2.65, end: 2.85 },
+          { text: "you", start: 2.85, end: 2.95 },
+          { text: "write", start: 2.95, end: 3.15 },
+          { text: "HTML", start: 3.15, end: 3.55 },
+          { text: "and", start: 3.55, end: 3.65 },
+          { text: "render", start: 3.65, end: 3.95 },
+          { text: "professional", start: 3.95, end: 4.45 },
+          { text: "video.", start: 4.45, end: 4.8 },
+          { text: "No", start: 4.9, end: 5.05 },
+          { text: "timeline.", start: 5.05, end: 5.45 },
+          { text: "No", start: 5.5, end: 5.65 },
+          { text: "drag", start: 5.65, end: 5.85 },
+          { text: "and", start: 5.85, end: 5.95 },
+          { text: "drop.", start: 5.95, end: 6.25 },
+          { text: "Just", start: 6.35, end: 6.55 },
+          { text: "code", start: 6.55, end: 6.8 },
+          { text: "that", start: 6.8, end: 6.95 },
+          { text: "becomes", start: 6.95, end: 7.3 },
+          { text: "cinema.", start: 7.3, end: 7.7 },
+        ];
+
+        var GROUPS = [
+          { wordStart: 0, wordEnd: 3, start: 0.0, end: 1.05 },
+          { wordStart: 4, wordEnd: 7, start: 1.1, end: 2.05 },
+          { wordStart: 8, wordEnd: 8, start: 2.1, end: 2.6 },
+          { wordStart: 9, wordEnd: 12, start: 2.65, end: 3.5 },
+          { wordStart: 13, wordEnd: 14, start: 3.55, end: 3.9 },
+          { wordStart: 15, wordEnd: 16, start: 3.95, end: 4.75 },
+          { wordStart: 17, wordEnd: 18, start: 4.9, end: 5.4 },
+          { wordStart: 19, wordEnd: 22, start: 5.5, end: 6.2 },
+          { wordStart: 23, wordEnd: 24, start: 6.35, end: 6.75 },
+          { wordStart: 25, wordEnd: 27, start: 6.8, end: 7.8 },
+        ];
+
+        var SIRI_GRAD =
+          "linear-gradient(90deg, " +
+          "#fe9f1b 0%, #f76e49 10%, #ff2063 20%, " +
+          "#fd56cb 30%, #ef7aff 40%, #fe9f1b 50%, " +
+          "white 50.5%, white 100%)";
+
+        var container = document.getElementById("gr-container");
+        var tl = gsap.timeline({ paused: true });
+
+        GROUPS.forEach(function (g, gi) {
+          var groupWords = WORDS.slice(g.wordStart, g.wordEnd + 1);
+          var groupText = groupWords
+            .map(function (w) {
+              return w.text;
+            })
+            .join(" ");
+          var fontSize = fitFontSize(groupText, 100, "900", "'Montserrat', sans-serif", 1760);
+          var grp = document.createElement("div");
+          grp.className = "gr-group";
+          grp.id = "gr-grp-" + gi;
+
+          groupWords.forEach(function (w, i) {
+            var wi = g.wordStart + i;
+            var span = document.createElement("span");
+            span.className = "gr-word";
+            span.id = "gr-w-" + wi;
+            span.textContent = w.text;
+            span.style.fontSize = fontSize + "px";
+            span.style.background = SIRI_GRAD;
+            span.style.backgroundSize = "350% 100%";
+            span.style.backgroundPosition = "100% 0";
+            span.style.webkitBackgroundClip = "text";
+            span.style.backgroundClip = "text";
+            grp.appendChild(span);
+          });
+
+          container.appendChild(grp);
+
+          tl.set(grp, { visibility: "visible", opacity: 1 }, g.start);
+
+          var lastWordEnd = groupWords[groupWords.length - 1].end;
+          var nextStart = gi < GROUPS.length - 1 ? GROUPS[gi + 1].start : lastWordEnd + 0.5;
+          var gap = nextStart - lastWordEnd;
+          var fadeDur = Math.min(0.25, gap * 0.8);
+          var fadeStart = nextStart - fadeDur;
+          var groupEnd = nextStart;
+
+          groupWords.forEach(function (w, i) {
+            var wi = g.wordStart + i;
+            var el = document.getElementById("gr-w-" + wi);
+            var dur = w.end - w.start;
+
+            tl.set(el, { backgroundPosition: "100% 0", scale: 1 }, g.start);
+            tl.set(el, { scale: 1.04 }, w.start);
+            tl.fromTo(
+              el,
+              { backgroundPosition: "45% 0" },
+              { backgroundPosition: "0% 0", duration: dur, ease: "none" },
+              w.start,
+            );
+            tl.set(el, { backgroundPosition: "100% 0" }, w.end);
+            tl.to(el, { scale: 1, duration: 0.15, ease: "power2.out" }, w.end);
+          });
+
+          tl.to(grp, { opacity: 0, duration: fadeDur }, fadeStart);
+          tl.set(grp, { visibility: "hidden" }, groupEnd);
+        });
+
+        window.__timelines["caption-gradient-fill"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/caption-gradient-fill/demo.html b/docs/public/catalog/components/caption-gradient-fill/demo.html
new file mode 100644
index 0000000000..1e7c31e079
--- /dev/null
+++ b/docs/public/catalog/components/caption-gradient-fill/demo.html
@@ -0,0 +1,217 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Gradient Fill</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: #0a0a0a;
+      }
+      #gradient-fill {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0a0a0a;
+      }
+      #gr-container {
+        position: absolute;
+        inset: 0;
+        z-index: 10;
+        pointer-events: none;
+      }
+      .gr-group {
+        position: absolute;
+        bottom: 120px;
+        left: 0;
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: flex-end;
+        justify-content: center;
+        gap: 24px;
+        padding: 0 80px;
+        opacity: 0;
+        visibility: hidden;
+      }
+      .gr-word {
+        font-family: "Montserrat", sans-serif;
+        font-weight: 900;
+        font-size: 100px;
+        display: inline-block;
+        letter-spacing: 0.04em;
+        line-height: 1.15;
+        padding-bottom: 0.05em;
+        -webkit-background-clip: text;
+        background-clip: text;
+        color: transparent;
+        background-size: 350% 100%;
+        background-position: 100% 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="gradient-fill"
+      data-composition-id="caption-gradient-fill"
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="gr-container"></div>
+    </div>
+
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        var _fitCanvas = document.createElement("canvas");
+        var _fitCtx = _fitCanvas.getContext("2d");
+        function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {
+          var size = baseFontSize;
+          var minSize = Math.floor(baseFontSize * 0.45);
+          while (size > minSize) {
+            _fitCtx.font = fontWeight + " " + size + "px " + fontFamily;
+            if (_fitCtx.measureText(text).width <= maxWidth) return size;
+            size -= 2;
+          }
+          return minSize;
+        }
+
+        var WORDS = [
+          { text: "Every", start: 0.0, end: 0.3 },
+          { text: "great", start: 0.3, end: 0.55 },
+          { text: "video", start: 0.55, end: 0.85 },
+          { text: "starts", start: 0.85, end: 1.1 },
+          { text: "with", start: 1.1, end: 1.25 },
+          { text: "a", start: 1.25, end: 1.35 },
+          { text: "single", start: 1.35, end: 1.65 },
+          { text: "frame.", start: 1.65, end: 2.0 },
+          { text: "HyperFrames", start: 2.1, end: 2.65 },
+          { text: "lets", start: 2.65, end: 2.85 },
+          { text: "you", start: 2.85, end: 2.95 },
+          { text: "write", start: 2.95, end: 3.15 },
+          { text: "HTML", start: 3.15, end: 3.55 },
+          { text: "and", start: 3.55, end: 3.65 },
+          { text: "render", start: 3.65, end: 3.95 },
+          { text: "professional", start: 3.95, end: 4.45 },
+          { text: "video.", start: 4.45, end: 4.8 },
+          { text: "No", start: 4.9, end: 5.05 },
+          { text: "timeline.", start: 5.05, end: 5.45 },
+          { text: "No", start: 5.5, end: 5.65 },
+          { text: "drag", start: 5.65, end: 5.85 },
+          { text: "and", start: 5.85, end: 5.95 },
+          { text: "drop.", start: 5.95, end: 6.25 },
+          { text: "Just", start: 6.35, end: 6.55 },
+          { text: "code", start: 6.55, end: 6.8 },
+          { text: "that", start: 6.8, end: 6.95 },
+          { text: "becomes", start: 6.95, end: 7.3 },
+          { text: "cinema.", start: 7.3, end: 7.7 },
+        ];
+
+        var GROUPS = [
+          { wordStart: 0, wordEnd: 3, start: 0.0, end: 1.05 },
+          { wordStart: 4, wordEnd: 7, start: 1.1, end: 2.05 },
+          { wordStart: 8, wordEnd: 8, start: 2.1, end: 2.6 },
+          { wordStart: 9, wordEnd: 12, start: 2.65, end: 3.5 },
+          { wordStart: 13, wordEnd: 14, start: 3.55, end: 3.9 },
+          { wordStart: 15, wordEnd: 16, start: 3.95, end: 4.75 },
+          { wordStart: 17, wordEnd: 18, start: 4.9, end: 5.4 },
+          { wordStart: 19, wordEnd: 22, start: 5.5, end: 6.2 },
+          { wordStart: 23, wordEnd: 24, start: 6.35, end: 6.75 },
+          { wordStart: 25, wordEnd: 27, start: 6.8, end: 7.8 },
+        ];
+
+        var SIRI_GRAD =
+          "linear-gradient(90deg, " +
+          "#fe9f1b 0%, #f76e49 10%, #ff2063 20%, " +
+          "#fd56cb 30%, #ef7aff 40%, #fe9f1b 50%, " +
+          "white 50.5%, white 100%)";
+
+        var container = document.getElementById("gr-container");
+        var tl = gsap.timeline({ paused: true });
+
+        GROUPS.forEach(function (g, gi) {
+          var groupWords = WORDS.slice(g.wordStart, g.wordEnd + 1);
+          var groupText = groupWords
+            .map(function (w) {
+              return w.text;
+            })
+            .join(" ");
+          var fontSize = fitFontSize(groupText, 100, "900", "'Montserrat', sans-serif", 1760);
+          var grp = document.createElement("div");
+          grp.className = "gr-group";
+          grp.id = "gr-grp-" + gi;
+
+          groupWords.forEach(function (w, i) {
+            var wi = g.wordStart + i;
+            var span = document.createElement("span");
+            span.className = "gr-word";
+            span.id = "gr-w-" + wi;
+            span.textContent = w.text;
+            span.style.fontSize = fontSize + "px";
+            span.style.background = SIRI_GRAD;
+            span.style.backgroundSize = "350% 100%";
+            span.style.backgroundPosition = "100% 0";
+            span.style.webkitBackgroundClip = "text";
+            span.style.backgroundClip = "text";
+            grp.appendChild(span);
+          });
+
+          container.appendChild(grp);
+
+          tl.set(grp, { visibility: "visible", opacity: 1 }, g.start);
+
+          var lastWordEnd = groupWords[groupWords.length - 1].end;
+          var nextStart = gi < GROUPS.length - 1 ? GROUPS[gi + 1].start : lastWordEnd + 0.5;
+          var gap = nextStart - lastWordEnd;
+          var fadeDur = Math.min(0.25, gap * 0.8);
+          var fadeStart = nextStart - fadeDur;
+          var groupEnd = nextStart;
+
+          groupWords.forEach(function (w, i) {
+            var wi = g.wordStart + i;
+            var el = document.getElementById("gr-w-" + wi);
+            var dur = w.end - w.start;
+
+            tl.set(el, { backgroundPosition: "100% 0", scale: 1 }, g.start);
+            tl.set(el, { scale: 1.04 }, w.start);
+            tl.fromTo(
+              el,
+              { backgroundPosition: "45% 0" },
+              { backgroundPosition: "0% 0", duration: dur, ease: "none" },
+              w.start,
+            );
+            tl.set(el, { backgroundPosition: "100% 0" }, w.end);
+            tl.to(el, { scale: 1, duration: 0.15, ease: "power2.out" }, w.end);
+          });
+
+          tl.to(grp, { opacity: 0, duration: fadeDur }, fadeStart);
+          tl.set(grp, { visibility: "hidden" }, groupEnd);
+        });
+
+        window.__timelines["caption-gradient-fill"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/caption-highlight/caption-highlight.html b/docs/public/catalog/components/caption-highlight/caption-highlight.html
new file mode 100644
index 0000000000..2617005887
--- /dev/null
+++ b/docs/public/catalog/components/caption-highlight/caption-highlight.html
@@ -0,0 +1,261 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Highlight</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@800&display=swap"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: transparent;
+      }
+      #highlight {
+        pointer-events: none;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent;
+      }
+      #hl-video {
+        position: absolute;
+        inset: 0;
+        z-index: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+      .hl-overlay {
+        position: absolute;
+        inset: 0;
+        background: transparent;
+        z-index: 1;
+        pointer-events: none;
+      }
+      #hl-container {
+        position: absolute;
+        inset: 0;
+        z-index: 10;
+        pointer-events: none;
+      }
+      .hl-group {
+        position: absolute;
+        bottom: 140px;
+        left: 0;
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: flex-end;
+        justify-content: center;
+        gap: 8px;
+        padding: 0 100px;
+        opacity: 0;
+        visibility: hidden;
+      }
+      .hl-word {
+        font-family: "Montserrat", sans-serif;
+        font-weight: 800;
+        font-size: 80px;
+        text-transform: uppercase;
+        color: #ffffff;
+        display: inline-block;
+        letter-spacing: 0.02em;
+        line-height: 1;
+        position: relative;
+        padding: 6px 12px 8px;
+        text-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
+        transform-origin: 50% 58%;
+        will-change: transform, filter;
+      }
+      .hl-word-bg {
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(135deg, #ff1745 0%, #df1238 100%);
+        border-radius: 10px;
+        box-shadow: 0 12px 30px rgba(229, 20, 58, 0.32);
+        opacity: 0;
+        transform: scaleX(0);
+        transform-origin: 0% 50%;
+        z-index: -1;
+      }
+      .hl-word-text {
+        position: relative;
+        z-index: 1;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="highlight"
+      data-composition-id="caption-highlight"
+      data-timeline-locked
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="hl-overlay"></div>
+      <div id="hl-container"></div>
+    </div>
+
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        var _fitCanvas = document.createElement("canvas");
+        var _fitCtx = _fitCanvas.getContext("2d");
+        function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {
+          var size = baseFontSize;
+          var minSize = Math.floor(baseFontSize * 0.45);
+          while (size > minSize) {
+            _fitCtx.font = fontWeight + " " + size + "px " + fontFamily;
+            if (_fitCtx.measureText(text).width <= maxWidth) return size;
+            size -= 2;
+          }
+          return minSize;
+        }
+
+        var WORDS = [
+          { text: "Every", start: 0.0, end: 0.3 },
+          { text: "great", start: 0.3, end: 0.55 },
+          { text: "video", start: 0.55, end: 0.85 },
+          { text: "starts", start: 0.85, end: 1.1 },
+          { text: "with", start: 1.1, end: 1.25 },
+          { text: "a", start: 1.25, end: 1.35 },
+          { text: "single", start: 1.35, end: 1.65 },
+          { text: "frame.", start: 1.65, end: 2.0 },
+          { text: "HyperFrames", start: 2.1, end: 2.65 },
+          { text: "lets", start: 2.65, end: 2.85 },
+          { text: "you", start: 2.85, end: 2.95 },
+          { text: "write", start: 2.95, end: 3.15 },
+          { text: "HTML", start: 3.15, end: 3.55 },
+          { text: "and", start: 3.55, end: 3.65 },
+          { text: "render", start: 3.65, end: 3.95 },
+          { text: "professional", start: 3.95, end: 4.45 },
+          { text: "video.", start: 4.45, end: 4.8 },
+          { text: "No", start: 4.9, end: 5.05 },
+          { text: "timeline.", start: 5.05, end: 5.45 },
+          { text: "No", start: 5.5, end: 5.65 },
+          { text: "drag", start: 5.65, end: 5.85 },
+          { text: "and", start: 5.85, end: 5.95 },
+          { text: "drop.", start: 5.95, end: 6.25 },
+          { text: "Just", start: 6.35, end: 6.55 },
+          { text: "code", start: 6.55, end: 6.8 },
+          { text: "that", start: 6.8, end: 6.95 },
+          { text: "becomes", start: 6.95, end: 7.3 },
+          { text: "cinema.", start: 7.3, end: 7.7 },
+        ];
+
+        var RAW_GROUPS = [
+          [0, 3],
+          [4, 7],
+          [8, 8],
+          [9, 12],
+          [13, 15],
+          [16, 16],
+          [17, 19],
+          [20, 22],
+          [23, 24],
+          [25, 27],
+        ];
+        var GROUPS = RAW_GROUPS.map(function (pair, gi) {
+          var ws = pair[0],
+            we = pair[1];
+          var nextStart = gi + 1 < RAW_GROUPS.length ? WORDS[RAW_GROUPS[gi + 1][0]].start : 8.0;
+          var gEnd = Math.min(WORDS[we].end + 0.5, nextStart - 0.05);
+          return { wordStart: ws, wordEnd: we, start: WORDS[ws].start, end: gEnd };
+        });
+
+        var container = document.getElementById("hl-container");
+        var tl = gsap.timeline({ paused: true });
+
+        GROUPS.forEach(function (g, gi) {
+          var groupWords = WORDS.slice(g.wordStart, g.wordEnd + 1);
+          var grp = document.createElement("div");
+          grp.className = "hl-group";
+          grp.id = "hl-grp-" + gi;
+
+          var groupText = groupWords
+            .map(function (w) {
+              return w.text.toUpperCase();
+            })
+            .join(" ");
+          var computedSize = fitFontSize(groupText, 80, "800", "Montserrat", 1620);
+
+          groupWords.forEach(function (w, i) {
+            var wi = g.wordStart + i;
+            var wordEl = document.createElement("span");
+            wordEl.className = "hl-word";
+            wordEl.id = "hl-w-" + wi;
+            wordEl.style.fontSize = computedSize + "px";
+
+            var bgEl = document.createElement("span");
+            bgEl.className = "hl-word-bg";
+            bgEl.id = "hl-bg-" + wi;
+
+            var textEl = document.createElement("span");
+            textEl.className = "hl-word-text";
+            textEl.textContent = w.text.toUpperCase();
+
+            wordEl.appendChild(bgEl);
+            wordEl.appendChild(textEl);
+            grp.appendChild(wordEl);
+          });
+
+          container.appendChild(grp);
+
+          tl.set(grp, { visibility: "visible" }, g.start);
+          tl.fromTo(
+            grp,
+            { opacity: 0 },
+            { opacity: 1, duration: 0.12, ease: "power2.out" },
+            g.start,
+          );
+
+          groupWords.forEach(function (w, i) {
+            var wi = g.wordStart + i;
+            var bgEl = document.getElementById("hl-bg-" + wi);
+            var wordEl = document.getElementById("hl-w-" + wi);
+
+            tl.to(bgEl, { opacity: 1, scaleX: 1, duration: 0.15, ease: "power2.out" }, w.start);
+            tl.to(
+              wordEl,
+              { filter: "brightness(1.05)", duration: 0.08, ease: "power2.out" },
+              w.start,
+            );
+            tl.to(
+              wordEl,
+              { filter: "brightness(1)", duration: 0.16, ease: "power2.out" },
+              w.start + 0.08,
+            );
+            tl.to(bgEl, { opacity: 0, scaleX: 1.02, duration: 0.1, ease: "power2.in" }, w.end);
+            tl.set(bgEl, { scaleX: 0 }, w.end + 0.1);
+          });
+
+          tl.to(grp, { opacity: 0, duration: 0.1, ease: "power2.in" }, g.end - 0.1);
+          tl.set(grp, { opacity: 0, visibility: "hidden" }, g.end);
+        });
+
+        tl.seek(0);
+        window.__timelines["caption-highlight"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/caption-highlight/demo.html b/docs/public/catalog/components/caption-highlight/demo.html
new file mode 100644
index 0000000000..2236c8b89e
--- /dev/null
+++ b/docs/public/catalog/components/caption-highlight/demo.html
@@ -0,0 +1,259 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Highlight</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@800&display=swap"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: #0a0a0a;
+      }
+      #highlight {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0a0a0a;
+      }
+      #hl-video {
+        position: absolute;
+        inset: 0;
+        z-index: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+      .hl-overlay {
+        position: absolute;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.4);
+        z-index: 1;
+        pointer-events: none;
+      }
+      #hl-container {
+        position: absolute;
+        inset: 0;
+        z-index: 10;
+        pointer-events: none;
+      }
+      .hl-group {
+        position: absolute;
+        bottom: 140px;
+        left: 0;
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: flex-end;
+        justify-content: center;
+        gap: 8px;
+        padding: 0 100px;
+        opacity: 0;
+        visibility: hidden;
+      }
+      .hl-word {
+        font-family: "Montserrat", sans-serif;
+        font-weight: 800;
+        font-size: 80px;
+        text-transform: uppercase;
+        color: #ffffff;
+        display: inline-block;
+        letter-spacing: 0.02em;
+        line-height: 1;
+        position: relative;
+        padding: 6px 12px 8px;
+        text-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
+        transform-origin: 50% 58%;
+        will-change: transform, filter;
+      }
+      .hl-word-bg {
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(135deg, #ff1745 0%, #df1238 100%);
+        border-radius: 10px;
+        box-shadow: 0 12px 30px rgba(229, 20, 58, 0.32);
+        opacity: 0;
+        transform: scaleX(0);
+        transform-origin: 0% 50%;
+        z-index: -1;
+      }
+      .hl-word-text {
+        position: relative;
+        z-index: 1;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="highlight"
+      data-composition-id="caption-highlight"
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="hl-overlay"></div>
+      <div id="hl-container"></div>
+    </div>
+
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        var _fitCanvas = document.createElement("canvas");
+        var _fitCtx = _fitCanvas.getContext("2d");
+        function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {
+          var size = baseFontSize;
+          var minSize = Math.floor(baseFontSize * 0.45);
+          while (size > minSize) {
+            _fitCtx.font = fontWeight + " " + size + "px " + fontFamily;
+            if (_fitCtx.measureText(text).width <= maxWidth) return size;
+            size -= 2;
+          }
+          return minSize;
+        }
+
+        var WORDS = [
+          { text: "Every", start: 0.0, end: 0.3 },
+          { text: "great", start: 0.3, end: 0.55 },
+          { text: "video", start: 0.55, end: 0.85 },
+          { text: "starts", start: 0.85, end: 1.1 },
+          { text: "with", start: 1.1, end: 1.25 },
+          { text: "a", start: 1.25, end: 1.35 },
+          { text: "single", start: 1.35, end: 1.65 },
+          { text: "frame.", start: 1.65, end: 2.0 },
+          { text: "HyperFrames", start: 2.1, end: 2.65 },
+          { text: "lets", start: 2.65, end: 2.85 },
+          { text: "you", start: 2.85, end: 2.95 },
+          { text: "write", start: 2.95, end: 3.15 },
+          { text: "HTML", start: 3.15, end: 3.55 },
+          { text: "and", start: 3.55, end: 3.65 },
+          { text: "render", start: 3.65, end: 3.95 },
+          { text: "professional", start: 3.95, end: 4.45 },
+          { text: "video.", start: 4.45, end: 4.8 },
+          { text: "No", start: 4.9, end: 5.05 },
+          { text: "timeline.", start: 5.05, end: 5.45 },
+          { text: "No", start: 5.5, end: 5.65 },
+          { text: "drag", start: 5.65, end: 5.85 },
+          { text: "and", start: 5.85, end: 5.95 },
+          { text: "drop.", start: 5.95, end: 6.25 },
+          { text: "Just", start: 6.35, end: 6.55 },
+          { text: "code", start: 6.55, end: 6.8 },
+          { text: "that", start: 6.8, end: 6.95 },
+          { text: "becomes", start: 6.95, end: 7.3 },
+          { text: "cinema.", start: 7.3, end: 7.7 },
+        ];
+
+        var RAW_GROUPS = [
+          [0, 3],
+          [4, 7],
+          [8, 8],
+          [9, 12],
+          [13, 15],
+          [16, 16],
+          [17, 19],
+          [20, 22],
+          [23, 24],
+          [25, 27],
+        ];
+        var GROUPS = RAW_GROUPS.map(function (pair, gi) {
+          var ws = pair[0],
+            we = pair[1];
+          var nextStart = gi + 1 < RAW_GROUPS.length ? WORDS[RAW_GROUPS[gi + 1][0]].start : 8.0;
+          var gEnd = Math.min(WORDS[we].end + 0.5, nextStart - 0.05);
+          return { wordStart: ws, wordEnd: we, start: WORDS[ws].start, end: gEnd };
+        });
+
+        var container = document.getElementById("hl-container");
+        var tl = gsap.timeline({ paused: true });
+
+        GROUPS.forEach(function (g, gi) {
+          var groupWords = WORDS.slice(g.wordStart, g.wordEnd + 1);
+          var grp = document.createElement("div");
+          grp.className = "hl-group";
+          grp.id = "hl-grp-" + gi;
+
+          var groupText = groupWords
+            .map(function (w) {
+              return w.text.toUpperCase();
+            })
+            .join(" ");
+          var computedSize = fitFontSize(groupText, 80, "800", "Montserrat", 1620);
+
+          groupWords.forEach(function (w, i) {
+            var wi = g.wordStart + i;
+            var wordEl = document.createElement("span");
+            wordEl.className = "hl-word";
+            wordEl.id = "hl-w-" + wi;
+            wordEl.style.fontSize = computedSize + "px";
+
+            var bgEl = document.createElement("span");
+            bgEl.className = "hl-word-bg";
+            bgEl.id = "hl-bg-" + wi;
+
+            var textEl = document.createElement("span");
+            textEl.className = "hl-word-text";
+            textEl.textContent = w.text.toUpperCase();
+
+            wordEl.appendChild(bgEl);
+            wordEl.appendChild(textEl);
+            grp.appendChild(wordEl);
+          });
+
+          container.appendChild(grp);
+
+          tl.set(grp, { visibility: "visible" }, g.start);
+          tl.fromTo(
+            grp,
+            { opacity: 0 },
+            { opacity: 1, duration: 0.12, ease: "power2.out" },
+            g.start,
+          );
+
+          groupWords.forEach(function (w, i) {
+            var wi = g.wordStart + i;
+            var bgEl = document.getElementById("hl-bg-" + wi);
+            var wordEl = document.getElementById("hl-w-" + wi);
+
+            tl.to(bgEl, { opacity: 1, scaleX: 1, duration: 0.15, ease: "power2.out" }, w.start);
+            tl.to(
+              wordEl,
+              { filter: "brightness(1.05)", duration: 0.08, ease: "power2.out" },
+              w.start,
+            );
+            tl.to(
+              wordEl,
+              { filter: "brightness(1)", duration: 0.16, ease: "power2.out" },
+              w.start + 0.08,
+            );
+            tl.to(bgEl, { opacity: 0, scaleX: 1.02, duration: 0.1, ease: "power2.in" }, w.end);
+            tl.set(bgEl, { scaleX: 0 }, w.end + 0.1);
+          });
+
+          tl.to(grp, { opacity: 0, duration: 0.1, ease: "power2.in" }, g.end - 0.1);
+          tl.set(grp, { opacity: 0, visibility: "hidden" }, g.end);
+        });
+
+        tl.seek(0);
+        window.__timelines["caption-highlight"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/caption-kinetic-slam/caption-kinetic-slam.html b/docs/public/catalog/components/caption-kinetic-slam/caption-kinetic-slam.html
new file mode 100644
index 0000000000..7a8120ba01
--- /dev/null
+++ b/docs/public/catalog/components/caption-kinetic-slam/caption-kinetic-slam.html
@@ -0,0 +1,194 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Kinetic Slam</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: transparent;
+      }
+      #kinetic-slam {
+        pointer-events: none;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent;
+      }
+      .kt-overlay {
+        position: absolute;
+        inset: 0;
+        background: transparent;
+        z-index: 1;
+        pointer-events: none;
+      }
+      #kt-container {
+        position: absolute;
+        inset: 0;
+        z-index: 10;
+        pointer-events: none;
+      }
+      .kt-word {
+        font-family: "Anton", sans-serif;
+        font-weight: 400;
+        text-transform: uppercase;
+        color: #ffffff;
+        position: absolute;
+        left: 0;
+        width: 100%;
+        text-align: center;
+        top: 50%;
+        letter-spacing: 0.04em;
+        line-height: 1;
+        opacity: 0;
+        visibility: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="kinetic-slam"
+      data-composition-id="caption-kinetic-slam"
+      data-timeline-locked
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="kt-overlay"></div>
+      <div id="kt-container"></div>
+    </div>
+
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        var _fitCanvas = document.createElement("canvas");
+        var _fitCtx = _fitCanvas.getContext("2d");
+        function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {
+          var size = baseFontSize;
+          var minSize = Math.floor(baseFontSize * 0.45);
+          while (size > minSize) {
+            _fitCtx.font = fontWeight + " " + size + "px " + fontFamily;
+            if (_fitCtx.measureText(text).width <= maxWidth) return size;
+            size -= 2;
+          }
+          return minSize;
+        }
+
+        function mulberry32(seed) {
+          return function () {
+            seed |= 0;
+            seed = (seed + 0x6d2b79f5) | 0;
+            var t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
+            t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+            return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+          };
+        }
+
+        var WORDS = [
+          { text: "Every", start: 0.0, end: 0.3 },
+          { text: "great", start: 0.3, end: 0.55 },
+          { text: "video", start: 0.55, end: 0.85 },
+          { text: "starts", start: 0.85, end: 1.1 },
+          { text: "with", start: 1.1, end: 1.25 },
+          { text: "a", start: 1.25, end: 1.35 },
+          { text: "single", start: 1.35, end: 1.65 },
+          { text: "frame.", start: 1.65, end: 2.0 },
+          { text: "HyperFrames", start: 2.1, end: 2.65 },
+          { text: "lets", start: 2.65, end: 2.85 },
+          { text: "you", start: 2.85, end: 2.95 },
+          { text: "write", start: 2.95, end: 3.15 },
+          { text: "HTML", start: 3.15, end: 3.55 },
+          { text: "and", start: 3.55, end: 3.65 },
+          { text: "render", start: 3.65, end: 3.95 },
+          { text: "professional", start: 3.95, end: 4.45 },
+          { text: "video.", start: 4.45, end: 4.8 },
+          { text: "No", start: 4.9, end: 5.05 },
+          { text: "timeline.", start: 5.05, end: 5.45 },
+          { text: "No", start: 5.5, end: 5.65 },
+          { text: "drag", start: 5.65, end: 5.85 },
+          { text: "and", start: 5.85, end: 5.95 },
+          { text: "drop.", start: 5.95, end: 6.25 },
+          { text: "Just", start: 6.35, end: 6.55 },
+          { text: "code", start: 6.55, end: 6.8 },
+          { text: "that", start: 6.8, end: 6.95 },
+          { text: "becomes", start: 6.95, end: 7.3 },
+          { text: "cinema.", start: 7.3, end: 7.7 },
+        ];
+
+        var KEYWORDS = new Set([8, 12, 15, 24, 27]); // HyperFrames, HTML, professional, code, cinema.
+
+        var container = document.getElementById("kt-container");
+        var tl = gsap.timeline({ paused: true });
+
+        WORDS.forEach(function (w, wi) {
+          var el = document.createElement("div");
+          el.className = "kt-word";
+          el.id = "kt-w-" + wi;
+          el.textContent = w.text.toUpperCase();
+          el.style.fontSize =
+            fitFontSize(w.text.toUpperCase(), 220, "400", "'Anton', sans-serif", 1720) + "px";
+          if (KEYWORDS.has(wi)) el.style.color = "#FFD700";
+          container.appendChild(el);
+
+          gsap.set(el, { yPercent: -50 });
+
+          var entranceMode = wi % 4;
+          tl.set(el, { visibility: "visible" }, w.start);
+          if (entranceMode === 0) {
+            tl.fromTo(
+              el,
+              { y: -120, opacity: 0 },
+              { y: 0, opacity: 1, duration: 0.22, ease: "back.out(1.7)" },
+              w.start,
+            );
+          } else if (entranceMode === 1) {
+            tl.fromTo(
+              el,
+              { x: -300, opacity: 0 },
+              { x: 0, opacity: 1, duration: 0.2, ease: "expo.out" },
+              w.start,
+            );
+          } else if (entranceMode === 2) {
+            tl.fromTo(
+              el,
+              { x: 300, opacity: 0 },
+              { x: 0, opacity: 1, duration: 0.2, ease: "expo.out" },
+              w.start,
+            );
+          } else {
+            tl.fromTo(
+              el,
+              { scale: 0.4, opacity: 0 },
+              { scale: 1, opacity: 1, duration: 0.24, ease: "back.out(2.2)" },
+              w.start,
+            );
+          }
+
+          tl.to(el, { opacity: 0, duration: 0.1, ease: "power2.in" }, w.end);
+          tl.set(el, { opacity: 0, visibility: "hidden" }, w.end + 0.1);
+        });
+
+        tl.seek(0);
+        window.__timelines["caption-kinetic-slam"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/caption-kinetic-slam/demo.html b/docs/public/catalog/components/caption-kinetic-slam/demo.html
new file mode 100644
index 0000000000..dfc2b42a76
--- /dev/null
+++ b/docs/public/catalog/components/caption-kinetic-slam/demo.html
@@ -0,0 +1,192 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Kinetic Slam</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: #0a0a0a;
+      }
+      #kinetic-slam {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0a0a0a;
+      }
+      .kt-overlay {
+        position: absolute;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.45);
+        z-index: 1;
+        pointer-events: none;
+      }
+      #kt-container {
+        position: absolute;
+        inset: 0;
+        z-index: 10;
+        pointer-events: none;
+      }
+      .kt-word {
+        font-family: "Anton", sans-serif;
+        font-weight: 400;
+        text-transform: uppercase;
+        color: #ffffff;
+        position: absolute;
+        left: 0;
+        width: 100%;
+        text-align: center;
+        top: 50%;
+        letter-spacing: 0.04em;
+        line-height: 1;
+        opacity: 0;
+        visibility: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="kinetic-slam"
+      data-composition-id="caption-kinetic-slam"
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="kt-overlay"></div>
+      <div id="kt-container"></div>
+    </div>
+
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        var _fitCanvas = document.createElement("canvas");
+        var _fitCtx = _fitCanvas.getContext("2d");
+        function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {
+          var size = baseFontSize;
+          var minSize = Math.floor(baseFontSize * 0.45);
+          while (size > minSize) {
+            _fitCtx.font = fontWeight + " " + size + "px " + fontFamily;
+            if (_fitCtx.measureText(text).width <= maxWidth) return size;
+            size -= 2;
+          }
+          return minSize;
+        }
+
+        function mulberry32(seed) {
+          return function () {
+            seed |= 0;
+            seed = (seed + 0x6d2b79f5) | 0;
+            var t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
+            t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+            return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+          };
+        }
+
+        var WORDS = [
+          { text: "Every", start: 0.0, end: 0.3 },
+          { text: "great", start: 0.3, end: 0.55 },
+          { text: "video", start: 0.55, end: 0.85 },
+          { text: "starts", start: 0.85, end: 1.1 },
+          { text: "with", start: 1.1, end: 1.25 },
+          { text: "a", start: 1.25, end: 1.35 },
+          { text: "single", start: 1.35, end: 1.65 },
+          { text: "frame.", start: 1.65, end: 2.0 },
+          { text: "HyperFrames", start: 2.1, end: 2.65 },
+          { text: "lets", start: 2.65, end: 2.85 },
+          { text: "you", start: 2.85, end: 2.95 },
+          { text: "write", start: 2.95, end: 3.15 },
+          { text: "HTML", start: 3.15, end: 3.55 },
+          { text: "and", start: 3.55, end: 3.65 },
+          { text: "render", start: 3.65, end: 3.95 },
+          { text: "professional", start: 3.95, end: 4.45 },
+          { text: "video.", start: 4.45, end: 4.8 },
+          { text: "No", start: 4.9, end: 5.05 },
+          { text: "timeline.", start: 5.05, end: 5.45 },
+          { text: "No", start: 5.5, end: 5.65 },
+          { text: "drag", start: 5.65, end: 5.85 },
+          { text: "and", start: 5.85, end: 5.95 },
+          { text: "drop.", start: 5.95, end: 6.25 },
+          { text: "Just", start: 6.35, end: 6.55 },
+          { text: "code", start: 6.55, end: 6.8 },
+          { text: "that", start: 6.8, end: 6.95 },
+          { text: "becomes", start: 6.95, end: 7.3 },
+          { text: "cinema.", start: 7.3, end: 7.7 },
+        ];
+
+        var KEYWORDS = new Set([8, 12, 15, 24, 27]); // HyperFrames, HTML, professional, code, cinema.
+
+        var container = document.getElementById("kt-container");
+        var tl = gsap.timeline({ paused: true });
+
+        WORDS.forEach(function (w, wi) {
+          var el = document.createElement("div");
+          el.className = "kt-word";
+          el.id = "kt-w-" + wi;
+          el.textContent = w.text.toUpperCase();
+          el.style.fontSize =
+            fitFontSize(w.text.toUpperCase(), 220, "400", "'Anton', sans-serif", 1720) + "px";
+          if (KEYWORDS.has(wi)) el.style.color = "#FFD700";
+          container.appendChild(el);
+
+          gsap.set(el, { yPercent: -50 });
+
+          var entranceMode = wi % 4;
+          tl.set(el, { visibility: "visible" }, w.start);
+          if (entranceMode === 0) {
+            tl.fromTo(
+              el,
+              { y: -120, opacity: 0 },
+              { y: 0, opacity: 1, duration: 0.22, ease: "back.out(1.7)" },
+              w.start,
+            );
+          } else if (entranceMode === 1) {
+            tl.fromTo(
+              el,
+              { x: -300, opacity: 0 },
+              { x: 0, opacity: 1, duration: 0.2, ease: "expo.out" },
+              w.start,
+            );
+          } else if (entranceMode === 2) {
+            tl.fromTo(
+              el,
+              { x: 300, opacity: 0 },
+              { x: 0, opacity: 1, duration: 0.2, ease: "expo.out" },
+              w.start,
+            );
+          } else {
+            tl.fromTo(
+              el,
+              { scale: 0.4, opacity: 0 },
+              { scale: 1, opacity: 1, duration: 0.24, ease: "back.out(2.2)" },
+              w.start,
+            );
+          }
+
+          tl.to(el, { opacity: 0, duration: 0.1, ease: "power2.in" }, w.end);
+          tl.set(el, { opacity: 0, visibility: "hidden" }, w.end + 0.1);
+        });
+
+        tl.seek(0);
+        window.__timelines["caption-kinetic-slam"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/caption-matrix-decode/caption-matrix-decode.html b/docs/public/catalog/components/caption-matrix-decode/caption-matrix-decode.html
new file mode 100644
index 0000000000..e43f0f69db
--- /dev/null
+++ b/docs/public/catalog/components/caption-matrix-decode/caption-matrix-decode.html
@@ -0,0 +1,250 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Matrix Decode</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@700&display=swap"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: transparent;
+      }
+      #matrix-decode {
+        pointer-events: none;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent;
+      }
+      .sc-overlay {
+        position: absolute;
+        inset: 0;
+        background: transparent;
+        z-index: 1;
+        pointer-events: none;
+      }
+      #sc-container {
+        position: absolute;
+        inset: 0;
+        z-index: 10;
+        pointer-events: none;
+      }
+      .sc-group {
+        position: absolute;
+        bottom: 120px;
+        left: 0;
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: flex-end;
+        justify-content: center;
+        gap: 24px;
+        padding: 0 80px;
+        opacity: 0;
+        visibility: hidden;
+      }
+      .sc-word-wrap {
+        font-family: "Space Grotesk", sans-serif;
+        font-weight: 700;
+        font-size: 96px;
+        color: #00ff41;
+        display: inline-block;
+        letter-spacing: 0.04em;
+        line-height: 1;
+        position: relative;
+      }
+      .sc-real {
+        display: none;
+      }
+      .sc-scr0 {
+        display: none;
+      }
+      .sc-scr1 {
+        display: none;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="matrix-decode"
+      data-composition-id="caption-matrix-decode"
+      data-timeline-locked
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="sc-overlay"></div>
+      <div id="sc-container"></div>
+    </div>
+
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        var _fitCanvas = document.createElement("canvas");
+        var _fitCtx = _fitCanvas.getContext("2d");
+        function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {
+          var size = baseFontSize;
+          var minSize = Math.floor(baseFontSize * 0.45);
+          while (size > minSize) {
+            _fitCtx.font = fontWeight + " " + size + "px " + fontFamily;
+            if (_fitCtx.measureText(text).width <= maxWidth) return size;
+            size -= 2;
+          }
+          return minSize;
+        }
+
+        function mulberry32(seed) {
+          return function () {
+            seed |= 0;
+            seed = (seed + 0x6d2b79f5) | 0;
+            var t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
+            t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+            return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+          };
+        }
+
+        var ALPHANUM = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+
+        function scrambleChars(seed) {
+          var rng = mulberry32(seed);
+          var result = "";
+          for (var i = 0; i < 4; i++) {
+            result += ALPHANUM[Math.floor(rng() * ALPHANUM.length)];
+          }
+          return result;
+        }
+
+        var WORDS = [
+          { text: "Every", start: 0.0, end: 0.3 },
+          { text: "great", start: 0.3, end: 0.55 },
+          { text: "video", start: 0.55, end: 0.85 },
+          { text: "starts", start: 0.85, end: 1.1 },
+          { text: "with", start: 1.1, end: 1.25 },
+          { text: "a", start: 1.25, end: 1.35 },
+          { text: "single", start: 1.35, end: 1.65 },
+          { text: "frame.", start: 1.65, end: 2.0 },
+          { text: "HyperFrames", start: 2.1, end: 2.65 },
+          { text: "lets", start: 2.65, end: 2.85 },
+          { text: "you", start: 2.85, end: 2.95 },
+          { text: "write", start: 2.95, end: 3.15 },
+          { text: "HTML", start: 3.15, end: 3.55 },
+          { text: "and", start: 3.55, end: 3.65 },
+          { text: "render", start: 3.65, end: 3.95 },
+          { text: "professional", start: 3.95, end: 4.45 },
+          { text: "video.", start: 4.45, end: 4.8 },
+          { text: "No", start: 4.9, end: 5.05 },
+          { text: "timeline.", start: 5.05, end: 5.45 },
+          { text: "No", start: 5.5, end: 5.65 },
+          { text: "drag", start: 5.65, end: 5.85 },
+          { text: "and", start: 5.85, end: 5.95 },
+          { text: "drop.", start: 5.95, end: 6.25 },
+          { text: "Just", start: 6.35, end: 6.55 },
+          { text: "code", start: 6.55, end: 6.8 },
+          { text: "that", start: 6.8, end: 6.95 },
+          { text: "becomes", start: 6.95, end: 7.3 },
+          { text: "cinema.", start: 7.3, end: 7.7 },
+        ];
+
+        var GROUPS = [
+          { wordStart: 0, wordEnd: 3, start: 0.0, end: 1.35 },
+          { wordStart: 4, wordEnd: 7, start: 1.1, end: 2.35 },
+          { wordStart: 8, wordEnd: 8, start: 2.1, end: 2.9 },
+          { wordStart: 9, wordEnd: 12, start: 2.65, end: 3.8 },
+          { wordStart: 13, wordEnd: 15, start: 3.55, end: 4.7 },
+          { wordStart: 16, wordEnd: 16, start: 3.95, end: 5.0 },
+          { wordStart: 17, wordEnd: 19, start: 4.9, end: 5.7 },
+          { wordStart: 20, wordEnd: 22, start: 5.65, end: 6.5 },
+          { wordStart: 23, wordEnd: 24, start: 6.35, end: 7.05 },
+          { wordStart: 25, wordEnd: 27, start: 6.8, end: 7.9 },
+        ];
+
+        var container = document.getElementById("sc-container");
+        var tl = gsap.timeline({ paused: true });
+
+        GROUPS.forEach(function (g, gi) {
+          var groupWords = WORDS.slice(g.wordStart, g.wordEnd + 1);
+          var groupText = groupWords
+            .map(function (w) {
+              return w.text;
+            })
+            .join(" ");
+          var fontSize = fitFontSize(groupText, 96, "700", "'Space Grotesk', sans-serif", 1760);
+          var grp = document.createElement("div");
+          grp.className = "sc-group";
+          grp.id = "sc-grp-" + gi;
+
+          groupWords.forEach(function (w, i) {
+            var wi = g.wordStart + i;
+            var wordWrap = document.createElement("span");
+            wordWrap.className = "sc-word-wrap";
+            wordWrap.id = "sc-ww-" + wi;
+            wordWrap.style.fontSize = fontSize + "px";
+
+            var real = document.createElement("span");
+            real.className = "sc-real";
+            real.id = "sc-real-" + wi;
+            real.textContent = w.text;
+            wordWrap.appendChild(real);
+
+            var scr0 = document.createElement("span");
+            scr0.className = "sc-scr0";
+            scr0.id = "sc-scr0-" + wi;
+            scr0.textContent = scrambleChars(wi * 1000 + 0);
+            wordWrap.appendChild(scr0);
+
+            var scr1 = document.createElement("span");
+            scr1.className = "sc-scr1";
+            scr1.id = "sc-scr1-" + wi;
+            scr1.textContent = scrambleChars(wi * 1000 + 1);
+            wordWrap.appendChild(scr1);
+
+            grp.appendChild(wordWrap);
+          });
+
+          container.appendChild(grp);
+
+          tl.set(grp, { visibility: "visible", opacity: 0 }, g.start);
+          tl.fromTo(grp, { opacity: 0 }, { opacity: 1, duration: 0.1 }, g.start);
+
+          groupWords.forEach(function (w, i) {
+            var wi = g.wordStart + i;
+            var realEl = document.getElementById("sc-real-" + wi);
+            var scr0El = document.getElementById("sc-scr0-" + wi);
+            var scr1El = document.getElementById("sc-scr1-" + wi);
+
+            tl.set(scr0El, { display: "inline" }, w.start);
+            tl.set(scr1El, { display: "inline" }, w.start + 0.1);
+            tl.set(scr0El, { display: "none" }, w.start + 0.1);
+            tl.set(realEl, { display: "inline" }, w.start + 0.2);
+            tl.set(scr1El, { display: "none" }, w.start + 0.2);
+          });
+
+          tl.to(grp, { opacity: 0, duration: 0.12 }, g.end - 0.12);
+          tl.set(grp, { opacity: 0, visibility: "hidden" }, g.end);
+        });
+
+        window.__timelines["caption-matrix-decode"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/caption-matrix-decode/demo.html b/docs/public/catalog/components/caption-matrix-decode/demo.html
new file mode 100644
index 0000000000..35968c32c6
--- /dev/null
+++ b/docs/public/catalog/components/caption-matrix-decode/demo.html
@@ -0,0 +1,248 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Matrix Decode</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@700&display=swap"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: #000;
+      }
+      #matrix-decode {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000;
+      }
+      .sc-overlay {
+        position: absolute;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.85);
+        z-index: 1;
+        pointer-events: none;
+      }
+      #sc-container {
+        position: absolute;
+        inset: 0;
+        z-index: 10;
+        pointer-events: none;
+      }
+      .sc-group {
+        position: absolute;
+        bottom: 120px;
+        left: 0;
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: flex-end;
+        justify-content: center;
+        gap: 24px;
+        padding: 0 80px;
+        opacity: 0;
+        visibility: hidden;
+      }
+      .sc-word-wrap {
+        font-family: "Space Grotesk", sans-serif;
+        font-weight: 700;
+        font-size: 96px;
+        color: #00ff41;
+        display: inline-block;
+        letter-spacing: 0.04em;
+        line-height: 1;
+        position: relative;
+      }
+      .sc-real {
+        display: none;
+      }
+      .sc-scr0 {
+        display: none;
+      }
+      .sc-scr1 {
+        display: none;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="matrix-decode"
+      data-composition-id="caption-matrix-decode"
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="sc-overlay"></div>
+      <div id="sc-container"></div>
+    </div>
+
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        var _fitCanvas = document.createElement("canvas");
+        var _fitCtx = _fitCanvas.getContext("2d");
+        function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {
+          var size = baseFontSize;
+          var minSize = Math.floor(baseFontSize * 0.45);
+          while (size > minSize) {
+            _fitCtx.font = fontWeight + " " + size + "px " + fontFamily;
+            if (_fitCtx.measureText(text).width <= maxWidth) return size;
+            size -= 2;
+          }
+          return minSize;
+        }
+
+        function mulberry32(seed) {
+          return function () {
+            seed |= 0;
+            seed = (seed + 0x6d2b79f5) | 0;
+            var t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
+            t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+            return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+          };
+        }
+
+        var ALPHANUM = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+
+        function scrambleChars(seed) {
+          var rng = mulberry32(seed);
+          var result = "";
+          for (var i = 0; i < 4; i++) {
+            result += ALPHANUM[Math.floor(rng() * ALPHANUM.length)];
+          }
+          return result;
+        }
+
+        var WORDS = [
+          { text: "Every", start: 0.0, end: 0.3 },
+          { text: "great", start: 0.3, end: 0.55 },
+          { text: "video", start: 0.55, end: 0.85 },
+          { text: "starts", start: 0.85, end: 1.1 },
+          { text: "with", start: 1.1, end: 1.25 },
+          { text: "a", start: 1.25, end: 1.35 },
+          { text: "single", start: 1.35, end: 1.65 },
+          { text: "frame.", start: 1.65, end: 2.0 },
+          { text: "HyperFrames", start: 2.1, end: 2.65 },
+          { text: "lets", start: 2.65, end: 2.85 },
+          { text: "you", start: 2.85, end: 2.95 },
+          { text: "write", start: 2.95, end: 3.15 },
+          { text: "HTML", start: 3.15, end: 3.55 },
+          { text: "and", start: 3.55, end: 3.65 },
+          { text: "render", start: 3.65, end: 3.95 },
+          { text: "professional", start: 3.95, end: 4.45 },
+          { text: "video.", start: 4.45, end: 4.8 },
+          { text: "No", start: 4.9, end: 5.05 },
+          { text: "timeline.", start: 5.05, end: 5.45 },
+          { text: "No", start: 5.5, end: 5.65 },
+          { text: "drag", start: 5.65, end: 5.85 },
+          { text: "and", start: 5.85, end: 5.95 },
+          { text: "drop.", start: 5.95, end: 6.25 },
+          { text: "Just", start: 6.35, end: 6.55 },
+          { text: "code", start: 6.55, end: 6.8 },
+          { text: "that", start: 6.8, end: 6.95 },
+          { text: "becomes", start: 6.95, end: 7.3 },
+          { text: "cinema.", start: 7.3, end: 7.7 },
+        ];
+
+        var GROUPS = [
+          { wordStart: 0, wordEnd: 3, start: 0.0, end: 1.35 },
+          { wordStart: 4, wordEnd: 7, start: 1.1, end: 2.35 },
+          { wordStart: 8, wordEnd: 8, start: 2.1, end: 2.9 },
+          { wordStart: 9, wordEnd: 12, start: 2.65, end: 3.8 },
+          { wordStart: 13, wordEnd: 15, start: 3.55, end: 4.7 },
+          { wordStart: 16, wordEnd: 16, start: 3.95, end: 5.0 },
+          { wordStart: 17, wordEnd: 19, start: 4.9, end: 5.7 },
+          { wordStart: 20, wordEnd: 22, start: 5.65, end: 6.5 },
+          { wordStart: 23, wordEnd: 24, start: 6.35, end: 7.05 },
+          { wordStart: 25, wordEnd: 27, start: 6.8, end: 7.9 },
+        ];
+
+        var container = document.getElementById("sc-container");
+        var tl = gsap.timeline({ paused: true });
+
+        GROUPS.forEach(function (g, gi) {
+          var groupWords = WORDS.slice(g.wordStart, g.wordEnd + 1);
+          var groupText = groupWords
+            .map(function (w) {
+              return w.text;
+            })
+            .join(" ");
+          var fontSize = fitFontSize(groupText, 96, "700", "'Space Grotesk', sans-serif", 1760);
+          var grp = document.createElement("div");
+          grp.className = "sc-group";
+          grp.id = "sc-grp-" + gi;
+
+          groupWords.forEach(function (w, i) {
+            var wi = g.wordStart + i;
+            var wordWrap = document.createElement("span");
+            wordWrap.className = "sc-word-wrap";
+            wordWrap.id = "sc-ww-" + wi;
+            wordWrap.style.fontSize = fontSize + "px";
+
+            var real = document.createElement("span");
+            real.className = "sc-real";
+            real.id = "sc-real-" + wi;
+            real.textContent = w.text;
+            wordWrap.appendChild(real);
+
+            var scr0 = document.createElement("span");
+            scr0.className = "sc-scr0";
+            scr0.id = "sc-scr0-" + wi;
+            scr0.textContent = scrambleChars(wi * 1000 + 0);
+            wordWrap.appendChild(scr0);
+
+            var scr1 = document.createElement("span");
+            scr1.className = "sc-scr1";
+            scr1.id = "sc-scr1-" + wi;
+            scr1.textContent = scrambleChars(wi * 1000 + 1);
+            wordWrap.appendChild(scr1);
+
+            grp.appendChild(wordWrap);
+          });
+
+          container.appendChild(grp);
+
+          tl.set(grp, { visibility: "visible", opacity: 0 }, g.start);
+          tl.fromTo(grp, { opacity: 0 }, { opacity: 1, duration: 0.1 }, g.start);
+
+          groupWords.forEach(function (w, i) {
+            var wi = g.wordStart + i;
+            var realEl = document.getElementById("sc-real-" + wi);
+            var scr0El = document.getElementById("sc-scr0-" + wi);
+            var scr1El = document.getElementById("sc-scr1-" + wi);
+
+            tl.set(scr0El, { display: "inline" }, w.start);
+            tl.set(scr1El, { display: "inline" }, w.start + 0.1);
+            tl.set(scr0El, { display: "none" }, w.start + 0.1);
+            tl.set(realEl, { display: "inline" }, w.start + 0.2);
+            tl.set(scr1El, { display: "none" }, w.start + 0.2);
+          });
+
+          tl.to(grp, { opacity: 0, duration: 0.12 }, g.end - 0.12);
+          tl.set(grp, { opacity: 0, visibility: "hidden" }, g.end);
+        });
+
+        window.__timelines["caption-matrix-decode"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/caption-neon-accent/caption-neon-accent.html b/docs/public/catalog/components/caption-neon-accent/caption-neon-accent.html
new file mode 100644
index 0000000000..1313eeb8e3
--- /dev/null
+++ b/docs/public/catalog/components/caption-neon-accent/caption-neon-accent.html
@@ -0,0 +1,514 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Neon Accent</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@800&display=swap"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: transparent;
+        font-family: "Montserrat", Arial, sans-serif;
+      }
+
+      #neon-accent {
+        pointer-events: none;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent;
+      }
+
+      .caption-layer {
+        position: absolute;
+        inset: 0;
+        z-index: 20;
+        pointer-events: none;
+        transform: translateZ(0);
+      }
+
+      .safe-zone {
+        position: absolute;
+        bottom: 100px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 1400px;
+        height: 260px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .caption-group {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 1400px;
+        height: 260px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0;
+        transform-origin: 50% 50%;
+        will-change: transform;
+        backface-visibility: hidden;
+      }
+
+      .caption-copy {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        max-width: 1400px;
+        text-align: center;
+      }
+
+      .caption-line {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 16px;
+        width: max-content;
+        max-width: 1400px;
+        line-height: 1.1;
+        white-space: nowrap;
+      }
+
+      .caption-word {
+        display: inline-block;
+        color: #ffffff;
+        font-family: "Montserrat", Arial, sans-serif;
+        font-weight: 800;
+        font-size: 88px;
+        line-height: 1.1;
+        letter-spacing: 0;
+        text-transform: uppercase;
+      }
+
+      .caption-word.accent {
+        font-size: 106px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="neon-accent"
+      data-composition-id="caption-neon-accent"
+      data-timeline-locked
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="caption-layer" aria-hidden="true">
+        <div id="caption-stage" class="safe-zone"></div>
+      </div>
+    </div>
+
+    <script>
+      var DURATION = 8;
+      var SAFE_ZONE_WIDTH = 1400;
+      var BASE_FONT_SIZE = 88;
+      var ACCENT_FONT_SIZE = 106;
+      var MIN_FONT_SIZE = 62;
+      var MAX_WORDS_PER_GROUP = 4;
+      var WORD_SPACING = 16;
+      var PAUSE_THRESHOLD = 0.1;
+      var ENTRY_DURATION = 7 / 30;
+      var WIGGLE_DISTANCE = 14;
+      var WIGGLE_CYCLE = 2 / 1.3;
+      var FONT_WIDTH_SAFETY = 1.14;
+      var PRIMARY_COLOR = "#FFFFFF";
+      var ACCENT_COLORS = ["#53FF01", "#FF0002", "#FCFF00"];
+      var TRANSITION_WORDS = new Set([
+        "the",
+        "a",
+        "an",
+        "and",
+        "or",
+        "but",
+        "is",
+        "are",
+        "was",
+        "were",
+        "to",
+        "of",
+        "in",
+        "on",
+        "at",
+        "for",
+        "with",
+        "by",
+        "from",
+        "as",
+        "it",
+        "its",
+        "this",
+        "that",
+        "these",
+        "those",
+        "be",
+        "been",
+        "have",
+        "has",
+        "had",
+        "do",
+        "does",
+        "did",
+        "will",
+        "would",
+        "could",
+        "should",
+        "may",
+        "might",
+        "must",
+        "can",
+        "if",
+        "then",
+        "so",
+        "just",
+        "not",
+        "no",
+        "yes",
+        "up",
+        "out",
+        "about",
+        "lets",
+        "you",
+        "write",
+        "render",
+      ]);
+      var KEYWORDS = new Set(["hyperframes", "html", "professional", "code", "cinema"]);
+
+      var TRANSCRIPT = [
+        { text: "Every", start: 0.0, end: 0.3 },
+        { text: "great", start: 0.3, end: 0.55 },
+        { text: "video", start: 0.55, end: 0.85 },
+        { text: "starts", start: 0.85, end: 1.1 },
+        { text: "with", start: 1.1, end: 1.25 },
+        { text: "a", start: 1.25, end: 1.35 },
+        { text: "single", start: 1.35, end: 1.65 },
+        { text: "frame.", start: 1.65, end: 2.0 },
+        { text: "HyperFrames", start: 2.1, end: 2.65 },
+        { text: "lets", start: 2.65, end: 2.85 },
+        { text: "you", start: 2.85, end: 2.95 },
+        { text: "write", start: 2.95, end: 3.15 },
+        { text: "HTML", start: 3.15, end: 3.55 },
+        { text: "and", start: 3.55, end: 3.65 },
+        { text: "render", start: 3.65, end: 3.95 },
+        { text: "professional", start: 3.95, end: 4.45 },
+        { text: "video.", start: 4.45, end: 4.8 },
+        { text: "No", start: 4.9, end: 5.05 },
+        { text: "timeline.", start: 5.05, end: 5.45 },
+        { text: "No", start: 5.5, end: 5.65 },
+        { text: "drag", start: 5.65, end: 5.85 },
+        { text: "and", start: 5.85, end: 5.95 },
+        { text: "drop.", start: 5.95, end: 6.25 },
+        { text: "Just", start: 6.35, end: 6.55 },
+        { text: "code", start: 6.55, end: 6.8 },
+        { text: "that", start: 6.8, end: 6.95 },
+        { text: "becomes", start: 6.95, end: 7.3 },
+        { text: "cinema.", start: 7.3, end: 7.7 },
+      ];
+
+      var _fitCanvas = document.createElement("canvas");
+      var _fitCtx = _fitCanvas.getContext("2d");
+      function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {
+        var size = baseFontSize;
+        var minSize = Math.floor(baseFontSize * 0.45);
+        while (size > minSize) {
+          _fitCtx.font = fontWeight + " " + size + "px " + fontFamily;
+          if (_fitCtx.measureText(text).width <= maxWidth) return size;
+          size -= 2;
+        }
+        return minSize;
+      }
+
+      gsap.registerPlugin && gsap.registerPlugin();
+
+      function cleanText(text) {
+        return String(text || "").trim();
+      }
+
+      function normalizeWords(rawWords) {
+        return rawWords
+          .map(function (item) {
+            return {
+              text: cleanText(item.word || item.text),
+              start: Math.max(0, Number(item.start) || 0),
+              end: Math.min(DURATION, Math.max(Number(item.start) || 0, Number(item.end) || 0)),
+            };
+          })
+          .filter(function (word) {
+            return word.text.length > 0;
+          });
+      }
+
+      var measureCanvas = document.createElement("canvas");
+      var measureContext = measureCanvas.getContext("2d");
+
+      function seededRandom(seed) {
+        var x = Math.sin(seed * 9999) * 10000;
+        return x - Math.floor(x);
+      }
+
+      function isKeyword(text) {
+        return KEYWORDS.has(text.toLowerCase().replace(/[^a-z]/g, ""));
+      }
+
+      function assignWordColors(words, groupIndex) {
+        return words.map(function (word) {
+          if (isKeyword(word.text)) {
+            var colorIndex = Math.floor(seededRandom(groupIndex * 23 + 7) * ACCENT_COLORS.length);
+            return ACCENT_COLORS[colorIndex];
+          }
+          var clean = word.text.toLowerCase().replace(/[^a-z']/g, "");
+          if (TRANSITION_WORDS.has(clean)) return PRIMARY_COLOR;
+          var rand = seededRandom(groupIndex * 7 + words.indexOf(word));
+          if (rand > 0.6) {
+            var ci = Math.floor(rand * ACCENT_COLORS.length) % ACCENT_COLORS.length;
+            return ACCENT_COLORS[ci];
+          }
+          return PRIMARY_COLOR;
+        });
+      }
+
+      function measureWord(word, color, fontSize) {
+        var size = color === PRIMARY_COLOR ? fontSize : fontSize * 1.2;
+        measureContext.font = "800 " + size + "px Montserrat";
+        return measureContext.measureText(word.text.toUpperCase()).width * FONT_WIDTH_SAFETY;
+      }
+
+      function measureLineWidth(words, colors, fontSize) {
+        return words.reduce(function (total, word, index) {
+          return (
+            total +
+            measureWord(word, colors[index] || PRIMARY_COLOR, fontSize) +
+            (index ? WORD_SPACING : 0)
+          );
+        }, 0);
+      }
+
+      function splitLinesForGroup(words, colors, fontSize) {
+        var maxLineWidth = SAFE_ZONE_WIDTH;
+        if (
+          words.some(function (word, i) {
+            return measureWord(word, colors[i] || PRIMARY_COLOR, fontSize) > maxLineWidth;
+          })
+        )
+          return null;
+        if (measureLineWidth(words, colors, fontSize) <= maxLineWidth)
+          return [{ words: words, colors: colors }];
+        var best = null;
+        var bestDiff = Infinity;
+        for (var split = 1; split < words.length; split++) {
+          var fw = words.slice(0, split),
+            sw = words.slice(split);
+          var fc = colors.slice(0, split),
+            sc = colors.slice(split);
+          var fW = measureLineWidth(fw, fc, fontSize);
+          var sW = measureLineWidth(sw, sc, fontSize);
+          if (fW <= maxLineWidth && sW <= maxLineWidth) {
+            var diff = Math.abs(fW - sW);
+            if (diff < bestDiff) {
+              best = [
+                { words: fw, colors: fc },
+                { words: sw, colors: sc },
+              ];
+              bestDiff = diff;
+            }
+          }
+        }
+        return best;
+      }
+
+      function makeGroups(words) {
+        var groups = [];
+        var current = [];
+        words.forEach(function (word, index) {
+          var nextWord = words[index + 1];
+          var testGroup = current.concat([word]);
+          var exceedsWords = testGroup.length > MAX_WORDS_PER_GROUP;
+          var colors = assignWordColors(testGroup, groups.length);
+          var exceedsFit = !splitLinesForGroup(testGroup, colors, BASE_FONT_SIZE);
+          if (exceedsWords || exceedsFit) {
+            if (current.length) groups.push(makeGroup(current, groups.length));
+            current = [word];
+            return;
+          }
+          current.push(word);
+          var punctuation = /[,.:!?]$/.test(word.text);
+          var pause = nextWord ? nextWord.start - word.end : 0;
+          if (
+            !nextWord ||
+            punctuation ||
+            pause >= PAUSE_THRESHOLD ||
+            current.length >= MAX_WORDS_PER_GROUP
+          ) {
+            groups.push(makeGroup(current, groups.length));
+            current = [];
+          }
+        });
+        if (current.length) groups.push(makeGroup(current, groups.length));
+        return groups;
+      }
+
+      function makeGroup(words, groupIndex) {
+        var colors = assignWordColors(words, groupIndex);
+        var groupText = words
+          .map(function (w) {
+            return w.text.toUpperCase();
+          })
+          .join(" ");
+        var fontSize = fitFontSize(groupText, BASE_FONT_SIZE, "800", "Montserrat", SAFE_ZONE_WIDTH);
+        while (fontSize > MIN_FONT_SIZE && !splitLinesForGroup(words, colors, fontSize)) {
+          fontSize -= 2;
+        }
+        return {
+          words: words.slice(),
+          colors: colors,
+          fontSize: fontSize,
+          lines: splitLinesForGroup(words, colors, fontSize) || [{ words: words, colors: colors }],
+          start: words[0].start,
+          end: words[words.length - 1].end,
+        };
+      }
+
+      function shadowForColor(color) {
+        var hex = color.replace("#", "");
+        var r = parseInt(hex.slice(0, 2), 16);
+        var g = parseInt(hex.slice(2, 4), 16);
+        var b = parseInt(hex.slice(4, 6), 16);
+        var glow =
+          "0 0 4px rgba(" +
+          r +
+          "," +
+          g +
+          "," +
+          b +
+          ",1), 0 0 10px rgba(" +
+          r +
+          "," +
+          g +
+          "," +
+          b +
+          ",0.9), 0 0 20px rgba(" +
+          r +
+          "," +
+          g +
+          "," +
+          b +
+          ",0.7), 0 0 40px rgba(" +
+          r +
+          "," +
+          g +
+          "," +
+          b +
+          ",0.4)";
+        return "0 8px 16px rgba(0,0,0,0.8), 0 16px 40px rgba(0,0,0,0.6), " + glow;
+      }
+
+      function buildCaptions(groups) {
+        var stage = document.getElementById("caption-stage");
+        groups.forEach(function (group, groupIndex) {
+          var groupEl = document.createElement("div");
+          var copyEl = document.createElement("div");
+          groupEl.id = "caption-group-" + groupIndex;
+          groupEl.className = "caption-group";
+          copyEl.className = "caption-copy";
+          group.lines.slice(0, 2).forEach(function (line) {
+            var lineEl = document.createElement("div");
+            lineEl.className = "caption-line";
+            line.words.forEach(function (word, wordIndex) {
+              var color = line.colors[wordIndex] || PRIMARY_COLOR;
+              var wordEl = document.createElement("span");
+              wordEl.className = color === PRIMARY_COLOR ? "caption-word" : "caption-word accent";
+              wordEl.textContent = word.text.toUpperCase();
+              wordEl.style.color = color;
+              wordEl.style.fontSize =
+                color === PRIMARY_COLOR ? group.fontSize + "px" : group.fontSize * 1.2 + "px";
+              wordEl.style.textShadow = shadowForColor(color);
+              lineEl.appendChild(wordEl);
+            });
+            copyEl.appendChild(lineEl);
+          });
+          groupEl.appendChild(copyEl);
+          stage.appendChild(groupEl);
+        });
+      }
+
+      var WORDS = normalizeWords(TRANSCRIPT);
+      var GROUPS = makeGroups(WORDS);
+      buildCaptions(GROUPS);
+
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+
+      var visibleStarts = GROUPS.map(function (group, groupIndex) {
+        var prev = GROUPS[groupIndex - 1];
+        var availableGap = prev ? Math.max(0, group.start - prev.end) : ENTRY_DURATION;
+        var entryLead = Math.min(ENTRY_DURATION, availableGap);
+        return Math.max(0, group.start - entryLead);
+      });
+
+      var allGroupEls = GROUPS.map(function (_, i) {
+        return document.getElementById("caption-group-" + i);
+      });
+
+      GROUPS.forEach(function (group, groupIndex) {
+        var groupEl = allGroupEls[groupIndex];
+        var visibleStart = visibleStarts[groupIndex];
+        var visibleEnd = groupIndex < GROUPS.length - 1 ? visibleStarts[groupIndex + 1] : DURATION;
+        var direction = groupIndex % 2 === 0 ? -1 : 1;
+        var D = WIGGLE_DISTANCE * direction;
+        var wiggleCycles = Math.max(1, Math.ceil((visibleEnd - visibleStart) / WIGGLE_CYCLE));
+
+        allGroupEls.forEach(function (otherEl, otherIndex) {
+          if (otherIndex !== groupIndex) tl.set(otherEl, { opacity: 0 }, visibleStart);
+        });
+
+        tl.set(groupEl, { opacity: 0, scale: 0.65, x: 0, y: 0 }, visibleStart);
+        tl.to(
+          groupEl,
+          { opacity: 1, scale: 1, duration: ENTRY_DURATION, ease: "power3.out", force3D: true },
+          visibleStart,
+        );
+        tl.to(
+          groupEl,
+          {
+            x: D,
+            y: D,
+            duration: WIGGLE_CYCLE / 2,
+            ease: "sine.inOut",
+            yoyo: true,
+            repeat: Math.max(0, wiggleCycles * 2 - 1),
+            force3D: true,
+          },
+          visibleStart,
+        );
+        tl.set(groupEl, { opacity: 0 }, visibleEnd);
+      });
+
+      window.__timelines["caption-neon-accent"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/caption-neon-accent/demo.html b/docs/public/catalog/components/caption-neon-accent/demo.html
new file mode 100644
index 0000000000..90f45018e8
--- /dev/null
+++ b/docs/public/catalog/components/caption-neon-accent/demo.html
@@ -0,0 +1,512 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Neon Accent</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@800&display=swap"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: #000000;
+        font-family: "Montserrat", Arial, sans-serif;
+      }
+
+      #neon-accent {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000000;
+      }
+
+      .caption-layer {
+        position: absolute;
+        inset: 0;
+        z-index: 20;
+        pointer-events: none;
+        transform: translateZ(0);
+      }
+
+      .safe-zone {
+        position: absolute;
+        bottom: 100px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 1400px;
+        height: 260px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .caption-group {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 1400px;
+        height: 260px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0;
+        transform-origin: 50% 50%;
+        will-change: transform;
+        backface-visibility: hidden;
+      }
+
+      .caption-copy {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        max-width: 1400px;
+        text-align: center;
+      }
+
+      .caption-line {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 16px;
+        width: max-content;
+        max-width: 1400px;
+        line-height: 1.1;
+        white-space: nowrap;
+      }
+
+      .caption-word {
+        display: inline-block;
+        color: #ffffff;
+        font-family: "Montserrat", Arial, sans-serif;
+        font-weight: 800;
+        font-size: 88px;
+        line-height: 1.1;
+        letter-spacing: 0;
+        text-transform: uppercase;
+      }
+
+      .caption-word.accent {
+        font-size: 106px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="neon-accent"
+      data-composition-id="caption-neon-accent"
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="caption-layer" aria-hidden="true">
+        <div id="caption-stage" class="safe-zone"></div>
+      </div>
+    </div>
+
+    <script>
+      var DURATION = 8;
+      var SAFE_ZONE_WIDTH = 1400;
+      var BASE_FONT_SIZE = 88;
+      var ACCENT_FONT_SIZE = 106;
+      var MIN_FONT_SIZE = 62;
+      var MAX_WORDS_PER_GROUP = 4;
+      var WORD_SPACING = 16;
+      var PAUSE_THRESHOLD = 0.1;
+      var ENTRY_DURATION = 7 / 30;
+      var WIGGLE_DISTANCE = 14;
+      var WIGGLE_CYCLE = 2 / 1.3;
+      var FONT_WIDTH_SAFETY = 1.14;
+      var PRIMARY_COLOR = "#FFFFFF";
+      var ACCENT_COLORS = ["#53FF01", "#FF0002", "#FCFF00"];
+      var TRANSITION_WORDS = new Set([
+        "the",
+        "a",
+        "an",
+        "and",
+        "or",
+        "but",
+        "is",
+        "are",
+        "was",
+        "were",
+        "to",
+        "of",
+        "in",
+        "on",
+        "at",
+        "for",
+        "with",
+        "by",
+        "from",
+        "as",
+        "it",
+        "its",
+        "this",
+        "that",
+        "these",
+        "those",
+        "be",
+        "been",
+        "have",
+        "has",
+        "had",
+        "do",
+        "does",
+        "did",
+        "will",
+        "would",
+        "could",
+        "should",
+        "may",
+        "might",
+        "must",
+        "can",
+        "if",
+        "then",
+        "so",
+        "just",
+        "not",
+        "no",
+        "yes",
+        "up",
+        "out",
+        "about",
+        "lets",
+        "you",
+        "write",
+        "render",
+      ]);
+      var KEYWORDS = new Set(["hyperframes", "html", "professional", "code", "cinema"]);
+
+      var TRANSCRIPT = [
+        { text: "Every", start: 0.0, end: 0.3 },
+        { text: "great", start: 0.3, end: 0.55 },
+        { text: "video", start: 0.55, end: 0.85 },
+        { text: "starts", start: 0.85, end: 1.1 },
+        { text: "with", start: 1.1, end: 1.25 },
+        { text: "a", start: 1.25, end: 1.35 },
+        { text: "single", start: 1.35, end: 1.65 },
+        { text: "frame.", start: 1.65, end: 2.0 },
+        { text: "HyperFrames", start: 2.1, end: 2.65 },
+        { text: "lets", start: 2.65, end: 2.85 },
+        { text: "you", start: 2.85, end: 2.95 },
+        { text: "write", start: 2.95, end: 3.15 },
+        { text: "HTML", start: 3.15, end: 3.55 },
+        { text: "and", start: 3.55, end: 3.65 },
+        { text: "render", start: 3.65, end: 3.95 },
+        { text: "professional", start: 3.95, end: 4.45 },
+        { text: "video.", start: 4.45, end: 4.8 },
+        { text: "No", start: 4.9, end: 5.05 },
+        { text: "timeline.", start: 5.05, end: 5.45 },
+        { text: "No", start: 5.5, end: 5.65 },
+        { text: "drag", start: 5.65, end: 5.85 },
+        { text: "and", start: 5.85, end: 5.95 },
+        { text: "drop.", start: 5.95, end: 6.25 },
+        { text: "Just", start: 6.35, end: 6.55 },
+        { text: "code", start: 6.55, end: 6.8 },
+        { text: "that", start: 6.8, end: 6.95 },
+        { text: "becomes", start: 6.95, end: 7.3 },
+        { text: "cinema.", start: 7.3, end: 7.7 },
+      ];
+
+      var _fitCanvas = document.createElement("canvas");
+      var _fitCtx = _fitCanvas.getContext("2d");
+      function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {
+        var size = baseFontSize;
+        var minSize = Math.floor(baseFontSize * 0.45);
+        while (size > minSize) {
+          _fitCtx.font = fontWeight + " " + size + "px " + fontFamily;
+          if (_fitCtx.measureText(text).width <= maxWidth) return size;
+          size -= 2;
+        }
+        return minSize;
+      }
+
+      gsap.registerPlugin && gsap.registerPlugin();
+
+      function cleanText(text) {
+        return String(text || "").trim();
+      }
+
+      function normalizeWords(rawWords) {
+        return rawWords
+          .map(function (item) {
+            return {
+              text: cleanText(item.word || item.text),
+              start: Math.max(0, Number(item.start) || 0),
+              end: Math.min(DURATION, Math.max(Number(item.start) || 0, Number(item.end) || 0)),
+            };
+          })
+          .filter(function (word) {
+            return word.text.length > 0;
+          });
+      }
+
+      var measureCanvas = document.createElement("canvas");
+      var measureContext = measureCanvas.getContext("2d");
+
+      function seededRandom(seed) {
+        var x = Math.sin(seed * 9999) * 10000;
+        return x - Math.floor(x);
+      }
+
+      function isKeyword(text) {
+        return KEYWORDS.has(text.toLowerCase().replace(/[^a-z]/g, ""));
+      }
+
+      function assignWordColors(words, groupIndex) {
+        return words.map(function (word) {
+          if (isKeyword(word.text)) {
+            var colorIndex = Math.floor(seededRandom(groupIndex * 23 + 7) * ACCENT_COLORS.length);
+            return ACCENT_COLORS[colorIndex];
+          }
+          var clean = word.text.toLowerCase().replace(/[^a-z']/g, "");
+          if (TRANSITION_WORDS.has(clean)) return PRIMARY_COLOR;
+          var rand = seededRandom(groupIndex * 7 + words.indexOf(word));
+          if (rand > 0.6) {
+            var ci = Math.floor(rand * ACCENT_COLORS.length) % ACCENT_COLORS.length;
+            return ACCENT_COLORS[ci];
+          }
+          return PRIMARY_COLOR;
+        });
+      }
+
+      function measureWord(word, color, fontSize) {
+        var size = color === PRIMARY_COLOR ? fontSize : fontSize * 1.2;
+        measureContext.font = "800 " + size + "px Montserrat";
+        return measureContext.measureText(word.text.toUpperCase()).width * FONT_WIDTH_SAFETY;
+      }
+
+      function measureLineWidth(words, colors, fontSize) {
+        return words.reduce(function (total, word, index) {
+          return (
+            total +
+            measureWord(word, colors[index] || PRIMARY_COLOR, fontSize) +
+            (index ? WORD_SPACING : 0)
+          );
+        }, 0);
+      }
+
+      function splitLinesForGroup(words, colors, fontSize) {
+        var maxLineWidth = SAFE_ZONE_WIDTH;
+        if (
+          words.some(function (word, i) {
+            return measureWord(word, colors[i] || PRIMARY_COLOR, fontSize) > maxLineWidth;
+          })
+        )
+          return null;
+        if (measureLineWidth(words, colors, fontSize) <= maxLineWidth)
+          return [{ words: words, colors: colors }];
+        var best = null;
+        var bestDiff = Infinity;
+        for (var split = 1; split < words.length; split++) {
+          var fw = words.slice(0, split),
+            sw = words.slice(split);
+          var fc = colors.slice(0, split),
+            sc = colors.slice(split);
+          var fW = measureLineWidth(fw, fc, fontSize);
+          var sW = measureLineWidth(sw, sc, fontSize);
+          if (fW <= maxLineWidth && sW <= maxLineWidth) {
+            var diff = Math.abs(fW - sW);
+            if (diff < bestDiff) {
+              best = [
+                { words: fw, colors: fc },
+                { words: sw, colors: sc },
+              ];
+              bestDiff = diff;
+            }
+          }
+        }
+        return best;
+      }
+
+      function makeGroups(words) {
+        var groups = [];
+        var current = [];
+        words.forEach(function (word, index) {
+          var nextWord = words[index + 1];
+          var testGroup = current.concat([word]);
+          var exceedsWords = testGroup.length > MAX_WORDS_PER_GROUP;
+          var colors = assignWordColors(testGroup, groups.length);
+          var exceedsFit = !splitLinesForGroup(testGroup, colors, BASE_FONT_SIZE);
+          if (exceedsWords || exceedsFit) {
+            if (current.length) groups.push(makeGroup(current, groups.length));
+            current = [word];
+            return;
+          }
+          current.push(word);
+          var punctuation = /[,.:!?]$/.test(word.text);
+          var pause = nextWord ? nextWord.start - word.end : 0;
+          if (
+            !nextWord ||
+            punctuation ||
+            pause >= PAUSE_THRESHOLD ||
+            current.length >= MAX_WORDS_PER_GROUP
+          ) {
+            groups.push(makeGroup(current, groups.length));
+            current = [];
+          }
+        });
+        if (current.length) groups.push(makeGroup(current, groups.length));
+        return groups;
+      }
+
+      function makeGroup(words, groupIndex) {
+        var colors = assignWordColors(words, groupIndex);
+        var groupText = words
+          .map(function (w) {
+            return w.text.toUpperCase();
+          })
+          .join(" ");
+        var fontSize = fitFontSize(groupText, BASE_FONT_SIZE, "800", "Montserrat", SAFE_ZONE_WIDTH);
+        while (fontSize > MIN_FONT_SIZE && !splitLinesForGroup(words, colors, fontSize)) {
+          fontSize -= 2;
+        }
+        return {
+          words: words.slice(),
+          colors: colors,
+          fontSize: fontSize,
+          lines: splitLinesForGroup(words, colors, fontSize) || [{ words: words, colors: colors }],
+          start: words[0].start,
+          end: words[words.length - 1].end,
+        };
+      }
+
+      function shadowForColor(color) {
+        var hex = color.replace("#", "");
+        var r = parseInt(hex.slice(0, 2), 16);
+        var g = parseInt(hex.slice(2, 4), 16);
+        var b = parseInt(hex.slice(4, 6), 16);
+        var glow =
+          "0 0 4px rgba(" +
+          r +
+          "," +
+          g +
+          "," +
+          b +
+          ",1), 0 0 10px rgba(" +
+          r +
+          "," +
+          g +
+          "," +
+          b +
+          ",0.9), 0 0 20px rgba(" +
+          r +
+          "," +
+          g +
+          "," +
+          b +
+          ",0.7), 0 0 40px rgba(" +
+          r +
+          "," +
+          g +
+          "," +
+          b +
+          ",0.4)";
+        return "0 8px 16px rgba(0,0,0,0.8), 0 16px 40px rgba(0,0,0,0.6), " + glow;
+      }
+
+      function buildCaptions(groups) {
+        var stage = document.getElementById("caption-stage");
+        groups.forEach(function (group, groupIndex) {
+          var groupEl = document.createElement("div");
+          var copyEl = document.createElement("div");
+          groupEl.id = "caption-group-" + groupIndex;
+          groupEl.className = "caption-group";
+          copyEl.className = "caption-copy";
+          group.lines.slice(0, 2).forEach(function (line) {
+            var lineEl = document.createElement("div");
+            lineEl.className = "caption-line";
+            line.words.forEach(function (word, wordIndex) {
+              var color = line.colors[wordIndex] || PRIMARY_COLOR;
+              var wordEl = document.createElement("span");
+              wordEl.className = color === PRIMARY_COLOR ? "caption-word" : "caption-word accent";
+              wordEl.textContent = word.text.toUpperCase();
+              wordEl.style.color = color;
+              wordEl.style.fontSize =
+                color === PRIMARY_COLOR ? group.fontSize + "px" : group.fontSize * 1.2 + "px";
+              wordEl.style.textShadow = shadowForColor(color);
+              lineEl.appendChild(wordEl);
+            });
+            copyEl.appendChild(lineEl);
+          });
+          groupEl.appendChild(copyEl);
+          stage.appendChild(groupEl);
+        });
+      }
+
+      var WORDS = normalizeWords(TRANSCRIPT);
+      var GROUPS = makeGroups(WORDS);
+      buildCaptions(GROUPS);
+
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+
+      var visibleStarts = GROUPS.map(function (group, groupIndex) {
+        var prev = GROUPS[groupIndex - 1];
+        var availableGap = prev ? Math.max(0, group.start - prev.end) : ENTRY_DURATION;
+        var entryLead = Math.min(ENTRY_DURATION, availableGap);
+        return Math.max(0, group.start - entryLead);
+      });
+
+      var allGroupEls = GROUPS.map(function (_, i) {
+        return document.getElementById("caption-group-" + i);
+      });
+
+      GROUPS.forEach(function (group, groupIndex) {
+        var groupEl = allGroupEls[groupIndex];
+        var visibleStart = visibleStarts[groupIndex];
+        var visibleEnd = groupIndex < GROUPS.length - 1 ? visibleStarts[groupIndex + 1] : DURATION;
+        var direction = groupIndex % 2 === 0 ? -1 : 1;
+        var D = WIGGLE_DISTANCE * direction;
+        var wiggleCycles = Math.max(1, Math.ceil((visibleEnd - visibleStart) / WIGGLE_CYCLE));
+
+        allGroupEls.forEach(function (otherEl, otherIndex) {
+          if (otherIndex !== groupIndex) tl.set(otherEl, { opacity: 0 }, visibleStart);
+        });
+
+        tl.set(groupEl, { opacity: 0, scale: 0.65, x: 0, y: 0 }, visibleStart);
+        tl.to(
+          groupEl,
+          { opacity: 1, scale: 1, duration: ENTRY_DURATION, ease: "power3.out", force3D: true },
+          visibleStart,
+        );
+        tl.to(
+          groupEl,
+          {
+            x: D,
+            y: D,
+            duration: WIGGLE_CYCLE / 2,
+            ease: "sine.inOut",
+            yoyo: true,
+            repeat: Math.max(0, wiggleCycles * 2 - 1),
+            force3D: true,
+          },
+          visibleStart,
+        );
+        tl.set(groupEl, { opacity: 0 }, visibleEnd);
+      });
+
+      window.__timelines["caption-neon-accent"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/caption-neon-glow/caption-neon-glow.html b/docs/public/catalog/components/caption-neon-glow/caption-neon-glow.html
new file mode 100644
index 0000000000..736507e71e
--- /dev/null
+++ b/docs/public/catalog/components/caption-neon-glow/caption-neon-glow.html
@@ -0,0 +1,216 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Neon Glow</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Outfit:wght@900&display=swap"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: transparent;
+      }
+      #neon-glow {
+        pointer-events: none;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent;
+      }
+      .ne-overlay {
+        position: absolute;
+        inset: 0;
+        background: transparent;
+        z-index: 1;
+        pointer-events: none;
+      }
+      #ne-container {
+        position: absolute;
+        inset: 0;
+        z-index: 10;
+        pointer-events: none;
+      }
+      .ne-group {
+        position: absolute;
+        bottom: 120px;
+        left: 0;
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: flex-end;
+        justify-content: center;
+        gap: 24px;
+        padding: 0 80px;
+        opacity: 0;
+        visibility: hidden;
+      }
+      .ne-word {
+        font-family: "Outfit", sans-serif;
+        font-weight: 900;
+        font-size: 96px;
+        text-transform: uppercase;
+        color: rgba(0, 255, 240, 0.14);
+        display: inline-block;
+        letter-spacing: 0.04em;
+        line-height: 1;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="neon-glow"
+      data-composition-id="caption-neon-glow"
+      data-timeline-locked
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="ne-overlay"></div>
+      <div id="ne-container"></div>
+    </div>
+
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        var _fitCanvas = document.createElement("canvas");
+        var _fitCtx = _fitCanvas.getContext("2d");
+        function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {
+          var size = baseFontSize;
+          var minSize = Math.floor(baseFontSize * 0.45);
+          while (size > minSize) {
+            _fitCtx.font = fontWeight + " " + size + "px " + fontFamily;
+            if (_fitCtx.measureText(text).width <= maxWidth) return size;
+            size -= 2;
+          }
+          return minSize;
+        }
+
+        var WORDS = [
+          { text: "Every", start: 0.0, end: 0.3 },
+          { text: "great", start: 0.3, end: 0.55 },
+          { text: "video", start: 0.55, end: 0.85 },
+          { text: "starts", start: 0.85, end: 1.1 },
+          { text: "with", start: 1.1, end: 1.25 },
+          { text: "a", start: 1.25, end: 1.35 },
+          { text: "single", start: 1.35, end: 1.65 },
+          { text: "frame.", start: 1.65, end: 2.0 },
+          { text: "HyperFrames", start: 2.1, end: 2.65 },
+          { text: "lets", start: 2.65, end: 2.85 },
+          { text: "you", start: 2.85, end: 2.95 },
+          { text: "write", start: 2.95, end: 3.15 },
+          { text: "HTML", start: 3.15, end: 3.55 },
+          { text: "and", start: 3.55, end: 3.65 },
+          { text: "render", start: 3.65, end: 3.95 },
+          { text: "professional", start: 3.95, end: 4.45 },
+          { text: "video.", start: 4.45, end: 4.8 },
+          { text: "No", start: 4.9, end: 5.05 },
+          { text: "timeline.", start: 5.05, end: 5.45 },
+          { text: "No", start: 5.5, end: 5.65 },
+          { text: "drag", start: 5.65, end: 5.85 },
+          { text: "and", start: 5.85, end: 5.95 },
+          { text: "drop.", start: 5.95, end: 6.25 },
+          { text: "Just", start: 6.35, end: 6.55 },
+          { text: "code", start: 6.55, end: 6.8 },
+          { text: "that", start: 6.8, end: 6.95 },
+          { text: "becomes", start: 6.95, end: 7.3 },
+          { text: "cinema.", start: 7.3, end: 7.7 },
+        ];
+
+        var GROUPS = [
+          { wordStart: 0, wordEnd: 3, start: 0.0, end: 1.05 },
+          { wordStart: 4, wordEnd: 7, start: 1.1, end: 2.05 },
+          { wordStart: 8, wordEnd: 8, start: 2.1, end: 2.6 },
+          { wordStart: 9, wordEnd: 12, start: 2.65, end: 3.5 },
+          { wordStart: 13, wordEnd: 15, start: 3.55, end: 4.4 },
+          { wordStart: 16, wordEnd: 16, start: 3.95, end: 4.75 },
+          { wordStart: 17, wordEnd: 19, start: 4.9, end: 5.4 },
+          { wordStart: 20, wordEnd: 22, start: 5.65, end: 6.2 },
+          { wordStart: 23, wordEnd: 24, start: 6.35, end: 6.75 },
+          { wordStart: 25, wordEnd: 27, start: 6.8, end: 7.8 },
+        ];
+
+        // Keywords get pink glow; others get cyan glow
+        var KEYWORDS = new Set([8, 12, 15, 24, 27]); // HyperFrames, HTML, professional, code, cinema.
+
+        var container = document.getElementById("ne-container");
+        var tl = gsap.timeline({ paused: true });
+
+        GROUPS.forEach(function (g, gi) {
+          var groupWords = WORDS.slice(g.wordStart, g.wordEnd + 1);
+          var groupText = groupWords
+            .map(function (w) {
+              return w.text.toUpperCase();
+            })
+            .join(" ");
+          var fontSize = fitFontSize(groupText, 96, "900", "'Outfit', sans-serif", 1760);
+          var grp = document.createElement("div");
+          grp.className = "ne-group";
+          grp.id = "ne-grp-" + gi;
+
+          groupWords.forEach(function (w, i) {
+            var wi = g.wordStart + i;
+            var span = document.createElement("span");
+            span.className = "ne-word";
+            span.id = "ne-w-" + wi;
+            span.textContent = w.text;
+            span.style.fontSize = fontSize + "px";
+            grp.appendChild(span);
+          });
+
+          container.appendChild(grp);
+
+          tl.set(grp, { visibility: "visible", opacity: 0 }, g.start);
+          tl.fromTo(grp, { opacity: 0 }, { opacity: 1, duration: 0.05, ease: "steps(1)" }, g.start);
+          tl.fromTo(grp, { x: -8 }, { x: 0, duration: 0.14, ease: "power3.out" }, g.start + 0.05);
+
+          groupWords.forEach(function (w, i) {
+            var wi = g.wordStart + i;
+            var el = document.getElementById("ne-w-" + wi);
+            var isKW = KEYWORDS.has(wi);
+            var activeColor = isKW ? "#FF0099" : "#00FFF0";
+            tl.to(
+              el,
+              {
+                color: activeColor,
+                textShadow:
+                  "0 0 10px " +
+                  activeColor +
+                  ", 0 0 35px " +
+                  activeColor +
+                  ", 0 0 90px " +
+                  activeColor,
+                duration: 0.06,
+              },
+              w.start,
+            );
+            tl.to(el, { color: "rgba(0,255,240,0.14)", textShadow: "none", duration: 0.06 }, w.end);
+          });
+
+          tl.to(grp, { opacity: 0, x: 6, duration: 0.1, ease: "steps(1)" }, g.end - 0.1);
+          tl.set(grp, { opacity: 0, visibility: "hidden" }, g.end);
+        });
+
+        window.__timelines["caption-neon-glow"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/caption-neon-glow/demo.html b/docs/public/catalog/components/caption-neon-glow/demo.html
new file mode 100644
index 0000000000..c1adb3775b
--- /dev/null
+++ b/docs/public/catalog/components/caption-neon-glow/demo.html
@@ -0,0 +1,214 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Neon Glow</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Outfit:wght@900&display=swap"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: #000;
+      }
+      #neon-glow {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000;
+      }
+      .ne-overlay {
+        position: absolute;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.75);
+        z-index: 1;
+        pointer-events: none;
+      }
+      #ne-container {
+        position: absolute;
+        inset: 0;
+        z-index: 10;
+        pointer-events: none;
+      }
+      .ne-group {
+        position: absolute;
+        bottom: 120px;
+        left: 0;
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: flex-end;
+        justify-content: center;
+        gap: 24px;
+        padding: 0 80px;
+        opacity: 0;
+        visibility: hidden;
+      }
+      .ne-word {
+        font-family: "Outfit", sans-serif;
+        font-weight: 900;
+        font-size: 96px;
+        text-transform: uppercase;
+        color: rgba(0, 255, 240, 0.14);
+        display: inline-block;
+        letter-spacing: 0.04em;
+        line-height: 1;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="neon-glow"
+      data-composition-id="caption-neon-glow"
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="ne-overlay"></div>
+      <div id="ne-container"></div>
+    </div>
+
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        var _fitCanvas = document.createElement("canvas");
+        var _fitCtx = _fitCanvas.getContext("2d");
+        function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {
+          var size = baseFontSize;
+          var minSize = Math.floor(baseFontSize * 0.45);
+          while (size > minSize) {
+            _fitCtx.font = fontWeight + " " + size + "px " + fontFamily;
+            if (_fitCtx.measureText(text).width <= maxWidth) return size;
+            size -= 2;
+          }
+          return minSize;
+        }
+
+        var WORDS = [
+          { text: "Every", start: 0.0, end: 0.3 },
+          { text: "great", start: 0.3, end: 0.55 },
+          { text: "video", start: 0.55, end: 0.85 },
+          { text: "starts", start: 0.85, end: 1.1 },
+          { text: "with", start: 1.1, end: 1.25 },
+          { text: "a", start: 1.25, end: 1.35 },
+          { text: "single", start: 1.35, end: 1.65 },
+          { text: "frame.", start: 1.65, end: 2.0 },
+          { text: "HyperFrames", start: 2.1, end: 2.65 },
+          { text: "lets", start: 2.65, end: 2.85 },
+          { text: "you", start: 2.85, end: 2.95 },
+          { text: "write", start: 2.95, end: 3.15 },
+          { text: "HTML", start: 3.15, end: 3.55 },
+          { text: "and", start: 3.55, end: 3.65 },
+          { text: "render", start: 3.65, end: 3.95 },
+          { text: "professional", start: 3.95, end: 4.45 },
+          { text: "video.", start: 4.45, end: 4.8 },
+          { text: "No", start: 4.9, end: 5.05 },
+          { text: "timeline.", start: 5.05, end: 5.45 },
+          { text: "No", start: 5.5, end: 5.65 },
+          { text: "drag", start: 5.65, end: 5.85 },
+          { text: "and", start: 5.85, end: 5.95 },
+          { text: "drop.", start: 5.95, end: 6.25 },
+          { text: "Just", start: 6.35, end: 6.55 },
+          { text: "code", start: 6.55, end: 6.8 },
+          { text: "that", start: 6.8, end: 6.95 },
+          { text: "becomes", start: 6.95, end: 7.3 },
+          { text: "cinema.", start: 7.3, end: 7.7 },
+        ];
+
+        var GROUPS = [
+          { wordStart: 0, wordEnd: 3, start: 0.0, end: 1.05 },
+          { wordStart: 4, wordEnd: 7, start: 1.1, end: 2.05 },
+          { wordStart: 8, wordEnd: 8, start: 2.1, end: 2.6 },
+          { wordStart: 9, wordEnd: 12, start: 2.65, end: 3.5 },
+          { wordStart: 13, wordEnd: 15, start: 3.55, end: 4.4 },
+          { wordStart: 16, wordEnd: 16, start: 3.95, end: 4.75 },
+          { wordStart: 17, wordEnd: 19, start: 4.9, end: 5.4 },
+          { wordStart: 20, wordEnd: 22, start: 5.65, end: 6.2 },
+          { wordStart: 23, wordEnd: 24, start: 6.35, end: 6.75 },
+          { wordStart: 25, wordEnd: 27, start: 6.8, end: 7.8 },
+        ];
+
+        // Keywords get pink glow; others get cyan glow
+        var KEYWORDS = new Set([8, 12, 15, 24, 27]); // HyperFrames, HTML, professional, code, cinema.
+
+        var container = document.getElementById("ne-container");
+        var tl = gsap.timeline({ paused: true });
+
+        GROUPS.forEach(function (g, gi) {
+          var groupWords = WORDS.slice(g.wordStart, g.wordEnd + 1);
+          var groupText = groupWords
+            .map(function (w) {
+              return w.text.toUpperCase();
+            })
+            .join(" ");
+          var fontSize = fitFontSize(groupText, 96, "900", "'Outfit', sans-serif", 1760);
+          var grp = document.createElement("div");
+          grp.className = "ne-group";
+          grp.id = "ne-grp-" + gi;
+
+          groupWords.forEach(function (w, i) {
+            var wi = g.wordStart + i;
+            var span = document.createElement("span");
+            span.className = "ne-word";
+            span.id = "ne-w-" + wi;
+            span.textContent = w.text;
+            span.style.fontSize = fontSize + "px";
+            grp.appendChild(span);
+          });
+
+          container.appendChild(grp);
+
+          tl.set(grp, { visibility: "visible", opacity: 0 }, g.start);
+          tl.fromTo(grp, { opacity: 0 }, { opacity: 1, duration: 0.05, ease: "steps(1)" }, g.start);
+          tl.fromTo(grp, { x: -8 }, { x: 0, duration: 0.14, ease: "power3.out" }, g.start + 0.05);
+
+          groupWords.forEach(function (w, i) {
+            var wi = g.wordStart + i;
+            var el = document.getElementById("ne-w-" + wi);
+            var isKW = KEYWORDS.has(wi);
+            var activeColor = isKW ? "#FF0099" : "#00FFF0";
+            tl.to(
+              el,
+              {
+                color: activeColor,
+                textShadow:
+                  "0 0 10px " +
+                  activeColor +
+                  ", 0 0 35px " +
+                  activeColor +
+                  ", 0 0 90px " +
+                  activeColor,
+                duration: 0.06,
+              },
+              w.start,
+            );
+            tl.to(el, { color: "rgba(0,255,240,0.14)", textShadow: "none", duration: 0.06 }, w.end);
+          });
+
+          tl.to(grp, { opacity: 0, x: 6, duration: 0.1, ease: "steps(1)" }, g.end - 0.1);
+          tl.set(grp, { opacity: 0, visibility: "hidden" }, g.end);
+        });
+
+        window.__timelines["caption-neon-glow"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/caption-parallax-layers/caption-parallax-layers.html b/docs/public/catalog/components/caption-parallax-layers/caption-parallax-layers.html
new file mode 100644
index 0000000000..2d2f33afe0
--- /dev/null
+++ b/docs/public/catalog/components/caption-parallax-layers/caption-parallax-layers.html
@@ -0,0 +1,355 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Parallax Layers</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: transparent;
+        font-family: "Instrument Serif", serif;
+      }
+
+      #parallax-layers {
+        pointer-events: none;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent;
+      }
+
+      /* Behind captions: big red 3D text */
+      .behind-caption-layer {
+        position: absolute;
+        inset: 0;
+        z-index: 10;
+        pointer-events: none;
+        transform: translateZ(0);
+      }
+
+      /* Front captions */
+      .front-caption-layer {
+        position: absolute;
+        inset: 0;
+        z-index: 30;
+        pointer-events: none;
+        transform: translateZ(0);
+      }
+
+      .behind-safe-zone {
+        position: absolute;
+        top: 40px;
+        left: 0;
+        width: 1920px;
+        height: 500px;
+      }
+
+      .front-safe-zone {
+        position: absolute;
+        top: 700px;
+        left: 0;
+        width: 1920px;
+        height: 300px;
+      }
+
+      .caption-block {
+        position: absolute;
+        left: 50%;
+        top: 0;
+        transform: translateX(-50%);
+        opacity: 0;
+        transform-origin: 50% 50%;
+        will-change: transform, opacity;
+        backface-visibility: hidden;
+      }
+
+      .caption-line {
+        display: flex;
+        align-items: baseline;
+        justify-content: center;
+        gap: 14px;
+        line-height: 1.1;
+        white-space: nowrap;
+      }
+
+      .caption-line--behind {
+        transform: scaleY(2.8);
+        transform-origin: 50% 0%;
+      }
+
+      .word {
+        display: inline-block;
+        will-change: transform, opacity;
+        backface-visibility: hidden;
+      }
+
+      .word--behind {
+        font-family: "Instrument Serif", serif;
+        font-size: 220px;
+        font-weight: 400;
+        font-style: normal;
+        line-height: 0.9;
+        color: #e50914;
+        -webkit-text-stroke: 5px #e50914;
+        text-shadow: 2px 4px 4px #a30610;
+      }
+
+      .word--front-normal {
+        font-family: "Instrument Serif", serif;
+        font-size: 130px;
+        font-weight: 400;
+        font-style: normal;
+        color: #eeeeee;
+        text-shadow:
+          0 2px 12px rgba(0, 0, 0, 0.6),
+          0 4px 24px rgba(0, 0, 0, 0.35);
+      }
+
+      .word--front-italic {
+        font-family: "Instrument Serif", serif;
+        font-size: 130px;
+        font-weight: 400;
+        font-style: italic;
+        color: #eeeeee;
+        text-shadow:
+          0 2px 12px rgba(0, 0, 0, 0.6),
+          0 4px 24px rgba(0, 0, 0, 0.35);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="parallax-layers"
+      data-composition-id="caption-parallax-layers"
+      data-timeline-locked
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="behind-caption-layer" aria-hidden="true">
+        <div id="behind-stage" class="behind-safe-zone"></div>
+      </div>
+
+      <div class="front-caption-layer" aria-hidden="true">
+        <div id="front-stage" class="front-safe-zone"></div>
+      </div>
+    </div>
+
+    <script>
+      var DURATION = 8;
+      var BEHIND_WIDTH = 1800;
+      var FRONT_WIDTH = 1750;
+      var ENTRY_DUR = 0.1;
+      var SLIDE_DUR = 0.2;
+
+      var _fitCanvas = document.createElement("canvas");
+      var _fitCtx = _fitCanvas.getContext("2d");
+      function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {
+        var size = baseFontSize;
+        var minSize = Math.floor(baseFontSize * 0.45);
+        while (size > minSize) {
+          _fitCtx.font = fontWeight + " " + size + "px " + fontFamily;
+          if (_fitCtx.measureText(text).width <= maxWidth) return size;
+          size -= 2;
+        }
+        return minSize;
+      }
+
+      var W = [
+        { text: "Every", start: 0.0, end: 0.3 },
+        { text: "great", start: 0.3, end: 0.55 },
+        { text: "video", start: 0.55, end: 0.85 },
+        { text: "starts", start: 0.85, end: 1.1 },
+        { text: "with", start: 1.1, end: 1.25 },
+        { text: "a", start: 1.25, end: 1.35 },
+        { text: "single", start: 1.35, end: 1.65 },
+        { text: "frame.", start: 1.65, end: 2.0 },
+        { text: "HyperFrames", start: 2.1, end: 2.65 },
+        { text: "lets", start: 2.65, end: 2.85 },
+        { text: "you", start: 2.85, end: 2.95 },
+        { text: "write", start: 2.95, end: 3.15 },
+        { text: "HTML", start: 3.15, end: 3.55 },
+        { text: "and", start: 3.55, end: 3.65 },
+        { text: "render", start: 3.65, end: 3.95 },
+        { text: "professional", start: 3.95, end: 4.45 },
+        { text: "video.", start: 4.45, end: 4.8 },
+        { text: "No", start: 4.9, end: 5.05 },
+        { text: "timeline.", start: 5.05, end: 5.45 },
+        { text: "No", start: 5.5, end: 5.65 },
+        { text: "drag", start: 5.65, end: 5.85 },
+        { text: "and", start: 5.85, end: 5.95 },
+        { text: "drop.", start: 5.95, end: 6.25 },
+        { text: "Just", start: 6.35, end: 6.55 },
+        { text: "code", start: 6.55, end: 6.8 },
+        { text: "that", start: 6.8, end: 6.95 },
+        { text: "becomes", start: 6.95, end: 7.3 },
+        { text: "cinema.", start: 7.3, end: 7.7 },
+      ];
+
+      // behind=red 3D emphasis words, front=normal white words
+      var BLOCKS = [
+        { behind: null, front: [[0], [1], [2]] },
+        { behind: [[3]], front: [[4], [5]] },
+        { behind: [[6]], front: [[7]] },
+        { behind: [[8]], front: [[9], [10], [11]] },
+        { behind: [[12]], front: [[13], [14]] },
+        { behind: [[15]], front: [[16]] },
+        { behind: null, front: [[17], [18]] },
+        { behind: null, front: [[19], [20], [21], [22]] },
+        { behind: [[24]], front: [[23], [25], [26]] },
+        { behind: [[27]], front: null },
+      ];
+
+      var behindStage = document.getElementById("behind-stage");
+      var frontStage = document.getElementById("front-stage");
+
+      BLOCKS.forEach(function (block, bi) {
+        var bEl = document.createElement("div");
+        bEl.className = "caption-block";
+        bEl.id = "bb" + bi;
+        if (block.behind) {
+          var behindText = block.behind
+            .map(function (wi_arr) {
+              return W[wi_arr[0]].text;
+            })
+            .join(" ");
+          var behindSize = fitFontSize(behindText, 220, "400", "Instrument Serif", BEHIND_WIDTH);
+          var bLine = document.createElement("div");
+          bLine.className = "caption-line caption-line--behind";
+          block.behind.forEach(function (wi_arr, wi) {
+            var span = document.createElement("span");
+            span.className = "word word--behind";
+            span.id = "bb" + bi + "w" + wi;
+            span.textContent = W[wi_arr[0]].text;
+            span.style.fontSize = behindSize + "px";
+            bLine.appendChild(span);
+          });
+          bEl.appendChild(bLine);
+        }
+        behindStage.appendChild(bEl);
+
+        var fEl = document.createElement("div");
+        fEl.className = "caption-block";
+        fEl.id = "fb" + bi;
+        if (block.front) {
+          var frontText = block.front
+            .map(function (wi_arr) {
+              return W[wi_arr[0]].text;
+            })
+            .join(" ");
+          var frontSize = fitFontSize(frontText, 130, "400", "Instrument Serif", FRONT_WIDTH);
+          var fLine = document.createElement("div");
+          fLine.className = "caption-line";
+          block.front.forEach(function (wi_arr, wi) {
+            var span = document.createElement("span");
+            var isItalic = wi_arr[0] === 7 || wi_arr[0] === 18; // frame., timeline.
+            span.className = "word " + (isItalic ? "word--front-italic" : "word--front-normal");
+            span.id = "fb" + bi + "w" + wi;
+            span.textContent = W[wi_arr[0]].text;
+            span.style.fontSize = frontSize + "px";
+            fLine.appendChild(span);
+          });
+          fEl.appendChild(fLine);
+        }
+        frontStage.appendChild(fEl);
+      });
+
+      var allBehind = BLOCKS.map(function (_, i) {
+        return document.getElementById("bb" + i);
+      });
+      var allFront = BLOCKS.map(function (_, i) {
+        return document.getElementById("fb" + i);
+      });
+
+      function applyBehindScales() {
+        BLOCKS.forEach(function (block, bi) {
+          if (block.behind) {
+            var line = allBehind[bi].querySelector(".caption-line");
+            if (line) {
+              var natW = line.scrollWidth;
+              if (natW > 0) {
+                var s = BEHIND_WIDTH / natW;
+                line.style.transform = "scaleX(" + s + ") scaleY(2.8)";
+              }
+            }
+          }
+        });
+      }
+      applyBehindScales();
+
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+
+      function blockStart(bi) {
+        var b = BLOCKS[bi];
+        var firstIdx = b.behind ? b.behind[0][0] : b.front[0][0];
+        return W[firstIdx].start;
+      }
+
+      BLOCKS.forEach(function (block, bi) {
+        var start = blockStart(bi);
+        var nextStart = bi < BLOCKS.length - 1 ? blockStart(bi + 1) : DURATION;
+        var bEl = allBehind[bi];
+        var fEl = allFront[bi];
+
+        allBehind.forEach(function (other, oi) {
+          if (oi !== bi) tl.set(other, { opacity: 0 }, start);
+        });
+        allFront.forEach(function (other, oi) {
+          if (oi !== bi) tl.set(other, { opacity: 0 }, start);
+        });
+
+        if (block.behind) {
+          tl.set(bEl, { opacity: 1 }, start);
+          block.behind.forEach(function (wi_arr, wi) {
+            var wordEl = document.getElementById("bb" + bi + "w" + wi);
+            var wordStart = W[wi_arr[0]].start;
+            tl.set(wordEl, { opacity: 0 }, start);
+            tl.to(wordEl, { opacity: 1, duration: ENTRY_DUR, ease: "power2.out" }, wordStart);
+          });
+        }
+
+        if (block.front) {
+          tl.set(fEl, { opacity: 1 }, start);
+          block.front.forEach(function (wi_arr, wi) {
+            var wordEl = document.getElementById("fb" + bi + "w" + wi);
+            var wordStart = W[wi_arr[0]].start;
+            tl.set(wordEl, { opacity: 0 }, start);
+            tl.set(wordEl, { opacity: 1 }, wordStart);
+          });
+        }
+
+        tl.set(bEl, { opacity: 0 }, nextStart);
+        tl.set(fEl, { opacity: 0 }, nextStart);
+      });
+
+      tl.to({}, { duration: DURATION }, 0);
+      window.__timelines["caption-parallax-layers"] = tl;
+
+      document.fonts.ready.then(function () {
+        applyBehindScales();
+      });
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/caption-parallax-layers/demo.html b/docs/public/catalog/components/caption-parallax-layers/demo.html
new file mode 100644
index 0000000000..a56e9e6aa1
--- /dev/null
+++ b/docs/public/catalog/components/caption-parallax-layers/demo.html
@@ -0,0 +1,353 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Parallax Layers</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: #000;
+        font-family: "Instrument Serif", serif;
+      }
+
+      #parallax-layers {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000;
+      }
+
+      /* Behind captions: big red 3D text */
+      .behind-caption-layer {
+        position: absolute;
+        inset: 0;
+        z-index: 10;
+        pointer-events: none;
+        transform: translateZ(0);
+      }
+
+      /* Front captions */
+      .front-caption-layer {
+        position: absolute;
+        inset: 0;
+        z-index: 30;
+        pointer-events: none;
+        transform: translateZ(0);
+      }
+
+      .behind-safe-zone {
+        position: absolute;
+        top: 40px;
+        left: 0;
+        width: 1920px;
+        height: 500px;
+      }
+
+      .front-safe-zone {
+        position: absolute;
+        top: 700px;
+        left: 0;
+        width: 1920px;
+        height: 300px;
+      }
+
+      .caption-block {
+        position: absolute;
+        left: 50%;
+        top: 0;
+        transform: translateX(-50%);
+        opacity: 0;
+        transform-origin: 50% 50%;
+        will-change: transform, opacity;
+        backface-visibility: hidden;
+      }
+
+      .caption-line {
+        display: flex;
+        align-items: baseline;
+        justify-content: center;
+        gap: 14px;
+        line-height: 1.1;
+        white-space: nowrap;
+      }
+
+      .caption-line--behind {
+        transform: scaleY(2.8);
+        transform-origin: 50% 0%;
+      }
+
+      .word {
+        display: inline-block;
+        will-change: transform, opacity;
+        backface-visibility: hidden;
+      }
+
+      .word--behind {
+        font-family: "Instrument Serif", serif;
+        font-size: 220px;
+        font-weight: 400;
+        font-style: normal;
+        line-height: 0.9;
+        color: #e50914;
+        -webkit-text-stroke: 5px #e50914;
+        text-shadow: 2px 4px 4px #a30610;
+      }
+
+      .word--front-normal {
+        font-family: "Instrument Serif", serif;
+        font-size: 130px;
+        font-weight: 400;
+        font-style: normal;
+        color: #eeeeee;
+        text-shadow:
+          0 2px 12px rgba(0, 0, 0, 0.6),
+          0 4px 24px rgba(0, 0, 0, 0.35);
+      }
+
+      .word--front-italic {
+        font-family: "Instrument Serif", serif;
+        font-size: 130px;
+        font-weight: 400;
+        font-style: italic;
+        color: #eeeeee;
+        text-shadow:
+          0 2px 12px rgba(0, 0, 0, 0.6),
+          0 4px 24px rgba(0, 0, 0, 0.35);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="parallax-layers"
+      data-composition-id="caption-parallax-layers"
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="behind-caption-layer" aria-hidden="true">
+        <div id="behind-stage" class="behind-safe-zone"></div>
+      </div>
+
+      <div class="front-caption-layer" aria-hidden="true">
+        <div id="front-stage" class="front-safe-zone"></div>
+      </div>
+    </div>
+
+    <script>
+      var DURATION = 8;
+      var BEHIND_WIDTH = 1800;
+      var FRONT_WIDTH = 1750;
+      var ENTRY_DUR = 0.1;
+      var SLIDE_DUR = 0.2;
+
+      var _fitCanvas = document.createElement("canvas");
+      var _fitCtx = _fitCanvas.getContext("2d");
+      function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {
+        var size = baseFontSize;
+        var minSize = Math.floor(baseFontSize * 0.45);
+        while (size > minSize) {
+          _fitCtx.font = fontWeight + " " + size + "px " + fontFamily;
+          if (_fitCtx.measureText(text).width <= maxWidth) return size;
+          size -= 2;
+        }
+        return minSize;
+      }
+
+      var W = [
+        { text: "Every", start: 0.0, end: 0.3 },
+        { text: "great", start: 0.3, end: 0.55 },
+        { text: "video", start: 0.55, end: 0.85 },
+        { text: "starts", start: 0.85, end: 1.1 },
+        { text: "with", start: 1.1, end: 1.25 },
+        { text: "a", start: 1.25, end: 1.35 },
+        { text: "single", start: 1.35, end: 1.65 },
+        { text: "frame.", start: 1.65, end: 2.0 },
+        { text: "HyperFrames", start: 2.1, end: 2.65 },
+        { text: "lets", start: 2.65, end: 2.85 },
+        { text: "you", start: 2.85, end: 2.95 },
+        { text: "write", start: 2.95, end: 3.15 },
+        { text: "HTML", start: 3.15, end: 3.55 },
+        { text: "and", start: 3.55, end: 3.65 },
+        { text: "render", start: 3.65, end: 3.95 },
+        { text: "professional", start: 3.95, end: 4.45 },
+        { text: "video.", start: 4.45, end: 4.8 },
+        { text: "No", start: 4.9, end: 5.05 },
+        { text: "timeline.", start: 5.05, end: 5.45 },
+        { text: "No", start: 5.5, end: 5.65 },
+        { text: "drag", start: 5.65, end: 5.85 },
+        { text: "and", start: 5.85, end: 5.95 },
+        { text: "drop.", start: 5.95, end: 6.25 },
+        { text: "Just", start: 6.35, end: 6.55 },
+        { text: "code", start: 6.55, end: 6.8 },
+        { text: "that", start: 6.8, end: 6.95 },
+        { text: "becomes", start: 6.95, end: 7.3 },
+        { text: "cinema.", start: 7.3, end: 7.7 },
+      ];
+
+      // behind=red 3D emphasis words, front=normal white words
+      var BLOCKS = [
+        { behind: null, front: [[0], [1], [2]] },
+        { behind: [[3]], front: [[4], [5]] },
+        { behind: [[6]], front: [[7]] },
+        { behind: [[8]], front: [[9], [10], [11]] },
+        { behind: [[12]], front: [[13], [14]] },
+        { behind: [[15]], front: [[16]] },
+        { behind: null, front: [[17], [18]] },
+        { behind: null, front: [[19], [20], [21], [22]] },
+        { behind: [[24]], front: [[23], [25], [26]] },
+        { behind: [[27]], front: null },
+      ];
+
+      var behindStage = document.getElementById("behind-stage");
+      var frontStage = document.getElementById("front-stage");
+
+      BLOCKS.forEach(function (block, bi) {
+        var bEl = document.createElement("div");
+        bEl.className = "caption-block";
+        bEl.id = "bb" + bi;
+        if (block.behind) {
+          var behindText = block.behind
+            .map(function (wi_arr) {
+              return W[wi_arr[0]].text;
+            })
+            .join(" ");
+          var behindSize = fitFontSize(behindText, 220, "400", "Instrument Serif", BEHIND_WIDTH);
+          var bLine = document.createElement("div");
+          bLine.className = "caption-line caption-line--behind";
+          block.behind.forEach(function (wi_arr, wi) {
+            var span = document.createElement("span");
+            span.className = "word word--behind";
+            span.id = "bb" + bi + "w" + wi;
+            span.textContent = W[wi_arr[0]].text;
+            span.style.fontSize = behindSize + "px";
+            bLine.appendChild(span);
+          });
+          bEl.appendChild(bLine);
+        }
+        behindStage.appendChild(bEl);
+
+        var fEl = document.createElement("div");
+        fEl.className = "caption-block";
+        fEl.id = "fb" + bi;
+        if (block.front) {
+          var frontText = block.front
+            .map(function (wi_arr) {
+              return W[wi_arr[0]].text;
+            })
+            .join(" ");
+          var frontSize = fitFontSize(frontText, 130, "400", "Instrument Serif", FRONT_WIDTH);
+          var fLine = document.createElement("div");
+          fLine.className = "caption-line";
+          block.front.forEach(function (wi_arr, wi) {
+            var span = document.createElement("span");
+            var isItalic = wi_arr[0] === 7 || wi_arr[0] === 18; // frame., timeline.
+            span.className = "word " + (isItalic ? "word--front-italic" : "word--front-normal");
+            span.id = "fb" + bi + "w" + wi;
+            span.textContent = W[wi_arr[0]].text;
+            span.style.fontSize = frontSize + "px";
+            fLine.appendChild(span);
+          });
+          fEl.appendChild(fLine);
+        }
+        frontStage.appendChild(fEl);
+      });
+
+      var allBehind = BLOCKS.map(function (_, i) {
+        return document.getElementById("bb" + i);
+      });
+      var allFront = BLOCKS.map(function (_, i) {
+        return document.getElementById("fb" + i);
+      });
+
+      function applyBehindScales() {
+        BLOCKS.forEach(function (block, bi) {
+          if (block.behind) {
+            var line = allBehind[bi].querySelector(".caption-line");
+            if (line) {
+              var natW = line.scrollWidth;
+              if (natW > 0) {
+                var s = BEHIND_WIDTH / natW;
+                line.style.transform = "scaleX(" + s + ") scaleY(2.8)";
+              }
+            }
+          }
+        });
+      }
+      applyBehindScales();
+
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+
+      function blockStart(bi) {
+        var b = BLOCKS[bi];
+        var firstIdx = b.behind ? b.behind[0][0] : b.front[0][0];
+        return W[firstIdx].start;
+      }
+
+      BLOCKS.forEach(function (block, bi) {
+        var start = blockStart(bi);
+        var nextStart = bi < BLOCKS.length - 1 ? blockStart(bi + 1) : DURATION;
+        var bEl = allBehind[bi];
+        var fEl = allFront[bi];
+
+        allBehind.forEach(function (other, oi) {
+          if (oi !== bi) tl.set(other, { opacity: 0 }, start);
+        });
+        allFront.forEach(function (other, oi) {
+          if (oi !== bi) tl.set(other, { opacity: 0 }, start);
+        });
+
+        if (block.behind) {
+          tl.set(bEl, { opacity: 1 }, start);
+          block.behind.forEach(function (wi_arr, wi) {
+            var wordEl = document.getElementById("bb" + bi + "w" + wi);
+            var wordStart = W[wi_arr[0]].start;
+            tl.set(wordEl, { opacity: 0 }, start);
+            tl.to(wordEl, { opacity: 1, duration: ENTRY_DUR, ease: "power2.out" }, wordStart);
+          });
+        }
+
+        if (block.front) {
+          tl.set(fEl, { opacity: 1 }, start);
+          block.front.forEach(function (wi_arr, wi) {
+            var wordEl = document.getElementById("fb" + bi + "w" + wi);
+            var wordStart = W[wi_arr[0]].start;
+            tl.set(wordEl, { opacity: 0 }, start);
+            tl.set(wordEl, { opacity: 1 }, wordStart);
+          });
+        }
+
+        tl.set(bEl, { opacity: 0 }, nextStart);
+        tl.set(fEl, { opacity: 0 }, nextStart);
+      });
+
+      tl.to({}, { duration: DURATION }, 0);
+      window.__timelines["caption-parallax-layers"] = tl;
+
+      document.fonts.ready.then(function () {
+        applyBehindScales();
+      });
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/caption-particle-burst/caption-particle-burst.html b/docs/public/catalog/components/caption-particle-burst/caption-particle-burst.html
new file mode 100644
index 0000000000..2df4604db8
--- /dev/null
+++ b/docs/public/catalog/components/caption-particle-burst/caption-particle-burst.html
@@ -0,0 +1,296 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Particle Burst</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Outfit:wght@900&display=swap"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: transparent;
+      }
+      #particle-burst {
+        pointer-events: none;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent;
+      }
+      .bs-overlay {
+        position: absolute;
+        inset: 0;
+        background: transparent;
+        z-index: 1;
+        pointer-events: none;
+      }
+      #bs-container {
+        position: absolute;
+        inset: 0;
+        z-index: 10;
+        pointer-events: none;
+      }
+      .bs-group {
+        position: absolute;
+        bottom: 120px;
+        left: 0;
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: flex-end;
+        justify-content: center;
+        gap: 24px;
+        padding: 0 100px;
+        opacity: 0;
+        visibility: hidden;
+      }
+      .bs-word {
+        font-family: "Outfit", sans-serif;
+        font-weight: 900;
+        font-size: 88px;
+        text-transform: uppercase;
+        color: rgba(255, 255, 255, 0.45);
+        display: inline-block;
+        letter-spacing: 0.05em;
+        line-height: 1;
+      }
+      .bs-particle {
+        position: absolute;
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        opacity: 0;
+        pointer-events: none;
+        z-index: 20;
+        left: 960px;
+        bottom: 180px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="particle-burst"
+      data-composition-id="caption-particle-burst"
+      data-timeline-locked
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="bs-overlay"></div>
+      <div id="bs-container"></div>
+    </div>
+
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        var _fitCanvas = document.createElement("canvas");
+        var _fitCtx = _fitCanvas.getContext("2d");
+        function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {
+          var size = baseFontSize;
+          var minSize = Math.floor(baseFontSize * 0.45);
+          while (size > minSize) {
+            _fitCtx.font = fontWeight + " " + size + "px " + fontFamily;
+            if (_fitCtx.measureText(text).width <= maxWidth) return size;
+            size -= 2;
+          }
+          return minSize;
+        }
+
+        function mulberry32(seed) {
+          return function () {
+            seed |= 0;
+            seed = (seed + 0x6d2b79f5) | 0;
+            var t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
+            t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+            return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+          };
+        }
+
+        var WORDS = [
+          { text: "Every", start: 0.0, end: 0.3 },
+          { text: "great", start: 0.3, end: 0.55 },
+          { text: "video", start: 0.55, end: 0.85 },
+          { text: "starts", start: 0.85, end: 1.1 },
+          { text: "with", start: 1.1, end: 1.25 },
+          { text: "a", start: 1.25, end: 1.35 },
+          { text: "single", start: 1.35, end: 1.65 },
+          { text: "frame.", start: 1.65, end: 2.0 },
+          { text: "HyperFrames", start: 2.1, end: 2.65 },
+          { text: "lets", start: 2.65, end: 2.85 },
+          { text: "you", start: 2.85, end: 2.95 },
+          { text: "write", start: 2.95, end: 3.15 },
+          { text: "HTML", start: 3.15, end: 3.55 },
+          { text: "and", start: 3.55, end: 3.65 },
+          { text: "render", start: 3.65, end: 3.95 },
+          { text: "professional", start: 3.95, end: 4.45 },
+          { text: "video.", start: 4.45, end: 4.8 },
+          { text: "No", start: 4.9, end: 5.05 },
+          { text: "timeline.", start: 5.05, end: 5.45 },
+          { text: "No", start: 5.5, end: 5.65 },
+          { text: "drag", start: 5.65, end: 5.85 },
+          { text: "and", start: 5.85, end: 5.95 },
+          { text: "drop.", start: 5.95, end: 6.25 },
+          { text: "Just", start: 6.35, end: 6.55 },
+          { text: "code", start: 6.55, end: 6.8 },
+          { text: "that", start: 6.8, end: 6.95 },
+          { text: "becomes", start: 6.95, end: 7.3 },
+          { text: "cinema.", start: 7.3, end: 7.7 },
+        ];
+
+        // Keywords get particle burst + gold color
+        var KEYWORDS = new Set([8, 12, 15, 24, 27]); // HyperFrames, HTML, professional, code, cinema.
+
+        var RAW_GROUPS = [
+          [0, 3],
+          [4, 7],
+          [8, 8],
+          [9, 12],
+          [13, 15],
+          [16, 16],
+          [17, 19],
+          [20, 22],
+          [23, 24],
+          [25, 27],
+        ];
+        var GROUPS = RAW_GROUPS.map(function (pair, gi) {
+          var ws = pair[0],
+            we = pair[1];
+          var nextStart = gi + 1 < RAW_GROUPS.length ? WORDS[RAW_GROUPS[gi + 1][0]].start : 8.0;
+          var gEnd = Math.min(WORDS[we].end + 0.35, nextStart - 0.05);
+          return { wordStart: ws, wordEnd: we, start: WORDS[ws].start, end: gEnd };
+        });
+
+        var PARTICLE_COLORS = [
+          "#FFD700",
+          "#FF6B35",
+          "#FF3C78",
+          "#9B5DE5",
+          "#00BBF9",
+          "#00F5D4",
+          "#ffffff",
+          "#F15BB5",
+        ];
+        var NUM_PARTICLES = 10;
+
+        var container = document.getElementById("bs-container");
+        var tl = gsap.timeline({ paused: true });
+
+        GROUPS.forEach(function (g, gi) {
+          var groupWords = WORDS.slice(g.wordStart, g.wordEnd + 1);
+          var groupText = groupWords
+            .map(function (w) {
+              return w.text.toUpperCase();
+            })
+            .join(" ");
+          var fontSize = fitFontSize(groupText, 88, "900", "'Outfit', sans-serif", 1720);
+          var grp = document.createElement("div");
+          grp.className = "bs-group";
+          grp.id = "bs-grp-" + gi;
+
+          groupWords.forEach(function (w, i) {
+            var wi = g.wordStart + i;
+            var span = document.createElement("span");
+            span.className = "bs-word";
+            span.id = "bs-w-" + wi;
+            span.textContent = w.text.toUpperCase();
+            span.style.fontSize = fontSize + "px";
+            grp.appendChild(span);
+          });
+
+          container.appendChild(grp);
+        });
+
+        // Create particles for keyword words
+        var particleData = {};
+        WORDS.forEach(function (w, wi) {
+          if (!KEYWORDS.has(wi)) return;
+          var rng = mulberry32(wi * 137 + 99);
+          particleData[wi] = [];
+          for (var p = 0; p < NUM_PARTICLES; p++) {
+            var angle = (p / NUM_PARTICLES) * Math.PI * 2 + rng() * 0.6;
+            var dist = 120 + rng() * 200;
+            var sz = 4 + rng() * 8;
+            var dx = Math.cos(angle) * dist;
+            var dy = -Math.sin(angle) * dist;
+            var dot = document.createElement("div");
+            dot.className = "bs-particle";
+            dot.id = "bs-p-" + wi + "-" + p;
+            dot.style.backgroundColor = PARTICLE_COLORS[p % PARTICLE_COLORS.length];
+            dot.style.width = sz.toFixed(1) + "px";
+            dot.style.height = sz.toFixed(1) + "px";
+            container.appendChild(dot);
+            particleData[wi].push({ el: dot, dx: dx, dy: dy });
+          }
+        });
+
+        GROUPS.forEach(function (g, gi) {
+          var grp = document.getElementById("bs-grp-" + gi);
+          var groupWords = WORDS.slice(g.wordStart, g.wordEnd + 1);
+
+          tl.set(grp, { visibility: "visible" }, g.start);
+          tl.fromTo(
+            grp,
+            { opacity: 0, scale: 0.92 },
+            { opacity: 1, scale: 1, duration: 0.2, ease: "back.out(1.5)" },
+            g.start,
+          );
+
+          groupWords.forEach(function (w, i) {
+            var wi = g.wordStart + i;
+            var wordEl = document.getElementById("bs-w-" + wi);
+            var isKW = KEYWORDS.has(wi);
+
+            tl.to(
+              wordEl,
+              { color: isKW ? "#FFD700" : "#ffffff", scale: isKW ? 1.12 : 1.05, duration: 0.08 },
+              w.start,
+            );
+            tl.to(wordEl, { color: "rgba(255,255,255,0.4)", scale: 1.0, duration: 0.1 }, w.end);
+
+            if (isKW && particleData[wi]) {
+              particleData[wi].forEach(function (pd, pi) {
+                tl.set(pd.el, { x: 0, y: 0, opacity: 0 }, w.start);
+                tl.to(
+                  pd.el,
+                  { x: pd.dx, y: pd.dy, opacity: 1, duration: 0.12, ease: "power3.out" },
+                  w.start + pi * 0.018,
+                );
+                tl.to(
+                  pd.el,
+                  { opacity: 0, duration: 0.45, ease: "power1.in" },
+                  w.start + 0.12 + pi * 0.018,
+                );
+                tl.set(pd.el, { opacity: 0, x: 0, y: 0 }, w.start + 0.7);
+              });
+            }
+          });
+
+          tl.to(grp, { opacity: 0, duration: 0.14, ease: "power2.in" }, g.end - 0.14);
+          tl.set(grp, { opacity: 0, visibility: "hidden" }, g.end);
+        });
+
+        tl.seek(0);
+        window.__timelines["caption-particle-burst"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/caption-particle-burst/demo.html b/docs/public/catalog/components/caption-particle-burst/demo.html
new file mode 100644
index 0000000000..ea2bef5b5a
--- /dev/null
+++ b/docs/public/catalog/components/caption-particle-burst/demo.html
@@ -0,0 +1,294 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Particle Burst</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Outfit:wght@900&display=swap"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: #0a0a0a;
+      }
+      #particle-burst {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0a0a0a;
+      }
+      .bs-overlay {
+        position: absolute;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.45);
+        z-index: 1;
+        pointer-events: none;
+      }
+      #bs-container {
+        position: absolute;
+        inset: 0;
+        z-index: 10;
+        pointer-events: none;
+      }
+      .bs-group {
+        position: absolute;
+        bottom: 120px;
+        left: 0;
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: flex-end;
+        justify-content: center;
+        gap: 24px;
+        padding: 0 100px;
+        opacity: 0;
+        visibility: hidden;
+      }
+      .bs-word {
+        font-family: "Outfit", sans-serif;
+        font-weight: 900;
+        font-size: 88px;
+        text-transform: uppercase;
+        color: rgba(255, 255, 255, 0.45);
+        display: inline-block;
+        letter-spacing: 0.05em;
+        line-height: 1;
+      }
+      .bs-particle {
+        position: absolute;
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        opacity: 0;
+        pointer-events: none;
+        z-index: 20;
+        left: 960px;
+        bottom: 180px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="particle-burst"
+      data-composition-id="caption-particle-burst"
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="bs-overlay"></div>
+      <div id="bs-container"></div>
+    </div>
+
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        var _fitCanvas = document.createElement("canvas");
+        var _fitCtx = _fitCanvas.getContext("2d");
+        function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {
+          var size = baseFontSize;
+          var minSize = Math.floor(baseFontSize * 0.45);
+          while (size > minSize) {
+            _fitCtx.font = fontWeight + " " + size + "px " + fontFamily;
+            if (_fitCtx.measureText(text).width <= maxWidth) return size;
+            size -= 2;
+          }
+          return minSize;
+        }
+
+        function mulberry32(seed) {
+          return function () {
+            seed |= 0;
+            seed = (seed + 0x6d2b79f5) | 0;
+            var t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
+            t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+            return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+          };
+        }
+
+        var WORDS = [
+          { text: "Every", start: 0.0, end: 0.3 },
+          { text: "great", start: 0.3, end: 0.55 },
+          { text: "video", start: 0.55, end: 0.85 },
+          { text: "starts", start: 0.85, end: 1.1 },
+          { text: "with", start: 1.1, end: 1.25 },
+          { text: "a", start: 1.25, end: 1.35 },
+          { text: "single", start: 1.35, end: 1.65 },
+          { text: "frame.", start: 1.65, end: 2.0 },
+          { text: "HyperFrames", start: 2.1, end: 2.65 },
+          { text: "lets", start: 2.65, end: 2.85 },
+          { text: "you", start: 2.85, end: 2.95 },
+          { text: "write", start: 2.95, end: 3.15 },
+          { text: "HTML", start: 3.15, end: 3.55 },
+          { text: "and", start: 3.55, end: 3.65 },
+          { text: "render", start: 3.65, end: 3.95 },
+          { text: "professional", start: 3.95, end: 4.45 },
+          { text: "video.", start: 4.45, end: 4.8 },
+          { text: "No", start: 4.9, end: 5.05 },
+          { text: "timeline.", start: 5.05, end: 5.45 },
+          { text: "No", start: 5.5, end: 5.65 },
+          { text: "drag", start: 5.65, end: 5.85 },
+          { text: "and", start: 5.85, end: 5.95 },
+          { text: "drop.", start: 5.95, end: 6.25 },
+          { text: "Just", start: 6.35, end: 6.55 },
+          { text: "code", start: 6.55, end: 6.8 },
+          { text: "that", start: 6.8, end: 6.95 },
+          { text: "becomes", start: 6.95, end: 7.3 },
+          { text: "cinema.", start: 7.3, end: 7.7 },
+        ];
+
+        // Keywords get particle burst + gold color
+        var KEYWORDS = new Set([8, 12, 15, 24, 27]); // HyperFrames, HTML, professional, code, cinema.
+
+        var RAW_GROUPS = [
+          [0, 3],
+          [4, 7],
+          [8, 8],
+          [9, 12],
+          [13, 15],
+          [16, 16],
+          [17, 19],
+          [20, 22],
+          [23, 24],
+          [25, 27],
+        ];
+        var GROUPS = RAW_GROUPS.map(function (pair, gi) {
+          var ws = pair[0],
+            we = pair[1];
+          var nextStart = gi + 1 < RAW_GROUPS.length ? WORDS[RAW_GROUPS[gi + 1][0]].start : 8.0;
+          var gEnd = Math.min(WORDS[we].end + 0.35, nextStart - 0.05);
+          return { wordStart: ws, wordEnd: we, start: WORDS[ws].start, end: gEnd };
+        });
+
+        var PARTICLE_COLORS = [
+          "#FFD700",
+          "#FF6B35",
+          "#FF3C78",
+          "#9B5DE5",
+          "#00BBF9",
+          "#00F5D4",
+          "#ffffff",
+          "#F15BB5",
+        ];
+        var NUM_PARTICLES = 10;
+
+        var container = document.getElementById("bs-container");
+        var tl = gsap.timeline({ paused: true });
+
+        GROUPS.forEach(function (g, gi) {
+          var groupWords = WORDS.slice(g.wordStart, g.wordEnd + 1);
+          var groupText = groupWords
+            .map(function (w) {
+              return w.text.toUpperCase();
+            })
+            .join(" ");
+          var fontSize = fitFontSize(groupText, 88, "900", "'Outfit', sans-serif", 1720);
+          var grp = document.createElement("div");
+          grp.className = "bs-group";
+          grp.id = "bs-grp-" + gi;
+
+          groupWords.forEach(function (w, i) {
+            var wi = g.wordStart + i;
+            var span = document.createElement("span");
+            span.className = "bs-word";
+            span.id = "bs-w-" + wi;
+            span.textContent = w.text.toUpperCase();
+            span.style.fontSize = fontSize + "px";
+            grp.appendChild(span);
+          });
+
+          container.appendChild(grp);
+        });
+
+        // Create particles for keyword words
+        var particleData = {};
+        WORDS.forEach(function (w, wi) {
+          if (!KEYWORDS.has(wi)) return;
+          var rng = mulberry32(wi * 137 + 99);
+          particleData[wi] = [];
+          for (var p = 0; p < NUM_PARTICLES; p++) {
+            var angle = (p / NUM_PARTICLES) * Math.PI * 2 + rng() * 0.6;
+            var dist = 120 + rng() * 200;
+            var sz = 4 + rng() * 8;
+            var dx = Math.cos(angle) * dist;
+            var dy = -Math.sin(angle) * dist;
+            var dot = document.createElement("div");
+            dot.className = "bs-particle";
+            dot.id = "bs-p-" + wi + "-" + p;
+            dot.style.backgroundColor = PARTICLE_COLORS[p % PARTICLE_COLORS.length];
+            dot.style.width = sz.toFixed(1) + "px";
+            dot.style.height = sz.toFixed(1) + "px";
+            container.appendChild(dot);
+            particleData[wi].push({ el: dot, dx: dx, dy: dy });
+          }
+        });
+
+        GROUPS.forEach(function (g, gi) {
+          var grp = document.getElementById("bs-grp-" + gi);
+          var groupWords = WORDS.slice(g.wordStart, g.wordEnd + 1);
+
+          tl.set(grp, { visibility: "visible" }, g.start);
+          tl.fromTo(
+            grp,
+            { opacity: 0, scale: 0.92 },
+            { opacity: 1, scale: 1, duration: 0.2, ease: "back.out(1.5)" },
+            g.start,
+          );
+
+          groupWords.forEach(function (w, i) {
+            var wi = g.wordStart + i;
+            var wordEl = document.getElementById("bs-w-" + wi);
+            var isKW = KEYWORDS.has(wi);
+
+            tl.to(
+              wordEl,
+              { color: isKW ? "#FFD700" : "#ffffff", scale: isKW ? 1.12 : 1.05, duration: 0.08 },
+              w.start,
+            );
+            tl.to(wordEl, { color: "rgba(255,255,255,0.4)", scale: 1.0, duration: 0.1 }, w.end);
+
+            if (isKW && particleData[wi]) {
+              particleData[wi].forEach(function (pd, pi) {
+                tl.set(pd.el, { x: 0, y: 0, opacity: 0 }, w.start);
+                tl.to(
+                  pd.el,
+                  { x: pd.dx, y: pd.dy, opacity: 1, duration: 0.12, ease: "power3.out" },
+                  w.start + pi * 0.018,
+                );
+                tl.to(
+                  pd.el,
+                  { opacity: 0, duration: 0.45, ease: "power1.in" },
+                  w.start + 0.12 + pi * 0.018,
+                );
+                tl.set(pd.el, { opacity: 0, x: 0, y: 0 }, w.start + 0.7);
+              });
+            }
+          });
+
+          tl.to(grp, { opacity: 0, duration: 0.14, ease: "power2.in" }, g.end - 0.14);
+          tl.set(grp, { opacity: 0, visibility: "hidden" }, g.end);
+        });
+
+        tl.seek(0);
+        window.__timelines["caption-particle-burst"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/caption-pill-karaoke/caption-pill-karaoke.html b/docs/public/catalog/components/caption-pill-karaoke/caption-pill-karaoke.html
new file mode 100644
index 0000000000..06b5a4ac2c
--- /dev/null
+++ b/docs/public/catalog/components/caption-pill-karaoke/caption-pill-karaoke.html
@@ -0,0 +1,382 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Pill Karaoke</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: transparent;
+        font-family: "Poppins", Arial, sans-serif;
+      }
+
+      #pill-karaoke {
+        pointer-events: none;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent;
+      }
+
+      .caption-layer {
+        position: absolute;
+        inset: 0;
+        z-index: 20;
+        pointer-events: none;
+        transform: translateZ(0);
+      }
+
+      .safe-zone {
+        position: absolute;
+        bottom: 100px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 1600px;
+        height: 220px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .caption-group {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 1600px;
+        height: 220px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0;
+      }
+
+      .caption-pill {
+        width: auto;
+        max-width: 1600px;
+        padding: 18px 60px 20px;
+        border-radius: 22px;
+        background: #e7e5e7;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+        text-align: center;
+        overflow: visible;
+      }
+
+      .caption-copy {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        color: #a6a6a6;
+        font-family: "Poppins", Arial, sans-serif;
+        font-size: 72px;
+        font-weight: 700;
+        line-height: 1.16;
+        letter-spacing: 0;
+        white-space: nowrap;
+        word-break: normal;
+        overflow: visible;
+      }
+
+      .caption-line {
+        display: flex;
+        justify-content: center;
+        gap: 16px;
+        width: 100%;
+        max-width: none;
+        line-height: 1.16;
+        white-space: nowrap;
+        overflow: visible;
+      }
+
+      .caption-word {
+        display: inline-block;
+        color: #a6a6a6;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="pill-karaoke"
+      data-composition-id="caption-pill-karaoke"
+      data-timeline-locked
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="caption-layer" aria-hidden="true">
+        <div id="caption-stage" class="safe-zone"></div>
+      </div>
+    </div>
+
+    <script>
+      var DURATION = 8;
+      var SAFE_ZONE_WIDTH = 1400;
+      var PILL_MAX_WIDTH = 1400;
+      var PILL_MIN_PADDING_X = 30;
+      var PILL_MAX_PADDING_X = 60;
+      var FONT_WIDTH_SAFETY = 1.18;
+      var FONT_FAMILY = "Poppins";
+      var FONT_WEIGHT = "700";
+      var BASE_FONT_SIZE = 72;
+      var MIN_FONT_SIZE = 52;
+      var MAX_WORDS_PER_GROUP = 4;
+      var WORD_SPACING = 16;
+      var PAUSE_THRESHOLD = 0.1;
+      var GROUP_END_BUFFER = 0.3;
+      var COLOR_INACTIVE = "#A6A6A6";
+      var COLOR_ACTIVE = "#1C1E1D";
+      var COLOR_FADE_DURATION = 0.1;
+      var WORD_FADE_LEAD = 0.05;
+
+      var TRANSCRIPT = [
+        { text: "Every", start: 0.0, end: 0.3 },
+        { text: "great", start: 0.3, end: 0.55 },
+        { text: "video", start: 0.55, end: 0.85 },
+        { text: "starts", start: 0.85, end: 1.1 },
+        { text: "with", start: 1.1, end: 1.25 },
+        { text: "a", start: 1.25, end: 1.35 },
+        { text: "single", start: 1.35, end: 1.65 },
+        { text: "frame.", start: 1.65, end: 2.0 },
+        { text: "HyperFrames", start: 2.1, end: 2.65 },
+        { text: "lets", start: 2.65, end: 2.85 },
+        { text: "you", start: 2.85, end: 2.95 },
+        { text: "write", start: 2.95, end: 3.15 },
+        { text: "HTML", start: 3.15, end: 3.55 },
+        { text: "and", start: 3.55, end: 3.65 },
+        { text: "render", start: 3.65, end: 3.95 },
+        { text: "professional", start: 3.95, end: 4.45 },
+        { text: "video.", start: 4.45, end: 4.8 },
+        { text: "No", start: 4.9, end: 5.05 },
+        { text: "timeline.", start: 5.05, end: 5.45 },
+        { text: "No", start: 5.5, end: 5.65 },
+        { text: "drag", start: 5.65, end: 5.85 },
+        { text: "and", start: 5.85, end: 5.95 },
+        { text: "drop.", start: 5.95, end: 6.25 },
+        { text: "Just", start: 6.35, end: 6.55 },
+        { text: "code", start: 6.55, end: 6.8 },
+        { text: "that", start: 6.8, end: 6.95 },
+        { text: "becomes", start: 6.95, end: 7.3 },
+        { text: "cinema.", start: 7.3, end: 7.7 },
+      ];
+
+      function normalizeWords(rawWords) {
+        return rawWords
+          .map(function (item) {
+            var text = String(item.word || item.text || "").trim();
+            return {
+              text: text,
+              start: Math.max(0, Number(item.start) || 0),
+              end: Math.min(DURATION, Math.max(Number(item.start) || 0, Number(item.end) || 0)),
+            };
+          })
+          .filter(function (w) {
+            return w.text.length > 0;
+          });
+      }
+
+      var measureCanvas = document.createElement("canvas");
+      var measureContext = measureCanvas.getContext("2d");
+
+      function measureWordWidth(text, fontSize) {
+        measureContext.font = FONT_WEIGHT + " " + fontSize + "px " + FONT_FAMILY;
+        return measureContext.measureText(text).width * FONT_WIDTH_SAFETY;
+      }
+
+      function measureLineWidth(words, fontSize) {
+        return words.reduce(function (total, word, index) {
+          return (
+            total + measureWordWidth(word.text.toLowerCase(), fontSize) + (index ? WORD_SPACING : 0)
+          );
+        }, 0);
+      }
+
+      function splitLinesForGroup(words, fontSize) {
+        var maxLineWidth = PILL_MAX_WIDTH - PILL_MIN_PADDING_X * 2;
+        if (
+          words.some(function (w) {
+            return measureWordWidth(w.text.toLowerCase(), fontSize) > maxLineWidth;
+          })
+        ) {
+          return null;
+        }
+        if (measureLineWidth(words, fontSize) <= maxLineWidth) return [words];
+        var bestSplit = null;
+        var bestImbalance = Infinity;
+        for (var split = 1; split < words.length; split++) {
+          var firstLine = words.slice(0, split);
+          var secondLine = words.slice(split);
+          var firstWidth = measureLineWidth(firstLine, fontSize);
+          var secondWidth = measureLineWidth(secondLine, fontSize);
+          if (firstWidth <= maxLineWidth && secondWidth <= maxLineWidth) {
+            var imbalance = Math.abs(firstWidth - secondWidth);
+            if (imbalance < bestImbalance) {
+              bestSplit = [firstLine, secondLine];
+              bestImbalance = imbalance;
+            }
+          }
+        }
+        return bestSplit;
+      }
+
+      function fitsInTwoLinesAtSize(words, fontSize) {
+        return splitLinesForGroup(words, fontSize) !== null;
+      }
+
+      function planPillLayout(words, fontSize) {
+        var lines = splitLinesForGroup(words, fontSize) || [words];
+        var widestLine = lines.reduce(function (max, lineWords) {
+          return Math.max(max, measureLineWidth(lineWords, fontSize));
+        }, 0);
+        var availablePadding = Math.floor((PILL_MAX_WIDTH - widestLine) / 2);
+        var padX = Math.max(PILL_MIN_PADDING_X, Math.min(PILL_MAX_PADDING_X, availablePadding));
+        var pillWidth = Math.min(PILL_MAX_WIDTH, Math.ceil(widestLine + padX * 2));
+        return { lines: lines, padX: padX, pillWidth: pillWidth };
+      }
+
+      function makeGroups(words) {
+        var groups = [];
+        var current = [];
+        words.forEach(function (word, index) {
+          var testGroup = current.concat([word]);
+          var nextWord = words[index + 1];
+          var wouldExceedMaxWords = testGroup.length > MAX_WORDS_PER_GROUP;
+          var wouldExceedTwoLines = !fitsInTwoLinesAtSize(testGroup, BASE_FONT_SIZE);
+          if (wouldExceedMaxWords || wouldExceedTwoLines) {
+            if (current.length) {
+              groups.push({
+                words: current.slice(),
+                start: current[0].start,
+                end: current[current.length - 1].end,
+              });
+            }
+            current = [word];
+            return;
+          }
+          current.push(word);
+          var hasPunctuation = /[,.:!?]$/.test(word.text);
+          var pauseDuration = nextWord ? nextWord.start - word.end : 0;
+          var hasNaturalPause = pauseDuration >= PAUSE_THRESHOLD;
+          var maxWordsReached = current.length >= MAX_WORDS_PER_GROUP;
+          if (maxWordsReached || !nextWord || hasPunctuation || hasNaturalPause) {
+            groups.push({
+              words: current.slice(),
+              start: current[0].start,
+              end: current[current.length - 1].end,
+            });
+            current = [];
+          }
+        });
+        if (current.length)
+          groups.push({
+            words: current.slice(),
+            start: current[0].start,
+            end: current[current.length - 1].end,
+          });
+        return groups;
+      }
+
+      function fontSizeForGroup(words) {
+        var size = BASE_FONT_SIZE;
+        while (size > MIN_FONT_SIZE && !fitsInTwoLinesAtSize(words, size)) {
+          size -= 2;
+        }
+        return size;
+      }
+
+      function buildCaptions(groups) {
+        var stage = document.getElementById("caption-stage");
+        groups.forEach(function (group, groupIndex) {
+          var groupEl = document.createElement("div");
+          var pillEl = document.createElement("div");
+          var copyEl = document.createElement("div");
+          var fontSize = fontSizeForGroup(group.words);
+          groupEl.id = "caption-group-" + groupIndex;
+          groupEl.className = "caption-group";
+          pillEl.className = "caption-pill";
+          copyEl.className = "caption-copy";
+          copyEl.style.fontSize = fontSize + "px";
+          var indexedWords = group.words.map(function (word, wordIndex) {
+            return { text: word.text, start: word.start, end: word.end, wordIndex: wordIndex };
+          });
+          var layout = planPillLayout(indexedWords, fontSize);
+          pillEl.style.width = layout.pillWidth + "px";
+          pillEl.style.paddingLeft = layout.padX + "px";
+          pillEl.style.paddingRight = layout.padX + "px";
+          layout.lines.slice(0, 2).forEach(function (lineWords) {
+            var lineEl = document.createElement("div");
+            lineEl.className = "caption-line";
+            lineWords.forEach(function (word) {
+              var wordEl = document.createElement("span");
+              wordEl.id = "caption-word-" + groupIndex + "-" + word.wordIndex;
+              wordEl.className = "caption-word";
+              wordEl.textContent = word.text.toLowerCase();
+              lineEl.appendChild(wordEl);
+            });
+            copyEl.appendChild(lineEl);
+          });
+          pillEl.appendChild(copyEl);
+          groupEl.appendChild(pillEl);
+          stage.appendChild(groupEl);
+        });
+      }
+
+      var WORDS = normalizeWords(TRANSCRIPT);
+      var GROUPS = makeGroups(WORDS);
+      buildCaptions(GROUPS);
+
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+
+      GROUPS.forEach(function (group, groupIndex) {
+        var groupEl = document.getElementById("caption-group-" + groupIndex);
+        var nextGroup = GROUPS[groupIndex + 1];
+        var isLastGroup = groupIndex === GROUPS.length - 1;
+        var effectiveEnd = isLastGroup
+          ? DURATION
+          : Math.min(nextGroup.start, group.end + GROUP_END_BUFFER);
+        var visibleStart = Math.max(0, group.start);
+        var visibleEnd = Math.max(visibleStart + 0.01, effectiveEnd);
+
+        tl.set(groupEl, { opacity: 1 }, visibleStart);
+        tl.set(groupEl, { opacity: 0 }, visibleEnd);
+
+        group.words.forEach(function (word, wordIndex) {
+          var wordEl = document.getElementById("caption-word-" + groupIndex + "-" + wordIndex);
+          var isFirstWord = wordIndex === 0;
+          var wordStart = Math.max(visibleStart, word.start - WORD_FADE_LEAD);
+          tl.set(wordEl, { color: isFirstWord ? COLOR_ACTIVE : COLOR_INACTIVE }, visibleStart);
+          if (isFirstWord) return;
+          tl.to(
+            wordEl,
+            { color: COLOR_ACTIVE, duration: COLOR_FADE_DURATION, ease: "none" },
+            wordStart,
+          );
+        });
+      });
+
+      window.__timelines["caption-pill-karaoke"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/caption-pill-karaoke/demo.html b/docs/public/catalog/components/caption-pill-karaoke/demo.html
new file mode 100644
index 0000000000..ac4d10ea18
--- /dev/null
+++ b/docs/public/catalog/components/caption-pill-karaoke/demo.html
@@ -0,0 +1,380 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Pill Karaoke</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: #000000;
+        font-family: "Poppins", Arial, sans-serif;
+      }
+
+      #pill-karaoke {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000000;
+      }
+
+      .caption-layer {
+        position: absolute;
+        inset: 0;
+        z-index: 20;
+        pointer-events: none;
+        transform: translateZ(0);
+      }
+
+      .safe-zone {
+        position: absolute;
+        bottom: 100px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 1600px;
+        height: 220px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .caption-group {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 1600px;
+        height: 220px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0;
+      }
+
+      .caption-pill {
+        width: auto;
+        max-width: 1600px;
+        padding: 18px 60px 20px;
+        border-radius: 22px;
+        background: #e7e5e7;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+        text-align: center;
+        overflow: visible;
+      }
+
+      .caption-copy {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        color: #a6a6a6;
+        font-family: "Poppins", Arial, sans-serif;
+        font-size: 72px;
+        font-weight: 700;
+        line-height: 1.16;
+        letter-spacing: 0;
+        white-space: nowrap;
+        word-break: normal;
+        overflow: visible;
+      }
+
+      .caption-line {
+        display: flex;
+        justify-content: center;
+        gap: 16px;
+        width: 100%;
+        max-width: none;
+        line-height: 1.16;
+        white-space: nowrap;
+        overflow: visible;
+      }
+
+      .caption-word {
+        display: inline-block;
+        color: #a6a6a6;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="pill-karaoke"
+      data-composition-id="caption-pill-karaoke"
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="caption-layer" aria-hidden="true">
+        <div id="caption-stage" class="safe-zone"></div>
+      </div>
+    </div>
+
+    <script>
+      var DURATION = 8;
+      var SAFE_ZONE_WIDTH = 1400;
+      var PILL_MAX_WIDTH = 1400;
+      var PILL_MIN_PADDING_X = 30;
+      var PILL_MAX_PADDING_X = 60;
+      var FONT_WIDTH_SAFETY = 1.18;
+      var FONT_FAMILY = "Poppins";
+      var FONT_WEIGHT = "700";
+      var BASE_FONT_SIZE = 72;
+      var MIN_FONT_SIZE = 52;
+      var MAX_WORDS_PER_GROUP = 4;
+      var WORD_SPACING = 16;
+      var PAUSE_THRESHOLD = 0.1;
+      var GROUP_END_BUFFER = 0.3;
+      var COLOR_INACTIVE = "#A6A6A6";
+      var COLOR_ACTIVE = "#1C1E1D";
+      var COLOR_FADE_DURATION = 0.1;
+      var WORD_FADE_LEAD = 0.05;
+
+      var TRANSCRIPT = [
+        { text: "Every", start: 0.0, end: 0.3 },
+        { text: "great", start: 0.3, end: 0.55 },
+        { text: "video", start: 0.55, end: 0.85 },
+        { text: "starts", start: 0.85, end: 1.1 },
+        { text: "with", start: 1.1, end: 1.25 },
+        { text: "a", start: 1.25, end: 1.35 },
+        { text: "single", start: 1.35, end: 1.65 },
+        { text: "frame.", start: 1.65, end: 2.0 },
+        { text: "HyperFrames", start: 2.1, end: 2.65 },
+        { text: "lets", start: 2.65, end: 2.85 },
+        { text: "you", start: 2.85, end: 2.95 },
+        { text: "write", start: 2.95, end: 3.15 },
+        { text: "HTML", start: 3.15, end: 3.55 },
+        { text: "and", start: 3.55, end: 3.65 },
+        { text: "render", start: 3.65, end: 3.95 },
+        { text: "professional", start: 3.95, end: 4.45 },
+        { text: "video.", start: 4.45, end: 4.8 },
+        { text: "No", start: 4.9, end: 5.05 },
+        { text: "timeline.", start: 5.05, end: 5.45 },
+        { text: "No", start: 5.5, end: 5.65 },
+        { text: "drag", start: 5.65, end: 5.85 },
+        { text: "and", start: 5.85, end: 5.95 },
+        { text: "drop.", start: 5.95, end: 6.25 },
+        { text: "Just", start: 6.35, end: 6.55 },
+        { text: "code", start: 6.55, end: 6.8 },
+        { text: "that", start: 6.8, end: 6.95 },
+        { text: "becomes", start: 6.95, end: 7.3 },
+        { text: "cinema.", start: 7.3, end: 7.7 },
+      ];
+
+      function normalizeWords(rawWords) {
+        return rawWords
+          .map(function (item) {
+            var text = String(item.word || item.text || "").trim();
+            return {
+              text: text,
+              start: Math.max(0, Number(item.start) || 0),
+              end: Math.min(DURATION, Math.max(Number(item.start) || 0, Number(item.end) || 0)),
+            };
+          })
+          .filter(function (w) {
+            return w.text.length > 0;
+          });
+      }
+
+      var measureCanvas = document.createElement("canvas");
+      var measureContext = measureCanvas.getContext("2d");
+
+      function measureWordWidth(text, fontSize) {
+        measureContext.font = FONT_WEIGHT + " " + fontSize + "px " + FONT_FAMILY;
+        return measureContext.measureText(text).width * FONT_WIDTH_SAFETY;
+      }
+
+      function measureLineWidth(words, fontSize) {
+        return words.reduce(function (total, word, index) {
+          return (
+            total + measureWordWidth(word.text.toLowerCase(), fontSize) + (index ? WORD_SPACING : 0)
+          );
+        }, 0);
+      }
+
+      function splitLinesForGroup(words, fontSize) {
+        var maxLineWidth = PILL_MAX_WIDTH - PILL_MIN_PADDING_X * 2;
+        if (
+          words.some(function (w) {
+            return measureWordWidth(w.text.toLowerCase(), fontSize) > maxLineWidth;
+          })
+        ) {
+          return null;
+        }
+        if (measureLineWidth(words, fontSize) <= maxLineWidth) return [words];
+        var bestSplit = null;
+        var bestImbalance = Infinity;
+        for (var split = 1; split < words.length; split++) {
+          var firstLine = words.slice(0, split);
+          var secondLine = words.slice(split);
+          var firstWidth = measureLineWidth(firstLine, fontSize);
+          var secondWidth = measureLineWidth(secondLine, fontSize);
+          if (firstWidth <= maxLineWidth && secondWidth <= maxLineWidth) {
+            var imbalance = Math.abs(firstWidth - secondWidth);
+            if (imbalance < bestImbalance) {
+              bestSplit = [firstLine, secondLine];
+              bestImbalance = imbalance;
+            }
+          }
+        }
+        return bestSplit;
+      }
+
+      function fitsInTwoLinesAtSize(words, fontSize) {
+        return splitLinesForGroup(words, fontSize) !== null;
+      }
+
+      function planPillLayout(words, fontSize) {
+        var lines = splitLinesForGroup(words, fontSize) || [words];
+        var widestLine = lines.reduce(function (max, lineWords) {
+          return Math.max(max, measureLineWidth(lineWords, fontSize));
+        }, 0);
+        var availablePadding = Math.floor((PILL_MAX_WIDTH - widestLine) / 2);
+        var padX = Math.max(PILL_MIN_PADDING_X, Math.min(PILL_MAX_PADDING_X, availablePadding));
+        var pillWidth = Math.min(PILL_MAX_WIDTH, Math.ceil(widestLine + padX * 2));
+        return { lines: lines, padX: padX, pillWidth: pillWidth };
+      }
+
+      function makeGroups(words) {
+        var groups = [];
+        var current = [];
+        words.forEach(function (word, index) {
+          var testGroup = current.concat([word]);
+          var nextWord = words[index + 1];
+          var wouldExceedMaxWords = testGroup.length > MAX_WORDS_PER_GROUP;
+          var wouldExceedTwoLines = !fitsInTwoLinesAtSize(testGroup, BASE_FONT_SIZE);
+          if (wouldExceedMaxWords || wouldExceedTwoLines) {
+            if (current.length) {
+              groups.push({
+                words: current.slice(),
+                start: current[0].start,
+                end: current[current.length - 1].end,
+              });
+            }
+            current = [word];
+            return;
+          }
+          current.push(word);
+          var hasPunctuation = /[,.:!?]$/.test(word.text);
+          var pauseDuration = nextWord ? nextWord.start - word.end : 0;
+          var hasNaturalPause = pauseDuration >= PAUSE_THRESHOLD;
+          var maxWordsReached = current.length >= MAX_WORDS_PER_GROUP;
+          if (maxWordsReached || !nextWord || hasPunctuation || hasNaturalPause) {
+            groups.push({
+              words: current.slice(),
+              start: current[0].start,
+              end: current[current.length - 1].end,
+            });
+            current = [];
+          }
+        });
+        if (current.length)
+          groups.push({
+            words: current.slice(),
+            start: current[0].start,
+            end: current[current.length - 1].end,
+          });
+        return groups;
+      }
+
+      function fontSizeForGroup(words) {
+        var size = BASE_FONT_SIZE;
+        while (size > MIN_FONT_SIZE && !fitsInTwoLinesAtSize(words, size)) {
+          size -= 2;
+        }
+        return size;
+      }
+
+      function buildCaptions(groups) {
+        var stage = document.getElementById("caption-stage");
+        groups.forEach(function (group, groupIndex) {
+          var groupEl = document.createElement("div");
+          var pillEl = document.createElement("div");
+          var copyEl = document.createElement("div");
+          var fontSize = fontSizeForGroup(group.words);
+          groupEl.id = "caption-group-" + groupIndex;
+          groupEl.className = "caption-group";
+          pillEl.className = "caption-pill";
+          copyEl.className = "caption-copy";
+          copyEl.style.fontSize = fontSize + "px";
+          var indexedWords = group.words.map(function (word, wordIndex) {
+            return { text: word.text, start: word.start, end: word.end, wordIndex: wordIndex };
+          });
+          var layout = planPillLayout(indexedWords, fontSize);
+          pillEl.style.width = layout.pillWidth + "px";
+          pillEl.style.paddingLeft = layout.padX + "px";
+          pillEl.style.paddingRight = layout.padX + "px";
+          layout.lines.slice(0, 2).forEach(function (lineWords) {
+            var lineEl = document.createElement("div");
+            lineEl.className = "caption-line";
+            lineWords.forEach(function (word) {
+              var wordEl = document.createElement("span");
+              wordEl.id = "caption-word-" + groupIndex + "-" + word.wordIndex;
+              wordEl.className = "caption-word";
+              wordEl.textContent = word.text.toLowerCase();
+              lineEl.appendChild(wordEl);
+            });
+            copyEl.appendChild(lineEl);
+          });
+          pillEl.appendChild(copyEl);
+          groupEl.appendChild(pillEl);
+          stage.appendChild(groupEl);
+        });
+      }
+
+      var WORDS = normalizeWords(TRANSCRIPT);
+      var GROUPS = makeGroups(WORDS);
+      buildCaptions(GROUPS);
+
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+
+      GROUPS.forEach(function (group, groupIndex) {
+        var groupEl = document.getElementById("caption-group-" + groupIndex);
+        var nextGroup = GROUPS[groupIndex + 1];
+        var isLastGroup = groupIndex === GROUPS.length - 1;
+        var effectiveEnd = isLastGroup
+          ? DURATION
+          : Math.min(nextGroup.start, group.end + GROUP_END_BUFFER);
+        var visibleStart = Math.max(0, group.start);
+        var visibleEnd = Math.max(visibleStart + 0.01, effectiveEnd);
+
+        tl.set(groupEl, { opacity: 1 }, visibleStart);
+        tl.set(groupEl, { opacity: 0 }, visibleEnd);
+
+        group.words.forEach(function (word, wordIndex) {
+          var wordEl = document.getElementById("caption-word-" + groupIndex + "-" + wordIndex);
+          var isFirstWord = wordIndex === 0;
+          var wordStart = Math.max(visibleStart, word.start - WORD_FADE_LEAD);
+          tl.set(wordEl, { color: isFirstWord ? COLOR_ACTIVE : COLOR_INACTIVE }, visibleStart);
+          if (isFirstWord) return;
+          tl.to(
+            wordEl,
+            { color: COLOR_ACTIVE, duration: COLOR_FADE_DURATION, ease: "none" },
+            wordStart,
+          );
+        });
+      });
+
+      window.__timelines["caption-pill-karaoke"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/caption-texture/__hf-variables-preview.html b/docs/public/catalog/components/caption-texture/__hf-variables-preview.html
new file mode 100644
index 0000000000..3f8e65135d
--- /dev/null
+++ b/docs/public/catalog/components/caption-texture/__hf-variables-preview.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Texture variables preview</title>
+    <style>
+      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #0a0805; }
+      #hf-vars-root { position: relative; width: 1920px; height: 1080px; }
+      #hf-vars-mount { position: absolute; inset: 0; display: grid; place-items: center; }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  </head>
+  <body>
+    <div id="hf-vars-root" data-composition-id="caption-texture-variables-preview" data-start="0" data-width="1920" data-height="1080" data-duration="5" data-fps="30">
+      <div id="hf-vars-mount" class="clip" data-composition-id="caption-texture" data-composition-src="./caption-texture.html" data-start="0" data-duration="5" data-track-index="0" data-width="1920" data-height="1080"></div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["caption-texture-variables-preview"] = gsap.timeline({ paused: true });
+    </script>
+<script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "caption-texture.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/caption-texture/caption-texture.html b/docs/public/catalog/components/caption-texture/caption-texture.html
new file mode 100644
index 0000000000..1647735f76
--- /dev/null
+++ b/docs/public/catalog/components/caption-texture/caption-texture.html
@@ -0,0 +1,210 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Texture</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      .hf-texture-text {
+        color: #fff;
+        -webkit-mask-size: var(--mask-size, cover);
+        mask-size: var(--mask-size, cover);
+        -webkit-mask-position: var(--mask-position, center);
+        mask-position: var(--mask-position, center);
+        -webkit-mask-mode: luminance;
+        mask-mode: luminance;
+        filter: contrast(var(--mask-contrast, 1));
+      }
+
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: transparent;
+      }
+      #texture-lava {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent;
+      }
+      .lv-overlay {
+        position: absolute;
+        inset: 0;
+        background: transparent;
+        z-index: 1;
+        pointer-events: none;
+      }
+      #lv-container {
+        position: absolute;
+        inset: 0;
+        z-index: 10;
+        pointer-events: none;
+      }
+
+      .lv-texture-override {
+        -webkit-mask-size: 200% 200%;
+        mask-size: 200% 200%;
+        -webkit-mask-position: 0% 50%;
+        mask-position: 0% 50%;
+        -webkit-mask-mode: luminance;
+        mask-mode: luminance;
+        filter: contrast(1.2);
+      }
+
+      .lv-shadow {
+        position: absolute;
+        left: 0;
+        width: 100%;
+        text-align: center;
+        top: 50%;
+        filter: drop-shadow(0 4px 24px rgba(255, 100, 20, 0.55));
+        opacity: 0;
+        visibility: hidden;
+      }
+      .lv-word {
+        font-family: "Anton", sans-serif;
+        font-weight: 400;
+        text-transform: uppercase;
+        color: #ffd0a0;
+        display: inline-block;
+        letter-spacing: 0.04em;
+        line-height: 1;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="caption-texture"
+      data-composition-id="caption-texture"
+      data-timeline-locked
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+      data-composition-variables='{"texture":{"type":"string","default":"lava"}}'
+    >
+      <div class="lv-overlay"></div>
+      <div id="lv-container"></div>
+    </div>
+
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        var vars =
+          window.__hyperframes && window.__hyperframes.getVariables
+            ? window.__hyperframes.getVariables()
+            : {};
+        var TEXTURE = vars.texture || "lava";
+        var TEXTURE_URL = "compositions/components/" + TEXTURE + ".png";
+
+        var _fitCanvas = document.createElement("canvas");
+        var _fitCtx = _fitCanvas.getContext("2d");
+        function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {
+          var size = baseFontSize;
+          var minSize = Math.floor(baseFontSize * 0.45);
+          while (size > minSize) {
+            _fitCtx.font = fontWeight + " " + size + "px " + fontFamily;
+            if (_fitCtx.measureText(text).width <= maxWidth) return size;
+            size -= 2;
+          }
+          return minSize;
+        }
+
+        var WORDS = [
+          { text: "Every", start: 0.0, end: 0.3 },
+          { text: "great", start: 0.3, end: 0.55 },
+          { text: "video", start: 0.55, end: 0.85 },
+          { text: "starts", start: 0.85, end: 1.1 },
+          { text: "with", start: 1.1, end: 1.25 },
+          { text: "a", start: 1.25, end: 1.35 },
+          { text: "single", start: 1.35, end: 1.65 },
+          { text: "frame.", start: 1.65, end: 2.0 },
+          { text: "HyperFrames", start: 2.1, end: 2.65 },
+          { text: "lets", start: 2.65, end: 2.85 },
+          { text: "you", start: 2.85, end: 2.95 },
+          { text: "write", start: 2.95, end: 3.15 },
+          { text: "HTML", start: 3.15, end: 3.55 },
+          { text: "and", start: 3.55, end: 3.65 },
+          { text: "render", start: 3.65, end: 3.95 },
+          { text: "professional", start: 3.95, end: 4.45 },
+          { text: "video.", start: 4.45, end: 4.8 },
+          { text: "No", start: 4.9, end: 5.05 },
+          { text: "timeline.", start: 5.05, end: 5.45 },
+          { text: "No", start: 5.5, end: 5.65 },
+          { text: "drag", start: 5.65, end: 5.85 },
+          { text: "and", start: 5.85, end: 5.95 },
+          { text: "drop.", start: 5.95, end: 6.25 },
+          { text: "Just", start: 6.35, end: 6.55 },
+          { text: "code", start: 6.55, end: 6.8 },
+          { text: "that", start: 6.8, end: 6.95 },
+          { text: "becomes", start: 6.95, end: 7.3 },
+          { text: "cinema.", start: 7.3, end: 7.7 },
+        ];
+
+        var KEYWORDS = new Set([8, 12, 15, 24, 27]);
+
+        var container = document.getElementById("lv-container");
+        var tl = gsap.timeline({ paused: true });
+
+        WORDS.forEach(function (w, wi) {
+          var txt = w.text.toUpperCase();
+          var fontSize = fitFontSize(txt, 200, "400", "'Anton', sans-serif", 1720);
+
+          var shadow = document.createElement("div");
+          shadow.className = "lv-shadow";
+          shadow.id = "lv-shadow-" + wi;
+          gsap.set(shadow, { yPercent: -50 });
+
+          var wordEl = document.createElement("div");
+          wordEl.className = "hf-texture-text lv-texture-override lv-word";
+          wordEl.id = "lv-word-" + wi;
+          wordEl.textContent = txt;
+          wordEl.style.fontSize = fontSize + "px";
+          wordEl.style.webkitMaskImage = "url('" + TEXTURE_URL + "')";
+          wordEl.style.maskImage = "url('" + TEXTURE_URL + "')";
+          if (KEYWORDS.has(wi)) wordEl.style.color = "#FFAA44";
+
+          shadow.appendChild(wordEl);
+          container.appendChild(shadow);
+
+          var dur = Math.max(w.end - w.start + 0.3, 0.4);
+
+          tl.set(shadow, { visibility: "visible", opacity: 0 }, w.start);
+          tl.fromTo(
+            shadow,
+            { opacity: 0, scale: 0.88 },
+            { opacity: 1, scale: 1, duration: 0.18, ease: "power3.out" },
+            w.start,
+          );
+          tl.set(wordEl, { "--mask-position": "0% 50%" }, w.start);
+          tl.to(
+            wordEl,
+            { "--mask-position": "100% 50%", duration: dur, ease: "sine.inOut" },
+            w.start,
+          );
+
+          tl.to(shadow, { opacity: 0, scale: 1.08, duration: 0.1, ease: "power2.in" }, w.end);
+          tl.set(shadow, { opacity: 0, visibility: "hidden" }, w.end + 0.1);
+        });
+
+        tl.seek(0);
+        window.__timelines["caption-texture"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/caption-texture/concrete-042-a.png b/docs/public/catalog/components/caption-texture/concrete-042-a.png
new file mode 100644
index 0000000000..1099dac002
Binary files /dev/null and b/docs/public/catalog/components/caption-texture/concrete-042-a.png differ
diff --git a/docs/public/catalog/components/caption-texture/demo.html b/docs/public/catalog/components/caption-texture/demo.html
new file mode 100644
index 0000000000..4a5c2a4891
--- /dev/null
+++ b/docs/public/catalog/components/caption-texture/demo.html
@@ -0,0 +1,225 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Texture</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      .hf-texture-text {
+        color: #fff;
+        -webkit-mask-size: var(--mask-size, cover);
+        mask-size: var(--mask-size, cover);
+        -webkit-mask-position: var(--mask-position, center);
+        mask-position: var(--mask-position, center);
+        -webkit-mask-mode: luminance;
+        mask-mode: luminance;
+        filter: contrast(var(--mask-contrast, 1));
+      }
+
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: #0a0805;
+      }
+      #texture-lava {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0a0805;
+      }
+      .lv-overlay {
+        position: absolute;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.55);
+        z-index: 1;
+        pointer-events: none;
+      }
+      #lv-container {
+        position: absolute;
+        inset: 0;
+        z-index: 10;
+        pointer-events: none;
+      }
+
+      .lv-texture-override {
+        -webkit-mask-size: 200% 200%;
+        mask-size: 200% 200%;
+        -webkit-mask-position: 0% 50%;
+        mask-position: 0% 50%;
+        -webkit-mask-mode: luminance;
+        mask-mode: luminance;
+        filter: contrast(1.2);
+      }
+
+      .lv-shadow {
+        position: absolute;
+        left: 0;
+        width: 100%;
+        text-align: center;
+        top: 50%;
+        filter: drop-shadow(0 4px 24px rgba(255, 100, 20, 0.55));
+        opacity: 0;
+        visibility: hidden;
+      }
+      .lv-word {
+        font-family: "Anton", sans-serif;
+        font-weight: 400;
+        text-transform: uppercase;
+        color: #ffd0a0;
+        display: inline-block;
+        letter-spacing: 0.04em;
+        line-height: 1;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="caption-texture"
+      data-composition-id="caption-texture"
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+      data-composition-variables='{"texture":{"type":"string","default":"lava"}}'
+    >
+      <div class="lv-overlay"></div>
+      <div id="lv-container"></div>
+    </div>
+
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        var vars =
+          window.__hyperframes && window.__hyperframes.getVariables
+            ? window.__hyperframes.getVariables()
+            : {};
+        var TEXTURE = vars.texture || "lava";
+        var TEXTURE_URL = "compositions/components/" + TEXTURE + ".png";
+
+        var _fitCanvas = document.createElement("canvas");
+        var _fitCtx = _fitCanvas.getContext("2d");
+        function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {
+          var size = baseFontSize;
+          var minSize = Math.floor(baseFontSize * 0.45);
+          while (size > minSize) {
+            _fitCtx.font = fontWeight + " " + size + "px " + fontFamily;
+            if (_fitCtx.measureText(text).width <= maxWidth) return size;
+            size -= 2;
+          }
+          return minSize;
+        }
+
+        var WORDS = [
+          { text: "Every", start: 0.0, end: 0.3 },
+          { text: "great", start: 0.3, end: 0.55 },
+          { text: "video", start: 0.55, end: 0.85 },
+          { text: "starts", start: 0.85, end: 1.1 },
+          { text: "with", start: 1.1, end: 1.25 },
+          { text: "a", start: 1.25, end: 1.35 },
+          { text: "single", start: 1.35, end: 1.65 },
+          { text: "frame.", start: 1.65, end: 2.0 },
+          { text: "HyperFrames", start: 2.1, end: 2.65 },
+          { text: "lets", start: 2.65, end: 2.85 },
+          { text: "you", start: 2.85, end: 2.95 },
+          { text: "write", start: 2.95, end: 3.15 },
+          { text: "HTML", start: 3.15, end: 3.55 },
+          { text: "and", start: 3.55, end: 3.65 },
+          { text: "render", start: 3.65, end: 3.95 },
+          { text: "professional", start: 3.95, end: 4.45 },
+          { text: "video.", start: 4.45, end: 4.8 },
+          { text: "No", start: 4.9, end: 5.05 },
+          { text: "timeline.", start: 5.05, end: 5.45 },
+          { text: "No", start: 5.5, end: 5.65 },
+          { text: "drag", start: 5.65, end: 5.85 },
+          { text: "and", start: 5.85, end: 5.95 },
+          { text: "drop.", start: 5.95, end: 6.25 },
+          { text: "Just", start: 6.35, end: 6.55 },
+          { text: "code", start: 6.55, end: 6.8 },
+          { text: "that", start: 6.8, end: 6.95 },
+          { text: "becomes", start: 6.95, end: 7.3 },
+          { text: "cinema.", start: 7.3, end: 7.7 },
+        ];
+
+        var KEYWORDS = new Set([8, 12, 15, 24, 27]);
+
+        var container = document.getElementById("lv-container");
+        var tl = gsap.timeline({ paused: true });
+
+        WORDS.forEach(function (w, wi) {
+          var txt = w.text.toUpperCase();
+          var fontSize = fitFontSize(txt, 200, "400", "'Anton', sans-serif", 1720);
+
+          var shadow = document.createElement("div");
+          shadow.className = "lv-shadow";
+          shadow.id = "lv-shadow-" + wi;
+          gsap.set(shadow, { yPercent: -50 });
+
+          var wordEl = document.createElement("div");
+          wordEl.className = "hf-texture-text lv-texture-override lv-word";
+          wordEl.id = "lv-word-" + wi;
+          wordEl.textContent = txt;
+          wordEl.style.fontSize = fontSize + "px";
+          wordEl.style.webkitMaskImage = "url('" + TEXTURE_URL + "')";
+          wordEl.style.maskImage = "url('" + TEXTURE_URL + "')";
+          if (KEYWORDS.has(wi)) wordEl.style.color = "#FFAA44";
+
+          shadow.appendChild(wordEl);
+          container.appendChild(shadow);
+
+          var dur = Math.max(w.end - w.start + 0.3, 0.4);
+
+          tl.set(shadow, { visibility: "visible", opacity: 0 }, w.start);
+          tl.fromTo(
+            shadow,
+            { opacity: 0, scale: 0.88 },
+            { opacity: 1, scale: 1, duration: 0.18, ease: "power3.out" },
+            w.start,
+          );
+          tl.set(wordEl, { "--mask-position": "0% 50%" }, w.start);
+          tl.to(
+            wordEl,
+            { "--mask-position": "100% 50%", duration: dur, ease: "sine.inOut" },
+            w.start,
+          );
+
+          tl.to(shadow, { opacity: 0, scale: 1.08, duration: 0.1, ease: "power2.in" }, w.end);
+          tl.set(shadow, { opacity: 0, visibility: "hidden" }, w.end + 0.1);
+        });
+
+        tl.seek(0);
+        window.__timelines["caption-texture"] = tl;
+      })();
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "caption-texture.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/caption-texture/lava.png b/docs/public/catalog/components/caption-texture/lava.png
new file mode 100644
index 0000000000..3de2ac6c20
Binary files /dev/null and b/docs/public/catalog/components/caption-texture/lava.png differ
diff --git a/docs/public/catalog/components/caption-texture/marble-012.png b/docs/public/catalog/components/caption-texture/marble-012.png
new file mode 100644
index 0000000000..d578034f88
Binary files /dev/null and b/docs/public/catalog/components/caption-texture/marble-012.png differ
diff --git a/docs/public/catalog/components/caption-texture/metal-046-b.png b/docs/public/catalog/components/caption-texture/metal-046-b.png
new file mode 100644
index 0000000000..22190c06dc
Binary files /dev/null and b/docs/public/catalog/components/caption-texture/metal-046-b.png differ
diff --git a/docs/public/catalog/components/caption-texture/rock-058.png b/docs/public/catalog/components/caption-texture/rock-058.png
new file mode 100644
index 0000000000..80637b21f9
Binary files /dev/null and b/docs/public/catalog/components/caption-texture/rock-058.png differ
diff --git a/docs/public/catalog/components/caption-texture/wood-066.png b/docs/public/catalog/components/caption-texture/wood-066.png
new file mode 100644
index 0000000000..cbc9d247fc
Binary files /dev/null and b/docs/public/catalog/components/caption-texture/wood-066.png differ
diff --git a/docs/public/catalog/components/caption-weight-shift/caption-weight-shift.html b/docs/public/catalog/components/caption-weight-shift/caption-weight-shift.html
new file mode 100644
index 0000000000..a6f37fe0b7
--- /dev/null
+++ b/docs/public/catalog/components/caption-weight-shift/caption-weight-shift.html
@@ -0,0 +1,397 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Weight Shift</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;700&display=swap"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: transparent;
+        font-family: "Montserrat", Arial, sans-serif;
+      }
+
+      #weight-shift {
+        pointer-events: none;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent;
+      }
+
+      .caption-layer {
+        position: absolute;
+        inset: 0;
+        z-index: 20;
+        pointer-events: none;
+        transform: translateZ(0);
+      }
+
+      .safe-zone {
+        position: absolute;
+        bottom: 100px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 1400px;
+        height: 278px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .caption-group {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 1400px;
+        height: 278px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0;
+        transform-origin: 50% 50%;
+        will-change: transform;
+        backface-visibility: hidden;
+      }
+
+      .caption-copy {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        max-width: 1400px;
+        text-align: center;
+      }
+
+      .caption-line {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 12px;
+        width: max-content;
+        max-width: 1400px;
+        line-height: 1.1;
+        white-space: nowrap;
+        color: #ffffff;
+        font-family: "Montserrat", Arial, sans-serif;
+        font-weight: 300;
+        font-size: 72px;
+        letter-spacing: -0.03em;
+        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+        text-transform: lowercase;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="weight-shift"
+      data-composition-id="caption-weight-shift"
+      data-timeline-locked
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="caption-layer" aria-hidden="true">
+        <div id="caption-stage" class="safe-zone"></div>
+      </div>
+    </div>
+
+    <script>
+      var DURATION = 8;
+      var SAFE_ZONE_WIDTH = 1400;
+      var MAX_LINE_WIDTH = SAFE_ZONE_WIDTH - 40;
+      var CAPTION_FONT_SIZE = 72;
+      var MAX_WORDS_PER_GROUP = 4;
+      var WORD_SPACING = 12;
+      var PAUSE_THRESHOLD = 0.1;
+      var ENTRY_DURATION = 100 / 1000;
+      var WEIGHT_TRANSITION = 100 / 1000;
+      var FONT_WIDTH_SAFETY = 1.14;
+      var FONT_WEIGHT_LIGHT = 300;
+      var FONT_WEIGHT_BOLD = 700;
+
+      var TRANSCRIPT = [
+        { text: "Every", start: 0.0, end: 0.3 },
+        { text: "great", start: 0.3, end: 0.55 },
+        { text: "video", start: 0.55, end: 0.85 },
+        { text: "starts", start: 0.85, end: 1.1 },
+        { text: "with", start: 1.1, end: 1.25 },
+        { text: "a", start: 1.25, end: 1.35 },
+        { text: "single", start: 1.35, end: 1.65 },
+        { text: "frame.", start: 1.65, end: 2.0 },
+        { text: "HyperFrames", start: 2.1, end: 2.65 },
+        { text: "lets", start: 2.65, end: 2.85 },
+        { text: "you", start: 2.85, end: 2.95 },
+        { text: "write", start: 2.95, end: 3.15 },
+        { text: "HTML", start: 3.15, end: 3.55 },
+        { text: "and", start: 3.55, end: 3.65 },
+        { text: "render", start: 3.65, end: 3.95 },
+        { text: "professional", start: 3.95, end: 4.45 },
+        { text: "video.", start: 4.45, end: 4.8 },
+        { text: "No", start: 4.9, end: 5.05 },
+        { text: "timeline.", start: 5.05, end: 5.45 },
+        { text: "No", start: 5.5, end: 5.65 },
+        { text: "drag", start: 5.65, end: 5.85 },
+        { text: "and", start: 5.85, end: 5.95 },
+        { text: "drop.", start: 5.95, end: 6.25 },
+        { text: "Just", start: 6.35, end: 6.55 },
+        { text: "code", start: 6.55, end: 6.8 },
+        { text: "that", start: 6.8, end: 6.95 },
+        { text: "becomes", start: 6.95, end: 7.3 },
+        { text: "cinema.", start: 7.3, end: 7.7 },
+      ];
+
+      function normalizeWords(rawWords) {
+        return rawWords
+          .map(function (item) {
+            return {
+              text: String(item.word || item.text || "").trim(),
+              start: Math.max(0, Number(item.start) || 0),
+              end: Math.min(DURATION, Math.max(Number(item.start) || 0, Number(item.end) || 0)),
+            };
+          })
+          .filter(function (word) {
+            return word.text.length > 0;
+          });
+      }
+
+      var _fitCanvas = document.createElement("canvas");
+      var _fitCtx = _fitCanvas.getContext("2d");
+      function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {
+        var size = baseFontSize;
+        var minSize = Math.floor(baseFontSize * 0.45);
+        while (size > minSize) {
+          _fitCtx.font = fontWeight + " " + size + "px " + fontFamily;
+          if (_fitCtx.measureText(text).width <= maxWidth) return size;
+          size -= 2;
+        }
+        return minSize;
+      }
+
+      var measureCanvas = document.createElement("canvas");
+      var measureContext = measureCanvas.getContext("2d");
+      measureContext.font = "700 " + CAPTION_FONT_SIZE + "px Montserrat";
+
+      function measureWord(word) {
+        return measureContext.measureText(word.text.toLowerCase()).width * FONT_WIDTH_SAFETY;
+      }
+
+      function measureLineWidth(words) {
+        return words.reduce(function (total, word, index) {
+          return total + measureWord(word) + (index ? WORD_SPACING : 0);
+        }, 0);
+      }
+
+      function fitsInTwoLines(words) {
+        return measureLineWidth(words) <= MAX_LINE_WIDTH * 1.8;
+      }
+
+      function splitLines(words) {
+        if (words.length < 2) {
+          return [{ words: words, startIndex: 0 }];
+        }
+        var bestSplit = Math.ceil(words.length / 2);
+        var bestDiff = Infinity;
+        for (var s = 1; s < words.length; s++) {
+          var w1 = measureLineWidth(words.slice(0, s));
+          var w2 = measureLineWidth(words.slice(s));
+          if (w1 <= MAX_LINE_WIDTH && w2 <= MAX_LINE_WIDTH) {
+            var diff = Math.abs(w1 - w2);
+            if (diff < bestDiff) {
+              bestDiff = diff;
+              bestSplit = s;
+            }
+          }
+        }
+        var result = [];
+        var line1 = words.slice(0, bestSplit);
+        var line2 = words.slice(bestSplit);
+        if (line1.length) result.push({ words: line1, startIndex: 0 });
+        if (line2.length) result.push({ words: line2, startIndex: line1.length });
+        return result;
+      }
+
+      function avoidSingleWordGroups(groups) {
+        var out = [];
+        groups.forEach(function (group) {
+          if (
+            group.words.length === 1 &&
+            out.length > 0 &&
+            out[out.length - 1].words.length < MAX_WORDS_PER_GROUP
+          ) {
+            out[out.length - 1] = makeGroup(out[out.length - 1].words.concat(group.words));
+          } else {
+            out.push(group);
+          }
+        });
+
+        for (var i = 0; i < out.length; i++) {
+          if (out[i].words.length !== 1) continue;
+          if (i + 1 < out.length && out[i + 1].words.length < MAX_WORDS_PER_GROUP) {
+            out[i] = makeGroup(out[i].words.concat(out[i + 1].words));
+            out.splice(i + 1, 1);
+          } else if (i > 0 && out[i - 1].words.length < MAX_WORDS_PER_GROUP) {
+            out[i - 1] = makeGroup(out[i - 1].words.concat(out[i].words));
+            out.splice(i, 1);
+            i--;
+          }
+        }
+
+        return out;
+      }
+
+      function makeGroups(words) {
+        var groups = [];
+        var current = [];
+        words.forEach(function (word, index) {
+          var nextWord = words[index + 1];
+          var testGroup = current.concat([word]);
+          if (testGroup.length > MAX_WORDS_PER_GROUP || !fitsInTwoLines(testGroup)) {
+            if (current.length) groups.push(makeGroup(current));
+            current = [word];
+            return;
+          }
+          current.push(word);
+          var punctuation = /[,.:!?]$/.test(word.text);
+          var pause = nextWord ? nextWord.start - word.end : 0;
+          if (
+            !nextWord ||
+            punctuation ||
+            pause >= PAUSE_THRESHOLD ||
+            current.length >= MAX_WORDS_PER_GROUP
+          ) {
+            groups.push(makeGroup(current));
+            current = [];
+          }
+        });
+        if (current.length) groups.push(makeGroup(current));
+        return avoidSingleWordGroups(groups);
+      }
+
+      function makeGroup(words) {
+        return {
+          words: words.slice(),
+          lines: splitLines(words),
+          start: words[0].start,
+          end: words[words.length - 1].end,
+        };
+      }
+
+      function buildCaptions(groups) {
+        var stage = document.getElementById("caption-stage");
+        groups.forEach(function (group, groupIndex) {
+          var groupText = group.words
+            .map(function (w) {
+              return w.text.toLowerCase();
+            })
+            .join(" ");
+          var computedSize = fitFontSize(
+            groupText,
+            CAPTION_FONT_SIZE,
+            "700",
+            "Montserrat",
+            MAX_LINE_WIDTH,
+          );
+          var groupEl = document.createElement("div");
+          var copyEl = document.createElement("div");
+          groupEl.id = "caption-group-" + groupIndex;
+          groupEl.className = "caption-group";
+          copyEl.className = "caption-copy";
+          group.lines.forEach(function (line, lineIndex) {
+            var lineEl = document.createElement("div");
+            lineEl.className = "caption-line";
+            lineEl.id = "caption-group-" + groupIndex + "-line-" + lineIndex;
+            lineEl.style.fontWeight = lineIndex === 0 ? FONT_WEIGHT_BOLD : FONT_WEIGHT_LIGHT;
+            lineEl.style.fontSize = computedSize + "px";
+            line.words.forEach(function (word, wordIndex) {
+              var wordEl = document.createElement("span");
+              wordEl.textContent = word.text.toLowerCase();
+              wordEl.style.display = "inline-block";
+              lineEl.appendChild(wordEl);
+            });
+            copyEl.appendChild(lineEl);
+          });
+          groupEl.appendChild(copyEl);
+          stage.appendChild(groupEl);
+        });
+      }
+
+      var WORDS = normalizeWords(TRANSCRIPT);
+      var GROUPS = makeGroups(WORDS);
+      buildCaptions(GROUPS);
+
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+
+      var visibleStarts = GROUPS.map(function (group, groupIndex) {
+        var prev = GROUPS[groupIndex - 1];
+        var availableGap = prev ? Math.max(0, group.start - prev.end) : ENTRY_DURATION;
+        var entryLead = Math.min(ENTRY_DURATION, availableGap);
+        return Math.max(0, group.start - entryLead);
+      });
+
+      var allGroupEls = GROUPS.map(function (_, i) {
+        return document.getElementById("caption-group-" + i);
+      });
+
+      GROUPS.forEach(function (group, groupIndex) {
+        var groupEl = allGroupEls[groupIndex];
+        var visibleStart = visibleStarts[groupIndex];
+        var visibleEnd = groupIndex < GROUPS.length - 1 ? visibleStarts[groupIndex + 1] : DURATION;
+
+        allGroupEls.forEach(function (otherEl, otherIndex) {
+          if (otherIndex !== groupIndex) tl.set(otherEl, { opacity: 0 }, visibleStart);
+        });
+
+        tl.set(groupEl, { opacity: 0, scale: 0.85 }, visibleStart);
+        tl.to(
+          groupEl,
+          { opacity: 1, scale: 1, duration: ENTRY_DURATION, ease: "power3.out", force3D: true },
+          visibleStart,
+        );
+
+        if (group.lines.length === 2) {
+          var line1El = document.getElementById("caption-group-" + groupIndex + "-line-0");
+          var line2El = document.getElementById("caption-group-" + groupIndex + "-line-1");
+          var line2FirstWord = group.lines[1].words[0];
+          var switchTime = line2FirstWord.start;
+
+          tl.to(
+            line1El,
+            { fontWeight: FONT_WEIGHT_LIGHT, duration: WEIGHT_TRANSITION, ease: "power2.out" },
+            switchTime,
+          );
+          tl.to(
+            line2El,
+            { fontWeight: FONT_WEIGHT_BOLD, duration: WEIGHT_TRANSITION, ease: "power2.out" },
+            switchTime,
+          );
+        }
+
+        tl.set(groupEl, { opacity: 0 }, visibleEnd);
+      });
+
+      window.__timelines["caption-weight-shift"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/caption-weight-shift/demo.html b/docs/public/catalog/components/caption-weight-shift/demo.html
new file mode 100644
index 0000000000..827bbd4d60
--- /dev/null
+++ b/docs/public/catalog/components/caption-weight-shift/demo.html
@@ -0,0 +1,395 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Weight Shift</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;700&display=swap"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: #000000;
+        font-family: "Montserrat", Arial, sans-serif;
+      }
+
+      #weight-shift {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000000;
+      }
+
+      .caption-layer {
+        position: absolute;
+        inset: 0;
+        z-index: 20;
+        pointer-events: none;
+        transform: translateZ(0);
+      }
+
+      .safe-zone {
+        position: absolute;
+        bottom: 100px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 1400px;
+        height: 278px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .caption-group {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 1400px;
+        height: 278px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0;
+        transform-origin: 50% 50%;
+        will-change: transform;
+        backface-visibility: hidden;
+      }
+
+      .caption-copy {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        max-width: 1400px;
+        text-align: center;
+      }
+
+      .caption-line {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 12px;
+        width: max-content;
+        max-width: 1400px;
+        line-height: 1.1;
+        white-space: nowrap;
+        color: #ffffff;
+        font-family: "Montserrat", Arial, sans-serif;
+        font-weight: 300;
+        font-size: 72px;
+        letter-spacing: -0.03em;
+        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+        text-transform: lowercase;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="weight-shift"
+      data-composition-id="caption-weight-shift"
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="caption-layer" aria-hidden="true">
+        <div id="caption-stage" class="safe-zone"></div>
+      </div>
+    </div>
+
+    <script>
+      var DURATION = 8;
+      var SAFE_ZONE_WIDTH = 1400;
+      var MAX_LINE_WIDTH = SAFE_ZONE_WIDTH - 40;
+      var CAPTION_FONT_SIZE = 72;
+      var MAX_WORDS_PER_GROUP = 4;
+      var WORD_SPACING = 12;
+      var PAUSE_THRESHOLD = 0.1;
+      var ENTRY_DURATION = 100 / 1000;
+      var WEIGHT_TRANSITION = 100 / 1000;
+      var FONT_WIDTH_SAFETY = 1.14;
+      var FONT_WEIGHT_LIGHT = 300;
+      var FONT_WEIGHT_BOLD = 700;
+
+      var TRANSCRIPT = [
+        { text: "Every", start: 0.0, end: 0.3 },
+        { text: "great", start: 0.3, end: 0.55 },
+        { text: "video", start: 0.55, end: 0.85 },
+        { text: "starts", start: 0.85, end: 1.1 },
+        { text: "with", start: 1.1, end: 1.25 },
+        { text: "a", start: 1.25, end: 1.35 },
+        { text: "single", start: 1.35, end: 1.65 },
+        { text: "frame.", start: 1.65, end: 2.0 },
+        { text: "HyperFrames", start: 2.1, end: 2.65 },
+        { text: "lets", start: 2.65, end: 2.85 },
+        { text: "you", start: 2.85, end: 2.95 },
+        { text: "write", start: 2.95, end: 3.15 },
+        { text: "HTML", start: 3.15, end: 3.55 },
+        { text: "and", start: 3.55, end: 3.65 },
+        { text: "render", start: 3.65, end: 3.95 },
+        { text: "professional", start: 3.95, end: 4.45 },
+        { text: "video.", start: 4.45, end: 4.8 },
+        { text: "No", start: 4.9, end: 5.05 },
+        { text: "timeline.", start: 5.05, end: 5.45 },
+        { text: "No", start: 5.5, end: 5.65 },
+        { text: "drag", start: 5.65, end: 5.85 },
+        { text: "and", start: 5.85, end: 5.95 },
+        { text: "drop.", start: 5.95, end: 6.25 },
+        { text: "Just", start: 6.35, end: 6.55 },
+        { text: "code", start: 6.55, end: 6.8 },
+        { text: "that", start: 6.8, end: 6.95 },
+        { text: "becomes", start: 6.95, end: 7.3 },
+        { text: "cinema.", start: 7.3, end: 7.7 },
+      ];
+
+      function normalizeWords(rawWords) {
+        return rawWords
+          .map(function (item) {
+            return {
+              text: String(item.word || item.text || "").trim(),
+              start: Math.max(0, Number(item.start) || 0),
+              end: Math.min(DURATION, Math.max(Number(item.start) || 0, Number(item.end) || 0)),
+            };
+          })
+          .filter(function (word) {
+            return word.text.length > 0;
+          });
+      }
+
+      var _fitCanvas = document.createElement("canvas");
+      var _fitCtx = _fitCanvas.getContext("2d");
+      function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {
+        var size = baseFontSize;
+        var minSize = Math.floor(baseFontSize * 0.45);
+        while (size > minSize) {
+          _fitCtx.font = fontWeight + " " + size + "px " + fontFamily;
+          if (_fitCtx.measureText(text).width <= maxWidth) return size;
+          size -= 2;
+        }
+        return minSize;
+      }
+
+      var measureCanvas = document.createElement("canvas");
+      var measureContext = measureCanvas.getContext("2d");
+      measureContext.font = "700 " + CAPTION_FONT_SIZE + "px Montserrat";
+
+      function measureWord(word) {
+        return measureContext.measureText(word.text.toLowerCase()).width * FONT_WIDTH_SAFETY;
+      }
+
+      function measureLineWidth(words) {
+        return words.reduce(function (total, word, index) {
+          return total + measureWord(word) + (index ? WORD_SPACING : 0);
+        }, 0);
+      }
+
+      function fitsInTwoLines(words) {
+        return measureLineWidth(words) <= MAX_LINE_WIDTH * 1.8;
+      }
+
+      function splitLines(words) {
+        if (words.length < 2) {
+          return [{ words: words, startIndex: 0 }];
+        }
+        var bestSplit = Math.ceil(words.length / 2);
+        var bestDiff = Infinity;
+        for (var s = 1; s < words.length; s++) {
+          var w1 = measureLineWidth(words.slice(0, s));
+          var w2 = measureLineWidth(words.slice(s));
+          if (w1 <= MAX_LINE_WIDTH && w2 <= MAX_LINE_WIDTH) {
+            var diff = Math.abs(w1 - w2);
+            if (diff < bestDiff) {
+              bestDiff = diff;
+              bestSplit = s;
+            }
+          }
+        }
+        var result = [];
+        var line1 = words.slice(0, bestSplit);
+        var line2 = words.slice(bestSplit);
+        if (line1.length) result.push({ words: line1, startIndex: 0 });
+        if (line2.length) result.push({ words: line2, startIndex: line1.length });
+        return result;
+      }
+
+      function avoidSingleWordGroups(groups) {
+        var out = [];
+        groups.forEach(function (group) {
+          if (
+            group.words.length === 1 &&
+            out.length > 0 &&
+            out[out.length - 1].words.length < MAX_WORDS_PER_GROUP
+          ) {
+            out[out.length - 1] = makeGroup(out[out.length - 1].words.concat(group.words));
+          } else {
+            out.push(group);
+          }
+        });
+
+        for (var i = 0; i < out.length; i++) {
+          if (out[i].words.length !== 1) continue;
+          if (i + 1 < out.length && out[i + 1].words.length < MAX_WORDS_PER_GROUP) {
+            out[i] = makeGroup(out[i].words.concat(out[i + 1].words));
+            out.splice(i + 1, 1);
+          } else if (i > 0 && out[i - 1].words.length < MAX_WORDS_PER_GROUP) {
+            out[i - 1] = makeGroup(out[i - 1].words.concat(out[i].words));
+            out.splice(i, 1);
+            i--;
+          }
+        }
+
+        return out;
+      }
+
+      function makeGroups(words) {
+        var groups = [];
+        var current = [];
+        words.forEach(function (word, index) {
+          var nextWord = words[index + 1];
+          var testGroup = current.concat([word]);
+          if (testGroup.length > MAX_WORDS_PER_GROUP || !fitsInTwoLines(testGroup)) {
+            if (current.length) groups.push(makeGroup(current));
+            current = [word];
+            return;
+          }
+          current.push(word);
+          var punctuation = /[,.:!?]$/.test(word.text);
+          var pause = nextWord ? nextWord.start - word.end : 0;
+          if (
+            !nextWord ||
+            punctuation ||
+            pause >= PAUSE_THRESHOLD ||
+            current.length >= MAX_WORDS_PER_GROUP
+          ) {
+            groups.push(makeGroup(current));
+            current = [];
+          }
+        });
+        if (current.length) groups.push(makeGroup(current));
+        return avoidSingleWordGroups(groups);
+      }
+
+      function makeGroup(words) {
+        return {
+          words: words.slice(),
+          lines: splitLines(words),
+          start: words[0].start,
+          end: words[words.length - 1].end,
+        };
+      }
+
+      function buildCaptions(groups) {
+        var stage = document.getElementById("caption-stage");
+        groups.forEach(function (group, groupIndex) {
+          var groupText = group.words
+            .map(function (w) {
+              return w.text.toLowerCase();
+            })
+            .join(" ");
+          var computedSize = fitFontSize(
+            groupText,
+            CAPTION_FONT_SIZE,
+            "700",
+            "Montserrat",
+            MAX_LINE_WIDTH,
+          );
+          var groupEl = document.createElement("div");
+          var copyEl = document.createElement("div");
+          groupEl.id = "caption-group-" + groupIndex;
+          groupEl.className = "caption-group";
+          copyEl.className = "caption-copy";
+          group.lines.forEach(function (line, lineIndex) {
+            var lineEl = document.createElement("div");
+            lineEl.className = "caption-line";
+            lineEl.id = "caption-group-" + groupIndex + "-line-" + lineIndex;
+            lineEl.style.fontWeight = lineIndex === 0 ? FONT_WEIGHT_BOLD : FONT_WEIGHT_LIGHT;
+            lineEl.style.fontSize = computedSize + "px";
+            line.words.forEach(function (word, wordIndex) {
+              var wordEl = document.createElement("span");
+              wordEl.textContent = word.text.toLowerCase();
+              wordEl.style.display = "inline-block";
+              lineEl.appendChild(wordEl);
+            });
+            copyEl.appendChild(lineEl);
+          });
+          groupEl.appendChild(copyEl);
+          stage.appendChild(groupEl);
+        });
+      }
+
+      var WORDS = normalizeWords(TRANSCRIPT);
+      var GROUPS = makeGroups(WORDS);
+      buildCaptions(GROUPS);
+
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+
+      var visibleStarts = GROUPS.map(function (group, groupIndex) {
+        var prev = GROUPS[groupIndex - 1];
+        var availableGap = prev ? Math.max(0, group.start - prev.end) : ENTRY_DURATION;
+        var entryLead = Math.min(ENTRY_DURATION, availableGap);
+        return Math.max(0, group.start - entryLead);
+      });
+
+      var allGroupEls = GROUPS.map(function (_, i) {
+        return document.getElementById("caption-group-" + i);
+      });
+
+      GROUPS.forEach(function (group, groupIndex) {
+        var groupEl = allGroupEls[groupIndex];
+        var visibleStart = visibleStarts[groupIndex];
+        var visibleEnd = groupIndex < GROUPS.length - 1 ? visibleStarts[groupIndex + 1] : DURATION;
+
+        allGroupEls.forEach(function (otherEl, otherIndex) {
+          if (otherIndex !== groupIndex) tl.set(otherEl, { opacity: 0 }, visibleStart);
+        });
+
+        tl.set(groupEl, { opacity: 0, scale: 0.85 }, visibleStart);
+        tl.to(
+          groupEl,
+          { opacity: 1, scale: 1, duration: ENTRY_DURATION, ease: "power3.out", force3D: true },
+          visibleStart,
+        );
+
+        if (group.lines.length === 2) {
+          var line1El = document.getElementById("caption-group-" + groupIndex + "-line-0");
+          var line2El = document.getElementById("caption-group-" + groupIndex + "-line-1");
+          var line2FirstWord = group.lines[1].words[0];
+          var switchTime = line2FirstWord.start;
+
+          tl.to(
+            line1El,
+            { fontWeight: FONT_WEIGHT_LIGHT, duration: WEIGHT_TRANSITION, ease: "power2.out" },
+            switchTime,
+          );
+          tl.to(
+            line2El,
+            { fontWeight: FONT_WEIGHT_BOLD, duration: WEIGHT_TRANSITION, ease: "power2.out" },
+            switchTime,
+          );
+        }
+
+        tl.set(groupEl, { opacity: 0 }, visibleEnd);
+      });
+
+      window.__timelines["caption-weight-shift"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/card-resize/__hf-variables-preview.html b/docs/public/catalog/components/card-resize/__hf-variables-preview.html
new file mode 100644
index 0000000000..475c21d073
--- /dev/null
+++ b/docs/public/catalog/components/card-resize/__hf-variables-preview.html
@@ -0,0 +1,82 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Card Resize variables preview</title>
+    <style>
+      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #fafafa; }
+      #hf-vars-root { position: relative; width: 1920px; height: 1080px; }
+      #hf-vars-mount { position: absolute; inset: 0; display: grid; place-items: center; }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  </head>
+  <body>
+    <div id="hf-vars-root" data-composition-id="card-resize-variables-preview" data-start="0" data-width="1920" data-height="1080" data-duration="5" data-fps="30">
+      <div id="hf-vars-mount" class="clip" data-composition-id="card-resize" data-composition-src="./card-resize.html" data-start="0" data-duration="5" data-track-index="0" data-width="1920" data-height="1080"></div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["card-resize-variables-preview"] = gsap.timeline({ paused: true });
+    </script>
+    <script>
+      (function () {
+        var mount = document.getElementById("hf-vars-mount");
+        // The mount is filled asynchronously, and the demo script selects
+        // what it fills it with, so it cannot run before then.
+        var observer = new MutationObserver(build);
+        observer.observe(mount, { childList: true, subtree: true });
+        build();
+        function build() {
+          if (!mount.firstElementChild) return;
+          observer.disconnect();
+
+        const tl = gsap.timeline({ paused: true });
+        tl.fromTo(
+          ".hf-transition-card-resize",
+          { "--hf-card-w": "330px", "--hf-card-h": "132px", opacity: 0, y: 24 },
+          {
+            "--hf-card-w": "560px",
+            "--hf-card-h": "210px",
+            opacity: 1,
+            y: 0,
+            duration: 0.68,
+            ease: "power3.inOut",
+          },
+          0.35,
+        );
+        tl.fromTo(
+          ".hf-transition-card-copy p",
+          { opacity: 0, y: 12 },
+          { opacity: 1, y: 0, duration: 0.28, ease: "power2.out" },
+          0.82,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["card-resize-demo"] = tl;
+          var child = window.__timelines["card-resize-demo"];
+          delete window.__timelines["card-resize-demo"];
+          if (!child || typeof child.paused !== "function") return;
+          child.paused(false);
+          window.__timelines["card-resize-variables-preview"].add(child, 0);
+        }
+      })();
+    </script>
+<script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "card-resize.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/card-resize/card-resize.html b/docs/public/catalog/components/card-resize/card-resize.html
new file mode 100644
index 0000000000..f5437aa97c
--- /dev/null
+++ b/docs/public/catalog/components/card-resize/card-resize.html
@@ -0,0 +1,176 @@
+<!--
+  Card Resize - transitions.dev-inspired primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Use the timeline
+  integration note at the bottom as the starting point for deterministic GSAP
+  animation.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result as a custom property
+  the CSS above consumes. The timeline recipe is untouched by them: it keeps
+  driving the same width, height and fade, and these decide how the card that
+  expands is dressed.
+
+    - surface (paper | ink, default paper): the card colour scheme. paper is
+      the original white card with near-black type, ink is a dark card with
+      light type for dark frames.
+    - accent (ocean | forest | ember, default ocean): the treatment of the media
+      thumbnail. ocean is a plain plate, forest adds a fine achromatic hatch,
+      ember adds a horizon-and-disc glyph so the plate reads as a photo. All
+      three are built from the surface's own ink at fixed alphas, so the
+      thumbnail carries no hue on either surface. The three value names are
+      inherited from the hue families they used to paint and no longer describe
+      what they render; renaming them is a separate, breaking change.
+    - elevation (flat | raised | floating, default raised): how far the card
+      lifts off the frame, from a tight contact shadow to a deep drop.
+
+  On every default the result is a white card with a quiet ink-tinted thumbnail
+  plate under a soft wide drop shadow. Layout, sizing and motion are unchanged.
+-->
+
+<div
+  class="hf-transition-card-resize"
+  data-composition-variables='[
+    { "id": "surface", "type": "enum", "role": "style", "label": "Surface", "description": "Card colour scheme: paper is the original white card, ink is a dark card for dark frames.", "default": "paper", "options": [{ "value": "paper", "label": "Paper" }, { "value": "ink", "label": "Ink" }] },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Treatment of the media thumbnail: a plain plate, a hatched surface, or an image plate with a horizon-and-disc glyph.", "default": "ocean", "options": [{ "value": "ocean", "label": "Ocean" }, { "value": "forest", "label": "Forest" }, { "value": "ember", "label": "Ember" }] },
+    { "id": "elevation", "type": "enum", "role": "style", "label": "Elevation", "description": "How far the card lifts off the frame, from a contact shadow to a deep drop.", "default": "raised", "options": [{ "value": "flat", "label": "Flat" }, { "value": "raised", "label": "Raised" }, { "value": "floating", "label": "Floating" }] }
+  ]'
+>
+  <div class="hf-transition-card-media"></div>
+  <div class="hf-transition-card-copy">
+    <span>Project status</span>
+    <strong>Ready to render</strong>
+    <p>All scenes validated and queued for export.</p>
+  </div>
+</div>
+
+<style>
+  .hf-transition-card-resize {
+    --hf-card-w: 330px;
+    --hf-card-h: 132px;
+    /* Placeholder ramp: the surface's own ink at fixed alphas, so the media
+       plate inverts with the surface instead of needing a second palette. */
+    --hf-card-l2: rgba(24, 24, 27, 0.45);
+    --hf-card-l3: rgba(24, 24, 27, 0.18);
+    --hf-card-hair: rgba(24, 24, 27, 0.14);
+    display: grid;
+    grid-template-columns: 92px 1fr;
+    gap: 18px;
+    width: var(--hf-card-w);
+    height: var(--hf-card-h);
+    padding: 18px;
+    overflow: hidden;
+    border: 1px solid var(--hf-card-border, #e4e4e7);
+    border-radius: 26px;
+    background: var(--hf-card-bg, #ffffff);
+    color: var(--hf-card-ink, #18181b);
+    font-family: Inter, system-ui, sans-serif;
+    box-shadow: var(--hf-card-shadow, 0 26px 80px rgba(0, 0, 0, 0.12));
+    will-change: width, height, transform;
+  }
+  .hf-transition-card-media {
+    width: 92px;
+    height: 92px;
+    border-radius: 20px;
+    background: var(--hf-card-media, var(--hf-card-l3));
+    box-shadow: inset 0 0 0 1px var(--hf-card-hair);
+  }
+  .hf-transition-card-copy {
+    display: grid;
+    align-content: center;
+    gap: 7px;
+    min-width: 0;
+  }
+  .hf-transition-card-copy span {
+    color: var(--hf-card-muted, #71717a);
+    font-size: 13px;
+    font-weight: 850;
+    text-transform: uppercase;
+  }
+  .hf-transition-card-copy strong {
+    white-space: nowrap;
+    font-size: 22px;
+    letter-spacing: -0.01em;
+  }
+  .hf-transition-card-copy p {
+    margin: 0;
+    color: var(--hf-card-muted, #71717a);
+    font-size: 15px;
+    line-height: 1.45;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var surfaces = {
+      paper: {
+        bg: "#ffffff",
+        ink: "#18181b",
+        muted: "#71717a",
+        border: "#e4e4e7",
+        l2: "rgba(24, 24, 27, 0.45)",
+        l3: "rgba(24, 24, 27, 0.18)",
+        hair: "rgba(24, 24, 27, 0.14)",
+      },
+      ink: {
+        bg: "#16161a",
+        ink: "#fafafa",
+        muted: "#a1a1aa",
+        border: "#2f2f37",
+        l2: "rgba(250, 250, 250, 0.45)",
+        l3: "rgba(250, 250, 250, 0.18)",
+        hair: "rgba(250, 250, 250, 0.14)",
+      },
+    };
+    // Media treatments, not hue families: the plate itself, the plate hatched,
+    // and the plate with a horizon-and-disc glyph that reads as a photo. Each
+    // one is written in the surface's own ink ramp, so both surfaces work.
+    var medias = {
+      ocean: "var(--hf-card-l3)",
+      forest:
+        "repeating-linear-gradient(135deg, var(--hf-card-hair) 0 2px, transparent 2px 4px), var(--hf-card-l3)",
+      ember:
+        "radial-gradient(circle 11px at 64px 28px, var(--hf-card-l2) 0 100%, transparent 100%), linear-gradient(to top, var(--hf-card-l2) 0 24px, transparent 24px), var(--hf-card-l3)",
+    };
+    var shadows = {
+      flat: "0 2px 10px rgba(0, 0, 0, 0.1)",
+      raised: "0 26px 80px rgba(0, 0, 0, 0.12)",
+      floating: "0 46px 120px rgba(0, 0, 0, 0.3)",
+    };
+
+    var surface = surfaces[pick(surfaces, vars.surface, "paper")];
+    var media = medias[pick(medias, vars.accent, "ocean")];
+    var shadow = shadows[pick(shadows, vars.elevation, "raised")];
+
+    var roots = document.querySelectorAll(".hf-transition-card-resize");
+    for (var i = 0; i < roots.length; i += 1) {
+      roots[i].style.setProperty("--hf-card-bg", surface.bg);
+      roots[i].style.setProperty("--hf-card-ink", surface.ink);
+      roots[i].style.setProperty("--hf-card-muted", surface.muted);
+      roots[i].style.setProperty("--hf-card-border", surface.border);
+      roots[i].style.setProperty("--hf-card-l2", surface.l2);
+      roots[i].style.setProperty("--hf-card-l3", surface.l3);
+      roots[i].style.setProperty("--hf-card-hair", surface.hair);
+      roots[i].style.setProperty("--hf-card-media", media);
+      roots[i].style.setProperty("--hf-card-shadow", shadow);
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-transition-card-resize', { '--hf-card-w': '330px', '--hf-card-h': '132px', opacity: 0, y: 24 }, { '--hf-card-w': '560px', '--hf-card-h': '210px', opacity: 1, y: 0, duration: 0.68, ease: 'power3.inOut' }, 0.35);
+  tl.fromTo('.hf-transition-card-copy p', { opacity: 0, y: 12 }, { opacity: 1, y: 0, duration: 0.28, ease: 'power2.out' }, 0.82);
+-->
diff --git a/docs/public/catalog/components/card-resize/demo.html b/docs/public/catalog/components/card-resize/demo.html
new file mode 100644
index 0000000000..2ac30f1690
--- /dev/null
+++ b/docs/public/catalog/components/card-resize/demo.html
@@ -0,0 +1,149 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Card Resize - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #fafafa;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        min-width: 760px;
+        min-height: 480px;
+        padding: 56px;
+        /* ponytail: scale wrapper (not GSAP target) to fill ~60% of 1920px frame */
+        transform: scale(2);
+        transform-origin: center center;
+      }
+      .hf-transition-card-resize {
+        --hf-card-w: 330px;
+        --hf-card-h: 132px;
+        display: grid;
+        grid-template-columns: 92px 1fr;
+        gap: 18px;
+        width: var(--hf-card-w);
+        height: var(--hf-card-h);
+        padding: 18px;
+        overflow: hidden;
+        border: 1px solid #e4e4e7;
+        border-radius: 26px;
+        background: #ffffff;
+        color: #18181b;
+        font-family: Inter, system-ui, sans-serif;
+        box-shadow: 0 26px 80px rgba(0, 0, 0, 0.12);
+        will-change: width, height, transform;
+      }
+      .hf-transition-card-media {
+        width: 92px;
+        height: 92px;
+        border-radius: 20px;
+        background: rgba(24, 24, 27, 0.18);
+        box-shadow: inset 0 0 0 1px rgba(24, 24, 27, 0.14);
+      }
+      .hf-transition-card-copy {
+        display: grid;
+        align-content: center;
+        gap: 7px;
+        min-width: 0;
+      }
+      .hf-transition-card-copy span {
+        color: #71717a;
+        font-size: 13px;
+        font-weight: 850;
+        text-transform: uppercase;
+      }
+      .hf-transition-card-copy strong {
+        white-space: nowrap;
+        font-size: 22px;
+        letter-spacing: -0.01em;
+      }
+      .hf-transition-card-copy p {
+        margin: 0;
+        color: #71717a;
+        font-size: 15px;
+        line-height: 1.45;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="card-resize-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-transition-card-resize">
+          <div class="hf-transition-card-media"></div>
+          <div class="hf-transition-card-copy">
+            <span>Project status</span>
+            <strong>Ready to render</strong>
+            <p>All scenes validated and queued for export.</p>
+          </div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        tl.fromTo(
+          ".hf-transition-card-resize",
+          { "--hf-card-w": "330px", "--hf-card-h": "132px", opacity: 0, y: 24 },
+          {
+            "--hf-card-w": "560px",
+            "--hf-card-h": "210px",
+            opacity: 1,
+            y: 0,
+            duration: 0.68,
+            ease: "power3.inOut",
+          },
+          0.35,
+        );
+        tl.fromTo(
+          ".hf-transition-card-copy p",
+          { opacity: 0, y: 12 },
+          { opacity: 1, y: 0, duration: 0.28, ease: "power2.out" },
+          0.82,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["card-resize-demo"] = tl;
+      </script>
+    </div>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "card-resize.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/char-slam-explode/char-slam-explode.html b/docs/public/catalog/components/char-slam-explode/char-slam-explode.html
new file mode 100644
index 0000000000..fb3494db5b
--- /dev/null
+++ b/docs/public/catalog/components/char-slam-explode/char-slam-explode.html
@@ -0,0 +1,338 @@
+<!doctype html>
+<!--
+  char-slam-explode: HyperFrames video primitive
+
+  A headline begins as individually scattered glyphs, holds the explosion,
+  then reassembles with an overshooting slam and a deterministic three-frame
+  stage shake.
+
+  Variables:
+    text: headline copy
+    accent: green, blue, or violet headline color
+    spread: tight or wild scatter distance
+
+  Envelope, fixed IN and OUT with elastic HOLD:
+    IN_BASE  = 1.64s, scattered hold, staggered return, and landing shake
+    HOLD     = max(0, D - IN - OUT), subtle drift followed by 0.30s stillness
+    OUT_BASE = 0.40s, composed headline fades and scales down
+    If D is shorter than IN_BASE + OUT_BASE, IN and OUT compress together.
+    The timeline is never time-scaled.
+
+  The scatter table was generated at build time from fixed LCG seed
+  0x0c5e2026. Runtime code only reads the authored table.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, and has no data-width or
+  data-height. One paused timeline registers under the literal
+  char-slam-explode key.
+-->
+<html
+  lang="en"
+  data-composition-id="char-slam-explode"
+  data-composition-duration="3.5"
+  data-composition-variables='[
+    { "id": "text", "type": "string", "role": "content", "label": "Headline", "description": "Text split into glyphs for the scatter and slam.", "default": "Impact" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Headline and glow color.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "spread", "type": "enum", "role": "motion", "label": "Spread", "description": "Distance and rotation of the scattered glyphs.", "default": "tight", "options": [{ "value": "tight", "label": "Tight" }, { "value": "wild", "label": "Wild" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Char Slam Explode</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="char-slam-explode" data-duration="3.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .cse-clip,
+          .cse-stage {
+            position: absolute;
+            inset: 0;
+            width: 100cqw;
+            height: 100cqh;
+          }
+
+          .cse-clip {
+            overflow: hidden;
+          }
+
+          .cse-stage {
+            display: grid;
+            place-items: center;
+            will-change: transform;
+          }
+
+          .cse-headline {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 60cqw;
+            min-height: 32cqh;
+            color: var(--cse-accent, #71f5a7);
+            font-size: var(--cse-font-size, min(10cqw, 27cqh));
+            font-weight: 900;
+            line-height: 0.9;
+            letter-spacing: -0.045em;
+            text-align: center;
+            text-shadow:
+              0 0 2.8cqh color-mix(in srgb, var(--cse-accent, #71f5a7) 28%, transparent),
+              0 1.2cqh 4.5cqh color-mix(in srgb, #000 58%, transparent);
+            white-space: nowrap;
+            transform-origin: 50% 50%;
+            will-change: transform, opacity;
+          }
+
+          .cse-glyph {
+            display: inline-block;
+            flex: 0 0 auto;
+            white-space: pre;
+            transform-origin: 50% 55%;
+            will-change: transform;
+          }
+        </style>
+
+        <div
+          id="char-slam-explode-clip"
+          class="cse-clip clip"
+          data-start="0"
+          data-duration="3.5"
+          data-track-index="0"
+        >
+          <div class="cse-stage">
+            <div class="cse-headline" role="heading" aria-level="1"></div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".cse-stage");
+            var headline = root.querySelector(".cse-headline");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var text = vars.text == null ? "Impact" : String(vars.text);
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #b895ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var spread = vars.spread === "wild" ? "wild" : "tight";
+            var spreadValues = {
+              tight: { x: 9, y: 10, rotation: 12 },
+              wild: { x: 17, y: 19, rotation: 22 },
+            };
+
+            root.style.setProperty("--cse-accent", accentColors[accent]);
+            headline.setAttribute("aria-label", text);
+
+            var characters = Array.from(text);
+            characters.forEach(function (character, index) {
+              var glyph = document.createElement("span");
+              glyph.id = "char-slam-explode-glyph-" + index;
+              glyph.className = "cse-glyph";
+              glyph.textContent = /\s/.test(character) ? "\u00a0" : character;
+              glyph.setAttribute("aria-hidden", "true");
+              headline.appendChild(glyph);
+            });
+
+            // Conservative one-em-per-character fitting keeps any glyph mix
+            // inside the 60cqw composed width. The height cap protects short,
+            // wide mounts, while the surrounding clearance protects wild
+            // scatter and the return overshoot.
+            var fittedCqw = Math.min(13.5, 60 / Math.max(1, characters.length));
+            root.style.setProperty(
+              "--cse-font-size",
+              "min(" + fittedCqw.toFixed(3) + "cqw, 27cqh)",
+            );
+
+            // Fixed-seed LCG table, generated at build time. Each row stores
+            // normalized x, y, and rotation values. Long strings wrap the
+            // authored table without introducing runtime randomness.
+            var scatterTable = [
+              [-0.9, -0.038, 0.677],
+              [0.61, 0.716, -0.967],
+              [0.418, 0.575, 0.822],
+              [-0.76, -0.451, 0.944],
+              [-0.621, 0.579, -0.215],
+              [0.714, 0.437, -0.824],
+              [0.577, 0.567, 0.464],
+              [0.902, 0.346, 0.016],
+              [-0.526, 0.743, -0.275],
+              [-0.571, -0.353, 0.954],
+              [-0.666, 0.61, -0.075],
+              [-0.122, 0.875, -0.783],
+              [-0.141, 0.726, -0.659],
+              [0.606, -0.665, -0.713],
+              [-0.962, 0.131, 0.307],
+              [0.227, 0.813, -0.979],
+              [0.264, -0.754, -0.013],
+              [-0.4, 0.903, 0.573],
+              [0.393, 0.542, -0.992],
+              [0.884, -0.313, -0.834],
+              [-0.048, 0.707, -0.331],
+              [-0.766, 0.226, 0.567],
+              [0.207, 0.734, -0.714],
+              [-0.677, -0.614, 0.462],
+              [0.389, -0.542, -0.384],
+              [0.497, 0.716, 0.414],
+              [0.729, -0.59, -0.774],
+              [0.665, -0.061, -0.58],
+              [-0.758, -0.546, 0.364],
+              [0.113, 0.667, -0.202],
+              [0.963, 0.171, 0.47],
+              [0.662, -0.295, 0.912],
+              [0.555, 0.548, 0.952],
+              [-0.132, -0.677, 0.685],
+              [-0.758, 0.133, -0.469],
+              [-0.296, 0.697, 0.61],
+              [-0.27, 0.786, -0.677],
+              [-0.781, -0.478, -0.384],
+              [-0.216, -0.633, -0.949],
+              [0.721, -0.452, -0.62],
+              [-0.434, 0.816, 0.526],
+              [-0.794, 0.014, -0.971],
+              [-0.683, -0.158, 0.844],
+              [-0.914, 0.066, 0.396],
+              [0.157, -0.721, -0.188],
+              [0.662, -0.087, 0.573],
+              [-0.732, 0.651, -0.935],
+              [0.35, 0.605, 0.152],
+              [-0.317, -0.668, 0.206],
+              [0.139, 0.822, -0.11],
+              [-0.821, 0.464, 0.347],
+              [-0.668, -0.527, -0.879],
+              [-0.578, -0.444, 0.673],
+              [0.573, 0.744, 0.819],
+              [-0.52, -0.449, 0.256],
+              [-0.053, -0.703, 0.258],
+              [-0.646, 0.266, -0.551],
+              [-0.728, -0.448, -0.488],
+              [-0.547, -0.5, -0.099],
+              [0.714, 0.091, 0.084],
+              [-0.114, 0.764, -0.357],
+              [0.02, -0.706, -0.59],
+              [0.144, -0.947, -0.95],
+              [-0.851, 0.232, -0.445],
+            ];
+            var glyphs = Array.from(root.querySelectorAll(".cse-glyph"));
+            var scatter = spreadValues[spread];
+
+            glyphs.forEach(function (glyph, index) {
+              var values = scatterTable[index % scatterTable.length];
+              gsap.set(glyph, {
+                x: (values[0] * scatter.x).toFixed(3) + "cqw",
+                y: (values[1] * scatter.y).toFixed(3) + "cqh",
+                rotation: values[2] * scatter.rotation,
+                scale: 0.82,
+              });
+            });
+
+            var IN_BASE = 1.64;
+            var OUT_BASE = 0.4;
+            var RETURN_AT_BASE = 0.58;
+            var RETURN_DURATION_BASE = 0.66;
+            var STAGGER_BASE = 0.28;
+            var LAND_AT_BASE = RETURN_AT_BASE + RETURN_DURATION_BASE + STAGGER_BASE;
+            var SHAKE_FRAME_BASE = 1 / 30;
+            var STILL_HOLD_BASE = 0.3;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "3.5"));
+            var baseTotal = IN_BASE + OUT_BASE;
+            var envelopeScale = duration < baseTotal ? duration / baseTotal : 1;
+            var IN = IN_BASE * envelopeScale;
+            var OUT = OUT_BASE * envelopeScale;
+            var RETURN_AT = RETURN_AT_BASE * envelopeScale;
+            var RETURN_DURATION = RETURN_DURATION_BASE * envelopeScale;
+            var STAGGER = STAGGER_BASE * envelopeScale;
+            var LAND_AT = LAND_AT_BASE * envelopeScale;
+            var SHAKE_FRAME = SHAKE_FRAME_BASE * envelopeScale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var ACTIVE_HOLD = Math.max(0, HOLD - Math.min(STILL_HOLD_BASE, HOLD));
+            var HOLD_START = IN;
+            var OUT_START = IN + HOLD;
+
+            var tl = gsap.timeline({ paused: true });
+
+            tl.to(
+              glyphs,
+              {
+                x: 0,
+                y: 0,
+                rotation: 0,
+                scale: 1,
+                duration: RETURN_DURATION,
+                ease: "back.out(1.7)",
+                stagger: { amount: STAGGER, from: "center" },
+              },
+              RETURN_AT,
+            );
+
+            tl.to(
+              stage,
+              { x: "0.55cqw", y: "-0.3cqh", duration: SHAKE_FRAME, ease: "power2.out" },
+              LAND_AT,
+            );
+            tl.to(stage, {
+              x: "-0.38cqw",
+              y: "0.2cqh",
+              duration: SHAKE_FRAME,
+              ease: "power2.out",
+            });
+            tl.to(stage, { x: 0, y: 0, duration: SHAKE_FRAME, ease: "power2.out" });
+
+            if (ACTIVE_HOLD > 0) {
+              tl.fromTo(
+                headline,
+                { y: 0 },
+                {
+                  y: "-0.4cqh",
+                  duration: ACTIVE_HOLD / 2,
+                  ease: "sine.inOut",
+                  yoyo: true,
+                  repeat: 1,
+                  immediateRender: false,
+                },
+                HOLD_START,
+              );
+            }
+
+            tl.to(
+              headline,
+              { opacity: 0, scale: 0.96, duration: OUT, ease: "power2.in" },
+              OUT_START,
+            );
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["char-slam-explode"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/char-slam-explode/demo.html b/docs/public/catalog/components/char-slam-explode/demo.html
new file mode 100644
index 0000000000..dfb14d8ce6
--- /dev/null
+++ b/docs/public/catalog/components/char-slam-explode/demo.html
@@ -0,0 +1,100 @@
+<!doctype html>
+<!--
+  char-slam-explode demo. This standalone composition mounts the primitive
+  through data-composition-src. Non-default copy, accent, and spread prove
+  that all variables flow through the elastic host mount.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Char Slam Explode Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0b0c0e;
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f7f8fa;
+        --surface: #15181e;
+        --border: #343943;
+        --font-display: Inter, system-ui, sans-serif;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 44%, #1a1722 0%, var(--bg) 72%);
+      }
+
+      .mount-card {
+        width: 82%;
+        height: 64%;
+        left: 9%;
+        top: 18%;
+        container-type: size;
+        overflow: hidden;
+        border: 1px solid rgba(247, 248, 250, 0.12);
+        border-radius: 32px;
+        background: color-mix(in srgb, var(--surface) 88%, transparent);
+        box-shadow: 0 54px 120px rgba(0, 0, 0, 0.46);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="char-slam-explode-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="3.5"
+      data-fps="30"
+    >
+      <div
+        id="char-slam-explode-mount"
+        class="mount-card clip"
+        data-composition-id="char-slam-explode"
+        data-composition-src="./char-slam-explode.html"
+        data-variable-values='{"text":"Detonate","accent":"violet","spread":"wild"}'
+        data-start="0"
+        data-duration="3.5"
+        data-track-index="0"
+        data-width="1574"
+        data-height="691"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["char-slam-explode-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "char-slam-explode.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/chart-story/README.md b/docs/public/catalog/components/chart-story/README.md
new file mode 100644
index 0000000000..a1382436cb
--- /dev/null
+++ b/docs/public/catalog/components/chart-story/README.md
@@ -0,0 +1,34 @@
+# chart-story
+
+The proof-and-stats chart unit: one chart builds from data in reading order and lands on the exact supplied values, never a re-rounded approximation. Bars grow staggered from the baseline (scaleY, origin at the baseline), a line draws left to right by getTotalLength dash with a translucent area fill fading in after, a donut ring sweeps segment by segment, or horizontal progress bars fill top to bottom (scaleX, origin left). Axis and data labels fade in reading order. The emphasized datum takes the accent color plus a value callout that pops with a smooth settle while its number rolls to the exact value and unit; on the donut the callout is the ring center.
+
+Inline SVG built synchronously from the variables, no chart library, fully deterministic and seek-safe.
+
+## Variables
+
+| Variable    | Type   | Default          | Notes                                                                                                                           |
+| ----------- | ------ | ---------------- | ------------------------------------------------------------------------------------------------------------------------------- |
+| `type`      | enum   | `bars`           | `bars`, `line`, `donut`, or `progress`.                                                                                         |
+| `data`      | string | `12, 28, 45, 64` | Comma-separated numbers. The displayed finals are the raw tokens (decimals preserved, e.g. `45.5`).                             |
+| `labels`    | string | `Q1, Q2, Q3, Q4` | Comma-separated, one per datum. Missing entries render empty.                                                                   |
+| `emphasize` | number | `3`              | Index of the accented datum with the callout. Clamped to the data range; out-of-range falls to the last datum.                  |
+| `unit`      | string | `%`              | Suffix on every displayed value. For `progress`, a `%` unit fills against 100; otherwise the largest value owns the full track. |
+| `accent`    | enum   | `green`          | `green` maps to `--brand`, `blue` to `--accent`, `violet` to `--accent-2`.                                                      |
+| `exit`      | enum   | `none`           | `none`, `fade`, or `up`. Proof stats end on the still hold, so the default is none.                                             |
+
+Bars and lines scale against the largest value; donut segments are proportional shares of the total.
+
+## Envelope
+
+Authored at 5s. Fixed IN with elastic HOLD; OUT exists only when `exit` is not `none`.
+
+- IN_BASE = 3.3s: stage arrival (0.5s), axis or track reveal at 0.15s, data build from 0.55s over 1.6s in reading order, labels fading from 0.85s, callout pop at 2.35s with a 0.7s number roll landing the exact value at 3.05s.
+- HOLD = `max(0, D - IN - OUT)`: one finite drift (two explicit tweens), then 0.3s stillness.
+- OUT_BASE = 0.5s only for `exit: fade` (opacity) or `exit: up` (opacity plus rise); otherwise 0.
+- Shorter durations compress IN and OUT proportionally. The timeline is never time-scaled.
+
+Sync point: `callout-landed` at 3.05s (exact value landed, at authored duration).
+
+## Mount contract
+
+Template-wrapped sub-composition. `#root` fills the host box, establishes the container query basis (`container-type: size`, `cqw`/`cqh` units), carries no `data-width`/`data-height`, and registers one paused GSAP timeline under the literal `chart-story` key on `window.__timelines`. Consumes the contract tokens (`--bg`, `--fg`, `--muted`, `--surface`, `--border`, `--brand`, `--accent`, `--accent-2`, `--font-display`, `--font-body`, `--font-mono`, `--space-2`) at point of use with exact-value fallbacks. All dash draws measure `getTotalLength` (never the `pathLength` attribute, no `vector-effect: non-scaling-stroke` on dashed paths). Deterministic: no `Date.now`, no randomness, no network reads at seek time.
diff --git a/docs/public/catalog/components/chart-story/chart-story.html b/docs/public/catalog/components/chart-story/chart-story.html
new file mode 100644
index 0000000000..4ae5fa3873
--- /dev/null
+++ b/docs/public/catalog/components/chart-story/chart-story.html
@@ -0,0 +1,739 @@
+<!doctype html>
+<!--
+  chart-story: HyperFrames video primitive (proof and stats / prove)
+
+  One chart builds from data in reading order and lands the exact supplied
+  values. Bars grow staggered from the baseline, a line draws left to right
+  with an optional translucent area fill, a donut ring sweeps segment by
+  segment, or horizontal progress bars fill top to bottom. Axis and data
+  labels fade in reading order; the emphasized datum takes the accent color
+  and a value callout that pops and settles on the exact value plus unit.
+
+  Variables:
+    - type (bars | line | donut | progress, default "bars"): chart form.
+    - data (string, default "12, 28, 45, 64"): comma-separated numbers.
+    - labels (string, default "Q1, Q2, Q3, Q4"): comma-separated labels.
+    - emphasize (number, default 3): index of the accented datum, clamped.
+    - unit (string, default "%"): suffix appended to every value.
+    - accent (green | blue | violet, default "green"): emphasis color.
+    - exit (none | fade | up, default none): films end on the hold.
+
+  Envelope, fixed IN with elastic HOLD only (OUT exists only when exit is
+  fade or up):
+    IN_BASE  = 3.3s, stage arrival, axis draw, data build, labels, callout
+    HOLD     = max(0, D - IN - OUT), one finite drift then 0.3s stillness
+    OUT_BASE = 0.5s only when exit is fade or up, otherwise 0
+    If D is shorter than IN_BASE + OUT_BASE, IN and OUT compress together.
+    The timeline is never time-scaled.
+
+  Determinism: the whole SVG is built synchronously from the variables, all
+  dash lengths come from getTotalLength (never the pathLength attribute, no
+  vector-effect on dashed paths), and the callout number rows are authored
+  frame sets, so repeated or reverse seeks always show the same pixels. The
+  final displayed values are the raw supplied tokens, never re-rounded.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, has no data-width or data-height,
+  and registers one paused timeline under the literal chart-story key.
+-->
+<html
+  lang="en"
+  data-composition-id="chart-story"
+  data-composition-duration="5"
+  data-composition-variables='[
+    { "id": "type", "type": "enum", "role": "content", "label": "Chart type", "description": "Chart form the data builds into.", "default": "bars", "options": [{ "value": "bars", "label": "Bars" }, { "value": "line", "label": "Line" }, { "value": "donut", "label": "Donut" }, { "value": "progress", "label": "Progress" }] },
+    { "id": "data", "type": "string", "role": "content", "label": "Data", "description": "Comma-separated numbers; the chart lands exactly on these values.", "default": "12, 28, 45, 64" },
+    { "id": "labels", "type": "string", "role": "content", "label": "Labels", "description": "Comma-separated labels, one per datum.", "default": "Q1, Q2, Q3, Q4" },
+    { "id": "emphasize", "type": "number", "role": "content", "label": "Emphasize", "description": "Index of the datum that takes the accent and the value callout. Clamped to the data range.", "default": 3, "step": 1 },
+    { "id": "unit", "type": "string", "role": "content", "label": "Unit", "description": "Suffix appended to every displayed value.", "default": "%" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Contract color used by the emphasized datum and its callout.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "style", "label": "Exit", "description": "Optional departure. Proof stats end on the still hold, so the default is none.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Chart Story</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="chart-story" data-duration="5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .cs-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .cs-stage {
+            position: relative;
+            width: 92cqw;
+            height: 88cqh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: var(--space-2, 2cqmin);
+            will-change: transform, opacity;
+          }
+
+          .cs-stage svg {
+            width: 100%;
+            height: 100%;
+            display: block;
+            overflow: visible;
+          }
+
+          .cs-mono {
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            letter-spacing: 0.03em;
+          }
+
+          .cs-display {
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-weight: 600;
+            letter-spacing: -0.02em;
+          }
+        </style>
+
+        <div
+          id="chart-story-clip"
+          class="cs-clip clip"
+          data-start="0"
+          data-duration="5"
+          data-track-index="0"
+        >
+          <div class="cs-stage" role="img"></div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var NS = "http://www.w3.org/2000/svg";
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".cs-stage");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var typeOptions = { bars: 1, line: 1, donut: 1, progress: 1 };
+            var type = Object.prototype.hasOwnProperty.call(typeOptions, vars.type)
+              ? vars.type
+              : "bars";
+            var unit = vars.unit == null ? "%" : String(vars.unit);
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var accentColor = accentColors[accent];
+            var inkColor = "var(--fg, #f8fafc)";
+            // Label ink: raw --muted fails contrast on near-white hosts
+            // (#94a3b8 on #f8fafc is ~2.4:1). Pulling it halfway toward --fg
+            // stays quiet next to inkColor yet passes 4.5:1 on light AND
+            // dark hosts, since --fg is by definition high-contrast on --bg.
+            var mutedColor = "color-mix(in srgb, var(--fg, #f8fafc) 50%, var(--muted, #94a3b8))";
+            var borderColor = "var(--border, #475569)";
+            var baseSeries = "color-mix(in srgb, var(--fg, #f8fafc) 44%, var(--surface, #10161f))";
+            var lineSeries = "color-mix(in srgb, var(--fg, #f8fafc) 82%, var(--surface, #10161f))";
+            var trackColor = "color-mix(in srgb, var(--border, #475569) 55%, transparent)";
+
+            // Values keep their raw tokens: the displayed final numbers are
+            // the exact supplied strings, never a re-rounded float.
+            var tokens = String(vars.data == null ? "" : vars.data)
+              .split(",")
+              .map(function (token) {
+                return token.trim();
+              })
+              .filter(function (token) {
+                return token !== "" && Number.isFinite(Number(token));
+              });
+            if (tokens.length === 0) tokens = ["12", "28", "45", "64"];
+            var values = tokens.map(Number);
+            var n = values.length;
+
+            var labels = String(vars.labels == null ? "Q1, Q2, Q3, Q4" : vars.labels)
+              .split(",")
+              .map(function (label) {
+                return label.trim();
+              });
+            while (labels.length < n) labels.push("");
+
+            var emphasize = Math.round(Number(vars.emphasize));
+            if (!Number.isFinite(emphasize)) emphasize = n - 1;
+            emphasize = Math.min(Math.max(emphasize, 0), n - 1);
+
+            var displays = tokens.map(function (token) {
+              return token + unit;
+            });
+            var emphasizedValue = values[emphasize];
+            var emphasizedDecimals = (tokens[emphasize].split(".")[1] || "").length;
+
+            var maxValue = Math.max(1e-9, Math.max.apply(null, values));
+            var FPS = 30;
+
+            stage.setAttribute(
+              "aria-label",
+              labels
+                .slice(0, n)
+                .map(function (label, index) {
+                  return (label ? label + " " : "") + displays[index];
+                })
+                .join(", "),
+            );
+
+            var svg = document.createElementNS(NS, "svg");
+            svg.setAttribute("viewBox", "0 0 1000 560");
+            svg.setAttribute("preserveAspectRatio", "xMidYMid meet");
+            stage.appendChild(svg);
+
+            function make(name, attrs, parent) {
+              var node = document.createElementNS(NS, name);
+              for (var key in attrs) node.setAttribute(key, String(attrs[key]));
+              (parent || svg).appendChild(node);
+              return node;
+            }
+
+            function text(x, y, size, fill, anchor, parent) {
+              var node = make(
+                "text",
+                {
+                  x: x,
+                  y: y,
+                  "font-size": size,
+                  "text-anchor": anchor || "middle",
+                  class: "cs-mono",
+                },
+                parent,
+              );
+              node.style.fill = fill;
+              return node;
+            }
+
+            // Dashed draw setup: length comes from getTotalLength, never the
+            // pathLength attribute, and dashed strokes never use
+            // vector-effect: non-scaling-stroke.
+            function dashPrepare(node) {
+              var length = node.getTotalLength();
+              node.style.strokeDasharray = length + " " + length;
+              gsap.set(node, { strokeDashoffset: length });
+              return length;
+            }
+
+            // Envelope (base seconds, all scaled together, never timeScaled)
+            var IN_BASE = 3.3;
+            var OUT_BASE = exit === "none" ? 0 : 0.5;
+            var STILLNESS = 0.3;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "5"));
+            var totalBase = IN_BASE + OUT_BASE;
+            var s = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * s;
+            var OUT = OUT_BASE * s;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var HOLD_START = IN;
+            var OUT_START = IN + HOLD;
+
+            var AXIS_AT = 0.15;
+            var AXIS_DUR = 0.5;
+            var BUILD_AT = 0.55;
+            var BUILD_DUR = 1.6;
+            var LABELS_AT = 0.85;
+            var CALLOUT_AT = 2.35;
+            var POP_DUR = 0.45;
+            var ROLL_DUR = 0.7;
+
+            var tl = gsap.timeline({ paused: true });
+
+            gsap.set(stage, { opacity: 0, y: "2.4cqh" });
+            tl.to(stage, { opacity: 1, duration: 0.5 * s, ease: "power2.out" }, 0);
+            tl.to(stage, { y: "0cqh", duration: 0.5 * s, ease: "power3.out" }, 0);
+
+            function fadeIn(node, at, rise) {
+              gsap.set(node, rise ? { opacity: 0, y: 8 } : { opacity: 0 });
+              tl.to(
+                node,
+                rise
+                  ? { opacity: 1, y: 0, duration: 0.4 * s, ease: "power2.out" }
+                  : { opacity: 1, duration: 0.4 * s, ease: "power2.out" },
+                at * s,
+              );
+            }
+
+            function drawBaseline(x0, x1, y) {
+              var baseline = make("path", {
+                d: "M " + x0 + " " + y + " L " + x1 + " " + y,
+                fill: "none",
+                "stroke-width": 3,
+                "stroke-linecap": "round",
+              });
+              baseline.style.stroke = borderColor;
+              var length = dashPrepare(baseline);
+              tl.to(
+                baseline,
+                { strokeDashoffset: 0, duration: AXIS_DUR * s, ease: "power2.inOut" },
+                AXIS_AT * s,
+              );
+              return length;
+            }
+
+            // Callout chip: pops with a smooth settle, number rows are
+            // authored frames that land on the exact supplied token.
+            function makeCallout(anchorX, bottomY) {
+              var label = displays[emphasize];
+              var width = Math.max(96, Array.from(label).length * 17 + 44);
+              var height = 52;
+              var cx = Math.min(Math.max(anchorX, width / 2 + 8), 1000 - width / 2 - 8);
+              var group = make("g", {});
+              var chip = make(
+                "rect",
+                {
+                  x: cx - width / 2,
+                  y: bottomY - height,
+                  width: width,
+                  height: height,
+                  rx: 12,
+                },
+                group,
+              );
+              chip.style.fill = accentColor;
+              var valueNode = text(
+                cx,
+                bottomY - height / 2 + 10,
+                29,
+                "var(--bg, #05070b)",
+                "middle",
+                group,
+              );
+              valueNode.setAttribute("font-weight", "600");
+              popAndRoll(group, valueNode, "50% 100%");
+            }
+
+            function popAndRoll(group, valueNode, origin) {
+              gsap.set(group, { opacity: 0, scale: 0.6, transformOrigin: origin });
+              tl.to(group, { opacity: 1, duration: 0.25 * s, ease: "power2.out" }, CALLOUT_AT * s);
+              tl.to(
+                group,
+                { scale: 1, duration: POP_DUR * s, ease: "back.out(1.7)" },
+                CALLOUT_AT * s,
+              );
+              var frames = Math.max(1, Math.round(ROLL_DUR * s * FPS));
+              var ease = gsap.parseEase("power2.out");
+              var suffix = valueNode.__rollUnitless ? "" : unit;
+              for (var frame = 0; frame <= frames; frame += 1) {
+                var row =
+                  frame === frames
+                    ? tokens[emphasize] + suffix
+                    : (emphasizedValue * ease(frame / frames)).toFixed(emphasizedDecimals) + suffix;
+                tl.set(
+                  valueNode,
+                  { textContent: row },
+                  (CALLOUT_AT + ROLL_DUR * (frame / frames)) * s,
+                );
+              }
+            }
+
+            function buildBars() {
+              var left = 80;
+              var right = 920;
+              var base = 470;
+              var top = 120;
+              var band = (right - left) / n;
+              var barWidth = Math.min(band * 0.62, 150);
+              drawBaseline(left, right, base);
+              var stagger = n > 1 ? (BUILD_DUR - 0.85) / (n - 1) : 0;
+
+              values.forEach(function (value, index) {
+                var height = Math.max((value / maxValue) * (base - top), 3);
+                var cx = left + band * (index + 0.5);
+                var at = BUILD_AT + stagger * index;
+                // Radius never exceeds half the bar height, so tiny data
+                // values render as clean low bars instead of radius-crushed
+                // slivers. Growth animates the rect geometry (not scaleY):
+                // the renderer re-clamps the corner radius against the
+                // current height every frame, so no growth frame shows a
+                // squashed pill either.
+                var bar = make("rect", {
+                  x: cx - barWidth / 2,
+                  y: base,
+                  width: barWidth,
+                  height: 0,
+                  rx: Math.min(10, barWidth * 0.18, height / 2),
+                });
+                bar.style.fill = index === emphasize ? accentColor : baseSeries;
+                tl.to(
+                  bar,
+                  {
+                    attr: { height: height, y: base - height },
+                    duration: 0.85 * s,
+                    ease: "power3.out",
+                  },
+                  at * s,
+                );
+
+                var axisLabel = text(cx, base + 42, 26, mutedColor);
+                axisLabel.textContent = labels[index];
+                fadeIn(axisLabel, LABELS_AT + index * 0.12, true);
+
+                if (index !== emphasize) {
+                  var valueLabel = text(cx, base - height - 16, 27, inkColor);
+                  valueLabel.textContent = displays[index];
+                  fadeIn(valueLabel, at + 0.65, true);
+                }
+              });
+
+              var emphasizedHeight = Math.max((values[emphasize] / maxValue) * (base - top), 3);
+              makeCallout(left + band * (emphasize + 0.5), base - emphasizedHeight - 20);
+            }
+
+            function buildLine() {
+              var left = 80;
+              var right = 920;
+              var base = 470;
+              var top = 120;
+              drawBaseline(left, right, base);
+
+              var points = values.map(function (value, index) {
+                return {
+                  x: left + (right - left) * (n === 1 ? 0.5 : index / (n - 1)),
+                  y: base - (value / maxValue) * (base - top),
+                };
+              });
+              var lineD = points
+                .map(function (point, index) {
+                  return (index === 0 ? "M " : "L ") + point.x + " " + point.y;
+                })
+                .join(" ");
+
+              // Translucent area fill fades in after the stroke finishes.
+              var area = make("path", {
+                d:
+                  lineD +
+                  " L " +
+                  points[n - 1].x +
+                  " " +
+                  base +
+                  " L " +
+                  points[0].x +
+                  " " +
+                  base +
+                  " Z",
+                stroke: "none",
+              });
+              area.style.fill = accentColor;
+              gsap.set(area, { opacity: 0 });
+              tl.to(
+                area,
+                { opacity: 0.14, duration: 0.45 * s, ease: "power2.out" },
+                (BUILD_AT + BUILD_DUR - 0.05) * s,
+              );
+
+              var line = make("path", {
+                d: lineD,
+                fill: "none",
+                "stroke-width": 6,
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round",
+              });
+              line.style.stroke = lineSeries;
+              dashPrepare(line);
+              // ease "none" keeps the dash front aligned with the per-point
+              // cumulative-length timings below.
+              tl.to(
+                line,
+                { strokeDashoffset: 0, duration: (BUILD_DUR - 0.1) * s, ease: "none" },
+                BUILD_AT * s,
+              );
+
+              var cumulative = [0];
+              for (var index = 1; index < n; index += 1) {
+                cumulative.push(
+                  cumulative[index - 1] +
+                    Math.hypot(
+                      points[index].x - points[index - 1].x,
+                      points[index].y - points[index - 1].y,
+                    ),
+                );
+              }
+              var totalLength = Math.max(cumulative[n - 1], 1e-9);
+
+              points.forEach(function (point, index) {
+                var at = BUILD_AT + (BUILD_DUR - 0.1) * (cumulative[index] / totalLength);
+                var dot = make("circle", {
+                  cx: point.x,
+                  cy: point.y,
+                  r: index === emphasize ? 11 : 7,
+                });
+                dot.style.fill = index === emphasize ? accentColor : inkColor;
+                gsap.set(dot, { scale: 0, transformOrigin: "50% 50%" });
+                tl.to(dot, { scale: 1, duration: 0.35 * s, ease: "back.out(2)" }, at * s);
+
+                var axisLabel = text(point.x, base + 42, 26, mutedColor);
+                axisLabel.textContent = labels[index];
+                fadeIn(axisLabel, LABELS_AT + index * 0.12, true);
+
+                if (index !== emphasize) {
+                  var valueLabel = text(point.x, point.y - 20, 25, inkColor);
+                  valueLabel.textContent = displays[index];
+                  fadeIn(valueLabel, at + 0.2, true);
+                }
+              });
+
+              makeCallout(points[emphasize].x, points[emphasize].y - 24);
+            }
+
+            function polar(cx, cy, radius, degrees) {
+              var radians = ((degrees - 90) * Math.PI) / 180;
+              return { x: cx + radius * Math.cos(radians), y: cy + radius * Math.sin(radians) };
+            }
+
+            function arcPath(cx, cy, radius, startDeg, endDeg) {
+              var start = polar(cx, cy, radius, startDeg);
+              var end = polar(cx, cy, radius, endDeg);
+              var large = endDeg - startDeg > 180 ? 1 : 0;
+              return (
+                "M " +
+                start.x +
+                " " +
+                start.y +
+                " A " +
+                radius +
+                " " +
+                radius +
+                " 0 " +
+                large +
+                " 1 " +
+                end.x +
+                " " +
+                end.y
+              );
+            }
+
+            function buildDonut() {
+              var cx = 500;
+              var cy = 252;
+              var radius = 168;
+              var strokeWidth = 54;
+              var total = Math.max(
+                values.reduce(function (sum, value) {
+                  return sum + value;
+                }, 0),
+                1e-9,
+              );
+              var ladder = [72, 50, 36, 26, 18];
+
+              var track = make("circle", {
+                cx: cx,
+                cy: cy,
+                r: radius,
+                fill: "none",
+                "stroke-width": strokeWidth,
+              });
+              track.style.stroke = trackColor;
+              fadeIn(track, AXIS_AT);
+
+              var gap = n > 1 ? 3 : 0;
+              var cursor = 0;
+              values.forEach(function (value, index) {
+                var share = value / total;
+                var startDeg = cursor * 360;
+                var endDeg = (cursor + share) * 360;
+                cursor += share;
+                if (endDeg - startDeg <= gap * 2 + 0.05) return;
+                var segment = make("path", {
+                  d: arcPath(
+                    cx,
+                    cy,
+                    radius,
+                    startDeg + gap / 2,
+                    Math.min(endDeg - gap / 2, 359.98),
+                  ),
+                  fill: "none",
+                  "stroke-width": strokeWidth,
+                });
+                segment.style.stroke =
+                  index === emphasize
+                    ? accentColor
+                    : "color-mix(in srgb, var(--fg, #f8fafc) " +
+                      ladder[index % ladder.length] +
+                      "%, var(--surface, #10161f))";
+                dashPrepare(segment);
+                tl.to(
+                  segment,
+                  {
+                    strokeDashoffset: 0,
+                    duration: Math.max(BUILD_DUR * share, 0.05) * s,
+                    ease: "none",
+                  },
+                  (BUILD_AT + BUILD_DUR * (cursor - share)) * s,
+                );
+              });
+
+              // Legend row beneath, reading order left to right.
+              var itemWidth = Math.min(230, 880 / n);
+              var startX = 500 - (itemWidth * n) / 2;
+              values.forEach(function (value, index) {
+                var x = startX + itemWidth * index;
+                var group = make("g", {});
+                var swatch = make("rect", { x: x, y: 506, width: 20, height: 20, rx: 5 }, group);
+                swatch.style.fill =
+                  index === emphasize
+                    ? accentColor
+                    : "color-mix(in srgb, var(--fg, #f8fafc) " +
+                      ladder[index % ladder.length] +
+                      "%, var(--surface, #10161f))";
+                var entry = text(x + 32, 523, 24, mutedColor, "start", group);
+                entry.textContent = labels[index] ? labels[index] + " " : "";
+                var valueSpan = document.createElementNS(NS, "tspan");
+                valueSpan.style.fill = inkColor;
+                valueSpan.textContent = displays[index];
+                entry.appendChild(valueSpan);
+                fadeIn(group, LABELS_AT + index * 0.14, true);
+              });
+
+              // Center callout: the emphasized value rolls to the exact token.
+              var center = make("g", {});
+              var valueText = make(
+                "text",
+                {
+                  x: cx,
+                  y: cy + 14,
+                  "font-size": 84,
+                  "text-anchor": "middle",
+                  class: "cs-display",
+                },
+                center,
+              );
+              valueText.style.fill = accentColor;
+              var numberSpan = document.createElementNS(NS, "tspan");
+              numberSpan.__rollUnitless = true;
+              valueText.appendChild(numberSpan);
+              var unitSpan = document.createElementNS(NS, "tspan");
+              unitSpan.setAttribute("font-size", 44);
+              unitSpan.style.fill = mutedColor;
+              unitSpan.textContent = unit;
+              valueText.appendChild(unitSpan);
+              if (labels[emphasize]) {
+                var centerLabel = text(cx, cy + 62, 26, mutedColor, "middle", center);
+                centerLabel.textContent = labels[emphasize];
+              }
+              popAndRoll(center, numberSpan, "50% 50%");
+            }
+
+            function buildProgress() {
+              var rowHeight = Math.min(92, 440 / n);
+              var top = Math.max(90, 285 - (rowHeight * n) / 2);
+              var trackX = 300;
+              var trackWidth = 560;
+              // Percent-flavored data fills against 100; otherwise the
+              // largest value owns the full track.
+              var denominator = unit.trim() === "%" ? Math.max(100, maxValue) : maxValue;
+              var stagger = n > 1 ? (BUILD_DUR - 0.9) / (n - 1) : 0;
+
+              values.forEach(function (value, index) {
+                var cy = top + rowHeight * (index + 0.5);
+                var at = BUILD_AT + stagger * index;
+                var fraction = Math.min(Math.max(value / denominator, 0), 1);
+
+                var track = make("rect", {
+                  x: trackX,
+                  y: cy - 10,
+                  width: trackWidth,
+                  height: 20,
+                  rx: 10,
+                });
+                track.style.fill = trackColor;
+                fadeIn(track, AXIS_AT + index * 0.08);
+
+                // Same sliver guard as bars: radius clamped to half the fill
+                // width and growth via rect geometry, never scaleX.
+                var fillWidth = Math.max(trackWidth * fraction, 8);
+                var fill = make("rect", {
+                  x: trackX,
+                  y: cy - 10,
+                  width: 0,
+                  height: 20,
+                  rx: Math.min(10, fillWidth / 2),
+                });
+                fill.style.fill = index === emphasize ? accentColor : baseSeries;
+                tl.to(
+                  fill,
+                  { attr: { width: fillWidth }, duration: 0.9 * s, ease: "power3.out" },
+                  at * s,
+                );
+
+                var rowLabel = text(80, cy + 9, 26, mutedColor, "start");
+                rowLabel.textContent = labels[index];
+                fadeIn(rowLabel, LABELS_AT + index * 0.12, true);
+
+                if (index !== emphasize) {
+                  var valueLabel = text(884, cy + 9, 27, inkColor, "start");
+                  valueLabel.textContent = displays[index];
+                  fadeIn(valueLabel, at + 0.65, true);
+                }
+              });
+
+              var emphasizedFraction = Math.min(Math.max(values[emphasize] / denominator, 0), 1);
+              makeCallout(
+                trackX + trackWidth * emphasizedFraction,
+                top + rowHeight * (emphasize + 0.5) - 26,
+              );
+            }
+
+            if (type === "bars") buildBars();
+            else if (type === "line") buildLine();
+            else if (type === "donut") buildDonut();
+            else buildProgress();
+
+            // HOLD: one finite drift, authored as two explicit tweens, then
+            // stillness to the end (or to the exit).
+            var driftDuration = Math.max(0, HOLD - STILLNESS);
+            if (driftDuration > 0.1) {
+              var half = driftDuration / 2;
+              tl.to(stage, { y: "-0.5cqh", duration: half, ease: "sine.inOut" }, HOLD_START);
+              tl.to(stage, { y: "0cqh", duration: half, ease: "sine.inOut" }, HOLD_START + half);
+            }
+
+            if (exit === "fade") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "up") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+              tl.to(stage, { y: "-3cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["chart-story"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/chart-story/demo.html b/docs/public/catalog/components/chart-story/demo.html
new file mode 100644
index 0000000000..0e57300789
--- /dev/null
+++ b/docs/public/catalog/components/chart-story/demo.html
@@ -0,0 +1,98 @@
+<!doctype html>
+<!--
+  chart-story demo. Large centered mount (80% x 76%) on a light editorial
+  backdrop: the bar chart tells its story at presentation scale, with the
+  emphasized bar and unit labels readable across the frame.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>chart-story Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #f4f6f9);
+      }
+
+      #root {
+        --bg: #f4f6f9;
+        --fg: #14161b;
+        --surface: #ffffff;
+        --border: #dfe4ec;
+        --brand: #1d4ed8;
+        --accent: #0284c7;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 40%, #ffffff 0%, var(--bg, #f4f6f9) 70%);
+      }
+
+      .mount-stage {
+        width: 80%;
+        height: 76%;
+        left: 10%;
+        top: 12%;
+        container-type: size;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="chart-story-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+      data-fps="30"
+    >
+      <div
+        id="chart-story-mount"
+        class="mount-stage clip"
+        data-composition-id="chart-story"
+        data-composition-src="./chart-story.html"
+        data-variable-values='{"type":"bars","data":"12,28,45,61,88","labels":"Q1,Q2,Q3,Q4,Q5","emphasize":4,"unit":"%","accent":"green"}'
+        data-start="0"
+        data-duration="5"
+        data-track-index="0"
+        data-width="1536"
+        data-height="821"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["chart-story-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "chart-story.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/chat-to-preview-layout/chat-to-preview-layout.html b/docs/public/catalog/components/chat-to-preview-layout/chat-to-preview-layout.html
new file mode 100644
index 0000000000..764963a554
--- /dev/null
+++ b/docs/public/catalog/components/chat-to-preview-layout/chat-to-preview-layout.html
@@ -0,0 +1,94 @@
+<!--
+  Chat to Preview Layout - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-chat-to-preview-layout">
+  <div class="panel prompt">
+    <h3>Chat to Preview Layout</h3>
+    <p>Split-pane chat and preview layout for agent-generated UI.</p>
+    <div class="pill">Generate scene</div>
+    <div class="pill">Refine motion</div>
+    <div class="pill">Export</div>
+  </div>
+  <div class="panel preview">
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+  </div>
+</div>
+
+<style>
+  .hf-remocn-chat-to-preview-layout {
+    --hf-accent: #2563eb;
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-chat-to-preview-layout {
+    width: 820px;
+    min-height: 460px;
+    border-radius: 34px;
+    padding: 28px;
+    background: linear-gradient(135deg, #f8fafc, #e0f2fe);
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);
+    display: grid;
+    grid-template-columns: 280px 1fr;
+    gap: 22px;
+    overflow: hidden;
+  }
+  .hf-remocn-chat-to-preview-layout .panel {
+    border: 1px solid rgba(15, 23, 42, 0.08);
+    border-radius: 24px;
+    background: rgba(255, 255, 255, 0.76);
+    padding: 22px;
+    backdrop-filter: blur(12px);
+  }
+  .hf-remocn-chat-to-preview-layout .prompt {
+    display: grid;
+    gap: 12px;
+    align-content: start;
+  }
+  .hf-remocn-chat-to-preview-layout .pill {
+    height: 42px;
+    border-radius: 999px;
+    background: #111827;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    padding: 0 18px;
+    font-weight: 800;
+    transform: translateX(var(--hf-pill-x, 0px));
+  }
+  .hf-remocn-chat-to-preview-layout .preview {
+    display: grid;
+    gap: 14px;
+  }
+  .hf-remocn-chat-to-preview-layout .card {
+    min-height: 78px;
+    border-radius: 18px;
+    background: #fff;
+    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
+    transform: translate(var(--hf-card-x, 0px), var(--hf-card-y, 0px))
+      scale(var(--hf-card-scale, 1));
+    opacity: var(--hf-card-opacity, 1);
+  }
+  .hf-remocn-chat-to-preview-layout h3 {
+    margin: 0 0 14px;
+    font-size: 32px;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-chat-to-preview-layout p {
+    margin: 0;
+    color: #475569;
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-chat-to-preview-layout .pill', { '--hf-pill-x': '-18px', opacity: 0 }, { '--hf-pill-x': '0px', opacity: 1, duration: 0.25, stagger: 0.08, ease: 'power2.out' }, startTime); tl.fromTo('.hf-remocn-chat-to-preview-layout .card', { '--hf-card-y': '28px', '--hf-card-scale': 0.96, '--hf-card-opacity': 0 }, { '--hf-card-y': '0px', '--hf-card-scale': 1, '--hf-card-opacity': 1, duration: 0.42, stagger: 0.12, ease: 'power3.out' }, startTime + 0.2);
+-->
diff --git a/docs/public/catalog/components/chat-to-preview-layout/demo.html b/docs/public/catalog/components/chat-to-preview-layout/demo.html
new file mode 100644
index 0000000000..097e936785
--- /dev/null
+++ b/docs/public/catalog/components/chat-to-preview-layout/demo.html
@@ -0,0 +1,201 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Chat to Preview Layout - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+        /* ponytail: scale non-GSAP wrapper; GSAP only animates .pill and .card */
+        transform: scale(0.84);
+        transform-origin: center center;
+      }
+      .hf-remocn-chat-to-preview-layout {
+        --hf-accent: #2563eb;
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-chat-to-preview-layout {
+        width: 820px;
+        min-height: 460px;
+        border-radius: 34px;
+        padding: 28px;
+        background: linear-gradient(135deg, #f8fafc, #e0f2fe);
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);
+        display: grid;
+        grid-template-columns: 280px 1fr;
+        gap: 22px;
+        overflow: hidden;
+      }
+      .hf-remocn-chat-to-preview-layout .panel {
+        border: 1px solid rgba(15, 23, 42, 0.08);
+        border-radius: 24px;
+        background: rgba(255, 255, 255, 0.76);
+        padding: 22px;
+        backdrop-filter: blur(12px);
+      }
+      .hf-remocn-chat-to-preview-layout .prompt {
+        display: grid;
+        gap: 12px;
+        align-content: start;
+      }
+      .hf-remocn-chat-to-preview-layout .pill {
+        height: 42px;
+        border-radius: 999px;
+        background: #18181b;
+        color: #fff;
+        display: flex;
+        align-items: center;
+        padding: 0 20px;
+        font-size: 14px;
+        font-weight: 600;
+        letter-spacing: -0.01em;
+        transform: translateX(var(--hf-pill-x, 0px));
+      }
+      .hf-remocn-chat-to-preview-layout .preview {
+        display: grid;
+        gap: 14px;
+      }
+      .hf-remocn-chat-to-preview-layout .card {
+        min-height: 110px;
+        border-radius: 18px;
+        background: #fff;
+        box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
+        border: 1px solid #e4e4e7;
+        padding: 18px 20px;
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        transform: translate(var(--hf-card-x, 0px), var(--hf-card-y, 0px))
+          scale(var(--hf-card-scale, 1));
+        opacity: var(--hf-card-opacity, 1);
+      }
+      .hf-remocn-chat-to-preview-layout .card .sk {
+        border-radius: 6px;
+        background: #f4f4f5;
+      }
+      .hf-remocn-chat-to-preview-layout .card .sk-title {
+        height: 14px;
+        width: 55%;
+      }
+      .hf-remocn-chat-to-preview-layout .card .sk-body {
+        height: 10px;
+        width: 85%;
+      }
+      .hf-remocn-chat-to-preview-layout .card .sk-body-short {
+        height: 10px;
+        width: 65%;
+      }
+      .hf-remocn-chat-to-preview-layout .card .sk-tag {
+        height: 22px;
+        width: 72px;
+        border-radius: 999px;
+        background: #e4e4e7;
+        margin-top: 4px;
+      }
+      .hf-remocn-chat-to-preview-layout h3 {
+        margin: 0 0 14px;
+        font-size: 32px;
+        letter-spacing: -0.04em;
+      }
+      .hf-remocn-chat-to-preview-layout p {
+        margin: 0 0 4px;
+        color: #71717a;
+        font-size: 13px;
+        line-height: 1.5;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="chat-to-preview-layout-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-chat-to-preview-layout">
+          <div class="panel prompt">
+            <h3>Chat to Preview Layout</h3>
+            <p>Split-pane chat and preview layout for agent-generated UI.</p>
+            <div class="pill">Generate scene</div>
+            <div class="pill">Refine motion</div>
+            <div class="pill">Export</div>
+          </div>
+          <div class="panel preview">
+            <div class="card">
+              <div class="sk sk-title"></div>
+              <div class="sk sk-body"></div>
+              <div class="sk sk-body-short"></div>
+              <div class="sk sk-tag"></div>
+            </div>
+            <div class="card">
+              <div class="sk sk-title"></div>
+              <div class="sk sk-body"></div>
+              <div class="sk sk-body-short"></div>
+            </div>
+            <div class="card">
+              <div class="sk sk-title"></div>
+              <div class="sk sk-body"></div>
+              <div class="sk sk-body-short"></div>
+              <div class="sk sk-tag"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-chat-to-preview-layout .pill",
+          { "--hf-pill-x": "-18px", opacity: 0 },
+          { "--hf-pill-x": "0px", opacity: 1, duration: 0.25, stagger: 0.08, ease: "power2.out" },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-chat-to-preview-layout .card",
+          { "--hf-card-y": "28px", "--hf-card-scale": 0.96, "--hf-card-opacity": 0 },
+          {
+            "--hf-card-y": "0px",
+            "--hf-card-scale": 1,
+            "--hf-card-opacity": 1,
+            duration: 0.42,
+            stagger: 0.12,
+            ease: "power3.out",
+          },
+          startTime + 0.2,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["chat-to-preview-layout-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/checkout-flow/checkout-flow.html b/docs/public/catalog/components/checkout-flow/checkout-flow.html
new file mode 100644
index 0000000000..242c4bac65
--- /dev/null
+++ b/docs/public/catalog/components/checkout-flow/checkout-flow.html
@@ -0,0 +1,89 @@
+<!--
+  Checkout Flow - Remocn-inspired composed UI flow for HyperFrames.
+
+  Paste the markup and CSS into a composition. Use the timeline integration
+  note at the bottom as the starting point for deterministic GSAP animation.
+-->
+
+<div class="hf-ui-checkout-flow">
+  <div class="hf-ui-checkout-plan"><span>Pro plan</span><strong>$29/mo</strong></div>
+  <div class="hf-ui-checkout-fields">
+    <div>Card number <strong>4242 4242 4242 4242</strong></div>
+    <div>Expiry <strong>12/30</strong></div>
+  </div>
+  <div class="hf-ui-checkout-total"><span>Total today</span><strong>$29.00</strong></div>
+  <button type="button">Complete purchase</button>
+</div>
+
+<style>
+  .hf-ui-checkout-flow {
+    display: grid;
+    gap: 16px;
+    width: 440px;
+    padding: 26px;
+    border: 1px solid #e4e4e7;
+    border-radius: 28px;
+    background: #ffffff;
+    color: #18181b;
+    font-family: Inter, system-ui, sans-serif;
+    box-shadow: 0 28px 84px rgba(0, 0, 0, 0.12);
+  }
+  .hf-ui-checkout-plan,
+  .hf-ui-checkout-total {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .hf-ui-checkout-plan {
+    padding: 18px;
+    border-radius: 18px;
+    background: #18181b;
+    color: #ffffff;
+  }
+  .hf-ui-checkout-plan span,
+  .hf-ui-checkout-total span {
+    color: inherit;
+    opacity: 0.72;
+    font-size: 14px;
+    font-weight: 850;
+  }
+  .hf-ui-checkout-plan strong,
+  .hf-ui-checkout-total strong {
+    font-size: 22px;
+  }
+  .hf-ui-checkout-fields {
+    display: grid;
+    gap: 10px;
+  }
+  .hf-ui-checkout-fields div {
+    display: grid;
+    gap: 5px;
+    padding: 14px 16px;
+    border: 1px solid #e4e4e7;
+    border-radius: 15px;
+    color: #71717a;
+    font-size: 13px;
+    font-weight: 800;
+  }
+  .hf-ui-checkout-fields strong {
+    color: #18181b;
+    font-size: 16px;
+  }
+  .hf-ui-checkout-flow button {
+    height: 50px;
+    border: 0;
+    border-radius: 15px;
+    /* The primary action is the one accent-carrying element here. */
+    background: var(--accent, #18181b);
+    color: #ffffff;
+    font-weight: 900;
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-ui-checkout-flow', { opacity: 0, y: 28 }, { opacity: 1, y: 0, duration: 0.36, ease: 'power2.out' }, 0.25);
+  tl.fromTo('.hf-ui-checkout-fields div', { x: -16, opacity: 0 }, { x: 0, opacity: 1, duration: 0.26, stagger: 0.08, ease: 'power2.out' }, 0.62);
+  tl.fromTo('.hf-ui-checkout-total', { opacity: 0 }, { opacity: 1, duration: 0.24, ease: 'power2.out' }, 0.92);
+  tl.to('.hf-ui-checkout-flow button', { scale: 0.96, duration: 0.12, yoyo: true, repeat: 1, ease: 'power1.inOut' }, 1.18);
+-->
diff --git a/docs/public/catalog/components/checkout-flow/demo.html b/docs/public/catalog/components/checkout-flow/demo.html
new file mode 100644
index 0000000000..df0872ffa7
--- /dev/null
+++ b/docs/public/catalog/components/checkout-flow/demo.html
@@ -0,0 +1,155 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Checkout Flow - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f5f5f4;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        min-width: 760px;
+        min-height: 520px;
+        padding: 56px;
+        /* ponytail: scale wrapper (not a GSAP target) to fill ~55% of frame */
+        transform: scale(1.12);
+        transform-origin: center center;
+      }
+      .hf-ui-checkout-flow {
+        display: grid;
+        gap: 16px;
+        width: 440px;
+        padding: 26px;
+        border: 1px solid #e4e4e7;
+        border-radius: 28px;
+        background: #ffffff;
+        color: #18181b;
+        font-family: Inter, system-ui, sans-serif;
+        box-shadow: 0 28px 84px rgba(0, 0, 0, 0.12);
+      }
+      .hf-ui-checkout-plan,
+      .hf-ui-checkout-total {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+      .hf-ui-checkout-plan {
+        padding: 18px;
+        border-radius: 18px;
+        background: #18181b;
+        color: #ffffff;
+      }
+      .hf-ui-checkout-plan span,
+      .hf-ui-checkout-total span {
+        color: inherit;
+        opacity: 0.72;
+        font-size: 14px;
+        font-weight: 850;
+      }
+      .hf-ui-checkout-plan strong,
+      .hf-ui-checkout-total strong {
+        font-size: 22px;
+      }
+      .hf-ui-checkout-fields {
+        display: grid;
+        gap: 10px;
+      }
+      .hf-ui-checkout-fields div {
+        display: grid;
+        gap: 5px;
+        padding: 14px 16px;
+        border: 1px solid #e4e4e7;
+        border-radius: 15px;
+        color: #71717a;
+        font-size: 13px;
+        font-weight: 800;
+      }
+      .hf-ui-checkout-fields strong {
+        color: #18181b;
+        font-size: 16px;
+      }
+      .hf-ui-checkout-flow button {
+        width: 100%;
+        height: 50px;
+        border: 0;
+        border-radius: 15px;
+        /* The primary action is the one accent-carrying element here. */
+        background: var(--accent, #18181b);
+        color: #ffffff;
+        font-size: 15px;
+        font-weight: 700;
+        cursor: default;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="checkout-flow-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-ui-checkout-flow">
+          <div class="hf-ui-checkout-plan"><span>Pro plan</span><strong>$29/mo</strong></div>
+          <div class="hf-ui-checkout-fields">
+            <div>Card number <strong>4242 4242 4242 4242</strong></div>
+            <div>Expiry <strong>12/30</strong></div>
+          </div>
+          <div class="hf-ui-checkout-total"><span>Total today</span><strong>$29.00</strong></div>
+          <button type="button">Complete purchase</button>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        tl.fromTo(
+          ".hf-ui-checkout-flow",
+          { opacity: 0, y: 28 },
+          { opacity: 1, y: 0, duration: 0.36, ease: "power2.out" },
+          0.25,
+        );
+        tl.fromTo(
+          ".hf-ui-checkout-fields div",
+          { x: -16, opacity: 0 },
+          { x: 0, opacity: 1, duration: 0.26, stagger: 0.08, ease: "power2.out" },
+          0.62,
+        );
+        tl.fromTo(
+          ".hf-ui-checkout-total",
+          { opacity: 0 },
+          { opacity: 1, duration: 0.24, ease: "power2.out" },
+          0.92,
+        );
+        tl.to(
+          ".hf-ui-checkout-flow button",
+          { scale: 0.96, duration: 0.12, yoyo: true, repeat: 1, ease: "power1.inOut" },
+          1.18,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["checkout-flow-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/chromatic-aberration-wipe/__hf-variables-preview.html b/docs/public/catalog/components/chromatic-aberration-wipe/__hf-variables-preview.html
new file mode 100644
index 0000000000..5787452e59
--- /dev/null
+++ b/docs/public/catalog/components/chromatic-aberration-wipe/__hf-variables-preview.html
@@ -0,0 +1,106 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Chromatic Aberration Wipe variables preview</title>
+    <style>
+      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #f7f7f8; }
+      #hf-vars-root { position: relative; width: 1920px; height: 1080px; }
+      #hf-vars-mount { position: absolute; inset: 0; display: grid; place-items: center; }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  </head>
+  <body>
+    <div id="hf-vars-root" data-composition-id="chromatic-aberration-wipe-variables-preview" data-start="0" data-width="1920" data-height="1080" data-duration="5" data-fps="30">
+      <div id="hf-vars-mount" class="clip" data-composition-id="chromatic-aberration-wipe" data-composition-src="./chromatic-aberration-wipe.html" data-start="0" data-duration="5" data-track-index="0" data-width="1920" data-height="1080"></div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["chromatic-aberration-wipe-variables-preview"] = gsap.timeline({ paused: true });
+    </script>
+    <script>
+      (function () {
+        var mount = document.getElementById("hf-vars-mount");
+        // The mount is filled asynchronously, and the demo script selects
+        // what it fills it with, so it cannot run before then.
+        var observer = new MutationObserver(build);
+        observer.observe(mount, { childList: true, subtree: true });
+        build();
+        function build() {
+          if (!mount.firstElementChild) return;
+          observer.disconnect();
+
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-chromatic-aberration-wipe .to",
+          { "--hf-clip-right": "100%", "--hf-to-x": "60px", "--hf-to-scale": 1.04 },
+          {
+            "--hf-clip-right": "0%",
+            "--hf-to-x": "0px",
+            "--hf-to-scale": 1,
+            duration: 0.9,
+            ease: "power3.inOut",
+          },
+          startTime,
+        );
+        tl.to(
+          ".hf-remocn-chromatic-aberration-wipe .from",
+          {
+            "--hf-from-x": "-70px",
+            "--hf-from-scale": 0.96,
+            "--hf-from-blur": "5px",
+            duration: 0.9,
+            ease: "power3.inOut",
+          },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-chromatic-aberration-wipe .fx",
+          { "--hf-fx-x": "-110%" },
+          { "--hf-fx-x": "110%", duration: 0.58, ease: "power2.inOut" },
+          startTime + 0.18,
+        );
+        tl.fromTo(
+          ".hf-remocn-chromatic-aberration-wipe .rgb",
+          { "--hf-rgb-opacity": 0, "--hf-rgb-x": "-16px" },
+          {
+            "--hf-rgb-opacity": 1,
+            "--hf-rgb-x": "16px",
+            repeat: 3,
+            yoyo: true,
+            duration: 0.07,
+            ease: "steps(1)",
+          },
+          startTime + 0.32,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["chromatic-aberration-wipe-demo"] = tl;
+          var child = window.__timelines["chromatic-aberration-wipe-demo"];
+          delete window.__timelines["chromatic-aberration-wipe-demo"];
+          if (!child || typeof child.paused !== "function") return;
+          child.paused(false);
+          window.__timelines["chromatic-aberration-wipe-variables-preview"].add(child, 0);
+        }
+      })();
+    </script>
+<script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "chromatic-aberration-wipe.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/chromatic-aberration-wipe/chromatic-aberration-wipe.html b/docs/public/catalog/components/chromatic-aberration-wipe/chromatic-aberration-wipe.html
new file mode 100644
index 0000000000..d0545aace4
--- /dev/null
+++ b/docs/public/catalog/components/chromatic-aberration-wipe/chromatic-aberration-wipe.html
@@ -0,0 +1,165 @@
+<!--
+  Chromatic Aberration Wipe - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result as a custom property
+  the CSS consumes. The timeline recipe below is untouched by them: it keeps
+  driving one clip edge, one pair of offsets and one channel-split flash, and
+  these decide which way that edge sweeps and how hard the flash reads.
+
+    - direction (left | right | up | down, default left): the direction the
+      reveal travels. Both scenes slide the same way and the wipe edge follows,
+      so up and down turn the horizontal wipe into a vertical one.
+    - accent (blue | green | violet, default blue): the incoming scene's
+      gradient family.
+    - aberration (0 to 2, default 1): multiplies the red/cyan channel split.
+      0 removes it entirely, 2 doubles the offset and saturates the flash.
+
+  On every default the result is identical to the original: a left-to-right
+  wipe into the blue/violet scene with the stock RGB split.
+
+  The white sheen sweeps horizontally in every direction; it is a flash rather
+  than an edge, so it is left alone.
+-->
+
+<div
+  class="hf-remocn-chromatic-aberration-wipe"
+  data-composition-variables='[
+    { "id": "direction", "type": "enum", "role": "motion", "label": "Direction", "description": "The direction the reveal travels; both scenes slide the same way and the wipe edge follows.", "default": "left", "options": [{ "value": "left", "label": "Left" }, { "value": "right", "label": "Right" }, { "value": "up", "label": "Up" }, { "value": "down", "label": "Down" }] },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Colour family of the incoming scene&#39;s gradient.", "default": "blue", "options": [{ "value": "blue", "label": "Blue" }, { "value": "green", "label": "Green" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "aberration", "type": "number", "role": "style", "label": "Aberration", "description": "Multiplies the red/cyan channel split: 0 removes it, 1 is the stock strength, 2 doubles the offset and saturates the flash.", "default": 1, "min": 0, "max": 2, "step": 0.1, "unit": "x" }
+  ]'
+>
+  <div class="scene from">Before</div>
+  <div class="scene to">Chromatic Aberration Wipe</div>
+  <div class="fx"></div>
+  <div class="rgb"></div>
+</div>
+
+<style>
+  .hf-remocn-chromatic-aberration-wipe {
+    --hf-accent: #2563eb;
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-chromatic-aberration-wipe {
+    position: relative;
+    width: 760px;
+    height: 428px;
+    overflow: hidden;
+    border-radius: 30px;
+    background: #111827;
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+  }
+  .hf-remocn-chromatic-aberration-wipe .scene {
+    position: absolute;
+    inset: 0;
+    display: grid;
+    place-items: center;
+    font-weight: 900;
+    font-size: 58px;
+    letter-spacing: -0.05em;
+    color: #fff;
+  }
+  .hf-remocn-chromatic-aberration-wipe .from {
+    background: linear-gradient(135deg, #111827, #374151);
+    transform: translate(
+        calc(var(--hf-from-x, 0px) * var(--hf-wipe-ax, 1)),
+        calc(var(--hf-from-y, 0px) + var(--hf-from-x, 0px) * var(--hf-wipe-ay, 0))
+      )
+      scale(var(--hf-from-scale, 1));
+    filter: blur(var(--hf-from-blur, 0px));
+  }
+  .hf-remocn-chromatic-aberration-wipe .to {
+    background: linear-gradient(135deg, var(--hf-scene-a, #2563eb), var(--hf-scene-b, #7c3aed));
+    transform: translate(
+        calc(var(--hf-to-x, 0px) * var(--hf-wipe-ax, 1)),
+        calc(var(--hf-to-y, 0px) + var(--hf-to-x, 0px) * var(--hf-wipe-ay, 0))
+      )
+      scale(var(--hf-to-scale, 1));
+    clip-path: inset(
+      calc(var(--hf-clip-top, 0%) + var(--hf-clip-right, 100%) * var(--hf-wipe-t, 0))
+        calc(var(--hf-clip-right, 100%) * var(--hf-wipe-r, 1))
+        calc(var(--hf-clip-bottom, 0%) + var(--hf-clip-right, 100%) * var(--hf-wipe-b, 0))
+        calc(var(--hf-clip-left, 0%) + var(--hf-clip-right, 100%) * var(--hf-wipe-l, 0))
+    );
+  }
+  .hf-remocn-chromatic-aberration-wipe .fx {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
+    mix-blend-mode: screen;
+    transform: translateX(var(--hf-fx-x, -110%));
+  }
+  .hf-remocn-chromatic-aberration-wipe .rgb {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    opacity: calc(var(--hf-rgb-opacity, 0) * var(--hf-rgb-strength, 1));
+    background: linear-gradient(
+      90deg,
+      rgba(239, 68, 68, 0.35),
+      transparent,
+      rgba(34, 211, 238, 0.35)
+    );
+    transform: translateX(calc(var(--hf-rgb-x, 0px) * var(--hf-rgb-strength, 1)));
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    var directions = {
+      left: { ax: "1", ay: "0", t: "0", r: "1", b: "0", l: "0" },
+      right: { ax: "-1", ay: "0", t: "0", r: "0", b: "0", l: "1" },
+      up: { ax: "0", ay: "1", t: "1", r: "0", b: "0", l: "0" },
+      down: { ax: "0", ay: "-1", t: "0", r: "0", b: "1", l: "0" },
+    };
+    var accents = {
+      blue: ["#2563eb", "#7c3aed"],
+      green: ["#047857", "#34d399"],
+      violet: ["#6d28d9", "#a78bfa"],
+    };
+
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var direction = directions[pick(directions, vars.direction, "left")];
+    var accent = accents[pick(accents, vars.accent, "blue")];
+
+    var raw = typeof vars.aberration === "string" ? parseFloat(vars.aberration) : vars.aberration;
+    var aberration = typeof raw === "number" && isFinite(raw) ? Math.min(2, Math.max(0, raw)) : 1;
+
+    var roots = document.querySelectorAll(".hf-remocn-chromatic-aberration-wipe");
+    for (var i = 0; i < roots.length; i += 1) {
+      roots[i].style.setProperty("--hf-wipe-ax", direction.ax);
+      roots[i].style.setProperty("--hf-wipe-ay", direction.ay);
+      roots[i].style.setProperty("--hf-wipe-t", direction.t);
+      roots[i].style.setProperty("--hf-wipe-r", direction.r);
+      roots[i].style.setProperty("--hf-wipe-b", direction.b);
+      roots[i].style.setProperty("--hf-wipe-l", direction.l);
+      roots[i].style.setProperty("--hf-scene-a", accent[0]);
+      roots[i].style.setProperty("--hf-scene-b", accent[1]);
+      roots[i].style.setProperty("--hf-rgb-strength", String(aberration));
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-chromatic-aberration-wipe .to', { '--hf-clip-right': '100%', '--hf-to-x': '60px', '--hf-to-scale': 1.04 }, { '--hf-clip-right': '0%', '--hf-to-x': '0px', '--hf-to-scale': 1, duration: 0.9, ease: 'power3.inOut' }, startTime); tl.to('.hf-remocn-chromatic-aberration-wipe .from', { '--hf-from-x': '-70px', '--hf-from-scale': 0.96, '--hf-from-blur': '5px', duration: 0.9, ease: 'power3.inOut' }, startTime); tl.fromTo('.hf-remocn-chromatic-aberration-wipe .fx', { '--hf-fx-x': '-110%' }, { '--hf-fx-x': '110%', duration: 0.58, ease: 'power2.inOut' }, startTime + 0.18); tl.fromTo('.hf-remocn-chromatic-aberration-wipe .rgb', { '--hf-rgb-opacity': 0, '--hf-rgb-x': '-16px' }, { '--hf-rgb-opacity': 1, '--hf-rgb-x': '16px', repeat: 3, yoyo: true, duration: 0.07, ease: 'steps(1)' }, startTime + 0.32);
+-->
diff --git a/docs/public/catalog/components/chromatic-aberration-wipe/demo.html b/docs/public/catalog/components/chromatic-aberration-wipe/demo.html
new file mode 100644
index 0000000000..2be81cd50c
--- /dev/null
+++ b/docs/public/catalog/components/chromatic-aberration-wipe/demo.html
@@ -0,0 +1,181 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Chromatic Aberration Wipe - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+        /* ponytail: scale wrapper (not a GSAP target) to fill ~65% of 1920x1080 */
+        transform: scale(1.85);
+      }
+      .hf-remocn-chromatic-aberration-wipe {
+        --hf-accent: #2563eb;
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-chromatic-aberration-wipe {
+        position: relative;
+        width: 760px;
+        height: 428px;
+        overflow: hidden;
+        border-radius: 30px;
+        background: #111827;
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+      }
+      .hf-remocn-chromatic-aberration-wipe .scene {
+        position: absolute;
+        inset: 0;
+        display: grid;
+        place-items: center;
+        font-weight: 900;
+        font-size: 58px;
+        letter-spacing: -0.05em;
+        color: #fff;
+      }
+      .hf-remocn-chromatic-aberration-wipe .from {
+        background: linear-gradient(135deg, #111827, #374151);
+        transform: translate(var(--hf-from-x, 0px), var(--hf-from-y, 0px))
+          scale(var(--hf-from-scale, 1));
+        filter: blur(var(--hf-from-blur, 0px));
+      }
+      .hf-remocn-chromatic-aberration-wipe .to {
+        background: linear-gradient(135deg, #2563eb, #7c3aed);
+        transform: translate(var(--hf-to-x, 0px), var(--hf-to-y, 0px)) scale(var(--hf-to-scale, 1));
+        clip-path: inset(
+          var(--hf-clip-top, 0%) var(--hf-clip-right, 100%) var(--hf-clip-bottom, 0%)
+            var(--hf-clip-left, 0%)
+        );
+      }
+      .hf-remocn-chromatic-aberration-wipe .fx {
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
+        mix-blend-mode: screen;
+        transform: translateX(var(--hf-fx-x, -110%));
+      }
+      .hf-remocn-chromatic-aberration-wipe .rgb {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        opacity: var(--hf-rgb-opacity, 0);
+        background: linear-gradient(
+          90deg,
+          rgba(239, 68, 68, 0.35),
+          transparent,
+          rgba(34, 211, 238, 0.35)
+        );
+        transform: translateX(var(--hf-rgb-x, 0px));
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="chromatic-aberration-wipe-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-chromatic-aberration-wipe">
+          <div class="scene from">Before</div>
+          <div class="scene to">Chromatic Aberration Wipe</div>
+          <div class="fx"></div>
+          <div class="rgb"></div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-chromatic-aberration-wipe .to",
+          { "--hf-clip-right": "100%", "--hf-to-x": "60px", "--hf-to-scale": 1.04 },
+          {
+            "--hf-clip-right": "0%",
+            "--hf-to-x": "0px",
+            "--hf-to-scale": 1,
+            duration: 0.9,
+            ease: "power3.inOut",
+          },
+          startTime,
+        );
+        tl.to(
+          ".hf-remocn-chromatic-aberration-wipe .from",
+          {
+            "--hf-from-x": "-70px",
+            "--hf-from-scale": 0.96,
+            "--hf-from-blur": "5px",
+            duration: 0.9,
+            ease: "power3.inOut",
+          },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-chromatic-aberration-wipe .fx",
+          { "--hf-fx-x": "-110%" },
+          { "--hf-fx-x": "110%", duration: 0.58, ease: "power2.inOut" },
+          startTime + 0.18,
+        );
+        tl.fromTo(
+          ".hf-remocn-chromatic-aberration-wipe .rgb",
+          { "--hf-rgb-opacity": 0, "--hf-rgb-x": "-16px" },
+          {
+            "--hf-rgb-opacity": 1,
+            "--hf-rgb-x": "16px",
+            repeat: 3,
+            yoyo: true,
+            duration: 0.07,
+            ease: "steps(1)",
+          },
+          startTime + 0.32,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["chromatic-aberration-wipe-demo"] = tl;
+      </script>
+    </div>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "chromatic-aberration-wipe.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/code-accordion/code-accordion.html b/docs/public/catalog/components/code-accordion/code-accordion.html
new file mode 100644
index 0000000000..125944bfc4
--- /dev/null
+++ b/docs/public/catalog/components/code-accordion/code-accordion.html
@@ -0,0 +1,92 @@
+<!--
+  Code Accordion - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-code-accordion">
+  <div class="chrome"><span class="dot"></span><span>Code Accordion</span></div>
+  <div class="body">
+    <div class="files">index.html<br />style.css<br />timeline.js</div>
+    <div class="editor">
+      <span class="line" style="width: 92%"></span><span class="line" style="width: 72%"></span
+      ><span class="line" style="width: 84%"></span><span class="line" style="width: 58%"></span
+      ><span class="line" style="width: 78%"></span>
+    </div>
+  </div>
+  <div class="terminal">$ hyperframes render --skill=code-accordion</div>
+</div>
+
+<style>
+  .hf-remocn-code-accordion {
+    --hf-accent: #2563eb;
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-code-accordion {
+    width: 760px;
+    border-radius: 24px;
+    overflow: hidden;
+    background: #0f172a;
+    color: #dbeafe;
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  }
+  .hf-remocn-code-accordion .chrome {
+    height: 48px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 0 18px;
+    background: #111827;
+    color: #94a3b8;
+  }
+  .hf-remocn-code-accordion .dot {
+    width: 11px;
+    height: 11px;
+    border-radius: 999px;
+    background: #ef4444;
+    box-shadow:
+      18px 0 #f59e0b,
+      36px 0 #22c55e;
+  }
+  .hf-remocn-code-accordion .body {
+    display: grid;
+    grid-template-columns: 210px 1fr;
+    min-height: 340px;
+  }
+  .hf-remocn-code-accordion .files {
+    padding: 22px;
+    border-right: 1px solid rgba(148, 163, 184, 0.18);
+    color: #94a3b8;
+  }
+  .hf-remocn-code-accordion .editor {
+    padding: 22px;
+    display: grid;
+    gap: 12px;
+  }
+  .hf-remocn-code-accordion .line {
+    display: block;
+    height: 16px;
+    border-radius: 999px;
+    background: linear-gradient(90deg, #38bdf8, #a78bfa);
+    transform: scaleX(var(--hf-line, 1));
+    transform-origin: left center;
+    opacity: var(--hf-line-opacity, 1);
+  }
+  .hf-remocn-code-accordion .terminal {
+    padding: 18px 22px 24px;
+    border-top: 1px solid rgba(148, 163, 184, 0.18);
+    color: #86efac;
+    min-height: 78px;
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-code-accordion .line', { '--hf-line': 0, '--hf-line-opacity': 0 }, { '--hf-line': 1, '--hf-line-opacity': 1, duration: 0.24, stagger: 0.08, ease: 'power2.out' }, startTime); tl.fromTo('.hf-remocn-code-accordion .terminal', { opacity: 0, y: 16 }, { opacity: 1, y: 0, duration: 0.34, ease: 'power2.out' }, startTime + 0.48);
+-->
diff --git a/docs/public/catalog/components/code-accordion/demo.html b/docs/public/catalog/components/code-accordion/demo.html
new file mode 100644
index 0000000000..a0fdde49fd
--- /dev/null
+++ b/docs/public/catalog/components/code-accordion/demo.html
@@ -0,0 +1,158 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Code Accordion - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+        /* ponytail: scale wrapper (not a GSAP target) to fill ~65% of frame */
+        transform: scale(1.65);
+      }
+      .hf-remocn-code-accordion {
+        --hf-accent: #2563eb;
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-code-accordion {
+        width: 760px;
+        border-radius: 24px;
+        overflow: hidden;
+        background: #0f172a;
+        color: #dbeafe;
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+      }
+      .hf-remocn-code-accordion .chrome {
+        height: 48px;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 0 18px;
+        background: #111827;
+        color: #94a3b8;
+        font-size: 14px;
+        font-weight: 500;
+      }
+      .hf-remocn-code-accordion .dot {
+        width: 11px;
+        height: 11px;
+        border-radius: 999px;
+        background: #ef4444;
+        box-shadow:
+          18px 0 #f59e0b,
+          36px 0 #22c55e;
+      }
+      .hf-remocn-code-accordion .body {
+        display: grid;
+        grid-template-columns: 210px 1fr;
+        min-height: 340px;
+      }
+      .hf-remocn-code-accordion .files {
+        padding: 22px;
+        border-right: 1px solid rgba(148, 163, 184, 0.18);
+        color: #94a3b8;
+        font-size: 13px;
+        line-height: 1.9;
+      }
+      .hf-remocn-code-accordion .editor {
+        padding: 22px;
+        display: grid;
+        gap: 12px;
+      }
+      .hf-remocn-code-accordion .line {
+        display: block;
+        height: 16px;
+        border-radius: 999px;
+        background: linear-gradient(90deg, #38bdf8, #a78bfa);
+        transform: scaleX(var(--hf-line, 1));
+        transform-origin: left center;
+        opacity: var(--hf-line-opacity, 1);
+      }
+      .hf-remocn-code-accordion .terminal {
+        padding: 18px 22px 24px;
+        border-top: 1px solid rgba(148, 163, 184, 0.18);
+        color: #86efac;
+        min-height: 78px;
+        font-size: 13px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="code-accordion-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-code-accordion">
+          <div class="chrome"><span class="dot"></span><span>Code Accordion</span></div>
+          <div class="body">
+            <div class="files">index.html<br />style.css<br />timeline.js</div>
+            <div class="editor">
+              <span class="line" style="width: 92%"></span
+              ><span class="line" style="width: 72%"></span
+              ><span class="line" style="width: 84%"></span
+              ><span class="line" style="width: 58%"></span
+              ><span class="line" style="width: 78%"></span>
+            </div>
+          </div>
+          <div class="terminal">$ hyperframes render --skill=code-accordion</div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-code-accordion .line",
+          { "--hf-line": 0, "--hf-line-opacity": 0 },
+          {
+            "--hf-line": 1,
+            "--hf-line-opacity": 1,
+            duration: 0.24,
+            stagger: 0.08,
+            ease: "power2.out",
+          },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-code-accordion .terminal",
+          { opacity: 0, y: 16 },
+          { opacity: 1, y: 0, duration: 0.34, ease: "power2.out" },
+          startTime + 0.48,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["code-accordion-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/code-diff-wipe/__hf-variables-preview.html b/docs/public/catalog/components/code-diff-wipe/__hf-variables-preview.html
new file mode 100644
index 0000000000..2963a216fb
--- /dev/null
+++ b/docs/public/catalog/components/code-diff-wipe/__hf-variables-preview.html
@@ -0,0 +1,114 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Code Diff Wipe variables preview</title>
+    <style>
+      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #f4f4f5; }
+      #hf-vars-root { position: relative; width: 1920px; height: 1080px; }
+      #hf-vars-mount { position: absolute; inset: 0; display: grid; place-items: center; }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  </head>
+  <body>
+    <div id="hf-vars-root" data-composition-id="code-diff-wipe-variables-preview" data-start="0" data-width="1920" data-height="1080" data-duration="5" data-fps="30">
+      <div id="hf-vars-mount" class="clip" data-composition-id="code-diff-wipe" data-composition-src="./code-diff-wipe.html" data-start="0" data-duration="5" data-track-index="0" data-width="1920" data-height="1080"></div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["code-diff-wipe-variables-preview"] = gsap.timeline({ paused: true });
+    </script>
+    <script>
+      (function () {
+        var mount = document.getElementById("hf-vars-mount");
+        // The mount is filled asynchronously, and the demo script selects
+        // what it fills it with, so it cannot run before then.
+        var observer = new MutationObserver(build);
+        observer.observe(mount, { childList: true, subtree: true });
+        build();
+        function build() {
+          if (!mount.firstElementChild) return;
+          observer.disconnect();
+
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+
+        // Drive the wipe divider in sync with clip-path
+        tl.fromTo(
+          ".hf-remocn-code-diff-wipe",
+          { "--hf-divider-x": "-4px" },
+          { "--hf-divider-x": "684px", duration: 0.9, ease: "power3.inOut" },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-code-diff-wipe .to",
+          { "--hf-clip-right": "100%", "--hf-to-x": "60px", "--hf-to-scale": 1.04 },
+          {
+            "--hf-clip-right": "0%",
+            "--hf-to-x": "0px",
+            "--hf-to-scale": 1,
+            duration: 0.9,
+            ease: "power3.inOut",
+          },
+          startTime,
+        );
+        tl.to(
+          ".hf-remocn-code-diff-wipe .from",
+          {
+            "--hf-from-x": "-70px",
+            "--hf-from-scale": 0.96,
+            "--hf-from-blur": "5px",
+            duration: 0.9,
+            ease: "power3.inOut",
+          },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-code-diff-wipe .fx",
+          { "--hf-fx-x": "-110%" },
+          { "--hf-fx-x": "110%", duration: 0.58, ease: "power2.inOut" },
+          startTime + 0.18,
+        );
+        tl.fromTo(
+          ".hf-remocn-code-diff-wipe .rgb",
+          { "--hf-rgb-opacity": 0, "--hf-rgb-x": "-16px" },
+          {
+            "--hf-rgb-opacity": 1,
+            "--hf-rgb-x": "16px",
+            repeat: 3,
+            yoyo: true,
+            duration: 0.07,
+            ease: "steps(1)",
+          },
+          startTime + 0.32,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["code-diff-wipe-demo"] = tl;
+          var child = window.__timelines["code-diff-wipe-demo"];
+          delete window.__timelines["code-diff-wipe-demo"];
+          if (!child || typeof child.paused !== "function") return;
+          child.paused(false);
+          window.__timelines["code-diff-wipe-variables-preview"].add(child, 0);
+        }
+      })();
+    </script>
+<script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "code-diff-wipe.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/code-diff-wipe/code-diff-wipe.html b/docs/public/catalog/components/code-diff-wipe/code-diff-wipe.html
new file mode 100644
index 0000000000..96ec15b990
--- /dev/null
+++ b/docs/public/catalog/components/code-diff-wipe/code-diff-wipe.html
@@ -0,0 +1,167 @@
+<!--
+  Code Diff Wipe - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result as a custom property
+  the CSS consumes. The timeline recipe below is untouched by them: it keeps
+  driving one clip edge, one pair of offsets and one light sweep, and these
+  decide which way that edge travels and what it reveals.
+
+    - direction (left | right | up | down, default left): the direction the
+      reveal travels. Both scenes slide the same way and the wipe edge follows,
+      so up and down turn the horizontal wipe into a vertical one.
+    - tone (neutral | added | removed, default neutral): the incoming scene's
+      diff colour. neutral keeps the stock blue/violet, added goes green for a
+      line that landed, removed goes red for one that went away.
+    - sheen (subtle | standard | bright, default standard): brightness of the
+      white light sweep crossing the wipe edge.
+
+  On every default the result is identical to the original: a left-to-right
+  wipe into the blue/violet scene under a 0.75-alpha sheen.
+-->
+
+<div
+  class="hf-remocn-code-diff-wipe"
+  data-composition-variables='[
+    { "id": "direction", "type": "enum", "role": "motion", "label": "Direction", "description": "The direction the reveal travels; both scenes slide the same way and the wipe edge follows.", "default": "left", "options": [{ "value": "left", "label": "Left" }, { "value": "right", "label": "Right" }, { "value": "up", "label": "Up" }, { "value": "down", "label": "Down" }] },
+    { "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Diff colour of the incoming scene: neutral keeps the stock blue/violet, added goes green, removed goes red.", "default": "neutral", "options": [{ "value": "neutral", "label": "Neutral" }, { "value": "added", "label": "Added" }, { "value": "removed", "label": "Removed" }] },
+    { "id": "sheen", "type": "enum", "role": "style", "label": "Sheen", "description": "Brightness of the white light sweep that crosses the wipe edge.", "default": "standard", "options": [{ "value": "subtle", "label": "Subtle" }, { "value": "standard", "label": "Standard" }, { "value": "bright", "label": "Bright" }] }
+  ]'
+>
+  <div class="scene from">Before</div>
+  <div class="scene to">Code Diff Wipe</div>
+  <div class="fx"></div>
+  <div class="rgb"></div>
+</div>
+
+<style>
+  .hf-remocn-code-diff-wipe {
+    --hf-accent: #2563eb;
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-code-diff-wipe {
+    position: relative;
+    width: 760px;
+    height: 428px;
+    overflow: hidden;
+    border-radius: 30px;
+    background: #111827;
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+  }
+  .hf-remocn-code-diff-wipe .scene {
+    position: absolute;
+    inset: 0;
+    display: grid;
+    place-items: center;
+    font-weight: 900;
+    font-size: 58px;
+    letter-spacing: -0.05em;
+    color: #fff;
+  }
+  .hf-remocn-code-diff-wipe .from {
+    background: linear-gradient(135deg, #111827, #374151);
+    transform: translate(
+        calc(var(--hf-from-x, 0px) * var(--hf-wipe-ax, 1)),
+        calc(var(--hf-from-y, 0px) + var(--hf-from-x, 0px) * var(--hf-wipe-ay, 0))
+      )
+      scale(var(--hf-from-scale, 1));
+    filter: blur(var(--hf-from-blur, 0px));
+  }
+  .hf-remocn-code-diff-wipe .to {
+    background: linear-gradient(135deg, var(--hf-scene-a, #2563eb), var(--hf-scene-b, #7c3aed));
+    transform: translate(
+        calc(var(--hf-to-x, 0px) * var(--hf-wipe-ax, 1)),
+        calc(var(--hf-to-y, 0px) + var(--hf-to-x, 0px) * var(--hf-wipe-ay, 0))
+      )
+      scale(var(--hf-to-scale, 1));
+    clip-path: inset(
+      calc(var(--hf-clip-top, 0%) + var(--hf-clip-right, 100%) * var(--hf-wipe-t, 0))
+        calc(var(--hf-clip-right, 100%) * var(--hf-wipe-r, 1))
+        calc(var(--hf-clip-bottom, 0%) + var(--hf-clip-right, 100%) * var(--hf-wipe-b, 0))
+        calc(var(--hf-clip-left, 0%) + var(--hf-clip-right, 100%) * var(--hf-wipe-l, 0))
+    );
+  }
+  .hf-remocn-code-diff-wipe .fx {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+      90deg,
+      transparent,
+      rgba(255, 255, 255, calc(0.75 * var(--hf-fx-strength, 1))),
+      transparent
+    );
+    mix-blend-mode: screen;
+    transform: translateX(var(--hf-fx-x, -110%));
+  }
+  .hf-remocn-code-diff-wipe .rgb {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    opacity: var(--hf-rgb-opacity, 0);
+    background: linear-gradient(
+      90deg,
+      rgba(239, 68, 68, 0.35),
+      transparent,
+      rgba(34, 211, 238, 0.35)
+    );
+    transform: translateX(var(--hf-rgb-x, 0px));
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    var directions = {
+      left: { ax: "1", ay: "0", t: "0", r: "1", b: "0", l: "0" },
+      right: { ax: "-1", ay: "0", t: "0", r: "0", b: "0", l: "1" },
+      up: { ax: "0", ay: "1", t: "1", r: "0", b: "0", l: "0" },
+      down: { ax: "0", ay: "-1", t: "0", r: "0", b: "1", l: "0" },
+    };
+    var tones = {
+      neutral: ["#2563eb", "#7c3aed"],
+      added: ["#166534", "#22c55e"],
+      removed: ["#7f1d1d", "#ef4444"],
+    };
+    var sheens = { subtle: "0.4", standard: "1", bright: "1.3" };
+
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var direction = directions[pick(directions, vars.direction, "left")];
+    var tone = tones[pick(tones, vars.tone, "neutral")];
+    var sheen = sheens[pick(sheens, vars.sheen, "standard")];
+
+    var roots = document.querySelectorAll(".hf-remocn-code-diff-wipe");
+    for (var i = 0; i < roots.length; i += 1) {
+      roots[i].style.setProperty("--hf-wipe-ax", direction.ax);
+      roots[i].style.setProperty("--hf-wipe-ay", direction.ay);
+      roots[i].style.setProperty("--hf-wipe-t", direction.t);
+      roots[i].style.setProperty("--hf-wipe-r", direction.r);
+      roots[i].style.setProperty("--hf-wipe-b", direction.b);
+      roots[i].style.setProperty("--hf-wipe-l", direction.l);
+      roots[i].style.setProperty("--hf-scene-a", tone[0]);
+      roots[i].style.setProperty("--hf-scene-b", tone[1]);
+      roots[i].style.setProperty("--hf-fx-strength", sheen);
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-code-diff-wipe .to', { '--hf-clip-right': '100%', '--hf-to-x': '60px', '--hf-to-scale': 1.04 }, { '--hf-clip-right': '0%', '--hf-to-x': '0px', '--hf-to-scale': 1, duration: 0.9, ease: 'power3.inOut' }, startTime); tl.to('.hf-remocn-code-diff-wipe .from', { '--hf-from-x': '-70px', '--hf-from-scale': 0.96, '--hf-from-blur': '5px', duration: 0.9, ease: 'power3.inOut' }, startTime); tl.fromTo('.hf-remocn-code-diff-wipe .fx', { '--hf-fx-x': '-110%' }, { '--hf-fx-x': '110%', duration: 0.58, ease: 'power2.inOut' }, startTime + 0.18); tl.fromTo('.hf-remocn-code-diff-wipe .rgb', { '--hf-rgb-opacity': 0, '--hf-rgb-x': '-16px' }, { '--hf-rgb-opacity': 1, '--hf-rgb-x': '16px', repeat: 3, yoyo: true, duration: 0.07, ease: 'steps(1)' }, startTime + 0.32);
+-->
diff --git a/docs/public/catalog/components/code-diff-wipe/demo.html b/docs/public/catalog/components/code-diff-wipe/demo.html
new file mode 100644
index 0000000000..9cb676cc76
--- /dev/null
+++ b/docs/public/catalog/components/code-diff-wipe/demo.html
@@ -0,0 +1,315 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Code Diff Wipe - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f4f4f5;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        /* ponytail: CSS scale on .demo-frame — GSAP only animates .hf-remocn-code-diff-wipe children */
+        transform: scale(2.05);
+      }
+      .hf-remocn-code-diff-wipe {
+        --hf-accent: #2563eb;
+        --hf-ink: #18181b;
+        --hf-muted: #71717a;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: "ui-monospace", "SFMono-Regular", "Menlo", "Monaco", monospace;
+      }
+      .hf-remocn-code-diff-wipe {
+        position: relative;
+        width: 680px;
+        height: 420px;
+        overflow: hidden;
+        border-radius: 14px;
+        background: #18181b;
+        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.06);
+      }
+      /* Title bar chrome */
+      .hf-remocn-code-diff-wipe .chrome {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 38px;
+        background: #27272a;
+        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
+        display: flex;
+        align-items: center;
+        padding: 0 14px;
+        gap: 7px;
+        z-index: 10;
+      }
+      .hf-remocn-code-diff-wipe .chrome .dot {
+        width: 11px;
+        height: 11px;
+        border-radius: 50%;
+      }
+      .hf-remocn-code-diff-wipe .chrome .dot:nth-child(1) { background: #ef4444; }
+      .hf-remocn-code-diff-wipe .chrome .dot:nth-child(2) { background: #f59e0b; }
+      .hf-remocn-code-diff-wipe .chrome .dot:nth-child(3) { background: #22c55e; }
+      .hf-remocn-code-diff-wipe .chrome .filename {
+        margin-left: 8px;
+        font-size: 11px;
+        color: #71717a;
+        font-family: Inter, system-ui, sans-serif;
+        letter-spacing: 0.01em;
+      }
+      /* Code panels */
+      .hf-remocn-code-diff-wipe .scene {
+        position: absolute;
+        inset: 0;
+        padding: 52px 0 0 0;
+      }
+      .hf-remocn-code-diff-wipe .code-body {
+        padding: 18px 24px;
+        font-size: 13.5px;
+        line-height: 1.75;
+      }
+      .hf-remocn-code-diff-wipe .line {
+        display: flex;
+        gap: 16px;
+        padding: 1px 0;
+        border-radius: 3px;
+        white-space: pre;
+      }
+      .hf-remocn-code-diff-wipe .line .gutter {
+        width: 20px;
+        text-align: right;
+        color: #52525b;
+        font-size: 11.5px;
+        flex-shrink: 0;
+        padding-top: 1px;
+      }
+      .hf-remocn-code-diff-wipe .line .marker {
+        width: 12px;
+        flex-shrink: 0;
+        font-weight: 600;
+      }
+      .hf-remocn-code-diff-wipe .line .code {
+        color: #e4e4e7;
+      }
+      /* From panel — dark neutral */
+      .hf-remocn-code-diff-wipe .from {
+        background: #18181b;
+        transform: translate(var(--hf-from-x, 0px), var(--hf-from-y, 0px))
+          scale(var(--hf-from-scale, 1));
+        filter: blur(var(--hf-from-blur, 0px));
+      }
+      .hf-remocn-code-diff-wipe .from .line.removed {
+        background: rgba(239, 68, 68, 0.12);
+      }
+      .hf-remocn-code-diff-wipe .from .line.removed .marker { color: #f87171; }
+      .hf-remocn-code-diff-wipe .from .line.removed .code { color: #fca5a5; }
+      /* To panel — same bg, green accents for added lines */
+      .hf-remocn-code-diff-wipe .to {
+        background: #18181b;
+        transform: translate(var(--hf-to-x, 0px), var(--hf-to-y, 0px)) scale(var(--hf-to-scale, 1));
+        clip-path: inset(
+          var(--hf-clip-top, 0%) var(--hf-clip-right, 100%) var(--hf-clip-bottom, 0%)
+            var(--hf-clip-left, 0%)
+        );
+      }
+      .hf-remocn-code-diff-wipe .to .line.added {
+        background: rgba(34, 197, 94, 0.12);
+      }
+      .hf-remocn-code-diff-wipe .to .line.added .marker { color: #4ade80; }
+      .hf-remocn-code-diff-wipe .to .line.added .code { color: #86efac; }
+      /* Syntax colors shared */
+      .hf-remocn-code-diff-wipe .kw { color: #c084fc; }
+      .hf-remocn-code-diff-wipe .fn { color: #60a5fa; }
+      .hf-remocn-code-diff-wipe .str { color: #fbbf24; }
+      .hf-remocn-code-diff-wipe .cm { color: #52525b; }
+      /* Wipe flash overlay */
+      .hf-remocn-code-diff-wipe .fx {
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
+        mix-blend-mode: screen;
+        transform: translateX(var(--hf-fx-x, -110%));
+        pointer-events: none;
+      }
+      /* RGB fringe */
+      .hf-remocn-code-diff-wipe .rgb {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        opacity: var(--hf-rgb-opacity, 0);
+        background: linear-gradient(
+          90deg,
+          rgba(239, 68, 68, 0.25),
+          transparent,
+          rgba(34, 211, 238, 0.25)
+        );
+        transform: translateX(var(--hf-rgb-x, 0px));
+      }
+      /* Wipe divider line */
+      .hf-remocn-code-diff-wipe .divider {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        width: 2px;
+        background: rgba(255, 255, 255, 0.18);
+        left: var(--hf-divider-x, -4px);
+        pointer-events: none;
+        z-index: 5;
+        box-shadow: 0 0 12px rgba(255, 255, 255, 0.3);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="code-diff-wipe-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-code-diff-wipe">
+          <!-- Title bar chrome -->
+          <div class="chrome">
+            <div class="dot"></div>
+            <div class="dot"></div>
+            <div class="dot"></div>
+            <span class="filename">utils.ts</span>
+          </div>
+
+          <!-- BEFORE panel (old code, red diffs) -->
+          <div class="scene from">
+            <div class="code-body">
+              <div class="line"><span class="gutter">1</span><span class="marker"> </span><span class="code"><span class="kw">function</span> <span class="fn">fetchUser</span>(id: <span class="kw">string</span>) {</span></div>
+              <div class="line removed"><span class="gutter">2</span><span class="marker">-</span><span class="code">  <span class="kw">const</span> res = <span class="kw">await</span> <span class="fn">fetch</span>(<span class="str">`/api/user/${id}`</span>)</span></div>
+              <div class="line removed"><span class="gutter">3</span><span class="marker">-</span><span class="code">  <span class="kw">return</span> res.<span class="fn">json</span>()</span></div>
+              <div class="line"><span class="gutter">4</span><span class="marker"> </span><span class="code">}</span></div>
+              <div class="line"><span class="gutter">5</span><span class="marker"> </span><span class="code"></span></div>
+              <div class="line removed"><span class="gutter">6</span><span class="marker">-</span><span class="code"><span class="kw">export</span> <span class="kw">const</span> cache = <span class="kw">new</span> <span class="fn">Map</span>()</span></div>
+              <div class="line"><span class="gutter">7</span><span class="marker"> </span><span class="code"></span></div>
+              <div class="line"><span class="gutter">8</span><span class="marker"> </span><span class="code"><span class="cm">// TODO: handle errors</span></span></div>
+              <div class="line"><span class="gutter">9</span><span class="marker"> </span><span class="code"><span class="kw">export</span> <span class="kw">default</span> { <span class="fn">fetchUser</span> }</span></div>
+            </div>
+          </div>
+
+          <!-- AFTER panel (new code, green diffs) — wiped in -->
+          <div class="scene to">
+            <div class="code-body">
+              <div class="line"><span class="gutter">1</span><span class="marker"> </span><span class="code"><span class="kw">async function</span> <span class="fn">fetchUser</span>(id: <span class="kw">string</span>) {</span></div>
+              <div class="line added"><span class="gutter">2</span><span class="marker">+</span><span class="code">  <span class="kw">if</span> (cache.<span class="fn">has</span>(id)) <span class="kw">return</span> cache.<span class="fn">get</span>(id)</span></div>
+              <div class="line added"><span class="gutter">3</span><span class="marker">+</span><span class="code">  <span class="kw">const</span> res = <span class="kw">await</span> <span class="fn">fetch</span>(<span class="str">`/api/user/${id}`</span>)</span></div>
+              <div class="line"><span class="gutter">4</span><span class="marker"> </span><span class="code">}</span></div>
+              <div class="line"><span class="gutter">5</span><span class="marker"> </span><span class="code"></span></div>
+              <div class="line added"><span class="gutter">6</span><span class="marker">+</span><span class="code"><span class="kw">const</span> cache = <span class="kw">new</span> <span class="fn">Map</span>&lt;<span class="kw">string</span>, <span class="kw">unknown</span>&gt;()</span></div>
+              <div class="line"><span class="gutter">7</span><span class="marker"> </span><span class="code"></span></div>
+              <div class="line"><span class="gutter">8</span><span class="marker"> </span><span class="code"><span class="cm">// cache hit avoids redundant fetches</span></span></div>
+              <div class="line"><span class="gutter">9</span><span class="marker"> </span><span class="code"><span class="kw">export</span> <span class="kw">default</span> { <span class="fn">fetchUser</span>, cache }</span></div>
+            </div>
+          </div>
+
+          <!-- Wipe divider line -->
+          <div class="divider"></div>
+
+          <!-- Flash sweep -->
+          <div class="fx"></div>
+          <!-- RGB fringe -->
+          <div class="rgb"></div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+
+        // Drive the wipe divider in sync with clip-path
+        tl.fromTo(
+          ".hf-remocn-code-diff-wipe",
+          { "--hf-divider-x": "-4px" },
+          { "--hf-divider-x": "684px", duration: 0.9, ease: "power3.inOut" },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-code-diff-wipe .to",
+          { "--hf-clip-right": "100%", "--hf-to-x": "60px", "--hf-to-scale": 1.04 },
+          {
+            "--hf-clip-right": "0%",
+            "--hf-to-x": "0px",
+            "--hf-to-scale": 1,
+            duration: 0.9,
+            ease: "power3.inOut",
+          },
+          startTime,
+        );
+        tl.to(
+          ".hf-remocn-code-diff-wipe .from",
+          {
+            "--hf-from-x": "-70px",
+            "--hf-from-scale": 0.96,
+            "--hf-from-blur": "5px",
+            duration: 0.9,
+            ease: "power3.inOut",
+          },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-code-diff-wipe .fx",
+          { "--hf-fx-x": "-110%" },
+          { "--hf-fx-x": "110%", duration: 0.58, ease: "power2.inOut" },
+          startTime + 0.18,
+        );
+        tl.fromTo(
+          ".hf-remocn-code-diff-wipe .rgb",
+          { "--hf-rgb-opacity": 0, "--hf-rgb-x": "-16px" },
+          {
+            "--hf-rgb-opacity": 1,
+            "--hf-rgb-x": "16px",
+            repeat: 3,
+            yoyo: true,
+            duration: 0.07,
+            ease: "steps(1)",
+          },
+          startTime + 0.32,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["code-diff-wipe-demo"] = tl;
+      </script>
+    </div>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "code-diff-wipe.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/code-terminal-run/README.md b/docs/public/catalog/components/code-terminal-run/README.md
new file mode 100644
index 0000000000..11b77b390b
--- /dev/null
+++ b/docs/public/catalog/components/code-terminal-run/README.md
@@ -0,0 +1,121 @@
+# code-terminal-run
+
+A token-chrome terminal panel runs one command. The prompt line types itself
+deterministically behind an integer-cycle blinking caret (the typed-prompt
+text-at-time law), the command executes after a beat, output lines print one
+per cue with a leading beat, and a fresh prompt with a solid caret appears
+once the run completes. Then the panel holds still.
+
+5s authored, elastic HOLD, exit `none` by default.
+
+## Files
+
+- `code-terminal-run.html`: the mountable sub-composition (install target:
+  `compositions/components/code-terminal-run.html`).
+- `registry-item.json`: registry metadata and the variables block.
+- `demo.html`: standalone 1920x1080 host that mounts the primitive with
+  non-default variables.
+
+## Variables
+
+| id             | type   | default | notes                                                                                    |
+| -------------- | ------ | ------- | ---------------------------------------------------------------------------------------- |
+| `prompt_glyph` | string | `$`     | leading glyph on the command and trailing prompt; empty string hides it                  |
+| `cadence`      | enum   | `human` | `uniform` fixed steps or `human` seeded 1-3 char chunks (fixed LCG seed)                 |
+| `cues`         | string | ``      | comma seconds from mount start; cue N sets when output line N prints                     |
+| `accent`       | enum   | `green` | glyph + caret: `green` maps to `--brand`, `blue` to `--accent`, `violet` to `--accent-2` |
+| `exit`         | enum   | `none`  | `none` holds the final frame; `fade` and `up` release the stage                          |
+
+Envelope: panel settles over 0.5s, typing runs from 0.4s at its natural
+cadence, an execute beat follows, output lines print (defaults: a 0.3s leading
+beat after execute, then one line per 0.3s), and the trailing prompt lands.
+The whole schedule compresses proportionally only if it would overflow
+`duration - OUT`; HOLD is the sole elastic phase (never `timeScale`). The
+`command-run` sync point marks the execute beat, about 3.1s at defaults.
+
+## The slot mechanism
+
+The primitive ships one named slot inside its `<template>`:
+
+```html
+<div class="ctr-slot" data-slot="content">
+  <div data-terminal="command">...</div>
+  <div data-terminal="output">...</div>
+  ...
+</div>
+```
+
+The default children are a generic build-tool sample (no product branding).
+To show your own run, install the component and **replace the children of the
+`[data-slot="content"]` element in your installed copy** (the runtime clones
+only the primitive's own template on mount, so slot content lives in the
+component file, not on the host clip).
+
+Rules:
+
+- Keep exactly one `[data-terminal="command"]` element. Its full text is what
+  gets typed; the caret is appended automatically.
+- Add any number of `[data-terminal="output"]` elements, in print order. Each
+  prints on its cue (or on the authored rhythm when `cues` is empty).
+- Token coloring is authored, not parsed: wrap substrings in spans with these
+  classes and each routes to one contract token.
+
+| class      | token        | use for                        |
+| ---------- | ------------ | ------------------------------ |
+| `ct-str`   | `--brand`    | quoted strings                 |
+| `ct-flag`  | `--accent`   | flags and options              |
+| `ct-path`  | `--accent-2` | file paths and targets         |
+| `ct-ok`    | `--brand`    | success markers in output      |
+| `ct-muted` | `--muted`    | dim annotations (sizes, times) |
+
+Typing reveals characters across the command's text nodes in document order,
+so the spans keep their colors mid-word and every seek direction renders the
+same colored string for the same time.
+
+## Worked example
+
+Install, then author your own run:
+
+```bash
+npx hyperframes add code-terminal-run
+```
+
+In `compositions/components/code-terminal-run.html`, replace the slot
+children:
+
+```html
+<div class="ctr-slot" data-slot="content">
+  <div data-terminal="command">
+    deploy <span class="ct-path">./site</span> <span class="ct-flag">--region</span>
+    <span class="ct-str">"eu-west"</span>
+  </div>
+  <div data-terminal="output"><span class="ct-muted">-</span> uploading 14 files</div>
+  <div data-terminal="output"><span class="ct-ok">ok</span> live in 900 ms</div>
+</div>
+```
+
+Mount it from a host composition like any sub-composition:
+
+```html
+<div
+  class="clip"
+  data-composition-id="code-terminal-run"
+  data-composition-src="./components/code-terminal-run.html"
+  data-variable-values='{"prompt_glyph":">","cues":"2.6,3.1","accent":"blue"}'
+  data-start="2"
+  data-duration="5"
+  data-track-index="0"
+></div>
+```
+
+Elastic root: no `data-width`/`data-height`; it fills whatever box the host
+clip gives it. Timeline registers under the literal `code-terminal-run` key.
+
+## Notes
+
+- Deterministic: fixed LCG seed `0x51ec0ded`, one chars-at-time row table
+  built before the timeline registers; nothing is incremental.
+- Output lines occupy layout from mount (they print via opacity), so the
+  panel never reflows mid-run.
+- The hold is a finite drift cycle followed by authored stillness, never a
+  repeating tween.
diff --git a/docs/public/catalog/components/code-terminal-run/code-terminal-run.html b/docs/public/catalog/components/code-terminal-run/code-terminal-run.html
new file mode 100644
index 0000000000..f876f377b4
--- /dev/null
+++ b/docs/public/catalog/components/code-terminal-run/code-terminal-run.html
@@ -0,0 +1,560 @@
+<!doctype html>
+<!--
+  code-terminal-run: HyperFrames video primitive (product demo / terminal)
+
+  A token-chrome terminal panel runs one command: the prompt line types itself
+  deterministically (the typed-prompt law: one text-at-time row table built
+  synchronously before the timeline registers, an integer-cycle blinking
+  caret), the command "executes" after a beat, and output lines print one per
+  cue with a leading beat. A fresh prompt line with a solid caret appears once
+  the run completes, then the panel holds still.
+
+  Token coloring is authored, not parsed: the slot content carries plain spans
+  (ct-str, ct-flag, ct-path, ct-ok, ct-muted) and CSS routes each class to a
+  contract token. Typing preserves those spans by revealing characters across
+  the command element's text nodes in document order, so the same character
+  count always renders the same colored string in either seek direction.
+
+  Slot (see README.md for a worked example):
+    - [data-slot="content"]: the authored command + output lines. Replace the
+      children of this element in your installed copy. It must contain one
+      [data-terminal="command"] element (inline spans allowed) and any number
+      of [data-terminal="output"] elements, in print order. Default: a generic
+      build-tool sample, no product branding.
+
+  Variables (declared in data-composition-variables below):
+    - prompt_glyph (string, default "$"): leading glyph on the command and the
+      trailing prompt line; empty string hides it.
+    - cadence ("uniform" | "human", default "human"): keystroke rhythm.
+      uniform = one character per fixed step; human = seeded 1-3 char chunks
+      with varied gaps (fixed LCG seed, fully deterministic).
+    - cues (string, default ""): comma-separated seconds relative to mount
+      start; cue N sets when output line N prints. Empty = authored rhythm
+      (a leading beat after execute, then one line per step).
+    - accent (green | blue | violet, default "green"): glyph + caret color.
+    - exit ("none" | "fade" | "up", default "none"): frame roots own
+      transitions; none holds the end frame.
+
+  Envelope, authored 5s, fixed IN/OUT with elastic HOLD only (never
+  gsap.timeScale()): panel settles over 0.5s, typing runs from 0.4s at its
+  natural cadence, execute beat, output prints, trailing prompt; the whole
+  schedule compresses proportionally only if it would overflow
+  duration - OUT. HOLD absorbs all extra duration (solid caret, barely-there
+  drift ending in stillness). OUT exists only when exit != none.
+
+  Mount contract: mountable sub-composition; the runtime clones only this
+  <template>. #root is elastic (no data-width/height, container-type: size),
+  styled via #root only, and registers one paused timeline under the literal
+  "code-terminal-run" key.
+-->
+<html
+  lang="en"
+  data-composition-id="code-terminal-run"
+  data-composition-duration="5"
+  data-composition-variables='[
+    { "id": "prompt_glyph", "type": "string", "role": "style", "label": "Prompt glyph", "description": "Leading glyph before the command and the trailing prompt. Empty string hides it.", "default": "$" },
+    { "id": "cadence", "type": "enum", "role": "timing", "label": "Cadence", "description": "Keystroke rhythm: uniform fixed steps or seeded human chunks.", "default": "human", "options": [{ "value": "uniform", "label": "Uniform" }, { "value": "human", "label": "Human" }] },
+    { "id": "cues", "type": "string", "role": "timing", "label": "Cues", "description": "Comma-separated seconds relative to mount start; cue N sets when output line N prints. Empty uses the authored rhythm.", "default": "" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Color of the prompt glyph and caret.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Outgoing transition. Frame roots own transitions; none holds the end frame.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Code Terminal Run</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="code-terminal-run" data-duration="5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            pointer-events: none;
+          }
+
+          .ctr-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .ctr-stage {
+            width: 84cqw;
+            max-width: 84cqw;
+            will-change: transform, opacity;
+          }
+
+          .ctr-panel {
+            overflow: hidden;
+            border: 0.16cqmin solid color-mix(in srgb, var(--border, #475569) 72%, transparent);
+            border-radius: var(--radius, 2.4cqmin);
+            background: color-mix(in srgb, var(--surface, #0b1016) 96%, var(--ctr-accent));
+            box-shadow: 0 3cqh 9cqh color-mix(in srgb, var(--bg, #000000) 38%, transparent);
+          }
+
+          .ctr-bar {
+            display: flex;
+            align-items: center;
+            gap: var(--space-1, 1.2cqw);
+            padding: var(--space-1, 1.6cqh) var(--space-2, 2.4cqw);
+            border-bottom: 0.14cqmin solid
+              color-mix(in srgb, var(--border, #475569) 55%, transparent);
+            background: color-mix(in srgb, var(--surface, #0b1016) 88%, var(--bg, #000000));
+          }
+
+          .ctr-dot {
+            width: 1.5cqmin;
+            aspect-ratio: 1;
+            border-radius: 50%;
+            background: color-mix(in srgb, var(--muted, #94a3b8) 52%, transparent);
+          }
+
+          .ctr-body {
+            padding: var(--space-2, 3cqh) var(--space-2, 3cqw);
+            min-height: 40cqh;
+          }
+
+          .ctr-slot {
+            display: block;
+          }
+
+          [data-terminal="command"],
+          [data-terminal="output"],
+          .ctr-tail {
+            font-size: var(--ctr-font-size, min(2.6cqw, 5.4cqh));
+            font-weight: 500;
+            line-height: 1.6;
+            white-space: pre-wrap;
+            overflow-wrap: anywhere;
+          }
+
+          [data-terminal="command"]::before,
+          .ctr-tail::before {
+            content: var(--ctr-glyph, "$");
+            margin-right: var(--ctr-glyph-gap, 0.9ch);
+            color: var(--ctr-accent);
+            font-weight: 600;
+          }
+
+          /* Authored token coloring: spans in the slot content, no parser.
+             Each class routes to one contract token. */
+          .ct-str {
+            color: var(--brand, #71f5a7);
+          }
+
+          .ct-flag {
+            color: var(--ctr-accent-token, var(--accent, #61a8ff));
+          }
+
+          .ct-path {
+            color: var(--accent-2, #c5a3ff);
+          }
+
+          .ct-ok {
+            color: var(--brand, #71f5a7);
+            font-weight: 600;
+          }
+
+          .ct-muted {
+            color: var(--muted, #94a3b8);
+          }
+
+          .ctr-caret {
+            display: inline-block;
+            width: 0.55ch;
+            height: 1.05em;
+            margin-left: 0.08ch;
+            background: var(--ctr-accent);
+            vertical-align: text-bottom;
+            will-change: opacity;
+          }
+        </style>
+
+        <div
+          id="code-terminal-run-clip"
+          class="ctr-clip clip"
+          data-start="0"
+          data-duration="5"
+          data-track-index="0"
+        >
+          <div class="ctr-stage" role="img">
+            <div class="ctr-panel">
+              <div class="ctr-bar" aria-hidden="true">
+                <span class="ctr-dot"></span>
+                <span class="ctr-dot"></span>
+                <span class="ctr-dot"></span>
+              </div>
+              <div class="ctr-body">
+                <div class="ctr-slot" data-slot="content">
+                  <!-- SLOT "content": replace the children of this element with
+                       your own command + output lines. Keep one
+                       [data-terminal="command"] and any number of
+                       [data-terminal="output"] elements, in print order. -->
+                  <div data-terminal="command">
+                    run build <span class="ct-path">src/app</span>
+                    <span class="ct-flag">--minify</span> <span class="ct-flag">--out</span>
+                    <span class="ct-str">"dist/app"</span>
+                  </div>
+                  <div data-terminal="output">
+                    <span class="ct-muted">-</span> resolving 128 modules
+                  </div>
+                  <div data-terminal="output">
+                    <span class="ct-muted">-</span> bundling <span class="ct-path">src/app</span>
+                  </div>
+                  <div data-terminal="output">
+                    <span class="ct-ok">ok</span> 128 modules in 412 ms
+                  </div>
+                  <div data-terminal="output">
+                    <span class="ct-ok">ok</span> wrote <span class="ct-path">dist/app</span>
+                    <span class="ct-muted">(96 kB)</span>
+                  </div>
+                </div>
+                <div class="ctr-tail" aria-hidden="true"><span class="ctr-caret"></span></div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".ctr-stage");
+            var slot = root.querySelector('[data-slot="content"]');
+            var commandElement = slot ? slot.querySelector('[data-terminal="command"]') : null;
+            var outputElements = slot
+              ? Array.prototype.slice.call(slot.querySelectorAll('[data-terminal="output"]'))
+              : [];
+            var tailElement = root.querySelector(".ctr-tail");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var promptGlyph = vars.prompt_glyph == null ? "$" : String(vars.prompt_glyph);
+            var cadence = vars.cadence === "uniform" ? "uniform" : "human";
+            var exitMode = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            // The runtime mirrors every composition variable as a --<id>
+            // custom property (host inline style + a compiled rule), so the
+            // accent VARIABLE shadows the --accent contract TOKEN with its
+            // enum keyword whenever the caller passes variables. Theme packs
+            // re-declare --accent with !important on the same elements and
+            // stay clean; only the unthemed mirror leaks through. Detect
+            // exactly that leak (the computed token IS an enum keyword) and
+            // pin the token's exact contract fallback instead, keeping live
+            // var() resolution everywhere else.
+            var accentToken = "var(--accent, #61a8ff)";
+            var computedAccent = getComputedStyle(root).getPropertyValue("--accent").trim();
+            if (
+              computedAccent === "green" ||
+              computedAccent === "blue" ||
+              computedAccent === "violet"
+            ) {
+              accentToken = "#61a8ff";
+            }
+            root.style.setProperty("--ctr-accent-token", accentToken);
+
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: accentToken,
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            root.style.setProperty("--ctr-accent", accentColors[accent]);
+            // JSON.stringify yields a valid CSS quoted string for content:.
+            root.style.setProperty("--ctr-glyph", JSON.stringify(promptGlyph));
+            if (promptGlyph === "") root.style.setProperty("--ctr-glyph-gap", "0ch");
+
+            var cueList = String(vars.cues == null ? "" : vars.cues)
+              .split(",")
+              .map(function (token) {
+                return parseFloat(token);
+              })
+              .filter(function (value) {
+                return isFinite(value) && value >= 0;
+              })
+              .sort(function (a, b) {
+                return a - b;
+              });
+
+            var ENTER = 0.5;
+            var TYPE_START = 0.4;
+            var EXEC_BEAT = 0.22;
+            var LEAD_BEAT = 0.3;
+            var OUT_STEP = 0.3;
+            var TAIL_GAP = 0.35;
+            var PRINT = 0.12;
+            var OUT_BASE = 0.45;
+            var STILLNESS = 0.3;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "5"));
+            var OUT = exitMode === "none" ? 0 : Math.min(OUT_BASE, duration * 0.2);
+            var maxEnd = Math.max(TYPE_START + 0.3, duration - OUT - STILLNESS);
+
+            // Fixed-seed LCG: the only randomness source, consumed in one
+            // deterministic order during this synchronous build.
+            var lcgState = 0x51ec0ded;
+            function rnd() {
+              lcgState = (Math.imul(1664525, lcgState) + 1013904223) >>> 0;
+              return lcgState / 4294967296;
+            }
+            function chunksOf(word) {
+              if (cadence === "uniform") return Array.from(word);
+              var out = [];
+              var i = 0;
+              while (i < word.length) {
+                var n = 1 + Math.floor(rnd() * 3);
+                out.push(word.slice(i, i + n));
+                i += n;
+              }
+              return out;
+            }
+            function chunkGap(chunk) {
+              if (cadence === "uniform") return chunk.length * 0.05;
+              return chunk.length * (0.04 + rnd() * 0.03);
+            }
+
+            // Typing preserves the authored coloring spans: characters reveal
+            // across the command's text nodes in document order, so a given
+            // count always renders the same colored string in either seek
+            // direction. The caret is appended last, after node collection,
+            // so empty trailing nodes keep it hugging the visible end.
+            var textNodes = [];
+            if (commandElement) {
+              var walker = document.createTreeWalker(commandElement, NodeFilter.SHOW_TEXT, null);
+              while (walker.nextNode()) {
+                textNodes.push({ node: walker.currentNode, full: walker.currentNode.data });
+              }
+            }
+            var fullText = textNodes
+              .map(function (entry) {
+                return entry.full;
+              })
+              .join("");
+            function showChars(count) {
+              var remaining = count;
+              for (var i = 0; i < textNodes.length; i += 1) {
+                var entry = textNodes[i];
+                var take = Math.min(entry.full.length, Math.max(0, remaining));
+                entry.node.data = entry.full.slice(0, take);
+                remaining -= entry.full.length;
+              }
+            }
+            var caretElement = null;
+            if (commandElement) {
+              caretElement = document.createElement("span");
+              caretElement.className = "ctr-caret";
+              caretElement.setAttribute("aria-hidden", "true");
+              commandElement.appendChild(caretElement);
+            }
+            stage.setAttribute("aria-label", (promptGlyph + " " + fullText).trim());
+
+            // The complete chars-at-time table. Built exactly once; the
+            // timeline only ever reads it (the typed-prompt law).
+            var rows = [{ t: 0, n: 0 }];
+            (function buildRows() {
+              var t = TYPE_START;
+              var n = 0;
+              fullText.split(/(\s+)/).forEach(function (segment) {
+                if (segment === "") return;
+                if (/^\s+$/.test(segment)) {
+                  t += cadence === "uniform" ? 0.11 : 0.1 + rnd() * 0.1;
+                  n += segment.length;
+                  rows.push({ t: t, n: n });
+                  return;
+                }
+                chunksOf(segment).forEach(function (chunk) {
+                  t += chunkGap(chunk);
+                  n += chunk.length;
+                  rows.push({ t: t, n: n });
+                });
+              });
+            })();
+
+            // Natural schedule: type, execute beat, one output per step after
+            // a leading beat, then the trailing prompt.
+            var typeEnd = Math.max(rows[rows.length - 1].t, TYPE_START + 0.01);
+            var execAt = typeEnd + EXEC_BEAT;
+            var outAts = outputElements.map(function (element, index) {
+              return execAt + LEAD_BEAT + index * OUT_STEP;
+            });
+            var tailAt = (outAts.length > 0 ? outAts[outAts.length - 1] : execAt) + TAIL_GAP;
+
+            // Compress the whole schedule proportionally only if it would
+            // overflow the window before OUT; extra duration becomes HOLD,
+            // never timeScale.
+            var naturalEnd = tailAt + PRINT;
+            if (naturalEnd > maxEnd) {
+              var factor = (maxEnd - TYPE_START) / (naturalEnd - TYPE_START);
+              var squeeze = function (time) {
+                return time <= TYPE_START ? time : TYPE_START + (time - TYPE_START) * factor;
+              };
+              rows.forEach(function (row) {
+                row.t = squeeze(row.t);
+              });
+              typeEnd = Math.max(rows[rows.length - 1].t, TYPE_START + 0.01);
+              execAt = squeeze(execAt);
+              outAts = outAts.map(squeeze);
+              tailAt = squeeze(tailAt);
+            }
+
+            // Cue overrides: cue N pins output line N, clamped after execute
+            // and inside the window; un-cued lines follow the previous line.
+            if (cueList.length > 0) {
+              var previous = execAt + LEAD_BEAT - OUT_STEP;
+              outAts = outAts.map(function (defaultAt, index) {
+                var at = cueList[index] != null ? cueList[index] : previous + OUT_STEP;
+                at = Math.max(execAt + 0.05, Math.min(maxEnd - PRINT, at));
+                at = Math.max(at, previous + 0.05);
+                previous = at;
+                return at;
+              });
+              tailAt = (outAts.length > 0 ? outAts[outAts.length - 1] : execAt) + TAIL_GAP;
+            }
+            tailAt = Math.max(execAt + 0.1, Math.min(maxEnd - PRINT, tailAt));
+
+            // 1ms tolerance: GSAP snaps a tween's end value below the row
+            // table's accumulated float times, far under one frame.
+            function charsAt(time) {
+              for (var i = rows.length - 1; i >= 0; i -= 1) {
+                if (time >= rows[i].t - 0.001) return rows[i].n;
+              }
+              return 0;
+            }
+
+            // Fit the mono size to the widest line and the line count.
+            var lineElements = [commandElement].concat(outputElements, [tailElement]);
+            var maxLength = lineElements.reduce(function (best, element) {
+              if (!element) return best;
+              var length = (element === commandElement ? fullText : element.textContent).length;
+              return Math.max(best, length + promptGlyph.length + 3);
+            }, 12);
+            var fittedCqw = Math.max(2, Math.min(3.2, 108 / maxLength));
+            var cappedCqh = Math.max(3.2, Math.min(6.4, 46 / (lineElements.length * 1.6)));
+            root.style.setProperty(
+              "--ctr-font-size",
+              "min(" + fittedCqw.toFixed(3) + "cqw, " + cappedCqh.toFixed(3) + "cqh)",
+            );
+
+            gsap.set(stage, { opacity: 0, y: "2.6cqh" });
+            if (outputElements.length > 0) gsap.set(outputElements, { opacity: 0 });
+            if (tailElement) gsap.set(tailElement, { opacity: 0 });
+            showChars(0);
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: one panel settle, then the table drives every typed frame.
+            tl.to(stage, { opacity: 1, duration: ENTER, ease: "power2.out" }, 0);
+            tl.to(stage, { y: "0cqh", duration: ENTER, ease: "power3.out" }, 0);
+
+            var typeDriver = { t: 0 };
+            tl.to(
+              typeDriver,
+              {
+                t: typeEnd,
+                duration: typeEnd,
+                ease: "none",
+                onUpdate: function () {
+                  showChars(charsAt(typeDriver.t));
+                },
+              },
+              0,
+            );
+
+            // Caret: integer sine cycles across exactly the typing window,
+            // then a pin to solid, then hidden at execute (the command has
+            // been submitted; the trailing prompt owns the caret from there).
+            if (caretElement) {
+              var cycles = Math.max(1, Math.round(typeEnd / 0.9));
+              var blink = { p: 0 };
+              tl.to(
+                blink,
+                {
+                  p: Math.PI * 2 * cycles,
+                  duration: typeEnd,
+                  ease: "none",
+                  onUpdate: function () {
+                    // >= 0 keeps phase 0 identical to the caret's unrendered
+                    // initial state (opacity 1) for forward vs backward seeks.
+                    caretElement.style.opacity = Math.sin(blink.p) >= 0 ? "1" : "0";
+                  },
+                },
+                0,
+              );
+              tl.set(caretElement, { opacity: 1 }, typeEnd);
+              tl.set(caretElement, { opacity: 0 }, execAt);
+            }
+
+            // Output lines print on their cues: a print-fast fade, no motion.
+            outputElements.forEach(function (element, index) {
+              tl.fromTo(
+                element,
+                { opacity: 0 },
+                { opacity: 1, duration: PRINT, ease: "none" },
+                outAts[index],
+              );
+            });
+
+            // The run completes: a fresh prompt with a solid caret appears.
+            if (tailElement) {
+              tl.fromTo(
+                tailElement,
+                { opacity: 0 },
+                { opacity: 1, duration: PRINT, ease: "none" },
+                tailAt,
+              );
+            }
+
+            // HOLD: barely-there drift ending at exactly zero, then authored
+            // stillness before any departure.
+            var OUT_START = duration - OUT;
+            var settleEnd = tailAt + PRINT;
+            var holdSpan = OUT_START - settleEnd;
+            if (holdSpan > 0.9) {
+              var driftHalf = (holdSpan - STILLNESS) / 2;
+              tl.to(stage, { y: "-0.45cqh", duration: driftHalf, ease: "sine.inOut" }, settleEnd);
+              tl.to(
+                stage,
+                { y: "0cqh", duration: driftHalf, ease: "sine.inOut" },
+                settleEnd + driftHalf,
+              );
+            }
+
+            // OUT: only when the exit variable asks for one.
+            if (exitMode !== "none") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+              if (exitMode === "up") {
+                tl.to(stage, { y: "-4cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              }
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["code-terminal-run"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/code-terminal-run/demo.html b/docs/public/catalog/components/code-terminal-run/demo.html
new file mode 100644
index 0000000000..f882e015c6
--- /dev/null
+++ b/docs/public/catalog/components/code-terminal-run/demo.html
@@ -0,0 +1,106 @@
+<!doctype html>
+<!--
+  code-terminal-run demo. This standalone composition mounts the primitive
+  through data-composition-src. Non-default glyph, cadence, cues, and accent
+  values prove the variable path while the primitive remains elastic to its
+  host.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Code Terminal Run Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #0b0c0e);
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --muted: #94a3b8;
+        --surface: #14171c;
+        --border: #343a46;
+        --brand: #71f5a7;
+        --accent: #61a8ff;
+        --accent-2: #c5a3ff;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(
+          ellipse at 50% 44%,
+          var(--bg, #171a20) 0%,
+          var(--bg, #0b0c0e) 72%
+        );
+      }
+
+      .mount-card {
+        width: 72%;
+        height: 66%;
+        left: 14%;
+        top: 17%;
+        container-type: size;
+        overflow: hidden;
+        border-radius: 30px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="code-terminal-run-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+      data-fps="30"
+    >
+      <div
+        id="code-terminal-run-mount"
+        class="mount-card clip"
+        data-composition-id="code-terminal-run"
+        data-composition-src="./code-terminal-run.html"
+        data-variable-values='{"prompt_glyph":"&gt;","cadence":"uniform","cues":"2.7,3,3.3,3.7","accent":"blue"}'
+        data-start="0"
+        data-duration="5"
+        data-track-index="0"
+        data-width="1382"
+        data-height="713"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["code-terminal-run-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "code-terminal-run.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/comparison-split/comparison-split.html b/docs/public/catalog/components/comparison-split/comparison-split.html
new file mode 100644
index 0000000000..080021976e
--- /dev/null
+++ b/docs/public/catalog/components/comparison-split/comparison-split.html
@@ -0,0 +1,449 @@
+<!doctype html>
+<!--
+  comparison-split: HyperFrames video primitive (ui-props / holdable / compare)
+
+  Concept: two full-bleed treatments share one frame. The muted before panel
+  stays fully visible as the base, while the vivid after panel wipes over it
+  from the leading edge. A persistent divider marks the shared clip boundary.
+  One mechanic, one job: compare two visual states.
+
+  Compiled-from evidence: fixture + blueprint (re-filed from prove), from the
+  video-primitives compare shelf.
+
+  Use when: a scene needs a direct before-and-after comparison, a redesign
+  reveal, or a visual treatment contrast that must remain readable during a
+  long hold.
+
+  Variables (declared in data-composition-variables below):
+    - split (number, default 50, range 0 to 100%): target resting position.
+    - orientation (horizontal | vertical, default horizontal): horizontal uses
+      a vertical divider traveling left to right, vertical uses a horizontal
+      divider traveling top to bottom.
+    - labelA (string, default "Before"): caption on the base panel.
+    - labelB (string, default "After"): caption on the revealed panel.
+
+  Envelope (fixed IN/OUT, elastic HOLD only, never gsap.timeScale()):
+    IN_BASE  = 1.40s  stage settles, then the divider wipes from 0% to split
+    HOLD     = elastic = max(0, D - (IN_BASE + OUT_BASE)); deliberately still
+               so the target comparison remains easy to inspect
+    OUT_BASE = 0.50s  release fade
+    If D < IN_BASE + OUT_BASE, IN and OUT scale down together so IN + OUT == D
+    and HOLD == 0.
+
+  Sync point: wipe-land is fixed at WIPE_END_BASE = 1.30s inside IN. It scales
+  proportionally only when the full envelope is shorter than 1.90s, and never
+  moves into elastic HOLD.
+
+  Sound cue: a soft wipe landing hook fires at wipe-land. This primitive never
+  plays audio. It dispatches a bubbling `hf:sfx` CustomEvent with id
+  "wipe-land-soft", so scene-level audio mixing owns playback.
+
+  Mount contract: this file is a MOUNTABLE SUB-COMPOSITION. A host loads it via
+  data-composition-src, and the runtime clones only <template> contents. All
+  live styles, markup, GSAP, and timeline registration therefore live inside
+  <template>. #root is styled by id, fills the host with inset:0, establishes
+  the cqw/cqh container, and has no data-width or data-height. The composition
+  id is the hardcoded literal "comparison-split" because mount flattening
+  strips data-composition-id from the live root. Variables come from
+  window.__hyperframes.getVariables(), which merges declared defaults with
+  per-instance host overrides.
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "split", "type": "number", "role": "layout", "label": "Split position", "description": "Target resting position of the comparison divider.", "default": 50, "min": 0, "max": 100, "step": 1, "unit": "%" },
+    { "id": "orientation", "type": "enum", "role": "layout", "label": "Orientation", "description": "Axis and direction used by the comparison wipe.", "default": "horizontal", "options": [{ "value": "horizontal", "label": "Horizontal" }, { "value": "vertical", "label": "Vertical" }] },
+    { "id": "labelA", "type": "string", "role": "content", "label": "Before label", "description": "Caption shown on the base before panel.", "default": "Before" },
+    { "id": "labelB", "type": "string", "role": "content", "label": "After label", "description": "Caption shown on the revealed after panel.", "default": "After" }
+  ]'
+>
+  <head>
+    <!-- The mount runtime reads variables from <html>, then discards everything
+         outside <template>, including this head. -->
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="comparison-split" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          /* Root fills the host-owned box. Every internal measurement uses
+             cqw/cqh, and every painted color comes from a theme token. */
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            background: var(--bg, #07111f);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+          }
+
+          .cs-clip,
+          .cs-stage,
+          .cs-panel {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+          }
+
+          .cs-clip {
+            overflow: hidden;
+          }
+
+          .cs-stage {
+            --cs-split: 0;
+            opacity: 0;
+          }
+
+          .cs-before {
+            background:
+              linear-gradient(
+                  color-mix(in srgb, var(--border, #334155) 38%, transparent) 0.12cqw,
+                  transparent 0.12cqw
+                )
+                0 0 / 5cqw 5cqw,
+              linear-gradient(
+                  90deg,
+                  color-mix(in srgb, var(--border, #334155) 38%, transparent) 0.12cqw,
+                  transparent 0.12cqw
+                )
+                0 0 / 5cqw 5cqw,
+              var(--surface, #172033);
+          }
+
+          .cs-after {
+            z-index: 2;
+            clip-path: inset(0 calc((100 - var(--cs-split)) * 1%) 0 0);
+            background: color-mix(in srgb, var(--fg, #f8fafc) 18%, var(--surface, #172033));
+          }
+
+          .cs-window {
+            position: absolute;
+            left: 14cqw;
+            top: 18cqh;
+            width: 72cqw;
+            height: 64cqh;
+            overflow: hidden;
+            border-radius: min(3cqw, 5cqh);
+            border: 0.16cqw solid var(--border, #334155);
+            background: color-mix(in srgb, var(--surface, #172033) 90%, var(--muted, #94a3b8));
+            box-shadow: 0 2.2cqh 6cqw color-mix(in srgb, var(--bg, #07111f) 50%, transparent);
+          }
+
+          .cs-after .cs-window {
+            border-color: color-mix(in srgb, var(--fg, #f8fafc) 45%, transparent);
+            background: color-mix(in srgb, var(--fg, #f8fafc) 8%, var(--surface, #172033));
+            box-shadow: 0 2.2cqh 7cqw rgba(0, 0, 0, 0.18);
+          }
+
+          .cs-toolbar {
+            display: flex;
+            align-items: center;
+            gap: var(--space-1, 1.2cqw);
+            height: 12cqh;
+            padding: 0 var(--space-2, 2.4cqw);
+            border-bottom: 0.14cqw solid var(--border, #334155);
+          }
+
+          .cs-dot {
+            width: min(2.2cqw, 3.2cqh);
+            aspect-ratio: 1;
+            border-radius: 50%;
+            background: var(--muted, #94a3b8);
+            opacity: 0.55;
+          }
+
+          .cs-after .cs-dot {
+            background: var(--accent, #f8fafc);
+            opacity: 1;
+          }
+
+          .cs-content {
+            position: relative;
+            height: 52cqh;
+          }
+
+          .cs-copy {
+            position: absolute;
+            left: 7cqw;
+            top: 9cqh;
+            width: 31cqw;
+          }
+
+          .cs-line {
+            height: 2.3cqh;
+            margin-bottom: var(--space-2, 2.4cqh);
+            border-radius: 2cqh;
+            background: var(--muted, #94a3b8);
+            opacity: 0.48;
+          }
+
+          .cs-line:nth-child(1) {
+            width: 94%;
+          }
+
+          .cs-line:nth-child(2) {
+            width: 72%;
+          }
+
+          .cs-line:nth-child(3) {
+            width: 48%;
+          }
+
+          .cs-after .cs-line {
+            background: color-mix(in srgb, var(--fg, #f8fafc) 72%, transparent);
+            opacity: 1;
+          }
+
+          .cs-visual {
+            position: absolute;
+            right: 7cqw;
+            top: 7cqh;
+            width: min(22cqw, 32cqh);
+            aspect-ratio: 1;
+            border-radius: 36% 64% 58% 42%;
+            border: 0.3cqw solid var(--border, #334155);
+            background: var(--muted, #94a3b8);
+            opacity: 0.5;
+          }
+
+          .cs-after .cs-visual {
+            border-color: color-mix(in srgb, var(--fg, #f8fafc) 45%, transparent);
+            background: color-mix(in srgb, var(--fg, #f8fafc) 72%, transparent);
+            box-shadow: 0 0 5cqw rgba(0, 0, 0, 0.18);
+            opacity: 1;
+          }
+
+          .cs-label {
+            position: absolute;
+            z-index: 4;
+            top: var(--space-3, 4cqh);
+            padding: var(--space-1, 1.2cqh) var(--space-2, 2.2cqw);
+            border: 0.14cqw solid var(--border, #334155);
+            border-radius: 999cqw;
+            background: var(--surface, #172033);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: min(3cqw, 4.2cqh);
+            font-weight: 700;
+            letter-spacing: 0.08em;
+            line-height: 1;
+            text-transform: uppercase;
+            white-space: nowrap;
+          }
+
+          .cs-before .cs-label {
+            right: var(--space-3, 4cqw);
+            color: var(--muted, #94a3b8);
+          }
+
+          .cs-after .cs-label {
+            left: var(--space-3, 4cqw);
+            border-color: color-mix(in srgb, var(--fg, #f8fafc) 45%, transparent);
+            background: color-mix(in srgb, var(--fg, #f8fafc) 8%, var(--surface, #172033));
+          }
+
+          .cs-divider {
+            position: absolute;
+            z-index: 5;
+            top: 0;
+            bottom: 0;
+            left: calc(var(--cs-split) * 1%);
+            width: 0.45cqw;
+            transform: translateX(-50%);
+            background: var(--fg, #f8fafc);
+            box-shadow:
+              0 0 1.4cqw color-mix(in srgb, var(--fg, #f8fafc) 45%, transparent),
+              0 0 3cqw rgba(0, 0, 0, 0.45);
+            pointer-events: none;
+          }
+
+          .cs-divider::after {
+            content: "";
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            width: min(5cqw, 7cqh);
+            aspect-ratio: 1;
+            transform: translate(-50%, -50%);
+            border: 0.3cqw solid var(--bg, #07111f);
+            border-radius: 50%;
+            background: var(--fg, #f8fafc);
+            box-shadow: 0 0 2.2cqw color-mix(in srgb, var(--fg, #f8fafc) 45%, transparent);
+          }
+
+          /* INVARIANT: vertical changes only the axis mapping. The after clip
+             and divider still read the same --cs-split value. */
+          #root[data-orientation="vertical"] .cs-after {
+            clip-path: inset(0 0 calc((100 - var(--cs-split)) * 1%) 0);
+          }
+
+          #root[data-orientation="vertical"] .cs-before .cs-label {
+            top: auto;
+            right: var(--space-3, 4cqw);
+            bottom: var(--space-3, 4cqh);
+          }
+
+          #root[data-orientation="vertical"] .cs-divider {
+            top: calc(var(--cs-split) * 1%);
+            right: 0;
+            bottom: auto;
+            left: 0;
+            width: 100%;
+            height: 0.45cqh;
+            transform: translateY(-50%);
+          }
+        </style>
+
+        <div
+          id="comparison-split-clip"
+          class="cs-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="cs-stage">
+            <section class="cs-panel cs-before" aria-label="Before panel">
+              <div class="cs-label"></div>
+              <div class="cs-window">
+                <div class="cs-toolbar">
+                  <span class="cs-dot"></span>
+                  <span class="cs-dot"></span>
+                  <span class="cs-dot"></span>
+                </div>
+                <div class="cs-content">
+                  <div class="cs-copy">
+                    <div class="cs-line"></div>
+                    <div class="cs-line"></div>
+                    <div class="cs-line"></div>
+                  </div>
+                  <div class="cs-visual"></div>
+                </div>
+              </div>
+            </section>
+
+            <section class="cs-panel cs-after" aria-label="After panel">
+              <div class="cs-label"></div>
+              <div class="cs-window">
+                <div class="cs-toolbar">
+                  <span class="cs-dot"></span>
+                  <span class="cs-dot"></span>
+                  <span class="cs-dot"></span>
+                </div>
+                <div class="cs-content">
+                  <div class="cs-copy">
+                    <div class="cs-line"></div>
+                    <div class="cs-line"></div>
+                    <div class="cs-line"></div>
+                  </div>
+                  <div class="cs-visual"></div>
+                </div>
+              </div>
+            </section>
+
+            <div class="cs-divider" aria-hidden="true"></div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            // Hardcoded because mount flattening strips data-composition-id
+            // from the live root before this timeline registers.
+            var compositionId = "comparison-split";
+            var stage = root.querySelector(".cs-stage");
+            var labelAEl = root.querySelector(".cs-before .cs-label");
+            var labelBEl = root.querySelector(".cs-after .cs-label");
+
+            // EDIT ZONE: declarations above and registry metadata change
+            // together. This API owns defaults plus per-instance overrides.
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var rawSplit = vars.split == null ? 50 : Number(vars.split);
+            // INVARIANT: split always clamps into the declared 0 to 100 range.
+            var splitPct = Number.isFinite(rawSplit) ? Math.max(0, Math.min(100, rawSplit)) : 50;
+            // INVARIANT: only horizontal or vertical reaches the renderer.
+            var orientation = vars.orientation === "vertical" ? "vertical" : "horizontal";
+            var labelAText = vars.labelA == null ? "" : String(vars.labelA);
+            var labelBText = vars.labelB == null ? "" : String(vars.labelB);
+
+            root.setAttribute("data-orientation", orientation);
+            labelAEl.textContent = labelAText;
+            labelBEl.textContent = labelBText;
+
+            // RETIME RANGE: fixed IN and OUT scale together only when D is too
+            // short. HOLD is the sole elastic phase. Never use timeScale().
+            var IN_BASE = 1.4;
+            var OUT_BASE = 0.5;
+            var STAGE_IN_BASE = 0.32;
+            var WIPE_AT_BASE = 0.25;
+            var WIPE_DURATION_BASE = 1.05;
+            var WIPE_END_BASE = WIPE_AT_BASE + WIPE_DURATION_BASE;
+
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var totalBase = IN_BASE + OUT_BASE;
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var STAGE_IN = STAGE_IN_BASE * scale;
+            var WIPE_AT = WIPE_AT_BASE * scale;
+            var WIPE_DURATION = WIPE_DURATION_BASE * scale;
+            var WIPE_END = WIPE_END_BASE * scale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var OUT_START = IN + HOLD;
+
+            function fireSfx(id, t) {
+              root.dispatchEvent(
+                new CustomEvent("hf:sfx", { detail: { id: id, t: t }, bubbles: true }),
+              );
+            }
+
+            // Explicit both-endpoints state makes tl.seek(0) deterministic.
+            // --cs-split is the only owner of both clip and divider progress.
+            gsap.set(stage, { opacity: 0, "--cs-split": 0 });
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: stage settle, then one shared wipe value travels to split.
+            tl.to(stage, { opacity: 1, duration: STAGE_IN, ease: "power2.out" }, 0);
+            tl.to(
+              stage,
+              { "--cs-split": splitPct, duration: WIPE_DURATION, ease: "sine.inOut" },
+              WIPE_AT,
+            );
+            tl.call(
+              function () {
+                fireSfx("wipe-land-soft", WIPE_END);
+              },
+              [],
+              WIPE_END,
+            );
+
+            // HOLD: deliberately steady at the target split.
+
+            // OUT: release fade.
+            tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.out" }, OUT_START);
+
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/comparison-split/demo.html b/docs/public/catalog/components/comparison-split/demo.html
new file mode 100644
index 0000000000..1c902b4207
--- /dev/null
+++ b/docs/public/catalog/components/comparison-split/demo.html
@@ -0,0 +1,117 @@
+<!doctype html>
+<!--
+  comparison-split demo. This standalone 1920x1080 composition mounts the
+  primitive through data-composition-src instead of inlining it. Deliberately
+  non-default split and label values prove per-instance variables flow through
+  the mount. The explicit CSS width and height on the host card avoid the
+  shrink-to-fit feedback loop that can collapse container-query children.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Comparison Split Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #050812);
+      }
+
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(
+          ellipse at 50% 42%,
+          var(--bg, #14213b) 0%,
+          var(--bg, #050812) 72%
+        );
+      }
+
+      /* The primitive uses cqw/cqh inside this definite host box. Keeping an
+         explicit CSS size here sidesteps shrink-to-fit sizing for the mounted
+         size-contained root. data-width and data-height remain for tooling. */
+      .mount-card {
+        --bg: #07111f;
+        --fg: #f8fafc;
+        --surface: #172033;
+        --brand: #e4e4e7;
+        --border: #40506b;
+        --muted: #94a3b8;
+        --accent: #e4e4e7;
+        --font-body: Inter, system-ui, sans-serif;
+        --font-display: Inter, system-ui, sans-serif;
+        --space-1: 1.2cqw;
+        --space-2: 2.4cqw;
+        --space-3: 4cqw;
+        position: absolute;
+        left: 14%;
+        top: 16%;
+        width: 72%;
+        height: 68%;
+        overflow: hidden;
+        border: 1px solid color-mix(in srgb, var(--border, #94a3b8) 28%, transparent);
+        border-radius: 32px;
+        box-shadow: 0 44px 110px color-mix(in srgb, var(--bg, #000000) 48%, transparent);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="comparison-split-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="comparison-split-mount"
+        class="mount-card clip"
+        data-composition-id="comparison-split"
+        data-composition-src="./comparison-split.html"
+        data-variable-values='{"split":64,"orientation":"horizontal","labelA":"Manual","labelB":"Automated"}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="1382"
+        data-height="734"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      // This host owns no motion. The mounted primitive registers its own
+      // timeline, while this empty paused timeline satisfies the demo root.
+      window.__timelines = window.__timelines || {};
+      window.__timelines["comparison-split-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "comparison-split.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/confetti/confetti.html b/docs/public/catalog/components/confetti/confetti.html
new file mode 100644
index 0000000000..c0aa68a084
--- /dev/null
+++ b/docs/public/catalog/components/confetti/confetti.html
@@ -0,0 +1,127 @@
+<!--
+  Confetti - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-confetti">
+  <div class="mesh"></div>
+  <div class="card">
+    <div class="spot"></div>
+    <div>
+      <h3>Confetti</h3>
+      <p>A deterministic celebration burst with seeded particles and gravity.</p>
+    </div>
+  </div>
+  <span class="particle" style="--c: var(--accent, #f43f5e)"></span
+  ><span class="particle" style="--c: var(--accent, #f59e0b)"></span
+  ><span class="particle" style="--c: var(--accent, #22c55e)"></span
+  ><span class="particle" style="--c: var(--accent, #38bdf8)"></span
+  ><span class="particle" style="--c: var(--accent, #a855f7)"></span
+  ><span class="particle" style="--c: var(--accent, #f43f5e)"></span
+  ><span class="particle" style="--c: var(--accent, #f59e0b)"></span
+  ><span class="particle" style="--c: var(--accent, #22c55e)"></span
+  ><span class="particle" style="--c: var(--accent, #38bdf8)"></span
+  ><span class="particle" style="--c: var(--accent, #a855f7)"></span
+  ><span class="particle" style="--c: var(--accent, #f43f5e)"></span
+  ><span class="particle" style="--c: var(--accent, #f59e0b)"></span
+  ><span class="particle" style="--c: var(--accent, #22c55e)"></span
+  ><span class="particle" style="--c: var(--accent, #38bdf8)"></span
+  ><span class="particle" style="--c: var(--accent, #a855f7)"></span
+  ><span class="particle" style="--c: var(--accent, #f43f5e)"></span
+  ><span class="particle" style="--c: var(--accent, #f59e0b)"></span
+  ><span class="particle" style="--c: var(--accent, #22c55e)"></span
+  ><span class="particle" style="--c: var(--accent, #38bdf8)"></span
+  ><span class="particle" style="--c: var(--accent, #a855f7)"></span
+  ><span class="particle" style="--c: var(--accent, #f43f5e)"></span
+  ><span class="particle" style="--c: var(--accent, #f59e0b)"></span>
+</div>
+
+<style>
+  .hf-remocn-confetti {
+    color: var(--fg, #111827);
+    font-family: var(--font-body, Inter, system-ui, sans-serif);
+  }
+  .hf-remocn-confetti {
+    position: relative;
+    width: 760px;
+    height: 428px;
+    overflow: hidden;
+    border-radius: var(--radius, 30px);
+    background: var(--bg, #080b12);
+    box-shadow: 0 28px 80px color-mix(in srgb, var(--bg, #0f172a) 20%, transparent);
+  }
+  .hf-remocn-confetti .mesh {
+    position: absolute;
+    inset: -22%;
+    filter: blur(44px);
+    opacity: 0.88;
+    background:
+      radial-gradient(
+        circle at var(--hf-x1, 20%) var(--hf-y1, 30%),
+        var(--accent, #60a5fa) 0 18%,
+        transparent 32%
+      ),
+      radial-gradient(
+        circle at var(--hf-x2, 76%) var(--hf-y2, 52%),
+        var(--accent-2, #f472b6) 0 16%,
+        transparent 34%
+      ),
+      radial-gradient(
+        circle at var(--hf-x3, 46%) var(--hf-y3, 78%),
+        var(--brand, #34d399) 0 18%,
+        transparent 34%
+      );
+  }
+  .hf-remocn-confetti .card {
+    position: absolute;
+    inset: var(--space-3, 74px) var(--space-3, 92px);
+    border: 1px solid color-mix(in srgb, var(--border, #ffffff) 16%, transparent);
+    border-radius: var(--radius, 26px);
+    background: color-mix(in srgb, var(--surface, #ffffff) 8%, transparent);
+    color: var(--fg, #fff);
+    display: grid;
+    place-items: center;
+    text-align: center;
+    overflow: hidden;
+  }
+  .hf-remocn-confetti .spot {
+    position: absolute;
+    width: 260px;
+    height: 260px;
+    border-radius: 50%;
+    background: radial-gradient(
+      circle,
+      color-mix(in srgb, var(--fg, #ffffff) 50%, transparent),
+      transparent 65%
+    );
+    transform: translate(var(--hf-spot-x, 0px), var(--hf-spot-y, 0px));
+    mix-blend-mode: screen;
+  }
+  .hf-remocn-confetti .particle {
+    position: absolute;
+    left: 50%;
+    top: 54%;
+    width: 12px;
+    height: 20px;
+    border-radius: var(--radius, 3px);
+    background: var(--c);
+    transform: translate(var(--hf-px, 0px), var(--hf-py, 0px)) rotate(var(--hf-pr, 0deg));
+    opacity: var(--hf-po, 0);
+  }
+  .hf-remocn-confetti h3 {
+    margin: 0;
+    font-size: 44px;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-confetti p {
+    margin: var(--space-1, 8px) 0 0;
+    color: color-mix(in srgb, var(--muted, #ffffff) 70%, transparent);
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-confetti .mesh', { '--hf-x1': '18%', '--hf-y1': '28%', '--hf-x2': '78%', '--hf-y2': '46%', '--hf-x3': '44%', '--hf-y3': '80%' }, { '--hf-x1': '34%', '--hf-y1': '42%', '--hf-x2': '62%', '--hf-y2': '60%', '--hf-x3': '58%', '--hf-y3': '64%', duration: 4, ease: 'sine.inOut' }, startTime); tl.fromTo('.hf-remocn-confetti .spot', { '--hf-spot-x': '-120px', '--hf-spot-y': '-70px' }, { '--hf-spot-x': '190px', '--hf-spot-y': '90px', duration: 3, ease: 'sine.inOut' }, startTime); const particles_confetti = gsap.utils.toArray('.hf-remocn-confetti .particle'); if (particles_confetti.length) { tl.fromTo(particles_confetti, { '--hf-po': 0, '--hf-px': '0px', '--hf-py': '0px', '--hf-pr': '0deg' }, { '--hf-po': 1, '--hf-px': (i) => (Math.cos(i * 0.83) * 250) + 'px', '--hf-py': (i) => (-120 - Math.sin(i * 0.61) * 120) + 'px', '--hf-pr': (i) => (180 + i * 37) + 'deg', duration: 0.8, stagger: 0.015, ease: 'power2.out' }, startTime + 0.2); }
+-->
diff --git a/docs/public/catalog/components/confetti/demo.html b/docs/public/catalog/components/confetti/demo.html
new file mode 100644
index 0000000000..1a1297b16e
--- /dev/null
+++ b/docs/public/catalog/components/confetti/demo.html
@@ -0,0 +1,213 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Confetti - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: var(--bg, #f7f7f8);
+        font-family: var(--font-body, Inter, system-ui, sans-serif);
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+        transform: scale(1.6); /* ponytail: scale wrapper, not GSAP targets */
+      }
+      .hf-remocn-confetti {
+        color: var(--fg, #111827);
+        font-family: var(--font-body, Inter, system-ui, sans-serif);
+      }
+      .hf-remocn-confetti {
+        position: relative;
+        width: 760px;
+        height: 428px;
+        overflow: hidden;
+        border-radius: 30px;
+        background: var(--bg, #080b12);
+        box-shadow: 0 28px 80px color-mix(in srgb, var(--bg, #0f172a) 20%, transparent);
+      }
+      .hf-remocn-confetti .mesh {
+        position: absolute;
+        inset: -22%;
+        filter: blur(44px);
+        opacity: 0.88;
+        background:
+          radial-gradient(
+            circle at var(--hf-x1, 20%) var(--hf-y1, 30%),
+            var(--accent, #60a5fa) 0 18%,
+            transparent 32%
+          ),
+          radial-gradient(
+            circle at var(--hf-x2, 76%) var(--hf-y2, 52%),
+            var(--accent-2, #f472b6) 0 16%,
+            transparent 34%
+          ),
+          radial-gradient(
+            circle at var(--hf-x3, 46%) var(--hf-y3, 78%),
+            var(--brand, #34d399) 0 18%,
+            transparent 34%
+          );
+      }
+      .hf-remocn-confetti .card {
+        position: absolute;
+        inset: 74px 92px;
+        border: 1px solid color-mix(in srgb, var(--border, #ffffff) 16%, transparent);
+        border-radius: 26px;
+        background: color-mix(in srgb, var(--surface, #ffffff) 8%, transparent);
+        color: var(--fg, #fff);
+        display: grid;
+        place-items: center;
+        text-align: center;
+        overflow: hidden;
+      }
+      .hf-remocn-confetti .spot {
+        position: absolute;
+        width: 260px;
+        height: 260px;
+        border-radius: 50%;
+        background: radial-gradient(
+          circle,
+          color-mix(in srgb, var(--fg, #ffffff) 50%, transparent),
+          transparent 65%
+        );
+        transform: translate(var(--hf-spot-x, 0px), var(--hf-spot-y, 0px));
+        mix-blend-mode: screen;
+      }
+      .hf-remocn-confetti .particle {
+        position: absolute;
+        left: 50%;
+        top: 54%;
+        width: 12px;
+        height: 20px;
+        border-radius: 3px;
+        background: var(--c);
+        transform: translate(var(--hf-px, 0px), var(--hf-py, 0px)) rotate(var(--hf-pr, 0deg));
+        opacity: var(--hf-po, 0);
+      }
+      .hf-remocn-confetti h3 {
+        margin: 0;
+        font-size: 44px;
+        letter-spacing: -0.04em;
+      }
+      .hf-remocn-confetti p {
+        margin: 8px 0 0;
+        font-size: 15px;
+        color: color-mix(in srgb, var(--muted, #ffffff) 70%, transparent);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="confetti-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-confetti">
+          <div class="mesh"></div>
+          <div class="card">
+            <div class="spot"></div>
+            <div>
+              <h3>Confetti</h3>
+              <p>A deterministic celebration burst with seeded particles and gravity.</p>
+            </div>
+          </div>
+          <span class="particle" style="--c: var(--accent, #f43f5e)"></span
+          ><span class="particle" style="--c: var(--accent, #f59e0b)"></span
+          ><span class="particle" style="--c: var(--accent, #22c55e)"></span
+          ><span class="particle" style="--c: var(--accent, #38bdf8)"></span
+          ><span class="particle" style="--c: var(--accent, #a855f7)"></span
+          ><span class="particle" style="--c: var(--accent, #f43f5e)"></span
+          ><span class="particle" style="--c: var(--accent, #f59e0b)"></span
+          ><span class="particle" style="--c: var(--accent, #22c55e)"></span
+          ><span class="particle" style="--c: var(--accent, #38bdf8)"></span
+          ><span class="particle" style="--c: var(--accent, #a855f7)"></span
+          ><span class="particle" style="--c: var(--accent, #f43f5e)"></span
+          ><span class="particle" style="--c: var(--accent, #f59e0b)"></span
+          ><span class="particle" style="--c: var(--accent, #22c55e)"></span
+          ><span class="particle" style="--c: var(--accent, #38bdf8)"></span
+          ><span class="particle" style="--c: var(--accent, #a855f7)"></span
+          ><span class="particle" style="--c: var(--accent, #f43f5e)"></span
+          ><span class="particle" style="--c: var(--accent, #f59e0b)"></span
+          ><span class="particle" style="--c: var(--accent, #22c55e)"></span
+          ><span class="particle" style="--c: var(--accent, #38bdf8)"></span
+          ><span class="particle" style="--c: var(--accent, #a855f7)"></span
+          ><span class="particle" style="--c: var(--accent, #f43f5e)"></span
+          ><span class="particle" style="--c: var(--accent, #f59e0b)"></span>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-confetti .mesh",
+          {
+            "--hf-x1": "18%",
+            "--hf-y1": "28%",
+            "--hf-x2": "78%",
+            "--hf-y2": "46%",
+            "--hf-x3": "44%",
+            "--hf-y3": "80%",
+          },
+          {
+            "--hf-x1": "34%",
+            "--hf-y1": "42%",
+            "--hf-x2": "62%",
+            "--hf-y2": "60%",
+            "--hf-x3": "58%",
+            "--hf-y3": "64%",
+            duration: 4,
+            ease: "sine.inOut",
+          },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-confetti .spot",
+          { "--hf-spot-x": "-120px", "--hf-spot-y": "-70px" },
+          { "--hf-spot-x": "190px", "--hf-spot-y": "90px", duration: 3, ease: "sine.inOut" },
+          startTime,
+        );
+        const particles_confetti = gsap.utils.toArray(".hf-remocn-confetti .particle");
+        if (particles_confetti.length) {
+          tl.fromTo(
+            particles_confetti,
+            { "--hf-po": 0, "--hf-px": "0px", "--hf-py": "0px", "--hf-pr": "0deg" },
+            {
+              "--hf-po": 1,
+              "--hf-px": (i) => Math.cos(i * 0.83) * 250 + "px",
+              "--hf-py": (i) => -120 - Math.sin(i * 0.61) * 120 + "px",
+              "--hf-pr": (i) => 180 + i * 37 + "deg",
+              duration: 0.8,
+              stagger: 0.015,
+              ease: "power2.out",
+            },
+            startTime + 0.2,
+          );
+        }
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["confetti-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/conic-progress-ring/conic-progress-ring.html b/docs/public/catalog/components/conic-progress-ring/conic-progress-ring.html
new file mode 100644
index 0000000000..ae76cee16c
--- /dev/null
+++ b/docs/public/catalog/components/conic-progress-ring/conic-progress-ring.html
@@ -0,0 +1,235 @@
+<!doctype html>
+<!--
+  conic-progress-ring: HyperFrames video primitive (data / prove / demonstrate)
+
+  Concept: one registered percentage moves the hard frontier of a conic
+  gradient while a radial mask cuts out the center. The center value is
+  derived from that same percentage on every GSAP update, so fill and count
+  cannot drift apart.
+
+  Compiled-from evidence: hyperframes-research-css-gems.md, section 10,
+  "Registered conic progress ring". The finding specifies a typed percentage
+  as the seek handle for a conic-gradient frontier and a radial mask for the
+  ring cutout.
+
+  Use when: a scene needs to prove completion, attainment, or a measured
+  result with one immediately legible data mark.
+
+  Variables:
+    progress  number  0 to 100  default 100  target angular fill
+    thickness number  4 to 30   default 12   ring stroke as a percent
+    label     string            default "100" center count target
+
+  Envelope:
+    IN   1.40s fixed fill and synchronized count, power2.out
+    HOLD elastic and deliberately still after the result settles
+    OUT  0.50s fixed opacity release, power2.in
+    For durations shorter than 1.90s, IN and OUT scale together. HOLD is the
+    only elastic phase. The timeline is never time-scaled.
+
+  Sync point:
+    progress-settled at the end of IN, always outside the elastic HOLD
+
+  Sound cues: none. A data proof should not claim an audio event for its host.
+
+  Mount contract: this file is a template-wrapped sub-composition. The host
+  owns dimensions. #root fills that box with inset:0 and has no data-width or
+  data-height. The hardcoded composition id matches the root and timeline key.
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "progress", "type": "number", "role": "content", "label": "Progress", "description": "Target angular fill from 0 to 100.", "default": 100, "min": 0, "max": 100, "step": 1, "unit": "%" },
+    { "id": "thickness", "type": "number", "role": "layout", "label": "Thickness", "description": "Ring stroke thickness as a percent of the ring radius.", "default": 12, "min": 4, "max": 30, "step": 1, "unit": "%" },
+    { "id": "label", "type": "string", "role": "content", "label": "Center label", "description": "Numeric target shown in the center and counted in sync with the fill.", "default": "100" }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Conic Progress Ring</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="conic-progress-ring" data-duration="4" data-fps="30">
+        <style>
+          /* The registration must live in this document-level stylesheet.
+             Registrations inside shadow roots are ignored by the platform. */
+          @property --ring-progress {
+            syntax: "<percentage>";
+            inherits: false;
+            initial-value: 0%;
+          }
+
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          /* INVARIANT: #root is the mount contract owner. The host owns the
+             box, and every internal measurement is relative to that box. */
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            color: var(--fg, #f4f7fb);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+          }
+
+          .ring-clip {
+            width: 100%;
+            height: 100%;
+            display: grid;
+            place-items: center;
+          }
+
+          .ring-stage {
+            position: relative;
+            width: min(68cqw, 68cqh);
+            aspect-ratio: 1;
+          }
+
+          /* EDIT ZONE: --ring-thickness is the only geometry control.
+             --ring-progress is the only registered animation scalar. Paint
+             comes only from the host theme's surface and brand tokens. */
+          .ring {
+            --ring-thickness: 12%;
+            --ring-progress: 0%;
+            position: absolute;
+            inset: 0;
+            border-radius: 50%;
+            background: conic-gradient(
+              from -90deg,
+              var(--brand, #35d6a0) 0 var(--ring-progress),
+              var(--surface, #1b2938) var(--ring-progress) 100%
+            );
+            -webkit-mask: radial-gradient(
+              farthest-side,
+              transparent calc(100% - var(--ring-thickness)),
+              var(--fg, #f4f7fb) 0
+            );
+            mask: radial-gradient(
+              farthest-side,
+              transparent calc(100% - var(--ring-thickness)),
+              var(--fg, #f4f7fb) 0
+            );
+          }
+
+          .ring-label {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            color: var(--fg, #f4f7fb);
+            font-size: min(18cqw, 18cqh);
+            font-weight: 700;
+            font-variant-numeric: tabular-nums;
+            letter-spacing: -0.04em;
+            line-height: 1;
+            text-align: center;
+          }
+        </style>
+
+        <div
+          id="conic-progress-ring-clip"
+          class="ring-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="ring-stage">
+            <div
+              class="ring"
+              role="progressbar"
+              aria-label="Progress"
+              aria-valuemin="0"
+              aria-valuemax="100"
+              aria-valuenow="0"
+            ></div>
+            <div class="ring-label" aria-hidden="true">0</div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var compositionId = "conic-progress-ring";
+            var stage = root.querySelector(".ring-stage");
+            var ring = root.querySelector(".ring");
+            var label = root.querySelector(".ring-label");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            /* INVARIANT: zero is a valid progress value, so missing and zero
+               are handled separately. Both numeric controls clamp to their
+               declared ranges before they reach layout or animation. */
+            var progressValue = Number(vars.progress);
+            var targetProgress = Number.isFinite(progressValue)
+              ? Math.max(0, Math.min(100, progressValue))
+              : 100;
+            var thicknessValue = Number(vars.thickness);
+            var thickness = Number.isFinite(thicknessValue)
+              ? Math.max(4, Math.min(30, thicknessValue))
+              : 12;
+            var labelText = vars.label == null ? "100" : String(vars.label);
+            var labelMatch = labelText.trim().match(/^(-?\d+(?:\.\d+)?)(.*)$/);
+            var labelTarget = labelMatch ? Number(labelMatch[1]) : null;
+            var labelSuffix = labelMatch ? labelMatch[2] : "";
+
+            ring.style.setProperty("--ring-thickness", thickness + "%");
+
+            function updateLabel(fillPercent) {
+              var ratio = targetProgress > 0 ? fillPercent / targetProgress : 1;
+              label.textContent =
+                labelTarget == null ? labelText : Math.round(labelTarget * ratio) + labelSuffix;
+              ring.setAttribute("aria-valuenow", String(Math.round(fillPercent)));
+            }
+
+            updateLabel(0);
+
+            /* RETIME RANGE: IN_BASE and OUT_BASE own the lifecycle timing.
+               The fill uses --ease-standard's GSAP form, power2.out. */
+            var IN_BASE = 1.4;
+            var OUT_BASE = 0.5;
+            var durationValue = Number(root.dataset.duration);
+            var duration = Number.isFinite(durationValue) && durationValue > 0 ? durationValue : 4;
+            var scale = duration < IN_BASE + OUT_BASE ? duration / (IN_BASE + OUT_BASE) : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var OUT_START = IN + HOLD;
+
+            var tl = gsap.timeline({ paused: true });
+
+            tl.fromTo(
+              ring,
+              { "--ring-progress": "0%" },
+              {
+                "--ring-progress": targetProgress + "%",
+                duration: IN,
+                ease: "power2.out",
+                onUpdate: function () {
+                  updateLabel(parseFloat(ring.style.getPropertyValue("--ring-progress")) || 0);
+                },
+              },
+              0,
+            );
+            tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/conic-progress-ring/demo.html b/docs/public/catalog/components/conic-progress-ring/demo.html
new file mode 100644
index 0000000000..e0eacfdbdf
--- /dev/null
+++ b/docs/public/catalog/components/conic-progress-ring/demo.html
@@ -0,0 +1,110 @@
+<!doctype html>
+<!--
+  conic-progress-ring demo. This standalone composition mounts the primitive
+  through data-composition-src and supplies non-default values so the mount
+  path and every exposed variable are exercised together.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Conic Progress Ring Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+
+      #root {
+        --bg: #071018;
+        --fg: #f4f7fb;
+        --muted: #91a0b3;
+        --surface: #1b2938;
+        --border: rgba(244, 247, 251, 0.14);
+        --brand: #35d6a0;
+        --accent: #74b9ff;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-body: Inter, system-ui, sans-serif;
+        --font-mono: ui-monospace, monospace;
+        --radius: 4cqh;
+        --space-1: 1cqh;
+        --space-2: 2cqh;
+        --space-3: 3cqh;
+        --dur-beat: 0.4s;
+        --ease-standard: cubic-bezier(0.215, 0.61, 0.355, 1);
+        --ease-emphasis: cubic-bezier(0.19, 1, 0.22, 1);
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg);
+      }
+
+      .mount-card {
+        position: absolute;
+        left: 29%;
+        top: 19%;
+        width: 42%;
+        height: 62%;
+        overflow: hidden;
+        border: 0.15cqh solid var(--border);
+        border-radius: var(--radius);
+        background: var(--bg);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="conic-progress-ring-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="conic-progress-ring-mount"
+        class="mount-card clip"
+        data-composition-id="conic-progress-ring"
+        data-composition-src="./conic-progress-ring.html"
+        data-variable-values='{"progress":92,"thickness":16,"label":"92"}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="806"
+        data-height="670"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["conic-progress-ring-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "conic-progress-ring.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/constellation-hub/README.md b/docs/public/catalog/components/constellation-hub/README.md
new file mode 100644
index 0000000000..0038d6eae3
--- /dev/null
+++ b/docs/public/catalog/components/constellation-hub/README.md
@@ -0,0 +1,36 @@
+# constellation-hub
+
+Feature nodes orbit one fixed hub. Each connector draws from the hub to its node in narration order (real `getTotalLength` dash draws) while that node brightens, then everything settles into one readable lockup that holds until the frame cuts.
+
+4.5s authored, elastic HOLD, exit `none` by default.
+
+## Variables
+
+| id          | type   | default                        | notes                                                                                                                                                                                     |
+| ----------- | ------ | ------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `hub_label` | string | `Product`                      | Text inside the fixed central hub.                                                                                                                                                        |
+| `nodes`     | string | `Capture,Compose,Render,Share` | Comma-separated feature labels, introduced first to last.                                                                                                                                 |
+| `cues`      | string | `` (empty)                     | Comma-separated seconds (from mount start) for each node's reveal, e.g. `0.5,1.2,1.9,2.6`. Nodes beyond the list extrapolate at the list's own gap. Empty keeps the authored even spread. |
+| `accent`    | enum   | `green`                        | Hub, connector, and active-node color: green rides `--brand`, blue rides `--accent`, violet rides `--accent-2`.                                                                           |
+| `exit`      | enum   | `none`                         | `none` holds until the cut; `fade` is the scale-down fade (the pre-Wave-J default ending); `up` departs with a rise and fade.                                                             |
+
+## Mount
+
+```html
+<div
+  class="clip"
+  data-composition-id="constellation-hub"
+  data-composition-src="./constellation-hub.html"
+  data-variable-values='{"hub_label":"HyperFrames","nodes":"Author,Check,Render,Publish","cues":"0.6,1.4,2.2,3.0"}'
+  data-start="0"
+  data-duration="4.5"
+  data-track-index="0"
+></div>
+```
+
+Elastic root: no `data-width`/`data-height`; it fills whatever box the host clip gives it. Timeline registers under the literal `constellation-hub` key.
+
+## Notes
+
+- Cue N starts node N's connector draw and brighten. Reveals clamp so the group settle finishes before any exit.
+- Connector dash values come from each path's real `getTotalLength()` read synchronously at build; never `pathLength`, never `non-scaling-stroke`.
diff --git a/docs/public/catalog/components/constellation-hub/constellation-hub.html b/docs/public/catalog/components/constellation-hub/constellation-hub.html
new file mode 100644
index 0000000000..856a4fc9ff
--- /dev/null
+++ b/docs/public/catalog/components/constellation-hub/constellation-hub.html
@@ -0,0 +1,427 @@
+<!doctype html>
+<!--
+  constellation-hub: HyperFrames video primitive (feature tour / exhibit)
+
+  Feature nodes form an orbit around one fixed hub. Each connector draws
+  from the hub to its node in narration order while that node brightens,
+  then every element settles into one readable lockup.
+
+  Variables:
+    - hub_label (string, default "Product"): text inside the fixed hub.
+    - nodes (string, default "Capture,Compose,Render,Share"): comma-separated
+      feature labels introduced from first to last.
+    - cues (string, default ""): comma-separated seconds (from mount start)
+      for each node reveal. Empty keeps the authored even spread.
+    - accent (green | blue | violet, default "green"): highlight token route.
+    - exit (none | fade | up, default "none"): optional departure.
+
+  Envelope, fixed IN and OUT with elastic HOLD only:
+    IN_BASE  = 2.40s, hub arrival plus ordered connector and node reveals
+               (cues can stretch the reveal phase past IN_BASE)
+    HOLD     = max(0, D - IN - OUT), subtle orbital drift around the fixed hub
+    OUT_BASE = 0.50s departure when exit is fade or up, 0s when exit is
+               none (the default: the lockup holds until the cut)
+    If D is shorter than IN_BASE + OUT_BASE, IN and OUT compress together.
+    The timeline is never time-scaled.
+
+  Draw contract: each connector reads its real SVG getTotalLength() during
+  synchronous construction. That value owns both dash array and initial dash
+  offset, and GSAP draws the connector by tweening the offset to zero.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, uses cqw and cqh for elastic sizing, carries no data-width or
+  data-height, and registers one paused timeline under the literal
+  constellation-hub key.
+-->
+<html
+  lang="en"
+  data-composition-id="constellation-hub"
+  data-composition-duration="4.5"
+  data-composition-variables='[
+    { "id": "hub_label", "type": "string", "role": "content", "label": "Hub label", "description": "Text displayed inside the fixed central hub.", "default": "Product" },
+    { "id": "nodes", "type": "string", "role": "content", "label": "Feature nodes", "description": "Comma-separated feature labels introduced in narration order.", "default": "Capture,Compose,Render,Share" },
+    { "id": "cues", "type": "string", "role": "timing", "label": "Cues", "description": "Comma-separated seconds (from mount start) for each node reveal. Empty keeps the authored even spread.", "default": "" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Highlight color used by the hub, connectors, and active nodes.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the lockup holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Constellation Hub</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="constellation-hub" data-duration="4.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .ch-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .ch-lockup {
+            position: relative;
+            width: 100cqw;
+            height: 100cqh;
+            opacity: 0;
+          }
+
+          .ch-orbit {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 100cqw;
+            height: 100cqh;
+            transform-origin: 50cqw 50cqh;
+            will-change: transform;
+          }
+
+          .ch-connectors {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 100cqw;
+            height: 100cqh;
+            overflow: visible;
+          }
+
+          .ch-connector {
+            fill: none;
+            stroke: var(--ch-accent);
+            stroke-width: 0.72;
+            stroke-linecap: round;
+            opacity: 0.72;
+          }
+
+          .ch-node-position {
+            position: absolute;
+            width: var(--ch-node-width, 21cqw);
+            transform: translate(-50%, -50%);
+          }
+
+          .ch-node {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            min-height: 10cqh;
+            padding: var(--space-1, 1.2cqh) var(--space-2, 2.4cqw);
+            overflow: hidden;
+            border: 0.14cqw solid color-mix(in srgb, var(--ch-accent) 54%, var(--border, #334155));
+            border-radius: var(--radius, 2.4cqw);
+            background: color-mix(in srgb, var(--surface, #151a24) 90%, var(--ch-accent));
+            box-shadow: 0 1.8cqh 4.8cqh color-mix(in srgb, var(--bg, #05070d) 38%, transparent);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            font-size: var(--ch-node-font-size, 2.25cqw);
+            font-weight: 680;
+            line-height: 1.1;
+            letter-spacing: -0.01em;
+            text-align: center;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            will-change: transform, opacity;
+          }
+
+          .ch-hub {
+            position: absolute;
+            left: 50cqw;
+            top: 50cqh;
+            z-index: 2;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 21cqw;
+            min-height: 18cqh;
+            padding: var(--space-2, 2.4cqh) var(--space-2, 2.4cqw);
+            overflow: hidden;
+            border: 0.22cqw solid var(--ch-accent);
+            border-radius: var(--radius, 2.4cqw);
+            background: color-mix(in srgb, var(--surface, #151a24) 78%, var(--ch-accent));
+            box-shadow:
+              0 0 7cqh color-mix(in srgb, var(--ch-accent) 24%, transparent),
+              0 2.4cqh 6cqh color-mix(in srgb, var(--bg, #05070d) 46%, transparent);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: 3.05cqw;
+            font-weight: 760;
+            line-height: 1;
+            letter-spacing: -0.03em;
+            text-align: center;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            transform: translate(-50%, -50%);
+            will-change: transform, opacity;
+          }
+        </style>
+
+        <div
+          id="constellation-hub-clip"
+          class="ch-clip clip"
+          data-start="0"
+          data-duration="4.5"
+          data-track-index="0"
+        >
+          <div class="ch-lockup" role="img">
+            <div class="ch-orbit">
+              <svg
+                class="ch-connectors"
+                viewBox="0 0 100 100"
+                preserveAspectRatio="none"
+                aria-hidden="true"
+              ></svg>
+              <div class="ch-nodes"></div>
+            </div>
+            <div class="ch-hub"></div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var lockup = root.querySelector(".ch-lockup");
+            var orbit = root.querySelector(".ch-orbit");
+            var connectorsLayer = root.querySelector(".ch-connectors");
+            var nodesLayer = root.querySelector(".ch-nodes");
+            var hub = root.querySelector(".ch-hub");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var hubLabel = vars.hub_label == null ? "Product" : String(vars.hub_label).trim();
+            var nodeSource =
+              vars.nodes == null ? "Capture,Compose,Render,Share" : String(vars.nodes);
+            var nodeLabels = nodeSource
+              .split(",")
+              .map(function (label) {
+                return label.trim();
+              })
+              .filter(function (label) {
+                return label.length > 0;
+              });
+
+            if (nodeLabels.length === 0) nodeLabels = ["Feature"];
+
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+            var cuesValue = vars.cues == null ? "" : String(vars.cues);
+            var cues = cuesValue.split(",").reduce(function (result, token) {
+              var trimmed = token.trim();
+              if (trimmed === "") return result;
+              var seconds = Number(trimmed);
+              if (!Number.isFinite(seconds) || seconds < 0) return result;
+              result.push(seconds);
+              return result;
+            }, []);
+
+            var nodeWidth = Math.max(12, Math.min(21, 78 / Math.max(4, nodeLabels.length) + 2));
+            var nodeFontSize = nodeLabels.length > 6 ? 1.75 : 2.25;
+
+            root.style.setProperty("--ch-accent", accentColors[accent]);
+            root.style.setProperty("--ch-node-width", nodeWidth.toFixed(2) + "cqw");
+            root.style.setProperty("--ch-node-font-size", nodeFontSize.toFixed(2) + "cqw");
+            hub.textContent = hubLabel;
+            lockup.setAttribute(
+              "aria-label",
+              "Hub " + hubLabel + " connected to " + nodeLabels.join(", "),
+            );
+
+            var svgNamespace = "http://www.w3.org/2000/svg";
+            var connectors = [];
+            var nodes = [];
+            var connectorFragment = document.createDocumentFragment();
+            var nodeFragment = document.createDocumentFragment();
+
+            nodeLabels.forEach(function (label, index) {
+              var angle = -Math.PI / 2 + (index / nodeLabels.length) * Math.PI * 2;
+              var x = 50 + Math.cos(angle) * 38;
+              var y = 50 + Math.sin(angle) * 39;
+              var connector = document.createElementNS(svgNamespace, "path");
+              connector.setAttribute("class", "ch-connector");
+              connector.setAttribute("d", "M 50 50 L " + x.toFixed(3) + " " + y.toFixed(3));
+              connectorFragment.appendChild(connector);
+              connectors.push(connector);
+
+              var position = document.createElement("div");
+              position.className = "ch-node-position";
+              position.style.left = x.toFixed(3) + "cqw";
+              position.style.top = y.toFixed(3) + "cqh";
+
+              var node = document.createElement("div");
+              node.className = "ch-node";
+              node.textContent = label;
+              position.appendChild(node);
+              nodeFragment.appendChild(position);
+              nodes.push(node);
+            });
+
+            connectorsLayer.appendChild(connectorFragment);
+            nodesLayer.appendChild(nodeFragment);
+
+            connectors.forEach(function (connector) {
+              var length = connector.getTotalLength();
+              connector.style.strokeDasharray = length + " " + length;
+              connector.style.strokeDashoffset = String(length);
+            });
+
+            var IN_BASE = 2.4;
+            var OUT_BASE = exit === "none" ? 0 : 0.5;
+            var HUB_IN_BASE = 0.46;
+            var SEQUENCE_START_BASE = 0.34;
+            var DRAW_BASE = 0.5;
+            var NODE_UP_BASE = 0.3;
+            var NODE_DOWN_BASE = 0.2;
+            var SETTLE_BASE = 0.28;
+            var STILLNESS = 0.24;
+            var durationValue = Number(root.dataset.duration);
+            var duration =
+              Number.isFinite(durationValue) && durationValue > 0 ? durationValue : 4.5;
+            var phaseBase = Math.max(0.001, IN_BASE + OUT_BASE);
+            var phaseScale = duration < phaseBase ? duration / phaseBase : 1;
+            var IN = IN_BASE * phaseScale;
+            var OUT = OUT_BASE * phaseScale;
+            var HUB_IN = HUB_IN_BASE * phaseScale;
+            var SEQUENCE_START = SEQUENCE_START_BASE * phaseScale;
+            var DRAW = DRAW_BASE * phaseScale;
+            var NODE_UP = NODE_UP_BASE * phaseScale;
+            var NODE_DOWN = NODE_DOWN_BASE * phaseScale;
+            var SETTLE = SETTLE_BASE * phaseScale;
+
+            // Reveal schedule: cues own each connector-and-node start when
+            // provided; the authored even spread otherwise. Reveals beyond
+            // the cue list extrapolate at the cue list's own gap, and every
+            // reveal clamps so the settle finishes before any exit.
+            var starts;
+            var SETTLE_START;
+            if (cues.length > 0) {
+              var lastCue = cues[cues.length - 1];
+              var cueGap =
+                cues.length >= 2 ? Math.max(0.05, (lastCue - cues[0]) / (cues.length - 1)) : DRAW;
+              var latestStart = Math.max(0, duration - OUT - (NODE_UP + NODE_DOWN + SETTLE));
+              starts = nodeLabels.map(function (label, index) {
+                var at =
+                  index < cues.length
+                    ? cues[index]
+                    : lastCue + (index - (cues.length - 1)) * cueGap;
+                return Math.min(latestStart, Math.max(0, at));
+              });
+              SETTLE_START = Math.max.apply(null, starts) + NODE_UP + NODE_DOWN;
+            } else {
+              SETTLE_START = Math.max(SEQUENCE_START, IN - SETTLE);
+              var LAST_DRAW_START = Math.max(SEQUENCE_START, SETTLE_START - DRAW);
+              var STEP =
+                nodeLabels.length > 1
+                  ? (LAST_DRAW_START - SEQUENCE_START) / (nodeLabels.length - 1)
+                  : 0;
+              starts = nodeLabels.map(function (label, index) {
+                return SEQUENCE_START + index * STEP;
+              });
+            }
+            var IN_END = Math.min(Math.max(0, duration - OUT), Math.max(IN, SETTLE_START + SETTLE));
+            var HOLD = Math.max(0, duration - IN_END - OUT);
+            var HOLD_START = IN_END;
+            var OUT_START = IN_END + HOLD;
+
+            gsap.set(lockup, { opacity: 0, scale: 0.985 });
+            gsap.set(hub, { opacity: 0, scale: 0.86 });
+            gsap.set(orbit, { rotation: -4 });
+            gsap.set(nodes, { opacity: 0.24, scale: 0.92 });
+
+            var tl = gsap.timeline({ paused: true });
+
+            tl.to(lockup, { opacity: 1, scale: 1, duration: HUB_IN, ease: "power2.out" }, 0);
+            tl.to(hub, { opacity: 1, scale: 1, duration: HUB_IN, ease: "back.out(1.7)" }, 0);
+            tl.to(orbit, { rotation: 0, duration: IN, ease: "power3.out" }, 0);
+
+            connectors.forEach(function (connector, index) {
+              var start = starts[index];
+              var node = nodes[index];
+
+              tl.to(connector, { strokeDashoffset: 0, duration: DRAW, ease: "power2.out" }, start);
+              tl.to(
+                node,
+                { opacity: 1, scale: 1.055, duration: NODE_UP, ease: "power3.out" },
+                start,
+              );
+              tl.to(
+                node,
+                { opacity: 0.82, scale: 1, duration: NODE_DOWN, ease: "power2.out" },
+                start + NODE_UP,
+              );
+            });
+
+            tl.to(
+              nodes,
+              { opacity: 0.88, scale: 1, duration: SETTLE, ease: "power2.out" },
+              SETTLE_START,
+            );
+            tl.to(
+              connectors,
+              { opacity: 0.62, duration: SETTLE, ease: "power2.out" },
+              SETTLE_START,
+            );
+
+            var driftHalf = Math.max(0, HOLD - STILLNESS) / 2;
+            if (driftHalf > 0) {
+              tl.to(
+                orbit,
+                { rotation: 1.1, duration: driftHalf, ease: "sine.inOut", yoyo: true, repeat: 1 },
+                HOLD_START,
+              );
+            }
+
+            // OUT: optional departure; exit none holds until the frame cuts.
+            if (exit === "fade") {
+              tl.to(
+                lockup,
+                { opacity: 0, scale: 0.97, duration: OUT, ease: "power2.in" },
+                OUT_START,
+              );
+            } else if (exit === "up") {
+              tl.to(
+                lockup,
+                { opacity: 0, y: "-3cqh", duration: OUT, ease: "power2.in" },
+                OUT_START,
+              );
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["constellation-hub"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/constellation-hub/demo.html b/docs/public/catalog/components/constellation-hub/demo.html
new file mode 100644
index 0000000000..87c2f53ee5
--- /dev/null
+++ b/docs/public/catalog/components/constellation-hub/demo.html
@@ -0,0 +1,118 @@
+<!doctype html>
+<!--
+  constellation-hub demo. This standalone dark stage mounts the primitive
+  with non-default hub label, node list, and violet accent values.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Constellation Hub Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0b0c0e;
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --muted: #a8b0bf;
+        --surface: #171a20;
+        --border: #3a4250;
+        --brand: #71f5a7;
+        --accent: #61a8ff;
+        --accent-2: #c5a3ff;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-body: Inter, system-ui, sans-serif;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        --radius: 2.4cqmin;
+        --space-1: 1.2cqmin;
+        --space-2: 2.4cqmin;
+        --space-3: 4cqmin;
+        --dur-beat: 0.4s;
+        --ease-standard: cubic-bezier(0.215, 0.61, 0.355, 1);
+        --ease-emphasis: cubic-bezier(0.19, 1, 0.22, 1);
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(
+          ellipse at 50% 46%,
+          color-mix(in srgb, var(--surface, #171a20) 88%, var(--accent-2, #c5a3ff)) 0%,
+          var(--bg, #0b0c0e) 70%
+        );
+      }
+
+      .mount-card {
+        width: 78%;
+        height: 70%;
+        left: 11%;
+        top: 15%;
+        container-type: size;
+        overflow: hidden;
+        border: 1px solid color-mix(in srgb, var(--border, #3a4250) 74%, transparent);
+        border-radius: 32px;
+        background: color-mix(in srgb, var(--surface, #171a20) 76%, transparent);
+        box-shadow: 0 44px 110px color-mix(in srgb, var(--bg, #0b0c0e) 58%, transparent);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="constellation-hub-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4.5"
+      data-fps="30"
+    >
+      <div
+        id="constellation-hub-mount"
+        class="mount-card clip"
+        data-composition-id="constellation-hub"
+        data-composition-src="./constellation-hub.html"
+        data-variable-values='{"hub_label":"Creator OS","nodes":"Capture,Compose,Animate,Render,Publish","accent":"violet"}'
+        data-start="0"
+        data-duration="4.5"
+        data-track-index="0"
+        data-width="1498"
+        data-height="756"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      var demoTimeline = gsap.timeline({ paused: true });
+      demoTimeline.seek(0);
+      window.__timelines = window.__timelines || {};
+      window.__timelines["constellation-hub-demo"] = demoTimeline;
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "constellation-hub.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/count-up/README.md b/docs/public/catalog/components/count-up/README.md
new file mode 100644
index 0000000000..3c84bcc246
--- /dev/null
+++ b/docs/public/catalog/components/count-up/README.md
@@ -0,0 +1,38 @@
+# count-up
+
+A stat counter that eases from start to end, lands on the exact final integer with one restrained scale pulse, and holds until the frame cuts. Tabular numerals keep the line from shifting while digits change.
+
+3s authored, elastic HOLD, exit `none` by default.
+
+## Variables
+
+| id       | type    | default    | notes                                                                                          |
+| -------- | ------- | ---------- | ---------------------------------------------------------------------------------------------- |
+| `start`  | number  | `0`        | First value shown.                                                                             |
+| `end`    | number  | `100`      | Final value; the count always lands exactly here.                                              |
+| `prefix` | string  | `` (empty) | Fixed text before the value.                                                                   |
+| `suffix` | string  | `%`        | Fixed text after the value.                                                                    |
+| `accent` | enum    | `green`    | Count color: green rides `--brand`, blue rides `--accent`, violet rides `--accent-2`.          |
+| `glow`   | boolean | `false`    | Opt-in soft accent glow under the count. The register ships flat (weight 600, no text-shadow). |
+| `exit`   | enum    | `none`     | `none` holds until the cut; `fade` departs opacity-only; `up` is the upward release and fade.  |
+
+## Mount
+
+```html
+<div
+  class="clip"
+  data-composition-id="count-up"
+  data-composition-src="./count-up.html"
+  data-variable-values='{"start":0,"end":250,"prefix":"$","suffix":"K","accent":"blue"}'
+  data-start="0"
+  data-duration="3"
+  data-track-index="0"
+></div>
+```
+
+Elastic root: no `data-width`/`data-height`; it fills whatever box the host clip gives it. Timeline registers under the literal `count-up` key.
+
+## Notes
+
+- Wave-J register change: the previous forced upward-fade exit is gone (opt back in with `exit:"up"`), and the hardcoded weight-800 + text-shadow glow register is now weight 600 with `glow` off by default.
+- Deterministic: every displayed integer comes from an authored frame row; reverse and repeated seeks show the same value.
diff --git a/docs/public/catalog/components/count-up/count-up.html b/docs/public/catalog/components/count-up/count-up.html
new file mode 100644
index 0000000000..b186125393
--- /dev/null
+++ b/docs/public/catalog/components/count-up/count-up.html
@@ -0,0 +1,297 @@
+<!doctype html>
+<!--
+  count-up: HyperFrames video primitive (proof and stats / prove)
+
+  A value accelerates from start to end, decelerates into the exact final
+  integer, and lands with one restrained scale pulse. Prefix and suffix stay
+  fixed while tabular numerals prevent the line from shifting as digits change.
+
+  Variables:
+    - start (number, default 0): first value shown.
+    - end (number, default 100): final value shown.
+    - prefix (string, default ""): optional text before the value.
+    - suffix (string, default "%"): optional text after the value.
+    - accent (green | blue | violet, default "green"): count color.
+    - glow (boolean, default false): optional accent glow under the count.
+    - exit (none | fade | up, default "none"): optional departure.
+
+  Envelope, fixed IN and OUT with elastic HOLD only:
+    IN_BASE  = 2.05s, stage arrival, eased count, and landing pulse
+    HOLD     = max(0, D - IN - OUT), subtle drift then 0.25s stillness
+    OUT_BASE = 0.45s departure when exit is fade or up, 0s when exit is
+               none (the default: the landed value holds until the cut)
+    If D is shorter than IN_BASE + OUT_BASE, IN and OUT compress together.
+    The timeline is never time-scaled.
+
+  Determinism: each displayed integer is computed synchronously for a fixed
+  timeline position. The paused timeline sets the authored frame rows directly,
+  so reverse or repeated seeks show the same value without update callbacks.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, has no data-width or data-height,
+  and registers one paused timeline under the literal count-up key.
+-->
+<html
+  lang="en"
+  data-composition-id="count-up"
+  data-composition-duration="3"
+  data-composition-variables='[
+    { "id": "start", "type": "number", "role": "content", "label": "Start value", "description": "First value shown by the count.", "default": 0, "step": 1 },
+    { "id": "end", "type": "number", "role": "content", "label": "End value", "description": "Final value where the count lands.", "default": 100, "step": 1 },
+    { "id": "prefix", "type": "string", "role": "content", "label": "Prefix", "description": "Optional text shown before the value.", "default": "" },
+    { "id": "suffix", "type": "string", "role": "content", "label": "Suffix", "description": "Optional text shown after the value.", "default": "%" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Color used by the count.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "glow", "type": "boolean", "role": "style", "label": "Glow", "description": "Optional soft accent glow under the count. Off by default.", "default": false },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the landed value holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Count Up</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="count-up" data-duration="3" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .cu-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .cu-stage {
+            display: flex;
+            width: 92cqw;
+            align-items: baseline;
+            justify-content: center;
+            overflow: hidden;
+            color: var(--cu-accent);
+            font-size: var(--cu-font-size);
+            font-variant-numeric: tabular-nums;
+            font-feature-settings: "tnum" 1;
+            font-weight: 600;
+            line-height: 1;
+            letter-spacing: -0.045em;
+            text-align: center;
+            transform-origin: 50% 58%;
+            white-space: nowrap;
+            will-change: transform, opacity;
+          }
+
+          /* Glow is opt-in via the glow variable; the register ships flat. */
+          .cu-stage.cu-glow {
+            text-shadow: 0 2.4cqh 7cqh color-mix(in srgb, var(--cu-accent) 24%, transparent);
+          }
+
+          .cu-affix {
+            position: relative;
+            flex: 0 0 auto;
+            color: color-mix(in srgb, var(--cu-accent) 72%, var(--fg, #f8fafc));
+            font-size: 0.55em;
+            font-weight: 600;
+            letter-spacing: -0.02em;
+          }
+
+          /* Affix gaps are font-relative (em of the affix), never layout
+             spacing tokens, so the lockup scales with the figure. */
+          .cu-prefix {
+            margin-right: 0.14em;
+          }
+
+          .cu-suffix {
+            margin-left: 0.14em;
+          }
+
+          .cu-affix:empty {
+            display: none;
+          }
+
+          .cu-value {
+            display: inline-block;
+            min-width: 1ch;
+          }
+        </style>
+
+        <div
+          id="count-up-clip"
+          class="cu-clip clip"
+          data-start="0"
+          data-duration="3"
+          data-track-index="0"
+        >
+          <div class="cu-stage" role="img">
+            <span class="cu-affix cu-prefix" aria-hidden="true"></span>
+            <span class="cu-value" aria-hidden="true"></span>
+            <span class="cu-affix cu-suffix" aria-hidden="true"></span>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".cu-stage");
+            var valueElement = root.querySelector(".cu-value");
+            var prefixElement = root.querySelector(".cu-prefix");
+            var suffixElement = root.querySelector(".cu-suffix");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var startCandidate = vars.start;
+            var endCandidate = vars.end;
+            var start = Number.isFinite(startCandidate) ? startCandidate : 0;
+            var end = Number.isFinite(endCandidate) ? endCandidate : 100;
+            var prefix = vars.prefix == null ? "" : String(vars.prefix);
+            var suffix = vars.suffix == null ? "%" : String(vars.suffix);
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var glow = vars.glow === true || vars.glow === "true";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            function formatValue(value) {
+              return Math.round(value).toLocaleString("en-US");
+            }
+
+            prefixElement.textContent = prefix;
+            suffixElement.textContent = suffix;
+
+            // Optical trim: flex baseline alignment is metric, not optical.
+            // At 0.55em a lone currency glyph hugs the baseline and a lone
+            // math-axis glyph (+, ~) sits below the figures' visual middle,
+            // so the two affixes land at different heights. Lift both onto
+            // the figures' optical center; full-height strings (%, letters,
+            // digits) stay on the shared baseline.
+            function affixLift(text) {
+              if (/^[$€£¥₹₩]$/.test(text)) return "-0.31em";
+              if (/^[+−±×=~<>-]+$/.test(text)) return "-0.36em";
+              return "";
+            }
+            prefixElement.style.top = affixLift(prefix);
+            suffixElement.style.top = affixLift(suffix);
+            root.style.setProperty("--cu-accent", accentColors[accent]);
+            stage.classList.toggle("cu-glow", glow);
+
+            var startText = prefix + formatValue(start) + suffix;
+            var endText = prefix + formatValue(end) + suffix;
+            var characterCount = Math.max(
+              Array.from(startText).length,
+              Array.from(endText).length,
+              1,
+            );
+            var fittedCqw = Math.min(20, 150 / characterCount);
+            root.style.setProperty("--cu-font-size", "min(" + fittedCqw.toFixed(3) + "cqw, 34cqh)");
+            stage.setAttribute("aria-label", endText);
+
+            var IN_BASE = 2.05;
+            var OUT_BASE = exit === "none" ? 0 : 0.45;
+            var COUNT_BASE = 1.72;
+            var PULSE_HALF_BASE = 0.165;
+            var ARRIVAL_BASE = 0.38;
+            var STILLNESS = 0.25;
+            var FPS = 30;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "3"));
+            var totalBase = Math.max(0.001, IN_BASE + OUT_BASE);
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var COUNT = COUNT_BASE * scale;
+            var PULSE_HALF = PULSE_HALF_BASE * scale;
+            var ARRIVAL = ARRIVAL_BASE * scale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var HOLD_START = IN;
+            var OUT_START = IN + HOLD;
+            var lastFrame = Math.max(1, Math.round(COUNT * FPS));
+            var countEase = gsap.parseEase("sine.inOut");
+            var frameRows = [];
+
+            for (var frame = 0; frame <= lastFrame; frame += 1) {
+              var progress = frame / lastFrame;
+              var easedProgress = countEase(progress);
+              frameRows.push(formatValue(start + (end - start) * easedProgress));
+            }
+
+            gsap.set(stage, { opacity: 0, y: "2.2cqh", scale: 0.98 });
+            valueElement.textContent = frameRows[0];
+
+            var tl = gsap.timeline({ paused: true });
+
+            tl.to(stage, { opacity: 1, duration: ARRIVAL, ease: "power2.out" }, 0);
+            tl.to(stage, { y: "0cqh", scale: 1, duration: ARRIVAL, ease: "power3.out" }, 0);
+
+            frameRows.forEach(function (row, frameIndex) {
+              tl.set(valueElement, { textContent: row }, COUNT * (frameIndex / lastFrame));
+            });
+
+            tl.to(stage, { scale: 1.07, duration: PULSE_HALF, ease: "power3.out" }, COUNT);
+            tl.to(
+              stage,
+              { scale: 1, duration: PULSE_HALF, ease: "power2.out" },
+              COUNT + PULSE_HALF,
+            );
+
+            var driftDuration = Math.max(0, HOLD - STILLNESS);
+            if (driftDuration > 0) {
+              tl.to(
+                stage,
+                {
+                  y: "-0.55cqh",
+                  duration: driftDuration / 2,
+                  ease: "sine.inOut",
+                  yoyo: true,
+                  repeat: 1,
+                },
+                HOLD_START,
+              );
+            }
+
+            // OUT: optional departure; exit none holds until the frame cuts.
+            if (exit === "up") {
+              tl.to(stage, { y: "-2.2cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              tl.to(
+                stage,
+                { opacity: 0, scale: 0.985, duration: OUT, ease: "power2.in" },
+                OUT_START,
+              );
+            } else if (exit === "fade") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["count-up"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/count-up/demo.html b/docs/public/catalog/components/count-up/demo.html
new file mode 100644
index 0000000000..2851c387fc
--- /dev/null
+++ b/docs/public/catalog/components/count-up/demo.html
@@ -0,0 +1,117 @@
+<!doctype html>
+<!--
+  count-up demo. This standalone composition mounts count-up.html through
+  data-composition-src. Non-default values prove every variable path while
+  the primitive stays elastic to the sized host card.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Count Up Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #0b0c0e);
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --muted: #94a3b8;
+        --surface: #14171c;
+        --border: #343a46;
+        --brand: #71f5a7;
+        --accent: #61a8ff;
+        --accent-2: #c5a3ff;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-body: Inter, system-ui, sans-serif;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        --radius: 3cqmin;
+        --space-1: 1.2cqmin;
+        --space-2: 2.4cqmin;
+        --space-3: 4cqmin;
+        --dur-beat: 0.4s;
+        --ease-standard: cubic-bezier(0.215, 0.61, 0.355, 1);
+        --ease-emphasis: cubic-bezier(0.19, 1, 0.22, 1);
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(
+          ellipse at 50% 44%,
+          color-mix(in srgb, var(--surface) 88%, var(--accent-2)) 0%,
+          var(--bg) 72%
+        );
+      }
+
+      .mount-card {
+        width: 72%;
+        height: 42%;
+        left: 14%;
+        top: 29%;
+        container-type: size;
+        overflow: hidden;
+        border: 0.12cqmin solid color-mix(in srgb, var(--border) 72%, transparent);
+        border-radius: calc(var(--radius) * 1.35);
+        background: color-mix(in srgb, var(--surface) 78%, transparent);
+        box-shadow: 0 4cqh 10cqh color-mix(in srgb, var(--bg) 64%, transparent);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="count-up-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="3"
+      data-fps="30"
+    >
+      <div
+        id="count-up-mount"
+        class="mount-card clip"
+        data-composition-id="count-up"
+        data-composition-src="./count-up.html"
+        data-variable-values='{"start":1200,"end":12500,"prefix":"$","suffix":"+","accent":"violet"}'
+        data-start="0"
+        data-duration="3"
+        data-track-index="0"
+        data-width="1382"
+        data-height="454"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["count-up-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "count-up.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/cta-close/README.md b/docs/public/catalog/components/cta-close/README.md
new file mode 100644
index 0000000000..e717c3b7fc
--- /dev/null
+++ b/docs/public/catalog/components/cta-close/README.md
@@ -0,0 +1,41 @@
+# cta-close
+
+The action-only close: a display-scale action line lands per word, filling 70 to 85 percent of the frame width with real air above and below, one generous button capsule pops beneath it with a single restrained overshoot, and the finished lockup stays completely still until the frame cuts. Monotone: ink on ground, accent only on the capsule.
+
+3.5s authored, elastic HOLD, exit `none` by default (this primitive closes films).
+
+## Variables
+
+| id             | type   | default          | notes                                                                                                                        |
+| -------------- | ------ | ---------------- | ---------------------------------------------------------------------------------------------------------------------------- |
+| `action_line`  | string | `Make it happen` | Two to four word closing action; character-aware fit targets 70 to 85 percent of the frame width, short lines cap on height. |
+| `button_label` | string | `Start now`      | Text inside the single CTA capsule; label auto-fits, set in the body face.                                                   |
+| `accent`       | enum   | `green`          | Capsule color: green rides `--brand`, blue rides `--accent`, violet rides `--accent-2`.                                      |
+| `exit`         | enum   | `none`           | `none` holds until the cut; `fade` and `up` depart the lockup over the final 0.45s.                                          |
+
+## Choreography
+
+1. The action line lands per word (rise + fade, power3.out, 0.10s stagger) at display scale.
+2. The capsule pops beneath with ONE restrained overshoot (back.out from 0.85 scale) at 0.72s; the close is settled by 1.32s.
+3. Dead-still confident hold to the end of the mount. No drift, no pulse.
+
+## Mount
+
+```html
+<div
+  class="clip"
+  data-composition-id="cta-close"
+  data-composition-src="./cta-close.html"
+  data-variable-values='{"action_line":"Ship your first film","button_label":"Get started","accent":"violet"}'
+  data-start="0"
+  data-duration="3.5"
+  data-track-index="0"
+></div>
+```
+
+Elastic root: no `data-width`/`data-height`; it fills whatever box the host clip gives it. Timeline registers under the literal `cta-close` key.
+
+## Notes
+
+- For an identity close (wordmark + tagline + URL) use `logo-brand-close`; this unit is action-only.
+- The hold is deliberately dead still: no drift, no pulse.
diff --git a/docs/public/catalog/components/cta-close/cta-close.html b/docs/public/catalog/components/cta-close/cta-close.html
new file mode 100644
index 0000000000..e31bcece39
--- /dev/null
+++ b/docs/public/catalog/components/cta-close/cta-close.html
@@ -0,0 +1,264 @@
+<!doctype html>
+<!--
+  cta-close: HyperFrames video primitive (call to action / close)
+
+  The action-only close. A display-scale action line lands per word, sized by
+  a character-aware fit so it fills 70 to 85 percent of the frame width with
+  real air above and below. One generous button capsule pops beneath it with
+  a single restrained overshoot, then the finished lockup holds dead still
+  until the frame cuts. Monotone: ink on ground, accent only on the capsule.
+
+  Variables:
+    action_line: two to four word closing action
+    button_label: capsule label
+    accent: green, blue, or violet capsule color
+    exit: none, fade, or up (default none; this primitive closes films)
+
+  Envelope:
+    IN_BASE = 1.32s, per-word landing followed by the capsule pop
+    HOLD = the rest of D, completely still
+    OUT = none by default; 0.45s lockup departure when exit is fade or up
+    If D is shorter than the fixed phases, they compress to fit. The timeline
+    is never time-scaled.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, has no data-width or data-height,
+  and registers one paused timeline under the literal cta-close key.
+-->
+<html
+  lang="en"
+  data-composition-id="cta-close"
+  data-composition-duration="3.5"
+  data-composition-variables='[
+    { "id": "action_line", "type": "string", "role": "content", "label": "Action line", "description": "Two to four word action that closes the film.", "default": "Make it happen" },
+    { "id": "button_label", "type": "string", "role": "content", "label": "Button label", "description": "Text displayed inside the single CTA capsule.", "default": "Start now" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Contract color used by the CTA capsule.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the lockup holds until the frame cuts (this primitive closes films).", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>CTA Close</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="cta-close" data-duration="3.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .cc-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+            background: var(--bg, #0b0c0e);
+          }
+
+          .cc-lockup {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 7cqh;
+            max-width: 96cqw;
+            text-align: center;
+          }
+
+          .cc-action {
+            margin: 0;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: var(--cc-action-size, min(10.4cqw, 30cqh));
+            font-weight: 600;
+            line-height: 1.02;
+            letter-spacing: -0.035em;
+            white-space: nowrap;
+          }
+
+          .cc-w {
+            display: inline-block;
+            will-change: transform, opacity;
+          }
+
+          .cc-button {
+            margin: 0;
+            padding: 2.9cqh 5cqw;
+            overflow: hidden;
+            border: 0;
+            border-radius: 999px;
+            background: var(--cc-accent);
+            color: var(--bg, #0b0c0e);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            font-size: var(--cc-button-size, min(3.4cqw, 6cqh));
+            font-weight: 600;
+            line-height: 1;
+            letter-spacing: -0.01em;
+            white-space: nowrap;
+            transform-origin: 50% 50%;
+            will-change: transform, opacity;
+          }
+        </style>
+
+        <div
+          id="cta-close-clip"
+          class="cc-clip clip"
+          data-start="0"
+          data-duration="3.5"
+          data-track-index="0"
+        >
+          <div class="cc-lockup">
+            <h2 class="cc-action"></h2>
+            <button class="cc-button" type="button" tabindex="-1"></button>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var lockup = root.querySelector(".cc-lockup");
+            var actionLine = root.querySelector(".cc-action");
+            var button = root.querySelector(".cc-button");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var actionText =
+              vars.action_line == null
+                ? "Make it happen"
+                : String(vars.action_line).trim().replace(/\s+/g, " ");
+            var buttonText =
+              vars.button_label == null
+                ? "Start now"
+                : String(vars.button_label).trim().replace(/\s+/g, " ");
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            // The line lands per word: one span per word, natural spaces kept
+            // between them so the display tracking never crushes word gaps.
+            actionLine.setAttribute("aria-label", actionText);
+            var words = actionText ? actionText.split(" ") : [];
+            words.forEach(function (word, index) {
+              if (index > 0) actionLine.appendChild(document.createTextNode(" "));
+              var span = document.createElement("span");
+              span.className = "cc-w";
+              span.setAttribute("aria-hidden", "true");
+              span.textContent = word;
+              actionLine.appendChild(span);
+            });
+            var wordEls = actionLine.querySelectorAll(".cc-w");
+            button.textContent = buttonText;
+            root.style.setProperty("--cc-accent", accentColors[accent]);
+
+            // Character-count fitting is deterministic before the template is
+            // laid out. The 0.47em advance estimate lands common display faces
+            // at 70 to 85 percent of the frame width; short lines cap on
+            // height instead so two-word closes stay monumental without
+            // touching the edges.
+            var actionCharacters = Math.max(1, Array.from(actionText).length);
+            var actionSize = Math.min(24, 76 / (actionCharacters * 0.47));
+            var buttonCharacters = Math.max(1, Array.from(buttonText).length);
+            var buttonSize = Math.min(3.5, 50 / (buttonCharacters * 0.5));
+            root.style.setProperty(
+              "--cc-action-size",
+              "min(" + actionSize.toFixed(3) + "cqw, 30cqh)",
+            );
+            root.style.setProperty(
+              "--cc-button-size",
+              "min(" + buttonSize.toFixed(3) + "cqw, 6cqh)",
+            );
+
+            var IN_BASE = 1.32;
+            var OUT_BASE = exit === "none" ? 0 : 0.45;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "3.5"));
+            var envelopeScale = Math.min(1, duration / (IN_BASE + OUT_BASE));
+            var WORDS_AT = 0.06 * envelopeScale;
+            var WORD_DURATION = 0.62 * envelopeScale;
+            var WORD_STAGGER = 0.1 * envelopeScale;
+            var BUTTON_AT = 0.72 * envelopeScale;
+            var BUTTON_DURATION = 0.6 * envelopeScale;
+            var BUTTON_FADE = 0.22 * envelopeScale;
+            var OUT = OUT_BASE * envelopeScale;
+            var OUT_START = duration - OUT;
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN, phase one: the action line lands per word at display scale.
+            tl.fromTo(
+              wordEls,
+              { opacity: 0, y: "8cqh" },
+              {
+                opacity: 1,
+                y: 0,
+                duration: WORD_DURATION,
+                ease: "power3.out",
+                stagger: WORD_STAGGER,
+              },
+              WORDS_AT,
+            );
+
+            // IN, phase two: the capsule pops beneath with ONE restrained
+            // overshoot (back.out), a real button under a monumental line.
+            tl.fromTo(
+              button,
+              { scale: 0.85, y: "3cqh" },
+              { scale: 1, y: 0, duration: BUTTON_DURATION, ease: "back.out(1.5)" },
+              BUTTON_AT,
+            );
+            tl.fromTo(
+              button,
+              { opacity: 0 },
+              { opacity: 1, duration: BUTTON_FADE, ease: "power2.out" },
+              BUTTON_AT,
+            );
+
+            // HOLD: dead still. The empty set pins the timeline to the full
+            // mount duration so seeks inside the hold land on the held pose.
+            tl.set({}, {}, duration);
+
+            // OUT: optional departure; exit none holds the still lockup
+            // until the frame cuts (this primitive closes films).
+            if (exit === "fade") {
+              tl.to(lockup, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "up") {
+              tl.to(
+                lockup,
+                { opacity: 0, y: "-5cqh", duration: OUT, ease: "power2.in" },
+                OUT_START,
+              );
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["cta-close"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/cta-close/demo.html b/docs/public/catalog/components/cta-close/demo.html
new file mode 100644
index 0000000000..b6420621f0
--- /dev/null
+++ b/docs/public/catalog/components/cta-close/demo.html
@@ -0,0 +1,111 @@
+<!doctype html>
+<!--
+  cta-close demo. Full-bleed mount on a light editorial token backdrop: the
+  close owns the whole 1920x1080 frame, proving the display line lands at
+  monumental scale with non-default copy and the violet accent capsule.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>CTA Close Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #faf8f3;
+      }
+
+      #root {
+        --bg: #faf8f3;
+        --fg: #191713;
+        --muted: #6f695d;
+        --surface: #f1ede3;
+        --border: #e2dccd;
+        --brand: #0d7a4f;
+        --accent: #1d4ed8;
+        --accent-2: #6d3ae0;
+        --font-display: Georgia, "Times New Roman", serif;
+        --font-body: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        --radius: 0.9cqmin;
+        --space-1: 1.1cqmin;
+        --space-2: 2.2cqmin;
+        --space-3: 3.8cqmin;
+        --dur-beat: 0.48s;
+        --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
+        --ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1);
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        border-top: 1px solid var(--border, #e2dccd);
+        border-bottom: 1px solid var(--border, #e2dccd);
+        background: var(--bg, #faf8f3);
+      }
+
+      .mount-stage {
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        container-type: size;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="cta-close-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="3.5"
+      data-fps="30"
+    >
+      <div
+        id="cta-close-mount"
+        class="mount-stage clip"
+        data-composition-id="cta-close"
+        data-composition-src="./cta-close.html"
+        data-variable-values='{"action_line":"Ship your first film","button_label":"Get started free","accent":"violet"}'
+        data-start="0"
+        data-duration="3.5"
+        data-track-index="0"
+        data-width="1920"
+        data-height="1080"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["cta-close-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "cta-close.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/cta-lockup/cta-lockup.html b/docs/public/catalog/components/cta-lockup/cta-lockup.html
new file mode 100644
index 0000000000..93bd518535
--- /dev/null
+++ b/docs/public/catalog/components/cta-lockup/cta-lockup.html
@@ -0,0 +1,258 @@
+<!doctype html>
+<!--
+  cta-lockup: HyperFrames video primitive (ui-props / holdable / ask)
+
+  Concept: a canonical closing lockup with one frozen reveal order. The
+  action line arrives first, the CTA capsule pops beneath it with a restrained
+  overshoot second, and supporting microcopy settles last. The completed
+  lockup then holds with confidence.
+
+  Use when: a product film, launch video, or explainer needs one clear final
+  action without adding a second visual idea.
+
+  Variables:
+    - action_line (string, default "Start building today"): primary close.
+    - button_label (string, default "Get HyperFrames"): CTA capsule label.
+    - microcopy (string, default "Free while in beta"): supporting detail.
+    - accent (green | blue | violet, default green): capsule fill.
+
+  Envelope:
+    IN   1.60s fixed, action line then capsule then microcopy.
+    HOLD elastic, with one nearly imperceptible drift cycle across the full
+         remaining duration so longer mounts stretch only this phase.
+    OUT  none. This closing lockup establishes the final held state.
+    If D is shorter than 1.60s, IN compresses to fit and HOLD becomes zero.
+
+  Mount contract: this file is a template-wrapped sub-composition. #root
+  fills the host box, establishes the container query basis, carries no
+  data-width or data-height, and registers one paused GSAP timeline under
+  the hardcoded literal id "cta-lockup".
+-->
+<html
+  lang="en"
+  data-composition-id="cta-lockup"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "action_line", "type": "string", "role": "content", "label": "Action line", "description": "Primary action statement shown above the CTA.", "default": "Start building today" },
+    { "id": "button_label", "type": "string", "role": "content", "label": "Button label", "description": "Text displayed inside the CTA capsule.", "default": "Get HyperFrames" },
+    { "id": "microcopy", "type": "string", "role": "content", "label": "Microcopy", "description": "Supporting detail shown below the CTA capsule.", "default": "Free while in beta" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Fill color used by the CTA capsule.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>CTA Lockup</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="cta-lockup" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .cl-clip {
+            width: 100%;
+            height: 100%;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+          }
+
+          .cl-lockup {
+            width: min(88cqw, 150cqh);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            text-align: center;
+            will-change: transform;
+          }
+
+          .cl-action {
+            max-width: 86cqw;
+            margin: 0 0 6.5cqh;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: min(10cqw, 14cqh);
+            font-weight: 760;
+            line-height: 1.02;
+            letter-spacing: -0.045em;
+            text-wrap: balance;
+            will-change: transform, opacity;
+          }
+
+          .cl-button {
+            min-width: 34cqw;
+            max-width: 78cqw;
+            margin: 0 0 3.8cqh;
+            padding: 3.2cqh 5.5cqw;
+            overflow: hidden;
+            border: 0;
+            border-radius: 50cqh;
+            background: var(--cl-accent, #22c55e);
+            box-shadow: 0 2.2cqh 6cqh color-mix(in srgb, var(--cl-accent, #22c55e) 28%, transparent);
+            color: #07110d;
+            font: inherit;
+            font-size: min(4.3cqw, 6.8cqh);
+            font-weight: 760;
+            line-height: 1;
+            letter-spacing: -0.02em;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            transform-origin: 50% 50%;
+            will-change: transform, opacity;
+          }
+
+          .cl-microcopy {
+            max-width: 76cqw;
+            margin: 0;
+            color: var(--muted, #cbd5e1);
+            font-size: min(3cqw, 4.2cqh);
+            font-weight: 520;
+            line-height: 1.25;
+            letter-spacing: 0.01em;
+            text-wrap: balance;
+            will-change: transform, opacity;
+          }
+        </style>
+
+        <div
+          id="cta-lockup-clip"
+          class="cl-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="cl-lockup">
+            <h2 class="cl-action"></h2>
+            <button class="cl-button" type="button" tabindex="-1"></button>
+            <p class="cl-microcopy"></p>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var lockup = root.querySelector(".cl-lockup");
+            var actionLine = root.querySelector(".cl-action");
+            var button = root.querySelector(".cl-button");
+            var microcopy = root.querySelector(".cl-microcopy");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var actionText =
+              vars.action_line == null ? "Start building today" : String(vars.action_line);
+            var buttonText =
+              vars.button_label == null ? "Get HyperFrames" : String(vars.button_label);
+            var microcopyText =
+              vars.microcopy == null ? "Free while in beta" : String(vars.microcopy);
+            var accentColors = {
+              green: "var(--brand, #22c55e)",
+              blue: "var(--accent, #38bdf8)",
+              violet: "var(--accent-2, #a78bfa)",
+            };
+            var accentName = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+
+            actionLine.textContent = actionText;
+            button.textContent = buttonText;
+            microcopy.textContent = microcopyText;
+            root.style.setProperty("--cl-accent", accentColors[accentName]);
+
+            var IN_BASE = 1.6;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var envelopeScale = Math.min(1, duration / IN_BASE);
+            var IN = IN_BASE * envelopeScale;
+            var HOLD = Math.max(0, duration - IN);
+
+            var ACTION_DURATION = 0.5 * envelopeScale;
+            var BUTTON_AT = 0.56 * envelopeScale;
+            var BUTTON_DURATION = 0.6 * envelopeScale;
+            var BUTTON_OPACITY_DURATION = 0.24 * envelopeScale;
+            var MICROCOPY_AT = 1.18 * envelopeScale;
+            var MICROCOPY_DURATION = 0.42 * envelopeScale;
+
+            var tl = gsap.timeline({ paused: true });
+
+            tl.fromTo(
+              actionLine,
+              { opacity: 0, y: "3.4cqh" },
+              { opacity: 1, y: 0, duration: ACTION_DURATION, ease: "power3.out" },
+              0,
+            );
+            tl.fromTo(
+              button,
+              { scale: 0.72, y: "2.2cqh" },
+              {
+                scale: 1,
+                y: 0,
+                duration: BUTTON_DURATION,
+                ease: "back.out(1.7)",
+              },
+              BUTTON_AT,
+            );
+            tl.fromTo(
+              button,
+              { opacity: 0 },
+              {
+                opacity: 1,
+                duration: BUTTON_OPACITY_DURATION,
+                ease: "power2.out",
+              },
+              BUTTON_AT,
+            );
+            tl.fromTo(
+              microcopy,
+              { opacity: 0, y: "1.8cqh" },
+              {
+                opacity: 1,
+                y: 0,
+                duration: MICROCOPY_DURATION,
+                ease: "power2.out",
+              },
+              MICROCOPY_AT,
+            );
+
+            if (HOLD > 0) {
+              tl.fromTo(
+                lockup,
+                { y: 0 },
+                {
+                  y: "-0.35cqh",
+                  duration: HOLD / 2,
+                  ease: "sine.inOut",
+                  yoyo: true,
+                  repeat: 1,
+                },
+                IN,
+              );
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["cta-lockup"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/cta-lockup/demo.html b/docs/public/catalog/components/cta-lockup/demo.html
new file mode 100644
index 0000000000..397a767df1
--- /dev/null
+++ b/docs/public/catalog/components/cta-lockup/demo.html
@@ -0,0 +1,102 @@
+<!doctype html>
+<!--
+  cta-lockup demo. This standalone composition mounts cta-lockup.html through
+  data-composition-src. Non-default copy and accent values prove that every
+  variable flows through the mount while the primitive stays host-sized.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>CTA Lockup Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0b0c0e;
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --muted: #aeb7c5;
+        --surface: #15181d;
+        --border: #303640;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-body: Inter, system-ui, sans-serif;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 44%, #171a20 0%, var(--bg) 70%);
+      }
+
+      .mount-card {
+        width: 48%;
+        height: 48%;
+        left: 26%;
+        top: 26%;
+        container-type: size;
+        overflow: hidden;
+        border: 0.12cqmin solid color-mix(in srgb, var(--border) 72%, transparent);
+        border-radius: 3cqmin;
+        background: color-mix(in srgb, var(--surface) 82%, transparent);
+        box-shadow: 0 4cqh 10cqh color-mix(in srgb, var(--bg) 68%, transparent);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="cta-lockup-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="cta-lockup-mount"
+        class="mount-card clip"
+        data-composition-id="cta-lockup"
+        data-composition-src="./cta-lockup.html"
+        data-variable-values='{"action_line":"Build your next video","button_label":"Try it now","microcopy":"No credit card required","accent":"violet"}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="922"
+        data-height="518"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["cta-lockup-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "cta-lockup.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/cursor-glyph-trail/README.md b/docs/public/catalog/components/cursor-glyph-trail/README.md
new file mode 100644
index 0000000000..a29e1add5c
--- /dev/null
+++ b/docs/public/catalog/components/cursor-glyph-trail/README.md
@@ -0,0 +1,51 @@
+# cursor-glyph-trail
+
+An actor (default: a cursor dot) travels an authored path and deposits small dithered glyphs at its past positions. Each glyph pops in where the actor passed and decays in place; stamps land at fixed arc-length spacing along the path, so the per-second stamp rate scales with the actor's velocity. The jh3yy stamp-and-decay register: the trail is the residue of the motion, fully dissolved before the hold.
+
+4s authored, elastic HOLD, exit `none` by default.
+
+## Variables
+
+| id        | type   | default  | notes                                                                                                         |
+| --------- | ------ | -------- | ------------------------------------------------------------------------------------------------------------- |
+| `glyphs`  | string | `░▒▓+·×` | Stamp charset; one glyph per stamp is chosen by a fixed-seed LCG.                                             |
+| `density` | enum   | `med`    | Arc-length spacing between stamps: `low` (4.6), `med` (2.9), `high` (1.8) percent units.                      |
+| `path`    | enum   | `sweep`  | `sweep` is an S-curve lower-left to upper-right; `arc` rises over the top; `zigzag` cuts three straight legs. |
+| `fade`    | number | `0.8`    | Per-stamp decay window in seconds, clamped 0.3 to 1.5; per stamp varied 0.75x to 1.25x.                       |
+| `accent`  | enum   | `green`  | Trail and actor color: green rides `--brand`, blue rides `--accent`, violet rides `--accent-2`.               |
+| `exit`    | enum   | `none`   | `none` holds until the cut; `fade` departs opacity-only; `up` rises out.                                      |
+
+## Actor slot
+
+The actor is a slot. Place an inert template anywhere in the HOST page (templates never render, and the runtime wipes the host clip's own children on mount, so the slot lives at document level):
+
+```html
+<template data-slot="cursor-glyph-trail-actor">
+  <img src="./assets/cursor.svg" alt="" style="width: 4cqmin" />
+</template>
+```
+
+With no slot, the primitive renders a token cursor dot (accent core, hairline ring, contract tokens only).
+
+## Mount
+
+```html
+<div
+  class="clip"
+  data-composition-id="cursor-glyph-trail"
+  data-composition-src="./cursor-glyph-trail.html"
+  data-variable-values='{"path":"zigzag","density":"high","accent":"blue"}'
+  data-start="0"
+  data-duration="4"
+  data-track-index="0"
+></div>
+```
+
+Elastic root: no `data-width`/`data-height`; it fills whatever box the host clip gives it. Timeline registers under the literal `cursor-glyph-trail` key.
+
+## Notes
+
+- Deterministic: the stamp table (positions, times, glyph choices, jitter, sizes, peaks, decay multipliers) is built once at mount from fixed LCG seed `0x67117a11`. Stamps carry no tweens: each stamp's opacity is recomputed on every timeline update as a pure function `f(tl.time() - t_i)` of its table row (two sequential tweens on one property render in direction-dependent order under GSAP seeks), and the actor position is recomputed from `tl.time()` the same way, so eventful seeks (`suppressEvents=false`, the engine's render path) land identical frames in any order and either direction.
+- Density law: stamps land at fixed arc-length spacing, so faster travel deposits more stamps per second; the shared ease (power2-style inOut) makes the trail thin at the ends and dense through the middle.
+- Every stamp's decay completes inside IN by construction (`IN = travel + pop + fade * 1.25 + margin`), so the HOLD is truly still: the actor rests at the path end and the field is empty.
+- The travel ease is one shared function used by both the stamp-table sampler and the per-update actor position, so stamps always sit exactly on the actor's past path.
diff --git a/docs/public/catalog/components/cursor-glyph-trail/cursor-glyph-trail.html b/docs/public/catalog/components/cursor-glyph-trail/cursor-glyph-trail.html
new file mode 100644
index 0000000000..76d342a385
--- /dev/null
+++ b/docs/public/catalog/components/cursor-glyph-trail/cursor-glyph-trail.html
@@ -0,0 +1,390 @@
+<!doctype html>
+<!--
+  cursor-glyph-trail: HyperFrames video primitive (product demo / trails)
+
+  An actor (default: a cursor dot) travels an authored path and deposits
+  small dithered glyphs at its past positions. Each glyph pops in where the
+  actor passed and decays in place; stamps land at fixed arc-length spacing,
+  so the per-second stamp rate scales with the actor's velocity. The jh3yy
+  stamp-and-decay register: the trail is the residue of the motion, and it
+  has fully dissolved before the hold.
+
+  The actor is a SLOT. Callers supply content by placing an inert template
+  anywhere in the HOST page (templates never render, and the runtime wipes
+  the host clip's own children on mount, so the slot lives at document
+  level):
+
+    <template data-slot="cursor-glyph-trail-actor"> ... </template>
+
+  With no slot, the primitive renders a token cursor dot (accent core,
+  hairline ring).
+
+  Variables (declared in data-composition-variables below):
+    - glyphs (string): the stamp charset; one glyph is chosen per stamp by
+      a fixed-seed LCG. Default is a dithered block-and-punctuation set.
+    - density ("low" | "med" | "high", default "med"): arc-length spacing
+      between stamps; higher density means tighter spacing.
+    - path ("sweep" | "arc" | "zigzag", default "sweep"): the authored
+      travel path preset.
+    - fade (number seconds, default 0.8, clamped 0.3 to 1.5): the decay
+      window of each stamp; per-stamp decay varies 0.75x to 1.25x of it.
+    - accent ("green" | "blue" | "violet", default "green"): green rides
+      --brand, blue rides --accent, violet rides --accent-2.
+    - exit ("none" | "fade" | "up", default "none"): frame roots own
+      transitions; the default holds the final frame to the last pixel.
+
+  Envelope, fixed IN and OUT with elastic HOLD only (never timeScale):
+    IN_BASE  = TRAVEL (2.4s) + pop (0.07s) + fade * 1.25 + 0.05s margin;
+               the actor arrives at TRAVEL and every stamp's decay tween
+               ends inside IN, so the HOLD is truly still
+    HOLD     = max(0, D - IN - OUT)
+    OUT_BASE = 0.45s  only when exit != none
+    If D < IN_BASE + OUT_BASE, the whole envelope compresses together.
+
+  Determinism: the stamp table (positions, times, glyph choices, jitter,
+  sizes, peaks, decay multipliers) is computed exactly once during
+  synchronous mount from fixed LCG seed 0x67117a11. On every timeline
+  update, each stamp's opacity is recomputed as a pure function
+  f(tl.time() - t_i) of its table row, and the actor's position as a pure
+  function of tl.time(); stamps deliberately carry NO tweens (two
+  sequential tweens on one property render in direction-dependent order
+  under GSAP seeks, which breaks byte-identical frames). No Math.random
+  at runtime, no wall clock, no incremental state, no
+  requestAnimationFrame. Eventful seeks (suppressEvents=false, the
+  engine's render path) land identical frames in any order and either
+  direction.
+
+  Mount contract: the runtime clones only this template. #root fills the
+  host box (no data-width/data-height, container-type: size, cqmin units),
+  is styled via #root only, and registers one paused timeline under the
+  LITERAL "cursor-glyph-trail" key.
+-->
+<html
+  lang="en"
+  data-composition-id="cursor-glyph-trail"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "glyphs", "type": "string", "role": "content", "label": "Glyphs", "description": "Stamp charset; one glyph per stamp is chosen deterministically.", "default": "░▒▓+·×" },
+    { "id": "density", "type": "enum", "role": "style", "label": "Density", "description": "Arc-length spacing between stamps along the path.", "default": "med", "options": [{ "value": "low", "label": "Low" }, { "value": "med", "label": "Medium" }, { "value": "high", "label": "High" }] },
+    { "id": "path", "type": "enum", "role": "timing", "label": "Path", "description": "Authored travel path preset.", "default": "sweep", "options": [{ "value": "sweep", "label": "Sweep" }, { "value": "arc", "label": "Arc" }, { "value": "zigzag", "label": "Zigzag" }] },
+    { "id": "fade", "type": "number", "role": "timing", "label": "Fade", "description": "Per-stamp decay window in seconds, clamped 0.3 to 1.5.", "default": 0.8 },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Trail and actor color: green rides --brand, blue rides --accent, violet rides --accent-2.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the settled actor holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Cursor Glyph Trail</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="cursor-glyph-trail" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            pointer-events: none;
+          }
+
+          .cgt-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .cgt-stage {
+            position: absolute;
+            inset: 0;
+            will-change: transform, opacity;
+          }
+
+          .cgt-field {
+            position: absolute;
+            inset: 0;
+          }
+
+          .cgt-stamp {
+            position: absolute;
+            opacity: 0;
+            line-height: 1;
+            font-weight: 500;
+            will-change: opacity;
+            user-select: none;
+          }
+
+          .cgt-actor {
+            position: absolute;
+            opacity: 0;
+            transform: translate(-50%, -50%);
+            will-change: opacity;
+          }
+
+          .cgt-dot {
+            width: 3.4cqmin;
+            height: 3.4cqmin;
+            border-radius: 50%;
+            background: var(--cgt-accent);
+            border: 0.35cqmin solid color-mix(in srgb, var(--fg, #f8fafc) 82%, var(--cgt-accent));
+            box-shadow: 0 0.6cqmin 2.4cqmin color-mix(in srgb, var(--bg, #000000) 35%, transparent);
+          }
+        </style>
+
+        <div
+          id="cursor-glyph-trail-clip"
+          class="cgt-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="cgt-stage">
+            <div class="cgt-field" aria-hidden="true"></div>
+            <div class="cgt-actor">
+              <div class="cgt-dot"></div>
+            </div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".cgt-stage");
+            var field = root.querySelector(".cgt-field");
+            var actor = root.querySelector(".cgt-actor");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            // Arc-length spacing (percent-of-stage units). Fixed spacing
+            // along the path means the per-second stamp rate rises and
+            // falls with the actor's velocity: the density law.
+            var spacingByDensity = { low: 4.6, med: 2.9, high: 1.8 };
+            var density = Object.prototype.hasOwnProperty.call(spacingByDensity, vars.density)
+              ? vars.density
+              : "med";
+            var pathName = vars.path === "arc" || vars.path === "zigzag" ? vars.path : "sweep";
+            var glyphSource =
+              typeof vars.glyphs === "string" && vars.glyphs.length > 0 ? vars.glyphs : "░▒▓+·×";
+            var glyphSet = Array.from(glyphSource);
+            var fadeRaw = parseFloat(vars.fade);
+            var fade = isFinite(fadeRaw) ? Math.min(1.5, Math.max(0.3, fadeRaw)) : 0.8;
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #52525b)",
+              blue: "var(--accent, #52525b)",
+              violet: "var(--accent-2, #52525b)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            root.style.setProperty("--cgt-accent", accentColors[accent]);
+
+            // SLOT. Caller templates live at HOST DOCUMENT level (the mount
+            // wipes host-clip children, and templates never render).
+            var hostDoc = root.ownerDocument;
+            var slotTemplate = null;
+            try {
+              slotTemplate = hostDoc.querySelector(
+                'template[data-slot="cursor-glyph-trail-actor"]',
+              );
+            } catch (error) {
+              slotTemplate = null;
+            }
+            if (slotTemplate) {
+              actor.querySelector(".cgt-dot").remove();
+              actor.appendChild(hostDoc.importNode(slotTemplate.content, true));
+            }
+
+            // Envelope: fixed IN/OUT, elastic HOLD, never time-scaled.
+            var POP = 0.07;
+            var TRAVEL_BASE = 2.4;
+            var IN_BASE = TRAVEL_BASE + POP + fade * 1.25 + 0.05;
+            var OUT_BASE = exit === "none" ? 0 : 0.45;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var totalBase = Math.max(0.001, IN_BASE + OUT_BASE);
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var TRAVEL = TRAVEL_BASE * scale;
+            var pop = POP * scale;
+            var fadeEff = fade * scale;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var OUT_START = IN + HOLD;
+
+            // Path presets in percent-of-stage coordinates.
+            var zigzagPoints = [
+              { x: 10, y: 34 },
+              { x: 38, y: 70 },
+              { x: 64, y: 32 },
+              { x: 90, y: 64 },
+            ];
+            function pathPoint(u) {
+              if (pathName === "arc") {
+                return { x: 12 + 76 * u, y: 68 - 40 * Math.sin(Math.PI * u) };
+              }
+              if (pathName === "zigzag") {
+                var segs = zigzagPoints.length - 1;
+                var s = Math.min(segs - 1e-9, Math.max(0, u * segs));
+                var i = Math.floor(s);
+                var f = s - i;
+                var a = zigzagPoints[i];
+                var b = zigzagPoints[i + 1];
+                return { x: a.x + (b.x - a.x) * f, y: a.y + (b.y - a.y) * f };
+              }
+              // sweep: an S-curve from lower left to upper right.
+              return { x: 8 + 84 * u, y: 50 + 16 * Math.cos(Math.PI * u) };
+            }
+
+            // Shared travel ease, implemented once so the stamp table and
+            // the per-update actor position use the identical mapping.
+            function easeInOut(t) {
+              return t < 0.5 ? 2 * t * t : 1 - 2 * (1 - t) * (1 - t);
+            }
+            function clamp01(v) {
+              return v < 0 ? 0 : v > 1 ? 1 : v;
+            }
+
+            // The LCG and every per-stamp decision live here, computed once
+            // before timeline construction from a fixed seed. A stamp's
+            // opacity at any time is then a pure function of timeline time.
+            var lcgState = 0x67117a11;
+            function next() {
+              lcgState = (Math.imul(1664525, lcgState) + 1013904223) >>> 0;
+              return lcgState / 4294967296;
+            }
+
+            var spacing = spacingByDensity[density];
+            var STEPS = 600;
+            var stamps = [];
+            var acc = 0;
+            var prev = pathPoint(easeInOut(0));
+            for (var k = 1; k <= STEPS; k += 1) {
+              var f = k / STEPS;
+              var pos = pathPoint(easeInOut(f));
+              acc += Math.hypot(pos.x - prev.x, pos.y - prev.y);
+              prev = pos;
+              if (acc >= spacing) {
+                acc -= spacing;
+                stamps.push({
+                  t: f * TRAVEL,
+                  x: pos.x + (next() - 0.5) * 3.2,
+                  y: pos.y + (next() - 0.5) * 3.2,
+                  glyph: glyphSet[Math.floor(next() * glyphSet.length) % glyphSet.length],
+                  rot: (next() - 0.5) * 20,
+                  size: 1.9 + next() * 1.4,
+                  peak: 0.45 + next() * 0.45,
+                  mix: 55 + Math.floor(next() * 36),
+                  fadeMul: 0.75 + next() * 0.5,
+                });
+              }
+            }
+
+            var fragment = hostDoc.createDocumentFragment();
+            for (var s = 0; s < stamps.length; s += 1) {
+              var row = stamps[s];
+              var span = hostDoc.createElement("span");
+              span.className = "cgt-stamp";
+              span.textContent = row.glyph;
+              span.style.left = row.x.toFixed(3) + "%";
+              span.style.top = row.y.toFixed(3) + "%";
+              span.style.fontSize = row.size.toFixed(3) + "cqmin";
+              span.style.transform = "translate(-50%, -50%) rotate(" + row.rot.toFixed(2) + "deg)";
+              span.style.color =
+                "color-mix(in srgb, var(--cgt-accent) " + row.mix + "%, var(--fg, #f8fafc))";
+              row.el = span;
+              fragment.appendChild(span);
+            }
+            field.appendChild(fragment);
+
+            // Pure per-update apply: the actor position and every stamp's
+            // opacity are functions of tl.time() alone. A stamp pops in
+            // over `pop` seconds and decays over its table row's window;
+            // by IN every value is exactly zero. Writes are idempotent, so
+            // the HOLD repaints identical values and stays truly still.
+            function stampOpacity(row, timeSeconds) {
+              var dt = timeSeconds - row.t;
+              if (dt <= 0) return 0;
+              if (dt < pop) {
+                var g = dt / pop;
+                return row.peak * (1 - (1 - g) * (1 - g));
+              }
+              var u = (dt - pop) / (fadeEff * row.fadeMul);
+              if (u >= 1) return 0;
+              return row.peak * (1 - u * u);
+            }
+
+            function applyTime(timeSeconds) {
+              var u = easeInOut(clamp01(TRAVEL > 0 ? timeSeconds / TRAVEL : 1));
+              var p = pathPoint(u);
+              gsap.set(actor, { left: p.x.toFixed(4) + "%", top: p.y.toFixed(4) + "%" });
+              for (var i = 0; i < stamps.length; i += 1) {
+                stamps[i].el.style.opacity = stampOpacity(stamps[i], timeSeconds).toFixed(4);
+              }
+            }
+
+            gsap.set(stage, { opacity: 1, y: "0cqh" });
+
+            var tl = gsap.timeline({
+              paused: true,
+              onUpdate: function () {
+                applyTime(tl.time());
+              },
+            });
+
+            // Anchor tween: an inert plain-object tween spanning the full
+            // authored duration so the timeline covers [0, D], onUpdate
+            // fires for every eventful seek, and holds never clamp short.
+            tl.to({ p: 0 }, { p: 1, duration: duration, ease: "none" }, 0);
+
+            // Actor entrance: both endpoints authored.
+            tl.fromTo(
+              actor,
+              { opacity: 0 },
+              { opacity: 1, duration: 0.18 * scale, ease: "power2.out" },
+              0,
+            );
+
+            // Stamps carry no tweens: their opacity rides applyTime's pure
+            // table evaluation, and each decay completes inside IN by
+            // construction.
+
+            // HOLD: truly still. All stamps are exactly zero by IN and the
+            // actor rests at path(1); repeated repaints write identical
+            // values.
+
+            // OUT: optional departure; exit none holds until the frame cuts.
+            if (exit === "up") {
+              tl.to(stage, { y: "-4cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "fade") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            }
+
+            tl.seek(0);
+            applyTime(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["cursor-glyph-trail"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/cursor-glyph-trail/demo.html b/docs/public/catalog/components/cursor-glyph-trail/demo.html
new file mode 100644
index 0000000000..532074b67f
--- /dev/null
+++ b/docs/public/catalog/components/cursor-glyph-trail/demo.html
@@ -0,0 +1,101 @@
+<!doctype html>
+<!--
+  cursor-glyph-trail demo. FULL-BLEED light mount: the primitive fills the
+  whole 1920x1080 frame on a light token block. Non-default path, density,
+  fade, and accent values prove the variable path.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Cursor Glyph Trail Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #eef0f3);
+      }
+
+      #root {
+        --bg: #eef0f3;
+        --fg: #14161b;
+        --muted: #5b6472;
+        --surface: #ffffff;
+        --border: #d3d8e0;
+        --brand: #3f3f46;
+        --accent: #3f3f46;
+        --accent-2: #3f3f46;
+        --font-display: "Inter", system-ui, sans-serif;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 42%, #f7f8fa 0%, var(--bg, #eef0f3) 72%);
+      }
+
+      .mount-bleed {
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        container-type: size;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="cursor-glyph-trail-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="cursor-glyph-trail-mount"
+        class="mount-bleed clip"
+        data-composition-id="cursor-glyph-trail"
+        data-composition-src="./cursor-glyph-trail.html"
+        data-variable-values='{"path":"zigzag","density":"high","fade":1.0,"accent":"blue"}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="1920"
+        data-height="1080"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["cursor-glyph-trail-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "cursor-glyph-trail.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/cut-the-curve/README.md b/docs/public/catalog/components/cut-the-curve/README.md
new file mode 100644
index 0000000000..4138a3fcb0
--- /dev/null
+++ b/docs/public/catalog/components/cut-the-curve/README.md
@@ -0,0 +1,36 @@
+# cut-the-curve
+
+A velocity-matched directional hard cut. The outgoing subject accelerates along one straight screen vector with `power4.in`; at peak velocity the timeline swaps identities; the incoming subject continues on the same vector and decelerates to rest with `power4.out`. Matched blur and opacity conceal the seam.
+
+Transition profile: no elastic HOLD; retime by changing the mount duration only (0.3s to 3s).
+
+## Variables
+
+| id            | type   | default  | notes                                                                                                                           |
+| ------------- | ------ | -------- | ------------------------------------------------------------------------------------------------------------------------------- |
+| `subject`     | enum   | `cursor` | `cursor`, `card`, or `scene`: the visual payload on both sides of the cut.                                                      |
+| `direction`   | enum   | `left`   | `left`, `right`, `up`, `down`: the shared travel vector.                                                                        |
+| `cutFraction` | number | `0.33`   | Normalized point of the hard cut. The incoming distance derives from it so seam velocity stays matched.                         |
+| `blurPx`      | number | `12`     | Blur shared by both subjects at the seam.                                                                                       |
+| `exit`        | enum   | `none`   | `none` rests until the cut; `fade`/`up` depart the incoming subject over a reserved tail (min(0.35s, 25% of D)) after it lands. |
+
+## Mount
+
+```html
+<div
+  class="clip"
+  data-composition-id="cut-the-curve"
+  data-composition-src="./cut-the-curve.html"
+  data-variable-values='{"subject":"card","direction":"right","cutFraction":0.33}'
+  data-start="0"
+  data-duration="1"
+  data-track-index="0"
+></div>
+```
+
+Elastic root: no `data-width`/`data-height`; it fills whatever box the host clip gives it. Timeline registers under the literal `cut-the-curve` key.
+
+## Notes
+
+- Sync point: the cut lands at `(D - exit tail) * cutFraction`; a `whip-cut` `hf:sfx` CustomEvent fires there for the scene mix stage.
+- Invariants: one shared vector, identity swap only at the cut, matched blur/opacity at the seam. Never split the two halves into independently tuned velocities.
diff --git a/docs/public/catalog/components/cut-the-curve/cut-the-curve.html b/docs/public/catalog/components/cut-the-curve/cut-the-curve.html
new file mode 100644
index 0000000000..b470b6966c
--- /dev/null
+++ b/docs/public/catalog/components/cut-the-curve/cut-the-curve.html
@@ -0,0 +1,500 @@
+<!doctype html>
+<!--
+  cut-the-curve -- HyperFrames video primitive (transitions / bridge)
+
+  Concept: a velocity-matched directional hard cut. The outgoing subject
+  accelerates along one straight screen vector with power4.in. At peak
+  velocity, the timeline swaps identities. The incoming subject starts on
+  the far side of the same vector and decelerates to rest with power4.out.
+  Matched blur and opacity at the cut conceal the seam.
+
+  Compiled from the launch write-up for this piece.
+  The source identifies the production signature as a single power4 whip,
+  with an approximately 1:2 outgoing-to-incoming distance and duration split.
+
+  Use when: bridging attention and momentum between shots, UI states, cards,
+  cursor beats, or scene blocks without requiring object identity to persist.
+
+  Variables (declared in data-composition-variables below):
+    - subject ("cursor" | "card" | "scene", default "cursor") selects the
+      simple visual payload used for both sides of the cut.
+    - direction ("left" | "right" | "up" | "down", default "left") owns
+      both the motion axis and the shared screen direction.
+    - cutFraction (number, 0-1, default 0.33) sets the hard-cut point. The
+      incoming distance is derived from this fraction so seam velocity stays
+      matched. At 0 or 1, the corresponding zero-duration half collapses.
+    - blurPx (number, default 12) sets blur at the cut seam.
+    - exit ("none" | "fade" | "up", default "none") optionally departs the
+      incoming subject at the end. Enabling it reserves a short tail window
+      (min(0.35s, 25% of D)) after the incoming subject lands.
+
+  Envelope (transition profile, no elastic HOLD; T = D minus the exit tail,
+  which is 0 when exit is none):
+    OUT = T * cutFraction, power4.in
+    IN  = T * (1 - cutFraction), power4.out
+    The default 0.33 split is approximately 1:2 in time. Incoming distance is
+    derived from OUT distance and the duration ratio, preserving the same
+    approximately 1:2 spatial split and matching velocity at the cut.
+
+  Sync point: CUT_AT = T * cutFraction, the fixed boundary between OUT and
+  IN. It never lands in a HOLD because this profile has no HOLD phase.
+
+  Sound cue: a short whip cut fires at CUT_AT. The primitive never plays
+  audio. It dispatches an `hf:sfx` CustomEvent with
+  { id: "whip-cut", t: CUT_AT } for the scene mix stage to route.
+
+  EDIT ZONE: change only the subject geometry custom properties in the style
+  block when adapting the payload drawings. The vector ratios and the paired
+  power4 eases are the mechanic and must remain together.
+
+  INVARIANTS: outgoing and incoming always share one vector; the identity swap
+  happens only at CUT_AT; their blur and opacity values match at that seam;
+  exactly one paused timeline registers under the literal id "cut-the-curve".
+
+  RETIME RANGE: 0.3s to 3s. Retiming changes D only. Never timeScale the GSAP
+  timeline and never split the two halves into independently tuned velocities.
+
+  Mount contract: this is a template-wrapped sub-composition. Everything the
+  mount needs, including styles, markup, GSAP, and timeline registration,
+  lives inside <template>. #root fills the host box with position:absolute,
+  inset:0, and container-type:size. It has no data-width or data-height.
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "subject", "type": "enum", "role": "content", "label": "Subject", "description": "Visual payload used on both sides of the cut.", "default": "cursor", "options": [{ "value": "cursor", "label": "Cursor" }, { "value": "card", "label": "Card" }, { "value": "scene", "label": "Scene" }] },
+    { "id": "direction", "type": "enum", "role": "motion", "label": "Direction", "description": "Shared screen direction for outgoing and incoming travel.", "default": "left", "options": [{ "value": "left", "label": "Left" }, { "value": "right", "label": "Right" }, { "value": "up", "label": "Up" }, { "value": "down", "label": "Down" }] },
+    { "id": "cutFraction", "type": "number", "role": "timing", "label": "Cut fraction", "description": "Normalized point where the hard cut swaps subjects.", "default": 0.33, "min": 0, "max": 1, "step": 0.01 },
+    { "id": "blurPx", "type": "number", "role": "style", "label": "Cut blur", "description": "Blur in pixels shared by both subjects at the cut seam.", "default": 12, "min": 0, "max": 40, "step": 1, "unit": "px" },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure of the incoming subject. Default none: it rests until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Cut the Curve</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="cut-the-curve" data-duration="1" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+          }
+
+          .ctc-clip,
+          .ctc-backdrop,
+          .ctc-subject {
+            position: absolute;
+            inset: 0;
+          }
+
+          .ctc-clip {
+            overflow: hidden;
+          }
+
+          .ctc-backdrop {
+            background:
+              radial-gradient(
+                circle at var(--ctc-glow-x, 24%) var(--ctc-glow-y, 28%),
+                color-mix(
+                  in srgb,
+                  var(--fg, #f8fafc) var(--ctc-glow-strength, 18%),
+                  var(--transparent, transparent)
+                ),
+                var(--transparent, transparent) var(--ctc-glow-radius, 42%)
+              ),
+              var(--bg, #0b1120);
+          }
+
+          .ctc-subject {
+            display: grid;
+            place-items: center;
+            opacity: 0;
+            will-change: transform, filter, opacity;
+          }
+
+          .ctc-subject.is-outgoing {
+            opacity: 1;
+            --ctc-primary: color-mix(in srgb, var(--fg, #f8fafc) 45%, transparent);
+            --ctc-secondary: color-mix(in srgb, var(--fg, #f8fafc) 18%, transparent);
+          }
+
+          .ctc-subject.is-incoming {
+            --ctc-primary: color-mix(in srgb, var(--fg, #f8fafc) 72%, transparent);
+            --ctc-secondary: color-mix(in srgb, var(--fg, #f8fafc) 45%, transparent);
+          }
+
+          .ctc-art {
+            display: none;
+          }
+
+          #root[data-subject="cursor"] .ctc-cursor,
+          #root[data-subject="card"] .ctc-card,
+          #root[data-subject="scene"] .ctc-scene {
+            display: block;
+          }
+
+          .ctc-cursor {
+            position: relative;
+            width: var(--ctc-cursor-width, 15cqw);
+            height: var(--ctc-cursor-height, 24cqh);
+          }
+
+          .ctc-cursor svg {
+            width: var(--ctc-cursor-svg-width, 100%);
+            height: var(--ctc-cursor-svg-height, 100%);
+            overflow: visible;
+            filter: drop-shadow(
+              var(--ctc-shadow-x, 0cqw) var(--ctc-shadow-y, 1cqh) var(--ctc-shadow-blur, 1.6cqw)
+                color-mix(
+                  in srgb,
+                  var(--bg, #0b1120) var(--ctc-shadow-strength, 65%),
+                  var(--transparent, transparent)
+                )
+            );
+          }
+
+          .ctc-cursor-shape {
+            fill: var(--ctc-primary, var(--fg, #f8fafc));
+            stroke: var(--fg, #f8fafc);
+            stroke-width: var(--ctc-cursor-stroke, 1.8);
+            stroke-linejoin: round;
+          }
+
+          .ctc-cursor-pulse {
+            position: absolute;
+            left: var(--ctc-pulse-left, -5cqw);
+            top: var(--ctc-pulse-top, -5cqh);
+            width: var(--ctc-pulse-size, 11cqw);
+            aspect-ratio: var(--ctc-pulse-ratio, 1);
+            border: var(--ctc-pulse-border, 0.25cqw) solid
+              color-mix(
+                in srgb,
+                var(--ctc-secondary, var(--fg, #f8fafc)) var(--ctc-pulse-strength, 58%),
+                var(--transparent, transparent)
+              );
+            border-radius: var(--ctc-round, 50%);
+          }
+
+          .ctc-card {
+            width: var(--ctc-card-width, 42cqw);
+            min-height: var(--ctc-card-height, 34cqh);
+            padding: var(--ctc-card-padding-y, var(--space-3, 4.5cqh))
+              var(--ctc-card-padding-x, var(--space-3, 4cqw));
+            border: var(--ctc-border-width, 0.22cqw) solid var(--border, #334155);
+            border-radius: var(--radius, 2cqw);
+            background: var(--surface, #1e293b);
+            box-shadow: var(--ctc-shadow-x, 0cqw) var(--ctc-card-shadow-y, 2.4cqh)
+              var(--ctc-card-shadow-blur, 5cqw)
+              color-mix(
+                in srgb,
+                var(--bg, #0b1120) var(--ctc-card-shadow-strength, 55%),
+                var(--transparent, transparent)
+              );
+          }
+
+          .ctc-card-chip {
+            width: var(--ctc-chip-width, 9cqw);
+            height: var(--ctc-chip-height, 2.2cqh);
+            border-radius: var(--ctc-pill-radius, 99cqw);
+            background: var(--ctc-primary, var(--fg, #f8fafc));
+            margin-bottom: var(--ctc-card-gap, var(--space-3, 3.2cqh));
+          }
+
+          .ctc-card-line,
+          .ctc-scene-line {
+            height: var(--ctc-line-height, 1.8cqh);
+            border-radius: var(--ctc-pill-radius, 99cqw);
+            background: var(--fg, #f8fafc);
+          }
+
+          .ctc-card-line + .ctc-card-line {
+            margin-top: var(--ctc-line-gap, var(--space-2, 2.2cqh));
+          }
+
+          .ctc-card-line:first-of-type {
+            width: var(--ctc-line-long, 88%);
+          }
+
+          .ctc-card-line:last-of-type {
+            width: var(--ctc-line-short, 58%);
+            opacity: var(--ctc-muted-opacity, 0.42);
+          }
+
+          .ctc-scene {
+            width: var(--ctc-scene-width, 68cqw);
+            height: var(--ctc-scene-height, 58cqh);
+            overflow: hidden;
+            border: var(--ctc-border-width, 0.22cqw) solid var(--border, #334155);
+            border-radius: var(--radius, 2cqw);
+            background: var(--surface, #1e293b);
+            box-shadow: var(--ctc-shadow-x, 0cqw) var(--ctc-card-shadow-y, 2.4cqh)
+              var(--ctc-card-shadow-blur, 5cqw)
+              color-mix(
+                in srgb,
+                var(--bg, #0b1120) var(--ctc-card-shadow-strength, 55%),
+                var(--transparent, transparent)
+              );
+          }
+
+          .ctc-scene-bar {
+            display: flex;
+            align-items: center;
+            gap: var(--ctc-dot-gap, var(--space-1, 1cqw));
+            height: var(--ctc-scene-bar-height, 8cqh);
+            padding-inline: var(--ctc-scene-pad, var(--space-2, 2cqw));
+            border-bottom: var(--ctc-border-width, 0.22cqw) solid var(--border, #334155);
+          }
+
+          .ctc-scene-dot {
+            width: var(--ctc-dot-size, 1.4cqw);
+            aspect-ratio: var(--ctc-pulse-ratio, 1);
+            border-radius: var(--ctc-round, 50%);
+            background: var(--ctc-primary, var(--fg, #f8fafc));
+          }
+
+          .ctc-scene-body {
+            display: grid;
+            grid-template-columns: var(--ctc-scene-columns, 1fr 2fr);
+            gap: var(--ctc-scene-gap, var(--space-3, 3cqw));
+            padding: var(--ctc-scene-body-pad, var(--space-3, 5cqh))
+              var(--ctc-scene-pad, var(--space-3, 3cqw));
+          }
+
+          .ctc-scene-panel {
+            min-height: var(--ctc-panel-height, 34cqh);
+            border-radius: var(--ctc-panel-radius, var(--radius, 1.2cqw));
+            background: color-mix(
+              in srgb,
+              var(--ctc-primary, var(--fg, #f8fafc)) var(--ctc-panel-strength, 24%),
+              var(--surface, #1e293b)
+            );
+          }
+
+          .ctc-scene-copy {
+            padding-top: var(--ctc-copy-top, var(--space-2, 2cqh));
+          }
+
+          .ctc-scene-line + .ctc-scene-line {
+            margin-top: var(--ctc-scene-line-gap, var(--space-3, 3cqh));
+          }
+
+          .ctc-scene-line:nth-child(1) {
+            width: var(--ctc-scene-line-one, 92%);
+          }
+
+          .ctc-scene-line:nth-child(2) {
+            width: var(--ctc-scene-line-two, 68%);
+            opacity: var(--ctc-muted-opacity, 0.42);
+          }
+
+          .ctc-scene-line:nth-child(3) {
+            width: var(--ctc-scene-line-three, 78%);
+            background: var(--ctc-secondary, var(--fg, #f8fafc));
+          }
+        </style>
+
+        <div
+          id="cut-the-curve-clip"
+          class="ctc-clip clip"
+          data-start="0"
+          data-duration="1"
+          data-track-index="0"
+        >
+          <div class="ctc-backdrop"></div>
+
+          <div class="ctc-subject is-outgoing" aria-hidden="true">
+            <div class="ctc-art ctc-cursor">
+              <span class="ctc-cursor-pulse"></span>
+              <svg viewBox="0 0 64 88" aria-hidden="true">
+                <path
+                  class="ctc-cursor-shape"
+                  d="M8 5 L54 43 L34 47 L45 75 L30 82 L19 53 L8 68 Z"
+                />
+              </svg>
+            </div>
+            <div class="ctc-art ctc-card">
+              <div class="ctc-card-chip"></div>
+              <div class="ctc-card-line"></div>
+              <div class="ctc-card-line"></div>
+            </div>
+            <div class="ctc-art ctc-scene">
+              <div class="ctc-scene-bar">
+                <span class="ctc-scene-dot"></span><span class="ctc-scene-dot"></span
+                ><span class="ctc-scene-dot"></span>
+              </div>
+              <div class="ctc-scene-body">
+                <div class="ctc-scene-panel"></div>
+                <div class="ctc-scene-copy">
+                  <div class="ctc-scene-line"></div>
+                  <div class="ctc-scene-line"></div>
+                  <div class="ctc-scene-line"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="ctc-subject is-incoming" aria-hidden="true">
+            <div class="ctc-art ctc-cursor">
+              <span class="ctc-cursor-pulse"></span>
+              <svg viewBox="0 0 64 88" aria-hidden="true">
+                <path
+                  class="ctc-cursor-shape"
+                  d="M8 5 L54 43 L34 47 L45 75 L30 82 L19 53 L8 68 Z"
+                />
+              </svg>
+            </div>
+            <div class="ctc-art ctc-card">
+              <div class="ctc-card-chip"></div>
+              <div class="ctc-card-line"></div>
+              <div class="ctc-card-line"></div>
+            </div>
+            <div class="ctc-art ctc-scene">
+              <div class="ctc-scene-bar">
+                <span class="ctc-scene-dot"></span><span class="ctc-scene-dot"></span
+                ><span class="ctc-scene-dot"></span>
+              </div>
+              <div class="ctc-scene-body">
+                <div class="ctc-scene-panel"></div>
+                <div class="ctc-scene-copy">
+                  <div class="ctc-scene-line"></div>
+                  <div class="ctc-scene-line"></div>
+                  <div class="ctc-scene-line"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var outgoing = root.querySelector(".is-outgoing");
+            var incoming = root.querySelector(".is-incoming");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var subject =
+              vars.subject === "card" || vars.subject === "scene" ? vars.subject : "cursor";
+            var direction =
+              vars.direction === "right" || vars.direction === "up" || vars.direction === "down"
+                ? vars.direction
+                : "left";
+            var rawCut = Number(vars.cutFraction);
+            var cutFraction = Number.isFinite(rawCut) ? Math.max(0, Math.min(1, rawCut)) : 0.33;
+            var rawBlur = Number(vars.blurPx);
+            var blurPx = Number.isFinite(rawBlur) ? Math.max(0, rawBlur) : 12;
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            root.dataset.subject = subject;
+
+            // Direction is the single owner of axis, sign, unit, and base travel.
+            var vectors = {
+              left: { axis: "x", sign: -1, unit: "cqw", distance: 34 },
+              right: { axis: "x", sign: 1, unit: "cqw", distance: 34 },
+              up: { axis: "y", sign: -1, unit: "cqh", distance: 26 },
+              down: { axis: "y", sign: 1, unit: "cqh", distance: 26 },
+            };
+            var vector = vectors[direction];
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "1"));
+            // Exit none keeps the whole duration for the cut profile. An
+            // enabled exit reserves a short tail after the incoming lands.
+            var EXIT = exit === "none" ? 0 : Math.min(0.35, duration * 0.25);
+            var TRAVEL = Math.max(0.001, duration - EXIT);
+            var CUT_AT = TRAVEL * cutFraction;
+            var ENTRY_DURATION = TRAVEL - CUT_AT;
+            var entryDistance =
+              CUT_AT > 0 ? vector.distance * (ENTRY_DURATION / CUT_AT) : vector.distance * 2;
+            var seamBlur = "blur(" + blurPx + "px)";
+            var clearBlur = "blur(0px)";
+            var seamOpacity = 0.72;
+
+            var outgoingEnd = { opacity: seamOpacity, filter: seamBlur };
+            outgoingEnd[vector.axis] = vector.sign * vector.distance + vector.unit;
+
+            var incomingStart = { x: 0, y: 0, opacity: 0, filter: seamBlur };
+            incomingStart[vector.axis] = -vector.sign * entryDistance + vector.unit;
+
+            var incomingEnd = { opacity: 1, filter: clearBlur };
+            incomingEnd[vector.axis] = 0;
+
+            gsap.set(outgoing, { x: 0, y: 0, opacity: 1, filter: clearBlur });
+            gsap.set(incoming, incomingStart);
+
+            var tl = gsap.timeline({ paused: true });
+
+            if (CUT_AT > 0) {
+              tl.to(
+                outgoing,
+                Object.assign({}, outgoingEnd, { duration: CUT_AT, ease: "power4.in" }),
+                0,
+              );
+            }
+
+            // CUT: one visibility owner, matched blur and opacity on both sides.
+            tl.set(outgoing, { opacity: 0 }, CUT_AT);
+            tl.set(incoming, { opacity: seamOpacity }, CUT_AT);
+            tl.call(
+              function () {
+                root.dispatchEvent(
+                  new CustomEvent("hf:sfx", {
+                    detail: { id: "whip-cut", t: CUT_AT },
+                    bubbles: true,
+                  }),
+                );
+              },
+              [],
+              CUT_AT,
+            );
+
+            if (ENTRY_DURATION > 0) {
+              tl.to(
+                incoming,
+                Object.assign({}, incomingEnd, {
+                  duration: ENTRY_DURATION,
+                  ease: "power4.out",
+                }),
+                CUT_AT,
+              );
+            } else {
+              tl.set(incoming, incomingEnd, CUT_AT);
+            }
+
+            // Optional departure; exit none rests until the frame cuts.
+            if (exit === "fade") {
+              tl.to(incoming, { opacity: 0, duration: EXIT, ease: "power2.in" }, TRAVEL);
+            } else if (exit === "up") {
+              tl.to(
+                incoming,
+                { opacity: 0, y: "-6cqh", duration: EXIT, ease: "power2.in" },
+                TRAVEL,
+              );
+            }
+
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines["cut-the-curve"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/cut-the-curve/demo.html b/docs/public/catalog/components/cut-the-curve/demo.html
new file mode 100644
index 0000000000..c362e6d8e1
--- /dev/null
+++ b/docs/public/catalog/components/cut-the-curve/demo.html
@@ -0,0 +1,116 @@
+<!doctype html>
+<!--
+  cut-the-curve -- demo. Standalone 1920x1080 token-themed stage that mounts
+  cut-the-curve.html through data-composition-src. The 70% mount card makes
+  the outgoing throw, hard cut, and incoming settle easy to screen while
+  proving that the primitive fills a host-owned box without root dimensions.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Cut the Curve - Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #05070d);
+      }
+
+      #root {
+        --bg: #080b14;
+        --fg: #f8fafc;
+        --muted: #94a3b8;
+        --surface: #182033;
+        --border: #3b4863;
+        --brand: #e4e4e7;
+        --accent: #e4e4e7;
+        --transparent: transparent;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-body: Inter, system-ui, sans-serif;
+        --radius: 26px;
+        --space-1: 8px;
+        --space-2: 16px;
+        --space-3: 32px;
+        --dur-beat: 0.4s;
+        --ease-standard: cubic-bezier(0.215, 0.61, 0.355, 1);
+        --ease-whip: cubic-bezier(0.23, 1, 0.32, 1);
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(
+          ellipse at 50% 42%,
+          var(--bg, #151c32) 0%,
+          var(--bg, #05070d) 72%
+        );
+      }
+
+      .mount-card {
+        width: 70%;
+        height: 70%;
+        left: 15%;
+        top: 15%;
+        overflow: hidden;
+        border: 1px solid color-mix(in srgb, var(--border, #94a3b8) 25%, transparent);
+        border-radius: 30px;
+        box-shadow: 0 40px 90px color-mix(in srgb, var(--bg, #000000) 45%, transparent);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="cut-the-curve-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="1"
+      data-fps="30"
+    >
+      <div
+        id="cut-the-curve-mount"
+        class="mount-card clip"
+        data-composition-id="cut-the-curve"
+        data-composition-src="./cut-the-curve.html"
+        data-variable-values='{"subject":"card","direction":"left","cutFraction":0.33,"blurPx":12}'
+        data-start="0"
+        data-duration="1"
+        data-track-index="0"
+        data-width="1344"
+        data-height="756"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["cut-the-curve-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "cut-the-curve.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/dashboard-populate/dashboard-populate.html b/docs/public/catalog/components/dashboard-populate/dashboard-populate.html
new file mode 100644
index 0000000000..98bba60ba3
--- /dev/null
+++ b/docs/public/catalog/components/dashboard-populate/dashboard-populate.html
@@ -0,0 +1,98 @@
+<!--
+  Dashboard Populate - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-dashboard-populate">
+  <header>
+    <div>
+      <h3>Dashboard Populate</h3>
+      <p>Skeleton dashboard cards resolve into populated charts and metrics.</p>
+    </div>
+    <strong>+42%</strong>
+  </header>
+  <div class="bars">
+    <span class="bar" style="--h: 42%"></span><span class="bar" style="--h: 72%"></span
+    ><span class="bar" style="--h: 56%"></span><span class="bar" style="--h: 88%"></span
+    ><span class="bar" style="--h: 64%"></span><span class="bar" style="--h: 95%"></span
+    ><span class="bar" style="--h: 78%"></span>
+  </div>
+  <svg viewBox="0 0 700 210">
+    <path
+      d="M20 172 C120 90, 190 118, 260 74 S430 112, 508 42 S620 82, 680 30"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="10"
+      stroke-linecap="round"
+    />
+  </svg>
+</div>
+
+<style>
+  .hf-remocn-dashboard-populate {
+    --hf-accent: var(--accent, #111827);
+    --hf-ink: #111827;
+    --hf-l1: rgba(17, 24, 39, 0.72);
+    --hf-l2: rgba(17, 24, 39, 0.45);
+    --hf-l3: rgba(17, 24, 39, 0.18);
+    --hf-l4: rgba(17, 24, 39, 0.08);
+    --hf-hair: rgba(17, 24, 39, 0.14);
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-dashboard-populate {
+    width: 760px;
+    min-height: 420px;
+    border-radius: 28px;
+    background: #fff;
+    padding: 34px;
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.16);
+    display: grid;
+    gap: 22px;
+  }
+  .hf-remocn-dashboard-populate header {
+    display: flex;
+    justify-content: space-between;
+    align-items: end;
+  }
+  .hf-remocn-dashboard-populate h3 {
+    margin: 0;
+    font-size: 34px;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-dashboard-populate strong {
+    font-size: 54px;
+    letter-spacing: -0.06em;
+  }
+  .hf-remocn-dashboard-populate .bars {
+    height: 210px;
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    align-items: end;
+    gap: 14px;
+  }
+  .hf-remocn-dashboard-populate .bar {
+    height: calc(var(--h) * var(--hf-grow, 1));
+    border-radius: 14px 14px 5px 5px;
+    background: var(--hf-l1);
+  }
+  .hf-remocn-dashboard-populate svg {
+    width: 100%;
+    height: 210px;
+    overflow: visible;
+  }
+  .hf-remocn-dashboard-populate path {
+    color: var(--hf-l2);
+    stroke-dasharray: 900;
+    stroke-dashoffset: var(--hf-dash, 0);
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-dashboard-populate', { '--hf-grow': 0, '--hf-dash': 900 }, { '--hf-grow': 1, '--hf-dash': 0, duration: 1.2, ease: 'power3.out' }, startTime);
+-->
diff --git a/docs/public/catalog/components/dashboard-populate/demo.html b/docs/public/catalog/components/dashboard-populate/demo.html
new file mode 100644
index 0000000000..f651f79f0c
--- /dev/null
+++ b/docs/public/catalog/components/dashboard-populate/demo.html
@@ -0,0 +1,151 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Dashboard Populate - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+        /* ponytail: scale wrapper — GSAP only animates custom props on the child, no transform conflict */
+        transform: scale(1.72);
+      }
+      .hf-remocn-dashboard-populate {
+        --hf-accent: var(--accent, #111827);
+        --hf-ink: #111827;
+        --hf-l1: rgba(17, 24, 39, 0.72);
+        --hf-l2: rgba(17, 24, 39, 0.45);
+        --hf-l3: rgba(17, 24, 39, 0.18);
+        --hf-l4: rgba(17, 24, 39, 0.08);
+        --hf-hair: rgba(17, 24, 39, 0.14);
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-dashboard-populate {
+        width: 760px;
+        min-height: 420px;
+        border-radius: 28px;
+        background: #fff;
+        padding: 34px;
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.16);
+        display: grid;
+        gap: 22px;
+      }
+      .hf-remocn-dashboard-populate header {
+        display: flex;
+        justify-content: space-between;
+        align-items: end;
+      }
+      .hf-remocn-dashboard-populate h3 {
+        margin: 0;
+        font-size: 34px;
+        letter-spacing: -0.04em;
+      }
+      .hf-remocn-dashboard-populate p {
+        margin: 4px 0 0;
+        font-size: 15px;
+        color: var(--hf-muted);
+        line-height: 1.4;
+      }
+      .hf-remocn-dashboard-populate strong {
+        font-size: 54px;
+        letter-spacing: -0.06em;
+      }
+      .hf-remocn-dashboard-populate .bars {
+        height: 210px;
+        display: grid;
+        grid-template-columns: repeat(7, 1fr);
+        align-items: end;
+        gap: 14px;
+      }
+      .hf-remocn-dashboard-populate .bar {
+        height: calc(var(--h) * var(--hf-grow, 1));
+        border-radius: 14px 14px 5px 5px;
+        background: var(--hf-l1);
+      }
+      .hf-remocn-dashboard-populate svg {
+        width: 100%;
+        height: 210px;
+        overflow: visible;
+      }
+      .hf-remocn-dashboard-populate path {
+        color: var(--hf-l2);
+        stroke-dasharray: 900;
+        stroke-dashoffset: var(--hf-dash, 0);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="dashboard-populate-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-dashboard-populate">
+          <header>
+            <div>
+              <h3>Dashboard Populate</h3>
+              <p>Skeleton dashboard cards resolve into populated charts and metrics.</p>
+            </div>
+            <strong>+42%</strong>
+          </header>
+          <div class="bars">
+            <span class="bar" style="--h: 42%"></span><span class="bar" style="--h: 72%"></span
+            ><span class="bar" style="--h: 56%"></span><span class="bar" style="--h: 88%"></span
+            ><span class="bar" style="--h: 64%"></span><span class="bar" style="--h: 95%"></span
+            ><span class="bar" style="--h: 78%"></span>
+          </div>
+          <svg viewBox="0 0 700 210">
+            <path
+              d="M20 172 C120 90, 190 118, 260 74 S430 112, 508 42 S620 82, 680 30"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="10"
+              stroke-linecap="round"
+            />
+          </svg>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-dashboard-populate",
+          { "--hf-grow": 0, "--hf-dash": 900 },
+          { "--hf-grow": 1, "--hf-dash": 0, duration: 1.2, ease: "power3.out" },
+          startTime,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["dashboard-populate-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/data-flow-pipes/data-flow-pipes.html b/docs/public/catalog/components/data-flow-pipes/data-flow-pipes.html
new file mode 100644
index 0000000000..a86e386dd5
--- /dev/null
+++ b/docs/public/catalog/components/data-flow-pipes/data-flow-pipes.html
@@ -0,0 +1,94 @@
+<!--
+  Data Flow Pipes - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-data-flow-pipes">
+  <div class="panel prompt">
+    <h3>Data Flow Pipes</h3>
+    <p>Animated pipe routes move packets between data nodes.</p>
+    <div class="pill">Generate scene</div>
+    <div class="pill">Refine motion</div>
+    <div class="pill">Export</div>
+  </div>
+  <div class="panel preview">
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+  </div>
+</div>
+
+<style>
+  .hf-remocn-data-flow-pipes {
+    --hf-accent: #2563eb;
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-data-flow-pipes {
+    width: 820px;
+    min-height: 460px;
+    border-radius: 34px;
+    padding: 28px;
+    background: linear-gradient(135deg, #f8fafc, #e0f2fe);
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);
+    display: grid;
+    grid-template-columns: 280px 1fr;
+    gap: 22px;
+    overflow: hidden;
+  }
+  .hf-remocn-data-flow-pipes .panel {
+    border: 1px solid rgba(15, 23, 42, 0.08);
+    border-radius: 24px;
+    background: rgba(255, 255, 255, 0.76);
+    padding: 22px;
+    backdrop-filter: blur(12px);
+  }
+  .hf-remocn-data-flow-pipes .prompt {
+    display: grid;
+    gap: 12px;
+    align-content: start;
+  }
+  .hf-remocn-data-flow-pipes .pill {
+    height: 42px;
+    border-radius: 999px;
+    background: #111827;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    padding: 0 18px;
+    font-weight: 800;
+    transform: translateX(var(--hf-pill-x, 0px));
+  }
+  .hf-remocn-data-flow-pipes .preview {
+    display: grid;
+    gap: 14px;
+  }
+  .hf-remocn-data-flow-pipes .card {
+    min-height: 78px;
+    border-radius: 18px;
+    background: #fff;
+    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
+    transform: translate(var(--hf-card-x, 0px), var(--hf-card-y, 0px))
+      scale(var(--hf-card-scale, 1));
+    opacity: var(--hf-card-opacity, 1);
+  }
+  .hf-remocn-data-flow-pipes h3 {
+    margin: 0 0 14px;
+    font-size: 32px;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-data-flow-pipes p {
+    margin: 0;
+    color: #475569;
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-data-flow-pipes .pill', { '--hf-pill-x': '-18px', opacity: 0 }, { '--hf-pill-x': '0px', opacity: 1, duration: 0.25, stagger: 0.08, ease: 'power2.out' }, startTime); tl.fromTo('.hf-remocn-data-flow-pipes .card', { '--hf-card-y': '28px', '--hf-card-scale': 0.96, '--hf-card-opacity': 0 }, { '--hf-card-y': '0px', '--hf-card-scale': 1, '--hf-card-opacity': 1, duration: 0.42, stagger: 0.12, ease: 'power3.out' }, startTime + 0.2);
+-->
diff --git a/docs/public/catalog/components/data-flow-pipes/demo.html b/docs/public/catalog/components/data-flow-pipes/demo.html
new file mode 100644
index 0000000000..93d4d4be6a
--- /dev/null
+++ b/docs/public/catalog/components/data-flow-pipes/demo.html
@@ -0,0 +1,189 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Data Flow Pipes - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+        /* ponytail: scale wrapper — GSAP never touches .demo-frame */
+        transform: scale(1.5);
+        transform-origin: center center;
+      }
+      .hf-remocn-data-flow-pipes {
+        --hf-accent: #2563eb;
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-data-flow-pipes {
+        width: 820px;
+        min-height: 460px;
+        border-radius: 34px;
+        padding: 28px;
+        background: linear-gradient(135deg, #f8fafc, #e0f2fe);
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);
+        display: grid;
+        grid-template-columns: 280px 1fr;
+        gap: 22px;
+        overflow: hidden;
+      }
+      .hf-remocn-data-flow-pipes .panel {
+        border: 1px solid rgba(15, 23, 42, 0.08);
+        border-radius: 24px;
+        background: rgba(255, 255, 255, 0.76);
+        padding: 22px;
+        backdrop-filter: blur(12px);
+      }
+      .hf-remocn-data-flow-pipes .prompt {
+        display: grid;
+        gap: 12px;
+        align-content: start;
+      }
+      .hf-remocn-data-flow-pipes .pill {
+        height: 42px;
+        border-radius: 999px;
+        background: #111827;
+        color: #fff;
+        display: flex;
+        align-items: center;
+        padding: 0 18px;
+        font-weight: 800;
+        transform: translateX(var(--hf-pill-x, 0px));
+      }
+      .hf-remocn-data-flow-pipes .preview {
+        display: grid;
+        gap: 14px;
+      }
+      .hf-remocn-data-flow-pipes .card {
+        min-height: 78px;
+        border-radius: 18px;
+        background: #fff;
+        box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
+        transform: translate(var(--hf-card-x, 0px), var(--hf-card-y, 0px))
+          scale(var(--hf-card-scale, 1));
+        opacity: var(--hf-card-opacity, 1);
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 14px 18px;
+        border: 1px solid #e4e4e7;
+      }
+      .hf-remocn-data-flow-pipes .node-dot {
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        flex-shrink: 0;
+      }
+      .hf-remocn-data-flow-pipes .node-label {
+        font-size: 13px;
+        font-weight: 600;
+        color: #18181b;
+        flex: 1;
+      }
+      .hf-remocn-data-flow-pipes .node-stat {
+        font-size: 12px;
+        color: #71717a;
+        font-variant-numeric: tabular-nums;
+      }
+      .hf-remocn-data-flow-pipes h3 {
+        margin: 0 0 14px;
+        font-size: 32px;
+        letter-spacing: -0.04em;
+      }
+      .hf-remocn-data-flow-pipes p {
+        margin: 0;
+        color: #475569;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="data-flow-pipes-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-data-flow-pipes">
+          <div class="panel prompt">
+            <h3>Data Flow Pipes</h3>
+            <p>Animated pipe routes move packets between data nodes.</p>
+            <div class="pill">Generate scene</div>
+            <div class="pill">Refine motion</div>
+            <div class="pill">Export</div>
+          </div>
+          <div class="panel preview">
+            <div class="card">
+              <span class="node-dot" style="background:#2563eb;"></span>
+              <span class="node-label">Source Node</span>
+              <span class="node-stat">12 packets/s</span>
+            </div>
+            <div class="card">
+              <span class="node-dot" style="background:#16a34a;"></span>
+              <span class="node-label">Transform Pipe</span>
+              <span class="node-stat">8 active</span>
+            </div>
+            <div class="card">
+              <span class="node-dot" style="background:#d97706;"></span>
+              <span class="node-label">Sink Node</span>
+              <span class="node-stat">99.2% uptime</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-data-flow-pipes .pill",
+          { "--hf-pill-x": "-18px", opacity: 0 },
+          { "--hf-pill-x": "0px", opacity: 1, duration: 0.25, stagger: 0.08, ease: "power2.out" },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-data-flow-pipes .card",
+          { "--hf-card-y": "28px", "--hf-card-scale": 0.96, "--hf-card-opacity": 0 },
+          {
+            "--hf-card-y": "0px",
+            "--hf-card-scale": 1,
+            "--hf-card-opacity": 1,
+            duration: 0.42,
+            stagger: 0.12,
+            ease: "power3.out",
+          },
+          startTime + 0.2,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["data-flow-pipes-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/decline-chart/decline-chart.html b/docs/public/catalog/components/decline-chart/decline-chart.html
new file mode 100644
index 0000000000..11dd62a58e
--- /dev/null
+++ b/docs/public/catalog/components/decline-chart/decline-chart.html
@@ -0,0 +1,276 @@
+<!doctype html>
+<!--
+  decline-chart: HyperFrames video primitive
+
+  One metric line draws downward while its numeric value counts down and the
+  ambient background dims and desaturates from the same progress value.
+
+  Envelope:
+    IN_BASE  = 0.55s  chart frame settles into view
+    HOLD     = elastic decline draw, countdown, and ambient darkening
+    OUT_BASE = 0.45s  bottomed-out endpoint locks in with no recovery
+    If D is shorter than IN_BASE + OUT_BASE, IN and OUT compress together
+    and HOLD collapses to zero. Longer mounts stretch HOLD only.
+
+  Variables:
+    label       (string, default "Retention")
+    start_value (number, default 82)
+    end_value   (number, default 34)
+-->
+<html
+  lang="en"
+  data-composition-id="decline-chart"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "label", "type": "string", "role": "content", "label": "Metric label", "description": "Label shown above the declining value.", "default": "Retention" },
+    { "id": "start_value", "type": "number", "role": "content", "label": "Start value", "description": "Metric value at the start of the decline.", "default": 82, "min": 0, "max": 100, "step": 1 },
+    { "id": "end_value", "type": "number", "role": "content", "label": "End value", "description": "Metric value at the bottom of the decline.", "default": 34, "min": 0, "max": 100, "step": 1 }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Decline Chart</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="decline-chart" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .dc-clip,
+          .dc-ambient,
+          .dc-gloom {
+            position: absolute;
+            inset: 0;
+          }
+
+          .dc-clip {
+            overflow: hidden;
+          }
+
+          .dc-ambient {
+            background:
+              radial-gradient(circle at 24% 16%, rgba(47, 129, 150, 0.55), transparent 46%),
+              linear-gradient(145deg, #152f3c 0%, #101a25 48%, #0c1118 100%);
+            transform: scale(1.02);
+            transform-origin: center;
+            will-change: filter;
+          }
+
+          .dc-gloom {
+            background: #030507;
+            opacity: 0;
+          }
+
+          .dc-layout {
+            position: absolute;
+            inset: 9cqh 9cqw 8cqh;
+            display: grid;
+            /* minmax(0, 1fr): a bare 1fr row inflates to the svg's intrinsic
+               aspect height (min-height auto), overflowing the card. */
+            grid-template-rows: auto minmax(0, 1fr);
+            gap: 5cqh;
+            opacity: 0;
+          }
+
+          .dc-header {
+            display: flex;
+            align-items: end;
+            justify-content: space-between;
+            gap: 5cqw;
+          }
+
+          .dc-label {
+            max-width: 58cqw;
+            overflow: hidden;
+            color: rgba(226, 232, 240, 0.72);
+            font-size: clamp(12px, 3.6cqh, 38px);
+            font-weight: 620;
+            letter-spacing: 0.05em;
+            line-height: 1.1;
+            text-overflow: ellipsis;
+            text-transform: uppercase;
+            white-space: nowrap;
+          }
+
+          .dc-value {
+            flex: 0 0 auto;
+            color: #f8fafc;
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: clamp(30px, 12cqh, 118px);
+            font-variant-numeric: tabular-nums;
+            font-weight: 760;
+            letter-spacing: -0.07em;
+            line-height: 0.8;
+          }
+
+          .dc-chart {
+            width: 100%;
+            height: 100%;
+            overflow: visible;
+          }
+
+          .dc-grid {
+            stroke: rgba(148, 163, 184, 0.18);
+            stroke-width: 1;
+            vector-effect: non-scaling-stroke;
+          }
+
+          .dc-line {
+            fill: none;
+            stroke: #fb7185;
+            stroke-linecap: round;
+            stroke-linejoin: round;
+            /* No non-scaling-stroke here: with preserveAspectRatio=none Chromium
+               applies the dash pattern in screen space, so the user-space
+               dasharray from getTotalLength() splits the draw into two visible
+               segments. Scaled stroke keeps dashes in user space. */
+            stroke-width: 4;
+          }
+
+          .dc-endpoint {
+            fill: #fecdd3;
+            opacity: 0;
+            transform-box: fill-box;
+            transform-origin: center;
+          }
+        </style>
+
+        <div
+          id="decline-chart-clip"
+          class="dc-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="dc-ambient"></div>
+          <div class="dc-gloom"></div>
+          <div class="dc-layout">
+            <div class="dc-header">
+              <div class="dc-label"></div>
+              <div class="dc-value"></div>
+            </div>
+            <svg
+              class="dc-chart"
+              viewBox="0 0 260 240"
+              preserveAspectRatio="none"
+              aria-hidden="true"
+            >
+              <line class="dc-grid" x1="8" y1="55" x2="252" y2="55"></line>
+              <line class="dc-grid" x1="8" y1="120" x2="252" y2="120"></line>
+              <line class="dc-grid" x1="8" y1="185" x2="252" y2="185"></line>
+              <path
+                class="dc-line"
+                d="M 8 24 C 28 28, 44 43, 61 56 S 93 76, 112 92 S 144 111, 163 134 S 193 159, 213 186 S 239 211, 252 222"
+              ></path>
+              <circle class="dc-endpoint" cx="252" cy="222" r="6"></circle>
+            </svg>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var layout = root.querySelector(".dc-layout");
+            var ambient = root.querySelector(".dc-ambient");
+            var gloom = root.querySelector(".dc-gloom");
+            var label = root.querySelector(".dc-label");
+            var value = root.querySelector(".dc-value");
+            var line = root.querySelector(".dc-line");
+            var endpoint = root.querySelector(".dc-endpoint");
+            var lineLength = line.getTotalLength();
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            line.style.strokeDasharray = lineLength + " " + lineLength;
+
+            var startValue = Number.isFinite(vars.start_value) ? vars.start_value : 82;
+            var endValue = Number.isFinite(vars.end_value) ? vars.end_value : 34;
+            var labelText = vars.label == null ? "Retention" : String(vars.label);
+
+            label.textContent = labelText;
+
+            var IN_BASE = 0.55;
+            var OUT_BASE = 0.45;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var fixedTotal = IN_BASE + OUT_BASE;
+            var phaseScale = duration < fixedTotal ? duration / fixedTotal : 1;
+            var IN = IN_BASE * phaseScale;
+            var OUT = OUT_BASE * phaseScale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var OUT_START = IN + HOLD;
+            var progress = { value: 0 };
+
+            function renderProgress() {
+              var p = progress.value;
+              line.style.strokeDashoffset = String(lineLength * (1 - p));
+              ambient.style.filter =
+                "saturate(" + (1 - p * 0.72) + ") brightness(" + (1 - p * 0.52) + ")";
+              gloom.style.opacity = String(p * 0.46);
+              endpoint.style.opacity = String(Math.max(0, (p - 0.94) / 0.06));
+              value.textContent = String(Math.round(startValue + (endValue - startValue) * p));
+            }
+
+            renderProgress();
+
+            var tl = gsap.timeline({ paused: true });
+            tl.fromTo(
+              layout,
+              { opacity: 0, y: "2.5cqh" },
+              { opacity: 1, y: 0, duration: IN, ease: "power2.out" },
+              0,
+            );
+
+            if (HOLD > 0) {
+              tl.to(
+                progress,
+                { value: 1, duration: HOLD, ease: "power2.out", onUpdate: renderProgress },
+                IN,
+              );
+            } else {
+              tl.call(
+                function () {
+                  progress.value = 1;
+                  renderProgress();
+                },
+                [],
+                IN,
+              );
+            }
+
+            tl.fromTo(
+              endpoint,
+              { scale: 0.72 },
+              { scale: 1, duration: OUT, ease: "power2.out" },
+              OUT_START,
+            );
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["decline-chart"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/decline-chart/demo.html b/docs/public/catalog/components/decline-chart/demo.html
new file mode 100644
index 0000000000..08e7dae3e6
--- /dev/null
+++ b/docs/public/catalog/components/decline-chart/demo.html
@@ -0,0 +1,96 @@
+<!doctype html>
+<!--
+  decline-chart demo. This standalone composition mounts the primitive with
+  non-default copy and values inside a dark neutral stage.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Decline Chart Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0b0c0e;
+      }
+
+      #root {
+        --fg: #f8fafc;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-body: Inter, system-ui, sans-serif;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(circle at 50% 42%, #171a1f 0%, #0b0c0e 70%);
+      }
+
+      .mount-card {
+        width: 68%;
+        height: 70%;
+        left: 16%;
+        top: 15%;
+        container-type: size;
+        overflow: hidden;
+        border: 1px solid rgba(148, 163, 184, 0.18);
+        border-radius: 32px;
+        box-shadow: 0 44px 100px rgba(0, 0, 0, 0.5);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="decline-chart-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="decline-chart-mount"
+        class="mount-card clip"
+        data-composition-id="decline-chart"
+        data-composition-src="./decline-chart.html"
+        data-variable-values='{"label":"Weekly retention","start_value":91,"end_value":26}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="1306"
+        data-height="756"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["decline-chart-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "decline-chart.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/device-frame-stage/demo.html b/docs/public/catalog/components/device-frame-stage/demo.html
new file mode 100644
index 0000000000..6d2200683f
--- /dev/null
+++ b/docs/public/catalog/components/device-frame-stage/demo.html
@@ -0,0 +1,134 @@
+<!doctype html>
+<html lang="en" data-composition-id="device-frame-stage-demo" data-composition-duration="5">
+  <!--
+    Device Frame Stage - Demo. Mounts the primitive via a clip with
+    data-composition-src instead of inlining its markup, proving the
+    sub-composition mount contract (template + #root + host-driven sizing;
+    see skills/hyperframes-core/references/sub-compositions.md).
+
+    The mount clip is deliberately sized to a 960x540 slot inside this
+    1920x1080 stage (not full-bleed): the primitive must size the device off
+    that HOST box, not off an assumed 1920x1080 stage, or it renders 2x too
+    large and bleeds past the slot's border.
+
+    Non-default variables (tablet / island / silver) exercise all three
+    variables away from the primitive's defaults (phone / none / graphite);
+    see device-frame-stage.html for the full header (concept, envelope, sync
+    points, sound cues).
+  -->
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Device Frame Stage - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+
+      #root {
+        /* 17-token dark theme contract, matching the other test-scene hosts. */
+        --bg: #06080b;
+        --fg: #f4f6f8;
+        --muted: #8b95a4;
+        --surface: #12161d;
+        --border: rgba(244, 246, 248, 0.16);
+        --brand: #ff7a33;
+        --accent: #22d3ee;
+        --font-display:
+          -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
+        --font-body:
+          -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        --radius: 16px;
+        --space-1: 8px;
+        --space-2: 16px;
+        --space-3: 32px;
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg);
+        color: var(--fg);
+        font-family: var(--font-body);
+      }
+
+      .demo-backdrop {
+        position: absolute;
+        inset: 0;
+        background: radial-gradient(120% 120% at 50% 18%, #222b40 0%, #05070d 65%);
+      }
+
+      /* The mount slot: 960x540, centered. Border makes any overflow past
+         this box immediately visible in a snapshot. */
+      .demo-slot {
+        position: absolute;
+        left: 480px;
+        top: 270px;
+        width: 960px;
+        height: 540px;
+        border: 1px dashed var(--border);
+        border-radius: var(--radius);
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="device-frame-stage-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-backdrop"></div>
+
+      <div
+        id="device-frame-stage-mount"
+        class="clip demo-slot"
+        data-composition-id="device-frame-stage"
+        data-composition-src="./device-frame-stage.html"
+        data-variable-values='{"device":"tablet","cutout":"island","body":"silver"}'
+        data-start="0"
+        data-duration="5"
+        data-track-index="0"
+        data-width="960"
+        data-height="540"
+      ></div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+      window.__timelines["device-frame-stage-demo"] = tl;
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "device-frame-stage.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/device-frame-stage/device-frame-stage.html b/docs/public/catalog/components/device-frame-stage/device-frame-stage.html
new file mode 100644
index 0000000000..a81cf78aad
--- /dev/null
+++ b/docs/public/catalog/components/device-frame-stage/device-frame-stage.html
@@ -0,0 +1,466 @@
+<!doctype html>
+<html
+  lang="en"
+  data-composition-id="device-frame-stage"
+  data-composition-duration="5"
+  data-composition-variables='[
+    { "id": "device", "type": "enum", "role": "layout", "label": "Device kind", "default": "phone", "options": [{ "value": "phone", "label": "Phone" }, { "value": "tablet", "label": "Tablet" }] },
+    { "id": "cutout", "type": "enum", "role": "layout", "label": "Camera cutout", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "island", "label": "Island" }, { "value": "notch", "label": "Notch" }] },
+    { "id": "body", "type": "enum", "role": "style", "label": "Body material", "default": "graphite", "options": [{ "value": "graphite", "label": "Graphite" }, { "value": "silver", "label": "Silver" }] }
+  ]'
+>
+  <!--
+    Device Frame Stage, a HyperFrames video primitive.
+
+    Concept: a phone or tablet mockup treated as a physical scene prop, not a
+    screenshot border. It stages arbitrary reconstructed UI in a screen slot,
+    rises onto the stage as one rigid prop, settles, idles, and holds. The
+    frame serves the screen (device-frame-spec's governing law): no spinning
+    hardware reveal, glare sweep, or camera-lens tour, ever.
+
+    This file is a mountable HyperFrames sub-composition (see
+    skills/hyperframes-core/references/sub-compositions.md): a host
+    composition embeds it via a clip carrying data-composition-src, a
+    matching data-composition-id, and its own data-start / data-duration /
+    data-track-index / data-width / data-height. Everything the render needs
+    lives inside <template> below; the #root div's own data-width /
+    data-height are declarative reference metadata only (the linter's
+    root-dimensions contract) -- the CSS never reads them, and the device
+    sizes relative to whatever host box it actually lands in (cqh/cqw), so
+    it never needs to be opened or rendered standalone. See demo.html for
+    the reference mount.
+
+    Compiled from: fixture + mobile mechanics inventory #1 + device-frame-spec.md
+    (~/dev/hyperframes-corpus-data/mobile/device-frame-spec.md), the
+    authoritative geometry / material / entry-law source for this primitive.
+
+    Use when: a scene needs to stage mobile or tablet UI as a physical
+    product (hero product demo, gesture-led interaction, screen swap) rather
+    than a bare floating screenshot.
+
+    Variables (data-composition-variables above):
+      device  enum phone|tablet          default "phone"     canonical outer ratio + logical viewport
+      cutout  enum none|island|notch     default "none"      camera cutout; must match the installed screen content's safe area
+      body    enum graphite|silver       default "graphite"  device material tone
+
+    Envelope (IN / HOLD / OUT, elasticity lives in HOLD only, never gsap.timeScale):
+      IN   1.08s fixed  rise-and-settle: 0.18s pre-roll, 0.72s power3.out rise past rest, 0.18s power2.inOut settle
+      HOLD elastic      idle float loop (period 3.2s, +/-0.6cqh), stretches or compresses to fill whatever duration remains
+      OUT  0.56s fixed  sink, power2.in
+
+    Sync points (fixed offsets into IN/OUT, never inside the elastic HOLD):
+      device-settled   t = IN (end of the settle segment) — screen content may start animating here
+
+    Sound cues: one SFX hook, "device-settle-soft", fired as an `hf:sfx`
+    CustomEvent at the device-settled sync point (t = IN). The primitive
+    never plays audio itself; the host scene mixes the cue.
+  -->
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Device Frame Stage</title>
+    <!-- head is metadata for the source file only; the runtime only clones
+         <template> contents on mount (see sub-compositions.md), so the gsap
+         loader here exists purely for opening this file directly during
+         authoring -- a host composition already provides window.gsap. -->
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  </head>
+  <body>
+    <template>
+      <style>
+        *,
+        *::before,
+        *::after {
+          box-sizing: border-box;
+        }
+
+        /* INVARIANT: root is styled by #root, never a class -- the compiler
+           scopes CSS to [data-composition-id="device-frame-stage"] as a
+           descendant selector, so a rule keyed on the root's own class would
+           never match the root itself (see sub-compositions.md, Pitfall 3).
+           This primitive is elastic and fills whatever box a host clip
+           gives it, from a 960x540 slot up to a full 1920x1080 frame.
+
+           The width/height !important below is load-bearing, not decoration:
+           when this root gets inlined into a host, the compiler's
+           flatten step (prepareFlattenedInnerRoot) reads this element's own
+           data-width/data-height (required by the root_missing_dimensions
+           lint rule) and force-writes them back as an inline
+           style="width:1920px;height:1080px". Inline style beats a plain
+           stylesheet rule, so without !important the root would render at a
+           fixed 1920x1080 instead of filling the host box -- exactly the
+           2x-oversized-and-bleeding bug this primitive was fixed for. */
+        #root {
+          position: absolute;
+          inset: 0;
+          width: 100% !important;
+          height: 100% !important;
+          container-type: size;
+          isolation: isolate;
+        }
+
+        .device-stage {
+          --stage-perspective: 1600px;
+          position: absolute;
+          inset: 0;
+          perspective: var(--stage-perspective);
+          perspective-origin: 50% 50%;
+        }
+
+        .device-frame {
+          /* INVARIANT: geometry below is physical-material law from
+             device-frame-spec.md (corner/bezel/aspect percentages, gradient,
+             shadow), not brand paint. It may carry literal fallbacks per the
+             primitive's material exception; do not swap in --radius/--space-*. */
+          --device-color: #1b1d22;
+          --device-color-hi: #343740;
+          --device-color-dark: #111318;
+          --device-radius: 46px;
+          --device-bezel: 9px;
+          --screen-radius: calc(var(--device-radius) - var(--device-bezel));
+          --device-aspect: 9 / 19.5;
+          --device-y: 18cqh;
+          --device-scale: 0.94;
+
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          height: 90cqh;
+          aspect-ratio: var(--device-aspect);
+          border-radius: var(--device-radius);
+          padding: var(--device-bezel);
+          background: linear-gradient(
+            145deg,
+            var(--device-color-hi),
+            var(--device-color) 42%,
+            var(--device-color-dark)
+          );
+          border: 1px solid rgba(255, 255, 255, 0.22);
+          box-shadow:
+            0 52px 110px rgba(7, 10, 20, 0.3),
+            0 18px 38px rgba(7, 10, 20, 0.22),
+            0 3px 9px rgba(7, 10, 20, 0.16),
+            inset 0 1px 0 rgba(255, 255, 255, 0.24),
+            inset 0 0 0 1px rgba(0, 0, 0, 0.48);
+          transform: translate(-50%, calc(-50% + var(--device-y))) scale(var(--device-scale));
+          transform-style: preserve-3d;
+          transform-origin: 50% 88%;
+          will-change: transform;
+        }
+
+        /* EDIT ZONE: kind/cutout/body are driven by data-composition-variables
+           (see JS below); an installing agent may also override
+           --device-color / --device-color-hi / --device-color-dark inline for
+           a bespoke finish without touching the geometry laws. */
+        .device-frame[data-kind="tablet"] {
+          --device-radius: 48px;
+          --device-bezel: 16px;
+          --screen-radius: 34px;
+          --device-aspect: 3 / 4;
+          height: 82cqh;
+        }
+
+        .device-frame[data-body="silver"] {
+          --device-color: #c9cdd3;
+          --device-color-hi: #eef1f4;
+          --device-color-dark: #9a9ea6;
+        }
+
+        .device-screen {
+          position: relative;
+          width: 100%;
+          height: 100%;
+          overflow: hidden;
+          border-radius: var(--screen-radius);
+          background: var(--surface, #f5f6f8);
+          box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.42);
+          isolation: isolate;
+          container-type: size;
+        }
+
+        .screen-viewport {
+          /* Logical-pixel authoring space (390x844 phone / 768x1024 tablet),
+             uniformly scaled to the actual screen box by JS-measured
+             --screen-scale (device-frame-spec, "Screen content contract"). The
+             scale is scene setup, not animation. */
+          position: absolute;
+          left: 0;
+          top: 0;
+          width: calc(var(--logical-width, 390) * 1px);
+          height: calc(var(--logical-height, 844) * 1px);
+          transform-origin: 0 0;
+          transform: scale(var(--screen-scale, 1));
+        }
+
+        .screen-safe-area {
+          height: 100%;
+          box-sizing: border-box;
+          padding-top: calc(var(--logical-height, 844) * 1px * 0.03);
+        }
+
+        .device-frame[data-cutout="island"] .screen-safe-area {
+          padding-top: calc(var(--logical-height, 844) * 1px * 0.075);
+        }
+
+        .device-frame[data-cutout="notch"] .screen-safe-area {
+          padding-top: calc(var(--logical-height, 844) * 1px * 0.06);
+        }
+
+        .device-screen-slot {
+          position: relative;
+          width: 100%;
+          height: 100%;
+        }
+
+        /* Visible only while the slot is empty (comments do not count toward
+           :empty); vanishes the moment an installing agent drops real content
+           in, no cleanup required. */
+        .device-screen-slot:empty {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border: 1px dashed var(--border, rgba(15, 23, 42, 0.16));
+          border-radius: calc(var(--screen-radius) * 0.4);
+        }
+
+        .device-screen-slot:empty::before {
+          content: "screen slot: replace with reconstructed UI";
+          padding: var(--space-2, 16px);
+          color: var(--muted, #94a3b8);
+          font-family: var(--font-body, Inter, system-ui, sans-serif);
+          font-size: 15px;
+          text-align: center;
+        }
+
+        .device-cutout {
+          position: absolute;
+          left: 50%;
+          top: 0;
+          z-index: 50;
+          width: 0;
+          height: 0;
+          background: #050607;
+          pointer-events: none;
+          transform: translateX(-50%);
+        }
+
+        .device-frame[data-cutout="island"] .device-cutout {
+          top: 1.4%;
+          width: 28%;
+          height: 3.2%;
+          border-radius: 999px;
+        }
+
+        .device-frame[data-cutout="notch"] .device-cutout {
+          top: 0;
+          width: 52%;
+          height: 3.8%;
+          border-radius: 0 0 18px 18px;
+        }
+      </style>
+
+      <!-- data-width / data-height here satisfy the linter's root-dimensions
+           contract (root_missing_dimensions) and match every other
+           sub-composition's #root -- see sub-compositions.md's own
+           file-shape example. The compiler's flatten step also reads these
+           two attributes and force-writes them back as an inline
+           width/height style on mount, so #root's width/height !important
+           above is required to keep the rendered box elastic (fills the
+           host clip's actual box, from a 960x540 slot up to a full
+           1920x1080 frame) instead of a fixed 1920x1080. -->
+      <div
+        id="root"
+        data-composition-id="device-frame-stage"
+        data-width="1920"
+        data-height="1080"
+        data-duration="5"
+      >
+        <div class="device-stage">
+          <div class="device-frame" data-kind="phone" data-cutout="none" data-body="graphite">
+            <div class="device-screen">
+              <div class="screen-viewport">
+                <div class="screen-safe-area">
+                  <div class="device-screen-slot" data-screen-slot>
+                    <!-- EDIT ZONE: replace with reconstructed product UI, or
+                         nest a <div data-composition-src="..." data-duration="...">
+                         sub-composition host. Author content at the device's
+                         logical viewport (390x844 phone, 768x1024 tablet);
+                         this slot is pre-scaled for you, so keep coordinates
+                         in logical screen pixels, never canvas pixels. -->
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="device-cutout" aria-hidden="true"></div>
+          </div>
+        </div>
+      </div>
+
+      <script>
+        (function () {
+          "use strict";
+
+          var html = document.documentElement;
+          var root = document.getElementById("root");
+          var frame = root.querySelector(".device-frame");
+          var screen = root.querySelector(".device-screen");
+          var viewport = root.querySelector(".screen-viewport");
+
+          var declared = {};
+          try {
+            JSON.parse(html.getAttribute("data-composition-variables") || "[]").forEach(
+              function (variable) {
+                declared[variable.id] = variable.default;
+              },
+            );
+          } catch (error) {}
+          var vars = Object.assign({}, declared, window.__hfVariables || {});
+
+          var device = vars.device === "tablet" ? "tablet" : "phone";
+          var cutout = vars.cutout === "island" || vars.cutout === "notch" ? vars.cutout : "none";
+          var body = vars.body === "silver" ? "silver" : "graphite";
+
+          frame.setAttribute("data-kind", device);
+          frame.setAttribute("data-cutout", cutout);
+          frame.setAttribute("data-body", body);
+
+          var LOGICAL = { phone: [390, 844], tablet: [768, 1024] };
+          var logicalWidth = LOGICAL[device][0];
+          var logicalHeight = LOGICAL[device][1];
+          viewport.style.setProperty("--logical-width", String(logicalWidth));
+          viewport.style.setProperty("--logical-height", String(logicalHeight));
+
+          function updateScreenScale() {
+            var rect = screen.getBoundingClientRect();
+            if (rect.width > 0)
+              viewport.style.setProperty("--screen-scale", String(rect.width / logicalWidth));
+          }
+          updateScreenScale();
+          if (typeof ResizeObserver !== "undefined") {
+            new ResizeObserver(updateScreenScale).observe(screen);
+          }
+
+          // NOTE: the timeline registration key below is a literal string,
+          // not read from root.getAttribute("data-composition-id") -- when
+          // this file is mounted via data-composition-src, the compiler
+          // strips data-composition-id from the inlined root (the HOST
+          // clip keeps its own copy instead), so a live read here would
+          // return null and the host would never find this timeline (see
+          // sub-compositions.md, Pitfall 2). registry/test-scenes/slots/empty.html
+          // models the same literal-key pattern.
+          var compositionId = "device-frame-stage";
+          var duration = Math.max(
+            0.001,
+            parseFloat(
+              root.dataset.duration || html.getAttribute("data-composition-duration") || "5",
+            ),
+          );
+
+          // INVARIANT: IN/OUT durations are fixed by device-frame-spec's entry
+          // and exit law; only HOLD stretches or compresses to fit whatever
+          // duration the host gives this instance. Never gsap.timeScale().
+          var IN_DELAY = 0.18;
+          var IN_RISE = 0.72;
+          var IN_SETTLE = 0.18;
+          var IN_BASE = IN_DELAY + IN_RISE + IN_SETTLE; // 1.08s
+          var OUT_BASE = 0.56;
+          var totalBase = IN_BASE + OUT_BASE;
+          var IN = IN_BASE;
+          var OUT = OUT_BASE;
+          if (duration < totalBase) {
+            var shrink = duration / totalBase;
+            IN = IN_BASE * shrink;
+            OUT = OUT_BASE * shrink;
+          }
+          var HOLD = Math.max(0, duration - (IN + OUT));
+          var OUT_AT = IN + HOLD;
+          // SYNC POINT: device-settled fires at t = IN (fixed offset into IN,
+          // never inside the elastic HOLD).
+
+          function easeOutCubic(x) {
+            return 1 - Math.pow(1 - x, 3);
+          }
+          function easeInOutQuad(x) {
+            return x < 0.5 ? 2 * x * x : 1 - Math.pow(-2 * x + 2, 2) / 2;
+          }
+          function easeInQuad(x) {
+            return x * x;
+          }
+
+          function setPose(yCqh, scaleValue) {
+            frame.style.setProperty("--device-y", yCqh.toFixed(3) + "cqh");
+            frame.style.setProperty("--device-scale", scaleValue.toFixed(4));
+          }
+
+          function renderIn(t) {
+            var delayEnd = IN_DELAY * (IN / IN_BASE);
+            var riseEnd = delayEnd + IN_RISE * (IN / IN_BASE);
+            if (t <= delayEnd) {
+              setPose(18, 0.94);
+              return;
+            }
+            if (t <= riseEnd) {
+              var p = easeOutCubic(
+                Math.min(1, (t - delayEnd) / Math.max(0.0001, riseEnd - delayEnd)),
+              );
+              setPose(18 + (-1.2 - 18) * p, 0.94 + (1.01 - 0.94) * p);
+              return;
+            }
+            var p2 = easeInOutQuad(Math.min(1, (t - riseEnd) / Math.max(0.0001, IN - riseEnd)));
+            setPose(-1.2 + (0 - -1.2) * p2, 1.01 + (1 - 1.01) * p2);
+          }
+
+          // RETIME RANGE: the idle float is the only elastic segment. It
+          // repeats for as long as HOLD lasts, so stretching the host duration
+          // never re-times the fixed IN or OUT phases above.
+          function renderHold(holdT) {
+            var period = 3.2;
+            var amp = 0.6;
+            var phase = ((holdT % period) / period) * Math.PI * 2;
+            setPose(Math.sin(phase) * amp, 1);
+          }
+
+          function renderOut(p) {
+            var e = easeInQuad(Math.min(1, p));
+            setPose(0 + 18 * e, 1 + (0.96 - 1) * e);
+          }
+
+          function render(t) {
+            if (t <= IN) renderIn(t);
+            else if (t < OUT_AT) renderHold(t - IN);
+            else renderOut((t - OUT_AT) / Math.max(0.0001, OUT));
+          }
+
+          function fireSfx(id, atTime) {
+            root.dispatchEvent(
+              new CustomEvent("hf:sfx", { detail: { id: id, t: atTime }, bubbles: true }),
+            );
+          }
+
+          var proxy = { t: 0 };
+          var tl = gsap.timeline({ paused: true });
+          tl.to(proxy, {
+            t: duration,
+            duration: duration,
+            ease: "none",
+            onUpdate: function () {
+              render(proxy.t);
+            },
+          });
+          tl.call(
+            function () {
+              fireSfx("device-settle-soft", IN);
+            },
+            [],
+            IN,
+          );
+          tl.to({}, { duration: Math.max(0, duration - tl.duration()) });
+          render(0);
+          tl.seek(0);
+          window.__timelines = window.__timelines || {};
+          window.__timelines[compositionId] = tl;
+        })();
+      </script>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/device-mockup-zoom/demo.html b/docs/public/catalog/components/device-mockup-zoom/demo.html
new file mode 100644
index 0000000000..51543e0c37
--- /dev/null
+++ b/docs/public/catalog/components/device-mockup-zoom/demo.html
@@ -0,0 +1,182 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Device Mockup Zoom - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+        /* ponytail: scale-up only — demo-frame is not a GSAP target */
+        transform: scale(0.87);
+      }
+      .hf-remocn-device-mockup-zoom {
+        --hf-accent: #2563eb;
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-device-mockup-zoom {
+        width: 820px;
+        min-height: 460px;
+        border-radius: 28px;
+        padding: 24px;
+        background: linear-gradient(145deg, #f0f9ff 0%, #e8f4fd 50%, #dbeafe 100%);
+        border: 1px solid rgba(37, 99, 235, 0.10);
+        box-shadow: 0 32px 90px rgba(15, 23, 42, 0.14), 0 4px 16px rgba(15, 23, 42, 0.06);
+        display: grid;
+        grid-template-columns: 270px 1fr;
+        gap: 20px;
+        overflow: hidden;
+      }
+      .hf-remocn-device-mockup-zoom .panel {
+        border: 1px solid rgba(15, 23, 42, 0.08);
+        border-radius: 24px;
+        background: rgba(255, 255, 255, 0.76);
+        padding: 22px;
+        backdrop-filter: blur(12px);
+      }
+      .hf-remocn-device-mockup-zoom .prompt {
+        display: grid;
+        gap: 12px;
+        align-content: start;
+      }
+      .hf-remocn-device-mockup-zoom .pill {
+        height: 42px;
+        border-radius: 999px;
+        background: #111827;
+        color: #fff;
+        display: flex;
+        align-items: center;
+        padding: 0 18px;
+        font-weight: 800;
+        transform: translateX(var(--hf-pill-x, 0px));
+      }
+      .hf-remocn-device-mockup-zoom .preview {
+        display: grid;
+        gap: 14px;
+      }
+      .hf-remocn-device-mockup-zoom .card {
+        min-height: 78px;
+        border-radius: 18px;
+        background: #fff;
+        border: 1px solid #e4e4e7;
+        box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
+        transform: translate(var(--hf-card-x, 0px), var(--hf-card-y, 0px))
+          scale(var(--hf-card-scale, 1));
+        opacity: var(--hf-card-opacity, 1);
+        padding: 16px 18px;
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+      }
+      .hf-remocn-device-mockup-zoom .card-bar {
+        height: 10px;
+        border-radius: 6px;
+        background: #e4e4e7;
+      }
+      .hf-remocn-device-mockup-zoom .card-bar.wide { width: 70%; }
+      .hf-remocn-device-mockup-zoom .card-bar.short { width: 45%; }
+      .hf-remocn-device-mockup-zoom .card-bar.accent { width: 30%; background: #2563eb; opacity: 0.25; }
+      .hf-remocn-device-mockup-zoom h3 {
+        margin: 0 0 14px;
+        font-size: 28px;
+        font-weight: 700;
+        letter-spacing: -0.03em;
+        color: #18181b;
+      }
+      .hf-remocn-device-mockup-zoom p {
+        margin: 0 0 8px;
+        font-size: 13px;
+        line-height: 1.55;
+        color: #71717a;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="device-mockup-zoom-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-device-mockup-zoom">
+          <div class="panel prompt">
+            <h3>Device Mockup Zoom</h3>
+            <p>A device frame scales forward while UI panels parallax behind it.</p>
+            <div class="pill">Generate scene</div>
+            <div class="pill">Refine motion</div>
+            <div class="pill">Export</div>
+          </div>
+          <div class="panel preview">
+            <div class="card">
+              <div class="card-bar wide"></div>
+              <div class="card-bar short"></div>
+              <div class="card-bar accent"></div>
+            </div>
+            <div class="card">
+              <div class="card-bar wide"></div>
+              <div class="card-bar short"></div>
+            </div>
+            <div class="card">
+              <div class="card-bar wide"></div>
+              <div class="card-bar accent"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-device-mockup-zoom .pill",
+          { "--hf-pill-x": "-18px", opacity: 0 },
+          { "--hf-pill-x": "0px", opacity: 1, duration: 0.25, stagger: 0.08, ease: "power2.out" },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-device-mockup-zoom .card",
+          { "--hf-card-y": "28px", "--hf-card-scale": 0.96, "--hf-card-opacity": 0 },
+          {
+            "--hf-card-y": "0px",
+            "--hf-card-scale": 1,
+            "--hf-card-opacity": 1,
+            duration: 0.42,
+            stagger: 0.12,
+            ease: "power3.out",
+          },
+          startTime + 0.2,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["device-mockup-zoom-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/device-mockup-zoom/device-mockup-zoom.html b/docs/public/catalog/components/device-mockup-zoom/device-mockup-zoom.html
new file mode 100644
index 0000000000..c1a66e4514
--- /dev/null
+++ b/docs/public/catalog/components/device-mockup-zoom/device-mockup-zoom.html
@@ -0,0 +1,94 @@
+<!--
+  Device Mockup Zoom - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-device-mockup-zoom">
+  <div class="panel prompt">
+    <h3>Device Mockup Zoom</h3>
+    <p>A device frame scales forward while UI panels parallax behind it.</p>
+    <div class="pill">Generate scene</div>
+    <div class="pill">Refine motion</div>
+    <div class="pill">Export</div>
+  </div>
+  <div class="panel preview">
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+  </div>
+</div>
+
+<style>
+  .hf-remocn-device-mockup-zoom {
+    --hf-accent: #2563eb;
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-device-mockup-zoom {
+    width: 820px;
+    min-height: 460px;
+    border-radius: 34px;
+    padding: 28px;
+    background: linear-gradient(135deg, #f8fafc, #e0f2fe);
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);
+    display: grid;
+    grid-template-columns: 280px 1fr;
+    gap: 22px;
+    overflow: hidden;
+  }
+  .hf-remocn-device-mockup-zoom .panel {
+    border: 1px solid rgba(15, 23, 42, 0.08);
+    border-radius: 24px;
+    background: rgba(255, 255, 255, 0.76);
+    padding: 22px;
+    backdrop-filter: blur(12px);
+  }
+  .hf-remocn-device-mockup-zoom .prompt {
+    display: grid;
+    gap: 12px;
+    align-content: start;
+  }
+  .hf-remocn-device-mockup-zoom .pill {
+    height: 42px;
+    border-radius: 999px;
+    background: #111827;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    padding: 0 18px;
+    font-weight: 800;
+    transform: translateX(var(--hf-pill-x, 0px));
+  }
+  .hf-remocn-device-mockup-zoom .preview {
+    display: grid;
+    gap: 14px;
+  }
+  .hf-remocn-device-mockup-zoom .card {
+    min-height: 78px;
+    border-radius: 18px;
+    background: #fff;
+    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
+    transform: translate(var(--hf-card-x, 0px), var(--hf-card-y, 0px))
+      scale(var(--hf-card-scale, 1));
+    opacity: var(--hf-card-opacity, 1);
+  }
+  .hf-remocn-device-mockup-zoom h3 {
+    margin: 0 0 14px;
+    font-size: 32px;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-device-mockup-zoom p {
+    margin: 0;
+    color: #475569;
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-device-mockup-zoom .pill', { '--hf-pill-x': '-18px', opacity: 0 }, { '--hf-pill-x': '0px', opacity: 1, duration: 0.25, stagger: 0.08, ease: 'power2.out' }, startTime); tl.fromTo('.hf-remocn-device-mockup-zoom .card', { '--hf-card-y': '28px', '--hf-card-scale': 0.96, '--hf-card-opacity': 0 }, { '--hf-card-y': '0px', '--hf-card-scale': 1, '--hf-card-opacity': 1, duration: 0.42, stagger: 0.12, ease: 'power3.out' }, startTime + 0.2);
+-->
diff --git a/docs/public/catalog/components/directional-wipe/__hf-variables-preview.html b/docs/public/catalog/components/directional-wipe/__hf-variables-preview.html
new file mode 100644
index 0000000000..757647d8bd
--- /dev/null
+++ b/docs/public/catalog/components/directional-wipe/__hf-variables-preview.html
@@ -0,0 +1,106 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Directional Wipe variables preview</title>
+    <style>
+      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #f7f7f8; }
+      #hf-vars-root { position: relative; width: 1920px; height: 1080px; }
+      #hf-vars-mount { position: absolute; inset: 0; display: grid; place-items: center; }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  </head>
+  <body>
+    <div id="hf-vars-root" data-composition-id="directional-wipe-variables-preview" data-start="0" data-width="1920" data-height="1080" data-duration="5" data-fps="30">
+      <div id="hf-vars-mount" class="clip" data-composition-id="directional-wipe" data-composition-src="./directional-wipe.html" data-start="0" data-duration="5" data-track-index="0" data-width="1920" data-height="1080"></div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["directional-wipe-variables-preview"] = gsap.timeline({ paused: true });
+    </script>
+    <script>
+      (function () {
+        var mount = document.getElementById("hf-vars-mount");
+        // The mount is filled asynchronously, and the demo script selects
+        // what it fills it with, so it cannot run before then.
+        var observer = new MutationObserver(build);
+        observer.observe(mount, { childList: true, subtree: true });
+        build();
+        function build() {
+          if (!mount.firstElementChild) return;
+          observer.disconnect();
+
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-directional-wipe .to",
+          { "--hf-clip-right": "100%", "--hf-to-x": "60px", "--hf-to-scale": 1.04 },
+          {
+            "--hf-clip-right": "0%",
+            "--hf-to-x": "0px",
+            "--hf-to-scale": 1,
+            duration: 0.9,
+            ease: "power3.inOut",
+          },
+          startTime,
+        );
+        tl.to(
+          ".hf-remocn-directional-wipe .from",
+          {
+            "--hf-from-x": "-70px",
+            "--hf-from-scale": 0.96,
+            "--hf-from-blur": "5px",
+            duration: 0.9,
+            ease: "power3.inOut",
+          },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-directional-wipe .fx",
+          { "--hf-fx-x": "-110%" },
+          { "--hf-fx-x": "110%", duration: 0.58, ease: "power2.inOut" },
+          startTime + 0.18,
+        );
+        tl.fromTo(
+          ".hf-remocn-directional-wipe .rgb",
+          { "--hf-rgb-opacity": 0, "--hf-rgb-x": "-16px" },
+          {
+            "--hf-rgb-opacity": 1,
+            "--hf-rgb-x": "16px",
+            repeat: 3,
+            yoyo: true,
+            duration: 0.07,
+            ease: "steps(1)",
+          },
+          startTime + 0.32,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["directional-wipe-demo"] = tl;
+          var child = window.__timelines["directional-wipe-demo"];
+          delete window.__timelines["directional-wipe-demo"];
+          if (!child || typeof child.paused !== "function") return;
+          child.paused(false);
+          window.__timelines["directional-wipe-variables-preview"].add(child, 0);
+        }
+      })();
+    </script>
+<script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "directional-wipe.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/directional-wipe/demo.html b/docs/public/catalog/components/directional-wipe/demo.html
new file mode 100644
index 0000000000..f197881fc1
--- /dev/null
+++ b/docs/public/catalog/components/directional-wipe/demo.html
@@ -0,0 +1,190 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Directional Wipe - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+        /* ponytail: scale wrapper only — GSAP targets live inside .hf-remocn-directional-wipe, not here */
+        transform: scale(1.65);
+      }
+      .hf-remocn-directional-wipe {
+        --hf-accent: var(--accent, rgba(255, 255, 255, 0.28));
+        --hf-l1: rgba(255, 255, 255, 0.72);
+        --hf-l3: rgba(255, 255, 255, 0.18);
+        --hf-l4: rgba(255, 255, 255, 0.08);
+        --hf-hair: rgba(255, 255, 255, 0.14);
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-directional-wipe {
+        position: relative;
+        width: 760px;
+        height: 428px;
+        overflow: hidden;
+        border-radius: 30px;
+        background: #111827;
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+      }
+      .hf-remocn-directional-wipe .scene {
+        position: absolute;
+        inset: 0;
+        display: grid;
+        place-items: center;
+        font-weight: 900;
+        font-size: 58px;
+        letter-spacing: -0.05em;
+        color: #fff;
+      }
+      .hf-remocn-directional-wipe .from {
+        background:
+          repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 4px),
+          var(--hf-l4);
+        transform: translate(var(--hf-from-x, 0px), var(--hf-from-y, 0px))
+          scale(var(--hf-from-scale, 1));
+        filter: blur(var(--hf-from-blur, 0px));
+      }
+      .hf-remocn-directional-wipe .to {
+        background:
+          repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 4px),
+          var(--hf-l3);
+        box-shadow: inset 0 0 0 2px var(--hf-accent);
+        transform: translate(var(--hf-to-x, 0px), var(--hf-to-y, 0px)) scale(var(--hf-to-scale, 1));
+        clip-path: inset(
+          var(--hf-clip-top, 0%) var(--hf-clip-right, 100%) var(--hf-clip-bottom, 0%)
+            var(--hf-clip-left, 0%)
+        );
+      }
+      .hf-remocn-directional-wipe .fx {
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
+        mix-blend-mode: screen;
+        transform: translateX(var(--hf-fx-x, -110%));
+      }
+      .hf-remocn-directional-wipe .rgb {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        opacity: var(--hf-rgb-opacity, 0);
+        background: linear-gradient(
+          90deg,
+          rgba(239, 68, 68, 0.35),
+          transparent,
+          rgba(34, 211, 238, 0.35)
+        );
+        transform: translateX(var(--hf-rgb-x, 0px));
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="directional-wipe-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-directional-wipe">
+          <div class="scene from">Before</div>
+          <div class="scene to">Directional Wipe</div>
+          <div class="fx"></div>
+          <div class="rgb"></div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-directional-wipe .to",
+          { "--hf-clip-right": "100%", "--hf-to-x": "60px", "--hf-to-scale": 1.04 },
+          {
+            "--hf-clip-right": "0%",
+            "--hf-to-x": "0px",
+            "--hf-to-scale": 1,
+            duration: 0.9,
+            ease: "power3.inOut",
+          },
+          startTime,
+        );
+        tl.to(
+          ".hf-remocn-directional-wipe .from",
+          {
+            "--hf-from-x": "-70px",
+            "--hf-from-scale": 0.96,
+            "--hf-from-blur": "5px",
+            duration: 0.9,
+            ease: "power3.inOut",
+          },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-directional-wipe .fx",
+          { "--hf-fx-x": "-110%" },
+          { "--hf-fx-x": "110%", duration: 0.58, ease: "power2.inOut" },
+          startTime + 0.18,
+        );
+        tl.fromTo(
+          ".hf-remocn-directional-wipe .rgb",
+          { "--hf-rgb-opacity": 0, "--hf-rgb-x": "-16px" },
+          {
+            "--hf-rgb-opacity": 1,
+            "--hf-rgb-x": "16px",
+            repeat: 3,
+            yoyo: true,
+            duration: 0.07,
+            ease: "steps(1)",
+          },
+          startTime + 0.32,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["directional-wipe-demo"] = tl;
+      </script>
+    </div>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "directional-wipe.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/directional-wipe/directional-wipe.html b/docs/public/catalog/components/directional-wipe/directional-wipe.html
new file mode 100644
index 0000000000..4e02639ae2
--- /dev/null
+++ b/docs/public/catalog/components/directional-wipe/directional-wipe.html
@@ -0,0 +1,146 @@
+<!--
+  Directional Wipe - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+
+  Variables. The script below reads each one, falls back to the declared
+  default on anything missing or unrecognised, and writes the result as a
+  custom property the CSS consumes. The timeline recipe at the bottom is
+  untouched by them.
+
+    - palette (slate | teal | ember, default slate): ink of the ring that marks
+      the incoming panel. Both panels are monochrome placeholder material; the
+      ring is the one accent-coloured element. slate rides --accent, teal rides
+      --brand, ember rides --accent-2, and each falls back to a neutral hairline
+      so an unthemed composition renders in black and white.
+    - corner (square | rounded | soft, default rounded): corner radius of the
+      card. square is 0, rounded the original 30px, soft 56px.
+
+  On every default the motion is unchanged.
+-->
+
+<div
+  class="hf-remocn-directional-wipe"
+  data-composition-variables='[
+    { "id": "palette", "type": "enum", "role": "style", "label": "Palette", "description": "Theme token for the ring marking the incoming panel. Slate rides --accent, teal --brand, ember --accent-2; each falls back to a neutral hairline.", "default": "slate", "options": [{ "value": "slate", "label": "Slate" }, { "value": "teal", "label": "Teal" }, { "value": "ember", "label": "Ember" }] },
+    { "id": "corner", "type": "enum", "role": "style", "label": "Corner", "description": "Corner radius of the transition card.", "default": "rounded", "options": [{ "value": "square", "label": "Square" }, { "value": "rounded", "label": "Rounded" }, { "value": "soft", "label": "Soft" }] }
+  ]'
+>
+  <div class="scene from">Before</div>
+  <div class="scene to">Directional Wipe</div>
+  <div class="fx"></div>
+  <div class="rgb"></div>
+</div>
+
+<style>
+  .hf-remocn-directional-wipe {
+    --hf-accent: var(--accent, rgba(255, 255, 255, 0.28));
+    --hf-l1: rgba(255, 255, 255, 0.72);
+    --hf-l3: rgba(255, 255, 255, 0.18);
+    --hf-l4: rgba(255, 255, 255, 0.08);
+    --hf-hair: rgba(255, 255, 255, 0.14);
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-directional-wipe {
+    position: relative;
+    width: 760px;
+    height: 428px;
+    overflow: hidden;
+    border-radius: var(--hf-corner, 30px);
+    background: #111827;
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+  }
+  .hf-remocn-directional-wipe .scene {
+    position: absolute;
+    inset: 0;
+    display: grid;
+    place-items: center;
+    font-weight: 900;
+    font-size: 58px;
+    letter-spacing: -0.05em;
+    color: #fff;
+  }
+  .hf-remocn-directional-wipe .from {
+    background:
+      repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 4px),
+      var(--hf-l4);
+    transform: translate(var(--hf-from-x, 0px), var(--hf-from-y, 0px))
+      scale(var(--hf-from-scale, 1));
+    filter: blur(var(--hf-from-blur, 0px));
+  }
+  .hf-remocn-directional-wipe .to {
+    background:
+      repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 4px),
+      var(--hf-l3);
+    box-shadow: inset 0 0 0 2px var(--hf-accent);
+    transform: translate(var(--hf-to-x, 0px), var(--hf-to-y, 0px)) scale(var(--hf-to-scale, 1));
+    clip-path: inset(
+      var(--hf-clip-top, 0%) var(--hf-clip-right, 100%) var(--hf-clip-bottom, 0%)
+        var(--hf-clip-left, 0%)
+    );
+  }
+  .hf-remocn-directional-wipe .fx {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
+    mix-blend-mode: screen;
+    transform: translateX(var(--hf-fx-x, -110%));
+  }
+  .hf-remocn-directional-wipe .rgb {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    opacity: var(--hf-rgb-opacity, 0);
+    background: linear-gradient(
+      90deg,
+      rgba(239, 68, 68, 0.35),
+      transparent,
+      rgba(34, 211, 238, 0.35)
+    );
+    transform: translateX(var(--hf-rgb-x, 0px));
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides fall back to their declared defaults.
+    // Theme tokens only. The neutral fallback keeps an unthemed mount monochrome.
+    var HAIRLINE = "rgba(255, 255, 255, 0.28)";
+    var palettes = {
+      slate: "var(--accent, " + HAIRLINE + ")",
+      teal: "var(--brand, " + HAIRLINE + ")",
+      ember: "var(--accent-2, " + HAIRLINE + ")",
+    };
+    var corners = { square: "0px", rounded: "30px", soft: "56px" };
+
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var palette = palettes[pick(palettes, vars.palette, "slate")];
+    var corner = corners[pick(corners, vars.corner, "rounded")];
+
+    var roots = document.querySelectorAll(".hf-remocn-directional-wipe");
+    for (var i = 0; i < roots.length; i += 1) {
+      roots[i].style.setProperty("--hf-accent", palette);
+      roots[i].style.setProperty("--hf-corner", corner);
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-directional-wipe .to', { '--hf-clip-right': '100%', '--hf-to-x': '60px', '--hf-to-scale': 1.04 }, { '--hf-clip-right': '0%', '--hf-to-x': '0px', '--hf-to-scale': 1, duration: 0.9, ease: 'power3.inOut' }, startTime); tl.to('.hf-remocn-directional-wipe .from', { '--hf-from-x': '-70px', '--hf-from-scale': 0.96, '--hf-from-blur': '5px', duration: 0.9, ease: 'power3.inOut' }, startTime); tl.fromTo('.hf-remocn-directional-wipe .fx', { '--hf-fx-x': '-110%' }, { '--hf-fx-x': '110%', duration: 0.58, ease: 'power2.inOut' }, startTime + 0.18); tl.fromTo('.hf-remocn-directional-wipe .rgb', { '--hf-rgb-opacity': 0, '--hf-rgb-x': '-16px' }, { '--hf-rgb-opacity': 1, '--hf-rgb-x': '16px', repeat: 3, yoyo: true, duration: 0.07, ease: 'steps(1)' }, startTime + 0.32);
+-->
diff --git a/docs/public/catalog/components/drag-and-drop-flow/demo.html b/docs/public/catalog/components/drag-and-drop-flow/demo.html
new file mode 100644
index 0000000000..97a96ea8bc
--- /dev/null
+++ b/docs/public/catalog/components/drag-and-drop-flow/demo.html
@@ -0,0 +1,208 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Drag and Drop Flow - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f4f4f5;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      /* ponytail: scale wrapper (not a GSAP target) — zoom avoided since no inline transform conflict */
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+        transform: scale(1.72);
+        transform-origin: center center;
+      }
+      .hf-remocn-drag-and-drop-flow {
+        --hf-accent: #2563eb;
+        --hf-ink: #18181b;
+        --hf-muted: #71717a;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-drag-and-drop-flow {
+        width: 820px;
+        min-height: 460px;
+        border-radius: 28px;
+        padding: 28px;
+        background: #ffffff;
+        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.10);
+        border: 1px solid #e4e4e7;
+        display: grid;
+        grid-template-columns: 280px 1fr;
+        gap: 22px;
+        overflow: hidden;
+      }
+      .hf-remocn-drag-and-drop-flow .panel {
+        border: 1px solid #e4e4e7;
+        border-radius: 16px;
+        background: #fafafa;
+        padding: 20px;
+      }
+      .hf-remocn-drag-and-drop-flow .prompt {
+        display: grid;
+        gap: 10px;
+        align-content: start;
+      }
+      .hf-remocn-drag-and-drop-flow .pill {
+        height: 40px;
+        border-radius: 999px;
+        background: #18181b;
+        color: #fff;
+        display: flex;
+        align-items: center;
+        padding: 0 16px;
+        font-size: 13px;
+        font-weight: 600;
+        transform: translateX(var(--hf-pill-x, 0px));
+      }
+      .hf-remocn-drag-and-drop-flow .preview {
+        display: grid;
+        gap: 12px;
+        align-content: start;
+      }
+      .hf-remocn-drag-and-drop-flow .preview-header {
+        font-size: 11px;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.08em;
+        color: #71717a;
+        margin-bottom: 4px;
+      }
+      .hf-remocn-drag-and-drop-flow .card {
+        min-height: 72px;
+        border-radius: 12px;
+        background: #ffffff;
+        border: 1px solid #e4e4e7;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+        padding: 14px 16px;
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+        transform: translate(var(--hf-card-x, 0px), var(--hf-card-y, 0px))
+          scale(var(--hf-card-scale, 1));
+        opacity: var(--hf-card-opacity, 1);
+      }
+      .hf-remocn-drag-and-drop-flow .card-label {
+        font-size: 13px;
+        font-weight: 600;
+        color: #18181b;
+      }
+      .hf-remocn-drag-and-drop-flow .card-meta {
+        font-size: 11px;
+        color: #71717a;
+      }
+      .hf-remocn-drag-and-drop-flow .card-tag {
+        display: inline-flex;
+        align-items: center;
+        height: 20px;
+        border-radius: 4px;
+        padding: 0 7px;
+        font-size: 10px;
+        font-weight: 600;
+        background: #f0fdf4;
+        color: #16a34a;
+        width: fit-content;
+      }
+      .hf-remocn-drag-and-drop-flow h3 {
+        margin: 0 0 6px;
+        font-size: 22px;
+        font-weight: 700;
+        letter-spacing: -0.03em;
+        color: #18181b;
+      }
+      .hf-remocn-drag-and-drop-flow p {
+        margin: 0 0 12px;
+        font-size: 12px;
+        line-height: 1.5;
+        color: #71717a;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="drag-and-drop-flow-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-drag-and-drop-flow">
+          <div class="panel prompt">
+            <h3>Drag and Drop Flow</h3>
+            <p>Cards drag from backlog to timeline with snap feedback.</p>
+            <div class="pill">Generate scene</div>
+            <div class="pill">Refine motion</div>
+            <div class="pill">Export</div>
+          </div>
+          <div class="panel preview">
+            <div class="preview-header">Timeline</div>
+            <div class="card">
+              <div class="card-label">Intro sequence</div>
+              <div class="card-meta">0s – 2.4s</div>
+              <div class="card-tag">Done</div>
+            </div>
+            <div class="card">
+              <div class="card-label">Motion blur pass</div>
+              <div class="card-meta">2.4s – 4.1s</div>
+              <div class="card-tag">Done</div>
+            </div>
+            <div class="card">
+              <div class="card-label">Export render</div>
+              <div class="card-meta">4.1s – 5.0s</div>
+              <div class="card-tag">Done</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-drag-and-drop-flow .pill",
+          { "--hf-pill-x": "-18px", opacity: 0 },
+          { "--hf-pill-x": "0px", opacity: 1, duration: 0.25, stagger: 0.08, ease: "power2.out" },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-drag-and-drop-flow .card",
+          { "--hf-card-y": "28px", "--hf-card-scale": 0.96, "--hf-card-opacity": 0 },
+          {
+            "--hf-card-y": "0px",
+            "--hf-card-scale": 1,
+            "--hf-card-opacity": 1,
+            duration: 0.42,
+            stagger: 0.12,
+            ease: "power3.out",
+          },
+          startTime + 0.2,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["drag-and-drop-flow-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/drag-and-drop-flow/drag-and-drop-flow.html b/docs/public/catalog/components/drag-and-drop-flow/drag-and-drop-flow.html
new file mode 100644
index 0000000000..aacb475598
--- /dev/null
+++ b/docs/public/catalog/components/drag-and-drop-flow/drag-and-drop-flow.html
@@ -0,0 +1,94 @@
+<!--
+  Drag and Drop Flow - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-drag-and-drop-flow">
+  <div class="panel prompt">
+    <h3>Drag and Drop Flow</h3>
+    <p>Cards drag from backlog to timeline with snap feedback.</p>
+    <div class="pill">Generate scene</div>
+    <div class="pill">Refine motion</div>
+    <div class="pill">Export</div>
+  </div>
+  <div class="panel preview">
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+  </div>
+</div>
+
+<style>
+  .hf-remocn-drag-and-drop-flow {
+    --hf-accent: #2563eb;
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-drag-and-drop-flow {
+    width: 820px;
+    min-height: 460px;
+    border-radius: 34px;
+    padding: 28px;
+    background: linear-gradient(135deg, #f8fafc, #e0f2fe);
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);
+    display: grid;
+    grid-template-columns: 280px 1fr;
+    gap: 22px;
+    overflow: hidden;
+  }
+  .hf-remocn-drag-and-drop-flow .panel {
+    border: 1px solid rgba(15, 23, 42, 0.08);
+    border-radius: 24px;
+    background: rgba(255, 255, 255, 0.76);
+    padding: 22px;
+    backdrop-filter: blur(12px);
+  }
+  .hf-remocn-drag-and-drop-flow .prompt {
+    display: grid;
+    gap: 12px;
+    align-content: start;
+  }
+  .hf-remocn-drag-and-drop-flow .pill {
+    height: 42px;
+    border-radius: 999px;
+    background: #111827;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    padding: 0 18px;
+    font-weight: 800;
+    transform: translateX(var(--hf-pill-x, 0px));
+  }
+  .hf-remocn-drag-and-drop-flow .preview {
+    display: grid;
+    gap: 14px;
+  }
+  .hf-remocn-drag-and-drop-flow .card {
+    min-height: 78px;
+    border-radius: 18px;
+    background: #fff;
+    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
+    transform: translate(var(--hf-card-x, 0px), var(--hf-card-y, 0px))
+      scale(var(--hf-card-scale, 1));
+    opacity: var(--hf-card-opacity, 1);
+  }
+  .hf-remocn-drag-and-drop-flow h3 {
+    margin: 0 0 14px;
+    font-size: 32px;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-drag-and-drop-flow p {
+    margin: 0;
+    color: #475569;
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-drag-and-drop-flow .pill', { '--hf-pill-x': '-18px', opacity: 0 }, { '--hf-pill-x': '0px', opacity: 1, duration: 0.25, stagger: 0.08, ease: 'power2.out' }, startTime); tl.fromTo('.hf-remocn-drag-and-drop-flow .card', { '--hf-card-y': '28px', '--hf-card-scale': 0.96, '--hf-card-opacity': 0 }, { '--hf-card-y': '0px', '--hf-card-scale': 1, '--hf-card-opacity': 1, duration: 0.42, stagger: 0.12, ease: 'power3.out' }, startTime + 0.2);
+-->
diff --git a/docs/public/catalog/components/drift-hold/demo.html b/docs/public/catalog/components/drift-hold/demo.html
new file mode 100644
index 0000000000..ed0ae69d42
--- /dev/null
+++ b/docs/public/catalog/components/drift-hold/demo.html
@@ -0,0 +1,101 @@
+<!doctype html>
+<!--
+  drift-hold demo. This standalone composition mounts drift-hold.html through
+  data-composition-src. Non-default text and whisper intensity prove that both
+  variables flow through the elastic host mount.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Drift Hold Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0b0c0e;
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --surface: #172033;
+        --fg: #f8fafc;
+        --muted: #94a3b8;
+        --accent: #38bdf8;
+        --border: #475569;
+        --radius: 3.2cqmin;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-body: Inter, system-ui, sans-serif;
+        --space-3: 5cqmin;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 42%, #142038 0%, #0b0c0e 72%);
+      }
+
+      .mount-card {
+        width: 58%;
+        height: 54%;
+        left: 21%;
+        top: 23%;
+        container-type: size;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="drift-hold-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="drift-hold-mount"
+        class="mount-card clip"
+        data-composition-id="drift-hold"
+        data-composition-src="./drift-hold.html"
+        data-variable-values='{"text":"Quiet momentum","intensity":"whisper"}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="1114"
+        data-height="583"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["drift-hold-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "drift-hold.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/drift-hold/drift-hold.html b/docs/public/catalog/components/drift-hold/drift-hold.html
new file mode 100644
index 0000000000..6aa5293b14
--- /dev/null
+++ b/docs/public/catalog/components/drift-hold/drift-hold.html
@@ -0,0 +1,192 @@
+<!doctype html>
+<!--
+  drift-hold: HyperFrames video primitive (camera / ambient / hold)
+
+  Concept: a centered content card never becomes fully static. Sub-degree
+  rotation, restrained scale breathing, and a soft light sweep each follow
+  one complete sine cycle across the mounted duration.
+
+  Variables:
+    - text (string, default "Always alive"): the card label.
+    - intensity (whisper | standard, default "standard"): selects the
+      amplitudes for rotation, breathing, and the light sweep.
+
+  Envelope:
+    IN = 0s
+    HOLD = elastic = the complete mounted duration
+    OUT = 0s
+    HOLD owns exactly one whole cycle at every duration. The endpoint phase
+    is explicitly wrapped to zero so the pose at t=0 exactly equals the pose
+    at t=duration.
+
+  Mount contract: the runtime clones only this template. #root fills the
+  host box, establishes the container query basis, has no data-width or
+  data-height, and registers one paused timeline under the hardcoded
+  drift-hold id.
+-->
+<html
+  lang="en"
+  data-composition-id="drift-hold"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "text", "type": "string", "role": "content", "label": "Text", "description": "Text displayed in the default centered card.", "default": "Always alive" },
+    { "id": "intensity", "type": "enum", "role": "motion", "label": "Intensity", "description": "Amplitude of the ambient rotation, breathing, and light sweep.", "default": "standard", "options": [{ "value": "whisper", "label": "Whisper" }, { "value": "standard", "label": "Standard" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Drift Hold</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="drift-hold" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .dh-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+          }
+
+          .dh-card {
+            position: relative;
+            display: grid;
+            width: 68cqw;
+            min-height: 44cqh;
+            place-items: center;
+            overflow: hidden;
+            padding: var(--space-3, 5cqh) var(--space-3, 6cqw);
+            border: 0.16cqmin solid color-mix(in srgb, var(--border, #475569) 82%, transparent);
+            border-radius: var(--radius, 3.2cqmin);
+            background: color-mix(in srgb, var(--surface, #172033) 94%, var(--accent, #38bdf8));
+            box-shadow: 0 3.5cqh 10cqh color-mix(in srgb, var(--bg, #05070d) 58%, transparent);
+            transform-origin: 50% 50%;
+            will-change: transform;
+          }
+
+          .dh-sweep {
+            position: absolute;
+            top: -45%;
+            left: 42%;
+            width: 20cqw;
+            height: 190%;
+            background: linear-gradient(
+              90deg,
+              transparent 0%,
+              color-mix(in srgb, var(--accent, #38bdf8) 10%, transparent) 25%,
+              color-mix(in srgb, var(--fg, #f8fafc) 28%, transparent) 50%,
+              color-mix(in srgb, var(--accent, #38bdf8) 10%, transparent) 75%,
+              transparent 100%
+            );
+            filter: blur(1.8cqmin);
+            will-change: transform, opacity;
+          }
+
+          .dh-label {
+            position: relative;
+            z-index: 1;
+            max-width: 56cqw;
+            overflow: hidden;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: clamp(20px, 9cqmin, 76px);
+            font-weight: 720;
+            line-height: 1.05;
+            letter-spacing: -0.035em;
+            text-align: center;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+        </style>
+
+        <div
+          id="drift-hold-clip"
+          class="dh-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="dh-card">
+            <div class="dh-sweep" aria-hidden="true"></div>
+            <div class="dh-label"></div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var card = root.querySelector(".dh-card");
+            var sweep = root.querySelector(".dh-sweep");
+            var label = root.querySelector(".dh-label");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var text = vars.text == null ? "Always alive" : String(vars.text);
+            var intensity = vars.intensity === "whisper" ? "whisper" : "standard";
+            var amplitudes = {
+              whisper: { rotation: 0.24, scale: 0.006, sweep: 30, light: 0.04 },
+              standard: { rotation: 0.6, scale: 0.015, sweep: 42, light: 0.08 },
+            };
+            var motion = amplitudes[intensity];
+
+            label.textContent = text;
+
+            var TAU = Math.PI * 2;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var state = { phase: 0 };
+
+            function renderPose() {
+              // Literal phase zero at the endpoint removes floating point
+              // residue from Math.sin(2 * PI) and makes the seam exact.
+              var phase = state.phase === TAU ? 0 : state.phase;
+              var rotation = Math.sin(phase + Math.PI / 6) * motion.rotation;
+              var scale = 1 + Math.sin(phase + Math.PI / 2) * motion.scale;
+              var sweepX = Math.sin(phase - Math.PI / 2) * motion.sweep;
+              var sweepOpacity = 0.12 + Math.sin(phase + Math.PI / 3) * motion.light;
+
+              gsap.set(card, { rotation: rotation, scale: scale });
+              gsap.set(sweep, {
+                x: sweepX + "cqw",
+                rotation: 14,
+                opacity: sweepOpacity,
+              });
+            }
+
+            var tl = gsap.timeline({ paused: true });
+
+            // HOLD: uniform phase travel drives only whole-cycle sine motion.
+            tl.to(state, { phase: TAU, duration: duration, ease: "none", onUpdate: renderPose }, 0);
+
+            renderPose();
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["drift-hold"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/dynamic-grid/__hf-variables-preview.html b/docs/public/catalog/components/dynamic-grid/__hf-variables-preview.html
new file mode 100644
index 0000000000..2c3168c328
--- /dev/null
+++ b/docs/public/catalog/components/dynamic-grid/__hf-variables-preview.html
@@ -0,0 +1,68 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Dynamic Grid variables preview</title>
+    <style>
+      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: linear-gradient(135deg, #07131d, #13312d); }
+      #hf-vars-root { position: relative; width: 1920px; height: 1080px; }
+      #hf-vars-mount { position: absolute; inset: 0; display: grid; place-items: center; }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  </head>
+  <body>
+    <div id="hf-vars-root" data-composition-id="dynamic-grid-variables-preview" data-start="0" data-width="1920" data-height="1080" data-duration="5" data-fps="30">
+      <div id="hf-vars-mount" class="clip" data-composition-id="dynamic-grid" data-composition-src="./dynamic-grid.html" data-start="0" data-duration="5" data-track-index="0" data-width="1920" data-height="1080"></div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["dynamic-grid-variables-preview"] = gsap.timeline({ paused: true });
+    </script>
+    <script>
+      (function () {
+        var mount = document.getElementById("hf-vars-mount");
+        // The mount is filled asynchronously, and the demo script selects
+        // what it fills it with, so it cannot run before then.
+        var observer = new MutationObserver(build);
+        observer.observe(mount, { childList: true, subtree: true });
+        build();
+        function build() {
+          if (!mount.firstElementChild) return;
+          observer.disconnect();
+
+        const tl = gsap.timeline({ paused: true });
+        tl.from(".content", { opacity: 0, y: 32, duration: 0.7, ease: "power3.out" }, 0.25);
+        tl.to(
+          ".hf-dynamic-grid",
+          { "--hf-grid-x": "72px", "--hf-grid-y": "-72px", duration: 6, ease: "none" },
+          0,
+        );
+        window.__timelines = window.__timelines || {};
+        window.__timelines["dynamic-grid-demo"] = tl;
+          var child = window.__timelines["dynamic-grid-demo"];
+          delete window.__timelines["dynamic-grid-demo"];
+          if (!child || typeof child.paused !== "function") return;
+          child.paused(false);
+          window.__timelines["dynamic-grid-variables-preview"].add(child, 0);
+        }
+      })();
+    </script>
+<script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "dynamic-grid.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/dynamic-grid/demo.html b/docs/public/catalog/components/dynamic-grid/demo.html
new file mode 100644
index 0000000000..9ef53464dc
--- /dev/null
+++ b/docs/public/catalog/components/dynamic-grid/demo.html
@@ -0,0 +1,109 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Dynamic Grid - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: linear-gradient(135deg, #07131d, #13312d);
+        color: white;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-dynamic-grid {
+        --hf-grid-size: 72px;
+        --hf-grid-color: rgba(255, 255, 255, 0.16);
+        --hf-grid-x: 0px;
+        --hf-grid-y: 0px;
+        --hf-grid-opacity: 1;
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        opacity: var(--hf-grid-opacity);
+        background-image:
+          linear-gradient(var(--hf-grid-color) 1px, transparent 1px),
+          linear-gradient(90deg, var(--hf-grid-color) 1px, transparent 1px);
+        background-size: var(--hf-grid-size) var(--hf-grid-size);
+        background-position: var(--hf-grid-x) var(--hf-grid-y);
+      }
+      .content {
+        position: absolute;
+        left: 180px;
+        bottom: 170px;
+        width: 1020px;
+      }
+      .title {
+        font-size: 118px;
+        line-height: 0.96;
+        font-weight: 900;
+        letter-spacing: -0.035em;
+      }
+      .copy {
+        margin-top: 34px;
+        width: 760px;
+        font-size: 38px;
+        line-height: 1.2;
+        color: rgba(255, 255, 255, 0.65);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="dynamic-grid-demo"
+      data-width="1920"
+      data-height="1080"
+      data-duration="6"
+    >
+      <div class="hf-dynamic-grid" aria-hidden="true"></div>
+      <div class="content">
+        <div class="title">Dynamic grid motion</div>
+        <div class="copy">
+          A web-native background primitive for product demos, explainers, and data scenes.
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        tl.from(".content", { opacity: 0, y: 32, duration: 0.7, ease: "power3.out" }, 0.25);
+        tl.to(
+          ".hf-dynamic-grid",
+          { "--hf-grid-x": "72px", "--hf-grid-y": "-72px", duration: 6, ease: "none" },
+          0,
+        );
+        window.__timelines = window.__timelines || {};
+        window.__timelines["dynamic-grid-demo"] = tl;
+      </script>
+    </div>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "dynamic-grid.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/dynamic-grid/dynamic-grid.html b/docs/public/catalog/components/dynamic-grid/dynamic-grid.html
new file mode 100644
index 0000000000..dff7d3ad05
--- /dev/null
+++ b/docs/public/catalog/components/dynamic-grid/dynamic-grid.html
@@ -0,0 +1,104 @@
+<!--
+  Dynamic Grid - animated background primitive.
+
+  Paste the grid as the first child of a scene. Animate --hf-grid-x,
+  --hf-grid-y, and --hf-grid-opacity from your paused GSAP timeline.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result as a custom property
+  the CSS consumes. The timeline recipe below is untouched by them: it keeps
+  driving the scroll offset and the opacity.
+
+    - density (fine | standard | coarse, default standard): cell size of the
+      grid, 44px, 72px or 112px. fine reads as graph paper, coarse as a few
+      large panels.
+    - weight (hairline | standard | bold, default hairline): line thickness,
+      1px, 2px or 3px.
+    - tone (neutral | green | blue | violet, default neutral): line colour.
+      neutral is the translucent white the original ships with, and the three
+      accents ride --brand, --accent and --accent-2.
+
+  On every default the result is identical to the original: 72px cells drawn
+  in 1px translucent white lines.
+-->
+
+<div
+  class="hf-dynamic-grid"
+  aria-hidden="true"
+  data-composition-variables='[
+    { "id": "density", "type": "enum", "role": "style", "label": "Density", "description": "Cell size of the grid: fine reads as graph paper, coarse as a few large panels.", "default": "standard", "options": [{ "value": "fine", "label": "Fine" }, { "value": "standard", "label": "Standard" }, { "value": "coarse", "label": "Coarse" }] },
+    { "id": "weight", "type": "enum", "role": "style", "label": "Weight", "description": "Thickness of the grid lines, from a hairline rule to a bold structural grid.", "default": "hairline", "options": [{ "value": "hairline", "label": "Hairline" }, { "value": "standard", "label": "Standard" }, { "value": "bold", "label": "Bold" }] },
+    { "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Line colour: neutral is the translucent white the original ships with, and the accents ride --brand, --accent and --accent-2.", "default": "neutral", "options": [{ "value": "neutral", "label": "Neutral" }, { "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] }
+  ]'
+></div>
+
+<style>
+  .hf-dynamic-grid {
+    --hf-grid-size: 72px;
+    --hf-grid-line: 1px;
+    --hf-grid-color: rgba(255, 255, 255, 0.16);
+    --hf-grid-x: 0px;
+    --hf-grid-y: 0px;
+    --hf-grid-opacity: 1;
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    opacity: var(--hf-grid-opacity);
+    background-image:
+      linear-gradient(var(--hf-grid-color) var(--hf-grid-line), transparent var(--hf-grid-line)),
+      linear-gradient(
+        90deg,
+        var(--hf-grid-color) var(--hf-grid-line),
+        transparent var(--hf-grid-line)
+      );
+    background-size: var(--hf-grid-size) var(--hf-grid-size);
+    background-position: var(--hf-grid-x) var(--hf-grid-y);
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var sizes = { fine: "44px", standard: "72px", coarse: "112px" };
+    var weights = { hairline: "1px", standard: "2px", bold: "3px" };
+    var tones = {
+      neutral: "rgba(255, 255, 255, 0.16)",
+      green: "color-mix(in srgb, var(--brand, #34d399) 34%, transparent)",
+      blue: "color-mix(in srgb, var(--accent, #38bdf8) 34%, transparent)",
+      violet: "color-mix(in srgb, var(--accent-2, #a78bfa) 34%, transparent)",
+    };
+
+    var size = sizes[pick(sizes, vars.density, "standard")];
+    var line = weights[pick(weights, vars.weight, "hairline")];
+    var color = tones[pick(tones, vars.tone, "neutral")];
+
+    var roots = document.querySelectorAll(".hf-dynamic-grid");
+    for (var i = 0; i < roots.length; i += 1) {
+      roots[i].style.setProperty("--hf-grid-size", size);
+      roots[i].style.setProperty("--hf-grid-line", line);
+      roots[i].style.setProperty("--hf-grid-color", color);
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+
+  tl.to(".hf-dynamic-grid", {
+    "--hf-grid-x": "72px",
+    "--hf-grid-y": "-72px",
+    duration: 6,
+    ease: "none",
+  }, 0);
+-->
diff --git a/docs/public/catalog/components/echo-trail/README.md b/docs/public/catalog/components/echo-trail/README.md
new file mode 100644
index 0000000000..ed93bc9ef5
--- /dev/null
+++ b/docs/public/catalog/components/echo-trail/README.md
@@ -0,0 +1,50 @@
+# echo-trail
+
+The generalized onion skin: a moving element renders with N ghosted copies of itself, each ghost showing the element where it was at t minus i \* delta, opacity stepped down per ghost. One traversal along an authored path; as the element decelerates into rest the echoes collapse into it and vanish, leaving a clean settled hold.
+
+3.5s authored, elastic HOLD, exit `none` by default.
+
+## Variables
+
+| id       | type   | default | notes                                                                                                                      |
+| -------- | ------ | ------- | -------------------------------------------------------------------------------------------------------------------------- |
+| `echoes` | number | `4`     | Ghost copy count, clamped 2 to 6.                                                                                          |
+| `delta`  | number | `0.09`  | Lag between successive ghosts in seconds, clamped 0.03 to 0.3.                                                             |
+| `path`   | enum   | `sweep` | `sweep` is a shallow S left to right; `rise` climbs bottom-center to upper-center; `arc` rises over the top left to right. |
+| `accent` | enum   | `green` | Subject accent color: green rides `--brand`, blue rides `--accent`, violet rides `--accent-2`.                             |
+| `exit`   | enum   | `none`  | `none` holds until the cut; `fade` departs opacity-only; `up` rises out.                                                   |
+
+## Subject slot
+
+The subject is a slot. Place an inert template anywhere in the HOST page (templates never render, and the runtime wipes the host clip's own children on mount, so the slot lives at document level):
+
+```html
+<template data-slot="echo-trail-subject">
+  <div class="my-badge">Shipped</div>
+</template>
+```
+
+Ghosts are deep clones of the subject content. With no slot, the primitive renders a token card (surface, hairline border, accent dot, two skeleton lines, contract tokens only).
+
+## Mount
+
+```html
+<div
+  class="clip"
+  data-composition-id="echo-trail"
+  data-composition-src="./echo-trail.html"
+  data-variable-values='{"path":"arc","echoes":5,"delta":0.12,"accent":"violet"}'
+  data-start="0"
+  data-duration="3.5"
+  data-track-index="0"
+></div>
+```
+
+Elastic root: no `data-width`/`data-height`; it fills whatever box the host clip gives it. Timeline registers under the literal `echo-trail` key.
+
+## Notes
+
+- Deterministic: ghost i's position at time t is `path(ease(clamp01((t - i * delta) / travel)))` and its opacity is its stepped base times a separation ramp (distance to the lead); both are recomputed from `tl.time()` on every update. No Math.random, no wall clock, no incremental state; eventful seeks (`suppressEvents=false`, the engine's render path) land identical frames in any order and either direction.
+- The separation ramp is what makes the echoes collapse: before motion starts and after the lead rests, every ghost is coincident with the lead and its opacity is exactly zero, so the HOLD is truly still.
+- Ghosts render beneath the lead (inserted before it) with a slight per-ghost scale step for depth; transforms are set once at mount, per-update writes touch only left/top/opacity.
+- The envelope accounts for the tail: `IN = travel + echoes * delta + settle`, so the last ghost has converged inside IN even at the largest lag.
diff --git a/docs/public/catalog/components/echo-trail/demo.html b/docs/public/catalog/components/echo-trail/demo.html
new file mode 100644
index 0000000000..f4b7fde782
--- /dev/null
+++ b/docs/public/catalog/components/echo-trail/demo.html
@@ -0,0 +1,102 @@
+<!doctype html>
+<!--
+  echo-trail demo. FULL-BLEED light mount: the primitive fills the whole
+  1920x1080 frame on a light token block. Non-default path, echoes, delta,
+  and accent values prove the variable path.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Echo Trail Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #eef0f3);
+      }
+
+      #root {
+        --bg: #eef0f3;
+        --fg: #14161b;
+        --muted: #5b6472;
+        --surface: #ffffff;
+        --border: #d3d8e0;
+        --brand: #3f3f46;
+        --accent: #3f3f46;
+        --accent-2: #3f3f46;
+        --radius: 18px;
+        --font-display: "Inter", system-ui, sans-serif;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 42%, #f7f8fa 0%, var(--bg, #eef0f3) 72%);
+      }
+
+      .mount-bleed {
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        container-type: size;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="echo-trail-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="3.5"
+      data-fps="30"
+    >
+      <div
+        id="echo-trail-mount"
+        class="mount-bleed clip"
+        data-composition-id="echo-trail"
+        data-composition-src="./echo-trail.html"
+        data-variable-values='{"path":"arc","echoes":5,"delta":0.12,"accent":"violet"}'
+        data-start="0"
+        data-duration="3.5"
+        data-track-index="0"
+        data-width="1920"
+        data-height="1080"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["echo-trail-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "echo-trail.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/echo-trail/echo-trail.html b/docs/public/catalog/components/echo-trail/echo-trail.html
new file mode 100644
index 0000000000..50d057ff9e
--- /dev/null
+++ b/docs/public/catalog/components/echo-trail/echo-trail.html
@@ -0,0 +1,353 @@
+<!doctype html>
+<!--
+  echo-trail: HyperFrames video primitive (trails)
+
+  The generalized onion skin: a moving element renders with N ghosted
+  copies of itself, each ghost showing the element where it was at
+  t minus i * delta, opacity stepped down per ghost. One traversal along
+  an authored path; as the element decelerates into rest the echoes
+  collapse into it and vanish, leaving a clean settled hold.
+
+  The subject is a SLOT. Callers supply content by placing an inert
+  template anywhere in the HOST page (templates never render, and the
+  runtime wipes the host clip's own children on mount, so the slot lives
+  at document level):
+
+    <template data-slot="echo-trail-subject"> ... </template>
+
+  Ghosts are deep clones of the subject content. With no slot, the
+  primitive renders a token card (surface, hairline border, accent dot,
+  two skeleton lines, contract tokens only).
+
+  Variables (declared in data-composition-variables below):
+    - echoes (number 2 to 6, default 4): ghost copy count.
+    - delta (number seconds, default 0.09, clamped 0.03 to 0.3): the lag
+      between successive ghosts.
+    - path ("sweep" | "rise" | "arc", default "sweep"): the authored
+      traversal preset.
+    - accent ("green" | "blue" | "violet", default "green"): green rides
+      --brand, blue rides --accent, violet rides --accent-2.
+    - exit ("none" | "fade" | "up", default "none"): frame roots own
+      transitions; the default holds the final frame to the last pixel.
+
+  Envelope, fixed IN and OUT with elastic HOLD only (never timeScale):
+    IN_BASE  = TRAVEL (2.1s) + echoes * delta + 0.2s settle; the lead
+               rests at TRAVEL and the last ghost has converged (and is
+               exactly invisible) by IN
+    HOLD     = max(0, D - IN - OUT)
+    OUT_BASE = 0.45s  only when exit != none
+    If D < IN_BASE + OUT_BASE, the whole envelope compresses together.
+
+  Determinism: ghost i's position at time t is path(ease(clamp01((t -
+  i * delta) / TRAVEL))) and its opacity is its stepped base times a pure
+  function of its distance to the lead; both are recomputed from
+  tl.time() on every update. No Math.random, no wall clock, no
+  incremental state, no requestAnimationFrame. Eventful seeks
+  (suppressEvents=false, the engine's render path) land identical frames
+  in any order and either direction; at rest every ghost is coincident
+  with the lead at opacity exactly zero, so the HOLD is truly still.
+
+  Mount contract: the runtime clones only this template. #root fills the
+  host box (no data-width/data-height, container-type: size, cqmin
+  units), is styled via #root only, and registers one paused timeline
+  under the LITERAL "echo-trail" key.
+-->
+<html
+  lang="en"
+  data-composition-id="echo-trail"
+  data-composition-duration="3.5"
+  data-composition-variables='[
+    { "id": "echoes", "type": "number", "role": "style", "label": "Echoes", "description": "Ghost copy count, clamped 2 to 6.", "default": 4 },
+    { "id": "delta", "type": "number", "role": "timing", "label": "Delta", "description": "Lag between successive ghosts in seconds, clamped 0.03 to 0.3.", "default": 0.09 },
+    { "id": "path", "type": "enum", "role": "timing", "label": "Path", "description": "Authored traversal preset.", "default": "sweep", "options": [{ "value": "sweep", "label": "Sweep" }, { "value": "rise", "label": "Rise" }, { "value": "arc", "label": "Arc" }] },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Subject accent color: green rides --brand, blue rides --accent, violet rides --accent-2.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the settled element holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Echo Trail</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="echo-trail" data-duration="3.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, "Inter", system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .et-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .et-stage {
+            position: absolute;
+            inset: 0;
+            will-change: transform, opacity;
+          }
+
+          .et-ghost,
+          .et-lead {
+            position: absolute;
+            left: 0;
+            top: 0;
+            will-change: opacity;
+          }
+
+          .et-ghost {
+            opacity: 0;
+          }
+
+          .et-lead {
+            opacity: 0;
+          }
+
+          .et-card {
+            width: 30cqmin;
+            padding: var(--space-3, 3cqmin);
+            display: grid;
+            gap: var(--space-2, 2cqmin);
+            border: 0.18cqmin solid var(--border, #475569);
+            border-radius: var(--radius, 2.4cqmin);
+            background: var(--surface, #14171c);
+            box-shadow: 0 1.6cqmin 5cqmin color-mix(in srgb, var(--bg, #000000) 30%, transparent);
+          }
+
+          .et-card-dot {
+            width: 3.2cqmin;
+            height: 3.2cqmin;
+            border-radius: 50%;
+            background: var(--et-accent);
+          }
+
+          .et-card-line {
+            height: 1.6cqmin;
+            border-radius: 0.8cqmin;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 16%, transparent);
+          }
+
+          .et-card-line.short {
+            width: 62%;
+          }
+        </style>
+
+        <div
+          id="echo-trail-clip"
+          class="et-clip clip"
+          data-start="0"
+          data-duration="3.5"
+          data-track-index="0"
+        >
+          <div class="et-stage">
+            <div class="et-lead">
+              <div class="et-card">
+                <div class="et-card-dot"></div>
+                <div class="et-card-line"></div>
+                <div class="et-card-line short"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".et-stage");
+            var lead = root.querySelector(".et-lead");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var echoesRaw = parseFloat(vars.echoes);
+            var echoes = isFinite(echoesRaw) ? Math.min(6, Math.max(2, Math.round(echoesRaw))) : 4;
+            var deltaRaw = parseFloat(vars.delta);
+            var deltaVar = isFinite(deltaRaw) ? Math.min(0.3, Math.max(0.03, deltaRaw)) : 0.09;
+            var pathName = vars.path === "rise" || vars.path === "arc" ? vars.path : "sweep";
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #52525b)",
+              blue: "var(--accent, #52525b)",
+              violet: "var(--accent-2, #52525b)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            root.style.setProperty("--et-accent", accentColors[accent]);
+
+            // SLOT. Caller templates live at HOST DOCUMENT level (the mount
+            // wipes host-clip children, and templates never render).
+            var hostDoc = root.ownerDocument;
+            var slotTemplate = null;
+            try {
+              slotTemplate = hostDoc.querySelector('template[data-slot="echo-trail-subject"]');
+            } catch (error) {
+              slotTemplate = null;
+            }
+            if (slotTemplate) {
+              lead.querySelector(".et-card").remove();
+              lead.appendChild(hostDoc.importNode(slotTemplate.content, true));
+            }
+
+            // Ghosts: deep clones of the subject, inserted BEFORE the lead
+            // so the lead always renders on top. ghosts[0] is the nearest
+            // past copy (highest stepped opacity).
+            var ghosts = [];
+            for (var g = 0; g < echoes; g += 1) {
+              var ghost = hostDoc.createElement("div");
+              ghost.className = "et-ghost";
+              ghost.setAttribute("aria-hidden", "true");
+              for (var c = 0; c < lead.children.length; c += 1) {
+                ghost.appendChild(lead.children[c].cloneNode(true));
+              }
+              stage.insertBefore(ghost, lead);
+              ghosts.push(ghost);
+            }
+
+            // Envelope: fixed IN/OUT, elastic HOLD, never time-scaled.
+            var TRAVEL_BASE = 2.1;
+            var IN_BASE = TRAVEL_BASE + echoes * deltaVar + 0.2;
+            var OUT_BASE = exit === "none" ? 0 : 0.45;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "3.5"));
+            var totalBase = Math.max(0.001, IN_BASE + OUT_BASE);
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var TRAVEL = TRAVEL_BASE * scale;
+            var delta = deltaVar * scale;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var OUT_START = IN + HOLD;
+
+            // Path presets in percent-of-stage coordinates; the subject is
+            // centered on the point via a one-time -50%/-50% translate.
+            function pathPoint(u) {
+              if (pathName === "rise") {
+                return { x: 50 + 6 * Math.sin(Math.PI * u), y: 76 - 44 * u };
+              }
+              if (pathName === "arc") {
+                return { x: 16 + 68 * u, y: 64 - 34 * Math.sin(Math.PI * u) };
+              }
+              // sweep: a shallow S from left to right through center.
+              return { x: 18 + 64 * u, y: 50 + 10 * Math.cos(Math.PI * u) };
+            }
+
+            function easeInOut(t) {
+              return t < 0.5 ? 2 * t * t : 1 - 2 * (1 - t) * (1 - t);
+            }
+            function clamp01(v) {
+              return v < 0 ? 0 : v > 1 ? 1 : v;
+            }
+
+            function posAt(timeSeconds) {
+              var u = easeInOut(clamp01(TRAVEL > 0 ? timeSeconds / TRAVEL : 1));
+              return pathPoint(u);
+            }
+
+            // One-time static transforms: center anchor plus a slight
+            // per-ghost scale step for depth. GSAP owns the transform, the
+            // per-update writes touch only left/top/opacity.
+            gsap.set(lead, { xPercent: -50, yPercent: -50 });
+            for (var i = 0; i < ghosts.length; i += 1) {
+              gsap.set(ghosts[i], {
+                xPercent: -50,
+                yPercent: -50,
+                scale: 1 - 0.015 * (i + 1),
+              });
+            }
+
+            // Stepped ghost bases: nearest past copy strongest.
+            var bases = [];
+            for (var b = 0; b < echoes; b += 1) {
+              bases.push(0.55 * (1 - b / echoes));
+            }
+
+            // Pure per-update apply: every position and every ghost alpha
+            // is a function of tl.time() alone. Ghost alpha is its stepped
+            // base times a separation ramp, so echoes are invisible before
+            // motion starts and collapse to exactly zero at rest. Writes
+            // are idempotent, so the HOLD repaints identically.
+            function applyTime(timeSeconds) {
+              var leadPos = posAt(timeSeconds);
+              gsap.set(lead, {
+                left: leadPos.x.toFixed(4) + "%",
+                top: leadPos.y.toFixed(4) + "%",
+              });
+              for (var n = 0; n < ghosts.length; n += 1) {
+                var p = posAt(timeSeconds - (n + 1) * delta);
+                var dist = Math.hypot(p.x - leadPos.x, p.y - leadPos.y);
+                var alpha = bases[n] * clamp01(dist / 2.2);
+                gsap.set(ghosts[n], {
+                  left: p.x.toFixed(4) + "%",
+                  top: p.y.toFixed(4) + "%",
+                  opacity: alpha < 0.002 ? 0 : alpha,
+                });
+              }
+            }
+
+            gsap.set(stage, { opacity: 1, y: "0cqh" });
+
+            var tl = gsap.timeline({
+              paused: true,
+              onUpdate: function () {
+                applyTime(tl.time());
+              },
+            });
+
+            // Anchor tween: an inert plain-object tween spanning the full
+            // authored duration so the timeline covers [0, D], onUpdate
+            // fires for every eventful seek, and holds never clamp short.
+            tl.to({ p: 0 }, { p: 1, duration: duration, ease: "none" }, 0);
+
+            // Lead entrance: both endpoints authored. Ghosts need no
+            // entrance; the separation ramp keeps them at zero until the
+            // traversal opens a gap.
+            tl.fromTo(
+              lead,
+              { opacity: 0 },
+              { opacity: 1, duration: 0.22 * scale, ease: "power2.out" },
+              0,
+            );
+
+            // HOLD: truly still. The lead rests at path(1) and every ghost
+            // is coincident at opacity exactly zero.
+
+            // OUT: optional departure; exit none holds until the frame cuts.
+            if (exit === "up") {
+              tl.to(stage, { y: "-4cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "fade") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            }
+
+            tl.seek(0);
+            applyTime(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["echo-trail"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/ecosystem-constellation/demo.html b/docs/public/catalog/components/ecosystem-constellation/demo.html
new file mode 100644
index 0000000000..ade485681b
--- /dev/null
+++ b/docs/public/catalog/components/ecosystem-constellation/demo.html
@@ -0,0 +1,191 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Ecosystem Constellation - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+        /* ponytail: scale wrapper (not a GSAP target) to fill ~65% of 1920x1080 */
+        transform: scale(2.1);
+        transform-origin: center center;
+      }
+      .hf-remocn-ecosystem-constellation {
+        --hf-accent: #2563eb;
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-ecosystem-constellation {
+        width: 820px;
+        min-height: 460px;
+        border-radius: 34px;
+        padding: 28px;
+        background: linear-gradient(135deg, #f8fafc, #e0f2fe);
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);
+        display: grid;
+        grid-template-columns: 280px 1fr;
+        gap: 22px;
+        overflow: hidden;
+      }
+      .hf-remocn-ecosystem-constellation .panel {
+        border: 1px solid rgba(15, 23, 42, 0.08);
+        border-radius: 24px;
+        background: rgba(255, 255, 255, 0.76);
+        padding: 22px;
+        backdrop-filter: blur(12px);
+      }
+      .hf-remocn-ecosystem-constellation .prompt {
+        display: grid;
+        gap: 12px;
+        align-content: start;
+      }
+      .hf-remocn-ecosystem-constellation .pill {
+        height: 42px;
+        border-radius: 999px;
+        background: #111827;
+        color: #fff;
+        display: flex;
+        align-items: center;
+        padding: 0 18px;
+        font-weight: 800;
+        transform: translateX(var(--hf-pill-x, 0px));
+      }
+      .hf-remocn-ecosystem-constellation .preview {
+        display: grid;
+        gap: 14px;
+      }
+      .hf-remocn-ecosystem-constellation .card {
+        min-height: 78px;
+        border-radius: 18px;
+        background: #fff;
+        box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
+        transform: translate(var(--hf-card-x, 0px), var(--hf-card-y, 0px))
+          scale(var(--hf-card-scale, 1));
+        opacity: var(--hf-card-opacity, 1);
+      }
+      .hf-remocn-ecosystem-constellation h3 {
+        margin: 0 0 14px;
+        font-size: 32px;
+        letter-spacing: -0.04em;
+      }
+      .hf-remocn-ecosystem-constellation p {
+        margin: 0;
+        color: #475569;
+      }
+      /* skeleton content inside preview cards */
+      .hf-remocn-ecosystem-constellation .card {
+        padding: 16px 18px;
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        justify-content: center;
+      }
+      .hf-remocn-ecosystem-constellation .card-row {
+        height: 10px;
+        border-radius: 6px;
+        background: #e4e4e7;
+      }
+      .hf-remocn-ecosystem-constellation .card-row.short {
+        width: 55%;
+      }
+      .hf-remocn-ecosystem-constellation .card-dot {
+        width: 28px;
+        height: 28px;
+        border-radius: 50%;
+        background: #2563eb22;
+        border: 2px solid #2563eb55;
+        margin-bottom: 4px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="ecosystem-constellation-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-ecosystem-constellation">
+          <div class="panel prompt">
+            <h3>Ecosystem Constellation</h3>
+            <p>Orbiting product nodes connect into a constellation graph.</p>
+            <div class="pill">Generate scene</div>
+            <div class="pill">Refine motion</div>
+            <div class="pill">Export</div>
+          </div>
+          <div class="panel preview">
+            <div class="card">
+              <div class="card-dot"></div>
+              <div class="card-row"></div>
+              <div class="card-row short"></div>
+            </div>
+            <div class="card">
+              <div class="card-dot"></div>
+              <div class="card-row"></div>
+              <div class="card-row short"></div>
+            </div>
+            <div class="card">
+              <div class="card-dot"></div>
+              <div class="card-row"></div>
+              <div class="card-row short"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-ecosystem-constellation .pill",
+          { "--hf-pill-x": "-18px", opacity: 0 },
+          { "--hf-pill-x": "0px", opacity: 1, duration: 0.25, stagger: 0.08, ease: "power2.out" },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-ecosystem-constellation .card",
+          { "--hf-card-y": "28px", "--hf-card-scale": 0.96, "--hf-card-opacity": 0 },
+          {
+            "--hf-card-y": "0px",
+            "--hf-card-scale": 1,
+            "--hf-card-opacity": 1,
+            duration: 0.42,
+            stagger: 0.12,
+            ease: "power3.out",
+          },
+          startTime + 0.2,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["ecosystem-constellation-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/ecosystem-constellation/ecosystem-constellation.html b/docs/public/catalog/components/ecosystem-constellation/ecosystem-constellation.html
new file mode 100644
index 0000000000..bf017190cb
--- /dev/null
+++ b/docs/public/catalog/components/ecosystem-constellation/ecosystem-constellation.html
@@ -0,0 +1,94 @@
+<!--
+  Ecosystem Constellation - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-ecosystem-constellation">
+  <div class="panel prompt">
+    <h3>Ecosystem Constellation</h3>
+    <p>Orbiting product nodes connect into a constellation graph.</p>
+    <div class="pill">Generate scene</div>
+    <div class="pill">Refine motion</div>
+    <div class="pill">Export</div>
+  </div>
+  <div class="panel preview">
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+  </div>
+</div>
+
+<style>
+  .hf-remocn-ecosystem-constellation {
+    --hf-accent: #2563eb;
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-ecosystem-constellation {
+    width: 820px;
+    min-height: 460px;
+    border-radius: 34px;
+    padding: 28px;
+    background: linear-gradient(135deg, #f8fafc, #e0f2fe);
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);
+    display: grid;
+    grid-template-columns: 280px 1fr;
+    gap: 22px;
+    overflow: hidden;
+  }
+  .hf-remocn-ecosystem-constellation .panel {
+    border: 1px solid rgba(15, 23, 42, 0.08);
+    border-radius: 24px;
+    background: rgba(255, 255, 255, 0.76);
+    padding: 22px;
+    backdrop-filter: blur(12px);
+  }
+  .hf-remocn-ecosystem-constellation .prompt {
+    display: grid;
+    gap: 12px;
+    align-content: start;
+  }
+  .hf-remocn-ecosystem-constellation .pill {
+    height: 42px;
+    border-radius: 999px;
+    background: #111827;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    padding: 0 18px;
+    font-weight: 800;
+    transform: translateX(var(--hf-pill-x, 0px));
+  }
+  .hf-remocn-ecosystem-constellation .preview {
+    display: grid;
+    gap: 14px;
+  }
+  .hf-remocn-ecosystem-constellation .card {
+    min-height: 78px;
+    border-radius: 18px;
+    background: #fff;
+    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
+    transform: translate(var(--hf-card-x, 0px), var(--hf-card-y, 0px))
+      scale(var(--hf-card-scale, 1));
+    opacity: var(--hf-card-opacity, 1);
+  }
+  .hf-remocn-ecosystem-constellation h3 {
+    margin: 0 0 14px;
+    font-size: 32px;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-ecosystem-constellation p {
+    margin: 0;
+    color: #475569;
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-ecosystem-constellation .pill', { '--hf-pill-x': '-18px', opacity: 0 }, { '--hf-pill-x': '0px', opacity: 1, duration: 0.25, stagger: 0.08, ease: 'power2.out' }, startTime); tl.fromTo('.hf-remocn-ecosystem-constellation .card', { '--hf-card-y': '28px', '--hf-card-scale': 0.96, '--hf-card-opacity': 0 }, { '--hf-card-y': '0px', '--hf-card-scale': 1, '--hf-card-opacity': 1, duration: 0.42, stagger: 0.12, ease: 'power3.out' }, startTime + 0.2);
+-->
diff --git a/docs/public/catalog/components/facet-morph/README.md b/docs/public/catalog/components/facet-morph/README.md
new file mode 100644
index 0000000000..39dcaa2354
--- /dev/null
+++ b/docs/public/catalog/components/facet-morph/README.md
@@ -0,0 +1,75 @@
+# facet-morph
+
+A faceted low-poly mass (36 triangles, one SVG) continuously reshapes between
+three authored silhouettes (blob, mark, badge) with per-facet flat shading
+that recomputes as the vertices move. Light reads from the upper left: facets
+turned toward it lift toward a pale accent-tinted tone, facets turned away
+fall toward near-black. One calm continuous morph in the quiet register, then
+a settled hold (or a slow breath when `hold_last` is false).
+
+Reference: the ordinaryfolk reshaping-mass beat (motion-reference
+`ordinaryfolkco/2001090228958752945`, sheet 02).
+
+## Files
+
+- `facet-morph.html`: the mountable sub-composition (install target:
+  `compositions/components/facet-morph.html`).
+- `registry-item.json`: registry metadata and the variables block.
+- `demo.html`: a full-bleed 1920x1080 LIGHT host that mounts the primitive
+  with non-default variables (QA gallery input).
+
+## Variables
+
+| id          | type    | default           | notes                                                                     |
+| ----------- | ------- | ----------------- | ------------------------------------------------------------------------- |
+| `forms`     | string  | `blob,mark,badge` | comma-separated silhouette sequence; valid names blob, mark, badge        |
+| `hold_last` | boolean | `true`            | true settles dead still on the final form; false breathes through hold    |
+| `accent`    | enum    | `green`           | `green` maps to `--brand`, `blue` to `--accent`, `violet` to `--accent-2` |
+| `exit`      | enum    | `none`            | `none` holds the settled mass; `fade` and `up` release the stage          |
+
+Envelope: IN = 0.55s entrance + one 1.45s morph leg per silhouette step
+(0.35s dwell between legs) + 0.55s wobble decay; OUT = 0.45s only when `exit`
+is `fade` or `up`; HOLD is the sole elastic phase. The `form-lock` sync point
+(`hf:sfx` id `facet-settle-soft`) fires when the mass reaches its final
+silhouette, 3.95s at the 3-form default.
+
+## How it works (and how to restyle it)
+
+- Vertex positions are authored keyframe tables (per-silhouette radius,
+  jitter, and center rows over fixed angular spokes), interpolated as a pure
+  function of timeline time by one linear driver tween. Forward, backward,
+  and shuffled seeks land identical frames.
+- Facet fills are computed in JS on every update and written as `fill` /
+  `stroke` ATTRIBUTES with literal `rgb()` strings. Contract tokens
+  (`--fg`, `--surface`, and the accent token) are resolved to concrete rgb
+  once at mount, so a host theme restyles the mass without any var() color
+  ever reaching a tween.
+- The mass tone is fg-heavy (`--fg` mixed toward `--surface`), so it reads
+  dark on light hosts and light on dark hosts, always contrasting `--bg`.
+- To add a silhouette, add one row to the `FORMS` table in your installed
+  copy (18 outer radii, 18 outer jitters, 9 inner radii, 9 inner jitters,
+  center, rotation) and name it in `forms`.
+
+## Worked example
+
+```bash
+npx hyperframes add facet-morph
+```
+
+Mount it from a host composition like any sub-composition:
+
+```html
+<div
+  class="clip"
+  data-composition-id="facet-morph"
+  data-composition-src="./components/facet-morph.html"
+  data-variable-values='{"forms":"badge,blob,mark","hold_last":false,"accent":"violet"}'
+  data-start="0"
+  data-duration="5"
+  data-track-index="0"
+></div>
+```
+
+The mass enters over 0.55s, reshapes badge to blob to mark, and keeps a slow
+breath between the last two silhouettes until the frame cuts (`exit`
+defaults to `none`; frame roots own scene transitions).
diff --git a/docs/public/catalog/components/facet-morph/demo.html b/docs/public/catalog/components/facet-morph/demo.html
new file mode 100644
index 0000000000..305c35b0c0
--- /dev/null
+++ b/docs/public/catalog/components/facet-morph/demo.html
@@ -0,0 +1,106 @@
+<!doctype html>
+<!--
+  facet-morph demo. FULL-BLEED mount on a LIGHT token stage: the faceted
+  mass reshapes badge to blob to mark with the violet accent and hold_last
+  false, proving the forms sequence, the breathing hold, and flat shading
+  that reads on a light background (the reference's own register).
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>facet-morph Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #eef0f3);
+      }
+
+      #root {
+        --bg: #eef0f3;
+        --fg: #14171c;
+        --muted: #626873;
+        --surface: #fbfcfd;
+        --border: #d3d8df;
+        --brand: #16a34a;
+        --accent: #0284c7;
+        --accent-2: #7c5cff;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-body: Inter, system-ui, sans-serif;
+        --radius: 22px;
+        --space-1: 8px;
+        --space-2: 16px;
+        --space-3: 32px;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: linear-gradient(128deg, #f4f5f7 0%, var(--bg, #eef0f3) 48%, #e2e5ea 100%);
+      }
+
+      .mount-stage {
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        container-type: size;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="facet-morph-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+      data-fps="30"
+    >
+      <div
+        id="facet-morph-mount"
+        class="mount-stage clip"
+        data-composition-id="facet-morph"
+        data-composition-src="./facet-morph.html"
+        data-variable-values='{"forms":"badge,blob,mark","hold_last":false,"accent":"violet"}'
+        data-start="0"
+        data-duration="5"
+        data-track-index="0"
+        data-width="1920"
+        data-height="1080"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["facet-morph-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "facet-morph.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/facet-morph/facet-morph.html b/docs/public/catalog/components/facet-morph/facet-morph.html
new file mode 100644
index 0000000000..c3ce8d60e9
--- /dev/null
+++ b/docs/public/catalog/components/facet-morph/facet-morph.html
@@ -0,0 +1,551 @@
+<!doctype html>
+<!--
+  facet-morph: HyperFrames video primitive (intros and reveals / morph)
+
+  Concept: a faceted low-poly mass (36 triangles, one SVG) continuously
+  reshapes between three authored silhouettes (blob, mark, badge) with
+  per-facet flat shading that recomputes as the vertices move. Light reads
+  from the upper left: facets turned toward it lift toward a pale accent-
+  tinted tone, facets turned away fall toward near-black. The register is
+  the ordinaryfolk reshaping-mass beat: one calm continuous morph, no pops.
+
+  Wave L, unit L2. Reference: motion-reference/ordinaryfolkco
+  2001090228958752945 sheet-02 (the continuously reshaping faceted mass).
+
+  Determinism: vertex positions are authored keyframe tables (per-silhouette
+  radius, jitter, and center rows) interpolated as a PURE FUNCTION of
+  timeline time. One linear driver tween owns the whole life of the mass;
+  its onUpdate recomputes every vertex and every facet fill from t alone,
+  so forward, backward, and shuffled seeks land byte-identical frames.
+  The wobble that keeps the mass alive is built from fixed-phase sine
+  terms (phases from a fixed-seed LCG, baked once at mount).
+
+  Paint law: facet geometry AND facet color are written as ATTRIBUTES
+  (points / fill / stroke) on every update. Nothing tweens a var() color
+  string and nothing relies on CSS repaint of SVG presentation properties
+  under seeks. Contract tokens are resolved to concrete rgb once at mount
+  (via a probe element), then mixed numerically in JS.
+
+  Variables (declared in data-composition-variables below):
+    - forms (string, default "blob,mark,badge"): comma-separated silhouette
+      sequence. Valid names: blob, mark, badge. Unknown names are dropped;
+      an empty result falls back to the default sequence.
+    - hold_last (boolean, default true): true decays the wobble and holds
+      the final silhouette dead still; false keeps the mass slowly
+      breathing between the last two silhouettes through the hold.
+    - accent (green | blue | violet, default green): tint of the lit
+      facets. green maps to --brand, blue to --accent, violet to --accent-2.
+    - exit (none | fade | up, default none): outgoing transition. none
+      holds the settled mass (frame roots own transitions).
+
+  Envelope (fixed IN/OUT, elastic HOLD only, never gsap.timeScale()):
+    IN       = 0.55s entrance + one 1.45s morph leg per silhouette step
+               (0.35s dwell between legs) + 0.55s wobble decay
+    HOLD     = elastic = max(0, D - (IN + OUT))
+    OUT      = 0.45s when exit is fade or up, 0 when exit is none
+    If D < IN + OUT, IN and OUT scale down together so IN + OUT == D.
+
+  Sync point: form-lock when the mass reaches its final silhouette
+  (3.95s at the 3-form default). Dispatches a bubbling hf:sfx CustomEvent
+  with id "facet-settle-soft" there. This primitive never plays audio.
+
+  Mount contract: MOUNTABLE SUB-COMPOSITION. The runtime clones only
+  <template> contents; #root fills the host box (inset:0, container-type:
+  size), has no data-width/data-height, and registers one paused timeline
+  under the literal "facet-morph" key. Variables come from
+  window.__hyperframes.getVariables().
+-->
+<html
+  lang="en"
+  data-composition-id="facet-morph"
+  data-composition-duration="5"
+  data-composition-variables='[
+    { "id": "forms", "type": "string", "role": "content", "label": "Forms", "description": "Comma-separated silhouette sequence from blob, mark, badge.", "default": "blob,mark,badge" },
+    { "id": "hold_last", "type": "boolean", "role": "timing", "label": "Hold last", "description": "True settles dead still on the final silhouette; false keeps the mass slowly breathing through the hold.", "default": true },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Tint of the lit facets.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Outgoing transition. None holds the settled mass.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Facet Morph</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="facet-morph" data-duration="5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            background: var(--bg, #0b0c0e);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+          }
+
+          .fm-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+          }
+
+          /* A very soft stage vignette keeps the mass grounded on flat
+             token backgrounds without inventing a light band (that is
+             light-sweep-pass territory). */
+          .fm-clip::before {
+            content: "";
+            position: absolute;
+            inset: 0;
+            background: radial-gradient(
+              ellipse at 42% 38%,
+              color-mix(in srgb, var(--fg, #f8fafc) 4%, transparent) 0%,
+              transparent 68%
+            );
+          }
+
+          .fm-stage {
+            display: grid;
+            place-items: center;
+            width: 100%;
+            height: 100%;
+            will-change: transform, opacity;
+          }
+
+          .fm-svg {
+            width: 74cqmin;
+            height: 74cqmin;
+            overflow: visible;
+          }
+
+          .fm-svg polygon {
+            stroke-width: 0.22;
+            stroke-linejoin: round;
+          }
+        </style>
+
+        <div
+          id="facet-morph-clip"
+          class="fm-clip clip"
+          data-start="0"
+          data-duration="5"
+          data-track-index="0"
+        >
+          <div class="fm-stage">
+            <svg
+              class="fm-svg"
+              viewBox="0 0 100 100"
+              role="img"
+              aria-label="Reshaping faceted mass"
+            >
+              <g class="fm-mesh"></g>
+            </svg>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var SVG_NS = "http://www.w3.org/2000/svg";
+            var root = document.getElementById("root");
+            // Literal id: mount flattening strips data-composition-id from the
+            // live root before this timeline registers.
+            var compositionId = "facet-morph";
+            var stage = root.querySelector(".fm-stage");
+            var mesh = root.querySelector(".fm-mesh");
+
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            /* ---------------- variables ---------------- */
+
+            var accentTokens = {
+              green: "var(--brand, #22c55e)",
+              blue: "var(--accent, #38bdf8)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentTokens, vars.accent)
+              ? vars.accent
+              : "green";
+            // The bundler mirrors composition variables as scoped CSS custom
+            // props, so this unit's own accent variable can shadow the contract
+            // --accent token ("blue" is a valid CSS color). When the shadow is
+            // present, fall back to the literal contract value.
+            var shadowedAccent = getComputedStyle(root).getPropertyValue("--accent").trim();
+            if (
+              shadowedAccent === "green" ||
+              shadowedAccent === "blue" ||
+              shadowedAccent === "violet"
+            ) {
+              accentTokens.blue = "#38bdf8";
+            }
+
+            var holdLast = !(vars.hold_last === false || vars.hold_last === "false");
+            // INVARIANT: only none | fade | up reaches the timeline.
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            /* ---------------- authored keyframe tables ----------------
+               Each silhouette is one row set: 18 outer radii, 18 outer
+               angular jitters (deg), 9 inner radii, 9 inner jitters (deg),
+               a center, and a whole-mass rotation (deg). Angles are fixed
+               spokes (outer every 20deg, inner every 40deg offset 20deg,
+               both starting at 12 o'clock), so any two rows interpolate
+               vertex-for-vertex. */
+
+            var FORMS = {
+              // Irregular craggy rock, the reference's opening mass.
+              blob: {
+                outerR: [34, 39, 31, 36, 41, 33, 29, 37, 40, 32, 35, 30, 38, 34, 28, 36, 39, 33],
+                outerJ: [3, -5, 6, -2, 4, -6, 2, 5, -4, 3, -3, 6, -5, 2, 4, -2, -6, 5],
+                innerR: [16, 19, 14, 20, 17, 13, 18, 15, 19],
+                innerJ: [8, -10, 12, -6, 9, -12, 7, 11, -8],
+                cx: 50,
+                cy: 51,
+                rot: 0,
+              },
+              // A peaked asymmetric shard, the reference's closing frames.
+              mark: {
+                outerR: [48, 40, 28, 22, 19, 17, 16, 17, 19, 21, 23, 22, 19, 17, 19, 25, 34, 44],
+                outerJ: [-2, 6, -8, 4, -3, 5, -6, 2, 4, -5, 3, -4, 6, -2, 5, -7, 3, -4],
+                innerR: [20, 13, 10, 8, 9, 8, 10, 11, 15],
+                innerJ: [-6, 9, -11, 7, -8, 10, -7, 6, -9],
+                cx: 50,
+                cy: 56,
+                rot: -7,
+              },
+              // A wide-shouldered shield settling toward a point.
+              badge: {
+                outerR: [36, 37, 35, 34, 33, 30, 27, 25, 24, 33, 24, 25, 27, 30, 33, 34, 35, 37],
+                outerJ: [0, 2, -2, 1, -1, 2, -2, 1, 3, 0, -3, -1, 2, -2, 1, -1, 2, -2],
+                innerR: [18, 17, 16, 13, 12, 12, 13, 16, 17],
+                innerJ: [4, -5, 6, -4, 5, -6, 4, -5, 6],
+                cx: 50,
+                cy: 49,
+                rot: 5,
+              },
+            };
+
+            var requested = String(vars.forms == null ? "" : vars.forms)
+              .split(",")
+              .map(function (name) {
+                return name.trim().toLowerCase();
+              })
+              .filter(function (name) {
+                return Object.prototype.hasOwnProperty.call(FORMS, name);
+              });
+            var formNames = requested.length > 0 ? requested : ["blob", "mark", "badge"];
+            var formRows = formNames.map(function (name) {
+              return FORMS[name];
+            });
+
+            /* ---------------- fixed-seed facet tables ----------------
+               Wobble phases and per-facet tilts come from one LCG baked at
+               mount. Same seed, same mesh, every mount. */
+
+            var OUTER = 18;
+            var INNER = 9;
+            var lcgState = 0x0f4c37ed;
+            function lcg() {
+              lcgState = (Math.imul(1664525, lcgState) + 1013904223) >>> 0;
+              return lcgState / 4294967296;
+            }
+            var outerPhase = [];
+            for (var i = 0; i < OUTER; i += 1) outerPhase.push(lcg());
+            var innerPhase = [];
+            for (var j = 0; j < INNER; j += 1) innerPhase.push(lcg());
+
+            /* Triangulation: for each inner vertex j, spokes a=2j, b=2j+1,
+               c=2j+2 close the outer ring band (27 triangles), then the
+               inner ring fans to the center (9 triangles). 36 facets. */
+            var facets = [];
+            for (var k = 0; k < INNER; k += 1) {
+              var a = 2 * k;
+              var b = 2 * k + 1;
+              var c = (2 * k + 2) % OUTER;
+              facets.push(["o", a, "o", b, "i", k]);
+              facets.push(["o", b, "o", c, "i", k]);
+              facets.push(["o", c, "i", k, "i", (k + 1) % INNER]);
+            }
+            for (var f = 0; f < INNER; f += 1) {
+              facets.push(["i", f, "i", (f + 1) % INNER, "c", 0]);
+            }
+            var facetTilt = facets.map(function () {
+              return (lcg() - 0.5) * 0.62;
+            });
+
+            var polygons = facets.map(function () {
+              var polygon = document.createElementNS(SVG_NS, "polygon");
+              mesh.appendChild(polygon);
+              return polygon;
+            });
+
+            /* ---------------- token color resolution ----------------
+               Resolve contract tokens to concrete rgb once at mount via a
+               probe element, then mix numerically. Facet fills are literal
+               rgb() attribute strings; no var() ever reaches a tween. */
+
+            var probe = document.createElement("span");
+            probe.style.display = "none";
+            root.appendChild(probe);
+            function resolveColor(cssColor, fallback) {
+              probe.style.color = fallback;
+              probe.style.color = cssColor;
+              var raw = getComputedStyle(probe).color;
+              var match = raw.match(/rgba?\(([^)]+)\)/);
+              if (!match) return [128, 128, 128];
+              var parts = match[1].split(/[,\s/]+/).map(Number);
+              return [parts[0] || 0, parts[1] || 0, parts[2] || 0];
+            }
+            var fgRgb = resolveColor("var(--fg, #f8fafc)", "#f8fafc");
+            var surfaceRgb = resolveColor("var(--surface, #14171c)", "#14171c");
+            var accentRgb = resolveColor(accentTokens[accent], "#22c55e");
+            probe.remove();
+
+            function mix(colorA, colorB, amount) {
+              var w = Math.max(0, Math.min(1, amount));
+              return [
+                colorA[0] + (colorB[0] - colorA[0]) * w,
+                colorA[1] + (colorB[1] - colorA[1]) * w,
+                colorA[2] + (colorB[2] - colorA[2]) * w,
+              ];
+            }
+            function rgbString(color) {
+              return (
+                "rgb(" +
+                Math.round(color[0]) +
+                "," +
+                Math.round(color[1]) +
+                "," +
+                Math.round(color[2]) +
+                ")"
+              );
+            }
+
+            // Base mass tone contrasts the background on light and dark
+            // hosts alike (fg-heavy). Lit facets climb toward a pale
+            // accent-tinted white; shadow facets fall toward black.
+            var baseRgb = mix(fgRgb, surfaceRgb, 0.24);
+            var litTarget = mix([255, 255, 255], accentRgb, 0.2);
+            var darkTarget = [8, 9, 11];
+
+            /* ---------------- envelope ---------------- */
+
+            var ENTER_BASE = 0.55;
+            var LEG_BASE = 1.45;
+            var DWELL_BASE = 0.35;
+            var DECAY_BASE = 0.55;
+            var steps = Math.max(0, formRows.length - 1);
+            var MORPH_BASE = steps > 0 ? steps * LEG_BASE + (steps - 1) * DWELL_BASE : 0;
+            var IN_BASE = ENTER_BASE + MORPH_BASE + DECAY_BASE;
+            var OUT_BASE = exit === "none" ? 0 : 0.45;
+
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "5"));
+            var totalBase = IN_BASE + OUT_BASE;
+            var envScale = duration < totalBase ? duration / totalBase : 1;
+            var ENTER = ENTER_BASE * envScale;
+            var LEG = LEG_BASE * envScale;
+            var DWELL = DWELL_BASE * envScale;
+            var DECAY = DECAY_BASE * envScale;
+            var IN = IN_BASE * envScale;
+            var OUT = OUT_BASE * envScale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var OUT_START = IN + HOLD;
+            var MORPH_START = ENTER * 0.55;
+            var MORPH_END = MORPH_START + (MORPH_BASE > 0 ? MORPH_BASE * envScale : 0);
+            var DECAY_END = MORPH_END + DECAY;
+
+            /* ---------------- pure functions of time ---------------- */
+
+            function smooth(s) {
+              // sine in-out, the quiet register's ease.
+              return 0.5 - 0.5 * Math.cos(Math.PI * Math.max(0, Math.min(1, s)));
+            }
+
+            // Form progress p(t): one leg per silhouette step with a dwell
+            // between legs, then (hold_last false) an endless slow breath
+            // between the last two silhouettes. Continuous everywhere.
+            function progressAt(t) {
+              if (steps === 0) return 0;
+              if (t <= MORPH_START) return 0;
+              var local = t - MORPH_START;
+              var span = LEG + DWELL;
+              for (var s = 0; s < steps; s += 1) {
+                var legStart = s * span;
+                if (local < legStart + LEG) {
+                  return s + smooth((local - legStart) / LEG);
+                }
+                if (local < legStart + span) return s + 1;
+              }
+              if (holdLast || steps < 1) return steps;
+              // Breathe between the final two forms: depth 0.45, 6s period,
+              // starting and ending each cycle exactly on the final form.
+              var breathe = t - MORPH_END;
+              return steps - 0.45 * (0.5 - 0.5 * Math.cos((2 * Math.PI * breathe) / 6));
+            }
+
+            // Wobble amplitude a(t): ramps in with the entrance, then decays
+            // to zero before the hold when hold_last is true.
+            function wobbleAmpAt(t) {
+              var ramp = smooth(t / Math.max(0.001, ENTER));
+              if (!holdLast) return ramp;
+              if (t <= MORPH_END) return ramp;
+              return ramp * (1 - smooth((t - MORPH_END) / Math.max(0.001, DECAY)));
+            }
+
+            var WOBBLE_R = 1.6; // radial wobble, viewBox units
+            var WOBBLE_HZ = 0.42;
+
+            function lerp(valueA, valueB, w) {
+              return valueA + (valueB - valueA) * w;
+            }
+
+            // Light arrives from the upper left.
+            var LIGHT_X = -0.62;
+            var LIGHT_Y = -0.78;
+
+            var outerPts = [];
+            for (var oi = 0; oi < OUTER; oi += 1) outerPts.push([0, 0]);
+            var innerPts = [];
+            for (var ii = 0; ii < INNER; ii += 1) innerPts.push([0, 0]);
+            var centerPt = [50, 50];
+
+            function render(t) {
+              var p = progressAt(t);
+              var kA = Math.max(0, Math.min(formRows.length - 1, Math.floor(p)));
+              var kB = Math.min(formRows.length - 1, kA + 1);
+              var w = Math.max(0, Math.min(1, p - kA));
+              var rowA = formRows[kA];
+              var rowB = formRows[kB];
+              var amp = wobbleAmpAt(t) * WOBBLE_R;
+              var cx = lerp(rowA.cx, rowB.cx, w);
+              var cy = lerp(rowA.cy, rowB.cy, w);
+              var rot = (lerp(rowA.rot, rowB.rot, w) * Math.PI) / 180;
+
+              for (var o = 0; o < OUTER; o += 1) {
+                var wobO = amp * Math.sin(2 * Math.PI * (WOBBLE_HZ * t + outerPhase[o]));
+                var radO = lerp(rowA.outerR[o], rowB.outerR[o], w) + wobO;
+                var angO =
+                  ((-90 + o * 20 + lerp(rowA.outerJ[o], rowB.outerJ[o], w)) * Math.PI) / 180 + rot;
+                outerPts[o][0] = cx + radO * Math.cos(angO);
+                outerPts[o][1] = cy + radO * Math.sin(angO);
+              }
+              for (var n = 0; n < INNER; n += 1) {
+                var wobI = amp * 0.7 * Math.sin(2 * Math.PI * (WOBBLE_HZ * t + innerPhase[n]));
+                var radI = lerp(rowA.innerR[n], rowB.innerR[n], w) + wobI;
+                var angI =
+                  ((-70 + n * 40 + lerp(rowA.innerJ[n], rowB.innerJ[n], w)) * Math.PI) / 180 + rot;
+                innerPts[n][0] = cx + radI * Math.cos(angI);
+                innerPts[n][1] = cy + radI * Math.sin(angI);
+              }
+              centerPt[0] = cx;
+              centerPt[1] = cy + amp * 0.4 * Math.sin(2 * Math.PI * (WOBBLE_HZ * t + 0.31));
+
+              for (var fi = 0; fi < facets.length; fi += 1) {
+                var facet = facets[fi];
+                var pts = "";
+                var sumX = 0;
+                var sumY = 0;
+                for (var v = 0; v < 3; v += 1) {
+                  var kind = facet[v * 2];
+                  var index = facet[v * 2 + 1];
+                  var pt =
+                    kind === "o" ? outerPts[index] : kind === "i" ? innerPts[index] : centerPt;
+                  pts += pt[0].toFixed(2) + "," + pt[1].toFixed(2) + (v < 2 ? " " : "");
+                  sumX += pt[0];
+                  sumY += pt[1];
+                }
+                var nx = sumX / 3 - cx;
+                var ny = sumY / 3 - cy;
+                var len = Math.hypot(nx, ny) || 1;
+                // Pseudo-normal: outward direction plus the facet's fixed
+                // tilt. Facets turned toward the upper-left light lift.
+                var shade = (nx / len) * LIGHT_X + (ny / len) * LIGHT_Y + facetTilt[fi];
+                shade = Math.max(-1, Math.min(1, shade));
+                var fill =
+                  shade >= 0
+                    ? mix(baseRgb, litTarget, shade * 0.85)
+                    : mix(baseRgb, darkTarget, -shade * 0.78);
+                var fillString = rgbString(fill);
+                var polygon = polygons[fi];
+                polygon.setAttribute("points", pts);
+                polygon.setAttribute("fill", fillString);
+                polygon.setAttribute("stroke", fillString);
+              }
+            }
+
+            /* ---------------- timeline ---------------- */
+
+            function fireSfx(id, t) {
+              root.dispatchEvent(
+                new CustomEvent("hf:sfx", { detail: { id: id, t: t }, bubbles: true }),
+              );
+            }
+
+            gsap.set(stage, { opacity: 0, scale: 0.94, y: 0 });
+            render(0);
+
+            var tl = gsap.timeline({ paused: true });
+
+            // ONE linear driver owns every vertex and every fill; render is a
+            // pure function of the driver's time.
+            var driver = { t: 0 };
+            tl.fromTo(
+              driver,
+              { t: 0 },
+              {
+                t: duration,
+                duration: duration,
+                ease: "none",
+                onUpdate: function () {
+                  render(driver.t);
+                },
+              },
+              0,
+            );
+
+            // IN: quiet entrance while the wobble ramps up.
+            tl.to(stage, { opacity: 1, duration: ENTER, ease: "power2.out" }, 0);
+            tl.to(stage, { scale: 1, duration: ENTER * 1.4, ease: "power2.out" }, 0);
+
+            tl.call(
+              function () {
+                fireSfx("facet-settle-soft", MORPH_END);
+              },
+              [],
+              MORPH_END,
+            );
+
+            // HOLD: still (hold_last true) or the slow breath, both inside
+            // the driver's pure function. No extra tweens.
+
+            // OUT: only when the exit variable asks for one.
+            if (exit !== "none") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+              if (exit === "up") {
+                tl.to(stage, { y: "-6cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              }
+            }
+
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/fade-through/__hf-variables-preview.html b/docs/public/catalog/components/fade-through/__hf-variables-preview.html
new file mode 100644
index 0000000000..c76d917198
--- /dev/null
+++ b/docs/public/catalog/components/fade-through/__hf-variables-preview.html
@@ -0,0 +1,66 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Fade Through variables preview</title>
+    <style>
+      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #f5f5f4; }
+      #hf-vars-root { position: relative; width: 1920px; height: 1080px; }
+      #hf-vars-mount { position: absolute; inset: 0; display: grid; place-items: center; }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  </head>
+  <body>
+    <div id="hf-vars-root" data-composition-id="fade-through-variables-preview" data-start="0" data-width="1920" data-height="1080" data-duration="5" data-fps="30">
+      <div id="hf-vars-mount" class="clip" data-composition-id="fade-through" data-composition-src="./fade-through.html" data-start="0" data-duration="5" data-track-index="0" data-width="1920" data-height="1080"></div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["fade-through-variables-preview"] = gsap.timeline({ paused: true });
+    </script>
+    <script>
+      (function () {
+        var mount = document.getElementById("hf-vars-mount");
+        // The mount is filled asynchronously, and the demo script selects
+        // what it fills it with, so it cannot run before then.
+        var observer = new MutationObserver(build);
+        observer.observe(mount, { childList: true, subtree: true });
+        build();
+        function build() {
+          if (!mount.firstElementChild) return;
+          observer.disconnect();
+
+        const tl = gsap.timeline({ paused: true });
+        tl.to(".hf-fade-through-out", { opacity: 0, duration: 0.45, ease: "power2.inOut" }, 1.3);
+        tl.to(".hf-fade-through-wash", { opacity: 1, duration: 0.35, ease: "power2.inOut" }, 1.3);
+        tl.to(".hf-fade-through-wash", { opacity: 0, duration: 0.45, ease: "power2.inOut" }, 1.65);
+        tl.to(".hf-fade-through-in", { opacity: 1, duration: 0.55, ease: "power2.out" }, 1.65);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["fade-through-demo"] = tl;
+          var child = window.__timelines["fade-through-demo"];
+          delete window.__timelines["fade-through-demo"];
+          if (!child || typeof child.paused !== "function") return;
+          child.paused(false);
+          window.__timelines["fade-through-variables-preview"].add(child, 0);
+        }
+      })();
+    </script>
+<script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "fade-through.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/fade-through/demo.html b/docs/public/catalog/components/fade-through/demo.html
new file mode 100644
index 0000000000..ff447e60ed
--- /dev/null
+++ b/docs/public/catalog/components/fade-through/demo.html
@@ -0,0 +1,230 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Fade Through - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        font-family: Inter, system-ui, sans-serif;
+        background: #f5f5f4;
+      }
+      .scene {
+        position: absolute;
+        inset: 0;
+        display: grid;
+        place-items: center;
+      }
+      /* Scene A — light neutral */
+      .a {
+        background: #fafafa;
+      }
+      /* Scene B — dark zinc */
+      .b {
+        background: #18181b;
+        opacity: 0;
+      }
+      /* Shared card */
+      .card {
+        width: 820px;
+        border-radius: 16px;
+        padding: 72px 80px 80px;
+        display: flex;
+        flex-direction: column;
+        gap: 32px;
+      }
+      .a .card {
+        background: #ffffff;
+        border: 1px solid #e4e4e7;
+        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.08);
+      }
+      .b .card {
+        background: #27272a;
+        border: 1px solid #3f3f46;
+        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.4);
+      }
+      .badge {
+        display: inline-flex;
+        align-items: center;
+        gap: 10px;
+        font-size: 26px;
+        font-weight: 500;
+        letter-spacing: 0.03em;
+        text-transform: uppercase;
+        width: fit-content;
+        padding: 10px 22px;
+        border-radius: 999px;
+      }
+      .a .badge {
+        background: #f4f4f5;
+        color: #71717a;
+      }
+      .b .badge {
+        background: #3f3f46;
+        color: #a1a1aa;
+      }
+      .badge-dot {
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+      }
+      .a .badge-dot {
+        background: #71717a;
+      }
+      .b .badge-dot {
+        background: #a1a1aa;
+      }
+      .card-title {
+        font-size: 72px;
+        font-weight: 700;
+        line-height: 1.08;
+        letter-spacing: -0.02em;
+        margin: 0;
+      }
+      .a .card-title {
+        color: #18181b;
+      }
+      .b .card-title {
+        color: #fafafa;
+      }
+      .card-body {
+        font-size: 32px;
+        font-weight: 400;
+        line-height: 1.5;
+        color: #71717a;
+      }
+      .b .card-body {
+        color: #71717a;
+      }
+      .divider {
+        height: 1px;
+        background: #e4e4e7;
+        border: none;
+        margin: 0;
+      }
+      .b .divider {
+        background: #3f3f46;
+      }
+      .meta-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+      .meta-label {
+        font-size: 26px;
+        font-weight: 500;
+      }
+      .a .meta-label {
+        color: #71717a;
+      }
+      .b .meta-label {
+        color: #71717a;
+      }
+      .mode-pill {
+        font-size: 26px;
+        font-weight: 600;
+        padding: 10px 28px;
+        border-radius: 999px;
+      }
+      .a .mode-pill {
+        background: #18181b;
+        color: #fafafa;
+      }
+      .b .mode-pill {
+        background: #fafafa;
+        color: #18181b;
+      }
+      .hf-fade-through-wash {
+        position: absolute;
+        inset: 0;
+        opacity: 0;
+        pointer-events: none;
+        background: #fafafa;
+        z-index: 900;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="fade-through-demo"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <!-- Scene A: Light mode -->
+      <div class="scene a hf-fade-through-out">
+        <div class="card">
+          <div class="badge"><span class="badge-dot"></span>Light Mode</div>
+          <h2 class="card-title">Your workspace,<br />beautifully lit.</h2>
+          <p class="card-body">
+            Clean surfaces, crisp type, and just enough contrast to keep you focused all day long.
+          </p>
+          <hr class="divider" />
+          <div class="meta-row">
+            <span class="meta-label">Appearance</span>
+            <span class="mode-pill">Light</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Scene B: Dark mode -->
+      <div class="scene b hf-fade-through-in">
+        <div class="card">
+          <div class="badge"><span class="badge-dot"></span>Dark Mode</div>
+          <h2 class="card-title">Easy on the eyes,<br />night or day.</h2>
+          <p class="card-body">
+            Deep backgrounds, refined contrast, and thoughtful color for late-night sessions.
+          </p>
+          <hr class="divider" />
+          <div class="meta-row">
+            <span class="meta-label">Appearance</span>
+            <span class="mode-pill">Dark</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="hf-fade-through-wash" aria-hidden="true"></div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        tl.to(".hf-fade-through-out", { opacity: 0, duration: 0.45, ease: "power2.inOut" }, 1.3);
+        tl.to(".hf-fade-through-wash", { opacity: 1, duration: 0.35, ease: "power2.inOut" }, 1.3);
+        tl.to(".hf-fade-through-wash", { opacity: 0, duration: 0.45, ease: "power2.inOut" }, 1.65);
+        tl.to(".hf-fade-through-in", { opacity: 1, duration: 0.55, ease: "power2.out" }, 1.65);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["fade-through-demo"] = tl;
+      </script>
+    </div>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "fade-through.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/fade-through/fade-through.html b/docs/public/catalog/components/fade-through/fade-through.html
new file mode 100644
index 0000000000..800c8d6011
--- /dev/null
+++ b/docs/public/catalog/components/fade-through/fade-through.html
@@ -0,0 +1,96 @@
+<!--
+  Fade Through - scene transition primitive.
+
+  Put class="hf-fade-through-out" on the outgoing layer and
+  class="hf-fade-through-in" on the incoming layer. Add the optional wash
+  overlay below when you want a brighter mid-transition frame.
+
+  Variables. The wash is the only surface this primitive paints, so all three
+  describe it. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result as a custom property
+  the CSS above consumes. The timeline recipe below is untouched by them.
+
+    - wash (paper | white | ink | accent, default paper): the colour of the
+      mid-transition frame. paper still resolves through
+      --hf-fade-through-wash, so an existing override keeps working; accent
+      rides --accent.
+    - strength (number 0.1 to 1, default 1): how far the wash is allowed to
+      cover at its peak. 1 is a full flash, 0.3 a light veil over the cut.
+    - shape (flat | bloom, default flat): flat fills the frame evenly, bloom
+      concentrates the wash in the centre and falls off to the edges.
+
+  On every default the result is identical to the original: a flat, fully
+  opaque #f8f5ec wash.
+-->
+
+<div
+  class="hf-fade-through-wash"
+  aria-hidden="true"
+  data-composition-variables='[
+    { "id": "wash", "type": "enum", "role": "style", "label": "Wash", "description": "Colour of the mid-transition frame. Paper resolves through --hf-fade-through-wash, accent rides --accent.", "default": "paper", "options": [{ "value": "paper", "label": "Paper" }, { "value": "white", "label": "White" }, { "value": "ink", "label": "Ink" }, { "value": "accent", "label": "Accent" }] },
+    { "id": "strength", "type": "number", "role": "style", "label": "Strength", "description": "How far the wash covers at its peak. 1 is a full flash, 0.3 a light veil.", "default": 1, "min": 0.1, "max": 1, "step": 0.05 },
+    { "id": "shape", "type": "enum", "role": "style", "label": "Shape", "description": "Flat fills the frame evenly, bloom concentrates the wash in the centre.", "default": "flat", "options": [{ "value": "flat", "label": "Flat" }, { "value": "bloom", "label": "Bloom" }] }
+  ]'
+></div>
+
+<style>
+  .hf-fade-through-in {
+    opacity: 0;
+  }
+  .hf-fade-through-wash {
+    position: absolute;
+    inset: 0;
+    opacity: 0;
+    pointer-events: none;
+    background: var(--hf-fade-through-paint, var(--hf-fade-through-wash, #f8f5ec));
+    filter: opacity(var(--hf-fade-through-strength, 1));
+    z-index: 900;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    var washes = {
+      paper: "var(--hf-fade-through-wash, #f8f5ec)",
+      white: "#ffffff",
+      ink: "#0b0b0f",
+      accent: "var(--accent, #38bdf8)",
+    };
+
+    var wash = Object.prototype.hasOwnProperty.call(washes, vars.wash) ? vars.wash : "paper";
+    var shape = vars.shape === "bloom" ? "bloom" : "flat";
+
+    var strength = parseFloat(vars.strength);
+    if (!isFinite(strength)) strength = 1;
+    strength = Math.min(1, Math.max(0.1, strength));
+
+    var colour = washes[wash];
+    var paint =
+      shape === "bloom"
+        ? "radial-gradient(circle at 50% 50%, " + colour + " 0%, transparent 72%)"
+        : colour;
+
+    var overlays = document.querySelectorAll(".hf-fade-through-wash");
+    for (var i = 0; i < overlays.length; i += 1) {
+      overlays[i].style.setProperty("--hf-fade-through-paint", paint);
+      overlays[i].style.setProperty("--hf-fade-through-strength", String(strength));
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+
+  tl.to(".hf-fade-through-out", { opacity: 0, duration: 0.45, ease: "power2.inOut" }, startTime);
+  tl.to(".hf-fade-through-wash", { opacity: 1, duration: 0.35, ease: "power2.inOut" }, startTime);
+  tl.to(".hf-fade-through-wash", { opacity: 0, duration: 0.45, ease: "power2.inOut" }, startTime + 0.35);
+  tl.to(".hf-fade-through-in", { opacity: 1, duration: 0.55, ease: "power2.out" }, startTime + 0.35);
+-->
diff --git a/docs/public/catalog/components/focus-blur-resolve/__hf-variables-preview.html b/docs/public/catalog/components/focus-blur-resolve/__hf-variables-preview.html
new file mode 100644
index 0000000000..a276f62c54
--- /dev/null
+++ b/docs/public/catalog/components/focus-blur-resolve/__hf-variables-preview.html
@@ -0,0 +1,77 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Focus Blur Resolve variables preview</title>
+    <style>
+      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #f7f7f8; }
+      #hf-vars-root { position: relative; width: 1920px; height: 1080px; }
+      #hf-vars-mount { position: absolute; inset: 0; display: grid; place-items: center; }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  </head>
+  <body>
+    <div id="hf-vars-root" data-composition-id="focus-blur-resolve-variables-preview" data-start="0" data-width="1920" data-height="1080" data-duration="5" data-fps="30">
+      <div id="hf-vars-mount" class="clip" data-composition-id="focus-blur-resolve" data-composition-src="./focus-blur-resolve.html" data-start="0" data-duration="5" data-track-index="0" data-width="1920" data-height="1080"></div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["focus-blur-resolve-variables-preview"] = gsap.timeline({ paused: true });
+    </script>
+    <script>
+      (function () {
+        var mount = document.getElementById("hf-vars-mount");
+        // The mount is filled asynchronously, and the demo script selects
+        // what it fills it with, so it cannot run before then.
+        var observer = new MutationObserver(build);
+        observer.observe(mount, { childList: true, subtree: true });
+        build();
+        function build() {
+          if (!mount.firstElementChild) return;
+          observer.disconnect();
+
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-focus-blur-resolve span",
+          { opacity: 0, "--hf-word-scale": 1.08, "--hf-word-blur": "16px" },
+          {
+            opacity: 1,
+            "--hf-word-scale": 1,
+            "--hf-word-blur": "0px",
+            duration: 0.52,
+            stagger: 0.05,
+            ease: "power3.out",
+          },
+          startTime,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["focus-blur-resolve-demo"] = tl;
+          var child = window.__timelines["focus-blur-resolve-demo"];
+          delete window.__timelines["focus-blur-resolve-demo"];
+          if (!child || typeof child.paused !== "function") return;
+          child.paused(false);
+          window.__timelines["focus-blur-resolve-variables-preview"].add(child, 0);
+        }
+      })();
+    </script>
+<script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "focus-blur-resolve.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/focus-blur-resolve/demo.html b/docs/public/catalog/components/focus-blur-resolve/demo.html
new file mode 100644
index 0000000000..3aebca90da
--- /dev/null
+++ b/docs/public/catalog/components/focus-blur-resolve/demo.html
@@ -0,0 +1,107 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Focus Blur Resolve - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        min-width: 900px;
+        min-height: 500px;
+        padding: 64px;
+        /* ponytail: scale wrapper (not a GSAP target) to fill ~65% of frame */
+        transform: scale(2.8);
+      }
+      .hf-remocn-focus-blur-resolve {
+        color: #18181b;
+        font-family: Inter, system-ui, sans-serif;
+        font-weight: 900;
+        letter-spacing: -0.04em;
+      }
+      .hf-remocn-focus-blur-resolve {
+        display: inline-flex;
+        gap: 12px;
+        font-size: 56px;
+        line-height: 1;
+      }
+      .hf-remocn-focus-blur-resolve span {
+        display: inline-block;
+        transform: translate(var(--hf-word-x, 0px), var(--hf-word-y, 0px))
+          scale(var(--hf-word-scale, 1));
+        filter: blur(var(--hf-word-blur, 0px));
+        will-change: transform, filter, opacity;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="focus-blur-resolve-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-focus-blur-resolve"><span>Crystal</span><span>clear</span></div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-focus-blur-resolve span",
+          { opacity: 0, "--hf-word-scale": 1.08, "--hf-word-blur": "16px" },
+          {
+            opacity: 1,
+            "--hf-word-scale": 1,
+            "--hf-word-blur": "0px",
+            duration: 0.52,
+            stagger: 0.05,
+            ease: "power3.out",
+          },
+          startTime,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["focus-blur-resolve-demo"] = tl;
+      </script>
+    </div>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "focus-blur-resolve.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/focus-blur-resolve/focus-blur-resolve.html b/docs/public/catalog/components/focus-blur-resolve/focus-blur-resolve.html
new file mode 100644
index 0000000000..60d5b58273
--- /dev/null
+++ b/docs/public/catalog/components/focus-blur-resolve/focus-blur-resolve.html
@@ -0,0 +1,91 @@
+<!--
+  Focus Blur Resolve - remocn typography primitive for HyperFrames.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result as a custom property
+  the CSS consumes. The timeline recipe below is untouched by them: it keeps
+  driving one scale and one blur, and these decide how big the words are, what
+  colour they resolve to, and how deep the blur they resolve from goes.
+
+    - tone (ink | paper | accent, default ink): word colour. ink is near-black
+      for light frames, paper near-white for dark ones, accent rides --brand.
+    - size (compact | standard | display, default standard): type size, 40px,
+      56px or 84px.
+    - blur (soft | standard | heavy, default standard): scales the blur radius,
+      so the pull starts as a light haze or a full smear over the same run.
+
+  On every default the result is identical to the original: near-black 56px
+  words resolving out of a 16px blur.
+-->
+
+<div
+  class="hf-remocn-focus-blur-resolve"
+  data-composition-variables='[
+    { "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Word colour: ink for light frames, paper for dark ones, accent rides --brand.", "default": "ink", "options": [{ "value": "ink", "label": "Ink" }, { "value": "paper", "label": "Paper" }, { "value": "accent", "label": "Accent" }] },
+    { "id": "size", "type": "enum", "role": "style", "label": "Size", "description": "Type size of the words, from a caption-scale line to a full display card.", "default": "standard", "options": [{ "value": "compact", "label": "Compact" }, { "value": "standard", "label": "Standard" }, { "value": "display", "label": "Display" }] },
+    { "id": "blur", "type": "enum", "role": "style", "label": "Blur", "description": "Scales the blur radius the timeline drives, so the focus pull starts as a light haze or a full smear.", "default": "standard", "options": [{ "value": "soft", "label": "Soft" }, { "value": "standard", "label": "Standard" }, { "value": "heavy", "label": "Heavy" }] }
+  ]'
+>
+  <span>Crystal</span><span>clear</span>
+</div>
+
+<style>
+  .hf-remocn-focus-blur-resolve {
+    color: var(--hf-word-color, #18181b);
+    font-family: Inter, system-ui, sans-serif;
+    font-weight: 900;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-focus-blur-resolve {
+    display: inline-flex;
+    gap: 12px;
+    font-size: var(--hf-word-size, 56px);
+    line-height: 1;
+  }
+  .hf-remocn-focus-blur-resolve span {
+    display: inline-block;
+    transform: translate(var(--hf-word-x, 0px), var(--hf-word-y, 0px))
+      scale(var(--hf-word-scale, 1));
+    filter: blur(calc(var(--hf-word-blur, 0px) * var(--hf-word-blur-scale, 1)));
+    will-change: transform, filter, opacity;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var tones = { ink: "#18181b", paper: "#fafafa", accent: "var(--brand, #34d399)" };
+    var sizes = { compact: "40px", standard: "56px", display: "84px" };
+    var blurScales = { soft: 0.45, standard: 1, heavy: 2.2 };
+
+    var tone = tones[pick(tones, vars.tone, "ink")];
+    var size = sizes[pick(sizes, vars.size, "standard")];
+    var blurScale = blurScales[pick(blurScales, vars.blur, "standard")];
+
+    var roots = document.querySelectorAll(".hf-remocn-focus-blur-resolve");
+    for (var i = 0; i < roots.length; i += 1) {
+      roots[i].style.setProperty("--hf-word-color", tone);
+      roots[i].style.setProperty("--hf-word-size", size);
+      roots[i].style.setProperty("--hf-word-blur-scale", String(blurScale));
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-focus-blur-resolve span', { opacity: 0, '--hf-word-scale': 1.08, '--hf-word-blur': '16px' }, { opacity: 1, '--hf-word-scale': 1, '--hf-word-blur': '0px', duration: 0.52, stagger: 0.05, ease: 'power3.out' }, startTime);
+-->
diff --git a/docs/public/catalog/components/focus-rack/demo.html b/docs/public/catalog/components/focus-rack/demo.html
new file mode 100644
index 0000000000..c70e128eab
--- /dev/null
+++ b/docs/public/catalog/components/focus-rack/demo.html
@@ -0,0 +1,102 @@
+<!doctype html>
+<!--
+  focus-rack demo. This standalone composition mounts focus-rack.html through
+  data-composition-src. Non-default labels and accent prove that all variables
+  flow through the mount while the primitive remains sized by its host box.
+-->
+<html lang="en" data-composition-id="focus-rack-demo" data-composition-duration="3.5">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Focus Rack Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0b0c0e;
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --surface: #1a2030;
+        --border: #394155;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-body: Inter, system-ui, sans-serif;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 44%, #211b32 0%, #0b0c0e 68%);
+      }
+
+      .mount-card {
+        position: absolute;
+        left: 12%;
+        top: 14%;
+        width: 76%;
+        height: 72%;
+        overflow: hidden;
+        border: 1px solid rgba(255, 255, 255, 0.14);
+        border-radius: 30px;
+        background: var(--bg);
+        box-shadow: 0 48px 120px rgba(0, 0, 0, 0.52);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="focus-rack-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="3.5"
+      data-fps="30"
+    >
+      <div
+        id="focus-rack-mount"
+        class="mount-card clip"
+        data-composition-id="focus-rack"
+        data-composition-src="./focus-rack.html"
+        data-variable-values='{"label_a":"Working copy","label_b":"Approved","accent":"violet"}'
+        data-start="0"
+        data-duration="3.5"
+        data-track-index="0"
+        data-width="1459"
+        data-height="778"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["focus-rack-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "focus-rack.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/focus-rack/focus-rack.html b/docs/public/catalog/components/focus-rack/focus-rack.html
new file mode 100644
index 0000000000..eba8bfae30
--- /dev/null
+++ b/docs/public/catalog/components/focus-rack/focus-rack.html
@@ -0,0 +1,330 @@
+<!doctype html>
+<!--
+  focus-rack: HyperFrames video primitive (camera / holdable / emphasize)
+
+  Concept: two cards sit at different apparent depths. Card A begins sharp
+  and near while card B is blurred and dim. Focus moves to card B exactly
+  once, with blur, scale, and parallax changing together over 0.7 seconds.
+
+  Variables:
+    - label_a (string, default "Draft"): foreground card label.
+    - label_b (string, default "Published"): background card label.
+    - accent (green | blue | violet, default "blue"): focus highlight.
+
+  Envelope (fixed IN/OUT, elastic HOLD only, never gsap.timeScale()):
+    IN_BASE  = 1.32s  stage reveal, initial focus beat, then one 0.7s rack
+    HOLD     = elastic card B remains sharp with a restrained depth drift
+    OUT_BASE = 0.42s  completed focus state fades from the stage
+    If D is shorter than IN_BASE plus OUT_BASE, both fixed phases compress
+    proportionally and HOLD becomes zero. The rack still occurs exactly once.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, has no data-width or data-height,
+  and registers one paused timeline under the hardcoded focus-rack id.
+-->
+<html
+  lang="en"
+  data-composition-id="focus-rack"
+  data-composition-duration="3.5"
+  data-composition-variables='[
+    { "id": "label_a", "type": "string", "role": "content", "label": "Card A label", "description": "Label on the card that begins in focus.", "default": "Draft" },
+    { "id": "label_b", "type": "string", "role": "content", "label": "Card B label", "description": "Label on the card that receives focus.", "default": "Published" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Highlight color shared by both cards.", "default": "blue", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Focus Rack</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="focus-rack" data-duration="3.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            background: var(--bg, #0b0c0e);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .fr-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            background: radial-gradient(
+              ellipse at 52% 48%,
+              color-mix(in srgb, var(--fr-accent) 12%, var(--surface, #18202d)) 0%,
+              var(--bg, #0b0c0e) 72%
+            );
+          }
+
+          .fr-stage {
+            position: absolute;
+            inset: 0;
+            perspective: 120cqw;
+            opacity: 0;
+          }
+
+          .fr-card {
+            --fr-blur: 0;
+            position: absolute;
+            top: 21cqh;
+            width: 39cqw;
+            height: 58cqh;
+            padding: 4.2cqh 3.4cqw;
+            overflow: hidden;
+            border: 0.1cqw solid color-mix(in srgb, var(--fr-accent) 28%, #cbd5e1);
+            border-radius: 2.4cqmin;
+            background: linear-gradient(145deg, #ffffff, #e9edf4);
+            box-shadow:
+              0 4.4cqh 10cqh rgba(0, 0, 0, 0.42),
+              inset 0 0.12cqh 0 rgba(255, 255, 255, 0.86);
+            color: #101827;
+            filter: blur(calc(var(--fr-blur) * 1cqw));
+            transform-origin: 50% 50%;
+            will-change: transform, opacity, filter;
+          }
+
+          .fr-card-a {
+            left: 8cqw;
+          }
+
+          .fr-card-b {
+            right: 8cqw;
+          }
+
+          .fr-card-top {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+          }
+
+          .fr-kicker {
+            display: flex;
+            align-items: center;
+            gap: 0.8cqw;
+            color: #667085;
+            font-size: 1.15cqw;
+            font-weight: 760;
+            letter-spacing: 0.13em;
+            line-height: 1;
+            text-transform: uppercase;
+          }
+
+          .fr-dot {
+            width: 0.75cqw;
+            aspect-ratio: 1;
+            border-radius: 50%;
+            background: var(--fr-accent);
+            box-shadow: 0 0 1.4cqw color-mix(in srgb, var(--fr-accent) 52%, transparent);
+          }
+
+          .fr-index {
+            color: #98a2b3;
+            font-family: var(--font-mono, ui-monospace, monospace);
+            font-size: 1.05cqw;
+            font-weight: 700;
+          }
+
+          .fr-label {
+            margin-top: 7.4cqh;
+            max-width: 100%;
+            overflow: hidden;
+            color: #101827;
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: 4.8cqw;
+            font-weight: 790;
+            letter-spacing: -0.055em;
+            line-height: 0.94;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          .fr-rule {
+            width: 100%;
+            height: 0.35cqh;
+            margin-top: 5cqh;
+            border-radius: 99cqh;
+            background: color-mix(in srgb, var(--fr-accent) 76%, #d0d5dd);
+          }
+
+          .fr-copy {
+            display: grid;
+            gap: 1.4cqh;
+            margin-top: 3.2cqh;
+          }
+
+          .fr-line {
+            display: block;
+            height: 1.15cqh;
+            border-radius: 99cqh;
+            background: #c9d0dc;
+          }
+
+          .fr-line:last-child {
+            width: 68%;
+          }
+        </style>
+
+        <div
+          id="focus-rack-clip"
+          class="fr-clip clip"
+          data-start="0"
+          data-duration="3.5"
+          data-track-index="0"
+        >
+          <div class="fr-stage">
+            <article class="fr-card fr-card-a">
+              <div class="fr-card-top">
+                <span class="fr-kicker"><span class="fr-dot"></span>Workspace</span>
+                <span class="fr-index">A</span>
+              </div>
+              <div class="fr-label fr-label-a"></div>
+              <div class="fr-rule"></div>
+              <div class="fr-copy" aria-hidden="true">
+                <span class="fr-line"></span>
+                <span class="fr-line"></span>
+              </div>
+            </article>
+
+            <article class="fr-card fr-card-b">
+              <div class="fr-card-top">
+                <span class="fr-kicker"><span class="fr-dot"></span>Workspace</span>
+                <span class="fr-index">B</span>
+              </div>
+              <div class="fr-label fr-label-b"></div>
+              <div class="fr-rule"></div>
+              <div class="fr-copy" aria-hidden="true">
+                <span class="fr-line"></span>
+                <span class="fr-line"></span>
+              </div>
+            </article>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".fr-stage");
+            var cardA = root.querySelector(".fr-card-a");
+            var cardB = root.querySelector(".fr-card-b");
+            var labelA = root.querySelector(".fr-label-a");
+            var labelB = root.querySelector(".fr-label-b");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var accent = vars.accent === "green" || vars.accent === "violet" ? vars.accent : "blue";
+            var accents = { green: "#34d399", blue: "#60a5fa", violet: "#a78bfa" };
+
+            labelA.textContent = vars.label_a == null ? "Draft" : String(vars.label_a);
+            labelB.textContent = vars.label_b == null ? "Published" : String(vars.label_b);
+            root.style.setProperty("--fr-accent", accents[accent]);
+
+            var IN_BASE = 1.32;
+            var OUT_BASE = 0.42;
+            var STAGE_IN_BASE = 0.38;
+            var RACK_AT_BASE = 0.62;
+            var RACK_DURATION_BASE = 0.7;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "3.5"));
+            var fixedDuration = IN_BASE + OUT_BASE;
+            var phaseScale = duration < fixedDuration ? duration / fixedDuration : 1;
+            var IN = IN_BASE * phaseScale;
+            var OUT = OUT_BASE * phaseScale;
+            var STAGE_IN = STAGE_IN_BASE * phaseScale;
+            var RACK_AT = RACK_AT_BASE * phaseScale;
+            var RACK_DURATION = RACK_DURATION_BASE * phaseScale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var HOLD_START = IN;
+            var OUT_START = IN + HOLD;
+
+            var tl = gsap.timeline({ paused: true });
+
+            tl.set(stage, { opacity: 0 }, 0);
+            tl.set(
+              cardA,
+              {
+                "--fr-blur": 0,
+                opacity: 1,
+                x: "0cqw",
+                y: "-0.5cqh",
+                scale: 1.045,
+                rotation: -3,
+              },
+              0,
+            );
+            tl.set(
+              cardB,
+              {
+                "--fr-blur": 0.48,
+                opacity: 0.52,
+                x: "1.6cqw",
+                y: "0.8cqh",
+                scale: 0.93,
+                rotation: 2.4,
+              },
+              0,
+            );
+
+            tl.to(stage, { opacity: 1, duration: STAGE_IN, ease: "power2.out" }, 0);
+
+            tl.to(
+              cardA,
+              {
+                "--fr-blur": 0.48,
+                opacity: 0.5,
+                x: "-1.4cqw",
+                y: "0.8cqh",
+                scale: 0.94,
+                rotation: -1.6,
+                duration: RACK_DURATION,
+                ease: "sine.inOut",
+              },
+              RACK_AT,
+            );
+            tl.to(
+              cardB,
+              {
+                "--fr-blur": 0,
+                opacity: 1,
+                x: "-1.6cqw",
+                y: "-0.4cqh",
+                scale: 1.04,
+                rotation: 1.3,
+                duration: RACK_DURATION,
+                ease: "sine.inOut",
+              },
+              RACK_AT,
+            );
+
+            if (HOLD > 0) {
+              tl.to(cardA, { y: "1.15cqh", duration: HOLD, ease: "sine.inOut" }, HOLD_START);
+              tl.to(cardB, { y: "-0.75cqh", duration: HOLD, ease: "sine.inOut" }, HOLD_START);
+            }
+
+            tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["focus-rack"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/focus-swap/demo.html b/docs/public/catalog/components/focus-swap/demo.html
new file mode 100644
index 0000000000..e4c6990806
--- /dev/null
+++ b/docs/public/catalog/components/focus-swap/demo.html
@@ -0,0 +1,116 @@
+<!doctype html>
+<!--
+  focus-swap demo: standalone 1920x1080 composition that mounts the primitive
+  through data-composition-src. The host owns the stage and mount dimensions;
+  focus-swap.html owns only the attention shift inside that box.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Focus Swap - Demo</title>
+    <style>
+      :root {
+        --bg: #070a12;
+        --fg: #f8fafc;
+        --muted: #94a3b8;
+        --surface: #151c2c;
+        --border: #34405a;
+        --brand: #e4e4e7;
+        --accent: #e4e4e7;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-body: Inter, system-ui, sans-serif;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        --radius: 22px;
+        --space-1: 8px;
+        --space-2: 16px;
+        --space-3: 32px;
+        --dur-beat: 0.4s;
+        --ease-standard: cubic-bezier(0.215, 0.61, 0.355, 1);
+      }
+
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg);
+      }
+
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(
+          ellipse at 50% 45%,
+          color-mix(in srgb, var(--surface) 78%, var(--bg)),
+          var(--bg) 72%
+        );
+      }
+
+      .mount-card {
+        width: 70%;
+        height: 60%;
+        left: 15%;
+        top: 20%;
+        overflow: hidden;
+        border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
+        border-radius: calc(var(--radius) * 1.4);
+        box-shadow: 0 40px 90px color-mix(in srgb, var(--bg) 78%, transparent);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="focus-swap-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="1.5"
+      data-fps="30"
+    >
+      <div
+        id="focus-swap-mount"
+        class="mount-card clip"
+        data-composition-id="focus-swap"
+        data-composition-src="./focus-swap.html"
+        data-variable-values='{"focus":"b","blurPx":6,"dim":0.5}'
+        data-start="0"
+        data-duration="1.5"
+        data-track-index="0"
+        data-width="1344"
+        data-height="648"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["focus-swap-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "focus-swap.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/focus-swap/focus-swap.html b/docs/public/catalog/components/focus-swap/focus-swap.html
new file mode 100644
index 0000000000..4794462d72
--- /dev/null
+++ b/docs/public/catalog/components/focus-swap/focus-swap.html
@@ -0,0 +1,281 @@
+<!doctype html>
+<!--
+  focus-swap: HyperFrames video primitive (ui-props / holdable / demonstrate)
+
+  Concept: attention moves between two side-by-side cards. The card losing
+  focus recedes to 0.92 scale, softens, and dims while the other card advances
+  to full scale, sharpness, and opacity. Both sides move together as one clean
+  swap.
+
+  Compiled-from evidence: launches-motion-vocabulary.md section 3.6 identifies
+  blur-focus / defocus in 14 of 18 production launches and names focus-swap as
+  a high-frequency missing primitive for blur + opacity + optional scale.
+
+  Use when: directing the viewer from one product state, option, or result to
+  another without moving either element out of its established layout.
+
+  Variables:
+    - focus ("a" | "b", default "b"): the card that ends focused.
+    - blurPx (number, default 6): blur applied to the unfocused card.
+    - dim (number from 0 to 1, default 0.5): unfocused card opacity.
+
+  Envelope (holdable):
+    IN = 0.90s at the standard duration, including a 0.20s readable lead.
+    HOLD = elastic and deliberately still after focus lands.
+    OUT = none; the host composition owns the cut or exit.
+    For durations under 0.90s, the lead and swap compress to finish by D.
+
+  Sync point: focus-landed at 0.90s into IN at the standard duration. It
+  compresses with IN only when D is shorter than 0.90s and never enters HOLD.
+
+  Sound: none. This continuous attention shift has no discrete impact cue.
+
+  Mount contract: this is a template-wrapped sub-composition. The runtime
+  clones only template contents. #root has no data-width or data-height and
+  fills the host-owned box with position:absolute, inset:0, and
+  container-type:size. The paused GSAP timeline is registered under the
+  hardcoded composition id "focus-swap".
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "focus", "type": "enum", "role": "motion", "label": "Final focus", "description": "Card that ends sharp, full-size, and fully opaque.", "default": "b", "options": [{ "value": "a", "label": "Card A" }, { "value": "b", "label": "Card B" }] },
+    { "id": "blurPx", "type": "number", "role": "style", "label": "Unfocused blur", "description": "Blur applied to the card outside the viewer focus.", "default": 6, "min": 0, "max": 20, "step": 1, "unit": "px" },
+    { "id": "dim", "type": "number", "role": "style", "label": "Unfocused opacity", "description": "Opacity of the card outside the viewer focus.", "default": 0.5, "min": 0, "max": 1, "step": 0.05 }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Focus Swap</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="focus-swap" data-duration="1.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            background: var(--bg);
+            color: var(--fg);
+            font-family: var(--font-body);
+          }
+
+          .fs-clip {
+            width: 100%;
+            height: 100%;
+            display: grid;
+            place-items: center;
+            padding: 7cqh 6cqw;
+          }
+
+          .fs-pair {
+            width: 100%;
+            height: min(72cqh, 52cqw);
+            display: grid;
+            grid-template-columns: repeat(2, minmax(0, 1fr));
+            gap: 4cqw;
+            align-items: stretch;
+          }
+
+          /* EDIT ZONE: visual payload only. Keep the card frames and their
+             initial states transform-free because GSAP owns scale and blur. */
+          .fs-card {
+            min-width: 0;
+            position: relative;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            padding: 5cqh 3.2cqw;
+            overflow: hidden;
+            border: 0.16cqw solid var(--border);
+            border-radius: var(--radius);
+            background: var(--surface);
+            box-shadow: 0 2.2cqh 5cqh color-mix(in srgb, var(--bg) 72%, transparent);
+            transform-origin: center;
+            will-change: transform, filter, opacity;
+            /* Both cards are the same placeholder material. Which one holds
+               attention is said by blur, scale, and opacity, never by hue. */
+            --fs-card-accent: color-mix(in srgb, var(--fg) 72%, var(--surface));
+          }
+
+          .fs-card::before {
+            content: "";
+            position: absolute;
+            inset: 0 0 auto;
+            height: 0.75cqh;
+            background: var(--fs-card-accent);
+          }
+
+          .fs-card-head {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: var(--space-2);
+          }
+
+          .fs-card-letter {
+            display: grid;
+            place-items: center;
+            width: 5cqw;
+            aspect-ratio: 1;
+            border-radius: 50%;
+            background: color-mix(in srgb, var(--fg) 13%, var(--surface));
+            color: var(--fg);
+            font-family: var(--font-mono);
+            font-size: 2.3cqw;
+            font-weight: 700;
+          }
+
+          .fs-status {
+            color: var(--muted);
+            font-family: var(--font-mono);
+            font-size: 1.25cqw;
+            letter-spacing: 0.12em;
+            text-transform: uppercase;
+          }
+
+          .fs-copy {
+            display: grid;
+            gap: var(--space-1);
+          }
+
+          .fs-title {
+            color: var(--fg);
+            font-family: var(--font-display);
+            font-size: 3.4cqw;
+            font-weight: 680;
+            line-height: 1;
+            letter-spacing: -0.025em;
+          }
+
+          .fs-detail {
+            color: var(--muted);
+            font-size: 1.45cqw;
+            line-height: 1.35;
+          }
+
+          .fs-meter {
+            height: 1.1cqh;
+            overflow: hidden;
+            border-radius: var(--radius);
+            background: color-mix(in srgb, var(--border) 60%, transparent);
+          }
+
+          .fs-meter-fill {
+            width: var(--fs-meter-width);
+            height: 100%;
+            border-radius: inherit;
+            background: var(--fs-card-accent);
+          }
+        </style>
+
+        <div class="fs-clip clip" data-start="0" data-duration="1.5" data-track-index="0">
+          <div class="fs-pair">
+            <article class="fs-card" data-focus-card="a" aria-label="Card A, plan">
+              <div class="fs-card-head">
+                <span class="fs-card-letter">A</span>
+                <span class="fs-status">Plan</span>
+              </div>
+              <div class="fs-copy">
+                <h2 class="fs-title">Shape the idea</h2>
+                <p class="fs-detail">Define the brief and align the team.</p>
+              </div>
+              <div class="fs-meter" aria-hidden="true">
+                <div class="fs-meter-fill" style="--fs-meter-width: 58%"></div>
+              </div>
+            </article>
+
+            <article class="fs-card" data-focus-card="b" aria-label="Card B, launch">
+              <div class="fs-card-head">
+                <span class="fs-card-letter">B</span>
+                <span class="fs-status">Launch</span>
+              </div>
+              <div class="fs-copy">
+                <h2 class="fs-title">Ship the result</h2>
+                <p class="fs-detail">Move from approved work to live impact.</p>
+              </div>
+              <div class="fs-meter" aria-hidden="true">
+                <div class="fs-meter-fill" style="--fs-meter-width: 86%"></div>
+              </div>
+            </article>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var cardA = root.querySelector('[data-focus-card="a"]');
+            var cardB = root.querySelector('[data-focus-card="b"]');
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            // INVARIANT: focus is the only owner of which card advances and
+            // which recedes. Invalid input resolves to the declared default.
+            var targetIsB = vars.focus !== "a";
+            var initialFocused = targetIsB ? cardA : cardB;
+            var targetFocused = targetIsB ? cardB : cardA;
+
+            var rawBlur = Number(vars.blurPx);
+            var blurPx = Number.isFinite(rawBlur) ? Math.max(0, Math.min(20, rawBlur)) : 6;
+            var rawDim = Number(vars.dim);
+            var dim = Number.isFinite(rawDim) ? Math.max(0, Math.min(1, rawDim)) : 0.5;
+            var blurred = "blur(" + blurPx + "px)";
+            var sharp = "blur(0px)";
+
+            // RETIME RANGE: keep the standard 0.20s lead and 0.70s swap. Only
+            // short host durations compress them so focus always lands by D.
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "1.5"));
+            var SWAP_START = Math.min(0.2, duration * 0.2);
+            var SWAP_DURATION = Math.min(0.7, Math.max(0.001, duration - SWAP_START));
+
+            gsap.set(initialFocused, { opacity: 1, scale: 1, filter: sharp });
+            gsap.set(targetFocused, { opacity: dim, scale: 0.92, filter: blurred });
+
+            var tl = gsap.timeline({ paused: true });
+            tl.to(
+              initialFocused,
+              {
+                opacity: dim,
+                scale: 0.92,
+                filter: blurred,
+                duration: SWAP_DURATION,
+                ease: "power2.out",
+              },
+              SWAP_START,
+            );
+            tl.to(
+              targetFocused,
+              {
+                opacity: 1,
+                scale: 1,
+                filter: sharp,
+                duration: SWAP_DURATION,
+                ease: "power2.out",
+              },
+              SWAP_START,
+            );
+
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines["focus-swap"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/frosted-glass-wipe/__hf-variables-preview.html b/docs/public/catalog/components/frosted-glass-wipe/__hf-variables-preview.html
new file mode 100644
index 0000000000..2f6718f41a
--- /dev/null
+++ b/docs/public/catalog/components/frosted-glass-wipe/__hf-variables-preview.html
@@ -0,0 +1,106 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Frosted Glass Wipe variables preview</title>
+    <style>
+      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #f7f7f8; }
+      #hf-vars-root { position: relative; width: 1920px; height: 1080px; }
+      #hf-vars-mount { position: absolute; inset: 0; display: grid; place-items: center; }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  </head>
+  <body>
+    <div id="hf-vars-root" data-composition-id="frosted-glass-wipe-variables-preview" data-start="0" data-width="1920" data-height="1080" data-duration="5" data-fps="30">
+      <div id="hf-vars-mount" class="clip" data-composition-id="frosted-glass-wipe" data-composition-src="./frosted-glass-wipe.html" data-start="0" data-duration="5" data-track-index="0" data-width="1920" data-height="1080"></div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["frosted-glass-wipe-variables-preview"] = gsap.timeline({ paused: true });
+    </script>
+    <script>
+      (function () {
+        var mount = document.getElementById("hf-vars-mount");
+        // The mount is filled asynchronously, and the demo script selects
+        // what it fills it with, so it cannot run before then.
+        var observer = new MutationObserver(build);
+        observer.observe(mount, { childList: true, subtree: true });
+        build();
+        function build() {
+          if (!mount.firstElementChild) return;
+          observer.disconnect();
+
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-frosted-glass-wipe .to",
+          { "--hf-clip-right": "100%", "--hf-to-x": "60px", "--hf-to-scale": 1.04 },
+          {
+            "--hf-clip-right": "0%",
+            "--hf-to-x": "0px",
+            "--hf-to-scale": 1,
+            duration: 0.9,
+            ease: "power3.inOut",
+          },
+          startTime,
+        );
+        tl.to(
+          ".hf-remocn-frosted-glass-wipe .from",
+          {
+            "--hf-from-x": "-70px",
+            "--hf-from-scale": 0.96,
+            "--hf-from-blur": "5px",
+            duration: 0.9,
+            ease: "power3.inOut",
+          },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-frosted-glass-wipe .fx",
+          { "--hf-fx-x": "-110%" },
+          { "--hf-fx-x": "110%", duration: 0.58, ease: "power2.inOut" },
+          startTime + 0.18,
+        );
+        tl.fromTo(
+          ".hf-remocn-frosted-glass-wipe .rgb",
+          { "--hf-rgb-opacity": 0, "--hf-rgb-x": "-16px" },
+          {
+            "--hf-rgb-opacity": 1,
+            "--hf-rgb-x": "16px",
+            repeat: 3,
+            yoyo: true,
+            duration: 0.07,
+            ease: "steps(1)",
+          },
+          startTime + 0.32,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["frosted-glass-wipe-demo"] = tl;
+          var child = window.__timelines["frosted-glass-wipe-demo"];
+          delete window.__timelines["frosted-glass-wipe-demo"];
+          if (!child || typeof child.paused !== "function") return;
+          child.paused(false);
+          window.__timelines["frosted-glass-wipe-variables-preview"].add(child, 0);
+        }
+      })();
+    </script>
+<script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "frosted-glass-wipe.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/frosted-glass-wipe/demo.html b/docs/public/catalog/components/frosted-glass-wipe/demo.html
new file mode 100644
index 0000000000..fe5d1a1942
--- /dev/null
+++ b/docs/public/catalog/components/frosted-glass-wipe/demo.html
@@ -0,0 +1,181 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Frosted Glass Wipe - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+        /* ponytail: scale on the wrapper (not the GSAP target) to fill ~63% of frame */
+        transform: scale(1.6);
+      }
+      .hf-remocn-frosted-glass-wipe {
+        --hf-accent: #2563eb;
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-frosted-glass-wipe {
+        position: relative;
+        width: 760px;
+        height: 428px;
+        overflow: hidden;
+        border-radius: 30px;
+        background: #111827;
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+      }
+      .hf-remocn-frosted-glass-wipe .scene {
+        position: absolute;
+        inset: 0;
+        display: grid;
+        place-items: center;
+        font-weight: 900;
+        font-size: 58px;
+        letter-spacing: -0.05em;
+        color: #fff;
+      }
+      .hf-remocn-frosted-glass-wipe .from {
+        background: linear-gradient(135deg, #111827, #374151);
+        transform: translate(var(--hf-from-x, 0px), var(--hf-from-y, 0px))
+          scale(var(--hf-from-scale, 1));
+        filter: blur(var(--hf-from-blur, 0px));
+      }
+      .hf-remocn-frosted-glass-wipe .to {
+        background: linear-gradient(135deg, #2563eb, #7c3aed);
+        transform: translate(var(--hf-to-x, 0px), var(--hf-to-y, 0px)) scale(var(--hf-to-scale, 1));
+        clip-path: inset(
+          var(--hf-clip-top, 0%) var(--hf-clip-right, 100%) var(--hf-clip-bottom, 0%)
+            var(--hf-clip-left, 0%)
+        );
+      }
+      .hf-remocn-frosted-glass-wipe .fx {
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
+        mix-blend-mode: screen;
+        transform: translateX(var(--hf-fx-x, -110%));
+      }
+      .hf-remocn-frosted-glass-wipe .rgb {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        opacity: var(--hf-rgb-opacity, 0);
+        background: linear-gradient(
+          90deg,
+          rgba(239, 68, 68, 0.35),
+          transparent,
+          rgba(34, 211, 238, 0.35)
+        );
+        transform: translateX(var(--hf-rgb-x, 0px));
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="frosted-glass-wipe-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-frosted-glass-wipe">
+          <div class="scene from">Before</div>
+          <div class="scene to">Frosted Glass Wipe</div>
+          <div class="fx"></div>
+          <div class="rgb"></div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-frosted-glass-wipe .to",
+          { "--hf-clip-right": "100%", "--hf-to-x": "60px", "--hf-to-scale": 1.04 },
+          {
+            "--hf-clip-right": "0%",
+            "--hf-to-x": "0px",
+            "--hf-to-scale": 1,
+            duration: 0.9,
+            ease: "power3.inOut",
+          },
+          startTime,
+        );
+        tl.to(
+          ".hf-remocn-frosted-glass-wipe .from",
+          {
+            "--hf-from-x": "-70px",
+            "--hf-from-scale": 0.96,
+            "--hf-from-blur": "5px",
+            duration: 0.9,
+            ease: "power3.inOut",
+          },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-frosted-glass-wipe .fx",
+          { "--hf-fx-x": "-110%" },
+          { "--hf-fx-x": "110%", duration: 0.58, ease: "power2.inOut" },
+          startTime + 0.18,
+        );
+        tl.fromTo(
+          ".hf-remocn-frosted-glass-wipe .rgb",
+          { "--hf-rgb-opacity": 0, "--hf-rgb-x": "-16px" },
+          {
+            "--hf-rgb-opacity": 1,
+            "--hf-rgb-x": "16px",
+            repeat: 3,
+            yoyo: true,
+            duration: 0.07,
+            ease: "steps(1)",
+          },
+          startTime + 0.32,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["frosted-glass-wipe-demo"] = tl;
+      </script>
+    </div>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "frosted-glass-wipe.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/frosted-glass-wipe/frosted-glass-wipe.html b/docs/public/catalog/components/frosted-glass-wipe/frosted-glass-wipe.html
new file mode 100644
index 0000000000..4e13d64771
--- /dev/null
+++ b/docs/public/catalog/components/frosted-glass-wipe/frosted-glass-wipe.html
@@ -0,0 +1,151 @@
+<!--
+  Frosted Glass Wipe - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result as a custom property
+  the CSS consumes. The timeline recipe below is untouched by them: it keeps
+  driving one clip edge, two offsets and one glare, and these decide which way
+  that clip and those offsets point and how hard the glare reads.
+
+    - direction (right | left, default right): which way the pane travels.
+      right wipes the incoming scene in from the left edge and sweeps the
+      glare rightwards, left mirrors every horizontal move.
+    - accent (blue | violet | green, default blue): colour family of the
+      incoming scene behind the glass.
+    - glare (soft | standard | intense, default standard): opacity of the
+      white band that sweeps across the pane.
+
+  On every default the result is identical to the original: a rightward wipe
+  onto a blue to violet scene under a 0.75 alpha glare.
+-->
+
+<div
+  class="hf-remocn-frosted-glass-wipe"
+  data-composition-variables='[
+    { "id": "direction", "type": "enum", "role": "style", "label": "Direction", "description": "Which way the glass pane travels: right wipes the incoming scene in from the left edge, left mirrors the whole move.", "default": "right", "options": [{ "value": "right", "label": "Right" }, { "value": "left", "label": "Left" }] },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Colour family of the incoming scene behind the glass.", "default": "blue", "options": [{ "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }, { "value": "green", "label": "Green" }] },
+    { "id": "glare", "type": "enum", "role": "style", "label": "Glare", "description": "Strength of the white glare that sweeps across the pane, from a faint sheen to a hard specular flash.", "default": "standard", "options": [{ "value": "soft", "label": "Soft" }, { "value": "standard", "label": "Standard" }, { "value": "intense", "label": "Intense" }] }
+  ]'
+>
+  <div class="scene from">Before</div>
+  <div class="scene to">Frosted Glass Wipe</div>
+  <div class="fx"></div>
+  <div class="rgb"></div>
+</div>
+
+<style>
+  .hf-remocn-frosted-glass-wipe {
+    --hf-accent: #2563eb;
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-frosted-glass-wipe {
+    position: relative;
+    width: 760px;
+    height: 428px;
+    overflow: hidden;
+    border-radius: 30px;
+    background: #111827;
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+  }
+  .hf-remocn-frosted-glass-wipe .scene {
+    position: absolute;
+    inset: 0;
+    display: grid;
+    place-items: center;
+    font-weight: 900;
+    font-size: 58px;
+    letter-spacing: -0.05em;
+    color: #fff;
+  }
+  .hf-remocn-frosted-glass-wipe .from {
+    background: linear-gradient(135deg, #111827, #374151);
+    transform: translate(calc(var(--hf-from-x, 0px) * var(--hf-axis, 1)), var(--hf-from-y, 0px))
+      scale(var(--hf-from-scale, 1));
+    filter: blur(var(--hf-from-blur, 0px));
+  }
+  .hf-remocn-frosted-glass-wipe .to {
+    background: linear-gradient(135deg, var(--hf-scene-a, #2563eb), var(--hf-scene-b, #7c3aed));
+    transform: translate(calc(var(--hf-to-x, 0px) * var(--hf-axis, 1)), var(--hf-to-y, 0px))
+      scale(var(--hf-to-scale, 1));
+    clip-path: inset(
+      var(--hf-clip-top, 0%) calc(var(--hf-clip-right, 100%) * var(--hf-wipe-right, 1))
+        var(--hf-clip-bottom, 0%)
+        calc(var(--hf-clip-left, 0%) + var(--hf-clip-right, 100%) * var(--hf-wipe-left, 0))
+    );
+  }
+  .hf-remocn-frosted-glass-wipe .fx {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+      90deg,
+      transparent,
+      rgba(255, 255, 255, var(--hf-fx-alpha, 0.75)),
+      transparent
+    );
+    mix-blend-mode: screen;
+    transform: translateX(calc(var(--hf-fx-x, -110%) * var(--hf-axis, 1)));
+  }
+  .hf-remocn-frosted-glass-wipe .rgb {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    opacity: var(--hf-rgb-opacity, 0);
+    background: linear-gradient(
+      90deg,
+      rgba(239, 68, 68, 0.35),
+      transparent,
+      rgba(34, 211, 238, 0.35)
+    );
+    transform: translateX(calc(var(--hf-rgb-x, 0px) * var(--hf-axis, 1)));
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var accents = {
+      blue: { a: "#2563eb", b: "#7c3aed" },
+      violet: { a: "#7c3aed", b: "#db2777" },
+      green: { a: "#047857", b: "#10b981" },
+    };
+    var glares = { soft: "0.4", standard: "0.75", intense: "1" };
+
+    var accent = accents[pick(accents, vars.accent, "blue")];
+    var glare = glares[pick(glares, vars.glare, "standard")];
+    var mirrored = vars.direction === "left";
+
+    var roots = document.querySelectorAll(".hf-remocn-frosted-glass-wipe");
+    for (var i = 0; i < roots.length; i += 1) {
+      var style = roots[i].style;
+      style.setProperty("--hf-axis", mirrored ? "-1" : "1");
+      style.setProperty("--hf-wipe-right", mirrored ? "0" : "1");
+      style.setProperty("--hf-wipe-left", mirrored ? "1" : "0");
+      style.setProperty("--hf-scene-a", accent.a);
+      style.setProperty("--hf-scene-b", accent.b);
+      style.setProperty("--hf-fx-alpha", glare);
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-frosted-glass-wipe .to', { '--hf-clip-right': '100%', '--hf-to-x': '60px', '--hf-to-scale': 1.04 }, { '--hf-clip-right': '0%', '--hf-to-x': '0px', '--hf-to-scale': 1, duration: 0.9, ease: 'power3.inOut' }, startTime); tl.to('.hf-remocn-frosted-glass-wipe .from', { '--hf-from-x': '-70px', '--hf-from-scale': 0.96, '--hf-from-blur': '5px', duration: 0.9, ease: 'power3.inOut' }, startTime); tl.fromTo('.hf-remocn-frosted-glass-wipe .fx', { '--hf-fx-x': '-110%' }, { '--hf-fx-x': '110%', duration: 0.58, ease: 'power2.inOut' }, startTime + 0.18); tl.fromTo('.hf-remocn-frosted-glass-wipe .rgb', { '--hf-rgb-opacity': 0, '--hf-rgb-x': '-16px' }, { '--hf-rgb-opacity': 1, '--hf-rgb-x': '16px', repeat: 3, yoyo: true, duration: 0.07, ease: 'steps(1)' }, startTime + 0.32);
+-->
diff --git a/docs/public/catalog/components/gesture-tap/demo.html b/docs/public/catalog/components/gesture-tap/demo.html
new file mode 100644
index 0000000000..482160d970
--- /dev/null
+++ b/docs/public/catalog/components/gesture-tap/demo.html
@@ -0,0 +1,95 @@
+<!doctype html>
+<!--
+  gesture-tap demo. This standalone composition mounts gesture-tap.html
+  through data-composition-src. All three non-default values prove that the
+  labels and accent flow through the elastic host mount.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Gesture Tap Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0b0c0e;
+      }
+
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 44%, #171a20 0%, #0b0c0e 72%);
+      }
+
+      .mount-card {
+        width: 50%;
+        height: 60%;
+        left: 25%;
+        top: 20%;
+        container-type: size;
+        overflow: hidden;
+        border: 1px solid rgba(255, 255, 255, 0.14);
+        border-radius: 32px;
+        background: #12151b;
+        box-shadow: 0 42px 100px rgba(0, 0, 0, 0.48);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="gesture-tap-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="3"
+      data-fps="30"
+    >
+      <div
+        id="gesture-tap-mount"
+        class="mount-card clip"
+        data-composition-id="gesture-tap"
+        data-composition-src="./gesture-tap.html"
+        data-variable-values='{"tap_label":"Connect","response_label":"Connected","accent":"violet"}'
+        data-start="0"
+        data-duration="3"
+        data-track-index="0"
+        data-width="960"
+        data-height="648"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["gesture-tap-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "gesture-tap.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/gesture-tap/gesture-tap.html b/docs/public/catalog/components/gesture-tap/gesture-tap.html
new file mode 100644
index 0000000000..7c974e65f2
--- /dev/null
+++ b/docs/public/catalog/components/gesture-tap/gesture-tap.html
@@ -0,0 +1,404 @@
+<!doctype html>
+<!--
+  gesture-tap: HyperFrames video primitive (ui-props / interaction / demonstrate)
+
+  Concept: a contact circle appears directly over a real pill button, presses
+  it, releases it into a new state, then lifts away. One mechanic, one job:
+  showing a decisive mobile tap response.
+
+  Variables:
+    - tap_label (string, default "Follow"): button label before release.
+    - response_label (string, default "Following"): button label after release.
+    - accent (enum, green | blue | violet, default green): response color.
+
+  Envelope: fixed IN and OUT with elastic HOLD only.
+    IN_BASE = 1.35s. The stage fades in, contact fades up at the target,
+    presses, then releases. The label swap, accent response, and pulse share
+    one release timestamp.
+    HOLD = max(0, D - IN - OUT). Only this phase stretches for longer mounts.
+    A barely visible card drift keeps the held state alive.
+    OUT_BASE = 0.55s. The completed mobile state fades cleanly.
+    If D is shorter than IN_BASE + OUT_BASE, IN and OUT compress together.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, carries no data-width or
+  data-height, and registers one paused timeline under the literal
+  gesture-tap key.
+-->
+<html
+  lang="en"
+  data-composition-id="gesture-tap"
+  data-composition-duration="3"
+  data-composition-variables='[
+    { "id": "tap_label", "type": "string", "role": "content", "label": "Tap label", "description": "Button label shown before the tap response.", "default": "Follow" },
+    { "id": "response_label", "type": "string", "role": "content", "label": "Response label", "description": "Button label shown when the tap releases.", "default": "Following" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Color used for the completed button state and response pulse.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Gesture Tap</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="gesture-tap" data-duration="3" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: #eef2ff;
+            font-family: Inter, system-ui, sans-serif;
+            pointer-events: none;
+          }
+
+          .gt-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+            background: radial-gradient(circle at 50% 44%, #1c2537 0%, #101521 68%);
+          }
+
+          .gt-stage {
+            width: 100cqw;
+            height: 100cqh;
+            display: grid;
+            place-items: center;
+            opacity: 0;
+            will-change: transform, opacity;
+          }
+
+          .gt-phone {
+            position: relative;
+            width: 46cqw;
+            height: 78cqh;
+            overflow: hidden;
+            border: 0.18cqmin solid rgba(255, 255, 255, 0.24);
+            border-radius: 5cqmin;
+            background: #f7f8fb;
+            box-shadow: 0 4cqh 10cqh rgba(2, 6, 23, 0.44);
+            color: #111827;
+            will-change: transform;
+          }
+
+          .gt-status {
+            height: 9cqh;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 0 4cqw;
+            border-bottom: 0.12cqmin solid #e5e7eb;
+            color: #64748b;
+            font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+            font-size: 2.1cqh;
+            font-weight: 700;
+            letter-spacing: 0.08em;
+            text-transform: uppercase;
+          }
+
+          .gt-signal {
+            width: 4.8cqw;
+            height: 1.4cqh;
+            border-radius: 999cqw;
+            background: #cbd5e1;
+          }
+
+          .gt-profile {
+            height: 50cqh;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            gap: 2.2cqh;
+            padding: 0 5cqw;
+            text-align: center;
+          }
+
+          .gt-avatar {
+            width: 12cqmin;
+            aspect-ratio: 1;
+            border-radius: 50%;
+            background: linear-gradient(145deg, #e2e8f0, #cbd5e1);
+            box-shadow: inset 0 0 0 0.8cqmin #ffffff;
+          }
+
+          .gt-name {
+            max-width: 34cqw;
+            overflow: hidden;
+            color: #0f172a;
+            font-size: 4.2cqh;
+            font-weight: 780;
+            line-height: 1.05;
+            letter-spacing: -0.035em;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          .gt-detail {
+            max-width: 34cqw;
+            color: #64748b;
+            font-size: 2.35cqh;
+            font-weight: 520;
+            line-height: 1.35;
+          }
+
+          .gt-button-shell {
+            position: relative;
+            width: 34cqw;
+            height: 11cqh;
+            margin: 0 auto;
+          }
+
+          .gt-button {
+            position: absolute;
+            inset: 0;
+            z-index: 2;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            overflow: hidden;
+            border: 0.16cqmin solid #273449;
+            border-radius: 999cqw;
+            background: #172033;
+            color: #f8fafc;
+            font: inherit;
+            font-size: 2.9cqh;
+            font-weight: 760;
+            letter-spacing: -0.01em;
+            transform-origin: 50% 50%;
+            will-change: transform, background-color, border-color;
+          }
+
+          .gt-button-label {
+            display: block;
+            max-width: 28cqw;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          .gt-response-pulse {
+            position: absolute;
+            inset: -1.7cqh -1.7cqw;
+            z-index: 1;
+            border: 0.28cqmin solid var(--gt-accent, #34d399);
+            border-radius: 999cqw;
+            opacity: 0;
+            will-change: transform, opacity;
+          }
+
+          .gt-contact {
+            position: absolute;
+            top: calc(50% - 7cqmin);
+            left: calc(50% - 7cqmin);
+            z-index: 4;
+            width: 14cqmin;
+            aspect-ratio: 1;
+            border: 0.24cqmin solid rgba(255, 255, 255, 0.78);
+            border-radius: 50%;
+            background: rgba(255, 255, 255, 0.34);
+            box-shadow:
+              inset 0 0 0 0.8cqmin rgba(255, 255, 255, 0.12),
+              0 1.2cqh 3cqh rgba(15, 23, 42, 0.28);
+            opacity: 0;
+            transform-origin: 50% 50%;
+            will-change: transform, opacity;
+          }
+        </style>
+
+        <div
+          id="gesture-tap-clip"
+          class="gt-clip clip"
+          data-start="0"
+          data-duration="3"
+          data-track-index="0"
+        >
+          <div class="gt-stage">
+            <article class="gt-phone" aria-label="Mobile profile card">
+              <div class="gt-status">
+                <span>Profile</span>
+                <span class="gt-signal" aria-hidden="true"></span>
+              </div>
+              <div class="gt-profile">
+                <div class="gt-avatar" aria-hidden="true"></div>
+                <div class="gt-name">Maya Chen</div>
+                <div class="gt-detail">Product designer sharing practical interaction notes.</div>
+              </div>
+              <div class="gt-button-shell">
+                <div class="gt-response-pulse" aria-hidden="true"></div>
+                <button class="gt-button" type="button" aria-pressed="false" tabindex="-1">
+                  <span class="gt-button-label"></span>
+                </button>
+                <div class="gt-contact" aria-hidden="true"></div>
+              </div>
+            </article>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".gt-stage");
+            var card = root.querySelector(".gt-phone");
+            var button = root.querySelector(".gt-button");
+            var label = root.querySelector(".gt-button-label");
+            var contact = root.querySelector(".gt-contact");
+            var pulse = root.querySelector(".gt-response-pulse");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var tapLabel = vars.tap_label == null ? "Follow" : String(vars.tap_label);
+            var responseLabel =
+              vars.response_label == null ? "Following" : String(vars.response_label);
+            var accentName =
+              vars.accent === "blue" || vars.accent === "violet" ? vars.accent : "green";
+            var accentColors = {
+              green: "var(--brand, #34d399)",
+              blue: "var(--accent, #60a5fa)",
+              violet: "var(--accent-2, #a78bfa)",
+            };
+            var accentColor = accentColors[accentName];
+
+            label.textContent = tapLabel;
+            button.setAttribute("aria-label", tapLabel);
+            root.style.setProperty("--gt-accent", accentColor);
+            // GSAP interpolates colors numerically, so tween values need the
+            // substituted color rather than the var() form.
+            accentColor = getComputedStyle(root).getPropertyValue("--gt-accent").trim();
+
+            var IN_BASE = 1.35;
+            var OUT_BASE = 0.55;
+            var STAGE_IN_BASE = 0.24;
+            var CONTACT_AT_BASE = 0.28;
+            var CONTACT_IN_BASE = 0.18;
+            var PRESS_AT_BASE = 0.54;
+            var PRESS_DURATION_BASE = 0.18;
+            var RELEASE_AT_BASE = 0.72;
+            var RELEASE_DURATION_BASE = 0.28;
+            var CONTACT_OUT_BASE = 0.34;
+            var PULSE_DURATION_BASE = 0.56;
+
+            var parsedDuration = Number.parseFloat(root.dataset.duration);
+            var duration =
+              Number.isFinite(parsedDuration) && parsedDuration > 0 ? parsedDuration : 3;
+            var fixedBase = IN_BASE + OUT_BASE;
+            var phaseScale = duration < fixedBase ? duration / fixedBase : 1;
+            var IN = IN_BASE * phaseScale;
+            var OUT = OUT_BASE * phaseScale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var HOLD_START = IN;
+            var OUT_START = IN + HOLD;
+            var STAGE_IN = STAGE_IN_BASE * phaseScale;
+            var CONTACT_AT = CONTACT_AT_BASE * phaseScale;
+            var CONTACT_IN = CONTACT_IN_BASE * phaseScale;
+            var PRESS_AT = PRESS_AT_BASE * phaseScale;
+            var PRESS_DURATION = PRESS_DURATION_BASE * phaseScale;
+            var RELEASE_AT = RELEASE_AT_BASE * phaseScale;
+            var RELEASE_DURATION = RELEASE_DURATION_BASE * phaseScale;
+            var CONTACT_OUT = CONTACT_OUT_BASE * phaseScale;
+            var PULSE_DURATION = PULSE_DURATION_BASE * phaseScale;
+
+            var tl = gsap.timeline({ paused: true });
+
+            tl.to(stage, { opacity: 1, duration: STAGE_IN, ease: "power2.out" }, 0);
+
+            // IN: the contact appears at the target. No x or y tween precedes the press.
+            tl.fromTo(
+              contact,
+              { opacity: 0, scale: 0.82 },
+              { opacity: 0.68, scale: 1, duration: CONTACT_IN, ease: "power2.out" },
+              CONTACT_AT,
+            );
+            tl.to(
+              button,
+              {
+                scale: 0.93,
+                backgroundColor: "#26324a",
+                duration: PRESS_DURATION,
+                ease: "power4.in",
+              },
+              PRESS_AT,
+            );
+            tl.to(contact, { scale: 0.78, duration: PRESS_DURATION, ease: "power4.in" }, PRESS_AT);
+
+            // Release owns the response. Label, state, accent fill, and pulse
+            // all begin at RELEASE_AT so the UI answers on the release frame.
+            tl.set(label, { innerText: responseLabel }, RELEASE_AT);
+            tl.set(
+              button,
+              { attr: { "aria-label": responseLabel, "aria-pressed": "true" } },
+              RELEASE_AT,
+            );
+            tl.to(
+              button,
+              {
+                scale: 1,
+                backgroundColor: accentColor,
+                borderColor: accentColor,
+                color: "#071015",
+                duration: RELEASE_DURATION,
+                ease: "back.out(1.7)",
+              },
+              RELEASE_AT,
+            );
+            tl.set(pulse, { opacity: 0.58, scale: 0.76 }, RELEASE_AT);
+            tl.to(
+              pulse,
+              { opacity: 0, scale: 1.14, duration: PULSE_DURATION, ease: "power2.out" },
+              RELEASE_AT,
+            );
+            tl.to(
+              contact,
+              {
+                opacity: 0,
+                scale: 1.04,
+                y: "-5cqh",
+                duration: CONTACT_OUT,
+                ease: "power2.in",
+              },
+              RELEASE_AT,
+            );
+
+            // HOLD: only this phase stretches. One slow yoyo returns the card
+            // to its resting position exactly when OUT starts.
+            if (HOLD > 0) {
+              tl.to(
+                card,
+                {
+                  y: "-0.6cqh",
+                  duration: HOLD / 2,
+                  ease: "sine.inOut",
+                  yoyo: true,
+                  repeat: 1,
+                },
+                HOLD_START,
+              );
+            }
+
+            // OUT: the completed state remains intact while the stage exits.
+            tl.to(stage, { opacity: 0, y: "-1.4cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["gesture-tap"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/glass-code-block/demo.html b/docs/public/catalog/components/glass-code-block/demo.html
new file mode 100644
index 0000000000..94cc48d9b1
--- /dev/null
+++ b/docs/public/catalog/components/glass-code-block/demo.html
@@ -0,0 +1,159 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Glass Code Block - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+        transform: scale(0.70);
+        transform-origin: center center;
+      }
+      .hf-remocn-glass-code-block {
+        --hf-accent: #2563eb;
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-glass-code-block {
+        width: 760px;
+        border-radius: 24px;
+        overflow: hidden;
+        background: #0f172a;
+        color: #dbeafe;
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+      }
+      .hf-remocn-glass-code-block .chrome {
+        height: 48px;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 0 18px;
+        background: #111827;
+        color: #94a3b8;
+        font-size: 15px;
+        font-weight: 500;
+        letter-spacing: 0.01em;
+      }
+      .hf-remocn-glass-code-block .dot {
+        width: 11px;
+        height: 11px;
+        border-radius: 999px;
+        background: #ef4444;
+        box-shadow:
+          18px 0 #f59e0b,
+          36px 0 #22c55e;
+      }
+      .hf-remocn-glass-code-block .body {
+        display: grid;
+        grid-template-columns: 210px 1fr;
+        min-height: 340px;
+      }
+      .hf-remocn-glass-code-block .files {
+        padding: 22px;
+        border-right: 1px solid rgba(148, 163, 184, 0.18);
+        color: #94a3b8;
+        font-size: 14px;
+        line-height: 1.9;
+      }
+      .hf-remocn-glass-code-block .editor {
+        padding: 22px;
+        display: grid;
+        gap: 12px;
+      }
+      .hf-remocn-glass-code-block .line {
+        display: block;
+        height: 16px;
+        border-radius: 999px;
+        background: linear-gradient(90deg, #38bdf8, #a78bfa);
+        transform: scaleX(var(--hf-line, 1));
+        transform-origin: left center;
+        opacity: var(--hf-line-opacity, 1);
+      }
+      .hf-remocn-glass-code-block .terminal {
+        padding: 18px 22px 24px;
+        border-top: 1px solid rgba(148, 163, 184, 0.18);
+        color: #86efac;
+        min-height: 78px;
+        font-size: 15px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="glass-code-block-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-glass-code-block">
+          <div class="chrome"><span class="dot"></span><span>Glass Code Block</span></div>
+          <div class="body">
+            <div class="files">index.html<br />style.css<br />timeline.js</div>
+            <div class="editor">
+              <span class="line" style="width: 92%"></span
+              ><span class="line" style="width: 72%"></span
+              ><span class="line" style="width: 84%"></span
+              ><span class="line" style="width: 58%"></span
+              ><span class="line" style="width: 78%"></span>
+            </div>
+          </div>
+          <div class="terminal">$ hyperframes render --skill=glass-code-block</div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-glass-code-block .line",
+          { "--hf-line": 0, "--hf-line-opacity": 0 },
+          {
+            "--hf-line": 1,
+            "--hf-line-opacity": 1,
+            duration: 0.24,
+            stagger: 0.08,
+            ease: "power2.out",
+          },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-glass-code-block .terminal",
+          { opacity: 0, y: 16 },
+          { opacity: 1, y: 0, duration: 0.34, ease: "power2.out" },
+          startTime + 0.48,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["glass-code-block-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/glass-code-block/glass-code-block.html b/docs/public/catalog/components/glass-code-block/glass-code-block.html
new file mode 100644
index 0000000000..377ae96f76
--- /dev/null
+++ b/docs/public/catalog/components/glass-code-block/glass-code-block.html
@@ -0,0 +1,92 @@
+<!--
+  Glass Code Block - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-glass-code-block">
+  <div class="chrome"><span class="dot"></span><span>Glass Code Block</span></div>
+  <div class="body">
+    <div class="files">index.html<br />style.css<br />timeline.js</div>
+    <div class="editor">
+      <span class="line" style="width: 92%"></span><span class="line" style="width: 72%"></span
+      ><span class="line" style="width: 84%"></span><span class="line" style="width: 58%"></span
+      ><span class="line" style="width: 78%"></span>
+    </div>
+  </div>
+  <div class="terminal">$ hyperframes render --skill=glass-code-block</div>
+</div>
+
+<style>
+  .hf-remocn-glass-code-block {
+    --hf-accent: #2563eb;
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-glass-code-block {
+    width: 760px;
+    border-radius: 24px;
+    overflow: hidden;
+    background: #0f172a;
+    color: #dbeafe;
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  }
+  .hf-remocn-glass-code-block .chrome {
+    height: 48px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 0 18px;
+    background: #111827;
+    color: #94a3b8;
+  }
+  .hf-remocn-glass-code-block .dot {
+    width: 11px;
+    height: 11px;
+    border-radius: 999px;
+    background: #ef4444;
+    box-shadow:
+      18px 0 #f59e0b,
+      36px 0 #22c55e;
+  }
+  .hf-remocn-glass-code-block .body {
+    display: grid;
+    grid-template-columns: 210px 1fr;
+    min-height: 340px;
+  }
+  .hf-remocn-glass-code-block .files {
+    padding: 22px;
+    border-right: 1px solid rgba(148, 163, 184, 0.18);
+    color: #94a3b8;
+  }
+  .hf-remocn-glass-code-block .editor {
+    padding: 22px;
+    display: grid;
+    gap: 12px;
+  }
+  .hf-remocn-glass-code-block .line {
+    display: block;
+    height: 16px;
+    border-radius: 999px;
+    background: linear-gradient(90deg, #38bdf8, #a78bfa);
+    transform: scaleX(var(--hf-line, 1));
+    transform-origin: left center;
+    opacity: var(--hf-line-opacity, 1);
+  }
+  .hf-remocn-glass-code-block .terminal {
+    padding: 18px 22px 24px;
+    border-top: 1px solid rgba(148, 163, 184, 0.18);
+    color: #86efac;
+    min-height: 78px;
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-glass-code-block .line', { '--hf-line': 0, '--hf-line-opacity': 0 }, { '--hf-line': 1, '--hf-line-opacity': 1, duration: 0.24, stagger: 0.08, ease: 'power2.out' }, startTime); tl.fromTo('.hf-remocn-glass-code-block .terminal', { opacity: 0, y: 16 }, { opacity: 1, y: 0, duration: 0.34, ease: 'power2.out' }, startTime + 0.48);
+-->
diff --git a/docs/public/catalog/components/gloss-sweep/demo.html b/docs/public/catalog/components/gloss-sweep/demo.html
new file mode 100644
index 0000000000..004df05879
--- /dev/null
+++ b/docs/public/catalog/components/gloss-sweep/demo.html
@@ -0,0 +1,93 @@
+<!doctype html>
+<!--
+  gloss-sweep demo. This standalone composition mounts gloss-sweep.html with
+  non-default values for all three variables. The wrapper adds no motion.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Gloss Sweep Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0b0c0e;
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --font-display: Inter, system-ui, sans-serif;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0b0c0e;
+      }
+
+      .mount-card {
+        width: 46%;
+        height: 38%;
+        left: 27%;
+        top: 31%;
+        container-type: size;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="gloss-sweep-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="2.5"
+      data-fps="30"
+    >
+      <div
+        id="gloss-sweep-mount"
+        class="mount-card clip"
+        data-composition-id="gloss-sweep"
+        data-composition-src="./gloss-sweep.html"
+        data-variable-values='{"text":"Studio","accent":"violet","sweep_angle":38}'
+        data-start="0"
+        data-duration="2.5"
+        data-track-index="0"
+        data-width="883"
+        data-height="410"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["gloss-sweep-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "gloss-sweep.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/gloss-sweep/gloss-sweep.html b/docs/public/catalog/components/gloss-sweep/gloss-sweep.html
new file mode 100644
index 0000000000..b0e7408eaa
--- /dev/null
+++ b/docs/public/catalog/components/gloss-sweep/gloss-sweep.html
@@ -0,0 +1,213 @@
+<!doctype html>
+<!--
+  gloss-sweep: HyperFrames video primitive (celebrations / payoff)
+
+  Concept: a compact card lands with a restrained slam, receives one
+  diagonal specular sweep, then holds perfectly still. The gloss is the
+  whole celebration. There is no pulse, confetti, drift, or exit.
+
+  Variables:
+    - text (string, default "Pro"): the card label.
+    - accent (green | blue | violet, default green): the card color.
+    - sweep_angle (number, default 25): gloss angle in degrees.
+
+  Envelope (fixed IN, elastic HOLD, no OUT):
+    IN_BASE  = 1.35s, small landing followed by one gloss sweep
+    HOLD     = elastic = max(0, D - IN_BASE), completely still
+    OUT_BASE = 0s, the card remains in its confident resting state
+    If D is shorter than IN_BASE, the landing and sweep compress together.
+
+  Mount contract: the runtime clones only this template. #root fills the
+  host box, establishes the container query basis, has no data-width or
+  data-height, and registers one paused timeline under the hardcoded
+  gloss-sweep id.
+-->
+<html
+  lang="en"
+  data-composition-id="gloss-sweep"
+  data-composition-duration="2.5"
+  data-composition-variables='[
+    { "id": "text", "type": "string", "role": "content", "label": "Label", "description": "Text displayed on the card.", "default": "Pro" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Color treatment for the card.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "sweep_angle", "type": "number", "role": "style", "label": "Sweep angle", "description": "Angle of the specular gloss in degrees.", "default": 25, "min": -60, "max": 60, "step": 1, "unit": "deg" }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Gloss Sweep</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="gloss-sweep" data-duration="2.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .gs-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+          }
+
+          .gs-card {
+            position: relative;
+            display: grid;
+            min-width: 48cqw;
+            max-width: 78cqw;
+            min-height: 34cqh;
+            padding: 7cqh 9cqw;
+            place-items: center;
+            overflow: hidden;
+            border: 0.22cqmin solid var(--gs-edge);
+            border-radius: 5cqmin;
+            background: linear-gradient(145deg, var(--gs-surface-bright), var(--gs-surface));
+            box-shadow:
+              0 3cqh 8cqh color-mix(in srgb, var(--bg, #05070d) 62%, transparent),
+              inset 0 0 0 0.12cqmin color-mix(in srgb, white 12%, transparent);
+            transform-origin: 50% 50%;
+            will-change: transform;
+          }
+
+          .gs-label {
+            position: relative;
+            z-index: 1;
+            max-width: 62cqw;
+            overflow: hidden;
+            color: var(--gs-label);
+            font-size: clamp(8cqmin, 15cqmin, 18cqmin);
+            font-weight: 780;
+            line-height: 1;
+            letter-spacing: -0.04em;
+            text-align: center;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          .gs-gloss {
+            --gs-sweep: -30;
+            --gs-angle: 25deg;
+            position: absolute;
+            inset: 0;
+            z-index: 2;
+            opacity: 0;
+            background: linear-gradient(
+              var(--gs-angle),
+              transparent calc(var(--gs-sweep) * 1% - 22%),
+              rgba(255, 255, 255, 0.06) calc(var(--gs-sweep) * 1% - 9%),
+              rgba(255, 255, 255, 0.72) calc(var(--gs-sweep) * 1%),
+              rgba(255, 255, 255, 0.08) calc(var(--gs-sweep) * 1% + 9%),
+              transparent calc(var(--gs-sweep) * 1% + 22%)
+            );
+            pointer-events: none;
+          }
+        </style>
+
+        <div
+          id="gloss-sweep-clip"
+          class="gs-clip clip"
+          data-start="0"
+          data-duration="2.5"
+          data-track-index="0"
+        >
+          <div class="gs-card">
+            <span class="gs-label"></span>
+            <span class="gs-gloss" aria-hidden="true"></span>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var card = root.querySelector(".gs-card");
+            var label = root.querySelector(".gs-label");
+            var gloss = root.querySelector(".gs-gloss");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var accents = {
+              green: {
+                surface: "#123b2c",
+                surfaceBright: "#1a513c",
+                edge: "#39d98a",
+                label: "#ecfff5",
+              },
+              blue: {
+                surface: "#123554",
+                surfaceBright: "#19486f",
+                edge: "#4db5ff",
+                label: "#eef8ff",
+              },
+              violet: {
+                surface: "#31205b",
+                surfaceBright: "#463078",
+                edge: "#a98cff",
+                label: "#f7f2ff",
+              },
+            };
+            var accent = accents[vars.accent] ? vars.accent : "green";
+            var palette = accents[accent];
+            var text = vars.text == null ? "Pro" : String(vars.text);
+            var angleValue = Number(vars.sweep_angle);
+            var sweepAngle = Number.isFinite(angleValue)
+              ? Math.max(-60, Math.min(60, angleValue))
+              : 25;
+
+            label.textContent = text;
+            card.style.setProperty("--gs-surface", palette.surface);
+            card.style.setProperty("--gs-surface-bright", palette.surfaceBright);
+            card.style.setProperty("--gs-edge", palette.edge);
+            card.style.setProperty("--gs-label", palette.label);
+            gloss.style.setProperty("--gs-angle", sweepAngle + "deg");
+
+            var IN_BASE = 1.35;
+            var LAND_BASE = 0.5;
+            var SWEEP_AT_BASE = 0.65;
+            var SWEEP_BASE = 0.7;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "2.5"));
+            var scale = duration < IN_BASE ? duration / IN_BASE : 1;
+            var LAND = LAND_BASE * scale;
+            var SWEEP_AT = SWEEP_AT_BASE * scale;
+            var SWEEP = SWEEP_BASE * scale;
+
+            var tl = gsap.timeline({ paused: true });
+
+            tl.fromTo(
+              card,
+              { y: "-5cqh", scale: 1.06 },
+              { y: "0cqh", scale: 1, duration: LAND, ease: "expo.out" },
+              0,
+            );
+            tl.set(gloss, { opacity: 1, "--gs-sweep": -30 }, SWEEP_AT);
+            tl.to(gloss, { "--gs-sweep": 130, duration: SWEEP, ease: "power2.out" }, SWEEP_AT);
+            tl.set(gloss, { opacity: 0 }, SWEEP_AT + SWEEP);
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines["gloss-sweep"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/grade-split-reveal/__hf-variables-preview.html b/docs/public/catalog/components/grade-split-reveal/__hf-variables-preview.html
new file mode 100644
index 0000000000..7afa72d916
--- /dev/null
+++ b/docs/public/catalog/components/grade-split-reveal/__hf-variables-preview.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Grade Split Reveal variables preview</title>
+    <style>
+      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #0b0c0e; }
+      #hf-vars-root { position: relative; width: 1920px; height: 1080px; }
+      #hf-vars-mount { position: absolute; inset: 0; display: grid; place-items: center; }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  </head>
+  <body>
+    <div id="hf-vars-root" data-composition-id="grade-split-reveal-variables-preview" data-start="0" data-width="1920" data-height="1080" data-duration="5" data-fps="30">
+      <div id="hf-vars-mount" class="clip" data-composition-id="grade-split-reveal" data-composition-src="./grade-split-reveal.html" data-start="0" data-duration="5" data-track-index="0" data-width="1920" data-height="1080"></div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["grade-split-reveal-variables-preview"] = gsap.timeline({ paused: true });
+    </script>
+<script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "grade-split-reveal.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/grade-split-reveal/demo.html b/docs/public/catalog/components/grade-split-reveal/demo.html
new file mode 100644
index 0000000000..a18d861e8d
--- /dev/null
+++ b/docs/public/catalog/components/grade-split-reveal/demo.html
@@ -0,0 +1,366 @@
+<!doctype html>
+<!--
+  grade-split-reveal: the grade arrives as a moving edge.
+
+  Two copies of the same plate sit exactly on top of each other. The lower copy carries a
+  flat, milky look, the way ungraded footage comes off a camera. The upper copy carries the
+  finished warm cinematic look. A hard edge sweeps across the upper copy, so the graded
+  version eats the flat one from left to right and you read both halves of the same picture
+  at the same time. It pauses in the middle long enough for the eye to compare, then commits
+  and takes the whole frame.
+
+  Both looks are real HyperFrames color grading, not a CSS filter. The runtime hands each
+  image to a WebGL shader and swaps in a graded canvas, and the render pipeline redraws the
+  same shader, so what you preview is what encodes. Color grading is media only: it applies
+  to <video> and <img>, never to text, SVG or ordinary DOM.
+
+  The plate here is a procedural SVG scene built in this file, so the primitive is
+  deterministic and ships nothing licensed. Replace PLATE_SRC with your own photo or a video
+  poster and the whole move still works. Swap AFTER_GRADE for any preset id or hand written
+  adjust block.
+
+  The edge itself is never animated with clip-path. The upper copy lives in a wrapper with
+  overflow hidden and the wrapper's width is what moves, so the sweep is one plain numeric
+  tween that seeks perfectly and never re-parses a string.
+
+  Every ease is a cubic bezier written out by hand and solved in this file. No preset is used
+  anywhere.
+
+  Mount contract: everything lives inside <template>, styles and scripts included, and the
+  scripts sit INSIDE the composition root. A host clones template content into its own mount
+  and only runs scripts found inside the root; markup left outside is copied without its
+  behaviour, which renders a black card with no timeline at all.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Grade Split Reveal - Demo</title>
+  </head>
+  <body>
+    <template>
+      <div
+        id="root"
+        class="clip gs-root"
+        data-composition-id="grade-split-reveal"
+        data-duration="6"
+        data-fps="30"
+      >
+        <style>
+          .gs-root {
+            --ink: #f6f4ef;
+            --rule: rgba(246, 244, 239, 0.55);
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            background: #0b0b0d;
+            pointer-events: none;
+          }
+          #gs-plate {
+            position: absolute;
+            overflow: hidden;
+            border-radius: 10px;
+            background: #08080a;
+            box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
+          }
+          .gs-layer {
+            position: absolute;
+            left: 0;
+            top: 0;
+            height: 100%;
+            overflow: hidden;
+          }
+          .gs-layer img {
+            display: block;
+            object-fit: cover;
+          }
+          #gs-edge {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 2px;
+            height: 100%;
+            background: var(--ink);
+            box-shadow: 0 0 18px rgba(0, 0, 0, 0.7);
+          }
+          .gs-tag {
+            position: absolute;
+            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+            font-weight: 700;
+            text-transform: uppercase;
+            letter-spacing: 0.16em;
+            color: var(--ink);
+            opacity: 0;
+            white-space: nowrap;
+            text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85);
+          }
+          .gs-tag::before {
+            content: "";
+            position: absolute;
+            left: 0;
+            top: -0.7em;
+            width: 1.8em;
+            height: 2px;
+            background: var(--rule);
+          }
+          #gs-tag-before::before {
+            left: auto;
+            right: 0;
+          }
+        </style>
+
+        <div id="gs-plate">
+          <div class="gs-layer" id="gs-before"><img id="gs-img-before" alt="" /></div>
+          <div class="gs-layer" id="gs-after"><img id="gs-img-after" alt="" /></div>
+          <div id="gs-edge"></div>
+          <div class="gs-tag" id="gs-tag-before">Ungraded</div>
+          <div class="gs-tag" id="gs-tag-after">Warm Cinematic</div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            gsap.defaults({ immediateRender: false });
+
+            /* Cubic bezier solved by hand. Newton first, bisection when the slope dies. */
+            function bezier(x1, y1, x2, y2) {
+              function curve(t, a1, a2) {
+                var A = 1 - 3 * a2 + 3 * a1;
+                var B = 3 * a2 - 6 * a1;
+                var C = 3 * a1;
+                return ((A * t + B) * t + C) * t;
+              }
+              function slope(t, a1, a2) {
+                var A = 1 - 3 * a2 + 3 * a1;
+                var B = 3 * a2 - 6 * a1;
+                var C = 3 * a1;
+                return (3 * A * t + 2 * B) * t + C;
+              }
+              return function (p) {
+                if (p <= 0) return 0;
+                if (p >= 1) return 1;
+                var t = p;
+                for (var i = 0; i < 8; i++) {
+                  var d = slope(t, x1, x2);
+                  if (Math.abs(d) < 1e-6) break;
+                  var e = curve(t, x1, x2) - p;
+                  if (Math.abs(e) < 1e-7) return curve(t, y1, y2);
+                  t -= e / d;
+                }
+                var lo = 0;
+                var hi = 1;
+                t = p;
+                for (var j = 0; j < 24; j++) {
+                  var x = curve(t, x1, x2);
+                  if (Math.abs(x - p) < 1e-7) break;
+                  if (x > p) hi = t;
+                  else lo = t;
+                  t = (lo + hi) / 2;
+                }
+                return curve(t, y1, y2);
+              };
+            }
+
+            /* Plate settles, never bounces. */
+            var EASE_PLATE = bezier(0.16, 0.84, 0.24, 1);
+            /* The sweep loiters, then finishes fast, the way a hand drags a compare slider. */
+            var EASE_WIPE = bezier(0.62, 0, 0.14, 1);
+            /* The commit is decisive from the first frame. */
+            var EASE_COMMIT = bezier(0.4, 0, 0.05, 1);
+            var EASE_TAG = bezier(0.22, 0.8, 0.3, 1);
+            var EASE_FADE = bezier(0.4, 0, 0.7, 1);
+
+            var DUR = 6;
+
+            /* ---- the plate. Swap PLATE_SRC for your own photo or video poster. ---- */
+            var SCENE =
+              /* width and height are not decoration. An SVG served to an <img> with only a
+                 viewBox has no intrinsic size, and a texture upload from it comes back
+                 empty, so the shader grades a blank plate. */
+              '<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="900" viewBox="0 0 1600 900">' +
+              "<defs>" +
+              '<linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">' +
+              '<stop offset="0" stop-color="#1b2340"/><stop offset="0.42" stop-color="#5b4a63"/>' +
+              '<stop offset="0.68" stop-color="#c8794a"/><stop offset="0.78" stop-color="#f0a75c"/>' +
+              '<stop offset="1" stop-color="#f7c988"/></linearGradient>' +
+              '<linearGradient id="sea" x1="0" y1="0" x2="0" y2="1">' +
+              '<stop offset="0" stop-color="#c98a55"/><stop offset="0.3" stop-color="#6a5560"/>' +
+              '<stop offset="1" stop-color="#1a1d30"/></linearGradient>' +
+              '<radialGradient id="glow" cx="0.62" cy="0.74" r="0.42">' +
+              '<stop offset="0" stop-color="#ffdfa8" stop-opacity="0.9"/>' +
+              '<stop offset="1" stop-color="#ffdfa8" stop-opacity="0"/></radialGradient>' +
+              "</defs>" +
+              '<rect width="1600" height="900" fill="url(#sky)"/>' +
+              '<rect width="1600" height="900" fill="url(#glow)"/>' +
+              '<circle cx="992" cy="660" r="58" fill="#fff0cd"/>' +
+              '<path d="M0 640 L250 578 L430 618 L640 552 L820 606 L1010 566 L1240 620 L1430 578 L1600 616 L1600 700 L0 700 Z" fill="#3a2f45"/>' +
+              '<path d="M0 668 L210 634 L400 664 L610 622 L840 662 L1080 630 L1330 668 L1600 638 L1600 700 L0 700 Z" fill="#2a2337"/>' +
+              '<rect y="700" width="1600" height="200" fill="url(#sea)"/>' +
+              '<rect x="962" y="700" width="60" height="200" fill="#ffdfa8" opacity="0.42"/>' +
+              '<rect x="978" y="700" width="28" height="200" fill="#fff3d4" opacity="0.5"/>' +
+              '<g fill="#f4e3c2" opacity="0.34">' +
+              '<rect x="120" y="742" width="1360" height="3"/><rect x="240" y="786" width="1120" height="3"/>' +
+              '<rect x="60" y="828" width="1480" height="4"/><rect x="300" y="868" width="1000" height="4"/></g>' +
+              '<g fill="#e8d3b4" opacity="0.5">' +
+              '<rect x="180" y="330" width="420" height="7" rx="3"/><rect x="300" y="372" width="260" height="6" rx="3"/>' +
+              '<rect x="1010" y="286" width="380" height="7" rx="3"/><rect x="1130" y="326" width="220" height="6" rx="3"/></g>' +
+              '<path d="M0 760 L118 700 L268 760 L268 900 L0 900 Z" fill="#12121e"/>' +
+              '<path d="M1600 742 L1462 700 L1318 742 L1318 900 L1600 900 Z" fill="#0f0f1a"/>' +
+              "</svg>";
+            var PLATE_SRC = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(SCENE);
+
+            /* ---- the two looks. Both are real color grading, applied by the shader. ---- */
+            var BEFORE_GRADE = {
+              preset: "neutral",
+              intensity: 1,
+              adjust: {
+                exposure: 0.1,
+                contrast: -0.42,
+                highlights: -0.1,
+                shadows: 0.24,
+                whites: -0.14,
+                blacks: 0.3,
+                temperature: -0.06,
+                vibrance: -0.22,
+                saturation: -0.34,
+              },
+              colorSpace: "rec709",
+            };
+            var AFTER_GRADE = {
+              preset: "deep-contrast",
+              intensity: 1,
+              adjust: {
+                exposure: 0.02,
+                contrast: 0.28,
+                highlights: -0.16,
+                shadows: 0.08,
+                whites: 0.06,
+                blacks: -0.16,
+                temperature: 0.18,
+                tint: -0.04,
+                vibrance: 0.26,
+                saturation: 0.1,
+              },
+              details: { vignette: 0.3, vignetteFeather: 0.7, grain: 0.1, grainSize: 0.3 },
+              colorSpace: "rec709",
+            };
+
+            var root = document.getElementById("gs-plate").parentElement;
+            var FRAME_W = root.clientWidth || 1920;
+            var FRAME_H = root.clientHeight || 1080;
+
+            /* The plate keeps the frame's own shape, inset by a constant margin, so one file
+               reads correctly in landscape, portrait and square. */
+            var INSET = Math.min(FRAME_W, FRAME_H) * 0.085;
+            var PW = Math.round(FRAME_W - INSET * 2);
+            var PH = Math.round(FRAME_H - INSET * 2);
+
+            var plate = document.getElementById("gs-plate");
+            plate.style.left = INSET + "px";
+            plate.style.top = INSET + "px";
+            plate.style.width = PW + "px";
+            plate.style.height = PH + "px";
+
+            var before = document.getElementById("gs-before");
+            var after = document.getElementById("gs-after");
+            var edge = document.getElementById("gs-edge");
+            var tagBefore = document.getElementById("gs-tag-before");
+            var tagAfter = document.getElementById("gs-tag-after");
+
+            /* Both images are laid out at the full plate width. Only the wrapper narrows, so
+               the shader canvas the runtime drops in keeps its measured box and the edge is a
+               clean crop rather than a squeeze. */
+            [
+              [document.getElementById("gs-img-before"), BEFORE_GRADE],
+              [document.getElementById("gs-img-after"), AFTER_GRADE],
+            ].forEach(function (pair) {
+              pair[0].style.width = PW + "px";
+              pair[0].style.height = PH + "px";
+              pair[0].setAttribute("data-color-grading", JSON.stringify(pair[1]));
+              pair[0].src = PLATE_SRC;
+            });
+            before.style.width = PW + "px";
+
+            var TAG = Math.max(11, Math.round(Math.min(FRAME_W, FRAME_H) * 0.019));
+            var PAD = Math.round(INSET * 0.62);
+            [tagBefore, tagAfter].forEach(function (t) {
+              t.style.fontSize = TAG + "px";
+              t.style.bottom = PAD + "px";
+            });
+            /* The graded copy grows from the left, so its label sits on the left. Putting
+               these the other way round labels each half with the look it is not. */
+            tagAfter.style.left = PAD + "px";
+            tagBefore.style.right = PAD + "px";
+            tagBefore.style.textAlign = "right";
+
+            /* Rest state lives outside the timeline so frame zero is already correct. */
+            /* The plate is lit at frame zero and arrives on scale alone. Fading it up from
+               nothing would leave the first frames of the clip literally blank, which reads
+               as a broken card in any grid of thumbnails. */
+            gsap.set(plate, { transformOrigin: "50% 50%", scale: 1.05, opacity: 1 });
+            gsap.set(after, { width: 0 });
+            gsap.set(edge, { x: 0, opacity: 0 });
+            gsap.set([tagBefore, tagAfter], { opacity: 0, y: 10 });
+
+            var tl = gsap.timeline({ paused: true });
+
+            /* The plate arrives. */
+            tl.fromTo(plate, { scale: 1.05 }, { scale: 1, duration: 0.62, ease: EASE_PLATE }, 0);
+            tl.fromTo(
+              tagBefore,
+              { opacity: 0, y: 10 },
+              { opacity: 0.82, y: 0, duration: 0.34, ease: EASE_TAG },
+              0.36,
+            );
+
+            /* The grade sweeps in and stops short, so both halves are readable together. */
+            var HOLD = Math.round(PW * 0.62);
+            tl.fromTo(after, { width: 0 }, { width: HOLD, duration: 1.6, ease: EASE_WIPE }, 0.7);
+            tl.fromTo(edge, { x: 0 }, { x: HOLD, duration: 1.6, ease: EASE_WIPE }, 0.7);
+            tl.fromTo(edge, { opacity: 0 }, { opacity: 1, duration: 0.2, ease: EASE_FADE }, 0.7);
+            tl.fromTo(
+              tagAfter,
+              { opacity: 0, y: 10 },
+              { opacity: 1, y: 0, duration: 0.34, ease: EASE_TAG },
+              1.16,
+            );
+
+            /* Then it commits and takes the whole plate. */
+            tl.fromTo(after, { width: HOLD }, { width: PW, duration: 1.2, ease: EASE_COMMIT }, 3.1);
+            tl.fromTo(edge, { x: HOLD }, { x: PW, duration: 1.2, ease: EASE_COMMIT }, 3.1);
+            tl.fromTo(
+              tagBefore,
+              { opacity: 0.82 },
+              { opacity: 0, duration: 0.5, ease: EASE_FADE },
+              3.1,
+            );
+            tl.fromTo(edge, { opacity: 1 }, { opacity: 0, duration: 0.3, ease: EASE_FADE }, 4.05);
+            /* A small push in lands the finished look instead of just stopping on it. */
+            tl.fromTo(plate, { scale: 1 }, { scale: 1.03, duration: 1.5, ease: EASE_COMMIT }, 3.1);
+
+            tl.set({}, {}, DUR);
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines["grade-split-reveal"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "grade-split-reveal.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/grade-split-reveal/grade-split-reveal.html b/docs/public/catalog/components/grade-split-reveal/grade-split-reveal.html
new file mode 100644
index 0000000000..2fa33b68d6
--- /dev/null
+++ b/docs/public/catalog/components/grade-split-reveal/grade-split-reveal.html
@@ -0,0 +1,446 @@
+<!doctype html>
+<!--
+  grade-split-reveal: the grade arrives as a moving edge.
+
+  Two copies of the same plate sit exactly on top of each other. The lower copy carries a
+  flat, milky look, the way ungraded footage comes off a camera. The upper copy carries the
+  finished warm cinematic look. A hard edge sweeps across the upper copy, so the graded
+  version eats the flat one from left to right and you read both halves of the same picture
+  at the same time. It pauses in the middle long enough for the eye to compare, then commits
+  and takes the whole frame.
+
+  Both looks are real HyperFrames color grading, not a CSS filter. The runtime hands each
+  image to a WebGL shader and swaps in a graded canvas, and the render pipeline redraws the
+  same shader, so what you preview is what encodes. Color grading is media only: it applies
+  to <video> and <img>, never to text, SVG or ordinary DOM.
+
+  The plate here is a procedural SVG scene built in this file, so the primitive is
+  deterministic and ships nothing licensed. Replace PLATE_SRC with your own photo or a video
+  poster and the whole move still works. Swap AFTER_GRADE for any preset id or hand written
+  adjust block.
+
+  The edge itself is never animated with clip-path. The upper copy lives in a wrapper with
+  overflow hidden and the wrapper's width is what moves, so the sweep is one plain numeric
+  tween that seeks perfectly and never re-parses a string.
+
+  Every ease is a cubic bezier written out by hand and solved in this file. No preset is used
+  anywhere.
+
+  Variables. Each one is read once at mount, falls back to its declared default on anything
+  missing or unrecognised, and changes what lands on screen. Timing is untouched: same six
+  seconds, same 30fps, same beats.
+
+    - look (warm-cinematic | cool-teal | bleach-bypass, default warm-cinematic): the grade the
+      upper copy carries, and the label printed over it. All three are real grading blocks
+      handed to the shader, not CSS filters.
+    - split (25 to 85, default 62, percent of the plate width): where the edge stops to hold
+      the comparison before it commits and takes the rest.
+    - edge (hairline | bold | hidden, default hairline): the divider line riding the wipe.
+      hidden removes it, so the grade arrives with no visible seam.
+    - labels (on | off, default on): the two captions naming each half of the plate.
+
+  Mount contract: everything lives inside <template>, styles and scripts included, and the
+  scripts sit INSIDE the composition root. A host clones template content into its own mount
+  and only runs scripts found inside the root; markup left outside is copied without its
+  behaviour, which renders a black card with no timeline at all.
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "look", "type": "enum", "role": "style", "label": "Look", "description": "Grade carried by the upper copy, and the label printed over it. All three are real grading blocks handed to the shader, not CSS filters.", "default": "warm-cinematic", "options": [{ "value": "warm-cinematic", "label": "Warm Cinematic" }, { "value": "cool-teal", "label": "Cool Teal" }, { "value": "bleach-bypass", "label": "Bleach Bypass" }] },
+    { "id": "split", "type": "number", "role": "motion", "label": "Split point", "description": "How far across the plate the edge stops to hold the comparison, before it commits and takes the rest.", "default": 62, "min": 25, "max": 85, "step": 1, "unit": "%" },
+    { "id": "edge", "type": "enum", "role": "style", "label": "Edge", "description": "The divider line riding the wipe. Hidden drops it entirely so the grade arrives with no seam.", "default": "hairline", "options": [{ "value": "hairline", "label": "Hairline" }, { "value": "bold", "label": "Bold" }, { "value": "hidden", "label": "Hidden" }] },
+    { "id": "labels", "type": "enum", "role": "style", "label": "Labels", "description": "Show or hide the two captions naming each half of the plate.", "default": "on", "options": [{ "value": "on", "label": "Show" }, { "value": "off", "label": "Hide" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Grade Split Reveal</title>
+  </head>
+  <body>
+    <template>
+      <div
+        id="root"
+        class="clip gs-root"
+        data-composition-id="grade-split-reveal"
+        data-duration="6"
+        data-fps="30"
+      >
+        <style>
+          [data-composition-id="grade-split-reveal"] {
+            --ink: #f6f4ef;
+            --rule: rgba(246, 244, 239, 0.55);
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            background: transparent;
+            pointer-events: none;
+          }
+          #gs-plate {
+            position: absolute;
+            overflow: hidden;
+            border-radius: 10px;
+            background: #08080a;
+            box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
+          }
+          .gs-layer {
+            position: absolute;
+            left: 0;
+            top: 0;
+            height: 100%;
+            overflow: hidden;
+          }
+          .gs-layer img {
+            display: block;
+            object-fit: cover;
+          }
+          #gs-edge {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 2px;
+            height: 100%;
+            background: var(--ink);
+            box-shadow: 0 0 18px rgba(0, 0, 0, 0.7);
+          }
+          .gs-tag {
+            position: absolute;
+            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+            font-weight: 700;
+            text-transform: uppercase;
+            letter-spacing: 0.16em;
+            color: var(--ink);
+            opacity: 0;
+            white-space: nowrap;
+            text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85);
+          }
+          .gs-tag::before {
+            content: "";
+            position: absolute;
+            left: 0;
+            top: -0.7em;
+            width: 1.8em;
+            height: 2px;
+            background: var(--rule);
+          }
+          #gs-tag-before::before {
+            left: auto;
+            right: 0;
+          }
+        </style>
+
+        <div id="gs-plate">
+          <div class="gs-layer" id="gs-before"><img id="gs-img-before" alt="" /></div>
+          <div class="gs-layer" id="gs-after"><img id="gs-img-after" alt="" /></div>
+          <div id="gs-edge"></div>
+          <div class="gs-tag" id="gs-tag-before">Ungraded</div>
+          <div class="gs-tag" id="gs-tag-after">Warm Cinematic</div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            gsap.defaults({ immediateRender: false });
+
+            /* Cubic bezier solved by hand. Newton first, bisection when the slope dies. */
+            function bezier(x1, y1, x2, y2) {
+              function curve(t, a1, a2) {
+                var A = 1 - 3 * a2 + 3 * a1;
+                var B = 3 * a2 - 6 * a1;
+                var C = 3 * a1;
+                return ((A * t + B) * t + C) * t;
+              }
+              function slope(t, a1, a2) {
+                var A = 1 - 3 * a2 + 3 * a1;
+                var B = 3 * a2 - 6 * a1;
+                var C = 3 * a1;
+                return (3 * A * t + 2 * B) * t + C;
+              }
+              return function (p) {
+                if (p <= 0) return 0;
+                if (p >= 1) return 1;
+                var t = p;
+                for (var i = 0; i < 8; i++) {
+                  var d = slope(t, x1, x2);
+                  if (Math.abs(d) < 1e-6) break;
+                  var e = curve(t, x1, x2) - p;
+                  if (Math.abs(e) < 1e-7) return curve(t, y1, y2);
+                  t -= e / d;
+                }
+                var lo = 0;
+                var hi = 1;
+                t = p;
+                for (var j = 0; j < 24; j++) {
+                  var x = curve(t, x1, x2);
+                  if (Math.abs(x - p) < 1e-7) break;
+                  if (x > p) hi = t;
+                  else lo = t;
+                  t = (lo + hi) / 2;
+                }
+                return curve(t, y1, y2);
+              };
+            }
+
+            /* Plate settles, never bounces. */
+            var EASE_PLATE = bezier(0.16, 0.84, 0.24, 1);
+            /* The sweep loiters, then finishes fast, the way a hand drags a compare slider. */
+            var EASE_WIPE = bezier(0.62, 0, 0.14, 1);
+            /* The commit is decisive from the first frame. */
+            var EASE_COMMIT = bezier(0.4, 0, 0.05, 1);
+            var EASE_TAG = bezier(0.22, 0.8, 0.3, 1);
+            var EASE_FADE = bezier(0.4, 0, 0.7, 1);
+
+            var DUR = 6;
+
+            /* ---- the plate. Swap PLATE_SRC for your own photo or video poster. ---- */
+            var SCENE =
+              /* width and height are not decoration. An SVG served to an <img> with only a
+                 viewBox has no intrinsic size, and a texture upload from it comes back
+                 empty, so the shader grades a blank plate. */
+              '<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="900" viewBox="0 0 1600 900">' +
+              "<defs>" +
+              '<linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">' +
+              '<stop offset="0" stop-color="#1b2340"/><stop offset="0.42" stop-color="#5b4a63"/>' +
+              '<stop offset="0.68" stop-color="#c8794a"/><stop offset="0.78" stop-color="#f0a75c"/>' +
+              '<stop offset="1" stop-color="#f7c988"/></linearGradient>' +
+              '<linearGradient id="sea" x1="0" y1="0" x2="0" y2="1">' +
+              '<stop offset="0" stop-color="#c98a55"/><stop offset="0.3" stop-color="#6a5560"/>' +
+              '<stop offset="1" stop-color="#1a1d30"/></linearGradient>' +
+              '<radialGradient id="glow" cx="0.62" cy="0.74" r="0.42">' +
+              '<stop offset="0" stop-color="#ffdfa8" stop-opacity="0.9"/>' +
+              '<stop offset="1" stop-color="#ffdfa8" stop-opacity="0"/></radialGradient>' +
+              "</defs>" +
+              '<rect width="1600" height="900" fill="url(#sky)"/>' +
+              '<rect width="1600" height="900" fill="url(#glow)"/>' +
+              '<circle cx="992" cy="660" r="58" fill="#fff0cd"/>' +
+              '<path d="M0 640 L250 578 L430 618 L640 552 L820 606 L1010 566 L1240 620 L1430 578 L1600 616 L1600 700 L0 700 Z" fill="#3a2f45"/>' +
+              '<path d="M0 668 L210 634 L400 664 L610 622 L840 662 L1080 630 L1330 668 L1600 638 L1600 700 L0 700 Z" fill="#2a2337"/>' +
+              '<rect y="700" width="1600" height="200" fill="url(#sea)"/>' +
+              '<rect x="962" y="700" width="60" height="200" fill="#ffdfa8" opacity="0.42"/>' +
+              '<rect x="978" y="700" width="28" height="200" fill="#fff3d4" opacity="0.5"/>' +
+              '<g fill="#f4e3c2" opacity="0.34">' +
+              '<rect x="120" y="742" width="1360" height="3"/><rect x="240" y="786" width="1120" height="3"/>' +
+              '<rect x="60" y="828" width="1480" height="4"/><rect x="300" y="868" width="1000" height="4"/></g>' +
+              '<g fill="#e8d3b4" opacity="0.5">' +
+              '<rect x="180" y="330" width="420" height="7" rx="3"/><rect x="300" y="372" width="260" height="6" rx="3"/>' +
+              '<rect x="1010" y="286" width="380" height="7" rx="3"/><rect x="1130" y="326" width="220" height="6" rx="3"/></g>' +
+              '<path d="M0 760 L118 700 L268 760 L268 900 L0 900 Z" fill="#12121e"/>' +
+              '<path d="M1600 742 L1462 700 L1318 742 L1318 900 L1600 900 Z" fill="#0f0f1a"/>' +
+              "</svg>";
+            var PLATE_SRC = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(SCENE);
+
+            /* ---- the two looks. Both are real color grading, applied by the shader. ---- */
+            var BEFORE_GRADE = {
+              preset: "neutral",
+              intensity: 1,
+              adjust: {
+                exposure: 0.1,
+                contrast: -0.42,
+                highlights: -0.1,
+                shadows: 0.24,
+                whites: -0.14,
+                blacks: 0.3,
+                temperature: -0.06,
+                vibrance: -0.22,
+                saturation: -0.34,
+              },
+              colorSpace: "rec709",
+            };
+            var AFTER_GRADE = {
+              preset: "deep-contrast",
+              intensity: 1,
+              adjust: {
+                exposure: 0.02,
+                contrast: 0.28,
+                highlights: -0.16,
+                shadows: 0.08,
+                whites: 0.06,
+                blacks: -0.16,
+                temperature: 0.18,
+                tint: -0.04,
+                vibrance: 0.26,
+                saturation: 0.1,
+              },
+              details: { vignette: 0.3, vignetteFeather: 0.7, grain: 0.1, grainSize: 0.3 },
+              colorSpace: "rec709",
+            };
+
+            /* ---- variables. Unrecognised overrides return to their declared defaults. ---- */
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            function pick(table, value, fallback) {
+              return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+            }
+
+            var LOOKS = {
+              "warm-cinematic": { label: "Warm Cinematic", grade: AFTER_GRADE },
+              "cool-teal": {
+                label: "Cool Teal",
+                grade: {
+                  preset: "deep-contrast",
+                  intensity: 1,
+                  adjust: {
+                    exposure: 0,
+                    contrast: 0.32,
+                    highlights: -0.2,
+                    shadows: 0.14,
+                    whites: 0.04,
+                    blacks: -0.2,
+                    temperature: -0.26,
+                    tint: 0.08,
+                    vibrance: 0.22,
+                    saturation: 0.04,
+                  },
+                  details: { vignette: 0.34, vignetteFeather: 0.68, grain: 0.1, grainSize: 0.3 },
+                  colorSpace: "rec709",
+                },
+              },
+              "bleach-bypass": {
+                label: "Bleach Bypass",
+                grade: {
+                  preset: "neutral",
+                  intensity: 1,
+                  adjust: {
+                    exposure: 0.08,
+                    contrast: 0.54,
+                    highlights: 0.12,
+                    shadows: -0.1,
+                    whites: 0.18,
+                    blacks: -0.28,
+                    temperature: 0.04,
+                    vibrance: -0.18,
+                    saturation: -0.46,
+                  },
+                  details: { vignette: 0.24, vignetteFeather: 0.72, grain: 0.18, grainSize: 0.34 },
+                  colorSpace: "rec709",
+                },
+              },
+            };
+            var LOOK = LOOKS[pick(LOOKS, vars.look, "warm-cinematic")];
+
+            var EDGE_WIDTHS = { hairline: "2px", bold: "6px", hidden: "0px" };
+            var EDGE = pick(EDGE_WIDTHS, vars.edge, "hairline");
+
+            /* A number arrives as a number from --variables, but a hand written override can
+               still be a string or nonsense. parseFloat plus a range test covers both. */
+            var SPLIT = parseFloat(vars.split);
+            if (!isFinite(SPLIT) || SPLIT < 25 || SPLIT > 85) SPLIT = 62;
+
+            var LABELS_ON = vars.labels !== "off";
+
+            var root = document.getElementById("gs-plate").parentElement;
+            var FRAME_W = root.clientWidth || 1920;
+            var FRAME_H = root.clientHeight || 1080;
+
+            /* The plate keeps the frame's own shape, inset by a constant margin, so one file
+               reads correctly in landscape, portrait and square. */
+            var INSET = Math.min(FRAME_W, FRAME_H) * 0.085;
+            var PW = Math.round(FRAME_W - INSET * 2);
+            var PH = Math.round(FRAME_H - INSET * 2);
+
+            var plate = document.getElementById("gs-plate");
+            plate.style.left = INSET + "px";
+            plate.style.top = INSET + "px";
+            plate.style.width = PW + "px";
+            plate.style.height = PH + "px";
+
+            var before = document.getElementById("gs-before");
+            var after = document.getElementById("gs-after");
+            var edge = document.getElementById("gs-edge");
+            var tagBefore = document.getElementById("gs-tag-before");
+            var tagAfter = document.getElementById("gs-tag-after");
+
+            /* Both images are laid out at the full plate width. Only the wrapper narrows, so
+               the shader canvas the runtime drops in keeps its measured box and the edge is a
+               clean crop rather than a squeeze. */
+            [
+              [document.getElementById("gs-img-before"), BEFORE_GRADE],
+              [document.getElementById("gs-img-after"), LOOK.grade],
+            ].forEach(function (pair) {
+              pair[0].style.width = PW + "px";
+              pair[0].style.height = PH + "px";
+              pair[0].setAttribute("data-color-grading", JSON.stringify(pair[1]));
+              pair[0].src = PLATE_SRC;
+            });
+            before.style.width = PW + "px";
+
+            var TAG = Math.max(11, Math.round(Math.min(FRAME_W, FRAME_H) * 0.019));
+            var PAD = Math.round(INSET * 0.62);
+            [tagBefore, tagAfter].forEach(function (t) {
+              t.style.fontSize = TAG + "px";
+              t.style.bottom = PAD + "px";
+            });
+            /* The graded copy grows from the left, so its label sits on the left. Putting
+               these the other way round labels each half with the look it is not. */
+            tagAfter.style.left = PAD + "px";
+            tagBefore.style.right = PAD + "px";
+            tagBefore.style.textAlign = "right";
+
+            tagAfter.textContent = LOOK.label;
+            edge.style.width = EDGE_WIDTHS[EDGE];
+            /* The edge also casts a shadow, so zero width alone would leave a smudge. */
+            if (EDGE === "hidden") edge.style.display = "none";
+            if (!LABELS_ON) {
+              tagBefore.style.display = "none";
+              tagAfter.style.display = "none";
+            }
+
+            /* Rest state lives outside the timeline so frame zero is already correct. */
+            /* The plate is lit at frame zero and arrives on scale alone. Fading it up from
+               nothing would leave the first frames of the clip literally blank, which reads
+               as a broken card in any grid of thumbnails. */
+            gsap.set(plate, { transformOrigin: "50% 50%", scale: 1.05, opacity: 1 });
+            gsap.set(after, { width: 0 });
+            gsap.set(edge, { x: 0, opacity: 0 });
+            gsap.set([tagBefore, tagAfter], { opacity: 0, y: 10 });
+
+            var tl = gsap.timeline({ paused: true });
+
+            /* The plate arrives. */
+            tl.fromTo(plate, { scale: 1.05 }, { scale: 1, duration: 0.62, ease: EASE_PLATE }, 0);
+            tl.fromTo(
+              tagBefore,
+              { opacity: 0, y: 10 },
+              { opacity: 0.82, y: 0, duration: 0.34, ease: EASE_TAG },
+              0.36,
+            );
+
+            /* The grade sweeps in and stops short, so both halves are readable together. */
+            var HOLD = Math.round(PW * (SPLIT / 100));
+            tl.fromTo(after, { width: 0 }, { width: HOLD, duration: 1.6, ease: EASE_WIPE }, 0.7);
+            tl.fromTo(edge, { x: 0 }, { x: HOLD, duration: 1.6, ease: EASE_WIPE }, 0.7);
+            tl.fromTo(edge, { opacity: 0 }, { opacity: 1, duration: 0.2, ease: EASE_FADE }, 0.7);
+            tl.fromTo(
+              tagAfter,
+              { opacity: 0, y: 10 },
+              { opacity: 1, y: 0, duration: 0.34, ease: EASE_TAG },
+              1.16,
+            );
+
+            /* Then it commits and takes the whole plate. */
+            tl.fromTo(after, { width: HOLD }, { width: PW, duration: 1.2, ease: EASE_COMMIT }, 3.1);
+            tl.fromTo(edge, { x: HOLD }, { x: PW, duration: 1.2, ease: EASE_COMMIT }, 3.1);
+            tl.fromTo(
+              tagBefore,
+              { opacity: 0.82 },
+              { opacity: 0, duration: 0.5, ease: EASE_FADE },
+              3.1,
+            );
+            tl.fromTo(edge, { opacity: 1 }, { opacity: 0, duration: 0.3, ease: EASE_FADE }, 4.05);
+            /* A small push in lands the finished look instead of just stopping on it. */
+            tl.fromTo(plate, { scale: 1 }, { scale: 1.03, duration: 1.5, ease: EASE_COMMIT }, 3.1);
+
+            tl.set({}, {}, DUR);
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines["grade-split-reveal"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/grain-field/demo.html b/docs/public/catalog/components/grain-field/demo.html
new file mode 100644
index 0000000000..ff960b5d5c
--- /dev/null
+++ b/docs/public/catalog/components/grain-field/demo.html
@@ -0,0 +1,102 @@
+<!doctype html>
+<!--
+  grain-field demo. This standalone composition mounts grain-field.html
+  through data-composition-src. The coarse violet overrides prove both
+  variables flow through the mount while the primitive stays host-sized.
+-->
+<html lang="en" data-composition-id="grain-field-demo" data-composition-duration="4">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Grain Field Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0b0c0e;
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --surface: #17191f;
+        --fg: #f8fafc;
+        --muted: #94a3b8;
+        --accent: #38bdf8;
+        --accent-2: #a78bfa;
+        --brand: #34d399;
+        --border: #334155;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 42%, #17191f 0%, #0b0c0e 72%);
+      }
+
+      .mount-card {
+        width: 75%;
+        height: 70%;
+        left: 12.5%;
+        top: 15%;
+        overflow: hidden;
+        border: 1px solid rgb(255 255 255 / 0.16);
+        border-radius: 28px;
+        background: #080a10;
+        box-shadow: 0 5cqh 14cqh rgb(0 0 0 / 0.52);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="grain-field-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="grain-field-mount"
+        class="mount-card clip"
+        data-composition-id="grain-field"
+        data-composition-src="./grain-field.html"
+        data-variable-values='{"density":"coarse","accent":"violet"}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="1440"
+        data-height="756"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["grain-field-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "grain-field.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/grain-field/grain-field.html b/docs/public/catalog/components/grain-field/grain-field.html
new file mode 100644
index 0000000000..b1354192b7
--- /dev/null
+++ b/docs/public/catalog/components/grain-field/grain-field.html
@@ -0,0 +1,170 @@
+<!doctype html>
+<!--
+  grain-field: HyperFrames video primitive (backgrounds / ambient)
+
+  Concept: a fixed repeated dot field drifts slowly across a deep,
+  accent-tinted luminance wash. The dots stay intentionally legible at
+  gallery-card size so the texture reads as a designed surface.
+
+  Variables:
+    - density (fine | coarse, default fine): controls dot size and spacing.
+    - accent (green | blue | violet, default green): colors the dots and wash.
+
+  Envelope: IN = 0, HOLD = the full elastic duration, OUT = 0. A longer mount
+  stretches only the ambient drift cycle.
+
+  Loop invariant: the phase completes one full sine cycle during HOLD. The
+  endpoint is normalized to phase zero before rendering, so t=0 and
+  t=duration have exactly the same transform.
+
+  Sound: none.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, has no data-width or data-height,
+  and registers one paused timeline under the hardcoded grain-field id.
+-->
+<html
+  lang="en"
+  data-composition-id="grain-field"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "density", "type": "enum", "role": "style", "label": "Density", "description": "Dot size and spacing across the grain field.", "default": "fine", "options": [{ "value": "fine", "label": "Fine" }, { "value": "coarse", "label": "Coarse" }] },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Accent token family used to color the dots and luminance wash.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Grain Field</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="grain-field" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            pointer-events: none;
+          }
+
+          .gf-clip,
+          .gf-base,
+          .gf-field {
+            position: absolute;
+          }
+
+          .gf-clip,
+          .gf-base {
+            inset: 0;
+          }
+
+          .gf-clip {
+            overflow: hidden;
+          }
+
+          .gf-base {
+            background:
+              radial-gradient(
+                ellipse at 28% 20%,
+                color-mix(in srgb, var(--gf-color) 18%, transparent) 0%,
+                transparent 56%
+              ),
+              linear-gradient(
+                145deg,
+                color-mix(in srgb, var(--gf-base) 90%, var(--gf-color)) 0%,
+                var(--gf-base) 72%
+              );
+          }
+
+          .gf-field {
+            inset: -8cqw;
+            background-image: radial-gradient(
+              circle,
+              color-mix(in srgb, var(--gf-color) 70%, white) 0 var(--gf-dot),
+              transparent calc(var(--gf-dot) + 0.12cqmin)
+            );
+            background-position: 0 0;
+            background-size: var(--gf-cell) var(--gf-cell);
+            opacity: 0.82;
+            will-change: transform;
+          }
+        </style>
+
+        <div
+          id="grain-field-clip"
+          class="gf-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="gf-base"></div>
+          <div class="gf-field"></div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var field = root.querySelector(".gf-field");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            // Invalid enum overrides return to their declared defaults.
+            var accentTokens = {
+              green: "var(--brand, #34d399)",
+              blue: "var(--accent, #38bdf8)",
+              violet: "var(--accent-2, #a78bfa)",
+            };
+            var densityStyles = {
+              fine: { cell: "3.2cqmin", dot: "0.48cqmin" },
+              coarse: { cell: "5.8cqmin", dot: "0.86cqmin" },
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentTokens, vars.accent)
+              ? vars.accent
+              : "green";
+            var density = vars.density === "coarse" ? "coarse" : "fine";
+
+            root.style.setProperty("--gf-color", accentTokens[accent]);
+            root.style.setProperty("--gf-base", "var(--bg, #080a10)");
+            root.style.setProperty("--gf-cell", densityStyles[density].cell);
+            root.style.setProperty("--gf-dot", densityStyles[density].dot);
+
+            var TAU = Math.PI * 2;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var state = { phase: 0 };
+
+            function renderPose() {
+              var phase = state.phase === TAU ? 0 : state.phase;
+              var drift = Math.sin(phase);
+              gsap.set(field, { x: drift * 2.8 + "cqw", y: drift * 2.2 + "cqh" });
+            }
+
+            var tl = gsap.timeline({ paused: true });
+
+            // HOLD: uniform phase travel becomes a smooth sine drift. One full
+            // cycle restores the exact starting pose at the duration boundary.
+            tl.to(state, { phase: TAU, duration: duration, ease: "none", onUpdate: renderPose }, 0);
+
+            renderPose();
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines["grain-field"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/grain-overlay/demo.html b/docs/public/catalog/components/grain-overlay/demo.html
new file mode 100644
index 0000000000..c4d1aeccf6
--- /dev/null
+++ b/docs/public/catalog/components/grain-overlay/demo.html
@@ -0,0 +1,155 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Grain Overlay — Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="grain-overlay-demo"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <!-- Background content to demonstrate the overlay -->
+      <div class="demo-bg">
+        <div style="text-align: center; z-index: 1">
+          <div
+            class="demo-title"
+            style="font-size: 80px; font-weight: 700; color: #2c1e16; opacity: 0"
+          >
+            Grain Overlay
+          </div>
+          <div
+            class="demo-subtitle"
+            style="font-size: 32px; color: #5a4a3a; margin-top: 20px; opacity: 0"
+          >
+            Adds warmth and analog character
+          </div>
+        </div>
+      </div>
+
+      <!-- The grain overlay component -->
+      <div
+        id="grain-overlay"
+        style="
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          pointer-events: none;
+          z-index: 100;
+        "
+      >
+        <div class="grain-texture"></div>
+      </div>
+
+      <style>
+        .demo-bg {
+          width: 1920px;
+          height: 1080px;
+          background: linear-gradient(135deg, #f5f0e0 0%, #e8d8b8 50%, #d4c4a0 100%);
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          font-family: "Inter", sans-serif;
+          position: relative;
+        }
+
+        @keyframes hf-grain-noise {
+          0%,
+          100% {
+            transform: translate(0, 0);
+          }
+          10% {
+            transform: translate(-5%, -5%);
+          }
+          20% {
+            transform: translate(-10%, 5%);
+          }
+          30% {
+            transform: translate(5%, -10%);
+          }
+          40% {
+            transform: translate(-5%, 15%);
+          }
+          50% {
+            transform: translate(-10%, 5%);
+          }
+          60% {
+            transform: translate(15%, 0);
+          }
+          70% {
+            transform: translate(0, 10%);
+          }
+          80% {
+            transform: translate(-15%, 0);
+          }
+          90% {
+            transform: translate(10%, 5%);
+          }
+        }
+
+        #grain-overlay .grain-texture {
+          position: absolute;
+          top: -50%;
+          left: -50%;
+          width: 200%;
+          height: 200%;
+          background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
+          opacity: 0.15;
+          animation: hf-grain-noise 0.5s steps(1) infinite;
+        }
+      </style>
+
+      <script>
+        (function () {
+          const tl = gsap.timeline({ paused: true });
+
+          tl.to(
+            ".demo-title",
+            {
+              opacity: 1,
+              y: -10,
+              duration: 1,
+              ease: "power3.out",
+            },
+            0.5,
+          );
+
+          tl.to(
+            ".demo-subtitle",
+            {
+              opacity: 1,
+              y: -5,
+              duration: 0.8,
+              ease: "power3.out",
+            },
+            1.0,
+          );
+
+          window.__timelines = window.__timelines || {};
+          window.__timelines["grain-overlay-demo"] = tl;
+        })();
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/grain-overlay/grain-overlay.html b/docs/public/catalog/components/grain-overlay/grain-overlay.html
new file mode 100644
index 0000000000..8cdc707bd2
--- /dev/null
+++ b/docs/public/catalog/components/grain-overlay/grain-overlay.html
@@ -0,0 +1,75 @@
+<!--
+  Grain Overlay — animated film grain texture.
+
+  Usage: paste this snippet into your composition's HTML.
+  The overlay covers the full viewport with pointer-events: none
+  so it sits on top of all content without blocking interaction.
+
+  Customize:
+  - opacity: adjust .grain-texture opacity (default 0.15)
+  - speed: change animation duration (default 0.5s)
+  - texture: swap the background URL for a different pattern
+  - z-index: adjust #grain-overlay z-index to layer correctly
+-->
+
+<div
+  id="grain-overlay"
+  style="
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 100;
+  "
+>
+  <div class="grain-texture"></div>
+</div>
+
+<style>
+  @keyframes hf-grain-noise {
+    0%,
+    100% {
+      transform: translate(0, 0);
+    }
+    10% {
+      transform: translate(-5%, -5%);
+    }
+    20% {
+      transform: translate(-10%, 5%);
+    }
+    30% {
+      transform: translate(5%, -10%);
+    }
+    40% {
+      transform: translate(-5%, 15%);
+    }
+    50% {
+      transform: translate(-10%, 5%);
+    }
+    60% {
+      transform: translate(15%, 0);
+    }
+    70% {
+      transform: translate(0, 10%);
+    }
+    80% {
+      transform: translate(-15%, 0);
+    }
+    90% {
+      transform: translate(10%, 5%);
+    }
+  }
+
+  #grain-overlay .grain-texture {
+    position: absolute;
+    top: -50%;
+    left: -50%;
+    width: 200%;
+    height: 200%;
+    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
+    opacity: 0.15;
+    animation: hf-grain-noise 0.5s steps(1) infinite;
+  }
+</style>
diff --git a/docs/public/catalog/components/grid-card-assemble/README.md b/docs/public/catalog/components/grid-card-assemble/README.md
new file mode 100644
index 0000000000..26e4923f63
--- /dev/null
+++ b/docs/public/catalog/components/grid-card-assemble/README.md
@@ -0,0 +1,58 @@
+# grid-card-assemble
+
+Layout / feature-tour primitive: N capability cards stagger-assemble into a
+grid or a vertical list, then hold perfectly still. Each card is a real token
+card: surface fill with a subtle top light, hairline border, contract radius,
+generous padding, a thin-line icon that draws on as the card lands, a
+wide-tracked mono label, and an optional one-line muted body. Entrances are a
+fade plus a short slide directly into the card's own slot: no scatter from
+center, no overshoot, a smooth long-tail settle.
+
+Six generic thin-line icons (shield, chart, cloud, bolt, layers, doc) cycle
+deterministically by item index and draw on with a getTotalLength dash inside
+each card's settle window.
+
+Authored at 4.5s with an elastic HOLD: the IN cascade is fixed, everything
+after it is still frame until the (optional) exit.
+
+## Variables
+
+| id        | type                               | default                          | notes                                                                                                                                                                                                                                                                                                                                      |
+| --------- | ---------------------------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `items`   | string                             | `Capture,Compose,Render,Publish` | Comma list of cards (3 to 12; extras past 12 are dropped). An entry formatted `Label: body text` renders a one-line muted body under the label; a plain entry is label-only. Body text must not contain commas.                                                                                                                            |
+| `layout`  | enum `grid` \| `list`              | `grid`                           | Grid wraps by `columns`; list stacks horizontal icon-left rows in one column.                                                                                                                                                                                                                                                              |
+| `columns` | number 0-4                         | `0`                              | Grid only. `0` = auto: one row up to 3 items, then `ceil(sqrt(N))` (4 items form 2x2, 9 items form 3x3).                                                                                                                                                                                                                                   |
+| `cues`    | string                             | `""`                             | Comma-separated per-item entrance times in seconds relative to mount start. Blank or invalid entries fall back to that item's default cascade slot: the cascade spreads so the last card lands near 60% of the authored duration (short mounts compress toward ~0.1s gaps). Values are clamped so every card lands before any exit begins. |
+| `accent`  | enum `green` \| `blue` \| `violet` | `green`                          | Icon stroke family: green rides `--brand`, blue `--accent`, violet `--accent-2`.                                                                                                                                                                                                                                                           |
+| `exit`    | enum `none` \| `fade` \| `up`      | `none`                           | Frame roots own transitions; the default hold ends the film.                                                                                                                                                                                                                                                                               |
+
+## Content override (items slot)
+
+The stage grid is the `[data-slot="items"]` element inside the template. A
+fork that wants custom card content authors its own children there; when that
+element already has children the script animates them as the cards instead of
+generating capability cards from `items` (layout, `cues`, and `exit` still
+apply, and `items` then only feeds the stage's aria-label). Any
+`.gca-icon path` elements inside slotted cards still dash-draw as the card
+lands.
+
+## Usage
+
+```html
+<div
+  class="clip"
+  data-composition-id="grid-card-assemble"
+  data-composition-src="./components/grid-card-assemble.html"
+  data-variable-values='{"items":"Permissions: Scoped by your policies,Audit trail: Every action logged,Deploy: Your cloud or on-prem","accent":"blue"}'
+  data-start="0"
+  data-duration="4.5"
+  data-track-index="0"
+></div>
+```
+
+Golden refs: scramble-reveal (token consumption), toggle-flip (mount-contract
+structure).
+
+Note: icon dash draws are driven through the `stroke-dashoffset` attribute
+(GSAP attr plugin), not CSS style. Chrome under-invalidates the path region
+for CSS dash changes, which leaves stale stroke fragments on reverse seeks.
diff --git a/docs/public/catalog/components/grid-card-assemble/demo.html b/docs/public/catalog/components/grid-card-assemble/demo.html
new file mode 100644
index 0000000000..e298bcccad
--- /dev/null
+++ b/docs/public/catalog/components/grid-card-assemble/demo.html
@@ -0,0 +1,98 @@
+<!doctype html>
+<!--
+  grid-card-assemble demo. Large centered mount (88% x 78%) on a light
+  editorial backdrop: the six-card grid gets room to assemble at real scale
+  instead of being crushed into a text strip.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>grid-card-assemble Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #f4f6f9);
+      }
+
+      #root {
+        --bg: #f4f6f9;
+        --fg: #14161b;
+        --surface: #ffffff;
+        --border: #dfe4ec;
+        --brand: #1d4ed8;
+        --accent: #0284c7;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 40%, #ffffff 0%, var(--bg, #f4f6f9) 70%);
+      }
+
+      .mount-stage {
+        width: 88%;
+        height: 78%;
+        left: 6%;
+        top: 11%;
+        container-type: size;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="grid-card-assemble-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4.5"
+      data-fps="30"
+    >
+      <div
+        id="grid-card-assemble-mount"
+        class="mount-stage clip"
+        data-composition-id="grid-card-assemble"
+        data-composition-src="./grid-card-assemble.html"
+        data-variable-values='{"items":"Permissions,Audit trail,Deploy,Search,Drafts,Citations","layout":"grid","columns":3,"accent":"violet"}'
+        data-start="0"
+        data-duration="4.5"
+        data-track-index="0"
+        data-width="1690"
+        data-height="842"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["grid-card-assemble-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "grid-card-assemble.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/grid-card-assemble/grid-card-assemble.html b/docs/public/catalog/components/grid-card-assemble/grid-card-assemble.html
new file mode 100644
index 0000000000..ec4949691b
--- /dev/null
+++ b/docs/public/catalog/components/grid-card-assemble/grid-card-assemble.html
@@ -0,0 +1,468 @@
+<!doctype html>
+<!--
+  grid-card-assemble: HyperFrames video primitive (layout / feature tour)
+
+  N capability cards stagger-assemble into a grid or a vertical list. Every
+  card is a real token card: surface fill with a subtle top light, hairline
+  border, contract radius, generous padding, a thin-line icon that draws on
+  as the card lands (getTotalLength dash), a wide-tracked mono label, and an
+  optional one-line muted body. Each card enters with a fade and a SHORT
+  slide directly into its own slot: no scatter from center, no overshoot, a
+  smooth long-tail settle (power3.out). Once the layout resolves the frame
+  holds perfectly STILL: no float, no push-in.
+
+  Variables (declared in data-composition-variables below):
+    - items (string, default "Capture,Compose,Render,Publish"): comma list of
+      cards. An entry formatted "Label: body text" renders the label plus a
+      one-line muted body; a plain entry renders label only. 3 to 12 items
+      render gracefully; extras past 12 are dropped. Body text must not
+      contain commas (the comma is the item separator).
+    - layout ("grid" | "list", default "grid"): grid wraps by columns, list
+      stacks horizontal rows vertically.
+    - columns (number, default 0 = auto): grid column count, grid layout only.
+      0 picks one row up to 3 items, then ceil(sqrt(N)) so 4 items form 2x2
+      and 9 items form 3x3.
+    - cues (string, default ""): comma-separated per-item entrance times in
+      seconds relative to mount start. A blank or invalid entry falls back to
+      that item's default cascade slot: the cascade spreads so the last card
+      lands near 60% of the authored duration (short mounts compress toward
+      ~0.1s gaps). Values are clamped so every card lands before any exit
+      begins.
+    - accent (green | blue | violet, default green): icon stroke family.
+      green -> --brand, blue -> --accent, violet -> --accent-2.
+    - exit ("none" | "fade" | "up", default "none"): frame roots own
+      transitions; the default hold-ends-the-film.
+
+  Icons: six generic thin-line glyphs (shield, chart, cloud, bolt, layers,
+  doc) cycled deterministically by item index. Each path is dash-primed at
+  mount and draws on inside its card's settle window.
+
+  Envelope, fixed IN with elastic HOLD (never gsap.timeScale()):
+    IN    = last entrance start + 0.65s card settle (icon draws fit inside)
+    HOLD  = still, elastic: everything after IN until OUT (or until D)
+    OUT   = 0 when exit is "none"; else 0.45s fade / fade-up of the stage.
+    Entrance starts compress together when D is too short for the cascade.
+
+  Content override: the runtime clones only this template. A fork that wants
+  custom card content places its own children inside the
+  [data-slot="items"] grid element; when that element already has children
+  the script animates them as the cards instead of generating capability
+  cards from the items variable (layout, cues, and exit still apply, and any
+  .gca-icon paths inside slotted cards still dash-draw).
+
+  Mount contract: elastic root, no data-width/data-height, styled via #root
+  only, container-type: size, one paused timeline registered under the
+  literal "grid-card-assemble" key. Deterministic and seek-safe: fromTo
+  entrances, immediateRender: false on post-entrance tweens, no CSS
+  transitions, no Date.now, no randomness.
+-->
+<html
+  lang="en"
+  data-composition-id="grid-card-assemble"
+  data-composition-duration="4.5"
+  data-composition-variables='[
+    { "id": "items", "type": "string", "role": "content", "label": "Items", "description": "Comma-separated cards (3 to 12). \"Label: body\" adds a one-line muted body under the label.", "default": "Capture,Compose,Render,Publish" },
+    { "id": "layout", "type": "enum", "role": "layout", "label": "Layout", "description": "Grid wraps by columns; list stacks vertically.", "default": "grid", "options": [{ "value": "grid", "label": "Grid" }, { "value": "list", "label": "List" }] },
+    { "id": "columns", "type": "number", "role": "layout", "label": "Columns", "description": "Grid column count (grid layout only). 0 picks automatically: one row up to 3 items, then ceil(sqrt(N)).", "default": 0, "min": 0, "max": 4, "step": 1 },
+    { "id": "cues", "type": "string", "role": "timing", "label": "Cues", "description": "Comma-separated per-item entrance times in seconds. Blank entries use the default cascade.", "default": "" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Accent token family used by the card icons.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "How the assembled layout leaves the frame. Default none: the hold ends the film.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Grid Card Assemble</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="grid-card-assemble" data-duration="4.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            background: var(--bg, transparent);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            pointer-events: none;
+          }
+
+          .gca-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+          }
+
+          .gca-stage {
+            display: grid;
+            width: var(--gca-stage-w, 88cqw);
+            grid-auto-rows: var(--gca-row-h, 34cqh);
+            gap: var(--space-2, 2.2cqmin);
+            will-change: transform, opacity;
+          }
+
+          .gca-card {
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            min-width: 0;
+            min-height: 0;
+            padding: var(--gca-pad, 4cqh);
+            overflow: hidden;
+            border: 1px solid var(--border, #38404e);
+            border-radius: var(--radius, 1.8cqmin);
+            /* Token surface with a subtle top light so the card reads as a
+               real plane against the stage (no color-mix: keeps the
+               contrast auditor honest). */
+            background:
+              linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.01) 60%),
+              var(--surface, #141a23);
+            will-change: transform, opacity;
+          }
+
+          .gca-icon {
+            flex: 0 0 auto;
+            width: var(--gca-icon, 7cqh);
+            height: var(--gca-icon, 7cqh);
+          }
+
+          .gca-icon path {
+            fill: none;
+            stroke: var(--gca-accent, var(--brand, #71f5a7));
+            stroke-width: 2.2;
+            stroke-linecap: round;
+            stroke-linejoin: round;
+          }
+
+          .gca-text {
+            min-width: 0;
+          }
+
+          .gca-label {
+            overflow: hidden;
+            color: var(--fg, #f8fafc);
+            font-size: var(--gca-font, 2.2cqh);
+            font-weight: 500;
+            line-height: 1.25;
+            letter-spacing: 0.16em;
+            text-transform: uppercase;
+            white-space: nowrap;
+          }
+
+          .gca-body {
+            margin-top: var(--gca-body-gap, 1.1cqh);
+            overflow: hidden;
+            color: var(--muted, #94a3b8);
+            font-family: var(--font-body, system-ui, -apple-system, "Segoe UI", sans-serif);
+            font-size: var(--gca-body-font, 2.6cqh);
+            font-weight: 400;
+            line-height: 1.4;
+            letter-spacing: 0.01em;
+            white-space: nowrap;
+          }
+
+          /* List rows read horizontally: icon left, text block beside it. */
+          .gca-stage[data-layout="list"] .gca-card {
+            flex-direction: row;
+            align-items: center;
+            justify-content: flex-start;
+            gap: var(--space-2, 2.2cqmin);
+          }
+
+          .gca-stage[data-layout="list"] .gca-body {
+            margin-top: var(--gca-body-gap, 0.6cqh);
+          }
+        </style>
+
+        <div
+          id="grid-card-assemble-clip"
+          class="gca-clip clip"
+          data-start="0"
+          data-duration="4.5"
+          data-track-index="0"
+        >
+          <div class="gca-stage" data-slot="items" role="list"></div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            // Literal id, never read off the DOM: the flattening step strips
+            // data-composition-id from the mounted root (see toggle-flip).
+            var compositionId = "grid-card-assemble";
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".gca-stage");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var itemsValue =
+              vars.items == null || String(vars.items).trim() === ""
+                ? "Capture,Compose,Render,Publish"
+                : String(vars.items);
+            var rawItems = itemsValue
+              .split(",")
+              .map(function (token) {
+                return token.trim();
+              })
+              .filter(function (token) {
+                return token !== "";
+              })
+              .slice(0, 12);
+            if (rawItems.length === 0) rawItems = ["Capture", "Compose", "Render", "Publish"];
+
+            // "Label: body" entries carry a one-line muted body; plain
+            // entries are label-only cards.
+            var entries = rawItems.map(function (raw) {
+              var split = raw.indexOf(":");
+              if (split > 0) {
+                return {
+                  label: raw.slice(0, split).trim(),
+                  body: raw.slice(split + 1).trim(),
+                };
+              }
+              return { label: raw, body: "" };
+            });
+
+            var layout = vars.layout === "list" ? "list" : "grid";
+            var isList = layout === "list";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            root.style.setProperty("--gca-accent", accentColors[accent]);
+
+            // Six generic thin-line glyphs cycled by index (48-box paths).
+            var ICONS = [
+              ["M24 44s16-8 16-20V10L24 4 8 10v14c0 12 16 20 16 20z", "M17 23l5 5 10-10"],
+              ["M8 6v34h34", "M16 30l8-9 6 5 10-12"],
+              ["M36 20h-2.5A16 16 0 1 0 18 40h18a10 10 0 0 0 0-20z"],
+              ["M26 4L10 27h10l-3 17 17-24H23l3-16z"],
+              ["M24 6L4 16l20 10 20-10L24 6z", "M4 24l20 10 20-10", "M4 32l20 10 20-10"],
+              ["M14 4h14l8 8v32H14z", "M28 4v8h8", "M20 24h10", "M20 31h7"],
+            ];
+            var SVG_NS = "http://www.w3.org/2000/svg";
+
+            // Content override: a fork may author its own cards inside the
+            // [data-slot="items"] element; then the items variable only
+            // supplies labels for accessibility, not markup.
+            var cards = Array.prototype.slice.call(stage.children);
+            if (cards.length === 0) {
+              cards = entries.map(function (entry, index) {
+                var card = document.createElement("div");
+                card.className = "gca-card";
+                card.setAttribute("role", "listitem");
+
+                var icon = document.createElementNS(SVG_NS, "svg");
+                icon.setAttribute("class", "gca-icon");
+                icon.setAttribute("viewBox", "0 0 48 48");
+                icon.setAttribute("aria-hidden", "true");
+                ICONS[index % ICONS.length].forEach(function (d) {
+                  var path = document.createElementNS(SVG_NS, "path");
+                  path.setAttribute("d", d);
+                  icon.appendChild(path);
+                });
+                card.appendChild(icon);
+
+                var text = document.createElement("div");
+                text.className = "gca-text";
+                var label = document.createElement("div");
+                label.className = "gca-label";
+                label.textContent = entry.label;
+                text.appendChild(label);
+                if (entry.body !== "") {
+                  var body = document.createElement("div");
+                  body.className = "gca-body";
+                  body.textContent = entry.body;
+                  text.appendChild(body);
+                }
+                card.appendChild(text);
+                stage.appendChild(card);
+                return card;
+              });
+            }
+            var count = cards.length;
+            stage.setAttribute("data-layout", layout);
+            stage.setAttribute(
+              "aria-label",
+              entries
+                .map(function (entry) {
+                  return entry.label;
+                })
+                .join(", "),
+            );
+
+            // Layout geometry: columns wrap the grid; list is one column.
+            // 3 or fewer sit on one row; beyond that ceil(sqrt(N)) keeps the
+            // grid near-square (4 -> 2x2, 9 -> 3x3, 12 -> 4x3).
+            var autoColumns = count <= 3 ? count : Math.ceil(Math.sqrt(count));
+            var requested = Math.round(Number(vars.columns)) || 0;
+            var columns =
+              layout === "list"
+                ? 1
+                : Math.max(1, Math.min(4, requested > 0 ? requested : autoColumns));
+            var rows = Math.ceil(count / columns);
+            stage.style.gridTemplateColumns = "repeat(" + columns + ", minmax(0, 1fr))";
+
+            var hasBodies = entries.some(function (entry) {
+              return entry.body !== "";
+            });
+
+            // The assembled wall fills the mount with intent: ~76cqh of
+            // vertical budget split across rows (gap approximated at 3cqh).
+            // Label-only grids take shorter rows so cards stay proportioned.
+            var stageW = isList ? 64 : 88;
+            var rowCap = isList ? 15 : hasBodies ? 38 : 30;
+            var rowH = Math.max(6, Math.min(rowCap, (76 - 3 * (rows - 1)) / rows));
+            root.style.setProperty("--gca-stage-w", stageW + "cqw");
+            root.style.setProperty("--gca-row-h", rowH.toFixed(3) + "cqh");
+
+            // Card internals scale off the row height (set once at mount,
+            // never tweened: cq-unit custom-property tweens break seeks).
+            var pad = rowH * (isList ? 0.16 : 0.12);
+            var iconSize = isList ? rowH * 0.5 : Math.min(rowH * 0.3, 9.5);
+            root.style.setProperty("--gca-pad", pad.toFixed(3) + "cqh");
+            root.style.setProperty("--gca-icon", iconSize.toFixed(3) + "cqh");
+            root.style.setProperty(
+              "--gca-body-gap",
+              (rowH * (isList ? 0.03 : 0.035)).toFixed(3) + "cqh",
+            );
+
+            // Deterministic text fitting: wide-tracked mono label at ~0.75em
+            // per glyph, sans body at ~0.52em; each also bounded by row
+            // height so short mounts stay composed.
+            var maxChars = entries.reduce(function (max, entry) {
+              return Math.max(max, Array.from(entry.label).length);
+            }, 1);
+            var maxBody = entries.reduce(function (max, entry) {
+              return Math.max(max, Array.from(entry.body).length);
+            }, 0);
+            var cellW = stageW / columns;
+            var textW = isList ? cellW * 0.62 : cellW * 0.78;
+            var labelCqw = Math.min(2.6, textW / (maxChars * 0.75));
+            var labelCqh = rowH * (isList ? 0.23 : 0.09);
+            root.style.setProperty(
+              "--gca-font",
+              "min(" + labelCqw.toFixed(3) + "cqw, " + labelCqh.toFixed(3) + "cqh)",
+            );
+            if (maxBody > 0) {
+              var bodyCqw = Math.min(2.2, textW / (maxBody * 0.56));
+              var bodyCqh = rowH * (isList ? 0.19 : 0.095);
+              root.style.setProperty(
+                "--gca-body-font",
+                "min(" + bodyCqw.toFixed(3) + "cqw, " + bodyCqh.toFixed(3) + "cqh)",
+              );
+            }
+
+            // RETIME RANGE: fixed IN cascade, elastic still HOLD, optional OUT.
+            var BASE_START = 0.15;
+            var GAP = 0.1;
+            var TILE_BASE = 0.65;
+            var OUT_BASE = 0.45;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4.5"));
+            var OUT = exit === "none" ? 0 : Math.min(OUT_BASE, duration * 0.25);
+            var avail = duration - OUT;
+            var TILE = Math.min(TILE_BASE, Math.max(0.2, avail - BASE_START));
+            var latestStart = Math.max(0, avail - TILE);
+            // Default cascade: the last card lands (settle included) around
+            // 60% of the authored duration, so the assembly occupies the
+            // shot instead of finishing in the first quarter and holding
+            // dead. Later cards land deeper, each icon drawing as its card
+            // arrives; the still hold begins after the final landing. Short
+            // mounts fall back to the compressed ~0.1s cascade, and nothing
+            // ever starts past latestStart (every card lands before OUT).
+            var firstStart = Math.min(BASE_START, latestStart);
+            var targetLastStart = Math.min(
+              latestStart,
+              Math.max(0.6 * duration - TILE, BASE_START + GAP * (count - 1)),
+            );
+            var gap = count > 1 ? Math.max(0, targetLastStart - firstStart) / (count - 1) : 0;
+
+            var cueList = String(vars.cues == null ? "" : vars.cues).split(",");
+            var starts = cards.map(function (card, index) {
+              var cue = Number((cueList[index] || "").trim());
+              var hasCue = (cueList[index] || "").trim() !== "" && Number.isFinite(cue);
+              var start = hasCue ? cue : firstStart + gap * index;
+              return Math.max(0, Math.min(start, latestStart));
+            });
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: fade + short slide directly into the slot, long-tail settle,
+            // no overshoot. Explicit both-endpoints state so any seek is exact.
+            cards.forEach(function (card, index) {
+              gsap.set(card, { opacity: 0, y: "3cqh" });
+              tl.fromTo(
+                card,
+                { opacity: 0, y: "3cqh" },
+                { opacity: 1, y: "0cqh", duration: TILE, ease: "power3.out" },
+                starts[index],
+              );
+
+              // The icon outline draws on inside the card's settle window
+              // (dash-primed inline so a seek to 0 shows it undrawn).
+              // Attribute-driven (not style): CSS strokeDashoffset changes
+              // under-invalidate the path region in Chrome, leaving stale
+              // stroke fragments on reverse seeks; attributes repaint fully.
+              var paths = card.querySelectorAll(".gca-icon path");
+              var iconStart = TILE * 0.25;
+              var iconAvail = TILE * 0.7;
+              paths.forEach(function (path, j) {
+                var len = path.getTotalLength();
+                path.setAttribute("stroke-dasharray", String(len));
+                path.setAttribute("stroke-dashoffset", String(len));
+                tl.fromTo(
+                  path,
+                  { attr: { "stroke-dashoffset": len } },
+                  {
+                    attr: { "stroke-dashoffset": 0 },
+                    duration: iconAvail * 0.55,
+                    ease: "power2.out",
+                    immediateRender: false,
+                  },
+                  starts[index] + iconStart + (j / paths.length) * iconAvail * 0.45,
+                );
+              });
+            });
+
+            // HOLD: intentionally still. Nothing floats, nothing pushes in.
+
+            // OUT: whole assembled stage leaves together.
+            if (exit !== "none") {
+              var OUT_START = duration - OUT;
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+              if (exit === "up") {
+                tl.to(stage, { y: "-3cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              }
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/grid-pixelate-wipe/demo.html b/docs/public/catalog/components/grid-pixelate-wipe/demo.html
new file mode 100644
index 0000000000..e242fd92bc
--- /dev/null
+++ b/docs/public/catalog/components/grid-pixelate-wipe/demo.html
@@ -0,0 +1,175 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Grid Pixelate Wipe — Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="grid-pixelate-wipe-demo"
+      data-width="1920"
+      data-height="1080"
+      data-duration="8"
+    >
+      <!-- Scene A -->
+      <div id="scene-a" class="demo-scene scene-a">
+        <div style="text-align: center; color: white">
+          <div style="font-size: 80px; font-weight: 800">Scene A</div>
+          <div style="font-size: 32px; margin-top: 20px; opacity: 0.7">
+            The grid wipe dissolves this away
+          </div>
+        </div>
+      </div>
+
+      <!-- Scene B (hidden initially) -->
+      <div id="scene-b" class="demo-scene scene-b">
+        <div style="text-align: center; color: white">
+          <div style="font-size: 80px; font-weight: 800">Scene B</div>
+          <div style="font-size: 32px; margin-top: 20px; opacity: 0.7">Revealed from the grid</div>
+        </div>
+      </div>
+
+      <!-- Grid Pixelate Wipe overlay -->
+      <div
+        id="grid-pixelate-overlay"
+        style="
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          pointer-events: none;
+          z-index: 999;
+          display: grid;
+        "
+      ></div>
+
+      <style>
+        #grid-pixelate-overlay {
+          --grid-color: black;
+        }
+
+        #grid-pixelate-overlay .grid-cell {
+          background: var(--grid-color);
+          transform: scale(0);
+          transform-origin: center center;
+        }
+      </style>
+
+      <style>
+        .demo-scene {
+          position: absolute;
+          width: 1920px;
+          height: 1080px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          font-family: "Inter", sans-serif;
+        }
+
+        .scene-a {
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        }
+
+        .scene-b {
+          background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+          opacity: 0;
+        }
+      </style>
+
+      <script>
+        (function () {
+          const COLS = 16;
+          const ROWS = 9;
+          const overlay = document.getElementById("grid-pixelate-overlay");
+
+          overlay.style.gridTemplateColumns = `repeat(${COLS}, 1fr)`;
+          overlay.style.gridTemplateRows = `repeat(${ROWS}, 1fr)`;
+
+          for (let i = 0; i < COLS * ROWS; i++) {
+            const cell = document.createElement("div");
+            cell.className = "grid-cell";
+            overlay.appendChild(cell);
+          }
+
+          const tl = gsap.timeline({ paused: true });
+
+          // Scene A visible for 2 seconds
+          // Grid covers screen (transition out of A)
+          tl.to(
+            ".grid-cell",
+            {
+              scale: 1,
+              duration: 0.6,
+              stagger: { amount: 0.6, from: "center" },
+              ease: "power2.inOut",
+            },
+            2.0,
+          );
+
+          // Swap scenes at midpoint
+          tl.set("#scene-a", { opacity: 0 }, 3.0);
+          tl.set("#scene-b", { opacity: 1 }, 3.0);
+
+          // Grid reveals scene B
+          tl.to(
+            ".grid-cell",
+            {
+              scale: 0,
+              duration: 0.6,
+              stagger: { amount: 0.6, from: "edges" },
+              ease: "power2.inOut",
+            },
+            3.0,
+          );
+
+          // Second transition: back to A using random pattern
+          tl.to(
+            ".grid-cell",
+            {
+              scale: 1,
+              duration: 0.5,
+              stagger: { amount: 0.5, from: "random" },
+              ease: "power2.inOut",
+            },
+            5.5,
+          );
+
+          tl.set("#scene-b", { opacity: 0 }, 6.3);
+          tl.set("#scene-a", { opacity: 1 }, 6.3);
+
+          tl.to(
+            ".grid-cell",
+            {
+              scale: 0,
+              duration: 0.5,
+              stagger: { amount: 0.5, from: "random" },
+              ease: "power2.inOut",
+            },
+            6.3,
+          );
+
+          window.__timelines = window.__timelines || {};
+          window.__timelines["grid-pixelate-wipe-demo"] = tl;
+        })();
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/grid-pixelate-wipe/grid-pixelate-wipe.html b/docs/public/catalog/components/grid-pixelate-wipe/grid-pixelate-wipe.html
new file mode 100644
index 0000000000..af8c94beea
--- /dev/null
+++ b/docs/public/catalog/components/grid-pixelate-wipe/grid-pixelate-wipe.html
@@ -0,0 +1,80 @@
+<!--
+  Grid Pixelate Wipe — transition effect.
+
+  Usage: place this overlay in your composition. To transition between
+  scenes, animate .grid-cell scale from 0→1 (cover) then 1→0 (reveal)
+  using GSAP stagger with a "from" pattern.
+
+  Customize:
+  - COLS / ROWS: grid density (default 16×9), edit in the script below
+  - --grid-color: cell fill color (default black)
+  - Stagger "from": "center" for radial, "edges" for inward, "random" for scatter
+-->
+
+<div
+  id="grid-pixelate-overlay"
+  style="
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 999;
+    display: grid;
+  "
+></div>
+
+<style>
+  #grid-pixelate-overlay {
+    --grid-color: black;
+  }
+
+  #grid-pixelate-overlay .grid-cell {
+    background: var(--grid-color);
+    transform: scale(0);
+    transform-origin: center center;
+  }
+</style>
+
+<script>
+  (function () {
+    const COLS = 16;
+    const ROWS = 9;
+    const overlay = document.getElementById("grid-pixelate-overlay");
+    if (!overlay) return;
+
+    overlay.style.gridTemplateColumns = `repeat(${COLS}, 1fr)`;
+    overlay.style.gridTemplateRows = `repeat(${ROWS}, 1fr)`;
+
+    for (let i = 0; i < COLS * ROWS; i++) {
+      const cell = document.createElement("div");
+      cell.className = "grid-cell";
+      overlay.appendChild(cell);
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration example:
+
+  // Cover screen with grid (transition out of scene A)
+  tl.to("#grid-pixelate-overlay .grid-cell", {
+    scale: 1,
+    duration: 0.6,
+    stagger: { amount: 0.6, from: "center" },
+    ease: "power2.inOut",
+  }, 3.0);
+
+  // Swap scene content at midpoint
+  tl.set("#scene-a", { opacity: 0 }, 3.6);
+  tl.set("#scene-b", { opacity: 1 }, 3.6);
+
+  // Reveal scene B by removing grid
+  tl.to("#grid-pixelate-overlay .grid-cell", {
+    scale: 0,
+    duration: 0.6,
+    stagger: { amount: 0.6, from: "edges" },
+    ease: "power2.inOut",
+  }, 3.6);
+-->
diff --git a/docs/public/catalog/components/halftone-dissolve/README.md b/docs/public/catalog/components/halftone-dissolve/README.md
new file mode 100644
index 0000000000..4395db1372
--- /dev/null
+++ b/docs/public/catalog/components/halftone-dissolve/README.md
@@ -0,0 +1,68 @@
+# halftone-dissolve
+
+Transition texture primitive: scene A dissolves into scene B through a
+growing halftone dot field. Accent ink dots pop onto a fixed staggered grid
+smallest-first, each dot then opens into a circular window onto B (the ink
+leads the window by a beat, so every site flashes accent before B fills it),
+until the windows merge and B fully replaces A. Radius per dot is a pure
+function of (grid position, progress) via a seeded threshold map; the
+direction enum orders the thresholds. 3.5s authored, elastic HOLD on B
+(never time-scaled).
+
+## Mounting
+
+```html
+<div
+  class="clip"
+  data-composition-id="halftone-dissolve"
+  data-composition-src="./components/halftone-dissolve.html"
+  data-variable-values='{"direction":"center","dot_size":"large","accent":"blue"}'
+  data-start="0"
+  data-duration="3.5"
+  data-track-index="0"
+></div>
+```
+
+## Scene slots
+
+Both scenes are slots. Place inert templates anywhere in the HOST page:
+
+```html
+<template data-slot="halftone-dissolve-a"> ...outgoing scene... </template>
+<template data-slot="halftone-dissolve-b"> ...incoming scene... </template>
+```
+
+Direct `img` / `video` children are stretched to cover the stage; arbitrary
+HTML is centered. A missing slot falls back to a token monogram tile
+(A neutral on `--muted`, B tinted by the accent).
+
+## Variables
+
+| id          | type   | default | notes                                                                                                              |
+| ----------- | ------ | ------- | ------------------------------------------------------------------------------------------------------------------ |
+| dot_size    | enum   | medium  | small, medium, or large grid pitch (host width / 44, 30, 20).                                                      |
+| direction   | enum   | ltr     | ltr sweeps left to right, center grows from the middle, noise is a pure seeded scatter.                            |
+| dissolve_at | number | 1.1     | Seconds from mount start when the dissolve begins. Clamped so the 1.3s dissolve and any exit stay inside the clip. |
+| accent      | enum   | green   | green maps to --brand, blue to --accent, violet to --accent-2. Colors the ink dots.                                |
+| exit        | enum   | none    | none holds scene B (frame roots own transitions); fade or up add a 0.45s departure.                                |
+
+## Choreography
+
+- 0.00s: scene A holds clean; no dots.
+- dissolve_at: the field starts. Dots appear smallest-first in threshold
+  order (with a seeded jitter so the front stays granular, never ruled),
+  each as accent ink, then opening into a window onto B.
+- dissolve_at + 1.3s: the windows merge past full coverage; the clip path
+  releases and B holds clean.
+- HOLD: dead still on B, elastic with the clip duration.
+
+Sync point `dissolve` fires as the field starts; align SFX to it.
+
+## Determinism
+
+The grid and its threshold map are computed once at build from a fixed LCG
+seed. One plain-object progress tween feeds one painter that redraws the
+ink canvas from scratch and rebuilds B's clip-path string, all pure
+functions of progress, so eventful seeks land identical frames in any order
+and either direction. The raster and clip-path basis is the host box
+measured once at mount.
diff --git a/docs/public/catalog/components/halftone-dissolve/demo.html b/docs/public/catalog/components/halftone-dissolve/demo.html
new file mode 100644
index 0000000000..5fd6431641
--- /dev/null
+++ b/docs/public/catalog/components/halftone-dissolve/demo.html
@@ -0,0 +1,163 @@
+<!doctype html>
+<!--
+  halftone-dissolve demo. A full-bleed 1920x1080 LIGHT host mounts the
+  primitive through data-composition-src with non-default variables
+  (center direction, large dots, blue accent) and supplies both scene
+  slots to prove the slot path while the primitive stays elastic.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Halftone Dissolve Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #f5f6f8);
+      }
+
+      #root {
+        --bg: #f5f6f8;
+        --fg: #101318;
+        --muted: #5b6472;
+        --surface: #ffffff;
+        --border: #d7dce4;
+        --brand: #14a35e;
+        --accent: #2f6fed;
+        --accent-2: #7a5cd6;
+        --radius: 24px;
+        --font-display: "Inter", system-ui, sans-serif;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg);
+      }
+
+      .mount-stage {
+        position: absolute;
+        inset: 0;
+        container-type: size;
+        overflow: hidden;
+      }
+
+      .demo-scene {
+        position: absolute;
+        inset: 0;
+        display: grid;
+        place-items: center;
+        gap: 24px;
+        font-family: var(--font-display, system-ui, sans-serif);
+      }
+
+      .demo-scene .panel {
+        display: grid;
+        place-items: center;
+        gap: 18px;
+        width: 720px;
+        height: 420px;
+        border: 1px solid var(--border, #d7dce4);
+        border-radius: var(--radius, 24px);
+        background: var(--surface, #ffffff);
+        box-shadow: 0 30px 70px rgba(16, 19, 24, 0.08);
+      }
+
+      .demo-scene .word {
+        color: var(--fg, #101318);
+        font-size: 84px;
+        font-weight: 600;
+        letter-spacing: -0.01em;
+      }
+
+      .demo-scene .tag {
+        color: var(--muted, #5b6472);
+        font-family: var(--font-mono, monospace);
+        font-size: 26px;
+        letter-spacing: 0.14em;
+        text-transform: uppercase;
+      }
+
+      .demo-scene.b .panel {
+        border-color: color-mix(in srgb, var(--accent, #2f6fed) 40%, var(--border, #d7dce4));
+        background: color-mix(in srgb, var(--accent, #2f6fed) 6%, var(--surface, #ffffff));
+      }
+
+      .demo-scene.b .word {
+        color: var(--accent, #2f6fed);
+      }
+    </style>
+  </head>
+  <body>
+    <template data-slot="halftone-dissolve-a">
+      <div class="demo-scene a">
+        <div class="panel">
+          <span class="tag">Scene A</span>
+          <span class="word">Before</span>
+        </div>
+      </div>
+    </template>
+    <template data-slot="halftone-dissolve-b">
+      <div class="demo-scene b">
+        <div class="panel">
+          <span class="tag">Scene B</span>
+          <span class="word">After</span>
+        </div>
+      </div>
+    </template>
+
+    <div
+      id="root"
+      data-composition-id="halftone-dissolve-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="3.5"
+      data-fps="30"
+    >
+      <div
+        id="halftone-dissolve-mount"
+        class="mount-stage clip"
+        data-composition-id="halftone-dissolve"
+        data-composition-src="./halftone-dissolve.html"
+        data-variable-values='{"direction":"center","dot_size":"large","dissolve_at":1.0,"accent":"blue"}'
+        data-start="0"
+        data-duration="3.5"
+        data-track-index="0"
+        data-width="1920"
+        data-height="1080"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["halftone-dissolve-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "halftone-dissolve.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/halftone-dissolve/halftone-dissolve.html b/docs/public/catalog/components/halftone-dissolve/halftone-dissolve.html
new file mode 100644
index 0000000000..30e5dc063d
--- /dev/null
+++ b/docs/public/catalog/components/halftone-dissolve/halftone-dissolve.html
@@ -0,0 +1,420 @@
+<!doctype html>
+<!--
+  halftone-dissolve: HyperFrames video primitive (transitions / texture)
+
+  Scene A dissolves into scene B through a growing halftone dot field:
+  accent ink dots pop onto a fixed grid smallest-first, each dot then
+  opens into a window onto B, until the windows merge and B fully
+  replaces A. Radius per dot is a pure function of (grid position, t)
+  via a seeded threshold map; the direction enum orders the thresholds.
+
+  Scenes are SLOTS. Callers supply content by placing inert templates
+  anywhere in the HOST page (templates never render, and the runtime
+  wipes the host clip's own children on mount):
+
+    <template data-slot="halftone-dissolve-a"> ... </template>
+    <template data-slot="halftone-dissolve-b"> ... </template>
+
+  Direct img/video children are stretched to cover the stage. When a
+  slot is absent, the primitive renders a token monogram tile (A neutral,
+  B accent-tinted), drawn entirely from contract tokens.
+
+  Variables (declared in data-composition-variables below):
+    - dot_size ("small" | "medium" | "large"): grid pitch.
+    - direction ("ltr" | "center" | "noise"): threshold ordering. ltr
+      sweeps left to right, center grows from the middle, noise is a
+      pure seeded scatter.
+    - dissolve_at (seconds): when the dissolve begins. Clamped so the
+      1.3s dissolve and any exit stay inside the clip.
+    - accent ("green" | "blue" | "violet"): ink dot color; green rides
+      --brand, blue rides --accent, violet rides --accent-2.
+    - exit ("none" | "fade" | "up"): default none, B holds to the cut.
+
+  Envelope, fixed segments with elastic HOLD only (never timeScale):
+    A holds until dissolve_at, the dissolve runs 1.3s, then B holds
+    dead still; OUT = 0.45s only when exit is not none.
+
+  Determinism:
+    The grid and its threshold map are computed exactly once at build
+    from fixed LCG seed 0x4a17f03d. Every frame derives from (table,
+    progress): one plain-object progress tween feeds one onUpdate
+    painter that redraws the ink canvas from scratch and rebuilds B's
+    clip-path string. No Math.random, no wall clock, no incremental
+    state. Eventful seeks (suppressEvents false) land identical frames
+    in any order. The raster and clip-path basis is the host box
+    measured once at mount, same law as the canvas raster basis.
+-->
+<html
+  lang="en"
+  data-composition-id="halftone-dissolve"
+  data-composition-duration="3.5"
+  data-composition-variables='[
+    { "id": "dot_size", "type": "enum", "role": "style", "label": "Dot size", "description": "Grid pitch for the halftone field.", "default": "medium", "options": [{ "value": "small", "label": "Small" }, { "value": "medium", "label": "Medium" }, { "value": "large", "label": "Large" }] },
+    { "id": "direction", "type": "enum", "role": "timing", "label": "Direction", "description": "Threshold ordering: ltr sweeps left to right, center grows from the middle, noise scatters.", "default": "ltr", "options": [{ "value": "ltr", "label": "Left to right" }, { "value": "center", "label": "Center out" }, { "value": "noise", "label": "Noise" }] },
+    { "id": "dissolve_at", "type": "number", "role": "timing", "label": "Dissolve at", "description": "Seconds from mount start when the dissolve begins.", "default": 1.1, "min": 0.2, "max": 10, "step": 0.1, "unit": "s" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Ink dot color: green rides --brand, blue rides --accent, violet rides --accent-2.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: scene B holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Halftone Dissolve</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="halftone-dissolve" data-duration="3.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, "Inter", system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .htd-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .htd-stage {
+            position: absolute;
+            inset: 0;
+            will-change: transform, opacity;
+          }
+
+          .htd-scene {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+          }
+
+          .htd-scene > img,
+          .htd-scene > video {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+          }
+
+          .htd-scene-b {
+            will-change: clip-path;
+            /* B must be opaque: an open window that shows the ink canvas
+               (or A) through a transparent incoming scene breaks the
+               "B fully replaces A" contract for card-style slot content. */
+            background: var(--bg, transparent);
+          }
+
+          .htd-ink {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+          }
+
+          .htd-tile {
+            display: grid;
+            place-items: center;
+            width: 46cqmin;
+            height: 46cqmin;
+            border: 0.18cqmin solid
+              color-mix(in srgb, var(--htd-tile-tint) 46%, var(--border, #475569));
+            border-radius: var(--radius, 3cqmin);
+            background: color-mix(in srgb, var(--surface, #14171c) 88%, var(--htd-tile-tint));
+            box-shadow: 0 3cqh 9cqh color-mix(in srgb, var(--bg, #000000) 35%, transparent);
+          }
+
+          .htd-tile-glyph {
+            color: var(--htd-tile-tint);
+            font-size: 22cqmin;
+            font-weight: 600;
+            line-height: 1;
+            letter-spacing: 0.02em;
+          }
+        </style>
+
+        <div
+          id="halftone-dissolve-clip"
+          class="htd-clip clip"
+          data-start="0"
+          data-duration="3.5"
+          data-track-index="0"
+        >
+          <div class="htd-stage">
+            <div class="htd-scene htd-scene-a">
+              <div class="htd-tile" style="--htd-tile-tint: var(--muted, #94a3b8)">
+                <span class="htd-tile-glyph" aria-hidden="true">A</span>
+              </div>
+            </div>
+            <canvas class="htd-ink" aria-hidden="true"></canvas>
+            <div class="htd-scene htd-scene-b">
+              <div class="htd-tile" style="--htd-tile-tint: var(--htd-accent, #71f5a7)">
+                <span class="htd-tile-glyph" aria-hidden="true">B</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".htd-stage");
+            var sceneA = root.querySelector(".htd-scene-a");
+            var sceneB = root.querySelector(".htd-scene-b");
+            var canvas = root.querySelector(".htd-ink");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            function num(value, fallback, min, max) {
+              var n = Number(value);
+              if (!isFinite(n)) n = fallback;
+              return Math.max(min, Math.min(max, n));
+            }
+
+            var dotSize =
+              vars.dot_size === "small" || vars.dot_size === "large" ? vars.dot_size : "medium";
+            var direction =
+              vars.direction === "center" || vars.direction === "noise" ? vars.direction : "ltr";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            // The bundler mirrors composition variables as scoped CSS custom
+            // props, so this unit's own accent variable shadows the contract
+            // --accent token inside the subtree ("blue" is a valid CSS color
+            // and would render pure blue). When the shadow is present, fall
+            // back to the literal contract value instead of var(--accent).
+            var computedAccent = getComputedStyle(root).getPropertyValue("--accent").trim();
+            if (
+              computedAccent === "green" ||
+              computedAccent === "blue" ||
+              computedAccent === "violet"
+            ) {
+              accentColors.blue = "#61a8ff";
+            }
+            root.style.setProperty("--htd-accent", accentColors[accent]);
+
+            // SLOTS. Caller templates live at HOST DOCUMENT level (the mount
+            // wipes host-clip children, and templates never render).
+            var hostDoc = root.ownerDocument;
+            function fillSlot(scene, slotName) {
+              var slotTemplate = null;
+              try {
+                slotTemplate = hostDoc.querySelector('template[data-slot="' + slotName + '"]');
+              } catch (error) {
+                slotTemplate = null;
+              }
+              if (slotTemplate) {
+                scene.querySelector(".htd-tile").remove();
+                scene.appendChild(hostDoc.importNode(slotTemplate.content, true));
+              }
+            }
+            fillSlot(sceneA, "halftone-dissolve-a");
+            fillSlot(sceneB, "halftone-dissolve-b");
+
+            // Envelope.
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "3.5"));
+            var OUT = exit === "none" ? 0 : 0.45;
+            var DISSOLVE = Math.min(1.3, Math.max(0.4, duration - OUT - 0.6));
+            var maxAt = Math.max(0.2, duration - DISSOLVE - OUT - 0.05);
+            var dissolveAt = num(vars.dissolve_at, 1.1, 0.2, maxAt);
+            var OUT_START = duration - OUT;
+
+            // Raster and clip-path basis, fixed once at mount.
+            var dpr = Math.min(2, Math.max(1, Number(window.devicePixelRatio) || 1));
+            var box = root.getBoundingClientRect();
+            var cssW = Math.max(1, Math.round(box.width) || 640);
+            var cssH = Math.max(1, Math.round(box.height) || 360);
+            canvas.width = Math.round(cssW * dpr);
+            canvas.height = Math.round(cssH * dpr);
+            var ctx = canvas.getContext("2d");
+
+            var probe = hostDoc.createElement("span");
+            probe.style.color = accentColors[accent];
+            root.appendChild(probe);
+            var inkColor = getComputedStyle(probe).color || "#71f5a7";
+            probe.remove();
+
+            // The grid: fixed cells with alternate rows offset half a pitch
+            // (the classic halftone stagger). Thresholds order the growth;
+            // a seeded jitter keeps every front granular instead of ruled.
+            var pitches = { small: 1 / 44, medium: 1 / 30, large: 1 / 20 };
+            var cell = Math.max(8, cssW * pitches[dotSize]);
+            var cols = Math.ceil(cssW / cell) + 2;
+            var rows = Math.ceil(cssH / cell) + 1;
+            var R_MAX = cell * 0.78; // overlapping full coverage
+            var dots = (function () {
+              var state = 0x4a17f03d;
+              function next() {
+                state = (Math.imul(1664525, state) + 1013904223) >>> 0;
+                return state / 4294967296;
+              }
+              var list = [];
+              var maxDist = Math.hypot(cssW / 2, cssH / 2);
+              for (var r = 0; r < rows; r += 1) {
+                for (var c = 0; c < cols; c += 1) {
+                  var x = (c + (r % 2 === 0 ? 0.25 : 0.75)) * cell;
+                  var y = (r + 0.5) * cell;
+                  var base;
+                  if (direction === "center") {
+                    base = Math.hypot(x - cssW / 2, y - cssH / 2) / maxDist;
+                  } else if (direction === "noise") {
+                    base = next();
+                  } else {
+                    base = x / cssW;
+                  }
+                  var jitter = direction === "noise" ? 0 : (next() - 0.5) * 0.22;
+                  var th = Math.max(0, Math.min(1, base + jitter));
+                  list.push({ x: x, y: y, th: th * 0.62 });
+                }
+              }
+              return list;
+            })();
+
+            function clamp01(v) {
+              return v < 0 ? 0 : v > 1 ? 1 : v;
+            }
+            function smooth(v) {
+              return v * v * (3 - 2 * v);
+            }
+
+            // Per-dot growth: the window opens over 38 percent of progress
+            // after its threshold; the ink dot leads it by a small offset so
+            // each site pops as accent ink before B fills it.
+            function windowRadius(dot, p) {
+              return R_MAX * smooth(clamp01((p - dot.th) / 0.38));
+            }
+            function inkRadius(dot, p) {
+              return R_MAX * smooth(clamp01((p + 0.07 - dot.th) / 0.38));
+            }
+
+            // One progress object feeds one painter. The painter redraws the
+            // ink canvas from scratch and rebuilds B's clip-path string, all
+            // a pure function of P.p. The last applied clip string is cached
+            // only to skip identical style writes, never to skip repaints of
+            // changed frames.
+            var P = { p: 0 };
+            var lastClip = null;
+            function applyClip(value) {
+              if (value !== lastClip) {
+                sceneB.style.clipPath = value;
+                lastClip = value;
+              }
+            }
+            function paint() {
+              var p = P.p;
+              ctx.clearRect(0, 0, canvas.width, canvas.height);
+              if (p >= 1) {
+                applyClip("none");
+                return;
+              }
+              if (p <= 0) {
+                applyClip('path("M 0 0 Z")');
+                return;
+              }
+              ctx.fillStyle = inkColor;
+              var parts = [];
+              for (var i = 0; i < dots.length; i += 1) {
+                var dot = dots[i];
+                var ri = inkRadius(dot, p);
+                if (ri > 0.25) {
+                  ctx.beginPath();
+                  ctx.arc(dot.x * dpr, dot.y * dpr, ri * dpr, 0, Math.PI * 2);
+                  ctx.fill();
+                }
+                var rw = windowRadius(dot, p);
+                if (rw > 0.25) {
+                  var x0 = (dot.x + rw).toFixed(2);
+                  var xr = rw.toFixed(2);
+                  var yy = dot.y.toFixed(2);
+                  parts.push(
+                    "M " +
+                      x0 +
+                      " " +
+                      yy +
+                      " A " +
+                      xr +
+                      " " +
+                      xr +
+                      " 0 1 0 " +
+                      (dot.x - rw).toFixed(2) +
+                      " " +
+                      yy +
+                      " A " +
+                      xr +
+                      " " +
+                      xr +
+                      " 0 1 0 " +
+                      x0 +
+                      " " +
+                      yy +
+                      " Z",
+                  );
+                }
+              }
+              applyClip(parts.length ? 'path("' + parts.join(" ") + '")' : 'path("M 0 0 Z")');
+            }
+
+            gsap.set(stage, { opacity: 1, y: "0cqh" });
+
+            var tl = gsap.timeline({
+              paused: true,
+              onUpdate: paint,
+            });
+
+            // Anchor tween: spans the full authored duration so onUpdate
+            // (canvas + clip rebuild) fires for every eventful seek in [0, D]
+            // and holds keep tl.time() honest.
+            tl.to({ t: 0 }, { t: 1, duration: duration, ease: "none" }, 0);
+
+            // The dissolve: one plain-object progress tween. power1.inOut
+            // keeps the front unhurried at both ends (smallest-first pops,
+            // unforced merge).
+            tl.fromTo(P, { p: 0 }, { p: 1, duration: DISSOLVE, ease: "power1.inOut" }, dissolveAt);
+
+            // HOLD: dead still on B (clip released, ink canvas clear).
+
+            // OUT: optional departure; exit none holds until the frame cuts.
+            if (exit === "up") {
+              tl.to(stage, { y: "-4cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "fade") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            }
+
+            tl.seek(0);
+            paint();
+            window.__timelines = window.__timelines || {};
+            window.__timelines["halftone-dissolve"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/headline-slam/demo.html b/docs/public/catalog/components/headline-slam/demo.html
new file mode 100644
index 0000000000..4d292b63da
--- /dev/null
+++ b/docs/public/catalog/components/headline-slam/demo.html
@@ -0,0 +1,100 @@
+<!doctype html>
+<!--
+  headline-slam demo. This standalone composition mounts headline-slam.html
+  through data-composition-src. Non-default copy, accent index, and color
+  prove that all variables flow through the elastic host mount.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Headline Slam Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0b0c0e;
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f7f8fa;
+        --surface: #15181e;
+        --border: #343943;
+        --font-display: Inter, system-ui, sans-serif;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 44%, #171a21 0%, var(--bg) 72%);
+      }
+
+      .mount-card {
+        width: 80%;
+        height: 60%;
+        left: 10%;
+        top: 20%;
+        container-type: size;
+        overflow: hidden;
+        border: 1px solid rgba(247, 248, 250, 0.12);
+        border-radius: 32px;
+        background: color-mix(in srgb, var(--surface) 88%, transparent);
+        box-shadow: 0 54px 120px rgba(0, 0, 0, 0.46);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="headline-slam-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="3.5"
+      data-fps="30"
+    >
+      <div
+        id="headline-slam-mount"
+        class="mount-card clip"
+        data-composition-id="headline-slam"
+        data-composition-src="./headline-slam.html"
+        data-variable-values='{"text":"Make the moment count","accent_word_index":3,"accent":"violet"}'
+        data-start="0"
+        data-duration="3.5"
+        data-track-index="0"
+        data-width="1536"
+        data-height="648"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["headline-slam-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "headline-slam.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/headline-slam/headline-slam.html b/docs/public/catalog/components/headline-slam/headline-slam.html
new file mode 100644
index 0000000000..154c54f52b
--- /dev/null
+++ b/docs/public/catalog/components/headline-slam/headline-slam.html
@@ -0,0 +1,237 @@
+<!doctype html>
+<!--
+  headline-slam: HyperFrames video primitive
+
+  One headline scales down from 1.6 to rest with expo.out weight. Its landing
+  drives a deterministic three-frame stage shake, followed by a quiet drift
+  and a fast upward exit.
+
+  Variables:
+    text: headline copy
+    accent_word_index: zero-based word index to color, out of range colors none
+    accent: green, blue, or violet accent color
+    shadow: drop shadow under the headline, on by default
+
+  Envelope, fixed IN and OUT with elastic HOLD:
+    IN_BASE  = 0.72s, headline slam and three-frame impact shake
+    HOLD     = max(0, D - IN - OUT), one subtle drift cycle
+    OUT_BASE = 0.46s, headline whips upward out of frame
+    If D is shorter than IN_BASE + OUT_BASE, IN and OUT compress together.
+    The timeline is never time-scaled.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, and has no data-width or
+  data-height. One paused timeline registers under the literal headline-slam
+  key.
+-->
+<html
+  lang="en"
+  data-composition-id="headline-slam"
+  data-composition-duration="3.5"
+  data-composition-variables='[
+    { "id": "text", "type": "string", "role": "content", "label": "Headline", "description": "Text displayed as the headline.", "default": "Ship it today" },
+    { "id": "accent_word_index", "type": "number", "role": "content", "label": "Accent word index", "description": "Zero-based word index to color. Out of range leaves the headline unaccented.", "default": 1, "step": 1 },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Color applied to the selected word.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "shadow", "type": "boolean", "role": "style", "label": "Shadow", "description": "Drop shadow cast under the headline. On by default; set false for a flat matte look.", "default": true }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Headline Slam</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="headline-slam" data-duration="3.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .hs-clip,
+          .hs-stage {
+            position: absolute;
+            inset: 0;
+            width: 100cqw;
+            height: 100cqh;
+          }
+
+          .hs-clip {
+            overflow: hidden;
+          }
+
+          .hs-stage {
+            display: grid;
+            place-items: center;
+            will-change: transform;
+          }
+
+          .hs-headline {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 2cqw;
+            width: 90cqw;
+            min-height: 22cqh;
+            color: var(--fg, #f8fafc);
+            font-size: var(--hs-font-size, 10.5cqw);
+            font-weight: 900;
+            line-height: 0.88;
+            letter-spacing: -0.5cqw;
+            text-align: center;
+            white-space: nowrap;
+            transform-origin: 50% 50%;
+            will-change: transform, opacity;
+          }
+
+          /* Shadow is on by default; the shadow variable opts out of it. */
+          .hs-headline.hs-shadow {
+            text-shadow: 0 1.2cqh 4.5cqh color-mix(in srgb, #000 52%, transparent);
+          }
+
+          .hs-word {
+            display: inline-block;
+          }
+
+          .hs-word-accent {
+            color: var(--hs-accent, #71f5a7);
+          }
+        </style>
+
+        <div
+          id="headline-slam-clip"
+          class="hs-clip clip"
+          data-start="0"
+          data-duration="3.5"
+          data-track-index="0"
+        >
+          <div class="hs-stage">
+            <div class="hs-headline" role="heading" aria-level="1"></div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".hs-stage");
+            var headline = root.querySelector(".hs-headline");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var text = vars.text == null ? "Ship it today" : String(vars.text);
+            var indexValue = Number(vars.accent_word_index);
+            var accentWordIndex = Number.isFinite(indexValue) ? Math.trunc(indexValue) : 1;
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #b895ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var shadow = !(vars.shadow === false || vars.shadow === "false");
+            var words = text.trim() === "" ? [] : text.trim().split(/\s+/);
+
+            root.style.setProperty("--hs-accent", accentColors[accent]);
+            headline.classList.toggle("hs-shadow", shadow);
+            headline.setAttribute("aria-label", text);
+
+            words.forEach(function (word, index) {
+              var span = document.createElement("span");
+              span.className = index === accentWordIndex ? "hs-word hs-word-accent" : "hs-word";
+              span.textContent = word;
+              span.setAttribute("aria-hidden", "true");
+              headline.appendChild(span);
+            });
+
+            // Deterministic fit from character count: DOM measurement is zero at
+            // mount time (the template is not laid out yet), so it never fires.
+            // 0.62 approximates the average glyph/em width of the bold face; the
+            // 56cqw rest-state cap keeps the 1.6x overshoot peak inside 90cqw.
+            var approxWidthCqw = text.length * 10.5 * 0.62;
+            if (approxWidthCqw > 56) {
+              var fitted = Math.max(3.5, 56 / (text.length * 0.62));
+              root.style.setProperty("--hs-font-size", fitted.toFixed(2) + "cqw");
+            }
+
+            var IN_BASE = 0.72;
+            var OUT_BASE = 0.46;
+            var LAND_AT_BASE = 0.58;
+            var SHAKE_FRAME_BASE = 1 / 30;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "3.5"));
+            var baseTotal = IN_BASE + OUT_BASE;
+            var envelopeScale = duration < baseTotal ? duration / baseTotal : 1;
+            var IN = IN_BASE * envelopeScale;
+            var OUT = OUT_BASE * envelopeScale;
+            var LAND_AT = LAND_AT_BASE * envelopeScale;
+            var SHAKE_FRAME = SHAKE_FRAME_BASE * envelopeScale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var HOLD_START = IN;
+            var OUT_START = IN + HOLD;
+
+            var tl = gsap.timeline({ paused: true });
+
+            tl.fromTo(
+              headline,
+              { scale: 1.6, opacity: 0, y: 0 },
+              { scale: 1, opacity: 1, y: 0, duration: LAND_AT, ease: "expo.out" },
+              0,
+            );
+
+            tl.to(
+              stage,
+              { x: "0.55cqw", y: "-0.3cqh", duration: SHAKE_FRAME, ease: "power2.out" },
+              LAND_AT,
+            );
+            tl.to(stage, {
+              x: "-0.38cqw",
+              y: "0.2cqh",
+              duration: SHAKE_FRAME,
+              ease: "power2.out",
+            });
+            tl.to(stage, { x: 0, y: 0, duration: SHAKE_FRAME, ease: "power2.out" });
+
+            if (HOLD > 0) {
+              tl.fromTo(
+                headline,
+                { y: 0 },
+                {
+                  y: "-0.55cqh",
+                  duration: HOLD / 2,
+                  ease: "sine.inOut",
+                  yoyo: true,
+                  repeat: 1,
+                  immediateRender: false,
+                },
+                HOLD_START,
+              );
+            }
+
+            tl.to(headline, { y: "-120cqh", duration: OUT, ease: "power4.in" }, OUT_START);
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["headline-slam"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/hero-device-assemble/demo.html b/docs/public/catalog/components/hero-device-assemble/demo.html
new file mode 100644
index 0000000000..c9453f8fdf
--- /dev/null
+++ b/docs/public/catalog/components/hero-device-assemble/demo.html
@@ -0,0 +1,190 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Hero Device Assemble - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+        transform: scale(0.84);
+        transform-origin: center center;
+      }
+      .hf-remocn-hero-device-assemble {
+        --hf-accent: #2563eb;
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-hero-device-assemble {
+        width: 820px;
+        min-height: 460px;
+        border-radius: 28px;
+        padding: 28px;
+        background: #f5f5f4;
+        border: 1px solid #e4e4e7;
+        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.10);
+        display: grid;
+        grid-template-columns: 280px 1fr;
+        gap: 22px;
+        overflow: hidden;
+      }
+      .hf-remocn-hero-device-assemble .panel {
+        border: 1px solid #e4e4e7;
+        border-radius: 16px;
+        background: #ffffff;
+        padding: 22px;
+      }
+      .hf-remocn-hero-device-assemble .prompt {
+        display: grid;
+        gap: 12px;
+        align-content: start;
+      }
+      .hf-remocn-hero-device-assemble .pill {
+        height: 40px;
+        border-radius: 999px;
+        background: #18181b;
+        color: #fff;
+        display: flex;
+        align-items: center;
+        padding: 0 18px;
+        font-size: 13px;
+        font-weight: 600;
+        letter-spacing: -0.01em;
+        transform: translateX(var(--hf-pill-x, 0px));
+      }
+      .hf-remocn-hero-device-assemble .preview {
+        display: grid;
+        gap: 14px;
+      }
+      .hf-remocn-hero-device-assemble .card {
+        min-height: 78px;
+        border-radius: 12px;
+        background: #fff;
+        border: 1px solid #e4e4e7;
+        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
+        padding: 14px 16px;
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        justify-content: center;
+        transform: translate(var(--hf-card-x, 0px), var(--hf-card-y, 0px))
+          scale(var(--hf-card-scale, 1));
+        opacity: var(--hf-card-opacity, 1);
+      }
+      .hf-remocn-hero-device-assemble .card-line {
+        height: 8px;
+        border-radius: 4px;
+        background: #e4e4e7;
+      }
+      .hf-remocn-hero-device-assemble .card-line.short {
+        width: 55%;
+      }
+      .hf-remocn-hero-device-assemble .card-line.medium {
+        width: 75%;
+      }
+      .hf-remocn-hero-device-assemble .card-line.long {
+        width: 90%;
+      }
+      .hf-remocn-hero-device-assemble h3 {
+        margin: 0 0 10px;
+        font-size: 24px;
+        font-weight: 700;
+        letter-spacing: -0.03em;
+        color: #18181b;
+        line-height: 1.2;
+      }
+      .hf-remocn-hero-device-assemble p {
+        margin: 0 0 14px;
+        font-size: 13px;
+        color: #71717a;
+        line-height: 1.5;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="hero-device-assemble-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-hero-device-assemble">
+          <div class="panel prompt">
+            <h3>Hero Device Assemble</h3>
+            <p>A landing-page device hero assembles from layers.</p>
+            <div class="pill">Generate scene</div>
+            <div class="pill">Refine motion</div>
+            <div class="pill">Export</div>
+          </div>
+          <div class="panel preview">
+            <div class="card">
+              <div class="card-line long"></div>
+              <div class="card-line medium"></div>
+            </div>
+            <div class="card">
+              <div class="card-line medium"></div>
+              <div class="card-line short"></div>
+            </div>
+            <div class="card">
+              <div class="card-line long"></div>
+              <div class="card-line medium"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-hero-device-assemble .pill",
+          { "--hf-pill-x": "-18px", opacity: 0 },
+          { "--hf-pill-x": "0px", opacity: 1, duration: 0.25, stagger: 0.08, ease: "power2.out" },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-hero-device-assemble .card",
+          { "--hf-card-y": "28px", "--hf-card-scale": 0.96, "--hf-card-opacity": 0 },
+          {
+            "--hf-card-y": "0px",
+            "--hf-card-scale": 1,
+            "--hf-card-opacity": 1,
+            duration: 0.42,
+            stagger: 0.12,
+            ease: "power3.out",
+          },
+          startTime + 0.2,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["hero-device-assemble-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/hero-device-assemble/hero-device-assemble.html b/docs/public/catalog/components/hero-device-assemble/hero-device-assemble.html
new file mode 100644
index 0000000000..5b02dba6fb
--- /dev/null
+++ b/docs/public/catalog/components/hero-device-assemble/hero-device-assemble.html
@@ -0,0 +1,94 @@
+<!--
+  Hero Device Assemble - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-hero-device-assemble">
+  <div class="panel prompt">
+    <h3>Hero Device Assemble</h3>
+    <p>A landing-page device hero assembles from layers.</p>
+    <div class="pill">Generate scene</div>
+    <div class="pill">Refine motion</div>
+    <div class="pill">Export</div>
+  </div>
+  <div class="panel preview">
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+  </div>
+</div>
+
+<style>
+  .hf-remocn-hero-device-assemble {
+    --hf-accent: #2563eb;
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-hero-device-assemble {
+    width: 820px;
+    min-height: 460px;
+    border-radius: 34px;
+    padding: 28px;
+    background: linear-gradient(135deg, #f8fafc, #e0f2fe);
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);
+    display: grid;
+    grid-template-columns: 280px 1fr;
+    gap: 22px;
+    overflow: hidden;
+  }
+  .hf-remocn-hero-device-assemble .panel {
+    border: 1px solid rgba(15, 23, 42, 0.08);
+    border-radius: 24px;
+    background: rgba(255, 255, 255, 0.76);
+    padding: 22px;
+    backdrop-filter: blur(12px);
+  }
+  .hf-remocn-hero-device-assemble .prompt {
+    display: grid;
+    gap: 12px;
+    align-content: start;
+  }
+  .hf-remocn-hero-device-assemble .pill {
+    height: 42px;
+    border-radius: 999px;
+    background: #111827;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    padding: 0 18px;
+    font-weight: 800;
+    transform: translateX(var(--hf-pill-x, 0px));
+  }
+  .hf-remocn-hero-device-assemble .preview {
+    display: grid;
+    gap: 14px;
+  }
+  .hf-remocn-hero-device-assemble .card {
+    min-height: 78px;
+    border-radius: 18px;
+    background: #fff;
+    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
+    transform: translate(var(--hf-card-x, 0px), var(--hf-card-y, 0px))
+      scale(var(--hf-card-scale, 1));
+    opacity: var(--hf-card-opacity, 1);
+  }
+  .hf-remocn-hero-device-assemble h3 {
+    margin: 0 0 14px;
+    font-size: 32px;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-hero-device-assemble p {
+    margin: 0;
+    color: #475569;
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-hero-device-assemble .pill', { '--hf-pill-x': '-18px', opacity: 0 }, { '--hf-pill-x': '0px', opacity: 1, duration: 0.25, stagger: 0.08, ease: 'power2.out' }, startTime); tl.fromTo('.hf-remocn-hero-device-assemble .card', { '--hf-card-y': '28px', '--hf-card-scale': 0.96, '--hf-card-opacity': 0 }, { '--hf-card-y': '0px', '--hf-card-scale': 1, '--hf-card-opacity': 1, duration: 0.42, stagger: 0.12, ease: 'power3.out' }, startTime + 0.2);
+-->
diff --git a/docs/public/catalog/components/hw-arrow/assets/fonts/Caveat-700-latin.woff2 b/docs/public/catalog/components/hw-arrow/assets/fonts/Caveat-700-latin.woff2
new file mode 100644
index 0000000000..5a3423426f
Binary files /dev/null and b/docs/public/catalog/components/hw-arrow/assets/fonts/Caveat-700-latin.woff2 differ
diff --git a/docs/public/catalog/components/hw-arrow/demo.html b/docs/public/catalog/components/hw-arrow/demo.html
new file mode 100644
index 0000000000..bbe1d99861
--- /dev/null
+++ b/docs/public/catalog/components/hw-arrow/demo.html
@@ -0,0 +1,221 @@
+<!doctype html>
+<!-- Demo plate for the catalog preview. Identical to hw-arrow.html except the
+     root background, which is opaque here so the transparent overlay reads.
+     Not installed by `hyperframes add` - registry-item.json lists hw-arrow.html only. -->
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      @font-face {
+        font-family: "Caveat";
+        src: url("assets/fonts/Caveat-700-latin.woff2") format("woff2");
+        font-weight: 700;
+        font-display: block;
+      }
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #17161a;
+        overflow: hidden;
+      }
+      /* ---- hw-arrow ------------------------------------------------------
+         Hand-wobbled draw-on arrow, boiling. Position the wrapper, pick a
+         curve preset, call the helpers. Requires the hw-boil helpers
+         (hwOnUpdate / hwHash / hwBoil) in the host script. */
+      .hw-arrow {
+        position: absolute;
+        pointer-events: none;
+      }
+      .hw-arrow svg {
+        width: 100%;
+        height: 100%;
+        overflow: visible;
+      }
+      .hw-arrow path {
+        fill: none;
+        stroke: var(--hw-arrow-color, var(--hw-ink, #f4f2ec));
+        stroke-width: var(--hw-arrow-w, 6);
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+      .hw-arrow.hw-soft path {
+        filter: blur(0.6px);
+      }
+      /* self-preview scene */
+      #hw-ar-scene {
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(135deg, #274060 0%, #123 100%);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-family: var(--hw-font-print, "Caveat", cursive);
+        font-weight: 700;
+        font-size: 80px;
+        color: rgba(244, 242, 236, 0.92);
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Self-preview. WIRING: copy the .hw-arrow CSS, the markup pattern,
+         and the hwArrowPath / hwArrowOn / hwArrowOff helpers (plus the
+         hw-boil helpers) into your host. Then:
+
+           document.querySelector("#hw-my-arrow path")
+             .setAttribute("d", hwArrowPath(360, 160, "swoop", 3));
+           hwArrowOn(tl, "#hw-my-arrow", 2.0);
+           hwBoil(tl, "#hw-my-arrow", { frameDrop: 3, seed: 3 });
+           hwArrowOff(tl, "#hw-my-arrow", 8.0);
+    -->
+    <div
+      id="hw-ar-root"
+      data-composition-id="hw-arrow"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="hw-ar-scene"><span>point at things</span></div>
+      <div
+        class="hw-arrow"
+        id="hw-ar-demo"
+        style="left: 560px; top: 320px; width: 380px; height: 180px"
+      >
+        <svg viewBox="0 0 380 180"><path id="hw-ar-demo-path"></path></svg>
+      </div>
+      <div
+        id="hw-ar-drv"
+        class="clip"
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- hw-boil helpers (shared family runtime — copy once per host) ---- */
+        window.hwOnUpdate = function (tl, fn) {
+          if (!tl.__hwRenders) {
+            tl.__hwRenders = [];
+            tl.eventCallback("onUpdate", function () {
+              for (var i = 0; i < tl.__hwRenders.length; i++) tl.__hwRenders[i]();
+            });
+          }
+          tl.__hwRenders.push(fn);
+          fn();
+        };
+        window.hwHash = function (n, seed) {
+          var x = Math.sin(n * 127.1 + (seed || 1) * 311.7) * 43758.5453;
+          return (x - Math.floor(x)) * 2 - 1;
+        };
+        window.hwBoil = function (tl, target, opts) {
+          opts = opts || {};
+          var amp = opts.amp !== undefined ? opts.amp : 1.6;
+          var rot = opts.rot !== undefined ? opts.rot : 0.5;
+          var fps = opts.fps || 30;
+          var drop = opts.frameDrop || 3;
+          var seed = opts.seed || 1;
+          var els = gsap.utils.toArray(target);
+          window.hwOnUpdate(tl, function () {
+            var step = Math.floor((tl.time() * fps) / drop);
+            for (var i = 0; i < els.length; i++) {
+              gsap.set(els[i], {
+                x: window.hwHash(step * 3 + i * 97, seed) * amp,
+                y: window.hwHash(step * 3 + 1 + i * 97, seed) * amp,
+                rotation: (opts.baseRot || 0) + window.hwHash(step * 3 + 2 + i * 97, seed) * rot,
+              });
+            }
+          });
+        };
+
+        // ---- hw-arrow helpers (copy these too) ----
+        // Wobbled arrow path in a w x h box, tail at left, head at right.
+        // curve: "straight" | "gentle" | "swoop"
+        window.hwArrowPath = function (w, h, curve, seed) {
+          seed = seed || 1;
+          var bend = curve === "swoop" ? 0.55 : curve === "gentle" ? 0.28 : 0.06;
+          function wob(v, n, range) {
+            return v + window.hwHash(n, seed) * range;
+          }
+          var x0 = wob(4, 1, 3),
+            y0 = wob(h * 0.72, 2, 4),
+            x1 = wob(w - 10, 3, 4),
+            y1 = wob(h * 0.3, 4, 4);
+          var cx1 = wob(w * 0.35, 5, 10),
+            cy1 = wob(h * (0.72 + bend * 0.5), 6, 8);
+          var cx2 = wob(w * 0.7, 7, 10),
+            cy2 = wob(h * (0.3 + bend), 8, 8);
+          var ang = Math.atan2(y1 - cy2, x1 - cx2);
+          function head(da, len) {
+            var a = ang + Math.PI + da;
+            return (
+              "M " +
+              x1.toFixed(1) +
+              " " +
+              y1.toFixed(1) +
+              " l " +
+              (Math.cos(a) * len).toFixed(1) +
+              " " +
+              (Math.sin(a) * len).toFixed(1)
+            );
+          }
+          return (
+            "M " +
+            x0.toFixed(1) +
+            " " +
+            y0.toFixed(1) +
+            " C " +
+            cx1.toFixed(1) +
+            " " +
+            cy1.toFixed(1) +
+            ", " +
+            cx2.toFixed(1) +
+            " " +
+            cy2.toFixed(1) +
+            ", " +
+            x1.toFixed(1) +
+            " " +
+            y1.toFixed(1) +
+            " " +
+            head(0.5, wob(34, 9, 6)) +
+            " " +
+            head(-0.5, wob(34, 10, 6))
+          );
+        };
+        window.hwArrowOn = function (tl, target, at, dur) {
+          var p = document.querySelector(target + " path");
+          var len = p.getTotalLength();
+          gsap.set(p, { strokeDasharray: len, strokeDashoffset: len });
+          tl.to(
+            p,
+            { strokeDashoffset: 0, duration: dur === undefined ? 0.7 : dur, ease: "power2.inOut" },
+            at,
+          );
+        };
+        window.hwArrowOff = function (tl, target, at) {
+          tl.to(target, { opacity: 0, duration: 0.3, ease: "power2.in" }, at);
+        };
+
+        // ---- self-preview ----
+        document
+          .getElementById("hw-ar-demo-path")
+          .setAttribute("d", window.hwArrowPath(380, 180, "swoop", 7));
+        var tl = gsap.timeline({ paused: true });
+        window.hwArrowOn(tl, "#hw-ar-demo", 0.4);
+        window.hwBoil(tl, "#hw-ar-demo", { amp: 2, rot: 0.6, frameDrop: 3, seed: 7 });
+        window.hwArrowOff(tl, "#hw-ar-demo", 3.4);
+        tl.set("#hw-ar-root", { visibility: "hidden" }, 3.98);
+        window.__timelines["hw-arrow"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/hw-arrow/hw-arrow.html b/docs/public/catalog/components/hw-arrow/hw-arrow.html
new file mode 100644
index 0000000000..242a24375c
--- /dev/null
+++ b/docs/public/catalog/components/hw-arrow/hw-arrow.html
@@ -0,0 +1,218 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      @font-face {
+        font-family: "Caveat";
+        src: url("assets/fonts/Caveat-700-latin.woff2") format("woff2");
+        font-weight: 700;
+        font-display: block;
+      }
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      /* ---- hw-arrow ------------------------------------------------------
+         Hand-wobbled draw-on arrow, boiling. Position the wrapper, pick a
+         curve preset, call the helpers. Requires the hw-boil helpers
+         (hwOnUpdate / hwHash / hwBoil) in the host script. */
+      .hw-arrow {
+        position: absolute;
+        pointer-events: none;
+      }
+      .hw-arrow svg {
+        width: 100%;
+        height: 100%;
+        overflow: visible;
+      }
+      .hw-arrow path {
+        fill: none;
+        stroke: var(--hw-arrow-color, var(--hw-ink, #f4f2ec));
+        stroke-width: var(--hw-arrow-w, 6);
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+      .hw-arrow.hw-soft path {
+        filter: blur(0.6px);
+      }
+      /* self-preview scene */
+      #hw-ar-scene {
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(135deg, #274060 0%, #123 100%);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-family: var(--hw-font-print, "Caveat", cursive);
+        font-weight: 700;
+        font-size: 80px;
+        color: rgba(244, 242, 236, 0.92);
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Self-preview. WIRING: copy the .hw-arrow CSS, the markup pattern,
+         and the hwArrowPath / hwArrowOn / hwArrowOff helpers (plus the
+         hw-boil helpers) into your host. Then:
+
+           document.querySelector("#hw-my-arrow path")
+             .setAttribute("d", hwArrowPath(360, 160, "swoop", 3));
+           hwArrowOn(tl, "#hw-my-arrow", 2.0);
+           hwBoil(tl, "#hw-my-arrow", { frameDrop: 3, seed: 3 });
+           hwArrowOff(tl, "#hw-my-arrow", 8.0);
+    -->
+    <div
+      id="hw-ar-root"
+      data-composition-id="hw-arrow"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="hw-ar-scene"><span>point at things</span></div>
+      <div
+        class="hw-arrow"
+        id="hw-ar-demo"
+        style="left: 560px; top: 320px; width: 380px; height: 180px"
+      >
+        <svg viewBox="0 0 380 180"><path id="hw-ar-demo-path"></path></svg>
+      </div>
+      <div
+        id="hw-ar-drv"
+        class="clip"
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- hw-boil helpers (shared family runtime — copy once per host) ---- */
+        window.hwOnUpdate = function (tl, fn) {
+          if (!tl.__hwRenders) {
+            tl.__hwRenders = [];
+            tl.eventCallback("onUpdate", function () {
+              for (var i = 0; i < tl.__hwRenders.length; i++) tl.__hwRenders[i]();
+            });
+          }
+          tl.__hwRenders.push(fn);
+          fn();
+        };
+        window.hwHash = function (n, seed) {
+          var x = Math.sin(n * 127.1 + (seed || 1) * 311.7) * 43758.5453;
+          return (x - Math.floor(x)) * 2 - 1;
+        };
+        window.hwBoil = function (tl, target, opts) {
+          opts = opts || {};
+          var amp = opts.amp !== undefined ? opts.amp : 1.6;
+          var rot = opts.rot !== undefined ? opts.rot : 0.5;
+          var fps = opts.fps || 30;
+          var drop = opts.frameDrop || 3;
+          var seed = opts.seed || 1;
+          var els = gsap.utils.toArray(target);
+          window.hwOnUpdate(tl, function () {
+            var step = Math.floor((tl.time() * fps) / drop);
+            for (var i = 0; i < els.length; i++) {
+              gsap.set(els[i], {
+                x: window.hwHash(step * 3 + i * 97, seed) * amp,
+                y: window.hwHash(step * 3 + 1 + i * 97, seed) * amp,
+                rotation: (opts.baseRot || 0) + window.hwHash(step * 3 + 2 + i * 97, seed) * rot,
+              });
+            }
+          });
+        };
+
+        // ---- hw-arrow helpers (copy these too) ----
+        // Wobbled arrow path in a w x h box, tail at left, head at right.
+        // curve: "straight" | "gentle" | "swoop"
+        window.hwArrowPath = function (w, h, curve, seed) {
+          seed = seed || 1;
+          var bend = curve === "swoop" ? 0.55 : curve === "gentle" ? 0.28 : 0.06;
+          function wob(v, n, range) {
+            return v + window.hwHash(n, seed) * range;
+          }
+          var x0 = wob(4, 1, 3),
+            y0 = wob(h * 0.72, 2, 4),
+            x1 = wob(w - 10, 3, 4),
+            y1 = wob(h * 0.3, 4, 4);
+          var cx1 = wob(w * 0.35, 5, 10),
+            cy1 = wob(h * (0.72 + bend * 0.5), 6, 8);
+          var cx2 = wob(w * 0.7, 7, 10),
+            cy2 = wob(h * (0.3 + bend), 8, 8);
+          var ang = Math.atan2(y1 - cy2, x1 - cx2);
+          function head(da, len) {
+            var a = ang + Math.PI + da;
+            return (
+              "M " +
+              x1.toFixed(1) +
+              " " +
+              y1.toFixed(1) +
+              " l " +
+              (Math.cos(a) * len).toFixed(1) +
+              " " +
+              (Math.sin(a) * len).toFixed(1)
+            );
+          }
+          return (
+            "M " +
+            x0.toFixed(1) +
+            " " +
+            y0.toFixed(1) +
+            " C " +
+            cx1.toFixed(1) +
+            " " +
+            cy1.toFixed(1) +
+            ", " +
+            cx2.toFixed(1) +
+            " " +
+            cy2.toFixed(1) +
+            ", " +
+            x1.toFixed(1) +
+            " " +
+            y1.toFixed(1) +
+            " " +
+            head(0.5, wob(34, 9, 6)) +
+            " " +
+            head(-0.5, wob(34, 10, 6))
+          );
+        };
+        window.hwArrowOn = function (tl, target, at, dur) {
+          var p = document.querySelector(target + " path");
+          var len = p.getTotalLength();
+          gsap.set(p, { strokeDasharray: len, strokeDashoffset: len });
+          tl.to(
+            p,
+            { strokeDashoffset: 0, duration: dur === undefined ? 0.7 : dur, ease: "power2.inOut" },
+            at,
+          );
+        };
+        window.hwArrowOff = function (tl, target, at) {
+          tl.to(target, { opacity: 0, duration: 0.3, ease: "power2.in" }, at);
+        };
+
+        // ---- self-preview ----
+        document
+          .getElementById("hw-ar-demo-path")
+          .setAttribute("d", window.hwArrowPath(380, 180, "swoop", 7));
+        var tl = gsap.timeline({ paused: true });
+        window.hwArrowOn(tl, "#hw-ar-demo", 0.4);
+        window.hwBoil(tl, "#hw-ar-demo", { amp: 2, rot: 0.6, frameDrop: 3, seed: 7 });
+        window.hwArrowOff(tl, "#hw-ar-demo", 3.4);
+        tl.set("#hw-ar-root", { visibility: "hidden" }, 3.98);
+        window.__timelines["hw-arrow"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/hw-boil/assets/fonts/Caveat-700-latin.woff2 b/docs/public/catalog/components/hw-boil/assets/fonts/Caveat-700-latin.woff2
new file mode 100644
index 0000000000..5a3423426f
Binary files /dev/null and b/docs/public/catalog/components/hw-boil/assets/fonts/Caveat-700-latin.woff2 differ
diff --git a/docs/public/catalog/components/hw-boil/demo.html b/docs/public/catalog/components/hw-boil/demo.html
new file mode 100644
index 0000000000..68f5b1ba0f
--- /dev/null
+++ b/docs/public/catalog/components/hw-boil/demo.html
@@ -0,0 +1,229 @@
+<!doctype html>
+<!-- Demo plate for the catalog preview. Identical to hw-boil.html except the
+     root background, which is opaque here so the transparent overlay reads.
+     Not installed by `hyperframes add` - registry-item.json lists hw-boil.html only. -->
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      /* Caveat is NOT auto-resolved by the renderer — bundle it. Asset
+         paths are ROOT-RELATIVE (the project root is the base URL for all
+         compositions; ../ traversal is a lint error). Registry installs
+         ship the woff2 as an asset file targeting assets/fonts/. */
+      @font-face {
+        font-family: "Caveat";
+        src: url("assets/fonts/Caveat-700-latin.woff2") format("woff2");
+        font-weight: 700;
+        font-display: block;
+      }
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #17161a;
+        overflow: hidden;
+      }
+      /* ---- hw-boil -----------------------------------------------------
+         The hand-drawn "boil": jitter that re-poses only every N frames
+         (quake + frame-drop style). Pose is a pure function of quantized
+         timeline time through a seeded hash — fully seek-safe, renders
+         identically on every pass over the same frame.
+
+         RULES:
+         - hwBoil owns x/y/rotation of the boiled element. Entrance/exit
+           tweens go on a WRAPPER around it, never the boiled element.
+         - One timeline has ONE onUpdate — hwOnUpdate is the dispatcher
+           that lets the boil coexist with sweep scalars etc. Register
+           every onUpdate-style render through it. */
+      #hw-boil-root {
+        --hw-font-print: "Caveat", cursive;
+        --hw-font-script: "Caveat", cursive;
+        --hw-ink: #f4f2ec;
+        --hw-accent: #6d6dff;
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #17161a;
+        font-family: var(--hw-font-print, "Caveat", cursive);
+      }
+      #hw-boil-root svg {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+      }
+      #hw-boil-root path {
+        fill: none;
+        stroke: var(--hw-ink);
+        stroke-width: 6;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+      #hw-b-arrow {
+        stroke: var(--hw-accent);
+        stroke-width: 7;
+      }
+      .hw-b-label {
+        position: absolute;
+        font-weight: 700;
+        font-size: 84px;
+        color: var(--hw-ink);
+        white-space: nowrap;
+      }
+      .hw-b-tag {
+        position: absolute;
+        font-family: "Inter", ui-sans-serif, sans-serif;
+        font-weight: 500;
+        font-size: 22px;
+        letter-spacing: 0.12em;
+        color: rgba(244, 242, 236, 0.45);
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Self-preview. WIRING: copy the hwOnUpdate / hwHash / hwBoil /
+         hwWobbleEllipse helpers into your host script, then:
+
+           hwBoil(tl, "#hw-my-annotation", { amp: 1.6, rot: 0.5, frameDrop: 3, seed: 2 });
+
+         frameDrop 3-4 = classic boil; 1 = frantic; boil: off = don't call it. -->
+    <div
+      id="hw-boil-root"
+      data-composition-id="hw-boil"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <svg viewBox="0 0 1920 1080">
+        <g id="hw-b-circle-g"><path id="hw-b-circle"></path></g>
+        <g id="hw-b-arrow-g">
+          <path
+            id="hw-b-arrow"
+            d="M 640 640 C 760 700, 980 720, 1130 620 M 1130 620 l -64 -6 M 1130 620 l -18 58"
+          ></path>
+        </g>
+      </svg>
+      <div class="hw-b-label" id="hw-b-word" style="left: 1230px; top: 560px">the boil</div>
+      <div class="hw-b-tag" style="left: 350px; top: 782px">FRAME DROP 3</div>
+      <div class="hw-b-tag" style="left: 700px; top: 782px">FRAME DROP 1</div>
+      <div class="hw-b-tag" style="left: 1230px; top: 700px">TEXT, AMP 1.2</div>
+      <div
+        id="hw-b-drv"
+        class="clip"
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        // ---- copy these helpers into the host script ----
+
+        // Dispatcher: a GSAP timeline has ONE onUpdate. Register every
+        // per-frame render (boils, sweep scalars) through this instead of
+        // setting eventCallback directly, and they all coexist.
+        window.hwOnUpdate = function (tl, fn) {
+          if (!tl.__hwRenders) {
+            tl.__hwRenders = [];
+            tl.eventCallback("onUpdate", function () {
+              for (var i = 0; i < tl.__hwRenders.length; i++) tl.__hwRenders[i]();
+            });
+          }
+          tl.__hwRenders.push(fn);
+          fn();
+        };
+
+        // Seeded hash -> [-1, 1]. Pure function of n — no Math.random().
+        window.hwHash = function (n, seed) {
+          var x = Math.sin(n * 127.1 + (seed || 1) * 311.7) * 43758.5453;
+          return (x - Math.floor(x)) * 2 - 1;
+        };
+
+        // The boil. Owns x/y/rotation of its targets — put entrance tweens
+        // on a wrapper. frameDrop = re-pose every N frames (3-4 classic).
+        window.hwBoil = function (tl, target, opts) {
+          opts = opts || {};
+          var amp = opts.amp !== undefined ? opts.amp : 1.6;
+          var rot = opts.rot !== undefined ? opts.rot : 0.5;
+          var fps = opts.fps || 30;
+          var drop = opts.frameDrop || 3;
+          var seed = opts.seed || 1;
+          var els = gsap.utils.toArray(target);
+          window.hwOnUpdate(tl, function () {
+            var step = Math.floor((tl.time() * fps) / drop);
+            for (var i = 0; i < els.length; i++) {
+              gsap.set(els[i], {
+                x: window.hwHash(step * 3 + i * 97, seed) * amp,
+                y: window.hwHash(step * 3 + 1 + i * 97, seed) * amp,
+                rotation: (opts.baseRot || 0) + window.hwHash(step * 3 + 2 + i * 97, seed) * rot,
+              });
+            }
+          });
+        };
+
+        // Seeded hand-wobbled ellipse path (smooth quadratic chain).
+        window.hwWobbleEllipse = function (cx, cy, rx, ry, seed, wobblePct) {
+          wobblePct = wobblePct === undefined ? 3 : wobblePct;
+          var N = 14,
+            pts = [];
+          for (var i = 0; i < N; i++) {
+            var a = (i / N) * Math.PI * 2;
+            var wr = 1 + window.hwHash(i * 13 + 5, seed) * (wobblePct / 100);
+            pts.push([cx + Math.cos(a) * rx * wr, cy + Math.sin(a) * ry * wr]);
+          }
+          var mx = (pts[0][0] + pts[N - 1][0]) / 2,
+            my = (pts[0][1] + pts[N - 1][1]) / 2;
+          var d = "M" + mx.toFixed(1) + " " + my.toFixed(1);
+          for (var j = 0; j < N; j++) {
+            var p = pts[j],
+              q = pts[(j + 1) % N];
+            d +=
+              " Q" +
+              p[0].toFixed(1) +
+              " " +
+              p[1].toFixed(1) +
+              " " +
+              ((p[0] + q[0]) / 2).toFixed(1) +
+              " " +
+              ((p[1] + q[1]) / 2).toFixed(1);
+          }
+          return d;
+        };
+
+        // ---- self-preview (not part of the snippet you copy) ----
+        var circle = document.getElementById("hw-b-circle");
+        circle.setAttribute("d", window.hwWobbleEllipse(460, 620, 190, 130, 4, 3.2));
+
+        var tl = gsap.timeline({ paused: true });
+
+        /* draw-on entrances (strokeDashoffset — never x/y, the boil owns those) */
+        [circle, document.getElementById("hw-b-arrow")].forEach(function (p, i) {
+          var len = p.getTotalLength();
+          gsap.set(p, { strokeDasharray: len, strokeDashoffset: len });
+          tl.to(p, { strokeDashoffset: 0, duration: 0.8, ease: "power2.inOut" }, 0.3 + i * 0.35);
+        });
+        gsap.set("#hw-b-word", { opacity: 0 });
+        tl.to("#hw-b-word", { opacity: 1, duration: 0.5, ease: "power2.out" }, 1.1);
+
+        /* three boils with different characters, one dispatcher */
+        window.hwBoil(tl, "#hw-b-circle-g", { amp: 2.2, rot: 0.4, frameDrop: 3, seed: 2 });
+        window.hwBoil(tl, "#hw-b-arrow-g", { amp: 2.6, rot: 0.7, frameDrop: 1, seed: 5 });
+        window.hwBoil(tl, "#hw-b-word", { amp: 1.2, rot: 0.35, frameDrop: 3, seed: 9 });
+
+        tl.set("#hw-boil-root", { visibility: "hidden" }, 3.98);
+        window.__timelines["hw-boil"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/hw-boil/hw-boil.html b/docs/public/catalog/components/hw-boil/hw-boil.html
new file mode 100644
index 0000000000..19eda55d3a
--- /dev/null
+++ b/docs/public/catalog/components/hw-boil/hw-boil.html
@@ -0,0 +1,226 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      /* Caveat is NOT auto-resolved by the renderer — bundle it. Asset
+         paths are ROOT-RELATIVE (the project root is the base URL for all
+         compositions; ../ traversal is a lint error). Registry installs
+         ship the woff2 as an asset file targeting assets/fonts/. */
+      @font-face {
+        font-family: "Caveat";
+        src: url("assets/fonts/Caveat-700-latin.woff2") format("woff2");
+        font-weight: 700;
+        font-display: block;
+      }
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      /* ---- hw-boil -----------------------------------------------------
+         The hand-drawn "boil": jitter that re-poses only every N frames
+         (quake + frame-drop style). Pose is a pure function of quantized
+         timeline time through a seeded hash — fully seek-safe, renders
+         identically on every pass over the same frame.
+
+         RULES:
+         - hwBoil owns x/y/rotation of the boiled element. Entrance/exit
+           tweens go on a WRAPPER around it, never the boiled element.
+         - One timeline has ONE onUpdate — hwOnUpdate is the dispatcher
+           that lets the boil coexist with sweep scalars etc. Register
+           every onUpdate-style render through it. */
+      #hw-boil-root {
+        --hw-font-print: "Caveat", cursive;
+        --hw-font-script: "Caveat", cursive;
+        --hw-ink: #f4f2ec;
+        --hw-accent: #6d6dff;
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #17161a;
+        font-family: var(--hw-font-print, "Caveat", cursive);
+      }
+      #hw-boil-root svg {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+      }
+      #hw-boil-root path {
+        fill: none;
+        stroke: var(--hw-ink);
+        stroke-width: 6;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+      #hw-b-arrow {
+        stroke: var(--hw-accent);
+        stroke-width: 7;
+      }
+      .hw-b-label {
+        position: absolute;
+        font-weight: 700;
+        font-size: 84px;
+        color: var(--hw-ink);
+        white-space: nowrap;
+      }
+      .hw-b-tag {
+        position: absolute;
+        font-family: "Inter", ui-sans-serif, sans-serif;
+        font-weight: 500;
+        font-size: 22px;
+        letter-spacing: 0.12em;
+        color: rgba(244, 242, 236, 0.45);
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Self-preview. WIRING: copy the hwOnUpdate / hwHash / hwBoil /
+         hwWobbleEllipse helpers into your host script, then:
+
+           hwBoil(tl, "#hw-my-annotation", { amp: 1.6, rot: 0.5, frameDrop: 3, seed: 2 });
+
+         frameDrop 3-4 = classic boil; 1 = frantic; boil: off = don't call it. -->
+    <div
+      id="hw-boil-root"
+      data-composition-id="hw-boil"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <svg viewBox="0 0 1920 1080">
+        <g id="hw-b-circle-g"><path id="hw-b-circle"></path></g>
+        <g id="hw-b-arrow-g">
+          <path
+            id="hw-b-arrow"
+            d="M 640 640 C 760 700, 980 720, 1130 620 M 1130 620 l -64 -6 M 1130 620 l -18 58"
+          ></path>
+        </g>
+      </svg>
+      <div class="hw-b-label" id="hw-b-word" style="left: 1230px; top: 560px">the boil</div>
+      <div class="hw-b-tag" style="left: 350px; top: 782px">FRAME DROP 3</div>
+      <div class="hw-b-tag" style="left: 700px; top: 782px">FRAME DROP 1</div>
+      <div class="hw-b-tag" style="left: 1230px; top: 700px">TEXT, AMP 1.2</div>
+      <div
+        id="hw-b-drv"
+        class="clip"
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        // ---- copy these helpers into the host script ----
+
+        // Dispatcher: a GSAP timeline has ONE onUpdate. Register every
+        // per-frame render (boils, sweep scalars) through this instead of
+        // setting eventCallback directly, and they all coexist.
+        window.hwOnUpdate = function (tl, fn) {
+          if (!tl.__hwRenders) {
+            tl.__hwRenders = [];
+            tl.eventCallback("onUpdate", function () {
+              for (var i = 0; i < tl.__hwRenders.length; i++) tl.__hwRenders[i]();
+            });
+          }
+          tl.__hwRenders.push(fn);
+          fn();
+        };
+
+        // Seeded hash -> [-1, 1]. Pure function of n — no Math.random().
+        window.hwHash = function (n, seed) {
+          var x = Math.sin(n * 127.1 + (seed || 1) * 311.7) * 43758.5453;
+          return (x - Math.floor(x)) * 2 - 1;
+        };
+
+        // The boil. Owns x/y/rotation of its targets — put entrance tweens
+        // on a wrapper. frameDrop = re-pose every N frames (3-4 classic).
+        window.hwBoil = function (tl, target, opts) {
+          opts = opts || {};
+          var amp = opts.amp !== undefined ? opts.amp : 1.6;
+          var rot = opts.rot !== undefined ? opts.rot : 0.5;
+          var fps = opts.fps || 30;
+          var drop = opts.frameDrop || 3;
+          var seed = opts.seed || 1;
+          var els = gsap.utils.toArray(target);
+          window.hwOnUpdate(tl, function () {
+            var step = Math.floor((tl.time() * fps) / drop);
+            for (var i = 0; i < els.length; i++) {
+              gsap.set(els[i], {
+                x: window.hwHash(step * 3 + i * 97, seed) * amp,
+                y: window.hwHash(step * 3 + 1 + i * 97, seed) * amp,
+                rotation: (opts.baseRot || 0) + window.hwHash(step * 3 + 2 + i * 97, seed) * rot,
+              });
+            }
+          });
+        };
+
+        // Seeded hand-wobbled ellipse path (smooth quadratic chain).
+        window.hwWobbleEllipse = function (cx, cy, rx, ry, seed, wobblePct) {
+          wobblePct = wobblePct === undefined ? 3 : wobblePct;
+          var N = 14,
+            pts = [];
+          for (var i = 0; i < N; i++) {
+            var a = (i / N) * Math.PI * 2;
+            var wr = 1 + window.hwHash(i * 13 + 5, seed) * (wobblePct / 100);
+            pts.push([cx + Math.cos(a) * rx * wr, cy + Math.sin(a) * ry * wr]);
+          }
+          var mx = (pts[0][0] + pts[N - 1][0]) / 2,
+            my = (pts[0][1] + pts[N - 1][1]) / 2;
+          var d = "M" + mx.toFixed(1) + " " + my.toFixed(1);
+          for (var j = 0; j < N; j++) {
+            var p = pts[j],
+              q = pts[(j + 1) % N];
+            d +=
+              " Q" +
+              p[0].toFixed(1) +
+              " " +
+              p[1].toFixed(1) +
+              " " +
+              ((p[0] + q[0]) / 2).toFixed(1) +
+              " " +
+              ((p[1] + q[1]) / 2).toFixed(1);
+          }
+          return d;
+        };
+
+        // ---- self-preview (not part of the snippet you copy) ----
+        var circle = document.getElementById("hw-b-circle");
+        circle.setAttribute("d", window.hwWobbleEllipse(460, 620, 190, 130, 4, 3.2));
+
+        var tl = gsap.timeline({ paused: true });
+
+        /* draw-on entrances (strokeDashoffset — never x/y, the boil owns those) */
+        [circle, document.getElementById("hw-b-arrow")].forEach(function (p, i) {
+          var len = p.getTotalLength();
+          gsap.set(p, { strokeDasharray: len, strokeDashoffset: len });
+          tl.to(p, { strokeDashoffset: 0, duration: 0.8, ease: "power2.inOut" }, 0.3 + i * 0.35);
+        });
+        gsap.set("#hw-b-word", { opacity: 0 });
+        tl.to("#hw-b-word", { opacity: 1, duration: 0.5, ease: "power2.out" }, 1.1);
+
+        /* three boils with different characters, one dispatcher */
+        window.hwBoil(tl, "#hw-b-circle-g", { amp: 2.2, rot: 0.4, frameDrop: 3, seed: 2 });
+        window.hwBoil(tl, "#hw-b-arrow-g", { amp: 2.6, rot: 0.7, frameDrop: 1, seed: 5 });
+        window.hwBoil(tl, "#hw-b-word", { amp: 1.2, rot: 0.35, frameDrop: 3, seed: 9 });
+
+        tl.set("#hw-boil-root", { visibility: "hidden" }, 3.98);
+        window.__timelines["hw-boil"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/hw-box-label/assets/fonts/Caveat-700-latin.woff2 b/docs/public/catalog/components/hw-box-label/assets/fonts/Caveat-700-latin.woff2
new file mode 100644
index 0000000000..5a3423426f
Binary files /dev/null and b/docs/public/catalog/components/hw-box-label/assets/fonts/Caveat-700-latin.woff2 differ
diff --git a/docs/public/catalog/components/hw-box-label/demo.html b/docs/public/catalog/components/hw-box-label/demo.html
new file mode 100644
index 0000000000..aff39a9f0f
--- /dev/null
+++ b/docs/public/catalog/components/hw-box-label/demo.html
@@ -0,0 +1,217 @@
+<!doctype html>
+<!-- Demo plate for the catalog preview. Identical to hw-box-label.html except the
+     root background, which is opaque here so the transparent overlay reads.
+     Not installed by `hyperframes add` - registry-item.json lists hw-box-label.html only. -->
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      @font-face {
+        font-family: "Caveat";
+        src: url("assets/fonts/Caveat-700-latin.woff2") format("woff2");
+        font-weight: 700;
+        font-display: block;
+      }
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #17161a;
+        overflow: hidden;
+      }
+      /* ---- hw-box-label ----------------------------------------------------
+         Rounded hand-drawn box + marker label (map-label style annotations).
+         Requires the hw-boil helpers in the host. */
+      .hw-box {
+        position: absolute;
+        pointer-events: none;
+      }
+      .hw-box svg {
+        width: 100%;
+        height: 100%;
+        overflow: visible;
+      }
+      .hw-box path {
+        fill: none;
+        stroke: var(--hw-box-ink, var(--hw-ink, #f4f2ec));
+        stroke-width: var(--hw-box-w, 6);
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+      .hw-box .hw-bx-label {
+        position: absolute;
+        width: 100%;
+        text-align: center;
+        font-family: var(--hw-font-print, "Caveat", cursive);
+        font-weight: 700;
+        font-size: 52px;
+        color: var(--hw-box-ink, var(--hw-ink, #f4f2ec));
+        white-space: nowrap;
+        opacity: 0;
+        text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
+      }
+      /* self-preview scene */
+      #hw-bx-scene {
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(140deg, #4a3560 0%, #1c1423 100%);
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Self-preview. WIRING: copy the .hw-box CSS + markup pattern, the
+         hwWobbleRect / hwBoxBuild / hwBoxOn / hwBoxOff helpers, AND the
+         hw-boil helpers. Size the wrapper over your target, then:
+
+           hwBoxBuild("#hw-my-box", { seed: 3, label: "Europe", labelPos: "above" });
+           hwBoxOn(tl, "#hw-my-box", 2.0);
+           hwBoil(tl, "#hw-my-box", { frameDrop: 3, seed: 3 });
+           hwBoxOff(tl, "#hw-my-box", 8.0);
+    -->
+    <div
+      id="hw-bx-root"
+      data-composition-id="hw-box-label"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="hw-bx-scene"></div>
+      <div
+        class="hw-box"
+        id="hw-bx-demo"
+        style="left: 700px; top: 420px; width: 420px; height: 230px"
+      >
+        <svg viewBox="0 0 420 230"><path id="hw-bx-demo-path"></path></svg>
+        <div class="hw-bx-label" id="hw-bx-demo-label"></div>
+      </div>
+      <div
+        id="hw-bx-drv"
+        class="clip"
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- hw-boil helpers (shared family runtime — copy once per host) ---- */
+        window.hwOnUpdate = function (tl, fn) {
+          if (!tl.__hwRenders) {
+            tl.__hwRenders = [];
+            tl.eventCallback("onUpdate", function () {
+              for (var i = 0; i < tl.__hwRenders.length; i++) tl.__hwRenders[i]();
+            });
+          }
+          tl.__hwRenders.push(fn);
+          fn();
+        };
+        window.hwHash = function (n, seed) {
+          var x = Math.sin(n * 127.1 + (seed || 1) * 311.7) * 43758.5453;
+          return (x - Math.floor(x)) * 2 - 1;
+        };
+        window.hwBoil = function (tl, target, opts) {
+          opts = opts || {};
+          var amp = opts.amp !== undefined ? opts.amp : 1.6;
+          var rot = opts.rot !== undefined ? opts.rot : 0.5;
+          var fps = opts.fps || 30;
+          var drop = opts.frameDrop || 3;
+          var seed = opts.seed || 1;
+          var els = gsap.utils.toArray(target);
+          window.hwOnUpdate(tl, function () {
+            var step = Math.floor((tl.time() * fps) / drop);
+            for (var i = 0; i < els.length; i++) {
+              gsap.set(els[i], {
+                x: window.hwHash(step * 3 + i * 97, seed) * amp,
+                y: window.hwHash(step * 3 + 1 + i * 97, seed) * amp,
+                rotation: (opts.baseRot || 0) + window.hwHash(step * 3 + 2 + i * 97, seed) * rot,
+              });
+            }
+          });
+        };
+
+        // ---- hw-box helpers (copy these too) ----
+        // Wobbled rounded-rect path in a w x h box.
+        window.hwWobbleRect = function (w, h, r, seed, amp) {
+          amp = amp === undefined ? 3.5 : amp;
+          function wob(n) {
+            return window.hwHash(n, seed) * amp;
+          }
+          var d = "M " + (r + wob(1)) + " " + wob(2);
+          d += " L " + (w / 2 + wob(3)) + " " + wob(4);
+          d += " L " + (w - r + wob(5)) + " " + wob(6);
+          d += " Q " + (w + wob(7)) + " " + wob(8) + " " + (w + wob(9)) + " " + (r + wob(10));
+          d += " L " + (w + wob(11)) + " " + (h / 2 + wob(12));
+          d += " L " + (w + wob(13)) + " " + (h - r + wob(14));
+          d +=
+            " Q " +
+            (w + wob(15)) +
+            " " +
+            (h + wob(16)) +
+            " " +
+            (w - r + wob(17)) +
+            " " +
+            (h + wob(18));
+          d += " L " + (w / 2 + wob(19)) + " " + (h + wob(20));
+          d += " L " + (r + wob(21)) + " " + (h + wob(22));
+          d += " Q " + wob(23) + " " + (h + wob(24)) + " " + wob(25) + " " + (h - r + wob(26));
+          d += " L " + wob(27) + " " + (h / 2 + wob(28));
+          d += " L " + wob(29) + " " + (r + wob(30));
+          d += " Q " + wob(31) + " " + wob(32) + " " + (r + wob(33)) + " " + wob(34);
+          return d;
+        };
+        window.hwBoxBuild = function (target, opts) {
+          opts = opts || {};
+          var el = document.querySelector(target);
+          var svg = el.querySelector("svg");
+          var vb = svg.getAttribute("viewBox").split(" ");
+          var W = parseFloat(vb[2]),
+            H = parseFloat(vb[3]);
+          el.querySelector("path").setAttribute(
+            "d",
+            window.hwWobbleRect(W, H, Math.min(26, W * 0.1), opts.seed || 1),
+          );
+          var label = el.querySelector(".hw-bx-label");
+          label.textContent = opts.label || "";
+          if ((opts.labelPos || "above") === "above") {
+            label.style.top = "-64px";
+          } else {
+            label.style.top = "50%";
+            label.style.transform = "translateY(-50%)";
+          }
+        };
+        window.hwBoxOn = function (tl, target, at) {
+          var p = document.querySelector(target + " path");
+          var len = p.getTotalLength();
+          gsap.set(p, { strokeDasharray: len, strokeDashoffset: len });
+          tl.to(p, { strokeDashoffset: 0, duration: 0.75, ease: "power2.inOut" }, at);
+          tl.to(
+            document.querySelector(target + " .hw-bx-label"),
+            { opacity: 1, duration: 0.4, ease: "power2.out" },
+            at + 0.55,
+          );
+        };
+        window.hwBoxOff = function (tl, target, at) {
+          tl.to(target, { opacity: 0, duration: 0.35, ease: "power2.in" }, at);
+        };
+
+        // ---- self-preview ----
+        window.hwBoxBuild("#hw-bx-demo", { seed: 3, label: "Europe", labelPos: "above" });
+        var tl = gsap.timeline({ paused: true });
+        window.hwBoxOn(tl, "#hw-bx-demo", 0.4);
+        window.hwBoil(tl, "#hw-bx-demo", { amp: 1.8, rot: 0.4, frameDrop: 3, seed: 3 });
+        window.hwBoxOff(tl, "#hw-bx-demo", 3.4);
+        tl.set("#hw-bx-root", { visibility: "hidden" }, 3.98);
+        window.__timelines["hw-box-label"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/hw-box-label/hw-box-label.html b/docs/public/catalog/components/hw-box-label/hw-box-label.html
new file mode 100644
index 0000000000..a1c3bd2b52
--- /dev/null
+++ b/docs/public/catalog/components/hw-box-label/hw-box-label.html
@@ -0,0 +1,214 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      @font-face {
+        font-family: "Caveat";
+        src: url("assets/fonts/Caveat-700-latin.woff2") format("woff2");
+        font-weight: 700;
+        font-display: block;
+      }
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      /* ---- hw-box-label ----------------------------------------------------
+         Rounded hand-drawn box + marker label (map-label style annotations).
+         Requires the hw-boil helpers in the host. */
+      .hw-box {
+        position: absolute;
+        pointer-events: none;
+      }
+      .hw-box svg {
+        width: 100%;
+        height: 100%;
+        overflow: visible;
+      }
+      .hw-box path {
+        fill: none;
+        stroke: var(--hw-box-ink, var(--hw-ink, #f4f2ec));
+        stroke-width: var(--hw-box-w, 6);
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+      .hw-box .hw-bx-label {
+        position: absolute;
+        width: 100%;
+        text-align: center;
+        font-family: var(--hw-font-print, "Caveat", cursive);
+        font-weight: 700;
+        font-size: 52px;
+        color: var(--hw-box-ink, var(--hw-ink, #f4f2ec));
+        white-space: nowrap;
+        opacity: 0;
+        text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
+      }
+      /* self-preview scene */
+      #hw-bx-scene {
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(140deg, #4a3560 0%, #1c1423 100%);
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Self-preview. WIRING: copy the .hw-box CSS + markup pattern, the
+         hwWobbleRect / hwBoxBuild / hwBoxOn / hwBoxOff helpers, AND the
+         hw-boil helpers. Size the wrapper over your target, then:
+
+           hwBoxBuild("#hw-my-box", { seed: 3, label: "Europe", labelPos: "above" });
+           hwBoxOn(tl, "#hw-my-box", 2.0);
+           hwBoil(tl, "#hw-my-box", { frameDrop: 3, seed: 3 });
+           hwBoxOff(tl, "#hw-my-box", 8.0);
+    -->
+    <div
+      id="hw-bx-root"
+      data-composition-id="hw-box-label"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="hw-bx-scene"></div>
+      <div
+        class="hw-box"
+        id="hw-bx-demo"
+        style="left: 700px; top: 420px; width: 420px; height: 230px"
+      >
+        <svg viewBox="0 0 420 230"><path id="hw-bx-demo-path"></path></svg>
+        <div class="hw-bx-label" id="hw-bx-demo-label"></div>
+      </div>
+      <div
+        id="hw-bx-drv"
+        class="clip"
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- hw-boil helpers (shared family runtime — copy once per host) ---- */
+        window.hwOnUpdate = function (tl, fn) {
+          if (!tl.__hwRenders) {
+            tl.__hwRenders = [];
+            tl.eventCallback("onUpdate", function () {
+              for (var i = 0; i < tl.__hwRenders.length; i++) tl.__hwRenders[i]();
+            });
+          }
+          tl.__hwRenders.push(fn);
+          fn();
+        };
+        window.hwHash = function (n, seed) {
+          var x = Math.sin(n * 127.1 + (seed || 1) * 311.7) * 43758.5453;
+          return (x - Math.floor(x)) * 2 - 1;
+        };
+        window.hwBoil = function (tl, target, opts) {
+          opts = opts || {};
+          var amp = opts.amp !== undefined ? opts.amp : 1.6;
+          var rot = opts.rot !== undefined ? opts.rot : 0.5;
+          var fps = opts.fps || 30;
+          var drop = opts.frameDrop || 3;
+          var seed = opts.seed || 1;
+          var els = gsap.utils.toArray(target);
+          window.hwOnUpdate(tl, function () {
+            var step = Math.floor((tl.time() * fps) / drop);
+            for (var i = 0; i < els.length; i++) {
+              gsap.set(els[i], {
+                x: window.hwHash(step * 3 + i * 97, seed) * amp,
+                y: window.hwHash(step * 3 + 1 + i * 97, seed) * amp,
+                rotation: (opts.baseRot || 0) + window.hwHash(step * 3 + 2 + i * 97, seed) * rot,
+              });
+            }
+          });
+        };
+
+        // ---- hw-box helpers (copy these too) ----
+        // Wobbled rounded-rect path in a w x h box.
+        window.hwWobbleRect = function (w, h, r, seed, amp) {
+          amp = amp === undefined ? 3.5 : amp;
+          function wob(n) {
+            return window.hwHash(n, seed) * amp;
+          }
+          var d = "M " + (r + wob(1)) + " " + wob(2);
+          d += " L " + (w / 2 + wob(3)) + " " + wob(4);
+          d += " L " + (w - r + wob(5)) + " " + wob(6);
+          d += " Q " + (w + wob(7)) + " " + wob(8) + " " + (w + wob(9)) + " " + (r + wob(10));
+          d += " L " + (w + wob(11)) + " " + (h / 2 + wob(12));
+          d += " L " + (w + wob(13)) + " " + (h - r + wob(14));
+          d +=
+            " Q " +
+            (w + wob(15)) +
+            " " +
+            (h + wob(16)) +
+            " " +
+            (w - r + wob(17)) +
+            " " +
+            (h + wob(18));
+          d += " L " + (w / 2 + wob(19)) + " " + (h + wob(20));
+          d += " L " + (r + wob(21)) + " " + (h + wob(22));
+          d += " Q " + wob(23) + " " + (h + wob(24)) + " " + wob(25) + " " + (h - r + wob(26));
+          d += " L " + wob(27) + " " + (h / 2 + wob(28));
+          d += " L " + wob(29) + " " + (r + wob(30));
+          d += " Q " + wob(31) + " " + wob(32) + " " + (r + wob(33)) + " " + wob(34);
+          return d;
+        };
+        window.hwBoxBuild = function (target, opts) {
+          opts = opts || {};
+          var el = document.querySelector(target);
+          var svg = el.querySelector("svg");
+          var vb = svg.getAttribute("viewBox").split(" ");
+          var W = parseFloat(vb[2]),
+            H = parseFloat(vb[3]);
+          el.querySelector("path").setAttribute(
+            "d",
+            window.hwWobbleRect(W, H, Math.min(26, W * 0.1), opts.seed || 1),
+          );
+          var label = el.querySelector(".hw-bx-label");
+          label.textContent = opts.label || "";
+          if ((opts.labelPos || "above") === "above") {
+            label.style.top = "-64px";
+          } else {
+            label.style.top = "50%";
+            label.style.transform = "translateY(-50%)";
+          }
+        };
+        window.hwBoxOn = function (tl, target, at) {
+          var p = document.querySelector(target + " path");
+          var len = p.getTotalLength();
+          gsap.set(p, { strokeDasharray: len, strokeDashoffset: len });
+          tl.to(p, { strokeDashoffset: 0, duration: 0.75, ease: "power2.inOut" }, at);
+          tl.to(
+            document.querySelector(target + " .hw-bx-label"),
+            { opacity: 1, duration: 0.4, ease: "power2.out" },
+            at + 0.55,
+          );
+        };
+        window.hwBoxOff = function (tl, target, at) {
+          tl.to(target, { opacity: 0, duration: 0.35, ease: "power2.in" }, at);
+        };
+
+        // ---- self-preview ----
+        window.hwBoxBuild("#hw-bx-demo", { seed: 3, label: "Europe", labelPos: "above" });
+        var tl = gsap.timeline({ paused: true });
+        window.hwBoxOn(tl, "#hw-bx-demo", 0.4);
+        window.hwBoil(tl, "#hw-bx-demo", { amp: 1.8, rot: 0.4, frameDrop: 3, seed: 3 });
+        window.hwBoxOff(tl, "#hw-bx-demo", 3.4);
+        tl.set("#hw-bx-root", { visibility: "hidden" }, 3.98);
+        window.__timelines["hw-box-label"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/hw-callout-circle/assets/fonts/Caveat-700-latin.woff2 b/docs/public/catalog/components/hw-callout-circle/assets/fonts/Caveat-700-latin.woff2
new file mode 100644
index 0000000000..5a3423426f
Binary files /dev/null and b/docs/public/catalog/components/hw-callout-circle/assets/fonts/Caveat-700-latin.woff2 differ
diff --git a/docs/public/catalog/components/hw-callout-circle/demo.html b/docs/public/catalog/components/hw-callout-circle/demo.html
new file mode 100644
index 0000000000..efcd893b0d
--- /dev/null
+++ b/docs/public/catalog/components/hw-callout-circle/demo.html
@@ -0,0 +1,317 @@
+<!doctype html>
+<!-- Demo plate for the catalog preview. Identical to hw-callout-circle.html except the
+     root background, which is opaque here so the transparent overlay reads.
+     Not installed by `hyperframes add` - registry-item.json lists hw-callout-circle.html only. -->
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      @font-face {
+        font-family: "Caveat";
+        src: url("assets/fonts/Caveat-700-latin.woff2") format("woff2");
+        font-weight: 700;
+        font-display: block;
+      }
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #17161a;
+        overflow: hidden;
+      }
+      /* ---- hw-callout-circle ----------------------------------------------
+         The full callout anatomy: wobbled ellipse outline draws around a
+         target, optional scribble fill sketches in, a curved connector leads
+         to a handwritten label. Requires the hw-boil helpers in the host. */
+      .hw-callout {
+        position: absolute;
+        pointer-events: none;
+      }
+      .hw-callout svg {
+        width: 100%;
+        height: 100%;
+        overflow: visible;
+      }
+      .hw-callout path {
+        fill: none;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+      .hw-callout .hw-co-outline {
+        stroke: var(--hw-co-ink, var(--hw-ink, #f4f2ec));
+        stroke-width: var(--hw-co-w, 6);
+      }
+      .hw-callout .hw-co-scribble {
+        /* Warm marker accent to match hw-frame / hw-title / hw-underline; the
+           previous blue read as a default UI colour. Lighter weight and alpha
+           so the hatch sits behind the labelled subject instead of over it. */
+        stroke: var(--hw-co-accent, var(--hw-accent, #ffb020));
+        stroke-width: 3;
+        opacity: 0.42;
+      }
+      .hw-callout .hw-co-connector {
+        stroke: var(--hw-co-ink, var(--hw-ink, #f4f2ec));
+        stroke-width: 4;
+      }
+      .hw-callout .hw-co-label {
+        position: absolute;
+        font-family: var(--hw-font-print, "Caveat", cursive);
+        font-weight: 700;
+        font-size: 54px;
+        color: var(--hw-co-ink, var(--hw-ink, #f4f2ec));
+        white-space: nowrap;
+        opacity: 0;
+        text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
+      }
+      /* self-preview scene */
+      #hw-co-scene {
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(150deg, #35604a 0%, #14231c 100%);
+      }
+      #hw-co-target {
+        position: absolute;
+        left: 700px;
+        top: 420px;
+        width: 220px;
+        height: 150px;
+        border-radius: 18px;
+        background: rgba(244, 242, 236, 0.18);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-family: "Inter", ui-sans-serif, sans-serif;
+        font-weight: 600;
+        font-size: 30px;
+        color: rgba(244, 242, 236, 0.8);
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Self-preview. WIRING: copy the .hw-callout CSS + markup pattern, the
+         hwCalloutBuild / hwCalloutOn / hwCalloutOff helpers, AND the hw-boil
+         helpers. Size the wrapper around your target, then:
+
+           hwCalloutBuild("#hw-my-callout", { scribble: true, seed: 4,
+             label: "look here!", labelAt: "right" });
+           hwCalloutOn(tl, "#hw-my-callout", 2.0);
+           hwBoil(tl, "#hw-my-callout", { frameDrop: 3, seed: 4 });
+           hwCalloutOff(tl, "#hw-my-callout", 8.0);
+    -->
+    <div
+      id="hw-co-root"
+      data-composition-id="hw-callout-circle"
+      data-start="0"
+      data-duration="5"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="hw-co-scene"></div>
+      <div id="hw-co-target">subject</div>
+      <div
+        class="hw-callout"
+        id="hw-co-demo"
+        style="left: 640px; top: 370px; width: 340px; height: 250px"
+      >
+        <svg viewBox="0 0 340 250">
+          <path class="hw-co-scribble" id="hw-co-demo-scribble"></path>
+          <path class="hw-co-outline" id="hw-co-demo-outline"></path>
+          <path class="hw-co-connector" id="hw-co-demo-connector"></path>
+        </svg>
+        <div class="hw-co-label" id="hw-co-demo-label"></div>
+      </div>
+      <div
+        id="hw-co-drv"
+        class="clip"
+        data-start="0"
+        data-duration="5"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- hw-boil helpers (shared family runtime — copy once per host) ---- */
+        window.hwOnUpdate = function (tl, fn) {
+          if (!tl.__hwRenders) {
+            tl.__hwRenders = [];
+            tl.eventCallback("onUpdate", function () {
+              for (var i = 0; i < tl.__hwRenders.length; i++) tl.__hwRenders[i]();
+            });
+          }
+          tl.__hwRenders.push(fn);
+          fn();
+        };
+        window.hwHash = function (n, seed) {
+          var x = Math.sin(n * 127.1 + (seed || 1) * 311.7) * 43758.5453;
+          return (x - Math.floor(x)) * 2 - 1;
+        };
+        window.hwBoil = function (tl, target, opts) {
+          opts = opts || {};
+          var amp = opts.amp !== undefined ? opts.amp : 1.6;
+          var rot = opts.rot !== undefined ? opts.rot : 0.5;
+          var fps = opts.fps || 30;
+          var drop = opts.frameDrop || 3;
+          var seed = opts.seed || 1;
+          var els = gsap.utils.toArray(target);
+          window.hwOnUpdate(tl, function () {
+            var step = Math.floor((tl.time() * fps) / drop);
+            for (var i = 0; i < els.length; i++) {
+              gsap.set(els[i], {
+                x: window.hwHash(step * 3 + i * 97, seed) * amp,
+                y: window.hwHash(step * 3 + 1 + i * 97, seed) * amp,
+                rotation: (opts.baseRot || 0) + window.hwHash(step * 3 + 2 + i * 97, seed) * rot,
+              });
+            }
+          });
+        };
+        window.hwWobbleEllipse = function (cx, cy, rx, ry, seed, wobblePct) {
+          wobblePct = wobblePct === undefined ? 3 : wobblePct;
+          var N = 14,
+            pts = [];
+          for (var i = 0; i < N; i++) {
+            var a = (i / N) * Math.PI * 2;
+            var wr = 1 + window.hwHash(i * 13 + 5, seed) * (wobblePct / 100);
+            pts.push([cx + Math.cos(a) * rx * wr, cy + Math.sin(a) * ry * wr]);
+          }
+          var mx = (pts[0][0] + pts[N - 1][0]) / 2,
+            my = (pts[0][1] + pts[N - 1][1]) / 2;
+          var d = "M" + mx.toFixed(1) + " " + my.toFixed(1);
+          for (var j = 0; j < N; j++) {
+            var p = pts[j],
+              q = pts[(j + 1) % N];
+            d +=
+              " Q" +
+              p[0].toFixed(1) +
+              " " +
+              p[1].toFixed(1) +
+              " " +
+              ((p[0] + q[0]) / 2).toFixed(1) +
+              " " +
+              ((p[1] + q[1]) / 2).toFixed(1);
+          }
+          return d;
+        };
+
+        // ---- hw-callout helpers (copy these too) ----
+        // Builds outline + scribble + connector + label inside the wrapper.
+        // opts: scribble (bool), seed, label, labelAt ("right"|"left"|"below"),
+        //       connector (bool)
+        window.hwCalloutBuild = function (target, opts) {
+          opts = opts || {};
+          var seed = opts.seed || 1;
+          var el = document.querySelector(target);
+          var svg = el.querySelector("svg");
+          var vb = svg.getAttribute("viewBox").split(" ");
+          var W = parseFloat(vb[2]),
+            H = parseFloat(vb[3]);
+          var cx = W / 2,
+            cy = H / 2,
+            rx = W * 0.42,
+            ry = H * 0.36;
+
+          el.querySelector(".hw-co-outline").setAttribute(
+            "d",
+            window.hwWobbleEllipse(cx, cy, rx, ry, seed, 4),
+          );
+
+          var scr = el.querySelector(".hw-co-scribble");
+          if (opts.scribble === false) {
+            scr.style.display = "none";
+          } else {
+            /* Denser rows so the zigzag reads as a scribbled hatch. At 6 rows
+               the near-horizontal runs dominate and it renders as stacked bars. */
+            var d = "",
+              rows = 11;
+            for (var i = 0; i < rows; i++) {
+              var t = (i + 0.5) / rows;
+              var yy = cy - ry + t * ry * 2;
+              var half = Math.sqrt(Math.max(0.05, 1 - Math.pow((yy - cy) / ry, 2)));
+              var xw = rx * half * 0.86;
+              var xa = cx - xw + window.hwHash(i * 7 + 2, seed) * 8;
+              var xb = cx + xw + window.hwHash(i * 7 + 3, seed) * 8;
+              d += (i === 0 ? "M " : " L ") + (i % 2 ? xa : xb).toFixed(1) + " " + yy.toFixed(1);
+              d +=
+                " L " +
+                (i % 2 ? xb : xa).toFixed(1) +
+                " " +
+                (yy + window.hwHash(i * 7 + 4, seed) * 4).toFixed(1);
+            }
+            scr.setAttribute("d", d);
+          }
+
+          var conn = el.querySelector(".hw-co-connector");
+          var label = el.querySelector(".hw-co-label");
+          if (opts.connector === false) {
+            conn.style.display = "none";
+          } else {
+            var at = opts.labelAt || "right";
+            var sx = at === "left" ? cx - rx : at === "below" ? cx : cx + rx;
+            var sy = at === "below" ? cy + ry : cy + ry * 0.35;
+            var ex = at === "left" ? sx - 70 : at === "below" ? sx + 40 : sx + 70;
+            var ey = sy + 55;
+            conn.setAttribute(
+              "d",
+              "M " +
+                sx.toFixed(1) +
+                " " +
+                sy.toFixed(1) +
+                " Q " +
+                ((sx + ex) / 2 + window.hwHash(21, seed) * 14).toFixed(1) +
+                " " +
+                (sy + 46).toFixed(1) +
+                " " +
+                ex.toFixed(1) +
+                " " +
+                ey.toFixed(1),
+            );
+            label.style.left = (at === "left" ? ex - 180 : ex + 12) + "px";
+            label.style.top = ey - 24 + "px";
+          }
+          label.textContent = opts.label || "";
+        };
+        // Draw sequence: outline -> scribble -> connector -> label pop.
+        window.hwCalloutOn = function (tl, target, at) {
+          var el = document.querySelector(target);
+          var t = at;
+          ["outline", "scribble", "connector"].forEach(function (k, idx) {
+            var p = el.querySelector(".hw-co-" + k);
+            if (!p || p.style.display === "none") return;
+            var len = p.getTotalLength();
+            gsap.set(p, { strokeDasharray: len, strokeDashoffset: len });
+            var dur = k === "scribble" ? 0.55 : k === "connector" ? 0.35 : 0.7;
+            tl.to(p, { strokeDashoffset: 0, duration: dur, ease: "power2.inOut" }, t);
+            t += dur * 0.85;
+          });
+          var label = el.querySelector(".hw-co-label");
+          gsap.set(label, { scale: 0.8, transformOrigin: "0% 50%" });
+          tl.to(label, { opacity: 1, scale: 1, duration: 0.4, ease: "back.out(1.6)" }, t);
+        };
+        window.hwCalloutOff = function (tl, target, at) {
+          tl.to(target, { opacity: 0, duration: 0.35, ease: "power2.in" }, at);
+        };
+
+        // ---- self-preview ----
+        window.hwCalloutBuild("#hw-co-demo", {
+          scribble: true,
+          seed: 4,
+          label: "look here!",
+          labelAt: "right",
+        });
+        var tl = gsap.timeline({ paused: true });
+        window.hwCalloutOn(tl, "#hw-co-demo", 0.4);
+        window.hwBoil(tl, "#hw-co-demo", { amp: 1.8, rot: 0.4, frameDrop: 3, seed: 4 });
+        window.hwCalloutOff(tl, "#hw-co-demo", 4.3);
+        tl.set("#hw-co-root", { visibility: "hidden" }, 4.98);
+        window.__timelines["hw-callout-circle"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/hw-callout-circle/hw-callout-circle.html b/docs/public/catalog/components/hw-callout-circle/hw-callout-circle.html
new file mode 100644
index 0000000000..6ae45540e6
--- /dev/null
+++ b/docs/public/catalog/components/hw-callout-circle/hw-callout-circle.html
@@ -0,0 +1,314 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      @font-face {
+        font-family: "Caveat";
+        src: url("assets/fonts/Caveat-700-latin.woff2") format("woff2");
+        font-weight: 700;
+        font-display: block;
+      }
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      /* ---- hw-callout-circle ----------------------------------------------
+         The full callout anatomy: wobbled ellipse outline draws around a
+         target, optional scribble fill sketches in, a curved connector leads
+         to a handwritten label. Requires the hw-boil helpers in the host. */
+      .hw-callout {
+        position: absolute;
+        pointer-events: none;
+      }
+      .hw-callout svg {
+        width: 100%;
+        height: 100%;
+        overflow: visible;
+      }
+      .hw-callout path {
+        fill: none;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+      .hw-callout .hw-co-outline {
+        stroke: var(--hw-co-ink, var(--hw-ink, #f4f2ec));
+        stroke-width: var(--hw-co-w, 6);
+      }
+      .hw-callout .hw-co-scribble {
+        /* Warm marker accent to match hw-frame / hw-title / hw-underline; the
+           previous blue read as a default UI colour. Lighter weight and alpha
+           so the hatch sits behind the labelled subject instead of over it. */
+        stroke: var(--hw-co-accent, var(--hw-accent, #ffb020));
+        stroke-width: 3;
+        opacity: 0.42;
+      }
+      .hw-callout .hw-co-connector {
+        stroke: var(--hw-co-ink, var(--hw-ink, #f4f2ec));
+        stroke-width: 4;
+      }
+      .hw-callout .hw-co-label {
+        position: absolute;
+        font-family: var(--hw-font-print, "Caveat", cursive);
+        font-weight: 700;
+        font-size: 54px;
+        color: var(--hw-co-ink, var(--hw-ink, #f4f2ec));
+        white-space: nowrap;
+        opacity: 0;
+        text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
+      }
+      /* self-preview scene */
+      #hw-co-scene {
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(150deg, #35604a 0%, #14231c 100%);
+      }
+      #hw-co-target {
+        position: absolute;
+        left: 700px;
+        top: 420px;
+        width: 220px;
+        height: 150px;
+        border-radius: 18px;
+        background: rgba(244, 242, 236, 0.18);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-family: "Inter", ui-sans-serif, sans-serif;
+        font-weight: 600;
+        font-size: 30px;
+        color: rgba(244, 242, 236, 0.8);
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Self-preview. WIRING: copy the .hw-callout CSS + markup pattern, the
+         hwCalloutBuild / hwCalloutOn / hwCalloutOff helpers, AND the hw-boil
+         helpers. Size the wrapper around your target, then:
+
+           hwCalloutBuild("#hw-my-callout", { scribble: true, seed: 4,
+             label: "look here!", labelAt: "right" });
+           hwCalloutOn(tl, "#hw-my-callout", 2.0);
+           hwBoil(tl, "#hw-my-callout", { frameDrop: 3, seed: 4 });
+           hwCalloutOff(tl, "#hw-my-callout", 8.0);
+    -->
+    <div
+      id="hw-co-root"
+      data-composition-id="hw-callout-circle"
+      data-start="0"
+      data-duration="5"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="hw-co-scene"></div>
+      <div id="hw-co-target">subject</div>
+      <div
+        class="hw-callout"
+        id="hw-co-demo"
+        style="left: 640px; top: 370px; width: 340px; height: 250px"
+      >
+        <svg viewBox="0 0 340 250">
+          <path class="hw-co-scribble" id="hw-co-demo-scribble"></path>
+          <path class="hw-co-outline" id="hw-co-demo-outline"></path>
+          <path class="hw-co-connector" id="hw-co-demo-connector"></path>
+        </svg>
+        <div class="hw-co-label" id="hw-co-demo-label"></div>
+      </div>
+      <div
+        id="hw-co-drv"
+        class="clip"
+        data-start="0"
+        data-duration="5"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- hw-boil helpers (shared family runtime — copy once per host) ---- */
+        window.hwOnUpdate = function (tl, fn) {
+          if (!tl.__hwRenders) {
+            tl.__hwRenders = [];
+            tl.eventCallback("onUpdate", function () {
+              for (var i = 0; i < tl.__hwRenders.length; i++) tl.__hwRenders[i]();
+            });
+          }
+          tl.__hwRenders.push(fn);
+          fn();
+        };
+        window.hwHash = function (n, seed) {
+          var x = Math.sin(n * 127.1 + (seed || 1) * 311.7) * 43758.5453;
+          return (x - Math.floor(x)) * 2 - 1;
+        };
+        window.hwBoil = function (tl, target, opts) {
+          opts = opts || {};
+          var amp = opts.amp !== undefined ? opts.amp : 1.6;
+          var rot = opts.rot !== undefined ? opts.rot : 0.5;
+          var fps = opts.fps || 30;
+          var drop = opts.frameDrop || 3;
+          var seed = opts.seed || 1;
+          var els = gsap.utils.toArray(target);
+          window.hwOnUpdate(tl, function () {
+            var step = Math.floor((tl.time() * fps) / drop);
+            for (var i = 0; i < els.length; i++) {
+              gsap.set(els[i], {
+                x: window.hwHash(step * 3 + i * 97, seed) * amp,
+                y: window.hwHash(step * 3 + 1 + i * 97, seed) * amp,
+                rotation: (opts.baseRot || 0) + window.hwHash(step * 3 + 2 + i * 97, seed) * rot,
+              });
+            }
+          });
+        };
+        window.hwWobbleEllipse = function (cx, cy, rx, ry, seed, wobblePct) {
+          wobblePct = wobblePct === undefined ? 3 : wobblePct;
+          var N = 14,
+            pts = [];
+          for (var i = 0; i < N; i++) {
+            var a = (i / N) * Math.PI * 2;
+            var wr = 1 + window.hwHash(i * 13 + 5, seed) * (wobblePct / 100);
+            pts.push([cx + Math.cos(a) * rx * wr, cy + Math.sin(a) * ry * wr]);
+          }
+          var mx = (pts[0][0] + pts[N - 1][0]) / 2,
+            my = (pts[0][1] + pts[N - 1][1]) / 2;
+          var d = "M" + mx.toFixed(1) + " " + my.toFixed(1);
+          for (var j = 0; j < N; j++) {
+            var p = pts[j],
+              q = pts[(j + 1) % N];
+            d +=
+              " Q" +
+              p[0].toFixed(1) +
+              " " +
+              p[1].toFixed(1) +
+              " " +
+              ((p[0] + q[0]) / 2).toFixed(1) +
+              " " +
+              ((p[1] + q[1]) / 2).toFixed(1);
+          }
+          return d;
+        };
+
+        // ---- hw-callout helpers (copy these too) ----
+        // Builds outline + scribble + connector + label inside the wrapper.
+        // opts: scribble (bool), seed, label, labelAt ("right"|"left"|"below"),
+        //       connector (bool)
+        window.hwCalloutBuild = function (target, opts) {
+          opts = opts || {};
+          var seed = opts.seed || 1;
+          var el = document.querySelector(target);
+          var svg = el.querySelector("svg");
+          var vb = svg.getAttribute("viewBox").split(" ");
+          var W = parseFloat(vb[2]),
+            H = parseFloat(vb[3]);
+          var cx = W / 2,
+            cy = H / 2,
+            rx = W * 0.42,
+            ry = H * 0.36;
+
+          el.querySelector(".hw-co-outline").setAttribute(
+            "d",
+            window.hwWobbleEllipse(cx, cy, rx, ry, seed, 4),
+          );
+
+          var scr = el.querySelector(".hw-co-scribble");
+          if (opts.scribble === false) {
+            scr.style.display = "none";
+          } else {
+            /* Denser rows so the zigzag reads as a scribbled hatch. At 6 rows
+               the near-horizontal runs dominate and it renders as stacked bars. */
+            var d = "",
+              rows = 11;
+            for (var i = 0; i < rows; i++) {
+              var t = (i + 0.5) / rows;
+              var yy = cy - ry + t * ry * 2;
+              var half = Math.sqrt(Math.max(0.05, 1 - Math.pow((yy - cy) / ry, 2)));
+              var xw = rx * half * 0.86;
+              var xa = cx - xw + window.hwHash(i * 7 + 2, seed) * 8;
+              var xb = cx + xw + window.hwHash(i * 7 + 3, seed) * 8;
+              d += (i === 0 ? "M " : " L ") + (i % 2 ? xa : xb).toFixed(1) + " " + yy.toFixed(1);
+              d +=
+                " L " +
+                (i % 2 ? xb : xa).toFixed(1) +
+                " " +
+                (yy + window.hwHash(i * 7 + 4, seed) * 4).toFixed(1);
+            }
+            scr.setAttribute("d", d);
+          }
+
+          var conn = el.querySelector(".hw-co-connector");
+          var label = el.querySelector(".hw-co-label");
+          if (opts.connector === false) {
+            conn.style.display = "none";
+          } else {
+            var at = opts.labelAt || "right";
+            var sx = at === "left" ? cx - rx : at === "below" ? cx : cx + rx;
+            var sy = at === "below" ? cy + ry : cy + ry * 0.35;
+            var ex = at === "left" ? sx - 70 : at === "below" ? sx + 40 : sx + 70;
+            var ey = sy + 55;
+            conn.setAttribute(
+              "d",
+              "M " +
+                sx.toFixed(1) +
+                " " +
+                sy.toFixed(1) +
+                " Q " +
+                ((sx + ex) / 2 + window.hwHash(21, seed) * 14).toFixed(1) +
+                " " +
+                (sy + 46).toFixed(1) +
+                " " +
+                ex.toFixed(1) +
+                " " +
+                ey.toFixed(1),
+            );
+            label.style.left = (at === "left" ? ex - 180 : ex + 12) + "px";
+            label.style.top = ey - 24 + "px";
+          }
+          label.textContent = opts.label || "";
+        };
+        // Draw sequence: outline -> scribble -> connector -> label pop.
+        window.hwCalloutOn = function (tl, target, at) {
+          var el = document.querySelector(target);
+          var t = at;
+          ["outline", "scribble", "connector"].forEach(function (k, idx) {
+            var p = el.querySelector(".hw-co-" + k);
+            if (!p || p.style.display === "none") return;
+            var len = p.getTotalLength();
+            gsap.set(p, { strokeDasharray: len, strokeDashoffset: len });
+            var dur = k === "scribble" ? 0.55 : k === "connector" ? 0.35 : 0.7;
+            tl.to(p, { strokeDashoffset: 0, duration: dur, ease: "power2.inOut" }, t);
+            t += dur * 0.85;
+          });
+          var label = el.querySelector(".hw-co-label");
+          gsap.set(label, { scale: 0.8, transformOrigin: "0% 50%" });
+          tl.to(label, { opacity: 1, scale: 1, duration: 0.4, ease: "back.out(1.6)" }, t);
+        };
+        window.hwCalloutOff = function (tl, target, at) {
+          tl.to(target, { opacity: 0, duration: 0.35, ease: "power2.in" }, at);
+        };
+
+        // ---- self-preview ----
+        window.hwCalloutBuild("#hw-co-demo", {
+          scribble: true,
+          seed: 4,
+          label: "look here!",
+          labelAt: "right",
+        });
+        var tl = gsap.timeline({ paused: true });
+        window.hwCalloutOn(tl, "#hw-co-demo", 0.4);
+        window.hwBoil(tl, "#hw-co-demo", { amp: 1.8, rot: 0.4, frameDrop: 3, seed: 4 });
+        window.hwCalloutOff(tl, "#hw-co-demo", 4.3);
+        tl.set("#hw-co-root", { visibility: "hidden" }, 4.98);
+        window.__timelines["hw-callout-circle"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/hw-underline/assets/fonts/Caveat-700-latin.woff2 b/docs/public/catalog/components/hw-underline/assets/fonts/Caveat-700-latin.woff2
new file mode 100644
index 0000000000..5a3423426f
Binary files /dev/null and b/docs/public/catalog/components/hw-underline/assets/fonts/Caveat-700-latin.woff2 differ
diff --git a/docs/public/catalog/components/hw-underline/demo.html b/docs/public/catalog/components/hw-underline/demo.html
new file mode 100644
index 0000000000..2968cc0508
--- /dev/null
+++ b/docs/public/catalog/components/hw-underline/demo.html
@@ -0,0 +1,260 @@
+<!doctype html>
+<!-- Demo plate for the catalog preview. Identical to hw-underline.html except the
+     root background, which is opaque here so the transparent overlay reads.
+     Not installed by `hyperframes add` - registry-item.json lists hw-underline.html only. -->
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      @font-face {
+        font-family: "Caveat";
+        src: url("assets/fonts/Caveat-700-latin.woff2") format("woff2");
+        font-weight: 700;
+        font-display: block;
+      }
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #17161a;
+        overflow: hidden;
+      }
+      /* ---- hw-underline ------------------------------------------------
+         Squiggle underline / strikethrough / bracket marks that draw on.
+         Size the wrapper over the text they annotate. Requires the hw-boil
+         helpers in the host. */
+      .hw-mark {
+        position: absolute;
+        pointer-events: none;
+      }
+      .hw-mark svg {
+        width: 100%;
+        height: 100%;
+        overflow: visible;
+      }
+      .hw-mark path {
+        fill: none;
+        stroke: var(--hw-mark-color, var(--hw-accent-warm, #ffb020));
+        stroke-width: var(--hw-mark-w, 7);
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+      /* self-preview scene */
+      #hw-un-scene {
+        position: absolute;
+        inset: 0;
+        background: #17161a;
+        font-family: var(--hw-font-print, "Caveat", cursive);
+        font-weight: 700;
+        font-size: 84px;
+        color: #f4f2ec;
+      }
+      #hw-un-scene div {
+        position: absolute;
+        left: 480px;
+        white-space: nowrap;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Self-preview. WIRING: copy the .hw-mark CSS + markup pattern, the
+         hwMarkPath / hwMarkOn / hwMarkOff helpers, AND the hw-boil helpers.
+         Then:
+
+           document.querySelector("#hw-my-mark path")
+             .setAttribute("d", hwMarkPath(420, 34, "underline", 4));
+           hwMarkOn(tl, "#hw-my-mark", 2.0);
+           hwBoil(tl, "#hw-my-mark", { frameDrop: 3, seed: 4 });
+    -->
+    <div
+      id="hw-un-root"
+      data-composition-id="hw-underline"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="hw-un-scene">
+        <div style="top: 260px">underline the point</div>
+        <div style="top: 460px">cross this out</div>
+        <div style="top: 660px">bracket the aside</div>
+      </div>
+      <div
+        class="hw-mark"
+        id="hw-un-m1"
+        style="left: 470px; top: 350px; width: 620px; height: 34px"
+      >
+        <svg viewBox="0 0 620 34"><path></path></svg>
+      </div>
+      <div
+        class="hw-mark"
+        id="hw-un-m2"
+        style="left: 470px; top: 500px; width: 480px; height: 34px"
+      >
+        <svg viewBox="0 0 480 34"><path></path></svg>
+      </div>
+      <div
+        class="hw-mark"
+        id="hw-un-m3"
+        style="left: 440px; top: 650px; width: 40px; height: 110px"
+      >
+        <svg viewBox="0 0 40 110"><path></path></svg>
+      </div>
+      <div
+        id="hw-un-drv"
+        class="clip"
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- hw-boil helpers (shared family runtime — copy once per host) ---- */
+        window.hwOnUpdate = function (tl, fn) {
+          if (!tl.__hwRenders) {
+            tl.__hwRenders = [];
+            tl.eventCallback("onUpdate", function () {
+              for (var i = 0; i < tl.__hwRenders.length; i++) tl.__hwRenders[i]();
+            });
+          }
+          tl.__hwRenders.push(fn);
+          fn();
+        };
+        window.hwHash = function (n, seed) {
+          var x = Math.sin(n * 127.1 + (seed || 1) * 311.7) * 43758.5453;
+          return (x - Math.floor(x)) * 2 - 1;
+        };
+        window.hwBoil = function (tl, target, opts) {
+          opts = opts || {};
+          var amp = opts.amp !== undefined ? opts.amp : 1.6;
+          var rot = opts.rot !== undefined ? opts.rot : 0.5;
+          var fps = opts.fps || 30;
+          var drop = opts.frameDrop || 3;
+          var seed = opts.seed || 1;
+          var els = gsap.utils.toArray(target);
+          window.hwOnUpdate(tl, function () {
+            var step = Math.floor((tl.time() * fps) / drop);
+            for (var i = 0; i < els.length; i++) {
+              gsap.set(els[i], {
+                x: window.hwHash(step * 3 + i * 97, seed) * amp,
+                y: window.hwHash(step * 3 + 1 + i * 97, seed) * amp,
+                rotation: (opts.baseRot || 0) + window.hwHash(step * 3 + 2 + i * 97, seed) * rot,
+              });
+            }
+          });
+        };
+
+        // ---- hw-mark helpers (copy these too) ----
+        // style: "underline" (squiggle) | "strike" (double pass) | "bracket"
+        window.hwMarkPath = function (w, h, style, seed) {
+          seed = seed || 1;
+          function wob(n, range) {
+            return window.hwHash(n, seed) * (range === undefined ? 5 : range);
+          }
+          var mid = h / 2;
+          if (style === "bracket") {
+            return (
+              "M " +
+              (w * 0.9 + wob(1, 3)) +
+              " " +
+              (2 + wob(2, 3)) +
+              " Q " +
+              wob(3, 4) +
+              " " +
+              (2 + wob(4)) +
+              " " +
+              (4 + wob(5, 3)) +
+              " " +
+              (h * 0.5 + wob(6)) +
+              " Q " +
+              wob(7, 4) +
+              " " +
+              (h - 2 + wob(8)) +
+              " " +
+              (w * 0.9 + wob(9, 3)) +
+              " " +
+              (h - 2 + wob(10, 3))
+            );
+          }
+          if (style === "strike") {
+            return (
+              "M " +
+              (2 + wob(1, 3)) +
+              " " +
+              (mid + wob(2)) +
+              " L " +
+              (w - 4 + wob(3, 3)) +
+              " " +
+              (mid - 3 + wob(4)) +
+              " M " +
+              (w - 10 + wob(5, 4)) +
+              " " +
+              (mid + 7 + wob(6)) +
+              " L " +
+              (8 + wob(7, 4)) +
+              " " +
+              (mid + 3 + wob(8))
+            );
+          }
+          /* underline squiggle */
+          var segs = Math.max(5, Math.round(w / 95));
+          var d = "M 2 " + (mid + wob(0, 4));
+          for (var i = 1; i <= segs; i++) {
+            var x = (w / segs) * i;
+            d +=
+              " Q " +
+              (x - w / segs / 2 + wob(i * 4 + 1, 9)) +
+              " " +
+              (mid + (i % 2 ? -1 : 1) * (9 + wob(i * 4 + 2, 4))) +
+              " " +
+              x.toFixed(1) +
+              " " +
+              (mid + wob(i * 4 + 3, 4));
+          }
+          return d;
+        };
+        window.hwMarkOn = function (tl, target, at, dur) {
+          var p = document.querySelector(target + " path");
+          var len = p.getTotalLength();
+          gsap.set(p, { strokeDasharray: len, strokeDashoffset: len });
+          tl.to(
+            p,
+            { strokeDashoffset: 0, duration: dur === undefined ? 0.55 : dur, ease: "power2.inOut" },
+            at,
+          );
+        };
+        window.hwMarkOff = function (tl, target, at) {
+          tl.to(target, { opacity: 0, duration: 0.3, ease: "power2.in" }, at);
+        };
+
+        // ---- self-preview ----
+        document
+          .querySelector("#hw-un-m1 path")
+          .setAttribute("d", window.hwMarkPath(620, 34, "underline", 4));
+        document
+          .querySelector("#hw-un-m2 path")
+          .setAttribute("d", window.hwMarkPath(480, 34, "strike", 6));
+        document
+          .querySelector("#hw-un-m3 path")
+          .setAttribute("d", window.hwMarkPath(40, 110, "bracket", 8));
+        var tl = gsap.timeline({ paused: true });
+        window.hwMarkOn(tl, "#hw-un-m1", 0.4);
+        window.hwMarkOn(tl, "#hw-un-m2", 1.0);
+        window.hwMarkOn(tl, "#hw-un-m3", 1.6);
+        window.hwBoil(tl, [".hw-mark"], { amp: 1.5, rot: 0.4, frameDrop: 3, seed: 5 });
+        tl.to([".hw-mark"], { opacity: 0, duration: 0.3, ease: "power2.in" }, 3.5);
+        tl.set("#hw-un-root", { visibility: "hidden" }, 3.98);
+        window.__timelines["hw-underline"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/hw-underline/hw-underline.html b/docs/public/catalog/components/hw-underline/hw-underline.html
new file mode 100644
index 0000000000..628003f8b6
--- /dev/null
+++ b/docs/public/catalog/components/hw-underline/hw-underline.html
@@ -0,0 +1,257 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      @font-face {
+        font-family: "Caveat";
+        src: url("assets/fonts/Caveat-700-latin.woff2") format("woff2");
+        font-weight: 700;
+        font-display: block;
+      }
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      /* ---- hw-underline ------------------------------------------------
+         Squiggle underline / strikethrough / bracket marks that draw on.
+         Size the wrapper over the text they annotate. Requires the hw-boil
+         helpers in the host. */
+      .hw-mark {
+        position: absolute;
+        pointer-events: none;
+      }
+      .hw-mark svg {
+        width: 100%;
+        height: 100%;
+        overflow: visible;
+      }
+      .hw-mark path {
+        fill: none;
+        stroke: var(--hw-mark-color, var(--hw-accent-warm, #ffb020));
+        stroke-width: var(--hw-mark-w, 7);
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+      /* self-preview scene */
+      #hw-un-scene {
+        position: absolute;
+        inset: 0;
+        background: #17161a;
+        font-family: var(--hw-font-print, "Caveat", cursive);
+        font-weight: 700;
+        font-size: 84px;
+        color: #f4f2ec;
+      }
+      #hw-un-scene div {
+        position: absolute;
+        left: 480px;
+        white-space: nowrap;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Self-preview. WIRING: copy the .hw-mark CSS + markup pattern, the
+         hwMarkPath / hwMarkOn / hwMarkOff helpers, AND the hw-boil helpers.
+         Then:
+
+           document.querySelector("#hw-my-mark path")
+             .setAttribute("d", hwMarkPath(420, 34, "underline", 4));
+           hwMarkOn(tl, "#hw-my-mark", 2.0);
+           hwBoil(tl, "#hw-my-mark", { frameDrop: 3, seed: 4 });
+    -->
+    <div
+      id="hw-un-root"
+      data-composition-id="hw-underline"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="hw-un-scene">
+        <div style="top: 260px">underline the point</div>
+        <div style="top: 460px">cross this out</div>
+        <div style="top: 660px">bracket the aside</div>
+      </div>
+      <div
+        class="hw-mark"
+        id="hw-un-m1"
+        style="left: 470px; top: 350px; width: 620px; height: 34px"
+      >
+        <svg viewBox="0 0 620 34"><path></path></svg>
+      </div>
+      <div
+        class="hw-mark"
+        id="hw-un-m2"
+        style="left: 470px; top: 500px; width: 480px; height: 34px"
+      >
+        <svg viewBox="0 0 480 34"><path></path></svg>
+      </div>
+      <div
+        class="hw-mark"
+        id="hw-un-m3"
+        style="left: 440px; top: 650px; width: 40px; height: 110px"
+      >
+        <svg viewBox="0 0 40 110"><path></path></svg>
+      </div>
+      <div
+        id="hw-un-drv"
+        class="clip"
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- hw-boil helpers (shared family runtime — copy once per host) ---- */
+        window.hwOnUpdate = function (tl, fn) {
+          if (!tl.__hwRenders) {
+            tl.__hwRenders = [];
+            tl.eventCallback("onUpdate", function () {
+              for (var i = 0; i < tl.__hwRenders.length; i++) tl.__hwRenders[i]();
+            });
+          }
+          tl.__hwRenders.push(fn);
+          fn();
+        };
+        window.hwHash = function (n, seed) {
+          var x = Math.sin(n * 127.1 + (seed || 1) * 311.7) * 43758.5453;
+          return (x - Math.floor(x)) * 2 - 1;
+        };
+        window.hwBoil = function (tl, target, opts) {
+          opts = opts || {};
+          var amp = opts.amp !== undefined ? opts.amp : 1.6;
+          var rot = opts.rot !== undefined ? opts.rot : 0.5;
+          var fps = opts.fps || 30;
+          var drop = opts.frameDrop || 3;
+          var seed = opts.seed || 1;
+          var els = gsap.utils.toArray(target);
+          window.hwOnUpdate(tl, function () {
+            var step = Math.floor((tl.time() * fps) / drop);
+            for (var i = 0; i < els.length; i++) {
+              gsap.set(els[i], {
+                x: window.hwHash(step * 3 + i * 97, seed) * amp,
+                y: window.hwHash(step * 3 + 1 + i * 97, seed) * amp,
+                rotation: (opts.baseRot || 0) + window.hwHash(step * 3 + 2 + i * 97, seed) * rot,
+              });
+            }
+          });
+        };
+
+        // ---- hw-mark helpers (copy these too) ----
+        // style: "underline" (squiggle) | "strike" (double pass) | "bracket"
+        window.hwMarkPath = function (w, h, style, seed) {
+          seed = seed || 1;
+          function wob(n, range) {
+            return window.hwHash(n, seed) * (range === undefined ? 5 : range);
+          }
+          var mid = h / 2;
+          if (style === "bracket") {
+            return (
+              "M " +
+              (w * 0.9 + wob(1, 3)) +
+              " " +
+              (2 + wob(2, 3)) +
+              " Q " +
+              wob(3, 4) +
+              " " +
+              (2 + wob(4)) +
+              " " +
+              (4 + wob(5, 3)) +
+              " " +
+              (h * 0.5 + wob(6)) +
+              " Q " +
+              wob(7, 4) +
+              " " +
+              (h - 2 + wob(8)) +
+              " " +
+              (w * 0.9 + wob(9, 3)) +
+              " " +
+              (h - 2 + wob(10, 3))
+            );
+          }
+          if (style === "strike") {
+            return (
+              "M " +
+              (2 + wob(1, 3)) +
+              " " +
+              (mid + wob(2)) +
+              " L " +
+              (w - 4 + wob(3, 3)) +
+              " " +
+              (mid - 3 + wob(4)) +
+              " M " +
+              (w - 10 + wob(5, 4)) +
+              " " +
+              (mid + 7 + wob(6)) +
+              " L " +
+              (8 + wob(7, 4)) +
+              " " +
+              (mid + 3 + wob(8))
+            );
+          }
+          /* underline squiggle */
+          var segs = Math.max(5, Math.round(w / 95));
+          var d = "M 2 " + (mid + wob(0, 4));
+          for (var i = 1; i <= segs; i++) {
+            var x = (w / segs) * i;
+            d +=
+              " Q " +
+              (x - w / segs / 2 + wob(i * 4 + 1, 9)) +
+              " " +
+              (mid + (i % 2 ? -1 : 1) * (9 + wob(i * 4 + 2, 4))) +
+              " " +
+              x.toFixed(1) +
+              " " +
+              (mid + wob(i * 4 + 3, 4));
+          }
+          return d;
+        };
+        window.hwMarkOn = function (tl, target, at, dur) {
+          var p = document.querySelector(target + " path");
+          var len = p.getTotalLength();
+          gsap.set(p, { strokeDasharray: len, strokeDashoffset: len });
+          tl.to(
+            p,
+            { strokeDashoffset: 0, duration: dur === undefined ? 0.55 : dur, ease: "power2.inOut" },
+            at,
+          );
+        };
+        window.hwMarkOff = function (tl, target, at) {
+          tl.to(target, { opacity: 0, duration: 0.3, ease: "power2.in" }, at);
+        };
+
+        // ---- self-preview ----
+        document
+          .querySelector("#hw-un-m1 path")
+          .setAttribute("d", window.hwMarkPath(620, 34, "underline", 4));
+        document
+          .querySelector("#hw-un-m2 path")
+          .setAttribute("d", window.hwMarkPath(480, 34, "strike", 6));
+        document
+          .querySelector("#hw-un-m3 path")
+          .setAttribute("d", window.hwMarkPath(40, 110, "bracket", 8));
+        var tl = gsap.timeline({ paused: true });
+        window.hwMarkOn(tl, "#hw-un-m1", 0.4);
+        window.hwMarkOn(tl, "#hw-un-m2", 1.0);
+        window.hwMarkOn(tl, "#hw-un-m3", 1.6);
+        window.hwBoil(tl, [".hw-mark"], { amp: 1.5, rot: 0.4, frameDrop: 3, seed: 5 });
+        tl.to([".hw-mark"], { opacity: 0, duration: 0.3, ease: "power2.in" }, 3.5);
+        tl.set("#hw-un-root", { visibility: "hidden" }, 3.98);
+        window.__timelines["hw-underline"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/icon-morph-beat/demo.html b/docs/public/catalog/components/icon-morph-beat/demo.html
new file mode 100644
index 0000000000..4ab099fe0c
--- /dev/null
+++ b/docs/public/catalog/components/icon-morph-beat/demo.html
@@ -0,0 +1,101 @@
+<!doctype html>
+<!--
+  icon-morph-beat demo. This standalone composition mounts the primitive
+  through data-composition-src. The lock-unlock pair and violet accent are
+  deliberately non-default so both variables are proven through the mount.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Icon Morph Beat Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0b0c0e;
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --surface: #181b24;
+        --border: #475569;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 44%, #191526 0%, #0b0c0e 68%);
+      }
+
+      .mount-card {
+        width: 42%;
+        height: 54%;
+        left: 29%;
+        top: 23%;
+        container-type: size;
+        overflow: hidden;
+        border: 1px solid rgba(148, 163, 184, 0.22);
+        border-radius: 32px;
+        background: rgba(24, 27, 36, 0.74);
+        box-shadow: 0 44px 100px rgba(0, 0, 0, 0.48);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="icon-morph-beat-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="2.5"
+      data-fps="30"
+    >
+      <div
+        id="icon-morph-beat-mount"
+        class="mount-card clip"
+        data-composition-id="icon-morph-beat"
+        data-composition-src="./icon-morph-beat.html"
+        data-variable-values='{"pair":"lock-unlock","accent":"violet"}'
+        data-start="0"
+        data-duration="2.5"
+        data-track-index="0"
+        data-width="806"
+        data-height="583"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      var tl = gsap.timeline({ paused: true });
+      tl.seek(0);
+      window.__timelines = window.__timelines || {};
+      window.__timelines["icon-morph-beat-demo"] = tl;
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "icon-morph-beat.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/icon-morph-beat/icon-morph-beat.html b/docs/public/catalog/components/icon-morph-beat/icon-morph-beat.html
new file mode 100644
index 0000000000..92060994a5
--- /dev/null
+++ b/docs/public/catalog/components/icon-morph-beat/icon-morph-beat.html
@@ -0,0 +1,258 @@
+<!doctype html>
+<!--
+  icon-morph-beat: HyperFrames video primitive (product-demo / state-change)
+
+  Concept: one icon holds as a readable before state, morphs into its after
+  state while shifting to the selected accent, then marks completion with a
+  small pulse. The authored SVG paths in every pair have matching command
+  structure and point count so GSAP can tween the d attribute directly.
+
+  Variables:
+    - pair (mic-check | play-check | lock-unlock, default mic-check): the
+      before and after icon states.
+    - accent (green | blue | violet, default green): the completion color.
+
+  Envelope (fixed IN, elastic HOLD, no OUT):
+    IN_BASE  = 1.20s, readable before-state hold, morph, and completion pulse
+    HOLD     = elastic = max(0, D - IN_BASE), a restrained halo breath
+    OUT_BASE = 0s, the completed icon remains visible at the final frame
+    If D is shorter than IN_BASE, the complete state-change beat compresses
+    proportionally and HOLD becomes zero.
+
+  Mount contract: the runtime clones only this template. #root fills the
+  host box, establishes the container query basis, has no data-width or
+  data-height, and registers one paused timeline under the hardcoded
+  icon-morph-beat id.
+-->
+<html
+  lang="en"
+  data-composition-id="icon-morph-beat"
+  data-composition-duration="2.5"
+  data-composition-variables='[
+    { "id": "pair", "type": "enum", "role": "content", "label": "Icon pair", "description": "Before and after icon states used by the morph.", "default": "mic-check", "options": [{ "value": "mic-check", "label": "Mic to check" }, { "value": "play-check", "label": "Play to check" }, { "value": "lock-unlock", "label": "Lock to unlock" }] },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Color applied as the morph completes.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Icon Morph Beat</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="icon-morph-beat" data-duration="2.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            pointer-events: none;
+          }
+
+          .imb-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+          }
+
+          .imb-stage {
+            position: relative;
+            display: grid;
+            width: 42cqmin;
+            aspect-ratio: 1;
+            place-items: center;
+          }
+
+          .imb-halo {
+            position: absolute;
+            inset: -12%;
+            border-radius: 50%;
+            background: radial-gradient(
+              circle,
+              color-mix(in srgb, var(--imb-accent) 38%, transparent) 0%,
+              color-mix(in srgb, var(--imb-accent) 12%, transparent) 46%,
+              transparent 72%
+            );
+            opacity: 0.14;
+            will-change: opacity, transform;
+          }
+
+          .imb-shell {
+            position: relative;
+            display: grid;
+            width: 100%;
+            aspect-ratio: 1;
+            place-items: center;
+            border: 0.28cqmin solid color-mix(in srgb, var(--border, #475569) 76%, transparent);
+            border-radius: 28%;
+            background: linear-gradient(
+              145deg,
+              color-mix(in srgb, var(--surface, #1e293b) 86%, white 7%),
+              var(--surface, #1e293b)
+            );
+            box-shadow:
+              0 3.2cqh 8cqh color-mix(in srgb, var(--bg, #05070d) 58%, transparent),
+              inset 0 0 0 0.12cqmin color-mix(in srgb, white 10%, transparent);
+            transform-origin: 50% 50%;
+            will-change: transform;
+          }
+
+          .imb-icon {
+            width: 58%;
+            height: 58%;
+            overflow: visible;
+            color: var(--fg, #f8fafc);
+            filter: drop-shadow(0 0.8cqh 1.8cqh rgba(2, 6, 23, 0.34));
+          }
+
+          .imb-shape {
+            fill: currentColor;
+            fill-rule: nonzero;
+          }
+        </style>
+
+        <div
+          id="icon-morph-beat-clip"
+          class="imb-clip clip"
+          data-start="0"
+          data-duration="2.5"
+          data-track-index="0"
+        >
+          <div class="imb-stage">
+            <div class="imb-halo" aria-hidden="true"></div>
+            <div class="imb-shell">
+              <svg class="imb-icon" viewBox="0 0 100 100" role="img" aria-label="Icon state change">
+                <path class="imb-shape" d="" />
+              </svg>
+            </div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var shell = root.querySelector(".imb-shell");
+            var halo = root.querySelector(".imb-halo");
+            var icon = root.querySelector(".imb-icon");
+            var shape = root.querySelector(".imb-shape");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            // Each from/to pair has the same SVG command sequence and point
+            // count. Keep the pair together when editing either silhouette.
+            var paths = {
+              "mic-check": {
+                from: "M 42 18 L 58 18 L 64 24 L 64 48 L 61 56 L 56 62 L 56 72 L 68 72 L 68 82 L 32 82 L 32 72 L 44 72 L 44 62 L 39 56 L 36 48 L 36 24 Z",
+                to: "M 16 50 L 20 46 L 24 42 L 34 52 L 44 62 L 52 54 L 60 46 L 68 38 L 76 30 L 80 34 L 84 38 L 74 48 L 64 58 L 54 68 L 44 78 L 34 68 Z",
+              },
+              "play-check": {
+                from: "M 28 18 L 36 23 L 44 28 L 52 33 L 60 38 L 68 43 L 76 48 L 80 50 L 76 52 L 68 57 L 60 62 L 52 67 L 44 72 L 36 77 L 28 82 L 28 50 Z",
+                to: "M 16 50 L 20 46 L 24 42 L 34 52 L 44 62 L 52 54 L 60 46 L 68 38 L 76 30 L 80 34 L 84 38 L 74 48 L 64 58 L 54 68 L 44 78 L 34 68 Z",
+              },
+              "lock-unlock": {
+                from: "M 22 42 L 78 42 L 78 84 L 22 84 Z M 30 44 L 30 31 C 30 18 39 12 50 12 C 61 12 70 18 70 31 L 70 44 L 60 44 L 60 31 C 60 25 56 22 50 22 C 44 22 40 25 40 31 L 40 44 Z",
+                to: "M 22 42 L 78 42 L 78 84 L 22 84 Z M 34 44 L 34 31 C 34 18 43 12 54 12 C 65 12 74 18 74 31 L 74 35 L 64 35 L 64 31 C 64 25 60 22 54 22 C 48 22 44 25 44 31 L 44 44 Z",
+              },
+            };
+            var accents = {
+              green: "#34d399",
+              blue: "#38bdf8",
+              violet: "#a78bfa",
+            };
+            var pair = Object.prototype.hasOwnProperty.call(paths, vars.pair)
+              ? vars.pair
+              : "mic-check";
+            var accent = Object.prototype.hasOwnProperty.call(accents, vars.accent)
+              ? vars.accent
+              : "green";
+            var selectedPaths = paths[pair];
+            var accentColor = accents[accent];
+
+            root.style.setProperty("--imb-accent", accentColor);
+            shape.setAttribute("d", selectedPaths.from);
+            icon.setAttribute("aria-label", pair.replace("-", " to "));
+
+            var IN_BASE = 1.2;
+            var MORPH_AT_BASE = 0.35;
+            var MORPH_BASE = 0.55;
+            var PULSE_UP_BASE = 0.12;
+            var PULSE_DOWN_BASE = 0.18;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "2.5"));
+            var scale = duration < IN_BASE ? duration / IN_BASE : 1;
+            var IN = IN_BASE * scale;
+            var MORPH_AT = MORPH_AT_BASE * scale;
+            var MORPH = MORPH_BASE * scale;
+            var PULSE_UP = PULSE_UP_BASE * scale;
+            var PULSE_DOWN = PULSE_DOWN_BASE * scale;
+            var COMPLETE_AT = MORPH_AT + MORPH;
+            var HOLD = Math.max(0, duration - IN);
+
+            gsap.set(icon, { color: "#f8fafc" });
+            gsap.set(shell, { scale: 1 });
+            gsap.set(halo, { opacity: 0.14, scale: 1 });
+
+            var tl = gsap.timeline({ paused: true });
+
+            tl.to(
+              shape,
+              { attr: { d: selectedPaths.to }, duration: MORPH, ease: "power3.out" },
+              MORPH_AT,
+            );
+            tl.to(icon, { color: accentColor, duration: MORPH, ease: "power2.out" }, MORPH_AT);
+            tl.to(shell, { scale: 1.08, duration: PULSE_UP, ease: "power3.out" }, COMPLETE_AT);
+            tl.to(
+              shell,
+              { scale: 1, duration: PULSE_DOWN, ease: "power2.out" },
+              COMPLETE_AT + PULSE_UP,
+            );
+            tl.to(
+              halo,
+              { opacity: 0.62, scale: 1.08, duration: PULSE_UP, ease: "power3.out" },
+              COMPLETE_AT,
+            );
+            tl.to(
+              halo,
+              { opacity: 0.14, scale: 1, duration: PULSE_DOWN, ease: "power2.out" },
+              COMPLETE_AT + PULSE_UP,
+            );
+
+            if (HOLD > 0.04) {
+              var driftHalf = Math.min(0.45, HOLD / 2);
+              tl.fromTo(
+                halo,
+                { opacity: 0.14 },
+                {
+                  opacity: 0.22,
+                  duration: driftHalf,
+                  ease: "sine.inOut",
+                  yoyo: true,
+                  repeat: 1,
+                },
+                IN,
+              );
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["icon-morph-beat"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/icon-swap/__hf-variables-preview.html b/docs/public/catalog/components/icon-swap/__hf-variables-preview.html
new file mode 100644
index 0000000000..a4c831b66b
--- /dev/null
+++ b/docs/public/catalog/components/icon-swap/__hf-variables-preview.html
@@ -0,0 +1,94 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Icon Swap variables preview</title>
+    <style>
+      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #f7f7f8; }
+      #hf-vars-root { position: relative; width: 1920px; height: 1080px; }
+      #hf-vars-mount { position: absolute; inset: 0; display: grid; place-items: center; }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  </head>
+  <body>
+    <div id="hf-vars-root" data-composition-id="icon-swap-variables-preview" data-start="0" data-width="1920" data-height="1080" data-duration="5" data-fps="30">
+      <div id="hf-vars-mount" class="clip" data-composition-id="icon-swap" data-composition-src="./icon-swap.html" data-start="0" data-duration="5" data-track-index="0" data-width="1920" data-height="1080"></div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["icon-swap-variables-preview"] = gsap.timeline({ paused: true });
+    </script>
+    <script>
+      (function () {
+        var mount = document.getElementById("hf-vars-mount");
+        // The mount is filled asynchronously, and the demo script selects
+        // what it fills it with, so it cannot run before then.
+        var observer = new MutationObserver(build);
+        observer.observe(mount, { childList: true, subtree: true });
+        build();
+        function build() {
+          if (!mount.firstElementChild) return;
+          observer.disconnect();
+
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.to(
+          ".hf-transition-icon-swap .from",
+          {
+            opacity: 0,
+            "--hf-icon-scale": 0.55,
+            "--hf-icon-blur": "8px",
+            "--hf-icon-rotate": "-18deg",
+            duration: 0.18,
+            ease: "power2.in",
+          },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-transition-icon-swap .to",
+          {
+            opacity: 0,
+            "--hf-icon-scale": 1.35,
+            "--hf-icon-blur": "8px",
+            "--hf-icon-rotate": "18deg",
+          },
+          {
+            opacity: 1,
+            "--hf-icon-scale": 1,
+            "--hf-icon-blur": "0px",
+            "--hf-icon-rotate": "0deg",
+            duration: 0.26,
+            ease: "back.out(1.7)",
+          },
+          startTime + 0.12,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["icon-swap-demo"] = tl;
+          var child = window.__timelines["icon-swap-demo"];
+          delete window.__timelines["icon-swap-demo"];
+          if (!child || typeof child.paused !== "function") return;
+          child.paused(false);
+          window.__timelines["icon-swap-variables-preview"].add(child, 0);
+        }
+      })();
+    </script>
+<script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "icon-swap.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/icon-swap/demo.html b/docs/public/catalog/components/icon-swap/demo.html
new file mode 100644
index 0000000000..bbaaf0a675
--- /dev/null
+++ b/docs/public/catalog/components/icon-swap/demo.html
@@ -0,0 +1,132 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Icon Swap - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        min-width: 760px;
+        min-height: 480px;
+        padding: 56px;
+        /* ponytail: scale wrapper (not a GSAP target) to fill ~65% of frame */
+        transform: scale(1.47);
+      }
+      .hf-transition-icon-swap {
+        position: relative;
+        display: grid;
+        place-items: center;
+        width: 58px;
+        height: 58px;
+        border: 0;
+        border-radius: 16px;
+        background: #18181b;
+        color: #fff;
+        font:
+          900 28px/1 Inter,
+          system-ui,
+          sans-serif;
+        box-shadow: 0 18px 44px rgba(24, 24, 27, 0.22);
+      }
+      .hf-transition-icon-swap span {
+        position: absolute;
+        filter: blur(var(--hf-icon-blur, 0px));
+        transform: scale(var(--hf-icon-scale, 1)) rotate(var(--hf-icon-rotate, 0deg));
+        will-change: transform, filter, opacity;
+      }
+      .hf-transition-icon-swap .to {
+        opacity: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="icon-swap-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <button class="hf-transition-icon-swap" type="button">
+          <span class="from">+</span><span class="to">OK</span>
+        </button>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.to(
+          ".hf-transition-icon-swap .from",
+          {
+            opacity: 0,
+            "--hf-icon-scale": 0.55,
+            "--hf-icon-blur": "8px",
+            "--hf-icon-rotate": "-18deg",
+            duration: 0.18,
+            ease: "power2.in",
+          },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-transition-icon-swap .to",
+          {
+            opacity: 0,
+            "--hf-icon-scale": 1.35,
+            "--hf-icon-blur": "8px",
+            "--hf-icon-rotate": "18deg",
+          },
+          {
+            opacity: 1,
+            "--hf-icon-scale": 1,
+            "--hf-icon-blur": "0px",
+            "--hf-icon-rotate": "0deg",
+            duration: 0.26,
+            ease: "back.out(1.7)",
+          },
+          startTime + 0.12,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["icon-swap-demo"] = tl;
+      </script>
+    </div>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "icon-swap.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/icon-swap/icon-swap.html b/docs/public/catalog/components/icon-swap/icon-swap.html
new file mode 100644
index 0000000000..29e2fe7122
--- /dev/null
+++ b/docs/public/catalog/components/icon-swap/icon-swap.html
@@ -0,0 +1,112 @@
+<!--
+  Icon Swap - transitions.dev-inspired primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Use the timeline integration
+  note at the bottom as the starting point for deterministic GSAP animation.
+
+  Variables. The script reads each one, falls back to the declared default on anything
+  missing or unrecognised, and writes the result as a custom property the CSS above
+  consumes. The timeline recipe below is untouched by them.
+
+    - tone (dark | light | accent, default dark): button fill and glyph colour. dark is the
+      matte chip, light inverts it for bright frames, accent rides --brand.
+    - size (small | standard | large, default standard): the button box and the glyph inside
+      it, 44px, 58px or 76px.
+    - shape (rounded | circle | square, default rounded): corner radius of the box.
+    - blur (soft | standard | heavy, default standard): scales the blur radius the timeline
+      drives through the swap, from a light haze to a full smear.
+
+  On every default the result is identical to the original: a 58px near-black chip with
+  16px corners and an 8px swap blur.
+-->
+
+<button
+  class="hf-transition-icon-swap"
+  type="button"
+  data-composition-variables='[
+    { "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Button fill and glyph colour. Accent rides --brand.", "default": "dark", "options": [{ "value": "dark", "label": "Dark" }, { "value": "light", "label": "Light" }, { "value": "accent", "label": "Accent" }] },
+    { "id": "size", "type": "enum", "role": "layout", "label": "Size", "description": "Button box and glyph size, from a toolbar chip to a hero action.", "default": "standard", "options": [{ "value": "small", "label": "Small" }, { "value": "standard", "label": "Standard" }, { "value": "large", "label": "Large" }] },
+    { "id": "shape", "type": "enum", "role": "style", "label": "Shape", "description": "Corner treatment of the button box.", "default": "rounded", "options": [{ "value": "rounded", "label": "Rounded" }, { "value": "circle", "label": "Circle" }, { "value": "square", "label": "Square" }] },
+    { "id": "blur", "type": "enum", "role": "motion", "label": "Blur", "description": "Scales the blur radius the timeline drives through the swap, from a light haze to a full smear.", "default": "standard", "options": [{ "value": "soft", "label": "Soft" }, { "value": "standard", "label": "Standard" }, { "value": "heavy", "label": "Heavy" }] }
+  ]'
+>
+  <span class="from">+</span><span class="to">OK</span>
+</button>
+
+<style>
+  .hf-transition-icon-swap {
+    position: relative;
+    display: grid;
+    place-items: center;
+    width: var(--hf-icon-size, 58px);
+    height: var(--hf-icon-size, 58px);
+    border: 0;
+    border-radius: var(--hf-icon-radius, 16px);
+    background: var(--hf-icon-bg, #18181b);
+    color: var(--hf-icon-fg, #fff);
+    font:
+      900 28px/1 Inter,
+      system-ui,
+      sans-serif;
+    font-size: var(--hf-icon-font-size, 28px);
+    box-shadow: 0 18px 44px rgba(24, 24, 27, 0.22);
+  }
+  .hf-transition-icon-swap span {
+    position: absolute;
+    filter: blur(calc(var(--hf-icon-blur, 0px) * var(--hf-icon-blur-scale, 1)));
+    transform: scale(var(--hf-icon-scale, 1)) rotate(var(--hf-icon-rotate, 0deg));
+    will-change: transform, filter, opacity;
+  }
+  .hf-transition-icon-swap .to {
+    opacity: 0;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var tones = {
+      dark: { bg: "#18181b", fg: "#ffffff" },
+      light: { bg: "#fafafa", fg: "#18181b" },
+      accent: { bg: "var(--brand, #34d399)", fg: "#052e21" },
+    };
+    var sizes = {
+      small: { box: "44px", font: "22px" },
+      standard: { box: "58px", font: "28px" },
+      large: { box: "76px", font: "38px" },
+    };
+    var shapes = { rounded: "16px", circle: "50%", square: "6px" };
+    var blurScales = { soft: 0.45, standard: 1, heavy: 2.2 };
+
+    var tone = tones[pick(tones, vars.tone, "dark")];
+    var size = sizes[pick(sizes, vars.size, "standard")];
+    var shape = shapes[pick(shapes, vars.shape, "rounded")];
+    var blurScale = blurScales[pick(blurScales, vars.blur, "standard")];
+
+    var roots = document.querySelectorAll(".hf-transition-icon-swap");
+    for (var i = 0; i < roots.length; i += 1) {
+      roots[i].style.setProperty("--hf-icon-bg", tone.bg);
+      roots[i].style.setProperty("--hf-icon-fg", tone.fg);
+      roots[i].style.setProperty("--hf-icon-size", size.box);
+      roots[i].style.setProperty("--hf-icon-font-size", size.font);
+      roots[i].style.setProperty("--hf-icon-radius", shape);
+      roots[i].style.setProperty("--hf-icon-blur-scale", String(blurScale));
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.to('.hf-transition-icon-swap .from', { opacity: 0, '--hf-icon-scale': 0.55, '--hf-icon-blur': '8px', '--hf-icon-rotate': '-18deg', duration: 0.18, ease: 'power2.in' }, startTime); tl.fromTo('.hf-transition-icon-swap .to', { opacity: 0, '--hf-icon-scale': 1.35, '--hf-icon-blur': '8px', '--hf-icon-rotate': '18deg' }, { opacity: 1, '--hf-icon-scale': 1, '--hf-icon-blur': '0px', '--hf-icon-rotate': '0deg', duration: 0.26, ease: 'back.out(1.7)' }, startTime + 0.12);
+-->
diff --git a/docs/public/catalog/components/image-expand-to-fullscreen/__hf-variables-preview.html b/docs/public/catalog/components/image-expand-to-fullscreen/__hf-variables-preview.html
new file mode 100644
index 0000000000..d5642af73e
--- /dev/null
+++ b/docs/public/catalog/components/image-expand-to-fullscreen/__hf-variables-preview.html
@@ -0,0 +1,106 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Image Expand to Fullscreen variables preview</title>
+    <style>
+      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #f7f7f8; }
+      #hf-vars-root { position: relative; width: 1920px; height: 1080px; }
+      #hf-vars-mount { position: absolute; inset: 0; display: grid; place-items: center; }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  </head>
+  <body>
+    <div id="hf-vars-root" data-composition-id="image-expand-to-fullscreen-variables-preview" data-start="0" data-width="1920" data-height="1080" data-duration="5" data-fps="30">
+      <div id="hf-vars-mount" class="clip" data-composition-id="image-expand-to-fullscreen" data-composition-src="./image-expand-to-fullscreen.html" data-start="0" data-duration="5" data-track-index="0" data-width="1920" data-height="1080"></div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["image-expand-to-fullscreen-variables-preview"] = gsap.timeline({ paused: true });
+    </script>
+    <script>
+      (function () {
+        var mount = document.getElementById("hf-vars-mount");
+        // The mount is filled asynchronously, and the demo script selects
+        // what it fills it with, so it cannot run before then.
+        var observer = new MutationObserver(build);
+        observer.observe(mount, { childList: true, subtree: true });
+        build();
+        function build() {
+          if (!mount.firstElementChild) return;
+          observer.disconnect();
+
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-image-expand-to-fullscreen .to",
+          { "--hf-clip-right": "100%", "--hf-to-x": "60px", "--hf-to-scale": 1.04 },
+          {
+            "--hf-clip-right": "0%",
+            "--hf-to-x": "0px",
+            "--hf-to-scale": 1,
+            duration: 0.9,
+            ease: "power3.inOut",
+          },
+          startTime,
+        );
+        tl.to(
+          ".hf-remocn-image-expand-to-fullscreen .from",
+          {
+            "--hf-from-x": "-70px",
+            "--hf-from-scale": 0.96,
+            "--hf-from-blur": "5px",
+            duration: 0.9,
+            ease: "power3.inOut",
+          },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-image-expand-to-fullscreen .fx",
+          { "--hf-fx-x": "-110%" },
+          { "--hf-fx-x": "110%", duration: 0.58, ease: "power2.inOut" },
+          startTime + 0.18,
+        );
+        tl.fromTo(
+          ".hf-remocn-image-expand-to-fullscreen .rgb",
+          { "--hf-rgb-opacity": 0, "--hf-rgb-x": "-16px" },
+          {
+            "--hf-rgb-opacity": 1,
+            "--hf-rgb-x": "16px",
+            repeat: 3,
+            yoyo: true,
+            duration: 0.07,
+            ease: "steps(1)",
+          },
+          startTime + 0.32,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["image-expand-to-fullscreen-demo"] = tl;
+          var child = window.__timelines["image-expand-to-fullscreen-demo"];
+          delete window.__timelines["image-expand-to-fullscreen-demo"];
+          if (!child || typeof child.paused !== "function") return;
+          child.paused(false);
+          window.__timelines["image-expand-to-fullscreen-variables-preview"].add(child, 0);
+        }
+      })();
+    </script>
+<script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "image-expand-to-fullscreen.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/image-expand-to-fullscreen/demo.html b/docs/public/catalog/components/image-expand-to-fullscreen/demo.html
new file mode 100644
index 0000000000..115d112d94
--- /dev/null
+++ b/docs/public/catalog/components/image-expand-to-fullscreen/demo.html
@@ -0,0 +1,190 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Image Expand to Fullscreen - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+        /* ponytail: scale non-GSAP wrapper to fill ~70% of the 1920×1080 stage */
+        transform: scale(1.82);
+      }
+      .hf-remocn-image-expand-to-fullscreen {
+        --hf-accent: var(--accent, rgba(255, 255, 255, 0.28));
+        --hf-ink: #111827;
+        --hf-l1: rgba(255, 255, 255, 0.72);
+        --hf-l3: rgba(255, 255, 255, 0.18);
+        --hf-l4: rgba(255, 255, 255, 0.08);
+        --hf-hair: rgba(255, 255, 255, 0.14);
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-image-expand-to-fullscreen {
+        position: relative;
+        width: 760px;
+        height: 428px;
+        overflow: hidden;
+        border-radius: 20px;
+        background: #111827;
+        box-shadow: 0 32px 96px rgba(15, 23, 42, 0.28);
+      }
+      .hf-remocn-image-expand-to-fullscreen .scene {
+        position: absolute;
+        inset: 0;
+        display: grid;
+        place-items: center;
+        font-weight: 800;
+        font-size: 48px;
+        letter-spacing: -0.04em;
+        color: #fff;
+      }
+      .hf-remocn-image-expand-to-fullscreen .from {
+        background:
+          repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 4px),
+          var(--hf-l4);
+        transform: translate(var(--hf-from-x, 0px), var(--hf-from-y, 0px))
+          scale(var(--hf-from-scale, 1));
+        filter: blur(var(--hf-from-blur, 0px));
+      }
+      .hf-remocn-image-expand-to-fullscreen .to {
+        background:
+          repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 4px),
+          var(--hf-l3);
+        box-shadow: inset 0 0 0 2px var(--hf-accent);
+        transform: translate(var(--hf-to-x, 0px), var(--hf-to-y, 0px)) scale(var(--hf-to-scale, 1));
+        clip-path: inset(
+          var(--hf-clip-top, 0%) var(--hf-clip-right, 100%) var(--hf-clip-bottom, 0%)
+            var(--hf-clip-left, 0%)
+        );
+      }
+      .hf-remocn-image-expand-to-fullscreen .fx {
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
+        mix-blend-mode: screen;
+        transform: translateX(var(--hf-fx-x, -110%));
+      }
+      .hf-remocn-image-expand-to-fullscreen .rgb {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        opacity: var(--hf-rgb-opacity, 0);
+        background: linear-gradient(
+          90deg,
+          rgba(239, 68, 68, 0.35),
+          transparent,
+          rgba(34, 211, 238, 0.35)
+        );
+        transform: translateX(var(--hf-rgb-x, 0px));
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="image-expand-to-fullscreen-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-image-expand-to-fullscreen">
+          <div class="scene from">Gallery</div>
+          <div class="scene to">Image Expand to Fullscreen</div>
+          <div class="fx"></div>
+          <div class="rgb"></div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-image-expand-to-fullscreen .to",
+          { "--hf-clip-right": "100%", "--hf-to-x": "60px", "--hf-to-scale": 1.04 },
+          {
+            "--hf-clip-right": "0%",
+            "--hf-to-x": "0px",
+            "--hf-to-scale": 1,
+            duration: 0.9,
+            ease: "power3.inOut",
+          },
+          startTime,
+        );
+        tl.to(
+          ".hf-remocn-image-expand-to-fullscreen .from",
+          {
+            "--hf-from-x": "-70px",
+            "--hf-from-scale": 0.96,
+            "--hf-from-blur": "5px",
+            duration: 0.9,
+            ease: "power3.inOut",
+          },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-image-expand-to-fullscreen .fx",
+          { "--hf-fx-x": "-110%" },
+          { "--hf-fx-x": "110%", duration: 0.58, ease: "power2.inOut" },
+          startTime + 0.18,
+        );
+        tl.fromTo(
+          ".hf-remocn-image-expand-to-fullscreen .rgb",
+          { "--hf-rgb-opacity": 0, "--hf-rgb-x": "-16px" },
+          {
+            "--hf-rgb-opacity": 1,
+            "--hf-rgb-x": "16px",
+            repeat: 3,
+            yoyo: true,
+            duration: 0.07,
+            ease: "steps(1)",
+          },
+          startTime + 0.32,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["image-expand-to-fullscreen-demo"] = tl;
+      </script>
+    </div>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "image-expand-to-fullscreen.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/image-expand-to-fullscreen/image-expand-to-fullscreen.html b/docs/public/catalog/components/image-expand-to-fullscreen/image-expand-to-fullscreen.html
new file mode 100644
index 0000000000..822437fa7e
--- /dev/null
+++ b/docs/public/catalog/components/image-expand-to-fullscreen/image-expand-to-fullscreen.html
@@ -0,0 +1,162 @@
+<!--
+  Image Expand to Fullscreen - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup, CSS and script into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+
+  Variables. The script reads each one, falls back to the declared default on anything
+  missing or unrecognised, and writes the result as a custom property the CSS above
+  consumes. The timeline recipe below is untouched by them.
+
+    - accent (green | blue | violet, default blue): ink of the ring that marks the
+      incoming plate. The plates themselves are monochrome placeholder material;
+      the ring is the one accent-coloured element. green rides --brand, blue rides
+      --accent, violet rides --accent-2, and each falls back to a neutral hairline
+      so an unthemed composition renders in black and white.
+    - format (wide | square | portrait, default wide): aspect of the tile the transition
+      plays inside, 760x428, 560x560 or 428x760.
+    - corner (soft | sharp | round, default soft): corner radius of the tile, 30px, 0 or 60px.
+    - chroma (off | subtle | standard, default standard): strength of the red and cyan fringe
+      that stutters over the wipe. off removes it entirely.
+
+  On every default the result is identical to the original: a 760x428 tile with 30px
+  corners, a blue to violet destination plate and a full strength chroma stutter.
+-->
+
+<div
+  class="hf-remocn-image-expand-to-fullscreen"
+  data-composition-variables='[
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Theme token for the ring marking the incoming plate. Green rides --brand, blue --accent, violet --accent-2; each falls back to a neutral hairline.", "default": "blue", "options": [{ "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }, { "value": "green", "label": "Green" }] },
+    { "id": "format", "type": "enum", "role": "layout", "label": "Format", "description": "Aspect of the tile the transition plays inside.", "default": "wide", "options": [{ "value": "wide", "label": "Wide" }, { "value": "square", "label": "Square" }, { "value": "portrait", "label": "Portrait" }] },
+    { "id": "corner", "type": "enum", "role": "style", "label": "Corner", "description": "Corner radius of the tile.", "default": "soft", "options": [{ "value": "soft", "label": "Soft" }, { "value": "sharp", "label": "Sharp" }, { "value": "round", "label": "Round" }] },
+    { "id": "chroma", "type": "enum", "role": "motion", "label": "Chroma split", "description": "Strength of the red and cyan fringe that stutters over the wipe. Off removes it.", "default": "standard", "options": [{ "value": "off", "label": "Off" }, { "value": "subtle", "label": "Subtle" }, { "value": "standard", "label": "Standard" }] }
+  ]'
+>
+  <div class="scene from">Before</div>
+  <div class="scene to">Image Expand to Fullscreen</div>
+  <div class="fx"></div>
+  <div class="rgb"></div>
+</div>
+
+<style>
+  .hf-remocn-image-expand-to-fullscreen {
+    --hf-accent: var(--accent, rgba(255, 255, 255, 0.28));
+    --hf-ink: #111827;
+    --hf-l1: rgba(255, 255, 255, 0.72);
+    --hf-l3: rgba(255, 255, 255, 0.18);
+    --hf-l4: rgba(255, 255, 255, 0.08);
+    --hf-hair: rgba(255, 255, 255, 0.14);
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-image-expand-to-fullscreen {
+    position: relative;
+    width: var(--hf-plate-w, 760px);
+    height: var(--hf-plate-h, 428px);
+    overflow: hidden;
+    border-radius: var(--hf-plate-radius, 30px);
+    background: #111827;
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+  }
+  .hf-remocn-image-expand-to-fullscreen .scene {
+    position: absolute;
+    inset: 0;
+    display: grid;
+    place-items: center;
+    font-weight: 900;
+    font-size: 58px;
+    letter-spacing: -0.05em;
+    color: #fff;
+  }
+  .hf-remocn-image-expand-to-fullscreen .from {
+    background:
+      repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 4px),
+      var(--hf-l4);
+    transform: translate(var(--hf-from-x, 0px), var(--hf-from-y, 0px))
+      scale(var(--hf-from-scale, 1));
+    filter: blur(var(--hf-from-blur, 0px));
+  }
+  .hf-remocn-image-expand-to-fullscreen .to {
+    background:
+      repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 4px),
+      var(--hf-l3);
+    box-shadow: inset 0 0 0 2px var(--hf-accent);
+    transform: translate(var(--hf-to-x, 0px), var(--hf-to-y, 0px)) scale(var(--hf-to-scale, 1));
+    clip-path: inset(
+      var(--hf-clip-top, 0%) var(--hf-clip-right, 100%) var(--hf-clip-bottom, 0%)
+        var(--hf-clip-left, 0%)
+    );
+  }
+  .hf-remocn-image-expand-to-fullscreen .fx {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
+    mix-blend-mode: screen;
+    transform: translateX(var(--hf-fx-x, -110%));
+  }
+  .hf-remocn-image-expand-to-fullscreen .rgb {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    opacity: calc(var(--hf-rgb-opacity, 0) * var(--hf-rgb-strength, 1));
+    background: linear-gradient(
+      90deg,
+      rgba(239, 68, 68, 0.35),
+      transparent,
+      rgba(34, 211, 238, 0.35)
+    );
+    transform: translateX(var(--hf-rgb-x, 0px));
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    // Theme tokens only. The neutral fallback keeps an unthemed mount monochrome.
+    var HAIRLINE = "rgba(255, 255, 255, 0.28)";
+    var accents = {
+      green: "var(--brand, " + HAIRLINE + ")",
+      blue: "var(--accent, " + HAIRLINE + ")",
+      violet: "var(--accent-2, " + HAIRLINE + ")",
+    };
+    var formats = {
+      wide: { w: "760px", h: "428px" },
+      square: { w: "560px", h: "560px" },
+      portrait: { w: "428px", h: "760px" },
+    };
+    var corners = { soft: "30px", sharp: "0px", round: "60px" };
+    var chromas = { off: 0, subtle: 0.4, standard: 1 };
+
+    var accent = accents[pick(accents, vars.accent, "blue")];
+    var format = formats[pick(formats, vars.format, "wide")];
+    var corner = corners[pick(corners, vars.corner, "soft")];
+    var chroma = chromas[pick(chromas, vars.chroma, "standard")];
+
+    var roots = document.querySelectorAll(".hf-remocn-image-expand-to-fullscreen");
+    for (var i = 0; i < roots.length; i += 1) {
+      roots[i].style.setProperty("--hf-accent", accent);
+      roots[i].style.setProperty("--hf-plate-w", format.w);
+      roots[i].style.setProperty("--hf-plate-h", format.h);
+      roots[i].style.setProperty("--hf-plate-radius", corner);
+      roots[i].style.setProperty("--hf-rgb-strength", String(chroma));
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-image-expand-to-fullscreen .to', { '--hf-clip-right': '100%', '--hf-to-x': '60px', '--hf-to-scale': 1.04 }, { '--hf-clip-right': '0%', '--hf-to-x': '0px', '--hf-to-scale': 1, duration: 0.9, ease: 'power3.inOut' }, startTime); tl.to('.hf-remocn-image-expand-to-fullscreen .from', { '--hf-from-x': '-70px', '--hf-from-scale': 0.96, '--hf-from-blur': '5px', duration: 0.9, ease: 'power3.inOut' }, startTime); tl.fromTo('.hf-remocn-image-expand-to-fullscreen .fx', { '--hf-fx-x': '-110%' }, { '--hf-fx-x': '110%', duration: 0.58, ease: 'power2.inOut' }, startTime + 0.18); tl.fromTo('.hf-remocn-image-expand-to-fullscreen .rgb', { '--hf-rgb-opacity': 0, '--hf-rgb-x': '-16px' }, { '--hf-rgb-opacity': 1, '--hf-rgb-x': '16px', repeat: 3, yoyo: true, duration: 0.07, ease: 'steps(1)' }, startTime + 0.32);
+-->
diff --git a/docs/public/catalog/components/infinite-bento-pan/demo.html b/docs/public/catalog/components/infinite-bento-pan/demo.html
new file mode 100644
index 0000000000..65f880ec02
--- /dev/null
+++ b/docs/public/catalog/components/infinite-bento-pan/demo.html
@@ -0,0 +1,197 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Infinite Bento Pan - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f4f4f5;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+        /* ponytail: scale wrapper (not a GSAP target) fills ~65% of 1920×1080 */
+        transform: scale(0.81);
+        transform-origin: center center;
+      }
+      .hf-remocn-infinite-bento-pan {
+        --hf-accent: #2563eb;
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-infinite-bento-pan {
+        width: 820px;
+        min-height: 460px;
+        border-radius: 34px;
+        padding: 28px;
+        background: #ffffff;
+        border: 1px solid #e4e4e7;
+        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.10);
+        display: grid;
+        grid-template-columns: 280px 1fr;
+        gap: 22px;
+        overflow: hidden;
+      }
+      .hf-remocn-infinite-bento-pan .panel {
+        border: 1px solid #e4e4e7;
+        border-radius: 16px;
+        background: #fafafa;
+        padding: 22px;
+      }
+      .hf-remocn-infinite-bento-pan .prompt {
+        display: grid;
+        gap: 12px;
+        align-content: start;
+      }
+      .hf-remocn-infinite-bento-pan .pill {
+        height: 42px;
+        border-radius: 999px;
+        background: #111827;
+        color: #fff;
+        display: flex;
+        align-items: center;
+        padding: 0 18px;
+        font-weight: 800;
+        transform: translateX(var(--hf-pill-x, 0px));
+      }
+      .hf-remocn-infinite-bento-pan .preview {
+        display: grid;
+        gap: 14px;
+      }
+      .hf-remocn-infinite-bento-pan .card {
+        min-height: 78px;
+        border-radius: 12px;
+        background: #ffffff;
+        border: 1px solid #e4e4e7;
+        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
+        transform: translate(var(--hf-card-x, 0px), var(--hf-card-y, 0px))
+          scale(var(--hf-card-scale, 1));
+        opacity: var(--hf-card-opacity, 1);
+        padding: 16px 18px;
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+      }
+      .hf-remocn-infinite-bento-pan .card-label {
+        font-size: 11px;
+        font-weight: 600;
+        color: #71717a;
+        text-transform: uppercase;
+        letter-spacing: 0.06em;
+      }
+      .hf-remocn-infinite-bento-pan .card-title {
+        font-size: 15px;
+        font-weight: 600;
+        color: #18181b;
+        letter-spacing: -0.02em;
+      }
+      .hf-remocn-infinite-bento-pan .card-bar {
+        height: 6px;
+        border-radius: 999px;
+        background: #e4e4e7;
+        margin-top: 4px;
+        overflow: hidden;
+      }
+      .hf-remocn-infinite-bento-pan .card-bar-fill {
+        height: 100%;
+        border-radius: 999px;
+        background: #18181b;
+      }
+      .hf-remocn-infinite-bento-pan h3 {
+        margin: 0 0 14px;
+        font-size: 32px;
+        letter-spacing: -0.04em;
+      }
+      .hf-remocn-infinite-bento-pan p {
+        margin: 0;
+        color: #475569;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="infinite-bento-pan-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-infinite-bento-pan">
+          <div class="panel prompt">
+            <h3>Infinite Bento Pan</h3>
+            <p>A bento board pans forever with feature cards at different depths.</p>
+            <div class="pill">Generate scene</div>
+            <div class="pill">Refine motion</div>
+            <div class="pill">Export</div>
+          </div>
+          <div class="panel preview">
+            <div class="card">
+              <span class="card-label">Scene</span>
+              <span class="card-title">Hero entrance</span>
+              <div class="card-bar"><div class="card-bar-fill" style="width:72%"></div></div>
+            </div>
+            <div class="card">
+              <span class="card-label">Motion</span>
+              <span class="card-title">Parallax depth</span>
+              <div class="card-bar"><div class="card-bar-fill" style="width:48%"></div></div>
+            </div>
+            <div class="card">
+              <span class="card-label">Export</span>
+              <span class="card-title">1920 × 1080 · 60fps</span>
+              <div class="card-bar"><div class="card-bar-fill" style="width:90%"></div></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-infinite-bento-pan .pill",
+          { "--hf-pill-x": "-18px", opacity: 0 },
+          { "--hf-pill-x": "0px", opacity: 1, duration: 0.25, stagger: 0.08, ease: "power2.out" },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-infinite-bento-pan .card",
+          { "--hf-card-y": "28px", "--hf-card-scale": 0.96, "--hf-card-opacity": 0 },
+          {
+            "--hf-card-y": "0px",
+            "--hf-card-scale": 1,
+            "--hf-card-opacity": 1,
+            duration: 0.42,
+            stagger: 0.12,
+            ease: "power3.out",
+          },
+          startTime + 0.2,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["infinite-bento-pan-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/infinite-bento-pan/infinite-bento-pan.html b/docs/public/catalog/components/infinite-bento-pan/infinite-bento-pan.html
new file mode 100644
index 0000000000..07e1d73b83
--- /dev/null
+++ b/docs/public/catalog/components/infinite-bento-pan/infinite-bento-pan.html
@@ -0,0 +1,94 @@
+<!--
+  Infinite Bento Pan - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-infinite-bento-pan">
+  <div class="panel prompt">
+    <h3>Infinite Bento Pan</h3>
+    <p>A bento board pans forever with feature cards at different depths.</p>
+    <div class="pill">Generate scene</div>
+    <div class="pill">Refine motion</div>
+    <div class="pill">Export</div>
+  </div>
+  <div class="panel preview">
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+  </div>
+</div>
+
+<style>
+  .hf-remocn-infinite-bento-pan {
+    --hf-accent: #2563eb;
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-infinite-bento-pan {
+    width: 820px;
+    min-height: 460px;
+    border-radius: 34px;
+    padding: 28px;
+    background: linear-gradient(135deg, #f8fafc, #e0f2fe);
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);
+    display: grid;
+    grid-template-columns: 280px 1fr;
+    gap: 22px;
+    overflow: hidden;
+  }
+  .hf-remocn-infinite-bento-pan .panel {
+    border: 1px solid rgba(15, 23, 42, 0.08);
+    border-radius: 24px;
+    background: rgba(255, 255, 255, 0.76);
+    padding: 22px;
+    backdrop-filter: blur(12px);
+  }
+  .hf-remocn-infinite-bento-pan .prompt {
+    display: grid;
+    gap: 12px;
+    align-content: start;
+  }
+  .hf-remocn-infinite-bento-pan .pill {
+    height: 42px;
+    border-radius: 999px;
+    background: #111827;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    padding: 0 18px;
+    font-weight: 800;
+    transform: translateX(var(--hf-pill-x, 0px));
+  }
+  .hf-remocn-infinite-bento-pan .preview {
+    display: grid;
+    gap: 14px;
+  }
+  .hf-remocn-infinite-bento-pan .card {
+    min-height: 78px;
+    border-radius: 18px;
+    background: #fff;
+    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
+    transform: translate(var(--hf-card-x, 0px), var(--hf-card-y, 0px))
+      scale(var(--hf-card-scale, 1));
+    opacity: var(--hf-card-opacity, 1);
+  }
+  .hf-remocn-infinite-bento-pan h3 {
+    margin: 0 0 14px;
+    font-size: 32px;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-infinite-bento-pan p {
+    margin: 0;
+    color: #475569;
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-infinite-bento-pan .pill', { '--hf-pill-x': '-18px', opacity: 0 }, { '--hf-pill-x': '0px', opacity: 1, duration: 0.25, stagger: 0.08, ease: 'power2.out' }, startTime); tl.fromTo('.hf-remocn-infinite-bento-pan .card', { '--hf-card-y': '28px', '--hf-card-scale': 0.96, '--hf-card-opacity': 0 }, { '--hf-card-y': '0px', '--hf-card-scale': 1, '--hf-card-opacity': 1, duration: 0.42, stagger: 0.12, ease: 'power3.out' }, startTime + 0.2);
+-->
diff --git a/docs/public/catalog/components/infinite-marquee/demo.html b/docs/public/catalog/components/infinite-marquee/demo.html
new file mode 100644
index 0000000000..c2e9e0d56e
--- /dev/null
+++ b/docs/public/catalog/components/infinite-marquee/demo.html
@@ -0,0 +1,217 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Infinite Marquee - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+        zoom: 1.72; /* ponytail: scale-up only; revert if layout clips */
+      }
+      .hf-remocn-infinite-marquee {
+        --hf-accent: #2563eb;
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-infinite-marquee {
+        width: 820px;
+        min-height: 460px;
+        border-radius: 34px;
+        padding: 28px;
+        background: linear-gradient(135deg, #f8fafc, #e0f2fe);
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);
+        display: grid;
+        grid-template-columns: 280px 1fr;
+        gap: 22px;
+        overflow: hidden;
+      }
+      .hf-remocn-infinite-marquee .panel {
+        border: 1px solid rgba(15, 23, 42, 0.08);
+        border-radius: 24px;
+        background: rgba(255, 255, 255, 0.76);
+        padding: 22px;
+        backdrop-filter: blur(12px);
+      }
+      .hf-remocn-infinite-marquee .prompt {
+        display: grid;
+        gap: 12px;
+        align-content: start;
+      }
+      .hf-remocn-infinite-marquee .pill {
+        height: 42px;
+        border-radius: 999px;
+        background: #111827;
+        color: #fff;
+        display: flex;
+        align-items: center;
+        padding: 0 18px;
+        font-weight: 800;
+        transform: translateX(var(--hf-pill-x, 0px));
+      }
+      .hf-remocn-infinite-marquee .preview {
+        display: grid;
+        gap: 14px;
+      }
+      .hf-remocn-infinite-marquee .card {
+        min-height: 78px;
+        border-radius: 18px;
+        background: #fff;
+        box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
+        transform: translate(var(--hf-card-x, 0px), var(--hf-card-y, 0px))
+          scale(var(--hf-card-scale, 1));
+        opacity: var(--hf-card-opacity, 1);
+        overflow: hidden;
+        display: flex;
+        align-items: center;
+        padding: 0 16px;
+      }
+      /* marquee track inside each preview card */
+      .hf-remocn-infinite-marquee .marquee-track {
+        display: flex;
+        gap: 10px;
+        flex-shrink: 0;
+      }
+      .hf-remocn-infinite-marquee .mpill {
+        display: inline-flex;
+        align-items: center;
+        height: 32px;
+        padding: 0 14px;
+        border-radius: 999px;
+        font-size: 13px;
+        font-weight: 600;
+        white-space: nowrap;
+        flex-shrink: 0;
+      }
+      .hf-remocn-infinite-marquee .mpill-dark {
+        background: #18181b;
+        color: #fafafa;
+      }
+      .hf-remocn-infinite-marquee .mpill-outline {
+        background: #fff;
+        color: #18181b;
+        border: 1px solid #e4e4e7;
+      }
+      .hf-remocn-infinite-marquee .mpill-muted {
+        background: #f4f4f5;
+        color: #71717a;
+      }
+      .hf-remocn-infinite-marquee h3 {
+        margin: 0 0 14px;
+        font-size: 32px;
+        letter-spacing: -0.04em;
+      }
+      .hf-remocn-infinite-marquee p {
+        margin: 0;
+        color: #475569;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="infinite-marquee-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-infinite-marquee">
+          <div class="panel prompt">
+            <h3>Infinite Marquee</h3>
+            <p>A looping marquee primitive for logos, tags, and feature pills.</p>
+            <div class="pill">Generate scene</div>
+            <div class="pill">Refine motion</div>
+            <div class="pill">Export</div>
+          </div>
+          <div class="panel preview">
+            <div class="card">
+              <div class="marquee-track">
+                <span class="mpill mpill-dark">Motion</span>
+                <span class="mpill mpill-outline">Scroll</span>
+                <span class="mpill mpill-muted">Loop</span>
+                <span class="mpill mpill-dark">Marquee</span>
+                <span class="mpill mpill-outline">Infinite</span>
+                <span class="mpill mpill-muted">Ticker</span>
+                <span class="mpill mpill-dark">Scroll</span>
+              </div>
+            </div>
+            <div class="card">
+              <div class="marquee-track">
+                <span class="mpill mpill-outline">React</span>
+                <span class="mpill mpill-dark">Vue</span>
+                <span class="mpill mpill-muted">Svelte</span>
+                <span class="mpill mpill-outline">Angular</span>
+                <span class="mpill mpill-dark">Solid</span>
+                <span class="mpill mpill-muted">Astro</span>
+                <span class="mpill mpill-outline">Next.js</span>
+              </div>
+            </div>
+            <div class="card">
+              <div class="marquee-track">
+                <span class="mpill mpill-muted">Design</span>
+                <span class="mpill mpill-dark">Build</span>
+                <span class="mpill mpill-outline">Ship</span>
+                <span class="mpill mpill-muted">Iterate</span>
+                <span class="mpill mpill-dark">Launch</span>
+                <span class="mpill mpill-outline">Scale</span>
+                <span class="mpill mpill-muted">Repeat</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-infinite-marquee .pill",
+          { "--hf-pill-x": "-18px", opacity: 0 },
+          { "--hf-pill-x": "0px", opacity: 1, duration: 0.25, stagger: 0.08, ease: "power2.out" },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-infinite-marquee .card",
+          { "--hf-card-y": "28px", "--hf-card-scale": 0.96, "--hf-card-opacity": 0 },
+          {
+            "--hf-card-y": "0px",
+            "--hf-card-scale": 1,
+            "--hf-card-opacity": 1,
+            duration: 0.42,
+            stagger: 0.12,
+            ease: "power3.out",
+          },
+          startTime + 0.2,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["infinite-marquee-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/infinite-marquee/infinite-marquee.html b/docs/public/catalog/components/infinite-marquee/infinite-marquee.html
new file mode 100644
index 0000000000..71c2b234e7
--- /dev/null
+++ b/docs/public/catalog/components/infinite-marquee/infinite-marquee.html
@@ -0,0 +1,94 @@
+<!--
+  Infinite Marquee - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-infinite-marquee">
+  <div class="panel prompt">
+    <h3>Infinite Marquee</h3>
+    <p>A looping marquee primitive for logos, tags, and feature pills.</p>
+    <div class="pill">Generate scene</div>
+    <div class="pill">Refine motion</div>
+    <div class="pill">Export</div>
+  </div>
+  <div class="panel preview">
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+  </div>
+</div>
+
+<style>
+  .hf-remocn-infinite-marquee {
+    --hf-accent: #2563eb;
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-infinite-marquee {
+    width: 820px;
+    min-height: 460px;
+    border-radius: 34px;
+    padding: 28px;
+    background: linear-gradient(135deg, #f8fafc, #e0f2fe);
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);
+    display: grid;
+    grid-template-columns: 280px 1fr;
+    gap: 22px;
+    overflow: hidden;
+  }
+  .hf-remocn-infinite-marquee .panel {
+    border: 1px solid rgba(15, 23, 42, 0.08);
+    border-radius: 24px;
+    background: rgba(255, 255, 255, 0.76);
+    padding: 22px;
+    backdrop-filter: blur(12px);
+  }
+  .hf-remocn-infinite-marquee .prompt {
+    display: grid;
+    gap: 12px;
+    align-content: start;
+  }
+  .hf-remocn-infinite-marquee .pill {
+    height: 42px;
+    border-radius: 999px;
+    background: #111827;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    padding: 0 18px;
+    font-weight: 800;
+    transform: translateX(var(--hf-pill-x, 0px));
+  }
+  .hf-remocn-infinite-marquee .preview {
+    display: grid;
+    gap: 14px;
+  }
+  .hf-remocn-infinite-marquee .card {
+    min-height: 78px;
+    border-radius: 18px;
+    background: #fff;
+    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
+    transform: translate(var(--hf-card-x, 0px), var(--hf-card-y, 0px))
+      scale(var(--hf-card-scale, 1));
+    opacity: var(--hf-card-opacity, 1);
+  }
+  .hf-remocn-infinite-marquee h3 {
+    margin: 0 0 14px;
+    font-size: 32px;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-infinite-marquee p {
+    margin: 0;
+    color: #475569;
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-infinite-marquee .pill', { '--hf-pill-x': '-18px', opacity: 0 }, { '--hf-pill-x': '0px', opacity: 1, duration: 0.25, stagger: 0.08, ease: 'power2.out' }, startTime); tl.fromTo('.hf-remocn-infinite-marquee .card', { '--hf-card-y': '28px', '--hf-card-scale': 0.96, '--hf-card-opacity': 0 }, { '--hf-card-y': '0px', '--hf-card-scale': 1, '--hf-card-opacity': 1, duration: 0.42, stagger: 0.12, ease: 'power3.out' }, startTime + 0.2);
+-->
diff --git a/docs/public/catalog/components/ink-bleed-reveal/README.md b/docs/public/catalog/components/ink-bleed-reveal/README.md
new file mode 100644
index 0000000000..2bef3f0960
--- /dev/null
+++ b/docs/public/catalog/components/ink-bleed-reveal/README.md
@@ -0,0 +1,48 @@
+# ink-bleed-reveal
+
+Liquid ink blooms through paper to reveal a mark: several ink blobs bleed outward from the drop point, merge like liquid under the gooey filter (feGaussianBlur + a hard feColorMatrix alpha threshold), then the puddle contracts and dies as the crisp mark resolves beneath it. A seeded, static paper-grain overlay (feTurbulence, fixed seed) rides the whole piece.
+
+4s authored, elastic HOLD, exit `none` by default. Wave M experiment (watch page only, not on the hero shelf).
+
+## Variables
+
+| id       | type   | default | notes                                                                                                                                                     |
+| -------- | ------ | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `blobs`  | number | `5`     | How many ink blobs bleed and merge, clamped 4 to 6.                                                                                                       |
+| `accent` | enum   | `green` | Ink tint: green rides `--brand`, blue rides `--accent`, violet rides `--accent-2`. The ink body is the accent mixed toward `--fg` so it reads as pigment. |
+| `exit`   | enum   | `none`  | `none` holds until the cut; `fade` departs opacity-only; `up` rises out.                                                                                  |
+
+## Mark slot
+
+The mark is a slot. Place an inert template anywhere in the HOST page (templates never render, and the runtime wipes the host clip's own children on mount, so the slot lives at document level):
+
+```html
+<template data-slot="ink-bleed-reveal-mark">
+  <img src="./assets/logo.svg" alt="" style="width: 40cqmin" />
+</template>
+```
+
+With no slot, the primitive renders a token monogram: one display glyph in an ink-colored ring, contract tokens only. Light paper is the home register, but every color rides a token so themes restate it.
+
+## Mount
+
+```html
+<div
+  class="clip"
+  data-composition-id="ink-bleed-reveal"
+  data-composition-src="./ink-bleed-reveal.html"
+  data-variable-values='{"blobs":6,"accent":"blue"}'
+  data-start="0"
+  data-duration="4"
+  data-track-index="0"
+></div>
+```
+
+Elastic root: no `data-width`/`data-height`; it fills whatever box the host clip gives it. Timeline registers under the literal `ink-bleed-reveal` key.
+
+## Notes
+
+- The gooey read comes from the blur-to-threshold ratio, not the blur alone: a Gaussian blur (radius scaled from the host box at mount) softens the blob silhouettes together, then the colormatrix threshold (alpha slope 22, intercept -9) snaps the merged alpha back to a crisp liquid edge. Skipping the threshold step yields smudge, not goo. The chain is the classic SVG `feGaussianBlur` + `feColorMatrix` recipe, computed in a low-resolution canvas work buffer each repaint: Chrome's live SVG/CSS filter raster patches damaged tiles with seek-history-dependent seam antialiasing, while a cleared, fully redrawn canvas lands byte-identical frames.
+- Closed-form field, no physics: one per-blob parameter table is built once from fixed LCG seed `0x1b1eedca`; every painted frame positions each blob as a pure function of (table row, timeline time) inside the anchor tween's `onUpdate`. Zero per-blob tweens, no velocities, no integration, so eventful seeks (`suppressEvents=false`) land identical frames in any order and either direction.
+- By the end of IN every blob is dead and the goo canvas is one clear rect; the paper grain is painted by a fixed-seed `feTurbulence` and never animated. The HOLD is therefore byte-still: the crisp mark on quiet paper.
+- Cost note: each repaint blurs and thresholds a third-resolution buffer (one `getImageData` readback per frame); fine at watch-page sizes, but avoid mounting several instances of this primitive on one frame.
diff --git a/docs/public/catalog/components/ink-bleed-reveal/demo.html b/docs/public/catalog/components/ink-bleed-reveal/demo.html
new file mode 100644
index 0000000000..bb63259f4d
--- /dev/null
+++ b/docs/public/catalog/components/ink-bleed-reveal/demo.html
@@ -0,0 +1,134 @@
+<!doctype html>
+<!--
+  ink-bleed-reveal demo. This standalone composition mounts the primitive
+  FULL-BLEED through data-composition-src on a light paper register.
+  Non-default blobs and accent values prove the variable path, and a slotted
+  wordmark proves the mark slot (the default token monogram never renders
+  here).
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Ink Bleed Reveal Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #f7f4ee);
+      }
+
+      #root {
+        --bg: #f7f4ee;
+        --fg: #1d1b16;
+        --muted: #6d675c;
+        --surface: #fffdf8;
+        --border: #ddd6c8;
+        --brand: #14a35e;
+        --accent: #2f6fed;
+        --accent-2: #7a5cd6;
+        --font-display: "Inter", system-ui, sans-serif;
+        --font-mono: "SF Mono", ui-monospace, monospace;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(
+          ellipse at 50% 42%,
+          var(--bg, #fbf9f4) 0%,
+          color-mix(in srgb, var(--bg, #f7f4ee) 92%, var(--fg, #1d1b16)) 100%
+        );
+      }
+
+      .mount-bleed {
+        position: absolute;
+        inset: 0;
+        container-type: size;
+        overflow: hidden;
+      }
+
+      .demo-mark {
+        display: grid;
+        justify-items: center;
+        gap: 18px;
+        color: color-mix(in srgb, var(--accent, #2f6fed) 55%, var(--fg, #1d1b16));
+        font-family: var(--font-display, "Inter", system-ui, sans-serif);
+      }
+
+      .demo-mark-word {
+        font-size: 170px;
+        font-weight: 600;
+        line-height: 1;
+        letter-spacing: 0.04em;
+      }
+
+      .demo-mark-label {
+        font-family: var(--font-mono, ui-monospace, monospace);
+        font-size: 24px;
+        letter-spacing: 0.32em;
+        color: var(--muted, #6d675c);
+      }
+    </style>
+  </head>
+  <body>
+    <template data-slot="ink-bleed-reveal-mark">
+      <div class="demo-mark">
+        <div class="demo-mark-word">INK</div>
+        <div class="demo-mark-label">BLEED REVEAL</div>
+      </div>
+    </template>
+
+    <div
+      id="root"
+      data-composition-id="ink-bleed-reveal-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="ink-bleed-reveal-mount"
+        class="mount-bleed clip"
+        data-composition-id="ink-bleed-reveal"
+        data-composition-src="./ink-bleed-reveal.html"
+        data-variable-values='{"blobs":6,"accent":"blue"}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="1920"
+        data-height="1080"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["ink-bleed-reveal-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "ink-bleed-reveal.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/ink-bleed-reveal/ink-bleed-reveal.html b/docs/public/catalog/components/ink-bleed-reveal/ink-bleed-reveal.html
new file mode 100644
index 0000000000..65d68627af
--- /dev/null
+++ b/docs/public/catalog/components/ink-bleed-reveal/ink-bleed-reveal.html
@@ -0,0 +1,447 @@
+<!doctype html>
+<!--
+  ink-bleed-reveal: HyperFrames video primitive (texture / reveals). Wave M7.
+
+  Liquid ink blooms through paper to reveal a mark. Several ink blobs bleed
+  outward from the center and merge like liquid under the gooey chain
+  (Gaussian blur + a hard alpha threshold: the blur softens the silhouettes
+  together, the threshold snaps the merged alpha back to a crisp liquid
+  edge), then the puddle contracts and dies as the crisp mark resolves
+  beneath it. The chain is the classic SVG feGaussianBlur + feColorMatrix
+  recipe, but computed in a canvas work buffer each repaint: Chrome's live
+  filter raster patches damaged tiles with seek-history-dependent seam
+  antialiasing, while a cleared, fully redrawn canvas is a pure function of
+  (table, time) and lands byte-identical frames. A seeded, static
+  paper-grain overlay (feTurbulence, fixed seed, never animated) rides the
+  whole piece.
+
+  The mark is a SLOT. Callers supply content by placing an inert template
+  anywhere in the HOST page (templates never render, and the runtime wipes
+  the host clip's own children on mount, so the slot lives at document level):
+
+    <template data-slot="ink-bleed-reveal-mark"> ... </template>
+
+  With no slot, the primitive renders a token monogram: one display glyph in
+  ink, drawn entirely from contract tokens. Light paper is the home register,
+  but every color rides a token so themes restate it.
+
+  Variables (declared in data-composition-variables below):
+    - blobs (number 4-6, default 5): how many ink blobs bleed and merge.
+    - accent ("green" | "blue" | "violet", default "green"): ink tint; green
+      rides --brand, blue rides --accent, violet rides --accent-2. The ink
+      body is the accent mixed toward --fg so it reads as pigment, not paint.
+    - exit ("none" | "fade" | "up", default "none"): frame roots own
+      transitions; the default holds the revealed mark to the last pixel.
+
+  Envelope, fixed IN and OUT with elastic HOLD only (never timeScale):
+    IN_BASE  = 2.80s  ink blooms, merges, contracts; mark resolves crisp
+    HOLD     = max(0, D - IN - OUT); truly still (grain is static by
+               construction: painted by a fixed-seed feTurbulence, never
+               animated, so held frames are byte-identical)
+    OUT_BASE = 0.45s  only when exit != none
+    If D < IN_BASE + OUT_BASE, IN and OUT compress together.
+
+  Determinism (closed-form field law): there is NO physics state. One
+  per-blob parameter table is computed exactly once during synchronous
+  timeline construction from fixed LCG seed 0x1b1eedca; every painted frame
+  positions each blob as a pure function of (table row, timeline time) inside
+  the anchor tween's onUpdate. Zero per-blob tweens. No Math.random, no wall
+  clock, no requestAnimationFrame. Eventful seeks (suppressEvents=false, the
+  engine's render path) land identical frames in any order and either
+  direction; by the end of IN every blob's scale is exactly zero and the goo
+  layer's opacity is zero, so the HOLD is the crisp mark on still paper.
+
+  Mount contract: the runtime clones only this template. #root fills the
+  host box (no data-width/data-height, container-type: size, cqmin units),
+  is styled via #root only, and registers one paused timeline under the
+  LITERAL "ink-bleed-reveal" key. All DOM state is set with explicit
+  endpoints (gsap.set + fromTo) so any seek order lands identical frames.
+-->
+<html
+  lang="en"
+  data-composition-id="ink-bleed-reveal"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "blobs", "type": "number", "role": "style", "label": "Blobs", "description": "How many ink blobs bleed and merge (4 to 6).", "default": 5, "min": 4, "max": 6, "step": 1 },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Ink tint: green rides --brand, blue rides --accent, violet rides --accent-2.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the revealed mark holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Ink Bleed Reveal</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="ink-bleed-reveal" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #1d1b16);
+            font-family: var(--font-display, "Inter", system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .ibr-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .ibr-stage {
+            position: absolute;
+            inset: 0;
+            will-change: transform, opacity;
+          }
+
+          /* The gooey layer is a canvas: blur + alpha threshold are computed
+             in-buffer each repaint (ctx.filter blur, then the colormatrix
+             threshold applied to the readback). Chrome's live SVG/CSS filter
+             raster patches damaged tiles with seek-history-dependent seam
+             antialiasing, which breaks byte-identical frames; a cleared and
+             fully redrawn canvas is a pure function of (table, time). */
+          .ibr-canvas {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+          }
+
+          .ibr-mark {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            will-change: transform, opacity;
+          }
+
+          .ibr-monogram {
+            display: grid;
+            place-items: center;
+            width: 44cqmin;
+            height: 44cqmin;
+            border: 0.5cqmin solid color-mix(in srgb, var(--ibr-accent) 58%, var(--fg, #1d1b16));
+            border-radius: 50%;
+          }
+
+          .ibr-monogram-glyph {
+            color: color-mix(in srgb, var(--ibr-accent) 55%, var(--fg, #1d1b16));
+            font-size: 22cqmin;
+            font-weight: 600;
+            line-height: 1;
+            letter-spacing: 0.02em;
+          }
+
+          /* Seeded static paper grain: feTurbulence with a FIXED seed paints
+             this layer once per raster; nothing about it is animated, so it
+             adds tooth without touching determinism. */
+          .ibr-grain {
+            position: absolute;
+            inset: 0;
+            filter: url(#ibr-grain-filter);
+            opacity: 0.5;
+            mix-blend-mode: multiply;
+          }
+        </style>
+
+        <div
+          id="ink-bleed-reveal-clip"
+          class="ibr-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <svg aria-hidden="true" width="0" height="0" style="position: absolute">
+            <defs>
+              <filter
+                id="ibr-grain-filter"
+                x="0%"
+                y="0%"
+                width="100%"
+                height="100%"
+                color-interpolation-filters="sRGB"
+              >
+                <feTurbulence
+                  type="fractalNoise"
+                  baseFrequency="0.82"
+                  numOctaves="2"
+                  seed="11"
+                  stitchTiles="stitch"
+                  result="noise"
+                />
+                <feColorMatrix
+                  in="noise"
+                  type="matrix"
+                  values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0.14 0.14 0.14 0 0"
+                />
+              </filter>
+            </defs>
+          </svg>
+          <div class="ibr-stage">
+            <div class="ibr-mark">
+              <div class="ibr-monogram">
+                <span class="ibr-monogram-glyph" aria-hidden="true">H</span>
+              </div>
+            </div>
+            <canvas class="ibr-canvas" aria-hidden="true"></canvas>
+            <div class="ibr-grain"></div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".ibr-stage");
+            var canvas = root.querySelector(".ibr-canvas");
+            var mark = root.querySelector(".ibr-mark");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var blobCount = Math.round(Number(vars.blobs));
+            if (!Number.isFinite(blobCount)) blobCount = 5;
+            blobCount = Math.min(6, Math.max(4, blobCount));
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #14a35e)",
+              blue: "var(--accent, #2f6fed)",
+              violet: "var(--accent-2, #7a5cd6)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            root.style.setProperty("--ibr-accent", accentColors[accent]);
+
+            // SLOT. Caller templates live at HOST DOCUMENT level (the mount
+            // wipes host-clip children, and templates never render). The
+            // scoped document proxy filters queries to this composition's
+            // subtree, so the lookup deliberately goes through ownerDocument.
+            var hostDoc = root.ownerDocument;
+            var slotTemplate = null;
+            try {
+              slotTemplate = hostDoc.querySelector('template[data-slot="ink-bleed-reveal-mark"]');
+            } catch (error) {
+              slotTemplate = null;
+            }
+            if (slotTemplate) {
+              mark.querySelector(".ibr-monogram").remove();
+              mark.appendChild(hostDoc.importNode(slotTemplate.content, true));
+            }
+
+            // Envelope: fixed IN/OUT, elastic HOLD, never time-scaled.
+            var IN_BASE = 2.8;
+            var OUT_BASE = exit === "none" ? 0 : 0.45;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var totalBase = Math.max(0.001, IN_BASE + OUT_BASE);
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var OUT_START = IN + HOLD;
+
+            // Geometry basis is fixed once at mount from the host box, like
+            // the particle-image-reveal canvas raster: the same host always
+            // yields the same pixel coordinates and blur radius. The display
+            // canvas rides the host raster; the goo itself is computed in a
+            // low-resolution work buffer (the blur radius dwarfs the lost
+            // detail, and the upscale softens the ink edge pleasantly).
+            var dpr = Math.min(2, Math.max(1, Number(window.devicePixelRatio) || 1));
+            var box = root.getBoundingClientRect();
+            var cssW = Math.max(1, Math.round(box.width) || 640);
+            var cssH = Math.max(1, Math.round(box.height) || 360);
+            var minDim = Math.min(cssW, cssH);
+            var cx = cssW / 2;
+            var cy = cssH / 2;
+            canvas.width = Math.round(cssW * dpr);
+            canvas.height = Math.round(cssH * dpr);
+            var ctx = canvas.getContext("2d");
+            var LOW = 3;
+            var work = hostDoc.createElement("canvas");
+            work.width = Math.max(1, Math.ceil(cssW / LOW));
+            work.height = Math.max(1, Math.ceil(cssH / LOW));
+            var workCtx = work.getContext("2d", { willReadFrequently: true });
+
+            // Gooey ratio: the blur radius vs. threshold slope is what makes
+            // this read as liquid instead of blur. Same math as the classic
+            // SVG chain (feGaussianBlur stdDeviation, then feColorMatrix
+            // alpha row 22 / -9), computed in-buffer for byte-stable seeks.
+            var blurLow = Math.max(2, (minDim * 0.028) / LOW);
+
+            // Resolve the ink color to a concrete value once at mount so
+            // canvas fills never depend on style recalc during seeks.
+            var probe = hostDoc.createElement("span");
+            probe.style.color =
+              "color-mix(in srgb, " + accentColors[accent] + " 62%, var(--fg, #1d1b16))";
+            root.appendChild(probe);
+            var inkColor = getComputedStyle(probe).color || "#1d1b16";
+            probe.remove();
+
+            // The LCG and every per-blob decision live here. This IIFE runs
+            // once before timeline construction; afterwards only the table is
+            // read. Blob state at any time is a pure closed-form function of
+            // (table row, timeline time). No velocities, no integration.
+            var blobRows = (function () {
+              var state = 0x1b1eedca;
+              function next() {
+                state = (Math.imul(1664525, state) + 1013904223) >>> 0;
+                return state / 4294967296;
+              }
+              var rows = [];
+              for (var i = 0; i < blobCount; i += 1) {
+                var angle = (i / blobCount) * Math.PI * 2 + next() * 0.9;
+                rows.push({
+                  dirX: Math.cos(angle),
+                  dirY: Math.sin(angle),
+                  // How far this blob bleeds outward from the drop point.
+                  spread: (0.16 + 0.16 * next()) * minDim,
+                  // Base diameter; the first blob is the fat mother drop.
+                  size: (i === 0 ? 0.34 : 0.14 + 0.12 * next()) * minDim,
+                  // Bloom stagger and death schedule, fractions of IN.
+                  birth: i === 0 ? 0 : 0.04 + 0.3 * next(),
+                  die: 0.5 + 0.16 * next(),
+                  // Wobble makes the bleed organic; amplitude rides (1 - die)
+                  // so it is exactly zero once the blob is gone.
+                  wobbleAmp: (0.02 + 0.03 * next()) * minDim,
+                  wobblePhase: next() * Math.PI * 2,
+                  wobbleFreq: 2 + Math.floor(next() * 3),
+                });
+              }
+              return rows;
+            })();
+
+            function clamp01(v) {
+              return v < 0 ? 0 : v > 1 ? 1 : v;
+            }
+            function easeOutCubic(v) {
+              return 1 - Math.pow(1 - v, 3);
+            }
+            function easeInOut(v) {
+              return v < 0.5 ? 2 * v * v : 1 - Math.pow(-2 * v + 2, 2) / 2;
+            }
+
+            // Pure repaint: clear the work buffer, draw every blob from its
+            // closed-form (row, p) state, blur, threshold the readback, then
+            // blit up to the display canvas. Every step is a pure function
+            // of (table, timeline time); no history survives a frame.
+            function paint(timeSeconds) {
+              var p = IN > 0 ? clamp01(timeSeconds / IN) : 1;
+              ctx.clearRect(0, 0, canvas.width, canvas.height);
+              // The layer fades over the mark as the last blobs die,
+              // guaranteeing an exactly-empty canvas through the HOLD.
+              var layerAlpha = 1 - clamp01((p - 0.86) / 0.12);
+              if (layerAlpha === 0) return;
+              workCtx.filter = "none";
+              workCtx.clearRect(0, 0, work.width, work.height);
+              workCtx.filter = "blur(" + blurLow + "px)";
+              workCtx.fillStyle = inkColor;
+              var drew = false;
+              for (var i = 0; i < blobRows.length; i += 1) {
+                var row = blobRows[i];
+                // Bloom: the blob surfaces and bleeds outward.
+                var grow = easeOutCubic(clamp01((p - row.birth) / 0.34));
+                // Settle: the ink pulls back to the drop point and dies.
+                // Every die ramp completes by p = 0.97 exactly.
+                var die = easeInOut(clamp01((p - row.die) / (0.97 - row.die)));
+                var r = (row.size / 2) * grow * (1 - die);
+                if (r <= 0.01) continue;
+                var reach = row.spread * grow * (1 - die);
+                var wob =
+                  Math.sin(p * Math.PI * 2 * row.wobbleFreq + row.wobblePhase) *
+                  row.wobbleAmp *
+                  grow *
+                  (1 - die);
+                var x = cx + row.dirX * reach + wob * row.dirY;
+                var y = cy + row.dirY * reach - wob * row.dirX;
+                workCtx.beginPath();
+                workCtx.arc(x / LOW, y / LOW, r / LOW, 0, Math.PI * 2);
+                workCtx.fill();
+                drew = true;
+              }
+              workCtx.filter = "none";
+              if (!drew) return;
+              // The colormatrix threshold (alpha row 22 / -9) applied to the
+              // blurred buffer: this snap is what turns overlap into goo.
+              var image = workCtx.getImageData(0, 0, work.width, work.height);
+              var data = image.data;
+              for (var j = 3; j < data.length; j += 4) {
+                var a = (data[j] / 255) * 22 - 9;
+                data[j] = a <= 0 ? 0 : a >= 1 ? 255 : Math.round(a * 255);
+              }
+              workCtx.putImageData(image, 0, 0);
+              ctx.globalAlpha = layerAlpha;
+              ctx.drawImage(work, 0, 0, canvas.width, canvas.height);
+              ctx.globalAlpha = 1;
+            }
+
+            gsap.set(stage, { opacity: 1, y: "0cqh" });
+            gsap.set(mark, { opacity: 0, scale: 0.94, transformOrigin: "50% 50%" });
+
+            var tl = gsap.timeline({
+              paused: true,
+              onUpdate: function () {
+                paint(tl.time());
+              },
+            });
+
+            // Anchor tween: an inert plain-object tween spanning the full
+            // authored duration so tl.time() covers [0, D] and onUpdate
+            // (the blob painter) fires for every eventful seek anywhere in
+            // the piece, including the hold.
+            tl.to({ p: 0 }, { p: 1, duration: duration, ease: "none" }, 0);
+
+            // IN: the crisp mark resolves beneath the contracting puddle.
+            // Both endpoints authored; the ink supplies the drama, the mark
+            // lands with one restrained settle.
+            tl.fromTo(
+              mark,
+              { opacity: 0 },
+              { opacity: 1, duration: IN * 0.34, ease: "power2.out" },
+              IN * 0.52,
+            );
+            tl.fromTo(
+              mark,
+              { scale: 0.94 },
+              { scale: 1, duration: IN * 0.4, ease: "power2.out" },
+              IN * 0.52,
+            );
+
+            // HOLD: truly still. The goo canvas is one clear rect (every
+            // blob dead, layer alpha zero) and the grain is a static seeded
+            // raster.
+
+            // OUT: optional departure; exit none holds until the frame cuts.
+            if (exit === "up") {
+              tl.to(stage, { y: "-4cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "fade") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            }
+
+            tl.seek(0);
+            paint(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["ink-bleed-reveal"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/inline-highlight/demo.html b/docs/public/catalog/components/inline-highlight/demo.html
new file mode 100644
index 0000000000..41cb51dc3a
--- /dev/null
+++ b/docs/public/catalog/components/inline-highlight/demo.html
@@ -0,0 +1,83 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Inline Highlight - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f5f5f4;
+        color: #18181b;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .copy {
+        width: 1200px;
+        font-size: 88px;
+        line-height: 1.14;
+        font-weight: 800;
+        letter-spacing: -0.025em;
+        text-align: left;
+      }
+      .hf-inline-highlight {
+        --hf-highlight-scale: 0;
+        --hf-highlight-color: #facc15;
+        position: relative;
+        display: inline;
+        isolation: isolate;
+      }
+      .hf-inline-highlight::after {
+        content: "";
+        position: absolute;
+        left: -0.05em;
+        right: -0.05em;
+        bottom: 0.06em;
+        height: 0.35em;
+        background: var(--hf-highlight-color);
+        border-radius: 3px;
+        transform: scaleX(var(--hf-highlight-scale));
+        transform-origin: left center;
+        z-index: -1;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="inline-highlight-demo"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+    >
+      <div class="copy">
+        Turn the important words into
+        <span class="hf-inline-highlight">animated emphasis</span> without rebuilding the scene.
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        tl.from(".copy", { opacity: 0, y: 24, duration: 0.55, ease: "power3.out" }, 0.3);
+        tl.to(
+          ".hf-inline-highlight",
+          { "--hf-highlight-scale": 1, duration: 0.6, ease: "power2.out" },
+          0.95,
+        );
+        window.__timelines = window.__timelines || {};
+        window.__timelines["inline-highlight-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/inline-highlight/inline-highlight.html b/docs/public/catalog/components/inline-highlight/inline-highlight.html
new file mode 100644
index 0000000000..0bc7fe9957
--- /dev/null
+++ b/docs/public/catalog/components/inline-highlight/inline-highlight.html
@@ -0,0 +1,92 @@
+<!--
+  Inline Highlight - animated marker underline/fill.
+
+  Wrap target text with class="hf-inline-highlight". Animate
+  --hf-highlight-scale from 0 to 1 on the element.
+
+  Variables. The script reads each one, falls back to the declared default on anything
+  missing or unrecognised, and writes the result onto the document root, so highlights
+  authored anywhere in the composition pick it up no matter when they are parsed. The
+  timeline recipe below is untouched by them.
+
+    - tint (yellow | green | blue | violet, default yellow): marker colour. yellow is the
+      highlighter default, the other three ride --brand, --accent and --accent-2.
+    - thickness (thin | standard | thick, default standard): height of the band behind the
+      text, 0.22em, 0.38em or 0.62em.
+    - origin (left | right | center, default left): edge the marker grows out of while
+      --hf-highlight-scale runs from 0 to 1.
+
+  Setting --hf-highlight-color, --hf-highlight-height or --hf-highlight-origin on an
+  individual highlight still wins over the variable, so one-off overrides keep working.
+-->
+
+<style
+  data-composition-variables='[
+    { "id": "tint", "type": "enum", "role": "style", "label": "Tint", "description": "Marker colour. Green, blue and violet ride --brand, --accent and --accent-2.", "default": "yellow", "options": [{ "value": "yellow", "label": "Yellow" }, { "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "thickness", "type": "enum", "role": "style", "label": "Thickness", "description": "Height of the marker band behind the text, as a share of the font size.", "default": "standard", "options": [{ "value": "thin", "label": "Thin" }, { "value": "standard", "label": "Standard" }, { "value": "thick", "label": "Thick" }] },
+    { "id": "origin", "type": "enum", "role": "motion", "label": "Origin", "description": "Edge the marker grows out of as the scale variable runs from 0 to 1.", "default": "left", "options": [{ "value": "left", "label": "Left" }, { "value": "right", "label": "Right" }, { "value": "center", "label": "Center" }] }
+  ]'
+>
+  .hf-inline-highlight {
+    --hf-highlight-scale: 0;
+    position: relative;
+    display: inline;
+    z-index: 0;
+  }
+  .hf-inline-highlight::after {
+    content: "";
+    position: absolute;
+    left: -0.08em;
+    right: -0.08em;
+    bottom: 0.05em;
+    height: var(--hf-highlight-height, 0.38em);
+    background: var(--hf-highlight-color, #fff06a);
+    transform: scaleX(var(--hf-highlight-scale));
+    transform-origin: var(--hf-highlight-origin, left center);
+    z-index: -1;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var tints = {
+      yellow: "#fff06a",
+      green: "var(--brand, #34d399)",
+      blue: "var(--accent, #38bdf8)",
+      violet: "var(--accent-2, #a78bfa)",
+    };
+    var heights = { thin: "0.22em", standard: "0.38em", thick: "0.62em" };
+    var origins = { left: "left center", right: "right center", center: "center" };
+
+    var root = document.documentElement;
+    root.style.setProperty("--hf-highlight-color", tints[pick(tints, vars.tint, "yellow")]);
+    root.style.setProperty(
+      "--hf-highlight-height",
+      heights[pick(heights, vars.thickness, "standard")],
+    );
+    root.style.setProperty("--hf-highlight-origin", origins[pick(origins, vars.origin, "left")]);
+  })();
+</script>
+
+<!--
+  Timeline integration:
+
+  tl.to(".hf-inline-highlight", {
+    "--hf-highlight-scale": 1,
+    duration: 0.55,
+    ease: "power2.out",
+    stagger: 0.12,
+  }, startTime);
+-->
diff --git a/docs/public/catalog/components/input-feedback/__hf-variables-preview.html b/docs/public/catalog/components/input-feedback/__hf-variables-preview.html
new file mode 100644
index 0000000000..387ec52305
--- /dev/null
+++ b/docs/public/catalog/components/input-feedback/__hf-variables-preview.html
@@ -0,0 +1,86 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Input Feedback variables preview</title>
+    <style>
+      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #f8fafc; }
+      #hf-vars-root { position: relative; width: 1920px; height: 1080px; }
+      #hf-vars-mount { position: absolute; inset: 0; display: grid; place-items: center; }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  </head>
+  <body>
+    <div id="hf-vars-root" data-composition-id="input-feedback-variables-preview" data-start="0" data-width="1920" data-height="1080" data-duration="5" data-fps="30">
+      <div id="hf-vars-mount" class="clip" data-composition-id="input-feedback" data-composition-src="./input-feedback.html" data-start="0" data-duration="5" data-track-index="0" data-width="1920" data-height="1080"></div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["input-feedback-variables-preview"] = gsap.timeline({ paused: true });
+    </script>
+    <script>
+      (function () {
+        var mount = document.getElementById("hf-vars-mount");
+        // The mount is filled asynchronously, and the demo script selects
+        // what it fills it with, so it cannot run before then.
+        var observer = new MutationObserver(build);
+        observer.observe(mount, { childList: true, subtree: true });
+        build();
+        function build() {
+          if (!mount.firstElementChild) return;
+          observer.disconnect();
+
+        const tl = gsap.timeline({ paused: true });
+        tl.fromTo(
+          ".hf-transition-input-feedback",
+          { y: 22, opacity: 0 },
+          { y: 0, opacity: 1, duration: 0.34, ease: "power2.out" },
+          0.3,
+        );
+        tl.to(
+          ".hf-transition-input-shell",
+          { x: -12, duration: 0.06, repeat: 5, yoyo: true, ease: "none" },
+          0.72,
+        );
+        tl.fromTo(
+          ".hf-transition-input-check",
+          { scale: 0, opacity: 0 },
+          { scale: 1, opacity: 1, duration: 0.28, ease: "back.out(2)" },
+          1.18,
+        );
+        tl.fromTo(
+          ".hf-transition-input-hint",
+          { opacity: 0, y: -6 },
+          { opacity: 1, y: 0, duration: 0.22, ease: "power2.out" },
+          1.28,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["input-feedback-demo"] = tl;
+          var child = window.__timelines["input-feedback-demo"];
+          delete window.__timelines["input-feedback-demo"];
+          if (!child || typeof child.paused !== "function") return;
+          child.paused(false);
+          window.__timelines["input-feedback-variables-preview"].add(child, 0);
+        }
+      })();
+    </script>
+<script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "input-feedback.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/input-feedback/demo.html b/docs/public/catalog/components/input-feedback/demo.html
new file mode 100644
index 0000000000..e34f6b1421
--- /dev/null
+++ b/docs/public/catalog/components/input-feedback/demo.html
@@ -0,0 +1,160 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Input Feedback - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f8fafc;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        min-width: 760px;
+        min-height: 480px;
+        padding: 56px;
+        /* ponytail: scale up the static wrapper so the widget fills ~60% of frame; GSAP targets children, not this element */
+        transform: scale(2.8);
+      }
+      .hf-transition-input-feedback {
+        display: grid;
+        gap: 10px;
+        width: 430px;
+        color: #18181b;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-transition-input-feedback label {
+        color: #52525b;
+        font-size: 15px;
+        font-weight: 850;
+      }
+      .hf-transition-input-shell {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        height: 62px;
+        padding: 0 16px;
+        border: 1px solid #d4d4d8;
+        border-radius: 16px;
+        background: #ffffff;
+        box-shadow: 0 18px 50px rgba(0, 0, 0, 0.08);
+      }
+      .hf-transition-input-value {
+        flex: 1;
+        font-size: 20px;
+        font-weight: 760;
+      }
+      .hf-transition-input-clear,
+      .hf-transition-input-check {
+        display: grid;
+        place-items: center;
+        height: 28px;
+        border-radius: 999px;
+        font-size: 12px;
+        font-weight: 900;
+      }
+      .hf-transition-input-clear {
+        width: 28px;
+        border: 0;
+        background: #f4f4f5;
+        color: #71717a;
+      }
+      .hf-transition-input-check {
+        min-width: 38px;
+        padding: 0 8px;
+        background: #dcfce7;
+        color: #166534;
+      }
+      .hf-transition-input-hint {
+        margin: 0;
+        color: #16a34a;
+        font-size: 14px;
+        font-weight: 800;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="input-feedback-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-transition-input-feedback" data-state="valid">
+          <label>Email</label>
+          <div class="hf-transition-input-shell">
+            <span class="hf-transition-input-value">mia@example.com</span>
+            <button class="hf-transition-input-clear" type="button">x</button>
+            <span class="hf-transition-input-check">OK</span>
+          </div>
+          <p class="hf-transition-input-hint">Looks good.</p>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        tl.fromTo(
+          ".hf-transition-input-feedback",
+          { y: 22, opacity: 0 },
+          { y: 0, opacity: 1, duration: 0.34, ease: "power2.out" },
+          0.3,
+        );
+        tl.to(
+          ".hf-transition-input-shell",
+          { x: -12, duration: 0.06, repeat: 5, yoyo: true, ease: "none" },
+          0.72,
+        );
+        tl.fromTo(
+          ".hf-transition-input-check",
+          { scale: 0, opacity: 0 },
+          { scale: 1, opacity: 1, duration: 0.28, ease: "back.out(2)" },
+          1.18,
+        );
+        tl.fromTo(
+          ".hf-transition-input-hint",
+          { opacity: 0, y: -6 },
+          { opacity: 1, y: 0, duration: 0.22, ease: "power2.out" },
+          1.28,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["input-feedback-demo"] = tl;
+      </script>
+    </div>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "input-feedback.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/input-feedback/input-feedback.html b/docs/public/catalog/components/input-feedback/input-feedback.html
new file mode 100644
index 0000000000..5542431ac2
--- /dev/null
+++ b/docs/public/catalog/components/input-feedback/input-feedback.html
@@ -0,0 +1,155 @@
+<!--
+  Input Feedback - transitions.dev-inspired primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Use the timeline
+  integration note at the bottom as the starting point for deterministic GSAP
+  animation.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the text or state attribute the
+  CSS below already keys off. The timeline recipe at the bottom is untouched
+  by them: it keeps shaking the same shell and popping the same chip.
+
+    - status (valid | error, default valid): whether the field reads as
+      accepted or rejected. valid is the green border, chip and hint; error
+      turns all three red and swaps the chip glyph to an exclamation mark.
+      Pair it with a matching hint.
+    - value (string, default "mia@example.com"): the text held by the field.
+      A blank or non-text override keeps the default.
+    - hint (string, default "Looks good."): the helper line under the field.
+
+  On every default the result is identical to the original: a green valid
+  field holding mia@example.com over Looks good.
+-->
+
+<div
+  class="hf-transition-input-feedback"
+  data-state="valid"
+  data-composition-variables='[
+    { "id": "status", "type": "enum", "role": "style", "label": "Status", "description": "Whether the field reads as accepted or rejected, colouring the border, chip and hint.", "default": "valid", "options": [{ "value": "valid", "label": "Valid" }, { "value": "error", "label": "Error" }] },
+    { "id": "value", "type": "string", "role": "content", "label": "Value", "description": "Text held by the field.", "default": "mia@example.com" },
+    { "id": "hint", "type": "string", "role": "content", "label": "Hint", "description": "Helper line under the field.", "default": "Looks good." }
+  ]'
+>
+  <label>Email</label>
+  <div class="hf-transition-input-shell">
+    <span class="hf-transition-input-value">mia@example.com</span>
+    <button class="hf-transition-input-clear" type="button">x</button>
+    <span class="hf-transition-input-check">OK</span>
+  </div>
+  <p class="hf-transition-input-hint">Looks good.</p>
+</div>
+
+<style>
+  .hf-transition-input-feedback {
+    --hf-fb-border: #d4d4d8;
+    --hf-fb-chip-bg: #dcfce7;
+    --hf-fb-chip-fg: #166534;
+    --hf-fb-hint: #16a34a;
+    display: grid;
+    gap: 10px;
+    width: 430px;
+    color: #18181b;
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-transition-input-feedback label {
+    color: #52525b;
+    font-size: 15px;
+    font-weight: 850;
+  }
+  .hf-transition-input-shell {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    height: 62px;
+    padding: 0 16px;
+    border: 1px solid var(--hf-fb-border);
+    border-radius: 16px;
+    background: #ffffff;
+    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.08);
+  }
+  .hf-transition-input-value {
+    flex: 1;
+    font-size: 20px;
+    font-weight: 760;
+  }
+  .hf-transition-input-clear,
+  .hf-transition-input-check {
+    display: grid;
+    place-items: center;
+    height: 28px;
+    border-radius: 999px;
+    font-size: 12px;
+    font-weight: 900;
+  }
+  .hf-transition-input-clear {
+    width: 28px;
+    border: 0;
+    background: #f4f4f5;
+    color: #71717a;
+  }
+  .hf-transition-input-check {
+    min-width: 38px;
+    padding: 0 8px;
+    background: var(--hf-fb-chip-bg);
+    color: var(--hf-fb-chip-fg);
+  }
+  .hf-transition-input-hint {
+    margin: 0;
+    color: var(--hf-fb-hint);
+    font-size: 14px;
+    font-weight: 800;
+  }
+  .hf-transition-input-feedback[data-state="error"] {
+    --hf-fb-border: #fca5a5;
+    --hf-fb-chip-bg: #fee2e2;
+    --hf-fb-chip-fg: #991b1b;
+    --hf-fb-hint: #dc2626;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    function text(value, fallback) {
+      return typeof value === "string" && value.trim() !== "" ? value : fallback;
+    }
+
+    var statuses = { valid: "OK", error: "!" };
+
+    var status = pick(statuses, vars.status, "valid");
+    var value = text(vars.value, "mia@example.com");
+    var hint = text(vars.hint, "Looks good.");
+
+    var roots = document.querySelectorAll(".hf-transition-input-feedback");
+    for (var i = 0; i < roots.length; i += 1) {
+      var root = roots[i];
+      root.setAttribute("data-state", status);
+      var valueEl = root.querySelector(".hf-transition-input-value");
+      if (valueEl) valueEl.textContent = value;
+      var hintEl = root.querySelector(".hf-transition-input-hint");
+      if (hintEl) hintEl.textContent = hint;
+      var chip = root.querySelector(".hf-transition-input-check");
+      if (chip) chip.textContent = statuses[status];
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-transition-input-feedback', { y: 22, opacity: 0 }, { y: 0, opacity: 1, duration: 0.34, ease: 'power2.out' }, 0.3);
+  tl.to('.hf-transition-input-shell', { x: -12, duration: 0.06, repeat: 5, yoyo: true, ease: 'none' }, 0.72);
+  tl.fromTo('.hf-transition-input-check', { scale: 0, opacity: 0 }, { scale: 1, opacity: 1, duration: 0.28, ease: 'back.out(2)' }, 1.18);
+  tl.fromTo('.hf-transition-input-hint', { opacity: 0, y: -6 }, { opacity: 1, y: 0, duration: 0.22, ease: 'power2.out' }, 1.28);
+-->
diff --git a/docs/public/catalog/components/iris-reveal/README.md b/docs/public/catalog/components/iris-reveal/README.md
new file mode 100644
index 0000000000..5049f44f7e
--- /dev/null
+++ b/docs/public/catalog/components/iris-reveal/README.md
@@ -0,0 +1,102 @@
+# iris-reveal
+
+A circle clip-path opens from an authored origin (`iris_x`/`iris_y` percent)
+revealing state B over state A in one confident pass, then holds still on B.
+The classic register dims and desaturates the before state so the after state
+lands in full color; `register: plain` leaves both states untouched. A thin
+accent rim rides the exact iris edge while the pass runs and dissolves just
+before the circle clears the frame corners. Clip-path only, seek-safe in both
+directions.
+
+## Files
+
+- `iris-reveal.html`: the mountable sub-composition (install target:
+  `compositions/components/iris-reveal.html`).
+- `registry-item.json`: registry metadata and the variables block.
+- `demo.html`: a 1920x1080 host that mounts the primitive with non-default
+  variables (QA gallery input).
+
+## Variables
+
+| id         | type   | default | notes                                                                     |
+| ---------- | ------ | ------- | ------------------------------------------------------------------------- |
+| `iris_x`   | number | `50`    | iris origin, percent of frame width (0 to 100)                            |
+| `iris_y`   | number | `50`    | iris origin, percent of frame height (0 to 100)                           |
+| `open_at`  | number | `0.35`  | seconds after mount start when the iris begins opening (0 to 8)           |
+| `register` | enum   | `color` | `color` dims and desaturates state A; `plain` leaves both states alone    |
+| `accent`   | enum   | `green` | `green` maps to `--brand`, `blue` to `--accent`, `violet` to `--accent-2` |
+| `exit`     | enum   | `none`  | `none` holds the final frame; `fade` and `up` release the stage           |
+
+Envelope: IN = `open_at` + 1.10s iris pass, OUT = 0.5s only when `exit` is
+`fade` or `up`, HOLD is the sole elastic phase. The `iris-open` sync point
+(`hf:sfx` id `iris-land-soft`) fires when the iris clears the frame, 1.45s at
+defaults.
+
+## The slot mechanism
+
+The primitive ships two named slot panels inside its `<template>` (the
+before-after-wipe convention):
+
+```html
+<div class="ir-slot" data-slot="before">...</div>
+<div class="ir-slot" data-slot="after">...</div>
+```
+
+Each slot's default children are a token-styled wireframe card (muted on the
+before layer, brand-tinted on the after layer), so an untouched mount still
+reads as a tasteful reveal. To show your own content, install the component
+and **replace the children of each `[data-slot]` element in your installed
+copy** (the runtime clones only the primitive's own template on mount, so slot
+content lives in the component file, not on the host clip).
+
+Rules:
+
+- Both slots are full-bleed and share one coordinate space; align the two
+  states so the iris reads as one surface changing, not two images stacked.
+- Direct `img`/`video` children are automatically sized to cover the panel
+  (`object-fit: cover`). Arbitrary HTML works too; size it in `cqw`/`cqh`.
+- With `register: color` the grayscale/dim treatment applies to whatever you
+  put in the before slot; switch to `plain` if your before content must stay
+  full color.
+- Keep the rim SVG alone; it renders above slot content and is owned by the
+  timeline.
+
+## Worked example
+
+Install, then fill the slots with two screenshots:
+
+```bash
+npx hyperframes add iris-reveal
+```
+
+In `compositions/components/iris-reveal.html`, replace each slot's default
+block:
+
+```html
+<div class="ir-slot" data-slot="before">
+  <img src="../../assets/scene-night.png" alt="" />
+</div>
+...
+<div class="ir-slot" data-slot="after">
+  <img src="../../assets/scene-day.png" alt="" />
+</div>
+```
+
+Mount it from a host composition like any sub-composition:
+
+```html
+<div
+  class="clip"
+  data-composition-id="iris-reveal"
+  data-composition-src="./components/iris-reveal.html"
+  data-variable-values='{"iris_x":30,"iris_y":40,"open_at":0.6,"accent":"blue"}'
+  data-start="2"
+  data-duration="3.5"
+  data-track-index="0"
+></div>
+```
+
+The iris opens 0.6s after the clip mounts from a point in the upper-left
+third, clears the frame 1.1s later, and the revealed state holds for the rest
+of the clip window (`exit` defaults to `none`; frame roots own scene
+transitions).
diff --git a/docs/public/catalog/components/iris-reveal/demo.html b/docs/public/catalog/components/iris-reveal/demo.html
new file mode 100644
index 0000000000..a588346382
--- /dev/null
+++ b/docs/public/catalog/components/iris-reveal/demo.html
@@ -0,0 +1,106 @@
+<!doctype html>
+<!--
+  iris-reveal demo. Full-bleed mount on a dark token stage: the iris opens
+  from the upper-left third of the 1920x1080 frame with the blue accent rim,
+  proving the reveal works as a full-frame transition with an off-center
+  origin and the classic grayscale-to-color register.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>iris-reveal Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #05070d);
+      }
+
+      #root {
+        --bg: #080b14;
+        --fg: #f8fafc;
+        --muted: #94a3b8;
+        --surface: #182033;
+        --border: #3b4863;
+        --brand: #22c55e;
+        --accent: #38bdf8;
+        --accent-2: #c5a3ff;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-body: Inter, system-ui, sans-serif;
+        --radius: 22px;
+        --space-1: 8px;
+        --space-2: 16px;
+        --space-3: 32px;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 42%, #10182b 0%, var(--bg, #080b14) 72%);
+      }
+
+      .mount-stage {
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        container-type: size;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="iris-reveal-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="3.5"
+      data-fps="30"
+    >
+      <div
+        id="iris-reveal-mount"
+        class="mount-stage clip"
+        data-composition-id="iris-reveal"
+        data-composition-src="./iris-reveal.html"
+        data-variable-values='{"iris_x":32,"iris_y":40,"open_at":0.6,"accent":"blue"}'
+        data-start="0"
+        data-duration="3.5"
+        data-track-index="0"
+        data-width="1920"
+        data-height="1080"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["iris-reveal-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "iris-reveal.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/iris-reveal/iris-reveal.html b/docs/public/catalog/components/iris-reveal/iris-reveal.html
new file mode 100644
index 0000000000..d2e06c6706
--- /dev/null
+++ b/docs/public/catalog/components/iris-reveal/iris-reveal.html
@@ -0,0 +1,478 @@
+<!doctype html>
+<!--
+  iris-reveal: HyperFrames video primitive (transitions / bridge)
+
+  Concept: a circle clip-path opens from an authored origin (iris_x/iris_y
+  percent) revealing state B over state A. Classic register: A grayscale and
+  dimmed, B full color. One confident pass, then a still hold on B. Two
+  full-bleed content slots (the before-after-wipe convention) with
+  token-styled defaults; callers supply the two states, the primitive
+  supplies the iris.
+
+  Wave K, unit K2. Clip-path only (no dashes, no masks); both endpoints of
+  the opening tween are authored (fromTo via a seeded proxy), so seeks are
+  deterministic in both directions.
+
+  Slots (see README.md for a worked example):
+    - [data-slot="before"]: state A, the base layer. Replace the children of
+      this element in your installed copy. Default: a muted token wireframe.
+    - [data-slot="after"]:  state B, revealed by the iris. Same mechanism.
+      Default: a brand-tinted version of the wireframe.
+    Direct img/video children of a slot are sized to cover the panel.
+
+  Variables (declared in data-composition-variables below):
+    - iris_x (number, default 50, 0 to 100%): iris origin, percent of width.
+    - iris_y (number, default 50, 0 to 100%): iris origin, percent of height.
+    - open_at (number, seconds, default 0.35): when the iris starts opening,
+      relative to mount start. Clamped so the pass completes inside IN.
+    - register (color | plain, default color): color dims and desaturates
+      state A so B lands in full color; plain leaves both states untouched.
+    - accent (green | blue | violet, default green): iris rim ring and the
+      default after art tint. green maps to --brand, blue to --accent,
+      violet to --accent-2.
+    - exit (none | fade | up, default none): outgoing transition. none holds
+      the final frame (frame roots own transitions; holds end films).
+
+  The iris rim is a thin accent circle (SVG stroke, fixed width) that rides
+  the exact same radius proxy as the clip-path, so rim and clip edge are
+  locked on every frame. It fades in as the pass starts and dissolves just
+  before the iris clears the frame corners.
+
+  Envelope (fixed IN/OUT, elastic HOLD only, never gsap.timeScale()):
+    IN       = open_at + 1.10s iris pass (stage settles during the first 0.32s)
+    HOLD     = elastic = max(0, D - (IN + OUT)); deliberately still on B
+    OUT      = 0.50s when exit is fade or up, 0 when exit is none
+    If D < IN + OUT, IN and OUT scale down together so IN + OUT == D.
+
+  Sync point: iris-open land at open_at + 1.10s inside IN (1.45s at
+  defaults). It never moves into elastic HOLD.
+
+  Sound cue: dispatches a bubbling `hf:sfx` CustomEvent with id
+  "iris-land-soft" at iris land. This primitive never plays audio.
+
+  Determinism: the full radius and the iris center are measured in px once
+  at mount (the K-wave law for cq-unit transform traps); the radius proxy is
+  the single owner of clip and rim progress, re-written on every seek via
+  onUpdate. Quiet register by default (L2); no percussive variants.
+
+  Mount contract: MOUNTABLE SUB-COMPOSITION. The runtime clones only
+  <template> contents; #root fills the host box (inset:0, container-type:
+  size), has no data-width/data-height, and registers one paused timeline
+  under the literal "iris-reveal" key (mount flattening strips
+  data-composition-id from the live root). Variables come from
+  window.__hyperframes.getVariables().
+-->
+<html
+  lang="en"
+  data-composition-id="iris-reveal"
+  data-composition-duration="3.5"
+  data-composition-variables='[
+    { "id": "iris_x", "type": "number", "role": "layout", "label": "Iris origin X", "description": "Horizontal iris origin as a percent of the frame width.", "default": 50, "min": 0, "max": 100, "step": 1, "unit": "%" },
+    { "id": "iris_y", "type": "number", "role": "layout", "label": "Iris origin Y", "description": "Vertical iris origin as a percent of the frame height.", "default": 50, "min": 0, "max": 100, "step": 1, "unit": "%" },
+    { "id": "open_at", "type": "number", "role": "timing", "label": "Open start", "description": "Seconds after mount start when the iris begins opening.", "default": 0.35, "min": 0, "max": 8, "step": 0.05, "unit": "s" },
+    { "id": "register", "type": "enum", "role": "style", "label": "Register", "description": "Color dims and desaturates the before state so the after state lands in full color. Plain leaves both untouched.", "default": "color", "options": [{ "value": "color", "label": "Color" }, { "value": "plain", "label": "Plain" }] },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Iris rim ring and default after art tint.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Outgoing transition. None holds the final revealed frame.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Iris Reveal</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="iris-reveal" data-duration="3.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          /* Root fills the host-owned box. Internal measurements use cqw/cqh
+             and every painted color comes from a contract token. */
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            background: var(--bg, #07111f);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+          }
+
+          .ir-clip,
+          .ir-stage,
+          .ir-panel,
+          .ir-slot,
+          .ir-rim {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+          }
+
+          .ir-clip {
+            overflow: hidden;
+          }
+
+          .ir-stage {
+            opacity: 0;
+          }
+
+          .ir-panel {
+            overflow: hidden;
+          }
+
+          /* The after layer is revealed by one circle clip-path. --ir-r (px)
+             is written by the radius proxy, the single owner of iris
+             progress; --ir-cx/--ir-cy are set once at mount. */
+          .ir-after {
+            z-index: 2;
+            clip-path: circle(calc(var(--ir-r, 0) * 1px) at var(--ir-cx, 50%) var(--ir-cy, 50%));
+          }
+
+          /* Classic register: state A reads dimmed and desaturated so state B
+             lands in full color. Static CSS, never tweened. */
+          #root[data-register="color"] .ir-before .ir-slot {
+            filter: grayscale(1) brightness(0.76);
+          }
+
+          /* Caller-supplied media covers its panel edge to edge. */
+          .ir-slot > img,
+          .ir-slot > video {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+          }
+
+          /* The rim ring rides the same radius proxy as the clip edge. Fixed
+             stroke width in px (set at mount), fill none, no dashes. */
+          .ir-rim {
+            z-index: 3;
+            overflow: visible;
+            pointer-events: none;
+          }
+
+          .ir-rim circle {
+            fill: none;
+            stroke: var(--ir-accent, #22c55e);
+          }
+
+          /* Token-styled default slot content: a wireframe card that reads
+             muted on the before layer and brand-tinted on the after layer.
+             Callers replacing slot children never see any of this. */
+          .ir-default {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+          }
+
+          .ir-before .ir-default {
+            background:
+              linear-gradient(
+                  color-mix(in srgb, var(--border, #334155) 34%, transparent) 0.12cqw,
+                  transparent 0.12cqw
+                )
+                0 0 / 5cqw 5cqw,
+              linear-gradient(
+                  90deg,
+                  color-mix(in srgb, var(--border, #334155) 34%, transparent) 0.12cqw,
+                  transparent 0.12cqw
+                )
+                0 0 / 5cqw 5cqw,
+              var(--surface, #172033);
+          }
+
+          .ir-after .ir-default {
+            background: linear-gradient(
+              135deg,
+              color-mix(in srgb, var(--brand, #22c55e) 32%, var(--surface, #172033)) 0%,
+              var(--surface, #172033) 58%,
+              color-mix(in srgb, var(--ir-accent, #22c55e) 22%, var(--surface, #172033)) 100%
+            );
+          }
+
+          .ir-card {
+            width: 56cqw;
+            height: 56cqh;
+            padding: var(--space-3, 4cqh) var(--space-3, 4cqw);
+            border: 0.16cqw solid var(--border, #334155);
+            border-radius: var(--radius, 2.4cqmin);
+            background: color-mix(in srgb, var(--surface, #172033) 88%, var(--bg, #07111f));
+            box-shadow: 0 2cqh 5cqw color-mix(in srgb, var(--bg, #07111f) 45%, transparent);
+          }
+
+          .ir-after .ir-card {
+            border-color: color-mix(in srgb, var(--ir-accent, #22c55e) 52%, var(--border, #334155));
+            background: color-mix(in srgb, var(--surface, #172033) 86%, var(--brand, #22c55e));
+          }
+
+          .ir-bar {
+            width: 34%;
+            height: 4.4cqh;
+            margin-bottom: var(--space-3, 4cqh);
+            border-radius: 1.2cqh;
+            background: var(--muted, #94a3b8);
+            opacity: 0.5;
+          }
+
+          .ir-after .ir-bar {
+            background: var(--ir-accent, #22c55e);
+            opacity: 0.92;
+          }
+
+          .ir-line {
+            height: 2.4cqh;
+            margin-bottom: var(--space-2, 2.6cqh);
+            border-radius: 1.2cqh;
+            background: var(--muted, #94a3b8);
+            opacity: 0.4;
+          }
+
+          .ir-line:nth-of-type(2) {
+            width: 92%;
+          }
+
+          .ir-line:nth-of-type(3) {
+            width: 68%;
+          }
+
+          .ir-line:nth-of-type(4) {
+            width: 44%;
+          }
+
+          .ir-after .ir-line {
+            background: color-mix(in srgb, var(--brand, #22c55e) 70%, var(--fg, #f8fafc));
+            opacity: 0.75;
+          }
+        </style>
+
+        <div
+          id="iris-reveal-clip"
+          class="ir-clip clip"
+          data-start="0"
+          data-duration="3.5"
+          data-track-index="0"
+        >
+          <div class="ir-stage">
+            <section class="ir-panel ir-before" aria-label="Before panel">
+              <div class="ir-slot" data-slot="before">
+                <!-- SLOT "before": replace the children of this element with
+                     your own content (img, video, or HTML). -->
+                <div class="ir-default" aria-hidden="true">
+                  <div class="ir-card">
+                    <div class="ir-bar"></div>
+                    <div class="ir-line"></div>
+                    <div class="ir-line"></div>
+                    <div class="ir-line"></div>
+                  </div>
+                </div>
+              </div>
+            </section>
+
+            <section class="ir-panel ir-after" aria-label="After panel">
+              <div class="ir-slot" data-slot="after">
+                <!-- SLOT "after": replace the children of this element with
+                     your own content (img, video, or HTML). -->
+                <div class="ir-default" aria-hidden="true">
+                  <div class="ir-card">
+                    <div class="ir-bar"></div>
+                    <div class="ir-line"></div>
+                    <div class="ir-line"></div>
+                    <div class="ir-line"></div>
+                  </div>
+                </div>
+              </div>
+            </section>
+
+            <svg class="ir-rim" aria-hidden="true">
+              <circle class="ir-rim-circle" cx="0" cy="0" r="0"></circle>
+            </svg>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            // Literal id: mount flattening strips data-composition-id from the
+            // live root before this timeline registers.
+            var compositionId = "iris-reveal";
+            var stage = root.querySelector(".ir-stage");
+            var after = root.querySelector(".ir-after");
+            var rim = root.querySelector(".ir-rim");
+            var rimCircle = root.querySelector(".ir-rim-circle");
+
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            function clampNumber(raw, fallback, min, max) {
+              var value = raw == null ? fallback : Number(raw);
+              if (!Number.isFinite(value)) return fallback;
+              return Math.max(min, Math.min(max, value));
+            }
+
+            // INVARIANT: iris origin always clamps into the declared 0-100 range.
+            var irisX = clampNumber(vars.iris_x, 50, 0, 100);
+            var irisY = clampNumber(vars.iris_y, 50, 0, 100);
+            var openAt = clampNumber(vars.open_at, 0.35, 0, 8);
+            var register = vars.register === "plain" ? "plain" : "color";
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #22c55e)",
+              blue: "var(--accent, #38bdf8)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            // The bundler mirrors composition variables as scoped CSS custom
+            // props, so this unit's own accent variable can shadow the
+            // contract --accent token inside the subtree ("blue" is a valid
+            // CSS color and would render pure blue). When the shadow is
+            // present, fall back to the literal contract value.
+            var computedAccent = getComputedStyle(root).getPropertyValue("--accent").trim();
+            if (
+              computedAccent === "green" ||
+              computedAccent === "blue" ||
+              computedAccent === "violet"
+            ) {
+              accentColors.blue = "#38bdf8";
+            }
+            // INVARIANT: only none | fade | up reaches the timeline.
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            root.dataset.register = register;
+            root.style.setProperty("--ir-accent", accentColors[accent]);
+            root.style.setProperty("--ir-cx", irisX + "%");
+            root.style.setProperty("--ir-cy", irisY + "%");
+
+            // Geometry measured in px ONCE at mount (cq units inside tweened
+            // values are a seek trap). The full radius clears the farthest
+            // frame corner with a small margin so the landed frame has no
+            // visible clip edge.
+            var width = root.clientWidth || 1920;
+            var height = root.clientHeight || 1080;
+            var centerX = (irisX / 100) * width;
+            var centerY = (irisY / 100) * height;
+            var fullRadius =
+              Math.hypot(Math.max(centerX, width - centerX), Math.max(centerY, height - centerY)) *
+                1.02 +
+              2;
+
+            rim.setAttribute("viewBox", "0 0 " + width + " " + height);
+            rimCircle.setAttribute("cx", String(centerX));
+            rimCircle.setAttribute("cy", String(centerY));
+            rimCircle.setAttribute("stroke-width", String(Math.max(2, width * 0.0021)));
+
+            // RETIME RANGE: fixed IN and OUT scale together only when D is too
+            // short. HOLD is the sole elastic phase. Never use timeScale().
+            var STAGE_IN_BASE = 0.32;
+            var OPEN_DURATION_BASE = 1.1;
+            var IN_BASE = openAt + OPEN_DURATION_BASE;
+            var OUT_BASE = exit === "none" ? 0 : 0.5;
+
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "3.5"));
+            var totalBase = IN_BASE + OUT_BASE;
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var STAGE_IN = Math.min(STAGE_IN_BASE * scale, IN);
+            var OPEN_AT = openAt * scale;
+            var OPEN_DURATION = OPEN_DURATION_BASE * scale;
+            var OPEN_END = IN;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var OUT_START = IN + HOLD;
+
+            function fireSfx(id, t) {
+              root.dispatchEvent(
+                new CustomEvent("hf:sfx", { detail: { id: id, t: t }, bubbles: true }),
+              );
+            }
+
+            // ONE radius proxy owns both the clip-path and the rim ring, so
+            // the two edges are locked on every frame. Seeded before the
+            // timeline builds so tl.seek(0) shows the closed iris.
+            var radius = { value: 0 };
+            function writeIris() {
+              after.style.setProperty("--ir-r", String(radius.value));
+              rimCircle.setAttribute("r", String(Math.max(0, radius.value)));
+            }
+            writeIris();
+
+            // Explicit both-endpoints state makes tl.seek(0) deterministic.
+            gsap.set(stage, { opacity: 0, y: 0 });
+            gsap.set(rim, { autoAlpha: 0 });
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: stage settle, then ONE confident iris pass (quiet register,
+            // L2). The rim fades in as the pass starts and dissolves just
+            // before the iris clears the frame corners.
+            tl.to(stage, { opacity: 1, duration: STAGE_IN, ease: "power2.out" }, 0);
+            tl.fromTo(
+              radius,
+              { value: 0 },
+              {
+                value: fullRadius,
+                duration: OPEN_DURATION,
+                ease: "power2.inOut",
+                onUpdate: writeIris,
+              },
+              OPEN_AT,
+            );
+            tl.fromTo(
+              rim,
+              { autoAlpha: 0 },
+              {
+                autoAlpha: 1,
+                duration: Math.min(0.18 * scale, OPEN_DURATION),
+                ease: "power1.out",
+                immediateRender: false,
+              },
+              OPEN_AT,
+            );
+            tl.to(
+              rim,
+              { autoAlpha: 0, duration: 0.24 * scale, ease: "power1.in" },
+              Math.max(OPEN_AT, OPEN_END - 0.24 * scale),
+            );
+            tl.call(
+              function () {
+                fireSfx("iris-land-soft", OPEN_END);
+              },
+              [],
+              OPEN_END,
+            );
+
+            // HOLD: deliberately still on the revealed state B.
+
+            // OUT: only when the exit variable asks for one; exit none holds
+            // the final revealed frame (frame roots own transitions).
+            if (exit !== "none") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+              if (exit === "up") {
+                tl.to(stage, { y: "-6cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              }
+            }
+
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/keyframe-scrub-stack/demo.html b/docs/public/catalog/components/keyframe-scrub-stack/demo.html
new file mode 100644
index 0000000000..57313bb642
--- /dev/null
+++ b/docs/public/catalog/components/keyframe-scrub-stack/demo.html
@@ -0,0 +1,188 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Keyframe Scrub Stack - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-advanced-keyframe-scrub-stack {
+        --hf-accent: var(--accent, rgba(17, 24, 39, 0.72));
+        --hf-l1: rgba(17, 24, 39, 0.72);
+        --hf-l2: rgba(17, 24, 39, 0.45);
+        --hf-l3: rgba(17, 24, 39, 0.18);
+        --hf-l4: rgba(17, 24, 39, 0.08);
+        --hf-hair: rgba(17, 24, 39, 0.14);
+        color: var(--hf-l1);
+        font-family: Inter, system-ui, sans-serif;
+        /* ponytail: scale wrapper — GSAP only targets .card, not this element */
+        transform: scale(2);
+        transform-origin: center center;
+        width: 560px;
+        min-height: 360px;
+        border-radius: 20px;
+        padding: 32px;
+        background: #ffffff;
+        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.1);
+        border: 1px solid #e4e4e7;
+        display: grid;
+        place-items: center;
+      }
+      .hf-advanced-keyframe-scrub-stack .stack {
+        position: relative;
+        width: 460px;
+        height: 240px;
+      }
+      .hf-advanced-keyframe-scrub-stack .card {
+        position: absolute;
+        inset: 0;
+        border-radius: 14px;
+        background: linear-gradient(var(--hf-l4), var(--hf-l4)), #ffffff;
+        border: 1px solid var(--hf-hair);
+        box-shadow: 0 8px 32px rgba(15, 23, 42, 0.1);
+        transform: translateY(var(--hf-card-y, 0px)) scale(var(--hf-card-scale, 1));
+        opacity: var(--hf-card-opacity, 1);
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        padding: 20px 22px 16px;
+      }
+      .hf-advanced-keyframe-scrub-stack .card-header {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+      }
+      .hf-advanced-keyframe-scrub-stack .card-dot {
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        background: var(--hf-l2);
+        flex-shrink: 0;
+      }
+      .hf-advanced-keyframe-scrub-stack .card-label {
+        font-size: 13px;
+        font-weight: 600;
+        color: #18181b;
+        letter-spacing: -0.01em;
+      }
+      .hf-advanced-keyframe-scrub-stack .card-sub {
+        font-size: 11px;
+        font-weight: 400;
+        color: var(--hf-l1);
+        margin-top: 2px;
+      }
+      .hf-advanced-keyframe-scrub-stack .card-bars {
+        display: flex;
+        gap: 5px;
+        align-items: flex-end;
+        height: 36px;
+      }
+      .hf-advanced-keyframe-scrub-stack .bar {
+        width: 8px;
+        border-radius: 3px;
+        background: var(--hf-l1);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="keyframe-scrub-stack-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="hf-advanced-keyframe-scrub-stack">
+        <div class="stack">
+          <div class="card" style="--i: 0">
+            <div class="card-header">
+              <span class="card-dot"></span>
+              <div>
+                <div class="card-label">Keyframe 3</div>
+                <div class="card-sub">t = 1.00s · ease-out</div>
+              </div>
+            </div>
+            <div class="card-bars">
+              <div class="bar" style="height: 28px"></div>
+              <div class="bar" style="height: 36px"></div>
+              <div class="bar" style="height: 20px"></div>
+              <div class="bar" style="height: 32px"></div>
+              <div class="bar" style="height: 14px"></div>
+              <div class="bar" style="height: 24px"></div>
+            </div>
+          </div>
+          <div class="card" style="--i: 1">
+            <div class="card-header">
+              <span class="card-dot"></span>
+              <div>
+                <div class="card-label">Keyframe 2</div>
+                <div class="card-sub">t = 0.50s · back.out</div>
+              </div>
+            </div>
+            <div class="card-bars">
+              <div class="bar" style="height: 18px"></div>
+              <div class="bar" style="height: 30px"></div>
+              <div class="bar" style="height: 36px"></div>
+              <div class="bar" style="height: 22px"></div>
+            </div>
+          </div>
+          <div class="card" style="--i: 2">
+            <div class="card-header">
+              <span class="card-dot"></span>
+              <div>
+                <div class="card-label">Keyframe 1</div>
+                <div class="card-sub">t = 0.00s · linear</div>
+              </div>
+            </div>
+            <div class="card-bars">
+              <div class="bar" style="height: 12px"></div>
+              <div class="bar" style="height: 12px"></div>
+              <div class="bar" style="height: 12px"></div>
+              <div class="bar" style="height: 12px"></div>
+              <div class="bar" style="height: 12px"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script>
+      const tl = gsap.timeline({ paused: true });
+      const startTime = 0.5;
+      tl.fromTo(
+        ".hf-advanced-keyframe-scrub-stack .card",
+        { "--hf-card-y": "42px", "--hf-card-scale": 0.88, "--hf-card-opacity": 0 },
+        {
+          "--hf-card-y": (i) => i * 26 + "px",
+          "--hf-card-scale": (i) => 1 - i * 0.04,
+          "--hf-card-opacity": 1,
+          duration: 0.48,
+          stagger: 0.12,
+          ease: "back.out(1.6)",
+        },
+        startTime,
+      );
+      tl.set({}, {}, 5);
+      window.__timelines = window.__timelines || {};
+      window.__timelines["keyframe-scrub-stack-demo"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/keyframe-scrub-stack/keyframe-scrub-stack.html b/docs/public/catalog/components/keyframe-scrub-stack/keyframe-scrub-stack.html
new file mode 100644
index 0000000000..704d2e7dde
--- /dev/null
+++ b/docs/public/catalog/components/keyframe-scrub-stack/keyframe-scrub-stack.html
@@ -0,0 +1,84 @@
+<!--
+  Keyframe Scrub Stack - advanced HyperFrames primitive.
+
+  This is intentionally seekable: drive it from a paused GSAP timeline.
+  MotionPath examples require GSAP MotionPathPlugin. Three.js examples expose
+  a render(progress) adapter instead of a free-running requestAnimationFrame loop.
+-->
+
+<div class="hf-advanced-keyframe-scrub-stack">
+  <div class="stack">
+    <div class="card" style="--i: 0"></div>
+    <div class="card" style="--i: 1"></div>
+    <div class="card" style="--i: 2"></div>
+  </div>
+</div>
+
+<style>
+  .hf-advanced-keyframe-scrub-stack {
+    --hf-accent: var(--accent, rgba(17, 24, 39, 0.72));
+    --hf-l1: rgba(17, 24, 39, 0.72);
+    --hf-l3: rgba(17, 24, 39, 0.18);
+    --hf-l4: rgba(17, 24, 39, 0.08);
+    --hf-hair: rgba(17, 24, 39, 0.14);
+    color: var(--hf-l1);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-advanced-keyframe-scrub-stack {
+    width: 720px;
+    min-height: 420px;
+    border-radius: 30px;
+    padding: 36px;
+    background: #fff;
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.16);
+    display: grid;
+    place-items: center;
+  }
+  .hf-advanced-keyframe-scrub-stack .grid {
+    display: grid;
+    grid-template-columns: repeat(8, 46px);
+    gap: 10px;
+  }
+  .hf-advanced-keyframe-scrub-stack .cell {
+    width: 46px;
+    height: 46px;
+    border-radius: 14px;
+    background: var(--hf-l1);
+    transform: translateY(var(--hf-cell-y, 0px)) scale(var(--hf-cell-scale, 1));
+    opacity: var(--hf-cell-opacity, 1);
+  }
+  .hf-advanced-keyframe-scrub-stack svg {
+    width: 520px;
+    height: 220px;
+    overflow: visible;
+  }
+  .hf-advanced-keyframe-scrub-stack path {
+    fill: none;
+    stroke: var(--hf-accent);
+    stroke-width: 14;
+    stroke-linecap: round;
+    stroke-dasharray: 900;
+    stroke-dashoffset: var(--hf-dash, 0);
+  }
+  .hf-advanced-keyframe-scrub-stack .stack {
+    position: relative;
+    width: 520px;
+    height: 260px;
+  }
+  .hf-advanced-keyframe-scrub-stack .card {
+    position: absolute;
+    inset: 0;
+    border-radius: 26px;
+    background: linear-gradient(var(--hf-l4), var(--hf-l4)), #ffffff;
+    border: 1px solid var(--hf-hair);
+    box-shadow: 0 20px 54px rgba(15, 23, 42, 0.14);
+    transform: translateY(var(--hf-card-y, 0px)) scale(var(--hf-card-scale, 1));
+    opacity: var(--hf-card-opacity, 1);
+  }
+</style>
+
+<!--
+  Timeline integration:
+  const startTime = 0;
+  tl.fromTo('.hf-advanced-keyframe-scrub-stack .card', { '--hf-card-y': '42px', '--hf-card-scale': 0.88, '--hf-card-opacity': 0 }, { '--hf-card-y': (i) => (i * 26) + 'px', '--hf-card-scale': (i) => 1 - i * 0.04, '--hf-card-opacity': 1, duration: 0.48, stagger: 0.12, ease: 'back.out(1.6)' }, startTime);
+-->
diff --git a/docs/public/catalog/components/kinetic-center-build/__hf-variables-preview.html b/docs/public/catalog/components/kinetic-center-build/__hf-variables-preview.html
new file mode 100644
index 0000000000..5d13c5986b
--- /dev/null
+++ b/docs/public/catalog/components/kinetic-center-build/__hf-variables-preview.html
@@ -0,0 +1,78 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Kinetic Center Build variables preview</title>
+    <style>
+      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #f7f7f8; }
+      #hf-vars-root { position: relative; width: 1920px; height: 1080px; }
+      #hf-vars-mount { position: absolute; inset: 0; display: grid; place-items: center; }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  </head>
+  <body>
+    <div id="hf-vars-root" data-composition-id="kinetic-center-build-variables-preview" data-start="0" data-width="1920" data-height="1080" data-duration="5" data-fps="30">
+      <div id="hf-vars-mount" class="clip" data-composition-id="kinetic-center-build" data-composition-src="./kinetic-center-build.html" data-start="0" data-duration="5" data-track-index="0" data-width="1920" data-height="1080"></div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["kinetic-center-build-variables-preview"] = gsap.timeline({ paused: true });
+    </script>
+    <script>
+      (function () {
+        var mount = document.getElementById("hf-vars-mount");
+        // The mount is filled asynchronously, and the demo script selects
+        // what it fills it with, so it cannot run before then.
+        var observer = new MutationObserver(build);
+        observer.observe(mount, { childList: true, subtree: true });
+        build();
+        function build() {
+          if (!mount.firstElementChild) return;
+          observer.disconnect();
+
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-kinetic-center-build span",
+          { opacity: 0, "--hf-word-y": "22px", "--hf-word-scale": 0.92, "--hf-word-blur": "5px" },
+          {
+            opacity: 1,
+            "--hf-word-y": "0px",
+            "--hf-word-scale": 1,
+            "--hf-word-blur": "0px",
+            duration: 0.3,
+            stagger: 0.055,
+            ease: "power3.out",
+          },
+          startTime,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["kinetic-center-build-demo"] = tl;
+          var child = window.__timelines["kinetic-center-build-demo"];
+          delete window.__timelines["kinetic-center-build-demo"];
+          if (!child || typeof child.paused !== "function") return;
+          child.paused(false);
+          window.__timelines["kinetic-center-build-variables-preview"].add(child, 0);
+        }
+      })();
+    </script>
+<script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "kinetic-center-build.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/kinetic-center-build/demo.html b/docs/public/catalog/components/kinetic-center-build/demo.html
new file mode 100644
index 0000000000..9ba17b4c76
--- /dev/null
+++ b/docs/public/catalog/components/kinetic-center-build/demo.html
@@ -0,0 +1,108 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Kinetic Center Build - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        min-width: 900px;
+        min-height: 500px;
+        padding: 64px;
+      }
+      .hf-remocn-kinetic-center-build {
+        color: #18181b;
+        font-family: Inter, system-ui, sans-serif;
+        font-weight: 900;
+        letter-spacing: -0.05em;
+      }
+      .hf-remocn-kinetic-center-build {
+        display: inline-flex;
+        gap: 28px;
+        font-size: 148px;
+        line-height: 1;
+      }
+      .hf-remocn-kinetic-center-build span {
+        display: inline-block;
+        transform: translate(var(--hf-word-x, 0px), var(--hf-word-y, 0px))
+          scale(var(--hf-word-scale, 1));
+        filter: blur(var(--hf-word-blur, 0px));
+        will-change: transform, filter, opacity;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="kinetic-center-build-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-kinetic-center-build">
+          <span>Build</span><span>motion</span><span>systems</span>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-kinetic-center-build span",
+          { opacity: 0, "--hf-word-y": "22px", "--hf-word-scale": 0.92, "--hf-word-blur": "5px" },
+          {
+            opacity: 1,
+            "--hf-word-y": "0px",
+            "--hf-word-scale": 1,
+            "--hf-word-blur": "0px",
+            duration: 0.3,
+            stagger: 0.055,
+            ease: "power3.out",
+          },
+          startTime,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["kinetic-center-build-demo"] = tl;
+      </script>
+    </div>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "kinetic-center-build.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/kinetic-center-build/kinetic-center-build.html b/docs/public/catalog/components/kinetic-center-build/kinetic-center-build.html
new file mode 100644
index 0000000000..3c5bec5e10
--- /dev/null
+++ b/docs/public/catalog/components/kinetic-center-build/kinetic-center-build.html
@@ -0,0 +1,112 @@
+<!--
+  Kinetic Center Build - remocn typography primitive for HyperFrames.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes a custom property the CSS above
+  consumes. The timeline recipe below is untouched by them: it keeps driving
+  one offset, and direction decides what that offset means on screen.
+
+    - size (compact | standard | display, default standard): type size of the
+      phrase, 40px, 56px, or 76px.
+    - tone (ink | paper | accent, default ink): word colour. ink is near-black
+      for light frames, paper near-white for dark ones, accent rides the
+      brand token.
+    - spacing (tight | standard | loose, default standard): the gap between
+      words, 6px, 12px, or 22px.
+    - direction (up | down | left | right, default up): where the offset the
+      timeline drives points. up pushes the words into place from below, down
+      from above, left and right along the baseline.
+
+  On every default the result is identical to the original: near-black 56px
+  words, 12px apart, pushing up into place.
+-->
+
+<div
+  class="hf-remocn-kinetic-center-build"
+  data-composition-variables='[
+    {"id": "size", "type": "enum", "role": "layout", "label": "Size", "description": "Type size of the phrase.", "default": "standard", "options": [{"value": "compact", "label": "Compact"}, {"value": "standard", "label": "Standard"}, {"value": "display", "label": "Display"}]},
+    {"id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Word colour: ink for light frames, paper for dark ones, accent rides the brand token.", "default": "ink", "options": [{"value": "ink", "label": "Ink"}, {"value": "paper", "label": "Paper"}, {"value": "accent", "label": "Accent"}]},
+    {"id": "spacing", "type": "enum", "role": "layout", "label": "Spacing", "description": "The gap between words in the phrase.", "default": "standard", "options": [{"value": "tight", "label": "Tight"}, {"value": "standard", "label": "Standard"}, {"value": "loose", "label": "Loose"}]},
+    {"id": "direction", "type": "enum", "role": "motion", "label": "Direction", "description": "Where the offset the timeline drives points, so words push in from below, above, or the side.", "default": "up", "options": [{"value": "up", "label": "Up"}, {"value": "down", "label": "Down"}, {"value": "left", "label": "Left"}, {"value": "right", "label": "Right"}]}
+  ]'
+>
+  <span>Build</span><span>motion</span><span>systems</span>
+</div>
+
+<style>
+  .hf-remocn-kinetic-center-build {
+    color: var(--hf-word-color, #18181b);
+    font-family: Inter, system-ui, sans-serif;
+    font-weight: 900;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-kinetic-center-build {
+    display: inline-flex;
+    gap: var(--hf-word-gap, 12px);
+    font-size: var(--hf-word-size, 56px);
+    line-height: 1;
+  }
+  .hf-remocn-kinetic-center-build span {
+    display: inline-block;
+    transform: translate(
+        calc(var(--hf-word-x, 0px) + var(--hf-word-y, 0px) * var(--hf-word-axis-x, 0)),
+        calc(var(--hf-word-y, 0px) * var(--hf-word-axis-y, 1))
+      )
+      scale(var(--hf-word-scale, 1));
+    filter: blur(var(--hf-word-blur, 0px));
+    will-change: transform, filter, opacity;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var sizes = { compact: "40px", standard: "56px", display: "76px" };
+    var tones = {
+      ink: "#18181b",
+      paper: "#fafafa",
+      accent: "var(--brand, #34d399)",
+    };
+    var spacings = { tight: "6px", standard: "12px", loose: "22px" };
+    var axes = {
+      up: { x: 0, y: 1 },
+      down: { x: 0, y: -1 },
+      left: { x: -1, y: 0 },
+      right: { x: 1, y: 0 },
+    };
+
+    var size = sizes[pick(sizes, vars.size, "standard")];
+    var tone = tones[pick(tones, vars.tone, "ink")];
+    var spacing = spacings[pick(spacings, vars.spacing, "standard")];
+    var axis = axes[pick(axes, vars.direction, "up")];
+
+    var roots = document.querySelectorAll(".hf-remocn-kinetic-center-build");
+    for (var i = 0; i < roots.length; i += 1) {
+      var root = roots[i];
+      root.style.setProperty("--hf-word-size", size);
+      root.style.setProperty("--hf-word-color", tone);
+      root.style.setProperty("--hf-word-gap", spacing);
+      root.style.setProperty("--hf-word-axis-x", String(axis.x));
+      root.style.setProperty("--hf-word-axis-y", String(axis.y));
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-kinetic-center-build span', { opacity: 0, '--hf-word-y': '22px', '--hf-word-scale': 0.92, '--hf-word-blur': '5px' }, { opacity: 1, '--hf-word-y': '0px', '--hf-word-scale': 1, '--hf-word-blur': '0px', duration: 0.3, stagger: 0.055, ease: 'power3.out' }, startTime);
+-->
diff --git a/docs/public/catalog/components/kinetic-type-swap/README.md b/docs/public/catalog/components/kinetic-type-swap/README.md
new file mode 100644
index 0000000000..c0e4c7caca
--- /dev/null
+++ b/docs/public/catalog/components/kinetic-type-swap/README.md
@@ -0,0 +1,37 @@
+# kinetic-type-swap
+
+A held sentence keeps its prefix and suffix fixed while one masked word slot rolls vertically through comma-separated options. The slot pre-sizes to the widest option, so the sentence never reflows during a swap. The final word locks with a soft pulse and holds until the frame cuts.
+
+4s authored, elastic HOLD, exit `none` by default.
+
+## Variables
+
+| id        | type   | default                   | notes                                                                                                                                                                                      |
+| --------- | ------ | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `prefix`  | string | `Ship`                    | Fixed text before the rolling slot.                                                                                                                                                        |
+| `options` | string | `faster,smarter,together` | Comma-separated words, shown in order; the last one is the sentence's final state.                                                                                                         |
+| `suffix`  | string | `` (empty)                | Fixed text after the rolling slot.                                                                                                                                                         |
+| `cues`    | string | `` (empty)                | Comma-separated seconds (from mount start) for each swap, e.g. `0.8,1.6`. Sorted ascending; swaps beyond the list extrapolate at the list's own gap. Empty keeps the authored even spread. |
+| `accent`  | enum   | `green`                   | Slot color: green rides `--brand`, blue rides `--accent`, violet rides `--accent-2`.                                                                                                       |
+| `exit`    | enum   | `none`                    | `none` holds until the cut; `fade` is the opacity release (the pre-Wave-J default ending); `up` adds a small rise to the fade.                                                             |
+
+## Mount
+
+```html
+<div
+  class="clip"
+  data-composition-id="kinetic-type-swap"
+  data-composition-src="./kinetic-type-swap.html"
+  data-variable-values='{"prefix":"Render","options":"anything,everywhere,tonight","cues":"1.0,2.2"}'
+  data-start="0"
+  data-duration="4"
+  data-track-index="0"
+></div>
+```
+
+Elastic root: no `data-width`/`data-height`; it fills whatever box the host clip gives it. Timeline registers under the literal `kinetic-type-swap` key.
+
+## Notes
+
+- Cue N fires the swap from option N to option N+1. Swaps clamp so the roll and settle finish before any exit; the roll shortens automatically when cues sit close together.
+- Deterministic and seek-safe; the hold pulse uses a finite odd repeat, never an open loop.
diff --git a/docs/public/catalog/components/kinetic-type-swap/demo.html b/docs/public/catalog/components/kinetic-type-swap/demo.html
new file mode 100644
index 0000000000..dcbdec0440
--- /dev/null
+++ b/docs/public/catalog/components/kinetic-type-swap/demo.html
@@ -0,0 +1,117 @@
+<!doctype html>
+<!--
+  kinetic-type-swap demo. This standalone composition mounts the primitive
+  through data-composition-src. Non-default prefix, options, suffix, and
+  accent values prove the variable path and the widest-option slot contract.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Kinetic Type Swap Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0b0c0e;
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --muted: #94a3b8;
+        --surface: #15181e;
+        --border: #343a46;
+        --brand: #71f5a7;
+        --accent: #61a8ff;
+        --accent-2: #c5a3ff;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-body: Inter, system-ui, sans-serif;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        --radius: 2.4cqmin;
+        --space-1: 1.2cqmin;
+        --space-2: 2.4cqmin;
+        --space-3: 4cqmin;
+        --dur-beat: 0.5s;
+        --ease-standard: cubic-bezier(0.215, 0.61, 0.355, 1);
+        --ease-emphasis: cubic-bezier(0.19, 1, 0.22, 1);
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(
+          ellipse at 50% 44%,
+          color-mix(in srgb, var(--surface) 72%, var(--accent-2)) 0%,
+          var(--bg) 70%
+        );
+      }
+
+      .mount-card {
+        width: 82%;
+        height: 42%;
+        left: 9%;
+        top: 29%;
+        container-type: size;
+        overflow: hidden;
+        border: 0.12cqmin solid color-mix(in srgb, var(--border) 74%, transparent);
+        border-radius: calc(var(--radius) * 1.3);
+        background: color-mix(in srgb, var(--surface) 76%, transparent);
+        box-shadow: 0 4cqh 10cqh color-mix(in srgb, var(--bg) 60%, transparent);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="kinetic-type-swap-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="kinetic-type-swap-mount"
+        class="mount-card clip"
+        data-composition-id="kinetic-type-swap"
+        data-composition-src="./kinetic-type-swap.html"
+        data-variable-values='{"prefix":"Make","options":"motion,meaning,momentum","suffix":"visible","accent":"violet"}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="1574"
+        data-height="454"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["kinetic-type-swap-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "kinetic-type-swap.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/kinetic-type-swap/kinetic-type-swap.html b/docs/public/catalog/components/kinetic-type-swap/kinetic-type-swap.html
new file mode 100644
index 0000000000..80f8243d10
--- /dev/null
+++ b/docs/public/catalog/components/kinetic-type-swap/kinetic-type-swap.html
@@ -0,0 +1,373 @@
+<!doctype html>
+<!--
+  kinetic-type-swap: HyperFrames video primitive (text effects / swap)
+
+  A held sentence keeps its prefix and suffix fixed while one masked word
+  slot rolls through comma-separated options. Every option remains in the
+  same CSS grid cell, so the slot takes the widest option's intrinsic width
+  before motion starts and the sentence never reflows during a swap.
+
+  Variables:
+    - prefix (string, default "Ship"): fixed text before the rolling slot.
+    - options (string, default "faster,smarter,together"): comma-separated
+      words shown in order.
+    - suffix (string, default ""): fixed text after the rolling slot.
+    - cues (string, default ""): comma-separated seconds (from mount start)
+      for each word swap. Empty keeps the authored even spread.
+    - accent (green | blue | violet, default "green"): rolling word color.
+    - exit (none | fade | up, default "none"): optional departure.
+
+  Envelope, fixed IN and OUT with elastic HOLD only:
+    IN_BASE  = 2.25s, fade in followed by every vertical word swap (cues can
+               stretch the swap phase past IN_BASE when they land later)
+    HOLD     = max(0, D - IN - OUT), final word stays locked with a soft pulse
+    OUT_BASE = 0.45s departure when exit is fade or up, 0s when exit is
+               none (the default: the sentence holds until the cut)
+    If D is shorter than IN_BASE + OUT_BASE, IN and OUT compress together.
+    The timeline is never time-scaled.
+
+  Determinism: options are parsed once before timeline construction. GSAP
+  owns every visible change, uses finite repeats, and registers one paused
+  timeline under the literal kinetic-type-swap key.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, and has no data-width or
+  data-height. Only word transforms change position. The held sentence never
+  moves, and the grid-owned slot width never changes.
+-->
+<html
+  lang="en"
+  data-composition-id="kinetic-type-swap"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "prefix", "type": "string", "role": "content", "label": "Prefix", "description": "Fixed sentence text before the rolling word slot.", "default": "Ship" },
+    { "id": "options", "type": "string", "role": "content", "label": "Options", "description": "Comma-separated words shown in the rolling slot.", "default": "faster,smarter,together" },
+    { "id": "suffix", "type": "string", "role": "content", "label": "Suffix", "description": "Fixed sentence text after the rolling word slot.", "default": "" },
+    { "id": "cues", "type": "string", "role": "timing", "label": "Cues", "description": "Comma-separated seconds (from mount start) for each word swap. Empty keeps the authored even spread.", "default": "" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Color used by the rolling word slot.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the sentence holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Kinetic Type Swap</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="kinetic-type-swap" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .kts-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .kts-stage {
+            display: grid;
+            place-items: center;
+            width: 94cqw;
+            height: 70cqh;
+            opacity: 0;
+          }
+
+          .kts-sentence {
+            display: flex;
+            align-items: baseline;
+            justify-content: center;
+            /* Word gap must scale with the display type, never a host layout
+               spacing token: --space-* is chrome-scale and jams the sentence
+               ("Makemomentumvisible") when the type is auto-fitted large. */
+            gap: 0.26em;
+            max-width: 94cqw;
+            color: var(--fg, #f8fafc);
+            font-size: var(--kts-font-size);
+            font-weight: 760;
+            line-height: 1.08;
+            letter-spacing: -0.045em;
+            white-space: nowrap;
+          }
+
+          .kts-prefix,
+          .kts-suffix {
+            flex: 0 0 auto;
+          }
+
+          .kts-prefix:empty,
+          .kts-suffix:empty {
+            display: none;
+          }
+
+          /* Every word occupies one grid cell and contributes its intrinsic
+             width. Transforms do not affect layout, so this masked slot stays
+             as wide as the widest option for the entire composition. */
+          .kts-slot {
+            display: inline-grid;
+            flex: 0 0 auto;
+            overflow: hidden;
+            color: var(--kts-accent);
+            text-shadow: 0 0 2.8cqh color-mix(in srgb, var(--kts-accent) 28%, transparent);
+            vertical-align: baseline;
+          }
+
+          .kts-word {
+            grid-area: 1 / 1;
+            width: max-content;
+            justify-self: center;
+            color: var(--kts-accent);
+            will-change: transform, opacity;
+          }
+        </style>
+
+        <div
+          id="kinetic-type-swap-clip"
+          class="kts-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="kts-stage" role="img">
+            <div class="kts-sentence">
+              <span class="kts-prefix"></span>
+              <span class="kts-slot" aria-hidden="true"></span>
+              <span class="kts-suffix"></span>
+            </div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".kts-stage");
+            var prefixElement = root.querySelector(".kts-prefix");
+            var slotElement = root.querySelector(".kts-slot");
+            var suffixElement = root.querySelector(".kts-suffix");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var defaultOptions = ["faster", "smarter", "together"];
+            var prefix = vars.prefix == null ? "Ship" : String(vars.prefix).trim();
+            var suffix = vars.suffix == null ? "" : String(vars.suffix).trim();
+            var rawOptions = vars.options == null ? defaultOptions.join(",") : String(vars.options);
+            var options = rawOptions
+              .split(",")
+              .map(function (option) {
+                return option.trim();
+              })
+              .filter(function (option) {
+                return option.length > 0;
+              });
+            if (options.length === 0) options = defaultOptions.slice();
+
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+            var cuesValue = vars.cues == null ? "" : String(vars.cues);
+            var cues = cuesValue
+              .split(",")
+              .reduce(function (result, token) {
+                var trimmed = token.trim();
+                if (trimmed === "") return result;
+                var seconds = Number(trimmed);
+                if (!Number.isFinite(seconds) || seconds < 0) return result;
+                result.push(seconds);
+                return result;
+              }, [])
+              .sort(function (a, b) {
+                return a - b;
+              });
+
+            root.style.setProperty("--kts-accent", accentColors[accent]);
+            prefixElement.textContent = prefix;
+            suffixElement.textContent = suffix;
+
+            var words = options.map(function (option, index) {
+              var word = document.createElement("span");
+              word.className = "kts-word";
+              word.id = "kinetic-type-swap-word-" + index;
+              word.textContent = option;
+              slotElement.appendChild(word);
+              return word;
+            });
+
+            var finalSentence = [prefix, options[options.length - 1], suffix]
+              .filter(function (part) {
+                return part.length > 0;
+              })
+              .join(" ");
+            stage.setAttribute("aria-label", finalSentence);
+
+            var widestOptionLength = options.reduce(function (widest, option) {
+              return Math.max(widest, Array.from(option).length);
+            }, 1);
+            var sentenceLength =
+              Array.from(prefix).length + widestOptionLength + Array.from(suffix).length + 2;
+            var fittedCqw = Math.min(12, 122 / Math.max(1, sentenceLength));
+            root.style.setProperty(
+              "--kts-font-size",
+              "min(" + fittedCqw.toFixed(3) + "cqw, 22cqh)",
+            );
+
+            var IN_BASE = 2.25;
+            var OUT_BASE = exit === "none" ? 0 : 0.45;
+            var ARRIVAL_BASE = 0.3;
+            var SWAP_START_BASE = 0.48;
+            var ROLL_BASE = 0.46;
+            var SETTLE_TAIL_BASE = 0.18;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var totalBase = Math.max(0.001, IN_BASE + OUT_BASE);
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var ARRIVAL = ARRIVAL_BASE * scale;
+            var SWAP_START = SWAP_START_BASE * scale;
+            var ROLL = ROLL_BASE * scale;
+            var SETTLE_TAIL = SETTLE_TAIL_BASE * scale;
+
+            // Swap schedule: cues own the swap moments when provided; the
+            // authored even spread otherwise. Swaps beyond the cue list
+            // extrapolate at the cue list's own gap, and every swap clamps
+            // so its roll and settle finish before any exit.
+            var swapCount = words.length - 1;
+            var swapTimes = [];
+            var rollDuration = ROLL;
+            if (swapCount > 0) {
+              if (cues.length > 0) {
+                var lastCue = cues[cues.length - 1];
+                var cueGap =
+                  cues.length >= 2 ? Math.max(0.05, (lastCue - cues[0]) / (cues.length - 1)) : ROLL;
+                var latestSwap = Math.max(0, duration - OUT - ROLL - SETTLE_TAIL);
+                for (var cueIndex = 0; cueIndex < swapCount; cueIndex += 1) {
+                  var cueAt =
+                    cueIndex < cues.length
+                      ? cues[cueIndex]
+                      : lastCue + (cueIndex - (cues.length - 1)) * cueGap;
+                  swapTimes.push(Math.min(latestSwap, Math.max(0, cueAt)));
+                }
+                var minGap = Infinity;
+                for (var gapIndex = 1; gapIndex < swapTimes.length; gapIndex += 1) {
+                  minGap = Math.min(minGap, swapTimes[gapIndex] - swapTimes[gapIndex - 1]);
+                }
+                if (Number.isFinite(minGap)) {
+                  rollDuration = Math.min(ROLL, Math.max(0.04, minGap * 0.72));
+                }
+              } else {
+                var lastSwapStart = Math.max(SWAP_START, IN - SETTLE_TAIL - ROLL);
+                var swapStep = swapCount === 1 ? 0 : (lastSwapStart - SWAP_START) / (swapCount - 1);
+                rollDuration =
+                  swapCount <= 2 ? ROLL : Math.min(ROLL, Math.max(0.04, swapStep * 0.72));
+                for (var index = 1; index <= swapCount; index += 1) {
+                  swapTimes.push(
+                    swapCount === 1 ? lastSwapStart : SWAP_START + (index - 1) * swapStep,
+                  );
+                }
+              }
+            }
+            var swapsEnd =
+              swapTimes.length > 0
+                ? swapTimes[swapTimes.length - 1] + rollDuration + SETTLE_TAIL
+                : IN;
+            var HOLD_START = Math.min(Math.max(0, duration - OUT), Math.max(IN, swapsEnd));
+            var HOLD = Math.max(0, duration - (HOLD_START + OUT));
+            var OUT_START = HOLD_START + HOLD;
+
+            gsap.set(stage, { opacity: 0 });
+            gsap.set(words, { yPercent: 112, opacity: 0 });
+            gsap.set(words[0], { yPercent: 0, opacity: 1 });
+
+            var tl = gsap.timeline({ paused: true });
+            tl.to(stage, { opacity: 1, duration: ARRIVAL, ease: "power2.out" }, 0);
+
+            // Masked exchange: the outgoing word whips fully past the slot
+            // mask (power4.in) before the incoming word crosses center. The
+            // two phases overlap only for ~10% of the roll, while both words
+            // are opposite-edge slivers, so every frame shows at most one
+            // legible word at full ink and never a double exposure.
+            swapTimes.forEach(function (swapAt, swapIndex) {
+              var wordIndex = swapIndex + 1;
+              var incomingEase = wordIndex === words.length - 1 ? "back.out(1.7)" : "power4.out";
+              var outDuration = rollDuration * 0.55;
+              var inDuration = rollDuration * 0.55;
+              var inStart = swapAt + rollDuration - inDuration;
+
+              tl.to(
+                words[wordIndex - 1],
+                { yPercent: -112, duration: outDuration, ease: "power4.in" },
+                swapAt,
+              );
+              tl.set(words[wordIndex - 1], { opacity: 0 }, swapAt + outDuration);
+              tl.set(words[wordIndex], { opacity: 1 }, inStart);
+              tl.to(
+                words[wordIndex],
+                { yPercent: 0, duration: inDuration, ease: incomingEase },
+                inStart,
+              );
+            });
+
+            var finalWord = words[words.length - 1];
+            var beat = parseFloat(getComputedStyle(root).getPropertyValue("--dur-beat")) || 0.5;
+            var pulseHalf = Math.min(beat, HOLD / 2);
+            if (pulseHalf > 0) {
+              var maxRepeat = Math.floor(HOLD / pulseHalf) - 1;
+              var pulseRepeat = maxRepeat % 2 === 1 ? maxRepeat : maxRepeat - 1;
+              if (pulseRepeat >= 1) {
+                tl.to(
+                  finalWord,
+                  {
+                    opacity: 0.9,
+                    duration: pulseHalf,
+                    ease: "sine.inOut",
+                    yoyo: true,
+                    repeat: pulseRepeat,
+                  },
+                  HOLD_START,
+                );
+              }
+            }
+
+            // OUT: optional departure; exit none holds until the frame cuts.
+            if (exit === "fade") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "up") {
+              tl.to(stage, { opacity: 0, y: "-3cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["kinetic-type-swap"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/landing-code-showcase/demo.html b/docs/public/catalog/components/landing-code-showcase/demo.html
new file mode 100644
index 0000000000..246e69cd7f
--- /dev/null
+++ b/docs/public/catalog/components/landing-code-showcase/demo.html
@@ -0,0 +1,201 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Landing Code Showcase - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+        /* ponytail: scale wrapper — demo-frame is not a GSAP target, safe to CSS-transform */
+        transform: scale(0.76);
+        transform-origin: center center;
+      }
+      .hf-remocn-landing-code-showcase {
+        --hf-accent: #2563eb;
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-landing-code-showcase {
+        width: 820px;
+        min-height: 460px;
+        border-radius: 34px;
+        padding: 28px;
+        background: linear-gradient(135deg, #f8fafc, #e0f2fe);
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);
+        display: grid;
+        grid-template-columns: 280px 1fr;
+        gap: 22px;
+        overflow: hidden;
+      }
+      .hf-remocn-landing-code-showcase .panel {
+        border: 1px solid rgba(15, 23, 42, 0.08);
+        border-radius: 24px;
+        background: rgba(255, 255, 255, 0.76);
+        padding: 22px;
+        backdrop-filter: blur(12px);
+      }
+      .hf-remocn-landing-code-showcase .prompt {
+        display: grid;
+        gap: 12px;
+        align-content: start;
+      }
+      .hf-remocn-landing-code-showcase .pill {
+        height: 42px;
+        border-radius: 999px;
+        background: #111827;
+        color: #fff;
+        display: flex;
+        align-items: center;
+        padding: 0 18px;
+        font-size: 14px;
+        font-weight: 600;
+        transform: translateX(var(--hf-pill-x, 0px));
+      }
+      .hf-remocn-landing-code-showcase .preview {
+        display: grid;
+        gap: 14px;
+      }
+      .hf-remocn-landing-code-showcase .card {
+        min-height: 78px;
+        border-radius: 18px;
+        background: #fff;
+        box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
+        transform: translate(var(--hf-card-x, 0px), var(--hf-card-y, 0px))
+          scale(var(--hf-card-scale, 1));
+        opacity: var(--hf-card-opacity, 1);
+      }
+      .hf-remocn-landing-code-showcase h3 {
+        margin: 0 0 14px;
+        font-size: 32px;
+        letter-spacing: -0.04em;
+      }
+      .hf-remocn-landing-code-showcase p {
+        margin: 0;
+        font-size: 14px;
+        line-height: 1.55;
+        color: #475569;
+      }
+      .hf-remocn-landing-code-showcase .code-lines {
+        display: grid;
+        gap: 8px;
+        padding: 16px;
+      }
+      .hf-remocn-landing-code-showcase .code-line {
+        height: 10px;
+        border-radius: 6px;
+        background: #e4e4e7;
+      }
+      .hf-remocn-landing-code-showcase .code-line.indent {
+        margin-left: 16px;
+        background: #eff6ff;
+      }
+      .hf-remocn-landing-code-showcase .card-label {
+        padding: 12px 16px 0;
+        font-size: 11px;
+        font-weight: 600;
+        color: #71717a;
+        letter-spacing: 0.05em;
+        text-transform: uppercase;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="landing-code-showcase-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-landing-code-showcase">
+          <div class="panel prompt">
+            <h3>Landing Code Showcase</h3>
+            <p>A product hero where code output becomes a live preview card.</p>
+            <div class="pill">Generate scene</div>
+            <div class="pill">Refine motion</div>
+            <div class="pill">Export</div>
+          </div>
+          <div class="panel preview">
+            <div class="card">
+              <div class="card-label">Scene 01</div>
+              <div class="code-lines">
+                <div class="code-line" style="width:72%"></div>
+                <div class="code-line indent" style="width:55%"></div>
+                <div class="code-line indent" style="width:68%"></div>
+                <div class="code-line" style="width:40%"></div>
+              </div>
+            </div>
+            <div class="card">
+              <div class="card-label">Motion</div>
+              <div class="code-lines">
+                <div class="code-line" style="width:80%"></div>
+                <div class="code-line indent" style="width:60%"></div>
+                <div class="code-line indent" style="width:45%"></div>
+              </div>
+            </div>
+            <div class="card">
+              <div class="card-label">Export</div>
+              <div class="code-lines">
+                <div class="code-line" style="width:65%"></div>
+                <div class="code-line indent" style="width:50%"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-landing-code-showcase .pill",
+          { "--hf-pill-x": "-18px", opacity: 0 },
+          { "--hf-pill-x": "0px", opacity: 1, duration: 0.25, stagger: 0.08, ease: "power2.out" },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-landing-code-showcase .card",
+          { "--hf-card-y": "28px", "--hf-card-scale": 0.96, "--hf-card-opacity": 0 },
+          {
+            "--hf-card-y": "0px",
+            "--hf-card-scale": 1,
+            "--hf-card-opacity": 1,
+            duration: 0.42,
+            stagger: 0.12,
+            ease: "power3.out",
+          },
+          startTime + 0.2,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["landing-code-showcase-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/landing-code-showcase/landing-code-showcase.html b/docs/public/catalog/components/landing-code-showcase/landing-code-showcase.html
new file mode 100644
index 0000000000..5f21c24f73
--- /dev/null
+++ b/docs/public/catalog/components/landing-code-showcase/landing-code-showcase.html
@@ -0,0 +1,94 @@
+<!--
+  Landing Code Showcase - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-landing-code-showcase">
+  <div class="panel prompt">
+    <h3>Landing Code Showcase</h3>
+    <p>A product hero where code output becomes a live preview card.</p>
+    <div class="pill">Generate scene</div>
+    <div class="pill">Refine motion</div>
+    <div class="pill">Export</div>
+  </div>
+  <div class="panel preview">
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+  </div>
+</div>
+
+<style>
+  .hf-remocn-landing-code-showcase {
+    --hf-accent: #2563eb;
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-landing-code-showcase {
+    width: 820px;
+    min-height: 460px;
+    border-radius: 34px;
+    padding: 28px;
+    background: linear-gradient(135deg, #f8fafc, #e0f2fe);
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);
+    display: grid;
+    grid-template-columns: 280px 1fr;
+    gap: 22px;
+    overflow: hidden;
+  }
+  .hf-remocn-landing-code-showcase .panel {
+    border: 1px solid rgba(15, 23, 42, 0.08);
+    border-radius: 24px;
+    background: rgba(255, 255, 255, 0.76);
+    padding: 22px;
+    backdrop-filter: blur(12px);
+  }
+  .hf-remocn-landing-code-showcase .prompt {
+    display: grid;
+    gap: 12px;
+    align-content: start;
+  }
+  .hf-remocn-landing-code-showcase .pill {
+    height: 42px;
+    border-radius: 999px;
+    background: #111827;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    padding: 0 18px;
+    font-weight: 800;
+    transform: translateX(var(--hf-pill-x, 0px));
+  }
+  .hf-remocn-landing-code-showcase .preview {
+    display: grid;
+    gap: 14px;
+  }
+  .hf-remocn-landing-code-showcase .card {
+    min-height: 78px;
+    border-radius: 18px;
+    background: #fff;
+    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
+    transform: translate(var(--hf-card-x, 0px), var(--hf-card-y, 0px))
+      scale(var(--hf-card-scale, 1));
+    opacity: var(--hf-card-opacity, 1);
+  }
+  .hf-remocn-landing-code-showcase h3 {
+    margin: 0 0 14px;
+    font-size: 32px;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-landing-code-showcase p {
+    margin: 0;
+    color: #475569;
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-landing-code-showcase .pill', { '--hf-pill-x': '-18px', opacity: 0 }, { '--hf-pill-x': '0px', opacity: 1, duration: 0.25, stagger: 0.08, ease: 'power2.out' }, startTime); tl.fromTo('.hf-remocn-landing-code-showcase .card', { '--hf-card-y': '28px', '--hf-card-scale': 0.96, '--hf-card-opacity': 0 }, { '--hf-card-y': '0px', '--hf-card-scale': 1, '--hf-card-opacity': 1, duration: 0.42, stagger: 0.12, ease: 'power3.out' }, startTime + 0.2);
+-->
diff --git a/docs/public/catalog/components/light-sweep-pass/README.md b/docs/public/catalog/components/light-sweep-pass/README.md
new file mode 100644
index 0000000000..05fdfa96f1
--- /dev/null
+++ b/docs/public/catalog/components/light-sweep-pass/README.md
@@ -0,0 +1,103 @@
+# light-sweep-pass
+
+A traveling key light re-shades a slotted scene: a soft diagonal gradient
+band crosses the frame once while every per-element highlight and shadow
+shifts in lockstep, then the light settles into a resting key from the upper
+third. Quiet, expensive-feeling; the scene itself never moves.
+
+One custom property owns the whole pass: the timeline writes `--light-x`
+(a unitless frame-percent scalar on `#root`) and nothing else. The band's
+translate, every highlight bloom, every shadow offset, and the ambient lift
+read it through `calc()`/`clamp()`/`max()` in static CSS, so seeks in any
+order resolve identical frames.
+
+Reference: the ordinaryfolk traveling light band (motion-reference
+`ordinaryfolkco/2001090228958752945`).
+
+## Files
+
+- `light-sweep-pass.html`: the mountable sub-composition (install target:
+  `compositions/components/light-sweep-pass.html`).
+- `registry-item.json`: registry metadata and the variables block.
+- `demo.html`: a full-bleed 1920x1080 LIGHT host that mounts the primitive
+  with non-default variables (QA gallery input).
+
+## Variables
+
+| id         | type   | default    | notes                                                                     |
+| ---------- | ------ | ---------- | ------------------------------------------------------------------------- |
+| `angle`    | number | `115`      | band and highlight gradient angle in degrees (60 to 160)                  |
+| `sweep_at` | number | `0.9`      | seconds after mount start when the band starts crossing (0 to 8)          |
+| `strength` | enum   | `standard` | `subtle` halves the band opacity and highlight bloom                      |
+| `accent`   | enum   | `green`    | `green` maps to `--brand`, `blue` to `--accent`, `violet` to `--accent-2` |
+| `exit`     | enum   | `none`     | `none` holds the settled key; `fade` and `up` release the stage           |
+
+Envelope: IN = `sweep_at` + 1.60s crossing + 0.55s settle, OUT = 0.5s only
+when `exit` is `fade` or `up`, HOLD is the sole elastic phase. The
+`sweep-land` sync point (`hf:sfx` id `light-settle-soft`) fires when the
+light reaches its resting key, 3.05s at defaults.
+
+## The slot mechanism
+
+The primitive ships one named full-bleed slot inside its `<template>`:
+
+```html
+<div class="lsp-scene" data-slot="scene">...</div>
+```
+
+The default children are a token hero card and three feature cards, so an
+untouched mount still reads as a tasteful pass. To light your own scene,
+install the component and **replace the children of the `[data-slot="scene"]`
+element in your installed copy** (the runtime clones only the primitive's own
+template on mount, so slot content lives in the component file, not on the
+host clip).
+
+Opting elements into the light:
+
+- Add `data-lit` to any element that should catch highlights and cast a
+  moving shadow, and give it an inline `style="--lsp-x: NN"` where NN is the
+  element's center along the sweep axis (percent of frame width, roughly its
+  horizontal center for the default angles).
+- Elements without `data-lit` only receive the band wash and the ambient
+  lift; nothing else touches them.
+- Highlights inherit the element's `border-radius`; give lit elements a
+  solid background so the bloom and shadow read.
+- Keep the `.lsp-ambient` and `.lsp-band` layers alone; they render above
+  slot content and are owned by the timeline.
+
+## Worked example
+
+```bash
+npx hyperframes add light-sweep-pass
+```
+
+In `compositions/components/light-sweep-pass.html`, replace the slot's
+default block:
+
+```html
+<div class="lsp-scene" data-slot="scene">
+  <img src="../../assets/dashboard.png" alt="" style="width:100%;height:100%;object-fit:cover" />
+  <div
+    data-lit
+    style="--lsp-x: 64; position:absolute; left:52%; top:30%; width:24%; height:40%"
+  ></div>
+</div>
+```
+
+Mount it from a host composition like any sub-composition:
+
+```html
+<div
+  class="clip"
+  data-composition-id="light-sweep-pass"
+  data-composition-src="./components/light-sweep-pass.html"
+  data-variable-values='{"angle":128,"sweep_at":0.6,"accent":"blue"}'
+  data-start="2"
+  data-duration="4"
+  data-track-index="0"
+></div>
+```
+
+The scene settles, the band crosses 0.6s after mount over 1.6s, the key
+glides back to its resting position, and the lit scene holds for the rest of
+the clip window (`exit` defaults to `none`; frame roots own transitions).
diff --git a/docs/public/catalog/components/light-sweep-pass/demo.html b/docs/public/catalog/components/light-sweep-pass/demo.html
new file mode 100644
index 0000000000..839cdb6097
--- /dev/null
+++ b/docs/public/catalog/components/light-sweep-pass/demo.html
@@ -0,0 +1,106 @@
+<!doctype html>
+<!--
+  light-sweep-pass demo. FULL-BLEED mount on a LIGHT token stage: the band
+  crosses early at a steeper angle with the blue accent at standard
+  strength, proving the one-property pass, the per-element highlight and
+  shadow lockstep, and the settled resting key on a light host.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>light-sweep-pass Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #eef0f3);
+      }
+
+      #root {
+        --bg: #eef0f3;
+        --fg: #14171c;
+        --muted: #626873;
+        --surface: #fbfcfd;
+        --border: #d3d8df;
+        --brand: #16a34a;
+        --accent: #0284c7;
+        --accent-2: #7c5cff;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-body: Inter, system-ui, sans-serif;
+        --radius: 22px;
+        --space-1: 8px;
+        --space-2: 16px;
+        --space-3: 32px;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #eef0f3);
+      }
+
+      .mount-stage {
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        container-type: size;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="light-sweep-pass-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="light-sweep-pass-mount"
+        class="mount-stage clip"
+        data-composition-id="light-sweep-pass"
+        data-composition-src="./light-sweep-pass.html"
+        data-variable-values='{"angle":128,"sweep_at":0.6,"accent":"blue"}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="1920"
+        data-height="1080"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["light-sweep-pass-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "light-sweep-pass.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/light-sweep-pass/light-sweep-pass.html b/docs/public/catalog/components/light-sweep-pass/light-sweep-pass.html
new file mode 100644
index 0000000000..6f313d37f2
--- /dev/null
+++ b/docs/public/catalog/components/light-sweep-pass/light-sweep-pass.html
@@ -0,0 +1,477 @@
+<!doctype html>
+<!--
+  light-sweep-pass: HyperFrames video primitive (overlays / light)
+
+  Concept: a traveling key light re-shades a slotted scene. A soft diagonal
+  gradient band crosses the frame once while every per-element highlight and
+  shadow shifts in lockstep, then the light settles into a resting key from
+  the upper third. Quiet, expensive-feeling; the scene itself never moves.
+
+  Wave L, unit L3. Reference: motion-reference/ordinaryfolkco
+  2001090228958752945 (the traveling light band re-shading the frame).
+
+  ONE PROPERTY OWNS THE PASS: --light-x (a unitless 0-100-ish scalar on
+  #root) is the only animated value. The band's translate, every element's
+  highlight bloom, every shadow offset, and the ambient lift all read it
+  through calc()/clamp()/max() in static CSS. The timeline tweens a plain
+  JS number proxy and writes --light-x in onUpdate (never a var() string),
+  so seeks in any order resolve the same computed styles.
+
+  Slot (see README.md for a worked example):
+    - [data-slot="scene"]: the full-bleed scene being lit. Replace the
+      children of this element in your installed copy. Default: a token
+      hero card and three feature cards. Elements opt into the light with
+      the data-lit attribute plus an inline --lsp-x (their center along
+      the sweep axis, percent of frame width).
+
+  Variables (declared in data-composition-variables below):
+    - angle (number, degrees, default 115, 60 to 160): band and highlight
+      gradient angle. 115 reads as upper-left key light.
+    - sweep_at (number, seconds, default 0.9): when the band starts
+      crossing, relative to mount start.
+    - strength (subtle | standard, default standard): band opacity and
+      highlight bloom multiplier. subtle is the barely-there pass.
+    - accent (green | blue | violet, default green): warm tint inside the
+      band and the highlight blooms. green maps to --brand, blue to
+      --accent, violet to --accent-2.
+    - exit (none | fade | up, default none): outgoing transition. none
+      holds the settled key (frame roots own transitions).
+
+  Envelope (fixed IN/OUT, elastic HOLD only, never gsap.timeScale()):
+    IN       = sweep_at + 1.60s crossing + 0.55s settle to the resting key
+    HOLD     = elastic = max(0, D - (IN + OUT)); the settled key is still
+    OUT      = 0.50s when exit is fade or up, 0 when exit is none
+    If D < IN + OUT, IN and OUT scale down together so IN + OUT == D.
+
+  Sync point: sweep-land when the light reaches its resting key (3.05s at
+  defaults). Dispatches a bubbling hf:sfx CustomEvent with id
+  "light-settle-soft" there. This primitive never plays audio.
+
+  Mount contract: MOUNTABLE SUB-COMPOSITION. The runtime clones only
+  <template> contents; #root fills the host box (inset:0, container-type:
+  size), has no data-width/data-height, and registers one paused timeline
+  under the literal "light-sweep-pass" key. Variables come from
+  window.__hyperframes.getVariables().
+-->
+<html
+  lang="en"
+  data-composition-id="light-sweep-pass"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "angle", "type": "number", "role": "style", "label": "Angle", "description": "Band and highlight gradient angle in degrees.", "default": 115, "min": 60, "max": 160, "step": 1, "unit": "deg" },
+    { "id": "sweep_at", "type": "number", "role": "timing", "label": "Sweep start", "description": "Seconds after mount start when the band starts crossing.", "default": 0.9, "min": 0, "max": 8, "step": 0.05, "unit": "s" },
+    { "id": "strength", "type": "enum", "role": "style", "label": "Strength", "description": "Band opacity and highlight bloom multiplier.", "default": "standard", "options": [{ "value": "subtle", "label": "Subtle" }, { "value": "standard", "label": "Standard" }] },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Tint inside the band and the highlight blooms.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Outgoing transition. None holds the settled key.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Light Sweep Pass</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="light-sweep-pass" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          /* --light-x starts off-frame left; the timeline is its only
+             writer. --lsp-angle and --lsp-strength are set once at mount. */
+          #root {
+            --light-x: -35;
+            --lsp-angle: 115;
+            --lsp-strength: 1;
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            background: var(--bg, #0b0c0e);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+          }
+
+          .lsp-clip,
+          .lsp-stage,
+          .lsp-scene,
+          .lsp-ambient,
+          .lsp-band {
+            position: absolute;
+            inset: 0;
+          }
+
+          .lsp-clip {
+            overflow: hidden;
+          }
+
+          .lsp-stage {
+            opacity: 0;
+          }
+
+          .lsp-scene {
+            overflow: hidden;
+          }
+
+          /* Every lit element derives its whole treatment from the ONE
+             --light-x scalar: distance d to the band, |d| via max(d, -d),
+             a 0..1 proximity bloom, a shadow that slides away from the
+             light and deepens as the band passes. Elements opt in with
+             data-lit and an inline --lsp-x (center along the sweep axis,
+             percent of frame width). */
+          [data-lit] {
+            --lsp-d: calc(var(--light-x) - var(--lsp-x, 50));
+            --lsp-abs: max(var(--lsp-d), calc(-1 * var(--lsp-d)));
+            --lsp-glow: clamp(0, calc(1 - var(--lsp-abs) / 26), 1);
+            position: relative;
+            box-shadow: calc(clamp(-30, var(--lsp-d), 30) * -0.05cqw)
+              calc(0.8cqh + var(--lsp-glow) * 0.7cqh) calc(2.2cqh + var(--lsp-glow) * 2.4cqh)
+              color-mix(in srgb, #000000 26%, transparent);
+          }
+
+          /* The highlight bloom: a static angle-matched gradient whose
+             opacity is the proximity term. No transitions, no tweens. */
+          [data-lit]::after {
+            content: "";
+            position: absolute;
+            inset: 0;
+            border-radius: inherit;
+            pointer-events: none;
+            background: linear-gradient(
+              calc(var(--lsp-angle) * 1deg),
+              color-mix(in srgb, #ffffff 86%, var(--lsp-accent, #22c55e)) 0%,
+              transparent 62%
+            );
+            opacity: calc(var(--lsp-glow) * 0.32 * var(--lsp-strength));
+          }
+
+          /* Ambient lift: the scene starts a touch dim and brightens for
+             good once the band has entered the frame. Monotonic in
+             --light-x, so the settle never re-dims it. */
+          .lsp-ambient {
+            pointer-events: none;
+            background: #000000;
+            opacity: calc(clamp(0, (26 - var(--light-x)) / 130, 0.16) * var(--lsp-strength));
+          }
+
+          /* The band: an oversized angle-matched gradient sheet that only
+             ever translates along X, driven by the same scalar. Screen
+             blend keeps it a light, never a paint. */
+          .lsp-band {
+            inset: -55%;
+            pointer-events: none;
+            mix-blend-mode: screen;
+            background: linear-gradient(
+              calc(var(--lsp-angle) * 1deg),
+              transparent 36%,
+              color-mix(in srgb, #ffffff 24%, transparent) 46%,
+              color-mix(in srgb, #ffffff 78%, var(--lsp-accent, #22c55e)) 50%,
+              color-mix(in srgb, #ffffff 24%, transparent) 54%,
+              transparent 64%
+            );
+            opacity: 0;
+            transform: translateX(calc((var(--light-x) - 50) * 1.4cqw));
+            will-change: transform, opacity;
+          }
+
+          #root[data-strength="subtle"] {
+            --lsp-strength: 0.55;
+          }
+
+          /* ---------- default slot scene: token hero + three cards ---------- */
+
+          .lsp-default {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            grid-template-rows: auto auto;
+            align-content: center;
+            justify-items: center;
+            row-gap: var(--space-3, 5cqh);
+            padding: var(--space-3, 6cqh) 10cqw;
+            background: linear-gradient(
+              calc(var(--lsp-angle) * 1deg),
+              color-mix(in srgb, var(--fg, #f8fafc) 3%, var(--bg, #0b0c0e)) 0%,
+              var(--bg, #0b0c0e) 55%,
+              color-mix(in srgb, #000000 6%, var(--bg, #0b0c0e)) 100%
+            );
+          }
+
+          .lsp-hero {
+            display: grid;
+            align-content: center;
+            row-gap: var(--space-2, 2.4cqh);
+            width: 58cqw;
+            height: 30cqh;
+            padding: var(--space-3, 4cqh) var(--space-3, 3cqw);
+            border: 0.16cqw solid var(--border, #343a46);
+            border-radius: var(--radius, 2.4cqmin);
+            background: var(--surface, #14171c);
+          }
+
+          .lsp-hero-bar {
+            width: 46%;
+            height: 4.6cqh;
+            border-radius: 1.4cqh;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 82%, var(--surface, #14171c));
+          }
+
+          .lsp-hero-line {
+            height: 2.2cqh;
+            border-radius: 1.1cqh;
+            background: var(--muted, #94a3b8);
+            opacity: 0.55;
+          }
+
+          .lsp-hero-line:nth-of-type(3) {
+            width: 72%;
+          }
+
+          .lsp-row {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            column-gap: var(--space-2, 2cqw);
+            width: 58cqw;
+          }
+
+          .lsp-card {
+            display: grid;
+            align-content: start;
+            row-gap: var(--space-1, 1.6cqh);
+            height: 24cqh;
+            padding: var(--space-2, 2.6cqh) var(--space-2, 1.6cqw);
+            border: 0.16cqw solid var(--border, #343a46);
+            border-radius: var(--radius, 2.4cqmin);
+            background: var(--surface, #14171c);
+          }
+
+          .lsp-dot {
+            width: 3.4cqh;
+            height: 3.4cqh;
+            border-radius: 50%;
+            background: color-mix(in srgb, var(--lsp-accent, #22c55e) 72%, var(--surface, #14171c));
+          }
+
+          .lsp-line {
+            height: 1.9cqh;
+            border-radius: 1cqh;
+            background: var(--muted, #94a3b8);
+            opacity: 0.5;
+          }
+
+          .lsp-line:nth-of-type(3) {
+            width: 64%;
+          }
+        </style>
+
+        <div
+          id="light-sweep-pass-clip"
+          class="lsp-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="lsp-stage">
+            <div class="lsp-scene" data-slot="scene">
+              <!-- SLOT "scene": replace the children of this element with
+                   your own full-bleed content. Mark elements that should
+                   catch the light with data-lit and give each an inline
+                   style="--lsp-x: NN" (center along the sweep, percent). -->
+              <div class="lsp-default" aria-hidden="true">
+                <div class="lsp-hero" data-lit style="--lsp-x: 50">
+                  <div class="lsp-hero-bar"></div>
+                  <div class="lsp-hero-line"></div>
+                  <div class="lsp-hero-line"></div>
+                </div>
+                <div class="lsp-row">
+                  <div class="lsp-card" data-lit style="--lsp-x: 31">
+                    <div class="lsp-dot"></div>
+                    <div class="lsp-line"></div>
+                    <div class="lsp-line"></div>
+                  </div>
+                  <div class="lsp-card" data-lit style="--lsp-x: 50">
+                    <div class="lsp-dot"></div>
+                    <div class="lsp-line"></div>
+                    <div class="lsp-line"></div>
+                  </div>
+                  <div class="lsp-card" data-lit style="--lsp-x: 69">
+                    <div class="lsp-dot"></div>
+                    <div class="lsp-line"></div>
+                    <div class="lsp-line"></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="lsp-ambient" aria-hidden="true"></div>
+            <div class="lsp-band" aria-hidden="true"></div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            // Literal id: mount flattening strips data-composition-id from the
+            // live root before this timeline registers.
+            var compositionId = "light-sweep-pass";
+            var stage = root.querySelector(".lsp-stage");
+            var band = root.querySelector(".lsp-band");
+
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            function clampNumber(raw, fallback, min, max) {
+              var value = raw == null ? fallback : Number(raw);
+              if (!Number.isFinite(value)) return fallback;
+              return Math.max(min, Math.min(max, value));
+            }
+
+            var angle = clampNumber(vars.angle, 115, 60, 160);
+            var sweepAt = clampNumber(vars.sweep_at, 0.9, 0, 8);
+            var strength = vars.strength === "subtle" ? "subtle" : "standard";
+            var accentTokens = {
+              green: "var(--brand, #22c55e)",
+              blue: "var(--accent, #38bdf8)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentTokens, vars.accent)
+              ? vars.accent
+              : "green";
+            // The bundler mirrors composition variables as scoped CSS custom
+            // props, so this unit's own accent variable can shadow the contract
+            // --accent token ("blue" is a valid CSS color). When the shadow is
+            // present, fall back to the literal contract value.
+            var shadowedAccent = getComputedStyle(root).getPropertyValue("--accent").trim();
+            if (
+              shadowedAccent === "green" ||
+              shadowedAccent === "blue" ||
+              shadowedAccent === "violet"
+            ) {
+              accentTokens.blue = "#38bdf8";
+            }
+            // INVARIANT: only none | fade | up reaches the timeline.
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            root.dataset.strength = strength;
+            root.style.setProperty("--lsp-angle", String(angle));
+            root.style.setProperty("--lsp-accent", accentTokens[accent]);
+
+            // RETIME RANGE: fixed IN and OUT scale together only when D is
+            // too short. HOLD is the sole elastic phase. Never timeScale().
+            var SWEEP_BASE = 1.6;
+            var SETTLE_BASE = 0.55;
+            var STAGE_IN_BASE = 0.5;
+            var IN_BASE = sweepAt + SWEEP_BASE + SETTLE_BASE;
+            var OUT_BASE = exit === "none" ? 0 : 0.5;
+
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var totalBase = IN_BASE + OUT_BASE;
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var SWEEP = SWEEP_BASE * scale;
+            var SETTLE = SETTLE_BASE * scale;
+            var STAGE_IN = Math.min(STAGE_IN_BASE * scale, IN_BASE * scale);
+            var SWEEP_AT = sweepAt * scale;
+            var SWEEP_END = SWEEP_AT + SWEEP;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var OUT_START = IN + HOLD;
+
+            // The light's authored waypoints: parked off-frame left, fully
+            // crossed off-frame right, then the resting key in the upper
+            // third of the travel. All in --light-x units (frame percent).
+            var LIGHT_START = -35;
+            var LIGHT_CROSSED = 118;
+            var LIGHT_REST = 62;
+
+            function fireSfx(id, t) {
+              root.dispatchEvent(
+                new CustomEvent("hf:sfx", { detail: { id: id, t: t }, bubbles: true }),
+              );
+            }
+
+            // ONE proxy owns --light-x; every highlight, shadow, ambient
+            // lift, and the band transform read it via calc in static CSS.
+            var light = { x: LIGHT_START };
+            function writeLight() {
+              root.style.setProperty("--light-x", light.x.toFixed(3));
+            }
+            writeLight();
+
+            gsap.set(stage, { opacity: 0, y: "1.5cqh" });
+            gsap.set(band, { autoAlpha: 0 });
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: the scene settles first, then one confident crossing.
+            tl.to(stage, { opacity: 1, y: "0cqh", duration: STAGE_IN, ease: "power2.out" }, 0);
+            tl.fromTo(
+              light,
+              { x: LIGHT_START },
+              {
+                x: LIGHT_CROSSED,
+                duration: SWEEP,
+                ease: "sine.inOut",
+                onUpdate: writeLight,
+              },
+              SWEEP_AT,
+            );
+            tl.fromTo(
+              band,
+              { autoAlpha: 0 },
+              {
+                autoAlpha: 1,
+                duration: Math.min(0.3 * scale, SWEEP),
+                ease: "power1.out",
+                immediateRender: false,
+              },
+              SWEEP_AT,
+            );
+            tl.to(
+              band,
+              { autoAlpha: 0, duration: 0.35 * scale, ease: "power1.in" },
+              Math.max(SWEEP_AT, SWEEP_END - 0.35 * scale),
+            );
+
+            // The settle: the band is gone; the key light glides back to its
+            // resting position and the per-element shading follows it there.
+            tl.to(
+              light,
+              { x: LIGHT_REST, duration: SETTLE, ease: "power2.out", onUpdate: writeLight },
+              SWEEP_END,
+            );
+            tl.call(
+              function () {
+                fireSfx("light-settle-soft", IN);
+              },
+              [],
+              IN,
+            );
+
+            // HOLD: deliberately still under the settled key.
+
+            // OUT: only when the exit variable asks for one.
+            if (exit !== "none") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+              if (exit === "up") {
+                tl.to(stage, { y: "-6cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              }
+            }
+
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/line-by-line-slide/__hf-variables-preview.html b/docs/public/catalog/components/line-by-line-slide/__hf-variables-preview.html
new file mode 100644
index 0000000000..230268349a
--- /dev/null
+++ b/docs/public/catalog/components/line-by-line-slide/__hf-variables-preview.html
@@ -0,0 +1,78 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Line-by-Line Slide variables preview</title>
+    <style>
+      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #f7f7f8; }
+      #hf-vars-root { position: relative; width: 1920px; height: 1080px; }
+      #hf-vars-mount { position: absolute; inset: 0; display: grid; place-items: center; }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  </head>
+  <body>
+    <div id="hf-vars-root" data-composition-id="line-by-line-slide-variables-preview" data-start="0" data-width="1920" data-height="1080" data-duration="5" data-fps="30">
+      <div id="hf-vars-mount" class="clip" data-composition-id="line-by-line-slide" data-composition-src="./line-by-line-slide.html" data-start="0" data-duration="5" data-track-index="0" data-width="1920" data-height="1080"></div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["line-by-line-slide-variables-preview"] = gsap.timeline({ paused: true });
+    </script>
+    <script>
+      (function () {
+        var mount = document.getElementById("hf-vars-mount");
+        // The mount is filled asynchronously, and the demo script selects
+        // what it fills it with, so it cannot run before then.
+        var observer = new MutationObserver(build);
+        observer.observe(mount, { childList: true, subtree: true });
+        build();
+        function build() {
+          if (!mount.firstElementChild) return;
+          observer.disconnect();
+
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-line-by-line-slide span",
+          { opacity: 0, "--hf-line-x": "-36px", "--hf-line-y": "18px", "--hf-line-blur": "6px" },
+          {
+            opacity: 1,
+            "--hf-line-x": "0px",
+            "--hf-line-y": "0px",
+            "--hf-line-blur": "0px",
+            duration: 0.34,
+            stagger: 0.08,
+            ease: "power3.out",
+          },
+          startTime,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["line-by-line-slide-demo"] = tl;
+          var child = window.__timelines["line-by-line-slide-demo"];
+          delete window.__timelines["line-by-line-slide-demo"];
+          if (!child || typeof child.paused !== "function") return;
+          child.paused(false);
+          window.__timelines["line-by-line-slide-variables-preview"].add(child, 0);
+        }
+      })();
+    </script>
+<script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "line-by-line-slide.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/line-by-line-slide/demo.html b/docs/public/catalog/components/line-by-line-slide/demo.html
new file mode 100644
index 0000000000..4a301b740a
--- /dev/null
+++ b/docs/public/catalog/components/line-by-line-slide/demo.html
@@ -0,0 +1,111 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Line-by-Line Slide - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        min-width: 900px;
+        min-height: 500px;
+        padding: 64px;
+        /* ponytail: scale wrapper — not a GSAP target, so CSS transform is safe */
+        transform: scale(2.8);
+        transform-origin: center center;
+      }
+      .hf-remocn-line-by-line-slide {
+        color: #18181b;
+        font-family: Inter, system-ui, sans-serif;
+        font-weight: 900;
+        letter-spacing: -0.04em;
+      }
+      .hf-remocn-line-by-line-slide {
+        display: grid;
+        gap: 10px;
+        font-size: 64px;
+        line-height: 1.05;
+        overflow: hidden;
+      }
+      .hf-remocn-line-by-line-slide span {
+        display: block;
+        transform: translate(var(--hf-line-x, 0px), var(--hf-line-y, 0px));
+        filter: blur(var(--hf-line-blur, 0px));
+        will-change: transform, filter, opacity;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="line-by-line-slide-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-line-by-line-slide">
+          <span>Design faster</span><span>Render cleaner</span><span>Ship louder</span>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-line-by-line-slide span",
+          { opacity: 0, "--hf-line-x": "-36px", "--hf-line-y": "18px", "--hf-line-blur": "6px" },
+          {
+            opacity: 1,
+            "--hf-line-x": "0px",
+            "--hf-line-y": "0px",
+            "--hf-line-blur": "0px",
+            duration: 0.34,
+            stagger: 0.08,
+            ease: "power3.out",
+          },
+          startTime,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["line-by-line-slide-demo"] = tl;
+      </script>
+    </div>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "line-by-line-slide.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/line-by-line-slide/line-by-line-slide.html b/docs/public/catalog/components/line-by-line-slide/line-by-line-slide.html
new file mode 100644
index 0000000000..9f8fff93d1
--- /dev/null
+++ b/docs/public/catalog/components/line-by-line-slide/line-by-line-slide.html
@@ -0,0 +1,105 @@
+<!--
+  Line-by-Line Slide - remocn typography primitive for HyperFrames.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes a custom property the CSS above
+  consumes. The timeline recipe below is untouched by them: it keeps driving
+  one sideways offset, and direction decides which way that offset points.
+
+    - size (compact | standard | display, default standard): type size of the
+      stack, 40px, 52px, or 68px.
+    - tone (ink | paper | accent, default ink): line colour. ink is near-black
+      for light frames, paper near-white for dark ones, accent rides the
+      brand token.
+    - density (fine | standard | coarse, default standard): the gap between
+      lines, 4px, 10px, or 20px.
+    - direction (left | right, default left): which side the lines slide in
+      from. left keeps the original entry, right mirrors it.
+
+  On every default the result is identical to the original: near-black 52px
+  lines, 10px apart, entering from the left.
+-->
+
+<div
+  class="hf-remocn-line-by-line-slide"
+  data-composition-variables='[
+    {"id": "size", "type": "enum", "role": "layout", "label": "Size", "description": "Type size of the whole stack.", "default": "standard", "options": [{"value": "compact", "label": "Compact"}, {"value": "standard", "label": "Standard"}, {"value": "display", "label": "Display"}]},
+    {"id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Line colour: ink for light frames, paper for dark ones, accent rides the brand token.", "default": "ink", "options": [{"value": "ink", "label": "Ink"}, {"value": "paper", "label": "Paper"}, {"value": "accent", "label": "Accent"}]},
+    {"id": "density", "type": "enum", "role": "layout", "label": "Density", "description": "The gap between lines, from a tight block to an airy stack.", "default": "standard", "options": [{"value": "fine", "label": "Fine"}, {"value": "standard", "label": "Standard"}, {"value": "coarse", "label": "Coarse"}]},
+    {"id": "direction", "type": "enum", "role": "motion", "label": "Direction", "description": "Which side the lines slide in from as the timeline drives the offset.", "default": "left", "options": [{"value": "left", "label": "Left"}, {"value": "right", "label": "Right"}]}
+  ]'
+>
+  <span>Design faster</span><span>Render cleaner</span><span>Ship louder</span>
+</div>
+
+<style>
+  .hf-remocn-line-by-line-slide {
+    color: var(--hf-line-color, #18181b);
+    font-family: Inter, system-ui, sans-serif;
+    font-weight: 900;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-line-by-line-slide {
+    display: grid;
+    gap: var(--hf-line-gap, 10px);
+    font-size: var(--hf-line-size, 52px);
+    line-height: 1;
+    overflow: hidden;
+  }
+  .hf-remocn-line-by-line-slide span {
+    display: block;
+    transform: translate(
+      calc(var(--hf-line-x, 0px) * var(--hf-line-axis-x, 1)),
+      var(--hf-line-y, 0px)
+    );
+    filter: blur(var(--hf-line-blur, 0px));
+    will-change: transform, filter, opacity;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var sizes = { compact: "40px", standard: "52px", display: "68px" };
+    var tones = {
+      ink: "#18181b",
+      paper: "#fafafa",
+      accent: "var(--brand, #34d399)",
+    };
+    var gaps = { fine: "4px", standard: "10px", coarse: "20px" };
+    var axes = { left: 1, right: -1 };
+
+    var size = sizes[pick(sizes, vars.size, "standard")];
+    var tone = tones[pick(tones, vars.tone, "ink")];
+    var gap = gaps[pick(gaps, vars.density, "standard")];
+    var axis = axes[pick(axes, vars.direction, "left")];
+
+    var roots = document.querySelectorAll(".hf-remocn-line-by-line-slide");
+    for (var i = 0; i < roots.length; i += 1) {
+      var root = roots[i];
+      root.style.setProperty("--hf-line-size", size);
+      root.style.setProperty("--hf-line-color", tone);
+      root.style.setProperty("--hf-line-gap", gap);
+      root.style.setProperty("--hf-line-axis-x", String(axis));
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-line-by-line-slide span', { opacity: 0, '--hf-line-x': '-36px', '--hf-line-y': '18px', '--hf-line-blur': '6px' }, { opacity: 1, '--hf-line-x': '0px', '--hf-line-y': '0px', '--hf-line-blur': '0px', duration: 0.34, stagger: 0.08, ease: 'power3.out' }, startTime);
+-->
diff --git a/docs/public/catalog/components/line-swap/README.md b/docs/public/catalog/components/line-swap/README.md
new file mode 100644
index 0000000000..07d00ca0c3
--- /dev/null
+++ b/docs/public/catalog/components/line-swap/README.md
@@ -0,0 +1,38 @@
+# line-swap
+
+A masked full-line beat replacement. `line_a` rises into an overflow-hidden mask and holds center; on the swap beat it exits up through the mask as `line_b` enters bottom-up on the same beat (single restrained slam, smooth ease, no overshoot). Optionally an accent underline draws left to right beneath `underline_word` of `line_b` after it lands. Generalizes flagship frame 01.
+
+3.5s authored, elastic HOLD, exit `none` by default.
+
+## Variables
+
+| id               | type   | default                               | notes                                                                                                                     |
+| ---------------- | ------ | ------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
+| `line_a`         | string | `Everyone promised you AI.`           | Holds center, exits up on the beat.                                                                                       |
+| `line_b`         | string | `Almost nobody promised you control.` | Enters bottom-up on the beat, then holds. Font size auto-fits to the longer line.                                         |
+| `swap_at`        | number | `1.5`                                 | Beat second from mount start. Clamped so line A fully arrives first and the swap plus underline complete before any exit. |
+| `underline_word` | string | `control`                             | First case-insensitive substring match in `line_b` gets the underline. Empty or unmatched disables it.                    |
+| `accent`         | enum   | `green`                               | Underline color: green rides `--brand`, blue rides `--accent`, violet rides `--accent-2`.                                 |
+| `exit`           | enum   | `none`                                | `none` holds until the cut; `fade` departs opacity-only; `up` fades while rising.                                         |
+
+## Mount
+
+```html
+<div
+  class="clip"
+  data-composition-id="line-swap"
+  data-composition-src="./line-swap.html"
+  data-variable-values='{"line_a":"Everyone ships demos.","line_b":"Almost nobody ships proof.","underline_word":"proof","swap_at":1.3,"accent":"blue"}'
+  data-start="0"
+  data-duration="3.5"
+  data-track-index="0"
+></div>
+```
+
+Elastic root: no `data-width`/`data-height`; it fills whatever box the host clip gives it. Timeline registers under the literal `line-swap` key.
+
+## Notes
+
+- Both lines are nowrap and share one deterministic character-count font fit, so the swap never reflows.
+- The underline is the flagship scaleX bar draw (left transform-origin, explicit 0 to 1 endpoints), hidden until the cue and seek-safe in both directions.
+- The hold after the underline lands is completely still; frame roots own transitions.
diff --git a/docs/public/catalog/components/line-swap/demo.html b/docs/public/catalog/components/line-swap/demo.html
new file mode 100644
index 0000000000..458c3bc824
--- /dev/null
+++ b/docs/public/catalog/components/line-swap/demo.html
@@ -0,0 +1,97 @@
+<!doctype html>
+<!--
+  line-swap demo. This standalone composition mounts the primitive through
+  data-composition-src. Non-default lines, swap beat, underline word, and
+  accent prove the variable path while the primitive stays elastic to its
+  host box.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Line Swap Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #0b0c0e);
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --brand: #71f5a7;
+        --accent: #61a8ff;
+        --accent-2: #c5a3ff;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+
+      .mount-box {
+        position: absolute;
+        width: 80%;
+        height: 52%;
+        left: 10%;
+        top: 24%;
+        container-type: size;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="line-swap-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="3.5"
+      data-fps="30"
+    >
+      <div
+        id="line-swap-mount"
+        class="mount-box clip"
+        data-composition-id="line-swap"
+        data-composition-src="./line-swap.html"
+        data-variable-values='{"line_a":"Everyone ships demos.","line_b":"Almost nobody ships proof.","underline_word":"proof","swap_at":1.3,"accent":"blue"}'
+        data-start="0"
+        data-duration="3.5"
+        data-track-index="0"
+        data-width="1536"
+        data-height="562"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["line-swap-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "line-swap.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/line-swap/line-swap.html b/docs/public/catalog/components/line-swap/line-swap.html
new file mode 100644
index 0000000000..811162d4a2
--- /dev/null
+++ b/docs/public/catalog/components/line-swap/line-swap.html
@@ -0,0 +1,309 @@
+<!doctype html>
+<!--
+  line-swap: HyperFrames video primitive (text effects / beat replacement)
+
+  A masked full-line beat replacement, generalizing flagship frame 01: line_a
+  rises into an overflow-hidden mask and holds center, then on the swap beat
+  it exits up through the mask as line_b enters bottom-up on the same beat.
+  One restrained slam, smooth ease, no overshoot. Optionally an accent
+  underline draws left to right beneath underline_word of line_b after it
+  lands (scaleX from a left origin, the flagship bar draw).
+
+  Variables:
+    line_a (string): the first line, replaced on the beat.
+    line_b (string): the line that lands and holds.
+    swap_at (seconds): the beat, relative to mount start. Clamped so line_a
+      finishes entering first and line_b plus the underline complete before
+      any exit begins.
+    underline_word (string): first case-insensitive substring match inside
+      line_b gets the underline. Empty or unmatched disables it.
+    accent (green | blue | violet): underline color via the contract token map.
+    exit (none | fade | up, default none): frame roots own transitions;
+      holds end films.
+
+  Envelope, fixed IN and OUT with elastic HOLD only (never time-scaled):
+    IN_A_BASE  = 0.50s  line_a enters bottom-up through the mask
+    SWAP span  = 0.72s  line_a up-and-out (0.35s) overlapping line_b in
+                        (starts 0.22s after the beat, lands 0.50s later)
+    UL span    = 0.60s  0.15s beat after the land, then a 0.45s draw
+                        (0 when underline_word is empty or unmatched)
+    HOLD       = max(0, D - phases), completely still
+    OUT_BASE   = 0s for exit none, otherwise 0.45s
+    If D is shorter than the fixed phases, they compress together.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, has no data-width or
+  data-height, and registers one paused timeline under the literal
+  line-swap key.
+-->
+<html
+  lang="en"
+  data-composition-id="line-swap"
+  data-composition-duration="3.5"
+  data-composition-variables='[
+    { "id": "line_a", "type": "string", "role": "content", "label": "Line A", "description": "First line; holds center inside the mask, then exits up on the swap beat.", "default": "Everyone promised you AI." },
+    { "id": "line_b", "type": "string", "role": "content", "label": "Line B", "description": "Replacement line; enters bottom-up on the swap beat and holds.", "default": "Almost nobody promised you control." },
+    { "id": "swap_at", "type": "number", "role": "timing", "label": "Swap at", "description": "Second (from mount start) of the beat replacement. Clamped so the swap and underline complete before any exit.", "default": 1.5, "min": 0, "step": 0.1, "unit": "s" },
+    { "id": "underline_word", "type": "string", "role": "content", "label": "Underline word", "description": "First case-insensitive substring match in line B gets the accent underline after landing. Empty disables it.", "default": "control" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Underline color from the contract token map.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the landed line holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Line Swap</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="line-swap" data-duration="3.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            background: var(--bg, #0b0c0e);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .ls-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+          }
+
+          .ls-stage {
+            width: 94cqw;
+            will-change: transform, opacity;
+          }
+
+          /* Beat mask: both lines live inside; the swap slides through it. */
+          .ls-mask {
+            position: relative;
+            width: 100%;
+            height: calc(var(--ls-font-size, min(7cqw, 16cqh)) * 1.42);
+            overflow: hidden;
+          }
+
+          .ls-line {
+            position: absolute;
+            inset: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: var(--ls-font-size, min(7cqw, 16cqh));
+            font-weight: 600;
+            line-height: 1;
+            letter-spacing: -0.02em;
+            white-space: nowrap;
+            will-change: transform;
+          }
+
+          /* One inline wrapper per line: a bare text node next to the
+             underline span would become separate flex items and the boundary
+             space would collapse ("youcontrol."). */
+          .ls-line-inner {
+            display: inline;
+          }
+
+          .ls-ul-wrap {
+            position: relative;
+            display: inline-block;
+            white-space: nowrap;
+          }
+
+          .ls-underline {
+            position: absolute;
+            left: 0.02em;
+            right: 0.02em;
+            bottom: -0.14em;
+            height: 0.055em;
+            border-radius: 0.03em;
+            transform-origin: left center;
+          }
+        </style>
+
+        <div
+          id="line-swap-clip"
+          class="ls-clip clip"
+          data-start="0"
+          data-duration="3.5"
+          data-track-index="0"
+        >
+          <div class="ls-stage" role="img">
+            <div class="ls-mask">
+              <div class="ls-line ls-line-a"><span class="ls-line-inner"></span></div>
+              <div class="ls-line ls-line-b"><span class="ls-line-inner"></span></div>
+            </div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            // Literal key: the flattening step strips data-composition-id off
+            // the mounted root, so reading it back would register "null".
+            var compositionId = "line-swap";
+            var stage = root.querySelector(".ls-stage");
+            var lineAEl = root.querySelector(".ls-line-a");
+            var lineBEl = root.querySelector(".ls-line-b");
+            var lineAInner = lineAEl.querySelector(".ls-line-inner");
+            var lineBInner = lineBEl.querySelector(".ls-line-inner");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            function asLine(value, fallback) {
+              return value == null ? fallback : String(value).trim().replace(/\s+/g, " ");
+            }
+            var lineA = asLine(vars.line_a, "Everyone promised you AI.");
+            var lineB = asLine(vars.line_b, "Almost nobody promised you control.");
+            var underlineWord = asLine(vars.underline_word, "control");
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            lineAInner.textContent = lineA;
+
+            // Split line_b around the first case-insensitive underline match.
+            // textContent nodes only, never innerHTML.
+            var matchIndex =
+              underlineWord.length > 0
+                ? lineB.toLowerCase().indexOf(underlineWord.toLowerCase())
+                : -1;
+            var underlineEl = null;
+            if (matchIndex >= 0) {
+              var before = lineB.slice(0, matchIndex);
+              var matched = lineB.slice(matchIndex, matchIndex + underlineWord.length);
+              var after = lineB.slice(matchIndex + underlineWord.length);
+              if (before) lineBInner.appendChild(document.createTextNode(before));
+
+              var wrap = document.createElement("span");
+              wrap.className = "ls-ul-wrap";
+              wrap.appendChild(document.createTextNode(matched));
+              underlineEl = document.createElement("span");
+              underlineEl.className = "ls-underline";
+              underlineEl.setAttribute("aria-hidden", "true");
+              // style.background, not a class: var() resolves at point of use.
+              underlineEl.style.background = accentColors[accent];
+              wrap.appendChild(underlineEl);
+              lineBInner.appendChild(wrap);
+              if (after) lineBInner.appendChild(document.createTextNode(after));
+            } else {
+              lineBInner.textContent = lineB;
+            }
+            stage.setAttribute("aria-label", lineA + " " + lineB);
+
+            // Deterministic character-count fit against the longer line; both
+            // lines are nowrap, so the fit keeps them inside the stage.
+            var characters = Math.max(1, Array.from(lineA).length, Array.from(lineB).length);
+            var fitted = Math.max(3.4, Math.min(9, 168 / characters));
+            root.style.setProperty("--ls-font-size", "min(" + fitted.toFixed(3) + "cqw, 16cqh)");
+
+            // RETIME RANGE: fixed phases; HOLD is the only elastic span.
+            var IN_A_BASE = 0.5;
+            var EXIT_A_BASE = 0.35;
+            var LAG_BASE = 0.22; // line_b starts this long after the beat
+            var IN_B_BASE = 0.5;
+            var UL_BEAT_BASE = 0.15;
+            var UL_BASE = underlineEl ? 0.45 : 0;
+            var OUT_BASE = exit === "none" ? 0 : 0.45;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "3.5"));
+            var swapSpanBase = LAG_BASE + IN_B_BASE;
+            var ulSpanBase = underlineEl ? UL_BEAT_BASE + UL_BASE : 0;
+            var totalBase = IN_A_BASE + swapSpanBase + ulSpanBase + OUT_BASE;
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN_A = IN_A_BASE * scale;
+            var EXIT_A = EXIT_A_BASE * scale;
+            var LAG = LAG_BASE * scale;
+            var IN_B = IN_B_BASE * scale;
+            var UL_BEAT = UL_BEAT_BASE * scale;
+            var UL = UL_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var OUT_START = duration - OUT;
+
+            var swapAtRaw = Number(vars.swap_at);
+            var swapAt = Number.isFinite(swapAtRaw) ? Math.max(0, swapAtRaw) : 1.5;
+            // line_a fully arrives before the beat; the swap and the
+            // underline always complete before the exit begins.
+            swapAt = Math.min(swapAt, Math.max(IN_A, OUT_START - (LAG + IN_B + UL_BEAT + UL)));
+            swapAt = Math.max(swapAt, IN_A);
+            var landB = swapAt + LAG + IN_B;
+
+            gsap.set(lineBEl, { yPercent: 115 });
+            if (underlineEl) gsap.set(underlineEl, { scaleX: 0 });
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: line_a enters bottom-up through the mask. One move.
+            tl.fromTo(
+              lineAEl,
+              { yPercent: 115 },
+              { yPercent: 0, duration: IN_A, ease: "power4.out" },
+              0,
+            );
+
+            // SWAP: the beat replacement. line_a exits up through the mask as
+            // line_b slides in bottom-up. Single restrained slam, smooth ease.
+            tl.fromTo(
+              lineAEl,
+              { yPercent: 0 },
+              { yPercent: -115, duration: EXIT_A, ease: "power2.in", immediateRender: false },
+              swapAt,
+            );
+            tl.fromTo(
+              lineBEl,
+              { yPercent: 115 },
+              { yPercent: 0, duration: IN_B, ease: "power4.out" },
+              swapAt + LAG,
+            );
+
+            // UNDERLINE: accent bar draws left to right after line_b lands.
+            if (underlineEl) {
+              tl.fromTo(
+                underlineEl,
+                { scaleX: 0 },
+                { scaleX: 1, duration: UL, ease: "power2.out" },
+                landB + UL_BEAT,
+              );
+            }
+
+            // HOLD: completely still.
+
+            // OUT: optional departure; exit none holds until the frame cuts.
+            if (exit === "fade") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "up") {
+              tl.to(stage, { opacity: 0, y: "-7cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/live-code-compilation/demo.html b/docs/public/catalog/components/live-code-compilation/demo.html
new file mode 100644
index 0000000000..1d274c8d70
--- /dev/null
+++ b/docs/public/catalog/components/live-code-compilation/demo.html
@@ -0,0 +1,158 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Live Code Compilation - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+        /* ponytail: scale wrapper (not a GSAP target) to fill ~62% of frame */
+        transform: scale(1.62);
+      }
+      .hf-remocn-live-code-compilation {
+        --hf-accent: #2563eb;
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-live-code-compilation {
+        width: 760px;
+        border-radius: 24px;
+        overflow: hidden;
+        background: #0f172a;
+        color: #dbeafe;
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+      }
+      .hf-remocn-live-code-compilation .chrome {
+        height: 52px;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 0 20px;
+        background: #111827;
+        color: #94a3b8;
+        font-size: 15px;
+        letter-spacing: 0.01em;
+      }
+      .hf-remocn-live-code-compilation .dot {
+        width: 11px;
+        height: 11px;
+        border-radius: 999px;
+        background: #ef4444;
+        box-shadow:
+          18px 0 #f59e0b,
+          36px 0 #22c55e;
+      }
+      .hf-remocn-live-code-compilation .body {
+        display: grid;
+        grid-template-columns: 210px 1fr;
+        min-height: 340px;
+      }
+      .hf-remocn-live-code-compilation .files {
+        padding: 26px 24px;
+        border-right: 1px solid rgba(148, 163, 184, 0.18);
+        color: #94a3b8;
+        font-size: 14px;
+        line-height: 2;
+      }
+      .hf-remocn-live-code-compilation .editor {
+        padding: 26px 24px;
+        display: grid;
+        gap: 16px;
+      }
+      .hf-remocn-live-code-compilation .line {
+        display: block;
+        height: 18px;
+        border-radius: 999px;
+        background: linear-gradient(90deg, #38bdf8, #a78bfa);
+        transform: scaleX(var(--hf-line, 1));
+        transform-origin: left center;
+        opacity: var(--hf-line-opacity, 1);
+      }
+      .hf-remocn-live-code-compilation .terminal {
+        padding: 20px 24px 28px;
+        border-top: 1px solid rgba(148, 163, 184, 0.18);
+        color: #86efac;
+        min-height: 80px;
+        font-size: 14px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="live-code-compilation-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-live-code-compilation">
+          <div class="chrome"><span class="dot"></span><span>Live Code Compilation</span></div>
+          <div class="body">
+            <div class="files">index.html<br />style.css<br />timeline.js</div>
+            <div class="editor">
+              <span class="line" style="width: 92%"></span
+              ><span class="line" style="width: 72%"></span
+              ><span class="line" style="width: 84%"></span
+              ><span class="line" style="width: 58%"></span
+              ><span class="line" style="width: 78%"></span>
+            </div>
+          </div>
+          <div class="terminal">$ hyperframes render --skill=live-code-compilation</div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-live-code-compilation .line",
+          { "--hf-line": 0, "--hf-line-opacity": 0 },
+          {
+            "--hf-line": 1,
+            "--hf-line-opacity": 1,
+            duration: 0.24,
+            stagger: 0.08,
+            ease: "power2.out",
+          },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-live-code-compilation .terminal",
+          { opacity: 0, y: 16 },
+          { opacity: 1, y: 0, duration: 0.34, ease: "power2.out" },
+          startTime + 0.48,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["live-code-compilation-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/live-code-compilation/live-code-compilation.html b/docs/public/catalog/components/live-code-compilation/live-code-compilation.html
new file mode 100644
index 0000000000..974b3d97d8
--- /dev/null
+++ b/docs/public/catalog/components/live-code-compilation/live-code-compilation.html
@@ -0,0 +1,92 @@
+<!--
+  Live Code Compilation - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-live-code-compilation">
+  <div class="chrome"><span class="dot"></span><span>Live Code Compilation</span></div>
+  <div class="body">
+    <div class="files">index.html<br />style.css<br />timeline.js</div>
+    <div class="editor">
+      <span class="line" style="width: 92%"></span><span class="line" style="width: 72%"></span
+      ><span class="line" style="width: 84%"></span><span class="line" style="width: 58%"></span
+      ><span class="line" style="width: 78%"></span>
+    </div>
+  </div>
+  <div class="terminal">$ hyperframes render --skill=live-code-compilation</div>
+</div>
+
+<style>
+  .hf-remocn-live-code-compilation {
+    --hf-accent: #2563eb;
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-live-code-compilation {
+    width: 760px;
+    border-radius: 24px;
+    overflow: hidden;
+    background: #0f172a;
+    color: #dbeafe;
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  }
+  .hf-remocn-live-code-compilation .chrome {
+    height: 48px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 0 18px;
+    background: #111827;
+    color: #94a3b8;
+  }
+  .hf-remocn-live-code-compilation .dot {
+    width: 11px;
+    height: 11px;
+    border-radius: 999px;
+    background: #ef4444;
+    box-shadow:
+      18px 0 #f59e0b,
+      36px 0 #22c55e;
+  }
+  .hf-remocn-live-code-compilation .body {
+    display: grid;
+    grid-template-columns: 210px 1fr;
+    min-height: 340px;
+  }
+  .hf-remocn-live-code-compilation .files {
+    padding: 22px;
+    border-right: 1px solid rgba(148, 163, 184, 0.18);
+    color: #94a3b8;
+  }
+  .hf-remocn-live-code-compilation .editor {
+    padding: 22px;
+    display: grid;
+    gap: 12px;
+  }
+  .hf-remocn-live-code-compilation .line {
+    display: block;
+    height: 16px;
+    border-radius: 999px;
+    background: linear-gradient(90deg, #38bdf8, #a78bfa);
+    transform: scaleX(var(--hf-line, 1));
+    transform-origin: left center;
+    opacity: var(--hf-line-opacity, 1);
+  }
+  .hf-remocn-live-code-compilation .terminal {
+    padding: 18px 22px 24px;
+    border-top: 1px solid rgba(148, 163, 184, 0.18);
+    color: #86efac;
+    min-height: 78px;
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-live-code-compilation .line', { '--hf-line': 0, '--hf-line-opacity': 0 }, { '--hf-line': 1, '--hf-line-opacity': 1, duration: 0.24, stagger: 0.08, ease: 'power2.out' }, startTime); tl.fromTo('.hf-remocn-live-code-compilation .terminal', { opacity: 0, y: 16 }, { opacity: 1, y: 0, duration: 0.34, ease: 'power2.out' }, startTime + 0.48);
+-->
diff --git a/docs/public/catalog/components/locked-nucleus-orbit/demo.html b/docs/public/catalog/components/locked-nucleus-orbit/demo.html
new file mode 100644
index 0000000000..0eba8e4788
--- /dev/null
+++ b/docs/public/catalog/components/locked-nucleus-orbit/demo.html
@@ -0,0 +1,100 @@
+<!doctype html>
+<!--
+  locked-nucleus-orbit demo. This standalone composition mounts the primitive
+  with non-default values and gives it a definite elastic host box.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Locked Nucleus Orbit Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0b0c0e;
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --surface: #171923;
+        --border: #3f4250;
+        --font-body: Inter, system-ui, sans-serif;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 50%, #171923 0%, #0b0c0e 68%);
+      }
+
+      .mount-card {
+        width: 72%;
+        height: 68%;
+        left: 14%;
+        top: 16%;
+        overflow: hidden;
+        container-type: size;
+        border: 1px solid rgba(167, 139, 250, 0.2);
+        border-radius: 32px;
+        background: color-mix(in srgb, #171923 84%, transparent);
+        box-shadow: 0 40px 100px rgba(0, 0, 0, 0.45);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="locked-nucleus-orbit-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="locked-nucleus-orbit-mount"
+        class="mount-card clip"
+        data-composition-id="locked-nucleus-orbit"
+        data-composition-src="./locked-nucleus-orbit.html"
+        data-variable-values='{"label":"anchor","accent":"violet","satellites":6}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="1382"
+        data-height="734"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["locked-nucleus-orbit-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "locked-nucleus-orbit.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/locked-nucleus-orbit/locked-nucleus-orbit.html b/docs/public/catalog/components/locked-nucleus-orbit/locked-nucleus-orbit.html
new file mode 100644
index 0000000000..05ca372d79
--- /dev/null
+++ b/docs/public/catalog/components/locked-nucleus-orbit/locked-nucleus-orbit.html
@@ -0,0 +1,353 @@
+<!doctype html>
+<!--
+  locked-nucleus-orbit: HyperFrames video primitive (intros / reveals / orbit)
+
+  One nucleus stays dead center for the full composition. Satellite rings and
+  copy chips fade in while orbiting on deterministic index-based phases, then
+  decelerate into a composed lockup. The nucleus is never a GSAP target.
+
+  Variables:
+    - label (string, default "core"): text inside the fixed nucleus.
+    - accent (green | blue | violet, default green): active color.
+    - satellites (number, 3 to 6, default 4): visible satellite count.
+
+  Envelope (fixed IN and ORBIT, elastic HOLD, no OUT):
+    IN_BASE    = 0.45s, rings and chips fade in along their orbital arcs
+    ORBIT_BASE = 1.75s, satellites decelerate into their final phases
+    HOLD       = max(0, D - (IN + ORBIT)), only ring opacity breathes
+    OUT        = 0s, the composed lockup is the final state
+    If D is shorter than IN_BASE + ORBIT_BASE, IN and ORBIT compress together.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, has no data-width or data-height, and registers one paused timeline
+  under the hardcoded locked-nucleus-orbit id.
+-->
+<html
+  lang="en"
+  data-composition-id="locked-nucleus-orbit"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "label", "type": "string", "role": "content", "label": "Nucleus label", "description": "Text displayed inside the fixed center nucleus.", "default": "core" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Color used by the nucleus, rings, and satellite markers.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "satellites", "type": "number", "role": "layout", "label": "Satellites", "description": "Number of orbiting copy chips.", "default": 4, "min": 3, "max": 6, "step": 1 }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Locked Nucleus Orbit</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="locked-nucleus-orbit" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            background: var(--bg, #0b0c0e);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .lno-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+          }
+
+          .lno-field {
+            position: absolute;
+            inset: 0;
+          }
+
+          .lno-ring {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            width: var(--lno-size);
+            aspect-ratio: 1;
+            border: 0.12cqmin solid color-mix(in srgb, var(--lno-accent) 34%, transparent);
+            border-radius: 50%;
+            transform: translate(-50%, -50%);
+            transform-origin: 50% 50%;
+            box-shadow: inset 0 0 3cqmin color-mix(in srgb, var(--lno-accent) 5%, transparent);
+            opacity: 0;
+          }
+
+          .lno-ring:nth-child(1) {
+            --lno-size: 46cqmin;
+          }
+
+          .lno-ring:nth-child(2) {
+            --lno-size: 58cqmin;
+          }
+
+          .lno-ring:nth-child(3) {
+            --lno-size: 70cqmin;
+          }
+
+          .lno-nucleus {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            width: 15cqmin;
+            aspect-ratio: 1;
+            display: grid;
+            place-items: center;
+            transform: translate(-50%, -50%);
+            border: 0.2cqmin solid color-mix(in srgb, var(--lno-accent) 68%, white 16%);
+            border-radius: 50%;
+            background: color-mix(in srgb, var(--surface, #172033) 86%, var(--lno-accent) 14%);
+            box-shadow:
+              0 0 2.8cqmin color-mix(in srgb, var(--lno-accent) 38%, transparent),
+              inset 0 0 2.2cqmin color-mix(in srgb, var(--lno-accent) 18%, transparent);
+            z-index: 3;
+          }
+
+          .lno-nucleus::before {
+            content: "";
+            position: absolute;
+            width: 2.4cqmin;
+            aspect-ratio: 1;
+            top: 2.5cqmin;
+            border-radius: 50%;
+            background: var(--lno-accent);
+            box-shadow: 0 0 1.8cqmin color-mix(in srgb, var(--lno-accent) 72%, transparent);
+          }
+
+          .lno-nucleus-label {
+            max-width: 11cqmin;
+            margin-top: 3.1cqmin;
+            overflow: hidden;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
+            font-size: clamp(9px, 2cqmin, 20px);
+            font-weight: 700;
+            letter-spacing: 0.08em;
+            line-height: 1;
+            text-overflow: ellipsis;
+            text-transform: uppercase;
+            white-space: nowrap;
+          }
+
+          .lno-arm {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            width: 0;
+            height: 0;
+            transform-origin: 0 0;
+          }
+
+          .lno-anchor {
+            position: absolute;
+            left: var(--lno-radius);
+            top: 0;
+            transform: translate(-50%, -50%);
+          }
+
+          .lno-chip {
+            min-width: 12cqmin;
+            max-width: 22cqmin;
+            min-height: 5.2cqmin;
+            display: flex;
+            align-items: center;
+            gap: 1.25cqmin;
+            padding: 1.1cqmin 1.8cqmin;
+            border: 0.12cqmin solid
+              color-mix(in srgb, var(--lno-accent) 48%, var(--border, #334155));
+            border-radius: 999px;
+            background: color-mix(in srgb, var(--surface, #172033) 90%, transparent);
+            box-shadow: 0 1.2cqmin 3.6cqmin color-mix(in srgb, var(--bg, #0b0c0e) 60%, transparent);
+            opacity: 0;
+            will-change: transform, opacity;
+          }
+
+          .lno-marker {
+            flex: 0 0 auto;
+            width: 2.4cqmin;
+            aspect-ratio: 1;
+            border: 0.32cqmin solid var(--lno-accent);
+            border-radius: 50%;
+            box-shadow: 0 0 1.4cqmin color-mix(in srgb, var(--lno-accent) 56%, transparent);
+          }
+
+          .lno-copy {
+            overflow: hidden;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
+            font-size: clamp(8px, 1.8cqmin, 18px);
+            font-weight: 650;
+            letter-spacing: 0.08em;
+            line-height: 1;
+            text-overflow: ellipsis;
+            text-transform: uppercase;
+            white-space: nowrap;
+          }
+        </style>
+
+        <div
+          id="locked-nucleus-orbit-clip"
+          class="lno-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="lno-field">
+            <div class="lno-ring" aria-hidden="true"></div>
+            <div class="lno-ring" aria-hidden="true"></div>
+            <div class="lno-ring" aria-hidden="true"></div>
+            <div class="lno-satellites"></div>
+            <div class="lno-nucleus">
+              <span class="lno-nucleus-label"></span>
+            </div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var label = root.querySelector(".lno-nucleus-label");
+            var satelliteLayer = root.querySelector(".lno-satellites");
+            var rings = root.querySelectorAll(".lno-ring");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var accentColors = {
+              green: "var(--brand, #34d399)",
+              blue: "var(--accent, #38bdf8)",
+              violet: "var(--accent-2, #a78bfa)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var countValue = Number(vars.satellites);
+            var satelliteCount =
+              vars.satellites != null && Number.isFinite(countValue)
+                ? Math.max(3, Math.min(6, Math.round(countValue)))
+                : 4;
+            var labelText = vars.label == null ? "core" : String(vars.label);
+            var copy = ["signal", "motion", "frames", "output", "sync", "lock"];
+            var radii = [23, 29, 35];
+
+            root.style.setProperty("--lno-accent", accentColors[accent]);
+            label.textContent = labelText;
+
+            var satellites = [];
+            for (var index = 0; index < satelliteCount; index += 1) {
+              var arm = document.createElement("div");
+              var anchor = document.createElement("div");
+              var chip = document.createElement("div");
+              var marker = document.createElement("span");
+              var chipCopy = document.createElement("span");
+
+              arm.className = "lno-arm";
+              anchor.className = "lno-anchor";
+              chip.className = "lno-chip";
+              marker.className = "lno-marker";
+              chipCopy.className = "lno-copy";
+              arm.style.setProperty("--lno-radius", radii[index % radii.length] + "cqmin");
+              chipCopy.textContent = copy[index];
+
+              chip.appendChild(marker);
+              chip.appendChild(chipCopy);
+              anchor.appendChild(chip);
+              arm.appendChild(anchor);
+              satelliteLayer.appendChild(arm);
+
+              var finalPhase = -90 + (360 * index) / satelliteCount;
+              var travel = 210 + (index % 3) * 70;
+              satellites.push({
+                arm: arm,
+                chip: chip,
+                startPhase: finalPhase - travel,
+                finalPhase: finalPhase,
+              });
+            }
+
+            var IN_BASE = 0.45;
+            var ORBIT_BASE = 1.75;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var motionBase = IN_BASE + ORBIT_BASE;
+            var motionScale = duration < motionBase ? duration / motionBase : 1;
+            var IN = IN_BASE * motionScale;
+            var ORBIT = ORBIT_BASE * motionScale;
+            var MOTION = IN + ORBIT;
+            var HOLD = Math.max(0, duration - MOTION);
+            var fadeStagger = Math.min(0.07, IN / (satelliteCount * 2));
+            var fadeDuration = Math.max(0.001, IN - fadeStagger * (satelliteCount - 1));
+
+            gsap.set(rings, { opacity: 0, scale: 0.86 });
+            satellites.forEach(function (satellite) {
+              gsap.set(satellite.arm, { rotation: satellite.startPhase });
+              gsap.set(satellite.chip, {
+                opacity: 0,
+                rotation: -satellite.startPhase,
+                scale: 0.82,
+              });
+            });
+
+            var tl = gsap.timeline({ paused: true });
+
+            tl.to(rings, { opacity: 0.38, scale: 1, duration: IN, ease: "power2.out" }, 0);
+
+            satellites.forEach(function (satellite, index) {
+              tl.to(
+                satellite.arm,
+                { rotation: satellite.finalPhase, duration: MOTION, ease: "power2.out" },
+                0,
+              );
+              tl.to(
+                satellite.chip,
+                { rotation: -satellite.finalPhase, duration: MOTION, ease: "power2.out" },
+                0,
+              );
+              tl.to(
+                satellite.chip,
+                {
+                  opacity: 1,
+                  scale: 1,
+                  duration: fadeDuration,
+                  ease: "back.out(1.7)",
+                },
+                index * fadeStagger,
+              );
+            });
+
+            if (HOLD > 0.2) {
+              tl.to(
+                rings,
+                {
+                  opacity: 0.5,
+                  duration: HOLD / 2,
+                  ease: "sine.inOut",
+                  yoyo: true,
+                  repeat: 1,
+                },
+                MOTION,
+              );
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["locked-nucleus-orbit"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/logo-brand-close/README.md b/docs/public/catalog/components/logo-brand-close/README.md
new file mode 100644
index 0000000000..368a57b3b8
--- /dev/null
+++ b/docs/public/catalog/components/logo-brand-close/README.md
@@ -0,0 +1,36 @@
+# logo-brand-close
+
+The brand close that ends films. The wordmark lands at display scale (a chars-aware fit sizes it to roughly three quarters of the frame width), letters cascade left to right (per-letter fade plus rise with a long expo tail) while the whole wordmark settles from a slightly larger scale, the accent brand period arrives last with a decisive pop, a readable tagline settles beneath, a wide-tracked mono URL breathes in below, then the finished identity holds dead still to the end.
+
+Distinct job from `cta-close`: identity, not action. No button, no cursor, no ask. If the film should end on an action, use `cta-close`; if it should end on who made it, use this.
+
+## Variables
+
+| Variable   | Type   | Default                     | Notes                                                                                                                   |
+| ---------- | ------ | --------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
+| `wordmark` | string | `HYPERFRAMES`               | Letters cascade individually; a brand period is appended in accent (an existing trailing `.` takes the accent instead). |
+| `tagline`  | string | `Write HTML. Render video.` | Settles beneath the wordmark. Empty string hides the line.                                                              |
+| `url`      | string | `hyperframes.heygen.com`    | Mono, wide-tracked. Empty string hides the line.                                                                        |
+| `accent`   | enum   | `green`                     | `green` maps to `--brand`, `blue` to `--accent`, `violet` to `--accent-2`. Colors the brand period.                     |
+| `exit`     | enum   | `none`                      | `none`, `fade`, or `up`. This is a film ender; the default hold runs to the last frame.                                 |
+
+## Envelope
+
+Authored at 4s. Fixed IN with elastic HOLD; OUT exists only when `exit` is not `none`.
+
+- IN_BASE = 2.6s: letter cascade (1.15s rise per letter, 0.7s stagger spread, `expo.out`) under a 2.4s whole-wordmark scale settle (1.04 to 1), accent period pop at 0.95s (`back.out(1.8)`), tagline settle at 1.35s, URL fade plus tracking settle at 1.7s.
+- HOLD = `max(0, D - IN - OUT)`: completely still, no drift, no breath.
+- OUT_BASE = 0.5s only for `exit: fade` (opacity) or `exit: up` (opacity plus rise); otherwise 0.
+- Shorter durations compress IN and OUT proportionally. The timeline is never time-scaled.
+
+Sync point: `lockup-settled` at 2.6s (end of IN at authored duration).
+
+## Scale
+
+- Wordmark: chars-aware fit targeting ~76cqw of set width (a one-shot 100px probe measures the real font's em ratio; a per-glyph advance table is the fallback), capped at 40cqh for short, wide mounts.
+- Tagline: `min(3.4cqw, 5.4cqmin)`, a clearly readable secondary scale.
+- URL: `min(2.4cqw, 3.2cqmin)` mono at 0.28em tracking, legible at 1080p even inside a mounted card.
+
+## Mount contract
+
+Template-wrapped sub-composition. `#root` fills the host box, establishes the container query basis (`container-type: size`, `cqw`/`cqh` units), carries no `data-width`/`data-height`, and registers one paused GSAP timeline under the literal `logo-brand-close` key on `window.__timelines`. Consumes the contract tokens (`--bg`, `--fg`, `--muted`, `--brand`, `--accent`, `--accent-2`, `--font-display`, `--font-body`, `--font-mono`, `--space-2`) at point of use with exact-value fallbacks. Deterministic and seek-safe.
diff --git a/docs/public/catalog/components/logo-brand-close/demo.html b/docs/public/catalog/components/logo-brand-close/demo.html
new file mode 100644
index 0000000000..9302370b5b
--- /dev/null
+++ b/docs/public/catalog/components/logo-brand-close/demo.html
@@ -0,0 +1,114 @@
+<!doctype html>
+<!--
+  logo-brand-close demo. Full-bleed mount on the light editorial token set:
+  the brand close owns the whole 1920x1080 frame, proving the display-scale
+  wordmark, readable tagline, and mono url land with end-card presence.
+  Non-default text and a violet accent prove the variable path.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>logo-brand-close Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #e9e1d2);
+      }
+
+      #root {
+        --bg: #e9e1d2;
+        --fg: #202725;
+        --muted: #6c746f;
+        --surface: #f8f1e5;
+        --border: #c9bfad;
+        --brand: #246b63;
+        --accent: #31776f;
+        --accent-2: #8a6549;
+        --font-display: Georgia, "Times New Roman", serif;
+        --font-body: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
+        --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
+        --radius: 0.9cqmin;
+        --space-1: 1.1cqmin;
+        --space-2: 2.2cqmin;
+        --space-3: 3.8cqmin;
+        --dur-beat: 0.48s;
+        --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
+        --ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1);
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(
+          ellipse at 50% 42%,
+          var(--surface, #f8f1e5) 0%,
+          var(--bg, #e9e1d2) 72%
+        );
+      }
+
+      .mount-stage {
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        container-type: size;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="logo-brand-close-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="logo-brand-close-mount"
+        class="mount-stage clip"
+        data-composition-id="logo-brand-close"
+        data-composition-src="./logo-brand-close.html"
+        data-variable-values='{"wordmark":"FIELDNOTE","tagline":"Slow journalism for fast times.","url":"fieldnote.press","accent":"violet"}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="1920"
+        data-height="1080"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["logo-brand-close-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "logo-brand-close.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/logo-brand-close/logo-brand-close.html b/docs/public/catalog/components/logo-brand-close/logo-brand-close.html
new file mode 100644
index 0000000000..1919e352bd
--- /dev/null
+++ b/docs/public/catalog/components/logo-brand-close/logo-brand-close.html
@@ -0,0 +1,367 @@
+<!doctype html>
+<!--
+  logo-brand-close: HyperFrames video primitive (brand close)
+
+  The identity close that ends films. The wordmark lands at display scale,
+  a chars-aware fit sizing it to roughly three quarters of the frame width.
+  Letters cascade left to right (per-letter fade plus rise with a long
+  expo tail) while the whole wordmark settles from a slightly larger scale,
+  the accent brand period arrives last with a decisive pop, a readable
+  tagline settles beneath, a wide-tracked mono URL breathes in below, then
+  the finished lockup holds dead still to the end. Distinct from cta-close:
+  identity, not action. No button, no cursor.
+
+  Variables:
+    - wordmark (string): the brand name that cascades into place.
+    - tagline (string): optional line beneath the wordmark; empty hides it.
+    - url (string): optional mono URL line; empty hides it.
+    - accent (green | blue | violet): color of the brand period.
+    - exit (none | fade | up, default none): films end on the hold.
+
+  Envelope, fixed IN with elastic HOLD only (OUT exists only when exit is
+  not none):
+    IN_BASE  = 2.6s, letter cascade + scale settle, period pop, tagline
+               settle, URL tracking settle
+    HOLD     = max(0, D - IN - OUT), completely still
+    OUT_BASE = 0.5s only when exit is fade or up, otherwise 0
+    If D is shorter than IN_BASE + OUT_BASE, both compress together.
+    The timeline is never time-scaled.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, has no data-width or data-height,
+  and registers one paused timeline under the literal logo-brand-close key.
+-->
+<html
+  lang="en"
+  data-composition-id="logo-brand-close"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "wordmark", "type": "string", "role": "content", "label": "Wordmark", "description": "Brand name whose letters cascade into the centered lockup.", "default": "HYPERFRAMES" },
+    { "id": "tagline", "type": "string", "role": "content", "label": "Tagline", "description": "Optional tagline that settles beneath the wordmark. Empty hides it.", "default": "Write HTML. Render video." },
+    { "id": "url", "type": "string", "role": "content", "label": "URL", "description": "Optional mono URL line beneath the tagline. Empty hides it.", "default": "hyperframes.heygen.com" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Contract color used by the brand period at the end of the wordmark.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "style", "label": "Exit", "description": "Optional departure. Films end on the still hold, so the default is none.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Logo Brand Close</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="logo-brand-close" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .lbc-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+            background: var(--bg, #0b0c0e);
+          }
+
+          .lbc-lockup {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            width: 100cqw;
+            text-align: center;
+            will-change: transform, opacity;
+          }
+
+          /* Display scale: the JS chars-aware fit targets ~76cqw of set
+             width; 40cqh caps it in short, wide mounts. */
+          .lbc-wordmark {
+            display: flex;
+            align-items: baseline;
+            justify-content: center;
+            margin: 0;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: var(--lbc-wordmark-size, min(10.5cqw, 40cqh));
+            font-weight: 600;
+            line-height: 1.04;
+            letter-spacing: -0.035em;
+            white-space: nowrap;
+            will-change: transform;
+          }
+
+          .lbc-letter {
+            display: inline-block;
+            flex: 0 0 auto;
+            will-change: transform, opacity;
+          }
+
+          .lbc-space {
+            width: 0.34em;
+          }
+
+          .lbc-period {
+            color: var(--lbc-accent);
+          }
+
+          .lbc-tagline {
+            max-width: 88cqw;
+            margin: var(--space-2, 3cqmin) 0 0;
+            color: var(--fg, #f8fafc);
+            font-size: min(3.4cqw, 5.4cqmin);
+            font-weight: 500;
+            line-height: 1.3;
+            letter-spacing: 0.01em;
+            will-change: transform, opacity;
+          }
+
+          .lbc-url {
+            margin: var(--space-3, 4.6cqmin) 0 0;
+            color: var(--muted, #94a3b8);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            font-size: min(2.4cqw, 3.2cqmin);
+            font-weight: 500;
+            line-height: 1;
+            letter-spacing: 0.28em;
+            will-change: opacity;
+          }
+        </style>
+
+        <div
+          id="logo-brand-close-clip"
+          class="lbc-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="lbc-lockup">
+            <h2 class="lbc-wordmark"></h2>
+            <p class="lbc-tagline"></p>
+            <p class="lbc-url"></p>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var lockup = root.querySelector(".lbc-lockup");
+            var wordmarkElement = root.querySelector(".lbc-wordmark");
+            var taglineElement = root.querySelector(".lbc-tagline");
+            var urlElement = root.querySelector(".lbc-url");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var wordmark =
+              vars.wordmark == null
+                ? "HYPERFRAMES"
+                : String(vars.wordmark).trim().replace(/\s+/g, " ");
+            if (wordmark.length === 0) wordmark = "HYPERFRAMES";
+            var tagline =
+              vars.tagline == null
+                ? "Write HTML. Render video."
+                : String(vars.tagline).trim().replace(/\s+/g, " ");
+            var url = vars.url == null ? "hyperframes.heygen.com" : String(vars.url).trim();
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            root.style.setProperty("--lbc-accent", accentColors[accent]);
+            wordmarkElement.setAttribute("aria-label", wordmark);
+            wordmarkElement.setAttribute("role", "img");
+
+            // The brand period: an accent dot ends the wordmark. If the
+            // wordmark already ends with "." that period takes the accent
+            // instead of appending a second one.
+            var characters = Array.from(wordmark);
+            if (characters[characters.length - 1] !== ".") characters.push(".");
+
+            var letters = characters.map(function (character, index) {
+              var letter = document.createElement("span");
+              letter.id = "logo-brand-close-letter-" + index;
+              letter.className = "lbc-letter";
+              if (/\s/.test(character)) {
+                letter.classList.add("lbc-space");
+                letter.textContent = " ";
+              } else {
+                letter.textContent = character;
+              }
+              if (index === characters.length - 1) letter.classList.add("lbc-period");
+              letter.setAttribute("aria-hidden", "true");
+              wordmarkElement.appendChild(letter);
+              return letter;
+            });
+            var periodLetter = letters[letters.length - 1];
+            var cascadeLetters = letters.slice(0, -1);
+
+            // Deterministic chars-aware fit: probe the set width at a fixed
+            // 100px font (letter-spacing rides in em, so the em ratio is a
+            // pure font metric), then size the wordmark so it lands at
+            // ~76cqw. The 40cqh term caps it in short, wide mounts. If the
+            // probe cannot measure (detached render), fall back to a
+            // per-glyph advance estimate.
+            wordmarkElement.style.fontSize = "100px";
+            var probedWidth = wordmarkElement.getBoundingClientRect().width;
+            wordmarkElement.style.fontSize = "";
+            var setWidthEm;
+            if (probedWidth > 0) {
+              setWidthEm = probedWidth / 100;
+            } else {
+              setWidthEm = characters.reduce(function (total, character) {
+                if (/\s/.test(character)) return total + 0.34;
+                if (/[.,:;!'’|]/.test(character)) return total + 0.3;
+                if (/[Iijlftr]/.test(character)) return total + 0.42;
+                if (/[MWmw@]/.test(character)) return total + 0.92;
+                return total + 0.64;
+              }, 0);
+              setWidthEm -= characters.length * 0.035;
+            }
+            setWidthEm = Math.max(0.3, setWidthEm);
+            var wordmarkSize = 76 / setWidthEm;
+            root.style.setProperty(
+              "--lbc-wordmark-size",
+              "min(" + wordmarkSize.toFixed(3) + "cqw, 40cqh)",
+            );
+
+            if (tagline.length === 0) taglineElement.remove();
+            else taglineElement.textContent = tagline;
+            if (url.length === 0) urlElement.remove();
+            else urlElement.textContent = url;
+
+            var IN_BASE = 2.6;
+            var OUT_BASE = exit === "none" ? 0 : 0.5;
+            var CASCADE_RISE_BASE = 1.15;
+            var CASCADE_STAGGER_BASE = 0.7;
+            var SETTLE_BASE = 2.4;
+            var PERIOD_AT_BASE = 0.95;
+            var PERIOD_DURATION_BASE = 0.9;
+            var TAGLINE_AT_BASE = 1.35;
+            var TAGLINE_DURATION_BASE = 0.9;
+            var URL_AT_BASE = 1.7;
+            var URL_DURATION_BASE = 0.85;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var totalBase = IN_BASE + OUT_BASE;
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var STAGGER = cascadeLetters.length > 1 ? CASCADE_STAGGER_BASE * scale : 0;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var OUT_START = IN + HOLD;
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: per-letter fade plus rise with a long expo tail, while the
+            // whole wordmark settles down from a slightly larger scale.
+            if (cascadeLetters.length > 0) {
+              tl.fromTo(
+                cascadeLetters,
+                { opacity: 0, y: "0.62em" },
+                {
+                  opacity: 1,
+                  y: "0em",
+                  duration: CASCADE_RISE_BASE * scale,
+                  stagger: { amount: STAGGER, from: "start" },
+                  ease: "expo.out",
+                },
+                0,
+              );
+            }
+
+            tl.fromTo(
+              wordmarkElement,
+              { scale: 1.04, transformOrigin: "50% 100%" },
+              { scale: 1, duration: SETTLE_BASE * scale, ease: "expo.out" },
+              0,
+            );
+
+            // The brand period lands last: a decisive accent pop.
+            tl.fromTo(
+              periodLetter,
+              { opacity: 0, scale: 0.2, y: "0.08em", transformOrigin: "50% 65%" },
+              {
+                opacity: 1,
+                scale: 1,
+                y: "0em",
+                duration: PERIOD_DURATION_BASE * scale,
+                ease: "back.out(1.8)",
+              },
+              PERIOD_AT_BASE * scale,
+            );
+
+            if (taglineElement.isConnected) {
+              tl.fromTo(
+                taglineElement,
+                { opacity: 0, y: "0.9em" },
+                {
+                  opacity: 1,
+                  y: "0em",
+                  duration: TAGLINE_DURATION_BASE * scale,
+                  ease: "power3.out",
+                },
+                TAGLINE_AT_BASE * scale,
+              );
+            }
+
+            if (urlElement.isConnected) {
+              tl.fromTo(
+                urlElement,
+                // scaleX, not letterSpacing: tracking is a layout property, so
+                // the browser snaps it to integer device pixels and the
+                // ease-out tail stutters under seek-by-frame capture. The
+                // widening reads the same and stays on the compositor.
+                { opacity: 0, scaleX: 1.06 },
+                {
+                  opacity: 1,
+                  scaleX: 1,
+                  duration: URL_DURATION_BASE * scale,
+                  ease: "power2.out",
+                },
+                URL_AT_BASE * scale,
+              );
+            }
+
+            // HOLD: dead still. No drift, no breath; the confidence is the
+            // stillness, and by default the film ends here.
+
+            if (exit === "fade") {
+              tl.to(lockup, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "up") {
+              tl.to(
+                lockup,
+                { opacity: 0, y: "-5cqh", duration: OUT, ease: "power2.in" },
+                OUT_START,
+              );
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["logo-brand-close"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/logo-sting/demo.html b/docs/public/catalog/components/logo-sting/demo.html
new file mode 100644
index 0000000000..85181d1b18
--- /dev/null
+++ b/docs/public/catalog/components/logo-sting/demo.html
@@ -0,0 +1,94 @@
+<!doctype html>
+<!--
+  logo-sting demo. This standalone composition mounts logo-sting.html through
+  data-composition-src. Non-default values prove both variables flow through
+  the mount while the primitive remains sized by its host box.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Logo Sting Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0b0c0e;
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --font-display: Inter, system-ui, sans-serif;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0b0c0e;
+      }
+
+      .mount-card {
+        width: 76%;
+        height: 52%;
+        left: 12%;
+        top: 24%;
+        container-type: size;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="logo-sting-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="2.2"
+      data-fps="30"
+    >
+      <div
+        id="logo-sting-mount"
+        class="mount-card clip"
+        data-composition-id="logo-sting"
+        data-composition-src="./logo-sting.html"
+        data-variable-values='{"wordmark":"MOTION LAB","accent":"violet"}'
+        data-start="0"
+        data-duration="2.2"
+        data-track-index="0"
+        data-width="1459"
+        data-height="562"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["logo-sting-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "logo-sting.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/logo-sting/logo-sting.html b/docs/public/catalog/components/logo-sting/logo-sting.html
new file mode 100644
index 0000000000..6927d59835
--- /dev/null
+++ b/docs/public/catalog/components/logo-sting/logo-sting.html
@@ -0,0 +1,180 @@
+<!doctype html>
+<!--
+  logo-sting: HyperFrames video primitive (brand / impact / reveal)
+
+  Concept: a wordmark lands from scale 1.15 with the slam ease. Its impact
+  triggers one accent ring and exactly one frame of white, then the finished
+  lockup holds completely still.
+
+  Variables:
+    - wordmark (string, default "HYPERFRAMES"): the brand name.
+    - accent (green | blue | violet, default green): the ring color.
+
+  Envelope (fixed IN, elastic HOLD, no OUT, never timeScale):
+    IN_BASE = 0.95s. The wordmark lands at 0.55s, then the ring resolves.
+    HOLD = max(0, D - IN). This phase is deliberately dead still.
+    OUT = 0s. The final brand frame remains established through the end.
+    If D is shorter than IN_BASE, only IN compresses and HOLD becomes zero.
+
+  Mount contract: this template is cloned into a sized host. #root fills that
+  host, establishes the container query basis, and registers one paused GSAP
+  timeline under the hardcoded logo-sting key.
+-->
+<html
+  lang="en"
+  data-composition-id="logo-sting"
+  data-composition-duration="2.2"
+  data-composition-variables='[
+    { "id": "wordmark", "type": "string", "role": "content", "label": "Wordmark", "description": "Brand name displayed in the final lockup.", "default": "HYPERFRAMES" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Color of the single impact ring.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Logo Sting</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="logo-sting" data-duration="2.2" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            background: var(--bg, #0b0c0e);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .ls-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+          }
+
+          .ls-ring {
+            position: absolute;
+            z-index: 1;
+            width: min(42cqw, 72cqh);
+            aspect-ratio: 1;
+            border: min(0.34cqw, 0.62cqh) solid var(--ls-accent);
+            border-radius: 50%;
+            opacity: 0;
+            will-change: transform, opacity;
+          }
+
+          .ls-wordmark {
+            position: relative;
+            z-index: 2;
+            max-width: 90cqw;
+            color: var(--fg, #f8fafc);
+            font-size: min(10.5cqw, 18cqh);
+            font-weight: 850;
+            line-height: 0.9;
+            letter-spacing: -0.055em;
+            text-align: center;
+            white-space: nowrap;
+            transform-origin: 50% 50%;
+            will-change: transform;
+          }
+
+          .ls-flash {
+            position: absolute;
+            inset: 0;
+            z-index: 3;
+            background: #ffffff;
+            opacity: 0;
+          }
+        </style>
+
+        <div
+          id="logo-sting-clip"
+          class="ls-clip clip"
+          data-start="0"
+          data-duration="2.2"
+          data-track-index="0"
+        >
+          <div class="ls-ring" aria-hidden="true"></div>
+          <div class="ls-wordmark"></div>
+          <div class="ls-flash" aria-hidden="true"></div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var wordmark = root.querySelector(".ls-wordmark");
+            var ring = root.querySelector(".ls-ring");
+            var flash = root.querySelector(".ls-flash");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var accentColors = {
+              green: "var(--brand, #5df28b)",
+              blue: "var(--accent, #4da3ff)",
+              violet: "var(--accent-2, #a978ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var wordmarkText = vars.wordmark == null ? "HYPERFRAMES" : String(vars.wordmark);
+
+            wordmark.textContent = wordmarkText;
+            root.style.setProperty("--ls-accent", accentColors[accent]);
+
+            var IN_BASE = 0.95;
+            var IMPACT_BASE = 0.55;
+            var parsedDuration = parseFloat(root.dataset.duration);
+            var duration = Number.isFinite(parsedDuration) ? Math.max(0.001, parsedDuration) : 2.2;
+            var IN = Math.min(IN_BASE, duration);
+            var retime = IN / IN_BASE;
+            var IMPACT = IMPACT_BASE * retime;
+            var RING_DURATION = (IN_BASE - IMPACT_BASE) * retime;
+            var FLASH_FRAME = Math.min(1 / 30, RING_DURATION);
+            var HOLD = Math.max(0, duration - IN);
+
+            gsap.set(ring, { scale: 0.34, opacity: 0 });
+            gsap.set(flash, { opacity: 0 });
+
+            var tl = gsap.timeline({ paused: true });
+
+            tl.fromTo(
+              wordmark,
+              { scale: 1.15 },
+              { scale: 1, duration: IMPACT, ease: "expo.out" },
+              0,
+            );
+            tl.set(ring, { opacity: 0.92 }, IMPACT);
+            tl.to(
+              ring,
+              { scale: 2.4, opacity: 0, duration: RING_DURATION, ease: "power3.out" },
+              IMPACT,
+            );
+            tl.set(flash, { opacity: 1 }, IMPACT);
+            tl.set(flash, { opacity: 0 }, IMPACT + FLASH_FRAME);
+            tl.addLabel("hold", IN);
+            tl.addLabel("end", IN + HOLD);
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["logo-sting"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/logo-wall/demo.html b/docs/public/catalog/components/logo-wall/demo.html
new file mode 100644
index 0000000000..0289bdaa56
--- /dev/null
+++ b/docs/public/catalog/components/logo-wall/demo.html
@@ -0,0 +1,119 @@
+<!doctype html>
+<!--
+  logo-wall demo: standalone 1920x1080 host composition. It mounts the
+  primitive through data-composition-src into a definite card instead of
+  inlining markup or motion. Non-default rows, cols, and stagger values prove
+  that all public variables cross the mount boundary.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Logo Wall Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+
+      #root {
+        --bg: #080b13;
+        --fg: #f6f8fc;
+        --muted: #a7b0c1;
+        --surface: #151b29;
+        --border: #344057;
+        --brand: #7c9cff;
+        --accent: #86e5c5;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-body: Inter, system-ui, sans-serif;
+        --font-mono: ui-monospace, monospace;
+        --radius: 18px;
+        --space-1: 8px;
+        --space-2: 16px;
+        --space-3: 32px;
+        --dur-beat: 0.4s;
+        --ease-standard: cubic-bezier(0.215, 0.61, 0.355, 1);
+        --ease-emphasis: cubic-bezier(0.19, 1, 0.22, 1);
+        --ease-exit: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        display: grid;
+        place-items: center;
+        background: var(--bg);
+        color: var(--fg);
+        font-family: var(--font-body);
+      }
+
+      .mount-card {
+        width: 72%;
+        height: 72%;
+        left: 14%;
+        top: 14%;
+        overflow: hidden;
+        border: 1px solid var(--border);
+        border-radius: calc(var(--radius) * 1.5);
+        background: var(--surface);
+        box-shadow: 0 40px 100px color-mix(in srgb, var(--bg) 82%, transparent);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="logo-wall-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+      data-fps="30"
+    >
+      <div
+        id="logo-wall-mount"
+        class="mount-card clip"
+        data-composition-id="logo-wall"
+        data-composition-src="./logo-wall.html"
+        data-variable-values='{"rows":4,"cols":6,"stagger":75}'
+        data-start="0"
+        data-duration="5"
+        data-track-index="0"
+        data-width="1382"
+        data-height="778"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      // The mounted primitive owns all visible motion. This host registers only
+      // the empty paused timeline required for its own composition id.
+      window.__timelines = window.__timelines || {};
+      window.__timelines["logo-wall-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "logo-wall.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/logo-wall/logo-wall.html b/docs/public/catalog/components/logo-wall/logo-wall.html
new file mode 100644
index 0000000000..4536cbcfb3
--- /dev/null
+++ b/docs/public/catalog/components/logo-wall/logo-wall.html
@@ -0,0 +1,299 @@
+<!doctype html>
+<!--
+  logo-wall: HyperFrames video primitive (data / holdable / prove)
+
+  Concept: a trusted-by wall of placeholder lettermark logos assembles in DOM
+  order. Each cell fades and scales directly into its final grid slot with a
+  fixed per-cell delay. One mechanic, one job: prove trust through a collected
+  wall of customer marks.
+
+  Compiled-from evidence: consumer-sim fixture plus the grid-card-assemble
+  blueprint's Social_Proof logo-wall variant. The blueprint requires a dense
+  array to use short, slot-local entrances instead of a shared-center burst.
+
+  Use when: a scene needs a compact trusted-by beat without using real brand
+  assets or turning the wall into a feature-card showcase.
+
+  Variables (declared in data-composition-variables below):
+    - rows (number, default 3, range 2 to 4): visible logo rows.
+    - cols (number, default 5, range 3 to 6): visible logo columns.
+    - stagger (number, default 45, range 20 to 75 ms): fixed delay between
+      consecutive cell entrances.
+
+  Envelope (fixed IN/OUT, elastic HOLD only, never gsap.timeScale()):
+    IN_BASE  = 2.50s  ordered fade and scale assembly.
+    HOLD     = elastic = max(0, D - (IN_BASE + OUT_BASE)); deliberately still
+               so the completed evidence wall remains readable.
+    OUT_BASE = 0.50s  clean group fade.
+    If D is shorter than IN_BASE + OUT_BASE, IN and OUT scale down together so
+    IN + OUT equals D and HOLD equals 0. The index-based stagger scales only in
+    that compressed envelope.
+
+  Sync point: none. The proof is distributed across per-cell arrivals, so no
+  single fixed cue represents the assembly honestly.
+
+  Sound cue: none. A distributed wall assembly has no truthful single-frame
+  sound event, so this primitive does not dispatch hf:sfx.
+
+  Mount contract: this file is a mountable sub-composition. A host loads it via
+  data-composition-src, and the runtime clones only <template> contents. Styles,
+  markup, GSAP, and registration therefore live inside <template>. #root fills
+  the host with inset:0 and container-type:size and has no data-width or
+  data-height. The hardcoded id "logo-wall" matches the host id and timeline
+  key after mount flattening. Variables come from
+  window.__hyperframes.getVariables(), which merges declarations with host
+  data-variable-values overrides.
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "rows", "type": "number", "role": "layout", "label": "Rows", "description": "Number of logo rows in the wall.", "default": 3, "min": 2, "max": 4, "step": 1 },
+    { "id": "cols", "type": "number", "role": "layout", "label": "Columns", "description": "Number of logo columns in the wall.", "default": 5, "min": 3, "max": 6, "step": 1 },
+    { "id": "stagger", "type": "number", "role": "motion", "label": "Stagger", "description": "Delay between consecutive logo cell entrances.", "default": 45, "min": 20, "max": 75, "step": 1, "unit": "ms" }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Logo Wall</title>
+    <!-- Metadata only. The loader reads declarations from <html>, then
+         discards everything outside <template>. -->
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="logo-wall" data-start="0" data-duration="5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          /* Root fills the host box and consumes only the shared theme tokens.
+             Every internal dimension is relative to this size container. */
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            color: var(--fg, #f5f6f8);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+          }
+
+          .lw-clip {
+            width: 100%;
+            height: 100%;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+            background: var(--bg, #0b0c10);
+          }
+
+          .lw-stage {
+            width: 86cqw;
+            height: 82cqh;
+            display: grid;
+            grid-template-rows: auto minmax(0, 1fr);
+            gap: var(--space-3, 3cqh);
+            padding: var(--space-3, 3cqh);
+          }
+
+          .lw-heading {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: var(--space-2, 1.6cqh);
+            color: var(--muted, #8b8f9a);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: min(2.6cqw, 4.4cqh);
+            font-weight: 650;
+            letter-spacing: 0.08em;
+            line-height: 1;
+            text-transform: uppercase;
+          }
+
+          .lw-heading::before,
+          .lw-heading::after {
+            content: "";
+            width: 8cqw;
+            height: 0.14cqw;
+            background: var(--border, #262931);
+          }
+
+          /* EDIT ZONE: grid geometry. rows and cols are the sole owners of
+             track count. Spacing and surfaces remain theme-token driven. */
+          .lw-grid {
+            min-width: 0;
+            min-height: 0;
+            display: grid;
+            grid-template-columns: repeat(var(--lw-cols), minmax(0, 1fr));
+            grid-template-rows: repeat(var(--lw-rows), minmax(0, 1fr));
+            gap: var(--space-2, 1.6cqh);
+          }
+
+          .lw-cell {
+            min-width: 0;
+            min-height: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+            border: 0.14cqw solid var(--border, #262931);
+            border-radius: var(--radius, 2cqw);
+            background: var(--surface, #16181d);
+            box-shadow: 0 1.2cqh 3cqh color-mix(in srgb, var(--bg, #0b0c10) 58%, transparent);
+          }
+
+          .lw-mark {
+            display: grid;
+            place-items: center;
+            width: min(5.5cqw, 9.5cqh);
+            aspect-ratio: 1;
+            border-radius: calc(var(--radius, 2cqw) * 0.72);
+            background: color-mix(in srgb, var(--fg, #f5f6f8) 72%, transparent);
+            color: var(--bg, #0b0c10);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: min(2.2cqw, 4cqh);
+            font-weight: 800;
+            letter-spacing: -0.04em;
+            line-height: 1;
+          }
+        </style>
+
+        <div
+          id="logo-wall-clip"
+          class="lw-clip clip"
+          data-start="0"
+          data-duration="5"
+          data-track-index="0"
+        >
+          <section class="lw-stage" aria-label="Trusted by logo wall">
+            <div class="lw-heading">Trusted by teams</div>
+            <div class="lw-grid"></div>
+          </section>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var compositionId = "logo-wall";
+            var stage = root.querySelector(".lw-stage");
+            var grid = root.querySelector(".lw-grid");
+
+            // EDIT ZONE: the runtime variable table is read once. These
+            // clamped values own DOM count, grid tracks, and stagger timing.
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var rawRows = Number(vars.rows);
+            var rows = Number.isFinite(rawRows) ? Math.round(rawRows) : 3;
+            rows = Math.max(2, Math.min(4, rows));
+
+            var rawCols = Number(vars.cols);
+            var cols = Number.isFinite(rawCols) ? Math.round(rawCols) : 5;
+            cols = Math.max(3, Math.min(6, cols));
+
+            var rawStagger = Number(vars.stagger);
+            var staggerMs = Number.isFinite(rawStagger) ? rawStagger : 45;
+            staggerMs = Math.max(20, Math.min(75, staggerMs));
+
+            var lettermarks = [
+              "AX",
+              "BL",
+              "CY",
+              "DQ",
+              "EV",
+              "FK",
+              "GN",
+              "HT",
+              "IP",
+              "JR",
+              "KS",
+              "LU",
+              "MW",
+              "NX",
+              "OZ",
+              "PA",
+              "QC",
+              "RF",
+              "SG",
+              "TJ",
+              "VK",
+              "WL",
+              "XM",
+              "YN",
+            ];
+            var cellCount = rows * cols;
+            var fragment = document.createDocumentFragment();
+
+            for (var index = 0; index < cellCount; index += 1) {
+              var cell = document.createElement("div");
+              var mark = document.createElement("span");
+              cell.className = "lw-cell";
+              cell.setAttribute("aria-hidden", "true");
+              mark.className = "lw-mark";
+              mark.textContent = lettermarks[index];
+              cell.appendChild(mark);
+              fragment.appendChild(cell);
+            }
+
+            grid.replaceChildren(fragment);
+            grid.style.setProperty("--lw-rows", String(rows));
+            grid.style.setProperty("--lw-cols", String(cols));
+
+            var cells = root.querySelectorAll(".lw-cell");
+
+            // RETIME RANGE: the 2.50s IN fits the largest public wall of 24
+            // cells at the maximum 75ms stagger plus the 0.55s cell settle.
+            // HOLD alone absorbs longer host durations.
+            var IN_BASE = 2.5;
+            var OUT_BASE = 0.5;
+            var ASSEMBLE_START_BASE = 0.15;
+            var CELL_DURATION_BASE = 0.55;
+
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "5"));
+            var totalBase = IN_BASE + OUT_BASE;
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var OUT_START = IN + HOLD;
+            var ASSEMBLE_START = ASSEMBLE_START_BASE * scale;
+            var CELL_DURATION = CELL_DURATION_BASE * scale;
+            var STAGGER_SECONDS = (staggerMs / 1000) * scale;
+
+            var timeline = gsap.timeline({ paused: true });
+
+            // IN: deterministic DOM-order assembly. power2.out is the GSAP
+            // owner of the shared --ease-standard entrance token.
+            timeline.fromTo(
+              cells,
+              { opacity: 0, scale: 0.94 },
+              {
+                opacity: 1,
+                scale: 1,
+                duration: CELL_DURATION,
+                ease: "power2.out",
+                stagger: { each: STAGGER_SECONDS, from: "start" },
+              },
+              ASSEMBLE_START,
+            );
+
+            // HOLD: deliberately still. OUT: the whole proof wall leaves once
+            // with the production exit curve, never during the elastic hold.
+            timeline.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+
+            timeline.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = timeline;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/marker-highlight/README.md b/docs/public/catalog/components/marker-highlight/README.md
new file mode 100644
index 0000000000..c67397ddd8
--- /dev/null
+++ b/docs/public/catalog/components/marker-highlight/README.md
@@ -0,0 +1,37 @@
+# marker-highlight
+
+The corpus emphasis unit: a line of display text settles in, then ONE hand-drawn marker stroke draws over the emphasized word on cue. Four styles, one mechanic: an SVG path revealed by a `getTotalLength` dash tween.
+
+3.5s authored, elastic HOLD (the lockup sits completely still until the frame cuts), exit `none` by default.
+
+## Variables
+
+| id              | type       | default                   | notes                                                                                                                                                                            |
+| --------------- | ---------- | ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `text`          | string     | `Ship it with confidence` | Full line; wraps and centers.                                                                                                                                                    |
+| `emphasis_word` | string     | `confidence`              | First case-insensitive substring match in `text` gets the marker. Empty or unmatched renders the line with no marker. Keep it a word or short phrase; it never wraps internally. |
+| `style`         | enum       | `highlight`               | `highlight` (thick swipe behind the word), `circle` (loop around it), `underline` (wavy rule beneath), `scribble` (zigzag across).                                               |
+| `draw_at`       | number (s) | `0.9`                     | Cue for the draw, relative to mount start. Clamped so the stroke and its settle pop finish before any exit.                                                                      |
+| `accent`        | enum       | `green`                   | Ink color: green rides `--brand`, blue rides `--accent`, violet rides `--accent-2`.                                                                                              |
+| `exit`          | enum       | `none`                    | `none` holds until the cut; `fade` and `up` depart over the final 0.45s.                                                                                                         |
+
+## Mount
+
+```html
+<div
+  class="clip"
+  data-composition-id="marker-highlight"
+  data-composition-src="./marker-highlight.html"
+  data-variable-values='{"text":"Zero render surprises","emphasis_word":"Zero","style":"circle","accent":"violet"}'
+  data-start="0"
+  data-duration="3.5"
+  data-track-index="0"
+></div>
+```
+
+Elastic root: no `data-width`/`data-height`; it fills whatever box the host clip gives it. Timeline registers under the literal `marker-highlight` key.
+
+## Notes
+
+- Marker paths are authored wobble in a fixed viewBox stretched with `preserveAspectRatio="none"`; the anisotropic stroke distortion is the hand-swiped nib feel, deliberately kept (no `non-scaling-stroke`, no `pathLength`).
+- Deterministic: no randomness, both dash endpoints explicit, seek-safe in either direction.
diff --git a/docs/public/catalog/components/marker-highlight/demo.html b/docs/public/catalog/components/marker-highlight/demo.html
new file mode 100644
index 0000000000..8315b5c3b0
--- /dev/null
+++ b/docs/public/catalog/components/marker-highlight/demo.html
@@ -0,0 +1,96 @@
+<!doctype html>
+<!--
+  marker-highlight demo. This standalone composition mounts the primitive
+  through data-composition-src. Non-default text, style, and accent values
+  prove the variable path while the primitive stays elastic to its host box.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Marker Highlight Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #0b0c0e);
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --brand: #71f5a7;
+        --accent: #61a8ff;
+        --accent-2: #c5a3ff;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+
+      .mount-box {
+        position: absolute;
+        width: 80%;
+        height: 56%;
+        left: 10%;
+        top: 22%;
+        container-type: size;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="marker-highlight-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="3.5"
+      data-fps="30"
+    >
+      <div
+        id="marker-highlight-mount"
+        class="mount-box clip"
+        data-composition-id="marker-highlight"
+        data-composition-src="./marker-highlight.html"
+        data-variable-values='{"text":"Zero render surprises","emphasis_word":"Zero","style":"circle","accent":"violet","draw_at":1.1}'
+        data-start="0"
+        data-duration="3.5"
+        data-track-index="0"
+        data-width="1536"
+        data-height="605"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["marker-highlight-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "marker-highlight.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/marker-highlight/marker-highlight.html b/docs/public/catalog/components/marker-highlight/marker-highlight.html
new file mode 100644
index 0000000000..07b6bdfd39
--- /dev/null
+++ b/docs/public/catalog/components/marker-highlight/marker-highlight.html
@@ -0,0 +1,365 @@
+<!doctype html>
+<!--
+  marker-highlight: HyperFrames video primitive (typography / emphasis)
+
+  The corpus emphasis unit: a short line of display text settles in, then ONE
+  hand-drawn marker stroke draws over the emphasized word on cue. Four marker
+  styles share the same mechanic: an SVG path revealed by a getTotalLength
+  dash tween (never the pathLength attribute, never non-scaling-stroke on a
+  dashed path; the anisotropic viewBox stretch is what gives the ink its
+  hand-swiped weight).
+
+  Variables:
+    text (string): the full line.
+    emphasis_word (string): first case-insensitive substring match inside
+      text gets the marker. Empty or unmatched renders the line with no
+      marker. Keep it a word or short phrase; it stays on one line.
+    style (highlight | circle | underline | scribble): marker shape.
+    draw_at (seconds): cue for the draw, relative to mount start. Clamped so
+      the stroke always completes before any exit begins.
+    accent (green | blue | violet): ink color via the contract token map.
+    exit (none | fade | up, default none): frame roots own transitions;
+      holds end films.
+
+  Envelope, fixed IN and OUT with elastic HOLD only (never time-scaled):
+    IN_BASE   = 0.55s  text rises into place
+    DRAW_BASE = 0.60s  marker stroke, anchored at draw_at, plus a small
+                       settle pop on the emphasized word
+    HOLD      = max(0, D - phases), completely still
+    OUT_BASE  = 0s for exit none, otherwise 0.45s
+    If D is shorter than the fixed phases, they compress together.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, has no data-width or
+  data-height, and registers one paused timeline under the literal
+  marker-highlight key.
+-->
+<html
+  lang="en"
+  data-composition-id="marker-highlight"
+  data-composition-duration="3.5"
+  data-composition-variables='[
+    { "id": "text", "type": "string", "role": "content", "label": "Text", "description": "Full line of display text.", "default": "Ship it with confidence" },
+    { "id": "emphasis_word", "type": "string", "role": "content", "label": "Emphasis word", "description": "First case-insensitive substring match in text receives the marker. Empty or unmatched draws no marker.", "default": "confidence" },
+    { "id": "style", "type": "enum", "role": "style", "label": "Marker style", "description": "Shape of the hand-drawn marker stroke.", "default": "highlight", "options": [{ "value": "highlight", "label": "Highlight" }, { "value": "circle", "label": "Circle" }, { "value": "underline", "label": "Underline" }, { "value": "scribble", "label": "Scribble" }] },
+    { "id": "draw_at", "type": "number", "role": "timing", "label": "Draw at", "description": "Second (from mount start) the marker starts drawing. Clamped so the stroke completes before any exit.", "default": 0.9, "min": 0, "step": 0.1, "unit": "s" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Marker ink color from the contract token map.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the lockup holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Marker Highlight</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="marker-highlight" data-duration="3.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            background: var(--bg, #0b0c0e);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .mh-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+          }
+
+          .mh-stage {
+            max-width: 86cqw;
+            text-align: center;
+            will-change: transform, opacity;
+          }
+
+          .mh-text {
+            margin: 0;
+            font-size: var(--mh-font-size, min(8cqw, 15cqh));
+            font-weight: 600;
+            line-height: 1.14;
+            letter-spacing: -0.03em;
+          }
+
+          .mh-em {
+            position: relative;
+            display: inline-block;
+            white-space: nowrap;
+            will-change: transform;
+          }
+
+          .mh-em-text {
+            position: relative;
+            z-index: 1;
+          }
+
+          .mh-mark {
+            position: absolute;
+            z-index: 0;
+            overflow: visible;
+          }
+
+          /* Per-style marker box around the emphasized word. Explicit
+             width/height (svg is a replaced element: inset-stretching would
+             fall back to its intrinsic viewBox ratio); then
+             preserveAspectRatio="none" stretches the authored path (and its
+             stroke) into the box, which is exactly the marker-nib distortion
+             we want on a dashed path. */
+          .mh-em[data-marker-style="highlight"] .mh-mark {
+            left: -3%;
+            top: 14%;
+            width: 106%;
+            height: 76%;
+          }
+
+          .mh-em[data-marker-style="underline"] .mh-mark {
+            left: -2%;
+            bottom: -14%;
+            width: 105%;
+            height: 22%;
+            z-index: 2;
+          }
+
+          .mh-em[data-marker-style="circle"] .mh-mark {
+            left: -13%;
+            top: -26%;
+            width: 126%;
+            height: 152%;
+            z-index: 2;
+          }
+
+          .mh-em[data-marker-style="scribble"] .mh-mark {
+            left: -2%;
+            top: 12%;
+            width: 104%;
+            height: 76%;
+            z-index: 2;
+          }
+        </style>
+
+        <div
+          id="marker-highlight-clip"
+          class="mh-clip clip"
+          data-start="0"
+          data-duration="3.5"
+          data-track-index="0"
+        >
+          <div class="mh-stage">
+            <p class="mh-text"></p>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            // Literal key: the flattening step strips data-composition-id off
+            // the mounted root, so reading it back would register "null".
+            var compositionId = "marker-highlight";
+            var stage = root.querySelector(".mh-stage");
+            var textEl = root.querySelector(".mh-text");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var text =
+              vars.text == null
+                ? "Ship it with confidence"
+                : String(vars.text).trim().replace(/\s+/g, " ");
+            var emphasis =
+              vars.emphasis_word == null
+                ? "confidence"
+                : String(vars.emphasis_word).trim().replace(/\s+/g, " ");
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            // Hand-drawn stroke library. Paths are authored in a fixed viewBox
+            // and stretched into the word box; wobble is baked into the
+            // control points, never randomized.
+            var markerStyles = {
+              highlight: {
+                viewBox: "0 0 100 40",
+                d: "M 3 24 C 22 20.5, 47 25.5, 68 22.5 C 79 21, 90 23, 97 21.5",
+                strokeWidth: 26,
+                opacity: 0.5,
+              },
+              circle: {
+                viewBox: "0 0 100 40",
+                d: "M 22 7 C 58 1, 95 8, 97 20 C 99 31, 74 38, 44 37 C 16 36, 2 29, 3 19 C 4 10, 22 4, 52 4.5",
+                strokeWidth: 2.8,
+                opacity: 1,
+              },
+              underline: {
+                viewBox: "0 0 100 12",
+                d: "M 2 7 C 20 4.5, 46 8.5, 66 6 C 80 4.5, 92 7.5, 98 5.5",
+                strokeWidth: 4.5,
+                opacity: 1,
+              },
+              scribble: {
+                viewBox: "0 0 100 40",
+                d: "M 6 13 C 34 9.5, 66 11, 94 9 C 60 15, 26 16, 7 20 C 36 18, 68 21, 93 18 C 62 25, 28 27, 8 29",
+                strokeWidth: 5,
+                opacity: 0.65,
+              },
+            };
+            var styleName = Object.prototype.hasOwnProperty.call(markerStyles, vars.style)
+              ? vars.style
+              : "highlight";
+            var marker = markerStyles[styleName];
+
+            // Split text around the first case-insensitive emphasis match.
+            // textContent nodes only, never innerHTML.
+            var matchIndex =
+              emphasis.length > 0 ? text.toLowerCase().indexOf(emphasis.toLowerCase()) : -1;
+            var emEl = null;
+            var pathEl = null;
+            if (matchIndex >= 0) {
+              var before = text.slice(0, matchIndex);
+              var matched = text.slice(matchIndex, matchIndex + emphasis.length);
+              var after = text.slice(matchIndex + emphasis.length);
+              if (before) textEl.appendChild(document.createTextNode(before));
+
+              emEl = document.createElement("span");
+              emEl.className = "mh-em";
+              emEl.setAttribute("data-marker-style", styleName);
+
+              var svgNS = "http://www.w3.org/2000/svg";
+              var svg = document.createElementNS(svgNS, "svg");
+              svg.setAttribute("class", "mh-mark");
+              svg.setAttribute("viewBox", marker.viewBox);
+              svg.setAttribute("preserveAspectRatio", "none");
+              svg.setAttribute("aria-hidden", "true");
+              pathEl = document.createElementNS(svgNS, "path");
+              pathEl.setAttribute("d", marker.d);
+              pathEl.setAttribute("fill", "none");
+              pathEl.setAttribute("stroke-width", String(marker.strokeWidth));
+              pathEl.setAttribute("stroke-linecap", "round");
+              pathEl.setAttribute("stroke-linejoin", "round");
+              // style.stroke, not the presentation attribute: var() only
+              // resolves as a CSS value.
+              pathEl.style.stroke = accentColors[accent];
+              svg.appendChild(pathEl);
+
+              var emText = document.createElement("span");
+              emText.className = "mh-em-text";
+              emText.textContent = matched;
+
+              emEl.appendChild(svg);
+              emEl.appendChild(emText);
+              textEl.appendChild(emEl);
+              if (after) textEl.appendChild(document.createTextNode(after));
+            } else {
+              textEl.textContent = text;
+            }
+            textEl.setAttribute("aria-label", text);
+
+            // Deterministic character-count fit; the line may wrap, the
+            // emphasized phrase never wraps internally.
+            var characters = Math.max(1, Array.from(text).length);
+            var fitted = Math.max(4.2, Math.min(9.5, 185 / characters));
+            root.style.setProperty("--mh-font-size", "min(" + fitted.toFixed(3) + "cqw, 16cqh)");
+
+            // RETIME RANGE: fixed phases; HOLD is the only elastic span.
+            var IN_BASE = 0.55;
+            var DRAW_BASE = 0.6;
+            var POP_BASE = 0.32;
+            var OUT_BASE = exit === "none" ? 0 : 0.45;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "3.5"));
+            var totalBase = IN_BASE + DRAW_BASE + OUT_BASE;
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var DRAW = DRAW_BASE * scale;
+            var POP = POP_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var OUT_START = duration - OUT;
+
+            var drawAtRaw = Number(vars.draw_at);
+            var drawAt = Number.isFinite(drawAtRaw) ? Math.max(0, drawAtRaw) : 0.9;
+            // The stroke and its settle pop always land before the exit.
+            drawAt = Math.min(drawAt, Math.max(0, OUT_START - (DRAW + POP)));
+
+            gsap.set(stage, { opacity: 0, y: "6cqh" });
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: the line rises into place.
+            tl.fromTo(
+              stage,
+              { opacity: 0, y: "6cqh" },
+              { opacity: 1, y: "0cqh", duration: IN, ease: "power3.out" },
+              0,
+            );
+
+            // DRAW: dash reveal from measured length; both endpoints explicit
+            // so any seek is correct without playing through.
+            if (pathEl) {
+              var length = pathEl.getTotalLength();
+              pathEl.style.strokeDasharray = String(length);
+              // Hidden until the cue: at dashoffset == length the round cap
+              // still paints a dot at the path start, so the ink is opacity 0
+              // until the exact frame the draw begins.
+              gsap.set(pathEl, { strokeDashoffset: length, opacity: 0 });
+              tl.set(pathEl, { opacity: marker.opacity }, drawAt);
+              tl.fromTo(
+                pathEl,
+                { strokeDashoffset: length },
+                { strokeDashoffset: 0, duration: DRAW, ease: "power2.inOut" },
+                drawAt,
+              );
+              // Settle pop on the emphasized word as the ink lands.
+              tl.fromTo(
+                emEl,
+                { scale: 1 },
+                {
+                  scale: 1.045,
+                  duration: POP / 2,
+                  ease: "power1.out",
+                  yoyo: true,
+                  repeat: 1,
+                },
+                drawAt + DRAW * 0.7,
+              );
+            }
+
+            // HOLD: completely still.
+
+            // OUT: optional departure; exit none holds until the frame cuts.
+            if (exit === "fade") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "up") {
+              tl.to(stage, { opacity: 0, y: "-7cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/mask-reveal-up/__hf-variables-preview.html b/docs/public/catalog/components/mask-reveal-up/__hf-variables-preview.html
new file mode 100644
index 0000000000..4aee087242
--- /dev/null
+++ b/docs/public/catalog/components/mask-reveal-up/__hf-variables-preview.html
@@ -0,0 +1,78 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Mask Reveal Up variables preview</title>
+    <style>
+      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #f7f7f8; }
+      #hf-vars-root { position: relative; width: 1920px; height: 1080px; }
+      #hf-vars-mount { position: absolute; inset: 0; display: grid; place-items: center; }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  </head>
+  <body>
+    <div id="hf-vars-root" data-composition-id="mask-reveal-up-variables-preview" data-start="0" data-width="1920" data-height="1080" data-duration="5" data-fps="30">
+      <div id="hf-vars-mount" class="clip" data-composition-id="mask-reveal-up" data-composition-src="./mask-reveal-up.html" data-start="0" data-duration="5" data-track-index="0" data-width="1920" data-height="1080"></div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["mask-reveal-up-variables-preview"] = gsap.timeline({ paused: true });
+    </script>
+    <script>
+      (function () {
+        var mount = document.getElementById("hf-vars-mount");
+        // The mount is filled asynchronously, and the demo script selects
+        // what it fills it with, so it cannot run before then.
+        var observer = new MutationObserver(build);
+        observer.observe(mount, { childList: true, subtree: true });
+        build();
+        function build() {
+          if (!mount.firstElementChild) return;
+          observer.disconnect();
+
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-mask-reveal-up span",
+          { opacity: 0, "--hf-line-x": "-36px", "--hf-line-y": "18px", "--hf-line-blur": "6px" },
+          {
+            opacity: 1,
+            "--hf-line-x": "0px",
+            "--hf-line-y": "0px",
+            "--hf-line-blur": "0px",
+            duration: 0.34,
+            stagger: 0.08,
+            ease: "power3.out",
+          },
+          startTime,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["mask-reveal-up-demo"] = tl;
+          var child = window.__timelines["mask-reveal-up-demo"];
+          delete window.__timelines["mask-reveal-up-demo"];
+          if (!child || typeof child.paused !== "function") return;
+          child.paused(false);
+          window.__timelines["mask-reveal-up-variables-preview"].add(child, 0);
+        }
+      })();
+    </script>
+<script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "mask-reveal-up.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/mask-reveal-up/demo.html b/docs/public/catalog/components/mask-reveal-up/demo.html
new file mode 100644
index 0000000000..269773c310
--- /dev/null
+++ b/docs/public/catalog/components/mask-reveal-up/demo.html
@@ -0,0 +1,107 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Mask Reveal Up - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        /* ponytail: zoom scales the whole wrapper without touching GSAP targets */
+        zoom: 2.6;
+      }
+      .hf-remocn-mask-reveal-up {
+        color: #18181b;
+        font-family: Inter, system-ui, sans-serif;
+        font-weight: 900;
+        letter-spacing: -0.04em;
+      }
+      .hf-remocn-mask-reveal-up {
+        display: grid;
+        gap: 10px;
+        font-size: 52px;
+        line-height: 1;
+        overflow: hidden;
+      }
+      .hf-remocn-mask-reveal-up span {
+        display: block;
+        transform: translate(var(--hf-line-x, 0px), var(--hf-line-y, 0px));
+        filter: blur(var(--hf-line-blur, 0px));
+        will-change: transform, filter, opacity;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="mask-reveal-up-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-mask-reveal-up">
+          <span>Every frame</span><span>under control</span>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-mask-reveal-up span",
+          { opacity: 0, "--hf-line-x": "-36px", "--hf-line-y": "18px", "--hf-line-blur": "6px" },
+          {
+            opacity: 1,
+            "--hf-line-x": "0px",
+            "--hf-line-y": "0px",
+            "--hf-line-blur": "0px",
+            duration: 0.34,
+            stagger: 0.08,
+            ease: "power3.out",
+          },
+          startTime,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["mask-reveal-up-demo"] = tl;
+      </script>
+    </div>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "mask-reveal-up.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/mask-reveal-up/mask-reveal-up.html b/docs/public/catalog/components/mask-reveal-up/mask-reveal-up.html
new file mode 100644
index 0000000000..efcce1bad3
--- /dev/null
+++ b/docs/public/catalog/components/mask-reveal-up/mask-reveal-up.html
@@ -0,0 +1,103 @@
+<!--
+  Mask Reveal Up - remocn typography primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Drive the timeline
+  integration from a paused GSAP timeline so renders remain deterministic.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result as a custom property
+  the CSS consumes. The timeline recipe below is untouched by them: it keeps
+  driving one horizontal offset, one vertical offset and one blur, and these
+  decide what that pair of offsets means on screen.
+
+    - origin (left | right | straight, default left): which side the lines
+      swing in from. left is the original diagonal, right mirrors it, straight
+      drops the horizontal part so the lines rise vertically.
+    - distance (close | standard | far, default standard): scales both offsets.
+      close covers half the run, far nearly double, in the same time.
+    - line_gap (tight | standard | loose, default standard): vertical space
+      between the two lines, 4px, 10px or 20px.
+    - tone (ink | paper | accent, default ink): line colour. ink is near-black
+      for light frames, paper near-white for dark ones, accent rides --brand.
+
+  On every default the result is identical to the original: lines arrive from
+  36px left and 18px below through a 6px blur, near-black, 10px apart.
+-->
+
+<div
+  class="hf-remocn-mask-reveal-up"
+  data-composition-variables='[
+    { "id": "origin", "type": "enum", "role": "motion", "label": "Origin", "description": "Which side the lines swing in from before they settle.", "default": "left", "options": [{ "value": "left", "label": "Left" }, { "value": "right", "label": "Right" }, { "value": "straight", "label": "Straight" }] },
+    { "id": "distance", "type": "enum", "role": "motion", "label": "Distance", "description": "Scales the travel offsets, so the lines cover a shorter or longer run in the same time.", "default": "standard", "options": [{ "value": "close", "label": "Close" }, { "value": "standard", "label": "Standard" }, { "value": "far", "label": "Far" }] },
+    { "id": "line_gap", "type": "enum", "role": "layout", "label": "Line gap", "description": "Vertical space between the stacked lines.", "default": "standard", "options": [{ "value": "tight", "label": "Tight" }, { "value": "standard", "label": "Standard" }, { "value": "loose", "label": "Loose" }] },
+    { "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Line colour: ink for light frames, paper for dark ones, accent rides --brand.", "default": "ink", "options": [{ "value": "ink", "label": "Ink" }, { "value": "paper", "label": "Paper" }, { "value": "accent", "label": "Accent" }] }
+  ]'
+><span>Every frame</span><span>under control</span></div>
+
+<style>
+  .hf-remocn-mask-reveal-up {
+    color: var(--hf-line-color, #18181b);
+    font-family: Inter, system-ui, sans-serif;
+    font-weight: 900;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-mask-reveal-up {
+    display: grid;
+    gap: var(--hf-line-gap, 10px);
+    font-size: 52px;
+    line-height: 1;
+    overflow: hidden;
+  }
+  .hf-remocn-mask-reveal-up span {
+    display: block;
+    transform: translate(
+      calc(var(--hf-line-x, 0px) * var(--hf-line-reach-x, 1)),
+      calc(var(--hf-line-y, 0px) * var(--hf-line-reach-y, 1))
+    );
+    filter: blur(var(--hf-line-blur, 0px));
+    will-change: transform, filter, opacity;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    var origins = { left: 1, right: -1, straight: 0 };
+    var reaches = { close: 0.5, standard: 1, far: 1.85 };
+    var gaps = { tight: "4px", standard: "10px", loose: "20px" };
+    var tones = {
+      ink: "#18181b",
+      paper: "#fafafa",
+      accent: "var(--brand, #34d399)",
+    };
+
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var originX = origins[pick(origins, vars.origin, "left")];
+    var reach = reaches[pick(reaches, vars.distance, "standard")];
+    var gap = gaps[pick(gaps, vars.line_gap, "standard")];
+    var tone = tones[pick(tones, vars.tone, "ink")];
+
+    var roots = document.querySelectorAll(".hf-remocn-mask-reveal-up");
+    for (var i = 0; i < roots.length; i += 1) {
+      roots[i].style.setProperty("--hf-line-reach-x", String(originX * reach));
+      roots[i].style.setProperty("--hf-line-reach-y", String(reach));
+      roots[i].style.setProperty("--hf-line-gap", gap);
+      roots[i].style.setProperty("--hf-line-color", tone);
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-mask-reveal-up span', { opacity: 0, '--hf-line-x': '-36px', '--hf-line-y': '18px', '--hf-line-blur': '6px' }, { opacity: 1, '--hf-line-x': '0px', '--hf-line-y': '0px', '--hf-line-blur': '0px', duration: 0.34, stagger: 0.08, ease: 'power3.out' }, startTime);
+-->
diff --git a/docs/public/catalog/components/masked-slide-reveal/__hf-variables-preview.html b/docs/public/catalog/components/masked-slide-reveal/__hf-variables-preview.html
new file mode 100644
index 0000000000..20777265b9
--- /dev/null
+++ b/docs/public/catalog/components/masked-slide-reveal/__hf-variables-preview.html
@@ -0,0 +1,78 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Masked Slide Reveal variables preview</title>
+    <style>
+      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #f7f7f8; }
+      #hf-vars-root { position: relative; width: 1920px; height: 1080px; }
+      #hf-vars-mount { position: absolute; inset: 0; display: grid; place-items: center; }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  </head>
+  <body>
+    <div id="hf-vars-root" data-composition-id="masked-slide-reveal-variables-preview" data-start="0" data-width="1920" data-height="1080" data-duration="5" data-fps="30">
+      <div id="hf-vars-mount" class="clip" data-composition-id="masked-slide-reveal" data-composition-src="./masked-slide-reveal.html" data-start="0" data-duration="5" data-track-index="0" data-width="1920" data-height="1080"></div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["masked-slide-reveal-variables-preview"] = gsap.timeline({ paused: true });
+    </script>
+    <script>
+      (function () {
+        var mount = document.getElementById("hf-vars-mount");
+        // The mount is filled asynchronously, and the demo script selects
+        // what it fills it with, so it cannot run before then.
+        var observer = new MutationObserver(build);
+        observer.observe(mount, { childList: true, subtree: true });
+        build();
+        function build() {
+          if (!mount.firstElementChild) return;
+          observer.disconnect();
+
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-masked-slide-reveal span",
+          { opacity: 0, "--hf-word-y": "22px", "--hf-word-scale": 0.92, "--hf-word-blur": "5px" },
+          {
+            opacity: 1,
+            "--hf-word-y": "0px",
+            "--hf-word-scale": 1,
+            "--hf-word-blur": "0px",
+            duration: 0.3,
+            stagger: 0.055,
+            ease: "power3.out",
+          },
+          startTime,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["masked-slide-reveal-demo"] = tl;
+          var child = window.__timelines["masked-slide-reveal-demo"];
+          delete window.__timelines["masked-slide-reveal-demo"];
+          if (!child || typeof child.paused !== "function") return;
+          child.paused(false);
+          window.__timelines["masked-slide-reveal-variables-preview"].add(child, 0);
+        }
+      })();
+    </script>
+<script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "masked-slide-reveal.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/masked-slide-reveal/demo.html b/docs/public/catalog/components/masked-slide-reveal/demo.html
new file mode 100644
index 0000000000..831bd601e3
--- /dev/null
+++ b/docs/public/catalog/components/masked-slide-reveal/demo.html
@@ -0,0 +1,111 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Masked Slide Reveal - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        min-width: 900px;
+        min-height: 500px;
+        padding: 64px;
+        /* ponytail: scale wrapper (not a GSAP target) to fill ~65% of 1920x1080 */
+        transform: scale(2.8);
+        transform-origin: center center;
+      }
+      .hf-remocn-masked-slide-reveal {
+        color: #18181b;
+        font-family: Inter, system-ui, sans-serif;
+        font-weight: 900;
+        letter-spacing: -0.04em;
+      }
+      .hf-remocn-masked-slide-reveal {
+        display: inline-flex;
+        gap: 12px;
+        font-size: 56px;
+        line-height: 1;
+      }
+      .hf-remocn-masked-slide-reveal span {
+        display: inline-block;
+        transform: translate(var(--hf-word-x, 0px), var(--hf-word-y, 0px))
+          scale(var(--hf-word-scale, 1));
+        filter: blur(var(--hf-word-blur, 0px));
+        will-change: transform, filter, opacity;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="masked-slide-reveal-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-masked-slide-reveal">
+          <span>Agents</span><span>compose</span><span>scenes</span>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-masked-slide-reveal span",
+          { opacity: 0, "--hf-word-y": "22px", "--hf-word-scale": 0.92, "--hf-word-blur": "5px" },
+          {
+            opacity: 1,
+            "--hf-word-y": "0px",
+            "--hf-word-scale": 1,
+            "--hf-word-blur": "0px",
+            duration: 0.3,
+            stagger: 0.055,
+            ease: "power3.out",
+          },
+          startTime,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["masked-slide-reveal-demo"] = tl;
+      </script>
+    </div>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "masked-slide-reveal.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/masked-slide-reveal/masked-slide-reveal.html b/docs/public/catalog/components/masked-slide-reveal/masked-slide-reveal.html
new file mode 100644
index 0000000000..f679ed161e
--- /dev/null
+++ b/docs/public/catalog/components/masked-slide-reveal/masked-slide-reveal.html
@@ -0,0 +1,115 @@
+<!--
+  Masked Slide Reveal - remocn typography primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Drive the timeline
+  integration from a paused GSAP timeline so renders remain deterministic.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or invalid, and writes the result as a custom property the
+  CSS consumes (or, for the words, as the spans themselves). The timeline
+  recipe below is untouched by them: it keeps driving one offset, one scale and
+  one blur across whatever spans are present.
+
+    - words (text, default Agents compose scenes): whitespace separated words,
+      one span each, capped at twelve. The stagger picks up the new count.
+    - size (24 to 120 px, default 56): type size of the words.
+    - distance (close | standard | far, default standard): scales the slide
+      offset. close covers half the run, far nearly double, in the same time.
+    - tone (ink | paper | accent, default ink): word colour. ink is near-black
+      for light frames, paper near-white for dark ones, accent rides --brand.
+
+  On every default the result is identical to the original: three 56px words in
+  near-black sliding up 22px out of the mask.
+-->
+
+<div
+  class="hf-remocn-masked-slide-reveal"
+  data-composition-variables='[
+    { "id": "words", "type": "string", "role": "content", "label": "Words", "description": "Whitespace separated words, one per revealed span. Up to twelve.", "default": "Agents compose scenes" },
+    { "id": "size", "type": "number", "role": "style", "label": "Size", "description": "Type size of the words in pixels.", "default": 56, "min": 24, "max": 120, "step": 4, "unit": "px" },
+    { "id": "distance", "type": "enum", "role": "motion", "label": "Distance", "description": "Scales the slide offset, so the words cover a shorter or longer run in the same time.", "default": "standard", "options": [{ "value": "close", "label": "Close" }, { "value": "standard", "label": "Standard" }, { "value": "far", "label": "Far" }] },
+    { "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Word colour: ink for light frames, paper for dark ones, accent rides --brand.", "default": "ink", "options": [{ "value": "ink", "label": "Ink" }, { "value": "paper", "label": "Paper" }, { "value": "accent", "label": "Accent" }] }
+  ]'
+>
+  <span>Agents</span><span>compose</span><span>scenes</span>
+</div>
+
+<style>
+  .hf-remocn-masked-slide-reveal {
+    color: var(--hf-word-color, #18181b);
+    font-family: Inter, system-ui, sans-serif;
+    font-weight: 900;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-masked-slide-reveal {
+    display: inline-flex;
+    gap: 12px;
+    font-size: var(--hf-word-size, 56px);
+    line-height: 1;
+  }
+  .hf-remocn-masked-slide-reveal span {
+    display: inline-block;
+    transform: translate(
+        var(--hf-word-x, 0px),
+        calc(var(--hf-word-y, 0px) * var(--hf-word-reach, 1))
+      )
+      scale(var(--hf-word-scale, 1));
+    filter: blur(var(--hf-word-blur, 0px));
+    will-change: transform, filter, opacity;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Anything missing or invalid returns to its declared default.
+    var reaches = { close: 0.5, standard: 1, far: 1.85 };
+    var tones = {
+      ink: "#18181b",
+      paper: "#fafafa",
+      accent: "var(--brand, #34d399)",
+    };
+
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var words =
+      typeof vars.words === "string" ? vars.words.trim().split(/\s+/).slice(0, 12) : [];
+    if (!words.length || !words[0]) {
+      words = ["Agents", "compose", "scenes"];
+    }
+
+    var size = typeof vars.size === "number" || typeof vars.size === "string" ? Number(vars.size) : NaN;
+    size = isFinite(size) && size > 0 ? Math.min(120, Math.max(24, size)) : 56;
+
+    var reach = reaches[pick(reaches, vars.distance, "standard")];
+    var tone = tones[pick(tones, vars.tone, "ink")];
+
+    var roots = document.querySelectorAll(".hf-remocn-masked-slide-reveal");
+    for (var i = 0; i < roots.length; i += 1) {
+      roots[i].style.setProperty("--hf-word-size", size + "px");
+      roots[i].style.setProperty("--hf-word-reach", String(reach));
+      roots[i].style.setProperty("--hf-word-color", tone);
+      while (roots[i].firstChild) {
+        roots[i].removeChild(roots[i].firstChild);
+      }
+      for (var j = 0; j < words.length; j += 1) {
+        var span = document.createElement("span");
+        span.textContent = words[j];
+        roots[i].appendChild(span);
+      }
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-masked-slide-reveal span', { opacity: 0, '--hf-word-y': '22px', '--hf-word-scale': 0.92, '--hf-word-blur': '5px' }, { opacity: 1, '--hf-word-y': '0px', '--hf-word-scale': 1, '--hf-word-blur': '0px', duration: 0.3, stagger: 0.055, ease: 'power3.out' }, startTime);
+-->
diff --git a/docs/public/catalog/components/match-cut/demo.html b/docs/public/catalog/components/match-cut/demo.html
new file mode 100644
index 0000000000..f401702759
--- /dev/null
+++ b/docs/public/catalog/components/match-cut/demo.html
@@ -0,0 +1,95 @@
+<!doctype html>
+<!--
+  match-cut demo. This standalone composition mounts match-cut.html inside a
+  sized host clip. Non-default labels and accent prove all variables flow
+  through the mount while the primitive remains elastic to the host box.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Match Cut Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0b0c0e;
+      }
+
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 44%, #171a20 0%, #0b0c0e 72%);
+      }
+
+      .mount-card {
+        width: 72%;
+        height: 72%;
+        left: 14%;
+        top: 14%;
+        container-type: size;
+        overflow: hidden;
+        border: 2px solid rgba(148, 163, 184, 0.22);
+        border-radius: 32px;
+        background: #0d121d;
+        box-shadow: 0 48px 120px rgba(0, 0, 0, 0.5);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="match-cut-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="match-cut-mount"
+        class="mount-card clip"
+        data-composition-id="match-cut"
+        data-composition-src="./match-cut.html"
+        data-variable-values='{"accent":"violet","label_a":"Launch","label_b":"Complete"}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="1382"
+        data-height="778"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["match-cut-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "match-cut.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/match-cut/match-cut.html b/docs/public/catalog/components/match-cut/match-cut.html
new file mode 100644
index 0000000000..42ed3db86f
--- /dev/null
+++ b/docs/public/catalog/components/match-cut/match-cut.html
@@ -0,0 +1,309 @@
+<!doctype html>
+<!--
+  match-cut: HyperFrames video primitive (transitions / match-cut / connect)
+
+  Concept: scene A drives a circle into a known center-frame geometry, then a
+  hard single-frame swap reveals scene B with a different circle in the exact
+  same geometry. Scene B begins shrinking immediately, so the cut lands while
+  the matched shape is moving rather than on a settled pose.
+
+  Variables:
+    - accent (green | blue | violet, default green): matched-circle color.
+    - label_a (string, default "Start"): scene A button label.
+    - label_b (string, default "Done"): scene B result label.
+
+  Envelope (fixed IN/OUT, elastic HOLD only, never timeScale):
+    IN_BASE  = 2.35s  scene A enters and accelerates into the hard cut, then
+               scene B decelerates into place while its content reveals
+    HOLD     = elastic = max(0, D - (IN_BASE + OUT_BASE)); the matched circle
+               drifts subtly so a longer mount stays alive
+    OUT_BASE = 0.50s  the completed scene fades cleanly
+    If D is shorter than IN_BASE + OUT_BASE, IN and OUT compress together and
+    HOLD becomes zero.
+
+  Sync point: hard-cut occurs at CUT_AT = 1.40s in the default four-second
+  duration, exactly frame 42 at 30 fps. Scene A opacity becomes 0 and scene B
+  opacity becomes 1 at the same timeline instant. There is no crossfade.
+
+  Mount contract: this is a template-wrapped sub-composition. The root has no
+  data-width or data-height, fills its host box, uses container query units,
+  and registers one paused timeline under the literal match-cut key.
+-->
+<html
+  lang="en"
+  data-composition-id="match-cut"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Color shared by the matched circles.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "label_a", "type": "string", "role": "content", "label": "Scene A label", "description": "Text inside the outgoing button.", "default": "Start" },
+    { "id": "label_b", "type": "string", "role": "content", "label": "Scene B label", "description": "Result text revealed after the cut.", "default": "Done" }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Match Cut</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="match-cut" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: #f8fafc;
+            font-family: Inter, system-ui, sans-serif;
+            pointer-events: none;
+          }
+
+          .mc-clip,
+          .mc-shell,
+          .mc-scene {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+          }
+
+          .mc-scene {
+            display: grid;
+            place-items: center;
+          }
+
+          .mc-scene-a {
+            background: radial-gradient(circle at 50% 50%, #182032 0%, #0b0f18 68%);
+          }
+
+          .mc-scene-b {
+            background: radial-gradient(circle at 50% 44%, #202b42 0%, #0d121d 72%);
+            opacity: 0;
+          }
+
+          /* Both actors share this one geometry owner. At the cut, each is
+             centered at scale 1, so their painted circles match exactly. */
+          .mc-circle {
+            display: grid;
+            place-items: center;
+            width: 32cqmin;
+            aspect-ratio: 1;
+            border-radius: 50%;
+            background: var(--mc-accent, #4ade80);
+            box-shadow: 0 3.2cqh 8cqh color-mix(in srgb, var(--mc-accent, #4ade80) 30%, transparent);
+            transform-origin: 50% 50%;
+            will-change: transform;
+          }
+
+          .mc-label-a {
+            display: block;
+            max-width: 78%;
+            overflow: hidden;
+            color: #081018;
+            font-size: 5.2cqmin;
+            font-weight: 780;
+            letter-spacing: -0.035em;
+            line-height: 1;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          .mc-circle-b {
+            color: #081018;
+          }
+
+          .mc-check {
+            width: 34%;
+            height: 22%;
+            border-left: 2.4cqmin solid currentColor;
+            border-bottom: 2.4cqmin solid currentColor;
+            transform: translateY(-8%) rotate(-45deg);
+          }
+
+          .mc-copy-b {
+            position: absolute;
+            top: 69%;
+            left: 12cqw;
+            right: 12cqw;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 1.6cqh;
+            text-align: center;
+          }
+
+          .mc-kicker,
+          .mc-label-b {
+            opacity: 0;
+          }
+
+          .mc-kicker {
+            color: color-mix(in srgb, var(--mc-accent, #4ade80) 76%, #f8fafc);
+            font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+            font-size: 2.1cqmin;
+            font-weight: 700;
+            letter-spacing: 0.18em;
+            text-transform: uppercase;
+          }
+
+          .mc-label-b {
+            display: block;
+            max-width: 74cqw;
+            overflow: hidden;
+            color: #f8fafc;
+            font-size: 6.8cqmin;
+            font-weight: 760;
+            letter-spacing: -0.04em;
+            line-height: 1.05;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+        </style>
+
+        <div
+          id="match-cut-clip"
+          class="mc-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="mc-shell">
+            <section class="mc-scene mc-scene-a" aria-label="Outgoing scene">
+              <div class="mc-circle mc-circle-a">
+                <span class="mc-label-a"></span>
+              </div>
+            </section>
+
+            <section class="mc-scene mc-scene-b" aria-label="Incoming scene">
+              <div class="mc-circle mc-circle-b" aria-hidden="true">
+                <span class="mc-check"></span>
+              </div>
+              <div class="mc-copy-b">
+                <span class="mc-kicker">Match complete</span>
+                <span class="mc-label-b"></span>
+              </div>
+            </section>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var shell = root.querySelector(".mc-shell");
+            var sceneA = root.querySelector(".mc-scene-a");
+            var sceneB = root.querySelector(".mc-scene-b");
+            var circleA = root.querySelector(".mc-circle-a");
+            var circleB = root.querySelector(".mc-circle-b");
+            var labelA = root.querySelector(".mc-label-a");
+            var labelB = root.querySelector(".mc-label-b");
+            var revealB = root.querySelectorAll(".mc-kicker, .mc-label-b");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var accentName =
+              vars.accent === "blue" || vars.accent === "violet" ? vars.accent : "green";
+            var accents = { green: "#4ade80", blue: "#60a5fa", violet: "#a78bfa" };
+            var labelAText = vars.label_a == null ? "Start" : String(vars.label_a);
+            var labelBText = vars.label_b == null ? "Done" : String(vars.label_b);
+
+            root.style.setProperty("--mc-accent", accents[accentName]);
+            labelA.textContent = labelAText;
+            labelB.textContent = labelBText;
+
+            var IN_BASE = 2.35;
+            var OUT_BASE = 0.5;
+            var CUT_AT_BASE = 1.4;
+            var A_APPROACH_BASE = 0.45;
+            var B_SETTLE_BASE = 0.65;
+            var COPY_DELAY_BASE = 0.1;
+            var COPY_IN_BASE = 0.55;
+
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var envelopeBase = IN_BASE + OUT_BASE;
+            var phaseScale = duration < envelopeBase ? duration / envelopeBase : 1;
+            var IN = IN_BASE * phaseScale;
+            var OUT = OUT_BASE * phaseScale;
+            var CUT_AT = CUT_AT_BASE * phaseScale;
+            var A_APPROACH = A_APPROACH_BASE * phaseScale;
+            var B_SETTLE = B_SETTLE_BASE * phaseScale;
+            var COPY_DELAY = COPY_DELAY_BASE * phaseScale;
+            var COPY_IN = COPY_IN_BASE * phaseScale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var HOLD_START = IN;
+            var OUT_START = IN + HOLD;
+
+            var tl = gsap.timeline({ paused: true });
+
+            tl.set(shell, { opacity: 0 }, 0);
+            tl.set(sceneA, { opacity: 1 }, 0);
+            tl.set(sceneB, { opacity: 0 }, 0);
+            tl.set(circleA, { scale: 0.54 }, 0);
+            tl.set(circleB, { scale: 1, y: 0 }, 0);
+            tl.set(revealB, { opacity: 0, y: "2.4cqh" }, 0);
+
+            tl.to(shell, { opacity: 1, duration: Math.min(0.3, IN), ease: "power2.out" }, 0);
+            tl.to(circleA, { scale: 0.64, duration: A_APPROACH, ease: "power3.out" }, 0);
+            tl.to(
+              circleA,
+              {
+                scale: 1,
+                duration: Math.max(0, CUT_AT - A_APPROACH),
+                ease: "power4.in",
+              },
+              A_APPROACH,
+            );
+
+            // HARD CUT: both opacity states change at the exact same instant.
+            tl.set(sceneA, { opacity: 0 }, CUT_AT);
+            tl.set(sceneB, { opacity: 1 }, CUT_AT);
+
+            // Scene B starts at the matching geometry and leaves the cut at
+            // peak speed, then decelerates into its smaller resting pose.
+            tl.to(circleB, { scale: 0.74, duration: B_SETTLE, ease: "power4.out" }, CUT_AT);
+            tl.to(
+              revealB,
+              {
+                opacity: 1,
+                y: 0,
+                duration: COPY_IN,
+                stagger: 0.08 * phaseScale,
+                ease: "power3.out",
+              },
+              CUT_AT + COPY_DELAY,
+            );
+
+            if (HOLD > 0) {
+              tl.to(
+                circleB,
+                {
+                  y: "-0.8cqh",
+                  duration: HOLD / 2,
+                  ease: "sine.inOut",
+                  yoyo: true,
+                  repeat: 1,
+                },
+                HOLD_START,
+              );
+            }
+
+            tl.to(shell, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["match-cut"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/matrix-decode/__hf-variables-preview.html b/docs/public/catalog/components/matrix-decode/__hf-variables-preview.html
new file mode 100644
index 0000000000..f10ef1ed42
--- /dev/null
+++ b/docs/public/catalog/components/matrix-decode/__hf-variables-preview.html
@@ -0,0 +1,70 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Matrix Decode variables preview</title>
+    <style>
+      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #f4f4f5; }
+      #hf-vars-root { position: relative; width: 1920px; height: 1080px; }
+      #hf-vars-mount { position: absolute; inset: 0; display: grid; place-items: center; }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  </head>
+  <body>
+    <div id="hf-vars-root" data-composition-id="matrix-decode-variables-preview" data-start="0" data-width="1920" data-height="1080" data-duration="5" data-fps="30">
+      <div id="hf-vars-mount" class="clip" data-composition-id="matrix-decode" data-composition-src="./matrix-decode.html" data-start="0" data-duration="5" data-track-index="0" data-width="1920" data-height="1080"></div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["matrix-decode-variables-preview"] = gsap.timeline({ paused: true });
+    </script>
+    <script>
+      (function () {
+        var mount = document.getElementById("hf-vars-mount");
+        // The mount is filled asynchronously, and the demo script selects
+        // what it fills it with, so it cannot run before then.
+        var observer = new MutationObserver(build);
+        observer.observe(mount, { childList: true, subtree: true });
+        build();
+        function build() {
+          if (!mount.firstElementChild) return;
+          observer.disconnect();
+
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-matrix-decode span",
+          { opacity: 0, y: 12 },
+          { opacity: 1, y: 0, duration: 0.18, stagger: 0.035, ease: "power2.out" },
+          startTime,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["matrix-decode-demo"] = tl;
+          var child = window.__timelines["matrix-decode-demo"];
+          delete window.__timelines["matrix-decode-demo"];
+          if (!child || typeof child.paused !== "function") return;
+          child.paused(false);
+          window.__timelines["matrix-decode-variables-preview"].add(child, 0);
+        }
+      })();
+    </script>
+<script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "matrix-decode.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/matrix-decode/demo.html b/docs/public/catalog/components/matrix-decode/demo.html
new file mode 100644
index 0000000000..b19dfa22c1
--- /dev/null
+++ b/docs/public/catalog/components/matrix-decode/demo.html
@@ -0,0 +1,111 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Matrix Decode - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f4f4f5;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      /* ponytail: scale on wrapper (not a GSAP target), zooms content ~3× for thumbnail legibility */
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        gap: 32px;
+        padding: 72px 96px;
+        background: #18181b;
+        border-radius: 20px;
+        box-shadow: 0 32px 80px rgba(0, 0, 0, 0.22);
+        transform: scale(3.2);
+        transform-origin: center center;
+      }
+      .demo-label {
+        font-size: 13px;
+        font-weight: 500;
+        letter-spacing: 0.12em;
+        text-transform: uppercase;
+        color: #71717a;
+      }
+      .hf-remocn-matrix-decode {
+        display: inline-flex;
+        gap: 4px;
+        font:
+          700 52px/1 ui-monospace,
+          SFMono-Regular,
+          Menlo,
+          monospace;
+        color: #4ade80;
+        text-shadow: 0 0 24px rgba(74, 222, 128, 0.45);
+      }
+      .hf-remocn-matrix-decode span {
+        display: inline-block;
+        min-width: 0.64em;
+        opacity: var(--hf-matrix-opacity, 1);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="matrix-decode-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="demo-label">Matrix Decode</div>
+        <div class="hf-remocn-matrix-decode" data-final="HYPERFRAMES">
+          <span>0</span><span>0</span><span>0</span><span>0</span><span>0</span><span>0</span
+          ><span>0</span><span>0</span><span>0</span><span>0</span>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-matrix-decode span",
+          { opacity: 0, y: 12 },
+          { opacity: 1, y: 0, duration: 0.18, stagger: 0.035, ease: "power2.out" },
+          startTime,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["matrix-decode-demo"] = tl;
+      </script>
+    </div>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "matrix-decode.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/matrix-decode/matrix-decode.html b/docs/public/catalog/components/matrix-decode/matrix-decode.html
new file mode 100644
index 0000000000..9442627864
--- /dev/null
+++ b/docs/public/catalog/components/matrix-decode/matrix-decode.html
@@ -0,0 +1,128 @@
+<!--
+  Matrix Decode - remocn typography primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Drive the timeline
+  integration from a paused GSAP timeline so renders remain deterministic.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or invalid, and writes the result as a custom property the
+  CSS consumes (or, for the target text, as the cells themselves). The timeline
+  recipe below is untouched by them: it keeps staggering whatever cells are
+  present.
+
+    - text (text, default HYPERFRAMES): the word the scramble resolves into.
+      One scrambling cell per character, up to 32. Also written to data-final,
+      which a decode routine can read.
+    - accent (green | blue | violet, default green): colour family of the cells
+      and of their glow.
+    - size (24 to 160 px, default 64): type size of the cells. The per-cell
+      minimum width is a fixed fraction of it, so the row scales as a whole.
+    - glow (none | standard | strong, default standard): halo strength behind
+      the cells, from no shadow at all to a heavy bloom.
+
+  On every default the result is identical to the original: eleven 64px green
+  cells with an 18px halo.
+-->
+
+<div
+  class="hf-remocn-matrix-decode"
+  data-final="HYPERFRAMES"
+  data-composition-variables='[
+    { "id": "text", "type": "string", "role": "content", "label": "Target text", "description": "Word the scramble resolves into. One scrambling cell per character, up to 32.", "default": "HYPERFRAMES" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Colour family of the cells and their glow.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "size", "type": "number", "role": "style", "label": "Size", "description": "Type size of the cells in pixels. Cell width follows it.", "default": 64, "min": 24, "max": 160, "step": 4, "unit": "px" },
+    { "id": "glow", "type": "enum", "role": "style", "label": "Glow", "description": "Strength of the halo behind the cells, from none to a heavy bloom.", "default": "standard", "options": [{ "value": "none", "label": "None" }, { "value": "standard", "label": "Standard" }, { "value": "strong", "label": "Strong" }] }
+  ]'
+>
+  <span>0</span><span>0</span><span>0</span><span>0</span><span>0</span><span>0</span><span>0</span
+  ><span>0</span><span>0</span><span>0</span><span>0</span>
+</div>
+
+<style>
+  .hf-remocn-matrix-decode {
+    color: #18181b;
+    font-family: Inter, system-ui, sans-serif;
+    font-weight: 900;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-matrix-decode {
+    display: inline-flex;
+    gap: 3px;
+    font:
+      900 64px/1 ui-monospace,
+      SFMono-Regular,
+      Menlo,
+      monospace;
+    font-size: var(--hf-matrix-size, 64px);
+    color: var(--hf-matrix-color, #16a34a);
+    text-shadow: 0 0 var(--hf-matrix-glow-radius, 18px)
+      rgba(var(--hf-matrix-glow-rgb, 22, 163, 74), var(--hf-matrix-glow-alpha, 0.28));
+  }
+  .hf-remocn-matrix-decode span {
+    display: inline-block;
+    min-width: 0.64em;
+    opacity: var(--hf-matrix-opacity, 1);
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Anything missing or invalid returns to its declared default.
+    var accents = {
+      green: { color: "#16a34a", rgb: "22, 163, 74" },
+      blue: { color: "#2563eb", rgb: "37, 99, 235" },
+      violet: { color: "#7c3aed", rgb: "124, 58, 237" },
+    };
+    var glows = {
+      none: { radius: "0px", alpha: "0" },
+      standard: { radius: "18px", alpha: "0.28" },
+      strong: { radius: "34px", alpha: "0.55" },
+    };
+
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var text = typeof vars.text === "string" ? vars.text.trim().slice(0, 32) : "";
+    if (!text) {
+      text = "HYPERFRAMES";
+    }
+
+    var size =
+      typeof vars.size === "number" || typeof vars.size === "string" ? Number(vars.size) : NaN;
+    size = isFinite(size) && size > 0 ? Math.min(160, Math.max(24, size)) : 64;
+
+    var accent = accents[pick(accents, vars.accent, "green")];
+    var glow = glows[pick(glows, vars.glow, "standard")];
+
+    var roots = document.querySelectorAll(".hf-remocn-matrix-decode");
+    for (var i = 0; i < roots.length; i += 1) {
+      roots[i].style.setProperty("--hf-matrix-size", size + "px");
+      roots[i].style.setProperty("--hf-matrix-color", accent.color);
+      roots[i].style.setProperty("--hf-matrix-glow-rgb", accent.rgb);
+      roots[i].style.setProperty("--hf-matrix-glow-radius", glow.radius);
+      roots[i].style.setProperty("--hf-matrix-glow-alpha", glow.alpha);
+      roots[i].setAttribute("data-final", text);
+      while (roots[i].firstChild) {
+        roots[i].removeChild(roots[i].firstChild);
+      }
+      for (var j = 0; j < text.length; j += 1) {
+        var cell = document.createElement("span");
+        cell.textContent = text.charAt(j) === " " ? "\u00a0" : "0";
+        roots[i].appendChild(cell);
+      }
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-matrix-decode span', { opacity: 0, y: 12 }, { opacity: 1, y: 0, duration: 0.18, stagger: 0.035, ease: 'power2.out' }, startTime);
+-->
diff --git a/docs/public/catalog/components/menu-morph/__hf-variables-preview.html b/docs/public/catalog/components/menu-morph/__hf-variables-preview.html
new file mode 100644
index 0000000000..f44aa0a37b
--- /dev/null
+++ b/docs/public/catalog/components/menu-morph/__hf-variables-preview.html
@@ -0,0 +1,90 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Menu Morph variables preview</title>
+    <style>
+      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #f4f4f5; }
+      #hf-vars-root { position: relative; width: 1920px; height: 1080px; }
+      #hf-vars-mount { position: absolute; inset: 0; display: grid; place-items: center; }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  </head>
+  <body>
+    <div id="hf-vars-root" data-composition-id="menu-morph-variables-preview" data-start="0" data-width="1920" data-height="1080" data-duration="5" data-fps="30">
+      <div id="hf-vars-mount" class="clip" data-composition-id="menu-morph" data-composition-src="./menu-morph.html" data-start="0" data-duration="5" data-track-index="0" data-width="1920" data-height="1080"></div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["menu-morph-variables-preview"] = gsap.timeline({ paused: true });
+    </script>
+    <script>
+      (function () {
+        var mount = document.getElementById("hf-vars-mount");
+        // The mount is filled asynchronously, and the demo script selects
+        // what it fills it with, so it cannot run before then.
+        var observer = new MutationObserver(build);
+        observer.observe(mount, { childList: true, subtree: true });
+        build();
+        function build() {
+          if (!mount.firstElementChild) return;
+          observer.disconnect();
+
+        const tl = gsap.timeline({ paused: true });
+        tl.fromTo(
+          ".hf-transition-menu-button",
+          { scale: 0.72, opacity: 0 },
+          { scale: 1, opacity: 1, duration: 0.34, ease: "back.out(1.8)" },
+          0.3,
+        );
+        tl.to(
+          ".hf-transition-menu-button span:nth-child(1)",
+          { y: 8, rotation: 45, duration: 0.24, ease: "power2.inOut" },
+          0.78,
+        );
+        tl.to(
+          ".hf-transition-menu-button span:nth-child(2)",
+          { opacity: 0, duration: 0.18, ease: "power1.out" },
+          0.78,
+        );
+        tl.to(
+          ".hf-transition-menu-button span:nth-child(3)",
+          { y: -8, rotation: -45, duration: 0.24, ease: "power2.inOut" },
+          0.78,
+        );
+        tl.fromTo(
+          ".hf-transition-menu-actions div",
+          { y: 28, opacity: 0, scale: 0.86 },
+          { y: 0, opacity: 1, scale: 1, duration: 0.26, stagger: 0.06, ease: "back.out(1.6)" },
+          0.96,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["menu-morph-demo"] = tl;
+          var child = window.__timelines["menu-morph-demo"];
+          delete window.__timelines["menu-morph-demo"];
+          if (!child || typeof child.paused !== "function") return;
+          child.paused(false);
+          window.__timelines["menu-morph-variables-preview"].add(child, 0);
+        }
+      })();
+    </script>
+<script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "menu-morph.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/menu-morph/demo.html b/docs/public/catalog/components/menu-morph/demo.html
new file mode 100644
index 0000000000..3a44aa507d
--- /dev/null
+++ b/docs/public/catalog/components/menu-morph/demo.html
@@ -0,0 +1,153 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Menu Morph - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f4f4f5;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        min-width: 760px;
+        min-height: 480px;
+        padding: 56px;
+        /* ponytail: zoom on the wrapper — GSAP animates children, not this element */
+        zoom: 3.4;
+      }
+      .hf-transition-menu-morph {
+        position: relative;
+        display: grid;
+        place-items: center;
+        width: 360px;
+        height: 280px;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-transition-menu-button {
+        z-index: 2;
+        display: grid;
+        place-items: center;
+        gap: 5px;
+        width: 68px;
+        height: 68px;
+        border: 0;
+        border-radius: 999px;
+        background: #18181b;
+        box-shadow: 0 22px 58px rgba(0, 0, 0, 0.22);
+      }
+      .hf-transition-menu-button span {
+        width: 24px;
+        height: 3px;
+        border-radius: 999px;
+        background: #ffffff;
+        transform-origin: center;
+      }
+      .hf-transition-menu-actions {
+        position: absolute;
+        display: flex;
+        gap: 10px;
+        bottom: 20px;
+      }
+      .hf-transition-menu-actions div {
+        padding: 10px 16px;
+        border-radius: 999px;
+        background: #ffffff;
+        color: #18181b;
+        font-size: 14px;
+        font-weight: 700;
+        box-shadow: 0 14px 34px rgba(0, 0, 0, 0.12);
+        border: 1px solid #e4e4e7;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="menu-morph-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-transition-menu-morph">
+          <button class="hf-transition-menu-button" type="button" aria-label="Menu">
+            <span></span><span></span><span></span>
+          </button>
+          <div class="hf-transition-menu-actions">
+            <div>Text</div>
+            <div>Image</div>
+            <div>Audio</div>
+          </div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        tl.fromTo(
+          ".hf-transition-menu-button",
+          { scale: 0.72, opacity: 0 },
+          { scale: 1, opacity: 1, duration: 0.34, ease: "back.out(1.8)" },
+          0.3,
+        );
+        tl.to(
+          ".hf-transition-menu-button span:nth-child(1)",
+          { y: 8, rotation: 45, duration: 0.24, ease: "power2.inOut" },
+          0.78,
+        );
+        tl.to(
+          ".hf-transition-menu-button span:nth-child(2)",
+          { opacity: 0, duration: 0.18, ease: "power1.out" },
+          0.78,
+        );
+        tl.to(
+          ".hf-transition-menu-button span:nth-child(3)",
+          { y: -8, rotation: -45, duration: 0.24, ease: "power2.inOut" },
+          0.78,
+        );
+        tl.fromTo(
+          ".hf-transition-menu-actions div",
+          { y: 28, opacity: 0, scale: 0.86 },
+          { y: 0, opacity: 1, scale: 1, duration: 0.26, stagger: 0.06, ease: "back.out(1.6)" },
+          0.96,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["menu-morph-demo"] = tl;
+      </script>
+    </div>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "menu-morph.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/menu-morph/menu-morph.html b/docs/public/catalog/components/menu-morph/menu-morph.html
new file mode 100644
index 0000000000..ba201f9673
--- /dev/null
+++ b/docs/public/catalog/components/menu-morph/menu-morph.html
@@ -0,0 +1,161 @@
+<!--
+  Menu Morph - transitions.dev-inspired primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Use the timeline
+  integration note at the bottom as the starting point for deterministic GSAP
+  animation.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or invalid, and writes the result as a custom property the
+  CSS consumes (or, for the actions, as the pills themselves). The timeline
+  recipe below is untouched by them: it still pops the button, crosses the two
+  outer bars and staggers whatever pills are present.
+
+    - actions (text, default Text, Image, Audio): comma separated labels for
+      the pills that fan out under the button, up to six. The stagger picks up
+      the new count.
+    - tone (ink | green | blue | violet, default ink): colour of the round
+      button behind the white bars. ink is a literal near-black; the other three
+      ride the composition's own brand, accent and accent-2 tokens and fall back
+      to that same ink when the composition declares none.
+    - size (52 to 112 px, default 68): diameter of the round button. The bar
+      width is a fixed fraction of it, so the whole glyph scales together.
+
+  On every default the result is identical to the original: a 68px near-black
+  button with 24px bars over three pills.
+-->
+
+<div
+  class="hf-transition-menu-morph"
+  data-composition-variables='[
+    { "id": "actions", "type": "string", "role": "content", "label": "Actions", "description": "Comma separated labels for the pills that fan out under the button. Up to six.", "default": "Text, Image, Audio" },
+    { "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Colour of the round button behind the white bars.", "default": "ink", "options": [{ "value": "ink", "label": "Ink" }, { "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "size", "type": "number", "role": "layout", "label": "Button size", "description": "Diameter of the round button in pixels. The bars scale with it.", "default": 68, "min": 52, "max": 112, "step": 4, "unit": "px" }
+  ]'
+>
+  <button class="hf-transition-menu-button" type="button" aria-label="Menu">
+    <span></span><span></span><span></span>
+  </button>
+  <div class="hf-transition-menu-actions">
+    <div>Text</div>
+    <div>Image</div>
+    <div>Audio</div>
+  </div>
+</div>
+
+<style>
+  .hf-transition-menu-morph {
+    position: relative;
+    display: grid;
+    place-items: center;
+    width: 360px;
+    height: 220px;
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-transition-menu-button {
+    z-index: 2;
+    display: grid;
+    place-items: center;
+    gap: 5px;
+    width: var(--hf-menu-size, 68px);
+    height: var(--hf-menu-size, 68px);
+    border: 0;
+    border-radius: 999px;
+    background: var(--hf-menu-bg, #18181b);
+    box-shadow: 0 22px 58px rgba(0, 0, 0, 0.22);
+  }
+  .hf-transition-menu-button span {
+    width: calc(var(--hf-menu-size, 68px) * 6 / 17);
+    height: 3px;
+    border-radius: 999px;
+    background: #ffffff;
+    transform-origin: center;
+  }
+  .hf-transition-menu-actions {
+    position: absolute;
+    display: flex;
+    gap: 10px;
+    bottom: 20px;
+  }
+  .hf-transition-menu-actions div {
+    padding: 9px 13px;
+    border-radius: 999px;
+    background: #ffffff;
+    color: #18181b;
+    font-size: 13px;
+    font-weight: 850;
+    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.12);
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Anything missing or invalid returns to its declared default.
+    // The button is the one accent-carrying element here, so the three
+    // chromatic options ride the composition's own tokens and fall back to ink.
+    var tones = {
+      ink: "#18181b",
+      green: "var(--brand, #18181b)",
+      blue: "var(--accent, #18181b)",
+      violet: "var(--accent-2, #18181b)",
+    };
+
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var labels = [];
+    if (typeof vars.actions === "string") {
+      var parts = vars.actions.split(",");
+      for (var p = 0; p < parts.length && labels.length < 6; p += 1) {
+        var label = parts[p].trim();
+        if (label) {
+          labels.push(label);
+        }
+      }
+    }
+    if (!labels.length) {
+      labels = ["Text", "Image", "Audio"];
+    }
+
+    var size =
+      typeof vars.size === "number" || typeof vars.size === "string" ? Number(vars.size) : NaN;
+    size = isFinite(size) && size > 0 ? Math.min(112, Math.max(52, size)) : 68;
+
+    var tone = tones[pick(tones, vars.tone, "ink")];
+
+    var roots = document.querySelectorAll(".hf-transition-menu-morph");
+    for (var i = 0; i < roots.length; i += 1) {
+      roots[i].style.setProperty("--hf-menu-size", size + "px");
+      roots[i].style.setProperty("--hf-menu-bg", tone);
+      var row = roots[i].querySelector(".hf-transition-menu-actions");
+      if (!row) {
+        continue;
+      }
+      while (row.firstChild) {
+        row.removeChild(row.firstChild);
+      }
+      for (var j = 0; j < labels.length; j += 1) {
+        var pill = document.createElement("div");
+        pill.textContent = labels[j];
+        row.appendChild(pill);
+      }
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-transition-menu-button', { scale: 0.72, opacity: 0 }, { scale: 1, opacity: 1, duration: 0.34, ease: 'back.out(1.8)' }, 0.3);
+  tl.to('.hf-transition-menu-button span:nth-child(1)', { y: 8, rotation: 45, duration: 0.24, ease: 'power2.inOut' }, 0.78);
+  tl.to('.hf-transition-menu-button span:nth-child(2)', { opacity: 0, duration: 0.18, ease: 'power1.out' }, 0.78);
+  tl.to('.hf-transition-menu-button span:nth-child(3)', { y: -8, rotation: -45, duration: 0.24, ease: 'power2.inOut' }, 0.78);
+  tl.fromTo('.hf-transition-menu-actions div', { y: 28, opacity: 0, scale: 0.86 }, { y: 0, opacity: 1, scale: 1, duration: 0.26, stagger: 0.06, ease: 'back.out(1.6)' }, 0.96);
+-->
diff --git a/docs/public/catalog/components/mesh-gradient-bg/demo.html b/docs/public/catalog/components/mesh-gradient-bg/demo.html
new file mode 100644
index 0000000000..d6cc60eae4
--- /dev/null
+++ b/docs/public/catalog/components/mesh-gradient-bg/demo.html
@@ -0,0 +1,193 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Mesh Gradient Background - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+        transform: scale(1.75);
+      }
+      .hf-remocn-mesh-gradient-bg {
+        --hf-accent: #2563eb;
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-mesh-gradient-bg {
+        position: relative;
+        width: 760px;
+        height: 428px;
+        overflow: hidden;
+        border-radius: 30px;
+        background: #080b12;
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+      }
+      .hf-remocn-mesh-gradient-bg .mesh {
+        position: absolute;
+        inset: -22%;
+        filter: blur(44px);
+        opacity: 0.88;
+        background:
+          radial-gradient(
+            circle at var(--hf-x1, 20%) var(--hf-y1, 30%),
+            #60a5fa 0 18%,
+            transparent 32%
+          ),
+          radial-gradient(
+            circle at var(--hf-x2, 76%) var(--hf-y2, 52%),
+            #f472b6 0 16%,
+            transparent 34%
+          ),
+          radial-gradient(
+            circle at var(--hf-x3, 46%) var(--hf-y3, 78%),
+            #34d399 0 18%,
+            transparent 34%
+          );
+      }
+      .hf-remocn-mesh-gradient-bg .card {
+        position: absolute;
+        inset: 74px 92px;
+        border: 1px solid rgba(255, 255, 255, 0.16);
+        border-radius: 26px;
+        background: rgba(255, 255, 255, 0.08);
+        color: #fff;
+        display: grid;
+        place-items: center;
+        text-align: center;
+        overflow: hidden;
+      }
+      .hf-remocn-mesh-gradient-bg .spot {
+        position: absolute;
+        width: 260px;
+        height: 260px;
+        border-radius: 50%;
+        background: radial-gradient(circle, rgba(255, 255, 255, 0.5), transparent 65%);
+        transform: translate(var(--hf-spot-x, 0px), var(--hf-spot-y, 0px));
+        mix-blend-mode: screen;
+      }
+      .hf-remocn-mesh-gradient-bg .particle {
+        position: absolute;
+        left: 50%;
+        top: 54%;
+        width: 12px;
+        height: 20px;
+        border-radius: 3px;
+        background: var(--c);
+        transform: translate(var(--hf-px, 0px), var(--hf-py, 0px)) rotate(var(--hf-pr, 0deg));
+        opacity: var(--hf-po, 0);
+      }
+      .hf-remocn-mesh-gradient-bg h3 {
+        margin: 0;
+        font-size: 44px;
+        letter-spacing: -0.04em;
+      }
+      .hf-remocn-mesh-gradient-bg p {
+        margin: 8px 0 0;
+        font-size: 18px;
+        color: rgba(255, 255, 255, 0.7);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="mesh-gradient-bg-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-mesh-gradient-bg">
+          <div class="mesh"></div>
+          <div class="card">
+            <div class="spot"></div>
+            <div>
+              <h3>Mesh Gradient Background</h3>
+              <p>A render-safe mesh gradient using animated radial layers.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-mesh-gradient-bg .mesh",
+          {
+            "--hf-x1": "18%",
+            "--hf-y1": "28%",
+            "--hf-x2": "78%",
+            "--hf-y2": "46%",
+            "--hf-x3": "44%",
+            "--hf-y3": "80%",
+          },
+          {
+            "--hf-x1": "34%",
+            "--hf-y1": "42%",
+            "--hf-x2": "62%",
+            "--hf-y2": "60%",
+            "--hf-x3": "58%",
+            "--hf-y3": "64%",
+            duration: 4,
+            ease: "sine.inOut",
+          },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-mesh-gradient-bg .spot",
+          { "--hf-spot-x": "-120px", "--hf-spot-y": "-70px" },
+          { "--hf-spot-x": "190px", "--hf-spot-y": "90px", duration: 3, ease: "sine.inOut" },
+          startTime,
+        );
+        const particles_mesh_gradient_bg = gsap.utils.toArray(
+          ".hf-remocn-mesh-gradient-bg .particle",
+        );
+        if (particles_mesh_gradient_bg.length) {
+          tl.fromTo(
+            particles_mesh_gradient_bg,
+            { "--hf-po": 0, "--hf-px": "0px", "--hf-py": "0px", "--hf-pr": "0deg" },
+            {
+              "--hf-po": 1,
+              "--hf-px": (i) => Math.cos(i * 0.83) * 250 + "px",
+              "--hf-py": (i) => -120 - Math.sin(i * 0.61) * 120 + "px",
+              "--hf-pr": (i) => 180 + i * 37 + "deg",
+              duration: 0.8,
+              stagger: 0.015,
+              ease: "power2.out",
+            },
+            startTime + 0.2,
+          );
+        }
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["mesh-gradient-bg-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/mesh-gradient-bg/mesh-gradient-bg.html b/docs/public/catalog/components/mesh-gradient-bg/mesh-gradient-bg.html
new file mode 100644
index 0000000000..44c9fd05cd
--- /dev/null
+++ b/docs/public/catalog/components/mesh-gradient-bg/mesh-gradient-bg.html
@@ -0,0 +1,101 @@
+<!--
+  Mesh Gradient Background - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-mesh-gradient-bg">
+  <div class="mesh"></div>
+  <div class="card">
+    <div class="spot"></div>
+    <div>
+      <h3>Mesh Gradient Background</h3>
+      <p>A render-safe mesh gradient using animated radial layers.</p>
+    </div>
+  </div>
+</div>
+
+<style>
+  .hf-remocn-mesh-gradient-bg {
+    --hf-accent: #2563eb;
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-mesh-gradient-bg {
+    position: relative;
+    width: 760px;
+    height: 428px;
+    overflow: hidden;
+    border-radius: 30px;
+    background: #080b12;
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+  }
+  .hf-remocn-mesh-gradient-bg .mesh {
+    position: absolute;
+    inset: -22%;
+    filter: blur(44px);
+    opacity: 0.88;
+    background:
+      radial-gradient(
+        circle at var(--hf-x1, 20%) var(--hf-y1, 30%),
+        #60a5fa 0 18%,
+        transparent 32%
+      ),
+      radial-gradient(
+        circle at var(--hf-x2, 76%) var(--hf-y2, 52%),
+        #f472b6 0 16%,
+        transparent 34%
+      ),
+      radial-gradient(circle at var(--hf-x3, 46%) var(--hf-y3, 78%), #34d399 0 18%, transparent 34%);
+  }
+  .hf-remocn-mesh-gradient-bg .card {
+    position: absolute;
+    inset: 74px 92px;
+    border: 1px solid rgba(255, 255, 255, 0.16);
+    border-radius: 26px;
+    background: rgba(255, 255, 255, 0.08);
+    color: #fff;
+    display: grid;
+    place-items: center;
+    text-align: center;
+    overflow: hidden;
+  }
+  .hf-remocn-mesh-gradient-bg .spot {
+    position: absolute;
+    width: 260px;
+    height: 260px;
+    border-radius: 50%;
+    background: radial-gradient(circle, rgba(255, 255, 255, 0.5), transparent 65%);
+    transform: translate(var(--hf-spot-x, 0px), var(--hf-spot-y, 0px));
+    mix-blend-mode: screen;
+  }
+  .hf-remocn-mesh-gradient-bg .particle {
+    position: absolute;
+    left: 50%;
+    top: 54%;
+    width: 12px;
+    height: 20px;
+    border-radius: 3px;
+    background: var(--c);
+    transform: translate(var(--hf-px, 0px), var(--hf-py, 0px)) rotate(var(--hf-pr, 0deg));
+    opacity: var(--hf-po, 0);
+  }
+  .hf-remocn-mesh-gradient-bg h3 {
+    margin: 0;
+    font-size: 44px;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-mesh-gradient-bg p {
+    margin: 8px 0 0;
+    color: rgba(255, 255, 255, 0.7);
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-mesh-gradient-bg .mesh', { '--hf-x1': '18%', '--hf-y1': '28%', '--hf-x2': '78%', '--hf-y2': '46%', '--hf-x3': '44%', '--hf-y3': '80%' }, { '--hf-x1': '34%', '--hf-y1': '42%', '--hf-x2': '62%', '--hf-y2': '60%', '--hf-x3': '58%', '--hf-y3': '64%', duration: 4, ease: 'sine.inOut' }, startTime); tl.fromTo('.hf-remocn-mesh-gradient-bg .spot', { '--hf-spot-x': '-120px', '--hf-spot-y': '-70px' }, { '--hf-spot-x': '190px', '--hf-spot-y': '90px', duration: 3, ease: 'sine.inOut' }, startTime); const particles_mesh_gradient_bg = gsap.utils.toArray('.hf-remocn-mesh-gradient-bg .particle'); if (particles_mesh_gradient_bg.length) { tl.fromTo(particles_mesh_gradient_bg, { '--hf-po': 0, '--hf-px': '0px', '--hf-py': '0px', '--hf-pr': '0deg' }, { '--hf-po': 1, '--hf-px': (i) => (Math.cos(i * 0.83) * 250) + 'px', '--hf-py': (i) => (-120 - Math.sin(i * 0.61) * 120) + 'px', '--hf-pr': (i) => (180 + i * 37) + 'deg', duration: 0.8, stagger: 0.015, ease: 'power2.out' }, startTime + 0.2); }
+-->
diff --git a/docs/public/catalog/components/micro-scale-fade/__hf-variables-preview.html b/docs/public/catalog/components/micro-scale-fade/__hf-variables-preview.html
new file mode 100644
index 0000000000..65b647d674
--- /dev/null
+++ b/docs/public/catalog/components/micro-scale-fade/__hf-variables-preview.html
@@ -0,0 +1,106 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Micro Scale Fade variables preview</title>
+    <style>
+      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #f5f5f4; }
+      #hf-vars-root { position: relative; width: 1920px; height: 1080px; }
+      #hf-vars-mount { position: absolute; inset: 0; display: grid; place-items: center; }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  </head>
+  <body>
+    <div id="hf-vars-root" data-composition-id="micro-scale-fade-variables-preview" data-start="0" data-width="1920" data-height="1080" data-duration="5" data-fps="30">
+      <div id="hf-vars-mount" class="clip" data-composition-id="micro-scale-fade" data-composition-src="./micro-scale-fade.html" data-start="0" data-duration="5" data-track-index="0" data-width="1920" data-height="1080"></div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["micro-scale-fade-variables-preview"] = gsap.timeline({ paused: true });
+    </script>
+    <script>
+      (function () {
+        var mount = document.getElementById("hf-vars-mount");
+        // The mount is filled asynchronously, and the demo script selects
+        // what it fills it with, so it cannot run before then.
+        var observer = new MutationObserver(build);
+        observer.observe(mount, { childList: true, subtree: true });
+        build();
+        function build() {
+          if (!mount.firstElementChild) return;
+          observer.disconnect();
+
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-micro-scale-fade .to",
+          { "--hf-clip-right": "100%", "--hf-to-x": "60px", "--hf-to-scale": 1.04 },
+          {
+            "--hf-clip-right": "0%",
+            "--hf-to-x": "0px",
+            "--hf-to-scale": 1,
+            duration: 0.9,
+            ease: "power3.inOut",
+          },
+          startTime,
+        );
+        tl.to(
+          ".hf-remocn-micro-scale-fade .from",
+          {
+            "--hf-from-x": "-70px",
+            "--hf-from-scale": 0.96,
+            "--hf-from-blur": "5px",
+            duration: 0.9,
+            ease: "power3.inOut",
+          },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-micro-scale-fade .fx",
+          { "--hf-fx-x": "-110%" },
+          { "--hf-fx-x": "110%", duration: 0.58, ease: "power2.inOut" },
+          startTime + 0.18,
+        );
+        tl.fromTo(
+          ".hf-remocn-micro-scale-fade .rgb",
+          { "--hf-rgb-opacity": 0, "--hf-rgb-x": "-16px" },
+          {
+            "--hf-rgb-opacity": 1,
+            "--hf-rgb-x": "16px",
+            repeat: 3,
+            yoyo: true,
+            duration: 0.07,
+            ease: "steps(1)",
+          },
+          startTime + 0.32,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["micro-scale-fade-demo"] = tl;
+          var child = window.__timelines["micro-scale-fade-demo"];
+          delete window.__timelines["micro-scale-fade-demo"];
+          if (!child || typeof child.paused !== "function") return;
+          child.paused(false);
+          window.__timelines["micro-scale-fade-variables-preview"].add(child, 0);
+        }
+      })();
+    </script>
+<script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "micro-scale-fade.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/micro-scale-fade/demo.html b/docs/public/catalog/components/micro-scale-fade/demo.html
new file mode 100644
index 0000000000..eda11eaef7
--- /dev/null
+++ b/docs/public/catalog/components/micro-scale-fade/demo.html
@@ -0,0 +1,182 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Micro Scale Fade - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f5f5f4;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+        /* ponytail: scale wrapper only — GSAP targets are children of .hf-remocn-micro-scale-fade */
+        transform: scale(1.7);
+        transform-origin: center center;
+      }
+      .hf-remocn-micro-scale-fade {
+        --hf-accent: #2563eb;
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-micro-scale-fade {
+        position: relative;
+        width: 760px;
+        height: 428px;
+        overflow: hidden;
+        border-radius: 30px;
+        background: #111827;
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+      }
+      .hf-remocn-micro-scale-fade .scene {
+        position: absolute;
+        inset: 0;
+        display: grid;
+        place-items: center;
+        font-weight: 900;
+        font-size: 58px;
+        letter-spacing: -0.05em;
+        color: #fff;
+      }
+      .hf-remocn-micro-scale-fade .from {
+        background: linear-gradient(135deg, #111827, #374151);
+        transform: translate(var(--hf-from-x, 0px), var(--hf-from-y, 0px))
+          scale(var(--hf-from-scale, 1));
+        filter: blur(var(--hf-from-blur, 0px));
+      }
+      .hf-remocn-micro-scale-fade .to {
+        background: linear-gradient(135deg, #2563eb, #7c3aed);
+        transform: translate(var(--hf-to-x, 0px), var(--hf-to-y, 0px)) scale(var(--hf-to-scale, 1));
+        clip-path: inset(
+          var(--hf-clip-top, 0%) var(--hf-clip-right, 100%) var(--hf-clip-bottom, 0%)
+            var(--hf-clip-left, 0%)
+        );
+      }
+      .hf-remocn-micro-scale-fade .fx {
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
+        mix-blend-mode: screen;
+        transform: translateX(var(--hf-fx-x, -110%));
+      }
+      .hf-remocn-micro-scale-fade .rgb {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        opacity: var(--hf-rgb-opacity, 0);
+        background: linear-gradient(
+          90deg,
+          rgba(239, 68, 68, 0.35),
+          transparent,
+          rgba(34, 211, 238, 0.35)
+        );
+        transform: translateX(var(--hf-rgb-x, 0px));
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="micro-scale-fade-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-micro-scale-fade">
+          <div class="scene from">Before</div>
+          <div class="scene to">Micro Scale Fade</div>
+          <div class="fx"></div>
+          <div class="rgb"></div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-micro-scale-fade .to",
+          { "--hf-clip-right": "100%", "--hf-to-x": "60px", "--hf-to-scale": 1.04 },
+          {
+            "--hf-clip-right": "0%",
+            "--hf-to-x": "0px",
+            "--hf-to-scale": 1,
+            duration: 0.9,
+            ease: "power3.inOut",
+          },
+          startTime,
+        );
+        tl.to(
+          ".hf-remocn-micro-scale-fade .from",
+          {
+            "--hf-from-x": "-70px",
+            "--hf-from-scale": 0.96,
+            "--hf-from-blur": "5px",
+            duration: 0.9,
+            ease: "power3.inOut",
+          },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-micro-scale-fade .fx",
+          { "--hf-fx-x": "-110%" },
+          { "--hf-fx-x": "110%", duration: 0.58, ease: "power2.inOut" },
+          startTime + 0.18,
+        );
+        tl.fromTo(
+          ".hf-remocn-micro-scale-fade .rgb",
+          { "--hf-rgb-opacity": 0, "--hf-rgb-x": "-16px" },
+          {
+            "--hf-rgb-opacity": 1,
+            "--hf-rgb-x": "16px",
+            repeat: 3,
+            yoyo: true,
+            duration: 0.07,
+            ease: "steps(1)",
+          },
+          startTime + 0.32,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["micro-scale-fade-demo"] = tl;
+      </script>
+    </div>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "micro-scale-fade.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/micro-scale-fade/micro-scale-fade.html b/docs/public/catalog/components/micro-scale-fade/micro-scale-fade.html
new file mode 100644
index 0000000000..ebf4626076
--- /dev/null
+++ b/docs/public/catalog/components/micro-scale-fade/micro-scale-fade.html
@@ -0,0 +1,159 @@
+<!--
+  Micro Scale Fade - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes either the scene wording or a
+  custom property the CSS above consumes. The timeline recipe below is
+  untouched by them: it keeps driving one clip, two offsets and one sweep, and
+  these decide what the scenes say, what colour the incoming one is, and how
+  far the offsets carry.
+
+    - fromLabel (any short text, default Before): wording on the outgoing
+      scene. Blank or non-text input falls back to the default.
+    - toLabel (any short text, default Micro Scale Fade): wording on the
+      incoming scene.
+    - accent (blue | green | ember, default blue): gradient the incoming scene
+      is painted with, from the blue to violet default through a green to blue
+      ramp to a warm orange to pink one. The outgoing slate scene never moves.
+    - travel (close | standard | far, default standard): scales the sideways
+      run both scenes cover during the wipe, half the distance or nearly double
+      it in the same time.
+
+  On every default the result is identical to the original: Before slides 70px
+  left under a blue to violet panel reading Micro Scale Fade.
+-->
+
+<div
+  class="hf-remocn-micro-scale-fade"
+  data-composition-variables='[
+    {"id": "fromLabel", "type": "string", "role": "content", "label": "From label", "description": "Wording on the outgoing scene.", "default": "Before"},
+    {"id": "toLabel", "type": "string", "role": "content", "label": "To label", "description": "Wording on the incoming scene.", "default": "Micro Scale Fade"},
+    {"id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Gradient the incoming scene is painted with.", "default": "blue", "options": [{"value": "blue", "label": "Blue"}, {"value": "green", "label": "Green"}, {"value": "ember", "label": "Ember"}]},
+    {"id": "travel", "type": "enum", "role": "motion", "label": "Travel", "description": "Scales the sideways run both scenes cover during the wipe.", "default": "standard", "options": [{"value": "close", "label": "Close"}, {"value": "standard", "label": "Standard"}, {"value": "far", "label": "Far"}]}
+  ]'
+>
+  <div class="scene from">Before</div>
+  <div class="scene to">Micro Scale Fade</div>
+  <div class="fx"></div>
+  <div class="rgb"></div>
+</div>
+
+<style>
+  .hf-remocn-micro-scale-fade {
+    --hf-accent: #2563eb;
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-micro-scale-fade {
+    position: relative;
+    width: 760px;
+    height: 428px;
+    overflow: hidden;
+    border-radius: 30px;
+    background: #111827;
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+  }
+  .hf-remocn-micro-scale-fade .scene {
+    position: absolute;
+    inset: 0;
+    display: grid;
+    place-items: center;
+    font-weight: 900;
+    font-size: 58px;
+    letter-spacing: -0.05em;
+    color: #fff;
+  }
+  .hf-remocn-micro-scale-fade .from {
+    background: linear-gradient(135deg, #111827, #374151);
+    transform: translate(
+        calc(var(--hf-from-x, 0px) * var(--hf-travel, 1)),
+        var(--hf-from-y, 0px)
+      )
+      scale(var(--hf-from-scale, 1));
+    filter: blur(var(--hf-from-blur, 0px));
+  }
+  .hf-remocn-micro-scale-fade .to {
+    background: linear-gradient(135deg, var(--hf-to-a, #2563eb), var(--hf-to-b, #7c3aed));
+    transform: translate(calc(var(--hf-to-x, 0px) * var(--hf-travel, 1)), var(--hf-to-y, 0px))
+      scale(var(--hf-to-scale, 1));
+    clip-path: inset(
+      var(--hf-clip-top, 0%) var(--hf-clip-right, 100%) var(--hf-clip-bottom, 0%)
+        var(--hf-clip-left, 0%)
+    );
+  }
+  .hf-remocn-micro-scale-fade .fx {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
+    mix-blend-mode: screen;
+    transform: translateX(var(--hf-fx-x, -110%));
+  }
+  .hf-remocn-micro-scale-fade .rgb {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    opacity: var(--hf-rgb-opacity, 0);
+    background: linear-gradient(
+      90deg,
+      rgba(239, 68, 68, 0.35),
+      transparent,
+      rgba(34, 211, 238, 0.35)
+    );
+    transform: translateX(var(--hf-rgb-x, 0px));
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    function text(value, fallback) {
+      return typeof value === "string" && value.trim() !== "" ? value.trim() : fallback;
+    }
+
+    var accents = {
+      blue: { a: "#2563eb", b: "#7c3aed" },
+      green: { a: "#059669", b: "#2563eb" },
+      ember: { a: "#f97316", b: "#db2777" },
+    };
+    var travels = { close: 0.5, standard: 1, far: 1.8 };
+
+    var accent = accents[pick(accents, vars.accent, "blue")];
+    var travel = travels[pick(travels, vars.travel, "standard")];
+    var fromLabel = text(vars.fromLabel, "Before");
+    var toLabel = text(vars.toLabel, "Micro Scale Fade");
+
+    var roots = document.querySelectorAll(".hf-remocn-micro-scale-fade");
+    for (var i = 0; i < roots.length; i += 1) {
+      var root = roots[i];
+      root.style.setProperty("--hf-to-a", accent.a);
+      root.style.setProperty("--hf-to-b", accent.b);
+      root.style.setProperty("--hf-travel", String(travel));
+      var from = root.querySelector(".from");
+      var to = root.querySelector(".to");
+      if (from) from.textContent = fromLabel;
+      if (to) to.textContent = toLabel;
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-micro-scale-fade .to', { '--hf-clip-right': '100%', '--hf-to-x': '60px', '--hf-to-scale': 1.04 }, { '--hf-clip-right': '0%', '--hf-to-x': '0px', '--hf-to-scale': 1, duration: 0.9, ease: 'power3.inOut' }, startTime); tl.to('.hf-remocn-micro-scale-fade .from', { '--hf-from-x': '-70px', '--hf-from-scale': 0.96, '--hf-from-blur': '5px', duration: 0.9, ease: 'power3.inOut' }, startTime); tl.fromTo('.hf-remocn-micro-scale-fade .fx', { '--hf-fx-x': '-110%' }, { '--hf-fx-x': '110%', duration: 0.58, ease: 'power2.inOut' }, startTime + 0.18); tl.fromTo('.hf-remocn-micro-scale-fade .rgb', { '--hf-rgb-opacity': 0, '--hf-rgb-x': '-16px' }, { '--hf-rgb-opacity': 1, '--hf-rgb-x': '16px', repeat: 3, yoyo: true, duration: 0.07, ease: 'steps(1)' }, startTime + 0.32);
+-->
diff --git a/docs/public/catalog/components/micro-transitions/__hf-variables-preview.html b/docs/public/catalog/components/micro-transitions/__hf-variables-preview.html
new file mode 100644
index 0000000000..bbc9e31f80
--- /dev/null
+++ b/docs/public/catalog/components/micro-transitions/__hf-variables-preview.html
@@ -0,0 +1,77 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Micro Transitions variables preview</title>
+    <style>
+      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #f4f4f5; }
+      #hf-vars-root { position: relative; width: 1920px; height: 1080px; }
+      #hf-vars-mount { position: absolute; inset: 0; display: grid; place-items: center; }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  </head>
+  <body>
+    <div id="hf-vars-root" data-composition-id="micro-transitions-variables-preview" data-start="0" data-width="1920" data-height="1080" data-duration="5" data-fps="30">
+      <div id="hf-vars-mount" class="clip" data-composition-id="micro-transitions" data-composition-src="./micro-transitions.html" data-start="0" data-duration="5" data-track-index="0" data-width="1920" data-height="1080"></div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["micro-transitions-variables-preview"] = gsap.timeline({ paused: true });
+    </script>
+    <script>
+      (function () {
+        var mount = document.getElementById("hf-vars-mount");
+        // The mount is filled asynchronously, and the demo script selects
+        // what it fills it with, so it cannot run before then.
+        var observer = new MutationObserver(build);
+        observer.observe(mount, { childList: true, subtree: true });
+        build();
+        function build() {
+          if (!mount.firstElementChild) return;
+          observer.disconnect();
+
+        const tl = gsap.timeline({ paused: true });
+        tl.to(
+          ".hf-micro-transitions",
+          { "--hf-micro-progress": 1, duration: 0.52, ease: "power3.out" },
+          0.55,
+        );
+        tl.to(
+          ".hf-micro-transitions",
+          { "--hf-micro-tab": 1, duration: 0.36, ease: "power3.out" },
+          1.15,
+        );
+        tl.to(
+          ".hf-micro-transitions",
+          { "--hf-micro-progress": 0, duration: 0.34, ease: "power2.in" },
+          3.4,
+        );
+        window.__timelines = window.__timelines || {};
+        window.__timelines["micro-transitions-demo"] = tl;
+          var child = window.__timelines["micro-transitions-demo"];
+          delete window.__timelines["micro-transitions-demo"];
+          if (!child || typeof child.paused !== "function") return;
+          child.paused(false);
+          window.__timelines["micro-transitions-variables-preview"].add(child, 0);
+        }
+      })();
+    </script>
+<script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "micro-transitions.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/micro-transitions/demo.html b/docs/public/catalog/components/micro-transitions/demo.html
new file mode 100644
index 0000000000..e1ef3d5a1f
--- /dev/null
+++ b/docs/public/catalog/components/micro-transitions/demo.html
@@ -0,0 +1,253 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Micro Transitions - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f4f4f5;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .frame {
+        transform: scale(1.12); /* ponytail: was 2.2; reduced so content fits ~65% of frame */
+      }
+      .hf-micro-transitions {
+        --hf-micro-progress: 0;
+        --hf-micro-tab: 0;
+        position: relative;
+        width: min(640px, 100%);
+        height: 360px;
+        font-family: Inter, system-ui, sans-serif;
+        color: #18181b;
+      }
+      .hf-micro-bell,
+      .hf-micro-dropdown,
+      .hf-micro-modal,
+      .hf-micro-tabs,
+      .hf-micro-tooltip,
+      .hf-micro-check {
+        position: absolute;
+        will-change: transform, opacity;
+      }
+      .hf-micro-bell {
+        top: 18px;
+        left: 28px;
+        width: 54px;
+        height: 54px;
+        border-radius: 18px;
+        background: #18181b;
+        box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
+      }
+      .hf-micro-bell::before {
+        content: "";
+        position: absolute;
+        inset: 15px 17px 13px;
+        border: 2px solid #fff;
+        border-radius: 12px 12px 9px 9px;
+      }
+      .hf-micro-bell span {
+        position: absolute;
+        top: -8px;
+        right: -8px;
+        min-width: 24px;
+        height: 24px;
+        display: grid;
+        place-items: center;
+        border: 3px solid #fff;
+        border-radius: 999px;
+        background: #ef4444;
+        color: #fff;
+        font-size: 12px;
+        font-weight: 850;
+        opacity: var(--hf-micro-progress);
+        transform: translate(
+            calc((1 - var(--hf-micro-progress)) * -7px),
+            calc((1 - var(--hf-micro-progress)) * 10px)
+          )
+          scale(calc(0.25 + var(--hf-micro-progress) * 0.75));
+      }
+      .hf-micro-dropdown {
+        top: 92px;
+        left: 28px;
+        width: 210px;
+        padding: 18px;
+        border: 1px solid #e4e4e7;
+        border-radius: 18px;
+        background: #fff;
+        opacity: var(--hf-micro-progress);
+        transform: translateY(calc((1 - var(--hf-micro-progress)) * -12px))
+          scale(calc(0.95 + var(--hf-micro-progress) * 0.05));
+        transform-origin: top left;
+        box-shadow: 0 24px 65px rgba(0, 0, 0, 0.16);
+      }
+      .hf-micro-dropdown strong,
+      .hf-micro-modal strong {
+        display: block;
+        font-size: 16px;
+      }
+      .hf-micro-dropdown p,
+      .hf-micro-modal span {
+        display: block;
+        margin: 8px 0 0;
+        color: #71717a;
+        font-size: 13px;
+        line-height: 1.4;
+      }
+      .hf-micro-modal {
+        top: 48px;
+        right: 34px;
+        width: 260px;
+        padding: 22px;
+        border: 1px solid #e4e4e7;
+        border-radius: 22px;
+        background: #fff;
+        opacity: var(--hf-micro-progress);
+        transform: translateY(calc((1 - var(--hf-micro-progress)) * 18px))
+          scale(calc(0.96 + var(--hf-micro-progress) * 0.04));
+        box-shadow: 0 32px 80px rgba(0, 0, 0, 0.2);
+      }
+      .hf-micro-tabs {
+        left: 260px;
+        bottom: 46px;
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 4px;
+        width: 210px;
+        padding: 4px;
+        border-radius: 14px;
+        background: #f4f4f5;
+        opacity: var(--hf-micro-progress);
+        transform: translateY(calc((1 - var(--hf-micro-progress)) * 14px));
+      }
+      .hf-micro-tabs i {
+        position: absolute;
+        top: 4px;
+        left: 4px;
+        width: calc((100% - 8px) / 2);
+        height: calc(100% - 8px);
+        border-radius: 11px;
+        background: #fff;
+        transform: translateX(calc(var(--hf-micro-tab) * 100%));
+        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
+      }
+      .hf-micro-tabs b {
+        position: relative;
+        z-index: 1;
+        display: grid;
+        place-items: center;
+        height: 38px;
+        color: #52525b;
+        font-size: 13px;
+      }
+      .hf-micro-tooltip {
+        right: 54px;
+        bottom: 48px;
+        padding: 8px 11px;
+        border-radius: 10px;
+        background: #18181b;
+        color: #fff;
+        font-size: 12px;
+        font-weight: 750;
+        opacity: var(--hf-micro-progress);
+        transform: translateY(calc((1 - var(--hf-micro-progress)) * 6px))
+          scale(calc(0.96 + var(--hf-micro-progress) * 0.04));
+      }
+      .hf-micro-check {
+        right: 116px;
+        bottom: 92px;
+        width: 48px;
+        height: 48px;
+        fill: none;
+        stroke: currentColor;
+        stroke-width: 5;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        opacity: var(--hf-micro-progress);
+      }
+      .hf-micro-check path {
+        stroke-dasharray: 42;
+        stroke-dashoffset: calc((1 - var(--hf-micro-progress)) * 42);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="micro-transitions-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="frame">
+        <div class="hf-micro-transitions" style="--hf-micro-progress: 0; --hf-micro-tab: 0">
+          <div class="hf-micro-bell"><span>3</span></div>
+          <div class="hf-micro-dropdown">
+            <strong>Actions</strong>
+            <p>Export, duplicate, archive</p>
+          </div>
+          <div class="hf-micro-modal">
+            <strong>Ready to publish?</strong><span>All checks passed.</span>
+          </div>
+          <div class="hf-micro-tabs"><i></i><b>Draft</b><b>Live</b></div>
+          <div class="hf-micro-tooltip">Copied</div>
+          <svg class="hf-micro-check" viewBox="0 0 48 48" aria-hidden="true">
+            <path d="M12 25l8 8 17-19" />
+          </svg>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        tl.to(
+          ".hf-micro-transitions",
+          { "--hf-micro-progress": 1, duration: 0.52, ease: "power3.out" },
+          0.55,
+        );
+        tl.to(
+          ".hf-micro-transitions",
+          { "--hf-micro-tab": 1, duration: 0.36, ease: "power3.out" },
+          1.15,
+        );
+        tl.to(
+          ".hf-micro-transitions",
+          { "--hf-micro-progress": 0, duration: 0.34, ease: "power2.in" },
+          3.4,
+        );
+        window.__timelines = window.__timelines || {};
+        window.__timelines["micro-transitions-demo"] = tl;
+      </script>
+    </div>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "micro-transitions.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/micro-transitions/micro-transitions.html b/docs/public/catalog/components/micro-transitions/micro-transitions.html
new file mode 100644
index 0000000000..7af4db071c
--- /dev/null
+++ b/docs/public/catalog/components/micro-transitions/micro-transitions.html
@@ -0,0 +1,264 @@
+<!--
+  Micro Transitions - transitions.dev-inspired UI motion pack for HyperFrames.
+
+  Includes six app-transition patterns in one copy-paste snippet:
+    badge pop, dropdown reveal, modal open, tab indicator, tooltip appear,
+    and success check draw.
+
+  Animate --hf-micro-progress from 0 to 1, then optionally animate
+  --hf-micro-tab from 0 to 1 for the segmented control.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes either the panel wording or a
+  custom property the CSS below consumes. The two progress drivers above are
+  untouched by them.
+
+    - badge (any short text, default 3): the count inside the red chip on the
+      bell. Blank or non-text input falls back to the default.
+    - tooltip (any short text, default Copied): wording inside the small dark
+      tooltip.
+    - tone (red | amber | violet, default red): colour of that badge chip, the
+      one accent-carrying element in the pack. red and amber are literal alert
+      conventions; violet rides the composition's own accent-2 token and falls
+      back to ink when the composition declares none.
+    - travel (close | standard | far, default standard): scales how far every
+      panel starts from its resting place, so the whole pack drifts half as far
+      or nearly twice as far into position over the same progress run. At full
+      progress each panel lands in exactly the same place.
+
+  On every default the result is identical to the original: a red 3 on the
+  bell, a Copied tooltip, and panels that rise between 6px and 18px.
+-->
+
+<div
+  class="hf-micro-transitions"
+  style="--hf-micro-progress: 0; --hf-micro-tab: 0"
+  data-composition-variables='[
+    {"id": "badge", "type": "string", "role": "content", "label": "Badge", "description": "Count inside the notification badge on the bell.", "default": "3"},
+    {"id": "tooltip", "type": "string", "role": "content", "label": "Tooltip", "description": "Wording inside the small dark tooltip.", "default": "Copied"},
+    {"id": "tone", "type": "enum", "role": "style", "label": "Badge tone", "description": "Colour of the notification badge chip.", "default": "red", "options": [{"value": "red", "label": "Red"}, {"value": "amber", "label": "Amber"}, {"value": "violet", "label": "Violet"}]},
+    {"id": "travel", "type": "enum", "role": "motion", "label": "Travel", "description": "Scales how far every panel starts from its resting place before it settles.", "default": "standard", "options": [{"value": "close", "label": "Close"}, {"value": "standard", "label": "Standard"}, {"value": "far", "label": "Far"}]}
+  ]'
+>
+  <div class="hf-micro-bell"><span>3</span></div>
+  <div class="hf-micro-dropdown">
+    <strong>Actions</strong>
+    <p>Export, duplicate, archive</p>
+  </div>
+  <div class="hf-micro-modal">
+    <strong>Ready to publish?</strong><span>All checks passed.</span>
+  </div>
+  <div class="hf-micro-tabs"><i></i><b>Draft</b><b>Live</b></div>
+  <div class="hf-micro-tooltip">Copied</div>
+  <svg class="hf-micro-check" viewBox="0 0 48 48" aria-hidden="true">
+    <path d="M12 25l8 8 17-19" />
+  </svg>
+</div>
+
+<style>
+  .hf-micro-transitions {
+    --hf-micro-progress: 0;
+    --hf-micro-tab: 0;
+    position: relative;
+    width: min(640px, 100%);
+    height: 360px;
+    font-family: Inter, system-ui, sans-serif;
+    color: #18181b;
+  }
+  .hf-micro-bell,
+  .hf-micro-dropdown,
+  .hf-micro-modal,
+  .hf-micro-tabs,
+  .hf-micro-tooltip,
+  .hf-micro-check {
+    position: absolute;
+    will-change: transform, opacity;
+  }
+  .hf-micro-bell {
+    top: 18px;
+    left: 28px;
+    width: 54px;
+    height: 54px;
+    border-radius: 18px;
+    background: #18181b;
+    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
+  }
+  .hf-micro-bell::before {
+    content: "";
+    position: absolute;
+    inset: 15px 17px 13px;
+    border: 2px solid #fff;
+    border-radius: 12px 12px 9px 9px;
+  }
+  .hf-micro-bell span {
+    position: absolute;
+    top: -8px;
+    right: -8px;
+    min-width: 24px;
+    height: 24px;
+    display: grid;
+    place-items: center;
+    border: 3px solid #fff;
+    border-radius: 999px;
+    background: var(--hf-micro-badge, #ef4444);
+    color: #fff;
+    font-size: 12px;
+    font-weight: 850;
+    opacity: var(--hf-micro-progress);
+    transform: translate(
+        calc((1 - var(--hf-micro-progress)) * -7px * var(--hf-micro-travel, 1)),
+        calc((1 - var(--hf-micro-progress)) * 10px * var(--hf-micro-travel, 1))
+      )
+      scale(calc(0.25 + var(--hf-micro-progress) * 0.75));
+  }
+  .hf-micro-dropdown {
+    top: 92px;
+    left: 28px;
+    width: 210px;
+    padding: 18px;
+    border: 1px solid #e4e4e7;
+    border-radius: 18px;
+    background: #fff;
+    opacity: var(--hf-micro-progress);
+    transform: translateY(calc((1 - var(--hf-micro-progress)) * -12px * var(--hf-micro-travel, 1)))
+      scale(calc(0.95 + var(--hf-micro-progress) * 0.05));
+    transform-origin: top left;
+    box-shadow: 0 24px 65px rgba(0, 0, 0, 0.16);
+  }
+  .hf-micro-dropdown strong,
+  .hf-micro-modal strong {
+    display: block;
+    font-size: 16px;
+  }
+  .hf-micro-dropdown p,
+  .hf-micro-modal span {
+    display: block;
+    margin: 8px 0 0;
+    color: #71717a;
+    font-size: 13px;
+    line-height: 1.4;
+  }
+  .hf-micro-modal {
+    top: 48px;
+    right: 34px;
+    width: 260px;
+    padding: 22px;
+    border: 1px solid #e4e4e7;
+    border-radius: 22px;
+    background: #fff;
+    opacity: var(--hf-micro-progress);
+    transform: translateY(calc((1 - var(--hf-micro-progress)) * 18px * var(--hf-micro-travel, 1)))
+      scale(calc(0.96 + var(--hf-micro-progress) * 0.04));
+    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.2);
+  }
+  .hf-micro-tabs {
+    left: 260px;
+    bottom: 46px;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 4px;
+    width: 210px;
+    padding: 4px;
+    border-radius: 14px;
+    background: #f4f4f5;
+    opacity: var(--hf-micro-progress);
+    transform: translateY(calc((1 - var(--hf-micro-progress)) * 14px * var(--hf-micro-travel, 1)));
+  }
+  .hf-micro-tabs i {
+    position: absolute;
+    top: 4px;
+    left: 4px;
+    width: calc((100% - 8px) / 2);
+    height: calc(100% - 8px);
+    border-radius: 11px;
+    background: #fff;
+    transform: translateX(calc(var(--hf-micro-tab) * 100%));
+    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
+  }
+  .hf-micro-tabs b {
+    position: relative;
+    z-index: 1;
+    display: grid;
+    place-items: center;
+    height: 38px;
+    color: #52525b;
+    font-size: 13px;
+  }
+  .hf-micro-tooltip {
+    right: 54px;
+    bottom: 48px;
+    padding: 8px 11px;
+    border-radius: 10px;
+    background: #18181b;
+    color: #fff;
+    font-size: 12px;
+    font-weight: 750;
+    opacity: var(--hf-micro-progress);
+    transform: translateY(calc((1 - var(--hf-micro-progress)) * 6px * var(--hf-micro-travel, 1)))
+      scale(calc(0.96 + var(--hf-micro-progress) * 0.04));
+  }
+  .hf-micro-check {
+    right: 116px;
+    bottom: 92px;
+    width: 48px;
+    height: 48px;
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 5;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    opacity: var(--hf-micro-progress);
+  }
+  .hf-micro-check path {
+    stroke-dasharray: 42;
+    stroke-dashoffset: calc((1 - var(--hf-micro-progress)) * 42);
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    function text(value, fallback) {
+      return typeof value === "string" && value.trim() !== "" ? value.trim() : fallback;
+    }
+
+    // The badge is the pack's one accent-carrying element. red and amber are
+    // literal alert conventions; violet rides the composition's own token and
+    // falls back to ink.
+    var tones = { red: "#ef4444", amber: "#f59e0b", violet: "var(--accent-2, #18181b)" };
+    var travels = { close: 0.5, standard: 1, far: 1.9 };
+
+    var tone = tones[pick(tones, vars.tone, "red")];
+    var travel = travels[pick(travels, vars.travel, "standard")];
+    var badgeText = text(vars.badge, "3");
+    var tooltipText = text(vars.tooltip, "Copied");
+
+    var roots = document.querySelectorAll(".hf-micro-transitions");
+    for (var i = 0; i < roots.length; i += 1) {
+      var root = roots[i];
+      root.style.setProperty("--hf-micro-badge", tone);
+      root.style.setProperty("--hf-micro-travel", String(travel));
+      var badge = root.querySelector(".hf-micro-bell span");
+      var tooltip = root.querySelector(".hf-micro-tooltip");
+      if (badge) badge.textContent = badgeText;
+      if (tooltip) tooltip.textContent = tooltipText;
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.to('.hf-micro-transitions', { '--hf-micro-progress': 1, duration: 0.5, ease: 'power3.out' }, startTime);
+  tl.to('.hf-micro-transitions', { '--hf-micro-tab': 1, duration: 0.35, ease: 'power3.out' }, startTime + 0.55);
+-->
diff --git a/docs/public/catalog/components/mk-emphasis-type/demo.html b/docs/public/catalog/components/mk-emphasis-type/demo.html
new file mode 100644
index 0000000000..dd55374ab3
--- /dev/null
+++ b/docs/public/catalog/components/mk-emphasis-type/demo.html
@@ -0,0 +1,100 @@
+<!doctype html>
+<!-- Demo plate for the catalog preview. Identical to mk-emphasis-type.html except the
+     root background, which is opaque here so the transparent overlay reads.
+     Not installed by `hyperframes add` - registry-item.json lists mk-emphasis-type.html only. -->
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #f2f4f7;
+        overflow: hidden;
+      }
+      /* ---- mk-emphasis-type ------------------------------------------------
+         Oversized low-contrast background word sliding slowly behind the
+         subject (the promo's "EMPHASIS" texture type). Decorative only —
+         keep it behind real content and mark it aria-hidden. */
+      .mk-emphasis {
+        --mk-font: "Inter", -apple-system, sans-serif;
+        --mk-emph-color: rgba(29, 29, 31, 0.07); /* dark scheme: rgba(245,245,247,0.08) */
+
+        position: absolute;
+        font-family: var(--mk-font);
+        font-weight: 600;
+        font-size: 260px;
+        letter-spacing: -0.02em;
+        line-height: 1;
+        white-space: nowrap;
+        text-transform: uppercase;
+        color: var(--mk-emph-color);
+        pointer-events: none;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Self-preview wrapper. WIRING: copy the .mk-emphasis CSS, the markup
+         below (keep aria-hidden + data-layout-allow-overflow — the word is
+         decorative and usually wider than the canvas), and the helpers. -->
+    <div
+      id="mk-emph-root"
+      data-composition-id="mk-emphasis-type"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div
+        class="mk-emphasis"
+        id="mk-emph-demo"
+        aria-hidden="true"
+        data-layout-allow-overflow
+        style="top: 400px; left: -40px"
+      >
+        Emphasis
+      </div>
+      <div
+        id="mk-emph-drv"
+        class="clip"
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        // ---- copy these helpers into the host script, then:
+        //   mkEmphasisIn(tl, "#mk-my-word", 1.0, { drift: -120, hold: 6 });
+        //   mkEmphasisOut(tl, "#mk-my-word", 7.5);
+        window.mkEmphasisIn = function (tl, target, at, opts) {
+          opts = opts || {};
+          var drift = opts.drift === undefined ? -100 : opts.drift;
+          var hold = opts.hold === undefined ? 5 : opts.hold;
+          gsap.set(target, { opacity: 0, x: 40 });
+          tl.to(target, { opacity: 1, duration: 1.0, ease: "power2.out" }, at);
+          tl.to(target, { x: 40 + drift, duration: hold, ease: "sine.inOut" }, at);
+        };
+        window.mkEmphasisOut = function (tl, target, at) {
+          tl.to(target, { opacity: 0, duration: 0.5, ease: "power2.in" }, at);
+        };
+
+        // Self-preview timeline (not part of the snippet you copy).
+        var tl = gsap.timeline({ paused: true });
+        window.mkEmphasisIn(tl, "#mk-emph-demo", 0.3, { drift: -110, hold: 3.2 });
+        window.mkEmphasisOut(tl, "#mk-emph-demo", 3.4);
+        tl.set("#mk-emph-root", { visibility: "hidden" }, 3.98);
+        window.__timelines["mk-emphasis-type"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/mk-emphasis-type/mk-emphasis-type.html b/docs/public/catalog/components/mk-emphasis-type/mk-emphasis-type.html
new file mode 100644
index 0000000000..35c30fab98
--- /dev/null
+++ b/docs/public/catalog/components/mk-emphasis-type/mk-emphasis-type.html
@@ -0,0 +1,97 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      /* ---- mk-emphasis-type ------------------------------------------------
+         Oversized low-contrast background word sliding slowly behind the
+         subject (the promo's "EMPHASIS" texture type). Decorative only —
+         keep it behind real content and mark it aria-hidden. */
+      .mk-emphasis {
+        --mk-font: "Inter", -apple-system, sans-serif;
+        --mk-emph-color: rgba(29, 29, 31, 0.07); /* dark scheme: rgba(245,245,247,0.08) */
+
+        position: absolute;
+        font-family: var(--mk-font);
+        font-weight: 600;
+        font-size: 260px;
+        letter-spacing: -0.02em;
+        line-height: 1;
+        white-space: nowrap;
+        text-transform: uppercase;
+        color: var(--mk-emph-color);
+        pointer-events: none;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Self-preview wrapper. WIRING: copy the .mk-emphasis CSS, the markup
+         below (keep aria-hidden + data-layout-allow-overflow — the word is
+         decorative and usually wider than the canvas), and the helpers. -->
+    <div
+      id="mk-emph-root"
+      data-composition-id="mk-emphasis-type"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div
+        class="mk-emphasis"
+        id="mk-emph-demo"
+        aria-hidden="true"
+        data-layout-allow-overflow
+        style="top: 400px; left: -40px"
+      >
+        Emphasis
+      </div>
+      <div
+        id="mk-emph-drv"
+        class="clip"
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        // ---- copy these helpers into the host script, then:
+        //   mkEmphasisIn(tl, "#mk-my-word", 1.0, { drift: -120, hold: 6 });
+        //   mkEmphasisOut(tl, "#mk-my-word", 7.5);
+        window.mkEmphasisIn = function (tl, target, at, opts) {
+          opts = opts || {};
+          var drift = opts.drift === undefined ? -100 : opts.drift;
+          var hold = opts.hold === undefined ? 5 : opts.hold;
+          gsap.set(target, { opacity: 0, x: 40 });
+          tl.to(target, { opacity: 1, duration: 1.0, ease: "power2.out" }, at);
+          tl.to(target, { x: 40 + drift, duration: hold, ease: "sine.inOut" }, at);
+        };
+        window.mkEmphasisOut = function (tl, target, at) {
+          tl.to(target, { opacity: 0, duration: 0.5, ease: "power2.in" }, at);
+        };
+
+        // Self-preview timeline (not part of the snippet you copy).
+        var tl = gsap.timeline({ paused: true });
+        window.mkEmphasisIn(tl, "#mk-emph-demo", 0.3, { drift: -110, hold: 3.2 });
+        window.mkEmphasisOut(tl, "#mk-emph-demo", 3.4);
+        tl.set("#mk-emph-root", { visibility: "hidden" }, 3.98);
+        window.__timelines["mk-emphasis-type"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/mk-usage-arc/demo.html b/docs/public/catalog/components/mk-usage-arc/demo.html
new file mode 100644
index 0000000000..91572b8962
--- /dev/null
+++ b/docs/public/catalog/components/mk-usage-arc/demo.html
@@ -0,0 +1,162 @@
+<!doctype html>
+<!-- Demo plate for the catalog preview. Identical to mk-usage-arc.html except the
+     root background, which is opaque here so the transparent overlay reads.
+     Not installed by `hyperframes add` - registry-item.json lists mk-usage-arc.html only. -->
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #f2f4f7;
+        overflow: hidden;
+      }
+      /* ---- mk-usage-arc ----------------------------------------------------
+         Hairline circular gauge: draw-on arc + centered value + tiny label.
+         The promo's "Usage" arc. Recolor via --mk-arc-color. */
+      .mk-arc {
+        --mk-font: "Inter", -apple-system, sans-serif;
+        --mk-ink: #1d1d1f;
+        --mk-ink-dim: #6e6e73;
+        --mk-accent: #0071e3;
+        --mk-arc-color: var(--mk-accent);
+        --mk-hairline: 3px;
+
+        position: absolute;
+        width: 220px;
+        height: 220px;
+        pointer-events: none;
+      }
+      .mk-arc svg {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+      }
+      .mk-arc-track {
+        fill: none;
+        stroke: rgba(29, 29, 31, 0.1);
+        stroke-width: var(--mk-hairline);
+      }
+      .mk-arc-fill {
+        fill: none;
+        stroke: var(--mk-arc-color);
+        stroke-width: var(--mk-hairline);
+        stroke-linecap: round;
+      }
+      .mk-arc-center {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 4px;
+        font-family: var(--mk-font);
+      }
+      .mk-arc-num {
+        font-weight: 600;
+        font-size: 46px;
+        letter-spacing: -0.02em;
+        color: var(--mk-ink);
+        font-variant-numeric: tabular-nums;
+      }
+      .mk-arc-label {
+        font-weight: 500;
+        font-size: 20px;
+        color: var(--mk-ink);
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Self-preview wrapper. WIRING: copy the .mk-arc CSS, the markup below,
+         and the helpers into your host. r=92 with 220px box; the helper reads
+         the circle's radius, so resizing the box + r just works. -->
+    <div
+      id="mk-arc-root"
+      data-composition-id="mk-usage-arc"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="mk-arc" id="mk-arc-demo" style="top: 430px; left: 850px">
+        <svg viewBox="0 0 220 220">
+          <circle class="mk-arc-track" cx="110" cy="110" r="92"></circle>
+          <circle
+            class="mk-arc-fill"
+            cx="110"
+            cy="110"
+            r="92"
+            transform="rotate(-90 110 110)"
+          ></circle>
+        </svg>
+        <div class="mk-arc-center">
+          <span class="mk-arc-num">0%</span>
+          <span class="mk-arc-label">Usage</span>
+        </div>
+      </div>
+      <div
+        id="mk-arc-drv"
+        class="clip"
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        // ---- copy these helpers into the host script, then:
+        //   mkArcIn(tl, "#mk-my-arc", 1.0, 0.76);  // draw to 76%, count the numeral
+        //   mkArcOut(tl, "#mk-my-arc", 8.5);
+        window.mkArcIn = function (tl, target, at, value) {
+          var el = document.querySelector(target);
+          var fill = el.querySelector(".mk-arc-fill");
+          var num = el.querySelector(".mk-arc-num");
+          var C = 2 * Math.PI * parseFloat(fill.getAttribute("r"));
+          gsap.set(el, { opacity: 0, y: 16 });
+          gsap.set(fill, { strokeDasharray: C, strokeDashoffset: C });
+          tl.to(el, { opacity: 1, y: 0, duration: 0.6, ease: "power3.out" }, at);
+          tl.to(
+            fill,
+            { strokeDashoffset: C * (1 - value), duration: 1.1, ease: "power2.inOut" },
+            at + 0.15,
+          );
+          var st = { v: 0 };
+          tl.to(
+            st,
+            {
+              v: value,
+              duration: 1.1,
+              ease: "power2.inOut",
+              onUpdate: function () {
+                num.textContent = Math.round(st.v * 100) + "%";
+              },
+            },
+            at + 0.15,
+          );
+        };
+        window.mkArcOut = function (tl, target, at) {
+          tl.to(target, { opacity: 0, y: -12, duration: 0.35, ease: "power2.in" }, at);
+        };
+
+        // Self-preview timeline (not part of the snippet you copy).
+        var tl = gsap.timeline({ paused: true });
+        window.mkArcIn(tl, "#mk-arc-demo", 0.4, 0.76);
+        window.mkArcOut(tl, "#mk-arc-demo", 3.4);
+        tl.set("#mk-arc-root", { visibility: "hidden" }, 3.98);
+        window.__timelines["mk-usage-arc"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/mk-usage-arc/mk-usage-arc.html b/docs/public/catalog/components/mk-usage-arc/mk-usage-arc.html
new file mode 100644
index 0000000000..08f4a537ba
--- /dev/null
+++ b/docs/public/catalog/components/mk-usage-arc/mk-usage-arc.html
@@ -0,0 +1,159 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      /* ---- mk-usage-arc ----------------------------------------------------
+         Hairline circular gauge: draw-on arc + centered value + tiny label.
+         The promo's "Usage" arc. Recolor via --mk-arc-color. */
+      .mk-arc {
+        --mk-font: "Inter", -apple-system, sans-serif;
+        --mk-ink: #1d1d1f;
+        --mk-ink-dim: #6e6e73;
+        --mk-accent: #0071e3;
+        --mk-arc-color: var(--mk-accent);
+        --mk-hairline: 3px;
+
+        position: absolute;
+        width: 220px;
+        height: 220px;
+        pointer-events: none;
+      }
+      .mk-arc svg {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+      }
+      .mk-arc-track {
+        fill: none;
+        stroke: rgba(29, 29, 31, 0.1);
+        stroke-width: var(--mk-hairline);
+      }
+      .mk-arc-fill {
+        fill: none;
+        stroke: var(--mk-arc-color);
+        stroke-width: var(--mk-hairline);
+        stroke-linecap: round;
+      }
+      .mk-arc-center {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 4px;
+        font-family: var(--mk-font);
+      }
+      .mk-arc-num {
+        font-weight: 600;
+        font-size: 46px;
+        letter-spacing: -0.02em;
+        color: var(--mk-ink);
+        font-variant-numeric: tabular-nums;
+      }
+      .mk-arc-label {
+        font-weight: 500;
+        font-size: 20px;
+        color: var(--mk-ink);
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Self-preview wrapper. WIRING: copy the .mk-arc CSS, the markup below,
+         and the helpers into your host. r=92 with 220px box; the helper reads
+         the circle's radius, so resizing the box + r just works. -->
+    <div
+      id="mk-arc-root"
+      data-composition-id="mk-usage-arc"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="mk-arc" id="mk-arc-demo" style="top: 430px; left: 850px">
+        <svg viewBox="0 0 220 220">
+          <circle class="mk-arc-track" cx="110" cy="110" r="92"></circle>
+          <circle
+            class="mk-arc-fill"
+            cx="110"
+            cy="110"
+            r="92"
+            transform="rotate(-90 110 110)"
+          ></circle>
+        </svg>
+        <div class="mk-arc-center">
+          <span class="mk-arc-num">0%</span>
+          <span class="mk-arc-label">Usage</span>
+        </div>
+      </div>
+      <div
+        id="mk-arc-drv"
+        class="clip"
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        // ---- copy these helpers into the host script, then:
+        //   mkArcIn(tl, "#mk-my-arc", 1.0, 0.76);  // draw to 76%, count the numeral
+        //   mkArcOut(tl, "#mk-my-arc", 8.5);
+        window.mkArcIn = function (tl, target, at, value) {
+          var el = document.querySelector(target);
+          var fill = el.querySelector(".mk-arc-fill");
+          var num = el.querySelector(".mk-arc-num");
+          var C = 2 * Math.PI * parseFloat(fill.getAttribute("r"));
+          gsap.set(el, { opacity: 0, y: 16 });
+          gsap.set(fill, { strokeDasharray: C, strokeDashoffset: C });
+          tl.to(el, { opacity: 1, y: 0, duration: 0.6, ease: "power3.out" }, at);
+          tl.to(
+            fill,
+            { strokeDashoffset: C * (1 - value), duration: 1.1, ease: "power2.inOut" },
+            at + 0.15,
+          );
+          var st = { v: 0 };
+          tl.to(
+            st,
+            {
+              v: value,
+              duration: 1.1,
+              ease: "power2.inOut",
+              onUpdate: function () {
+                num.textContent = Math.round(st.v * 100) + "%";
+              },
+            },
+            at + 0.15,
+          );
+        };
+        window.mkArcOut = function (tl, target, at) {
+          tl.to(target, { opacity: 0, y: -12, duration: 0.35, ease: "power2.in" }, at);
+        };
+
+        // Self-preview timeline (not part of the snippet you copy).
+        var tl = gsap.timeline({ paused: true });
+        window.mkArcIn(tl, "#mk-arc-demo", 0.4, 0.76);
+        window.mkArcOut(tl, "#mk-arc-demo", 3.4);
+        tl.set("#mk-arc-root", { visibility: "hidden" }, 3.98);
+        window.__timelines["mk-usage-arc"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/modal-morph/README.md b/docs/public/catalog/components/modal-morph/README.md
new file mode 100644
index 0000000000..d41dda171d
--- /dev/null
+++ b/docs/public/catalog/components/modal-morph/README.md
@@ -0,0 +1,53 @@
+# modal-morph
+
+The shared-element grow (Wave M9 experiment): a small card expands into a full panel with its children re-flowing continuously. FLIP-style: both layouts are real DOM measured exactly once at mount; the morph interpolates the container rect and applies it as transform only (translate + scaleX/scaleY, never width/height tweens) while keyed children counter-scale against the container and travel onto the lerp of their own two measured rects, all as pure functions of timeline time.
+
+4s authored, elastic HOLD, exit `none` by default.
+
+## Variables
+
+| id           | type   | default | notes                                                                                                               |
+| ------------ | ------ | ------- | ------------------------------------------------------------------------------------------------------------------- |
+| `from_scale` | number | `1`     | Multiplies the authored card footprint before the one-time measurement, clamped 0.5 to 1.5.                         |
+| `expand_at`  | number | `1.2`   | Seconds after mount when the grow begins.                                                                           |
+| `register`   | enum   | `calm`  | `calm` is a smooth inOut cubic; `snappy` is faster with a settle that never overshoots the target rect beyond 1.02. |
+| `accent`     | enum   | `green` | green rides `--brand`, blue rides `--accent`, violet rides `--accent-2`.                                            |
+| `exit`       | enum   | `none`  | `none` holds until the cut; `fade` departs opacity-only; `up` rises out.                                            |
+
+## Card content slot
+
+Place an inert template anywhere in the HOST page:
+
+```html
+<template data-slot="modal-morph-card">
+  <div data-morph-key="icon" class="my-icon"></div>
+  <div data-morph-key="name">Invoice #204</div>
+</template>
+```
+
+The slot content is cloned into BOTH the card body and the panel head, so every `data-morph-key` has a measured rect in each layout and re-flows between them during the morph. Slot content without any keys is wrapped and morphs as one block. With no slot, the primitive renders token defaults (accent dot, display title line, mono meta line) that re-flow from a stacked card to an inline panel header row.
+
+Panel furniture (skeleton tile grid, footer chips) is panel-only and fades up over the back half of the morph.
+
+## Mount
+
+```html
+<div
+  class="clip"
+  data-composition-id="modal-morph"
+  data-composition-src="./modal-morph.html"
+  data-variable-values='{"register":"snappy","from_scale":0.8,"accent":"blue","expand_at":0.9}'
+  data-start="0"
+  data-duration="4"
+  data-track-index="0"
+></div>
+```
+
+Elastic root: no `data-width`/`data-height`; it fills whatever box the host clip gives it. Timeline registers under the literal `modal-morph` key.
+
+## Notes
+
+- The FLIP law: measure once, then transform-only. Container scale is `lerpRect(card, panel, ease(p))` against the panel's natural size; each matched child sets `scale = want / (home * containerScale)` and a translate expressed in the scaled container space, so content re-flows instead of stretching.
+- The card and panel are separate authored layers that crossfade in the first 30% of the morph (both run the same rect math, mirrored), so each endpoint is pixel-crisp in its own styling.
+- `snappy` uses a back-out ease with c1 = 0.7 (analytic peak 1.0176 of the rect delta), under the 1.02 cap.
+- Deterministic: no Math.random, no wall clock, no incremental state; measurement happens synchronously at mount and every later frame is recomputed from `tl.time()` alone, so eventful seeks land identical frames in any order and either direction.
diff --git a/docs/public/catalog/components/modal-morph/demo.html b/docs/public/catalog/components/modal-morph/demo.html
new file mode 100644
index 0000000000..4d290f8b58
--- /dev/null
+++ b/docs/public/catalog/components/modal-morph/demo.html
@@ -0,0 +1,102 @@
+<!doctype html>
+<!--
+  modal-morph demo. FULL-BLEED light mount: the primitive fills the whole
+  1920x1080 frame on a light token block. Non-default register, from_scale,
+  expand_at, and accent values prove the variable path.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Modal Morph Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #eef0f3);
+      }
+
+      #root {
+        --bg: #eef0f3;
+        --fg: #14161b;
+        --muted: #5b6472;
+        --surface: #ffffff;
+        --border: #d3d8e0;
+        --brand: #3f3f46;
+        --accent: #3f3f46;
+        --accent-2: #3f3f46;
+        --radius: 18px;
+        --font-display: "Inter", system-ui, sans-serif;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 42%, #f7f8fa 0%, var(--bg, #eef0f3) 72%);
+      }
+
+      .mount-bleed {
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        container-type: size;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="modal-morph-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="modal-morph-mount"
+        class="mount-bleed clip"
+        data-composition-id="modal-morph"
+        data-composition-src="./modal-morph.html"
+        data-variable-values='{"register":"snappy","from_scale":0.8,"accent":"blue","expand_at":0.9}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="1920"
+        data-height="1080"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["modal-morph-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "modal-morph.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/modal-morph/modal-morph.html b/docs/public/catalog/components/modal-morph/modal-morph.html
new file mode 100644
index 0000000000..9d6bb7d6ab
--- /dev/null
+++ b/docs/public/catalog/components/modal-morph/modal-morph.html
@@ -0,0 +1,522 @@
+<!doctype html>
+<!--
+  modal-morph: HyperFrames video primitive (structure, Wave M9 experiment)
+
+  The shared-element grow: a small card expands into a full panel with its
+  children re-flowing continuously. FLIP-style: BOTH layouts (card and
+  panel) are real DOM, measured exactly ONCE at mount; from then on every
+  frame is a pure function of timeline time. The morph interpolates the
+  container rect and applies it as transform only (translate + scaleX/Y
+  from a fixed top-left origin); container width/height are NEVER
+  tweened. Children marked data-morph-key exist in both layouts; each
+  panel child counter-scales against the container and translates toward
+  the lerp of its own two measured rects, so content re-flows instead of
+  stretching. Panel-only furniture fades in late; the card crossfades out
+  early in the morph.
+
+  Card content is a SLOT. Callers supply content by placing an inert
+  template anywhere in the HOST page:
+
+    <template data-slot="modal-morph-card"> ... </template>
+
+  The slot content is cloned into BOTH the card body and the panel head.
+  Descendants carrying data-morph-key are paired across the two layouts;
+  slot content without keys is wrapped as one keyed block. With no slot,
+  the primitive renders token defaults (accent dot, display title line,
+  mono meta line) that re-flow from a stacked card to an inline panel
+  header row.
+
+  Variables (declared in data-composition-variables below):
+    - from_scale (number, default 1, clamped 0.5 to 1.5): multiplies the
+      authored card footprint before the one-time measurement.
+    - expand_at (number seconds, default 1.2): when the grow begins.
+    - register ("calm" | "snappy", default "calm"): calm is a smooth
+      inOut cubic; snappy is faster with a small settle that never
+      overshoots the target rect beyond 1.02.
+    - accent ("green" | "blue" | "violet", default "green"): green rides
+      --brand, blue rides --accent, violet rides --accent-2.
+    - exit ("none" | "fade" | "up", default "none").
+
+  Envelope, fixed IN and OUT with elastic HOLD only (never timeScale):
+    IN_BASE  = expand_at + MORPH (0.95s calm, 0.6s snappy) + 0.15s
+    HOLD     = max(0, D - IN - OUT)
+    OUT_BASE = 0.45s only when exit != none
+    If D < IN_BASE + OUT_BASE the whole envelope compresses together.
+
+  Determinism: layouts are measured once, synchronously, at mount; the
+  per-update apply recomputes every transform and opacity from tl.time()
+  alone (no Math.random, no wall clock, no incremental state). Eventful
+  seeks land identical frames in any order and either direction.
+
+  Mount contract: template-wrapped; #root fills the host box (no
+  data-width/height, container-type: size, cqmin units), styled via
+  #root only; one paused timeline under the LITERAL "modal-morph" key.
+-->
+<html
+  lang="en"
+  data-composition-id="modal-morph"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "from_scale", "type": "number", "role": "style", "label": "From scale", "description": "Multiplies the authored card footprint, clamped 0.5 to 1.5.", "default": 1 },
+    { "id": "expand_at", "type": "number", "role": "timing", "label": "Expand at", "description": "Seconds after mount when the card grows into the panel.", "default": 1.2 },
+    { "id": "register", "type": "enum", "role": "timing", "label": "Register", "description": "Morph feel. Snappy is faster with a settle capped at 1.02 of the target rect.", "default": "calm", "options": [{ "value": "calm", "label": "Calm" }, { "value": "snappy", "label": "Snappy" }] },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Accent color: green rides --brand, blue rides --accent, violet rides --accent-2.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the settled panel holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Modal Morph</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="modal-morph" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, "Inter", system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .mm-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .mm-stage {
+            position: absolute;
+            inset: 0;
+            will-change: transform, opacity;
+          }
+
+          /* Card layout: the small shared element, centered. */
+          .mm-cardbox {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+          }
+
+          .mm-card {
+            width: calc(36cqmin * var(--mm-from-scale, 1));
+            padding: var(--space-3, 3cqmin);
+            display: grid;
+            gap: var(--space-2, 2cqmin);
+            border: 0.18cqmin solid var(--border, #475569);
+            border-radius: var(--radius, 2.4cqmin);
+            background: var(--surface, #14171c);
+            box-shadow: 0 1.4cqmin 4.5cqmin color-mix(in srgb, var(--bg, #000000) 32%, transparent);
+          }
+
+          /* Panel layout: the destination surface. */
+          .mm-panel {
+            position: absolute;
+            left: 14cqw;
+            right: 14cqw;
+            top: 13cqh;
+            bottom: 13cqh;
+            padding: var(--space-3, 3cqmin);
+            display: grid;
+            grid-template-rows: auto 1fr auto;
+            gap: var(--space-3, 3cqmin);
+            border: 0.18cqmin solid var(--border, #475569);
+            border-radius: var(--radius, 2.4cqmin);
+            background: var(--surface, #14171c);
+            box-shadow: 0 2.2cqmin 7cqmin color-mix(in srgb, var(--bg, #000000) 36%, transparent);
+          }
+
+          .mm-panel-head {
+            display: flex;
+            align-items: center;
+            gap: var(--space-2, 2cqmin);
+          }
+
+          .mm-dot {
+            width: 3.4cqmin;
+            height: 3.4cqmin;
+            flex: none;
+            border-radius: 50%;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 72%, transparent);
+          }
+
+          .mm-title {
+            height: 2.4cqmin;
+            width: 24cqmin;
+            border-radius: 1.2cqmin;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 30%, transparent);
+          }
+
+          .mm-meta {
+            height: 1.5cqmin;
+            width: 15cqmin;
+            border-radius: 0.75cqmin;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 14%, transparent);
+          }
+
+          .mm-card .mm-title {
+            width: 76%;
+          }
+
+          .mm-card .mm-meta {
+            width: 52%;
+          }
+
+          /* Panel-only furniture: fades in late in the morph. */
+          /* No will-change on morphing layers: cached composited rasters
+             from a scaled state leak pixel noise into out-of-order seeks. */
+          .mm-body {
+            display: grid;
+            grid-template-columns: repeat(3, minmax(0, 1fr));
+            gap: var(--space-2, 2cqmin);
+            align-content: stretch;
+          }
+
+          .mm-tile {
+            border: 0.16cqmin solid var(--border, #475569);
+            border-radius: calc(var(--radius, 2.4cqmin) * 0.7);
+            background: color-mix(in srgb, var(--fg, #f8fafc) 5%, transparent);
+            display: grid;
+            align-content: end;
+            gap: 1.2cqmin;
+            padding: var(--space-2, 2cqmin);
+          }
+
+          .mm-tile-line {
+            height: 1.3cqmin;
+            border-radius: 0.65cqmin;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 16%, transparent);
+          }
+
+          .mm-tile-line.short {
+            width: 58%;
+          }
+
+          .mm-foot {
+            display: flex;
+            gap: var(--space-2, 2cqmin);
+          }
+
+          .mm-chip {
+            height: 3.4cqmin;
+            border-radius: 1.7cqmin;
+            padding: 0 2.4cqmin;
+            display: grid;
+            align-items: center;
+            border: 0.16cqmin solid var(--border, #475569);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
+            font-size: 1.5cqmin;
+            font-weight: 500;
+            letter-spacing: 0.08em;
+            color: var(--muted, #94a3b8);
+          }
+
+          .mm-chip.lead {
+            border-color: color-mix(in srgb, var(--mm-accent) 55%, transparent);
+            color: var(--mm-accent);
+          }
+        </style>
+
+        <div
+          id="modal-morph-clip"
+          class="mm-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="mm-stage">
+            <div class="mm-cardbox">
+              <div class="mm-card">
+                <div class="mm-slot-host">
+                  <div class="mm-dot" data-morph-key="dot"></div>
+                  <div class="mm-title" data-morph-key="title"></div>
+                  <div class="mm-meta" data-morph-key="meta"></div>
+                </div>
+              </div>
+            </div>
+            <div class="mm-panel">
+              <div class="mm-panel-head mm-slot-host">
+                <div class="mm-dot" data-morph-key="dot"></div>
+                <div class="mm-title" data-morph-key="title"></div>
+                <div class="mm-meta" data-morph-key="meta"></div>
+              </div>
+              <div class="mm-body">
+                <div class="mm-tile">
+                  <div class="mm-tile-line"></div>
+                  <div class="mm-tile-line short"></div>
+                </div>
+                <div class="mm-tile">
+                  <div class="mm-tile-line"></div>
+                  <div class="mm-tile-line short"></div>
+                </div>
+                <div class="mm-tile">
+                  <div class="mm-tile-line"></div>
+                  <div class="mm-tile-line short"></div>
+                </div>
+              </div>
+              <div class="mm-foot">
+                <div class="mm-chip lead">OPEN</div>
+                <div class="mm-chip">DETAILS</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".mm-stage");
+            var card = root.querySelector(".mm-card");
+            var panel = root.querySelector(".mm-panel");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var fromScaleRaw = parseFloat(vars.from_scale);
+            var fromScale = isFinite(fromScaleRaw) ? Math.min(1.5, Math.max(0.5, fromScaleRaw)) : 1;
+            var expandRaw = parseFloat(vars.expand_at);
+            var expandVar = isFinite(expandRaw) ? Math.max(0.2, expandRaw) : 1.2;
+            var register = vars.register === "snappy" ? "snappy" : "calm";
+            var accentColors = {
+              green: "var(--brand, #52525b)",
+              blue: "var(--accent, #52525b)",
+              violet: "var(--accent-2, #52525b)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            root.style.setProperty("--mm-accent", accentColors[accent]);
+            root.style.setProperty("--mm-from-scale", String(fromScale));
+
+            // SLOT: same content cloned into BOTH layouts so measured
+            // pairs exist for every key. Keyless slot content is wrapped
+            // as one keyed block.
+            var hostDoc = root.ownerDocument;
+            var slotTemplate = null;
+            try {
+              slotTemplate = hostDoc.querySelector('template[data-slot="modal-morph-card"]');
+            } catch (error) {
+              slotTemplate = null;
+            }
+            if (slotTemplate) {
+              var hosts = root.querySelectorAll(".mm-slot-host");
+              for (var h = 0; h < hosts.length; h += 1) {
+                var content = hostDoc.importNode(slotTemplate.content, true);
+                var probe = hostDoc.createElement("div");
+                probe.appendChild(content);
+                if (!probe.querySelector("[data-morph-key]")) {
+                  probe.setAttribute("data-morph-key", "slot");
+                }
+                hosts[h].textContent = "";
+                hosts[h].appendChild(probe);
+              }
+            }
+
+            // ONE-TIME measurement of both real layouts (the FLIP "first"
+            // and "last"). Everything after this line is pure f(t).
+            var stageRect = stage.getBoundingClientRect();
+            function measure(el) {
+              var r = el.getBoundingClientRect();
+              return {
+                x: r.left - stageRect.left,
+                y: r.top - stageRect.top,
+                w: Math.max(1, r.width),
+                h: Math.max(1, r.height),
+              };
+            }
+            var cardRect = measure(card);
+            var panelRect = measure(panel);
+
+            function collectKids(container) {
+              var map = {};
+              var nodes = container.querySelectorAll("[data-morph-key]");
+              for (var i = 0; i < nodes.length; i += 1) {
+                map[nodes[i].getAttribute("data-morph-key")] = {
+                  el: nodes[i],
+                  rect: measure(nodes[i]),
+                };
+              }
+              return map;
+            }
+            var cardKids = collectKids(card);
+            var panelKids = collectKids(panel);
+
+            // Matched pairs: for each layer we keep, per child, its OWN
+            // layout rect (home) plus the counterpart rect (away).
+            function pairs(ownKids, otherKids) {
+              var list = [];
+              for (var key in ownKids) {
+                if (Object.prototype.hasOwnProperty.call(otherKids, key)) {
+                  list.push({
+                    el: ownKids[key].el,
+                    home: ownKids[key].rect,
+                    away: otherKids[key].rect,
+                  });
+                }
+              }
+              return list;
+            }
+            var panelPairs = pairs(panelKids, cardKids);
+            var cardPairs = pairs(cardKids, panelKids);
+            var fades = panel.querySelectorAll(".mm-body, .mm-foot");
+
+            // Fixed origins so the rect math is exact.
+            gsap.set([card, panel], { transformOrigin: "0 0" });
+            for (var pp = 0; pp < panelPairs.length; pp += 1) {
+              gsap.set(panelPairs[pp].el, { transformOrigin: "0 0" });
+            }
+            for (var cp = 0; cp < cardPairs.length; cp += 1) {
+              gsap.set(cardPairs[cp].el, { transformOrigin: "0 0" });
+            }
+
+            // Envelope: fixed IN/OUT, elastic HOLD, never time-scaled.
+            var MORPH_BASE = register === "snappy" ? 0.6 : 0.95;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var EXPAND_BASE = Math.min(expandVar, Math.max(0.2, duration - 0.6));
+            var IN_BASE = EXPAND_BASE + MORPH_BASE + 0.15;
+            var OUT_BASE = exit === "none" ? 0 : 0.45;
+            var totalBase = Math.max(0.001, IN_BASE + OUT_BASE);
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var EXPAND = EXPAND_BASE * scale;
+            var MORPH = MORPH_BASE * scale;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var OUT_START = IN + HOLD;
+            var ENTER = 0.3 * scale;
+
+            function clamp01(v) {
+              return v < 0 ? 0 : v > 1 ? 1 : v;
+            }
+            // calm: cubic inOut, no overshoot.
+            function calmEase(u) {
+              return u < 0.5 ? 4 * u * u * u : 1 - 4 * (1 - u) * (1 - u) * (1 - u);
+            }
+            // snappy: back.out with c1 = 0.7; analytic max 1.0176, under
+            // the 1.02 cap (and interpolating the rect keeps the scale
+            // overshoot strictly below 2% of target).
+            function snappyEase(u) {
+              var c1 = 0.7;
+              var c3 = c1 + 1;
+              var v = u - 1;
+              return 1 + c3 * v * v * v + c1 * v * v;
+            }
+            var ease = register === "snappy" ? snappyEase : calmEase;
+
+            function lerp(a, b, p) {
+              return a + (b - a) * p;
+            }
+            function lerpRect(a, b, p) {
+              return {
+                x: lerp(a.x, b.x, p),
+                y: lerp(a.y, b.y, p),
+                w: lerp(a.w, b.w, p),
+                h: lerp(a.h, b.h, p),
+              };
+            }
+
+            // Apply one layer: container transformed onto rect R; each
+            // matched child counter-scaled and translated onto the lerp of
+            // its own two measured rects. Child x/y live in the scaled
+            // container space, hence the divisions.
+            function applyLayer(container, homeRect, kidPairs, R, p) {
+              var sx = R.w / homeRect.w;
+              var sy = R.h / homeRect.h;
+              gsap.set(container, {
+                x: R.x - homeRect.x,
+                y: R.y - homeRect.y,
+                scaleX: sx,
+                scaleY: sy,
+              });
+              for (var i = 0; i < kidPairs.length; i += 1) {
+                var pair = kidPairs[i];
+                var relHome = {
+                  x: pair.home.x - homeRect.x,
+                  y: pair.home.y - homeRect.y,
+                };
+                var want = lerpRect(pair.away, pair.home, container === panel ? p : 1 - p);
+                var baseX = R.x + relHome.x * sx;
+                var baseY = R.y + relHome.y * sy;
+                gsap.set(pair.el, {
+                  x: (want.x - baseX) / sx,
+                  y: (want.y - baseY) / sy,
+                  scaleX: want.w / (pair.home.w * sx),
+                  scaleY: want.h / (pair.home.h * sy),
+                });
+              }
+            }
+
+            // Pure per-update apply: every transform and opacity is a
+            // function of tl.time() alone. Writes are idempotent.
+            function applyTime(timeSeconds) {
+              var enter = clamp01(ENTER > 0 ? timeSeconds / ENTER : 1);
+              var u = clamp01(MORPH > 0 ? (timeSeconds - EXPAND) / MORPH : 1);
+              var p = ease(u);
+              var R = lerpRect(cardRect, panelRect, p);
+
+              applyLayer(panel, panelRect, panelPairs, R, p);
+              applyLayer(card, cardRect, cardPairs, R, p);
+
+              // Crossfade: card owns the pre-phase, hands off in the
+              // first 30% of the morph.
+              var hand = clamp01(u / 0.3);
+              gsap.set(card, { opacity: enter * (1 - hand) });
+              gsap.set(panel, { opacity: u <= 0 ? 0 : Math.max(0.001, hand) });
+
+              // Panel-only furniture: fades up over the back half.
+              var q = clamp01((u - 0.55) / 0.45);
+              var qe = 1 - (1 - q) * (1 - q);
+              for (var f = 0; f < fades.length; f += 1) {
+                gsap.set(fades[f], { opacity: qe, y: (1 - qe) * 12 });
+              }
+            }
+
+            gsap.set(stage, { opacity: 1, y: "0cqh" });
+
+            var tl = gsap.timeline({
+              paused: true,
+              onUpdate: function () {
+                applyTime(tl.time());
+              },
+            });
+
+            // Anchor tween: inert, spans [0, D] so onUpdate fires for
+            // every eventful seek and holds never clamp short.
+            tl.to({ p: 0 }, { p: 1, duration: duration, ease: "none" }, 0);
+
+            // OUT: optional departure; exit none holds until the cut.
+            if (exit === "up") {
+              tl.to(stage, { y: "-4cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "fade") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            }
+
+            tl.seek(0);
+            applyTime(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["modal-morph"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/morph-swap/README.md b/docs/public/catalog/components/morph-swap/README.md
new file mode 100644
index 0000000000..e8d80028c0
--- /dev/null
+++ b/docs/public/catalog/components/morph-swap/README.md
@@ -0,0 +1,102 @@
+# morph-swap
+
+Two slotted siblings sit absolutely stacked at one shared center. A holds
+alone, then at `swap_at` it morphs into B through one of two registers, both
+on a shared 50% 50% transform origin:
+
+- **condense**: A shrink-fades toward center exactly as B scales up through
+  the same silhouette (outgoing `power2.in`, incoming `back.out` with a
+  0.15s overlap).
+- **reshape**: A morphs its silhouette on `scaleX`/`scaleY` while fading, and
+  B picks up from that mid-morph silhouette and relaxes to its natural shape.
+  The reshape rides transforms only, never `width`/`height` tweens, so it
+  stays layout-free and seek-safe.
+
+You supply the two visuals through slots; the primitive supplies the morph.
+
+## Files
+
+- `morph-swap.html`: the mountable sub-composition (install target:
+  `compositions/components/morph-swap.html`).
+- `registry-item.json`: registry metadata and the variables block.
+- `demo.html`: a 1920x1080 host that mounts the primitive with non-default
+  variables (reshape register, violet accent).
+
+## Variables
+
+| id         | type   | default    | notes                                                                     |
+| ---------- | ------ | ---------- | ------------------------------------------------------------------------- |
+| `swap_at`  | number | `1.4`      | seconds after mount start when the morph begins (0.1 to 8)                |
+| `register` | enum   | `condense` | `condense` shrink-fades at center; `reshape` morphs on scaleX/scaleY      |
+| `accent`   | enum   | `green`    | `green` maps to `--brand`, `blue` to `--accent`, `violet` to `--accent-2` |
+| `exit`     | enum   | `none`     | `none` holds the final frame; `fade` and `up` release the stage           |
+
+Envelope: IN = `swap_at` + the swap span (0.75s condense, 1.05s reshape),
+OUT = 0.5s only when `exit` is `fade` or `up`, HOLD is the sole elastic
+phase. The `morph-land` sync point (`hf:sfx` id `morph-land-soft`) fires when
+the morph lands, 2.15s at defaults.
+
+## The slot mechanism
+
+The primitive ships two named slot panels inside its `<template>`:
+
+```html
+<div class="msw-slot" data-slot="a">...</div>
+<div class="msw-slot" data-slot="b">...</div>
+```
+
+Each slot's default children are a token-styled card (a muted wireframe on
+the outgoing side, a taller accent-tinted card on the incoming side), so an
+untouched mount still reads as a deliberate morph. To show your own content,
+install the component and **replace the children of each `[data-slot]`
+element in your installed copy** (the runtime clones only the primitive's own
+template on mount, so slot content lives in the component file, not on the
+host clip).
+
+Rules:
+
+- Both slots center their content in one shared coordinate space; the morph
+  reads best when A and B have visibly different silhouettes.
+- Direct `img`/`video` children are capped at 84cqw by 84cqh and rounded with
+  `--radius`. Arbitrary HTML works too; size it in `cqw`/`cqh`.
+- The morph transforms the panel around the slot, so slot content needs no
+  animation of its own; keep it static.
+
+## Worked example
+
+Install, then fill the slots with two visuals:
+
+```bash
+npx hyperframes add morph-swap
+```
+
+In `compositions/components/morph-swap.html`, replace each slot's default
+block:
+
+```html
+<div class="msw-slot" data-slot="a">
+  <img src="../../assets/logo-mark.png" alt="" />
+</div>
+...
+<div class="msw-slot" data-slot="b">
+  <img src="../../assets/cta-pill.png" alt="" />
+</div>
+```
+
+Mount it from a host composition like any sub-composition:
+
+```html
+<div
+  class="clip"
+  data-composition-id="morph-swap"
+  data-composition-src="./components/morph-swap.html"
+  data-variable-values='{"register":"reshape","swap_at":1.0,"accent":"blue"}'
+  data-start="2"
+  data-duration="4"
+  data-track-index="0"
+></div>
+```
+
+A holds for the first second, reshapes into B, and B holds still for the
+rest of the clip window (`exit` defaults to `none`; frame roots own scene
+transitions).
diff --git a/docs/public/catalog/components/morph-swap/demo.html b/docs/public/catalog/components/morph-swap/demo.html
new file mode 100644
index 0000000000..8348f139ca
--- /dev/null
+++ b/docs/public/catalog/components/morph-swap/demo.html
@@ -0,0 +1,106 @@
+<!doctype html>
+<!--
+  morph-swap demo. This standalone composition mounts the primitive through
+  data-composition-src. Non-default register, swap timing, and accent values
+  prove the variable path while the primitive remains elastic to its host.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>morph-swap Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #0b0c0e);
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --surface: #14171c;
+        --border: #343a46;
+        --brand: #71f5a7;
+        --accent: #c5a3ff;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(
+          ellipse at 50% 44%,
+          var(--bg, #171a20) 0%,
+          var(--bg, #0b0c0e) 72%
+        );
+      }
+
+      .mount-card {
+        width: 52%;
+        height: 66%;
+        left: 24%;
+        top: 17%;
+        container-type: size;
+        overflow: hidden;
+        border: 1px solid color-mix(in srgb, var(--border, #94a3b8) 20%, transparent);
+        border-radius: 30px;
+        background: color-mix(in srgb, var(--surface, #101318) 72%, transparent);
+        box-shadow: 0 40px 100px color-mix(in srgb, var(--bg, #000000) 48%, transparent);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="morph-swap-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="3.5"
+      data-fps="30"
+    >
+      <div
+        id="morph-swap-mount"
+        class="mount-card clip"
+        data-composition-id="morph-swap"
+        data-composition-src="./morph-swap.html"
+        data-variable-values='{"register":"reshape","swap_at":0.9,"accent":"violet"}'
+        data-start="0"
+        data-duration="3.5"
+        data-track-index="0"
+        data-width="998"
+        data-height="713"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["morph-swap-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "morph-swap.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/morph-swap/morph-swap.html b/docs/public/catalog/components/morph-swap/morph-swap.html
new file mode 100644
index 0000000000..baed6c1d14
--- /dev/null
+++ b/docs/public/catalog/components/morph-swap/morph-swap.html
@@ -0,0 +1,387 @@
+<!doctype html>
+<!--
+  morph-swap: HyperFrames video primitive (transitions / holdable / bridge)
+
+  Concept: two slotted siblings sit absolutely stacked at one shared center.
+  A holds alone, then at swap_at it hands the stage to B through one of two
+  registers, both riding a shared transform-origin of 50% 50%:
+
+    - condense: A shrink-fades toward center exactly as B scales up through
+      the same silhouette (the flagship close morph: outgoing power2.in,
+      incoming back.out with a 0.15s overlap).
+    - reshape: A morphs its silhouette on scaleX/scaleY while fading, and B
+      picks up from that mid-morph silhouette and relaxes to its natural
+      shape (the flagship problem morph). NEVER width/height tweens; the
+      reshape rides transforms only, so it stays layout-free and seek-safe.
+
+  Slots (see README.md for a worked example):
+    - [data-slot="a"]: the outgoing content. Replace the children of this
+      element in your installed copy. Default: a muted token wireframe card.
+    - [data-slot="b"]: the incoming content. Same mechanism. Default: a
+      taller brand-tinted token card so the swap reads at a glance.
+
+  Variables (declared in data-composition-variables below):
+    - swap_at (number, seconds, default 1.4): when the morph starts, relative
+      to mount start. Clamped so the swap always completes inside IN.
+    - register (condense | reshape, default condense): the morph mechanic.
+    - accent (green | blue | violet, default green): incoming card accent.
+      green maps to --brand, blue to --accent, violet to --accent-2.
+    - exit (none | fade | up, default none): outgoing transition. none holds
+      the final frame (frame roots own transitions; holds end films).
+
+  Envelope (fixed IN/OUT, elastic HOLD only, never gsap.timeScale()):
+    IN       = swap_at + swap span (0.75s condense, 1.05s reshape); the stage
+               settles in during the first 0.32s
+    HOLD     = elastic = max(0, D - (IN + OUT)); B holds dead-still
+    OUT      = 0.50s when exit is fade or up, 0 when exit is none
+    If D < IN + OUT, IN and OUT scale down together so IN + OUT == D.
+
+  Sync point: morph-land at swap_at + span inside IN (2.15s at defaults). It
+  never moves into elastic HOLD.
+
+  Sound cue: dispatches a bubbling `hf:sfx` CustomEvent with id
+  "morph-land-soft" at morph-land. This primitive never plays audio.
+
+  Mount contract: MOUNTABLE SUB-COMPOSITION. The runtime clones only
+  <template> contents; #root fills the host box (inset:0, container-type:
+  size), has no data-width/data-height, and registers one paused timeline
+  under the literal "morph-swap" key (mount flattening strips
+  data-composition-id from the live root). Variables come from
+  window.__hyperframes.getVariables().
+-->
+<html
+  lang="en"
+  data-composition-id="morph-swap"
+  data-composition-duration="3.5"
+  data-composition-variables='[
+    { "id": "swap_at", "type": "number", "role": "timing", "label": "Swap start", "description": "Seconds after mount start when the morph begins.", "default": 1.4, "min": 0.1, "max": 8, "step": 0.05, "unit": "s" },
+    { "id": "register", "type": "enum", "role": "style", "label": "Register", "description": "Morph mechanic: condense shrink-fades A into B at center; reshape morphs the silhouette on scaleX/scaleY.", "default": "condense", "options": [{ "value": "condense", "label": "Condense" }, { "value": "reshape", "label": "Reshape" }] },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Incoming card accent color.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Outgoing transition. None holds the final frame.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Morph Swap</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="morph-swap" data-duration="3.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          /* Root fills the host-owned box. Internal measurements use cqw/cqh
+             and every painted color comes from a contract token. */
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            background: var(--bg, #07111f);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+          }
+
+          .msw-clip,
+          .msw-stage {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+          }
+
+          .msw-clip {
+            overflow: hidden;
+          }
+
+          .msw-stage {
+            opacity: 0;
+          }
+
+          /* Both panels stack full-bleed and center their content, so the two
+             siblings share one center and one transform origin. All morph
+             motion is transforms on the panel; slot content never reflows. */
+          .msw-panel {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            transform-origin: 50% 50%;
+          }
+
+          /* Caller-supplied media keeps a sane footprint at center. */
+          .msw-slot > img,
+          .msw-slot > video {
+            max-width: 84cqw;
+            max-height: 84cqh;
+            border-radius: var(--radius, 2.4cqmin);
+          }
+
+          .msw-slot {
+            display: grid;
+            place-items: center;
+          }
+
+          /* Token-styled default slot content: a muted wireframe card on the
+             outgoing side, a taller brand-tinted card on the incoming side.
+             Callers replacing slot children never see any of this. */
+          .msw-card {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            padding: var(--space-3, 4cqh) var(--space-3, 4cqw);
+            border: 0.16cqw solid var(--border, #334155);
+            border-radius: var(--radius, 2.4cqmin);
+            background: color-mix(in srgb, var(--surface, #172033) 88%, var(--bg, #07111f));
+            box-shadow: 0 2cqh 5cqw color-mix(in srgb, var(--bg, #07111f) 45%, transparent);
+          }
+
+          .msw-a .msw-card {
+            width: 52cqw;
+            height: 46cqh;
+          }
+
+          .msw-b .msw-card {
+            width: 36cqw;
+            height: 62cqh;
+            border-color: color-mix(
+              in srgb,
+              var(--msw-accent, #22c55e) 52%,
+              var(--border, #334155)
+            );
+            background: color-mix(in srgb, var(--surface, #172033) 86%, var(--msw-accent, #22c55e));
+          }
+
+          .msw-bar {
+            width: 34%;
+            height: 4.4cqh;
+            margin-bottom: var(--space-3, 4cqh);
+            border-radius: 1.2cqh;
+            background: var(--muted, #94a3b8);
+            opacity: 0.5;
+          }
+
+          .msw-b .msw-bar {
+            width: 46%;
+            background: var(--msw-accent, #22c55e);
+            opacity: 0.92;
+          }
+
+          .msw-line {
+            height: 2.4cqh;
+            margin-bottom: var(--space-2, 2.6cqh);
+            border-radius: 1.2cqh;
+            background: var(--muted, #94a3b8);
+            opacity: 0.4;
+          }
+
+          .msw-line:nth-of-type(2) {
+            width: 92%;
+          }
+
+          .msw-line:nth-of-type(3) {
+            width: 68%;
+          }
+
+          .msw-line:nth-of-type(4) {
+            width: 44%;
+          }
+
+          .msw-b .msw-line {
+            background: color-mix(in srgb, var(--msw-accent, #22c55e) 70%, var(--fg, #f8fafc));
+            opacity: 0.7;
+          }
+        </style>
+
+        <div
+          id="morph-swap-clip"
+          class="msw-clip clip"
+          data-start="0"
+          data-duration="3.5"
+          data-track-index="0"
+        >
+          <div class="msw-stage">
+            <section class="msw-panel msw-a" aria-label="Outgoing panel">
+              <div class="msw-slot" data-slot="a">
+                <!-- SLOT "a": replace the children of this element with your
+                     own outgoing content (img, video, or HTML). -->
+                <div class="msw-card" aria-hidden="true">
+                  <div class="msw-bar"></div>
+                  <div class="msw-line"></div>
+                  <div class="msw-line"></div>
+                  <div class="msw-line"></div>
+                </div>
+              </div>
+            </section>
+
+            <section class="msw-panel msw-b" aria-label="Incoming panel">
+              <div class="msw-slot" data-slot="b">
+                <!-- SLOT "b": replace the children of this element with your
+                     own incoming content (img, video, or HTML). -->
+                <div class="msw-card" aria-hidden="true">
+                  <div class="msw-bar"></div>
+                  <div class="msw-line"></div>
+                  <div class="msw-line"></div>
+                  <div class="msw-line"></div>
+                </div>
+              </div>
+            </section>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            // Literal id: mount flattening strips data-composition-id from the
+            // live root before this timeline registers.
+            var compositionId = "morph-swap";
+            var stage = root.querySelector(".msw-stage");
+            var panelA = root.querySelector(".msw-a");
+            var panelB = root.querySelector(".msw-b");
+
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var rawSwapAt = vars.swap_at == null ? 1.4 : Number(vars.swap_at);
+            // INVARIANT: swap_at always clamps into the declared 0.1-8 range.
+            var swapAt = Number.isFinite(rawSwapAt) ? Math.max(0.1, Math.min(8, rawSwapAt)) : 1.4;
+            // INVARIANT: only condense | reshape reaches the timeline.
+            var register = vars.register === "reshape" ? "reshape" : "condense";
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #22c55e)",
+              blue: "var(--accent, #38bdf8)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            // INVARIANT: only none | fade | up reaches the timeline.
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            root.style.setProperty("--msw-accent", accentColors[accent]);
+
+            // RETIME RANGE: fixed IN and OUT scale together only when D is too
+            // short. HOLD is the sole elastic phase. Never use timeScale().
+            var STAGE_IN_BASE = 0.32;
+            var SPAN_BASE = register === "condense" ? 0.75 : 1.05;
+            var IN_BASE = swapAt + SPAN_BASE;
+            var OUT_BASE = exit === "none" ? 0 : 0.5;
+
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "3.5"));
+            var totalBase = IN_BASE + OUT_BASE;
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var STAGE_IN = Math.min(STAGE_IN_BASE * scale, IN);
+            var SWAP = swapAt * scale;
+            var SWAP_END = IN;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var OUT_START = IN + HOLD;
+
+            function fireSfx(id, t) {
+              root.dispatchEvent(
+                new CustomEvent("hf:sfx", { detail: { id: id, t: t }, bubbles: true }),
+              );
+            }
+
+            // Explicit both-endpoints state makes tl.seek(0) deterministic:
+            // A fully present, B parked hidden at its pre-morph shape.
+            gsap.set(stage, { opacity: 0, y: 0 });
+            gsap.set(panelA, { scale: 1, scaleX: 1, scaleY: 1, autoAlpha: 1 });
+            gsap.set(panelB, { scale: 1, scaleX: 1, scaleY: 1, autoAlpha: 0 });
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN part 1: the stage settles and A holds alone.
+            tl.to(stage, { opacity: 1, duration: STAGE_IN, ease: "power2.out" }, 0);
+
+            // IN part 2: the morph, both registers on the shared 50% 50% origin.
+            if (register === "condense") {
+              // A condenses toward center as B scales up through the same
+              // silhouette, 0.15s overlap (flagship close morph).
+              tl.to(
+                panelA,
+                { scale: 0.72, autoAlpha: 0, duration: 0.35 * scale, ease: "power2.in" },
+                SWAP,
+              );
+              tl.fromTo(
+                panelB,
+                { scale: 0.72, autoAlpha: 0 },
+                {
+                  scale: 1,
+                  autoAlpha: 1,
+                  duration: 0.55 * scale,
+                  ease: "back.out(1.6)",
+                  immediateRender: false,
+                },
+                SWAP + 0.2 * scale,
+              );
+            } else {
+              // A reshapes its silhouette on scaleX/scaleY (NEVER width or
+              // height tweens) while fading; B picks up from the same
+              // mid-morph silhouette and relaxes to its natural shape.
+              tl.to(
+                panelA,
+                { scaleX: 0.68, scaleY: 1.34, duration: 0.6 * scale, ease: "power2.inOut" },
+                SWAP,
+              );
+              tl.to(
+                panelA,
+                { autoAlpha: 0, duration: 0.45 * scale, ease: "power1.in" },
+                SWAP + 0.15 * scale,
+              );
+              tl.fromTo(
+                panelB,
+                { scaleX: 0.68, scaleY: 1.34, autoAlpha: 0 },
+                {
+                  scaleX: 1,
+                  scaleY: 1,
+                  autoAlpha: 1,
+                  duration: 0.65 * scale,
+                  ease: "power2.out",
+                  immediateRender: false,
+                },
+                SWAP + 0.4 * scale,
+              );
+            }
+            tl.call(
+              function () {
+                fireSfx("morph-land-soft", SWAP_END);
+              },
+              [],
+              SWAP_END,
+            );
+
+            // HOLD: B dead-still at its natural shape.
+
+            // OUT: only when the exit variable asks for one; exit none holds
+            // the final frame (frame roots own transitions).
+            if (exit !== "none") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+              if (exit === "up") {
+                tl.to(stage, { y: "-6cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              }
+            }
+
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/morph-text/demo.html b/docs/public/catalog/components/morph-text/demo.html
new file mode 100644
index 0000000000..877ffed9ba
--- /dev/null
+++ b/docs/public/catalog/components/morph-text/demo.html
@@ -0,0 +1,237 @@
+<!-- demo.html - used by scripts/generate-catalog-previews.ts to render the
+     catalog preview video. Not installed by `hyperframes add morph-text`.
+     Keep in sync with morph-text.html. -->
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Morph Text</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Figtree:wght@900&display=block"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #fff);
+      }
+
+      #morph-text {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+      }
+
+      /* Word list: hidden source of truth - edit <li> items in Studio. */
+      #morph-words {
+        display: none;
+        list-style: none;
+        margin: 0;
+        padding: 0;
+      }
+
+      #morph-filter {
+        position: absolute;
+        width: 0;
+        height: 0;
+        overflow: hidden;
+        pointer-events: none;
+      }
+
+      #morph-wrapper {
+        position: absolute;
+        top: 50%;
+        left: 0;
+        transform: translateY(-50%);
+        width: 1920px;
+        height: 210px;
+        filter: drop-shadow(0 10px 44px rgba(0, 0, 0, 0.5))
+          drop-shadow(0 3px 10px rgba(0, 0, 0, 0.25));
+      }
+
+      #morph-display {
+        width: 100%;
+        height: 100%;
+        filter: none;
+      }
+
+      #morph-a,
+      #morph-b {
+        position: absolute;
+        width: 100%;
+        display: inline-block;
+        text-align: center;
+        font-size: 120pt;
+        font-weight: 900;
+        line-height: 1;
+        user-select: none;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="morph-text"
+      data-composition-id="morph-text"
+      data-timeline-locked
+      data-width="1920"
+      data-height="1080"
+      data-duration="15"
+      data-fps="30"
+      data-morph-speed="1"
+      data-morph-pause="1.5"
+    >
+      <!--
+        Edit words here - one <li> per word or phrase.
+        data-font  : CSS font-family (e.g. "'Figtree', sans-serif")
+        data-color : text color hex (e.g. "#000000")
+        Adjust data-morph-speed (seconds per morph) and data-morph-pause (hold time) above.
+      -->
+      <ol id="morph-words" aria-hidden="true">
+        <li data-font="'Figtree', sans-serif" data-color="#000000">Do more with less.</li>
+        <li data-font="'Figtree', sans-serif" data-color="#000000">Built for what's next.</li>
+        <li data-font="'Figtree', sans-serif" data-color="#000000">Fast. Focused. Powerful.</li>
+        <li data-font="'Figtree', sans-serif" data-color="#000000">Your work, amplified.</li>
+        <li data-font="'Figtree', sans-serif" data-color="#000000">Start free today.</li>
+      </ol>
+
+      <svg id="morph-filter" aria-hidden="true" focusable="false">
+        <defs>
+          <filter id="morph-threshold">
+            <feColorMatrix
+              in="SourceGraphic"
+              type="matrix"
+              values="1 0 0 0 0
+                      0 1 0 0 0
+                      0 0 1 0 0
+                      0 0 0 255 -100"
+            />
+          </filter>
+        </defs>
+      </svg>
+
+      <div id="morph-wrapper">
+        <div id="morph-display">
+          <span id="morph-a"></span>
+          <span id="morph-b"></span>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      (function () {
+        "use strict";
+
+        var container = document.getElementById("morph-text");
+        var display = document.getElementById("morph-display");
+        var elA = document.getElementById("morph-a");
+        var elB = document.getElementById("morph-b");
+
+        var words = Array.from(document.querySelectorAll("#morph-words li"))
+          .map(function (el) {
+            return {
+              text: el.textContent.trim(),
+              font: el.dataset.font || "'Figtree', sans-serif",
+              color: el.dataset.color || "#111111",
+            };
+          })
+          .filter(function (w) {
+            return w.text;
+          });
+
+        if (words.length < 2) {
+          words = [
+            { text: "Morph", font: "'Figtree', sans-serif", color: "#111111" },
+            { text: "Text", font: "'Figtree', sans-serif", color: "#111111" },
+          ];
+        }
+
+        var morphSpeed = parseFloat(container.dataset.morphSpeed || "1");
+        var morphPause = parseFloat(container.dataset.morphPause || "1.5");
+        var duration = parseFloat(container.dataset.duration || "9");
+        var stepDur = morphSpeed + morphPause;
+        var totalWordDur = words.length * stepDur;
+
+        function applyMorph(T) {
+          var t = T % totalWordDur;
+          var stepIdx = Math.floor(t / stepDur);
+          var stepT = t - stepIdx * stepDur;
+          var frac = Math.min(stepT / morphSpeed, 1);
+
+          var wA = words[stepIdx % words.length];
+          var wB = words[(stepIdx + 1) % words.length];
+
+          elA.textContent = wA.text;
+          elA.style.fontFamily = "var(--font-display, " + wA.font + ")";
+          elA.style.color = "var(--fg, " + wA.color + ")";
+
+          elB.textContent = wB.text;
+          elB.style.fontFamily = "var(--font-display, " + wB.font + ")";
+          elB.style.color = "var(--fg, " + wB.color + ")";
+
+          if (frac <= 0) {
+            display.style.filter = "none";
+            elA.style.filter = "";
+            elA.style.opacity = "1";
+            elB.style.filter = "";
+            elB.style.opacity = "0";
+          } else if (frac >= 1) {
+            display.style.filter = "none";
+            elA.style.filter = "";
+            elA.style.opacity = "0";
+            elB.style.filter = "";
+            elB.style.opacity = "1";
+          } else {
+            display.style.filter = "url(#morph-threshold)";
+            var blurB = Math.max(0, Math.min(8 / frac - 8, 100));
+            var blurA = Math.max(0, Math.min(8 / (1 - frac) - 8, 100));
+            elB.style.filter = "blur(" + blurB + "px)";
+            elB.style.opacity = frac;
+            elA.style.filter = "blur(" + blurA + "px)";
+            elA.style.opacity = 1 - frac;
+          }
+        }
+
+        if (matchMedia("(prefers-reduced-motion: reduce)").matches) {
+          elA.textContent = words[0].text;
+          elA.style.fontFamily = "var(--font-display, " + words[0].font + ")";
+          elA.style.color = "var(--fg, " + words[0].color + ")";
+          elA.style.opacity = "1";
+          display.style.filter = "none";
+          return;
+        }
+
+        var proxy = { t: 0 };
+        var tl = gsap.timeline({ paused: true });
+
+        tl.to(proxy, {
+          t: duration,
+          duration: duration,
+          ease: "none",
+          onUpdate: function () {
+            applyMorph(proxy.t);
+          },
+        });
+
+        applyMorph(0);
+        tl.seek(0);
+
+        window.__timelines = window.__timelines || {};
+        window.__timelines["morph-text"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/morph-text/morph-text.html b/docs/public/catalog/components/morph-text/morph-text.html
new file mode 100644
index 0000000000..6427b5c4d2
--- /dev/null
+++ b/docs/public/catalog/components/morph-text/morph-text.html
@@ -0,0 +1,234 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Morph Text</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Figtree:wght@900&display=block"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #fff);
+      }
+
+      #morph-text {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+      }
+
+      /* Word list: hidden source of truth - edit <li> items in Studio. */
+      #morph-words {
+        display: none;
+        list-style: none;
+        margin: 0;
+        padding: 0;
+      }
+
+      #morph-filter {
+        position: absolute;
+        width: 0;
+        height: 0;
+        overflow: hidden;
+        pointer-events: none;
+      }
+
+      #morph-wrapper {
+        position: absolute;
+        top: 50%;
+        left: 0;
+        transform: translateY(-50%);
+        width: 1920px;
+        height: 210px;
+        filter: drop-shadow(0 10px 44px rgba(0, 0, 0, 0.5))
+          drop-shadow(0 3px 10px rgba(0, 0, 0, 0.25));
+      }
+
+      #morph-display {
+        width: 100%;
+        height: 100%;
+        filter: none;
+      }
+
+      #morph-a,
+      #morph-b {
+        position: absolute;
+        width: 100%;
+        display: inline-block;
+        text-align: center;
+        font-size: 120pt;
+        font-weight: 900;
+        line-height: 1;
+        user-select: none;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="morph-text"
+      data-composition-id="morph-text"
+      data-timeline-locked
+      data-width="1920"
+      data-height="1080"
+      data-duration="15"
+      data-fps="30"
+      data-morph-speed="1"
+      data-morph-pause="1.5"
+    >
+      <!--
+        Edit words here - one <li> per word or phrase.
+        data-font  : CSS font-family (e.g. "'Figtree', sans-serif")
+        data-color : text color hex (e.g. "#000000")
+        Adjust data-morph-speed (seconds per morph) and data-morph-pause (hold time) above.
+      -->
+      <ol id="morph-words" aria-hidden="true">
+        <li data-font="'Figtree', sans-serif" data-color="#000000">Do more with less.</li>
+        <li data-font="'Figtree', sans-serif" data-color="#000000">Built for what's next.</li>
+        <li data-font="'Figtree', sans-serif" data-color="#000000">Fast. Focused. Powerful.</li>
+        <li data-font="'Figtree', sans-serif" data-color="#000000">Your work, amplified.</li>
+        <li data-font="'Figtree', sans-serif" data-color="#000000">Start free today.</li>
+      </ol>
+
+      <svg id="morph-filter" aria-hidden="true" focusable="false">
+        <defs>
+          <filter id="morph-threshold">
+            <feColorMatrix
+              in="SourceGraphic"
+              type="matrix"
+              values="1 0 0 0 0
+                      0 1 0 0 0
+                      0 0 1 0 0
+                      0 0 0 255 -100"
+            />
+          </filter>
+        </defs>
+      </svg>
+
+      <div id="morph-wrapper">
+        <div id="morph-display">
+          <span id="morph-a"></span>
+          <span id="morph-b"></span>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      (function () {
+        "use strict";
+
+        var container = document.getElementById("morph-text");
+        var display = document.getElementById("morph-display");
+        var elA = document.getElementById("morph-a");
+        var elB = document.getElementById("morph-b");
+
+        var words = Array.from(document.querySelectorAll("#morph-words li"))
+          .map(function (el) {
+            return {
+              text: el.textContent.trim(),
+              font: el.dataset.font || "'Figtree', sans-serif",
+              color: el.dataset.color || "#111111",
+            };
+          })
+          .filter(function (w) {
+            return w.text;
+          });
+
+        if (words.length < 2) {
+          words = [
+            { text: "Morph", font: "'Figtree', sans-serif", color: "#111111" },
+            { text: "Text", font: "'Figtree', sans-serif", color: "#111111" },
+          ];
+        }
+
+        var morphSpeed = parseFloat(container.dataset.morphSpeed || "1");
+        var morphPause = parseFloat(container.dataset.morphPause || "1.5");
+        var duration = parseFloat(container.dataset.duration || "9");
+        var stepDur = morphSpeed + morphPause;
+        var totalWordDur = words.length * stepDur;
+
+        function applyMorph(T) {
+          var t = T % totalWordDur;
+          var stepIdx = Math.floor(t / stepDur);
+          var stepT = t - stepIdx * stepDur;
+          var frac = Math.min(stepT / morphSpeed, 1);
+
+          var wA = words[stepIdx % words.length];
+          var wB = words[(stepIdx + 1) % words.length];
+
+          elA.textContent = wA.text;
+          elA.style.fontFamily = "var(--font-display, " + wA.font + ")";
+          elA.style.color = "var(--fg, " + wA.color + ")";
+
+          elB.textContent = wB.text;
+          elB.style.fontFamily = "var(--font-display, " + wB.font + ")";
+          elB.style.color = "var(--fg, " + wB.color + ")";
+
+          if (frac <= 0) {
+            display.style.filter = "none";
+            elA.style.filter = "";
+            elA.style.opacity = "1";
+            elB.style.filter = "";
+            elB.style.opacity = "0";
+          } else if (frac >= 1) {
+            display.style.filter = "none";
+            elA.style.filter = "";
+            elA.style.opacity = "0";
+            elB.style.filter = "";
+            elB.style.opacity = "1";
+          } else {
+            display.style.filter = "url(#morph-threshold)";
+            var blurB = Math.max(0, Math.min(8 / frac - 8, 100));
+            var blurA = Math.max(0, Math.min(8 / (1 - frac) - 8, 100));
+            elB.style.filter = "blur(" + blurB + "px)";
+            elB.style.opacity = frac;
+            elA.style.filter = "blur(" + blurA + "px)";
+            elA.style.opacity = 1 - frac;
+          }
+        }
+
+        if (matchMedia("(prefers-reduced-motion: reduce)").matches) {
+          elA.textContent = words[0].text;
+          elA.style.fontFamily = "var(--font-display, " + words[0].font + ")";
+          elA.style.color = "var(--fg, " + words[0].color + ")";
+          elA.style.opacity = "1";
+          display.style.filter = "none";
+          return;
+        }
+
+        var proxy = { t: 0 };
+        var tl = gsap.timeline({ paused: true });
+
+        tl.to(proxy, {
+          t: duration,
+          duration: duration,
+          ease: "none",
+          onUpdate: function () {
+            applyMorph(proxy.t);
+          },
+        });
+
+        applyMorph(0);
+        tl.seek(0);
+
+        window.__timelines = window.__timelines || {};
+        window.__timelines["morph-text"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/motion-blur/demo.html b/docs/public/catalog/components/motion-blur/demo.html
new file mode 100644
index 0000000000..c058cca068
--- /dev/null
+++ b/docs/public/catalog/components/motion-blur/demo.html
@@ -0,0 +1,481 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Motion Blur — Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #06060a;
+      }
+
+      #demo {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        font-family: "SF Mono", ui-monospace, monospace;
+        background: #06060a;
+      }
+
+      .header {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 80px;
+        display: flex;
+        align-items: flex-end;
+        padding: 0 72px 20px;
+        border-bottom: 1px solid #0f0f18;
+      }
+      .header-title {
+        font-size: 11px;
+        letter-spacing: 0.4em;
+        text-transform: uppercase;
+        color: #1e1e2a;
+      }
+      .header-sub {
+        margin-left: auto;
+        font-size: 11px;
+        letter-spacing: 0.25em;
+        text-transform: uppercase;
+        color: #14141c;
+      }
+
+      .group {
+        position: absolute;
+        left: 0;
+        right: 0;
+        height: 184px;
+      }
+
+      .group::after {
+        content: "";
+        position: absolute;
+        bottom: 0;
+        left: 72px;
+        right: 72px;
+        height: 1px;
+        background: #0d0d15;
+      }
+
+      .dur {
+        position: absolute;
+        left: 72px;
+        top: 0;
+        width: 90px;
+        height: 160px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+      }
+      .dur-num {
+        font-size: 28px;
+        font-weight: 700;
+        letter-spacing: -0.04em;
+        color: #fff;
+        line-height: 1;
+      }
+      .dur-unit {
+        font-size: 9px;
+        letter-spacing: 0.25em;
+        text-transform: uppercase;
+        color: #252532;
+        margin-top: 5px;
+      }
+
+      .row-hint {
+        position: absolute;
+        left: 176px;
+        width: 44px;
+        height: 72px;
+        display: flex;
+        align-items: center;
+        font-size: 8px;
+        letter-spacing: 0.2em;
+        text-transform: uppercase;
+        color: #161620;
+      }
+
+      .spd {
+        position: absolute;
+        right: 72px;
+        top: 0;
+        width: 100px;
+        height: 160px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: flex-end;
+      }
+      .spd-label {
+        font-size: 10px;
+        letter-spacing: 0.3em;
+        text-transform: uppercase;
+        color: #181822;
+      }
+
+      .pill {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 200px;
+        height: 72px;
+        border-radius: 36px;
+        /* Flat L1 ink: every row is the same object, so only the blur differs. */
+        background: rgba(244, 244, 245, 0.72);
+        will-change: transform, filter;
+      }
+
+      .word {
+        position: absolute;
+        left: 0;
+        top: 88px;
+        height: 72px;
+        line-height: 72px;
+        white-space: nowrap;
+        font-size: 56px;
+        font-weight: 800;
+        letter-spacing: -0.03em;
+        color: #f4f4f5;
+        will-change: transform, filter;
+      }
+
+      .inner-div {
+        position: absolute;
+        left: 220px;
+        right: 200px;
+        top: 80px;
+        height: 1px;
+        background: #0a0a12;
+      }
+
+      .track-a,
+      .track-b {
+        position: absolute;
+        left: 220px;
+        right: 200px;
+        height: 1px;
+        background: #0c0c14;
+      }
+      .track-a {
+        top: 35px;
+      }
+      .track-b {
+        top: 123px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="motion-blur-demo"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="4"
+    >
+      <div class="header">
+        <span class="header-title">Motion Blur — Velocity Showcase</span>
+        <span class="header-sub">feGaussianBlur + scaleX · blur ∝ velocity</span>
+      </div>
+
+      <div class="group" style="top: 80px">
+        <div class="dur"><span class="dur-num">3.0</span><span class="dur-unit">seconds</span></div>
+        <div class="row-hint" style="top: 0">shape</div>
+        <div class="row-hint" style="top: 88px">text</div>
+        <div class="track-a"></div>
+        <div class="inner-div"></div>
+        <div class="track-b"></div>
+        <div class="pill" id="s1"></div>
+        <div class="word" id="t1">DRIFT</div>
+        <div class="spd"><span class="spd-label">slow</span></div>
+      </div>
+
+      <div class="group" style="top: 264px">
+        <div class="dur"><span class="dur-num">1.5</span><span class="dur-unit">seconds</span></div>
+        <div class="row-hint" style="top: 0">shape</div>
+        <div class="row-hint" style="top: 88px">text</div>
+        <div class="track-a"></div>
+        <div class="inner-div"></div>
+        <div class="track-b"></div>
+        <div class="pill" id="s2"></div>
+        <div class="word" id="t2">GLIDE</div>
+        <div class="spd"><span class="spd-label">medium</span></div>
+      </div>
+
+      <div class="group" style="top: 448px">
+        <div class="dur"><span class="dur-num">0.7</span><span class="dur-unit">seconds</span></div>
+        <div class="row-hint" style="top: 0">shape</div>
+        <div class="row-hint" style="top: 88px">text</div>
+        <div class="track-a"></div>
+        <div class="inner-div"></div>
+        <div class="track-b"></div>
+        <div class="pill" id="s3"></div>
+        <div class="word" id="t3">RUSH</div>
+        <div class="spd"><span class="spd-label">fast</span></div>
+      </div>
+
+      <div class="group" style="top: 632px">
+        <div class="dur">
+          <span class="dur-num">0.35</span><span class="dur-unit">seconds</span>
+        </div>
+        <div class="row-hint" style="top: 0">shape</div>
+        <div class="row-hint" style="top: 88px">text</div>
+        <div class="track-a"></div>
+        <div class="inner-div"></div>
+        <div class="track-b"></div>
+        <div class="pill" id="s4"></div>
+        <div class="word" id="t4">BLAST</div>
+        <div class="spd"><span class="spd-label">faster</span></div>
+      </div>
+
+      <div class="group" style="top: 816px">
+        <div class="dur"><span class="dur-num">0.2</span><span class="dur-unit">seconds</span></div>
+        <div class="row-hint" style="top: 0">shape</div>
+        <div class="row-hint" style="top: 88px">text</div>
+        <div class="track-a"></div>
+        <div class="inner-div"></div>
+        <div class="track-b"></div>
+        <div class="pill" id="s5"></div>
+        <div class="word" id="t5">WARP</div>
+        <div class="spd"><span class="spd-label">extreme</span></div>
+      </div>
+
+      <script>
+        (function () {
+          if (!window._hfMbUid) window._hfMbUid = 0;
+          var ns = "http://www.w3.org/2000/svg";
+
+          window.attachMotionBlur = function (selector, tl, opts) {
+            opts = opts || {};
+            var blurScale = opts.blurScale !== undefined ? opts.blurScale : 0.008;
+            var blurMax = opts.blurMax !== undefined ? opts.blurMax : 20;
+            var stretchScale = opts.stretchScale !== undefined ? opts.stretchScale : 0.0002;
+            var stretchMax = opts.stretchMax !== undefined ? opts.stretchMax : 0;
+            var axis = opts.axis || "both";
+
+            var items = Array.isArray(selector) ? selector : [selector];
+            var targets = items.reduce(function (acc, s) {
+              if (typeof s === "string") {
+                document.querySelectorAll(s).forEach(function (el) {
+                  acc.push(el);
+                });
+              } else if (s instanceof Element) {
+                acc.push(s);
+              }
+              return acc;
+            }, []);
+
+            var GHOST_CFG = [
+              { frac: 0.25, slope: 0.55 },
+              { frac: 0.55, slope: 0.28 },
+              { frac: 1.0, slope: 0.1 },
+            ];
+
+            var state = targets.map(function (el) {
+              var uid = "hf-mb-" + window._hfMbUid++;
+              var svg = document.createElementNS(ns, "svg");
+              svg.setAttribute("style", "position:absolute;width:0;height:0;overflow:hidden;");
+
+              var filter = document.createElementNS(ns, "filter");
+              filter.id = uid;
+              filter.setAttribute("x", "-110%");
+              filter.setAttribute("y", "-25%");
+              filter.setAttribute("width", "260%");
+              filter.setAttribute("height", "150%");
+
+              var ghosts = GHOST_CFG.map(function (cfg, gi) {
+                var feOff = document.createElementNS(ns, "feOffset");
+                feOff.setAttribute("in", "SourceGraphic");
+                feOff.setAttribute("dx", "0");
+                feOff.setAttribute("dy", "0");
+                feOff.setAttribute("result", "go" + gi);
+
+                var feGB = document.createElementNS(ns, "feGaussianBlur");
+                feGB.setAttribute("in", "go" + gi);
+                feGB.setAttribute("stdDeviation", "0 0");
+                feGB.setAttribute("result", "gb" + gi);
+
+                var feCT = document.createElementNS(ns, "feComponentTransfer");
+                feCT.setAttribute("in", "gb" + gi);
+                feCT.setAttribute("result", "gf" + gi);
+                var feFuncA = document.createElementNS(ns, "feFuncA");
+                feFuncA.setAttribute("type", "linear");
+                feFuncA.setAttribute("slope", String(cfg.slope));
+                feCT.appendChild(feFuncA);
+
+                filter.appendChild(feOff);
+                filter.appendChild(feGB);
+                filter.appendChild(feCT);
+                return { feOff: feOff, feGB: feGB, frac: cfg.frac };
+              });
+
+              var feTopBlur = document.createElementNS(ns, "feGaussianBlur");
+              feTopBlur.setAttribute("in", "SourceGraphic");
+              feTopBlur.setAttribute("stdDeviation", "0 0");
+              feTopBlur.setAttribute("result", "top");
+              filter.appendChild(feTopBlur);
+
+              var feMerge = document.createElementNS(ns, "feMerge");
+              for (var mi = GHOST_CFG.length - 1; mi >= 0; mi--) {
+                var mn = document.createElementNS(ns, "feMergeNode");
+                mn.setAttribute("in", "gf" + mi);
+                feMerge.appendChild(mn);
+              }
+              var mnTop = document.createElementNS(ns, "feMergeNode");
+              mnTop.setAttribute("in", "top");
+              feMerge.appendChild(mnTop);
+              filter.appendChild(feMerge);
+
+              svg.appendChild(filter);
+              document.body.appendChild(svg);
+
+              return {
+                el: el,
+                ghosts: ghosts,
+                feTopBlur: feTopBlur,
+                filterId: uid,
+                prevX: parseFloat(gsap.getProperty(el, "x")) || 0,
+                prevY: parseFloat(gsap.getProperty(el, "y")) || 0,
+                prevTime: tl.time(),
+              };
+            });
+
+            var _proxy = { t: 0 };
+            tl.to(
+              _proxy,
+              {
+                t: 1,
+                duration: Math.max(tl.duration(), 0.1),
+                ease: "none",
+                onUpdate: function () {
+                  var time = tl.time();
+
+                  state.forEach(function (s) {
+                    var x = parseFloat(gsap.getProperty(s.el, "x")) || 0;
+                    var y = parseFloat(gsap.getProperty(s.el, "y")) || 0;
+                    var dt = time - s.prevTime;
+
+                    if (dt > 0.0005) {
+                      var vx = axis !== "y" ? (x - s.prevX) / dt : 0;
+                      var vy = axis !== "x" ? (y - s.prevY) / dt : 0;
+
+                      var bx = Math.min(Math.abs(vx) * blurScale, blurMax);
+                      var by = Math.min(Math.abs(vy) * blurScale, blurMax);
+                      var bxFinal = axis !== "y" ? bx : Math.max(by * 0.08, 0.4);
+                      var byFinal = axis !== "x" ? by : Math.max(bx * 0.08, 0.4);
+                      var active = bx > 0.3 || by > 0.3;
+
+                      if (active) {
+                        s.el.style.filter = "url(#" + s.filterId + ")";
+                        s.ghosts.forEach(function (g) {
+                          var dx =
+                            axis !== "y" ? (vx >= 0 ? -bxFinal * g.frac : bxFinal * g.frac) : 0;
+                          var dy =
+                            axis !== "x" ? (vy >= 0 ? -byFinal * g.frac : byFinal * g.frac) : 0;
+                          g.feOff.setAttribute("dx", dx.toFixed(2));
+                          g.feOff.setAttribute("dy", dy.toFixed(2));
+                          var gbx =
+                            axis !== "y"
+                              ? (bxFinal * g.frac * 0.5).toFixed(2)
+                              : Math.max(byFinal * g.frac * 0.04, 0.4).toFixed(2);
+                          var gby =
+                            axis !== "x"
+                              ? (byFinal * g.frac * 0.5).toFixed(2)
+                              : Math.max(bxFinal * g.frac * 0.04, 0.4).toFixed(2);
+                          g.feGB.setAttribute("stdDeviation", gbx + " " + gby);
+                        });
+                        s.feTopBlur.setAttribute(
+                          "stdDeviation",
+                          (bxFinal * 0.15).toFixed(2) + " " + (byFinal * 0.15).toFixed(2),
+                        );
+                        if (stretchMax > 0) {
+                          var sx = 1 + Math.min(Math.abs(vx) * stretchScale, stretchMax);
+                          var sy = 1 + Math.min(Math.abs(vy) * stretchScale, stretchMax);
+                          var ox = axis !== "y" ? (vx >= 0 ? "100% 50%" : "0% 50%") : "50% 50%";
+                          var oy = axis !== "x" ? (vy >= 0 ? "50% 100%" : "50% 0%") : "50% 50%";
+                          gsap.set(s.el, {
+                            scaleX: axis !== "y" ? sx : 1,
+                            scaleY: axis !== "x" ? sy : 1,
+                            transformOrigin: axis === "x" ? ox : axis === "y" ? oy : "50% 50%",
+                          });
+                        }
+                      } else {
+                        s.el.style.filter = "";
+                        s.ghosts.forEach(function (g) {
+                          g.feOff.setAttribute("dx", "0");
+                          g.feOff.setAttribute("dy", "0");
+                          g.feGB.setAttribute("stdDeviation", "0 0");
+                        });
+                        s.feTopBlur.setAttribute("stdDeviation", "0 0");
+                        if (stretchMax > 0) {
+                          gsap.set(s.el, { scaleX: 1, scaleY: 1, transformOrigin: "50% 50%" });
+                        }
+                      }
+
+                      s.prevX = x;
+                      s.prevY = y;
+                      s.prevTime = time;
+                    } else if (dt < -0.0005) {
+                      s.el.style.filter = "";
+                      s.ghosts.forEach(function (g) {
+                        g.feOff.setAttribute("dx", "0");
+                        g.feOff.setAttribute("dy", "0");
+                        g.feGB.setAttribute("stdDeviation", "0 0");
+                      });
+                      s.feTopBlur.setAttribute("stdDeviation", "0 0");
+                      if (stretchMax > 0) {
+                        gsap.set(s.el, { scaleX: 1, scaleY: 1, transformOrigin: "50% 50%" });
+                      }
+                      s.prevX = x;
+                      s.prevY = y;
+                      s.prevTime = time;
+                    }
+                    // dt ≈ 0: double-fire — skip.
+                  });
+                },
+              },
+              0,
+            );
+          };
+
+          var tl = gsap.timeline({ paused: true });
+
+          gsap.set(["#s1", "#s2", "#s3", "#s4", "#s5", "#t1", "#t2", "#t3", "#t4", "#t5"], {
+            x: -400,
+          });
+
+          tl.to(["#s1", "#t1"], { x: 1640, duration: 3.0, ease: "power3.inOut" }, 0);
+          tl.to(["#s2", "#t2"], { x: 1640, duration: 1.5, ease: "power3.inOut" }, 0);
+          tl.to(["#s3", "#t3"], { x: 1640, duration: 0.7, ease: "power3.inOut" }, 0);
+          tl.to(["#s4", "#t4"], { x: 1640, duration: 0.35, ease: "power3.inOut" }, 0);
+          tl.to(["#s5", "#t5"], { x: 1640, duration: 0.2, ease: "power3.inOut" }, 0);
+
+          tl.set(document.body, {}, 4);
+
+          attachMotionBlur(
+            ["#s1", "#s2", "#s3", "#s4", "#s5", "#t1", "#t2", "#t3", "#t4", "#t5"],
+            tl,
+            { axis: "x", blurMax: 80, stretchMax: 0 },
+          );
+
+          window.__timelines = window.__timelines || {};
+          window.__timelines["motion-blur-demo"] = tl;
+        })();
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/motion-blur/motion-blur.html b/docs/public/catalog/components/motion-blur/motion-blur.html
new file mode 100644
index 0000000000..5dc5336ec3
--- /dev/null
+++ b/docs/public/catalog/components/motion-blur/motion-blur.html
@@ -0,0 +1,255 @@
+<!--
+  Motion Blur — velocity-driven directional motion blur.
+
+  Usage: paste this snippet into your composition, then call
+  attachMotionBlur() with any element animated by your GSAP timeline.
+
+  The snippet hooks into the timeline's onUpdate callback, tracks the
+  GSAP x/y position of each target frame-by-frame, and applies:
+    1. Ghost copies of the element at increasing backward offsets with
+       decreasing opacity — inherently one-sided, no forward blur component.
+    2. A small Gaussian blur at the current position so the element looks
+       in-motion (blurry) rather than sharp on top of the trail.
+    3. An optional scaleX/Y stretch in the direction of travel (off by
+       default; enable via stretchMax > 0 if you want the effect).
+
+  Both effects clear automatically when the element decelerates to rest.
+
+  Requirements:
+  - Elements must be animated via GSAP x/y (transform), not left/top.
+  - Call attachMotionBlur() AFTER defining all tweens, before
+    window.__timelines registration.
+  - GSAP must be loaded before this snippet executes.
+
+  API:
+    attachMotionBlur(selector, timeline, options?)
+
+  Options:
+    blurScale     — directional blur per px/s of velocity (default 0.008)
+    blurMax       — max blur radius on the motion axis in px (default 20)
+    stretchScale  — scaleX/Y added per px/s (default 0.0002)
+    stretchMax    — max stretch factor above 1.0 (default 0, disabled)
+    axis          — "x" | "y" | "both" (default "both")
+-->
+
+<script>
+  (function () {
+    if (!window._hfMbUid) window._hfMbUid = 0;
+
+    window.attachMotionBlur = function (selector, tl, opts) {
+      opts = opts || {};
+      var blurScale = opts.blurScale !== undefined ? opts.blurScale : 0.008;
+      var blurMax = opts.blurMax !== undefined ? opts.blurMax : 20;
+      var stretchScale = opts.stretchScale !== undefined ? opts.stretchScale : 0.0002;
+      var stretchMax = opts.stretchMax !== undefined ? opts.stretchMax : 0;
+      var axis = opts.axis || "both";
+
+      var items = Array.isArray(selector) ? selector : [selector];
+      var targets = items.reduce(function (acc, s) {
+        if (typeof s === "string") {
+          document.querySelectorAll(s).forEach(function (el) {
+            acc.push(el);
+          });
+        } else if (s instanceof Element) {
+          acc.push(s);
+        }
+        return acc;
+      }, []);
+
+      // One SVG filter per target. Ghost copies placed behind → inherently one-sided.
+      // Small top Gaussian makes element look blurry at current position, not sharp.
+      var ns = "http://www.w3.org/2000/svg";
+      var GHOST_CFG = [
+        { frac: 0.25, slope: 0.55 },
+        { frac: 0.55, slope: 0.28 },
+        { frac: 1.0, slope: 0.1 },
+      ];
+
+      var state = targets.map(function (el) {
+        var uid = "hf-mb-" + window._hfMbUid++;
+        var svg = document.createElementNS(ns, "svg");
+        svg.setAttribute("style", "position:absolute;width:0;height:0;overflow:hidden;");
+
+        var filter = document.createElementNS(ns, "filter");
+        filter.id = uid;
+        filter.setAttribute("x", "-110%");
+        filter.setAttribute("y", "-25%");
+        filter.setAttribute("width", "260%");
+        filter.setAttribute("height", "150%");
+
+        var ghosts = GHOST_CFG.map(function (cfg, gi) {
+          var feOff = document.createElementNS(ns, "feOffset");
+          feOff.setAttribute("in", "SourceGraphic");
+          feOff.setAttribute("dx", "0");
+          feOff.setAttribute("dy", "0");
+          feOff.setAttribute("result", "go" + gi);
+
+          var feGB = document.createElementNS(ns, "feGaussianBlur");
+          feGB.setAttribute("in", "go" + gi);
+          feGB.setAttribute("stdDeviation", "0 0");
+          feGB.setAttribute("result", "gb" + gi);
+
+          var feCT = document.createElementNS(ns, "feComponentTransfer");
+          feCT.setAttribute("in", "gb" + gi);
+          feCT.setAttribute("result", "gf" + gi);
+          var feFuncA = document.createElementNS(ns, "feFuncA");
+          feFuncA.setAttribute("type", "linear");
+          feFuncA.setAttribute("slope", String(cfg.slope));
+          feCT.appendChild(feFuncA);
+
+          filter.appendChild(feOff);
+          filter.appendChild(feGB);
+          filter.appendChild(feCT);
+          return { feOff: feOff, feGB: feGB, frac: cfg.frac };
+        });
+
+        var feTopBlur = document.createElementNS(ns, "feGaussianBlur");
+        feTopBlur.setAttribute("in", "SourceGraphic");
+        feTopBlur.setAttribute("stdDeviation", "0 0");
+        feTopBlur.setAttribute("result", "top");
+        filter.appendChild(feTopBlur);
+
+        var feMerge = document.createElementNS(ns, "feMerge");
+        for (var mi = GHOST_CFG.length - 1; mi >= 0; mi--) {
+          var mn = document.createElementNS(ns, "feMergeNode");
+          mn.setAttribute("in", "gf" + mi);
+          feMerge.appendChild(mn);
+        }
+        var mnTop = document.createElementNS(ns, "feMergeNode");
+        mnTop.setAttribute("in", "top");
+        feMerge.appendChild(mnTop);
+        filter.appendChild(feMerge);
+
+        svg.appendChild(filter);
+        document.body.appendChild(svg);
+
+        return {
+          el: el,
+          ghosts: ghosts,
+          feTopBlur: feTopBlur,
+          filterId: uid,
+          prevX: parseFloat(gsap.getProperty(el, "x")) || 0,
+          prevY: parseFloat(gsap.getProperty(el, "y")) || 0,
+          prevTime: tl.time(),
+        };
+      });
+
+      // tl.eventCallback("onUpdate") is not available in the HyperFrames renderer —
+      // the runtime proxies the timeline object. Tween onUpdate fires on every seek.
+      var _proxy = { t: 0 };
+      tl.to(
+        _proxy,
+        {
+          t: 1,
+          duration: Math.max(tl.duration(), 0.1),
+          ease: "none",
+          onUpdate: function () {
+            var time = tl.time();
+
+            state.forEach(function (s) {
+              var x = parseFloat(gsap.getProperty(s.el, "x")) || 0;
+              var y = parseFloat(gsap.getProperty(s.el, "y")) || 0;
+              var dt = time - s.prevTime;
+
+              if (dt > 0.0005) {
+                var vx = axis !== "y" ? (x - s.prevX) / dt : 0;
+                var vy = axis !== "x" ? (y - s.prevY) / dt : 0;
+
+                var bx = Math.min(Math.abs(vx) * blurScale, blurMax);
+                var by = Math.min(Math.abs(vy) * blurScale, blurMax);
+                var bxFinal = axis !== "y" ? bx : Math.max(by * 0.08, 0.4);
+                var byFinal = axis !== "x" ? by : Math.max(bx * 0.08, 0.4);
+                var active = bx > 0.3 || by > 0.3;
+
+                if (active) {
+                  s.el.style.filter = "url(#" + s.filterId + ")";
+                  s.ghosts.forEach(function (g) {
+                    var dx = axis !== "y" ? (vx >= 0 ? -bxFinal * g.frac : bxFinal * g.frac) : 0;
+                    var dy = axis !== "x" ? (vy >= 0 ? -byFinal * g.frac : byFinal * g.frac) : 0;
+                    g.feOff.setAttribute("dx", dx.toFixed(2));
+                    g.feOff.setAttribute("dy", dy.toFixed(2));
+                    var gbx =
+                      axis !== "y"
+                        ? (bxFinal * g.frac * 0.5).toFixed(2)
+                        : Math.max(byFinal * g.frac * 0.04, 0.4).toFixed(2);
+                    var gby =
+                      axis !== "x"
+                        ? (byFinal * g.frac * 0.5).toFixed(2)
+                        : Math.max(bxFinal * g.frac * 0.04, 0.4).toFixed(2);
+                    g.feGB.setAttribute("stdDeviation", gbx + " " + gby);
+                  });
+                  s.feTopBlur.setAttribute(
+                    "stdDeviation",
+                    (bxFinal * 0.15).toFixed(2) + " " + (byFinal * 0.15).toFixed(2),
+                  );
+
+                  if (stretchMax > 0) {
+                    var sx = 1 + Math.min(Math.abs(vx) * stretchScale, stretchMax);
+                    var sy = 1 + Math.min(Math.abs(vy) * stretchScale, stretchMax);
+                    var ox = axis !== "y" ? (vx >= 0 ? "100% 50%" : "0% 50%") : "50% 50%";
+                    var oy = axis !== "x" ? (vy >= 0 ? "50% 100%" : "50% 0%") : "50% 50%";
+                    gsap.set(s.el, {
+                      scaleX: axis !== "y" ? sx : 1,
+                      scaleY: axis !== "x" ? sy : 1,
+                      transformOrigin: axis === "x" ? ox : axis === "y" ? oy : "50% 50%",
+                    });
+                  }
+                } else {
+                  s.el.style.filter = "";
+                  s.ghosts.forEach(function (g) {
+                    g.feOff.setAttribute("dx", "0");
+                    g.feOff.setAttribute("dy", "0");
+                    g.feGB.setAttribute("stdDeviation", "0 0");
+                  });
+                  s.feTopBlur.setAttribute("stdDeviation", "0 0");
+                  if (stretchMax > 0) {
+                    gsap.set(s.el, { scaleX: 1, scaleY: 1, transformOrigin: "50% 50%" });
+                  }
+                }
+
+                s.prevX = x;
+                s.prevY = y;
+                s.prevTime = time;
+              } else if (dt < -0.0005) {
+                s.el.style.filter = "";
+                s.ghosts.forEach(function (g) {
+                  g.feOff.setAttribute("dx", "0");
+                  g.feOff.setAttribute("dy", "0");
+                  g.feGB.setAttribute("stdDeviation", "0 0");
+                });
+                s.feTopBlur.setAttribute("stdDeviation", "0 0");
+                if (stretchMax > 0) {
+                  gsap.set(s.el, { scaleX: 1, scaleY: 1, transformOrigin: "50% 50%" });
+                }
+                s.prevX = x;
+                s.prevY = y;
+                s.prevTime = time;
+              }
+              // dt ≈ 0: double-fire — skip.
+            });
+          },
+        },
+        0,
+      );
+    };
+  })();
+</script>
+
+<!--
+  Timeline integration example:
+
+  const tl = gsap.timeline({ paused: true });
+
+  tl.fromTo("#my-box", { x: -100 }, { x: 1700, duration: 1.2, ease: "power3.inOut" }, 0.5);
+
+  // Extend to data-duration so seeks past the last tween reach the blur callback.
+  tl.set(document.body, {}, DATA_DURATION);
+
+  // Call AFTER tweens, BEFORE window.__timelines registration.
+  // attachMotionBlur adds a tracking tween with onUpdate — must be called after
+  // tl.set()/tl.to() have established the final timeline duration.
+  attachMotionBlur("#my-box", tl, { axis: "x" });
+
+  window.__timelines = window.__timelines || {};
+  window.__timelines["my-composition"] = tl;
+-->
diff --git a/docs/public/catalog/components/multi-device-splay/demo.html b/docs/public/catalog/components/multi-device-splay/demo.html
new file mode 100644
index 0000000000..17a29b16f2
--- /dev/null
+++ b/docs/public/catalog/components/multi-device-splay/demo.html
@@ -0,0 +1,112 @@
+<!doctype html>
+<!--
+  multi-device-splay demo. This standalone composition mounts the primitive
+  through data-composition-src. The violet override proves the accent enum
+  flows through the mount while the primitive sizes itself from the host box.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Multi Device Splay Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0b0c0e;
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --muted: #94a3b8;
+        --surface: #15181f;
+        --border: rgba(226, 232, 240, 0.16);
+        --brand: #8b5cf6;
+        --accent: #a78bfa;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-body: Inter, system-ui, sans-serif;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        --radius: 24px;
+        --space-1: 8px;
+        --space-2: 16px;
+        --space-3: 32px;
+        --dur-beat: 0.4s;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background:
+          radial-gradient(ellipse at 50% 42%, rgba(139, 92, 246, 0.13), transparent 44%),
+          radial-gradient(ellipse at 50% 55%, #1a1d24, #0b0c0e 68%);
+      }
+
+      .mount-stage {
+        width: 88%;
+        height: 76%;
+        left: 6%;
+        top: 12%;
+        container-type: size;
+        overflow: hidden;
+        border: 1px solid rgba(226, 232, 240, 0.08);
+        border-radius: 30px;
+        background: rgba(255, 255, 255, 0.018);
+        box-shadow: 0 50px 120px rgba(0, 0, 0, 0.34);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="multi-device-splay-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4.5"
+      data-fps="30"
+    >
+      <div
+        id="multi-device-splay-mount"
+        class="mount-stage clip"
+        data-composition-id="multi-device-splay"
+        data-composition-src="./multi-device-splay.html"
+        data-variable-values='{"accent":"violet"}'
+        data-start="0"
+        data-duration="4.5"
+        data-track-index="0"
+        data-width="1690"
+        data-height="821"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["multi-device-splay-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "multi-device-splay.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/multi-device-splay/multi-device-splay.html b/docs/public/catalog/components/multi-device-splay/multi-device-splay.html
new file mode 100644
index 0000000000..b0f441df49
--- /dev/null
+++ b/docs/public/catalog/components/multi-device-splay/multi-device-splay.html
@@ -0,0 +1,727 @@
+<!doctype html>
+<!--
+  multi-device-splay: HyperFrames video primitive (ui-props / devices / reveal)
+
+  Concept: phone, tablet, and desktop product mockups begin as one centered
+  stack, then fan into a proud three-device arrangement. Each screen uses the
+  same accent while keeping a layout skeleton suited to its form factor.
+
+  Variables:
+    - accent (green | blue | violet, default "blue"): shared product color.
+
+  Envelope: fixed IN and OUT with elastic HOLD only, never timeScale.
+    IN   1.35s fixed  devices fan out in phone, tablet, desktop order with a
+                      0.12s cascade and overshoot settle.
+    HOLD elastic      the settled devices float subtly around their final
+                      -12, 0, and +12 degree rotations.
+    OUT  0.55s fixed  the arrangement recedes and fades as one lockup.
+    If duration is shorter than IN + OUT, both fixed phases shrink by the
+    same ratio and HOLD becomes zero.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the cqw/cqh basis, has no data-width or data-height, and
+  registers one paused timeline under the hardcoded multi-device-splay id.
+-->
+<html
+  lang="en"
+  data-composition-id="multi-device-splay"
+  data-composition-duration="4.5"
+  data-composition-variables='[
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Shared accent color used by all three product screens.", "default": "blue", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Multi Device Splay</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="multi-device-splay" data-duration="4.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            pointer-events: none;
+          }
+
+          .mds-clip,
+          .mds-stage {
+            position: absolute;
+            inset: 0;
+          }
+
+          .mds-stage {
+            perspective: 120cqw;
+            perspective-origin: 50% 48%;
+          }
+
+          .mds-positioner {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform-style: preserve-3d;
+            will-change: transform, opacity;
+          }
+
+          .mds-positioner-desktop {
+            z-index: 1;
+          }
+
+          .mds-positioner-tablet {
+            z-index: 2;
+          }
+
+          .mds-positioner-phone {
+            z-index: 3;
+          }
+
+          .mds-device {
+            position: absolute;
+            left: 0;
+            top: 0;
+            transform: translate(-50%, -50%);
+            transform-origin: 50% 50%;
+          }
+
+          .mds-shell,
+          .mds-monitor {
+            background: linear-gradient(145deg, #3a3d45, #1b1d22 43%, #0f1115);
+            border: 0.12cqh solid rgba(255, 255, 255, 0.24);
+            box-shadow:
+              0 4.8cqh 9cqh rgba(0, 0, 0, 0.4),
+              0 1.3cqh 2.5cqh rgba(0, 0, 0, 0.28),
+              inset 0 0.12cqh 0 rgba(255, 255, 255, 0.22),
+              inset 0 0 0 0.1cqh rgba(0, 0, 0, 0.52);
+          }
+
+          .mds-phone {
+            width: auto;
+            height: 59cqh;
+            aspect-ratio: 9 / 19.5;
+            padding: 0.65cqh;
+            border-radius: 4.1cqh;
+          }
+
+          .mds-tablet {
+            width: auto;
+            height: 64cqh;
+            aspect-ratio: 3 / 4;
+            padding: 0.82cqh;
+            border-radius: 3.5cqh;
+          }
+
+          .mds-desktop {
+            width: 44cqw;
+          }
+
+          .mds-monitor {
+            width: 100%;
+            aspect-ratio: 16 / 10;
+            padding: 0.7cqh;
+            border-radius: 2.1cqh;
+          }
+
+          .mds-stand-neck {
+            width: 4.8cqw;
+            height: 6.2cqh;
+            margin: -0.1cqh auto 0;
+            background: linear-gradient(90deg, #17191e, #3c3f47 48%, #121419);
+            clip-path: polygon(24% 0, 76% 0, 92% 100%, 8% 100%);
+          }
+
+          .mds-stand-foot {
+            width: 15cqw;
+            height: 1.5cqh;
+            margin: -0.05cqh auto 0;
+            border-radius: 1cqh 1cqh 0.45cqh 0.45cqh;
+            background: linear-gradient(180deg, #464952, #17191e);
+            box-shadow: 0 1.2cqh 2.3cqh rgba(0, 0, 0, 0.34);
+          }
+
+          .mds-screen {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            isolation: isolate;
+            background: #f4f7fb;
+            box-shadow: inset 0 0 0 0.1cqh rgba(15, 23, 42, 0.22);
+          }
+
+          .mds-phone .mds-screen {
+            border-radius: 3.45cqh;
+          }
+
+          .mds-tablet .mds-screen {
+            border-radius: 2.7cqh;
+          }
+
+          .mds-monitor .mds-screen {
+            border-radius: 1.42cqh;
+          }
+
+          .mds-island {
+            position: absolute;
+            z-index: 5;
+            left: 50%;
+            top: 1.1cqh;
+            width: 5.2cqw;
+            height: 1.7cqh;
+            border-radius: 2cqh;
+            background: #07080a;
+            transform: translateX(-50%);
+          }
+
+          .mds-camera {
+            position: absolute;
+            z-index: 5;
+            left: 50%;
+            top: 0.65cqh;
+            width: 0.55cqh;
+            height: 0.55cqh;
+            border-radius: 50%;
+            background: #0a0b0e;
+            transform: translateX(-50%);
+          }
+
+          .mds-mobile-ui,
+          .mds-tablet-ui,
+          .mds-desktop-ui {
+            position: absolute;
+            inset: 0;
+            color: #172033;
+          }
+
+          .mds-mobile-ui {
+            padding: 5.4cqh 1.4cqw 1.8cqh;
+            background: linear-gradient(180deg, #edf4ff, #f8fafc 40%);
+          }
+
+          .mds-mobile-header,
+          .mds-tablet-header,
+          .mds-desktop-toolbar {
+            display: flex;
+            align-items: center;
+          }
+
+          .mds-mobile-header {
+            justify-content: space-between;
+            margin-bottom: 2.1cqh;
+          }
+
+          .mds-logo {
+            width: 2.1cqh;
+            height: 2.1cqh;
+            border-radius: 0.65cqh;
+            background: var(--mds-accent);
+            box-shadow: 0 0.7cqh 1.4cqh color-mix(in srgb, var(--mds-accent) 30%, transparent);
+          }
+
+          /* Placeholder ramp: every stand-in surface inside a device screen is
+             an alpha step of the ink. Accent stays on the app mark alone. */
+          .mds-screen {
+            --mds-l1: rgba(15, 23, 42, 0.72);
+            --mds-l2: rgba(15, 23, 42, 0.45);
+            --mds-l3: rgba(15, 23, 42, 0.18);
+            --mds-l4: rgba(15, 23, 42, 0.08);
+          }
+
+          .mds-line {
+            height: 0.7cqh;
+            border-radius: 1cqh;
+            background: #c4ccda;
+          }
+
+          .mds-mobile-header .mds-line {
+            width: 5.4cqw;
+          }
+
+          .mds-mobile-hero {
+            height: 12cqh;
+            margin-bottom: 1.6cqh;
+            border-radius: 1.4cqh;
+            background: var(--mds-l3, rgba(15, 23, 42, 0.18));
+            box-shadow: inset 0 0 0 0.1cqh rgba(15, 23, 42, 0.14);
+          }
+
+          .mds-mobile-row {
+            display: grid;
+            grid-template-columns: 2.6cqh 1fr;
+            gap: 0.75cqw;
+            align-items: center;
+            height: 5.8cqh;
+            margin-top: 1cqh;
+            padding: 0.8cqh 0.75cqw;
+            border-radius: 1.1cqh;
+            background: white;
+            box-shadow: 0 0.55cqh 1.3cqh rgba(30, 41, 59, 0.08);
+          }
+
+          .mds-mobile-icon {
+            width: 2.6cqh;
+            height: 2.6cqh;
+            border-radius: 0.8cqh;
+            background: var(--mds-l3, rgba(15, 23, 42, 0.18));
+          }
+
+          .mds-mobile-row .mds-line:first-child {
+            width: 70%;
+            margin-bottom: 0.7cqh;
+            background: #8e99ab;
+          }
+
+          .mds-mobile-row .mds-line:last-child {
+            width: 46%;
+            height: 0.5cqh;
+          }
+
+          .mds-tablet-ui {
+            display: grid;
+            grid-template-columns: 4.8cqw 1fr;
+            background: #f6f8fc;
+          }
+
+          .mds-tablet-nav,
+          .mds-desktop-nav {
+            background: #182033;
+          }
+
+          .mds-tablet-nav {
+            padding: 4.4cqh 1.25cqw;
+          }
+
+          .mds-nav-mark {
+            width: 2.3cqh;
+            height: 2.3cqh;
+            margin-bottom: 3cqh;
+            border-radius: 0.7cqh;
+            background: var(--mds-accent);
+          }
+
+          .mds-nav-line {
+            width: 100%;
+            height: 0.62cqh;
+            margin-bottom: 1.5cqh;
+            border-radius: 1cqh;
+            background: rgba(255, 255, 255, 0.18);
+          }
+
+          .mds-nav-line-active {
+            background: rgba(255, 255, 255, 0.72);
+          }
+
+          .mds-tablet-main {
+            padding: 4.4cqh 1.5cqw 2.2cqh;
+          }
+
+          .mds-tablet-header {
+            justify-content: space-between;
+            margin-bottom: 2.5cqh;
+          }
+
+          .mds-tablet-header .mds-line:first-child {
+            width: 8cqw;
+            height: 1cqh;
+            background: #657086;
+          }
+
+          .mds-tablet-header .mds-line:last-child {
+            width: 4cqw;
+          }
+
+          .mds-tablet-hero {
+            height: 12cqh;
+            margin-bottom: 1.5cqh;
+            border-radius: 1.25cqh;
+            background: var(--mds-l4, rgba(15, 23, 42, 0.08));
+            box-shadow: inset 0 0 0 0.1cqh rgba(15, 23, 42, 0.14);
+          }
+
+          .mds-tablet-grid {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 1.1cqh;
+          }
+
+          .mds-tablet-card {
+            height: 10.5cqh;
+            padding: 1.2cqh 0.9cqw;
+            border-radius: 1.1cqh;
+            background: white;
+            box-shadow: 0 0.65cqh 1.5cqh rgba(30, 41, 59, 0.08);
+          }
+
+          .mds-tablet-card::before {
+            content: "";
+            display: block;
+            width: 2.2cqh;
+            height: 2.2cqh;
+            margin-bottom: 1.4cqh;
+            border-radius: 0.65cqh;
+            background: var(--mds-l3, rgba(15, 23, 42, 0.18));
+          }
+
+          .mds-tablet-card::after {
+            content: "";
+            display: block;
+            width: 62%;
+            height: 0.65cqh;
+            border-radius: 1cqh;
+            background: #aeb7c6;
+          }
+
+          .mds-desktop-ui {
+            display: grid;
+            grid-template-columns: 7.2cqw 1fr;
+            grid-template-rows: 4.6cqh 1fr;
+            background: #f6f8fc;
+          }
+
+          .mds-desktop-toolbar {
+            grid-column: 1 / -1;
+            gap: 0.55cqw;
+            padding: 0 1.1cqw;
+            border-bottom: 0.1cqh solid #dce2eb;
+            background: white;
+          }
+
+          .mds-window-dot {
+            width: 0.72cqh;
+            height: 0.72cqh;
+            border-radius: 50%;
+            background: #c8ced8;
+          }
+
+          .mds-window-dot-accent {
+            background: var(--mds-accent);
+          }
+
+          .mds-address {
+            width: 13cqw;
+            height: 1.35cqh;
+            margin-left: 1.2cqw;
+            border-radius: 1cqh;
+            background: #edf0f5;
+          }
+
+          .mds-desktop-nav {
+            padding: 2.1cqh 1.1cqw;
+          }
+
+          .mds-desktop-nav .mds-nav-mark {
+            margin-bottom: 2.1cqh;
+          }
+
+          .mds-desktop-main {
+            padding: 2cqh 1.4cqw;
+          }
+
+          .mds-desktop-heading {
+            width: 10cqw;
+            height: 1.2cqh;
+            margin-bottom: 2cqh;
+            border-radius: 1cqh;
+            background: #647086;
+          }
+
+          .mds-desktop-stats {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 0.85cqw;
+            margin-bottom: 1.4cqh;
+          }
+
+          .mds-desktop-stat {
+            height: 7.5cqh;
+            border-radius: 0.9cqh;
+            background: white;
+            box-shadow: 0 0.55cqh 1.25cqh rgba(30, 41, 59, 0.07);
+          }
+
+          .mds-desktop-stat:first-child {
+            background: var(--mds-l3, rgba(15, 23, 42, 0.18));
+          }
+
+          .mds-desktop-chart {
+            position: relative;
+            height: 13cqh;
+            overflow: hidden;
+            border-radius: 1cqh;
+            background:
+              linear-gradient(to top, rgba(203, 213, 225, 0.38) 0.1cqh, transparent 0.1cqh) 0 0 /
+                100% 3.2cqh,
+              white;
+            box-shadow: 0 0.55cqh 1.25cqh rgba(30, 41, 59, 0.07);
+          }
+
+          .mds-desktop-chart::after {
+            content: "";
+            position: absolute;
+            left: 7%;
+            right: 7%;
+            bottom: 18%;
+            height: 0.42cqh;
+            border-radius: 1cqh;
+            background: var(--mds-l2, rgba(15, 23, 42, 0.45));
+            box-shadow:
+              3.5cqw -2.3cqh 0 var(--mds-l2, rgba(15, 23, 42, 0.45)),
+              7cqw -1.1cqh 0 var(--mds-l2, rgba(15, 23, 42, 0.45)),
+              10.5cqw -4.6cqh 0 var(--mds-l2, rgba(15, 23, 42, 0.45)),
+              14cqw -3.6cqh 0 var(--mds-l2, rgba(15, 23, 42, 0.45)),
+              17.5cqw -6.7cqh 0 var(--mds-l2, rgba(15, 23, 42, 0.45));
+          }
+        </style>
+
+        <div
+          id="multi-device-splay-clip"
+          class="mds-clip clip"
+          data-start="0"
+          data-duration="4.5"
+          data-track-index="0"
+        >
+          <div class="mds-stage">
+            <div class="mds-positioner mds-positioner-desktop" data-device="desktop">
+              <div class="mds-device mds-desktop">
+                <div class="mds-monitor">
+                  <div class="mds-screen">
+                    <div class="mds-desktop-ui">
+                      <div class="mds-desktop-toolbar">
+                        <span class="mds-window-dot mds-window-dot-accent"></span>
+                        <span class="mds-window-dot"></span>
+                        <span class="mds-window-dot"></span>
+                        <span class="mds-address"></span>
+                      </div>
+                      <div class="mds-desktop-nav">
+                        <div class="mds-nav-mark"></div>
+                        <div class="mds-nav-line mds-nav-line-active"></div>
+                        <div class="mds-nav-line"></div>
+                        <div class="mds-nav-line"></div>
+                        <div class="mds-nav-line"></div>
+                      </div>
+                      <div class="mds-desktop-main">
+                        <div class="mds-desktop-heading"></div>
+                        <div class="mds-desktop-stats">
+                          <div class="mds-desktop-stat"></div>
+                          <div class="mds-desktop-stat"></div>
+                          <div class="mds-desktop-stat"></div>
+                        </div>
+                        <div class="mds-desktop-chart"></div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="mds-stand-neck"></div>
+                <div class="mds-stand-foot"></div>
+              </div>
+            </div>
+
+            <div class="mds-positioner mds-positioner-tablet" data-device="tablet">
+              <div class="mds-device mds-shell mds-tablet">
+                <div class="mds-screen">
+                  <span class="mds-camera"></span>
+                  <div class="mds-tablet-ui">
+                    <div class="mds-tablet-nav">
+                      <div class="mds-nav-mark"></div>
+                      <div class="mds-nav-line mds-nav-line-active"></div>
+                      <div class="mds-nav-line"></div>
+                      <div class="mds-nav-line"></div>
+                    </div>
+                    <div class="mds-tablet-main">
+                      <div class="mds-tablet-header">
+                        <div class="mds-line"></div>
+                        <div class="mds-line"></div>
+                      </div>
+                      <div class="mds-tablet-hero"></div>
+                      <div class="mds-tablet-grid">
+                        <div class="mds-tablet-card"></div>
+                        <div class="mds-tablet-card"></div>
+                        <div class="mds-tablet-card"></div>
+                        <div class="mds-tablet-card"></div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="mds-positioner mds-positioner-phone" data-device="phone">
+              <div class="mds-device mds-shell mds-phone">
+                <div class="mds-screen">
+                  <span class="mds-island"></span>
+                  <div class="mds-mobile-ui">
+                    <div class="mds-mobile-header">
+                      <span class="mds-logo"></span>
+                      <span class="mds-line"></span>
+                    </div>
+                    <div class="mds-mobile-hero"></div>
+                    <div class="mds-mobile-row">
+                      <span class="mds-mobile-icon"></span>
+                      <span>
+                        <span class="mds-line"></span>
+                        <span class="mds-line"></span>
+                      </span>
+                    </div>
+                    <div class="mds-mobile-row">
+                      <span class="mds-mobile-icon"></span>
+                      <span>
+                        <span class="mds-line"></span>
+                        <span class="mds-line"></span>
+                      </span>
+                    </div>
+                    <div class="mds-mobile-row">
+                      <span class="mds-mobile-icon"></span>
+                      <span>
+                        <span class="mds-line"></span>
+                        <span class="mds-line"></span>
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var accentColors = {
+              green: "var(--brand, #22c55e)",
+              blue: "var(--accent, #3b82f6)",
+              violet: "var(--accent-2, #8b5cf6)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "blue";
+            root.style.setProperty("--mds-accent", accentColors[accent]);
+
+            var IN_BASE = 1.35;
+            var OUT_BASE = 0.55;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4.5"));
+            var totalBase = IN_BASE + OUT_BASE;
+            var envelopeScale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * envelopeScale;
+            var OUT = OUT_BASE * envelopeScale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var HOLD_START = IN;
+            var OUT_START = IN + HOLD;
+
+            var devices = [
+              {
+                element: root.querySelector('[data-device="phone"]'),
+                x: -30,
+                y: 3.5,
+                rotation: -12,
+                floatY: -0.65,
+                floatRotation: -0.55,
+              },
+              {
+                element: root.querySelector('[data-device="tablet"]'),
+                x: -5,
+                y: -1,
+                rotation: 0,
+                floatY: 0.7,
+                floatRotation: 0.35,
+              },
+              {
+                element: root.querySelector('[data-device="desktop"]'),
+                x: 24,
+                y: 2,
+                rotation: 12,
+                floatY: -0.5,
+                floatRotation: 0.5,
+              },
+            ];
+
+            var CASCADE = 0.12 * envelopeScale;
+            var FAN_DURATION = 0.9 * envelopeScale;
+            var tl = gsap.timeline({ paused: true });
+
+            devices.forEach(function (device, index) {
+              gsap.set(device.element, {
+                x: "0cqw",
+                y: "9cqh",
+                rotation: 0,
+                scale: 0.9,
+                opacity: 0,
+              });
+              tl.to(
+                device.element,
+                {
+                  x: device.x + "cqw",
+                  y: device.y + "cqh",
+                  rotation: device.rotation,
+                  scale: 1,
+                  opacity: 1,
+                  duration: FAN_DURATION,
+                  ease: "back.out(1.7)",
+                },
+                index * CASCADE,
+              );
+            });
+
+            if (HOLD > 0) {
+              devices.forEach(function (device) {
+                tl.to(
+                  device.element,
+                  {
+                    y: device.y + device.floatY + "cqh",
+                    rotation: device.rotation + device.floatRotation,
+                    duration: HOLD / 2,
+                    ease: "sine.inOut",
+                  },
+                  HOLD_START,
+                );
+                tl.to(
+                  device.element,
+                  {
+                    y: device.y + "cqh",
+                    rotation: device.rotation,
+                    duration: HOLD / 2,
+                    ease: "sine.inOut",
+                  },
+                  HOLD_START + HOLD / 2,
+                );
+              });
+            }
+
+            devices.forEach(function (device) {
+              tl.to(
+                device.element,
+                {
+                  y: device.y + 5 + "cqh",
+                  scale: 0.96,
+                  opacity: 0,
+                  duration: OUT,
+                  ease: "power2.in",
+                },
+                OUT_START,
+              );
+            });
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["multi-device-splay"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/multiplayer-cursors/demo.html b/docs/public/catalog/components/multiplayer-cursors/demo.html
new file mode 100644
index 0000000000..811fd4f7b9
--- /dev/null
+++ b/docs/public/catalog/components/multiplayer-cursors/demo.html
@@ -0,0 +1,137 @@
+<!doctype html>
+<!--
+  multiplayer-cursors demo. Standalone 1920x1080 host that mounts the
+  primitive through data-composition-src. The mount receives non-default
+  cursorCount and labels values, so both variables are proven through the
+  same per-instance path used by installed compositions. The primitive stays
+  responsible for all cursor markup and motion.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Multiplayer Cursors, Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #05070d);
+      }
+
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background:
+          radial-gradient(
+            circle at 50% 46%,
+            color-mix(in srgb, var(--accent, #38bdf8) 12%, transparent),
+            transparent 34%
+          ),
+          linear-gradient(145deg, var(--bg, #0b1220), var(--bg, #05070d) 68%);
+      }
+
+      .mount-card {
+        --bg: #0b1120;
+        --fg: #f8fafc;
+        --muted: #94a3b8;
+        --surface: #e2e8f0;
+        --border: #475569;
+        --brand: #a3e635;
+        --accent: #38bdf8;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-body: Inter, system-ui, sans-serif;
+        --font-mono: ui-monospace, monospace;
+        --radius: 999px;
+        --space-1: 0.7cqw;
+        --space-2: 1.25cqw;
+        --space-3: 2.4cqw;
+        --dur-beat: 0.55s;
+        --ease-standard: cubic-bezier(0.215, 0.61, 0.355, 1);
+        --ease-emphasis: cubic-bezier(0.19, 1, 0.22, 1);
+        position: absolute;
+        width: 54%;
+        height: 56%;
+        left: 23%;
+        top: 22%;
+        overflow: hidden;
+        border: 1px solid color-mix(in srgb, var(--border, #94a3b8) 28%, transparent);
+        border-radius: 36px;
+        background:
+          linear-gradient(
+            color-mix(in srgb, var(--border, #94a3b8) 5.5%, transparent) 1px,
+            transparent 1px
+          ),
+          linear-gradient(
+            90deg,
+            color-mix(in srgb, var(--border, #94a3b8) 5.5%, transparent) 1px,
+            transparent 1px
+          ),
+          radial-gradient(circle at 50% 50%, var(--bg, #162238), var(--bg, #0b1120) 64%);
+        background-size:
+          52px 52px,
+          52px 52px,
+          100% 100%;
+        box-shadow:
+          0 40px 100px color-mix(in srgb, var(--bg, #000000) 46%, transparent),
+          inset 0 1px 0 color-mix(in srgb, var(--fg, #ffffff) 5%, transparent);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="multiplayer-cursors-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="6"
+      data-fps="30"
+    >
+      <div
+        id="multiplayer-cursors-mount"
+        class="mount-card clip"
+        data-composition-id="multiplayer-cursors"
+        data-composition-src="./multiplayer-cursors.html"
+        data-variable-values='{"cursorCount":6,"labels":"Iris,Noah,Sam,Jo,Lee,Zed"}'
+        data-start="0"
+        data-duration="6"
+        data-track-index="0"
+        data-width="1037"
+        data-height="605"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      // Static host only. The mounted primitive owns all visible motion.
+      window.__timelines = window.__timelines || {};
+      window.__timelines["multiplayer-cursors-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "multiplayer-cursors.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/multiplayer-cursors/multiplayer-cursors.html b/docs/public/catalog/components/multiplayer-cursors/multiplayer-cursors.html
new file mode 100644
index 0000000000..e2480424d7
--- /dev/null
+++ b/docs/public/catalog/components/multiplayer-cursors/multiplayer-cursors.html
@@ -0,0 +1,429 @@
+<!doctype html>
+<!--
+  multiplayer-cursors, HyperFrames video primitive (pointers / loop / prove)
+
+  Concept: labeled collaborator cursors, each with an SVG pointer, matching
+  name chip, and soft color glow, reveal from spread positions and glide into
+  a shared center zone. Their gentle authored drift makes live multiplayer
+  presence visible without requiring a product-specific subject.
+
+  Compiled-from evidence: power-reel source 15-frosted-cursors.html
+  (production 60s reel, 2026-07). This extracts the deterministic labeled
+  cursor mechanic and patches the multiplayer-arrows hole predicted by the
+  pointers family definition. It does not carry over that reel's subject,
+  background workspace, frosted chip, real pointer, or You cursor.
+
+  Use when: proving that a canvas, document, board, or workspace supports live
+  collaboration, shared presence, or multiple people editing together.
+
+  Variables (declared in data-composition-variables below):
+    - cursorCount (number, default 4, range 2 to 6): visible collaborators.
+    - labels (string, default "Ana,Ken,Wen,Mia"): comma-separated names in
+      cursor order. Missing or blank entries become deterministic Guest names.
+
+  Envelope (fixed IN/OUT, elastic HOLD only, never gsap.timeScale()):
+    IN_BASE  = 0.70s  layer settles in and cursors reveal with a fixed stagger
+    HOLD     = elastic = max(0, D - (IN_BASE + OUT_BASE)); cursors converge,
+               then drift between authored center-zone points for a finite
+               number of sine.inOut legs that exactly fill the available time
+    OUT_BASE = 0.50s  layer accelerates into a clean fade
+    If D < IN_BASE + OUT_BASE, IN and OUT scale down together so IN + OUT == D
+    and HOLD == 0.
+
+  Sync point: none. This ambient collaboration loop has no causal action or
+  fixed event that another primitive needs to synchronize with.
+
+  Sound cue: none. The cursor motion is ambient and dispatches no hf:sfx event.
+
+  Mount contract: this file is a mountable sub-composition. A host loads it via
+  data-composition-src, and the runtime clones only <template> contents. The
+  root carries no data-width/data-height. It fills the host slot with
+  position:absolute, inset:0, and container-type:size, so every measurement can
+  stay container-relative. The root is styled by #root, never by a class. The
+  hardcoded timeline key remains "multiplayer-cursors" after mount flattening
+  strips data-composition-id from the mounted root. Variables come only from
+  window.__hyperframes.getVariables(), which owns merged defaults and host
+  overrides inside a mounted composition.
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "cursorCount", "type": "number", "role": "content", "label": "Cursor count", "description": "Number of labeled collaborator cursors.", "default": 4, "min": 2, "max": 6, "step": 1 },
+    { "id": "labels", "type": "string", "role": "content", "label": "Labels", "description": "Comma-separated cursor names, in order.", "default": "Ana,Ken,Wen,Mia" }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Multiplayer Cursors</title>
+    <!-- Metadata only. Mounting discards everything outside <template>. -->
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="multiplayer-cursors" data-duration="6" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          /* Root: elastic and position-blind. The host owns its box. Styled by
+             #root so composition scoping continues to match after mounting. */
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+          }
+
+          .mc-clip,
+          .mc-stage,
+          .mc-layer {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+          }
+
+          .mc-stage {
+            transform-origin: center;
+          }
+
+          /* EDIT ZONE: the focus ring is only a neutral convergence landmark.
+             Keep it secondary to the cursors and derived from theme tokens. */
+          .mc-focus {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            width: 15cqw;
+            aspect-ratio: 1;
+            border: 0.18cqw solid color-mix(in srgb, var(--border, #334155) 72%, transparent);
+            border-radius: var(--radius, 999cqw);
+            background: radial-gradient(
+              circle,
+              color-mix(in srgb, var(--surface, #1e293b) 78%, transparent) 0 28%,
+              color-mix(in srgb, var(--brand, #22c55e) 18%, transparent) 30% 48%,
+              transparent 70%
+            );
+            box-shadow:
+              0 0 8cqw color-mix(in srgb, var(--accent, #38bdf8) 16%, transparent),
+              inset 0 0 2.4cqw color-mix(in srgb, var(--brand, #22c55e) 16%, transparent);
+            transform: translate(-50%, -50%);
+            opacity: 0.78;
+          }
+
+          .mc-focus::after {
+            content: "";
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            width: 1.35cqw;
+            aspect-ratio: 1;
+            border-radius: var(--radius, 999cqw);
+            background: var(--brand, #22c55e);
+            box-shadow: 0 0 2.4cqw color-mix(in srgb, var(--brand, #22c55e) 55%, transparent);
+            transform: translate(-50%, -50%);
+          }
+
+          .mc-layer {
+            z-index: 2;
+          }
+
+          /* INVARIANT: each cursor is a sized block. GSAP owns only x, y,
+             rotation, scale, and opacity, so seeked spatial state is stable. */
+          .mc-cursor {
+            position: absolute;
+            left: 0;
+            top: 0;
+            display: block;
+            width: 20cqw;
+            height: 10cqh;
+            color: var(--mc-color, var(--brand, #22c55e));
+            transform-origin: 0 0;
+            will-change: transform, opacity;
+          }
+
+          .mc-cursor[data-tone="0"] {
+            --mc-color: var(--brand, #22c55e);
+          }
+
+          .mc-cursor[data-tone="1"] {
+            --mc-color: var(--accent, #38bdf8);
+          }
+
+          .mc-cursor[data-tone="2"] {
+            --mc-color: color-mix(
+              in oklch longer hue,
+              var(--brand, #22c55e) 72%,
+              var(--accent, #38bdf8)
+            );
+          }
+
+          .mc-cursor[data-tone="3"] {
+            --mc-color: color-mix(
+              in oklch longer hue,
+              var(--brand, #22c55e) 44%,
+              var(--accent, #38bdf8)
+            );
+          }
+
+          .mc-cursor[data-tone="4"] {
+            --mc-color: color-mix(in oklch, var(--brand, #22c55e) 38%, var(--accent, #38bdf8));
+          }
+
+          .mc-cursor[data-tone="5"] {
+            --mc-color: color-mix(in srgb, var(--accent, #38bdf8) 68%, var(--fg, #f8fafc));
+          }
+
+          .mc-glow {
+            position: absolute;
+            left: -6.5cqw;
+            top: -6.5cqw;
+            z-index: -1;
+            width: 16cqw;
+            aspect-ratio: 1;
+            border-radius: var(--radius, 999cqw);
+            background: radial-gradient(
+              circle,
+              color-mix(in srgb, var(--mc-color, var(--brand, #22c55e)) 44%, transparent),
+              transparent 72%
+            );
+            filter: blur(1.4cqw);
+            opacity: 0.58;
+          }
+
+          .mc-pointer {
+            position: absolute;
+            left: 0;
+            top: 0;
+            display: block;
+            width: 4.8cqw;
+            height: 4.8cqw;
+            filter: drop-shadow(
+              0 0.45cqw 0.7cqw color-mix(in srgb, var(--bg, #0b1120) 58%, transparent)
+            );
+          }
+
+          .mc-pointer path {
+            fill: currentColor;
+            stroke: var(--fg, #f8fafc);
+            stroke-width: 1.35;
+            stroke-linejoin: round;
+          }
+
+          .mc-label {
+            position: absolute;
+            left: 3.45cqw;
+            top: 3.55cqw;
+            display: block;
+            max-width: 15cqw;
+            overflow: hidden;
+            padding: var(--space-1, 0.7cqw) var(--space-2, 1.25cqw);
+            border: 0.12cqw solid color-mix(in srgb, var(--fg, #f8fafc) 30%, transparent);
+            border-radius: var(--radius, 1.2cqw);
+            border-top-left-radius: 0.32cqw;
+            background: color-mix(
+              in srgb,
+              var(--mc-color, var(--brand, #22c55e)) 84%,
+              var(--surface, #1e293b)
+            );
+            color: var(--fg, #0b1120);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: 2.15cqw;
+            font-weight: 720;
+            line-height: 1;
+            letter-spacing: 0.01em;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            box-shadow:
+              0 0.65cqw 1.5cqw color-mix(in srgb, var(--bg, #0b1120) 32%, transparent),
+              inset 0 0.12cqw 0 color-mix(in srgb, var(--fg, #f8fafc) 22%, transparent);
+          }
+        </style>
+
+        <div
+          id="multiplayer-cursors-clip"
+          class="mc-clip clip"
+          data-start="0"
+          data-duration="6"
+          data-track-index="0"
+        >
+          <div class="mc-stage">
+            <div class="mc-focus" aria-hidden="true"></div>
+            <div class="mc-layer" aria-hidden="true"></div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.currentScript.closest("#root") || document.getElementById("root");
+            // Literal by contract: mount flattening strips data-composition-id
+            // from the mounted inner root before this registration is consumed.
+            var compositionId = "multiplayer-cursors";
+            var stage = root.querySelector(".mc-stage");
+            var layer = root.querySelector(".mc-layer");
+
+            // EDIT ZONE: variable defaults mirror the outer declaration.
+            // getVariables owns the declared-defaults-plus-host-overrides merge.
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            // INVARIANT: count is always an integer in the declared 2 to 6 range.
+            var rawCount = Number(vars.cursorCount);
+            var cursorCount = Math.max(
+              2,
+              Math.min(6, Number.isFinite(rawCount) ? Math.round(rawCount) : 4),
+            );
+            var rawLabels = vars.labels == null ? "Ana,Ken,Wen,Mia" : String(vars.labels);
+            var parsedLabels = rawLabels.split(",").map(function (label) {
+              return label.trim();
+            });
+
+            // Authored percentages are the single source for every path. Each
+            // row is start, gather, drift, then the matching rotations.
+            var WAYPOINTS = [
+              { start: [10, 16], gather: [42, 40], drift: [46, 36], rotation: [-10, 2, 6] },
+              { start: [66, 12], gather: [52, 38], drift: [58, 42], rotation: [8, -3, 4] },
+              { start: [76, 38], gather: [57, 49], drift: [54, 55], rotation: [12, 3, -4] },
+              { start: [64, 76], gather: [53, 59], drift: [48, 57], rotation: [-8, 4, -3] },
+              { start: [20, 76], gather: [43, 60], drift: [38, 55], rotation: [9, -4, 5] },
+              { start: [7, 46], gather: [38, 50], drift: [42, 45], rotation: [-12, 3, -5] },
+            ];
+            var POINTER_SVG =
+              '<svg class="mc-pointer" viewBox="0 0 24 24" fill="none"><path d="M5.5 3.21V20.8c0 .45.54.67.85.35l4.86-4.86a.5.5 0 0 1 .35-.15h6.87c.48 0 .72-.58.38-.92L5.94 2.47a.5.5 0 0 0-.44.74Z" /></svg>';
+            var cursors = [];
+
+            for (var index = 0; index < cursorCount; index += 1) {
+              var cursor = document.createElement("div");
+              cursor.className = "mc-cursor";
+              cursor.dataset.tone = String(index);
+              cursor.innerHTML = '<span class="mc-glow"></span>' + POINTER_SVG;
+
+              var label = document.createElement("span");
+              label.className = "mc-label";
+              label.textContent = parsedLabels[index] || "Guest " + (index + 1);
+              cursor.appendChild(label);
+              layer.appendChild(cursor);
+              cursors.push({ element: cursor, path: WAYPOINTS[index] });
+            }
+
+            // RETIME RANGE: fixed envelope values and authored motion cadence.
+            // HOLD alone expands. Finite drift legs are floored, then stretched
+            // evenly to fill their remaining window without overshooting OUT.
+            var IN_BASE = 0.7;
+            var OUT_BASE = 0.5;
+            var STAGE_IN_BASE = 0.42;
+            var REVEAL_BASE = 0.26;
+            var REVEAL_STAGGER_BASE = 0.055;
+            var MOVE_STAGGER_BASE = 0.035;
+            var CONVERGE_BASE = 1.35;
+            var beat = parseFloat(getComputedStyle(root).getPropertyValue("--dur-beat")) || 0.55;
+            var DRIFT_LEG_BASE = Math.max(0.55, beat * 1.45);
+
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "6"));
+            var totalBase = IN_BASE + OUT_BASE;
+            var envelopeScale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * envelopeScale;
+            var OUT = OUT_BASE * envelopeScale;
+            var STAGE_IN = STAGE_IN_BASE * envelopeScale;
+            var REVEAL = REVEAL_BASE * envelopeScale;
+            var REVEAL_STAGGER = REVEAL_STAGGER_BASE * envelopeScale;
+            var MOVE_STAGGER = MOVE_STAGGER_BASE * envelopeScale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var HOLD_START = IN;
+            var OUT_START = IN + HOLD;
+            var CONVERGE = Math.min(CONVERGE_BASE * envelopeScale, HOLD);
+            var DRIFT_START = HOLD_START + CONVERGE;
+            var DRIFT_WINDOW = Math.max(0, HOLD - CONVERGE);
+
+            gsap.set(stage, { opacity: 0, scale: 0.97 });
+            cursors.forEach(function (cursor) {
+              gsap.set(cursor.element, {
+                x: cursor.path.start[0] + "cqw",
+                y: cursor.path.start[1] + "cqh",
+                rotation: cursor.path.rotation[0],
+                opacity: 0,
+                scale: 0.92,
+              });
+            });
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: emphatic layer settle and deterministic per-cursor reveal.
+            tl.to(stage, { opacity: 1, scale: 1, duration: STAGE_IN, ease: "power3.out" }, 0);
+            cursors.forEach(function (cursor, index) {
+              tl.to(
+                cursor.element,
+                { opacity: 1, scale: 1, duration: REVEAL, ease: "power2.out" },
+                index * REVEAL_STAGGER,
+              );
+            });
+
+            // HOLD: authored sine convergence, then a finite center-zone loop.
+            if (CONVERGE > 0) {
+              cursors.forEach(function (cursor, index) {
+                var moveDelay = Math.min(index * MOVE_STAGGER, CONVERGE * 0.35);
+                tl.to(
+                  cursor.element,
+                  {
+                    x: cursor.path.gather[0] + "cqw",
+                    y: cursor.path.gather[1] + "cqh",
+                    rotation: cursor.path.rotation[1],
+                    duration: Math.max(0.001, CONVERGE - moveDelay),
+                    ease: "sine.inOut",
+                  },
+                  HOLD_START + moveDelay,
+                );
+              });
+            }
+
+            if (DRIFT_WINDOW >= DRIFT_LEG_BASE) {
+              cursors.forEach(function (cursor, index) {
+                var driftDelay = Math.min(index * MOVE_STAGGER, DRIFT_WINDOW * 0.12);
+                var cursorWindow = Math.max(0, DRIFT_WINDOW - driftDelay);
+                var driftLegCount = Math.max(1, Math.floor(cursorWindow / DRIFT_LEG_BASE));
+                var driftLeg = cursorWindow / driftLegCount;
+                var driftRepeat = Math.max(0, driftLegCount - 1);
+                tl.fromTo(
+                  cursor.element,
+                  {
+                    x: cursor.path.gather[0] + "cqw",
+                    y: cursor.path.gather[1] + "cqh",
+                    rotation: cursor.path.rotation[1],
+                  },
+                  {
+                    x: cursor.path.drift[0] + "cqw",
+                    y: cursor.path.drift[1] + "cqh",
+                    rotation: cursor.path.rotation[2],
+                    duration: driftLeg,
+                    ease: "sine.inOut",
+                    immediateRender: false,
+                    yoyo: true,
+                    repeat: driftRepeat,
+                  },
+                  DRIFT_START + driftDelay,
+                );
+              });
+            }
+
+            // OUT: asymmetric accelerated fade, while HOLD motion resolves.
+            tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/native-notification-pop/README.md b/docs/public/catalog/components/native-notification-pop/README.md
new file mode 100644
index 0000000000..159e7c2397
--- /dev/null
+++ b/docs/public/catalog/components/native-notification-pop/README.md
@@ -0,0 +1,101 @@
+# native-notification-pop
+
+One system-faithful notification banner drops in over any scene: fast
+arrival, soft overshoot, settled mass. The `os` enum picks the chrome
+geometry (`ios` is a wide centered banner with a large radius, `macos` is a
+compact top-right banner). The banner carries an app dot, a small-caps app
+label, a title, and one body line over a backdrop blur; it holds at rest and
+tucks away only via the `exit` variable. Distinct from notification-stack:
+this is overlay chrome, faithful to the OS, one banner.
+
+Arrival is a closed-form underdamped spring sampled from a linear driver, so
+the banner's position is a pure function of timeline time: seeks in either
+direction land on identical frames, and the motion is interruptible in the
+Wave K L1 sense (banner y has exactly one owner at any moment; nothing ever
+snaps to zero velocity mid-flight).
+
+## Files
+
+- `native-notification-pop.html`: the mountable sub-composition (install
+  target: `compositions/components/native-notification-pop.html`).
+- `registry-item.json`: registry metadata and the variables block.
+
+## Variables
+
+| id          | type   | default                              | notes                                                                     |
+| ----------- | ------ | ------------------------------------ | ------------------------------------------------------------------------- |
+| `title`     | string | `Render complete`                    | the notification title line                                               |
+| `body`      | string | `launch-cut.mp4 is ready to preview` | one body line; long lines truncate with an ellipsis                       |
+| `app_label` | string | `HyperFrames`                        | small-caps app name row; empty string hides the row                       |
+| `os`        | enum   | `ios`                                | `ios` = wide centered banner, `macos` = compact top-right banner          |
+| `at`        | number | `0.3`                                | seconds after mount start when the drop begins (clamped before any exit)  |
+| `accent`    | enum   | `green`                              | `green` maps to `--brand`, `blue` to `--accent`, `violet` to `--accent-2` |
+| `exit`      | enum   | `none`                               | `none` holds; `up` tucks the banner back off the top; `fade` fades it     |
+
+Envelope: IN = `at` + 0.9s spring drop (first contact with rest at `at` +
+~0.31s), OUT = 0.45s only when `exit` is `fade` or `up`, HOLD is the sole
+elastic phase and the banner rests dead still. The `banner-land` sync point
+(`hf:sfx` id `notification-pop`) fires at first contact with rest, 0.61s at
+defaults. `exit` moves only the banner; the scene slot holds regardless
+(frame roots own scene transitions).
+
+## The slot mechanism
+
+The primitive ships one named slot inside its `<template>`:
+
+```html
+<div class="nnp-slot" data-slot="scene">...</div>
+```
+
+The slot's default children are a token backdrop (soft color fields plus a
+skeleton card, saturated enough that the banner blur visibly reads), so an
+untouched mount still works as a complete overlay demo. To drop the banner
+over your own scene, install the component and **replace the children of the
+`[data-slot="scene"]` element in your installed copy** (the runtime clones
+only the primitive's own template on mount, so slot content lives in the
+component file, not on the host clip).
+
+Rules:
+
+- The slot is full-bleed. Direct `img`/`video` children are automatically
+  sized to cover the frame (`object-fit: cover`). Arbitrary HTML works too;
+  size it in `cqw`/`cqh`.
+- Keep the banner and its anchor alone; they render above slot content.
+- The banner backdrop blur samples whatever the slot shows; busy, colorful
+  scenes read best. If your host compositor flattens the blur, the
+  translucent surface fill underneath carries the banner on its own.
+
+## Worked example
+
+Install, then fill the slot with a product screenshot:
+
+```bash
+npx hyperframes add native-notification-pop
+```
+
+In `compositions/components/native-notification-pop.html`, replace the
+slot's default block:
+
+```html
+<div class="nnp-slot" data-slot="scene">
+  <img src="../../assets/editor-timeline.png" alt="" />
+</div>
+```
+
+Mount it from a host composition like any sub-composition:
+
+```html
+<div
+  class="clip"
+  data-composition-id="native-notification-pop"
+  data-composition-src="./components/native-notification-pop.html"
+  data-variable-values='{"title":"Export finished","body":"reel-final.mov saved to Renders","app_label":"Conveyor","os":"macos","accent":"blue"}'
+  data-start="6"
+  data-duration="3"
+  data-track-index="1"
+></div>
+```
+
+The macOS banner springs in at the top right 0.3s after the clip mounts,
+settles with a soft overshoot, and holds at rest for the remainder of the
+clip window (`exit` defaults to `none`; frame roots own scene transitions).
diff --git a/docs/public/catalog/components/native-notification-pop/demo.html b/docs/public/catalog/components/native-notification-pop/demo.html
new file mode 100644
index 0000000000..ecf9c365fc
--- /dev/null
+++ b/docs/public/catalog/components/native-notification-pop/demo.html
@@ -0,0 +1,109 @@
+<!doctype html>
+<!--
+  native-notification-pop demo. This standalone composition mounts the
+  primitive through data-composition-src. Non-default os, title, body,
+  app_label, at, and accent values prove the variable path while the
+  primitive remains elastic to its host.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>native-notification-pop Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #0b0c0e);
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --muted: #8b95a6;
+        --surface: #14171c;
+        --border: #343a46;
+        --brand: #71f5a7;
+        --accent: #61a8ff;
+        --accent-2: #c5a3ff;
+        --font-body: system-ui, -apple-system, "Segoe UI", sans-serif;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(
+          ellipse at 50% 44%,
+          var(--bg, #171a20) 0%,
+          var(--bg, #0b0c0e) 72%
+        );
+      }
+
+      .mount-card {
+        width: 84%;
+        height: 82%;
+        left: 8%;
+        top: 9%;
+        container-type: size;
+        overflow: hidden;
+        border: 1px solid color-mix(in srgb, var(--border, #94a3b8) 20%, transparent);
+        border-radius: 30px;
+        background: color-mix(in srgb, var(--surface, #101318) 72%, transparent);
+        box-shadow: 0 40px 100px color-mix(in srgb, var(--bg, #000000) 48%, transparent);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="native-notification-pop-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="3"
+      data-fps="30"
+    >
+      <div
+        id="native-notification-pop-mount"
+        class="mount-card clip"
+        data-composition-id="native-notification-pop"
+        data-composition-src="./native-notification-pop.html"
+        data-variable-values='{"title":"Export finished","body":"reel-final.mov saved to Renders","app_label":"Conveyor","os":"macos","at":0.45,"accent":"blue"}'
+        data-start="0"
+        data-duration="3"
+        data-track-index="0"
+        data-width="1613"
+        data-height="886"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["native-notification-pop-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "native-notification-pop.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/native-notification-pop/native-notification-pop.html b/docs/public/catalog/components/native-notification-pop/native-notification-pop.html
new file mode 100644
index 0000000000..5b890d17b7
--- /dev/null
+++ b/docs/public/catalog/components/native-notification-pop/native-notification-pop.html
@@ -0,0 +1,456 @@
+<!doctype html>
+<!--
+  native-notification-pop: HyperFrames video primitive (product-demo / overlay)
+
+  One system-faithful notification banner drops in over ANY scene: fast
+  arrival, soft overshoot, settled mass. The os enum picks the chrome
+  geometry: ios is a wide centered banner with a large radius, macos is a
+  compact top-right banner. The banner carries an app dot, an app label, a
+  title, and one body line over a backdrop-filter blur; it holds at rest and
+  tucks away only via the exit variable. Distinct from notification-stack:
+  this is overlay chrome, faithful to the OS, one banner.
+
+  Spring law: arrival is a closed-form underdamped spring sampled from a
+  linear driver, y(t) = -offset * e^(-zeta*w*t) * (cos(wd*t) +
+  (zeta*w/wd) * sin(wd*t)). Position is a pure function of timeline time, so
+  forward seeks, reverse seeks, and repeated seeks are byte-identical, and a
+  mid-motion redirect (an exit overlapping the drop) picks up the current
+  sampled position instead of snapping (Wave K L1): banner y has exactly one
+  owner at any time (spring sampler, then the rest pin, then the exit tween,
+  in timeline order), and the drop cue is clamped so the spring always
+  completes before OUT begins.
+
+  Backdrop blur: the banner uses backdrop-filter blur + saturate over the
+  scene. If a host compositor flattens or lags the blur under seeks, remove
+  the backdrop-filter lines; the color-mix surface fill underneath is opaque
+  enough to carry the banner on its own (verified fallback).
+
+  Slot (see README.md for a worked example):
+    - [data-slot="scene"]: the full-bleed background the banner drops over.
+      Replace the children of this element in your installed copy. Default:
+      a token backdrop with soft color fields and a skeleton card, saturated
+      enough that the banner blur visibly reads.
+
+  Variables (declared in data-composition-variables below):
+    - title (string): the notification title line.
+    - body (string): one body line. Long lines truncate with an ellipsis.
+    - app_label (string, default "HyperFrames"): small-caps app name row.
+    - os (ios | macos, default ios): banner geometry and placement.
+    - at (number, seconds, default 0.3): when the drop starts, relative to
+      mount start. Clamped so the spring settles before any exit.
+    - accent (green | blue | violet, default green): app dot color.
+      green maps to --brand, blue to --accent, violet to --accent-2.
+    - exit (none | fade | up, default none): none holds the banner at rest;
+      up tucks the banner back off the top (the native dismiss); fade fades
+      it in place. The scene slot holds regardless: frame roots own scene
+      transitions.
+
+  Envelope (fixed IN/OUT, elastic HOLD only, never gsap.timeScale()):
+    IN   = at + 0.9s spring drop (first contact with rest at at + ~0.31s)
+    HOLD = elastic; the banner rests dead still
+    OUT  = 0.45s when exit is fade or up, 0 when exit is none
+
+  Sound cue: dispatches a bubbling `hf:sfx` CustomEvent with id
+  "notification-pop" at first contact with rest. This primitive never plays
+  audio.
+
+  Mount contract: MOUNTABLE SUB-COMPOSITION. The runtime clones only
+  <template> contents; #root fills the host box (inset: 0, container-type:
+  size), has no data-width/data-height, and registers one paused timeline
+  under the literal "native-notification-pop" key. Variables come from
+  window.__hyperframes.getVariables().
+-->
+<html
+  lang="en"
+  data-composition-id="native-notification-pop"
+  data-composition-duration="3"
+  data-composition-variables='[
+    { "id": "title", "type": "string", "role": "content", "label": "Title", "description": "The notification title line.", "default": "Render complete" },
+    { "id": "body", "type": "string", "role": "content", "label": "Body", "description": "One body line. Long lines truncate with an ellipsis.", "default": "launch-cut.mp4 is ready to preview" },
+    { "id": "app_label", "type": "string", "role": "content", "label": "App label", "description": "Small-caps app name row beside the app dot.", "default": "HyperFrames" },
+    { "id": "os", "type": "enum", "role": "style", "label": "OS", "description": "Banner geometry and placement: wide centered iOS or compact top-right macOS.", "default": "ios", "options": [{ "value": "ios", "label": "iOS" }, { "value": "macos", "label": "macOS" }] },
+    { "id": "at", "type": "number", "role": "timing", "label": "Drop start", "description": "Seconds after mount start when the banner drops in.", "default": 0.3, "min": 0, "max": 8, "step": 0.05, "unit": "s" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "App dot color.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "None holds the banner; up tucks it back off the top; fade fades it in place.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Native Notification Pop</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="native-notification-pop" data-duration="3" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            background: var(--bg, #07111f);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .nnp-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+          }
+
+          .nnp-slot,
+          .nnp-slot > img,
+          .nnp-slot > video {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+          }
+
+          .nnp-slot > img,
+          .nnp-slot > video {
+            object-fit: cover;
+          }
+
+          /* Token backdrop default: soft saturated color fields plus a
+             skeleton card, so the banner blur has structure to smear.
+             Callers replacing slot children never see any of this. */
+          .nnp-default {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            background:
+              radial-gradient(
+                50cqw 42cqh at 24% 12%,
+                color-mix(in srgb, var(--brand, #22c55e) 34%, transparent) 0%,
+                transparent 70%
+              ),
+              radial-gradient(
+                46cqw 40cqh at 82% 26%,
+                color-mix(in srgb, var(--accent-2, #c5a3ff) 30%, transparent) 0%,
+                transparent 70%
+              ),
+              radial-gradient(
+                ellipse at 50% 90%,
+                color-mix(in srgb, var(--surface, #172033) 80%, var(--bg, #07111f)) 0%,
+                var(--bg, #07111f) 78%
+              );
+          }
+
+          .nnp-card {
+            width: 52cqw;
+            padding: var(--space-3, 4cqh) var(--space-3, 4cqw);
+            border: 0.16cqmin solid var(--border, #334155);
+            border-radius: var(--radius, 2.4cqmin);
+            background: color-mix(in srgb, var(--surface, #172033) 88%, var(--bg, #07111f));
+          }
+
+          .nnp-card-bar {
+            width: 34%;
+            height: 4.2cqh;
+            margin-bottom: var(--space-3, 4cqh);
+            border-radius: 1.2cqh;
+            background: var(--muted, #94a3b8);
+            opacity: 0.55;
+          }
+
+          .nnp-card-line {
+            height: 2.2cqh;
+            margin-bottom: var(--space-2, 2.6cqh);
+            border-radius: 1.2cqh;
+            background: var(--muted, #94a3b8);
+            opacity: 0.38;
+          }
+
+          .nnp-card-line:nth-of-type(2) {
+            width: 90%;
+          }
+
+          .nnp-card-line:nth-of-type(3) {
+            width: 62%;
+          }
+
+          /* The anchor owns placement so the banner transform belongs to the
+             spring alone (a translateX(-50%) centering transform would be
+             clobbered by the gsap y). */
+          .nnp-anchor {
+            position: absolute;
+            inset: 0 0 auto 0;
+            display: flex;
+            z-index: 3;
+          }
+
+          .nnp-anchor[data-os="ios"] {
+            justify-content: center;
+            padding-top: 4.5cqh;
+          }
+
+          .nnp-anchor[data-os="macos"] {
+            justify-content: flex-end;
+            padding: 3.5cqh 2.2cqw 0 0;
+          }
+
+          .nnp-banner {
+            display: flex;
+            align-items: center;
+            gap: var(--space-2, 2.4cqmin);
+            border: 0.14cqmin solid color-mix(in srgb, var(--fg, #f8fafc) 16%, transparent);
+            background: color-mix(in srgb, var(--surface, #172033) 62%, transparent);
+            -webkit-backdrop-filter: blur(3.2cqmin) saturate(140%);
+            backdrop-filter: blur(3.2cqmin) saturate(140%);
+            box-shadow: 0 2.4cqh 7cqh color-mix(in srgb, var(--bg, #07111f) 50%, transparent);
+            will-change: transform;
+          }
+
+          .nnp-anchor[data-os="ios"] .nnp-banner {
+            width: 58cqw;
+            border-radius: 3.6cqmin;
+            padding: 2.6cqmin 3cqmin;
+          }
+
+          .nnp-anchor[data-os="macos"] .nnp-banner {
+            width: 38cqw;
+            border-radius: 2.2cqmin;
+            padding: 2.2cqmin 2.6cqmin;
+          }
+
+          .nnp-dot {
+            flex: 0 0 auto;
+            width: 5.4cqmin;
+            aspect-ratio: 1;
+            border-radius: 30%;
+            background: linear-gradient(
+              160deg,
+              color-mix(in srgb, var(--nnp-accent) 72%, var(--fg, #f8fafc)) 0%,
+              var(--nnp-accent) 62%
+            );
+          }
+
+          .nnp-anchor[data-os="macos"] .nnp-dot {
+            width: 4.6cqmin;
+            border-radius: 24%;
+          }
+
+          .nnp-copy {
+            flex: 1 1 auto;
+            min-width: 0;
+          }
+
+          .nnp-app,
+          .nnp-title,
+          .nnp-body {
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+          }
+
+          .nnp-app {
+            color: var(--muted, #94a3b8);
+            font-size: 1.9cqmin;
+            font-weight: 500;
+            letter-spacing: 0.11em;
+            line-height: 1.5;
+            text-transform: uppercase;
+          }
+
+          .nnp-app:empty {
+            display: none;
+          }
+
+          .nnp-title {
+            color: var(--fg, #f8fafc);
+            font-size: 2.7cqmin;
+            font-weight: 600;
+            line-height: 1.35;
+          }
+
+          .nnp-body {
+            color: var(--muted, #94a3b8);
+            font-size: 2.4cqmin;
+            font-weight: 400;
+            line-height: 1.4;
+          }
+        </style>
+
+        <div
+          id="native-notification-pop-clip"
+          class="nnp-clip clip"
+          data-start="0"
+          data-duration="3"
+          data-track-index="0"
+        >
+          <div class="nnp-slot" data-slot="scene">
+            <!-- SLOT "scene": replace the children of this element with your
+                 own full-bleed content (img, video, or HTML). -->
+            <div class="nnp-default" aria-hidden="true">
+              <div class="nnp-card">
+                <div class="nnp-card-bar"></div>
+                <div class="nnp-card-line"></div>
+                <div class="nnp-card-line"></div>
+              </div>
+            </div>
+          </div>
+
+          <div class="nnp-anchor" data-os="ios">
+            <div class="nnp-banner" role="status">
+              <div class="nnp-dot" aria-hidden="true"></div>
+              <div class="nnp-copy">
+                <div class="nnp-app"></div>
+                <div class="nnp-title"></div>
+                <div class="nnp-body"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            // Literal id: mount flattening strips data-composition-id from the
+            // live root before this timeline registers.
+            var compositionId = "native-notification-pop";
+            var clip = root.querySelector(".nnp-clip");
+            var anchor = root.querySelector(".nnp-anchor");
+            var banner = root.querySelector(".nnp-banner");
+
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var title = vars.title == null ? "Render complete" : String(vars.title);
+            var body = vars.body == null ? "launch-cut.mp4 is ready to preview" : String(vars.body);
+            var appLabel = vars.app_label == null ? "HyperFrames" : String(vars.app_label);
+            var os = vars.os === "macos" ? "macos" : "ios";
+            var rawAt = vars.at == null ? 0.3 : Number(vars.at);
+            var at = Number.isFinite(rawAt) ? Math.max(0, Math.min(8, rawAt)) : 0.3;
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #22c55e)",
+              blue: "var(--accent, #38bdf8)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            // The bundler mirrors composition variables as scoped CSS custom
+            // props, so this unit's own accent variable shadows the contract
+            // --accent token inside the subtree. When the shadow is present,
+            // fall back to the literal contract value instead of var(--accent).
+            var computedAccent = getComputedStyle(root).getPropertyValue("--accent").trim();
+            if (
+              computedAccent === "green" ||
+              computedAccent === "blue" ||
+              computedAccent === "violet"
+            ) {
+              accentColors.blue = "#38bdf8";
+            }
+            root.style.setProperty("--nnp-accent", accentColors[accent]);
+
+            anchor.setAttribute("data-os", os);
+            root.querySelector(".nnp-app").textContent = appLabel;
+            root.querySelector(".nnp-title").textContent = title;
+            root.querySelector(".nnp-body").textContent = body;
+            banner.setAttribute("aria-label", appLabel + ": " + title + ". " + body);
+
+            // RETIME RANGE: fixed phases; HOLD is the only elastic span.
+            var DROP = 0.9;
+            var OUT_BASE = exit === "none" ? 0 : 0.45;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "3"));
+            var OUT = Math.min(OUT_BASE, duration * 0.2);
+            var OUT_START = duration - OUT;
+            // The spring always settles before any exit: no second tween ever
+            // fights the sampler for banner y (Wave K L1 single-owner form).
+            at = Math.min(at, Math.max(0, OUT_START - DROP));
+
+            // Start fully above the frame: measured px at mount (cq-unit
+            // transform tweens misbehave under seeks; px measured once do not).
+            var clipTop = clip.getBoundingClientRect().top;
+            var bannerBottom = banner.getBoundingClientRect().bottom;
+            var offset = Math.max(1, bannerBottom - clipTop + 4);
+
+            // System spring constants, tuned against the iOS/macOS banner
+            // feel: first contact with rest at ~0.31s, ~3% soft overshoot,
+            // visually settled by ~0.7s.
+            var OMEGA = 15;
+            var ZETA = 0.74;
+            var OMEGA_D = OMEGA * Math.sqrt(1 - ZETA * ZETA);
+            function springEnvelope(t) {
+              return (
+                Math.exp(-ZETA * OMEGA * t) *
+                (Math.cos(OMEGA_D * t) + ((ZETA * OMEGA) / OMEGA_D) * Math.sin(OMEGA_D * t))
+              );
+            }
+            var LAND = Math.PI / OMEGA_D; // first contact with rest
+
+            function fireSfx(id, t) {
+              root.dispatchEvent(
+                new CustomEvent("hf:sfx", { detail: { id: id, t: t }, bubbles: true }),
+              );
+            }
+
+            gsap.set(banner, { y: -offset, opacity: 1 });
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: the spring drop. A linear driver samples the closed form,
+            // so position is a pure function of time and seeks in either
+            // direction land on identical frames.
+            var driver = { t: 0 };
+            tl.to(
+              driver,
+              {
+                t: DROP,
+                duration: DROP,
+                ease: "none",
+                onUpdate: function () {
+                  gsap.set(banner, { y: -offset * springEnvelope(driver.t) });
+                },
+              },
+              at,
+            );
+            // Pin exactly to rest for the hold (the envelope tail is ~0 but
+            // not exactly 0).
+            tl.set(banner, { y: 0 }, at + DROP);
+            tl.call(
+              function () {
+                fireSfx("notification-pop", at + LAND);
+              },
+              [],
+              at + LAND,
+            );
+
+            // HOLD: settled mass. Dead still.
+
+            // OUT: the banner tucks away only via exit; the scene holds
+            // (frame roots own scene transitions).
+            if (exit === "up") {
+              tl.to(banner, { y: -offset, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "fade") {
+              tl.to(banner, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/notification-pileup/demo.html b/docs/public/catalog/components/notification-pileup/demo.html
new file mode 100644
index 0000000000..504cb92631
--- /dev/null
+++ b/docs/public/catalog/components/notification-pileup/demo.html
@@ -0,0 +1,111 @@
+<!doctype html>
+<!--
+  notification-pileup demo. This standalone 1920x1080 host mounts the
+  primitive through data-composition-src instead of inlining it. Non-default
+  count, speed, and showBadges values prove per-instance variables cross the
+  mount boundary. The host owns only the stage and an empty paused timeline.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Notification Pileup Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--demo-bg, #05070d);
+      }
+
+      #root {
+        --bg: #0b1120;
+        --fg: #f8fafc;
+        --surface: #1e293b;
+        --brand: #22c55e;
+        --muted: #94a3b8;
+        --border: #334155;
+        --accent: #38bdf8;
+        --font-body: Inter, system-ui, sans-serif;
+        --font-display: Inter, system-ui, sans-serif;
+        --dur-beat: 0.5s;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(
+          circle at 50% 42%,
+          color-mix(in srgb, var(--surface) 68%, var(--bg)),
+          var(--bg) 72%
+        );
+      }
+
+      .mount-card {
+        position: absolute;
+        left: 16%;
+        top: 9%;
+        width: 68%;
+        height: 82%;
+        overflow: hidden;
+        border: 2px solid color-mix(in srgb, var(--border) 70%, transparent);
+        border-radius: 40px;
+        background: var(--bg);
+        box-shadow: 0 42px 110px color-mix(in srgb, var(--bg) 72%, transparent);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="notification-pileup-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="8"
+      data-fps="30"
+    >
+      <div
+        id="notification-pileup-mount"
+        class="mount-card clip"
+        data-composition-id="notification-pileup"
+        data-composition-src="./notification-pileup.html"
+        data-variable-values='{"count":9,"speed":0.75,"showBadges":"no"}'
+        data-start="0"
+        data-duration="8"
+        data-track-index="0"
+        data-width="1306"
+        data-height="886"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      // No motion of its own. The mounted primitive owns the pileup timeline.
+      window.__timelines = window.__timelines || {};
+      window.__timelines["notification-pileup-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "notification-pileup.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/notification-pileup/notification-pileup.html b/docs/public/catalog/components/notification-pileup/notification-pileup.html
new file mode 100644
index 0000000000..129f1b40ba
--- /dev/null
+++ b/docs/public/catalog/components/notification-pileup/notification-pileup.html
@@ -0,0 +1,463 @@
+<!doctype html>
+<!--
+  notification-pileup, HyperFrames video primitive (ui-props / loop / agitate)
+
+  Concept: mobile notification cards arrive faster than they can be read.
+  Every new card lands at the top and pushes the existing stack downward,
+  building an anxious but legible tower.
+
+  Compiled-from evidence: fixture; mobile mechanics inventory.
+
+  Use when: a scene needs a mobile-native shorthand for interruption,
+  overload, mounting demand, or attention pressure.
+
+  Variables (declared in data-composition-variables below):
+    - count (number, default 7, range 4 to 10): cards in the final pile.
+    - speed (number, default 1, range 0.5 to 2): authored arrival pacing.
+    - showBadges ("yes" | "no", default "yes"): unread badge visibility.
+
+  Envelope (fixed IN/OUT, elastic HOLD only, never gsap.timeScale()):
+    IN_BASE  = 3.30s  stage settles and every card arrives with accelerating
+               gaps, each new arrival pushing the existing pile downward
+    HOLD     = elastic = max(0, D - (IN_BASE + OUT_BASE)); the complete stack
+               remains dense and breathes on a finite sine.inOut cycle
+    OUT_BASE = 0.50s  the complete stack accelerates into a clean fade
+    If D < IN_BASE + OUT_BASE, IN and OUT scale down together so their sum
+    equals D and HOLD becomes zero.
+
+  Sync points: each notification arrival is a deterministic offset into IN,
+  stored once in arrivalTimes. The first is at 0.16s in an uncompressed IN;
+  later offsets follow max(floorGap, baseGap * decay^(n - 1) / speed), then
+  scale together only if needed to stay inside IN. No cue enters HOLD.
+
+  Sound cue: every card arrival dispatches an hf:sfx CustomEvent with id
+  "notification-soft" and its resolved fixed IN offset. The primitive only
+  dispatches cues, it never plays audio.
+
+  Mount contract: this is a mountable sub-composition. The runtime clones
+  only <template> contents. #root fills the host box, owns no width or height
+  metadata, and establishes the container query basis. Variables come only
+  from window.__hyperframes.getVariables(). The hardcoded timeline key stays
+  "notification-pileup" after mount flattening strips data-composition-id.
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "count", "type": "number", "role": "content", "label": "Notification count", "description": "Number of notification cards in the final pile.", "default": 7, "min": 4, "max": 10, "step": 1 },
+    { "id": "speed", "type": "number", "role": "timing", "label": "Arrival speed", "description": "Pacing multiplier for the accelerating notification arrivals.", "default": 1, "min": 0.5, "max": 2, "step": 0.1 },
+    { "id": "showBadges", "type": "enum", "role": "content", "label": "Unread badges", "description": "Show or hide unread count badges on the notification cards.", "default": "yes", "options": [{ "value": "yes", "label": "Show badges" }, { "value": "no", "label": "Hide badges" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Notification Pileup</title>
+    <!-- Metadata only. Mounting discards everything outside <template>. -->
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="notification-pileup" data-duration="8" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            background: var(--bg, #0b1120);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+          }
+
+          .np-clip,
+          .np-backdrop,
+          .np-stage {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+          }
+
+          .np-clip {
+            overflow: hidden;
+          }
+
+          .np-backdrop {
+            background:
+              radial-gradient(
+                circle at 50% 12%,
+                color-mix(in srgb, var(--accent, #38bdf8) 16%, transparent),
+                transparent 38%
+              ),
+              linear-gradient(
+                to bottom,
+                color-mix(in srgb, var(--surface, #1e293b) 28%, var(--bg, #0b1120)),
+                var(--bg, #0b1120)
+              );
+          }
+
+          .np-stage {
+            transform-origin: 50% 45%;
+            will-change: transform, opacity;
+          }
+
+          /* EDIT ZONE: stack geometry only. The card height and computed JS
+             step share this 79.5cqh safe region, including count 10. */
+          .np-stack {
+            position: absolute;
+            top: 8cqh;
+            left: 12cqw;
+            width: 76cqw;
+            height: 82cqh;
+          }
+
+          /* INVARIANT: each card is a sized block. GSAP owns only x, y,
+             rotation, scale, and opacity, so direct seeks stay deterministic. */
+          .np-card {
+            position: absolute;
+            top: 0;
+            left: 0;
+            display: grid;
+            grid-template-columns: 6.8cqh minmax(0, 1fr) auto;
+            align-items: center;
+            gap: var(--space-2, 1.5cqw);
+            width: 100%;
+            height: 11.5cqh;
+            overflow: hidden;
+            padding: var(--space-1, 1.3cqh) var(--space-2, 1.8cqw);
+            border: 0.14cqmin solid color-mix(in srgb, var(--border, #334155) 78%, transparent);
+            border-radius: var(--radius, 2.2cqmin);
+            background: color-mix(in srgb, var(--surface, #1e293b) 92%, var(--bg, #0b1120));
+            box-shadow:
+              0 1.1cqh 2.8cqh color-mix(in srgb, var(--bg, #0b1120) 42%, transparent),
+              inset 0 0.1cqmin 0 color-mix(in srgb, var(--fg, #f8fafc) 12%, transparent);
+            transform-origin: 50% 18%;
+            will-change: transform, opacity;
+          }
+
+          .np-icon {
+            display: grid;
+            place-items: center;
+            width: 6.8cqh;
+            height: 6.8cqh;
+            border-radius: calc(var(--radius, 2.2cqmin) * 0.72);
+            background: var(--np-icon-bg, var(--brand, #22c55e));
+            color: var(--bg, #0b1120);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: min(2.25cqw, 4cqh);
+            font-weight: 780;
+            line-height: 1;
+            box-shadow: inset 0 0.1cqmin 0 color-mix(in srgb, var(--fg, #f8fafc) 24%, transparent);
+          }
+
+          .np-card[data-tone="1"] {
+            --np-icon-bg: var(--accent, #38bdf8);
+          }
+
+          .np-card[data-tone="2"] {
+            --np-icon-bg: color-mix(in srgb, var(--brand, #22c55e) 58%, var(--accent, #38bdf8));
+          }
+
+          .np-card[data-tone="3"] {
+            --np-icon-bg: color-mix(in srgb, var(--accent, #38bdf8) 62%, var(--fg, #f8fafc));
+          }
+
+          .np-copy {
+            min-width: 0;
+            overflow: hidden;
+          }
+
+          .np-title,
+          .np-body {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          .np-title {
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: min(2.15cqw, 3.8cqh);
+            font-weight: 720;
+            line-height: 1.12;
+            letter-spacing: -0.01em;
+          }
+
+          .np-body {
+            margin-top: var(--space-1, 0.6cqh);
+            color: var(--muted, #94a3b8);
+            font-size: min(1.55cqw, 2.85cqh);
+            font-weight: 520;
+            line-height: 1.12;
+          }
+
+          .np-badge {
+            display: grid;
+            place-items: center;
+            min-width: 3.6cqh;
+            height: 3.6cqh;
+            padding-inline: var(--space-1, 0.65cqw);
+            border-radius: var(--radius, 999cqmin);
+            background: var(--accent, #38bdf8);
+            color: var(--bg, #0b1120);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: min(1.3cqw, 2.3cqh);
+            font-weight: 780;
+            line-height: 1;
+          }
+        </style>
+
+        <div
+          id="notification-pileup-clip"
+          class="np-clip clip"
+          data-start="0"
+          data-duration="8"
+          data-track-index="0"
+        >
+          <div class="np-backdrop" aria-hidden="true"></div>
+          <div class="np-stage" aria-label="A rapidly growing stack of mobile notifications">
+            <div class="np-stack"></div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.currentScript.closest("#root") || document.getElementById("root");
+            // Literal by contract: mount flattening strips data-composition-id
+            // before the runtime consumes this timeline registration.
+            var compositionId = "notification-pileup";
+            var stage = root.querySelector(".np-stage");
+            var stack = root.querySelector(".np-stack");
+
+            // EDIT ZONE: defaults mirror the outer variable declarations.
+            // getVariables owns the declared-defaults-plus-host-overrides merge.
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            // INVARIANT: count is always an integer in the declared 4 to 10 range.
+            var rawCount = Number(vars.count);
+            var count = Math.max(
+              4,
+              Math.min(10, Number.isFinite(rawCount) ? Math.round(rawCount) : 7),
+            );
+            // INVARIANT: speed remains finite and inside the declared 0.5 to 2 range.
+            var rawSpeed = Number(vars.speed);
+            var speed = Math.max(0.5, Math.min(2, Number.isFinite(rawSpeed) ? rawSpeed : 1));
+            // INVARIANT: malformed enum overrides resolve to the documented default.
+            var showBadges = vars.showBadges === "no" ? "no" : "yes";
+
+            // One ordered source owns content, icon tone, and badge copy.
+            var NOTIFICATIONS = [
+              { icon: "M", title: "Messages", body: "Can you take a quick look?", badge: "3" },
+              { icon: "C", title: "Calendar", body: "Stand-up moved to 10:30", badge: "1" },
+              { icon: "@", title: "Mail", body: "Five new replies in your thread", badge: "5" },
+              { icon: "U", title: "Updates", body: "A new version is ready", badge: "2" },
+              { icon: "T", title: "Tasks", body: "Deadline changed to today", badge: "7" },
+              { icon: "D", title: "Drive", body: "Someone requested access", badge: "4" },
+              { icon: "S", title: "Security", body: "New sign-in needs review", badge: "1" },
+              { icon: "#", title: "Social", body: "You have twelve new mentions", badge: "12" },
+              { icon: "N", title: "Notes", body: "Shared checklist was updated", badge: "6" },
+              { icon: "R", title: "Reminders", body: "Follow up before end of day", badge: "9" },
+            ];
+            var cards = [];
+
+            for (var index = 0; index < count; index += 1) {
+              var item = NOTIFICATIONS[index];
+              var card = document.createElement("article");
+              card.className = "np-card";
+              card.dataset.tone = String(index % 4);
+              card.style.zIndex = String(index + 1);
+
+              var icon = document.createElement("span");
+              icon.className = "np-icon";
+              icon.setAttribute("aria-hidden", "true");
+              icon.textContent = item.icon;
+
+              var copy = document.createElement("span");
+              copy.className = "np-copy";
+              var title = document.createElement("span");
+              title.className = "np-title";
+              title.textContent = item.title;
+              var body = document.createElement("span");
+              body.className = "np-body";
+              body.textContent = item.body;
+              copy.appendChild(title);
+              copy.appendChild(body);
+
+              card.appendChild(icon);
+              card.appendChild(copy);
+
+              if (showBadges === "yes") {
+                var badge = document.createElement("span");
+                badge.className = "np-badge";
+                badge.setAttribute("aria-label", item.badge + " unread");
+                badge.textContent = item.badge;
+                card.appendChild(badge);
+              }
+
+              stack.appendChild(card);
+              cards.push(card);
+            }
+
+            // RETIME RANGE: tune only these envelope and cadence values.
+            // speed scales authored gaps and entrance lengths directly. HOLD
+            // alone expands, and no branch uses gsap.timeScale().
+            var IN_BASE = 3.3;
+            var OUT_BASE = 0.5;
+            var STAGE_IN_BASE = 0.34;
+            var ARRIVAL_START_BASE = 0.16;
+            var ENTRY_DURATION_BASE = 0.38;
+            var PUSH_DURATION_BASE = 0.24;
+            var BASE_GAP = 0.78;
+            var GAP_DECAY = 0.78;
+            var FLOOR_GAP = 0.09;
+            var beat = parseFloat(getComputedStyle(root).getPropertyValue("--dur-beat")) || 0.5;
+            var BREATH_HALF = Math.max(0.65, beat * 1.8);
+
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "8"));
+            var totalBase = IN_BASE + OUT_BASE;
+            var envelopeScale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * envelopeScale;
+            var OUT = OUT_BASE * envelopeScale;
+            var STAGE_IN = STAGE_IN_BASE * envelopeScale;
+            var ARRIVAL_START = ARRIVAL_START_BASE * envelopeScale;
+            var ENTRY_DURATION =
+              Math.max(0.18, Math.min(0.5, ENTRY_DURATION_BASE / speed)) * envelopeScale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var HOLD_START = IN;
+            var OUT_START = IN + HOLD;
+            var STACK_STEP = Math.min(9.6, 68 / Math.max(1, count - 1));
+
+            // The same resolved array owns both animation and cue timing.
+            var rawGaps = [];
+            var rawGapTotal = 0;
+            for (var gapIndex = 1; gapIndex < count; gapIndex += 1) {
+              var gap = Math.max(FLOOR_GAP, (BASE_GAP * Math.pow(GAP_DECAY, gapIndex - 1)) / speed);
+              rawGaps.push(gap);
+              rawGapTotal += gap;
+            }
+            var availableGapWindow = Math.max(0, IN - ARRIVAL_START - ENTRY_DURATION);
+            var gapScale = rawGapTotal > availableGapWindow ? availableGapWindow / rawGapTotal : 1;
+            var arrivalTimes = [ARRIVAL_START];
+            for (var timeIndex = 0; timeIndex < rawGaps.length; timeIndex += 1) {
+              arrivalTimes.push(
+                arrivalTimes[arrivalTimes.length - 1] + rawGaps[timeIndex] * gapScale,
+              );
+            }
+
+            function fireSfx(index, t) {
+              root.dispatchEvent(
+                new CustomEvent("hf:sfx", {
+                  detail: { id: "notification-soft", index: index, t: t },
+                  bubbles: true,
+                }),
+              );
+            }
+
+            // Explicit t=0 endpoints. Cards begin above the stack at a visible
+            // near-rest scale, never scale(0), and the complete stage is hidden.
+            gsap.set(stage, { opacity: 0, y: "1.2cqh", scale: 0.985 });
+            cards.forEach(function (card) {
+              gsap.set(card, { opacity: 0, y: "-14cqh", scale: 0.94, rotation: -1.2 });
+            });
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: standard stage settle, accelerating pileup, subtle overshoot.
+            tl.to(
+              stage,
+              { opacity: 1, y: "0cqh", scale: 1, duration: STAGE_IN, ease: "power2.out" },
+              0,
+            );
+
+            cards.forEach(function (card, cardIndex) {
+              var arrivalAt = arrivalTimes[cardIndex];
+              var untilNext =
+                cardIndex < cards.length - 1
+                  ? arrivalTimes[cardIndex + 1] - arrivalAt
+                  : ENTRY_DURATION;
+              var entryDuration = Math.max(0.05, Math.min(ENTRY_DURATION, untilNext * 0.78));
+              var pushDuration = Math.max(
+                0.04,
+                Math.min((PUSH_DURATION_BASE * envelopeScale) / speed, untilNext * 0.72),
+              );
+
+              for (var existingIndex = 0; existingIndex < cardIndex; existingIndex += 1) {
+                tl.to(
+                  cards[existingIndex],
+                  {
+                    y: (cardIndex - existingIndex) * STACK_STEP + "cqh",
+                    duration: pushDuration,
+                    ease: "power2.out",
+                  },
+                  arrivalAt,
+                );
+              }
+
+              tl.to(
+                card,
+                {
+                  opacity: 1,
+                  y: "0cqh",
+                  scale: 1,
+                  rotation: 0,
+                  duration: entryDuration,
+                  ease: "back.out(1.7)",
+                },
+                arrivalAt,
+              );
+              tl.call(
+                function () {
+                  fireSfx(cardIndex, arrivalAt);
+                },
+                [],
+                arrivalAt,
+              );
+            });
+
+            // HOLD: finite slow sine breathing exactly inside the elastic phase.
+            if (HOLD >= BREATH_HALF) {
+              var breathRepeat = Math.max(0, Math.floor(HOLD / BREATH_HALF) - 1);
+              tl.fromTo(
+                stage,
+                { y: "0cqh", scale: 1 },
+                {
+                  y: "-0.42cqh",
+                  scale: 1.004,
+                  duration: BREATH_HALF,
+                  ease: "sine.inOut",
+                  yoyo: true,
+                  repeat: breathRepeat,
+                  immediateRender: false,
+                },
+                HOLD_START,
+              );
+            }
+
+            // OUT: asymmetric accelerated release and fade.
+            tl.to(
+              stage,
+              { opacity: 0, y: "1.2cqh", scale: 0.985, duration: OUT, ease: "power2.in" },
+              OUT_START,
+            );
+
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/notification-stack/README.md b/docs/public/catalog/components/notification-stack/README.md
new file mode 100644
index 0000000000..dc6f34c011
--- /dev/null
+++ b/docs/public/catalog/components/notification-stack/README.md
@@ -0,0 +1,42 @@
+# notification-stack
+
+Product-demo primitive: 1 to 5 token notification cards (accent icon dot,
+title, one body line) slide-settle into a vertical stack on cues, newest on
+top. Each new card drops into the top slot with a fade and a smooth long-tail
+settle while the cards already present shift down one slot. After the last
+card lands, one card (the `expand` index) grows slightly and brightens to
+resolve as the focus while the rest dim by stack position (deeper cards dim
+more). Then the frame holds perfectly still.
+
+Authored at 4s with an elastic HOLD: arrivals plus the resolve are fixed,
+everything after is still frame until the (optional) exit. Type sizes ride
+`cqmin` with card-height caps so the stack stays readable at 1920x1080 and
+legible when the stage is mounted small.
+
+## Variables
+
+| id       | type                               | default                                                                 | notes                                                                                                                                                                                                                                            |
+| -------- | ---------------------------------- | ----------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `titles` | string                             | `Build queued,Checks passed,Deploy live`                                | Comma list of card titles, 1 to 5 cards; extras past 5 are dropped.                                                                                                                                                                              |
+| `bodies` | string                             | `Pipeline started for main,All 42 checks green,Now serving version 2.4` | Comma list of body lines matched to titles by index. A missing or blank entry hides that card's body line.                                                                                                                                       |
+| `expand` | number -1 to 4                     | `-1`                                                                    | Index of the focus card in the `titles` list. `-1` (or any out-of-range value) focuses the newest card, which sits on top of the stack.                                                                                                          |
+| `cues`   | string                             | `""`                                                                    | Comma-separated per-card arrival times in seconds relative to mount start. Blank or invalid entries fall back to that card's default rhythm slot (~0.55s gap). Times are kept non-decreasing and clamped so every card lands before the resolve. |
+| `accent` | enum `green` \| `blue` \| `violet` | `green`                                                                 | Icon dot family: green rides `--brand`, blue `--accent`, violet `--accent-2`.                                                                                                                                                                    |
+| `exit`   | enum `none` \| `fade` \| `up`      | `none`                                                                  | Frame roots own transitions; the default hold ends the film.                                                                                                                                                                                     |
+
+## Usage
+
+```html
+<div
+  class="clip"
+  data-composition-id="notification-stack"
+  data-composition-src="./components/notification-stack.html"
+  data-variable-values='{"titles":"Upload received,Transcode started,Draft ready","bodies":"clip_final_v3.mp4 landed,1080p and 4K in flight,Storyboard open for review","expand":2,"accent":"blue"}'
+  data-start="0"
+  data-duration="4"
+  data-track-index="0"
+></div>
+```
+
+Golden refs: scramble-reveal (token consumption), grid-card-assemble
+(stagger and dim discipline), toggle-flip (mount-contract structure).
diff --git a/docs/public/catalog/components/notification-stack/demo.html b/docs/public/catalog/components/notification-stack/demo.html
new file mode 100644
index 0000000000..9b34f3b542
--- /dev/null
+++ b/docs/public/catalog/components/notification-stack/demo.html
@@ -0,0 +1,109 @@
+<!doctype html>
+<!--
+  notification-stack demo. This standalone composition mounts the primitive
+  through data-composition-src. Non-default titles, bodies, expand, cues,
+  and accent values prove the variable path while the primitive remains
+  elastic to its host.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>notification-stack Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #0b0c0e);
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --muted: #8b95a6;
+        --surface: #14171c;
+        --border: #343a46;
+        --brand: #71f5a7;
+        --accent: #61a8ff;
+        --accent-2: #c5a3ff;
+        --font-body: system-ui, -apple-system, "Segoe UI", sans-serif;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(
+          ellipse at 50% 44%,
+          var(--bg, #171a20) 0%,
+          var(--bg, #0b0c0e) 72%
+        );
+      }
+
+      .mount-card {
+        width: 42%;
+        height: 76%;
+        left: 29%;
+        top: 12%;
+        container-type: size;
+        overflow: hidden;
+        border: 1px solid color-mix(in srgb, var(--border, #94a3b8) 20%, transparent);
+        border-radius: 30px;
+        background: color-mix(in srgb, var(--surface, #101318) 72%, transparent);
+        box-shadow: 0 40px 100px color-mix(in srgb, var(--bg, #000000) 48%, transparent);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="notification-stack-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="notification-stack-mount"
+        class="mount-card clip"
+        data-composition-id="notification-stack"
+        data-composition-src="./notification-stack.html"
+        data-variable-values='{"titles":"Upload received,Transcode started,Scenes detected,Draft ready","bodies":"clip_final_v3.mp4 landed in the inbox,1080p and 4K renditions in flight,14 scenes cut on speech pauses,Storyboard open for review","expand":1,"cues":"0.2,0.8,1.4,2.0","accent":"blue"}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="806"
+        data-height="821"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["notification-stack-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "notification-stack.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/notification-stack/notification-stack.html b/docs/public/catalog/components/notification-stack/notification-stack.html
new file mode 100644
index 0000000000..b28e407250
--- /dev/null
+++ b/docs/public/catalog/components/notification-stack/notification-stack.html
@@ -0,0 +1,387 @@
+<!doctype html>
+<!--
+  notification-stack: HyperFrames video primitive (product demo)
+
+  1 to 5 token notification cards (accent icon dot, title, one body line)
+  slide-settle into a vertical stack on cues, newest on top: each new card
+  drops into the top slot while the cards already present shift down one
+  slot. After the last card lands, one card (the expand index) grows
+  slightly and brightens to resolve as the focus while the rest dim by
+  stack position (deeper cards dim more). Then the frame holds STILL.
+
+  Variables (declared in data-composition-variables below):
+    - titles (string, default "Build queued,Checks passed,Deploy live"):
+      comma list of card titles, 1 to 5 cards; extras past 5 are dropped.
+    - bodies (string): comma list of body lines matched to titles by index.
+      A missing or blank entry hides that card's body line.
+    - expand (number, default -1): index into the titles list of the focus
+      card. -1 (or any out-of-range value) means the newest card, which
+      sits on top of the stack.
+    - cues (string, default ""): comma-separated per-card arrival times in
+      seconds relative to mount start. Blank or invalid entries fall back
+      to that card's default rhythm slot (~0.55s gap). Values are kept
+      non-decreasing and clamped so every card lands before the resolve.
+    - accent (green | blue | violet, default green): icon dot family.
+      green -> --brand, blue -> --accent, violet -> --accent-2.
+    - exit ("none" | "fade" | "up", default "none"): frame roots own
+      transitions; the default hold-ends-the-film.
+
+  Envelope, fixed IN with elastic HOLD (never gsap.timeScale()):
+    IN    = arrivals on cues, then the focus resolve (~0.5s)
+    HOLD  = still, elastic: everything after the resolve until OUT (or D)
+    OUT   = 0 when exit is "none"; else 0.45s fade / fade-up of the stage.
+    Arrival starts clamp together when D is too short for the rhythm.
+
+  Seek safety: every property change is a fromTo with explicit endpoints
+  at absolute times, and consecutive tweens on the same property never
+  overlap (each event's duration is capped at the gap to the next event).
+
+  Mount contract: elastic root, no data-width/data-height, styled via
+  #root only, container-type: size, one paused timeline registered under
+  the literal "notification-stack" key. Deterministic: no CSS transitions,
+  no Date.now, no randomness.
+-->
+<html
+  lang="en"
+  data-composition-id="notification-stack"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "titles", "type": "string", "role": "content", "label": "Titles", "description": "Comma-separated card titles (1 to 5 cards).", "default": "Build queued,Checks passed,Deploy live" },
+    { "id": "bodies", "type": "string", "role": "content", "label": "Bodies", "description": "Comma-separated body lines matched to titles by index. Blank entries hide that body line.", "default": "Pipeline started for main,All 42 checks green,Now serving version 2.4" },
+    { "id": "expand", "type": "number", "role": "content", "label": "Expand", "description": "Index of the focus card in the titles list. -1 focuses the newest card (top of the stack).", "default": -1, "min": -1, "max": 4, "step": 1 },
+    { "id": "cues", "type": "string", "role": "timing", "label": "Cues", "description": "Comma-separated per-card arrival times in seconds. Blank entries use the default rhythm.", "default": "" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Accent token family used by the icon dots.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "How the stack leaves the frame. Default none: the hold ends the film.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Notification Stack</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="notification-stack" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            background: var(--bg, transparent);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, system-ui, -apple-system, "Segoe UI", sans-serif);
+            pointer-events: none;
+          }
+
+          .ns-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+          }
+
+          .ns-stage {
+            position: relative;
+            width: min(54cqw, 110cqh);
+            will-change: transform, opacity;
+          }
+
+          .ns-card {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: var(--ns-card-h, 14cqh);
+            display: flex;
+            align-items: center;
+            gap: var(--space-2, 2.2cqmin);
+            padding: 0 var(--space-2, 2.2cqmin);
+            overflow: hidden;
+            border: 0.16cqmin solid var(--border, #334155);
+            border-radius: var(--radius, 1.8cqmin);
+            background: var(--surface, #131a24);
+            box-shadow: 0 1cqmin 3cqmin color-mix(in srgb, var(--bg, #05070a) 45%, transparent);
+            will-change: transform, opacity, filter;
+          }
+
+          .ns-dot {
+            flex: 0 0 auto;
+            width: min(1.7cqmin, calc(var(--ns-card-h, 14cqh) * 0.14));
+            aspect-ratio: 1;
+            border-radius: 50%;
+            background: var(--ns-accent, var(--brand, #71f5a7));
+          }
+
+          .ns-text {
+            display: flex;
+            flex-direction: column;
+            gap: min(0.7cqmin, calc(var(--ns-card-h, 14cqh) * 0.06));
+            min-width: 0;
+          }
+
+          .ns-title {
+            overflow: hidden;
+            color: var(--fg, #f8fafc);
+            font-size: min(3.2cqmin, calc(var(--ns-card-h, 14cqh) * 0.24));
+            font-weight: 600;
+            line-height: 1.2;
+            letter-spacing: 0.01em;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+          }
+
+          .ns-body {
+            overflow: hidden;
+            color: var(--muted, #94a3b8);
+            font-size: min(2.5cqmin, calc(var(--ns-card-h, 14cqh) * 0.19));
+            font-weight: 400;
+            line-height: 1.25;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+          }
+        </style>
+
+        <div
+          id="notification-stack-clip"
+          class="ns-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="ns-stage" role="list"></div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            // Literal id, never read off the DOM: the flattening step strips
+            // data-composition-id from the mounted root (see toggle-flip).
+            var compositionId = "notification-stack";
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".ns-stage");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            function toList(value, fallback) {
+              var raw = value == null || String(value).trim() === "" ? fallback : String(value);
+              return raw.split(",").map(function (token) {
+                return token.trim();
+              });
+            }
+
+            var titles = toList(vars.titles, "Build queued,Checks passed,Deploy live")
+              .filter(function (token) {
+                return token !== "";
+              })
+              .slice(0, 5);
+            if (titles.length === 0) titles = ["Build queued", "Checks passed", "Deploy live"];
+            var bodies = toList(
+              vars.bodies,
+              "Pipeline started for main,All 42 checks green,Now serving version 2.4",
+            );
+            var count = titles.length;
+
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            root.style.setProperty("--ns-accent", accentColors[accent]);
+
+            // Focus card: index into the titles list; -1 / out of range means
+            // the newest card, which finishes on top of the stack.
+            var expandRaw = Math.round(Number(vars.expand));
+            var expand =
+              Number.isFinite(expandRaw) && expandRaw >= 0 && expandRaw < count
+                ? expandRaw
+                : count - 1;
+
+            // Geometry: cards fill up to ~74cqh of the stack region; the
+            // stage box is the FINAL stack size so the clip centers it once.
+            var GAP_CQH = 2;
+            var cardH = Math.min(15, (74 - (count - 1) * GAP_CQH) / count);
+            var slotH = cardH + GAP_CQH;
+            root.style.setProperty("--ns-card-h", cardH.toFixed(3) + "cqh");
+            stage.style.height = (count * cardH + (count - 1) * GAP_CQH).toFixed(3) + "cqh";
+            stage.setAttribute("aria-label", titles.join(", "));
+
+            var cards = titles.map(function (title, index) {
+              var card = document.createElement("div");
+              card.className = "ns-card";
+              card.setAttribute("role", "listitem");
+              // Static stacking: the focus card sits above its dimmed
+              // neighbors so its slight grow overlaps them cleanly.
+              card.style.zIndex = index === expand ? "2" : "1";
+              var dot = document.createElement("span");
+              dot.className = "ns-dot";
+              dot.setAttribute("aria-hidden", "true");
+              card.appendChild(dot);
+              var text = document.createElement("span");
+              text.className = "ns-text";
+              var titleEl = document.createElement("span");
+              titleEl.className = "ns-title";
+              titleEl.textContent = title;
+              text.appendChild(titleEl);
+              var body = (bodies[index] || "").trim();
+              if (body !== "") {
+                var bodyEl = document.createElement("span");
+                bodyEl.className = "ns-body";
+                bodyEl.textContent = body;
+                text.appendChild(bodyEl);
+              }
+              card.appendChild(text);
+              stage.appendChild(card);
+              return card;
+            });
+
+            // RETIME RANGE: arrivals on cues, fixed resolve, elastic still
+            // HOLD, optional OUT.
+            var BASE = 0.2;
+            var GAP = 0.55;
+            var ENTER = 0.55;
+            var SHIFT = 0.45;
+            var RESOLVE_DUR = 0.5;
+            var OUT_BASE = 0.45;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var OUT = exit === "none" ? 0 : Math.min(OUT_BASE, duration * 0.25);
+            var avail = duration - OUT;
+            var latestStart = Math.max(0, avail - 1.05);
+
+            var cueList = String(vars.cues == null ? "" : vars.cues).split(",");
+            var starts = [];
+            for (var i = 0; i < count; i++) {
+              var cue = Number((cueList[i] || "").trim());
+              var hasCue = (cueList[i] || "").trim() !== "" && Number.isFinite(cue);
+              var start = hasCue ? cue : BASE + GAP * i;
+              if (i > 0) start = Math.max(start, starts[i - 1] + 0.05);
+              starts.push(Math.max(0, Math.min(start, latestStart)));
+            }
+            for (i = 1; i < count; i++) starts[i] = Math.max(starts[i], starts[i - 1]);
+
+            var last = starts[count - 1];
+            var resolve = Math.max(last + 0.1, Math.min(last + 0.65, avail - RESOLVE_DUR));
+            var resolveDur = Math.min(RESOLVE_DUR, Math.max(0.001, avail - resolve));
+
+            // Tween distances in px, derived once from the measured mount
+            // height (what 1cqh resolves to). GSAP interpolates chained
+            // cqh-unit transform tweens incorrectly mid-tween, so transforms
+            // ride px while all layout stays in container units.
+            var rootH = root.offsetHeight || window.innerHeight || 1080;
+            var cqhPx = rootH / 100;
+            var yFor = function (slot) {
+              return slot * slotH * cqhPx;
+            };
+            var enterY = -(cardH * 0.6 * cqhPx);
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: each card drops into the TOP slot with a fade and a smooth
+            // long-tail settle while every earlier card shifts down one slot.
+            // Event durations are capped at the gap to the next event so no
+            // two tweens on the same property ever overlap.
+            cards.forEach(function (card, index) {
+              var eventStart = starts[index];
+              var nextEvent = index + 1 < count ? starts[index + 1] : resolve;
+              var eventCap = Math.max(0.001, nextEvent - eventStart);
+              gsap.set(card, { opacity: 0, y: enterY });
+              tl.fromTo(
+                card,
+                { opacity: 0, y: enterY },
+                {
+                  opacity: 1,
+                  y: yFor(0),
+                  duration: Math.min(ENTER, eventCap),
+                  ease: "power3.out",
+                },
+                eventStart,
+              );
+              for (var j = 0; j < index; j++) {
+                // immediateRender false: a build-time render of this from
+                // state would park the card at a mid-stack slot before its
+                // own entrance has run.
+                tl.fromTo(
+                  cards[j],
+                  { y: yFor(index - 1 - j) },
+                  {
+                    y: yFor(index - j),
+                    duration: Math.min(SHIFT, eventCap),
+                    ease: "power3.out",
+                    immediateRender: false,
+                  },
+                  eventStart,
+                );
+              }
+            });
+
+            // RESOLVE: the focus card grows slightly and brightens; the rest
+            // dim by stack position (deeper cards dim more). Filter tweens
+            // stay numeric; no var() color string is ever tweened.
+            cards.forEach(function (card, index) {
+              var stackPos = count - 1 - index;
+              if (index === expand) {
+                tl.fromTo(
+                  card,
+                  { scale: 1, filter: "brightness(1)" },
+                  {
+                    scale: 1.045,
+                    filter: "brightness(1.1)",
+                    duration: resolveDur,
+                    ease: "power2.out",
+                    immediateRender: false,
+                  },
+                  resolve,
+                );
+              } else {
+                tl.fromTo(
+                  card,
+                  { opacity: 1 },
+                  {
+                    opacity: Math.max(0.42, 0.72 - 0.07 * stackPos),
+                    duration: resolveDur,
+                    ease: "power2.out",
+                    immediateRender: false,
+                  },
+                  resolve,
+                );
+              }
+            });
+
+            // HOLD: intentionally still. Nothing floats, nothing pushes in.
+
+            // OUT: the whole resolved stack leaves together.
+            if (exit !== "none") {
+              var OUT_START = duration - OUT;
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+              if (exit === "up") {
+                tl.to(stage, { y: -3 * cqhPx, duration: OUT, ease: "power2.in" }, OUT_START);
+              }
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/number-pop-in/__hf-variables-preview.html b/docs/public/catalog/components/number-pop-in/__hf-variables-preview.html
new file mode 100644
index 0000000000..f75aeff6ae
--- /dev/null
+++ b/docs/public/catalog/components/number-pop-in/__hf-variables-preview.html
@@ -0,0 +1,83 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Number Pop In variables preview</title>
+    <style>
+      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #f7f7f8; }
+      #hf-vars-root { position: relative; width: 1920px; height: 1080px; }
+      #hf-vars-mount { position: absolute; inset: 0; display: grid; place-items: center; }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  </head>
+  <body>
+    <div id="hf-vars-root" data-composition-id="number-pop-in-variables-preview" data-start="0" data-width="1920" data-height="1080" data-duration="5" data-fps="30">
+      <div id="hf-vars-mount" class="clip" data-composition-id="number-pop-in" data-composition-src="./number-pop-in.html" data-start="0" data-duration="5" data-track-index="0" data-width="1920" data-height="1080"></div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["number-pop-in-variables-preview"] = gsap.timeline({ paused: true });
+    </script>
+    <script>
+      (function () {
+        var mount = document.getElementById("hf-vars-mount");
+        // The mount is filled asynchronously, and the demo script selects
+        // what it fills it with, so it cannot run before then.
+        var observer = new MutationObserver(build);
+        observer.observe(mount, { childList: true, subtree: true });
+        build();
+        function build() {
+          if (!mount.firstElementChild) return;
+          observer.disconnect();
+
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-transition-number-pop-in span, .hf-transition-number-pop-in small",
+          {
+            opacity: 0,
+            "--hf-number-y": "24px",
+            "--hf-number-scale": 0.82,
+            "--hf-number-blur": "8px",
+          },
+          {
+            opacity: 1,
+            "--hf-number-y": "0px",
+            "--hf-number-scale": 1,
+            "--hf-number-blur": "0px",
+            duration: 0.34,
+            stagger: 0.055,
+            ease: "back.out(1.8)",
+          },
+          startTime,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["number-pop-in-demo"] = tl;
+          var child = window.__timelines["number-pop-in-demo"];
+          delete window.__timelines["number-pop-in-demo"];
+          if (!child || typeof child.paused !== "function") return;
+          child.paused(false);
+          window.__timelines["number-pop-in-variables-preview"].add(child, 0);
+        }
+      })();
+    </script>
+<script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "number-pop-in.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/number-pop-in/demo.html b/docs/public/catalog/components/number-pop-in/demo.html
new file mode 100644
index 0000000000..34ba9cce94
--- /dev/null
+++ b/docs/public/catalog/components/number-pop-in/demo.html
@@ -0,0 +1,118 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Number Pop In - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        min-width: 760px;
+        min-height: 480px;
+        padding: 56px;
+        /* ponytail: scale non-GSAP wrapper so the stat fills ~65% of the frame */
+        transform: scale(1.37);
+      }
+      .hf-transition-number-pop-in {
+        display: inline-flex;
+        align-items: baseline;
+        gap: 2px;
+        color: #18181b;
+        font-family: Inter, system-ui, sans-serif;
+        font-weight: 900;
+        letter-spacing: -0.04em;
+      }
+      .hf-transition-number-pop-in span {
+        font-size: 96px;
+        line-height: 0.9;
+        filter: blur(var(--hf-number-blur, 0px));
+        transform: translateY(var(--hf-number-y, 0px)) scale(var(--hf-number-scale, 1));
+        will-change: transform, filter, opacity;
+      }
+      .hf-transition-number-pop-in small {
+        margin-left: 4px;
+        color: #71717a;
+        font-size: 42px;
+        font-weight: 700;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="number-pop-in-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-transition-number-pop-in">
+          <span>5</span><span>.</span><span>7</span><small>k</small>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-transition-number-pop-in span, .hf-transition-number-pop-in small",
+          {
+            opacity: 0,
+            "--hf-number-y": "24px",
+            "--hf-number-scale": 0.82,
+            "--hf-number-blur": "8px",
+          },
+          {
+            opacity: 1,
+            "--hf-number-y": "0px",
+            "--hf-number-scale": 1,
+            "--hf-number-blur": "0px",
+            duration: 0.34,
+            stagger: 0.055,
+            ease: "back.out(1.8)",
+          },
+          startTime,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["number-pop-in-demo"] = tl;
+      </script>
+    </div>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "number-pop-in.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/number-pop-in/number-pop-in.html b/docs/public/catalog/components/number-pop-in/number-pop-in.html
new file mode 100644
index 0000000000..11e05f30a1
--- /dev/null
+++ b/docs/public/catalog/components/number-pop-in/number-pop-in.html
@@ -0,0 +1,120 @@
+<!--
+  Number Pop In - transitions.dev-inspired primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Use the timeline
+  integration note at the bottom as the starting point for deterministic GSAP
+  animation.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and either rebuilds the characters or writes
+  a custom property the CSS above consumes. The timeline recipe stays untouched:
+  it keeps driving one offset, one scale and one blur, and these decide what the
+  number is, what colour it is, and how far that offset carries it.
+
+    - value (any text, default 5.7): the number itself. Every character becomes
+      its own span, so the stagger still lands character by character.
+    - unit (any text, default k): the small suffix printed after the number.
+      Pass an empty string to drop it.
+    - lift (close | standard | far, default standard): scales the offset the
+      timeline drives, so the characters cover a shorter or longer run in the
+      same time. The offset is zero at rest, so this one only shows in motion.
+    - tone (ink | paper | accent, default ink): number colour. ink is near-black
+      for light frames, paper near-white for dark ones, accent rides --brand.
+      The suffix follows in the same family.
+
+  On every default the result is identical to the original: 5.7k rising 24px
+  through an 8px blur in near-black.
+-->
+
+<div
+  class="hf-transition-number-pop-in"
+  data-composition-variables='[
+    { "id": "value", "type": "string", "role": "content", "label": "Value", "description": "The number itself. Every character becomes its own span, so the stagger still lands character by character.", "default": "5.7" },
+    { "id": "unit", "type": "string", "role": "content", "label": "Unit", "description": "Small suffix printed after the number. Pass an empty string to drop it.", "default": "k" },
+    { "id": "lift", "type": "enum", "role": "motion", "label": "Lift", "description": "Scales the offset the timeline drives, so the characters cover a shorter or longer run in the same time.", "default": "standard", "options": [{ "value": "close", "label": "Close" }, { "value": "standard", "label": "Standard" }, { "value": "far", "label": "Far" }] },
+    { "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Number colour: ink for light frames, paper for dark ones, accent rides --brand.", "default": "ink", "options": [{ "value": "ink", "label": "Ink" }, { "value": "paper", "label": "Paper" }, { "value": "accent", "label": "Accent" }] }
+  ]'
+>
+  <span>5</span><span>.</span><span>7</span><small>k</small>
+</div>
+
+<style>
+  .hf-transition-number-pop-in {
+    display: inline-flex;
+    align-items: baseline;
+    gap: 2px;
+    color: var(--hf-number-color, #18181b);
+    font-family: Inter, system-ui, sans-serif;
+    font-weight: 900;
+    letter-spacing: -0.04em;
+  }
+  .hf-transition-number-pop-in span {
+    font-size: 76px;
+    line-height: 0.9;
+    filter: blur(var(--hf-number-blur, 0px));
+    transform: translateY(calc(var(--hf-number-y, 0px) * var(--hf-number-lift, 1)))
+      scale(var(--hf-number-scale, 1));
+    will-change: transform, filter, opacity;
+  }
+  .hf-transition-number-pop-in small {
+    margin-left: 2px;
+    color: var(--hf-number-unit-color, #71717a);
+    font-size: 34px;
+    font-weight: 850;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    var lifts = { close: 0.5, standard: 1, far: 1.75 };
+    var tones = {
+      ink: { number: "#18181b", unit: "#71717a" },
+      paper: { number: "#fafafa", unit: "#a1a1aa" },
+      accent: { number: "var(--brand, #34d399)", unit: "var(--brand, #34d399)" },
+    };
+
+    function text(value, fallback) {
+      return typeof value === "string" ? value : fallback;
+    }
+
+    var value = text(vars.value, "5.7");
+    if (value === "") value = "5.7";
+    var unit = text(vars.unit, "k");
+    var lift = Object.prototype.hasOwnProperty.call(lifts, vars.lift) ? vars.lift : "standard";
+    var tone = Object.prototype.hasOwnProperty.call(tones, vars.tone) ? vars.tone : "ink";
+
+    var roots = document.querySelectorAll(".hf-transition-number-pop-in");
+    for (var i = 0; i < roots.length; i += 1) {
+      var root = roots[i];
+      root.style.setProperty("--hf-number-lift", String(lifts[lift]));
+      root.style.setProperty("--hf-number-color", tones[tone].number);
+      root.style.setProperty("--hf-number-unit-color", tones[tone].unit);
+
+      var next = [];
+      for (var c = 0; c < value.length; c += 1) {
+        var span = document.createElement("span");
+        span.textContent = value.charAt(c);
+        next.push(span);
+      }
+      if (unit !== "") {
+        var small = document.createElement("small");
+        small.textContent = unit;
+        next.push(small);
+      }
+      root.replaceChildren.apply(root, next);
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-transition-number-pop-in span, .hf-transition-number-pop-in small', { opacity: 0, '--hf-number-y': '24px', '--hf-number-scale': 0.82, '--hf-number-blur': '8px' }, { opacity: 1, '--hf-number-y': '0px', '--hf-number-scale': 1, '--hf-number-blur': '0px', duration: 0.34, stagger: 0.055, ease: 'back.out(1.8)' }, startTime);
+-->
diff --git a/docs/public/catalog/components/number-wheel/demo.html b/docs/public/catalog/components/number-wheel/demo.html
new file mode 100644
index 0000000000..db9c363c82
--- /dev/null
+++ b/docs/public/catalog/components/number-wheel/demo.html
@@ -0,0 +1,118 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Number Wheel - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #071b16;
+        color: #ecfff8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .metric {
+        text-align: center;
+        /* ponytail: zoom scales the non-animated wrapper; GSAP owns .label and .hf-number-wheel-strip transforms */
+        zoom: 2.8;
+      }
+      .label {
+        color: #68d8b5;
+        font-size: 38px;
+        font-weight: 800;
+        text-transform: uppercase;
+        letter-spacing: 0.1em;
+      }
+      .hf-number-wheel {
+        margin-top: 36px;
+        display: inline-flex;
+        align-items: baseline;
+        gap: 0.02em;
+        font-size: 172px;
+        font-weight: 900;
+        font-variant-numeric: tabular-nums;
+      }
+      .hf-number-wheel-digit {
+        display: inline-block;
+        height: 1em;
+        overflow: hidden;
+      }
+      .hf-number-wheel-strip {
+        display: grid;
+        transform: translateY(0em);
+        will-change: transform;
+      }
+      .hf-number-wheel-strip span {
+        height: 1em;
+        line-height: 1em;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="number-wheel-demo"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="metric">
+        <div class="label">GitHub stars</div>
+        <span class="hf-number-wheel" data-value="30222"></span>
+      </div>
+      <script>
+        document.querySelectorAll(".hf-number-wheel").forEach((el) => {
+          const value = el.dataset.value || "0";
+          el.textContent = "";
+          for (const char of value) {
+            if (!/\d/.test(char)) {
+              el.append(document.createTextNode(char));
+              continue;
+            }
+            const digit = Number(char);
+            const frame = document.createElement("span");
+            frame.className = "hf-number-wheel-digit";
+            const strip = document.createElement("span");
+            strip.className = "hf-number-wheel-strip";
+            strip.style.setProperty("--hf-number-target-y", `${-digit}em`);
+            for (let i = 0; i <= digit; i++) {
+              const step = document.createElement("span");
+              step.textContent = String(i);
+              strip.appendChild(step);
+            }
+            frame.appendChild(strip);
+            el.appendChild(frame);
+          }
+        });
+        const tl = gsap.timeline({ paused: true });
+        tl.from(".label", { opacity: 0, y: 18, duration: 0.5, ease: "power3.out" }, 0.2);
+        tl.to(
+          ".hf-number-wheel-strip",
+          {
+            y: (_, strip) => strip.style.getPropertyValue("--hf-number-target-y"),
+            duration: 1.2,
+            ease: "power3.out",
+            stagger: 0.06,
+          },
+          0.65,
+        );
+        window.__timelines = window.__timelines || {};
+        window.__timelines["number-wheel-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/number-wheel/number-wheel.html b/docs/public/catalog/components/number-wheel/number-wheel.html
new file mode 100644
index 0000000000..482120c8a6
--- /dev/null
+++ b/docs/public/catalog/components/number-wheel/number-wheel.html
@@ -0,0 +1,122 @@
+<!--
+  Number Wheel - rolling digit counter.
+
+  Markup:
+    <span class="hf-number-wheel" data-value="30222"></span>
+
+  Paste this snippet once. It builds one column per digit. Animate the generated
+  .hf-number-wheel-strip elements with the data-target-y custom property.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and either builds a longer strip or writes a
+  custom property the CSS above consumes. Every strip still starts on 0 and
+  still lands on its own digit, so only the run in between changes.
+
+    - spin (single | double | triple, default single): how many full 0 to 9
+      revolutions each column adds before it lands. Extra revolutions lengthen
+      the strip and push --hf-number-target-y further, so the reel covers more
+      ground in the same time. Nothing moves at rest, so this one only shows
+      once the timeline runs.
+    - spacing (tight | standard | wide, default standard): the gap between digit
+      columns.
+    - tone (inherit | ink | paper | accent, default inherit): digit colour.
+      inherit leaves the surrounding text colour alone, ink is near-black for
+      light frames, paper near-white for dark ones, accent rides --brand.
+
+  On every default the result is identical to the original: one column per
+  digit, each rolling 0 up to its own digit in the inherited text colour.
+-->
+
+<style
+  data-composition-variables='[
+    { "id": "spin", "type": "enum", "role": "motion", "label": "Spin", "description": "How many full 0 to 9 revolutions each column adds before it lands, which is how far the reel travels in the same time.", "default": "single", "options": [{ "value": "single", "label": "Single" }, { "value": "double", "label": "Double" }, { "value": "triple", "label": "Triple" }] },
+    { "id": "spacing", "type": "enum", "role": "layout", "label": "Spacing", "description": "Gap between the digit columns.", "default": "standard", "options": [{ "value": "tight", "label": "Tight" }, { "value": "standard", "label": "Standard" }, { "value": "wide", "label": "Wide" }] },
+    { "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Digit colour: inherit keeps the surrounding text colour, ink suits light frames, paper suits dark ones, accent rides --brand.", "default": "inherit", "options": [{ "value": "inherit", "label": "Inherit" }, { "value": "ink", "label": "Ink" }, { "value": "paper", "label": "Paper" }, { "value": "accent", "label": "Accent" }] }
+  ]'
+>
+  .hf-number-wheel {
+    display: inline-flex;
+    align-items: baseline;
+    gap: var(--hf-wheel-gap, 0.02em);
+    color: var(--hf-wheel-color, inherit);
+    font-variant-numeric: tabular-nums;
+  }
+  .hf-number-wheel-digit {
+    display: inline-block;
+    height: 1em;
+    overflow: hidden;
+  }
+  .hf-number-wheel-strip {
+    display: grid;
+    transform: translateY(0em);
+    will-change: transform;
+  }
+  .hf-number-wheel-strip span {
+    height: 1em;
+    line-height: 1em;
+  }
+</style>
+
+<script>
+  (function () {
+    const vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    const spins = { single: 0, double: 1, triple: 2 };
+    const gaps = { tight: "0em", standard: "0.02em", wide: "0.14em" };
+    const tones = {
+      inherit: "inherit",
+      ink: "#18181b",
+      paper: "#fafafa",
+      accent: "var(--brand, #34d399)",
+    };
+    const pick = (table, value, fallback) =>
+      Object.prototype.hasOwnProperty.call(table, value) ? table[value] : table[fallback];
+
+    const cycles = pick(spins, vars.spin, "single");
+    const gap = pick(gaps, vars.spacing, "standard");
+    const tone = pick(tones, vars.tone, "inherit");
+
+    document.querySelectorAll(".hf-number-wheel").forEach((el) => {
+      if (el.dataset.hfNumberWheelReady === "1") return;
+      el.style.setProperty("--hf-wheel-gap", gap);
+      el.style.setProperty("--hf-wheel-color", tone);
+      const value = el.dataset.value || "0";
+      el.textContent = "";
+      for (const char of value) {
+        if (!/\d/.test(char)) {
+          el.append(document.createTextNode(char));
+          continue;
+        }
+        const stops = cycles * 10 + Number(char);
+        const frame = document.createElement("span");
+        frame.className = "hf-number-wheel-digit";
+        const strip = document.createElement("span");
+        strip.className = "hf-number-wheel-strip";
+        strip.style.setProperty("--hf-number-target-y", `${-stops}em`);
+        for (let i = 0; i <= stops; i++) {
+          const step = document.createElement("span");
+          step.textContent = String(i % 10);
+          strip.appendChild(step);
+        }
+        frame.appendChild(strip);
+        el.appendChild(frame);
+      }
+      el.dataset.hfNumberWheelReady = "1";
+    });
+  })();
+</script>
+
+<!--
+  Timeline integration:
+
+  tl.to(".hf-number-wheel-strip", {
+    y: (_, strip) => strip.style.getPropertyValue("--hf-number-target-y"),
+    duration: 1.1,
+    ease: "power3.out",
+    stagger: 0.05,
+  }, startTime);
+-->
diff --git a/docs/public/catalog/components/offset-path-traveler/demo.html b/docs/public/catalog/components/offset-path-traveler/demo.html
new file mode 100644
index 0000000000..9f02a6135e
--- /dev/null
+++ b/docs/public/catalog/components/offset-path-traveler/demo.html
@@ -0,0 +1,117 @@
+<!doctype html>
+<!--
+  offset-path-traveler demo. This standalone composition mounts the primitive
+  through data-composition-src. A non-default path, label, and violet accent
+  prove the variable flow while the primitive remains elastic to its host.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Offset Path Traveler Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #0b0c0e);
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --muted: #9aa4b2;
+        --surface: #171a20;
+        --border: #3c4350;
+        --brand: #71f5a7;
+        --accent: #61a8ff;
+        --accent-2: #c5a3ff;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-body: Inter, system-ui, sans-serif;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        --radius: 3cqmin;
+        --space-1: 1.4cqmin;
+        --space-2: 2.8cqmin;
+        --space-3: 4.2cqmin;
+        --dur-beat: 0.4s;
+        --ease-standard: cubic-bezier(0.215, 0.61, 0.355, 1);
+        --ease-emphasis: cubic-bezier(0.19, 1, 0.22, 1);
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(
+          ellipse at 50% 44%,
+          color-mix(in srgb, var(--surface) 72%, var(--accent-2)) 0%,
+          var(--bg) 68%
+        );
+      }
+
+      .mount-card {
+        width: 78%;
+        height: 54%;
+        left: 11%;
+        top: 23%;
+        container-type: size;
+        overflow: hidden;
+        border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
+        border-radius: calc(var(--radius) * 1.25);
+        background: color-mix(in srgb, var(--surface) 84%, transparent);
+        box-shadow: 0 4cqh 12cqh color-mix(in srgb, var(--bg) 58%, transparent);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="offset-path-traveler-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="offset-path-traveler-mount"
+        class="mount-card clip"
+        data-composition-id="offset-path-traveler"
+        data-composition-src="./offset-path-traveler.html"
+        data-variable-values='{"path":"M -100 410 C 110 475 190 80 410 145 C 610 205 690 395 820 245 C 940 110 1025 170 1100 55","traveler_label":"Deploying","accent":"violet"}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="1498"
+        data-height="583"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["offset-path-traveler-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "offset-path-traveler.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/offset-path-traveler/offset-path-traveler.html b/docs/public/catalog/components/offset-path-traveler/offset-path-traveler.html
new file mode 100644
index 0000000000..1097f781f1
--- /dev/null
+++ b/docs/public/catalog/components/offset-path-traveler/offset-path-traveler.html
@@ -0,0 +1,287 @@
+<!doctype html>
+<!--
+  offset-path-traveler: HyperFrames video primitive (product demo / path travel)
+
+  One traveler follows an authored SVG path and rotates to its tangent. The
+  traveler wrapper is the content slot; the default slot content is a chip.
+
+  Variables:
+    - path (string): SVG path data authored in the 1000 by 500 route viewBox.
+    - traveler_label (string): label inside the default traveler chip.
+    - accent (green | blue | violet): chip and route color.
+
+  Envelope, fixed IN and OUT with elastic HOLD only:
+    IN_BASE  = 1.20s, traveler enters along the authored curve to 72 percent
+    HOLD     = max(0, D - IN - OUT), subtle finite drift on the same curve
+    OUT_BASE = 0.65s, traveler accelerates along the curve and exits
+    If D is shorter than IN_BASE + OUT_BASE, IN and OUT compress together.
+    The timeline is never time-scaled.
+
+  Seek safety: GSAP tweens one plain progress value. Its onUpdate samples the
+  same SVG path for position and tangent, so repeated and reverse seeks render
+  the same pose at the same time without a plugin or a free-running loop.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, has no data-width or data-height,
+  and registers one paused timeline under the literal offset-path-traveler key.
+-->
+<html
+  lang="en"
+  data-composition-id="offset-path-traveler"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "path", "type": "string", "role": "content", "label": "Path", "description": "SVG path data authored in a 1000 by 500 route viewBox.", "default": "M -90 390 C 150 490 190 70 430 185 C 650 300 720 105 850 145 C 970 180 1030 85 1090 35" },
+    { "id": "traveler_label", "type": "string", "role": "content", "label": "Traveler label", "description": "Text displayed inside the default traveler chip.", "default": "Live preview" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Color used by the traveler and route.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Offset Path Traveler</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="offset-path-traveler" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .opt-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .opt-route {
+            position: absolute;
+            inset: 8cqh 4cqw;
+          }
+
+          .opt-route svg {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+            overflow: visible;
+          }
+
+          .opt-guide {
+            fill: none;
+            stroke: color-mix(in srgb, var(--opt-accent) 34%, var(--border, #475569));
+            stroke-width: 0.42cqmin;
+            stroke-linecap: round;
+            stroke-dasharray: 1.1cqmin 1.5cqmin;
+            opacity: 0.62;
+            vector-effect: non-scaling-stroke;
+          }
+
+          .opt-traveler-slot {
+            position: absolute;
+            left: 0;
+            top: 0;
+            display: block;
+            transform-origin: 50% 50%;
+            will-change: transform, opacity;
+          }
+
+          .opt-chip {
+            display: inline-flex;
+            align-items: center;
+            gap: var(--space-1, 1.4cqmin);
+            max-width: 34cqw;
+            min-height: 8cqh;
+            padding: var(--space-1, 1.6cqh) var(--space-2, 2.6cqw);
+            overflow: hidden;
+            border: 0.18cqmin solid
+              color-mix(in srgb, var(--opt-accent) 68%, var(--border, #475569));
+            border-radius: var(--radius, 999px);
+            background: color-mix(in srgb, var(--surface, #18212f) 88%, var(--opt-accent));
+            box-shadow:
+              0 2.2cqh 5cqh color-mix(in srgb, var(--bg, #020617) 48%, transparent),
+              0 0 3.5cqh color-mix(in srgb, var(--opt-accent) 24%, transparent);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: clamp(12px, 3.5cqmin, 30px);
+            font-weight: 760;
+            line-height: 1;
+            letter-spacing: -0.01em;
+            white-space: nowrap;
+          }
+
+          .opt-dot {
+            flex: 0 0 auto;
+            width: 2.4cqmin;
+            aspect-ratio: 1;
+            border-radius: 50%;
+            background: var(--opt-accent);
+            box-shadow: 0 0 2cqmin color-mix(in srgb, var(--opt-accent) 58%, transparent);
+          }
+
+          .opt-label {
+            min-width: 0;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+        </style>
+
+        <div
+          id="offset-path-traveler-clip"
+          class="opt-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="opt-route">
+            <svg viewBox="0 0 1000 500" preserveAspectRatio="none" aria-hidden="true">
+              <path class="opt-guide"></path>
+            </svg>
+            <div class="opt-traveler-slot" data-slot="traveler">
+              <div class="opt-chip">
+                <span class="opt-dot" aria-hidden="true"></span>
+                <span class="opt-label"></span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var route = root.querySelector(".opt-route");
+            var guide = root.querySelector(".opt-guide");
+            var traveler = root.querySelector(".opt-traveler-slot");
+            var label = root.querySelector(".opt-label");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var DEFAULT_PATH =
+              "M -90 390 C 150 490 190 70 430 185 C 650 300 720 105 850 145 C 970 180 1030 85 1090 35";
+            var requestedPath = vars.path == null ? "" : String(vars.path).trim();
+            var pathData = requestedPath === "" ? DEFAULT_PATH : requestedPath;
+            var travelerLabel =
+              vars.traveler_label == null ? "Live preview" : String(vars.traveler_label);
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+
+            guide.setAttribute("d", pathData);
+            label.textContent = travelerLabel;
+            root.style.setProperty("--opt-accent", accentColors[accent]);
+
+            var totalLength;
+            try {
+              totalLength = guide.getTotalLength();
+            } catch (_error) {
+              totalLength = 0;
+            }
+            if (!Number.isFinite(totalLength) || totalLength <= 0) {
+              guide.setAttribute("d", DEFAULT_PATH);
+              totalLength = guide.getTotalLength();
+            }
+
+            var VIEWBOX_WIDTH = 1000;
+            var VIEWBOX_HEIGHT = 500;
+            var travel = { progress: 0 };
+
+            function renderTraveler() {
+              var distance = Math.max(0, Math.min(1, travel.progress)) * totalLength;
+              var tangentStep = Math.max(0.5, totalLength * 0.002);
+              var before = guide.getPointAtLength(Math.max(0, distance - tangentStep));
+              var after = guide.getPointAtLength(Math.min(totalLength, distance + tangentStep));
+              var scaleX = route.clientWidth / VIEWBOX_WIDTH;
+              var scaleY = route.clientHeight / VIEWBOX_HEIGHT;
+              var point = guide.getPointAtLength(distance);
+              var rotation =
+                (Math.atan2((after.y - before.y) * scaleY, (after.x - before.x) * scaleX) * 180) /
+                Math.PI;
+
+              gsap.set(traveler, {
+                x: point.x * scaleX,
+                y: point.y * scaleY,
+                xPercent: -50,
+                yPercent: -50,
+                rotation: rotation,
+              });
+            }
+
+            var IN_BASE = 1.2;
+            var OUT_BASE = 0.65;
+            var STILLNESS = 0.3;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var totalBase = IN_BASE + OUT_BASE;
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var OUT_START = IN + HOLD;
+            var driftHalf = Math.max(0, HOLD - STILLNESS) / 2;
+
+            gsap.set(traveler, { opacity: 0, scale: 0.9 });
+            renderTraveler();
+
+            var tl = gsap.timeline({ paused: true });
+
+            tl.to(
+              travel,
+              { progress: 0.72, duration: IN, ease: "power3.out", onUpdate: renderTraveler },
+              0,
+            );
+            tl.to(traveler, { opacity: 1, duration: Math.min(0.28, IN), ease: "power2.out" }, 0);
+            tl.to(traveler, { scale: 1, duration: Math.min(0.5, IN), ease: "back.out(1.7)" }, 0);
+
+            if (driftHalf > 0) {
+              tl.to(
+                travel,
+                {
+                  progress: 0.78,
+                  duration: driftHalf,
+                  ease: "sine.inOut",
+                  yoyo: true,
+                  repeat: 1,
+                  onUpdate: renderTraveler,
+                },
+                IN,
+              );
+            }
+
+            tl.to(
+              travel,
+              { progress: 1, duration: OUT, ease: "power2.in", onUpdate: renderTraveler },
+              OUT_START,
+            );
+            tl.to(traveler, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["offset-path-traveler"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/onboarding-stepper-flow/demo.html b/docs/public/catalog/components/onboarding-stepper-flow/demo.html
new file mode 100644
index 0000000000..d3bc015ec1
--- /dev/null
+++ b/docs/public/catalog/components/onboarding-stepper-flow/demo.html
@@ -0,0 +1,154 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Onboarding Stepper Flow - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #fafafa;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      /* ponytail: scale on .demo-frame (not a GSAP target) — safe CSS transform */
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        min-width: 760px;
+        min-height: 520px;
+        padding: 56px;
+        transform: scale(2.3);
+      }
+      .hf-ui-onboarding-flow {
+        display: grid;
+        gap: 22px;
+        width: 520px;
+        color: #18181b;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-ui-onboarding-steps {
+        display: flex;
+        justify-content: center;
+        gap: 18px;
+      }
+      .hf-ui-onboarding-steps span {
+        display: grid;
+        place-items: center;
+        width: 44px;
+        height: 44px;
+        border: 2px solid #e4e4e7;
+        border-radius: 999px;
+        background: #ffffff;
+        color: #71717a;
+        font-size: 15px;
+        font-weight: 600;
+      }
+      .hf-ui-onboarding-steps .done,
+      .hf-ui-onboarding-steps .active {
+        border-color: #18181b;
+        background: #18181b;
+        color: #ffffff;
+      }
+      .hf-ui-onboarding-card {
+        display: grid;
+        gap: 14px;
+        padding: 34px;
+        border: 1px solid #e4e4e7;
+        border-radius: 28px;
+        background: #ffffff;
+        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.1);
+      }
+      .hf-ui-onboarding-card small {
+        color: #71717a;
+        font-size: 11px;
+        font-weight: 600;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+      }
+      .hf-ui-onboarding-card strong {
+        font-size: 30px;
+        font-weight: 700;
+        line-height: 1.1;
+      }
+      .hf-ui-onboarding-card p {
+        margin: 0;
+        color: #71717a;
+        font-size: 16px;
+        line-height: 1.5;
+      }
+      .hf-ui-onboarding-card button {
+        justify-self: start;
+        height: 46px;
+        padding: 0 22px;
+        border: 0;
+        border-radius: 12px;
+        background: #18181b;
+        color: #ffffff;
+        font-size: 15px;
+        font-weight: 600;
+        cursor: default;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="onboarding-stepper-flow-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-ui-onboarding-flow">
+          <div class="hf-ui-onboarding-steps">
+            <span class="done">1</span><span class="active">2</span><span>3</span>
+          </div>
+          <div class="hf-ui-onboarding-card">
+            <small>Step 2 of 3</small>
+            <strong>Choose your visual style</strong>
+            <p>Pick a direction so the agent can generate matching motion primitives.</p>
+            <button type="button">Continue</button>
+          </div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        tl.fromTo(
+          ".hf-ui-onboarding-steps span",
+          { scale: 0.7, opacity: 0 },
+          { scale: 1, opacity: 1, duration: 0.28, stagger: 0.08, ease: "back.out(1.8)" },
+          0.3,
+        );
+        tl.fromTo(
+          ".hf-ui-onboarding-card",
+          { y: 28, opacity: 0 },
+          { y: 0, opacity: 1, duration: 0.42, ease: "power3.out" },
+          0.62,
+        );
+        tl.to(
+          ".hf-ui-onboarding-steps .active",
+          { scale: 1.16, duration: 0.16, yoyo: true, repeat: 1, ease: "power1.inOut" },
+          1.1,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["onboarding-stepper-flow-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/onboarding-stepper-flow/onboarding-stepper-flow.html b/docs/public/catalog/components/onboarding-stepper-flow/onboarding-stepper-flow.html
new file mode 100644
index 0000000000..3870c88a1a
--- /dev/null
+++ b/docs/public/catalog/components/onboarding-stepper-flow/onboarding-stepper-flow.html
@@ -0,0 +1,92 @@
+<!--
+  Onboarding Stepper Flow - Remocn-inspired composed UI flow for HyperFrames.
+
+  Paste the markup and CSS into a composition. Use the timeline integration
+  note at the bottom as the starting point for deterministic GSAP animation.
+-->
+
+<div class="hf-ui-onboarding-flow">
+  <div class="hf-ui-onboarding-steps">
+    <span class="done">1</span><span class="active">2</span><span>3</span>
+  </div>
+  <div class="hf-ui-onboarding-card">
+    <small>Step 2 of 3</small>
+    <strong>Choose your visual style</strong>
+    <p>Pick a direction so the agent can generate matching motion primitives.</p>
+    <button type="button">Continue</button>
+  </div>
+</div>
+
+<style>
+  .hf-ui-onboarding-flow {
+    display: grid;
+    gap: 22px;
+    width: 520px;
+    color: #18181b;
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-ui-onboarding-steps {
+    display: flex;
+    justify-content: center;
+    gap: 18px;
+  }
+  .hf-ui-onboarding-steps span {
+    display: grid;
+    place-items: center;
+    width: 44px;
+    height: 44px;
+    border: 2px solid #e4e4e7;
+    border-radius: 999px;
+    background: #ffffff;
+    color: #71717a;
+    font-weight: 900;
+  }
+  .hf-ui-onboarding-steps .done,
+  .hf-ui-onboarding-steps .active {
+    border-color: #18181b;
+    background: #18181b;
+    color: #ffffff;
+  }
+  .hf-ui-onboarding-card {
+    display: grid;
+    gap: 14px;
+    padding: 34px;
+    border: 1px solid #e4e4e7;
+    border-radius: 28px;
+    background: #ffffff;
+    box-shadow: 0 26px 80px rgba(0, 0, 0, 0.1);
+  }
+  .hf-ui-onboarding-card small {
+    color: #71717a;
+    font-weight: 900;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+  .hf-ui-onboarding-card strong {
+    font-size: 30px;
+    line-height: 1;
+  }
+  .hf-ui-onboarding-card p {
+    margin: 0;
+    color: #71717a;
+    font-size: 16px;
+    line-height: 1.45;
+  }
+  .hf-ui-onboarding-card button {
+    justify-self: start;
+    height: 46px;
+    padding: 0 19px;
+    border: 0;
+    border-radius: 14px;
+    background: #18181b;
+    color: #ffffff;
+    font-weight: 900;
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-ui-onboarding-steps span', { scale: 0.7, opacity: 0 }, { scale: 1, opacity: 1, duration: 0.28, stagger: 0.08, ease: 'back.out(1.8)' }, 0.3);
+  tl.fromTo('.hf-ui-onboarding-card', { y: 28, opacity: 0 }, { y: 0, opacity: 1, duration: 0.42, ease: 'power3.out' }, 0.62);
+  tl.to('.hf-ui-onboarding-steps .active', { scale: 1.16, duration: 0.16, yoyo: true, repeat: 1, ease: 'power1.inOut' }, 1.1);
+-->
diff --git a/docs/public/catalog/components/orbital-feature-path/demo.html b/docs/public/catalog/components/orbital-feature-path/demo.html
new file mode 100644
index 0000000000..465dc4214e
--- /dev/null
+++ b/docs/public/catalog/components/orbital-feature-path/demo.html
@@ -0,0 +1,170 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Orbital Feature Path - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/MotionPathPlugin.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: var(--bg, #f7f7f8);
+        font-family: var(--font-body, Inter, system-ui, sans-serif);
+      }
+      .hf-advanced-orbital-feature-path {
+        color: var(--fg, #111827);
+        font-family: var(--font-body, Inter, system-ui, sans-serif);
+      }
+      .hf-advanced-orbital-feature-path {
+        position: relative;
+        width: 760px;
+        height: 430px;
+        border-radius: 30px;
+        overflow: hidden;
+        background: radial-gradient(
+          circle at 50% 20%,
+          var(--bg, #dbeafe),
+          var(--bg, #f8fafc) 54%,
+          var(--bg, #e0e7ff)
+        );
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);
+        /* ponytail: scale wrapper (not a GSAP target) to fill ~70% of 1920×1080 */
+        transform: scale(1.8);
+        transform-origin: 50% 50%;
+      }
+      .hf-advanced-orbital-feature-path svg {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        overflow: visible;
+      }
+      .hf-advanced-orbital-feature-path .path {
+        fill: none;
+        stroke: color-mix(in srgb, var(--accent, #2563eb) 28%, transparent);
+        stroke-width: 3;
+        stroke-dasharray: 10 12;
+      }
+      .hf-advanced-orbital-feature-path .core {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        width: 176px;
+        height: 176px;
+        margin: -88px 0 0 -88px;
+        border-radius: 42px;
+        background: var(--fg, #111827);
+        color: var(--bg, #fff);
+        display: grid;
+        place-items: center;
+        text-align: center;
+        font-size: 14px;
+        font-weight: 900;
+        letter-spacing: -0.04em;
+        box-shadow: 0 22px 54px rgba(15, 23, 42, 0.25);
+      }
+      .hf-advanced-orbital-feature-path .chip {
+        position: absolute;
+        left: 0;
+        top: 0;
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+        height: 42px;
+        padding: 0 16px;
+        border-radius: 999px;
+        background: var(--surface, #fff);
+        box-shadow: 0 16px 42px rgba(15, 23, 42, 0.14);
+        font-size: 13px;
+        font-weight: 700;
+        transform-origin: 50% 50%;
+      }
+      .hf-advanced-orbital-feature-path .dot {
+        width: 10px;
+        height: 10px;
+        border-radius: 999px;
+        background: var(--accent, #2563eb);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="orbital-feature-path-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="hf-advanced-orbital-feature-path">
+        <svg viewBox="0 0 760 430" aria-hidden="true">
+          <path
+            id="orbital-feature-path-path-a"
+            class="path"
+            d="M104 310 C178 110, 334 74, 442 178 S592 306, 668 120"
+          />
+          <path
+            id="orbital-feature-path-path-b"
+            class="path"
+            d="M118 142 C224 300, 410 330, 642 206"
+          />
+        </svg>
+        <div class="core">Orbital Feature Path</div>
+        <div class="chip chip-a"><span class="dot"></span>Plan</div>
+        <div class="chip chip-b"><span class="dot"></span>Render</div>
+      </div>
+    </div>
+    <script>
+      const tl = gsap.timeline({ paused: true });
+      const startTime = 0.5;
+      if (window.MotionPathPlugin) gsap.registerPlugin(MotionPathPlugin);
+      tl.to(
+        ".hf-advanced-orbital-feature-path .chip-a",
+        {
+          motionPath: {
+            path: "#orbital-feature-path-path-a",
+            align: "#orbital-feature-path-path-a",
+            alignOrigin: [0.5, 0.5],
+            autoRotate: true,
+          },
+          duration: 2.4,
+          ease: "power1.inOut",
+        },
+        startTime,
+      );
+      tl.to(
+        ".hf-advanced-orbital-feature-path .chip-b",
+        {
+          motionPath: {
+            path: "#orbital-feature-path-path-b",
+            align: "#orbital-feature-path-path-b",
+            alignOrigin: [0.5, 0.5],
+            autoRotate: true,
+            start: 0.1,
+            end: 0.92,
+          },
+          duration: 2.1,
+          ease: "sine.inOut",
+        },
+        startTime + 0.25,
+      );
+      tl.set({}, {}, 5);
+      window.__timelines = window.__timelines || {};
+      window.__timelines["orbital-feature-path-demo"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/orbital-feature-path/orbital-feature-path.html b/docs/public/catalog/components/orbital-feature-path/orbital-feature-path.html
new file mode 100644
index 0000000000..fc7cadb8f1
--- /dev/null
+++ b/docs/public/catalog/components/orbital-feature-path/orbital-feature-path.html
@@ -0,0 +1,99 @@
+<!--
+  Orbital Feature Path - advanced HyperFrames primitive.
+
+  This is intentionally seekable: drive it from a paused GSAP timeline.
+  MotionPath examples require GSAP MotionPathPlugin. Three.js examples expose
+  a render(progress) adapter instead of a free-running requestAnimationFrame loop.
+-->
+
+<div class="hf-advanced-orbital-feature-path">
+  <svg viewBox="0 0 760 430" aria-hidden="true">
+    <path
+      id="orbital-feature-path-path-a"
+      class="path"
+      d="M104 310 C178 110, 334 74, 442 178 S592 306, 668 120"
+    />
+    <path id="orbital-feature-path-path-b" class="path" d="M118 142 C224 300, 410 330, 642 206" />
+  </svg>
+  <div class="core">Orbital Feature Path</div>
+  <div class="chip chip-a"><span class="dot"></span>Plan</div>
+  <div class="chip chip-b"><span class="dot"></span>Render</div>
+</div>
+
+<style>
+  .hf-advanced-orbital-feature-path {
+    color: var(--fg, #111827);
+    font-family: var(--font-body, Inter, system-ui, sans-serif);
+  }
+  .hf-advanced-orbital-feature-path {
+    position: relative;
+    width: 760px;
+    height: 430px;
+    border-radius: var(--radius, 30px);
+    overflow: hidden;
+    background: radial-gradient(
+      circle at 50% 20%,
+      var(--bg, #dbeafe),
+      var(--bg, #f8fafc) 54%,
+      var(--bg, #e0e7ff)
+    );
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);
+  }
+  .hf-advanced-orbital-feature-path svg {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    overflow: visible;
+  }
+  .hf-advanced-orbital-feature-path .path {
+    fill: none;
+    stroke: color-mix(in srgb, var(--accent, #2563eb) 28%, transparent);
+    stroke-width: 3;
+    stroke-dasharray: 10 12;
+  }
+  .hf-advanced-orbital-feature-path .core {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 176px;
+    height: 176px;
+    margin: -88px 0 0 -88px;
+    border-radius: 42px;
+    background: var(--fg, #111827);
+    color: var(--bg, #fff);
+    display: grid;
+    place-items: center;
+    text-align: center;
+    font-weight: 900;
+    letter-spacing: -0.04em;
+    box-shadow: 0 22px 54px rgba(15, 23, 42, 0.25);
+  }
+  .hf-advanced-orbital-feature-path .chip {
+    position: absolute;
+    left: 0;
+    top: 0;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1, 8px);
+    height: 42px;
+    padding: 0 var(--space-2, 16px);
+    border-radius: var(--radius, 999px);
+    background: var(--surface, #fff);
+    box-shadow: 0 16px 42px rgba(15, 23, 42, 0.14);
+    font-weight: 800;
+    transform-origin: 50% 50%;
+  }
+  .hf-advanced-orbital-feature-path .dot {
+    width: 10px;
+    height: 10px;
+    border-radius: var(--radius, 999px);
+    background: var(--accent, #2563eb);
+  }
+</style>
+
+<!--
+  Timeline integration:
+  const startTime = 0;
+  if (window.MotionPathPlugin) gsap.registerPlugin(MotionPathPlugin); tl.to('.hf-advanced-orbital-feature-path .chip-a', { motionPath: { path: '#orbital-feature-path-path-a', align: '#orbital-feature-path-path-a', alignOrigin: [0.5, 0.5], autoRotate: true }, duration: 2.4, ease: 'power1.inOut' }, startTime); tl.to('.hf-advanced-orbital-feature-path .chip-b', { motionPath: { path: '#orbital-feature-path-path-b', align: '#orbital-feature-path-path-b', alignOrigin: [0.5, 0.5], autoRotate: true, start: 0.1, end: 0.92 }, duration: 2.1, ease: 'sine.inOut' }, startTime + 0.25);
+-->
diff --git a/docs/public/catalog/components/ordered-dither-pass/README.md b/docs/public/catalog/components/ordered-dither-pass/README.md
new file mode 100644
index 0000000000..8a9f3705d5
--- /dev/null
+++ b/docs/public/catalog/components/ordered-dither-pass/README.md
@@ -0,0 +1,79 @@
+# ordered-dither-pass
+
+Wave M experiment (texture / transitions). Bayer-matrix ordered dithering
+quantizes a slotted scene: the source is rasterized once at mount to a
+reduced-resolution buffer (one dither pixel is about 3 display px, blitted
+with image smoothing off), and every frame re-derives each output pixel
+from (source pixel, Bayer threshold, the animated dither amount). With
+direction `in` the image emerges from pure 2-tone noise (theme bg vs
+accent) into posterized color and finally clean; `out` runs the ramp in
+reverse and holds the noise. Ordered, parallel, frame-independent; never
+error diffusion. 3.5s authored, elastic HOLD (never time-scaled).
+
+## Mounting
+
+```html
+<div
+  class="clip"
+  data-composition-id="ordered-dither-pass"
+  data-composition-src="./components/ordered-dither-pass.html"
+  data-variable-values='{"matrix":"8","levels":3,"accent":"blue"}'
+  data-start="0"
+  data-duration="3.5"
+  data-track-index="0"
+></div>
+```
+
+## Scene slot
+
+The source scene is a slot. Place an inert template anywhere in the HOST
+page:
+
+```html
+<template data-slot="ordered-dither-pass-scene"> ...scene... </template>
+```
+
+The slot is rasterized through an SVG foreignObject snapshot, so content
+must be self-contained: inline styles or rules carried by host `<style>`
+tags (both are copied into the snapshot), data-URI images only, system or
+already-active fonts. External resources do not load inside a snapshot.
+A missing slot falls back to a token monogram tile rasterized
+synchronously from contract tokens.
+
+## Variables
+
+| id        | type   | default | notes                                                                                                |
+| --------- | ------ | ------- | ---------------------------------------------------------------------------------------------------- |
+| matrix    | enum   | 4       | Bayer matrix size: 2 coarsest crosshatch, 4 classic, 8 smoothest grain.                              |
+| direction | enum   | in      | in resolves noise to clean; out dissolves clean to noise and holds it.                               |
+| levels    | number | 2       | Quantization levels per color channel during the dithered phase (2-6).                               |
+| accent    | enum   | green   | Light tone of the 2-tone noise phase: green maps to --brand, blue to --accent, violet to --accent-2. |
+| exit      | enum   | none    | none holds the final state (frame roots own transitions); fade or up add a 0.45s departure.          |
+
+## Choreography
+
+- 0.00s: the field fades up over 0.25s in its start state (pure Bayer
+  noise for `in`, the clean source for `out`).
+- 0.40s: one scalar dither amount ramps across 1.6s (power1.inOut). For
+  `in`: contrast emerges under the dither first, then the dither releases
+  into the clean source over the last stretch of the ramp; the noise
+  phase reads as a bg/accent duotone, the middle as posterized color.
+- 2.00s: the ramp lands.
+- HOLD: truly still (clean for `in`, pure noise for `out`), elastic with
+  the clip duration.
+
+Sync point `ramp` fires as the amount starts moving; align SFX to it.
+
+## Determinism
+
+The source buffer (a detached ImageData copy), the Bayer threshold table,
+and every resolved color are fixed once at mount. One anchor tween spans
+the full duration and the timeline's onUpdate rewrites one reused
+ImageData end to end from those tables and the current time, then blits
+it scaled with smoothing off. Stateless per frame: no Math.random, no
+wall clock, no incremental state, so eventful seeks (suppressEvents
+false) land identical frames in any order and either direction. The
+no-slot monogram raster is drawn synchronously before the timeline
+registers; a slotted raster arrives from the snapshot decode (page-load
+scale, before capture begins) and repaints the current frame, after
+which all frames are pure f(t).
diff --git a/docs/public/catalog/components/ordered-dither-pass/demo.html b/docs/public/catalog/components/ordered-dither-pass/demo.html
new file mode 100644
index 0000000000..cc2c558a5e
--- /dev/null
+++ b/docs/public/catalog/components/ordered-dither-pass/demo.html
@@ -0,0 +1,141 @@
+<!doctype html>
+<!--
+  ordered-dither-pass demo. A full-bleed 1920x1080 LIGHT host mounts the
+  primitive through data-composition-src with non-default variables
+  (8x8 matrix, 3 levels, blue accent) and supplies the scene slot to
+  prove the snapshot raster path while the primitive stays elastic.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Ordered Dither Pass Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #f5f6f8);
+      }
+
+      #root {
+        --bg: #f5f6f8;
+        --fg: #101318;
+        --muted: #5b6472;
+        --surface: #ffffff;
+        --border: #d7dce4;
+        --brand: #14a35e;
+        --accent: #2f6fed;
+        --accent-2: #7a5cd6;
+        --radius: 24px;
+        --font-display: "Inter", system-ui, sans-serif;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg);
+      }
+
+      .mount-stage {
+        position: absolute;
+        inset: 0;
+        container-type: size;
+        overflow: hidden;
+      }
+
+      .dither-demo-scene {
+        display: grid;
+        place-items: center;
+      }
+
+      .dither-demo-scene .panel {
+        display: grid;
+        place-items: center;
+        gap: 18px;
+        width: 900px;
+        height: 480px;
+        border-radius: 36px;
+        background: linear-gradient(135deg, #2f6fed 0%, #7a5cd6 55%, #d9506b 100%);
+      }
+
+      .dither-demo-scene .word {
+        color: #ffffff;
+        font-family: system-ui, sans-serif;
+        font-size: 124px;
+        font-weight: 600;
+        letter-spacing: -0.01em;
+      }
+
+      .dither-demo-scene .tag {
+        color: rgba(255, 255, 255, 0.78);
+        font-family: ui-monospace, Menlo, monospace;
+        font-size: 28px;
+        letter-spacing: 0.16em;
+        text-transform: uppercase;
+      }
+    </style>
+  </head>
+  <body>
+    <template data-slot="ordered-dither-pass-scene">
+      <div class="dither-demo-scene">
+        <div class="panel">
+          <span class="word">RESOLVE</span>
+          <span class="tag">signal from noise</span>
+        </div>
+      </div>
+    </template>
+
+    <div
+      id="root"
+      data-composition-id="ordered-dither-pass-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="3.5"
+      data-fps="30"
+    >
+      <div
+        id="ordered-dither-pass-mount"
+        class="mount-stage clip"
+        data-composition-id="ordered-dither-pass"
+        data-composition-src="./ordered-dither-pass.html"
+        data-variable-values='{"matrix":"8","levels":3,"accent":"blue"}'
+        data-start="0"
+        data-duration="3.5"
+        data-track-index="0"
+        data-width="1920"
+        data-height="1080"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["ordered-dither-pass-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "ordered-dither-pass.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/ordered-dither-pass/ordered-dither-pass.html b/docs/public/catalog/components/ordered-dither-pass/ordered-dither-pass.html
new file mode 100644
index 0000000000..432b83b231
--- /dev/null
+++ b/docs/public/catalog/components/ordered-dither-pass/ordered-dither-pass.html
@@ -0,0 +1,511 @@
+<!doctype html>
+<!--
+  ordered-dither-pass: HyperFrames video primitive (Wave M experiment,
+  texture / transitions)
+
+  Bayer-matrix ordered dithering quantizes a slotted scene. The source is
+  rasterized ONCE at mount to a reduced-resolution offscreen buffer; every
+  frame re-derives each output pixel from (source pixel, Bayer threshold,
+  the animated dither amount), so the pass is stateless per frame. With
+  direction "in" the image emerges from pure 2-tone noise (theme bg vs
+  accent) into posterized color and finally clean; "out" runs the same
+  ramp in reverse and holds the noise. Explicitly ordered (parallel,
+  frame-independent) dithering, never error diffusion.
+
+  The scene is a SLOT. Callers supply content by placing an inert template
+  anywhere in the HOST page (templates never render, and the runtime wipes
+  the host clip's own children on mount):
+
+    <template data-slot="ordered-dither-pass-scene"> ... </template>
+
+  Slot content is rasterized through an SVG foreignObject snapshot, so it
+  must be self-contained: inline styles or rules carried by host <style>
+  tags (which are copied into the snapshot), data-URI images only, system
+  or already-active fonts. When no slot exists, the primitive rasterizes
+  a token monogram tile drawn synchronously from contract tokens.
+
+  Variables (declared in data-composition-variables below):
+    - matrix ("2" | "4" | "8", default "4"): Bayer matrix size; 2 is the
+      coarsest crosshatch, 8 the smoothest ordered grain.
+    - direction ("in" | "out", default "in"): in resolves noise to clean;
+      out dissolves clean to noise and holds it.
+    - levels (2-6, default 2): quantization levels per color channel
+      during the dithered phase.
+    - accent ("green" | "blue" | "violet", default "green"): the light
+      tone of the 2-tone noise phase; green rides --brand, blue rides
+      --accent, violet rides --accent-2.
+    - exit ("none" | "fade" | "up", default "none"): frame roots own
+      transitions; the default holds the final state to the cut.
+
+  Envelope, fixed segments with elastic HOLD only (never timeScale):
+    0.00s   the field fades up over 0.25s in its start state
+    0.40s   the dither amount ramps across 1.6s (power1.inOut)
+    then    HOLD, truly still (clean for "in", pure noise for "out")
+    OUT = 0.45s only when exit is not none
+
+  Determinism (canvas 2D law): the source buffer, the Bayer table, and
+  every resolved color are fixed once at mount. Every painted frame is a
+  pure function of (those tables, the timeline's current time): onUpdate
+  rewrites one reused ImageData end to end and blits it, scaled with
+  image smoothing off (the chunky retro pixel is the point). No
+  Math.random, no wall clock, no incremental state; eventful seeks
+  (suppressEvents false, the engine's render path) land identical frames
+  in any order and either direction. The no-slot monogram raster is drawn
+  synchronously before the timeline registers; a slotted raster arrives
+  from the snapshot decode and repaints the current frame, after which
+  all frames are pure f(t).
+-->
+<html
+  lang="en"
+  data-composition-id="ordered-dither-pass"
+  data-composition-duration="3.5"
+  data-composition-variables='[
+    { "id": "matrix", "type": "enum", "role": "style", "label": "Matrix", "description": "Bayer matrix size: 2 is the coarsest crosshatch, 8 the smoothest ordered grain.", "default": "4", "options": [{ "value": "2", "label": "2 x 2" }, { "value": "4", "label": "4 x 4" }, { "value": "8", "label": "8 x 8" }] },
+    { "id": "direction", "type": "enum", "role": "timing", "label": "Direction", "description": "in resolves noise to clean; out dissolves clean to noise and holds it.", "default": "in", "options": [{ "value": "in", "label": "Noise to clean" }, { "value": "out", "label": "Clean to noise" }] },
+    { "id": "levels", "type": "number", "role": "style", "label": "Levels", "description": "Quantization levels per color channel during the dithered phase.", "default": 2, "min": 2, "max": 6, "step": 1 },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Light tone of the 2-tone noise phase: green rides --brand, blue rides --accent, violet rides --accent-2.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the final state holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Ordered Dither Pass</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="ordered-dither-pass" data-duration="3.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, "Inter", system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .odp-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .odp-stage {
+            position: absolute;
+            inset: 0;
+            will-change: transform, opacity;
+          }
+
+          .odp-canvas {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+          }
+        </style>
+
+        <div
+          id="ordered-dither-pass-clip"
+          class="odp-clip clip"
+          data-start="0"
+          data-duration="3.5"
+          data-track-index="0"
+        >
+          <div class="odp-stage">
+            <canvas class="odp-canvas" aria-hidden="true"></canvas>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".odp-stage");
+            var canvas = root.querySelector(".odp-canvas");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            function num(value, fallback, min, max) {
+              var n = Number(value);
+              if (!isFinite(n)) n = fallback;
+              return Math.max(min, Math.min(max, n));
+            }
+
+            var matrixSize = vars.matrix === "2" || vars.matrix === "8" ? Number(vars.matrix) : 4;
+            var direction = vars.direction === "out" ? "out" : "in";
+            var levels = Math.round(num(vars.levels, 2, 2, 6));
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            // Bundler mirrors composition variables as scoped CSS custom
+            // props; when this unit's accent variable shadows the --accent
+            // token ("blue" is a valid CSS color), fall back to the literal.
+            var computedAccent = getComputedStyle(root).getPropertyValue("--accent").trim();
+            if (
+              computedAccent === "green" ||
+              computedAccent === "blue" ||
+              computedAccent === "violet"
+            ) {
+              accentColors.blue = "#61a8ff";
+            }
+
+            // Envelope.
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "3.5"));
+            var OUT = exit === "none" ? 0 : 0.45;
+            var RAMP_AT = 0.4;
+            var RAMP = Math.min(1.6, Math.max(0.6, duration - OUT - RAMP_AT - 0.4));
+            var FADE_IN = 0.25;
+            var OUT_START = duration - OUT;
+
+            // Display canvas basis, fixed once at mount.
+            var dpr = Math.min(2, Math.max(1, Number(window.devicePixelRatio) || 1));
+            var box = root.getBoundingClientRect();
+            var cssW = Math.max(1, Math.round(box.width) || 640);
+            var cssH = Math.max(1, Math.round(box.height) || 360);
+            canvas.width = Math.round(cssW * dpr);
+            canvas.height = Math.round(cssH * dpr);
+            var ctx = canvas.getContext("2d");
+            ctx.imageSmoothingEnabled = false;
+
+            // Reduced-resolution pixel buffer: one dither pixel is about 3
+            // display px (capped 640 wide), the chunky retro read AND the
+            // per-frame loop budget.
+            var bufW = Math.max(8, Math.min(640, Math.round(cssW / 3)));
+            var bufH = Math.max(8, Math.round(bufW * (cssH / cssW)));
+
+            // Resolve tokens to concrete values once at mount.
+            var hostDoc = root.ownerDocument;
+            function resolveColor(cssColor, fallback) {
+              var probe = hostDoc.createElement("span");
+              probe.style.color = cssColor;
+              root.appendChild(probe);
+              var out = getComputedStyle(probe).color || fallback;
+              probe.remove();
+              return out;
+            }
+            function parseRgb(color, fallback) {
+              var m = /rgba?\(\s*([\d.]+)[,\s]+([\d.]+)[,\s]+([\d.]+)/.exec(color);
+              return m ? [Number(m[1]), Number(m[2]), Number(m[3])] : fallback;
+            }
+            var bgColor = resolveColor("var(--bg, #0b0c0e)", "#0b0c0e");
+            var bgRgb = parseRgb(bgColor, [11, 12, 14]);
+            var accentRgb = parseRgb(
+              resolveColor(accentColors[accent], "#71f5a7"),
+              [113, 245, 167],
+            );
+            var monoFamily = (function () {
+              var probe = hostDoc.createElement("span");
+              probe.style.fontFamily =
+                'var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace)';
+              root.appendChild(probe);
+              var out = getComputedStyle(probe).fontFamily || "monospace";
+              probe.remove();
+              return out;
+            })();
+
+            // Bayer matrix, generated recursively; thresholds normalized to
+            // (i + 0.5) / n^2 in [0, 1).
+            var bayer = (function () {
+              var m = [[0]];
+              var size = 1;
+              while (size < matrixSize) {
+                var next = [];
+                for (var y = 0; y < size * 2; y += 1) next.push(new Array(size * 2));
+                for (var yy = 0; yy < size; yy += 1) {
+                  for (var xx = 0; xx < size; xx += 1) {
+                    var v = 4 * m[yy][xx];
+                    next[yy][xx] = v;
+                    next[yy][xx + size] = v + 2;
+                    next[yy + size][xx] = v + 3;
+                    next[yy + size][xx + size] = v + 1;
+                  }
+                }
+                m = next;
+                size *= 2;
+              }
+              var n2 = matrixSize * matrixSize;
+              var flat = new Float64Array(n2);
+              for (var by = 0; by < matrixSize; by += 1) {
+                for (var bx = 0; bx < matrixSize; bx += 1) {
+                  flat[by * matrixSize + bx] = (m[by][bx] + 0.5) / n2;
+                }
+              }
+              return flat;
+            })();
+
+            // Source raster at buffer resolution, composited over the bg.
+            var raster = hostDoc.createElement("canvas");
+            raster.width = bufW;
+            raster.height = bufH;
+            var rctx = raster.getContext("2d");
+
+            var srcData = null; // Uint8ClampedArray, fixed after raster
+            var rasterReady = false;
+
+            function paintMonogram(target, w, h) {
+              var m = Math.min(w, h);
+              target.fillStyle = bgColor;
+              target.fillRect(0, 0, w, h);
+              var tile = m * 0.62;
+              var x = (w - tile) / 2;
+              var y = (h - tile) / 2;
+              target.fillStyle = resolveColor(
+                "color-mix(in srgb, var(--surface, #14171c) 72%, " + accentColors[accent] + ")",
+                "#1a2a22",
+              );
+              target.beginPath();
+              if (target.roundRect) target.roundRect(x, y, tile, tile, m * 0.06);
+              else target.rect(x, y, tile, tile);
+              target.fill();
+              target.fillStyle = resolveColor(
+                "color-mix(in srgb, var(--fg, #f8fafc) 30%, " + accentColors[accent] + ")",
+                "#a8f5c8",
+              );
+              target.font = "600 " + Math.round(m * 0.36) + "px " + monoFamily;
+              target.textAlign = "center";
+              target.textBaseline = "middle";
+              target.fillText("H", w / 2, h / 2 + m * 0.014);
+            }
+
+            function finishRaster() {
+              srcData = rctx.getImageData(0, 0, bufW, bufH).data;
+              rasterReady = true;
+              root.setAttribute("data-odp-raster", "ready");
+              paint(tl ? tl.time() : 0);
+            }
+
+            // SLOT. Rasterized through an SVG foreignObject snapshot of the
+            // slot markup plus every host <style> tag and the resolved
+            // contract tokens.
+            var slotTemplate = null;
+            try {
+              slotTemplate = hostDoc.querySelector(
+                'template[data-slot="ordered-dither-pass-scene"]',
+              );
+            } catch (error) {
+              slotTemplate = null;
+            }
+
+            if (slotTemplate) {
+              var tokenNames = [
+                "--bg",
+                "--fg",
+                "--muted",
+                "--surface",
+                "--border",
+                "--brand",
+                "--accent",
+                "--accent-2",
+                "--font-display",
+                "--font-body",
+                "--font-mono",
+                "--radius",
+                "--space-1",
+                "--space-2",
+                "--space-3",
+                "--dur-beat",
+                "--ease-standard",
+                "--ease-emphasis",
+              ];
+              var rootStyle = getComputedStyle(root);
+              var tokenDecl = "";
+              for (var ti = 0; ti < tokenNames.length; ti += 1) {
+                var tv = rootStyle.getPropertyValue(tokenNames[ti]).trim();
+                if (tv) tokenDecl += tokenNames[ti] + ":" + tv + ";";
+              }
+              var styleTexts = "";
+              var styleTags = hostDoc.querySelectorAll("style");
+              for (var si = 0; si < styleTags.length; si += 1) {
+                styleTexts += styleTags[si].textContent || "";
+              }
+              // Snapshot at css size for faithful layout, then downsample
+              // into the buffer raster.
+              var wrapper = hostDoc.createElement("div");
+              wrapper.setAttribute(
+                "style",
+                "width:" +
+                  cssW +
+                  "px;height:" +
+                  cssH +
+                  "px;overflow:hidden;position:relative;" +
+                  "display:grid;place-items:center;background:" +
+                  bgColor +
+                  ";" +
+                  tokenDecl,
+              );
+              wrapper.appendChild(hostDoc.importNode(slotTemplate.content, true));
+              var styleEl = hostDoc.createElement("style");
+              styleEl.textContent = styleTexts;
+              wrapper.insertBefore(styleEl, wrapper.firstChild);
+              var serialized = new XMLSerializer().serializeToString(wrapper);
+              var svgMarkup =
+                // No xmlns on foreignObject: a default xmlns declaration
+                // applies to the declaring element itself and would eject
+                // foreignObject from the SVG namespace (renders blank). The
+                // serialized wrapper div already carries the XHTML namespace.
+                '<svg xmlns="http://www.w3.org/2000/svg" width="' +
+                cssW +
+                '" height="' +
+                cssH +
+                '"><foreignObject width="' +
+                cssW +
+                '" height="' +
+                cssH +
+                '">' +
+                serialized +
+                "</foreignObject></svg>";
+              var snapshot = new Image();
+              snapshot.onload = function () {
+                rctx.fillStyle = bgColor;
+                rctx.fillRect(0, 0, bufW, bufH);
+                rctx.drawImage(snapshot, 0, 0, bufW, bufH);
+                try {
+                  finishRaster();
+                } catch (error) {
+                  // Tainted or unreadable snapshot: fall back to the monogram.
+                  paintMonogram(rctx, bufW, bufH);
+                  finishRaster();
+                }
+              };
+              snapshot.onerror = function () {
+                paintMonogram(rctx, bufW, bufH);
+                finishRaster();
+              };
+              snapshot.src = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svgMarkup);
+            } else {
+              paintMonogram(rctx, bufW, bufH);
+              srcData = rctx.getImageData(0, 0, bufW, bufH).data;
+              rasterReady = true;
+              root.setAttribute("data-odp-raster", "ready");
+            }
+
+            var outImage = rctx.createImageData(bufW, bufH);
+
+            function clamp01(v) {
+              return v < 0 ? 0 : v > 1 ? 1 : v;
+            }
+
+            // The whole pass is one scalar a(t) in [0, 1]: 1 = pure 2-tone
+            // noise, 0 = clean source.
+            //   contrast = clamp01((1 - a) * 1.6)  signal emerges under dither
+            //   cleanMix = clamp01(((1 - a) - 0.55) / 0.45)  dither releases
+            //   duoMix   = clamp01((a - 0.55) / 0.45)  noise phase is duotone
+            function amountAt(t) {
+              var p = clamp01((t - RAMP_AT) / RAMP);
+              // power1.inOut
+              p = p < 0.5 ? 2 * p * p : 1 - 2 * (1 - p) * (1 - p);
+              return direction === "in" ? 1 - p : p;
+            }
+
+            // Pure repaint from (srcData, bayer, t): every output pixel is
+            // rewritten, no state survives between frames.
+            function paint(timeSeconds) {
+              ctx.fillStyle = bgColor;
+              ctx.fillRect(0, 0, canvas.width, canvas.height);
+              if (!rasterReady) return;
+              var fade = clamp01(timeSeconds / FADE_IN);
+              var a = amountAt(timeSeconds);
+              var contrast = clamp01((1 - a) * 1.6);
+              var cleanMix = clamp01((1 - a - 0.55) / 0.45);
+              var duoMix = clamp01((a - 0.55) / 0.45);
+              var L1 = levels - 1;
+              var out = outImage.data;
+              for (var y = 0; y < bufH; y += 1) {
+                var brow = (y % matrixSize) * matrixSize;
+                for (var x = 0; x < bufW; x += 1) {
+                  var th = bayer[brow + (x % matrixSize)];
+                  var i = (y * bufW + x) * 4;
+                  var vr = 0.5 + (srcData[i] / 255 - 0.5) * contrast;
+                  var vg = 0.5 + (srcData[i + 1] / 255 - 0.5) * contrast;
+                  var vb = 0.5 + (srcData[i + 2] / 255 - 0.5) * contrast;
+                  var qr = Math.floor(vr * L1 + th) / L1;
+                  var qg = Math.floor(vg * L1 + th) / L1;
+                  var qb = Math.floor(vb * L1 + th) / L1;
+                  qr = qr < 0 ? 0 : qr > 1 ? 1 : qr;
+                  qg = qg < 0 ? 0 : qg > 1 ? 1 : qg;
+                  qb = qb < 0 ? 0 : qb > 1 ? 1 : qb;
+                  // Noise phase is a BINARY luminance threshold, independent
+                  // of levels: odd level counts put flat mid-gray exactly on
+                  // a quantization step, which would render the "pure noise"
+                  // pole as a flat field instead of the Bayer pattern.
+                  var lum = 0.299 * vr + 0.587 * vg + 0.114 * vb;
+                  var tone = lum > th ? 1 : 0;
+                  var dr = bgRgb[0] + (accentRgb[0] - bgRgb[0]) * tone;
+                  var dg = bgRgb[1] + (accentRgb[1] - bgRgb[1]) * tone;
+                  var db = bgRgb[2] + (accentRgb[2] - bgRgb[2]) * tone;
+                  var r = qr * 255 + (dr - qr * 255) * duoMix;
+                  var g = qg * 255 + (dg - qg * 255) * duoMix;
+                  var b = qb * 255 + (db - qb * 255) * duoMix;
+                  r += (srcData[i] - r) * cleanMix;
+                  g += (srcData[i + 1] - g) * cleanMix;
+                  b += (srcData[i + 2] - b) * cleanMix;
+                  out[i] = r;
+                  out[i + 1] = g;
+                  out[i + 2] = b;
+                  out[i + 3] = 255;
+                }
+              }
+              rctx.putImageData(outImage, 0, 0);
+              ctx.globalAlpha = fade;
+              ctx.drawImage(raster, 0, 0, bufW, bufH, 0, 0, canvas.width, canvas.height);
+              ctx.globalAlpha = 1;
+              // putImageData reuses the raster canvas as a blit surface;
+              // srcData is a detached copy, so the source stays pristine.
+            }
+
+            gsap.set(stage, { opacity: 1, y: "0cqh" });
+
+            var tl = gsap.timeline({
+              paused: true,
+              onUpdate: function () {
+                paint(tl.time());
+              },
+            });
+
+            // Anchor tween: spans the full authored duration so onUpdate
+            // (the canvas repaint) fires for every eventful seek in [0, D]
+            // and holds keep tl.time() honest.
+            tl.to({ t: 0 }, { t: 1, duration: duration, ease: "none" }, 0);
+
+            // HOLD: truly still (a(t) is constant past the ramp, the source
+            // raster never changes).
+
+            // OUT: optional departure; exit none holds until the frame cuts.
+            if (exit === "up") {
+              tl.to(stage, { y: "-4cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "fade") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            }
+
+            tl.seek(0);
+            paint(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["ordered-dither-pass"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/outline-draw/demo.html b/docs/public/catalog/components/outline-draw/demo.html
new file mode 100644
index 0000000000..23dfd645b9
--- /dev/null
+++ b/docs/public/catalog/components/outline-draw/demo.html
@@ -0,0 +1,118 @@
+<!doctype html>
+<!--
+  outline-draw demo. This standalone composition mounts outline-draw.html
+  through data-composition-src. The panel beneath the hollow overlay remains
+  visible, proving that the mask cuts out the center instead of covering it.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Outline Draw Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #05070d);
+      }
+
+      #root {
+        --bg: #05070d;
+        --surface: #131b2e;
+        --fg: #f8fafc;
+        --muted: #94a3b8;
+        --border: #334155;
+        --accent: #38bdf8;
+        --space-8: 8cqmin;
+        --radius-lg: 2.8cqmin;
+        --shadow-panel: 0 3.8cqh 8.4cqh rgb(0 0 0 / 45%);
+        --ease-standard: cubic-bezier(0.215, 0.61, 0.355, 1);
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 40%, var(--surface) 0%, var(--bg) 70%);
+      }
+
+      .mount-card {
+        width: 64%;
+        height: 56%;
+        left: 18%;
+        top: 22%;
+        container-type: size;
+        overflow: hidden;
+        border: 0.12cqmin solid color-mix(in srgb, var(--border) 75%, transparent);
+        border-radius: var(--radius-lg);
+        background: var(--surface);
+        box-shadow: var(--shadow-panel);
+      }
+
+      .mount-card::before {
+        content: "PROOF";
+        position: absolute;
+        inset: 0;
+        display: grid;
+        place-items: center;
+        color: var(--fg);
+        font-family: var(--font-display, Inter, system-ui, sans-serif);
+        font-size: 8cqh;
+        font-weight: 750;
+        letter-spacing: 0.08em;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="outline-draw-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="outline-draw-mount"
+        class="mount-card clip"
+        data-composition-id="outline-draw"
+        data-composition-src="./outline-draw.html"
+        data-variable-values='{"progress":100,"thickness":10,"radius":42}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="1229"
+        data-height="605"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["outline-draw-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "outline-draw.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/outline-draw/outline-draw.html b/docs/public/catalog/components/outline-draw/outline-draw.html
new file mode 100644
index 0000000000..538d6168f9
--- /dev/null
+++ b/docs/public/catalog/components/outline-draw/outline-draw.html
@@ -0,0 +1,173 @@
+<!doctype html>
+<!--
+  outline-draw: HyperFrames video primitive (effects / burst / prove)
+
+  Concept: a conic-gradient sector draws a rounded outline clockwise. Two
+  opaque masks, clipped to the padding box and border box, are excluded to
+  leave a true hollow center over whatever content is beneath the primitive.
+  One mechanic, one job: visually proving or certifying a framed claim.
+
+  Compiled-from evidence: OutlineDraw, "Border that draws with a composite
+  donut," from the CSS mask research notes.
+
+  Use when: closing a loop around proof, a selected product region, a logo
+  lockup, or a UI callout. Mount it over existing content. The center remains
+  transparent and the overlay never intercepts pointer input.
+
+  Variables:
+    - progress (number, 0 to 100, default 100): final drawn percentage.
+    - thickness (number, default 6): stroke in tenths of host cqw.
+    - radius (number, default 24): corner radius in tenths of host cqmin.
+
+  Envelope: fixed 0.80s IN draws the outline, elastic HOLD preserves the
+  completed proof, and fixed 0.40s OUT fades it. If duration is shorter than
+  1.20s, IN and OUT compress proportionally and HOLD becomes zero.
+
+  Sync point: draw-complete occurs at 0.80s into IN, scaled only when the
+  whole envelope is compressed. It never moves into the elastic HOLD.
+
+  Sound: none. A parent scene may place a static cue at draw-complete.
+
+  Mount contract: the runtime clones only this template. The root fills the
+  host box, owns the container query basis, has no intrinsic width or height,
+  and registers one paused timeline under the hardcoded outline-draw id.
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "progress", "type": "number", "role": "timing", "label": "Draw progress", "description": "Final percentage of the outline that is drawn.", "default": 100, "min": 0, "max": 100, "step": 1, "unit": "%" },
+    { "id": "thickness", "type": "number", "role": "layout", "label": "Stroke thickness", "description": "Outline stroke in tenths of the host width.", "default": 6, "min": 1, "max": 20, "step": 1, "unit": "0.1cqw" },
+    { "id": "radius", "type": "number", "role": "layout", "label": "Corner radius", "description": "Corner radius in tenths of the host smaller dimension.", "default": 24, "min": 0, "max": 80, "step": 1, "unit": "0.1cqmin" }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Outline Draw</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="outline-draw" data-duration="4" data-fps="30">
+        <style>
+          @property --od-progress {
+            syntax: "<number>";
+            inherits: false;
+            initial-value: 0;
+          }
+
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            pointer-events: none;
+          }
+
+          .od-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+          }
+
+          /* EDIT ZONE: --space-8 controls the safe inset. The public
+             thickness and radius variables own the remaining geometry. */
+          .od-outline {
+            --od-progress: 0;
+            --od-thickness: 6;
+            --od-radius: 24;
+            --od-seam-overlap: 0.5deg;
+            position: absolute;
+            inset: var(--space-8, 8cqmin);
+            border: calc(var(--od-thickness) * 0.1cqw) solid transparent;
+            border-radius: calc(var(--od-radius) * 0.1cqmin);
+            background: conic-gradient(
+              from -90deg,
+              var(--accent, #38bdf8) 0deg calc(var(--od-progress) * 3.6deg),
+              transparent calc(var(--od-progress) * 3.6deg + var(--od-seam-overlap)) 360deg
+            );
+            background-clip: border-box;
+            background-origin: border-box;
+            mask:
+              linear-gradient(var(--fg, #f8fafc) 0 0) padding-box,
+              linear-gradient(var(--fg, #f8fafc) 0 0) border-box;
+            mask-composite: exclude;
+            will-change: opacity;
+          }
+
+          /* INVARIANT: the 0.5deg feather overlaps the coincident conic
+             edges at closure so 0deg and 360deg never expose a hard seam. */
+        </style>
+
+        <div
+          id="outline-draw-clip"
+          class="od-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="od-outline" data-layout-ignore aria-hidden="true"></div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var outline = root.querySelector(".od-outline");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            // INVARIANT: invalid values return to declared defaults. Valid
+            // zero values survive because each scalar is checked explicitly.
+            var progressValue = Number(vars.progress);
+            var thicknessValue = Number(vars.thickness);
+            var radiusValue = Number(vars.radius);
+            var progress = Number.isFinite(progressValue)
+              ? Math.max(0, Math.min(100, progressValue))
+              : 100;
+            var thickness = Number.isFinite(thicknessValue)
+              ? Math.max(1, Math.min(20, thicknessValue))
+              : 6;
+            var radius = Number.isFinite(radiusValue) ? Math.max(0, Math.min(80, radiusValue)) : 24;
+
+            outline.style.setProperty("--od-thickness", String(thickness));
+            outline.style.setProperty("--od-radius", String(radius));
+
+            // RETIME RANGE: only these fixed envelope lengths may be tuned.
+            // HOLD is the sole elastic phase. Never use timeScale.
+            var IN_BASE = 0.8;
+            var OUT_BASE = 0.4;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var envelope = IN_BASE + OUT_BASE;
+            var scale = duration < envelope ? duration / envelope : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var OUT_START = IN + HOLD;
+
+            gsap.set(outline, { "--od-progress": 0, opacity: 1 });
+
+            var tl = gsap.timeline({ paused: true });
+            // --ease-standard maps to the production GSAP name power2.out.
+            // The registered scalar is tweened directly, with no proxy clock.
+            tl.to(outline, { "--od-progress": progress, duration: IN, ease: "power2.out" }, 0);
+            tl.to(outline, { opacity: 0, duration: OUT, ease: "power2.out" }, OUT_START);
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines["outline-draw"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/oversized-cursor/README.md b/docs/public/catalog/components/oversized-cursor/README.md
new file mode 100644
index 0000000000..6456b1223a
--- /dev/null
+++ b/docs/public/catalog/components/oversized-cursor/README.md
@@ -0,0 +1,36 @@
+# oversized-cursor
+
+An actor primitive: a deliberately oversized macOS-style pointer enters from off-screen, glides in one continuous vector to a caller-positioned target, taps it (the click visibly ignites the target), drifts aside during the dwell, then accelerates off-screen. One mechanic: a pointer-driven click that visibly causes something.
+
+4.2s authored, elastic HOLD; the cursor's own physical off-screen exit always plays (it is the mechanic).
+
+## Variables
+
+| id               | type       | default    | notes                                                                                                                                      |
+| ---------------- | ---------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
+| `cursor_variant` | enum       | `light`    | `light` (white body) or `dark` (near-black body); pick per scene contrast.                                                                 |
+| `target_x`       | number (%) | `55`       | Tip landing point, percent of the host box (15 to 85).                                                                                     |
+| `target_y`       | number (%) | `55`       | Tip landing point, percent of the host box (15 to 85).                                                                                     |
+| `click_label`    | string     | `Generate` | Label on the clicked target pill.                                                                                                          |
+| `exit`           | enum       | `none`     | `none` leaves the ignited target on screen until the cut; `fade`/`up` also depart the whole stage (target included) during the OUT window. |
+
+## Mount
+
+```html
+<div
+  class="clip"
+  data-composition-id="oversized-cursor"
+  data-composition-src="./oversized-cursor.html"
+  data-variable-values='{"target_x":62,"target_y":48,"click_label":"Render"}'
+  data-start="0"
+  data-duration="4.2"
+  data-track-index="0"
+></div>
+```
+
+Elastic root: no `data-width`/`data-height`; it fills whatever box the host clip gives it. Timeline registers under the literal `oversized-cursor` key.
+
+## Notes
+
+- Invariants: cursor size floor 7cqw; motion on transforms only (never left/top); ripple and click pivot anchor to the arrow tip at (21%, 14%) of the cursor box.
+- Sync point: the click lands at the end of the entry glide (a fixed offset into IN, never inside the elastic HOLD); route a soft UI click SFX there in the mix stage.
diff --git a/docs/public/catalog/components/oversized-cursor/demo.html b/docs/public/catalog/components/oversized-cursor/demo.html
new file mode 100644
index 0000000000..782d745024
--- /dev/null
+++ b/docs/public/catalog/components/oversized-cursor/demo.html
@@ -0,0 +1,117 @@
+<!doctype html>
+<!--
+  Oversized Cursor, standalone demo.
+
+  Mounts oversized-cursor.html as a sub-composition (data-composition-src) into a
+  dark host stage, instead of inlining its markup/style/script. Passing lint and
+  validate here, with the cursor visibly present in mid-motion snapshots, proves
+  the primitive satisfies the sub-composition mount contract (see
+  skills/hyperframes-core/references/sub-compositions.md).
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Oversized Cursor, Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        margin: 0;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+      }
+
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #05070c);
+        font-family: var(--font-body, Inter, system-ui, sans-serif);
+      }
+
+      .demo-frame {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 1280px;
+        height: 720px;
+        border-radius: 24px;
+        border: 1px solid var(--border, rgba(148, 163, 184, 0.25));
+        background: var(--surface, #0b0f16);
+        box-shadow: 0 40px 120px rgba(2, 6, 23, 0.55);
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="oversized-cursor-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4.2"
+    >
+      <div
+        id="demo-frame"
+        class="demo-frame clip"
+        data-start="0"
+        data-duration="4.2"
+        data-track-index="0"
+      ></div>
+
+      <div
+        class="clip"
+        id="oversized-cursor"
+        data-composition-id="oversized-cursor"
+        data-composition-src="./oversized-cursor.html"
+        data-variable-values='{"cursor_variant":"light","target_x":66,"target_y":42,"click_label":"Ship it"}'
+        data-start="0"
+        data-duration="4.2"
+        data-track-index="1"
+        data-width="1280"
+        data-height="720"
+        style="
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          width: 1280px;
+          height: 720px;
+        "
+      ></div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+      window.__timelines["oversized-cursor-demo"] = tl;
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "oversized-cursor.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/oversized-cursor/oversized-cursor.html b/docs/public/catalog/components/oversized-cursor/oversized-cursor.html
new file mode 100644
index 0000000000..c55b0e51e1
--- /dev/null
+++ b/docs/public/catalog/components/oversized-cursor/oversized-cursor.html
@@ -0,0 +1,422 @@
+<!doctype html>
+<!--
+  Oversized Cursor (actor primitive), mountable sub-composition
+
+  concept: a deliberately oversized macOS-style pointer that enters the frame
+  from off-screen, travels in one continuous glide to a target, taps it (the
+  click ignites a visible reaction on the target itself), drifts aside during
+  the dwell, then exits off-screen. One mechanic: a pointer-driven click that
+  visibly causes something. Family: pointers. Profile: interaction.
+
+  compiled-from: spec ready (oversized-cursor SKILL.md, ~/Downloads/oversized-cursor);
+  actor file mechanics compose (size/look, entry law, tip-targeting, click-ignition,
+  exit law).
+
+  use-when: kicking off a UI scene, igniting a morph/transition/typing run with a
+  causal click, or carrying the eye across a scene that would otherwise read as
+  static or stale.
+
+  mount contract: this file is a HyperFrames sub-composition, loaded by a host via
+  data-composition-src, never opened standalone. The runtime clones ONLY the
+  <template> contents into the host slot (see
+  skills/hyperframes-core/references/sub-compositions.md); everything outside
+  <template>, including this <head>, is discarded at render. The root is #root:
+  elastic, no data-width/data-height declared here, it fills whatever box the host
+  clip gives it (position:absolute; inset:0). See demo.html for the mount usage
+  (data-composition-src="./oversized-cursor.html" on a sized host clip).
+
+  variables:
+    cursor_variant (enum light|dark)  pointer fill/stroke pairing, pick per scene contrast
+    target_x, target_y (number, percent of the HOST box)  the tip's landing point
+    click_label (string)  label on the target the cursor clicks
+    exit (enum none|fade|up, default none)  optional whole-stage departure during
+      OUT; the cursor's own off-screen exit always plays (it is the mechanic)
+
+  envelope (of data-composition-duration, default 4.2s):
+    IN   0.00s to 1.17s (fixed)     off-screen entry glide (0.85s) then click tap (0.32s)
+    HOLD 1.17s to D-0.60s (elastic) click ignition plays, cursor drifts aside, then dwells
+    OUT  D-0.60s to D (fixed)       cursor accelerates off-screen; with exit fade|up the
+                                    whole stage (target included) also departs
+
+  sound: one click tap SFX (soft UI click) fires at the click moment, the fixed
+  offset into IN documented below as SYNC POINT. This file never plays audio: it
+  only marks the cue's timing for the mix stage to pick up.
+-->
+<html
+  lang="en"
+  data-composition-id="oversized-cursor"
+  data-composition-duration="4.2"
+  data-composition-variables='[
+    { "id": "cursor_variant", "type": "enum", "role": "style", "label": "Cursor fill", "default": "light", "options": [ { "value": "light", "label": "Light (white body)" }, { "value": "dark", "label": "Dark (near-black body)" } ] },
+    { "id": "target_x", "type": "number", "role": "layout", "label": "Target X", "default": 55, "min": 15, "max": 85, "step": 1, "unit": "%" },
+    { "id": "target_y", "type": "number", "role": "layout", "label": "Target Y", "default": 55, "min": 15, "max": 85, "step": 1, "unit": "%" },
+    { "id": "click_label", "type": "string", "role": "content", "label": "Click label", "default": "Generate" },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional whole-stage departure. Default none: the ignited target stays until the frame cuts.", "default": "none", "options": [ { "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" } ] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Oversized Cursor</title>
+    <!-- head is metadata for the source file only; the runtime discards it on mount -->
+  </head>
+  <body>
+    <template>
+      <style>
+        *,
+        *::before,
+        *::after {
+          box-sizing: border-box;
+        }
+
+        /* Root is styled by #root, never a class: the compositor scopes CSS to
+           [data-composition-id="oversized-cursor"] as a descendant selector, so a
+           rule keyed on the root's own class would never match the root itself.
+
+           Elastic and position-blind: fills whatever box the host slot gives it
+           (inset:0), owns its own stacking + container-query context, no
+           position:fixed anywhere in this file. */
+        #root {
+          position: absolute;
+          inset: 0;
+          overflow: hidden;
+          isolation: isolate;
+          container-type: size;
+          container-name: oc-stage;
+          font-family: var(--font-body, Inter, system-ui, sans-serif);
+        }
+
+        .oc-stage {
+          position: absolute;
+          inset: 0;
+          /* Transparent by design: this actor overlays whatever scene it is
+             dropped into. demo.html supplies its own backdrop around it. */
+        }
+
+        /* EDIT ZONE: target look. Safe to retheme via tokens; keep it a simple,
+           legible UI surface so the click reaction reads clearly. */
+        .oc-target {
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          display: flex;
+          align-items: center;
+          gap: var(--space-1, 0.6cqw);
+          padding: var(--space-2, 1.5cqw) var(--space-3, 2.4cqw);
+          border-radius: var(--radius, 999px);
+          border: 1px solid var(--border, rgba(148, 163, 184, 0.35));
+          background: color-mix(
+            in srgb,
+            var(--surface, #f8fafc) calc((1 - var(--oc-ignite, 0)) * 100%),
+            var(--brand, #52525b) calc(var(--oc-ignite, 0) * 100%)
+          );
+          box-shadow: 0 1.2cqw 3.2cqw rgba(2, 6, 23, 0.24);
+          --oc-ignite: 0;
+          z-index: 10;
+        }
+
+        .oc-target-check {
+          width: 1.8cqw;
+          height: 1.8cqw;
+          min-width: 14px;
+          min-height: 14px;
+          flex: none;
+          fill: none;
+          stroke: var(--fg, #ffffff);
+          stroke-width: 2.4;
+          stroke-linecap: round;
+          stroke-linejoin: round;
+          opacity: clamp(0, var(--oc-ignite, 0), 1);
+          transform: scale(calc(0.5 + var(--oc-ignite, 0) * 0.5));
+        }
+
+        .oc-target-label {
+          font-size: clamp(12px, 1.7cqw, 30px);
+          font-weight: 650;
+          line-height: 1;
+          white-space: nowrap;
+          color: color-mix(
+            in srgb,
+            var(--fg, #0f172a) calc((1 - var(--oc-ignite, 0)) * 100%),
+            var(--fg, #ffffff) calc(var(--oc-ignite, 0) * 100%)
+          );
+        }
+
+        /* INVARIANT: cursor size floor is 7cqw for full-frame scenes (house
+           convention). Never go smaller; an actual-size cursor disappears at
+           video scale. */
+        .oc-cursor {
+          position: absolute;
+          left: 0;
+          top: 0;
+          width: 7cqw;
+          height: 7cqw;
+          min-width: 34px;
+          min-height: 34px;
+          pointer-events: none;
+          will-change: transform;
+          filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
+          z-index: 20;
+        }
+
+        .oc-cursor-svg {
+          display: block;
+          width: 100%;
+          height: 100%;
+          stroke-linejoin: round;
+          stroke-linecap: round;
+        }
+
+        /* EDIT ZONE: the two house-convention fill pairings. Pick per scene
+           contrast, keep it constant per film. */
+        .oc-cursor[data-variant="light"] .oc-cursor-svg {
+          fill: #ffffff;
+          stroke: #141414;
+          stroke-width: 1.4;
+        }
+        .oc-cursor[data-variant="dark"] .oc-cursor-svg {
+          fill: #1c1c1c;
+          stroke: #ffffff;
+          stroke-width: 1.4;
+        }
+
+        /* INVARIANT: ripple anchors to the arrow's tip point (21%, 14% of the
+           cursor box), the same point transformOrigin pivots the click tap on. */
+        .oc-ripple {
+          position: absolute;
+          left: 21%;
+          top: 14%;
+          width: 2.6cqw;
+          height: 2.6cqw;
+          min-width: 12px;
+          min-height: 12px;
+          border-radius: 999px;
+          border: 0.24cqw solid color-mix(in srgb, var(--fg, #ffffff) 45%, transparent);
+          transform: translate(-50%, -50%);
+          opacity: 0;
+        }
+      </style>
+
+      <div id="root" data-composition-id="oversized-cursor" data-duration="4.2">
+        <div class="oc-stage">
+          <div class="oc-target" id="oc-target">
+            <svg class="oc-target-check" viewBox="0 0 24 24" aria-hidden="true">
+              <path d="M5 13l4 4L19 7" />
+            </svg>
+            <span class="oc-target-label" id="oc-target-label"></span>
+          </div>
+          <div class="oc-cursor" id="oc-cursor" data-variant="light" aria-hidden="true">
+            <div class="oc-ripple"></div>
+            <svg class="oc-cursor-svg" viewBox="0 0 24 24" aria-hidden="true">
+              <path d="M5 3 L5 19 L9 15 L12 22 L15 20.5 L11.5 14 L18 14 Z" />
+            </svg>
+          </div>
+        </div>
+      </div>
+
+      <script>
+        (function () {
+          "use strict";
+
+          // NOTE: once mounted, document.documentElement is the HOST page's
+          // root element, not this file's own (the mount contract discards
+          // this file's head and html elements after the loader reads declared
+          // variables/duration once, before cloning). html.getAttribute(...)
+          // below therefore resolves to null under mount, and every read
+          // falls through to its inline default (55 / 55 / "Generate" /
+          // "light"), which match this file's own declared defaults above.
+          var html = document.documentElement;
+          var root = document.getElementById("root");
+          var cursor = document.getElementById("oc-cursor");
+          var ripple = cursor.querySelector(".oc-ripple");
+          var target = document.getElementById("oc-target");
+          var targetLabel = document.getElementById("oc-target-label");
+
+          // Declared defaults, then the render/preview engine's override object.
+          var DEFAULTS = {};
+          try {
+            JSON.parse(html.getAttribute("data-composition-variables") || "[]").forEach(
+              function (variable) {
+                DEFAULTS[variable.id] = variable.default;
+              },
+            );
+          } catch (error) {
+            /* malformed declaration falls back to hardcoded defaults below */
+          }
+          // Under mount, the runtime resolves this file's own declared
+          // variables merged with the host clip's per-instance
+          // data-variable-values through a scoped window.__hyperframes,
+          // shadowed in just for this file's script. window.__hfVariables
+          // stays in the merge too, as a raw fallback for the (non-mount)
+          // case where this file is driven by an older render/preview path.
+          var scopedVariables = {};
+          try {
+            if (window.__hyperframes && typeof window.__hyperframes.getVariables === "function") {
+              scopedVariables = window.__hyperframes.getVariables() || {};
+            }
+          } catch (error) {
+            /* no scoped variables API in this context, fall through */
+          }
+          var vars = Object.assign({}, DEFAULTS, window.__hfVariables || {}, scopedVariables);
+
+          function clampPercent(value, fallback) {
+            var n = Number(value);
+            if (!isFinite(n)) n = fallback;
+            return Math.max(0, Math.min(100, n));
+          }
+
+          // Hardcoded per the mount contract: deriving the id from the document
+          // returns null once the compositor rewrites the wrapper's attributes,
+          // which registers the timeline under "null" and breaks seek binding.
+          var compositionId = "oversized-cursor";
+          var duration = Math.max(
+            0.001,
+            parseFloat(
+              root.dataset.duration || html.getAttribute("data-composition-duration") || "4.2",
+            ),
+          );
+          var variant = vars.cursor_variant === "dark" ? "dark" : "light";
+          var targetX = clampPercent(vars.target_x, 55);
+          var targetY = clampPercent(vars.target_y, 55);
+          var clickLabel = String(vars.click_label || "Generate");
+          var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+          var stage = root.querySelector(".oc-stage");
+
+          cursor.setAttribute("data-variant", variant);
+          targetLabel.textContent = clickLabel;
+          target.style.left = targetX + "%";
+          target.style.top = targetY + "%";
+
+          // Motion runs on transforms only (x/y px), never left/top: layout
+          // props snap to integer device pixels under the seek-by-frame
+          // capture engine and stutter on slow/eased motion. Stage size is
+          // read once, synchronously, at load (deterministic: fixed viewport
+          // per render, no resize mid-render) to convert the percent-based
+          // target/off-screen positions (percent of the HOST box, not a fixed
+          // 1920 stage) into the px x/y GSAP needs.
+          var stageW = root.clientWidth || 1920;
+          var stageH = root.clientHeight || 1080;
+          function xAt(percent) {
+            return (percent / 100) * stageW;
+          }
+          function yAt(percent) {
+            return (percent / 100) * stageH;
+          }
+
+          // Tip-targeting: the arrow's visual tip sits at (21%, 14%) inside the
+          // cursor's own box. Anchor the box by that offset once, up front, so
+          // every later x/y tween places the TIP (not the box corner) at the
+          // given stage position. Never tween xPercent/yPercent.
+          gsap.set(cursor, { xPercent: -21, yPercent: -14 });
+          gsap.set(target, { xPercent: -50, yPercent: -50, scale: 1 });
+
+          // RETIME RANGE: IN/OUT are fixed durations (house convention: entry
+          // glide 0.4-0.92s + click tap 0.32s). They only shrink, proportionally,
+          // if the composition duration is too short to hold IN + OUT at all.
+          var IN_BASE = 1.17; // 0.85s glide + 0.1s compress + 0.22s expand
+          var OUT_BASE = 0.6;
+          var totalBase = IN_BASE + OUT_BASE;
+          var IN = IN_BASE;
+          var OUT = OUT_BASE;
+          if (duration < totalBase) {
+            var shrink = duration / totalBase;
+            IN = IN_BASE * shrink;
+            OUT = OUT_BASE * shrink;
+          }
+          var HOLD = Math.max(0, duration - (IN + OUT));
+          var OUT_AT = IN + HOLD;
+          var shrinkFactor = IN / IN_BASE;
+
+          var glideDur = 0.85 * shrinkFactor;
+          var clickInDur = 0.1 * shrinkFactor;
+          var clickOutDur = 0.22 * shrinkFactor;
+          // SYNC POINT: click moment (entry settle), a fixed offset into IN,
+          // never inside the elastic HOLD.
+          var CLICK_AT = glideDur;
+
+          var offX = xAt(48);
+          var offY = yAt(116); // resting pose IS off-screen, below the stage
+
+          var tl = gsap.timeline({ paused: true });
+
+          // ---- IN: off-screen entry, one continuous vector, then the tap ----
+          tl.set(cursor, { scale: 1 });
+          tl.set(ripple, { opacity: 0, scale: 0.4 });
+          tl.set(target, { "--oc-ignite": 0 });
+          tl.fromTo(
+            cursor,
+            { x: offX, y: offY },
+            { x: xAt(targetX), y: yAt(targetY), duration: glideDur, ease: "power3.out" },
+            0,
+          );
+          tl.to(
+            cursor,
+            { scale: 0.84, duration: clickInDur, ease: "power2.in", transformOrigin: "21% 14%" },
+            CLICK_AT,
+          );
+          tl.to(
+            cursor,
+            { scale: 1, duration: clickOutDur, ease: "power2.out", transformOrigin: "21% 14%" },
+            CLICK_AT + clickInDur,
+          );
+
+          // ---- the click ignites the target: parallel reaction, same frame ----
+          tl.to(target, { scale: 0.94, duration: clickInDur, ease: "power2.in" }, CLICK_AT);
+          tl.to(
+            target,
+            { scale: 1, duration: clickOutDur, ease: "power2.out" },
+            CLICK_AT + clickInDur,
+          );
+          tl.fromTo(
+            ripple,
+            { opacity: 0.85, scale: 0.4 },
+            { opacity: 0, scale: 2.4, duration: 0.42, ease: "power2.out" },
+            CLICK_AT + clickInDur,
+          );
+          tl.to(
+            target,
+            { "--oc-ignite": 1, duration: 0.34, ease: "back.out(2.2)" },
+            CLICK_AT + clickInDur,
+          );
+
+          // ---- HOLD (elastic): drift aside once, then dwell, never wobble ----
+          var driftDelay = Math.min(0.22, HOLD * 0.3);
+          var driftDur = Math.max(0, Math.min(0.7, HOLD - driftDelay));
+          if (driftDur > 0.05) {
+            var asideX = clampPercent(targetX + (targetX < 50 ? 16 : -16), targetX);
+            var asideY = clampPercent(targetY + 10, targetY);
+            tl.to(
+              cursor,
+              {
+                x: xAt(asideX),
+                y: yAt(asideY),
+                duration: driftDur,
+                ease: "power2.out",
+                overwrite: "auto",
+              },
+              IN + driftDelay,
+            );
+          }
+
+          // ---- OUT: leave the frame, physically, never a fade-in-place ----
+          tl.to(
+            cursor,
+            { y: yAt(120), duration: OUT, ease: "power2.in", overwrite: "auto" },
+            OUT_AT,
+          );
+
+          // Optional whole-stage departure on top of the cursor's own exit;
+          // exit none leaves the ignited target until the frame cuts.
+          if (exit === "fade") {
+            tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_AT);
+          } else if (exit === "up") {
+            tl.to(stage, { opacity: 0, y: "-4cqh", duration: OUT, ease: "power2.in" }, OUT_AT);
+          }
+
+          tl.seek(0);
+          window.__timelines = window.__timelines || {};
+          window.__timelines[compositionId] = tl;
+        })();
+      </script>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/overwhelm-surround/demo.html b/docs/public/catalog/components/overwhelm-surround/demo.html
new file mode 100644
index 0000000000..736ffda31c
--- /dev/null
+++ b/docs/public/catalog/components/overwhelm-surround/demo.html
@@ -0,0 +1,114 @@
+<!doctype html>
+<!--
+  overwhelm-surround: demo. Standalone 1920x1080 composition that MOUNTS the
+  primitive at registry/components/overwhelm-surround/overwhelm-surround.html
+  via data-composition-src instead of inlining it. The dark token-themed stage
+  hosts the effect in a 60%-of-frame card centered in the composition.
+  data-variable-values carries deliberately non-default overrides for count,
+  centerLabel, and intensity so preview tooling proves every variable flows
+  through the mount. This file passing lint, validate, and snapshot proves the
+  mount contract holds. Kept in sync with overwhelm-surround.html by hand and
+  not installed by `hyperframes add`.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Overwhelm Surround - Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #05070d;
+      }
+
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 40%, #0d1526 0%, #05070d 70%);
+      }
+
+      /* The 60%-of-frame card gives the mounted primitive a definite CSS box.
+         The mounted internals size from cqw/cqh, and a shrink-to-fit host can
+         otherwise collapse under size containment. data-width/data-height
+         stay in sync below for tooling that reads per-instance dimensions. */
+      .mount-card {
+        --bg: #101827;
+        --fg: #f8fafc;
+        --surface: #1e293b;
+        --brand: #f97316;
+        --accent: #38bdf8;
+        --border: #475569;
+        --muted: #94a3b8;
+        width: 60%;
+        height: 60%;
+        left: 20%;
+        top: 20%;
+        border-radius: 32px;
+        border: 1px solid rgba(148, 163, 184, 0.24);
+        box-shadow: 0 44px 110px rgba(0, 0, 0, 0.48);
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="overwhelm-surround-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4.5"
+      data-fps="30"
+    >
+      <div
+        id="overwhelm-surround-mount"
+        class="mount-card clip"
+        data-composition-id="overwhelm-surround"
+        data-composition-src="./overwhelm-surround.html"
+        data-variable-values='{"count":22,"centerLabel":"Focus","intensity":1.7}'
+        data-start="0"
+        data-duration="4.5"
+        data-track-index="0"
+        data-width="1152"
+        data-height="648"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      // No motion of its own: this demo is a static host for the mounted
+      // primitive, which owns and registers its own timeline. Register an
+      // empty paused timeline under this file's own composition id so the
+      // runtime timeline-registry check is satisfied without inventing motion.
+      window.__timelines = window.__timelines || {};
+      window.__timelines["overwhelm-surround-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "overwhelm-surround.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/overwhelm-surround/overwhelm-surround.html b/docs/public/catalog/components/overwhelm-surround/overwhelm-surround.html
new file mode 100644
index 0000000000..cf45980bea
--- /dev/null
+++ b/docs/public/catalog/components/overwhelm-surround/overwhelm-surround.html
@@ -0,0 +1,374 @@
+<!doctype html>
+<!--
+  overwhelm-surround: HyperFrames video primitive (effects / holdable / agitate)
+
+  Concept: tasks, tabs, pings, and notification bubbles fly inward from every
+  edge and crowd a calm central subject. Pressure is spatial: the still center
+  keeps the accumulating chaos legible. One mechanic, one job: agitate by
+  surrounding the subject with too much at once.
+
+  Compiled-from evidence: SIM fixture; CORPUS blueprint.
+
+  Use when: a scene needs to show overload, mounting demands, notification
+  pressure, or attention fragmentation while keeping one person or idea clear.
+
+  Variables (declared in data-composition-variables below):
+    - count (number, default 16): number of incoming chips, clamped to 8 through
+      24. Higher values make the peak crowd visibly fuller.
+    - centerLabel (string, default "You"): text inside the still subject. An
+      empty string hides the text while preserving the subject shape.
+    - intensity (number, default 1): pressure level, clamped to 0.5 through 2.
+      Higher values pull the resting rings inward and shorten travel time.
+
+  Envelope (fixed IN/OUT, elastic HOLD only, never gsap.timeScale()):
+    IN_BASE  = 2.20s  indexed arrivals accelerate as the crowd closes in
+    HOLD     = elastic = max(0, D - (IN_BASE + OUT_BASE)); the complete crowd
+               deliberately freezes around the still center at peak density
+    OUT_BASE = 0.50s  the whole pressure field releases in a clean fade
+    If D < IN_BASE + OUT_BASE, IN and OUT scale down together so IN + OUT == D
+    and HOLD == 0.
+
+  Sync points: none. The accelerating cascade is the complete mechanic.
+
+  Sound cue: none. This primitive does not dispatch audio events.
+
+  Mount contract: this file is a MOUNTABLE SUB-COMPOSITION, not a standalone
+  composition. A host loads it via data-composition-src; the runtime only
+  clones <template> contents (everything outside <template>, including the
+  entire <head>, is discarded on mount), see
+  skills/hyperframes-core/references/sub-compositions.md. The root carries no
+  data-width/data-height: it is elastic, sized off whatever box the host clip
+  gives it (position:absolute; inset:0; container-type:size), so the effect
+  reads correctly whether the host mounts it into a 960x540 slot or a full
+  1920x1080 frame. The root is styled by #root, never a class: composited
+  renders scope this file's CSS to [data-composition-id="overwhelm-surround"],
+  and a rule keyed on the root's own class would stop matching the root itself
+  (sub-compositions.md, Pitfall 3). Variables are read via
+  window.__hyperframes.getVariables() (not by parsing this file's own <html>
+  tag at runtime): once mounted, document.documentElement is the HOST's <html>,
+  so the loader's declared-defaults-plus-per-instance-overrides table is the
+  only reliable source once the primitive is running inside a host page.
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "count", "type": "number", "role": "content", "label": "Chip count", "description": "Number of tasks and notifications crowding the center.", "default": 16, "min": 8, "max": 24, "step": 1 },
+    { "id": "centerLabel", "type": "string", "role": "content", "label": "Center label", "description": "Text inside the calm central subject. Blank hides the text.", "default": "You" },
+    { "id": "intensity", "type": "number", "role": "layout", "label": "Intensity", "description": "How tightly and quickly the chips crowd the center.", "default": 1, "min": 0.5, "max": 2, "step": 0.1 }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Overwhelm Surround</title>
+    <!-- Metadata only for whoever opens this file directly: the runtime
+         discards everything outside <template> on mount. The
+         data-composition-variables attribute above stays on <html> (not
+         inside <template>): the loader reads declared variable defaults
+         directly off the fetched document's root element, whether or not
+         the body is template-wrapped. -->
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="overwhelm-surround" data-duration="4.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          /* Root: sized off the HOST box, never a fixed stage. inset:0 fills
+             whatever box the host clip gives it. container-type establishes
+             the cqw/cqh basis for every internal measurement below. Styled by
+             #root, never a class, see the mount-contract note above. */
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            background: var(--bg, #0b1120);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+          }
+
+          .os-clip {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+          }
+
+          .os-crowd {
+            position: absolute;
+            inset: 0;
+            z-index: 2;
+          }
+
+          .os-chip {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            min-width: clamp(7cqw, 9.5cqw, 12cqw);
+            min-height: clamp(5.5cqh, 7cqh, 9cqh);
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            gap: var(--space-1, 1cqw);
+            padding: var(--space-2, 1.4cqh) var(--space-3, 2cqw);
+            border: 0.14cqw solid color-mix(in srgb, var(--border, #334155) 72%, transparent);
+            border-radius: clamp(1.4cqw, 2.4cqw, 3.2cqw);
+            background: color-mix(in srgb, var(--surface, #1e293b) 94%, var(--bg, #0b1120));
+            color: var(--fg, #f8fafc);
+            box-shadow:
+              0 0.8cqh 2.4cqh color-mix(in srgb, var(--bg, #0b1120) 48%, transparent),
+              inset 0 0 0 0.08cqw color-mix(in srgb, var(--fg, #f8fafc) 6%, transparent);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: clamp(1.8cqw, 2.4cqw, 3.2cqw);
+            font-weight: 700;
+            letter-spacing: 0.01em;
+            line-height: 1;
+            white-space: nowrap;
+            transform-origin: 50% 50%;
+            will-change: transform, opacity;
+          }
+
+          .os-chip::before {
+            content: "";
+            width: clamp(1.2cqw, 1.7cqw, 2.2cqw);
+            aspect-ratio: 1;
+            flex: 0 0 auto;
+            border-radius: 50%;
+            background: var(--accent, #38bdf8);
+            box-shadow: 0 0 1.5cqw color-mix(in srgb, var(--accent, #38bdf8) 62%, transparent);
+          }
+
+          .os-chip[data-kind="alert"] {
+            border-color: color-mix(in srgb, var(--brand, #22c55e) 62%, var(--border, #334155));
+          }
+
+          .os-chip[data-kind="alert"]::before {
+            background: var(--brand, #22c55e);
+            box-shadow: 0 0 1.5cqw color-mix(in srgb, var(--brand, #22c55e) 62%, transparent);
+          }
+
+          .os-chip[data-kind="ping"] {
+            border-radius: 50%;
+            min-width: clamp(6cqw, 7.5cqw, 9cqw);
+            min-height: auto;
+            aspect-ratio: 1;
+            padding: var(--space-2, 1.4cqh);
+            color: var(--accent, #38bdf8);
+          }
+
+          .os-chip[data-kind="ping"]::before {
+            display: none;
+          }
+
+          .os-center {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            z-index: 5;
+            width: clamp(13cqw, 16cqw, 20cqw);
+            aspect-ratio: 1.4 / 1;
+            display: grid;
+            place-items: center;
+            border: 0.2cqw solid
+              color-mix(in srgb, var(--accent, #38bdf8) 78%, var(--border, #334155));
+            border-radius: clamp(2.2cqw, 3.4cqw, 4.5cqw);
+            background: var(--surface, #1e293b);
+            color: var(--fg, #f8fafc);
+            box-shadow:
+              0 0 0 0.75cqw color-mix(in srgb, var(--bg, #0b1120) 82%, transparent),
+              0 1.2cqh 3.8cqh color-mix(in srgb, var(--accent, #38bdf8) 22%, transparent);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: clamp(2.5cqw, 3.6cqw, 4.8cqw);
+            font-weight: 760;
+            letter-spacing: -0.02em;
+            line-height: 1;
+            text-align: center;
+            transform: translate(-50%, -50%);
+          }
+
+          .os-center-label:empty {
+            display: none;
+          }
+        </style>
+
+        <div
+          id="overwhelm-surround-clip"
+          class="os-clip clip"
+          data-start="0"
+          data-duration="4.5"
+          data-track-index="0"
+        >
+          <div class="os-crowd" aria-hidden="true"></div>
+          <div class="os-center" data-anchor="overwhelm-surround">
+            <span class="os-center-label"></span>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            // Literal, not read off the DOM: once mounted, the framework's
+            // flattening step strips data-composition-id from the mounted
+            // root (see FLATTENED_INNER_ROOT_STRIP_ATTRS in
+            // packages/core/src/runtime/flattenedRoot.ts), so
+            // root.getAttribute("data-composition-id") would read null post-
+            // mount and silently register the timeline under the key "null"
+            // instead of "overwhelm-surround". Matches the convention in
+            // sub-compositions.md and empty.html: hardcode the id this file is
+            // always mounted under.
+            var compositionId = "overwhelm-surround";
+            var clipEl = root.querySelector(".os-clip");
+            var crowdEl = root.querySelector(".os-crowd");
+            var centerEl = root.querySelector(".os-center");
+            var centerLabelEl = root.querySelector(".os-center-label");
+
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            // INVARIANT: one clamped value owns each visual decision. Empty
+            // centerLabel remains distinct from a missing value.
+            var countValue = Number(vars.count);
+            var count = Math.round(
+              Math.max(8, Math.min(24, Number.isFinite(countValue) ? countValue : 16)),
+            );
+            var centerLabel = vars.centerLabel == null ? "You" : String(vars.centerLabel);
+            var intensityValue = Number(vars.intensity);
+            var intensity = Math.max(
+              0.5,
+              Math.min(2, Number.isFinite(intensityValue) ? intensityValue : 1),
+            );
+
+            centerLabelEl.textContent = centerLabel;
+
+            var labels = [
+              "Inbox",
+              "99+",
+              "Due",
+              "@you",
+              "ASAP",
+              "12",
+              "Review",
+              "!",
+              "Call",
+              "3 pings",
+              "Sync",
+              "Today",
+              "Reply",
+              "8 tabs",
+              "Update",
+              "Now",
+              "Draft",
+              "4 alerts",
+              "Fix",
+              "Follow up",
+              "Queue",
+              "2 min",
+              "Waiting",
+              "+7",
+            ];
+            var chips = [];
+
+            for (var i = 0; i < count; i += 1) {
+              var chip = document.createElement("div");
+              chip.className = "os-chip";
+              chip.dataset.kind = i % 5 === 1 ? "ping" : i % 3 === 0 ? "alert" : "task";
+              chip.textContent = labels[i];
+              crowdEl.appendChild(chip);
+              chips.push(chip);
+            }
+
+            // RETIME RANGE: these constants own global phase pacing. HOLD is
+            // the only elastic phase. IN and OUT scale together only when the
+            // composition duration is shorter than their combined base time.
+            var IN_BASE = 2.2;
+            var OUT_BASE = 0.5;
+            var TRAVEL_BASE = 0.54;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4.5"));
+            var totalBase = IN_BASE + OUT_BASE;
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var OUT_START = IN + HOLD;
+            var travelDuration = Math.min(IN, (TRAVEL_BASE * scale) / Math.sqrt(intensity));
+            var arrivalSpan = Math.max(0, IN - travelDuration);
+            var arrivalPower = 1.7 + intensity * 0.45;
+            var pressure = (intensity - 0.5) / 1.5;
+
+            // Explicit both-endpoints state (gsap.set, never gsap.from()) so a
+            // seek to t=0 is always correct without playing the timeline.
+            gsap.set(centerEl, { xPercent: -50, yPercent: -50, opacity: 1, scale: 1 });
+            gsap.set(clipEl, { opacity: 1 });
+
+            var tl = gsap.timeline({ paused: true });
+
+            chips.forEach(function (chip, index) {
+              // Even angular distribution keeps every count deterministic and
+              // balanced. Index-derived banding creates a compact cluster
+              // without any random state.
+              var angle = -Math.PI / 2 + (Math.PI * 2 * index) / count;
+              var directionX = Math.cos(angle);
+              var directionY = Math.sin(angle);
+              var edgeScale = 0.64 / Math.max(Math.abs(directionX), Math.abs(directionY));
+              var entryX = directionX * edgeScale * 100;
+              var entryY = directionY * edgeScale * 100;
+              var band = ((index * 5) % 7) / 6;
+              var radiusX = 27 + band * 9 - pressure * (12 + band * 6);
+              var radiusY = 25 + band * 10 - pressure * (11 + band * 6);
+              var restX = directionX * radiusX;
+              var restY = directionY * radiusY;
+              var progress = index / (count - 1);
+              var arrivalT = arrivalSpan * (1 - Math.pow(1 - progress, arrivalPower));
+              var restRotation = ((index * 29) % 17) - 8;
+
+              gsap.set(chip, {
+                x: entryX + "cqw",
+                y: entryY + "cqh",
+                xPercent: -50,
+                yPercent: -50,
+                scale: 0.94,
+                opacity: 0,
+                rotation: restRotation * 1.8,
+              });
+
+              tl.to(
+                chip,
+                {
+                  x: restX + "cqw",
+                  y: restY + "cqh",
+                  scale: 1,
+                  opacity: 1,
+                  rotation: restRotation,
+                  duration: travelDuration,
+                  ease: "power2.out",
+                },
+                arrivalT,
+              );
+            });
+
+            // HOLD: the peak-density crowd is deliberately still. The calm
+            // center remains unchanged, making the surrounding pressure easy
+            // to read even at the highest count and intensity.
+
+            tl.to(clipEl, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/page-slide/__hf-variables-preview.html b/docs/public/catalog/components/page-slide/__hf-variables-preview.html
new file mode 100644
index 0000000000..e1c8619f28
--- /dev/null
+++ b/docs/public/catalog/components/page-slide/__hf-variables-preview.html
@@ -0,0 +1,86 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Page Slide variables preview</title>
+    <style>
+      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #f5f5f4; }
+      #hf-vars-root { position: relative; width: 1920px; height: 1080px; }
+      #hf-vars-mount { position: absolute; inset: 0; display: grid; place-items: center; }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  </head>
+  <body>
+    <div id="hf-vars-root" data-composition-id="page-slide-variables-preview" data-start="0" data-width="1920" data-height="1080" data-duration="5" data-fps="30">
+      <div id="hf-vars-mount" class="clip" data-composition-id="page-slide" data-composition-src="./page-slide.html" data-start="0" data-duration="5" data-track-index="0" data-width="1920" data-height="1080"></div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["page-slide-variables-preview"] = gsap.timeline({ paused: true });
+    </script>
+    <script>
+      (function () {
+        var mount = document.getElementById("hf-vars-mount");
+        // The mount is filled asynchronously, and the demo script selects
+        // what it fills it with, so it cannot run before then.
+        var observer = new MutationObserver(build);
+        observer.observe(mount, { childList: true, subtree: true });
+        build();
+        function build() {
+          if (!mount.firstElementChild) return;
+          observer.disconnect();
+
+        const tl = gsap.timeline({ paused: true });
+        tl.fromTo(
+          ".hf-transition-page-slide",
+          { opacity: 0, y: 24 },
+          { opacity: 1, y: 0, duration: 0.3, ease: "power2.out" },
+          0.25,
+        );
+        tl.fromTo(
+          ".hf-transition-page.new",
+          { xPercent: 100 },
+          { xPercent: 0, duration: 0.74, ease: "power3.inOut" },
+          0.78,
+        );
+        tl.to(
+          ".hf-transition-page.old",
+          { xPercent: -28, scale: 0.94, duration: 0.74, ease: "power3.inOut" },
+          0.78,
+        );
+        tl.fromTo(
+          ".hf-transition-page.new span",
+          { y: 24, opacity: 0 },
+          { y: 0, opacity: 1, duration: 0.28, ease: "power2.out" },
+          1.24,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["page-slide-demo"] = tl;
+          var child = window.__timelines["page-slide-demo"];
+          delete window.__timelines["page-slide-demo"];
+          if (!child || typeof child.paused !== "function") return;
+          child.paused(false);
+          window.__timelines["page-slide-variables-preview"].add(child, 0);
+        }
+      })();
+    </script>
+<script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "page-slide.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/page-slide/demo.html b/docs/public/catalog/components/page-slide/demo.html
new file mode 100644
index 0000000000..52b3232a9e
--- /dev/null
+++ b/docs/public/catalog/components/page-slide/demo.html
@@ -0,0 +1,131 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Page Slide - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f5f5f4;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        min-width: 760px;
+        min-height: 480px;
+        padding: 56px;
+        /* ponytail: scale wrapper (not the GSAP target) to fill ~63% of frame */
+        transform: scale(2.2);
+        transform-origin: center center;
+      }
+      .hf-transition-page-slide {
+        position: relative;
+        width: 560px;
+        height: 320px;
+        overflow: hidden;
+        border-radius: 30px;
+        background: #111827;
+        box-shadow: 0 28px 90px rgba(0, 0, 0, 0.22);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-transition-page {
+        position: absolute;
+        inset: 0;
+        display: grid;
+        place-items: center;
+      }
+      .hf-transition-page span {
+        padding: 14px 20px;
+        border-radius: 999px;
+        background: rgba(255, 255, 255, 0.14);
+        color: #ffffff;
+        font-size: 28px;
+        font-weight: 900;
+      }
+      .hf-transition-page.old {
+        background: linear-gradient(135deg, #0f172a, #334155);
+      }
+      .hf-transition-page.new {
+        background: linear-gradient(135deg, #155e75, #10b981);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="page-slide-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-transition-page-slide">
+          <section class="hf-transition-page old"><span>Dashboard</span></section>
+          <section class="hf-transition-page new"><span>Analytics</span></section>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        tl.fromTo(
+          ".hf-transition-page-slide",
+          { opacity: 0, y: 24 },
+          { opacity: 1, y: 0, duration: 0.3, ease: "power2.out" },
+          0.25,
+        );
+        tl.fromTo(
+          ".hf-transition-page.new",
+          { xPercent: 100 },
+          { xPercent: 0, duration: 0.74, ease: "power3.inOut" },
+          0.78,
+        );
+        tl.to(
+          ".hf-transition-page.old",
+          { xPercent: -28, scale: 0.94, duration: 0.74, ease: "power3.inOut" },
+          0.78,
+        );
+        tl.fromTo(
+          ".hf-transition-page.new span",
+          { y: 24, opacity: 0 },
+          { y: 0, opacity: 1, duration: 0.28, ease: "power2.out" },
+          1.24,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["page-slide-demo"] = tl;
+      </script>
+    </div>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "page-slide.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/page-slide/page-slide.html b/docs/public/catalog/components/page-slide/page-slide.html
new file mode 100644
index 0000000000..f7d57e7401
--- /dev/null
+++ b/docs/public/catalog/components/page-slide/page-slide.html
@@ -0,0 +1,120 @@
+<!--
+  Page Slide - transitions.dev-inspired primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Use the timeline
+  integration note at the bottom as the starting point for deterministic GSAP
+  animation.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and either writes a label or writes a custom
+  property the CSS above consumes. The timeline recipe stays untouched: it keeps
+  sliding the incoming page over the outgoing one.
+
+    - label_a (any text, default Dashboard): the outgoing page label.
+    - label_b (any text, default Analytics): the incoming page label.
+    - accent (green | blue | violet, default green): the gradient family painted
+      on the incoming page. The outgoing page stays slate so the two always read
+      apart.
+    - corner (square | soft | round, default round): the corner radius of the
+      frame the pages slide inside.
+
+  On every default the result is identical to the original: Dashboard sliding
+  out, a teal to green Analytics sliding in, inside a 30px rounded frame.
+-->
+
+<div
+  class="hf-transition-page-slide"
+  data-composition-variables='[
+    { "id": "label_a", "type": "string", "role": "content", "label": "Outgoing label", "description": "Label printed on the page that slides out.", "default": "Dashboard" },
+    { "id": "label_b", "type": "string", "role": "content", "label": "Incoming label", "description": "Label printed on the page that slides in.", "default": "Analytics" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Gradient family painted on the incoming page. The outgoing page stays slate.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "corner", "type": "enum", "role": "style", "label": "Corner", "description": "Corner radius of the frame the pages slide inside.", "default": "round", "options": [{ "value": "square", "label": "Square" }, { "value": "soft", "label": "Soft" }, { "value": "round", "label": "Round" }] }
+  ]'
+>
+  <section class="hf-transition-page old"><span>Dashboard</span></section>
+  <section class="hf-transition-page new"><span>Analytics</span></section>
+</div>
+
+<style>
+  .hf-transition-page-slide {
+    position: relative;
+    width: 560px;
+    height: 320px;
+    overflow: hidden;
+    border-radius: var(--hf-page-radius, 30px);
+    background: #111827;
+    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.22);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-transition-page {
+    position: absolute;
+    inset: 0;
+    display: grid;
+    place-items: center;
+  }
+  .hf-transition-page span {
+    padding: 14px 20px;
+    border-radius: 999px;
+    background: rgba(255, 255, 255, 0.14);
+    color: #ffffff;
+    font-size: 28px;
+    font-weight: 900;
+  }
+  .hf-transition-page.old {
+    background: linear-gradient(135deg, #0f172a, #334155);
+  }
+  .hf-transition-page.new {
+    background: linear-gradient(135deg, var(--hf-page-from, #155e75), var(--hf-page-to, #10b981));
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    var accents = {
+      green: { from: "#155e75", to: "#10b981" },
+      blue: { from: "#1e3a8a", to: "#38bdf8" },
+      violet: { from: "#4c1d95", to: "#a78bfa" },
+    };
+    var corners = { square: "0px", soft: "14px", round: "30px" };
+
+    function text(value, fallback) {
+      return typeof value === "string" && value !== "" ? value : fallback;
+    }
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var labelA = text(vars.label_a, "Dashboard");
+    var labelB = text(vars.label_b, "Analytics");
+    var accent = accents[pick(accents, vars.accent, "green")];
+    var corner = corners[pick(corners, vars.corner, "round")];
+
+    var roots = document.querySelectorAll(".hf-transition-page-slide");
+    for (var i = 0; i < roots.length; i += 1) {
+      var root = roots[i];
+      root.style.setProperty("--hf-page-radius", corner);
+      root.style.setProperty("--hf-page-from", accent.from);
+      root.style.setProperty("--hf-page-to", accent.to);
+      var oldLabel = root.querySelector(".hf-transition-page.old span");
+      var newLabel = root.querySelector(".hf-transition-page.new span");
+      if (oldLabel) oldLabel.textContent = labelA;
+      if (newLabel) newLabel.textContent = labelB;
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-transition-page-slide', { opacity: 0, y: 24 }, { opacity: 1, y: 0, duration: 0.3, ease: 'power2.out' }, 0.25);
+  tl.fromTo('.hf-transition-page.new', { xPercent: 100 }, { xPercent: 0, duration: 0.74, ease: 'power3.inOut' }, 0.78);
+  tl.to('.hf-transition-page.old', { xPercent: -28, scale: 0.94, duration: 0.74, ease: 'power3.inOut' }, 0.78);
+  tl.fromTo('.hf-transition-page.new span', { y: 24, opacity: 0 }, { y: 0, opacity: 1, duration: 0.28, ease: 'power2.out' }, 1.24);
+-->
diff --git a/docs/public/catalog/components/pan-stations/demo.html b/docs/public/catalog/components/pan-stations/demo.html
new file mode 100644
index 0000000000..5fef6410ae
--- /dev/null
+++ b/docs/public/catalog/components/pan-stations/demo.html
@@ -0,0 +1,100 @@
+<!doctype html>
+<!--
+  pan-stations demo. This standalone 1920x1080 host mounts the primitive via
+  data-composition-src in a wide stage so the lateral camera move is legible.
+  Non-default variables prove per-instance content, layout, and timing flow.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Pan Stations - Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #05070d;
+      }
+
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 45%, #14213a 0%, #05070d 72%);
+      }
+
+      .pan-stations-mount {
+        --bg: #0b1120;
+        --fg: #f8fafc;
+        --surface: #17233b;
+        --brand: #34d399;
+        --accent: #60a5fa;
+        --muted: #a5b4cc;
+        --border: #34445f;
+        width: 86%;
+        height: 72%;
+        left: 7%;
+        top: 14%;
+        overflow: hidden;
+        border: 1px solid #34445f;
+        border-radius: 32px;
+        box-shadow: 0 48px 110px rgba(0, 0, 0, 0.48);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="pan-stations-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="pan-stations-mount"
+        class="pan-stations-mount clip"
+        data-composition-id="pan-stations"
+        data-composition-src="./pan-stations.html"
+        data-variable-values='{"stationCount":5,"labels":"Discover,Compose,Polish,Publish,Measure","dwell":0.2}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="1651"
+        data-height="778"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["pan-stations-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "pan-stations.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/pan-stations/pan-stations.html b/docs/public/catalog/components/pan-stations/pan-stations.html
new file mode 100644
index 0000000000..c36926b518
--- /dev/null
+++ b/docs/public/catalog/components/pan-stations/pan-stations.html
@@ -0,0 +1,364 @@
+<!doctype html>
+<!--
+  pan-stations -- HyperFrames video primitive (camera / holdable / exhibit)
+
+  Concept: the camera pans laterally across a wide row of labeled feature
+  stations, settling on each card before moving to the next. The exhibit
+  reading is primary here. The agitate reading is cross-shelved because the
+  same camera move can scan broken tools instead of polished features.
+
+  Compiled-from evidence: candidates card "pan-stations" plus the ship doc:
+  "one mechanic, two readings: panning across broken tools agitates, panning
+  across features exhibits. Re-filed by the adversary pass precisely because
+  it serves both shelves; the pause cadence is the frozen law." Evidence tags:
+  SIM fixture, CORPUS blueprint (re-filed per adversary; cross-shelved).
+
+  Use when: a sequence of tools, steps, screens, or features should read as
+  one continuous environment that the camera inspects in order.
+
+  Variables (declared in data-composition-variables below):
+    - stationCount (number, default 4, range 3-6): number of cards in the row.
+    - labels (CSV string, default "Capture,Edit,Render,Share"): visible station
+      labels, padded with "Station N" when entries are missing.
+    - dwell (seconds, default 0.6, range 0.2-2): steady hold at each station.
+
+  Envelope (fixed IN/OUT, elastic HOLD only, never gsap.timeScale()):
+    IN_BASE  = 0.45s  the first station settles into view
+    HOLD     = max(0, D - (IN + OUT)); complete dwell and pan segments are
+               scheduled while they fit, then the last reached station holds
+    OUT_BASE = 0.40s  the current station fades out
+    If D < IN_BASE + OUT_BASE, IN and OUT scale down together so HOLD is zero.
+
+  Sync points: none. Station arrivals live in elastic HOLD and are deliberately
+  not declared as sync points. Dwell gaps contain no eased tween.
+
+  Sound cue: none. A host can layer its own station arrival foley if needed.
+
+  Mount contract: this is a mountable sub-composition. The runtime clones only
+  <template> contents, so every real style, node, and script lives inside the
+  template. #root has no data-width or data-height and fills the host box. It
+  is styled by ID because composited CSS scoping can stop a root class selector
+  from matching. Variables come only from getVariables() after mount, because
+  document.documentElement belongs to the host document at that point.
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "stationCount", "type": "number", "role": "layout", "label": "Station count", "description": "Number of feature stations in the row.", "default": 4, "min": 3, "max": 6, "step": 1 },
+    { "id": "labels", "type": "string", "role": "content", "label": "Station labels", "description": "Comma-separated labels shown on the station cards.", "default": "Capture,Edit,Render,Share" },
+    { "id": "dwell", "type": "number", "role": "timing", "label": "Dwell", "description": "Seconds the camera holds at each station before panning.", "default": 0.6, "min": 0.2, "max": 2, "step": 0.1, "unit": "s" }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Pan Stations</title>
+    <!-- Metadata only. Everything outside <template> is discarded on mount. -->
+  </head>
+  <body>
+    <template>
+      <div
+        id="root"
+        data-composition-id="pan-stations"
+        data-start="0"
+        data-duration="4"
+        data-fps="30"
+      >
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            --ease-standard: cubic-bezier(0.215, 0.61, 0.355, 1);
+            --ease-exit: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+            --ease-drift: cubic-bezier(0.445, 0.05, 0.55, 0.95);
+            --ps-station-width: 78cqw;
+            --ps-station-gap: var(--space-4, 6cqw);
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            background: var(--bg, #0b1120);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+          }
+
+          .ps-clip {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            opacity: 0;
+          }
+
+          .ps-rail {
+            position: absolute;
+            left: 0;
+            right: 0;
+            top: 50%;
+            height: 0.18cqh;
+            background: var(--border, #334155);
+            opacity: 0.7;
+          }
+
+          .ps-strip {
+            --ps-pan-index: 0;
+            position: absolute;
+            top: 18cqh;
+            left: 0;
+            display: flex;
+            align-items: stretch;
+            gap: var(--ps-station-gap);
+            width: max-content;
+            padding: 0 11cqw;
+            transform: translateX(
+              calc(var(--ps-pan-index) * -1 * (var(--ps-station-width) + var(--ps-station-gap)))
+            );
+            will-change: transform;
+          }
+
+          .ps-station {
+            position: relative;
+            flex: 0 0 var(--ps-station-width);
+            height: 64cqh;
+            display: grid;
+            grid-template-rows: auto 1fr auto;
+            gap: var(--space-3, 3cqh);
+            padding: var(--space-5, 5cqw);
+            overflow: hidden;
+            border: 0.16cqw solid var(--border, #334155);
+            border-radius: 3.2cqw;
+            background: var(--surface, #1e293b);
+            box-shadow: 0 2.2cqh 6cqw color-mix(in srgb, var(--bg, #0b1120) 72%, transparent);
+          }
+
+          .ps-station::before {
+            content: "";
+            position: absolute;
+            inset: 0;
+            background: radial-gradient(
+              circle at 82% 18%,
+              color-mix(in srgb, var(--brand, #22c55e) 24%, transparent),
+              transparent 42%
+            );
+          }
+
+          .ps-kicker,
+          .ps-label,
+          .ps-screen {
+            position: relative;
+            z-index: 1;
+          }
+
+          .ps-kicker {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            color: var(--muted, #94a3b8);
+            font-size: 1.8cqw;
+            font-weight: 700;
+            letter-spacing: 0.16em;
+            text-transform: uppercase;
+          }
+
+          .ps-index {
+            color: var(--accent, #38bdf8);
+            font-variant-numeric: tabular-nums;
+          }
+
+          .ps-screen {
+            display: grid;
+            grid-template-columns: 0.56fr 1fr;
+            gap: var(--space-3, 3cqw);
+            min-height: 0;
+          }
+
+          .ps-tool,
+          .ps-stack {
+            border: 0.13cqw solid var(--border, #334155);
+            border-radius: 2cqw;
+            background: color-mix(in srgb, var(--bg, #0b1120) 56%, var(--surface, #1e293b));
+          }
+
+          .ps-tool {
+            display: grid;
+            place-items: center;
+          }
+
+          .ps-glyph {
+            width: 8.5cqw;
+            aspect-ratio: 1;
+            display: grid;
+            place-items: center;
+            border-radius: 2.2cqw;
+            background: var(--brand, #22c55e);
+            color: var(--bg, #0b1120);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: 3.2cqw;
+            font-weight: 850;
+          }
+
+          .ps-stack {
+            display: grid;
+            align-content: center;
+            gap: var(--space-2, 1.8cqh);
+            padding: var(--space-3, 3cqw);
+          }
+
+          .ps-line {
+            height: 1.15cqh;
+            border-radius: 50%;
+            background: var(--border, #334155);
+          }
+
+          .ps-line:nth-child(1) {
+            width: 82%;
+            background: var(--accent, #38bdf8);
+          }
+
+          .ps-line:nth-child(2) {
+            width: 100%;
+          }
+
+          .ps-line:nth-child(3) {
+            width: 64%;
+          }
+
+          .ps-label {
+            max-width: 100%;
+            overflow-wrap: anywhere;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: 5.8cqw;
+            font-weight: 760;
+            letter-spacing: -0.045em;
+            line-height: 0.98;
+          }
+        </style>
+
+        <div
+          id="pan-stations-clip"
+          class="ps-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="ps-rail"></div>
+          <div class="ps-strip" aria-label="Feature stations"></div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            // Literal by contract: the mounted root loses data-composition-id.
+            var compositionId = "pan-stations";
+            var clip = root.querySelector(".ps-clip");
+            var strip = root.querySelector(".ps-strip");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            // INVARIANT: stationCount is always an integer in the declared 3-6 range.
+            var rawCount = Number(vars.stationCount);
+            var stationCount = Number.isFinite(rawCount) ? Math.round(rawCount) : 4;
+            stationCount = Math.max(3, Math.min(6, stationCount));
+
+            // INVARIANT: dwell is finite and positive, then clamps to 0.2-2 seconds.
+            var rawDwell = Number(vars.dwell);
+            var dwell = Number.isFinite(rawDwell) ? rawDwell : 0.6;
+            dwell = Math.max(0.2, Math.min(2, dwell));
+
+            var labelsSource =
+              vars.labels == null ? "Capture,Edit,Render,Share" : String(vars.labels);
+            var parsedLabels = labelsSource.split(",").map(function (label) {
+              return label.trim();
+            });
+
+            // Station creation is the only owner of row content and fallback labels.
+            for (var i = 0; i < stationCount; i += 1) {
+              var label = parsedLabels[i] || "Station " + (i + 1);
+
+              var station = document.createElement("article");
+              station.className = "ps-station";
+              station.setAttribute("aria-label", label);
+
+              var kicker = document.createElement("div");
+              kicker.className = "ps-kicker";
+              kicker.innerHTML = '<span>Feature station</span><span class="ps-index"></span>';
+              kicker.querySelector(".ps-index").textContent = String(i + 1).padStart(2, "0");
+
+              var screen = document.createElement("div");
+              screen.className = "ps-screen";
+              screen.innerHTML =
+                '<div class="ps-tool"><span class="ps-glyph"></span></div>' +
+                '<div class="ps-stack"><span class="ps-line"></span><span class="ps-line"></span><span class="ps-line"></span></div>';
+              screen.querySelector(".ps-glyph").textContent = label.charAt(0).toUpperCase();
+
+              var title = document.createElement("div");
+              title.className = "ps-label";
+              title.textContent = label;
+
+              station.appendChild(kicker);
+              station.appendChild(screen);
+              station.appendChild(title);
+              strip.appendChild(station);
+            }
+
+            var stations = Array.from(strip.querySelectorAll(".ps-station"));
+
+            // RETIME RANGE: fixed IN/OUT, elastic HOLD, no global time scaling.
+            var IN_BASE = 0.45;
+            var OUT_BASE = 0.4;
+            var PAN_DURATION = 0.25;
+            var durationValue = parseFloat(root.dataset.duration || "4");
+            var duration = Number.isFinite(durationValue) ? Math.max(0.001, durationValue) : 4;
+            var totalBase = IN_BASE + OUT_BASE;
+            var envelopeScale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * envelopeScale;
+            var OUT = OUT_BASE * envelopeScale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var HOLD_START = IN;
+            var OUT_START = IN + HOLD;
+
+            // Explicit t=0 state for every animated endpoint.
+            gsap.set(clip, { opacity: 0 });
+            gsap.set(strip, { "--ps-pan-index": 0 });
+
+            var tl = gsap.timeline({ paused: true });
+            tl.to(clip, { opacity: 1, duration: IN, ease: "power2.out" }, 0);
+
+            // HOLD: empty time is the steady dwell. Only complete pans are added.
+            var cursor = HOLD_START;
+            for (var stationIndex = 0; stationIndex < stations.length - 1; stationIndex += 1) {
+              cursor += dwell;
+              if (cursor + PAN_DURATION > OUT_START) break;
+              tl.to(
+                strip,
+                {
+                  "--ps-pan-index": stationIndex + 1,
+                  duration: PAN_DURATION,
+                  ease: "sine.inOut",
+                },
+                cursor,
+              );
+              cursor += PAN_DURATION;
+            }
+
+            tl.to(clip, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/pan-stations/pan-stations.test.mjs b/docs/public/catalog/components/pan-stations/pan-stations.test.mjs
new file mode 100644
index 0000000000..99fce30fd1
--- /dev/null
+++ b/docs/public/catalog/components/pan-stations/pan-stations.test.mjs
@@ -0,0 +1,43 @@
+import assert from "node:assert/strict";
+import { readFile } from "node:fs/promises";
+import test from "node:test";
+
+const source = await readFile(new URL("./pan-stations.html", import.meta.url), "utf8");
+
+test("each indexed pan stop stays centered after the mount resizes", () => {
+  assert.match(source, /--ps-pan-index:\s*0/);
+  assert.match(
+    source,
+    /transform:\s*translateX\(\s*calc\(\s*var\(--ps-pan-index\)\s*\*\s*-1\s*\*\s*\(var\(--ps-station-width\)\s*\+\s*var\(--ps-station-gap\)\)\s*\)\s*\)/,
+  );
+  assert.match(source, /"--ps-pan-index":\s*stationIndex\s*\+\s*1/);
+  assert.doesNotMatch(source, /getBoundingClientRect\(\)/);
+
+  const stationWidthMatch = source.match(/--ps-station-width:\s*([\d.]+)cqw/);
+  const stationGapMatch = source.match(/--ps-station-gap:[^;]*,\s*([\d.]+)cqw\)/);
+  const stripPaddingMatch = source.match(/padding:\s*0\s+([\d.]+)cqw/);
+  const stationCountRangeMatch = source.match(
+    /"id":\s*"stationCount"[^}]*"min":\s*(\d+)[^}]*"max":\s*(\d+)/,
+  );
+  assert.ok(stationWidthMatch && stationGapMatch && stripPaddingMatch && stationCountRangeMatch);
+
+  const stationWidth = Number(stationWidthMatch[1]) / 100;
+  const stationGap = Number(stationGapMatch[1]) / 100;
+  const stripPadding = Number(stripPaddingMatch[1]) / 100;
+  const minStationCount = Number(stationCountRangeMatch[1]);
+  const maxStationCount = Number(stationCountRangeMatch[2]);
+
+  for (const viewportWidth of [640, 1651, 1920]) {
+    for (let stationCount = minStationCount; stationCount <= maxStationCount; stationCount += 1) {
+      for (let stationIndex = 0; stationIndex < stationCount; stationIndex += 1) {
+        const stationCenter =
+          viewportWidth * stripPadding +
+          stationIndex * viewportWidth * (stationWidth + stationGap) +
+          viewportWidth * stationWidth * 0.5 -
+          stationIndex * viewportWidth * (stationWidth + stationGap);
+
+        assert.ok(Math.abs(stationCenter - viewportWidth / 2) < 1e-9);
+      }
+    }
+  }
+});
diff --git a/docs/public/catalog/components/panel-reveal/__hf-variables-preview.html b/docs/public/catalog/components/panel-reveal/__hf-variables-preview.html
new file mode 100644
index 0000000000..6b3765ef86
--- /dev/null
+++ b/docs/public/catalog/components/panel-reveal/__hf-variables-preview.html
@@ -0,0 +1,70 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Panel Reveal variables preview</title>
+    <style>
+      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #f7f7f8; }
+      #hf-vars-root { position: relative; width: 1920px; height: 1080px; }
+      #hf-vars-mount { position: absolute; inset: 0; display: grid; place-items: center; }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  </head>
+  <body>
+    <div id="hf-vars-root" data-composition-id="panel-reveal-variables-preview" data-start="0" data-width="1920" data-height="1080" data-duration="5" data-fps="30">
+      <div id="hf-vars-mount" class="clip" data-composition-id="panel-reveal" data-composition-src="./panel-reveal.html" data-start="0" data-duration="5" data-track-index="0" data-width="1920" data-height="1080"></div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["panel-reveal-variables-preview"] = gsap.timeline({ paused: true });
+    </script>
+    <script>
+      (function () {
+        var mount = document.getElementById("hf-vars-mount");
+        // The mount is filled asynchronously, and the demo script selects
+        // what it fills it with, so it cannot run before then.
+        var observer = new MutationObserver(build);
+        observer.observe(mount, { childList: true, subtree: true });
+        build();
+        function build() {
+          if (!mount.firstElementChild) return;
+          observer.disconnect();
+
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-transition-panel-reveal",
+          { "--hf-panel-open": 0 },
+          { "--hf-panel-open": 1, duration: 0.44, ease: "power3.inOut" },
+          startTime,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["panel-reveal-demo"] = tl;
+          var child = window.__timelines["panel-reveal-demo"];
+          delete window.__timelines["panel-reveal-demo"];
+          if (!child || typeof child.paused !== "function") return;
+          child.paused(false);
+          window.__timelines["panel-reveal-variables-preview"].add(child, 0);
+        }
+      })();
+    </script>
+<script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "panel-reveal.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/panel-reveal/demo.html b/docs/public/catalog/components/panel-reveal/demo.html
new file mode 100644
index 0000000000..b037160e89
--- /dev/null
+++ b/docs/public/catalog/components/panel-reveal/demo.html
@@ -0,0 +1,116 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Panel Reveal - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        min-width: 760px;
+        min-height: 480px;
+        padding: 56px;
+        /* ponytail: scale wrapper — GSAP targets .hf-transition-panel-reveal, not this element */
+        transform: scale(2.6);
+        transform-origin: center center;
+      }
+      .hf-transition-panel-reveal {
+        --hf-panel-open: 1;
+        width: 380px;
+        overflow: hidden;
+        border: 1px solid #e4e4e7;
+        border-radius: 14px;
+        background: #fff;
+        color: #18181b;
+        font-family: Inter, system-ui, sans-serif;
+        box-shadow: 0 24px 70px rgba(24, 24, 27, 0.1);
+      }
+      .hf-transition-panel-reveal header {
+        padding: 18px 20px 14px;
+        font-size: 16px;
+        font-weight: 600;
+        letter-spacing: -0.01em;
+      }
+      .hf-transition-panel-reveal div {
+        max-height: calc(var(--hf-panel-open) * 120px);
+        opacity: var(--hf-panel-open);
+        padding: 0 20px calc(var(--hf-panel-open) * 20px);
+        overflow: hidden;
+      }
+      .hf-transition-panel-reveal p {
+        margin: 0 0 8px;
+        color: #71717a;
+        font-size: 15px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="panel-reveal-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <section class="hf-transition-panel-reveal">
+          <header>Motion tokens</header>
+          <div>
+            <p>Duration 420ms</p>
+            <p>Easing power3.out</p>
+          </div>
+        </section>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-transition-panel-reveal",
+          { "--hf-panel-open": 0 },
+          { "--hf-panel-open": 1, duration: 0.44, ease: "power3.inOut" },
+          startTime,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["panel-reveal-demo"] = tl;
+      </script>
+    </div>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "panel-reveal.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/panel-reveal/panel-reveal.html b/docs/public/catalog/components/panel-reveal/panel-reveal.html
new file mode 100644
index 0000000000..772f1d7e95
--- /dev/null
+++ b/docs/public/catalog/components/panel-reveal/panel-reveal.html
@@ -0,0 +1,133 @@
+<!--
+  Panel Reveal - transitions.dev-inspired primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Use the timeline
+  integration note at the bottom as the starting point for deterministic GSAP
+  animation.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result as a custom property
+  the CSS below consumes. The timeline recipe at the end is untouched by them:
+  it keeps driving the single open value from 0 to 1.
+
+    - title (string, default "Motion tokens"): the header line above the fold.
+    - width (narrow | standard | wide, default standard): how wide the panel
+      sits, 280, 360 or 480 px.
+    - tone (paper | ink, default paper): the surface family. paper is the
+      white card on a light frame, ink is the same card inverted for dark
+      frames, border and body copy included.
+    - reveal (fade | solid, default fade): whether the body fades in with the
+      height. fade is the shipped motion, solid keeps the body at full opacity
+      so only the height opens. Both look the same once the panel is open.
+
+  On every default the result is identical to the original: a 360px white card
+  whose body fades in as it grows.
+-->
+
+<section
+  class="hf-transition-panel-reveal"
+  data-composition-variables='[
+    { "id": "title", "type": "string", "role": "content", "label": "Title", "description": "The header line that sits above the folded body.", "default": "Motion tokens" },
+    { "id": "width", "type": "enum", "role": "layout", "label": "Width", "description": "How wide the panel sits, 280, 360 or 480 px.", "default": "standard", "options": [{ "value": "narrow", "label": "Narrow" }, { "value": "standard", "label": "Standard" }, { "value": "wide", "label": "Wide" }] },
+    { "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Surface family: paper is the white card for light frames, ink inverts it for dark frames.", "default": "paper", "options": [{ "value": "paper", "label": "Paper" }, { "value": "ink", "label": "Ink" }] },
+    { "id": "reveal", "type": "enum", "role": "motion", "label": "Reveal", "description": "Whether the body fades in with the height. fade is the shipped motion, solid opens the height only.", "default": "fade", "options": [{ "value": "fade", "label": "Fade" }, { "value": "solid", "label": "Solid" }] }
+  ]'
+>
+  <header>Motion tokens</header>
+  <div>
+    <p>Duration 420ms</p>
+    <p>Easing power3.out</p>
+  </div>
+</section>
+
+<style>
+  .hf-transition-panel-reveal {
+    --hf-panel-open: 1;
+    width: var(--hf-panel-width, 360px);
+    overflow: hidden;
+    border: 1px solid var(--hf-panel-border, #e4e4e7);
+    border-radius: 14px;
+    background: var(--hf-panel-surface, #fff);
+    color: var(--hf-panel-text, #18181b);
+    font-family: Inter, system-ui, sans-serif;
+    box-shadow: 0 20px 56px rgba(24, 24, 27, 0.1);
+  }
+  .hf-transition-panel-reveal header {
+    padding: 15px 17px;
+    font-weight: 900;
+  }
+  .hf-transition-panel-reveal div {
+    max-height: calc(var(--hf-panel-open) * 120px);
+    opacity: calc(1 - var(--hf-panel-fade, 1) * (1 - var(--hf-panel-open)));
+    padding: 0 17px calc(var(--hf-panel-open) * 17px);
+    overflow: hidden;
+  }
+  .hf-transition-panel-reveal p {
+    margin: 0 0 8px;
+    color: var(--hf-panel-muted, #71717a);
+    font-size: 14px;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    var widths = { narrow: "280px", standard: "360px", wide: "480px" };
+    var tones = {
+      paper: {
+        surface: "#fff",
+        border: "#e4e4e7",
+        text: "#18181b",
+        muted: "#71717a",
+      },
+      ink: {
+        surface: "#18181b",
+        border: "#3f3f46",
+        text: "#fafafa",
+        muted: "#a1a1aa",
+      },
+    };
+    var reveals = { fade: 1, solid: 0 };
+
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var width = widths[pick(widths, vars.width, "standard")];
+    var tone = tones[pick(tones, vars.tone, "paper")];
+    var fade = reveals[pick(reveals, vars.reveal, "fade")];
+
+    var title = typeof vars.title === "string" ? vars.title.trim() : "";
+    if (!title) {
+      title = "Motion tokens";
+    }
+
+    var roots = document.querySelectorAll(".hf-transition-panel-reveal");
+    for (var i = 0; i < roots.length; i += 1) {
+      var root = roots[i];
+      root.style.setProperty("--hf-panel-width", width);
+      root.style.setProperty("--hf-panel-surface", tone.surface);
+      root.style.setProperty("--hf-panel-border", tone.border);
+      root.style.setProperty("--hf-panel-text", tone.text);
+      root.style.setProperty("--hf-panel-muted", tone.muted);
+      root.style.setProperty("--hf-panel-fade", String(fade));
+
+      var header = root.querySelector("header");
+      if (header) {
+        header.textContent = title;
+      }
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-transition-panel-reveal', { '--hf-panel-open': 0 }, { '--hf-panel-open': 1, duration: 0.44, ease: 'power3.inOut' }, startTime);
+-->
diff --git a/docs/public/catalog/components/parallax-device-dive/demo.html b/docs/public/catalog/components/parallax-device-dive/demo.html
new file mode 100644
index 0000000000..643378e9e4
--- /dev/null
+++ b/docs/public/catalog/components/parallax-device-dive/demo.html
@@ -0,0 +1,95 @@
+<!doctype html>
+<!--
+  parallax-device-dive demo. This standalone composition mounts the primitive
+  through data-composition-src. Non-default values prove that both variables
+  flow through the mount while the primitive remains sized by its host box.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Parallax Device Dive Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0b0c0e;
+      }
+
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 44%, #202033 0%, #0b0c0e 68%);
+      }
+
+      .mount-card {
+        position: absolute;
+        left: 12%;
+        top: 10%;
+        width: 76%;
+        height: 80%;
+        overflow: hidden;
+        border: 1px solid rgba(255, 255, 255, 0.14);
+        border-radius: 28px;
+        background: #0b0c0e;
+        box-shadow: 0 48px 120px rgba(0, 0, 0, 0.52);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="parallax-device-dive-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4.5"
+      data-fps="30"
+    >
+      <div
+        id="parallax-device-dive-mount"
+        class="mount-card clip"
+        data-composition-id="parallax-device-dive"
+        data-composition-src="./parallax-device-dive.html"
+        data-variable-values='{"accent":"violet","app_title":"Launch Control"}'
+        data-start="0"
+        data-duration="4.5"
+        data-track-index="0"
+        data-width="1459"
+        data-height="864"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["parallax-device-dive-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "parallax-device-dive.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/parallax-device-dive/parallax-device-dive.html b/docs/public/catalog/components/parallax-device-dive/parallax-device-dive.html
new file mode 100644
index 0000000000..05a924e2b6
--- /dev/null
+++ b/docs/public/catalog/components/parallax-device-dive/parallax-device-dive.html
@@ -0,0 +1,451 @@
+<!doctype html>
+<!--
+  parallax-device-dive: HyperFrames video primitive (camera / device / transition)
+
+  Concept: a canonical phone rises into view, then the camera pushes through
+  its screen. The app header, hero card, and supporting cards separate at
+  different apparent depths during the push, then settle into one coherent UI
+  that fills the frame.
+
+  Variables:
+    - accent (green | blue | violet, default "blue"): app highlight color.
+    - app_title (string, default "Dashboard"): title in the app header.
+
+  Envelope (fixed IN/OUT, elastic HOLD only, never gsap.timeScale()):
+    IN_BASE  = 1.05s  phone rises and settles on stage
+    HOLD     = elastic subtle device drift before the camera move
+    OUT_BASE = 1.65s  camera dives through the screen and the UI becomes stage
+    If D is shorter than IN_BASE + OUT_BASE, IN and OUT compress together and
+    HOLD becomes zero. OUT is a camera exit from the hardware, not a fade.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, carries no data-width or
+  data-height, and registers one paused timeline under the hardcoded
+  parallax-device-dive id.
+-->
+<html
+  lang="en"
+  data-composition-id="parallax-device-dive"
+  data-composition-duration="4.5"
+  data-composition-variables='[
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Highlight color used throughout the app UI.", "default": "blue", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "app_title", "type": "string", "role": "content", "label": "App title", "description": "Title displayed in the app header.", "default": "Dashboard" }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Parallax Device Dive</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="parallax-device-dive" data-duration="4.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            background: #0b0c0e;
+            color: #f8fafc;
+            font-family: Inter, system-ui, sans-serif;
+          }
+
+          .pdd-clip,
+          .pdd-camera {
+            position: absolute;
+            inset: 0;
+          }
+
+          .pdd-clip {
+            overflow: hidden;
+            background:
+              radial-gradient(
+                circle at 50% 48%,
+                color-mix(in srgb, var(--pdd-accent) 17%, transparent),
+                transparent 34%
+              ),
+              #0b0c0e;
+          }
+
+          .pdd-camera {
+            display: grid;
+            place-items: center;
+            perspective: 125cqw;
+          }
+
+          .pdd-phone {
+            position: relative;
+            height: 82cqh;
+            aspect-ratio: 9 / 19.5;
+            padding: 0.72cqh;
+            border: 0.08cqw solid rgba(255, 255, 255, 0.28);
+            border-radius: 4.4cqh;
+            background: linear-gradient(145deg, #3c4049, #17191e 44%, #08090c);
+            box-shadow:
+              0 4.8cqh 10cqh rgba(0, 0, 0, 0.5),
+              0 1.4cqh 3cqh rgba(0, 0, 0, 0.4),
+              inset 0 0.12cqh 0 rgba(255, 255, 255, 0.3),
+              inset 0 0 0 0.08cqw rgba(0, 0, 0, 0.72);
+            transform-origin: 50% 50%;
+            will-change: transform, opacity;
+          }
+
+          .pdd-screen {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            border-radius: 3.72cqh;
+            background: #f4f6fb;
+            box-shadow: inset 0 0 0 0.08cqw rgba(15, 23, 42, 0.28);
+            color: #111827;
+            isolation: isolate;
+          }
+
+          .pdd-app-glow {
+            position: absolute;
+            inset: 0;
+            background:
+              radial-gradient(
+                circle at 76% 8%,
+                color-mix(in srgb, var(--pdd-accent) 28%, transparent),
+                transparent 31%
+              ),
+              linear-gradient(180deg, #ffffff, #eef2f8);
+          }
+
+          .pdd-cutout {
+            position: absolute;
+            z-index: 10;
+            top: 1.2cqh;
+            left: 50%;
+            width: 7.2cqh;
+            height: 2.1cqh;
+            border-radius: 1.2cqh;
+            background: #050607;
+            transform: translateX(-50%);
+          }
+
+          .pdd-ui {
+            position: absolute;
+            inset: 0;
+            padding: 6.2cqh 2.1cqh 2.2cqh;
+            display: flex;
+            flex-direction: column;
+            gap: 1.55cqh;
+          }
+
+          .pdd-header,
+          .pdd-hero,
+          .pdd-stats {
+            position: relative;
+            z-index: 2;
+            transform-origin: 50% 50%;
+            will-change: transform;
+          }
+
+          .pdd-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+          }
+
+          .pdd-heading {
+            min-width: 0;
+          }
+
+          .pdd-kicker {
+            color: #788397;
+            font-size: 0.75cqw;
+            font-weight: 700;
+            letter-spacing: 0.12em;
+            line-height: 1;
+            text-transform: uppercase;
+          }
+
+          .pdd-title {
+            max-width: 13cqw;
+            overflow: hidden;
+            color: #111827;
+            font-size: 1.5cqw;
+            font-weight: 780;
+            letter-spacing: -0.04em;
+            line-height: 1.12;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          .pdd-avatar {
+            flex: 0 0 auto;
+            width: 3.7cqh;
+            aspect-ratio: 1;
+            display: grid;
+            place-items: center;
+            border-radius: 50%;
+            background: var(--pdd-accent);
+            color: #ffffff;
+            font-size: 0.72cqw;
+            font-weight: 800;
+            box-shadow: 0 0.55cqh 1.4cqh color-mix(in srgb, var(--pdd-accent) 32%, transparent);
+          }
+
+          .pdd-hero {
+            min-height: 24cqh;
+            padding: 2.1cqh;
+            overflow: hidden;
+            border: 0.08cqw solid rgba(255, 255, 255, 0.12);
+            border-radius: 2.1cqh;
+            background: #101722;
+            box-shadow: 0 1.7cqh 3.8cqh rgba(15, 23, 42, 0.2);
+          }
+
+          .pdd-hero-label {
+            color: #a9b4c7;
+            font-size: 0.72cqw;
+            font-weight: 650;
+          }
+
+          .pdd-value {
+            margin-top: 0.45cqh;
+            color: #ffffff;
+            font-size: 2.15cqw;
+            font-weight: 790;
+            letter-spacing: -0.055em;
+            line-height: 1;
+          }
+
+          .pdd-value span {
+            color: var(--pdd-accent);
+            font-size: 0.76cqw;
+            letter-spacing: 0;
+          }
+
+          .pdd-chart {
+            position: absolute;
+            left: 2.1cqh;
+            right: 2.1cqh;
+            bottom: 2.2cqh;
+            height: 8.2cqh;
+            display: flex;
+            align-items: end;
+            gap: 0.55cqh;
+          }
+
+          .pdd-bar {
+            flex: 1 1 0;
+            min-width: 0;
+            border-radius: 0.55cqh 0.55cqh 0.18cqh 0.18cqh;
+            background: color-mix(in srgb, var(--pdd-accent) 38%, #263244);
+          }
+
+          .pdd-bar:nth-child(1) {
+            height: 38%;
+          }
+
+          .pdd-bar:nth-child(2) {
+            height: 54%;
+          }
+
+          .pdd-bar:nth-child(3) {
+            height: 46%;
+          }
+
+          .pdd-bar:nth-child(4) {
+            height: 72%;
+          }
+
+          .pdd-bar:nth-child(5) {
+            height: 64%;
+          }
+
+          .pdd-bar:nth-child(6) {
+            height: 92%;
+            background: var(--pdd-accent);
+            box-shadow: 0 0.55cqh 1.5cqh color-mix(in srgb, var(--pdd-accent) 30%, transparent);
+          }
+
+          .pdd-stats {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 1.15cqh;
+          }
+
+          .pdd-stat {
+            min-height: 11.5cqh;
+            padding: 1.55cqh;
+            border: 0.08cqw solid rgba(55, 65, 81, 0.08);
+            border-radius: 1.7cqh;
+            background: rgba(255, 255, 255, 0.94);
+            box-shadow: 0 1.1cqh 2.6cqh rgba(71, 85, 105, 0.12);
+          }
+
+          .pdd-stat-label {
+            color: #7b8799;
+            font-size: 0.65cqw;
+            font-weight: 650;
+          }
+
+          .pdd-stat-value {
+            margin-top: 1cqh;
+            color: #18202d;
+            font-size: 1.25cqw;
+            font-weight: 780;
+            letter-spacing: -0.035em;
+          }
+
+          .pdd-stat-value span {
+            color: var(--pdd-accent);
+          }
+        </style>
+
+        <div
+          id="parallax-device-dive-clip"
+          class="pdd-clip clip"
+          data-start="0"
+          data-duration="4.5"
+          data-track-index="0"
+        >
+          <div class="pdd-camera">
+            <div class="pdd-phone">
+              <div class="pdd-screen">
+                <div class="pdd-app-glow"></div>
+                <div class="pdd-ui">
+                  <div class="pdd-header">
+                    <div class="pdd-heading">
+                      <div class="pdd-kicker">Overview</div>
+                      <div class="pdd-title"></div>
+                    </div>
+                    <div class="pdd-avatar">HF</div>
+                  </div>
+
+                  <div class="pdd-hero">
+                    <div class="pdd-hero-label">Weekly activity</div>
+                    <div class="pdd-value">24.8k <span>+18%</span></div>
+                    <div class="pdd-chart" aria-hidden="true">
+                      <span class="pdd-bar"></span>
+                      <span class="pdd-bar"></span>
+                      <span class="pdd-bar"></span>
+                      <span class="pdd-bar"></span>
+                      <span class="pdd-bar"></span>
+                      <span class="pdd-bar"></span>
+                    </div>
+                  </div>
+
+                  <div class="pdd-stats">
+                    <div class="pdd-stat">
+                      <div class="pdd-stat-label">Conversion</div>
+                      <div class="pdd-stat-value"><span>8.4%</span></div>
+                    </div>
+                    <div class="pdd-stat">
+                      <div class="pdd-stat-label">Active users</div>
+                      <div class="pdd-stat-value">12,604</div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="pdd-cutout" aria-hidden="true"></div>
+            </div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var phone = root.querySelector(".pdd-phone");
+            var cutout = root.querySelector(".pdd-cutout");
+            var header = root.querySelector(".pdd-header");
+            var hero = root.querySelector(".pdd-hero");
+            var stats = root.querySelector(".pdd-stats");
+            var title = root.querySelector(".pdd-title");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var accent = vars.accent;
+            var accentColors = {
+              green: "var(--brand, #a1a1aa)",
+              blue: "var(--accent, #a1a1aa)",
+              violet: "var(--accent-2, #a1a1aa)",
+            };
+            var accentColor = accentColors[accent] || accentColors.blue;
+            var appTitle = vars.app_title == null ? "Dashboard" : String(vars.app_title);
+
+            root.style.setProperty("--pdd-accent", accentColor);
+            title.textContent = appTitle;
+
+            var IN_BASE = 1.05;
+            var OUT_BASE = 1.65;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4.5"));
+            var totalBase = IN_BASE + OUT_BASE;
+            var envelopeScale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * envelopeScale;
+            var OUT = OUT_BASE * envelopeScale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var HOLD_START = IN;
+            var OUT_START = IN + HOLD;
+            var RISE = IN * 0.78;
+            var SETTLE = IN - RISE;
+            var DIVE = OUT * 0.72;
+            var DEPTH_SETTLE = OUT - DIVE;
+
+            var tl = gsap.timeline({ paused: true });
+
+            tl.fromTo(
+              phone,
+              { opacity: 0, y: "18cqh", scale: 0.86 },
+              { opacity: 1, y: "-1cqh", scale: 1.02, duration: RISE, ease: "power3.out" },
+              0,
+            );
+            tl.to(phone, { y: 0, scale: 1, duration: SETTLE, ease: "power2.out" }, RISE);
+
+            if (HOLD > 0) {
+              tl.to(phone, { y: "-0.55cqh", duration: HOLD * 0.5, ease: "sine.inOut" }, HOLD_START);
+              tl.to(
+                phone,
+                { y: 0, duration: HOLD * 0.5, ease: "sine.inOut" },
+                HOLD_START + HOLD * 0.5,
+              );
+            }
+
+            tl.to(phone, { scale: 6.4, y: "2.4cqh", duration: OUT, ease: "power4.in" }, OUT_START);
+            tl.to(cutout, { opacity: 0, duration: DIVE * 0.45, ease: "power2.out" }, OUT_START);
+            tl.to(
+              header,
+              { y: "-1.2cqh", scale: 1.035, duration: DIVE, ease: "power4.in" },
+              OUT_START,
+            );
+            tl.to(
+              hero,
+              { y: "-2.1cqh", scale: 1.09, duration: DIVE, ease: "power4.in" },
+              OUT_START,
+            );
+            tl.to(
+              stats,
+              { y: "2.4cqh", scale: 1.16, duration: DIVE, ease: "power4.in" },
+              OUT_START,
+            );
+            tl.to(
+              [header, hero, stats],
+              { y: 0, scale: 1, duration: DEPTH_SETTLE, ease: "power4.out" },
+              OUT_START + DIVE,
+            );
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["parallax-device-dive"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/parallax-unzoom/demo.html b/docs/public/catalog/components/parallax-unzoom/demo.html
new file mode 100644
index 0000000000..2c3bd73ecd
--- /dev/null
+++ b/docs/public/catalog/components/parallax-unzoom/demo.html
@@ -0,0 +1,325 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Parallax Unzoom — Demo</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800;900&display=swap"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #1a1a20;
+        font-family: "Inter", system-ui, sans-serif;
+      }
+
+      .demo-canvas {
+        width: 1920px;
+        height: 1080px;
+        position: relative;
+        overflow: hidden;
+      }
+
+      .parallax-unzoom-grid {
+        display: grid;
+        grid-template-columns: repeat(5, 360px);
+        grid-template-rows: repeat(3, 341px);
+        gap: 30px;
+      }
+
+      .parallax-unzoom-card {
+        border-radius: 22px;
+        overflow: hidden;
+        position: relative;
+        box-shadow: 0 12px 36px rgba(20, 20, 30, 0.08);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .card-glyph {
+        font-size: 92px;
+        font-weight: 800;
+        color: rgba(255, 255, 255, 0.92);
+        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
+        letter-spacing: -0.04em;
+        line-height: 1;
+      }
+
+      .pu-c0 {
+        background: linear-gradient(135deg, #3a8b6f, #1d4d3d);
+      }
+      .pu-c1 {
+        background: linear-gradient(135deg, #8b4a3a, #4a2418);
+      }
+      .pu-c2 {
+        background: linear-gradient(135deg, #c89868, #8a6038);
+      }
+      .pu-c3 {
+        background: linear-gradient(135deg, #3a6088, #1a2f4a);
+      }
+      .pu-c4 {
+        background: linear-gradient(135deg, #b03838, #6a1818);
+      }
+      .pu-c5 {
+        background: linear-gradient(135deg, #bcbcbc, #6e6e6e);
+      }
+      .pu-c6 {
+        background: linear-gradient(135deg, #8a5fa0, #4a2860);
+      }
+      .pu-c7-focus {
+        background: linear-gradient(135deg, #f5c93f, #d99a18);
+      }
+      .pu-c8 {
+        background: linear-gradient(135deg, #d8d8d8, #9a9a9a);
+      }
+      .pu-c9 {
+        background: linear-gradient(135deg, #5fa37e, #2a6a4a);
+      }
+      .pu-c10 {
+        background: linear-gradient(135deg, #d1b66a, #8a7028);
+      }
+      .pu-c11 {
+        background: linear-gradient(135deg, #4f7fc0, #1f3f80);
+      }
+      .pu-c12 {
+        background: linear-gradient(135deg, #5a3a8f, #2a1858);
+      }
+      .pu-c13 {
+        background: linear-gradient(135deg, #b85a3a, #6a2818);
+      }
+      .pu-c14 {
+        background: linear-gradient(135deg, #f0f0e8, #c8c8be);
+      }
+
+      .parallax-unzoom-card[data-pu-focus="true"] {
+        grid-column: 3;
+        grid-row: 2;
+      }
+
+      .focus-label {
+        font-weight: 900;
+        font-size: 56px;
+        letter-spacing: -0.04em;
+        color: #1a1208;
+        text-align: center;
+        line-height: 1;
+        opacity: 0;
+      }
+
+      .focus-label small {
+        display: block;
+        font-size: 18px;
+        font-weight: 600;
+        letter-spacing: 0.18em;
+        margin-bottom: 14px;
+        color: rgba(26, 18, 8, 0.7);
+      }
+
+      .hero-headline {
+        position: absolute;
+        top: 80px;
+        left: 0;
+        width: 100%;
+        text-align: center;
+        font-size: 68px;
+        font-weight: 800;
+        letter-spacing: -0.03em;
+        color: #1a1a1a;
+        opacity: 1;
+      }
+
+      .parallax-unzoom-grid {
+        --pu-progress: 0;
+        --pu-focus-scale: 6;
+        --pu-sibling-push: 900px;
+        --pu-sibling-fade: 0;
+        position: relative;
+      }
+
+      .parallax-unzoom-card {
+        transform-origin: center center;
+        will-change: transform, opacity;
+        transform: translate3d(
+            calc(var(--pu-dx, 0px) * (1 - var(--pu-progress))),
+            calc(var(--pu-dy, 0px) * (1 - var(--pu-progress))),
+            0
+          )
+          scale(calc(0.7 + 0.3 * var(--pu-progress)));
+        opacity: calc(var(--pu-progress) * var(--pu-sibling-fade));
+      }
+
+      .parallax-unzoom-card[data-pu-focus="true"] {
+        z-index: 10;
+        transform: translate3d(0, 0, 0)
+          scale(calc(var(--pu-focus-scale) - (var(--pu-focus-scale) - 1) * var(--pu-progress)));
+        opacity: 1;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="parallax-unzoom-demo"
+      data-width="1920"
+      data-height="1080"
+      data-duration="6"
+      data-start="0"
+    >
+      <div class="demo-canvas">
+        <div class="hero-headline">Inspired by how people discover.</div>
+
+        <div class="parallax-unzoom-grid">
+          <div class="parallax-unzoom-card pu-c0" data-pu-row="0" data-pu-col="0">
+            <span class="card-glyph">◇</span>
+          </div>
+          <div class="parallax-unzoom-card pu-c1" data-pu-row="0" data-pu-col="1">
+            <span class="card-glyph">◐</span>
+          </div>
+          <div class="parallax-unzoom-card pu-c2" data-pu-row="0" data-pu-col="2">
+            <span class="card-glyph">◯</span>
+          </div>
+          <div class="parallax-unzoom-card pu-c3" data-pu-row="0" data-pu-col="3">
+            <span class="card-glyph">◑</span>
+          </div>
+          <div class="parallax-unzoom-card pu-c4" data-pu-row="0" data-pu-col="4">
+            <span class="card-glyph">▲</span>
+          </div>
+
+          <div class="parallax-unzoom-card pu-c5" data-pu-row="1" data-pu-col="0">
+            <span class="card-glyph">✦</span>
+          </div>
+          <div class="parallax-unzoom-card pu-c6" data-pu-row="1" data-pu-col="1">
+            <span class="card-glyph">❖</span>
+          </div>
+          <div
+            class="parallax-unzoom-card pu-c7-focus"
+            data-pu-row="1"
+            data-pu-col="2"
+            data-pu-focus="true"
+          >
+            <div class="focus-label">
+              <small>EBAY PLAYBOOK</small>
+              DISCOVER
+            </div>
+          </div>
+          <div class="parallax-unzoom-card pu-c8" data-pu-row="1" data-pu-col="3">
+            <span class="card-glyph">✧</span>
+          </div>
+          <div class="parallax-unzoom-card pu-c9" data-pu-row="1" data-pu-col="4">
+            <span class="card-glyph">◈</span>
+          </div>
+
+          <div class="parallax-unzoom-card pu-c10" data-pu-row="2" data-pu-col="0">
+            <span class="card-glyph">▼</span>
+          </div>
+          <div class="parallax-unzoom-card pu-c11" data-pu-row="2" data-pu-col="1">
+            <span class="card-glyph">◆</span>
+          </div>
+          <div class="parallax-unzoom-card pu-c12" data-pu-row="2" data-pu-col="2">
+            <span class="card-glyph">●</span>
+          </div>
+          <div class="parallax-unzoom-card pu-c13" data-pu-row="2" data-pu-col="3">
+            <span class="card-glyph">◭</span>
+          </div>
+          <div class="parallax-unzoom-card pu-c14" data-pu-row="2" data-pu-col="4">
+            <span class="card-glyph" style="color: rgba(40, 40, 40, 0.7)">◇</span>
+          </div>
+        </div>
+      </div>
+
+      <script>
+        (function () {
+          const grids = document.querySelectorAll(".parallax-unzoom-grid");
+          grids.forEach((grid) => {
+            const cards = Array.from(grid.querySelectorAll(".parallax-unzoom-card"));
+            if (cards.length === 0) return;
+            let focal = cards.find((c) => c.dataset.puFocus === "true");
+            if (!focal) {
+              focal = cards[Math.floor(cards.length / 2)];
+              focal.dataset.puFocus = "true";
+            }
+            const focusRow = Number(focal.dataset.puRow ?? 0);
+            const focusCol = Number(focal.dataset.puCol ?? 0);
+            const push =
+              parseFloat(getComputedStyle(grid).getPropertyValue("--pu-sibling-push")) || 900;
+            cards.forEach((card) => {
+              if (card === focal) return;
+              const row = Number(card.dataset.puRow ?? 0);
+              const col = Number(card.dataset.puCol ?? 0);
+              const dCol = col - focusCol;
+              const dRow = row - focusRow;
+              const mag = Math.hypot(dCol, dRow) || 1;
+              const nx = (dCol / mag) * push * mag;
+              const ny = (dRow / mag) * push * mag;
+              card.style.setProperty("--pu-dx", `${nx}px`);
+              card.style.setProperty("--pu-dy", `${ny}px`);
+            });
+          });
+
+          const tl = gsap.timeline({ paused: true });
+
+          tl.to(
+            ".hero-headline",
+            {
+              opacity: 0,
+              duration: 0.5,
+              ease: "power2.in",
+            },
+            0.3,
+          );
+
+          tl.fromTo(
+            ".parallax-unzoom-grid",
+            { "--pu-progress": 0 },
+            {
+              "--pu-progress": 1,
+              duration: 3.0,
+              ease: "power2.inOut",
+            },
+            0.5,
+          );
+
+          tl.fromTo(
+            ".parallax-unzoom-card:not([data-pu-focus='true'])",
+            { opacity: 0 },
+            {
+              opacity: 1,
+              duration: 1.5,
+              ease: "power2.out",
+              stagger: { each: 0.02, from: "center" },
+            },
+            2.0,
+          );
+
+          tl.to(
+            ".focus-label",
+            {
+              opacity: 1,
+              duration: 1.0,
+              ease: "power2.out",
+            },
+            2.5,
+          );
+
+          window.__timelines = window.__timelines || {};
+          window.__timelines["parallax-unzoom-demo"] = tl;
+        })();
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/parallax-unzoom/parallax-unzoom.html b/docs/public/catalog/components/parallax-unzoom/parallax-unzoom.html
new file mode 100644
index 0000000000..b613aad8f7
--- /dev/null
+++ b/docs/public/catalog/components/parallax-unzoom/parallax-unzoom.html
@@ -0,0 +1,103 @@
+<!--
+  Parallax Unzoom — focus card scales down from full frame while siblings
+  parallax IN to form a grid. The reverse of parallax-zoom.
+
+  Pairs naturally with parallax-zoom: zoom INTO a card in scene 1, then
+  unzoom OUT of it in scene 2 to reveal a fresh grid underneath.
+
+  Usage:
+  1. Wrap your card grid with class="parallax-unzoom-grid".
+  2. Mark each card with class="parallax-unzoom-card".
+  3. Add data-pu-row="0|1|2|..." and data-pu-col="0|1|2|..." per card.
+  4. Mark the card that starts at full size with data-pu-focus="true".
+  5. Drive --pu-progress 0 → 1 on the .parallax-unzoom-grid from your
+     composition's paused GSAP timeline (see example at bottom).
+
+  Tunable CSS variables on .parallax-unzoom-grid:
+  - --pu-focus-scale  (default 6)      starting scale of the focus card
+  - --pu-sibling-push (default 900px)  outward distance siblings start at
+  - --pu-sibling-fade (default 1)      sibling opacity falloff (0–1)
+-->
+
+<style>
+  .parallax-unzoom-grid {
+    --pu-progress: 0;
+    --pu-focus-scale: 6;
+    --pu-sibling-push: 900px;
+    --pu-sibling-fade: 1;
+    position: relative;
+  }
+
+  .parallax-unzoom-card {
+    transform-origin: center center;
+    will-change: transform, opacity;
+    transform: translate3d(
+        calc(var(--pu-dx, 0px) * (1 - var(--pu-progress))),
+        calc(var(--pu-dy, 0px) * (1 - var(--pu-progress))),
+        0
+      )
+      scale(calc(0.7 + 0.3 * var(--pu-progress)));
+    opacity: calc(var(--pu-progress) * var(--pu-sibling-fade));
+  }
+
+  .parallax-unzoom-card[data-pu-focus="true"] {
+    z-index: 10;
+    transform: translate3d(0, 0, 0)
+      scale(calc(var(--pu-focus-scale) - (var(--pu-focus-scale) - 1) * var(--pu-progress)));
+    opacity: 1;
+  }
+</style>
+
+<script>
+  (function () {
+    const grids = document.querySelectorAll(".parallax-unzoom-grid");
+
+    grids.forEach((grid) => {
+      const cards = Array.from(grid.querySelectorAll(".parallax-unzoom-card"));
+      if (cards.length === 0) return;
+
+      let focal = cards.find((c) => c.dataset.puFocus === "true");
+      if (!focal) {
+        focal = cards[Math.floor(cards.length / 2)];
+        focal.dataset.puFocus = "true";
+      }
+
+      const focusRow = Number(focal.dataset.puRow ?? 0);
+      const focusCol = Number(focal.dataset.puCol ?? 0);
+      const push = parseFloat(getComputedStyle(grid).getPropertyValue("--pu-sibling-push")) || 900;
+
+      cards.forEach((card) => {
+        if (card === focal) return;
+        const row = Number(card.dataset.puRow ?? 0);
+        const col = Number(card.dataset.puCol ?? 0);
+        const dCol = col - focusCol;
+        const dRow = row - focusRow;
+        const mag = Math.hypot(dCol, dRow) || 1;
+        const nx = (dCol / mag) * push * mag;
+        const ny = (dRow / mag) * push * mag;
+        card.style.setProperty("--pu-dx", `${nx}px`);
+        card.style.setProperty("--pu-dy", `${ny}px`);
+      });
+    });
+  })();
+</script>
+
+<!--
+  Timeline integration example (paste into your composition's GSAP timeline):
+
+  tl.fromTo(
+    ".parallax-unzoom-grid",
+    { "--pu-progress": 0 },
+    {
+      "--pu-progress": 1,
+      duration: 2.4,
+      ease: "power2.inOut",
+    },
+    startTime, // start time in seconds
+  );
+
+  Chaining with parallax-zoom example:
+  // Scene 1 (0-3s): zoom IN to the focal card via parallax-zoom
+  // Scene 2 (3-6s): unzoom OUT of a NEW grid via parallax-unzoom,
+  //                 with the focal card pre-positioned to match scene 1
+-->
diff --git a/docs/public/catalog/components/parallax-zoom/demo.html b/docs/public/catalog/components/parallax-zoom/demo.html
new file mode 100644
index 0000000000..b9fe0937dd
--- /dev/null
+++ b/docs/public/catalog/components/parallax-zoom/demo.html
@@ -0,0 +1,342 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Parallax Zoom — Demo</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800;900&display=swap"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #1a1a20;
+        font-family: "Inter", system-ui, sans-serif;
+      }
+
+      .demo-canvas {
+        width: 1920px;
+        height: 1080px;
+        position: relative;
+        overflow: hidden;
+      }
+
+      .parallax-zoom-grid {
+        display: grid;
+        grid-template-columns: repeat(5, 360px);
+        grid-template-rows: repeat(3, 341px);
+        gap: 30px;
+      }
+
+      .parallax-zoom-card {
+        border-radius: 22px;
+        overflow: hidden;
+        position: relative;
+        box-shadow: 0 12px 36px rgba(20, 20, 30, 0.08);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0;
+      }
+
+      .card-glyph {
+        font-size: 92px;
+        font-weight: 800;
+        color: rgba(255, 255, 255, 0.92);
+        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
+        letter-spacing: -0.04em;
+        line-height: 1;
+      }
+
+      .pz-c0 {
+        background: linear-gradient(135deg, #3a8b6f, #1d4d3d);
+      }
+      .pz-c1 {
+        background: linear-gradient(135deg, #8b4a3a, #4a2418);
+      }
+      .pz-c2 {
+        background: linear-gradient(135deg, #c89868, #8a6038);
+      }
+      .pz-c3 {
+        background: linear-gradient(135deg, #3a6088, #1a2f4a);
+      }
+      .pz-c4 {
+        background: linear-gradient(135deg, #b03838, #6a1818);
+      }
+      .pz-c5 {
+        background: linear-gradient(135deg, #bcbcbc, #6e6e6e);
+      }
+      .pz-c6 {
+        background: linear-gradient(135deg, #8a5fa0, #4a2860);
+      }
+      .pz-c7-focus {
+        background: linear-gradient(135deg, #f5c93f, #d99a18);
+      }
+      .pz-c8 {
+        background: linear-gradient(135deg, #d8d8d8, #9a9a9a);
+      }
+      .pz-c9 {
+        background: linear-gradient(135deg, #5fa37e, #2a6a4a);
+      }
+      .pz-c10 {
+        background: linear-gradient(135deg, #d1b66a, #8a7028);
+      }
+      .pz-c11 {
+        background: linear-gradient(135deg, #4f7fc0, #1f3f80);
+      }
+      .pz-c12 {
+        background: linear-gradient(135deg, #5a3a8f, #2a1858);
+      }
+      .pz-c13 {
+        background: linear-gradient(135deg, #b85a3a, #6a2818);
+      }
+      .pz-c14 {
+        background: linear-gradient(135deg, #f0f0e8, #c8c8be);
+      }
+
+      .parallax-zoom-card[data-pz-focus="true"] {
+        grid-column: 3;
+        grid-row: 2;
+      }
+
+      .focus-label {
+        font-weight: 900;
+        font-size: 56px;
+        letter-spacing: -0.04em;
+        color: #1a1208;
+        text-align: center;
+        line-height: 1;
+      }
+
+      .focus-label small {
+        display: block;
+        font-size: 18px;
+        font-weight: 600;
+        letter-spacing: 0.18em;
+        margin-bottom: 14px;
+        color: rgba(26, 18, 8, 0.7);
+      }
+
+      .zoom-backdrop {
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(135deg, #f5c93f, #d99a18);
+        opacity: 0;
+        z-index: 0;
+      }
+
+      .hero-headline {
+        position: absolute;
+        top: 80px;
+        left: 0;
+        width: 100%;
+        text-align: center;
+        font-size: 68px;
+        font-weight: 800;
+        letter-spacing: -0.03em;
+        color: #1a1a1a;
+        opacity: 0;
+        z-index: 20;
+      }
+
+      .parallax-zoom-grid {
+        --pz-progress: 0;
+        --pz-focus-scale: 6;
+        --pz-sibling-push: 900px;
+        --pz-sibling-fade: 1;
+        position: relative;
+      }
+
+      .parallax-zoom-card {
+        transform-origin: center center;
+        will-change: transform, opacity;
+        transform: translate3d(
+            calc(var(--pz-dx, 0px) * var(--pz-progress)),
+            calc(var(--pz-dy, 0px) * var(--pz-progress)),
+            0
+          )
+          scale(calc(1 - var(--pz-progress) * 0.4));
+      }
+
+      .parallax-zoom-card[data-pz-focus="true"] {
+        z-index: 10;
+        transform: translate3d(0, 0, 0)
+          scale(calc(1 + var(--pz-progress) * (var(--pz-focus-scale) - 1)));
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="parallax-zoom-demo"
+      data-width="1920"
+      data-height="1080"
+      data-duration="6"
+      data-start="0"
+    >
+      <div class="demo-canvas">
+        <div class="zoom-backdrop"></div>
+        <div class="hero-headline">Inspired by how people discover.</div>
+
+        <div class="parallax-zoom-grid">
+          <div class="parallax-zoom-card pz-c0" data-pz-row="0" data-pz-col="0">
+            <span class="card-glyph">◇</span>
+          </div>
+          <div class="parallax-zoom-card pz-c1" data-pz-row="0" data-pz-col="1">
+            <span class="card-glyph">◐</span>
+          </div>
+          <div class="parallax-zoom-card pz-c2" data-pz-row="0" data-pz-col="2">
+            <span class="card-glyph">◯</span>
+          </div>
+          <div class="parallax-zoom-card pz-c3" data-pz-row="0" data-pz-col="3">
+            <span class="card-glyph">◑</span>
+          </div>
+          <div class="parallax-zoom-card pz-c4" data-pz-row="0" data-pz-col="4">
+            <span class="card-glyph">▲</span>
+          </div>
+
+          <div class="parallax-zoom-card pz-c5" data-pz-row="1" data-pz-col="0">
+            <span class="card-glyph">✦</span>
+          </div>
+          <div class="parallax-zoom-card pz-c6" data-pz-row="1" data-pz-col="1">
+            <span class="card-glyph">❖</span>
+          </div>
+          <div
+            class="parallax-zoom-card pz-c7-focus"
+            data-pz-row="1"
+            data-pz-col="2"
+            data-pz-focus="true"
+          >
+            <div class="focus-label">
+              <small>EBAY PLAYBOOK</small>
+              DISCOVER
+            </div>
+          </div>
+          <div class="parallax-zoom-card pz-c8" data-pz-row="1" data-pz-col="3">
+            <span class="card-glyph">✧</span>
+          </div>
+          <div class="parallax-zoom-card pz-c9" data-pz-row="1" data-pz-col="4">
+            <span class="card-glyph">◈</span>
+          </div>
+
+          <div class="parallax-zoom-card pz-c10" data-pz-row="2" data-pz-col="0">
+            <span class="card-glyph">▼</span>
+          </div>
+          <div class="parallax-zoom-card pz-c11" data-pz-row="2" data-pz-col="1">
+            <span class="card-glyph">◆</span>
+          </div>
+          <div class="parallax-zoom-card pz-c12" data-pz-row="2" data-pz-col="2">
+            <span class="card-glyph">●</span>
+          </div>
+          <div class="parallax-zoom-card pz-c13" data-pz-row="2" data-pz-col="3">
+            <span class="card-glyph">◭</span>
+          </div>
+          <div class="parallax-zoom-card pz-c14" data-pz-row="2" data-pz-col="4">
+            <span class="card-glyph" style="color: rgba(40, 40, 40, 0.7)">◇</span>
+          </div>
+        </div>
+      </div>
+
+      <script>
+        (function () {
+          const grids = document.querySelectorAll(".parallax-zoom-grid");
+          grids.forEach((grid) => {
+            const cards = Array.from(grid.querySelectorAll(".parallax-zoom-card"));
+            if (cards.length === 0) return;
+            let focal = cards.find((c) => c.dataset.pzFocus === "true");
+            if (!focal) {
+              focal = cards[Math.floor(cards.length / 2)];
+              focal.dataset.pzFocus = "true";
+            }
+            const focusRow = Number(focal.dataset.pzRow ?? 0);
+            const focusCol = Number(focal.dataset.pzCol ?? 0);
+            const push =
+              parseFloat(getComputedStyle(grid).getPropertyValue("--pz-sibling-push")) || 900;
+            cards.forEach((card) => {
+              if (card === focal) return;
+              const row = Number(card.dataset.pzRow ?? 0);
+              const col = Number(card.dataset.pzCol ?? 0);
+              const dCol = col - focusCol;
+              const dRow = row - focusRow;
+              const mag = Math.hypot(dCol, dRow) || 1;
+              const nx = (dCol / mag) * push * mag;
+              const ny = (dRow / mag) * push * mag;
+              card.style.setProperty("--pz-dx", `${nx}px`);
+              card.style.setProperty("--pz-dy", `${ny}px`);
+            });
+          });
+
+          const tl = gsap.timeline({ paused: true });
+
+          tl.to(
+            ".parallax-zoom-card",
+            {
+              opacity: 1,
+              duration: 0.5,
+              ease: "power2.out",
+              stagger: { each: 0.03, from: "center" },
+            },
+            0,
+          );
+
+          tl.fromTo(
+            ".parallax-zoom-grid",
+            { "--pz-progress": 0 },
+            {
+              "--pz-progress": 1,
+              duration: 3.0,
+              ease: "power2.inOut",
+            },
+            1.7,
+          );
+
+          tl.to(
+            ".parallax-zoom-card:not([data-pz-focus='true'])",
+            {
+              opacity: 0,
+              duration: 1.0,
+              ease: "power2.in",
+            },
+            3.5,
+          );
+
+          tl.to(
+            ".focus-label",
+            {
+              opacity: 0,
+              duration: 1.0,
+              ease: "power2.in",
+            },
+            2.5,
+          );
+
+          tl.to(
+            ".hero-headline",
+            {
+              opacity: 1,
+              duration: 0.7,
+              ease: "power2.out",
+            },
+            4.2,
+          );
+
+          window.__timelines = window.__timelines || {};
+          window.__timelines["parallax-zoom-demo"] = tl;
+        })();
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/parallax-zoom/parallax-zoom.html b/docs/public/catalog/components/parallax-zoom/parallax-zoom.html
new file mode 100644
index 0000000000..64eea25eee
--- /dev/null
+++ b/docs/public/catalog/components/parallax-zoom/parallax-zoom.html
@@ -0,0 +1,99 @@
+<!--
+  Parallax Zoom — center card scales up while siblings parallax outward.
+
+  Inspired by the eBay Playbook hero transition: a grid of cards collapses
+  as the focal card grows to fill the frame.
+
+  Usage:
+  1. Wrap your card grid with class="parallax-zoom-grid".
+  2. Mark each card with class="parallax-zoom-card".
+  3. Add data-pz-row="0|1|2|..." and data-pz-col="0|1|2|..." per card
+     so the snippet knows each card's grid offset.
+  4. Mark the focal card with data-pz-focus="true" — this is the one
+     that scales up to fill the frame.
+  5. Drive --pz-progress 0 → 1 on the .parallax-zoom-grid from your
+     composition's paused GSAP timeline (see example at bottom).
+
+  Tunable CSS variables on .parallax-zoom-grid:
+  - --pz-focus-scale  (default 6)      maximum scale of the focused card
+  - --pz-sibling-push (default 900px)  outward translation strength
+  - --pz-sibling-fade (default 1)      sibling opacity falloff (0–1)
+-->
+
+<style>
+  .parallax-zoom-grid {
+    --pz-progress: 0;
+    --pz-focus-scale: 6;
+    --pz-sibling-push: 900px;
+    --pz-sibling-fade: 1;
+    position: relative;
+  }
+
+  .parallax-zoom-card {
+    transform-origin: center center;
+    will-change: transform, opacity;
+    transform: translate3d(
+        calc(var(--pz-dx, 0px) * var(--pz-progress)),
+        calc(var(--pz-dy, 0px) * var(--pz-progress)),
+        0
+      )
+      scale(calc(1 - var(--pz-progress) * 0.4));
+    opacity: calc(1 - var(--pz-progress) * var(--pz-sibling-fade));
+  }
+
+  .parallax-zoom-card[data-pz-focus="true"] {
+    z-index: 10;
+    transform: translate3d(0, 0, 0)
+      scale(calc(1 + var(--pz-progress) * (var(--pz-focus-scale) - 1)));
+    opacity: 1;
+  }
+</style>
+
+<script>
+  (function () {
+    const grids = document.querySelectorAll(".parallax-zoom-grid");
+
+    grids.forEach((grid) => {
+      const cards = Array.from(grid.querySelectorAll(".parallax-zoom-card"));
+      if (cards.length === 0) return;
+
+      let focal = cards.find((c) => c.dataset.pzFocus === "true");
+      if (!focal) {
+        focal = cards[Math.floor(cards.length / 2)];
+        focal.dataset.pzFocus = "true";
+      }
+
+      const focusRow = Number(focal.dataset.pzRow ?? 0);
+      const focusCol = Number(focal.dataset.pzCol ?? 0);
+      const push = parseFloat(getComputedStyle(grid).getPropertyValue("--pz-sibling-push")) || 900;
+
+      cards.forEach((card) => {
+        if (card === focal) return;
+        const row = Number(card.dataset.pzRow ?? 0);
+        const col = Number(card.dataset.pzCol ?? 0);
+        const dCol = col - focusCol;
+        const dRow = row - focusRow;
+        const mag = Math.hypot(dCol, dRow) || 1;
+        const nx = (dCol / mag) * push * mag;
+        const ny = (dRow / mag) * push * mag;
+        card.style.setProperty("--pz-dx", `${nx}px`);
+        card.style.setProperty("--pz-dy", `${ny}px`);
+      });
+    });
+  })();
+</script>
+
+<!--
+  Timeline integration example (paste into your composition's GSAP timeline):
+
+  tl.fromTo(
+    ".parallax-zoom-grid",
+    { "--pz-progress": 0 },
+    {
+      "--pz-progress": 1,
+      duration: 2.4,
+      ease: "power2.inOut",
+    },
+    1.0, // start time in seconds
+  );
+-->
diff --git a/docs/public/catalog/components/particle-image-reveal/README.md b/docs/public/catalog/components/particle-image-reveal/README.md
new file mode 100644
index 0000000000..5698c5d9df
--- /dev/null
+++ b/docs/public/catalog/components/particle-image-reveal/README.md
@@ -0,0 +1,51 @@
+# particle-image-reveal
+
+A seeded deterministic particle field materializes a supplied image: accent particles converge and settle across the frame while the image reveals beneath them (left-to-right wipe or center iris, matching the particle sweep), the trail thinning until the last particle lands and the image holds clean.
+
+4s authored, elastic HOLD, exit `none` by default.
+
+## Variables
+
+| id          | type | default | notes                                                                                                                   |
+| ----------- | ---- | ------- | ----------------------------------------------------------------------------------------------------------------------- |
+| `density`   | enum | `med`   | Particle count: `low` (320), `med` (640), `high` (1100).                                                                |
+| `direction` | enum | `ltr`   | `ltr` sweeps the reveal left to right; `center` opens an iris from the middle outward with particles converging inward. |
+| `accent`    | enum | `green` | Particle and monogram color: green rides `--brand`, blue rides `--accent`, violet rides `--accent-2`.                   |
+| `exit`      | enum | `none`  | `none` holds until the cut; `fade` departs opacity-only; `up` rises out.                                                |
+
+## Image slot
+
+The image is a slot. Place an inert template anywhere in the HOST page (templates never render, and the runtime wipes the host clip's own children on mount, so the slot lives at document level):
+
+```html
+<template data-slot="particle-image-reveal-image">
+  <img src="./assets/hero.png" alt="" />
+</template>
+```
+
+Slot content may be an `<img>`, a muted `<video>`, or arbitrary HTML; direct img/video children are stretched to cover the stage. With no slot, the primitive renders a token monogram (surface tile, one display glyph, contract tokens only).
+
+Particle targets are distributed across the whole stage, not sampled from the image's pixels; the synced wipe/iris is what binds field and image.
+
+## Mount
+
+```html
+<div
+  class="clip"
+  data-composition-id="particle-image-reveal"
+  data-composition-src="./particle-image-reveal.html"
+  data-variable-values='{"direction":"center","accent":"violet","density":"high"}'
+  data-start="0"
+  data-duration="4"
+  data-track-index="0"
+></div>
+```
+
+Elastic root: no `data-width`/`data-height`; it fills whatever box the host clip gives it. Timeline registers under the literal `particle-image-reveal` key.
+
+## Notes
+
+- Deterministic canvas: one per-particle attribute table is built once from fixed LCG seed `0x50a71c1e`; every painted frame is a pure function of (table, timeline time). The timeline's `onUpdate` clears and repaints from scratch, so eventful seeks (`suppressEvents=false`, the engine's render path) land byte-identical frames in any order and either direction.
+- By the end of IN every particle's alpha is exactly zero: the HOLD canvas is a single clear rect, so the hold is truly still.
+- The canvas raster is sized once at mount from the host box and devicePixelRatio (capped at 2); the same host always yields the same raster.
+- The hold is truly still by design: a fractional transform drift would re-raster the slot/canvas layer at seek-history-dependent subpixel offsets and break byte-identical frames, so the reveal supplies the life and the hold supplies calm.
diff --git a/docs/public/catalog/components/particle-image-reveal/demo.html b/docs/public/catalog/components/particle-image-reveal/demo.html
new file mode 100644
index 0000000000..ffc887c431
--- /dev/null
+++ b/docs/public/catalog/components/particle-image-reveal/demo.html
@@ -0,0 +1,108 @@
+<!doctype html>
+<!--
+  particle-image-reveal demo. This standalone composition mounts the
+  primitive through data-composition-src. Non-default direction, density,
+  and accent values prove the variable path; the default token monogram
+  fills the image slot while the primitive stays elastic to its host.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Particle Image Reveal Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #0b0c0e);
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --surface: #14171c;
+        --border: #343a46;
+        --brand: #71f5a7;
+        --accent: #61a8ff;
+        --accent-2: #c5a3ff;
+        --font-display: "Inter", system-ui, sans-serif;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(
+          ellipse at 50% 44%,
+          var(--bg, #171a20) 0%,
+          var(--bg, #0b0c0e) 72%
+        );
+      }
+
+      .mount-card {
+        width: 62%;
+        height: 72%;
+        left: 19%;
+        top: 14%;
+        container-type: size;
+        overflow: hidden;
+        border: 1px solid color-mix(in srgb, var(--border, #94a3b8) 20%, transparent);
+        border-radius: 30px;
+        background: color-mix(in srgb, var(--surface, #101318) 72%, transparent);
+        box-shadow: 0 40px 100px color-mix(in srgb, var(--bg, #000000) 48%, transparent);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="particle-image-reveal-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="particle-image-reveal-mount"
+        class="mount-card clip"
+        data-composition-id="particle-image-reveal"
+        data-composition-src="./particle-image-reveal.html"
+        data-variable-values='{"direction":"center","accent":"violet","density":"high"}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="1190"
+        data-height="778"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["particle-image-reveal-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "particle-image-reveal.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/particle-image-reveal/particle-image-reveal.html b/docs/public/catalog/components/particle-image-reveal/particle-image-reveal.html
new file mode 100644
index 0000000000..fcd3a15c48
--- /dev/null
+++ b/docs/public/catalog/components/particle-image-reveal/particle-image-reveal.html
@@ -0,0 +1,392 @@
+<!doctype html>
+<!--
+  particle-image-reveal: HyperFrames video primitive (intros & reveals)
+
+  A seeded deterministic particle field materializes a supplied image: accent
+  particles converge and settle across the frame while the image reveals
+  beneath them (left-to-right wipe or center iris, matching the particle
+  sweep), the trail thinning until the last particle lands and the image
+  holds clean.
+
+  The image is a SLOT. Callers supply content by placing an inert template
+  anywhere in the HOST page (templates never render, and the runtime wipes
+  the host clip's own children on mount, so the slot lives at document
+  level):
+
+    <template data-slot="particle-image-reveal-image"> ... </template>
+
+  Slot content may be an <img>, a muted <video>, or arbitrary HTML; direct
+  img/video children are stretched to cover the stage. When no slot exists,
+  the primitive renders a token monogram: a surface tile with one display
+  glyph, drawn entirely from contract tokens.
+
+  Variables (declared in data-composition-variables below):
+    - density ("low" | "med" | "high", default "med"): particle count.
+    - direction ("ltr" | "center", default "ltr"): ltr sweeps the reveal
+      left to right; center opens an iris from the middle outward.
+    - accent ("green" | "blue" | "violet", default "green"): green rides
+      --brand, blue rides --accent, violet rides --accent-2.
+    - exit ("none" | "fade" | "up", default "none"): frame roots own
+      transitions; the default holds the final frame to the last pixel.
+
+  Envelope, fixed IN and OUT with elastic HOLD only (never timeScale):
+    IN_BASE  = 2.80s  particles converge, image reveals, trail thins to zero
+    HOLD     = max(0, D - IN - OUT); truly still: any fractional transform
+               drift would re-raster the slot/canvas layer at seek-history-
+               dependent subpixel offsets and break byte-identical frames
+    OUT_BASE = 0.45s  only when exit != none
+    If D < IN_BASE + OUT_BASE, IN and OUT compress together.
+
+  Determinism (canvas 2D law): one per-particle attribute table is computed
+  exactly once during synchronous timeline construction from fixed LCG seed
+  0x50a71c1e. Every painted frame is a pure function of (that table, the
+  timeline's current time): the timeline's onUpdate clears the canvas and
+  redraws every particle from scratch. No Math.random, no wall clock, no
+  incremental state, no requestAnimationFrame. Eventful seeks
+  (suppressEvents=false, the engine's render path) repaint identically in
+  any order and either direction; by the end of IN every particle's alpha
+  is exactly zero, so the HOLD canvas is one clear rect.
+
+  Mount contract: the runtime clones only this template. #root fills the
+  host box (no data-width/data-height, container-type: size, cqmin units),
+  is styled via #root only, and registers one paused timeline under the
+  LITERAL "particle-image-reveal" key. All DOM state is set with explicit
+  endpoints (gsap.set + fromTo) so any seek order lands identical frames.
+-->
+<html
+  lang="en"
+  data-composition-id="particle-image-reveal"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "density", "type": "enum", "role": "style", "label": "Density", "description": "Particle count for the converging field.", "default": "med", "options": [{ "value": "low", "label": "Low" }, { "value": "med", "label": "Medium" }, { "value": "high", "label": "High" }] },
+    { "id": "direction", "type": "enum", "role": "timing", "label": "Direction", "description": "ltr sweeps the reveal left to right; center opens an iris from the middle outward.", "default": "ltr", "options": [{ "value": "ltr", "label": "Left to right" }, { "value": "center", "label": "Center out" }] },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Particle and monogram color: green rides --brand, blue rides --accent, violet rides --accent-2.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the revealed image holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Particle Image Reveal</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="particle-image-reveal" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, "Inter", system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .pir-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .pir-stage {
+            position: absolute;
+            inset: 0;
+            will-change: transform, opacity;
+          }
+
+          .pir-image {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+            will-change: clip-path, opacity;
+          }
+
+          .pir-image > img,
+          .pir-image > video {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+          }
+
+          .pir-monogram {
+            display: grid;
+            place-items: center;
+            width: 52cqmin;
+            height: 52cqmin;
+            border: 0.18cqmin solid
+              color-mix(in srgb, var(--pir-accent) 52%, var(--border, #475569));
+            border-radius: var(--radius, 3cqmin);
+            background: color-mix(in srgb, var(--surface, #14171c) 90%, var(--pir-accent));
+            box-shadow: 0 3cqh 9cqh color-mix(in srgb, var(--bg, #000000) 40%, transparent);
+          }
+
+          .pir-monogram-glyph {
+            color: var(--pir-accent);
+            font-size: 26cqmin;
+            font-weight: 600;
+            line-height: 1;
+            letter-spacing: 0.02em;
+          }
+
+          .pir-canvas {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+          }
+        </style>
+
+        <div
+          id="particle-image-reveal-clip"
+          class="pir-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="pir-stage">
+            <div class="pir-image">
+              <div class="pir-monogram">
+                <span class="pir-monogram-glyph" aria-hidden="true">H</span>
+              </div>
+            </div>
+            <canvas class="pir-canvas" aria-hidden="true"></canvas>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".pir-stage");
+            var imageLayer = root.querySelector(".pir-image");
+            var canvas = root.querySelector(".pir-canvas");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var densityCounts = { low: 320, med: 640, high: 1100 };
+            var density = Object.prototype.hasOwnProperty.call(densityCounts, vars.density)
+              ? vars.density
+              : "med";
+            var direction = vars.direction === "center" ? "center" : "ltr";
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            root.style.setProperty("--pir-accent", accentColors[accent]);
+
+            // SLOT. Caller templates live at HOST DOCUMENT level (the mount
+            // wipes host-clip children, and templates never render). The
+            // scoped document proxy filters queries to this composition's
+            // subtree, so the lookup deliberately goes through ownerDocument.
+            var hostDoc = root.ownerDocument;
+            var slotTemplate = null;
+            try {
+              slotTemplate = hostDoc.querySelector(
+                'template[data-slot="particle-image-reveal-image"]',
+              );
+            } catch (error) {
+              slotTemplate = null;
+            }
+            if (slotTemplate) {
+              imageLayer.querySelector(".pir-monogram").remove();
+              imageLayer.appendChild(hostDoc.importNode(slotTemplate.content, true));
+            }
+
+            // Envelope: fixed IN/OUT, elastic HOLD, never time-scaled.
+            var IN_BASE = 2.8;
+            var OUT_BASE = exit === "none" ? 0 : 0.45;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var totalBase = Math.max(0.001, IN_BASE + OUT_BASE);
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var OUT_START = IN + HOLD;
+
+            // Canvas raster basis is fixed once at mount. Elastic root: the
+            // host box decides the resolution; the same host always yields
+            // the same raster, so painted frames stay byte-stable.
+            var dpr = Math.min(2, Math.max(1, Number(window.devicePixelRatio) || 1));
+            var box = root.getBoundingClientRect();
+            var cssW = Math.max(1, Math.round(box.width) || 640);
+            var cssH = Math.max(1, Math.round(box.height) || 360);
+            canvas.width = Math.round(cssW * dpr);
+            canvas.height = Math.round(cssH * dpr);
+            var ctx = canvas.getContext("2d");
+            var minDim = Math.min(canvas.width, canvas.height);
+
+            // Resolve the accent token to a concrete color once at mount so
+            // canvas fills never depend on style recalc during seeks.
+            var probe = hostDoc.createElement("span");
+            probe.style.color = accentColors[accent];
+            root.appendChild(probe);
+            var particleColor = getComputedStyle(probe).color || "#71f5a7";
+            probe.remove();
+
+            // The LCG and every per-particle decision live here. This IIFE
+            // runs once before timeline construction, then only the table is
+            // read. Particle state at any time is a pure function of
+            // (table row, timeline time).
+            var COUNT = densityCounts[density];
+            var particles = (function () {
+              var state = 0x50a71c1e;
+              function next() {
+                state = (Math.imul(1664525, state) + 1013904223) >>> 0;
+                return state / 4294967296;
+              }
+              var rows = [];
+              for (var i = 0; i < COUNT; i += 1) {
+                var tx = next();
+                var ty = next();
+                var key =
+                  direction === "center"
+                    ? Math.min(1, Math.hypot(tx - 0.5, ty - 0.5) / 0.7071)
+                    : tx;
+                // Arrival and birth are fractions of IN. Arrivals sweep with
+                // the reveal front; every fade completes by p = 1 exactly.
+                var arrive = 0.24 + 0.66 * key + 0.04 * next();
+                var travel = 0.2 + 0.12 * next();
+                var fade = 0.05 + 0.04 * next();
+                var angle;
+                if (direction === "center") {
+                  // Converge inward: start displaced radially outward.
+                  angle = Math.atan2(ty - 0.5, tx - 0.5);
+                  if (tx === 0.5 && ty === 0.5) angle = next() * Math.PI * 2;
+                } else {
+                  // Fly in from the left, within a 90 degree cone.
+                  angle = Math.PI + (next() - 0.5) * (Math.PI / 2);
+                }
+                rows.push({
+                  tx: tx,
+                  ty: ty,
+                  arrive: Math.min(0.94, arrive),
+                  birth: Math.max(0, arrive - travel),
+                  fade: fade,
+                  offset: (0.06 + 0.14 * next()) * minDim,
+                  ox: Math.cos(angle),
+                  oy: Math.sin(angle),
+                  radius: (0.28 + 0.62 * next()) * (minDim / 100),
+                  dim: 0.55 + 0.45 * next(),
+                });
+              }
+              return rows;
+            })();
+
+            function clamp01(v) {
+              return v < 0 ? 0 : v > 1 ? 1 : v;
+            }
+
+            // Pure repaint: clear, then draw every particle from (row, p).
+            function paint(timeSeconds) {
+              ctx.clearRect(0, 0, canvas.width, canvas.height);
+              var p = IN > 0 ? clamp01(timeSeconds / IN) : 1;
+              // Global end clamp: the whole field is gone exactly at p = 1,
+              // and the trail thins as the reveal completes.
+              var endClamp = clamp01((1 - p) / 0.05);
+              if (endClamp === 0) return;
+              var thin = 1 - 0.4 * clamp01((p - 0.72) / 0.28);
+              ctx.fillStyle = particleColor;
+              for (var i = 0; i < particles.length; i += 1) {
+                var row = particles[i];
+                var u = clamp01((p - row.birth) / (row.arrive - row.birth));
+                if (u <= 0) continue;
+                var settled = clamp01((p - row.arrive) / row.fade);
+                var alpha = clamp01(u / 0.14) * (1 - settled) * endClamp * thin * row.dim * 0.92;
+                if (alpha <= 0.002) continue;
+                var e = 1 - Math.pow(1 - u, 3);
+                var x = row.tx * canvas.width + row.ox * row.offset * (1 - e);
+                var y = row.ty * canvas.height + row.oy * row.offset * (1 - e);
+                var r = row.radius * dpr * (0.6 + 0.4 * (1 - settled));
+                ctx.globalAlpha = alpha;
+                ctx.beginPath();
+                ctx.arc(x, y, r, 0, Math.PI * 2);
+                ctx.fill();
+              }
+              ctx.globalAlpha = 1;
+            }
+
+            // Image reveal geometry follows the particle sweep.
+            var clipFrom =
+              direction === "center" ? "circle(0% at 50% 50%)" : "inset(0% 100% 0% 0%)";
+            var clipTo = direction === "center" ? "circle(75% at 50% 50%)" : "inset(0% 0% 0% 0%)";
+
+            gsap.set(stage, { opacity: 1, y: "0cqh" });
+            gsap.set(imageLayer, { opacity: 0, clipPath: clipFrom });
+
+            var tl = gsap.timeline({
+              paused: true,
+              onUpdate: function () {
+                paint(tl.time());
+              },
+            });
+
+            // Anchor tween: an inert plain-object tween spanning the full
+            // authored duration. Without it the timeline would end at the
+            // last DOM tween (2.69s) and seeks into the hold would clamp
+            // tl.time() below IN, freezing the particle field short of its
+            // authored zero. It also guarantees onUpdate fires (and the
+            // canvas repaints) for every eventful seek anywhere in [0, D].
+            tl.to({ p: 0 }, { p: 1, duration: duration, ease: "none" }, 0);
+
+            // IN: the image fades up beneath the particles and reveals along
+            // the same front the arrivals sweep. Both endpoints authored.
+            tl.fromTo(
+              imageLayer,
+              { opacity: 0 },
+              { opacity: 1, duration: IN * 0.42, ease: "power2.out" },
+              IN * 0.18,
+            );
+            tl.fromTo(
+              imageLayer,
+              { clipPath: clipFrom },
+              { clipPath: clipTo, duration: IN * 0.74, ease: "power2.inOut" },
+              IN * 0.22,
+            );
+
+            // HOLD: truly still, deliberately. Fractional transform drift
+            // re-rasters the slot/canvas layer at history-dependent subpixel
+            // offsets and breaks byte-identical seeks (the K1 cq-transform
+            // trap); the reveal supplies the life, the hold supplies calm.
+
+            // OUT: optional departure; exit none holds until the frame cuts.
+            if (exit === "up") {
+              tl.to(stage, { y: "-4cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "fade") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            }
+
+            tl.seek(0);
+            paint(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["particle-image-reveal"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/particle-text-dissolve/README.md b/docs/public/catalog/components/particle-text-dissolve/README.md
new file mode 100644
index 0000000000..546a388ecb
--- /dev/null
+++ b/docs/public/catalog/components/particle-text-dissolve/README.md
@@ -0,0 +1,38 @@
+# particle-text-dissolve
+
+Text assembles FROM a seeded particle cloud, or dissolves TO it: per-particle target positions are sampled ONCE at mount from the rendered text bitmap (the token-styled line is rastered to an offscreen canvas and read back with getImageData), then the field runs table-driven with zero per-particle tweens and one `onUpdate` painter. Direct donor: particle-image-reveal.
+
+4s authored, elastic HOLD, exit `none` by default. Wave M experiment (watch page only, not on the hero shelf).
+
+## Variables
+
+| id          | type   | default    | notes                                                                                                                          |
+| ----------- | ------ | ---------- | ------------------------------------------------------------------------------------------------------------------------------ |
+| `text`      | string | `Dissolve` | The line that assembles or dissolves. Sized to fit at mount (up to 86% of the stage width).                                    |
+| `direction` | enum   | `in`       | `in` assembles the line from the cloud and holds it crisp; `out` erases the line left to right into the cloud and holds empty. |
+| `density`   | enum   | `med`      | Particle count cap: `low` (900), `med` (1700), `high` (2800).                                                                  |
+| `accent`    | enum   | `green`    | Text and particle color: green rides `--brand`, blue rides `--accent`, violet rides `--accent-2`.                              |
+| `exit`      | enum   | `none`     | `none` holds until the cut; `fade` departs opacity-only; `up` rises out.                                                       |
+
+## Mount
+
+```html
+<div
+  class="clip"
+  data-composition-id="particle-text-dissolve"
+  data-composition-src="./particle-text-dissolve.html"
+  data-variable-values='{"text":"Particles","direction":"in","density":"high","accent":"violet"}'
+  data-start="0"
+  data-duration="4"
+  data-track-index="0"
+></div>
+```
+
+Elastic root: no `data-width`/`data-height`; it fills whatever box the host clip gives it. Timeline registers under the literal `particle-text-dissolve` key.
+
+## Notes
+
+- Bitmap sampling happens exactly once, synchronously at mount: the line is drawn to an offscreen canvas with the DOM line's computed font stack and a fitted pixel size, lit cells on a deterministic grid become targets, and the set is thinned to the density cap with fixed LCG seed `0x9d1550f7` (one draw per cell, grid order). The crisp DOM line locks to the same family and device-pixel size, so targets sit on the glyphs it draws.
+- Every painted frame is a pure function of (table, timeline time): the anchor tween's `onUpdate` clears and repaints the whole field. No Math.random, no wall clock, no incremental state, so eventful seeks (`suppressEvents=false`, the engine's render path) land byte-identical frames in any order and either direction.
+- The reveal (or erase) front sweeps left to right for both directions; the DOM line's clip-path wipe rides the same front. By the end of IN every particle's alpha is exactly zero: the HOLD canvas is one clear rect, holding either the crisp themable DOM line (`in`) or an empty stage (`out`).
+- The canvas raster is sized once at mount from the host box and devicePixelRatio (capped at 2); the same host always yields the same raster and the same particle table.
diff --git a/docs/public/catalog/components/particle-text-dissolve/demo.html b/docs/public/catalog/components/particle-text-dissolve/demo.html
new file mode 100644
index 0000000000..f82df36965
--- /dev/null
+++ b/docs/public/catalog/components/particle-text-dissolve/demo.html
@@ -0,0 +1,99 @@
+<!doctype html>
+<!--
+  particle-text-dissolve demo. This standalone composition mounts the
+  primitive FULL-BLEED through data-composition-src on the dark register.
+  Non-default text, density, and accent values prove the variable path;
+  direction stays "in" so the watch-page hold lands on the crisp line.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Particle Text Dissolve Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #0b0c0e);
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --muted: #94a3b8;
+        --surface: #14171c;
+        --border: #343a46;
+        --brand: #71f5a7;
+        --accent: #61a8ff;
+        --accent-2: #c5a3ff;
+        --font-display: "Inter", system-ui, sans-serif;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 44%, #171a20 0%, var(--bg, #0b0c0e) 72%);
+      }
+
+      .mount-bleed {
+        position: absolute;
+        inset: 0;
+        container-type: size;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="particle-text-dissolve-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="particle-text-dissolve-mount"
+        class="mount-bleed clip"
+        data-composition-id="particle-text-dissolve"
+        data-composition-src="./particle-text-dissolve.html"
+        data-variable-values='{"text":"Particles","density":"high","accent":"violet"}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="1920"
+        data-height="1080"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["particle-text-dissolve-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "particle-text-dissolve.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/particle-text-dissolve/particle-text-dissolve.html b/docs/public/catalog/components/particle-text-dissolve/particle-text-dissolve.html
new file mode 100644
index 0000000000..bdf47f4ca6
--- /dev/null
+++ b/docs/public/catalog/components/particle-text-dissolve/particle-text-dissolve.html
@@ -0,0 +1,414 @@
+<!doctype html>
+<!--
+  particle-text-dissolve: HyperFrames video primitive (type / particles).
+  Wave M8. Direct donor: particle-image-reveal (canvas determinism law).
+
+  Text assembles FROM a seeded particle cloud, or dissolves TO it (direction
+  enum). Per-particle target positions are sampled ONCE at mount from the
+  rendered text bitmap: the token-styled line is rastered to an offscreen
+  canvas, read back with getImageData, and every lit cell on a deterministic
+  grid becomes a particle target. Particles are table-driven with ZERO
+  per-particle tweens; one onUpdate painter clears and redraws the whole
+  field from scratch each frame.
+
+  direction "in": particles fly from a scattered cloud onto the glyphs while
+  the crisp DOM line wipes in along the same left-to-right front; each
+  particle fades as it settles, so by the end of IN the canvas is empty and
+  the DOM text holds crisp and themable.
+  direction "out": the crisp line holds for a beat, then erases left to
+  right as particles are born on the departing glyphs and scatter outward,
+  fading in flight; the HOLD is empty.
+
+  Variables (declared in data-composition-variables below):
+    - text (string, default "Dissolve"): the line that assembles/dissolves.
+    - direction ("in" | "out", default "in").
+    - density ("low" | "med" | "high", default "med"): particle count cap.
+    - accent ("green" | "blue" | "violet", default "green"): text and
+      particle color; green rides --brand, blue rides --accent, violet
+      rides --accent-2.
+    - exit ("none" | "fade" | "up", default "none"): frame roots own
+      transitions.
+
+  Envelope, fixed IN and OUT with elastic HOLD only (never timeScale):
+    IN_BASE  = 2.80s  the assembly (or dissolve) plays out completely
+    HOLD     = max(0, D - IN - OUT); truly still: direction in holds the
+               crisp DOM line, direction out holds an empty stage; either
+               way the canvas is one clear rect
+    OUT_BASE = 0.45s  only when exit != none
+    If D < IN_BASE + OUT_BASE, IN and OUT compress together.
+
+  Determinism (canvas 2D law, per particle-image-reveal): the text bitmap
+  readback and the per-particle attribute table are computed exactly once
+  during synchronous timeline construction; the table's random components
+  come from fixed LCG seed 0x9d1550f7. Every painted frame is a pure
+  function of (table, timeline time): the anchor tween's onUpdate clears
+  the canvas and redraws every particle. No Math.random, no wall clock, no
+  incremental state, no requestAnimationFrame. Eventful seeks
+  (suppressEvents=false, the engine's render path) repaint identically in
+  any order and either direction.
+
+  Mount contract: the runtime clones only this template. #root fills the
+  host box (no data-width/data-height, container-type: size, cqmin units),
+  is styled via #root only, and registers one paused timeline under the
+  LITERAL "particle-text-dissolve" key. All DOM state is set with explicit
+  endpoints (gsap.set + fromTo) so any seek order lands identical frames.
+-->
+<html
+  lang="en"
+  data-composition-id="particle-text-dissolve"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "text", "type": "string", "role": "content", "label": "Text", "description": "The line that assembles from (or dissolves into) the particle cloud.", "default": "Dissolve" },
+    { "id": "direction", "type": "enum", "role": "timing", "label": "Direction", "description": "in assembles the text from the cloud and holds it crisp; out erases the text into the cloud and holds empty.", "default": "in", "options": [{ "value": "in", "label": "Assemble in" }, { "value": "out", "label": "Dissolve out" }] },
+    { "id": "density", "type": "enum", "role": "style", "label": "Density", "description": "Particle count cap for the field.", "default": "med", "options": [{ "value": "low", "label": "Low" }, { "value": "med", "label": "Medium" }, { "value": "high", "label": "High" }] },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Text and particle color: green rides --brand, blue rides --accent, violet rides --accent-2.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the end state holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Particle Text Dissolve</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="particle-text-dissolve" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, "Inter", system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .ptd-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .ptd-stage {
+            position: absolute;
+            inset: 0;
+            will-change: transform, opacity;
+          }
+
+          .ptd-text {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            will-change: clip-path, opacity;
+          }
+
+          .ptd-line {
+            color: var(--ptd-accent);
+            font-weight: 600;
+            line-height: 1;
+            letter-spacing: 0.02em;
+            white-space: nowrap;
+          }
+
+          .ptd-canvas {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+          }
+        </style>
+
+        <div
+          id="particle-text-dissolve-clip"
+          class="ptd-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="ptd-stage">
+            <div class="ptd-text">
+              <span class="ptd-line"></span>
+            </div>
+            <canvas class="ptd-canvas" aria-hidden="true"></canvas>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".ptd-stage");
+            var textLayer = root.querySelector(".ptd-text");
+            var line = root.querySelector(".ptd-line");
+            var canvas = root.querySelector(".ptd-canvas");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var text =
+              typeof vars.text === "string" && vars.text.length > 0 ? vars.text : "Dissolve";
+            var direction = vars.direction === "out" ? "out" : "in";
+            var densityCaps = { low: 900, med: 1700, high: 2800 };
+            var density = Object.prototype.hasOwnProperty.call(densityCaps, vars.density)
+              ? vars.density
+              : "med";
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            root.style.setProperty("--ptd-accent", accentColors[accent]);
+            line.textContent = text;
+
+            // Envelope: fixed IN/OUT, elastic HOLD, never time-scaled.
+            var IN_BASE = 2.8;
+            var OUT_BASE = exit === "none" ? 0 : 0.45;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var totalBase = Math.max(0.001, IN_BASE + OUT_BASE);
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var OUT_START = IN + HOLD;
+
+            // Canvas raster basis is fixed once at mount. Elastic root: the
+            // host box decides the resolution; the same host always yields
+            // the same raster, so painted frames stay byte-stable.
+            var dpr = Math.min(2, Math.max(1, Number(window.devicePixelRatio) || 1));
+            var box = root.getBoundingClientRect();
+            var cssW = Math.max(1, Math.round(box.width) || 640);
+            var cssH = Math.max(1, Math.round(box.height) || 360);
+            canvas.width = Math.round(cssW * dpr);
+            canvas.height = Math.round(cssH * dpr);
+            var ctx = canvas.getContext("2d");
+            var minDim = Math.min(canvas.width, canvas.height);
+
+            // Resolve the accent token to a concrete color once at mount so
+            // canvas fills never depend on style recalc during seeks.
+            var hostDoc = root.ownerDocument;
+            var probe = hostDoc.createElement("span");
+            probe.style.color = accentColors[accent];
+            root.appendChild(probe);
+            var particleColor = getComputedStyle(probe).color || "#71f5a7";
+            probe.remove();
+
+            // Rendered-text raster, sampled ONCE at mount. The DOM line and
+            // the offscreen raster share the same computed font stack and the
+            // same fitted pixel size, so particle targets sit on the glyphs
+            // the crisp line will draw.
+            var fontFamily = getComputedStyle(line).fontFamily || "system-ui, sans-serif";
+            var off = hostDoc.createElement("canvas");
+            off.width = canvas.width;
+            off.height = canvas.height;
+            var offCtx = off.getContext("2d", { willReadFrequently: true });
+            var fontPx = Math.round(canvas.height * 0.3);
+            offCtx.font = "600 " + fontPx + "px " + fontFamily;
+            var measured = offCtx.measureText(text).width || 1;
+            var maxWidth = canvas.width * 0.86;
+            if (measured > maxWidth) {
+              fontPx = Math.max(8, Math.floor((fontPx * maxWidth) / measured));
+              offCtx.font = "600 " + fontPx + "px " + fontFamily;
+            }
+            offCtx.textAlign = "center";
+            offCtx.textBaseline = "middle";
+            offCtx.fillStyle = "#ffffff";
+            offCtx.fillText(text, off.width / 2, off.height / 2);
+            // Lock the crisp DOM line to the exact raster the targets came
+            // from: same family string, same device-pixel size.
+            line.style.fontFamily = fontFamily;
+            line.style.fontSize = fontPx / dpr + "px";
+
+            // The LCG and every per-particle decision live here. This IIFE
+            // runs once before timeline construction, then only the table is
+            // read. Particle state at any time is a pure function of
+            // (table row, timeline time). Zero per-particle tweens.
+            var particles = (function () {
+              var state = 0x9d1550f7;
+              function next() {
+                state = (Math.imul(1664525, state) + 1013904223) >>> 0;
+                return state / 4294967296;
+              }
+              // Grid-sample lit cells from the readback (alpha over half).
+              var data = offCtx.getImageData(0, 0, off.width, off.height).data;
+              var step = Math.max(2, Math.round(minDim / 260));
+              var cells = [];
+              var minX = Infinity;
+              var maxX = -Infinity;
+              for (var y = 0; y < off.height; y += step) {
+                for (var x = 0; x < off.width; x += step) {
+                  if (data[(y * off.width + x) * 4 + 3] > 127) {
+                    cells.push({ x: x, y: y });
+                    if (x < minX) minX = x;
+                    if (x > maxX) maxX = x;
+                  }
+                }
+              }
+              if (cells.length === 0) {
+                // Degenerate raster (empty text box): no particles, the DOM
+                // line still plays its wipe.
+                minX = 0;
+                maxX = 1;
+              }
+              var span = Math.max(1, maxX - minX);
+              // Thin deterministically to the density cap. The keep decision
+              // consumes exactly one LCG draw per cell in grid order, so the
+              // surviving set is a pure function of (raster, seed).
+              var cap = densityCaps[density];
+              var keep = cells.length > cap ? cap / cells.length : 1;
+              var rows = [];
+              for (var i = 0; i < cells.length; i += 1) {
+                var take = next() < keep;
+                if (!take) continue;
+                var tx = cells[i].x;
+                var ty = cells[i].y;
+                var key = (tx - minX) / span;
+                // The front sweeps left to right for both directions; the
+                // per-particle schedule completes strictly inside [0, 0.97].
+                var at = 0.2 + 0.62 * key + 0.05 * next();
+                var travel = 0.18 + 0.1 * next();
+                var fade = 0.05 + 0.04 * next();
+                var angle = next() * Math.PI * 2;
+                rows.push({
+                  tx: tx,
+                  ty: ty,
+                  at: Math.min(0.9, at),
+                  travel: travel,
+                  fade: fade,
+                  offset: (0.1 + 0.22 * next()) * minDim,
+                  ox: Math.cos(angle),
+                  oy: Math.sin(angle),
+                  radius: (0.26 + 0.5 * next()) * (minDim / 200) * step * 0.5,
+                  dim: 0.5 + 0.5 * next(),
+                });
+              }
+              return rows;
+            })();
+
+            function clamp01(v) {
+              return v < 0 ? 0 : v > 1 ? 1 : v;
+            }
+
+            // Pure repaint: clear, then draw every particle from (row, p).
+            // direction in: fly cloud -> glyph, fade once settled (donor
+            // law). direction out: born on the glyph as the front passes,
+            // fly outward, fade in flight. Both end all-zero by p = 1.
+            function paint(timeSeconds) {
+              ctx.clearRect(0, 0, canvas.width, canvas.height);
+              var p = IN > 0 ? clamp01(timeSeconds / IN) : 1;
+              var endClamp = clamp01((1 - p) / 0.04);
+              if (endClamp === 0) return;
+              ctx.fillStyle = particleColor;
+              for (var i = 0; i < particles.length; i += 1) {
+                var row = particles[i];
+                var alpha;
+                var dist;
+                if (direction === "in") {
+                  var birth = Math.max(0, row.at - row.travel);
+                  var u = clamp01((p - birth) / (row.at - birth));
+                  if (u <= 0) continue;
+                  var settled = clamp01((p - row.at) / row.fade);
+                  alpha = clamp01(u / 0.16) * (1 - settled) * row.dim * endClamp;
+                  var e = 1 - Math.pow(1 - u, 3);
+                  dist = row.offset * (1 - e);
+                } else {
+                  var v = clamp01((p - row.at) / row.travel);
+                  if (v <= 0) continue;
+                  alpha = clamp01(v / 0.14) * (1 - v) * row.dim * endClamp;
+                  dist = row.offset * (v * v);
+                }
+                if (alpha <= 0.002) continue;
+                var x = row.tx + row.ox * dist;
+                var y = row.ty + row.oy * dist;
+                ctx.globalAlpha = alpha * 0.92;
+                ctx.beginPath();
+                ctx.arc(x, y, row.radius, 0, Math.PI * 2);
+                ctx.fill();
+              }
+              ctx.globalAlpha = 1;
+            }
+
+            // The crisp line wipes along the same front the particles sweep.
+            var clipShown = "inset(0% 0% 0% 0%)";
+            var clipInStart = "inset(0% 100% 0% 0%)";
+            var clipOutEnd = "inset(0% 0% 0% 100%)";
+
+            gsap.set(stage, { opacity: 1, y: "0cqh" });
+
+            var tl = gsap.timeline({
+              paused: true,
+              onUpdate: function () {
+                paint(tl.time());
+              },
+            });
+
+            // Anchor tween: an inert plain-object tween spanning the full
+            // authored duration so tl.time() covers [0, D] and the painter
+            // fires on every eventful seek, including seeks into the hold.
+            tl.to({ p: 0 }, { p: 1, duration: duration, ease: "none" }, 0);
+
+            if (direction === "in") {
+              // The line reveals behind the arriving particles.
+              tl.fromTo(
+                textLayer,
+                { opacity: 0 },
+                { opacity: 1, duration: IN * 0.3, ease: "power2.out" },
+                IN * 0.16,
+              );
+              tl.fromTo(
+                textLayer,
+                { clipPath: clipInStart },
+                { clipPath: clipShown, duration: IN * 0.76, ease: "power1.inOut" },
+                IN * 0.18,
+              );
+            } else {
+              // The line erases as the front passes; particles carry it off.
+              gsap.set(textLayer, { opacity: 1 });
+              tl.fromTo(
+                textLayer,
+                { clipPath: clipShown },
+                { clipPath: clipOutEnd, duration: IN * 0.76, ease: "power1.inOut" },
+                IN * 0.18,
+              );
+            }
+
+            // HOLD: truly still. The canvas is one clear rect (every alpha
+            // is exactly zero by the end of IN) and the line is either fully
+            // shown or fully clipped; nothing drifts.
+
+            // OUT: optional departure; exit none holds until the frame cuts.
+            if (exit === "up") {
+              tl.to(stage, { y: "-4cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "fade") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            }
+
+            tl.seek(0);
+            paint(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["particle-text-dissolve"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/per-character-rise/__hf-variables-preview.html b/docs/public/catalog/components/per-character-rise/__hf-variables-preview.html
new file mode 100644
index 0000000000..0f8010ee1f
--- /dev/null
+++ b/docs/public/catalog/components/per-character-rise/__hf-variables-preview.html
@@ -0,0 +1,70 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Per Character Rise variables preview</title>
+    <style>
+      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #f7f7f8; }
+      #hf-vars-root { position: relative; width: 1920px; height: 1080px; }
+      #hf-vars-mount { position: absolute; inset: 0; display: grid; place-items: center; }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  </head>
+  <body>
+    <div id="hf-vars-root" data-composition-id="per-character-rise-variables-preview" data-start="0" data-width="1920" data-height="1080" data-duration="5" data-fps="30">
+      <div id="hf-vars-mount" class="clip" data-composition-id="per-character-rise" data-composition-src="./per-character-rise.html" data-start="0" data-duration="5" data-track-index="0" data-width="1920" data-height="1080"></div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["per-character-rise-variables-preview"] = gsap.timeline({ paused: true });
+    </script>
+    <script>
+      (function () {
+        var mount = document.getElementById("hf-vars-mount");
+        // The mount is filled asynchronously, and the demo script selects
+        // what it fills it with, so it cannot run before then.
+        var observer = new MutationObserver(build);
+        observer.observe(mount, { childList: true, subtree: true });
+        build();
+        function build() {
+          if (!mount.firstElementChild) return;
+          observer.disconnect();
+
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-per-character-rise span",
+          { opacity: 0, "--hf-char-y": "-120px" },
+          { opacity: 1, "--hf-char-y": "0px", duration: 0.28, stagger: 0.05, ease: "power3.out" },
+          startTime,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["per-character-rise-demo"] = tl;
+          var child = window.__timelines["per-character-rise-demo"];
+          delete window.__timelines["per-character-rise-demo"];
+          if (!child || typeof child.paused !== "function") return;
+          child.paused(false);
+          window.__timelines["per-character-rise-variables-preview"].add(child, 0);
+        }
+      })();
+    </script>
+<script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "per-character-rise.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/per-character-rise/demo.html b/docs/public/catalog/components/per-character-rise/demo.html
new file mode 100644
index 0000000000..80a7ea9a09
--- /dev/null
+++ b/docs/public/catalog/components/per-character-rise/demo.html
@@ -0,0 +1,101 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Per Character Rise - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        min-width: 900px;
+        min-height: 500px;
+        padding: 64px;
+      }
+      .hf-remocn-per-character-rise {
+        color: #18181b;
+        font-family: Inter, system-ui, sans-serif;
+        font-weight: 900;
+        letter-spacing: -0.05em;
+      }
+      .hf-remocn-per-character-rise {
+        display: inline-flex;
+        gap: 2px;
+        /* ponytail: scale via font-size; GSAP only animates span children, not this element */
+        font-size: 140px;
+        line-height: 0.88;
+        overflow: hidden;
+      }
+      .hf-remocn-per-character-rise span {
+        display: inline-block;
+        transform: translateY(var(--hf-char-y, 0px));
+        will-change: transform, opacity;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="per-character-rise-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-per-character-rise">
+          <span>P</span><span>R</span><span>I</span><span>M</span><span>I</span><span>T</span
+          ><span>I</span><span>V</span><span>E</span>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-per-character-rise span",
+          { opacity: 0, "--hf-char-y": "-120px" },
+          { opacity: 1, "--hf-char-y": "0px", duration: 0.28, stagger: 0.05, ease: "power3.out" },
+          startTime,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["per-character-rise-demo"] = tl;
+      </script>
+    </div>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "per-character-rise.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/per-character-rise/per-character-rise.html b/docs/public/catalog/components/per-character-rise/per-character-rise.html
new file mode 100644
index 0000000000..f9ec62f051
--- /dev/null
+++ b/docs/public/catalog/components/per-character-rise/per-character-rise.html
@@ -0,0 +1,104 @@
+<!--
+  Per Character Rise - remocn typography primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Drive the timeline
+  integration from a paused GSAP timeline so renders remain deterministic.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result as a custom property
+  the CSS below consumes. The timeline recipe at the end is untouched by them: it
+  keeps driving one offset, and these decide what that offset means on screen.
+
+    - origin (above | below, default above): which side of the line the
+      letters travel from. above is the shipped motion, below mirrors it so
+      the letters climb into place instead.
+    - distance (close | standard | far, default standard): scales the offset.
+      close covers half the run, far nearly double, in the same time.
+    - size (number, 32 to 160, default 74): type size in px, which also sets
+      how tall the clipping window is.
+    - tone (ink | paper | accent, default ink): letter colour. ink is
+      near-black for light frames, paper near-white for dark ones, accent
+      rides --brand.
+
+  On every default the result is identical to the original: 74px near-black
+  letters travelling 42px into the line.
+-->
+
+<div
+  class="hf-remocn-per-character-rise"
+  data-composition-variables='[
+    { "id": "origin", "type": "enum", "role": "motion", "label": "Origin", "description": "Which side of the line the letters travel from. above is the shipped motion, below mirrors it.", "default": "above", "options": [{ "value": "above", "label": "Above" }, { "value": "below", "label": "Below" }] },
+    { "id": "distance", "type": "enum", "role": "motion", "label": "Distance", "description": "Scales the travel offset, so the letters cover a shorter or longer run in the same time.", "default": "standard", "options": [{ "value": "close", "label": "Close" }, { "value": "standard", "label": "Standard" }, { "value": "far", "label": "Far" }] },
+    { "id": "size", "type": "number", "role": "layout", "label": "Size", "description": "Type size, which also sets how tall the clipping window is.", "default": 74, "min": 32, "max": 160, "step": 1, "unit": "px" },
+    { "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Letter colour: ink for light frames, paper for dark ones, accent rides --brand.", "default": "ink", "options": [{ "value": "ink", "label": "Ink" }, { "value": "paper", "label": "Paper" }, { "value": "accent", "label": "Accent" }] }
+  ]'
+>
+  <span>P</span><span>R</span><span>I</span><span>M</span><span>I</span><span>T</span><span>I</span
+  ><span>V</span><span>E</span>
+</div>
+
+<style>
+  .hf-remocn-per-character-rise {
+    color: var(--hf-char-color, #18181b);
+    font-family: Inter, system-ui, sans-serif;
+    font-weight: 900;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-per-character-rise {
+    display: inline-flex;
+    gap: 1px;
+    font-size: var(--hf-char-size, 74px);
+    line-height: 0.9;
+    overflow: hidden;
+  }
+  .hf-remocn-per-character-rise span {
+    display: inline-block;
+    transform: translateY(calc(var(--hf-char-y, 0px) * var(--hf-char-reach, 1)));
+    will-change: transform, opacity;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    var origins = { above: 1, below: -1 };
+    var reaches = { close: 0.5, standard: 1, far: 1.85 };
+    var tones = {
+      ink: "#18181b",
+      paper: "#fafafa",
+      accent: "var(--brand, #34d399)",
+    };
+
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var origin = origins[pick(origins, vars.origin, "above")];
+    var reach = reaches[pick(reaches, vars.distance, "standard")];
+    var tone = tones[pick(tones, vars.tone, "ink")];
+
+    var size = Number(vars.size);
+    if (!isFinite(size) || size < 32 || size > 160) {
+      size = 74;
+    }
+
+    var roots = document.querySelectorAll(".hf-remocn-per-character-rise");
+    for (var i = 0; i < roots.length; i += 1) {
+      roots[i].style.setProperty("--hf-char-reach", String(origin * reach));
+      roots[i].style.setProperty("--hf-char-size", size + "px");
+      roots[i].style.setProperty("--hf-char-color", tone);
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-per-character-rise span', { opacity: 0, '--hf-char-y': '-42px' }, { opacity: 1, '--hf-char-y': '0px', duration: 0.22, stagger: 0.035, ease: 'power3.out' }, startTime);
+-->
diff --git a/docs/public/catalog/components/per-word-crossfade/__hf-variables-preview.html b/docs/public/catalog/components/per-word-crossfade/__hf-variables-preview.html
new file mode 100644
index 0000000000..b46fb3f1fa
--- /dev/null
+++ b/docs/public/catalog/components/per-word-crossfade/__hf-variables-preview.html
@@ -0,0 +1,93 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Per-Word Crossfade variables preview</title>
+    <style>
+      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #fafafa; }
+      #hf-vars-root { position: relative; width: 1920px; height: 1080px; }
+      #hf-vars-mount { position: absolute; inset: 0; display: grid; place-items: center; }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  </head>
+  <body>
+    <div id="hf-vars-root" data-composition-id="per-word-crossfade-variables-preview" data-start="0" data-width="1920" data-height="1080" data-duration="5" data-fps="30">
+      <div id="hf-vars-mount" class="clip" data-composition-id="per-word-crossfade" data-composition-src="./per-word-crossfade.html" data-start="0" data-duration="5" data-track-index="0" data-width="1920" data-height="1080"></div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["per-word-crossfade-variables-preview"] = gsap.timeline({ paused: true });
+    </script>
+    <script>
+      (function () {
+        var mount = document.getElementById("hf-vars-mount");
+        // The mount is filled asynchronously, and the demo script selects
+        // what it fills it with, so it cannot run before then.
+        var observer = new MutationObserver(build);
+        observer.observe(mount, { childList: true, subtree: true });
+        build();
+        function build() {
+          if (!mount.firstElementChild) return;
+          observer.disconnect();
+
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+
+        // outgoing phrase fades out word-by-word
+        tl.to(
+          ".phrase-out span",
+          {
+            opacity: 0,
+            duration: 0.25,
+            stagger: 0.055,
+            ease: "power2.in",
+          },
+          startTime,
+        );
+
+        // incoming phrase fades in word-by-word (the named component)
+        tl.fromTo(
+          ".hf-remocn-per-word-crossfade span",
+          { opacity: 0, "--hf-word-y": "22px", "--hf-word-scale": 0.92, "--hf-word-blur": "5px" },
+          {
+            opacity: 1,
+            "--hf-word-y": "0px",
+            "--hf-word-scale": 1,
+            "--hf-word-blur": "0px",
+            duration: 0.3,
+            stagger: 0.055,
+            ease: "power3.out",
+          },
+          startTime + 0.1,
+        );
+
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["per-word-crossfade-demo"] = tl;
+          var child = window.__timelines["per-word-crossfade-demo"];
+          delete window.__timelines["per-word-crossfade-demo"];
+          if (!child || typeof child.paused !== "function") return;
+          child.paused(false);
+          window.__timelines["per-word-crossfade-variables-preview"].add(child, 0);
+        }
+      })();
+    </script>
+<script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "per-word-crossfade.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/per-word-crossfade/demo.html b/docs/public/catalog/components/per-word-crossfade/demo.html
new file mode 100644
index 0000000000..07ef969a47
--- /dev/null
+++ b/docs/public/catalog/components/per-word-crossfade/demo.html
@@ -0,0 +1,158 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Per-Word Crossfade - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #fafafa;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 40px;
+        width: 1920px;
+        height: 1080px;
+        padding: 120px 160px;
+      }
+      /* outgoing phrase — static, fades out */
+      .phrase-out {
+        display: inline-flex;
+        gap: 28px;
+        font-size: 128px;
+        font-weight: 900;
+        letter-spacing: -0.04em;
+        line-height: 1;
+        color: #71717a;
+        font-family: Inter, system-ui, sans-serif;
+        position: relative;
+      }
+      .phrase-out span {
+        display: inline-block;
+        will-change: opacity;
+      }
+      /* incoming phrase — the GSAP-animated element */
+      .hf-remocn-per-word-crossfade {
+        color: #18181b;
+        font-family: Inter, system-ui, sans-serif;
+        font-weight: 900;
+        letter-spacing: -0.04em;
+      }
+      .hf-remocn-per-word-crossfade {
+        display: inline-flex;
+        gap: 28px;
+        font-size: 128px;
+        line-height: 1;
+      }
+      .hf-remocn-per-word-crossfade span {
+        display: inline-block;
+        transform: translate(var(--hf-word-x, 0px), var(--hf-word-y, 0px))
+          scale(var(--hf-word-scale, 1));
+        filter: blur(var(--hf-word-blur, 0px));
+        will-change: transform, filter, opacity;
+      }
+      /* label */
+      .demo-label {
+        font-size: 26px;
+        font-weight: 500;
+        color: #a1a1aa;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+        margin-top: 24px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="per-word-crossfade-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <!-- outgoing phrase: fades out word-by-word -->
+        <div class="phrase-out">
+          <span>Write</span><span>once</span><span>publish</span><span>anywhere</span>
+        </div>
+        <!-- incoming phrase: per-word crossfade in -->
+        <div class="hf-remocn-per-word-crossfade">
+          <span>Create</span><span>once</span><span>reuse</span><span>everywhere</span>
+        </div>
+        <div class="demo-label">per-word crossfade</div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+
+        // outgoing phrase fades out word-by-word
+        tl.to(
+          ".phrase-out span",
+          {
+            opacity: 0,
+            duration: 0.25,
+            stagger: 0.055,
+            ease: "power2.in",
+          },
+          startTime,
+        );
+
+        // incoming phrase fades in word-by-word (the named component)
+        tl.fromTo(
+          ".hf-remocn-per-word-crossfade span",
+          { opacity: 0, "--hf-word-y": "22px", "--hf-word-scale": 0.92, "--hf-word-blur": "5px" },
+          {
+            opacity: 1,
+            "--hf-word-y": "0px",
+            "--hf-word-scale": 1,
+            "--hf-word-blur": "0px",
+            duration: 0.3,
+            stagger: 0.055,
+            ease: "power3.out",
+          },
+          startTime + 0.1,
+        );
+
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["per-word-crossfade-demo"] = tl;
+      </script>
+    </div>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "per-word-crossfade.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/per-word-crossfade/per-word-crossfade.html b/docs/public/catalog/components/per-word-crossfade/per-word-crossfade.html
new file mode 100644
index 0000000000..d4ee711ee7
--- /dev/null
+++ b/docs/public/catalog/components/per-word-crossfade/per-word-crossfade.html
@@ -0,0 +1,115 @@
+<!--
+  Per-Word Crossfade - remocn typography primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Drive the timeline
+  integration from a paused GSAP timeline so renders remain deterministic.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and either rewrites the words or writes a
+  custom property the CSS below consumes. The timeline recipe at the end is
+  untouched by them: it keeps driving one offset and one blur, and these
+  decide what that offset and that blur mean on screen.
+
+    - text (string, default "Create once reuse everywhere"): the line to
+      animate. It is split on whitespace and every word gets its own span, so
+      the stagger picks up the new words with no other change.
+    - drift (close | standard | far, default standard): scales the vertical
+      offset. close covers half the run, far nearly double, in the same time.
+    - blur (soft | standard | heavy, default standard): scales the blur
+      radius, from a light haze to a full smear.
+    - tone (ink | paper | accent, default ink): word colour. ink is near-black
+      for light frames, paper near-white for dark ones, accent rides --brand.
+
+  On every default the result is identical to the original: four near-black
+  words drifting 22px up through a 5px blur.
+-->
+
+<div
+  class="hf-remocn-per-word-crossfade"
+  data-composition-variables='[
+    { "id": "text", "type": "string", "role": "content", "label": "Text", "description": "The line to animate. It is split on whitespace and every word gets its own span, so the stagger picks up the new words.", "default": "Create once reuse everywhere" },
+    { "id": "drift", "type": "enum", "role": "motion", "label": "Drift", "description": "Scales the vertical offset, so the words cover a shorter or longer run in the same time.", "default": "standard", "options": [{ "value": "close", "label": "Close" }, { "value": "standard", "label": "Standard" }, { "value": "far", "label": "Far" }] },
+    { "id": "blur", "type": "enum", "role": "style", "label": "Blur", "description": "Scales the blur radius the timeline drives, from a light haze to a full smear.", "default": "standard", "options": [{ "value": "soft", "label": "Soft" }, { "value": "standard", "label": "Standard" }, { "value": "heavy", "label": "Heavy" }] },
+    { "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Word colour: ink for light frames, paper for dark ones, accent rides --brand.", "default": "ink", "options": [{ "value": "ink", "label": "Ink" }, { "value": "paper", "label": "Paper" }, { "value": "accent", "label": "Accent" }] }
+  ]'
+>
+  <span>Create</span><span>once</span><span>reuse</span><span>everywhere</span>
+</div>
+
+<style>
+  .hf-remocn-per-word-crossfade {
+    color: var(--hf-word-color, #18181b);
+    font-family: Inter, system-ui, sans-serif;
+    font-weight: 900;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-per-word-crossfade {
+    display: inline-flex;
+    gap: 12px;
+    font-size: 56px;
+    line-height: 1;
+  }
+  .hf-remocn-per-word-crossfade span {
+    display: inline-block;
+    transform: translate(
+        var(--hf-word-x, 0px),
+        calc(var(--hf-word-y, 0px) * var(--hf-word-drift, 1))
+      )
+      scale(var(--hf-word-scale, 1));
+    filter: blur(calc(var(--hf-word-blur, 0px) * var(--hf-word-blur-scale, 1)));
+    will-change: transform, filter, opacity;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    var drifts = { close: 0.5, standard: 1, far: 1.85 };
+    var blurScales = { soft: 0.45, standard: 1, heavy: 2.2 };
+    var tones = {
+      ink: "#18181b",
+      paper: "#fafafa",
+      accent: "var(--brand, #34d399)",
+    };
+
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var drift = drifts[pick(drifts, vars.drift, "standard")];
+    var blurScale = blurScales[pick(blurScales, vars.blur, "standard")];
+    var tone = tones[pick(tones, vars.tone, "ink")];
+
+    var text = typeof vars.text === "string" ? vars.text.trim() : "";
+    var words = (text || "Create once reuse everywhere").split(/\s+/);
+
+    var roots = document.querySelectorAll(".hf-remocn-per-word-crossfade");
+    for (var i = 0; i < roots.length; i += 1) {
+      var root = roots[i];
+      root.style.setProperty("--hf-word-drift", String(drift));
+      root.style.setProperty("--hf-word-blur-scale", String(blurScale));
+      root.style.setProperty("--hf-word-color", tone);
+
+      while (root.firstChild) {
+        root.removeChild(root.firstChild);
+      }
+      for (var w = 0; w < words.length; w += 1) {
+        var span = document.createElement("span");
+        span.textContent = words[w];
+        root.appendChild(span);
+      }
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-per-word-crossfade span', { opacity: 0, '--hf-word-y': '22px', '--hf-word-scale': 0.92, '--hf-word-blur': '5px' }, { opacity: 1, '--hf-word-y': '0px', '--hf-word-scale': 1, '--hf-word-blur': '0px', duration: 0.3, stagger: 0.055, ease: 'power3.out' }, startTime);
+-->
diff --git a/docs/public/catalog/components/per-word-rise/README.md b/docs/public/catalog/components/per-word-rise/README.md
new file mode 100644
index 0000000000..498ca9e255
--- /dev/null
+++ b/docs/public/catalog/components/per-word-rise/README.md
@@ -0,0 +1,36 @@
+# per-word-rise
+
+Words or characters rise into place in a controlled blur-to-sharp cascade, settle with a short decel tail on landing, and hold truly still until the frame cuts.
+
+3.5s authored, elastic HOLD, exit `none` by default.
+
+## Variables
+
+| id       | type   | default           | notes                                                                                                                                                                              |
+| -------- | ------ | ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `text`   | string | `WORDS IN MOTION` | The displayed line. Font size auto-fits to character count.                                                                                                                        |
+| `split`  | enum   | `word`            | `word` or `char`: the unit that rises.                                                                                                                                             |
+| `cues`   | string | `` (empty)        | Comma-separated seconds (from mount start) for each unit's landing, e.g. `0.4,0.8,1.6`. Units beyond the list extrapolate at the list's own gap. Empty keeps the authored cascade. |
+| `accent` | enum   | `green`           | Text color: green rides `--brand`, blue rides `--accent`, violet rides `--accent-2`.                                                                                               |
+| `exit`   | enum   | `none`            | `none` holds until the cut; `fade` departs opacity-only; `up` is the staggered upward fade (the pre-Wave-J default ending).                                                        |
+
+## Mount
+
+```html
+<div
+  class="clip"
+  data-composition-id="per-word-rise"
+  data-composition-src="./per-word-rise.html"
+  data-variable-values='{"text":"SHIP IT TODAY","split":"word","cues":"0.5,1.0,1.5"}'
+  data-start="0"
+  data-duration="3.5"
+  data-track-index="0"
+></div>
+```
+
+Elastic root: no `data-width`/`data-height`; it fills whatever box the host clip gives it. Timeline registers under the literal `per-word-rise` key.
+
+## Notes
+
+- Cues are landing times: each unit's rise ends on its cue (start compresses toward 0 for early cues). Landings clamp ahead of any exit.
+- Deterministic and seek-safe; the hold is truly still (no drift), and every landing ends with a short overshoot-free settle tail instead of a dead stop.
diff --git a/docs/public/catalog/components/per-word-rise/demo.html b/docs/public/catalog/components/per-word-rise/demo.html
new file mode 100644
index 0000000000..1ada1e699b
--- /dev/null
+++ b/docs/public/catalog/components/per-word-rise/demo.html
@@ -0,0 +1,119 @@
+<!doctype html>
+<!--
+  per-word-rise demo. This standalone composition mounts per-word-rise.html
+  through data-composition-src. Non-default text, split, and accent values
+  prove the variable path while the primitive remains elastic to its host.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Per Word Rise Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #0b0c0e);
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --muted: #94a3b8;
+        --surface: #14171c;
+        --border: #343a46;
+        --brand: #71f5a7;
+        --accent: #61a8ff;
+        --accent-2: #c5a3ff;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-body: Inter, system-ui, sans-serif;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        --radius: 3cqmin;
+        --space-1: 1.8cqw;
+        --space-2: 2.8cqh;
+        --space-3: 4cqh;
+        --dur-beat: 0.5s;
+        --ease-standard: cubic-bezier(0.215, 0.61, 0.355, 1);
+        --ease-emphasis: cubic-bezier(0.19, 1, 0.22, 1);
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(
+          ellipse at 50% 42%,
+          color-mix(in srgb, var(--surface) 88%, var(--accent-2)) 0%,
+          var(--bg) 72%
+        );
+      }
+
+      .mount-card {
+        width: 76%;
+        height: 50%;
+        left: 12%;
+        top: 25%;
+        container-type: size;
+        overflow: hidden;
+        border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
+        border-radius: calc(var(--radius) * 1.3);
+        background: var(--bg);
+        box-shadow: 0 4cqh 12cqh color-mix(in srgb, var(--bg) 68%, transparent);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="per-word-rise-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="3.5"
+      data-fps="30"
+    >
+      <div
+        id="per-word-rise-mount"
+        class="mount-card clip"
+        data-composition-id="per-word-rise"
+        data-composition-src="./per-word-rise.html"
+        data-variable-values='{"text":"EVERY FRAME MATTERS","split":"char","accent":"violet"}'
+        data-start="0"
+        data-duration="3.5"
+        data-track-index="0"
+        data-width="1459"
+        data-height="540"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      var tl = gsap.timeline({ paused: true });
+      tl.seek(0);
+      window.__timelines = window.__timelines || {};
+      window.__timelines["per-word-rise-demo"] = tl;
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "per-word-rise.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/per-word-rise/per-word-rise.html b/docs/public/catalog/components/per-word-rise/per-word-rise.html
new file mode 100644
index 0000000000..009cc6288b
--- /dev/null
+++ b/docs/public/catalog/components/per-word-rise/per-word-rise.html
@@ -0,0 +1,316 @@
+<!doctype html>
+<!--
+  per-word-rise: HyperFrames video primitive (text effects / reveal)
+
+  Words, or characters through the split variable, rise into place with a
+  controlled cascade and a small blur-to-sharp settle. Each unit lands with
+  a short overshoot-free settle tail (the final few pixels glide in over the
+  closing frames instead of stopping dead), then the finished line holds
+  truly still until the frame cuts (exit none) or departs with the optional
+  exit variable.
+
+  Variables:
+    - text (string, default "WORDS IN MOTION"): displayed text.
+    - split (word | char, default "word"): animated unit size.
+    - cues (string, default ""): comma-separated seconds (from mount start)
+      for each unit's landing. Empty keeps the authored cascade rhythm.
+    - accent (green | blue | violet, default "green"): text color.
+    - exit (none | fade | up, default "none"): optional departure.
+
+  Envelope, fixed IN and OUT with elastic HOLD only:
+    IN_BASE  = 1.45s, the full staggered rise and sharp settle (cues can
+               stretch the rise phase past IN_BASE when they land later)
+    HOLD     = max(0, D - IN - OUT), truly still: no drift
+    OUT_BASE = 0.50s staggered departure when exit is fade or up, 0s when
+               exit is none (the default: the line holds until the cut)
+    If D is shorter than IN_BASE + OUT_BASE, IN and OUT compress together.
+    The timeline is never time-scaled.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, has no data-width or data-height,
+  and registers one paused timeline under the literal per-word-rise key.
+-->
+<html
+  lang="en"
+  data-composition-id="per-word-rise"
+  data-composition-duration="3.5"
+  data-composition-variables='[
+    { "id": "text", "type": "string", "role": "content", "label": "Text", "description": "Text whose words or characters rise into place.", "default": "WORDS IN MOTION" },
+    { "id": "split", "type": "enum", "role": "content", "label": "Split", "description": "Animate the text as words or individual characters.", "default": "word", "options": [{ "value": "word", "label": "Word" }, { "value": "char", "label": "Character" }] },
+    { "id": "cues", "type": "string", "role": "timing", "label": "Cues", "description": "Comma-separated seconds (from mount start) for each unit landing. Empty keeps the authored cascade rhythm.", "default": "" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Contract accent token used for the text color.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the line holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Per Word Rise</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="per-word-rise" data-duration="3.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .pwr-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+            background: var(--bg, #0b0c0e);
+          }
+
+          .pwr-stage {
+            display: flex;
+            width: 88cqw;
+            max-width: 88cqw;
+            align-items: baseline;
+            justify-content: center;
+            flex-wrap: wrap;
+            column-gap: var(--space-1, 1.8cqw);
+            row-gap: var(--space-2, 2.8cqh);
+            color: var(--pwr-accent);
+            font-size: var(--pwr-font-size);
+            font-weight: 780;
+            line-height: 1.08;
+            letter-spacing: -0.035em;
+            text-align: center;
+          }
+
+          .pwr-stage.pwr-char {
+            column-gap: 0.045em;
+            letter-spacing: 0;
+          }
+
+          .pwr-unit {
+            display: inline-block;
+            flex: 0 0 auto;
+            filter: blur(var(--pwr-blur, 0cqh));
+            will-change: transform, filter, opacity;
+          }
+
+          .pwr-space {
+            width: 0.36em;
+          }
+        </style>
+
+        <div
+          id="per-word-rise-clip"
+          class="pwr-clip clip"
+          data-start="0"
+          data-duration="3.5"
+          data-track-index="0"
+        >
+          <div class="pwr-stage" role="img"></div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".pwr-stage");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var text = vars.text == null ? "WORDS IN MOTION" : String(vars.text);
+            var split = vars.split === "char" ? "char" : "word";
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+            var cuesValue = vars.cues == null ? "" : String(vars.cues);
+            var cues = cuesValue.split(",").reduce(function (result, token) {
+              var trimmed = token.trim();
+              if (trimmed === "") return result;
+              var seconds = Number(trimmed);
+              if (!Number.isFinite(seconds) || seconds < 0) return result;
+              result.push(seconds);
+              return result;
+            }, []);
+
+            root.style.setProperty("--pwr-accent", accentColors[accent]);
+            stage.classList.toggle("pwr-char", split === "char");
+            stage.setAttribute("aria-label", text);
+
+            var characterCount = Math.max(1, Array.from(text).length);
+            var fittedCqw = Math.min(9.5, 126 / characterCount);
+            root.style.setProperty(
+              "--pwr-font-size",
+              "min(" + fittedCqw.toFixed(3) + "cqw, 15cqh)",
+            );
+
+            var segments = split === "char" ? Array.from(text) : text.trim().split(/\s+/);
+            if (segments.length === 0) segments = [""];
+
+            var units = segments.map(function (segment, index) {
+              var unit = document.createElement("span");
+              unit.id = "per-word-rise-unit-" + index;
+              unit.className = "pwr-unit";
+              if (split === "char" && /\s/.test(segment)) {
+                unit.classList.add("pwr-space");
+                unit.textContent = "\u00a0";
+              } else {
+                unit.textContent = segment;
+              }
+              unit.setAttribute("aria-hidden", "true");
+              stage.appendChild(unit);
+              return unit;
+            });
+
+            var IN_BASE = 1.45;
+            var OUT_BASE = exit === "none" ? 0 : 0.5;
+            var RISE_BASE = 0.74;
+            var STAGGER_BASE = 0.62;
+            var EXIT_STAGGER_BASE = 0.14;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "3.5"));
+            var totalBase = Math.max(0.001, IN_BASE + OUT_BASE);
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var RISE = RISE_BASE * scale;
+            var STAGGER = units.length > 1 ? STAGGER_BASE * scale : 0;
+            var EXIT_STAGGER = units.length > 1 ? EXIT_STAGGER_BASE * scale : 0;
+            var EXIT_MOVE = Math.max(0.001, OUT - EXIT_STAGGER);
+
+            // Landing ease: overshoot-free decel with a settle tail. A plain
+            // power3.out slams from fast to imperceptible in ~2 frames and the
+            // words stop dead; this piecewise cubic keeps ~7% of the travel for
+            // the last 22% of the duration and is C1-continuous at the seam,
+            // so the word glides its final few pixels over the closing frames
+            // (a settle) with monotonic velocity: no stall, no hop, no
+            // overshoot. Pure function of progress, so it stays seek-safe.
+            var LAND_SPLIT = 0.78; // progress where the settle tail begins
+            var LAND_RESIDUAL = 0.07; // fraction of travel left for the tail
+            var LAND_SEAM_SLOPE = ((1 - LAND_RESIDUAL) / LAND_SPLIT) * 0.5; // shared velocity at the seam
+            function landEase(p) {
+              if (p <= 0) return 0;
+              if (p >= 1) return 1;
+              if (p < LAND_SPLIT) {
+                var x = p / LAND_SPLIT;
+                var inv = 1 - x;
+                // Half cubic-out, half linear: keeps end velocity for the seam.
+                return (1 - LAND_RESIDUAL) * (0.5 * (1 - inv * inv * inv) + 0.5 * x);
+              }
+              var u = (p - LAND_SPLIT) / (1 - LAND_SPLIT);
+              var b = LAND_SEAM_SLOPE * (1 - LAND_SPLIT);
+              var c = 3 * LAND_RESIDUAL - 2 * b;
+              var d = b - 2 * LAND_RESIDUAL;
+              return 1 - LAND_RESIDUAL + b * u + c * u * u + d * u * u * u;
+            }
+
+            // Cues own the word landings when provided; the authored cascade
+            // otherwise. Landings beyond the cue list extrapolate at the cue
+            // list's own gap, and every landing clamps ahead of any exit.
+            var riseEnd = IN;
+            var landings;
+            if (cues.length > 0) {
+              var lastCue = cues[cues.length - 1];
+              var cueGap =
+                cues.length >= 2
+                  ? Math.max(0.05, (lastCue - cues[0]) / (cues.length - 1))
+                  : RISE * 0.4;
+              var latestLanding = Math.max(RISE * 0.5, duration - OUT);
+              landings = units.map(function (unit, index) {
+                var landing =
+                  index < cues.length
+                    ? cues[index]
+                    : lastCue + (index - (cues.length - 1)) * cueGap;
+                return Math.min(latestLanding, Math.max(0.05, landing));
+              });
+              riseEnd = Math.min(duration - OUT, Math.max(IN, Math.max.apply(null, landings)));
+            } else {
+              // Authored cascade: same left-to-right wave the stagger drew,
+              // expressed as explicit landings so every unit gets the settle.
+              var step = units.length > 1 ? STAGGER / (units.length - 1) : 0;
+              landings = units.map(function (unit, index) {
+                return index * step + RISE;
+              });
+            }
+            var HOLD_START = riseEnd;
+            var HOLD = Math.max(0, duration - (HOLD_START + OUT));
+            var OUT_START = HOLD_START + HOLD;
+
+            gsap.set(units, { opacity: 0, y: "8cqh", "--pwr-blur": "1.4cqh" });
+
+            var tl = gsap.timeline({ paused: true });
+
+            units.forEach(function (unit, index) {
+              var landing = landings[index];
+              var startAt = Math.max(0, landing - RISE);
+              tl.to(
+                unit,
+                {
+                  opacity: 1,
+                  y: "0cqh",
+                  "--pwr-blur": "0cqh",
+                  duration: Math.max(0.08, landing - startAt),
+                  ease: landEase,
+                },
+                startAt,
+              );
+            });
+
+            // TRUE hold: the finished line is dead still until the exit or
+            // the cut. The old 0.55cqh drift was sub-perceptual at 1080p.
+
+            // OUT: optional departure; exit none holds until the frame cuts.
+            if (exit === "up") {
+              tl.to(
+                units,
+                {
+                  opacity: 0,
+                  y: "-4.5cqh",
+                  "--pwr-blur": "0.7cqh",
+                  duration: EXIT_MOVE,
+                  stagger: { amount: EXIT_STAGGER, from: "start" },
+                  ease: "power2.in",
+                },
+                OUT_START,
+              );
+            } else if (exit === "fade") {
+              tl.to(
+                units,
+                {
+                  opacity: 0,
+                  duration: EXIT_MOVE,
+                  stagger: { amount: EXIT_STAGGER, from: "start" },
+                  ease: "power2.in",
+                },
+                OUT_START,
+              );
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["per-word-rise"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/perspective-marquee/__hf-variables-preview.html b/docs/public/catalog/components/perspective-marquee/__hf-variables-preview.html
new file mode 100644
index 0000000000..6a5455752c
--- /dev/null
+++ b/docs/public/catalog/components/perspective-marquee/__hf-variables-preview.html
@@ -0,0 +1,70 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Perspective Marquee variables preview</title>
+    <style>
+      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #f7f7f8; }
+      #hf-vars-root { position: relative; width: 1920px; height: 1080px; }
+      #hf-vars-mount { position: absolute; inset: 0; display: grid; place-items: center; }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  </head>
+  <body>
+    <div id="hf-vars-root" data-composition-id="perspective-marquee-variables-preview" data-start="0" data-width="1920" data-height="1080" data-duration="5" data-fps="30">
+      <div id="hf-vars-mount" class="clip" data-composition-id="perspective-marquee" data-composition-src="./perspective-marquee.html" data-start="0" data-duration="5" data-track-index="0" data-width="1920" data-height="1080"></div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["perspective-marquee-variables-preview"] = gsap.timeline({ paused: true });
+    </script>
+    <script>
+      (function () {
+        var mount = document.getElementById("hf-vars-mount");
+        // The mount is filled asynchronously, and the demo script selects
+        // what it fills it with, so it cannot run before then.
+        var observer = new MutationObserver(build);
+        observer.observe(mount, { childList: true, subtree: true });
+        build();
+        function build() {
+          if (!mount.firstElementChild) return;
+          observer.disconnect();
+
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-perspective-marquee div",
+          { "--hf-marquee-x": "0px" },
+          { "--hf-marquee-x": "-360px", duration: 4.5, ease: "none" },
+          startTime,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["perspective-marquee-demo"] = tl;
+          var child = window.__timelines["perspective-marquee-demo"];
+          delete window.__timelines["perspective-marquee-demo"];
+          if (!child || typeof child.paused !== "function") return;
+          child.paused(false);
+          window.__timelines["perspective-marquee-variables-preview"].add(child, 0);
+        }
+      })();
+    </script>
+<script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "perspective-marquee.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/perspective-marquee/demo.html b/docs/public/catalog/components/perspective-marquee/demo.html
new file mode 100644
index 0000000000..4041ebf566
--- /dev/null
+++ b/docs/public/catalog/components/perspective-marquee/demo.html
@@ -0,0 +1,110 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Perspective Marquee - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        /* ponytail: scale on wrapper — GSAP only targets the inner div, so CSS transform is safe here */
+        transform: scale(3);
+      }
+      .hf-remocn-perspective-marquee {
+        color: #18181b;
+        font-family: Inter, system-ui, sans-serif;
+        font-weight: 900;
+        letter-spacing: -0.04em;
+      }
+      .hf-remocn-perspective-marquee {
+        width: 580px;
+        perspective: 900px;
+        overflow: hidden;
+        transform: rotateX(18deg);
+      }
+      .hf-remocn-perspective-marquee div {
+        display: inline-flex;
+        gap: 22px;
+        white-space: nowrap;
+        transform: translateX(var(--hf-marquee-x, 0px));
+      }
+      .hf-remocn-perspective-marquee span {
+        padding: 12px 18px;
+        border-radius: 999px;
+        background: #18181b;
+        color: #fff;
+        font-size: 28px;
+        box-shadow: 0 18px 44px rgba(24, 24, 27, 0.18);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="perspective-marquee-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-perspective-marquee">
+          <div>
+            <span>COMPONENTS</span><span>PRIMITIVES</span><span>TRANSITIONS</span><span>AGENTS</span
+            ><span>COMPONENTS</span><span>PRIMITIVES</span><span>TRANSITIONS</span
+            ><span>AGENTS</span>
+          </div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-perspective-marquee div",
+          { "--hf-marquee-x": "0px" },
+          { "--hf-marquee-x": "-360px", duration: 4.5, ease: "none" },
+          startTime,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["perspective-marquee-demo"] = tl;
+      </script>
+    </div>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "perspective-marquee.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/perspective-marquee/perspective-marquee.html b/docs/public/catalog/components/perspective-marquee/perspective-marquee.html
new file mode 100644
index 0000000000..ec6bf3211a
--- /dev/null
+++ b/docs/public/catalog/components/perspective-marquee/perspective-marquee.html
@@ -0,0 +1,136 @@
+<!--
+  Perspective Marquee - remocn typography primitive for HyperFrames.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result as a custom property
+  the CSS above consumes. The timeline recipe below is untouched by them: it
+  keeps driving one horizontal offset, and these decide how far that offset
+  carries and what the strip looks like while it rolls.
+
+    - tilt (flat | standard | steep, default standard): how far the marquee
+      plane leans back toward the horizon. flat is almost head-on, steep sends
+      the strip deep into the frame.
+    - travel (short | standard | long, default standard): scales the offset the
+      timeline drives, so the strip covers a shorter or longer run in the same
+      time. short reads as a slow drift, long as a fast roll.
+    - tone (ink | paper | accent, default ink): pill colour. ink is near-black
+      with white type for light frames, paper near-white with dark type for
+      dark ones, accent rides the brand token.
+    - words (string, default COMPONENTS, PRIMITIVES, TRANSITIONS, AGENTS): the
+      comma separated list of pill labels. The list is laid down twice so the
+      strip still reads as a continuous loop.
+
+  On every default the result is identical to the original: four near-black
+  pills, laid down twice, rolling 360px left across an 18 degree tilt.
+-->
+
+<div
+  class="hf-remocn-perspective-marquee"
+  data-composition-variables='[
+    { "id": "tilt", "type": "enum", "role": "style", "label": "Tilt", "description": "How far the marquee plane leans back toward the horizon.", "default": "standard", "options": [{ "value": "flat", "label": "Flat" }, { "value": "standard", "label": "Standard" }, { "value": "steep", "label": "Steep" }] },
+    { "id": "travel", "type": "enum", "role": "motion", "label": "Travel", "description": "Scales the offset the timeline drives, so the strip covers a shorter or longer run in the same time.", "default": "standard", "options": [{ "value": "short", "label": "Short" }, { "value": "standard", "label": "Standard" }, { "value": "long", "label": "Long" }] },
+    { "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Pill colour: ink for light frames, paper for dark ones, accent rides the brand token.", "default": "ink", "options": [{ "value": "ink", "label": "Ink" }, { "value": "paper", "label": "Paper" }, { "value": "accent", "label": "Accent" }] },
+    { "id": "words", "type": "string", "role": "content", "label": "Words", "description": "Comma separated pill labels. The list is laid down twice so the strip still reads as a continuous loop.", "default": "COMPONENTS, PRIMITIVES, TRANSITIONS, AGENTS" }
+  ]'
+>
+  <div>
+    <span>COMPONENTS</span><span>PRIMITIVES</span><span>TRANSITIONS</span><span>AGENTS</span
+    ><span>COMPONENTS</span><span>PRIMITIVES</span><span>TRANSITIONS</span><span>AGENTS</span>
+  </div>
+</div>
+
+<style>
+  .hf-remocn-perspective-marquee {
+    color: #18181b;
+    font-family: Inter, system-ui, sans-serif;
+    font-weight: 900;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-perspective-marquee {
+    width: 720px;
+    perspective: 900px;
+    overflow: hidden;
+    transform: rotateX(var(--hf-marquee-tilt, 18deg));
+  }
+  .hf-remocn-perspective-marquee div {
+    display: inline-flex;
+    gap: 22px;
+    white-space: nowrap;
+    transform: translateX(calc(var(--hf-marquee-x, 0px) * var(--hf-marquee-reach, 1)));
+  }
+  .hf-remocn-perspective-marquee span {
+    padding: 12px 18px;
+    border-radius: 999px;
+    background: var(--hf-marquee-pill-bg, #18181b);
+    color: var(--hf-marquee-pill-fg, #fff);
+    font-size: 28px;
+    box-shadow: 0 18px 44px rgba(24, 24, 27, 0.18);
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    var tilts = { flat: "6deg", standard: "18deg", steep: "34deg" };
+    var reaches = { short: 0.55, standard: 1, long: 1.8 };
+    var tones = {
+      ink: { bg: "#18181b", fg: "#fff" },
+      paper: { bg: "#fafafa", fg: "#18181b" },
+      accent: { bg: "var(--brand, #34d399)", fg: "#fff" },
+    };
+    var defaultWords = "COMPONENTS, PRIMITIVES, TRANSITIONS, AGENTS";
+
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    function parseWords(value) {
+      var source = typeof value === "string" ? value : "";
+      var parts = source.split(",");
+      var words = [];
+      for (var i = 0; i < parts.length; i += 1) {
+        var word = parts[i].trim();
+        if (word) words.push(word);
+      }
+      return words.length ? words : parseWords(defaultWords);
+    }
+
+    var tilt = tilts[pick(tilts, vars.tilt, "standard")];
+    var reach = reaches[pick(reaches, vars.travel, "standard")];
+    var tone = tones[pick(tones, vars.tone, "ink")];
+    var words = parseWords(vars.words);
+
+    var roots = document.querySelectorAll(".hf-remocn-perspective-marquee");
+    for (var i = 0; i < roots.length; i += 1) {
+      roots[i].style.setProperty("--hf-marquee-tilt", tilt);
+      roots[i].style.setProperty("--hf-marquee-reach", String(reach));
+      roots[i].style.setProperty("--hf-marquee-pill-bg", tone.bg);
+      roots[i].style.setProperty("--hf-marquee-pill-fg", tone.fg);
+
+      var strip = roots[i].querySelector("div");
+      if (!strip) continue;
+      var markup = "";
+      for (var pass = 0; pass < 2; pass += 1) {
+        for (var w = 0; w < words.length; w += 1) {
+          markup += "<span>" + words[w].replace(/&/g, "&amp;").replace(/</g, "&lt;") + "</span>";
+        }
+      }
+      strip.innerHTML = markup;
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-perspective-marquee div', { '--hf-marquee-x': '0px' }, { '--hf-marquee-x': '-360px', duration: 4.5, ease: 'none' }, startTime);
+-->
diff --git a/docs/public/catalog/components/physical-exit/demo.html b/docs/public/catalog/components/physical-exit/demo.html
new file mode 100644
index 0000000000..7a10475473
--- /dev/null
+++ b/docs/public/catalog/components/physical-exit/demo.html
@@ -0,0 +1,102 @@
+<!doctype html>
+<!--
+  physical-exit demo. This standalone composition mounts physical-exit.html
+  through data-composition-src. Non-default values select slide mode, replace
+  the card word, and switch the accent to prove all variables flow through the
+  mount while the primitive remains sized by its host box.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Physical Exit Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0b0c0e;
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --surface: #17191f;
+        --border: #343842;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-body: Inter, system-ui, sans-serif;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 42%, #1a1d24 0%, #0b0c0e 72%);
+      }
+
+      .mount-card {
+        width: 58%;
+        height: 58%;
+        left: 21%;
+        top: 21%;
+        container-type: size;
+        overflow: hidden;
+        border: 1px solid rgba(255, 255, 255, 0.12);
+        border-radius: 32px;
+        background: #111318;
+        box-shadow: 0 44px 110px rgba(0, 0, 0, 0.48);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="physical-exit-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="3"
+      data-fps="30"
+    >
+      <div
+        id="physical-exit-mount"
+        class="mount-card clip"
+        data-composition-id="physical-exit"
+        data-composition-src="./physical-exit.html"
+        data-variable-values='{"mode":"slide","text":"See you","accent":"violet"}'
+        data-start="0"
+        data-duration="3"
+        data-track-index="0"
+        data-width="1114"
+        data-height="626"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["physical-exit-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "physical-exit.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/physical-exit/physical-exit.html b/docs/public/catalog/components/physical-exit/physical-exit.html
new file mode 100644
index 0000000000..e17aa7c074
--- /dev/null
+++ b/docs/public/catalog/components/physical-exit/physical-exit.html
@@ -0,0 +1,247 @@
+<!doctype html>
+<!--
+  physical-exit: HyperFrames video primitive (motion / exit / physical)
+
+  Concept: one card leaves the frame with visible momentum. The mode variable
+  owns the exit behavior: toss follows an arc, drop accelerates under gravity,
+  and slide stretches at peak lateral speed. Every mode carries rotation into
+  its final offscreen pose. The card never fades during its exit.
+
+  Variables:
+    - mode (toss | drop | slide, default toss): the physical exit behavior.
+    - text (string, default "Later"): the word displayed on the card.
+    - accent (green | blue | violet, default green): the card edge color.
+
+  Envelope (fixed IN and OUT, elastic HOLD only, never timeScale):
+    IN_BASE  = 0.45s  the card settles into its resting pose
+    HOLD     = elastic = max(0, D - (IN_BASE + OUT_BASE)); subtle drift
+    OUT_BASE = 0.85s  the selected physical exit carries the card offscreen
+    If D is shorter than IN_BASE + OUT_BASE, IN and OUT compress together and
+    HOLD becomes zero.
+
+  Mount contract: this file is a template-wrapped sub-composition. The runtime
+  clones only the template contents. #root fills the host box, establishes the
+  container query basis, has no data-width or data-height, and registers one
+  paused timeline under the hardcoded physical-exit id.
+-->
+<html
+  lang="en"
+  data-composition-id="physical-exit"
+  data-composition-duration="3"
+  data-composition-variables='[
+    { "id": "mode", "type": "enum", "role": "motion", "label": "Exit mode", "description": "Physical behavior used to carry the card offscreen.", "default": "toss", "options": [{ "value": "toss", "label": "Toss" }, { "value": "drop", "label": "Drop" }, { "value": "slide", "label": "Slide" }] },
+    { "id": "text", "type": "string", "role": "content", "label": "Card text", "description": "Word displayed on the exiting card.", "default": "Later" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Color applied to the card edge.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Physical Exit</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="physical-exit" data-duration="3" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .pe-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+          }
+
+          .pe-card {
+            position: relative;
+            display: grid;
+            place-items: center;
+            width: 58cqw;
+            min-height: 32cqh;
+            padding: 5cqh 6cqw;
+            overflow: hidden;
+            border: 0.22cqmin solid color-mix(in srgb, var(--pe-accent) 62%, #ffffff);
+            border-radius: 4cqmin;
+            background: #f8fafc;
+            box-shadow:
+              0 2.4cqh 7cqh color-mix(in srgb, #020617 48%, transparent),
+              inset 1.2cqw 0 0 var(--pe-accent);
+            color: #0b0c0e;
+            transform-origin: 50% 50%;
+            will-change: transform;
+          }
+
+          .pe-label {
+            display: block;
+            max-width: 48cqw;
+            overflow: hidden;
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: 11cqmin;
+            font-weight: 760;
+            line-height: 1;
+            letter-spacing: -0.045em;
+            text-align: center;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+        </style>
+
+        <div
+          id="physical-exit-clip"
+          class="pe-clip clip"
+          data-start="0"
+          data-duration="3"
+          data-track-index="0"
+        >
+          <div class="pe-card">
+            <span class="pe-label"></span>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var card = root.querySelector(".pe-card");
+            var label = root.querySelector(".pe-label");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var mode = vars.mode === "drop" || vars.mode === "slide" ? vars.mode : "toss";
+            var text = vars.text == null ? "Later" : String(vars.text);
+            var accent = vars.accent === "blue" || vars.accent === "violet" ? vars.accent : "green";
+            var accentColors = {
+              green: "var(--brand, #34d399)",
+              blue: "var(--accent, #60a5fa)",
+              violet: "var(--accent-2, #a78bfa)",
+            };
+
+            label.textContent = text;
+            card.style.setProperty("--pe-accent", accentColors[accent]);
+
+            var IN_BASE = 0.45;
+            var OUT_BASE = 0.85;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "3"));
+            var baseDuration = IN_BASE + OUT_BASE;
+            var envelopeScale = duration < baseDuration ? duration / baseDuration : 1;
+            var IN = IN_BASE * envelopeScale;
+            var OUT = OUT_BASE * envelopeScale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var HOLD_START = IN;
+            var OUT_START = IN + HOLD;
+
+            var tl = gsap.timeline({ paused: true });
+
+            tl.fromTo(
+              card,
+              { y: "4cqh", scale: 0.98, rotation: -1 },
+              { y: 0, scale: 1, rotation: 0, duration: IN, ease: "power2.out" },
+              0,
+            );
+
+            if (HOLD > 0) {
+              tl.to(
+                card,
+                {
+                  y: "-0.7cqh",
+                  rotation: 0.5,
+                  duration: HOLD / 2,
+                  ease: "sine.inOut",
+                  yoyo: true,
+                  repeat: 1,
+                },
+                HOLD_START,
+              );
+            }
+
+            if (mode === "drop") {
+              tl.to(
+                card,
+                {
+                  y: "108cqh",
+                  rotation: 9,
+                  duration: OUT,
+                  ease: "power2.in",
+                },
+                OUT_START,
+              );
+            } else if (mode === "slide") {
+              var slidePeak = OUT * 0.72;
+              tl.to(
+                card,
+                {
+                  x: "90cqw",
+                  skewX: -12,
+                  scaleX: 1.08,
+                  rotation: -2,
+                  duration: slidePeak,
+                  ease: "power4.in",
+                },
+                OUT_START,
+              );
+              tl.to(
+                card,
+                {
+                  x: "125cqw",
+                  skewX: -3,
+                  scaleX: 1,
+                  rotation: -5,
+                  duration: OUT - slidePeak,
+                  ease: "power4.out",
+                },
+                OUT_START + slidePeak,
+              );
+            } else {
+              var tossApex = OUT * 0.42;
+              tl.to(
+                card,
+                {
+                  x: "34cqw",
+                  y: "-36cqh",
+                  rotation: 8,
+                  duration: tossApex,
+                  ease: "power3.out",
+                },
+                OUT_START,
+              );
+              tl.to(
+                card,
+                {
+                  x: "118cqw",
+                  y: "86cqh",
+                  rotation: 18,
+                  duration: OUT - tossApex,
+                  ease: "power2.in",
+                },
+                OUT_START + tossApex,
+              );
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["physical-exit"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/press-ripple/README.md b/docs/public/catalog/components/press-ripple/README.md
new file mode 100644
index 0000000000..e66a885165
--- /dev/null
+++ b/docs/public/catalog/components/press-ripple/README.md
@@ -0,0 +1,78 @@
+# press-ripple
+
+Product demo payoff primitive: a cursor decel-arrives from off-stage (power2.out,
+it arrives, it never passes through), lands a few px off-center on a
+caller-positioned target zone, target and cursor compress in lockstep, release
+with two ink ripple rings, then the cursor exits off-stage the way it came. The
+pressed state and the ripple aftermath hold dead-still to the end of the clip;
+the cursor never occludes the label during the hold. 3s authored, elastic HOLD
+(never time-scaled).
+
+## Mounting
+
+```html
+<div
+  class="clip"
+  data-composition-id="press-ripple"
+  data-composition-src="./components/press-ripple.html"
+  data-variable-values='{"label":"Approve run","target_x":62,"target_y":58,"accent":"blue"}'
+  data-start="0"
+  data-duration="3"
+  data-track-index="0"
+></div>
+```
+
+## Variables
+
+| id       | type   | default       | notes                                                                                                                                                              |
+| -------- | ------ | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| label    | string | "Get started" | Text in the default pill. Ignored when the slot is replaced.                                                                                                       |
+| target_x | number | 50            | Zone center, percent of host width (8 to 92).                                                                                                                      |
+| target_y | number | 50            | Zone center, percent of host height (8 to 92).                                                                                                                     |
+| press_at | number | 1.4           | Seconds from mount start when the compression begins. Clamped so the press tail (release, ripple, cursor exit, ~1.05s) and any exit stay inside the clip duration. |
+| cursor   | enum   | light         | light (white pointer, dark stroke) or dark (inverse).                                                                                                              |
+| accent   | enum   | green         | green maps to --brand, blue to --accent, violet to --accent-2. Colors the ripple ink and the pressed fill.                                                         |
+| exit     | enum   | none          | none holds the pressed state (frame roots own transitions); fade or up add a 0.45s departure.                                                                      |
+
+## Target slot
+
+The element marked `data-slot="target"` is the press surface. Its default child
+is a token-styled pill (`--surface` body, `--border` edge, `--font-body` at
+weight 600) carrying `label`. Replace the slot's children in your installed copy
+to press anything else: an icon button, a card, a toggle.
+
+The slot wrapper flips `data-state="idle"` to `data-state="pressed"` at the
+press (seek-safe: scrubbing backwards restores idle). Custom slot content can
+key its own pressed look off that attribute, mirroring the default rule:
+
+```css
+.pr-target-slot[data-state="pressed"] .my-thing {
+  /* pressed look */
+}
+```
+
+## Choreography
+
+- 0.00s: target settles in (fade + short rise, power3.out).
+- press_at - 0.94s: cursor departs off-stage bottom-right, decelerating the
+  whole way, tip landing slightly below-right of the zone center (human aim).
+- press_at: target and cursor compress to 0.93 in lockstep (cursor scales
+  about its tip).
+- press_at + 0.12s: pressed state lands; release springs back (back.out) while
+  two thick ink rings (accent mixed toward `--fg` for contrast) ripple out from
+  under the slot, 0.11s apart.
+- press_at + 0.5s: the cursor exits off-stage bottom-right (power2.in,
+  accelerating away), clearing the label before the hold begins.
+- HOLD: dead still on the pressed state, elastic with the clip duration; the
+  pressed control and the ripple aftermath carry the frame, cursor gone.
+
+Sync point `press` fires the moment compression starts; align SFX or a
+downstream reveal to it.
+
+## Known tripwire
+
+The bundler mirrors composition variables as scoped CSS custom properties, so
+this unit's own `accent` variable becomes `--accent: blue` inside its subtree,
+shadowing the contract token (and `blue` is a valid CSS color). The script
+detects the shadow and substitutes the literal contract fallback for the blue
+mapping, so `accent: "blue"` renders the soft contract blue, not pure blue.
diff --git a/docs/public/catalog/components/press-ripple/demo.html b/docs/public/catalog/components/press-ripple/demo.html
new file mode 100644
index 0000000000..63cfe14b34
--- /dev/null
+++ b/docs/public/catalog/components/press-ripple/demo.html
@@ -0,0 +1,100 @@
+<!doctype html>
+<!--
+  press-ripple demo. Control-feedback story (distinct from oversized-cursor's
+  cursor-journey beat): the press happens early (0.9s), the cursor exits the
+  frame right after the release, and the pressed control + the ripple
+  aftermath carry the remaining hold. The subject is the control's state
+  change, not the pointer.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>press-ripple Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #f4f6f9);
+      }
+
+      #root {
+        --bg: #f4f6f9;
+        --fg: #14161b;
+        --surface: #ffffff;
+        --border: #dfe4ec;
+        --brand: #1d4ed8;
+        --accent: #0284c7;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 40%, #ffffff 0%, var(--bg, #f4f6f9) 70%);
+      }
+
+      .mount-stage {
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        container-type: size;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="press-ripple-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="3"
+      data-fps="30"
+    >
+      <div
+        id="press-ripple-mount"
+        class="mount-stage clip"
+        data-composition-id="press-ripple"
+        data-composition-src="./press-ripple.html"
+        data-variable-values='{"label":"Save changes","target_x":50,"target_y":52,"press_at":0.9,"cursor":"dark","accent":"green"}'
+        data-start="0"
+        data-duration="3"
+        data-track-index="0"
+        data-width="1920"
+        data-height="1080"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["press-ripple-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "press-ripple.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/press-ripple/press-ripple.html b/docs/public/catalog/components/press-ripple/press-ripple.html
new file mode 100644
index 0000000000..e4a7d8a1b6
--- /dev/null
+++ b/docs/public/catalog/components/press-ripple/press-ripple.html
@@ -0,0 +1,373 @@
+<!doctype html>
+<!--
+  press-ripple: HyperFrames video primitive (product demo / payoff)
+
+  A cursor decel-arrives from off-stage (power2.out, it arrives, never passes
+  through), lands a few px off-center on a caller-positioned target zone, the
+  target and cursor compress in lockstep, release with two ink ripple rings,
+  then the cursor exits off-stage the way it came. The pressed state and the
+  ripple aftermath carry the hold; the cursor never camps on the label.
+
+  The target is a slot: the element marked data-slot="target" is the press
+  surface. Its default content is a token-styled pill carrying the label
+  variable; replace the slot's children to press anything else. The slot
+  wrapper flips data-state="idle" to data-state="pressed" at the press, so
+  custom slot content can style its own pressed look.
+
+  Variables:
+    label: text inside the default pill (ignored when the slot is replaced)
+    target_x, target_y: zone center as a percent of the host box
+    press_at: seconds from mount start when the compression begins
+    cursor: light or dark pointer
+    accent: green, blue, or violet ink (ripple rings + pressed pill fill)
+    exit: none, fade, or up (default none; holds end films)
+
+  Envelope (elastic HOLD, never time-scaled):
+    IN   = entrance settle, cursor arrival, press, release ripple, cursor exit
+    HOLD = the rest of D, completely still on the pressed state
+    OUT  = none by default; 0.45s fade or fade-up when exit is set
+    press_at clamps into the window that keeps the whole gesture inside D.
+
+  Sync point: the press lands at press_at (default 1.4s).
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, has no data-width or data-height,
+  and registers one paused timeline under the literal press-ripple key.
+-->
+<html
+  lang="en"
+  data-composition-id="press-ripple"
+  data-composition-duration="3"
+  data-composition-variables='[
+    { "id": "label", "type": "string", "role": "content", "label": "Label", "description": "Text inside the default pill target.", "default": "Get started" },
+    { "id": "target_x", "type": "number", "role": "layout", "label": "Target X", "description": "Zone center, percent of host width.", "default": 50, "min": 8, "max": 92, "step": 1, "unit": "%" },
+    { "id": "target_y", "type": "number", "role": "layout", "label": "Target Y", "description": "Zone center, percent of host height.", "default": 50, "min": 8, "max": 92, "step": 1, "unit": "%" },
+    { "id": "press_at", "type": "number", "role": "timing", "label": "Press at", "description": "Seconds from mount start when the press begins.", "default": 1.4, "min": 0.9, "max": 10, "step": 0.1, "unit": "s" },
+    { "id": "cursor", "type": "enum", "role": "style", "label": "Cursor", "description": "Pointer tone.", "default": "light", "options": [{ "value": "light", "label": "Light" }, { "value": "dark", "label": "Dark" }] },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Contract color for the ripple ink and pressed fill.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "style", "label": "Exit", "description": "How the frame leaves. None holds the pressed state.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Fade up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Press Ripple</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="press-ripple" data-duration="3" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .pr-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            background: var(--bg, #0b0c0e);
+          }
+
+          .pr-stage {
+            position: absolute;
+            inset: 0;
+          }
+
+          /* Caller-positioned target zone; --pr-x / --pr-y come from the
+             target_x / target_y variables. */
+          .pr-zone {
+            position: absolute;
+            left: calc(var(--pr-x, 50) * 1cqw);
+            top: calc(var(--pr-y, 50) * 1cqh);
+            transform: translate(-50%, -50%);
+          }
+
+          /* Ink ripple rings, centered under the slot, hidden until release.
+             The ink mixes the accent toward --fg so the rings carry real
+             weight against the host background on both light and dark
+             themes; thickness reads as drawn ink, not a hairline. */
+          .pr-ring {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            width: 20cqmin;
+            height: 20cqmin;
+            margin: -10cqmin 0 0 -10cqmin;
+            border: 0.85cqmin solid
+              color-mix(in srgb, var(--pr-accent, #71f5a7) 72%, var(--fg, #f8fafc));
+            border-radius: 50%;
+            opacity: 0;
+            will-change: transform, opacity;
+          }
+
+          /* GSAP owns this wrapper's opacity/y (entrance) and scale (press). */
+          .pr-actor {
+            position: relative;
+            will-change: transform, opacity;
+          }
+
+          .pr-pill {
+            display: inline-flex;
+            align-items: center;
+            padding: var(--space-2, 2.6cqmin) calc(var(--space-2, 2.6cqmin) * 2.1);
+            border: 0.22cqmin solid var(--border, #343a46);
+            border-radius: 999px;
+            background: var(--surface, #14171c);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            font-size: 4.6cqmin;
+            font-weight: 600;
+            line-height: 1;
+            letter-spacing: -0.015em;
+            white-space: nowrap;
+          }
+
+          .pr-target-slot[data-state="pressed"] .pr-pill {
+            border-color: color-mix(in srgb, var(--pr-accent, #71f5a7) 72%, var(--fg, #f8fafc));
+            background: var(--pr-accent, #71f5a7);
+            color: var(--bg, #0b0c0e);
+          }
+
+          /* Pointer: SVG tip sits exactly at this box's top-left corner, so
+             the box position places the tip itself. GSAP moves it with x/y
+             transforms only (never left/top: layout props snap to integer
+             device pixels under the seek-by-frame capture engine) and scales
+             it about the tip (press). */
+          .pr-cursor {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 7cqmin;
+            height: 7cqmin;
+            transform-origin: 0 0;
+            filter: drop-shadow(0 0.4cqmin 0.9cqmin rgba(2, 6, 23, 0.45));
+            will-change: transform, opacity;
+          }
+
+          .pr-cursor svg {
+            display: block;
+            width: 100%;
+            height: 100%;
+          }
+        </style>
+
+        <div
+          id="press-ripple-clip"
+          class="pr-clip clip"
+          data-start="0"
+          data-duration="3"
+          data-track-index="0"
+        >
+          <div class="pr-stage">
+            <div class="pr-zone">
+              <div class="pr-ring" aria-hidden="true"></div>
+              <div class="pr-ring" aria-hidden="true"></div>
+              <div class="pr-actor">
+                <div class="pr-target-slot" data-slot="target" data-state="idle">
+                  <span class="pr-pill"></span>
+                </div>
+              </div>
+            </div>
+            <div class="pr-cursor" aria-hidden="true">
+              <svg viewBox="0 0 20 20">
+                <path
+                  class="pr-cursor-path"
+                  d="M0.6 0.6 L0.6 14.6 L4.4 11.3 L6.7 16.8 L9.4 15.6 L7.1 10.2 L12.4 9.8 Z"
+                  stroke-width="1.1"
+                  stroke-linejoin="round"
+                ></path>
+              </svg>
+            </div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".pr-stage");
+            var zone = root.querySelector(".pr-zone");
+            var rings = root.querySelectorAll(".pr-ring");
+            var actor = root.querySelector(".pr-actor");
+            var slot = root.querySelector(".pr-target-slot");
+            var pill = root.querySelector(".pr-pill");
+            var cursor = root.querySelector(".pr-cursor");
+            var cursorPath = root.querySelector(".pr-cursor-path");
+
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            function num(value, fallback, min, max) {
+              var n = Number(value);
+              if (!isFinite(n)) n = fallback;
+              return Math.min(max, Math.max(min, n));
+            }
+
+            var labelText =
+              vars.label == null ? "Get started" : String(vars.label).trim().replace(/\s+/g, " ");
+            var targetX = num(vars.target_x, 50, 8, 92);
+            var targetY = num(vars.target_y, 50, 8, 92);
+            var cursorTone = vars.cursor === "dark" ? "dark" : "light";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            // The bundler mirrors composition variables as scoped CSS custom
+            // props, so this unit's own accent variable shadows the contract
+            // --accent token inside the subtree ("blue" is a valid CSS color
+            // and would render pure blue). When the shadow is present, fall
+            // back to the literal contract value instead of var(--accent).
+            var computedAccent = getComputedStyle(root).getPropertyValue("--accent").trim();
+            if (
+              computedAccent === "green" ||
+              computedAccent === "blue" ||
+              computedAccent === "violet"
+            ) {
+              accentColors.blue = "#61a8ff";
+            }
+
+            pill.textContent = labelText;
+            root.style.setProperty("--pr-accent", accentColors[accent]);
+            root.style.setProperty("--pr-x", String(targetX));
+            root.style.setProperty("--pr-y", String(targetY));
+            if (cursorTone === "dark") {
+              cursorPath.setAttribute("fill", "#111827");
+              cursorPath.setAttribute("stroke", "#f8fafc");
+            } else {
+              cursorPath.setAttribute("fill", "#f8fafc");
+              cursorPath.setAttribute("stroke", "#0f172a");
+            }
+
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "3"));
+            var OUT = exit === "none" ? 0 : 0.45;
+            // The whole press tail (compress + release ripple + cursor exit)
+            // is ~1.05s; keep it inside D, then keep the OUT window after it.
+            var pressAt = num(vars.press_at, 1.4, 0.9, Math.max(0.9, duration - 1.05 - OUT));
+            // Human aim: the tip lands a few px off the zone's true center.
+            var landX = targetX + 0.55;
+            var landY = targetY + 0.85;
+            var arriveEnd = pressAt - 0.16;
+            var arriveStart = Math.max(0, arriveEnd - 0.78);
+
+            // Motion runs on transforms only (x/y px), never left/top: layout
+            // props snap to integer device pixels under the seek-by-frame
+            // capture engine. Stage size is read once, synchronously, at load
+            // (deterministic: fixed viewport per render) to convert the
+            // percent-based land/off-stage positions into px.
+            var stageW = root.clientWidth || 1920;
+            var stageH = root.clientHeight || 1080;
+            function xAt(percent) {
+              return (percent / 100) * stageW;
+            }
+            function yAt(percent) {
+              return (percent / 100) * stageH;
+            }
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: target settles in.
+            tl.fromTo(
+              actor,
+              { opacity: 0, y: "2.6cqh" },
+              { opacity: 1, y: 0, duration: 0.5, ease: "power3.out" },
+              0,
+            );
+
+            // Cursor decel-arrives from off-stage bottom-right. power2.out to
+            // an exact endpoint: it arrives, it never passes through.
+            tl.fromTo(
+              cursor,
+              { x: xAt(114), y: yAt(112) },
+              {
+                x: xAt(landX),
+                y: yAt(landY),
+                duration: arriveEnd - arriveStart,
+                ease: "power2.out",
+              },
+              arriveStart,
+            );
+
+            // Press: target and cursor compress in lockstep (cursor about its
+            // tip), then release with a soft spring.
+            tl.to([actor, cursor], { scale: 0.93, duration: 0.12, ease: "power1.in" }, pressAt);
+            tl.set(slot, { attr: { "data-state": "pressed" } }, pressAt + 0.12);
+            tl.to(
+              [actor, cursor],
+              { scale: 1, duration: 0.42, ease: "back.out(1.8)" },
+              pressAt + 0.14,
+            );
+
+            // Ink ripple rings from under the slot: real weight (thick ink,
+            // fg-mixed contrast, wide travel), still just two rings.
+            tl.fromTo(
+              rings,
+              { scale: 0.16, autoAlpha: 0.95 },
+              {
+                scale: 2.6,
+                autoAlpha: 0,
+                duration: 0.66,
+                ease: "power2.out",
+                stagger: 0.11,
+                immediateRender: false,
+              },
+              pressAt + 0.1,
+            );
+
+            // The cursor exits off-stage after the release (accelerating,
+            // power2.in) so it never occludes the label during the hold; the
+            // pressed state and the ripple aftermath carry the frame. Both
+            // endpoints are explicit so reverse seeks restore the landing.
+            tl.fromTo(
+              cursor,
+              { x: xAt(landX), y: yAt(landY) },
+              {
+                x: xAt(112),
+                y: yAt(110),
+                duration: 0.55,
+                ease: "power2.in",
+                immediateRender: false,
+              },
+              pressAt + 0.5,
+            );
+
+            // HOLD: dead-still on the pressed state; elastic with D.
+
+            // OUT: only when the host opts in; frame roots own transitions.
+            if (exit !== "none") {
+              var outStart = Math.max(pressAt + 1.05, duration - OUT);
+              var outVars = { opacity: 0, duration: OUT, ease: "power2.in" };
+              if (exit === "up") outVars.y = "-4cqh";
+              tl.to(stage, outVars, outStart);
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["press-ripple"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/pricing-tier-focus/demo.html b/docs/public/catalog/components/pricing-tier-focus/demo.html
new file mode 100644
index 0000000000..b0b4ef5e50
--- /dev/null
+++ b/docs/public/catalog/components/pricing-tier-focus/demo.html
@@ -0,0 +1,207 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Pricing Tier Focus - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f5f5f4;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+        /* ponytail: scale on wrapper — GSAP targets are children, no conflict */
+        transform: scale(1.9);
+        transform-origin: center center;
+      }
+      .hf-remocn-pricing-tier-focus {
+        --hf-accent: var(--accent, #18181b);
+        --hf-ink: #18181b;
+        --hf-muted: #71717a;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-pricing-tier-focus {
+        width: 820px;
+        min-height: 460px;
+        border-radius: 24px;
+        padding: 28px;
+        background: #fafafa;
+        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.1);
+        border: 1px solid #e4e4e7;
+        display: grid;
+        grid-template-columns: 260px 1fr;
+        gap: 20px;
+        overflow: hidden;
+      }
+      .hf-remocn-pricing-tier-focus .panel {
+        border: 1px solid #e4e4e7;
+        border-radius: 16px;
+        background: #ffffff;
+        padding: 20px;
+      }
+      .hf-remocn-pricing-tier-focus .prompt {
+        display: grid;
+        gap: 10px;
+        align-content: start;
+      }
+      .hf-remocn-pricing-tier-focus .pill {
+        height: 40px;
+        border-radius: 999px;
+        background: #18181b;
+        color: #fff;
+        display: flex;
+        align-items: center;
+        padding: 0 16px;
+        font-size: 13px;
+        font-weight: 600;
+        transform: translateX(var(--hf-pill-x, 0px));
+      }
+      .hf-remocn-pricing-tier-focus .preview {
+        display: grid;
+        gap: 12px;
+        align-content: start;
+      }
+      .hf-remocn-pricing-tier-focus .card {
+        border-radius: 12px;
+        background: #fff;
+        border: 1px solid #e4e4e7;
+        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
+        padding: 16px 18px;
+        transform: translate(var(--hf-card-x, 0px), var(--hf-card-y, 0px))
+          scale(var(--hf-card-scale, 1));
+        opacity: var(--hf-card-opacity, 1);
+      }
+      .hf-remocn-pricing-tier-focus .card.card--featured {
+        border-color: var(--hf-accent);
+        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16);
+      }
+      .hf-remocn-pricing-tier-focus .card-tier {
+        font-size: 11px;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.08em;
+        color: #71717a;
+        margin: 0 0 6px;
+      }
+      .hf-remocn-pricing-tier-focus .card--featured .card-tier {
+        color: var(--hf-accent);
+      }
+      .hf-remocn-pricing-tier-focus .card-price {
+        font-size: 22px;
+        font-weight: 700;
+        letter-spacing: -0.03em;
+        color: #18181b;
+        margin: 0 0 4px;
+      }
+      .hf-remocn-pricing-tier-focus .card-desc {
+        font-size: 11px;
+        color: #71717a;
+        margin: 0;
+      }
+      .hf-remocn-pricing-tier-focus h3 {
+        margin: 0 0 10px;
+        font-size: 26px;
+        font-weight: 700;
+        letter-spacing: -0.04em;
+        color: #18181b;
+      }
+      .hf-remocn-pricing-tier-focus p {
+        margin: 0 0 14px;
+        font-size: 12px;
+        line-height: 1.5;
+        color: #71717a;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="pricing-tier-focus-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-pricing-tier-focus">
+          <div class="panel prompt">
+            <h3>Pricing Tier Focus</h3>
+            <p>Pricing cards shift focus from free to pro with spotlight emphasis.</p>
+            <div class="pill">Generate scene</div>
+            <div class="pill">Refine motion</div>
+            <div class="pill">Export</div>
+          </div>
+          <div class="panel preview">
+            <div class="card">
+              <p class="card-tier">Free</p>
+              <p class="card-price">
+                $0<span style="font-size: 13px; font-weight: 500; color: #71717a">/mo</span>
+              </p>
+              <p class="card-desc">Up to 3 projects · 5 exports/month</p>
+            </div>
+            <div class="card card--featured">
+              <p class="card-tier">Pro</p>
+              <p class="card-price">
+                $29<span style="font-size: 13px; font-weight: 500; color: #71717a">/mo</span>
+              </p>
+              <p class="card-desc">Unlimited projects · HD exports · Priority</p>
+            </div>
+            <div class="card">
+              <p class="card-tier">Enterprise</p>
+              <p class="card-price">
+                $99<span style="font-size: 13px; font-weight: 500; color: #71717a">/mo</span>
+              </p>
+              <p class="card-desc">Custom seats · SSO · SLA support</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-pricing-tier-focus .pill",
+          { "--hf-pill-x": "-18px", opacity: 0 },
+          { "--hf-pill-x": "0px", opacity: 1, duration: 0.25, stagger: 0.08, ease: "power2.out" },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-pricing-tier-focus .card",
+          { "--hf-card-y": "28px", "--hf-card-scale": 0.96, "--hf-card-opacity": 0 },
+          {
+            "--hf-card-y": "0px",
+            "--hf-card-scale": 1,
+            "--hf-card-opacity": 1,
+            duration: 0.42,
+            stagger: 0.12,
+            ease: "power3.out",
+          },
+          startTime + 0.2,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["pricing-tier-focus-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/pricing-tier-focus/pricing-tier-focus.html b/docs/public/catalog/components/pricing-tier-focus/pricing-tier-focus.html
new file mode 100644
index 0000000000..b6a45e9a4a
--- /dev/null
+++ b/docs/public/catalog/components/pricing-tier-focus/pricing-tier-focus.html
@@ -0,0 +1,94 @@
+<!--
+  Pricing Tier Focus - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-pricing-tier-focus">
+  <div class="panel prompt">
+    <h3>Pricing Tier Focus</h3>
+    <p>Pricing cards shift focus from free to pro with spotlight emphasis.</p>
+    <div class="pill">Generate scene</div>
+    <div class="pill">Refine motion</div>
+    <div class="pill">Export</div>
+  </div>
+  <div class="panel preview">
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+  </div>
+</div>
+
+<style>
+  .hf-remocn-pricing-tier-focus {
+    --hf-accent: var(--accent, #18181b);
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-pricing-tier-focus {
+    width: 820px;
+    min-height: 460px;
+    border-radius: 34px;
+    padding: 28px;
+    background: #f8fafc;
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);
+    display: grid;
+    grid-template-columns: 280px 1fr;
+    gap: 22px;
+    overflow: hidden;
+  }
+  .hf-remocn-pricing-tier-focus .panel {
+    border: 1px solid rgba(15, 23, 42, 0.08);
+    border-radius: 24px;
+    background: rgba(255, 255, 255, 0.76);
+    padding: 22px;
+    backdrop-filter: blur(12px);
+  }
+  .hf-remocn-pricing-tier-focus .prompt {
+    display: grid;
+    gap: 12px;
+    align-content: start;
+  }
+  .hf-remocn-pricing-tier-focus .pill {
+    height: 42px;
+    border-radius: 999px;
+    background: #111827;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    padding: 0 18px;
+    font-weight: 800;
+    transform: translateX(var(--hf-pill-x, 0px));
+  }
+  .hf-remocn-pricing-tier-focus .preview {
+    display: grid;
+    gap: 14px;
+  }
+  .hf-remocn-pricing-tier-focus .card {
+    min-height: 78px;
+    border-radius: 18px;
+    background: #fff;
+    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
+    transform: translate(var(--hf-card-x, 0px), var(--hf-card-y, 0px))
+      scale(var(--hf-card-scale, 1));
+    opacity: var(--hf-card-opacity, 1);
+  }
+  .hf-remocn-pricing-tier-focus h3 {
+    margin: 0 0 14px;
+    font-size: 32px;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-pricing-tier-focus p {
+    margin: 0;
+    color: #475569;
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-pricing-tier-focus .pill', { '--hf-pill-x': '-18px', opacity: 0 }, { '--hf-pill-x': '0px', opacity: 1, duration: 0.25, stagger: 0.08, ease: 'power2.out' }, startTime); tl.fromTo('.hf-remocn-pricing-tier-focus .card', { '--hf-card-y': '28px', '--hf-card-scale': 0.96, '--hf-card-opacity': 0 }, { '--hf-card-y': '0px', '--hf-card-scale': 1, '--hf-card-opacity': 1, duration: 0.42, stagger: 0.12, ease: 'power3.out' }, startTime + 0.2);
+-->
diff --git a/docs/public/catalog/components/pull-back-reveal/demo.html b/docs/public/catalog/components/pull-back-reveal/demo.html
new file mode 100644
index 0000000000..7fbbf07395
--- /dev/null
+++ b/docs/public/catalog/components/pull-back-reveal/demo.html
@@ -0,0 +1,103 @@
+<!doctype html>
+<!--
+  pull-back-reveal demo. This standalone composition mounts the primitive
+  through data-composition-src. Non-default copy and accent prove all three
+  variables flow through the host-sized mount.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Pull Back Reveal Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0b0c0e;
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --muted: #a7b0c0;
+        --surface: #1b2230;
+        --border: #3b4558;
+        --radius: 2.4cqw;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-body: Inter, system-ui, sans-serif;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 44%, #171c28 0%, #0b0c0e 72%);
+      }
+
+      .mount-card {
+        width: 78%;
+        height: 74%;
+        left: 11%;
+        top: 13%;
+        container-type: size;
+        overflow: hidden;
+        border: 0.1cqw solid rgba(148, 163, 184, 0.26);
+        border-radius: 2.2cqw;
+        background: var(--bg);
+        box-shadow: 0 5cqh 12cqh rgba(0, 0, 0, 0.56);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="pull-back-reveal-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4.5"
+      data-fps="30"
+    >
+      <div
+        id="pull-back-reveal-mount"
+        class="mount-card clip"
+        data-composition-id="pull-back-reveal"
+        data-composition-src="./pull-back-reveal.html"
+        data-variable-values='{"detail_text":"+428%","headline":"Momentum scales","accent":"violet"}'
+        data-start="0"
+        data-duration="4.5"
+        data-track-index="0"
+        data-width="1498"
+        data-height="799"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["pull-back-reveal-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "pull-back-reveal.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/pull-back-reveal/pull-back-reveal.html b/docs/public/catalog/components/pull-back-reveal/pull-back-reveal.html
new file mode 100644
index 0000000000..124b520db9
--- /dev/null
+++ b/docs/public/catalog/components/pull-back-reveal/pull-back-reveal.html
@@ -0,0 +1,336 @@
+<!doctype html>
+<!--
+  pull-back-reveal: HyperFrames video primitive (camera / reveal / recontextualize)
+
+  Concept: the frame starts tight on one stat chip, pauses long enough to
+  establish it as the subject, then pulls back to reveal the headline and two
+  supporting cards that give the stat its meaning. The chip remains the same
+  DOM element for the entire move.
+
+  Variables:
+    - detail_text (string, default "+312%"): the stat inside the focus chip.
+    - headline (string, default "Growth compounds"): the scene headline.
+    - accent (green | blue | violet, default "green"): the scene highlight.
+
+  Envelope (fixed IN, elastic HOLD, no OUT, never gsap.timeScale()):
+    IN_BASE  = 2.40s  tight hold, whip-out pull-back, then a short drift settle
+    HOLD     = elastic full-scene hold with a restrained shadow breath
+    OUT_BASE = 0s     the reveal establishes the final composed scene
+    If D is shorter than IN_BASE, the three IN beats compress together and
+    HOLD becomes zero. Longer mounts stretch HOLD only.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, has no data-width or data-height,
+  and registers one paused timeline under the hardcoded pull-back-reveal id.
+-->
+<html
+  lang="en"
+  data-composition-id="pull-back-reveal"
+  data-composition-duration="4.5"
+  data-composition-variables='[
+    { "id": "detail_text", "type": "string", "role": "content", "label": "Detail text", "description": "Stat shown in the detail chip at the center of the reveal.", "default": "+312%" },
+    { "id": "headline", "type": "string", "role": "content", "label": "Headline", "description": "Headline revealed around the focused detail.", "default": "Growth compounds" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Highlight color used across the composed scene.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Pull Back Reveal</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="pull-back-reveal" data-duration="4.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            background: var(--bg, #0b0c0e);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .pbr-clip,
+          .pbr-world {
+            position: absolute;
+            inset: 0;
+          }
+
+          .pbr-clip {
+            overflow: hidden;
+            background: var(--bg, #0b0c0e);
+          }
+
+          .pbr-world {
+            overflow: hidden;
+            transform-origin: 50% 50%;
+            background:
+              radial-gradient(
+                circle at 48% 50%,
+                color-mix(in srgb, var(--pbr-accent) 19%, transparent),
+                transparent 27%
+              ),
+              linear-gradient(
+                145deg,
+                color-mix(in srgb, var(--surface, #18202d) 82%, var(--bg, #0b0c0e)),
+                var(--bg, #0b0c0e) 72%
+              );
+            will-change: transform;
+          }
+
+          .pbr-headline {
+            position: absolute;
+            z-index: 1;
+            top: 8cqh;
+            left: 8cqw;
+            width: 76cqw;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: 7.6cqw;
+            font-weight: 780;
+            line-height: 0.92;
+            letter-spacing: -0.055em;
+            overflow-wrap: anywhere;
+            text-shadow: 0 1.8cqh 5cqh color-mix(in srgb, var(--bg, #0b0c0e) 72%, transparent);
+          }
+
+          .pbr-card {
+            position: absolute;
+            z-index: 1;
+            overflow: hidden;
+            border: 0.11cqw solid color-mix(in srgb, var(--border, #334155) 78%, transparent);
+            border-radius: var(--radius, 2.4cqw);
+            background: color-mix(in srgb, var(--surface, #1e293b) 92%, transparent);
+            box-shadow:
+              0 2.2cqh 5.5cqh color-mix(in srgb, var(--bg, #0b0c0e) 54%, transparent),
+              inset 0 0.1cqh 0 color-mix(in srgb, var(--fg, #f8fafc) 9%, transparent);
+          }
+
+          .pbr-detail-card {
+            top: 31cqh;
+            left: 8cqw;
+            width: 56cqw;
+            height: 56cqh;
+            padding: 5cqh 4cqw;
+          }
+
+          .pbr-detail-label,
+          .pbr-support-label {
+            color: var(--muted, #94a3b8);
+            font-size: 1.35cqw;
+            font-weight: 680;
+            line-height: 1;
+            letter-spacing: 0.1em;
+            text-transform: uppercase;
+          }
+
+          .pbr-detail-chip {
+            position: absolute;
+            top: 13cqh;
+            left: 31cqw;
+            width: 20cqw;
+            min-height: 12cqh;
+            display: grid;
+            place-items: center;
+            padding: 1.8cqh 1.5cqw;
+            border: 0.12cqw solid color-mix(in srgb, var(--pbr-accent) 72%, var(--fg, #f8fafc));
+            border-radius: calc(var(--radius, 2.4cqw) * 0.72);
+            background: color-mix(in srgb, var(--pbr-accent) 22%, var(--surface, #1e293b));
+            box-shadow: 0 1.8cqh 4.5cqh color-mix(in srgb, var(--pbr-accent) 28%, transparent);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: 4.4cqw;
+            font-weight: 820;
+            line-height: 1;
+            letter-spacing: -0.055em;
+            overflow: hidden;
+            text-align: center;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          .pbr-detail-context {
+            position: absolute;
+            bottom: 5cqh;
+            left: 4cqw;
+            color: var(--muted, #94a3b8);
+            font-size: 1.6cqw;
+            font-weight: 560;
+            line-height: 1.25;
+          }
+
+          .pbr-support-card {
+            left: 75cqw;
+            width: 17cqw;
+            height: 25cqh;
+            padding: 3.6cqh 2.2cqw;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+          }
+
+          .pbr-support-card-a {
+            top: 31cqh;
+          }
+
+          .pbr-support-card-b {
+            top: 62cqh;
+          }
+
+          .pbr-support-value {
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: 3.7cqw;
+            font-weight: 780;
+            line-height: 0.9;
+            letter-spacing: -0.05em;
+          }
+
+          .pbr-support-rule {
+            width: 100%;
+            height: 0.5cqh;
+            border-radius: 999cqw;
+            background: color-mix(in srgb, var(--pbr-accent) 72%, var(--border, #334155));
+          }
+
+          .pbr-ground {
+            position: absolute;
+            z-index: 0;
+            left: 15cqw;
+            bottom: 2cqh;
+            width: 70cqw;
+            height: 10cqh;
+            border-radius: 50%;
+            background: color-mix(in srgb, var(--pbr-accent) 16%, var(--bg, #0b0c0e));
+            filter: blur(3.2cqh);
+            opacity: 0;
+            transform-origin: 50% 50%;
+            will-change: transform, opacity;
+          }
+        </style>
+
+        <div
+          id="pull-back-reveal-clip"
+          class="pbr-clip clip"
+          data-start="0"
+          data-duration="4.5"
+          data-track-index="0"
+        >
+          <div class="pbr-world">
+            <div class="pbr-headline"></div>
+
+            <section class="pbr-card pbr-detail-card">
+              <div class="pbr-detail-label">Net growth</div>
+              <div class="pbr-detail-chip"></div>
+              <div class="pbr-detail-context">Across every active workspace</div>
+            </section>
+
+            <section class="pbr-card pbr-support-card pbr-support-card-a">
+              <div class="pbr-support-label">Retention</div>
+              <div class="pbr-support-value">94%</div>
+              <div class="pbr-support-rule"></div>
+            </section>
+
+            <section class="pbr-card pbr-support-card pbr-support-card-b">
+              <div class="pbr-support-label">Teams</div>
+              <div class="pbr-support-value">48</div>
+              <div class="pbr-support-rule"></div>
+            </section>
+
+            <div class="pbr-ground"></div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var world = root.querySelector(".pbr-world");
+            var headline = root.querySelector(".pbr-headline");
+            var detail = root.querySelector(".pbr-detail-chip");
+            var ground = root.querySelector(".pbr-ground");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var detailText = vars.detail_text == null ? "+312%" : String(vars.detail_text);
+            var headlineText = vars.headline == null ? "Growth compounds" : String(vars.headline);
+            var accentColors = {
+              green: "var(--brand, #a1a1aa)",
+              blue: "var(--accent, #a1a1aa)",
+              violet: "var(--accent-2, #a1a1aa)",
+            };
+            var accentColor = accentColors[vars.accent] || accentColors.green;
+
+            detail.textContent = detailText;
+            headline.textContent = headlineText;
+            root.style.setProperty("--pbr-accent", accentColor);
+
+            // RETIME RANGE: IN owns the tight beat and complete camera move.
+            // HOLD is the only elastic phase. This reveal has no exit.
+            var IN_BASE = 2.4;
+            var TIGHT_HOLD_BASE = 0.55;
+            var WHIP_BASE = 1.2;
+            var DRIFT_BASE = 0.65;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4.5"));
+            var phaseScale = Math.min(1, duration / IN_BASE);
+            var TIGHT_HOLD = TIGHT_HOLD_BASE * phaseScale;
+            var WHIP = WHIP_BASE * phaseScale;
+            var DRIFT = DRIFT_BASE * phaseScale;
+            var IN = TIGHT_HOLD + WHIP + DRIFT;
+            var HOLD = Math.max(0, duration - IN);
+
+            var tl = gsap.timeline({ paused: true });
+
+            tl.fromTo(
+              world,
+              { scale: 2.2, y: 0 },
+              { scale: 1.055, y: "0.7cqh", duration: WHIP, ease: "power4.out" },
+              TIGHT_HOLD,
+            );
+            tl.to(
+              world,
+              { scale: 1, y: 0, duration: DRIFT, ease: "sine.inOut" },
+              TIGHT_HOLD + WHIP,
+            );
+            tl.fromTo(
+              ground,
+              { opacity: 0, scaleX: 0.72, scaleY: 0.72 },
+              { opacity: 0.78, scaleX: 1, scaleY: 1, duration: DRIFT, ease: "power2.out" },
+              TIGHT_HOLD + WHIP,
+            );
+
+            if (HOLD > 0) {
+              tl.to(
+                ground,
+                { opacity: 0.68, scaleX: 0.97, duration: HOLD * 0.5, ease: "sine.inOut" },
+                IN,
+              );
+              tl.to(
+                ground,
+                { opacity: 0.78, scaleX: 1, duration: HOLD * 0.5, ease: "sine.inOut" },
+                IN + HOLD * 0.5,
+              );
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["pull-back-reveal"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/pull-to-refresh/demo.html b/docs/public/catalog/components/pull-to-refresh/demo.html
new file mode 100644
index 0000000000..2dcad75033
--- /dev/null
+++ b/docs/public/catalog/components/pull-to-refresh/demo.html
@@ -0,0 +1,107 @@
+<!doctype html>
+<!--
+  pull-to-refresh: demo. Standalone 1920x1080 composition that mounts the
+  primitive through data-composition-src inside a tall mobile-list card.
+  The host page is static and owns the box. Non-default pullDistance and
+  spinnerStyle overrides prove both variables cross the mount boundary.
+  The primitive has no data-width or data-height and must derive its layout
+  from this card. Kept in sync with pull-to-refresh.html by hand.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Pull to Refresh: Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #05070d;
+      }
+
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 42%, #16223a 0%, #05070d 72%);
+      }
+
+      /* The host box is intentionally taller than it is wide, like a mobile
+         list viewport, but it is not a device silhouette. Explicit CSS size
+         keeps cqw/cqh stable for the mounted primitive. */
+      .mount-card {
+        --bg: #0b1120;
+        --surface: #172235;
+        --fg: #f4f7fb;
+        --muted: #93a4bb;
+        --border: #2f4058;
+        --brand: #4de1aa;
+        width: 34%;
+        height: 78%;
+        left: 33%;
+        top: 11%;
+        overflow: hidden;
+        border: 1px solid rgba(148, 163, 184, 0.28);
+        border-radius: 36px;
+        box-shadow: 0 44px 110px rgba(0, 0, 0, 0.52);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="pull-to-refresh-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="pull-to-refresh-mount"
+        class="mount-card clip"
+        data-composition-id="pull-to-refresh"
+        data-composition-src="./pull-to-refresh.html"
+        data-variable-values='{"pullDistance":190,"spinnerStyle":"dots"}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="653"
+        data-height="842"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      // The mounted primitive owns motion. This host registers one empty,
+      // paused timeline under its own composition id for runtime discovery.
+      window.__timelines = window.__timelines || {};
+      window.__timelines["pull-to-refresh-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "pull-to-refresh.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/pull-to-refresh/pull-to-refresh.html b/docs/public/catalog/components/pull-to-refresh/pull-to-refresh.html
new file mode 100644
index 0000000000..f16076767b
--- /dev/null
+++ b/docs/public/catalog/components/pull-to-refresh/pull-to-refresh.html
@@ -0,0 +1,679 @@
+<!doctype html>
+<!--
+  pull-to-refresh: HyperFrames video primitive (pointers / interaction / demonstrate)
+
+  Concept: a mobile list yields under a scripted pull, arms at a visible
+  threshold, commits into a bounded loading state, then snaps exactly back
+  to rest. One mechanic, one job: demonstrate a native pull-to-refresh.
+
+  Compiled-from evidence: GAP, agent B1 hard miss (video-primitives
+  candidates card); mobile gesture-physics-recipes.md, section 9 rubber-band
+  curve and quiet/default/forceful register table. The constants below use
+  the default register as inspiration, while the self-contained resistance
+  curve replaces the shared toolkit that is not available in this catalog.
+
+  Use when: a mobile product scene needs a recognizable refresh gesture and
+  loading handoff. Skip it for generic scrolling or a device silhouette.
+
+  Variables (declared in data-composition-variables below):
+    - pullDistance (number, default 120, range 60–220): raw pull distance fed
+      into the nonlinear resistance curve before host-relative translation.
+    - spinnerStyle ("arrow" | "dots" | "ring", default "ring"): the refresh
+      indicator. Each option has different geometry and active motion.
+
+  Envelope (fixed IN/OUT, elastic loading HOLD only, never gsap.timeScale()):
+    IN_BASE  = 1.80s  contact, resistant drag, threshold arm, commit,
+                      handoff, and the first bounded loading cycle
+    HOLD     = elastic = max(0, D - (IN_BASE + OUT_BASE)); additional finite
+               loading cycles while the content stays at its held offset
+    OUT_BASE = 0.65s  indicator exit and content snap-back
+    If D < 2.45s, IN and OUT scale down together so IN + OUT == D and HOLD
+    is zero. The drag remains heavier and slower than the release response.
+
+  Sync points (fixed offsets, never inside elastic HOLD):
+    - impact: 0.82s into unscaled IN, threshold commit and spinner handoff
+    - settle: 0.65s into unscaled OUT, content reseated exactly at y = 0
+    Both offsets scale proportionally only when D compresses the envelope.
+
+  Sound cues: declarative only. `hf:sfx` events fire for "refresh-commit"
+  at impact and "refresh-settle" at settle. Scene-level mixing owns audio.
+
+  Mount contract: this file is a mountable sub-composition. A host loads it
+  via data-composition-src, and the runtime clones only <template> contents.
+  #root fills the host box with position:absolute, inset:0, and
+  container-type:size. It has no data-width or data-height. All internal
+  geometry uses cqw/cqh, and the hardcoded composition id is required because
+  FLATTENED_INNER_ROOT_STRIP_ATTRS removes the mounted root id attribute.
+  Variables come from window.__hyperframes.getVariables(), which owns merged
+  declared defaults and per-instance overrides after mounting.
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "pullDistance", "type": "number", "role": "layout", "label": "Pull distance", "description": "Raw pull distance before nonlinear rubber-band resistance.", "default": 120, "min": 60, "max": 220, "step": 5 },
+    { "id": "spinnerStyle", "type": "enum", "role": "content", "label": "Spinner style", "description": "Refresh indicator geometry and loading motion.", "default": "ring", "options": [{ "value": "arrow", "label": "Arrow" }, { "value": "dots", "label": "Dots" }, { "value": "ring", "label": "Ring" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Pull to Refresh</title>
+    <!-- Metadata only. The mount runtime discards everything outside the
+         template, while the loader still reads variable declarations from
+         this html element before cloning the template. -->
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="pull-to-refresh" data-duration="4" data-fps="30">
+        <style>
+          @property --ptr-progress {
+            syntax: "<number>";
+            inherits: true;
+            initial-value: 0;
+          }
+
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          /* INVARIANT: #root is the mount-box owner. The host supplies every
+             dimension, and all descendants size against this container. */
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            color: var(--fg, #f4f7fb);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+          }
+
+          .ptr-clip {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            background: var(--bg, #0b1120);
+          }
+
+          .ptr-indicator {
+            --ptr-progress: 0;
+            position: absolute;
+            z-index: 0;
+            inset: 0 0 auto;
+            height: 15cqh;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding-top: 1.5cqh;
+            opacity: 0;
+            color: var(--brand, #35d6a0);
+          }
+
+          .ptr-indicator-visual {
+            width: 6.2cqh;
+            height: 6.2cqh;
+            display: none;
+            place-items: center;
+          }
+
+          #root[data-spinner-style="ring"] .ptr-ring,
+          #root[data-spinner-style="arrow"] .ptr-arrow,
+          #root[data-spinner-style="dots"] .ptr-dots {
+            display: grid;
+          }
+
+          /* EDIT ZONE: all three styles read the same --ptr-progress scalar.
+             Ring maps it to arc fill, arrow maps it to a threshold flip, and
+             dots map it to a three-step reveal. Active motion stays separate
+             so the selected style has a distinctive loading silhouette. */
+          .ptr-ring-core {
+            width: 100%;
+            height: 100%;
+            border-radius: 50%;
+            background: conic-gradient(
+              from -90deg,
+              var(--brand, #35d6a0) 0 calc(var(--ptr-progress) * 1%),
+              color-mix(in srgb, var(--surface, #1e293b) 86%, transparent)
+                calc(var(--ptr-progress) * 1%) 100%
+            );
+            -webkit-mask: radial-gradient(farthest-side, transparent 59%, var(--fg, #f4f7fb) 61%);
+            mask: radial-gradient(farthest-side, transparent 59%, var(--fg, #f4f7fb) 61%);
+          }
+
+          .ptr-arrow-progress {
+            width: 100%;
+            height: 100%;
+            display: grid;
+            place-items: center;
+            border-radius: 50%;
+            border: 0.35cqh solid
+              color-mix(in srgb, var(--brand, #35d6a0) 58%, var(--border, #334155));
+            background: color-mix(in srgb, var(--surface, #1e293b) 88%, transparent);
+            transform: rotate(calc(var(--ptr-progress) * 1.8deg));
+          }
+
+          .ptr-arrow-glyph {
+            position: relative;
+            width: 1.5cqh;
+            height: 2.7cqh;
+            border-radius: 0.3cqh;
+            background: var(--brand, #35d6a0);
+          }
+
+          .ptr-arrow-glyph::after {
+            content: "";
+            position: absolute;
+            left: 50%;
+            bottom: -0.8cqh;
+            width: 2.3cqh;
+            height: 2.3cqh;
+            border-right: 0.55cqh solid var(--brand, #35d6a0);
+            border-bottom: 0.55cqh solid var(--brand, #35d6a0);
+            transform: translateX(-50%) rotate(45deg);
+          }
+
+          .ptr-dots {
+            grid-template-columns: repeat(3, 1.7cqh);
+            gap: 0.8cqh;
+            align-content: center;
+            width: auto;
+          }
+
+          .ptr-dot {
+            width: 1.7cqh;
+            height: 1.7cqh;
+            border-radius: 50%;
+            background: var(--brand, #35d6a0);
+            box-shadow: 0 0 1.2cqh color-mix(in srgb, var(--brand, #35d6a0) 50%, transparent);
+          }
+
+          .ptr-dot:nth-child(1) {
+            opacity: clamp(0.2, calc(var(--ptr-progress) / 30), 1);
+          }
+
+          .ptr-dot:nth-child(2) {
+            opacity: clamp(0.2, calc((var(--ptr-progress) - 30) / 30), 1);
+          }
+
+          .ptr-dot:nth-child(3) {
+            opacity: clamp(0.2, calc((var(--ptr-progress) - 60) / 30), 1);
+          }
+
+          .ptr-state {
+            position: relative;
+            width: 100%;
+            height: 3.4cqh;
+            margin-top: 0.9cqh;
+            color: var(--muted, #94a3b8);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: clamp(1.35cqh, 1.8cqw, 2.05cqh);
+            font-weight: 700;
+            letter-spacing: 0.04em;
+            text-align: center;
+            text-transform: uppercase;
+          }
+
+          .ptr-state span {
+            position: absolute;
+            inset: 0;
+            opacity: 0;
+          }
+
+          .ptr-content {
+            position: absolute;
+            z-index: 1;
+            inset: 0;
+            overflow: hidden;
+            background: var(--bg, #0b1120);
+            border-radius: inherit;
+            box-shadow: 0 -1cqh 3cqh color-mix(in srgb, var(--bg, #0b1120) 65%, transparent);
+          }
+
+          .ptr-topbar {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            height: 10cqh;
+            padding: 0 6cqw;
+            border-bottom: 0.12cqh solid var(--border, #334155);
+            background: color-mix(in srgb, var(--surface, #1e293b) 52%, var(--bg, #0b1120));
+          }
+
+          .ptr-title {
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: clamp(2.8cqh, 5.2cqw, 4.3cqh);
+            font-weight: 760;
+            letter-spacing: -0.035em;
+          }
+
+          .ptr-updated {
+            display: flex;
+            align-items: center;
+            gap: 1.4cqw;
+            color: var(--brand, #35d6a0);
+            font-size: clamp(1.4cqh, 2.2cqw, 2cqh);
+            font-weight: 700;
+            opacity: 0;
+          }
+
+          .ptr-updated::before {
+            content: "";
+            width: 1.4cqh;
+            height: 1.4cqh;
+            border-radius: 50%;
+            background: var(--brand, #35d6a0);
+            box-shadow: 0 0 1.2cqh color-mix(in srgb, var(--brand, #35d6a0) 50%, transparent);
+          }
+
+          .ptr-search {
+            display: flex;
+            align-items: center;
+            height: 7cqh;
+            margin: 3cqh 5cqw 2cqh;
+            padding: 0 4cqw;
+            border: 0.12cqh solid var(--border, #334155);
+            border-radius: 3.5cqh;
+            background: var(--surface, #1e293b);
+            color: var(--muted, #94a3b8);
+            font-size: clamp(1.7cqh, 2.8cqw, 2.5cqh);
+          }
+
+          .ptr-list {
+            display: grid;
+            gap: 1.7cqh;
+            padding: 0 5cqw 5cqh;
+          }
+
+          .ptr-card {
+            display: grid;
+            grid-template-columns: 8cqh 1fr auto;
+            align-items: center;
+            min-height: 11.5cqh;
+            gap: 3cqw;
+            padding: 2cqh 4cqw;
+            border: 0.12cqh solid var(--border, #334155);
+            border-radius: 2.4cqh;
+            background: var(--surface, #1e293b);
+            box-shadow: 0 1cqh 2.4cqh color-mix(in srgb, var(--bg, #0b1120) 55%, transparent);
+          }
+
+          .ptr-avatar {
+            display: grid;
+            place-items: center;
+            width: 6.3cqh;
+            height: 6.3cqh;
+            border-radius: 2cqh;
+            background: color-mix(in srgb, var(--brand, #35d6a0) 20%, var(--surface, #1e293b));
+            color: var(--brand, #35d6a0);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: 2.3cqh;
+            font-weight: 800;
+          }
+
+          .ptr-copy {
+            min-width: 0;
+          }
+
+          .ptr-card-title {
+            color: var(--fg, #f4f7fb);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: clamp(1.9cqh, 3.1cqw, 2.7cqh);
+            font-weight: 720;
+          }
+
+          .ptr-card-subtitle {
+            margin-top: 0.5cqh;
+            color: var(--muted, #94a3b8);
+            font-size: clamp(1.45cqh, 2.3cqw, 2.05cqh);
+            line-height: 1.25;
+          }
+
+          .ptr-time {
+            align-self: start;
+            color: var(--muted, #94a3b8);
+            font-size: clamp(1.25cqh, 2cqw, 1.8cqh);
+            font-weight: 650;
+          }
+        </style>
+
+        <div
+          id="pull-to-refresh-clip"
+          class="ptr-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="ptr-indicator" aria-hidden="true">
+            <div class="ptr-indicator-visual ptr-ring">
+              <div class="ptr-ring-core"></div>
+            </div>
+            <div class="ptr-indicator-visual ptr-arrow">
+              <div class="ptr-arrow-progress">
+                <div class="ptr-arrow-glyph"></div>
+              </div>
+            </div>
+            <div class="ptr-indicator-visual ptr-dots">
+              <span class="ptr-dot"></span>
+              <span class="ptr-dot"></span>
+              <span class="ptr-dot"></span>
+            </div>
+            <div class="ptr-state">
+              <span class="ptr-pull-label">Pull to refresh</span>
+              <span class="ptr-release-label">Release to refresh</span>
+              <span class="ptr-loading-label">Refreshing</span>
+            </div>
+          </div>
+
+          <section class="ptr-content" aria-label="Activity list">
+            <header class="ptr-topbar">
+              <div class="ptr-title">Activity</div>
+              <div class="ptr-updated">Updated now</div>
+            </header>
+            <div class="ptr-search">Search activity</div>
+            <div class="ptr-list">
+              <article class="ptr-card">
+                <div class="ptr-avatar">AL</div>
+                <div class="ptr-copy">
+                  <div class="ptr-card-title">Alex shared a draft</div>
+                  <div class="ptr-card-subtitle">Launch sequence, ready for review</div>
+                </div>
+                <div class="ptr-time">Now</div>
+              </article>
+              <article class="ptr-card">
+                <div class="ptr-avatar">MK</div>
+                <div class="ptr-copy">
+                  <div class="ptr-card-title">Mika left feedback</div>
+                  <div class="ptr-card-subtitle">Three comments on the new flow</div>
+                </div>
+                <div class="ptr-time">4m</div>
+              </article>
+              <article class="ptr-card">
+                <div class="ptr-avatar">NO</div>
+                <div class="ptr-copy">
+                  <div class="ptr-card-title">Noah published an update</div>
+                  <div class="ptr-card-subtitle">Mobile preview is available</div>
+                </div>
+                <div class="ptr-time">18m</div>
+              </article>
+              <article class="ptr-card">
+                <div class="ptr-avatar">SR</div>
+                <div class="ptr-copy">
+                  <div class="ptr-card-title">Sara joined the project</div>
+                  <div class="ptr-card-subtitle">Workspace access granted</div>
+                </div>
+                <div class="ptr-time">1h</div>
+              </article>
+            </div>
+          </section>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            // Literal by contract. Mounted roots lose data-composition-id
+            // during flattening, so reading the id back from the DOM can
+            // register the timeline under "null".
+            var compositionId = "pull-to-refresh";
+            var clip = root.querySelector(".ptr-clip");
+            var indicator = root.querySelector(".ptr-indicator");
+            var content = root.querySelector(".ptr-content");
+            var pullLabel = root.querySelector(".ptr-pull-label");
+            var releaseLabel = root.querySelector(".ptr-release-label");
+            var loadingLabel = root.querySelector(".ptr-loading-label");
+            var ring = root.querySelector(".ptr-ring-core");
+            var arrow = root.querySelector(".ptr-arrow-glyph");
+            var dots = Array.prototype.slice.call(root.querySelectorAll(".ptr-dot"));
+            var updated = root.querySelector(".ptr-updated");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            // INVARIANT: only finite 60–220 input reaches the physics owner.
+            // Zero, NaN, and strings outside the range fall back explicitly.
+            var rawPull = Number(vars.pullDistance);
+            var pullDistance = Number.isFinite(rawPull)
+              ? Math.max(60, Math.min(220, rawPull))
+              : 120;
+            // INVARIANT: only one of the declared indicator variants reaches
+            // the renderer. Invalid overrides resolve to the declared default.
+            var spinnerStyle =
+              vars.spinnerStyle === "arrow" || vars.spinnerStyle === "dots"
+                ? vars.spinnerStyle
+                : "ring";
+            root.setAttribute("data-spinner-style", spinnerStyle);
+
+            // Self-contained rubber-band mapping from the physics recipe:
+            // displayed = x*c / (x*c/d + 1). REFERENCE is a normalized
+            // preview dimension, then converted to cqh for host-relative
+            // motion. This function alone owns resistance and displacement.
+            var RESISTANCE = 0.55;
+            var REFERENCE = 640;
+            function rubberBand(distance) {
+              return (distance * RESISTANCE) / ((distance * RESISTANCE) / REFERENCE + 1);
+            }
+            var shownPeak = (rubberBand(pullDistance) / REFERENCE) * 100;
+            var heldOffset = Math.min(shownPeak, Math.max(5.8, shownPeak * 0.76));
+            var dragState = { raw: 0 };
+
+            // RETIME RANGE: lifecycle ownership lives only in these constants.
+            // IN and OUT scale together only when the composition duration is short.
+            var IN_BASE = 1.8;
+            var OUT_BASE = 0.65;
+            var CONTACT_BASE = 0.12;
+            var DRAG_BASE = 0.7;
+            var ARM_AT_BASE = 0.61;
+            var IMPACT_AT_BASE = 0.82;
+            var HANDOFF_BASE = 0.22;
+            var durationValue = Number(clip.dataset.duration);
+            var duration = Number.isFinite(durationValue) && durationValue > 0 ? durationValue : 4;
+            var totalBase = IN_BASE + OUT_BASE;
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var CONTACT = CONTACT_BASE * scale;
+            var DRAG = DRAG_BASE * scale;
+            var ARM_AT = ARM_AT_BASE * scale;
+            var IMPACT_AT = IMPACT_AT_BASE * scale;
+            var HANDOFF = HANDOFF_BASE * scale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var OUT_START = IN + HOLD;
+            var ACTIVE_DURATION = Math.max(0.001, OUT_START - IMPACT_AT);
+
+            function fireSfx(id, atTime) {
+              root.dispatchEvent(
+                new CustomEvent("hf:sfx", {
+                  detail: { id: id, t: atTime },
+                  bubbles: true,
+                }),
+              );
+            }
+
+            gsap.set(content, { y: "0cqh" });
+            gsap.set(indicator, { "--ptr-progress": 0, opacity: 0 });
+            gsap.set(pullLabel, { opacity: 1 });
+            gsap.set(releaseLabel, { opacity: 0 });
+            gsap.set(loadingLabel, { opacity: 0 });
+            gsap.set(ring, { rotation: 0 });
+            gsap.set(arrow, { rotation: 0 });
+            gsap.set(dots, { y: "0cqh", scale: 1 });
+            gsap.set(updated, { opacity: 0 });
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN, contact and nonlinear pull. The distance is already
+            // resistance-mapped, while power2.out controls drag timing.
+            tl.fromTo(
+              indicator,
+              { "--ptr-progress": 0, opacity: 0 },
+              {
+                "--ptr-progress": 100,
+                opacity: 1,
+                duration: DRAG,
+                ease: "power2.out",
+                immediateRender: false,
+              },
+              CONTACT,
+            );
+            tl.fromTo(
+              dragState,
+              { raw: 0 },
+              {
+                raw: pullDistance,
+                duration: DRAG,
+                ease: "power2.out",
+                onUpdate: function () {
+                  var displayed = (rubberBand(dragState.raw) / REFERENCE) * 100;
+                  gsap.set(content, { y: displayed + "cqh" });
+                },
+                immediateRender: false,
+              },
+              CONTACT,
+            );
+
+            // Threshold arm, a fixed point in IN. The indicator geometry is
+            // full and the label flips before release commits the refresh.
+            tl.to(pullLabel, { opacity: 0, duration: 0.12 * scale, ease: "power2.in" }, ARM_AT);
+            tl.to(releaseLabel, { opacity: 1, duration: 0.16 * scale, ease: "power2.out" }, ARM_AT);
+
+            tl.addLabel("impact", IMPACT_AT);
+            tl.fromTo(
+              content,
+              { y: shownPeak + "cqh" },
+              {
+                y: heldOffset + "cqh",
+                duration: HANDOFF,
+                ease: "power3.out",
+                immediateRender: false,
+              },
+              IMPACT_AT,
+            );
+            tl.to(
+              releaseLabel,
+              { opacity: 0, duration: 0.1 * scale, ease: "power2.in" },
+              IMPACT_AT,
+            );
+            tl.to(
+              loadingLabel,
+              { opacity: 1, duration: 0.16 * scale, ease: "power2.out" },
+              IMPACT_AT,
+            );
+            tl.call(
+              function () {
+                fireSfx("refresh-commit", IMPACT_AT);
+              },
+              [],
+              IMPACT_AT,
+            );
+
+            // Loading HOLD: every cycle count is finite and determined once.
+            // Each style owns a distinct active motion, but only the resolved
+            // style is authored into the timeline.
+            if (spinnerStyle === "ring") {
+              var spinCount = Math.max(1, Math.round(ACTIVE_DURATION / 0.58));
+              tl.fromTo(
+                ring,
+                { rotation: 0 },
+                {
+                  rotation: 360 * spinCount,
+                  duration: ACTIVE_DURATION,
+                  ease: "linear",
+                  immediateRender: false,
+                },
+                IMPACT_AT,
+              );
+            } else if (spinnerStyle === "arrow") {
+              var arrowSpinCount = Math.max(1, Math.round(ACTIVE_DURATION / 0.64));
+              tl.fromTo(
+                arrow,
+                { rotation: 0 },
+                {
+                  rotation: 360 * arrowSpinCount,
+                  duration: ACTIVE_DURATION,
+                  ease: "linear",
+                  immediateRender: false,
+                },
+                IMPACT_AT,
+              );
+            } else {
+              var PULSE_HALF = 0.22 * scale;
+              dots.forEach(function (dot, index) {
+                var dotStart = IMPACT_AT + index * 0.1 * scale;
+                var available = Math.max(PULSE_HALF, OUT_START - dotStart);
+                var pulseRepeat = Math.max(1, Math.floor(available / PULSE_HALF) - 1);
+                tl.fromTo(
+                  dot,
+                  { y: "0cqh", scale: 1 },
+                  {
+                    y: "-1.15cqh",
+                    scale: 1.28,
+                    duration: PULSE_HALF,
+                    ease: "sine.inOut",
+                    yoyo: true,
+                    repeat: pulseRepeat,
+                    immediateRender: false,
+                  },
+                  dotStart,
+                );
+              });
+            }
+
+            // OUT: opacity exits without overshoot. Content alone earns the
+            // rare tactile back.out snap and lands exactly at zero.
+            tl.fromTo(
+              indicator,
+              { opacity: 1 },
+              {
+                opacity: 0,
+                duration: Math.min(OUT, 0.2 * scale),
+                ease: "power2.in",
+                immediateRender: false,
+              },
+              OUT_START,
+            );
+            tl.fromTo(
+              content,
+              { y: heldOffset + "cqh" },
+              {
+                y: "0cqh",
+                duration: OUT,
+                ease: "back.out(1.7)",
+                immediateRender: false,
+              },
+              OUT_START,
+            );
+            tl.fromTo(
+              updated,
+              { opacity: 0 },
+              {
+                opacity: 1,
+                duration: Math.min(OUT, 0.28 * scale),
+                ease: "power2.out",
+                immediateRender: false,
+              },
+              OUT_START + OUT * 0.32,
+            );
+            tl.addLabel("settle", OUT_START + OUT);
+            tl.call(
+              function () {
+                fireSfx("refresh-settle", OUT_START + OUT);
+              },
+              [],
+              OUT_START + OUT,
+            );
+
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/push-in/demo.html b/docs/public/catalog/components/push-in/demo.html
new file mode 100644
index 0000000000..a6c07e4d41
--- /dev/null
+++ b/docs/public/catalog/components/push-in/demo.html
@@ -0,0 +1,100 @@
+<!doctype html>
+<!--
+  push-in demo. This standalone composition mounts push-in.html through
+  data-composition-src. Non-default text and bold intensity prove both
+  variables flow through the mount while the primitive remains host-sized.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Push In Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0b0c0e;
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --surface: #343b4d;
+        --border: #3f4658;
+        --font-display: Inter, system-ui, sans-serif;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0b0c0e;
+      }
+
+      .mount-card {
+        width: 76%;
+        height: 72%;
+        left: 12%;
+        top: 14%;
+        container-type: size;
+        overflow: hidden;
+        border: 1px solid rgba(148, 163, 184, 0.24);
+        border-radius: 32px;
+        background: var(--bg);
+        box-shadow: 0 48px 120px rgba(0, 0, 0, 0.52);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="push-in-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="push-in-mount"
+        class="mount-card clip"
+        data-composition-id="push-in"
+        data-composition-src="./push-in.html"
+        data-variable-values='{"text":"Look closer","intensity":"bold"}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="1459"
+        data-height="778"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["push-in-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "push-in.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/push-in/push-in.html b/docs/public/catalog/components/push-in/push-in.html
new file mode 100644
index 0000000000..371797f9b3
--- /dev/null
+++ b/docs/public/catalog/components/push-in/push-in.html
@@ -0,0 +1,178 @@
+<!doctype html>
+<!--
+  push-in: HyperFrames video primitive (camera / holdable / emphasize)
+
+  Concept: a centered headline stays composed while the full stage makes one
+  slow camera push. The intensity variable owns the final scale, and a soft
+  vignette keeps attention on the subject.
+
+  Variables:
+    - text (string, default "Focus"): the centered headline.
+    - intensity (subtle | standard | bold, default "standard"): maps to a
+      final stage scale of 1.08, 1.12, or 1.18.
+
+  Envelope: fixed 0.80s IN eases the camera into motion, elastic HOLD carries
+  a continuous linear creep, and fixed 0.65s OUT gently fades the completed
+  push. If the duration is shorter than IN plus OUT, both fixed phases
+  compress proportionally and HOLD becomes zero. Longer durations stretch
+  HOLD only, so the same total camera travel happens more slowly. The
+  timeline is never time-scaled.
+
+  Mount contract: the runtime clones only this template. #root fills the
+  host box, establishes the container query basis, has no data-width or
+  data-height, and registers one paused timeline under the hardcoded push-in
+  id.
+-->
+<html
+  lang="en"
+  data-composition-id="push-in"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "text", "type": "string", "role": "content", "label": "Headline", "description": "Text centered in the camera frame.", "default": "Focus" },
+    { "id": "intensity", "type": "enum", "role": "motion", "label": "Push intensity", "description": "Final camera scale reached by the push.", "default": "standard", "options": [{ "value": "subtle", "label": "Subtle" }, { "value": "standard", "label": "Standard" }, { "value": "bold", "label": "Bold" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Push In</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="push-in" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .pi-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+          }
+
+          .pi-camera {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+            background:
+              radial-gradient(
+                ellipse at 50% 48%,
+                color-mix(in srgb, var(--surface, #303747) 92%, white) 0%,
+                var(--surface, #303747) 27%,
+                var(--bg, #0b0c0e) 100%
+              ),
+              var(--bg, #0b0c0e);
+            transform-origin: 50% 50%;
+            will-change: transform, opacity;
+          }
+
+          .pi-camera::after {
+            content: "";
+            position: absolute;
+            inset: 0;
+            background: radial-gradient(
+              ellipse at 50% 48%,
+              transparent 24%,
+              color-mix(in srgb, var(--bg, #0b0c0e) 20%, transparent) 58%,
+              color-mix(in srgb, var(--bg, #0b0c0e) 88%, transparent) 100%
+            );
+          }
+
+          .pi-headline {
+            position: relative;
+            z-index: 1;
+            width: min(78cqw, 116cqh);
+            color: var(--fg, #f8fafc);
+            font-size: clamp(24px, 12cqw, 144px);
+            font-weight: 740;
+            line-height: 0.94;
+            letter-spacing: -0.055em;
+            text-align: center;
+            overflow-wrap: anywhere;
+            text-shadow: 0 1.5cqh 5cqh color-mix(in srgb, var(--bg, #0b0c0e) 62%, transparent);
+          }
+        </style>
+
+        <div
+          id="push-in-clip"
+          class="pi-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="pi-camera">
+            <div class="pi-headline"></div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var camera = root.querySelector(".pi-camera");
+            var headline = root.querySelector(".pi-headline");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var text = vars.text == null ? "Focus" : String(vars.text);
+            var intensity =
+              vars.intensity === "subtle" || vars.intensity === "bold"
+                ? vars.intensity
+                : "standard";
+            var scales = { subtle: 1.08, standard: 1.12, bold: 1.18 };
+            var finalScale = scales[intensity];
+
+            headline.textContent = text;
+
+            var IN_BASE = 0.8;
+            var OUT_BASE = 0.65;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var fixedDuration = IN_BASE + OUT_BASE;
+            var phaseScale = duration < fixedDuration ? duration / fixedDuration : 1;
+            var IN = IN_BASE * phaseScale;
+            var OUT = OUT_BASE * phaseScale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var OUT_START = IN + HOLD;
+            var inScale = HOLD > 0 ? 1 + (finalScale - 1) * 0.24 : finalScale;
+
+            var tl = gsap.timeline({ paused: true });
+
+            tl.fromTo(
+              camera,
+              { scale: 1, opacity: 1 },
+              { scale: inScale, opacity: 1, duration: IN, ease: "sine.inOut" },
+              0,
+            );
+            if (HOLD > 0) {
+              tl.to(camera, { scale: finalScale, duration: HOLD, ease: "none" }, IN);
+            }
+            tl.to(camera, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["push-in"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/radial-surround/README.md b/docs/public/catalog/components/radial-surround/README.md
new file mode 100644
index 0000000000..c81e89795a
--- /dev/null
+++ b/docs/public/catalog/components/radial-surround/README.md
@@ -0,0 +1,95 @@
+# radial-surround
+
+Labeled hairline chips assemble around a centered subject on an elliptical
+ring: positions baked once via cos/sin, staggered smooth-settle entries. With
+`close_in` (the default) the chips then converge inward toward the subject
+while a subtle edge vignette dims the stage. The center NEVER moves: the
+subject is surrounded, not zoomed. The classic problem-setup beat ("your team,
+buried under tools").
+
+## Files
+
+- `radial-surround.html`: the mountable sub-composition (install target:
+  `compositions/components/radial-surround.html`).
+- `registry-item.json`: registry metadata and the variables block.
+- `demo.html`: a 1920x1080 host that mounts the primitive with non-default
+  variables through `data-composition-src`.
+
+## Variables
+
+| id             | type    | default                                     | notes                                                                     |
+| -------------- | ------- | ------------------------------------------- | ------------------------------------------------------------------------- |
+| `center_label` | string  | `Your team`                                 | label on the default center token card                                    |
+| `chips`        | string  | `Docs,Tickets,Dashboards,Inbox,Chat,Sheets` | comma list of chip labels; up to 12 render                                |
+| `close_in`     | boolean | `true`                                      | converge the ring inward with the edge dim; `false` holds the wide ring   |
+| `cues`         | string  | `""`                                        | comma-separated per-chip entrance seconds; blank entries use the cascade  |
+| `accent`       | enum    | `green`                                     | `green` maps to `--brand`, `blue` to `--accent`, `violet` to `--accent-2` |
+| `exit`         | enum    | `none`                                      | `none` holds the final frame; `fade` and `up` release the stage           |
+
+Envelope: IN = center settle + chip cascade (+ close-in when enabled; the
+converge lands at 4.50s at defaults), HOLD is the sole elastic phase (dead
+still), OUT = up to 0.45s only when `exit` is `fade` or `up`. Sync points:
+`ring-assembled` at 2.95s, `surround-closed` at 4.50s (defaults). Cue values
+are clamped so every chip lands before the close-in (or the exit) begins.
+
+## The slot mechanism
+
+The primitive ships one named slot for the center subject inside its
+`<template>`:
+
+```html
+<div class="rs-center" data-slot="center">...</div>
+```
+
+The slot is empty by default: the script generates a token card carrying
+`center_label`, so an untouched mount still reads as a tasteful setup. To
+show your own subject, install the component and **place children inside the
+`[data-slot="center"]` element in your installed copy** (the runtime clones
+only the primitive's own template on mount, so slot content lives in the
+component file, not on the host clip). When the slot already has children the
+default card is skipped; chips, cues, `close_in`, and `exit` still apply.
+
+Rules:
+
+- Direct `img`/`video` children are capped at 34cqw x 30cqh with
+  `object-fit: cover` and the contract radius. Arbitrary HTML works too; size
+  it in `cqw`/`cqh` and keep it inside roughly 34cqw x 30cqh so the close-in
+  ring (20cqw x 23cqh radii) clears it.
+- The center only fades and settles on entrance; it never translates. Do not
+  animate the slot content yourself: the surrounding choreography assumes a
+  still subject.
+- Leave the chips and vignette alone; they render above the center layer.
+
+## Worked example
+
+Install, then point the center at a product shot:
+
+```bash
+npx hyperframes add radial-surround
+```
+
+In `compositions/components/radial-surround.html`, fill the slot:
+
+```html
+<div class="rs-center" data-slot="center">
+  <img src="../../assets/team-photo.png" alt="" />
+</div>
+```
+
+Mount it from a host composition like any sub-composition:
+
+```html
+<div
+  class="clip"
+  data-composition-id="radial-surround"
+  data-composition-src="./components/radial-surround.html"
+  data-variable-values='{"chips":"Slack,Email,CRM,Tickets,Docs","close_in":true,"accent":"blue"}'
+  data-start="2"
+  data-duration="5"
+  data-track-index="0"
+></div>
+```
+
+Chips pop in around the photo on alternating compass points, close in at
+~3.3s, and the crowded frame holds still for the rest of the clip window
+(`exit` defaults to `none`; frame roots own scene transitions).
diff --git a/docs/public/catalog/components/radial-surround/demo.html b/docs/public/catalog/components/radial-surround/demo.html
new file mode 100644
index 0000000000..002da02b71
--- /dev/null
+++ b/docs/public/catalog/components/radial-surround/demo.html
@@ -0,0 +1,108 @@
+<!doctype html>
+<!--
+  radial-surround demo. This standalone composition mounts the primitive
+  through data-composition-src. Non-default center label, chips, cues, and
+  accent prove the variable path; close_in stays at its default (true) so the
+  signature converge plus edge dim is what QA surfaces render.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Radial Surround Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #0b0c0e);
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --surface: #14171c;
+        --border: #343a46;
+        --brand: #71f5a7;
+        --accent: #61a8ff;
+        --accent-2: #c5a3ff;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(
+          ellipse at 50% 44%,
+          var(--bg, #171a20) 0%,
+          var(--bg, #0b0c0e) 72%
+        );
+      }
+
+      .mount-card {
+        width: 88%;
+        height: 86%;
+        left: 6%;
+        top: 7%;
+        container-type: size;
+        overflow: hidden;
+        border: 1px solid color-mix(in srgb, var(--border, #94a3b8) 20%, transparent);
+        border-radius: 30px;
+        background: color-mix(in srgb, var(--surface, #101318) 60%, transparent);
+        box-shadow: 0 40px 100px color-mix(in srgb, var(--bg, #000000) 48%, transparent);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="radial-surround-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+      data-fps="30"
+    >
+      <div
+        id="radial-surround-mount"
+        class="mount-card clip"
+        data-composition-id="radial-surround"
+        data-composition-src="./radial-surround.html"
+        data-variable-values='{"center_label":"One workspace","chips":"Slack,Email,CRM,Tickets,Docs,Sheets","cues":"0.8,1.05,1.3,1.55,1.8,2.05","accent":"blue"}'
+        data-start="0"
+        data-duration="5"
+        data-track-index="0"
+        data-width="1690"
+        data-height="929"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["radial-surround-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "radial-surround.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/radial-surround/radial-surround.html b/docs/public/catalog/components/radial-surround/radial-surround.html
new file mode 100644
index 0000000000..680aec0078
--- /dev/null
+++ b/docs/public/catalog/components/radial-surround/radial-surround.html
@@ -0,0 +1,432 @@
+<!doctype html>
+<!--
+  radial-surround: HyperFrames video primitive (problem setup)
+
+  Labeled hairline chips assemble around a centered subject on an elliptical
+  ring. Positions are baked exactly once via cos/sin before the timeline is
+  registered, so every seek lands on the same geometry. Chips enter with
+  staggered smooth settles (scale + fade, power3.out, no overshoot). With
+  close_in enabled the chips then converge inward toward the subject while a
+  subtle edge vignette dims the stage: the center NEVER moves. The subject is
+  surrounded, not zoomed.
+
+  Variables (declared in data-composition-variables below):
+    - center_label (string, default "Your team"): label on the default token
+      card. Ignored for layout when the center slot carries custom children.
+    - chips (string, default "Docs,Tickets,Dashboards,Inbox,Chat,Sheets"):
+      comma list of chip labels; up to 12 render, extras are dropped.
+    - close_in (boolean, default true): converge the ring inward with the
+      edge dim after assembly. false holds the wide ring instead.
+    - cues (string, default ""): comma-separated per-chip entrance times in
+      seconds relative to mount start. Blank or invalid entries fall back to
+      that chip's default cascade slot (~0.30s gap). Values are clamped so
+      every chip lands before the close-in (or the exit) begins.
+    - accent (green | blue | violet, default green): center card tint.
+      green routes to --brand, blue to --accent, violet to --accent-2.
+    - exit (none | fade | up, default none): frame roots own transitions;
+      the default crowded hold ends the film.
+
+  Envelope, fixed IN with elastic HOLD (never gsap.timeScale()):
+    IN    = center settle + chip cascade (+ close-in and vignette when
+            close_in is true); at defaults the converge lands at 4.50s.
+    HOLD  = dead still, elastic: everything after IN until OUT (or D).
+    OUT   = 0 when exit is "none"; else up to 0.45s fade / fade-up.
+    Entrance starts compress together when D is too short for the cascade;
+    the close-in window is reserved first so the converge always completes.
+
+  Slot: the runtime clones only this template. A fork that wants a custom
+  subject places its own children inside the [data-slot="center"] element;
+  when that element already has children the default token card is not
+  generated (chips, cues, close_in, and exit still apply, and the center
+  still never moves).
+
+  Mount contract: elastic root, no data-width/data-height, styled via #root
+  only, container-type: size, one paused timeline registered under the
+  literal "radial-surround" key. Deterministic and seek-safe: fromTo
+  entrances, no CSS transitions, no Date.now, no randomness.
+-->
+<html
+  lang="en"
+  data-composition-id="radial-surround"
+  data-composition-duration="5"
+  data-composition-variables='[
+    { "id": "center_label", "type": "string", "role": "content", "label": "Center label", "description": "Label on the default center token card.", "default": "Your team" },
+    { "id": "chips", "type": "string", "role": "content", "label": "Chips", "description": "Comma-separated chip labels that surround the center (up to 12).", "default": "Docs,Tickets,Dashboards,Inbox,Chat,Sheets" },
+    { "id": "close_in", "type": "boolean", "role": "timing", "label": "Close in", "description": "Converge the ring inward with a subtle edge dim after assembly. The center never moves.", "default": true },
+    { "id": "cues", "type": "string", "role": "timing", "label": "Cues", "description": "Comma-separated per-chip entrance times in seconds. Blank entries use the default cascade.", "default": "" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Accent token family used by the center card tint.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "How the surrounded stage leaves the frame. Default none: the crowded hold ends the film.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Radial Surround</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="radial-surround" data-duration="5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            background: var(--bg, transparent);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            pointer-events: none;
+          }
+
+          .rs-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+          }
+
+          .rs-stage {
+            position: absolute;
+            inset: 0;
+            will-change: transform, opacity;
+          }
+
+          .rs-center-layer {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+          }
+
+          .rs-center {
+            display: grid;
+            place-items: center;
+            will-change: transform, opacity;
+          }
+
+          .rs-center > img,
+          .rs-center > video {
+            max-width: 34cqw;
+            max-height: 30cqh;
+            object-fit: cover;
+            border-radius: var(--radius, 2.2cqmin);
+          }
+
+          .rs-card {
+            width: 28cqw;
+            min-height: 22cqh;
+            padding: var(--space-2, 2.2cqmin);
+            border: 0.16cqmin solid color-mix(in srgb, var(--rs-accent) 46%, var(--border, #475569));
+            border-radius: var(--radius, 2.2cqmin);
+            background: color-mix(in srgb, var(--surface, #131a24) 94%, var(--rs-accent));
+            box-shadow: 0 3cqh 9cqh color-mix(in srgb, var(--bg, #000000) 40%, transparent);
+          }
+
+          .rs-card-label {
+            overflow: hidden;
+            color: var(--fg, #f8fafc);
+            font-family: var(
+              --font-display,
+              var(--font-body, ui-sans-serif, system-ui, sans-serif)
+            );
+            font-size: var(--rs-center-font, 4cqmin);
+            font-weight: 600;
+            line-height: 1.15;
+            letter-spacing: 0.04em;
+            text-align: center;
+            white-space: nowrap;
+          }
+
+          .rs-ring {
+            position: absolute;
+            inset: 0;
+          }
+
+          /* Positioning wrapper: the baked ring offsets live in the --rs-ox
+             and --rs-oy custom properties (plain cq values) and the close-in
+             tweens THOSE, never x/y or a GSAP-written calc() string. GSAP
+             misconverts vertical cq units to px mid-tween when it has to
+             re-init a layout property under a seek, so the calc stays in the
+             stylesheet and only the var strings interpolate; the inner
+             chip's unitless scale and opacity are the only transforms. */
+          .rs-pos {
+            position: absolute;
+            top: calc(50% + var(--rs-oy, 0cqh));
+            left: calc(50% + var(--rs-ox, 0cqw));
+            width: max-content;
+            transform: translate(-50%, -50%);
+            will-change: top, left;
+          }
+
+          .rs-chip {
+            padding: 1.15cqmin 2.1cqmin;
+            border: 0.14cqmin solid var(--border, #475569);
+            border-radius: 0.6cqmin;
+            background: var(--surface, #131a24);
+            color: var(--fg, #f8fafc);
+            font-size: 2.1cqmin;
+            font-weight: 500;
+            line-height: 1;
+            letter-spacing: 0.16em;
+            text-transform: uppercase;
+            white-space: nowrap;
+            transform-origin: 50% 50%;
+            will-change: transform, opacity;
+          }
+
+          /* Close-in edge dim: very subtle, content stays legible. */
+          .rs-vignette {
+            position: absolute;
+            inset: 0;
+            background: radial-gradient(
+              ellipse at center,
+              transparent 60%,
+              color-mix(in srgb, var(--bg, #05070c) 34%, transparent) 100%
+            );
+            opacity: 0;
+            pointer-events: none;
+          }
+        </style>
+
+        <div
+          id="radial-surround-clip"
+          class="rs-clip clip"
+          data-start="0"
+          data-duration="5"
+          data-track-index="0"
+        >
+          <div class="rs-stage" role="img">
+            <div class="rs-center-layer">
+              <div class="rs-center" data-slot="center"></div>
+            </div>
+            <div class="rs-ring" aria-hidden="true"></div>
+            <div class="rs-vignette"></div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            // Literal id, never read off the DOM: the flattening step strips
+            // data-composition-id from the mounted root (see toggle-flip).
+            var compositionId = "radial-surround";
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".rs-stage");
+            var center = root.querySelector('[data-slot="center"]');
+            var ring = root.querySelector(".rs-ring");
+            var vignette = root.querySelector(".rs-vignette");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var centerLabel =
+              vars.center_label == null || String(vars.center_label).trim() === ""
+                ? "Your team"
+                : String(vars.center_label).trim();
+            var chipsValue =
+              vars.chips == null || String(vars.chips).trim() === ""
+                ? "Docs,Tickets,Dashboards,Inbox,Chat,Sheets"
+                : String(vars.chips);
+            var labels = chipsValue
+              .split(",")
+              .map(function (token) {
+                return token.trim();
+              })
+              .filter(function (token) {
+                return token !== "";
+              })
+              .slice(0, 12);
+            if (labels.length === 0)
+              labels = ["Docs", "Tickets", "Dashboards", "Inbox", "Chat", "Sheets"];
+
+            var closeIn = !(vars.close_in === false || vars.close_in === "false");
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            root.style.setProperty("--rs-accent", accentColors[accent]);
+
+            // Slot: a fork may author its own subject inside
+            // [data-slot="center"]; then the default token card is skipped.
+            if (center.children.length === 0) {
+              center.classList.add("rs-card");
+              var label = document.createElement("span");
+              label.className = "rs-card-label";
+              label.textContent = centerLabel;
+              center.appendChild(label);
+            }
+            stage.setAttribute("aria-label", centerLabel + ": " + labels.join(", "));
+
+            // Deterministic center-label fitting inside the 28cqw card.
+            var chars = Array.from(centerLabel).length;
+            var fontCqw = Math.min(3.4, 23 / (Math.max(1, chars) * 0.62));
+            root.style.setProperty("--rs-center-font", "min(" + fontCqw.toFixed(3) + "cqw, 6cqh)");
+
+            /* Elliptical ring, baked once (deterministic). FAR is the wide
+               assembly ring; NEAR is the close-in ring, pressing corner chips
+               up against the 28cqw center card so the crowding reads (chips
+               paint above the card). Angles alternate sides from the top so
+               consecutive entries pop on opposite compass points. */
+            var FAR_RX = 30; /* cqw */
+            var FAR_RY = 31; /* cqh */
+            var NEAR_RX = 20;
+            var NEAR_RY = 23;
+            var count = labels.length;
+            var step = 360 / count;
+            function ringPosition(index, rx, ry) {
+              var degrees = -90 + Math.ceil(index / 2) * step * (index % 2 === 1 ? 1 : -1);
+              var a = (degrees * Math.PI) / 180;
+              return {
+                ox: (Math.cos(a) * rx).toFixed(3) + "cqw",
+                oy: (Math.sin(a) * ry).toFixed(3) + "cqh",
+              };
+            }
+            var positions = [];
+            var chips = labels.map(function (text, index) {
+              var pos = document.createElement("div");
+              pos.className = "rs-pos";
+              var far = ringPosition(index, FAR_RX, FAR_RY);
+              pos.style.setProperty("--rs-ox", far.ox);
+              pos.style.setProperty("--rs-oy", far.oy);
+              var chip = document.createElement("div");
+              chip.className = "rs-chip";
+              chip.textContent = text;
+              pos.appendChild(chip);
+              ring.appendChild(pos);
+              positions.push(pos);
+              return chip;
+            });
+
+            // RETIME RANGE: fixed IN cascade (+ close-in), elastic still HOLD,
+            // optional OUT. The close-in window is reserved off the top so the
+            // converge always completes inside the clip.
+            var CENTER_AT = 0.05;
+            var BASE_START = 0.9;
+            var GAP = 0.3;
+            var ENTRY = 0.55;
+            var CLOSE_DUR = 0.75;
+            var CLOSE_STAG = 0.09;
+            var BREATH = 0.35;
+            var OUT_BASE = 0.45;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "5"));
+            var OUT = exit === "none" ? 0 : Math.min(OUT_BASE, duration * 0.2);
+            var avail = duration - OUT;
+            var closeSpan = closeIn ? (count - 1) * CLOSE_STAG + CLOSE_DUR : 0;
+            var latestStart = Math.max(0, avail - ENTRY - closeSpan);
+            // Compress the cascade together when the duration cannot fit it.
+            var gap =
+              count > 1 ? Math.min(GAP, Math.max(0, latestStart - BASE_START) / (count - 1)) : GAP;
+
+            var cueList = String(vars.cues == null ? "" : vars.cues).split(",");
+            var starts = chips.map(function (chip, index) {
+              var cue = Number((cueList[index] || "").trim());
+              var hasCue = (cueList[index] || "").trim() !== "" && Number.isFinite(cue);
+              var start = hasCue ? cue : Math.min(BASE_START, latestStart) + gap * index;
+              return Math.max(0, Math.min(start, latestStart));
+            });
+
+            var tl = gsap.timeline({ paused: true });
+
+            // Center seats first: gentle fade + subtle scale settle. After
+            // this the center NEVER moves again (surrounded, not zoomed).
+            gsap.set(center, { opacity: 0, scale: 0.94 });
+            tl.fromTo(
+              center,
+              { opacity: 0, scale: 0.94 },
+              {
+                opacity: 1,
+                scale: 1,
+                duration: Math.min(0.7, Math.max(0.2, avail * 0.25)),
+                ease: "power3.out",
+              },
+              Math.min(CENTER_AT, latestStart),
+            );
+
+            // IN: chips assemble on the FAR ring in a measured stagger.
+            // Explicit both-endpoints state so any seek is exact.
+            chips.forEach(function (chip, index) {
+              gsap.set(chip, { scale: 0, opacity: 0 });
+              tl.fromTo(
+                chip,
+                { scale: 0, opacity: 0 },
+                { scale: 1, opacity: 1, duration: ENTRY, ease: "power3.out" },
+                starts[index],
+              );
+            });
+
+            // Close-in: chips converge from all compass points toward the
+            // subject while the edges dim slightly. The center holds still.
+            if (closeIn) {
+              var maxEntryEnd =
+                starts.reduce(function (max, start) {
+                  return Math.max(max, start);
+                }, 0) + ENTRY;
+              var closeStart = Math.max(
+                maxEntryEnd,
+                Math.min(maxEntryEnd + BREATH, avail - closeSpan),
+              );
+              positions.forEach(function (pos, index) {
+                var far = ringPosition(index, FAR_RX, FAR_RY);
+                var near = ringPosition(index, NEAR_RX, NEAR_RY);
+                tl.fromTo(
+                  pos,
+                  { "--rs-ox": far.ox, "--rs-oy": far.oy },
+                  {
+                    "--rs-ox": near.ox,
+                    "--rs-oy": near.oy,
+                    duration: CLOSE_DUR,
+                    ease: "power2.inOut",
+                  },
+                  closeStart + index * CLOSE_STAG,
+                );
+              });
+              gsap.set(vignette, { opacity: 0 });
+              tl.fromTo(
+                vignette,
+                { opacity: 0 },
+                {
+                  opacity: 1,
+                  duration: Math.min(0.9, Math.max(0.2, closeSpan)),
+                  ease: "power1.inOut",
+                },
+                closeStart + 0.05,
+              );
+            }
+
+            // HOLD: intentionally still. Crowded, quiet, nothing floats.
+
+            // OUT: the whole surrounded stage leaves together.
+            if (exit !== "none") {
+              var OUT_START = duration - OUT;
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+              if (exit === "up") {
+                // yPercent, not a cq-unit y: percent transforms seek exactly.
+                tl.to(stage, { yPercent: -4, duration: OUT, ease: "power2.in" }, OUT_START);
+              }
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/rgb-glitch-text/__hf-variables-preview.html b/docs/public/catalog/components/rgb-glitch-text/__hf-variables-preview.html
new file mode 100644
index 0000000000..0be415bd41
--- /dev/null
+++ b/docs/public/catalog/components/rgb-glitch-text/__hf-variables-preview.html
@@ -0,0 +1,77 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>RGB Glitch Text variables preview</title>
+    <style>
+      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #09090b; }
+      #hf-vars-root { position: relative; width: 1920px; height: 1080px; }
+      #hf-vars-mount { position: absolute; inset: 0; display: grid; place-items: center; }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  </head>
+  <body>
+    <div id="hf-vars-root" data-composition-id="rgb-glitch-text-variables-preview" data-start="0" data-width="1920" data-height="1080" data-duration="5" data-fps="30">
+      <div id="hf-vars-mount" class="clip" data-composition-id="rgb-glitch-text" data-composition-src="./rgb-glitch-text.html" data-start="0" data-duration="5" data-track-index="0" data-width="1920" data-height="1080"></div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["rgb-glitch-text-variables-preview"] = gsap.timeline({ paused: true });
+    </script>
+    <script>
+      (function () {
+        var mount = document.getElementById("hf-vars-mount");
+        // The mount is filled asynchronously, and the demo script selects
+        // what it fills it with, so it cannot run before then.
+        var observer = new MutationObserver(build);
+        observer.observe(mount, { childList: true, subtree: true });
+        build();
+        function build() {
+          if (!mount.firstElementChild) return;
+          observer.disconnect();
+
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.to(".hf-remocn-rgb-glitch-text", { opacity: 1, duration: 0.01 }, startTime);
+        tl.to(
+          ".hf-remocn-rgb-glitch-text",
+          {
+            "--hf-glitch-red": "-20px",
+            "--hf-glitch-blue": "20px",
+            duration: 0.06,
+            repeat: 5,
+            yoyo: true,
+            ease: "steps(1)",
+          },
+          startTime + 0.1,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["rgb-glitch-text-demo"] = tl;
+          var child = window.__timelines["rgb-glitch-text-demo"];
+          delete window.__timelines["rgb-glitch-text-demo"];
+          if (!child || typeof child.paused !== "function") return;
+          child.paused(false);
+          window.__timelines["rgb-glitch-text-variables-preview"].add(child, 0);
+        }
+      })();
+    </script>
+<script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "rgb-glitch-text.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/rgb-glitch-text/demo.html b/docs/public/catalog/components/rgb-glitch-text/demo.html
new file mode 100644
index 0000000000..2f6158e675
--- /dev/null
+++ b/docs/public/catalog/components/rgb-glitch-text/demo.html
@@ -0,0 +1,128 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>RGB Glitch Text - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #09090b;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        gap: 32px;
+        padding: 64px;
+        zoom: 0.28;
+      }
+      /* ponytail: scale-up via font-size — GSAP only touches CSS vars, not transform */
+      .hf-remocn-rgb-glitch-text {
+        color: #fafafa;
+        font-family: Inter, system-ui, sans-serif;
+        font-weight: 900;
+        letter-spacing: -0.04em;
+      }
+      .hf-remocn-rgb-glitch-text {
+        position: relative;
+        width: 1120px;
+        height: 200px;
+        font-size: 192px;
+        line-height: 1;
+      }
+      .hf-remocn-rgb-glitch-text span,
+      .hf-remocn-rgb-glitch-text strong {
+        position: absolute;
+        inset: 0;
+      }
+      .hf-remocn-rgb-glitch-text span:first-child {
+        color: #ef4444;
+        mix-blend-mode: screen;
+        transform: translateX(var(--hf-glitch-red, 0px));
+      }
+      .hf-remocn-rgb-glitch-text span:nth-child(2) {
+        color: #22d3ee;
+        mix-blend-mode: screen;
+        transform: translateX(var(--hf-glitch-blue, 0px));
+      }
+      .hf-remocn-rgb-glitch-text strong {
+        color: #fafafa;
+      }
+      .demo-label {
+        font-size: 24px;
+        font-weight: 500;
+        color: #52525b;
+        letter-spacing: 0.12em;
+        text-transform: uppercase;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="rgb-glitch-text-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-rgb-glitch-text">
+          <span>GLITCH</span><span>GLITCH</span><strong>GLITCH</strong>
+        </div>
+        <div class="demo-label">RGB Glitch Text</div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.to(".hf-remocn-rgb-glitch-text", { opacity: 1, duration: 0.01 }, startTime);
+        tl.to(
+          ".hf-remocn-rgb-glitch-text",
+          {
+            "--hf-glitch-red": "-20px",
+            "--hf-glitch-blue": "20px",
+            duration: 0.06,
+            repeat: 5,
+            yoyo: true,
+            ease: "steps(1)",
+          },
+          startTime + 0.1,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["rgb-glitch-text-demo"] = tl;
+      </script>
+    </div>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "rgb-glitch-text.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/rgb-glitch-text/rgb-glitch-text.html b/docs/public/catalog/components/rgb-glitch-text/rgb-glitch-text.html
new file mode 100644
index 0000000000..a1fd3da4ea
--- /dev/null
+++ b/docs/public/catalog/components/rgb-glitch-text/rgb-glitch-text.html
@@ -0,0 +1,110 @@
+<!--
+  RGB Glitch Text - remocn typography primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Drive the timeline
+  integration from a paused GSAP timeline so renders remain deterministic.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result as a custom property
+  the CSS above consumes. The timeline recipe below is untouched by them: it
+  keeps driving one red offset and one cyan offset, and intensity decides how
+  far those offsets actually carry.
+
+    - text (any short word, default "GLITCH"): the word set on all three
+      stacked copies at once, so they stay in register.
+    - intensity (subtle | standard | extreme, default standard): scales the
+      driven offsets, from a hairline fringe to a hard tear. Both offsets are
+      zero at rest, so this one only shows once the timeline runs.
+    - tone (ink | paper | accent, default ink): colour of the solid copy the
+      red and cyan ghosts split away from. ink is near-black for light frames,
+      paper near-white for dark ones, accent rides --brand.
+
+  On every default the result is identical to the original: near-black GLITCH
+  with red and cyan copies tearing 8px either way.
+-->
+
+<div
+  class="hf-remocn-rgb-glitch-text"
+  data-composition-variables='[
+    { "id": "text", "type": "string", "role": "content", "label": "Text", "description": "The word shown on all three stacked copies.", "default": "GLITCH", "maxLength": 24 },
+    { "id": "intensity", "type": "enum", "role": "motion", "label": "Intensity", "description": "Scales the red and cyan offsets the timeline drives, so the split reads as a hairline or a hard tear.", "default": "standard", "options": [{ "value": "subtle", "label": "Subtle" }, { "value": "standard", "label": "Standard" }, { "value": "extreme", "label": "Extreme" }] },
+    { "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Colour of the solid copy the two ghosts split away from: ink for light frames, paper for dark ones, accent rides --brand.", "default": "ink", "options": [{ "value": "ink", "label": "Ink" }, { "value": "paper", "label": "Paper" }, { "value": "accent", "label": "Accent" }] }
+  ]'
+>
+  <span>GLITCH</span><span>GLITCH</span><strong>GLITCH</strong>
+</div>
+
+<style>
+  .hf-remocn-rgb-glitch-text {
+    color: var(--hf-glitch-ink, #18181b);
+    font-family: Inter, system-ui, sans-serif;
+    font-weight: 900;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-rgb-glitch-text {
+    position: relative;
+    width: 420px;
+    height: 82px;
+    font-size: 72px;
+    line-height: 1;
+  }
+  .hf-remocn-rgb-glitch-text span,
+  .hf-remocn-rgb-glitch-text strong {
+    position: absolute;
+    inset: 0;
+  }
+  .hf-remocn-rgb-glitch-text span:first-child {
+    color: #ef4444;
+    transform: translateX(calc(var(--hf-glitch-red, 0px) * var(--hf-glitch-reach, 1)));
+  }
+  .hf-remocn-rgb-glitch-text span:nth-child(2) {
+    color: #22d3ee;
+    transform: translateX(calc(var(--hf-glitch-blue, 0px) * var(--hf-glitch-reach, 1)));
+  }
+  .hf-remocn-rgb-glitch-text strong {
+    color: var(--hf-glitch-ink, #18181b);
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    var reaches = { subtle: 0.5, standard: 1, extreme: 2.25 };
+    var tones = {
+      ink: "#18181b",
+      paper: "#fafafa",
+      accent: "var(--brand, #34d399)",
+    };
+
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var reach = reaches[pick(reaches, vars.intensity, "standard")];
+    var tone = tones[pick(tones, vars.tone, "ink")];
+    var text =
+      typeof vars.text === "string" && vars.text.trim() !== "" ? vars.text.trim() : "GLITCH";
+
+    var roots = document.querySelectorAll(".hf-remocn-rgb-glitch-text");
+    for (var i = 0; i < roots.length; i += 1) {
+      roots[i].style.setProperty("--hf-glitch-reach", String(reach));
+      roots[i].style.setProperty("--hf-glitch-ink", tone);
+      var copies = roots[i].querySelectorAll("span, strong");
+      for (var j = 0; j < copies.length; j += 1) {
+        copies[j].textContent = text;
+      }
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.to('.hf-remocn-rgb-glitch-text', { opacity: 1, duration: 0.01 }, startTime); tl.to('.hf-remocn-rgb-glitch-text', { '--hf-glitch-red': '-8px', '--hf-glitch-blue': '8px', duration: 0.06, repeat: 5, yoyo: true, ease: 'steps(1)' }, startTime + 0.1);
+-->
diff --git a/docs/public/catalog/components/rolling-number/__hf-variables-preview.html b/docs/public/catalog/components/rolling-number/__hf-variables-preview.html
new file mode 100644
index 0000000000..a514ffcf15
--- /dev/null
+++ b/docs/public/catalog/components/rolling-number/__hf-variables-preview.html
@@ -0,0 +1,77 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Rolling Number variables preview</title>
+    <style>
+      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #f7f7f8; }
+      #hf-vars-root { position: relative; width: 1920px; height: 1080px; }
+      #hf-vars-mount { position: absolute; inset: 0; display: grid; place-items: center; }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  </head>
+  <body>
+    <div id="hf-vars-root" data-composition-id="rolling-number-variables-preview" data-start="0" data-width="1920" data-height="1080" data-duration="5" data-fps="30">
+      <div id="hf-vars-mount" class="clip" data-composition-id="rolling-number" data-composition-src="./rolling-number.html" data-start="0" data-duration="5" data-track-index="0" data-width="1920" data-height="1080"></div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["rolling-number-variables-preview"] = gsap.timeline({ paused: true });
+    </script>
+    <script>
+      (function () {
+        var mount = document.getElementById("hf-vars-mount");
+        // The mount is filled asynchronously, and the demo script selects
+        // what it fills it with, so it cannot run before then.
+        var observer = new MutationObserver(build);
+        observer.observe(mount, { childList: true, subtree: true });
+        build();
+        function build() {
+          if (!mount.firstElementChild) return;
+          observer.disconnect();
+
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-rolling-number span",
+          { opacity: 0, "--hf-number-y": "26px", "--hf-number-blur": "8px" },
+          {
+            opacity: 1,
+            "--hf-number-y": "0px",
+            "--hf-number-blur": "0px",
+            duration: 0.3,
+            stagger: 0.045,
+            ease: "back.out(1.6)",
+          },
+          startTime,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["rolling-number-demo"] = tl;
+          var child = window.__timelines["rolling-number-demo"];
+          delete window.__timelines["rolling-number-demo"];
+          if (!child || typeof child.paused !== "function") return;
+          child.paused(false);
+          window.__timelines["rolling-number-variables-preview"].add(child, 0);
+        }
+      })();
+    </script>
+<script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "rolling-number.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/rolling-number/demo.html b/docs/public/catalog/components/rolling-number/demo.html
new file mode 100644
index 0000000000..7db9972572
--- /dev/null
+++ b/docs/public/catalog/components/rolling-number/demo.html
@@ -0,0 +1,141 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Rolling Number - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      /* ponytail: scale via transform on .demo-frame (not a GSAP target) */
+      .demo-frame {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 12px;
+        transform: scale(2.6);
+        transform-origin: center center;
+      }
+      .demo-card {
+        background: #ffffff;
+        border: 1px solid #e4e4e7;
+        border-radius: 14px;
+        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.08);
+        padding: 32px 48px 28px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 6px;
+        min-width: 240px;
+      }
+      .demo-label {
+        font-family: Inter, system-ui, sans-serif;
+        font-size: 11px;
+        font-weight: 500;
+        letter-spacing: 0.06em;
+        text-transform: uppercase;
+        color: #71717a;
+      }
+      .demo-sublabel {
+        font-family: Inter, system-ui, sans-serif;
+        font-size: 10px;
+        font-weight: 400;
+        color: #a1a1aa;
+        margin-top: 2px;
+      }
+      .hf-remocn-rolling-number {
+        color: #18181b;
+        font-family: Inter, system-ui, sans-serif;
+        font-weight: 900;
+        letter-spacing: -0.04em;
+      }
+      .hf-remocn-rolling-number {
+        display: inline-flex;
+        gap: 2px;
+        font:
+          900 74px/1 ui-monospace,
+          SFMono-Regular,
+          Menlo,
+          monospace;
+      }
+      .hf-remocn-rolling-number span {
+        display: inline-block;
+        transform: translateY(var(--hf-number-y, 0px));
+        filter: blur(var(--hf-number-blur, 0px));
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="rolling-number-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="demo-card">
+          <span class="demo-label">Total Users</span>
+          <div class="hf-remocn-rolling-number">
+            <span>3</span><span>0</span><span>,</span><span>6</span><span>5</span><span>8</span>
+          </div>
+          <span class="demo-sublabel">↑ 12% this month</span>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-rolling-number span",
+          { opacity: 0, "--hf-number-y": "26px", "--hf-number-blur": "8px" },
+          {
+            opacity: 1,
+            "--hf-number-y": "0px",
+            "--hf-number-blur": "0px",
+            duration: 0.3,
+            stagger: 0.045,
+            ease: "back.out(1.6)",
+          },
+          startTime,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["rolling-number-demo"] = tl;
+      </script>
+    </div>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "rolling-number.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/rolling-number/rolling-number.html b/docs/public/catalog/components/rolling-number/rolling-number.html
new file mode 100644
index 0000000000..eef6dd0981
--- /dev/null
+++ b/docs/public/catalog/components/rolling-number/rolling-number.html
@@ -0,0 +1,112 @@
+<!--
+  Rolling Number - remocn typography primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Drive the timeline
+  integration from a paused GSAP timeline so renders remain deterministic.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, then rebuilds one place per character and
+  writes the rest as custom properties the CSS above consumes. The timeline
+  recipe below is untouched by them: it keeps driving one drop and one blur,
+  and these decide what that drop and that blur mean on screen.
+
+    - value (any short number, default "30,658"): the number shown. The script
+      rebuilds one rolling place per character, separators included, so the
+      stagger keeps reading left to right.
+    - travel (close | standard | far, default standard): scales the drop, so
+      each place covers half the run or nearly double it in the same time.
+      Nothing moves at rest, so this one only shows once the timeline runs.
+    - blur (soft | standard | heavy, default standard): scales the blur radius,
+      from a light haze to a full smear.
+    - tone (ink | paper | accent, default ink): digit colour. ink is near-black
+      for light frames, paper near-white for dark ones, accent rides --brand.
+
+  On every default the result is identical to the original: 30,658 dropping
+  26px through an 8px blur in near-black.
+-->
+
+<div
+  class="hf-remocn-rolling-number"
+  data-composition-variables='[
+    { "id": "value", "type": "string", "role": "content", "label": "Value", "description": "The number to show. One place rolls in per character, so separators count too.", "default": "30,658", "maxLength": 24 },
+    { "id": "travel", "type": "enum", "role": "motion", "label": "Travel", "description": "Scales the drop the timeline drives, so each place covers a shorter or longer run in the same time.", "default": "standard", "options": [{ "value": "close", "label": "Close" }, { "value": "standard", "label": "Standard" }, { "value": "far", "label": "Far" }] },
+    { "id": "blur", "type": "enum", "role": "style", "label": "Blur", "description": "Scales the blur radius the timeline drives, from a light haze to a full smear.", "default": "standard", "options": [{ "value": "soft", "label": "Soft" }, { "value": "standard", "label": "Standard" }, { "value": "heavy", "label": "Heavy" }] },
+    { "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Digit colour: ink for light frames, paper for dark ones, accent rides --brand.", "default": "ink", "options": [{ "value": "ink", "label": "Ink" }, { "value": "paper", "label": "Paper" }, { "value": "accent", "label": "Accent" }] }
+  ]'
+>
+  <span>3</span><span>0</span><span>,</span><span>6</span><span>5</span><span>8</span>
+</div>
+
+<style>
+  .hf-remocn-rolling-number {
+    color: var(--hf-number-color, #18181b);
+    font-family: Inter, system-ui, sans-serif;
+    font-weight: 900;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-rolling-number {
+    display: inline-flex;
+    gap: 2px;
+    font:
+      900 74px/1 ui-monospace,
+      SFMono-Regular,
+      Menlo,
+      monospace;
+  }
+  .hf-remocn-rolling-number span {
+    display: inline-block;
+    transform: translateY(calc(var(--hf-number-y, 0px) * var(--hf-number-reach, 1)));
+    filter: blur(calc(var(--hf-number-blur, 0px) * var(--hf-number-blur-scale, 1)));
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    var reaches = { close: 0.5, standard: 1, far: 1.85 };
+    var blurScales = { soft: 0.45, standard: 1, heavy: 2.2 };
+    var tones = {
+      ink: "#18181b",
+      paper: "#fafafa",
+      accent: "var(--brand, #34d399)",
+    };
+
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var reach = reaches[pick(reaches, vars.travel, "standard")];
+    var blurScale = blurScales[pick(blurScales, vars.blur, "standard")];
+    var tone = tones[pick(tones, vars.tone, "ink")];
+    var value =
+      typeof vars.value === "string" && vars.value.trim() !== "" ? vars.value.trim() : "30,658";
+
+    var roots = document.querySelectorAll(".hf-remocn-rolling-number");
+    for (var i = 0; i < roots.length; i += 1) {
+      var root = roots[i];
+      root.style.setProperty("--hf-number-reach", String(reach));
+      root.style.setProperty("--hf-number-blur-scale", String(blurScale));
+      root.style.setProperty("--hf-number-color", tone);
+      if (root.getAttribute("data-hf-rolling-number-ready") === "1") continue;
+      root.textContent = "";
+      for (var c = 0; c < value.length; c += 1) {
+        var place = document.createElement("span");
+        place.textContent = value.charAt(c);
+        root.appendChild(place);
+      }
+      root.setAttribute("data-hf-rolling-number-ready", "1");
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-rolling-number span', { opacity: 0, '--hf-number-y': '26px', '--hf-number-blur': '8px' }, { opacity: 1, '--hf-number-y': '0px', '--hf-number-blur': '0px', duration: 0.3, stagger: 0.045, ease: 'back.out(1.6)' }, startTime);
+-->
diff --git a/docs/public/catalog/components/rubber-band-bumper/demo.html b/docs/public/catalog/components/rubber-band-bumper/demo.html
new file mode 100644
index 0000000000..63c5b8920f
--- /dev/null
+++ b/docs/public/catalog/components/rubber-band-bumper/demo.html
@@ -0,0 +1,100 @@
+<!doctype html>
+<!--
+  rubber-band-bumper demo. This standalone composition mounts the primitive
+  through data-composition-src. Left and violet are non-default values that
+  prove both variables flow through the elastic host box.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Rubber Band Bumper Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0b0c0e;
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-body: Inter, system-ui, sans-serif;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(circle at 50% 45%, #1b2130 0%, #0b0c0e 66%);
+      }
+
+      .mount-card {
+        width: 76%;
+        height: 74%;
+        left: 12%;
+        top: 13%;
+        container-type: size;
+        overflow: hidden;
+        border: 1px solid rgba(148, 163, 184, 0.26);
+        border-radius: 34px;
+        background: #111827;
+        box-shadow: 0 48px 120px rgba(0, 0, 0, 0.52);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="rubber-band-bumper-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="2.5"
+      data-fps="30"
+    >
+      <div
+        id="rubber-band-bumper-mount"
+        class="mount-card clip"
+        data-composition-id="rubber-band-bumper"
+        data-composition-src="./rubber-band-bumper.html"
+        data-variable-values='{"direction":"left","accent":"violet"}'
+        data-start="0"
+        data-duration="2.5"
+        data-track-index="0"
+        data-width="1459"
+        data-height="799"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["rubber-band-bumper-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "rubber-band-bumper.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/rubber-band-bumper/rubber-band-bumper.html b/docs/public/catalog/components/rubber-band-bumper/rubber-band-bumper.html
new file mode 100644
index 0000000000..ce2f7e9dc7
--- /dev/null
+++ b/docs/public/catalog/components/rubber-band-bumper/rubber-band-bumper.html
@@ -0,0 +1,331 @@
+<!doctype html>
+<!--
+  rubber-band-bumper: HyperFrames video primitive
+
+  The outgoing panel is pulled opposite its exit direction in progressively
+  smaller steps, visibly loading two accent bands. After a still threshold
+  hold, it releases past the chosen edge with overshoot while the incoming
+  panel settles into place behind it.
+
+  Variables:
+    direction: up or left exit direction
+    accent: green, blue, or violet tension color
+
+  Envelope, fixed IN and OUT with elastic HOLD:
+    IN_BASE  = 1.25s, five equal pull beats add decreasing displacement
+    HOLD     = max(0, D - IN - OUT), stillness at maximum tension
+    OUT_BASE = 0.95s, overshooting release and incoming-panel settle
+    If D is shorter than IN_BASE + OUT_BASE, IN and OUT compress together.
+    The timeline is never time-scaled.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, and has no data-width or
+  data-height. One paused timeline registers under the literal
+  rubber-band-bumper key.
+-->
+<html
+  lang="en"
+  data-composition-id="rubber-band-bumper"
+  data-composition-duration="2.5"
+  data-composition-variables='[
+    { "id": "direction", "type": "enum", "role": "content", "label": "Direction", "description": "Edge the outgoing panel releases through.", "default": "up", "options": [{ "value": "up", "label": "Up" }, { "value": "left", "label": "Left" }] },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Color applied to the tension bands and incoming panel.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Rubber Band Bumper</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="rubber-band-bumper" data-duration="2.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .rbb-clip,
+          .rbb-panel {
+            position: absolute;
+            inset: 0;
+            width: 100cqw;
+            height: 100cqh;
+          }
+
+          .rbb-clip {
+            overflow: hidden;
+            background: var(--bg, #0b0c0e);
+          }
+
+          .rbb-panel {
+            display: grid;
+            place-items: center;
+            will-change: transform, opacity;
+          }
+
+          .rbb-incoming {
+            background:
+              radial-gradient(
+                circle at 50% 44%,
+                color-mix(in srgb, var(--rbb-accent) 20%, transparent),
+                transparent 42%
+              ),
+              linear-gradient(145deg, #172033, #0c111b 72%);
+          }
+
+          .rbb-outgoing {
+            z-index: 2;
+            background: linear-gradient(145deg, #263247, #121925 68%);
+            border: 0.18cqmin solid color-mix(in srgb, #94a3b8 30%, transparent);
+            box-shadow: 0 2.8cqh 8cqh rgba(0, 0, 0, 0.48);
+          }
+
+          .rbb-copy {
+            display: grid;
+            justify-items: center;
+            gap: 2.4cqh;
+            max-width: 72cqw;
+            text-align: center;
+          }
+
+          .rbb-kicker {
+            padding: 1cqh 1.4cqw;
+            border: 0.14cqmin solid color-mix(in srgb, var(--rbb-accent) 68%, transparent);
+            border-radius: 999px;
+            color: var(--rbb-accent);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
+            font-size: clamp(11px, 2.2cqmin, 24px);
+            font-weight: 700;
+            letter-spacing: 0.16em;
+            line-height: 1;
+          }
+
+          .rbb-title {
+            margin: 0;
+            color: #f8fafc;
+            font-size: clamp(26px, 8.8cqmin, 92px);
+            font-weight: 760;
+            letter-spacing: -0.045em;
+            line-height: 0.95;
+          }
+
+          .rbb-subtitle {
+            margin: 0;
+            color: #b6c0d0;
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            font-size: clamp(13px, 3.1cqmin, 30px);
+            font-weight: 520;
+            line-height: 1.25;
+          }
+
+          .rbb-band {
+            position: absolute;
+            z-index: 1;
+            border-radius: 999px;
+            background: var(--rbb-accent);
+            box-shadow: 0 0 2.2cqmin color-mix(in srgb, var(--rbb-accent) 72%, transparent);
+            will-change: transform, opacity;
+          }
+
+          #root.rbb-left .rbb-band {
+            left: 0;
+            width: 14cqw;
+            height: 1.1cqh;
+            transform-origin: 0 50%;
+          }
+
+          #root.rbb-left .rbb-band-a {
+            top: 34cqh;
+          }
+
+          #root.rbb-left .rbb-band-b {
+            top: 66cqh;
+          }
+
+          #root.rbb-up .rbb-band {
+            top: 0;
+            width: 1.1cqw;
+            height: 14cqh;
+            transform-origin: 50% 0;
+          }
+
+          #root.rbb-up .rbb-band-a {
+            left: 34cqw;
+          }
+
+          #root.rbb-up .rbb-band-b {
+            left: 66cqw;
+          }
+        </style>
+
+        <div
+          id="rubber-band-bumper-clip"
+          class="rbb-clip clip"
+          data-start="0"
+          data-duration="2.5"
+          data-track-index="0"
+        >
+          <section class="rbb-panel rbb-incoming">
+            <div class="rbb-copy">
+              <span class="rbb-kicker">NEXT</span>
+              <h2 class="rbb-title">Clean release</h2>
+              <p class="rbb-subtitle">The incoming scene settles behind the snap.</p>
+            </div>
+          </section>
+
+          <span class="rbb-band rbb-band-a" aria-hidden="true"></span>
+          <span class="rbb-band rbb-band-b" aria-hidden="true"></span>
+
+          <section class="rbb-panel rbb-outgoing">
+            <div class="rbb-copy">
+              <span class="rbb-kicker">CURRENT</span>
+              <h2 class="rbb-title">Hold the tension</h2>
+              <p class="rbb-subtitle">Each pull travels less as resistance builds.</p>
+            </div>
+          </section>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var outgoing = root.querySelector(".rbb-outgoing");
+            var incoming = root.querySelector(".rbb-incoming");
+            var bands = root.querySelectorAll(".rbb-band");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var direction = vars.direction === "left" ? "left" : "up";
+            var accentColors = {
+              green: "var(--brand, #6ee7b7)",
+              blue: "var(--accent, #60a5fa)",
+              violet: "var(--accent-2, #a78bfa)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var motionByDirection = {
+              up: {
+                rootClass: "rbb-up",
+                axis: "y",
+                crossAxis: "x",
+                bandAxis: "scaleY",
+                outgoingArc: "3%",
+                incomingArc: "-1.6%",
+              },
+              left: {
+                rootClass: "rbb-left",
+                axis: "x",
+                crossAxis: "y",
+                bandAxis: "scaleX",
+                outgoingArc: "-3%",
+                incomingArc: "1.6%",
+              },
+            };
+            var motion = motionByDirection[direction];
+
+            root.classList.add(motion.rootClass);
+            root.style.setProperty("--rbb-accent", accentColors[accent]);
+
+            var IN_BASE = 1.25;
+            var OUT_BASE = 0.95;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "2.5"));
+            var totalBase = IN_BASE + OUT_BASE;
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var OUT_START = IN + HOLD;
+
+            // One authored table owns the resistance curve. Equal-time steps
+            // add 5, 3.5, 2, 1.25, then 0.5 percent displacement.
+            var pullPositions = [5, 8.5, 10.5, 11.75, 12.25];
+            var segmentDuration = IN / pullPositions.length;
+            var exitPosition = "-112%";
+            var incomingStart = "-5%";
+
+            gsap.set(outgoing, { x: "0%", y: "0%" });
+            gsap.set(incoming, { x: "0%", y: "0%", scale: 0.985, opacity: 0.82 });
+            var incomingOffset = {};
+            incomingOffset[motion.axis] = incomingStart;
+            gsap.set(incoming, incomingOffset);
+            gsap.set(bands, { opacity: 0.7, scaleX: 1, scaleY: 1 });
+            var bandStart = {};
+            bandStart[motion.bandAxis] = 0.08;
+            gsap.set(bands, bandStart);
+
+            var tl = gsap.timeline({ paused: true });
+
+            pullPositions.forEach(function (position, index) {
+              var at = index * segmentDuration;
+              var panelTween = { duration: segmentDuration, ease: "power2.out" };
+              var bandTween = { duration: segmentDuration, ease: "power2.out" };
+              panelTween[motion.axis] = position + "%";
+              bandTween[motion.bandAxis] = 0.08 + position / 14;
+              tl.to(outgoing, panelTween, at);
+              tl.to(bands, bandTween, at);
+            });
+
+            var releaseDuration = OUT * 0.84;
+            var releaseTween = { duration: releaseDuration, ease: "back.out(1.7)" };
+            var outgoingArc = {
+              duration: releaseDuration * 0.5,
+              ease: "sine.inOut",
+              yoyo: true,
+              repeat: 1,
+            };
+            releaseTween[motion.axis] = exitPosition;
+            outgoingArc[motion.crossAxis] = motion.outgoingArc;
+            tl.to(outgoing, releaseTween, OUT_START);
+            tl.to(outgoing, outgoingArc, OUT_START);
+            var bandRelease = {
+              opacity: 0,
+              duration: OUT * 0.28,
+              ease: "power4.out",
+            };
+            bandRelease[motion.bandAxis] = 0.04;
+            tl.to(bands, bandRelease, OUT_START);
+            var incomingDuration = OUT * 0.78;
+            var incomingSettle = {
+              scale: 1,
+              opacity: 1,
+              duration: incomingDuration,
+              ease: "back.out(1.7)",
+            };
+            var incomingArc = {
+              duration: incomingDuration * 0.5,
+              ease: "sine.inOut",
+              yoyo: true,
+              repeat: 1,
+            };
+            incomingSettle[motion.axis] = "0%";
+            incomingArc[motion.crossAxis] = motion.incomingArc;
+            tl.to(incoming, incomingSettle, OUT_START);
+            tl.to(incoming, incomingArc, OUT_START);
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["rubber-band-bumper"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/scale-down-fade/__hf-variables-preview.html b/docs/public/catalog/components/scale-down-fade/__hf-variables-preview.html
new file mode 100644
index 0000000000..8df7780a58
--- /dev/null
+++ b/docs/public/catalog/components/scale-down-fade/__hf-variables-preview.html
@@ -0,0 +1,77 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Scale Down Fade variables preview</title>
+    <style>
+      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #f7f7f8; }
+      #hf-vars-root { position: relative; width: 1920px; height: 1080px; }
+      #hf-vars-mount { position: absolute; inset: 0; display: grid; place-items: center; }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  </head>
+  <body>
+    <div id="hf-vars-root" data-composition-id="scale-down-fade-variables-preview" data-start="0" data-width="1920" data-height="1080" data-duration="5" data-fps="30">
+      <div id="hf-vars-mount" class="clip" data-composition-id="scale-down-fade" data-composition-src="./scale-down-fade.html" data-start="0" data-duration="5" data-track-index="0" data-width="1920" data-height="1080"></div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["scale-down-fade-variables-preview"] = gsap.timeline({ paused: true });
+    </script>
+    <script>
+      (function () {
+        var mount = document.getElementById("hf-vars-mount");
+        // The mount is filled asynchronously, and the demo script selects
+        // what it fills it with, so it cannot run before then.
+        var observer = new MutationObserver(build);
+        observer.observe(mount, { childList: true, subtree: true });
+        build();
+        function build() {
+          if (!mount.firstElementChild) return;
+          observer.disconnect();
+
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-scale-down-fade span",
+          { opacity: 0, "--hf-word-scale": 1.08, "--hf-word-blur": "16px" },
+          {
+            opacity: 1,
+            "--hf-word-scale": 1,
+            "--hf-word-blur": "0px",
+            duration: 0.52,
+            stagger: 0.05,
+            ease: "power3.out",
+          },
+          startTime,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["scale-down-fade-demo"] = tl;
+          var child = window.__timelines["scale-down-fade-demo"];
+          delete window.__timelines["scale-down-fade-demo"];
+          if (!child || typeof child.paused !== "function") return;
+          child.paused(false);
+          window.__timelines["scale-down-fade-variables-preview"].add(child, 0);
+        }
+      })();
+    </script>
+<script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "scale-down-fade.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/scale-down-fade/demo.html b/docs/public/catalog/components/scale-down-fade/demo.html
new file mode 100644
index 0000000000..9e3bc77351
--- /dev/null
+++ b/docs/public/catalog/components/scale-down-fade/demo.html
@@ -0,0 +1,107 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Scale Down Fade - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        min-width: 900px;
+        min-height: 500px;
+        padding: 64px;
+        /* ponytail: scale wrapper (not a GSAP target) to fill 55-75% of frame */
+        transform: scale(3);
+      }
+      .hf-remocn-scale-down-fade {
+        color: #18181b;
+        font-family: Inter, system-ui, sans-serif;
+        font-weight: 900;
+        letter-spacing: -0.04em;
+      }
+      .hf-remocn-scale-down-fade {
+        display: inline-flex;
+        gap: 12px;
+        font-size: 56px;
+        line-height: 1;
+      }
+      .hf-remocn-scale-down-fade span {
+        display: inline-block;
+        transform: translate(var(--hf-word-x, 0px), var(--hf-word-y, 0px))
+          scale(var(--hf-word-scale, 1));
+        filter: blur(var(--hf-word-blur, 0px));
+        will-change: transform, filter, opacity;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="scale-down-fade-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-scale-down-fade"><span>Quiet</span><span>confidence</span></div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-scale-down-fade span",
+          { opacity: 0, "--hf-word-scale": 1.08, "--hf-word-blur": "16px" },
+          {
+            opacity: 1,
+            "--hf-word-scale": 1,
+            "--hf-word-blur": "0px",
+            duration: 0.52,
+            stagger: 0.05,
+            ease: "power3.out",
+          },
+          startTime,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["scale-down-fade-demo"] = tl;
+      </script>
+    </div>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "scale-down-fade.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/scale-down-fade/scale-down-fade.html b/docs/public/catalog/components/scale-down-fade/scale-down-fade.html
new file mode 100644
index 0000000000..f3a53912cb
--- /dev/null
+++ b/docs/public/catalog/components/scale-down-fade/scale-down-fade.html
@@ -0,0 +1,108 @@
+<!--
+  Scale Down Fade - remocn typography primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Drive the timeline
+  integration from a paused GSAP timeline so renders remain deterministic.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result as a custom property
+  the CSS below consumes. The timeline recipe stays untouched by them: it keeps
+  driving one scale and one blur, and these decide how far that scale overshoots
+  and how wide that blur spreads.
+
+    - words (text, default "Quiet confidence"): the words on screen. The text is
+      split on whitespace and each word becomes its own span, so the stagger
+      picks up as many steps as there are words. Blank or non-text input falls
+      back to the default pair.
+    - overshoot (subtle | standard | bold, default standard): scales how far
+      above final size the words start. subtle covers about a third of the run,
+      bold a little over double, in the same time.
+    - blur (soft | standard | heavy, default standard): scales the blur radius
+      the timeline drives, from a light haze to a full smear.
+    - tone (ink | paper | accent, default ink): word colour. ink is near-black
+      for light frames, paper near-white for dark ones, accent rides --brand.
+
+  On every default the result is identical to the original: two near-black words
+  settling down from 1.08 through a 16px blur.
+-->
+
+<div
+  class="hf-remocn-scale-down-fade"
+  data-composition-variables='[
+    { "id": "words", "type": "string", "role": "content", "label": "Words", "description": "Words on screen, split on whitespace so each one gets its own stagger step.", "default": "Quiet confidence" },
+    { "id": "overshoot", "type": "enum", "role": "motion", "label": "Overshoot", "description": "Scales how far above final size the words start before they settle.", "default": "standard", "options": [{ "value": "subtle", "label": "Subtle" }, { "value": "standard", "label": "Standard" }, { "value": "bold", "label": "Bold" }] },
+    { "id": "blur", "type": "enum", "role": "style", "label": "Blur", "description": "Scales the blur radius the timeline drives, from a light haze to a full smear.", "default": "standard", "options": [{ "value": "soft", "label": "Soft" }, { "value": "standard", "label": "Standard" }, { "value": "heavy", "label": "Heavy" }] },
+    { "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Word colour: ink for light frames, paper for dark ones, accent rides --brand.", "default": "ink", "options": [{ "value": "ink", "label": "Ink" }, { "value": "paper", "label": "Paper" }, { "value": "accent", "label": "Accent" }] }
+  ]'
+><span>Quiet</span><span>confidence</span></div>
+
+<style>
+  .hf-remocn-scale-down-fade {
+    color: var(--hf-word-color, #18181b);
+    font-family: Inter, system-ui, sans-serif;
+    font-weight: 900;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-scale-down-fade {
+    display: inline-flex;
+    gap: 12px;
+    font-size: 56px;
+    line-height: 1;
+  }
+  .hf-remocn-scale-down-fade span {
+    display: inline-block;
+    transform: translate(var(--hf-word-x, 0px), var(--hf-word-y, 0px))
+      scale(calc(1 + (var(--hf-word-scale, 1) - 1) * var(--hf-word-overshoot, 1)));
+    filter: blur(calc(var(--hf-word-blur, 0px) * var(--hf-word-blur-scale, 1)));
+    will-change: transform, filter, opacity;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var overshoots = { subtle: 0.35, standard: 1, bold: 2.2 };
+    var blurScales = { soft: 0.4, standard: 1, heavy: 2.1 };
+    var tones = {
+      ink: "#18181b",
+      paper: "#fafafa",
+      accent: "var(--brand, #34d399)",
+    };
+
+    var overshoot = overshoots[pick(overshoots, vars.overshoot, "standard")];
+    var blurScale = blurScales[pick(blurScales, vars.blur, "standard")];
+    var tone = tones[pick(tones, vars.tone, "ink")];
+    var words = (typeof vars.words === "string" ? vars.words : "").split(/\s+/).filter(Boolean);
+    if (words.length === 0) words = ["Quiet", "confidence"];
+
+    var roots = document.querySelectorAll(".hf-remocn-scale-down-fade");
+    for (var i = 0; i < roots.length; i += 1) {
+      var root = roots[i];
+      root.style.setProperty("--hf-word-overshoot", String(overshoot));
+      root.style.setProperty("--hf-word-blur-scale", String(blurScale));
+      root.style.setProperty("--hf-word-color", tone);
+      root.textContent = "";
+      for (var j = 0; j < words.length; j += 1) {
+        var span = document.createElement("span");
+        span.textContent = words[j];
+        root.appendChild(span);
+      }
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-scale-down-fade span', { opacity: 0, '--hf-word-scale': 1.08, '--hf-word-blur': '16px' }, { opacity: 1, '--hf-word-scale': 1, '--hf-word-blur': '0px', duration: 0.52, stagger: 0.05, ease: 'power3.out' }, startTime);
+-->
diff --git a/docs/public/catalog/components/scan-band/demo.html b/docs/public/catalog/components/scan-band/demo.html
new file mode 100644
index 0000000000..9cb9fca367
--- /dev/null
+++ b/docs/public/catalog/components/scan-band/demo.html
@@ -0,0 +1,98 @@
+<!doctype html>
+<!--
+  scan-band demo. This standalone composition mounts scan-band.html through
+  data-composition-src. Non-default values prove that both variables flow
+  through the mount while the primitive remains sized by its host box.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Scan Band Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0b0c0e;
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f7f8fa;
+        --font-display: Inter, system-ui, sans-serif;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 48%, #1a1d22 0%, #0b0c0e 68%);
+      }
+
+      .mount-card {
+        width: 76%;
+        height: 56%;
+        left: 12%;
+        top: 22%;
+        container-type: size;
+        overflow: hidden;
+        border: 1px solid rgba(255, 255, 255, 0.08);
+        border-radius: 32px;
+        background: #101216;
+        box-shadow: 0 5cqh 14cqh rgba(0, 0, 0, 0.48);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="scan-band-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="3.5"
+      data-fps="30"
+    >
+      <div
+        id="scan-band-mount"
+        class="mount-card clip"
+        data-composition-id="scan-band"
+        data-composition-src="./scan-band.html"
+        data-variable-values='{"wordmark":"SCAN MODE","band_angle":-18}'
+        data-start="0"
+        data-duration="3.5"
+        data-track-index="0"
+        data-width="1459"
+        data-height="605"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["scan-band-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "scan-band.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/scan-band/scan-band.html b/docs/public/catalog/components/scan-band/scan-band.html
new file mode 100644
index 0000000000..fe4ad60f2d
--- /dev/null
+++ b/docs/public/catalog/components/scan-band/scan-band.html
@@ -0,0 +1,216 @@
+<!doctype html>
+<!--
+  scan-band: HyperFrames video primitive
+
+  A single diagonal distortion band crosses a clean wordmark. Inside the
+  band, three clipped clones create red and cyan separation plus a small
+  horizontal displacement. Everywhere outside the band remains clean.
+
+  Variables:
+    - wordmark (string, default "HYPERFRAMES"): displayed text.
+    - band_angle (number, default 12): diagonal band angle in degrees.
+
+  Envelope:
+    IN_BASE  = 0.45s, the clean wordmark fades into place.
+    HOLD     = elastic, the band sweeps once, then leaves a clean wordmark.
+    OUT_BASE = 0.45s, the clean wordmark fades away.
+    If the duration is shorter than IN_BASE + OUT_BASE, IN and OUT compress
+    together and HOLD becomes zero. Only HOLD grows for longer mounts.
+
+  Mount contract: the runtime clones only this template. #root fills the
+  host box, establishes the container query basis, and registers one paused
+  timeline under the hardcoded scan-band id.
+-->
+<html
+  lang="en"
+  data-composition-id="scan-band"
+  data-composition-duration="3.5"
+  data-composition-variables='[
+    { "id": "wordmark", "type": "string", "role": "content", "label": "Wordmark", "description": "Text displayed by the scan effect.", "default": "HYPERFRAMES" },
+    { "id": "band_angle", "type": "number", "role": "layout", "label": "Band angle", "description": "Diagonal angle of the distortion band in degrees.", "default": 12, "min": -30, "max": 30, "step": 1, "unit": "deg" }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Scan Band</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="scan-band" data-duration="3.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            background: var(--bg, #0b0c0e);
+            color: var(--fg, #f7f8fa);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .sb-clip,
+          .sb-stage,
+          .sb-band,
+          .sb-clone {
+            position: absolute;
+            inset: 0;
+          }
+
+          .sb-clip,
+          .sb-stage,
+          .sb-clone {
+            display: grid;
+            place-items: center;
+          }
+
+          .sb-stage {
+            opacity: 0;
+          }
+
+          .sb-wordmark,
+          .sb-clone {
+            font-size: clamp(28px, 13cqw, 150px);
+            font-weight: 850;
+            line-height: 0.86;
+            letter-spacing: -0.065em;
+            white-space: nowrap;
+          }
+
+          .sb-wordmark {
+            color: var(--fg, #f7f8fa);
+            text-shadow: 0 1.2cqh 4cqh color-mix(in srgb, #000 45%, transparent);
+          }
+
+          .sb-band {
+            --sb-band-position: -60%;
+            --sb-half: 6%;
+            --sb-lean: 10.6%;
+            overflow: hidden;
+            clip-path: polygon(
+              calc(var(--sb-band-position) - var(--sb-half) - var(--sb-lean)) 0%,
+              calc(var(--sb-band-position) + var(--sb-half) - var(--sb-lean)) 0%,
+              calc(var(--sb-band-position) + var(--sb-half) + var(--sb-lean)) 100%,
+              calc(var(--sb-band-position) - var(--sb-half) + var(--sb-lean)) 100%
+            );
+            will-change: clip-path;
+          }
+
+          .sb-clone {
+            text-shadow: none;
+          }
+
+          .sb-clone-red {
+            color: #ff3158;
+            opacity: 0.9;
+            transform: translateX(-0.8cqw);
+          }
+
+          .sb-clone-cyan {
+            color: #36efff;
+            opacity: 0.9;
+            transform: translateX(1.7cqw);
+          }
+
+          .sb-clone-core {
+            color: var(--fg, #f7f8fa);
+            transform: translateX(0.65cqw);
+          }
+        </style>
+
+        <div
+          id="scan-band-clip"
+          class="sb-clip clip"
+          data-start="0"
+          data-duration="3.5"
+          data-track-index="0"
+        >
+          <div class="sb-stage" role="img">
+            <span class="sb-wordmark"></span>
+            <div class="sb-band" aria-hidden="true">
+              <span class="sb-clone sb-clone-red"></span>
+              <span class="sb-clone sb-clone-cyan"></span>
+              <span class="sb-clone sb-clone-core"></span>
+            </div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".sb-stage");
+            var wordmark = root.querySelector(".sb-wordmark");
+            var band = root.querySelector(".sb-band");
+            var clones = root.querySelectorAll(".sb-clone");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var text = vars.wordmark == null ? "HYPERFRAMES" : String(vars.wordmark);
+            var angleValue = vars.band_angle;
+            var bandAngle = Number.isFinite(angleValue)
+              ? Math.max(-30, Math.min(30, angleValue))
+              : 12;
+
+            wordmark.textContent = text;
+            stage.setAttribute("aria-label", text);
+            clones.forEach(function (clone) {
+              clone.textContent = text;
+            });
+
+            var lean = Math.tan((bandAngle * Math.PI) / 180) * 50;
+            band.style.setProperty("--sb-lean", lean.toFixed(3) + "%");
+
+            var IN_BASE = 0.45;
+            var OUT_BASE = 0.45;
+            var SWEEP_BASE = 1.65;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "3.5"));
+            var fixedTotal = IN_BASE + OUT_BASE;
+            var phaseScale = duration < fixedTotal ? duration / fixedTotal : 1;
+            var IN = IN_BASE * phaseScale;
+            var OUT = OUT_BASE * phaseScale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var OUT_START = IN + HOLD;
+            var SWEEP = Math.min(SWEEP_BASE, HOLD);
+
+            gsap.set(stage, { opacity: 0 });
+            gsap.set(band, { "--sb-band-position": "-60%" });
+
+            var tl = gsap.timeline({ paused: true });
+            tl.to(stage, { opacity: 1, duration: IN, ease: "power2.out" }, 0);
+
+            if (SWEEP > 0) {
+              tl.fromTo(
+                band,
+                { "--sb-band-position": "-60%" },
+                {
+                  "--sb-band-position": "160%",
+                  duration: SWEEP,
+                  ease: "power2.out",
+                },
+                IN,
+              );
+            }
+
+            tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines["scan-band"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/scramble-reveal/README.md b/docs/public/catalog/components/scramble-reveal/README.md
new file mode 100644
index 0000000000..56be6d555a
--- /dev/null
+++ b/docs/public/catalog/components/scramble-reveal/README.md
@@ -0,0 +1,35 @@
+# scramble-reveal
+
+A target string begins as deterministic wrong glyphs and resolves one character at a time, left to right. Every visible frame comes from one fixed-seed LCG table built before the timeline registers, so seeks in either direction always show the same string. The locked string then holds until the frame cuts.
+
+3s authored, elastic HOLD, exit `none` by default.
+
+## Variables
+
+| id       | type   | default       | notes                                                                                                                      |
+| -------- | ------ | ------------- | -------------------------------------------------------------------------------------------------------------------------- |
+| `text`   | string | `HYPERFRAMES` | Target string. Font size auto-fits to character count.                                                                     |
+| `accent` | enum   | `green`       | Text, prefix, and frame color: green rides `--brand`, blue rides `--accent`, violet rides `--accent-2`.                    |
+| `style`  | enum   | `terminal`    | `terminal` (framed shell with `>_` prefix) or `clean` (text only).                                                         |
+| `exit`   | enum   | `none`        | `none` holds until the cut; `fade` departs opacity-only; `up` is the curved arc departure (the pre-Wave-J default ending). |
+
+## Mount
+
+```html
+<div
+  class="clip"
+  data-composition-id="scramble-reveal"
+  data-composition-src="./scramble-reveal.html"
+  data-variable-values='{"text":"DETERMINISM","style":"clean","accent":"violet"}'
+  data-start="0"
+  data-duration="3"
+  data-track-index="0"
+></div>
+```
+
+Elastic root: no `data-width`/`data-height`; it fills whatever box the host clip gives it. Timeline registers under the literal `scramble-reveal` key.
+
+## Notes
+
+- Deterministic: fixed LCG seed `0x27c0ffee`, authored 30fps frame rows, monotonic left-to-right lock frames.
+- The hold is a finite drift cycle followed by authored stillness, never a repeating tween.
diff --git a/docs/public/catalog/components/scramble-reveal/demo.html b/docs/public/catalog/components/scramble-reveal/demo.html
new file mode 100644
index 0000000000..964746ed2a
--- /dev/null
+++ b/docs/public/catalog/components/scramble-reveal/demo.html
@@ -0,0 +1,106 @@
+<!doctype html>
+<!--
+  scramble-reveal demo. This standalone composition mounts the primitive
+  through data-composition-src. Non-default text, accent, and style values
+  prove the variable path while the primitive remains elastic to its host.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Scramble Reveal Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #0b0c0e);
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --surface: #14171c;
+        --border: #343a46;
+        --brand: #71f5a7;
+        --accent: #c5a3ff;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(
+          ellipse at 50% 44%,
+          var(--bg, #171a20) 0%,
+          var(--bg, #0b0c0e) 72%
+        );
+      }
+
+      .mount-card {
+        width: 76%;
+        height: 40%;
+        left: 12%;
+        top: 30%;
+        container-type: size;
+        overflow: hidden;
+        border: 1px solid color-mix(in srgb, var(--border, #94a3b8) 20%, transparent);
+        border-radius: 30px;
+        background: color-mix(in srgb, var(--surface, #101318) 72%, transparent);
+        box-shadow: 0 40px 100px color-mix(in srgb, var(--bg, #000000) 48%, transparent);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="scramble-reveal-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="3"
+      data-fps="30"
+    >
+      <div
+        id="scramble-reveal-mount"
+        class="mount-card clip"
+        data-composition-id="scramble-reveal"
+        data-composition-src="./scramble-reveal.html"
+        data-variable-values='{"text":"SEEK SAFE","accent":"violet","style":"clean"}'
+        data-start="0"
+        data-duration="3"
+        data-track-index="0"
+        data-width="1459"
+        data-height="432"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["scramble-reveal-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "scramble-reveal.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/scramble-reveal/scramble-reveal.html b/docs/public/catalog/components/scramble-reveal/scramble-reveal.html
new file mode 100644
index 0000000000..e78385dd99
--- /dev/null
+++ b/docs/public/catalog/components/scramble-reveal/scramble-reveal.html
@@ -0,0 +1,289 @@
+<!doctype html>
+<!--
+  scramble-reveal: HyperFrames video primitive (text effects / reveal)
+
+  A target string begins as deterministic wrong glyphs, then resolves one
+  character at a time from left to right. Every visible frame comes from one
+  fixed-seed LCG table built before the timeline is registered.
+
+  Variables:
+    - text (string, default "HYPERFRAMES"): the target string.
+    - accent (green | blue | violet, default "green"): text and frame color.
+    - style (terminal | clean, default "terminal"): optional terminal frame.
+    - exit (none | fade | up, default "none"): optional departure.
+
+  Envelope, fixed IN and OUT with elastic HOLD only:
+    IN_BASE  = 1.65s, curved arrival and the complete left-to-right lock
+    HOLD     = max(0, D - IN - OUT), subtle drift followed by 0.30s stillness
+    OUT_BASE = 0.45s departure when exit is fade or up, 0s when exit is
+               none (the default: the locked string holds until the cut)
+    If D is shorter than IN_BASE + OUT_BASE, IN and OUT compress together.
+    The timeline is never time-scaled.
+
+  Determinism: frameTable is computed exactly once during synchronous
+  timeline construction from fixed LCG seed 0x27c0ffee. Timeline sets only
+  read authored rows from that table, so repeated or reverse seeks produce
+  the same string for the same time.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, has no data-width or data-height,
+  and registers one paused timeline under the literal scramble-reveal key.
+-->
+<html
+  lang="en"
+  data-composition-id="scramble-reveal"
+  data-composition-duration="3"
+  data-composition-variables='[
+    { "id": "text", "type": "string", "role": "content", "label": "Text", "description": "Target string that resolves from deterministic wrong glyphs.", "default": "HYPERFRAMES" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Color used by the text, prefix, and optional terminal frame.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "style", "type": "enum", "role": "style", "label": "Style", "description": "Terminal frame or clean text-only presentation.", "default": "terminal", "options": [{ "value": "terminal", "label": "Terminal" }, { "value": "clean", "label": "Clean" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the locked string holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Scramble Reveal</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="scramble-reveal" data-duration="3" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            pointer-events: none;
+          }
+
+          .sr-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .sr-stage {
+            display: block;
+            width: 88cqw;
+            max-width: 88cqw;
+            will-change: transform, opacity;
+          }
+
+          .sr-shell {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            min-height: 34cqh;
+            padding: var(--space-3, 5cqh) var(--space-3, 5cqw);
+            overflow: hidden;
+            border: 0.16cqmin solid color-mix(in srgb, var(--sr-accent) 58%, var(--border, #475569));
+            border-radius: var(--radius, 2.4cqmin);
+            background: color-mix(in srgb, var(--surface, #0b1016) 92%, var(--sr-accent));
+            box-shadow:
+              0 3.5cqh 10cqh color-mix(in srgb, var(--bg, #000000) 42%, transparent),
+              inset 0 0 4cqh color-mix(in srgb, var(--sr-accent) 7%, transparent);
+          }
+
+          .sr-prefix {
+            flex: 0 0 auto;
+            margin-right: var(--space-1, 1.8cqw);
+            color: color-mix(in srgb, var(--sr-accent) 78%, var(--fg, #ffffff));
+            font-size: calc(var(--sr-font-size) * 0.74);
+            font-weight: 700;
+            line-height: 1;
+            opacity: 0.78;
+          }
+
+          .sr-text {
+            display: block;
+            min-width: 0;
+            overflow: hidden;
+            color: var(--sr-accent);
+            font-size: var(--sr-font-size);
+            font-weight: 780;
+            line-height: 1;
+            letter-spacing: 0.055em;
+            text-align: center;
+            text-shadow: 0 0 2.8cqh color-mix(in srgb, var(--sr-accent) 34%, transparent);
+            white-space: pre;
+          }
+
+          .sr-stage.sr-clean .sr-shell {
+            min-height: 26cqh;
+            padding: var(--space-2, 3cqh) var(--space-2, 2cqw);
+            border-color: transparent;
+            background: transparent;
+            box-shadow: none;
+          }
+
+          .sr-stage.sr-clean .sr-prefix {
+            display: none;
+          }
+        </style>
+
+        <div
+          id="scramble-reveal-clip"
+          class="sr-clip clip"
+          data-start="0"
+          data-duration="3"
+          data-track-index="0"
+        >
+          <div class="sr-stage" role="img">
+            <div class="sr-shell">
+              <span class="sr-prefix" aria-hidden="true">&gt;_</span>
+              <span class="sr-text" aria-hidden="true"></span>
+            </div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".sr-stage");
+            var textElement = root.querySelector(".sr-text");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var text = vars.text == null ? "HYPERFRAMES" : String(vars.text);
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme (green/blue/violet must
+            // not collapse into one themed accent).
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var style = vars.style === "clean" ? "clean" : "terminal";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            root.style.setProperty("--sr-accent", accentColors[accent]);
+            stage.classList.toggle("sr-clean", style === "clean");
+            stage.setAttribute("aria-label", text);
+
+            var characters = Array.from(text);
+            var fittedCqw = Math.min(11, 118 / Math.max(1, characters.length));
+            root.style.setProperty("--sr-font-size", "min(" + fittedCqw.toFixed(3) + "cqw, 24cqh)");
+
+            var IN_BASE = 1.65;
+            var OUT_BASE = exit === "none" ? 0 : 0.45;
+            var ARRIVAL_BASE = 0.42;
+            var LOCK_TAIL_BASE = 0.15;
+            var STILLNESS = 0.3;
+            var FPS = 30;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "3"));
+            var totalBase = Math.max(0.001, IN_BASE + OUT_BASE);
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var ARRIVAL = ARRIVAL_BASE * scale;
+            var LOCK_TAIL = LOCK_TAIL_BASE * scale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var HOLD_START = IN;
+            var OUT_START = IN + HOLD;
+            var REVEAL_DURATION = Math.max(0, IN - LOCK_TAIL);
+            var lastFrame = Math.max(1, Math.round(REVEAL_DURATION * FPS));
+
+            // The LCG and all character-state decisions live here. This IIFE
+            // runs once before timeline construction, then only frameTable is
+            // read. Lock frames are monotonic by character index, so the final
+            // target resolves strictly from left to right.
+            var frameTable = (function () {
+              var glyphs = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789#$%&*+?<>";
+              var state = 0x27c0ffee;
+              var firstLockFrame = Math.min(lastFrame, Math.max(1, Math.round(0.2 * FPS * scale)));
+              var lockFrames = characters.map(function (character, index) {
+                if (/\s/.test(character)) return 0;
+                var position = characters.length <= 1 ? 1 : index / (characters.length - 1);
+                return Math.round(firstLockFrame + position * (lastFrame - firstLockFrame));
+              });
+              var rows = [];
+
+              for (var frame = 0; frame <= lastFrame; frame += 1) {
+                var row = characters
+                  .map(function (character, index) {
+                    if (/\s/.test(character) || frame >= lockFrames[index]) return character;
+
+                    state = (Math.imul(1664525, state) + 1013904223) >>> 0;
+                    var glyphIndex = state % glyphs.length;
+                    var glyph = glyphs.charAt(glyphIndex);
+                    if (glyph === character)
+                      glyph = glyphs.charAt((glyphIndex + 1) % glyphs.length);
+                    return glyph;
+                  })
+                  .join("");
+                rows.push(row);
+              }
+
+              return rows;
+            })();
+
+            gsap.set(stage, { opacity: 0, x: "-4cqw", y: "2.4cqh" });
+            textElement.textContent = frameTable[0];
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: independently eased axes form the arrival arc. The authored
+            // frame rows then lock the target from left to right at 30 fps.
+            tl.to(stage, { opacity: 1, duration: ARRIVAL, ease: "power2.out" }, 0);
+            tl.to(stage, { x: "0cqw", duration: ARRIVAL, ease: "power3.out" }, 0);
+            tl.to(stage, { y: "0cqh", duration: ARRIVAL, ease: "sine.inOut" }, 0);
+            frameTable.forEach(function (row, frame) {
+              tl.set(textElement, { textContent: row }, frame / FPS);
+            });
+
+            // HOLD: finite drift ends with authored stillness before departure.
+            var driftHalf = Math.max(0, HOLD - STILLNESS) / 2;
+            if (driftHalf > 0) {
+              tl.to(
+                stage,
+                {
+                  y: "-0.55cqh",
+                  duration: driftHalf,
+                  ease: "sine.inOut",
+                  yoyo: true,
+                  repeat: 1,
+                },
+                HOLD_START,
+              );
+            }
+
+            // OUT: optional departure; exit none holds until the frame cuts.
+            // The up exit keeps the original curved arc departure.
+            if (exit === "up") {
+              tl.to(stage, { x: "5cqw", duration: OUT, ease: "power2.in" }, OUT_START);
+              tl.to(stage, { y: "-3.5cqh", duration: OUT, ease: "sine.inOut" }, OUT_START);
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "fade") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["scramble-reveal"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/screen-flow-carousel/README.md b/docs/public/catalog/components/screen-flow-carousel/README.md
new file mode 100644
index 0000000000..a0560b0cd3
--- /dev/null
+++ b/docs/public/catalog/components/screen-flow-carousel/README.md
@@ -0,0 +1,52 @@
+# screen-flow-carousel
+
+Two to five app screens ride a horizontal rail. One screen is primary at center while its neighbors recede (smaller and dimmer). On each cue the whole rail advances one screen with a velocity-matched throw: a fast lateral translate that sheds speed quickly, then a smooth long-tail catch onto the next center (the velocity-throw-snap motion law with the snap softened to the smooth register: no overshoot, both sides always moving the same direction). A mono caption under the rail swaps with each advance.
+
+5s authored, elastic HOLD, exit `none` by default.
+
+## Variables
+
+| id         | type   | default | notes                                                                                                                                                                                                                   |
+| ---------- | ------ | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `screens`  | number | `3`     | 2 to 5 screens on the rail.                                                                                                                                                                                             |
+| `captions` | string | `""`    | Comma-separated caption per screen. Blank entries use the authored defaults (Overview, Details, Insights, Activity, Settings).                                                                                          |
+| `cues`     | string | `""`    | Comma-separated advance times in seconds from mount start (`screens - 1` advances). Blank entries use the authored even rhythm; values are clamped inside the hold and kept far enough apart that throws never overlap. |
+| `accent`   | enum   | `green` | Active ring, caption dot, and skeleton accents: green rides `--brand`, blue rides `--accent`, violet rides `--accent-2`.                                                                                                |
+| `exit`     | enum   | `none`  | `none` holds the final screen until the cut; `fade` departs opacity-only; `up` fades while rising.                                                                                                                      |
+
+## Screen slots
+
+Screens are slots. Place inert templates anywhere in the HOST page (templates never render, and the runtime wipes the host clip's own children on mount, so slots live at document level):
+
+```html
+<template data-slot="screen-flow-carousel-screen-1">
+  <img src="./shots/dashboard.png" alt="" />
+</template>
+<template data-slot="screen-flow-carousel-screen-2">
+  <video src="./shots/flow.mp4" muted></video>
+</template>
+```
+
+Slot content may be an `<img>`, a muted `<video>`, or arbitrary HTML; direct img/video children are stretched to cover the screen. Any screen without a slot renders a token-styled skeleton; the four variants (list, cards, chart, detail) cycle by index so adjacent defaults never repeat.
+
+## Mount
+
+```html
+<div
+  class="clip"
+  data-composition-id="screen-flow-carousel"
+  data-composition-src="./screen-flow-carousel.html"
+  data-variable-values='{"screens":4,"captions":"Capture,Compose,Render,Publish","cues":"1.3,2.4,3.5","accent":"blue"}'
+  data-start="0"
+  data-duration="5"
+  data-track-index="0"
+></div>
+```
+
+Elastic root: no `data-width`/`data-height`; it fills whatever box the host clip gives it. Timeline registers under the literal `screen-flow-carousel` key.
+
+## Notes
+
+- Rail position is CSS-owned through the numeric `--sfc-pos` custom property; GSAP tweens only that number plus per-screen scale/opacity with explicit endpoints, so any seek order lands identical frames.
+- The active ring is opacity-only over a CSS accent border, so no `var()` color string is ever GSAP-tweened.
+- Envelope: fixed IN (0.9s settle) and OUT (0.45s, only when `exit` is not `none`) with an elastic HOLD; all advances live inside the hold and the last throw always lands with stillness left before the cut. Never time-scaled.
diff --git a/docs/public/catalog/components/screen-flow-carousel/demo.html b/docs/public/catalog/components/screen-flow-carousel/demo.html
new file mode 100644
index 0000000000..093c901486
--- /dev/null
+++ b/docs/public/catalog/components/screen-flow-carousel/demo.html
@@ -0,0 +1,107 @@
+<!doctype html>
+<!--
+  screen-flow-carousel demo. This standalone composition mounts the primitive
+  through data-composition-src. Non-default screens, captions, cues, and
+  accent values prove the variable path while the primitive stays elastic to
+  its host box.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Screen Flow Carousel Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #0b0c0e);
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --muted: #8b93a3;
+        --surface: #14171c;
+        --border: #343a46;
+        --brand: #71f5a7;
+        --accent: #61a8ff;
+        --accent-2: #c5a3ff;
+        --font-body: Inter, ui-sans-serif, system-ui, sans-serif;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(
+          ellipse at 50% 40%,
+          var(--bg, #171a20) 0%,
+          var(--bg, #0b0c0e) 74%
+        );
+      }
+
+      .mount-card {
+        width: 84%;
+        height: 78%;
+        left: 8%;
+        top: 11%;
+        container-type: size;
+        overflow: hidden;
+        border-radius: 24px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="screen-flow-carousel-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+      data-fps="30"
+    >
+      <div
+        id="screen-flow-carousel-mount"
+        class="mount-card clip"
+        data-composition-id="screen-flow-carousel"
+        data-composition-src="./screen-flow-carousel.html"
+        data-variable-values='{"screens":4,"captions":"Capture,Compose,Render,Publish","cues":"1.3,2.4,3.5","accent":"blue"}'
+        data-start="0"
+        data-duration="5"
+        data-track-index="0"
+        data-width="1613"
+        data-height="842"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["screen-flow-carousel-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "screen-flow-carousel.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/screen-flow-carousel/screen-flow-carousel.html b/docs/public/catalog/components/screen-flow-carousel/screen-flow-carousel.html
new file mode 100644
index 0000000000..937aa0a7d8
--- /dev/null
+++ b/docs/public/catalog/components/screen-flow-carousel/screen-flow-carousel.html
@@ -0,0 +1,576 @@
+<!doctype html>
+<!--
+  screen-flow-carousel -- HyperFrames video primitive (product demo / feature tour)
+
+  Two to five app screens ride a horizontal rail. One screen is primary at
+  center while its neighbors recede (smaller and dimmer). On each cue the
+  whole rail advances one screen with a velocity-matched throw: a fast
+  lateral translate that loses speed quickly, then a smooth long-tail catch
+  onto the next center. This is the velocity-throw-snap motion law with the
+  snap softened to the smooth register: no overshoot, no back ease, both
+  sides of the rail always moving the same direction. A mono caption under
+  the rail swaps with each advance.
+
+  Screens are SLOTS. Callers supply content by placing inert templates
+  anywhere in the HOST page (templates never render, and the runtime wipes
+  the host clip's own children on mount, so slots live at document level):
+
+    <template data-slot="screen-flow-carousel-screen-1"> ... </template>
+    <template data-slot="screen-flow-carousel-screen-2"> ... </template>
+    ... up to screen-5.
+
+  Slot content may be an <img>, a muted <video>, or arbitrary HTML; direct
+  img/video children are stretched to cover the screen. Any screen without a
+  slot renders a token-styled skeleton; the four skeleton variants (list,
+  cards, chart, detail) cycle by index so adjacent defaults never repeat.
+
+  Variables (declared in data-composition-variables below):
+    - screens (number 2 to 5, default 3): how many screens ride the rail.
+    - captions (string, default ""): comma-separated caption per screen.
+      Blank entries fall back to the authored defaults.
+    - cues (string, default ""): comma-separated advance times in seconds
+      relative to mount start (screens - 1 advances). Blank or invalid
+      entries use the authored even rhythm. Values are clamped inside the
+      hold and kept far enough apart that throws never overlap.
+    - accent (green | blue | violet, default green): green rides --brand,
+      blue rides --accent, violet rides --accent-2.
+    - exit (none | fade | up, default none): frame roots own transitions;
+      the default holds the final screen to the last pixel.
+
+  Envelope, fixed IN and OUT with elastic HOLD only (never timeScale):
+    IN_BASE  = 0.90s  one stage settle (rise + fade), screen 1 primary
+    HOLD     = max(0, D - IN - OUT); all advances live here, clamped so the
+               last throw lands with stillness left before the cut
+    OUT_BASE = 0.45s  only when exit is fade or up
+    If D < IN_BASE + OUT_BASE, IN and OUT compress together. The advance
+    rhythm re-spaces itself from whatever hold remains.
+
+  Mount contract: the runtime clones only this template. #root fills the
+  host box (no data-width/data-height, container-type: size, cq units), is
+  styled via #root only, and registers one paused timeline under the LITERAL
+  "screen-flow-carousel" key. Rail position is CSS-owned through the numeric
+  --sfc-pos custom property; GSAP tweens only that number plus
+  per-screen scale/opacity with explicit endpoints, so any seek order lands
+  identical frames.
+-->
+<html
+  lang="en"
+  data-composition-id="screen-flow-carousel"
+  data-composition-duration="5"
+  data-composition-variables='[
+    { "id": "screens", "type": "number", "role": "content", "label": "Screens", "description": "How many screens ride the rail.", "default": 3, "min": 2, "max": 5, "step": 1 },
+    { "id": "captions", "type": "string", "role": "content", "label": "Captions", "description": "Comma-separated caption per screen. Blank entries use the authored defaults.", "default": "" },
+    { "id": "cues", "type": "string", "role": "timing", "label": "Cues", "description": "Comma-separated advance times in seconds from mount start. Blank entries use the authored even rhythm.", "default": "" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Token the active ring, caption dot, and skeleton accents ride.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the final screen holds until the cut.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Screen Flow Carousel</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="screen-flow-carousel" data-duration="5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            --sfc-w: 44;
+            --sfc-gap: 4;
+            --sfc-pos: 0;
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, ui-sans-serif, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .sfc-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .sfc-stage {
+            position: absolute;
+            inset: 0;
+            will-change: transform, opacity;
+          }
+
+          /* The rail: one flex row, position owned by the numeric custom
+             property --sfc-pos (fractional index of the centered screen).
+             GSAP tweens that number; CSS does all the geometry in cqw. */
+          .sfc-rail {
+            position: absolute;
+            top: 9cqh;
+            left: 0;
+            display: flex;
+            align-items: stretch;
+            gap: calc(var(--sfc-gap) * 1cqw);
+            width: max-content;
+            height: 64cqh;
+            transform: translateX(
+              calc(
+                (50 - var(--sfc-w) / 2 - var(--sfc-pos) * (var(--sfc-w) + var(--sfc-gap))) * 1cqw
+              )
+            );
+            will-change: transform;
+          }
+
+          .sfc-screen {
+            position: relative;
+            flex: 0 0 calc(var(--sfc-w) * 1cqw);
+            overflow: hidden;
+            border: 0.16cqmin solid color-mix(in srgb, var(--border, #475569) 70%, transparent);
+            border-radius: var(--radius, 2.4cqmin);
+            background: color-mix(in srgb, var(--surface, #0f141b) 94%, var(--bg, #05070c));
+            box-shadow: 0 2.6cqh 7cqh color-mix(in srgb, var(--bg, #000000) 42%, transparent);
+            transform-origin: 50% 50%;
+            will-change: transform, opacity;
+          }
+
+          .sfc-body {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+          }
+
+          .sfc-body > img,
+          .sfc-body > video {
+            display: block;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+          }
+
+          /* Active ring: opacity-only accent border so no var() color is
+             ever GSAP-tweened. */
+          .sfc-ring {
+            position: absolute;
+            inset: 0;
+            z-index: 2;
+            border: 0.24cqmin solid color-mix(in srgb, var(--sfc-accent) 78%, transparent);
+            border-radius: inherit;
+            opacity: 0;
+            pointer-events: none;
+          }
+
+          /* Caption band: absolutely stacked mono captions, one visible. */
+          .sfc-captions {
+            position: absolute;
+            top: 78cqh;
+            left: 10cqw;
+            right: 10cqw;
+            height: 12cqh;
+          }
+
+          .sfc-caption {
+            position: absolute;
+            inset: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: var(--space-1, 1.4cqmin);
+            overflow: hidden;
+            color: var(--muted, #8b93a3);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            font-size: 2.7cqmin;
+            font-weight: 500;
+            letter-spacing: 0.12em;
+            white-space: nowrap;
+            will-change: transform, opacity;
+          }
+
+          .sfc-caption::before {
+            content: "";
+            flex: 0 0 auto;
+            width: 1.1cqmin;
+            height: 1.1cqmin;
+            border-radius: 50%;
+            background: var(--sfc-accent);
+          }
+
+          /* Skeleton furniture: pure token surfaces, no branding, weights
+             stay in the register (blocks, no bold type). */
+          .sfc-skel {
+            position: absolute;
+            inset: 0;
+            display: flex;
+            flex-direction: column;
+            gap: var(--space-2, 2cqmin);
+            padding: var(--space-3, 2.8cqmin);
+          }
+
+          .sfc-skel-heading {
+            flex: 0 0 auto;
+            width: 38%;
+            height: 2.3cqmin;
+            border-radius: 999px;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 22%, transparent);
+          }
+
+          .sfc-skel-line {
+            flex: 0 0 auto;
+            height: 1.2cqmin;
+            border-radius: 999px;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 11%, transparent);
+          }
+
+          .sfc-skel-row {
+            display: flex;
+            flex: 0 0 auto;
+            align-items: center;
+            gap: var(--space-1, 1.6cqmin);
+          }
+
+          .sfc-skel-row .sfc-skel-line {
+            flex: 1 1 auto;
+          }
+
+          .sfc-skel-dot {
+            flex: 0 0 auto;
+            width: 1.7cqmin;
+            height: 1.7cqmin;
+            border-radius: 50%;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 16%, transparent);
+          }
+
+          .sfc-skel-row:first-of-type .sfc-skel-dot {
+            background: color-mix(in srgb, var(--sfc-accent) 78%, transparent);
+          }
+
+          .sfc-skel-grid {
+            display: grid;
+            flex: 1;
+            grid-template-columns: repeat(2, minmax(0, 1fr));
+            gap: var(--space-2, 2cqmin);
+            min-height: 0;
+          }
+
+          .sfc-skel-card {
+            display: flex;
+            flex-direction: column;
+            gap: 1.4cqmin;
+            min-height: 0;
+            padding: 2cqmin;
+            border: 0.14cqmin solid color-mix(in srgb, var(--border, #475569) 60%, transparent);
+            border-radius: calc(var(--radius, 2cqmin) * 0.7);
+            background: color-mix(in srgb, var(--bg, #05070c) 30%, transparent);
+          }
+
+          .sfc-skel-card .sfc-skel-line {
+            width: 60%;
+          }
+
+          .sfc-skel-block {
+            flex: 1;
+            min-height: 2.6cqmin;
+            border-radius: calc(var(--radius, 2cqmin) * 0.5);
+            background: color-mix(in srgb, var(--fg, #f8fafc) 7%, transparent);
+          }
+
+          .sfc-skel-card:first-child .sfc-skel-block {
+            background: color-mix(in srgb, var(--sfc-accent) 17%, transparent);
+          }
+
+          .sfc-skel-bars {
+            display: flex;
+            flex: 1;
+            align-items: flex-end;
+            gap: var(--space-2, 2cqmin);
+            min-height: 0;
+            padding-top: 1cqmin;
+          }
+
+          .sfc-skel-bar {
+            flex: 1;
+            border-radius: 0.8cqmin 0.8cqmin 0 0;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 13%, transparent);
+          }
+
+          .sfc-skel-bar.sfc-skel-accent {
+            background: color-mix(in srgb, var(--sfc-accent) 62%, transparent);
+          }
+
+          .sfc-skel-chip {
+            flex: 0 0 auto;
+            width: 11cqmin;
+            height: 2.6cqmin;
+            border: 0.14cqmin solid color-mix(in srgb, var(--sfc-accent) 55%, transparent);
+            border-radius: 999px;
+            background: color-mix(in srgb, var(--sfc-accent) 24%, transparent);
+          }
+        </style>
+
+        <div
+          id="screen-flow-carousel-clip"
+          class="sfc-clip clip"
+          data-start="0"
+          data-duration="5"
+          data-track-index="0"
+        >
+          <div class="sfc-stage">
+            <div class="sfc-rail" role="list" aria-label="App screens"></div>
+            <div class="sfc-captions" aria-hidden="true"></div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".sfc-stage");
+            var rail = root.querySelector(".sfc-rail");
+            var captionsBand = root.querySelector(".sfc-captions");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var screensValue = Number(vars.screens);
+            var count = Number.isFinite(screensValue)
+              ? Math.max(2, Math.min(5, Math.round(screensValue)))
+              : 3;
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exitMode = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+            root.style.setProperty("--sfc-accent", accentColors[accent]);
+
+            var captionDefaults = ["Overview", "Details", "Insights", "Activity", "Settings"];
+            var captionList = String(vars.captions == null ? "" : vars.captions).split(",");
+
+            // SLOTS. Caller templates live at HOST DOCUMENT level (the mount
+            // wipes host-clip children, and templates never render). The
+            // scoped `document` proxy filters queries to this composition's
+            // subtree, so the lookup deliberately goes through ownerDocument.
+            var hostDoc = root.ownerDocument;
+            function slotContent(name) {
+              var tpl = null;
+              try {
+                tpl = hostDoc.querySelector(
+                  'template[data-slot="screen-flow-carousel-' + name + '"]',
+                );
+              } catch (error) {
+                tpl = null;
+              }
+              return tpl ? hostDoc.importNode(tpl.content, true) : null;
+            }
+
+            // Skeleton defaults cycle four variants so adjacent screens read
+            // as different app states. Pure token furniture, no branding.
+            var lines = function (widths) {
+              return widths
+                .map(function (width) {
+                  return '<span class="sfc-skel-line" style="width:' + width + '"></span>';
+                })
+                .join("");
+            };
+            var listRows = ["86%", "72%", "80%", "64%", "76%", "58%"]
+              .map(function (width) {
+                return (
+                  '<span class="sfc-skel-row"><span class="sfc-skel-dot"></span>' +
+                  '<span class="sfc-skel-line" style="max-width:' +
+                  width +
+                  '"></span></span>'
+                );
+              })
+              .join("");
+            var card =
+              '<span class="sfc-skel-card"><span class="sfc-skel-line"></span><span class="sfc-skel-block"></span></span>';
+            var bars = ["34%", "58%", "42%", "76%", "50%", "64%"]
+              .map(function (height, index) {
+                return (
+                  '<span class="sfc-skel-bar' +
+                  (index === 3 ? " sfc-skel-accent" : "") +
+                  '" style="height:' +
+                  height +
+                  '"></span>'
+                );
+              })
+              .join("");
+            var skeletons = [
+              '<div class="sfc-skel"><span class="sfc-skel-heading"></span>' +
+                listRows +
+                '<span class="sfc-skel-block"></span></div>',
+              '<div class="sfc-skel"><span class="sfc-skel-heading"></span><span class="sfc-skel-grid">' +
+                card +
+                card +
+                card +
+                card +
+                "</span></div>",
+              '<div class="sfc-skel"><span class="sfc-skel-heading"></span><span class="sfc-skel-bars">' +
+                bars +
+                "</span>" +
+                lines(["46%"]) +
+                "</div>",
+              '<div class="sfc-skel"><span class="sfc-skel-chip"></span><span class="sfc-skel-heading" style="width:56%"></span>' +
+                lines(["84%", "72%", "64%"]) +
+                '<span class="sfc-skel-block"></span></div>',
+            ];
+
+            var screens = [];
+            var rings = [];
+            var captions = [];
+            for (var i = 0; i < count; i += 1) {
+              var screen = hostDoc.createElement("article");
+              screen.className = "sfc-screen";
+              screen.setAttribute("role", "listitem");
+              var body = hostDoc.createElement("div");
+              body.className = "sfc-body";
+              var slot = slotContent("screen-" + (i + 1));
+              if (slot) {
+                body.appendChild(slot);
+              } else {
+                body.innerHTML = skeletons[i % skeletons.length];
+              }
+              var ring = hostDoc.createElement("span");
+              ring.className = "sfc-ring";
+              screen.appendChild(body);
+              screen.appendChild(ring);
+              rail.appendChild(screen);
+              screens.push(screen);
+              rings.push(ring);
+
+              var caption = hostDoc.createElement("span");
+              caption.className = "sfc-caption";
+              var captionText = (captionList[i] || "").trim();
+              caption.textContent = captionText !== "" ? captionText : captionDefaults[i];
+              captionsBand.appendChild(caption);
+              captions.push(caption);
+            }
+            screens[0].setAttribute("aria-current", "true");
+
+            // Envelope: fixed IN/OUT, elastic HOLD, never time-scaled. All
+            // advances live inside the hold; spacing re-derives from whatever
+            // hold the host duration leaves so throws can never overlap.
+            var IN_BASE = 0.9;
+            var OUT_BASE = exitMode === "none" ? 0 : 0.45;
+            var ADV_BASE = 0.84;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "5"));
+            var totalBase = IN_BASE + OUT_BASE;
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var OUT_START = duration - OUT;
+            var advanceCount = count - 1;
+            var TAIL = Math.min(0.4, Math.max(0, duration - IN - OUT) * 0.12);
+            var span = Math.max(0.05, duration - IN - OUT - TAIL);
+            var spacing = span / (advanceCount + 1);
+            var ADV = Math.min(ADV_BASE, spacing);
+            var latest = Math.max(IN, duration - OUT - ADV - 0.05);
+
+            var cueList = String(vars.cues == null ? "" : vars.cues).split(",");
+            var starts = [];
+            for (var k = 0; k < advanceCount; k += 1) {
+              var raw = (cueList[k] || "").trim();
+              var cue = Number(raw);
+              var wanted = raw !== "" && Number.isFinite(cue) ? cue : IN + (k + 1) * spacing;
+              var lower = k === 0 ? IN : starts[k - 1] + ADV;
+              var upper = Math.max(lower, latest - (advanceCount - 1 - k) * ADV);
+              starts.push(Math.min(Math.max(wanted, lower), upper));
+            }
+
+            // Explicit both-endpoint state so a seek to t=0 is always correct.
+            gsap.set(stage, { opacity: 0, y: "4cqh" });
+            gsap.set(rail, { "--sfc-pos": 0 });
+            screens.forEach(function (element, index) {
+              gsap.set(
+                element,
+                index === 0 ? { scale: 1, opacity: 1 } : { scale: 0.94, opacity: 0.62 },
+              );
+            });
+            rings.forEach(function (element, index) {
+              gsap.set(element, { opacity: index === 0 ? 1 : 0 });
+            });
+            captions.forEach(function (element, index) {
+              gsap.set(
+                element,
+                index === 0 ? { opacity: 1, y: "0cqh" } : { opacity: 0, y: "1.2cqh" },
+              );
+            });
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: one stage settle, screen 1 already primary.
+            tl.to(stage, { opacity: 1, duration: IN * 0.7, ease: "power2.out" }, 0);
+            tl.to(stage, { y: "0cqh", duration: IN, ease: "power3.out" }, 0);
+
+            // Advances: the softened throw law. Fast travel sheds most of its
+            // velocity under the whip-out ease, then a smooth long-tail catch
+            // lands the exact next center. No overshoot, no back ease.
+            var THROW_PART = 0.42;
+            starts.forEach(function (at, index) {
+              var target = index + 1;
+              var THROW = ADV * THROW_PART;
+              var CATCH = ADV - THROW;
+              tl.to(rail, { "--sfc-pos": target - 0.14, duration: THROW, ease: "power4.out" }, at);
+              tl.to(rail, { "--sfc-pos": target, duration: CATCH, ease: "power2.out" }, at + THROW);
+
+              tl.to(
+                screens[index],
+                { scale: 0.94, opacity: 0.62, duration: ADV, ease: "power2.out" },
+                at,
+              );
+              tl.to(
+                screens[target],
+                { scale: 1, opacity: 1, duration: ADV, ease: "power2.out" },
+                at,
+              );
+              tl.to(rings[index], { opacity: 0, duration: ADV * 0.5, ease: "power1.out" }, at);
+              tl.to(
+                rings[target],
+                { opacity: 1, duration: ADV * 0.6, ease: "power2.out" },
+                at + ADV * 0.4,
+              );
+
+              tl.to(
+                captions[index],
+                { opacity: 0, y: "-1.2cqh", duration: ADV * 0.4, ease: "power1.in" },
+                at,
+              );
+              tl.fromTo(
+                captions[target],
+                { opacity: 0, y: "1.2cqh" },
+                { opacity: 1, y: "0cqh", duration: ADV * 0.55, ease: "power2.out" },
+                at + ADV * 0.35,
+              );
+              tl.set(screens[index], { attr: { "aria-current": "false" } }, at);
+              tl.set(screens[target], { attr: { "aria-current": "true" } }, at);
+            });
+
+            // OUT: only when exit != none; the default holds the last frame.
+            if (exitMode !== "none") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+              if (exitMode === "up") {
+                tl.to(stage, { y: "-4cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              }
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["screen-flow-carousel"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/scroll-camera-story/README.md b/docs/public/catalog/components/scroll-camera-story/README.md
new file mode 100644
index 0000000000..f4e45ec440
--- /dev/null
+++ b/docs/public/catalog/components/scroll-camera-story/README.md
@@ -0,0 +1,50 @@
+# scroll-camera-story
+
+A compressed forced-scroll cinematic pass. A tall authored scene (four depth layers: far washes, mid hairline geometry, content sections, foreground accent motes) travels past the camera top to bottom. Layers move at different rates (far slowest, foreground fastest), each section rises softly as the camera reaches it, and the pass decelerates into a held final section that is byte-still.
+
+5.5s authored, elastic HOLD, exit `none` by default. Camera-servo law: one plain state object, one `applyCamera()` writer, micro-drift built from integer sine cycles that end at exactly zero when the final section lands. No cq units inside tweens (world height is set once at mount; all tweened transforms are percent-based).
+
+## Variables
+
+| id         | type   | default | notes                                                                                                                                                                                                                    |
+| ---------- | ------ | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `sections` | number | `3`     | Skeleton section count, 2 to 4. A sections slot overrides it with its own child count.                                                                                                                                   |
+| `travel`   | number | `220`   | Total camera travel in cqh. The world is `100 + travel` cqh tall; sections spread evenly along the travel.                                                                                                               |
+| `cues`     | string | `""`    | Comma-separated seconds: arrival times for the sections AFTER the first (the first is on screen at mount). A list with one extra leading value drops it as the mount section's. Empty keeps the authored default rhythm. |
+| `accent`   | enum   | `green` | green rides `--brand`, blue rides `--accent`, violet rides `--accent-2`.                                                                                                                                                 |
+| `exit`     | enum   | `none`  | `none` holds the final section until the cut; `fade`; `up`.                                                                                                                                                              |
+
+## Sections slot
+
+Place an inert template at HOST document level; each direct child becomes one section's card content, in order (clamped to 2 to 4 sections; sections without a slot child keep their token skeleton default, and the card shell stays so slot content inherits the token chrome):
+
+```html
+<template data-slot="scroll-camera-story-sections">
+  <div>first section content</div>
+  <div>second section content</div>
+  <div>third section content</div>
+</template>
+```
+
+## Mount
+
+```html
+<div
+  class="clip"
+  data-composition-id="scroll-camera-story"
+  data-composition-src="./scroll-camera-story.html"
+  data-variable-values='{"sections":4,"travel":300,"cues":"1.7,2.9,4.0","accent":"blue"}'
+  data-start="0"
+  data-duration="5.5"
+  data-track-index="0"
+></div>
+```
+
+Elastic root: no `data-width`/`data-height`; it fills whatever box the host clip gives it. Timeline registers under the literal `scroll-camera-story` key.
+
+## Notes
+
+- Camera segments never overlap (each move starts after the previous ends), so seeks in any order reproduce the exact frame; the quiet register is the only register (Wave K L2).
+- Keep `travel` near `100 x (sections - 1)` cqh for a continuous pass; much larger spacing gives decor-only interstitials between sections (the depth layers keep those frames alive, but no card is on screen).
+- Longer host durations stretch the final hold only; the default arrival rhythm scales from the mount duration, explicit `cues` are absolute seconds.
+- The hold is truly still: camera, drift, and the last section rise all end on the final arrival cue.
diff --git a/docs/public/catalog/components/scroll-camera-story/demo.html b/docs/public/catalog/components/scroll-camera-story/demo.html
new file mode 100644
index 0000000000..f5fe093de4
--- /dev/null
+++ b/docs/public/catalog/components/scroll-camera-story/demo.html
@@ -0,0 +1,99 @@
+<!doctype html>
+<!--
+  scroll-camera-story demo. This standalone composition mounts the primitive
+  FULL-BLEED on a light token theme through data-composition-src. Non-default
+  sections, travel, cues, and accent values prove the variable path while the
+  primitive remains elastic to its host.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>scroll-camera-story Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #f2f4f7);
+      }
+
+      #root {
+        --bg: #f2f4f7;
+        --fg: #12161d;
+        --muted: #5b6472;
+        --surface: #ffffff;
+        --border: #d4d9e2;
+        --brand: #0e9f5a;
+        --accent: #2f6bff;
+        --accent-2: #7a4ddb;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #f2f4f7);
+      }
+
+      .mount-stage {
+        position: absolute;
+        inset: 0;
+        container-type: size;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="scroll-camera-story-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5.5"
+      data-fps="30"
+    >
+      <div
+        id="scroll-camera-story-mount"
+        class="mount-stage clip"
+        data-composition-id="scroll-camera-story"
+        data-composition-src="./scroll-camera-story.html"
+        data-variable-values='{"sections":4,"travel":300,"cues":"1.7,2.9,4.0","accent":"blue"}'
+        data-start="0"
+        data-duration="5.5"
+        data-track-index="0"
+        data-width="1920"
+        data-height="1080"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["scroll-camera-story-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "scroll-camera-story.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/scroll-camera-story/scroll-camera-story.html b/docs/public/catalog/components/scroll-camera-story/scroll-camera-story.html
new file mode 100644
index 0000000000..04b1417b1d
--- /dev/null
+++ b/docs/public/catalog/components/scroll-camera-story/scroll-camera-story.html
@@ -0,0 +1,805 @@
+<!doctype html>
+<!--
+  scroll-camera-story -- HyperFrames video primitive (camera)
+
+  A compressed forced-scroll cinematic pass: a tall authored scene travels
+  past the camera top to bottom. Four depth layers move at different rates
+  (far slowest, foreground fastest), sections enter with a soft rise as the
+  camera reaches them, and the pass decelerates into a held final section.
+
+  Camera-servo law: all camera state lives in ONE plain object (cam.t, the
+  pass progress 0 to 1) plus a drift object, and every layer transform is a
+  pure function of that state written by one applyCamera() writer. The world
+  wrapper carries the camera translate; depth layers carry derived parallax
+  offsets computed in the same writer, so any seek in any order reproduces
+  the exact frame. Micro-drift runs INTEGER sine cycles (2 on x-phase, 3 on
+  y-phase) that end at exactly zero when the final section lands, so the
+  held final section is byte-still.
+
+  Seek-safety trap (banked): cq-unit transform tweens blow up under seeks.
+  Nothing here tweens a cq unit. The world height is set ONCE at mount in
+  cqh; every tweened transform is percent-based (translate percent of the
+  element's own box, gsap yPercent on section cards) derived from plain
+  numbers, so no container-query re-resolution ever happens inside a tween.
+
+  Sections are SLOTS. Callers supply content by placing an inert template
+  at HOST DOCUMENT level (templates never render, and the runtime wipes the
+  host clip's own children on mount):
+
+    <template data-slot="scroll-camera-story-sections">
+      <div>first section content</div>
+      <div>second section content</div>
+    </template>
+
+  Each direct child of the template becomes one section's card content, in
+  order (clamped to 2-4 sections). Sections without a slot child keep their
+  token skeleton default. Without a slot, the `sections` variable picks how
+  many skeleton sections ride the pass.
+
+  Variables (declared in data-composition-variables below):
+    - sections (number 2-4, default 3): skeleton section count; a sections
+      slot overrides it with its own child count.
+    - travel (number cqh, default 220): total camera travel. The world is
+      (100 + travel) cqh tall; sections spread evenly along the travel.
+    - cues (string, default ""): comma-separated seconds, arrival times for
+      the sections AFTER the first (the first section is on screen at
+      mount). Empty keeps the authored default rhythm. If one extra value
+      is supplied, the first is treated as the mount section's and dropped.
+    - accent ("green" | "blue" | "violet", default "green"): green rides
+      --brand, blue rides --accent, violet rides --accent-2.
+    - exit ("none" | "fade" | "up", default "none"): frame roots own
+      transitions; the default holds the final section to the last pixel.
+
+  Envelope, fixed IN and OUT with elastic HOLD only (never timeScale):
+    IN_BASE  = 0.85s  stage fade + first section rise
+    PASS     = camera moves ending on each arrival cue, quiet register
+               (power2.inOut, longer final move: the pass decelerates)
+    HOLD     = elastic; drift ends at zero on the last arrival, then the
+               held final section is dead still
+    OUT_BASE = 0.50s  only when exit != none
+    If D is too short the fixed phases compress together.
+
+  Wave K laws: L1, camera segments never overlap (each move starts after
+  the previous ends, so no mid-motion redirect exists to snap velocity);
+  L2, the quiet register is the only register here, no percussive variant.
+
+  Mount contract: the runtime clones only this template. #root fills the
+  host box (no data-width/data-height, container-type: size, cq units in
+  static styles only), is styled via #root only, and registers one paused
+  timeline under the LITERAL "scroll-camera-story" key.
+-->
+<html
+  lang="en"
+  data-composition-id="scroll-camera-story"
+  data-composition-duration="5.5"
+  data-composition-variables='[
+    { "id": "sections", "type": "number", "role": "content", "label": "Sections", "description": "How many skeleton sections ride the pass. A sections slot overrides this with its own child count.", "default": 3, "min": 2, "max": 4, "step": 1 },
+    { "id": "travel", "type": "number", "role": "content", "label": "Travel", "description": "Total camera travel in cqh. The world is 100 + travel cqh tall.", "default": 220, "min": 100, "max": 400, "step": 10, "unit": "cqh" },
+    { "id": "cues", "type": "string", "role": "timing", "label": "Cues", "description": "Comma-separated seconds: arrival times for the sections after the first. Empty keeps the authored default rhythm.", "default": "" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Token the skeleton accents and foreground motes ride.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "style", "label": "Exit", "description": "Optional departure. None holds the final section.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Scroll Camera Story</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="scroll-camera-story" data-duration="5.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, ui-sans-serif, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .scs-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .scs-stage {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            background:
+              radial-gradient(
+                ellipse 120% 70% at 50% 0%,
+                color-mix(in srgb, var(--scs-accent) 6%, transparent) 0%,
+                transparent 60%
+              ),
+              var(--bg, #0b0c0e);
+            will-change: transform, opacity;
+          }
+
+          /* ONE world wrapper: the camera translate lives here; depth layers
+             below carry derived parallax offsets from the same writer. */
+          .scs-world {
+            position: absolute;
+            top: 0;
+            right: 0;
+            left: 0;
+            will-change: transform;
+          }
+
+          .scs-layer {
+            position: absolute;
+            inset: 0;
+            will-change: transform;
+          }
+
+          /* far layer: large soft washes, slowest */
+          .scs-blob {
+            position: absolute;
+            width: 64cqmin;
+            height: 64cqmin;
+            border-radius: 50%;
+            background: radial-gradient(
+              circle,
+              color-mix(in srgb, var(--scs-accent) 11%, transparent) 0%,
+              color-mix(in srgb, var(--scs-accent) 5%, transparent) 45%,
+              transparent 70%
+            );
+          }
+
+          .scs-blob:nth-child(1) {
+            top: 2%;
+            left: -14cqmin;
+          }
+
+          .scs-blob:nth-child(2) {
+            top: 17%;
+            right: -18cqmin;
+            width: 78cqmin;
+            height: 78cqmin;
+            background: radial-gradient(
+              circle,
+              color-mix(in srgb, var(--fg, #f8fafc) 6%, transparent) 0%,
+              color-mix(in srgb, var(--fg, #f8fafc) 3%, transparent) 45%,
+              transparent 70%
+            );
+          }
+
+          .scs-blob:nth-child(3) {
+            top: 34%;
+            left: 6cqw;
+          }
+
+          .scs-blob:nth-child(4) {
+            top: 48%;
+            right: 2cqw;
+            width: 56cqmin;
+            height: 56cqmin;
+          }
+
+          /* mid layer: hairline geometry */
+          .scs-ring {
+            position: absolute;
+            width: 16cqmin;
+            height: 16cqmin;
+            border: 0.16cqmin solid color-mix(in srgb, var(--fg, #f8fafc) 12%, transparent);
+            border-radius: 50%;
+          }
+
+          .scs-rule {
+            position: absolute;
+            width: 12cqmin;
+            height: 0.16cqmin;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 14%, transparent);
+          }
+
+          .scs-plus {
+            position: absolute;
+            width: 3.4cqmin;
+            height: 3.4cqmin;
+          }
+
+          .scs-plus::before,
+          .scs-plus::after {
+            position: absolute;
+            content: "";
+            background: color-mix(in srgb, var(--fg, #f8fafc) 18%, transparent);
+          }
+
+          .scs-plus::before {
+            top: 0;
+            bottom: 0;
+            left: calc(50% - 0.08cqmin);
+            width: 0.16cqmin;
+          }
+
+          .scs-plus::after {
+            top: calc(50% - 0.08cqmin);
+            right: 0;
+            left: 0;
+            height: 0.16cqmin;
+          }
+
+          .scs-ring:nth-of-type(1) {
+            top: 6%;
+            right: 12cqw;
+          }
+
+          .scs-ring:nth-of-type(2) {
+            top: 30%;
+            left: 9cqw;
+            width: 10cqmin;
+            height: 10cqmin;
+          }
+
+          .scs-ring:nth-of-type(3) {
+            top: 52%;
+            right: 8cqw;
+            width: 22cqmin;
+            height: 22cqmin;
+            border-color: color-mix(in srgb, var(--fg, #f8fafc) 8%, transparent);
+          }
+
+          .scs-rule:nth-of-type(1) {
+            top: 14%;
+            left: 12cqw;
+            transform: rotate(90deg);
+          }
+
+          .scs-rule:nth-of-type(2) {
+            top: 40%;
+            right: 16cqw;
+          }
+
+          .scs-plus:nth-of-type(1) {
+            top: 22%;
+            right: 22cqw;
+          }
+
+          .scs-plus:nth-of-type(2) {
+            top: 47%;
+            left: 18cqw;
+          }
+
+          .scs-plus:nth-of-type(3) {
+            top: 9%;
+            left: 30cqw;
+          }
+
+          /* foreground layer: small accent motes, fastest */
+          .scs-mote {
+            position: absolute;
+            width: 1cqmin;
+            height: 1cqmin;
+            border-radius: 50%;
+            background: color-mix(in srgb, var(--scs-accent) 55%, transparent);
+          }
+
+          .scs-mote:nth-child(1) {
+            top: 7%;
+            left: 8cqw;
+          }
+
+          .scs-mote:nth-child(2) {
+            top: 21%;
+            right: 10cqw;
+            width: 0.7cqmin;
+            height: 0.7cqmin;
+          }
+
+          .scs-mote:nth-child(3) {
+            top: 43%;
+            left: 6cqw;
+            width: 1.3cqmin;
+            height: 1.3cqmin;
+            background: color-mix(in srgb, var(--scs-accent) 40%, transparent);
+          }
+
+          .scs-mote:nth-child(4) {
+            top: 66%;
+            right: 7cqw;
+          }
+
+          .scs-mote:nth-child(5) {
+            top: 88%;
+            left: 4cqw;
+            width: 0.8cqmin;
+            height: 0.8cqmin;
+          }
+
+          /* sections: a static positioner zone per section, a rising card in it */
+          .scs-section {
+            position: absolute;
+            right: 10cqw;
+            left: 10cqw;
+            display: grid;
+            place-items: center;
+            height: 84cqh;
+          }
+
+          .scs-card {
+            display: flex;
+            flex-direction: column;
+            gap: var(--space-2, 2.2cqmin);
+            width: min(64cqw, 150cqh);
+            max-height: 76cqh;
+            padding: var(--space-3, 3.4cqmin);
+            overflow: hidden;
+            border: 0.16cqmin solid color-mix(in srgb, var(--border, #475569) 70%, transparent);
+            border-radius: var(--radius, 2cqmin);
+            background: color-mix(in srgb, var(--surface, #0b1016) 88%, var(--bg, #05070c));
+            box-shadow: 0 2.4cqh 7cqh color-mix(in srgb, var(--bg, #000000) 34%, transparent);
+            will-change: transform, opacity;
+          }
+
+          .scs-chiprow {
+            display: flex;
+            align-items: center;
+            gap: var(--space-1, 1.6cqmin);
+          }
+
+          .scs-chip {
+            padding: 0.7cqmin 1.5cqmin;
+            border: 0.14cqmin solid color-mix(in srgb, var(--scs-accent) 45%, transparent);
+            border-radius: 999px;
+            color: color-mix(in srgb, var(--scs-accent) 80%, var(--fg, #f8fafc));
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            font-size: 2cqmin;
+            font-weight: 600;
+            letter-spacing: 0.14em;
+            line-height: 1;
+          }
+
+          .scs-chiprule {
+            flex: 1;
+            height: 0.14cqmin;
+            background: color-mix(in srgb, var(--border, #475569) 60%, transparent);
+          }
+
+          .scs-bar {
+            height: 1.4cqmin;
+            border-radius: 999px;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 12%, transparent);
+          }
+
+          .scs-bar.scs-heading {
+            width: 62%;
+            height: 3.4cqmin;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 24%, transparent);
+          }
+
+          .scs-bar.scs-sub {
+            width: 44%;
+          }
+
+          .scs-minis {
+            display: grid;
+            grid-template-columns: repeat(3, minmax(0, 1fr));
+            gap: 2cqmin;
+            margin-top: 0.6cqmin;
+          }
+
+          .scs-mini {
+            display: flex;
+            flex-direction: column;
+            gap: 1.4cqmin;
+            padding: 2cqmin;
+            border: 0.14cqmin solid color-mix(in srgb, var(--border, #475569) 55%, transparent);
+            border-radius: calc(var(--radius, 2cqmin) * 0.7);
+            background: color-mix(in srgb, var(--bg, #05070c) 32%, transparent);
+          }
+
+          .scs-mini .scs-bar {
+            width: 62%;
+          }
+
+          .scs-mini-block {
+            height: 7cqmin;
+            border-radius: calc(var(--radius, 2cqmin) * 0.5);
+            background: color-mix(in srgb, var(--fg, #f8fafc) 7%, transparent);
+          }
+
+          .scs-mini:nth-child(2) .scs-mini-block {
+            background: color-mix(in srgb, var(--scs-accent) 18%, transparent);
+          }
+
+          .scs-rowline {
+            display: flex;
+            align-items: center;
+            gap: var(--space-1, 1.6cqmin);
+          }
+
+          .scs-dot {
+            flex: 0 0 auto;
+            width: 1.5cqmin;
+            height: 1.5cqmin;
+            border-radius: 50%;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 22%, transparent);
+          }
+
+          .scs-rowline:nth-of-type(2) .scs-dot {
+            background: color-mix(in srgb, var(--scs-accent) 70%, transparent);
+          }
+
+          .scs-rowline .scs-bar {
+            flex: 1;
+            max-width: 72%;
+          }
+
+          .scs-section[data-close] .scs-card {
+            align-items: center;
+            text-align: center;
+          }
+
+          .scs-section[data-close] .scs-bar.scs-heading {
+            width: 52%;
+          }
+
+          .scs-section[data-close] .scs-bar.scs-sub {
+            width: 34%;
+          }
+
+          .scs-pill {
+            margin-top: 1.2cqmin;
+            padding: 1.4cqmin 3.4cqmin;
+            border-radius: 999px;
+            background: color-mix(in srgb, var(--scs-accent) 82%, var(--surface, #0b1016));
+            color: var(--bg, #0b0c0e);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            font-size: 2.1cqmin;
+            font-weight: 600;
+            letter-spacing: 0.12em;
+            line-height: 1;
+          }
+        </style>
+
+        <div
+          id="scroll-camera-story-clip"
+          class="scs-clip clip"
+          data-start="0"
+          data-duration="5.5"
+          data-track-index="0"
+        >
+          <div class="scs-stage" role="img" aria-label="Cinematic scroll pass over a tall scene">
+            <div class="scs-world">
+              <div class="scs-layer scs-far" aria-hidden="true">
+                <span class="scs-blob"></span>
+                <span class="scs-blob"></span>
+                <span class="scs-blob"></span>
+                <span class="scs-blob"></span>
+              </div>
+              <div class="scs-layer scs-mid" aria-hidden="true">
+                <span class="scs-ring"></span>
+                <span class="scs-ring"></span>
+                <span class="scs-ring"></span>
+                <span class="scs-rule"></span>
+                <span class="scs-rule"></span>
+                <span class="scs-plus"></span>
+                <span class="scs-plus"></span>
+                <span class="scs-plus"></span>
+              </div>
+              <div class="scs-layer scs-content">
+                <div class="scs-section" aria-hidden="true">
+                  <div class="scs-card">
+                    <div class="scs-chiprow">
+                      <span class="scs-chip">01</span>
+                      <span class="scs-chiprule"></span>
+                    </div>
+                    <span class="scs-bar scs-heading"></span>
+                    <span class="scs-bar" style="width: 74%"></span>
+                    <span class="scs-bar scs-sub"></span>
+                  </div>
+                </div>
+                <div class="scs-section" aria-hidden="true">
+                  <div class="scs-card">
+                    <div class="scs-chiprow">
+                      <span class="scs-chip">02</span>
+                      <span class="scs-chiprule"></span>
+                    </div>
+                    <span class="scs-bar scs-heading" style="width: 46%"></span>
+                    <div class="scs-minis">
+                      <div class="scs-mini">
+                        <span class="scs-bar"></span>
+                        <span class="scs-mini-block"></span>
+                      </div>
+                      <div class="scs-mini">
+                        <span class="scs-bar"></span>
+                        <span class="scs-mini-block"></span>
+                      </div>
+                      <div class="scs-mini">
+                        <span class="scs-bar"></span>
+                        <span class="scs-mini-block"></span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="scs-section" aria-hidden="true">
+                  <div class="scs-card">
+                    <div class="scs-chiprow">
+                      <span class="scs-chip">03</span>
+                      <span class="scs-chiprule"></span>
+                    </div>
+                    <span class="scs-bar scs-heading" style="width: 40%"></span>
+                    <div class="scs-rowline">
+                      <span class="scs-dot"></span>
+                      <span class="scs-bar"></span>
+                    </div>
+                    <div class="scs-rowline">
+                      <span class="scs-dot"></span>
+                      <span class="scs-bar" style="max-width: 58%"></span>
+                    </div>
+                    <div class="scs-rowline">
+                      <span class="scs-dot"></span>
+                      <span class="scs-bar" style="max-width: 66%"></span>
+                    </div>
+                  </div>
+                </div>
+                <div class="scs-section" data-close aria-hidden="true">
+                  <div class="scs-card">
+                    <div class="scs-chiprow" style="align-self: stretch">
+                      <span class="scs-chip">04</span>
+                      <span class="scs-chiprule"></span>
+                    </div>
+                    <span class="scs-bar scs-heading"></span>
+                    <span class="scs-bar scs-sub"></span>
+                    <span class="scs-pill">&gt;_</span>
+                  </div>
+                </div>
+              </div>
+              <div class="scs-layer scs-fore" aria-hidden="true">
+                <span class="scs-mote"></span>
+                <span class="scs-mote"></span>
+                <span class="scs-mote"></span>
+                <span class="scs-mote"></span>
+                <span class="scs-mote"></span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".scs-stage");
+            var world = root.querySelector(".scs-world");
+            var layerFar = root.querySelector(".scs-far");
+            var layerMid = root.querySelector(".scs-mid");
+            var layerFore = root.querySelector(".scs-fore");
+            var sectionElements = Array.prototype.slice.call(root.querySelectorAll(".scs-section"));
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            function num(value, fallback, min, max) {
+              var parsed = parseFloat(value);
+              if (!isFinite(parsed)) parsed = fallback;
+              return Math.min(max, Math.max(min, parsed));
+            }
+
+            var travel = num(vars.travel, 220, 100, 400);
+            var sectionsVar = Math.round(num(vars.sections, 3, 2, 4));
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exitMode = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            root.style.setProperty("--scs-accent", accentColors[accent]);
+
+            // SLOT. Caller templates live at HOST DOCUMENT level (the mount
+            // wipes host-clip children, and templates never render). Each
+            // direct child of the slot template becomes one section's card
+            // content, in order.
+            var hostDoc = root.ownerDocument;
+            var slotChildren = [];
+            try {
+              var slotTemplate = hostDoc.querySelector(
+                'template[data-slot="scroll-camera-story-sections"]',
+              );
+              if (slotTemplate)
+                slotChildren = Array.prototype.slice.call(slotTemplate.content.children);
+            } catch (error) {
+              slotChildren = [];
+            }
+
+            var count = Math.min(4, Math.max(2, slotChildren.length || sectionsVar));
+            sectionElements.forEach(function (section, index) {
+              if (index >= count) {
+                section.remove();
+                return;
+              }
+              if (slotChildren[index]) {
+                var card = section.querySelector(".scs-card");
+                while (card.firstChild) card.removeChild(card.firstChild);
+                card.appendChild(hostDoc.importNode(slotChildren[index], true));
+              }
+            });
+            var sections = sectionElements.slice(0, count);
+            var cards = sections.map(function (section) {
+              return section.querySelector(".scs-card");
+            });
+
+            // World geometry, set ONCE at mount in cqh (static style, never
+            // tweened; the seek trap is cq units INSIDE tweens). Section i
+            // centers at camera progress i / (count - 1) along the travel.
+            world.style.height = (100 + travel).toFixed(2) + "cqh";
+            sections.forEach(function (section, index) {
+              var progress = index / (count - 1);
+              section.style.top = (50 + progress * travel - 42).toFixed(2) + "cqh";
+            });
+
+            /* ===== Camera (camera-servo law): one plain state object, one
+               writer. cam.t is the pass progress 0..1. The world translates
+               by percent of its OWN height (a pure number: travel out of
+               100 + travel), and each depth layer gets a derived parallax
+               offset so its net rate is RATE x the camera rate. No cq units
+               are ever tweened. ===== */
+            var F = (100 * travel) / (100 + travel); // percent of world height per full pass
+            var RATE_FAR = 0.35;
+            var RATE_MID = 0.65;
+            var RATE_FORE = 1.12;
+            var cam = { t: 0 };
+            var drift = { p: 0, dx: 0, dy: 0 };
+            function applyCamera() {
+              var y = -cam.t * F;
+              world.style.transform = "translate(" + drift.dx + "%, " + (y + drift.dy) + "%)";
+              layerFar.style.transform = "translateY(" + cam.t * F * (1 - RATE_FAR) + "%)";
+              layerMid.style.transform = "translateY(" + cam.t * F * (1 - RATE_MID) + "%)";
+              layerFore.style.transform = "translateY(" + cam.t * F * (1 - RATE_FORE) + "%)";
+            }
+            applyCamera();
+
+            // Envelope: fixed IN/OUT, elastic HOLD, never time-scaled.
+            var IN_BASE = 0.85;
+            var OUT_BASE = exitMode === "none" ? 0 : 0.5;
+            var PASS_MIN = 1.2;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "5.5"));
+            var totalBase = IN_BASE + PASS_MIN + OUT_BASE;
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var usable = duration - OUT;
+
+            // Arrival schedule: defaults decelerate into a held final
+            // section; the cues variable overrides arrivals for sections
+            // after the first.
+            var HOLD_MIN = Math.min(1.3, Math.max(0.45, usable * 0.24));
+            var lastDefault = Math.max(IN + 0.9 * scale, usable - HOLD_MIN);
+            var firstDefault = Math.min(lastDefault, IN + 1.15 * scale);
+            var arrivals = [];
+            var index;
+            for (index = 1; index < count; index += 1) {
+              arrivals.push(
+                count === 2
+                  ? lastDefault
+                  : firstDefault + ((index - 1) / (count - 2)) * (lastDefault - firstDefault),
+              );
+            }
+            var cueValues = String(vars.cues == null ? "" : vars.cues)
+              .split(",")
+              .map(function (part) {
+                return parseFloat(part);
+              })
+              .filter(function (value) {
+                return isFinite(value);
+              });
+            // Lenient by one: a list with an extra leading value is treated
+            // as including the mount section's arrival.
+            if (cueValues.length === count) cueValues = cueValues.slice(1);
+            if (cueValues.length >= count - 1) {
+              arrivals = cueValues.slice(0, count - 1);
+            }
+            var floor = IN + 0.35 * scale;
+            for (index = 0; index < arrivals.length; index += 1) {
+              var clamped = Math.min(usable - 0.3 * scale, Math.max(floor, arrivals[index]));
+              arrivals[index] = clamped;
+              floor = clamped + 0.4 * scale;
+            }
+            var lastArrival = arrivals.length > 0 ? arrivals[arrivals.length - 1] : IN;
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: the stage fades up while the first section rises.
+            tl.fromTo(
+              stage,
+              { opacity: 0 },
+              { opacity: 1, duration: Math.min(0.6 * scale, IN), ease: "power2.out" },
+              0,
+            );
+
+            // Section rises: each card lands exactly on its arrival cue.
+            // yPercent only (percent of the card's own box), never cq units.
+            cards.forEach(function (card, cardIndex) {
+              var arrive = cardIndex === 0 ? IN : arrivals[cardIndex - 1];
+              var rise = Math.min(
+                0.75 * scale,
+                Math.max(0.25, arrive - (cardIndex === 0 ? 0.1 : 0)),
+              );
+              tl.fromTo(
+                card,
+                { opacity: 0, yPercent: 10 },
+                { opacity: 1, yPercent: 0, duration: rise, ease: "power3.out" },
+                arrive - rise,
+              );
+            });
+
+            // Camera pass: one non-overlapping segment per arrival, quiet
+            // register (L2). Each move ends exactly on its cue; the final
+            // move runs longer, so the pass decelerates into the hold. No
+            // segment starts before the previous ends (L1: no mid-motion
+            // redirect exists to snap velocity).
+            var previousEnd = IN * 0.7;
+            arrivals.forEach(function (arrive, arriveIndex) {
+              var isLast = arriveIndex === arrivals.length - 1;
+              var gap = arrive - previousEnd - 0.1 * scale;
+              var move = Math.max(0.3, Math.min(isLast ? 1.7 : 1.25, gap));
+              tl.to(
+                cam,
+                {
+                  t: (arriveIndex + 1) / (count - 1),
+                  duration: move,
+                  ease: "power2.inOut",
+                  onUpdate: applyCamera,
+                },
+                arrive - move,
+              );
+              previousEnd = arrive;
+            });
+
+            // Micro-drift: 2 and 3 INTEGER sine cycles ending at exactly
+            // zero when the final section lands, so the held final section
+            // is byte-still and every seek reproduces the same frame.
+            if (lastArrival >= 1.2) {
+              tl.to(
+                drift,
+                {
+                  p: Math.PI * 2 * 2,
+                  duration: lastArrival,
+                  ease: "none",
+                  onUpdate: function () {
+                    drift.dx = Math.sin(drift.p) * 0.06;
+                    drift.dy = Math.sin(drift.p * 1.5) * 0.08;
+                    applyCamera();
+                  },
+                },
+                0,
+              );
+            }
+
+            // OUT: only when exit != none; the default holds the last frame.
+            if (exitMode !== "none") {
+              var outStart = duration - OUT;
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, outStart);
+              if (exitMode === "up") {
+                tl.to(stage, { yPercent: -4, duration: OUT, ease: "power2.in" }, outStart);
+              }
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["scroll-camera-story"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/scroll-feed/README.md b/docs/public/catalog/components/scroll-feed/README.md
new file mode 100644
index 0000000000..310b7fa694
--- /dev/null
+++ b/docs/public/catalog/components/scroll-feed/README.md
@@ -0,0 +1,35 @@
+# scroll-feed
+
+A self-scrolling column of skeleton post cards with two low-opacity trail copies suggesting motion blur. The default register is a doomscroll: distinct thumb flicks (fast start, power3 decay to a settle) with a read pause between them, one flick per card. Card dimensions vary through deterministic index math only. By default the column covers exactly one card cycle over the mount, so the first and final frames are loop-compatible.
+
+4s authored; HOLD owns the whole scroll and is the only elastic phase.
+
+## Variables
+
+| id           | type   | default    | notes                                                                                                                                                                                                                                                                               |
+| ------------ | ------ | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `speed`      | enum   | `doom`     | `doom` or `frantic`: card pitch, so frantic covers more distance in the same time.                                                                                                                                                                                                  |
+| `card_count` | number | `6`        | Cards per repeated cycle (4 to 10).                                                                                                                                                                                                                                                 |
+| `cues`       | string | `` (empty) | Comma-separated seconds (from mount start); each cue advances the feed by exactly one card pitch (stepped doom-scroll rhythm). Sorted ascending, capped at two full cycles of steps. Empty synthesizes evenly spaced flicks, one per card, that still cover exactly one full cycle. |
+| `exit`       | enum   | `none`     | `none` scrolls until the cut; `fade`/`up` depart over a reserved tail (min(0.4s, 15% of D)).                                                                                                                                                                                        |
+
+## Mount
+
+```html
+<div
+  class="clip"
+  data-composition-id="scroll-feed"
+  data-composition-src="./scroll-feed.html"
+  data-variable-values='{"speed":"frantic","card_count":8,"cues":"0.5,1.0,1.5,2.0"}'
+  data-start="0"
+  data-duration="4"
+  data-track-index="0"
+></div>
+```
+
+Elastic root: no `data-width`/`data-height`; it fills whatever box the host clip gives it. Timeline registers under the literal `scroll-feed` key.
+
+## Notes
+
+- The loop guarantee (first frame == final frame position) only holds with empty `cues` and `exit:"none"`; either option trades the loop for its rhythm or departure.
+- Deterministic: no clocks, no randomness, no CSS animations; card variety is pure index arithmetic.
diff --git a/docs/public/catalog/components/scroll-feed/demo.html b/docs/public/catalog/components/scroll-feed/demo.html
new file mode 100644
index 0000000000..18de1e5185
--- /dev/null
+++ b/docs/public/catalog/components/scroll-feed/demo.html
@@ -0,0 +1,99 @@
+<!doctype html>
+<!--
+  scroll-feed demo. This standalone composition mounts scroll-feed.html with
+  non-default frantic speed and eight cards to prove both variables flow
+  through the elastic host box.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Scroll Feed Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #0b0c0e);
+      }
+
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(
+          ellipse at 50% 42%,
+          var(--surface, #171a20) 0%,
+          var(--bg, #0b0c0e) 72%
+        );
+      }
+
+      .mount-card {
+        width: 52%;
+        height: 82%;
+        left: 24%;
+        top: 9%;
+        container-type: size;
+        overflow: hidden;
+        border: 2px solid rgba(168, 180, 197, 0.2);
+        border-radius: 36px;
+        background: var(--surface, #11141a);
+        box-shadow: 0 46px 110px rgba(0, 0, 0, 0.5);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="scroll-feed-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="scroll-feed-mount"
+        class="mount-card clip"
+        data-composition-id="scroll-feed"
+        data-composition-src="./scroll-feed.html"
+        data-variable-values='{"speed":"frantic","card_count":8}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="998"
+        data-height="886"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["scroll-feed-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "scroll-feed.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/scroll-feed/scroll-feed.html b/docs/public/catalog/components/scroll-feed/scroll-feed.html
new file mode 100644
index 0000000000..5b6ec5c5c8
--- /dev/null
+++ b/docs/public/catalog/components/scroll-feed/scroll-feed.html
@@ -0,0 +1,397 @@
+<!doctype html>
+<!--
+  scroll-feed: HyperFrames video primitive (effects / agitation / loop)
+
+  Concept: a self-scrolling column of skeleton post cards recycles without
+  a visible seam. The default register is a doomscroll: distinct thumb
+  flicks (fast start, power3 decay to a settle) with a read pause between
+  them, one flick per card. Two low-opacity copies trail the main column to
+  suggest motion blur while deterministic index math varies every card.
+
+  Variables:
+    - speed (doom | frantic, default doom): changes the card pitch, so the
+      column covers more distance during the same duration in frantic mode.
+    - card_count (number, 4 to 10, default 6): cards in one repeated cycle.
+    - cues (string, default ""): comma-separated seconds (from mount start);
+      each cue advances the feed by exactly one card pitch (stepped rhythm).
+      Empty synthesizes evenly spaced flicks, one per card, that still cover
+      exactly one full cycle.
+    - exit (none | fade | up, default "none"): optional departure over a
+      short reserved tail.
+
+  Envelope: IN = 0s, HOLD = D minus any exit tail, OUT = 0s or the exit
+  tail. HOLD owns the complete scroll and is the only elastic phase. A
+  longer mount stretches HOLD directly, never through timeScale. With no
+  cues and exit none, zero-length IN and OUT keep the first and final
+  frames loop-compatible and each column moves exactly one complete card
+  cycle. Cues or an enabled exit trade that loop guarantee for the cue
+  rhythm or the departure.
+
+  Determinism: cards are created synchronously. Their dimensions vary only
+  through index arithmetic. No clocks, random values, timers, or CSS
+  animations participate in rendering.
+
+  Mount contract: the runtime clones only this template. #root fills the
+  host box, establishes the container query basis, has no data-width or
+  data-height, and registers one paused timeline under the hardcoded
+  scroll-feed id.
+-->
+<html
+  lang="en"
+  data-composition-id="scroll-feed"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "speed", "type": "enum", "role": "timing", "label": "Scroll speed", "description": "Pace of the upward feed movement.", "default": "doom", "options": [{ "value": "doom", "label": "Doom" }, { "value": "frantic", "label": "Frantic" }] },
+    { "id": "card_count", "type": "number", "role": "content", "label": "Card count", "description": "Number of skeleton posts in one repeated feed cycle.", "default": 6, "min": 4, "max": 10, "step": 1 },
+    { "id": "cues", "type": "string", "role": "timing", "label": "Cues", "description": "Comma-separated seconds (from mount start); each cue advances the feed by one card. Empty synthesizes evenly spaced flicks, one per card.", "default": "" },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the feed scrolls until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Scroll Feed</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="scroll-feed" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            background: linear-gradient(180deg, var(--bg, #171b23) 0%, var(--bg, #0f1218) 100%);
+            color: var(--fg, #d8dee9);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .sf-viewport {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            /* Soft fade at both feed edges so cards never clip hard mid-media. */
+            mask-image: linear-gradient(
+              180deg,
+              transparent 0,
+              #000 7cqh,
+              #000 calc(100% - 7cqh),
+              transparent 100%
+            );
+          }
+
+          .sf-column {
+            position: absolute;
+            top: -20cqh;
+            left: 12cqw;
+            width: 76cqw;
+            will-change: transform;
+          }
+
+          .sf-cycle {
+            display: flex;
+            flex-direction: column;
+          }
+
+          .sf-card {
+            flex: 0 0 var(--sf-card-h);
+            width: 76cqw;
+            height: var(--sf-card-h);
+            margin-bottom: var(--sf-gap);
+            padding: var(--space-2, 2.3cqh) var(--space-2, 2.4cqw);
+            overflow: hidden;
+            border: 0.12cqw solid var(--border, rgba(160, 174, 192, 0.2));
+            border-radius: var(--radius, 2.2cqw);
+            /* Second stop derives from --surface so the gradient survives a
+               host theme instead of collapsing to a flat fill. */
+            background: linear-gradient(
+              145deg,
+              var(--surface, #29303b) 0%,
+              color-mix(in srgb, var(--surface, #29303b) 76%, var(--bg, #0f1218)) 100%
+            );
+            box-shadow: 0 1.8cqh 4cqh rgba(0, 0, 0, 0.28);
+          }
+
+          .sf-card-header {
+            display: flex;
+            align-items: center;
+            gap: var(--space-1, 1.4cqw);
+            height: 4.4cqh;
+            margin-bottom: var(--space-1, 1.5cqh);
+          }
+
+          .sf-avatar {
+            flex: 0 0 auto;
+            width: var(--sf-avatar);
+            height: var(--sf-avatar);
+            border-radius: 50%;
+            background: var(--muted, #758094);
+          }
+
+          .sf-identity {
+            display: flex;
+            flex: 1 1 auto;
+            min-width: 0;
+            flex-direction: column;
+            gap: var(--space-1, 0.65cqh);
+          }
+
+          .sf-line,
+          .sf-meta,
+          .sf-action {
+            display: block;
+            border-radius: 99cqw;
+          }
+
+          .sf-line {
+            height: 0.85cqh;
+            background: var(--muted, #7d8798);
+          }
+
+          .sf-line-primary {
+            width: var(--sf-primary-w);
+          }
+
+          .sf-line-secondary {
+            width: var(--sf-secondary-w);
+            opacity: 0.62;
+          }
+
+          .sf-meta {
+            flex: 0 0 auto;
+            width: var(--sf-meta-w);
+            height: 0.75cqh;
+            background: var(--muted, #667184);
+            opacity: 0.72;
+          }
+
+          .sf-media {
+            position: relative;
+            height: calc(var(--sf-card-h) - 12.2cqh);
+            min-height: 6cqh;
+            overflow: hidden;
+            border-radius: var(--radius, 1.4cqw);
+            /* The media block gets its own derivation (lifted toward --fg)
+               so card and media stay distinct under any --surface. */
+            background: linear-gradient(
+              135deg,
+              color-mix(in srgb, var(--surface, #29303b) 88%, var(--fg, #d8dee9)) 0%,
+              color-mix(in srgb, var(--surface, #29303b) 90%, var(--bg, #0f1218)) 100%
+            );
+          }
+
+          .sf-media::before {
+            position: absolute;
+            top: var(--sf-media-y);
+            left: var(--sf-media-x);
+            width: 18cqw;
+            height: 18cqw;
+            border-radius: 50%;
+            background: var(--muted, rgba(130, 143, 160, 0.16));
+            content: "";
+          }
+
+          .sf-card-footer {
+            display: flex;
+            align-items: center;
+            gap: var(--space-2, 2.4cqw);
+            height: 2cqh;
+            margin-top: var(--space-1, 1.35cqh);
+          }
+
+          .sf-action {
+            width: var(--sf-action-w);
+            height: 0.8cqh;
+            background: var(--muted, #717c8e);
+            opacity: 0.72;
+          }
+
+          .sf-blur {
+            z-index: 0;
+            opacity: 0.1;
+            filter: blur(0.28cqh);
+          }
+
+          .sf-blur-a {
+            top: -19.2cqh;
+            left: 11.55cqw;
+          }
+
+          .sf-blur-b {
+            top: -20.8cqh;
+            left: 12.45cqw;
+          }
+
+          .sf-main {
+            z-index: 1;
+          }
+        </style>
+
+        <div
+          id="scroll-feed-clip"
+          class="sf-viewport clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="sf-column sf-blur sf-blur-a" aria-hidden="true"></div>
+          <div class="sf-column sf-blur sf-blur-b" aria-hidden="true"></div>
+          <div class="sf-column sf-main" aria-hidden="true"></div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var mainColumn = root.querySelector(".sf-main");
+            var blurA = root.querySelector(".sf-blur-a");
+            var blurB = root.querySelector(".sf-blur-b");
+            var columns = root.querySelectorAll(".sf-column");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var speed = vars.speed === "frantic" ? "frantic" : "doom";
+            var countValue = Number(vars.card_count);
+            var cardCount = Number.isFinite(countValue)
+              ? Math.max(4, Math.min(10, Math.round(countValue)))
+              : 6;
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+            var cuesValue = vars.cues == null ? "" : String(vars.cues);
+            var cues = cuesValue
+              .split(",")
+              .reduce(function (result, token) {
+                var trimmed = token.trim();
+                if (trimmed === "") return result;
+                var seconds = Number(trimmed);
+                if (!Number.isFinite(seconds) || seconds < 0) return result;
+                result.push(seconds);
+                return result;
+              }, [])
+              .sort(function (a, b) {
+                return a - b;
+              });
+
+            // Frantic mode travels farther in the same HOLD while still
+            // completing exactly one full cycle at the final frame.
+            var cardHeight = speed === "frantic" ? 32 : 24;
+            var gap = speed === "frantic" ? 4 : 3;
+            var cycleDistance = cardCount * (cardHeight + gap);
+            root.style.setProperty("--sf-card-h", cardHeight + "cqh");
+            root.style.setProperty("--sf-gap", gap + "cqh");
+
+            var cycle = document.createElement("div");
+            cycle.className = "sf-cycle";
+
+            for (var index = 0; index < cardCount; index += 1) {
+              var card = document.createElement("article");
+              card.className = "sf-card";
+              card.style.setProperty("--sf-avatar", 3.2 + (index % 3) * 0.45 + "cqh");
+              card.style.setProperty("--sf-primary-w", 18 + ((index * 11) % 24) + "cqw");
+              card.style.setProperty("--sf-secondary-w", 12 + ((index * 7) % 19) + "cqw");
+              card.style.setProperty("--sf-meta-w", 7 + ((index * 5) % 9) + "cqw");
+              card.style.setProperty("--sf-media-x", 5 + ((index * 17) % 48) + "cqw");
+              card.style.setProperty("--sf-media-y", -8 + ((index * 13) % 10) + "cqh");
+              card.style.setProperty("--sf-action-w", 7 + ((index * 3) % 8) + "cqw");
+              card.innerHTML =
+                '<header class="sf-card-header"><span class="sf-avatar"></span><span class="sf-identity"><span class="sf-line sf-line-primary"></span><span class="sf-line sf-line-secondary"></span></span><span class="sf-meta"></span></header><div class="sf-media"></div><footer class="sf-card-footer"><span class="sf-action"></span><span class="sf-action"></span><span class="sf-action"></span></footer>';
+              cycle.appendChild(card);
+            }
+
+            // Three identical cycles keep the viewport covered before, during,
+            // and after the exact one-cycle translation. The blur trails clone
+            // this single deterministic source instead of recomputing cards.
+            mainColumn.appendChild(cycle);
+            mainColumn.appendChild(cycle.cloneNode(true));
+            mainColumn.appendChild(cycle.cloneNode(true));
+            blurA.innerHTML = mainColumn.innerHTML;
+            blurB.innerHTML = mainColumn.innerHTML;
+
+            // IN stays zero. Exit none keeps OUT at zero for a clean loop;
+            // an enabled exit reserves a short tail after the scroll.
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var EXIT = exit === "none" ? 0 : Math.min(0.4, duration * 0.15);
+            var SCROLL_END = Math.max(0.001, duration - EXIT);
+            var finalY = -cycleDistance;
+
+            var tl = gsap.timeline({ paused: true });
+
+            // Stepped rhythm: each step advances the feed by exactly one
+            // card pitch (thumb flick: fast start, power3 decay, settle).
+            // Three stacked cycles keep the viewport covered through two
+            // full cycles of steps. Without cues the default doomscroll
+            // synthesizes one evenly spaced flick per card, so the column
+            // still travels exactly one full cycle by SCROLL_END and the
+            // first and final frames stay loop-compatible.
+            var pitch = cardHeight + gap;
+            var steps = [];
+            var autoFlick = cues.length === 0;
+            if (autoFlick) {
+              for (var step = 0; step < cardCount; step += 1) {
+                steps.push((SCROLL_END / cardCount) * step);
+              }
+            } else {
+              cues.forEach(function (cueAt) {
+                if (steps.length >= cardCount * 2) return;
+                var at = Math.min(SCROLL_END, cueAt);
+                if (steps.length === 0 || at > steps[steps.length - 1] + 0.01) {
+                  steps.push(at);
+                }
+              });
+            }
+            finalY = -pitch * steps.length;
+            steps.forEach(function (cueAt, index) {
+              var next = index + 1 < steps.length ? steps[index + 1] : SCROLL_END;
+              // Auto flicks keep a longer rest so each card gets a read;
+              // explicit cues keep the documented cue-mode timing.
+              var stepDuration = autoFlick
+                ? Math.max(0.05, Math.min(0.45, (next - cueAt) * 0.6))
+                : Math.max(0.05, Math.min(0.5, (next - cueAt) * 0.8, duration - cueAt));
+              var target = { y: -pitch * (index + 1) + "cqh" };
+              if (index === 0) {
+                tl.fromTo(
+                  columns,
+                  { y: "0cqh" },
+                  {
+                    y: target.y,
+                    duration: stepDuration,
+                    ease: "power3.out",
+                  },
+                  cueAt,
+                );
+              } else {
+                tl.to(columns, { y: target.y, duration: stepDuration, ease: "power3.out" }, cueAt);
+              }
+            });
+
+            // Optional departure; exit none scrolls until the frame cuts.
+            if (exit === "fade") {
+              tl.to(columns, { opacity: 0, duration: EXIT, ease: "power2.in" }, SCROLL_END);
+            } else if (exit === "up") {
+              tl.to(columns, { opacity: 0, duration: EXIT, ease: "power2.in" }, SCROLL_END);
+              tl.to(
+                columns,
+                { y: finalY - 10 + "cqh", duration: EXIT, ease: "power2.in" },
+                SCROLL_END,
+              );
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["scroll-feed"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/segmentation-flood/README.md b/docs/public/catalog/components/segmentation-flood/README.md
new file mode 100644
index 0000000000..e24a31dd47
--- /dev/null
+++ b/docs/public/catalog/components/segmentation-flood/README.md
@@ -0,0 +1,74 @@
+# segmentation-flood
+
+Product demo / AI experiment primitive: a machine-vision read of a slotted
+subject. Translucent accent segmentation masks FLOOD onto 2-4 regions in
+scanline steps (rows arrive in 2-3 frame quanta: flood progress is
+quantized to frame steps before any row is drawn), each completed region
+gets a thin corner bracket plus a mono label chip, and a subtle HUD
+flicker (a deterministic 2-frame luminance toggle) rides the pass, then
+stops the instant the flood completes. Settles to a clean labeled read.
+4.5s authored, elastic HOLD (never time-scaled).
+
+Reference feel: the gmunk segmentation sheets (red masks flooding under
+HUD flicker), tokenized to the contract palette.
+
+## Mounting
+
+```html
+<div
+  class="clip"
+  data-composition-id="segmentation-flood"
+  data-composition-src="./components/segmentation-flood.html"
+  data-variable-values='{"regions":"Chassis, Payload, Horizon, Beacon","accent":"blue"}'
+  data-start="0"
+  data-duration="4.5"
+  data-track-index="0"
+></div>
+```
+
+## Subject slot
+
+The subject is a slot. Place an inert template anywhere in the HOST page:
+
+```html
+<template data-slot="segmentation-flood-subject"> ...subject... </template>
+```
+
+Direct `img` / `video` children are stretched to cover the stage;
+arbitrary HTML fills it. A missing slot falls back to a token scene: a
+surface field with muted shapes seated where the default regions land.
+
+## Variables
+
+| id       | type   | default                | notes                                                                                        |
+| -------- | ------ | ---------------------- | -------------------------------------------------------------------------------------------- |
+| regions  | string | Figure, Signal, Ground | Comma label list; 2 to 4 used. One mask + bracket + chip per label.                          |
+| flood_at | number | 0.8                    | Seconds when the pass starts. Clamped so the pass and any exit fit inside the clip.          |
+| flicker  | enum   | on                     | on or off: the 2-frame HUD luminance toggle riding the pass.                                 |
+| accent   | enum   | green                  | green maps to --brand, blue to --accent, violet to --accent-2.                               |
+| exit     | enum   | none                   | none holds the labeled read (frame roots own transitions); fade or up add a 0.45s departure. |
+
+## Choreography
+
+- 0.00s: the subject settles up quietly; no overlay.
+- flood_at: region 1's mask starts flooding top to bottom in quantized
+  scanline rows (a brighter leading row, hairline gaps for texture);
+  regions stagger 0.35s apart, 1.0s of flood each.
+- Each region completes: its corner brackets snap in and its mono chip
+  rises on the same beat.
+- Flood end: the flicker window closes; brackets, chips, and masks hold as
+  one clean labeled read.
+- HOLD: dead still, elastic with the clip duration.
+
+Sync point `flood` fires as the pass starts; align SFX to it.
+
+## Determinism
+
+Region geometry, per-region flood quanta (2 or 3 frames), and scanline row
+counts come from one table computed once at build from fixed LCG seed
+0x5e6f100d. One plain-object anchor tween feeds one painter that redraws
+every mask row and the flicker wash from scratch as pure functions of the
+timeline time; the flicker is on exactly when floor(frame / 2) is odd
+inside the flood window. Eventful seeks land identical frames in any order
+and either direction; the raster basis is the host box measured once at
+mount.
diff --git a/docs/public/catalog/components/segmentation-flood/demo.html b/docs/public/catalog/components/segmentation-flood/demo.html
new file mode 100644
index 0000000000..833d46eca0
--- /dev/null
+++ b/docs/public/catalog/components/segmentation-flood/demo.html
@@ -0,0 +1,133 @@
+<!doctype html>
+<!--
+  segmentation-flood demo. A full-bleed 1920x1080 LIGHT host mounts the
+  primitive through data-composition-src with non-default variables (four
+  regions, blue accent, earlier flood cue) and supplies the subject slot
+  to prove the slot path while the primitive stays elastic.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Segmentation Flood Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #f5f6f8);
+      }
+
+      #root {
+        --bg: #f5f6f8;
+        --fg: #101318;
+        --muted: #5b6472;
+        --surface: #ffffff;
+        --border: #d7dce4;
+        --brand: #14a35e;
+        --accent: #2f6fed;
+        --accent-2: #7a5cd6;
+        --radius: 24px;
+        --font-display: "Inter", system-ui, sans-serif;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg);
+      }
+
+      .mount-stage {
+        position: absolute;
+        inset: 0;
+        container-type: size;
+        overflow: hidden;
+      }
+
+      .demo-subject {
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(
+          160deg,
+          color-mix(in srgb, var(--surface, #ffffff) 92%, var(--accent, #2f6fed)) 0%,
+          var(--surface, #ffffff) 60%
+        );
+        font-family: var(--font-display, system-ui, sans-serif);
+      }
+
+      .demo-subject .block {
+        position: absolute;
+        border: 1px solid var(--border, #d7dce4);
+        border-radius: var(--radius, 24px);
+        background: color-mix(in srgb, var(--muted, #5b6472) 10%, var(--surface, #ffffff));
+        box-shadow: 0 24px 60px rgba(16, 19, 24, 0.07);
+      }
+
+      .demo-subject .block.round {
+        border-radius: 50%;
+      }
+    </style>
+  </head>
+  <body>
+    <template data-slot="segmentation-flood-subject">
+      <div class="demo-subject">
+        <div class="block" style="left: 10%; top: 16%; width: 26%; height: 26%"></div>
+        <div class="block round" style="left: 62%; top: 12%; width: 22%; height: 34%"></div>
+        <div class="block" style="left: 16%; top: 60%; width: 22%; height: 25%"></div>
+        <div class="block round" style="left: 58%; top: 62%; width: 26%; height: 23%"></div>
+      </div>
+    </template>
+
+    <div
+      id="root"
+      data-composition-id="segmentation-flood-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4.5"
+      data-fps="30"
+    >
+      <div
+        id="segmentation-flood-mount"
+        class="mount-stage clip"
+        data-composition-id="segmentation-flood"
+        data-composition-src="./segmentation-flood.html"
+        data-variable-values='{"regions":"Chassis, Payload, Horizon, Beacon","flood_at":0.6,"accent":"blue"}'
+        data-start="0"
+        data-duration="4.5"
+        data-track-index="0"
+        data-width="1920"
+        data-height="1080"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["segmentation-flood-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "segmentation-flood.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/segmentation-flood/segmentation-flood.html b/docs/public/catalog/components/segmentation-flood/segmentation-flood.html
new file mode 100644
index 0000000000..08f6e29104
--- /dev/null
+++ b/docs/public/catalog/components/segmentation-flood/segmentation-flood.html
@@ -0,0 +1,517 @@
+<!doctype html>
+<!--
+  segmentation-flood: HyperFrames video primitive (product demo / AI)
+
+  A machine-vision read of a slotted subject. Translucent accent
+  segmentation masks FLOOD onto 2-4 regions in scanline steps: rows arrive
+  in 2-3 frame quanta (flood progress is quantized to frame steps before
+  any row is drawn), each region then gets a thin corner bracket and a mono
+  label chip; a subtle HUD flicker (a deterministic 2-frame luminance
+  toggle, a pure function of the frame index) rides the pass and stops the
+  instant the flood completes, settling to a clean labeled read.
+  Reference feel: gmunk segmentation sheets (red masks flooding under HUD
+  flicker), tokenized.
+
+  The subject is a SLOT. Callers place an inert template anywhere in the
+  HOST page (templates never render, and the runtime wipes the host clip's
+  own children on mount, so the slot lives at document level):
+
+    <template data-slot="segmentation-flood-subject"> ... </template>
+
+  Direct img/video children are stretched to cover the stage; arbitrary
+  HTML fills it. A missing slot falls back to a token scene: a surface
+  field with muted shapes seated where the default regions land, so the
+  read has something to read.
+
+  Variables (declared in data-composition-variables below):
+    - regions (comma label list, 2-4 used): one mask + bracket + chip per
+      label, flooding top-left to bottom-right in a staggered pass.
+    - flood_at (seconds): when the pass starts. Clamped so the whole pass
+      and any exit stay inside the clip.
+    - flicker ("on" | "off"): the 2-frame HUD luminance toggle.
+    - accent ("green" | "blue" | "violet"): green rides --brand, blue
+      rides --accent, violet rides --accent-2.
+    - exit ("none" | "fade" | "up", default none): frame roots own
+      transitions; the default holds the labeled read to the last pixel.
+
+  Envelope, fixed IN and OUT with elastic HOLD only (never timeScale):
+    IN ends when the last chip lands; HOLD = D - IN - OUT, truly still.
+    OUT_BASE = 0.45s only when exit != none.
+
+  Determinism (canvas 2D law): region geometry and per-region flood steps
+  come from one table computed once during synchronous timeline
+  construction from fixed LCG seed 0x5e6f100d. Every painted frame is a
+  pure function of (that table, the timeline's current time): the
+  timeline's onUpdate clears the canvas and redraws every mask row and the
+  flicker wash from scratch. Row arrival quantizes TIME to the region's
+  2-3 frame quantum, so a row lands whole and stays stable within its
+  step; the flicker is on exactly when floor(frame / 2) is odd inside the
+  flood window. No Math.random, no wall clock, no incremental state:
+  eventful seeks repaint identically in any order and either direction.
+
+  Mount contract: the runtime clones only this template. #root fills the
+  host box (no data-width/data-height, container-type: size, cqmin units),
+  is styled via #root only, and registers one paused timeline under the
+  LITERAL "segmentation-flood" key. All DOM state is set with explicit
+  endpoints (gsap.set + fromTo) so any seek order lands identical frames.
+-->
+<html
+  lang="en"
+  data-composition-id="segmentation-flood"
+  data-composition-duration="4.5"
+  data-composition-variables='[
+    { "id": "regions", "type": "string", "role": "content", "label": "Regions", "description": "Comma-separated region labels; 2 to 4 are used, one translucent mask + bracket + mono chip each.", "default": "Figure, Signal, Ground" },
+    { "id": "flood_at", "type": "number", "role": "timing", "label": "Flood at", "description": "Seconds from mount start when the segmentation pass begins. Clamped so the pass and any exit stay inside the clip.", "default": 0.8 },
+    { "id": "flicker", "type": "enum", "role": "style", "label": "Flicker", "description": "Deterministic 2-frame HUD luminance toggle riding the flood pass.", "default": "on", "options": [{ "value": "on", "label": "On" }, { "value": "off", "label": "Off" }] },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Mask, bracket, and chip color: green rides --brand, blue rides --accent, violet rides --accent-2.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the labeled read holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Segmentation Flood</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="segmentation-flood" data-duration="4.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, "Inter", system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .sgf-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .sgf-stage {
+            position: absolute;
+            inset: 0;
+            will-change: transform, opacity;
+          }
+
+          .sgf-subject {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            will-change: opacity;
+          }
+
+          .sgf-subject > img,
+          .sgf-subject > video {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+          }
+
+          .sgf-scene {
+            position: absolute;
+            inset: 0;
+            background: color-mix(in srgb, var(--surface, #14171c) 88%, var(--bg, #0b0c0e));
+          }
+
+          .sgf-shape {
+            position: absolute;
+            border: 0.16cqmin solid color-mix(in srgb, var(--border, #475569) 70%, transparent);
+            border-radius: var(--radius, 2cqmin);
+            background: color-mix(in srgb, var(--muted, #94a3b8) 16%, var(--surface, #14171c));
+          }
+
+          .sgf-shape.round {
+            border-radius: 50%;
+          }
+
+          .sgf-canvas {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+          }
+
+          .sgf-overlay {
+            position: absolute;
+            inset: 0;
+          }
+
+          .sgf-frame {
+            position: absolute;
+            will-change: opacity;
+          }
+
+          .sgf-corner {
+            position: absolute;
+            width: 2.6cqmin;
+            height: 2.6cqmin;
+            border: 0 solid var(--sgf-accent);
+          }
+
+          .sgf-corner.tl {
+            left: 0;
+            top: 0;
+            border-left-width: 0.28cqmin;
+            border-top-width: 0.28cqmin;
+          }
+
+          .sgf-corner.tr {
+            right: 0;
+            top: 0;
+            border-right-width: 0.28cqmin;
+            border-top-width: 0.28cqmin;
+          }
+
+          .sgf-corner.bl {
+            left: 0;
+            bottom: 0;
+            border-left-width: 0.28cqmin;
+            border-bottom-width: 0.28cqmin;
+          }
+
+          .sgf-corner.br {
+            right: 0;
+            bottom: 0;
+            border-right-width: 0.28cqmin;
+            border-bottom-width: 0.28cqmin;
+          }
+
+          .sgf-chip {
+            position: absolute;
+            display: inline-flex;
+            align-items: center;
+            gap: 0.9cqmin;
+            padding: 0.7cqmin 1.4cqmin;
+            border: 0.14cqmin solid
+              color-mix(in srgb, var(--sgf-accent) 60%, var(--border, #475569));
+            border-radius: calc(var(--radius, 2cqmin) * 0.4);
+            background: color-mix(in srgb, var(--bg, #0b0c0e) 78%, var(--sgf-accent));
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
+            font-size: 1.9cqmin;
+            font-weight: 500;
+            letter-spacing: 0.12em;
+            text-transform: uppercase;
+            white-space: nowrap;
+            will-change: opacity, transform;
+          }
+
+          .sgf-chip-dot {
+            width: 0.9cqmin;
+            height: 0.9cqmin;
+            border-radius: 50%;
+            background: var(--sgf-accent);
+          }
+        </style>
+
+        <div
+          id="segmentation-flood-clip"
+          class="sgf-clip clip"
+          data-start="0"
+          data-duration="4.5"
+          data-track-index="0"
+        >
+          <div class="sgf-stage">
+            <div class="sgf-subject">
+              <div class="sgf-scene" aria-hidden="true"></div>
+            </div>
+            <canvas class="sgf-canvas" aria-hidden="true"></canvas>
+            <div class="sgf-overlay"></div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".sgf-stage");
+            var subject = root.querySelector(".sgf-subject");
+            var scene = root.querySelector(".sgf-scene");
+            var canvas = root.querySelector(".sgf-canvas");
+            var overlay = root.querySelector(".sgf-overlay");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var labels = String(vars.regions == null ? "" : vars.regions)
+              .split(",")
+              .map(function (s) {
+                return s.trim();
+              })
+              .filter(Boolean)
+              .slice(0, 4);
+            if (labels.length < 2) labels = ["Figure", "Signal", "Ground"];
+
+            var floodAtRaw = parseFloat(vars.flood_at);
+            var flicker = vars.flicker !== "off";
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+            root.style.setProperty("--sgf-accent", accentColors[accent]);
+
+            // Region anchor cells (fractions of the stage), top-left to
+            // bottom-right so the staggered flood reads as one pass.
+            var anchors = [
+              { x: 0.07, y: 0.11, w: 0.34, h: 0.36 },
+              { x: 0.55, y: 0.08, w: 0.37, h: 0.4 },
+              { x: 0.12, y: 0.56, w: 0.3, h: 0.33 },
+              { x: 0.53, y: 0.58, w: 0.36, h: 0.31 },
+            ];
+
+            // SLOT. Caller templates live at HOST DOCUMENT level.
+            var hostDoc = root.ownerDocument;
+            var slotTemplate = null;
+            try {
+              slotTemplate = hostDoc.querySelector(
+                'template[data-slot="segmentation-flood-subject"]',
+              );
+            } catch (error) {
+              slotTemplate = null;
+            }
+            if (slotTemplate) {
+              scene.remove();
+              subject.appendChild(hostDoc.importNode(slotTemplate.content, true));
+            } else {
+              // Default token scene: muted shapes seated inside the region
+              // anchors so the machine-vision read has content to read.
+              for (var s = 0; s < labels.length; s += 1) {
+                var cell = anchors[s];
+                var shape = hostDoc.createElement("div");
+                shape.className = s % 2 === 1 ? "sgf-shape round" : "sgf-shape";
+                shape.style.left = (cell.x + cell.w * 0.16) * 100 + "%";
+                shape.style.top = (cell.y + cell.h * 0.18) * 100 + "%";
+                shape.style.width = cell.w * 0.68 * 100 + "%";
+                shape.style.height = cell.h * 0.64 * 100 + "%";
+                scene.appendChild(shape);
+              }
+            }
+
+            // Envelope. The pass length is fixed by the region count; the
+            // start cue is clamped so pass + exit always fit.
+            var fps = 30;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4.5"));
+            var OUT = exit === "none" ? 0 : 0.45;
+            var STAGGER = 0.35;
+            var REGION_DUR = 1.0;
+            var CHIP_DUR = 0.3;
+            var passLen = STAGGER * (labels.length - 1) + REGION_DUR + CHIP_DUR;
+            var floodAt = isFinite(floodAtRaw) ? floodAtRaw : 0.8;
+            floodAt = Math.min(
+              Math.max(0.2, floodAt),
+              Math.max(0.2, duration - passLen - OUT - 0.1),
+            );
+            var floodEnd = floodAt + STAGGER * (labels.length - 1) + REGION_DUR;
+            var OUT_START = duration - OUT;
+
+            // Canvas raster basis, fixed once at mount (elastic root: the
+            // host box decides the resolution).
+            var dpr = Math.min(2, Math.max(1, Number(window.devicePixelRatio) || 1));
+            var box = root.getBoundingClientRect();
+            var cssW = Math.max(1, Math.round(box.width) || 640);
+            var cssH = Math.max(1, Math.round(box.height) || 360);
+            canvas.width = Math.round(cssW * dpr);
+            canvas.height = Math.round(cssH * dpr);
+            var ctx = canvas.getContext("2d");
+
+            // Resolve the accent token to a concrete color once at mount so
+            // canvas fills never depend on style recalc during seeks.
+            var probe = hostDoc.createElement("span");
+            probe.style.color = accentColors[accent];
+            root.appendChild(probe);
+            var maskColor = getComputedStyle(probe).color || "#71f5a7";
+            probe.remove();
+
+            // Seeded region table: geometry jitter + per-region flood
+            // quantum (2 or 3 frames) + scanline row count. Computed once;
+            // painted frames are pure functions of (table, time).
+            var regions = (function () {
+              var state = 0x5e6f100d;
+              function next() {
+                state = (Math.imul(1664525, state) + 1013904223) >>> 0;
+                return state / 4294967296;
+              }
+              var rows = [];
+              for (var i = 0; i < labels.length; i += 1) {
+                var a = anchors[i];
+                rows.push({
+                  x: a.x + (next() - 0.5) * 0.02,
+                  y: a.y + (next() - 0.5) * 0.02,
+                  w: a.w * (0.94 + next() * 0.1),
+                  h: a.h * (0.94 + next() * 0.1),
+                  start: floodAt + STAGGER * i,
+                  quantum: next() < 0.5 ? 2 : 3,
+                  rows: 11 + Math.floor(next() * 4),
+                });
+              }
+              return rows;
+            })();
+
+            function clamp01(v) {
+              return v < 0 ? 0 : v > 1 ? 1 : v;
+            }
+
+            // Pure repaint: clear, then draw every mask's arrived rows and
+            // the flicker wash from (table, t). Row arrival quantizes time
+            // to the region's frame quantum, so rows land whole and hold
+            // stable within a step.
+            function paint(t) {
+              ctx.clearRect(0, 0, canvas.width, canvas.height);
+              for (var i = 0; i < regions.length; i += 1) {
+                var r = regions[i];
+                var local = t - r.start;
+                if (local <= 0) continue;
+                var q = r.quantum / fps;
+                var quantized = Math.floor(local / q) * q;
+                var p = clamp01(quantized / REGION_DUR);
+                var visible = Math.min(r.rows, Math.floor(p * r.rows + 1e-6));
+                if (visible <= 0) continue;
+                var rx = r.x * canvas.width;
+                var rw = r.w * canvas.width;
+                var rowH = (r.h * canvas.height) / r.rows;
+                for (var k = 0; k < visible; k += 1) {
+                  var leading = k === visible - 1 && visible < r.rows;
+                  ctx.globalAlpha = leading ? 0.55 : 0.3;
+                  ctx.fillStyle = maskColor;
+                  // A hairline gap between rows keeps the scanline texture.
+                  ctx.fillRect(
+                    rx,
+                    r.y * canvas.height + k * rowH,
+                    rw,
+                    Math.max(1, rowH - Math.max(1, dpr)),
+                  );
+                }
+              }
+              // HUD flicker: pure function of the frame index, active only
+              // while the flood is in flight, gone the instant it settles.
+              if (flicker && t > floodAt && t < floodEnd) {
+                var frame = Math.floor(t * fps);
+                if (Math.floor(frame / 2) % 2 === 1) {
+                  ctx.globalAlpha = 0.05;
+                  ctx.fillStyle = "#ffffff";
+                  ctx.fillRect(0, 0, canvas.width, canvas.height);
+                }
+              }
+              ctx.globalAlpha = 1;
+            }
+
+            // Brackets + chips: DOM, positioned from the seeded table.
+            var frames = [];
+            var chips = [];
+            for (var i = 0; i < regions.length; i += 1) {
+              var r = regions[i];
+              var frameEl = hostDoc.createElement("div");
+              frameEl.className = "sgf-frame";
+              frameEl.style.left = r.x * 100 + "%";
+              frameEl.style.top = r.y * 100 + "%";
+              frameEl.style.width = r.w * 100 + "%";
+              frameEl.style.height = r.h * 100 + "%";
+              ["tl", "tr", "bl", "br"].forEach(function (corner) {
+                var c = hostDoc.createElement("span");
+                c.className = "sgf-corner " + corner;
+                frameEl.appendChild(c);
+              });
+              overlay.appendChild(frameEl);
+              frames.push(frameEl);
+
+              var chip = hostDoc.createElement("div");
+              chip.className = "sgf-chip";
+              chip.style.left = r.x * 100 + "%";
+              // Chips sit above the region; bottom rows drop them inside
+              // the top edge so nothing leaves the stage.
+              if (r.y > 0.08) {
+                chip.style.top = "calc(" + r.y * 100 + "% - 3.9cqmin)";
+              } else {
+                chip.style.top = "calc(" + r.y * 100 + "% + 1cqmin)";
+              }
+              var dot = hostDoc.createElement("span");
+              dot.className = "sgf-chip-dot";
+              chip.appendChild(dot);
+              chip.appendChild(hostDoc.createTextNode(labels[i]));
+              overlay.appendChild(chip);
+              chips.push(chip);
+            }
+
+            gsap.set(stage, { opacity: 1, y: "0cqh" });
+            gsap.set(subject, { opacity: 0 });
+
+            var tl = gsap.timeline({
+              paused: true,
+              onUpdate: function () {
+                paint(tl.time());
+              },
+            });
+
+            // Anchor tween: an inert plain-object tween spanning the full
+            // authored duration so tl.time() covers [0, D] and onUpdate
+            // repaints the canvas on every eventful seek.
+            tl.to({ p: 0 }, { p: 1, duration: duration, ease: "none" }, 0);
+
+            // IN: the subject settles up quietly before the read begins.
+            tl.fromTo(
+              subject,
+              { opacity: 0 },
+              { opacity: 1, duration: 0.5, ease: "power2.out" },
+              0,
+            );
+
+            // Each region's bracket + chip land as its mask completes.
+            for (var i = 0; i < regions.length; i += 1) {
+              var done = regions[i].start + REGION_DUR;
+              tl.fromTo(
+                frames[i],
+                { opacity: 0 },
+                { opacity: 1, duration: 0.22, ease: "power2.out" },
+                done - 0.16,
+              );
+              tl.fromTo(
+                chips[i],
+                { opacity: 0, y: "0.8cqh" },
+                { opacity: 1, y: "0cqh", duration: CHIP_DUR, ease: "power2.out" },
+                done,
+              );
+            }
+
+            // HOLD: truly still; the flood is complete, the flicker window
+            // is closed, and the canvas repaints the same settled read.
+
+            // OUT: optional departure; exit none holds until the frame cuts.
+            if (exit === "up") {
+              tl.to(stage, { y: "-4cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "fade") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            }
+
+            tl.seek(0);
+            paint(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["segmentation-flood"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/separator/__hf-variables-preview.html b/docs/public/catalog/components/separator/__hf-variables-preview.html
new file mode 100644
index 0000000000..f997a6ac5a
--- /dev/null
+++ b/docs/public/catalog/components/separator/__hf-variables-preview.html
@@ -0,0 +1,72 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Separator variables preview</title>
+    <style>
+      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #0a0a0a; }
+      #hf-vars-root { position: relative; width: 1920px; height: 1080px; }
+      #hf-vars-mount { position: absolute; inset: 0; display: grid; place-items: center; }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  </head>
+  <body>
+    <div id="hf-vars-root" data-composition-id="separator-variables-preview" data-start="0" data-width="1920" data-height="1080" data-duration="5" data-fps="30">
+      <div id="hf-vars-mount" class="clip" data-composition-id="separator" data-composition-src="./separator.html" data-start="0" data-duration="5" data-track-index="0" data-width="1920" data-height="1080"></div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["separator-variables-preview"] = gsap.timeline({ paused: true });
+    </script>
+    <script>
+      (function () {
+        var mount = document.getElementById("hf-vars-mount");
+        // The mount is filled asynchronously, and the demo script selects
+        // what it fills it with, so it cannot run before then.
+        var observer = new MutationObserver(build);
+        observer.observe(mount, { childList: true, subtree: true });
+        build();
+        function build() {
+          if (!mount.firstElementChild) return;
+          observer.disconnect();
+
+        const tl = gsap.timeline({ paused: true });
+        tl.addLabel("start", 0);
+        tl.set(".hf-ui-demo-stage", { opacity: 1 }, 0);
+        tl.set(".hf-ui-separator", { "--hf-separator-progress": 0, immediateRender: true }, 0);
+        tl.to(
+          ".hf-ui-separator",
+          { "--hf-separator-progress": 1, duration: 0.42, ease: "power3.out" },
+          0.6,
+        );
+        tl.addLabel("end", 3.99);
+        tl.to(".hf-ui-demo-stage", { opacity: 1, duration: 0.01 }, 3.99);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["separator-demo"] = tl;
+          var child = window.__timelines["separator-demo"];
+          delete window.__timelines["separator-demo"];
+          if (!child || typeof child.paused !== "function") return;
+          child.paused(false);
+          window.__timelines["separator-variables-preview"].add(child, 0);
+        }
+      })();
+    </script>
+<script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "separator.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/separator/demo.html b/docs/public/catalog/components/separator/demo.html
new file mode 100644
index 0000000000..806112d178
--- /dev/null
+++ b/docs/public/catalog/components/separator/demo.html
@@ -0,0 +1,276 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Separator — Operator Black</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      body {
+        background: #0a0a0a;
+      }
+      .hf-ui-demo-canvas {
+        width: 1920px;
+        height: 1080px;
+        box-sizing: border-box;
+        display: grid;
+        grid-template-rows: 1fr auto;
+        place-items: center;
+        padding: 96px;
+        background: #0a0a0a;
+        color: #e5e5e5;
+        font-family:
+          ui-sans-serif,
+          -apple-system,
+          BlinkMacSystemFont,
+          "Segoe UI",
+          sans-serif;
+      }
+      .hf-ui-demo-stage {
+        display: grid;
+        place-items: center;
+        width: min(720px, 100%);
+        min-width: 0;
+        max-width: 100%;
+      }
+      .hf-ui-demo-caption {
+        justify-self: start;
+        color: #929292;
+        font:
+          500 18px/1.4 ui-monospace,
+          "SFMono-Regular",
+          Menlo,
+          Consolas,
+          monospace;
+        letter-spacing: 0.01em;
+      }
+    </style>
+  </head>
+  <body>
+    <main
+      class="hf-ui-demo-canvas"
+      data-composition-id="separator-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-hf-rendering="true"
+      data-hf-theme="dark"
+    >
+      <!-- prettier-ignore -->
+      <section class="hf-ui-demo-stage" aria-label="Separator specimen" inert>
+        <!-- hf-ui:canonical:start -->
+<!--
+  Separator - Operator Black structural rule primitive for HyperFrames.
+
+  Paste the markup and CSS into a composition. Animate the CSS variables
+  from a paused GSAP timeline for deterministic video renders.
+-->
+
+<div data-hf-ui-root class="hf-ui-separator" role="separator" aria-orientation="horizontal">
+  <span></span>
+</div>
+
+<style>
+  /* hf-ui:tokens:start */
+  /* prettier-ignore */
+  [data-hf-ui-root] {
+    --_hf-ui-accent: var(--hf-ui-accent, #3ce6ac);
+    --_hf-ui-action: var(--hf-ui-action, #eeeeee);
+    --_hf-ui-action-contrast: var(--hf-ui-action-contrast, #111111);
+    --_hf-ui-border: var(--hf-ui-border, #2a2a2a);
+    --_hf-ui-border-strong: var(--hf-ui-border-strong, #383838);
+    --_hf-ui-canvas: var(--hf-ui-canvas, #0a0a0a);
+    --_hf-ui-control-border: var(--hf-ui-control-border, #686868);
+    --_hf-ui-control-border-hover: var(--hf-ui-control-border-hover, #777777);
+    --_hf-ui-control-height: var(--hf-ui-control-height, 40px);
+    --_hf-ui-danger: var(--hf-ui-danger, #ff7878);
+    --_hf-ui-data-1: var(--hf-ui-data-1, #3ce6ac);
+    --_hf-ui-data-2: var(--hf-ui-data-2, #63a5ff);
+    --_hf-ui-data-3: var(--hf-ui-data-3, #e9ab55);
+    --_hf-ui-data-4: var(--hf-ui-data-4, #a78bfa);
+    --_hf-ui-data-5: var(--hf-ui-data-5, #ff8a75);
+    --_hf-ui-duration-drawer-enter: var(--hf-ui-duration-drawer-enter, 360ms);
+    --_hf-ui-duration-drawer-exit: var(--hf-ui-duration-drawer-exit, 240ms);
+    --_hf-ui-duration-modal-enter: var(--hf-ui-duration-modal-enter, 280ms);
+    --_hf-ui-duration-modal-exit: var(--hf-ui-duration-modal-exit, 180ms);
+    --_hf-ui-duration-overlay-enter: var(--hf-ui-duration-overlay-enter, 210ms);
+    --_hf-ui-duration-overlay-exit: var(--hf-ui-duration-overlay-exit, 140ms);
+    --_hf-ui-duration-press: var(--hf-ui-duration-press, 120ms);
+    --_hf-ui-duration-state: var(--hf-ui-duration-state, 160ms);
+    --_hf-ui-ease-enter: var(--hf-ui-ease-enter, cubic-bezier(0.32, 0.72, 0, 1));
+    --_hf-ui-ease-exit: var(--hf-ui-ease-exit, cubic-bezier(0.23, 1, 0.32, 1));
+    --_hf-ui-ease-response: var(--hf-ui-ease-response, cubic-bezier(0.23, 1, 0.32, 1));
+    --_hf-ui-font-mono: var(--hf-ui-font-mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
+    --_hf-ui-font-sans: var(--hf-ui-font-sans, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
+    --_hf-ui-hit-target: var(--hf-ui-hit-target, 44px);
+    --_hf-ui-radius-control: var(--hf-ui-radius-control, 5px);
+    --_hf-ui-radius-overlay: var(--hf-ui-radius-overlay, 10px);
+    --_hf-ui-radius-surface: var(--hf-ui-radius-surface, 7px);
+    --_hf-ui-shadow-contact: var(--hf-ui-shadow-contact, 0 8px 18px rgba(0, 0, 0, 0.38));
+    --_hf-ui-shadow-inset: var(--hf-ui-shadow-inset, inset 0 1px 0 rgba(255, 255, 255, 0.035));
+    --_hf-ui-shadow-modal: var(--hf-ui-shadow-modal, 0 18px 46px rgba(0, 0, 0, 0.52));
+    --_hf-ui-space-1: var(--hf-ui-space-1, 4px);
+    --_hf-ui-space-12: var(--hf-ui-space-12, 48px);
+    --_hf-ui-space-16: var(--hf-ui-space-16, 64px);
+    --_hf-ui-space-2: var(--hf-ui-space-2, 8px);
+    --_hf-ui-space-3: var(--hf-ui-space-3, 12px);
+    --_hf-ui-space-4: var(--hf-ui-space-4, 16px);
+    --_hf-ui-space-6: var(--hf-ui-space-6, 24px);
+    --_hf-ui-space-8: var(--hf-ui-space-8, 32px);
+    --_hf-ui-surface: var(--hf-ui-surface, #141414);
+    --_hf-ui-surface-inset: var(--hf-ui-surface-inset, #101010);
+    --_hf-ui-surface-raised: var(--hf-ui-surface-raised, #1a1a1a);
+    --_hf-ui-text: var(--hf-ui-text, #e5e5e5);
+    --_hf-ui-text-faint: var(--hf-ui-text-faint, #7e7e7e);
+    --_hf-ui-text-muted: var(--hf-ui-text-muted, #929292);
+    --_hf-ui-text-strong: var(--hf-ui-text-strong, #f3f3f3);
+    --_hf-ui-warning: var(--hf-ui-warning, #e9ab55);
+    --_hf-ui-weight-medium: var(--hf-ui-weight-medium, 500);
+    --_hf-ui-weight-regular: var(--hf-ui-weight-regular, 400);
+    --_hf-ui-weight-semibold: var(--hf-ui-weight-semibold, 600);
+    box-sizing: border-box;
+    color-scheme: dark;
+    font-family: var(--_hf-ui-font-sans);
+  }
+  /* prettier-ignore */
+  [data-hf-ui-root] *,
+  [data-hf-ui-root] *::before,
+  [data-hf-ui-root] *::after {
+    box-sizing: border-box;
+  }
+  /* prettier-ignore */
+  [data-hf-theme="light"] [data-hf-ui-root],
+  [data-hf-ui-root][data-hf-theme="light"] {
+    --_hf-ui-accent: var(--hf-ui-accent, #087a57);
+    --_hf-ui-action: var(--hf-ui-action, #171717);
+    --_hf-ui-action-contrast: var(--hf-ui-action-contrast, #ffffff);
+    --_hf-ui-border: var(--hf-ui-border, #e0dfdb);
+    --_hf-ui-border-strong: var(--hf-ui-border-strong, #cbc9c3);
+    --_hf-ui-canvas: var(--hf-ui-canvas, #f6f5f1);
+    --_hf-ui-control-border: var(--hf-ui-control-border, #888888);
+    --_hf-ui-control-border-hover: var(--hf-ui-control-border-hover, #6f6e68);
+    --_hf-ui-danger: var(--hf-ui-danger, #a61b1b);
+    --_hf-ui-data-1: var(--hf-ui-data-1, #087a57);
+    --_hf-ui-data-2: var(--hf-ui-data-2, #245ea8);
+    --_hf-ui-data-3: var(--hf-ui-data-3, #8a4b00);
+    --_hf-ui-data-4: var(--hf-ui-data-4, #6d3fc0);
+    --_hf-ui-data-5: var(--hf-ui-data-5, #a83d2d);
+    --_hf-ui-shadow-contact: var(--hf-ui-shadow-contact, 0 7px 16px rgba(26, 24, 20, 0.13));
+    --_hf-ui-shadow-inset: var(--hf-ui-shadow-inset, inset 0 1px 0 rgba(255, 255, 255, 0.78));
+    --_hf-ui-shadow-modal: var(--hf-ui-shadow-modal, 0 18px 46px rgba(26, 24, 20, 0.18));
+    --_hf-ui-surface: var(--hf-ui-surface, #ffffff);
+    --_hf-ui-surface-inset: var(--hf-ui-surface-inset, #f0efeb);
+    --_hf-ui-surface-raised: var(--hf-ui-surface-raised, #ffffff);
+    --_hf-ui-text: var(--hf-ui-text, #171717);
+    --_hf-ui-text-faint: var(--hf-ui-text-faint, #6f6e68);
+    --_hf-ui-text-muted: var(--hf-ui-text-muted, #5f5f5a);
+    --_hf-ui-text-strong: var(--hf-ui-text-strong, #0a0a0a);
+    --_hf-ui-warning: var(--hf-ui-warning, #8a4b00);
+    color-scheme: light;
+  }
+  /* prettier-ignore */
+  [data-hf-ui-root]:focus-visible {
+    outline: 2px solid var(--_hf-ui-accent);
+    outline-offset: 3px;
+  }
+  /* prettier-ignore */
+  [data-hf-rendering="true"][data-hf-ui-root],
+  [data-hf-rendering="true"] [data-hf-ui-root],
+  [data-hf-rendering="true"][data-hf-ui-root] *,
+  [data-hf-rendering="true"] [data-hf-ui-root] *,
+  [data-hf-rendering="true"][data-hf-ui-root]::before,
+  [data-hf-rendering="true"][data-hf-ui-root]::after,
+  [data-hf-rendering="true"] [data-hf-ui-root]::before,
+  [data-hf-rendering="true"] [data-hf-ui-root]::after,
+  [data-hf-rendering="true"][data-hf-ui-root] *::before,
+  [data-hf-rendering="true"][data-hf-ui-root] *::after,
+  [data-hf-rendering="true"] [data-hf-ui-root] *::before,
+  [data-hf-rendering="true"] [data-hf-ui-root] *::after {
+    animation-duration: 0s !important;
+    animation-delay: 0s !important;
+    transition-duration: 0s !important;
+    transition-delay: 0s !important;
+  }
+  /* prettier-ignore */
+  @media (prefers-reduced-motion: reduce) {
+    [data-hf-ui-root],
+    [data-hf-ui-root] *,
+    [data-hf-ui-root] *::before,
+    [data-hf-ui-root] *::after {
+      animation-duration: 0s !important;
+      animation-delay: 0s !important;
+      transition-duration: 0s !important;
+      transition-delay: 0s !important;
+      scroll-behavior: auto !important;
+    }
+  }
+  /* hf-ui:tokens:end */
+  .hf-ui-separator {
+    --hf-separator-progress: 1;
+    width: min(360px, 100%);
+    height: 1px;
+    background: var(--_hf-ui-border);
+    overflow: hidden;
+  }
+  .hf-ui-separator span {
+    display: block;
+    width: calc(var(--hf-separator-progress) * 100%);
+    height: 100%;
+    background: var(--_hf-ui-control-border);
+    transform-origin: left center;
+  }
+  .hf-ui-separator[data-orientation="vertical"] {
+    width: 1px;
+    height: 180px;
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-ui-separator', { '--hf-separator-progress': 0 }, { '--hf-separator-progress': 1, duration: 0.42, ease: 'power3.out' }, startTime);
+-->
+<!-- hf-ui:canonical:end -->
+      </section>
+      <p class="hf-ui-demo-caption">Separator</p>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        tl.addLabel("start", 0);
+        tl.set(".hf-ui-demo-stage", { opacity: 1 }, 0);
+        tl.set(".hf-ui-separator", { "--hf-separator-progress": 0, immediateRender: true }, 0);
+        tl.to(
+          ".hf-ui-separator",
+          { "--hf-separator-progress": 1, duration: 0.42, ease: "power3.out" },
+          0.6,
+        );
+        tl.addLabel("end", 3.99);
+        tl.to(".hf-ui-demo-stage", { opacity: 1, duration: 0.01 }, 3.99);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["separator-demo"] = tl;
+      </script>
+    </main>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "separator.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/separator/separator.html b/docs/public/catalog/components/separator/separator.html
new file mode 100644
index 0000000000..cb886ce286
--- /dev/null
+++ b/docs/public/catalog/components/separator/separator.html
@@ -0,0 +1,238 @@
+<!--
+  Separator - Operator Black structural rule primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Animate the CSS
+  variables from a paused GSAP timeline for deterministic video renders.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result as a custom property
+  or an attribute the CSS above consumes. The timeline recipe below is
+  untouched by them: it still drives one progress value from 0 to 1, and these
+  decide what that progress reveals.
+
+    - orientation (horizontal | vertical, default horizontal): which way the
+      rule runs. horizontal is a 360px wide rule wiping left to right,
+      vertical is a 180px tall rule wiping top to bottom.
+    - thickness (hairline | medium | bold, default hairline): the rule size
+      across its short edge, 1px, 2px or 4px.
+    - tone (neutral | accent | warning, default neutral): colour of the
+      revealed fill. neutral keeps the control border grey, accent rides
+      --hf-ui-accent, warning rides --hf-ui-warning.
+
+  On every default the result is identical to the original: a 1px horizontal
+  grey rule wiping left to right.
+-->
+
+<div
+  data-hf-ui-root
+  class="hf-ui-separator"
+  role="separator"
+  aria-orientation="horizontal"
+  data-composition-variables='[
+    { "id": "orientation", "type": "enum", "role": "layout", "label": "Orientation", "description": "Which way the rule runs, and so which way the reveal travels.", "default": "horizontal", "options": [{ "value": "horizontal", "label": "Horizontal" }, { "value": "vertical", "label": "Vertical" }] },
+    { "id": "thickness", "type": "enum", "role": "style", "label": "Thickness", "description": "Size of the rule across its short edge, from a 1px hairline to a 4px bar.", "default": "hairline", "options": [{ "value": "hairline", "label": "Hairline" }, { "value": "medium", "label": "Medium" }, { "value": "bold", "label": "Bold" }] },
+    { "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Colour of the revealed fill: neutral grey, the theme accent, or the warning hue.", "default": "neutral", "options": [{ "value": "neutral", "label": "Neutral" }, { "value": "accent", "label": "Accent" }, { "value": "warning", "label": "Warning" }] }
+  ]'
+>
+  <span></span>
+</div>
+
+<style>
+  /* hf-ui:tokens:start */
+  /* prettier-ignore */
+  [data-hf-ui-root] {
+    --_hf-ui-accent: var(--hf-ui-accent, #3ce6ac);
+    --_hf-ui-action: var(--hf-ui-action, #eeeeee);
+    --_hf-ui-action-contrast: var(--hf-ui-action-contrast, #111111);
+    --_hf-ui-border: var(--hf-ui-border, #2a2a2a);
+    --_hf-ui-border-strong: var(--hf-ui-border-strong, #383838);
+    --_hf-ui-canvas: var(--hf-ui-canvas, #0a0a0a);
+    --_hf-ui-control-border: var(--hf-ui-control-border, #686868);
+    --_hf-ui-control-border-hover: var(--hf-ui-control-border-hover, #777777);
+    --_hf-ui-control-height: var(--hf-ui-control-height, 40px);
+    --_hf-ui-danger: var(--hf-ui-danger, #ff7878);
+    --_hf-ui-data-1: var(--hf-ui-data-1, #3ce6ac);
+    --_hf-ui-data-2: var(--hf-ui-data-2, #63a5ff);
+    --_hf-ui-data-3: var(--hf-ui-data-3, #e9ab55);
+    --_hf-ui-data-4: var(--hf-ui-data-4, #a78bfa);
+    --_hf-ui-data-5: var(--hf-ui-data-5, #ff8a75);
+    --_hf-ui-duration-drawer-enter: var(--hf-ui-duration-drawer-enter, 360ms);
+    --_hf-ui-duration-drawer-exit: var(--hf-ui-duration-drawer-exit, 240ms);
+    --_hf-ui-duration-modal-enter: var(--hf-ui-duration-modal-enter, 280ms);
+    --_hf-ui-duration-modal-exit: var(--hf-ui-duration-modal-exit, 180ms);
+    --_hf-ui-duration-overlay-enter: var(--hf-ui-duration-overlay-enter, 210ms);
+    --_hf-ui-duration-overlay-exit: var(--hf-ui-duration-overlay-exit, 140ms);
+    --_hf-ui-duration-press: var(--hf-ui-duration-press, 120ms);
+    --_hf-ui-duration-state: var(--hf-ui-duration-state, 160ms);
+    --_hf-ui-ease-enter: var(--hf-ui-ease-enter, cubic-bezier(0.32, 0.72, 0, 1));
+    --_hf-ui-ease-exit: var(--hf-ui-ease-exit, cubic-bezier(0.23, 1, 0.32, 1));
+    --_hf-ui-ease-response: var(--hf-ui-ease-response, cubic-bezier(0.23, 1, 0.32, 1));
+    --_hf-ui-font-mono: var(--hf-ui-font-mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
+    --_hf-ui-font-sans: var(--hf-ui-font-sans, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
+    --_hf-ui-hit-target: var(--hf-ui-hit-target, 44px);
+    --_hf-ui-radius-control: var(--hf-ui-radius-control, 5px);
+    --_hf-ui-radius-overlay: var(--hf-ui-radius-overlay, 10px);
+    --_hf-ui-radius-surface: var(--hf-ui-radius-surface, 7px);
+    --_hf-ui-shadow-contact: var(--hf-ui-shadow-contact, 0 8px 18px rgba(0, 0, 0, 0.38));
+    --_hf-ui-shadow-inset: var(--hf-ui-shadow-inset, inset 0 1px 0 rgba(255, 255, 255, 0.035));
+    --_hf-ui-shadow-modal: var(--hf-ui-shadow-modal, 0 18px 46px rgba(0, 0, 0, 0.52));
+    --_hf-ui-space-1: var(--hf-ui-space-1, 4px);
+    --_hf-ui-space-12: var(--hf-ui-space-12, 48px);
+    --_hf-ui-space-16: var(--hf-ui-space-16, 64px);
+    --_hf-ui-space-2: var(--hf-ui-space-2, 8px);
+    --_hf-ui-space-3: var(--hf-ui-space-3, 12px);
+    --_hf-ui-space-4: var(--hf-ui-space-4, 16px);
+    --_hf-ui-space-6: var(--hf-ui-space-6, 24px);
+    --_hf-ui-space-8: var(--hf-ui-space-8, 32px);
+    --_hf-ui-surface: var(--hf-ui-surface, #141414);
+    --_hf-ui-surface-inset: var(--hf-ui-surface-inset, #101010);
+    --_hf-ui-surface-raised: var(--hf-ui-surface-raised, #1a1a1a);
+    --_hf-ui-text: var(--hf-ui-text, #e5e5e5);
+    --_hf-ui-text-faint: var(--hf-ui-text-faint, #7e7e7e);
+    --_hf-ui-text-muted: var(--hf-ui-text-muted, #929292);
+    --_hf-ui-text-strong: var(--hf-ui-text-strong, #f3f3f3);
+    --_hf-ui-warning: var(--hf-ui-warning, #e9ab55);
+    --_hf-ui-weight-medium: var(--hf-ui-weight-medium, 500);
+    --_hf-ui-weight-regular: var(--hf-ui-weight-regular, 400);
+    --_hf-ui-weight-semibold: var(--hf-ui-weight-semibold, 600);
+    box-sizing: border-box;
+    color-scheme: dark;
+    font-family: var(--_hf-ui-font-sans);
+  }
+  /* prettier-ignore */
+  [data-hf-ui-root] *,
+  [data-hf-ui-root] *::before,
+  [data-hf-ui-root] *::after {
+    box-sizing: border-box;
+  }
+  /* prettier-ignore */
+  [data-hf-theme="light"] [data-hf-ui-root],
+  [data-hf-ui-root][data-hf-theme="light"] {
+    --_hf-ui-accent: var(--hf-ui-accent, #087a57);
+    --_hf-ui-action: var(--hf-ui-action, #171717);
+    --_hf-ui-action-contrast: var(--hf-ui-action-contrast, #ffffff);
+    --_hf-ui-border: var(--hf-ui-border, #e0dfdb);
+    --_hf-ui-border-strong: var(--hf-ui-border-strong, #cbc9c3);
+    --_hf-ui-canvas: var(--hf-ui-canvas, #f6f5f1);
+    --_hf-ui-control-border: var(--hf-ui-control-border, #888888);
+    --_hf-ui-control-border-hover: var(--hf-ui-control-border-hover, #6f6e68);
+    --_hf-ui-danger: var(--hf-ui-danger, #a61b1b);
+    --_hf-ui-data-1: var(--hf-ui-data-1, #087a57);
+    --_hf-ui-data-2: var(--hf-ui-data-2, #245ea8);
+    --_hf-ui-data-3: var(--hf-ui-data-3, #8a4b00);
+    --_hf-ui-data-4: var(--hf-ui-data-4, #6d3fc0);
+    --_hf-ui-data-5: var(--hf-ui-data-5, #a83d2d);
+    --_hf-ui-shadow-contact: var(--hf-ui-shadow-contact, 0 7px 16px rgba(26, 24, 20, 0.13));
+    --_hf-ui-shadow-inset: var(--hf-ui-shadow-inset, inset 0 1px 0 rgba(255, 255, 255, 0.78));
+    --_hf-ui-shadow-modal: var(--hf-ui-shadow-modal, 0 18px 46px rgba(26, 24, 20, 0.18));
+    --_hf-ui-surface: var(--hf-ui-surface, #ffffff);
+    --_hf-ui-surface-inset: var(--hf-ui-surface-inset, #f0efeb);
+    --_hf-ui-surface-raised: var(--hf-ui-surface-raised, #ffffff);
+    --_hf-ui-text: var(--hf-ui-text, #171717);
+    --_hf-ui-text-faint: var(--hf-ui-text-faint, #6f6e68);
+    --_hf-ui-text-muted: var(--hf-ui-text-muted, #5f5f5a);
+    --_hf-ui-text-strong: var(--hf-ui-text-strong, #0a0a0a);
+    --_hf-ui-warning: var(--hf-ui-warning, #8a4b00);
+    color-scheme: light;
+  }
+  /* prettier-ignore */
+  [data-hf-ui-root]:focus-visible {
+    outline: 2px solid var(--_hf-ui-accent);
+    outline-offset: 3px;
+  }
+  /* prettier-ignore */
+  [data-hf-rendering="true"][data-hf-ui-root],
+  [data-hf-rendering="true"] [data-hf-ui-root],
+  [data-hf-rendering="true"][data-hf-ui-root] *,
+  [data-hf-rendering="true"] [data-hf-ui-root] *,
+  [data-hf-rendering="true"][data-hf-ui-root]::before,
+  [data-hf-rendering="true"][data-hf-ui-root]::after,
+  [data-hf-rendering="true"] [data-hf-ui-root]::before,
+  [data-hf-rendering="true"] [data-hf-ui-root]::after,
+  [data-hf-rendering="true"][data-hf-ui-root] *::before,
+  [data-hf-rendering="true"][data-hf-ui-root] *::after,
+  [data-hf-rendering="true"] [data-hf-ui-root] *::before,
+  [data-hf-rendering="true"] [data-hf-ui-root] *::after {
+    animation-duration: 0s !important;
+    animation-delay: 0s !important;
+    transition-duration: 0s !important;
+    transition-delay: 0s !important;
+  }
+  /* prettier-ignore */
+  @media (prefers-reduced-motion: reduce) {
+    [data-hf-ui-root],
+    [data-hf-ui-root] *,
+    [data-hf-ui-root] *::before,
+    [data-hf-ui-root] *::after {
+      animation-duration: 0s !important;
+      animation-delay: 0s !important;
+      transition-duration: 0s !important;
+      transition-delay: 0s !important;
+      scroll-behavior: auto !important;
+    }
+  }
+  /* hf-ui:tokens:end */
+  .hf-ui-separator {
+    --hf-separator-progress: 1;
+    width: min(360px, 100%);
+    height: var(--hf-separator-thickness, 1px);
+    background: var(--_hf-ui-border);
+    overflow: hidden;
+  }
+  .hf-ui-separator span {
+    display: block;
+    width: calc(var(--hf-separator-progress) * 100%);
+    height: 100%;
+    background: var(--hf-separator-fill, var(--_hf-ui-control-border));
+    transform-origin: left center;
+  }
+  .hf-ui-separator[data-orientation="vertical"] {
+    width: var(--hf-separator-thickness, 1px);
+    height: 180px;
+  }
+  .hf-ui-separator[data-orientation="vertical"] span {
+    width: 100%;
+    height: calc(var(--hf-separator-progress) * 100%);
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    var orientations = { horizontal: true, vertical: true };
+    var thicknesses = { hairline: "1px", medium: "2px", bold: "4px" };
+    var tones = {
+      neutral: "var(--_hf-ui-control-border)",
+      accent: "var(--_hf-ui-accent)",
+      warning: "var(--_hf-ui-warning)",
+    };
+
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var orientation = pick(orientations, vars.orientation, "horizontal");
+    var thickness = thicknesses[pick(thicknesses, vars.thickness, "hairline")];
+    var tone = tones[pick(tones, vars.tone, "neutral")];
+
+    var roots = document.querySelectorAll(".hf-ui-separator");
+    for (var i = 0; i < roots.length; i += 1) {
+      roots[i].setAttribute("data-orientation", orientation);
+      roots[i].setAttribute("aria-orientation", orientation);
+      roots[i].style.setProperty("--hf-separator-thickness", thickness);
+      roots[i].style.setProperty("--hf-separator-fill", tone);
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-ui-separator', { '--hf-separator-progress': 0 }, { '--hf-separator-progress': 1, duration: 0.42, ease: 'power3.out' }, startTime);
+-->
diff --git a/docs/public/catalog/components/settings-toggle-flow/demo.html b/docs/public/catalog/components/settings-toggle-flow/demo.html
new file mode 100644
index 0000000000..87484bcbdf
--- /dev/null
+++ b/docs/public/catalog/components/settings-toggle-flow/demo.html
@@ -0,0 +1,148 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Settings Toggle Flow - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f8fafc;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        min-width: 760px;
+        min-height: 520px;
+        padding: 56px;
+        transform: scale(
+          1.2
+        ); /* ponytail: scale wrapper not GSAP target; GSAP animates .hf-ui-settings-flow and children */
+        transform-origin: center center;
+      }
+      .hf-ui-settings-flow {
+        display: grid;
+        gap: 12px;
+        width: 520px;
+        padding: 18px;
+        border: 1px solid #e4e4e7;
+        border-radius: 28px;
+        background: #ffffff;
+        color: #18181b;
+        font-family: Inter, system-ui, sans-serif;
+        box-shadow: 0 26px 80px rgba(0, 0, 0, 0.1);
+      }
+      .hf-ui-settings-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        min-height: 72px;
+        padding: 0 16px;
+        border-radius: 18px;
+        background: #f8fafc;
+      }
+      .hf-ui-settings-row div {
+        display: grid;
+        gap: 4px;
+      }
+      .hf-ui-settings-row strong {
+        font-size: 18px;
+      }
+      .hf-ui-settings-row span {
+        color: #71717a;
+        font-size: 13px;
+        font-weight: 500;
+      }
+      .hf-ui-settings-row i {
+        position: relative;
+        width: 50px;
+        height: 28px;
+        border-radius: 999px;
+        background: #d4d4d8;
+      }
+      .hf-ui-settings-row i::after {
+        content: "";
+        position: absolute;
+        left: 4px;
+        top: 4px;
+        width: 20px;
+        height: 20px;
+        border-radius: 999px;
+        background: #ffffff;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
+      }
+      .hf-ui-settings-row i.on {
+        background: #18181b;
+      }
+      .hf-ui-settings-row i.on::after {
+        transform: translateX(22px);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="settings-toggle-flow-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-ui-settings-flow">
+          <div class="hf-ui-settings-row">
+            <div><strong>Auto captions</strong><span>Generate timed captions</span></div>
+            <i class="on"></i>
+          </div>
+          <div class="hf-ui-settings-row">
+            <div><strong>Brand kit</strong><span>Apply saved colors</span></div>
+            <i class="on"></i>
+          </div>
+          <div class="hf-ui-settings-row">
+            <div><strong>Sound effects</strong><span>Layer subtle UI sounds</span></div>
+            <i></i>
+          </div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        tl.fromTo(
+          ".hf-ui-settings-flow",
+          { opacity: 0, y: 24 },
+          { opacity: 1, y: 0, duration: 0.34, ease: "power2.out" },
+          0.28,
+        );
+        tl.fromTo(
+          ".hf-ui-settings-row",
+          { x: -18, opacity: 0 },
+          { x: 0, opacity: 1, duration: 0.28, stagger: 0.08, ease: "power2.out" },
+          0.55,
+        );
+        tl.fromTo(
+          ".hf-ui-settings-row i.on",
+          { scale: 0.92 },
+          { scale: 1, duration: 0.28, stagger: 0.08, ease: "back.out(1.8)" },
+          0.88,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["settings-toggle-flow-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/settings-toggle-flow/settings-toggle-flow.html b/docs/public/catalog/components/settings-toggle-flow/settings-toggle-flow.html
new file mode 100644
index 0000000000..fd62da4e56
--- /dev/null
+++ b/docs/public/catalog/components/settings-toggle-flow/settings-toggle-flow.html
@@ -0,0 +1,88 @@
+<!--
+  Settings Toggle Flow - Remocn-inspired composed UI flow for HyperFrames.
+
+  Paste the markup and CSS into a composition. Use the timeline integration
+  note at the bottom as the starting point for deterministic GSAP animation.
+-->
+
+<div class="hf-ui-settings-flow">
+  <div class="hf-ui-settings-row">
+    <div><strong>Auto captions</strong><span>Generate timed captions</span></div>
+    <i class="on"></i>
+  </div>
+  <div class="hf-ui-settings-row">
+    <div><strong>Brand kit</strong><span>Apply saved colors</span></div>
+    <i class="on"></i>
+  </div>
+  <div class="hf-ui-settings-row">
+    <div><strong>Sound effects</strong><span>Layer subtle UI sounds</span></div>
+    <i></i>
+  </div>
+</div>
+
+<style>
+  .hf-ui-settings-flow {
+    display: grid;
+    gap: 12px;
+    width: 520px;
+    padding: 18px;
+    border: 1px solid #e4e4e7;
+    border-radius: 28px;
+    background: #ffffff;
+    color: #18181b;
+    font-family: Inter, system-ui, sans-serif;
+    box-shadow: 0 26px 80px rgba(0, 0, 0, 0.1);
+  }
+  .hf-ui-settings-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    min-height: 72px;
+    padding: 0 16px;
+    border-radius: 18px;
+    background: #f8fafc;
+  }
+  .hf-ui-settings-row div {
+    display: grid;
+    gap: 4px;
+  }
+  .hf-ui-settings-row strong {
+    font-size: 18px;
+  }
+  .hf-ui-settings-row span {
+    color: #71717a;
+    font-size: 13px;
+    font-weight: 760;
+  }
+  .hf-ui-settings-row i {
+    position: relative;
+    width: 50px;
+    height: 28px;
+    border-radius: 999px;
+    background: #d4d4d8;
+  }
+  .hf-ui-settings-row i::after {
+    content: "";
+    position: absolute;
+    left: 4px;
+    top: 4px;
+    width: 20px;
+    height: 20px;
+    border-radius: 999px;
+    background: #ffffff;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
+  }
+  .hf-ui-settings-row i.on {
+    background: #18181b;
+  }
+  .hf-ui-settings-row i.on::after {
+    transform: translateX(22px);
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-ui-settings-flow', { opacity: 0, y: 24 }, { opacity: 1, y: 0, duration: 0.34, ease: 'power2.out' }, 0.28);
+  tl.fromTo('.hf-ui-settings-row', { x: -18, opacity: 0 }, { x: 0, opacity: 1, duration: 0.28, stagger: 0.08, ease: 'power2.out' }, 0.55);
+  tl.fromTo('.hf-ui-settings-row i.on', { scale: 0.92 }, { scale: 1, duration: 0.28, stagger: 0.08, ease: 'back.out(1.8)' }, 0.88);
+-->
diff --git a/docs/public/catalog/components/shader-displacement-panel/demo.html b/docs/public/catalog/components/shader-displacement-panel/demo.html
new file mode 100644
index 0000000000..e4a1ad80d9
--- /dev/null
+++ b/docs/public/catalog/components/shader-displacement-panel/demo.html
@@ -0,0 +1,113 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Shader Displacement Panel - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-advanced-shader-displacement-panel {
+        color: #111827;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-advanced-shader-displacement-panel {
+        position: relative;
+        width: 760px;
+        height: 430px;
+        perspective: 900px;
+        border-radius: 30px;
+        overflow: hidden;
+        background: linear-gradient(135deg, #0f172a, #312e81);
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+        /* ponytail: zoom scales the whole widget without touching GSAP's inline transform on .panel */
+        zoom: 1.72;
+      }
+      .hf-advanced-shader-displacement-panel .panel {
+        position: absolute;
+        inset: 56px 90px;
+        border-radius: 30px;
+        background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.52));
+        border: 1px solid rgba(255, 255, 255, 0.45);
+        backdrop-filter: blur(18px);
+        transform: rotateY(var(--hf-rotate-y, -16deg)) rotateX(var(--hf-rotate-x, 9deg))
+          translateZ(var(--hf-z, 0px));
+        box-shadow: 0 28px 90px rgba(0, 0, 0, 0.22);
+        display: grid;
+        place-items: center;
+        text-align: center;
+      }
+      .hf-advanced-shader-displacement-panel h3 {
+        margin: 0;
+        color: #111827;
+        font-size: 42px;
+        letter-spacing: -0.05em;
+      }
+      .hf-advanced-shader-displacement-panel p {
+        margin: 10px 0 0;
+        color: #475569;
+        font-size: 18px;
+        line-height: 1.5;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="shader-displacement-panel-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="hf-advanced-shader-displacement-panel">
+        <div class="panel">
+          <div>
+            <h3>Shader Displacement Panel</h3>
+            <p>
+              A CSS/WebGL-inspired displacement panel for premium scene reveals without a custom
+              shader dependency.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script>
+      const tl = gsap.timeline({ paused: true });
+      const startTime = 0.5;
+      tl.fromTo(
+        ".hf-advanced-shader-displacement-panel .panel",
+        { "--hf-rotate-y": "-20deg", "--hf-rotate-x": "12deg", "--hf-z": "-80px", opacity: 0 },
+        {
+          "--hf-rotate-y": "10deg",
+          "--hf-rotate-x": "-4deg",
+          "--hf-z": "80px",
+          opacity: 1,
+          duration: 1.2,
+          ease: "power3.out",
+        },
+        startTime,
+      );
+      tl.set({}, {}, 5);
+      window.__timelines = window.__timelines || {};
+      window.__timelines["shader-displacement-panel-demo"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/shader-displacement-panel/shader-displacement-panel.html b/docs/public/catalog/components/shader-displacement-panel/shader-displacement-panel.html
new file mode 100644
index 0000000000..568fafc0d8
--- /dev/null
+++ b/docs/public/catalog/components/shader-displacement-panel/shader-displacement-panel.html
@@ -0,0 +1,66 @@
+<!--
+  Shader Displacement Panel - advanced HyperFrames primitive.
+
+  This is intentionally seekable: drive it from a paused GSAP timeline.
+  MotionPath examples require GSAP MotionPathPlugin. Three.js examples expose
+  a render(progress) adapter instead of a free-running requestAnimationFrame loop.
+-->
+
+<div class="hf-advanced-shader-displacement-panel">
+  <div class="panel">
+    <div>
+      <h3>Shader Displacement Panel</h3>
+      <p>
+        A CSS/WebGL-inspired displacement panel for premium scene reveals without a custom shader
+        dependency.
+      </p>
+    </div>
+  </div>
+</div>
+
+<style>
+  .hf-advanced-shader-displacement-panel {
+    color: #111827;
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-advanced-shader-displacement-panel {
+    position: relative;
+    width: 760px;
+    height: 430px;
+    perspective: 900px;
+    border-radius: 30px;
+    overflow: hidden;
+    background: linear-gradient(135deg, #0f172a, #312e81);
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+  }
+  .hf-advanced-shader-displacement-panel .panel {
+    position: absolute;
+    inset: 56px 90px;
+    border-radius: 30px;
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.52));
+    border: 1px solid rgba(255, 255, 255, 0.45);
+    backdrop-filter: blur(18px);
+    transform: rotateY(var(--hf-rotate-y, -16deg)) rotateX(var(--hf-rotate-x, 9deg))
+      translateZ(var(--hf-z, 0px));
+    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.22);
+    display: grid;
+    place-items: center;
+    text-align: center;
+  }
+  .hf-advanced-shader-displacement-panel h3 {
+    margin: 0;
+    color: #111827;
+    font-size: 42px;
+    letter-spacing: -0.05em;
+  }
+  .hf-advanced-shader-displacement-panel p {
+    margin: 8px 0 0;
+    color: #475569;
+  }
+</style>
+
+<!--
+  Timeline integration:
+  const startTime = 0;
+  tl.fromTo('.hf-advanced-shader-displacement-panel .panel', { '--hf-rotate-y': '-20deg', '--hf-rotate-x': '12deg', '--hf-z': '-80px', opacity: 0 }, { '--hf-rotate-y': '10deg', '--hf-rotate-x': '-4deg', '--hf-z': '80px', opacity: 1, duration: 1.2, ease: 'power3.out' }, startTime);
+-->
diff --git a/docs/public/catalog/components/shared-axis-y/__hf-variables-preview.html b/docs/public/catalog/components/shared-axis-y/__hf-variables-preview.html
new file mode 100644
index 0000000000..ba8dcc898c
--- /dev/null
+++ b/docs/public/catalog/components/shared-axis-y/__hf-variables-preview.html
@@ -0,0 +1,70 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Shared Axis Y variables preview</title>
+    <style>
+      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #f4f4f5; }
+      #hf-vars-root { position: relative; width: 1920px; height: 1080px; }
+      #hf-vars-mount { position: absolute; inset: 0; display: grid; place-items: center; }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  </head>
+  <body>
+    <div id="hf-vars-root" data-composition-id="shared-axis-y-variables-preview" data-start="0" data-width="1920" data-height="1080" data-duration="5" data-fps="30">
+      <div id="hf-vars-mount" class="clip" data-composition-id="shared-axis-y" data-composition-src="./shared-axis-y.html" data-start="0" data-duration="5" data-track-index="0" data-width="1920" data-height="1080"></div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["shared-axis-y-variables-preview"] = gsap.timeline({ paused: true });
+    </script>
+    <script>
+      (function () {
+        var mount = document.getElementById("hf-vars-mount");
+        // The mount is filled asynchronously, and the demo script selects
+        // what it fills it with, so it cannot run before then.
+        var observer = new MutationObserver(build);
+        observer.observe(mount, { childList: true, subtree: true });
+        build();
+        function build() {
+          if (!mount.firstElementChild) return;
+          observer.disconnect();
+
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-shared-axis-y span",
+          { opacity: 0, "--hf-word-y": "32px" },
+          { opacity: 1, "--hf-word-y": "0px", duration: 0.22, stagger: 0.075, ease: "power2.out" },
+          startTime,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["shared-axis-y-demo"] = tl;
+          var child = window.__timelines["shared-axis-y-demo"];
+          delete window.__timelines["shared-axis-y-demo"];
+          if (!child || typeof child.paused !== "function") return;
+          child.paused(false);
+          window.__timelines["shared-axis-y-variables-preview"].add(child, 0);
+        }
+      })();
+    </script>
+<script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "shared-axis-y.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/shared-axis-y/demo.html b/docs/public/catalog/components/shared-axis-y/demo.html
new file mode 100644
index 0000000000..758efc5124
--- /dev/null
+++ b/docs/public/catalog/components/shared-axis-y/demo.html
@@ -0,0 +1,153 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Shared Axis Y - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f4f4f5;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      /* ponytail: zoom on .demo-frame (non-GSAP wrapper) keeps GSAP inline transforms on the child untouched */
+      .demo-frame {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 0;
+        zoom: 2.2;
+      }
+      .demo-card {
+        background: #fafafa;
+        border: 1px solid #e4e4e7;
+        border-radius: 16px;
+        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.1);
+        padding: 48px 56px 52px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 32px;
+        min-width: 480px;
+      }
+      .demo-label {
+        font-size: 11px;
+        font-weight: 600;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+        color: #71717a;
+      }
+      .demo-tabs {
+        display: flex;
+        gap: 4px;
+        background: #f4f4f5;
+        border-radius: 10px;
+        padding: 4px;
+      }
+      .demo-tab {
+        font-size: 13px;
+        font-weight: 500;
+        color: #71717a;
+        padding: 6px 16px;
+        border-radius: 7px;
+        cursor: default;
+      }
+      .demo-tab.active {
+        background: #fff;
+        color: #18181b;
+        font-weight: 600;
+        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+      }
+      .demo-divider {
+        width: 100%;
+        height: 1px;
+        background: #e4e4e7;
+      }
+      .hf-remocn-shared-axis-y {
+        color: #18181b;
+        font-family: Inter, system-ui, sans-serif;
+        font-weight: 800;
+        letter-spacing: -0.03em;
+        display: inline-flex;
+        gap: 10px;
+        font-size: 48px;
+        line-height: 1;
+      }
+      .hf-remocn-shared-axis-y span {
+        display: inline-block;
+        transform: translate(var(--hf-word-x, 0px), var(--hf-word-y, 0px))
+          scale(var(--hf-word-scale, 1));
+        filter: blur(var(--hf-word-blur, 0px));
+        will-change: transform, filter, opacity;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="shared-axis-y-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="demo-card">
+          <span class="demo-label">Mode</span>
+          <div class="demo-tabs">
+            <div class="demo-tab active">Plan</div>
+            <div class="demo-tab">Debug</div>
+            <div class="demo-tab">Ask</div>
+          </div>
+          <div class="demo-divider"></div>
+          <div class="hf-remocn-shared-axis-y">
+            <span>Plan</span><span>Debug</span><span>Ask</span>
+          </div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-shared-axis-y span",
+          { opacity: 0, "--hf-word-y": "32px" },
+          { opacity: 1, "--hf-word-y": "0px", duration: 0.22, stagger: 0.075, ease: "power2.out" },
+          startTime,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["shared-axis-y-demo"] = tl;
+      </script>
+    </div>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "shared-axis-y.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/shared-axis-y/shared-axis-y.html b/docs/public/catalog/components/shared-axis-y/shared-axis-y.html
new file mode 100644
index 0000000000..24ad84d168
--- /dev/null
+++ b/docs/public/catalog/components/shared-axis-y/shared-axis-y.html
@@ -0,0 +1,98 @@
+<!--
+  Shared Axis Y - remocn typography primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Drive the timeline
+  integration from a paused GSAP timeline so renders remain deterministic.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result as a custom property
+  the CSS above consumes. The timeline recipe below is untouched by them: it
+  keeps driving one vertical offset, and these decide what that offset means
+  on screen. At rest the offset is 0, so every setting lands on the same
+  final frame.
+
+    - direction (up | down, default up): which side of the baseline the words
+      travel in from. up rises into place, down drops in.
+    - distance (close | standard | far, default standard): scales the offset.
+      close covers half the run, far nearly double, in the same time.
+    - tone (ink | paper | accent, default ink): word colour. ink is near-black
+      for light frames, paper near-white for dark ones, accent rides --brand.
+
+  On every default the result is identical to the original: words rise 32px
+  into place in near-black.
+-->
+
+<div
+  class="hf-remocn-shared-axis-y"
+  data-composition-variables='[
+    { "id": "direction", "type": "enum", "role": "motion", "label": "Direction", "description": "Which side of the baseline the words travel in from.", "default": "up", "options": [{ "value": "up", "label": "Up" }, { "value": "down", "label": "Down" }] },
+    { "id": "distance", "type": "enum", "role": "motion", "label": "Distance", "description": "Scales the vertical offset, so the words cover a shorter or longer run in the same time.", "default": "standard", "options": [{ "value": "close", "label": "Close" }, { "value": "standard", "label": "Standard" }, { "value": "far", "label": "Far" }] },
+    { "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Word colour: ink for light frames, paper for dark ones, accent rides --brand.", "default": "ink", "options": [{ "value": "ink", "label": "Ink" }, { "value": "paper", "label": "Paper" }, { "value": "accent", "label": "Accent" }] }
+  ]'
+>
+  <span>Plan</span><span>Debug</span><span>Ask</span>
+</div>
+
+<style>
+  .hf-remocn-shared-axis-y {
+    color: var(--hf-word-color, #18181b);
+    font-family: Inter, system-ui, sans-serif;
+    font-weight: 900;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-shared-axis-y {
+    display: inline-flex;
+    gap: 12px;
+    font-size: 56px;
+    line-height: 1;
+  }
+  .hf-remocn-shared-axis-y span {
+    display: inline-block;
+    transform: translate(
+        var(--hf-word-x, 0px),
+        calc(var(--hf-word-y, 0px) * var(--hf-word-axis-y, 1))
+      )
+      scale(var(--hf-word-scale, 1));
+    filter: blur(var(--hf-word-blur, 0px));
+    will-change: transform, filter, opacity;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    var signs = { up: 1, down: -1 };
+    var reaches = { close: 0.5, standard: 1, far: 1.85 };
+    var tones = {
+      ink: "#18181b",
+      paper: "#fafafa",
+      accent: "var(--brand, #34d399)",
+    };
+
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var sign = signs[pick(signs, vars.direction, "up")];
+    var reach = reaches[pick(reaches, vars.distance, "standard")];
+    var tone = tones[pick(tones, vars.tone, "ink")];
+
+    var roots = document.querySelectorAll(".hf-remocn-shared-axis-y");
+    for (var i = 0; i < roots.length; i += 1) {
+      roots[i].style.setProperty("--hf-word-axis-y", String(sign * reach));
+      roots[i].style.setProperty("--hf-word-color", tone);
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-shared-axis-y span', { opacity: 0, '--hf-word-y': '32px' }, { opacity: 1, '--hf-word-y': '0px', duration: 0.22, stagger: 0.075, ease: 'power2.out' }, startTime);
+-->
diff --git a/docs/public/catalog/components/shared-axis-z/__hf-variables-preview.html b/docs/public/catalog/components/shared-axis-z/__hf-variables-preview.html
new file mode 100644
index 0000000000..7a25b10e48
--- /dev/null
+++ b/docs/public/catalog/components/shared-axis-z/__hf-variables-preview.html
@@ -0,0 +1,95 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Shared Axis Z variables preview</title>
+    <style>
+      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #f4f4f5; }
+      #hf-vars-root { position: relative; width: 1920px; height: 1080px; }
+      #hf-vars-mount { position: absolute; inset: 0; display: grid; place-items: center; }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  </head>
+  <body>
+    <div id="hf-vars-root" data-composition-id="shared-axis-z-variables-preview" data-start="0" data-width="1920" data-height="1080" data-duration="5" data-fps="30">
+      <div id="hf-vars-mount" class="clip" data-composition-id="shared-axis-z" data-composition-src="./shared-axis-z.html" data-start="0" data-duration="5" data-track-index="0" data-width="1920" data-height="1080"></div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["shared-axis-z-variables-preview"] = gsap.timeline({ paused: true });
+    </script>
+    <script>
+      (function () {
+        var mount = document.getElementById("hf-vars-mount");
+        // The mount is filled asynchronously, and the demo script selects
+        // what it fills it with, so it cannot run before then.
+        var observer = new MutationObserver(build);
+        observer.observe(mount, { childList: true, subtree: true });
+        build();
+        function build() {
+          if (!mount.firstElementChild) return;
+          observer.disconnect();
+
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+
+        // Outgoing panel: zoom out + fade (shared-axis Z departure)
+        tl.fromTo(
+          ".axis-z-outgoing",
+          { opacity: 1, scale: 1 },
+          { opacity: 0, scale: 1.18, duration: 0.4, ease: "power2.in" },
+          startTime,
+        );
+
+        // Incoming panel: zoom in from small + fade (shared-axis Z arrival)
+        tl.fromTo(
+          ".axis-z-incoming",
+          { opacity: 0, scale: 0.82 },
+          { opacity: 1, scale: 1, duration: 0.45, ease: "expo.out" },
+          startTime + 0.05,
+        );
+
+        // Word-by-word reveal on the title
+        tl.fromTo(
+          ".hf-remocn-shared-axis-z span",
+          { opacity: 0, "--hf-word-scale": 0.72 },
+          {
+            opacity: 1,
+            "--hf-word-scale": 1,
+            duration: 0.34,
+            stagger: 0.06,
+            ease: "back.out(1.8)",
+          },
+          startTime + 0.28,
+        );
+
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["shared-axis-z-demo"] = tl;
+          var child = window.__timelines["shared-axis-z-demo"];
+          delete window.__timelines["shared-axis-z-demo"];
+          if (!child || typeof child.paused !== "function") return;
+          child.paused(false);
+          window.__timelines["shared-axis-z-variables-preview"].add(child, 0);
+        }
+      })();
+    </script>
+<script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "shared-axis-z.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/shared-axis-z/demo.html b/docs/public/catalog/components/shared-axis-z/demo.html
new file mode 100644
index 0000000000..d660b27de7
--- /dev/null
+++ b/docs/public/catalog/components/shared-axis-z/demo.html
@@ -0,0 +1,298 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Shared Axis Z - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f4f4f5;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      /* ponytail: demo-frame is not a GSAP target — CSS transform is safe */
+      .demo-frame {
+        position: relative;
+        width: 720px;
+        height: 480px;
+        transform: scale(1.6);
+      }
+      /* Shared container that clips both panels */
+      .axis-z-stage {
+        position: relative;
+        width: 720px;
+        height: 480px;
+        border-radius: 16px;
+        overflow: hidden;
+        box-shadow:
+          0 32px 80px rgba(0, 0, 0, 0.12),
+          0 2px 8px rgba(0, 0, 0, 0.06);
+        border: 1px solid #e4e4e7;
+        background: #ffffff;
+      }
+      /* Outgoing panel (zooms out + fades) */
+      .axis-z-outgoing {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 14px;
+        background: #ffffff;
+        will-change: transform, opacity;
+      }
+      .axis-z-outgoing-icon {
+        width: 52px;
+        height: 52px;
+        border-radius: 12px;
+        background: #18181b;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .axis-z-outgoing-icon svg {
+        width: 26px;
+        height: 26px;
+        fill: none;
+        stroke: #ffffff;
+        stroke-width: 2;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+      .axis-z-outgoing-title {
+        font-size: 18px;
+        font-weight: 600;
+        color: #18181b;
+        letter-spacing: -0.02em;
+      }
+      .axis-z-outgoing-subtitle {
+        font-size: 13px;
+        font-weight: 400;
+        color: #71717a;
+      }
+      .axis-z-outgoing-row {
+        display: flex;
+        gap: 8px;
+        margin-top: 4px;
+      }
+      .axis-z-chip {
+        padding: 5px 12px;
+        border-radius: 999px;
+        background: #f4f4f5;
+        border: 1px solid #e4e4e7;
+        font-size: 12px;
+        font-weight: 500;
+        color: #52525b;
+      }
+      /* Incoming panel (the component output — zooms in from small) */
+      .axis-z-incoming {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        flex-direction: column;
+        padding: 40px;
+        gap: 24px;
+        background: #ffffff;
+        will-change: transform, opacity;
+      }
+      .axis-z-incoming-header {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+      }
+      .axis-z-incoming-eyebrow {
+        font-size: 11px;
+        font-weight: 600;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+        color: #71717a;
+      }
+      /* GSAP animates .hf-remocn-shared-axis-z span — must keep class + span structure */
+      .hf-remocn-shared-axis-z {
+        display: inline-flex;
+        gap: 10px;
+        font-size: 36px;
+        font-weight: 800;
+        letter-spacing: -0.04em;
+        line-height: 1;
+        color: #18181b;
+      }
+      .hf-remocn-shared-axis-z span {
+        display: inline-block;
+        transform: translate(var(--hf-word-x, 0px), var(--hf-word-y, 0px))
+          scale(var(--hf-word-scale, 1));
+        filter: blur(var(--hf-word-blur, 0px));
+        will-change: transform, filter, opacity;
+      }
+      .axis-z-incoming-meta {
+        font-size: 13px;
+        color: #71717a;
+        font-weight: 400;
+        line-height: 1.5;
+        max-width: 400px;
+      }
+      .axis-z-incoming-stats {
+        display: flex;
+        gap: 16px;
+        margin-top: auto;
+      }
+      .axis-z-stat {
+        display: flex;
+        flex-direction: column;
+        gap: 3px;
+        padding: 16px 20px;
+        background: #fafafa;
+        border: 1px solid #e4e4e7;
+        border-radius: 10px;
+        flex: 1;
+      }
+      .axis-z-stat-value {
+        font-size: 22px;
+        font-weight: 700;
+        color: #18181b;
+        letter-spacing: -0.03em;
+      }
+      .axis-z-stat-label {
+        font-size: 11px;
+        font-weight: 500;
+        color: #71717a;
+        text-transform: uppercase;
+        letter-spacing: 0.06em;
+      }
+      .axis-z-divider {
+        width: 100%;
+        height: 1px;
+        background: #e4e4e7;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="shared-axis-z-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="axis-z-stage">
+          <!-- Outgoing view: zooms out + fades as incoming arrives -->
+          <div class="axis-z-outgoing">
+            <div class="axis-z-outgoing-icon">
+              <svg viewBox="0 0 24 24">
+                <rect x="3" y="3" width="7" height="7" rx="1" />
+                <rect x="14" y="3" width="7" height="7" rx="1" />
+                <rect x="3" y="14" width="7" height="7" rx="1" />
+                <rect x="14" y="14" width="7" height="7" rx="1" />
+              </svg>
+            </div>
+            <div class="axis-z-outgoing-title">Overview</div>
+            <div class="axis-z-outgoing-subtitle">Select a context to zoom in</div>
+            <div class="axis-z-outgoing-row">
+              <div class="axis-z-chip">Analytics</div>
+              <div class="axis-z-chip">Reports</div>
+              <div class="axis-z-chip">Settings</div>
+            </div>
+          </div>
+
+          <!-- Incoming view: zooms in from center (shared-axis-Z) -->
+          <div class="axis-z-incoming">
+            <div class="axis-z-incoming-header">
+              <div class="axis-z-incoming-eyebrow">Analytics</div>
+              <div class="hf-remocn-shared-axis-z"><span>Zoom</span><span>context</span></div>
+              <div class="axis-z-incoming-meta">
+                Drill into any metric with a shared-axis Z transition — the new view scales in from
+                the tap point.
+              </div>
+            </div>
+            <div class="axis-z-divider"></div>
+            <div class="axis-z-incoming-stats">
+              <div class="axis-z-stat">
+                <div class="axis-z-stat-value">24.8k</div>
+                <div class="axis-z-stat-label">Sessions</div>
+              </div>
+              <div class="axis-z-stat">
+                <div class="axis-z-stat-value">3.4s</div>
+                <div class="axis-z-stat-label">Avg. time</div>
+              </div>
+              <div class="axis-z-stat">
+                <div class="axis-z-stat-value">91%</div>
+                <div class="axis-z-stat-label">Retention</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+
+        // Outgoing panel: zoom out + fade (shared-axis Z departure)
+        tl.fromTo(
+          ".axis-z-outgoing",
+          { opacity: 1, scale: 1 },
+          { opacity: 0, scale: 1.18, duration: 0.4, ease: "power2.in" },
+          startTime,
+        );
+
+        // Incoming panel: zoom in from small + fade (shared-axis Z arrival)
+        tl.fromTo(
+          ".axis-z-incoming",
+          { opacity: 0, scale: 0.82 },
+          { opacity: 1, scale: 1, duration: 0.45, ease: "expo.out" },
+          startTime + 0.05,
+        );
+
+        // Word-by-word reveal on the title
+        tl.fromTo(
+          ".hf-remocn-shared-axis-z span",
+          { opacity: 0, "--hf-word-scale": 0.72 },
+          {
+            opacity: 1,
+            "--hf-word-scale": 1,
+            duration: 0.34,
+            stagger: 0.06,
+            ease: "back.out(1.8)",
+          },
+          startTime + 0.28,
+        );
+
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["shared-axis-z-demo"] = tl;
+      </script>
+    </div>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "shared-axis-z.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/shared-axis-z/shared-axis-z.html b/docs/public/catalog/components/shared-axis-z/shared-axis-z.html
new file mode 100644
index 0000000000..127c1094ab
--- /dev/null
+++ b/docs/public/catalog/components/shared-axis-z/shared-axis-z.html
@@ -0,0 +1,97 @@
+<!--
+  Shared Axis Z - remocn typography primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Drive the timeline
+  integration from a paused GSAP timeline so renders remain deterministic.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result as a custom property
+  the CSS above consumes. The timeline recipe below is untouched by them: it
+  keeps driving one scale from 0.72 to 1, and these decide how far from the
+  final size that start really sits. At rest the scale is 1, so every setting
+  lands on the same final frame.
+
+    - direction (in | out, default in): which way the words travel along the
+      z axis. in swells up from a smaller start, out settles down from a
+      larger one.
+    - depth (shallow | standard | deep, default standard): scales the gap
+      between the start size and the final size. shallow covers half the run,
+      deep nearly double, in the same time.
+    - tone (ink | paper | accent, default ink): word colour. ink is near-black
+      for light frames, paper near-white for dark ones, accent rides --brand.
+
+  On every default the result is identical to the original: words swell from
+  0.72 to full size in near-black.
+-->
+
+<div
+  class="hf-remocn-shared-axis-z"
+  data-composition-variables='[
+    { "id": "direction", "type": "enum", "role": "motion", "label": "Direction", "description": "Which way the words travel along the z axis: in swells up from small, out settles down from large.", "default": "in", "options": [{ "value": "in", "label": "In" }, { "value": "out", "label": "Out" }] },
+    { "id": "depth", "type": "enum", "role": "motion", "label": "Depth", "description": "Scales how far the words start from their final size, so the push covers a shorter or longer run in the same time.", "default": "standard", "options": [{ "value": "shallow", "label": "Shallow" }, { "value": "standard", "label": "Standard" }, { "value": "deep", "label": "Deep" }] },
+    { "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Word colour: ink for light frames, paper for dark ones, accent rides --brand.", "default": "ink", "options": [{ "value": "ink", "label": "Ink" }, { "value": "paper", "label": "Paper" }, { "value": "accent", "label": "Accent" }] }
+  ]'
+>
+  <span>Zoom</span><span>context</span>
+</div>
+
+<style>
+  .hf-remocn-shared-axis-z {
+    color: var(--hf-word-color, #18181b);
+    font-family: Inter, system-ui, sans-serif;
+    font-weight: 900;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-shared-axis-z {
+    display: inline-flex;
+    gap: 12px;
+    font-size: 56px;
+    line-height: 1;
+  }
+  .hf-remocn-shared-axis-z span {
+    display: inline-block;
+    transform: translate(var(--hf-word-x, 0px), var(--hf-word-y, 0px))
+      scale(calc(1 + (var(--hf-word-scale, 1) - 1) * var(--hf-word-depth, 1)));
+    filter: blur(var(--hf-word-blur, 0px));
+    will-change: transform, filter, opacity;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    var signs = { in: 1, out: -1 };
+    var reaches = { shallow: 0.5, standard: 1, deep: 1.85 };
+    var tones = {
+      ink: "#18181b",
+      paper: "#fafafa",
+      accent: "var(--brand, #34d399)",
+    };
+
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var sign = signs[pick(signs, vars.direction, "in")];
+    var reach = reaches[pick(reaches, vars.depth, "standard")];
+    var tone = tones[pick(tones, vars.tone, "ink")];
+
+    var roots = document.querySelectorAll(".hf-remocn-shared-axis-z");
+    for (var i = 0; i < roots.length; i += 1) {
+      roots[i].style.setProperty("--hf-word-depth", String(sign * reach));
+      roots[i].style.setProperty("--hf-word-color", tone);
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-shared-axis-z span', { opacity: 0, '--hf-word-scale': 0.72 }, { opacity: 1, '--hf-word-scale': 1, duration: 0.34, stagger: 0.06, ease: 'back.out(1.8)' }, startTime);
+-->
diff --git a/docs/public/catalog/components/shimmer-sweep/demo.html b/docs/public/catalog/components/shimmer-sweep/demo.html
new file mode 100644
index 0000000000..fcaae780d6
--- /dev/null
+++ b/docs/public/catalog/components/shimmer-sweep/demo.html
@@ -0,0 +1,162 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Shimmer Sweep — Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="shimmer-sweep-demo"
+      data-width="1920"
+      data-height="1080"
+      data-duration="6"
+    >
+      <div class="demo-canvas">
+        <!-- Example 1: Large heading -->
+        <div class="shimmer-sweep-target" style="--shimmer-color: rgba(255, 255, 255, 0.5)">
+          <div
+            class="demo-heading"
+            style="font-size: 120px; font-weight: 800; color: #ffffff; opacity: 0"
+          >
+            AI-Powered
+          </div>
+        </div>
+
+        <!-- Example 2: Subheading -->
+        <div class="shimmer-sweep-target" style="--shimmer-color: rgba(100, 200, 255, 0.4)">
+          <div
+            class="demo-subheading"
+            style="font-size: 48px; font-weight: 400; color: #888888; opacity: 0"
+          >
+            Video generation, reimagined
+          </div>
+        </div>
+
+        <!-- Example 3: Pill badge -->
+        <div
+          class="shimmer-sweep-target"
+          style="--shimmer-color: rgba(255, 255, 255, 0.3); --shimmer-width: 30%"
+        >
+          <div
+            class="demo-pill"
+            style="
+              background: linear-gradient(135deg, #1a1a2e, #2a2a4e);
+              border: 1px solid #333;
+              border-radius: 100px;
+              padding: 16px 40px;
+              font-size: 20px;
+              color: #aaa;
+              opacity: 0;
+            "
+          >
+            Try it free →
+          </div>
+        </div>
+      </div>
+
+      <!-- Shimmer Sweep component -->
+      <style>
+        .demo-canvas {
+          width: 1920px;
+          height: 1080px;
+          background: #0a0a0f;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+          gap: 60px;
+          font-family: "Inter", sans-serif;
+        }
+
+        .shimmer-sweep-target {
+          position: relative;
+          display: inline-block;
+        }
+
+        .shimmer-sweep-target .shimmer-mask {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          pointer-events: none;
+          background: linear-gradient(
+            var(--shimmer-angle, 120deg),
+            transparent 0%,
+            transparent calc(var(--shimmer-pos, -20%) - var(--shimmer-width, 20%) / 2),
+            var(--shimmer-color, rgba(255, 255, 255, 0.6)) var(--shimmer-pos, -20%),
+            transparent calc(var(--shimmer-pos, -20%) + var(--shimmer-width, 20%) / 2),
+            transparent 100%
+          );
+          mix-blend-mode: overlay;
+        }
+      </style>
+
+      <script>
+        (function () {
+          // Inject shimmer masks
+          document.querySelectorAll(".shimmer-sweep-target").forEach((el) => {
+            if (!el.querySelector(".shimmer-mask")) {
+              const mask = document.createElement("div");
+              mask.className = "shimmer-mask";
+              el.appendChild(mask);
+            }
+          });
+
+          const tl = gsap.timeline({ paused: true });
+
+          // Fade in elements
+          tl.to(".demo-heading", { opacity: 1, duration: 0.6, ease: "power2.out" }, 0.3);
+          tl.to(".demo-subheading", { opacity: 1, duration: 0.6, ease: "power2.out" }, 0.6);
+          tl.to(".demo-pill", { opacity: 1, duration: 0.6, ease: "power2.out" }, 0.9);
+
+          // First shimmer sweep across all targets
+          tl.fromTo(
+            ".shimmer-sweep-target",
+            { "--shimmer-pos": "-20%" },
+            {
+              "--shimmer-pos": "120%",
+              duration: 1.2,
+              ease: "power2.inOut",
+              stagger: 0.15,
+            },
+            1.5,
+          );
+
+          // Second sweep
+          tl.fromTo(
+            ".shimmer-sweep-target",
+            { "--shimmer-pos": "-20%" },
+            {
+              "--shimmer-pos": "120%",
+              duration: 1.0,
+              ease: "power2.inOut",
+              stagger: 0.1,
+            },
+            3.5,
+          );
+
+          window.__timelines = window.__timelines || {};
+          window.__timelines["shimmer-sweep-demo"] = tl;
+        })();
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/shimmer-sweep/shimmer-sweep.html b/docs/public/catalog/components/shimmer-sweep/shimmer-sweep.html
new file mode 100644
index 0000000000..84d3be4eb9
--- /dev/null
+++ b/docs/public/catalog/components/shimmer-sweep/shimmer-sweep.html
@@ -0,0 +1,66 @@
+<!--
+  Shimmer Sweep — animated light pass across text or elements.
+
+  Usage: place this snippet AFTER your .shimmer-sweep-target elements.
+  Wrap your text element with class="shimmer-sweep-target" and
+  paste this snippet into your composition. The GSAP timeline drives
+  the sweep position for deterministic frame-by-frame rendering.
+
+  Customize:
+  - --shimmer-color: highlight color (default rgba(255,255,255,0.6))
+  - --shimmer-width: highlight band width as % (default 20%)
+  - --shimmer-angle: sweep angle (default 120deg)
+  - Timeline duration/ease: adjust in the script below
+-->
+
+<style>
+  .shimmer-sweep-target {
+    position: relative;
+    display: inline-block;
+  }
+
+  .shimmer-sweep-target .shimmer-mask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    background: linear-gradient(
+      var(--shimmer-angle, 120deg),
+      transparent 0%,
+      transparent calc(var(--shimmer-pos, -20%) - var(--shimmer-width, 20%) / 2),
+      var(--shimmer-color, rgba(255, 255, 255, 0.6)) var(--shimmer-pos, -20%),
+      transparent calc(var(--shimmer-pos, -20%) + var(--shimmer-width, 20%) / 2),
+      transparent 100%
+    );
+    mix-blend-mode: overlay;
+  }
+</style>
+
+<script>
+  (function () {
+    // Auto-inject .shimmer-mask into every .shimmer-sweep-target
+    document.querySelectorAll(".shimmer-sweep-target").forEach((el) => {
+      if (!el.querySelector(".shimmer-mask")) {
+        const mask = document.createElement("div");
+        mask.className = "shimmer-mask";
+        el.appendChild(mask);
+      }
+    });
+  })();
+</script>
+
+<!--
+  Timeline integration example (add to your composition's GSAP timeline):
+
+  // Single sweep from left to right
+  tl.fromTo(".shimmer-sweep-target", {
+    "--shimmer-pos": "-20%",
+  }, {
+    "--shimmer-pos": "120%",
+    duration: 1.2,
+    ease: "power2.inOut",
+    stagger: 0.15,
+  }, startTime);
+-->
diff --git a/docs/public/catalog/components/short-slide-down/__hf-variables-preview.html b/docs/public/catalog/components/short-slide-down/__hf-variables-preview.html
new file mode 100644
index 0000000000..c6c8584f16
--- /dev/null
+++ b/docs/public/catalog/components/short-slide-down/__hf-variables-preview.html
@@ -0,0 +1,78 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Short Slide Down variables preview</title>
+    <style>
+      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #f7f7f8; }
+      #hf-vars-root { position: relative; width: 1920px; height: 1080px; }
+      #hf-vars-mount { position: absolute; inset: 0; display: grid; place-items: center; }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  </head>
+  <body>
+    <div id="hf-vars-root" data-composition-id="short-slide-down-variables-preview" data-start="0" data-width="1920" data-height="1080" data-duration="5" data-fps="30">
+      <div id="hf-vars-mount" class="clip" data-composition-id="short-slide-down" data-composition-src="./short-slide-down.html" data-start="0" data-duration="5" data-track-index="0" data-width="1920" data-height="1080"></div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["short-slide-down-variables-preview"] = gsap.timeline({ paused: true });
+    </script>
+    <script>
+      (function () {
+        var mount = document.getElementById("hf-vars-mount");
+        // The mount is filled asynchronously, and the demo script selects
+        // what it fills it with, so it cannot run before then.
+        var observer = new MutationObserver(build);
+        observer.observe(mount, { childList: true, subtree: true });
+        build();
+        function build() {
+          if (!mount.firstElementChild) return;
+          observer.disconnect();
+
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-short-slide-down span",
+          { opacity: 0, "--hf-line-x": "-36px", "--hf-line-y": "18px", "--hf-line-blur": "6px" },
+          {
+            opacity: 1,
+            "--hf-line-x": "0px",
+            "--hf-line-y": "0px",
+            "--hf-line-blur": "0px",
+            duration: 0.34,
+            stagger: 0.08,
+            ease: "power3.out",
+          },
+          startTime,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["short-slide-down-demo"] = tl;
+          var child = window.__timelines["short-slide-down-demo"];
+          delete window.__timelines["short-slide-down-demo"];
+          if (!child || typeof child.paused !== "function") return;
+          child.paused(false);
+          window.__timelines["short-slide-down-variables-preview"].add(child, 0);
+        }
+      })();
+    </script>
+<script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "short-slide-down.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/short-slide-down/demo.html b/docs/public/catalog/components/short-slide-down/demo.html
new file mode 100644
index 0000000000..d594cdd16c
--- /dev/null
+++ b/docs/public/catalog/components/short-slide-down/demo.html
@@ -0,0 +1,110 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Short Slide Down - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        min-width: 900px;
+        min-height: 500px;
+        padding: 64px;
+        /* ponytail: scale wrapper, not GSAP targets (spans) */
+        transform: scale(1.53);
+      }
+      .hf-remocn-short-slide-down {
+        color: #18181b;
+        font-family: Inter, system-ui, sans-serif;
+        font-weight: 900;
+        letter-spacing: -0.04em;
+      }
+      .hf-remocn-short-slide-down {
+        display: grid;
+        gap: 16px;
+        font-size: 64px;
+        line-height: 1;
+        overflow: hidden;
+      }
+      .hf-remocn-short-slide-down span {
+        display: block;
+        transform: translate(var(--hf-line-x, 0px), var(--hf-line-y, 0px));
+        filter: blur(var(--hf-line-blur, 0px));
+        will-change: transform, filter, opacity;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="short-slide-down-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-short-slide-down">
+          <span>Fast</span><span>Clean</span><span>Local</span>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-short-slide-down span",
+          { opacity: 0, "--hf-line-x": "-36px", "--hf-line-y": "18px", "--hf-line-blur": "6px" },
+          {
+            opacity: 1,
+            "--hf-line-x": "0px",
+            "--hf-line-y": "0px",
+            "--hf-line-blur": "0px",
+            duration: 0.34,
+            stagger: 0.08,
+            ease: "power3.out",
+          },
+          startTime,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["short-slide-down-demo"] = tl;
+      </script>
+    </div>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "short-slide-down.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/short-slide-down/short-slide-down.html b/docs/public/catalog/components/short-slide-down/short-slide-down.html
new file mode 100644
index 0000000000..6323c0845c
--- /dev/null
+++ b/docs/public/catalog/components/short-slide-down/short-slide-down.html
@@ -0,0 +1,111 @@
+<!--
+  Short Slide Down - remocn typography primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Drive the timeline
+  integration from a paused GSAP timeline so renders remain deterministic.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result as a custom property
+  the CSS above consumes. The timeline recipe below is untouched by them: it
+  keeps driving one horizontal offset, one vertical offset and one blur, and
+  these decide what those offsets and that blur mean on screen.
+
+    - direction (up | down | left | right, default up): where the lines travel
+      in from. up keeps the original diagonal, lines rising into place from
+      below and to the left. down mirrors the vertical leg so they settle from
+      above. left drops the vertical leg entirely for a flat entry from the
+      left, right flips that flat entry to the opposite side.
+    - distance (close | standard | far, default standard): scales both offsets,
+      so the lines cover half the run, the original run, or nearly double it,
+      always in the same time.
+    - blur (soft | standard | heavy, default standard): scales the blur radius,
+      from a light haze to a full smear.
+    - tone (ink | paper | accent, default ink): line colour. ink is near-black
+      for light frames, paper near-white for dark ones, accent rides --brand.
+
+  On every default the result is identical to the original: lines arrive from
+  36px left and 18px below through a 6px blur in near-black.
+-->
+
+<div
+  class="hf-remocn-short-slide-down"
+  data-composition-variables='[
+    {"id": "direction", "type": "enum", "role": "motion", "label": "Direction", "description": "Where the lines travel in from: up rises from below the baseline, down settles from above, left and right slide in flat with no vertical leg.", "default": "up", "options": [{"value": "up", "label": "Up"}, {"value": "down", "label": "Down"}, {"value": "left", "label": "Left"}, {"value": "right", "label": "Right"}]},
+    {"id": "distance", "type": "enum", "role": "motion", "label": "Distance", "description": "Scales both offsets, so the lines cover a shorter or longer run in the same time.", "default": "standard", "options": [{"value": "close", "label": "Close"}, {"value": "standard", "label": "Standard"}, {"value": "far", "label": "Far"}]},
+    {"id": "blur", "type": "enum", "role": "style", "label": "Blur", "description": "Scales the blur radius the timeline drives, from a light haze to a full smear.", "default": "standard", "options": [{"value": "soft", "label": "Soft"}, {"value": "standard", "label": "Standard"}, {"value": "heavy", "label": "Heavy"}]},
+    {"id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Line colour: ink for light frames, paper for dark ones, accent rides --brand.", "default": "ink", "options": [{"value": "ink", "label": "Ink"}, {"value": "paper", "label": "Paper"}, {"value": "accent", "label": "Accent"}]}
+  ]'
+><span>Fast</span><span>Clean</span><span>Local</span></div>
+
+<style>
+  .hf-remocn-short-slide-down {
+    color: var(--hf-line-color, #18181b);
+    font-family: Inter, system-ui, sans-serif;
+    font-weight: 900;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-short-slide-down {
+    display: grid;
+    gap: 10px;
+    font-size: 52px;
+    line-height: 1;
+    overflow: hidden;
+  }
+  .hf-remocn-short-slide-down span {
+    display: block;
+    transform: translate(
+      calc(var(--hf-line-x, 0px) * var(--hf-line-dx, 1)),
+      calc(var(--hf-line-y, 0px) * var(--hf-line-dy, 1))
+    );
+    filter: blur(calc(var(--hf-line-blur, 0px) * var(--hf-line-blur-scale, 1)));
+    will-change: transform, filter, opacity;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var axes = {
+      up: { x: 1, y: 1 },
+      down: { x: 1, y: -1 },
+      left: { x: 1, y: 0 },
+      right: { x: -1, y: 0 },
+    };
+    var reaches = { close: 0.5, standard: 1, far: 1.85 };
+    var blurScales = { soft: 0.45, standard: 1, heavy: 2.2 };
+    var tones = {
+      ink: "#18181b",
+      paper: "#fafafa",
+      accent: "var(--brand, #34d399)",
+    };
+
+    var axis = axes[pick(axes, vars.direction, "up")];
+    var reach = reaches[pick(reaches, vars.distance, "standard")];
+    var blurScale = blurScales[pick(blurScales, vars.blur, "standard")];
+    var tone = tones[pick(tones, vars.tone, "ink")];
+
+    var roots = document.querySelectorAll(".hf-remocn-short-slide-down");
+    for (var i = 0; i < roots.length; i += 1) {
+      roots[i].style.setProperty("--hf-line-dx", String(axis.x * reach));
+      roots[i].style.setProperty("--hf-line-dy", String(axis.y * reach));
+      roots[i].style.setProperty("--hf-line-blur-scale", String(blurScale));
+      roots[i].style.setProperty("--hf-line-color", tone);
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-short-slide-down span', { opacity: 0, '--hf-line-x': '-36px', '--hf-line-y': '18px', '--hf-line-blur': '6px' }, { opacity: 1, '--hf-line-x': '0px', '--hf-line-y': '0px', '--hf-line-blur': '0px', duration: 0.34, stagger: 0.08, ease: 'power3.out' }, startTime);
+-->
diff --git a/docs/public/catalog/components/short-slide-right/__hf-variables-preview.html b/docs/public/catalog/components/short-slide-right/__hf-variables-preview.html
new file mode 100644
index 0000000000..32f2a55392
--- /dev/null
+++ b/docs/public/catalog/components/short-slide-right/__hf-variables-preview.html
@@ -0,0 +1,78 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Short Slide Right variables preview</title>
+    <style>
+      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #f4f4f5; }
+      #hf-vars-root { position: relative; width: 1920px; height: 1080px; }
+      #hf-vars-mount { position: absolute; inset: 0; display: grid; place-items: center; }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  </head>
+  <body>
+    <div id="hf-vars-root" data-composition-id="short-slide-right-variables-preview" data-start="0" data-width="1920" data-height="1080" data-duration="5" data-fps="30">
+      <div id="hf-vars-mount" class="clip" data-composition-id="short-slide-right" data-composition-src="./short-slide-right.html" data-start="0" data-duration="5" data-track-index="0" data-width="1920" data-height="1080"></div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["short-slide-right-variables-preview"] = gsap.timeline({ paused: true });
+    </script>
+    <script>
+      (function () {
+        var mount = document.getElementById("hf-vars-mount");
+        // The mount is filled asynchronously, and the demo script selects
+        // what it fills it with, so it cannot run before then.
+        var observer = new MutationObserver(build);
+        observer.observe(mount, { childList: true, subtree: true });
+        build();
+        function build() {
+          if (!mount.firstElementChild) return;
+          observer.disconnect();
+
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-short-slide-right span",
+          { opacity: 0, "--hf-word-y": "22px", "--hf-word-scale": 0.92, "--hf-word-blur": "5px" },
+          {
+            opacity: 1,
+            "--hf-word-y": "0px",
+            "--hf-word-scale": 1,
+            "--hf-word-blur": "0px",
+            duration: 0.3,
+            stagger: 0.055,
+            ease: "power3.out",
+          },
+          startTime,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["short-slide-right-demo"] = tl;
+          var child = window.__timelines["short-slide-right-demo"];
+          delete window.__timelines["short-slide-right-demo"];
+          if (!child || typeof child.paused !== "function") return;
+          child.paused(false);
+          window.__timelines["short-slide-right-variables-preview"].add(child, 0);
+        }
+      })();
+    </script>
+<script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "short-slide-right.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/short-slide-right/demo.html b/docs/public/catalog/components/short-slide-right/demo.html
new file mode 100644
index 0000000000..fe9f49fd27
--- /dev/null
+++ b/docs/public/catalog/components/short-slide-right/demo.html
@@ -0,0 +1,128 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Short Slide Right - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f4f4f5;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      /* ponytail: scale on .demo-frame (not a GSAP target) fills the frame without touching animated spans */
+      .demo-frame {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 32px;
+        background: #ffffff;
+        border-radius: 16px;
+        border: 1px solid #e4e4e7;
+        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.10);
+        padding: 72px 96px;
+        min-width: 760px;
+        transform: scale(1.9);
+      }
+      .demo-label {
+        font-size: 13px;
+        font-weight: 500;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+        color: #71717a;
+      }
+      .hf-remocn-short-slide-right {
+        color: #18181b;
+        font-family: Inter, system-ui, sans-serif;
+        font-weight: 800;
+        letter-spacing: -0.04em;
+        display: inline-flex;
+        gap: 14px;
+        font-size: 56px;
+        line-height: 1;
+      }
+      .hf-remocn-short-slide-right span {
+        display: inline-block;
+        transform: translate(var(--hf-word-x, 0px), var(--hf-word-y, 0px))
+          scale(var(--hf-word-scale, 1));
+        filter: blur(var(--hf-word-blur, 0px));
+        will-change: transform, filter, opacity;
+      }
+      .demo-subtext {
+        font-size: 14px;
+        font-weight: 400;
+        color: #a1a1aa;
+        letter-spacing: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="short-slide-right-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <p class="demo-label">Motion Primitive</p>
+        <div class="hf-remocn-short-slide-right">
+          <span>Short</span><span>slide</span><span>right</span>
+        </div>
+        <p class="demo-subtext">Word-by-word staggered entrance</p>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-short-slide-right span",
+          { opacity: 0, "--hf-word-y": "22px", "--hf-word-scale": 0.92, "--hf-word-blur": "5px" },
+          {
+            opacity: 1,
+            "--hf-word-y": "0px",
+            "--hf-word-scale": 1,
+            "--hf-word-blur": "0px",
+            duration: 0.3,
+            stagger: 0.055,
+            ease: "power3.out",
+          },
+          startTime,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["short-slide-right-demo"] = tl;
+      </script>
+    </div>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "short-slide-right.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/short-slide-right/short-slide-right.html b/docs/public/catalog/components/short-slide-right/short-slide-right.html
new file mode 100644
index 0000000000..e932c97ad7
--- /dev/null
+++ b/docs/public/catalog/components/short-slide-right/short-slide-right.html
@@ -0,0 +1,112 @@
+<!--
+  Short Slide Right - remocn typography primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Drive the timeline
+  integration from a paused GSAP timeline so renders remain deterministic.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result as a custom property
+  the CSS above consumes. The timeline recipe below is untouched by them: it
+  keeps driving one offset, one scale and one blur, and these decide what that
+  offset and that scale mean on screen.
+
+    - direction (up | down | left | right, default up): which way the words
+      travel in. up rises from below the baseline, down settles from above,
+      left and right carry the same offset sideways along the baseline instead.
+    - distance (close | standard | far, default standard): scales the travel
+      offset. close covers half the run, far nearly double, in the same time.
+    - pop (subtle | standard | deep, default standard): scales how far the
+      words shrink before they settle. subtle barely dips, deep drops to about
+      a fifth under full size. The resting frame is always full size, so this
+      only changes the middle of the move.
+    - tone (ink | paper | accent, default ink): word colour. ink is near-black
+      for light frames, paper near-white for dark ones, accent rides --brand.
+
+  On every default the result is identical to the original: words rise 22px
+  from 0.92 scale through a 5px blur in near-black.
+-->
+
+<div
+  class="hf-remocn-short-slide-right"
+  data-composition-variables='[
+    {"id": "direction", "type": "enum", "role": "motion", "label": "Direction", "description": "Which way the words travel in: up rises from below the baseline, down settles from above, left and right carry the same offset sideways instead.", "default": "up", "options": [{"value": "up", "label": "Up"}, {"value": "down", "label": "Down"}, {"value": "left", "label": "Left"}, {"value": "right", "label": "Right"}]},
+    {"id": "distance", "type": "enum", "role": "motion", "label": "Distance", "description": "Scales the travel offset, so the words cover a shorter or longer run in the same time.", "default": "standard", "options": [{"value": "close", "label": "Close"}, {"value": "standard", "label": "Standard"}, {"value": "far", "label": "Far"}]},
+    {"id": "pop", "type": "enum", "role": "motion", "label": "Pop", "description": "How far the words shrink before they settle, scaling the dip away from full size while the resting frame stays at full size.", "default": "standard", "options": [{"value": "subtle", "label": "Subtle"}, {"value": "standard", "label": "Standard"}, {"value": "deep", "label": "Deep"}]},
+    {"id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Word colour: ink for light frames, paper for dark ones, accent rides --brand.", "default": "ink", "options": [{"value": "ink", "label": "Ink"}, {"value": "paper", "label": "Paper"}, {"value": "accent", "label": "Accent"}]}
+  ]'
+>
+  <span>Short</span><span>slide</span><span>right</span>
+</div>
+
+<style>
+  .hf-remocn-short-slide-right {
+    color: var(--hf-word-color, #18181b);
+    font-family: Inter, system-ui, sans-serif;
+    font-weight: 900;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-short-slide-right {
+    display: inline-flex;
+    gap: 12px;
+    font-size: 56px;
+    line-height: 1;
+  }
+  .hf-remocn-short-slide-right span {
+    display: inline-block;
+    transform: translate(
+        calc(var(--hf-word-x, 0px) + var(--hf-word-y, 0px) * var(--hf-word-axis-x, 0)),
+        calc(var(--hf-word-y, 0px) * var(--hf-word-axis-y, 1))
+      )
+      scale(calc(1 + (var(--hf-word-scale, 1) - 1) * var(--hf-word-pop, 1)));
+    filter: blur(var(--hf-word-blur, 0px));
+    will-change: transform, filter, opacity;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var axes = {
+      up: { x: 0, y: 1 },
+      down: { x: 0, y: -1 },
+      left: { x: -1, y: 0 },
+      right: { x: 1, y: 0 },
+    };
+    var reaches = { close: 0.5, standard: 1, far: 1.85 };
+    var pops = { subtle: 0.4, standard: 1, deep: 2.2 };
+    var tones = {
+      ink: "#18181b",
+      paper: "#fafafa",
+      accent: "var(--brand, #34d399)",
+    };
+
+    var axis = axes[pick(axes, vars.direction, "up")];
+    var reach = reaches[pick(reaches, vars.distance, "standard")];
+    var pop = pops[pick(pops, vars.pop, "standard")];
+    var tone = tones[pick(tones, vars.tone, "ink")];
+
+    var roots = document.querySelectorAll(".hf-remocn-short-slide-right");
+    for (var i = 0; i < roots.length; i += 1) {
+      roots[i].style.setProperty("--hf-word-axis-x", String(axis.x * reach));
+      roots[i].style.setProperty("--hf-word-axis-y", String(axis.y * reach));
+      roots[i].style.setProperty("--hf-word-pop", String(pop));
+      roots[i].style.setProperty("--hf-word-color", tone);
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-short-slide-right span', { opacity: 0, '--hf-word-y': '22px', '--hf-word-scale': 0.92, '--hf-word-blur': '5px' }, { opacity: 1, '--hf-word-y': '0px', '--hf-word-scale': 1, '--hf-word-blur': '0px', duration: 0.3, stagger: 0.055, ease: 'power3.out' }, startTime);
+-->
diff --git a/docs/public/catalog/components/signup-flow/demo.html b/docs/public/catalog/components/signup-flow/demo.html
new file mode 100644
index 0000000000..f10b35f85f
--- /dev/null
+++ b/docs/public/catalog/components/signup-flow/demo.html
@@ -0,0 +1,138 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Signup Flow - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #fafafa;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        min-width: 760px;
+        min-height: 520px;
+        padding: 56px;
+        /* ponytail: scale-up wrapper (not a GSAP target); card was ~20% of frame */
+        transform: scale(2.2);
+      }
+      .hf-ui-signup-flow {
+        display: grid;
+        gap: 14px;
+        width: 430px;
+        padding: 30px;
+        border: 1px solid #e4e4e7;
+        border-radius: 28px;
+        background: #ffffff;
+        color: #18181b;
+        font-family: Inter, system-ui, sans-serif;
+        box-shadow: 0 28px 84px rgba(0, 0, 0, 0.12);
+      }
+      .hf-ui-signup-flow h3 {
+        margin: 0 0 6px;
+        text-align: center;
+        font-size: 28px;
+      }
+      .hf-ui-signup-flow button,
+      .hf-ui-signup-field {
+        height: 50px;
+        border-radius: 14px;
+        font-size: 15px;
+        font-weight: 600;
+      }
+      .hf-ui-signup-social,
+      .hf-ui-signup-field {
+        border: 1px solid #e4e4e7;
+        background: #ffffff;
+        color: #18181b;
+      }
+      .hf-ui-signup-field {
+        display: flex;
+        align-items: center;
+        padding: 0 15px;
+      }
+      .hf-ui-signup-field.muted {
+        color: #a1a1aa;
+      }
+      .hf-ui-signup-divider {
+        display: grid;
+        grid-template-columns: 1fr auto 1fr;
+        gap: 10px;
+        align-items: center;
+        color: #a1a1aa;
+        font-size: 13px;
+        font-weight: 500;
+      }
+      .hf-ui-signup-divider span {
+        height: 1px;
+        background: #e4e4e7;
+      }
+      .hf-ui-signup-submit {
+        border: 0;
+        background: #18181b;
+        color: #ffffff;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="signup-flow-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-ui-signup-flow">
+          <h3>Create account</h3>
+          <button class="hf-ui-signup-social" type="button">Continue with Google</button>
+          <div class="hf-ui-signup-divider"><span></span><em>or</em><span></span></div>
+          <div class="hf-ui-signup-field">email@company.com</div>
+          <div class="hf-ui-signup-field muted">Password</div>
+          <button class="hf-ui-signup-submit" type="button">Start building</button>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        tl.fromTo(
+          ".hf-ui-signup-flow",
+          { opacity: 0, y: 26 },
+          { opacity: 1, y: 0, duration: 0.36, ease: "power2.out" },
+          0.25,
+        );
+        tl.fromTo(
+          ".hf-ui-signup-flow > *",
+          { y: 14, opacity: 0 },
+          { y: 0, opacity: 1, duration: 0.24, stagger: 0.05, ease: "power2.out" },
+          0.48,
+        );
+        tl.to(
+          ".hf-ui-signup-submit",
+          { scale: 0.97, duration: 0.12, yoyo: true, repeat: 1, ease: "power1.inOut" },
+          1.2,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["signup-flow-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/signup-flow/signup-flow.html b/docs/public/catalog/components/signup-flow/signup-flow.html
new file mode 100644
index 0000000000..e9246999de
--- /dev/null
+++ b/docs/public/catalog/components/signup-flow/signup-flow.html
@@ -0,0 +1,80 @@
+<!--
+  Signup Flow - Remocn-inspired composed UI flow for HyperFrames.
+
+  Paste the markup and CSS into a composition. Use the timeline integration
+  note at the bottom as the starting point for deterministic GSAP animation.
+-->
+
+<div class="hf-ui-signup-flow">
+  <h3>Create account</h3>
+  <button class="hf-ui-signup-social" type="button">Continue with Google</button>
+  <div class="hf-ui-signup-divider"><span></span><em>or</em><span></span></div>
+  <div class="hf-ui-signup-field">email@company.com</div>
+  <div class="hf-ui-signup-field muted">Password</div>
+  <button class="hf-ui-signup-submit" type="button">Start building</button>
+</div>
+
+<style>
+  .hf-ui-signup-flow {
+    display: grid;
+    gap: 14px;
+    width: 430px;
+    padding: 30px;
+    border: 1px solid #e4e4e7;
+    border-radius: 28px;
+    background: #ffffff;
+    color: #18181b;
+    font-family: Inter, system-ui, sans-serif;
+    box-shadow: 0 28px 84px rgba(0, 0, 0, 0.12);
+  }
+  .hf-ui-signup-flow h3 {
+    margin: 0 0 6px;
+    text-align: center;
+    font-size: 28px;
+  }
+  .hf-ui-signup-flow button,
+  .hf-ui-signup-field {
+    height: 50px;
+    border-radius: 14px;
+    font-weight: 850;
+  }
+  .hf-ui-signup-social,
+  .hf-ui-signup-field {
+    border: 1px solid #e4e4e7;
+    background: #ffffff;
+    color: #18181b;
+  }
+  .hf-ui-signup-field {
+    display: flex;
+    align-items: center;
+    padding: 0 15px;
+  }
+  .hf-ui-signup-field.muted {
+    color: #a1a1aa;
+  }
+  .hf-ui-signup-divider {
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    gap: 10px;
+    align-items: center;
+    color: #a1a1aa;
+    font-size: 12px;
+    font-weight: 900;
+  }
+  .hf-ui-signup-divider span {
+    height: 1px;
+    background: #e4e4e7;
+  }
+  .hf-ui-signup-submit {
+    border: 0;
+    background: #18181b;
+    color: #ffffff;
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-ui-signup-flow', { opacity: 0, y: 26 }, { opacity: 1, y: 0, duration: 0.36, ease: 'power2.out' }, 0.25);
+  tl.fromTo('.hf-ui-signup-flow > *', { y: 14, opacity: 0 }, { y: 0, opacity: 1, duration: 0.24, stagger: 0.05, ease: 'power2.out' }, 0.48);
+  tl.to('.hf-ui-signup-submit', { scale: 0.97, duration: 0.12, yoyo: true, repeat: 1, ease: 'power1.inOut' }, 1.2);
+-->
diff --git a/docs/public/catalog/components/simulated-cursor/__hf-variables-preview.html b/docs/public/catalog/components/simulated-cursor/__hf-variables-preview.html
new file mode 100644
index 0000000000..bd317b7af8
--- /dev/null
+++ b/docs/public/catalog/components/simulated-cursor/__hf-variables-preview.html
@@ -0,0 +1,79 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Simulated Cursor variables preview</title>
+    <style>
+      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #ecf1f3; }
+      #hf-vars-root { position: relative; width: 1920px; height: 1080px; }
+      #hf-vars-mount { position: absolute; inset: 0; display: grid; place-items: center; }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  </head>
+  <body>
+    <div id="hf-vars-root" data-composition-id="simulated-cursor-variables-preview" data-start="0" data-width="1920" data-height="1080" data-duration="5" data-fps="30">
+      <div id="hf-vars-mount" class="clip" data-composition-id="simulated-cursor" data-composition-src="./simulated-cursor.html" data-start="0" data-duration="5" data-track-index="0" data-width="1920" data-height="1080"></div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["simulated-cursor-variables-preview"] = gsap.timeline({ paused: true });
+    </script>
+    <script>
+      (function () {
+        var mount = document.getElementById("hf-vars-mount");
+        // The mount is filled asynchronously, and the demo script selects
+        // what it fills it with, so it cannot run before then.
+        var observer = new MutationObserver(build);
+        observer.observe(mount, { childList: true, subtree: true });
+        build();
+        function build() {
+          if (!mount.firstElementChild) return;
+          observer.disconnect();
+
+        const tl = gsap.timeline({ paused: true });
+        tl.from(".card", { opacity: 0, y: 30, duration: 0.6, ease: "power3.out" }, 0.2);
+        tl.to(
+          ".hf-simulated-cursor",
+          {
+            "--hf-cursor-x": "1030px",
+            "--hf-cursor-y": "620px",
+            duration: 1,
+            ease: "power2.inOut",
+          },
+          1.0,
+        );
+        tl.fromTo(
+          ".hf-simulated-cursor-pulse",
+          { opacity: 0.8, scale: 0.2 },
+          { opacity: 0, scale: 2.4, duration: 0.45, ease: "power2.out" },
+          2.02,
+        );
+        window.__timelines = window.__timelines || {};
+        window.__timelines["simulated-cursor-demo"] = tl;
+          var child = window.__timelines["simulated-cursor-demo"];
+          delete window.__timelines["simulated-cursor-demo"];
+          if (!child || typeof child.paused !== "function") return;
+          child.paused(false);
+          window.__timelines["simulated-cursor-variables-preview"].add(child, 0);
+        }
+      })();
+    </script>
+<script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "simulated-cursor.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/simulated-cursor/demo.html b/docs/public/catalog/components/simulated-cursor/demo.html
new file mode 100644
index 0000000000..06557f5ba0
--- /dev/null
+++ b/docs/public/catalog/components/simulated-cursor/demo.html
@@ -0,0 +1,153 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Simulated Cursor - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        background: #ecf1f3;
+        font-family: Inter, system-ui, sans-serif;
+        display: grid;
+        place-items: center;
+        color: #152026;
+      }
+      .demo-frame {
+        /* ponytail: zoom on wrapper so GSAP can freely animate .card transform */
+        zoom: 1.5;
+      }
+      .card {
+        width: 880px;
+        padding: 72px;
+        background: white;
+        border: 1px solid #dce4e8;
+        border-radius: 16px;
+        box-shadow: 0 24px 70px rgba(37, 55, 66, 0.1);
+      }
+      .title {
+        font-size: 64px;
+        font-weight: 850;
+        letter-spacing: -0.03em;
+      }
+      .button {
+        margin-top: 48px;
+        display: inline-flex;
+        padding: 22px 36px;
+        background: #141a20;
+        color: white;
+        font-size: 28px;
+        font-weight: 760;
+        border-radius: 10px;
+      }
+      .hf-simulated-cursor {
+        --hf-cursor-x: 420px;
+        --hf-cursor-y: 360px;
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 44px;
+        height: 44px;
+        transform: translate3d(var(--hf-cursor-x), var(--hf-cursor-y), 0);
+        pointer-events: none;
+        z-index: 999;
+        filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.24));
+      }
+      .hf-simulated-cursor-pulse {
+        position: absolute;
+        left: 9px;
+        top: 9px;
+        width: 22px;
+        height: 22px;
+        border: 2px solid rgba(20, 26, 32, 0.75);
+        border-radius: 999px;
+        opacity: 0;
+        transform: scale(0.2);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="simulated-cursor-demo"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="card">
+          <div class="title">Point at the action without screen recording.</div>
+          <div class="button">Generate video</div>
+        </div>
+      </div>
+      <div class="hf-simulated-cursor" aria-hidden="true">
+        <div class="hf-simulated-cursor-pulse"></div>
+        <svg
+          viewBox="0 0 24 24"
+          width="34"
+          height="34"
+          style="filter: drop-shadow(0 4px 7px rgba(0, 0, 0, 0.3))"
+        >
+          <path
+            d="M5.5 3.2 L5.5 19.6 L9.7 15.7 L12.5 21.9 L15.0 20.7 L12.3 14.6 L17.9 14.2 Z"
+            fill="#18181b"
+            stroke="#ffffff"
+            stroke-width="1.5"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        tl.from(".card", { opacity: 0, y: 30, duration: 0.6, ease: "power3.out" }, 0.2);
+        tl.to(
+          ".hf-simulated-cursor",
+          {
+            "--hf-cursor-x": "1030px",
+            "--hf-cursor-y": "620px",
+            duration: 1,
+            ease: "power2.inOut",
+          },
+          1.0,
+        );
+        tl.fromTo(
+          ".hf-simulated-cursor-pulse",
+          { opacity: 0.8, scale: 0.2 },
+          { opacity: 0, scale: 2.4, duration: 0.45, ease: "power2.out" },
+          2.02,
+        );
+        window.__timelines = window.__timelines || {};
+        window.__timelines["simulated-cursor-demo"] = tl;
+      </script>
+    </div>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "simulated-cursor.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/simulated-cursor/simulated-cursor.html b/docs/public/catalog/components/simulated-cursor/simulated-cursor.html
new file mode 100644
index 0000000000..c1c74ac877
--- /dev/null
+++ b/docs/public/catalog/components/simulated-cursor/simulated-cursor.html
@@ -0,0 +1,141 @@
+<!--
+  Simulated Cursor - pointer and click pulse primitive.
+
+  Paste the markup, CSS and script once, then animate .hf-simulated-cursor
+  with x/y values in your paused GSAP timeline. Trigger the click pulse by
+  scaling/fading .hf-simulated-cursor-pulse.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or invalid, and writes the result as a custom property the
+  CSS above consumes. The timeline recipe below is untouched by them: it keeps
+  driving the pointer position and the ring scale and fade.
+
+    - size (number 20 to 120, step 2, unit px, default 44): height and width of
+      the pointer. The click ring, its offset and its border scale with it, so
+      the tip stays anchored at the animated x/y. Values below 20 clamp to 20,
+      values above 120 clamp to 120, and anything that is not a number falls
+      back to 44.
+    - tone (light | dark | accent, default light): pointer fill, outline and
+      ring colour. light is the white pointer with a dark outline for dark
+      screens, dark flips both for light screens, accent rides --hf-ui-accent.
+    - pulse (subtle | standard | bold | none, default standard): weight of the
+      click ring. subtle is thin and small, bold thick and wide, none removes
+      the ring entirely. The ring stays centred on the same point in every
+      case, and it is only on screen while the click animation runs.
+
+  On every default the result is identical to the original: a 44px white
+  pointer with a 22px, 2px white ring offset 9px from the tip.
+-->
+
+<div
+  class="hf-simulated-cursor"
+  aria-hidden="true"
+  data-composition-variables='[
+    {"id": "size", "type": "number", "role": "layout", "label": "Size", "description": "Height and width of the pointer in pixels. The click ring scales with it. Values outside the range clamp to the nearest end and anything that is not a number falls back to 44.", "default": 44, "min": 20, "max": 120, "step": 2, "unit": "px"},
+    {"id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Pointer fill and click ring colour: light reads on dark screens, dark reads on light ones, accent rides --hf-ui-accent.", "default": "light", "options": [{"value": "light", "label": "Light"}, {"value": "dark", "label": "Dark"}, {"value": "accent", "label": "Accent"}]},
+    {"id": "pulse", "type": "enum", "role": "style", "label": "Click ring", "description": "Weight of the ring the click animation expands: subtle is a thin small ring, bold a thick wide one, none removes the ring entirely.", "default": "standard", "options": [{"value": "subtle", "label": "Subtle"}, {"value": "standard", "label": "Standard"}, {"value": "bold", "label": "Bold"}, {"value": "none", "label": "None"}]}
+  ]'
+>
+  <div class="hf-simulated-cursor-pulse"></div>
+  <svg viewBox="0 0 24 24" width="44" height="44">
+    <path
+      d="M3 2.8 20.6 14 12.8 15.5 9 22 3 2.8Z"
+      fill="white"
+      stroke="rgba(0,0,0,0.45)"
+      stroke-width="1.4"
+    />
+  </svg>
+</div>
+
+<style>
+  .hf-simulated-cursor {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: calc(44px * var(--hf-cursor-scale, 1));
+    height: calc(44px * var(--hf-cursor-scale, 1));
+    transform: translate3d(var(--hf-cursor-x, 0px), var(--hf-cursor-y, 0px), 0);
+    pointer-events: none;
+    z-index: 999;
+    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.24));
+  }
+  .hf-simulated-cursor svg {
+    width: 100%;
+    height: 100%;
+  }
+  .hf-simulated-cursor svg path {
+    fill: var(--hf-cursor-fill, #ffffff);
+    stroke: var(--hf-cursor-edge, rgba(0, 0, 0, 0.45));
+  }
+  .hf-simulated-cursor-pulse {
+    display: var(--hf-cursor-ring-display, block);
+    position: absolute;
+    left: calc((20px - var(--hf-cursor-ring-size, 22px) / 2) * var(--hf-cursor-scale, 1));
+    top: calc((20px - var(--hf-cursor-ring-size, 22px) / 2) * var(--hf-cursor-scale, 1));
+    width: calc(var(--hf-cursor-ring-size, 22px) * var(--hf-cursor-scale, 1));
+    height: calc(var(--hf-cursor-ring-size, 22px) * var(--hf-cursor-scale, 1));
+    border: calc(var(--hf-cursor-ring-width, 2px) * var(--hf-cursor-scale, 1)) solid
+      var(--hf-cursor-ring, rgba(255, 255, 255, 0.85));
+    border-radius: 999px;
+    opacity: 0;
+    transform: scale(0.2);
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised or out-of-range overrides return to their declared defaults.
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var tones = {
+      light: { fill: "#ffffff", edge: "rgba(0, 0, 0, 0.45)", ring: "rgba(255, 255, 255, 0.85)" },
+      dark: { fill: "#18181b", edge: "rgba(255, 255, 255, 0.75)", ring: "rgba(24, 24, 27, 0.75)" },
+      accent: {
+        fill: "var(--hf-ui-accent, #3ce6ac)",
+        edge: "rgba(0, 0, 0, 0.45)",
+        ring: "var(--hf-ui-accent, #3ce6ac)",
+      },
+    };
+    var pulses = {
+      subtle: { size: "18px", width: "1px", display: "block" },
+      standard: { size: "22px", width: "2px", display: "block" },
+      bold: { size: "28px", width: "3px", display: "block" },
+      none: { size: "22px", width: "2px", display: "none" },
+    };
+
+    var size = typeof vars.size === "number" ? vars.size : parseFloat(vars.size);
+    if (!isFinite(size)) size = 44;
+    size = Math.min(120, Math.max(20, size));
+
+    var tone = tones[pick(tones, vars.tone, "light")];
+    var pulse = pulses[pick(pulses, vars.pulse, "standard")];
+
+    var roots = document.querySelectorAll(".hf-simulated-cursor");
+    for (var i = 0; i < roots.length; i += 1) {
+      var root = roots[i];
+      root.style.setProperty("--hf-cursor-scale", String(size / 44));
+      root.style.setProperty("--hf-cursor-fill", tone.fill);
+      root.style.setProperty("--hf-cursor-edge", tone.edge);
+      root.style.setProperty("--hf-cursor-ring", tone.ring);
+      root.style.setProperty("--hf-cursor-ring-size", pulse.size);
+      root.style.setProperty("--hf-cursor-ring-width", pulse.width);
+      root.style.setProperty("--hf-cursor-ring-display", pulse.display);
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+
+  tl.to(".hf-simulated-cursor", { "--hf-cursor-x": "760px", "--hf-cursor-y": "420px", duration: 0.8, ease: "power2.inOut" }, startTime);
+  tl.fromTo(".hf-simulated-cursor-pulse", { opacity: 0.8, scale: 0.2 }, { opacity: 0, scale: 2.4, duration: 0.45, ease: "power2.out" }, startTime + 0.8);
+-->
diff --git a/docs/public/catalog/components/skeleton-reveal/__hf-variables-preview.html b/docs/public/catalog/components/skeleton-reveal/__hf-variables-preview.html
new file mode 100644
index 0000000000..46a47ee205
--- /dev/null
+++ b/docs/public/catalog/components/skeleton-reveal/__hf-variables-preview.html
@@ -0,0 +1,79 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Skeleton Reveal variables preview</title>
+    <style>
+      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #f7f7f8; }
+      #hf-vars-root { position: relative; width: 1920px; height: 1080px; }
+      #hf-vars-mount { position: absolute; inset: 0; display: grid; place-items: center; }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  </head>
+  <body>
+    <div id="hf-vars-root" data-composition-id="skeleton-reveal-variables-preview" data-start="0" data-width="1920" data-height="1080" data-duration="5" data-fps="30">
+      <div id="hf-vars-mount" class="clip" data-composition-id="skeleton-reveal" data-composition-src="./skeleton-reveal.html" data-start="0" data-duration="5" data-track-index="0" data-width="1920" data-height="1080"></div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["skeleton-reveal-variables-preview"] = gsap.timeline({ paused: true });
+    </script>
+    <script>
+      (function () {
+        var mount = document.getElementById("hf-vars-mount");
+        // The mount is filled asynchronously, and the demo script selects
+        // what it fills it with, so it cannot run before then.
+        var observer = new MutationObserver(build);
+        observer.observe(mount, { childList: true, subtree: true });
+        build();
+        function build() {
+          if (!mount.firstElementChild) return;
+          observer.disconnect();
+
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.to(
+          ".hf-transition-skeleton-reveal .skeleton",
+          { backgroundPosition: "100% 0", duration: 0.7, ease: "none" },
+          startTime,
+        );
+        tl.to(
+          ".hf-transition-skeleton-reveal .skeleton",
+          { opacity: 0, duration: 0.22 },
+          startTime + 0.72,
+        );
+        tl.to(
+          ".hf-transition-skeleton-reveal .content",
+          { opacity: 1, duration: 0.24 },
+          startTime + 0.78,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["skeleton-reveal-demo"] = tl;
+          var child = window.__timelines["skeleton-reveal-demo"];
+          delete window.__timelines["skeleton-reveal-demo"];
+          if (!child || typeof child.paused !== "function") return;
+          child.paused(false);
+          window.__timelines["skeleton-reveal-variables-preview"].add(child, 0);
+        }
+      })();
+    </script>
+<script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "skeleton-reveal.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/skeleton-reveal/demo.html b/docs/public/catalog/components/skeleton-reveal/demo.html
new file mode 100644
index 0000000000..dd246e37c5
--- /dev/null
+++ b/docs/public/catalog/components/skeleton-reveal/demo.html
@@ -0,0 +1,131 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Skeleton Reveal - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        min-width: 760px;
+        min-height: 480px;
+        padding: 56px;
+        /* ponytail: scale wrapper (not a GSAP target) to fill ~60% of frame */
+        transform: scale(1.51);
+      }
+      .hf-transition-skeleton-reveal {
+        position: relative;
+        width: 400px;
+        height: 96px;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-transition-skeleton-reveal .skeleton,
+      .hf-transition-skeleton-reveal .content {
+        position: absolute;
+        inset: 0;
+        border: 1px solid #e4e4e7;
+        border-radius: 14px;
+        background: #fff;
+        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.08);
+      }
+      .hf-transition-skeleton-reveal .skeleton {
+        background: linear-gradient(90deg, #f4f4f5, #e4e4e7, #f4f4f5);
+        background-size: 240% 100%;
+        opacity: 1;
+        box-shadow: none;
+      }
+      .hf-transition-skeleton-reveal .content {
+        display: grid;
+        align-content: center;
+        gap: 6px;
+        padding: 20px 22px;
+        opacity: 0;
+        color: #18181b;
+      }
+      .hf-transition-skeleton-reveal strong {
+        font-size: 18px;
+        font-weight: 600;
+        letter-spacing: -0.01em;
+      }
+      .hf-transition-skeleton-reveal span {
+        color: #71717a;
+        font-size: 15px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="skeleton-reveal-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-transition-skeleton-reveal">
+          <div class="skeleton"></div>
+          <div class="content"><strong>Jane Cooper</strong><span>jane@example.com</span></div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.to(
+          ".hf-transition-skeleton-reveal .skeleton",
+          { backgroundPosition: "100% 0", duration: 0.7, ease: "none" },
+          startTime,
+        );
+        tl.to(
+          ".hf-transition-skeleton-reveal .skeleton",
+          { opacity: 0, duration: 0.22 },
+          startTime + 0.72,
+        );
+        tl.to(
+          ".hf-transition-skeleton-reveal .content",
+          { opacity: 1, duration: 0.24 },
+          startTime + 0.78,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["skeleton-reveal-demo"] = tl;
+      </script>
+    </div>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "skeleton-reveal.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/skeleton-reveal/skeleton-reveal.html b/docs/public/catalog/components/skeleton-reveal/skeleton-reveal.html
new file mode 100644
index 0000000000..6429f64265
--- /dev/null
+++ b/docs/public/catalog/components/skeleton-reveal/skeleton-reveal.html
@@ -0,0 +1,130 @@
+<!--
+  Skeleton Reveal - transitions.dev-inspired primitive for HyperFrames.
+
+  Paste the markup and CSS into a composition. Use the timeline integration
+  note at the bottom as the starting point for deterministic GSAP animation.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or invalid, and writes the result as a custom property the
+  CSS below consumes, or straight onto the revealed text. The timeline recipe
+  stays untouched: it keeps sweeping the skeleton and cross-fading to the
+  content, and these decide what that content says and what both halves look
+  like.
+
+    - name (string, default Jane Cooper): the primary line revealed once the
+      skeleton fades out. Blank falls back to the default.
+    - detail (string, default jane@example.com): the secondary line under the
+      name, such as an email or a role. Blank falls back to the default.
+    - tone (light | dark, default light): card palette. Light is the paper card
+      with grey bars, dark is a near-black card with the matching skeleton bars
+      and text, for compositions on a dark stage.
+
+  On every default the result is identical to the original: a white card that
+  shimmers, then reveals Jane Cooper and jane@example.com.
+-->
+
+<div
+  class="hf-transition-skeleton-reveal"
+  data-composition-variables='[
+    { "id": "name", "type": "string", "role": "content", "label": "Name", "description": "Primary line revealed once the skeleton fades out.", "default": "Jane Cooper" },
+    { "id": "detail", "type": "string", "role": "content", "label": "Detail", "description": "Secondary line under the name, such as an email or a role.", "default": "jane@example.com" },
+    { "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Card palette. Light is the paper card, dark is a near-black card with the matching skeleton bars and text.", "default": "light", "options": [{ "value": "light", "label": "Light" }, { "value": "dark", "label": "Dark" }] }
+  ]'
+>
+  <div class="skeleton"></div>
+  <div class="content"><strong>Jane Cooper</strong><span>jane@example.com</span></div>
+</div>
+
+<style>
+  .hf-transition-skeleton-reveal {
+    position: relative;
+    width: 340px;
+    height: 76px;
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-transition-skeleton-reveal .skeleton,
+  .hf-transition-skeleton-reveal .content {
+    position: absolute;
+    inset: 0;
+    border: 1px solid var(--hf-sr-border, #e4e4e7);
+    border-radius: 14px;
+    background: var(--hf-sr-surface, #fff);
+  }
+  .hf-transition-skeleton-reveal .skeleton {
+    background: linear-gradient(
+      90deg,
+      var(--hf-sr-bar, #f4f4f5),
+      var(--hf-sr-bar-strong, #e4e4e7),
+      var(--hf-sr-bar, #f4f4f5)
+    );
+    background-size: 240% 100%;
+    opacity: 1;
+  }
+  .hf-transition-skeleton-reveal .content {
+    display: grid;
+    align-content: center;
+    gap: 5px;
+    padding: 15px;
+    opacity: 0;
+    color: var(--hf-sr-ink, #18181b);
+  }
+  .hf-transition-skeleton-reveal span {
+    color: var(--hf-sr-muted, #71717a);
+    font-size: 14px;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    var tones = {
+      light: null,
+      dark: {
+        "--hf-sr-surface": "#18181b",
+        "--hf-sr-border": "#27272a",
+        "--hf-sr-bar": "#27272a",
+        "--hf-sr-bar-strong": "#3f3f46",
+        "--hf-sr-ink": "#fafafa",
+        "--hf-sr-muted": "#a1a1aa",
+      },
+    };
+    var defaultName = "Jane Cooper";
+    var defaultDetail = "jane@example.com";
+
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    function text(value, fallback) {
+      return typeof value === "string" && value.trim() ? value.trim() : fallback;
+    }
+
+    var tone = tones[pick(tones, vars.tone, "light")];
+    var name = text(vars.name, defaultName);
+    var detail = text(vars.detail, defaultDetail);
+
+    var roots = document.querySelectorAll(".hf-transition-skeleton-reveal");
+    for (var i = 0; i < roots.length; i += 1) {
+      var root = roots[i];
+      if (tone) {
+        for (var key in tone) root.style.setProperty(key, tone[key]);
+      }
+      var strong = root.querySelector(".content strong");
+      var span = root.querySelector(".content span");
+      if (strong) strong.textContent = name;
+      if (span) span.textContent = detail;
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.to('.hf-transition-skeleton-reveal .skeleton', { backgroundPosition: '100% 0', duration: 0.7, ease: 'none' }, startTime); tl.to('.hf-transition-skeleton-reveal .skeleton', { opacity: 0, duration: 0.22 }, startTime + 0.72); tl.to('.hf-transition-skeleton-reveal .content', { opacity: 1, duration: 0.24 }, startTime + 0.78);
+-->
diff --git a/docs/public/catalog/components/slit-scan-reveal/README.md b/docs/public/catalog/components/slit-scan-reveal/README.md
new file mode 100644
index 0000000000..0fb344c42d
--- /dev/null
+++ b/docs/public/catalog/components/slit-scan-reveal/README.md
@@ -0,0 +1,60 @@
+# slit-scan-reveal
+
+Time experiment primitive: the frame's rows sample the subject at offset
+times. An authored token mark (accent-ringed disc with an orbit dot)
+sweeps in on ONE pure position function pos(t); a canvas painter draws the
+frame as row (or column) slices, slice i showing the subject's state at
+t - offset(i). Arrival smears through time, near bands leading, far bands
+trailing; on the resolve cue the offsets collapse to zero with one eased
+0.6s pass and the mark holds coherent. 4s authored, elastic HOLD (never
+time-scaled).
+
+## Mounting
+
+```html
+<div
+  class="clip"
+  data-composition-id="slit-scan-reveal"
+  data-composition-src="./components/slit-scan-reveal.html"
+  data-variable-values='{"axis":"cols","spread":0.6,"accent":"violet"}'
+  data-start="0"
+  data-duration="4"
+  data-track-index="0"
+></div>
+```
+
+## Variables
+
+| id         | type   | default | notes                                                                                                     |
+| ---------- | ------ | ------- | --------------------------------------------------------------------------------------------------------- |
+| axis       | enum   | rows    | rows smears across horizontal slices, cols across vertical slices.                                        |
+| spread     | number | 0.45    | Maximum sampling offset in seconds across the frame (clamped 0.1 to 1.2).                                 |
+| resolve_at | number | 2.2     | Seconds when the offsets start collapsing. Clamped so the 0.6s collapse and any exit fit inside the clip. |
+| accent     | enum   | green   | green maps to --brand, blue to --accent, violet to --accent-2.                                            |
+| exit       | enum   | none    | none holds the resolved mark (frame roots own transitions); fade or up add a 0.45s departure.             |
+
+## Choreography
+
+- 0.25s: the subject starts its sweep from the wing (rows: in from the
+  left; cols: down from the top, so the slices always cut across the
+  travel): cubic-eased travel to dead center with a decaying two-cycle
+  sine bob (integer cycles, exactly zero at rest) and a settling scale.
+- Throughout the sweep the slices smear it through time: slice 0 shows
+  now, the far slice shows spread seconds ago, with a seeded hairline
+  jitter per slice so the edge stays organic.
+- resolve_at: the offsets collapse to zero over 0.6s (eased both ends);
+  the smear zips shut onto the resting subject.
+- HOLD: dead still and coherent, elastic with the clip duration.
+
+Sync point `resolved` fires as the collapse completes; align SFX to it.
+
+## Determinism
+
+pos(t) is closed-form, so any sampled time t - offset is exact; per-slice
+jitter is one table computed once at build from fixed LCG seed 0x51175c4e.
+One plain-object anchor tween feeds one painter that clears and redraws
+every slice from scratch as a pure function of the timeline time, so
+eventful seeks land identical frames in any order and either direction.
+The raster basis is the host box measured once at mount; sampled times
+before mount clamp to the subject's start state (not-yet-appeared), and
+after the collapse every slice samples the same resting state.
diff --git a/docs/public/catalog/components/slit-scan-reveal/demo.html b/docs/public/catalog/components/slit-scan-reveal/demo.html
new file mode 100644
index 0000000000..330971dabd
--- /dev/null
+++ b/docs/public/catalog/components/slit-scan-reveal/demo.html
@@ -0,0 +1,101 @@
+<!doctype html>
+<!--
+  slit-scan-reveal demo. A full-bleed 1920x1080 LIGHT host mounts the
+  primitive through data-composition-src with non-default variables
+  (column axis, wider spread, earlier resolve, violet accent) while the
+  primitive stays elastic to its host.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Slit Scan Reveal Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #f5f6f8);
+      }
+
+      #root {
+        --bg: #f5f6f8;
+        --fg: #101318;
+        --muted: #5b6472;
+        --surface: #ffffff;
+        --border: #d7dce4;
+        --brand: #14a35e;
+        --accent: #2f6fed;
+        --accent-2: #7a5cd6;
+        --radius: 24px;
+        --font-display: "Inter", system-ui, sans-serif;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg);
+      }
+
+      .mount-stage {
+        position: absolute;
+        inset: 0;
+        container-type: size;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="slit-scan-reveal-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="slit-scan-reveal-mount"
+        class="mount-stage clip"
+        data-composition-id="slit-scan-reveal"
+        data-composition-src="./slit-scan-reveal.html"
+        data-variable-values='{"axis":"cols","spread":1.0,"resolve_at":2.0,"accent":"violet"}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="1920"
+        data-height="1080"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["slit-scan-reveal-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "slit-scan-reveal.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/slit-scan-reveal/slit-scan-reveal.html b/docs/public/catalog/components/slit-scan-reveal/slit-scan-reveal.html
new file mode 100644
index 0000000000..f23138ab47
--- /dev/null
+++ b/docs/public/catalog/components/slit-scan-reveal/slit-scan-reveal.html
@@ -0,0 +1,332 @@
+<!doctype html>
+<!--
+  slit-scan-reveal: HyperFrames video primitive (time)
+
+  The frame's rows sample the subject at offset times. The subject is an
+  authored token mark (an accent-ringed disc with an orbit dot) whose
+  motion is one pure position function pos(t): it sweeps in from the wing
+  on a decaying sine bob and rests dead-center. A canvas painter draws the
+  frame as row (or column) slices, slice i showing the subject's state at
+  t - offset(i): arrival smears through time, near bands leading, far
+  bands trailing. On the resolve cue the offsets collapse to zero with one
+  eased pass, the smear zips shut, and the subject holds coherent.
+
+  Variables (declared in data-composition-variables below):
+    - axis ("rows" | "cols"): horizontal row slices or vertical column
+      slices.
+    - spread (seconds): the maximum sampling offset across the frame.
+    - resolve_at (seconds): when the offsets start collapsing to zero
+      (0.6s eased collapse). Clamped so the collapse and any exit stay
+      inside the clip.
+    - accent ("green" | "blue" | "violet"): green rides --brand, blue
+      rides --accent, violet rides --accent-2.
+    - exit ("none" | "fade" | "up", default none): frame roots own
+      transitions; the default holds the resolved mark to the last pixel.
+
+  Envelope, fixed IN and OUT with elastic HOLD only (never timeScale):
+    the subject's travel and the collapse are authored against the cues;
+    HOLD = D - (resolve end) - OUT, truly still (after the collapse every
+    slice samples the same resting state, so repaints are identical).
+    OUT_BASE = 0.45s only when exit != none.
+
+  Determinism (canvas 2D law): per-slice offset jitter comes from one
+  table computed once during synchronous timeline construction from fixed
+  LCG seed 0x51175c4e. Every painted frame is a pure
+  function of (that table, the timeline's current time): the timeline's
+  onUpdate clears the canvas and, for every slice, clips to the slice band
+  and redraws the whole subject at its sampled time from scratch. pos(t)
+  is closed-form (cubic ease + integer sine cycles that end at zero), so
+  any sampled time is exact. No Math.random, no wall clock, no
+  incremental state: eventful seeks repaint identically in any order and
+  either direction.
+
+  Mount contract: the runtime clones only this template. #root fills the
+  host box (no data-width/data-height, container-type: size, cqmin units),
+  is styled via #root only, and registers one paused timeline under the
+  LITERAL "slit-scan-reveal" key. All DOM state is set with explicit
+  endpoints (gsap.set + fromTo) so any seek order lands identical frames.
+-->
+<html
+  lang="en"
+  data-composition-id="slit-scan-reveal"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "axis", "type": "enum", "role": "style", "label": "Axis", "description": "rows smears arrival across horizontal slices; cols across vertical slices.", "default": "rows", "options": [{ "value": "rows", "label": "Rows" }, { "value": "cols", "label": "Columns" }] },
+    { "id": "spread", "type": "number", "role": "timing", "label": "Spread", "description": "Maximum sampling offset in seconds across the frame; larger smears further through time.", "default": 0.45 },
+    { "id": "resolve_at", "type": "number", "role": "timing", "label": "Resolve at", "description": "Seconds from mount start when the offsets start collapsing to zero. Clamped so the collapse and any exit stay inside the clip.", "default": 2.2 },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Subject ring and orbit color: green rides --brand, blue rides --accent, violet rides --accent-2.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the resolved mark holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Slit Scan Reveal</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="slit-scan-reveal" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, "Inter", system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .ssr-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .ssr-stage {
+            position: absolute;
+            inset: 0;
+            will-change: transform, opacity;
+          }
+
+          .ssr-canvas {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+          }
+        </style>
+
+        <div
+          id="slit-scan-reveal-clip"
+          class="ssr-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="ssr-stage">
+            <canvas class="ssr-canvas" aria-hidden="true"></canvas>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".ssr-stage");
+            var canvas = root.querySelector(".ssr-canvas");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var axis = vars.axis === "cols" ? "cols" : "rows";
+            var spreadRaw = parseFloat(vars.spread);
+            var spread = isFinite(spreadRaw) ? Math.min(Math.max(0.1, spreadRaw), 1.2) : 0.45;
+            var resolveRaw = parseFloat(vars.resolve_at);
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            // Envelope. The collapse is 0.6s; resolve_at is clamped so the
+            // collapse and any exit always fit inside the clip.
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var OUT = exit === "none" ? 0 : 0.45;
+            var COLLAPSE = 0.6;
+            var resolveAt = isFinite(resolveRaw) ? resolveRaw : 2.2;
+            resolveAt = Math.min(
+              Math.max(0.4, resolveAt),
+              Math.max(0.4, duration - COLLAPSE - OUT - 0.1),
+            );
+            // The subject's travel ends just before the collapse begins so
+            // the zip-shut lands on a resting subject.
+            var MOVE_START = 0.25;
+            var MOVE_END = Math.max(MOVE_START + 0.6, resolveAt - 0.1);
+            var OUT_START = duration - OUT;
+
+            // Canvas raster basis, fixed once at mount (elastic root).
+            var dpr = Math.min(2, Math.max(1, Number(window.devicePixelRatio) || 1));
+            var box = root.getBoundingClientRect();
+            var cssW = Math.max(1, Math.round(box.width) || 640);
+            var cssH = Math.max(1, Math.round(box.height) || 360);
+            canvas.width = Math.round(cssW * dpr);
+            canvas.height = Math.round(cssH * dpr);
+            var ctx = canvas.getContext("2d");
+            var minDim = Math.min(canvas.width, canvas.height);
+
+            // Resolve tokens to concrete colors once at mount so canvas
+            // fills never depend on style recalc during seeks.
+            var hostDoc = root.ownerDocument;
+            function resolveColor(cssColor, fallback) {
+              var probe = hostDoc.createElement("span");
+              probe.style.color = cssColor;
+              root.appendChild(probe);
+              var value = getComputedStyle(probe).color || fallback;
+              probe.remove();
+              return value;
+            }
+            var accentColor = resolveColor(accentColors[accent], "#71f5a7");
+            var surfaceColor = resolveColor("var(--surface, #14171c)", "#14171c");
+            var fgColor = resolveColor("var(--fg, #f8fafc)", "#f8fafc");
+
+            // Seeded per-slice offset jitter: a stable table, computed once.
+            var SLICES = 96;
+            var jitter = (function () {
+              var state = 0x51175c4e;
+              function next() {
+                state = (Math.imul(1664525, state) + 1013904223) >>> 0;
+                return state / 4294967296;
+              }
+              var rows = [];
+              for (var i = 0; i < SLICES; i += 1) {
+                rows.push(0.96 + 0.08 * next());
+              }
+              return rows;
+            })();
+
+            function clamp01(v) {
+              return v < 0 ? 0 : v > 1 ? 1 : v;
+            }
+
+            // The subject's authored motion: ONE pure position function.
+            // Cubic-eased sweep from the wing to dead center with a
+            // decaying two-cycle sine bob (integer cycles, exactly zero at
+            // u = 1) and a settling scale. The sweep runs ACROSS the slice
+            // axis (rows: left wing in, cols: top wing down) so every band
+            // cuts the travel and the offsets read as a staircase smear,
+            // not a local skew. Defined for every t; clamped flat outside
+            // [MOVE_START, MOVE_END], so sampled times before mount or
+            // into the hold are exact and still.
+            function subjectState(t) {
+              var u = clamp01((t - MOVE_START) / (MOVE_END - MOVE_START));
+              var e = 1 - Math.pow(1 - u, 3);
+              var decay = (1 - u) * (1 - u);
+              var travel = -0.16 + 0.66 * e;
+              var bob = 0.5 + 0.15 * Math.sin(Math.PI * 2 * 2 * u) * decay;
+              return {
+                x: (axis === "rows" ? travel : bob) * canvas.width,
+                y: (axis === "rows" ? bob : travel) * canvas.height,
+                rot: 0.5 * Math.sin(Math.PI * 2 * u) * decay,
+                scale: 0.82 + 0.18 * e,
+                appear: clamp01(u / 0.12),
+              };
+            }
+
+            // Draw the whole subject (token disc + accent ring + orbit dot)
+            // at one sampled state. Callers clip to a slice band first.
+            function drawSubject(s) {
+              if (s.appear <= 0) return;
+              var r = 0.15 * minDim * s.scale;
+              ctx.save();
+              ctx.translate(s.x, s.y);
+              ctx.rotate(s.rot);
+              ctx.globalAlpha = s.appear;
+              // Disc body.
+              ctx.fillStyle = surfaceColor;
+              ctx.beginPath();
+              ctx.arc(0, 0, r, 0, Math.PI * 2);
+              ctx.fill();
+              // Accent ring.
+              ctx.strokeStyle = accentColor;
+              ctx.lineWidth = Math.max(1, 0.016 * minDim);
+              ctx.beginPath();
+              ctx.arc(0, 0, r, 0, Math.PI * 2);
+              ctx.stroke();
+              // Inner core.
+              ctx.fillStyle = fgColor;
+              ctx.globalAlpha = s.appear * 0.92;
+              ctx.beginPath();
+              ctx.arc(0, 0, r * 0.3, 0, Math.PI * 2);
+              ctx.fill();
+              // Orbit dot: the asymmetry that makes the smear legible.
+              ctx.fillStyle = accentColor;
+              ctx.globalAlpha = s.appear;
+              ctx.beginPath();
+              ctx.arc(r * 0.72, 0, r * 0.13, 0, Math.PI * 2);
+              ctx.fill();
+              ctx.restore();
+            }
+
+            // Pure repaint: for every slice, clip to its band and draw the
+            // subject at t - offset(slice) * collapse(t).
+            function paint(t) {
+              ctx.clearRect(0, 0, canvas.width, canvas.height);
+              var collapse = 1 - clamp01((t - resolveAt) / COLLAPSE);
+              // Eased collapse: smooth both ends (power2.inOut shape).
+              collapse =
+                collapse < 0.5 ? 2 * collapse * collapse : 1 - Math.pow(-2 * collapse + 2, 2) / 2;
+              if (collapse <= 0) {
+                // Resolved: one coherent draw, no per-slice clipping.
+                drawSubject(subjectState(t));
+                return;
+              }
+              var along = axis === "rows" ? canvas.height : canvas.width;
+              var band = along / SLICES;
+              for (var i = 0; i < SLICES; i += 1) {
+                var frac = i / (SLICES - 1);
+                var offset = spread * frac * jitter[i] * collapse;
+                var s = subjectState(t - offset);
+                if (s.appear <= 0) continue;
+                ctx.save();
+                ctx.beginPath();
+                if (axis === "rows") {
+                  ctx.rect(0, i * band, canvas.width, band + 1);
+                } else {
+                  ctx.rect(i * band, 0, band + 1, canvas.height);
+                }
+                ctx.clip();
+                drawSubject(s);
+                ctx.restore();
+              }
+            }
+
+            gsap.set(stage, { opacity: 1, y: "0cqh" });
+
+            var tl = gsap.timeline({
+              paused: true,
+              onUpdate: function () {
+                paint(tl.time());
+              },
+            });
+
+            // Anchor tween: an inert plain-object tween spanning the full
+            // authored duration so tl.time() covers [0, D] and onUpdate
+            // repaints the canvas on every eventful seek.
+            tl.to({ p: 0 }, { p: 1, duration: duration, ease: "none" }, 0);
+
+            // HOLD: truly still. After the collapse every slice samples the
+            // same resting state, so the canvas repaints one coherent mark.
+
+            // OUT: optional departure; exit none holds until the frame cuts.
+            if (exit === "up") {
+              tl.to(stage, { y: "-4cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "fade") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            }
+
+            tl.seek(0);
+            paint(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["slit-scan-reveal"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/slot-machine-roll/__hf-variables-preview.html b/docs/public/catalog/components/slot-machine-roll/__hf-variables-preview.html
new file mode 100644
index 0000000000..5137b7dc07
--- /dev/null
+++ b/docs/public/catalog/components/slot-machine-roll/__hf-variables-preview.html
@@ -0,0 +1,70 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Slot Machine Roll variables preview</title>
+    <style>
+      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #f7f7f8; }
+      #hf-vars-root { position: relative; width: 1920px; height: 1080px; }
+      #hf-vars-mount { position: absolute; inset: 0; display: grid; place-items: center; }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  </head>
+  <body>
+    <div id="hf-vars-root" data-composition-id="slot-machine-roll-variables-preview" data-start="0" data-width="1920" data-height="1080" data-duration="5" data-fps="30">
+      <div id="hf-vars-mount" class="clip" data-composition-id="slot-machine-roll" data-composition-src="./slot-machine-roll.html" data-start="0" data-duration="5" data-track-index="0" data-width="1920" data-height="1080"></div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["slot-machine-roll-variables-preview"] = gsap.timeline({ paused: true });
+    </script>
+    <script>
+      (function () {
+        var mount = document.getElementById("hf-vars-mount");
+        // The mount is filled asynchronously, and the demo script selects
+        // what it fills it with, so it cannot run before then.
+        var observer = new MutationObserver(build);
+        observer.observe(mount, { childList: true, subtree: true });
+        build();
+        function build() {
+          if (!mount.firstElementChild) return;
+          observer.disconnect();
+
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-slot-machine-roll i",
+          { "--hf-slot-y": "0px" },
+          { "--hf-slot-y": "-74px", duration: 0.52, stagger: 0.06, ease: "power3.inOut" },
+          startTime,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["slot-machine-roll-demo"] = tl;
+          var child = window.__timelines["slot-machine-roll-demo"];
+          delete window.__timelines["slot-machine-roll-demo"];
+          if (!child || typeof child.paused !== "function") return;
+          child.paused(false);
+          window.__timelines["slot-machine-roll-variables-preview"].add(child, 0);
+        }
+      })();
+    </script>
+<script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "slot-machine-roll.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/slot-machine-roll/demo.html b/docs/public/catalog/components/slot-machine-roll/demo.html
new file mode 100644
index 0000000000..4b25192409
--- /dev/null
+++ b/docs/public/catalog/components/slot-machine-roll/demo.html
@@ -0,0 +1,138 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Slot Machine Roll - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 32px;
+        /* ponytail: scale on non-GSAP wrapper — safe, GSAP only animates --hf-slot-y on inner <i> */
+        transform: scale(1.85);
+        transform-origin: center center;
+      }
+      .slot-card {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 24px;
+        background: #ffffff;
+        border: 1px solid #e4e4e7;
+        border-radius: 14px;
+        padding: 40px 56px;
+        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.1);
+      }
+      .slot-label {
+        font-family: Inter, system-ui, sans-serif;
+        font-size: 11px;
+        font-weight: 500;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+        color: #71717a;
+      }
+      .hf-remocn-slot-machine-roll {
+        color: #18181b;
+        font-family: Inter, system-ui, sans-serif;
+        font-weight: 900;
+        letter-spacing: -0.04em;
+      }
+      .hf-remocn-slot-machine-roll {
+        display: inline-flex;
+        gap: 6px;
+        height: 74px;
+        overflow: hidden;
+        font:
+          900 74px/1 ui-monospace,
+          SFMono-Regular,
+          Menlo,
+          monospace;
+      }
+      .hf-remocn-slot-machine-roll span {
+        display: block;
+        height: 74px;
+        overflow: hidden;
+      }
+      .hf-remocn-slot-machine-roll i {
+        display: block;
+        font-style: normal;
+        transform: translateY(var(--hf-slot-y, 0px));
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="slot-machine-roll-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="slot-card">
+          <div class="slot-label">Slot Machine Roll</div>
+          <div class="hf-remocn-slot-machine-roll">
+            <span
+              ><i>0<br />A</i></span
+            ><span
+              ><i>0<br />7</i></span
+            ><span
+              ><i>0<br />K</i></span
+            >
+          </div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-slot-machine-roll i",
+          { "--hf-slot-y": "0px" },
+          { "--hf-slot-y": "-74px", duration: 0.52, stagger: 0.06, ease: "power3.inOut" },
+          startTime,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["slot-machine-roll-demo"] = tl;
+      </script>
+    </div>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "slot-machine-roll.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/slot-machine-roll/slot-machine-roll.html b/docs/public/catalog/components/slot-machine-roll/slot-machine-roll.html
new file mode 100644
index 0000000000..b724cc1c63
--- /dev/null
+++ b/docs/public/catalog/components/slot-machine-roll/slot-machine-roll.html
@@ -0,0 +1,136 @@
+<!--
+  Slot Machine Roll - remocn typography primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Drive the timeline
+  integration from a paused GSAP timeline so renders remain deterministic.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result as a custom property
+  the CSS below consumes. The timeline recipe stays untouched by them: it keeps
+  driving one vertical offset of exactly one row, and these decide how tall that
+  row is, which way it travels and what it lands on.
+
+    - result (text, default "A7K"): the characters the reels land on, one reel
+      column per character. Whitespace is stripped, and blank or non-text input
+      falls back to the default three. Every reel starts on a zero.
+    - direction (up | down, default up): which way the reels roll. up lifts the
+      zero out through the top, down drops it out through the bottom.
+    - size (small | standard | large, default standard): reel height and type
+      size, 48px, 74px or 104px. The roll distance is scaled by the same factor,
+      so whatever the size the reel still lands exactly one row on.
+    - tone (ink | paper | accent, default ink): character colour. ink is
+      near-black for light frames, paper near-white for dark ones, accent rides
+      --brand.
+
+  On every default the result is identical to the original: three 74px reels in
+  near-black rolling 0 up to A, 7 and K.
+-->
+
+<div
+  class="hf-remocn-slot-machine-roll"
+  data-composition-variables='[
+    { "id": "result", "type": "string", "role": "content", "label": "Result", "description": "Characters the reels land on, one reel column per character. Whitespace is stripped and every reel starts on a zero.", "default": "A7K" },
+    { "id": "direction", "type": "enum", "role": "motion", "label": "Direction", "description": "Which way the reels roll: up lifts the zero out through the top, down drops it out through the bottom.", "default": "up", "options": [{ "value": "up", "label": "Up" }, { "value": "down", "label": "Down" }] },
+    { "id": "size", "type": "enum", "role": "layout", "label": "Size", "description": "Reel height and type size. The roll distance scales with it so the reel always lands exactly one row on.", "default": "standard", "options": [{ "value": "small", "label": "Small" }, { "value": "standard", "label": "Standard" }, { "value": "large", "label": "Large" }] },
+    { "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Character colour: ink for light frames, paper for dark ones, accent rides --brand.", "default": "ink", "options": [{ "value": "ink", "label": "Ink" }, { "value": "paper", "label": "Paper" }, { "value": "accent", "label": "Accent" }] }
+  ]'
+>
+  <span
+    ><i>0<br />A</i></span
+  ><span
+    ><i>0<br />7</i></span
+  ><span
+    ><i>0<br />K</i></span
+  >
+</div>
+
+<style>
+  .hf-remocn-slot-machine-roll {
+    color: var(--hf-slot-color, #18181b);
+    font-family: Inter, system-ui, sans-serif;
+    font-weight: 900;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-slot-machine-roll {
+    display: inline-flex;
+    gap: 6px;
+    height: var(--hf-slot-row, 74px);
+    overflow: hidden;
+    font:
+      900 var(--hf-slot-row, 74px)/1 ui-monospace,
+      SFMono-Regular,
+      Menlo,
+      monospace;
+  }
+  .hf-remocn-slot-machine-roll span {
+    display: block;
+    height: var(--hf-slot-row, 74px);
+    overflow: hidden;
+  }
+  .hf-remocn-slot-machine-roll i {
+    display: block;
+    font-style: normal;
+    transform: translateY(
+      calc(
+        var(--hf-slot-base, 0px) + var(--hf-slot-y, 0px) * var(--hf-slot-dir, 1) *
+          var(--hf-slot-gain, 1)
+      )
+    );
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var directions = { up: 1, down: -1 };
+    var sizes = { small: 48, standard: 74, large: 104 };
+    var tones = {
+      ink: "#18181b",
+      paper: "#fafafa",
+      accent: "var(--brand, #34d399)",
+    };
+
+    var dir = directions[pick(directions, vars.direction, "up")];
+    var row = sizes[pick(sizes, vars.size, "standard")];
+    var tone = tones[pick(tones, vars.tone, "ink")];
+    var result = (typeof vars.result === "string" ? vars.result : "").replace(/\s+/g, "");
+    if (result.length === 0) result = "A7K";
+
+    var roots = document.querySelectorAll(".hf-remocn-slot-machine-roll");
+    for (var i = 0; i < roots.length; i += 1) {
+      var root = roots[i];
+      root.style.setProperty("--hf-slot-row", row + "px");
+      root.style.setProperty("--hf-slot-gain", String(row / 74));
+      root.style.setProperty("--hf-slot-dir", String(dir));
+      // Rolling down starts one row up, so the zero still sits in frame at rest.
+      root.style.setProperty("--hf-slot-base", (dir === 1 ? 0 : -row) + "px");
+      root.style.setProperty("--hf-slot-color", tone);
+      root.textContent = "";
+      for (var j = 0; j < result.length; j += 1) {
+        var reel = document.createElement("i");
+        reel.appendChild(document.createTextNode(dir === 1 ? "0" : result.charAt(j)));
+        reel.appendChild(document.createElement("br"));
+        reel.appendChild(document.createTextNode(dir === 1 ? result.charAt(j) : "0"));
+        var slot = document.createElement("span");
+        slot.appendChild(reel);
+        root.appendChild(slot);
+      }
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-slot-machine-roll i', { '--hf-slot-y': '0px' }, { '--hf-slot-y': '-74px', duration: 0.52, stagger: 0.06, ease: 'power3.inOut' }, startTime);
+-->
diff --git a/docs/public/catalog/components/soft-blob-touch/README.md b/docs/public/catalog/components/soft-blob-touch/README.md
new file mode 100644
index 0000000000..afb3f7ea2c
--- /dev/null
+++ b/docs/public/catalog/components/soft-blob-touch/README.md
@@ -0,0 +1,67 @@
+# soft-blob-touch
+
+Product demo material primitive: a granular soft blob (layered radial
+gradients plus a seeded grain field) idles with slow internal drift; a
+scripted touch dot decel-arrives at a caller-positioned point; the blob
+deforms toward it (attraction bulge with mass), then recovers with a
+velocity-preserving spring once the dot retreats. The AI-orb beat. Material
+softness is the whole point: nothing in the frame has a hard edge. 4s
+authored, elastic HOLD (never time-scaled).
+
+## Mounting
+
+```html
+<div
+  class="clip"
+  data-composition-id="soft-blob-touch"
+  data-composition-src="./components/soft-blob-touch.html"
+  data-variable-values='{"touch_x":30,"touch_y":62,"grain":"coarse","accent":"violet"}'
+  data-start="0"
+  data-duration="4"
+  data-track-index="0"
+></div>
+```
+
+Best on a dark or deep-toned host: the body is additive light (accent-tinted
+gradients and specks over a transparent canvas), so the frame beneath shows
+through the aura.
+
+## Variables
+
+| id       | type   | default | notes                                                                                                                                   |
+| -------- | ------ | ------- | --------------------------------------------------------------------------------------------------------------------------------------- |
+| touch_x  | number | 66      | Touch point, percent of host width (8 to 92).                                                                                           |
+| touch_y  | number | 38      | Touch point, percent of host height (8 to 92).                                                                                          |
+| touch_at | number | 1.6     | Seconds from mount start when the dot makes contact. Clamped so the deform and recover tail (~1.57s) and any exit stay inside the clip. |
+| grain    | enum   | fine    | fine (many small specks) or coarse (fewer, larger).                                                                                     |
+| accent   | enum   | green   | green maps to --brand, blue to --accent, violet to --accent-2. Tints the aura, body, and specks.                                        |
+| exit     | enum   | none    | none holds the settled blob (frame roots own transitions); fade or up add a 0.45s departure.                                            |
+
+## Choreography
+
+- 0.00s: the blob is present and idling; every speck drifts on its own
+  slow sine, each an integer number of cycles over the IN window, so the
+  drift is exactly zero when the hold begins.
+- touch_at - 0.85s: the dot enters from off stage along the attraction
+  axis, decelerating the whole way (power3.out: it arrives, it never
+  passes through).
+- touch_at: contact. The blob leans and bulges toward the dot: specks are
+  attracted with an exponential falloff (the material near the dot reaches
+  for it, the far side barely stirs) while a gradient lobe swells at the
+  surface.
+- touch_at + 0.41s: the dot lifts mid-lean (analytic cut). The recovery
+  spring starts with the exact velocity the lean-in had at the cut, so the
+  blob keeps deforming for a beat, overshoots home, and wobbles out: the
+  bulge on a fast spring, the whole-mass lean on a slower one.
+- touch_at + 1.57s: settled. HOLD is dead still, elastic with the clip.
+
+Sync point `touch` fires at contact; align SFX or a downstream reveal to it.
+
+## Determinism
+
+The grain table is computed once at build from a fixed LCG seed; every
+painted frame is a pure function of (table, two tweened params, timeline
+time). The canvas repaints from scratch in onUpdate, so eventful seeks land
+identical frames in any order and either direction. The recovery is a
+closed-form damped spring evaluated inside a tween ease, which keeps the
+interruptible-spring law (L1) inside one paused, seek-safe timeline.
diff --git a/docs/public/catalog/components/soft-blob-touch/demo.html b/docs/public/catalog/components/soft-blob-touch/demo.html
new file mode 100644
index 0000000000..e926332f05
--- /dev/null
+++ b/docs/public/catalog/components/soft-blob-touch/demo.html
@@ -0,0 +1,98 @@
+<!doctype html>
+<!--
+  soft-blob-touch demo. A full-bleed 1920x1080 dark host mounts the
+  primitive through data-composition-src with non-default variables
+  (touch point low-left, coarse grain, violet accent) to prove the
+  variable path while the primitive stays elastic to its host.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Soft Blob Touch Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #0b0c0e);
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --muted: #94a3b8;
+        --surface: #14171c;
+        --border: #343a46;
+        --brand: #71f5a7;
+        --accent: #61a8ff;
+        --accent-2: #c5a3ff;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 44%, #14161b 0%, var(--bg, #0b0c0e) 74%);
+      }
+
+      .mount-stage {
+        position: absolute;
+        inset: 0;
+        container-type: size;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="soft-blob-touch-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="soft-blob-touch-mount"
+        class="mount-stage clip"
+        data-composition-id="soft-blob-touch"
+        data-composition-src="./soft-blob-touch.html"
+        data-variable-values='{"touch_x":30,"touch_y":62,"touch_at":1.4,"grain":"coarse","accent":"violet"}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="1920"
+        data-height="1080"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["soft-blob-touch-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "soft-blob-touch.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/soft-blob-touch/soft-blob-touch.html b/docs/public/catalog/components/soft-blob-touch/soft-blob-touch.html
new file mode 100644
index 0000000000..1c124131ac
--- /dev/null
+++ b/docs/public/catalog/components/soft-blob-touch/soft-blob-touch.html
@@ -0,0 +1,515 @@
+<!doctype html>
+<!--
+  soft-blob-touch: HyperFrames video primitive (product demo / material)
+
+  A granular soft blob idles with slow internal drift; a scripted touch dot
+  decel-arrives at a caller-positioned point; the blob deforms toward it
+  (an attraction bulge with mass), then recovers with an interruptible
+  spring once the dot retreats. The AI-orb material beat. Softness is the
+  whole point: the body is layered radial gradients plus a seeded grain
+  field, and nothing in the frame has a hard edge.
+
+  Reference: alexwidua 1702356241186476225 sheet-02 (granular blob leaning
+  toward a finger; fuzzy boundary, mass, recovery wobble).
+
+  Variables (declared in data-composition-variables below):
+    - touch_x, touch_y (numbers, percent of host box): where the dot lands.
+    - touch_at (seconds): when the dot makes contact. Clamped so the whole
+      deform and recover tail stays inside the clip.
+    - grain ("fine" | "coarse"): speck count and size for the body.
+    - accent ("green" | "blue" | "violet"): green rides --brand, blue rides
+      --accent, violet rides --accent-2.
+    - exit ("none" | "fade" | "up"): default none, the settled blob holds.
+
+  Envelope, fixed IN and OUT with elastic HOLD only (never timeScale):
+    IN ends when the recovery spring settles (touch_at + 1.57s); HOLD is
+    dead still (drift completes integer sine cycles and ends at exactly
+    zero by then); OUT = 0.45s only when exit is not none.
+
+  Deformation model (law L1, interruptible spring):
+    Two plain-object params (bulge, lean) feed ONE onUpdate painter. The
+    attack tween is the first 75 percent of a power2.out lean-in, cut
+    mid-flight when the dot lifts (analytic cut: the junction value AND
+    velocity are computed in closed form). The recovery tween's ease is a
+    closed-form underdamped spring whose initial velocity equals the cut
+    velocity, so the redirect preserves momentum exactly. Both tweens have
+    explicit endpoints; any seek order lands identical values.
+
+  Determinism (canvas 2D law, per particle-image-reveal):
+    One grain table is computed exactly once at build from fixed LCG seed
+    0x50f7b10b. Every painted frame is a pure function of (table, params,
+    timeline time). onUpdate clears and redraws from scratch; no
+    Math.random, no wall clock, no incremental state. Eventful seeks
+    (suppressEvents false) repaint identically in any order.
+-->
+<html
+  lang="en"
+  data-composition-id="soft-blob-touch"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "touch_x", "type": "number", "role": "layout", "label": "Touch X", "description": "Touch point, percent of host width.", "default": 66, "min": 8, "max": 92, "step": 1, "unit": "%" },
+    { "id": "touch_y", "type": "number", "role": "layout", "label": "Touch Y", "description": "Touch point, percent of host height.", "default": 38, "min": 8, "max": 92, "step": 1, "unit": "%" },
+    { "id": "touch_at", "type": "number", "role": "timing", "label": "Touch at", "description": "Seconds from mount start when the dot makes contact.", "default": 1.6, "min": 0.9, "max": 10, "step": 0.1, "unit": "s" },
+    { "id": "grain", "type": "enum", "role": "style", "label": "Grain", "description": "Speck register for the granular body.", "default": "fine", "options": [{ "value": "fine", "label": "Fine" }, { "value": "coarse", "label": "Coarse" }] },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Body tint: green rides --brand, blue rides --accent, violet rides --accent-2.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the settled blob holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Soft Blob Touch</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="soft-blob-touch" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, "Inter", system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .sbt-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+          }
+
+          .sbt-stage {
+            position: absolute;
+            inset: 0;
+            will-change: transform, opacity;
+          }
+
+          .sbt-canvas {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+          }
+
+          /* The touch dot: a soft disc with a gradient falloff, no hard rim.
+             Motion rides transforms only (px), never left or top. */
+          .sbt-touch {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 4.6cqmin;
+            height: 4.6cqmin;
+            margin-left: -2.3cqmin;
+            margin-top: -2.3cqmin;
+            border-radius: 50%;
+            background: radial-gradient(
+              circle at 42% 38%,
+              color-mix(in srgb, var(--fg, #f8fafc) 96%, transparent) 0%,
+              color-mix(in srgb, var(--fg, #f8fafc) 78%, transparent) 34%,
+              color-mix(in srgb, var(--fg, #f8fafc) 26%, transparent) 62%,
+              transparent 78%
+            );
+            will-change: transform, opacity;
+          }
+        </style>
+
+        <div
+          id="soft-blob-touch-clip"
+          class="sbt-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="sbt-stage">
+            <canvas class="sbt-canvas" aria-hidden="true"></canvas>
+            <div class="sbt-touch" aria-hidden="true"></div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".sbt-stage");
+            var canvas = root.querySelector(".sbt-canvas");
+            var touchDot = root.querySelector(".sbt-touch");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            function num(value, fallback, min, max) {
+              var n = Number(value);
+              if (!isFinite(n)) n = fallback;
+              return Math.max(min, Math.min(max, n));
+            }
+
+            var grain = vars.grain === "coarse" ? "coarse" : "fine";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            // The bundler mirrors composition variables as scoped CSS custom
+            // props, so this unit's own accent variable shadows the contract
+            // --accent token inside the subtree ("blue" is a valid CSS color
+            // and would render pure blue). When the shadow is present, fall
+            // back to the literal contract value instead of var(--accent).
+            var computedAccent = getComputedStyle(root).getPropertyValue("--accent").trim();
+            if (
+              computedAccent === "green" ||
+              computedAccent === "blue" ||
+              computedAccent === "violet"
+            ) {
+              accentColors.blue = "#61a8ff";
+            }
+
+            // Envelope. The deform tail is ATTACK + RECOVER after contact;
+            // clamp touch_at so the spring settles inside the clip.
+            var ATTACK_NAT = 0.55; // natural length of the uncut lean-in
+            var CUT_FRAC = 0.75; // the dot lifts at 75 percent of it
+            var ATTACK = ATTACK_NAT * CUT_FRAC;
+            var RECOVER = 1.15;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var OUT = exit === "none" ? 0 : 0.45;
+            var maxTouch = Math.max(0.9, duration - (ATTACK + RECOVER) - OUT - 0.05);
+            var touchAt = num(vars.touch_at, 1.6, 0.9, maxTouch);
+            var cutAt = touchAt + ATTACK;
+            var IN_END = cutAt + RECOVER;
+            var OUT_START = IN_END + Math.max(0, duration - IN_END - OUT);
+
+            // Canvas raster basis is fixed once at mount (elastic root: the
+            // host box decides the resolution; same host, same raster).
+            var dpr = Math.min(2, Math.max(1, Number(window.devicePixelRatio) || 1));
+            var box = root.getBoundingClientRect();
+            var cssW = Math.max(1, Math.round(box.width) || 640);
+            var cssH = Math.max(1, Math.round(box.height) || 360);
+            canvas.width = Math.round(cssW * dpr);
+            canvas.height = Math.round(cssH * dpr);
+            var ctx = canvas.getContext("2d");
+            var W = canvas.width;
+            var H = canvas.height;
+            var minDim = Math.min(W, H);
+
+            var touchX = (num(vars.touch_x, 66, 8, 92) / 100) * W;
+            var touchY = (num(vars.touch_y, 38, 8, 92) / 100) * H;
+            var centerX = W * 0.5;
+            var centerY = H * 0.5;
+            var R = minDim * 0.26;
+
+            // Direction of attraction, guarded for a touch at dead center.
+            var dxT = touchX - centerX;
+            var dyT = touchY - centerY;
+            var distT = Math.hypot(dxT, dyT);
+            var dirX = distT > 1 ? dxT / distT : 0.7071;
+            var dirY = distT > 1 ? dyT / distT : -0.7071;
+
+            // Resolve accent and fg to concrete rgb once at mount so canvas
+            // fills never depend on style recalc during seeks. Mixing happens
+            // numerically here (computed color-mix strings are not parseable
+            // across engines).
+            function probeColor(cssColor, fallback) {
+              var probe = root.ownerDocument.createElement("span");
+              probe.style.color = cssColor;
+              root.appendChild(probe);
+              var out = getComputedStyle(probe).color || fallback;
+              probe.remove();
+              var m = out.match(/rgba?\(\s*([\d.]+)[,\s]+([\d.]+)[,\s]+([\d.]+)/);
+              if (!m) {
+                m = fallback.match(/rgba?\(\s*([\d.]+)[,\s]+([\d.]+)[,\s]+([\d.]+)/);
+              }
+              return m ? [Number(m[1]), Number(m[2]), Number(m[3])] : [113, 245, 167];
+            }
+            var accentRgb = probeColor(accentColors[accent], "rgb(113, 245, 167)");
+            var fgRgb = probeColor("var(--fg, #f8fafc)", "rgb(248, 250, 252)");
+            function mix(a, b, t) {
+              return [
+                Math.round(a[0] + (b[0] - a[0]) * t),
+                Math.round(a[1] + (b[1] - a[1]) * t),
+                Math.round(a[2] + (b[2] - a[2]) * t),
+              ];
+            }
+            function rgba(c, a) {
+              return "rgba(" + c[0] + "," + c[1] + "," + c[2] + "," + a + ")";
+            }
+            var bodyRgb = mix(accentRgb, fgRgb, 0.18);
+            var softRgb = mix(accentRgb, fgRgb, 0.55);
+
+            // The grain table: computed exactly once, then only read.
+            var counts = { fine: 1500, coarse: 760 };
+            var sizes = { fine: 0.0055, coarse: 0.0102 };
+            var COUNT = counts[grain];
+            var SPECK = sizes[grain] * minDim;
+            var grains = (function () {
+              var state = 0x50f7b10b;
+              function next() {
+                state = (Math.imul(1664525, state) + 1013904223) >>> 0;
+                return state / 4294967296;
+              }
+              var rows = [];
+              for (var i = 0; i < COUNT; i += 1) {
+                // Radial distribution with a fuzzy tail past R: density thins
+                // toward the boundary and alpha fades it out, so the edge is
+                // granular vapor, never a line.
+                var rr = Math.pow(next(), 0.55) * R * 1.16;
+                var th = next() * Math.PI * 2;
+                var edge = Math.max(0, Math.min(1, (1.16 - rr / R) / 0.42));
+                rows.push({
+                  x: Math.cos(th) * rr,
+                  y: Math.sin(th) * rr * 0.94,
+                  size: SPECK * (0.5 + 0.9 * next()),
+                  dim: (0.3 + 0.7 * next()) * edge,
+                  tone: next(),
+                  driftAmp: (0.008 + 0.014 * next()) * minDim,
+                  driftCycles: next() < 0.5 ? 1 : 2,
+                  phaseX: next() * Math.PI * 2,
+                  phaseY: next() * Math.PI * 2,
+                });
+              }
+              return rows;
+            })();
+
+            function clamp01(v) {
+              return v < 0 ? 0 : v > 1 ? 1 : v;
+            }
+
+            // Deformation params. Attack lifts both toward CUT value; the
+            // recovery springs them home. The painter owns all amplitudes.
+            var P = { bulge: 0, lean: 0 };
+            var bCut = 1 - Math.pow(1 - CUT_FRAC, 2); // power2.out at the cut
+            var vCut = (2 * (1 - CUT_FRAC)) / ATTACK_NAT; // slope there, per s
+            var attackEase = function (p) {
+              return (1 - Math.pow(1 - p * CUT_FRAC, 2)) / bCut;
+            };
+            // Closed-form underdamped spring x(s), x(0) = 1, x'(0) = vCut/bCut
+            // (velocity preserved across the cut), corrected by a linear ramp
+            // so x(RECOVER) is exactly zero. Higher frequency for the local
+            // bulge, lower for the whole-mass lean: the surface snaps back
+            // faster than the body.
+            function springEase(lambda, omega) {
+              var v0 = vCut / bCut;
+              var c2 = (v0 + lambda) / omega;
+              function x(s) {
+                return Math.exp(-lambda * s) * (Math.cos(omega * s) + c2 * Math.sin(omega * s));
+              }
+              var xEnd = x(RECOVER);
+              return function (p) {
+                var s = p * RECOVER;
+                return 1 - (x(s) - (s / RECOVER) * xEnd);
+              };
+            }
+            var bulgeSpring = springEase(4.2, Math.PI * 2 * 2.2);
+            var leanSpring = springEase(3.6, Math.PI * 2 * 1.5);
+
+            // Pure repaint: clear, then rebuild the whole frame from
+            // (grain table, P, t). Drift phase u completes integer sine
+            // cycles over [0, IN_END] and is exactly zero from IN_END on,
+            // so the HOLD frame is dead still.
+            var sigma = R * 0.85;
+            var bulgeAmp = R * 0.62;
+            var leanAmp = minDim * 0.045;
+            function paint(t) {
+              ctx.clearRect(0, 0, W, H);
+              var u = clamp01(t / IN_END);
+              var lx = leanAmp * P.lean * dirX;
+              var ly = leanAmp * P.lean * dirY;
+              var cx = centerX + lx;
+              var cy = centerY + ly;
+
+              // Layered radial gradients: wide aura, mid glow, dense core,
+              // and a bulge lobe that swells toward the touch point.
+              var aura = ctx.createRadialGradient(cx, cy, 0, cx, cy, R * 1.9);
+              aura.addColorStop(0, rgba(accentRgb, 0.16));
+              aura.addColorStop(0.55, rgba(accentRgb, 0.06));
+              aura.addColorStop(1, rgba(accentRgb, 0));
+              ctx.fillStyle = aura;
+              ctx.fillRect(0, 0, W, H);
+
+              var mid = ctx.createRadialGradient(cx, cy, 0, cx, cy, R * 1.12);
+              mid.addColorStop(0, rgba(bodyRgb, 0.34));
+              mid.addColorStop(0.62, rgba(bodyRgb, 0.16));
+              mid.addColorStop(1, rgba(bodyRgb, 0));
+              ctx.fillStyle = mid;
+              ctx.fillRect(0, 0, W, H);
+
+              var core = ctx.createRadialGradient(
+                cx - R * 0.12,
+                cy - R * 0.14,
+                0,
+                cx,
+                cy,
+                R * 0.62,
+              );
+              core.addColorStop(0, rgba(softRgb, 0.4));
+              core.addColorStop(1, rgba(softRgb, 0));
+              ctx.fillStyle = core;
+              ctx.fillRect(0, 0, W, H);
+
+              if (P.bulge > 0.001) {
+                var lobeX = cx + dirX * R * 0.72;
+                var lobeY = cy + dirY * R * 0.72;
+                var lobeR = R * (0.22 + 0.5 * P.bulge);
+                var lobe = ctx.createRadialGradient(lobeX, lobeY, 0, lobeX, lobeY, lobeR);
+                lobe.addColorStop(0, rgba(softRgb, 0.34 * P.bulge));
+                lobe.addColorStop(1, rgba(softRgb, 0));
+                ctx.fillStyle = lobe;
+                ctx.fillRect(0, 0, W, H);
+              }
+
+              // Grain field. Each speck drifts on its own integer-cycle sine
+              // (zero at u = 0 and u = 1) and is attracted toward the touch
+              // point with an exponential falloff: the material near the dot
+              // reaches for it, the far side barely stirs.
+              var TAU = Math.PI * 2;
+              for (var i = 0; i < grains.length; i += 1) {
+                var g = grains[i];
+                var driftX =
+                  g.driftAmp * (Math.sin(TAU * g.driftCycles * u + g.phaseX) - Math.sin(g.phaseX));
+                var driftY =
+                  g.driftAmp * (Math.sin(TAU * g.driftCycles * u + g.phaseY) - Math.sin(g.phaseY));
+                var gx = cx + g.x + driftX;
+                var gy = cy + g.y + driftY;
+                if (P.bulge > 0.001) {
+                  var tx = touchX - gx;
+                  var ty = touchY - gy;
+                  var td = Math.hypot(tx, ty);
+                  if (td > 0.5) {
+                    var w = Math.exp(-td / sigma);
+                    var pull = (bulgeAmp * P.bulge * w) / td;
+                    gx += tx * pull;
+                    gy += ty * pull;
+                  }
+                }
+                var c = g.tone < 0.62 ? softRgb : fgRgb;
+                ctx.globalAlpha = g.dim * 0.85;
+                ctx.fillStyle = rgba(c, 1);
+                ctx.beginPath();
+                ctx.arc(gx, gy, g.size, 0, TAU);
+                ctx.fill();
+              }
+              ctx.globalAlpha = 1;
+            }
+
+            // Touch dot choreography, transforms only, px space of the host
+            // box (canvas coordinates divided by dpr).
+            var stageW = cssW;
+            var stageH = cssH;
+            var dotX = touchX / dpr;
+            var dotY = touchY / dpr;
+            // Enter and leave along the attraction axis, from off stage.
+            var away = Math.hypot(stageW, stageH) * 0.7;
+            var offX = dotX + dirX * away;
+            var offY = dotY + dirY * away;
+
+            gsap.set(stage, { opacity: 1, y: "0cqh" });
+            gsap.set(touchDot, { x: offX, y: offY, opacity: 0 });
+
+            var tl = gsap.timeline({
+              paused: true,
+              onUpdate: function () {
+                paint(tl.time());
+              },
+            });
+
+            // Anchor tween: spans the full authored duration so seeks into
+            // the hold keep tl.time() honest and onUpdate (the canvas
+            // repaint) fires for every eventful seek anywhere in [0, D].
+            tl.to({ p: 0 }, { p: 1, duration: duration, ease: "none" }, 0);
+
+            // The dot decel-arrives (power3.out: it arrives, it never
+            // passes through), dwells for the press, then accelerates away.
+            var arriveStart = Math.max(0, touchAt - 0.85);
+            tl.fromTo(
+              touchDot,
+              { x: offX, y: offY, opacity: 0 },
+              {
+                x: dotX,
+                y: dotY,
+                opacity: 1,
+                duration: touchAt - arriveStart,
+                ease: "power3.out",
+              },
+              arriveStart,
+            );
+            tl.fromTo(
+              touchDot,
+              { x: dotX, y: dotY, opacity: 1 },
+              {
+                x: offX,
+                y: offY,
+                opacity: 0,
+                duration: 0.55,
+                ease: "power2.in",
+                immediateRender: false,
+              },
+              cutAt,
+            );
+
+            // Attack: the truncated lean-in, cut mid-flight at the dot lift.
+            tl.fromTo(
+              P,
+              { bulge: 0, lean: 0 },
+              { bulge: bCut, lean: bCut, duration: ATTACK, ease: attackEase },
+              touchAt,
+            );
+            // Recovery: velocity-matched closed-form springs back to rest.
+            tl.fromTo(
+              P,
+              { bulge: bCut },
+              {
+                bulge: 0,
+                duration: RECOVER,
+                ease: bulgeSpring,
+                immediateRender: false,
+              },
+              cutAt,
+            );
+            tl.fromTo(
+              P,
+              { lean: bCut },
+              {
+                lean: 0,
+                duration: RECOVER,
+                ease: leanSpring,
+                immediateRender: false,
+              },
+              cutAt,
+            );
+
+            // HOLD: truly still. Drift is zero past IN_END by construction
+            // and both params are home, so every hold frame is identical.
+
+            // OUT: optional departure; exit none holds until the frame cuts.
+            if (exit === "up") {
+              tl.to(stage, { y: "-4cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "fade") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            }
+
+            tl.seek(0);
+            paint(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["soft-blob-touch"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/soft-blur-in/demo.html b/docs/public/catalog/components/soft-blur-in/demo.html
new file mode 100644
index 0000000000..ad7104a939
--- /dev/null
+++ b/docs/public/catalog/components/soft-blur-in/demo.html
@@ -0,0 +1,102 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Soft Blur In - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      body {
+        background: #101418;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      #demo {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background:
+          radial-gradient(circle at 25% 20%, #3b5b7a 0, transparent 30%),
+          linear-gradient(135deg, #101418, #20282f);
+        color: white;
+      }
+      .wrap {
+        position: absolute;
+        left: 180px;
+        top: 310px;
+        width: 1200px;
+      }
+      .eyebrow {
+        color: #80d9ff;
+        font-size: 40px;
+        font-weight: 600;
+        letter-spacing: 0.1em;
+        text-transform: uppercase;
+      }
+      .title {
+        margin-top: 28px;
+        font-size: 132px;
+        line-height: 0.92;
+        font-weight: 850;
+        letter-spacing: -0.02em;
+      }
+      .copy {
+        margin-top: 42px;
+        width: 780px;
+        color: #d7e3ea;
+        font-size: 42px;
+        line-height: 1.18;
+      }
+      .hf-soft-blur-in {
+        opacity: 0;
+        transform: translate3d(0, 28px, 0);
+        filter: blur(18px);
+        will-change: transform, opacity, filter;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="soft-blur-in-demo"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="wrap">
+        <div class="eyebrow hf-soft-blur-in">Motion Primitive</div>
+        <div class="title hf-soft-blur-in">Soft blur reveals that feel cinematic.</div>
+        <div class="copy hf-soft-blur-in">
+          Use it for titles, labels, stats, and scene intros without adding a framework.
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        tl.to(
+          ".hf-soft-blur-in",
+          {
+            opacity: 1,
+            y: 0,
+            filter: "blur(0px)",
+            duration: 0.8,
+            ease: "power3.out",
+            stagger: 0.12,
+          },
+          0.35,
+        );
+        window.__timelines = window.__timelines || {};
+        window.__timelines["soft-blur-in-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/soft-blur-in/soft-blur-in.html b/docs/public/catalog/components/soft-blur-in/soft-blur-in.html
new file mode 100644
index 0000000000..f7ca53e542
--- /dev/null
+++ b/docs/public/catalog/components/soft-blur-in/soft-blur-in.html
@@ -0,0 +1,83 @@
+<!--
+  Soft Blur In - web-native motion primitive.
+
+  Usage:
+  1. Add class="hf-soft-blur-in" to the element you want to reveal.
+  2. Paste this style block and script once.
+  3. Add the timeline snippet to your paused GSAP timeline.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result as a custom property
+  on the document root, which every element carrying the class inherits. These
+  set where the reveal STARTS: the timeline snippet below still drives offset
+  and blur to zero, so each knob decides how far and how hazy the element is
+  before it settles, not how long it takes.
+
+    - distance (close | standard | far, default standard): how far the element
+      is offset before it slides home, 14px, 28px or 52px.
+    - direction (up | down, default up): up starts the element below its
+      resting place so it rises in, down starts it above so it drops in.
+    - blur (soft | standard | heavy, default standard): the starting blur
+      radius, 8px, 18px or 34px, from a light haze to a full smear.
+
+  On every default the result is identical to the original: the element starts
+  28px low behind an 18px blur.
+-->
+
+<style
+  data-composition-variables='[
+    { "id": "distance", "type": "enum", "role": "motion", "label": "Distance", "description": "How far the element is offset before it slides home: 14px, 28px or 52px.", "default": "standard", "options": [{ "value": "close", "label": "Close" }, { "value": "standard", "label": "Standard" }, { "value": "far", "label": "Far" }] },
+    { "id": "direction", "type": "enum", "role": "motion", "label": "Direction", "description": "up starts the element below its resting place so it rises in, down starts it above so it drops in.", "default": "up", "options": [{ "value": "up", "label": "Up" }, { "value": "down", "label": "Down" }] },
+    { "id": "blur", "type": "enum", "role": "style", "label": "Blur", "description": "Starting blur radius, from a light haze to a full smear.", "default": "standard", "options": [{ "value": "soft", "label": "Soft" }, { "value": "standard", "label": "Standard" }, { "value": "heavy", "label": "Heavy" }] }
+  ]'
+>
+  .hf-soft-blur-in {
+    opacity: 0;
+    transform: translate3d(0, var(--hf-soft-blur-y, 28px), 0);
+    filter: blur(var(--hf-soft-blur-radius, 18px));
+    will-change: transform, opacity, filter;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var distances = { close: 14, standard: 28, far: 52 };
+    var directions = { up: 1, down: -1 };
+    var blurs = { soft: 8, standard: 18, heavy: 34 };
+
+    var distance = distances[pick(distances, vars.distance, "standard")];
+    var direction = directions[pick(directions, vars.direction, "up")];
+    var blur = blurs[pick(blurs, vars.blur, "standard")];
+
+    // Set on the root so every element carrying the class inherits the values,
+    // whether it exists yet or not.
+    var root = document.documentElement;
+    root.style.setProperty("--hf-soft-blur-y", distance * direction + "px");
+    root.style.setProperty("--hf-soft-blur-radius", blur + "px");
+  })();
+</script>
+
+<!--
+  Timeline integration:
+
+  tl.to(".hf-soft-blur-in", {
+    opacity: 1,
+    y: 0,
+    filter: "blur(0px)",
+    duration: 0.8,
+    ease: "power3.out",
+    stagger: 0.08,
+  }, startTime);
+-->
diff --git a/docs/public/catalog/components/spatial-push/__hf-variables-preview.html b/docs/public/catalog/components/spatial-push/__hf-variables-preview.html
new file mode 100644
index 0000000000..0c0c59d12e
--- /dev/null
+++ b/docs/public/catalog/components/spatial-push/__hf-variables-preview.html
@@ -0,0 +1,106 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Spatial Push variables preview</title>
+    <style>
+      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #f7f7f8; }
+      #hf-vars-root { position: relative; width: 1920px; height: 1080px; }
+      #hf-vars-mount { position: absolute; inset: 0; display: grid; place-items: center; }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  </head>
+  <body>
+    <div id="hf-vars-root" data-composition-id="spatial-push-variables-preview" data-start="0" data-width="1920" data-height="1080" data-duration="5" data-fps="30">
+      <div id="hf-vars-mount" class="clip" data-composition-id="spatial-push" data-composition-src="./spatial-push.html" data-start="0" data-duration="5" data-track-index="0" data-width="1920" data-height="1080"></div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["spatial-push-variables-preview"] = gsap.timeline({ paused: true });
+    </script>
+    <script>
+      (function () {
+        var mount = document.getElementById("hf-vars-mount");
+        // The mount is filled asynchronously, and the demo script selects
+        // what it fills it with, so it cannot run before then.
+        var observer = new MutationObserver(build);
+        observer.observe(mount, { childList: true, subtree: true });
+        build();
+        function build() {
+          if (!mount.firstElementChild) return;
+          observer.disconnect();
+
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-spatial-push .to",
+          { "--hf-clip-right": "100%", "--hf-to-x": "60px", "--hf-to-scale": 1.04 },
+          {
+            "--hf-clip-right": "0%",
+            "--hf-to-x": "0px",
+            "--hf-to-scale": 1,
+            duration: 0.9,
+            ease: "power3.inOut",
+          },
+          startTime,
+        );
+        tl.to(
+          ".hf-remocn-spatial-push .from",
+          {
+            "--hf-from-x": "-70px",
+            "--hf-from-scale": 0.96,
+            "--hf-from-blur": "5px",
+            duration: 0.9,
+            ease: "power3.inOut",
+          },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-spatial-push .fx",
+          { "--hf-fx-x": "-110%" },
+          { "--hf-fx-x": "110%", duration: 0.58, ease: "power2.inOut" },
+          startTime + 0.18,
+        );
+        tl.fromTo(
+          ".hf-remocn-spatial-push .rgb",
+          { "--hf-rgb-opacity": 0, "--hf-rgb-x": "-16px" },
+          {
+            "--hf-rgb-opacity": 1,
+            "--hf-rgb-x": "16px",
+            repeat: 3,
+            yoyo: true,
+            duration: 0.07,
+            ease: "steps(1)",
+          },
+          startTime + 0.32,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["spatial-push-demo"] = tl;
+          var child = window.__timelines["spatial-push-demo"];
+          delete window.__timelines["spatial-push-demo"];
+          if (!child || typeof child.paused !== "function") return;
+          child.paused(false);
+          window.__timelines["spatial-push-variables-preview"].add(child, 0);
+        }
+      })();
+    </script>
+<script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "spatial-push.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/spatial-push/demo.html b/docs/public/catalog/components/spatial-push/demo.html
new file mode 100644
index 0000000000..bfcd6d01fa
--- /dev/null
+++ b/docs/public/catalog/components/spatial-push/demo.html
@@ -0,0 +1,181 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Spatial Push - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+        /* ponytail: scale wrapper, not the GSAP target */
+        transform: scale(1.64);
+      }
+      .hf-remocn-spatial-push {
+        --hf-accent: #2563eb;
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-spatial-push {
+        position: relative;
+        width: 760px;
+        height: 428px;
+        overflow: hidden;
+        border-radius: 30px;
+        background: #111827;
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+      }
+      .hf-remocn-spatial-push .scene {
+        position: absolute;
+        inset: 0;
+        display: grid;
+        place-items: center;
+        font-weight: 900;
+        font-size: 58px;
+        letter-spacing: -0.05em;
+        color: #fff;
+      }
+      .hf-remocn-spatial-push .from {
+        background: linear-gradient(135deg, #111827, #374151);
+        transform: translate(var(--hf-from-x, 0px), var(--hf-from-y, 0px))
+          scale(var(--hf-from-scale, 1));
+        filter: blur(var(--hf-from-blur, 0px));
+      }
+      .hf-remocn-spatial-push .to {
+        background: linear-gradient(135deg, #2563eb, #7c3aed);
+        transform: translate(var(--hf-to-x, 0px), var(--hf-to-y, 0px)) scale(var(--hf-to-scale, 1));
+        clip-path: inset(
+          var(--hf-clip-top, 0%) var(--hf-clip-right, 100%) var(--hf-clip-bottom, 0%)
+            var(--hf-clip-left, 0%)
+        );
+      }
+      .hf-remocn-spatial-push .fx {
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
+        mix-blend-mode: screen;
+        transform: translateX(var(--hf-fx-x, -110%));
+      }
+      .hf-remocn-spatial-push .rgb {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        opacity: var(--hf-rgb-opacity, 0);
+        background: linear-gradient(
+          90deg,
+          rgba(239, 68, 68, 0.35),
+          transparent,
+          rgba(34, 211, 238, 0.35)
+        );
+        transform: translateX(var(--hf-rgb-x, 0px));
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="spatial-push-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-spatial-push">
+          <div class="scene from">Before</div>
+          <div class="scene to">Spatial Push</div>
+          <div class="fx"></div>
+          <div class="rgb"></div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-spatial-push .to",
+          { "--hf-clip-right": "100%", "--hf-to-x": "60px", "--hf-to-scale": 1.04 },
+          {
+            "--hf-clip-right": "0%",
+            "--hf-to-x": "0px",
+            "--hf-to-scale": 1,
+            duration: 0.9,
+            ease: "power3.inOut",
+          },
+          startTime,
+        );
+        tl.to(
+          ".hf-remocn-spatial-push .from",
+          {
+            "--hf-from-x": "-70px",
+            "--hf-from-scale": 0.96,
+            "--hf-from-blur": "5px",
+            duration: 0.9,
+            ease: "power3.inOut",
+          },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-spatial-push .fx",
+          { "--hf-fx-x": "-110%" },
+          { "--hf-fx-x": "110%", duration: 0.58, ease: "power2.inOut" },
+          startTime + 0.18,
+        );
+        tl.fromTo(
+          ".hf-remocn-spatial-push .rgb",
+          { "--hf-rgb-opacity": 0, "--hf-rgb-x": "-16px" },
+          {
+            "--hf-rgb-opacity": 1,
+            "--hf-rgb-x": "16px",
+            repeat: 3,
+            yoyo: true,
+            duration: 0.07,
+            ease: "steps(1)",
+          },
+          startTime + 0.32,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["spatial-push-demo"] = tl;
+      </script>
+    </div>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "spatial-push.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/spatial-push/spatial-push.html b/docs/public/catalog/components/spatial-push/spatial-push.html
new file mode 100644
index 0000000000..3f6598b10d
--- /dev/null
+++ b/docs/public/catalog/components/spatial-push/spatial-push.html
@@ -0,0 +1,178 @@
+<!--
+  Spatial Push - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup, CSS and script into a composition. Drive the timeline
+  integration from a paused GSAP timeline so renders remain deterministic.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result as a custom property
+  the CSS below consumes. The timeline recipe stays untouched by them: it keeps
+  driving one wipe, one pair of offsets, one scale, one blur and one sheen
+  sweep, and these decide which way that wipe runs, how hard the old scene is
+  pushed back, how hot the sheen burns and what colour the new scene is.
+
+    - direction (right | left, default right): which way the push runs. right
+      wipes the new scene in from the left edge across to the right and shoves
+      the old one out to the left; left mirrors the whole move, wipe, offsets,
+      sheen sweep and chromatic split included.
+    - depth (subtle | standard | deep, default standard): scales how hard the
+      old scene is pressed backward, its sideways shove, its shrink and its
+      blur together. subtle keeps it nearly flat, deep nearly doubles the
+      recession, in the same time.
+    - sheen (none | soft | standard | bright, default standard): the strength
+      of the white light sweep that crosses the seam. none removes it entirely,
+      bright takes it to full white.
+    - accent (blue | violet | green, default blue): the incoming scene gradient.
+      blue defers to the component --hf-accent token, so a host that retints
+      that token retints the scene with it. The other two are self-contained
+      pairs. Note the incoming scene is fully clipped at rest, so this only
+      shows once the timeline wipe reveals it.
+
+  On every default the result is identical to the original: a blue to violet
+  scene wiping in from the left while the old one recedes 70px behind a 5px
+  blur.
+-->
+
+<div
+  class="hf-remocn-spatial-push"
+  data-composition-variables='[
+    { "id": "direction", "type": "enum", "role": "motion", "label": "Direction", "description": "Which way the push runs. right wipes the new scene in from the left edge, left mirrors the whole move.", "default": "right", "options": [{ "value": "right", "label": "Rightward" }, { "value": "left", "label": "Leftward" }] },
+    { "id": "depth", "type": "enum", "role": "motion", "label": "Depth", "description": "Scales how hard the old scene is pressed backward: its shove, its shrink and its blur together.", "default": "standard", "options": [{ "value": "subtle", "label": "Subtle" }, { "value": "standard", "label": "Standard" }, { "value": "deep", "label": "Deep" }] },
+    { "id": "sheen", "type": "enum", "role": "style", "label": "Sheen", "description": "Strength of the white light sweep that crosses the seam, from removed entirely to full white.", "default": "standard", "options": [{ "value": "none", "label": "None" }, { "value": "soft", "label": "Soft" }, { "value": "standard", "label": "Standard" }, { "value": "bright", "label": "Bright" }] },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Incoming scene gradient. blue defers to the --hf-accent token so a retinted host retints the scene.", "default": "blue", "options": [{ "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }, { "value": "green", "label": "Green" }] }
+  ]'
+>
+  <div class="scene from">Before</div>
+  <div class="scene to">Spatial Push</div>
+  <div class="fx"></div>
+  <div class="rgb"></div>
+</div>
+
+<style>
+  .hf-remocn-spatial-push {
+    --hf-accent: #2563eb;
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-spatial-push {
+    position: relative;
+    width: 760px;
+    height: 428px;
+    overflow: hidden;
+    border-radius: 30px;
+    background: #111827;
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+  }
+  .hf-remocn-spatial-push .scene {
+    position: absolute;
+    inset: 0;
+    display: grid;
+    place-items: center;
+    font-weight: 900;
+    font-size: 58px;
+    letter-spacing: -0.05em;
+    color: #fff;
+  }
+  .hf-remocn-spatial-push .from {
+    background: linear-gradient(135deg, #111827, #374151);
+    transform: translate(
+        calc(var(--hf-from-x, 0px) * var(--hf-push-axis, 1) * var(--hf-push-depth, 1)),
+        var(--hf-from-y, 0px)
+      )
+      scale(calc(1 + (var(--hf-from-scale, 1) - 1) * var(--hf-push-depth, 1)));
+    filter: blur(calc(var(--hf-from-blur, 0px) * var(--hf-push-depth, 1)));
+  }
+  .hf-remocn-spatial-push .to {
+    background: linear-gradient(
+      135deg,
+      var(--hf-push-accent-a, var(--hf-accent, #2563eb)),
+      var(--hf-push-accent-b, #7c3aed)
+    );
+    transform: translate(calc(var(--hf-to-x, 0px) * var(--hf-push-axis, 1)), var(--hf-to-y, 0px))
+      scale(var(--hf-to-scale, 1));
+    clip-path: inset(
+      var(--hf-clip-top, 0%)
+        calc(var(--hf-clip-right, 100%) * var(--hf-push-clip-right, 1))
+        var(--hf-clip-bottom, 0%)
+        calc(var(--hf-clip-left, 0%) + var(--hf-clip-right, 100%) * var(--hf-push-clip-left, 0))
+    );
+  }
+  .hf-remocn-spatial-push .fx {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+      90deg,
+      transparent,
+      rgba(255, 255, 255, calc(0.75 * var(--hf-push-sheen, 1))),
+      transparent
+    );
+    mix-blend-mode: screen;
+    transform: translateX(calc(var(--hf-fx-x, -110%) * var(--hf-push-axis, 1)));
+  }
+  .hf-remocn-spatial-push .rgb {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    opacity: var(--hf-rgb-opacity, 0);
+    background: linear-gradient(
+      90deg,
+      rgba(239, 68, 68, 0.35),
+      transparent,
+      rgba(34, 211, 238, 0.35)
+    );
+    transform: translateX(calc(var(--hf-rgb-x, 0px) * var(--hf-push-axis, 1)));
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var directions = { right: 1, left: -1 };
+    var depths = { subtle: 0.4, standard: 1, deep: 1.8 };
+    var sheens = { none: 0, soft: 0.45, standard: 1, bright: 1.33 };
+    var accents = {
+      blue: ["var(--hf-accent, #2563eb)", "#7c3aed"],
+      violet: ["#7c3aed", "#db2777"],
+      green: ["#10b981", "#0ea5e9"],
+    };
+
+    var axis = directions[pick(directions, vars.direction, "right")];
+    var depth = depths[pick(depths, vars.depth, "standard")];
+    var sheen = sheens[pick(sheens, vars.sheen, "standard")];
+    var accent = accents[pick(accents, vars.accent, "blue")];
+
+    var roots = document.querySelectorAll(".hf-remocn-spatial-push");
+    for (var i = 0; i < roots.length; i += 1) {
+      var root = roots[i];
+      root.style.setProperty("--hf-push-axis", String(axis));
+      root.style.setProperty("--hf-push-depth", String(depth));
+      root.style.setProperty("--hf-push-sheen", String(sheen));
+      // The wipe the timeline drives is fed into the right inset going one way
+      // and into the left inset going the other, so the seam mirrors too.
+      root.style.setProperty("--hf-push-clip-right", axis === 1 ? "1" : "0");
+      root.style.setProperty("--hf-push-clip-left", axis === 1 ? "0" : "1");
+      // A new pair of properties, so the shared --hf-accent token is left alone.
+      root.style.setProperty("--hf-push-accent-a", accent[0]);
+      root.style.setProperty("--hf-push-accent-b", accent[1]);
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-spatial-push .to', { '--hf-clip-right': '100%', '--hf-to-x': '60px', '--hf-to-scale': 1.04 }, { '--hf-clip-right': '0%', '--hf-to-x': '0px', '--hf-to-scale': 1, duration: 0.9, ease: 'power3.inOut' }, startTime); tl.to('.hf-remocn-spatial-push .from', { '--hf-from-x': '-70px', '--hf-from-scale': 0.96, '--hf-from-blur': '5px', duration: 0.9, ease: 'power3.inOut' }, startTime); tl.fromTo('.hf-remocn-spatial-push .fx', { '--hf-fx-x': '-110%' }, { '--hf-fx-x': '110%', duration: 0.58, ease: 'power2.inOut' }, startTime + 0.18); tl.fromTo('.hf-remocn-spatial-push .rgb', { '--hf-rgb-opacity': 0, '--hf-rgb-x': '-16px' }, { '--hf-rgb-opacity': 1, '--hf-rgb-x': '16px', repeat: 3, yoyo: true, duration: 0.07, ease: 'steps(1)' }, startTime + 0.32);
+-->
diff --git a/docs/public/catalog/components/split-tilt-cards/README.md b/docs/public/catalog/components/split-tilt-cards/README.md
new file mode 100644
index 0000000000..4b9acf7279
--- /dev/null
+++ b/docs/public/catalog/components/split-tilt-cards/README.md
@@ -0,0 +1,106 @@
+# split-tilt-cards
+
+Two equal-weight cards arrive from opposite wings, each carrying a mirrored
+3D rotateY book-open tilt (+18deg left, -18deg right) under one shared stage
+perspective, with soft box-shadows falling outward from the tilt. A pill
+badge spring-pops at each card's inner edge (left first, right ~0.3s behind:
+the one sanctioned overshoot, kept small), then the pair holds with a
+barely-there phase-opposed idle float and settles dead still. The eye reads
+the two cards as a balanced comparison: an A/B, a before/after, two
+complementary capabilities weighed simultaneously.
+
+This realizes the comparison-split blueprint's signature move as its own
+unit. Not for more than 2 items (use `grid-card-assemble`) or sequential
+steps. For a divider that wipes one state over another, use
+`before-after-wipe`.
+
+## Files
+
+- `split-tilt-cards.html`: the mountable sub-composition (install target:
+  `compositions/components/split-tilt-cards.html`).
+- `registry-item.json`: registry metadata and the variables block.
+- `demo.html`: a 1920x1080 standalone host that mounts the primitive with
+  non-default variables.
+
+## Variables
+
+| id        | type   | default  | notes                                                                     |
+| --------- | ------ | -------- | ------------------------------------------------------------------------- |
+| `label_a` | string | `Before` | mono header on the left card; empty string hides it                       |
+| `label_b` | string | `After`  | mono header on the right card; empty string hides it                      |
+| `badge_a` | string | `v1`     | inner-edge pill on the left card; empty string disables that pop          |
+| `badge_b` | string | `v2`     | inner-edge pill on the right card; empty string disables that pop         |
+| `accent`  | enum   | `green`  | `green` maps to `--brand`, `blue` to `--accent`, `violet` to `--accent-2` |
+| `exit`    | enum   | `none`   | `none` holds the final spread; `fade` and `up` release the stage          |
+
+Envelope: IN = 2.15s (left card lands 0 to 1.1s, right 0.2 to 1.3s, badge A
+pops at 1.45s, badge B at 1.75s), OUT = 0.5s only when `exit` is `fade` or
+`up`, HOLD is the sole elastic phase. During HOLD the two cards run whole
+2.0s phase-opposed float cycles (left dips as right rises, every cycle starts
+and ends at rest) and always finish with a 0.3s dead-still window. Sync
+points: `badge-pop-a` at 1.85s and `badge-pop-b` at 2.15s (`hf:sfx` id
+`badge-pop-soft` fires at each landing).
+
+## The slot mechanism
+
+The primitive ships two named slot panels inside its `<template>`:
+
+```html
+<div class="stc-slot" data-slot="card-a">...</div>
+<div class="stc-slot" data-slot="card-b">...</div>
+```
+
+Each slot's default children are a token-styled wireframe (muted on the left
+card, accent-tinted on the right), so an untouched mount still reads as a
+tasteful comparison. To show your own content, install the component and
+**replace the children of each `[data-slot]` element in your installed
+copy** (the runtime clones only the primitive's own template on mount, so
+slot content lives in the component file, not on the host clip).
+
+Rules:
+
+- Direct `img`/`video` children are automatically sized to cover the slot
+  (`object-fit: cover`). Arbitrary HTML works too; size it in `cqw`/`cqh`.
+- Keep the label headers and badge pills alone; they render outside the
+  slots and ride the same tilt and float as the card.
+- The tilt is carried by the card, so slot content tilts with it; keep
+  content readable at 18 degrees (avoid dense small text).
+
+## Worked example
+
+Install, then fill the slots with two screenshots:
+
+```bash
+npx hyperframes add split-tilt-cards
+```
+
+In `compositions/components/split-tilt-cards.html`, replace each slot's
+default block:
+
+```html
+<div class="stc-slot" data-slot="card-a">
+  <img src="../../assets/plan-free.png" alt="" />
+</div>
+...
+<div class="stc-slot" data-slot="card-b">
+  <img src="../../assets/plan-pro.png" alt="" />
+</div>
+```
+
+Mount it from a host composition like any sub-composition:
+
+```html
+<div
+  class="clip"
+  data-composition-id="split-tilt-cards"
+  data-composition-src="./components/split-tilt-cards.html"
+  data-variable-values='{"label_a":"Free","label_b":"Pro","badge_a":"$0","badge_b":"$29","accent":"violet"}'
+  data-start="2"
+  data-duration="5"
+  data-track-index="0"
+></div>
+```
+
+The cards land 1.3s after the clip mounts, the badges punctuate by 2.15s,
+and the spread holds with a barely-there float for the rest of the clip
+window (`exit` defaults to `none`; frame roots own scene transitions).
diff --git a/docs/public/catalog/components/split-tilt-cards/demo.html b/docs/public/catalog/components/split-tilt-cards/demo.html
new file mode 100644
index 0000000000..36ad2c2963
--- /dev/null
+++ b/docs/public/catalog/components/split-tilt-cards/demo.html
@@ -0,0 +1,107 @@
+<!doctype html>
+<!--
+  split-tilt-cards demo. This standalone composition mounts the primitive
+  through data-composition-src. Non-default labels, badges, and accent prove
+  the variable path while the primitive remains elastic to its host.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>split-tilt-cards Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #0b0c0e);
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --surface: #14171c;
+        --border: #343a46;
+        --brand: #71f5a7;
+        --accent: #61a8ff;
+        --accent-2: #c5a3ff;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(
+          ellipse at 50% 44%,
+          var(--bg, #171a20) 0%,
+          var(--bg, #0b0c0e) 72%
+        );
+      }
+
+      .mount-card {
+        width: 80%;
+        height: 66%;
+        left: 10%;
+        top: 17%;
+        container-type: size;
+        overflow: hidden;
+        border: 1px solid color-mix(in srgb, var(--border, #94a3b8) 20%, transparent);
+        border-radius: 30px;
+        background: color-mix(in srgb, var(--surface, #101318) 72%, transparent);
+        box-shadow: 0 40px 100px color-mix(in srgb, var(--bg, #000000) 48%, transparent);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="split-tilt-cards-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4.5"
+      data-fps="30"
+    >
+      <div
+        id="split-tilt-cards-mount"
+        class="mount-card clip"
+        data-composition-id="split-tilt-cards"
+        data-composition-src="./split-tilt-cards.html"
+        data-variable-values='{"label_a":"Manual","label_b":"Autopilot","badge_a":"4.2s","badge_b":"0.3s","accent":"violet"}'
+        data-start="0"
+        data-duration="4.5"
+        data-track-index="0"
+        data-width="1536"
+        data-height="713"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["split-tilt-cards-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "split-tilt-cards.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/split-tilt-cards/split-tilt-cards.html b/docs/public/catalog/components/split-tilt-cards/split-tilt-cards.html
new file mode 100644
index 0000000000..3fb959fe53
--- /dev/null
+++ b/docs/public/catalog/components/split-tilt-cards/split-tilt-cards.html
@@ -0,0 +1,571 @@
+<!doctype html>
+<!--
+  split-tilt-cards: HyperFrames video primitive (layout / compare / holdable)
+
+  Concept: two equal-weight cards arrive from opposite wings, each carrying a
+  mirrored 3D rotateY book-open tilt (+18deg left, -18deg right) under one
+  shared stage perspective, with box-shadows falling outward from the tilt.
+  A pill badge spring-pops at each card's inner edge (left then right, the
+  one sanctioned overshoot, kept small), then the pair holds with a
+  barely-there phase-opposed idle float and settles dead still. Card bodies
+  are content slots with token skeleton defaults.
+
+  Realizes the comparison-split blueprint's signature move as its own unit
+  and resolves the blueprint's name collision (Wave J2, J2-10).
+
+  Slots (see README.md for a worked example):
+    - [data-slot="card-a"]: left card body. Replace the children of this
+      element in your installed copy. Default: a muted token wireframe.
+    - [data-slot="card-b"]: right card body. Same mechanism. Default: an
+      accent-tinted version of the wireframe.
+    Direct img/video children of a slot are sized to cover the slot area.
+
+  Variables (declared in data-composition-variables below):
+    - label_a (string, default "Before"): mono header on the left card.
+      Empty hides it.
+    - label_b (string, default "After"): mono header on the right card.
+      Empty hides it.
+    - badge_a (string, default "v1"): inner-edge pill on the left card.
+      Empty disables that badge pop.
+    - badge_b (string, default "v2"): inner-edge pill on the right card.
+      Empty disables that badge pop.
+    - accent (green | blue | violet, default green): right-card tint, right
+      badge, and right ambient glow. green maps to --brand, blue to
+      --accent, violet to --accent-2.
+    - exit (none | fade | up, default none): outgoing transition. none holds
+      the final frame (frame roots own transitions; holds end films).
+
+  Envelope (fixed IN/OUT, elastic HOLD only, never gsap.timeScale()):
+    IN       = 2.15s: left card lands 0 to 1.1s, right card 0.2 to 1.3s,
+               badge A pops at 1.45s, badge B at 1.75s (+0.40s spring)
+    HOLD     = elastic = max(0, D - (IN + OUT)); whole 2.0s idle-float
+               cycles fit inside HOLD minus a 0.30s closing stillness; each
+               cycle starts and ends at rest (explicit tweens, no
+               repeat/yoyo), left and right phase-opposed
+    OUT      = 0.50s when exit is fade or up, 0 when exit is none
+    If D < IN + OUT, IN and OUT scale down together so IN + OUT == D.
+
+  Sync points (fixed offsets inside IN, never in elastic HOLD): badge-pop-a
+  lands at 1.85s, badge-pop-b at 2.15s.
+
+  Sound cue: dispatches a bubbling `hf:sfx` CustomEvent with id
+  "badge-pop-soft" at each badge landing. This primitive never plays audio.
+
+  Mount contract: MOUNTABLE SUB-COMPOSITION. The runtime clones only
+  <template> contents; #root fills the host box (inset:0, container-type:
+  size), has no data-width/data-height, and registers one paused timeline
+  under the literal "split-tilt-cards" key (mount flattening strips
+  data-composition-id from the live root). Variables come from
+  window.__hyperframes.getVariables().
+-->
+<html
+  lang="en"
+  data-composition-id="split-tilt-cards"
+  data-composition-duration="4.5"
+  data-composition-variables='[
+    { "id": "label_a", "type": "string", "role": "content", "label": "Left label", "description": "Mono header on the left card. Blank hides it.", "default": "Before" },
+    { "id": "label_b", "type": "string", "role": "content", "label": "Right label", "description": "Mono header on the right card. Blank hides it.", "default": "After" },
+    { "id": "badge_a", "type": "string", "role": "content", "label": "Left badge", "description": "Pill badge that spring-pops at the left card inner edge. Blank disables it.", "default": "v1" },
+    { "id": "badge_b", "type": "string", "role": "content", "label": "Right badge", "description": "Pill badge that spring-pops at the right card inner edge. Blank disables it.", "default": "v2" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Right-card tint, right badge, and right ambient glow color.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Outgoing transition. None holds the final spread.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Split Tilt Cards</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="split-tilt-cards" data-duration="4.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          /* Root fills the host-owned box. Internal measurements use cqw/cqh
+             and every painted color comes from a contract token. */
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            background: var(--bg, #0b1016);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .stc-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+          }
+
+          /* Two faint ambient side glows: each wing owns a color identity
+             across the 50% symmetry axis. Static by design. */
+          .stc-clip::before,
+          .stc-clip::after {
+            content: "";
+            position: absolute;
+            top: 14cqh;
+            width: 52cqw;
+            height: 72cqh;
+            border-radius: 50%;
+            filter: blur(6cqmin);
+            pointer-events: none;
+          }
+
+          .stc-clip::before {
+            left: 2cqw;
+            background: radial-gradient(
+              ellipse at 50% 50%,
+              color-mix(in srgb, var(--muted, #94a3b8) 11%, transparent) 0%,
+              transparent 70%
+            );
+          }
+
+          .stc-clip::after {
+            right: 2cqw;
+            background: radial-gradient(
+              ellipse at 50% 50%,
+              color-mix(in srgb, var(--stc-accent, #22c55e) 13%, transparent) 0%,
+              transparent 70%
+            );
+          }
+
+          /* One shared perspective so both tilts converge on the same
+             vanishing point; wings and floats preserve 3D so the card
+             rotateY reads through their own gsap transforms. */
+          .stc-stage {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: var(--space-3, 5cqw);
+            align-items: center;
+            justify-items: center;
+            padding: 0 8cqw;
+            perspective: 120cqw;
+          }
+
+          /* No opacity (or other grouping property) may ever land on the
+             wing/float/stage chain: it forces transform-style flat and
+             squashes the card rotateY. Fades ride the cards and the clip. */
+          .stc-wing {
+            position: relative;
+            width: 100%;
+            max-width: 38cqw;
+            height: 58cqh;
+            transform-style: preserve-3d;
+            will-change: transform;
+          }
+
+          .stc-float {
+            position: absolute;
+            inset: 0;
+            transform-style: preserve-3d;
+            will-change: transform;
+          }
+
+          .stc-card {
+            position: absolute;
+            inset: 0;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+            padding: var(--space-3, 3.6cqh) var(--space-3, 2.4cqw);
+            border: 0.16cqw solid var(--border, #334155);
+            border-radius: var(--radius, 2.4cqmin);
+            background: color-mix(in srgb, var(--surface, #172033) 90%, var(--bg, #0b1016));
+            will-change: opacity;
+          }
+
+          /* Static book-open tilts: +18deg left, -18deg right, with the
+             box-shadow falling outward from the tilt (left shadow right,
+             right shadow left). The tilt is carried, never tweened. */
+          .stc-card-a {
+            transform: rotateY(18deg);
+            box-shadow: 2.4cqw 3cqh 7cqh color-mix(in srgb, var(--bg, #0b1016) 52%, transparent);
+          }
+
+          .stc-card-b {
+            transform: rotateY(-18deg);
+            border-color: color-mix(
+              in srgb,
+              var(--stc-accent, #22c55e) 46%,
+              var(--border, #334155)
+            );
+            background: color-mix(in srgb, var(--surface, #172033) 88%, var(--stc-accent, #22c55e));
+            box-shadow: -2.4cqw 3cqh 7cqh color-mix(in srgb, var(--bg, #0b1016) 52%, transparent);
+          }
+
+          .stc-label {
+            flex: 0 0 auto;
+            margin-bottom: var(--space-2, 2.4cqh);
+            color: var(--muted, #94a3b8);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            font-size: min(2.1cqw, 3.4cqh);
+            font-weight: 600;
+            letter-spacing: 0.12em;
+            line-height: 1;
+            text-transform: uppercase;
+            white-space: nowrap;
+          }
+
+          .stc-card-b .stc-label {
+            color: color-mix(in srgb, var(--stc-accent, #22c55e) 72%, var(--fg, #f8fafc));
+          }
+
+          .stc-label:empty {
+            display: none;
+          }
+
+          .stc-slot {
+            position: relative;
+            flex: 1 1 auto;
+            min-height: 0;
+            overflow: hidden;
+            border-radius: calc(var(--radius, 2.4cqmin) * 0.6);
+          }
+
+          /* Caller-supplied media covers its slot edge to edge. */
+          .stc-slot > img,
+          .stc-slot > video {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+          }
+
+          /* Token-styled default slot content: a wireframe that reads muted
+             on the left card and accent-tinted on the right. Callers
+             replacing slot children never see any of this. */
+          .stc-default {
+            position: absolute;
+            inset: 0;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            padding: var(--space-2, 2cqh) var(--space-1, 1cqw);
+          }
+
+          .stc-bar {
+            width: 42%;
+            height: 4cqh;
+            margin-bottom: var(--space-2, 2.6cqh);
+            border-radius: 1.2cqh;
+            background: var(--muted, #94a3b8);
+            opacity: 0.5;
+          }
+
+          .stc-line {
+            height: 2.2cqh;
+            margin-bottom: var(--space-1, 1.8cqh);
+            border-radius: 1.1cqh;
+            background: var(--muted, #94a3b8);
+            opacity: 0.38;
+          }
+
+          .stc-line:nth-of-type(2) {
+            width: 88%;
+          }
+
+          .stc-line:nth-of-type(3) {
+            width: 64%;
+          }
+
+          .stc-line:nth-of-type(4) {
+            width: 42%;
+          }
+
+          .stc-card-b .stc-bar {
+            background: var(--stc-accent, #22c55e);
+            opacity: 0.9;
+          }
+
+          .stc-card-b .stc-line {
+            background: color-mix(in srgb, var(--stc-accent, #22c55e) 62%, var(--fg, #f8fafc));
+            opacity: 0.66;
+          }
+
+          /* Badge positioners own the inner-edge placement (CSS translate);
+             gsap scales only the inner pill, so the two transforms never
+             collide on one element. */
+          .stc-badge-pos {
+            position: absolute;
+            top: 50%;
+            z-index: 3;
+            display: flex;
+          }
+
+          .stc-badge-pos-a {
+            right: 0;
+            transform: translate(32%, -50%);
+          }
+
+          .stc-badge-pos-b {
+            left: 0;
+            transform: translate(-32%, -50%);
+          }
+
+          .stc-badge {
+            padding: var(--space-1, 1.4cqh) var(--space-2, 1.8cqw);
+            border: 0.16cqw solid var(--border, #334155);
+            border-radius: 999cqw;
+            background: color-mix(in srgb, var(--surface, #172033) 82%, var(--bg, #0b1016));
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            font-size: min(2.2cqw, 3.6cqh);
+            font-weight: 600;
+            letter-spacing: 0.04em;
+            line-height: 1;
+            white-space: nowrap;
+            will-change: transform, opacity;
+          }
+
+          .stc-badge-b {
+            border-color: color-mix(
+              in srgb,
+              var(--stc-accent, #22c55e) 62%,
+              var(--border, #334155)
+            );
+            background: color-mix(in srgb, var(--stc-accent, #22c55e) 26%, var(--surface, #172033));
+          }
+        </style>
+
+        <div
+          id="split-tilt-cards-clip"
+          class="stc-clip clip"
+          data-start="0"
+          data-duration="4.5"
+          data-track-index="0"
+        >
+          <div class="stc-stage">
+            <div class="stc-wing stc-wing-a">
+              <div class="stc-float stc-float-a">
+                <section class="stc-card stc-card-a" aria-label="Left card">
+                  <div class="stc-label stc-label-a"></div>
+                  <div class="stc-slot" data-slot="card-a">
+                    <!-- SLOT "card-a": replace the children of this element
+                         with your own content (img, video, or HTML). -->
+                    <div class="stc-default" aria-hidden="true">
+                      <div class="stc-bar"></div>
+                      <div class="stc-line"></div>
+                      <div class="stc-line"></div>
+                      <div class="stc-line"></div>
+                    </div>
+                  </div>
+                </section>
+                <div class="stc-badge-pos stc-badge-pos-a">
+                  <div class="stc-badge stc-badge-a"></div>
+                </div>
+              </div>
+            </div>
+
+            <div class="stc-wing stc-wing-b">
+              <div class="stc-float stc-float-b">
+                <section class="stc-card stc-card-b" aria-label="Right card">
+                  <div class="stc-label stc-label-b"></div>
+                  <div class="stc-slot" data-slot="card-b">
+                    <!-- SLOT "card-b": replace the children of this element
+                         with your own content (img, video, or HTML). -->
+                    <div class="stc-default" aria-hidden="true">
+                      <div class="stc-bar"></div>
+                      <div class="stc-line"></div>
+                      <div class="stc-line"></div>
+                      <div class="stc-line"></div>
+                    </div>
+                  </div>
+                </section>
+                <div class="stc-badge-pos stc-badge-pos-b">
+                  <div class="stc-badge stc-badge-b"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            // Literal id: mount flattening strips data-composition-id from the
+            // live root before this timeline registers.
+            var compositionId = "split-tilt-cards";
+            var clip = root.querySelector(".stc-clip");
+            var wingA = root.querySelector(".stc-wing-a");
+            var cardA = root.querySelector(".stc-card-a");
+            var cardB = root.querySelector(".stc-card-b");
+            var wingB = root.querySelector(".stc-wing-b");
+            var floatA = root.querySelector(".stc-float-a");
+            var floatB = root.querySelector(".stc-float-b");
+            var labelA = root.querySelector(".stc-label-a");
+            var labelB = root.querySelector(".stc-label-b");
+            var badgeA = root.querySelector(".stc-badge-a");
+            var badgeB = root.querySelector(".stc-badge-b");
+            var badgePosA = root.querySelector(".stc-badge-pos-a");
+            var badgePosB = root.querySelector(".stc-badge-pos-b");
+
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var labelAText = vars.label_a == null ? "Before" : String(vars.label_a);
+            var labelBText = vars.label_b == null ? "After" : String(vars.label_b);
+            var badgeAText = vars.badge_a == null ? "v1" : String(vars.badge_a);
+            var badgeBText = vars.badge_b == null ? "v2" : String(vars.badge_b);
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #22c55e)",
+              blue: "var(--accent, #38bdf8)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            // INVARIANT: only none | fade | up reaches the timeline.
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            labelA.textContent = labelAText;
+            labelB.textContent = labelBText;
+            badgeA.textContent = badgeAText;
+            badgeB.textContent = badgeBText;
+            if (badgeAText === "") badgePosA.style.display = "none";
+            if (badgeBText === "") badgePosB.style.display = "none";
+            root.style.setProperty("--stc-accent", accentColors[accent]);
+
+            // RETIME RANGE: fixed IN and OUT scale together only when D is too
+            // short. HOLD is the sole elastic phase. Never use timeScale().
+            var CARD_DUR_BASE = 1.1;
+            var CARD_B_DELAY_BASE = 0.2;
+            var FADE_DUR_BASE = 0.5;
+            var BADGE_A_AT_BASE = 1.45;
+            var BADGE_B_AT_BASE = 1.75;
+            var BADGE_DUR_BASE = 0.4;
+            var IN_BASE = BADGE_B_AT_BASE + BADGE_DUR_BASE;
+            var OUT_BASE = exit === "none" ? 0 : 0.5;
+            var STILLNESS = 0.3;
+            var FLOAT_CYCLE = 2.0;
+
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4.5"));
+            var totalBase = IN_BASE + OUT_BASE;
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var OUT_START = IN + HOLD;
+
+            function fireSfx(id, t) {
+              root.dispatchEvent(
+                new CustomEvent("hf:sfx", { detail: { id: id, t: t }, bubbles: true }),
+              );
+            }
+
+            // Explicit both-endpoints state makes tl.seek(0) deterministic.
+            // Fades ride the cards and the clip, never the wing/float/stage
+            // chain: opacity there would flatten the 3D tilt.
+            gsap.set(clip, { opacity: 1, y: 0 });
+            gsap.set(wingA, { x: "-26cqw", scale: 0.85 });
+            gsap.set(wingB, { x: "26cqw", scale: 0.85 });
+            gsap.set([cardA, cardB], { opacity: 0 });
+            gsap.set([floatA, floatB], { y: "0cqh" });
+            gsap.set([badgeA, badgeB], { opacity: 0, scale: 0 });
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: mirrored opposite-wing entries, right ~0.2s behind, each
+            // carrying its static book-open tilt; only x/scale/opacity move.
+            [
+              { wing: wingA, card: cardA, at: 0 },
+              { wing: wingB, card: cardB, at: CARD_B_DELAY_BASE * scale },
+            ].forEach(function (entry) {
+              tl.to(
+                entry.card,
+                { opacity: 1, duration: 0.5 * scale, ease: "power2.out" },
+                entry.at,
+              );
+              tl.to(
+                entry.wing,
+                { x: "0cqw", duration: CARD_DUR_BASE * scale, ease: "power3.out" },
+                entry.at,
+              );
+              tl.to(
+                entry.wing,
+                { scale: 1, duration: CARD_DUR_BASE * scale, ease: "power3.out" },
+                entry.at,
+              );
+            });
+
+            // Badges: the one sanctioned overshoot, kept small. Left lands
+            // first, right ~0.3s behind, both inside fixed IN.
+            [
+              { badge: badgeA, text: badgeAText, at: BADGE_A_AT_BASE * scale },
+              { badge: badgeB, text: badgeBText, at: BADGE_B_AT_BASE * scale },
+            ].forEach(function (pop) {
+              if (pop.text === "") return;
+              tl.to(
+                pop.badge,
+                { opacity: 1, scale: 1, duration: BADGE_DUR_BASE * scale, ease: "back.out(1.9)" },
+                pop.at,
+              );
+              var land = pop.at + BADGE_DUR_BASE * scale;
+              tl.call(
+                function () {
+                  fireSfx("badge-pop-soft", land);
+                },
+                [],
+                land,
+              );
+            });
+
+            // HOLD: phase-opposed barely-there idle float. Only whole cycles
+            // fit; each is authored as explicit half-cycle tweens (never
+            // repeat/yoyo) so every cycle starts and ends at rest, and the
+            // closing STILLNESS window stays dead still.
+            var floatWindow = Math.max(0, HOLD - STILLNESS);
+            var cycles = Math.floor(floatWindow / FLOAT_CYCLE);
+            var half = FLOAT_CYCLE / 2;
+            for (var i = 0; i < cycles; i += 1) {
+              var t0 = IN + i * FLOAT_CYCLE;
+              tl.to(floatA, { y: "-0.6cqh", duration: half, ease: "sine.inOut" }, t0);
+              tl.to(floatA, { y: "0cqh", duration: half, ease: "sine.inOut" }, t0 + half);
+              tl.to(floatB, { y: "0.6cqh", duration: half, ease: "sine.inOut" }, t0);
+              tl.to(floatB, { y: "0cqh", duration: half, ease: "sine.inOut" }, t0 + half);
+            }
+
+            // OUT: only when the exit variable asks for one; exit none holds
+            // the final spread (frame roots own transitions).
+            if (exit !== "none") {
+              tl.to(
+                clip,
+                { opacity: 0, duration: FADE_DUR_BASE * scale, ease: "power2.in" },
+                OUT_START,
+              );
+              if (exit === "up") {
+                tl.to(
+                  clip,
+                  { y: "-6cqh", duration: FADE_DUR_BASE * scale, ease: "power2.in" },
+                  OUT_START,
+                );
+              }
+            }
+
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/spotlight-card/demo.html b/docs/public/catalog/components/spotlight-card/demo.html
new file mode 100644
index 0000000000..73305ef7b1
--- /dev/null
+++ b/docs/public/catalog/components/spotlight-card/demo.html
@@ -0,0 +1,192 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Spotlight Card - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+        transform: scale(1.65);
+        transform-origin: center center;
+      }
+      .hf-remocn-spotlight-card {
+        --hf-accent: var(--accent, #18181b);
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-spotlight-card {
+        position: relative;
+        width: 760px;
+        height: 428px;
+        overflow: hidden;
+        border-radius: 30px;
+        background: #080b12;
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+      }
+      .hf-remocn-spotlight-card .mesh {
+        position: absolute;
+        inset: -22%;
+        filter: blur(44px);
+        opacity: 0.88;
+        background:
+          radial-gradient(
+            circle at var(--hf-x1, 20%) var(--hf-y1, 30%),
+            rgba(255, 255, 255, 0.45) 0 18%,
+            transparent 32%
+          ),
+          radial-gradient(
+            circle at var(--hf-x2, 76%) var(--hf-y2, 52%),
+            rgba(255, 255, 255, 0.18) 0 16%,
+            transparent 34%
+          ),
+          radial-gradient(
+            circle at var(--hf-x3, 46%) var(--hf-y3, 78%),
+            rgba(255, 255, 255, 0.08) 0 18%,
+            transparent 34%
+          );
+      }
+      .hf-remocn-spotlight-card .card {
+        position: absolute;
+        inset: 74px 92px;
+        border: 1px solid rgba(255, 255, 255, 0.16);
+        border-radius: 26px;
+        background: rgba(255, 255, 255, 0.08);
+        color: #fff;
+        display: grid;
+        place-items: center;
+        text-align: center;
+        overflow: hidden;
+      }
+      .hf-remocn-spotlight-card .spot {
+        position: absolute;
+        width: 260px;
+        height: 260px;
+        border-radius: 50%;
+        background: radial-gradient(circle, rgba(255, 255, 255, 0.5), transparent 65%);
+        transform: translate(var(--hf-spot-x, 0px), var(--hf-spot-y, 0px));
+        mix-blend-mode: screen;
+      }
+      .hf-remocn-spotlight-card .particle {
+        position: absolute;
+        left: 50%;
+        top: 54%;
+        width: 12px;
+        height: 20px;
+        border-radius: 3px;
+        background: var(--c);
+        transform: translate(var(--hf-px, 0px), var(--hf-py, 0px)) rotate(var(--hf-pr, 0deg));
+        opacity: var(--hf-po, 0);
+      }
+      .hf-remocn-spotlight-card h3 {
+        margin: 0;
+        font-size: 44px;
+        letter-spacing: -0.04em;
+      }
+      .hf-remocn-spotlight-card p {
+        margin: 8px 0 0;
+        font-size: 18px;
+        color: rgba(255, 255, 255, 0.7);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="spotlight-card-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-spotlight-card">
+          <div class="mesh"></div>
+          <div class="card">
+            <div class="spot"></div>
+            <div>
+              <h3>Spotlight Card</h3>
+              <p>A card with a scripted cursor spotlight and lit border.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-spotlight-card .mesh",
+          {
+            "--hf-x1": "18%",
+            "--hf-y1": "28%",
+            "--hf-x2": "78%",
+            "--hf-y2": "46%",
+            "--hf-x3": "44%",
+            "--hf-y3": "80%",
+          },
+          {
+            "--hf-x1": "34%",
+            "--hf-y1": "42%",
+            "--hf-x2": "62%",
+            "--hf-y2": "60%",
+            "--hf-x3": "58%",
+            "--hf-y3": "64%",
+            duration: 4,
+            ease: "sine.inOut",
+          },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-spotlight-card .spot",
+          { "--hf-spot-x": "-120px", "--hf-spot-y": "-70px" },
+          { "--hf-spot-x": "190px", "--hf-spot-y": "90px", duration: 3, ease: "sine.inOut" },
+          startTime,
+        );
+        const particles_spotlight_card = gsap.utils.toArray(".hf-remocn-spotlight-card .particle");
+        if (particles_spotlight_card.length) {
+          tl.fromTo(
+            particles_spotlight_card,
+            { "--hf-po": 0, "--hf-px": "0px", "--hf-py": "0px", "--hf-pr": "0deg" },
+            {
+              "--hf-po": 1,
+              "--hf-px": (i) => Math.cos(i * 0.83) * 250 + "px",
+              "--hf-py": (i) => -120 - Math.sin(i * 0.61) * 120 + "px",
+              "--hf-pr": (i) => 180 + i * 37 + "deg",
+              duration: 0.8,
+              stagger: 0.015,
+              ease: "power2.out",
+            },
+            startTime + 0.2,
+          );
+        }
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["spotlight-card-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/spotlight-card/spotlight-card.html b/docs/public/catalog/components/spotlight-card/spotlight-card.html
new file mode 100644
index 0000000000..24b96325f4
--- /dev/null
+++ b/docs/public/catalog/components/spotlight-card/spotlight-card.html
@@ -0,0 +1,105 @@
+<!--
+  Spotlight Card - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-spotlight-card">
+  <div class="mesh"></div>
+  <div class="card">
+    <div class="spot"></div>
+    <div>
+      <h3>Spotlight Card</h3>
+      <p>A card with a scripted cursor spotlight and lit border.</p>
+    </div>
+  </div>
+</div>
+
+<style>
+  .hf-remocn-spotlight-card {
+    --hf-accent: var(--accent, #18181b);
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-spotlight-card {
+    position: relative;
+    width: 760px;
+    height: 428px;
+    overflow: hidden;
+    border-radius: 30px;
+    background: #080b12;
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+  }
+  .hf-remocn-spotlight-card .mesh {
+    position: absolute;
+    inset: -22%;
+    filter: blur(44px);
+    opacity: 0.88;
+    background:
+      radial-gradient(
+        circle at var(--hf-x1, 20%) var(--hf-y1, 30%),
+        rgba(255, 255, 255, 0.45) 0 18%,
+        transparent 32%
+      ),
+      radial-gradient(
+        circle at var(--hf-x2, 76%) var(--hf-y2, 52%),
+        rgba(255, 255, 255, 0.18) 0 16%,
+        transparent 34%
+      ),
+      radial-gradient(
+        circle at var(--hf-x3, 46%) var(--hf-y3, 78%),
+        rgba(255, 255, 255, 0.08) 0 18%,
+        transparent 34%
+      );
+  }
+  .hf-remocn-spotlight-card .card {
+    position: absolute;
+    inset: 74px 92px;
+    border: 1px solid rgba(255, 255, 255, 0.16);
+    border-radius: 26px;
+    background: rgba(255, 255, 255, 0.08);
+    color: #fff;
+    display: grid;
+    place-items: center;
+    text-align: center;
+    overflow: hidden;
+  }
+  .hf-remocn-spotlight-card .spot {
+    position: absolute;
+    width: 260px;
+    height: 260px;
+    border-radius: 50%;
+    background: radial-gradient(circle, rgba(255, 255, 255, 0.5), transparent 65%);
+    transform: translate(var(--hf-spot-x, 0px), var(--hf-spot-y, 0px));
+    mix-blend-mode: screen;
+  }
+  .hf-remocn-spotlight-card .particle {
+    position: absolute;
+    left: 50%;
+    top: 54%;
+    width: 12px;
+    height: 20px;
+    border-radius: 3px;
+    background: var(--c);
+    transform: translate(var(--hf-px, 0px), var(--hf-py, 0px)) rotate(var(--hf-pr, 0deg));
+    opacity: var(--hf-po, 0);
+  }
+  .hf-remocn-spotlight-card h3 {
+    margin: 0;
+    font-size: 44px;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-spotlight-card p {
+    margin: 8px 0 0;
+    color: rgba(255, 255, 255, 0.7);
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-spotlight-card .mesh', { '--hf-x1': '18%', '--hf-y1': '28%', '--hf-x2': '78%', '--hf-y2': '46%', '--hf-x3': '44%', '--hf-y3': '80%' }, { '--hf-x1': '34%', '--hf-y1': '42%', '--hf-x2': '62%', '--hf-y2': '60%', '--hf-x3': '58%', '--hf-y3': '64%', duration: 4, ease: 'sine.inOut' }, startTime); tl.fromTo('.hf-remocn-spotlight-card .spot', { '--hf-spot-x': '-120px', '--hf-spot-y': '-70px' }, { '--hf-spot-x': '190px', '--hf-spot-y': '90px', duration: 3, ease: 'sine.inOut' }, startTime); const particles_spotlight_card = gsap.utils.toArray('.hf-remocn-spotlight-card .particle'); if (particles_spotlight_card.length) { tl.fromTo(particles_spotlight_card, { '--hf-po': 0, '--hf-px': '0px', '--hf-py': '0px', '--hf-pr': '0deg' }, { '--hf-po': 1, '--hf-px': (i) => (Math.cos(i * 0.83) * 250) + 'px', '--hf-py': (i) => (-120 - Math.sin(i * 0.61) * 120) + 'px', '--hf-pr': (i) => (180 + i * 37) + 'deg', duration: 0.8, stagger: 0.015, ease: 'power2.out' }, startTime + 0.2); }
+-->
diff --git a/docs/public/catalog/components/spring-pop/demo.html b/docs/public/catalog/components/spring-pop/demo.html
new file mode 100644
index 0000000000..1dc5fed4f3
--- /dev/null
+++ b/docs/public/catalog/components/spring-pop/demo.html
@@ -0,0 +1,116 @@
+<!doctype html>
+<!--
+  spring-pop demo. This standalone composition mounts spring-pop.html through
+  data-composition-src. Non-default values prove that all three variables
+  flow through the mount while the primitive remains sized by its host box.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Spring Pop Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #05070d);
+      }
+
+      #root {
+        --bg: #05070d;
+        --fg: #f8fafc;
+        --muted: #94a3b8;
+        --surface: #131b2e;
+        --border: #334155;
+        --brand: #22c55e;
+        --accent: #38bdf8;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-body: Inter, system-ui, sans-serif;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        --radius: 3cqmin;
+        --space-1: 1.2cqmin;
+        --space-2: 2.4cqmin;
+        --space-3: 4cqmin;
+        --dur-beat: 0.4s;
+        --ease-standard: cubic-bezier(0.215, 0.61, 0.355, 1);
+        --ease-emphasis: cubic-bezier(0.19, 1, 0.22, 1);
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(
+          ellipse at 50% 42%,
+          color-mix(in srgb, var(--surface) 92%, var(--accent)) 0%,
+          var(--bg) 70%
+        );
+      }
+
+      .mount-card {
+        width: 46%;
+        height: 36%;
+        left: 27%;
+        top: 32%;
+        container-type: size;
+        overflow: hidden;
+        border: 0.12cqmin solid color-mix(in srgb, var(--border) 72%, transparent);
+        border-radius: calc(var(--radius) * 1.35);
+        background: color-mix(in srgb, var(--surface) 76%, transparent);
+        box-shadow: 0 4cqh 10cqh color-mix(in srgb, var(--bg) 64%, transparent);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="spring-pop-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="2"
+      data-fps="30"
+    >
+      <div
+        id="spring-pop-mount"
+        class="mount-card clip"
+        data-composition-id="spring-pop"
+        data-composition-src="./spring-pop.html"
+        data-variable-values='{"overshoot":1.9,"fromScale":0.86,"text":"Just shipped"}'
+        data-start="0"
+        data-duration="2"
+        data-track-index="0"
+        data-width="883"
+        data-height="389"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["spring-pop-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "spring-pop.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/spring-pop/spring-pop.html b/docs/public/catalog/components/spring-pop/spring-pop.html
new file mode 100644
index 0000000000..63f4ccc850
--- /dev/null
+++ b/docs/public/catalog/components/spring-pop/spring-pop.html
@@ -0,0 +1,195 @@
+<!doctype html>
+<!--
+  spring-pop: HyperFrames video primitive (effects / burst / reveal)
+
+  Concept: one badge arrives from scale 0.9 and opacity 0, passes slightly
+  beyond full size, then settles exactly at scale 1. One mechanic, one job:
+  revealing an element with a restrained, physical overshoot.
+
+  Compiled-from evidence: Video Primitives v1 build contract, Easing
+  vocabulary (--ease-overshoot = GSAP back.out(1.7), taste rules 4 and 5),
+  plus hyperframes-animation rules/spring-pop-entrance.md's playful
+  overshoot variation. This fills the gap left by spring-scale-in, whose
+  power3.out curve never overshoots.
+
+  Use when: a new badge, compact card, icon, or product detail deserves one
+  lively entrance. Keep it to the single element that earns emphasis.
+
+  Variables:
+    - overshoot (number, 1.1 to 2.0, default 1.7): the strength passed to
+      GSAP back.out(overshoot).
+    - fromScale (number, 0.8 to 0.97, default 0.9): the visible start scale.
+    - text (string, default "New"): the badge label.
+
+  Envelope: fixed 0.60s IN carries the complete pop, followed by a
+  deliberately still elastic HOLD. There is no OUT because this reveal
+  establishes the element's resting state. If duration is shorter than
+  0.60s, IN compresses to fit and HOLD becomes zero.
+
+  Sync point: pop-settle occurs at 0.60s into IN, scaled only when the full
+  duration is shorter than the fixed entrance. It never enters HOLD.
+
+  Sound: none. A parent scene may place a static cue at pop-settle.
+
+  Mount contract: the runtime clones only this template. #root fills the
+  host box, establishes the container query basis, has no data-width or
+  data-height, and registers one paused timeline under the hardcoded
+  spring-pop id.
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "overshoot", "type": "number", "role": "timing", "label": "Overshoot", "description": "Strength passed to the back.out entrance curve.", "default": 1.7, "min": 1.1, "max": 2, "step": 0.1 },
+    { "id": "fromScale", "type": "number", "role": "timing", "label": "Starting scale", "description": "Scale at the start of the entrance.", "default": 0.9, "min": 0.8, "max": 0.97, "step": 0.01 },
+    { "id": "text", "type": "string", "role": "content", "label": "Label", "description": "Text displayed inside the badge.", "default": "New" }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Spring Pop</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="spring-pop" data-duration="2" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .sp-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+          }
+
+          /* EDIT ZONE: badge proportions only. The centered 82cqw ceiling
+             reserves clearance for the overshoot at every allowed value. */
+          .sp-badge {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: var(--space-2, 2.4cqw);
+            min-width: 48cqw;
+            max-width: 82cqw;
+            min-height: 32cqh;
+            padding: var(--space-2, 2.4cqh) var(--space-3, 4cqw);
+            border: 0.18cqmin solid var(--border, #334155);
+            border-radius: var(--radius, 3cqmin);
+            background: var(--surface, #1e293b);
+            box-shadow: 0 2.4cqh 7cqh color-mix(in srgb, var(--bg, #0b1120) 42%, transparent);
+            transform-origin: 50% 50%;
+            will-change: transform, opacity;
+          }
+
+          .sp-dot {
+            flex: 0 0 auto;
+            width: 3.2cqmin;
+            aspect-ratio: 1;
+            border-radius: 50%;
+            background: var(--brand, #22c55e);
+            box-shadow: 0 0 2.4cqmin color-mix(in srgb, var(--brand, #22c55e) 58%, transparent);
+          }
+
+          .sp-label {
+            min-width: 0;
+            overflow: hidden;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: clamp(14px, 9cqmin, 54px);
+            font-weight: 720;
+            line-height: 1.2;
+            letter-spacing: -0.02em;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+        </style>
+
+        <div
+          id="spring-pop-clip"
+          class="sp-clip clip"
+          data-start="0"
+          data-duration="2"
+          data-track-index="0"
+        >
+          <div class="sp-badge">
+            <span class="sp-dot" aria-hidden="true"></span>
+            <span class="sp-label"></span>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var badge = root.querySelector(".sp-badge");
+            var label = root.querySelector(".sp-label");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            // INVARIANT: invalid numeric overrides return to declared
+            // defaults. Explicit finite checks preserve every valid value.
+            var overshootValue = vars.overshoot;
+            var fromScaleValue = vars.fromScale;
+            var overshoot = Number.isFinite(overshootValue)
+              ? Math.max(1.1, Math.min(2, overshootValue))
+              : 1.7;
+            var fromScale = Number.isFinite(fromScaleValue)
+              ? Math.max(0.8, Math.min(0.97, fromScaleValue))
+              : 0.9;
+            var text = vars.text == null ? "New" : String(vars.text);
+
+            label.textContent = text;
+
+            // RETIME RANGE: tune only the fixed entrance length. HOLD is
+            // deliberately still, and this reveal has no exit phase.
+            var IN_BASE = 0.6;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "2"));
+            var IN = Math.min(IN_BASE, duration);
+            var OPACITY_IN = Math.min(0.3, IN);
+
+            var tl = gsap.timeline({ paused: true });
+
+            // --ease-overshoot: the back curve owns the only scale arc. The
+            // start is 0.9 by default, never 0, so the badge does not appear
+            // from nothing. Opacity uses its own non-overshooting ease.
+            tl.fromTo(
+              badge,
+              { scale: fromScale },
+              { scale: 1, duration: IN, ease: "back.out(" + overshoot + ")" },
+              0,
+            );
+            tl.fromTo(
+              badge,
+              { opacity: 0 },
+              { opacity: 1, duration: OPACITY_IN, ease: "power2.out" },
+              0,
+            );
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines["spring-pop"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/spring-scale-in/__hf-variables-preview.html b/docs/public/catalog/components/spring-scale-in/__hf-variables-preview.html
new file mode 100644
index 0000000000..80377841af
--- /dev/null
+++ b/docs/public/catalog/components/spring-scale-in/__hf-variables-preview.html
@@ -0,0 +1,78 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Spring Scale In variables preview</title>
+    <style>
+      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #f7f7f8; }
+      #hf-vars-root { position: relative; width: 1920px; height: 1080px; }
+      #hf-vars-mount { position: absolute; inset: 0; display: grid; place-items: center; }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  </head>
+  <body>
+    <div id="hf-vars-root" data-composition-id="spring-scale-in-variables-preview" data-start="0" data-width="1920" data-height="1080" data-duration="5" data-fps="30">
+      <div id="hf-vars-mount" class="clip" data-composition-id="spring-scale-in" data-composition-src="./spring-scale-in.html" data-start="0" data-duration="5" data-track-index="0" data-width="1920" data-height="1080"></div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["spring-scale-in-variables-preview"] = gsap.timeline({ paused: true });
+    </script>
+    <script>
+      (function () {
+        var mount = document.getElementById("hf-vars-mount");
+        // The mount is filled asynchronously, and the demo script selects
+        // what it fills it with, so it cannot run before then.
+        var observer = new MutationObserver(build);
+        observer.observe(mount, { childList: true, subtree: true });
+        build();
+        function build() {
+          if (!mount.firstElementChild) return;
+          observer.disconnect();
+
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-spring-scale-in span",
+          { opacity: 0, "--hf-word-y": "22px", "--hf-word-scale": 0.92, "--hf-word-blur": "5px" },
+          {
+            opacity: 1,
+            "--hf-word-y": "0px",
+            "--hf-word-scale": 1,
+            "--hf-word-blur": "0px",
+            duration: 0.3,
+            stagger: 0.055,
+            ease: "power3.out",
+          },
+          startTime,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["spring-scale-in-demo"] = tl;
+          var child = window.__timelines["spring-scale-in-demo"];
+          delete window.__timelines["spring-scale-in-demo"];
+          if (!child || typeof child.paused !== "function") return;
+          child.paused(false);
+          window.__timelines["spring-scale-in-variables-preview"].add(child, 0);
+        }
+      })();
+    </script>
+<script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "spring-scale-in.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/spring-scale-in/demo.html b/docs/public/catalog/components/spring-scale-in/demo.html
new file mode 100644
index 0000000000..df9cbe326a
--- /dev/null
+++ b/docs/public/catalog/components/spring-scale-in/demo.html
@@ -0,0 +1,129 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Spring Scale In - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        /* ponytail: scale wrapper — not a GSAP target, safe to use CSS transform */
+        transform: scale(2.0);
+        transform-origin: center center;
+      }
+      .demo-card {
+        background: #ffffff;
+        border: 1px solid #e4e4e7;
+        border-radius: 14px;
+        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.10), 0 4px 16px rgba(0, 0, 0, 0.06);
+        padding: 48px 56px 44px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 10px;
+        min-width: 380px;
+      }
+      .demo-label {
+        font-size: 11px;
+        font-weight: 500;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+        color: #71717a;
+        margin-bottom: 4px;
+      }
+      .hf-remocn-spring-scale-in {
+        color: #18181b;
+        font-family: Inter, system-ui, sans-serif;
+        font-weight: 800;
+        letter-spacing: -0.03em;
+        display: inline-flex;
+        gap: 10px;
+        font-size: 42px;
+        line-height: 1;
+      }
+      .hf-remocn-spring-scale-in span {
+        display: inline-block;
+        transform: translate(var(--hf-word-x, 0px), var(--hf-word-y, 0px))
+          scale(var(--hf-word-scale, 1));
+        filter: blur(var(--hf-word-blur, 0px));
+        will-change: transform, filter, opacity;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="spring-scale-in-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="demo-card">
+          <div class="demo-label">Animation primitive</div>
+          <div class="hf-remocn-spring-scale-in">
+            <span>Spring</span><span>scale</span><span>in</span>
+          </div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-spring-scale-in span",
+          { opacity: 0, "--hf-word-y": "22px", "--hf-word-scale": 0.92, "--hf-word-blur": "5px" },
+          {
+            opacity: 1,
+            "--hf-word-y": "0px",
+            "--hf-word-scale": 1,
+            "--hf-word-blur": "0px",
+            duration: 0.3,
+            stagger: 0.055,
+            ease: "power3.out",
+          },
+          startTime,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["spring-scale-in-demo"] = tl;
+      </script>
+    </div>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "spring-scale-in.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/spring-scale-in/spring-scale-in.html b/docs/public/catalog/components/spring-scale-in/spring-scale-in.html
new file mode 100644
index 0000000000..1d09a9f3d8
--- /dev/null
+++ b/docs/public/catalog/components/spring-scale-in/spring-scale-in.html
@@ -0,0 +1,112 @@
+<!--
+  Spring Scale In - remocn typography primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Drive the timeline
+  integration from a paused GSAP timeline so renders remain deterministic.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result as a custom property
+  the CSS below consumes. The timeline recipe stays untouched by them: it keeps
+  driving one scale and one offset, and these decide how far off final size the
+  spring starts and how much ground it covers on the way in.
+
+    - words (text, default "Spring scale in"): the words on screen. The text is
+      split on whitespace and each word becomes its own span, so the stagger
+      picks up as many steps as there are words. Blank or non-text input falls
+      back to the default three.
+    - pop (subtle | standard | bold, default standard): scales how far below
+      final size the words start before the spring settles them. subtle covers
+      about a third of the run, bold a little over double, in the same time.
+    - distance (close | standard | far, default standard): scales the vertical
+      offset the words rise through. close covers half the run, far nearly
+      double, in the same time.
+    - tone (ink | paper | accent, default ink): word colour. ink is near-black
+      for light frames, paper near-white for dark ones, accent rides --brand.
+
+  On every default the result is identical to the original: three near-black
+  words springing up 22px from 0.92 through a 5px blur.
+-->
+
+<div
+  class="hf-remocn-spring-scale-in"
+  data-composition-variables='[
+    { "id": "words", "type": "string", "role": "content", "label": "Words", "description": "Words on screen, split on whitespace so each one gets its own stagger step.", "default": "Spring scale in" },
+    { "id": "pop", "type": "enum", "role": "motion", "label": "Pop", "description": "Scales how far below final size the words start before the spring settles them.", "default": "standard", "options": [{ "value": "subtle", "label": "Subtle" }, { "value": "standard", "label": "Standard" }, { "value": "bold", "label": "Bold" }] },
+    { "id": "distance", "type": "enum", "role": "motion", "label": "Distance", "description": "Scales the vertical offset the words rise through, so they cover a shorter or longer run in the same time.", "default": "standard", "options": [{ "value": "close", "label": "Close" }, { "value": "standard", "label": "Standard" }, { "value": "far", "label": "Far" }] },
+    { "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Word colour: ink for light frames, paper for dark ones, accent rides --brand.", "default": "ink", "options": [{ "value": "ink", "label": "Ink" }, { "value": "paper", "label": "Paper" }, { "value": "accent", "label": "Accent" }] }
+  ]'
+><span>Spring</span><span>scale</span><span>in</span></div>
+
+<style>
+  .hf-remocn-spring-scale-in {
+    color: var(--hf-word-color, #18181b);
+    font-family: Inter, system-ui, sans-serif;
+    font-weight: 900;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-spring-scale-in {
+    display: inline-flex;
+    gap: 12px;
+    font-size: 56px;
+    line-height: 1;
+  }
+  .hf-remocn-spring-scale-in span {
+    display: inline-block;
+    transform: translate(
+        var(--hf-word-x, 0px),
+        calc(var(--hf-word-y, 0px) * var(--hf-word-reach, 1))
+      )
+      scale(calc(1 + (var(--hf-word-scale, 1) - 1) * var(--hf-word-pop, 1)));
+    filter: blur(var(--hf-word-blur, 0px));
+    will-change: transform, filter, opacity;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var pops = { subtle: 0.35, standard: 1, bold: 2.2 };
+    var reaches = { close: 0.5, standard: 1, far: 1.85 };
+    var tones = {
+      ink: "#18181b",
+      paper: "#fafafa",
+      accent: "var(--brand, #34d399)",
+    };
+
+    var pop = pops[pick(pops, vars.pop, "standard")];
+    var reach = reaches[pick(reaches, vars.distance, "standard")];
+    var tone = tones[pick(tones, vars.tone, "ink")];
+    var words = (typeof vars.words === "string" ? vars.words : "").split(/\s+/).filter(Boolean);
+    if (words.length === 0) words = ["Spring", "scale", "in"];
+
+    var roots = document.querySelectorAll(".hf-remocn-spring-scale-in");
+    for (var i = 0; i < roots.length; i += 1) {
+      var root = roots[i];
+      root.style.setProperty("--hf-word-pop", String(pop));
+      root.style.setProperty("--hf-word-reach", String(reach));
+      root.style.setProperty("--hf-word-color", tone);
+      root.textContent = "";
+      for (var j = 0; j < words.length; j += 1) {
+        var span = document.createElement("span");
+        span.textContent = words[j];
+        root.appendChild(span);
+      }
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-spring-scale-in span', { opacity: 0, '--hf-word-y': '22px', '--hf-word-scale': 0.92, '--hf-word-blur': '5px' }, { opacity: 1, '--hf-word-y': '0px', '--hf-word-scale': 1, '--hf-word-blur': '0px', duration: 0.3, stagger: 0.055, ease: 'power3.out' }, startTime);
+-->
diff --git a/docs/public/catalog/components/spring-stack-shuffle/README.md b/docs/public/catalog/components/spring-stack-shuffle/README.md
new file mode 100644
index 0000000000..9bc972d173
--- /dev/null
+++ b/docs/public/catalog/components/spring-stack-shuffle/README.md
@@ -0,0 +1,105 @@
+# spring-stack-shuffle
+
+A stack of 3 to 5 cards reshuffles on cues: on each cue the card at the back
+throws over the top of the stack and lands at the front with real mass (one
+small sanctioned landing overshoot, quiet register), while the other cards
+step one slot deeper and take a brief compress-resettle as the flyer lands.
+An accent ring rides the active (front) card across every shuffle.
+
+The signature is law L1, interruptible springs: when a cue fires while a
+previous shuffle is still in flight, every moving card redirects to its new
+slot from its current position at its current velocity. No snap-to-zero, no
+pop. The default cue rhythm (`0.9, 1.7, 1.95`) fires its third cue mid-throw
+of the second on purpose, so the redirect is part of the authored default
+choreography.
+
+The redirect is not a physics simulation: motion compiles at mount into
+per-card segment lists (explicit endpoints, pure ease functions). A cue that
+interrupts a segment cuts it analytically (value from the ease curve,
+velocity from a fixed finite difference) and continues with a Hermite ease
+whose start slope equals the cut velocity. Every emitted tween is a `fromTo`
+with both endpoints authored, so seeks in either direction always reproduce
+the same frame.
+
+## Files
+
+- `spring-stack-shuffle.html`: the mountable sub-composition (install target:
+  `compositions/components/spring-stack-shuffle.html`).
+- `registry-item.json`: registry metadata and the variables block.
+- `demo.html`: standalone 1920x1080 host mounting the primitive with
+  non-default variables.
+
+## Variables
+
+| id       | type   | default          | notes                                                                     |
+| -------- | ------ | ---------------- | ------------------------------------------------------------------------- |
+| `cards`  | number | `4`              | stack size, clamped to 3..5                                               |
+| `cues`   | string | `0.9, 1.7, 1.95` | comma seconds from mount start, one shuffle per cue; empty keeps default  |
+| `accent` | enum   | `green`          | `green` maps to `--brand`, `blue` to `--accent`, `violet` to `--accent-2` |
+| `exit`   | enum   | `none`           | `none` holds the settled stack; `fade` and `up` release the stage         |
+
+Cues are clamped into `[0.85, D - exit - 0.9]` so every throw lands before an
+exit begins. Cues closer together than a throw (0.85s) interrupt the flight;
+that is the point, not an error. Envelope: staggered entrances finish by
+~0.8s, HOLD is the only elastic phase, OUT is 0.45s only when `exit` is
+`fade` or `up`.
+
+## The slot mechanism
+
+The primitive ships five named slot panels inside its `<template>`, one per
+card, front to back at mount:
+
+```html
+<div class="sss-slot" data-slot="card-1">...</div>
+...
+<div class="sss-slot" data-slot="card-5">...</div>
+```
+
+Each slot's default children are a numbered token skeleton card, so an
+untouched mount still reads as a tasteful shuffle. To show your own content,
+install the component and **replace the children of each `[data-slot]`
+element in your installed copy** (the runtime clones only the primitive's own
+template on mount, so slot content lives in the component file, not on the
+host clip). Slots beyond the `cards` count are removed at mount.
+
+Rules:
+
+- Direct `img`/`video` children are automatically sized to cover the card
+  (`object-fit: cover`). Arbitrary HTML works too; size it in `cqw`/`cqh`.
+- Leave the `.sss-veil` and `.sss-ring` siblings alone; they are the
+  timeline-driven depth dim and active ring.
+
+## Worked example
+
+Install, then fill the slots with three screens and shuffle between them:
+
+```bash
+npx hyperframes add spring-stack-shuffle
+```
+
+In `compositions/components/spring-stack-shuffle.html`, replace each slot's
+default block:
+
+```html
+<div class="sss-slot" data-slot="card-1">
+  <img src="../../assets/screen-dashboard.png" alt="" />
+</div>
+```
+
+Mount it from a host composition like any sub-composition:
+
+```html
+<div
+  class="clip"
+  data-composition-id="spring-stack-shuffle"
+  data-composition-src="./components/spring-stack-shuffle.html"
+  data-variable-values='{"cards":3,"cues":"1.0, 1.9","accent":"blue"}'
+  data-start="2"
+  data-duration="4"
+  data-track-index="0"
+></div>
+```
+
+Two shuffles fire at 1.0s and 1.9s after mount; the second lands just as the
+first settles. Bring the cues within 0.85s of each other to see the L1
+redirect: the in-flight card bends to its new slot without ever stopping.
diff --git a/docs/public/catalog/components/spring-stack-shuffle/demo.html b/docs/public/catalog/components/spring-stack-shuffle/demo.html
new file mode 100644
index 0000000000..46913e200a
--- /dev/null
+++ b/docs/public/catalog/components/spring-stack-shuffle/demo.html
@@ -0,0 +1,104 @@
+<!doctype html>
+<!--
+  spring-stack-shuffle demo. This standalone composition mounts the primitive
+  through data-composition-src. Non-default cards, cues, and accent prove the
+  variable path; the tight 1.5 / 1.75 cue pair keeps the L1 mid-flight
+  redirect inside the demo choreography.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Spring Stack Shuffle Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #0b0c0e);
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --muted: #94a3b8;
+        --surface: #14171c;
+        --border: #343a46;
+        --brand: #71f5a7;
+        --accent: #61a8ff;
+        --accent-2: #c5a3ff;
+        --font-body: Inter, system-ui, sans-serif;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 42%, #12151b 0%, var(--bg, #0b0c0e) 74%);
+      }
+
+      .mount-card {
+        position: absolute;
+        width: 62%;
+        height: 82%;
+        left: 19%;
+        top: 9%;
+        container-type: size;
+        overflow: hidden;
+        border-radius: 28px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="spring-stack-shuffle-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="spring-stack-shuffle-mount"
+        class="mount-card clip"
+        data-composition-id="spring-stack-shuffle"
+        data-composition-src="./spring-stack-shuffle.html"
+        data-variable-values='{"cards":5,"cues":"0.9, 1.5, 1.75, 2.6","accent":"violet"}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="1190"
+        data-height="886"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["spring-stack-shuffle-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "spring-stack-shuffle.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/spring-stack-shuffle/spring-stack-shuffle.html b/docs/public/catalog/components/spring-stack-shuffle/spring-stack-shuffle.html
new file mode 100644
index 0000000000..950a87bd9f
--- /dev/null
+++ b/docs/public/catalog/components/spring-stack-shuffle/spring-stack-shuffle.html
@@ -0,0 +1,607 @@
+<!doctype html>
+<!--
+  spring-stack-shuffle: HyperFrames video primitive (product demo / physics)
+
+  A stack of 3 to 5 cards reshuffles on cues: on each cue the card at the
+  back of the stack throws over the top and lands at the front with real
+  mass (small landing overshoot, the quiet register), while the other cards
+  step one slot deeper and give a brief compress-resettle as the flyer
+  lands.
+
+  SIGNATURE (law L1, interruptible springs): when a cue fires while a
+  previous shuffle is still in flight, every in-flight card REDIRECTS to
+  its new slot preserving its instantaneous velocity. No snap-to-zero, no
+  pop. The default cue rhythm (0.9, 1.7, 1.95) deliberately fires the third
+  cue mid-throw of the second so the redirect is part of the authored
+  choreography.
+
+  How the redirect stays deterministic and seek-safe: motion is compiled
+  at mount into per-card, per-property segment lists (explicit from/to and
+  a pure ease function each). A redirect cuts the covering segment
+  analytically (value from the ease, velocity from a fixed finite
+  difference), truncates it with a renormalized copy of the same curve, and
+  continues with a cubic Hermite ease whose start slope equals the cut
+  velocity and whose end slope is zero. Nothing simulates: every emitted
+  tween is a fromTo with both endpoints authored, so any seek in either
+  direction reproduces the same frame.
+
+  Slots (see README.md for a worked example):
+    - [data-slot="card-1"] ... [data-slot="card-5"]: card bodies, front to
+      back at mount. Replace the children of a slot in your installed copy.
+      Defaults: numbered token skeleton cards. Direct img/video children
+      cover the card area.
+
+  Variables (declared in data-composition-variables below):
+    - cards (number 3..5, default 4): how many cards are in the stack.
+    - cues (string, default "0.9, 1.7, 1.95"): comma-separated seconds,
+      relative to mount start; each cue fires one shuffle. Cues closer
+      together than a throw (0.85s) interrupt the flight and exercise the
+      L1 redirect. Empty keeps the authored default rhythm.
+    - accent (green | blue | violet, default green): active-card ring via
+      the contract token map.
+    - exit (none | fade | up, default none): frame roots own transitions;
+      holds end films.
+
+  Envelope, fixed IN and OUT with elastic HOLD only (never time-scaled):
+    IN    = staggered card entrances, back to front, done by ~0.8s
+    CUES  = clamped into [0.85, D - OUT - 0.9] so every throw lands before
+            any exit begins
+    HOLD  = still after the last landing bump settles
+    OUT   = 0s for exit none, otherwise 0.45s
+
+  Mount contract: MOUNTABLE SUB-COMPOSITION. The runtime clones only
+  <template> contents; #root fills the host box (inset:0, container-type:
+  size), has no data-width/data-height, and registers one paused timeline
+  under the literal "spring-stack-shuffle" key. Stack geometry is measured
+  in px from the mounted root once (cq-unit transform tweens are not
+  seek-safe); variables come from window.__hyperframes.getVariables().
+-->
+<html
+  lang="en"
+  data-composition-id="spring-stack-shuffle"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "cards", "type": "number", "role": "content", "label": "Cards", "description": "Number of cards in the stack, 3 to 5.", "default": 4, "min": 3, "max": 5, "step": 1 },
+    { "id": "cues", "type": "string", "role": "timing", "label": "Shuffle cues", "description": "Comma-separated seconds from mount start; each cue throws the back card to the front. Cues inside a running throw redirect it mid-flight, velocity preserved. Empty keeps the default rhythm.", "default": "0.9, 1.7, 1.95" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Active-card ring color from the contract token map.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the settled stack holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Spring Stack Shuffle</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="spring-stack-shuffle" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            background: var(--bg, #0b0c0e);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .sss-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+          }
+
+          .sss-stage {
+            position: absolute;
+            inset: 0;
+            will-change: transform, opacity;
+          }
+
+          .sss-card {
+            position: absolute;
+            left: 50%;
+            top: 58%;
+            width: 46cqw;
+            height: 42cqh;
+            margin-left: -23cqw;
+            margin-top: -21cqh;
+            border: 0.16cqmin solid var(--border, #343a46);
+            border-radius: var(--radius, 2.2cqmin);
+            background: var(--surface, #14171c);
+            box-shadow: 0 2.2cqh 6cqh color-mix(in srgb, var(--bg, #000000) 55%, transparent);
+            overflow: hidden;
+            will-change: transform, opacity;
+          }
+
+          /* Active-card ring: opacity is timeline-driven so the front card
+             reads as the live one across every shuffle. */
+          .sss-ring {
+            position: absolute;
+            inset: 0;
+            border: 0.4cqmin solid var(--sss-accent, #71f5a7);
+            border-radius: inherit;
+            opacity: 0;
+            pointer-events: none;
+            z-index: 3;
+          }
+
+          /* Depth veil: timeline-driven dim; deeper cards sit darker. */
+          .sss-veil {
+            position: absolute;
+            inset: 0;
+            background: var(--bg, #0b0c0e);
+            border-radius: inherit;
+            opacity: 0;
+            pointer-events: none;
+            z-index: 2;
+          }
+
+          .sss-slot {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            border-radius: inherit;
+          }
+
+          .sss-slot > img,
+          .sss-slot > video {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+          }
+
+          .sss-default {
+            position: absolute;
+            inset: 0;
+            padding: var(--space-3, 3.2cqmin);
+            display: flex;
+            flex-direction: column;
+            gap: var(--space-2, 2cqmin);
+          }
+
+          .sss-chip {
+            align-self: flex-start;
+            padding: 0.9cqmin 1.8cqmin;
+            border: 0.14cqmin solid var(--border, #343a46);
+            border-radius: 999cqmin;
+            color: var(--muted, #94a3b8);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            font-size: min(1.7cqw, 3cqh);
+            font-weight: 600;
+            letter-spacing: 0.08em;
+            line-height: 1;
+          }
+
+          .sss-bar {
+            width: 46%;
+            height: 8%;
+            border-radius: 999cqmin;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 22%, var(--surface, #14171c));
+          }
+
+          .sss-line {
+            width: 84%;
+            height: 5%;
+            border-radius: 999cqmin;
+            background: color-mix(in srgb, var(--muted, #94a3b8) 34%, var(--surface, #14171c));
+          }
+
+          .sss-line + .sss-line {
+            width: 70%;
+          }
+        </style>
+
+        <div
+          id="spring-stack-shuffle-clip"
+          class="sss-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="sss-stage">
+            <section class="sss-card" aria-label="Card 1">
+              <div class="sss-slot" data-slot="card-1">
+                <!-- SLOT "card-1": replace the children of this element with
+                     your own content (img, video, or HTML). -->
+                <div class="sss-default" aria-hidden="true">
+                  <div class="sss-chip">01</div>
+                  <div class="sss-bar"></div>
+                  <div class="sss-line"></div>
+                  <div class="sss-line"></div>
+                </div>
+              </div>
+              <div class="sss-veil"></div>
+              <div class="sss-ring"></div>
+            </section>
+            <section class="sss-card" aria-label="Card 2">
+              <div class="sss-slot" data-slot="card-2">
+                <!-- SLOT "card-2": replace the children of this element with
+                     your own content (img, video, or HTML). -->
+                <div class="sss-default" aria-hidden="true">
+                  <div class="sss-chip">02</div>
+                  <div class="sss-bar"></div>
+                  <div class="sss-line"></div>
+                  <div class="sss-line"></div>
+                </div>
+              </div>
+              <div class="sss-veil"></div>
+              <div class="sss-ring"></div>
+            </section>
+            <section class="sss-card" aria-label="Card 3">
+              <div class="sss-slot" data-slot="card-3">
+                <!-- SLOT "card-3": replace the children of this element with
+                     your own content (img, video, or HTML). -->
+                <div class="sss-default" aria-hidden="true">
+                  <div class="sss-chip">03</div>
+                  <div class="sss-bar"></div>
+                  <div class="sss-line"></div>
+                  <div class="sss-line"></div>
+                </div>
+              </div>
+              <div class="sss-veil"></div>
+              <div class="sss-ring"></div>
+            </section>
+            <section class="sss-card" aria-label="Card 4">
+              <div class="sss-slot" data-slot="card-4">
+                <!-- SLOT "card-4": replace the children of this element with
+                     your own content (img, video, or HTML). -->
+                <div class="sss-default" aria-hidden="true">
+                  <div class="sss-chip">04</div>
+                  <div class="sss-bar"></div>
+                  <div class="sss-line"></div>
+                  <div class="sss-line"></div>
+                </div>
+              </div>
+              <div class="sss-veil"></div>
+              <div class="sss-ring"></div>
+            </section>
+            <section class="sss-card" aria-label="Card 5">
+              <div class="sss-slot" data-slot="card-5">
+                <!-- SLOT "card-5": replace the children of this element with
+                     your own content (img, video, or HTML). -->
+                <div class="sss-default" aria-hidden="true">
+                  <div class="sss-chip">05</div>
+                  <div class="sss-bar"></div>
+                  <div class="sss-line"></div>
+                  <div class="sss-line"></div>
+                </div>
+              </div>
+              <div class="sss-veil"></div>
+              <div class="sss-ring"></div>
+            </section>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            // Literal id: mount flattening strips data-composition-id from
+            // the live root before this timeline registers.
+            var compositionId = "spring-stack-shuffle";
+            var stage = root.querySelector(".sss-stage");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            root.style.setProperty("--sss-accent", accentColors[accent]);
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            var cardCountRaw = Number(vars.cards);
+            var cardCount = Number.isFinite(cardCountRaw)
+              ? Math.max(3, Math.min(5, Math.round(cardCountRaw)))
+              : 4;
+            var cardEls = Array.prototype.slice.call(root.querySelectorAll(".sss-card"));
+            cardEls.slice(cardCount).forEach(function (el) {
+              el.remove();
+            });
+            cardEls = cardEls.slice(0, cardCount);
+
+            // Stack geometry in px measured once from the mounted root:
+            // cq-unit transform tweens are not seek-safe, px numbers are.
+            var rect = root.getBoundingClientRect();
+            var W = Math.max(1, rect.width);
+            var H = Math.max(1, rect.height);
+            var STEP_Y = -0.055 * H; // deeper cards peek above the front card
+            var STEP_S = 0.05;
+            var APEX_Y = STEP_Y * (cardCount - 1) - 0.09 * H; // arc above the stack
+            var KICK_X = 0.12 * W; // lateral kick during the throw
+            var BUMP_Y = 0.012 * H; // stack compress as the flyer lands
+
+            function poseFor(depth) {
+              return {
+                y: depth * STEP_Y,
+                s: 1 - depth * STEP_S,
+                veil: Math.min(0.5, depth * 0.15),
+              };
+            }
+
+            // RETIME RANGE: fixed IN and OUT; HOLD is the only elastic span.
+            var THROW = 0.85;
+            var RISE = THROW * 0.4;
+            var LAND = THROW * 0.6;
+            var SHIFT = 0.55;
+            var OUT = exit === "none" ? 0 : 0.45;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var OUT_START = duration - OUT;
+            var CUE_MIN = 0.85;
+            var CUE_MAX = Math.max(CUE_MIN, OUT_START - THROW - 0.05);
+
+            var cues = String(
+              vars.cues == null || String(vars.cues).trim() === "" ? "0.9, 1.7, 1.95" : vars.cues,
+            )
+              .split(",")
+              .map(function (token) {
+                return Number(token);
+              })
+              .filter(function (value) {
+                return Number.isFinite(value);
+              })
+              .map(function (value) {
+                return Math.min(CUE_MAX, Math.max(CUE_MIN, value));
+              })
+              .sort(function (a, b) {
+                return a - b;
+              });
+
+            /* Author-time motion compiler. A track is one (element, property)
+               pair holding non-overlapping segments; every segment is a pure
+               curve with explicit endpoints. cutAt() is the L1 primitive: it
+               evaluates value and velocity at the cut analytically, truncates
+               the covering segment to a renormalized copy of its own curve,
+               and drops everything later. redirect() continues from the cut
+               with a Hermite ease whose start slope IS the cut velocity. */
+            function easeFn(ease) {
+              return typeof ease === "function" ? ease : gsap.parseEase(ease);
+            }
+
+            function makeTrack(el, prop, initial) {
+              return { el: el, prop: prop, initial: initial, segs: [] };
+            }
+
+            function endValue(track) {
+              return track.segs.length > 0 ? track.segs[track.segs.length - 1].to : track.initial;
+            }
+
+            function cutAt(track, time) {
+              var segs = track.segs;
+              while (segs.length > 0 && segs[segs.length - 1].t0 >= time) segs.pop();
+              if (segs.length === 0) return { value: track.initial, velocity: 0 };
+              var last = segs[segs.length - 1];
+              if (last.t1 <= time) return { value: last.to, velocity: 0 };
+              var curve = easeFn(last.ease);
+              var span = last.t1 - last.t0;
+              var f = (time - last.t0) / span;
+              var lo = Math.max(0, f - 0.001);
+              var hi = Math.min(1, f + 0.001);
+              var slope = (curve(hi) - curve(lo)) / (hi - lo);
+              var progress = curve(f);
+              var value = last.from + (last.to - last.from) * progress;
+              var velocity = ((last.to - last.from) * slope) / span;
+              last.t1 = time;
+              last.to = value;
+              if (progress > 1e-6) {
+                last.ease = (function (fullCurve, cutFraction, cutProgress) {
+                  return function (u) {
+                    return fullCurve(u * cutFraction) / cutProgress;
+                  };
+                })(curve, f, progress);
+              }
+              return { value: value, velocity: velocity };
+            }
+
+            // Cubic Hermite: h(0)=0, h(1)=1, h'(0)=m, h'(1)=0. A hot start
+            // slope overshoots past the target and eases back, which is the
+            // spring read; the clamp keeps it in the quiet register (L2).
+            function hermite(m0) {
+              var m = Math.max(-4, Math.min(4, m0));
+              return function (u) {
+                return u * u * u * (m - 2) + u * u * (3 - 2 * m) + m * u;
+              };
+            }
+
+            var smooth = hermite(0); // smoothstep: zero slope both ends
+
+            // Landing ease: zero-slope start (ballistic hang at the apex),
+            // small overshoot past the target, zero-slope settle. C1 all the
+            // way through, pure function of progress.
+            function landEase(overshoot) {
+              return function (u) {
+                if (u < 0.62) {
+                  var a = u / 0.62;
+                  return (1 + overshoot) * a * a * (3 - 2 * a);
+                }
+                var b = (u - 0.62) / 0.38;
+                return 1 + overshoot - overshoot * b * b * (3 - 2 * b);
+              };
+            }
+
+            function addSeg(track, t0, dur, to, ease) {
+              track.segs.push({ t0: t0, t1: t0 + dur, from: endValue(track), to: to, ease: ease });
+            }
+
+            function redirect(track, time, dur, to) {
+              var cut = cutAt(track, time);
+              var delta = to - cut.value;
+              var ease = Math.abs(delta) < 1e-4 ? smooth : hermite((cut.velocity * dur) / delta);
+              track.segs.push({ t0: time, t1: time + dur, from: cut.value, to: to, ease: ease });
+            }
+
+            var powerOut = gsap.parseEase("power3.out");
+            var cards = cardEls.map(function (el, index) {
+              var pose = poseFor(index);
+              return {
+                el: el,
+                depth: index,
+                landing: null,
+                x: makeTrack(el, "x", 0),
+                y: makeTrack(el, "y", pose.y + 0.05 * H),
+                s: makeTrack(el, "s", pose.s * 0.985),
+                veil: makeTrack(el.querySelector(".sss-veil"), "veil", pose.veil),
+                ring: makeTrack(el.querySelector(".sss-ring"), "ring", 0),
+              };
+            });
+            var zEvents = [];
+
+            // IN: staggered entrances, back card first, front card last.
+            cards.forEach(function (card, index) {
+              var pose = poseFor(index);
+              var tIn = (cardCount - 1 - index) * 0.07;
+              addSeg(card.y, tIn, 0.5, pose.y, powerOut);
+              addSeg(card.s, tIn, 0.5, pose.s, powerOut);
+              if (index === 0) addSeg(card.ring, 0.45, 0.3, 0.9, smooth);
+            });
+
+            // SHUFFLES: one per cue. The back card throws over the top; the
+            // rest step one slot deeper. Any card still in flight when a cue
+            // fires is cut and redirected, velocity preserved (L1).
+            cues.forEach(function (cue) {
+              var back = cards.reduce(function (a, b) {
+                return b.depth > a.depth ? b : a;
+              });
+              cards.forEach(function (card) {
+                if (card.landing && card.landing.t > cue) card.landing.canceled = true;
+                card.landing = null;
+                card.depth = card === back ? 0 : card.depth + 1;
+                zEvents.push({
+                  t: cue,
+                  el: card.el,
+                  z: card === back ? 60 : 40 - card.depth,
+                  canceled: false,
+                });
+              });
+
+              cards.forEach(function (card) {
+                var pose = poseFor(card.depth);
+                if (card === back) {
+                  // Throw arc: velocity-matched rise to a ballistic apex,
+                  // then a landing with one small sanctioned overshoot.
+                  redirect(card.x, cue, RISE, KICK_X);
+                  addSeg(card.x, cue + RISE, LAND, 0, smooth);
+                  redirect(card.y, cue, RISE, APEX_Y);
+                  addSeg(card.y, cue + RISE, LAND, pose.y, landEase(0.06));
+                  redirect(card.s, cue, RISE, 1.05);
+                  addSeg(card.s, cue + RISE, LAND, pose.s, landEase(0.04));
+                  redirect(card.veil, cue, THROW, pose.veil);
+                  redirect(card.ring, cue, THROW, 0.9);
+                  var landing = { t: cue + THROW, el: card.el, z: 40, canceled: false };
+                  zEvents.push(landing);
+                  card.landing = landing;
+                } else {
+                  redirect(card.x, cue, SHIFT, 0);
+                  redirect(card.y, cue, SHIFT, pose.y);
+                  redirect(card.s, cue, SHIFT, pose.s);
+                  redirect(card.veil, cue, SHIFT, pose.veil);
+                  redirect(card.ring, cue, SHIFT, 0);
+                }
+              });
+
+              // Compress-resettle: the stack takes the flyer's weight.
+              cards.forEach(function (card) {
+                if (card === back) return;
+                var rest = endValue(card.y);
+                addSeg(card.y, cue + THROW - 0.05, 0.16, rest + BUMP_Y, smooth);
+                addSeg(card.y, cue + THROW + 0.11, 0.22, rest, smooth);
+              });
+            });
+
+            // EMIT: initial states, then every compiled segment as an
+            // explicit fromTo. Segments never overlap per track, both
+            // endpoints are authored, eases are pure functions: seek-safe.
+            var propFor = {
+              x: function (value) {
+                return { x: value };
+              },
+              y: function (value) {
+                return { y: value };
+              },
+              s: function (value) {
+                return { scale: value };
+              },
+              veil: function (value) {
+                return { opacity: value };
+              },
+              ring: function (value) {
+                return { opacity: value };
+              },
+            };
+
+            gsap.set(stage, { opacity: 1, y: 0 });
+            cards.forEach(function (card, index) {
+              gsap.set(card.el, { opacity: 0, zIndex: 40 - index });
+            });
+
+            var tl = gsap.timeline({ paused: true });
+
+            cards.forEach(function (card, index) {
+              var tIn = (cardCount - 1 - index) * 0.07;
+              tl.fromTo(
+                card.el,
+                { opacity: 0 },
+                { opacity: 1, duration: 0.4, ease: "power2.out" },
+                tIn,
+              );
+              ["x", "y", "s", "veil", "ring"].forEach(function (prop) {
+                var track = card[prop];
+                var toProps = propFor[prop];
+                gsap.set(track.el, toProps(track.initial));
+                track.segs.forEach(function (seg) {
+                  var dur = seg.t1 - seg.t0;
+                  if (dur < 1 / 120) {
+                    tl.set(track.el, toProps(seg.to), seg.t1);
+                    return;
+                  }
+                  var to = toProps(seg.to);
+                  to.duration = dur;
+                  to.ease = easeFn(seg.ease);
+                  tl.fromTo(track.el, toProps(seg.from), to, seg.t0);
+                });
+              });
+            });
+
+            zEvents.forEach(function (event) {
+              if (event.canceled) return;
+              tl.set(event.el, { zIndex: event.z }, event.t);
+            });
+
+            // HOLD: completely still after the last landing bump.
+
+            // OUT: optional departure; exit none holds until the frame cuts.
+            if (exit === "fade") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "up") {
+              tl.to(
+                stage,
+                { opacity: 0, y: -0.07 * H, duration: OUT, ease: "power2.in" },
+                OUT_START,
+              );
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/stagger-cascade/demo.html b/docs/public/catalog/components/stagger-cascade/demo.html
new file mode 100644
index 0000000000..8f27819559
--- /dev/null
+++ b/docs/public/catalog/components/stagger-cascade/demo.html
@@ -0,0 +1,119 @@
+<!doctype html>
+<!--
+  stagger-cascade demo: standalone 1920x1080 host composition. It mounts the
+  primitive through data-composition-src into a definite card instead of
+  inlining primitive markup or motion. The non-default count, stagger, and
+  direction overrides prove that per-instance variables cross the mount.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Stagger Cascade Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+
+      #root {
+        --bg: #090d16;
+        --fg: #f4f7fb;
+        --muted: #8d99aa;
+        --surface: #171e2d;
+        --border: rgba(244, 247, 251, 0.14);
+        --brand: #79a8ff;
+        --accent: #8be0c4;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-body: Inter, system-ui, sans-serif;
+        --font-mono: ui-monospace, monospace;
+        --radius: 16px;
+        --space-1: 8px;
+        --space-2: 16px;
+        --space-3: 32px;
+        --dur-beat: 0.4s;
+        --ease-standard: cubic-bezier(0.215, 0.61, 0.355, 1);
+        --ease-emphasis: cubic-bezier(0.19, 1, 0.22, 1);
+        --ease-exit: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        display: grid;
+        place-items: center;
+        background: var(--bg);
+        color: var(--fg);
+        font-family: var(--font-body);
+      }
+
+      .mount-card {
+        width: 50%;
+        height: 60%;
+        left: 25%;
+        top: 20%;
+        overflow: hidden;
+        border: 1px solid var(--border);
+        border-radius: 28px;
+        background: var(--surface);
+        box-shadow: 0 40px 100px color-mix(in srgb, var(--fg) 12%, transparent);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="stagger-cascade-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="stagger-cascade-mount"
+        class="mount-card clip"
+        data-composition-id="stagger-cascade"
+        data-composition-src="./stagger-cascade.html"
+        data-variable-values='{"itemCount":8,"stagger":90,"direction":"left"}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="960"
+        data-height="648"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      // The mounted primitive owns all visible motion. This standalone host
+      // registers only the empty paused timeline required for its own id.
+      window.__timelines = window.__timelines || {};
+      window.__timelines["stagger-cascade-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "stagger-cascade.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/stagger-cascade/stagger-cascade.html b/docs/public/catalog/components/stagger-cascade/stagger-cascade.html
new file mode 100644
index 0000000000..7cc1280734
--- /dev/null
+++ b/docs/public/catalog/components/stagger-cascade/stagger-cascade.html
@@ -0,0 +1,258 @@
+<!doctype html>
+<!--
+  stagger-cascade: HyperFrames video primitive (effects / burst / exhibit)
+
+  Concept: a responsive grid of plain tile cards enters in DOM order with one
+  visible, evenly spaced GSAP stagger. Each tile fades from opacity 0 to 1 and
+  travels along the selected axis from a container-relative offset to rest.
+  One mechanic, one job: exhibit a group through a readable cascade.
+
+  Compiled-from evidence: production census (launches-motion-vocabulary.md),
+  where stagger cascades appear in 13 of 18 launches and observed steps center
+  around 0.04 to 0.08 seconds, with 0.14 to 0.18 seconds used for deliberate
+  item-by-item reveals.
+
+  Use when: a set of cards, features, rows, or related objects needs to arrive
+  as an ordered group without adding a competing hero motion.
+
+  Variables (declared in data-composition-variables below):
+    - itemCount (number, default 6, range 3 to 12): tiles in the grid.
+    - stagger (number, default 60, range 20 to 150 ms): delay per tile.
+    - direction (up | down | left | right, default up): travel direction into
+      the resting grid. Up starts below, left starts to the right, and so on.
+
+  Envelope (fixed IN/OUT, elastic HOLD only, never gsap.timeScale()):
+    IN_BASE  = 2.40s  cascade budget, including the slowest valid stagger.
+    HOLD     = elastic = max(0, D - (IN_BASE + OUT_BASE)); deliberately still
+               so the ordered entrance remains the only mechanic.
+    OUT_BASE = 0.40s  clean group fade using --ease-exit (power2.in).
+    If D < IN_BASE + OUT_BASE, IN and OUT scale down together so IN + OUT == D
+    and HOLD == 0. The stagger step scales only in that compressed envelope.
+
+  Sync point: none. The mechanic distributes arrivals across the IN phase, so
+  there is no single fixed cue that represents the cascade honestly.
+
+  Sound cue: none. A distributed cascade has no meaningful single-frame sound
+  event, so this primitive does not dispatch hf:sfx.
+
+  Mount contract: this file is a MOUNTABLE SUB-COMPOSITION. A host loads it via
+  data-composition-src, and the runtime clones only <template> contents. Styles,
+  markup, GSAP, and timeline registration therefore live inside <template>.
+  #root has position:absolute; inset:0; container-type:size and no data-width or
+  data-height, so the host owns the box. The composition id is hardcoded as
+  "stagger-cascade" because mount flattening strips it from the live root.
+  Variables come from window.__hyperframes.getVariables(), which supplies the
+  declared defaults merged with host data-variable-values overrides.
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "itemCount", "type": "number", "role": "layout", "label": "Item count", "description": "Number of tiles in the responsive grid.", "default": 6, "min": 3, "max": 12, "step": 1 },
+    { "id": "stagger", "type": "number", "role": "motion", "label": "Stagger", "description": "Delay between consecutive tile entrances.", "default": 60, "min": 20, "max": 150, "step": 1, "unit": "ms" },
+    { "id": "direction", "type": "enum", "role": "motion", "label": "Direction", "description": "Direction each tile travels into its resting position.", "default": "up", "options": [{ "value": "up", "label": "Up" }, { "value": "down", "label": "Down" }, { "value": "left", "label": "Left" }, { "value": "right", "label": "Right" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Stagger Cascade</title>
+    <!-- Metadata only. The mount loader reads variable declarations from
+         <html>, then discards everything outside <template>. -->
+  </head>
+  <body>
+    <template>
+      <div
+        id="root"
+        data-composition-id="stagger-cascade"
+        data-start="0"
+        data-duration="4"
+        data-fps="30"
+      >
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          /* Root fills the host box. Every internal measurement uses cqw/cqh,
+             and every painted color comes from the host theme contract. */
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            color: var(--fg);
+            font-family: var(--font-body);
+          }
+
+          .sc-clip {
+            width: 100%;
+            height: 100%;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+            background: var(--bg);
+          }
+
+          .sc-grid {
+            width: 82cqw;
+            height: 70cqh;
+            display: grid;
+            grid-template-columns: repeat(var(--sc-columns), minmax(0, 1fr));
+            grid-auto-rows: minmax(0, 1fr);
+            gap: min(2.2cqw, 3.8cqh);
+          }
+
+          .sc-tile {
+            position: relative;
+            min-width: 0;
+            min-height: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+            border: 0.16cqw solid var(--border);
+            border-radius: min(2.4cqw, 4cqh);
+            background: color-mix(in srgb, var(--surface) 92%, var(--brand));
+            color: var(--fg);
+          }
+
+          .sc-tile::after {
+            content: "";
+            position: absolute;
+            left: 14%;
+            right: 14%;
+            bottom: 12%;
+            height: min(0.55cqw, 0.95cqh);
+            border-radius: 50cqw;
+            background: var(--brand);
+            opacity: 0.72;
+          }
+
+          .sc-tile-index {
+            display: block;
+            font-family: var(--font-display);
+            font-size: min(5cqw, 8cqh);
+            font-weight: 700;
+            line-height: 1;
+            color: var(--fg);
+          }
+        </style>
+
+        <div
+          id="stagger-cascade-clip"
+          class="sc-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="sc-grid" aria-label="Cascading tile grid"></div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var compositionId = "stagger-cascade";
+            var grid = root.querySelector(".sc-grid");
+
+            // EDIT ZONE: declarations above and clamped reads below are the
+            // single source of truth for the primitive's three public knobs.
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var rawItemCount = Number(vars.itemCount);
+            var itemCount = Number.isFinite(rawItemCount) ? Math.round(rawItemCount) : 6;
+            itemCount = Math.max(3, Math.min(12, itemCount));
+
+            var rawStagger = Number(vars.stagger);
+            var staggerMs = Number.isFinite(rawStagger) ? rawStagger : 60;
+            staggerMs = Math.max(20, Math.min(150, staggerMs));
+
+            // INVARIANT: only these four mappings can reach GSAP. Each option
+            // has a distinct axis or sign at preview size.
+            var offsets = {
+              up: { x: "0cqw", y: "12cqh" },
+              down: { x: "0cqw", y: "-12cqh" },
+              left: { x: "8cqw", y: "0cqh" },
+              right: { x: "-8cqw", y: "0cqh" },
+            };
+            var offset = Object.prototype.hasOwnProperty.call(offsets, vars.direction)
+              ? offsets[vars.direction]
+              : offsets.up;
+
+            // itemCount owns both DOM count and the responsive grid shape.
+            var fragment = document.createDocumentFragment();
+            for (var index = 0; index < itemCount; index += 1) {
+              var tile = document.createElement("div");
+              var number = document.createElement("span");
+              tile.className = "sc-tile";
+              tile.setAttribute("aria-hidden", "true");
+              number.className = "sc-tile-index";
+              number.textContent = String(index + 1).padStart(2, "0");
+              tile.appendChild(number);
+              fragment.appendChild(tile);
+            }
+            grid.replaceChildren(fragment);
+            grid.style.setProperty(
+              "--sc-columns",
+              String(Math.min(4, Math.ceil(Math.sqrt(itemCount)))),
+            );
+
+            var tiles = root.querySelectorAll(".sc-tile");
+
+            // RETIME RANGE: change these four base values together. IN_BASE is
+            // sized so 12 items at 150ms plus the entrance tween finish exactly
+            // at its boundary. HOLD alone absorbs longer host durations.
+            var IN_BASE = 2.4;
+            var OUT_BASE = 0.4;
+            var CASCADE_START_BASE = 0.1;
+            var ENTRY_DURATION_BASE = 0.65;
+
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var totalBase = IN_BASE + OUT_BASE;
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var OUT_START = IN + HOLD;
+            var CASCADE_START = CASCADE_START_BASE * scale;
+            var ENTRY_DURATION = ENTRY_DURATION_BASE * scale;
+            var STAGGER_SECONDS = (staggerMs / 1000) * scale;
+
+            var timeline = gsap.timeline({ paused: true });
+
+            // IN: the sole mechanic. Explicit endpoints keep mounted re-seeks
+            // deterministic. power2.out is --ease-standard.
+            timeline.fromTo(
+              tiles,
+              { opacity: 0, x: offset.x, y: offset.y },
+              {
+                opacity: 1,
+                x: "0cqw",
+                y: "0cqh",
+                duration: ENTRY_DURATION,
+                ease: "power2.out",
+                stagger: { each: STAGGER_SECONDS, from: "start" },
+              },
+              CASCADE_START,
+            );
+
+            // HOLD: deliberately unanimated. OUT: one clean group fade with
+            // power2.in, the GSAP form of --ease-exit.
+            timeline.to(grid, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+
+            timeline.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = timeline;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/stagger-lattice/demo.html b/docs/public/catalog/components/stagger-lattice/demo.html
new file mode 100644
index 0000000000..1624a435bf
--- /dev/null
+++ b/docs/public/catalog/components/stagger-lattice/demo.html
@@ -0,0 +1,140 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Stagger Lattice - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f4f4f5;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-advanced-stagger-lattice {
+        --hf-accent: var(--accent, rgba(17, 24, 39, 0.72));
+        --hf-l1: rgba(17, 24, 39, 0.72);
+        --hf-l3: rgba(17, 24, 39, 0.18);
+        --hf-l4: rgba(17, 24, 39, 0.08);
+        --hf-hair: rgba(17, 24, 39, 0.14);
+        color: var(--hf-l1);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-advanced-stagger-lattice {
+        width: 720px;
+        min-height: 420px;
+        border-radius: 30px;
+        padding: 36px;
+        background: #fff;
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.16);
+        display: grid;
+        place-items: center;
+        /* ponytail: zoom scales the wrapper without touching GSAP transform targets (.cell) */
+        zoom: 1.7;
+      }
+      .hf-advanced-stagger-lattice .grid {
+        display: grid;
+        grid-template-columns: repeat(8, 46px);
+        gap: 10px;
+      }
+      .hf-advanced-stagger-lattice .cell {
+        width: 46px;
+        height: 46px;
+        border-radius: 14px;
+        background: var(--hf-l1);
+        transform: translateY(var(--hf-cell-y, 0px)) scale(var(--hf-cell-scale, 1));
+        opacity: var(--hf-cell-opacity, 1);
+      }
+      .hf-advanced-stagger-lattice svg {
+        width: 520px;
+        height: 220px;
+        overflow: visible;
+      }
+      .hf-advanced-stagger-lattice path {
+        fill: none;
+        stroke: var(--hf-accent);
+        stroke-width: 14;
+        stroke-linecap: round;
+        stroke-dasharray: 900;
+        stroke-dashoffset: var(--hf-dash, 0);
+      }
+      .hf-advanced-stagger-lattice .stack {
+        position: relative;
+        width: 520px;
+        height: 260px;
+      }
+      .hf-advanced-stagger-lattice .card {
+        position: absolute;
+        inset: 0;
+        border-radius: 26px;
+        background: linear-gradient(var(--hf-l4), var(--hf-l4)), #ffffff;
+        border: 1px solid var(--hf-hair);
+        box-shadow: 0 20px 54px rgba(15, 23, 42, 0.14);
+        transform: translateY(var(--hf-card-y, 0px)) scale(var(--hf-card-scale, 1));
+        opacity: var(--hf-card-opacity, 1);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="stagger-lattice-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="hf-advanced-stagger-lattice">
+        <div class="grid">
+          <span class="cell"></span><span class="cell"></span><span class="cell"></span
+          ><span class="cell"></span><span class="cell"></span><span class="cell"></span
+          ><span class="cell"></span><span class="cell"></span><span class="cell"></span
+          ><span class="cell"></span><span class="cell"></span><span class="cell"></span
+          ><span class="cell"></span><span class="cell"></span><span class="cell"></span
+          ><span class="cell"></span><span class="cell"></span><span class="cell"></span
+          ><span class="cell"></span><span class="cell"></span><span class="cell"></span
+          ><span class="cell"></span><span class="cell"></span><span class="cell"></span
+          ><span class="cell"></span><span class="cell"></span><span class="cell"></span
+          ><span class="cell"></span><span class="cell"></span><span class="cell"></span
+          ><span class="cell"></span><span class="cell"></span><span class="cell"></span
+          ><span class="cell"></span><span class="cell"></span><span class="cell"></span
+          ><span class="cell"></span><span class="cell"></span><span class="cell"></span
+          ><span class="cell"></span>
+        </div>
+      </div>
+    </div>
+    <script>
+      const tl = gsap.timeline({ paused: true });
+      const startTime = 0.5;
+      tl.fromTo(
+        ".hf-advanced-stagger-lattice .cell",
+        { "--hf-cell-y": "24px", "--hf-cell-scale": 0.72, "--hf-cell-opacity": 0 },
+        {
+          "--hf-cell-y": "0px",
+          "--hf-cell-scale": 1,
+          "--hf-cell-opacity": 1,
+          duration: 0.28,
+          stagger: { each: 0.018, from: "center", grid: [5, 8] },
+          ease: "power2.out",
+        },
+        startTime,
+      );
+      tl.set({}, {}, 5);
+      window.__timelines = window.__timelines || {};
+      window.__timelines["stagger-lattice-demo"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/stagger-lattice/stagger-lattice.html b/docs/public/catalog/components/stagger-lattice/stagger-lattice.html
new file mode 100644
index 0000000000..02fd7a1f6a
--- /dev/null
+++ b/docs/public/catalog/components/stagger-lattice/stagger-lattice.html
@@ -0,0 +1,95 @@
+<!--
+  Stagger Lattice - advanced HyperFrames primitive.
+
+  This is intentionally seekable: drive it from a paused GSAP timeline.
+  MotionPath examples require GSAP MotionPathPlugin. Three.js examples expose
+  a render(progress) adapter instead of a free-running requestAnimationFrame loop.
+-->
+
+<div class="hf-advanced-stagger-lattice">
+  <div class="grid">
+    <span class="cell"></span><span class="cell"></span><span class="cell"></span
+    ><span class="cell"></span><span class="cell"></span><span class="cell"></span
+    ><span class="cell"></span><span class="cell"></span><span class="cell"></span
+    ><span class="cell"></span><span class="cell"></span><span class="cell"></span
+    ><span class="cell"></span><span class="cell"></span><span class="cell"></span
+    ><span class="cell"></span><span class="cell"></span><span class="cell"></span
+    ><span class="cell"></span><span class="cell"></span><span class="cell"></span
+    ><span class="cell"></span><span class="cell"></span><span class="cell"></span
+    ><span class="cell"></span><span class="cell"></span><span class="cell"></span
+    ><span class="cell"></span><span class="cell"></span><span class="cell"></span
+    ><span class="cell"></span><span class="cell"></span><span class="cell"></span
+    ><span class="cell"></span><span class="cell"></span><span class="cell"></span
+    ><span class="cell"></span><span class="cell"></span><span class="cell"></span
+    ><span class="cell"></span>
+  </div>
+</div>
+
+<style>
+  .hf-advanced-stagger-lattice {
+    --hf-accent: var(--accent, rgba(17, 24, 39, 0.72));
+    --hf-l1: rgba(17, 24, 39, 0.72);
+    --hf-l3: rgba(17, 24, 39, 0.18);
+    --hf-l4: rgba(17, 24, 39, 0.08);
+    --hf-hair: rgba(17, 24, 39, 0.14);
+    color: var(--hf-l1);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-advanced-stagger-lattice {
+    width: 720px;
+    min-height: 420px;
+    border-radius: 30px;
+    padding: 36px;
+    background: #fff;
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.16);
+    display: grid;
+    place-items: center;
+  }
+  .hf-advanced-stagger-lattice .grid {
+    display: grid;
+    grid-template-columns: repeat(8, 46px);
+    gap: 10px;
+  }
+  .hf-advanced-stagger-lattice .cell {
+    width: 46px;
+    height: 46px;
+    border-radius: 14px;
+    background: var(--hf-l1);
+    transform: translateY(var(--hf-cell-y, 0px)) scale(var(--hf-cell-scale, 1));
+    opacity: var(--hf-cell-opacity, 1);
+  }
+  .hf-advanced-stagger-lattice svg {
+    width: 520px;
+    height: 220px;
+    overflow: visible;
+  }
+  .hf-advanced-stagger-lattice path {
+    fill: none;
+    stroke: var(--hf-accent);
+    stroke-width: 14;
+    stroke-linecap: round;
+    stroke-dasharray: 900;
+    stroke-dashoffset: var(--hf-dash, 0);
+  }
+  .hf-advanced-stagger-lattice .stack {
+    position: relative;
+    width: 520px;
+    height: 260px;
+  }
+  .hf-advanced-stagger-lattice .card {
+    position: absolute;
+    inset: 0;
+    border-radius: 26px;
+    background: linear-gradient(var(--hf-l4), var(--hf-l4)), #ffffff;
+    border: 1px solid var(--hf-hair);
+    box-shadow: 0 20px 54px rgba(15, 23, 42, 0.14);
+    transform: translateY(var(--hf-card-y, 0px)) scale(var(--hf-card-scale, 1));
+    opacity: var(--hf-card-opacity, 1);
+  }
+</style>
+
+<!--
+  Timeline integration:
+  const startTime = 0;
+  tl.fromTo('.hf-advanced-stagger-lattice .cell', { '--hf-cell-y': '24px', '--hf-cell-scale': 0.72, '--hf-cell-opacity': 0 }, { '--hf-cell-y': '0px', '--hf-cell-scale': 1, '--hf-cell-opacity': 1, duration: 0.28, stagger: { each: 0.018, from: 'center', grid: [5, 8] }, ease: 'power2.out' }, startTime);
+-->
diff --git a/docs/public/catalog/components/staggered-fade-up/__hf-variables-preview.html b/docs/public/catalog/components/staggered-fade-up/__hf-variables-preview.html
new file mode 100644
index 0000000000..2a2137accb
--- /dev/null
+++ b/docs/public/catalog/components/staggered-fade-up/__hf-variables-preview.html
@@ -0,0 +1,78 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Staggered Fade Up variables preview</title>
+    <style>
+      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: var(--bg, #f5f5f4); }
+      #hf-vars-root { position: relative; width: 1920px; height: 1080px; }
+      #hf-vars-mount { position: absolute; inset: 0; display: grid; place-items: center; }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  </head>
+  <body>
+    <div id="hf-vars-root" data-composition-id="staggered-fade-up-variables-preview" data-start="0" data-width="1920" data-height="1080" data-duration="5" data-fps="30">
+      <div id="hf-vars-mount" class="clip" data-composition-id="staggered-fade-up" data-composition-src="./staggered-fade-up.html" data-start="0" data-duration="5" data-track-index="0" data-width="1920" data-height="1080"></div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["staggered-fade-up-variables-preview"] = gsap.timeline({ paused: true });
+    </script>
+    <script>
+      (function () {
+        var mount = document.getElementById("hf-vars-mount");
+        // The mount is filled asynchronously, and the demo script selects
+        // what it fills it with, so it cannot run before then.
+        var observer = new MutationObserver(build);
+        observer.observe(mount, { childList: true, subtree: true });
+        build();
+        function build() {
+          if (!mount.firstElementChild) return;
+          observer.disconnect();
+
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.4;
+        tl.fromTo(
+          ".hf-remocn-staggered-fade-up span",
+          { opacity: 0, "--hf-word-y": "28px", "--hf-word-scale": 0.92, "--hf-word-blur": "6px" },
+          {
+            opacity: 1,
+            "--hf-word-y": "0px",
+            "--hf-word-scale": 1,
+            "--hf-word-blur": "0px",
+            duration: 0.4,
+            stagger: 0.18,
+            ease: "power3.out",
+          },
+          startTime,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["staggered-fade-up-demo"] = tl;
+          var child = window.__timelines["staggered-fade-up-demo"];
+          delete window.__timelines["staggered-fade-up-demo"];
+          if (!child || typeof child.paused !== "function") return;
+          child.paused(false);
+          window.__timelines["staggered-fade-up-variables-preview"].add(child, 0);
+        }
+      })();
+    </script>
+<script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "staggered-fade-up.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/staggered-fade-up/demo.html b/docs/public/catalog/components/staggered-fade-up/demo.html
new file mode 100644
index 0000000000..1f037719f9
--- /dev/null
+++ b/docs/public/catalog/components/staggered-fade-up/demo.html
@@ -0,0 +1,122 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Staggered Fade Up - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: var(--bg, #f5f5f4);
+        font-family: var(--font-body, Inter, system-ui, sans-serif);
+      }
+      /* ponytail: zoom on .demo-frame (not a GSAP target) to fill ~65% of frame */
+      .demo-frame {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 28px;
+        padding: 72px 96px;
+        zoom: 1.9;
+      }
+      .demo-label {
+        font-size: 13px;
+        font-weight: 500;
+        letter-spacing: 0.1em;
+        text-transform: uppercase;
+        color: var(--muted, #71717a);
+      }
+      .hf-remocn-staggered-fade-up {
+        color: var(--fg, #18181b);
+        font-family: var(--font-display, Inter, system-ui, sans-serif);
+        font-weight: 900;
+        letter-spacing: -0.04em;
+      }
+      .hf-remocn-staggered-fade-up {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 14px 18px;
+        font-size: 72px;
+        line-height: 1.05;
+        max-width: 680px;
+        justify-content: center;
+      }
+      .hf-remocn-staggered-fade-up span {
+        display: inline-block;
+        transform: translate(var(--hf-word-x, 0px), var(--hf-word-y, 0px))
+          scale(var(--hf-word-scale, 1));
+        filter: blur(var(--hf-word-blur, 0px));
+        will-change: transform, filter, opacity;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="staggered-fade-up-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="demo-label">staggered fade up</div>
+        <div class="hf-remocn-staggered-fade-up">
+          <span>Motion</span><span>that</span><span>tells</span><span>a</span><span>story</span
+          ><span>one</span><span>word</span><span>at</span><span>a</span><span>time</span>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.4;
+        tl.fromTo(
+          ".hf-remocn-staggered-fade-up span",
+          { opacity: 0, "--hf-word-y": "28px", "--hf-word-scale": 0.92, "--hf-word-blur": "6px" },
+          {
+            opacity: 1,
+            "--hf-word-y": "0px",
+            "--hf-word-scale": 1,
+            "--hf-word-blur": "0px",
+            duration: 0.4,
+            stagger: 0.18,
+            ease: "power3.out",
+          },
+          startTime,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["staggered-fade-up-demo"] = tl;
+      </script>
+    </div>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "staggered-fade-up.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/staggered-fade-up/staggered-fade-up.html b/docs/public/catalog/components/staggered-fade-up/staggered-fade-up.html
new file mode 100644
index 0000000000..0bfda1ff5b
--- /dev/null
+++ b/docs/public/catalog/components/staggered-fade-up/staggered-fade-up.html
@@ -0,0 +1,120 @@
+<!--
+  Staggered Fade Up - remocn typography primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Drive the timeline
+  integration from a paused GSAP timeline so renders remain deterministic.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result as a custom property
+  the CSS below consumes. The timeline recipe at the bottom is untouched by
+  them: it keeps driving one offset, one scale and one blur, and these decide
+  what that offset means on screen and what colour the words arrive in.
+
+    - direction (up | down | left | right, default up): where the offset the
+      timeline drives points. up rises into place, down drops in, left and
+      right slide in along the baseline.
+    - distance (close | standard | far, default standard): scales that offset,
+      so the words cover a shorter or longer run in the same time. close covers
+      half the run, far nearly double.
+    - tone (ink | paper | accent, default ink): word colour. ink is near-black
+      for light frames, paper near-white for dark ones, accent rides --brand.
+      It writes its own property and never touches the shared --fg token.
+    - words (text, default "Staggered fade up"): the words themselves, split on
+      spaces, one span and one stagger step each. Anything empty, blank or not
+      a string leaves the authored markup alone.
+
+  On every default the result is identical to the original: three near-black
+  words rise 22px through a 5px blur, 0.055s apart.
+-->
+
+<div
+  class="hf-remocn-staggered-fade-up"
+  data-composition-variables='[
+    { "id": "direction", "type": "enum", "role": "motion", "label": "Direction", "description": "Where the offset the timeline drives points.", "default": "up", "options": [{ "value": "up", "label": "Up" }, { "value": "down", "label": "Down" }, { "value": "left", "label": "Left" }, { "value": "right", "label": "Right" }] },
+    { "id": "distance", "type": "enum", "role": "motion", "label": "Distance", "description": "Scales the travel offset, so the words cover a shorter or longer run in the same time.", "default": "standard", "options": [{ "value": "close", "label": "Close" }, { "value": "standard", "label": "Standard" }, { "value": "far", "label": "Far" }] },
+    { "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Word colour: ink for light frames, paper for dark ones, accent rides --brand.", "default": "ink", "options": [{ "value": "ink", "label": "Ink" }, { "value": "paper", "label": "Paper" }, { "value": "accent", "label": "Accent" }] },
+    { "id": "words", "type": "string", "role": "content", "label": "Words", "description": "The words themselves, split on spaces, one span and one stagger step each.", "default": "Staggered fade up" }
+  ]'
+>
+  <span>Staggered</span><span>fade</span><span>up</span>
+</div>
+
+<style>
+  .hf-remocn-staggered-fade-up {
+    color: var(--hf-fade-word-color, var(--fg, #18181b));
+    font-family: var(--font-display, Inter, system-ui, sans-serif);
+    font-weight: 900;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-staggered-fade-up {
+    display: inline-flex;
+    gap: var(--space-1, 12px);
+    font-size: 56px;
+    line-height: 1;
+  }
+  .hf-remocn-staggered-fade-up span {
+    display: inline-block;
+    transform: translate(
+        calc(var(--hf-word-x, 0px) + var(--hf-word-y, 0px) * var(--hf-word-axis-x, 0)),
+        calc(var(--hf-word-y, 0px) * var(--hf-word-axis-y, 1))
+      )
+      scale(var(--hf-word-scale, 1));
+    filter: blur(var(--hf-word-blur, 0px));
+    will-change: transform, filter, opacity;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    var axes = {
+      up: { x: 0, y: 1 },
+      down: { x: 0, y: -1 },
+      left: { x: -1, y: 0 },
+      right: { x: 1, y: 0 },
+    };
+    var reaches = { close: 0.5, standard: 1, far: 1.85 };
+    var tones = {
+      ink: "var(--fg, #18181b)",
+      paper: "#fafafa",
+      accent: "var(--brand, #34d399)",
+    };
+
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var axis = axes[pick(axes, vars.direction, "up")];
+    var reach = reaches[pick(reaches, vars.distance, "standard")];
+    var tone = tones[pick(tones, vars.tone, "ink")];
+    var words =
+      typeof vars.words === "string" && vars.words.trim() ? vars.words.trim().split(/\s+/) : null;
+
+    var roots = document.querySelectorAll(".hf-remocn-staggered-fade-up");
+    for (var i = 0; i < roots.length; i += 1) {
+      roots[i].style.setProperty("--hf-word-axis-x", String(axis.x * reach));
+      roots[i].style.setProperty("--hf-word-axis-y", String(axis.y * reach));
+      roots[i].style.setProperty("--hf-fade-word-color", tone);
+      if (words) {
+        roots[i].textContent = "";
+        for (var j = 0; j < words.length; j += 1) {
+          var span = document.createElement("span");
+          span.textContent = words[j];
+          roots[i].appendChild(span);
+        }
+      }
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-staggered-fade-up span', { opacity: 0, '--hf-word-y': '22px', '--hf-word-scale': 0.92, '--hf-word-blur': '5px' }, { opacity: 1, '--hf-word-y': '0px', '--hf-word-scale': 1, '--hf-word-blur': '0px', duration: 0.3, stagger: 0.055, ease: 'power3.out' }, startTime);
+-->
diff --git a/docs/public/catalog/components/star-rating-fill/demo.html b/docs/public/catalog/components/star-rating-fill/demo.html
new file mode 100644
index 0000000000..6013808553
--- /dev/null
+++ b/docs/public/catalog/components/star-rating-fill/demo.html
@@ -0,0 +1,115 @@
+<!doctype html>
+<!--
+  star-rating-fill demo: standalone 1920x1080 host composition. It mounts the
+  primitive through data-composition-src into a definite card and supplies a
+  fractional target so snapshots prove the partial final star.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Star Rating Fill Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+
+      #root {
+        --bg: #090d16;
+        --fg: #f4f7fb;
+        --muted: #8491a3;
+        --surface: #1a2230;
+        --border: rgba(244, 247, 251, 0.14);
+        --brand: #ffc83d;
+        --accent: #79a8ff;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-body: Inter, system-ui, sans-serif;
+        --font-mono: ui-monospace, monospace;
+        --radius: 3cqh;
+        --space-1: 1cqh;
+        --space-2: 2cqh;
+        --space-3: 3cqh;
+        --dur-beat: 0.4s;
+        --ease-standard: cubic-bezier(0.215, 0.61, 0.355, 1);
+        --ease-emphasis: cubic-bezier(0.19, 1, 0.22, 1);
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        display: grid;
+        place-items: center;
+        background: var(--bg);
+        color: var(--fg);
+        font-family: var(--font-body);
+      }
+
+      .mount-card {
+        width: 58%;
+        height: 42%;
+        left: 21%;
+        top: 29%;
+        overflow: hidden;
+        border: 0.14cqh solid var(--border);
+        border-radius: var(--radius);
+        background: var(--surface);
+        box-shadow: 0 4cqh 10cqh color-mix(in srgb, var(--fg) 12%, transparent);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="star-rating-fill-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="star-rating-fill-mount"
+        class="mount-card clip"
+        data-composition-id="star-rating-fill"
+        data-composition-src="./star-rating-fill.html"
+        data-variable-values='{"rating":4.8,"starCount":5,"showValue":"yes"}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="1114"
+        data-height="454"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["star-rating-fill-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "star-rating-fill.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/star-rating-fill/star-rating-fill.html b/docs/public/catalog/components/star-rating-fill/star-rating-fill.html
new file mode 100644
index 0000000000..1f2ace7b05
--- /dev/null
+++ b/docs/public/catalog/components/star-rating-fill/star-rating-fill.html
@@ -0,0 +1,298 @@
+<!doctype html>
+<!--
+  star-rating-fill: HyperFrames video primitive (data / holdable / prove)
+
+  Concept: one token-colored star layer is clipped over a muted copy. A
+  single left-to-right clip-path sweep resolves at the target rating, so a
+  fractional value leaves the final filled star visibly partial. Small
+  per-star pops follow the same sweep and support the one fill mechanic.
+
+  Compiled-from evidence: GAP A2+B1 convergent miss, rules
+  stat-bars-and-fills. That evidence specifies a gray star layer, a colored
+  overlay, and a fractional clip wipe as the deterministic seek handle.
+
+  Use when: proving app-store credibility, customer satisfaction, review
+  quality, or any scored result that needs to read in one glance.
+
+  Variables:
+    rating    number  0 to 5  default 4.8  target rating in star units
+    starCount number          default 5    visible stars, clamped 1 to 10
+    showValue yes | no        default yes  show the synchronized count-up
+
+  Envelope:
+    IN   1.50s fixed sweep, count, and per-star pop, power2.out
+    HOLD elastic and deliberately still so the proof remains readable
+    OUT  0.40s fixed opacity release, power2.in
+    For durations shorter than 1.90s, IN and OUT scale together. HOLD is the
+    only elastic phase, and the timeline is never time-scaled.
+
+  Sync point: fill-settled at 1.30s into IN. It is fixed outside HOLD.
+
+  Sound cues: none. The result should not imply an audio event for its host.
+
+  Mount contract: this file is a template-wrapped sub-composition. The host
+  owns dimensions. #root fills that box with inset:0, uses container queries,
+  and has no data-width or data-height. The hardcoded composition id matches
+  the root and timeline key. Variables come from getVariables().
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "rating", "type": "number", "role": "content", "label": "Rating", "description": "Target rating in star units from 0 to 5.", "default": 4.8, "min": 0, "max": 5, "step": 0.1 },
+    { "id": "starCount", "type": "number", "role": "layout", "label": "Star count", "description": "Number of stars shown in the row.", "default": 5, "min": 1, "max": 10, "step": 1 },
+    { "id": "showValue", "type": "enum", "role": "content", "label": "Show value", "description": "Show or hide the synchronized numeric rating.", "default": "yes", "options": [{ "value": "yes", "label": "Yes" }, { "value": "no", "label": "No" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Star Rating Fill</title>
+  </head>
+  <body>
+    <template>
+      <div
+        id="root"
+        data-composition-id="star-rating-fill"
+        data-start="0"
+        data-duration="4"
+        data-fps="30"
+      >
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          /* INVARIANT: #root owns only the mount boundary. The host owns the
+             box, while all internal geometry stays container-relative. */
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            color: var(--fg, CanvasText);
+            font-family: var(--font-display, system-ui);
+          }
+
+          .srf-clip {
+            width: 100%;
+            height: 100%;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .srf-stage {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: var(--space-2, 3cqw);
+          }
+
+          /* EDIT ZONE: the row owns only its responsive presentation size.
+             --srf-count is supplied by the clamped public starCount value. */
+          .srf-stars {
+            --srf-count: 5;
+            position: relative;
+            width: min(68cqw, calc(72cqh * var(--srf-count)));
+          }
+
+          .srf-layer {
+            width: 100%;
+            display: flex;
+            align-items: center;
+          }
+
+          .srf-base {
+            color: color-mix(in srgb, var(--muted, currentColor) 68%, var(--surface, transparent));
+          }
+
+          .srf-fill {
+            position: absolute;
+            inset: 0;
+            color: var(--brand, currentColor);
+            clip-path: inset(0 100% 0 0);
+          }
+
+          .srf-star-cell {
+            display: block;
+            flex: 1 1 0;
+            min-width: 0;
+            aspect-ratio: 1;
+            transform-origin: center;
+          }
+
+          .srf-star-cell svg {
+            display: block;
+            width: 100%;
+            height: 100%;
+            overflow: visible;
+            fill: currentColor;
+          }
+
+          .srf-value {
+            min-width: 2.2em;
+            color: var(--fg, currentColor);
+            font-size: min(9cqw, 16cqh);
+            font-weight: 720;
+            font-variant-numeric: tabular-nums;
+            letter-spacing: -0.04em;
+            line-height: 1;
+            text-align: right;
+          }
+        </style>
+
+        <div
+          id="star-rating-fill-clip"
+          class="srf-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="srf-stage">
+            <div class="srf-stars" role="img" aria-label="0 out of 5 stars">
+              <div class="srf-layer srf-base" aria-hidden="true"></div>
+              <div class="srf-layer srf-fill" aria-hidden="true"></div>
+            </div>
+            <div class="srf-value" aria-hidden="true">0.0</div>
+          </div>
+        </div>
+
+        <template id="star-rating-fill-star-template">
+          <span class="srf-star-cell">
+            <svg viewBox="0 0 100 100" aria-hidden="true" focusable="false">
+              <path
+                d="M50 0 61.8 36.2 100 36.2 69.1 58.6 80.9 95 50 72.4 19.1 95 30.9 58.6 0 36.2 38.2 36.2Z"
+              />
+            </svg>
+          </span>
+        </template>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".srf-stage");
+            var stars = root.querySelector(".srf-stars");
+            var baseLayer = root.querySelector(".srf-base");
+            var fillLayer = root.querySelector(".srf-fill");
+            var valueElement = root.querySelector(".srf-value");
+            var starTemplate = root.querySelector("#star-rating-fill-star-template");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            /* INVARIANT: zero is a valid rating. Missing values and zero are
+               handled separately, then every public number is clamped once. */
+            var ratingValue = vars.rating == null || vars.rating === "" ? NaN : Number(vars.rating);
+            var requestedRating = Number.isFinite(ratingValue)
+              ? Math.max(0, Math.min(5, ratingValue))
+              : 4.8;
+            var starCountValue =
+              vars.starCount == null || vars.starCount === "" ? NaN : Number(vars.starCount);
+            var starCount = Number.isFinite(starCountValue) ? Math.round(starCountValue) : 5;
+            starCount = Math.max(1, Math.min(10, starCount));
+            var rating = Math.min(requestedRating, starCount);
+            var showValue = vars.showValue === "no" ? "no" : "yes";
+            var fillPercent = (rating / starCount) * 100;
+
+            stars.style.setProperty("--srf-count", String(starCount));
+            stars.setAttribute("aria-label", rating.toFixed(1) + " out of " + starCount + " stars");
+            valueElement.hidden = showValue === "no";
+
+            /* The template is the single owner of star geometry. Both paint
+               layers clone it so their silhouettes cannot drift. */
+            var baseFragment = document.createDocumentFragment();
+            var fillFragment = document.createDocumentFragment();
+            for (var index = 0; index < starCount; index += 1) {
+              baseFragment.appendChild(starTemplate.content.firstElementChild.cloneNode(true));
+              fillFragment.appendChild(starTemplate.content.firstElementChild.cloneNode(true));
+            }
+            baseLayer.replaceChildren(baseFragment);
+            fillLayer.replaceChildren(fillFragment);
+
+            var baseCells = baseLayer.querySelectorAll(".srf-star-cell");
+            var fillCells = fillLayer.querySelectorAll(".srf-star-cell");
+            var valueState = { current: 0 };
+
+            /* RETIME RANGE: these values own the full lifecycle. The sweep
+               uses --ease-standard's GSAP owner, power2.out. */
+            var IN_BASE = 1.5;
+            var OUT_BASE = 0.4;
+            var FILL_START_BASE = 0.2;
+            var FILL_DURATION_BASE = 1.1;
+            var POP_DURATION_BASE = 0.2;
+            var durationValue = Number(root.dataset.duration);
+            var duration = Number.isFinite(durationValue) && durationValue > 0 ? durationValue : 4;
+            var scale = duration < IN_BASE + OUT_BASE ? duration / (IN_BASE + OUT_BASE) : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var OUT_START = IN + HOLD;
+            var FILL_START = FILL_START_BASE * scale;
+            var FILL_DURATION = FILL_DURATION_BASE * scale;
+            var POP_DURATION = POP_DURATION_BASE * scale;
+
+            var timeline = gsap.timeline({ paused: true });
+
+            timeline.fromTo(
+              fillLayer,
+              { clipPath: "inset(0 100% 0 0)" },
+              {
+                clipPath: "inset(0 " + (100 - fillPercent) + "% 0 0)",
+                duration: FILL_DURATION,
+                ease: "power2.out",
+              },
+              FILL_START,
+            );
+
+            if (showValue === "yes") {
+              timeline.to(
+                valueState,
+                {
+                  current: rating,
+                  duration: FILL_DURATION,
+                  ease: "power2.out",
+                  onUpdate: function () {
+                    valueElement.textContent = valueState.current.toFixed(1);
+                  },
+                },
+                FILL_START,
+              );
+            }
+
+            /* Per-star pops are subordinate to the sweep and occur in the
+               same left-to-right order. They never change the fill endpoint. */
+            var popCount = Math.ceil(rating);
+            for (var popIndex = 0; popIndex < popCount; popIndex += 1) {
+              var popAt = FILL_START + FILL_DURATION * (popIndex / Math.max(1, rating)) * 0.82;
+              var popTargets = [baseCells[popIndex], fillCells[popIndex]];
+              timeline.to(
+                popTargets,
+                { scale: 1.06, duration: POP_DURATION * 0.45, ease: "power2.out" },
+                popAt,
+              );
+              timeline.to(
+                popTargets,
+                { scale: 1, duration: POP_DURATION * 0.55, ease: "power2.out" },
+                popAt + POP_DURATION * 0.45,
+              );
+            }
+
+            timeline.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+
+            timeline.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines["star-rating-fill"] = timeline;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/state-chip-rail/README.md b/docs/public/catalog/components/state-chip-rail/README.md
new file mode 100644
index 0000000000..19acbc6db7
--- /dev/null
+++ b/docs/public/catalog/components/state-chip-rail/README.md
@@ -0,0 +1,55 @@
+# state-chip-rail
+
+Product-demo primitive: a rail of mono status chips advances a data-state
+snap machine on a cue schedule. Presentation is pure CSS on each chip's
+`[data-state]`; the timeline only flips attributes with `tl.set`, so every
+advance is an instantaneous snap that is exact in both seek directions. The
+active chip is ink on surface, done chips dim, pending chips stay hollow.
+Optional badges pop beside one named state when it activates. Generalizes the
+flagship agent-console status rail (cohere-north frame 04).
+
+Authored at 5s with an elastic HOLD: chips cascade in, the machine advances
+on its schedule, and everything after the last advance is still frame until
+the (optional) exit.
+
+## Variables
+
+| id            | type                               | default                        | notes                                                                                                                                                                                                                              |
+| ------------- | ---------------------------------- | ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `states`      | string                             | `Queued,Reading,Drafting,Done` | Comma list of chip labels in machine order. 2 to 8 states; extras are dropped. State 0 is active from mount.                                                                                                                       |
+| `times`       | string                             | `""`                           | Comma-separated activation times in seconds relative to mount start, one per ADVANCE (state 1, state 2, ...). Blank or invalid entries use the default even rhythm; values are clamped into the mount window and forced monotonic. |
+| `badge_state` | number 0-7                         | `1`                            | Index of the state the badges pop beside. Clamped to the states range.                                                                                                                                                             |
+| `badges`      | string                             | `""`                           | Comma list of badge labels rendered after the `badge_state` chip; they pop in (staggered scale + fade) when that state activates. Empty disables. Up to 4.                                                                         |
+| `accent`      | enum `green` \| `blue` \| `violet` | `green`                        | Active-chip accent: green rides `--brand`, blue `--accent`, violet `--accent-2`.                                                                                                                                                   |
+| `exit`        | enum `none` \| `fade` \| `up`      | `none`                         | Frame roots own transitions; the default hold ends the film.                                                                                                                                                                       |
+
+## Usage
+
+```html
+<div
+  class="clip"
+  data-composition-id="state-chip-rail"
+  data-composition-src="./components/state-chip-rail.html"
+  data-variable-values='{"states":"Queued,Reading,Searching,Drafting,Done","times":"1.0,1.9,2.8,3.7","badges":"Drive,Mail,CRM","badge_state":2,"accent":"blue"}'
+  data-start="0"
+  data-duration="5"
+  data-track-index="0"
+></div>
+```
+
+Elastic root: no `data-width`/`data-height`; the rail centers and fits itself
+to whatever box the host clip gives it. Timeline registers under the literal
+`state-chip-rail` key.
+
+## Notes
+
+- Seek-safe snap machine: `tl.set` attribute flips record the prior value on
+  first render in timeline order, so backward seeks restore
+  `pending` / `active` exactly (the flagship frame 04 pattern).
+- State dimming rides color (`color-mix`), never opacity, so it cannot
+  collide with the entrance opacity tweens.
+- Badges keep their layout slot from mount (held at scale 0), so the rail
+  never reflows when they pop.
+
+Golden refs: scramble-reveal (token consumption), toggle-flip (mount-contract
+structure).
diff --git a/docs/public/catalog/components/state-chip-rail/demo.html b/docs/public/catalog/components/state-chip-rail/demo.html
new file mode 100644
index 0000000000..0420f81716
--- /dev/null
+++ b/docs/public/catalog/components/state-chip-rail/demo.html
@@ -0,0 +1,108 @@
+<!doctype html>
+<!--
+  state-chip-rail demo. This standalone composition mounts the primitive
+  through data-composition-src. Non-default states, times, badges, and accent
+  values prove the variable path while the primitive remains elastic to its
+  host.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>state-chip-rail Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #0b0c0e);
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --surface: #14171c;
+        --border: #343a46;
+        --brand: #71f5a7;
+        --accent: #61a8ff;
+        --accent-2: #c5a3ff;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(
+          ellipse at 50% 44%,
+          var(--bg, #171a20) 0%,
+          var(--bg, #0b0c0e) 72%
+        );
+      }
+
+      .mount-card {
+        width: 80%;
+        height: 30%;
+        left: 10%;
+        top: 35%;
+        container-type: size;
+        overflow: hidden;
+        border: 1px solid color-mix(in srgb, var(--border, #94a3b8) 20%, transparent);
+        border-radius: 30px;
+        background: color-mix(in srgb, var(--surface, #101318) 72%, transparent);
+        box-shadow: 0 40px 100px color-mix(in srgb, var(--bg, #000000) 48%, transparent);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="state-chip-rail-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+      data-fps="30"
+    >
+      <div
+        id="state-chip-rail-mount"
+        class="mount-card clip"
+        data-composition-id="state-chip-rail"
+        data-composition-src="./state-chip-rail.html"
+        data-variable-values='{"states":"Queued,Reading,Searching,Drafting,Done","times":"1.0,1.9,2.8,3.7","badges":"Drive,Mail,CRM","badge_state":2,"accent":"blue"}'
+        data-start="0"
+        data-duration="5"
+        data-track-index="0"
+        data-width="1536"
+        data-height="324"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["state-chip-rail-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "state-chip-rail.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/state-chip-rail/state-chip-rail.html b/docs/public/catalog/components/state-chip-rail/state-chip-rail.html
new file mode 100644
index 0000000000..bf48003f87
--- /dev/null
+++ b/docs/public/catalog/components/state-chip-rail/state-chip-rail.html
@@ -0,0 +1,363 @@
+<!doctype html>
+<!--
+  state-chip-rail: HyperFrames video primitive (product demo / state machine)
+
+  A rail of mono status chips advances a data-state snap machine on a cue
+  schedule. CSS alone responds to each chip's [data-state]; the timeline only
+  flips attributes with tl.set, so every advance is an instantaneous snap that
+  is exact in both seek directions (GSAP zero-duration sets record the prior
+  attribute value and restore it on backward seeks). The active chip is ink on
+  surface, done chips dim, pending chips stay hollow. Optional badges pop
+  beside one named state when it activates. Generalizes the flagship
+  agent-console status rail (cohere-north frame 04).
+
+  Variables (declared in data-composition-variables below):
+    - states (string, default "Queued,Reading,Drafting,Done"): comma list of
+      chip labels, in machine order. 2 to 8 states; extras are dropped.
+    - times (string, default ""): comma-separated activation times in seconds
+      relative to mount start, one per ADVANCE (state 1, state 2, ...).
+      Blank or invalid entries use the default even rhythm. Values are
+      clamped into the mount window and forced monotonic.
+    - badge_state (number, default 1): index of the state the badges pop
+      beside. Clamped to the states range.
+    - badges (string, default ""): comma list of badge labels rendered after
+      the badge_state chip; they pop in when that state activates. Empty
+      disables badges. Up to 4.
+    - accent (green | blue | violet, default green): active-chip accent.
+      green -> --brand, blue -> --accent, violet -> --accent-2.
+    - exit ("none" | "fade" | "up", default "none"): frame roots own
+      transitions; the default hold-ends-the-film.
+
+  Envelope, fixed IN with elastic HOLD (never gsap.timeScale()):
+    IN    = chip cascade (~0.8s) then the advance schedule; the default
+            rhythm spreads advances so the final state lands ~1s before the
+            mount window closes.
+    HOLD  = still after the last advance; nothing floats, nothing loops.
+    OUT   = 0 when exit is "none"; else 0.45s fade / fade-up of the rail.
+
+  Mount contract: elastic root, no data-width/data-height, styled via #root
+  only, container-type: size, one paused timeline registered under the
+  literal "state-chip-rail" key. Deterministic and seek-safe: fromTo
+  entrances, attribute snaps via tl.set, no CSS transitions, no Date.now,
+  no randomness. State dimming rides color (color-mix), never opacity, so it
+  can never collide with the entrance opacity tweens.
+-->
+<html
+  lang="en"
+  data-composition-id="state-chip-rail"
+  data-composition-duration="5"
+  data-composition-variables='[
+    { "id": "states", "type": "string", "role": "content", "label": "States", "description": "Comma-separated chip labels in machine order (2 to 8 states).", "default": "Queued,Reading,Drafting,Done" },
+    { "id": "times", "type": "string", "role": "timing", "label": "Times", "description": "Comma-separated activation times in seconds, one per advance (state 1 onward). Blank entries use the default even rhythm.", "default": "" },
+    { "id": "badge_state", "type": "number", "role": "content", "label": "Badge state", "description": "Index of the state the badges pop beside.", "default": 1, "min": 0, "max": 7, "step": 1 },
+    { "id": "badges", "type": "string", "role": "content", "label": "Badges", "description": "Comma-separated badge labels shown beside the badge state. Empty disables.", "default": "" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Accent token family used by the active chip.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "How the rail leaves the frame. Default none: the hold ends the film.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>State Chip Rail</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="state-chip-rail" data-duration="5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            background: var(--bg, transparent);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            pointer-events: none;
+          }
+
+          .scr-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+          }
+
+          .scr-rail {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-wrap: nowrap;
+            max-width: 94cqw;
+            gap: var(--scr-gap, 0.8em);
+            font-size: var(--scr-font, 2cqmin);
+            will-change: transform, opacity;
+          }
+
+          .scr-chip,
+          .scr-badge {
+            display: flex;
+            flex: 0 0 auto;
+            align-items: center;
+            gap: 0.55em;
+            padding: 0.62em 1.05em;
+            overflow: hidden;
+            border: 0.16cqmin solid var(--border, #334155);
+            border-radius: 100cqmax;
+            font-weight: 500;
+            line-height: 1;
+            letter-spacing: 0.14em;
+            text-transform: uppercase;
+            white-space: nowrap;
+            will-change: transform, opacity;
+          }
+
+          .scr-dot {
+            flex: 0 0 auto;
+            width: 0.5em;
+            aspect-ratio: 1;
+            border: 0.16cqmin solid var(--muted, #94a3b8);
+            border-radius: 50%;
+            background: transparent;
+          }
+
+          /* The snap machine: presentation is pure CSS on [data-state]; the
+             timeline only flips the attribute. Dimming rides color, never
+             opacity, so it cannot fight the entrance opacity tweens. */
+          .scr-chip[data-state="pending"] {
+            border-color: color-mix(in srgb, var(--border, #334155) 80%, transparent);
+            background: transparent;
+            color: color-mix(in srgb, var(--muted, #94a3b8) 78%, transparent);
+          }
+
+          .scr-chip[data-state="active"] {
+            border-color: color-mix(in srgb, var(--scr-accent) 62%, var(--border, #334155));
+            background: var(--surface, #131a24);
+            color: var(--fg, #f8fafc);
+          }
+          .scr-chip[data-state="active"] .scr-dot {
+            border-color: transparent;
+            background: var(--scr-accent, var(--brand, #71f5a7));
+          }
+
+          .scr-chip[data-state="done"] {
+            border-color: color-mix(in srgb, var(--border, #334155) 45%, transparent);
+            background: transparent;
+            color: color-mix(in srgb, var(--muted, #94a3b8) 42%, transparent);
+          }
+          .scr-chip[data-state="done"] .scr-dot {
+            border-color: transparent;
+            background: color-mix(in srgb, var(--scr-accent, #71f5a7) 38%, transparent);
+          }
+
+          .scr-badge {
+            padding: 0.5em 0.9em;
+            border-color: color-mix(in srgb, var(--border, #334155) 70%, transparent);
+            color: color-mix(in srgb, var(--muted, #94a3b8) 88%, transparent);
+            font-size: 0.82em;
+          }
+        </style>
+
+        <div
+          id="state-chip-rail-clip"
+          class="scr-clip clip"
+          data-start="0"
+          data-duration="5"
+          data-track-index="0"
+        >
+          <div class="scr-rail" role="list"></div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            // Literal id, never read off the DOM: the flattening step strips
+            // data-composition-id from the mounted root (see toggle-flip).
+            var compositionId = "state-chip-rail";
+            var root = document.getElementById("root");
+            var rail = root.querySelector(".scr-rail");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            function commaList(value, max) {
+              return String(value == null ? "" : value)
+                .split(",")
+                .map(function (token) {
+                  return token.trim();
+                })
+                .filter(function (token) {
+                  return token !== "";
+                })
+                .slice(0, max);
+            }
+
+            var states = commaList(vars.states, 8);
+            if (states.length === 0) states = ["Queued", "Reading", "Drafting", "Done"];
+            var count = states.length;
+
+            var badges = commaList(vars.badges, 4);
+            var badgeStateRaw = Math.round(Number(vars.badge_state));
+            var badgeState = Number.isFinite(badgeStateRaw)
+              ? Math.max(0, Math.min(count - 1, badgeStateRaw))
+              : Math.min(1, count - 1);
+
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            root.style.setProperty("--scr-accent", accentColors[accent]);
+
+            // Build the rail: chips in machine order, badges directly after
+            // the badge_state chip. State 0 is active from mount.
+            var chips = states.map(function (label, index) {
+              var chip = document.createElement("div");
+              chip.className = "scr-chip";
+              chip.setAttribute("role", "listitem");
+              chip.setAttribute("data-state", index === 0 ? "active" : "pending");
+              var dot = document.createElement("span");
+              dot.className = "scr-dot";
+              dot.setAttribute("aria-hidden", "true");
+              var text = document.createElement("span");
+              text.textContent = label;
+              chip.appendChild(dot);
+              chip.appendChild(text);
+              return chip;
+            });
+            var badgeElements = badges.map(function (label) {
+              var badge = document.createElement("div");
+              badge.className = "scr-badge";
+              badge.textContent = label;
+              return badge;
+            });
+            chips.forEach(function (chip, index) {
+              rail.appendChild(chip);
+              if (index === badgeState) {
+                badgeElements.forEach(function (badge) {
+                  rail.appendChild(badge);
+                });
+              }
+            });
+            rail.setAttribute("aria-label", states.join(", "));
+
+            // Deterministic fit: wide-tracked mono at ~0.76em per glyph, plus
+            // chip padding, dot, and rail gaps, all measured in em.
+            var railEm = (count - 1 + badges.length) * 0.8;
+            states.forEach(function (label) {
+              railEm += Array.from(label).length * 0.76 + 3.1;
+            });
+            badges.forEach(function (label) {
+              railEm += (Array.from(label).length * 0.76 + 2.5) * 0.82;
+            });
+            var fontCqw = Math.min(2.4, 90 / Math.max(1, railEm));
+            root.style.setProperty("--scr-font", "min(" + fontCqw.toFixed(3) + "cqw, 9cqh)");
+
+            // RETIME RANGE: fixed IN cascade + advance schedule, elastic
+            // still HOLD, optional OUT.
+            var OUT_BASE = 0.45;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "5"));
+            var OUT = exit === "none" ? 0 : Math.min(OUT_BASE, duration * 0.2);
+            var avail = duration - OUT;
+
+            var CHIP = Math.min(0.45, Math.max(0.2, avail * 0.15));
+            var entryGap = Math.min(0.08, Math.max(0.02, avail * 0.02));
+            var entryEnd = 0.12 + entryGap * (count - 1) + CHIP;
+
+            // Default rhythm: advances spread evenly from just after the
+            // cascade to ~1s before the window closes.
+            var firstAdvance = Math.min(Math.max(entryEnd + 0.15, 0.9), Math.max(0.2, avail - 0.6));
+            var lastAdvance = Math.max(firstAdvance, avail - 1.0);
+            var advanceCount = count - 1;
+            var timesList = String(vars.times == null ? "" : vars.times).split(",");
+            var previous = 0.15;
+            var advances = [];
+            for (var k = 0; k < advanceCount; k += 1) {
+              var fallback =
+                advanceCount > 1
+                  ? firstAdvance + (k * (lastAdvance - firstAdvance)) / (advanceCount - 1)
+                  : firstAdvance;
+              var cueText = (timesList[k] || "").trim();
+              var cue = Number(cueText);
+              var start = cueText !== "" && Number.isFinite(cue) ? cue : fallback;
+              start = Math.max(0.15, Math.min(start, Math.max(0.15, avail - 0.45)));
+              start = Math.max(start, previous + 0.05);
+              previous = start;
+              advances.push(start);
+            }
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: chips cascade into the rail. Explicit both-endpoints state
+            // so any seek is exact. Badges hold at scale 0 until their pop
+            // (they keep their layout slot, so the rail never reflows).
+            chips.forEach(function (chip, index) {
+              gsap.set(chip, { opacity: 0, y: "2.5cqh" });
+              tl.fromTo(
+                chip,
+                { opacity: 0, y: "2.5cqh" },
+                { opacity: 1, y: "0cqh", duration: CHIP, ease: "power3.out" },
+                0.12 + entryGap * index,
+              );
+            });
+
+            // The snap machine: pure attribute flips. GSAP records the prior
+            // value on first render in timeline order, so backward seeks
+            // restore pending / active exactly.
+            advances.forEach(function (start, index) {
+              var stateIndex = index + 1;
+              tl.set(chips[stateIndex], { attr: { "data-state": "active" } }, start);
+              tl.set(chips[stateIndex - 1], { attr: { "data-state": "done" } }, start);
+            });
+
+            // Badges pop beside their state as it activates.
+            if (badgeElements.length > 0) {
+              var popStart = badgeState === 0 ? entryEnd + 0.1 : advances[badgeState - 1] + 0.12;
+              popStart = Math.min(popStart, Math.max(0.2, avail - 0.4));
+              badgeElements.forEach(function (badge, index) {
+                gsap.set(badge, { opacity: 0, scale: 0 });
+                tl.fromTo(
+                  badge,
+                  { opacity: 0, scale: 0 },
+                  { opacity: 1, scale: 1, duration: 0.4, ease: "power3.out" },
+                  popStart + 0.14 * index,
+                );
+              });
+            }
+
+            // HOLD: intentionally still. The resolved machine reads as a frame.
+
+            // OUT: the whole rail leaves together.
+            if (exit !== "none") {
+              var OUT_START = duration - OUT;
+              tl.to(rail, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+              if (exit === "up") {
+                tl.to(rail, { y: "-3cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              }
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/sticky-mock-swap/demo.html b/docs/public/catalog/components/sticky-mock-swap/demo.html
new file mode 100644
index 0000000000..171a5723ed
--- /dev/null
+++ b/docs/public/catalog/components/sticky-mock-swap/demo.html
@@ -0,0 +1,102 @@
+<!doctype html>
+<!--
+  sticky-mock-swap demo. This standalone composition mounts the primitive
+  with four non-default captions and a green accent, proving that variable
+  parsing and caption-count-driven phase thresholds flow through the mount.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Sticky Mock Swap Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0b0c0e;
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --muted: #9ca3af;
+        --surface: #151922;
+        --border: #3b4352;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-body: Inter, system-ui, sans-serif;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 38% 42%, #18211f 0%, #0b0c0e 68%);
+      }
+
+      .mount-card {
+        width: 84%;
+        height: 76%;
+        left: 8%;
+        top: 12%;
+        container-type: size;
+        overflow: hidden;
+        border: 1px solid rgba(148, 163, 184, 0.2);
+        border-radius: 30px;
+        background: var(--bg);
+        box-shadow: 0 44px 120px rgba(0, 0, 0, 0.5);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="sticky-mock-swap-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="6"
+      data-fps="30"
+    >
+      <div
+        id="sticky-mock-swap-mount"
+        class="mount-card clip"
+        data-composition-id="sticky-mock-swap"
+        data-composition-src="./sticky-mock-swap.html"
+        data-variable-values='{"captions":"Draft instantly,Review together,Publish safely,Measure impact","accent":"green"}'
+        data-start="0"
+        data-duration="6"
+        data-track-index="0"
+        data-width="1613"
+        data-height="821"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["sticky-mock-swap-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "sticky-mock-swap.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/sticky-mock-swap/sticky-mock-swap.html b/docs/public/catalog/components/sticky-mock-swap/sticky-mock-swap.html
new file mode 100644
index 0000000000..47d5f7b7fe
--- /dev/null
+++ b/docs/public/catalog/components/sticky-mock-swap/sticky-mock-swap.html
@@ -0,0 +1,465 @@
+<!doctype html>
+<!--
+  sticky-mock-swap: HyperFrames video primitive (product-demo / demonstrate)
+
+  Concept: a product mock stays pinned while captions advance beside it. Each
+  caption rises along a shallow arc, holds, pauses before dismissal, then exits
+  upward along a second arc. At every caption threshold, only the mock content
+  cross-fades to the corresponding accent-tinted skeleton state.
+
+  Variables:
+    - captions (comma-separated string): feature captions. Whitespace and empty
+      entries are removed, with the declared default used when none remain.
+    - accent (green | blue | violet): tint shared by all mock states.
+
+  Envelope (caption-count driven, never timeScale):
+    PHASE = D / parsed caption count.
+    IN_BASE = 0.38s per phase for the caption rise and mock cross-fade.
+    HOLD = elastic per phase. Longer mounts stretch only this still-readable
+           interval, with a subtle seek-driven pulse inside the pinned mock.
+    OUT_BASE = 0.28s exit-delay plus 0.32s caption exit per phase.
+    If a phase is shorter than the fixed motion envelope, IN and OUT compress
+    proportionally and HOLD becomes zero. At the default D=6 and three captions,
+    the 0.28s stillness before each exit stays inside the 0.2s to 0.4s house rule.
+
+  Mount contract: this is a template-wrapped sub-composition. The runtime clones
+  only template contents. #root fills the host-owned box, has no data-width or
+  data-height, and establishes the cqw/cqh basis for every internal measurement.
+  One paused timeline is registered under the hardcoded sticky-mock-swap id.
+-->
+<html
+  lang="en"
+  data-composition-id="sticky-mock-swap"
+  data-composition-duration="6"
+  data-composition-variables='[
+    { "id": "captions", "type": "string", "role": "content", "label": "Captions", "description": "Comma-separated feature captions shown beside the pinned mock.", "default": "Instant previews,Zero config,Ship on Friday" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Accent tint used across the mock states.", "default": "violet", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Sticky Mock Swap</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="sticky-mock-swap" data-duration="6" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            background: var(--bg, #0b0c0e);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .sms-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+          }
+
+          .sms-shell {
+            width: 100%;
+            height: 100%;
+            display: grid;
+            grid-template-columns: minmax(0, 1.16fr) minmax(0, 0.84fr);
+            align-items: center;
+            gap: 5cqw;
+            padding: 8cqh 7cqw;
+          }
+
+          .sms-mock {
+            position: relative;
+            width: 100%;
+            height: 70cqh;
+            overflow: hidden;
+            border: 0.12cqmin solid color-mix(in srgb, var(--border, #334155) 74%, transparent);
+            border-radius: 2.8cqmin;
+            background: var(--surface, #121722);
+            box-shadow: 0 4cqh 10cqh color-mix(in srgb, #000 46%, transparent);
+          }
+
+          .sms-states,
+          .sms-state {
+            position: absolute;
+            inset: 0;
+          }
+
+          .sms-state {
+            --sms-live: 0.64;
+            display: grid;
+            grid-template-rows: 8cqh minmax(0, 1fr);
+            overflow: hidden;
+            opacity: 0;
+            background: color-mix(in srgb, var(--surface, #121722) 94%, var(--sms-accent));
+          }
+
+          .sms-toolbar {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 0 2.2cqw;
+            border-bottom: 0.1cqmin solid
+              color-mix(in srgb, var(--border, #334155) 62%, transparent);
+            background: color-mix(in srgb, #0f131c 92%, var(--sms-accent));
+          }
+
+          .sms-dots {
+            display: flex;
+            gap: 0.55cqw;
+          }
+
+          .sms-dots i {
+            width: 0.62cqw;
+            aspect-ratio: 1;
+            border-radius: 50%;
+            background: color-mix(in srgb, var(--muted, #94a3b8) 46%, transparent);
+          }
+
+          .sms-status {
+            width: 7.4cqw;
+            height: 1.2cqh;
+            border-radius: 1cqmin;
+            opacity: var(--sms-live);
+            background: var(--sms-accent);
+          }
+
+          .sms-window {
+            display: grid;
+            grid-template-columns: 24% minmax(0, 1fr);
+            min-height: 0;
+          }
+
+          .sms-sidebar {
+            display: flex;
+            flex-direction: column;
+            gap: 2.3cqh;
+            padding: 3.2cqh 1.8cqw;
+            border-right: 0.1cqmin solid color-mix(in srgb, var(--border, #334155) 52%, transparent);
+            background: color-mix(in srgb, #0e121a 94%, var(--sms-accent));
+          }
+
+          .sms-sidebar i,
+          .sms-title,
+          .sms-subtitle,
+          .sms-block {
+            display: block;
+            border-radius: 0.7cqmin;
+            background: color-mix(in srgb, var(--muted, #94a3b8) 20%, transparent);
+          }
+
+          .sms-sidebar i {
+            width: 82%;
+            height: 1.2cqh;
+          }
+
+          .sms-sidebar i:first-child {
+            width: 100%;
+            background: color-mix(in srgb, var(--sms-accent) 54%, transparent);
+          }
+
+          .sms-main {
+            position: relative;
+            min-width: 0;
+            padding: 4.4cqh 2.5cqw;
+          }
+
+          .sms-title {
+            width: 46%;
+            height: 2.1cqh;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 44%, transparent);
+          }
+
+          .sms-subtitle {
+            width: 68%;
+            height: 1.2cqh;
+            margin-top: 1.8cqh;
+          }
+
+          .sms-canvas {
+            position: absolute;
+            inset: 11.5cqh 2.5cqw 4.2cqh;
+            display: grid;
+            grid-template-columns: repeat(2, minmax(0, 1fr));
+            grid-template-rows: repeat(2, minmax(0, 1fr));
+            gap: 1.5cqmin;
+          }
+
+          .sms-block {
+            position: relative;
+            overflow: hidden;
+            border: 0.1cqmin solid color-mix(in srgb, var(--border, #334155) 54%, transparent);
+            background: color-mix(in srgb, #263044 54%, transparent);
+          }
+
+          .sms-block::after {
+            content: "";
+            position: absolute;
+            left: 12%;
+            right: 12%;
+            bottom: 16%;
+            height: 0.8cqh;
+            border-radius: 1cqmin;
+            opacity: var(--sms-live);
+            background: var(--sms-accent);
+          }
+
+          .sms-state--2 .sms-canvas {
+            grid-template-columns: 1fr;
+            grid-template-rows: repeat(4, minmax(0, 1fr));
+          }
+
+          .sms-state--2 .sms-block::after {
+            left: 8%;
+            right: 35%;
+            bottom: 28%;
+          }
+
+          .sms-state--3 .sms-canvas {
+            grid-template-columns: 1.45fr 0.55fr;
+            grid-template-rows: repeat(3, minmax(0, 1fr));
+          }
+
+          .sms-state--3 .sms-block:first-child {
+            grid-row: 1 / 4;
+          }
+
+          .sms-state--3 .sms-block::after {
+            left: 10%;
+            right: 18%;
+            bottom: 18%;
+          }
+
+          .sms-captions {
+            position: relative;
+            width: 100%;
+            height: 32cqh;
+          }
+
+          .sms-caption {
+            position: absolute;
+            inset: 0;
+            display: flex;
+            align-items: center;
+            max-width: 34cqw;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: 5.8cqmin;
+            font-weight: 720;
+            line-height: 1.04;
+            letter-spacing: -0.04em;
+            overflow-wrap: anywhere;
+            opacity: 0;
+            will-change: transform, opacity;
+          }
+
+          .sms-caption::before {
+            content: "";
+            flex: 0 0 auto;
+            align-self: center;
+            width: 0.75cqw;
+            height: 9cqh;
+            margin-right: 1.5cqw;
+            border-radius: 1cqmin;
+            background: var(--sms-accent);
+            box-shadow: 0 0 2cqmin color-mix(in srgb, var(--sms-accent) 48%, transparent);
+          }
+        </style>
+
+        <div
+          id="sticky-mock-swap-clip"
+          class="sms-clip clip"
+          data-start="0"
+          data-duration="6"
+          data-track-index="0"
+        >
+          <div class="sms-shell">
+            <div class="sms-mock" aria-hidden="true">
+              <div class="sms-states"></div>
+            </div>
+            <div class="sms-captions" aria-label="Feature captions"></div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var captionsHost = root.querySelector(".sms-captions");
+            var statesHost = root.querySelector(".sms-states");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var DEFAULT_CAPTIONS = ["Instant previews", "Zero config", "Ship on Friday"];
+            var captionsSource =
+              vars.captions == null ? DEFAULT_CAPTIONS.join(",") : String(vars.captions);
+            var captions = captionsSource.split(",").reduce(function (parsed, token) {
+              var caption = token.trim();
+              if (caption) parsed.push(caption);
+              return parsed;
+            }, []);
+            if (captions.length === 0) captions = DEFAULT_CAPTIONS.slice();
+
+            var accent =
+              vars.accent === "green" || vars.accent === "blue" || vars.accent === "violet"
+                ? vars.accent
+                : "violet";
+            var accentColors = {
+              green: "var(--brand, #34d399)",
+              blue: "var(--accent, #38bdf8)",
+              violet: "var(--accent-2, #a78bfa)",
+            };
+            root.style.setProperty("--sms-accent", accentColors[accent]);
+
+            var captionElements = [];
+            var stateElements = [];
+
+            captions.forEach(function (captionText, index) {
+              var caption = document.createElement("div");
+              caption.className = "sms-caption";
+              caption.textContent = captionText;
+              captionsHost.appendChild(caption);
+              captionElements.push(caption);
+
+              var state = document.createElement("div");
+              state.className = "sms-state sms-state--" + ((index % 3) + 1);
+              state.setAttribute("aria-hidden", "true");
+              state.innerHTML =
+                '<div class="sms-toolbar"><span class="sms-dots"><i></i><i></i><i></i></span><span class="sms-status"></span></div>' +
+                '<div class="sms-window"><aside class="sms-sidebar"><i></i><i></i><i></i><i></i></aside>' +
+                '<main class="sms-main"><span class="sms-title"></span><span class="sms-subtitle"></span>' +
+                '<div class="sms-canvas"><i class="sms-block"></i><i class="sms-block"></i><i class="sms-block"></i><i class="sms-block"></i></div></main></div>';
+              statesHost.appendChild(state);
+              stateElements.push(state);
+            });
+
+            var durationValue = parseFloat(root.dataset.duration || "6");
+            var duration = Number.isFinite(durationValue) ? Math.max(0.001, durationValue) : 6;
+
+            // Caption count owns the threshold grid. Longer durations add only
+            // to each phase's HOLD, never by scaling the completed timeline.
+            var phaseDuration = duration / captions.length;
+            var RISE_BASE = 0.38;
+            var EXIT_DELAY_BASE = 0.28;
+            var EXIT_BASE = 0.32;
+            var MOTION_BASE = RISE_BASE + EXIT_DELAY_BASE + EXIT_BASE;
+            var motionScale = phaseDuration < MOTION_BASE ? phaseDuration / MOTION_BASE : 1;
+            var RISE = RISE_BASE * motionScale;
+            var EXIT_DELAY = EXIT_DELAY_BASE * motionScale;
+            var EXIT = EXIT_BASE * motionScale;
+            var HOLD = Math.max(0, phaseDuration - RISE - EXIT_DELAY - EXIT);
+            var SWAP = Math.min(0.28 * motionScale, phaseDuration * 0.4);
+
+            captionElements.forEach(function (caption, index) {
+              gsap.set(caption, { opacity: 0, x: "-1.2cqw", y: "3.6cqh" });
+              gsap.set(stateElements[index], { opacity: index === 0 ? 1 : 0, "--sms-live": 0.64 });
+            });
+
+            var tl = gsap.timeline({ paused: true });
+
+            captionElements.forEach(function (caption, index) {
+              var phaseStart = index * phaseDuration;
+              var riseArc = RISE * 0.72;
+              var exitStart = phaseStart + RISE + HOLD + EXIT_DELAY;
+              var exitArc = EXIT * 0.32;
+
+              // IN: two authored segments form a shallow arrival arc.
+              tl.fromTo(
+                caption,
+                { opacity: 0, x: "-1.2cqw", y: "3.6cqh" },
+                {
+                  opacity: 1,
+                  x: "0.45cqw",
+                  y: "-0.28cqh",
+                  duration: riseArc,
+                  ease: "power2.out",
+                },
+                phaseStart,
+              );
+              tl.to(
+                caption,
+                {
+                  x: "0cqw",
+                  y: "0cqh",
+                  duration: RISE - riseArc,
+                  ease: "power2.out",
+                },
+                phaseStart + riseArc,
+              );
+
+              if (index > 0) {
+                tl.to(
+                  stateElements[index - 1],
+                  { opacity: 0, duration: SWAP, ease: "power2.in" },
+                  phaseStart,
+                );
+                tl.fromTo(
+                  stateElements[index],
+                  { opacity: 0 },
+                  { opacity: 1, duration: SWAP, ease: "power2.out" },
+                  phaseStart,
+                );
+              }
+
+              // HOLD: the mock content breathes without moving the pinned panel.
+              if (HOLD >= 0.4) {
+                tl.to(
+                  stateElements[index],
+                  {
+                    "--sms-live": 0.9,
+                    duration: HOLD / 2,
+                    ease: "sine.inOut",
+                    yoyo: true,
+                    repeat: 1,
+                  },
+                  phaseStart + RISE,
+                );
+              }
+
+              // OUT: EXIT_DELAY is empty stillness, then two segments arc upward.
+              tl.to(
+                caption,
+                {
+                  x: "0.42cqw",
+                  y: "-0.9cqh",
+                  duration: exitArc,
+                  ease: "power2.in",
+                },
+                exitStart,
+              );
+              tl.to(
+                caption,
+                {
+                  opacity: 0,
+                  x: "-1.1cqw",
+                  y: "-4.5cqh",
+                  duration: EXIT - exitArc,
+                  ease: "power2.in",
+                },
+                exitStart + exitArc,
+              );
+            });
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["sticky-mock-swap"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/stitched-text-draw/README.md b/docs/public/catalog/components/stitched-text-draw/README.md
new file mode 100644
index 0000000000..32dba50821
--- /dev/null
+++ b/docs/public/catalog/components/stitched-text-draw/README.md
@@ -0,0 +1,45 @@
+# stitched-text-draw
+
+Wave M experiment (M6). Text drawn as thread stitches: letters draw thread-first with a needle dot leading each stroke's reveal front, needle-hole dots appearing at every stitch boundary behind it, and a tiny thread-tail overshoot as each letter finishes (the thread sticks out past the stroke end along its exit tangent, then is pulled snug).
+
+4s authored, elastic HOLD, exit `none` by default.
+
+## Letter path approach
+
+A single-stroke display alphabet (A-Z 0-9, plus space) authored as a compact stroke table inside the primitive: each glyph is a list of strokes, each stroke built from line points and flattened elliptical arcs in a 70x100 glyph box. At mount every stroke is resampled to even stitch-scale steps and displaced by seeded perpendicular jitter (fixed LCG seed `0x57174c3d`), so every stitch sits at a slightly different angle: the hand-sewn wobble. Letter x-offsets are baked into the points so all paths share one flat SVG coordinate space and a single global needle can read `getPointAtLength` coordinates directly.
+
+## Draw mechanic (attribute dashoffset, no mask)
+
+The reveal is ATTRIBUTE-driven `stroke-dashoffset` on the stitched path itself (gotcha 8: the CSS property leaves stale paint under reverse seeks; and SVG masks do not reliably repaint under seeks, so no `<mask>`/`<clipPath>`). Each path's dasharray is its stitch pattern (dash, gap, dash, ...) built to sum exactly to the measured path length `L` (via `getTotalLength`, never the `pathLength` attribute, never `non-scaling-stroke` on dashed paths), followed by one closing gap of `L` (total `2L`). Animating the dashoffset attribute from `L` to `0` sweeps the reveal front from start to end; the visible stitches slide the last few units into their final positions as the offset reaches zero, which reads as the thread being pulled through.
+
+## Variables
+
+| id       | type   | default  | notes                                                                                                                             |
+| -------- | ------ | -------- | --------------------------------------------------------------------------------------------------------------------------------- |
+| `text`   | string | `STITCH` | Uppercased; A-Z 0-9 and space, other characters render as spaces; clamped to 12 characters.                                       |
+| `stitch` | enum   | `fine`   | `fine` (dash 6.5 / gap 4.5 / width 2.6) or `coarse` (dash 10 / gap 7 / width 4.2) in glyph units, with matching jitter amplitude. |
+| `accent` | enum   | `green`  | Thread color: green rides `--brand`, blue rides `--accent`, violet rides `--accent-2`.                                            |
+| `exit`   | enum   | `none`   | `none` holds until the cut; `fade` departs opacity-only; `up` rises out.                                                          |
+
+## Mount
+
+```html
+<div
+  class="clip"
+  data-composition-id="stitched-text-draw"
+  data-composition-src="./stitched-text-draw.html"
+  data-variable-values='{"text":"SEWN 24","stitch":"coarse","accent":"violet"}'
+  data-start="0"
+  data-duration="4"
+  data-track-index="0"
+></div>
+```
+
+Elastic root: no `data-width`/`data-height`; it fills whatever box the host clip gives it. Timeline registers under the literal `stitched-text-draw` key.
+
+## Notes
+
+- Zero per-element tweens (gotcha 9): one inert anchor tween spans the authored duration; a painter recomputes every stroke's dashoffset attribute, every hole's visibility, and the needle/tail pose as pure functions of `tl.time()` on each update. Idempotent writes; eventful seeks (`suppressEvents=false`) land identical frames in any order and either direction.
+- Letters draw strictly in sequence (windows proportional to stitch length, fixed needle-jump pause between letters), so one global needle serves the whole word.
+- The per-stroke ease is a backOut: the ~10% overshoot region past the stroke end is what drives the thread-tail (up to 16 glyph units), which retracts to zero as the ease settles.
+- The hold is truly still: every stroke sits at dashoffset 0, all holes visible, needle and tail at opacity 0.
diff --git a/docs/public/catalog/components/stitched-text-draw/demo.html b/docs/public/catalog/components/stitched-text-draw/demo.html
new file mode 100644
index 0000000000..b730b4f0a3
--- /dev/null
+++ b/docs/public/catalog/components/stitched-text-draw/demo.html
@@ -0,0 +1,101 @@
+<!doctype html>
+<!--
+  stitched-text-draw demo. FULL-BLEED light mount: the primitive fills the
+  whole 1920x1080 frame on a light token block. Non-default text, stitch,
+  and accent values prove the variable path.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Stitched Text Draw Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #eef0f3);
+      }
+
+      #root {
+        --bg: #eef0f3;
+        --fg: #14161b;
+        --muted: #5b6472;
+        --surface: #ffffff;
+        --border: #d3d8e0;
+        --brand: #3f3f46;
+        --accent: #3f3f46;
+        --accent-2: #3f3f46;
+        --font-display: "Inter", system-ui, sans-serif;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 42%, #f7f8fa 0%, var(--bg, #eef0f3) 72%);
+      }
+
+      .mount-bleed {
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        container-type: size;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="stitched-text-draw-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="stitched-text-draw-mount"
+        class="mount-bleed clip"
+        data-composition-id="stitched-text-draw"
+        data-composition-src="./stitched-text-draw.html"
+        data-variable-values='{"text":"SEWN 24","stitch":"coarse","accent":"violet"}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="1920"
+        data-height="1080"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["stitched-text-draw-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "stitched-text-draw.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/stitched-text-draw/stitched-text-draw.html b/docs/public/catalog/components/stitched-text-draw/stitched-text-draw.html
new file mode 100644
index 0000000000..5a11493a08
--- /dev/null
+++ b/docs/public/catalog/components/stitched-text-draw/stitched-text-draw.html
@@ -0,0 +1,865 @@
+<!doctype html>
+<!--
+  stitched-text-draw: HyperFrames video primitive (type / craft, Wave M
+  experiment M6)
+
+  Text drawn as thread stitches. Letters come from a single-stroke display
+  alphabet (A-Z 0-9) authored as a compact stroke table of lines and
+  elliptical arcs per glyph, flattened to polylines at mount, resampled to
+  stitch-scale steps, and displaced by seeded perpendicular jitter so every
+  stitch sits at a slightly different angle (hand-sewn wobble). Each stroke
+  draws thread-first: a needle dot leads the reveal front, needle-hole dots
+  appear at every stitch boundary behind it, and each letter finishes with
+  a tiny thread-tail overshoot (the thread sticks out past the stroke end
+  along its exit tangent, then is pulled snug).
+
+  Draw mechanic (gotcha 8, and gotcha "nested SVG mask doesn't repaint
+  under seek"): the reveal is ATTRIBUTE-driven stroke-dashoffset on the
+  stitched path itself, using the double-dash trick instead of an SVG mask.
+  Each path's dasharray is its stitch pattern (dash, gap, dash, ...) built
+  to sum EXACTLY to the path length L, followed by one closing gap of L
+  (total 2L). Animating the stroke-dashoffset attribute from L to 0 sweeps
+  the reveal front from start to end while the visible dashes settle into
+  their final stitch positions at offset 0. No <mask>, no <clipPath>, no
+  CSS dashoffset property (Chrome under-invalidates it on reverse seeks);
+  the painter primes and updates the attribute via setAttribute.
+
+  Variables (declared in data-composition-variables below):
+    - text (string, default "STITCH"): uppercased; A-Z 0-9 and space,
+      other characters render as spaces; clamped to 12 characters.
+    - stitch ("fine" | "coarse", default "fine"): dash/gap scale, thread
+      width, and jitter amplitude.
+    - accent ("green" | "blue" | "violet", default "green"): thread color;
+      green rides --brand, blue rides --accent, violet rides --accent-2.
+    - exit ("none" | "fade" | "up", default "none").
+
+  Envelope, fixed IN and OUT with elastic HOLD only (never timeScale):
+    IN_BASE  = 0.15 lead + 2.9 draw + 0.15 margin
+    HOLD     = max(0, D - IN - OUT), truly still
+    OUT_BASE = 0.45s only when exit != none
+    If D < IN_BASE + OUT_BASE the whole envelope compresses together.
+    Letters draw strictly in sequence; each letter's share of the draw
+    window is proportional to its total stroke length, with a fixed
+    needle-jump pause between letters.
+
+  Determinism and seek-safety: all geometry, jitter (fixed LCG seed
+  0x57174c3d), stitch patterns, hole positions, and the per-stroke draw
+  schedule are computed once at mount. One inert anchor tween spans [0, D];
+  a painter recomputes every stroke's dashoffset, every hole's visibility,
+  and the needle/tail pose as pure functions of tl.time() on each update
+  (zero per-element tweens, gotcha 9). Writes are idempotent; eventful
+  seeks (suppressEvents=false) land identical frames in any order and
+  either direction.
+
+  Mount contract: the runtime clones only this template. #root fills the
+  host box (no data-width/data-height, container-type: size, cqmin units),
+  is styled via #root only, and registers one paused timeline under the
+  LITERAL "stitched-text-draw" key. getTotalLength drives all dash math
+  (never the pathLength attribute, never non-scaling-stroke on dashed
+  paths).
+-->
+<html
+  lang="en"
+  data-composition-id="stitched-text-draw"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "text", "type": "string", "role": "content", "label": "Text", "description": "Uppercased A-Z 0-9 and space, clamped to 12 characters.", "default": "STITCH" },
+    { "id": "stitch", "type": "enum", "role": "style", "label": "Stitch", "description": "Dash/gap scale, thread width, and jitter amplitude.", "default": "fine", "options": [{ "value": "fine", "label": "Fine" }, { "value": "coarse", "label": "Coarse" }] },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Thread color: green rides --brand, blue rides --accent, violet rides --accent-2.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the stitched word holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Stitched Text Draw</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="stitched-text-draw" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .std-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .std-stage {
+            display: grid;
+            place-items: center;
+            will-change: transform, opacity;
+          }
+
+          .std-svg {
+            display: block;
+            width: 92cqw;
+            height: 56cqh;
+          }
+        </style>
+
+        <div
+          id="stitched-text-draw-clip"
+          class="std-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="std-stage" role="img">
+            <svg
+              class="std-svg"
+              xmlns="http://www.w3.org/2000/svg"
+              preserveAspectRatio="xMidYMid meet"
+              aria-hidden="true"
+            ></svg>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var SVG_NS = "http://www.w3.org/2000/svg";
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".std-stage");
+            var svg = root.querySelector(".std-svg");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var text = (vars.text == null || vars.text === "" ? "STITCH" : String(vars.text))
+              .toUpperCase()
+              .slice(0, 12);
+            var stitch = vars.stitch === "coarse" ? "coarse" : "fine";
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #52525b)",
+              blue: "var(--accent, #52525b)",
+              violet: "var(--accent-2, #52525b)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            root.style.setProperty("--std-accent", accentColors[accent]);
+            stage.setAttribute("aria-label", text);
+
+            // Stitch registers: dash/gap in glyph units (glyph box 70x100).
+            var registers = {
+              fine: { dash: 6.5, gap: 4.5, width: 2.6, jitter: 1.5 },
+              coarse: { dash: 10, gap: 7, width: 4.2, jitter: 2.3 },
+            };
+            var reg = registers[stitch];
+
+            // ---- Single-stroke display alphabet -------------------------
+            // Glyph box: width 70 (space 40), cap height 100, y down.
+            // Each glyph is an array of strokes; a stroke is an array of
+            // [x, y] points (lines) built from line points and flattened
+            // elliptical arcs. Curves only need enough samples to read as
+            // curved once resampled and jittered.
+            function arcPts(cx, cy, rx, ry, a0, a1) {
+              var steps = Math.max(6, Math.ceil(Math.abs(a1 - a0) / 18));
+              var pts = [];
+              for (var i = 0; i <= steps; i += 1) {
+                var a = ((a0 + ((a1 - a0) * i) / steps) * Math.PI) / 180;
+                pts.push([cx + rx * Math.cos(a), cy + ry * Math.sin(a)]);
+              }
+              return pts;
+            }
+            function join() {
+              var out = [];
+              for (var i = 0; i < arguments.length; i += 1) {
+                out = out.concat(arguments[i]);
+              }
+              return out;
+            }
+
+            var GLYPHS = {
+              A: [
+                [
+                  [4, 100],
+                  [35, 2],
+                  [66, 100],
+                ],
+                [
+                  [15, 64],
+                  [55, 64],
+                ],
+              ],
+              B: [
+                [
+                  [6, 2],
+                  [6, 98],
+                ],
+                join([[6, 2]], arcPts(36, 26, 24, 24, -90, 90), [[6, 50]]),
+                join([[6, 50]], arcPts(38, 74, 26, 24, -90, 90), [[6, 98]]),
+              ],
+              C: [arcPts(38, 50, 30, 46, -60, -300)],
+              D: [
+                join(
+                  [
+                    [6, 2],
+                    [24, 2],
+                  ],
+                  arcPts(24, 50, 40, 48, -90, 90),
+                  [
+                    [24, 98],
+                    [6, 98],
+                    [6, 4],
+                  ],
+                ),
+              ],
+              E: [
+                [
+                  [60, 2],
+                  [8, 2],
+                  [8, 98],
+                  [60, 98],
+                ],
+                [
+                  [8, 50],
+                  [48, 50],
+                ],
+              ],
+              F: [
+                [
+                  [60, 2],
+                  [8, 2],
+                  [8, 98],
+                ],
+                [
+                  [8, 50],
+                  [46, 50],
+                ],
+              ],
+              G: [
+                join(arcPts(38, 50, 30, 46, -60, -305), [
+                  [56, 62],
+                  [38, 62],
+                ]),
+              ],
+              H: [
+                [
+                  [8, 2],
+                  [8, 98],
+                ],
+                [
+                  [62, 2],
+                  [62, 98],
+                ],
+                [
+                  [8, 50],
+                  [62, 50],
+                ],
+              ],
+              I: [
+                [
+                  [35, 2],
+                  [35, 98],
+                ],
+                [
+                  [20, 2],
+                  [50, 2],
+                ],
+                [
+                  [20, 98],
+                  [50, 98],
+                ],
+              ],
+              J: [
+                join(
+                  [
+                    [58, 2],
+                    [58, 72],
+                  ],
+                  arcPts(33, 72, 25, 26, 0, 180),
+                ),
+              ],
+              K: [
+                [
+                  [8, 2],
+                  [8, 98],
+                ],
+                [
+                  [60, 2],
+                  [8, 56],
+                ],
+                [
+                  [24, 42],
+                  [62, 98],
+                ],
+              ],
+              L: [
+                [
+                  [8, 2],
+                  [8, 98],
+                  [60, 98],
+                ],
+              ],
+              M: [
+                [
+                  [6, 98],
+                  [6, 2],
+                  [35, 58],
+                  [64, 2],
+                  [64, 98],
+                ],
+              ],
+              N: [
+                [
+                  [8, 98],
+                  [8, 2],
+                  [62, 98],
+                  [62, 2],
+                ],
+              ],
+              O: [arcPts(35, 50, 30, 47, -90, 270)],
+              P: [
+                [
+                  [8, 98],
+                  [8, 2],
+                ],
+                join(
+                  [
+                    [8, 2],
+                    [36, 2],
+                  ],
+                  arcPts(36, 27, 26, 25, -90, 90),
+                  [
+                    [36, 52],
+                    [8, 52],
+                  ],
+                ),
+              ],
+              Q: [
+                arcPts(35, 50, 30, 47, -90, 270),
+                [
+                  [46, 70],
+                  [66, 96],
+                ],
+              ],
+              R: [
+                [
+                  [8, 98],
+                  [8, 2],
+                ],
+                join(
+                  [
+                    [8, 2],
+                    [36, 2],
+                  ],
+                  arcPts(36, 27, 26, 25, -90, 90),
+                  [
+                    [36, 52],
+                    [8, 52],
+                  ],
+                ),
+                [
+                  [30, 52],
+                  [64, 98],
+                ],
+              ],
+              S: [
+                [
+                  [58, 14],
+                  [44, 3],
+                  [24, 3],
+                  [10, 14],
+                  [10, 30],
+                  [24, 42],
+                  [46, 56],
+                  [58, 68],
+                  [58, 86],
+                  [44, 97],
+                  [22, 97],
+                  [8, 86],
+                ],
+              ],
+              T: [
+                [
+                  [6, 2],
+                  [64, 2],
+                ],
+                [
+                  [35, 2],
+                  [35, 98],
+                ],
+              ],
+              U: [
+                join(
+                  [
+                    [8, 2],
+                    [8, 68],
+                  ],
+                  arcPts(35, 68, 27, 29, 180, 360),
+                  [
+                    [62, 68],
+                    [62, 2],
+                  ],
+                ),
+              ],
+              V: [
+                [
+                  [6, 2],
+                  [35, 98],
+                  [64, 2],
+                ],
+              ],
+              W: [
+                [
+                  [4, 2],
+                  [19, 98],
+                  [35, 34],
+                  [51, 98],
+                  [66, 2],
+                ],
+              ],
+              X: [
+                [
+                  [8, 2],
+                  [62, 98],
+                ],
+                [
+                  [62, 2],
+                  [8, 98],
+                ],
+              ],
+              Y: [
+                [
+                  [6, 2],
+                  [35, 50],
+                ],
+                [
+                  [64, 2],
+                  [35, 50],
+                  [35, 98],
+                ],
+              ],
+              Z: [
+                [
+                  [8, 2],
+                  [62, 2],
+                  [8, 98],
+                  [62, 98],
+                ],
+              ],
+              0: [arcPts(35, 50, 27, 47, -90, 270)],
+              1: [
+                [
+                  [20, 20],
+                  [38, 4],
+                  [38, 98],
+                ],
+              ],
+              2: [
+                join(arcPts(35, 26, 26, 24, -160, 10), [
+                  [8, 98],
+                  [62, 98],
+                ]),
+              ],
+              3: [join(arcPts(34, 26, 24, 24, -150, 80), arcPts(36, 73, 26, 25, -100, 150))],
+              4: [
+                [
+                  [50, 2],
+                  [6, 66],
+                  [66, 66],
+                ],
+                [
+                  [50, 44],
+                  [50, 98],
+                ],
+              ],
+              5: [
+                [
+                  [58, 3],
+                  [14, 3],
+                  [11, 44],
+                  [34, 38],
+                  [55, 48],
+                  [59, 72],
+                  [46, 94],
+                  [20, 96],
+                  [8, 84],
+                ],
+              ],
+              6: [
+                join(
+                  [
+                    [52, 4],
+                    [28, 26],
+                    [13, 56],
+                  ],
+                  arcPts(35, 72, 24, 26, -180, 180),
+                ),
+              ],
+              7: [
+                [
+                  [8, 3],
+                  [62, 3],
+                  [30, 98],
+                ],
+              ],
+              8: [join(arcPts(35, 27, 21, 24, 90, 450), arcPts(35, 74, 26, 25, -90, 270))],
+              9: [
+                join(arcPts(37, 28, 25, 25, 0, 360), [
+                  [62, 28],
+                  [56, 64],
+                  [34, 98],
+                ]),
+              ],
+            };
+            var GLYPH_W = 70;
+            var SPACE_W = 40;
+            var GAP = 24;
+
+            // Fixed-seed LCG: the only randomness source, consumed in one
+            // deterministic order during this build phase.
+            var lcgState = 0x57174c3d;
+            function next() {
+              lcgState = (Math.imul(1664525, lcgState) + 1013904223) >>> 0;
+              return lcgState / 4294967296;
+            }
+
+            // Resample a polyline to even stitch-scale steps, then displace
+            // each point perpendicular to the local direction: seeded angle
+            // jitter, so every stitch lands at a slightly different angle.
+            function resampleJitter(points) {
+              var STEP = 5;
+              var flat = [points[0]];
+              for (var i = 1; i < points.length; i += 1) {
+                var ax = flat[flat.length - 1][0];
+                var ay = flat[flat.length - 1][1];
+                var bx = points[i][0];
+                var by = points[i][1];
+                var seg = Math.hypot(bx - ax, by - ay);
+                var n = Math.max(1, Math.round(seg / STEP));
+                for (var k = 1; k <= n; k += 1) {
+                  flat.push([ax + ((bx - ax) * k) / n, ay + ((by - ay) * k) / n]);
+                }
+              }
+              var out = [];
+              for (var p = 0; p < flat.length; p += 1) {
+                var prev = flat[Math.max(0, p - 1)];
+                var after = flat[Math.min(flat.length - 1, p + 1)];
+                var dx = after[0] - prev[0];
+                var dy = after[1] - prev[1];
+                var len = Math.hypot(dx, dy) || 1;
+                var edge = p === 0 || p === flat.length - 1 ? 0.5 : 1;
+                var off = (next() - 0.5) * 2 * reg.jitter * edge;
+                out.push([flat[p][0] + (-dy / len) * off, flat[p][1] + (dx / len) * off]);
+              }
+              return out;
+            }
+
+            // ---- Layout: bake letter x-offsets into the points so every
+            // path shares ONE flat coordinate space (the global needle can
+            // then read getPointAtLength coordinates directly). -----------
+            var characters = Array.from(text);
+            var letters = [];
+            var cursor = 0;
+            for (var ci = 0; ci < characters.length; ci += 1) {
+              var ch = characters[ci];
+              var glyph = GLYPHS[ch];
+              if (!glyph) {
+                cursor += SPACE_W + GAP;
+                continue;
+              }
+              var strokes = [];
+              for (var si = 0; si < glyph.length; si += 1) {
+                var jittered = resampleJitter(glyph[si]);
+                var shifted = [];
+                for (var pi = 0; pi < jittered.length; pi += 1) {
+                  shifted.push([jittered[pi][0] + cursor, jittered[pi][1]]);
+                }
+                strokes.push({ points: shifted });
+              }
+              letters.push({ strokes: strokes });
+              cursor += GLYPH_W + GAP;
+            }
+            var totalWidth = Math.max(GLYPH_W, cursor - GAP);
+            var PAD = 14;
+            svg.setAttribute(
+              "viewBox",
+              -PAD + " " + -PAD + " " + (totalWidth + 2 * PAD) + " " + (100 + 2 * PAD),
+            );
+
+            // ---- Build DOM + per-stroke dash/hole tables ----------------
+            function el(name) {
+              return document.createElementNS(SVG_NS, name);
+            }
+            var holeFill = "color-mix(in srgb, var(--fg, #f8fafc) 34%, transparent)";
+            var totalLength = 0;
+            for (var li = 0; li < letters.length; li += 1) {
+              var letter = letters[li];
+              for (var sj = 0; sj < letter.strokes.length; sj += 1) {
+                var stroke = letter.strokes[sj];
+                var d =
+                  "M " +
+                  stroke.points
+                    .map(function (pt) {
+                      return pt[0].toFixed(2) + " " + pt[1].toFixed(2);
+                    })
+                    .join(" L ");
+                var path = el("path");
+                path.setAttribute("d", d);
+                path.setAttribute("fill", "none");
+                path.setAttribute("stroke", "var(--std-accent)");
+                path.setAttribute("stroke-width", String(reg.width));
+                path.setAttribute("stroke-linecap", "round");
+                svg.appendChild(path);
+
+                var L = path.getTotalLength();
+                stroke.el = path;
+                stroke.length = L;
+                totalLength += L;
+
+                // Double-dash reveal pattern: alternating dash/gap summing
+                // EXACTLY to L (ending on a dash element so the appended L
+                // sits at an odd index and reads as one closing gap).
+                var pattern = [];
+                var sum = 0;
+                while (sum + reg.dash + reg.gap < L) {
+                  pattern.push(reg.dash, reg.gap);
+                  sum += reg.dash + reg.gap;
+                }
+                pattern.push(Math.max(0.5, L - sum));
+                pattern.push(L);
+                stroke.dasharray = pattern
+                  .map(function (v) {
+                    return v.toFixed(3);
+                  })
+                  .join(" ");
+                path.setAttribute("stroke-dasharray", stroke.dasharray);
+                path.setAttribute("stroke-dashoffset", L.toFixed(3));
+
+                // Needle holes: one dot at each stitch boundary (dash start
+                // and dash end), revealed as the front passes.
+                stroke.holes = [];
+                var period = reg.dash + reg.gap;
+                for (var s = 0; s <= L; s += period) {
+                  var boundaries = [s, Math.min(L, s + reg.dash)];
+                  for (var b = 0; b < boundaries.length; b += 1) {
+                    var pt = path.getPointAtLength(boundaries[b]);
+                    var hole = el("circle");
+                    hole.setAttribute("cx", pt.x.toFixed(2));
+                    hole.setAttribute("cy", pt.y.toFixed(2));
+                    hole.setAttribute("r", (reg.width * 0.42).toFixed(2));
+                    hole.setAttribute("fill", holeFill);
+                    hole.setAttribute("opacity", "0");
+                    svg.appendChild(hole);
+                    stroke.holes.push({ el: hole, at: boundaries[b] });
+                  }
+                }
+
+                // End pose for the thread-tail overshoot.
+                var endPt = path.getPointAtLength(L);
+                var backPt = path.getPointAtLength(Math.max(0, L - 2));
+                var tx = endPt.x - backPt.x;
+                var ty = endPt.y - backPt.y;
+                var tLen = Math.hypot(tx, ty) || 1;
+                stroke.end = [endPt.x, endPt.y];
+                stroke.tangent = [tx / tLen, ty / tLen];
+              }
+            }
+
+            // Global needle dot + thread tail (letters draw strictly in
+            // sequence, so one needle serves the whole word).
+            var tail = el("line");
+            tail.setAttribute("stroke", "var(--std-accent)");
+            tail.setAttribute("stroke-width", (reg.width * 0.8).toFixed(2));
+            tail.setAttribute("stroke-linecap", "round");
+            tail.setAttribute("opacity", "0");
+            svg.appendChild(tail);
+            var needle = el("circle");
+            needle.setAttribute("r", (reg.width * 1.15).toFixed(2));
+            needle.setAttribute("fill", "var(--fg, #f8fafc)");
+            needle.setAttribute("stroke", "color-mix(in srgb, var(--std-accent) 60%, transparent)");
+            needle.setAttribute("stroke-width", (reg.width * 0.45).toFixed(2));
+            needle.setAttribute("opacity", "0");
+            svg.appendChild(needle);
+
+            // Envelope: fixed IN/OUT, elastic HOLD, never time-scaled.
+            var LEAD = 0.15;
+            var DRAW_BASE = 2.9;
+            var MARGIN = 0.15;
+            var PAUSE_BASE = 0.05;
+            var IN_BASE = LEAD + DRAW_BASE + MARGIN;
+            var OUT_BASE = exit === "none" ? 0 : 0.45;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var totalBase = Math.max(0.001, IN_BASE + OUT_BASE);
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var lead = LEAD * scale;
+            var DRAW = DRAW_BASE * scale;
+            var pause = PAUSE_BASE * scale;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var OUT_START = IN + HOLD;
+
+            // Schedule: letters sequential, each letter's window sized by
+            // its share of the total stitch length; strokes sequential
+            // within the letter by the same rule.
+            var pauses = Math.max(0, letters.length - 1) * pause;
+            var drawable = Math.max(0.05, DRAW - pauses);
+            var clock = lead;
+            for (var lj = 0; lj < letters.length; lj += 1) {
+              var lt = letters[lj];
+              var letterLen = 0;
+              for (var sk = 0; sk < lt.strokes.length; sk += 1) {
+                letterLen += lt.strokes[sk].length;
+              }
+              var letterTime = totalLength > 0 ? (drawable * letterLen) / totalLength : 0;
+              for (var sm = 0; sm < lt.strokes.length; sm += 1) {
+                var st = lt.strokes[sm];
+                var strokeTime = letterLen > 0 ? (letterTime * st.length) / letterLen : 0;
+                st.t0 = clock;
+                st.t1 = clock + Math.max(0.01, strokeTime);
+                clock = st.t1;
+              }
+              lt.t0 = lt.strokes[0].t0;
+              lt.t1 = clock;
+              clock += pause;
+            }
+
+            function clamp01(v) {
+              return v < 0 ? 0 : v > 1 ? 1 : v;
+            }
+            // backOut: overshoots ~10% past 1, then settles to exactly 1.
+            // The overshoot region drives the thread-tail.
+            function backOut(u) {
+              var c1 = 1.70158;
+              var c3 = c1 + 1;
+              var x = u - 1;
+              return 1 + c3 * x * x * x + c1 * x * x;
+            }
+            var TAIL_MAX = 16;
+
+            // Pure per-update painter (zero per-element tweens): dashoffset
+            // ATTRIBUTE, hole visibility, and the needle/tail pose are all
+            // functions of tl.time() alone. Idempotent writes.
+            function applyTime(timeSeconds) {
+              var needleOn = false;
+              var needleX = 0;
+              var needleY = 0;
+              var tailFrom = null;
+              var tailTo = null;
+              for (var i = 0; i < letters.length; i += 1) {
+                var letter = letters[i];
+                for (var j = 0; j < letter.strokes.length; j += 1) {
+                  var stroke = letter.strokes[j];
+                  var span = stroke.t1 - stroke.t0;
+                  var u = clamp01(span > 0 ? (timeSeconds - stroke.t0) / span : 1);
+                  var L = stroke.length;
+                  var visible;
+                  // Round linecaps paint a zero-length-dash dot at the exact
+                  // boundary sitting at the path start when dashoffset = L,
+                  // so undrawn strokes are also opacity-gated.
+                  stroke.el.setAttribute("opacity", u <= 0 ? "0" : "1");
+                  if (u <= 0) {
+                    stroke.el.setAttribute("stroke-dashoffset", L.toFixed(3));
+                    visible = 0;
+                  } else if (u >= 1) {
+                    stroke.el.setAttribute("stroke-dashoffset", "0");
+                    visible = L;
+                  } else {
+                    var p = backOut(u);
+                    var front = clamp01(p) * L;
+                    stroke.el.setAttribute("stroke-dashoffset", (L - front).toFixed(3));
+                    visible = front;
+                    needleOn = true;
+                    if (p <= 1) {
+                      var pt = stroke.el.getPointAtLength(front);
+                      needleX = pt.x;
+                      needleY = pt.y;
+                    } else {
+                      // Thread-tail overshoot: the needle carries the
+                      // thread past the stroke end along its exit tangent,
+                      // then the settle pulls it snug.
+                      var over = Math.min((p - 1) * L, TAIL_MAX);
+                      needleX = stroke.end[0] + stroke.tangent[0] * over;
+                      needleY = stroke.end[1] + stroke.tangent[1] * over;
+                      tailFrom = stroke.end;
+                      tailTo = [needleX, needleY];
+                    }
+                  }
+                  for (var h = 0; h < stroke.holes.length; h += 1) {
+                    stroke.holes[h].el.setAttribute(
+                      "opacity",
+                      stroke.holes[h].at <= visible && u > 0 ? "1" : "0",
+                    );
+                  }
+                }
+              }
+              if (needleOn) {
+                needle.setAttribute("opacity", "1");
+                needle.setAttribute("cx", needleX.toFixed(2));
+                needle.setAttribute("cy", needleY.toFixed(2));
+              } else {
+                needle.setAttribute("opacity", "0");
+              }
+              if (tailFrom) {
+                tail.setAttribute("opacity", "0.9");
+                tail.setAttribute("x1", tailFrom[0].toFixed(2));
+                tail.setAttribute("y1", tailFrom[1].toFixed(2));
+                tail.setAttribute("x2", tailTo[0].toFixed(2));
+                tail.setAttribute("y2", tailTo[1].toFixed(2));
+              } else {
+                tail.setAttribute("opacity", "0");
+              }
+            }
+
+            gsap.set(stage, { opacity: 1, y: "0cqh" });
+
+            var tl = gsap.timeline({
+              paused: true,
+              onUpdate: function () {
+                applyTime(tl.time());
+              },
+            });
+
+            // Anchor tween: an inert plain-object tween spanning [0, D] so
+            // onUpdate fires for every eventful seek and holds never clamp.
+            tl.to({ p: 0 }, { p: 1, duration: duration, ease: "none" }, 0);
+
+            // HOLD: truly still; repeated repaints write identical values.
+
+            // OUT: optional departure; exit none holds until the frame cuts.
+            if (exit === "up") {
+              tl.to(stage, { y: "-4cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "fade") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            }
+
+            tl.seek(0);
+            applyTime(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["stitched-text-draw"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/stop-motion-cadence/README.md b/docs/public/catalog/components/stop-motion-cadence/README.md
new file mode 100644
index 0000000000..2919fb7802
--- /dev/null
+++ b/docs/public/catalog/components/stop-motion-cadence/README.md
@@ -0,0 +1,37 @@
+# stop-motion-cadence
+
+The stepped-time law as a demo primitive (Wave M10 experiment). ONE driver quantizes timeline time FIRST, `ts = floor(t * fps) / fps`, and `ts` feeds ALL motion: four token paper-cut shapes throw-and-land in sequence at the quantized cadence, each squashing on its landing hit and recovering over the next steps, with a 2-frame boil jitter on edges (seeded per boil window, stable within it) and sparkle accents living exactly 2 or 3 steps on each hit, frame-alternating big / small-rotated like a drawn twinkle. Reference: the MotionMarkus stop-motion sheets.
+
+4s authored, elastic HOLD (the boil keeps breathing through the hold; `boil: off` holds dead still), exit `none` by default.
+
+## Variables
+
+| id       | type | default | notes                                                                                                                                                  |
+| -------- | ---- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `fps`    | enum | `10`    | Stepped-time cadence: `8`, `10`, or `12` frames per second.                                                                                            |
+| `boil`   | enum | `on`    | 2-frame edge jitter hashed from `floor(step / 2)`. `off` gives a dead-still settle.                                                                    |
+| `accent` | enum | `green` | Lead shape color: green rides `--brand`, blue rides `--accent`, violet rides `--accent-2`; the other shapes take the remaining two tokens in rotation. |
+| `exit`   | enum | `none`  | `none` holds until the cut; `fade` departs opacity-only; `up` rises out.                                                                               |
+
+## Mount
+
+```html
+<div
+  class="clip"
+  data-composition-id="stop-motion-cadence"
+  data-composition-src="./stop-motion-cadence.html"
+  data-variable-values='{"fps":"8","accent":"blue"}'
+  data-start="0"
+  data-duration="4"
+  data-track-index="0"
+></div>
+```
+
+Elastic root: no `data-width`/`data-height`; it fills whatever box the host clip gives it. Timeline registers under the literal `stop-motion-cadence` key.
+
+## Notes
+
+- The law: quantize before evaluating. Every hit is an integer step index (`landStep = round(t_land * fps)`), squash is a per-step envelope over `step - landStep`, boil seeds hash `floor(step / 2)`, sparkles are visible iff `0 <= step - landStep < life`. Because all state derives from the quantized driver, eventful seeks land identical frames forward, reverse, or shuffled.
+- Squash uses `transform-origin: 50% 100%` so shapes compress into the floor contact; contact shadows grow and darken as each shape nears the ground.
+- Deterministic: the jitter hash is a sin-fold over integer indices; no Math.random, no wall clock, no incremental state. Stage size is measured once at mount; per-update writes are transforms and opacity only.
+- If the mount duration is shorter than the 3s choreography, the throw times compress together, but the fps grid itself never scales; the cadence is absolute.
diff --git a/docs/public/catalog/components/stop-motion-cadence/demo.html b/docs/public/catalog/components/stop-motion-cadence/demo.html
new file mode 100644
index 0000000000..efaf83ee04
--- /dev/null
+++ b/docs/public/catalog/components/stop-motion-cadence/demo.html
@@ -0,0 +1,102 @@
+<!doctype html>
+<!--
+  stop-motion-cadence demo. FULL-BLEED light mount: the primitive fills
+  the whole 1920x1080 frame on a light token block. Non-default fps and
+  accent values prove the variable path.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Stop Motion Cadence Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #eef0f3);
+      }
+
+      #root {
+        --bg: #eef0f3;
+        --fg: #14161b;
+        --muted: #5b6472;
+        --surface: #ffffff;
+        --border: #d3d8e0;
+        --brand: #3f3f46;
+        --accent: #3f3f46;
+        --accent-2: #3f3f46;
+        --radius: 18px;
+        --font-display: "Inter", system-ui, sans-serif;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 42%, #f7f8fa 0%, var(--bg, #eef0f3) 72%);
+      }
+
+      .mount-bleed {
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        container-type: size;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="stop-motion-cadence-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="stop-motion-cadence-mount"
+        class="mount-bleed clip"
+        data-composition-id="stop-motion-cadence"
+        data-composition-src="./stop-motion-cadence.html"
+        data-variable-values='{"fps":"8","accent":"blue"}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="1920"
+        data-height="1080"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["stop-motion-cadence-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "stop-motion-cadence.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/stop-motion-cadence/stop-motion-cadence.html b/docs/public/catalog/components/stop-motion-cadence/stop-motion-cadence.html
new file mode 100644
index 0000000000..955b89d4ef
--- /dev/null
+++ b/docs/public/catalog/components/stop-motion-cadence/stop-motion-cadence.html
@@ -0,0 +1,467 @@
+<!doctype html>
+<!--
+  stop-motion-cadence: HyperFrames video primitive (time law, Wave M10 experiment)
+
+  The stepped-time law as a demo primitive. ONE driver: every frame the
+  timeline time is quantized FIRST,
+
+      ts = floor(t * fps) / fps
+
+  and ts feeds ALL motion. Four token paper-cut shapes throw-and-land in
+  sequence at the quantized cadence, each squashing on its landing hit
+  (transform-origin at the ground contact) and recovering over the next
+  steps. A 2-frame boil rides every shape's edges: jitter offsets are
+  hashed from the boil frame index floor(step / 2), so they are stable
+  within a 2-frame window and pure functions of time. Sparkle accents
+  live EXACTLY 2 or 3 steps on each landing hit, frame-alternating big /
+  small-rotated like a drawn twinkle (per the MotionMarkus sheets).
+
+  Because every hit is defined by an integer step index derived from the
+  quantized driver, seeks land identical frames in any order: forward,
+  reverse, or shuffled evaluation of the same t produces the same step,
+  the same boil seed, the same sparkle state.
+
+  Variables (declared in data-composition-variables below):
+    - fps ("8" | "10" | "12", default "10"): the step cadence.
+    - boil ("on" | "off", default "on"): the 2-frame edge jitter. Off
+      gives a dead-still settle.
+    - accent ("green" | "blue" | "violet", default "green"): the lead
+      shape's color; green rides --brand, blue rides --accent, violet
+      rides --accent-2 (the other shapes step down in value, not hue).
+    - exit ("none" | "fade" | "up", default "none").
+
+  Envelope, fixed IN and OUT with elastic HOLD only (never timeScale):
+    IN_BASE  = 3.0s (all four shapes landed and recovered)
+    HOLD     = max(0, D - IN - OUT); the boil keeps breathing through the
+               hold (that is the register), boil off holds dead still
+    OUT_BASE = 0.45s only when exit != none
+    If D < IN_BASE + OUT_BASE the choreography compresses together; the
+    fps grid itself never scales (the law quantizes absolute time).
+
+  Determinism: no Math.random, no wall clock, no incremental state; the
+  jitter hash is sin-fold on integer indices. Stage size is measured once
+  at mount; per-update writes are transforms and opacity only, all
+  recomputed from tl.time().
+
+  Mount contract: template-wrapped; #root fills the host box (no
+  data-width/height, container-type: size, cqmin units), styled via
+  #root only; one paused timeline under the LITERAL
+  "stop-motion-cadence" key.
+-->
+<html
+  lang="en"
+  data-composition-id="stop-motion-cadence"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "fps", "type": "enum", "role": "timing", "label": "Cadence", "description": "Stepped-time cadence in frames per second.", "default": "10", "options": [{ "value": "8", "label": "8 fps" }, { "value": "10", "label": "10 fps" }, { "value": "12", "label": "12 fps" }] },
+    { "id": "boil", "type": "enum", "role": "style", "label": "Boil", "description": "2-frame edge jitter, seeded per step. Off holds dead still.", "default": "on", "options": [{ "value": "on", "label": "On" }, { "value": "off", "label": "Off" }] },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Lead shape color: green rides --brand, blue rides --accent, violet rides --accent-2.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the settled collage holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Stop Motion Cadence</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="stop-motion-cadence" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, "Inter", system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .smc-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .smc-stage {
+            position: absolute;
+            inset: 0;
+          }
+
+          /* Paper-cut floor: a hairline plus a soft paper band. */
+          .smc-floor {
+            position: absolute;
+            left: 14cqw;
+            right: 14cqw;
+            top: 72cqh;
+            height: 0.35cqmin;
+            border-radius: 0.2cqmin;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 22%, transparent);
+          }
+
+          .smc-shape {
+            position: absolute;
+            left: 0;
+            top: 0;
+            opacity: 0;
+            filter: drop-shadow(
+              0.5cqmin 0.7cqmin 0 color-mix(in srgb, var(--bg, #000000) 35%, transparent)
+            );
+          }
+
+          .smc-shadow {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 12cqmin;
+            height: 2cqmin;
+            border-radius: 50%;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 14%, transparent);
+            opacity: 0;
+          }
+
+          .smc-circle {
+            width: 13cqmin;
+            height: 13cqmin;
+            border-radius: 50%;
+            background: var(--smc-c1);
+          }
+
+          .smc-square {
+            width: 15cqmin;
+            height: 15cqmin;
+            border-radius: 1.6cqmin;
+            background: var(--smc-c2);
+          }
+
+          .smc-tri {
+            width: 16cqmin;
+            height: 14cqmin;
+            clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
+            background: var(--smc-c3);
+          }
+
+          .smc-star {
+            width: 9cqmin;
+            height: 9cqmin;
+            clip-path: polygon(
+              50% 0%,
+              63% 34%,
+              98% 35%,
+              70% 57%,
+              81% 91%,
+              50% 70%,
+              19% 91%,
+              30% 57%,
+              2% 35%,
+              37% 34%
+            );
+            background: color-mix(in srgb, var(--fg, #f8fafc) 82%, var(--smc-c1));
+          }
+
+          .smc-sparkle {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 5.5cqmin;
+            height: 5.5cqmin;
+            clip-path: polygon(
+              50% 0%,
+              60% 40%,
+              100% 50%,
+              60% 60%,
+              50% 100%,
+              40% 60%,
+              0% 50%,
+              40% 40%
+            );
+            background: var(--fg, #f8fafc);
+            opacity: 0;
+          }
+        </style>
+
+        <div
+          id="stop-motion-cadence-clip"
+          class="smc-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="smc-stage">
+            <div class="smc-floor"></div>
+            <div class="smc-shadow" data-for="0"></div>
+            <div class="smc-shadow" data-for="1"></div>
+            <div class="smc-shadow" data-for="2"></div>
+            <div class="smc-shadow" data-for="3"></div>
+            <div class="smc-shape smc-circle"></div>
+            <div class="smc-shape smc-square"></div>
+            <div class="smc-shape smc-tri"></div>
+            <div class="smc-shape smc-star"></div>
+            <div class="smc-sparkle"></div>
+            <div class="smc-sparkle"></div>
+            <div class="smc-sparkle"></div>
+            <div class="smc-sparkle"></div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".smc-stage");
+            var shapes = root.querySelectorAll(".smc-shape");
+            var shadows = root.querySelectorAll(".smc-shadow");
+            var sparkles = root.querySelectorAll(".smc-sparkle");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var fps =
+              vars.fps === "8" || vars.fps === 8
+                ? 8
+                : vars.fps === "12" || vars.fps === 12
+                  ? 12
+                  : 10;
+            var boil = vars.boil !== "off";
+            var accentColors = {
+              green: "var(--brand, #52525b)",
+              blue: "var(--accent, #52525b)",
+              violet: "var(--accent-2, #52525b)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            // The lead shape is the one accented element; the other two paper
+            // cutouts separate by value step, not by a second and third hue.
+            root.style.setProperty("--smc-c1", accentColors[accent]);
+            root.style.setProperty(
+              "--smc-c2",
+              "color-mix(in srgb, var(--fg, #f8fafc) 72%, transparent)",
+            );
+            root.style.setProperty(
+              "--smc-c3",
+              "color-mix(in srgb, var(--fg, #f8fafc) 45%, transparent)",
+            );
+
+            // One-time stage measurement; all positions in px from here.
+            var W = Math.max(1, stage.clientWidth);
+            var H = Math.max(1, stage.clientHeight);
+            var M = Math.min(W, H);
+            var groundY = 0.72 * H;
+
+            // Envelope: fixed IN/OUT, elastic HOLD; fps grid never scales.
+            var IN_BASE = 3.0;
+            var OUT_BASE = exit === "none" ? 0 : 0.45;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var totalBase = Math.max(0.001, IN_BASE + OUT_BASE);
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var OUT = OUT_BASE * scale;
+            var HOLD = Math.max(0, duration - (IN_BASE * scale + OUT));
+            var OUT_START = IN_BASE * scale + HOLD;
+
+            // Choreography (seconds, scaled; converted to integer steps).
+            // Each shape: launch, land, from (offstage), to (on the floor),
+            // arc height, spin, squash amount, sparkle life in steps.
+            function shapeSize(el) {
+              return { w: el.offsetWidth, h: el.offsetHeight };
+            }
+            var throws = [
+              {
+                t0: 0.15,
+                t1: 1.0,
+                from: { x: -0.12 * W, yB: 0.28 * H },
+                to: 0.3 * W,
+                arc: 0.3 * H,
+                rot0: -170,
+                rot1: 8,
+                squash: 0.3,
+                life: 2,
+              },
+              {
+                t0: 0.6,
+                t1: 1.5,
+                from: { x: 1.12 * W, yB: 0.2 * H },
+                to: 0.56 * W,
+                arc: 0.34 * H,
+                rot0: 150,
+                rot1: -6,
+                squash: 0.34,
+                life: 3,
+              },
+              {
+                t0: 1.25,
+                t1: 2.0,
+                from: { x: 0.78 * W, yB: -0.12 * H },
+                to: 0.72 * W,
+                arc: 0.06 * H,
+                rot0: -120,
+                rot1: 5,
+                squash: 0.26,
+                life: 2,
+              },
+              {
+                t0: 1.8,
+                t1: 2.55,
+                from: { x: -0.08 * W, yB: 0.1 * H },
+                to: 0.43 * W,
+                arc: 0.4 * H,
+                rot0: 200,
+                rot1: -12,
+                squash: 0.22,
+                life: 3,
+              },
+            ];
+            for (var s = 0; s < throws.length; s += 1) {
+              var th = throws[s];
+              th.t0 *= scale;
+              th.t1 *= scale;
+              th.landStep = Math.round(th.t1 * fps);
+              th.size = shapeSize(shapes[s]);
+              gsap.set(shapes[s], { transformOrigin: "50% 100%" });
+            }
+
+            // Deterministic per-index hash (sin fold; no Math.random).
+            function rnd(n) {
+              var x = Math.sin(n * 127.1 + 311.7) * 43758.5453;
+              return x - Math.floor(x);
+            }
+            function clamp01(v) {
+              return v < 0 ? 0 : v > 1 ? 1 : v;
+            }
+            function lerp(a, b, p) {
+              return a + (b - a) * p;
+            }
+
+            // Squash schedule by steps-since-landing: hit, deep, rebound
+            // stretch, settle. Positive widens (scaleX 1+a, scaleY 1-a).
+            var SQUASH_ENV = [1, 0.55, -0.3, 0.1, 0];
+            function squashAt(stepsSince, amount) {
+              if (stepsSince < 0) return 0;
+              if (stepsSince >= SQUASH_ENV.length) return 0;
+              return SQUASH_ENV[stepsSince] * amount;
+            }
+
+            // THE LAW: quantize first, then evaluate everything from ts.
+            // The 1e-6 epsilon absorbs GSAP seek round-trip float error so
+            // a seek landing exactly on a step boundary quantizes the same
+            // way from either direction.
+            function applyTime(timeSeconds) {
+              var step = Math.floor(timeSeconds * fps + 1e-6);
+              var ts = step / fps;
+              var boilIdx = Math.floor(step / 2);
+
+              for (var i = 0; i < throws.length; i += 1) {
+                var th = throws[i];
+                var el = shapes[i];
+                var sw = th.size.w;
+                var sh = th.size.h;
+                var landed = step >= th.landStep;
+                var u = clamp01((ts - th.t0) / Math.max(0.001, th.t1 - th.t0));
+                if (landed) u = 1;
+                var visible = ts >= th.t0;
+
+                // Ballistic arc: linear x, parabolic lift over the line
+                // from launch height to the ground.
+                var xC = lerp(th.from.x, th.to, u);
+                var yB = lerp(th.from.yB, groundY, u) - th.arc * 4 * u * (1 - u);
+                var rot = lerp(th.rot0, th.rot1, 1 - (1 - u) * (1 - u));
+
+                // Squash on the hit, keyed to integer steps since landing.
+                var a = squashAt(step - th.landStep, th.squash);
+                var sxq = 1 + a;
+                var syq = 1 - a * 0.85;
+
+                // 2-frame boil, seeded per boil window, per shape.
+                var bx = 0;
+                var by = 0;
+                var br = 0;
+                if (boil && visible) {
+                  bx = (rnd(boilIdx * 13 + i * 101) - 0.5) * 0.008 * M;
+                  by = (rnd(boilIdx * 29 + i * 211) - 0.5) * 0.008 * M;
+                  br = (rnd(boilIdx * 47 + i * 331) - 0.5) * 1.6;
+                }
+
+                gsap.set(el, {
+                  x: xC - sw / 2 + bx,
+                  y: yB - sh + by,
+                  rotation: rot + br,
+                  scaleX: sxq,
+                  scaleY: syq,
+                  opacity: visible ? 1 : 0,
+                });
+
+                // Contact shadow: grows and darkens as the shape nears
+                // the floor, pinned to the landing spot.
+                var height = clamp01((groundY - yB) / (0.45 * H));
+                var shadowScale = lerp(1.05, 0.55, height);
+                gsap.set(shadows[i], {
+                  x: xC - 0.06 * M,
+                  y: groundY - 0.01 * M,
+                  scaleX: shadowScale * (landed ? sxq : 1),
+                  scaleY: shadowScale * 0.9,
+                  opacity: visible ? lerp(0.85, 0.25, height) : 0,
+                });
+
+                // Sparkle: alive for EXACTLY life steps from the hit,
+                // frame-alternating big / small rotated 45deg.
+                var d = step - th.landStep;
+                var sp = sparkles[i];
+                if (d >= 0 && d < th.life) {
+                  var side = i % 2 === 0 ? -1 : 1;
+                  gsap.set(sp, {
+                    x: xC + side * (sw * 0.62) - 0.0275 * M,
+                    y: groundY - sh * 0.9,
+                    scale: d % 2 === 0 ? 1 : 0.62,
+                    rotation: d % 2 === 0 ? 0 : 45,
+                    opacity: 1,
+                  });
+                } else {
+                  gsap.set(sp, { opacity: 0 });
+                }
+              }
+            }
+
+            gsap.set(stage, { opacity: 1, y: "0cqh" });
+
+            var tl = gsap.timeline({
+              paused: true,
+              onUpdate: function () {
+                applyTime(tl.time());
+              },
+            });
+
+            // Anchor tween: inert, spans [0, D] so onUpdate fires for
+            // every eventful seek and holds never clamp short.
+            tl.to({ p: 0 }, { p: 1, duration: duration, ease: "none" }, 0);
+
+            // OUT: optional departure; exit none holds until the cut.
+            if (exit === "up") {
+              tl.to(stage, { y: "-4cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "fade") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            }
+
+            tl.seek(0);
+            applyTime(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["stop-motion-cadence"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/store-badge-lockup/demo.html b/docs/public/catalog/components/store-badge-lockup/demo.html
new file mode 100644
index 0000000000..7b6e828639
--- /dev/null
+++ b/docs/public/catalog/components/store-badge-lockup/demo.html
@@ -0,0 +1,118 @@
+<!doctype html>
+<!--
+  store-badge-lockup demo: standalone 1920x1080 host composition. It mounts
+  the primitive through data-composition-src into a definite end-card panel.
+  Default variable values keep both CSS-drawn badges visible for screening.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Store Badge Lockup Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+
+      #root {
+        --bg: #080b13;
+        --fg: #f7f9fc;
+        --muted: #aab4c5;
+        --surface: #151c29;
+        --border: #3b4659;
+        --brand: #7c6cff;
+        --accent: #42d3b2;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-body: Inter, system-ui, sans-serif;
+        --font-mono: ui-monospace, monospace;
+        --radius: 2.4cqh;
+        --space-1: 1.2cqh;
+        --space-2: 2.4cqh;
+        --space-3: 4.8cqh;
+        --dur-beat: 0.4s;
+        --ease-standard: cubic-bezier(0.215, 0.61, 0.355, 1);
+        --ease-emphasis: cubic-bezier(0.19, 1, 0.22, 1);
+        --ease-exit: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        display: grid;
+        place-items: center;
+        background: radial-gradient(
+          ellipse at 50% 44%,
+          color-mix(in srgb, var(--surface) 72%, var(--bg)),
+          var(--bg) 72%
+        );
+      }
+
+      .mount-card {
+        width: 66%;
+        height: 58%;
+        left: 17%;
+        top: 21%;
+        overflow: hidden;
+        border: 0.14cqh solid var(--border);
+        border-radius: calc(var(--radius) * 1.45);
+        background: var(--bg);
+        box-shadow: 0 4cqh 11cqh color-mix(in srgb, var(--fg) 11%, transparent);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="store-badge-lockup-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="store-badge-lockup-mount"
+        class="mount-card clip"
+        data-composition-id="store-badge-lockup"
+        data-composition-src="./store-badge-lockup.html"
+        data-variable-values='{"headline":"Get the app","showApple":"yes","showGoogle":"yes"}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="1267"
+        data-height="626"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["store-badge-lockup-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "store-badge-lockup.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/store-badge-lockup/store-badge-lockup.html b/docs/public/catalog/components/store-badge-lockup/store-badge-lockup.html
new file mode 100644
index 0000000000..ad55505f2a
--- /dev/null
+++ b/docs/public/catalog/components/store-badge-lockup/store-badge-lockup.html
@@ -0,0 +1,305 @@
+<!doctype html>
+<!--
+  store-badge-lockup: HyperFrames video primitive (ui-props / holdable / ask)
+
+  Concept: a short headline settles first, followed by equal-size App Store
+  and Google Play download badges that rise and fade into a standard mobile
+  end-card lockup. The badges use generic CSS glyphs and token paint only.
+
+  Compiled-from evidence: GAP B1 mobile close. The B1 consumer simulation
+  needed a mobile-native close, while the coverage audit found no registry
+  item that presents and animates the two store badges as one download CTA.
+
+  Use when: an app launch or mobile product film needs to end with store
+  destinations instead of a web URL.
+
+  Variables:
+    - headline (string, default "Get the app"): end-card action line.
+    - showApple (yes | no, default yes): include the App Store badge.
+    - showGoogle (yes | no, default yes): include the Google Play badge.
+
+  Envelope (holdable):
+    IN   1.20s fixed headline-first settle and staggered badge entrance.
+    HOLD elastic and deliberately still so the CTA remains readable.
+    OUT  0.45s fixed release fade.
+    If D is shorter than 1.65s, IN and OUT scale together. HOLD is the only
+    elastic phase, and the timeline is never time-scaled.
+
+  Sync point:
+    - lockup-settled at 1.00s into IN. This fixed offset compresses only for
+      short durations and never enters HOLD.
+
+  Sound cues: none. The lockup has no discrete impact event.
+
+  Mount contract: this file is a template-wrapped sub-composition. The host
+  owns dimensions. #root fills the host box with inset:0 and container-type:
+  size, carries no data-width or data-height, and registers one paused GSAP
+  timeline under the hardcoded id "store-badge-lockup".
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "headline", "type": "string", "role": "content", "label": "Headline", "description": "Short action line shown above the store badges.", "default": "Get the app" },
+    { "id": "showApple", "type": "enum", "role": "content", "label": "Show App Store", "description": "Show or hide the App Store badge.", "default": "yes", "options": [{ "value": "yes", "label": "Yes" }, { "value": "no", "label": "No" }] },
+    { "id": "showGoogle", "type": "enum", "role": "content", "label": "Show Google Play", "description": "Show or hide the Google Play badge.", "default": "yes", "options": [{ "value": "yes", "label": "Yes" }, { "value": "no", "label": "No" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Store Badge Lockup</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="store-badge-lockup" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            color: var(--fg);
+            font-family: var(--font-body);
+          }
+
+          .sbl-clip {
+            width: 100%;
+            height: 100%;
+            display: grid;
+            place-items: center;
+            padding: var(--space-3);
+            overflow: hidden;
+            background: var(--bg);
+          }
+
+          .sbl-lockup {
+            width: min(88cqw, 154cqh);
+            display: grid;
+            justify-items: center;
+            gap: min(6cqw, 7cqh);
+          }
+
+          .sbl-headline {
+            margin: 0;
+            max-width: 82cqw;
+            color: var(--fg);
+            font-family: var(--font-display);
+            font-size: min(8.2cqw, 12.5cqh);
+            font-weight: 750;
+            line-height: 1;
+            letter-spacing: -0.045em;
+            text-align: center;
+            text-wrap: balance;
+            will-change: transform, opacity;
+          }
+
+          .sbl-badges {
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: var(--space-2);
+          }
+
+          /* EDIT ZONE: both destinations share one badge geometry and one
+             text hierarchy. This single rule owns sizing, spacing, and order
+             so the pair cannot drift into mismatched lockups. */
+          .sbl-badge {
+            width: min(40cqw, 67cqh);
+            aspect-ratio: 3.12 / 1;
+            display: grid;
+            grid-template-columns: auto minmax(0, 1fr);
+            align-items: center;
+            gap: var(--space-1);
+            padding: min(2.2cqw, 3.2cqh) min(3cqw, 4.8cqh);
+            border: 0.16cqh solid var(--border);
+            border-radius: calc(var(--radius) * 4);
+            background: var(--surface);
+            color: var(--fg);
+            box-shadow: 0 1.5cqh 3.8cqh color-mix(in srgb, var(--bg) 70%, transparent);
+            will-change: transform, opacity;
+          }
+
+          .sbl-glyph {
+            width: min(6.7cqw, 10.5cqh);
+            aspect-ratio: 1;
+            display: grid;
+            place-items: center;
+            flex: none;
+            border: 0.16cqh solid color-mix(in srgb, var(--fg) 28%, transparent);
+            border-radius: calc(var(--radius) * 0.72);
+            background: color-mix(in srgb, var(--brand) 20%, var(--surface));
+            color: var(--fg);
+          }
+
+          .sbl-apple-mark {
+            font-family: var(--font-display);
+            font-size: min(3.2cqw, 5.2cqh);
+            font-weight: 800;
+            line-height: 1;
+          }
+
+          .sbl-play-mark {
+            width: 42%;
+            aspect-ratio: 0.88;
+            clip-path: polygon(8% 0, 100% 50%, 8% 100%);
+            background: currentColor;
+          }
+
+          .sbl-copy {
+            min-width: 0;
+            display: grid;
+            gap: min(0.4cqw, 0.6cqh);
+          }
+
+          .sbl-microcopy {
+            color: var(--muted);
+            font-family: var(--font-body);
+            font-size: min(1.65cqw, 2.65cqh);
+            font-weight: 600;
+            line-height: 1;
+            letter-spacing: 0.04em;
+            white-space: nowrap;
+          }
+
+          .sbl-label {
+            color: var(--fg);
+            font-family: var(--font-display);
+            font-size: min(3.75cqw, 5.8cqh);
+            font-weight: 720;
+            line-height: 1;
+            letter-spacing: -0.025em;
+            white-space: nowrap;
+          }
+        </style>
+
+        <div
+          id="store-badge-lockup-clip"
+          class="sbl-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <section class="sbl-lockup" aria-label="Download the app">
+            <h1 class="sbl-headline"></h1>
+            <div class="sbl-badges">
+              <div class="sbl-badge sbl-apple" role="img" aria-label="Download on the App Store">
+                <span class="sbl-glyph" aria-hidden="true">
+                  <span class="sbl-apple-mark">A</span>
+                </span>
+                <span class="sbl-copy" aria-hidden="true">
+                  <span class="sbl-microcopy">Download on the</span>
+                  <span class="sbl-label">App Store</span>
+                </span>
+              </div>
+
+              <div class="sbl-badge sbl-google" role="img" aria-label="Get it on Google Play">
+                <span class="sbl-glyph" aria-hidden="true">
+                  <span class="sbl-play-mark"></span>
+                </span>
+                <span class="sbl-copy" aria-hidden="true">
+                  <span class="sbl-microcopy">GET IT ON</span>
+                  <span class="sbl-label">Google Play</span>
+                </span>
+              </div>
+            </div>
+          </section>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var compositionId = "store-badge-lockup";
+            var lockup = root.querySelector(".sbl-lockup");
+            var headlineElement = root.querySelector(".sbl-headline");
+            var appleBadge = root.querySelector(".sbl-apple");
+            var googleBadge = root.querySelector(".sbl-google");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            /* INVARIANT: getVariables() owns all three public decisions.
+               Missing values use the declared defaults. Only an explicit
+               "no" removes a badge, while an empty headline remains empty. */
+            var headline = vars.headline == null ? "Get the app" : String(vars.headline);
+            var showApple = vars.showApple === "no" ? "no" : "yes";
+            var showGoogle = vars.showGoogle === "no" ? "no" : "yes";
+
+            headlineElement.textContent = headline;
+            if (showApple === "no") {
+              appleBadge.remove();
+            }
+            if (showGoogle === "no") {
+              googleBadge.remove();
+            }
+
+            var badgeElements = root.querySelectorAll(".sbl-badge");
+
+            /* RETIME RANGE: these constants own the complete lifecycle. The
+               headline finishes first. Both badges then rise and fade on
+               --ease-standard's GSAP owner, power2.out, with a small stagger. */
+            var IN_BASE = 1.2;
+            var OUT_BASE = 0.45;
+            var HEADLINE_START_BASE = 0.05;
+            var HEADLINE_DURATION_BASE = 0.48;
+            var BADGE_START_BASE = 0.22;
+            var BADGE_DURATION_BASE = 0.68;
+            var BADGE_STAGGER_BASE = 0.1;
+            var durationValue = Number(root.dataset.duration);
+            var duration = Number.isFinite(durationValue) && durationValue > 0 ? durationValue : 4;
+            var scale = duration < IN_BASE + OUT_BASE ? duration / (IN_BASE + OUT_BASE) : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var OUT_START = IN + HOLD;
+
+            var timeline = gsap.timeline({ paused: true });
+
+            timeline.fromTo(
+              headlineElement,
+              { y: "22%", opacity: 0 },
+              {
+                y: "0%",
+                opacity: 1,
+                duration: HEADLINE_DURATION_BASE * scale,
+                ease: "power2.out",
+              },
+              HEADLINE_START_BASE * scale,
+            );
+
+            if (badgeElements.length > 0) {
+              timeline.fromTo(
+                badgeElements,
+                { y: "28%", opacity: 0 },
+                {
+                  y: "0%",
+                  opacity: 1,
+                  duration: BADGE_DURATION_BASE * scale,
+                  stagger: BADGE_STAGGER_BASE * scale,
+                  ease: "power2.out",
+                },
+                BADGE_START_BASE * scale,
+              );
+            }
+
+            timeline.to(lockup, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            timeline.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = timeline;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/strikethrough-replace/__hf-variables-preview.html b/docs/public/catalog/components/strikethrough-replace/__hf-variables-preview.html
new file mode 100644
index 0000000000..fce812a377
--- /dev/null
+++ b/docs/public/catalog/components/strikethrough-replace/__hf-variables-preview.html
@@ -0,0 +1,76 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Strikethrough Replace variables preview</title>
+    <style>
+      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #f7f7f8; }
+      #hf-vars-root { position: relative; width: 1920px; height: 1080px; }
+      #hf-vars-mount { position: absolute; inset: 0; display: grid; place-items: center; }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  </head>
+  <body>
+    <div id="hf-vars-root" data-composition-id="strikethrough-replace-variables-preview" data-start="0" data-width="1920" data-height="1080" data-duration="5" data-fps="30">
+      <div id="hf-vars-mount" class="clip" data-composition-id="strikethrough-replace" data-composition-src="./strikethrough-replace.html" data-start="0" data-duration="5" data-track-index="0" data-width="1920" data-height="1080"></div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["strikethrough-replace-variables-preview"] = gsap.timeline({ paused: true });
+    </script>
+    <script>
+      (function () {
+        var mount = document.getElementById("hf-vars-mount");
+        // The mount is filled asynchronously, and the demo script selects
+        // what it fills it with, so it cannot run before then.
+        var observer = new MutationObserver(build);
+        observer.observe(mount, { childList: true, subtree: true });
+        build();
+        function build() {
+          if (!mount.firstElementChild) return;
+          observer.disconnect();
+
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-strikethrough-replace i",
+          { "--hf-strike-progress": 0 },
+          { "--hf-strike-progress": 1, duration: 0.28, ease: "power2.out" },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-strikethrough-replace strong",
+          { "--hf-replace-opacity": 0, y: 14 },
+          { "--hf-replace-opacity": 1, y: 0, duration: 0.3, ease: "power2.out" },
+          startTime + 0.24,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["strikethrough-replace-demo"] = tl;
+          var child = window.__timelines["strikethrough-replace-demo"];
+          delete window.__timelines["strikethrough-replace-demo"];
+          if (!child || typeof child.paused !== "function") return;
+          child.paused(false);
+          window.__timelines["strikethrough-replace-variables-preview"].add(child, 0);
+        }
+      })();
+    </script>
+<script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "strikethrough-replace.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/strikethrough-replace/demo.html b/docs/public/catalog/components/strikethrough-replace/demo.html
new file mode 100644
index 0000000000..73f66c26e1
--- /dev/null
+++ b/docs/public/catalog/components/strikethrough-replace/demo.html
@@ -0,0 +1,116 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Strikethrough Replace - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        min-width: 900px;
+        min-height: 500px;
+        padding: 64px;
+        /* ponytail: scale non-GSAP wrapper; GSAP targets are children */
+        transform: scale(2.8);
+      }
+      .hf-remocn-strikethrough-replace {
+        color: #18181b;
+        font-family: Inter, system-ui, sans-serif;
+        font-weight: 900;
+        letter-spacing: -0.04em;
+      }
+      .hf-remocn-strikethrough-replace {
+        position: relative;
+        display: inline-grid;
+        grid-auto-flow: column;
+        gap: 18px;
+        align-items: center;
+        font-size: 58px;
+      }
+      .hf-remocn-strikethrough-replace i {
+        position: absolute;
+        left: 0;
+        width: 48%;
+        height: 6px;
+        border-radius: 999px;
+        background: #ef4444;
+        transform: scaleX(var(--hf-strike-progress, 1));
+        transform-origin: left center;
+      }
+      .hf-remocn-strikethrough-replace strong {
+        opacity: var(--hf-replace-opacity, 1);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="strikethrough-replace-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-strikethrough-replace">
+          <span>Slow</span><i></i><strong>Fast</strong>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-strikethrough-replace i",
+          { "--hf-strike-progress": 0 },
+          { "--hf-strike-progress": 1, duration: 0.28, ease: "power2.out" },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-strikethrough-replace strong",
+          { "--hf-replace-opacity": 0, y: 14 },
+          { "--hf-replace-opacity": 1, y: 0, duration: 0.3, ease: "power2.out" },
+          startTime + 0.24,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["strikethrough-replace-demo"] = tl;
+      </script>
+    </div>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "strikethrough-replace.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/strikethrough-replace/strikethrough-replace.html b/docs/public/catalog/components/strikethrough-replace/strikethrough-replace.html
new file mode 100644
index 0000000000..5418867da8
--- /dev/null
+++ b/docs/public/catalog/components/strikethrough-replace/strikethrough-replace.html
@@ -0,0 +1,113 @@
+<!--
+  Strikethrough Replace - remocn typography primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Drive the timeline
+  integration from a paused GSAP timeline so renders remain deterministic.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result as a custom property
+  the CSS below consumes. The timeline recipe at the bottom is untouched by
+  them: it keeps drawing one strike and fading in one replacement, and these
+  decide which way that strike draws and what the pair looks like.
+
+    - origin (left | center | right, default left): the edge the strike grows
+      out of while the timeline runs its scale from 0 to 1. left wipes forward,
+      right wipes backward, center opens from the middle outwards. Once the
+      line is fully drawn all three look the same, so this reads while the
+      strike is drawing, not after it has landed.
+    - thickness (thin | standard | thick, default standard): height of the
+      strike line, 3px, 6px or 10px.
+    - tint (red | amber | blue | violet, default red): strike colour. red and
+      amber are literal, blue and violet ride --accent and --accent-2.
+    - tone (ink | paper, default ink): colour of both words. ink is near-black
+      for light frames, paper near-white for dark ones.
+
+  On every default the result is identical to the original: a 6px red line
+  wipes left to right across near-black text, then the replacement fades up.
+-->
+
+<div
+  class="hf-remocn-strikethrough-replace"
+  data-composition-variables='[
+    { "id": "origin", "type": "enum", "role": "motion", "label": "Origin", "description": "Edge the strike grows out of as the timeline runs its scale from 0 to 1.", "default": "left", "options": [{ "value": "left", "label": "Left" }, { "value": "center", "label": "Center" }, { "value": "right", "label": "Right" }] },
+    { "id": "thickness", "type": "enum", "role": "style", "label": "Thickness", "description": "Height of the strike line, from a hairline rule to a heavy bar.", "default": "standard", "options": [{ "value": "thin", "label": "Thin" }, { "value": "standard", "label": "Standard" }, { "value": "thick", "label": "Thick" }] },
+    { "id": "tint", "type": "enum", "role": "style", "label": "Tint", "description": "Strike colour. Blue and violet ride --accent and --accent-2.", "default": "red", "options": [{ "value": "red", "label": "Red" }, { "value": "amber", "label": "Amber" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Colour of both words: ink for light frames, paper for dark ones.", "default": "ink", "options": [{ "value": "ink", "label": "Ink" }, { "value": "paper", "label": "Paper" }] }
+  ]'
+>
+  <span>Slow</span><i></i><strong>Fast</strong>
+</div>
+
+<style>
+  .hf-remocn-strikethrough-replace {
+    color: var(--hf-strike-text-color, #18181b);
+    font-family: Inter, system-ui, sans-serif;
+    font-weight: 900;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-strikethrough-replace {
+    position: relative;
+    display: inline-grid;
+    grid-auto-flow: column;
+    gap: 18px;
+    align-items: center;
+    font-size: 58px;
+  }
+  .hf-remocn-strikethrough-replace i {
+    position: absolute;
+    left: 0;
+    width: 48%;
+    height: var(--hf-strike-thickness, 6px);
+    border-radius: 999px;
+    background: var(--hf-strike-color, #ef4444);
+    transform: scaleX(var(--hf-strike-progress, 1));
+    transform-origin: var(--hf-strike-origin, left center);
+  }
+  .hf-remocn-strikethrough-replace strong {
+    opacity: var(--hf-replace-opacity, 1);
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    var origins = { left: "left center", center: "center", right: "right center" };
+    var thicknesses = { thin: "3px", standard: "6px", thick: "10px" };
+    var tints = {
+      red: "#ef4444",
+      amber: "#f59e0b",
+      blue: "var(--accent, #38bdf8)",
+      violet: "var(--accent-2, #a78bfa)",
+    };
+    var tones = { ink: "#18181b", paper: "#fafafa" };
+
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var origin = origins[pick(origins, vars.origin, "left")];
+    var thickness = thicknesses[pick(thicknesses, vars.thickness, "standard")];
+    var tint = tints[pick(tints, vars.tint, "red")];
+    var tone = tones[pick(tones, vars.tone, "ink")];
+
+    var roots = document.querySelectorAll(".hf-remocn-strikethrough-replace");
+    for (var i = 0; i < roots.length; i += 1) {
+      roots[i].style.setProperty("--hf-strike-origin", origin);
+      roots[i].style.setProperty("--hf-strike-thickness", thickness);
+      roots[i].style.setProperty("--hf-strike-color", tint);
+      roots[i].style.setProperty("--hf-strike-text-color", tone);
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-strikethrough-replace i', { '--hf-strike-progress': 0 }, { '--hf-strike-progress': 1, duration: 0.28, ease: 'power2.out' }, startTime); tl.fromTo('.hf-remocn-strikethrough-replace strong', { '--hf-replace-opacity': 0, y: 14 }, { '--hf-replace-opacity': 1, y: 0, duration: 0.3, ease: 'power2.out' }, startTime + 0.24);
+-->
diff --git a/docs/public/catalog/components/success-check/__hf-variables-preview.html b/docs/public/catalog/components/success-check/__hf-variables-preview.html
new file mode 100644
index 0000000000..b3964d1025
--- /dev/null
+++ b/docs/public/catalog/components/success-check/__hf-variables-preview.html
@@ -0,0 +1,88 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Success Check variables preview</title>
+    <style>
+      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #f7f7f8; }
+      #hf-vars-root { position: relative; width: 1920px; height: 1080px; }
+      #hf-vars-mount { position: absolute; inset: 0; display: grid; place-items: center; }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  </head>
+  <body>
+    <div id="hf-vars-root" data-composition-id="success-check-variables-preview" data-start="0" data-width="1920" data-height="1080" data-duration="5" data-fps="30">
+      <div id="hf-vars-mount" class="clip" data-composition-id="success-check" data-composition-src="./success-check.html" data-start="0" data-duration="5" data-track-index="0" data-width="1920" data-height="1080"></div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["success-check-variables-preview"] = gsap.timeline({ paused: true });
+    </script>
+    <script>
+      (function () {
+        var mount = document.getElementById("hf-vars-mount");
+        // The mount is filled asynchronously, and the demo script selects
+        // what it fills it with, so it cannot run before then.
+        var observer = new MutationObserver(build);
+        observer.observe(mount, { childList: true, subtree: true });
+        build();
+        function build() {
+          if (!mount.firstElementChild) return;
+          observer.disconnect();
+
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-transition-success-check svg",
+          {
+            opacity: 0,
+            "--hf-check-scale": 0.72,
+            "--hf-check-rotate": "-18deg",
+            "--hf-check-blur": "7px",
+          },
+          {
+            opacity: 1,
+            "--hf-check-scale": 1,
+            "--hf-check-rotate": "0deg",
+            "--hf-check-blur": "0px",
+            duration: 0.34,
+            ease: "back.out(1.8)",
+          },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-transition-success-check path",
+          { "--hf-check-dash": 36 },
+          { "--hf-check-dash": 0, duration: 0.42, ease: "power2.out" },
+          startTime + 0.12,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["success-check-demo"] = tl;
+          var child = window.__timelines["success-check-demo"];
+          delete window.__timelines["success-check-demo"];
+          if (!child || typeof child.paused !== "function") return;
+          child.paused(false);
+          window.__timelines["success-check-variables-preview"].add(child, 0);
+        }
+      })();
+    </script>
+<script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "success-check.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/success-check/demo.html b/docs/public/catalog/components/success-check/demo.html
new file mode 100644
index 0000000000..fe83809218
--- /dev/null
+++ b/docs/public/catalog/components/success-check/demo.html
@@ -0,0 +1,133 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Success Check - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        min-width: 760px;
+        min-height: 480px;
+        padding: 56px;
+      }
+      .hf-transition-success-check {
+        display: grid;
+        place-items: center;
+        /* ponytail: sized up from 82px to fill ~55% of frame height at 1080p */
+        width: 340px;
+        height: 340px;
+        border-radius: 999px;
+        background: #dcfce7;
+        color: #16a34a;
+        box-shadow:
+          0 24px 80px rgba(22, 163, 74, 0.18),
+          0 4px 16px rgba(22, 163, 74, 0.1);
+      }
+      .hf-transition-success-check svg {
+        width: 220px;
+        height: 220px;
+        fill: none;
+        stroke: currentColor;
+        stroke-width: 3.5;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        filter: blur(var(--hf-check-blur, 0px));
+        transform: rotate(var(--hf-check-rotate, 0deg)) scale(var(--hf-check-scale, 1));
+      }
+      .hf-transition-success-check circle {
+        opacity: 0.28;
+      }
+      .hf-transition-success-check path {
+        stroke-dasharray: 36;
+        stroke-dashoffset: var(--hf-check-dash, 0);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="success-check-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-transition-success-check" aria-label="Success">
+          <svg viewBox="0 0 64 64">
+            <circle cx="32" cy="32" r="27" />
+            <path d="M20 33.5l8 8L45 23" />
+          </svg>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-transition-success-check svg",
+          {
+            opacity: 0,
+            "--hf-check-scale": 0.72,
+            "--hf-check-rotate": "-18deg",
+            "--hf-check-blur": "7px",
+          },
+          {
+            opacity: 1,
+            "--hf-check-scale": 1,
+            "--hf-check-rotate": "0deg",
+            "--hf-check-blur": "0px",
+            duration: 0.34,
+            ease: "back.out(1.8)",
+          },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-transition-success-check path",
+          { "--hf-check-dash": 36 },
+          { "--hf-check-dash": 0, duration: 0.42, ease: "power2.out" },
+          startTime + 0.12,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["success-check-demo"] = tl;
+      </script>
+    </div>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "success-check.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/success-check/success-check.html b/docs/public/catalog/components/success-check/success-check.html
new file mode 100644
index 0000000000..92913d6944
--- /dev/null
+++ b/docs/public/catalog/components/success-check/success-check.html
@@ -0,0 +1,135 @@
+<!--
+  Success Check - transitions.dev-inspired primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Use the timeline
+  integration note at the bottom as the starting point for deterministic GSAP
+  animation.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result as a custom property
+  the CSS below consumes. The timeline recipe at the bottom is untouched by
+  them: it keeps popping the mark in and drawing the tick, and these decide how
+  big it is, what colour it wears and how far the pop swings.
+
+    - tint (green | blue | violet | amber, default green): the colour pair, a
+      pale halo behind a saturated mark. green and amber are literal state
+      colours and stay legible whatever the surrounding theme tokens hold; blue
+      and violet name no state, so their mark rides the composition's own accent
+      and accent-2 tokens over a neutral halo and falls back to ink when the
+      composition declares none.
+    - size (small | standard | large, default standard): diameter of the halo
+      and of the mark inside it, 60px, 82px or 110px. The stroke is in viewBox
+      units, so it thickens with the mark instead of staying pinned.
+    - ring (subtle | standard | bold, default standard): opacity of the circle
+      the tick sits in, 0.12, 0.28 or 0.6.
+    - spin (subtle | standard | bold, default standard): multiplies the rotation
+      the timeline drives, so the mark swings a quarter as far or twice as far
+      into place. It scales what is already there rather than replacing it, so
+      it still lands square at the end of the pop, and at rest, with no rotation
+      driven, all three settle identically.
+
+  On every default the result is identical to the original: an 82px pale green
+  halo, a green tick, a 0.28 ring, and the authored -18deg pop.
+-->
+
+<div
+  class="hf-transition-success-check"
+  aria-label="Success"
+  data-composition-variables='[
+    { "id": "tint", "type": "enum", "role": "style", "label": "Tint", "description": "Colour pair, a pale halo behind a saturated mark. green and amber are literal state colours; blue and violet ride the composition theme tokens.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }, { "value": "amber", "label": "Amber" }] },
+    { "id": "size", "type": "enum", "role": "layout", "label": "Size", "description": "Diameter of the halo and of the mark inside it.", "default": "standard", "options": [{ "value": "small", "label": "Small" }, { "value": "standard", "label": "Standard" }, { "value": "large", "label": "Large" }] },
+    { "id": "ring", "type": "enum", "role": "style", "label": "Ring", "description": "Opacity of the circle the tick sits in.", "default": "standard", "options": [{ "value": "subtle", "label": "Subtle" }, { "value": "standard", "label": "Standard" }, { "value": "bold", "label": "Bold" }] },
+    { "id": "spin", "type": "enum", "role": "motion", "label": "Spin", "description": "Multiplies the rotation the timeline drives, so the mark swings less or more into place.", "default": "standard", "options": [{ "value": "subtle", "label": "Subtle" }, { "value": "standard", "label": "Standard" }, { "value": "bold", "label": "Bold" }] }
+  ]'
+>
+  <svg viewBox="0 0 64 64">
+    <circle cx="32" cy="32" r="27" />
+    <path d="M20 33.5l8 8L45 23" />
+  </svg>
+</div>
+
+<style>
+  .hf-transition-success-check {
+    display: grid;
+    place-items: center;
+    width: var(--hf-check-size, 82px);
+    height: var(--hf-check-size, 82px);
+    border-radius: 999px;
+    background: var(--hf-check-halo, #dcfce7);
+    color: var(--hf-check-ink, #16a34a);
+  }
+  .hf-transition-success-check svg {
+    width: var(--hf-check-mark-size, 64px);
+    height: var(--hf-check-mark-size, 64px);
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 5;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    filter: blur(var(--hf-check-blur, 0px));
+    transform: rotate(calc(var(--hf-check-rotate, 0deg) * var(--hf-check-spin, 1)))
+      scale(var(--hf-check-scale, 1));
+  }
+  .hf-transition-success-check circle {
+    opacity: var(--hf-check-ring-opacity, 0.28);
+  }
+  .hf-transition-success-check path {
+    stroke-dasharray: 36;
+    stroke-dashoffset: var(--hf-check-dash, 0);
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    // The mark is the whole composition and its colour is its meaning, so this
+    // is the one place an accent belongs. green and amber are the literal
+    // success and caution conventions; blue and violet named no state, so they
+    // ride the composition's own tokens over a neutral halo and fall back to
+    // ink when the composition declares none.
+    var tints = {
+      green: { halo: "#dcfce7", ink: "#16a34a" },
+      blue: { halo: "#f4f4f5", ink: "var(--accent, #18181b)" },
+      violet: { halo: "#f4f4f5", ink: "var(--accent-2, #18181b)" },
+      amber: { halo: "#fef3c7", ink: "#d97706" },
+    };
+    var sizes = {
+      small: { box: "60px", mark: "47px" },
+      standard: { box: "82px", mark: "64px" },
+      large: { box: "110px", mark: "86px" },
+    };
+    var rings = { subtle: "0.12", standard: "0.28", bold: "0.6" };
+    var spins = { subtle: "0.4", standard: "1", bold: "2" };
+
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var tint = tints[pick(tints, vars.tint, "green")];
+    var size = sizes[pick(sizes, vars.size, "standard")];
+    var ring = rings[pick(rings, vars.ring, "standard")];
+    var spin = spins[pick(spins, vars.spin, "standard")];
+
+    var roots = document.querySelectorAll(".hf-transition-success-check");
+    for (var i = 0; i < roots.length; i += 1) {
+      roots[i].style.setProperty("--hf-check-halo", tint.halo);
+      roots[i].style.setProperty("--hf-check-ink", tint.ink);
+      roots[i].style.setProperty("--hf-check-size", size.box);
+      roots[i].style.setProperty("--hf-check-mark-size", size.mark);
+      roots[i].style.setProperty("--hf-check-ring-opacity", ring);
+      roots[i].style.setProperty("--hf-check-spin", spin);
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-transition-success-check svg', { opacity: 0, '--hf-check-scale': 0.72, '--hf-check-rotate': '-18deg', '--hf-check-blur': '7px' }, { opacity: 1, '--hf-check-scale': 1, '--hf-check-rotate': '0deg', '--hf-check-blur': '0px', duration: 0.34, ease: 'back.out(1.8)' }, startTime); tl.fromTo('.hf-transition-success-check path', { '--hf-check-dash': 36 }, { '--hf-check-dash': 0, duration: 0.42, ease: 'power2.out' }, startTime + 0.12);
+-->
diff --git a/docs/public/catalog/components/svg-line-draw-loader/demo.html b/docs/public/catalog/components/svg-line-draw-loader/demo.html
new file mode 100644
index 0000000000..0e35ece9e9
--- /dev/null
+++ b/docs/public/catalog/components/svg-line-draw-loader/demo.html
@@ -0,0 +1,118 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>SVG Line Draw Loader - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: var(--bg, #f4f4f5);
+        font-family: var(--font-body, Inter, system-ui, sans-serif);
+      }
+      .hf-advanced-svg-line-draw-loader {
+        color: var(--fg, #18181b);
+        font-family: var(--font-body, Inter, system-ui, sans-serif);
+      }
+      .hf-advanced-svg-line-draw-loader {
+        width: 720px;
+        min-height: 420px;
+        border-radius: 16px;
+        padding: 48px;
+        background: var(--surface, #ffffff);
+        box-shadow:
+          0 24px 70px rgba(0, 0, 0, 0.1),
+          0 1px 0 var(--border, #e4e4e7) inset;
+        border: 1px solid var(--border, #e4e4e7);
+        display: grid;
+        place-items: center;
+        /* ponytail: scale wrapper — GSAP only targets path, not this element */
+        transform: scale(1.7);
+      }
+      .hf-advanced-svg-line-draw-loader .grid {
+        display: grid;
+        grid-template-columns: repeat(8, 46px);
+        gap: 10px;
+      }
+      .hf-advanced-svg-line-draw-loader .cell {
+        width: 46px;
+        height: 46px;
+        border-radius: 14px;
+        background: color-mix(in srgb, var(--fg, #111827) 45%, transparent);
+        transform: translateY(var(--hf-cell-y, 0px)) scale(var(--hf-cell-scale, 1));
+        opacity: var(--hf-cell-opacity, 1);
+      }
+      .hf-advanced-svg-line-draw-loader svg {
+        width: 520px;
+        height: 220px;
+        overflow: visible;
+      }
+      .hf-advanced-svg-line-draw-loader path {
+        fill: none;
+        stroke: var(--accent, #18181b);
+        stroke-width: 12;
+        stroke-linecap: round;
+        stroke-dasharray: 900;
+        stroke-dashoffset: var(--hf-dash, 0);
+      }
+      .hf-advanced-svg-line-draw-loader .stack {
+        position: relative;
+        width: 520px;
+        height: 260px;
+      }
+      .hf-advanced-svg-line-draw-loader .card {
+        position: absolute;
+        inset: 0;
+        border-radius: 26px;
+        background: linear-gradient(135deg, var(--surface, #fafafa), var(--surface, #e4e4e7));
+        border: 1px solid var(--border, rgba(15, 23, 42, 0.08));
+        box-shadow: 0 20px 54px rgba(15, 23, 42, 0.14);
+        transform: translateY(var(--hf-card-y, 0px)) scale(var(--hf-card-scale, 1));
+        opacity: var(--hf-card-opacity, 1);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="svg-line-draw-loader-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="hf-advanced-svg-line-draw-loader">
+        <svg viewBox="0 0 520 220">
+          <path d="M24 160 C90 28, 188 40, 228 128 S356 234, 494 68" />
+        </svg>
+      </div>
+    </div>
+    <script>
+      const tl = gsap.timeline({ paused: true });
+      const startTime = 0.5;
+      tl.fromTo(
+        ".hf-advanced-svg-line-draw-loader path",
+        { "--hf-dash": 900 },
+        { "--hf-dash": 0, duration: 1.35, ease: "power3.inOut" },
+        startTime,
+      );
+      tl.set({}, {}, 5);
+      window.__timelines = window.__timelines || {};
+      window.__timelines["svg-line-draw-loader-demo"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/svg-line-draw-loader/svg-line-draw-loader.html b/docs/public/catalog/components/svg-line-draw-loader/svg-line-draw-loader.html
new file mode 100644
index 0000000000..5309fbf268
--- /dev/null
+++ b/docs/public/catalog/components/svg-line-draw-loader/svg-line-draw-loader.html
@@ -0,0 +1,75 @@
+<!--
+  SVG Line Draw Loader - advanced HyperFrames primitive.
+
+  This is intentionally seekable: drive it from a paused GSAP timeline.
+  MotionPath examples require GSAP MotionPathPlugin. Three.js examples expose
+  a render(progress) adapter instead of a free-running requestAnimationFrame loop.
+-->
+
+<div class="hf-advanced-svg-line-draw-loader">
+  <svg viewBox="0 0 520 220"><path d="M24 160 C90 28, 188 40, 228 128 S356 234, 494 68" /></svg>
+</div>
+
+<style>
+  .hf-advanced-svg-line-draw-loader {
+    color: var(--fg, #111827);
+    font-family: var(--font-body, Inter, system-ui, sans-serif);
+  }
+  .hf-advanced-svg-line-draw-loader {
+    width: 720px;
+    min-height: 420px;
+    border-radius: var(--radius, 30px);
+    padding: var(--space-3, 36px);
+    background: var(--surface, #fff);
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.16);
+    display: grid;
+    place-items: center;
+  }
+  .hf-advanced-svg-line-draw-loader .grid {
+    display: grid;
+    grid-template-columns: repeat(8, 46px);
+    gap: var(--space-1, 10px);
+  }
+  .hf-advanced-svg-line-draw-loader .cell {
+    width: 46px;
+    height: 46px;
+    border-radius: 14px;
+    background: color-mix(in srgb, var(--fg, #111827) 45%, transparent);
+    transform: translateY(var(--hf-cell-y, 0px)) scale(var(--hf-cell-scale, 1));
+    opacity: var(--hf-cell-opacity, 1);
+  }
+  .hf-advanced-svg-line-draw-loader svg {
+    width: 520px;
+    height: 220px;
+    overflow: visible;
+  }
+  .hf-advanced-svg-line-draw-loader path {
+    fill: none;
+    stroke: var(--accent, #18181b);
+    stroke-width: 14;
+    stroke-linecap: round;
+    stroke-dasharray: 900;
+    stroke-dashoffset: var(--hf-dash, 0);
+  }
+  .hf-advanced-svg-line-draw-loader .stack {
+    position: relative;
+    width: 520px;
+    height: 260px;
+  }
+  .hf-advanced-svg-line-draw-loader .card {
+    position: absolute;
+    inset: 0;
+    border-radius: 26px;
+    background: linear-gradient(135deg, var(--surface, #fafafa), var(--surface, #e4e4e7));
+    border: 1px solid var(--border, rgba(15, 23, 42, 0.08));
+    box-shadow: 0 20px 54px rgba(15, 23, 42, 0.14);
+    transform: translateY(var(--hf-card-y, 0px)) scale(var(--hf-card-scale, 1));
+    opacity: var(--hf-card-opacity, 1);
+  }
+</style>
+
+<!--
+  Timeline integration:
+  const startTime = 0;
+  tl.fromTo('.hf-advanced-svg-line-draw-loader path', { '--hf-dash': 900 }, { '--hf-dash': 0, duration: 1.35, ease: 'power3.inOut' }, startTime);
+-->
diff --git a/docs/public/catalog/components/svg-mask-reveal/demo.html b/docs/public/catalog/components/svg-mask-reveal/demo.html
new file mode 100644
index 0000000000..dd10c99402
--- /dev/null
+++ b/docs/public/catalog/components/svg-mask-reveal/demo.html
@@ -0,0 +1,118 @@
+<!doctype html>
+<!--
+  svg-mask-reveal -- mounted demo. This standalone composition owns the stage
+  and theme tokens, then mounts svg-mask-reveal.html through
+  data-composition-src. A successful runtime check and snapshot therefore
+  prove the template transport, host sizing, variable flow, and hardcoded
+  timeline key together. The demo is not installed by hyperframes add.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>SVG Mask Reveal - Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+
+      #root {
+        --bg: #07111f;
+        --fg: #f8fafc;
+        --muted: #8da2b8;
+        --surface: #101d31;
+        --border: rgba(248, 250, 252, 0.22);
+        --brand: #ff7a33;
+        --accent: #22d3ee;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-body: Inter, system-ui, sans-serif;
+        --font-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
+        --radius: 24px;
+        --space-1: 8px;
+        --space-2: 16px;
+        --space-3: 32px;
+        --dur-beat: 0.4s;
+        --ease-standard: cubic-bezier(0.215, 0.61, 0.355, 1);
+        --ease-emphasis: cubic-bezier(0.19, 1, 0.22, 1);
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(circle at 50% 42%, var(--surface), var(--bg) 68%);
+        color: var(--fg);
+        font-family: var(--font-body);
+      }
+
+      .mount-card {
+        --bg: var(--surface);
+        position: absolute;
+        width: 70%;
+        height: 44%;
+        left: 15%;
+        top: 28%;
+        overflow: hidden;
+        border: 1px solid var(--border);
+        border-radius: var(--radius);
+        box-shadow: 0 40px 100px color-mix(in srgb, var(--bg) 72%, transparent);
+        container-type: size;
+        isolation: isolate;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="svg-mask-reveal-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="svg-mask-reveal-mount"
+        class="mount-card clip"
+        data-composition-id="svg-mask-reveal"
+        data-composition-src="./svg-mask-reveal.html"
+        data-variable-values='{"text":"REVEAL","revealProgress":100,"featherPx":24}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="1344"
+        data-height="475"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["svg-mask-reveal-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "svg-mask-reveal.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/svg-mask-reveal/svg-mask-reveal.html b/docs/public/catalog/components/svg-mask-reveal/svg-mask-reveal.html
new file mode 100644
index 0000000000..0294d5e3a4
--- /dev/null
+++ b/docs/public/catalog/components/svg-mask-reveal/svg-mask-reveal.html
@@ -0,0 +1,316 @@
+<!doctype html>
+<!--
+  svg-mask-reveal -- HyperFrames video primitive (effects / burst / exhibit)
+
+  Concept: token-colored media is visible only through an SVG wordmark mask.
+  A soft alpha band crosses the mask from left to right, making the wordmark
+  act as a window into the fill beneath it. One mechanic, one job: exhibiting
+  a wordmark through a vector mask reveal.
+
+  Compiled-from evidence: hyperframes-research-css-masks.md, SvgMaskReveal and
+  "SVG text as mask over image or video". The implementation follows its
+  inline SVG, explicit user-space bounds, namespaced fragment IDs, and soft
+  reveal geometry guidance.
+
+  Use when: a logo, product name, or short title should reveal a branded fill
+  inside its glyphs. Use a path-based sibling when exact brand glyph outlines
+  matter more than editable text.
+
+  Variables (declared in data-composition-variables below):
+    - text (string, default "REVEAL"): the wordmark used as the SVG mask.
+    - revealProgress (number, default 100): final revealed width, 0 to 100%.
+    - featherPx (number, default 24): softness of the traveling mask edge.
+
+  Envelope (burst profile, fixed IN/OUT, elastic HOLD):
+    IN_BASE  = 0.90s  the soft band sweeps across the wordmark
+    HOLD     = max(0, D - (IN_BASE + OUT_BASE)); final state stays readable
+    OUT_BASE = 0.45s  the complete wordmark fades cleanly
+    If D is shorter than IN_BASE + OUT_BASE, IN and OUT compress together.
+
+  Sync point: SWEEP_LANDS = 0.80s into an uncompressed IN. It scales with IN
+  only when the envelope is compressed and never moves into the elastic HOLD.
+
+  Sound: none. The sweep is designed to accept scene-level sound if desired.
+
+  Mount contract: this is a template-wrapped sub-composition. The root has no
+  data-width or data-height, fills the host with inset:0, establishes cqw/cqh
+  sizing with container-type:size, and registers one paused GSAP timeline under
+  the hardcoded composition id "svg-mask-reveal". The demo mounts this file via
+  data-composition-src so it exercises the real transport path.
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "text", "type": "string", "role": "content", "label": "Wordmark", "description": "Text used as the SVG mask window.", "default": "REVEAL", "maxLength": 16 },
+    { "id": "revealProgress", "type": "number", "role": "content", "label": "Reveal progress", "description": "Final revealed width of the wordmark.", "default": 100, "min": 0, "max": 100, "step": 1, "unit": "%" },
+    { "id": "featherPx", "type": "number", "role": "style", "label": "Edge feather", "description": "Softness of the traveling reveal edge.", "default": 24, "min": 0, "max": 120, "step": 1, "unit": "px" }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>SVG Mask Reveal</title>
+  </head>
+  <body>
+    <template>
+      <div
+        id="root"
+        data-composition-id="svg-mask-reveal"
+        data-start="0"
+        data-duration="4"
+        data-fps="30"
+      >
+        <style>
+          @property --svg-mask-reveal-sweep-x {
+            syntax: "<percentage>";
+            inherits: false;
+            initial-value: -10%;
+          }
+
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          /* INVARIANT: the host owns dimensions. All visible layout derives
+             from this size container, and the root is styled only by #root. */
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            background: var(--bg);
+            color: var(--fg);
+            font-family: var(--font-body);
+          }
+
+          .smr-clip,
+          .smr-stage {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+          }
+
+          .smr-stage {
+            display: grid;
+            place-items: center;
+          }
+
+          /* EDIT ZONE: presentation scale. The SVG keeps its 12:5 viewBox
+             while these container-relative limits make it fit wide and tall
+             hosts without stage-pixel assumptions. */
+          .smr-svg {
+            display: block;
+            width: min(92cqw, 168cqh);
+            height: auto;
+            overflow: visible;
+          }
+
+          .smr-media-start {
+            stop-color: var(--brand);
+          }
+
+          .smr-media-middle {
+            stop-color: var(--accent);
+          }
+
+          .smr-media-end {
+            stop-color: var(--fg);
+          }
+
+          .smr-mask-text {
+            fill: var(--fg);
+            font-family: var(--font-display);
+            font-size: 240px;
+            font-weight: 850;
+            letter-spacing: 0.02em;
+          }
+
+          .smr-media {
+            mask-mode: alpha, alpha;
+            mask-composite: intersect;
+          }
+
+          .smr-outline {
+            fill: none;
+            stroke: var(--border);
+            stroke-width: 2;
+            font-family: var(--font-display);
+            font-size: 240px;
+            font-weight: 850;
+            letter-spacing: 0.02em;
+          }
+        </style>
+
+        <div
+          id="svg-mask-reveal-clip"
+          class="smr-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="smr-stage">
+            <svg
+              class="smr-svg"
+              viewBox="0 0 1200 500"
+              role="img"
+              aria-label="REVEAL"
+              preserveAspectRatio="xMidYMid meet"
+            >
+              <defs>
+                <!-- IDs carry the full primitive prefix so fragment URLs do
+                     not collide with sibling compositions after assembly. -->
+                <linearGradient
+                  id="svg-mask-reveal-media-gradient"
+                  gradientUnits="userSpaceOnUse"
+                  x1="80"
+                  y1="420"
+                  x2="1120"
+                  y2="80"
+                >
+                  <stop class="smr-media-start" offset="0" />
+                  <stop class="smr-media-middle" offset="0.52" />
+                  <stop class="smr-media-end" offset="1" />
+                </linearGradient>
+
+                <!-- The word mask owns only the vector silhouette. The media
+                     rect independently intersects it with the CSS sweep. -->
+                <mask
+                  id="svg-mask-reveal-word-mask"
+                  mask-type="alpha"
+                  maskUnits="userSpaceOnUse"
+                  maskContentUnits="userSpaceOnUse"
+                  x="0"
+                  y="0"
+                  width="1200"
+                  height="500"
+                >
+                  <text
+                    id="svg-mask-reveal-text"
+                    class="smr-mask-text"
+                    x="600"
+                    y="260"
+                    text-anchor="middle"
+                    dominant-baseline="middle"
+                    textLength="1000"
+                    lengthAdjust="spacingAndGlyphs"
+                  >
+                    REVEAL
+                  </text>
+                </mask>
+              </defs>
+
+              <!-- The outline stays quiet and complete while the token-colored
+                   media itself remains visible only through the word mask. -->
+              <text
+                id="svg-mask-reveal-outline"
+                class="smr-outline"
+                x="600"
+                y="260"
+                text-anchor="middle"
+                dominant-baseline="middle"
+                textLength="1000"
+                lengthAdjust="spacingAndGlyphs"
+              >
+                REVEAL
+              </text>
+              <rect
+                class="smr-media"
+                x="0"
+                y="0"
+                width="1200"
+                height="500"
+                fill="url(#svg-mask-reveal-media-gradient)"
+              />
+            </svg>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var compositionId = "svg-mask-reveal";
+            var stage = root.querySelector(".smr-stage");
+            var svg = root.querySelector(".smr-svg");
+            var maskText = root.querySelector("#svg-mask-reveal-text");
+            var outlineText = root.querySelector("#svg-mask-reveal-outline");
+            var mediaRect = root.querySelector(".smr-media");
+
+            // EDIT ZONE: declared defaults are merged with per-instance host
+            // overrides by the runtime. Missing and zero are distinct here.
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+            var textValue = vars.text == null ? "REVEAL" : String(vars.text);
+            var progressValue = vars.revealProgress == null ? NaN : Number(vars.revealProgress);
+            var revealProgress = Number.isFinite(progressValue)
+              ? Math.max(0, Math.min(100, progressValue))
+              : 100;
+            var featherValue = vars.featherPx == null ? NaN : Number(vars.featherPx);
+            var featherPx = Number.isFinite(featherValue)
+              ? Math.max(0, Math.min(120, featherValue))
+              : 24;
+
+            maskText.textContent = textValue;
+            outlineText.textContent = textValue;
+            svg.setAttribute("aria-label", textValue);
+
+            // INVARIANT: the word and sweep masks are independent layers on
+            // the media rect. This initialization owns their feather geometry.
+            var VIEW_WIDTH = 1200;
+            var featherPercent = (featherPx / VIEW_WIDTH) * 100;
+            var hiddenSweepPercent = -featherPercent;
+            mediaRect.style.maskImage =
+              "url(#svg-mask-reveal-word-mask), linear-gradient(to right, black var(--svg-mask-reveal-sweep-x, -10%), transparent calc(var(--svg-mask-reveal-sweep-x, -10%) + " +
+              featherPercent +
+              "%))";
+
+            // RETIME RANGE: IN_BASE and OUT_BASE define the burst envelope.
+            // The sweep uses --ease-standard's GSAP owner, power2.out.
+            var IN_BASE = 0.9;
+            var OUT_BASE = 0.45;
+            var SWEEP_START_BASE = 0.08;
+            var SWEEP_LANDS_BASE = 0.8;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var envelopeBase = IN_BASE + OUT_BASE;
+            var scale = duration < envelopeBase ? duration / envelopeBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var OUT_START = IN + HOLD;
+            var SWEEP_START = SWEEP_START_BASE * scale;
+            var SWEEP_DURATION = (SWEEP_LANDS_BASE - SWEEP_START_BASE) * scale;
+            var targetSweepPercent = revealProgress === 0 ? hiddenSweepPercent : revealProgress;
+
+            gsap.set(stage, { opacity: 1 });
+            gsap.set(mediaRect, {
+              "--svg-mask-reveal-sweep-x": hiddenSweepPercent + "%",
+            });
+
+            var tl = gsap.timeline({ paused: true });
+            tl.to(
+              mediaRect,
+              {
+                "--svg-mask-reveal-sweep-x": targetSweepPercent + "%",
+                duration: SWEEP_DURATION,
+                ease: "power2.out",
+              },
+              SWEEP_START,
+            );
+            tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/svg-stroke-trace/README.md b/docs/public/catalog/components/svg-stroke-trace/README.md
new file mode 100644
index 0000000000..a9f89f0991
--- /dev/null
+++ b/docs/public/catalog/components/svg-stroke-trace/README.md
@@ -0,0 +1,35 @@
+# svg-stroke-trace
+
+An authored SVG path draws from start to finish using its measured `getTotalLength()`. Paths ending in a close command (`Z`) receive a restrained fill after the stroke completes; open paths (signatures, waves) stay stroke-only. The finished mark then holds until the frame cuts.
+
+3.5s authored, elastic HOLD, exit `none` by default.
+
+## Variables
+
+| id             | type   | default     | notes                                                                                                             |
+| -------------- | ------ | ----------- | ----------------------------------------------------------------------------------------------------------------- |
+| `path`         | string | a wave path | SVG path data in the 1024x520 viewBox. A trailing `Z` is the single owner of fill behavior.                       |
+| `stroke_width` | number | `12`        | Stroke width in viewBox units (2 to 32).                                                                          |
+| `accent`       | enum   | `green`     | Trace and fill color: green rides `--brand`, blue rides `--accent`, violet rides `--accent-2`.                    |
+| `exit`         | enum   | `none`      | `none` holds until the cut; `fade` departs opacity-only; `up` is the upward fade (the pre-Wave-J default ending). |
+
+## Mount
+
+```html
+<div
+  class="clip"
+  data-composition-id="svg-stroke-trace"
+  data-composition-src="./svg-stroke-trace.html"
+  data-variable-values='{"path":"M 120 400 L 512 120 L 904 400 Z","stroke_width":10,"accent":"blue"}'
+  data-start="0"
+  data-duration="3.5"
+  data-track-index="0"
+></div>
+```
+
+Elastic root: no `data-width`/`data-height`; it fills whatever box the host clip gives it. Timeline registers under the literal `svg-stroke-trace` key.
+
+## Notes
+
+- Dash values come from the real measured path length (never the `pathLength` attribute, never `non-scaling-stroke`), so any authored geometry draws exactly once.
+- The hold is one finite vertical drift cycle, never a repeating tween.
diff --git a/docs/public/catalog/components/svg-stroke-trace/demo.html b/docs/public/catalog/components/svg-stroke-trace/demo.html
new file mode 100644
index 0000000000..857133bc88
--- /dev/null
+++ b/docs/public/catalog/components/svg-stroke-trace/demo.html
@@ -0,0 +1,117 @@
+<!doctype html>
+<!--
+  svg-stroke-trace demo. This standalone composition mounts the primitive
+  through data-composition-src. A non-default closed logo path, wider stroke,
+  and violet accent prove all three variables and the optional fill behavior.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>SVG Stroke Trace Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #0b0c0e);
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --muted: #94a3b8;
+        --surface: #14171c;
+        --border: #343a46;
+        --brand: #71f5a7;
+        --accent: #61a8ff;
+        --accent-2: #c5a3ff;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-body: Inter, system-ui, sans-serif;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        --radius: 2.4cqmin;
+        --space-1: 1.2cqmin;
+        --space-2: 2.4cqmin;
+        --space-3: 4cqmin;
+        --dur-beat: 0.4s;
+        --ease-standard: cubic-bezier(0.215, 0.61, 0.355, 1);
+        --ease-emphasis: cubic-bezier(0.19, 1, 0.22, 1);
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(
+          ellipse at 50% 46%,
+          color-mix(in srgb, var(--surface) 88%, var(--accent-2)) 0%,
+          var(--bg) 72%
+        );
+      }
+
+      .mount-card {
+        width: 76%;
+        height: 62%;
+        left: 12%;
+        top: 19%;
+        container-type: size;
+        overflow: hidden;
+        border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
+        border-radius: calc(var(--radius) * 1.35);
+        background: color-mix(in srgb, var(--surface) 78%, transparent);
+        box-shadow: 0 4cqh 12cqh color-mix(in srgb, var(--bg) 58%, transparent);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="svg-stroke-trace-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="3.5"
+      data-fps="30"
+    >
+      <div
+        id="svg-stroke-trace-mount"
+        class="mount-card clip"
+        data-composition-id="svg-stroke-trace"
+        data-composition-src="./svg-stroke-trace.html"
+        data-variable-values='{"path":"M 170 378 L 330 132 L 458 330 L 584 132 L 830 378 L 680 378 L 584 248 L 508 378 L 408 378 L 330 248 L 252 378 Z","stroke_width":16,"accent":"violet"}'
+        data-start="0"
+        data-duration="3.5"
+        data-track-index="0"
+        data-width="1459"
+        data-height="670"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["svg-stroke-trace-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "svg-stroke-trace.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/svg-stroke-trace/svg-stroke-trace.html b/docs/public/catalog/components/svg-stroke-trace/svg-stroke-trace.html
new file mode 100644
index 0000000000..a650ea83de
--- /dev/null
+++ b/docs/public/catalog/components/svg-stroke-trace/svg-stroke-trace.html
@@ -0,0 +1,229 @@
+<!doctype html>
+<!--
+  svg-stroke-trace: HyperFrames video primitive (intros and reveals)
+
+  An authored SVG path draws from start to finish using its measured length.
+  Closed paths receive a restrained fill after the stroke completes. Open
+  paths remain stroke-only, which keeps signatures and waves clean.
+
+  Variables:
+    - path (string): SVG path data for the traced mark.
+    - stroke_width (number, default 12): stroke width in viewBox units.
+    - accent (green | blue | violet, default green): trace and fill color.
+    - exit (none | fade | up, default "none"): optional departure.
+
+  Envelope, fixed IN and OUT with elastic HOLD only:
+    IN_BASE  = 1.85s, stroke draw followed by optional closed-path fill
+    HOLD     = max(0, D - IN - OUT), one subtle vertical drift cycle
+    OUT_BASE = 0.45s departure when exit is fade or up, 0s when exit is
+               none (the default: the finished mark holds until the cut)
+    If D is shorter than IN_BASE + OUT_BASE, IN and OUT compress together.
+    The timeline is never time-scaled.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, has no data-width or data-height,
+  and registers one paused timeline under the literal svg-stroke-trace key.
+-->
+<html
+  lang="en"
+  data-composition-id="svg-stroke-trace"
+  data-composition-duration="3.5"
+  data-composition-variables='[
+    { "id": "path", "type": "string", "role": "content", "label": "Path", "description": "SVG path data for the authored mark.", "default": "M 92 328 C 178 142 292 138 366 276 C 430 396 500 414 558 262 C 622 94 724 112 786 274 C 836 406 894 376 930 194" },
+    { "id": "stroke_width", "type": "number", "role": "style", "label": "Stroke width", "description": "Width of the traced stroke in SVG viewBox units.", "default": 12, "min": 2, "max": 32, "step": 1 },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Color used by the trace and optional fill.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the finished mark holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>SVG Stroke Trace</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="svg-stroke-trace" data-duration="3.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            pointer-events: none;
+          }
+
+          .sst-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+          }
+
+          .sst-stage {
+            width: 88cqw;
+            height: 70cqh;
+            opacity: 0;
+            will-change: transform, opacity;
+          }
+
+          .sst-svg {
+            display: block;
+            width: 100%;
+            height: 100%;
+            overflow: visible;
+          }
+
+          .sst-fill,
+          .sst-stroke {
+            stroke-linecap: round;
+            stroke-linejoin: round;
+          }
+
+          .sst-fill {
+            fill: var(--sst-accent);
+            stroke: none;
+            opacity: 0;
+          }
+
+          .sst-stroke {
+            fill: none;
+            stroke: var(--sst-accent);
+            filter: drop-shadow(
+              0 0 1.8cqmin color-mix(in srgb, var(--sst-accent) 34%, transparent)
+            );
+          }
+        </style>
+
+        <div
+          id="svg-stroke-trace-clip"
+          class="sst-clip clip"
+          data-start="0"
+          data-duration="3.5"
+          data-track-index="0"
+        >
+          <div class="sst-stage" role="img">
+            <svg
+              class="sst-svg"
+              viewBox="0 0 1024 520"
+              preserveAspectRatio="xMidYMid meet"
+              aria-hidden="true"
+            >
+              <path class="sst-fill"></path>
+              <path class="sst-stroke"></path>
+            </svg>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var DEFAULT_PATH =
+              "M 92 328 C 178 142 292 138 366 276 C 430 396 500 414 558 262 C 622 94 724 112 786 274 C 836 406 894 376 930 194";
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".sst-stage");
+            var fillPath = root.querySelector(".sst-fill");
+            var strokePath = root.querySelector(".sst-stroke");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var suppliedPath = vars.path == null ? DEFAULT_PATH : String(vars.path).trim();
+            var pathData = suppliedPath || DEFAULT_PATH;
+            var widthValue = vars.stroke_width;
+            var strokeWidth = Number.isFinite(widthValue)
+              ? Math.max(2, Math.min(32, widthValue))
+              : 12;
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            root.style.setProperty("--sst-accent", accentColors[accent]);
+            fillPath.setAttribute("d", pathData);
+            strokePath.setAttribute("d", pathData);
+            strokePath.setAttribute("stroke-width", String(strokeWidth));
+            stage.setAttribute("aria-label", "Authored SVG path tracing from start to finish");
+
+            var pathLength = strokePath.getTotalLength();
+            strokePath.style.strokeDasharray = pathLength + " " + pathLength;
+            strokePath.style.strokeDashoffset = String(pathLength);
+
+            // A trailing close command is the single owner of fill behavior.
+            // Open signatures and waves never receive an implied closing fill.
+            var fillEnabled = /[zZ]\s*$/.test(pathData);
+
+            var IN_BASE = 1.85;
+            var OUT_BASE = exit === "none" ? 0 : 0.45;
+            var DRAW_SHARE = 0.84;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "3.5"));
+            var fixedTotal = Math.max(0.001, IN_BASE + OUT_BASE);
+            var phaseScale = duration < fixedTotal ? duration / fixedTotal : 1;
+            var IN = IN_BASE * phaseScale;
+            var OUT = OUT_BASE * phaseScale;
+            var DRAW = IN * DRAW_SHARE;
+            var FILL = IN - DRAW;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var HOLD_START = IN;
+            var OUT_START = IN + HOLD;
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: the path measurement owns both dash values, so every authored
+            // path draws exactly once regardless of its geometry.
+            tl.to(stage, { opacity: 1, duration: Math.min(0.28, DRAW), ease: "power2.out" }, 0);
+            tl.to(strokePath, { strokeDashoffset: 0, duration: DRAW, ease: "sine.inOut" }, 0);
+
+            if (fillEnabled) {
+              tl.to(fillPath, { opacity: 0.16, duration: FILL, ease: "power2.out" }, DRAW);
+            }
+
+            // HOLD: one finite drift cycle keeps longer mounts alive.
+            if (HOLD > 0) {
+              tl.to(
+                stage,
+                {
+                  y: "-0.7cqh",
+                  duration: HOLD / 2,
+                  ease: "sine.inOut",
+                  yoyo: true,
+                  repeat: 1,
+                },
+                HOLD_START,
+              );
+            }
+
+            // OUT: optional departure; exit none holds until the frame cuts.
+            if (exit === "up") {
+              tl.to(
+                stage,
+                { opacity: 0, y: "-2.4cqh", duration: OUT, ease: "power2.in" },
+                OUT_START,
+              );
+            } else if (exit === "fade") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["svg-stroke-trace"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/swipe-rail/demo.html b/docs/public/catalog/components/swipe-rail/demo.html
new file mode 100644
index 0000000000..4327f8933f
--- /dev/null
+++ b/docs/public/catalog/components/swipe-rail/demo.html
@@ -0,0 +1,95 @@
+<!doctype html>
+<!--
+  swipe-rail demo. This standalone composition mounts swipe-rail.html through
+  data-composition-src. Non-default values prove that all three variables
+  flow through the mount while the primitive remains sized by its host box.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Swipe Rail Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0b0c0e;
+      }
+
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 45%, #20232a 0%, #0b0c0e 72%);
+      }
+
+      .mount-card {
+        width: 76%;
+        height: 64%;
+        left: 12%;
+        top: 18%;
+        container-type: size;
+        overflow: hidden;
+        border: 2px solid rgba(148, 163, 184, 0.24);
+        border-radius: 34px;
+        background: #111827;
+        box-shadow: 0 44px 110px rgba(0, 0, 0, 0.48);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="swipe-rail-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="swipe-rail-mount"
+        class="mount-card clip"
+        data-composition-id="swipe-rail"
+        data-composition-src="./swipe-rail.html"
+        data-variable-values='{"card_count":5,"accent":"violet","card_label_prefix":"Chapter"}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="1460"
+        data-height="691"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["swipe-rail-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "swipe-rail.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/swipe-rail/swipe-rail.html b/docs/public/catalog/components/swipe-rail/swipe-rail.html
new file mode 100644
index 0000000000..55f03f8d80
--- /dev/null
+++ b/docs/public/catalog/components/swipe-rail/swipe-rail.html
@@ -0,0 +1,358 @@
+<!doctype html>
+<!--
+  swipe-rail: HyperFrames video primitive (interaction / gesture / demonstrate)
+
+  Concept: a contact circle leads a horizontal card rail through one swipe.
+  The rail follows the drag, carries momentum after release, then snaps the
+  next card into focus with a physical settle.
+
+  Variables:
+    - card_count (number, 3 to 5, default 4): cards rendered in the rail.
+    - accent (enum, default green): active color for focus and contact states.
+    - card_label_prefix (string, default "Feature"): label before each card number.
+
+  Envelope (fixed IN and OUT, elastic HOLD only):
+    IN_BASE  = 2.20s  rail reveal, touch, drag, release, momentum, snap
+    HOLD     = elastic = max(0, D - (IN + OUT)); selected card breathes subtly
+    OUT_BASE = 0.45s  clean stage fade and rise
+    If D is shorter than IN_BASE + OUT_BASE, IN and OUT compress together.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, has no data-width or data-height,
+  and registers one paused timeline under the hardcoded swipe-rail id.
+-->
+<html
+  lang="en"
+  data-composition-id="swipe-rail"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "card_count", "type": "number", "role": "content", "label": "Card count", "description": "Number of cards rendered in the rail.", "default": 4, "min": 3, "max": 5, "step": 1 },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Active color used by the focused card and contact circle.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "card_label_prefix", "type": "string", "role": "content", "label": "Card label prefix", "description": "Text placed before each card number.", "default": "Feature" }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Swipe Rail</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="swipe-rail" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            --sr-card-width: 46;
+            --sr-card-gap: 4;
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: #f8fafc;
+            font-family: Inter, system-ui, sans-serif;
+            pointer-events: none;
+          }
+
+          .sr-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            background: radial-gradient(circle at 50% 45%, #1e293b 0%, #0f172a 72%);
+          }
+
+          .sr-stage {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            opacity: 0;
+          }
+
+          .sr-rail {
+            position: absolute;
+            left: 50%;
+            top: 18cqh;
+            display: flex;
+            gap: calc(var(--sr-card-gap) * 1cqw);
+            height: 64cqh;
+            will-change: transform;
+          }
+
+          .sr-card {
+            position: relative;
+            flex: 0 0 calc(var(--sr-card-width) * 1cqw);
+            height: 60cqh;
+            overflow: hidden;
+            padding: 6cqh 4cqw;
+            border: 0.16cqmin solid rgba(148, 163, 184, 0.36);
+            border-radius: 3.2cqmin;
+            background: #f8fafc;
+            color: #0f172a;
+            box-shadow: 0 3cqh 7cqh rgba(2, 6, 23, 0.34);
+            transform-origin: 50% 50%;
+            will-change: transform, border-color, box-shadow;
+          }
+
+          .sr-card::before {
+            content: "";
+            position: absolute;
+            inset: 0 0 auto;
+            height: 1.2cqh;
+            background: var(--sr-accent);
+            opacity: 0.38;
+          }
+
+          .sr-index {
+            display: block;
+            margin-bottom: 3.2cqh;
+            color: var(--sr-accent);
+            font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+            font-size: 2.2cqw;
+            font-weight: 700;
+            letter-spacing: 0.12em;
+          }
+
+          .sr-label {
+            display: block;
+            overflow: hidden;
+            font-size: 4.2cqw;
+            font-weight: 760;
+            line-height: 1.05;
+            letter-spacing: -0.04em;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          .sr-rule {
+            display: block;
+            width: 72%;
+            height: 1.4cqh;
+            margin-top: 7cqh;
+            border-radius: 1cqh;
+            background: #cbd5e1;
+            box-shadow:
+              0 4cqh 0 #e2e8f0,
+              0 8cqh 0 #e2e8f0;
+          }
+
+          .sr-contact {
+            position: absolute;
+            left: 50%;
+            top: 57%;
+            width: 8cqw;
+            aspect-ratio: 1;
+            margin: -4cqw 0 0 -4cqw;
+            border: 0.32cqmin solid rgba(255, 255, 255, 0.88);
+            border-radius: 50%;
+            background: color-mix(in srgb, var(--sr-accent) 44%, transparent);
+            box-shadow:
+              0 0 0 1.2cqmin color-mix(in srgb, var(--sr-accent) 16%, transparent),
+              0 1.8cqh 4cqh rgba(2, 6, 23, 0.34);
+            opacity: 0;
+            will-change: transform, opacity;
+          }
+        </style>
+
+        <div class="sr-clip clip" data-start="0" data-duration="4" data-track-index="0">
+          <div class="sr-stage">
+            <div class="sr-rail" role="list" aria-label="Feature cards"></div>
+            <div class="sr-contact" aria-hidden="true"></div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".sr-stage");
+            var rail = root.querySelector(".sr-rail");
+            var contact = root.querySelector(".sr-contact");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var countValue = Number(vars.card_count);
+            var cardCount = Number.isFinite(countValue)
+              ? Math.max(3, Math.min(5, Math.round(countValue)))
+              : 4;
+            var prefix =
+              vars.card_label_prefix == null ? "Feature" : String(vars.card_label_prefix);
+            var accentName =
+              vars.accent === "blue" || vars.accent === "violet" ? vars.accent : "green";
+            var accentColors = {
+              green: "var(--brand, #22c55e)",
+              blue: "var(--accent, #38bdf8)",
+              violet: "var(--accent-2, #a78bfa)",
+            };
+            root.style.setProperty("--sr-accent", accentColors[accentName]);
+            // GSAP interpolates colors numerically, so tween values need the
+            // substituted color rather than the var() form.
+            var accentColor = getComputedStyle(root).getPropertyValue("--sr-accent").trim();
+
+            for (var index = 0; index < cardCount; index += 1) {
+              var card = document.createElement("article");
+              card.className = "sr-card";
+              card.setAttribute("role", "listitem");
+
+              var indexEl = document.createElement("span");
+              indexEl.className = "sr-index";
+              indexEl.textContent = String(index + 1).padStart(2, "0");
+
+              var label = document.createElement("span");
+              label.className = "sr-label";
+              label.textContent = prefix + " " + String(index + 1);
+
+              var rule = document.createElement("span");
+              rule.className = "sr-rule";
+              rule.setAttribute("aria-hidden", "true");
+
+              card.append(indexEl, label, rule);
+              rail.appendChild(card);
+            }
+
+            var cards = rail.querySelectorAll(".sr-card");
+            var centerIndex = Math.floor((cardCount - 1) / 2);
+            var targetIndex = centerIndex + 1;
+            var currentCard = cards[centerIndex];
+            var targetCard = cards[targetIndex];
+
+            var rootStyle = getComputedStyle(root);
+            var cardWidth = parseFloat(rootStyle.getPropertyValue("--sr-card-width"));
+            var cardGap = parseFloat(rootStyle.getPropertyValue("--sr-card-gap"));
+            var cardStep = cardWidth + cardGap;
+            var initialX = -(centerIndex * cardStep + cardWidth / 2);
+            var targetX = initialX - cardStep;
+
+            // Fixed gesture and exit phases compress together only for short mounts.
+            var IN_BASE = 2.2;
+            var OUT_BASE = 0.45;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var baseTotal = IN_BASE + OUT_BASE;
+            var envelopeScale = duration < baseTotal ? duration / baseTotal : 1;
+            var IN = IN_BASE * envelopeScale;
+            var OUT = OUT_BASE * envelopeScale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var OUT_START = IN + HOLD;
+            var gestureScale = IN / IN_BASE;
+
+            gsap.set(stage, { opacity: 0, y: "1.5cqh" });
+            gsap.set(rail, { x: initialX + "cqw" });
+            gsap.set(cards, { scale: 0.94, opacity: 0.74 });
+            gsap.set(currentCard, {
+              scale: 1.02,
+              opacity: 1,
+              borderColor: accentColor,
+            });
+            gsap.set(contact, { x: "0cqw", y: "0cqh", scale: 0.86, opacity: 0 });
+
+            var tl = gsap.timeline({ paused: true });
+
+            tl.to(
+              stage,
+              { opacity: 1, y: "0cqh", duration: 0.32 * gestureScale, ease: "power2.out" },
+              0,
+            );
+            tl.to(
+              contact,
+              { opacity: 1, scale: 1, duration: 0.18 * gestureScale, ease: "power2.out" },
+              0.4 * gestureScale,
+            );
+
+            // Fast initial drag decays under friction while the contact leads the rail.
+            tl.to(
+              contact,
+              { x: "-28cqw", duration: 0.62 * gestureScale, ease: "power3.out" },
+              0.66 * gestureScale,
+            );
+            tl.to(
+              rail,
+              { x: initialX - 23 + "cqw", duration: 0.62 * gestureScale, ease: "power3.out" },
+              0.66 * gestureScale,
+            );
+
+            var releaseAt = 1.28 * gestureScale;
+            tl.to(
+              contact,
+              {
+                y: "-5cqh",
+                scale: 0.82,
+                opacity: 0,
+                duration: 0.24 * gestureScale,
+                ease: "power2.out",
+              },
+              releaseAt,
+            );
+            tl.to(
+              rail,
+              {
+                x: initialX - 38 + "cqw",
+                duration: 0.28 * gestureScale,
+                ease: "power2.out",
+              },
+              releaseAt,
+            );
+
+            // The momentum handoff resolves into one exact card-width snap.
+            tl.to(
+              rail,
+              { x: targetX + "cqw", duration: 0.64 * gestureScale, ease: "back.out(1.7)" },
+              1.56 * gestureScale,
+            );
+            tl.to(
+              currentCard,
+              {
+                scale: 0.94,
+                opacity: 0.74,
+                borderColor: "rgba(148, 163, 184, 0.36)",
+                duration: 0.48 * gestureScale,
+                ease: "power2.out",
+              },
+              1.5 * gestureScale,
+            );
+            tl.to(
+              targetCard,
+              {
+                scale: 1.02,
+                opacity: 1,
+                borderColor: accentColor,
+                boxShadow: "0 3cqh 9cqh rgba(2, 6, 23, 0.42)",
+                duration: 0.64 * gestureScale,
+                ease: "back.out(1.7)",
+              },
+              1.56 * gestureScale,
+            );
+
+            if (HOLD > 0.4) {
+              var driftHalf = Math.min(0.55, HOLD / 2);
+              var driftRepeat = Math.max(0, Math.floor(HOLD / driftHalf) - 1);
+              tl.to(
+                targetCard,
+                {
+                  y: "-0.7cqh",
+                  duration: driftHalf,
+                  ease: "sine.inOut",
+                  yoyo: true,
+                  repeat: driftRepeat,
+                },
+                IN,
+              );
+            }
+
+            tl.to(stage, { opacity: 0, y: "-1.5cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["swipe-rail"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/tabs-slide-indicator/__hf-variables-preview.html b/docs/public/catalog/components/tabs-slide-indicator/__hf-variables-preview.html
new file mode 100644
index 0000000000..b10fd07a37
--- /dev/null
+++ b/docs/public/catalog/components/tabs-slide-indicator/__hf-variables-preview.html
@@ -0,0 +1,70 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Tabs Slide Indicator variables preview</title>
+    <style>
+      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #f7f7f8; }
+      #hf-vars-root { position: relative; width: 1920px; height: 1080px; }
+      #hf-vars-mount { position: absolute; inset: 0; display: grid; place-items: center; }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  </head>
+  <body>
+    <div id="hf-vars-root" data-composition-id="tabs-slide-indicator-variables-preview" data-start="0" data-width="1920" data-height="1080" data-duration="5" data-fps="30">
+      <div id="hf-vars-mount" class="clip" data-composition-id="tabs-slide-indicator" data-composition-src="./tabs-slide-indicator.html" data-start="0" data-duration="5" data-track-index="0" data-width="1920" data-height="1080"></div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["tabs-slide-indicator-variables-preview"] = gsap.timeline({ paused: true });
+    </script>
+    <script>
+      (function () {
+        var mount = document.getElementById("hf-vars-mount");
+        // The mount is filled asynchronously, and the demo script selects
+        // what it fills it with, so it cannot run before then.
+        var observer = new MutationObserver(build);
+        observer.observe(mount, { childList: true, subtree: true });
+        build();
+        function build() {
+          if (!mount.firstElementChild) return;
+          observer.disconnect();
+
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-transition-tabs-slide-indicator .indicator",
+          { "--hf-tab-x": "0px" },
+          { "--hf-tab-x": "86px", duration: 0.42, ease: "power3.inOut" },
+          startTime,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["tabs-slide-indicator-demo"] = tl;
+          var child = window.__timelines["tabs-slide-indicator-demo"];
+          delete window.__timelines["tabs-slide-indicator-demo"];
+          if (!child || typeof child.paused !== "function") return;
+          child.paused(false);
+          window.__timelines["tabs-slide-indicator-variables-preview"].add(child, 0);
+        }
+      })();
+    </script>
+<script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "tabs-slide-indicator.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/tabs-slide-indicator/demo.html b/docs/public/catalog/components/tabs-slide-indicator/demo.html
new file mode 100644
index 0000000000..0199a3fda0
--- /dev/null
+++ b/docs/public/catalog/components/tabs-slide-indicator/demo.html
@@ -0,0 +1,118 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Tabs Slide Indicator - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        min-width: 760px;
+        min-height: 480px;
+        padding: 56px;
+        /* ponytail: scale wrapper only — GSAP targets .indicator inside, not this element */
+        transform: scale(3.5);
+      }
+      .hf-transition-tabs-slide-indicator {
+        --hf-tab-x: 0px;
+        position: relative;
+        display: inline-grid;
+        grid-template-columns: repeat(3, 86px);
+        padding: 4px;
+        border: 1px solid #e4e4e7;
+        border-radius: 999px;
+        background: #f4f4f5;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-transition-tabs-slide-indicator .indicator {
+        position: absolute;
+        top: 4px;
+        left: 4px;
+        width: 86px;
+        height: 36px;
+        border-radius: 999px;
+        background: #18181b;
+        transform: translateX(var(--hf-tab-x));
+        box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18);
+      }
+      .hf-transition-tabs-slide-indicator button {
+        position: relative;
+        z-index: 1;
+        height: 36px;
+        border: 0;
+        background: transparent;
+        color: #71717a;
+        font-weight: 600;
+      }
+      .hf-transition-tabs-slide-indicator button:nth-of-type(2) {
+        color: #fff;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="tabs-slide-indicator-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-transition-tabs-slide-indicator">
+          <span class="indicator"></span><button>Plan</button><button>Debug</button
+          ><button>Ask</button>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-transition-tabs-slide-indicator .indicator",
+          { "--hf-tab-x": "0px" },
+          { "--hf-tab-x": "86px", duration: 0.42, ease: "power3.inOut" },
+          startTime,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["tabs-slide-indicator-demo"] = tl;
+      </script>
+    </div>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "tabs-slide-indicator.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/tabs-slide-indicator/tabs-slide-indicator.html b/docs/public/catalog/components/tabs-slide-indicator/tabs-slide-indicator.html
new file mode 100644
index 0000000000..d472843d4f
--- /dev/null
+++ b/docs/public/catalog/components/tabs-slide-indicator/tabs-slide-indicator.html
@@ -0,0 +1,148 @@
+<!--
+  Tabs Slide Indicator - transitions.dev-inspired primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Use the timeline
+  integration note at the bottom as the starting point for deterministic GSAP
+  animation.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result as a custom property
+  the CSS below consumes. The timeline recipe at the bottom is untouched by
+  them: it keeps sliding the pill one tab to the right, and these decide how
+  wide that tab is, what the pill looks like and what the tabs say.
+
+    - accent (ink | green | blue | violet, default ink): fill of the sliding
+      pill. ink is a literal near-black; the other three ride the composition's
+      own brand, accent and accent-2 tokens and fall back to that same ink when
+      the composition declares none. The labels sitting on it stay white, so all
+      four keep the active tab readable.
+    - width (compact | standard | wide, default standard): width of one tab,
+      72px, 86px or 104px. The slide the timeline drives is scaled by the same
+      ratio, so the pill still lands exactly on the next tab rather than
+      stopping short or overshooting it.
+    - shape (pill | rounded | square, default pill): corner radius of the track
+      and the pill, 999px, 12px or 4px.
+    - labels (text, default "Plan,Debug,Ask"): the tab names, separated by
+      commas. Two or more names rebuild the row, one name or none leaves the
+      authored markup alone, since a single tab has nowhere to slide to.
+
+  On every default the result is identical to the original: three 86px tabs in
+  a light pill track, a near-black pill sliding from the first to the second.
+-->
+
+<div
+  class="hf-transition-tabs-slide-indicator"
+  data-composition-variables='[
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Fill of the sliding pill. ink is literal; the rest ride the composition theme tokens.", "default": "ink", "options": [{ "value": "ink", "label": "Ink" }, { "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "width", "type": "enum", "role": "layout", "label": "Tab width", "description": "Width of one tab. The slide the timeline drives is scaled to match, so the pill still lands on the next tab.", "default": "standard", "options": [{ "value": "compact", "label": "Compact" }, { "value": "standard", "label": "Standard" }, { "value": "wide", "label": "Wide" }] },
+    { "id": "shape", "type": "enum", "role": "style", "label": "Shape", "description": "Corner radius of the track and the pill.", "default": "pill", "options": [{ "value": "pill", "label": "Pill" }, { "value": "rounded", "label": "Rounded" }, { "value": "square", "label": "Square" }] },
+    { "id": "labels", "type": "string", "role": "content", "label": "Labels", "description": "The tab names, separated by commas. Two or more names rebuild the row.", "default": "Plan,Debug,Ask" }
+  ]'
+>
+  <span class="indicator"></span><button>Plan</button><button>Debug</button><button>Ask</button>
+</div>
+
+<style>
+  .hf-transition-tabs-slide-indicator {
+    --hf-tab-x: 0px;
+    position: relative;
+    display: inline-grid;
+    grid-template-columns: repeat(var(--hf-tab-count, 3), var(--hf-tab-width, 86px));
+    padding: 4px;
+    border: 1px solid #e4e4e7;
+    border-radius: var(--hf-tab-radius, 999px);
+    background: #f4f4f5;
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-transition-tabs-slide-indicator .indicator {
+    position: absolute;
+    top: 4px;
+    left: 4px;
+    width: var(--hf-tab-width, 86px);
+    height: 36px;
+    border-radius: var(--hf-tab-radius, 999px);
+    background: var(--hf-tab-fill, #18181b);
+    transform: translateX(calc(var(--hf-tab-x) * var(--hf-tab-step, 1)));
+    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18);
+  }
+  .hf-transition-tabs-slide-indicator button {
+    position: relative;
+    z-index: 1;
+    height: 36px;
+    border: 0;
+    background: transparent;
+    color: #71717a;
+    font-weight: 850;
+  }
+  .hf-transition-tabs-slide-indicator button:nth-of-type(2) {
+    color: #fff;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    // The pill is the one accent-carrying element here, so the three chromatic
+    // options ride the composition's own tokens and fall back to ink.
+    var accents = {
+      ink: "#18181b",
+      green: "var(--brand, #18181b)",
+      blue: "var(--accent, #18181b)",
+      violet: "var(--accent-2, #18181b)",
+    };
+    var widths = { compact: 72, standard: 86, wide: 104 };
+    var shapes = { pill: "999px", rounded: "12px", square: "4px" };
+
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var accent = accents[pick(accents, vars.accent, "ink")];
+    var width = widths[pick(widths, vars.width, "standard")];
+    var radius = shapes[pick(shapes, vars.shape, "pill")];
+    var labels =
+      typeof vars.labels === "string"
+        ? vars.labels.split(",").map(function (part) {
+            return part.trim();
+          })
+        : [];
+    labels = labels.filter(function (part) {
+      return part.length > 0;
+    });
+
+    var roots = document.querySelectorAll(".hf-transition-tabs-slide-indicator");
+    for (var i = 0; i < roots.length; i += 1) {
+      roots[i].style.setProperty("--hf-tab-fill", accent);
+      roots[i].style.setProperty("--hf-tab-width", width + "px");
+      // The timeline slides the pill by one standard tab, so scale that slide
+      // to whatever a tab is actually worth here.
+      roots[i].style.setProperty("--hf-tab-step", String(width / 86));
+      roots[i].style.setProperty("--hf-tab-radius", radius);
+      // A single tab has nowhere to slide to, so it is left as authored.
+      if (labels.length > 1) {
+        var old = roots[i].querySelectorAll("button");
+        for (var j = 0; j < old.length; j += 1) {
+          old[j].parentNode.removeChild(old[j]);
+        }
+        for (var k = 0; k < labels.length; k += 1) {
+          var button = document.createElement("button");
+          button.textContent = labels[k];
+          roots[i].appendChild(button);
+        }
+        roots[i].style.setProperty("--hf-tab-count", String(labels.length));
+      }
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-transition-tabs-slide-indicator .indicator', { '--hf-tab-x': '0px' }, { '--hf-tab-x': '86px', duration: 0.42, ease: 'power3.inOut' }, startTime);
+-->
diff --git a/docs/public/catalog/components/telemetry-hud/README.md b/docs/public/catalog/components/telemetry-hud/README.md
new file mode 100644
index 0000000000..b76bf1de80
--- /dev/null
+++ b/docs/public/catalog/components/telemetry-hud/README.md
@@ -0,0 +1,94 @@
+# telemetry-hud
+
+Quiet mono debug-HUD readouts frame a slotted subject. Four corner brackets
+draw on, small `label: value` data lines fade in around the frame, and each
+value ticks to its final string on its cue (unresolved characters roll through
+same-class stand-ins and resolve left to right, the typed-prompt text-at-time
+law). One readout is emphasized in the accent color. The subject never moves
+and the HUD breathes zero: once the last tick lands, the hold is dead still.
+
+## Files
+
+- `telemetry-hud.html`: the mountable sub-composition (install target:
+  `compositions/components/telemetry-hud.html`).
+- `registry-item.json`: registry metadata and the variables block.
+
+## Variables
+
+| id          | type   | default                                         | notes                                                                     |
+| ----------- | ------ | ----------------------------------------------- | ------------------------------------------------------------------------- |
+| `readouts`  | string | `fps:59.94,latency:11.8 ms,gpu:38%,heap:1.2 GB` | comma-separated `label:value` pairs, up to 8; first colon splits          |
+| `emphasize` | number | `0`                                             | index of the accent-colored readout; `-1` disables                        |
+| `cues`      | string | `""`                                            | comma-separated seconds; cue N starts readout N's tick; empty = authored  |
+| `accent`    | enum   | `green`                                         | `green` maps to `--brand`, `blue` to `--accent`, `violet` to `--accent-2` |
+| `exit`      | enum   | `none`                                          | `none` holds the final frame; `fade` and `up` release the stage           |
+
+Envelope: IN = stage fade 0.45s, bracket draws from 0.12s, readout ticks land
+per cue (default rhythm 1.0s + 0.28s per readout, each tick 0.5s; cues clamp
+so every tick finishes before the exit). OUT = 0.45s only when `exit` is
+`fade` or `up`. HOLD is the sole elastic phase and is completely still. The
+`readouts-settled` sync point fires when the last default tick lands, 2.35s
+at defaults.
+
+Readouts are assigned to the four corners cyclically (top-left, top-right,
+bottom-left, bottom-right), so 4 readouts give one line per corner and 8 give
+two per corner.
+
+## The slot mechanism
+
+The primitive ships one named slot inside its `<template>`:
+
+```html
+<div class="th-slot" data-slot="subject">...</div>
+```
+
+The slot's default children are a token skeleton card, so an untouched mount
+still reads as a framed subject. To show your own content, install the
+component and **replace the children of the `[data-slot="subject"]` element
+in your installed copy** (the runtime clones only the primitive's own
+template on mount, so slot content lives in the component file, not on the
+host clip).
+
+Rules:
+
+- The subject stays centered at 56cqw by 58cqh and never moves; the HUD
+  brackets and readouts render around it, outside the slot.
+- Direct `img`/`video` children are automatically sized to cover the subject
+  (`object-fit: cover`). Arbitrary HTML works too; size it in `cqw`/`cqh`.
+- Keep the brackets and readout corners alone; they render above slot content.
+
+## Worked example
+
+Install, then fill the slot with a product screenshot:
+
+```bash
+npx hyperframes add telemetry-hud
+```
+
+In `compositions/components/telemetry-hud.html`, replace the slot's default
+block:
+
+```html
+<div class="th-slot" data-slot="subject">
+  <img src="../../assets/render-preview.png" alt="" />
+</div>
+```
+
+Mount it from a host composition like any sub-composition:
+
+```html
+<div
+  class="clip"
+  data-composition-id="telemetry-hud"
+  data-composition-src="./components/telemetry-hud.html"
+  data-variable-values='{"readouts":"pass:2 of 2,frames:135,gpu:41%,eta:00:12","emphasize":3,"accent":"blue"}'
+  data-start="2"
+  data-duration="4.5"
+  data-track-index="0"
+></div>
+```
+
+The brackets draw as the clip mounts, the four values tick in on the default
+rhythm with `eta` emphasized in blue, and the HUD holds perfectly still for
+the rest of the clip window (`exit` defaults to `none`; frame roots own scene
+transitions).
diff --git a/docs/public/catalog/components/telemetry-hud/demo.html b/docs/public/catalog/components/telemetry-hud/demo.html
new file mode 100644
index 0000000000..c8b4c14db4
--- /dev/null
+++ b/docs/public/catalog/components/telemetry-hud/demo.html
@@ -0,0 +1,109 @@
+<!doctype html>
+<!--
+  telemetry-hud demo. This standalone composition mounts the primitive
+  through data-composition-src. Non-default readouts, emphasize, cues, and
+  accent values prove the variable path while the primitive remains elastic
+  to its host.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>telemetry-hud Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #0b0c0e);
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --muted: #8b95a6;
+        --surface: #14171c;
+        --border: #343a46;
+        --brand: #71f5a7;
+        --accent: #61a8ff;
+        --accent-2: #c5a3ff;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(
+          ellipse at 50% 44%,
+          var(--bg, #171a20) 0%,
+          var(--bg, #0b0c0e) 72%
+        );
+      }
+
+      .mount-card {
+        width: 72%;
+        height: 74%;
+        left: 14%;
+        top: 13%;
+        container-type: size;
+        overflow: hidden;
+        border: 1px solid color-mix(in srgb, var(--border, #94a3b8) 20%, transparent);
+        border-radius: 30px;
+        background: color-mix(in srgb, var(--surface, #101318) 72%, transparent);
+        box-shadow: 0 40px 100px color-mix(in srgb, var(--bg, #000000) 48%, transparent);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="telemetry-hud-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4.5"
+      data-fps="30"
+    >
+      <div
+        id="telemetry-hud-mount"
+        class="mount-card clip"
+        data-composition-id="telemetry-hud"
+        data-composition-src="./telemetry-hud.html"
+        data-variable-values='{"readouts":"build:snowline-42,fps:59.94,frames:135,latency:11.8 ms,heap:412 MB","emphasize":1,"cues":"0.9,1.15,1.4,1.65,1.9","accent":"violet"}'
+        data-start="0"
+        data-duration="4.5"
+        data-track-index="0"
+        data-width="1382"
+        data-height="799"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["telemetry-hud-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "telemetry-hud.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/telemetry-hud/telemetry-hud.html b/docs/public/catalog/components/telemetry-hud/telemetry-hud.html
new file mode 100644
index 0000000000..5776ee6b14
--- /dev/null
+++ b/docs/public/catalog/components/telemetry-hud/telemetry-hud.html
@@ -0,0 +1,553 @@
+<!doctype html>
+<!--
+  telemetry-hud: HyperFrames video primitive (product-demo / HUD)
+
+  Quiet mono debug-HUD readouts frame a slotted subject. Four corner brackets
+  draw on (measured getTotalLength, ATTRIBUTE-driven stroke-dashoffset: a CSS
+  dashoffset tween can leave stale paint under reverse seeks), small
+  "label: value" data lines fade in, and each value ticks to its final string
+  on its cue. One readout is emphasized in the accent color. The subject never
+  moves and the HUD breathes zero: the hold is dead still.
+
+  Value ticking follows the typed-prompt law: every visible frame is read from
+  one text-at-time row table built synchronously (fixed-seed LCG) before the
+  timeline registers, so forward seeks, reverse seeks, and repeated seeks to
+  the same time always produce the same string. Nothing is incremental.
+  During a tick, unresolved characters roll through same-class stand-ins
+  (digits stay digits, letters stay letters) and resolve left to right.
+
+  Slot (see README.md for a worked example):
+    - [data-slot="subject"]: the framed subject. Replace the children of this
+      element in your installed copy (img, video, or HTML). Default: a token
+      skeleton card. Direct img/video children are sized to cover the slot.
+
+  Variables (declared in data-composition-variables below):
+    - readouts (string): comma-separated "label:value" pairs, up to 8. The
+      first colon splits label from value; later colons stay in the value.
+    - emphasize (number, default 0): index of the accent-colored readout.
+      Out-of-range values clamp; -1 disables emphasis.
+    - cues (string, default ""): comma-separated seconds relative to mount
+      start; cue N starts readout N's tick. Empty = authored rhythm.
+    - accent (green | blue | violet, default green): emphasized readout color.
+      green maps to --brand, blue to --accent, violet to --accent-2.
+    - exit (none | fade | up, default none): outgoing transition. none holds
+      the end frame (frame roots own transitions; holds end films).
+
+  Envelope (fixed IN/OUT, elastic HOLD only, never gsap.timeScale()):
+    IN   = stage fade 0.45s, brackets draw 0.12s to ~0.9s, readout lines fade
+           staggered, ticks land per cue (clamped to finish before OUT).
+    HOLD = elastic = everything after the last tick; completely still.
+    OUT  = 0.45s when exit is fade or up, 0 when exit is none.
+
+  Interruptibility (Wave K L1): every animated property has one owner (stage
+  opacity/y, per-path dashoffset, one shared tick driver), so overlapping cue
+  schedules never fight a second tween for the same value.
+
+  Mount contract: MOUNTABLE SUB-COMPOSITION. The runtime clones only
+  <template> contents; #root fills the host box (inset: 0, container-type:
+  size), has no data-width/data-height, and registers one paused timeline
+  under the literal "telemetry-hud" key. Variables come from
+  window.__hyperframes.getVariables().
+-->
+<html
+  lang="en"
+  data-composition-id="telemetry-hud"
+  data-composition-duration="4.5"
+  data-composition-variables='[
+    { "id": "readouts", "type": "string", "role": "content", "label": "Readouts", "description": "Comma-separated label:value pairs, up to 8. The first colon splits label from value.", "default": "fps:59.94,latency:11.8 ms,gpu:38%,heap:1.2 GB" },
+    { "id": "emphasize", "type": "number", "role": "style", "label": "Emphasize", "description": "Index of the readout rendered in the accent color. -1 disables.", "default": 0, "min": -1, "max": 7, "step": 1 },
+    { "id": "cues", "type": "string", "role": "timing", "label": "Cues", "description": "Comma-separated seconds relative to mount start; cue N starts readout N value tick. Empty uses the authored rhythm.", "default": "" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Color of the emphasized readout.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Outgoing transition. Frame roots own transitions; none holds the end frame.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Telemetry HUD</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="telemetry-hud" data-duration="4.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            background: var(--bg, #07111f);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            pointer-events: none;
+          }
+
+          .th-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+          }
+
+          .th-stage {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            will-change: transform, opacity;
+          }
+
+          /* Framed subject: centered, static for the whole hold. */
+          .th-subject {
+            position: relative;
+            width: 56cqw;
+            height: 58cqh;
+            overflow: hidden;
+            border-radius: var(--radius, 2.4cqmin);
+          }
+
+          .th-slot,
+          .th-slot > img,
+          .th-slot > video {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+          }
+
+          .th-slot > img,
+          .th-slot > video {
+            object-fit: cover;
+          }
+
+          /* Token skeleton default; callers replacing slot children never
+             see any of this. */
+          .th-default {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            border: 0.16cqmin solid var(--border, #334155);
+            border-radius: var(--radius, 2.4cqmin);
+            background: color-mix(in srgb, var(--surface, #172033) 90%, var(--bg, #07111f));
+          }
+
+          .th-card {
+            width: 72%;
+          }
+
+          .th-bar {
+            width: 38%;
+            height: 4.6cqh;
+            margin-bottom: var(--space-3, 4cqh);
+            border-radius: 1.2cqh;
+            background: var(--muted, #94a3b8);
+            opacity: 0.55;
+          }
+
+          .th-line {
+            height: 2.4cqh;
+            margin-bottom: var(--space-2, 2.6cqh);
+            border-radius: 1.2cqh;
+            background: var(--muted, #94a3b8);
+            opacity: 0.38;
+          }
+
+          .th-line:nth-of-type(2) {
+            width: 88%;
+          }
+
+          .th-line:nth-of-type(3) {
+            width: 64%;
+          }
+
+          .th-line:nth-of-type(4) {
+            width: 42%;
+          }
+
+          /* Corner brackets: square-capped strokes, drawn via measured
+             dasharray/dashoffset ATTRIBUTES set from script. */
+          .th-bracket {
+            position: absolute;
+            width: 8cqmin;
+            height: 8cqmin;
+            overflow: visible;
+          }
+
+          .th-bracket path {
+            fill: none;
+            stroke: color-mix(in srgb, var(--fg, #f8fafc) 62%, transparent);
+            stroke-width: 3;
+            stroke-linecap: butt;
+          }
+
+          .th-bracket-tl {
+            top: var(--space-2, 2.4cqmin);
+            left: var(--space-2, 2.4cqmin);
+          }
+
+          .th-bracket-tr {
+            top: var(--space-2, 2.4cqmin);
+            right: var(--space-2, 2.4cqmin);
+            transform: scaleX(-1);
+          }
+
+          .th-bracket-bl {
+            bottom: var(--space-2, 2.4cqmin);
+            left: var(--space-2, 2.4cqmin);
+            transform: scaleY(-1);
+          }
+
+          .th-bracket-br {
+            bottom: var(--space-2, 2.4cqmin);
+            right: var(--space-2, 2.4cqmin);
+            transform: scale(-1, -1);
+          }
+
+          /* Readout groups sit just inside each bracket. */
+          .th-corner {
+            position: absolute;
+            display: flex;
+            flex-direction: column;
+            gap: 0.9cqmin;
+          }
+
+          .th-corner-tl {
+            top: calc(var(--space-2, 2.4cqmin) + 1cqmin);
+            left: calc(var(--space-2, 2.4cqmin) + 9.6cqmin);
+          }
+
+          .th-corner-tr {
+            top: calc(var(--space-2, 2.4cqmin) + 1cqmin);
+            right: calc(var(--space-2, 2.4cqmin) + 9.6cqmin);
+            align-items: flex-end;
+          }
+
+          .th-corner-bl {
+            bottom: calc(var(--space-2, 2.4cqmin) + 1cqmin);
+            left: calc(var(--space-2, 2.4cqmin) + 9.6cqmin);
+          }
+
+          .th-corner-br {
+            bottom: calc(var(--space-2, 2.4cqmin) + 1cqmin);
+            right: calc(var(--space-2, 2.4cqmin) + 9.6cqmin);
+            align-items: flex-end;
+          }
+
+          .th-read {
+            display: flex;
+            align-items: baseline;
+            gap: 1.1cqmin;
+            font-size: 2.3cqmin;
+            line-height: 1.35;
+            white-space: nowrap;
+            will-change: opacity;
+          }
+
+          .th-label {
+            color: var(--muted, #94a3b8);
+            font-weight: 500;
+            letter-spacing: 0.12em;
+            text-transform: uppercase;
+          }
+
+          .th-value {
+            color: var(--fg, #f8fafc);
+            font-weight: 500;
+            font-variant-numeric: tabular-nums;
+          }
+
+          .th-read.th-em .th-label,
+          .th-read.th-em .th-value {
+            color: var(--th-accent);
+          }
+
+          .th-read.th-em .th-value {
+            font-weight: 600;
+          }
+        </style>
+
+        <div
+          id="telemetry-hud-clip"
+          class="th-clip clip"
+          data-start="0"
+          data-duration="4.5"
+          data-track-index="0"
+        >
+          <div class="th-stage">
+            <div class="th-subject">
+              <div class="th-slot" data-slot="subject">
+                <!-- SLOT "subject": replace the children of this element with
+                     your own content (img, video, or HTML). -->
+                <div class="th-default" aria-hidden="true">
+                  <div class="th-card">
+                    <div class="th-bar"></div>
+                    <div class="th-line"></div>
+                    <div class="th-line"></div>
+                    <div class="th-line"></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <svg class="th-bracket th-bracket-tl" viewBox="0 0 48 48" aria-hidden="true">
+              <path d="M 46 3 L 12 3 Q 3 3 3 12 L 3 46"></path>
+            </svg>
+            <svg class="th-bracket th-bracket-tr" viewBox="0 0 48 48" aria-hidden="true">
+              <path d="M 46 3 L 12 3 Q 3 3 3 12 L 3 46"></path>
+            </svg>
+            <svg class="th-bracket th-bracket-bl" viewBox="0 0 48 48" aria-hidden="true">
+              <path d="M 46 3 L 12 3 Q 3 3 3 12 L 3 46"></path>
+            </svg>
+            <svg class="th-bracket th-bracket-br" viewBox="0 0 48 48" aria-hidden="true">
+              <path d="M 46 3 L 12 3 Q 3 3 3 12 L 3 46"></path>
+            </svg>
+
+            <div class="th-corner th-corner-tl"></div>
+            <div class="th-corner th-corner-tr"></div>
+            <div class="th-corner th-corner-bl"></div>
+            <div class="th-corner th-corner-br"></div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            // Literal id: mount flattening strips data-composition-id from the
+            // live root before this timeline registers.
+            var compositionId = "telemetry-hud";
+            var stage = root.querySelector(".th-stage");
+            var brackets = root.querySelectorAll(".th-bracket path");
+            var corners = [
+              root.querySelector(".th-corner-tl"),
+              root.querySelector(".th-corner-tr"),
+              root.querySelector(".th-corner-bl"),
+              root.querySelector(".th-corner-br"),
+            ];
+
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var readoutsRaw =
+              vars.readouts == null
+                ? "fps:59.94,latency:11.8 ms,gpu:38%,heap:1.2 GB"
+                : String(vars.readouts);
+            var emphasizeRaw = Number(vars.emphasize);
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #22c55e)",
+              blue: "var(--accent, #38bdf8)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            // The bundler mirrors composition variables as scoped CSS custom
+            // props, so this unit's own accent variable shadows the contract
+            // --accent token inside the subtree. When the shadow is present,
+            // fall back to the literal contract value instead of var(--accent).
+            var computedAccent = getComputedStyle(root).getPropertyValue("--accent").trim();
+            if (
+              computedAccent === "green" ||
+              computedAccent === "blue" ||
+              computedAccent === "violet"
+            ) {
+              accentColors.blue = "#38bdf8";
+            }
+            root.style.setProperty("--th-accent", accentColors[accent]);
+
+            // Parse "label:value" pairs; the FIRST colon splits, later colons
+            // stay in the value. Cap at 8 (two per corner).
+            var readouts = readoutsRaw
+              .split(",")
+              .map(function (pair) {
+                var i = pair.indexOf(":");
+                var label = (i < 0 ? pair : pair.slice(0, i)).trim();
+                var value = (i < 0 ? "" : pair.slice(i + 1)).trim();
+                return { label: label, value: value };
+              })
+              .filter(function (r) {
+                return r.label.length > 0;
+              })
+              .slice(0, 8);
+            var emphasize = Number.isFinite(emphasizeRaw)
+              ? Math.min(Math.round(emphasizeRaw), readouts.length - 1)
+              : 0;
+
+            var cueList = String(vars.cues == null ? "" : vars.cues)
+              .split(",")
+              .map(function (token) {
+                return parseFloat(token);
+              })
+              .filter(function (value) {
+                return isFinite(value) && value >= 0;
+              });
+
+            // RETIME RANGE: fixed phases; HOLD is the only elastic span.
+            var STAGE_IN = 0.45;
+            var BRACKET_AT = 0.12;
+            var BRACKET_DRAW = 0.5;
+            var READ_IN_AT = 0.45;
+            var TICK = 0.5;
+            var STILLNESS = 0.25;
+            var OUT_BASE = exit === "none" ? 0 : 0.45;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4.5"));
+            var OUT = Math.min(OUT_BASE, duration * 0.2);
+            var OUT_START = duration - OUT;
+            // Every tick must land before the stillness that precedes OUT.
+            var lastCueMax = Math.max(READ_IN_AT, OUT_START - STILLNESS - TICK);
+
+            // Fixed-seed LCG: the only randomness source, consumed in one
+            // deterministic order during this synchronous build.
+            var lcgState = 0x2c9277b5;
+            function rnd() {
+              lcgState = (Math.imul(1664525, lcgState) + 1013904223) >>> 0;
+              return lcgState / 4294967296;
+            }
+            var DIGITS = "0123456789";
+            var UPPER = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+            var LOWER = "abcdefghijklmnopqrstuvwxyz";
+            function standIn(ch) {
+              if (DIGITS.indexOf(ch) >= 0) return DIGITS[Math.floor(rnd() * 10)];
+              if (UPPER.indexOf(ch) >= 0) return UPPER[Math.floor(rnd() * 26)];
+              if (LOWER.indexOf(ch) >= 0) return LOWER[Math.floor(rnd() * 26)];
+              return ch;
+            }
+
+            // Build DOM + one text-at-time table per readout, all at once.
+            // The timeline only ever reads the tables, so seeks in any
+            // direction resolve the same string for the same time.
+            var STEPS = 8;
+            var readElements = [];
+            var valueElements = [];
+            var tables = [];
+            var tickEnd = READ_IN_AT;
+            readouts.forEach(function (readout, index) {
+              var row = document.createElement("div");
+              row.className = "th-read" + (index === emphasize ? " th-em" : "");
+              var labelEl = document.createElement("span");
+              labelEl.className = "th-label";
+              labelEl.textContent = readout.label;
+              var valueEl = document.createElement("span");
+              valueEl.className = "th-value";
+              valueEl.textContent = "--";
+              row.appendChild(labelEl);
+              row.appendChild(valueEl);
+              corners[index % 4].appendChild(row);
+              readElements.push(row);
+              valueElements.push(valueEl);
+
+              var cue = cueList[index] != null ? cueList[index] : 1.0 + index * 0.28;
+              cue = Math.max(READ_IN_AT, Math.min(cue, lastCueMax));
+              var chars = Array.from(readout.value);
+              var rows = [{ t: 0, x: "--" }];
+              for (var step = 1; step <= STEPS; step += 1) {
+                var resolved =
+                  step === STEPS ? chars.length : Math.floor((chars.length * step) / STEPS);
+                var out = "";
+                for (var k = 0; k < chars.length; k += 1) {
+                  out += k < resolved ? chars[k] : standIn(chars[k]);
+                }
+                rows.push({ t: cue + (TICK * step) / STEPS, x: out });
+              }
+              tables.push(rows);
+              tickEnd = Math.max(tickEnd, cue + TICK);
+            });
+
+            // 1ms tolerance: GSAP snaps a tween's end value below the row
+            // table's accumulated float times, far under one frame.
+            function textAt(rows, time) {
+              for (var i = rows.length - 1; i >= 0; i -= 1) {
+                if (time >= rows[i].t - 0.001) return rows[i].x;
+              }
+              return rows[0].x;
+            }
+
+            gsap.set(stage, { opacity: 0, y: 0 });
+            readElements.forEach(function (el) {
+              gsap.set(el, { opacity: 0 });
+            });
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: one stage fade; the subject never moves.
+            tl.to(stage, { opacity: 1, duration: STAGE_IN, ease: "power2.out" }, 0);
+
+            // Brackets draw on: dasharray/dashoffset as ATTRIBUTES (a CSS
+            // strokeDashoffset tween can leave stale paint under reverse
+            // seeks), both endpoints explicit.
+            brackets.forEach(function (path, index) {
+              var length = path.getTotalLength();
+              path.setAttribute("stroke-dasharray", String(length));
+              path.setAttribute("stroke-dashoffset", String(length));
+              tl.fromTo(
+                path,
+                { attr: { "stroke-dashoffset": length } },
+                {
+                  attr: { "stroke-dashoffset": 0 },
+                  duration: BRACKET_DRAW,
+                  ease: "power2.inOut",
+                  immediateRender: false,
+                },
+                BRACKET_AT + index * 0.08,
+              );
+            });
+
+            // Readout lines fade in staggered; opacity only, no movement.
+            readElements.forEach(function (el, index) {
+              tl.fromTo(
+                el,
+                { opacity: 0 },
+                { opacity: 1, duration: 0.35, ease: "power1.out", immediateRender: false },
+                READ_IN_AT + index * 0.07,
+              );
+            });
+
+            // One shared driver reads every table; single owner of all values.
+            var driver = { t: 0 };
+            tl.to(
+              driver,
+              {
+                t: tickEnd,
+                duration: tickEnd,
+                ease: "none",
+                onUpdate: function () {
+                  for (var i = 0; i < valueElements.length; i += 1) {
+                    valueElements[i].textContent = textAt(tables[i], driver.t);
+                  }
+                },
+              },
+              0,
+            );
+
+            // HOLD: the HUD breathes zero. Completely still.
+
+            // OUT: only when the exit variable asks for one.
+            if (exit !== "none") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+              if (exit === "up") {
+                tl.to(stage, { y: "-5cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              }
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/terminal-simulator/demo.html b/docs/public/catalog/components/terminal-simulator/demo.html
new file mode 100644
index 0000000000..de70808a89
--- /dev/null
+++ b/docs/public/catalog/components/terminal-simulator/demo.html
@@ -0,0 +1,157 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Terminal Simulator - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+        /* ponytail: scale wrapper (not a GSAP target) to fill ~65% of frame */
+        transform: scale(1.65);
+      }
+      .hf-remocn-terminal-simulator {
+        --hf-accent: var(--accent, #18181b);
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-terminal-simulator {
+        width: 760px;
+        border-radius: 24px;
+        overflow: hidden;
+        background: #0f172a;
+        color: #e4e4e7;
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+      }
+      .hf-remocn-terminal-simulator .chrome {
+        height: 48px;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 0 18px;
+        background: #111827;
+        color: #94a3b8;
+        font-size: 14px;
+      }
+      .hf-remocn-terminal-simulator .dot {
+        width: 11px;
+        height: 11px;
+        border-radius: 999px;
+        background: #ef4444;
+        box-shadow:
+          18px 0 #f59e0b,
+          36px 0 #22c55e;
+      }
+      .hf-remocn-terminal-simulator .body {
+        display: grid;
+        grid-template-columns: 210px 1fr;
+        min-height: 340px;
+      }
+      .hf-remocn-terminal-simulator .files {
+        padding: 22px;
+        border-right: 1px solid rgba(148, 163, 184, 0.18);
+        color: #94a3b8;
+        font-size: 15px;
+        line-height: 1.8;
+      }
+      .hf-remocn-terminal-simulator .editor {
+        padding: 22px;
+        display: grid;
+        gap: 14px;
+      }
+      .hf-remocn-terminal-simulator .line {
+        display: block;
+        height: 18px;
+        border-radius: 999px;
+        background: rgba(228, 228, 231, 0.18);
+        transform: scaleX(var(--hf-line, 1));
+        transform-origin: left center;
+        opacity: var(--hf-line-opacity, 1);
+      }
+      .hf-remocn-terminal-simulator .terminal {
+        padding: 18px 22px 24px;
+        border-top: 1px solid rgba(148, 163, 184, 0.18);
+        color: #86efac;
+        min-height: 78px;
+        font-size: 15px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="terminal-simulator-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-terminal-simulator">
+          <div class="chrome"><span class="dot"></span><span>Terminal Simulator</span></div>
+          <div class="body">
+            <div class="files">index.html<br />style.css<br />timeline.js</div>
+            <div class="editor">
+              <span class="line" style="width: 92%"></span
+              ><span class="line" style="width: 72%"></span
+              ><span class="line" style="width: 84%"></span
+              ><span class="line" style="width: 58%"></span
+              ><span class="line" style="width: 78%"></span>
+            </div>
+          </div>
+          <div class="terminal">$ hyperframes render --skill=terminal-simulator</div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-terminal-simulator .line",
+          { "--hf-line": 0, "--hf-line-opacity": 0 },
+          {
+            "--hf-line": 1,
+            "--hf-line-opacity": 1,
+            duration: 0.24,
+            stagger: 0.08,
+            ease: "power2.out",
+          },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-terminal-simulator .terminal",
+          { opacity: 0, y: 16 },
+          { opacity: 1, y: 0, duration: 0.34, ease: "power2.out" },
+          startTime + 0.48,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["terminal-simulator-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/terminal-simulator/terminal-simulator.html b/docs/public/catalog/components/terminal-simulator/terminal-simulator.html
new file mode 100644
index 0000000000..1cb4dcf1b4
--- /dev/null
+++ b/docs/public/catalog/components/terminal-simulator/terminal-simulator.html
@@ -0,0 +1,92 @@
+<!--
+  Terminal Simulator - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-terminal-simulator">
+  <div class="chrome"><span class="dot"></span><span>Terminal Simulator</span></div>
+  <div class="body">
+    <div class="files">index.html<br />style.css<br />timeline.js</div>
+    <div class="editor">
+      <span class="line" style="width: 92%"></span><span class="line" style="width: 72%"></span
+      ><span class="line" style="width: 84%"></span><span class="line" style="width: 58%"></span
+      ><span class="line" style="width: 78%"></span>
+    </div>
+  </div>
+  <div class="terminal">$ hyperframes render --skill=terminal-simulator</div>
+</div>
+
+<style>
+  .hf-remocn-terminal-simulator {
+    --hf-accent: var(--accent, #18181b);
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-terminal-simulator {
+    width: 760px;
+    border-radius: 24px;
+    overflow: hidden;
+    background: #0f172a;
+    color: #e4e4e7;
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+    font-family: ui-monospace, Menlo, monospace;
+  }
+  .hf-remocn-terminal-simulator .chrome {
+    height: 48px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 0 18px;
+    background: #111827;
+    color: #94a3b8;
+  }
+  .hf-remocn-terminal-simulator .dot {
+    width: 11px;
+    height: 11px;
+    border-radius: 999px;
+    background: #ef4444;
+    box-shadow:
+      18px 0 #f59e0b,
+      36px 0 #22c55e;
+  }
+  .hf-remocn-terminal-simulator .body {
+    display: grid;
+    grid-template-columns: 210px 1fr;
+    min-height: 340px;
+  }
+  .hf-remocn-terminal-simulator .files {
+    padding: 22px;
+    border-right: 1px solid rgba(148, 163, 184, 0.18);
+    color: #94a3b8;
+  }
+  .hf-remocn-terminal-simulator .editor {
+    padding: 22px;
+    display: grid;
+    gap: 12px;
+  }
+  .hf-remocn-terminal-simulator .line {
+    display: block;
+    height: 16px;
+    border-radius: 999px;
+    background: rgba(228, 228, 231, 0.18);
+    transform: scaleX(var(--hf-line, 1));
+    transform-origin: left center;
+    opacity: var(--hf-line-opacity, 1);
+  }
+  .hf-remocn-terminal-simulator .terminal {
+    padding: 18px 22px 24px;
+    border-top: 1px solid rgba(148, 163, 184, 0.18);
+    color: #86efac;
+    min-height: 78px;
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-terminal-simulator .line', { '--hf-line': 0, '--hf-line-opacity': 0 }, { '--hf-line': 1, '--hf-line-opacity': 1, duration: 0.24, stagger: 0.08, ease: 'power2.out' }, startTime); tl.fromTo('.hf-remocn-terminal-simulator .terminal', { opacity: 0, y: 16 }, { opacity: 1, y: 0, duration: 0.34, ease: 'power2.out' }, startTime + 0.48);
+-->
diff --git a/docs/public/catalog/components/terminal-to-browser-deploy/demo.html b/docs/public/catalog/components/terminal-to-browser-deploy/demo.html
new file mode 100644
index 0000000000..bec1643970
--- /dev/null
+++ b/docs/public/catalog/components/terminal-to-browser-deploy/demo.html
@@ -0,0 +1,212 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Terminal to Browser Deploy - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+        /* ponytail: scale wrapper — GSAP targets .pill/.card via CSS vars, not this element */
+        transform: scale(1.55);
+        transform-origin: center center;
+      }
+      .hf-remocn-terminal-to-browser-deploy {
+        --hf-accent: #2563eb;
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-terminal-to-browser-deploy {
+        width: 820px;
+        min-height: 460px;
+        border-radius: 34px;
+        padding: 28px;
+        background: linear-gradient(135deg, #f8fafc, #e0f2fe);
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);
+        display: grid;
+        grid-template-columns: 280px 1fr;
+        gap: 22px;
+        overflow: hidden;
+      }
+      .hf-remocn-terminal-to-browser-deploy .panel {
+        border: 1px solid rgba(15, 23, 42, 0.08);
+        border-radius: 24px;
+        background: rgba(255, 255, 255, 0.76);
+        padding: 22px;
+        backdrop-filter: blur(12px);
+      }
+      .hf-remocn-terminal-to-browser-deploy .prompt {
+        display: grid;
+        gap: 12px;
+        align-content: start;
+      }
+      .hf-remocn-terminal-to-browser-deploy .pill {
+        height: 42px;
+        border-radius: 999px;
+        background: #111827;
+        color: #fff;
+        display: flex;
+        align-items: center;
+        padding: 0 18px;
+        font-weight: 800;
+        transform: translateX(var(--hf-pill-x, 0px));
+      }
+      .hf-remocn-terminal-to-browser-deploy .preview {
+        display: grid;
+        gap: 14px;
+      }
+      .hf-remocn-terminal-to-browser-deploy .card {
+        min-height: 78px;
+        border-radius: 18px;
+        background: #fff;
+        box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
+        transform: translate(var(--hf-card-x, 0px), var(--hf-card-y, 0px))
+          scale(var(--hf-card-scale, 1));
+        opacity: var(--hf-card-opacity, 1);
+        padding: 14px 18px;
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        justify-content: center;
+      }
+      .hf-remocn-terminal-to-browser-deploy .card-line {
+        height: 8px;
+        border-radius: 4px;
+        background: #e4e4e7;
+      }
+      .hf-remocn-terminal-to-browser-deploy .card-line.short {
+        width: 55%;
+      }
+      .hf-remocn-terminal-to-browser-deploy .card-line.accent {
+        width: 35%;
+        background: #2563eb;
+        opacity: 0.55;
+      }
+      .hf-remocn-terminal-to-browser-deploy .card-badge {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        font-size: 11px;
+        font-weight: 600;
+        letter-spacing: 0.04em;
+        text-transform: uppercase;
+        color: #16a34a;
+        background: #f0fdf4;
+        border: 1px solid #bbf7d0;
+        border-radius: 6px;
+        padding: 3px 8px;
+        width: fit-content;
+      }
+      .hf-remocn-terminal-to-browser-deploy .card-badge.pending {
+        color: #d97706;
+        background: #fffbeb;
+        border-color: #fde68a;
+      }
+      .hf-remocn-terminal-to-browser-deploy .card-dot {
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background: currentColor;
+        flex-shrink: 0;
+      }
+      .hf-remocn-terminal-to-browser-deploy h3 {
+        margin: 0 0 14px;
+        font-size: 32px;
+        letter-spacing: -0.04em;
+      }
+      .hf-remocn-terminal-to-browser-deploy p {
+        margin: 0;
+        color: #475569;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="terminal-to-browser-deploy-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-terminal-to-browser-deploy">
+          <div class="panel prompt">
+            <h3>Terminal to Browser Deploy</h3>
+            <p>Terminal deploy logs hand off into a live browser preview.</p>
+            <div class="pill">Generate scene</div>
+            <div class="pill">Refine motion</div>
+            <div class="pill">Export</div>
+          </div>
+          <div class="panel preview">
+            <div class="card">
+              <div class="card-badge"><span class="card-dot"></span>Deployed</div>
+              <div class="card-line"></div>
+              <div class="card-line short"></div>
+            </div>
+            <div class="card">
+              <div class="card-badge pending"><span class="card-dot"></span>Building</div>
+              <div class="card-line"></div>
+              <div class="card-line accent"></div>
+            </div>
+            <div class="card">
+              <div class="card-line"></div>
+              <div class="card-line short"></div>
+              <div class="card-line accent"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-terminal-to-browser-deploy .pill",
+          { "--hf-pill-x": "-18px", opacity: 0 },
+          { "--hf-pill-x": "0px", opacity: 1, duration: 0.25, stagger: 0.08, ease: "power2.out" },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-terminal-to-browser-deploy .card",
+          { "--hf-card-y": "28px", "--hf-card-scale": 0.96, "--hf-card-opacity": 0 },
+          {
+            "--hf-card-y": "0px",
+            "--hf-card-scale": 1,
+            "--hf-card-opacity": 1,
+            duration: 0.42,
+            stagger: 0.12,
+            ease: "power3.out",
+          },
+          startTime + 0.2,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["terminal-to-browser-deploy-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/terminal-to-browser-deploy/terminal-to-browser-deploy.html b/docs/public/catalog/components/terminal-to-browser-deploy/terminal-to-browser-deploy.html
new file mode 100644
index 0000000000..da11c6e431
--- /dev/null
+++ b/docs/public/catalog/components/terminal-to-browser-deploy/terminal-to-browser-deploy.html
@@ -0,0 +1,94 @@
+<!--
+  Terminal to Browser Deploy - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-terminal-to-browser-deploy">
+  <div class="panel prompt">
+    <h3>Terminal to Browser Deploy</h3>
+    <p>Terminal deploy logs hand off into a live browser preview.</p>
+    <div class="pill">Generate scene</div>
+    <div class="pill">Refine motion</div>
+    <div class="pill">Export</div>
+  </div>
+  <div class="panel preview">
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+  </div>
+</div>
+
+<style>
+  .hf-remocn-terminal-to-browser-deploy {
+    --hf-accent: #2563eb;
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-terminal-to-browser-deploy {
+    width: 820px;
+    min-height: 460px;
+    border-radius: 34px;
+    padding: 28px;
+    background: linear-gradient(135deg, #f8fafc, #e0f2fe);
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);
+    display: grid;
+    grid-template-columns: 280px 1fr;
+    gap: 22px;
+    overflow: hidden;
+  }
+  .hf-remocn-terminal-to-browser-deploy .panel {
+    border: 1px solid rgba(15, 23, 42, 0.08);
+    border-radius: 24px;
+    background: rgba(255, 255, 255, 0.76);
+    padding: 22px;
+    backdrop-filter: blur(12px);
+  }
+  .hf-remocn-terminal-to-browser-deploy .prompt {
+    display: grid;
+    gap: 12px;
+    align-content: start;
+  }
+  .hf-remocn-terminal-to-browser-deploy .pill {
+    height: 42px;
+    border-radius: 999px;
+    background: #111827;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    padding: 0 18px;
+    font-weight: 800;
+    transform: translateX(var(--hf-pill-x, 0px));
+  }
+  .hf-remocn-terminal-to-browser-deploy .preview {
+    display: grid;
+    gap: 14px;
+  }
+  .hf-remocn-terminal-to-browser-deploy .card {
+    min-height: 78px;
+    border-radius: 18px;
+    background: #fff;
+    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
+    transform: translate(var(--hf-card-x, 0px), var(--hf-card-y, 0px))
+      scale(var(--hf-card-scale, 1));
+    opacity: var(--hf-card-opacity, 1);
+  }
+  .hf-remocn-terminal-to-browser-deploy h3 {
+    margin: 0 0 14px;
+    font-size: 32px;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-terminal-to-browser-deploy p {
+    margin: 0;
+    color: #475569;
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-terminal-to-browser-deploy .pill', { '--hf-pill-x': '-18px', opacity: 0 }, { '--hf-pill-x': '0px', opacity: 1, duration: 0.25, stagger: 0.08, ease: 'power2.out' }, startTime); tl.fromTo('.hf-remocn-terminal-to-browser-deploy .card', { '--hf-card-y': '28px', '--hf-card-scale': 0.96, '--hf-card-opacity': 0 }, { '--hf-card-y': '0px', '--hf-card-scale': 1, '--hf-card-opacity': 1, duration: 0.42, stagger: 0.12, ease: 'power3.out' }, startTime + 0.2);
+-->
diff --git a/docs/public/catalog/components/testimonial-card/demo.html b/docs/public/catalog/components/testimonial-card/demo.html
new file mode 100644
index 0000000000..3b99392605
--- /dev/null
+++ b/docs/public/catalog/components/testimonial-card/demo.html
@@ -0,0 +1,117 @@
+<!doctype html>
+<!--
+  testimonial-card demo: standalone 1920x1080 composition that mounts the
+  primitive through data-composition-src. Non-default content exercises all
+  four variables while the host owns the stage and mount dimensions.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Testimonial Card - Demo</title>
+    <style>
+      :root {
+        --bg: #070a12;
+        --fg: #f8fafc;
+        --muted: #a8b3c7;
+        --surface: #151c2c;
+        --border: #34405a;
+        --brand: #e4e4e7;
+        --accent: #e4e4e7;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-body: Inter, system-ui, sans-serif;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        --radius: 28px;
+        --space-1: 8px;
+        --space-2: 16px;
+        --space-3: 32px;
+        --dur-beat: 0.4s;
+        --ease-standard: cubic-bezier(0.215, 0.61, 0.355, 1);
+        --ease-emphasis: cubic-bezier(0.19, 1, 0.22, 1);
+      }
+
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg);
+      }
+
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(
+          ellipse at 50% 44%,
+          color-mix(in srgb, var(--surface) 72%, var(--bg)),
+          var(--bg) 72%
+        );
+      }
+
+      .mount-card {
+        width: 54%;
+        height: 64%;
+        left: 23%;
+        top: 18%;
+        overflow: hidden;
+        border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
+        border-radius: calc(var(--radius) * 1.35);
+        box-shadow: 0 40px 90px color-mix(in srgb, var(--bg) 78%, transparent);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="testimonial-card-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="testimonial-card-mount"
+        class="mount-card clip"
+        data-composition-id="testimonial-card"
+        data-composition-src="./testimonial-card.html"
+        data-variable-values='{"quote":"Our launch video went from brief to polished in one afternoon.","author":"Maya Chen","handle":"@mayac","rating":4.6}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="1037"
+        data-height="691"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["testimonial-card-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "testimonial-card.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/testimonial-card/testimonial-card.html b/docs/public/catalog/components/testimonial-card/testimonial-card.html
new file mode 100644
index 0000000000..f8f78769b1
--- /dev/null
+++ b/docs/public/catalog/components/testimonial-card/testimonial-card.html
@@ -0,0 +1,329 @@
+<!doctype html>
+<!--
+  testimonial-card: HyperFrames video primitive (ui-props / holdable / prove)
+
+  Concept: a token-themed testimonial card proves a claim in one clean reveal.
+  The rating and quote rise into reading position first, then the avatar,
+  author name, and handle settle beneath with a small stagger.
+
+  Compiled-from evidence: fixture social-proof shelf, GAP evidence from the
+  A1+A2 convergent miss. Both consumer simulations needed a testimonial proof
+  beat, and the fixture freezes reading-pace discipline as its governing law.
+
+  Use when: a scene needs customer testimony to substantiate a product claim
+  without recreating a platform-specific social post.
+
+  Variables:
+    - quote (string, default "This changed how we ship."): testimonial copy.
+    - author (string, default "Ken Tanaka"): attributed customer name.
+    - handle (string, default "@ken"): role or social handle beneath the name.
+    - rating (number, 0 to 5, default 5): visible star rating.
+
+  Envelope (holdable):
+    IN   1.50s fixed quote reveal followed by attribution settle.
+    HOLD elastic and deliberately still for reading.
+    OUT  0.45s fixed release fade.
+    If D is shorter than 1.95s, IN and OUT scale together. The timeline is
+    never time-scaled, and HOLD remains the only elastic phase.
+
+  Sync points:
+    - quote-readable at 0.82s into IN.
+    - attribution-settled at 1.50s, the end of IN.
+    Both offsets compress only with short durations and never enter HOLD.
+
+  Sound cues: none. The proof beat has no discrete impact event.
+
+  Mount contract: this file is a template-wrapped sub-composition. The host
+  owns dimensions. #root fills that box with inset:0 and container-type:size,
+  carries no data-width or data-height, and registers one paused GSAP timeline
+  under the hardcoded composition id "testimonial-card".
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "quote", "type": "string", "role": "content", "label": "Quote", "description": "Customer testimonial copy revealed at reading pace.", "default": "This changed how we ship." },
+    { "id": "author", "type": "string", "role": "content", "label": "Author", "description": "Name attributed to the testimonial.", "default": "Ken Tanaka" },
+    { "id": "handle", "type": "string", "role": "content", "label": "Handle", "description": "Role or social handle shown beneath the author name.", "default": "@ken" },
+    { "id": "rating", "type": "number", "role": "content", "label": "Rating", "description": "Visible customer rating from zero to five stars.", "default": 5, "min": 0, "max": 5, "step": 0.1 }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Testimonial Card</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="testimonial-card" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            background: var(--bg);
+            color: var(--fg);
+            font-family: var(--font-body);
+          }
+
+          .tc-clip {
+            width: 100%;
+            height: 100%;
+            display: grid;
+            place-items: center;
+            padding: 6cqh 6cqw;
+          }
+
+          /* EDIT ZONE: card proportions and type scale. Paint is owned only
+             by theme-contract tokens, and every measurement resolves from
+             the host container. GSAP owns all transforms and opacity. */
+          .tc-card {
+            width: min(86cqw, 128cqh);
+            display: grid;
+            gap: min(4.6cqw, 4.6cqh);
+            padding: min(6.5cqw, 6.5cqh);
+            overflow: hidden;
+            border: 0.16cqh solid var(--border);
+            border-radius: var(--radius);
+            background: var(--surface);
+            box-shadow: 0 3cqh 8cqh color-mix(in srgb, var(--bg) 68%, transparent);
+          }
+
+          .tc-proof {
+            display: grid;
+            gap: min(3.2cqw, 3.2cqh);
+            will-change: transform, opacity;
+          }
+
+          .tc-rating {
+            display: flex;
+            align-items: center;
+            gap: min(2cqw, 2cqh);
+            width: max-content;
+            color: var(--muted);
+            font-family: var(--font-mono);
+            font-size: min(2.4cqw, 2.4cqh);
+            font-weight: 650;
+            line-height: 1;
+          }
+
+          .tc-stars {
+            position: relative;
+            display: inline-block;
+            color: var(--muted);
+            font-size: min(3.4cqw, 3.4cqh);
+            letter-spacing: 0.18em;
+            line-height: 1;
+            white-space: nowrap;
+          }
+
+          .tc-stars-fill {
+            position: absolute;
+            inset: 0 auto 0 0;
+            width: var(--tc-rating-fill);
+            overflow: hidden;
+            /* The earned portion of the rating is the data. Flat ink over the
+               muted track says it by value, with no second hue. */
+            color: var(--fg);
+            white-space: nowrap;
+          }
+
+          .tc-quote {
+            margin: 0;
+            color: var(--fg);
+            font-family: var(--font-display);
+            font-size: min(5.2cqw, 5.2cqh);
+            font-weight: 650;
+            line-height: 1.23;
+            letter-spacing: -0.025em;
+            text-wrap: balance;
+          }
+
+          .tc-attribution {
+            display: grid;
+            grid-template-columns: auto minmax(0, 1fr);
+            grid-template-rows: auto auto;
+            column-gap: min(2.7cqw, 2.7cqh);
+            row-gap: min(0.65cqw, 0.65cqh);
+            align-items: center;
+          }
+
+          .tc-avatar {
+            grid-row: 1 / 3;
+            display: grid;
+            place-items: center;
+            width: min(8.4cqw, 8.4cqh);
+            aspect-ratio: 1;
+            border: 0.16cqh solid color-mix(in srgb, var(--fg) 20%, transparent);
+            border-radius: 50%;
+            /* Placeholder person: a single (front) avatar circle at L1, with
+               the initials knocked out in the ground colour. */
+            background: color-mix(in srgb, var(--fg) 72%, var(--surface));
+            color: var(--bg);
+            font-family: var(--font-display);
+            font-size: min(2.65cqw, 2.65cqh);
+            font-weight: 780;
+            letter-spacing: 0.03em;
+          }
+
+          .tc-author {
+            min-width: 0;
+            align-self: end;
+            color: var(--fg);
+            font-family: var(--font-display);
+            font-size: min(3.2cqw, 3.2cqh);
+            font-weight: 700;
+            line-height: 1.08;
+          }
+
+          .tc-handle {
+            min-width: 0;
+            align-self: start;
+            color: var(--muted);
+            font-size: min(2.35cqw, 2.35cqh);
+            line-height: 1.15;
+          }
+
+          .tc-attribution-item {
+            will-change: transform, opacity;
+          }
+        </style>
+
+        <div
+          id="testimonial-card-clip"
+          class="tc-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <article class="tc-card" aria-label="Customer testimonial">
+            <div class="tc-proof">
+              <div class="tc-rating" role="img" aria-label="5 out of 5 stars">
+                <span class="tc-stars" aria-hidden="true">
+                  ★★★★★
+                  <span class="tc-stars-fill">★★★★★</span>
+                </span>
+                <span class="tc-rating-value" aria-hidden="true">5 / 5</span>
+              </div>
+              <blockquote class="tc-quote"></blockquote>
+            </div>
+
+            <footer class="tc-attribution">
+              <div class="tc-avatar tc-attribution-item" aria-hidden="true"></div>
+              <div class="tc-author tc-attribution-item"></div>
+              <div class="tc-handle tc-attribution-item"></div>
+            </footer>
+          </article>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var compositionId = "testimonial-card";
+            var card = root.querySelector(".tc-card");
+            var proof = root.querySelector(".tc-proof");
+            var quoteEl = root.querySelector(".tc-quote");
+            var avatarEl = root.querySelector(".tc-avatar");
+            var authorEl = root.querySelector(".tc-author");
+            var handleEl = root.querySelector(".tc-handle");
+            var ratingEl = root.querySelector(".tc-rating");
+            var ratingValueEl = root.querySelector(".tc-rating-value");
+            var attributionItems = root.querySelectorAll(".tc-attribution-item");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            /* INVARIANT: getVariables() is the sole owner of content. Missing
+               values use the declared defaults, while intentional empty
+               strings remain empty. Rating zero is valid and cannot fall
+               through to the default. */
+            var quoteText = vars.quote == null ? "This changed how we ship." : String(vars.quote);
+            var authorText = vars.author == null ? "Ken Tanaka" : String(vars.author);
+            var handleText = vars.handle == null ? "@ken" : String(vars.handle);
+            var rawRating = Number(vars.rating);
+            var rating = Number.isFinite(rawRating) ? Math.max(0, Math.min(5, rawRating)) : 5;
+            var ratingText = Number.isInteger(rating) ? String(rating) : rating.toFixed(1);
+            var initials = authorText
+              .trim()
+              .split(/\s+/)
+              .filter(Boolean)
+              .slice(0, 2)
+              .map(function (part) {
+                return part.charAt(0);
+              })
+              .join("")
+              .toUpperCase();
+
+            quoteEl.textContent = quoteText;
+            authorEl.textContent = authorText;
+            handleEl.textContent = handleText;
+            avatarEl.textContent = initials === "" ? "?" : initials;
+            ratingEl.style.setProperty("--tc-rating-fill", rating * 20 + "%");
+            ratingEl.setAttribute("aria-label", ratingText + " out of 5 stars");
+            ratingValueEl.textContent = ratingText + " / 5";
+
+            /* RETIME RANGE: these constants own the complete lifecycle. The
+               reveal uses --ease-standard's GSAP form, power2.out, with the
+               quote first and three attribution items staggered beneath. */
+            var IN_BASE = 1.5;
+            var OUT_BASE = 0.45;
+            var QUOTE_START_BASE = 0.12;
+            var QUOTE_DURATION_BASE = 0.7;
+            var ATTRIBUTION_START_BASE = 0.82;
+            var ATTRIBUTION_DURATION_BASE = 0.56;
+            var ATTRIBUTION_STAGGER_BASE = 0.06;
+            var durationValue = Number(root.dataset.duration);
+            var duration = Number.isFinite(durationValue) && durationValue > 0 ? durationValue : 4;
+            var scale = duration < IN_BASE + OUT_BASE ? duration / (IN_BASE + OUT_BASE) : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var OUT_START = IN + HOLD;
+
+            var tl = gsap.timeline({ paused: true });
+
+            tl.fromTo(
+              proof,
+              { y: "18%", opacity: 0 },
+              {
+                y: "0%",
+                opacity: 1,
+                duration: QUOTE_DURATION_BASE * scale,
+                ease: "power2.out",
+              },
+              QUOTE_START_BASE * scale,
+            );
+            tl.fromTo(
+              attributionItems,
+              { y: "34%", opacity: 0 },
+              {
+                y: "0%",
+                opacity: 1,
+                duration: ATTRIBUTION_DURATION_BASE * scale,
+                stagger: ATTRIBUTION_STAGGER_BASE * scale,
+                ease: "power2.out",
+              },
+              ATTRIBUTION_START_BASE * scale,
+            );
+            tl.to(card, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/testimonial-proof-card/README.md b/docs/public/catalog/components/testimonial-proof-card/README.md
new file mode 100644
index 0000000000..ea81c9464f
--- /dev/null
+++ b/docs/public/catalog/components/testimonial-proof-card/README.md
@@ -0,0 +1,87 @@
+# testimonial-proof-card
+
+The proof-and-stats quote card: a testimonial reveals per rendered line
+through a soft overflow mask, the byline (avatar disc, mono name and role,
+optional company text mark) fades up as the quote lands, and one emphasis
+substring gets a hand-drawn accent underline (`getTotalLength` dash, the
+marker-highlight law). Then a dead-still hold.
+
+4.5s authored, elastic HOLD, exit `none` by default.
+
+## Files
+
+- `testimonial-proof-card.html`: the mountable sub-composition (install
+  target: `compositions/components/testimonial-proof-card.html`).
+- `registry-item.json`: registry metadata and the variables block.
+- `demo.html`: a 1920x1080 host that mounts the primitive with non-default
+  variables.
+
+## Variables
+
+| id         | type   | default                                             | notes                                                                                                                                                              |
+| ---------- | ------ | --------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `quote`    | string | `We shipped our launch video in a single afternoon` | Wraps inside the card; each rendered line reveals through its own mask.                                                                                            |
+| `name`     | string | `Maya Chen`                                         | Attribution name in mono; also seeds the avatar initials.                                                                                                          |
+| `role`     | string | `Head of Product`                                   | Muted mono line under the name. Empty hides it.                                                                                                                    |
+| `company`  | string | `NORTHWIND`                                         | Wide-tracked mono text mark at the byline end. Empty hides it.                                                                                                     |
+| `emphasis` | string | `single afternoon`                                  | First case-insensitive substring match in `quote`, expanded to whole words, gets the accent underline after the quote lands. Empty or unmatched disables the draw. |
+| `accent`   | enum   | `green`                                             | Underline and glyph ink: green rides `--brand`, blue rides `--accent`, violet rides `--accent-2`.                                                                  |
+| `exit`     | enum   | `none`                                              | `none` holds until the cut; `fade` and `up` depart over the final 0.45s.                                                                                           |
+
+## The avatar slot
+
+The avatar disc is a named slot inside the `<template>`:
+
+```html
+<div class="tq-avatar" data-slot="avatar">
+  <span class="tq-initials"></span>
+</div>
+```
+
+The default child is the initials span (seeded from `name`). To show a
+photo, install the component and **replace the slot's children in your
+installed copy** (the runtime clones only the primitive's own template on
+mount, so slot content lives in the component file, not on the host clip):
+
+```html
+<div class="tq-avatar" data-slot="avatar">
+  <img src="../../assets/maya.jpg" alt="" />
+</div>
+```
+
+Direct `img`/`video` children are sized to cover the disc automatically
+(`object-fit: cover`, clipped to the circle).
+
+## Mount
+
+```html
+<div
+  class="clip"
+  data-composition-id="testimonial-proof-card"
+  data-composition-src="./components/testimonial-proof-card.html"
+  data-variable-values='{"quote":"The render pipeline paid for itself in one week","emphasis":"one week","name":"Ana Ferreira","role":"VP Engineering","company":"LUMENWORKS","accent":"violet"}'
+  data-start="0"
+  data-duration="4.5"
+  data-track-index="0"
+></div>
+```
+
+Elastic root: no `data-width`/`data-height`; it fills whatever box the host
+clip gives it. Timeline registers under the literal `testimonial-proof-card`
+key.
+
+## Notes
+
+- Envelope: card settle 0.5s, per-line rise 0.6s staggered 0.18s, byline
+  0.5s overlapping the last line, underline 0.55s after the quote lands,
+  then HOLD (the only elastic phase), OUT 0.45s only when `exit` is not
+  `none`. Short durations compress every phase together, never timeScale.
+- The underline path is authored wobble in a fixed viewBox stretched with
+  `preserveAspectRatio="none"`; the anisotropic stroke distortion is the
+  hand-swiped nib feel, deliberately kept (no `non-scaling-stroke`, no
+  `pathLength`).
+- Line splitting measures the rendered wrap once at mount; the emphasis
+  phrase is one nowrap token so the underline never breaks across lines.
+- Deterministic: no randomness, both dash endpoints explicit, seek-safe in
+  either direction. Sync point `underline-landed` fires at 1.6s at the
+  default two-line quote.
diff --git a/docs/public/catalog/components/testimonial-proof-card/demo.html b/docs/public/catalog/components/testimonial-proof-card/demo.html
new file mode 100644
index 0000000000..8af60a21da
--- /dev/null
+++ b/docs/public/catalog/components/testimonial-proof-card/demo.html
@@ -0,0 +1,106 @@
+<!doctype html>
+<!--
+  testimonial-proof-card demo. This standalone composition mounts the
+  primitive through data-composition-src. Non-default quote, attribution,
+  emphasis, and accent values prove the variable path while the primitive
+  remains elastic to its host.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Testimonial Proof Card Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #0b0c0e);
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --muted: #94a3b8;
+        --surface: #14171c;
+        --border: #343a46;
+        --brand: #71f5a7;
+        --accent: #61a8ff;
+        --accent-2: #c5a3ff;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(
+          ellipse at 50% 42%,
+          var(--bg, #171a20) 0%,
+          var(--bg, #0b0c0e) 74%
+        );
+      }
+
+      .mount-stage {
+        width: 66%;
+        height: 72%;
+        left: 17%;
+        top: 14%;
+        container-type: size;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="testimonial-proof-card-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4.5"
+      data-fps="30"
+    >
+      <div
+        id="testimonial-proof-card-mount"
+        class="mount-stage clip"
+        data-composition-id="testimonial-proof-card"
+        data-composition-src="./testimonial-proof-card.html"
+        data-variable-values='{"quote":"The render pipeline paid for itself in one week","emphasis":"one week","name":"Ana Ferreira","role":"VP Engineering","company":"LUMENWORKS","accent":"violet"}'
+        data-start="0"
+        data-duration="4.5"
+        data-track-index="0"
+        data-width="1267"
+        data-height="778"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["testimonial-proof-card-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "testimonial-proof-card.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/testimonial-proof-card/testimonial-proof-card.html b/docs/public/catalog/components/testimonial-proof-card/testimonial-proof-card.html
new file mode 100644
index 0000000000..e6a1d0d5d8
--- /dev/null
+++ b/docs/public/catalog/components/testimonial-proof-card/testimonial-proof-card.html
@@ -0,0 +1,495 @@
+<!doctype html>
+<!--
+  testimonial-proof-card: HyperFrames video primitive (proof-stats / testimonial)
+
+  A quote card: the quote reveals per measured line through a soft overflow
+  mask, an avatar disc (initials by default, an image via the avatar slot),
+  name and role in mono, an optional company mark as wide-tracked text; one
+  emphasis substring gets an accent underline drawn hand-style after the
+  quote lands (getTotalLength dash, the marker-highlight law). Dead-still
+  hold: nothing breathes, nothing loops.
+
+  Variables:
+    quote (string): the testimonial line. Wraps inside the card; each
+      rendered line reveals through its own mask.
+    name (string): attribution name (mono). Also seeds the avatar initials.
+    role (string): attribution role (mono, muted). Empty hides the line.
+    company (string): company mark as wide-tracked mono text at the byline
+      end. Empty hides it.
+    emphasis (string): first case-insensitive substring match inside quote,
+      expanded to whole words, gets the accent underline. Empty or unmatched
+      disables the draw.
+    accent (green | blue | violet): underline and glyph ink via the contract
+      token map (green --brand, blue --accent, violet --accent-2).
+    exit (none | fade | up, default none): frame roots own transitions;
+      holds end films.
+
+  Envelope, fixed IN and OUT with elastic HOLD only (never time-scaled):
+    CARD_BASE  = 0.50s  card surface settles up
+    LINE_BASE  = 0.60s  per-line rise through the mask, 0.18s stagger
+    BYLINE     = 0.50s  avatar + attribution fade up, overlapping quote end
+    DRAW_BASE  = 0.55s  underline draws after the last line lands
+    HOLD       = max(0, D - phases), completely still
+    OUT_BASE   = 0s for exit none, otherwise 0.45s
+    If D is shorter than the fixed phases, every phase compresses together.
+
+  Slot (before-after-wipe convention): the avatar disc is a named slot,
+  <div class="tq-avatar" data-slot="avatar">. Its default child is the
+  initials span; replace the slot's children in your installed copy with an
+  <img> to show a photo (sized to cover the disc automatically).
+
+  Mount contract: the runtime clones only this template. #root fills the
+  host box, establishes the container query basis, has no data-width or
+  data-height, and registers one paused timeline under the literal
+  testimonial-proof-card key.
+-->
+<html
+  lang="en"
+  data-composition-id="testimonial-proof-card"
+  data-composition-duration="4.5"
+  data-composition-variables='[
+    { "id": "quote", "type": "string", "role": "content", "label": "Quote", "description": "The testimonial line. Wraps inside the card; each rendered line reveals through its own mask.", "default": "We shipped our launch video in a single afternoon" },
+    { "id": "name", "type": "string", "role": "content", "label": "Name", "description": "Attribution name in mono. Also seeds the avatar initials.", "default": "Maya Chen" },
+    { "id": "role", "type": "string", "role": "content", "label": "Role", "description": "Attribution role in muted mono. Empty hides the line.", "default": "Head of Product" },
+    { "id": "company", "type": "string", "role": "content", "label": "Company", "description": "Company mark as wide-tracked mono text at the byline end. Empty hides it.", "default": "NORTHWIND" },
+    { "id": "emphasis", "type": "string", "role": "content", "label": "Emphasis", "description": "First case-insensitive substring match in quote, expanded to whole words, gets the accent underline. Empty disables the draw.", "default": "single afternoon" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Underline and glyph ink from the contract token map.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the card holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Testimonial Proof Card</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="testimonial-proof-card" data-duration="4.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            display: grid;
+            place-items: center;
+            background: var(--bg, #0b0c0e);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .tq-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+          }
+
+          .tq-card {
+            width: min(76cqw, 150cqh);
+            padding: 6cqmin 7cqmin;
+            border-radius: var(--radius, 24px);
+            border: 1px solid color-mix(in srgb, var(--border, #343a46) 60%, transparent);
+            background: color-mix(in srgb, var(--surface, #14171c) 88%, transparent);
+            will-change: transform, opacity;
+          }
+
+          .tq-glyph {
+            font-size: 9cqmin;
+            line-height: 0.6;
+            font-weight: 600;
+            color: var(--tq-accent, var(--brand, #71f5a7));
+            margin-bottom: 2.4cqmin;
+          }
+
+          .tq-quote {
+            margin: 0;
+            font-size: var(--tq-font-size, 5cqmin);
+            font-weight: 600;
+            line-height: 1.28;
+            letter-spacing: -0.02em;
+            text-wrap: balance;
+          }
+
+          /* Soft per-line mask. Negative margins cancel the padding so the
+             expanded clip box (room for descenders and the underline ink
+             below the baseline) never shifts layout. */
+          .tq-line-mask {
+            overflow: hidden;
+            padding: 0.12em 0.24em 0.3em;
+            margin: -0.12em -0.24em -0.3em;
+          }
+
+          .tq-line {
+            will-change: transform, opacity;
+          }
+
+          .tq-em {
+            position: relative;
+            display: inline-block;
+            white-space: nowrap;
+          }
+
+          .tq-em-text {
+            position: relative;
+            z-index: 1;
+          }
+
+          /* Underline box below the emphasized words; explicit width/height
+             (svg is replaced), preserveAspectRatio="none" stretches the
+             authored path so the stroke keeps its hand-swiped nib weight. */
+          .tq-mark {
+            position: absolute;
+            left: -2%;
+            bottom: -0.14em;
+            width: 104%;
+            height: 0.24em;
+            overflow: visible;
+            z-index: 2;
+          }
+
+          .tq-byline {
+            display: flex;
+            align-items: center;
+            gap: 3cqmin;
+            margin-top: 5cqmin;
+            will-change: transform, opacity;
+          }
+
+          .tq-avatar {
+            width: 10cqmin;
+            height: 10cqmin;
+            flex: none;
+            border-radius: 50%;
+            overflow: hidden;
+            display: grid;
+            place-items: center;
+            border: 1px solid color-mix(in srgb, var(--border, #343a46) 70%, transparent);
+            background: color-mix(in srgb, var(--tq-accent, #71f5a7) 16%, var(--surface, #14171c));
+          }
+
+          .tq-avatar img,
+          .tq-avatar video {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+          }
+
+          .tq-initials {
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            font-size: 3.4cqmin;
+            font-weight: 600;
+            letter-spacing: 0.08em;
+            color: var(--fg, #f8fafc);
+          }
+
+          .tq-person {
+            display: grid;
+            gap: 0.8cqmin;
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+          }
+
+          .tq-name {
+            font-size: 2.9cqmin;
+            font-weight: 600;
+            letter-spacing: 0.02em;
+          }
+
+          .tq-role {
+            font-size: 2.4cqmin;
+            color: var(--muted, #94a3b8);
+          }
+
+          .tq-company {
+            margin-left: auto;
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            font-size: 2.3cqmin;
+            letter-spacing: 0.3em;
+            text-transform: uppercase;
+            color: var(--muted, #94a3b8);
+          }
+        </style>
+
+        <div
+          id="testimonial-proof-card-clip"
+          class="tq-clip clip"
+          data-start="0"
+          data-duration="4.5"
+          data-track-index="0"
+        >
+          <figure class="tq-card" style="margin: 0">
+            <div class="tq-glyph" aria-hidden="true">&#8220;</div>
+            <blockquote class="tq-quote" style="margin: 0"></blockquote>
+            <figcaption class="tq-byline">
+              <div class="tq-avatar" data-slot="avatar">
+                <span class="tq-initials"></span>
+              </div>
+              <div class="tq-person">
+                <span class="tq-name"></span>
+                <span class="tq-role"></span>
+              </div>
+              <span class="tq-company"></span>
+            </figcaption>
+          </figure>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            // Literal key: the flattening step strips data-composition-id off
+            // the mounted root, so reading it back would register "null".
+            var compositionId = "testimonial-proof-card";
+            var card = root.querySelector(".tq-card");
+            var quoteEl = root.querySelector(".tq-quote");
+            var bylineEl = root.querySelector(".tq-byline");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            function str(value, fallback) {
+              return (value == null ? fallback : String(value)).trim().replace(/\s+/g, " ");
+            }
+            var quote = str(vars.quote, "We shipped our launch video in a single afternoon");
+            var name = str(vars.name, "Maya Chen");
+            var role = str(vars.role, "Head of Product");
+            var company = str(vars.company, "NORTHWIND");
+            var emphasis = str(vars.emphasis, "single afternoon");
+
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            root.style.setProperty("--tq-accent", accentColors[accent]);
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            // Byline content. Empty strings hide their element.
+            root.querySelector(".tq-name").textContent = name;
+            var roleEl = root.querySelector(".tq-role");
+            if (role) roleEl.textContent = role;
+            else roleEl.setAttribute("hidden", "");
+            var companyEl = root.querySelector(".tq-company");
+            if (company) companyEl.textContent = company;
+            else companyEl.setAttribute("hidden", "");
+
+            // Avatar initials: only when the default initials span is still
+            // in the slot (a user-supplied img replaces the slot children).
+            var initialsEl = root.querySelector(".tq-avatar .tq-initials");
+            if (initialsEl) {
+              var parts = name.split(" ").filter(Boolean);
+              var initials = parts
+                .slice(0, 2)
+                .map(function (part) {
+                  return Array.from(part)[0].toUpperCase();
+                })
+                .join("");
+              initialsEl.textContent = initials;
+            }
+
+            // Emphasis match expanded to whole words so the quote tokenizes
+            // cleanly into word spans (the underline never splits a word).
+            var matchStart = -1;
+            var matchEnd = -1;
+            if (emphasis.length > 0) {
+              var index = quote.toLowerCase().indexOf(emphasis.toLowerCase());
+              if (index >= 0) {
+                matchStart = quote.lastIndexOf(" ", index) + 1;
+                matchEnd = quote.indexOf(" ", index + emphasis.length);
+                if (matchEnd < 0) matchEnd = quote.length;
+              }
+            }
+
+            // Deterministic fit: font size rides 1/sqrt(chars) so the quote
+            // lands around two to three lines at any card width.
+            var characters = Math.max(1, Array.from(quote).length);
+            var fitted = Math.max(3.8, Math.min(7.2, 46 / Math.sqrt(characters)));
+            root.style.setProperty("--tq-font-size", fitted.toFixed(3) + "cqmin");
+
+            // Tokenize into inline-block word spans (emphasis is one nowrap
+            // token), measure wrapped lines, then rebuild one mask per line.
+            var tokens = [];
+            function pushWords(text) {
+              text.split(" ").forEach(function (wordText) {
+                if (!wordText) return;
+                var span = document.createElement("span");
+                span.style.display = "inline-block";
+                span.textContent = wordText;
+                tokens.push(span);
+              });
+            }
+            var pathEl = null;
+            var emEl = null;
+            if (matchStart >= 0) {
+              pushWords(quote.slice(0, matchStart));
+              emEl = document.createElement("span");
+              emEl.className = "tq-em";
+              var svgNS = "http://www.w3.org/2000/svg";
+              var svg = document.createElementNS(svgNS, "svg");
+              svg.setAttribute("class", "tq-mark");
+              svg.setAttribute("viewBox", "0 0 100 12");
+              svg.setAttribute("preserveAspectRatio", "none");
+              svg.setAttribute("aria-hidden", "true");
+              pathEl = document.createElementNS(svgNS, "path");
+              // Authored wobble, marker-highlight underline law: dash reveal
+              // from getTotalLength, never pathLength, never
+              // non-scaling-stroke; the viewBox stretch is the nib feel.
+              pathEl.setAttribute("d", "M 2 7 C 20 4.5, 46 8.5, 66 6 C 80 4.5, 92 7.5, 98 5.5");
+              pathEl.setAttribute("fill", "none");
+              pathEl.setAttribute("stroke-width", "4.5");
+              pathEl.setAttribute("stroke-linecap", "round");
+              pathEl.setAttribute("stroke-linejoin", "round");
+              // style.stroke, not the presentation attribute: var() only
+              // resolves as a CSS value.
+              pathEl.style.stroke = accentColors[accent];
+              svg.appendChild(pathEl);
+              var emText = document.createElement("span");
+              emText.className = "tq-em-text";
+              emText.textContent = quote.slice(matchStart, matchEnd);
+              emEl.appendChild(svg);
+              emEl.appendChild(emText);
+              tokens.push(emEl);
+              pushWords(quote.slice(matchEnd));
+            } else {
+              pushWords(quote);
+            }
+            tokens.forEach(function (token, i) {
+              if (i > 0) quoteEl.appendChild(document.createTextNode(" "));
+              quoteEl.appendChild(token);
+            });
+            quoteEl.setAttribute("aria-label", quote);
+
+            // Group tokens by rendered row, then rebuild per-line masks.
+            var rows = [];
+            var lastTop = null;
+            tokens.forEach(function (token) {
+              var top = token.offsetTop;
+              if (lastTop === null || Math.abs(top - lastTop) > 2) {
+                rows.push([]);
+                lastTop = top;
+              }
+              rows[rows.length - 1].push(token);
+            });
+            quoteEl.textContent = "";
+            var lineEls = rows.map(function (row) {
+              var mask = document.createElement("div");
+              mask.className = "tq-line-mask";
+              var line = document.createElement("div");
+              line.className = "tq-line";
+              row.forEach(function (token, i) {
+                if (i > 0) line.appendChild(document.createTextNode(" "));
+                line.appendChild(token);
+              });
+              mask.appendChild(line);
+              quoteEl.appendChild(mask);
+              return line;
+            });
+
+            // RETIME RANGE: fixed phases; HOLD is the only elastic span.
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4.5"));
+            var CARD_BASE = 0.5;
+            var LINE_BASE = 0.6;
+            var STAG_BASE = 0.18;
+            var LINES_AT_BASE = 0.15;
+            var BYLINE_BASE = 0.5;
+            var DRAW_BASE = 0.55;
+            var OUT_BASE = exit === "none" ? 0 : 0.45;
+            var quoteEndBase =
+              LINES_AT_BASE + Math.max(0, lineEls.length - 1) * STAG_BASE + LINE_BASE;
+            var bylineAtBase = Math.max(0, quoteEndBase - 0.15);
+            var drawAtBase = quoteEndBase + 0.1;
+            var inEndBase = Math.max(
+              CARD_BASE,
+              bylineAtBase + BYLINE_BASE,
+              pathEl ? drawAtBase + DRAW_BASE : 0,
+            );
+            var s = duration < inEndBase + OUT_BASE ? duration / (inEndBase + OUT_BASE) : 1;
+            var OUT = OUT_BASE * s;
+            var OUT_START = duration - OUT;
+
+            gsap.set(card, { opacity: 0, y: "4cqh" });
+            gsap.set(lineEls, { yPercent: 130, opacity: 0 });
+            gsap.set(bylineEl, { opacity: 0, y: "2.5cqh" });
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: the card surface settles up.
+            tl.fromTo(
+              card,
+              { opacity: 0, y: "4cqh" },
+              { opacity: 1, y: "0cqh", duration: CARD_BASE * s, ease: "power3.out" },
+              0,
+            );
+
+            // Quote lines rise through their soft masks, top to bottom.
+            lineEls.forEach(function (line, i) {
+              tl.fromTo(
+                line,
+                { yPercent: 130, opacity: 0 },
+                {
+                  yPercent: 0,
+                  opacity: 1,
+                  duration: LINE_BASE * s,
+                  ease: "power3.out",
+                },
+                (LINES_AT_BASE + i * STAG_BASE) * s,
+              );
+            });
+
+            // Byline fades up, overlapping the last line's landing.
+            tl.fromTo(
+              bylineEl,
+              { opacity: 0, y: "2.5cqh" },
+              { opacity: 1, y: "0cqh", duration: BYLINE_BASE * s, ease: "power3.out" },
+              bylineAtBase * s,
+            );
+
+            // DRAW: the underline after the quote lands; both dash endpoints
+            // explicit so any seek is correct without playing through. At
+            // dashoffset == length the round cap still paints a dot at the
+            // path start, so the ink is opacity 0 until the exact cue frame.
+            if (pathEl) {
+              var length = pathEl.getTotalLength();
+              pathEl.style.strokeDasharray = String(length);
+              gsap.set(pathEl, { strokeDashoffset: length, opacity: 0 });
+              tl.set(pathEl, { opacity: 1 }, drawAtBase * s);
+              tl.fromTo(
+                pathEl,
+                { strokeDashoffset: length },
+                { strokeDashoffset: 0, duration: DRAW_BASE * s, ease: "power2.inOut" },
+                drawAtBase * s,
+              );
+            }
+
+            // HOLD: dead still.
+
+            // OUT: optional departure; exit none holds until the frame cuts.
+            if (exit === "fade") {
+              tl.to(card, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "up") {
+              tl.to(card, { opacity: 0, y: "-6cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/text-shimmer/demo.html b/docs/public/catalog/components/text-shimmer/demo.html
new file mode 100644
index 0000000000..672bf29f9d
--- /dev/null
+++ b/docs/public/catalog/components/text-shimmer/demo.html
@@ -0,0 +1,110 @@
+<!doctype html>
+<!--
+  text-shimmer demo. This standalone composition mounts text-shimmer.html
+  through data-composition-src. Non-default values prove that text, accent,
+  and sweep_at flow through the mount while the primitive follows its host.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Text Shimmer Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #0b0c0e);
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --muted: #94a3b8;
+        --surface: #15171b;
+        --border: #343840;
+        --brand: #22c55e;
+        --accent: #38bdf8;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-body: Inter, system-ui, sans-serif;
+        --radius: 3cqmin;
+        --space-3: 4cqmin;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(
+          ellipse at 50% 45%,
+          var(--bg, #181b21) 0%,
+          var(--bg, #0b0c0e) 72%
+        );
+      }
+
+      .mount-card {
+        width: 52%;
+        height: 34%;
+        left: 24%;
+        top: 33%;
+        container-type: size;
+        overflow: hidden;
+        border: 1px solid color-mix(in srgb, var(--border, #94a3b8) 22%, transparent);
+        border-radius: 30px;
+        background: var(--surface, #15171b);
+        box-shadow: 0 42px 100px color-mix(in srgb, var(--bg, #000000) 48%, transparent);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="text-shimmer-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="3"
+      data-fps="30"
+    >
+      <div
+        id="text-shimmer-mount"
+        class="mount-card clip"
+        data-composition-id="text-shimmer"
+        data-composition-src="./text-shimmer.html"
+        data-variable-values='{"text":"Pure momentum","accent":"blue","sweep_at":0.8}'
+        data-start="0"
+        data-duration="3"
+        data-track-index="0"
+        data-width="998"
+        data-height="367"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["text-shimmer-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "text-shimmer.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/text-shimmer/text-shimmer.html b/docs/public/catalog/components/text-shimmer/text-shimmer.html
new file mode 100644
index 0000000000..6501d0584c
--- /dev/null
+++ b/docs/public/catalog/components/text-shimmer/text-shimmer.html
@@ -0,0 +1,178 @@
+<!doctype html>
+<!--
+  text-shimmer: HyperFrames video primitive (text effects / drift / emphasize)
+
+  Concept: a headline remains fixed while one narrow specular band crosses
+  its glyphs. The text is clean before and after the pass. There is no
+  entrance, exit, pulse, scale, or supporting decoration.
+
+  Evidence: design-inspiration/INDEX.md and viral-micro-interactions.md,
+  animated text shimmer by jhey Tan, adapted from an infinite CSS loop into
+  one deterministic, seek-driven video beat.
+
+  Variables:
+    - text (string, default "Effortless"): headline copy.
+    - accent (green | blue | violet, default green): shimmer hue.
+    - sweep_at (number, 0.2 to 2 seconds, default 1.2): requested sweep start.
+
+  Envelope: IN includes clean stillness until sweep_at, then one fixed 0.9s
+  sweep. If the mounted duration is too short, the sweep starts earlier and
+  compresses only when it cannot fit. HOLD is elastic and keeps the clean end
+  state alive with an off-glyph drift. OUT is intentionally zero because the
+  treatment returns to ordinary text rather than dismissing it.
+
+  Mount contract: everything renderable lives inside the template. #root is
+  elastic, fills the host box, establishes the container query basis, and has
+  no data-width or data-height. The paused GSAP timeline registers under the
+  hardcoded text-shimmer key.
+-->
+<html
+  lang="en"
+  data-composition-id="text-shimmer"
+  data-composition-duration="3"
+  data-composition-variables='[
+    { "id": "text", "type": "string", "role": "content", "label": "Headline", "description": "Text receiving the single shimmer pass.", "default": "Effortless" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Hue of the specular shimmer band.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "sweep_at", "type": "number", "role": "timing", "label": "Sweep start", "description": "Requested start time for the shimmer sweep.", "default": 1.2, "min": 0.2, "max": 2, "step": 0.1, "unit": "s" }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Text Shimmer</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="text-shimmer" data-duration="3" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            background: var(--bg, transparent);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .ts-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+            padding: var(--space-3, 4cqmin);
+            background: var(--surface, transparent);
+          }
+
+          .ts-headline {
+            --ts-base: var(--fg, #f8fafc);
+            --ts-accent: var(--brand, #22c55e);
+            display: block;
+            max-width: 90cqw;
+            color: transparent;
+            font-size: clamp(28px, 16cqmin, 176px);
+            font-weight: 780;
+            line-height: 0.96;
+            letter-spacing: -0.055em;
+            overflow-wrap: anywhere;
+            text-align: center;
+            background-image: linear-gradient(
+              110deg,
+              var(--ts-base) 0%,
+              var(--ts-base) 40%,
+              color-mix(in srgb, var(--ts-accent) 58%, var(--fg, white)) 47%,
+              var(--fg, white) 50%,
+              color-mix(in srgb, var(--ts-accent) 72%, var(--fg, white)) 53%,
+              var(--ts-base) 60%,
+              var(--ts-base) 100%
+            );
+            background-position: 100% 50%;
+            background-repeat: no-repeat;
+            background-size: 300% 100%;
+            background-clip: text;
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            will-change: background-position;
+          }
+        </style>
+
+        <div
+          id="text-shimmer-clip"
+          class="ts-clip clip"
+          data-start="0"
+          data-duration="3"
+          data-track-index="0"
+        >
+          <span class="ts-headline"></span>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var headline = root.querySelector(".ts-headline");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var text = vars.text == null ? "Effortless" : String(vars.text);
+            var accent = vars.accent === "blue" || vars.accent === "violet" ? vars.accent : "green";
+            var accentTokens = {
+              green: "var(--brand, #22c55e)",
+              blue: "var(--accent, #38bdf8)",
+              violet: "var(--accent-2, #a78bfa)",
+            };
+            var accentColor = accentTokens[accent];
+            var sweepAtValue = vars.sweep_at;
+            var sweepAt =
+              typeof sweepAtValue === "number" && Number.isFinite(sweepAtValue)
+                ? Math.max(0.2, Math.min(2, sweepAtValue))
+                : 1.2;
+
+            headline.textContent = text;
+            headline.style.setProperty("--ts-accent", accentColor);
+
+            var SWEEP_BASE = 0.9;
+            var durationValue = parseFloat(root.dataset.duration || "3");
+            var duration = Number.isFinite(durationValue) ? Math.max(0.001, durationValue) : 3;
+            var SWEEP = Math.min(SWEEP_BASE, duration);
+            var SWEEP_START = Math.min(sweepAt, Math.max(0, duration - SWEEP));
+            var IN = SWEEP_START + SWEEP;
+            var HOLD = Math.max(0, duration - IN);
+
+            var tl = gsap.timeline({ paused: true });
+            tl.fromTo(
+              headline,
+              { backgroundPosition: "100% 50%" },
+              { backgroundPosition: "0% 50%", duration: SWEEP, ease: "sine.inOut" },
+              SWEEP_START,
+            );
+
+            if (HOLD > 0) {
+              tl.to(
+                headline,
+                { backgroundPosition: "4% 50%", duration: HOLD, ease: "sine.inOut" },
+                IN,
+              );
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["text-shimmer"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/text-stagger/__hf-variables-preview.html b/docs/public/catalog/components/text-stagger/__hf-variables-preview.html
new file mode 100644
index 0000000000..439b84183a
--- /dev/null
+++ b/docs/public/catalog/components/text-stagger/__hf-variables-preview.html
@@ -0,0 +1,81 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Text Stagger variables preview</title>
+    <style>
+      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #fafafa; }
+      #hf-vars-root { position: relative; width: 1920px; height: 1080px; }
+      #hf-vars-mount { position: absolute; inset: 0; display: grid; place-items: center; }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  </head>
+  <body>
+    <div id="hf-vars-root" data-composition-id="text-stagger-variables-preview" data-start="0" data-width="1920" data-height="1080" data-duration="5" data-fps="30">
+      <div id="hf-vars-mount" class="clip" data-composition-id="text-stagger" data-composition-src="./text-stagger.html" data-start="0" data-duration="5" data-track-index="0" data-width="1920" data-height="1080"></div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["text-stagger-variables-preview"] = gsap.timeline({ paused: true });
+    </script>
+    <script>
+      (function () {
+        var mount = document.getElementById("hf-vars-mount");
+        // The mount is filled asynchronously, and the demo script selects
+        // what it fills it with, so it cannot run before then.
+        var observer = new MutationObserver(build);
+        observer.observe(mount, { childList: true, subtree: true });
+        build();
+        function build() {
+          if (!mount.firstElementChild) return;
+          observer.disconnect();
+
+        const tl = gsap.timeline({ paused: true });
+        tl.fromTo(
+          ".hf-transition-text-stagger span",
+          { opacity: 0, y: 48, filter: "blur(14px)" },
+          {
+            opacity: 1,
+            y: 0,
+            filter: "blur(0px)",
+            duration: 0.54,
+            stagger: 0.09,
+            ease: "power3.out",
+          },
+          0.35,
+        );
+        tl.to(
+          ".hf-transition-text-stagger span",
+          { backgroundPosition: "100% 0%", duration: 0.72, stagger: 0.04, ease: "power2.inOut" },
+          1.05,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["text-stagger-demo"] = tl;
+          var child = window.__timelines["text-stagger-demo"];
+          delete window.__timelines["text-stagger-demo"];
+          if (!child || typeof child.paused !== "function") return;
+          child.paused(false);
+          window.__timelines["text-stagger-variables-preview"].add(child, 0);
+        }
+      })();
+    </script>
+<script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "text-stagger.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/text-stagger/demo.html b/docs/public/catalog/components/text-stagger/demo.html
new file mode 100644
index 0000000000..c4a3a8533a
--- /dev/null
+++ b/docs/public/catalog/components/text-stagger/demo.html
@@ -0,0 +1,124 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Text Stagger - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #fafafa;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        gap: 28px;
+        /* ponytail: scale on non-GSAP wrapper; text was ~7% frame height, now fills ~55% */
+        transform: scale(2.6);
+        transform-origin: center center;
+      }
+      .demo-label {
+        font-size: 11px;
+        font-weight: 500;
+        letter-spacing: 0.12em;
+        text-transform: uppercase;
+        color: #a1a1aa;
+      }
+      .hf-transition-text-stagger {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.24em;
+        color: #18181b;
+        font:
+          900 74px/0.95 Inter,
+          system-ui,
+          sans-serif;
+        letter-spacing: -0.045em;
+      }
+      .hf-transition-text-stagger span {
+        display: inline-block;
+        background: linear-gradient(90deg, #18181b, #18181b, #71717a, #18181b);
+        background-size: 240% 100%;
+        -webkit-background-clip: text;
+        background-clip: text;
+        color: transparent;
+        will-change: transform, opacity, filter, background-position;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="text-stagger-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="demo-label">text-stagger</div>
+        <div class="hf-transition-text-stagger">
+          <span>Build</span>
+          <span>motion</span>
+          <span>systems</span>
+          <span>fast</span>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        tl.fromTo(
+          ".hf-transition-text-stagger span",
+          { opacity: 0, y: 48, filter: "blur(14px)" },
+          {
+            opacity: 1,
+            y: 0,
+            filter: "blur(0px)",
+            duration: 0.54,
+            stagger: 0.09,
+            ease: "power3.out",
+          },
+          0.35,
+        );
+        tl.to(
+          ".hf-transition-text-stagger span",
+          { backgroundPosition: "100% 0%", duration: 0.72, stagger: 0.04, ease: "power2.inOut" },
+          1.05,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["text-stagger-demo"] = tl;
+      </script>
+    </div>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "text-stagger.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/text-stagger/text-stagger.html b/docs/public/catalog/components/text-stagger/text-stagger.html
new file mode 100644
index 0000000000..60f5f6ff35
--- /dev/null
+++ b/docs/public/catalog/components/text-stagger/text-stagger.html
@@ -0,0 +1,132 @@
+<!--
+  Text Stagger - transitions.dev-inspired primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Use the timeline
+  integration note at the bottom as the starting point for deterministic GSAP
+  animation.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result into the markup or
+  into a custom property the CSS above consumes. The timeline recipe below is
+  untouched by them: it keeps driving the same rise, blur and shimmer sweep.
+
+    - text (string, default "Build motion systems fast"): the headline. It is
+      split on whitespace and every word becomes its own span, so the word
+      count decides how many steps the stagger has. Blank falls back to the
+      default sentence.
+    - size (number, default 74, clamped to 24-160 px): type size of every
+      word. Line height stays proportional, so the block grows and shrinks as
+      one. A missing or non-numeric value falls back to 74.
+    - tone (ink | paper, default ink): base word colour. ink is near-black for
+      light frames, paper near-white for dark ones. It paints both the resting
+      words and the two dark stops of the shimmer gradient.
+    - accent (blue | green | violet, default blue): the shimmer colour that the
+      second timeline step sweeps across the words. It sits outside the visible
+      band while the words rest, so it only shows once that sweep runs.
+
+  On every default the result is identical to the original: four near-black
+  74px words that rise through a blur and take one sky-blue shimmer pass.
+-->
+
+<div
+  class="hf-transition-text-stagger"
+  data-composition-variables='[
+    {"id": "text", "type": "string", "role": "content", "label": "Text", "description": "Headline copy. Every whitespace-separated word becomes one staggered span.", "default": "Build motion systems fast"},
+    {"id": "size", "type": "number", "role": "layout", "label": "Size", "description": "Type size of every word in pixels, clamped to 24-160. Line height stays proportional.", "default": 74, "min": 24, "max": 160, "step": 1, "unit": "px"},
+    {"id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Base word colour: ink for light frames, paper for dark ones.", "default": "ink", "options": [{"value": "ink", "label": "Ink"}, {"value": "paper", "label": "Paper"}]},
+    {"id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Colour of the shimmer the second timeline step sweeps across the words.", "default": "blue", "options": [{"value": "blue", "label": "Blue"}, {"value": "green", "label": "Green"}, {"value": "violet", "label": "Violet"}]}
+  ]'
+>
+  <span>Build</span>
+  <span>motion</span>
+  <span>systems</span>
+  <span>fast</span>
+</div>
+
+<style>
+  .hf-transition-text-stagger {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.24em;
+    color: var(--hf-stagger-ink, #111827);
+    font:
+      900 74px/0.95 Inter,
+      system-ui,
+      sans-serif;
+    font-size: var(--hf-stagger-size, 74px);
+    letter-spacing: -0.045em;
+  }
+  .hf-transition-text-stagger span {
+    display: inline-block;
+    background: linear-gradient(
+      90deg,
+      var(--hf-stagger-ink, #111827),
+      var(--hf-stagger-ink, #111827),
+      var(--hf-stagger-accent, #38bdf8),
+      var(--hf-stagger-ink, #111827)
+    );
+    background-size: 240% 100%;
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    will-change: transform, opacity, filter, background-position;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    var DEFAULT_TEXT = "Build motion systems fast";
+    var tones = { ink: "#111827", paper: "#f8fafc" };
+    var accents = { blue: "#38bdf8", green: "#34d399", violet: "#a78bfa" };
+
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var words = String(vars.text == null ? DEFAULT_TEXT : vars.text)
+      .split(/\s+/)
+      .filter(function (word) {
+        return word.length > 0;
+      });
+    if (words.length === 0) words = DEFAULT_TEXT.split(" ");
+
+    // Number(null) is 0, so null has to miss the numeric branch and clamp back
+    // to the declared default instead of snapping to the minimum.
+    var size = typeof vars.size === "number" ? vars.size : parseFloat(vars.size);
+    if (!isFinite(size)) size = 74;
+    size = Math.min(160, Math.max(24, size));
+
+    var tone = tones[pick(tones, vars.tone, "ink")];
+    var accent = accents[pick(accents, vars.accent, "blue")];
+
+    var roots = document.querySelectorAll(".hf-transition-text-stagger");
+    for (var i = 0; i < roots.length; i += 1) {
+      var root = roots[i];
+      root.style.setProperty("--hf-stagger-size", size + "px");
+      root.style.setProperty("--hf-stagger-ink", tone);
+      root.style.setProperty("--hf-stagger-accent", accent);
+      // Rebuilt without whitespace between the spans: whitespace-only text
+      // between flex items is not rendered, so this matches the markup above.
+      root.textContent = "";
+      for (var w = 0; w < words.length; w += 1) {
+        var span = document.createElement("span");
+        span.textContent = words[w];
+        root.appendChild(span);
+      }
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-transition-text-stagger span', { opacity: 0, y: 48, filter: 'blur(14px)' }, { opacity: 1, y: 0, filter: 'blur(0px)', duration: 0.54, stagger: 0.09, ease: 'power3.out' }, 0.35);
+  tl.to('.hf-transition-text-stagger span', { backgroundPosition: '100% 0%', duration: 0.72, stagger: 0.04, ease: 'power2.inOut' }, 1.05);
+-->
diff --git a/docs/public/catalog/components/text-state-swap/__hf-variables-preview.html b/docs/public/catalog/components/text-state-swap/__hf-variables-preview.html
new file mode 100644
index 0000000000..5d92b2f490
--- /dev/null
+++ b/docs/public/catalog/components/text-state-swap/__hf-variables-preview.html
@@ -0,0 +1,87 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Text State Swap variables preview</title>
+    <style>
+      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #f5f5f4; }
+      #hf-vars-root { position: relative; width: 1920px; height: 1080px; }
+      #hf-vars-mount { position: absolute; inset: 0; display: grid; place-items: center; }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  </head>
+  <body>
+    <div id="hf-vars-root" data-composition-id="text-state-swap-variables-preview" data-start="0" data-width="1920" data-height="1080" data-duration="5" data-fps="30">
+      <div id="hf-vars-mount" class="clip" data-composition-id="text-state-swap" data-composition-src="./text-state-swap.html" data-start="0" data-duration="5" data-track-index="0" data-width="1920" data-height="1080"></div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["text-state-swap-variables-preview"] = gsap.timeline({ paused: true });
+    </script>
+    <script>
+      (function () {
+        var mount = document.getElementById("hf-vars-mount");
+        // The mount is filled asynchronously, and the demo script selects
+        // what it fills it with, so it cannot run before then.
+        var observer = new MutationObserver(build);
+        observer.observe(mount, { childList: true, subtree: true });
+        build();
+        function build() {
+          if (!mount.firstElementChild) return;
+          observer.disconnect();
+
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.to(
+          ".hf-transition-text-state-swap .from",
+          {
+            opacity: 0,
+            "--hf-text-y": "-18px",
+            "--hf-text-blur": "8px",
+            duration: 0.18,
+            ease: "power2.in",
+          },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-transition-text-state-swap .to",
+          { opacity: 0, "--hf-text-y": "18px", "--hf-text-blur": "8px" },
+          {
+            opacity: 1,
+            "--hf-text-y": "0px",
+            "--hf-text-blur": "0px",
+            duration: 0.26,
+            ease: "power2.out",
+          },
+          startTime + 0.12,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["text-state-swap-demo"] = tl;
+          var child = window.__timelines["text-state-swap-demo"];
+          delete window.__timelines["text-state-swap-demo"];
+          if (!child || typeof child.paused !== "function") return;
+          child.paused(false);
+          window.__timelines["text-state-swap-variables-preview"].add(child, 0);
+        }
+      })();
+    </script>
+<script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "text-state-swap.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/text-state-swap/demo.html b/docs/public/catalog/components/text-state-swap/demo.html
new file mode 100644
index 0000000000..1b2938c130
--- /dev/null
+++ b/docs/public/catalog/components/text-state-swap/demo.html
@@ -0,0 +1,189 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Text State Swap - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f5f5f4;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      /* ponytail: scale on non-GSAP wrapper, safe to use transform here */
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        transform: scale(2.6);
+        transform-origin: center center;
+      }
+      .demo-card {
+        background: #ffffff;
+        border: 1px solid #e4e4e7;
+        border-radius: 14px;
+        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.08);
+        padding: 32px 40px;
+        display: flex;
+        flex-direction: column;
+        gap: 20px;
+        width: 340px;
+      }
+      .demo-card-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+      .demo-card-title {
+        font-size: 13px;
+        font-weight: 600;
+        color: #71717a;
+        letter-spacing: 0.02em;
+        text-transform: uppercase;
+      }
+      .demo-card-dot {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background: #22c55e;
+      }
+      .demo-card-body {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+      }
+      .demo-card-line {
+        height: 10px;
+        border-radius: 5px;
+        background: #f4f4f5;
+      }
+      .demo-card-line.w-full {
+        width: 100%;
+      }
+      .demo-card-line.w-3q {
+        width: 75%;
+      }
+      .demo-card-line.w-half {
+        width: 50%;
+      }
+      .demo-card-footer {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        padding-top: 4px;
+        border-top: 1px solid #f4f4f5;
+      }
+      .hf-transition-text-state-swap {
+        position: relative;
+        width: 140px;
+        height: 22px;
+        overflow: hidden;
+        color: #18181b;
+        font:
+          700 14px/1 Inter,
+          system-ui,
+          sans-serif;
+      }
+      .hf-transition-text-state-swap span {
+        position: absolute;
+        left: 0;
+        top: 0;
+        filter: blur(var(--hf-text-blur, 0px));
+        transform: translateY(var(--hf-text-y, 0px));
+        will-change: transform, filter, opacity;
+      }
+      .hf-transition-text-state-swap .to {
+        opacity: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="text-state-swap-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="demo-card">
+          <div class="demo-card-header">
+            <span class="demo-card-title">Draft</span>
+            <span class="demo-card-dot"></span>
+          </div>
+          <div class="demo-card-body">
+            <div class="demo-card-line w-full"></div>
+            <div class="demo-card-line w-3q"></div>
+            <div class="demo-card-line w-full"></div>
+            <div class="demo-card-line w-half"></div>
+          </div>
+          <div class="demo-card-footer">
+            <div class="hf-transition-text-state-swap">
+              <span class="from">Saving draft…</span><span class="to">Saved</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.to(
+          ".hf-transition-text-state-swap .from",
+          {
+            opacity: 0,
+            "--hf-text-y": "-18px",
+            "--hf-text-blur": "8px",
+            duration: 0.18,
+            ease: "power2.in",
+          },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-transition-text-state-swap .to",
+          { opacity: 0, "--hf-text-y": "18px", "--hf-text-blur": "8px" },
+          {
+            opacity: 1,
+            "--hf-text-y": "0px",
+            "--hf-text-blur": "0px",
+            duration: 0.26,
+            ease: "power2.out",
+          },
+          startTime + 0.12,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["text-state-swap-demo"] = tl;
+      </script>
+    </div>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "text-state-swap.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/text-state-swap/text-state-swap.html b/docs/public/catalog/components/text-state-swap/text-state-swap.html
new file mode 100644
index 0000000000..7bea605895
--- /dev/null
+++ b/docs/public/catalog/components/text-state-swap/text-state-swap.html
@@ -0,0 +1,113 @@
+<!--
+  Text State Swap - transitions.dev-inspired primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Use the timeline
+  integration note at the bottom as the starting point for deterministic GSAP
+  animation.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result into the markup or
+  into a custom property the CSS above consumes. The timeline recipe below is
+  untouched by them: it keeps driving one offset and one blur, and these decide
+  what that offset means on screen.
+
+    - from-text (string, default "Saving draft"): the outgoing label, on screen
+      before the swap. Blank falls back to the default.
+    - to-text (string, default "Saved"): the incoming label, on screen after the
+      swap. It rests at zero opacity, so it only shows once the timeline reveals
+      it. Blank falls back to the default.
+    - distance (close | standard | far, default standard): scales the vertical
+      offset the timeline drives, so the outgoing label leaves further and the
+      incoming label starts further below, in the same time. Both labels rest at
+      their settled position on every setting, so this only changes the middle
+      of the swap.
+    - tone (ink | paper | accent, default ink): label colour for both states.
+      ink is near-black for light frames, paper near-white for dark ones, accent
+      rides --brand.
+
+  On every default the result is identical to the original: near-black
+  "Saving draft" lifts 18px through an 8px blur while "Saved" rises into place.
+-->
+
+<div
+  class="hf-transition-text-state-swap"
+  data-composition-variables='[
+    {"id": "from-text", "type": "string", "role": "content", "label": "From text", "description": "The outgoing label, on screen before the swap.", "default": "Saving draft"},
+    {"id": "to-text", "type": "string", "role": "content", "label": "To text", "description": "The incoming label, on screen after the swap. It rests hidden until the timeline reveals it.", "default": "Saved"},
+    {"id": "distance", "type": "enum", "role": "motion", "label": "Distance", "description": "Scales the vertical offset the timeline drives, so each label covers a shorter or longer run in the same time.", "default": "standard", "options": [{"value": "close", "label": "Close"}, {"value": "standard", "label": "Standard"}, {"value": "far", "label": "Far"}]},
+    {"id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Label colour: ink for light frames, paper for dark ones, accent rides --brand.", "default": "ink", "options": [{"value": "ink", "label": "Ink"}, {"value": "paper", "label": "Paper"}, {"value": "accent", "label": "Accent"}]}
+  ]'
+>
+  <span class="from">Saving draft</span><span class="to">Saved</span>
+</div>
+
+<style>
+  .hf-transition-text-state-swap {
+    position: relative;
+    width: 250px;
+    height: 36px;
+    color: var(--hf-text-color, #18181b);
+    font:
+      900 28px/1 Inter,
+      system-ui,
+      sans-serif;
+  }
+  .hf-transition-text-state-swap span {
+    position: absolute;
+    left: 0;
+    top: 0;
+    filter: blur(var(--hf-text-blur, 0px));
+    transform: translateY(calc(var(--hf-text-y, 0px) * var(--hf-text-reach, 1)));
+    will-change: transform, filter, opacity;
+  }
+  .hf-transition-text-state-swap .to {
+    opacity: 0;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    var reaches = { close: 0.5, standard: 1, far: 1.85 };
+    var tones = {
+      ink: "#18181b",
+      paper: "#fafafa",
+      accent: "var(--brand, #34d399)",
+    };
+
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    function text(value, fallback) {
+      var resolved = value == null ? "" : String(value).trim();
+      return resolved.length > 0 ? resolved : fallback;
+    }
+
+    var fromText = text(vars["from-text"], "Saving draft");
+    var toText = text(vars["to-text"], "Saved");
+    var reach = reaches[pick(reaches, vars.distance, "standard")];
+    var tone = tones[pick(tones, vars.tone, "ink")];
+
+    var roots = document.querySelectorAll(".hf-transition-text-state-swap");
+    for (var i = 0; i < roots.length; i += 1) {
+      var root = roots[i];
+      root.style.setProperty("--hf-text-reach", String(reach));
+      root.style.setProperty("--hf-text-color", tone);
+      root.querySelector(".from").textContent = fromText;
+      root.querySelector(".to").textContent = toText;
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.to('.hf-transition-text-state-swap .from', { opacity: 0, '--hf-text-y': '-18px', '--hf-text-blur': '8px', duration: 0.18, ease: 'power2.in' }, startTime); tl.fromTo('.hf-transition-text-state-swap .to', { opacity: 0, '--hf-text-y': '18px', '--hf-text-blur': '8px' }, { opacity: 1, '--hf-text-y': '0px', '--hf-text-blur': '0px', duration: 0.26, ease: 'power2.out' }, startTime + 0.12);
+-->
diff --git a/docs/public/catalog/components/three-orbiting-cards/demo.html b/docs/public/catalog/components/three-orbiting-cards/demo.html
new file mode 100644
index 0000000000..54f9a8cd98
--- /dev/null
+++ b/docs/public/catalog/components/three-orbiting-cards/demo.html
@@ -0,0 +1,148 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Three Orbiting Cards - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-advanced-three-orbiting-cards {
+        color: #111827;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-advanced-three-orbiting-cards {
+        position: relative;
+        width: 760px;
+        height: 430px;
+        border-radius: 30px;
+        overflow: hidden;
+        background: #050816;
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+        /* ponytail: zoom scales the whole card without touching GSAP-animated state */
+        zoom: 1.65;
+      }
+      .hf-advanced-three-orbiting-cards canvas {
+        display: block;
+        width: 100%;
+        height: 100%;
+      }
+      .hf-advanced-three-orbiting-cards .label {
+        position: absolute;
+        left: 28px;
+        bottom: 26px;
+        color: #fff;
+      }
+      .hf-advanced-three-orbiting-cards h3 {
+        margin: 0;
+        font-size: 34px;
+        letter-spacing: -0.05em;
+      }
+      .hf-advanced-three-orbiting-cards p {
+        margin: 6px 0 0;
+        font-size: 15px;
+        color: rgba(255, 255, 255, 0.72);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="three-orbiting-cards-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="hf-advanced-three-orbiting-cards">
+        <canvas></canvas>
+        <div class="label">
+          <h3>Three Orbiting Cards</h3>
+          <p>
+            A Three.js-powered orbit scene driven by a paused GSAP timeline for deterministic
+            renders.
+          </p>
+        </div>
+      </div>
+    </div>
+    <script type="module">
+      import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.184.0/build/three.module.js";
+
+      const host = document.querySelector(".hf-advanced-three-orbiting-cards");
+      const canvas = host.querySelector("canvas");
+      const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });
+      renderer.setPixelRatio(1);
+      renderer.setSize(760, 430, false);
+      renderer.setClearColor(0x050816, 1);
+
+      const scene = new THREE.Scene();
+      const camera = new THREE.PerspectiveCamera(36, 760 / 430, 0.1, 100);
+      camera.position.set(0, 0, 7);
+
+      const group = new THREE.Group();
+      scene.add(group);
+      const material = new THREE.MeshStandardMaterial({
+        color: 0x60a5fa,
+        metalness: 0.18,
+        roughness: 0.38,
+      });
+      const accent = new THREE.MeshStandardMaterial({
+        color: 0xa78bfa,
+        metalness: 0.12,
+        roughness: 0.44,
+      });
+      const geometry = new THREE.BoxGeometry(1.2, 1.2, 0.08);
+      for (let i = 0; i < 9; i++) {
+        const mesh = new THREE.Mesh(geometry, i % 2 ? accent : material);
+        const angle = (i / 9) * Math.PI * 2;
+        const radius = 2.15;
+        mesh.position.set(
+          Math.cos(angle) * radius,
+          Math.sin(angle) * radius * 0.55,
+          Math.sin(angle) * 0.7,
+        );
+        mesh.rotation.z = angle;
+        group.add(mesh);
+      }
+      scene.add(new THREE.AmbientLight(0xffffff, 1.2));
+      const light = new THREE.DirectionalLight(0xffffff, 2.2);
+      light.position.set(2, 3, 4);
+      scene.add(light);
+
+      const state = { progress: 0 };
+      function render() {
+        const t = state.progress;
+        group.rotation.y = t * Math.PI * 2;
+        group.rotation.x = Math.sin(t * Math.PI * 2) * 0.22;
+        camera.position.z = 6.4 - Math.sin(t * Math.PI) * 0.55;
+        renderer.render(scene, camera);
+      }
+      render();
+
+      window.__hfThreeRender_three_orbiting_cards = { state, render };
+
+      const tl = window.gsap.timeline({ paused: true });
+      tl.to(state, { progress: 1, duration: 4, ease: "none", onUpdate: render }, 0.5);
+      tl.set({}, {}, 5);
+      window.__timelines = window.__timelines || {};
+      window.__timelines["three-orbiting-cards-demo"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/three-orbiting-cards/three-orbiting-cards.html b/docs/public/catalog/components/three-orbiting-cards/three-orbiting-cards.html
new file mode 100644
index 0000000000..6d0da4011b
--- /dev/null
+++ b/docs/public/catalog/components/three-orbiting-cards/three-orbiting-cards.html
@@ -0,0 +1,117 @@
+<!--
+  Three Orbiting Cards - advanced HyperFrames primitive.
+
+  This is intentionally seekable: drive it from a paused GSAP timeline.
+  MotionPath examples require GSAP MotionPathPlugin. Three.js examples expose
+  a render(progress) adapter instead of a free-running requestAnimationFrame loop.
+-->
+
+<div class="hf-advanced-three-orbiting-cards">
+  <canvas></canvas>
+  <div class="label">
+    <h3>Three Orbiting Cards</h3>
+    <p>
+      A Three.js-powered orbit scene driven by a paused GSAP timeline for deterministic renders.
+    </p>
+  </div>
+</div>
+
+<style>
+  .hf-advanced-three-orbiting-cards {
+    color: #111827;
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-advanced-three-orbiting-cards {
+    position: relative;
+    width: 760px;
+    height: 430px;
+    border-radius: 30px;
+    overflow: hidden;
+    background: #050816;
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+  }
+  .hf-advanced-three-orbiting-cards canvas {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+  .hf-advanced-three-orbiting-cards .label {
+    position: absolute;
+    left: 28px;
+    bottom: 26px;
+    color: #fff;
+  }
+  .hf-advanced-three-orbiting-cards h3 {
+    margin: 0;
+    font-size: 34px;
+    letter-spacing: -0.05em;
+  }
+  .hf-advanced-three-orbiting-cards p {
+    margin: 6px 0 0;
+    color: rgba(255, 255, 255, 0.62);
+  }
+</style>
+
+<!--
+  Timeline integration:
+  const startTime = 0;
+  if (window.__hfThreeRender_three_orbiting_cards) { tl.to(window.__hfThreeRender_three_orbiting_cards.state, { progress: 1, duration: 4, ease: 'none', onUpdate: window.__hfThreeRender_three_orbiting_cards.render }, startTime); }
+-->
+
+<!-- Optional Three.js adapter for demos. In production, copy this once and dispose renderer resources when the host composition is removed. -->
+<script type="module">
+  import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.184.0/build/three.module.js";
+
+  const host = document.querySelector(".hf-advanced-three-orbiting-cards");
+  const canvas = host.querySelector("canvas");
+  const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });
+  renderer.setPixelRatio(1);
+  renderer.setSize(760, 430, false);
+  renderer.setClearColor(0x050816, 1);
+
+  const scene = new THREE.Scene();
+  const camera = new THREE.PerspectiveCamera(36, 760 / 430, 0.1, 100);
+  camera.position.set(0, 0, 7);
+
+  const group = new THREE.Group();
+  scene.add(group);
+  const material = new THREE.MeshStandardMaterial({
+    color: 0x60a5fa,
+    metalness: 0.18,
+    roughness: 0.38,
+  });
+  const accent = new THREE.MeshStandardMaterial({
+    color: 0xa78bfa,
+    metalness: 0.12,
+    roughness: 0.44,
+  });
+  const geometry = new THREE.BoxGeometry(1.2, 1.2, 0.08);
+  for (let i = 0; i < 9; i++) {
+    const mesh = new THREE.Mesh(geometry, i % 2 ? accent : material);
+    const angle = (i / 9) * Math.PI * 2;
+    const radius = 2.15;
+    mesh.position.set(
+      Math.cos(angle) * radius,
+      Math.sin(angle) * radius * 0.55,
+      Math.sin(angle) * 0.7,
+    );
+    mesh.rotation.z = angle;
+    group.add(mesh);
+  }
+  scene.add(new THREE.AmbientLight(0xffffff, 1.2));
+  const light = new THREE.DirectionalLight(0xffffff, 2.2);
+  light.position.set(2, 3, 4);
+  scene.add(light);
+
+  const state = { progress: 0 };
+  function render() {
+    const t = state.progress;
+    group.rotation.y = t * Math.PI * 2;
+    group.rotation.x = Math.sin(t * Math.PI * 2) * 0.22;
+    camera.position.z = 6.4 - Math.sin(t * Math.PI) * 0.55;
+    renderer.render(scene, camera);
+  }
+  render();
+
+  window.__hfThreeRender_three_orbiting_cards = { state, render };
+</script>
diff --git a/docs/public/catalog/components/three-particle-ribbon/demo.html b/docs/public/catalog/components/three-particle-ribbon/demo.html
new file mode 100644
index 0000000000..2c200fb84f
--- /dev/null
+++ b/docs/public/catalog/components/three-particle-ribbon/demo.html
@@ -0,0 +1,148 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Three Particle Ribbon - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f4f4f5;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-advanced-three-particle-ribbon {
+        color: #111827;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-advanced-three-particle-ribbon {
+        position: relative;
+        width: 760px;
+        height: 430px;
+        border-radius: 20px;
+        overflow: hidden;
+        background: #050816;
+        box-shadow: 0 32px 96px rgba(15, 23, 42, 0.28);
+        /* ponytail: scale on wrapper only — GSAP animates Three.js state obj, not this DOM node */
+        transform: scale(1.72);
+      }
+      .hf-advanced-three-particle-ribbon canvas {
+        display: block;
+        width: 100%;
+        height: 100%;
+      }
+      .hf-advanced-three-particle-ribbon .label {
+        position: absolute;
+        left: 28px;
+        bottom: 26px;
+        color: #fff;
+      }
+      .hf-advanced-three-particle-ribbon h3 {
+        margin: 0;
+        font-size: 34px;
+        letter-spacing: -0.05em;
+      }
+      .hf-advanced-three-particle-ribbon p {
+        margin: 6px 0 0;
+        font-size: 15px;
+        color: rgba(255, 255, 255, 0.75);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="three-particle-ribbon-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="hf-advanced-three-particle-ribbon">
+        <canvas></canvas>
+        <div class="label">
+          <h3>Three Particle Ribbon</h3>
+          <p>
+            A lightweight Three.js point ribbon with timeline-controlled camera and shader-like
+            color drift.
+          </p>
+        </div>
+      </div>
+    </div>
+    <script type="module">
+      import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.184.0/build/three.module.js";
+
+      const host = document.querySelector(".hf-advanced-three-particle-ribbon");
+      const canvas = host.querySelector("canvas");
+      const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });
+      renderer.setPixelRatio(1);
+      renderer.setSize(760, 430, false);
+      renderer.setClearColor(0x050816, 1);
+
+      const scene = new THREE.Scene();
+      const camera = new THREE.PerspectiveCamera(36, 760 / 430, 0.1, 100);
+      camera.position.set(0, 0, 7);
+
+      const group = new THREE.Group();
+      scene.add(group);
+      const material = new THREE.MeshStandardMaterial({
+        color: 0x60a5fa,
+        metalness: 0.18,
+        roughness: 0.38,
+      });
+      const accent = new THREE.MeshStandardMaterial({
+        color: 0xa78bfa,
+        metalness: 0.12,
+        roughness: 0.44,
+      });
+      const geometry = new THREE.BoxGeometry(1.2, 1.2, 0.08);
+      for (let i = 0; i < 9; i++) {
+        const mesh = new THREE.Mesh(geometry, i % 2 ? accent : material);
+        const angle = (i / 9) * Math.PI * 2;
+        const radius = 2.1 + Math.sin(i) * 0.35;
+        mesh.position.set(
+          Math.cos(angle) * radius,
+          Math.sin(angle) * radius * 0.55,
+          Math.sin(angle) * 0.7,
+        );
+        mesh.rotation.z = angle;
+        group.add(mesh);
+      }
+      scene.add(new THREE.AmbientLight(0xffffff, 1.2));
+      const light = new THREE.DirectionalLight(0xffffff, 2.2);
+      light.position.set(2, 3, 4);
+      scene.add(light);
+
+      const state = { progress: 0 };
+      function render() {
+        const t = state.progress;
+        group.rotation.y = t * Math.PI * 2;
+        group.rotation.x = Math.sin(t * Math.PI * 2) * 0.22;
+        camera.position.z = 6.4 - Math.sin(t * Math.PI) * 0.55;
+        renderer.render(scene, camera);
+      }
+      render();
+
+      window.__hfThreeRender_three_particle_ribbon = { state, render };
+
+      const tl = window.gsap.timeline({ paused: true });
+      tl.to(state, { progress: 1, duration: 4, ease: "none", onUpdate: render }, 0.5);
+      tl.set({}, {}, 5);
+      window.__timelines = window.__timelines || {};
+      window.__timelines["three-particle-ribbon-demo"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/three-particle-ribbon/three-particle-ribbon.html b/docs/public/catalog/components/three-particle-ribbon/three-particle-ribbon.html
new file mode 100644
index 0000000000..036cc87184
--- /dev/null
+++ b/docs/public/catalog/components/three-particle-ribbon/three-particle-ribbon.html
@@ -0,0 +1,118 @@
+<!--
+  Three Particle Ribbon - advanced HyperFrames primitive.
+
+  This is intentionally seekable: drive it from a paused GSAP timeline.
+  MotionPath examples require GSAP MotionPathPlugin. Three.js examples expose
+  a render(progress) adapter instead of a free-running requestAnimationFrame loop.
+-->
+
+<div class="hf-advanced-three-particle-ribbon">
+  <canvas></canvas>
+  <div class="label">
+    <h3>Three Particle Ribbon</h3>
+    <p>
+      A lightweight Three.js point ribbon with timeline-controlled camera and shader-like color
+      drift.
+    </p>
+  </div>
+</div>
+
+<style>
+  .hf-advanced-three-particle-ribbon {
+    color: #111827;
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-advanced-three-particle-ribbon {
+    position: relative;
+    width: 760px;
+    height: 430px;
+    border-radius: 30px;
+    overflow: hidden;
+    background: #050816;
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+  }
+  .hf-advanced-three-particle-ribbon canvas {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+  .hf-advanced-three-particle-ribbon .label {
+    position: absolute;
+    left: 28px;
+    bottom: 26px;
+    color: #fff;
+  }
+  .hf-advanced-three-particle-ribbon h3 {
+    margin: 0;
+    font-size: 34px;
+    letter-spacing: -0.05em;
+  }
+  .hf-advanced-three-particle-ribbon p {
+    margin: 6px 0 0;
+    color: rgba(255, 255, 255, 0.62);
+  }
+</style>
+
+<!--
+  Timeline integration:
+  const startTime = 0;
+  if (window.__hfThreeRender_three_particle_ribbon) { tl.to(window.__hfThreeRender_three_particle_ribbon.state, { progress: 1, duration: 4, ease: 'none', onUpdate: window.__hfThreeRender_three_particle_ribbon.render }, startTime); }
+-->
+
+<!-- Optional Three.js adapter for demos. In production, copy this once and dispose renderer resources when the host composition is removed. -->
+<script type="module">
+  import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.184.0/build/three.module.js";
+
+  const host = document.querySelector(".hf-advanced-three-particle-ribbon");
+  const canvas = host.querySelector("canvas");
+  const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });
+  renderer.setPixelRatio(1);
+  renderer.setSize(760, 430, false);
+  renderer.setClearColor(0x050816, 1);
+
+  const scene = new THREE.Scene();
+  const camera = new THREE.PerspectiveCamera(36, 760 / 430, 0.1, 100);
+  camera.position.set(0, 0, 7);
+
+  const group = new THREE.Group();
+  scene.add(group);
+  const material = new THREE.MeshStandardMaterial({
+    color: 0x60a5fa,
+    metalness: 0.18,
+    roughness: 0.38,
+  });
+  const accent = new THREE.MeshStandardMaterial({
+    color: 0xa78bfa,
+    metalness: 0.12,
+    roughness: 0.44,
+  });
+  const geometry = new THREE.BoxGeometry(1.2, 1.2, 0.08);
+  for (let i = 0; i < 9; i++) {
+    const mesh = new THREE.Mesh(geometry, i % 2 ? accent : material);
+    const angle = (i / 9) * Math.PI * 2;
+    const radius = 2.1 + Math.sin(i) * 0.35;
+    mesh.position.set(
+      Math.cos(angle) * radius,
+      Math.sin(angle) * radius * 0.55,
+      Math.sin(angle) * 0.7,
+    );
+    mesh.rotation.z = angle;
+    group.add(mesh);
+  }
+  scene.add(new THREE.AmbientLight(0xffffff, 1.2));
+  const light = new THREE.DirectionalLight(0xffffff, 2.2);
+  light.position.set(2, 3, 4);
+  scene.add(light);
+
+  const state = { progress: 0 };
+  function render() {
+    const t = state.progress;
+    group.rotation.y = t * Math.PI * 2;
+    group.rotation.x = Math.sin(t * Math.PI * 2) * 0.22;
+    camera.position.z = 6.4 - Math.sin(t * Math.PI) * 0.55;
+    renderer.render(scene, camera);
+  }
+  render();
+
+  window.__hfThreeRender_three_particle_ribbon = { state, render };
+</script>
diff --git a/docs/public/catalog/components/ticker-takeover/demo.html b/docs/public/catalog/components/ticker-takeover/demo.html
new file mode 100644
index 0000000000..e2cd7ad97a
--- /dev/null
+++ b/docs/public/catalog/components/ticker-takeover/demo.html
@@ -0,0 +1,101 @@
+<!doctype html>
+<!--
+  ticker-takeover demo. This standalone composition mounts the primitive in
+  a sized host and supplies non-default options, final word, and accent.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Ticker Takeover Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0b0c0e;
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --muted: #94a3b8;
+        --surface: #17191f;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-body: Inter, system-ui, sans-serif;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 45%, #171a21 0%, #0b0c0e 72%);
+      }
+
+      .mount-card {
+        width: 70%;
+        height: 64%;
+        left: 15%;
+        top: 18%;
+        container-type: size;
+        overflow: hidden;
+        border: 1px solid rgba(148, 163, 184, 0.18);
+        border-radius: 32px;
+        background: rgba(17, 19, 24, 0.82);
+        box-shadow: 0 48px 120px rgba(0, 0, 0, 0.45);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="ticker-takeover-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4.5"
+      data-fps="30"
+    >
+      <div
+        id="ticker-takeover-mount"
+        class="mount-card clip"
+        data-composition-id="ticker-takeover"
+        data-composition-src="./ticker-takeover.html"
+        data-variable-values='{"options":"build,shape,launch,repeat,scale","final_word":"launch","accent":"violet"}'
+        data-start="0"
+        data-duration="4.5"
+        data-track-index="0"
+        data-width="1344"
+        data-height="691"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["ticker-takeover-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "ticker-takeover.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/ticker-takeover/ticker-takeover.html b/docs/public/catalog/components/ticker-takeover/ticker-takeover.html
new file mode 100644
index 0000000000..d9c171abdd
--- /dev/null
+++ b/docs/public/catalog/components/ticker-takeover/ticker-takeover.html
@@ -0,0 +1,321 @@
+<!doctype html>
+<!--
+  ticker-takeover: a compact ticker rolls through four to six words, locks
+  on the selected word with an accent flash, then promotes that word into
+  a full-frame headline.
+
+  Variables:
+    - options: comma-separated words shown by the ticker.
+    - final_word: the word placed last and promoted.
+    - accent: green, blue, or violet lock color.
+
+  Envelope (fixed IN and OUT, elastic HOLD only):
+    IN_BASE  = 3.15s. Ticker entrance, accelerating roll, decelerating lock,
+               accent flash, and headline promotion.
+    HOLD     = max(0, D - IN - OUT). The promoted word drifts subtly.
+    OUT_BASE = 0.45s. The promoted word fades and rises.
+    If D is shorter than IN_BASE + OUT_BASE, IN and OUT compress together.
+
+  Mount contract: all rendered content lives inside the template. The root
+  fills its host without fixed dimensions, and one paused timeline registers
+  under the hardcoded ticker-takeover key.
+-->
+<html
+  lang="en"
+  data-composition-id="ticker-takeover"
+  data-composition-duration="4.5"
+  data-composition-variables='[
+    { "id": "options", "type": "string", "role": "content", "label": "Options", "description": "Comma-separated words shown by the ticker.", "default": "faster,smarter,together,everywhere" },
+    { "id": "final_word", "type": "string", "role": "content", "label": "Final word", "description": "Word the ticker locks on and promotes.", "default": "together" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Color used for the lock flash and promoted word.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Ticker Takeover</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="ticker-takeover" data-duration="4.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .tt-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+          }
+
+          .tt-ticker {
+            position: absolute;
+            top: 55cqh;
+            left: 12cqw;
+            width: 76cqw;
+            height: 18cqh;
+            display: grid;
+            grid-template-columns: 18cqw 1fr;
+            align-items: center;
+            overflow: hidden;
+            border: 0.12cqw solid color-mix(in srgb, var(--muted, #94a3b8) 38%, transparent);
+            border-radius: 3cqh;
+            background: color-mix(in srgb, var(--surface, #172033) 92%, transparent);
+            box-shadow: 0 3cqh 9cqh color-mix(in srgb, var(--bg, #0b0c0e) 52%, transparent);
+            will-change: transform, opacity;
+          }
+
+          .tt-label {
+            display: grid;
+            place-items: center;
+            height: 12cqh;
+            border-right: 0.12cqw solid color-mix(in srgb, var(--muted, #94a3b8) 30%, transparent);
+            color: var(--muted, #94a3b8);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            font-size: 2.4cqh;
+            font-weight: 700;
+            letter-spacing: 0.18em;
+            text-transform: uppercase;
+          }
+
+          .tt-window {
+            position: relative;
+            height: 12cqh;
+            overflow: hidden;
+          }
+
+          .tt-reel {
+            width: 100%;
+            will-change: transform;
+          }
+
+          .tt-item {
+            display: flex;
+            align-items: center;
+            height: 12cqh;
+            padding: 0 4cqw;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            font-size: 4.2cqh;
+            font-weight: 650;
+            letter-spacing: -0.025em;
+            white-space: nowrap;
+            will-change: transform, color;
+          }
+
+          .tt-flash {
+            position: absolute;
+            inset: 0;
+            background: var(--tt-accent, #22c55e);
+            opacity: 0;
+          }
+
+          .tt-headline {
+            position: absolute;
+            top: 30cqh;
+            left: 7cqw;
+            width: 86cqw;
+            height: 30cqh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            overflow: hidden;
+            color: var(--tt-accent, #22c55e);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: 15cqh;
+            font-weight: 820;
+            line-height: 0.9;
+            letter-spacing: -0.065em;
+            text-align: center;
+            white-space: nowrap;
+            transform-origin: 50% 50%;
+            will-change: transform, opacity;
+          }
+        </style>
+
+        <div
+          id="ticker-takeover-clip"
+          class="tt-clip clip"
+          data-start="0"
+          data-duration="4.5"
+          data-track-index="0"
+        >
+          <div class="tt-ticker">
+            <div class="tt-label">signal</div>
+            <div class="tt-window">
+              <div class="tt-reel"></div>
+            </div>
+            <div class="tt-flash" aria-hidden="true"></div>
+          </div>
+          <div class="tt-headline"></div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var ticker = root.querySelector(".tt-ticker");
+            var reel = root.querySelector(".tt-reel");
+            var flash = root.querySelector(".tt-flash");
+            var headline = root.querySelector(".tt-headline");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var defaultOptions = ["faster", "smarter", "together", "everywhere"];
+            var finalWord = vars.final_word == null ? "together" : String(vars.final_word).trim();
+            if (!finalWord) finalWord = "together";
+
+            var rawOptions = vars.options == null ? defaultOptions.join(",") : String(vars.options);
+            var candidates = rawOptions
+              .split(",")
+              .map(function (word) {
+                return word.trim();
+              })
+              .filter(Boolean);
+            var options = [];
+            var finalKey = finalWord.toLowerCase();
+
+            function addOption(word) {
+              var normalized = word.toLowerCase();
+              var isFinal = normalized === finalKey;
+              var isDuplicate = options.some(function (option) {
+                return option.toLowerCase() === normalized;
+              });
+              if (!isFinal && !isDuplicate && options.length < 5) options.push(word);
+            }
+
+            candidates.forEach(addOption);
+            defaultOptions.forEach(function (word) {
+              if (options.length < 3) addOption(word);
+            });
+            options.push(finalWord);
+
+            options.forEach(function (word) {
+              var item = document.createElement("span");
+              item.className = "tt-item";
+              item.textContent = word;
+              reel.appendChild(item);
+            });
+
+            var finalItem = reel.lastElementChild;
+            var accentColors = {
+              green: "var(--brand, #22c55e)",
+              blue: "var(--accent, #38bdf8)",
+              violet: "var(--accent-2, #a78bfa)",
+            };
+            var accentName = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var accentColor = accentColors[accentName];
+
+            root.style.setProperty("--tt-accent", accentColor);
+            headline.textContent = finalWord;
+
+            var IN_BASE = 3.15;
+            var OUT_BASE = 0.45;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4.5"));
+            var envelopeScale = duration < IN_BASE + OUT_BASE ? duration / (IN_BASE + OUT_BASE) : 1;
+            var IN = IN_BASE * envelopeScale;
+            var OUT = OUT_BASE * envelopeScale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var OUT_START = IN + HOLD;
+
+            var TICKER_IN = 0.35 * envelopeScale;
+            var ROLL_START = 0.32 * envelopeScale;
+            var ACCEL_DURATION = 0.82 * envelopeScale;
+            var DECEL_DURATION = 0.93 * envelopeScale;
+            var LOCK_AT = ROLL_START + ACCEL_DURATION + DECEL_DURATION;
+            var PROMOTE_AT = LOCK_AT + 0.18 * envelopeScale;
+            var PROMOTE_DURATION = Math.max(0.001, IN - PROMOTE_AT);
+            var finalOffset = -(options.length - 1) * 12;
+            var accelOffset = finalOffset * 0.72;
+
+            var tl = gsap.timeline({ paused: true });
+
+            tl.fromTo(
+              ticker,
+              { opacity: 0, scale: 0.97 },
+              { opacity: 1, scale: 1, duration: TICKER_IN, ease: "power2.out" },
+              0,
+            );
+            tl.fromTo(
+              reel,
+              { y: "0cqh" },
+              { y: accelOffset + "cqh", duration: ACCEL_DURATION, ease: "power4.in" },
+              ROLL_START,
+            );
+            tl.to(
+              reel,
+              { y: finalOffset + "cqh", duration: DECEL_DURATION, ease: "power4.out" },
+              ROLL_START + ACCEL_DURATION,
+            );
+            tl.fromTo(
+              finalItem,
+              { scale: 1.14, color: accentColor },
+              { scale: 1, color: accentColor, duration: 0.3 * envelopeScale, ease: "expo.out" },
+              LOCK_AT,
+            );
+            tl.fromTo(
+              flash,
+              { opacity: 0.82 },
+              { opacity: 0, duration: 0.34 * envelopeScale, ease: "power2.out" },
+              LOCK_AT,
+            );
+            tl.fromTo(
+              headline,
+              { opacity: 0, scale: 0.22, y: "20cqh" },
+              {
+                opacity: 1,
+                scale: 1,
+                y: "0cqh",
+                duration: PROMOTE_DURATION,
+                ease: "power3.out",
+              },
+              PROMOTE_AT,
+            );
+            tl.to(
+              ticker,
+              { opacity: 0, scale: 0.96, duration: PROMOTE_DURATION * 0.68, ease: "power2.in" },
+              PROMOTE_AT,
+            );
+
+            if (HOLD > 0) {
+              tl.to(
+                headline,
+                { y: "-0.7cqh", duration: HOLD / 2, ease: "sine.inOut", yoyo: true, repeat: 1 },
+                IN,
+              );
+            }
+
+            tl.to(
+              headline,
+              { opacity: 0, y: "-3cqh", duration: OUT, ease: "power2.in" },
+              OUT_START,
+            );
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["ticker-takeover"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/tilt-card/__hf-variables-preview.html b/docs/public/catalog/components/tilt-card/__hf-variables-preview.html
new file mode 100644
index 0000000000..569c0f0238
--- /dev/null
+++ b/docs/public/catalog/components/tilt-card/__hf-variables-preview.html
@@ -0,0 +1,79 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Tilt Card variables preview</title>
+    <style>
+      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #eef2ff; }
+      #hf-vars-root { position: relative; width: 1920px; height: 1080px; }
+      #hf-vars-mount { position: absolute; inset: 0; display: grid; place-items: center; }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  </head>
+  <body>
+    <div id="hf-vars-root" data-composition-id="tilt-card-variables-preview" data-start="0" data-width="1920" data-height="1080" data-duration="5" data-fps="30">
+      <div id="hf-vars-mount" class="clip" data-composition-id="tilt-card" data-composition-src="./tilt-card.html" data-start="0" data-duration="5" data-track-index="0" data-width="1920" data-height="1080"></div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["tilt-card-variables-preview"] = gsap.timeline({ paused: true });
+    </script>
+    <script>
+      (function () {
+        var mount = document.getElementById("hf-vars-mount");
+        // The mount is filled asynchronously, and the demo script selects
+        // what it fills it with, so it cannot run before then.
+        var observer = new MutationObserver(build);
+        observer.observe(mount, { childList: true, subtree: true });
+        build();
+        function build() {
+          if (!mount.firstElementChild) return;
+          observer.disconnect();
+
+        const tl = gsap.timeline({ paused: true });
+        tl.fromTo(
+          ".hf-transition-tilt-card",
+          { opacity: 0, y: 30, rotateX: 0, rotateY: 0 },
+          { opacity: 1, y: 0, duration: 0.38, ease: "power2.out" },
+          0.3,
+        );
+        tl.to(
+          ".hf-transition-tilt-card",
+          { rotateX: -7, rotateY: 10, duration: 0.72, ease: "power3.inOut" },
+          0.75,
+        );
+        tl.to(
+          ".hf-transition-tilt-glow",
+          { xPercent: 12, yPercent: 10, duration: 0.72, ease: "power3.inOut" },
+          0.75,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["tilt-card-demo"] = tl;
+          var child = window.__timelines["tilt-card-demo"];
+          delete window.__timelines["tilt-card-demo"];
+          if (!child || typeof child.paused !== "function") return;
+          child.paused(false);
+          window.__timelines["tilt-card-variables-preview"].add(child, 0);
+        }
+      })();
+    </script>
+<script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "tilt-card.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/tilt-card/demo.html b/docs/public/catalog/components/tilt-card/demo.html
new file mode 100644
index 0000000000..4de6f43bd7
--- /dev/null
+++ b/docs/public/catalog/components/tilt-card/demo.html
@@ -0,0 +1,134 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Tilt Card - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #eef2ff;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        min-width: 760px;
+        min-height: 480px;
+        padding: 56px;
+        transform: scale(2.5); /* ponytail: card was ~16% of frame; 2.5× brings it to ~60% */
+      }
+      .hf-transition-tilt-card {
+        position: relative;
+        width: 420px;
+        height: 260px;
+        overflow: hidden;
+        border: 1px solid rgba(255, 255, 255, 0.18);
+        border-radius: 30px;
+        background: linear-gradient(135deg, #18181b, #312e81);
+        color: #ffffff;
+        font-family: Inter, system-ui, sans-serif;
+        transform-style: preserve-3d;
+        box-shadow: 0 32px 90px rgba(49, 46, 129, 0.34);
+      }
+      .hf-transition-tilt-glow {
+        position: absolute;
+        inset: -30%;
+        background: radial-gradient(circle at 30% 20%, rgba(125, 211, 252, 0.5), transparent 36%);
+      }
+      .hf-transition-tilt-content {
+        position: relative;
+        display: grid;
+        align-content: end;
+        gap: 10px;
+        height: 100%;
+        padding: 34px;
+        transform: translateZ(38px);
+      }
+      .hf-transition-tilt-content span {
+        color: #a5b4fc;
+        font-size: 13px;
+        font-weight: 900;
+        letter-spacing: 0.12em;
+        text-transform: uppercase;
+      }
+      .hf-transition-tilt-content strong {
+        max-width: 280px;
+        font-size: 34px;
+        line-height: 0.96;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="tilt-card-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-transition-tilt-card">
+          <div class="hf-transition-tilt-glow"></div>
+          <div class="hf-transition-tilt-content">
+            <span>Primitive</span>
+            <strong>Agent-ready motion</strong>
+          </div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        tl.fromTo(
+          ".hf-transition-tilt-card",
+          { opacity: 0, y: 30, rotateX: 0, rotateY: 0 },
+          { opacity: 1, y: 0, duration: 0.38, ease: "power2.out" },
+          0.3,
+        );
+        tl.to(
+          ".hf-transition-tilt-card",
+          { rotateX: -7, rotateY: 10, duration: 0.72, ease: "power3.inOut" },
+          0.75,
+        );
+        tl.to(
+          ".hf-transition-tilt-glow",
+          { xPercent: 12, yPercent: 10, duration: 0.72, ease: "power3.inOut" },
+          0.75,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["tilt-card-demo"] = tl;
+      </script>
+    </div>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "tilt-card.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/tilt-card/tilt-card.html b/docs/public/catalog/components/tilt-card/tilt-card.html
new file mode 100644
index 0000000000..8308889572
--- /dev/null
+++ b/docs/public/catalog/components/tilt-card/tilt-card.html
@@ -0,0 +1,156 @@
+<!--
+  Tilt Card - transitions.dev-inspired primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Use the timeline
+  integration note at the bottom as the starting point for deterministic GSAP
+  animation.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result into the markup or
+  into a custom property the CSS above consumes. The timeline recipe below is
+  untouched by them: it keeps driving the same rise and the same tilt angles.
+
+    - eyebrow (string, default "Primitive"): the small uppercase kicker above
+      the headline. Blank falls back to the default.
+    - headline (string, default "Agent-ready motion"): the large card
+      headline. Blank falls back to the default.
+    - glow (tight | standard | wide, default standard): how far the corner
+      glow reaches past the card edges. A wider glow spreads more light at
+      rest, and because the timeline drifts it by a percentage of its own box,
+      a wider glow also carries that drift further across the card.
+    - accent (indigo | emerald | violet, default indigo): the colour family of
+      the card, covering the gradient, the corner glow, the eyebrow and the
+      drop shadow together.
+
+  On every default the result is identical to the original: an indigo card with
+  a sky-blue corner glow reaching 30% past every edge.
+-->
+
+<div
+  class="hf-transition-tilt-card"
+  data-composition-variables='[
+    {"id": "eyebrow", "type": "string", "role": "content", "label": "Eyebrow", "description": "Small uppercase kicker above the headline.", "default": "Primitive"},
+    {"id": "headline", "type": "string", "role": "content", "label": "Headline", "description": "Large card headline.", "default": "Agent-ready motion"},
+    {"id": "glow", "type": "enum", "role": "motion", "label": "Glow", "description": "How far the corner glow reaches past the card edges, which sets both its spread at rest and how far the timeline drift carries it.", "default": "standard", "options": [{"value": "tight", "label": "Tight"}, {"value": "standard", "label": "Standard"}, {"value": "wide", "label": "Wide"}]},
+    {"id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Colour family of the card gradient, corner glow, eyebrow and drop shadow.", "default": "indigo", "options": [{"value": "indigo", "label": "Indigo"}, {"value": "emerald", "label": "Emerald"}, {"value": "violet", "label": "Violet"}]}
+  ]'
+>
+  <div class="hf-transition-tilt-glow"></div>
+  <div class="hf-transition-tilt-content">
+    <span>Primitive</span>
+    <strong>Agent-ready motion</strong>
+  </div>
+</div>
+
+<style>
+  .hf-transition-tilt-card {
+    position: relative;
+    width: 420px;
+    height: 260px;
+    overflow: hidden;
+    border: 1px solid rgba(255, 255, 255, 0.18);
+    border-radius: 30px;
+    background: linear-gradient(135deg, #18181b, var(--hf-tilt-accent, #312e81));
+    color: #ffffff;
+    font-family: Inter, system-ui, sans-serif;
+    transform-style: preserve-3d;
+    box-shadow: 0 32px 90px var(--hf-tilt-shadow, rgba(49, 46, 129, 0.34));
+  }
+  .hf-transition-tilt-glow {
+    position: absolute;
+    inset: var(--hf-tilt-glow-inset, -30%);
+    background: radial-gradient(
+      circle at 30% 20%,
+      var(--hf-tilt-glow, rgba(125, 211, 252, 0.5)),
+      transparent 36%
+    );
+  }
+  .hf-transition-tilt-content {
+    position: relative;
+    display: grid;
+    align-content: end;
+    gap: 10px;
+    height: 100%;
+    padding: 34px;
+    transform: translateZ(38px);
+  }
+  .hf-transition-tilt-content span {
+    color: var(--hf-tilt-label, #a5b4fc);
+    font-size: 13px;
+    font-weight: 900;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+  }
+  .hf-transition-tilt-content strong {
+    max-width: 280px;
+    font-size: 34px;
+    line-height: 0.96;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    var insets = { tight: "-18%", standard: "-30%", wide: "-46%" };
+    var accents = {
+      indigo: {
+        accent: "#312e81",
+        glow: "rgba(125, 211, 252, 0.5)",
+        label: "#a5b4fc",
+        shadow: "rgba(49, 46, 129, 0.34)",
+      },
+      emerald: {
+        accent: "#065f46",
+        glow: "rgba(110, 231, 183, 0.5)",
+        label: "#6ee7b7",
+        shadow: "rgba(6, 95, 70, 0.34)",
+      },
+      violet: {
+        accent: "#5b21b6",
+        glow: "rgba(216, 180, 254, 0.5)",
+        label: "#d8b4fe",
+        shadow: "rgba(91, 33, 182, 0.34)",
+      },
+    };
+
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    function text(value, fallback) {
+      var resolved = value == null ? "" : String(value).trim();
+      return resolved.length > 0 ? resolved : fallback;
+    }
+
+    var eyebrow = text(vars.eyebrow, "Primitive");
+    var headline = text(vars.headline, "Agent-ready motion");
+    var inset = insets[pick(insets, vars.glow, "standard")];
+    var accent = accents[pick(accents, vars.accent, "indigo")];
+
+    var roots = document.querySelectorAll(".hf-transition-tilt-card");
+    for (var i = 0; i < roots.length; i += 1) {
+      var root = roots[i];
+      root.style.setProperty("--hf-tilt-glow-inset", inset);
+      root.style.setProperty("--hf-tilt-accent", accent.accent);
+      root.style.setProperty("--hf-tilt-glow", accent.glow);
+      root.style.setProperty("--hf-tilt-label", accent.label);
+      root.style.setProperty("--hf-tilt-shadow", accent.shadow);
+      root.querySelector(".hf-transition-tilt-content span").textContent = eyebrow;
+      root.querySelector(".hf-transition-tilt-content strong").textContent = headline;
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-transition-tilt-card', { opacity: 0, y: 30, rotateX: 0, rotateY: 0 }, { opacity: 1, y: 0, duration: 0.38, ease: 'power2.out' }, 0.3);
+  tl.to('.hf-transition-tilt-card', { rotateX: -7, rotateY: 10, duration: 0.72, ease: 'power3.inOut' }, 0.75);
+  tl.to('.hf-transition-tilt-glow', { xPercent: 12, yPercent: 10, duration: 0.72, ease: 'power3.inOut' }, 0.75);
+-->
diff --git a/docs/public/catalog/components/titlecard-calm/demo.html b/docs/public/catalog/components/titlecard-calm/demo.html
new file mode 100644
index 0000000000..7214de053d
--- /dev/null
+++ b/docs/public/catalog/components/titlecard-calm/demo.html
@@ -0,0 +1,103 @@
+<!doctype html>
+<!--
+  titlecard-calm demo. This standalone composition mounts titlecard-calm.html
+  through data-composition-src. Non-default copy proves that both variables
+  flow through the mount while the primitive remains sized by its host box.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Titlecard Calm Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0b0c0e;
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f7f7f2;
+        --muted: #aeb6c2;
+        --surface: #111318;
+        --border: #292d35;
+        --font-display: "Helvetica Neue", Helvetica, Arial, sans-serif;
+        --font-body: Inter, system-ui, sans-serif;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(circle at 50% 45%, #12151a 0%, var(--bg) 72%);
+      }
+
+      .mount-card {
+        width: 78%;
+        height: 62%;
+        left: 11%;
+        top: 19%;
+        container-type: size;
+        overflow: hidden;
+        border: 1px solid rgba(247, 247, 242, 0.08);
+        border-radius: 28px;
+        background: var(--surface);
+        box-shadow: 0 36px 90px rgba(0, 0, 0, 0.32);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="titlecard-calm-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="titlecard-calm-mount"
+        class="mount-card clip"
+        data-composition-id="titlecard-calm"
+        data-composition-src="./titlecard-calm.html"
+        data-variable-values='{"headline":"Clarity over noise","kicker":"QUIET CONFIDENCE"}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="1498"
+        data-height="670"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["titlecard-calm-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "titlecard-calm.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/titlecard-calm/titlecard-calm.html b/docs/public/catalog/components/titlecard-calm/titlecard-calm.html
new file mode 100644
index 0000000000..5048bdc880
--- /dev/null
+++ b/docs/public/catalog/components/titlecard-calm/titlecard-calm.html
@@ -0,0 +1,188 @@
+<!doctype html>
+<!--
+  titlecard-calm: HyperFrames video primitive (typography / calm / orient)
+
+  Concept: a restrained title card led by a small mono kicker and a large
+  grotesque headline. The kicker fades and rises first, then the headline
+  follows. Typography and negative space carry the frame.
+
+  Variables:
+    - headline (string, default "Less, but better"): the primary title.
+    - kicker (string, default "DESIGN PRINCIPLE"): the small uppercase label.
+
+  Envelope: fixed IN and OUT with an elastic HOLD only.
+    IN_BASE  = 1.20s. Kicker arrives first, headline follows.
+    HOLD     = max(0, D - IN - OUT). The lockup drifts barely upward.
+    OUT_BASE = 0.55s. The full lockup fades with a small rise.
+  If D is shorter than IN_BASE + OUT_BASE, IN and OUT compress together.
+  Longer mounts stretch HOLD only. The timeline is never time-scaled.
+
+  Mount contract: the runtime clones only this template. #root fills the
+  host box, establishes the container query basis, has no data-width or
+  data-height, and registers one paused timeline under the hardcoded
+  titlecard-calm id.
+-->
+<html
+  lang="en"
+  data-composition-id="titlecard-calm"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "headline", "type": "string", "role": "content", "label": "Headline", "description": "Primary title displayed in the card.", "default": "Less, but better" },
+    { "id": "kicker", "type": "string", "role": "content", "label": "Kicker", "description": "Small uppercase label displayed above the headline.", "default": "DESIGN PRINCIPLE" }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Titlecard Calm</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="titlecard-calm" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f7f7f2);
+            font-family: var(--font-display, "Helvetica Neue", Helvetica, Arial, sans-serif);
+            pointer-events: none;
+          }
+
+          .tc-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+          }
+
+          .tc-lockup {
+            display: flex;
+            width: 78cqw;
+            flex-direction: column;
+            align-items: flex-start;
+            gap: 6cqh;
+            transform-origin: 50% 50%;
+            will-change: transform, opacity;
+          }
+
+          .tc-kicker {
+            display: block;
+            width: 100%;
+            color: var(--muted, #b8c0cc);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            font-size: 3.2cqmin;
+            font-weight: 600;
+            line-height: 1;
+            letter-spacing: 0.18em;
+            text-transform: uppercase;
+            will-change: transform, opacity;
+          }
+
+          .tc-headline {
+            display: block;
+            width: 100%;
+            color: var(--fg, #f7f7f2);
+            font-family: var(--font-display, "Helvetica Neue", Helvetica, Arial, sans-serif);
+            font-size: 17cqmin;
+            font-weight: 600;
+            line-height: 0.94;
+            letter-spacing: -0.055em;
+            overflow-wrap: anywhere;
+            text-wrap: balance;
+            will-change: transform, opacity;
+          }
+        </style>
+
+        <div
+          id="titlecard-calm-clip"
+          class="tc-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="tc-lockup">
+            <span class="tc-kicker"></span>
+            <span class="tc-headline"></span>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var lockup = root.querySelector(".tc-lockup");
+            var kicker = root.querySelector(".tc-kicker");
+            var headline = root.querySelector(".tc-headline");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var headlineText = vars.headline == null ? "Less, but better" : String(vars.headline);
+            var kickerText = vars.kicker == null ? "DESIGN PRINCIPLE" : String(vars.kicker);
+
+            headline.textContent = headlineText;
+            kicker.textContent = kickerText;
+
+            var IN_BASE = 1.2;
+            var OUT_BASE = 0.55;
+            var parsedDuration = Number.parseFloat(root.dataset.duration);
+            var duration = Number.isFinite(parsedDuration) ? Math.max(0.001, parsedDuration) : 4;
+            var totalBase = IN_BASE + OUT_BASE;
+            var phaseScale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * phaseScale;
+            var OUT = OUT_BASE * phaseScale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var HOLD_START = IN;
+            var OUT_START = IN + HOLD;
+            var KICKER_IN = 0.5 * phaseScale;
+            var HEADLINE_AT = 0.28 * phaseScale;
+            var HEADLINE_IN = 0.72 * phaseScale;
+
+            gsap.set(lockup, { opacity: 1, y: "0cqh" });
+
+            var tl = gsap.timeline({ paused: true });
+
+            tl.fromTo(
+              kicker,
+              { opacity: 0, y: "2.2cqh" },
+              { opacity: 1, y: "0cqh", duration: KICKER_IN, ease: "power2.out" },
+              0,
+            );
+            tl.fromTo(
+              headline,
+              { opacity: 0, y: "3.2cqh" },
+              { opacity: 1, y: "0cqh", duration: HEADLINE_IN, ease: "power3.out" },
+              HEADLINE_AT,
+            );
+
+            if (HOLD > 0) {
+              tl.to(lockup, { y: "-0.65cqh", duration: HOLD, ease: "sine.inOut" }, HOLD_START);
+            }
+
+            tl.to(
+              lockup,
+              { opacity: 0, y: "-2.1cqh", duration: OUT, ease: "power2.in" },
+              OUT_START,
+            );
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["titlecard-calm"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/titlecard-lockup/README.md b/docs/public/catalog/components/titlecard-lockup/README.md
new file mode 100644
index 0000000000..ea1d92425a
--- /dev/null
+++ b/docs/public/catalog/components/titlecard-lockup/README.md
@@ -0,0 +1,48 @@
+# titlecard-lockup
+
+The calm breather titlecard (intros and reveals). An optional mono kicker fades up, the wordmark settles dead-center with ONE restrained move (scale 0.96 to 1, smooth ease-out), a hairline rule draws left to right beneath it, a mono label fades in under the rule, then the finished lockup holds truly still. Low motion is the payload: no second development phase, no spring chains, no hold drift. The stillness is the confidence.
+
+## Install
+
+```bash
+npx hyperframes add titlecard-lockup
+```
+
+## Mount
+
+```html
+<div
+  class="clip"
+  data-composition-id="titlecard-lockup"
+  data-composition-src="./components/titlecard-lockup.html"
+  data-variable-values='{"wordmark":"NORTHWIND","label":"SECURE AGENTS PLATFORM","kicker":"MEET","accent":"blue"}'
+  data-start="0"
+  data-duration="4"
+  data-track-index="0"
+></div>
+```
+
+## Variables
+
+| Variable   | Type   | Default                     | Notes                                                                                              |
+| ---------- | ------ | --------------------------- | -------------------------------------------------------------------------------------------------- |
+| `wordmark` | string | `HYPERFRAMES`               | Display wordmark, auto-fitted to one line by character count.                                      |
+| `label`    | string | `WRITE HTML. RENDER VIDEO.` | Mono caption under the rule. Empty string hides it.                                                |
+| `kicker`   | string | `INTRODUCING`               | Small mono label above the wordmark. Empty string hides it (the schedule keeps its beat of quiet). |
+| `rule`     | enum   | `show`                      | `show` or `hide` for the hairline rule and its draw.                                               |
+| `accent`   | enum   | `green`                     | `green` maps to `--brand`, `blue` to `--accent`, `violet` to `--accent-2`. Carried by the rule.    |
+| `exit`     | enum   | `none`                      | `none`, `fade`, or `up`. Frame roots own transitions; holds end films.                             |
+
+## Envelope
+
+- `IN_BASE = 1.80s`: kicker (0 to 0.45s), wordmark settle (0.25 to 1.10s), rule draw (0.90 to 1.45s), label (1.30 to 1.80s).
+- `HOLD = max(0, D - IN - OUT)`: elastic and truly still, no drift, no breath.
+- `OUT_BASE = 0.50s` when `exit` is `fade` or `up`, otherwise `0`.
+- If `D < IN_BASE + OUT_BASE` the phases compress together. The timeline is never time-scaled.
+
+## Contract notes
+
+- Consumes the theme contract tokens at point of use with exact-value fallbacks (`--bg`, `--fg`, `--brand`, `--accent`, `--accent-2`, `--font-display`, `--font-mono`, `--space-2`). The kicker and label ink is derived as `color-mix(in srgb, var(--fg) 62%, var(--bg))` so it stays contrast-safe (>= 4.5:1) on both dark and light hosts.
+- The rule draw measures `getTotalLength()` and dashes in user units (no `pathLength` attribute, no `non-scaling-stroke`).
+- One paused GSAP timeline registered at `window.__timelines["titlecard-lockup"]`; deterministic and seek-safe.
+- Elastic root: no `data-width`/`data-height`, `container-type: size`, `cqmin`-based sizing.
diff --git a/docs/public/catalog/components/titlecard-lockup/demo.html b/docs/public/catalog/components/titlecard-lockup/demo.html
new file mode 100644
index 0000000000..1003877e17
--- /dev/null
+++ b/docs/public/catalog/components/titlecard-lockup/demo.html
@@ -0,0 +1,98 @@
+<!doctype html>
+<!--
+  titlecard-lockup demo. Full-bleed mount on a light editorial backdrop: the
+  NORTH lockup owns the whole 1920x1080 frame, proving the titlecard carries
+  a full-frame open rather than floating as a small strip.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>titlecard-lockup Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #f4f6f9);
+      }
+
+      #root {
+        --bg: #f4f6f9;
+        --fg: #14161b;
+        --surface: #ffffff;
+        --border: #dfe4ec;
+        --brand: #1d4ed8;
+        --accent: #0284c7;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 40%, #ffffff 0%, var(--bg, #f4f6f9) 70%);
+      }
+
+      .mount-stage {
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        container-type: size;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="titlecard-lockup-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="titlecard-lockup-mount"
+        class="mount-stage clip"
+        data-composition-id="titlecard-lockup"
+        data-composition-src="./titlecard-lockup.html"
+        data-variable-values='{"wordmark":"NORTH","label":"SECURE AGENTS PLATFORM","kicker":"MEET","accent":"green"}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="1920"
+        data-height="1080"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["titlecard-lockup-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "titlecard-lockup.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/titlecard-lockup/titlecard-lockup.html b/docs/public/catalog/components/titlecard-lockup/titlecard-lockup.html
new file mode 100644
index 0000000000..2fc8ecbb82
--- /dev/null
+++ b/docs/public/catalog/components/titlecard-lockup/titlecard-lockup.html
@@ -0,0 +1,321 @@
+<!doctype html>
+<!--
+  titlecard-lockup: HyperFrames video primitive (intros and reveals / breather)
+
+  The calm breather titlecard. An optional mono kicker fades up, the wordmark
+  settles dead-center with ONE restrained move (scale 0.96 to 1, smooth
+  ease-out), a hairline rule draws left to right beneath it, a mono label
+  fades in under the rule, then the lockup holds truly still. Low motion is
+  the payload: no second development phase, no spring chains, and the hold
+  is dead still. The stillness is the confidence.
+
+  Variables:
+    - wordmark (string): the centered display wordmark.
+    - label (string): mono caption under the rule. Empty hides it.
+    - kicker (string): small mono label above the wordmark. Empty hides it.
+    - rule (show | hide): the hairline rule and its draw.
+    - accent (green | blue | violet): contract color carried by the rule.
+    - exit (none | fade | up, default none): optional departure.
+
+  Envelope: fixed IN, optional OUT, elastic HOLD only.
+    IN_BASE  = 1.80s  kicker, wordmark settle, rule draw, label, in sequence
+    HOLD     = max(0, D - IN - OUT), truly still: no drift, no breath
+    OUT_BASE = 0.50s when exit is fade or up, otherwise 0
+  If D is shorter than IN_BASE + OUT_BASE the phases compress together.
+  Longer mounts stretch HOLD only. The timeline is never time-scaled.
+
+  The rule draw uses getTotalLength dash measurement (never the pathLength
+  attribute, never non-scaling-stroke on a dashed path).
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, has no data-width or
+  data-height, and registers one paused timeline under the literal
+  titlecard-lockup key.
+-->
+<html
+  lang="en"
+  data-composition-id="titlecard-lockup"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "wordmark", "type": "string", "role": "content", "label": "Wordmark", "description": "Display wordmark that settles dead-center.", "default": "HYPERFRAMES" },
+    { "id": "label", "type": "string", "role": "content", "label": "Label", "description": "Mono caption under the rule. Empty hides it.", "default": "WRITE HTML. RENDER VIDEO." },
+    { "id": "kicker", "type": "string", "role": "content", "label": "Kicker", "description": "Small mono label above the wordmark. Empty hides it.", "default": "INTRODUCING" },
+    { "id": "rule", "type": "enum", "role": "style", "label": "Rule", "description": "Hairline rule drawn left to right under the wordmark.", "default": "show", "options": [{ "value": "show", "label": "Show" }, { "value": "hide", "label": "Hide" }] },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Contract color carried by the hairline rule.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "style", "label": "Exit", "description": "Optional departure. Frame roots own transitions, so none is the default.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Titlecard Lockup</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="titlecard-lockup" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          #root [hidden] {
+            display: none !important;
+          }
+
+          .tl-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+            background: var(--bg, #0b0c0e);
+          }
+
+          .tl-lockup {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            max-width: 92cqw;
+            text-align: center;
+            will-change: transform, opacity;
+          }
+
+          .tl-kicker {
+            display: block;
+            margin-bottom: var(--space-2, 3.4cqh);
+            /* Light-safe ink derived from the host's own fg/bg instead of
+               --muted (whose fallback is dark-tuned and fails contrast on
+               light hosts). 62% fg clears 4.5:1 on both dark and light. */
+            color: color-mix(in srgb, var(--fg, #f8fafc) 62%, var(--bg, #0b0c0e));
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            font-size: 2.6cqmin;
+            font-weight: 600;
+            line-height: 1;
+            letter-spacing: 0.3em;
+            text-indent: 0.3em; /* balances the trailing tracking so the line optically centers */
+            text-transform: uppercase;
+            will-change: transform, opacity;
+          }
+
+          .tl-wordmark {
+            display: block;
+            max-width: 92cqw;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: var(--tl-wordmark-size, min(14cqw, 22cqh));
+            font-weight: 600;
+            line-height: 1;
+            letter-spacing: -0.03em;
+            white-space: nowrap;
+            transform-origin: 50% 50%;
+            will-change: transform, opacity;
+          }
+
+          .tl-rule-svg {
+            display: block;
+            width: 34cqw;
+            height: max(1px, 0.2cqmin);
+            margin-top: var(--space-2, 4cqh);
+          }
+
+          .tl-rule-svg line {
+            stroke: color-mix(
+              in srgb,
+              var(--tl-accent, var(--brand, #71f5a7)) 60%,
+              var(--fg, #f8fafc)
+            );
+            stroke-width: 2;
+            stroke-opacity: 0.62;
+          }
+
+          .tl-label {
+            display: block;
+            margin-top: var(--space-2, 3.2cqh);
+            /* Same fg/bg-derived ink as the kicker: contrast-safe on any host. */
+            color: color-mix(in srgb, var(--fg, #f8fafc) 62%, var(--bg, #0b0c0e));
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            font-size: 2.2cqmin;
+            font-weight: 600;
+            line-height: 1.4;
+            letter-spacing: 0.34em;
+            text-indent: 0.34em;
+            text-transform: uppercase;
+            will-change: transform, opacity;
+          }
+        </style>
+
+        <div
+          id="titlecard-lockup-clip"
+          class="tl-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="tl-lockup">
+            <span class="tl-kicker"></span>
+            <span class="tl-wordmark"></span>
+            <svg
+              class="tl-rule-svg"
+              viewBox="0 0 560 2"
+              preserveAspectRatio="none"
+              xmlns="http://www.w3.org/2000/svg"
+              aria-hidden="true"
+            >
+              <line class="tl-rule" x1="0" y1="1" x2="560" y2="1" />
+            </svg>
+            <span class="tl-label"></span>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var lockup = root.querySelector(".tl-lockup");
+            var kicker = root.querySelector(".tl-kicker");
+            var wordmark = root.querySelector(".tl-wordmark");
+            var ruleSvg = root.querySelector(".tl-rule-svg");
+            var ruleLine = root.querySelector(".tl-rule");
+            var label = root.querySelector(".tl-label");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            function readText(value, fallback) {
+              if (value == null) return fallback;
+              return String(value).trim().replace(/\s+/g, " ");
+            }
+
+            var wordmarkText = readText(vars.wordmark, "HYPERFRAMES");
+            var labelText = readText(vars.label, "WRITE HTML. RENDER VIDEO.");
+            var kickerText = readText(vars.kicker, "INTRODUCING");
+            var ruleShown = vars.rule !== "hide";
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            wordmark.textContent = wordmarkText;
+            lockup.setAttribute("aria-label", wordmarkText);
+            root.style.setProperty("--tl-accent", accentColors[accent]);
+
+            if (kickerText) kicker.textContent = kickerText;
+            else kicker.setAttribute("hidden", "hidden");
+            if (labelText) label.textContent = labelText;
+            else label.setAttribute("hidden", "hidden");
+            if (!ruleShown) ruleSvg.setAttribute("hidden", "hidden");
+
+            // Deterministic character-count fit keeps the wordmark on one line
+            // with air on both sides before the template is laid out. The 0.78
+            // advance estimate is conservative so wide themed display faces
+            // (serifs) still fit inside the frame.
+            var characters = Math.max(1, Array.from(wordmarkText).length);
+            var fittedCqw = Math.min(12, 84 / (characters * 0.78));
+            root.style.setProperty(
+              "--tl-wordmark-size",
+              "min(" + fittedCqw.toFixed(3) + "cqw, 22cqh)",
+            );
+
+            var IN_BASE = 1.8;
+            var OUT_BASE = exit === "none" ? 0 : 0.5;
+            var parsedDuration = Number.parseFloat(root.dataset.duration);
+            var duration = Number.isFinite(parsedDuration) ? Math.max(0.001, parsedDuration) : 4;
+            var totalBase = IN_BASE + OUT_BASE;
+            var phaseScale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * phaseScale;
+            var OUT = OUT_BASE * phaseScale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var OUT_START = IN + HOLD;
+            var KICKER_IN = 0.45 * phaseScale;
+            var WORD_AT = 0.25 * phaseScale;
+            var WORD_IN = 0.85 * phaseScale;
+            var RULE_AT = 0.9 * phaseScale;
+            var RULE_IN = 0.55 * phaseScale;
+            var LABEL_AT = 1.3 * phaseScale;
+            var LABEL_IN = 0.5 * phaseScale;
+
+            var tl = gsap.timeline({ paused: true });
+
+            // Optional kicker fades up first. An empty kicker leaves a beat of
+            // quiet instead of reflowing the schedule.
+            if (kickerText) {
+              tl.fromTo(
+                kicker,
+                { autoAlpha: 0, y: "2.2cqh" },
+                { autoAlpha: 1, y: "0cqh", duration: KICKER_IN, ease: "power2.out" },
+                0,
+              );
+            }
+
+            // The ONE move: the wordmark settles dead-center, scale 0.96 to 1,
+            // smooth ease-out, entrance half only, no bounce.
+            tl.fromTo(
+              wordmark,
+              { autoAlpha: 0, scale: 0.96 },
+              { autoAlpha: 1, scale: 1, duration: WORD_IN, ease: "power3.out" },
+              WORD_AT,
+            );
+
+            // Hairline rule draws left to right via measured-length dash.
+            if (ruleShown) {
+              var ruleLength = ruleLine.getTotalLength();
+              ruleLine.style.strokeDasharray = String(ruleLength);
+              ruleLine.style.strokeDashoffset = String(ruleLength);
+              tl.fromTo(
+                ruleLine,
+                { strokeDashoffset: ruleLength },
+                { strokeDashoffset: 0, duration: RULE_IN, ease: "power2.out" },
+                RULE_AT,
+              );
+            }
+
+            // Mono label fades up beneath the rule.
+            if (labelText) {
+              tl.fromTo(
+                label,
+                { autoAlpha: 0, y: "1.8cqh" },
+                { autoAlpha: 1, y: "0cqh", duration: LABEL_IN, ease: "power2.out" },
+                LABEL_AT,
+              );
+            }
+
+            // TRUE hold: dead still. No drift, no breath; sub-perceptual
+            // motion reads as noise at 1080p, and the stillness is the point.
+
+            // Optional exit. Frame roots own transitions; none is the default
+            // and leaves the held lockup as the final frame.
+            if (exit !== "none") {
+              var exitProps = { autoAlpha: 0, duration: OUT, ease: "power2.in" };
+              if (exit === "up") exitProps.y = "-2.4cqh";
+              tl.to(lockup, exitProps, OUT_START);
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["titlecard-lockup"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/toggle-flip/demo.html b/docs/public/catalog/components/toggle-flip/demo.html
new file mode 100644
index 0000000000..2181f6513f
--- /dev/null
+++ b/docs/public/catalog/components/toggle-flip/demo.html
@@ -0,0 +1,121 @@
+<!doctype html>
+<!--
+  toggle-flip -- demo. Standalone 1920x1080 composition that MOUNTS the
+  primitive at registry/components/toggle-flip/toggle-flip.html via
+  data-composition-src, instead of inlining it: dark token-themed stage,
+  hosting the toggle in a ~40%-of-frame card centered in the composition.
+  data-variable-values on the host clip carries deliberately non-default
+  overrides (size, label) so preview tooling proves every variable actually
+  flows through the mount into the primitive. This file passing lint +
+  validate + snapshot is the proof the mount contract holds: the primitive
+  has no data-width/data-height of its own, so it must size itself off the
+  box this demo gives it, with no bleed and no 2x oversize. Kept in sync
+  with toggle-flip.html by hand; not installed by `hyperframes add`.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Toggle Flip - Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #05070d;
+      }
+
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 40%, #0d1526 0%, #05070d 70%);
+      }
+
+      /* The ~40%-of-frame card the primitive mounts into. A visibly distinct
+         panel (rounded, bordered, its own --bg tone) so the mount box reads
+         clearly against the page backdrop in a snapshot -- proof the toggle
+         stays inside it instead of bleeding past its edges.
+
+         Sized and centered with real percentages against #root's definite
+         1920x1080 box, not left to resolve from data-width/data-height
+         alone: the mounted primitive sizes its own internals off cqw
+         (container query units), and a host box with no definite CSS
+         width of its own forces the browser into shrink-to-fit sizing --
+         which, feeding back through a size-contained container, collapses
+         to the mounted content's tiny intrinsic size instead of the
+         intended box. An explicit width/height here sidesteps that
+         entirely. data-width/data-height stay in sync below for tooling
+         that reads them (lint, per-instance sizing metadata). */
+      .mount-card {
+        --bg: #131b2e;
+        width: 40%;
+        height: 40%;
+        left: 30%;
+        top: 30%;
+        border-radius: 28px;
+        border: 1px solid rgba(148, 163, 184, 0.25);
+        box-shadow: 0 40px 90px rgba(0, 0, 0, 0.45);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="toggle-flip-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="toggle-flip-mount"
+        class="mount-card clip"
+        data-composition-id="toggle-flip"
+        data-composition-src="./toggle-flip.html"
+        data-variable-values='{"direction":"on","label":"Dark mode","size":55}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="768"
+        data-height="432"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      // No motion of its own: this demo is a static host for the mounted
+      // primitive below, which owns and registers its own timeline. Register
+      // an empty paused timeline under this file's own composition id so the
+      // runtime's timeline-registry check is satisfied without inventing
+      // motion the demo doesn't need.
+      window.__timelines = window.__timelines || {};
+      window.__timelines["toggle-flip-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "toggle-flip.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/toggle-flip/toggle-flip.html b/docs/public/catalog/components/toggle-flip/toggle-flip.html
new file mode 100644
index 0000000000..c740e13196
--- /dev/null
+++ b/docs/public/catalog/components/toggle-flip/toggle-flip.html
@@ -0,0 +1,424 @@
+<!doctype html>
+<!--
+  toggle-flip -- HyperFrames video primitive (ui-props / interaction / demonstrate)
+
+  Concept: an oversized UI toggle switch that flips with real physicality --
+  thumb travel with a slight overshoot, a track color crossfade from
+  var(--surface) to var(--brand), and a soft press-compress right before the
+  knob releases into its new state. One mechanic, one job: demonstrating a
+  state change. This is the reference prop of the ui-props family -- the
+  thing a cursor or touch actor "operates" in a composed scene, and it also
+  has to read alone.
+
+  Compiled-from evidence: fixture; the reference prop (video-primitives
+  catalog, ui-props / interaction / demonstrate shelf).
+
+  Use when: showing a feature, setting, or permission turning on/off, or any
+  binary state change a pointer actor (oversized-cursor, touch-indicator)
+  operates on. Composes with those pointer primitives, which anchor to this
+  file's [data-anchor="toggle-flip"] button.
+
+  Variables (declared in data-composition-variables below):
+    - direction ("on" | "off", default "on"): the flip's TARGET state.
+      "on"  -> starts OFF (surface track), flips TO on (brand track).
+      "off" -> starts ON  (brand track),   flips TO off (surface track).
+    - label (string, default "Auto-save"): optional caption under the
+      toggle. Empty string hides the caption line entirely.
+    - size (number, percent of container width, default 40): toggle width
+      as a percentage of the host box's own width (cqw-driven, so it stays
+      proportional no matter what box a host composition gives it).
+
+  Envelope (fixed IN/OUT, elastic HOLD only -- never gsap.timeScale()):
+    IN_BASE  = 0.90s  stage settles in, anticipation press, then the flip
+    HOLD     = elastic = max(0, D - (IN_BASE + OUT_BASE)); ambient glow
+               breathes gently to prove the frame is alive, or sits calm at
+               HOLD = 0 for short durations
+    OUT_BASE = 0.50s  release fade
+    If D < IN_BASE + OUT_BASE, IN and OUT scale down together (never
+    time-scaled) so IN + OUT == D and HOLD == 0.
+
+  Sync point (fixed offset into IN, never inside the elastic HOLD): the flip
+  lands at FLIP_AT = 0.5s into an unscaled IN (scales proportionally with IN
+  when the envelope is compressed -- see RETIME RANGE below).
+
+  Sound cue: a soft click/tock foley fires at the flip sync point. The
+  primitive never plays audio -- it dispatches a `hf:sfx` CustomEvent
+  ({ id: "click-soft", t: FLIP_AT }) that a scene's mix stage can catch and
+  route to the catalog SFX id of its choice.
+
+  Mount contract: this file is a MOUNTABLE SUB-COMPOSITION, not a standalone
+  composition. A host loads it via data-composition-src; the runtime only
+  clones <template> contents (everything outside <template>, including the
+  entire <head>, is discarded on mount) -- see
+  skills/hyperframes-core/references/sub-compositions.md. The root carries
+  no data-width/data-height: it is elastic, sized off whatever box the host
+  clip gives it (position:absolute; inset:0; container-type:size), so the
+  toggle reads correctly whether the host mounts it into a 960x540 slot or a
+  full 1920x1080 frame. The root is styled by #root, never a class --
+  composited renders scope this file's CSS to
+  [data-composition-id="toggle-flip"], and a rule keyed on the root's own
+  class would stop matching the root itself (sub-compositions.md, Pitfall
+  3). Variables are read via window.__hyperframes.getVariables() (not by
+  parsing this file's own <html> tag at runtime): once mounted,
+  document.documentElement is the HOST's <html>, not this one, so the
+  loader's declared-defaults-plus-per-instance-overrides table is the only
+  reliable source once the primitive is running inside a host page.
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "direction", "type": "enum", "role": "content", "label": "Flip direction", "description": "Target end state the flip lands on.", "default": "on", "options": [{ "value": "on", "label": "Off → On" }, { "value": "off", "label": "On → Off" }] },
+    { "id": "label", "type": "string", "role": "content", "label": "Caption", "description": "Optional caption under the toggle. Blank hides the line.", "default": "Auto-save" },
+    { "id": "size", "type": "number", "role": "layout", "label": "Size", "description": "Toggle width as a percent of the host box width.", "default": 40, "min": 20, "max": 70, "step": 1, "unit": "%" }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Toggle Flip</title>
+    <!-- Metadata only for whoever opens this file directly -- the runtime
+         discards everything outside <template> on mount. The
+         data-composition-variables attribute above stays on <html> (not
+         inside <template>): the loader reads declared variable defaults
+         directly off the fetched document's root element, whether or not
+         the body is template-wrapped. -->
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="toggle-flip" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          /* Root: sized off the HOST box, never a fixed stage. inset:0 fills
+             whatever box the host clip gives it -- a 960x540 mounted slot,
+             a full 1920x1080 frame, anything in between. container-type
+             establishes the cqw/cqh basis every internal measurement below
+             is expressed in. Styled by #root, never a class -- see the
+             mount-contract note in the header comment. */
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            background: var(--bg, #0b1120);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+          }
+
+          .tf-clip {
+            width: 100%;
+            height: 100%;
+            display: grid;
+            place-items: center;
+          }
+
+          .tf-stage {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: var(--space-3, 3cqh);
+            opacity: 0;
+          }
+
+          .tf-label {
+            color: var(--muted, #94a3b8);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-weight: 650;
+            font-size: clamp(12px, 2.4cqw, 28px);
+            letter-spacing: 0.01em;
+            text-align: center;
+          }
+
+          .tf-label:empty {
+            display: none;
+          }
+
+          /* EDIT ZONE: geometry ratios. Track is a fixed 2.2:1 pill; the knob is
+             80% of the track's own height, inset 10% top/bottom. All of it is
+             expressed in cqw off --tf-size so it holds proportion at any size. */
+          .tf-toggle {
+            --tf-track-w: calc(var(--tf-size, 40) * 1cqw);
+            width: var(--tf-track-w);
+            aspect-ratio: 2.2 / 1;
+            position: relative;
+            display: block;
+            border: 0;
+            padding: 0;
+            background: transparent;
+            cursor: default;
+            /* transform is GSAP-owned below (press squeeze); no CSS transform here */
+          }
+
+          .tf-track {
+            position: absolute;
+            inset: 0;
+            border-radius: 999px;
+            --tf-mix: 0; /* 0..100, GSAP-tweened: 0 = surface/off, 100 = brand/on */
+            border: 0.15cqw solid
+              color-mix(
+                in srgb,
+                var(--border, #334155) calc(100% - var(--tf-mix, 0) * 0.4%),
+                var(--brand, #22c55e) calc(var(--tf-mix, 0) * 0.4%)
+              );
+            background: color-mix(
+              in srgb,
+              var(--surface, #1e293b) calc((100 - var(--tf-mix, 0)) * 1%),
+              var(--brand, #22c55e) calc(var(--tf-mix, 0) * 1%)
+            );
+            box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border, #334155) 45%, transparent);
+          }
+
+          .tf-glow {
+            position: absolute;
+            inset: -14%;
+            border-radius: 999px;
+            background: radial-gradient(
+              closest-side,
+              color-mix(in srgb, var(--accent, #38bdf8) 55%, transparent),
+              transparent 72%
+            );
+            opacity: 0;
+            pointer-events: none;
+          }
+
+          .tf-knob {
+            position: absolute;
+            top: calc(var(--tf-size, 40) * 0.0455cqw);
+            left: calc(var(--tf-size, 40) * 0.0455cqw);
+            width: calc(var(--tf-size, 40) * 0.3636cqw);
+            aspect-ratio: 1;
+            border-radius: 50%;
+            background: var(--surface, #f8fafc);
+            box-shadow: 0 0.35cqw 0.7cqw rgba(2, 6, 23, 0.4);
+            /* RETIME RANGE ends here for geometry; 150% is the exact travel a
+               2.2:1 track / 80%-of-height knob pair produces -- see header. GSAP
+               tweens x/scale directly below; no CSS transform authored here. */
+          }
+        </style>
+
+        <div
+          id="toggle-flip-clip"
+          class="tf-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="tf-stage">
+            <div class="tf-label"></div>
+            <button
+              class="tf-toggle"
+              type="button"
+              data-anchor="toggle-flip"
+              aria-pressed="false"
+              tabindex="-1"
+            >
+              <span class="tf-glow"></span>
+              <span class="tf-track"></span>
+              <span class="tf-knob"></span>
+            </button>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            // Literal, not read off the DOM: once mounted, the framework's
+            // flattening step strips data-composition-id from the mounted
+            // root (see FLATTENED_INNER_ROOT_STRIP_ATTRS in
+            // packages/core/src/runtime/flattenedRoot.ts), so
+            // root.getAttribute("data-composition-id") would read null post-
+            // mount and silently register the timeline under the key
+            // "null" instead of "toggle-flip" -- the render then waits the
+            // full 45s sub-composition poll and gives up. Matches the
+            // convention in sub-compositions.md's own example and
+            // empty.html: hardcode the id this file is always mounted
+            // under.
+            var compositionId = "toggle-flip";
+            var stage = root.querySelector(".tf-stage");
+            var labelEl = root.querySelector(".tf-label");
+            var toggleEl = root.querySelector(".tf-toggle");
+            var trackEl = root.querySelector(".tf-track");
+            var knobEl = root.querySelector(".tf-knob");
+            var glowEl = root.querySelector(".tf-glow");
+
+            // EDIT ZONE: variable defaults come from data-composition-variables
+            // above (declared on <html>). window.__hyperframes.getVariables()
+            // returns those defaults already merged with any per-instance
+            // data-variable-values a host sets on the mounting clip -- see
+            // sub-compositions.md's "Per-Instance Variables" section. Add a
+            // variable in both places together (declaration above + fallback
+            // below).
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            // INVARIANT: only "on" | "off" ever reaches the renderer, whatever a
+            // bad override sends.
+            var direction = vars.direction === "off" ? "off" : "on";
+            var toOn = direction === "on";
+            var labelText = vars.label == null ? "" : String(vars.label);
+            // INVARIANT: size always clamps into the declared 20-70% range so an
+            // out-of-range override can't blow the toggle past its container.
+            var sizePct = Math.max(20, Math.min(70, Number(vars.size) || 40));
+
+            labelEl.textContent = labelText;
+            toggleEl.style.setProperty("--tf-size", String(sizePct));
+
+            // A project's own --dur-beat sets this primitive's ambient pace, so
+            // the HOLD breathing feels native to whatever theme is compiled in.
+            var beat = parseFloat(getComputedStyle(root).getPropertyValue("--dur-beat")) || 0.5;
+            var SHEEN_HALF = beat * 1.5;
+
+            // RETIME RANGE: these are the only numbers to touch for a global
+            // pacing retune. Do not reach for gsap.timeScale() -- HOLD below is
+            // the only elastic phase; IN and OUT are always this long (scaled
+            // down together only when D itself is shorter than IN_BASE+OUT_BASE).
+            var IN_BASE = 0.9;
+            var OUT_BASE = 0.5;
+            var STAGE_IN_BASE = 0.4;
+            var PRESS_LEAD_BASE = 0.2;
+            var FLIP_AT_BASE = 0.5; // sync point: fixed offset into IN, never into HOLD
+            var FLIP_DURATION_BASE = 0.25;
+            var GLOW_DURATION_BASE = 0.15;
+
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var totalBase = IN_BASE + OUT_BASE;
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var STAGE_IN = STAGE_IN_BASE * scale;
+            var PRESS_LEAD = PRESS_LEAD_BASE * scale;
+            var FLIP_AT = FLIP_AT_BASE * scale;
+            var FLIP_DURATION = FLIP_DURATION_BASE * scale;
+            var GLOW_DURATION = GLOW_DURATION_BASE * scale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var HOLD_START = IN;
+            var OUT_START = IN + HOLD;
+
+            function fireSfx(id, t) {
+              root.dispatchEvent(
+                new CustomEvent("hf:sfx", { detail: { id: id, t: t }, bubbles: true }),
+              );
+            }
+
+            // Explicit both-endpoints state (gsap.set, never gsap.from()) so a
+            // seek to t=0 is always correct without playing the timeline.
+            var mixFrom = toOn ? 0 : 100;
+            var mixTo = toOn ? 100 : 0;
+            var xFrom = toOn ? "0%" : "150%";
+            var xTo = toOn ? "150%" : "0%";
+            gsap.set(stage, { opacity: 0 });
+            gsap.set(toggleEl, { scaleX: 1, scaleY: 1 });
+            gsap.set(knobEl, { x: xFrom, scale: 1 });
+            gsap.set(trackEl, { "--tf-mix": mixFrom });
+            gsap.set(glowEl, { opacity: 0 });
+            toggleEl.setAttribute("aria-pressed", toOn ? "false" : "true");
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: stage settle
+            tl.to(stage, { opacity: 1, duration: STAGE_IN, ease: "power2.out" }, 0);
+
+            // anticipation press, resolves exactly as the flip begins
+            if (PRESS_LEAD > 0) {
+              var pressStart = Math.max(0, FLIP_AT - PRESS_LEAD);
+              var pressHalf = PRESS_LEAD / 2;
+              tl.to(
+                toggleEl,
+                { scaleX: 0.94, scaleY: 1.06, duration: pressHalf, ease: "power1.inOut" },
+                pressStart,
+              );
+              tl.to(
+                toggleEl,
+                { scaleX: 1, scaleY: 1, duration: pressHalf, ease: "power1.inOut" },
+                pressStart + pressHalf,
+              );
+            }
+
+            // the flip: knob travel with overshoot + track color crossfade, one
+            // shared sync point (FLIP_AT) so they always land together
+            tl.to(knobEl, { x: xTo, duration: FLIP_DURATION, ease: "back.out(1.9)" }, FLIP_AT);
+            tl.to(
+              trackEl,
+              { "--tf-mix": mixTo, duration: FLIP_DURATION, ease: "back.out(1.9)" },
+              FLIP_AT,
+            );
+            tl.fromTo(
+              knobEl,
+              { scale: 1 },
+              {
+                scale: 1.08,
+                duration: FLIP_DURATION * 0.45,
+                ease: "power1.out",
+                yoyo: true,
+                repeat: 1,
+              },
+              FLIP_AT,
+            );
+            tl.set(
+              toggleEl,
+              { attr: { "aria-pressed": toOn ? "true" : "false" } },
+              FLIP_AT + FLIP_DURATION,
+            );
+            tl.call(
+              function () {
+                fireSfx("click-soft", FLIP_AT);
+              },
+              [],
+              FLIP_AT,
+            );
+
+            // soft glow pulse right as the flip settles
+            tl.fromTo(
+              glowEl,
+              { opacity: 0 },
+              {
+                opacity: 1,
+                duration: GLOW_DURATION * 0.5,
+                ease: "power1.out",
+                yoyo: true,
+                repeat: 1,
+              },
+              FLIP_AT + FLIP_DURATION,
+            );
+
+            // HOLD: gentle ambient breathing so an elastic frame still reads
+            // alive; naturally absent when HOLD == 0. Finite repeat count per
+            // the determinism rule -- floor, never ceil, so it can't overshoot D.
+            if (HOLD > SHEEN_HALF) {
+              var breathRepeat = Math.max(0, Math.floor(HOLD / SHEEN_HALF) - 1);
+              tl.fromTo(
+                glowEl,
+                { opacity: 0 },
+                {
+                  opacity: 0.32,
+                  duration: SHEEN_HALF,
+                  ease: "sine.inOut",
+                  yoyo: true,
+                  repeat: breathRepeat,
+                },
+                HOLD_START + GLOW_DURATION,
+              );
+            }
+
+            // OUT: release fade
+            tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.out" }, OUT_START);
+
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/tool-menu-slide-in/__hf-variables-preview.html b/docs/public/catalog/components/tool-menu-slide-in/__hf-variables-preview.html
new file mode 100644
index 0000000000..da323525bb
--- /dev/null
+++ b/docs/public/catalog/components/tool-menu-slide-in/__hf-variables-preview.html
@@ -0,0 +1,106 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Tool Menu Slide In variables preview</title>
+    <style>
+      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #f7f7f8; }
+      #hf-vars-root { position: relative; width: 1920px; height: 1080px; }
+      #hf-vars-mount { position: absolute; inset: 0; display: grid; place-items: center; }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  </head>
+  <body>
+    <div id="hf-vars-root" data-composition-id="tool-menu-slide-in-variables-preview" data-start="0" data-width="1920" data-height="1080" data-duration="5" data-fps="30">
+      <div id="hf-vars-mount" class="clip" data-composition-id="tool-menu-slide-in" data-composition-src="./tool-menu-slide-in.html" data-start="0" data-duration="5" data-track-index="0" data-width="1920" data-height="1080"></div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["tool-menu-slide-in-variables-preview"] = gsap.timeline({ paused: true });
+    </script>
+    <script>
+      (function () {
+        var mount = document.getElementById("hf-vars-mount");
+        // The mount is filled asynchronously, and the demo script selects
+        // what it fills it with, so it cannot run before then.
+        var observer = new MutationObserver(build);
+        observer.observe(mount, { childList: true, subtree: true });
+        build();
+        function build() {
+          if (!mount.firstElementChild) return;
+          observer.disconnect();
+
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-tool-menu-slide-in .to",
+          { "--hf-clip-right": "100%", "--hf-to-x": "60px", "--hf-to-scale": 1.04 },
+          {
+            "--hf-clip-right": "0%",
+            "--hf-to-x": "0px",
+            "--hf-to-scale": 1,
+            duration: 0.9,
+            ease: "power3.inOut",
+          },
+          startTime,
+        );
+        tl.to(
+          ".hf-remocn-tool-menu-slide-in .from",
+          {
+            "--hf-from-x": "-70px",
+            "--hf-from-scale": 0.96,
+            "--hf-from-blur": "5px",
+            duration: 0.9,
+            ease: "power3.inOut",
+          },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-tool-menu-slide-in .fx",
+          { "--hf-fx-x": "-110%" },
+          { "--hf-fx-x": "110%", duration: 0.58, ease: "power2.inOut" },
+          startTime + 0.18,
+        );
+        tl.fromTo(
+          ".hf-remocn-tool-menu-slide-in .rgb",
+          { "--hf-rgb-opacity": 0, "--hf-rgb-x": "-16px" },
+          {
+            "--hf-rgb-opacity": 1,
+            "--hf-rgb-x": "16px",
+            repeat: 3,
+            yoyo: true,
+            duration: 0.07,
+            ease: "steps(1)",
+          },
+          startTime + 0.32,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["tool-menu-slide-in-demo"] = tl;
+          var child = window.__timelines["tool-menu-slide-in-demo"];
+          delete window.__timelines["tool-menu-slide-in-demo"];
+          if (!child || typeof child.paused !== "function") return;
+          child.paused(false);
+          window.__timelines["tool-menu-slide-in-variables-preview"].add(child, 0);
+        }
+      })();
+    </script>
+<script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "tool-menu-slide-in.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/tool-menu-slide-in/demo.html b/docs/public/catalog/components/tool-menu-slide-in/demo.html
new file mode 100644
index 0000000000..90677885a1
--- /dev/null
+++ b/docs/public/catalog/components/tool-menu-slide-in/demo.html
@@ -0,0 +1,181 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Tool Menu Slide In - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+        transform: scale(1.65); /* ponytail: scale wrapper, not GSAP targets */
+        transform-origin: center center;
+      }
+      .hf-remocn-tool-menu-slide-in {
+        --hf-accent: #2563eb;
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-tool-menu-slide-in {
+        position: relative;
+        width: 760px;
+        height: 428px;
+        overflow: hidden;
+        border-radius: 30px;
+        background: #111827;
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+      }
+      .hf-remocn-tool-menu-slide-in .scene {
+        position: absolute;
+        inset: 0;
+        display: grid;
+        place-items: center;
+        font-weight: 900;
+        font-size: 58px;
+        letter-spacing: -0.05em;
+        color: #fff;
+      }
+      .hf-remocn-tool-menu-slide-in .from {
+        background: linear-gradient(135deg, #111827, #374151);
+        transform: translate(var(--hf-from-x, 0px), var(--hf-from-y, 0px))
+          scale(var(--hf-from-scale, 1));
+        filter: blur(var(--hf-from-blur, 0px));
+      }
+      .hf-remocn-tool-menu-slide-in .to {
+        background: linear-gradient(135deg, #2563eb, #7c3aed);
+        transform: translate(var(--hf-to-x, 0px), var(--hf-to-y, 0px)) scale(var(--hf-to-scale, 1));
+        clip-path: inset(
+          var(--hf-clip-top, 0%) var(--hf-clip-right, 100%) var(--hf-clip-bottom, 0%)
+            var(--hf-clip-left, 0%)
+        );
+      }
+      .hf-remocn-tool-menu-slide-in .fx {
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
+        mix-blend-mode: screen;
+        transform: translateX(var(--hf-fx-x, -110%));
+      }
+      .hf-remocn-tool-menu-slide-in .rgb {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        opacity: var(--hf-rgb-opacity, 0);
+        background: linear-gradient(
+          90deg,
+          rgba(239, 68, 68, 0.35),
+          transparent,
+          rgba(34, 211, 238, 0.35)
+        );
+        transform: translateX(var(--hf-rgb-x, 0px));
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="tool-menu-slide-in-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-tool-menu-slide-in">
+          <div class="scene from">Before</div>
+          <div class="scene to">Tool Menu Slide In</div>
+          <div class="fx"></div>
+          <div class="rgb"></div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-tool-menu-slide-in .to",
+          { "--hf-clip-right": "100%", "--hf-to-x": "60px", "--hf-to-scale": 1.04 },
+          {
+            "--hf-clip-right": "0%",
+            "--hf-to-x": "0px",
+            "--hf-to-scale": 1,
+            duration: 0.9,
+            ease: "power3.inOut",
+          },
+          startTime,
+        );
+        tl.to(
+          ".hf-remocn-tool-menu-slide-in .from",
+          {
+            "--hf-from-x": "-70px",
+            "--hf-from-scale": 0.96,
+            "--hf-from-blur": "5px",
+            duration: 0.9,
+            ease: "power3.inOut",
+          },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-tool-menu-slide-in .fx",
+          { "--hf-fx-x": "-110%" },
+          { "--hf-fx-x": "110%", duration: 0.58, ease: "power2.inOut" },
+          startTime + 0.18,
+        );
+        tl.fromTo(
+          ".hf-remocn-tool-menu-slide-in .rgb",
+          { "--hf-rgb-opacity": 0, "--hf-rgb-x": "-16px" },
+          {
+            "--hf-rgb-opacity": 1,
+            "--hf-rgb-x": "16px",
+            repeat: 3,
+            yoyo: true,
+            duration: 0.07,
+            ease: "steps(1)",
+          },
+          startTime + 0.32,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["tool-menu-slide-in-demo"] = tl;
+      </script>
+    </div>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "tool-menu-slide-in.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/tool-menu-slide-in/tool-menu-slide-in.html b/docs/public/catalog/components/tool-menu-slide-in/tool-menu-slide-in.html
new file mode 100644
index 0000000000..2f20658b5c
--- /dev/null
+++ b/docs/public/catalog/components/tool-menu-slide-in/tool-menu-slide-in.html
@@ -0,0 +1,163 @@
+<!--
+  Tool Menu Slide In - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup, CSS and script into a composition. Drive the timeline
+  integration from a paused GSAP timeline so renders remain deterministic.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result into the markup or
+  into a custom property the CSS above consumes. The timeline recipe below is
+  untouched by them: it keeps driving the same wipe, the same offsets and the
+  same chromatic flicker.
+
+    - from-text (string, default "Before"): the outgoing panel label, on screen
+      before the wipe. Blank falls back to the default.
+    - to-text (string, default "Tool Menu Slide In"): the incoming panel label.
+      The incoming panel is fully clipped while it rests, so it only shows once
+      the timeline wipes it open. Blank falls back to the default.
+    - distance (close | standard | far, default standard): scales the sideways
+      offset the timeline drives on both panels, so they cover a shorter or
+      longer run in the same time. Both panels rest at their settled position on
+      every setting, so this only changes the middle of the wipe.
+    - accent (blue | violet | emerald, default blue): colour family of the
+      incoming panel gradient. Like the panel it paints, it stays behind the
+      clip until the timeline wipes it open.
+
+  On every default the result is identical to the original: a grey panel slides
+  left while a blue to violet panel wipes in from the right.
+-->
+
+<div
+  class="hf-remocn-tool-menu-slide-in"
+  data-composition-variables='[
+    {"id": "from-text", "type": "string", "role": "content", "label": "From text", "description": "The outgoing panel label, on screen before the wipe.", "default": "Before"},
+    {"id": "to-text", "type": "string", "role": "content", "label": "To text", "description": "The incoming panel label. It stays clipped until the timeline wipes it open.", "default": "Tool Menu Slide In"},
+    {"id": "distance", "type": "enum", "role": "motion", "label": "Distance", "description": "Scales the sideways offset the timeline drives on both panels, so they cover a shorter or longer run in the same time.", "default": "standard", "options": [{"value": "close", "label": "Close"}, {"value": "standard", "label": "Standard"}, {"value": "far", "label": "Far"}]},
+    {"id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Colour family of the incoming panel gradient, revealed as the timeline wipes that panel open.", "default": "blue", "options": [{"value": "blue", "label": "Blue"}, {"value": "violet", "label": "Violet"}, {"value": "emerald", "label": "Emerald"}]}
+  ]'
+>
+  <div class="scene from">Before</div>
+  <div class="scene to">Tool Menu Slide In</div>
+  <div class="fx"></div>
+  <div class="rgb"></div>
+</div>
+
+<style>
+  .hf-remocn-tool-menu-slide-in {
+    --hf-accent: #2563eb;
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-tool-menu-slide-in {
+    position: relative;
+    width: 760px;
+    height: 428px;
+    overflow: hidden;
+    border-radius: 30px;
+    background: #111827;
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+  }
+  .hf-remocn-tool-menu-slide-in .scene {
+    position: absolute;
+    inset: 0;
+    display: grid;
+    place-items: center;
+    font-weight: 900;
+    font-size: 58px;
+    letter-spacing: -0.05em;
+    color: #fff;
+  }
+  .hf-remocn-tool-menu-slide-in .from {
+    background: linear-gradient(135deg, #111827, #374151);
+    transform: translate(
+        calc(var(--hf-from-x, 0px) * var(--hf-slide-reach, 1)),
+        var(--hf-from-y, 0px)
+      )
+      scale(var(--hf-from-scale, 1));
+    filter: blur(var(--hf-from-blur, 0px));
+  }
+  .hf-remocn-tool-menu-slide-in .to {
+    background: linear-gradient(
+      135deg,
+      var(--hf-slide-accent, var(--hf-accent, #2563eb)),
+      var(--hf-slide-accent-far, #7c3aed)
+    );
+    transform: translate(calc(var(--hf-to-x, 0px) * var(--hf-slide-reach, 1)), var(--hf-to-y, 0px))
+      scale(var(--hf-to-scale, 1));
+    clip-path: inset(
+      var(--hf-clip-top, 0%) var(--hf-clip-right, 100%) var(--hf-clip-bottom, 0%)
+        var(--hf-clip-left, 0%)
+    );
+  }
+  .hf-remocn-tool-menu-slide-in .fx {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
+    mix-blend-mode: screen;
+    transform: translateX(var(--hf-fx-x, -110%));
+  }
+  .hf-remocn-tool-menu-slide-in .rgb {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    opacity: var(--hf-rgb-opacity, 0);
+    background: linear-gradient(
+      90deg,
+      rgba(239, 68, 68, 0.35),
+      transparent,
+      rgba(34, 211, 238, 0.35)
+    );
+    transform: translateX(var(--hf-rgb-x, 0px));
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    var reaches = { close: 0.5, standard: 1, far: 1.85 };
+    var accents = {
+      blue: { near: "var(--hf-accent, #2563eb)", far: "#7c3aed" },
+      violet: { near: "#7c3aed", far: "#db2777" },
+      emerald: { near: "#059669", far: "#0891b2" },
+    };
+
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    function text(value, fallback) {
+      var resolved = value == null ? "" : String(value).trim();
+      return resolved.length > 0 ? resolved : fallback;
+    }
+
+    var fromText = text(vars["from-text"], "Before");
+    var toText = text(vars["to-text"], "Tool Menu Slide In");
+    var reach = reaches[pick(reaches, vars.distance, "standard")];
+    var accent = accents[pick(accents, vars.accent, "blue")];
+
+    var roots = document.querySelectorAll(".hf-remocn-tool-menu-slide-in");
+    for (var i = 0; i < roots.length; i += 1) {
+      var root = roots[i];
+      root.style.setProperty("--hf-slide-reach", String(reach));
+      root.style.setProperty("--hf-slide-accent", accent.near);
+      root.style.setProperty("--hf-slide-accent-far", accent.far);
+      root.querySelector(".from").textContent = fromText;
+      root.querySelector(".to").textContent = toText;
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-tool-menu-slide-in .to', { '--hf-clip-right': '100%', '--hf-to-x': '60px', '--hf-to-scale': 1.04 }, { '--hf-clip-right': '0%', '--hf-to-x': '0px', '--hf-to-scale': 1, duration: 0.9, ease: 'power3.inOut' }, startTime); tl.to('.hf-remocn-tool-menu-slide-in .from', { '--hf-from-x': '-70px', '--hf-from-scale': 0.96, '--hf-from-blur': '5px', duration: 0.9, ease: 'power3.inOut' }, startTime); tl.fromTo('.hf-remocn-tool-menu-slide-in .fx', { '--hf-fx-x': '-110%' }, { '--hf-fx-x': '110%', duration: 0.58, ease: 'power2.inOut' }, startTime + 0.18); tl.fromTo('.hf-remocn-tool-menu-slide-in .rgb', { '--hf-rgb-opacity': 0, '--hf-rgb-x': '-16px' }, { '--hf-rgb-opacity': 1, '--hf-rgb-x': '16px', repeat: 3, yoyo: true, duration: 0.07, ease: 'steps(1)' }, startTime + 0.32);
+-->
diff --git a/docs/public/catalog/components/top-down-letters/__hf-variables-preview.html b/docs/public/catalog/components/top-down-letters/__hf-variables-preview.html
new file mode 100644
index 0000000000..4f1ad03f2b
--- /dev/null
+++ b/docs/public/catalog/components/top-down-letters/__hf-variables-preview.html
@@ -0,0 +1,70 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Top-Down Letters variables preview</title>
+    <style>
+      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #f7f7f8; }
+      #hf-vars-root { position: relative; width: 1920px; height: 1080px; }
+      #hf-vars-mount { position: absolute; inset: 0; display: grid; place-items: center; }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  </head>
+  <body>
+    <div id="hf-vars-root" data-composition-id="top-down-letters-variables-preview" data-start="0" data-width="1920" data-height="1080" data-duration="5" data-fps="30">
+      <div id="hf-vars-mount" class="clip" data-composition-id="top-down-letters" data-composition-src="./top-down-letters.html" data-start="0" data-duration="5" data-track-index="0" data-width="1920" data-height="1080"></div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["top-down-letters-variables-preview"] = gsap.timeline({ paused: true });
+    </script>
+    <script>
+      (function () {
+        var mount = document.getElementById("hf-vars-mount");
+        // The mount is filled asynchronously, and the demo script selects
+        // what it fills it with, so it cannot run before then.
+        var observer = new MutationObserver(build);
+        observer.observe(mount, { childList: true, subtree: true });
+        build();
+        function build() {
+          if (!mount.firstElementChild) return;
+          observer.disconnect();
+
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-top-down-letters span",
+          { opacity: 0, "--hf-char-y": "-42px" },
+          { opacity: 1, "--hf-char-y": "0px", duration: 0.22, stagger: 0.035, ease: "power3.out" },
+          startTime,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["top-down-letters-demo"] = tl;
+          var child = window.__timelines["top-down-letters-demo"];
+          delete window.__timelines["top-down-letters-demo"];
+          if (!child || typeof child.paused !== "function") return;
+          child.paused(false);
+          window.__timelines["top-down-letters-variables-preview"].add(child, 0);
+        }
+      })();
+    </script>
+<script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "top-down-letters.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/top-down-letters/demo.html b/docs/public/catalog/components/top-down-letters/demo.html
new file mode 100644
index 0000000000..eaf0d44552
--- /dev/null
+++ b/docs/public/catalog/components/top-down-letters/demo.html
@@ -0,0 +1,102 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Top-Down Letters - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        min-width: 900px;
+        min-height: 500px;
+        padding: 64px;
+        /* ponytail: scale wrapper (not a GSAP target) to fill ~65% of frame width */
+        transform: scale(3.2);
+      }
+      .hf-remocn-top-down-letters {
+        color: #18181b;
+        font-family: Inter, system-ui, sans-serif;
+        font-weight: 900;
+        letter-spacing: -0.04em;
+      }
+      .hf-remocn-top-down-letters {
+        display: inline-flex;
+        gap: 1px;
+        font-size: 74px;
+        line-height: 0.9;
+        overflow: hidden;
+      }
+      .hf-remocn-top-down-letters span {
+        display: inline-block;
+        transform: translateY(var(--hf-char-y, 0px));
+        will-change: transform, opacity;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="top-down-letters-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-top-down-letters">
+          <span>C</span><span>A</span><span>S</span><span>C</span><span>A</span><span>D</span
+          ><span>E</span>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-top-down-letters span",
+          { opacity: 0, "--hf-char-y": "-42px" },
+          { opacity: 1, "--hf-char-y": "0px", duration: 0.22, stagger: 0.035, ease: "power3.out" },
+          startTime,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["top-down-letters-demo"] = tl;
+      </script>
+    </div>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "top-down-letters.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/top-down-letters/top-down-letters.html b/docs/public/catalog/components/top-down-letters/top-down-letters.html
new file mode 100644
index 0000000000..728e318725
--- /dev/null
+++ b/docs/public/catalog/components/top-down-letters/top-down-letters.html
@@ -0,0 +1,112 @@
+<!--
+  Top-Down Letters - remocn typography primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Drive the timeline
+  integration from a paused GSAP timeline so renders remain deterministic.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result either into the
+  markup or into a custom property the CSS above consumes. The timeline recipe
+  below is untouched by them: it keeps driving one offset per letter, and these
+  decide which letters fall, how far that offset carries them, and what colour
+  they are.
+
+    - text (string, default CASCADE): the word that cascades. Every character
+      becomes one span, in source order, exactly like the hand-written markup;
+      a space becomes a non-breaking space so it keeps its width in the flex
+      row. Anything that is not a non-empty string keeps the shipped word.
+    - distance (close | standard | far, default standard): multiplies the drop
+      the timeline drives, so the letters cover a shorter or longer run in the
+      same time. close covers half of it, standard leaves the shipped 42px
+      alone, far carries them nearly double.
+    - tone (ink | paper | accent, default ink): letter colour. ink is
+      near-black for light frames, paper near-white for dark ones, accent
+      rides --brand.
+
+  On every default the result is identical to the original: the seven
+  near-black letters of CASCADE dropping 42px into place.
+-->
+
+<div
+  class="hf-remocn-top-down-letters"
+  data-composition-variables='[
+    { "id": "text", "type": "string", "role": "content", "label": "Text", "description": "Word that cascades in. Every character becomes one letter span, in source order.", "default": "CASCADE" },
+    { "id": "distance", "type": "enum", "role": "motion", "label": "Distance", "description": "Multiplies the drop the timeline drives, so the letters cover a shorter or longer run in the same time.", "default": "standard", "options": [{ "value": "close", "label": "Close" }, { "value": "standard", "label": "Standard" }, { "value": "far", "label": "Far" }] },
+    { "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Letter colour: ink for light frames, paper for dark ones, accent rides --brand.", "default": "ink", "options": [{ "value": "ink", "label": "Ink" }, { "value": "paper", "label": "Paper" }, { "value": "accent", "label": "Accent" }] }
+  ]'
+>
+  <span>C</span><span>A</span><span>S</span><span>C</span><span>A</span><span>D</span><span>E</span>
+</div>
+
+<style>
+  .hf-remocn-top-down-letters {
+    color: var(--hf-letters-color, #18181b);
+    font-family: Inter, system-ui, sans-serif;
+    font-weight: 900;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-top-down-letters {
+    display: inline-flex;
+    gap: 1px;
+    font-size: 74px;
+    line-height: 0.9;
+    overflow: hidden;
+  }
+  .hf-remocn-top-down-letters span {
+    display: inline-block;
+    transform: translateY(calc(var(--hf-char-y, 0px) * var(--hf-char-distance, 1)));
+    will-change: transform, opacity;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    var distances = { close: 0.5, standard: 1, far: 1.8 };
+    var tones = {
+      ink: "#18181b",
+      paper: "#fafafa",
+      accent: "var(--brand, #34d399)",
+    };
+
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var distance = distances[pick(distances, vars.distance, "standard")];
+    var tone = tones[pick(tones, vars.tone, "ink")];
+    var text = typeof vars.text === "string" && vars.text !== "" ? vars.text : null;
+
+    var roots = document.querySelectorAll(".hf-remocn-top-down-letters");
+    for (var i = 0; i < roots.length; i += 1) {
+      var root = roots[i];
+      root.style.setProperty("--hf-char-distance", String(distance));
+      root.style.setProperty("--hf-letters-color", tone);
+
+      // Only rebuild when text was supplied; the shipped markup is already the
+      // exact span-per-character output this branch produces for CASCADE.
+      if (text !== null) {
+        var characters = Array.from(text);
+        root.textContent = "";
+        for (var j = 0; j < characters.length; j += 1) {
+          var span = document.createElement("span");
+          span.textContent = characters[j] === " " ? "\u00a0" : characters[j];
+          root.appendChild(span);
+        }
+        root.setAttribute("aria-label", text);
+      }
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-top-down-letters span', { opacity: 0, '--hf-char-y': '-42px' }, { opacity: 1, '--hf-char-y': '0px', duration: 0.22, stagger: 0.035, ease: 'power3.out' }, startTime);
+-->
diff --git a/docs/public/catalog/components/touch-indicator/demo.html b/docs/public/catalog/components/touch-indicator/demo.html
new file mode 100644
index 0000000000..462627f33e
--- /dev/null
+++ b/docs/public/catalog/components/touch-indicator/demo.html
@@ -0,0 +1,246 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Touch Indicator - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+
+      /*
+        Host declares the 17-token theme contract. touch-indicator.html
+        consumes these via var(--token, fallback); it never redeclares them.
+      */
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #05060a;
+
+        --bg: #0b0c10;
+        --fg: #f5f6f8;
+        --muted: #8b8f9a;
+        --surface: #16181d;
+        --border: #262931;
+        --brand: #e4e4e7;
+        --accent: #e4e4e7;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-body: Inter, system-ui, sans-serif;
+        --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
+        --radius: 20px;
+        --space-1: 8px;
+        --space-2: 16px;
+        --space-3: 24px;
+        --dur-beat: 0.4s;
+        --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+        --ease-emphasis: cubic-bezier(0.05, 0.7, 0.1, 1);
+      }
+
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 56px;
+        transform: scale(1.3); /* ponytail: scale wrapper only, GSAP targets stay untouched */
+        transform-origin: center;
+      }
+
+      .phone {
+        position: relative;
+        width: 380px;
+        height: 760px;
+        border-radius: 44px;
+        background: var(--bg, #0b0c10);
+        border: 1px solid color-mix(in srgb, var(--fg, #fff) 12%, transparent);
+        box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55);
+        overflow: hidden;
+        font-family: var(--font-body, sans-serif);
+        color: var(--fg, #f5f6f8);
+      }
+
+      .phone__header {
+        height: 64px;
+        display: flex;
+        align-items: center;
+        padding: 0 var(--space-3, 24px);
+        font-family: var(--font-display, sans-serif);
+        font-weight: 800;
+        font-size: 20px;
+        letter-spacing: -0.01em;
+      }
+
+      .phone__media {
+        height: 380px;
+        margin: 0 var(--space-2, 16px);
+        border-radius: var(--radius, 20px);
+        /* Placeholder media: an L3 plate with a hairline, finely hatched so it
+           reads as a surface with content on it rather than an empty box. */
+        border: 1px solid color-mix(in srgb, var(--fg, #f5f6f8) 14%, transparent);
+        background:
+          repeating-linear-gradient(
+            0deg,
+            color-mix(in srgb, var(--fg, #f5f6f8) 5%, transparent) 0 1px,
+            transparent 1px 3px
+          ),
+          color-mix(in srgb, var(--fg, #f5f6f8) 18%, transparent);
+      }
+
+      .phone__row {
+        height: 64px;
+        display: flex;
+        align-items: center;
+        gap: var(--space-2, 16px);
+        padding: 0 var(--space-3, 24px);
+      }
+
+      .like-btn {
+        position: relative;
+        width: 44px;
+        height: 44px;
+        border-radius: 50%;
+        border: 0;
+        display: grid;
+        place-items: center;
+        background: color-mix(in srgb, var(--surface, #16181d) 100%, transparent);
+        color: var(--muted, #8b8f9a);
+        padding: 0;
+      }
+
+      .like-btn__icon {
+        width: 22px;
+        height: 22px;
+        fill: none;
+        stroke: currentColor;
+        stroke-width: 2;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+
+      .like-count {
+        font-family: var(--font-mono, monospace);
+        font-size: 15px;
+        color: var(--muted, #8b8f9a);
+      }
+
+      .phone__list {
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 508px;
+        bottom: 0;
+        padding: var(--space-2, 16px);
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-1, 8px);
+      }
+      .phone__list-row {
+        height: 56px;
+        border-radius: calc(var(--radius, 20px) * 0.6);
+        background: var(--surface, #16181d);
+        border: 1px solid var(--border, #262931);
+      }
+
+      /*
+        Mount slot: fills the whole phone screen, so touch-indicator.html's
+        own container-query sizing resolves against a narrow (380px) host
+        box, not a full 1920-wide frame -- this is what proves the spec's
+        46px floor engages instead of the raw 5cqw target (19px here).
+      */
+      .touch-indicator-mount {
+        position: absolute;
+        inset: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="touch-indicator-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="3"
+    >
+      <div class="demo-frame">
+        <div class="phone">
+          <div class="phone__header">Feed</div>
+          <div class="phone__media"></div>
+          <div class="phone__row">
+            <button class="like-btn" type="button" aria-label="Like">
+              <svg class="like-btn__icon" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  d="M12 21s-7.5-4.6-10-9.1C.6 8.6 2 5 5.6 5c2 0 3.4 1 4.4 2.6C11 6 12.4 5 14.4 5 18 5 19.4 8.6 22 11.9 19.5 16.4 12 21 12 21z"
+                />
+              </svg>
+            </button>
+            <span class="like-count">128</span>
+          </div>
+          <div class="phone__list">
+            <div class="phone__list-row"></div>
+            <div class="phone__list-row"></div>
+            <div class="phone__list-row"></div>
+            <div class="phone__list-row"></div>
+            <div class="phone__list-row"></div>
+          </div>
+
+          <!--
+            MOUNT: touch-indicator as a real sub-composition clip, not
+            pasted markup. This div's data-composition-id must match the
+            internal data-composition-id inside touch-indicator.html (and
+            the window.__timelines key it registers under) -- see
+            sub-compositions.md, Pitfall 2. targetX/Y re-aim the primitive's
+            own default landing point (50/55) at this card's like button
+            (12%, 63% of the mount box) via a per-instance variable
+            override, the documented way a host customizes a mounted
+            primitive instead of forking its file.
+          -->
+          <div
+            id="touch-indicator-mount"
+            class="clip touch-indicator-mount"
+            data-composition-id="touch-indicator"
+            data-composition-src="./touch-indicator.html"
+            data-variable-values='{"targetX":12,"targetY":63}'
+            data-start="0.4"
+            data-duration="2.6"
+            data-track-index="1"
+            data-width="380"
+            data-height="760"
+          ></div>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      // Host timeline: no chrome motion needed to prove the mount contract,
+      // just registration under the host's own data-composition-id.
+      window.__timelines = window.__timelines || {};
+      window.__timelines["touch-indicator-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "touch-indicator.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/touch-indicator/touch-indicator.html b/docs/public/catalog/components/touch-indicator/touch-indicator.html
new file mode 100644
index 0000000000..dd68dce38e
--- /dev/null
+++ b/docs/public/catalog/components/touch-indicator/touch-indicator.html
@@ -0,0 +1,378 @@
+<!doctype html>
+<!--
+  touch-indicator -- HyperFrames video primitive (pointers / interaction / demonstrate)
+
+  CONCEPT: a translucent contact-circle that represents a fingertip touching
+  glass. It never hovers: every appearance resolves into a touch-down, every
+  touch causes a same-frame response on its target, every gesture ends with
+  a physical lift. One mechanic (tap or swipe, picked by a variable at
+  setup), one file. This is the mobile counterpart to an oversized cursor,
+  but it obeys touch physics, not pointer physics.
+
+  MOUNTABLE SUB-COMPOSITION: this file is loaded by a host via
+  data-composition-src, not pasted inline. The runtime only clones
+  <template> contents (see skills/hyperframes-core/references/sub-compositions.md),
+  so every style, the markup, and the script that builds and registers the
+  timeline all live inside <template> below. The file is self-driving: it
+  builds its own paused GSAP timeline and registers it under
+  window.__timelines["touch-indicator"] on load, matching the root's own
+  data-composition-id. A host mounts it with a matching
+  data-composition-id="touch-indicator" data-composition-src="./touch-indicator.html".
+
+  COMPILED FROM: hyperframes-corpus-data/mobile/gesture-actor-spec.md (the
+  contact-never-hover law, contact-circle sizing, tap anatomy, swipe law,
+  lift/exit law, same-frame target-reaction contract) with supporting
+  constants cross-checked against gesture-physics-recipes.md. Evidence
+  status: spec ready, no rendered corpus clips yet.
+
+  USE WHEN: a mobile UI scene needs a visible tap or swipe to cause the next
+  animation beat (button press, list scroll, card swipe, sheet reveal).
+  Skip it for cursor/pointer UI (use a cursor primitive) and for gestures
+  whose drawn path is itself the subject (use a trail primitive instead).
+
+  VARIABLES (declared below via data-composition-variables):
+    - gesture   enum "tap" | "swipe", default "tap"
+    - polarity  enum "light" | "dark", default "light"
+    - targetX   number 0-100 (percent of host width), default 50
+    - targetY   number 0-100 (percent of host height), default 55
+
+  ENVELOPE (seconds, 60fps frame-quantized, gesture = "tap"):
+    IN   0.000 - 0.167  approach (0.083) + touch-down compress (0.083)
+    HOLD 0.167 - 0.183  elastic dwell at compressed scale (stretch here only)
+    OUT  0.183 - 0.467  release (0.167) + lift (0.117), lift starts the
+                        instant release ends (0s gap, within the spec's
+                        <=0.04s allowance)
+
+  ENVELOPE (seconds, 60fps frame-quantized, gesture = "swipe"):
+    IN   0.000 - 0.167  approach (0.083) + touch-down compress (0.083)
+    HOLD 0.167 - 0.500  elastic travel: accelerate 41% / decelerate 59% of
+                        the stretchable swipe duration (default 0.333)
+    OUT  0.500 - 0.617  lift only (0.117); a swiping finger does not settle
+                        back to rest scale, it leaves mid-motion
+
+  SOUND CUES (fixed offsets, never inside the elastic HOLD):
+    touch-down  IN + 0.083s   -> soft fingertip contact
+    lift-off    tap:   OUT + 0.167s -> physical release tick
+                swipe: OUT + 0s     -> physical release tick (no bounce)
+
+  BUILT-IN RESPONSE: the primitive has to read standalone in a slot with no
+  host UI to react to it, so touch-down also drives its own contact-blur
+  ripple (EDIT ZONE: .hf-touch-indicator__contact, unchanged from the
+  original spec) plus a quiet radial pulse centered on the root
+  (.hf-touch-indicator__pulse, new). Both are token-painted and low-opacity
+  so they read as a same-frame acknowledgement, not a second effect
+  competing with a host's own reaction wiring.
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    {"id":"gesture","type":"enum","label":"Gesture","default":"tap","options":[{"value":"tap","label":"Tap"},{"value":"swipe","label":"Swipe"}]},
+    {"id":"polarity","type":"enum","label":"Polarity","default":"light","options":[{"value":"light","label":"Light (on dark UI)"},{"value":"dark","label":"Dark (on light UI)"}]},
+    {"id":"targetX","type":"number","label":"Target X","default":50,"min":0,"max":100,"unit":"%"},
+    {"id":"targetY","type":"number","label":"Target Y","default":55,"min":0,"max":100,"unit":"%"}
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Touch Indicator</title>
+    <!-- Head is metadata for the source file only; the mount runtime clones
+         only <template> contents and discards everything else, including
+         this head. See sub-compositions.md, "Pitfall 1".
+
+         The data-composition-variables declared on <html> above duplicates
+         the same schema on the #root div inside <template> below (the
+         "dual-carrier contract", core/src/runtime/compositionLoader.ts and
+         packages/parsers/src/htmlParser.ts both read declared defaults from
+         <html> only on the lazy external-load / CLI-metadata paths, while
+         the render-time bundler reads the template's root div). Keep both
+         copies in sync if the variable schema changes. -->
+  </head>
+  <body>
+    <template>
+      <style>
+        /* INVARIANT: root fills the host's box, position-blind, elastic to
+           whatever size a host slot gives it. No data-width/data-height on
+           the root -- the host slot owns the size (see mount contract).
+           Root is styled by #root, never a class (sub-compositions.md,
+           Pitfall 3). */
+        #root {
+          position: absolute;
+          inset: 0;
+          container-type: inline-size;
+          isolation: isolate;
+          pointer-events: none;
+        }
+
+        .hf-touch-indicator__pulse {
+          /* Root-level built-in response: a quiet radial flash centered on
+             the touch point, so the gesture reads even with no host UI to
+             react to it. Token-painted, low peak opacity -- see BUILT-IN
+             RESPONSE above. */
+          position: absolute;
+          left: 0;
+          top: 0;
+          width: clamp(120px, 30cqw, 320px);
+          height: clamp(120px, 30cqw, 320px);
+          border-radius: 50%;
+          background: radial-gradient(
+            circle,
+            color-mix(in srgb, var(--fg, #14181f) 30%, transparent) 0%,
+            transparent 72%
+          );
+          opacity: 0;
+          pointer-events: none;
+          will-change: transform, opacity;
+        }
+
+        .hf-touch-indicator__actor {
+          /* EDIT ZONE: sizing law from the spec, full-frame law (contact
+             circle target 5cqw of the host box). RETIME RANGE: floor
+             clamped to 46px (the spec's absolute floor, never smaller at
+             delivery scale) since cqw now resolves against whatever box a
+             host slot gives this mountable primitive, which can be much
+             narrower than a full 1920-wide frame. */
+          --hf-gesture-size: clamp(46px, 5cqw, 111px);
+          position: absolute;
+          left: 0;
+          top: 0;
+          width: var(--hf-gesture-size);
+          height: var(--hf-gesture-size);
+          opacity: 0;
+          visibility: hidden;
+          pointer-events: none;
+          will-change: transform, opacity;
+        }
+
+        .hf-touch-indicator__core {
+          position: absolute;
+          inset: 0;
+          box-sizing: border-box;
+          /* INVARIANT: circle geometry, hardcoded 50%, not var(--radius) -
+             that token is for rectangular UI corners, not this actor's
+             fixed disc. */
+          border-radius: 50%;
+          background: color-mix(in srgb, var(--bg, #ffffff) 68%, transparent);
+          border: 2px solid color-mix(in srgb, var(--fg, #14181f) 72%, transparent);
+          box-shadow: 0 4px 12px color-mix(in srgb, var(--fg, #14181f) 22%, transparent);
+          transform-origin: 50% 50%;
+          will-change: transform;
+        }
+
+        .hf-touch-indicator__actor--dark .hf-touch-indicator__core {
+          background: color-mix(in srgb, var(--fg, #14181f) 64%, transparent);
+          border-color: color-mix(in srgb, var(--bg, #ffffff) 86%, transparent);
+        }
+
+        .hf-touch-indicator__contact {
+          position: absolute;
+          left: 50%;
+          top: 54%;
+          width: 62%;
+          height: 22%;
+          border-radius: 50%;
+          background: color-mix(in srgb, var(--fg, #14181f) 32%, transparent);
+          filter: blur(5px);
+          opacity: 0;
+          /* INVARIANT: centering (xPercent/yPercent -50) and scaleX are set
+             by the FIRST GSAP tween below, not here - GSAP overwrites the
+             whole transform, so a static translate()+scaleX() here would be
+             discarded the instant the timeline renders
+             (gsap_css_transform_conflict). */
+          transform-origin: 50% 50%;
+          will-change: transform, opacity;
+        }
+      </style>
+
+      <div
+        id="root"
+        data-composition-id="touch-indicator"
+        data-composition-variables='[
+          {"id":"gesture","type":"enum","label":"Gesture","default":"tap","options":[{"value":"tap","label":"Tap"},{"value":"swipe","label":"Swipe"}]},
+          {"id":"polarity","type":"enum","label":"Polarity","default":"light","options":[{"value":"light","label":"Light (on dark UI)"},{"value":"dark","label":"Dark (on light UI)"}]},
+          {"id":"targetX","type":"number","label":"Target X","default":50,"min":0,"max":100,"unit":"%"},
+          {"id":"targetY","type":"number","label":"Target Y","default":55,"min":0,"max":100,"unit":"%"}
+        ]'
+      >
+        <div class="hf-touch-indicator__pulse"></div>
+        <div class="hf-touch-indicator__actor">
+          <div class="hf-touch-indicator__contact"></div>
+          <div class="hf-touch-indicator__core"></div>
+        </div>
+      </div>
+
+      <script>
+        (function () {
+          const FPS = 60;
+          const q = (s) => Math.max(1, Math.round(s * FPS)) / FPS;
+          const clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
+
+          // Coordinate law from the spec: the actor wrapper owns x/y
+          // (absolute position), the core owns press scale and the
+          // depth/lift offset, the contact shadow owns only its own opacity
+          // and scaleX, the root pulse owns only its own position/opacity/
+          // scale. Never tween two meanings on one transform channel.
+          function buildTouchIndicator(tl, root, { at = 0, elasticity = 1 } = {}) {
+            const defaults = { gesture: "tap", polarity: "light", targetX: 50, targetY: 55 };
+            // Per-instance overrides (a host's data-variable-values) land in
+            // window.__hfVariablesByComp, scoped by composition id. Reading
+            // window.__hfVariables directly here would silently ignore every
+            // host override -- window.__hyperframes.getVariables() is the
+            // scoped accessor, per the registry convention (see
+            // lower-third-bild.html, caption-texture.html).
+            const resolved =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : window.__hfVariables || {};
+            const vars = Object.assign({}, defaults, resolved);
+            const pulse = root.querySelector(".hf-touch-indicator__pulse");
+            const actor = root.querySelector(".hf-touch-indicator__actor");
+            const core = root.querySelector(".hf-touch-indicator__core");
+            const contact = root.querySelector(".hf-touch-indicator__contact");
+            if (vars.polarity === "dark") actor.classList.add("hf-touch-indicator__actor--dark");
+
+            // Compute layout geometry once at setup, never inside an ease/callback.
+            const hostW = root.clientWidth || 1;
+            const hostH = root.clientHeight || 1;
+            const x0 = (vars.targetX / 100) * hostW;
+            const y0 = (vars.targetY / 100) * hostH;
+            tl.set(pulse, { x: x0, y: y0, xPercent: -50, yPercent: -50 }, at);
+
+            // --- IN: fixed, never stretched. ---
+            const approach = q(0.09);
+            const down = q(0.08);
+            tl.fromTo(
+              actor,
+              { x: x0, y: y0, xPercent: -50, yPercent: -50, autoAlpha: 0 },
+              {
+                x: x0,
+                y: y0,
+                xPercent: -50,
+                yPercent: -50,
+                autoAlpha: 1,
+                duration: approach,
+                ease: "power2.out",
+                immediateRender: false,
+              },
+              at,
+            );
+            tl.fromTo(
+              core,
+              { y: -10, scale: 0.72 },
+              { y: 0, scale: 1, duration: approach, ease: "power2.out", immediateRender: false },
+              at,
+            );
+
+            const touchDown = at + approach; // sync point: fixed +0.083s into IN
+            const coreDownScale = vars.gesture === "swipe" ? 0.86 : 0.82;
+            tl.fromTo(
+              core,
+              { scale: 1 },
+              { scale: coreDownScale, duration: down, ease: "power2.in", immediateRender: false },
+              touchDown,
+            );
+            tl.fromTo(
+              contact,
+              { autoAlpha: 0, scaleX: 0.62, xPercent: -50, yPercent: -50 },
+              {
+                autoAlpha: 0.34,
+                scaleX: 1,
+                xPercent: -50,
+                yPercent: -50,
+                duration: down,
+                ease: "power2.in",
+                immediateRender: false,
+              },
+              touchDown,
+            );
+            // Built-in root pulse: same-frame acknowledgement so the
+            // gesture reads even with no host UI wired to react to it.
+            tl.fromTo(
+              pulse,
+              { autoAlpha: 0, scale: 0.4 },
+              {
+                autoAlpha: 0.35,
+                scale: 1,
+                duration: down,
+                ease: "power2.out",
+                immediateRender: false,
+              },
+              touchDown,
+            );
+            tl.to(
+              pulse,
+              { autoAlpha: 0, scale: 1.4, duration: q(0.24), ease: "power2.out" },
+              touchDown + down,
+            );
+
+            const inEnd = at + approach + down;
+
+            // --- HOLD: the only elastic phase. Stretch it, never gsap.timeScale(). ---
+            let holdEnd;
+            if (vars.gesture === "swipe") {
+              // RETIME RANGE: 0.28s - 0.52s per the swipe law. elasticity scales pacing.
+              const swipeDuration = q(clamp(0.34 * elasticity, 0.28, 0.52));
+              const travel = hostH * 0.4; // vertical scroll, 40% of host height (32-68% allowed)
+              const accel = q(swipeDuration * 0.41);
+              const decel = swipeDuration - accel;
+              const bendY = y0 - travel * 0.41;
+              const endY = y0 - travel;
+              tl.fromTo(
+                actor,
+                { x: x0, y: y0 },
+                { x: x0, y: bendY, duration: accel, ease: "power2.in", immediateRender: false },
+                inEnd,
+              );
+              tl.to(actor, { x: x0, y: endY, duration: decel, ease: "power3.out" }, inEnd + accel);
+              holdEnd = inEnd + swipeDuration;
+            } else {
+              // RETIME RANGE: 0.02s - 0.10s. A brief contact dwell, never a
+              // long-press (long-press is a distinct gesture with its own
+              // progress-ring recognizer).
+              const holdDuration = q(clamp(0.02 * elasticity, 0.02, 0.1));
+              holdEnd = inEnd + holdDuration;
+            }
+
+            // --- OUT: fixed, never stretched. ---
+            if (vars.gesture === "swipe") {
+              const liftDuration = q(0.12);
+              tl.to(contact, { autoAlpha: 0, duration: q(0.08), ease: "power2.out" }, holdEnd);
+              tl.to(
+                core,
+                { y: -10, scale: 0.74, duration: liftDuration, ease: "power2.in" },
+                holdEnd,
+              );
+              tl.to(actor, { autoAlpha: 0, duration: liftDuration, ease: "power2.in" }, holdEnd);
+              return { touchDown, holdStart: inEnd, holdEnd, settle: holdEnd + liftDuration };
+            }
+
+            const release = q(0.16);
+            tl.to(core, { scale: 1, duration: release, ease: "power2.out" }, holdEnd);
+            tl.to(
+              contact,
+              { autoAlpha: 0, scaleX: 0.72, duration: q(0.12), ease: "power2.out" },
+              holdEnd,
+            );
+            const liftStart = holdEnd + release; // 0s gap, within the spec's <=0.04s allowance
+            const liftDuration = q(0.12);
+            tl.to(
+              core,
+              { y: -10, scale: 0.74, duration: liftDuration, ease: "power2.in" },
+              liftStart,
+            );
+            tl.to(actor, { autoAlpha: 0, duration: liftDuration, ease: "power2.in" }, liftStart);
+            return { touchDown, holdStart: inEnd, holdEnd, settle: liftStart + liftDuration };
+          }
+
+          // Self-driving mount: build the paused timeline and register it
+          // under this file's own data-composition-id, matching the host's
+          // data-composition-src wiring (sub-compositions.md, Pitfall 2).
+          const root = document.querySelector('[data-composition-id="touch-indicator"]');
+          const tl = gsap.timeline({ paused: true });
+          window.__timelines = window.__timelines || {};
+          window.__timelines["touch-indicator"] = tl;
+          buildTouchIndicator(tl, root, { at: 0 });
+        })();
+      </script>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/tracing-beam/demo.html b/docs/public/catalog/components/tracing-beam/demo.html
new file mode 100644
index 0000000000..f3aabed6e7
--- /dev/null
+++ b/docs/public/catalog/components/tracing-beam/demo.html
@@ -0,0 +1,108 @@
+<!doctype html>
+<!--
+  tracing-beam demo. This standalone composition mounts tracing-beam.html
+  through data-composition-src. Non-default labels and accent prove variable
+  overrides while the primitive remains sized by its host clip.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Tracing Beam Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #0b0c0e);
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --muted: #94a3b8;
+        --surface: #171923;
+        --border: #3d4152;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-body: Inter, system-ui, sans-serif;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        --radius: 2.8cqmin;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(
+          ellipse at 50% 44%,
+          var(--bg, #1b1830) 0%,
+          var(--bg, #0b0c0e) 70%
+        );
+      }
+
+      .mount-card {
+        width: 76%;
+        height: 58%;
+        left: 12%;
+        top: 21%;
+        container-type: size;
+        overflow: hidden;
+        border: 1px solid color-mix(in srgb, var(--border, #a78bfa) 22%, transparent);
+        border-radius: 34px;
+        background: color-mix(in srgb, var(--surface, #13141d) 88%, transparent);
+        box-shadow: 0 44px 110px color-mix(in srgb, var(--bg, #000000) 48%, transparent);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="tracing-beam-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4.5"
+      data-fps="30"
+    >
+      <div
+        id="tracing-beam-mount"
+        class="mount-card clip"
+        data-composition-id="tracing-beam"
+        data-composition-src="./tracing-beam.html"
+        data-variable-values='{"labels":"Capture,Compose,Render","accent":"violet"}'
+        data-start="0"
+        data-duration="4.5"
+        data-track-index="0"
+        data-width="1459"
+        data-height="626"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["tracing-beam-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "tracing-beam.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/tracing-beam/tracing-beam.html b/docs/public/catalog/components/tracing-beam/tracing-beam.html
new file mode 100644
index 0000000000..9614bfb59a
--- /dev/null
+++ b/docs/public/catalog/components/tracing-beam/tracing-beam.html
@@ -0,0 +1,399 @@
+<!doctype html>
+<!--
+  tracing-beam: HyperFrames video primitive (product-demo / attention)
+
+  Concept: one glowing dash follows one authored SVG path through three UI
+  elements. Each element brightens and lifts on arrival, then settles as the
+  dash moves on. The final element stays active until the beam exits.
+
+  Variables:
+    - labels (string, default "Search,Preview,Export"): three comma-separated
+      labels shown in path order.
+    - accent (enum, default "cyan"): cyan, violet, or amber beam color.
+
+  Envelope: fixed 3.00s IN, elastic HOLD, fixed 0.55s OUT. If the mounted
+  duration is shorter than 3.55s, IN and OUT compress proportionally. Only
+  HOLD grows when the mounted duration is longer.
+
+  IN: the stage appears, then the dash visits all three elements in order.
+  HOLD: the dash rests on the final element with a subtle vertical drift.
+  OUT: the dash leaves the path, the final element settles, and the stage fades.
+
+  Mount contract: everything needed at runtime lives inside this template.
+  #root fills the host box with container query units and registers exactly
+  one paused timeline under the hardcoded tracing-beam key.
+-->
+<html
+  lang="en"
+  data-composition-id="tracing-beam"
+  data-composition-duration="4.5"
+  data-composition-variables='[
+    { "id": "labels", "type": "string", "role": "content", "label": "Labels", "description": "Three comma-separated labels shown in path order.", "default": "Search,Preview,Export" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Beam and active-element color.", "default": "cyan", "options": [{ "value": "cyan", "label": "Cyan" }, { "value": "violet", "label": "Violet" }, { "value": "amber", "label": "Amber" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Tracing Beam</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="tracing-beam" data-duration="4.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .tb-clip,
+          .tb-stage {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+          }
+
+          .tb-stage {
+            opacity: 0;
+          }
+
+          .tb-route {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+            overflow: visible;
+          }
+
+          .tb-beam {
+            fill: none;
+            stroke: var(--tb-accent, #5ee7ff);
+            stroke-width: 9;
+            stroke-linecap: round;
+            stroke-linejoin: round;
+            filter: url(#tracing-beam-glow);
+            opacity: 0;
+            will-change: stroke-dashoffset, opacity;
+          }
+
+          .tb-anchor {
+            position: absolute;
+            width: 22cqw;
+            height: 24cqh;
+            transform: translate(-50%, -50%);
+          }
+
+          .tb-anchor:nth-child(1) {
+            left: 15%;
+            top: 60%;
+          }
+
+          .tb-anchor:nth-child(2) {
+            left: 50%;
+            top: 35%;
+          }
+
+          .tb-anchor:nth-child(3) {
+            left: 85%;
+            top: 58%;
+          }
+
+          .tb-node {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            will-change: transform;
+          }
+
+          .tb-halo {
+            position: absolute;
+            inset: -24%;
+            border-radius: 50%;
+            background: radial-gradient(
+              circle,
+              color-mix(in srgb, var(--tb-accent, #5ee7ff) 42%, transparent) 0%,
+              transparent 70%
+            );
+            opacity: 0;
+            will-change: transform, opacity;
+          }
+
+          .tb-card {
+            position: relative;
+            z-index: 1;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            gap: 2.2cqw;
+            padding: 2.4cqh 2.2cqw;
+            overflow: hidden;
+            border: 0.16cqmin solid color-mix(in srgb, var(--border, #475569) 78%, transparent);
+            border-radius: var(--radius, 2.8cqmin);
+            background: color-mix(in srgb, var(--surface, #172033) 92%, transparent);
+            box-shadow: 0 2.4cqh 6cqh color-mix(in srgb, var(--bg, #0b0c0e) 56%, transparent);
+            opacity: 0.48;
+            will-change: opacity;
+          }
+
+          .tb-icon {
+            flex: 0 0 auto;
+            width: 7.5cqmin;
+            aspect-ratio: 1;
+            display: grid;
+            place-items: center;
+            border: 0.14cqmin solid color-mix(in srgb, var(--tb-accent, #5ee7ff) 52%, transparent);
+            border-radius: 2cqmin;
+            background: color-mix(in srgb, var(--tb-accent, #5ee7ff) 14%, var(--surface, #172033));
+            color: var(--tb-accent, #5ee7ff);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
+            font-size: clamp(13px, 3.5cqmin, 28px);
+            font-weight: 760;
+          }
+
+          .tb-copy {
+            min-width: 0;
+          }
+
+          .tb-kicker {
+            margin-bottom: 0.8cqh;
+            color: var(--muted, #94a3b8);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
+            font-size: clamp(9px, 1.7cqmin, 16px);
+            font-weight: 650;
+            letter-spacing: 0.14em;
+            text-transform: uppercase;
+          }
+
+          .tb-label {
+            max-width: 100%;
+            overflow: hidden;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: clamp(13px, 4.6cqmin, 38px);
+            font-weight: 720;
+            line-height: 1.05;
+            letter-spacing: -0.025em;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+        </style>
+
+        <div
+          id="tracing-beam-clip"
+          class="tb-clip clip"
+          data-start="0"
+          data-duration="4.5"
+          data-track-index="0"
+        >
+          <div class="tb-stage">
+            <svg
+              class="tb-route"
+              viewBox="0 0 1000 520"
+              preserveAspectRatio="none"
+              aria-hidden="true"
+            >
+              <defs>
+                <filter id="tracing-beam-glow" x="-30%" y="-30%" width="160%" height="160%">
+                  <feGaussianBlur stdDeviation="7" result="blur" />
+                  <feMerge>
+                    <feMergeNode in="blur" />
+                    <feMergeNode in="SourceGraphic" />
+                  </feMerge>
+                </filter>
+              </defs>
+              <path
+                class="tb-beam"
+                d="M 150 312 C 280 312 335 182 500 182 C 665 182 720 302 850 302"
+              />
+            </svg>
+
+            <div class="tb-nodes">
+              <div class="tb-anchor">
+                <div class="tb-node">
+                  <div class="tb-halo"></div>
+                  <div class="tb-card">
+                    <div class="tb-icon">01</div>
+                    <div class="tb-copy">
+                      <div class="tb-kicker">Step one</div>
+                      <div class="tb-label"></div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="tb-anchor">
+                <div class="tb-node">
+                  <div class="tb-halo"></div>
+                  <div class="tb-card">
+                    <div class="tb-icon">02</div>
+                    <div class="tb-copy">
+                      <div class="tb-kicker">Step two</div>
+                      <div class="tb-label"></div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="tb-anchor">
+                <div class="tb-node">
+                  <div class="tb-halo"></div>
+                  <div class="tb-card">
+                    <div class="tb-icon">03</div>
+                    <div class="tb-copy">
+                      <div class="tb-kicker">Step three</div>
+                      <div class="tb-label"></div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".tb-stage");
+            var beam = root.querySelector(".tb-beam");
+            var nodes = root.querySelectorAll(".tb-node");
+            var labels = root.querySelectorAll(".tb-label");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var defaultLabels = ["Search", "Preview", "Export"];
+            var labelValue = vars.labels == null ? defaultLabels.join(",") : String(vars.labels);
+            var labelParts = labelValue.split(",");
+            for (var i = 0; i < labels.length; i += 1) {
+              var part = labelParts[i] == null ? "" : labelParts[i].trim();
+              labels[i].textContent = part === "" ? defaultLabels[i] : part;
+            }
+
+            var accentName =
+              vars.accent === "violet" || vars.accent === "amber" ? vars.accent : "cyan";
+            var accentColors = {
+              cyan: "var(--accent, #5ee7ff)",
+              violet: "var(--accent-2, #a78bfa)",
+              amber: "var(--brand, #fbbf24)",
+            };
+            root.style.setProperty("--tb-accent", accentColors[accentName]);
+
+            var routeLength = beam.getTotalLength();
+            var dashLength = routeLength * 0.24;
+            beam.style.strokeDasharray = dashLength + " " + routeLength;
+            beam.style.strokeDashoffset = String(dashLength);
+
+            var IN_BASE = 3;
+            var OUT_BASE = 0.55;
+            var BEAM_START_BASE = 0.35;
+            var BEAM_TRAVEL_BASE = 2.35;
+            var NODE_MOVE_BASE = 0.28;
+            var NODE_DIM_DELAY_BASE = 0.65;
+            var BEAM_EXIT_BASE = 0.28;
+
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4.5"));
+            var fixedDuration = IN_BASE + OUT_BASE;
+            var scale = duration < fixedDuration ? duration / fixedDuration : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var BEAM_START = BEAM_START_BASE * scale;
+            var BEAM_TRAVEL = BEAM_TRAVEL_BASE * scale;
+            var NODE_MOVE = NODE_MOVE_BASE * scale;
+            var NODE_DIM_DELAY = NODE_DIM_DELAY_BASE * scale;
+            var BEAM_EXIT = BEAM_EXIT_BASE * scale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var HOLD_START = IN;
+            var OUT_START = IN + HOLD;
+            var arrivals = [BEAM_START, BEAM_START + BEAM_TRAVEL * 0.5, BEAM_START + BEAM_TRAVEL];
+
+            gsap.set(stage, { opacity: 0 });
+            gsap.set(beam, { opacity: 0 });
+            gsap.set(nodes, { y: 0 });
+            gsap.set(root.querySelectorAll(".tb-halo"), { scale: 0.82 });
+
+            var tl = gsap.timeline({ paused: true });
+
+            function brighten(node, at) {
+              var card = node.querySelector(".tb-card");
+              var halo = node.querySelector(".tb-halo");
+              tl.to(node, { y: "-2.2cqh", duration: NODE_MOVE, ease: "power3.out" }, at);
+              tl.to(card, { opacity: 1, duration: NODE_MOVE, ease: "power2.out" }, at);
+              tl.to(halo, { opacity: 0.86, scale: 1, duration: NODE_MOVE, ease: "power3.out" }, at);
+            }
+
+            function dim(node, at) {
+              var card = node.querySelector(".tb-card");
+              var halo = node.querySelector(".tb-halo");
+              tl.to(node, { y: 0, duration: NODE_MOVE, ease: "power2.out" }, at);
+              tl.to(card, { opacity: 0.48, duration: NODE_MOVE, ease: "power2.out" }, at);
+              tl.to(halo, { opacity: 0, scale: 0.82, duration: NODE_MOVE, ease: "power2.out" }, at);
+            }
+
+            tl.to(stage, { opacity: 1, duration: Math.min(0.35, IN), ease: "power2.out" }, 0);
+            tl.to(beam, { opacity: 1, duration: NODE_MOVE, ease: "power2.out" }, BEAM_START);
+            tl.to(
+              beam,
+              {
+                strokeDashoffset: -(routeLength - dashLength),
+                duration: BEAM_TRAVEL,
+                ease: "sine.inOut",
+              },
+              BEAM_START,
+            );
+
+            brighten(nodes[0], arrivals[0]);
+            brighten(nodes[1], arrivals[1]);
+            brighten(nodes[2], arrivals[2]);
+            dim(nodes[0], arrivals[0] + NODE_DIM_DELAY);
+            dim(nodes[1], arrivals[1] + NODE_DIM_DELAY);
+
+            if (HOLD > 0.2) {
+              tl.to(
+                nodes[2],
+                { y: "-2.7cqh", duration: HOLD * 0.5, ease: "sine.inOut" },
+                HOLD_START,
+              );
+              tl.to(
+                nodes[2],
+                { y: "-2.2cqh", duration: HOLD * 0.5, ease: "sine.inOut" },
+                HOLD_START + HOLD * 0.5,
+              );
+            }
+
+            tl.to(
+              beam,
+              {
+                strokeDashoffset: -routeLength,
+                opacity: 0,
+                duration: BEAM_EXIT,
+                ease: "power2.in",
+              },
+              OUT_START,
+            );
+            dim(nodes[2], OUT_START);
+            tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["tracing-beam"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/tracking-in/demo.html b/docs/public/catalog/components/tracking-in/demo.html
new file mode 100644
index 0000000000..6b44e87790
--- /dev/null
+++ b/docs/public/catalog/components/tracking-in/demo.html
@@ -0,0 +1,88 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Tracking In - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      body {
+        font-family: Inter, system-ui, sans-serif;
+        background: #fafafa;
+      }
+      #demo {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: linear-gradient(135deg, #fafafa, #f4f4f5);
+        color: #18181b;
+      }
+      .panel {
+        text-align: center;
+        width: 1260px;
+      }
+      .label {
+        font-size: 28px;
+        font-weight: 600;
+        color: #71717a;
+        text-transform: uppercase;
+        letter-spacing: 0.18em;
+      }
+      .headline {
+        margin-top: 28px;
+        font-size: 118px;
+        line-height: 1;
+        font-weight: 900;
+      }
+      .hf-tracking-in {
+        opacity: 0;
+        letter-spacing: var(--hf-tracking-value, 0.28em);
+        transform: translateY(8px);
+        will-change: opacity, letter-spacing, transform;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="tracking-in-demo"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+    >
+      <div class="panel">
+        <div class="label hf-tracking-in">Editorial motion</div>
+        <div class="headline hf-tracking-in">TRACKING IN</div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        tl.to(
+          ".hf-tracking-in",
+          {
+            opacity: 1,
+            "--hf-tracking-value": "0.02em",
+            y: 0,
+            duration: 0.9,
+            ease: "power3.out",
+            stagger: 0.16,
+          },
+          0.45,
+        );
+        window.__timelines = window.__timelines || {};
+        window.__timelines["tracking-in-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/tracking-in/tracking-in.html b/docs/public/catalog/components/tracking-in/tracking-in.html
new file mode 100644
index 0000000000..d58a211180
--- /dev/null
+++ b/docs/public/catalog/components/tracking-in/tracking-in.html
@@ -0,0 +1,95 @@
+<!--
+  Tracking In - letter-spacing reveal.
+
+  Add class="hf-tracking-in" to text elements, then animate the CSS variable
+  from wide tracking to the final value in your composition timeline.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result as a custom property
+  on the document root, which every element carrying the class inherits. The
+  timeline recipe below is untouched by them: it keeps driving one tracking
+  value and one opacity, and these decide how wide that tracking reads, where
+  the text starts, and what colour it settles in.
+
+    - tracking (tight | standard | wide, default standard): multiplies the
+      letter-spacing the timeline drives. It scales the whole curve, so the
+      reveal starts proportionally wider or tighter and settles the same way.
+      tight is 0.6 of the shipped spacing, wide is 1.8 of it.
+    - rise (subtle | standard | bold, default standard): the vertical offset
+      the text starts from, which the timeline reads as the start of its
+      travel and eases to zero. subtle is 4px, standard the shipped 8px, bold
+      18px.
+    - tone (inherit | ink | paper | accent, default inherit): text colour.
+      inherit leaves the surrounding page colour alone, ink is near-black for
+      light frames, paper near-white for dark ones, accent rides --brand.
+      The class starts at opacity 0, so the colour only becomes visible once
+      the timeline reveals the text.
+
+  On every default the result is identical to the original: text at the page
+  colour rising 8px into place out of 0.28em tracking.
+-->
+
+<style
+  data-composition-variables='[
+    { "id": "tracking", "type": "enum", "role": "style", "label": "Tracking", "description": "Multiplies the letter-spacing the timeline drives, so the reveal starts and settles proportionally wider or tighter.", "default": "standard", "options": [{ "value": "tight", "label": "Tight" }, { "value": "standard", "label": "Standard" }, { "value": "wide", "label": "Wide" }] },
+    { "id": "rise", "type": "enum", "role": "motion", "label": "Rise", "description": "Vertical offset the text starts from, which the timeline reads as the start of its travel and eases to zero.", "default": "standard", "options": [{ "value": "subtle", "label": "Subtle" }, { "value": "standard", "label": "Standard" }, { "value": "bold", "label": "Bold" }] },
+    { "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Text colour: inherit keeps the surrounding page colour, ink suits light frames, paper dark ones, accent rides --brand.", "default": "inherit", "options": [{ "value": "inherit", "label": "Inherit" }, { "value": "ink", "label": "Ink" }, { "value": "paper", "label": "Paper" }, { "value": "accent", "label": "Accent" }] }
+  ]'
+>
+  .hf-tracking-in {
+    opacity: 0;
+    color: var(--hf-tracking-color, inherit);
+    letter-spacing: calc(var(--hf-tracking-value, 0.28em) * var(--hf-tracking-reach, 1));
+    transform: translateY(var(--hf-tracking-y, 8px));
+    will-change: opacity, letter-spacing, transform;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    var reaches = { tight: 0.6, standard: 1, wide: 1.8 };
+    var rises = { subtle: "4px", standard: "8px", bold: "18px" };
+    var tones = {
+      inherit: "inherit",
+      ink: "#18181b",
+      paper: "#fafafa",
+      accent: "var(--brand, #34d399)",
+    };
+
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var reach = reaches[pick(reaches, vars.tracking, "standard")];
+    var rise = rises[pick(rises, vars.rise, "standard")];
+    var tone = tones[pick(tones, vars.tone, "inherit")];
+
+    // The class is applied to arbitrary host elements, so the resolved values
+    // ride the document root and inherit down to every one of them.
+    var host = document.documentElement;
+    host.style.setProperty("--hf-tracking-reach", String(reach));
+    host.style.setProperty("--hf-tracking-y", rise);
+    host.style.setProperty("--hf-tracking-color", tone);
+  })();
+</script>
+
+<!--
+  Timeline integration:
+
+  tl.to(".hf-tracking-in", {
+    opacity: 1,
+    "--hf-tracking-value": "0.02em",
+    y: 0,
+    duration: 0.9,
+    ease: "power3.out",
+    stagger: 0.1,
+  }, startTime);
+-->
diff --git a/docs/public/catalog/components/trust-strip/README.md b/docs/public/catalog/components/trust-strip/README.md
new file mode 100644
index 0000000000..8bd9121a3e
--- /dev/null
+++ b/docs/public/catalog/components/trust-strip/README.md
@@ -0,0 +1,48 @@
+# trust-strip
+
+Monochrome trust/logo strip (proof & stats, 3.5s authored, elastic HOLD).
+
+N text wordmarks set in wide-tracked uppercase mono, one centered row with wide
+gaps, no boxes, no borders. Marks fade in with an opacity-only stagger from
+left to right (default 0.15s gap), then the strip holds dead still. Above five
+marks the row wraps gracefully to a second centered row when width demands;
+reading order and reveal order are preserved.
+
+## Variables
+
+| Variable | Type                          | Default                                        | Notes                                                                                                                                               |
+| -------- | ----------------------------- | ---------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `marks`  | string                        | `Northwind, Acme Corp, Globex, Initech, Umbra` | Comma list of wordmark texts. 3 to 7 recommended.                                                                                                   |
+| `tone`   | `muted` \| `ink`              | `muted`                                        | Mark color: `var(--muted)` or `var(--fg)`.                                                                                                          |
+| `cues`   | string                        | `""`                                           | Comma seconds from mount start, one per mark. Missing tail entries extend from the last cue by 0.15s. Empty = authored rhythm (first mark at 0.2s). |
+| `accent` | `green` \| `blue` \| `violet` | `green`                                        | Faint 10% tint mixed into the mark color (green `--brand`, blue `--accent`, violet `--accent-2`). The strip still reads monochrome.                 |
+| `exit`   | `none` \| `fade` \| `up`      | `none`                                         | `none` holds to the last frame (frame roots own transitions). `fade` dissolves the strip over 0.45s; `up` adds a small rise.                        |
+
+## Envelope
+
+Fixed IN and OUT with elastic HOLD only (never timeScale):
+
+- IN = last reveal start + 0.5s fade (about 1.3s for 5 marks on the default rhythm)
+- HOLD = max(0, D - IN - OUT), dead still by design
+- OUT = 0 when `exit` is `none`, else 0.45s
+- If the host duration is shorter than IN + OUT, both compress together (cues included).
+
+## Mounting
+
+Mount-contract sub-composition: load via `data-composition-src`, give the clip
+a wide, short box (a strip band), and the primitive sizes off that box with
+container queries. Consumes contract tokens (`--muted`, `--fg`, `--brand`,
+`--accent`, `--accent-2`, `--bg`, `--font-mono`, `--space-2`, `--space-3`)
+with exact-value fallbacks.
+
+```html
+<div
+  class="clip"
+  data-composition-id="trust-strip"
+  data-composition-src="./components/trust-strip.html"
+  data-variable-values='{"marks":"Northwind, Globex, Umbra","tone":"ink"}'
+  data-start="0"
+  data-duration="3.5"
+  data-track-index="0"
+></div>
+```
diff --git a/docs/public/catalog/components/trust-strip/demo.html b/docs/public/catalog/components/trust-strip/demo.html
new file mode 100644
index 0000000000..d08df13641
--- /dev/null
+++ b/docs/public/catalog/components/trust-strip/demo.html
@@ -0,0 +1,98 @@
+<!doctype html>
+<!--
+  trust-strip demo. Generous wide mount (90% x 50%, centered vertically) on a
+  light editorial backdrop: the five logo marks spread across the frame with
+  real presence instead of being pinched into a narrow band.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>trust-strip Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #f4f6f9);
+      }
+
+      #root {
+        --bg: #f4f6f9;
+        --fg: #14161b;
+        --surface: #ffffff;
+        --border: #dfe4ec;
+        --brand: #1d4ed8;
+        --accent: #0284c7;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 40%, #ffffff 0%, var(--bg, #f4f6f9) 70%);
+      }
+
+      .mount-stage {
+        width: 90%;
+        height: 50%;
+        left: 5%;
+        top: 25%;
+        container-type: size;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="trust-strip-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="3.5"
+      data-fps="30"
+    >
+      <div
+        id="trust-strip-mount"
+        class="mount-stage clip"
+        data-composition-id="trust-strip"
+        data-composition-src="./trust-strip.html"
+        data-variable-values='{"marks":"NORTHWIND,ACME CORP,GLOBEX,INITECH,UMBRA","tone":"muted"}'
+        data-start="0"
+        data-duration="3.5"
+        data-track-index="0"
+        data-width="1728"
+        data-height="540"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["trust-strip-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "trust-strip.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/trust-strip/trust-strip.html b/docs/public/catalog/components/trust-strip/trust-strip.html
new file mode 100644
index 0000000000..56bc00a7a7
--- /dev/null
+++ b/docs/public/catalog/components/trust-strip/trust-strip.html
@@ -0,0 +1,226 @@
+<!doctype html>
+<!--
+  trust-strip: HyperFrames video primitive (proof & stats / trust)
+
+  A monochrome trust row: N text wordmarks set in wide-tracked uppercase mono,
+  a single centered row with wide gaps, no boxes, no borders. Marks fade in
+  with an opacity-only stagger from left to right, then the strip holds dead
+  still. Above five marks the row wraps gracefully to a second centered row
+  when width demands (reading order is preserved).
+
+  Variables:
+    - marks (string, comma list): the wordmark texts, 3 to 7 recommended.
+    - tone (muted | ink, default "muted"): mark color, var(--muted) or var(--fg).
+    - cues (string, comma seconds): per-mark reveal starts relative to mount
+      start. Empty = authored rhythm (first mark at 0.2s, 0.15s gap).
+    - accent (green | blue | violet, default "green"): a faint 10% tint mixed
+      into the mark color so the strip sits in the scene palette; the strip
+      still reads monochrome.
+    - exit (none | fade | up, default "none"): none holds to the last frame
+      (frame roots own transitions); fade dissolves; up dissolves with a rise.
+
+  Envelope, fixed IN and OUT with elastic HOLD only (never timeScale):
+    IN   = last reveal start + 0.5s fade
+    HOLD = max(0, D - IN - OUT), dead still
+    OUT  = 0 when exit is none, else 0.45s
+    If D is shorter than IN + OUT, both compress together (cues included).
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, has no data-width or
+  data-height, and registers one paused timeline under the literal
+  trust-strip key.
+-->
+<html
+  lang="en"
+  data-composition-id="trust-strip"
+  data-composition-duration="3.5"
+  data-composition-variables='[
+    { "id": "marks", "type": "string", "role": "content", "label": "Marks", "description": "Comma-separated wordmark texts (3 to 7 recommended).", "default": "Northwind, Acme Corp, Globex, Initech, Umbra" },
+    { "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Mark color: quiet muted or full-contrast ink.", "default": "muted", "options": [{ "value": "muted", "label": "Muted" }, { "value": "ink", "label": "Ink" }] },
+    { "id": "cues", "type": "string", "role": "timing", "label": "Cues", "description": "Comma-separated reveal starts in seconds from mount start. Empty uses the authored 0.15s stagger.", "default": "" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Faint palette tint mixed into the mark color.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "End-of-clip behavior. None holds to the last frame.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Trust Strip</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="trust-strip" data-duration="3.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            background: var(--bg, transparent);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            pointer-events: none;
+          }
+
+          .ts-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+          }
+
+          .ts-strip {
+            display: flex;
+            flex-wrap: wrap;
+            align-items: baseline;
+            justify-content: center;
+            width: 86cqw;
+            max-width: 86cqw;
+            column-gap: var(--space-3, 4.8cqw);
+            row-gap: var(--space-2, 4.2cqh);
+            will-change: transform, opacity;
+          }
+
+          .ts-mark {
+            /* Monochrome by law: the tone token carries the color; the accent
+               token only tints it 10% so the strip sits in the palette. */
+            color: color-mix(in srgb, var(--ts-tone) 90%, var(--ts-accent));
+            font-size: min(1.9cqw, 6.4cqh);
+            font-weight: 400;
+            line-height: 1;
+            letter-spacing: 0.32em;
+            text-transform: uppercase;
+            white-space: nowrap;
+            will-change: opacity;
+          }
+        </style>
+
+        <div
+          id="trust-strip-clip"
+          class="ts-clip clip"
+          data-start="0"
+          data-duration="3.5"
+          data-track-index="0"
+        >
+          <div class="ts-strip" role="img"></div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var strip = root.querySelector(".ts-strip");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var marks = String(vars.marks == null ? "" : vars.marks)
+              .split(",")
+              .map(function (mark) {
+                return mark.trim();
+              })
+              .filter(Boolean);
+            if (marks.length === 0)
+              marks = ["Northwind", "Acme Corp", "Globex", "Initech", "Umbra"];
+
+            var tone = vars.tone === "ink" ? "ink" : "muted";
+            var toneColors = {
+              muted: "var(--muted, #93939f)",
+              ink: "var(--fg, #f8fafc)",
+            };
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            root.style.setProperty("--ts-tone", toneColors[tone]);
+            root.style.setProperty("--ts-accent", accentColors[accent]);
+            strip.setAttribute("aria-label", marks.join(", "));
+
+            var spans = marks.map(function (mark) {
+              var span = document.createElement("span");
+              span.className = "ts-mark";
+              span.textContent = mark;
+              span.setAttribute("aria-hidden", "true");
+              strip.appendChild(span);
+              return span;
+            });
+
+            var LEAD_BASE = 0.2;
+            var GAP_BASE = 0.15;
+            var FADE_BASE = 0.5;
+            var OUT_BASE = exit === "none" ? 0 : 0.45;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "3.5"));
+
+            // Reveal starts: caller cues win; missing tail entries extend from
+            // the last known start by the authored gap.
+            var cues = String(vars.cues == null ? "" : vars.cues)
+              .split(",")
+              .map(function (cue) {
+                return parseFloat(cue);
+              })
+              .filter(function (cue) {
+                return isFinite(cue) && cue >= 0;
+              });
+            var starts = marks.map(function (mark, index) {
+              if (index < cues.length) return cues[index];
+              if (cues.length > 0)
+                return cues[cues.length - 1] + GAP_BASE * (index - cues.length + 1);
+              return LEAD_BASE + GAP_BASE * index;
+            });
+
+            var IN_BASE = Math.max.apply(null, starts) + FADE_BASE;
+            var totalBase = IN_BASE + OUT_BASE;
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var FADE = FADE_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var OUT_START = duration - OUT;
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: opacity-only stagger, left to right in reading order.
+            spans.forEach(function (span, index) {
+              tl.fromTo(
+                span,
+                { opacity: 0 },
+                { opacity: 1, duration: FADE, ease: "power2.out" },
+                starts[index] * scale,
+              );
+            });
+
+            // HOLD: dead still. Nothing is authored here on purpose.
+
+            // OUT: optional whole-strip departure; frame roots own transitions
+            // by default, so exit "none" holds to the last frame.
+            if (exit === "fade") {
+              tl.to(strip, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "up") {
+              tl.to(strip, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+              tl.to(strip, { y: "-1.6cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["trust-strip"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/type-match-cut/demo.html b/docs/public/catalog/components/type-match-cut/demo.html
new file mode 100644
index 0000000000..d8a8374ad9
--- /dev/null
+++ b/docs/public/catalog/components/type-match-cut/demo.html
@@ -0,0 +1,100 @@
+<!doctype html>
+<!--
+  type-match-cut demo. This standalone composition mounts type-match-cut.html
+  inside a sized host clip. Non-default copy and accent prove both variables
+  flow through the elastic mount.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Type Match Cut Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0b0c0e;
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f7f8fa;
+        --font-display: Inter, system-ui, sans-serif;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 44%, #1b1e24 0%, var(--bg) 72%);
+      }
+
+      .mount-card {
+        width: 80%;
+        height: 72%;
+        left: 10%;
+        top: 14%;
+        container-type: size;
+        overflow: hidden;
+        border: 2px solid rgba(247, 248, 250, 0.14);
+        border-radius: 32px;
+        background: #0b0c0e;
+        box-shadow: 0 52px 130px rgba(0, 0, 0, 0.52);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="type-match-cut-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="type-match-cut-mount"
+        class="mount-card clip"
+        data-composition-id="type-match-cut"
+        data-composition-src="./type-match-cut.html"
+        data-variable-values='{"text":"Ideas become motion","accent":"violet"}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="1536"
+        data-height="778"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      var tl = gsap.timeline({ paused: true });
+      tl.seek(0);
+      window.__timelines = window.__timelines || {};
+      window.__timelines["type-match-cut-demo"] = tl;
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "type-match-cut.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/type-match-cut/type-match-cut.html b/docs/public/catalog/components/type-match-cut/type-match-cut.html
new file mode 100644
index 0000000000..24c0cb3cec
--- /dev/null
+++ b/docs/public/catalog/components/type-match-cut/type-match-cut.html
@@ -0,0 +1,407 @@
+<!doctype html>
+<!--
+  type-match-cut: HyperFrames video primitive
+
+  A headline splits into upper and lower word groups. An incoming editor
+  panel appears in the negative space between them, holds there as a visible
+  geometric match, then grows to fill the frame while the words arc through
+  the top and bottom edges.
+
+  Variables:
+    text: headline copy
+    accent: green, blue, or violet incoming-scene accent
+
+  Envelope, fixed IN and OUT with elastic HOLD:
+    IN_BASE  = 1.05s, words separate and expose the matched panel slot
+    HOLD     = max(0, D - IN - OUT), the slot breathes almost imperceptibly
+    OUT_BASE = 1.15s, the panel takes the frame while both word groups exit
+    If D is shorter than IN_BASE + OUT_BASE, IN and OUT compress together.
+    The timeline is never time-scaled.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, and has no data-width or
+  data-height. One paused timeline registers under the literal type-match-cut
+  key.
+-->
+<html
+  lang="en"
+  data-composition-id="type-match-cut"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "text", "type": "string", "role": "content", "label": "Headline", "description": "Text split around the incoming panel.", "default": "Meet the new editor" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Accent color used by the incoming editor scene.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Type Match Cut</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="type-match-cut" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            background: var(--bg, #0b0c0e);
+            color: var(--fg, #f7f8fa);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .tmc-clip,
+          .tmc-panel,
+          .tmc-copy {
+            position: absolute;
+            inset: 0;
+            width: 100cqw;
+            height: 100cqh;
+          }
+
+          .tmc-clip {
+            overflow: hidden;
+          }
+
+          .tmc-panel {
+            z-index: 1;
+            overflow: hidden;
+            background: linear-gradient(145deg, #f8fafc 0%, #e8edf5 100%);
+            box-shadow: 0 4cqh 12cqh color-mix(in srgb, #000 45%, transparent);
+            transform-origin: 50% 50%;
+            will-change: transform, border-radius;
+          }
+
+          .tmc-editor {
+            width: 100%;
+            height: 100%;
+            display: grid;
+            grid-template-columns: 22cqw 1fr;
+            grid-template-rows: 11cqh 1fr;
+            color: #111827;
+          }
+
+          .tmc-toolbar {
+            grid-column: 1 / -1;
+            display: flex;
+            align-items: center;
+            gap: 1.1cqw;
+            padding: 0 4cqw;
+            border-bottom: 0.16cqmin solid #cbd5e1;
+            background: rgba(255, 255, 255, 0.72);
+          }
+
+          .tmc-mark {
+            width: 2.4cqmin;
+            aspect-ratio: 1;
+            border-radius: 50%;
+            background: var(--tmc-accent, #34d399);
+            box-shadow: 0 0 2cqmin color-mix(in srgb, var(--tmc-accent, #34d399) 46%, transparent);
+          }
+
+          .tmc-title {
+            font-size: 2.4cqmin;
+            font-weight: 800;
+            letter-spacing: -0.03em;
+          }
+
+          .tmc-status {
+            margin-left: auto;
+            padding: 1.1cqh 1.4cqw;
+            border-radius: 999px;
+            background: var(--tmc-accent, #34d399);
+            color: #07110d;
+            font-size: 1.7cqmin;
+            font-weight: 800;
+          }
+
+          .tmc-sidebar {
+            display: flex;
+            flex-direction: column;
+            gap: 2.4cqh;
+            padding: 5cqh 3cqw;
+            border-right: 0.16cqmin solid #cbd5e1;
+            background: #eef2f7;
+          }
+
+          .tmc-nav {
+            height: 1.5cqh;
+            border-radius: 999px;
+            background: #cbd5e1;
+          }
+
+          .tmc-nav:first-child {
+            width: 76%;
+            background: var(--tmc-accent, #34d399);
+          }
+
+          .tmc-nav:nth-child(2) {
+            width: 58%;
+          }
+
+          .tmc-nav:nth-child(3) {
+            width: 82%;
+          }
+
+          .tmc-canvas {
+            display: grid;
+            place-items: center;
+            padding: 7cqh 8cqw;
+            background: #dfe5ee;
+          }
+
+          .tmc-preview {
+            width: 100%;
+            height: 100%;
+            display: grid;
+            place-items: center;
+            border: 0.18cqmin solid #c2cad6;
+            border-radius: 3cqmin;
+            background: radial-gradient(
+              circle at 50% 42%,
+              color-mix(in srgb, var(--tmc-accent, #34d399) 32%, #1f2937) 0%,
+              #111827 68%
+            );
+            box-shadow: 0 3cqh 8cqh rgba(15, 23, 42, 0.2);
+          }
+
+          .tmc-play {
+            width: 12cqmin;
+            aspect-ratio: 1;
+            display: grid;
+            place-items: center;
+            border-radius: 50%;
+            background: var(--tmc-accent, #34d399);
+            color: #07110d;
+            font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+            font-size: 4.2cqmin;
+            font-weight: 900;
+          }
+
+          .tmc-copy {
+            z-index: 2;
+            overflow: hidden;
+            text-shadow: 0 1.4cqh 4.8cqh rgba(0, 0, 0, 0.72);
+          }
+
+          .tmc-half {
+            position: absolute;
+            top: calc(50% - 0.44em);
+            display: block;
+            width: 40cqw;
+            color: var(--fg, #f7f8fa);
+            font-size: var(--tmc-font-size, 10.5cqw);
+            font-weight: 900;
+            line-height: 0.88;
+            letter-spacing: -0.045em;
+            white-space: nowrap;
+            will-change: transform;
+          }
+
+          .tmc-top {
+            right: 52cqw;
+            text-align: right;
+          }
+
+          .tmc-bottom {
+            left: 52cqw;
+            text-align: left;
+          }
+        </style>
+
+        <div
+          id="type-match-cut-clip"
+          class="tmc-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <section class="tmc-panel" aria-label="Incoming editor scene">
+            <div class="tmc-editor">
+              <div class="tmc-toolbar">
+                <span class="tmc-mark" aria-hidden="true"></span>
+                <span class="tmc-title">New editor</span>
+                <span class="tmc-status">Ready</span>
+              </div>
+              <div class="tmc-sidebar" aria-hidden="true">
+                <span class="tmc-nav"></span>
+                <span class="tmc-nav"></span>
+                <span class="tmc-nav"></span>
+              </div>
+              <div class="tmc-canvas">
+                <div class="tmc-preview">
+                  <span class="tmc-play" aria-hidden="true">▶</span>
+                </div>
+              </div>
+            </div>
+          </section>
+
+          <div class="tmc-copy" role="heading" aria-level="1">
+            <span class="tmc-half tmc-top" aria-hidden="true"></span>
+            <span class="tmc-half tmc-bottom" aria-hidden="true"></span>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var panel = root.querySelector(".tmc-panel");
+            var copy = root.querySelector(".tmc-copy");
+            var topWords = root.querySelector(".tmc-top");
+            var bottomWords = root.querySelector(".tmc-bottom");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var text = vars.text == null ? "Meet the new editor" : String(vars.text);
+            var accentName =
+              vars.accent === "blue" || vars.accent === "violet" ? vars.accent : "green";
+            var accents = { green: "#34d399", blue: "#60a5fa", violet: "#a78bfa" };
+            var words = text.trim() === "" ? [""] : text.trim().split(/\s+/);
+            var splitAt = Math.ceil(words.length / 2);
+            var topText = words.slice(0, splitAt).join(" ");
+            var bottomText = words.slice(splitAt).join(" ");
+
+            root.style.setProperty("--tmc-accent", accents[accentName]);
+            copy.setAttribute("aria-label", text);
+            topWords.textContent = topText;
+            bottomWords.textContent = bottomText;
+
+            // Deterministic fit from character count. Layout measurement is
+            // zero while the mounted template is being constructed, so each
+            // half is sized against its authored 40cqw box instead. One em per
+            // character is the conservative ceiling, so even wide glyph runs
+            // remain inside the box.
+            var longestHalf = Math.max(1, topText.length, bottomText.length);
+            var fittedSize = Math.min(10.5, 40 / longestHalf);
+            root.style.setProperty("--tmc-font-size", fittedSize.toFixed(2) + "cqw");
+
+            var IN_BASE = 1.05;
+            var OUT_BASE = 1.15;
+            var SPLIT_AT_BASE = 0.14;
+            var SPLIT_DURATION_BASE = 0.58;
+            var PANEL_AT_BASE = 0.58;
+            var PANEL_DURATION_BASE = 0.47;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var fixedTotal = IN_BASE + OUT_BASE;
+            var phaseScale = duration < fixedTotal ? duration / fixedTotal : 1;
+            var IN = IN_BASE * phaseScale;
+            var OUT = OUT_BASE * phaseScale;
+            var SPLIT_AT = SPLIT_AT_BASE * phaseScale;
+            var SPLIT_DURATION = SPLIT_DURATION_BASE * phaseScale;
+            var PANEL_AT = PANEL_AT_BASE * phaseScale;
+            var PANEL_DURATION = PANEL_DURATION_BASE * phaseScale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var HOLD_START = IN;
+            var OUT_START = IN + HOLD;
+            var ARC_FIRST = OUT * 0.42;
+            var ARC_SECOND = OUT - ARC_FIRST;
+
+            var tl = gsap.timeline({ paused: true });
+
+            tl.set(panel, { scaleX: 0.02, scaleY: 0.02, borderRadius: "12cqmin" }, 0);
+            tl.set(topWords, { x: 0, y: 0 }, 0);
+            tl.set(bottomWords, { x: 0, y: 0 }, 0);
+
+            tl.to(
+              topWords,
+              { y: "-20cqh", duration: SPLIT_DURATION, ease: "power3.out" },
+              SPLIT_AT,
+            );
+            tl.to(
+              bottomWords,
+              { y: "20cqh", duration: SPLIT_DURATION, ease: "power3.out" },
+              SPLIT_AT,
+            );
+            tl.to(
+              panel,
+              {
+                scaleX: 0.46,
+                scaleY: 0.14,
+                borderRadius: "6cqmin",
+                duration: PANEL_DURATION,
+                ease: "power3.out",
+              },
+              PANEL_AT,
+            );
+
+            if (HOLD > 0) {
+              tl.to(
+                panel,
+                {
+                  scaleX: 0.47,
+                  scaleY: 0.145,
+                  duration: HOLD / 2,
+                  ease: "sine.inOut",
+                  yoyo: true,
+                  repeat: 1,
+                },
+                HOLD_START,
+              );
+            }
+
+            tl.to(
+              panel,
+              {
+                scaleX: 1,
+                scaleY: 1,
+                borderRadius: 0,
+                duration: OUT,
+                ease: "power4.out",
+              },
+              OUT_START,
+            );
+
+            // Two authored segments create an arc instead of a straight exit.
+            tl.to(
+              topWords,
+              { x: "3cqw", y: "-42cqh", duration: ARC_FIRST, ease: "power2.in" },
+              OUT_START,
+            );
+            tl.to(
+              topWords,
+              {
+                x: "-5cqw",
+                y: "-125cqh",
+                duration: ARC_SECOND,
+                ease: "power2.in",
+              },
+              OUT_START + ARC_FIRST,
+            );
+            tl.to(
+              bottomWords,
+              { x: "-3cqw", y: "42cqh", duration: ARC_FIRST, ease: "power2.in" },
+              OUT_START,
+            );
+            tl.to(
+              bottomWords,
+              {
+                x: "5cqw",
+                y: "125cqh",
+                duration: ARC_SECOND,
+                ease: "power2.in",
+              },
+              OUT_START + ARC_FIRST,
+            );
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["type-match-cut"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/typed-prompt/README.md b/docs/public/catalog/components/typed-prompt/README.md
new file mode 100644
index 0000000000..85fe7fd649
--- /dev/null
+++ b/docs/public/catalog/components/typed-prompt/README.md
@@ -0,0 +1,38 @@
+# typed-prompt
+
+A prompt line types itself in chunked human cadence behind a deterministic blinking caret, on a token-styled mono surface. Optionally the final word is first mistyped, backspaced, and retyped (correction mode). Product demo family, authored at 4s with an elastic HOLD.
+
+## Mechanic
+
+Every visible frame is read from one lookup table of text-at-time rows, built synchronously (fixed-seed LCG, no `Date.now`, no `Math.random`) before the timeline registers. A single `ease: "none"` driver reads `textAt(time)` from the table, so seeking forward, backward, or repeatedly to the same time always shows the same string; there is no incremental typing state. The caret runs an integer number of sine cycles across exactly the typing window, then is pinned solid for the hold.
+
+## Variables
+
+| Variable       | Type   | Default                           | Notes                                                                                                 |
+| -------------- | ------ | --------------------------------- | ----------------------------------------------------------------------------------------------------- |
+| `text`         | string | `Generate a product launch video` | The prompt that gets typed. The resting text always equals `text`.                                    |
+| `prompt_glyph` | string | `>`                               | Leading glyph. Empty string hides it.                                                                 |
+| `cadence`      | enum   | `human`                           | `uniform` = one character per fixed step; `human` = seeded 1-3 character chunks, varied gaps.         |
+| `caret`        | enum   | `blink`                           | `blink` = integer sine cycles during typing, then solid; `solid` never blinks.                        |
+| `correction`   | string | `""`                              | The mistyped word: typed in place of the final word, backspaced, then the true word retypes.          |
+| `cues`         | string | `""`                              | Comma-separated seconds from mount start; cue N anchors the start of word N. Empty = authored rhythm. |
+| `accent`       | enum   | `green`                           | `green` -> `--brand`, `blue` -> `--accent`, `violet` -> `--accent-2` (glyph + caret).                 |
+| `exit`         | enum   | `none`                            | `none` holds the end frame (frame roots own transitions), `fade`, or `up`.                            |
+
+## Envelope
+
+Panel settles over 0.5s; typing starts at 0.35s and runs at its natural cadence, compressed proportionally only if it would overflow `duration - OUT`. All extra duration becomes HOLD (solid caret, barely-there drift ending in stillness). OUT (0.45s) exists only when `exit` is not `none`. The timeline is never time-scaled.
+
+## Usage
+
+```html
+<div
+  class="clip"
+  data-start="0"
+  data-duration="4"
+  data-composition-src="components/typed-prompt.html"
+  data-composition-variables='{ "text": "Summarize this contract", "correction": "contarct", "accent": "blue" }'
+></div>
+```
+
+The root is elastic (no fixed dimensions) and reads correctly in any host box. Timeline registers under the literal key `typed-prompt`.
diff --git a/docs/public/catalog/components/typed-prompt/demo.html b/docs/public/catalog/components/typed-prompt/demo.html
new file mode 100644
index 0000000000..a8aab95bec
--- /dev/null
+++ b/docs/public/catalog/components/typed-prompt/demo.html
@@ -0,0 +1,102 @@
+<!doctype html>
+<!--
+  typed-prompt demo. Generous centered mount (88% x 70%) on a light editorial
+  backdrop: the prompt card gets real presence in the frame while the human
+  cadence and non-default text prove the variable path.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>typed-prompt Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #f4f6f9);
+      }
+
+      #root {
+        --bg: #f4f6f9;
+        --fg: #14161b;
+        --surface: #ffffff;
+        --border: #dfe4ec;
+        --brand: #1d4ed8;
+        --accent: #0284c7;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 40%, #ffffff 0%, var(--bg, #f4f6f9) 70%);
+      }
+
+      .mount-card {
+        width: 88%;
+        height: 70%;
+        left: 6%;
+        top: 15%;
+        container-type: size;
+        overflow: hidden;
+        border: 1px solid var(--border, #dfe4ec);
+        border-radius: 28px;
+        background: var(--surface, #ffffff);
+        box-shadow: 0 30px 80px rgba(20, 22, 27, 0.1);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="typed-prompt-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="typed-prompt-mount"
+        class="mount-card clip"
+        data-composition-id="typed-prompt"
+        data-composition-src="./typed-prompt.html"
+        data-variable-values='{"text":"Summarize the Q3 revenue report","cadence":"human","accent":"violet"}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="1690"
+        data-height="756"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["typed-prompt-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "typed-prompt.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/typed-prompt/typed-prompt.html b/docs/public/catalog/components/typed-prompt/typed-prompt.html
new file mode 100644
index 0000000000..60f339572f
--- /dev/null
+++ b/docs/public/catalog/components/typed-prompt/typed-prompt.html
@@ -0,0 +1,384 @@
+<!doctype html>
+<!--
+  typed-prompt: HyperFrames video primitive (product demo / typing)
+
+  A prompt line types itself in chunked human cadence behind a deterministic
+  blinking caret. Every visible frame is read from one lookup table of
+  text-at-time rows built synchronously before the timeline registers, so
+  forward seeks, reverse seeks, and repeated seeks to the same time always
+  produce the same string. Nothing is incremental.
+
+  Caret law: a sine phase runs an INTEGER number of cycles across exactly the
+  typing window, then a single set() pins the caret solid for the hold.
+
+  Correction mode: when the `correction` variable is non-empty, that string is
+  typed IN PLACE of the final word first (the "typo"), a beat passes, it is
+  backspaced one character per row, and the true final word of `text` is
+  retyped. The resting text always equals `text`.
+
+  Variables (declared in data-composition-variables below):
+    - text (string): the prompt that gets typed.
+    - prompt_glyph (string, default ">"): leading glyph; empty string hides it.
+    - cadence ("uniform" | "human", default "human"): keystroke rhythm.
+      uniform = one character per fixed step; human = seeded 1-3 char chunks
+      with varied gaps (fixed LCG seed, fully deterministic).
+    - caret ("blink" | "solid", default "blink"): blink runs integer sine
+      cycles during typing then goes solid; solid never blinks.
+    - correction (string, default ""): the mistyped word. Empty disables.
+    - cues (string, default ""): comma-separated seconds relative to mount
+      start; cue N anchors the start of word N. Empty = authored rhythm.
+    - accent (green | blue | violet, default "green"): glyph + caret color.
+    - exit ("none" | "fade" | "up", default "none"): frame roots own
+      transitions; none holds the end frame.
+
+  Envelope, authored 4s, fixed IN/OUT with elastic HOLD only (never
+  gsap.timeScale()): panel settles over 0.5s, typing runs from 0.35s at its
+  natural cadence, compressed proportionally only if it would overflow
+  duration - OUT. HOLD absorbs all extra duration (solid caret, barely-there
+  drift ending in stillness). OUT exists only when exit != none.
+
+  Mount contract: mountable sub-composition; the runtime clones only this
+  <template>. #root is elastic (no data-width/height, container-type: size),
+  styled via #root only, and registers one paused timeline under the literal
+  "typed-prompt" key.
+-->
+<html
+  lang="en"
+  data-composition-id="typed-prompt"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "text", "type": "string", "role": "content", "label": "Text", "description": "The prompt that gets typed.", "default": "Generate a product launch video" },
+    { "id": "prompt_glyph", "type": "string", "role": "style", "label": "Prompt glyph", "description": "Leading glyph before the typed line. Empty string hides it.", "default": ">" },
+    { "id": "cadence", "type": "enum", "role": "timing", "label": "Cadence", "description": "Keystroke rhythm: uniform fixed steps or seeded human chunks.", "default": "human", "options": [{ "value": "uniform", "label": "Uniform" }, { "value": "human", "label": "Human" }] },
+    { "id": "caret", "type": "enum", "role": "style", "label": "Caret", "description": "Blink runs integer sine cycles during typing then goes solid.", "default": "blink", "options": [{ "value": "blink", "label": "Blink" }, { "value": "solid", "label": "Solid" }] },
+    { "id": "correction", "type": "string", "role": "content", "label": "Correction", "description": "Mistyped word typed in place of the final word, then backspaced and corrected. Empty disables.", "default": "" },
+    { "id": "cues", "type": "string", "role": "timing", "label": "Cues", "description": "Comma-separated seconds relative to mount start; cue N anchors the start of word N. Empty uses the authored rhythm.", "default": "" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Color of the prompt glyph and caret.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Outgoing transition. Frame roots own transitions; none holds the end frame.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Typed Prompt</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="typed-prompt" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            pointer-events: none;
+          }
+
+          .tp-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .tp-stage {
+            width: 82cqw;
+            max-width: 82cqw;
+            will-change: transform, opacity;
+          }
+
+          .tp-shell {
+            display: flex;
+            align-items: flex-start;
+            gap: var(--space-1, 1.6cqw);
+            min-height: 18cqh;
+            padding: var(--space-2, 3.4cqh) var(--space-2, 3cqw);
+            border: 0.16cqmin solid color-mix(in srgb, var(--border, #475569) 72%, transparent);
+            border-radius: var(--radius, 2.4cqmin);
+            background: color-mix(in srgb, var(--surface, #0b1016) 94%, var(--tp-accent));
+            box-shadow: 0 3cqh 9cqh color-mix(in srgb, var(--bg, #000000) 38%, transparent);
+          }
+
+          .tp-glyph {
+            flex: 0 0 auto;
+            color: var(--tp-accent);
+            font-size: var(--tp-font-size);
+            font-weight: 600;
+            line-height: 1.45;
+          }
+
+          .tp-line {
+            flex: 1 1 auto;
+            min-width: 0;
+            color: var(--fg, #f8fafc);
+            font-size: var(--tp-font-size);
+            font-weight: 500;
+            line-height: 1.45;
+            overflow-wrap: anywhere;
+            white-space: pre-wrap;
+          }
+
+          .tp-caret {
+            display: inline-block;
+            width: 0.55ch;
+            height: 1.05em;
+            margin-left: 0.08ch;
+            background: var(--tp-accent);
+            vertical-align: text-bottom;
+            will-change: opacity;
+          }
+        </style>
+
+        <div
+          id="typed-prompt-clip"
+          class="tp-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="tp-stage" role="img">
+            <div class="tp-shell">
+              <span class="tp-glyph" aria-hidden="true"></span>
+              <span class="tp-line" aria-hidden="true"
+                ><span class="tp-text"></span><span class="tp-caret"></span
+              ></span>
+            </div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".tp-stage");
+            var glyphElement = root.querySelector(".tp-glyph");
+            var textElement = root.querySelector(".tp-text");
+            var caretElement = root.querySelector(".tp-caret");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var text = vars.text == null ? "Generate a product launch video" : String(vars.text);
+            var promptGlyph = vars.prompt_glyph == null ? ">" : String(vars.prompt_glyph);
+            var cadence = vars.cadence === "uniform" ? "uniform" : "human";
+            var caretMode = vars.caret === "solid" ? "solid" : "blink";
+            var correction = vars.correction == null ? "" : String(vars.correction).trim();
+            var exitMode = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            root.style.setProperty("--tp-accent", accentColors[accent]);
+            glyphElement.textContent = promptGlyph;
+            if (promptGlyph === "") glyphElement.style.display = "none";
+            stage.setAttribute("aria-label", text);
+
+            var cueList = String(vars.cues == null ? "" : vars.cues)
+              .split(",")
+              .map(function (token) {
+                return parseFloat(token);
+              })
+              .filter(function (value) {
+                return isFinite(value) && value >= 0;
+              })
+              .sort(function (a, b) {
+                return a - b;
+              });
+
+            var ENTER = 0.5;
+            var TYPE_START = 0.35;
+            var OUT_BASE = 0.45;
+            var STILLNESS = 0.3;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var OUT = exitMode === "none" ? 0 : Math.min(OUT_BASE, duration * 0.2);
+
+            // Fixed-seed LCG: the only randomness source, consumed in one
+            // deterministic order during this synchronous build.
+            var lcgState = 0x7f4a7c15;
+            function rnd() {
+              lcgState = (Math.imul(1664525, lcgState) + 1013904223) >>> 0;
+              return lcgState / 4294967296;
+            }
+            function chunksOf(word) {
+              if (cadence === "uniform") return Array.from(word);
+              var out = [];
+              var i = 0;
+              while (i < word.length) {
+                var n = 1 + Math.floor(rnd() * 3);
+                out.push(word.slice(i, i + n));
+                i += n;
+              }
+              return out;
+            }
+            function chunkGap(chunk) {
+              if (cadence === "uniform") return chunk.length * 0.055;
+              return chunk.length * (0.05 + rnd() * 0.04);
+            }
+
+            // The complete text-at-time table. Built exactly once; the
+            // timeline only ever reads it, so seeks in any direction resolve
+            // the same string for the same time.
+            var rows = [{ t: 0, x: "" }];
+            var words = text.split(/\s+/).filter(function (word) {
+              return word.length > 0;
+            });
+            var hasCorrection = correction !== "" && words.length > 0;
+            (function buildRows() {
+              var t = TYPE_START;
+              var acc = "";
+              words.forEach(function (word, wordIndex) {
+                var isLast = wordIndex === words.length - 1;
+                var typedWord = hasCorrection && isLast ? correction : word;
+                if (wordIndex > 0) acc += " ";
+                if (cueList[wordIndex] != null) {
+                  t = Math.max(t, cueList[wordIndex]);
+                } else if (wordIndex > 0) {
+                  t += cadence === "uniform" ? 0.11 : 0.1 + rnd() * 0.1;
+                }
+                chunksOf(typedWord).forEach(function (chunk) {
+                  t += chunkGap(chunk);
+                  acc += chunk;
+                  rows.push({ t: t, x: acc });
+                });
+                if (hasCorrection && isLast) {
+                  t += 0.4; // the beat of realizing the typo
+                  for (var back = 1; back <= correction.length; back += 1) {
+                    t += 0.055;
+                    rows.push({ t: t, x: acc.slice(0, acc.length - back) });
+                  }
+                  acc = acc.slice(0, acc.length - correction.length);
+                  t += 0.22;
+                  chunksOf(word).forEach(function (chunk) {
+                    t += chunkGap(chunk);
+                    acc += chunk;
+                    rows.push({ t: t, x: acc });
+                  });
+                }
+              });
+            })();
+
+            // Compress typing proportionally only if it would overflow the
+            // window before OUT; extra duration becomes HOLD, never timeScale.
+            var naturalEnd = rows[rows.length - 1].t;
+            var maxEnd = Math.max(TYPE_START + 0.2, duration - OUT - STILLNESS);
+            if (naturalEnd > maxEnd) {
+              var factor = (maxEnd - TYPE_START) / (naturalEnd - TYPE_START);
+              rows.forEach(function (row) {
+                if (row.t > TYPE_START) row.t = TYPE_START + (row.t - TYPE_START) * factor;
+              });
+            }
+            var typeEnd = Math.max(rows[rows.length - 1].t, TYPE_START + 0.01);
+
+            // 1ms tolerance: GSAP snaps a tween's end value below the row
+            // table's accumulated float times, and 1ms is far under one frame.
+            function textAt(time) {
+              for (var i = rows.length - 1; i >= 0; i -= 1) {
+                if (time >= rows[i].t - 0.001) return rows[i].x;
+              }
+              return "";
+            }
+
+            // +2: leave room for the trailing caret so it never wraps alone.
+            var maxLength =
+              rows.reduce(function (best, row) {
+                return Math.max(best, row.x.length);
+              }, 1) + 2;
+            var fittedCqw = Math.max(2.2, Math.min(4.2, 118 / maxLength));
+            root.style.setProperty("--tp-font-size", "min(" + fittedCqw.toFixed(3) + "cqw, 9cqh)");
+
+            gsap.set(stage, { opacity: 0, y: "2.6cqh" });
+            textElement.textContent = "";
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: one panel settle, then the table drives every visible frame.
+            tl.to(stage, { opacity: 1, duration: ENTER, ease: "power2.out" }, 0);
+            tl.to(stage, { y: "0cqh", duration: ENTER, ease: "power3.out" }, 0);
+
+            var typeDriver = { t: 0 };
+            tl.to(
+              typeDriver,
+              {
+                t: typeEnd,
+                duration: typeEnd,
+                ease: "none",
+                onUpdate: function () {
+                  textElement.textContent = textAt(typeDriver.t);
+                },
+              },
+              0,
+            );
+
+            // Caret: integer sine cycles across exactly the typing window,
+            // then a single pin to solid. Solid mode never blinks.
+            if (caretMode === "blink") {
+              var cycles = Math.max(1, Math.round(typeEnd / 0.9));
+              var blink = { p: 0 };
+              tl.to(
+                blink,
+                {
+                  p: Math.PI * 2 * cycles,
+                  duration: typeEnd,
+                  ease: "none",
+                  onUpdate: function () {
+                    // >= 0 keeps phase 0 identical to the caret's unrendered
+                    // initial state (opacity 1) for forward vs backward seeks.
+                    caretElement.style.opacity = Math.sin(blink.p) >= 0 ? "1" : "0";
+                  },
+                },
+                0,
+              );
+              tl.set(caretElement, { opacity: 1 }, typeEnd);
+            }
+
+            // HOLD: barely-there drift ending at exactly zero, then authored
+            // stillness before any departure.
+            var OUT_START = duration - OUT;
+            var holdSpan = OUT_START - typeEnd;
+            if (holdSpan > 0.9) {
+              var driftHalf = (holdSpan - STILLNESS) / 2;
+              tl.to(stage, { y: "-0.45cqh", duration: driftHalf, ease: "sine.inOut" }, typeEnd);
+              tl.to(
+                stage,
+                { y: "0cqh", duration: driftHalf, ease: "sine.inOut" },
+                typeEnd + driftHalf,
+              );
+            }
+
+            // OUT: only when the exit variable asks for one.
+            if (exitMode !== "none") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+              if (exitMode === "up") {
+                tl.to(stage, { y: "-4cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              }
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["typed-prompt"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/typewriter/__hf-variables-preview.html b/docs/public/catalog/components/typewriter/__hf-variables-preview.html
new file mode 100644
index 0000000000..e8b40e65a5
--- /dev/null
+++ b/docs/public/catalog/components/typewriter/__hf-variables-preview.html
@@ -0,0 +1,75 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Typewriter variables preview</title>
+    <style>
+      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #f7f7f8; }
+      #hf-vars-root { position: relative; width: 1920px; height: 1080px; }
+      #hf-vars-mount { position: absolute; inset: 0; display: grid; place-items: center; }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  </head>
+  <body>
+    <div id="hf-vars-root" data-composition-id="typewriter-variables-preview" data-start="0" data-width="1920" data-height="1080" data-duration="5" data-fps="30">
+      <div id="hf-vars-mount" class="clip" data-composition-id="typewriter" data-composition-src="./typewriter.html" data-start="0" data-duration="5" data-track-index="0" data-width="1920" data-height="1080"></div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["typewriter-variables-preview"] = gsap.timeline({ paused: true });
+    </script>
+    <script>
+      (function () {
+        var mount = document.getElementById("hf-vars-mount");
+        // The mount is filled asynchronously, and the demo script selects
+        // what it fills it with, so it cannot run before then.
+        var observer = new MutationObserver(build);
+        observer.observe(mount, { childList: true, subtree: true });
+        build();
+        function build() {
+          if (!mount.firstElementChild) return;
+          observer.disconnect();
+
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-typewriter",
+          { "--hf-type-progress": 0 },
+          { "--hf-type-progress": 1, duration: 1.2, ease: "steps(28)" },
+          startTime,
+        );
+        tl.to(
+          ".hf-remocn-typewriter i",
+          { "--hf-caret-opacity": 0.2, duration: 0.24, repeat: 7, yoyo: true, ease: "none" },
+          startTime + 0.2,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["typewriter-demo"] = tl;
+          var child = window.__timelines["typewriter-demo"];
+          delete window.__timelines["typewriter-demo"];
+          if (!child || typeof child.paused !== "function") return;
+          child.paused(false);
+          window.__timelines["typewriter-variables-preview"].add(child, 0);
+        }
+      })();
+    </script>
+<script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "typewriter.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/typewriter/demo.html b/docs/public/catalog/components/typewriter/demo.html
new file mode 100644
index 0000000000..8599a7b24b
--- /dev/null
+++ b/docs/public/catalog/components/typewriter/demo.html
@@ -0,0 +1,115 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Typewriter - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        min-width: 900px;
+        min-height: 500px;
+        padding: 64px;
+        /* ponytail: scale-up only; GSAP targets .hf-remocn-typewriter with CSS vars, not transforms */
+        transform: scale(2.8);
+      }
+      .hf-remocn-typewriter {
+        color: #18181b;
+        font-family: Inter, system-ui, sans-serif;
+        font-weight: 900;
+        letter-spacing: -0.04em;
+      }
+      .hf-remocn-typewriter {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        font:
+          800 52px/1 ui-monospace,
+          SFMono-Regular,
+          Menlo,
+          monospace;
+      }
+      .hf-remocn-typewriter span {
+        display: inline-block;
+        max-width: calc(var(--hf-type-progress, 1) * 100%);
+        overflow: hidden;
+        white-space: nowrap;
+      }
+      .hf-remocn-typewriter i {
+        width: 3px;
+        height: 52px;
+        border-radius: 999px;
+        background: #18181b;
+        opacity: var(--hf-caret-opacity, 1);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="typewriter-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-typewriter"><span>hyperframes add typewriter</span><i></i></div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-typewriter",
+          { "--hf-type-progress": 0 },
+          { "--hf-type-progress": 1, duration: 1.2, ease: "steps(28)" },
+          startTime,
+        );
+        tl.to(
+          ".hf-remocn-typewriter i",
+          { "--hf-caret-opacity": 0.2, duration: 0.24, repeat: 7, yoyo: true, ease: "none" },
+          startTime + 0.2,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["typewriter-demo"] = tl;
+      </script>
+    </div>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "typewriter.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/typewriter/typewriter.html b/docs/public/catalog/components/typewriter/typewriter.html
new file mode 100644
index 0000000000..eff0115b1f
--- /dev/null
+++ b/docs/public/catalog/components/typewriter/typewriter.html
@@ -0,0 +1,121 @@
+<!--
+  Typewriter - remocn typography primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Drive the timeline
+  integration from a paused GSAP timeline so renders remain deterministic.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result either into the
+  markup or into a custom property the CSS above consumes. The timeline recipe
+  below is untouched by them: it keeps driving one type progress and one caret
+  opacity, and these decide what is typed, in what colour, and behind which
+  caret.
+
+    - text (string, default hyperframes add typewriter): the line that types
+      itself out. It is written into the existing span, so the reveal keeps
+      running character by character over whatever is set. Anything that is
+      not a non-empty string keeps the shipped line.
+    - tone (ink | paper | accent, default ink): colour of both the text and
+      the caret. ink is near-black for light frames, paper near-white for dark
+      ones, accent rides --brand.
+    - caret (line | block | none, default line): caret shape. line is the
+      shipped 3px rule, block is a 22px slab in the style of a terminal
+      cursor, none removes the caret entirely and closes the gap after the
+      text.
+
+  On every default the result is identical to the original: a near-black
+  monospace line typing itself out behind a 3px caret.
+-->
+
+<div
+  class="hf-remocn-typewriter"
+  data-composition-variables='[
+    { "id": "text", "type": "string", "role": "content", "label": "Text", "description": "Line that types itself out character by character.", "default": "hyperframes add typewriter" },
+    { "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Colour of the text and the caret: ink for light frames, paper for dark ones, accent rides --brand.", "default": "ink", "options": [{ "value": "ink", "label": "Ink" }, { "value": "paper", "label": "Paper" }, { "value": "accent", "label": "Accent" }] },
+    { "id": "caret", "type": "enum", "role": "style", "label": "Caret", "description": "Caret shape: a thin rule, a terminal-style block, or no caret at all.", "default": "line", "options": [{ "value": "line", "label": "Line" }, { "value": "block", "label": "Block" }, { "value": "none", "label": "None" }] }
+  ]'
+>
+  <span>hyperframes add typewriter</span><i></i>
+</div>
+
+<style>
+  .hf-remocn-typewriter {
+    color: var(--hf-type-color, #18181b);
+    font-family: Inter, system-ui, sans-serif;
+    font-weight: 900;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-typewriter {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    font:
+      800 42px/1 ui-monospace,
+      SFMono-Regular,
+      Menlo,
+      monospace;
+  }
+  .hf-remocn-typewriter span {
+    display: inline-block;
+    max-width: calc(var(--hf-type-progress, 1) * 100%);
+    overflow: hidden;
+    white-space: nowrap;
+  }
+  .hf-remocn-typewriter i {
+    display: var(--hf-caret-display, block);
+    width: var(--hf-caret-width, 3px);
+    height: 42px;
+    border-radius: 999px;
+    background: var(--hf-type-color, #18181b);
+    opacity: var(--hf-caret-opacity, 1);
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    var tones = {
+      ink: "#18181b",
+      paper: "#fafafa",
+      accent: "var(--brand, #34d399)",
+    };
+    var carets = {
+      line: { width: "3px", display: "block" },
+      block: { width: "22px", display: "block" },
+      none: { width: "3px", display: "none" },
+    };
+
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var tone = tones[pick(tones, vars.tone, "ink")];
+    var caret = carets[pick(carets, vars.caret, "line")];
+    var text = typeof vars.text === "string" && vars.text !== "" ? vars.text : null;
+
+    var roots = document.querySelectorAll(".hf-remocn-typewriter");
+    for (var i = 0; i < roots.length; i += 1) {
+      var root = roots[i];
+      root.style.setProperty("--hf-type-color", tone);
+      root.style.setProperty("--hf-caret-width", caret.width);
+      root.style.setProperty("--hf-caret-display", caret.display);
+
+      var line = root.querySelector("span");
+      if (text !== null && line) {
+        line.textContent = text;
+      }
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-typewriter', { '--hf-type-progress': 0 }, { '--hf-type-progress': 1, duration: 1.2, ease: 'steps(28)' }, startTime); tl.to('.hf-remocn-typewriter i', { '--hf-caret-opacity': 0.2, duration: 0.24, repeat: 7, yoyo: true, ease: 'none' }, startTime + 0.2);
+-->
diff --git a/docs/public/catalog/components/ui-focus-zoom/README.md b/docs/public/catalog/components/ui-focus-zoom/README.md
new file mode 100644
index 0000000000..a0497da021
--- /dev/null
+++ b/docs/public/catalog/components/ui-focus-zoom/README.md
@@ -0,0 +1,78 @@
+# ui-focus-zoom
+
+A full app surface establishes with one settle, then the camera zooms and pans to an anchored region on its cue and holds the zoomed state. An optional focus halo blooms softly at the anchor as the camera arrives. The camera-servo law applies: all camera motion is ONE world wrapper transform, and the micro-drift is built from integer sine cycles that end at exactly zero before the authored stillness, so the hold is dead still.
+
+- 4.5s authored, elastic HOLD (the envelope never time-scales).
+- Timeline registered at `window.__timelines["ui-focus-zoom"]`.
+- Elastic root: no `data-width`/`data-height`, sized by the host clip, `cqmin` units.
+
+## Variables
+
+| Variable   | Type   | Default | Notes                                                                                                                            |
+| ---------- | ------ | ------- | -------------------------------------------------------------------------------------------------------------------------------- |
+| `anchor_x` | number | `64`    | Focus anchor, percent from the left edge of the surface (0 to 100).                                                              |
+| `anchor_y` | number | `36`    | Focus anchor, percent from the top edge of the surface (0 to 100).                                                               |
+| `zoom`     | number | `1.6`   | Camera scale at the focused state (1 to 3). At `1` the camera cannot pan.                                                        |
+| `zoom_at`  | number | `1.4`   | Seconds from mount start when the camera departs. Clamped inside the hold so the move never fights the entrance or the exit.     |
+| `halo`     | enum   | `show`  | `show` blooms a soft accent glow at the anchor as the camera arrives; `hide` removes it.                                         |
+| `accent`   | enum   | `green` | `green` rides `--brand`, `blue` rides `--accent`, `violet` rides `--accent-2`. Colors the halo and the skeleton accent elements. |
+| `exit`     | enum   | `none`  | `none` holds the final frame (frame roots own transitions), `fade`, or `up`.                                                     |
+
+## The surface slot
+
+The app surface is a slot. Callers supply content by placing an inert `<template>` element anywhere in the **host page** (typically next to the mount clip). Templates never render on their own, and the runtime clears the host clip's children on mount, so the slot deliberately lives at document level:
+
+```html
+<template data-slot="ui-focus-zoom-screen"> ...full app surface... </template>
+```
+
+Slot content can be an `<img>`, a `<video>`, or arbitrary HTML. Direct `img`/`video` children of the surface are stretched to `object-fit: cover`. When no slot exists, the primitive renders a token-styled skeleton app (header bar, sidebar, content cards; hairline borders, surface mixes, one accent element, no branding).
+
+Notes:
+
+- Slot lookup is by the fixed name above, so two slotted instances on one page share the same slot content. Give multiple instances distinct content by mounting them from different host frames.
+- A `<video>` in the slot is not seek-synced by the framework (framework-owned media playback applies to clips, not slot children). Prefer a still image or HTML for deterministic renders.
+- Aim `anchor_x`/`anchor_y` at the region of your artwork the story lands on; the camera centers it as closely as the edge clamp allows.
+
+## The camera
+
+The camera lives on one world wrapper as `translate(x, y) scale(S)`. Translate percentages resolve against the world's own box, so no pixel measurement is needed and the primitive stays fully elastic to its host. The pan is clamped so the scaled world always covers the viewport: with an extreme edge anchor or a low `zoom`, the camera centers the anchor as closely as it can without revealing background. At `zoom: 1` there is no pan at all (nothing to zoom into).
+
+## Worked examples
+
+Mount host with a skeleton surface (no slot):
+
+```html
+<div
+  class="clip"
+  data-composition-id="ui-focus-zoom"
+  data-composition-src="./components/ui-focus-zoom.html"
+  data-variable-values='{"anchor_x":72,"anchor_y":30,"zoom":1.8,"zoom_at":1.6,"accent":"blue"}'
+  data-start="0"
+  data-duration="4.5"
+  data-track-index="0"
+  style="position:absolute; inset:0; container-type:size;"
+></div>
+```
+
+### Zoom into a product screenshot
+
+```html
+<template data-slot="ui-focus-zoom-screen">
+  <img src="./assets/dashboard.png" alt="" />
+</template>
+```
+
+Set `anchor_x`/`anchor_y` to the feature's position in the artwork (percent of the image after cover-fit) and `zoom_at` to the narration beat that names it.
+
+### Quiet establish, late push
+
+Mount with `{"zoom_at":2.6,"zoom":1.5,"halo":"hide"}` for a long readable establish and a restrained late push with no halo.
+
+## Motion envelope
+
+- IN 0.9s: one settle (rise from 4.5cqh + scale 0.965 to 1 + fade, power ease-out).
+- Camera 1.1s at `zoom_at` (clamped): one servo move to the anchor, power2.inOut.
+- Halo (optional): 0.75s soft bloom starting halfway through the camera move.
+- HOLD: elastic; micro-drift from integer sine cycles (2 and 3 full cycles) ends at exactly zero, then 0.35s authored stillness.
+- OUT 0.5s only when `exit` is `fade` or `up`; the default `none` holds to the last frame.
diff --git a/docs/public/catalog/components/ui-focus-zoom/demo.html b/docs/public/catalog/components/ui-focus-zoom/demo.html
new file mode 100644
index 0000000000..58334a983d
--- /dev/null
+++ b/docs/public/catalog/components/ui-focus-zoom/demo.html
@@ -0,0 +1,107 @@
+<!doctype html>
+<!--
+  ui-focus-zoom demo. This standalone composition mounts the primitive
+  through data-composition-src. Non-default anchor, zoom, cue, and accent
+  values prove the variable path while the primitive remains elastic to its
+  host.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>ui-focus-zoom Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #0b0c0e);
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --surface: #14171c;
+        --border: #343a46;
+        --brand: #71f5a7;
+        --accent: #c5a3ff;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(
+          ellipse at 50% 44%,
+          var(--bg, #171a20) 0%,
+          var(--bg, #0b0c0e) 72%
+        );
+      }
+
+      .mount-card {
+        width: 72%;
+        height: 64%;
+        left: 14%;
+        top: 18%;
+        container-type: size;
+        overflow: hidden;
+        border: 1px solid color-mix(in srgb, var(--border, #94a3b8) 20%, transparent);
+        border-radius: 30px;
+        background: color-mix(in srgb, var(--surface, #101318) 72%, transparent);
+        box-shadow: 0 40px 100px color-mix(in srgb, var(--bg, #000000) 48%, transparent);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="ui-focus-zoom-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4.5"
+      data-fps="30"
+    >
+      <div
+        id="ui-focus-zoom-mount"
+        class="mount-card clip"
+        data-composition-id="ui-focus-zoom"
+        data-composition-src="./ui-focus-zoom.html"
+        data-variable-values='{"anchor_x":30,"anchor_y":60,"zoom":2,"zoom_at":1.2,"accent":"blue"}'
+        data-start="0"
+        data-duration="4.5"
+        data-track-index="0"
+        data-width="1382"
+        data-height="691"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["ui-focus-zoom-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "ui-focus-zoom.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/ui-focus-zoom/ui-focus-zoom.html b/docs/public/catalog/components/ui-focus-zoom/ui-focus-zoom.html
new file mode 100644
index 0000000000..e69320d406
--- /dev/null
+++ b/docs/public/catalog/components/ui-focus-zoom/ui-focus-zoom.html
@@ -0,0 +1,564 @@
+<!doctype html>
+<!--
+  ui-focus-zoom -- HyperFrames video primitive (product demo / camera)
+
+  A full app surface establishes with one settle, then the camera zooms and
+  pans to an anchored region on its cue and holds the zoomed state. An
+  optional focus halo blooms softly at the anchor as the camera arrives.
+
+  Camera-servo law: the camera lives on ONE world wrapper transform,
+  translate(x, y) scale(S). A world point offset o from center lands at
+  S * o + T, so T = -offset * S. Offsets are percentages of the world's own
+  box (the world fills the viewport), so no pixel measurement is needed and
+  the primitive stays fully elastic. Micro-drift is built from integer sine
+  cycles (2 and 3 full cycles) that end at exactly zero before the authored
+  stillness, so the hold is dead still and every seek is reproducible.
+
+  The pan is clamped so the scaled world always covers the viewport:
+  |T| <= 50 * (S - 1) minus the drift amplitude. Extreme anchors near an
+  edge center as close as the clamp allows without revealing background.
+
+  The surface is a SLOT. Callers supply content by placing an inert template
+  anywhere in the HOST page (templates never render, and the runtime wipes
+  the host clip's own children on mount, so the slot lives at document
+  level):
+
+    <template data-slot="ui-focus-zoom-screen"> ... </template>
+
+  Slot content may be an <img>, a muted <video>, or arbitrary HTML; direct
+  img/video children are stretched to cover the surface. When no slot
+  exists, the primitive renders a token-styled skeleton app (header bar,
+  sidebar, content cards; hairline borders, surface mixes, one accent
+  element, no branding).
+
+  Variables (declared in data-composition-variables below):
+    - anchor_x (number percent, default 64): focus anchor from the left edge.
+    - anchor_y (number percent, default 36): focus anchor from the top edge.
+    - zoom (number, default 1.6): camera scale at the focused state (1 to 3).
+    - zoom_at (number seconds, default 1.4): camera departure cue from mount
+      start; clamped inside [IN, D - OUT - move] so the move never fights
+      the entrance or the exit.
+    - halo ("show" | "hide", default "show"): soft accent bloom at the anchor.
+    - accent ("green" | "blue" | "violet", default "green"): green rides
+      --brand, blue rides --accent, violet rides --accent-2.
+    - exit ("none" | "fade" | "up", default "none"): frame roots own
+      transitions; the default holds the final frame to the last pixel.
+
+  Envelope, fixed IN and OUT with elastic HOLD only (never timeScale):
+    IN_BASE   = 0.90s  one settle: rise + soft scale + fade
+    ZOOM_BASE = 1.10s  the camera move, power2.inOut servo ease
+    HOLD      = elastic; micro-drift ends at zero, then authored stillness
+    OUT_BASE  = 0.50s  only when exit != none
+    If D < IN_BASE + ZOOM_BASE + OUT_BASE, the phases compress together.
+
+  Mount contract: the runtime clones only this template. #root fills the
+  host box (no data-width/data-height, container-type: size, cqmin units),
+  is styled via #root only, and registers one paused timeline under the
+  LITERAL "ui-focus-zoom" key. Camera and drift tween plain objects and
+  repaint through one applyCamera writer, so any seek order lands the same
+  transform.
+-->
+<html
+  lang="en"
+  data-composition-id="ui-focus-zoom"
+  data-composition-duration="4.5"
+  data-composition-variables='[
+    { "id": "anchor_x", "type": "number", "role": "content", "label": "Anchor X", "description": "Focus anchor, percent from the left edge of the surface.", "default": 64, "min": 0, "max": 100, "step": 1, "unit": "%" },
+    { "id": "anchor_y", "type": "number", "role": "content", "label": "Anchor Y", "description": "Focus anchor, percent from the top edge of the surface.", "default": 36, "min": 0, "max": 100, "step": 1, "unit": "%" },
+    { "id": "zoom", "type": "number", "role": "content", "label": "Zoom", "description": "Camera scale at the focused state.", "default": 1.6, "min": 1, "max": 3, "step": 0.05 },
+    { "id": "zoom_at", "type": "number", "role": "timing", "label": "Zoom at", "description": "Seconds from mount start when the camera departs for the anchor. Clamped inside the hold.", "default": 1.4, "min": 0, "max": 30, "step": 0.1, "unit": "s" },
+    { "id": "halo", "type": "enum", "role": "style", "label": "Halo", "description": "Soft accent bloom at the anchor as the camera arrives.", "default": "show", "options": [{ "value": "show", "label": "Show" }, { "value": "hide", "label": "Hide" }] },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Token the halo and skeleton accent elements ride.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "style", "label": "Exit", "description": "Optional departure. None holds the final frame.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>UI Focus Zoom</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="ui-focus-zoom" data-duration="4.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, ui-sans-serif, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .ufz-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .ufz-stage {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            will-change: transform, opacity;
+          }
+
+          /* the fixed frame: the camera moves the world inside this window */
+          .ufz-frame {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            border: 0.16cqmin solid color-mix(in srgb, var(--border, #475569) 85%, transparent);
+            border-radius: calc(var(--radius, 2cqmin) * 1.2);
+            background: color-mix(in srgb, var(--surface, #0b1016) 96%, var(--ufz-accent));
+            box-shadow: 0 3cqh 9cqh color-mix(in srgb, var(--bg, #000000) 45%, transparent);
+          }
+
+          /* ONE world wrapper: all camera motion is this element's transform */
+          .ufz-world {
+            position: absolute;
+            inset: 0;
+            will-change: transform;
+          }
+
+          .ufz-surface {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            background: color-mix(in srgb, var(--surface, #0b1016) 88%, var(--bg, #05070c));
+          }
+
+          .ufz-surface > img,
+          .ufz-surface > video {
+            display: block;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+          }
+
+          .ufz-halo {
+            position: absolute;
+            z-index: 2;
+            width: 30cqmin;
+            height: 30cqmin;
+            border-radius: 50%;
+            background: radial-gradient(
+              circle,
+              color-mix(in srgb, var(--ufz-accent) 26%, transparent) 0%,
+              color-mix(in srgb, var(--ufz-accent) 12%, transparent) 42%,
+              transparent 70%
+            );
+            will-change: transform, opacity;
+          }
+
+          /* default skeleton surface: pure token furniture, no branding */
+          .ufz-skel {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            grid-template-rows: auto minmax(0, 1fr);
+          }
+
+          .ufz-skel-top {
+            display: flex;
+            align-items: center;
+            gap: var(--space-1, 1.6cqmin);
+            padding: 1.8cqmin 2.6cqmin;
+            border-bottom: 0.14cqmin solid
+              color-mix(in srgb, var(--border, #475569) 55%, transparent);
+          }
+
+          .ufz-skel-mark {
+            width: 2.6cqmin;
+            height: 2.6cqmin;
+            border-radius: 0.8cqmin;
+            background: color-mix(in srgb, var(--ufz-accent) 74%, var(--surface, #0b1016));
+          }
+
+          .ufz-skel-line {
+            height: 1.25cqmin;
+            border-radius: 999px;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 13%, transparent);
+          }
+
+          .ufz-skel-top .ufz-skel-line:nth-of-type(1) {
+            width: 9cqmin;
+          }
+
+          .ufz-skel-top .ufz-skel-line:nth-of-type(2) {
+            width: 6.5cqmin;
+          }
+
+          .ufz-skel-spring {
+            flex: 1;
+          }
+
+          .ufz-skel-chip {
+            width: 8.5cqmin;
+            height: 2.9cqmin;
+            border: 0.14cqmin solid color-mix(in srgb, var(--ufz-accent) 55%, transparent);
+            border-radius: 999px;
+            background: color-mix(in srgb, var(--ufz-accent) 28%, transparent);
+          }
+
+          .ufz-skel-avatar {
+            width: 2.8cqmin;
+            height: 2.8cqmin;
+            border-radius: 50%;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 18%, transparent);
+          }
+
+          .ufz-skel-body {
+            display: grid;
+            grid-template-columns: 22% minmax(0, 1fr);
+            min-height: 0;
+          }
+
+          .ufz-skel-side {
+            display: flex;
+            flex-direction: column;
+            gap: 2cqmin;
+            padding: 2.6cqmin;
+            border-right: 0.14cqmin solid
+              color-mix(in srgb, var(--border, #475569) 55%, transparent);
+          }
+
+          .ufz-skel-side .ufz-skel-line:nth-child(1) {
+            width: 78%;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 22%, transparent);
+          }
+
+          .ufz-skel-side .ufz-skel-line:nth-child(2) {
+            width: 56%;
+          }
+
+          .ufz-skel-side .ufz-skel-line:nth-child(3) {
+            width: 66%;
+          }
+
+          .ufz-skel-side .ufz-skel-line:nth-child(4) {
+            width: 44%;
+          }
+
+          .ufz-skel-side .ufz-skel-line:nth-child(5) {
+            width: 60%;
+          }
+
+          .ufz-skel-main {
+            display: flex;
+            flex-direction: column;
+            gap: var(--space-2, 1.8cqmin);
+            min-height: 0;
+            padding: var(--space-3, 2.8cqmin);
+          }
+
+          .ufz-skel-heading {
+            width: 34%;
+            height: 2.5cqmin;
+            border-radius: 999px;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 21%, transparent);
+          }
+
+          .ufz-skel-sub {
+            width: 52%;
+            height: 1.25cqmin;
+            border-radius: 999px;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 9%, transparent);
+          }
+
+          .ufz-skel-cards {
+            display: grid;
+            flex: 1;
+            grid-template-columns: repeat(3, minmax(0, 1fr));
+            gap: 2.1cqmin;
+            min-height: 0;
+            margin-top: 0.8cqmin;
+          }
+
+          .ufz-skel-card {
+            display: flex;
+            flex-direction: column;
+            gap: 1.5cqmin;
+            min-height: 0;
+            padding: 2.1cqmin;
+            border: 0.14cqmin solid color-mix(in srgb, var(--border, #475569) 60%, transparent);
+            border-radius: var(--radius, 1.6cqmin);
+            background: color-mix(in srgb, var(--bg, #05070c) 30%, transparent);
+          }
+
+          .ufz-skel-card .ufz-skel-line {
+            width: 55%;
+          }
+
+          .ufz-skel-block {
+            flex: 1;
+            min-height: 3cqmin;
+            border-radius: calc(var(--radius, 1.6cqmin) * 0.6);
+            background: color-mix(in srgb, var(--fg, #f8fafc) 7%, transparent);
+          }
+
+          .ufz-skel-card:nth-child(2) .ufz-skel-block {
+            background: color-mix(in srgb, var(--ufz-accent) 17%, transparent);
+          }
+        </style>
+
+        <div
+          id="ui-focus-zoom-clip"
+          class="ufz-clip clip"
+          data-start="0"
+          data-duration="4.5"
+          data-track-index="0"
+        >
+          <div class="ufz-stage">
+            <div class="ufz-frame" role="img" aria-label="App surface with a camera focus zoom">
+              <div class="ufz-world">
+                <div class="ufz-surface">
+                  <div class="ufz-skel" aria-hidden="true">
+                    <div class="ufz-skel-top">
+                      <span class="ufz-skel-mark"></span>
+                      <span class="ufz-skel-line"></span>
+                      <span class="ufz-skel-line"></span>
+                      <span class="ufz-skel-spring"></span>
+                      <span class="ufz-skel-chip"></span>
+                      <span class="ufz-skel-avatar"></span>
+                    </div>
+                    <div class="ufz-skel-body">
+                      <div class="ufz-skel-side">
+                        <span class="ufz-skel-line"></span>
+                        <span class="ufz-skel-line"></span>
+                        <span class="ufz-skel-line"></span>
+                        <span class="ufz-skel-line"></span>
+                        <span class="ufz-skel-line"></span>
+                      </div>
+                      <div class="ufz-skel-main">
+                        <span class="ufz-skel-heading"></span>
+                        <span class="ufz-skel-sub"></span>
+                        <div class="ufz-skel-cards">
+                          <div class="ufz-skel-card">
+                            <span class="ufz-skel-line"></span>
+                            <span class="ufz-skel-block"></span>
+                          </div>
+                          <div class="ufz-skel-card">
+                            <span class="ufz-skel-line"></span>
+                            <span class="ufz-skel-block"></span>
+                          </div>
+                          <div class="ufz-skel-card">
+                            <span class="ufz-skel-line"></span>
+                            <span class="ufz-skel-block"></span>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="ufz-halo" aria-hidden="true"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".ufz-stage");
+            var world = root.querySelector(".ufz-world");
+            var surface = root.querySelector(".ufz-surface");
+            var halo = root.querySelector(".ufz-halo");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            function num(value, fallback, min, max) {
+              var parsed = parseFloat(value);
+              if (!isFinite(parsed)) parsed = fallback;
+              return Math.min(max, Math.max(min, parsed));
+            }
+
+            var anchorX = num(vars.anchor_x, 64, 0, 100);
+            var anchorY = num(vars.anchor_y, 36, 0, 100);
+            var zoom = num(vars.zoom, 1.6, 1, 3);
+            var zoomAt = num(vars.zoom_at, 1.4, 0, 30);
+            var haloOn = vars.halo !== "hide";
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exitMode = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            root.style.setProperty("--ufz-accent", accentColors[accent]);
+
+            // SLOT. Caller templates live at HOST DOCUMENT level (the mount
+            // wipes host-clip children, and templates never render). The
+            // scoped `document` proxy filters queries to this composition's
+            // subtree, so the lookup deliberately goes through ownerDocument.
+            var hostDoc = root.ownerDocument;
+            var slotTemplate = null;
+            try {
+              slotTemplate = hostDoc.querySelector('template[data-slot="ui-focus-zoom-screen"]');
+            } catch (error) {
+              slotTemplate = null;
+            }
+            if (slotTemplate) {
+              surface.querySelector(".ufz-skel").remove();
+              surface.appendChild(hostDoc.importNode(slotTemplate.content, true));
+            }
+
+            /* ===== Camera (camera-servo law): translate(x, y) scale(S) on the
+               ONE world wrapper. Translate percentages resolve against the
+               world's own box, which fills the viewport, so a world point at
+               offset o percent from center lands at S * o + T and the target
+               transform is T = -(anchor - 50) * S, no measurement needed.
+               The pan is clamped so the scaled world always covers the
+               viewport (|T| <= 50 * (S - 1) minus the drift amplitude). ===== */
+            var DRIFT_X = 0.16;
+            var DRIFT_Y = 0.11;
+            var panMax = Math.max(0, 50 * (zoom - 1) - Math.max(DRIFT_X, DRIFT_Y) - 0.2);
+            var targetX = Math.min(panMax, Math.max(-panMax, -(anchorX - 50) * zoom));
+            var targetY = Math.min(panMax, Math.max(-panMax, -(anchorY - 50) * zoom));
+
+            var cam = { s: 1, x: 0, y: 0 };
+            var drift = { p: 0, dx: 0, dy: 0 };
+            function applyCamera() {
+              world.style.transform =
+                "translate(" +
+                (cam.x + drift.dx) +
+                "%, " +
+                (cam.y + drift.dy) +
+                "%) scale(" +
+                cam.s +
+                ")";
+            }
+            applyCamera();
+
+            // Halo pinned to the anchor in world space; it rides the camera.
+            // Explicit both-endpoint state BEFORE the timeline exists: the
+            // bloom fromTo sits mid-timeline, so without this set a seek that
+            // lands before the cue would show the halo unstyled.
+            halo.style.left = anchorX + "%";
+            halo.style.top = anchorY + "%";
+            if (!haloOn) halo.remove();
+            else
+              gsap.set(halo, {
+                opacity: 0,
+                scale: 0.55,
+                xPercent: -50,
+                yPercent: -50,
+                transformOrigin: "50% 50%",
+              });
+
+            // Envelope: fixed IN/ZOOM/OUT, elastic HOLD, never time-scaled.
+            var IN_BASE = 0.9;
+            var ZOOM_BASE = 1.1;
+            var OUT_BASE = exitMode === "none" ? 0 : 0.5;
+            var STILLNESS = 0.35;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4.5"));
+            var totalBase = IN_BASE + ZOOM_BASE + OUT_BASE;
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var ZOOM = ZOOM_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var OUT_START = duration - OUT;
+
+            // The camera departs on its cue, clamped so the move never fights
+            // the entrance or the exit.
+            var zoomStart = Math.min(Math.max(zoomAt, IN), Math.max(IN, OUT_START - ZOOM - 0.05));
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: one settle. Rise + soft scale + fade, smooth ease-out.
+            tl.fromTo(
+              stage,
+              { opacity: 0, y: "4.5cqh", scale: 0.965, transformOrigin: "50% 60%" },
+              { opacity: 1, y: "0cqh", scale: 1, duration: IN, ease: "power3.out" },
+              0,
+            );
+
+            // Camera servo: one move to the anchored region, then hold zoomed.
+            tl.to(
+              cam,
+              {
+                s: zoom,
+                x: targetX,
+                y: targetY,
+                duration: ZOOM,
+                ease: "power2.inOut",
+                onUpdate: applyCamera,
+              },
+              zoomStart,
+            );
+
+            // Micro-drift: 2 and 3 INTEGER sine cycles that end at exactly
+            // zero before the authored stillness, so the final hold is dead
+            // still and every seek reproduces the same frame.
+            var driftDuration = Math.max(0, OUT_START - STILLNESS);
+            if (driftDuration >= 1.2) {
+              tl.to(
+                drift,
+                {
+                  p: Math.PI * 2 * 2,
+                  duration: driftDuration,
+                  ease: "none",
+                  onUpdate: function () {
+                    drift.dx = Math.sin(drift.p) * DRIFT_X;
+                    drift.dy = Math.sin(drift.p * 1.5) * DRIFT_Y;
+                    applyCamera();
+                  },
+                },
+                0,
+              );
+            }
+
+            // Halo: soft bloom at the anchor as the camera arrives, then hold.
+            if (haloOn) {
+              tl.fromTo(
+                halo,
+                { opacity: 0, scale: 0.55, xPercent: -50, yPercent: -50 },
+                {
+                  opacity: 0.85,
+                  scale: 1,
+                  xPercent: -50,
+                  yPercent: -50,
+                  duration: 0.75 * scale,
+                  ease: "power2.out",
+                },
+                zoomStart + ZOOM * 0.5,
+              );
+            }
+
+            // OUT: only when exit != none; the default holds the last frame.
+            if (exitMode !== "none") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+              if (exitMode === "up") {
+                tl.to(stage, { y: "-4cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              }
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["ui-focus-zoom"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/variable-axis-type/demo.html b/docs/public/catalog/components/variable-axis-type/demo.html
new file mode 100644
index 0000000000..de3bc833e2
--- /dev/null
+++ b/docs/public/catalog/components/variable-axis-type/demo.html
@@ -0,0 +1,98 @@
+<!doctype html>
+<!--
+  variable-axis-type -- mount-contract demo. The width-axis override makes
+  glyph advances change across the requested 0.1s, 0.5s, and 0.9s snapshots,
+  while the primitive's fixed nowrap box proves the authored line stays stable.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Variable Axis Type - Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #05070d;
+      }
+
+      #root {
+        --bg: #0b1120;
+        --fg: #f8fafc;
+        --surface: #111a2c;
+        --border: rgba(148, 163, 184, 0.28);
+        --font-display: "Roboto Flex", sans-serif;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 45%, #18243d 0%, #05070d 72%);
+      }
+
+      .mount-card {
+        width: 70%;
+        height: 44%;
+        left: 15%;
+        top: 28%;
+        overflow: hidden;
+        border: 1px solid var(--border);
+        border-radius: 32px;
+        box-shadow: 0 44px 100px rgba(0, 0, 0, 0.45);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="variable-axis-type-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="1.6"
+      data-fps="30"
+    >
+      <div
+        id="variable-axis-type-mount"
+        class="mount-card clip"
+        data-composition-id="variable-axis-type"
+        data-composition-src="./variable-axis-type.html"
+        data-variable-values='{"text":"IMPACT","axis":"wdth","fromValue":55,"toValue":145}'
+        data-start="0"
+        data-duration="1.6"
+        data-track-index="0"
+        data-width="1344"
+        data-height="475"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["variable-axis-type-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "variable-axis-type.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/variable-axis-type/variable-axis-type.html b/docs/public/catalog/components/variable-axis-type/variable-axis-type.html
new file mode 100644
index 0000000000..4d1cd68ba9
--- /dev/null
+++ b/docs/public/catalog/components/variable-axis-type/variable-axis-type.html
@@ -0,0 +1,192 @@
+<!doctype html>
+<!--
+  variable-axis-type -- HyperFrames video primitive (typography / burst / emphasize)
+
+  Concept: one headline gains emphasis by morphing a single variable-font axis.
+  The glyphs change shape while the text element itself stays fixed.
+
+  Compiled-from evidence: hyperframes-research-type-svg.md, VariableAxisType.
+  The research identifies variable axes as deterministic numeric seek handles and
+  requires a complete, stable axis list, a font-ready gate, and midpoint checks.
+
+  Use when: a word or short headline needs a decisive emphasis beat without a
+  position, opacity, or scale animation.
+
+  Variables:
+    - text (string, default "IMPACT"): headline copy.
+    - axis ("wght" | "wdth", default "wght"): axis that performs the beat.
+    - fromValue (number, default 200): starting coordinate on the chosen axis.
+    - toValue (number, default 900): ending coordinate on the chosen axis.
+
+  Envelope: IN = up to 1.4s for the axis morph; HOLD = any remaining duration;
+  OUT = 0s. Short hosts compress IN directly. Never use gsap.timeScale().
+
+  Sync point: axis-land at 1.4s into IN, scaled proportionally when the host
+  duration is shorter. It is never placed in the elastic HOLD.
+
+  Sound: none. The changing glyph mass is the entire emphasis mechanic.
+
+  Mount contract: this is a template-wrapped sub-composition. The root has no
+  data-width or data-height, fills its host with inset:0, and registers one
+  paused GSAP timeline under the hardcoded id "variable-axis-type".
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "text", "type": "string", "role": "content", "label": "Text", "description": "Word or short headline to emphasize.", "default": "IMPACT" },
+    { "id": "axis", "type": "enum", "role": "motion", "label": "Axis", "description": "Variable-font axis used for the emphasis morph.", "default": "wght", "options": [{ "value": "wght", "label": "Weight" }, { "value": "wdth", "label": "Width" }] },
+    { "id": "fromValue", "type": "number", "role": "motion", "label": "From value", "description": "Starting coordinate on the selected font axis.", "default": 200, "min": 25, "max": 1000, "step": 1 },
+    { "id": "toValue", "type": "number", "role": "motion", "label": "To value", "description": "Ending coordinate on the selected font axis.", "default": 900, "min": 25, "max": 1000, "step": 1 }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Variable Axis Type</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="variable-axis-type" data-duration="1.6" data-fps="30">
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wdth,wght@8..144,25..151,100..1000&amp;display=block"
+          rel="stylesheet"
+        />
+
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            background: var(--bg, #0b1120);
+            color: var(--fg, #f8fafc);
+          }
+
+          .vat-clip {
+            width: 100%;
+            height: 100%;
+            display: grid;
+            place-items: center;
+          }
+
+          /* INVARIANT: width-axis changes may alter glyph advances, so the
+             authored line lives in a fixed box and can never wrap mid-tween. */
+          .vat-lock {
+            width: 92cqw;
+            height: 58cqh;
+            display: grid;
+            place-items: center;
+            overflow: visible;
+          }
+
+          /* EDIT ZONE: font size and tracking are the only composition-level
+             typography controls. Axis endpoints remain owned by variables. */
+          .vat-headline {
+            display: block;
+            width: 100%;
+            white-space: nowrap;
+            text-align: center;
+            color: var(--fg, #f8fafc);
+            font-family: "Roboto Flex", var(--font-display, sans-serif);
+            font-size: 19cqw;
+            font-weight: 400;
+            font-stretch: 100%;
+            font-optical-sizing: none;
+            font-synthesis: none;
+            line-height: 0.9;
+            letter-spacing: -0.045em;
+          }
+        </style>
+
+        <div
+          id="variable-axis-type-clip"
+          class="vat-clip clip"
+          data-start="0"
+          data-duration="1.6"
+          data-track-index="0"
+        >
+          <div class="vat-lock">
+            <div class="vat-headline">IMPACT</div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var headline = root.querySelector(".vat-headline");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var text = vars.text == null ? "IMPACT" : String(vars.text);
+            var axis = vars.axis === "wdth" ? "wdth" : "wght";
+            var minimum = axis === "wdth" ? 25 : 100;
+            var maximum = axis === "wdth" ? 151 : 1000;
+            var fromNumber = Number(vars.fromValue);
+            var toNumber = Number(vars.toValue);
+            var fromValue = Number.isFinite(fromNumber) ? fromNumber : 200;
+            var toValue = Number.isFinite(toNumber) ? toNumber : 900;
+            fromValue = Math.max(minimum, Math.min(maximum, fromValue));
+            toValue = Math.max(minimum, Math.min(maximum, toValue));
+
+            headline.textContent = text;
+
+            // Both endpoints list the same complete axis set in the same order.
+            // Omitting even an unchanged axis can silently disable interpolation.
+            var fromSettings =
+              axis === "wdth"
+                ? '"wght" 700, "wdth" ' + fromValue + ', "opsz" 96'
+                : '"wght" ' + fromValue + ', "wdth" 100, "opsz" 96';
+            var toSettings =
+              axis === "wdth"
+                ? '"wght" 700, "wdth" ' + toValue + ', "opsz" 96'
+                : '"wght" ' + toValue + ', "wdth" 100, "opsz" 96';
+
+            // RETIME RANGE: the morph is the fixed IN phase. Any time after it
+            // is an elastic still HOLD, which preserves the landed emphasis.
+            var IN_BASE = 1.4;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "1.6"));
+            var IN = Math.min(IN_BASE, duration);
+
+            // Font readiness owns timeline registration. This prevents fallback
+            // glyph metrics from leaking into any captured or midpoint frame.
+            document.fonts
+              .load('700 64px "Roboto Flex"', text)
+              .then(function () {
+                return document.fonts.ready;
+              })
+              .then(function () {
+                if (!document.fonts.check('700 64px "Roboto Flex"', text)) {
+                  throw new Error("Roboto Flex failed to load");
+                }
+
+                var tl = gsap.timeline({ paused: true });
+                tl.fromTo(
+                  headline,
+                  { fontVariationSettings: fromSettings },
+                  { fontVariationSettings: toSettings, duration: IN, ease: "expo.out" },
+                  0,
+                );
+                tl.seek(0);
+
+                window.__timelines = window.__timelines || {};
+                window.__timelines["variable-axis-type"] = tl;
+              });
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/variable-font-flex/README.md b/docs/public/catalog/components/variable-font-flex/README.md
new file mode 100644
index 0000000000..95dabfce46
--- /dev/null
+++ b/docs/public/catalog/components/variable-font-flex/README.md
@@ -0,0 +1,48 @@
+# variable-font-flex
+
+Wave M experiment (M5). A word lands while its variable-font axes flex: each character rises from hairline-condensed to black-wide with a per-character stagger and a small carve-in overshoot, then settles. The word's font-size eases inversely to the mean axis progress (optical compensation), so the letterforms gain mass while the word's box barely grows.
+
+3.5s authored, elastic HOLD, exit `none` by default.
+
+## Font source (pinned)
+
+Roboto Flex Variable via the Fontsource CDN build: `@fontsource-variable/roboto-flex@5.2.8`, latin `standard` subset, one woff2 carrying `wght` 100..1000 and `wdth` 25%..151%:
+
+```
+https://cdn.jsdelivr.net/npm/@fontsource-variable/roboto-flex@5.2.8/files/roboto-flex-latin-standard-normal.woff2
+```
+
+Inter var was considered per the spec but Inter has no `wdth` axis; the width mode needs a real one, so Roboto Flex carries both. The pinned font IS the mechanic: this unit deliberately does not ride `--font-display`, because a theme font without matching axes would kill the effect. The landing weight (840) is the animated mechanic, not static register styling.
+
+## Variables
+
+| id        | type   | default | notes                                                                                          |
+| --------- | ------ | ------- | ---------------------------------------------------------------------------------------------- |
+| `text`    | string | `FLEX`  | The word whose axes flex.                                                                      |
+| `axis`    | enum   | `both`  | `weight` (wght 120 to 840, wdth held 100), `width` (wdth 40 to 128, wght held 620), or `both`. |
+| `stagger` | number | `0.06`  | Seconds between per-character flex starts, clamped 0 to 0.25.                                  |
+| `accent`  | enum   | `green` | Word color: green rides `--brand`, blue rides `--accent`, violet rides `--accent-2`.           |
+| `exit`    | enum   | `none`  | `none` holds until the cut; `fade` departs opacity-only; `up` rises out.                       |
+
+## Mount
+
+```html
+<div
+  class="clip"
+  data-composition-id="variable-font-flex"
+  data-composition-src="./variable-font-flex.html"
+  data-variable-values='{"text":"ELASTIC","axis":"width","accent":"blue"}'
+  data-start="0"
+  data-duration="3.5"
+  data-track-index="0"
+></div>
+```
+
+Elastic root: no `data-width`/`data-height`; it fills whatever box the host clip gives it. Timeline registers under the literal `variable-font-flex` key.
+
+## Notes
+
+- Number proxy, never the string: no tween ever touches `font-variation-settings`. One inert anchor tween spans the authored duration; on every update a painter recomputes each character's axis NUMBERS as a pure function of `tl.time()` and composes the `"wght" W, "wdth" D` string from them, clamped to the font's real ranges (the carve ease overshoots ~6% past target before settling).
+- Optical compensation: word-level `font-size = base * (1 - COMP * meanProgress)` where COMP is 0.16 for `both`, 0.12 for `width`, 0.08 for `weight`. Mass grows, the box holds.
+- Seek-safe: painter writes are idempotent and depend on timeline time alone; eventful seeks (`suppressEvents=false`, the engine's render path) land identical frames in any order and either direction. No `Math.random`, no wall clock.
+- The base size fits the FINAL wide-black state (capped by `cqh` for short words on wide hosts); compensation only ever shrinks below it, so nothing clips mid-flex.
diff --git a/docs/public/catalog/components/variable-font-flex/demo.html b/docs/public/catalog/components/variable-font-flex/demo.html
new file mode 100644
index 0000000000..358034c1c6
--- /dev/null
+++ b/docs/public/catalog/components/variable-font-flex/demo.html
@@ -0,0 +1,101 @@
+<!doctype html>
+<!--
+  variable-font-flex demo. FULL-BLEED light mount: the primitive fills the
+  whole 1920x1080 frame on a light token block. Non-default text, axis,
+  stagger, and accent values prove the variable path.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Variable Font Flex Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #eef0f3);
+      }
+
+      #root {
+        --bg: #eef0f3;
+        --fg: #14161b;
+        --muted: #5b6472;
+        --surface: #ffffff;
+        --border: #d3d8e0;
+        --brand: #3f3f46;
+        --accent: #3f3f46;
+        --accent-2: #3f3f46;
+        --font-display: "Inter", system-ui, sans-serif;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 42%, #f7f8fa 0%, var(--bg, #eef0f3) 72%);
+      }
+
+      .mount-bleed {
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        container-type: size;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="variable-font-flex-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="3.5"
+      data-fps="30"
+    >
+      <div
+        id="variable-font-flex-mount"
+        class="mount-bleed clip"
+        data-composition-id="variable-font-flex"
+        data-composition-src="./variable-font-flex.html"
+        data-variable-values='{"text":"ELASTIC","axis":"width","stagger":0.09,"accent":"blue"}'
+        data-start="0"
+        data-duration="3.5"
+        data-track-index="0"
+        data-width="1920"
+        data-height="1080"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["variable-font-flex-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "variable-font-flex.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/variable-font-flex/variable-font-flex.html b/docs/public/catalog/components/variable-font-flex/variable-font-flex.html
new file mode 100644
index 0000000000..53185d9ce0
--- /dev/null
+++ b/docs/public/catalog/components/variable-font-flex/variable-font-flex.html
@@ -0,0 +1,304 @@
+<!doctype html>
+<!--
+  variable-font-flex: HyperFrames video primitive (type / Wave M experiment M5)
+
+  A word lands while its variable-font axes flex: each character rises from
+  hairline-condensed to black-wide (weight 120 to 840, width 40 to 128) with
+  a per-character stagger and a small carve-in overshoot, then settles. The
+  word's font-size eases INVERSELY to the mean axis progress (optical
+  compensation), so the letterforms gain mass while the word's box barely
+  grows: ink swells, layout holds.
+
+  Font: Roboto Flex Variable, pinned via the Fontsource CDN build
+  (@fontsource-variable/roboto-flex@5.2.8, latin "standard" subset:
+  wght 100..1000 and wdth 25%..151% in one woff2). Inter var was considered
+  per the spec but Inter carries NO wdth axis, and this unit's width mode
+  needs a real one; Roboto Flex has both. The @font-face below pins the
+  exact file. The pinned font IS the mechanic, so this unit deliberately
+  does not ride --font-display: a theme font without matching axes would
+  kill the effect. The landing weight (840) is the animated mechanic, not
+  static register styling.
+
+  Variables (declared in data-composition-variables below):
+    - text (string, default "FLEX"): the word.
+    - axis ("weight" | "width" | "both", default "both"): which axes flex.
+      weight holds wdth at 100; width holds wght at 620.
+    - stagger (number seconds, default 0.06, clamped 0 to 0.25): per-char
+      offset between axis flex starts.
+    - accent ("green" | "blue" | "violet", default "green"): green rides
+      --brand, blue rides --accent, violet rides --accent-2.
+    - exit ("none" | "fade" | "up", default "none").
+
+  Envelope, fixed IN and OUT with elastic HOLD only (never timeScale):
+    IN_BASE  = 0.12 lead + (chars - 1) * stagger + 1.15 flex + 0.15 margin
+    HOLD     = max(0, D - IN - OUT), truly still
+    OUT_BASE = 0.45s only when exit != none
+    If D < IN_BASE + OUT_BASE the whole envelope compresses together.
+
+  Determinism and seek-safety: NO tween ever touches the
+  font-variation-settings string. One inert anchor tween spans [0, D]; on
+  every update a painter recomputes each character's axis numbers as a pure
+  function of tl.time() (a number proxy per char) and composes the
+  '"wght" W, "wdth" D' string from those numbers, plus the word-level
+  compensated font-size. Writes are idempotent; eventful seeks
+  (suppressEvents=false) land identical frames in any order and direction.
+
+  Mount contract: the runtime clones only this template. #root fills the
+  host box (no data-width/data-height, container-type: size, cqmin units),
+  is styled via #root only, and registers one paused timeline under the
+  LITERAL "variable-font-flex" key.
+-->
+<html
+  lang="en"
+  data-composition-id="variable-font-flex"
+  data-composition-duration="3.5"
+  data-composition-variables='[
+    { "id": "text", "type": "string", "role": "content", "label": "Text", "description": "The word whose variable-font axes flex.", "default": "FLEX" },
+    { "id": "axis", "type": "enum", "role": "style", "label": "Axis", "description": "Which variable-font axes animate: weight, width, or both.", "default": "both", "options": [{ "value": "weight", "label": "Weight" }, { "value": "width", "label": "Width" }, { "value": "both", "label": "Both" }] },
+    { "id": "stagger", "type": "number", "role": "timing", "label": "Stagger", "description": "Seconds between per-character flex starts, clamped 0 to 0.25.", "default": 0.06 },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Word color: green rides --brand, blue rides --accent, violet rides --accent-2.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the carved word holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Variable Font Flex</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="variable-font-flex" data-duration="3.5" data-fps="30">
+        <style>
+          /* Pinned variable font: Fontsource build of Roboto Flex, latin
+             standard subset, wght 100..1000 + wdth 25%..151% in one file.
+             @fontsource-variable/roboto-flex@5.2.8 on jsdelivr. */
+          @font-face {
+            font-family: "Roboto Flex Variable";
+            font-style: normal;
+            font-display: block;
+            font-weight: 100 1000;
+            font-stretch: 25% 151%;
+            src: url(https://cdn.jsdelivr.net/npm/@fontsource-variable/roboto-flex@5.2.8/files/roboto-flex-latin-standard-normal.woff2)
+              format("woff2-variations");
+          }
+
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: "Roboto Flex Variable", system-ui, sans-serif;
+            pointer-events: none;
+          }
+
+          .vff-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .vff-stage {
+            display: block;
+            max-width: 94cqw;
+            will-change: transform, opacity;
+          }
+
+          .vff-word {
+            display: flex;
+            align-items: baseline;
+            justify-content: center;
+            color: var(--vff-accent);
+            line-height: 1;
+            white-space: pre;
+          }
+
+          .vff-char {
+            position: relative;
+            display: inline-block;
+            white-space: pre;
+            /* No will-change and no transform on chars: per-char compositor
+               layer promotion makes glyph antialiasing depend on seek
+               history (paint-level nondeterminism); the rise rides
+               relative top instead. */
+          }
+        </style>
+
+        <div
+          id="variable-font-flex-clip"
+          class="vff-clip clip"
+          data-start="0"
+          data-duration="3.5"
+          data-track-index="0"
+        >
+          <div class="vff-stage" role="img">
+            <div class="vff-word" aria-hidden="true"></div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".vff-stage");
+            var word = root.querySelector(".vff-word");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var text = vars.text == null || vars.text === "" ? "FLEX" : String(vars.text);
+            var axis = vars.axis === "weight" || vars.axis === "width" ? vars.axis : "both";
+            var staggerRaw = parseFloat(vars.stagger);
+            var stagger = isFinite(staggerRaw) ? Math.min(0.25, Math.max(0, staggerRaw)) : 0.06;
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #52525b)",
+              blue: "var(--accent, #52525b)",
+              violet: "var(--accent-2, #52525b)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            root.style.setProperty("--vff-accent", accentColors[accent]);
+            stage.setAttribute("aria-label", text);
+
+            // Axis endpoints. Non-animated axes hold a fixed value so the
+            // composed string is always complete and orderable.
+            var WGHT_FROM = axis === "width" ? 620 : 120;
+            var WGHT_TO = axis === "width" ? 620 : 840;
+            var WDTH_FROM = axis === "weight" ? 100 : 40;
+            var WDTH_TO = axis === "weight" ? 100 : 128;
+            // Optical compensation strength per mode: how much of the mass
+            // gain the font-size gives back so the box barely grows.
+            var COMP = axis === "both" ? 0.16 : axis === "width" ? 0.12 : 0.08;
+
+            // Build one span per character; spaces stay in flow (white-space:
+            // pre) but never animate.
+            var characters = Array.from(text);
+            var hostDoc = root.ownerDocument;
+            var chars = [];
+            var fragment = hostDoc.createDocumentFragment();
+            for (var i = 0; i < characters.length; i += 1) {
+              var span = hostDoc.createElement("span");
+              span.className = "vff-char";
+              span.textContent = characters[i];
+              fragment.appendChild(span);
+              if (!/\s/.test(characters[i])) chars.push({ el: span, index: i });
+            }
+            word.appendChild(fragment);
+
+            // Fit for the FINAL (wide, black) state; compensation only ever
+            // shrinks below this. cqw base capped by cqh so short words on
+            // wide hosts stay inside the frame.
+            var fitted = Math.min(21, 118 / Math.max(3, characters.length));
+            var BASE_SIZE = "min(" + fitted.toFixed(3) + "cqw, 30cqh)";
+            root.style.setProperty("--vff-size", BASE_SIZE);
+            word.style.fontSize = "var(--vff-size)";
+
+            // Envelope: fixed IN/OUT, elastic HOLD, never time-scaled.
+            var LEAD = 0.12;
+            var FLEX = 1.15;
+            var MARGIN = 0.15;
+            var IN_BASE = LEAD + Math.max(0, chars.length - 1) * stagger + FLEX + MARGIN;
+            var OUT_BASE = exit === "none" ? 0 : 0.45;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "3.5"));
+            var totalBase = Math.max(0.001, IN_BASE + OUT_BASE);
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var lead = LEAD * scale;
+            var flex = FLEX * scale;
+            var staggerEff = stagger * scale;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var OUT_START = IN + HOLD;
+
+            function clamp01(v) {
+              return v < 0 ? 0 : v > 1 ? 1 : v;
+            }
+            // Carve ease: overshoots ~6% past the target, then settles. The
+            // painter clamps composed axis values to the font's real ranges.
+            function carve(u) {
+              var c1 = 0.9;
+              var c3 = c1 + 1;
+              var x = u - 1;
+              return 1 + c3 * x * x * x + c1 * x * x;
+            }
+            function clampAxis(v, lo, hi) {
+              return v < lo ? lo : v > hi ? hi : v;
+            }
+
+            // Pure per-update painter: every character's axis NUMBERS are a
+            // function of tl.time() alone; the font-variation-settings
+            // string is composed from those numbers (the number proxy; the
+            // string itself is never tweened). The word-level font-size
+            // eases inversely to the mean settled progress: optical
+            // compensation, mass grows while the box holds.
+            function applyTime(timeSeconds) {
+              var settledSum = 0;
+              for (var c = 0; c < chars.length; c += 1) {
+                var start = lead + c * staggerEff;
+                var u = clamp01(flex > 0 ? (timeSeconds - start) / flex : 1);
+                var e = u <= 0 ? 0 : u >= 1 ? 1 : carve(u);
+                var settled = e > 1 ? 1 : e;
+                settledSum += settled;
+                var wght = clampAxis(WGHT_FROM + (WGHT_TO - WGHT_FROM) * e, 100, 1000);
+                var wdth = clampAxis(WDTH_FROM + (WDTH_TO - WDTH_FROM) * e, 25, 151);
+                var el = chars[c].el;
+                el.style.fontVariationSettings =
+                  '"wght" ' + wght.toFixed(1) + ', "wdth" ' + wdth.toFixed(2);
+                var oIn = clamp01(flex > 0 ? (timeSeconds - start) / (flex * 0.22) : 1);
+                el.style.opacity = (oIn * oIn * (3 - 2 * oIn)).toFixed(4);
+                el.style.top = ((1 - settled) * 0.14).toFixed(4) + "em";
+              }
+              var mean = chars.length > 0 ? settledSum / chars.length : 1;
+              word.style.fontSize = "calc(var(--vff-size) * " + (1 - COMP * mean).toFixed(4) + ")";
+            }
+
+            gsap.set(stage, { opacity: 1, y: "0cqh" });
+
+            var tl = gsap.timeline({
+              paused: true,
+              onUpdate: function () {
+                applyTime(tl.time());
+              },
+            });
+
+            // Anchor tween: an inert plain-object tween spanning [0, D] so
+            // onUpdate fires for every eventful seek and holds never clamp.
+            tl.to({ p: 0 }, { p: 1, duration: duration, ease: "none" }, 0);
+
+            // HOLD: truly still; repeated repaints write identical values.
+
+            // OUT: optional departure; exit none holds until the frame cuts.
+            if (exit === "up") {
+              tl.to(stage, { y: "-4cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "fade") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            }
+
+            tl.seek(0);
+            applyTime(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["variable-font-flex"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/vector-editor-rig/demo.html b/docs/public/catalog/components/vector-editor-rig/demo.html
new file mode 100644
index 0000000000..6068be6562
--- /dev/null
+++ b/docs/public/catalog/components/vector-editor-rig/demo.html
@@ -0,0 +1,111 @@
+<!doctype html>
+<!--
+  vector-editor-rig -- demo. Standalone 1920x1080 composition that mounts the
+  primitive from ./vector-editor-rig.html via data-composition-src. The wide
+  mount card gives the toolbar, canvas, and inspector enough room to read at
+  preview size. Non-default tool and pathLabel overrides prove that declared
+  variables flow through the host into the mounted primitive. The primitive
+  carries no data-width/data-height and sizes itself from this host box.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Vector Editor Rig - Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #05070d);
+      }
+
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background:
+          radial-gradient(
+            ellipse at 50% 42%,
+            color-mix(in srgb, var(--brand, #59a8ff) 14%, transparent),
+            transparent 55%
+          ),
+          var(--bg, #05070d);
+      }
+
+      .mount-card {
+        --bg: #0a1020;
+        --fg: #f5f8ff;
+        --brand: #59a8ff;
+        --surface: #151f32;
+        --border: #2d3a50;
+        --muted: #8391a8;
+        width: 75%;
+        height: 70%;
+        left: 12.5%;
+        top: 15%;
+        overflow: hidden;
+        border: 1px solid color-mix(in srgb, var(--border, #2d3a50) 84%, transparent);
+        border-radius: 30px;
+        box-shadow: 0 44px 110px color-mix(in srgb, var(--bg, #05070d) 72%, transparent);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="vector-editor-rig-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4.5"
+      data-fps="30"
+    >
+      <div
+        id="vector-editor-rig-mount"
+        class="mount-card clip"
+        data-composition-id="vector-editor-rig"
+        data-composition-src="./vector-editor-rig.html"
+        data-variable-values='{"tool":"shape","pathLabel":"Orbit Mark"}'
+        data-start="0"
+        data-duration="4.5"
+        data-track-index="0"
+        data-width="1440"
+        data-height="756"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      // This demo has no motion of its own. The mounted primitive registers
+      // its own timeline. An empty paused host timeline satisfies the
+      // runtime's timeline-registry check without duplicating motion.
+      window.__timelines = window.__timelines || {};
+      window.__timelines["vector-editor-rig-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "vector-editor-rig.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/vector-editor-rig/vector-editor-rig.html b/docs/public/catalog/components/vector-editor-rig/vector-editor-rig.html
new file mode 100644
index 0000000000..c5427231bd
--- /dev/null
+++ b/docs/public/catalog/components/vector-editor-rig/vector-editor-rig.html
@@ -0,0 +1,795 @@
+<!doctype html>
+<!--
+  vector-editor-rig -- HyperFrames video primitive (ui-props / holdable / demonstrate)
+
+  Concept: a compact vector editor app chrome frames the demonstration. A
+  left tool rail, central canvas, and right layers and properties inspector
+  stay readable while a blue bezier path draws on live. Anchor dots, diamond
+  control handles, connector arms, and a selection frame arrive in sequence
+  so the scene reads as active vector design rather than a static diagram.
+
+  Compiled-from evidence: power-reel source 11-vector-editor (design-tool
+  twin of terminal-run). The source contributes its blue-on-dark selection
+  rig vocabulary, while this primitive adds the required application chrome
+  and live pen drawing mechanic.
+
+  Use when: demonstrating vector creation, brand design, drawing tools, or a
+  design workflow inside a larger product scene. The primitive is holdable,
+  so the completed editor state remains legible for variable scene lengths.
+
+  Variables (declared in data-composition-variables below):
+    - tool ("pen" | "shape" | "type", default "pen"): selects the visibly
+      active swatch in the left toolbar.
+    - pathLabel (string, default "Logo"): names the document chip and the
+      selected layer. Blank or whitespace-only values normalize to "Logo".
+    - accent is theme-owned, not a getVariables() knob. The path, active tool,
+      handles, and selection frame all paint through var(--brand, #0d99ff).
+
+  Envelope (fixed IN/OUT, elastic HOLD only, never gsap.timeScale()):
+    IN_BASE  = 1.20s  chrome settles, path draws, rig nodes pop, frame lands
+    HOLD     = elastic = max(0, D - (IN_BASE + OUT_BASE)); selected-state dot
+               breathes gently with a finite sine cycle
+    OUT_BASE = 0.50s  editor releases upward and fades
+    If D < IN_BASE + OUT_BASE, IN and OUT scale down together so IN + OUT == D
+    and HOLD == 0.
+
+  Sync point (fixed offset into IN, never inside elastic HOLD): the stroke
+  finishes and the final anchor lands at PATH_FINISH_AT = 1.05s into an
+  unscaled IN. It scales proportionally when the envelope is compressed.
+
+  Sound cue: a subtle vector-close cue fires at PATH_FINISH_AT. This primitive
+  never plays audio. It dispatches an `hf:sfx` CustomEvent
+  ({ id: "vector-close", t: PATH_FINISH_AT }) for a scene mix stage to route.
+
+  Mount contract: this file is a MOUNTABLE SUB-COMPOSITION, not a standalone
+  composition. A host loads it via data-composition-src; the runtime only
+  clones <template> contents, so all live CSS, markup, and scripts sit inside
+  <template>. The root has no data-width/data-height. It fills the host slot
+  with position:absolute; inset:0; container-type:size and sizes every visual
+  from cqw/cqh or SVG viewBox proportions. The root is styled by #root because
+  mounted CSS scoping can stop a class selector from matching the flattened
+  root. Variables come from window.__hyperframes.getVariables(), which merges
+  declared defaults with per-instance host overrides before mount.
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "tool", "type": "enum", "role": "content", "label": "Active tool", "description": "Tool highlighted in the editor toolbar.", "default": "pen", "options": [{ "value": "pen", "label": "Pen" }, { "value": "shape", "label": "Shape" }, { "value": "type", "label": "Type" }] },
+    { "id": "pathLabel", "type": "string", "role": "content", "label": "Path label", "description": "Name shown for the active vector path.", "default": "Logo" }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Vector Editor Rig</title>
+    <!-- Metadata only for direct file inspection. The runtime discards the
+         head when mounting, while it reads variable declarations from the
+         fetched document's html element before cloning the template. -->
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="vector-editor-rig" data-duration="4.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            background: var(--bg, #0b1120);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+          }
+
+          .ve-clip,
+          .ve-stage {
+            width: 100%;
+            height: 100%;
+          }
+
+          .ve-stage {
+            display: grid;
+            grid-template-rows: 9cqh 1fr;
+            background: var(--bg, #0b1120);
+            opacity: 0;
+          }
+
+          .ve-topbar {
+            display: grid;
+            grid-template-columns: 18cqw 1fr 18cqw;
+            align-items: center;
+            padding: 0 2cqw;
+            border-bottom: 0.08cqw solid var(--border, #2c3b52);
+            background: color-mix(in srgb, var(--surface, #162033) 84%, var(--bg, #0b1120));
+          }
+
+          .ve-window-controls,
+          .ve-top-actions {
+            display: flex;
+            align-items: center;
+            gap: 0.7cqw;
+          }
+
+          .ve-top-actions {
+            justify-content: flex-end;
+          }
+
+          .ve-window-dot {
+            width: 0.75cqw;
+            aspect-ratio: 1;
+            border-radius: 50%;
+            background: var(--muted, #8190a8);
+          }
+
+          .ve-window-dot:first-child,
+          .ve-live-dot {
+            background: var(--brand, #0d99ff);
+          }
+
+          .ve-document {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 0.8cqw;
+            min-width: 0;
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: 1.25cqw;
+            font-weight: 650;
+            letter-spacing: 0.01em;
+          }
+
+          .ve-document-name {
+            max-width: 20cqw;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          .ve-document-chip,
+          .ve-zoom-chip {
+            padding: 0.55cqh 0.75cqw;
+            border: 0.08cqw solid color-mix(in srgb, var(--brand, #0d99ff) 46%, transparent);
+            border-radius: 0.45cqw;
+            background: color-mix(in srgb, var(--brand, #0d99ff) 13%, transparent);
+            color: var(--brand, #0d99ff);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            font-size: 0.82cqw;
+            font-weight: 700;
+            letter-spacing: 0.06em;
+            text-transform: uppercase;
+          }
+
+          .ve-zoom-chip {
+            border-color: var(--border, #2c3b52);
+            background: var(--surface, #162033);
+            color: var(--muted, #8190a8);
+            letter-spacing: 0;
+            text-transform: none;
+          }
+
+          .ve-live-dot {
+            width: 0.55cqw;
+            aspect-ratio: 1;
+            border-radius: 50%;
+            box-shadow: 0 0 1.2cqw color-mix(in srgb, var(--brand, #0d99ff) 68%, transparent);
+          }
+
+          .ve-workbench {
+            min-height: 0;
+            display: grid;
+            grid-template-columns: 7cqw minmax(0, 1fr) 25cqw;
+          }
+
+          .ve-toolbar {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 1.4cqh;
+            padding-top: 2.4cqh;
+            border-right: 0.08cqw solid var(--border, #2c3b52);
+            background: color-mix(in srgb, var(--surface, #162033) 72%, var(--bg, #0b1120));
+          }
+
+          .ve-tool {
+            width: 3.7cqw;
+            aspect-ratio: 1;
+            display: grid;
+            place-items: center;
+            border: 0.08cqw solid transparent;
+            border-radius: 0.75cqw;
+            background: transparent;
+            color: var(--muted, #8190a8);
+          }
+
+          .ve-tool svg {
+            width: 1.75cqw;
+            height: 1.75cqw;
+            overflow: visible;
+          }
+
+          #root[data-tool="pen"] .ve-tool[data-tool-id="pen"],
+          #root[data-tool="shape"] .ve-tool[data-tool-id="shape"],
+          #root[data-tool="type"] .ve-tool[data-tool-id="type"] {
+            border-color: color-mix(in srgb, var(--brand, #0d99ff) 46%, transparent);
+            background: color-mix(in srgb, var(--brand, #0d99ff) 15%, transparent);
+            color: var(--brand, #0d99ff);
+            box-shadow: 0 0 1.4cqw color-mix(in srgb, var(--brand, #0d99ff) 14%, transparent);
+          }
+
+          .ve-tool-divider {
+            width: 3cqw;
+            height: 0.08cqw;
+            margin: 0.35cqh 0;
+            background: var(--border, #2c3b52);
+          }
+
+          .ve-canvas {
+            position: relative;
+            min-width: 0;
+            overflow: hidden;
+            background:
+              linear-gradient(
+                color-mix(in srgb, var(--border, #2c3b52) 25%, transparent) 0.08cqw,
+                transparent 0.08cqw
+              ),
+              linear-gradient(
+                90deg,
+                color-mix(in srgb, var(--border, #2c3b52) 25%, transparent) 0.08cqw,
+                transparent 0.08cqw
+              ),
+              color-mix(in srgb, var(--bg, #0b1120) 84%, var(--surface, #162033));
+            background-size: 4.3cqw 4.3cqw;
+          }
+
+          .ve-canvas-label {
+            position: absolute;
+            top: 2.2cqh;
+            left: 2cqw;
+            z-index: 2;
+            display: flex;
+            align-items: center;
+            gap: 0.65cqw;
+            color: var(--muted, #8190a8);
+            font-size: 0.92cqw;
+            letter-spacing: 0.03em;
+          }
+
+          .ve-canvas-label::before {
+            content: "";
+            width: 0.55cqw;
+            aspect-ratio: 1;
+            border: 0.08cqw solid var(--brand, #0d99ff);
+            transform: rotate(45deg);
+          }
+
+          .ve-artboard {
+            position: absolute;
+            left: 50%;
+            top: 52%;
+            width: 50cqw;
+            height: 64cqh;
+            transform: translate(-50%, -50%);
+            overflow: hidden;
+            border: 0.08cqw solid color-mix(in srgb, var(--border, #2c3b52) 78%, transparent);
+            border-radius: 1.1cqw;
+            background:
+              radial-gradient(
+                circle at 50% 48%,
+                color-mix(in srgb, var(--brand, #0d99ff) 10%, transparent),
+                transparent 48%
+              ),
+              var(--surface, #162033);
+            box-shadow: 0 2.8cqh 5.5cqw color-mix(in srgb, var(--bg, #0b1120) 70%, transparent);
+          }
+
+          .ve-artboard svg {
+            width: 100%;
+            height: 100%;
+            display: block;
+            overflow: visible;
+          }
+
+          .ve-vector-path {
+            fill: color-mix(in srgb, var(--brand, #0d99ff) 8%, transparent);
+            stroke: var(--brand, #0d99ff);
+            stroke-width: 4;
+            stroke-linecap: round;
+            stroke-linejoin: round;
+            filter: drop-shadow(
+              0 0 0.7cqw color-mix(in srgb, var(--brand, #0d99ff) 42%, transparent)
+            );
+          }
+
+          .ve-selection {
+            color: var(--brand, #0d99ff);
+          }
+
+          .ve-selection-frame {
+            fill: none;
+            stroke: currentColor;
+            stroke-width: 1.5;
+          }
+
+          .ve-selection-corner,
+          .ve-control-diamond {
+            fill: var(--surface, #162033);
+            stroke: currentColor;
+            stroke-width: 2;
+          }
+
+          .ve-control-arm {
+            stroke: var(--muted, #8190a8);
+            stroke-width: 1.5;
+          }
+
+          .ve-anchor-dot {
+            fill: var(--fg, #f8fafc);
+            stroke: var(--brand, #0d99ff);
+            stroke-width: 3;
+          }
+
+          .ve-anchor-ring {
+            fill: color-mix(in srgb, var(--brand, #0d99ff) 12%, transparent);
+            stroke: color-mix(in srgb, var(--brand, #0d99ff) 55%, transparent);
+            stroke-width: 1.5;
+          }
+
+          .ve-inspector {
+            min-width: 0;
+            border-left: 0.08cqw solid var(--border, #2c3b52);
+            background: color-mix(in srgb, var(--surface, #162033) 76%, var(--bg, #0b1120));
+          }
+
+          .ve-panel-section {
+            padding: 2.1cqh 1.6cqw;
+            border-bottom: 0.08cqw solid var(--border, #2c3b52);
+          }
+
+          .ve-panel-title {
+            margin-bottom: 1.4cqh;
+            color: var(--muted, #8190a8);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: 0.82cqw;
+            font-weight: 750;
+            letter-spacing: 0.12em;
+            text-transform: uppercase;
+          }
+
+          .ve-layer-row,
+          .ve-property-row {
+            display: grid;
+            align-items: center;
+            min-width: 0;
+            border-radius: 0.6cqw;
+            color: var(--fg, #f8fafc);
+            font-size: 0.94cqw;
+          }
+
+          .ve-layer-row {
+            grid-template-columns: 1.3cqw minmax(0, 1fr) auto;
+            gap: 0.75cqw;
+            padding: 1.15cqh 0.85cqw;
+          }
+
+          .ve-layer-row.is-selected {
+            background: color-mix(in srgb, var(--brand, #0d99ff) 14%, transparent);
+            color: var(--brand, #0d99ff);
+          }
+
+          .ve-layer-icon {
+            width: 0.85cqw;
+            aspect-ratio: 1;
+            border: 0.1cqw solid currentColor;
+            transform: rotate(45deg);
+          }
+
+          .ve-layer-name {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          .ve-layer-kind {
+            color: var(--muted, #8190a8);
+            font-size: 0.72cqw;
+            letter-spacing: 0.04em;
+          }
+
+          .ve-property-row {
+            grid-template-columns: minmax(0, 1fr) auto;
+            gap: 1cqw;
+            min-height: 4.1cqh;
+            color: var(--muted, #8190a8);
+          }
+
+          .ve-property-value {
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: 0.86cqw;
+          }
+
+          .ve-color-swatch {
+            width: 1.2cqw;
+            aspect-ratio: 1;
+            border: 0.08cqw solid color-mix(in srgb, var(--fg, #f8fafc) 25%, transparent);
+            border-radius: 0.28cqw;
+            background: var(--brand, #0d99ff);
+          }
+        </style>
+
+        <div
+          id="vector-editor-rig-clip"
+          class="ve-clip clip"
+          data-start="0"
+          data-duration="4.5"
+          data-track-index="0"
+        >
+          <div class="ve-stage">
+            <header class="ve-topbar">
+              <div class="ve-window-controls" aria-hidden="true">
+                <span class="ve-window-dot"></span>
+                <span class="ve-window-dot"></span>
+                <span class="ve-window-dot"></span>
+              </div>
+              <div class="ve-document">
+                <span class="ve-document-chip">Vector</span>
+                <span class="ve-document-name"></span>
+              </div>
+              <div class="ve-top-actions">
+                <span class="ve-live-dot"></span>
+                <span class="ve-zoom-chip">100%</span>
+              </div>
+            </header>
+
+            <div class="ve-workbench">
+              <nav class="ve-toolbar" aria-label="Vector tools">
+                <div class="ve-tool" data-tool-id="pen" aria-label="Pen tool" role="img">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
+                    <path d="M4 20l4.3-1.1L19 8.2 15.8 5 5.1 15.7 4 20Z" />
+                    <path d="m13.8 7 3.2 3.2M5.1 15.7l3.2 3.2" />
+                  </svg>
+                </div>
+                <div class="ve-tool" data-tool-id="shape" aria-label="Shape tool" role="img">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
+                    <rect x="4.5" y="4.5" width="15" height="15" rx="2" />
+                    <circle cx="12" cy="12" r="3.5" />
+                  </svg>
+                </div>
+                <div class="ve-tool" data-tool-id="type" aria-label="Type tool" role="img">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
+                    <path d="M5 6h14M12 6v13M8.5 19h7" />
+                  </svg>
+                </div>
+                <span class="ve-tool-divider"></span>
+                <div class="ve-tool" aria-hidden="true">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
+                    <path d="m5 5 6 14 2-6 6-2L5 5Z" />
+                  </svg>
+                </div>
+              </nav>
+
+              <main class="ve-canvas">
+                <div class="ve-canvas-label"><span></span></div>
+                <div class="ve-artboard">
+                  <svg viewBox="0 0 720 500" aria-label="Vector path being drawn">
+                    <path
+                      class="ve-vector-path"
+                      d="M 140 350 C 165 235 235 150 320 145 C 415 140 520 195 565 285 C 600 360 535 415 445 425 C 350 440 260 430 210 405 C 175 390 150 370 140 350 Z"
+                    />
+
+                    <g class="ve-selection">
+                      <rect
+                        class="ve-selection-frame"
+                        x="105"
+                        y="100"
+                        width="500"
+                        height="370"
+                        rx="4"
+                      />
+                      <rect
+                        class="ve-selection-corner"
+                        x="99"
+                        y="94"
+                        width="12"
+                        height="12"
+                        rx="1"
+                      />
+                      <rect
+                        class="ve-selection-corner"
+                        x="599"
+                        y="94"
+                        width="12"
+                        height="12"
+                        rx="1"
+                      />
+                      <rect
+                        class="ve-selection-corner"
+                        x="599"
+                        y="464"
+                        width="12"
+                        height="12"
+                        rx="1"
+                      />
+                      <rect
+                        class="ve-selection-corner"
+                        x="99"
+                        y="464"
+                        width="12"
+                        height="12"
+                        rx="1"
+                      />
+                    </g>
+
+                    <g class="ve-node">
+                      <circle class="ve-anchor-ring" cx="140" cy="350" r="12" />
+                      <circle class="ve-anchor-dot" cx="140" cy="350" r="6" />
+                    </g>
+                    <g class="ve-node">
+                      <line class="ve-control-arm" x1="235" y1="150" x2="405" y2="138" />
+                      <rect
+                        class="ve-control-diamond"
+                        x="229"
+                        y="144"
+                        width="12"
+                        height="12"
+                        transform="rotate(45 235 150)"
+                      />
+                      <rect
+                        class="ve-control-diamond"
+                        x="399"
+                        y="132"
+                        width="12"
+                        height="12"
+                        transform="rotate(45 405 138)"
+                      />
+                      <circle class="ve-anchor-ring" cx="320" cy="145" r="12" />
+                      <circle class="ve-anchor-dot" cx="320" cy="145" r="6" />
+                    </g>
+                    <g class="ve-node">
+                      <line class="ve-control-arm" x1="520" y1="195" x2="600" y2="360" />
+                      <rect
+                        class="ve-control-diamond"
+                        x="514"
+                        y="189"
+                        width="12"
+                        height="12"
+                        transform="rotate(45 520 195)"
+                      />
+                      <rect
+                        class="ve-control-diamond"
+                        x="594"
+                        y="354"
+                        width="12"
+                        height="12"
+                        transform="rotate(45 600 360)"
+                      />
+                      <circle class="ve-anchor-ring" cx="565" cy="285" r="12" />
+                      <circle class="ve-anchor-dot" cx="565" cy="285" r="6" />
+                    </g>
+                    <g class="ve-node">
+                      <line class="ve-control-arm" x1="535" y1="415" x2="350" y2="440" />
+                      <rect
+                        class="ve-control-diamond"
+                        x="529"
+                        y="409"
+                        width="12"
+                        height="12"
+                        transform="rotate(45 535 415)"
+                      />
+                      <rect
+                        class="ve-control-diamond"
+                        x="344"
+                        y="434"
+                        width="12"
+                        height="12"
+                        transform="rotate(45 350 440)"
+                      />
+                      <circle class="ve-anchor-ring" cx="445" cy="425" r="12" />
+                      <circle class="ve-anchor-dot" cx="445" cy="425" r="6" />
+                    </g>
+                    <g class="ve-node">
+                      <circle class="ve-anchor-ring" cx="210" cy="405" r="12" />
+                      <circle class="ve-anchor-dot" cx="210" cy="405" r="6" />
+                    </g>
+                  </svg>
+                </div>
+              </main>
+
+              <aside class="ve-inspector">
+                <section class="ve-panel-section">
+                  <div class="ve-panel-title">Layers</div>
+                  <div class="ve-layer-row is-selected">
+                    <span class="ve-layer-icon"></span>
+                    <span class="ve-layer-name"></span>
+                    <span class="ve-layer-kind">Path</span>
+                  </div>
+                  <div class="ve-layer-row">
+                    <span class="ve-layer-icon"></span>
+                    <span>Frame</span>
+                    <span class="ve-layer-kind">Group</span>
+                  </div>
+                </section>
+                <section class="ve-panel-section">
+                  <div class="ve-panel-title">Properties</div>
+                  <div class="ve-property-row">
+                    <span>Fill</span>
+                    <span class="ve-property-value">8%</span>
+                  </div>
+                  <div class="ve-property-row">
+                    <span>Stroke</span>
+                    <span class="ve-color-swatch"></span>
+                  </div>
+                  <div class="ve-property-row">
+                    <span>Width</span>
+                    <span class="ve-property-value">4</span>
+                  </div>
+                  <div class="ve-property-row">
+                    <span>Nodes</span>
+                    <span class="ve-property-value">5</span>
+                  </div>
+                </section>
+              </aside>
+            </div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            // Literal, not read from the mounted DOM. The runtime strips
+            // data-composition-id from the flattened inner root, so reading
+            // that attribute after mount would register the timeline under
+            // "null" and leave the host waiting for this composition.
+            var compositionId = "vector-editor-rig";
+            var stage = root.querySelector(".ve-stage");
+            var path = root.querySelector(".ve-vector-path");
+            var nodes = root.querySelectorAll(".ve-node");
+            var selection = root.querySelector(".ve-selection");
+            var liveDot = root.querySelector(".ve-live-dot");
+            var documentName = root.querySelector(".ve-document-name");
+            var canvasLabel = root.querySelector(".ve-canvas-label span");
+            var layerName = root.querySelector(".ve-layer-name");
+
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            // INVARIANT: exactly one known tool owns the active toolbar state.
+            var allowedTools = ["pen", "shape", "type"];
+            var tool = allowedTools.indexOf(vars.tool) >= 0 ? vars.tool : "pen";
+            // INVARIANT: all label surfaces receive the same bounded string.
+            var rawLabel = vars.pathLabel == null ? "Logo" : String(vars.pathLabel);
+            var trimmedLabel = rawLabel.trim().slice(0, 28);
+            var pathLabel = trimmedLabel.length > 0 ? trimmedLabel : "Logo";
+
+            root.setAttribute("data-tool", tool);
+            documentName.textContent = pathLabel;
+            canvasLabel.textContent = pathLabel + " path";
+            layerName.textContent = pathLabel;
+
+            var IN_BASE = 1.2;
+            var OUT_BASE = 0.5;
+            var STAGE_IN_BASE = 0.28;
+            var PATH_START_BASE = 0.1;
+            var PATH_FINISH_AT_BASE = 1.05; // sync point: fixed inside IN
+            var NODE_DURATION_BASE = 0.16;
+            var SELECTION_START_BASE = 0.82;
+            var HOLD_PULSE_HALF = 0.65;
+
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4.5"));
+            var totalBase = IN_BASE + OUT_BASE;
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var STAGE_IN = STAGE_IN_BASE * scale;
+            var PATH_START = PATH_START_BASE * scale;
+            var PATH_FINISH_AT = PATH_FINISH_AT_BASE * scale;
+            var PATH_DRAW_DURATION = PATH_FINISH_AT - PATH_START;
+            var NODE_DURATION = NODE_DURATION_BASE * scale;
+            var SELECTION_START = SELECTION_START_BASE * scale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var HOLD_START = IN;
+            var OUT_START = IN + HOLD;
+            var nodeLandings = [0.25, 0.48, 0.7, 0.9, PATH_FINISH_AT_BASE];
+            var pathLength = path.getTotalLength();
+
+            function fireSfx(id, t) {
+              root.dispatchEvent(
+                new CustomEvent("hf:sfx", { detail: { id: id, t: t }, bubbles: true }),
+              );
+            }
+
+            // Explicit t=0 state for every animated endpoint, never gsap.from().
+            gsap.set(stage, { opacity: 0, y: "1.8cqh" });
+            gsap.set(path, {
+              fillOpacity: 0,
+              strokeDasharray: pathLength,
+              strokeDashoffset: pathLength,
+            });
+            gsap.set(nodes, { opacity: 0, scale: 0, transformOrigin: "center center" });
+            gsap.set(selection, { opacity: 0 });
+            gsap.set(liveDot, { opacity: 0.68, scale: 1 });
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: chrome settles, then the pen stroke and anchors reveal.
+            tl.to(stage, { opacity: 1, y: 0, duration: STAGE_IN, ease: "power2.out" }, 0);
+            tl.to(
+              path,
+              { strokeDashoffset: 0, duration: PATH_DRAW_DURATION, ease: "none" },
+              PATH_START,
+            );
+
+            for (var i = 0; i < nodes.length; i += 1) {
+              var nodeLanding = nodeLandings[i] * scale;
+              tl.to(
+                nodes[i],
+                { opacity: 1, scale: 1, duration: NODE_DURATION, ease: "power2.out" },
+                Math.max(0, nodeLanding - NODE_DURATION),
+              );
+            }
+
+            tl.to(
+              selection,
+              {
+                opacity: 1,
+                duration: Math.max(0.001, PATH_FINISH_AT - SELECTION_START),
+                ease: "power2.out",
+              },
+              SELECTION_START,
+            );
+            tl.to(
+              path,
+              {
+                fillOpacity: 1,
+                duration: Math.max(0.001, PATH_FINISH_AT - SELECTION_START),
+                ease: "power2.out",
+              },
+              SELECTION_START,
+            );
+            tl.call(
+              function () {
+                fireSfx("vector-close", PATH_FINISH_AT);
+              },
+              [],
+              PATH_FINISH_AT,
+            );
+
+            // HOLD: finite selected-state pulse, absent when no hold exists.
+            if (HOLD > HOLD_PULSE_HALF) {
+              var pulseRepeat = Math.max(0, Math.floor(HOLD / HOLD_PULSE_HALF) - 1);
+              tl.to(
+                liveDot,
+                {
+                  opacity: 1,
+                  scale: 1.22,
+                  duration: HOLD_PULSE_HALF,
+                  ease: "sine.inOut",
+                  yoyo: true,
+                  repeat: pulseRepeat,
+                },
+                HOLD_START,
+              );
+            }
+
+            // OUT: editor releases cleanly without altering the completed rig.
+            tl.to(stage, { opacity: 0, y: "-1.2cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/velocity-throw-snap/demo.html b/docs/public/catalog/components/velocity-throw-snap/demo.html
new file mode 100644
index 0000000000..5b61d59a72
--- /dev/null
+++ b/docs/public/catalog/components/velocity-throw-snap/demo.html
@@ -0,0 +1,103 @@
+<!doctype html>
+<!--
+  velocity-throw-snap demo. This standalone 1920x1080 composition mounts the
+  primitive through data-composition-src. Non-default values select the last
+  card, violet styling, and a custom label prefix to prove variable flow.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Velocity Throw Snap Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #0b0c0e);
+      }
+
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(
+          ellipse at 50% 44%,
+          var(--bg, #1d2130) 0%,
+          var(--bg, #0b0c0e) 72%
+        );
+      }
+
+      .velocity-throw-snap-mount {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --muted: #a7b0c0;
+        --surface: #182033;
+        --border: #475569;
+        width: 88%;
+        height: 74%;
+        left: 6%;
+        top: 13%;
+        overflow: hidden;
+        border: 1px solid var(--border, #343c4d);
+        border-radius: 34px;
+        background: var(--bg, #0b0c0e);
+        box-shadow: 0 52px 120px color-mix(in srgb, var(--bg, #000000) 50%, transparent);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="velocity-throw-snap-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="velocity-throw-snap-mount"
+        class="velocity-throw-snap-mount clip"
+        data-composition-id="velocity-throw-snap"
+        data-composition-src="./velocity-throw-snap.html"
+        data-variable-values='{"hero_index":4,"accent":"violet","card_label_prefix":"Frame"}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="1690"
+        data-height="799"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["velocity-throw-snap-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "velocity-throw-snap.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/velocity-throw-snap/velocity-throw-snap.html b/docs/public/catalog/components/velocity-throw-snap/velocity-throw-snap.html
new file mode 100644
index 0000000000..9abdf62b3d
--- /dev/null
+++ b/docs/public/catalog/components/velocity-throw-snap/velocity-throw-snap.html
@@ -0,0 +1,484 @@
+<!doctype html>
+<!--
+  velocity-throw-snap: HyperFrames video primitive (feature-tour / exhibit)
+
+  Concept: a five-shot rail whips in on an authored velocity curve, loses
+  speed quickly, then snaps past and back onto the selected hero shot. The
+  selected shot finishes exactly centered while its neighbors dim.
+
+  Variables:
+    - hero_index (number, 0 to 4, default 2): shot centered at the settle.
+    - accent (green | blue | violet, default green): hero highlight color.
+    - card_label_prefix (string, default "Shot"): label before each card number.
+
+  Envelope (fixed IN, elastic HOLD, no OUT):
+    IN_BASE  = 1.40s, fast power4.out throw followed by back.out(1.7) snap
+    HOLD     = elastic = max(0, D - IN), centered hero aura breathes subtly
+    OUT_BASE = 0s, the centered hero remains as the final state
+    If D is shorter than IN_BASE, the complete throw and snap compress to fit.
+
+  Mount contract: the runtime clones only this template. #root fills the
+  host box, establishes the cqw/cqh basis, has no data-width or data-height,
+  and registers one paused timeline under the hardcoded velocity-throw-snap id.
+  Rail position is CSS-owned: --vts-hero-index selects the centered card and
+  --vts-throw-x adds seek-driven travel in cqw units. No pixel measurements
+  are cached or read.
+-->
+<html
+  lang="en"
+  data-composition-id="velocity-throw-snap"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "hero_index", "type": "number", "role": "content", "label": "Hero index", "description": "Zero-based index of the shot centered at the settle.", "default": 2, "min": 0, "max": 4, "step": 1 },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Highlight color used by the hero shot.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "card_label_prefix", "type": "string", "role": "content", "label": "Card label prefix", "description": "Text placed before each shot number.", "default": "Shot" }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Velocity Throw Snap</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="velocity-throw-snap" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            --vts-card-width: 48;
+            --vts-card-gap: 4.5;
+            --vts-hero-index: 0;
+            --vts-throw-x: 0;
+            --vts-throw-y: 0;
+            --vts-tilt: 0;
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .vts-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            background:
+              radial-gradient(
+                circle at 50% 46%,
+                color-mix(in srgb, var(--vts-accent) 13%, var(--bg, #172033)) 0%,
+                var(--bg, #0b0c0e) 72%
+              ),
+              var(--bg, #0b0c0e);
+          }
+
+          .vts-rail {
+            position: absolute;
+            left: 0;
+            top: 18cqh;
+            display: flex;
+            align-items: center;
+            gap: calc(var(--vts-card-gap) * 1cqw);
+            width: max-content;
+            transform: translateX(
+                calc(
+                  (
+                      50 - var(--vts-card-width) / 2 - var(--vts-hero-index) *
+                        (var(--vts-card-width) + var(--vts-card-gap)) + var(--vts-throw-x)
+                    ) *
+                    1cqw
+                )
+              )
+              translateY(calc(var(--vts-throw-y) * 1cqh)) rotate(calc(var(--vts-tilt) * 1deg));
+            transform-origin: 50% 50%;
+            will-change: transform;
+          }
+
+          .vts-card {
+            position: relative;
+            flex: 0 0 calc(var(--vts-card-width) * 1cqw);
+            height: 62cqh;
+            overflow: hidden;
+            border: 0.16cqmin solid color-mix(in srgb, var(--border, #475569) 76%, transparent);
+            border-radius: var(--radius, 3.2cqmin);
+            background: linear-gradient(
+              150deg,
+              var(--surface, #f8fafc) 0%,
+              var(--surface, #dbe5f1) 100%
+            );
+            color: var(--fg, #101827);
+            box-shadow: 0 3.6cqh 8cqh color-mix(in srgb, var(--bg, #000000) 46%, transparent);
+            transform-origin: 50% 50%;
+            will-change: transform, opacity, border-color, box-shadow;
+          }
+
+          .vts-aura {
+            position: absolute;
+            inset: -0.2cqmin;
+            z-index: 2;
+            border: 0.28cqmin solid var(--vts-accent);
+            border-radius: inherit;
+            box-shadow:
+              inset 0 0 3cqmin color-mix(in srgb, var(--vts-accent) 16%, transparent),
+              0 0 4cqmin color-mix(in srgb, var(--vts-accent) 36%, transparent);
+            opacity: 0;
+            pointer-events: none;
+          }
+
+          .vts-card-top {
+            height: 8cqh;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 0 2.6cqw;
+            border-bottom: 0.1cqmin solid var(--border, #c4ceda);
+            background: color-mix(in srgb, var(--surface, #ffffff) 58%, transparent);
+          }
+
+          .vts-dots {
+            display: flex;
+            gap: 0.45cqw;
+          }
+
+          .vts-dots i {
+            width: 0.58cqw;
+            aspect-ratio: 1;
+            border-radius: 50%;
+            background: var(--muted, #91a0b3);
+          }
+
+          .vts-index {
+            color: var(--vts-accent-dark);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            font-size: 1.45cqw;
+            font-weight: 760;
+            letter-spacing: 0.12em;
+          }
+
+          .vts-preview {
+            height: 38cqh;
+            display: grid;
+            grid-template-columns: 1.05fr 0.95fr;
+            gap: 1.8cqw;
+            padding: 3cqh 2.6cqw;
+          }
+
+          .vts-panel,
+          .vts-stack {
+            border: 0.1cqmin solid var(--border, #c4ceda);
+            border-radius: 1.5cqmin;
+            background: var(--surface, #edf2f7);
+          }
+
+          .vts-panel {
+            position: relative;
+            overflow: hidden;
+            background: linear-gradient(
+              145deg,
+              color-mix(in srgb, var(--vts-accent) 30%, var(--surface, #eaf0f6)),
+              var(--surface, #d7e0ea)
+            );
+          }
+
+          .vts-panel::before,
+          .vts-panel::after {
+            content: "";
+            position: absolute;
+            border-radius: 1cqmin;
+            background: color-mix(in srgb, var(--vts-accent) 72%, var(--surface, #ffffff));
+          }
+
+          .vts-panel::before {
+            width: 11cqw;
+            height: 11cqw;
+            left: 3cqw;
+            top: 5cqh;
+          }
+
+          .vts-panel::after {
+            left: 3cqw;
+            right: 3cqw;
+            bottom: 4cqh;
+            height: 1.2cqh;
+          }
+
+          .vts-stack {
+            display: grid;
+            align-content: center;
+            gap: 2.2cqh;
+            padding: 2cqw;
+          }
+
+          .vts-stack i {
+            display: block;
+            height: 1.2cqh;
+            border-radius: 1cqh;
+            background: var(--muted, #bcc8d6);
+          }
+
+          .vts-stack i:first-child {
+            width: 72%;
+            background: var(--vts-accent);
+          }
+
+          .vts-stack i:last-child {
+            width: 56%;
+          }
+
+          .vts-label {
+            display: block;
+            max-width: 100%;
+            padding: 0 2.6cqw;
+            overflow: hidden;
+            color: var(--fg, #101827);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: 3.4cqw;
+            font-weight: 780;
+            line-height: 1;
+            letter-spacing: -0.04em;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          .vts-card:nth-child(2) .vts-preview,
+          .vts-card:nth-child(5) .vts-preview {
+            grid-template-columns: 0.78fr 1.22fr;
+          }
+
+          .vts-card:nth-child(3) .vts-panel::before {
+            width: 14cqw;
+            border-radius: 50%;
+          }
+
+          .vts-card:nth-child(4) .vts-preview {
+            grid-template-columns: 1fr;
+          }
+
+          .vts-card:nth-child(4) .vts-stack {
+            display: none;
+          }
+        </style>
+
+        <div
+          id="velocity-throw-snap-clip"
+          class="vts-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="vts-rail" role="list" aria-label="Feature shots">
+            <article class="vts-card" role="listitem">
+              <span class="vts-aura" aria-hidden="true"></span>
+              <div class="vts-card-top">
+                <span class="vts-dots"><i></i><i></i><i></i></span><span class="vts-index">01</span>
+              </div>
+              <div class="vts-preview">
+                <span class="vts-panel"></span><span class="vts-stack"><i></i><i></i><i></i></span>
+              </div>
+              <span class="vts-label"></span>
+            </article>
+            <article class="vts-card" role="listitem">
+              <span class="vts-aura" aria-hidden="true"></span>
+              <div class="vts-card-top">
+                <span class="vts-dots"><i></i><i></i><i></i></span><span class="vts-index">02</span>
+              </div>
+              <div class="vts-preview">
+                <span class="vts-panel"></span><span class="vts-stack"><i></i><i></i><i></i></span>
+              </div>
+              <span class="vts-label"></span>
+            </article>
+            <article class="vts-card" role="listitem">
+              <span class="vts-aura" aria-hidden="true"></span>
+              <div class="vts-card-top">
+                <span class="vts-dots"><i></i><i></i><i></i></span><span class="vts-index">03</span>
+              </div>
+              <div class="vts-preview">
+                <span class="vts-panel"></span><span class="vts-stack"><i></i><i></i><i></i></span>
+              </div>
+              <span class="vts-label"></span>
+            </article>
+            <article class="vts-card" role="listitem">
+              <span class="vts-aura" aria-hidden="true"></span>
+              <div class="vts-card-top">
+                <span class="vts-dots"><i></i><i></i><i></i></span><span class="vts-index">04</span>
+              </div>
+              <div class="vts-preview">
+                <span class="vts-panel"></span><span class="vts-stack"><i></i><i></i><i></i></span>
+              </div>
+              <span class="vts-label"></span>
+            </article>
+            <article class="vts-card" role="listitem">
+              <span class="vts-aura" aria-hidden="true"></span>
+              <div class="vts-card-top">
+                <span class="vts-dots"><i></i><i></i><i></i></span><span class="vts-index">05</span>
+              </div>
+              <div class="vts-preview">
+                <span class="vts-panel"></span><span class="vts-stack"><i></i><i></i><i></i></span>
+              </div>
+              <span class="vts-label"></span>
+            </article>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var clip = root.querySelector(".vts-clip");
+            var rail = root.querySelector(".vts-rail");
+            var cards = Array.from(root.querySelectorAll(".vts-card"));
+            var labels = Array.from(root.querySelectorAll(".vts-label"));
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var heroValue = Number(vars.hero_index);
+            var heroIndex = Number.isFinite(heroValue)
+              ? Math.max(0, Math.min(4, Math.round(heroValue)))
+              : 2;
+            var prefix = vars.card_label_prefix == null ? "Shot" : String(vars.card_label_prefix);
+            var accentName =
+              vars.accent === "blue" || vars.accent === "violet" ? vars.accent : "green";
+            var themeStyles = getComputedStyle(root);
+            var palettes = {
+              green: {
+                accent: themeStyles.getPropertyValue("--brand").trim() || "#34d399",
+                dark: themeStyles.getPropertyValue("--brand").trim() || "#08795b",
+                glow: "rgba(52, 211, 153, 0.4)",
+              },
+              blue: {
+                accent: themeStyles.getPropertyValue("--accent").trim() || "#60a5fa",
+                dark: themeStyles.getPropertyValue("--accent").trim() || "#2563a8",
+                glow: "rgba(96, 165, 250, 0.42)",
+              },
+              violet: {
+                accent: themeStyles.getPropertyValue("--accent-2").trim() || "#a78bfa",
+                dark: themeStyles.getPropertyValue("--accent-2").trim() || "#6742b8",
+                glow: "rgba(167, 139, 250, 0.42)",
+              },
+            };
+            var palette = palettes[accentName];
+
+            root.style.setProperty("--vts-hero-index", heroIndex);
+            root.style.setProperty("--vts-accent", palette.accent);
+            root.style.setProperty("--vts-accent-dark", palette.dark);
+
+            labels.forEach(function (label, index) {
+              label.textContent = (prefix.length > 0 ? prefix + " " : "") + String(index + 1);
+            });
+
+            var heroCard = cards[heroIndex];
+            var heroAura = heroCard.querySelector(".vts-aura");
+            var nonHeroCards = cards.filter(function (_, index) {
+              return index !== heroIndex;
+            });
+            heroCard.setAttribute("aria-current", "true");
+
+            var IN_BASE = 1.4;
+            var THROW_BASE = 0.78;
+            var SNAP_BASE = 0.62;
+            var durationValue = parseFloat(root.dataset.duration || "4");
+            var duration = Number.isFinite(durationValue) ? Math.max(0.001, durationValue) : 4;
+            var IN = Math.min(IN_BASE, duration);
+            var HOLD = Math.max(0, duration - IN);
+            var motionScale = IN / IN_BASE;
+            var THROW = THROW_BASE * motionScale;
+            var SNAP = SNAP_BASE * motionScale;
+            var SNAP_AT = THROW;
+
+            gsap.set(clip, { opacity: 0 });
+            gsap.set(rail, {
+              "--vts-throw-x": 140,
+              "--vts-throw-y": 7,
+              "--vts-tilt": 0.8,
+            });
+            gsap.set(cards, { opacity: 0.82, scale: 0.97 });
+            gsap.set(heroAura, { opacity: 0, scale: 0.98 });
+
+            var tl = gsap.timeline({ paused: true });
+
+            tl.to(clip, { opacity: 1, duration: Math.min(0.2, IN), ease: "power2.out" }, 0);
+
+            // Fast travel loses most of its velocity under the whip-out ease.
+            tl.to(
+              rail,
+              {
+                "--vts-throw-x": 16,
+                "--vts-throw-y": -1.4,
+                "--vts-tilt": -0.22,
+                duration: THROW,
+                ease: "power4.out",
+              },
+              0,
+            );
+
+            // The final back curve crosses zero, then returns to the exact center.
+            tl.to(
+              rail,
+              {
+                "--vts-throw-x": 0,
+                "--vts-throw-y": 0,
+                "--vts-tilt": 0,
+                duration: SNAP,
+                ease: "back.out(1.7)",
+              },
+              SNAP_AT,
+            );
+            tl.to(
+              nonHeroCards,
+              { opacity: 0.62, scale: 0.95, duration: SNAP, ease: "power2.out" },
+              SNAP_AT,
+            );
+            tl.to(
+              heroCard,
+              {
+                opacity: 1,
+                scale: 1.04,
+                borderColor: palette.accent,
+                boxShadow: "0 4.2cqh 10cqh " + palette.glow,
+                duration: SNAP,
+                ease: "back.out(1.7)",
+              },
+              SNAP_AT,
+            );
+            tl.to(
+              heroAura,
+              { opacity: 0.58, scale: 1, duration: SNAP * 0.7, ease: "power2.out" },
+              SNAP_AT + SNAP * 0.3,
+            );
+
+            if (HOLD > 0.4) {
+              var breathHalf = Math.min(0.65, HOLD / 2);
+              var breathRepeat = Math.max(0, Math.floor(HOLD / breathHalf) - 1);
+              tl.to(
+                heroAura,
+                {
+                  opacity: 0.78,
+                  scale: 1.015,
+                  duration: breathHalf,
+                  ease: "sine.inOut",
+                  yoyo: true,
+                  repeat: breathRepeat,
+                },
+                IN,
+              );
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["velocity-throw-snap"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/vignette/demo.html b/docs/public/catalog/components/vignette/demo.html
new file mode 100644
index 0000000000..1b61df0cee
--- /dev/null
+++ b/docs/public/catalog/components/vignette/demo.html
@@ -0,0 +1,250 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Vignette — Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="vignette-demo"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <!-- Backdrop: a layered "cinematic still" — a warm key light at upper-left,
+           a teal rim light at lower-right, and a soft global glow. The vignette
+           overlay reads against this so the effect is unambiguous. -->
+      <div class="demo-bg">
+        <!-- Subject shapes — a stylized "moon" centered, with subtle haze rings
+             so the eye has something to anchor on. Without a subject the demo
+             looks like an abstract gradient and the vignette gets lost. -->
+        <div class="demo-haze haze-far"></div>
+        <div class="demo-haze haze-near"></div>
+        <div class="demo-subject"></div>
+
+        <div class="demo-text">
+          <div class="demo-title">
+            <span class="ch">V</span><span class="ch">I</span><span class="ch">G</span
+            ><span class="ch">N</span><span class="ch">E</span><span class="ch">T</span
+            ><span class="ch">T</span><span class="ch">E</span>
+          </div>
+          <div class="demo-subtitle">Frame the eye. Hold the moment.</div>
+        </div>
+      </div>
+
+      <!-- The vignette component -->
+      <div
+        id="hf-vignette"
+        style="
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          pointer-events: none;
+          z-index: 90;
+        "
+      ></div>
+
+      <style>
+        .demo-bg {
+          width: 1920px;
+          height: 1080px;
+          background:
+            radial-gradient(
+              circle at 22% 28%,
+              rgba(255, 196, 130, 0.85),
+              rgba(255, 196, 130, 0) 38%
+            ),
+            radial-gradient(circle at 78% 78%, rgba(64, 175, 200, 0.55), rgba(64, 175, 200, 0) 42%),
+            radial-gradient(circle at 50% 50%, #3b2616 0%, #1a0e07 68%, #060403 100%);
+          position: relative;
+          overflow: hidden;
+          font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
+        }
+
+        .demo-haze {
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          border-radius: 50%;
+          transform: translate(-50%, -50%) scale(1);
+          pointer-events: none;
+          opacity: 0;
+        }
+        .haze-far {
+          width: 1400px;
+          height: 1400px;
+          background: radial-gradient(
+            circle,
+            rgba(255, 220, 180, 0.18),
+            rgba(255, 220, 180, 0) 65%
+          );
+          filter: blur(40px);
+        }
+        .haze-near {
+          width: 900px;
+          height: 900px;
+          background: radial-gradient(
+            circle,
+            rgba(255, 240, 210, 0.32),
+            rgba(255, 240, 210, 0) 60%
+          );
+          filter: blur(20px);
+        }
+
+        .demo-subject {
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          width: 520px;
+          height: 520px;
+          border-radius: 50%;
+          transform: translate(-50%, -50%);
+          background: radial-gradient(
+            circle at 35% 32%,
+            #fff6e0 0%,
+            #f4c47e 28%,
+            #b87a3f 62%,
+            #6b3d1c 88%,
+            #2a1607 100%
+          );
+          box-shadow:
+            inset -40px -40px 80px rgba(0, 0, 0, 0.55),
+            0 0 120px rgba(255, 180, 100, 0.35);
+          opacity: 0;
+        }
+
+        .demo-text {
+          position: absolute;
+          left: 0;
+          right: 0;
+          bottom: 12%;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          gap: 14px;
+          pointer-events: none;
+          /* Sits above the subject in document order; below the vignette in z-index */
+          z-index: 5;
+        }
+
+        .demo-title {
+          font-size: 108px;
+          font-weight: 800;
+          letter-spacing: 0.18em;
+          color: #f6ecd0;
+          text-shadow: 0 4px 24px rgba(0, 0, 0, 0.55);
+          opacity: 0;
+        }
+        .demo-title .ch {
+          display: inline-block;
+        }
+
+        .demo-subtitle {
+          font-size: 30px;
+          font-weight: 400;
+          letter-spacing: 0.32em;
+          text-transform: uppercase;
+          color: rgba(246, 236, 208, 0.72);
+          opacity: 0;
+        }
+
+        #hf-vignette {
+          background: radial-gradient(
+            var(--vignette-shape, ellipse) at center,
+            transparent var(--vignette-size, 45%),
+            var(--vignette-color, rgba(0, 0, 0, 0.7)) var(--vignette-edge, 100%)
+          );
+        }
+      </style>
+
+      <script>
+        (function () {
+          const tl = gsap.timeline({ paused: true });
+
+          // Reveal the backdrop subject and haze first so the vignette has
+          // something to frame. Without a subject the effect reads as a flat
+          // dark gradient — uninteresting in a still preview.
+          tl.to(".haze-far", { opacity: 1, duration: 0.8, ease: "power2.out" }, 0.0);
+          tl.to(".haze-near", { opacity: 1, duration: 0.8, ease: "power2.out" }, 0.15);
+          tl.to(".demo-subject", { opacity: 1, scale: 1, duration: 1.0, ease: "power3.out" }, 0.1);
+
+          // Title + subtitle settle in. The letters settle from wider spacing to their
+          // resting spacing — the faithful smooth equivalent of a letter-spacing tween is a
+          // per-glyph x spread (transform, sub-pixel smooth), NOT a uniform scale (which
+          // would resize the glyphs instead of closing the gaps). letter-spacing holds at
+          // its CSS resting 0.18em; each glyph starts offset by the extra gap the original
+          // tween opened — (0.32em − 0.18em) × 108px ≈ 15.12px per gap — and converges to 0,
+          // centered about the word (8 chars → center at index 3.5).
+          tl.fromTo(
+            ".demo-title",
+            { opacity: 0, y: 18 },
+            { opacity: 1, y: 0, duration: 1.0, ease: "power3.out" },
+            0.6,
+          );
+          tl.from(
+            ".demo-title .ch",
+            { x: (i) => (i - 3.5) * 15.12, duration: 1.0, ease: "power3.out" },
+            0.6,
+          );
+          tl.to(".demo-subtitle", { opacity: 1, duration: 0.8, ease: "power3.out" }, 1.0);
+
+          // Vignette: start visibly soft (so viewers see the unframed scene),
+          // then ramp to a strong cinematic vignette and hold through the
+          // capture-time peak (~3.0s, picked to match the catalog thumbnail
+          // sampling at `Math.min(3.0, duration * 0.6)` for duration=5).
+          gsap.set("#hf-vignette", {
+            "--vignette-color": "rgba(0, 0, 0, 0.35)",
+            "--vignette-size": "70%",
+            "--vignette-edge": "100%",
+          });
+          tl.to(
+            "#hf-vignette",
+            {
+              "--vignette-color": "rgba(0, 0, 0, 0.92)",
+              "--vignette-size": "26%",
+              duration: 1.6,
+              ease: "power2.inOut",
+            },
+            1.4,
+          );
+
+          // Gentle breathing for the video loop so the effect reads as alive,
+          // not static. Keeps the still-frame at peak intensity around t≈3s.
+          tl.to(
+            "#hf-vignette",
+            { "--vignette-size": "32%", duration: 0.9, ease: "sine.inOut" },
+            3.4,
+          );
+          tl.to(
+            "#hf-vignette",
+            { "--vignette-size": "26%", duration: 0.9, ease: "sine.inOut" },
+            4.3,
+          );
+
+          window.__timelines = window.__timelines || {};
+          window.__timelines["vignette-demo"] = tl;
+        })();
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/vignette/vignette.html b/docs/public/catalog/components/vignette/vignette.html
new file mode 100644
index 0000000000..18ba2d0d50
--- /dev/null
+++ b/docs/public/catalog/components/vignette/vignette.html
@@ -0,0 +1,51 @@
+<!--
+  Vignette — cinematic radial darkening overlay.
+
+  Usage: paste this snippet inside your composition's positioned stage.
+  The overlay covers the full viewport with pointer-events: none so it
+  sits on top of all content without blocking interaction.
+
+  Customize:
+  - --vignette-color: edge color and alpha (default rgba(0, 0, 0, 0.7))
+  - --vignette-size: where the transparent center ends (default 45%)
+  - --vignette-edge: where the color reaches its final stop (default 100%)
+  - --vignette-shape: ellipse | circle (default ellipse)
+  - z-index: defaults to 90 so grain-overlay (100) reads on top
+-->
+
+<div
+  id="hf-vignette"
+  style="
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 90;
+  "
+></div>
+
+<style>
+  #hf-vignette {
+    background: radial-gradient(
+      var(--vignette-shape, ellipse) at center,
+      transparent var(--vignette-size, 45%),
+      var(--vignette-color, rgba(0, 0, 0, 0.7)) var(--vignette-edge, 100%)
+    );
+  }
+</style>
+
+<!--
+  Timeline integration example (add to your composition's GSAP timeline):
+
+  // Fade the vignette in over the first second
+  tl.fromTo("#hf-vignette",
+    { "--vignette-color": "rgba(0, 0, 0, 0)" },
+    { "--vignette-color": "rgba(0, 0, 0, 0.7)", duration: 1, ease: "power2.out" },
+    0,
+  );
+
+  // Or breathe the size in and out (works with any easing)
+  tl.to("#hf-vignette", { "--vignette-size": "35%", duration: 1, ease: "sine.inOut" }, 2);
+-->
diff --git a/docs/public/catalog/components/vox-annotate/README.md b/docs/public/catalog/components/vox-annotate/README.md
new file mode 100644
index 0000000000..d186ee2140
--- /dev/null
+++ b/docs/public/catalog/components/vox-annotate/README.md
@@ -0,0 +1,73 @@
+# vox-annotate
+
+The Vox-style annotate gesture: a short line of display text settles in, then
+on one cue a keyword gets a hand-drawn marker WHILE a thin connector draws
+from the marker up to a mono callout label that fades in at its end. Marker,
+connector, and label are one choreographed beat, not three events; the whole
+rig rides the keyword's settle pop as the ink lands.
+
+Absorbs `marker-highlight`: the four stroke styles (highlight, circle,
+underline, scribble) and the draw mechanic are inherited from that donor
+verbatim. Strokes reveal by a getTotalLength dash tween with both endpoints
+explicit (never the `pathLength` attribute, never `non-scaling-stroke` on a
+dashed path), so seeks in either direction never leave stale paint. Set
+`note` empty and vox-annotate degrades to exactly the donor's behavior:
+marker only.
+
+## Files
+
+- `vox-annotate.html`: the mountable sub-composition (install target:
+  `compositions/components/vox-annotate.html`).
+- `registry-item.json`: registry metadata and the variables block.
+- `demo.html`: standalone 1920x1080 host mounting the primitive with
+  non-default variables.
+
+## Variables
+
+| id        | type   | default                        | notes                                                                     |
+| --------- | ------ | ------------------------------ | ------------------------------------------------------------------------- |
+| `text`    | string | `Ship the story, not the spec` | the full line; may wrap, stays centered                                   |
+| `keyword` | string | `story`                        | first case-insensitive substring match gets the annotation; empty = none  |
+| `note`    | string | `the annotate beat`            | mono callout at the connector's end; empty draws the marker only          |
+| `style`   | enum   | `highlight`                    | `highlight`, `circle`, `underline`, or `scribble`                         |
+| `draw_at` | number | `0.9`                          | gesture cue in seconds from mount start; clamped ahead of any exit        |
+| `accent`  | enum   | `green`                        | `green` maps to `--brand`, `blue` to `--accent`, `violet` to `--accent-2` |
+| `exit`    | enum   | `none`                         | `none` holds the lockup; `fade` and `up` release the stage                |
+
+Envelope: IN = 0.55s rise, GESTURE = 0.96s anchored at `draw_at` (marker
+0.60s; connector 0.45s starting 0.36s in; label fade-up 0.30s starting 0.66s
+in), HOLD is the sole elastic phase, OUT = 0.45s only when `exit` is `fade`
+or `up`. The `annotate-draw` sync point fires at `draw_at`.
+
+## Layout notes
+
+The annotation anchors above and to the right of the keyword and needs
+headroom: the callout box spans about 19cqh above the line. With centered
+single-line text the default stage always has room; if you mount the
+primitive very short and wide, prefer `underline` or `highlight` (the
+`circle` box extends furthest) and keep `note` short. The callout stays on
+one line by design.
+
+## Worked example
+
+```bash
+npx hyperframes add vox-annotate
+```
+
+Mount it from a host composition like any sub-composition:
+
+```html
+<div
+  class="clip"
+  data-composition-id="vox-annotate"
+  data-composition-src="./components/vox-annotate.html"
+  data-variable-values='{"text":"Latency fell 40 percent","keyword":"40 percent","note":"p99, last quarter","style":"circle","draw_at":1.1}'
+  data-start="2"
+  data-duration="4"
+  data-track-index="0"
+></div>
+```
+
+The line rises in, and at 1.1s one gesture circles the number, draws the
+connector, and lands the mono note. The lockup then holds until the frame
+cuts (`exit` defaults to `none`; frame roots own scene transitions).
diff --git a/docs/public/catalog/components/vox-annotate/demo.html b/docs/public/catalog/components/vox-annotate/demo.html
new file mode 100644
index 0000000000..80559a639b
--- /dev/null
+++ b/docs/public/catalog/components/vox-annotate/demo.html
@@ -0,0 +1,103 @@
+<!doctype html>
+<!--
+  vox-annotate demo. This standalone composition mounts the primitive through
+  data-composition-src. Non-default text, keyword, note, style, accent, and
+  cue prove the variable path while the primitive remains elastic to its host.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Vox Annotate Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #0b0c0e);
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --muted: #94a3b8;
+        --surface: #14171c;
+        --border: #343a46;
+        --brand: #71f5a7;
+        --accent: #61a8ff;
+        --accent-2: #c5a3ff;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 44%, #12151b 0%, var(--bg, #0b0c0e) 74%);
+      }
+
+      .mount-card {
+        position: absolute;
+        width: 78%;
+        height: 62%;
+        left: 11%;
+        top: 19%;
+        container-type: size;
+        overflow: hidden;
+        border-radius: 28px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="vox-annotate-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="vox-annotate-mount"
+        class="mount-card clip"
+        data-composition-id="vox-annotate"
+        data-composition-src="./vox-annotate.html"
+        data-variable-values='{"text":"Numbers need context to land","keyword":"context","note":"this is the point","style":"circle","accent":"violet","draw_at":1.2}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="1497"
+        data-height="670"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["vox-annotate-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "vox-annotate.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/vox-annotate/vox-annotate.html b/docs/public/catalog/components/vox-annotate/vox-annotate.html
new file mode 100644
index 0000000000..d0d0ea6341
--- /dev/null
+++ b/docs/public/catalog/components/vox-annotate/vox-annotate.html
@@ -0,0 +1,477 @@
+<!doctype html>
+<!--
+  vox-annotate: HyperFrames video primitive (text effects / annotation)
+
+  The Vox-style annotate gesture: a keyword inside a held sentence gets a
+  hand-drawn marker WHILE a thin connector draws from the marker up to a
+  mono callout label that fades in at the connector's end. Marker, connector,
+  and label are ONE choreographed beat on the cue, not three events.
+
+  Absorbs marker-highlight: the four marker stroke styles and the
+  getTotalLength dash law are inherited from that donor verbatim (never the
+  pathLength attribute, never non-scaling-stroke on a dashed path; dash
+  geometry is set from the measured length and revealed by an explicit
+  fromTo on strokeDashoffset, so reverse seeks never leave stale paint).
+
+  Variables:
+    text (string): the full line.
+    keyword (string): first case-insensitive substring match inside text
+      gets the marker and the annotation. Empty or unmatched renders the
+      line with no annotation. Keep it a word or short phrase; it stays on
+      one line.
+    note (string): the mono callout label at the end of the connector.
+      Empty draws the marker only (no connector, no label).
+    style (highlight | circle | underline | scribble): marker shape.
+    draw_at (seconds): cue for the gesture, relative to mount start.
+      Clamped so the whole gesture completes before any exit begins.
+    accent (green | blue | violet): annotation ink via the contract token map.
+    exit (none | fade | up, default none): frame roots own transitions;
+      holds end films.
+
+  Envelope, fixed IN and OUT with elastic HOLD only (never time-scaled):
+    IN_BASE      = 0.55s  text rises into place
+    GESTURE_BASE = 0.96s  anchored at draw_at: marker 0.60s, connector
+                          0.45s from 0.36s, label fade-up 0.30s from 0.66s,
+                          settle pop on the keyword as the ink lands
+    HOLD         = max(0, D - phases), completely still
+    OUT_BASE     = 0s for exit none, otherwise 0.45s
+    If D is shorter than the fixed phases, they compress together.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, has no data-width or
+  data-height, and registers one paused timeline under the literal
+  vox-annotate key.
+-->
+<html
+  lang="en"
+  data-composition-id="vox-annotate"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "text", "type": "string", "role": "content", "label": "Text", "description": "Full line of display text.", "default": "Ship the story, not the spec" },
+    { "id": "keyword", "type": "string", "role": "content", "label": "Keyword", "description": "First case-insensitive substring match in text receives the marker and annotation. Empty or unmatched draws nothing.", "default": "story" },
+    { "id": "note", "type": "string", "role": "content", "label": "Note", "description": "Mono callout label at the end of the connector. Empty draws the marker only.", "default": "the annotate beat" },
+    { "id": "style", "type": "enum", "role": "style", "label": "Marker style", "description": "Shape of the hand-drawn marker stroke.", "default": "highlight", "options": [{ "value": "highlight", "label": "Highlight" }, { "value": "circle", "label": "Circle" }, { "value": "underline", "label": "Underline" }, { "value": "scribble", "label": "Scribble" }] },
+    { "id": "draw_at", "type": "number", "role": "timing", "label": "Draw at", "description": "Second (from mount start) the annotate gesture starts. Clamped so the gesture completes before any exit.", "default": 0.9, "min": 0, "step": 0.1, "unit": "s" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Annotation ink color from the contract token map.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the lockup holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Vox Annotate</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="vox-annotate" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            background: var(--bg, #0b0c0e);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .va-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+          }
+
+          .va-stage {
+            max-width: 84cqw;
+            text-align: center;
+            will-change: transform, opacity;
+          }
+
+          .va-text {
+            margin: 0;
+            font-size: var(--va-font-size, min(8cqw, 15cqh));
+            font-weight: 600;
+            line-height: 1.16;
+            letter-spacing: -0.03em;
+          }
+
+          .va-em {
+            position: relative;
+            display: inline-block;
+            white-space: nowrap;
+            will-change: transform;
+          }
+
+          .va-em-text {
+            position: relative;
+            z-index: 1;
+          }
+
+          .va-mark {
+            position: absolute;
+            z-index: 0;
+            overflow: visible;
+          }
+
+          /* Per-style marker box around the keyword. Explicit width/height
+             (svg is a replaced element: inset-stretching would fall back to
+             its intrinsic viewBox ratio); then preserveAspectRatio="none"
+             stretches the authored path (and its stroke) into the box, which
+             is exactly the marker-nib distortion we want on a dashed path. */
+          .va-em[data-marker-style="highlight"] .va-mark {
+            left: -3%;
+            top: 14%;
+            width: 106%;
+            height: 76%;
+          }
+
+          .va-em[data-marker-style="underline"] .va-mark {
+            left: -2%;
+            bottom: -14%;
+            width: 105%;
+            height: 22%;
+            z-index: 2;
+          }
+
+          .va-em[data-marker-style="circle"] .va-mark {
+            left: -13%;
+            top: -26%;
+            width: 126%;
+            height: 152%;
+            z-index: 2;
+          }
+
+          .va-em[data-marker-style="scribble"] .va-mark {
+            left: -2%;
+            top: 12%;
+            width: 104%;
+            height: 76%;
+            z-index: 2;
+          }
+
+          /* Annotation rig: connector + callout live in one box anchored
+             above the keyword, so the whole gesture shares the pop. */
+          .va-anno {
+            position: absolute;
+            left: 55%;
+            bottom: calc(100% + 1.6cqh);
+            width: 26cqw;
+            height: 19cqh;
+            z-index: 3;
+          }
+
+          .va-conn {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+            overflow: visible;
+          }
+
+          .va-note {
+            position: absolute;
+            top: -1.2cqh;
+            right: -2cqw;
+            max-width: 30cqw;
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            font-size: min(2.4cqw, 4.4cqh);
+            font-weight: 500;
+            letter-spacing: 0.05em;
+            line-height: 1.25;
+            text-align: left;
+            white-space: nowrap;
+            will-change: transform, opacity;
+          }
+        </style>
+
+        <div
+          id="vox-annotate-clip"
+          class="va-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="va-stage">
+            <p class="va-text"></p>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            // Literal key: the flattening step strips data-composition-id off
+            // the mounted root, so reading it back would register "null".
+            var compositionId = "vox-annotate";
+            var stage = root.querySelector(".va-stage");
+            var textEl = root.querySelector(".va-text");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var text =
+              vars.text == null
+                ? "Ship the story, not the spec"
+                : String(vars.text).trim().replace(/\s+/g, " ");
+            var keyword =
+              vars.keyword == null ? "story" : String(vars.keyword).trim().replace(/\s+/g, " ");
+            var note =
+              vars.note == null
+                ? "the annotate beat"
+                : String(vars.note).trim().replace(/\s+/g, " ");
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            // Hand-drawn stroke library, inherited from marker-highlight.
+            // Paths are authored in a fixed viewBox and stretched into the
+            // word box; wobble is baked into control points, never randomized.
+            var markerStyles = {
+              highlight: {
+                viewBox: "0 0 100 40",
+                d: "M 3 24 C 22 20.5, 47 25.5, 68 22.5 C 79 21, 90 23, 97 21.5",
+                strokeWidth: 26,
+                opacity: 0.5,
+              },
+              circle: {
+                viewBox: "0 0 100 40",
+                d: "M 22 7 C 58 1, 95 8, 97 20 C 99 31, 74 38, 44 37 C 16 36, 2 29, 3 19 C 4 10, 22 4, 52 4.5",
+                strokeWidth: 2.8,
+                opacity: 1,
+              },
+              underline: {
+                viewBox: "0 0 100 12",
+                d: "M 2 7 C 20 4.5, 46 8.5, 66 6 C 80 4.5, 92 7.5, 98 5.5",
+                strokeWidth: 4.5,
+                opacity: 1,
+              },
+              scribble: {
+                viewBox: "0 0 100 40",
+                d: "M 6 13 C 34 9.5, 66 11, 94 9 C 60 15, 26 16, 7 20 C 36 18, 68 21, 93 18 C 62 25, 28 27, 8 29",
+                strokeWidth: 5,
+                opacity: 0.65,
+              },
+            };
+            var styleName = Object.prototype.hasOwnProperty.call(markerStyles, vars.style)
+              ? vars.style
+              : "highlight";
+            var marker = markerStyles[styleName];
+            var svgNS = "http://www.w3.org/2000/svg";
+
+            // Split text around the first case-insensitive keyword match.
+            // textContent nodes only, never innerHTML.
+            var matchIndex =
+              keyword.length > 0 ? text.toLowerCase().indexOf(keyword.toLowerCase()) : -1;
+            var emEl = null;
+            var markPath = null;
+            var connPath = null;
+            var noteEl = null;
+            if (matchIndex >= 0) {
+              var before = text.slice(0, matchIndex);
+              var matched = text.slice(matchIndex, matchIndex + keyword.length);
+              var after = text.slice(matchIndex + keyword.length);
+              if (before) textEl.appendChild(document.createTextNode(before));
+
+              emEl = document.createElement("span");
+              emEl.className = "va-em";
+              emEl.setAttribute("data-marker-style", styleName);
+
+              var markSvg = document.createElementNS(svgNS, "svg");
+              markSvg.setAttribute("class", "va-mark");
+              markSvg.setAttribute("viewBox", marker.viewBox);
+              markSvg.setAttribute("preserveAspectRatio", "none");
+              markSvg.setAttribute("aria-hidden", "true");
+              markPath = document.createElementNS(svgNS, "path");
+              markPath.setAttribute("d", marker.d);
+              markPath.setAttribute("fill", "none");
+              markPath.setAttribute("stroke-width", String(marker.strokeWidth));
+              markPath.setAttribute("stroke-linecap", "round");
+              markPath.setAttribute("stroke-linejoin", "round");
+              // style.stroke, not the presentation attribute: var() only
+              // resolves as a CSS value.
+              markPath.style.stroke = accentColors[accent];
+              markSvg.appendChild(markPath);
+
+              var emText = document.createElement("span");
+              emText.className = "va-em-text";
+              emText.textContent = matched;
+
+              emEl.appendChild(markSvg);
+              emEl.appendChild(emText);
+
+              // Annotation rig: connector path curving up from the marker to
+              // the callout. The viewBox aspect roughly matches the anno box
+              // at 16:9 so the hand-drawn stroke stays near-even.
+              if (note.length > 0) {
+                var anno = document.createElement("span");
+                anno.className = "va-anno";
+                anno.setAttribute("aria-hidden", "true");
+
+                var connSvg = document.createElementNS(svgNS, "svg");
+                connSvg.setAttribute("class", "va-conn");
+                connSvg.setAttribute("viewBox", "0 0 240 100");
+                connSvg.setAttribute("preserveAspectRatio", "none");
+                connPath = document.createElementNS(svgNS, "path");
+                connPath.setAttribute(
+                  "d",
+                  "M 10 94 C 52 82, 96 52, 148 32 C 176 21, 200 16, 218 14",
+                );
+                connPath.setAttribute("fill", "none");
+                connPath.setAttribute("stroke-width", "2.6");
+                connPath.setAttribute("stroke-linecap", "round");
+                connPath.style.stroke = accentColors[accent];
+                connSvg.appendChild(connPath);
+
+                noteEl = document.createElement("span");
+                noteEl.className = "va-note";
+                noteEl.textContent = note;
+                noteEl.style.color = accentColors[accent];
+
+                anno.appendChild(connSvg);
+                anno.appendChild(noteEl);
+                emEl.appendChild(anno);
+              }
+
+              textEl.appendChild(emEl);
+              if (after) textEl.appendChild(document.createTextNode(after));
+            } else {
+              textEl.textContent = text;
+            }
+            textEl.setAttribute("aria-label", text);
+
+            // Deterministic character-count fit; the line may wrap, the
+            // keyword never wraps internally.
+            var characters = Math.max(1, Array.from(text).length);
+            var fitted = Math.max(4.2, Math.min(9, 175 / characters));
+            root.style.setProperty("--va-font-size", "min(" + fitted.toFixed(3) + "cqw, 15cqh)");
+
+            // RETIME RANGE: fixed phases; HOLD is the only elastic span.
+            var IN_BASE = 0.55;
+            var DRAW_BASE = 0.6;
+            var CONN_BASE = 0.45;
+            var NOTE_BASE = 0.3;
+            var POP_BASE = 0.32;
+            var GESTURE_BASE = 0.96; // marker + connector + label span
+            var OUT_BASE = exit === "none" ? 0 : 0.45;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var totalBase = IN_BASE + GESTURE_BASE + OUT_BASE;
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var DRAW = DRAW_BASE * scale;
+            var CONN = CONN_BASE * scale;
+            var NOTE = NOTE_BASE * scale;
+            var POP = POP_BASE * scale;
+            var GESTURE = GESTURE_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var OUT_START = duration - OUT;
+
+            var drawAtRaw = Number(vars.draw_at);
+            var drawAt = Number.isFinite(drawAtRaw) ? Math.max(0, drawAtRaw) : 0.9;
+            // The whole gesture always lands before the exit.
+            drawAt = Math.min(drawAt, Math.max(0, OUT_START - GESTURE));
+
+            gsap.set(stage, { opacity: 0, y: "6cqh" });
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: the line rises into place.
+            tl.fromTo(
+              stage,
+              { opacity: 0, y: "6cqh" },
+              { opacity: 1, y: "0cqh", duration: IN, ease: "power3.out" },
+              0,
+            );
+
+            // GESTURE: marker, connector, and label as one beat on the cue.
+            // Dash reveals from measured lengths; both endpoints explicit so
+            // any seek in either direction is correct without playing through.
+            if (markPath) {
+              var markLength = markPath.getTotalLength();
+              markPath.style.strokeDasharray = String(markLength);
+              // Hidden until the cue: at dashoffset == length the round cap
+              // still paints a dot at the path start, so the ink is opacity 0
+              // until the exact frame the draw begins.
+              gsap.set(markPath, { strokeDashoffset: markLength, opacity: 0 });
+              tl.set(markPath, { opacity: marker.opacity }, drawAt);
+              tl.fromTo(
+                markPath,
+                { strokeDashoffset: markLength },
+                { strokeDashoffset: 0, duration: DRAW, ease: "power2.inOut" },
+                drawAt,
+              );
+              // Settle pop on the keyword as the ink lands. The annotation
+              // rig rides the same span, so the whole gesture breathes once.
+              tl.fromTo(
+                emEl,
+                { scale: 1 },
+                {
+                  scale: 1.045,
+                  duration: POP / 2,
+                  ease: "power1.out",
+                  yoyo: true,
+                  repeat: 1,
+                },
+                drawAt + DRAW * 0.7,
+              );
+            }
+
+            if (connPath) {
+              var connAt = drawAt + DRAW * 0.6;
+              var connLength = connPath.getTotalLength();
+              connPath.style.strokeDasharray = String(connLength);
+              gsap.set(connPath, { strokeDashoffset: connLength, opacity: 0 });
+              tl.set(connPath, { opacity: 0.9 }, connAt);
+              tl.fromTo(
+                connPath,
+                { strokeDashoffset: connLength },
+                { strokeDashoffset: 0, duration: CONN, ease: "power2.out" },
+                connAt,
+              );
+            }
+
+            if (noteEl) {
+              var noteAt = drawAt + DRAW * 0.6 + CONN * 0.65;
+              tl.fromTo(
+                noteEl,
+                { opacity: 0, y: "1.6cqh" },
+                { opacity: 1, y: "0cqh", duration: NOTE, ease: "power2.out" },
+                noteAt,
+              );
+            }
+
+            // HOLD: completely still.
+
+            // OUT: optional departure; exit none holds until the frame cuts.
+            if (exit === "fade") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "up") {
+              tl.to(stage, { opacity: 0, y: "-7cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/whip-pan-cut/README.md b/docs/public/catalog/components/whip-pan-cut/README.md
new file mode 100644
index 0000000000..3d01245df5
--- /dev/null
+++ b/docs/public/catalog/components/whip-pan-cut/README.md
@@ -0,0 +1,101 @@
+# whip-pan-cut
+
+The louder sibling of cut-the-curve: scene A whips off laterally with
+directional motion blur while scene B enters in the same direction at matched
+velocity, on a speed-ramp profile (accelerate, fast middle, decelerating
+catch). Both scenes ride one strip, with B docked one frame-width beyond A
+along the travel direction, so the pan crosses a single continuous surface and
+the seam velocity is exact by construction. The blur is a capped directional
+SVG feGaussianBlur on the mover only, peaking at mid-whip and resolving to 0
+at both ends; a hairline accent seam rides the scene boundary and is visible
+only while the whip runs.
+
+## Files
+
+- `whip-pan-cut.html`: the mountable sub-composition (install target:
+  `compositions/components/whip-pan-cut.html`).
+- `registry-item.json`: registry metadata and the variables block.
+- `demo.html`: a 1920x1080 host that mounts the primitive with non-default
+  variables (QA gallery input).
+
+## Variables
+
+| id          | type   | default | notes                                                                     |
+| ----------- | ------ | ------- | ------------------------------------------------------------------------- |
+| `direction` | enum   | `left`  | shared travel direction for both scenes (`left` or `right`)               |
+| `whip_at`   | number | `0.25`  | seconds after mount start when the whip begins (0 to 8)                   |
+| `accent`    | enum   | `green` | `green` maps to `--brand`, `blue` to `--accent`, `violet` to `--accent-2` |
+| `exit`      | enum   | `none`  | `none` rests on scene B until the frame cuts; `fade` and `up` depart it   |
+
+Envelope (transition profile, no elastic HOLD law; cut-the-curve precedent):
+LEAD = `whip_at` rest on scene A, WHIP = 0.55s power3.inOut, REST = elastic
+remainder still on scene B, EXIT tail = min(0.35s, 25% of D) only when `exit`
+is enabled. A short clip window may end while the catch is still decelerating.
+The `whip-cut` sync point (`hf:sfx` id `whip-cut`) fires at peak velocity,
+0.53s at defaults. Retime range 0.6s to 3s.
+
+## The slot mechanism
+
+The primitive ships two named slot panels inside its `<template>` (the
+before-after-wipe convention):
+
+```html
+<div class="wpc-slot" data-slot="before">...</div>
+<div class="wpc-slot" data-slot="after">...</div>
+```
+
+Each slot's default children are a token-styled wireframe card (muted on the
+before layer, brand-tinted on the after layer), so an untouched mount still
+reads as a real scene change. To show your own content, install the component
+and **replace the children of each `[data-slot]` element in your installed
+copy** (the runtime clones only the primitive's own template on mount, so slot
+content lives in the component file, not on the host clip).
+
+Rules:
+
+- Both slots are full-bleed. Scene B is automatically positioned one
+  frame-width beyond scene A along the travel direction; author both as
+  normal full-frame scenes.
+- Direct `img`/`video` children are automatically sized to cover the panel
+  (`object-fit: cover`). Arbitrary HTML works too; size it in `cqw`/`cqh`.
+- Keep the seam hairline and the blur filter alone; both are owned by the
+  timeline, and the filter must stay on the strip (the mover) only.
+
+## Worked example
+
+Install, then fill the slots with two screenshots:
+
+```bash
+npx hyperframes add whip-pan-cut
+```
+
+In `compositions/components/whip-pan-cut.html`, replace each slot's default
+block:
+
+```html
+<div class="wpc-slot" data-slot="before">
+  <img src="../../assets/scene-dashboard.png" alt="" />
+</div>
+...
+<div class="wpc-slot" data-slot="after">
+  <img src="../../assets/scene-editor.png" alt="" />
+</div>
+```
+
+Mount it from a host composition like any sub-composition:
+
+```html
+<div
+  class="clip"
+  data-composition-id="whip-pan-cut"
+  data-composition-src="./components/whip-pan-cut.html"
+  data-variable-values='{"direction":"right","whip_at":0.3,"accent":"blue"}'
+  data-start="4"
+  data-duration="1.2"
+  data-track-index="0"
+></div>
+```
+
+Scene A rests for 0.3s, the whip screams right over 0.55s with the blur
+peaking at the midpoint, and scene B rests for the remainder of the clip
+window (`exit` defaults to `none`; frame roots own scene transitions).
diff --git a/docs/public/catalog/components/whip-pan-cut/demo.html b/docs/public/catalog/components/whip-pan-cut/demo.html
new file mode 100644
index 0000000000..07c0d36b9a
--- /dev/null
+++ b/docs/public/catalog/components/whip-pan-cut/demo.html
@@ -0,0 +1,106 @@
+<!doctype html>
+<!--
+  whip-pan-cut demo. Full-bleed mount on a dark token stage: the whip runs
+  rightward across the whole 1920x1080 frame with the violet seam accent,
+  proving the pan reads as one continuous surface with the blur peaking at
+  mid-whip and resolving sharp at the catch.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>whip-pan-cut Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #05070d);
+      }
+
+      #root {
+        --bg: #080b14;
+        --fg: #f8fafc;
+        --muted: #94a3b8;
+        --surface: #182033;
+        --border: #3b4863;
+        --brand: #22c55e;
+        --accent: #38bdf8;
+        --accent-2: #c5a3ff;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-body: Inter, system-ui, sans-serif;
+        --radius: 22px;
+        --space-1: 8px;
+        --space-2: 16px;
+        --space-3: 32px;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 42%, #10182b 0%, var(--bg, #080b14) 72%);
+      }
+
+      .mount-stage {
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        container-type: size;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="whip-pan-cut-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="1.2"
+      data-fps="30"
+    >
+      <div
+        id="whip-pan-cut-mount"
+        class="mount-stage clip"
+        data-composition-id="whip-pan-cut"
+        data-composition-src="./whip-pan-cut.html"
+        data-variable-values='{"direction":"right","whip_at":0.35,"accent":"violet"}'
+        data-start="0"
+        data-duration="1.2"
+        data-track-index="0"
+        data-width="1920"
+        data-height="1080"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["whip-pan-cut-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "whip-pan-cut.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/whip-pan-cut/whip-pan-cut.html b/docs/public/catalog/components/whip-pan-cut/whip-pan-cut.html
new file mode 100644
index 0000000000..e0d0b4ff5c
--- /dev/null
+++ b/docs/public/catalog/components/whip-pan-cut/whip-pan-cut.html
@@ -0,0 +1,487 @@
+<!doctype html>
+<!--
+  whip-pan-cut: HyperFrames video primitive (transitions / bridge)
+
+  Concept: the louder sibling of cut-the-curve. Scene A whips off laterally
+  with directional motion blur while scene B enters in the same direction at
+  matched velocity, on a speed-ramp profile (accelerate, fast middle,
+  decelerating catch). Two full-bleed content slots (the before-after-wipe
+  convention) with token-styled defaults.
+
+  Wave K, unit K6. Velocity matching is structural: both scenes ride ONE
+  strip (B docked one frame-width beyond A along the travel direction) and
+  the strip runs a single power3.inOut tween, so the seam velocity is exact
+  by construction and the profile is fast-middle with a decelerating catch.
+
+  Motion blur follows the motion-blur-streak recipe: a directional SVG
+  feGaussianBlur (stdDeviation "X 0", horizontal axis only) applied to the
+  mover (the strip carries both transform and filter; nothing else is
+  filtered, and there is no 3D on the strip for the filter to flatten). The
+  blur envelope is CAPPED at 16px and peaks exactly at mid-whip (peak
+  velocity), resolving to 0 at both ends: power3.in up over the first half,
+  power3.out down over the second, mirroring the strip's inOut velocity. The
+  proxy value is re-written on every seek via onUpdate and seeded at setup so
+  frame 0 renders sharp.
+
+  A hairline accent seam rides the boundary between the two scenes; it is
+  visible only while the whip runs, so it reads as the frame edge screaming
+  past rather than persistent chrome.
+
+  Slots (see README.md for a worked example):
+    - [data-slot="before"]: scene A, on stage at mount. Replace the children
+      of this element in your installed copy. Default: a muted token
+      wireframe.
+    - [data-slot="after"]:  scene B, whipping in. Same mechanism. Default: a
+      brand-tinted version of the wireframe.
+    Direct img/video children of a slot are sized to cover the panel.
+
+  Variables (declared in data-composition-variables below):
+    - direction (left | right, default left): shared travel direction for
+      both scenes.
+    - whip_at (number, seconds, default 0.25): when the whip starts, relative
+      to mount start. Clamped so the whip always completes inside the clip.
+    - accent (green | blue | violet, default green): seam hairline and the
+      default after art tint. green maps to --brand, blue to --accent,
+      violet to --accent-2.
+    - exit (none | fade | up, default none): optional departure of the landed
+      scene B. Enabling it reserves a short tail window (min(0.35s, 25% of
+      D)) after B lands.
+
+  Envelope (transition profile, cut-the-curve precedent; the catch may still
+  be decelerating when a short clip window ends):
+    LEAD  = whip_at (scene A rests, readable)
+    WHIP  = 0.55s, power3.inOut, one frame-width of travel
+    REST  = elastic remainder, dead still on B
+    EXIT  = 0 when exit is none, else min(0.35s, 25% of D)
+    If D < LEAD + WHIP + EXIT, LEAD and WHIP scale down together.
+
+  Sync point: whip-cut at LEAD + WHIP/2 (peak velocity, 0.53s at defaults).
+
+  Sound cue: dispatches a bubbling `hf:sfx` CustomEvent with id "whip-cut"
+  at peak velocity. This primitive never plays audio.
+
+  Interruptible springs law (L1): the whip is a single owned tween on one
+  strip; a host redirect retargets the same transform channel and GSAP's
+  default overwrite preserves current velocity-position state at the
+  interruption frame (no snap-to-zero).
+
+  Mount contract: MOUNTABLE SUB-COMPOSITION. The runtime clones only
+  <template> contents; #root fills the host box (inset:0, container-type:
+  size), has no data-width/data-height, and registers one paused timeline
+  under the literal "whip-pan-cut" key (mount flattening strips
+  data-composition-id from the live root). Variables come from
+  window.__hyperframes.getVariables().
+-->
+<html
+  lang="en"
+  data-composition-id="whip-pan-cut"
+  data-composition-duration="1.2"
+  data-composition-variables='[
+    { "id": "direction", "type": "enum", "role": "motion", "label": "Direction", "description": "Shared travel direction for the outgoing and incoming scenes.", "default": "left", "options": [{ "value": "left", "label": "Left" }, { "value": "right", "label": "Right" }] },
+    { "id": "whip_at", "type": "number", "role": "timing", "label": "Whip start", "description": "Seconds after mount start when the whip begins.", "default": 0.25, "min": 0, "max": 8, "step": 0.05, "unit": "s" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Seam hairline and default after art tint.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure of the landed scene. Default none: it rests until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Whip Pan Cut</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="whip-pan-cut" data-duration="1.2" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          /* Root fills the host-owned box. Internal measurements use cqw/cqh
+             and every painted color comes from a contract token. */
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            background: var(--bg, #07111f);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+          }
+
+          .wpc-clip,
+          .wpc-strip,
+          .wpc-panel,
+          .wpc-slot {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+          }
+
+          .wpc-clip {
+            overflow: hidden;
+          }
+
+          /* The strip is the ONE mover: it carries both scenes, the transform
+             tween, and the directional blur filter. No 3D lives on it, so the
+             filter has nothing to flatten. */
+          .wpc-strip {
+            filter: url("#wpc-blur");
+            will-change: transform, filter;
+          }
+
+          .wpc-panel {
+            overflow: hidden;
+          }
+
+          /* Scene B docks one frame-width beyond scene A along the travel
+             direction, so the pan crosses one continuous surface. */
+          #root[data-direction="left"] .wpc-after {
+            left: 100%;
+          }
+
+          #root[data-direction="right"] .wpc-after {
+            left: -100%;
+          }
+
+          /* The seam hairline rides the boundary between the two scenes and
+             is timeline-owned: visible only while the whip runs. */
+          .wpc-seam {
+            position: absolute;
+            z-index: 3;
+            top: 0;
+            bottom: 0;
+            width: 0.35cqw;
+            transform: translateX(-50%);
+            background: var(--wpc-accent, #22c55e);
+            pointer-events: none;
+          }
+
+          #root[data-direction="left"] .wpc-seam {
+            left: 100%;
+          }
+
+          #root[data-direction="right"] .wpc-seam {
+            left: 0;
+          }
+
+          /* Caller-supplied media covers its panel edge to edge. */
+          .wpc-slot > img,
+          .wpc-slot > video {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+          }
+
+          /* Token-styled default slot content: a wireframe card that reads
+             muted on the before layer and brand-tinted on the after layer.
+             Callers replacing slot children never see any of this. */
+          .wpc-default {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+          }
+
+          .wpc-before .wpc-default {
+            background:
+              linear-gradient(
+                  color-mix(in srgb, var(--border, #334155) 34%, transparent) 0.12cqw,
+                  transparent 0.12cqw
+                )
+                0 0 / 5cqw 5cqw,
+              linear-gradient(
+                  90deg,
+                  color-mix(in srgb, var(--border, #334155) 34%, transparent) 0.12cqw,
+                  transparent 0.12cqw
+                )
+                0 0 / 5cqw 5cqw,
+              var(--surface, #172033);
+          }
+
+          .wpc-after .wpc-default {
+            background: linear-gradient(
+              135deg,
+              color-mix(in srgb, var(--brand, #22c55e) 32%, var(--surface, #172033)) 0%,
+              var(--surface, #172033) 58%,
+              color-mix(in srgb, var(--wpc-accent, #22c55e) 22%, var(--surface, #172033)) 100%
+            );
+          }
+
+          .wpc-card {
+            width: 56cqw;
+            height: 56cqh;
+            padding: var(--space-3, 4cqh) var(--space-3, 4cqw);
+            border: 0.16cqw solid var(--border, #334155);
+            border-radius: var(--radius, 2.4cqmin);
+            background: color-mix(in srgb, var(--surface, #172033) 88%, var(--bg, #07111f));
+            box-shadow: 0 2cqh 5cqw color-mix(in srgb, var(--bg, #07111f) 45%, transparent);
+          }
+
+          .wpc-after .wpc-card {
+            border-color: color-mix(
+              in srgb,
+              var(--wpc-accent, #22c55e) 52%,
+              var(--border, #334155)
+            );
+            background: color-mix(in srgb, var(--surface, #172033) 86%, var(--brand, #22c55e));
+          }
+
+          .wpc-bar {
+            width: 34%;
+            height: 4.4cqh;
+            margin-bottom: var(--space-3, 4cqh);
+            border-radius: 1.2cqh;
+            background: var(--muted, #94a3b8);
+            opacity: 0.5;
+          }
+
+          .wpc-after .wpc-bar {
+            background: var(--wpc-accent, #22c55e);
+            opacity: 0.92;
+          }
+
+          .wpc-line {
+            height: 2.4cqh;
+            margin-bottom: var(--space-2, 2.6cqh);
+            border-radius: 1.2cqh;
+            background: var(--muted, #94a3b8);
+            opacity: 0.4;
+          }
+
+          .wpc-line:nth-of-type(2) {
+            width: 92%;
+          }
+
+          .wpc-line:nth-of-type(3) {
+            width: 68%;
+          }
+
+          .wpc-line:nth-of-type(4) {
+            width: 44%;
+          }
+
+          .wpc-after .wpc-line {
+            background: color-mix(in srgb, var(--brand, #22c55e) 70%, var(--fg, #f8fafc));
+            opacity: 0.75;
+          }
+        </style>
+
+        <div
+          id="whip-pan-cut-clip"
+          class="wpc-clip clip"
+          data-start="0"
+          data-duration="1.2"
+          data-track-index="0"
+        >
+          <svg width="0" height="0" aria-hidden="true" style="position: absolute">
+            <defs>
+              <filter id="wpc-blur" x="-50%" y="-20%" width="200%" height="140%">
+                <feGaussianBlur class="wpc-blur-node" in="SourceGraphic" stdDeviation="0 0" />
+              </filter>
+            </defs>
+          </svg>
+
+          <div class="wpc-strip">
+            <section class="wpc-panel wpc-before" aria-label="Outgoing scene">
+              <div class="wpc-slot" data-slot="before">
+                <!-- SLOT "before": replace the children of this element with
+                     your own content (img, video, or HTML). -->
+                <div class="wpc-default" aria-hidden="true">
+                  <div class="wpc-card">
+                    <div class="wpc-bar"></div>
+                    <div class="wpc-line"></div>
+                    <div class="wpc-line"></div>
+                    <div class="wpc-line"></div>
+                  </div>
+                </div>
+              </div>
+            </section>
+
+            <section class="wpc-panel wpc-after" aria-label="Incoming scene">
+              <div class="wpc-slot" data-slot="after">
+                <!-- SLOT "after": replace the children of this element with
+                     your own content (img, video, or HTML). -->
+                <div class="wpc-default" aria-hidden="true">
+                  <div class="wpc-card">
+                    <div class="wpc-bar"></div>
+                    <div class="wpc-line"></div>
+                    <div class="wpc-line"></div>
+                    <div class="wpc-line"></div>
+                  </div>
+                </div>
+              </div>
+            </section>
+
+            <div class="wpc-seam" aria-hidden="true"></div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            // Literal id: mount flattening strips data-composition-id from the
+            // live root before this timeline registers.
+            var compositionId = "whip-pan-cut";
+            var strip = root.querySelector(".wpc-strip");
+            var seam = root.querySelector(".wpc-seam");
+            var blurNode = root.querySelector(".wpc-blur-node");
+
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var direction = vars.direction === "right" ? "right" : "left";
+            var rawWhipAt = vars.whip_at == null ? 0.25 : Number(vars.whip_at);
+            var whipAt = Number.isFinite(rawWhipAt) ? Math.max(0, Math.min(8, rawWhipAt)) : 0.25;
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #22c55e)",
+              blue: "var(--accent, #38bdf8)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            // The bundler mirrors composition variables as scoped CSS custom
+            // props, so this unit's own accent variable can shadow the
+            // contract --accent token inside the subtree ("blue" is a valid
+            // CSS color and would render pure blue). When the shadow is
+            // present, fall back to the literal contract value.
+            var computedAccent = getComputedStyle(root).getPropertyValue("--accent").trim();
+            if (
+              computedAccent === "green" ||
+              computedAccent === "blue" ||
+              computedAccent === "violet"
+            ) {
+              accentColors.blue = "#38bdf8";
+            }
+            // INVARIANT: only none | fade | up reaches the timeline.
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            root.dataset.direction = direction;
+            root.style.setProperty("--wpc-accent", accentColors[accent]);
+
+            // Travel measured in px ONCE at mount (cq units inside tweened
+            // transform values are a seek trap). One frame-width lands scene
+            // B exactly where scene A stood.
+            var travel = root.clientWidth || 1920;
+            var sign = direction === "left" ? -1 : 1;
+
+            // RETIME RANGE: 0.6s to 3s. LEAD and WHIP scale together only when
+            // D is too short. REST absorbs any remainder; this is a transition
+            // profile (cut-the-curve precedent), so a short clip window may
+            // end while the catch is still decelerating. Never timeScale().
+            var WHIP_DURATION_BASE = 0.55;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "1.2"));
+            var EXIT = exit === "none" ? 0 : Math.min(0.35, duration * 0.25);
+            var scale =
+              duration - EXIT < whipAt + WHIP_DURATION_BASE
+                ? (duration - EXIT) / (whipAt + WHIP_DURATION_BASE)
+                : 1;
+            var WHIP_AT = whipAt * scale;
+            var WHIP_DURATION = WHIP_DURATION_BASE * scale;
+            var WHIP_END = WHIP_AT + WHIP_DURATION;
+            var CUT_AT = WHIP_AT + WHIP_DURATION / 2;
+            var OUT_START = duration - EXIT;
+
+            // Blur cap per the motion-blur-streak recipe: peak stdDeviation
+            // stays well under the 30px readability ceiling.
+            var PEAK_BLUR = 16;
+            var blurProxy = { v: 0 };
+            function writeBlur() {
+              blurNode.setAttribute("stdDeviation", blurProxy.v + " 0");
+            }
+            // Seed frame 0 so a seek to t=0 renders sharp, not a stale blur.
+            writeBlur();
+
+            function fireSfx(id, t) {
+              root.dispatchEvent(
+                new CustomEvent("hf:sfx", { detail: { id: id, t: t }, bubbles: true }),
+              );
+            }
+
+            // Explicit both-endpoints state makes tl.seek(0) deterministic.
+            gsap.set(strip, { x: 0, y: 0, opacity: 1 });
+            gsap.set(seam, { autoAlpha: 0 });
+
+            var tl = gsap.timeline({ paused: true });
+
+            // WHIP: one strip, one speed-ramp tween. Both scenes share the
+            // transform, so seam velocity is matched by construction.
+            tl.fromTo(
+              strip,
+              { x: 0 },
+              { x: sign * travel, duration: WHIP_DURATION, ease: "power3.inOut" },
+              WHIP_AT,
+            );
+
+            // Blur envelope: peaks at mid-whip (peak velocity), zero at both
+            // ends. power3.in up / power3.out down mirrors the inOut ramp.
+            tl.to(
+              blurProxy,
+              { v: PEAK_BLUR, duration: WHIP_DURATION / 2, ease: "power3.in", onUpdate: writeBlur },
+              WHIP_AT,
+            );
+            tl.to(
+              blurProxy,
+              { v: 0, duration: WHIP_DURATION / 2, ease: "power3.out", onUpdate: writeBlur },
+              WHIP_AT + WHIP_DURATION / 2,
+            );
+
+            // Seam hairline: alive only while the whip runs.
+            tl.fromTo(
+              seam,
+              { autoAlpha: 0 },
+              {
+                autoAlpha: 1,
+                duration: Math.min(0.1 * scale, WHIP_DURATION),
+                ease: "power1.out",
+                immediateRender: false,
+              },
+              WHIP_AT,
+            );
+            tl.to(
+              seam,
+              { autoAlpha: 0, duration: 0.15 * scale, ease: "power1.in" },
+              Math.max(WHIP_AT, WHIP_END - 0.15 * scale),
+            );
+
+            tl.call(
+              function () {
+                fireSfx("whip-cut", CUT_AT);
+              },
+              [],
+              CUT_AT,
+            );
+
+            // REST: dead still on scene B until the frame cuts.
+
+            // EXIT: only when the exit variable asks for one; exit none holds
+            // the landed scene (frame roots own transitions).
+            if (exit !== "none") {
+              tl.to(strip, { opacity: 0, duration: EXIT, ease: "power2.in" }, OUT_START);
+              if (exit === "up") {
+                tl.to(strip, { y: "-6cqh", duration: EXIT, ease: "power2.in" }, OUT_START);
+              }
+            }
+
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/whiteboard-ink/README.md b/docs/public/catalog/components/whiteboard-ink/README.md
new file mode 100644
index 0000000000..ee223b003c
--- /dev/null
+++ b/docs/public/catalog/components/whiteboard-ink/README.md
@@ -0,0 +1,107 @@
+# whiteboard-ink
+
+A hand-drawn whiteboard sketch draws itself one measured stroke at a time
+while a pen nib rides the active ink front. Ships three preset sketches
+(bulb, flow, rocket) and a strokes slot: fill it with your own multi-stroke
+SVG paths and they become the drawing, with the same nib riding, per-stroke
+cadence, and ink law as the presets.
+
+## Files
+
+- `whiteboard-ink.html`: the mountable sub-composition (install target:
+  `compositions/components/whiteboard-ink.html`).
+- `registry-item.json`: registry metadata and the variables block.
+- `demo.html`: standalone mount used for QA.
+
+## Variables
+
+| id        | type   | default         | notes                                                                                 |
+| --------- | ------ | --------------- | ------------------------------------------------------------------------------------- |
+| `sketch`  | enum   | `bulb`          | preset sketch (`bulb`, `flow`, `rocket`); ignored when the strokes slot holds paths   |
+| `caption` | string | `Draw the idea` | short line revealed after the drawing completes; empty string shows none              |
+| `pen`     | enum   | `show`          | `hide` removes the traveling nib actor                                                |
+| `accent`  | enum   | `green`         | `green` maps to `--brand`, `blue` to `--accent`, `violet` to `--accent-2`             |
+| `exit`    | enum   | `none`          | `none` holds the final frame; `fade` releases opacity; `up` adds a small upward drift |
+
+Envelope: IN = 3.55s (3.25s sequential draw, then pen lift and caption),
+OUT = 0.45s only when `exit` is `fade` or `up`, HOLD is the sole elastic
+phase. The timeline is never time-scaled. The `ink-complete` sync point fires
+at 3.3s at defaults.
+
+## The strokes slot
+
+The primitive's SVG ships an empty named group:
+
+```html
+<g class="wbi-sketch" data-slot="strokes" data-sketch="custom" hidden></g>
+```
+
+To draw your own artwork, install the component and **fill this group with
+`<path>` elements in your installed copy** (the runtime clones only the
+primitive's own template on mount, so slot content lives in the component
+file, not on the host clip). As soon as the slot holds at least one path, it
+replaces the preset selected by `sketch`; leave it empty and the presets
+behave exactly as before.
+
+Rules:
+
+- Paths draw in document order, one at a time, with the nib hopping between
+  strokes. Each path is measured once with `getTotalLength`; that measurement
+  owns its dash array, cadence weight, and nib sampling. Author plain `d`
+  path data, no `pathLength` attribute, no `vector-effect`.
+- Coordinate space is the component viewBox, `0 0 1000 560`. Keep artwork
+  near that scale so the nib and stroke weight read correctly. A `transform`
+  on the slot group is honored (the nib maps through it).
+- Strokes render in `--fg` at width 6 by default. An authored `stroke-width`
+  attribute on a path wins. Fills are stripped (`fill: none`); this is a
+  line-draw primitive.
+- Mark a path `data-ink="accent"` to route it through the accent token map
+  (the `accent` variable picks `--brand`, `--accent`, or `--accent-2`), the
+  same treatment as each preset's single highlight stroke.
+- Many strokes are fine: when the per-stroke minimums would overrun the 3.25s
+  draw phase, the cadence compresses uniformly and stays sequential.
+
+## Worked example
+
+Install, then draw a custom "signal" mark with an accent underline:
+
+```bash
+npx hyperframes add whiteboard-ink
+```
+
+In `compositions/components/whiteboard-ink.html`, fill the slot group:
+
+```html
+<g class="wbi-sketch" data-slot="strokes" data-sketch="custom" hidden>
+  <path d="M 320 330 L 420 330 L 460 210 L 540 400 L 580 300 L 680 300"></path>
+  <path d="M 470 150 C 500 130 540 130 570 155"></path>
+  <path data-ink="accent" d="M 330 430 C 440 452 570 452 672 428"></path>
+</g>
+```
+
+Mount it from a host composition like any sub-composition:
+
+```html
+<div
+  class="clip"
+  data-composition-id="whiteboard-ink"
+  data-composition-src="./components/whiteboard-ink.html"
+  data-variable-values='{"caption":"Find the signal","accent":"blue","exit":"none"}'
+  data-start="0"
+  data-duration="5"
+  data-track-index="0"
+></div>
+```
+
+The three paths draw in order (zigzag, hat, then the accent underline in
+`--accent` blue), the nib rides each ink front and hops between strokes, and
+the caption fades up once the underline lands.
+
+## Contract notes
+
+- One paused GSAP timeline registered at `window.__timelines["whiteboard-ink"]`.
+- Elastic root: no `data-width`/`data-height`, `container-type: size`, sized
+  in `cq*` units; the HOLD phase absorbs any mount duration.
+- Deterministic and seek-safe: dashed draw-on via `getTotalLength` in native
+  SVG user units, never `pathLength`, never `non-scaling-stroke` on dashed
+  paths; SVG group visibility toggles via the `hidden` attribute.
diff --git a/docs/public/catalog/components/whiteboard-ink/demo.html b/docs/public/catalog/components/whiteboard-ink/demo.html
new file mode 100644
index 0000000000..874773a8ce
--- /dev/null
+++ b/docs/public/catalog/components/whiteboard-ink/demo.html
@@ -0,0 +1,109 @@
+<!doctype html>
+<!--
+  whiteboard-ink demo. This standalone composition mounts the primitive with
+  non-default sketch, caption, and accent values while leaving the pen visible.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Whiteboard Ink Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0b0c0e;
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --muted: #94a3b8;
+        --surface: #171a20;
+        --border: #343a46;
+        --brand: #71f5a7;
+        --accent: #61a8ff;
+        --accent-2: #c5a3ff;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-body: Inter, system-ui, sans-serif;
+        --space-1: 1.8cqh;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(circle at 50% 44%, #20242b 0%, #0b0c0e 70%);
+      }
+
+      .mount-card {
+        --bg: #f5f0e5;
+        --fg: #20242b;
+        --muted: #667085;
+        --surface: #fffdf8;
+        width: 62%;
+        height: 72%;
+        left: 19%;
+        top: 14%;
+        container-type: size;
+        overflow: hidden;
+        border: 1px solid color-mix(in srgb, var(--border, #343a46) 44%, transparent);
+        border-radius: 28px;
+        background: var(--bg, #f5f0e5);
+        box-shadow: 0 42px 110px rgba(0, 0, 0, 0.46);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="whiteboard-ink-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+      data-fps="30"
+    >
+      <div
+        id="wbi-mount"
+        class="mount-card clip"
+        data-composition-id="whiteboard-ink"
+        data-composition-src="./whiteboard-ink.html"
+        data-variable-values='{"sketch":"rocket","caption":"Sketch the launch","pen":"show","accent":"violet"}'
+        data-start="0"
+        data-duration="5"
+        data-track-index="0"
+        data-width="1190"
+        data-height="778"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["whiteboard-ink-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "whiteboard-ink.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/whiteboard-ink/whiteboard-ink.html b/docs/public/catalog/components/whiteboard-ink/whiteboard-ink.html
new file mode 100644
index 0000000000..4472e9fc34
--- /dev/null
+++ b/docs/public/catalog/components/whiteboard-ink/whiteboard-ink.html
@@ -0,0 +1,540 @@
+<!doctype html>
+<!--
+  whiteboard-ink: HyperFrames video primitive (intros and reveals / ink draw)
+
+  A hand-authored SVG sketch draws one stroke at a time while a pen nib
+  samples the active path tip. The nib follows getPointAtLength during each
+  draw and takes a short lifted hop between strokes.
+
+  Strokes slot: the SVG ships an empty <g data-slot="strokes"> group. Fill it
+  with your own <path> elements (in your installed copy) and those paths
+  become the drawing; the sketch enum is ignored while the slot has paths.
+  Mark one path data-ink="accent" to route it through the accent token map.
+  Nib riding, per-stroke cadence, and the ink law are identical for slot
+  strokes and presets.
+
+  Variables:
+    - sketch (bulb / flow / rocket): authored preset sketch; ignored when the
+      strokes slot holds paths.
+    - caption (string): short line shown after the drawing completes.
+    - pen (show / hide): visibility of the traveling nib actor.
+    - accent (green / blue / violet): one highlight stroke routed through a
+      distinct contract token.
+    - exit (none / fade / up): how the completed lockup leaves. none holds
+      the final frame (frame roots own transitions); fade releases opacity
+      only; up adds the small upward drift.
+
+  Envelope, fixed IN and OUT with elastic HOLD only:
+    IN_BASE  = 3.55s, 3.25s sequential draw phase, then pen exit and caption
+    HOLD     = max(0, D - IN - OUT), dead-calm completed lockup
+    OUT_BASE = 0.45s when exit is fade or up, otherwise 0 (hold to the end)
+    If D is shorter than IN_BASE + OUT_BASE, IN and OUT compress together.
+    The timeline is never time-scaled.
+
+  Ink law: every selected path is measured once with getTotalLength. That
+  measurement owns its dash array, dash offset, cadence weight, and nib
+  sampling. Dashed geometry stays in native SVG user units.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, has no data-width or data-height,
+  and registers one paused timeline under the literal whiteboard-ink key.
+-->
+<html
+  lang="en"
+  data-composition-id="whiteboard-ink"
+  data-composition-duration="5"
+  data-composition-variables='[
+    { "id": "sketch", "type": "enum", "role": "content", "label": "Sketch", "description": "Authored preset sketch to draw. Ignored when the strokes slot holds custom paths.", "default": "bulb", "options": [{ "value": "bulb", "label": "Bulb" }, { "value": "flow", "label": "Flow" }, { "value": "rocket", "label": "Rocket" }] },
+    { "id": "caption", "type": "string", "role": "content", "label": "Caption", "description": "Short line shown after the sketch completes.", "default": "Draw the idea" },
+    { "id": "pen", "type": "enum", "role": "style", "label": "Pen", "description": "Show or hide the pen nib actor.", "default": "show", "options": [{ "value": "show", "label": "Show" }, { "value": "hide", "label": "Hide" }] },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Color used by strokes marked data-ink=accent (one highlight stroke in each preset).", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "style", "label": "Exit", "description": "How the completed lockup leaves. none holds the final frame.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Whiteboard Ink</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="whiteboard-ink" data-duration="5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            background:
+              radial-gradient(
+                ellipse at 48% 42%,
+                color-mix(in srgb, var(--bg, #f6f1e7) 96%, var(--fg, #20242b)) 0%,
+                var(--bg, #f6f1e7) 72%
+              ),
+              var(--bg, #f6f1e7);
+            color: var(--fg, #20242b);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .wbi-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+          }
+
+          .wbi-stage {
+            display: grid;
+            grid-template-rows: minmax(0, 1fr) auto;
+            width: 92cqw;
+            height: 90cqh;
+            opacity: 0;
+            will-change: transform, opacity;
+          }
+
+          .wbi-board {
+            position: relative;
+            min-height: 0;
+          }
+
+          .wbi-svg {
+            display: block;
+            width: 100%;
+            height: 100%;
+            overflow: visible;
+          }
+
+          .wbi-sketch[hidden] {
+            display: none;
+          }
+
+          .wbi-stroke {
+            fill: none;
+            stroke: var(--fg, #20242b);
+            /* User-space width: never non-scaling-stroke on dashed paths
+               (screen-space dash breaks draw-on under group scale). Non-uniform
+               scale gives a natural thick-thin nib variation. */
+            stroke-width: 6;
+            stroke-linecap: round;
+            stroke-linejoin: round;
+          }
+
+          .wbi-stroke.wbi-accent {
+            stroke: var(--wbi-accent);
+          }
+
+          /* Custom strokes-slot paths inherit the same ink treatment without
+             needing any class; data-ink="accent" routes through the accent
+             token map exactly like a preset's highlight stroke. */
+          [data-slot="strokes"] path {
+            fill: none;
+            stroke: var(--fg, #20242b);
+            stroke-width: 6;
+            stroke-linecap: round;
+            stroke-linejoin: round;
+          }
+
+          [data-slot="strokes"] path[data-ink="accent"] {
+            stroke: var(--wbi-accent);
+          }
+
+          .wbi-pen {
+            filter: drop-shadow(0 5px 6px color-mix(in srgb, var(--fg, #20242b) 20%, transparent));
+            will-change: transform, opacity;
+          }
+
+          .wbi-pen-art {
+            will-change: transform;
+          }
+
+          .wbi-pen-body {
+            fill: var(--surface, #ffffff);
+            stroke: var(--fg, #20242b);
+            stroke-width: 4;
+            stroke-linecap: round;
+            stroke-linejoin: round;
+          }
+
+          .wbi-pen-nib {
+            fill: var(--wbi-accent);
+            stroke: var(--fg, #20242b);
+            stroke-width: 3;
+          }
+
+          .wbi-caption {
+            min-height: 10cqh;
+            padding-top: var(--space-1, 1.8cqh);
+            color: var(--muted, #667085);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: clamp(24px, 5cqh, 52px);
+            font-weight: 680;
+            line-height: 1.1;
+            letter-spacing: -0.02em;
+            text-align: center;
+            opacity: 0;
+          }
+        </style>
+
+        <div
+          id="wbi-clip"
+          class="wbi-clip clip"
+          data-start="0"
+          data-duration="5"
+          data-track-index="0"
+        >
+          <div class="wbi-stage" role="img">
+            <div class="wbi-board">
+              <svg
+                class="wbi-svg"
+                viewBox="0 0 1000 560"
+                preserveAspectRatio="xMidYMid meet"
+                aria-hidden="true"
+              >
+                <g
+                  class="wbi-sketch"
+                  data-sketch="bulb"
+                  transform="translate(500 280) scale(1.25 1.4) translate(-500 -256)"
+                >
+                  <path
+                    class="wbi-stroke"
+                    d="M 430 340 C 414 310 392 286 386 244 C 376 172 427 113 501 109 C 578 105 633 160 626 235 C 622 279 596 306 574 341"
+                  ></path>
+                  <path
+                    class="wbi-stroke wbi-accent"
+                    d="M 454 238 C 469 251 482 263 499 292 C 517 261 532 247 549 235"
+                  ></path>
+                  <path class="wbi-stroke" d="M 431 347 C 468 353 531 350 571 343"></path>
+                  <path class="wbi-stroke" d="M 438 369 C 476 376 525 373 564 365"></path>
+                  <path class="wbi-stroke" d="M 454 389 C 482 403 520 402 548 385"></path>
+                  <path class="wbi-stroke" d="M 333 231 C 349 228 360 230 372 232"></path>
+                  <path class="wbi-stroke" d="M 640 228 C 657 225 670 226 685 230"></path>
+                </g>
+
+                <g
+                  class="wbi-sketch"
+                  data-sketch="flow"
+                  transform="translate(500 280) scale(0.9 2.1) translate(-525 -265)"
+                  hidden
+                >
+                  <path
+                    class="wbi-stroke"
+                    d="M 145 205 C 145 184 160 171 184 171 L 315 171 C 338 171 351 187 351 207 L 351 322 C 351 344 337 357 314 357 L 181 357 C 158 357 145 342 145 321 Z"
+                  ></path>
+                  <path
+                    class="wbi-stroke wbi-accent"
+                    d="M 352 264 C 378 258 397 259 425 263 L 446 267 M 429 249 L 446 267 L 427 284"
+                  ></path>
+                  <path class="wbi-stroke" d="M 516 170 L 611 265 L 516 360 L 421 265 Z"></path>
+                  <path
+                    class="wbi-stroke"
+                    d="M 612 265 C 641 268 662 268 691 264 L 711 263 M 694 247 L 711 263 L 694 280"
+                  ></path>
+                  <path
+                    class="wbi-stroke"
+                    d="M 711 204 C 711 184 726 171 749 171 L 868 171 C 891 171 905 187 905 208 L 905 321 C 905 343 891 357 868 357 L 748 357 C 725 357 711 342 711 321 Z"
+                  ></path>
+                  <path
+                    class="wbi-stroke"
+                    d="M 764 266 C 785 284 802 292 820 294 C 837 278 849 256 861 230"
+                  ></path>
+                </g>
+
+                <g class="wbi-sketch" data-sketch="rocket" transform="translate(0 -17)" hidden>
+                  <path
+                    class="wbi-stroke"
+                    d="M 500 76 C 552 117 581 184 578 272 C 576 329 549 378 500 420 C 451 378 425 329 422 272 C 419 184 448 117 500 76 Z"
+                  ></path>
+                  <path
+                    class="wbi-stroke wbi-accent"
+                    d="M 500 181 C 526 181 544 198 544 223 C 544 248 527 265 500 265 C 475 265 457 248 457 223 C 457 199 474 181 500 181 Z"
+                  ></path>
+                  <path
+                    class="wbi-stroke"
+                    d="M 430 295 C 386 320 359 363 353 419 C 389 405 420 384 448 353"
+                  ></path>
+                  <path
+                    class="wbi-stroke"
+                    d="M 570 295 C 614 320 641 363 647 419 C 611 405 580 384 552 353"
+                  ></path>
+                  <path
+                    class="wbi-stroke"
+                    d="M 476 415 C 464 445 470 478 500 518 C 530 478 536 445 524 415"
+                  ></path>
+                  <path class="wbi-stroke" d="M 452 431 C 433 451 427 475 433 500"></path>
+                  <path class="wbi-stroke" d="M 548 431 C 567 451 573 475 567 500"></path>
+                </g>
+
+                <!--
+                  Strokes slot. Fill this group with your own <path> elements
+                  (installed copy) to replace the preset sketches; paths draw
+                  in document order in the 0 0 1000 560 viewBox space. Mark a
+                  path data-ink="accent" for the accent token. Ships empty.
+                -->
+                <g class="wbi-sketch" data-slot="strokes" data-sketch="custom" hidden></g>
+
+                <g class="wbi-pen" aria-hidden="true">
+                  <g class="wbi-pen-art">
+                    <path class="wbi-pen-body" d="M 0 0 L -43 -11 L -52 0 L -43 11 Z"></path>
+                    <path class="wbi-pen-nib" d="M 0 0 L -11 -7 L -11 7 Z"></path>
+                  </g>
+                </g>
+              </svg>
+            </div>
+            <div class="wbi-caption"></div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".wbi-stage");
+            var captionElement = root.querySelector(".wbi-caption");
+            var penElement = root.querySelector(".wbi-pen");
+            var penArt = root.querySelector(".wbi-pen-art");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var sketchGroups = {
+              bulb: root.querySelector('[data-sketch="bulb"]'),
+              flow: root.querySelector('[data-sketch="flow"]'),
+              rocket: root.querySelector('[data-sketch="rocket"]'),
+            };
+            var sketch = Object.prototype.hasOwnProperty.call(sketchGroups, vars.sketch)
+              ? vars.sketch
+              : "bulb";
+            var caption = vars.caption == null ? "Draw the idea" : String(vars.caption);
+            var penVisible = vars.pen !== "hide";
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exitModes = { none: true, fade: true, up: true };
+            var exitMode = Object.prototype.hasOwnProperty.call(exitModes, vars.exit)
+              ? vars.exit
+              : "none";
+
+            // Strokes slot: user-supplied paths replace the preset sketches.
+            var strokesSlot = root.querySelector('[data-slot="strokes"]');
+            var slotPaths = strokesSlot ? strokesSlot.querySelectorAll("path") : [];
+            var hasCustomStrokes = slotPaths.length > 0;
+            if (hasCustomStrokes) {
+              Array.prototype.forEach.call(slotPaths, function (path) {
+                // CSS beats SVG presentation attributes; promote an authored
+                // stroke-width to inline style so it wins over the slot rule.
+                var strokeWidth = path.getAttribute("stroke-width");
+                if (strokeWidth) path.style.strokeWidth = strokeWidth;
+              });
+            }
+
+            Object.keys(sketchGroups).forEach(function (name) {
+              // SVG <g> has no `hidden` IDL property (assignment is a dead
+              // expando); toggle the attribute so the [hidden] CSS applies.
+              if (hasCustomStrokes || name !== sketch)
+                sketchGroups[name].setAttribute("hidden", "");
+              else sketchGroups[name].removeAttribute("hidden");
+            });
+            if (hasCustomStrokes) strokesSlot.removeAttribute("hidden");
+            var activeGroup = hasCustomStrokes ? strokesSlot : sketchGroups[sketch];
+            root.style.setProperty("--wbi-accent", accentColors[accent]);
+            captionElement.textContent = caption;
+            penElement.style.display = penVisible ? "" : "none";
+            stage.setAttribute(
+              "aria-label",
+              (hasCustomStrokes
+                ? "Custom sketch. "
+                : sketch.charAt(0).toUpperCase() + sketch.slice(1) + " sketch. ") + caption,
+            );
+
+            var groupTransform = activeGroup.transform.baseVal.consolidate();
+            var strokes = Array.from(activeGroup.querySelectorAll("path")).map(function (path) {
+              var length = path.getTotalLength();
+              path.style.strokeDasharray = length + " " + length;
+              path.style.strokeDashoffset = String(length);
+              return {
+                path: path,
+                length: length,
+                progress: 0,
+                matrix: groupTransform ? groupTransform.matrix : null,
+              };
+            });
+            var totalLength = strokes.reduce(function (sum, stroke) {
+              return sum + stroke.length;
+            }, 0);
+
+            function pointAt(stroke, distance) {
+              var point = stroke.path.getPointAtLength(distance);
+              return stroke.matrix ? point.matrixTransform(stroke.matrix) : point;
+            }
+
+            function pathPose(stroke, progress) {
+              var distance = progress * stroke.length;
+              var tangentStep = Math.max(0.5, stroke.length * 0.004);
+              var before = pointAt(stroke, Math.max(0, distance - tangentStep));
+              var after = pointAt(stroke, Math.min(stroke.length, distance + tangentStep));
+              var point = pointAt(stroke, distance);
+
+              return {
+                x: point.x,
+                y: point.y,
+                rotation: (Math.atan2(after.y - before.y, after.x - before.x) * 180) / Math.PI,
+              };
+            }
+
+            function placePen(pose) {
+              gsap.set(penElement, { x: pose.x, y: pose.y, rotation: pose.rotation });
+            }
+
+            function renderStroke(stroke) {
+              var clamped = Math.max(0, Math.min(1, stroke.progress));
+              stroke.path.style.strokeDashoffset = String((1 - clamped) * stroke.length);
+              placePen(pathPose(stroke, clamped));
+            }
+
+            var DRAW_PHASE_BASE = 3.25;
+            var CAPTION_BASE = 0.3;
+            var IN_BASE = DRAW_PHASE_BASE + CAPTION_BASE;
+            var OUT_BASE = exitMode === "none" ? 0 : 0.45;
+            var resolvedDuration =
+              window.__hyperframes && window.__hyperframes.getDuration
+                ? window.__hyperframes.getDuration()
+                : undefined;
+            var duration = Math.max(
+              0.001,
+              typeof resolvedDuration === "number"
+                ? resolvedDuration
+                : parseFloat(root.dataset.duration || "5"),
+            );
+            var fixedTotal = IN_BASE + OUT_BASE;
+            var phaseScale = duration < fixedTotal ? duration / fixedTotal : 1;
+            var IN = IN_BASE * phaseScale;
+            var OUT = OUT_BASE * phaseScale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var DRAW_PHASE = DRAW_PHASE_BASE * phaseScale;
+            var CAPTION = CAPTION_BASE * phaseScale;
+            var hopCount = strokes.length - 1;
+            var HOP = 0.1 * phaseScale;
+            var MIN_DRAW = 0.26 * phaseScale;
+            // Custom slots can hold many strokes; when the fixed per-stroke
+            // floors alone would overrun the draw phase, shrink them together
+            // so the cadence stays sequential and the phase never overflows.
+            var fixedNeed = MIN_DRAW * strokes.length + HOP * hopCount;
+            if (fixedNeed > DRAW_PHASE) {
+              var crowd = DRAW_PHASE / fixedNeed;
+              HOP *= crowd;
+              MIN_DRAW *= crowd;
+            }
+            var DRAW_BUDGET = DRAW_PHASE - HOP * hopCount;
+            var LENGTH_BUDGET = Math.max(0, DRAW_BUDGET - MIN_DRAW * strokes.length);
+            var OUT_START = IN + HOLD;
+            var cursor = 0;
+
+            gsap.set(stage, { opacity: 0, y: "1.2cqh" });
+            gsap.set(captionElement, { opacity: 0, y: "1.4cqh" });
+            gsap.set(penElement, { opacity: penVisible ? 1 : 0 });
+            gsap.set(penArt, { y: 0, transformOrigin: "0px 0px" });
+            placePen(pathPose(strokes[0], 0));
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: each stroke owns one progress value. Its single onUpdate
+            // paints the dash and places the nib at the same ink front.
+            tl.to(
+              stage,
+              { opacity: 1, y: "0cqh", duration: Math.min(0.26, IN), ease: "power2.out" },
+              0,
+            );
+
+            strokes.forEach(function (stroke, index) {
+              var drawDuration = MIN_DRAW + (LENGTH_BUDGET * stroke.length) / totalLength;
+
+              tl.to(
+                stroke,
+                {
+                  progress: 1,
+                  duration: drawDuration,
+                  ease: "power1.inOut",
+                  onUpdate: function () {
+                    renderStroke(stroke);
+                  },
+                },
+                cursor,
+              );
+              cursor += drawDuration;
+
+              if (index < strokes.length - 1) {
+                var nextStroke = strokes[index + 1];
+                var fromPose = pathPose(stroke, 1);
+                var toPose = pathPose(nextStroke, 0);
+                var hopState = { progress: 0 };
+
+                tl.to(
+                  hopState,
+                  {
+                    progress: 1,
+                    duration: HOP,
+                    ease: "power2.out",
+                    onUpdate: function () {
+                      var progress = hopState.progress;
+                      placePen({
+                        x: fromPose.x + (toPose.x - fromPose.x) * progress,
+                        y:
+                          fromPose.y +
+                          (toPose.y - fromPose.y) * progress -
+                          Math.sin(Math.PI * progress) * 18,
+                        rotation:
+                          fromPose.rotation + (toPose.rotation - fromPose.rotation) * progress,
+                      });
+                      gsap.set(penArt, { y: -Math.sin(Math.PI * progress) * 8 });
+                    },
+                  },
+                  cursor,
+                );
+                cursor += HOP;
+              }
+            });
+
+            tl.to(
+              captionElement,
+              { opacity: 1, y: "0cqh", duration: CAPTION, ease: "power2.out" },
+              cursor,
+            );
+            tl.to(penElement, { opacity: 0, duration: CAPTION, ease: "power2.out" }, cursor);
+            tl.to(penArt, { y: -18, duration: CAPTION, ease: "power2.out" }, cursor);
+
+            // HOLD: the completed lockup stays dead calm. Duration changes
+            // stretch only this gap between the caption reveal and OUT.
+
+            // OUT: only when an exit is requested; exit none holds the final
+            // frame to the end (frame roots own transitions).
+            if (exitMode !== "none") {
+              var exitTween = { opacity: 0, duration: OUT, ease: "power2.in" };
+              if (exitMode === "up") exitTween.y = "-1.8cqh";
+              tl.to(stage, exitTween, OUT_START);
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["whiteboard-ink"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/wordmark-tiles/demo.html b/docs/public/catalog/components/wordmark-tiles/demo.html
new file mode 100644
index 0000000000..6127e4298c
--- /dev/null
+++ b/docs/public/catalog/components/wordmark-tiles/demo.html
@@ -0,0 +1,117 @@
+<!doctype html>
+<!--
+  wordmark-tiles demo: standalone 1920x1080 host composition. It mounts the
+  primitive through data-composition-src into a definite card instead of
+  inlining primitive markup or motion. The non-default text, column count,
+  and wave stagger prove that per-instance variables cross the mount.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Wordmark Tiles Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+
+      #root {
+        --bg: #070a12;
+        --fg: #f5f7ff;
+        --muted: #7f8aa3;
+        --surface: #151b2b;
+        --border: rgba(245, 247, 255, 0.14);
+        --brand: #7c9dff;
+        --accent: #64e2c2;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-body: Inter, system-ui, sans-serif;
+        --font-mono: ui-monospace, monospace;
+        --radius: 16px;
+        --space-1: 8px;
+        --space-2: 16px;
+        --space-3: 32px;
+        --dur-beat: 0.4s;
+        --ease-standard: cubic-bezier(0.215, 0.61, 0.355, 1);
+        --ease-emphasis: cubic-bezier(0.19, 1, 0.22, 1);
+        --ease-exit: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg);
+        color: var(--fg);
+        font-family: var(--font-body);
+      }
+
+      .mount-card {
+        width: 64%;
+        height: 56%;
+        left: 18%;
+        top: 22%;
+        overflow: hidden;
+        border: 1px solid var(--border);
+        border-radius: calc(var(--radius) * 1.75);
+        background: var(--surface);
+        box-shadow: 0 4cqh 10cqh color-mix(in srgb, var(--fg) 12%, transparent);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="wordmark-tiles-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="6.5"
+      data-fps="30"
+    >
+      <div
+        id="wordmark-tiles-mount"
+        class="mount-card clip"
+        data-composition-id="wordmark-tiles"
+        data-composition-src="./wordmark-tiles.html"
+        data-variable-values='{"text":"ORBIT","columns":14,"waveStagger":28}'
+        data-start="0"
+        data-duration="6.5"
+        data-track-index="0"
+        data-width="1229"
+        data-height="605"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      // The mounted primitive owns all visible motion. This standalone host
+      // registers only the empty paused timeline required for its own id.
+      window.__timelines = window.__timelines || {};
+      window.__timelines["wordmark-tiles-demo"] = gsap.timeline({ paused: true });
+    </script>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "wordmark-tiles.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/wordmark-tiles/wordmark-tiles.html b/docs/public/catalog/components/wordmark-tiles/wordmark-tiles.html
new file mode 100644
index 0000000000..039a63290c
--- /dev/null
+++ b/docs/public/catalog/components/wordmark-tiles/wordmark-tiles.html
@@ -0,0 +1,360 @@
+<!doctype html>
+<!--
+  wordmark-tiles: HyperFrames video primitive (typography / holdable / reveal)
+
+  Concept: a wordmark begins as a field of unresolved color tiles. A spatially
+  modulated wave crosses the grid, and each tile swaps its noise face for the
+  correct clipped fragment of the final wordmark. One mechanic, one job:
+  reveal a legible mark through a raster tile wave.
+
+  Compiled-from evidence: power-reel production source 12-tile-field.html
+  (2026-07). Its tile field combines a traveling brush with sinusoidal spatial
+  modulation so neighboring rows resolve in waves instead of a strict scan.
+
+  Use when: a product name, campaign word, or short logo type needs a premium
+  reveal that can read as technical, broadcast, or digital signage.
+
+  Variables (declared in data-composition-variables below):
+    - text (string, default "LAUNCH"): wordmark copy, limited to 12 characters.
+    - columns (number, default 12, range 8 to 14): tile columns. Rows derive
+      proportionally from this one density owner.
+    - waveStagger (number, default 40, range 15 to 50 ms): delay between tiles
+      after they are sorted into the spatial wave order.
+
+  Envelope (fixed IN/OUT, elastic HOLD only, never gsap.timeScale()):
+    IN_BASE  = 4.80s  stage entrance and complete tile wave at max settings
+    HOLD     = elastic = max(0, D - (IN_BASE + OUT_BASE)); deliberately still
+               so the resolved wordmark remains readable
+    OUT_BASE = 0.50s  clean group fade with power2.in
+    If D < IN_BASE + OUT_BASE, IN and OUT scale down together. The per-tile
+    stagger scales with that compressed envelope and is capped inside IN.
+
+  Sync point (fixed offset into IN, never inside elastic HOLD): wave-start at
+  0.20s into an unscaled IN. The offset scales only when the full envelope is
+  compressed.
+
+  Sound cue: none. The distributed wave has no single impact frame, so the
+  primitive does not dispatch hf:sfx.
+
+  Mount contract: this file is a MOUNTABLE SUB-COMPOSITION. A host loads it via
+  data-composition-src, and the runtime clones only <template> contents. Styles,
+  markup, GSAP, and timeline registration therefore live inside <template>.
+  #root has position:absolute; inset:0; container-type:size and no data-width or
+  data-height, so the host owns the box. The composition id is hardcoded as
+  "wordmark-tiles" because mount flattening strips it from the live root.
+  Variables come from window.__hyperframes.getVariables(), which supplies the
+  declared defaults merged with host data-variable-values overrides.
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "text", "type": "string", "role": "content", "label": "Wordmark", "description": "Text resolved by the tile wave.", "default": "LAUNCH", "maxLength": 12 },
+    { "id": "columns", "type": "number", "role": "layout", "label": "Columns", "description": "Number of columns in the wordmark tile grid.", "default": 12, "min": 8, "max": 14, "step": 1 },
+    { "id": "waveStagger", "type": "number", "role": "motion", "label": "Wave stagger", "description": "Delay between tile reveals in spatial wave order.", "default": 40, "min": 15, "max": 50, "step": 1, "unit": "ms" }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Wordmark Tiles</title>
+    <!-- Metadata only. The mount loader reads variable declarations from
+         <html>, then discards everything outside <template>. -->
+  </head>
+  <body>
+    <template>
+      <div
+        id="root"
+        data-composition-id="wordmark-tiles"
+        data-start="0"
+        data-duration="6.5"
+        data-fps="30"
+      >
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          /* Root fills the host box. Internal layout uses only cqw/cqh, and
+             every painted color is owned by the host theme tokens. */
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            color: var(--fg);
+            font-family: var(--font-body);
+          }
+
+          .wt-clip {
+            width: 100%;
+            height: 100%;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+            background: var(--bg);
+          }
+
+          .wt-stage {
+            width: 86cqw;
+            height: 48cqh;
+            position: relative;
+            opacity: 0;
+          }
+
+          /* EDIT ZONE: stage proportions above and tile line weight below are
+             the visual density controls. The public columns knob owns the grid
+             count, and no second density decision exists in CSS. */
+          .wt-grid {
+            width: 100%;
+            height: 100%;
+            display: grid;
+            grid-template-columns: repeat(var(--wt-columns), minmax(0, 1fr));
+            grid-template-rows: repeat(var(--wt-rows), minmax(0, 1fr));
+            overflow: hidden;
+            border: min(0.12cqw, 0.22cqh) solid var(--border);
+            border-radius: var(--radius);
+            background: var(--surface);
+          }
+
+          .wt-tile {
+            position: relative;
+            min-width: 0;
+            min-height: 0;
+            overflow: hidden;
+            box-shadow: inset 0 0 0 min(0.08cqw, 0.14cqh) var(--border);
+            background: var(--surface);
+          }
+
+          .wt-noise,
+          .wt-resolved {
+            position: absolute;
+            inset: 0;
+            display: block;
+            transform-origin: center;
+          }
+
+          .wt-noise-a {
+            background: color-mix(in srgb, var(--surface) 64%, var(--muted));
+          }
+
+          .wt-noise-b {
+            background: color-mix(in srgb, var(--surface) 58%, var(--brand));
+          }
+
+          .wt-noise-c {
+            background: color-mix(in srgb, var(--surface) 56%, var(--accent));
+          }
+
+          .wt-resolved {
+            overflow: hidden;
+            background: color-mix(in srgb, var(--surface) 92%, var(--brand));
+          }
+
+          /* Every tile contains one crop of the same stable wordmark surface.
+             JS computes only the crop offsets from the canonical grid shape. */
+          .wt-fragment {
+            position: absolute;
+            left: var(--wt-fragment-x);
+            top: var(--wt-fragment-y);
+            width: 86cqw;
+            height: 48cqh;
+            display: grid;
+            place-items: center;
+            color: var(--fg);
+            font-family: var(--font-display);
+            font-size: var(--wt-font-size);
+            font-weight: 800;
+            line-height: 1;
+            letter-spacing: -0.035em;
+            text-align: center;
+            text-transform: uppercase;
+            white-space: nowrap;
+          }
+        </style>
+
+        <div
+          id="wordmark-tiles-clip"
+          class="wt-clip clip"
+          data-start="0"
+          data-duration="6.5"
+          data-track-index="0"
+        >
+          <div class="wt-stage">
+            <div class="wt-grid" role="img" aria-label="LAUNCH"></div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var compositionId = "wordmark-tiles";
+            var stage = root.querySelector(".wt-stage");
+            var grid = root.querySelector(".wt-grid");
+
+            // EDIT ZONE: declarations above and clamped reads below are the
+            // single source of truth for the three public variables.
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var text = vars.text == null ? "LAUNCH" : String(vars.text).trim().slice(0, 12);
+            if (text.length === 0) text = "LAUNCH";
+
+            var rawColumns = Number(vars.columns);
+            var columns = Number.isFinite(rawColumns) ? Math.round(rawColumns) : 12;
+            columns = Math.max(8, Math.min(14, columns));
+
+            var rawWaveStagger = Number(vars.waveStagger);
+            var waveStaggerMs = Number.isFinite(rawWaveStagger) ? rawWaveStagger : 40;
+            waveStaggerMs = Math.max(15, Math.min(50, waveStaggerMs));
+
+            // INVARIANT: rows derive only from columns. This keeps one density
+            // owner and gives the 86:48 stage near-square tiles at every value.
+            var rows = Math.max(4, Math.round((columns * 5) / 12));
+            var tileCount = columns * rows;
+            var fontSize = Math.max(7, Math.min(19, 86 / Math.max(4, text.length * 0.62)));
+
+            grid.style.setProperty("--wt-columns", String(columns));
+            grid.style.setProperty("--wt-rows", String(rows));
+            grid.style.setProperty("--wt-font-size", String(fontSize) + "cqw");
+            grid.setAttribute("aria-label", text);
+
+            // Fixed-seed LCG. Noise faces vary, while every rebuild with the
+            // same variables produces the same tile field and wave order.
+            var seed = 0x57a7c1e;
+            function seededUnit() {
+              seed = (Math.imul(seed, 1664525) + 1013904223) >>> 0;
+              return seed / 4294967296;
+            }
+
+            var fragment = document.createDocumentFragment();
+            var tiles = [];
+            for (var index = 0; index < tileCount; index += 1) {
+              var row = Math.floor(index / columns);
+              var column = index % columns;
+              var tile = document.createElement("span");
+              var noise = document.createElement("span");
+              var resolved = document.createElement("span");
+              var wordmark = document.createElement("span");
+              var noiseVariant = 1 + Math.floor(seededUnit() * 3);
+
+              tile.className = "wt-tile";
+              tile.setAttribute("aria-hidden", "true");
+              tile.dataset.waveRank = String(
+                column + row * 0.68 + Math.sin(row * 1.7 + column * 0.42) * 2.15,
+              );
+
+              noise.className = "wt-noise wt-noise-" + ["a", "b", "c"][noiseVariant - 1];
+              noise.dataset.startOpacity = String(0.72 + seededUnit() * 0.28);
+
+              resolved.className = "wt-resolved";
+              wordmark.className = "wt-fragment";
+              wordmark.textContent = text;
+              wordmark.style.setProperty(
+                "--wt-fragment-x",
+                String((-86 * column) / columns) + "cqw",
+              );
+              wordmark.style.setProperty("--wt-fragment-y", String((-48 * row) / rows) + "cqh");
+
+              resolved.appendChild(wordmark);
+              tile.appendChild(resolved);
+              tile.appendChild(noise);
+              fragment.appendChild(tile);
+              tiles.push(tile);
+            }
+            grid.replaceChildren(fragment);
+
+            // The source mechanic combines travel with spatial sine waves.
+            // Sorting by the stored rank creates the same rolling behavior,
+            // including row reversals and pockets that lead adjacent columns.
+            var waveTiles = tiles.slice().sort(function (a, b) {
+              return Number(a.dataset.waveRank) - Number(b.dataset.waveRank);
+            });
+            var resolvedByWave = waveTiles.map(function (tile) {
+              return tile.querySelector(".wt-resolved");
+            });
+            var noiseByWave = waveTiles.map(function (tile) {
+              return tile.querySelector(".wt-noise");
+            });
+
+            // RETIME RANGE: these five base values own global pacing. HOLD is
+            // the only elastic phase, and the reveal never exceeds IN.
+            var IN_BASE = 4.8;
+            var OUT_BASE = 0.5;
+            var STAGE_IN_BASE = 0.38;
+            var WAVE_START_BASE = 0.2;
+            var TILE_DURATION_BASE = 0.5;
+
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "6.5"));
+            var totalBase = IN_BASE + OUT_BASE;
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var OUT_START = IN + HOLD;
+            var STAGE_IN = STAGE_IN_BASE * scale;
+            var WAVE_START = WAVE_START_BASE * scale;
+            var TILE_DURATION = TILE_DURATION_BASE * scale;
+            var maxStep = Math.max(
+              0,
+              (IN - WAVE_START - TILE_DURATION) / Math.max(1, tileCount - 1),
+            );
+            var STAGGER_SECONDS = Math.min((waveStaggerMs / 1000) * scale, maxStep);
+
+            gsap.set(stage, { opacity: 0 });
+            gsap.set(resolvedByWave, { opacity: 0, scale: 0.82 });
+            gsap.set(noiseByWave, {
+              opacity: function (_index, element) {
+                return Number(element.dataset.startOpacity);
+              },
+              scale: 1,
+            });
+
+            var timeline = gsap.timeline({ paused: true });
+
+            timeline.to(stage, { opacity: 1, duration: STAGE_IN, ease: "power2.out" }, 0);
+
+            // IN: each tile resolves with --ease-standard's GSAP owner,
+            // power2.out. The spatial rank supplies wave order to the stagger.
+            timeline.to(
+              resolvedByWave,
+              {
+                opacity: 1,
+                scale: 1,
+                duration: TILE_DURATION,
+                ease: "power2.out",
+                stagger: { each: STAGGER_SECONDS, from: "start" },
+              },
+              WAVE_START,
+            );
+            timeline.to(
+              noiseByWave,
+              {
+                opacity: 0,
+                scale: 1.18,
+                duration: TILE_DURATION,
+                ease: "power2.out",
+                stagger: { each: STAGGER_SECONDS, from: "start" },
+              },
+              WAVE_START,
+            );
+
+            // HOLD is deliberately still. OUT uses the catalog exit ease.
+            timeline.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+
+            timeline.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = timeline;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/x-follow-card/demo.html b/docs/public/catalog/components/x-follow-card/demo.html
new file mode 100644
index 0000000000..108c309f58
--- /dev/null
+++ b/docs/public/catalog/components/x-follow-card/demo.html
@@ -0,0 +1,150 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>X Follow Card - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #fafafa;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+        /* ponytail: scale wrapper (not a GSAP target) to fill ~65% of 1920px frame */
+        transform: scale(1.9);
+        transform-origin: center center;
+      }
+      .hf-remocn-x-follow-card {
+        --hf-accent: var(--accent, #f8fafc);
+        --hf-ink: #111827;
+        --hf-l1: rgba(255, 255, 255, 0.72);
+        --hf-l2: rgba(255, 255, 255, 0.45);
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-x-follow-card {
+        width: 700px;
+        border-radius: 30px;
+        padding: 34px;
+        background: #0f172a;
+        color: #fff;
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+      }
+      .hf-remocn-x-follow-card header {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+      }
+      .hf-remocn-x-follow-card .avatar {
+        width: 70px;
+        height: 70px;
+        border-radius: 22px;
+        background: var(--hf-l1);
+      }
+      .hf-remocn-x-follow-card h3 {
+        margin: 0;
+        font-size: 36px;
+        letter-spacing: -0.04em;
+      }
+      .hf-remocn-x-follow-card p {
+        color: #94a3b8;
+        margin: 4px 0 0;
+        font-size: 18px;
+      }
+      .hf-remocn-x-follow-card .stat {
+        margin-top: 30px;
+        font-size: 82px;
+        font-weight: 900;
+        letter-spacing: -0.08em;
+        transform: translateY(var(--hf-stat-y, 0px));
+      }
+      .hf-remocn-x-follow-card .avatars {
+        display: flex;
+        margin-top: 18px;
+      }
+      .hf-remocn-x-follow-card .avatars span {
+        width: 46px;
+        height: 46px;
+        border-radius: 999px;
+        border: 3px solid #0f172a;
+        margin-left: -10px;
+        background: var(--c);
+        opacity: var(--hf-avatar-opacity, 1);
+        transform: translateY(var(--hf-avatar-y, 0px));
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="x-follow-card-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-x-follow-card">
+          <header>
+            <div class="avatar"></div>
+            <div>
+              <h3>X Follow Card</h3>
+              <p>A social follow card with avatar, handle, and follower motion.</p>
+            </div>
+          </header>
+          <div class="stat">30.6K</div>
+          <div class="avatars">
+            <span style="--c: var(--hf-l1)"></span><span style="--c: var(--hf-l2)"></span
+            ><span style="--c: var(--hf-l2)"></span><span style="--c: var(--hf-l2)"></span
+            ><span style="--c: var(--hf-l2)"></span><span style="--c: var(--hf-l2)"></span>
+          </div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-x-follow-card .stat",
+          { "--hf-stat-y": "28px", opacity: 0 },
+          { "--hf-stat-y": "0px", opacity: 1, duration: 0.46, ease: "back.out(1.6)" },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-x-follow-card .avatars span",
+          { "--hf-avatar-y": "18px", "--hf-avatar-opacity": 0 },
+          {
+            "--hf-avatar-y": "0px",
+            "--hf-avatar-opacity": 1,
+            duration: 0.28,
+            stagger: 0.05,
+            ease: "power2.out",
+          },
+          startTime + 0.22,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["x-follow-card-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/x-follow-card/x-follow-card.html b/docs/public/catalog/components/x-follow-card/x-follow-card.html
new file mode 100644
index 0000000000..cbe2398301
--- /dev/null
+++ b/docs/public/catalog/components/x-follow-card/x-follow-card.html
@@ -0,0 +1,89 @@
+<!--
+  X Follow Card - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-x-follow-card">
+  <header>
+    <div class="avatar"></div>
+    <div>
+      <h3>X Follow Card</h3>
+      <p>A social follow card with avatar, handle, and follower motion.</p>
+    </div>
+  </header>
+  <div class="stat">30.6K</div>
+  <div class="avatars">
+    <span style="--c: var(--hf-l1)"></span><span style="--c: var(--hf-l2)"></span
+    ><span style="--c: var(--hf-l2)"></span><span style="--c: var(--hf-l2)"></span
+    ><span style="--c: var(--hf-l2)"></span><span style="--c: var(--hf-l2)"></span>
+  </div>
+</div>
+
+<style>
+  .hf-remocn-x-follow-card {
+    --hf-accent: var(--accent, #f8fafc);
+    --hf-ink: #111827;
+    --hf-l1: rgba(255, 255, 255, 0.72);
+    --hf-l2: rgba(255, 255, 255, 0.45);
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-x-follow-card {
+    width: 700px;
+    border-radius: 30px;
+    padding: 34px;
+    background: #0f172a;
+    color: #fff;
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+  }
+  .hf-remocn-x-follow-card header {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+  }
+  .hf-remocn-x-follow-card .avatar {
+    width: 70px;
+    height: 70px;
+    border-radius: 22px;
+    background: var(--hf-l1);
+  }
+  .hf-remocn-x-follow-card h3 {
+    margin: 0;
+    font-size: 36px;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-x-follow-card p {
+    color: #94a3b8;
+    margin: 4px 0 0;
+  }
+  .hf-remocn-x-follow-card .stat {
+    margin-top: 30px;
+    font-size: 82px;
+    font-weight: 900;
+    letter-spacing: -0.08em;
+    transform: translateY(var(--hf-stat-y, 0px));
+  }
+  .hf-remocn-x-follow-card .avatars {
+    display: flex;
+    margin-top: 18px;
+  }
+  .hf-remocn-x-follow-card .avatars span {
+    width: 46px;
+    height: 46px;
+    border-radius: 999px;
+    border: 3px solid #0f172a;
+    margin-left: -10px;
+    background: var(--c);
+    opacity: var(--hf-avatar-opacity, 1);
+    transform: translateY(var(--hf-avatar-y, 0px));
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-x-follow-card .stat', { '--hf-stat-y': '28px', opacity: 0 }, { '--hf-stat-y': '0px', opacity: 1, duration: 0.46, ease: 'back.out(1.6)' }, startTime); tl.fromTo('.hf-remocn-x-follow-card .avatars span', { '--hf-avatar-y': '18px', '--hf-avatar-opacity': 0 }, { '--hf-avatar-y': '0px', '--hf-avatar-opacity': 1, duration: 0.28, stagger: 0.05, ease: 'power2.out' }, startTime + 0.22);
+-->
diff --git a/docs/public/catalog/components/x-followers-overview/demo.html b/docs/public/catalog/components/x-followers-overview/demo.html
new file mode 100644
index 0000000000..2babdfe227
--- /dev/null
+++ b/docs/public/catalog/components/x-followers-overview/demo.html
@@ -0,0 +1,145 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>X Followers Overview - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+        transform: scale(1.9); /* ponytail: scale-up only; GSAP targets children, not this wrapper */
+      }
+      .hf-remocn-x-followers-overview {
+        --hf-accent: #2563eb;
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-x-followers-overview {
+        width: 700px;
+        border-radius: 30px;
+        padding: 34px;
+        background: #0f172a;
+        color: #fff;
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+      }
+      .hf-remocn-x-followers-overview header {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+      }
+      .hf-remocn-x-followers-overview .avatar {
+        width: 70px;
+        height: 70px;
+        border-radius: 22px;
+        background: linear-gradient(135deg, #38bdf8, #8b5cf6);
+      }
+      .hf-remocn-x-followers-overview h3 {
+        margin: 0;
+        font-size: 36px;
+        letter-spacing: -0.04em;
+      }
+      .hf-remocn-x-followers-overview p {
+        color: #94a3b8;
+        margin: 4px 0 0;
+      }
+      .hf-remocn-x-followers-overview .stat {
+        margin-top: 30px;
+        font-size: 82px;
+        font-weight: 900;
+        letter-spacing: -0.08em;
+        transform: translateY(var(--hf-stat-y, 0px));
+      }
+      .hf-remocn-x-followers-overview .avatars {
+        display: flex;
+        margin-top: 18px;
+      }
+      .hf-remocn-x-followers-overview .avatars span {
+        width: 46px;
+        height: 46px;
+        border-radius: 999px;
+        border: 3px solid #0f172a;
+        margin-left: -10px;
+        background: var(--c);
+        opacity: var(--hf-avatar-opacity, 1);
+        transform: translateY(var(--hf-avatar-y, 0px));
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="x-followers-overview-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-x-followers-overview">
+          <header>
+            <div class="avatar"></div>
+            <div>
+              <h3>X Followers Overview</h3>
+              <p>A social analytics card with count-up and audience pills.</p>
+            </div>
+          </header>
+          <div class="stat">30.6K</div>
+          <div class="avatars">
+            <span style="--c: #38bdf8"></span><span style="--c: #f472b6"></span
+            ><span style="--c: #34d399"></span><span style="--c: #f59e0b"></span
+            ><span style="--c: #a78bfa"></span><span style="--c: #fb7185"></span>
+          </div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-x-followers-overview .stat",
+          { "--hf-stat-y": "28px", opacity: 0 },
+          { "--hf-stat-y": "0px", opacity: 1, duration: 0.46, ease: "back.out(1.6)" },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-x-followers-overview .avatars span",
+          { "--hf-avatar-y": "18px", "--hf-avatar-opacity": 0 },
+          {
+            "--hf-avatar-y": "0px",
+            "--hf-avatar-opacity": 1,
+            duration: 0.28,
+            stagger: 0.05,
+            ease: "power2.out",
+          },
+          startTime + 0.22,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["x-followers-overview-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/x-followers-overview/x-followers-overview.html b/docs/public/catalog/components/x-followers-overview/x-followers-overview.html
new file mode 100644
index 0000000000..3574ab64a3
--- /dev/null
+++ b/docs/public/catalog/components/x-followers-overview/x-followers-overview.html
@@ -0,0 +1,87 @@
+<!--
+  X Followers Overview - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-x-followers-overview">
+  <header>
+    <div class="avatar"></div>
+    <div>
+      <h3>X Followers Overview</h3>
+      <p>A social analytics card with count-up and audience pills.</p>
+    </div>
+  </header>
+  <div class="stat">30.6K</div>
+  <div class="avatars">
+    <span style="--c: #38bdf8"></span><span style="--c: #f472b6"></span
+    ><span style="--c: #34d399"></span><span style="--c: #f59e0b"></span
+    ><span style="--c: #a78bfa"></span><span style="--c: #fb7185"></span>
+  </div>
+</div>
+
+<style>
+  .hf-remocn-x-followers-overview {
+    --hf-accent: #2563eb;
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-x-followers-overview {
+    width: 700px;
+    border-radius: 30px;
+    padding: 34px;
+    background: #0f172a;
+    color: #fff;
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+  }
+  .hf-remocn-x-followers-overview header {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+  }
+  .hf-remocn-x-followers-overview .avatar {
+    width: 70px;
+    height: 70px;
+    border-radius: 22px;
+    background: linear-gradient(135deg, #38bdf8, #8b5cf6);
+  }
+  .hf-remocn-x-followers-overview h3 {
+    margin: 0;
+    font-size: 36px;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-x-followers-overview p {
+    color: #94a3b8;
+    margin: 4px 0 0;
+  }
+  .hf-remocn-x-followers-overview .stat {
+    margin-top: 30px;
+    font-size: 82px;
+    font-weight: 900;
+    letter-spacing: -0.08em;
+    transform: translateY(var(--hf-stat-y, 0px));
+  }
+  .hf-remocn-x-followers-overview .avatars {
+    display: flex;
+    margin-top: 18px;
+  }
+  .hf-remocn-x-followers-overview .avatars span {
+    width: 46px;
+    height: 46px;
+    border-radius: 999px;
+    border: 3px solid #0f172a;
+    margin-left: -10px;
+    background: var(--c);
+    opacity: var(--hf-avatar-opacity, 1);
+    transform: translateY(var(--hf-avatar-y, 0px));
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-x-followers-overview .stat', { '--hf-stat-y': '28px', opacity: 0 }, { '--hf-stat-y': '0px', opacity: 1, duration: 0.46, ease: 'back.out(1.6)' }, startTime); tl.fromTo('.hf-remocn-x-followers-overview .avatars span', { '--hf-avatar-y': '18px', '--hf-avatar-opacity': 0 }, { '--hf-avatar-y': '0px', '--hf-avatar-opacity': 1, duration: 0.28, stagger: 0.05, ease: 'power2.out' }, startTime + 0.22);
+-->
diff --git a/docs/public/catalog/components/yt-camera-move/demo.html b/docs/public/catalog/components/yt-camera-move/demo.html
new file mode 100644
index 0000000000..d63a51e5a4
--- /dev/null
+++ b/docs/public/catalog/components/yt-camera-move/demo.html
@@ -0,0 +1,178 @@
+<!doctype html>
+<!-- Demo plate for the catalog preview. Identical to yt-camera-move.html except the
+     root background, which is opaque here so the transparent overlay reads.
+     Not installed by `hyperframes add` - registry-item.json lists yt-camera-move.html only. -->
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #14161c;
+        overflow: hidden;
+      }
+      /* ---- yt-camera-move --------------------------------------------------
+         The creator-video punch-in as reusable GSAP helpers: dynamic
+         zoom + slide + 3D tilt/pan on any wrapper (a #video-wrap, a
+         sub-composition include, an image card). A talking-head recipe
+         is the default: cubic easing, ~11% zoom.
+
+         Optional: .yt-cm-defocus is an edge-blur overlay that pulses during
+         the move to sell the 3D feel — place it ABOVE the moving layer,
+         covering the same region. */
+      .yt-cm-defocus {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        opacity: 0;
+        backdrop-filter: blur(7px);
+        -webkit-backdrop-filter: blur(7px);
+        /* blur only the frame edges; center stays sharp */
+        -webkit-mask-image: radial-gradient(
+          ellipse 62% 58% at 50% 50%,
+          transparent 58%,
+          rgba(0, 0, 0, 0.85) 92%
+        );
+        mask-image: radial-gradient(
+          ellipse 62% 58% at 50% 50%,
+          transparent 58%,
+          rgba(0, 0, 0, 0.85) 92%
+        );
+      }
+      /* ---- self-preview stand-in "footage" (not part of the snippet) ---- */
+      #yt-cm-stage {
+        position: absolute;
+        inset: 0;
+        overflow: hidden;
+        background: linear-gradient(135deg, #35c8d9 0%, #2a7fff 55%, #7d5cff 100%);
+      }
+      /* Grid is the only cue that reveals the camera move on a flat gradient
+         plate; at 0.14/2px the zoom and slide were nearly imperceptible. */
+      #yt-cm-stage .yt-cm-grid {
+        position: absolute;
+        inset: -60px;
+        background:
+          repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.3) 0 3px, transparent 3px 120px),
+          repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.3) 0 3px, transparent 3px 120px);
+      }
+      #yt-cm-stage .yt-cm-label {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-family: "Inter", ui-sans-serif, sans-serif;
+        font-weight: 700;
+        font-size: 120px;
+        letter-spacing: -0.02em;
+        color: rgba(255, 255, 255, 0.92);
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Self-preview wrapper. WIRING: copy the .yt-cm-defocus CSS (if you want
+         the edge blur), add <div class="yt-cm-defocus" id="yt-my-defocus"></div>
+         as a sibling ABOVE your moving layer, and copy the helpers into your
+         host script. Then drive any wrapper:
+
+           ytCameraMove(tl, "#video-wrap", 5.0, { zoom: 0.11, slideY: -24 });
+           ytDefocusPulse(tl, "#yt-my-defocus", 5.0, 1.2);
+           ytCameraReset(tl, "#video-wrap", 9.0);
+    -->
+    <div
+      id="yt-cm-root"
+      data-composition-id="yt-camera-move"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="yt-cm-stage">
+        <div class="yt-cm-grid" data-layout-allow-overflow></div>
+        <div class="yt-cm-label">FOOTAGE</div>
+      </div>
+      <div class="yt-cm-defocus" id="yt-cm-defocus"></div>
+      <div
+        id="yt-cm-drv"
+        class="clip"
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        // ---- copy these helpers into the host script ----
+        // Punch-in / camera move on any wrapper. A talking-head base:
+        // zoom 0.11, cubic ease. tilt/pan are degrees (rotationX/rotationY,
+        // perspective is set for you); slideX/slideY in px; roll in degrees.
+        window.ytCameraMove = function (tl, target, at, opts) {
+          opts = opts || {};
+          var dur = opts.dur === undefined ? 1.2 : opts.dur;
+          gsap.set(target, {
+            transformPerspective: 1200,
+            transformOrigin: opts.origin || "50% 50%",
+          });
+          tl.to(
+            target,
+            {
+              scale: 1 + (opts.zoom === undefined ? 0.11 : opts.zoom),
+              x: opts.slideX || 0,
+              y: opts.slideY || 0,
+              rotationX: opts.tilt || 0,
+              rotationY: opts.pan || 0,
+              rotation: opts.roll || 0,
+              duration: dur,
+              ease: opts.ease || "power2.inOut",
+            },
+            at,
+          );
+        };
+        // Return to rest (same easing family).
+        window.ytCameraReset = function (tl, target, at, opts) {
+          opts = opts || {};
+          tl.to(
+            target,
+            {
+              scale: 1,
+              x: 0,
+              y: 0,
+              rotationX: 0,
+              rotationY: 0,
+              rotation: 0,
+              duration: opts.dur === undefined ? 1.2 : opts.dur,
+              ease: opts.ease || "power2.inOut",
+            },
+            at,
+          );
+        };
+        // Edge-defocus pulse synced to a move (overlay fades in then out).
+        window.ytDefocusPulse = function (tl, target, at, dur) {
+          dur = dur === undefined ? 1.2 : dur;
+          tl.to(target, { opacity: 1, duration: dur * 0.45, ease: "power2.out" }, at);
+          tl.to(target, { opacity: 0, duration: dur * 0.55, ease: "power2.in" }, at + dur * 0.45);
+        };
+
+        // Self-preview timeline (not part of the snippet you copy):
+        // punch in with a slight tilt, hold, return.
+        var tl = gsap.timeline({ paused: true });
+        window.ytCameraMove(tl, "#yt-cm-stage", 0.4, { zoom: 0.11, slideY: -26, tilt: 3, pan: -2 });
+        window.ytDefocusPulse(tl, "#yt-cm-defocus", 0.4, 1.2);
+        window.ytCameraReset(tl, "#yt-cm-stage", 2.5);
+        window.ytDefocusPulse(tl, "#yt-cm-defocus", 2.5, 1.2);
+        tl.set("#yt-cm-root", { visibility: "hidden" }, 3.98);
+        window.__timelines["yt-camera-move"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/yt-camera-move/yt-camera-move.html b/docs/public/catalog/components/yt-camera-move/yt-camera-move.html
new file mode 100644
index 0000000000..6034ea6434
--- /dev/null
+++ b/docs/public/catalog/components/yt-camera-move/yt-camera-move.html
@@ -0,0 +1,175 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      /* ---- yt-camera-move --------------------------------------------------
+         The creator-video punch-in as reusable GSAP helpers: dynamic
+         zoom + slide + 3D tilt/pan on any wrapper (a #video-wrap, a
+         sub-composition include, an image card). A talking-head recipe
+         is the default: cubic easing, ~11% zoom.
+
+         Optional: .yt-cm-defocus is an edge-blur overlay that pulses during
+         the move to sell the 3D feel — place it ABOVE the moving layer,
+         covering the same region. */
+      .yt-cm-defocus {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        opacity: 0;
+        backdrop-filter: blur(7px);
+        -webkit-backdrop-filter: blur(7px);
+        /* blur only the frame edges; center stays sharp */
+        -webkit-mask-image: radial-gradient(
+          ellipse 62% 58% at 50% 50%,
+          transparent 58%,
+          rgba(0, 0, 0, 0.85) 92%
+        );
+        mask-image: radial-gradient(
+          ellipse 62% 58% at 50% 50%,
+          transparent 58%,
+          rgba(0, 0, 0, 0.85) 92%
+        );
+      }
+      /* ---- self-preview stand-in "footage" (not part of the snippet) ---- */
+      #yt-cm-stage {
+        position: absolute;
+        inset: 0;
+        overflow: hidden;
+        background: linear-gradient(135deg, #35c8d9 0%, #2a7fff 55%, #7d5cff 100%);
+      }
+      /* Grid is the only cue that reveals the camera move on a flat gradient
+         plate; at 0.14/2px the zoom and slide were nearly imperceptible. */
+      #yt-cm-stage .yt-cm-grid {
+        position: absolute;
+        inset: -60px;
+        background:
+          repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.3) 0 3px, transparent 3px 120px),
+          repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.3) 0 3px, transparent 3px 120px);
+      }
+      #yt-cm-stage .yt-cm-label {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-family: "Inter", ui-sans-serif, sans-serif;
+        font-weight: 700;
+        font-size: 120px;
+        letter-spacing: -0.02em;
+        color: rgba(255, 255, 255, 0.92);
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Self-preview wrapper. WIRING: copy the .yt-cm-defocus CSS (if you want
+         the edge blur), add <div class="yt-cm-defocus" id="yt-my-defocus"></div>
+         as a sibling ABOVE your moving layer, and copy the helpers into your
+         host script. Then drive any wrapper:
+
+           ytCameraMove(tl, "#video-wrap", 5.0, { zoom: 0.11, slideY: -24 });
+           ytDefocusPulse(tl, "#yt-my-defocus", 5.0, 1.2);
+           ytCameraReset(tl, "#video-wrap", 9.0);
+    -->
+    <div
+      id="yt-cm-root"
+      data-composition-id="yt-camera-move"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="yt-cm-stage">
+        <div class="yt-cm-grid" data-layout-allow-overflow></div>
+        <div class="yt-cm-label">FOOTAGE</div>
+      </div>
+      <div class="yt-cm-defocus" id="yt-cm-defocus"></div>
+      <div
+        id="yt-cm-drv"
+        class="clip"
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        // ---- copy these helpers into the host script ----
+        // Punch-in / camera move on any wrapper. A talking-head base:
+        // zoom 0.11, cubic ease. tilt/pan are degrees (rotationX/rotationY,
+        // perspective is set for you); slideX/slideY in px; roll in degrees.
+        window.ytCameraMove = function (tl, target, at, opts) {
+          opts = opts || {};
+          var dur = opts.dur === undefined ? 1.2 : opts.dur;
+          gsap.set(target, {
+            transformPerspective: 1200,
+            transformOrigin: opts.origin || "50% 50%",
+          });
+          tl.to(
+            target,
+            {
+              scale: 1 + (opts.zoom === undefined ? 0.11 : opts.zoom),
+              x: opts.slideX || 0,
+              y: opts.slideY || 0,
+              rotationX: opts.tilt || 0,
+              rotationY: opts.pan || 0,
+              rotation: opts.roll || 0,
+              duration: dur,
+              ease: opts.ease || "power2.inOut",
+            },
+            at,
+          );
+        };
+        // Return to rest (same easing family).
+        window.ytCameraReset = function (tl, target, at, opts) {
+          opts = opts || {};
+          tl.to(
+            target,
+            {
+              scale: 1,
+              x: 0,
+              y: 0,
+              rotationX: 0,
+              rotationY: 0,
+              rotation: 0,
+              duration: opts.dur === undefined ? 1.2 : opts.dur,
+              ease: opts.ease || "power2.inOut",
+            },
+            at,
+          );
+        };
+        // Edge-defocus pulse synced to a move (overlay fades in then out).
+        window.ytDefocusPulse = function (tl, target, at, dur) {
+          dur = dur === undefined ? 1.2 : dur;
+          tl.to(target, { opacity: 1, duration: dur * 0.45, ease: "power2.out" }, at);
+          tl.to(target, { opacity: 0, duration: dur * 0.55, ease: "power2.in" }, at + dur * 0.45);
+        };
+
+        // Self-preview timeline (not part of the snippet you copy):
+        // punch in with a slight tilt, hold, return.
+        var tl = gsap.timeline({ paused: true });
+        window.ytCameraMove(tl, "#yt-cm-stage", 0.4, { zoom: 0.11, slideY: -26, tilt: 3, pan: -2 });
+        window.ytDefocusPulse(tl, "#yt-cm-defocus", 0.4, 1.2);
+        window.ytCameraReset(tl, "#yt-cm-stage", 2.5);
+        window.ytDefocusPulse(tl, "#yt-cm-defocus", 2.5, 1.2);
+        tl.set("#yt-cm-root", { visibility: "hidden" }, 3.98);
+        window.__timelines["yt-camera-move"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/yt-circle-pointer/demo.html b/docs/public/catalog/components/yt-circle-pointer/demo.html
new file mode 100644
index 0000000000..0571fda655
--- /dev/null
+++ b/docs/public/catalog/components/yt-circle-pointer/demo.html
@@ -0,0 +1,171 @@
+<!doctype html>
+<!-- Demo plate for the catalog preview. Identical to yt-circle-pointer.html except the
+     root background, which is opaque here so the transparent overlay reads.
+     Not installed by `hyperframes add` - registry-item.json lists yt-circle-pointer.html only. -->
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #14161c;
+        overflow: hidden;
+      }
+      /* ---- yt-circle-pointer -----------------------------------------------
+         Annotation tools: a hand-drawn-feel circle that draws on around a
+         target, and a countdown chip. Position instances via top/left with
+         explicit width/height. */
+      .yt-circle {
+        --yt-red: #e62e2e;
+        position: absolute;
+        pointer-events: none;
+      }
+      .yt-circle svg {
+        width: 100%;
+        height: 100%;
+        overflow: visible;
+      }
+      .yt-circle ellipse {
+        fill: none;
+        stroke: var(--yt-ptr-color, var(--yt-red));
+        stroke-width: 6;
+        stroke-linecap: round;
+        transform: rotate(-6deg);
+        transform-origin: 50% 50%;
+      }
+      .yt-count {
+        position: absolute;
+        display: inline-flex;
+        align-items: center;
+        gap: 14px;
+        padding: 16px 32px;
+        border-radius: 999px;
+        font-family: "Inter", ui-sans-serif, sans-serif;
+        font-weight: 700;
+        font-size: 40px;
+        background: var(--yt-count-bg, var(--yt-red));
+        color: #ffffff;
+        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
+        pointer-events: none;
+        opacity: 0;
+      }
+      .yt-count .num {
+        font-variant-numeric: tabular-nums;
+        min-width: 1.2em;
+        text-align: center;
+      }
+      /* self-preview scene */
+      #yt-ptr-scene {
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(135deg, #35c8d9 0%, #2a7fff 100%);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-family: "Inter", ui-sans-serif, sans-serif;
+        font-weight: 700;
+        font-size: 60px;
+        color: rgba(255, 255, 255, 0.92);
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Self-preview wrapper. WIRING: copy the .yt-circle / .yt-count CSS and
+         markup patterns, position over your target, then:
+
+           ytCircleOn(tl, "#yt-my-circle", 3.0);          // draws the ring
+           ytCircleOff(tl, "#yt-my-circle", 6.0);
+           ytCountIn(tl, "#yt-my-count", 2.0);
+           ytCountdown(tl, "#yt-my-count", 2.4, 5);       // 5 -> 0, pulsing each tick
+    -->
+    <div
+      id="yt-ptr-root"
+      data-composition-id="yt-circle-pointer"
+      data-start="0"
+      data-duration="5"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="yt-ptr-scene"><span>the thing</span></div>
+      <div
+        class="yt-circle"
+        id="yt-ptr-circle"
+        style="left: 760px; top: 440px; width: 420px; height: 210px"
+      >
+        <svg viewBox="0 0 420 210"><ellipse cx="210" cy="105" rx="196" ry="88"></ellipse></svg>
+      </div>
+      <div class="yt-count" id="yt-ptr-count" style="right: 140px; top: 110px">
+        <span class="num">5</span><span>sec</span>
+      </div>
+      <div
+        id="yt-ptr-drv"
+        class="clip"
+        data-start="0"
+        data-duration="5"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        // ---- copy these helpers into the host script ----
+        window.ytCircleOn = function (tl, target, at, dur) {
+          var el = document.querySelector(target + " ellipse");
+          var len = el.getTotalLength();
+          gsap.set(el, { strokeDasharray: len, strokeDashoffset: len });
+          tl.to(
+            el,
+            { strokeDashoffset: 0, duration: dur === undefined ? 0.7 : dur, ease: "power2.inOut" },
+            at,
+          );
+        };
+        window.ytCircleOff = function (tl, target, at) {
+          tl.to(target, { opacity: 0, duration: 0.35, ease: "power2.in" }, at);
+        };
+        window.ytCountIn = function (tl, target, at) {
+          gsap.set(target, { y: -18, scale: 0.9 });
+          tl.to(target, { opacity: 1, y: 0, scale: 1, duration: 0.45, ease: "back.out(1.5)" }, at);
+        };
+        window.ytCountdown = function (tl, target, at, from) {
+          var num = document.querySelector(target + " .num");
+          var st = { v: from };
+          tl.to(
+            st,
+            {
+              v: 0,
+              duration: from,
+              ease: "none",
+              onUpdate: function () {
+                num.textContent = String(Math.ceil(st.v));
+              },
+            },
+            at,
+          );
+          for (var i = 1; i <= from; i++) {
+            tl.to(target, { scale: 1.07, duration: 0.09, ease: "sine.out" }, at + i - 0.09);
+            tl.to(target, { scale: 1, duration: 0.14, ease: "sine.in" }, at + i);
+          }
+        };
+
+        // Self-preview timeline.
+        var tl = gsap.timeline({ paused: true });
+        window.ytCountIn(tl, "#yt-ptr-count", 0.3);
+        window.ytCountdown(tl, "#yt-ptr-count", 0.7, 3);
+        window.ytCircleOn(tl, "#yt-ptr-circle", 1.0);
+        window.ytCircleOff(tl, "#yt-ptr-circle", 4.2);
+        tl.to("#yt-ptr-count", { opacity: 0, duration: 0.3, ease: "power2.in" }, 4.3);
+        tl.set("#yt-ptr-root", { visibility: "hidden" }, 4.98);
+        window.__timelines["yt-circle-pointer"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/yt-circle-pointer/yt-circle-pointer.html b/docs/public/catalog/components/yt-circle-pointer/yt-circle-pointer.html
new file mode 100644
index 0000000000..62a2f260ad
--- /dev/null
+++ b/docs/public/catalog/components/yt-circle-pointer/yt-circle-pointer.html
@@ -0,0 +1,168 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      /* ---- yt-circle-pointer -----------------------------------------------
+         Annotation tools: a hand-drawn-feel circle that draws on around a
+         target, and a countdown chip. Position instances via top/left with
+         explicit width/height. */
+      .yt-circle {
+        --yt-red: #e62e2e;
+        position: absolute;
+        pointer-events: none;
+      }
+      .yt-circle svg {
+        width: 100%;
+        height: 100%;
+        overflow: visible;
+      }
+      .yt-circle ellipse {
+        fill: none;
+        stroke: var(--yt-ptr-color, var(--yt-red));
+        stroke-width: 6;
+        stroke-linecap: round;
+        transform: rotate(-6deg);
+        transform-origin: 50% 50%;
+      }
+      .yt-count {
+        position: absolute;
+        display: inline-flex;
+        align-items: center;
+        gap: 14px;
+        padding: 16px 32px;
+        border-radius: 999px;
+        font-family: "Inter", ui-sans-serif, sans-serif;
+        font-weight: 700;
+        font-size: 40px;
+        background: var(--yt-count-bg, var(--yt-red));
+        color: #ffffff;
+        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
+        pointer-events: none;
+        opacity: 0;
+      }
+      .yt-count .num {
+        font-variant-numeric: tabular-nums;
+        min-width: 1.2em;
+        text-align: center;
+      }
+      /* self-preview scene */
+      #yt-ptr-scene {
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(135deg, #35c8d9 0%, #2a7fff 100%);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-family: "Inter", ui-sans-serif, sans-serif;
+        font-weight: 700;
+        font-size: 60px;
+        color: rgba(255, 255, 255, 0.92);
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Self-preview wrapper. WIRING: copy the .yt-circle / .yt-count CSS and
+         markup patterns, position over your target, then:
+
+           ytCircleOn(tl, "#yt-my-circle", 3.0);          // draws the ring
+           ytCircleOff(tl, "#yt-my-circle", 6.0);
+           ytCountIn(tl, "#yt-my-count", 2.0);
+           ytCountdown(tl, "#yt-my-count", 2.4, 5);       // 5 -> 0, pulsing each tick
+    -->
+    <div
+      id="yt-ptr-root"
+      data-composition-id="yt-circle-pointer"
+      data-start="0"
+      data-duration="5"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="yt-ptr-scene"><span>the thing</span></div>
+      <div
+        class="yt-circle"
+        id="yt-ptr-circle"
+        style="left: 760px; top: 440px; width: 420px; height: 210px"
+      >
+        <svg viewBox="0 0 420 210"><ellipse cx="210" cy="105" rx="196" ry="88"></ellipse></svg>
+      </div>
+      <div class="yt-count" id="yt-ptr-count" style="right: 140px; top: 110px">
+        <span class="num">5</span><span>sec</span>
+      </div>
+      <div
+        id="yt-ptr-drv"
+        class="clip"
+        data-start="0"
+        data-duration="5"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        // ---- copy these helpers into the host script ----
+        window.ytCircleOn = function (tl, target, at, dur) {
+          var el = document.querySelector(target + " ellipse");
+          var len = el.getTotalLength();
+          gsap.set(el, { strokeDasharray: len, strokeDashoffset: len });
+          tl.to(
+            el,
+            { strokeDashoffset: 0, duration: dur === undefined ? 0.7 : dur, ease: "power2.inOut" },
+            at,
+          );
+        };
+        window.ytCircleOff = function (tl, target, at) {
+          tl.to(target, { opacity: 0, duration: 0.35, ease: "power2.in" }, at);
+        };
+        window.ytCountIn = function (tl, target, at) {
+          gsap.set(target, { y: -18, scale: 0.9 });
+          tl.to(target, { opacity: 1, y: 0, scale: 1, duration: 0.45, ease: "back.out(1.5)" }, at);
+        };
+        window.ytCountdown = function (tl, target, at, from) {
+          var num = document.querySelector(target + " .num");
+          var st = { v: from };
+          tl.to(
+            st,
+            {
+              v: 0,
+              duration: from,
+              ease: "none",
+              onUpdate: function () {
+                num.textContent = String(Math.ceil(st.v));
+              },
+            },
+            at,
+          );
+          for (var i = 1; i <= from; i++) {
+            tl.to(target, { scale: 1.07, duration: 0.09, ease: "sine.out" }, at + i - 0.09);
+            tl.to(target, { scale: 1, duration: 0.14, ease: "sine.in" }, at + i);
+          }
+        };
+
+        // Self-preview timeline.
+        var tl = gsap.timeline({ paused: true });
+        window.ytCountIn(tl, "#yt-ptr-count", 0.3);
+        window.ytCountdown(tl, "#yt-ptr-count", 0.7, 3);
+        window.ytCircleOn(tl, "#yt-ptr-circle", 1.0);
+        window.ytCircleOff(tl, "#yt-ptr-circle", 4.2);
+        tl.to("#yt-ptr-count", { opacity: 0, duration: 0.3, ease: "power2.in" }, 4.3);
+        tl.set("#yt-ptr-root", { visibility: "hidden" }, 4.98);
+        window.__timelines["yt-circle-pointer"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/yt-feather-highlight/demo.html b/docs/public/catalog/components/yt-feather-highlight/demo.html
new file mode 100644
index 0000000000..a24d435b41
--- /dev/null
+++ b/docs/public/catalog/components/yt-feather-highlight/demo.html
@@ -0,0 +1,148 @@
+<!doctype html>
+<!-- Demo plate for the catalog preview. Identical to yt-feather-highlight.html except the
+     root background, which is opaque here so the transparent overlay reads.
+     Not installed by `hyperframes add` - registry-item.json lists yt-feather-highlight.html only. -->
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #14161c;
+        overflow: hidden;
+      }
+      /* ---- yt-feather-highlight --------------------------------------------
+         Spotlight part of the frame: a dim layer with a feathered ellipse
+         hole. The hole's position/size are CSS variables, so the helpers
+         tween them directly (GSAP animates CSS vars). */
+      .yt-hl {
+        --yt-hl-x: 50%;
+        --yt-hl-y: 50%;
+        --yt-hl-rx: 22%;
+        --yt-hl-ry: 26%;
+        --yt-hl-dim: 0.55;
+
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        opacity: 0;
+        background: rgba(6, 8, 12, var(--yt-hl-dim));
+        -webkit-mask-image: radial-gradient(
+          ellipse var(--yt-hl-rx) var(--yt-hl-ry) at var(--yt-hl-x) var(--yt-hl-y),
+          transparent 0%,
+          transparent 52%,
+          black 88%
+        );
+        mask-image: radial-gradient(
+          ellipse var(--yt-hl-rx) var(--yt-hl-ry) at var(--yt-hl-x) var(--yt-hl-y),
+          transparent 0%,
+          transparent 52%,
+          black 88%
+        );
+      }
+      /* self-preview stand-in scene (not part of the snippet) */
+      #yt-hl-scene {
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(135deg, #2a7fff 0%, #7d5cff 100%);
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+        font-family: "Inter", ui-sans-serif, sans-serif;
+        font-weight: 700;
+        font-size: 64px;
+        color: rgba(255, 255, 255, 0.92);
+      }
+      #yt-hl-scene .box {
+        width: 420px;
+        height: 300px;
+        border-radius: 24px;
+        background: rgba(255, 255, 255, 0.16);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Self-preview wrapper. WIRING: copy the .yt-hl CSS and drop
+         <div class="yt-hl" id="yt-my-hl"></div> ABOVE the content to spotlight
+         (same region). Then:
+
+           ytHighlightIn(tl, "#yt-my-hl", 3.0, { x: "28%", y: "50%", rx: "20%", ry: "30%" });
+           ytHighlightTo(tl, "#yt-my-hl", 5.0, { x: "72%" }, 0.8);   // glide to the next target
+           ytHighlightOut(tl, "#yt-my-hl", 8.0);
+    -->
+    <div
+      id="yt-hl-root"
+      data-composition-id="yt-feather-highlight"
+      data-start="0"
+      data-duration="5"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="yt-hl-scene">
+        <div class="box">A</div>
+        <div class="box">B</div>
+      </div>
+      <div class="yt-hl" id="yt-hl-demo"></div>
+      <div
+        id="yt-hl-drv"
+        class="clip"
+        data-start="0"
+        data-duration="5"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        // ---- copy these helpers into the host script ----
+        window.ytHighlightIn = function (tl, target, at, opts) {
+          opts = opts || {};
+          var vars = { opacity: 1, duration: 0.5, ease: "power2.out" };
+          if (opts.x !== undefined) vars["--yt-hl-x"] = opts.x;
+          if (opts.y !== undefined) vars["--yt-hl-y"] = opts.y;
+          if (opts.rx !== undefined) vars["--yt-hl-rx"] = opts.rx;
+          if (opts.ry !== undefined) vars["--yt-hl-ry"] = opts.ry;
+          gsap.set(target, {
+            "--yt-hl-x": opts.x !== undefined ? opts.x : "50%",
+            "--yt-hl-y": opts.y !== undefined ? opts.y : "50%",
+            "--yt-hl-rx": opts.rx !== undefined ? opts.rx : "22%",
+            "--yt-hl-ry": opts.ry !== undefined ? opts.ry : "26%",
+          });
+          tl.to(target, { opacity: 1, duration: 0.5, ease: "power2.out" }, at);
+        };
+        window.ytHighlightTo = function (tl, target, at, opts, dur) {
+          opts = opts || {};
+          var vars = { duration: dur === undefined ? 0.8 : dur, ease: "power2.inOut" };
+          if (opts.x !== undefined) vars["--yt-hl-x"] = opts.x;
+          if (opts.y !== undefined) vars["--yt-hl-y"] = opts.y;
+          if (opts.rx !== undefined) vars["--yt-hl-rx"] = opts.rx;
+          if (opts.ry !== undefined) vars["--yt-hl-ry"] = opts.ry;
+          tl.to(target, vars, at);
+        };
+        window.ytHighlightOut = function (tl, target, at) {
+          tl.to(target, { opacity: 0, duration: 0.4, ease: "power2.in" }, at);
+        };
+
+        // Self-preview timeline: spotlight box A, glide to box B, release.
+        var tl = gsap.timeline({ paused: true });
+        window.ytHighlightIn(tl, "#yt-hl-demo", 0.5, { x: "26%", y: "50%", rx: "17%", ry: "24%" });
+        window.ytHighlightTo(tl, "#yt-hl-demo", 2.2, { x: "74%" }, 0.9);
+        window.ytHighlightOut(tl, "#yt-hl-demo", 4.2);
+        tl.set("#yt-hl-root", { visibility: "hidden" }, 4.98);
+        window.__timelines["yt-feather-highlight"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/yt-feather-highlight/yt-feather-highlight.html b/docs/public/catalog/components/yt-feather-highlight/yt-feather-highlight.html
new file mode 100644
index 0000000000..43701dc807
--- /dev/null
+++ b/docs/public/catalog/components/yt-feather-highlight/yt-feather-highlight.html
@@ -0,0 +1,145 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      /* ---- yt-feather-highlight --------------------------------------------
+         Spotlight part of the frame: a dim layer with a feathered ellipse
+         hole. The hole's position/size are CSS variables, so the helpers
+         tween them directly (GSAP animates CSS vars). */
+      .yt-hl {
+        --yt-hl-x: 50%;
+        --yt-hl-y: 50%;
+        --yt-hl-rx: 22%;
+        --yt-hl-ry: 26%;
+        --yt-hl-dim: 0.55;
+
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        opacity: 0;
+        background: rgba(6, 8, 12, var(--yt-hl-dim));
+        -webkit-mask-image: radial-gradient(
+          ellipse var(--yt-hl-rx) var(--yt-hl-ry) at var(--yt-hl-x) var(--yt-hl-y),
+          transparent 0%,
+          transparent 52%,
+          black 88%
+        );
+        mask-image: radial-gradient(
+          ellipse var(--yt-hl-rx) var(--yt-hl-ry) at var(--yt-hl-x) var(--yt-hl-y),
+          transparent 0%,
+          transparent 52%,
+          black 88%
+        );
+      }
+      /* self-preview stand-in scene (not part of the snippet) */
+      #yt-hl-scene {
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(135deg, #2a7fff 0%, #7d5cff 100%);
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+        font-family: "Inter", ui-sans-serif, sans-serif;
+        font-weight: 700;
+        font-size: 64px;
+        color: rgba(255, 255, 255, 0.92);
+      }
+      #yt-hl-scene .box {
+        width: 420px;
+        height: 300px;
+        border-radius: 24px;
+        background: rgba(255, 255, 255, 0.16);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Self-preview wrapper. WIRING: copy the .yt-hl CSS and drop
+         <div class="yt-hl" id="yt-my-hl"></div> ABOVE the content to spotlight
+         (same region). Then:
+
+           ytHighlightIn(tl, "#yt-my-hl", 3.0, { x: "28%", y: "50%", rx: "20%", ry: "30%" });
+           ytHighlightTo(tl, "#yt-my-hl", 5.0, { x: "72%" }, 0.8);   // glide to the next target
+           ytHighlightOut(tl, "#yt-my-hl", 8.0);
+    -->
+    <div
+      id="yt-hl-root"
+      data-composition-id="yt-feather-highlight"
+      data-start="0"
+      data-duration="5"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="yt-hl-scene">
+        <div class="box">A</div>
+        <div class="box">B</div>
+      </div>
+      <div class="yt-hl" id="yt-hl-demo"></div>
+      <div
+        id="yt-hl-drv"
+        class="clip"
+        data-start="0"
+        data-duration="5"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        // ---- copy these helpers into the host script ----
+        window.ytHighlightIn = function (tl, target, at, opts) {
+          opts = opts || {};
+          var vars = { opacity: 1, duration: 0.5, ease: "power2.out" };
+          if (opts.x !== undefined) vars["--yt-hl-x"] = opts.x;
+          if (opts.y !== undefined) vars["--yt-hl-y"] = opts.y;
+          if (opts.rx !== undefined) vars["--yt-hl-rx"] = opts.rx;
+          if (opts.ry !== undefined) vars["--yt-hl-ry"] = opts.ry;
+          gsap.set(target, {
+            "--yt-hl-x": opts.x !== undefined ? opts.x : "50%",
+            "--yt-hl-y": opts.y !== undefined ? opts.y : "50%",
+            "--yt-hl-rx": opts.rx !== undefined ? opts.rx : "22%",
+            "--yt-hl-ry": opts.ry !== undefined ? opts.ry : "26%",
+          });
+          tl.to(target, { opacity: 1, duration: 0.5, ease: "power2.out" }, at);
+        };
+        window.ytHighlightTo = function (tl, target, at, opts, dur) {
+          opts = opts || {};
+          var vars = { duration: dur === undefined ? 0.8 : dur, ease: "power2.inOut" };
+          if (opts.x !== undefined) vars["--yt-hl-x"] = opts.x;
+          if (opts.y !== undefined) vars["--yt-hl-y"] = opts.y;
+          if (opts.rx !== undefined) vars["--yt-hl-rx"] = opts.rx;
+          if (opts.ry !== undefined) vars["--yt-hl-ry"] = opts.ry;
+          tl.to(target, vars, at);
+        };
+        window.ytHighlightOut = function (tl, target, at) {
+          tl.to(target, { opacity: 0, duration: 0.4, ease: "power2.in" }, at);
+        };
+
+        // Self-preview timeline: spotlight box A, glide to box B, release.
+        var tl = gsap.timeline({ paused: true });
+        window.ytHighlightIn(tl, "#yt-hl-demo", 0.5, { x: "26%", y: "50%", rx: "17%", ry: "24%" });
+        window.ytHighlightTo(tl, "#yt-hl-demo", 2.2, { x: "74%" }, 0.9);
+        window.ytHighlightOut(tl, "#yt-hl-demo", 4.2);
+        tl.set("#yt-hl-root", { visibility: "hidden" }, 4.98);
+        window.__timelines["yt-feather-highlight"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/yt-screen-warp/demo.html b/docs/public/catalog/components/yt-screen-warp/demo.html
new file mode 100644
index 0000000000..b1488e7062
--- /dev/null
+++ b/docs/public/catalog/components/yt-screen-warp/demo.html
@@ -0,0 +1,126 @@
+<!doctype html>
+<!-- Demo plate for the catalog preview. Identical to yt-screen-warp.html except the
+     root background, which is opaque here so the transparent overlay reads.
+     Not installed by `hyperframes add` - registry-item.json lists yt-screen-warp.html only. -->
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #14161c;
+        overflow: hidden;
+      }
+      /* ---- yt-screen-warp ---------------------------------------------------
+         Make footage read as a physical display: add .yt-screen-warp3d to the
+         media WRAPPER (subtle perspective), and place .yt-screen-fx overlay
+         inside it (pixel grid + scanlines + vignette + sheen). */
+      .yt-screen-warp3d {
+        transform: perspective(1400px) rotateY(-3.5deg) rotateX(1.6deg);
+      }
+      .yt-screen-fx {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        opacity: 0;
+        background:
+          /* sheen */
+          linear-gradient(115deg, rgba(255, 255, 255, 0.09) 0%, transparent 30%),
+          /* scanlines */
+          repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.1) 0 1px, transparent 1px 3px),
+          /* pixel grid */
+          repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.06) 0 1px, transparent 1px 4px);
+        box-shadow:
+          inset 0 0 90px rgba(0, 0, 0, 0.4),
+          inset 0 0 8px rgba(0, 0, 0, 0.5);
+      }
+      /* self-preview stand-in */
+      #yt-sw-wrap {
+        position: absolute;
+        left: 360px;
+        top: 190px;
+        width: 1200px;
+        height: 700px;
+        border-radius: 18px;
+        overflow: hidden;
+      }
+      #yt-sw-fill {
+        position: absolute;
+        inset: 0;
+        /* Placeholder footage: L3 of the ink over the dark ground, plus a 3px
+           achromatic hatch so the plate reads as a media surface, not an empty box. */
+        background:
+          repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 3px),
+          rgba(255, 255, 255, 0.18);
+        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-family: "Inter", ui-sans-serif, sans-serif;
+        font-weight: 700;
+        font-size: 92px;
+        color: rgba(255, 255, 255, 0.93);
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Self-preview wrapper. WIRING: copy the two CSS classes; add
+         class="yt-screen-warp3d" to your media wrapper and
+         <div class="yt-screen-fx" id="yt-my-fx"></div> as its LAST child. Then:
+
+           ytScreenOn(tl, "#yt-my-fx", 2.0);
+           ytScreenOff(tl, "#yt-my-fx", 8.0);
+    -->
+    <div
+      id="yt-sw-root"
+      data-composition-id="yt-screen-warp"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="yt-sw-wrap" class="yt-screen-warp3d">
+        <div id="yt-sw-fill">on screen</div>
+        <div class="yt-screen-fx" id="yt-sw-fx"></div>
+      </div>
+      <div
+        id="yt-sw-drv"
+        class="clip"
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        // ---- copy these helpers into the host script ----
+        window.ytScreenOn = function (tl, target, at) {
+          tl.to(target, { opacity: 1, duration: 0.5, ease: "power2.out" }, at);
+        };
+        window.ytScreenOff = function (tl, target, at) {
+          tl.to(target, { opacity: 0, duration: 0.4, ease: "power2.in" }, at);
+        };
+
+        // Self-preview timeline.
+        var tl = gsap.timeline({ paused: true });
+        gsap.set("#yt-sw-wrap", { opacity: 0, scale: 0.96 });
+        tl.to("#yt-sw-wrap", { opacity: 1, scale: 1, duration: 0.5, ease: "power2.out" }, 0.2);
+        window.ytScreenOn(tl, "#yt-sw-fx", 0.8);
+        window.ytScreenOff(tl, "#yt-sw-fx", 3.1);
+        tl.to("#yt-sw-wrap", { opacity: 0, duration: 0.35, ease: "power2.in" }, 3.5);
+        tl.set("#yt-sw-root", { visibility: "hidden" }, 3.98);
+        window.__timelines["yt-screen-warp"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/yt-screen-warp/yt-screen-warp.html b/docs/public/catalog/components/yt-screen-warp/yt-screen-warp.html
new file mode 100644
index 0000000000..24a71574ee
--- /dev/null
+++ b/docs/public/catalog/components/yt-screen-warp/yt-screen-warp.html
@@ -0,0 +1,123 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      /* ---- yt-screen-warp ---------------------------------------------------
+         Make footage read as a physical display: add .yt-screen-warp3d to the
+         media WRAPPER (subtle perspective), and place .yt-screen-fx overlay
+         inside it (pixel grid + scanlines + vignette + sheen). */
+      .yt-screen-warp3d {
+        transform: perspective(1400px) rotateY(-3.5deg) rotateX(1.6deg);
+      }
+      .yt-screen-fx {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        opacity: 0;
+        background:
+          /* sheen */
+          linear-gradient(115deg, rgba(255, 255, 255, 0.09) 0%, transparent 30%),
+          /* scanlines */
+          repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.1) 0 1px, transparent 1px 3px),
+          /* pixel grid */
+          repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.06) 0 1px, transparent 1px 4px);
+        box-shadow:
+          inset 0 0 90px rgba(0, 0, 0, 0.4),
+          inset 0 0 8px rgba(0, 0, 0, 0.5);
+      }
+      /* self-preview stand-in */
+      #yt-sw-wrap {
+        position: absolute;
+        left: 360px;
+        top: 190px;
+        width: 1200px;
+        height: 700px;
+        border-radius: 18px;
+        overflow: hidden;
+      }
+      #yt-sw-fill {
+        position: absolute;
+        inset: 0;
+        /* Placeholder footage: L3 of the ink over the dark ground, plus a 3px
+           achromatic hatch so the plate reads as a media surface, not an empty box. */
+        background:
+          repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 3px),
+          rgba(255, 255, 255, 0.18);
+        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-family: "Inter", ui-sans-serif, sans-serif;
+        font-weight: 700;
+        font-size: 92px;
+        color: rgba(255, 255, 255, 0.93);
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Self-preview wrapper. WIRING: copy the two CSS classes; add
+         class="yt-screen-warp3d" to your media wrapper and
+         <div class="yt-screen-fx" id="yt-my-fx"></div> as its LAST child. Then:
+
+           ytScreenOn(tl, "#yt-my-fx", 2.0);
+           ytScreenOff(tl, "#yt-my-fx", 8.0);
+    -->
+    <div
+      id="yt-sw-root"
+      data-composition-id="yt-screen-warp"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="yt-sw-wrap" class="yt-screen-warp3d">
+        <div id="yt-sw-fill">on screen</div>
+        <div class="yt-screen-fx" id="yt-sw-fx"></div>
+      </div>
+      <div
+        id="yt-sw-drv"
+        class="clip"
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        // ---- copy these helpers into the host script ----
+        window.ytScreenOn = function (tl, target, at) {
+          tl.to(target, { opacity: 1, duration: 0.5, ease: "power2.out" }, at);
+        };
+        window.ytScreenOff = function (tl, target, at) {
+          tl.to(target, { opacity: 0, duration: 0.4, ease: "power2.in" }, at);
+        };
+
+        // Self-preview timeline.
+        var tl = gsap.timeline({ paused: true });
+        gsap.set("#yt-sw-wrap", { opacity: 0, scale: 0.96 });
+        tl.to("#yt-sw-wrap", { opacity: 1, scale: 1, duration: 0.5, ease: "power2.out" }, 0.2);
+        window.ytScreenOn(tl, "#yt-sw-fx", 0.8);
+        window.ytScreenOff(tl, "#yt-sw-fx", 3.1);
+        tl.to("#yt-sw-wrap", { opacity: 0, duration: 0.35, ease: "power2.in" }, 3.5);
+        tl.set("#yt-sw-root", { visibility: "hidden" }, 3.98);
+        window.__timelines["yt-screen-warp"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/zoom-through-transition/__hf-variables-preview.html b/docs/public/catalog/components/zoom-through-transition/__hf-variables-preview.html
new file mode 100644
index 0000000000..4ced3c3a8a
--- /dev/null
+++ b/docs/public/catalog/components/zoom-through-transition/__hf-variables-preview.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Zoom Through Transition variables preview</title>
+    <style>
+      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #f7f7f8; }
+      #hf-vars-root { position: relative; width: 1920px; height: 1080px; }
+      #hf-vars-mount { position: absolute; inset: 0; display: grid; place-items: center; }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  </head>
+  <body>
+    <div id="hf-vars-root" data-composition-id="zoom-through-transition-variables-preview" data-start="0" data-width="1920" data-height="1080" data-duration="5" data-fps="30">
+      <div id="hf-vars-mount" class="clip" data-composition-id="zoom-through-transition" data-composition-src="./zoom-through-transition.html" data-start="0" data-duration="5" data-track-index="0" data-width="1920" data-height="1080"></div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["zoom-through-transition-variables-preview"] = gsap.timeline({ paused: true });
+    </script>
+<script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "zoom-through-transition.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+  </body>
+</html>
diff --git a/docs/public/catalog/components/zoom-through-transition/demo.html b/docs/public/catalog/components/zoom-through-transition/demo.html
new file mode 100644
index 0000000000..f986c86648
--- /dev/null
+++ b/docs/public/catalog/components/zoom-through-transition/demo.html
@@ -0,0 +1,190 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Zoom Through Transition - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+        /* ponytail: scale non-animated wrapper to fill ~65% of 1920×1080 */
+        transform: scale(1.7);
+      }
+      .hf-remocn-zoom-through-transition {
+        --hf-accent: var(--accent, rgba(255, 255, 255, 0.28));
+        --hf-l1: rgba(255, 255, 255, 0.72);
+        --hf-l3: rgba(255, 255, 255, 0.18);
+        --hf-l4: rgba(255, 255, 255, 0.08);
+        --hf-hair: rgba(255, 255, 255, 0.14);
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-zoom-through-transition {
+        position: relative;
+        width: 760px;
+        height: 428px;
+        overflow: hidden;
+        border-radius: 30px;
+        background: #111827;
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+      }
+      .hf-remocn-zoom-through-transition .scene {
+        position: absolute;
+        inset: 0;
+        display: grid;
+        place-items: center;
+        font-weight: 900;
+        font-size: 58px;
+        letter-spacing: -0.05em;
+        color: #fff;
+      }
+      .hf-remocn-zoom-through-transition .from {
+        background:
+          repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 4px),
+          var(--hf-l4);
+        transform: translate(var(--hf-from-x, 0px), var(--hf-from-y, 0px))
+          scale(var(--hf-from-scale, 1));
+        filter: blur(var(--hf-from-blur, 0px));
+      }
+      .hf-remocn-zoom-through-transition .to {
+        background:
+          repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 4px),
+          var(--hf-l3);
+        box-shadow: inset 0 0 0 2px var(--hf-accent);
+        transform: translate(var(--hf-to-x, 0px), var(--hf-to-y, 0px)) scale(var(--hf-to-scale, 1));
+        clip-path: inset(
+          var(--hf-clip-top, 0%) var(--hf-clip-right, 100%) var(--hf-clip-bottom, 0%)
+            var(--hf-clip-left, 0%)
+        );
+      }
+      .hf-remocn-zoom-through-transition .fx {
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
+        mix-blend-mode: screen;
+        transform: translateX(var(--hf-fx-x, -110%));
+      }
+      .hf-remocn-zoom-through-transition .rgb {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        opacity: var(--hf-rgb-opacity, 0);
+        background: linear-gradient(
+          90deg,
+          rgba(239, 68, 68, 0.35),
+          transparent,
+          rgba(34, 211, 238, 0.35)
+        );
+        transform: translateX(var(--hf-rgb-x, 0px));
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="zoom-through-transition-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-zoom-through-transition">
+          <div class="scene from">Before</div>
+          <div class="scene to">Zoom Through Transition</div>
+          <div class="fx"></div>
+          <div class="rgb"></div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-zoom-through-transition .to",
+          { "--hf-clip-right": "100%", "--hf-to-x": "60px", "--hf-to-scale": 1.04 },
+          {
+            "--hf-clip-right": "0%",
+            "--hf-to-x": "0px",
+            "--hf-to-scale": 1,
+            duration: 0.9,
+            ease: "power3.inOut",
+          },
+          startTime,
+        );
+        tl.to(
+          ".hf-remocn-zoom-through-transition .from",
+          {
+            "--hf-from-x": "-70px",
+            "--hf-from-scale": 0.96,
+            "--hf-from-blur": "5px",
+            duration: 0.9,
+            ease: "power3.inOut",
+          },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-zoom-through-transition .fx",
+          { "--hf-fx-x": "-110%" },
+          { "--hf-fx-x": "110%", duration: 0.58, ease: "power2.inOut" },
+          startTime + 0.18,
+        );
+        tl.fromTo(
+          ".hf-remocn-zoom-through-transition .rgb",
+          { "--hf-rgb-opacity": 0, "--hf-rgb-x": "-16px" },
+          {
+            "--hf-rgb-opacity": 1,
+            "--hf-rgb-x": "16px",
+            repeat: 3,
+            yoyo: true,
+            duration: 0.07,
+            ease: "steps(1)",
+          },
+          startTime + 0.32,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["zoom-through-transition-demo"] = tl;
+      </script>
+    </div>
+  <script>
+  (function () {
+    var raw = new URLSearchParams(location.search).get('hfv');
+    if (raw === null) return;
+    var v;
+    try { v = JSON.parse(raw); } catch (e) { return; }
+    if (!v || typeof v !== 'object') return;
+    window.__hfVariables = v;
+    var hosts = document.querySelectorAll('[data-composition-src]');
+    for (var i = 0; i < hosts.length; i++) {
+      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];
+      if (src.slice(src.lastIndexOf('/') + 1) !== "zoom-through-transition.html") continue;
+      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));
+    }
+  })();
+</script>
+</body>
+</html>
diff --git a/docs/public/catalog/components/zoom-through-transition/zoom-through-transition.html b/docs/public/catalog/components/zoom-through-transition/zoom-through-transition.html
new file mode 100644
index 0000000000..3c85c55336
--- /dev/null
+++ b/docs/public/catalog/components/zoom-through-transition/zoom-through-transition.html
@@ -0,0 +1,284 @@
+<!doctype html>
+<!--
+  Zoom Through Transition - a scene push that wipes the incoming scene through
+  the outgoing one while the outgoing one drifts back and blurs.
+
+  Mount contract: MOUNTABLE SUB-COMPOSITION. The runtime clones only <template>
+  contents; #root fills the host box (inset: 0, container-type: size), and the
+  file registers one paused timeline under the literal "zoom-through-transition"
+  key. Variables come from window.__hyperframes.getVariables().
+
+  This file owns its motion. It previously shipped as a fragment whose only
+  executable timeline lived in demo.html, so an installed copy rendered the
+  finished pose and never moved.
+
+  Variables (declared in data-composition-variables below):
+    - from-label (string, default "Before"): caption on the outgoing scene.
+    - to-label (string, default "Zoom Through Transition"): caption on the
+      incoming scene, clipped out of frame until the wipe brings it in.
+    - depth (close | standard | far, default standard): multiplies how far both
+      scenes travel and how hard the outgoing one blurs. Every input it
+      multiplies is zero at rest, so it collapses to the shipped pose there. It
+      deliberately leaves the two scale tracks alone: the timeline drives those
+      from their own start values, which a multiplier would distort.
+    - accent (blue | green | violet, default blue): ink of the ring that marks
+      the incoming scene. Both scenes are monochrome placeholder material; the
+      ring is the one accent-coloured element. blue rides --accent, green rides
+      --brand, violet rides --accent-2, and each falls back to a neutral
+      hairline so an unthemed composition renders in black and white.
+
+  Envelope: the push starts at 0.35s (clamped to fit shorter durations), runs
+  0.9s, then holds the incoming scene for whatever is left.
+-->
+<html
+  lang="en"
+  data-composition-id="zoom-through-transition"
+  data-composition-duration="3"
+  data-composition-variables='[
+    { "id": "from-label", "type": "string", "role": "content", "label": "Outgoing label", "description": "Caption on the outgoing scene, the one on screen when the transition starts.", "default": "Before" },
+    { "id": "to-label", "type": "string", "role": "content", "label": "Incoming label", "description": "Caption on the incoming scene, the one the timeline wipes into frame.", "default": "Zoom Through Transition" },
+    { "id": "depth", "type": "enum", "role": "motion", "label": "Depth", "description": "Multiplies how far both scenes travel and how hard the outgoing one blurs, so the push covers a shorter or longer run in the same time.", "default": "standard", "options": [{ "value": "close", "label": "Close" }, { "value": "standard", "label": "Standard" }, { "value": "far", "label": "Far" }] },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Theme token for the ring marking the incoming scene. Blue rides --accent, green --brand, violet --accent-2; each falls back to a neutral hairline.", "default": "blue", "options": [{ "value": "blue", "label": "Blue" }, { "value": "green", "label": "Green" }, { "value": "violet", "label": "Violet" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Zoom Through Transition</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="zoom-through-transition" data-duration="3" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          /* Root fills the host-owned box; the scenes measure against it. */
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            background: #111827;
+          }
+
+          .hf-remocn-zoom-through-transition {
+            --hf-accent: var(--accent, rgba(255, 255, 255, 0.28));
+            --hf-l1: rgba(255, 255, 255, 0.72);
+            --hf-l3: rgba(255, 255, 255, 0.18);
+            --hf-l4: rgba(255, 255, 255, 0.08);
+            --hf-hair: rgba(255, 255, 255, 0.14);
+            --hf-ink: #111827;
+            --hf-muted: #6b7280;
+            --hf-surface: #ffffff;
+            color: var(--hf-ink);
+            font-family: Inter, system-ui, sans-serif;
+          }
+          .hf-remocn-zoom-through-transition {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            background: #111827;
+          }
+          .hf-remocn-zoom-through-transition .scene {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            font-weight: 900;
+            font-size: 13.5cqmin;
+            letter-spacing: -0.05em;
+            color: #fff;
+          }
+          .hf-remocn-zoom-through-transition .from {
+            background:
+              repeating-linear-gradient(
+                90deg,
+                rgba(255, 255, 255, 0.04) 0 1px,
+                transparent 1px 4px
+              ),
+              var(--hf-l4);
+            transform: translate(
+                calc(var(--hf-from-x, 0px) * var(--hf-depth, 1)),
+                calc(var(--hf-from-y, 0px) * var(--hf-depth, 1))
+              )
+              scale(var(--hf-from-scale, 1));
+            filter: blur(calc(var(--hf-from-blur, 0px) * var(--hf-depth, 1)));
+          }
+          .hf-remocn-zoom-through-transition .to {
+            background:
+              repeating-linear-gradient(
+                90deg,
+                rgba(255, 255, 255, 0.05) 0 1px,
+                transparent 1px 4px
+              ),
+              var(--hf-l3);
+            box-shadow: inset 0 0 0 2px var(--hf-accent);
+            transform: translate(
+                calc(var(--hf-to-x, 0px) * var(--hf-depth, 1)),
+                calc(var(--hf-to-y, 0px) * var(--hf-depth, 1))
+              )
+              scale(var(--hf-to-scale, 1));
+            clip-path: inset(
+              var(--hf-clip-top, 0%) var(--hf-clip-right, 100%) var(--hf-clip-bottom, 0%)
+                var(--hf-clip-left, 0%)
+            );
+          }
+          .hf-remocn-zoom-through-transition .fx {
+            position: absolute;
+            inset: 0;
+            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
+            mix-blend-mode: screen;
+            transform: translateX(var(--hf-fx-x, -110%));
+          }
+          .hf-remocn-zoom-through-transition .rgb {
+            position: absolute;
+            inset: 0;
+            pointer-events: none;
+            opacity: var(--hf-rgb-opacity, 0);
+            background: linear-gradient(
+              90deg,
+              rgba(239, 68, 68, 0.35),
+              transparent,
+              rgba(34, 211, 238, 0.35)
+            );
+            transform: translateX(var(--hf-rgb-x, 0px));
+          }
+        </style>
+
+        <div class="hf-remocn-zoom-through-transition">
+          >
+          <div class="scene from">Before</div>
+          <div class="scene to">Zoom Through Transition</div>
+          <div class="fx"></div>
+          <div class="rgb"></div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            // Unrecognised overrides return to their declared defaults.
+            var depths = { close: 0.55, standard: 1, far: 1.7 };
+            // Each choice routes to a different contract token so the variable stays
+            // meaningful under a theme rather than collapsing into one themed accent.
+            var HAIRLINE = "rgba(255, 255, 255, 0.28)";
+            var accents = {
+              blue: "var(--accent, " + HAIRLINE + ")",
+              green: "var(--brand, " + HAIRLINE + ")",
+              violet: "var(--accent-2, " + HAIRLINE + ")",
+            };
+
+            function pick(table, value, fallback) {
+              return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+            }
+
+            function label(value) {
+              return typeof value === "string" && value !== "" ? value : null;
+            }
+
+            var depth = depths[pick(depths, vars.depth, "standard")];
+            var accent = accents[pick(accents, vars.accent, "blue")];
+            var fromLabel = label(vars["from-label"]);
+            var toLabel = label(vars["to-label"]);
+
+            var roots = document.querySelectorAll(".hf-remocn-zoom-through-transition");
+            var mountRoot = document.getElementById("root");
+            for (var i = 0; i < roots.length; i += 1) {
+              var root = roots[i];
+              root.style.setProperty("--hf-depth", String(depth));
+              root.style.setProperty("--hf-accent", accent);
+
+              var fromScene = root.querySelector(".from");
+              var toScene = root.querySelector(".to");
+              if (fromLabel !== null && fromScene) {
+                fromScene.textContent = fromLabel;
+              }
+              if (toLabel !== null && toScene) {
+                toScene.textContent = toLabel;
+              }
+            }
+
+            // The motion used to live only in this file's demo page, so an installed
+            // copy rendered the finished pose and never moved. The timeline belongs
+            // with the markup it drives: build it here, paused, and register it under
+            // this composition's own id so the runtime seeks it frame by frame.
+            if (!mountRoot || !window.gsap) return;
+
+            var SELF = ".hf-remocn-zoom-through-transition";
+            var duration = Math.max(0.001, parseFloat(mountRoot.dataset.duration || "3"));
+            // The push reads as a transition only with a beat of the outgoing scene
+            // before it. Clamped so the wipe always lands inside the duration.
+            var PUSH = 0.9;
+            var START = Math.max(0, Math.min(0.35, duration - PUSH));
+
+            var tl = window.gsap.timeline({ paused: true });
+
+            tl.fromTo(
+              SELF + " .to",
+              { "--hf-clip-right": "100%", "--hf-to-x": "60px", "--hf-to-scale": 1.04 },
+              {
+                "--hf-clip-right": "0%",
+                "--hf-to-x": "0px",
+                "--hf-to-scale": 1,
+                duration: PUSH,
+                ease: "power3.inOut",
+              },
+              START,
+            );
+            tl.fromTo(
+              SELF + " .from",
+              { "--hf-from-x": "0px", "--hf-from-scale": 1, "--hf-from-blur": "0px" },
+              {
+                "--hf-from-x": "-70px",
+                "--hf-from-scale": 0.96,
+                "--hf-from-blur": "5px",
+                duration: PUSH,
+                ease: "power3.inOut",
+              },
+              START,
+            );
+            tl.fromTo(
+              SELF + " .fx",
+              { "--hf-fx-x": "-110%" },
+              { "--hf-fx-x": "110%", duration: 0.58, ease: "power2.inOut" },
+              START + 0.18,
+            );
+            // repeat/yoyo resolves from absolute time on every seek, so the strobe is
+            // reproducible at any frame rather than accumulated across ticks.
+            tl.fromTo(
+              SELF + " .rgb",
+              { "--hf-rgb-opacity": 0, "--hf-rgb-x": "-16px" },
+              {
+                "--hf-rgb-opacity": 1,
+                "--hf-rgb-x": "16px",
+                repeat: 3,
+                yoyo: true,
+                duration: 0.07,
+                ease: "steps(1)",
+              },
+              START + 0.32,
+            );
+
+            // HOLD: the incoming scene rests for whatever is left of the duration.
+            tl.set({}, {}, duration);
+
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines["zoom-through-transition"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/docs/public/catalog/preview/blocks/app-showcase.html b/docs/public/catalog/preview/blocks/app-showcase.html
new file mode 100644
index 0000000000..677562099a
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/app-showcase.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>App Showcase preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/app-showcase/app-showcase.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/apple-money-count.html b/docs/public/catalog/preview/blocks/apple-money-count.html
new file mode 100644
index 0000000000..1f3cc45787
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/apple-money-count.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Apple Money Count preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/apple-money-count/apple-money-count.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/bar-chart-race.html b/docs/public/catalog/preview/blocks/bar-chart-race.html
new file mode 100644
index 0000000000..8493bad531
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/bar-chart-race.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Bar Chart Race preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../blocks/bar-chart-race/__hf-variables-preview.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/beat-freeze-cut.html b/docs/public/catalog/preview/blocks/beat-freeze-cut.html
new file mode 100644
index 0000000000..ce0ac9c437
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/beat-freeze-cut.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Beat Freeze Cut preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/beat-freeze-cut/beat-freeze-cut.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/blue-sweater-intro-video.html b/docs/public/catalog/preview/blocks/blue-sweater-intro-video.html
new file mode 100644
index 0000000000..889da75df4
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/blue-sweater-intro-video.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Blue Sweater Intro Video preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/blue-sweater-intro-video/blue-sweater-intro-video.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/camcorder-hud.html b/docs/public/catalog/preview/blocks/camcorder-hud.html
new file mode 100644
index 0000000000..0d722751b0
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/camcorder-hud.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Camcorder HUD preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/camcorder-hud/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/camera-dolly-zoom.html b/docs/public/catalog/preview/blocks/camera-dolly-zoom.html
new file mode 100644
index 0000000000..18c8b85f76
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/camera-dolly-zoom.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Dolly Zoom (Vertigo Shot) preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../blocks/camera-dolly-zoom/__hf-variables-preview.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/chromatic-radial-split.html b/docs/public/catalog/preview/blocks/chromatic-radial-split.html
new file mode 100644
index 0000000000..3c5d134c8b
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/chromatic-radial-split.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Chromatic Radial Split preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/chromatic-radial-split/chromatic-radial-split.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/cinematic-zoom.html b/docs/public/catalog/preview/blocks/cinematic-zoom.html
new file mode 100644
index 0000000000..533c61c311
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/cinematic-zoom.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Cinematic Zoom preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/cinematic-zoom/cinematic-zoom.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/code-3d-extrude.html b/docs/public/catalog/preview/blocks/code-3d-extrude.html
new file mode 100644
index 0000000000..a29a0724dd
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/code-3d-extrude.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Code 3D Extrude preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/code-3d-extrude/code-3d-extrude.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/code-diff.html b/docs/public/catalog/preview/blocks/code-diff.html
new file mode 100644
index 0000000000..a67277a7f1
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/code-diff.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Code Diff preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/code-diff/code-diff.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/code-highlight.html b/docs/public/catalog/preview/blocks/code-highlight.html
new file mode 100644
index 0000000000..1dcd124843
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/code-highlight.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Code Highlight Sweep preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/code-highlight/code-highlight.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/code-morph.html b/docs/public/catalog/preview/blocks/code-morph.html
new file mode 100644
index 0000000000..8253896790
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/code-morph.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Code Morph preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/code-morph/code-morph.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/code-particle-assemble.html b/docs/public/catalog/preview/blocks/code-particle-assemble.html
new file mode 100644
index 0000000000..7756118079
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/code-particle-assemble.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Code Particle Assemble preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/code-particle-assemble/code-particle-assemble.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/code-scroll.html b/docs/public/catalog/preview/blocks/code-scroll.html
new file mode 100644
index 0000000000..f92b5309be
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/code-scroll.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Code Scroll To Line preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/code-scroll/code-scroll.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/code-shader-dissolve.html b/docs/public/catalog/preview/blocks/code-shader-dissolve.html
new file mode 100644
index 0000000000..47701a585c
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/code-shader-dissolve.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Code Shader Dissolve preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/code-shader-dissolve/code-shader-dissolve.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/code-snippet-apple-terminal-basic.html b/docs/public/catalog/preview/blocks/code-snippet-apple-terminal-basic.html
new file mode 100644
index 0000000000..6353bdd8e7
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/code-snippet-apple-terminal-basic.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Code Snippet - Apple Terminal Basic preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/code-snippet-apple-terminal-basic/code-snippet-apple-terminal-basic.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/code-snippet-apple-terminal-clear-dark.html b/docs/public/catalog/preview/blocks/code-snippet-apple-terminal-clear-dark.html
new file mode 100644
index 0000000000..7b79b82816
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/code-snippet-apple-terminal-clear-dark.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Code Snippet - Apple Terminal Clear Dark preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/code-snippet-apple-terminal-clear-dark/code-snippet-apple-terminal-clear-dark.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/code-snippet-apple-terminal-clear-light.html b/docs/public/catalog/preview/blocks/code-snippet-apple-terminal-clear-light.html
new file mode 100644
index 0000000000..3fc2fc8c02
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/code-snippet-apple-terminal-clear-light.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Code Snippet - Apple Terminal Clear Light preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/code-snippet-apple-terminal-clear-light/code-snippet-apple-terminal-clear-light.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/code-snippet-apple-terminal-grass.html b/docs/public/catalog/preview/blocks/code-snippet-apple-terminal-grass.html
new file mode 100644
index 0000000000..015beb703f
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/code-snippet-apple-terminal-grass.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Code Snippet - Apple Terminal Grass preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/code-snippet-apple-terminal-grass/code-snippet-apple-terminal-grass.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/code-snippet-apple-terminal-homebrew.html b/docs/public/catalog/preview/blocks/code-snippet-apple-terminal-homebrew.html
new file mode 100644
index 0000000000..f648101933
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/code-snippet-apple-terminal-homebrew.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Code Snippet - Apple Terminal Homebrew preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/code-snippet-apple-terminal-homebrew/code-snippet-apple-terminal-homebrew.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/code-snippet-apple-terminal-man-page.html b/docs/public/catalog/preview/blocks/code-snippet-apple-terminal-man-page.html
new file mode 100644
index 0000000000..185b5b2cd6
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/code-snippet-apple-terminal-man-page.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Code Snippet - Apple Terminal Man Page preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/code-snippet-apple-terminal-man-page/code-snippet-apple-terminal-man-page.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/code-snippet-apple-terminal-novel.html b/docs/public/catalog/preview/blocks/code-snippet-apple-terminal-novel.html
new file mode 100644
index 0000000000..fcd054486a
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/code-snippet-apple-terminal-novel.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Code Snippet - Apple Terminal Novel preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/code-snippet-apple-terminal-novel/code-snippet-apple-terminal-novel.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/code-snippet-apple-terminal-ocean.html b/docs/public/catalog/preview/blocks/code-snippet-apple-terminal-ocean.html
new file mode 100644
index 0000000000..f192a7be84
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/code-snippet-apple-terminal-ocean.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Code Snippet - Apple Terminal Ocean preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/code-snippet-apple-terminal-ocean/code-snippet-apple-terminal-ocean.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/code-snippet-apple-terminal-pro.html b/docs/public/catalog/preview/blocks/code-snippet-apple-terminal-pro.html
new file mode 100644
index 0000000000..2c9b36247c
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/code-snippet-apple-terminal-pro.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Code Snippet - Apple Terminal Pro preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/code-snippet-apple-terminal-pro/code-snippet-apple-terminal-pro.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/code-snippet-apple-terminal-red-sands.html b/docs/public/catalog/preview/blocks/code-snippet-apple-terminal-red-sands.html
new file mode 100644
index 0000000000..90016e03d2
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/code-snippet-apple-terminal-red-sands.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Code Snippet - Apple Terminal Red Sands preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/code-snippet-apple-terminal-red-sands/code-snippet-apple-terminal-red-sands.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/code-snippet-apple-terminal-silver-aerogel.html b/docs/public/catalog/preview/blocks/code-snippet-apple-terminal-silver-aerogel.html
new file mode 100644
index 0000000000..6b56a6c962
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/code-snippet-apple-terminal-silver-aerogel.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Code Snippet - Apple Terminal Silver Aerogel preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/code-snippet-apple-terminal-silver-aerogel/code-snippet-apple-terminal-silver-aerogel.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/code-snippet-apple-terminal-solid-colors.html b/docs/public/catalog/preview/blocks/code-snippet-apple-terminal-solid-colors.html
new file mode 100644
index 0000000000..931e174695
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/code-snippet-apple-terminal-solid-colors.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Code Snippet - Apple Terminal Solid Colors preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/code-snippet-apple-terminal-solid-colors/code-snippet-apple-terminal-solid-colors.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/code-snippet-dark-2026.html b/docs/public/catalog/preview/blocks/code-snippet-dark-2026.html
new file mode 100644
index 0000000000..f78045de38
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/code-snippet-dark-2026.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Code Snippet - Dark 2026 preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/code-snippet-dark-2026/code-snippet-dark-2026.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/code-snippet-dark-modern.html b/docs/public/catalog/preview/blocks/code-snippet-dark-modern.html
new file mode 100644
index 0000000000..cc2800b3bc
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/code-snippet-dark-modern.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Code Snippet - Dark Modern preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/code-snippet-dark-modern/code-snippet-dark-modern.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/code-snippet-dark-plus.html b/docs/public/catalog/preview/blocks/code-snippet-dark-plus.html
new file mode 100644
index 0000000000..55faf9829c
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/code-snippet-dark-plus.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Code Snippet - Dark+ preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/code-snippet-dark-plus/code-snippet-dark-plus.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/code-snippet-flight.html b/docs/public/catalog/preview/blocks/code-snippet-flight.html
new file mode 100644
index 0000000000..0df3115af6
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/code-snippet-flight.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Code Snippet Flight preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/code-snippet-flight/code-snippet-flight.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/code-snippet-high-contrast-light.html b/docs/public/catalog/preview/blocks/code-snippet-high-contrast-light.html
new file mode 100644
index 0000000000..5826af2b94
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/code-snippet-high-contrast-light.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Code Snippet - High Contrast Light preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/code-snippet-high-contrast-light/code-snippet-high-contrast-light.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/code-snippet-high-contrast.html b/docs/public/catalog/preview/blocks/code-snippet-high-contrast.html
new file mode 100644
index 0000000000..fc1db10e55
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/code-snippet-high-contrast.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Code Snippet - High Contrast preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/code-snippet-high-contrast/code-snippet-high-contrast.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/code-snippet-light-2026.html b/docs/public/catalog/preview/blocks/code-snippet-light-2026.html
new file mode 100644
index 0000000000..d46d915b5b
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/code-snippet-light-2026.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Code Snippet - Light 2026 preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/code-snippet-light-2026/code-snippet-light-2026.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/code-snippet-light-modern.html b/docs/public/catalog/preview/blocks/code-snippet-light-modern.html
new file mode 100644
index 0000000000..11f5607cf0
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/code-snippet-light-modern.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Code Snippet - Light Modern preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/code-snippet-light-modern/code-snippet-light-modern.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/code-snippet-light-plus.html b/docs/public/catalog/preview/blocks/code-snippet-light-plus.html
new file mode 100644
index 0000000000..b649b9fa68
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/code-snippet-light-plus.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Code Snippet - Light+ preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/code-snippet-light-plus/code-snippet-light-plus.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/code-snippet-monokai.html b/docs/public/catalog/preview/blocks/code-snippet-monokai.html
new file mode 100644
index 0000000000..4fe4d316cf
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/code-snippet-monokai.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Code Snippet - Monokai preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/code-snippet-monokai/code-snippet-monokai.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/code-snippet-solarized-light.html b/docs/public/catalog/preview/blocks/code-snippet-solarized-light.html
new file mode 100644
index 0000000000..4e828a6a91
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/code-snippet-solarized-light.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Code Snippet - Solarized Light preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/code-snippet-solarized-light/code-snippet-solarized-light.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/code-snippet-visual-studio-dark.html b/docs/public/catalog/preview/blocks/code-snippet-visual-studio-dark.html
new file mode 100644
index 0000000000..13d20ae247
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/code-snippet-visual-studio-dark.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Code Snippet - Visual Studio Dark preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/code-snippet-visual-studio-dark/code-snippet-visual-studio-dark.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/code-snippet-visual-studio-light.html b/docs/public/catalog/preview/blocks/code-snippet-visual-studio-light.html
new file mode 100644
index 0000000000..cc01e26680
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/code-snippet-visual-studio-light.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Code Snippet - Visual Studio Light preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/code-snippet-visual-studio-light/code-snippet-visual-studio-light.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/code-typing.html b/docs/public/catalog/preview/blocks/code-typing.html
new file mode 100644
index 0000000000..ccb7bcbee2
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/code-typing.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Code Typing preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/code-typing/code-typing.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/cosmic-orb.html b/docs/public/catalog/preview/blocks/cosmic-orb.html
new file mode 100644
index 0000000000..93441bb221
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/cosmic-orb.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Cosmic Orb preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../blocks/cosmic-orb/__hf-variables-preview.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/cross-warp-morph.html b/docs/public/catalog/preview/blocks/cross-warp-morph.html
new file mode 100644
index 0000000000..e554a9d6ee
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/cross-warp-morph.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Cross Warp Morph preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/cross-warp-morph/cross-warp-morph.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/data-chart.html b/docs/public/catalog/preview/blocks/data-chart.html
new file mode 100644
index 0000000000..034a68f058
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/data-chart.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Data Chart preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/data-chart/data-chart.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/domain-warp-dissolve.html b/docs/public/catalog/preview/blocks/domain-warp-dissolve.html
new file mode 100644
index 0000000000..4c288c1fde
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/domain-warp-dissolve.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Domain Warp Dissolve preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/domain-warp-dissolve/domain-warp-dissolve.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/editorial-flash-overlay.html b/docs/public/catalog/preview/blocks/editorial-flash-overlay.html
new file mode 100644
index 0000000000..5ab25288c3
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/editorial-flash-overlay.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Editorial Flash Overlay preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/editorial-flash-overlay/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/flash-through-white.html b/docs/public/catalog/preview/blocks/flash-through-white.html
new file mode 100644
index 0000000000..e8de2e6aff
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/flash-through-white.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Flash Through White preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/flash-through-white/flash-through-white.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/flowchart-vertical.html b/docs/public/catalog/preview/blocks/flowchart-vertical.html
new file mode 100644
index 0000000000..327468cb48
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/flowchart-vertical.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Flowchart Vertical preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/flowchart-vertical/flowchart-vertical.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/flowchart.html b/docs/public/catalog/preview/blocks/flowchart.html
new file mode 100644
index 0000000000..f85ef7388d
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/flowchart.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Flowchart preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/flowchart/flowchart.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/freeze-frame-dressing.html b/docs/public/catalog/preview/blocks/freeze-frame-dressing.html
new file mode 100644
index 0000000000..70c3433c6a
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/freeze-frame-dressing.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Freeze-Frame Dressing preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/freeze-frame-dressing/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/gallery-tunnel.html b/docs/public/catalog/preview/blocks/gallery-tunnel.html
new file mode 100644
index 0000000000..deb3c85da4
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/gallery-tunnel.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Gallery Tunnel preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../blocks/gallery-tunnel/gallery-tunnel.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/glitch.html b/docs/public/catalog/preview/blocks/glitch.html
new file mode 100644
index 0000000000..e8466a9846
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/glitch.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Glitch preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/glitch/glitch.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/gravitational-lens.html b/docs/public/catalog/preview/blocks/gravitational-lens.html
new file mode 100644
index 0000000000..ee57dd93be
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/gravitational-lens.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Gravitational Lens preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/gravitational-lens/gravitational-lens.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/halftone-field.html b/docs/public/catalog/preview/blocks/halftone-field.html
new file mode 100644
index 0000000000..ee6273ebb7
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/halftone-field.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Halftone Field preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../blocks/halftone-field/__hf-variables-preview.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/hw-frame.html b/docs/public/catalog/preview/blocks/hw-frame.html
new file mode 100644
index 0000000000..f5ea23d923
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/hw-frame.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Sketched Frame preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/hw-frame/hw-frame.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/hw-path-text.html b/docs/public/catalog/preview/blocks/hw-path-text.html
new file mode 100644
index 0000000000..c41090e2f6
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/hw-path-text.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Text Along a Path preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/hw-path-text/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/hw-pipeline.html b/docs/public/catalog/preview/blocks/hw-pipeline.html
new file mode 100644
index 0000000000..7a7442c6f3
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/hw-pipeline.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Hand-Drawn Flowchart preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/hw-pipeline/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/hw-scribble-transition.html b/docs/public/catalog/preview/blocks/hw-scribble-transition.html
new file mode 100644
index 0000000000..828290fce5
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/hw-scribble-transition.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Scribble Transition preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/hw-scribble-transition/hw-scribble-transition.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/hw-text-cloud.html b/docs/public/catalog/preview/blocks/hw-text-cloud.html
new file mode 100644
index 0000000000..336f04fd2d
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/hw-text-cloud.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Speech Bubble preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/hw-text-cloud/hw-text-cloud.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/hw-title.html b/docs/public/catalog/preview/blocks/hw-title.html
new file mode 100644
index 0000000000..0ea91998b4
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/hw-title.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Handwritten Title preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/hw-title/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/instagram-follow.html b/docs/public/catalog/preview/blocks/instagram-follow.html
new file mode 100644
index 0000000000..d74b35c5bd
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/instagram-follow.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Instagram Follow preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/instagram-follow/instagram-follow.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/ios26-liquid-glass.html b/docs/public/catalog/preview/blocks/ios26-liquid-glass.html
new file mode 100644
index 0000000000..b6d0d38274
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/ios26-liquid-glass.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>iOS 26 Liquid Glass Home Screen preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/ios26-liquid-glass/ios26-liquid-glass.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/light-leak.html b/docs/public/catalog/preview/blocks/light-leak.html
new file mode 100644
index 0000000000..a1088e7727
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/light-leak.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Light Leak preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/light-leak/light-leak.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/liquid-glass-context-menu.html b/docs/public/catalog/preview/blocks/liquid-glass-context-menu.html
new file mode 100644
index 0000000000..3c53990b21
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/liquid-glass-context-menu.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Liquid Glass Context Menu preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/liquid-glass-context-menu/liquid-glass-context-menu.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/liquid-glass-media-controls.html b/docs/public/catalog/preview/blocks/liquid-glass-media-controls.html
new file mode 100644
index 0000000000..4132fb2994
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/liquid-glass-media-controls.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Liquid Glass Media Controls preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/liquid-glass-media-controls/liquid-glass-media-controls.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/liquid-glass-notification.html b/docs/public/catalog/preview/blocks/liquid-glass-notification.html
new file mode 100644
index 0000000000..00f36ad48c
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/liquid-glass-notification.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Liquid Glass Notification preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/liquid-glass-notification/liquid-glass-notification.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/liquid-glass-widgets.html b/docs/public/catalog/preview/blocks/liquid-glass-widgets.html
new file mode 100644
index 0000000000..cb8266ae4e
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/liquid-glass-widgets.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Liquid Glass Widgets preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/liquid-glass-widgets/liquid-glass-widgets.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/logo-outro.html b/docs/public/catalog/preview/blocks/logo-outro.html
new file mode 100644
index 0000000000..34208c3862
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/logo-outro.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Logo Outro preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/logo-outro/logo-outro.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/lower-third-bild.html b/docs/public/catalog/preview/blocks/lower-third-bild.html
new file mode 100644
index 0000000000..71b282bd95
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/lower-third-bild.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Lower Third — BILD Style preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../blocks/lower-third-bild/__hf-variables-preview.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/lt-accent-underline.html b/docs/public/catalog/preview/blocks/lt-accent-underline.html
new file mode 100644
index 0000000000..8021465235
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/lt-accent-underline.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Lower Third — Accent Underline preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/lt-accent-underline/lt-accent-underline.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/lt-bold-block.html b/docs/public/catalog/preview/blocks/lt-bold-block.html
new file mode 100644
index 0000000000..a366e0e798
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/lt-bold-block.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Lower Third — Bold Block preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/lt-bold-block/lt-bold-block.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/lt-clean-bar.html b/docs/public/catalog/preview/blocks/lt-clean-bar.html
new file mode 100644
index 0000000000..bd5c9103ca
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/lt-clean-bar.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Lower Third — Clean Bar preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/lt-clean-bar/lt-clean-bar.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/lt-color-block.html b/docs/public/catalog/preview/blocks/lt-color-block.html
new file mode 100644
index 0000000000..5e3aeb9934
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/lt-color-block.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Lower Third — Color Block preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/lt-color-block/lt-color-block.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/lt-dark-card.html b/docs/public/catalog/preview/blocks/lt-dark-card.html
new file mode 100644
index 0000000000..e9bc4368c0
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/lt-dark-card.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Lower Third — Dark Card preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/lt-dark-card/lt-dark-card.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/lt-kicker-name.html b/docs/public/catalog/preview/blocks/lt-kicker-name.html
new file mode 100644
index 0000000000..e669c91879
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/lt-kicker-name.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Lower Third — Kicker Name preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/lt-kicker-name/lt-kicker-name.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/lt-mask-reveal.html b/docs/public/catalog/preview/blocks/lt-mask-reveal.html
new file mode 100644
index 0000000000..10888e504f
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/lt-mask-reveal.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Lower Third — Mask Reveal preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/lt-mask-reveal/lt-mask-reveal.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/lt-neon-border.html b/docs/public/catalog/preview/blocks/lt-neon-border.html
new file mode 100644
index 0000000000..02e5fddee2
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/lt-neon-border.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Neon Border preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../blocks/lt-neon-border/__hf-variables-preview.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/lt-side-rule.html b/docs/public/catalog/preview/blocks/lt-side-rule.html
new file mode 100644
index 0000000000..437e2dc7ab
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/lt-side-rule.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Lower Third — Side Rule preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/lt-side-rule/lt-side-rule.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/lt-soft-pill.html b/docs/public/catalog/preview/blocks/lt-soft-pill.html
new file mode 100644
index 0000000000..1fda4bc053
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/lt-soft-pill.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Lower Third — Soft Pill preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/lt-soft-pill/lt-soft-pill.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/lt-stack-bars.html b/docs/public/catalog/preview/blocks/lt-stack-bars.html
new file mode 100644
index 0000000000..fa369e0649
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/lt-stack-bars.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Lower Third — Stack Bars preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/lt-stack-bars/lt-stack-bars.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/macos-notification.html b/docs/public/catalog/preview/blocks/macos-notification.html
new file mode 100644
index 0000000000..6f88c8625e
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/macos-notification.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>macOS Notification preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/macos-notification/macos-notification.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/macos-tahoe-liquid-glass.html b/docs/public/catalog/preview/blocks/macos-tahoe-liquid-glass.html
new file mode 100644
index 0000000000..caa05cffc3
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/macos-tahoe-liquid-glass.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>macOS Tahoe Liquid Glass Desktop preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/macos-tahoe-liquid-glass/macos-tahoe-liquid-glass.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/mk-background.html b/docs/public/catalog/preview/blocks/mk-background.html
new file mode 100644
index 0000000000..286ce8d902
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/mk-background.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Minimal Gradient Background preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/mk-background/mk-background.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/mk-callout-highlight.html b/docs/public/catalog/preview/blocks/mk-callout-highlight.html
new file mode 100644
index 0000000000..a3fea728ff
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/mk-callout-highlight.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Word-Sweep Highlight preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/mk-callout-highlight/mk-callout-highlight.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/mk-clone-wall-transition.html b/docs/public/catalog/preview/blocks/mk-clone-wall-transition.html
new file mode 100644
index 0000000000..05fcc2b1d9
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/mk-clone-wall-transition.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Text Clone Wall Transition preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/mk-clone-wall-transition/mk-clone-wall-transition.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/mk-line-graph.html b/docs/public/catalog/preview/blocks/mk-line-graph.html
new file mode 100644
index 0000000000..e79757eac2
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/mk-line-graph.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Minimal Line Graph preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/mk-line-graph/mk-line-graph.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/mk-placeholder-grid.html b/docs/public/catalog/preview/blocks/mk-placeholder-grid.html
new file mode 100644
index 0000000000..085a610c13
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/mk-placeholder-grid.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Rounded Media Grid preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/mk-placeholder-grid/mk-placeholder-grid.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/mk-progress-stat.html b/docs/public/catalog/preview/blocks/mk-progress-stat.html
new file mode 100644
index 0000000000..3f881f2f2d
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/mk-progress-stat.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Count-Up Stat Card preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/mk-progress-stat/mk-progress-stat.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/mk-specs-list.html b/docs/public/catalog/preview/blocks/mk-specs-list.html
new file mode 100644
index 0000000000..4497feb7ff
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/mk-specs-list.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Specs Checklist preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/mk-specs-list/mk-specs-list.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/news-ticker.html b/docs/public/catalog/preview/blocks/news-ticker.html
new file mode 100644
index 0000000000..6f9a7686db
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/news-ticker.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>News Ticker preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/news-ticker/news-ticker.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/north-korea-locked-down.html b/docs/public/catalog/preview/blocks/north-korea-locked-down.html
new file mode 100644
index 0000000000..376b89fc68
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/north-korea-locked-down.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>North Korea Locked Down preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/north-korea-locked-down/north-korea-locked-down.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/nyc-paris-flight.html b/docs/public/catalog/preview/blocks/nyc-paris-flight.html
new file mode 100644
index 0000000000..89b4d13c70
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/nyc-paris-flight.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>NYC Paris Flight preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/nyc-paris-flight/nyc-paris-flight.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/organic-light-leak-overlay.html b/docs/public/catalog/preview/blocks/organic-light-leak-overlay.html
new file mode 100644
index 0000000000..2270fdb540
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/organic-light-leak-overlay.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Organic Light Leak Overlay preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/organic-light-leak-overlay/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/oscilloscope-trace.html b/docs/public/catalog/preview/blocks/oscilloscope-trace.html
new file mode 100644
index 0000000000..e93f51d8e0
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/oscilloscope-trace.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Oscilloscope Trace preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../blocks/oscilloscope-trace/__hf-variables-preview.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/rack-focus.html b/docs/public/catalog/preview/blocks/rack-focus.html
new file mode 100644
index 0000000000..40aa6799e2
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/rack-focus.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Rack Focus preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../blocks/rack-focus/__hf-variables-preview.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/reddit-post.html b/docs/public/catalog/preview/blocks/reddit-post.html
new file mode 100644
index 0000000000..e567615756
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/reddit-post.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Reddit Post Card preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/reddit-post/reddit-post.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/ridged-burn.html b/docs/public/catalog/preview/blocks/ridged-burn.html
new file mode 100644
index 0000000000..4fca4f6262
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/ridged-burn.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Ridged Burn preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/ridged-burn/ridged-burn.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/ripple-waves.html b/docs/public/catalog/preview/blocks/ripple-waves.html
new file mode 100644
index 0000000000..06e5687414
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/ripple-waves.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Ripple Waves preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/ripple-waves/ripple-waves.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/sdf-iris.html b/docs/public/catalog/preview/blocks/sdf-iris.html
new file mode 100644
index 0000000000..0c519518cb
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/sdf-iris.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>SDF Iris preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/sdf-iris/sdf-iris.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/spain-map.html b/docs/public/catalog/preview/blocks/spain-map.html
new file mode 100644
index 0000000000..f5b8b77e7e
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/spain-map.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Spain Map preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/spain-map/spain-map.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/spiral-galaxy.html b/docs/public/catalog/preview/blocks/spiral-galaxy.html
new file mode 100644
index 0000000000..f6e2311703
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/spiral-galaxy.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Spiral Galaxy preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../blocks/spiral-galaxy/__hf-variables-preview.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/split-flap-board.html b/docs/public/catalog/preview/blocks/split-flap-board.html
new file mode 100644
index 0000000000..0a35396603
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/split-flap-board.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Split-Flap Board preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../blocks/split-flap-board/__hf-variables-preview.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/spotify-card.html b/docs/public/catalog/preview/blocks/spotify-card.html
new file mode 100644
index 0000000000..1e96db0b44
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/spotify-card.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Spotify Now Playing preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/spotify-card/spotify-card.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/swirl-vortex.html b/docs/public/catalog/preview/blocks/swirl-vortex.html
new file mode 100644
index 0000000000..5417df957e
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/swirl-vortex.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Swirl Vortex preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/swirl-vortex/swirl-vortex.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/thermal-distortion.html b/docs/public/catalog/preview/blocks/thermal-distortion.html
new file mode 100644
index 0000000000..0f5ef5e057
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/thermal-distortion.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Thermal Distortion preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/thermal-distortion/thermal-distortion.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/thread-message-stack.html b/docs/public/catalog/preview/blocks/thread-message-stack.html
new file mode 100644
index 0000000000..0cb4b5ad60
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/thread-message-stack.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Thread Message Stack preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/thread-message-stack/thread-message-stack.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/tiktok-follow.html b/docs/public/catalog/preview/blocks/tiktok-follow.html
new file mode 100644
index 0000000000..93a6b0315e
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/tiktok-follow.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>TikTok Follow preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/tiktok-follow/tiktok-follow.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/transitions-3d.html b/docs/public/catalog/preview/blocks/transitions-3d.html
new file mode 100644
index 0000000000..3bf363a65e
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/transitions-3d.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>3D Transitions preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/transitions-3d/transitions-3d.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/transitions-blur.html b/docs/public/catalog/preview/blocks/transitions-blur.html
new file mode 100644
index 0000000000..09f4018cd7
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/transitions-blur.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Blur Transitions preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/transitions-blur/transitions-blur.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/transitions-cover.html b/docs/public/catalog/preview/blocks/transitions-cover.html
new file mode 100644
index 0000000000..0a2d4a05c5
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/transitions-cover.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Cover Transitions preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/transitions-cover/transitions-cover.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/transitions-destruction.html b/docs/public/catalog/preview/blocks/transitions-destruction.html
new file mode 100644
index 0000000000..119105ebbb
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/transitions-destruction.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Destruction Transitions preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/transitions-destruction/transitions-destruction.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/transitions-dissolve.html b/docs/public/catalog/preview/blocks/transitions-dissolve.html
new file mode 100644
index 0000000000..72d9607453
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/transitions-dissolve.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Dissolve Transitions preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/transitions-dissolve/transitions-dissolve.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/transitions-distortion.html b/docs/public/catalog/preview/blocks/transitions-distortion.html
new file mode 100644
index 0000000000..24b59c322a
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/transitions-distortion.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Distortion Transitions preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/transitions-distortion/transitions-distortion.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/transitions-grid.html b/docs/public/catalog/preview/blocks/transitions-grid.html
new file mode 100644
index 0000000000..3c56b557a7
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/transitions-grid.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Grid Transitions preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/transitions-grid/transitions-grid.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/transitions-light.html b/docs/public/catalog/preview/blocks/transitions-light.html
new file mode 100644
index 0000000000..bab4ad4359
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/transitions-light.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Light Transitions preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/transitions-light/transitions-light.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/transitions-mechanical.html b/docs/public/catalog/preview/blocks/transitions-mechanical.html
new file mode 100644
index 0000000000..62340877e2
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/transitions-mechanical.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Mechanical Transitions preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/transitions-mechanical/transitions-mechanical.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/transitions-other.html b/docs/public/catalog/preview/blocks/transitions-other.html
new file mode 100644
index 0000000000..ce87592106
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/transitions-other.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Other Transitions preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/transitions-other/transitions-other.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/transitions-push.html b/docs/public/catalog/preview/blocks/transitions-push.html
new file mode 100644
index 0000000000..389fc8c5c9
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/transitions-push.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Push Transitions preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/transitions-push/transitions-push.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/transitions-radial.html b/docs/public/catalog/preview/blocks/transitions-radial.html
new file mode 100644
index 0000000000..c2ffa4856d
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/transitions-radial.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Radial Transitions preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/transitions-radial/transitions-radial.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/transitions-scale.html b/docs/public/catalog/preview/blocks/transitions-scale.html
new file mode 100644
index 0000000000..b4de7938a8
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/transitions-scale.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Scale Transitions preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/transitions-scale/transitions-scale.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/ui-3d-reveal.html b/docs/public/catalog/preview/blocks/ui-3d-reveal.html
new file mode 100644
index 0000000000..71f80e7a45
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/ui-3d-reveal.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>3D UI Reveal preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/ui-3d-reveal/ui-3d-reveal.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/us-map-bubble.html b/docs/public/catalog/preview/blocks/us-map-bubble.html
new file mode 100644
index 0000000000..c2a11ece5b
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/us-map-bubble.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>US Bubble Map preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/us-map-bubble/us-map-bubble.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/us-map-flow.html b/docs/public/catalog/preview/blocks/us-map-flow.html
new file mode 100644
index 0000000000..d96969c84d
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/us-map-flow.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>US Flow Map preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/us-map-flow/us-map-flow.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/us-map-hex.html b/docs/public/catalog/preview/blocks/us-map-hex.html
new file mode 100644
index 0000000000..a4f8e33a38
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/us-map-hex.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>US Hex Grid Map preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/us-map-hex/us-map-hex.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/us-map.html b/docs/public/catalog/preview/blocks/us-map.html
new file mode 100644
index 0000000000..8b7aaed36a
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/us-map.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>US Map preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/us-map/us-map.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/vfx-anamorphic-flare.html b/docs/public/catalog/preview/blocks/vfx-anamorphic-flare.html
new file mode 100644
index 0000000000..8a59d59b73
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/vfx-anamorphic-flare.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Anamorphic Streak Flare preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../blocks/vfx-anamorphic-flare/__hf-variables-preview.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/vfx-iphone-device.html b/docs/public/catalog/preview/blocks/vfx-iphone-device.html
new file mode 100644
index 0000000000..02f7b78c5f
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/vfx-iphone-device.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>iPhone & MacBook 3D Showcase preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/vfx-iphone-device/vfx-iphone-device.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/vfx-liquid-background.html b/docs/public/catalog/preview/blocks/vfx-liquid-background.html
new file mode 100644
index 0000000000..2d773b761d
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/vfx-liquid-background.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Liquid Background preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/vfx-liquid-background/vfx-liquid-background.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/vfx-liquid-glass.html b/docs/public/catalog/preview/blocks/vfx-liquid-glass.html
new file mode 100644
index 0000000000..a55bf79518
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/vfx-liquid-glass.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Liquid Glass preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/vfx-liquid-glass/vfx-liquid-glass.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/vfx-magnetic.html b/docs/public/catalog/preview/blocks/vfx-magnetic.html
new file mode 100644
index 0000000000..fb3976985f
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/vfx-magnetic.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Magnetic preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/vfx-magnetic/vfx-magnetic.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/vfx-portal.html b/docs/public/catalog/preview/blocks/vfx-portal.html
new file mode 100644
index 0000000000..d60486e65e
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/vfx-portal.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Portal preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/vfx-portal/vfx-portal.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/vfx-shatter.html b/docs/public/catalog/preview/blocks/vfx-shatter.html
new file mode 100644
index 0000000000..b4f3642619
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/vfx-shatter.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Shatter preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/vfx-shatter/vfx-shatter.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/vfx-text-cursor.html b/docs/public/catalog/preview/blocks/vfx-text-cursor.html
new file mode 100644
index 0000000000..fbe11c01f4
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/vfx-text-cursor.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>VFX Text Cursor preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/vfx-text-cursor/vfx-text-cursor.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/vpn-youtube-spot.html b/docs/public/catalog/preview/blocks/vpn-youtube-spot.html
new file mode 100644
index 0000000000..06efc847f4
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/vpn-youtube-spot.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>VPN YouTube Spot preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/vpn-youtube-spot/vpn-youtube-spot.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/weight-wave.html b/docs/public/catalog/preview/blocks/weight-wave.html
new file mode 100644
index 0000000000..6991000226
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/weight-wave.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Weight Wave preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../blocks/weight-wave/__hf-variables-preview.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/whip-pan.html b/docs/public/catalog/preview/blocks/whip-pan.html
new file mode 100644
index 0000000000..e817bed7a2
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/whip-pan.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Whip Pan preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/whip-pan/whip-pan.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/world-map.html b/docs/public/catalog/preview/blocks/world-map.html
new file mode 100644
index 0000000000..2a427146f0
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/world-map.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>World Map preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/world-map/world-map.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/x-post.html b/docs/public/catalog/preview/blocks/x-post.html
new file mode 100644
index 0000000000..eb001def12
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/x-post.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>X Post Card preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/x-post/x-post.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/yt-comment-card.html b/docs/public/catalog/preview/blocks/yt-comment-card.html
new file mode 100644
index 0000000000..958cf68063
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/yt-comment-card.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Comment Cards preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/yt-comment-card/yt-comment-card.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/yt-lcd-background.html b/docs/public/catalog/preview/blocks/yt-lcd-background.html
new file mode 100644
index 0000000000..96cf79ac89
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/yt-lcd-background.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Scanline Board Background preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/yt-lcd-background/yt-lcd-background.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/yt-logo-intro.html b/docs/public/catalog/preview/blocks/yt-logo-intro.html
new file mode 100644
index 0000000000..d68f28f68a
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/yt-logo-intro.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Logo Intro Sequence preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/yt-logo-intro/yt-logo-intro.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/yt-lower-third.html b/docs/public/catalog/preview/blocks/yt-lower-third.html
new file mode 100644
index 0000000000..d94252d83c
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/yt-lower-third.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>YouTube Lower Third preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/yt-lower-third/yt-lower-third.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/yt-prism-title.html b/docs/public/catalog/preview/blocks/yt-prism-title.html
new file mode 100644
index 0000000000..5a5196a997
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/yt-prism-title.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Chromatic Fringe Title preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/yt-prism-title/yt-prism-title.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/blocks/yt-vertical-fill.html b/docs/public/catalog/preview/blocks/yt-vertical-fill.html
new file mode 100644
index 0000000000..3207c53fcc
--- /dev/null
+++ b/docs/public/catalog/preview/blocks/yt-vertical-fill.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Vertical Media Filler preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../blocks/yt-vertical-fill/yt-vertical-fill.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/ai-generation-canvas.html b/docs/public/catalog/preview/components/ai-generation-canvas.html
new file mode 100644
index 0000000000..95f0ebceda
--- /dev/null
+++ b/docs/public/catalog/preview/components/ai-generation-canvas.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>AI Generation Canvas preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/ai-generation-canvas/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/ai-prompt-flow.html b/docs/public/catalog/preview/components/ai-prompt-flow.html
new file mode 100644
index 0000000000..e5a6e6827c
--- /dev/null
+++ b/docs/public/catalog/preview/components/ai-prompt-flow.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>AI Prompt Flow preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/ai-prompt-flow/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/animated-bar-chart.html b/docs/public/catalog/preview/components/animated-bar-chart.html
new file mode 100644
index 0000000000..b282fcdde2
--- /dev/null
+++ b/docs/public/catalog/preview/components/animated-bar-chart.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Animated Bar Chart preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/animated-bar-chart/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/animated-line-chart.html b/docs/public/catalog/preview/components/animated-line-chart.html
new file mode 100644
index 0000000000..1bb077d953
--- /dev/null
+++ b/docs/public/catalog/preview/components/animated-line-chart.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Animated Line Chart preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/animated-line-chart/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/arc-motion-path.html b/docs/public/catalog/preview/components/arc-motion-path.html
new file mode 100644
index 0000000000..0a5bae262e
--- /dev/null
+++ b/docs/public/catalog/preview/components/arc-motion-path.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Arc Motion Path preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/arc-motion-path/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/ascii-render-pass.html b/docs/public/catalog/preview/components/ascii-render-pass.html
new file mode 100644
index 0000000000..9756c75153
--- /dev/null
+++ b/docs/public/catalog/preview/components/ascii-render-pass.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>ASCII Render Pass preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/ascii-render-pass/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/ascii-trail-reveal.html b/docs/public/catalog/preview/components/ascii-trail-reveal.html
new file mode 100644
index 0000000000..c1ba57c64a
--- /dev/null
+++ b/docs/public/catalog/preview/components/ascii-trail-reveal.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>ASCII Trail Reveal preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/ascii-trail-reveal/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/aurora-drift.html b/docs/public/catalog/preview/components/aurora-drift.html
new file mode 100644
index 0000000000..7b1827f323
--- /dev/null
+++ b/docs/public/catalog/preview/components/aurora-drift.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Aurora Drift preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/aurora-drift/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/avatar-cloud.html b/docs/public/catalog/preview/components/avatar-cloud.html
new file mode 100644
index 0000000000..67922feaa9
--- /dev/null
+++ b/docs/public/catalog/preview/components/avatar-cloud.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Avatar Cloud preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/avatar-cloud/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/avatar-group-hover.html b/docs/public/catalog/preview/components/avatar-group-hover.html
new file mode 100644
index 0000000000..fd8735380b
--- /dev/null
+++ b/docs/public/catalog/preview/components/avatar-group-hover.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Avatar Group Hover preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/avatar-group-hover/__hf-variables-preview.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/badge-pop.html b/docs/public/catalog/preview/components/badge-pop.html
new file mode 100644
index 0000000000..439e20a83f
--- /dev/null
+++ b/docs/public/catalog/preview/components/badge-pop.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Badge Pop preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/badge-pop/__hf-variables-preview.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/beat-accent.html b/docs/public/catalog/preview/components/beat-accent.html
new file mode 100644
index 0000000000..484aaea24e
--- /dev/null
+++ b/docs/public/catalog/preview/components/beat-accent.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Beat Accent preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/beat-accent/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/beat-pulse-background.html b/docs/public/catalog/preview/components/beat-pulse-background.html
new file mode 100644
index 0000000000..770eafe0ac
--- /dev/null
+++ b/docs/public/catalog/preview/components/beat-pulse-background.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Beat Pulse Background preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/beat-pulse-background/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/beat-timeline.html b/docs/public/catalog/preview/components/beat-timeline.html
new file mode 100644
index 0000000000..9c54c49fbf
--- /dev/null
+++ b/docs/public/catalog/preview/components/beat-timeline.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Beat Timeline preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/beat-timeline/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/before-after-wipe.html b/docs/public/catalog/preview/components/before-after-wipe.html
new file mode 100644
index 0000000000..d641a6026b
--- /dev/null
+++ b/docs/public/catalog/preview/components/before-after-wipe.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Before After Wipe preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/before-after-wipe/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/bezier-callout-route.html b/docs/public/catalog/preview/components/bezier-callout-route.html
new file mode 100644
index 0000000000..88b7a34022
--- /dev/null
+++ b/docs/public/catalog/preview/components/bezier-callout-route.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Bezier Callout Route preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/bezier-callout-route/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/blur-in.html b/docs/public/catalog/preview/components/blur-in.html
new file mode 100644
index 0000000000..16d9bef8b3
--- /dev/null
+++ b/docs/public/catalog/preview/components/blur-in.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Blur In preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/blur-in/__hf-variables-preview.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/blur-out-up.html b/docs/public/catalog/preview/components/blur-out-up.html
new file mode 100644
index 0000000000..c66f6a0f77
--- /dev/null
+++ b/docs/public/catalog/preview/components/blur-out-up.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Blur Out Up preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/blur-out-up/__hf-variables-preview.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/bottom-up-letters.html b/docs/public/catalog/preview/components/bottom-up-letters.html
new file mode 100644
index 0000000000..5aae29469b
--- /dev/null
+++ b/docs/public/catalog/preview/components/bottom-up-letters.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Bottom Up Letters preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/bottom-up-letters/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/browser-device-stage.html b/docs/public/catalog/preview/components/browser-device-stage.html
new file mode 100644
index 0000000000..ff827857c6
--- /dev/null
+++ b/docs/public/catalog/preview/components/browser-device-stage.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Browser Device Stage preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/browser-device-stage/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/browser-flow.html b/docs/public/catalog/preview/components/browser-flow.html
new file mode 100644
index 0000000000..34370d4774
--- /dev/null
+++ b/docs/public/catalog/preview/components/browser-flow.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Browser Flow preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/browser-flow/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/camera-rig-depth-stack.html b/docs/public/catalog/preview/components/camera-rig-depth-stack.html
new file mode 100644
index 0000000000..e67b28bb9b
--- /dev/null
+++ b/docs/public/catalog/preview/components/camera-rig-depth-stack.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Camera Rig Depth Stack preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/camera-rig-depth-stack/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/camera-scan-gate.html b/docs/public/catalog/preview/components/camera-scan-gate.html
new file mode 100644
index 0000000000..f470b09f51
--- /dev/null
+++ b/docs/public/catalog/preview/components/camera-scan-gate.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Camera Scan Gate preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/camera-scan-gate/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/camera-shake.html b/docs/public/catalog/preview/components/camera-shake.html
new file mode 100644
index 0000000000..a46b9f1f7c
--- /dev/null
+++ b/docs/public/catalog/preview/components/camera-shake.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Camera Shake preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/camera-shake/__hf-variables-preview.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/caption-blend-difference.html b/docs/public/catalog/preview/components/caption-blend-difference.html
new file mode 100644
index 0000000000..1b02b55883
--- /dev/null
+++ b/docs/public/catalog/preview/components/caption-blend-difference.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Blend Difference preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/caption-blend-difference/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/caption-camera-follow.html b/docs/public/catalog/preview/components/caption-camera-follow.html
new file mode 100644
index 0000000000..17e003f83f
--- /dev/null
+++ b/docs/public/catalog/preview/components/caption-camera-follow.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Camera Follow Captions preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/caption-camera-follow/__hf-variables-preview.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/caption-clip-wipe.html b/docs/public/catalog/preview/components/caption-clip-wipe.html
new file mode 100644
index 0000000000..9ea0a33640
--- /dev/null
+++ b/docs/public/catalog/preview/components/caption-clip-wipe.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Clip Wipe preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/caption-clip-wipe/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/caption-editorial-emphasis.html b/docs/public/catalog/preview/components/caption-editorial-emphasis.html
new file mode 100644
index 0000000000..084d26c0f5
--- /dev/null
+++ b/docs/public/catalog/preview/components/caption-editorial-emphasis.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Editorial Emphasis preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/caption-editorial-emphasis/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/caption-emoji-pop.html b/docs/public/catalog/preview/components/caption-emoji-pop.html
new file mode 100644
index 0000000000..6e8eccf52b
--- /dev/null
+++ b/docs/public/catalog/preview/components/caption-emoji-pop.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Emoji Pop preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/caption-emoji-pop/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/caption-glitch-rgb.html b/docs/public/catalog/preview/components/caption-glitch-rgb.html
new file mode 100644
index 0000000000..8d1b39ce7b
--- /dev/null
+++ b/docs/public/catalog/preview/components/caption-glitch-rgb.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Glitch RGB preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/caption-glitch-rgb/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/caption-gradient-fill.html b/docs/public/catalog/preview/components/caption-gradient-fill.html
new file mode 100644
index 0000000000..dee05583f4
--- /dev/null
+++ b/docs/public/catalog/preview/components/caption-gradient-fill.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Gradient Fill preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/caption-gradient-fill/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/caption-highlight.html b/docs/public/catalog/preview/components/caption-highlight.html
new file mode 100644
index 0000000000..6a798ab992
--- /dev/null
+++ b/docs/public/catalog/preview/components/caption-highlight.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Highlight preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/caption-highlight/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/caption-kinetic-slam.html b/docs/public/catalog/preview/components/caption-kinetic-slam.html
new file mode 100644
index 0000000000..86a5ba27b8
--- /dev/null
+++ b/docs/public/catalog/preview/components/caption-kinetic-slam.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Kinetic Slam preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/caption-kinetic-slam/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/caption-matrix-decode.html b/docs/public/catalog/preview/components/caption-matrix-decode.html
new file mode 100644
index 0000000000..0e9bc693fa
--- /dev/null
+++ b/docs/public/catalog/preview/components/caption-matrix-decode.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Matrix Decode preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/caption-matrix-decode/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/caption-neon-accent.html b/docs/public/catalog/preview/components/caption-neon-accent.html
new file mode 100644
index 0000000000..52a7af248a
--- /dev/null
+++ b/docs/public/catalog/preview/components/caption-neon-accent.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Neon Accent preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/caption-neon-accent/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/caption-neon-glow.html b/docs/public/catalog/preview/components/caption-neon-glow.html
new file mode 100644
index 0000000000..5a856a12da
--- /dev/null
+++ b/docs/public/catalog/preview/components/caption-neon-glow.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Neon Glow preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/caption-neon-glow/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/caption-parallax-layers.html b/docs/public/catalog/preview/components/caption-parallax-layers.html
new file mode 100644
index 0000000000..90a1e79baa
--- /dev/null
+++ b/docs/public/catalog/preview/components/caption-parallax-layers.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Parallax Layers preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/caption-parallax-layers/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/caption-particle-burst.html b/docs/public/catalog/preview/components/caption-particle-burst.html
new file mode 100644
index 0000000000..43b951c660
--- /dev/null
+++ b/docs/public/catalog/preview/components/caption-particle-burst.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Particle Burst preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/caption-particle-burst/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/caption-pill-karaoke.html b/docs/public/catalog/preview/components/caption-pill-karaoke.html
new file mode 100644
index 0000000000..6b80a1b795
--- /dev/null
+++ b/docs/public/catalog/preview/components/caption-pill-karaoke.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Pill Karaoke preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/caption-pill-karaoke/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/caption-texture.html b/docs/public/catalog/preview/components/caption-texture.html
new file mode 100644
index 0000000000..cd3065bce8
--- /dev/null
+++ b/docs/public/catalog/preview/components/caption-texture.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Texture preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/caption-texture/__hf-variables-preview.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/caption-weight-shift.html b/docs/public/catalog/preview/components/caption-weight-shift.html
new file mode 100644
index 0000000000..2806a405c8
--- /dev/null
+++ b/docs/public/catalog/preview/components/caption-weight-shift.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Weight Shift preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/caption-weight-shift/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/card-resize.html b/docs/public/catalog/preview/components/card-resize.html
new file mode 100644
index 0000000000..baa766376b
--- /dev/null
+++ b/docs/public/catalog/preview/components/card-resize.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Card Resize preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/card-resize/__hf-variables-preview.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/char-slam-explode.html b/docs/public/catalog/preview/components/char-slam-explode.html
new file mode 100644
index 0000000000..51eb569814
--- /dev/null
+++ b/docs/public/catalog/preview/components/char-slam-explode.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Char Slam Explode preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/char-slam-explode/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/chart-story.html b/docs/public/catalog/preview/components/chart-story.html
new file mode 100644
index 0000000000..b2aea73701
--- /dev/null
+++ b/docs/public/catalog/preview/components/chart-story.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Chart Story preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/chart-story/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/chat-to-preview-layout.html b/docs/public/catalog/preview/components/chat-to-preview-layout.html
new file mode 100644
index 0000000000..03c04972e9
--- /dev/null
+++ b/docs/public/catalog/preview/components/chat-to-preview-layout.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Chat to Preview Layout preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/chat-to-preview-layout/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/checkout-flow.html b/docs/public/catalog/preview/components/checkout-flow.html
new file mode 100644
index 0000000000..871f051f29
--- /dev/null
+++ b/docs/public/catalog/preview/components/checkout-flow.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Checkout Flow preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/checkout-flow/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/chromatic-aberration-wipe.html b/docs/public/catalog/preview/components/chromatic-aberration-wipe.html
new file mode 100644
index 0000000000..25dc0f41cb
--- /dev/null
+++ b/docs/public/catalog/preview/components/chromatic-aberration-wipe.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Chromatic Aberration Wipe preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/chromatic-aberration-wipe/__hf-variables-preview.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/code-accordion.html b/docs/public/catalog/preview/components/code-accordion.html
new file mode 100644
index 0000000000..77ccc0820f
--- /dev/null
+++ b/docs/public/catalog/preview/components/code-accordion.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Code Accordion preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/code-accordion/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/code-diff-wipe.html b/docs/public/catalog/preview/components/code-diff-wipe.html
new file mode 100644
index 0000000000..65de078486
--- /dev/null
+++ b/docs/public/catalog/preview/components/code-diff-wipe.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Code Diff Wipe preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/code-diff-wipe/__hf-variables-preview.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/code-terminal-run.html b/docs/public/catalog/preview/components/code-terminal-run.html
new file mode 100644
index 0000000000..55f207aebe
--- /dev/null
+++ b/docs/public/catalog/preview/components/code-terminal-run.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Code Terminal Run preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/code-terminal-run/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/comparison-split.html b/docs/public/catalog/preview/components/comparison-split.html
new file mode 100644
index 0000000000..4e7a9e9a84
--- /dev/null
+++ b/docs/public/catalog/preview/components/comparison-split.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Comparison Split preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/comparison-split/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/confetti.html b/docs/public/catalog/preview/components/confetti.html
new file mode 100644
index 0000000000..64f1959d51
--- /dev/null
+++ b/docs/public/catalog/preview/components/confetti.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Confetti preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/confetti/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/conic-progress-ring.html b/docs/public/catalog/preview/components/conic-progress-ring.html
new file mode 100644
index 0000000000..ee77f6144a
--- /dev/null
+++ b/docs/public/catalog/preview/components/conic-progress-ring.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Conic Progress Ring preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/conic-progress-ring/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/constellation-hub.html b/docs/public/catalog/preview/components/constellation-hub.html
new file mode 100644
index 0000000000..1c0b75b8ba
--- /dev/null
+++ b/docs/public/catalog/preview/components/constellation-hub.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Constellation Hub preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/constellation-hub/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/count-up.html b/docs/public/catalog/preview/components/count-up.html
new file mode 100644
index 0000000000..9157cc1f3b
--- /dev/null
+++ b/docs/public/catalog/preview/components/count-up.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Count Up preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/count-up/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/cta-close.html b/docs/public/catalog/preview/components/cta-close.html
new file mode 100644
index 0000000000..523a7fb5d1
--- /dev/null
+++ b/docs/public/catalog/preview/components/cta-close.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>CTA Close preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/cta-close/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/cta-lockup.html b/docs/public/catalog/preview/components/cta-lockup.html
new file mode 100644
index 0000000000..4ae8f43261
--- /dev/null
+++ b/docs/public/catalog/preview/components/cta-lockup.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>CTA Lockup preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/cta-lockup/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/cursor-glyph-trail.html b/docs/public/catalog/preview/components/cursor-glyph-trail.html
new file mode 100644
index 0000000000..c6eff328f8
--- /dev/null
+++ b/docs/public/catalog/preview/components/cursor-glyph-trail.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Cursor Glyph Trail preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/cursor-glyph-trail/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/cut-the-curve.html b/docs/public/catalog/preview/components/cut-the-curve.html
new file mode 100644
index 0000000000..1ba0a5b82f
--- /dev/null
+++ b/docs/public/catalog/preview/components/cut-the-curve.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Cut the Curve preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/cut-the-curve/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/dashboard-populate.html b/docs/public/catalog/preview/components/dashboard-populate.html
new file mode 100644
index 0000000000..31a1348aed
--- /dev/null
+++ b/docs/public/catalog/preview/components/dashboard-populate.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Dashboard Populate preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/dashboard-populate/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/data-flow-pipes.html b/docs/public/catalog/preview/components/data-flow-pipes.html
new file mode 100644
index 0000000000..55b99372aa
--- /dev/null
+++ b/docs/public/catalog/preview/components/data-flow-pipes.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Data Flow Pipes preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/data-flow-pipes/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/decline-chart.html b/docs/public/catalog/preview/components/decline-chart.html
new file mode 100644
index 0000000000..23a330d2b4
--- /dev/null
+++ b/docs/public/catalog/preview/components/decline-chart.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Decline Chart preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/decline-chart/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/device-frame-stage.html b/docs/public/catalog/preview/components/device-frame-stage.html
new file mode 100644
index 0000000000..329153e185
--- /dev/null
+++ b/docs/public/catalog/preview/components/device-frame-stage.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Device Frame Stage preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/device-frame-stage/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/device-mockup-zoom.html b/docs/public/catalog/preview/components/device-mockup-zoom.html
new file mode 100644
index 0000000000..a3b12a7335
--- /dev/null
+++ b/docs/public/catalog/preview/components/device-mockup-zoom.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Device Mockup Zoom preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/device-mockup-zoom/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/directional-wipe.html b/docs/public/catalog/preview/components/directional-wipe.html
new file mode 100644
index 0000000000..4654570775
--- /dev/null
+++ b/docs/public/catalog/preview/components/directional-wipe.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Directional Wipe preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/directional-wipe/__hf-variables-preview.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/drag-and-drop-flow.html b/docs/public/catalog/preview/components/drag-and-drop-flow.html
new file mode 100644
index 0000000000..80682ccaa5
--- /dev/null
+++ b/docs/public/catalog/preview/components/drag-and-drop-flow.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Drag and Drop Flow preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/drag-and-drop-flow/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/drift-hold.html b/docs/public/catalog/preview/components/drift-hold.html
new file mode 100644
index 0000000000..61024a6f14
--- /dev/null
+++ b/docs/public/catalog/preview/components/drift-hold.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Drift Hold preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/drift-hold/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/dynamic-grid.html b/docs/public/catalog/preview/components/dynamic-grid.html
new file mode 100644
index 0000000000..8c4a73c8c6
--- /dev/null
+++ b/docs/public/catalog/preview/components/dynamic-grid.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Dynamic Grid preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/dynamic-grid/__hf-variables-preview.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/echo-trail.html b/docs/public/catalog/preview/components/echo-trail.html
new file mode 100644
index 0000000000..d16ce0bd92
--- /dev/null
+++ b/docs/public/catalog/preview/components/echo-trail.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Echo Trail preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/echo-trail/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/ecosystem-constellation.html b/docs/public/catalog/preview/components/ecosystem-constellation.html
new file mode 100644
index 0000000000..e0ec6e9101
--- /dev/null
+++ b/docs/public/catalog/preview/components/ecosystem-constellation.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Ecosystem Constellation preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/ecosystem-constellation/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/facet-morph.html b/docs/public/catalog/preview/components/facet-morph.html
new file mode 100644
index 0000000000..a8d974c262
--- /dev/null
+++ b/docs/public/catalog/preview/components/facet-morph.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Facet Morph preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/facet-morph/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/fade-through.html b/docs/public/catalog/preview/components/fade-through.html
new file mode 100644
index 0000000000..68b4eed4b3
--- /dev/null
+++ b/docs/public/catalog/preview/components/fade-through.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Fade Through preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/fade-through/__hf-variables-preview.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/focus-blur-resolve.html b/docs/public/catalog/preview/components/focus-blur-resolve.html
new file mode 100644
index 0000000000..3927582457
--- /dev/null
+++ b/docs/public/catalog/preview/components/focus-blur-resolve.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Focus Blur Resolve preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/focus-blur-resolve/__hf-variables-preview.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/focus-rack.html b/docs/public/catalog/preview/components/focus-rack.html
new file mode 100644
index 0000000000..8c934a5e88
--- /dev/null
+++ b/docs/public/catalog/preview/components/focus-rack.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Focus Rack preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/focus-rack/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/focus-swap.html b/docs/public/catalog/preview/components/focus-swap.html
new file mode 100644
index 0000000000..9944b2e674
--- /dev/null
+++ b/docs/public/catalog/preview/components/focus-swap.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Focus Swap preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/focus-swap/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/frosted-glass-wipe.html b/docs/public/catalog/preview/components/frosted-glass-wipe.html
new file mode 100644
index 0000000000..11bab2170d
--- /dev/null
+++ b/docs/public/catalog/preview/components/frosted-glass-wipe.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Frosted Glass Wipe preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/frosted-glass-wipe/__hf-variables-preview.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/gesture-tap.html b/docs/public/catalog/preview/components/gesture-tap.html
new file mode 100644
index 0000000000..9f85016c9b
--- /dev/null
+++ b/docs/public/catalog/preview/components/gesture-tap.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Gesture Tap preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/gesture-tap/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/glass-code-block.html b/docs/public/catalog/preview/components/glass-code-block.html
new file mode 100644
index 0000000000..67f64dfb48
--- /dev/null
+++ b/docs/public/catalog/preview/components/glass-code-block.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Glass Code Block preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/glass-code-block/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/gloss-sweep.html b/docs/public/catalog/preview/components/gloss-sweep.html
new file mode 100644
index 0000000000..e7eb3ef025
--- /dev/null
+++ b/docs/public/catalog/preview/components/gloss-sweep.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Gloss Sweep preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/gloss-sweep/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/grade-split-reveal.html b/docs/public/catalog/preview/components/grade-split-reveal.html
new file mode 100644
index 0000000000..4e1c565ef1
--- /dev/null
+++ b/docs/public/catalog/preview/components/grade-split-reveal.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Grade Split Reveal preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/grade-split-reveal/__hf-variables-preview.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/grain-field.html b/docs/public/catalog/preview/components/grain-field.html
new file mode 100644
index 0000000000..0bad5fe957
--- /dev/null
+++ b/docs/public/catalog/preview/components/grain-field.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Grain Field preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/grain-field/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/grain-overlay.html b/docs/public/catalog/preview/components/grain-overlay.html
new file mode 100644
index 0000000000..eb01445ef4
--- /dev/null
+++ b/docs/public/catalog/preview/components/grain-overlay.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Grain Overlay preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/grain-overlay/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/grid-card-assemble.html b/docs/public/catalog/preview/components/grid-card-assemble.html
new file mode 100644
index 0000000000..56c5adcf2e
--- /dev/null
+++ b/docs/public/catalog/preview/components/grid-card-assemble.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Grid Card Assemble preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/grid-card-assemble/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/grid-pixelate-wipe.html b/docs/public/catalog/preview/components/grid-pixelate-wipe.html
new file mode 100644
index 0000000000..d2cbfe1506
--- /dev/null
+++ b/docs/public/catalog/preview/components/grid-pixelate-wipe.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Grid Pixelate Wipe preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/grid-pixelate-wipe/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/halftone-dissolve.html b/docs/public/catalog/preview/components/halftone-dissolve.html
new file mode 100644
index 0000000000..58b259ef47
--- /dev/null
+++ b/docs/public/catalog/preview/components/halftone-dissolve.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Halftone Dissolve preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/halftone-dissolve/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/headline-slam.html b/docs/public/catalog/preview/components/headline-slam.html
new file mode 100644
index 0000000000..d6e7232d4f
--- /dev/null
+++ b/docs/public/catalog/preview/components/headline-slam.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Headline Slam preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/headline-slam/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/hero-device-assemble.html b/docs/public/catalog/preview/components/hero-device-assemble.html
new file mode 100644
index 0000000000..2edc44b1e4
--- /dev/null
+++ b/docs/public/catalog/preview/components/hero-device-assemble.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Hero Device Assemble preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/hero-device-assemble/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/hw-arrow.html b/docs/public/catalog/preview/components/hw-arrow.html
new file mode 100644
index 0000000000..9ca6a4bbf0
--- /dev/null
+++ b/docs/public/catalog/preview/components/hw-arrow.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Hand-Drawn Arrow preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/hw-arrow/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/hw-boil.html b/docs/public/catalog/preview/components/hw-boil.html
new file mode 100644
index 0000000000..e426a912cb
--- /dev/null
+++ b/docs/public/catalog/preview/components/hw-boil.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Hand-Drawn Boil preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/hw-boil/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/hw-box-label.html b/docs/public/catalog/preview/components/hw-box-label.html
new file mode 100644
index 0000000000..5782afa690
--- /dev/null
+++ b/docs/public/catalog/preview/components/hw-box-label.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Hand-Drawn Box Label preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/hw-box-label/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/hw-callout-circle.html b/docs/public/catalog/preview/components/hw-callout-circle.html
new file mode 100644
index 0000000000..9117bda75d
--- /dev/null
+++ b/docs/public/catalog/preview/components/hw-callout-circle.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Scribble Callout Circle preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/hw-callout-circle/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/hw-underline.html b/docs/public/catalog/preview/components/hw-underline.html
new file mode 100644
index 0000000000..030a855666
--- /dev/null
+++ b/docs/public/catalog/preview/components/hw-underline.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Squiggle Marks preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/hw-underline/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/icon-morph-beat.html b/docs/public/catalog/preview/components/icon-morph-beat.html
new file mode 100644
index 0000000000..ed11268959
--- /dev/null
+++ b/docs/public/catalog/preview/components/icon-morph-beat.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Icon Morph Beat preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/icon-morph-beat/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/icon-swap.html b/docs/public/catalog/preview/components/icon-swap.html
new file mode 100644
index 0000000000..c4f0fef972
--- /dev/null
+++ b/docs/public/catalog/preview/components/icon-swap.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Icon Swap preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/icon-swap/__hf-variables-preview.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/image-expand-to-fullscreen.html b/docs/public/catalog/preview/components/image-expand-to-fullscreen.html
new file mode 100644
index 0000000000..334a2d693d
--- /dev/null
+++ b/docs/public/catalog/preview/components/image-expand-to-fullscreen.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Image Expand to Fullscreen preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/image-expand-to-fullscreen/__hf-variables-preview.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/infinite-bento-pan.html b/docs/public/catalog/preview/components/infinite-bento-pan.html
new file mode 100644
index 0000000000..e2bef7b15f
--- /dev/null
+++ b/docs/public/catalog/preview/components/infinite-bento-pan.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Infinite Bento Pan preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/infinite-bento-pan/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/infinite-marquee.html b/docs/public/catalog/preview/components/infinite-marquee.html
new file mode 100644
index 0000000000..fa7b5b7b4c
--- /dev/null
+++ b/docs/public/catalog/preview/components/infinite-marquee.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Infinite Marquee preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/infinite-marquee/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/ink-bleed-reveal.html b/docs/public/catalog/preview/components/ink-bleed-reveal.html
new file mode 100644
index 0000000000..b7f185385b
--- /dev/null
+++ b/docs/public/catalog/preview/components/ink-bleed-reveal.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Ink Bleed Reveal preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/ink-bleed-reveal/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/inline-highlight.html b/docs/public/catalog/preview/components/inline-highlight.html
new file mode 100644
index 0000000000..07c92e2f64
--- /dev/null
+++ b/docs/public/catalog/preview/components/inline-highlight.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Inline Highlight preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/inline-highlight/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/input-feedback.html b/docs/public/catalog/preview/components/input-feedback.html
new file mode 100644
index 0000000000..f0b90a8639
--- /dev/null
+++ b/docs/public/catalog/preview/components/input-feedback.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Input Feedback preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/input-feedback/__hf-variables-preview.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/iris-reveal.html b/docs/public/catalog/preview/components/iris-reveal.html
new file mode 100644
index 0000000000..54c1d7d27c
--- /dev/null
+++ b/docs/public/catalog/preview/components/iris-reveal.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Iris Reveal preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/iris-reveal/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/keyframe-scrub-stack.html b/docs/public/catalog/preview/components/keyframe-scrub-stack.html
new file mode 100644
index 0000000000..586f2e3b4f
--- /dev/null
+++ b/docs/public/catalog/preview/components/keyframe-scrub-stack.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Keyframe Scrub Stack preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/keyframe-scrub-stack/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/kinetic-center-build.html b/docs/public/catalog/preview/components/kinetic-center-build.html
new file mode 100644
index 0000000000..50934091d9
--- /dev/null
+++ b/docs/public/catalog/preview/components/kinetic-center-build.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Kinetic Center Build preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/kinetic-center-build/__hf-variables-preview.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/kinetic-type-swap.html b/docs/public/catalog/preview/components/kinetic-type-swap.html
new file mode 100644
index 0000000000..c6f1a46a7f
--- /dev/null
+++ b/docs/public/catalog/preview/components/kinetic-type-swap.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Kinetic Type Swap preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/kinetic-type-swap/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/landing-code-showcase.html b/docs/public/catalog/preview/components/landing-code-showcase.html
new file mode 100644
index 0000000000..8e800bfe12
--- /dev/null
+++ b/docs/public/catalog/preview/components/landing-code-showcase.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Landing Code Showcase preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/landing-code-showcase/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/light-sweep-pass.html b/docs/public/catalog/preview/components/light-sweep-pass.html
new file mode 100644
index 0000000000..38e4996edb
--- /dev/null
+++ b/docs/public/catalog/preview/components/light-sweep-pass.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Light Sweep Pass preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/light-sweep-pass/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/line-by-line-slide.html b/docs/public/catalog/preview/components/line-by-line-slide.html
new file mode 100644
index 0000000000..9aa871d5d7
--- /dev/null
+++ b/docs/public/catalog/preview/components/line-by-line-slide.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Line-by-Line Slide preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/line-by-line-slide/__hf-variables-preview.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/line-swap.html b/docs/public/catalog/preview/components/line-swap.html
new file mode 100644
index 0000000000..0ded51b5cf
--- /dev/null
+++ b/docs/public/catalog/preview/components/line-swap.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Line Swap preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/line-swap/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/live-code-compilation.html b/docs/public/catalog/preview/components/live-code-compilation.html
new file mode 100644
index 0000000000..dc0ac07501
--- /dev/null
+++ b/docs/public/catalog/preview/components/live-code-compilation.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Live Code Compilation preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/live-code-compilation/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/locked-nucleus-orbit.html b/docs/public/catalog/preview/components/locked-nucleus-orbit.html
new file mode 100644
index 0000000000..8d50aaf58a
--- /dev/null
+++ b/docs/public/catalog/preview/components/locked-nucleus-orbit.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Locked Nucleus Orbit preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/locked-nucleus-orbit/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/logo-brand-close.html b/docs/public/catalog/preview/components/logo-brand-close.html
new file mode 100644
index 0000000000..f6577a57a0
--- /dev/null
+++ b/docs/public/catalog/preview/components/logo-brand-close.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Logo Brand Close preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/logo-brand-close/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/logo-sting.html b/docs/public/catalog/preview/components/logo-sting.html
new file mode 100644
index 0000000000..dc0b231984
--- /dev/null
+++ b/docs/public/catalog/preview/components/logo-sting.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Logo Sting preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/logo-sting/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/logo-wall.html b/docs/public/catalog/preview/components/logo-wall.html
new file mode 100644
index 0000000000..d32f68ead0
--- /dev/null
+++ b/docs/public/catalog/preview/components/logo-wall.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Logo Wall preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/logo-wall/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/marker-highlight.html b/docs/public/catalog/preview/components/marker-highlight.html
new file mode 100644
index 0000000000..af114f2aa1
--- /dev/null
+++ b/docs/public/catalog/preview/components/marker-highlight.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Marker Highlight preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/marker-highlight/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/mask-reveal-up.html b/docs/public/catalog/preview/components/mask-reveal-up.html
new file mode 100644
index 0000000000..0aeb6fa3eb
--- /dev/null
+++ b/docs/public/catalog/preview/components/mask-reveal-up.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Mask Reveal Up preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/mask-reveal-up/__hf-variables-preview.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/masked-slide-reveal.html b/docs/public/catalog/preview/components/masked-slide-reveal.html
new file mode 100644
index 0000000000..661c6194b8
--- /dev/null
+++ b/docs/public/catalog/preview/components/masked-slide-reveal.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Masked Slide Reveal preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/masked-slide-reveal/__hf-variables-preview.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/match-cut.html b/docs/public/catalog/preview/components/match-cut.html
new file mode 100644
index 0000000000..2ef3216f98
--- /dev/null
+++ b/docs/public/catalog/preview/components/match-cut.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Match Cut preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/match-cut/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/matrix-decode.html b/docs/public/catalog/preview/components/matrix-decode.html
new file mode 100644
index 0000000000..3d95c0ae6b
--- /dev/null
+++ b/docs/public/catalog/preview/components/matrix-decode.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Matrix Decode preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/matrix-decode/__hf-variables-preview.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/menu-morph.html b/docs/public/catalog/preview/components/menu-morph.html
new file mode 100644
index 0000000000..5d00a04235
--- /dev/null
+++ b/docs/public/catalog/preview/components/menu-morph.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Menu Morph preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/menu-morph/__hf-variables-preview.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/mesh-gradient-bg.html b/docs/public/catalog/preview/components/mesh-gradient-bg.html
new file mode 100644
index 0000000000..d01f94be95
--- /dev/null
+++ b/docs/public/catalog/preview/components/mesh-gradient-bg.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Mesh Gradient Background preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/mesh-gradient-bg/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/micro-scale-fade.html b/docs/public/catalog/preview/components/micro-scale-fade.html
new file mode 100644
index 0000000000..d0f1ec9862
--- /dev/null
+++ b/docs/public/catalog/preview/components/micro-scale-fade.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Micro Scale Fade preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/micro-scale-fade/__hf-variables-preview.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/micro-transitions.html b/docs/public/catalog/preview/components/micro-transitions.html
new file mode 100644
index 0000000000..d40b0c2a2a
--- /dev/null
+++ b/docs/public/catalog/preview/components/micro-transitions.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Micro Transitions preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/micro-transitions/__hf-variables-preview.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/mk-emphasis-type.html b/docs/public/catalog/preview/components/mk-emphasis-type.html
new file mode 100644
index 0000000000..a77781e2bf
--- /dev/null
+++ b/docs/public/catalog/preview/components/mk-emphasis-type.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Background Emphasis Type preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/mk-emphasis-type/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/mk-usage-arc.html b/docs/public/catalog/preview/components/mk-usage-arc.html
new file mode 100644
index 0000000000..9d65133f07
--- /dev/null
+++ b/docs/public/catalog/preview/components/mk-usage-arc.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Hairline Arc Gauge preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/mk-usage-arc/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/modal-morph.html b/docs/public/catalog/preview/components/modal-morph.html
new file mode 100644
index 0000000000..9ad8b68c00
--- /dev/null
+++ b/docs/public/catalog/preview/components/modal-morph.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Modal Morph preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/modal-morph/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/morph-swap.html b/docs/public/catalog/preview/components/morph-swap.html
new file mode 100644
index 0000000000..a7bf7e77c0
--- /dev/null
+++ b/docs/public/catalog/preview/components/morph-swap.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Morph Swap preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/morph-swap/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/morph-text.html b/docs/public/catalog/preview/components/morph-text.html
new file mode 100644
index 0000000000..704d764985
--- /dev/null
+++ b/docs/public/catalog/preview/components/morph-text.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Morph Text preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/morph-text/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/motion-blur.html b/docs/public/catalog/preview/components/motion-blur.html
new file mode 100644
index 0000000000..1b95ce09e8
--- /dev/null
+++ b/docs/public/catalog/preview/components/motion-blur.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Motion Blur preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/motion-blur/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/multi-device-splay.html b/docs/public/catalog/preview/components/multi-device-splay.html
new file mode 100644
index 0000000000..3d2bb425e2
--- /dev/null
+++ b/docs/public/catalog/preview/components/multi-device-splay.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Multi Device Splay preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/multi-device-splay/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/multiplayer-cursors.html b/docs/public/catalog/preview/components/multiplayer-cursors.html
new file mode 100644
index 0000000000..e1dcd72216
--- /dev/null
+++ b/docs/public/catalog/preview/components/multiplayer-cursors.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Multiplayer Cursors preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/multiplayer-cursors/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/native-notification-pop.html b/docs/public/catalog/preview/components/native-notification-pop.html
new file mode 100644
index 0000000000..6ac4e2ac99
--- /dev/null
+++ b/docs/public/catalog/preview/components/native-notification-pop.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Native Notification Pop preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/native-notification-pop/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/notification-pileup.html b/docs/public/catalog/preview/components/notification-pileup.html
new file mode 100644
index 0000000000..b8cc20a3e4
--- /dev/null
+++ b/docs/public/catalog/preview/components/notification-pileup.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Notification Pileup preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/notification-pileup/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/notification-stack.html b/docs/public/catalog/preview/components/notification-stack.html
new file mode 100644
index 0000000000..09601868ce
--- /dev/null
+++ b/docs/public/catalog/preview/components/notification-stack.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Notification Stack preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/notification-stack/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/number-pop-in.html b/docs/public/catalog/preview/components/number-pop-in.html
new file mode 100644
index 0000000000..149c4a99ea
--- /dev/null
+++ b/docs/public/catalog/preview/components/number-pop-in.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Number Pop In preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/number-pop-in/__hf-variables-preview.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/number-wheel.html b/docs/public/catalog/preview/components/number-wheel.html
new file mode 100644
index 0000000000..1c3fe0f193
--- /dev/null
+++ b/docs/public/catalog/preview/components/number-wheel.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Number Wheel preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/number-wheel/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/offset-path-traveler.html b/docs/public/catalog/preview/components/offset-path-traveler.html
new file mode 100644
index 0000000000..5bf1bc8b2b
--- /dev/null
+++ b/docs/public/catalog/preview/components/offset-path-traveler.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Offset Path Traveler preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/offset-path-traveler/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/onboarding-stepper-flow.html b/docs/public/catalog/preview/components/onboarding-stepper-flow.html
new file mode 100644
index 0000000000..09af45b8d9
--- /dev/null
+++ b/docs/public/catalog/preview/components/onboarding-stepper-flow.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Onboarding Stepper Flow preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/onboarding-stepper-flow/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/orbital-feature-path.html b/docs/public/catalog/preview/components/orbital-feature-path.html
new file mode 100644
index 0000000000..51e8eaab5b
--- /dev/null
+++ b/docs/public/catalog/preview/components/orbital-feature-path.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Orbital Feature Path preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/orbital-feature-path/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/ordered-dither-pass.html b/docs/public/catalog/preview/components/ordered-dither-pass.html
new file mode 100644
index 0000000000..c1eb165af8
--- /dev/null
+++ b/docs/public/catalog/preview/components/ordered-dither-pass.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Ordered Dither Pass preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/ordered-dither-pass/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/outline-draw.html b/docs/public/catalog/preview/components/outline-draw.html
new file mode 100644
index 0000000000..b9c7ed9223
--- /dev/null
+++ b/docs/public/catalog/preview/components/outline-draw.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Outline Draw preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/outline-draw/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/oversized-cursor.html b/docs/public/catalog/preview/components/oversized-cursor.html
new file mode 100644
index 0000000000..b5ca3da710
--- /dev/null
+++ b/docs/public/catalog/preview/components/oversized-cursor.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Oversized Cursor preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/oversized-cursor/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/overwhelm-surround.html b/docs/public/catalog/preview/components/overwhelm-surround.html
new file mode 100644
index 0000000000..3f7427b459
--- /dev/null
+++ b/docs/public/catalog/preview/components/overwhelm-surround.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Overwhelm Surround preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/overwhelm-surround/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/page-slide.html b/docs/public/catalog/preview/components/page-slide.html
new file mode 100644
index 0000000000..e6948df4b8
--- /dev/null
+++ b/docs/public/catalog/preview/components/page-slide.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Page Slide preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/page-slide/__hf-variables-preview.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/pan-stations.html b/docs/public/catalog/preview/components/pan-stations.html
new file mode 100644
index 0000000000..af6911e928
--- /dev/null
+++ b/docs/public/catalog/preview/components/pan-stations.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Pan Stations preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/pan-stations/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/panel-reveal.html b/docs/public/catalog/preview/components/panel-reveal.html
new file mode 100644
index 0000000000..79ac86709b
--- /dev/null
+++ b/docs/public/catalog/preview/components/panel-reveal.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Panel Reveal preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/panel-reveal/__hf-variables-preview.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/parallax-device-dive.html b/docs/public/catalog/preview/components/parallax-device-dive.html
new file mode 100644
index 0000000000..dc6dd5bc12
--- /dev/null
+++ b/docs/public/catalog/preview/components/parallax-device-dive.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Parallax Device Dive preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/parallax-device-dive/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/parallax-unzoom.html b/docs/public/catalog/preview/components/parallax-unzoom.html
new file mode 100644
index 0000000000..036483469c
--- /dev/null
+++ b/docs/public/catalog/preview/components/parallax-unzoom.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Parallax Unzoom preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/parallax-unzoom/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/parallax-zoom.html b/docs/public/catalog/preview/components/parallax-zoom.html
new file mode 100644
index 0000000000..dbe5498637
--- /dev/null
+++ b/docs/public/catalog/preview/components/parallax-zoom.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Parallax Zoom preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/parallax-zoom/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/particle-image-reveal.html b/docs/public/catalog/preview/components/particle-image-reveal.html
new file mode 100644
index 0000000000..5fd1c2927a
--- /dev/null
+++ b/docs/public/catalog/preview/components/particle-image-reveal.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Particle Image Reveal preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/particle-image-reveal/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/particle-text-dissolve.html b/docs/public/catalog/preview/components/particle-text-dissolve.html
new file mode 100644
index 0000000000..b3a1673496
--- /dev/null
+++ b/docs/public/catalog/preview/components/particle-text-dissolve.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Particle Text Dissolve preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/particle-text-dissolve/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/per-character-rise.html b/docs/public/catalog/preview/components/per-character-rise.html
new file mode 100644
index 0000000000..da69c0ab39
--- /dev/null
+++ b/docs/public/catalog/preview/components/per-character-rise.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Per Character Rise preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/per-character-rise/__hf-variables-preview.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/per-word-crossfade.html b/docs/public/catalog/preview/components/per-word-crossfade.html
new file mode 100644
index 0000000000..730de5dded
--- /dev/null
+++ b/docs/public/catalog/preview/components/per-word-crossfade.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Per-Word Crossfade preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/per-word-crossfade/__hf-variables-preview.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/per-word-rise.html b/docs/public/catalog/preview/components/per-word-rise.html
new file mode 100644
index 0000000000..3516e0a28a
--- /dev/null
+++ b/docs/public/catalog/preview/components/per-word-rise.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Per Word Rise preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/per-word-rise/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/perspective-marquee.html b/docs/public/catalog/preview/components/perspective-marquee.html
new file mode 100644
index 0000000000..498a2dd350
--- /dev/null
+++ b/docs/public/catalog/preview/components/perspective-marquee.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Perspective Marquee preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/perspective-marquee/__hf-variables-preview.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/physical-exit.html b/docs/public/catalog/preview/components/physical-exit.html
new file mode 100644
index 0000000000..425df2e6f3
--- /dev/null
+++ b/docs/public/catalog/preview/components/physical-exit.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Physical Exit preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/physical-exit/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/press-ripple.html b/docs/public/catalog/preview/components/press-ripple.html
new file mode 100644
index 0000000000..1f1ef0ffd2
--- /dev/null
+++ b/docs/public/catalog/preview/components/press-ripple.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Press Ripple preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/press-ripple/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/pricing-tier-focus.html b/docs/public/catalog/preview/components/pricing-tier-focus.html
new file mode 100644
index 0000000000..9a54545ac5
--- /dev/null
+++ b/docs/public/catalog/preview/components/pricing-tier-focus.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Pricing Tier Focus preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/pricing-tier-focus/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/pull-back-reveal.html b/docs/public/catalog/preview/components/pull-back-reveal.html
new file mode 100644
index 0000000000..dcd0770ffb
--- /dev/null
+++ b/docs/public/catalog/preview/components/pull-back-reveal.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Pull Back Reveal preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/pull-back-reveal/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/pull-to-refresh.html b/docs/public/catalog/preview/components/pull-to-refresh.html
new file mode 100644
index 0000000000..dedd1d794a
--- /dev/null
+++ b/docs/public/catalog/preview/components/pull-to-refresh.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Pull to Refresh preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/pull-to-refresh/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/push-in.html b/docs/public/catalog/preview/components/push-in.html
new file mode 100644
index 0000000000..14305d6b5b
--- /dev/null
+++ b/docs/public/catalog/preview/components/push-in.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Push In preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/push-in/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/radial-surround.html b/docs/public/catalog/preview/components/radial-surround.html
new file mode 100644
index 0000000000..2dcd4ff3f4
--- /dev/null
+++ b/docs/public/catalog/preview/components/radial-surround.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Radial Surround preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/radial-surround/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/rgb-glitch-text.html b/docs/public/catalog/preview/components/rgb-glitch-text.html
new file mode 100644
index 0000000000..156ae12901
--- /dev/null
+++ b/docs/public/catalog/preview/components/rgb-glitch-text.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>RGB Glitch Text preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/rgb-glitch-text/__hf-variables-preview.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/rolling-number.html b/docs/public/catalog/preview/components/rolling-number.html
new file mode 100644
index 0000000000..aca8b573d6
--- /dev/null
+++ b/docs/public/catalog/preview/components/rolling-number.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Rolling Number preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/rolling-number/__hf-variables-preview.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/rubber-band-bumper.html b/docs/public/catalog/preview/components/rubber-band-bumper.html
new file mode 100644
index 0000000000..9e8d502863
--- /dev/null
+++ b/docs/public/catalog/preview/components/rubber-band-bumper.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Rubber Band Bumper preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/rubber-band-bumper/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/scale-down-fade.html b/docs/public/catalog/preview/components/scale-down-fade.html
new file mode 100644
index 0000000000..3fee3c13de
--- /dev/null
+++ b/docs/public/catalog/preview/components/scale-down-fade.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Scale Down Fade preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/scale-down-fade/__hf-variables-preview.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/scan-band.html b/docs/public/catalog/preview/components/scan-band.html
new file mode 100644
index 0000000000..bd9d619f1e
--- /dev/null
+++ b/docs/public/catalog/preview/components/scan-band.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Scan Band preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/scan-band/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/scramble-reveal.html b/docs/public/catalog/preview/components/scramble-reveal.html
new file mode 100644
index 0000000000..05292694a4
--- /dev/null
+++ b/docs/public/catalog/preview/components/scramble-reveal.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Scramble Reveal preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/scramble-reveal/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/screen-flow-carousel.html b/docs/public/catalog/preview/components/screen-flow-carousel.html
new file mode 100644
index 0000000000..5309ddceb2
--- /dev/null
+++ b/docs/public/catalog/preview/components/screen-flow-carousel.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Screen Flow Carousel preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/screen-flow-carousel/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/scroll-camera-story.html b/docs/public/catalog/preview/components/scroll-camera-story.html
new file mode 100644
index 0000000000..ea5417ba56
--- /dev/null
+++ b/docs/public/catalog/preview/components/scroll-camera-story.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Scroll Camera Story preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/scroll-camera-story/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/scroll-feed.html b/docs/public/catalog/preview/components/scroll-feed.html
new file mode 100644
index 0000000000..73a3a814a9
--- /dev/null
+++ b/docs/public/catalog/preview/components/scroll-feed.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Scroll Feed preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/scroll-feed/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/segmentation-flood.html b/docs/public/catalog/preview/components/segmentation-flood.html
new file mode 100644
index 0000000000..a717990a65
--- /dev/null
+++ b/docs/public/catalog/preview/components/segmentation-flood.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Segmentation Flood preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/segmentation-flood/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/separator.html b/docs/public/catalog/preview/components/separator.html
new file mode 100644
index 0000000000..11457c0b66
--- /dev/null
+++ b/docs/public/catalog/preview/components/separator.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Separator preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/separator/__hf-variables-preview.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/settings-toggle-flow.html b/docs/public/catalog/preview/components/settings-toggle-flow.html
new file mode 100644
index 0000000000..eba6e33e2b
--- /dev/null
+++ b/docs/public/catalog/preview/components/settings-toggle-flow.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Settings Toggle Flow preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/settings-toggle-flow/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/shader-displacement-panel.html b/docs/public/catalog/preview/components/shader-displacement-panel.html
new file mode 100644
index 0000000000..12f4c77974
--- /dev/null
+++ b/docs/public/catalog/preview/components/shader-displacement-panel.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Shader Displacement Panel preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/shader-displacement-panel/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/shared-axis-y.html b/docs/public/catalog/preview/components/shared-axis-y.html
new file mode 100644
index 0000000000..b6f2b77335
--- /dev/null
+++ b/docs/public/catalog/preview/components/shared-axis-y.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Shared Axis Y preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/shared-axis-y/__hf-variables-preview.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/shared-axis-z.html b/docs/public/catalog/preview/components/shared-axis-z.html
new file mode 100644
index 0000000000..969a363c90
--- /dev/null
+++ b/docs/public/catalog/preview/components/shared-axis-z.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Shared Axis Z preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/shared-axis-z/__hf-variables-preview.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/shimmer-sweep.html b/docs/public/catalog/preview/components/shimmer-sweep.html
new file mode 100644
index 0000000000..b4280406e4
--- /dev/null
+++ b/docs/public/catalog/preview/components/shimmer-sweep.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Shimmer Sweep preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/shimmer-sweep/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/short-slide-down.html b/docs/public/catalog/preview/components/short-slide-down.html
new file mode 100644
index 0000000000..77457b74e4
--- /dev/null
+++ b/docs/public/catalog/preview/components/short-slide-down.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Short Slide Down preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/short-slide-down/__hf-variables-preview.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/short-slide-right.html b/docs/public/catalog/preview/components/short-slide-right.html
new file mode 100644
index 0000000000..5a0c35c22a
--- /dev/null
+++ b/docs/public/catalog/preview/components/short-slide-right.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Short Slide Right preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/short-slide-right/__hf-variables-preview.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/signup-flow.html b/docs/public/catalog/preview/components/signup-flow.html
new file mode 100644
index 0000000000..23ec7349fc
--- /dev/null
+++ b/docs/public/catalog/preview/components/signup-flow.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Signup Flow preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/signup-flow/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/simulated-cursor.html b/docs/public/catalog/preview/components/simulated-cursor.html
new file mode 100644
index 0000000000..028d350052
--- /dev/null
+++ b/docs/public/catalog/preview/components/simulated-cursor.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Simulated Cursor preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/simulated-cursor/__hf-variables-preview.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/skeleton-reveal.html b/docs/public/catalog/preview/components/skeleton-reveal.html
new file mode 100644
index 0000000000..8ec0a728b4
--- /dev/null
+++ b/docs/public/catalog/preview/components/skeleton-reveal.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Skeleton Reveal preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/skeleton-reveal/__hf-variables-preview.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/slit-scan-reveal.html b/docs/public/catalog/preview/components/slit-scan-reveal.html
new file mode 100644
index 0000000000..042875578a
--- /dev/null
+++ b/docs/public/catalog/preview/components/slit-scan-reveal.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Slit Scan Reveal preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/slit-scan-reveal/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/slot-machine-roll.html b/docs/public/catalog/preview/components/slot-machine-roll.html
new file mode 100644
index 0000000000..b2e986c8a0
--- /dev/null
+++ b/docs/public/catalog/preview/components/slot-machine-roll.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Slot Machine Roll preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/slot-machine-roll/__hf-variables-preview.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/soft-blob-touch.html b/docs/public/catalog/preview/components/soft-blob-touch.html
new file mode 100644
index 0000000000..f1aa06f15f
--- /dev/null
+++ b/docs/public/catalog/preview/components/soft-blob-touch.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Soft Blob Touch preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/soft-blob-touch/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/soft-blur-in.html b/docs/public/catalog/preview/components/soft-blur-in.html
new file mode 100644
index 0000000000..703bc44cc8
--- /dev/null
+++ b/docs/public/catalog/preview/components/soft-blur-in.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Soft Blur In preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/soft-blur-in/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/spatial-push.html b/docs/public/catalog/preview/components/spatial-push.html
new file mode 100644
index 0000000000..e07d17041e
--- /dev/null
+++ b/docs/public/catalog/preview/components/spatial-push.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Spatial Push preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/spatial-push/__hf-variables-preview.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/split-tilt-cards.html b/docs/public/catalog/preview/components/split-tilt-cards.html
new file mode 100644
index 0000000000..fa017eeeca
--- /dev/null
+++ b/docs/public/catalog/preview/components/split-tilt-cards.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Split Tilt Cards preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/split-tilt-cards/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/spotlight-card.html b/docs/public/catalog/preview/components/spotlight-card.html
new file mode 100644
index 0000000000..586f7f620d
--- /dev/null
+++ b/docs/public/catalog/preview/components/spotlight-card.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Spotlight Card preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/spotlight-card/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/spring-pop.html b/docs/public/catalog/preview/components/spring-pop.html
new file mode 100644
index 0000000000..53ee6eb8ef
--- /dev/null
+++ b/docs/public/catalog/preview/components/spring-pop.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Spring Pop preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/spring-pop/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/spring-scale-in.html b/docs/public/catalog/preview/components/spring-scale-in.html
new file mode 100644
index 0000000000..ad35f621ff
--- /dev/null
+++ b/docs/public/catalog/preview/components/spring-scale-in.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Spring Scale In preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/spring-scale-in/__hf-variables-preview.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/spring-stack-shuffle.html b/docs/public/catalog/preview/components/spring-stack-shuffle.html
new file mode 100644
index 0000000000..3a1579e1bf
--- /dev/null
+++ b/docs/public/catalog/preview/components/spring-stack-shuffle.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Spring Stack Shuffle preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/spring-stack-shuffle/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/stagger-cascade.html b/docs/public/catalog/preview/components/stagger-cascade.html
new file mode 100644
index 0000000000..7f7947115b
--- /dev/null
+++ b/docs/public/catalog/preview/components/stagger-cascade.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Stagger Cascade preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/stagger-cascade/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/stagger-lattice.html b/docs/public/catalog/preview/components/stagger-lattice.html
new file mode 100644
index 0000000000..f2c29ec5a5
--- /dev/null
+++ b/docs/public/catalog/preview/components/stagger-lattice.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Stagger Lattice preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/stagger-lattice/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/staggered-fade-up.html b/docs/public/catalog/preview/components/staggered-fade-up.html
new file mode 100644
index 0000000000..303d152197
--- /dev/null
+++ b/docs/public/catalog/preview/components/staggered-fade-up.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Staggered Fade Up preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/staggered-fade-up/__hf-variables-preview.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/star-rating-fill.html b/docs/public/catalog/preview/components/star-rating-fill.html
new file mode 100644
index 0000000000..8f6579854d
--- /dev/null
+++ b/docs/public/catalog/preview/components/star-rating-fill.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Star Rating Fill preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/star-rating-fill/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/state-chip-rail.html b/docs/public/catalog/preview/components/state-chip-rail.html
new file mode 100644
index 0000000000..d3387a18a5
--- /dev/null
+++ b/docs/public/catalog/preview/components/state-chip-rail.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>State Chip Rail preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/state-chip-rail/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/sticky-mock-swap.html b/docs/public/catalog/preview/components/sticky-mock-swap.html
new file mode 100644
index 0000000000..5afc8c3df7
--- /dev/null
+++ b/docs/public/catalog/preview/components/sticky-mock-swap.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Sticky Mock Swap preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/sticky-mock-swap/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/stitched-text-draw.html b/docs/public/catalog/preview/components/stitched-text-draw.html
new file mode 100644
index 0000000000..471a631608
--- /dev/null
+++ b/docs/public/catalog/preview/components/stitched-text-draw.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Stitched Text Draw preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/stitched-text-draw/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/stop-motion-cadence.html b/docs/public/catalog/preview/components/stop-motion-cadence.html
new file mode 100644
index 0000000000..4a6b30f42a
--- /dev/null
+++ b/docs/public/catalog/preview/components/stop-motion-cadence.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Stop Motion Cadence preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/stop-motion-cadence/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/store-badge-lockup.html b/docs/public/catalog/preview/components/store-badge-lockup.html
new file mode 100644
index 0000000000..78c3bc5bdc
--- /dev/null
+++ b/docs/public/catalog/preview/components/store-badge-lockup.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Store Badge Lockup preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/store-badge-lockup/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/strikethrough-replace.html b/docs/public/catalog/preview/components/strikethrough-replace.html
new file mode 100644
index 0000000000..457f40b17b
--- /dev/null
+++ b/docs/public/catalog/preview/components/strikethrough-replace.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Strikethrough Replace preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/strikethrough-replace/__hf-variables-preview.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/success-check.html b/docs/public/catalog/preview/components/success-check.html
new file mode 100644
index 0000000000..d8981b867b
--- /dev/null
+++ b/docs/public/catalog/preview/components/success-check.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Success Check preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/success-check/__hf-variables-preview.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/svg-line-draw-loader.html b/docs/public/catalog/preview/components/svg-line-draw-loader.html
new file mode 100644
index 0000000000..cec1df433c
--- /dev/null
+++ b/docs/public/catalog/preview/components/svg-line-draw-loader.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>SVG Line Draw Loader preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/svg-line-draw-loader/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/svg-mask-reveal.html b/docs/public/catalog/preview/components/svg-mask-reveal.html
new file mode 100644
index 0000000000..50ca5c0120
--- /dev/null
+++ b/docs/public/catalog/preview/components/svg-mask-reveal.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>SVG Mask Reveal preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/svg-mask-reveal/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/svg-stroke-trace.html b/docs/public/catalog/preview/components/svg-stroke-trace.html
new file mode 100644
index 0000000000..302859108c
--- /dev/null
+++ b/docs/public/catalog/preview/components/svg-stroke-trace.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>SVG Stroke Trace preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/svg-stroke-trace/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/swipe-rail.html b/docs/public/catalog/preview/components/swipe-rail.html
new file mode 100644
index 0000000000..94f4b298d7
--- /dev/null
+++ b/docs/public/catalog/preview/components/swipe-rail.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Swipe Rail preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/swipe-rail/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/tabs-slide-indicator.html b/docs/public/catalog/preview/components/tabs-slide-indicator.html
new file mode 100644
index 0000000000..3f72db47cd
--- /dev/null
+++ b/docs/public/catalog/preview/components/tabs-slide-indicator.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Tabs Slide Indicator preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/tabs-slide-indicator/__hf-variables-preview.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/telemetry-hud.html b/docs/public/catalog/preview/components/telemetry-hud.html
new file mode 100644
index 0000000000..33ec841393
--- /dev/null
+++ b/docs/public/catalog/preview/components/telemetry-hud.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Telemetry HUD preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/telemetry-hud/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/terminal-simulator.html b/docs/public/catalog/preview/components/terminal-simulator.html
new file mode 100644
index 0000000000..81e8c05dba
--- /dev/null
+++ b/docs/public/catalog/preview/components/terminal-simulator.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Terminal Simulator preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/terminal-simulator/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/terminal-to-browser-deploy.html b/docs/public/catalog/preview/components/terminal-to-browser-deploy.html
new file mode 100644
index 0000000000..fd7395292c
--- /dev/null
+++ b/docs/public/catalog/preview/components/terminal-to-browser-deploy.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Terminal to Browser Deploy preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/terminal-to-browser-deploy/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/testimonial-card.html b/docs/public/catalog/preview/components/testimonial-card.html
new file mode 100644
index 0000000000..1ff72a11df
--- /dev/null
+++ b/docs/public/catalog/preview/components/testimonial-card.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Testimonial Card preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/testimonial-card/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/testimonial-proof-card.html b/docs/public/catalog/preview/components/testimonial-proof-card.html
new file mode 100644
index 0000000000..1ec29e5984
--- /dev/null
+++ b/docs/public/catalog/preview/components/testimonial-proof-card.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Testimonial Proof Card preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/testimonial-proof-card/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/text-shimmer.html b/docs/public/catalog/preview/components/text-shimmer.html
new file mode 100644
index 0000000000..9a0330341a
--- /dev/null
+++ b/docs/public/catalog/preview/components/text-shimmer.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Text Shimmer preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/text-shimmer/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/text-stagger.html b/docs/public/catalog/preview/components/text-stagger.html
new file mode 100644
index 0000000000..e7e4bb3c23
--- /dev/null
+++ b/docs/public/catalog/preview/components/text-stagger.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Text Stagger preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/text-stagger/__hf-variables-preview.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/text-state-swap.html b/docs/public/catalog/preview/components/text-state-swap.html
new file mode 100644
index 0000000000..ef09f33514
--- /dev/null
+++ b/docs/public/catalog/preview/components/text-state-swap.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Text State Swap preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/text-state-swap/__hf-variables-preview.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/three-orbiting-cards.html b/docs/public/catalog/preview/components/three-orbiting-cards.html
new file mode 100644
index 0000000000..d07668f029
--- /dev/null
+++ b/docs/public/catalog/preview/components/three-orbiting-cards.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Three Orbiting Cards preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/three-orbiting-cards/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/three-particle-ribbon.html b/docs/public/catalog/preview/components/three-particle-ribbon.html
new file mode 100644
index 0000000000..40f5fa01be
--- /dev/null
+++ b/docs/public/catalog/preview/components/three-particle-ribbon.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Three Particle Ribbon preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/three-particle-ribbon/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/ticker-takeover.html b/docs/public/catalog/preview/components/ticker-takeover.html
new file mode 100644
index 0000000000..3cbf5b6aac
--- /dev/null
+++ b/docs/public/catalog/preview/components/ticker-takeover.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Ticker Takeover preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/ticker-takeover/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/tilt-card.html b/docs/public/catalog/preview/components/tilt-card.html
new file mode 100644
index 0000000000..dc53b4788c
--- /dev/null
+++ b/docs/public/catalog/preview/components/tilt-card.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Tilt Card preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/tilt-card/__hf-variables-preview.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/titlecard-calm.html b/docs/public/catalog/preview/components/titlecard-calm.html
new file mode 100644
index 0000000000..ff6e70d153
--- /dev/null
+++ b/docs/public/catalog/preview/components/titlecard-calm.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Titlecard Calm preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/titlecard-calm/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/titlecard-lockup.html b/docs/public/catalog/preview/components/titlecard-lockup.html
new file mode 100644
index 0000000000..e45102e8ff
--- /dev/null
+++ b/docs/public/catalog/preview/components/titlecard-lockup.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Titlecard Lockup preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/titlecard-lockup/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/toggle-flip.html b/docs/public/catalog/preview/components/toggle-flip.html
new file mode 100644
index 0000000000..701fab8765
--- /dev/null
+++ b/docs/public/catalog/preview/components/toggle-flip.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Toggle Flip preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/toggle-flip/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/tool-menu-slide-in.html b/docs/public/catalog/preview/components/tool-menu-slide-in.html
new file mode 100644
index 0000000000..82fc331fe0
--- /dev/null
+++ b/docs/public/catalog/preview/components/tool-menu-slide-in.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Tool Menu Slide In preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/tool-menu-slide-in/__hf-variables-preview.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/top-down-letters.html b/docs/public/catalog/preview/components/top-down-letters.html
new file mode 100644
index 0000000000..c986eec8be
--- /dev/null
+++ b/docs/public/catalog/preview/components/top-down-letters.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Top-Down Letters preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/top-down-letters/__hf-variables-preview.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/touch-indicator.html b/docs/public/catalog/preview/components/touch-indicator.html
new file mode 100644
index 0000000000..b8d75f1feb
--- /dev/null
+++ b/docs/public/catalog/preview/components/touch-indicator.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Touch Indicator preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/touch-indicator/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/tracing-beam.html b/docs/public/catalog/preview/components/tracing-beam.html
new file mode 100644
index 0000000000..f9d31f8ee9
--- /dev/null
+++ b/docs/public/catalog/preview/components/tracing-beam.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Tracing Beam preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/tracing-beam/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/tracking-in.html b/docs/public/catalog/preview/components/tracking-in.html
new file mode 100644
index 0000000000..d3e9d5c5df
--- /dev/null
+++ b/docs/public/catalog/preview/components/tracking-in.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Tracking In preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/tracking-in/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/trust-strip.html b/docs/public/catalog/preview/components/trust-strip.html
new file mode 100644
index 0000000000..25c1c247cf
--- /dev/null
+++ b/docs/public/catalog/preview/components/trust-strip.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Trust Strip preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/trust-strip/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/type-match-cut.html b/docs/public/catalog/preview/components/type-match-cut.html
new file mode 100644
index 0000000000..45fb14e935
--- /dev/null
+++ b/docs/public/catalog/preview/components/type-match-cut.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Type Match Cut preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/type-match-cut/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/typed-prompt.html b/docs/public/catalog/preview/components/typed-prompt.html
new file mode 100644
index 0000000000..e2bd9d0f70
--- /dev/null
+++ b/docs/public/catalog/preview/components/typed-prompt.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Typed Prompt preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/typed-prompt/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/typewriter.html b/docs/public/catalog/preview/components/typewriter.html
new file mode 100644
index 0000000000..277ee90715
--- /dev/null
+++ b/docs/public/catalog/preview/components/typewriter.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Typewriter preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/typewriter/__hf-variables-preview.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/ui-focus-zoom.html b/docs/public/catalog/preview/components/ui-focus-zoom.html
new file mode 100644
index 0000000000..a70eb5b59d
--- /dev/null
+++ b/docs/public/catalog/preview/components/ui-focus-zoom.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>UI Focus Zoom preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/ui-focus-zoom/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/variable-axis-type.html b/docs/public/catalog/preview/components/variable-axis-type.html
new file mode 100644
index 0000000000..a536731e21
--- /dev/null
+++ b/docs/public/catalog/preview/components/variable-axis-type.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Variable Axis Type preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/variable-axis-type/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/variable-font-flex.html b/docs/public/catalog/preview/components/variable-font-flex.html
new file mode 100644
index 0000000000..b6dc1d0d23
--- /dev/null
+++ b/docs/public/catalog/preview/components/variable-font-flex.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Variable Font Flex preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/variable-font-flex/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/vector-editor-rig.html b/docs/public/catalog/preview/components/vector-editor-rig.html
new file mode 100644
index 0000000000..bd4bb2debb
--- /dev/null
+++ b/docs/public/catalog/preview/components/vector-editor-rig.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Vector Editor Rig preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/vector-editor-rig/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/velocity-throw-snap.html b/docs/public/catalog/preview/components/velocity-throw-snap.html
new file mode 100644
index 0000000000..e82437d375
--- /dev/null
+++ b/docs/public/catalog/preview/components/velocity-throw-snap.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Velocity Throw Snap preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/velocity-throw-snap/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/vignette.html b/docs/public/catalog/preview/components/vignette.html
new file mode 100644
index 0000000000..89a99ad9ef
--- /dev/null
+++ b/docs/public/catalog/preview/components/vignette.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Vignette preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/vignette/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/vox-annotate.html b/docs/public/catalog/preview/components/vox-annotate.html
new file mode 100644
index 0000000000..bc138ebb75
--- /dev/null
+++ b/docs/public/catalog/preview/components/vox-annotate.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Vox Annotate preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/vox-annotate/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/whip-pan-cut.html b/docs/public/catalog/preview/components/whip-pan-cut.html
new file mode 100644
index 0000000000..66ad0dad33
--- /dev/null
+++ b/docs/public/catalog/preview/components/whip-pan-cut.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Whip Pan Cut preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/whip-pan-cut/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/whiteboard-ink.html b/docs/public/catalog/preview/components/whiteboard-ink.html
new file mode 100644
index 0000000000..243b9b47d4
--- /dev/null
+++ b/docs/public/catalog/preview/components/whiteboard-ink.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Whiteboard Ink preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/whiteboard-ink/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/wordmark-tiles.html b/docs/public/catalog/preview/components/wordmark-tiles.html
new file mode 100644
index 0000000000..4cd5c4bff8
--- /dev/null
+++ b/docs/public/catalog/preview/components/wordmark-tiles.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Wordmark Tiles preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/wordmark-tiles/demo.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/x-follow-card.html b/docs/public/catalog/preview/components/x-follow-card.html
new file mode 100644
index 0000000000..f174c75015
--- /dev/null
+++ b/docs/public/catalog/preview/components/x-follow-card.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>X Follow Card preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/x-follow-card/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/x-followers-overview.html b/docs/public/catalog/preview/components/x-followers-overview.html
new file mode 100644
index 0000000000..9af8dc8a1d
--- /dev/null
+++ b/docs/public/catalog/preview/components/x-followers-overview.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>X Followers Overview preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/x-followers-overview/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/yt-camera-move.html b/docs/public/catalog/preview/components/yt-camera-move.html
new file mode 100644
index 0000000000..e7ae1a3bde
--- /dev/null
+++ b/docs/public/catalog/preview/components/yt-camera-move.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Camera Punch-In preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/yt-camera-move/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/yt-circle-pointer.html b/docs/public/catalog/preview/components/yt-circle-pointer.html
new file mode 100644
index 0000000000..1ef712cda9
--- /dev/null
+++ b/docs/public/catalog/preview/components/yt-circle-pointer.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Pointer Circle + Countdown preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/yt-circle-pointer/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/yt-feather-highlight.html b/docs/public/catalog/preview/components/yt-feather-highlight.html
new file mode 100644
index 0000000000..0719c7112f
--- /dev/null
+++ b/docs/public/catalog/preview/components/yt-feather-highlight.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Feathered Spotlight preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/yt-feather-highlight/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/yt-screen-warp.html b/docs/public/catalog/preview/components/yt-screen-warp.html
new file mode 100644
index 0000000000..199b8039a6
--- /dev/null
+++ b/docs/public/catalog/preview/components/yt-screen-warp.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>On-Screen Display Effect preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" src="../../components/yt-screen-warp/demo.html" controls muted></hyperframes-player>
+<script>
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing.
+  //
+  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,
+  // which browsers suspend in a hidden tab, so a preview nobody is looking at will
+  // never advance and there is nothing here to fix by retrying. An automated check
+  // of a background tab reads currentTime 0 for that reason, not for a broken one.
+  const player = document.getElementById('p');
+  let last = -1;
+  let tries = 0;
+  const start = setInterval(() => {
+    if (player.currentTime > 0 && player.currentTime !== last) {
+      clearInterval(start);
+      return;
+    }
+    last = player.currentTime;
+    if (player.ready) player.play();
+    if (++tries > 30) clearInterval(start);
+  }, 500);
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/public/catalog/preview/components/zoom-through-transition.html b/docs/public/catalog/preview/components/zoom-through-transition.html
new file mode 100644
index 0000000000..c3a8803f11
--- /dev/null
+++ b/docs/public/catalog/preview/components/zoom-through-transition.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Zoom Through Transition preview</title>
+<style>
+  html, body { margin: 0; height: 100%; background: transparent; }
+  hyperframes-player { display: block; width: 100%; height: 100%; }
+</style>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
+<hyperframes-player id="p" controls muted></hyperframes-player>
+<script>
+  const player = document.getElementById('p');
+  const BASE = "../../components/zoom-through-transition/__hf-variables-preview.html";
+  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);
+
+  // Retry until the clock actually moves. `ready` can flip before the runtime
+  // the player injects for a mounted sub-composition has finished wiring up, and
+  // a play() that lands in that window silently does nothing. It gives up rather
+  // than spinning forever: in a hidden tab the rAF clock never advances at all.
+  let poll = null;
+  const arm = (resumeAt) => {
+    clearInterval(poll);
+    let last = -1;
+    let tries = 0;
+    let seeked = false;
+    poll = setInterval(() => {
+      if (player.ready) {
+        if (!seeked) {
+          seeked = true;
+          if (resumeAt > 0) player.seek(resumeAt);
+        }
+        player.play();
+      }
+      if (seeked && player.currentTime > 0 && player.currentTime !== last) {
+        clearInterval(poll);
+        return;
+      }
+      last = player.currentTime;
+      if (++tries > 150) clearInterval(poll);
+    }, 100);
+  };
+
+  const initial = new URLSearchParams(location.search).get('hfv');
+  load(initial && encodeURIComponent(initial));
+  arm(0);
+
+  addEventListener('message', (event) => {
+    if (event.origin !== location.origin) return;
+    const values = event.data && event.data.hfVariables;
+    if (!values) return;
+    const resumeAt = player.currentTime || 0;
+    load(encodeURIComponent(JSON.stringify(values)));
+    arm(resumeAt);
+  });
+  player.addEventListener('ended', () => { player.seek(0); player.play(); });
+</script>
diff --git a/docs/snippets/install-command.jsx b/docs/snippets/install-command.jsx
new file mode 100644
index 0000000000..7b770c07e9
--- /dev/null
+++ b/docs/snippets/install-command.jsx
@@ -0,0 +1,105 @@
+/**
+ * The install command, with a copy button that is always visible.
+ *
+ * A plain code fence renders a copy control only on hover, so it is invisible
+ * to anyone who has not already guessed it is there, and absent from the
+ * accessibility tree entirely. This is the one line on a catalog page that
+ * every reader is here to take, so the affordance is spelled out.
+ *
+ * The button is icon-only, and both icons are Mintlify's own: the same
+ * clipboard and check paths, at the same 16px, that the sitewide code-block
+ * copy button draws. Two copy affordances sit on a catalog page, and they
+ * should read as one control used twice. Sizing, hover plate, focus ring and
+ * the brand-coloured check live in `custom.css` next to the rules that style
+ * that sitewide button, so the pair cannot drift apart.
+ *
+ * The "Copied" announcement is a sibling `role="status"`, not a swapped
+ * `aria-label`: it is the pattern Mintlify already uses on the code-block
+ * button, so a screen reader hears the same word from both controls, and it
+ * does not rename a control while it holds focus.
+ *
+ * navigator.clipboard is unavailable on insecure origins, which is exactly the
+ * local `mint dev` preview these pages are written against. The textarea path
+ * below is the fallback, not decoration.
+ */
+export const InstallCommand = ({ command }) => {
+  const [copied, setCopied] = React.useState(false);
+
+  const copy = async () => {
+    try {
+      if (navigator.clipboard && window.isSecureContext) {
+        await navigator.clipboard.writeText(command);
+      } else {
+        // The scratch textarea has to take focus to be selected, and removing
+        // it drops focus on <body> — so a reader who copied with the keyboard
+        // would Tab from the top of the page again. Hand focus back.
+        const previous = document.activeElement;
+        const scratch = document.createElement("textarea");
+        scratch.value = command;
+        scratch.setAttribute("readonly", "");
+        scratch.style.position = "fixed";
+        scratch.style.opacity = "0";
+        document.body.appendChild(scratch);
+        scratch.select();
+        document.execCommand("copy");
+        document.body.removeChild(scratch);
+        previous?.focus?.();
+      }
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      // Leave the command on screen and selectable. Reporting a failure the
+      // reader cannot act on is worse than letting them select it by hand.
+    }
+  };
+
+  return (
+    <div className="hf-install-command not-prose my-4 flex items-stretch overflow-hidden rounded-xl border border-zinc-200 bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900">
+      <code className="flex-1 overflow-x-auto whitespace-nowrap border-r border-zinc-200 px-4 py-3 font-mono text-sm text-zinc-800 dark:border-zinc-800 dark:text-zinc-100">
+        {command}
+      </code>
+      <button
+        type="button"
+        onClick={copy}
+        data-copied={copied ? "true" : "false"}
+        aria-label={`Copy ${command} to the clipboard`}
+        className="hf-install-copy"
+      >
+        <svg
+          className="hf-install-copy-clipboard"
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          viewBox="0 0 18 18"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          aria-hidden="true"
+        >
+          <path d="M14.25 5.25H7.25C6.14543 5.25 5.25 6.14543 5.25 7.25V14.25C5.25 15.3546 6.14543 16.25 7.25 16.25H14.25C15.3546 16.25 16.25 15.3546 16.25 14.25V7.25C16.25 6.14543 15.3546 5.25 14.25 5.25Z" />
+          <path d="M2.80103 11.998L1.77203 5.07397C1.61003 3.98097 2.36403 2.96397 3.45603 2.80197L10.38 1.77297C11.313 1.63397 12.19 2.16297 12.528 3.00097" />
+        </svg>
+        <svg
+          className="hf-install-copy-check"
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          viewBox="0 0 18 18"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          aria-hidden="true"
+        >
+          <path d="M2.75 9.5L6.5 13.25L15.25 4.5" />
+        </svg>
+      </button>
+      <span className="hf-install-copy-status" role="status" aria-live="polite">
+        {copied ? "Copied" : ""}
+      </span>
+    </div>
+  );
+};
diff --git a/docs/snippets/variables-explorer.jsx b/docs/snippets/variables-explorer.jsx
new file mode 100644
index 0000000000..1c0a09cabd
--- /dev/null
+++ b/docs/snippets/variables-explorer.jsx
@@ -0,0 +1,1670 @@
+/**
+ * The interactive variables explorer on a catalog page.
+ *
+ * Replaces the static Variables table and the paste-ready snippet that used to
+ * sit under it. A table tells a reader that `glow` accepts `none | standard |
+ * strong`; it cannot tell them what `strong` looks like. This can, so the two
+ * halves are one control: change it here, watch the preview above change.
+ *
+ * How a value reaches the running composition
+ * -------------------------------------------
+ * A composition reads its variables once, at init, before any of this exists.
+ * So there is no "apply" path into a live one — the value has to be present
+ * before the composition boots. The preview wrapper (generated by
+ * scripts/generate-catalog-pages.ts alongside this) listens for the message
+ * posted below and reloads only the inner composition frame with the values in
+ * its query string, carrying the playhead across. The page, the wrapper and
+ * this panel never blink; the reload is one nested iframe deep.
+ *
+ * Which is why the post is debounced. A dragged range input fires an event per
+ * pixel, and an unthrottled reload per pixel is a reload storm that never
+ * settles. The control itself is never debounced — it tracks the pointer
+ * exactly, because a control that lags its own input feels broken.
+ *
+ * Why the colours are not utility classes
+ * ---------------------------------------
+ * Mintlify serves a prebuilt Tailwind, so a `dark:` utility only resolves if
+ * some other page already used it. `dark:bg-zinc-700` and `dark:text-zinc-100`
+ * both silently no-op here, which renders white text on a white pill. Layout
+ * utilities are safe and used throughout; every colour comes from the two token
+ * blocks below, where this file owns both the values and the cascade order.
+ *
+ * The three tabs, and why two of them are highlighted differently
+ * ----------------------------------------------------------------
+ * Preview is the running composition. Code is its source. Snippet is the mount
+ * element carrying whatever the reader has just dialled in — the one thing on
+ * the page they are meant to copy, and the reason the panel below exists.
+ *
+ * Mintlify highlights a fenced block at build time with shiki. The source is
+ * static, so it goes through a real fence: the generator writes it as ```html
+ * children of this component and it arrives already coloured, indistinguishable
+ * from every other code block on the site, with no colour table here involved.
+ *
+ * The snippet cannot. It changes on every keystroke and every drag, and there
+ * is no build step at that point. So it is assembled token by token into the
+ * markup a fence would have produced and handed to <CodeBlock>, which supplies
+ * the same container, filename header and copy button. SHIKI below is that
+ * theme's palette, copied verbatim from a rendered fence on this same site.
+ *
+ * The one control that is not just a control
+ * ------------------------------------------
+ * A variable holding raw SVG path data cannot be authored in a text field, so
+ * that field also takes a file. The exports at the foot of this file are what
+ * turn a dropped or picked SVG into path data in the composition's own
+ * coordinate space; the panel writes the result through `onChange` like any
+ * other edit, so it reaches the preview by the same debounced post as the rest.
+ */
+
+export const VariablesExplorer = ({
+  previewSrc,
+  compositionId,
+  compositionSrc,
+  variables,
+  children,
+}) => {
+  /**
+   * github-light-default / dark-plus, the pair Mintlify renders fences with.
+   * The light value is the `color`, the dark one the `--shiki-dark` custom
+   * property the site's own stylesheet swaps in — shiki's own two-value scheme.
+   *
+   * Inside the component, not beside it: MDX only carries a snippet's exported
+   * bindings into the page, so a bare module-level `const` is undefined by the
+   * time this renders.
+   */
+  const SHIKI = {
+    punct: { color: "rgb(31, 35, 40)", "--shiki-dark": "#808080" },
+    tag: { color: "rgb(17, 99, 41)", "--shiki-dark": "#569CD6" },
+    attr: { color: "rgb(5, 80, 174)", "--shiki-dark": "#9CDCFE" },
+    equals: { color: "rgb(31, 35, 40)", "--shiki-dark": "#D4D4D4" },
+    value: { color: "rgb(10, 48, 105)", "--shiki-dark": "#CE9178" },
+  };
+
+  const CSS = `
+.hf-ve {
+  --ve-fg: #18181b;
+  --ve-muted: #71717a;
+  --ve-line: #e4e4e7;
+  --ve-surface: #ffffff;
+  --ve-sunken: #fafafa;
+  --ve-hover: #f4f4f5;
+  --ve-on-bg: #18181b;
+  --ve-on-fg: #ffffff;
+  --ve-ring: rgba(24, 24, 27, 0.14);
+  --ve-danger: #b42318;
+}
+:where(html.dark) .hf-ve {
+  --ve-fg: #f4f4f5;
+  --ve-muted: #a1a1aa;
+  --ve-line: #27272a;
+  --ve-surface: #18181b;
+  --ve-sunken: #131316;
+  --ve-hover: #27272a;
+  --ve-on-bg: #f4f4f5;
+  --ve-on-fg: #18181b;
+  --ve-ring: rgba(244, 244, 245, 0.2);
+  --ve-danger: #ff9d95;
+}
+
+.hf-ve-tabs {
+  display: inline-flex;
+  gap: 2px;
+  padding: 3px;
+  border: 1px solid var(--ve-line);
+  border-radius: 9999px;
+  background: var(--ve-sunken);
+}
+.hf-ve-tab {
+  padding: 4px 12px;
+  border-radius: 9999px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--ve-muted);
+  background: transparent;
+}
+.hf-ve-tab[data-on="true"] {
+  color: var(--ve-fg);
+  background: var(--ve-surface);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+}
+.hf-ve-tab:hover:not([data-on="true"]) { color: var(--ve-fg); }
+
+/* Not a grid. A grid row is as tall as its tallest cell, so a five-line snippet
+   sat in the preview's 16:9 box with 300px of dead area under it. The inactive
+   pane is taken out of flow instead — and stretches left/right rather than to
+   inset 0, so the iframe keeps its own height. An iframe resized on every tab
+   switch reflows the composition running inside it. */
+.hf-ve-frame { position: relative; }
+.hf-ve-cell { min-width: 0; }
+.hf-ve-cell[data-on="false"] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+.hf-ve-preview {
+  overflow: hidden;
+  border: 1px solid var(--ve-line);
+  border-radius: 12px;
+}
+/* CodeBlock carries the page margins (mt-5 mb-8) that separate it from prose,
+   which is dead space inside a tab. Element plus two classes out-specifies a
+   Tailwind utility without !important. */
+.hf-ve-cell > div.code-block { margin: 0; }
+/* The snippet wraps; the source does not.
+   A value the reader has to read in full should not hide half of itself off the
+   right edge, so the snippet pane wraps — what \`\`\`html wrap does for a fence.
+   The width reset is the half that matters: the block's own <code> is sized to
+   max-content, and content that never meets an edge never wraps.
+   Source is left to scroll sideways like every other code block on the site.
+   Wrapping it breaks its indentation, and a comment paragraph re-flowed to a
+   narrow column reads worse than one the reader can scroll. */
+.hf-ve-snippet .shiki,
+.hf-ve-snippet .shiki code {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+/* A composition source runs to several hundred lines, and an un-capped tab
+   pushes the Customize panel off the screen. The cap goes on the scroll box
+   rather than the block, so the filename and its copy button stay put; and it
+   is a max-height, so a short source still hugs its own content and the dead
+   area under it stays gone. */
+.hf-ve-cell .code-block pre {
+  max-height: 460px;
+  overflow: auto;
+}
+/* Four classes deep because the rule being answered is three
+   (\`html:not(.dark) .codeblock-light pre.shiki code\`), and a shorter selector
+   silently loses to it. */
+.hf-ve .hf-ve-snippet .code-block pre.shiki code {
+  width: auto;
+  min-width: 0;
+}
+
+.hf-ve-panel {
+  margin-top: 12px;
+  border: 1px solid var(--ve-line);
+  border-radius: 12px;
+}
+.hf-ve-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 16px;
+  border-bottom: 1px solid var(--ve-line);
+}
+.hf-ve-title {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--ve-muted);
+}
+.hf-ve-grid {
+  display: grid;
+  gap: 16px 28px;
+  padding: 16px;
+}
+@media (min-width: 640px) {
+  .hf-ve-grid { grid-template-columns: 1fr 1fr; }
+}
+.hf-ve-row {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 6px;
+}
+.hf-ve-label { font-size: 14px; font-weight: 500; color: var(--ve-fg); }
+.hf-ve-value {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+  color: var(--ve-muted);
+}
+.hf-ve-desc {
+  margin: 6px 0 0;
+  font-size: 12px;
+  line-height: 1.45;
+  color: var(--ve-muted);
+}
+
+.hf-ve-btn {
+  padding: 4px 10px;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--ve-muted);
+  background: transparent;
+}
+.hf-ve-btn:hover:not(:disabled) { color: var(--ve-fg); background: var(--ve-hover); }
+.hf-ve-btn:disabled { opacity: 0.4; cursor: default; }
+
+.hf-ve-field {
+  width: 100%;
+  height: 36px;
+  padding: 0 12px;
+  border: 1px solid var(--ve-line);
+  border-radius: 8px;
+  font-size: 14px;
+  line-height: 1.4;
+  color: var(--ve-fg);
+  background: var(--ve-surface);
+}
+.hf-ve-field::placeholder { color: var(--ve-muted); }
+.hf-ve-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
+
+/* Focus, once, for every control here. A ring outside the border rather than a
+   border colour alone: the border already carries the resting state, so
+   recolouring it is a change a reader can miss. Nothing shifts, because the
+   ring is a shadow. :focus-visible, so a pointer click does not light it up. */
+.hf-ve-field:focus-visible,
+.hf-ve-seg-btn:focus-visible,
+.hf-ve-tab:focus-visible,
+.hf-ve-btn:focus-visible,
+.hf-ve-switch:focus-visible,
+.hf-ve-swatch:focus-visible {
+  outline: none;
+  border-color: var(--ve-on-bg);
+  box-shadow: 0 0 0 3px var(--ve-ring);
+}
+/* A range is a track, and ringing the track rings a pill the width of the
+   panel. The thumb is the part that has focus, so the thumb is what says so. */
+.hf-ve-range:focus-visible { outline: none; }
+.hf-ve-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--ve-ring); }
+.hf-ve-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px var(--ve-ring); }
+/* Safari still fires :focus for a click on a button, so the pair is kept. */
+.hf-ve-field:focus { outline: none; border-color: var(--ve-on-bg); }
+
+/* The enum branch above sends anything past four options here. No shipped item
+   does today (every enum in the registry has two to four), so this is styled to
+   the point of not looking foreign and no further — the chevron is one neutral
+   grey rather than a per-theme pair, because a data URI cannot read a token. */
+.hf-ve-select {
+  appearance: none;
+  -webkit-appearance: none;
+  padding-right: 34px;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2389898f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 10px center;
+  cursor: pointer;
+}
+
+.hf-ve-seg {
+  display: flex;
+  padding: 2px;
+  border: 1px solid var(--ve-line);
+  border-radius: 8px;
+}
+.hf-ve-seg-btn {
+  flex: 1;
+  padding: 4px 8px;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--ve-muted);
+  background: transparent;
+}
+.hf-ve-seg-btn:hover:not([data-on="true"]) { color: var(--ve-fg); background: var(--ve-hover); }
+.hf-ve-seg-btn[data-on="true"] { color: var(--ve-on-fg); background: var(--ve-on-bg); }
+
+/* A range, rebuilt. \`accent-color\` alone leaves the platform's hairline track,
+   which reads as an unstyled browser part next to everything else here. Each
+   engine names its parts differently and shares none of them, so the same
+   track and thumb are written twice; a selector either engine cannot parse
+   drops the whole rule, which is why they are never grouped. */
+.hf-ve-range {
+  width: 100%;
+  height: 20px;
+  appearance: none;
+  -webkit-appearance: none;
+  border: 0;
+  border-radius: 9999px;
+  background: transparent;
+  cursor: pointer;
+}
+/* --ve-fill is set per render: painting progress on a native track means a
+   two-stop gradient, and only the component knows where the value sits. */
+.hf-ve-range::-webkit-slider-runnable-track {
+  height: 6px;
+  border-radius: 9999px;
+  background: linear-gradient(
+    to right,
+    var(--ve-on-bg) var(--ve-fill, 0%),
+    var(--ve-line) var(--ve-fill, 0%)
+  );
+}
+.hf-ve-range::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 16px;
+  height: 16px;
+  margin-top: -5px;
+  border: 2px solid var(--ve-on-bg);
+  border-radius: 9999px;
+  background: var(--ve-surface);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14);
+}
+.hf-ve-range::-moz-range-track { height: 6px; border-radius: 9999px; background: var(--ve-line); }
+.hf-ve-range::-moz-range-progress { height: 6px; border-radius: 9999px; background: var(--ve-on-bg); }
+.hf-ve-range::-moz-range-thumb {
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--ve-on-bg);
+  border-radius: 9999px;
+  background: var(--ve-surface);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14);
+}
+/* Hover reads on the part being aimed at rather than on the whole strip: a
+   track that darkens under the pointer says "click me and the thumb comes
+   here", which is what a native range actually does. */
+.hf-ve-range:hover::-webkit-slider-thumb { border-color: var(--ve-fg); }
+.hf-ve-range:hover::-moz-range-thumb { border-color: var(--ve-fg); }
+
+/* The number control, and the three things it used to leave unsaid.
+ *
+ * It could not say where the range ends, so a reader dragging \`stroke_width\`
+ * had no idea whether 12 was nearly nothing or nearly everything: the ends now
+ * carry min and max.
+ *
+ * It could not say where the author left the knob, which is the one reference
+ * point a panel built around deviating from the author's choice needs: a mark
+ * on the track is the default, and a double click puts the value back on it.
+ *
+ * And it printed the value in the label row, a fixed distance from a thumb that
+ * moves, so reading a drag meant looking in two places at once. The value rides
+ * the thumb instead.
+ *
+ * Still a real <input type="range">. Every custom slider on the web reimplements
+ * keyboard stepping, touch, and the screen-reader contract, and most of them do
+ * one of the three badly; none of what is added here needed the element
+ * replaced. Nothing moves that a finger is not moving: the value tracks the
+ * pointer because it is the pointer's own readout, and the only transition is
+ * the colour one every other control here shares. */
+.hf-ve-slider {
+  display: grid;
+  gap: 1px;
+}
+.hf-ve-ruler {
+  position: relative;
+  height: 17px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+  line-height: 17px;
+  color: var(--ve-muted);
+}
+.hf-ve-bound {
+  position: absolute;
+  top: 0;
+}
+.hf-ve-bound[data-end="min"] { left: 0; }
+.hf-ve-bound[data-end="max"] { right: 0; }
+/* An end steps aside rather than being overprinted by the value arriving on
+   top of it. Visibility, not opacity: there is no fade here, the label is
+   either the thing being read or it is out of the way. */
+.hf-ve-ruler[data-near="min"] .hf-ve-bound[data-end="min"],
+.hf-ve-ruler[data-near="max"] .hf-ve-bound[data-end="max"] {
+  visibility: hidden;
+}
+/* translateX is centring, not motion: the readout is as wide as its own digits
+   and has to hang half of that either side of the thumb. */
+.hf-ve-readout {
+  position: absolute;
+  top: 0;
+  left: calc(var(--ve-fill, 0%) + var(--ve-fill-nudge, 0px));
+  transform: translateX(-50%);
+  color: var(--ve-fg);
+  font-weight: 600;
+  white-space: nowrap;
+}
+.hf-ve-track {
+  position: relative;
+  display: block;
+}
+.hf-ve-range { display: block; }
+.hf-ve-default {
+  position: absolute;
+  top: 5px;
+  left: calc(var(--ve-default, 50%) + var(--ve-default-nudge, 0px));
+  width: 2px;
+  height: 10px;
+  margin-left: -1px;
+  border-radius: 1px;
+  background: var(--ve-muted);
+  pointer-events: none;
+}
+
+/* A switch, for the boolean type. It used to fall through to the text input at
+   the end of control(), which asked the reader to type the word "true". */
+.hf-ve-switch {
+  display: inline-flex;
+  align-items: center;
+  width: 40px;
+  height: 24px;
+  padding: 2px;
+  border: 1px solid var(--ve-line);
+  border-radius: 9999px;
+  background: var(--ve-sunken);
+  cursor: pointer;
+}
+.hf-ve-switch[data-on="true"] { border-color: var(--ve-on-bg); background: var(--ve-on-bg); }
+.hf-ve-switch-dot {
+  width: 18px;
+  height: 18px;
+  border-radius: 9999px;
+  background: var(--ve-surface);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
+}
+.hf-ve-switch[data-on="true"] .hf-ve-switch-dot {
+  background: var(--ve-on-fg);
+  transform: translateX(16px);
+}
+
+/* The SVG import control: the same text field, with a way to fill it.
+ *
+ * The whole block is the drop target, not just the field, so a file let go over
+ * the button lands too. It says so by taking the same border colour a focused
+ * field takes, which is the one feedback channel this panel has left.
+ *
+ * A bare <input type="file"> is unlabelled, unstyleable and reads as "No file
+ * chosen" next to controls that carry their own value, so the real input is
+ * taken out of the layout and the tab order and a button in front of it is what
+ * a reader sees and what a keyboard reaches. Hidden with size and opacity
+ * rather than display:none, because an input that is not rendered at all is one
+ * some browsers decline to open a picker for. */
+.hf-ve-drop {
+  display: grid;
+  gap: 8px;
+}
+.hf-ve-drop[data-over="true"] .hf-ve-field {
+  border-color: var(--ve-on-bg);
+}
+.hf-ve-import {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.hf-ve-import .hf-ve-btn {
+  flex: 0 0 auto;
+  border-color: var(--ve-line);
+}
+.hf-ve-file {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+  pointer-events: none;
+}
+.hf-ve-note {
+  margin: 0;
+  min-width: 0;
+  font-size: 12px;
+  line-height: 1.4;
+  color: var(--ve-muted);
+}
+.hf-ve-note[data-tone="error"] { color: var(--ve-danger); }
+.hf-ve-note[data-tone="ok"] { color: var(--ve-fg); }
+
+.hf-ve-swatch {
+  width: 40px;
+  height: 32px;
+  flex-shrink: 0;
+  padding: 2px;
+  border: 1px solid var(--ve-line);
+  border-radius: 8px;
+  background: var(--ve-surface);
+  cursor: pointer;
+}
+
+/* Nothing here moves.
+ *
+ * A press-down scale on every button and field, a scale-in on the tab panes, a
+ * springing switch knob and a growing slider thumb were all flourish: the
+ * control had already told you what it did by changing colour, and the motion
+ * was a second, slower answer to a question already settled. What is left is
+ * one colour transition, short enough to read as immediate and long enough not
+ * to flicker. A control here may change colour; it does not move.
+ *
+ * Which is also why there is no prefers-reduced-motion block any more. There is
+ * no motion left to reduce. */
+.hf-ve-tint {
+  transition:
+    background-color 100ms ease,
+    border-color 100ms ease,
+    color 100ms ease;
+}
+`;
+
+  // >>> svg-import geometry
+  //
+  // Inside the component, and marked, for two reasons that pull the same way.
+  // Mintlify carries each exported binding into the page on its own, so a
+  // second `export const` beside this one is not in scope here: referencing it
+  // throws `is not defined` and takes the explorer down. And the geometry is
+  // the half of this feature that fails silently, so it has to be testable
+  // without a browser. `scripts/variables-explorer.test.ts` reads the source
+  // between these two markers and evaluates it, which is why they are here and
+  // why the names below are part of the contract.
+  /**
+   * Two of the registry's 663 declared variables hold raw SVG path data, and
+   * nobody authors `M 92 328 C 178 142 292 138 366 276 ...` by hand. Everything
+   * below is one control: pick or drop an SVG, and its geometry arrives in the
+   * field as path data the composition already knows how to draw.
+   *
+   * Why the default value decides, and not the variable's name
+   * ----------------------------------------------------------
+   * Half a dozen registry variables are called `path` and are enums of preset
+   * motion shapes (`sweep`, `bulb`). Keying the control off the name would put a
+   * file picker on all of them. The declared default is the honest signal: a
+   * value that starts with a moveto is path data and nothing else is, so the
+   * control lands on exactly `svg-stroke-trace.path` and
+   * `offset-path-traveler.path` today, and on any future path primitive without
+   * a list to maintain.
+   *
+   * Why the geometry is refitted rather than lifted
+   * -----------------------------------------------
+   * The `d` attribute of an imported file is written in that file's own viewBox.
+   * `svg-stroke-trace` draws in `0 0 1024 520`; a 24-unit icon lifted verbatim
+   * into it is a speck in the top-left corner, and a 2000-unit poster is clipped
+   * to a fragment. Either reads as a broken feature rather than a faithful one.
+   *
+   * So the import is scaled to fit, aspect preserved, centred. The box it is
+   * fitted into is the bounding box of the variable's own declared default, which
+   * is the one piece of authored geometry both this panel and the composition
+   * agree on. It needs no per-composition table and it keeps each primitive's
+   * intent: the stroke trace's default sits inset in its viewBox and an import
+   * lands inset the same way, while the traveler's default deliberately starts
+   * and ends off-frame, so an imported route enters and leaves frame too.
+   *
+   * There is no "keep original coordinates" escape hatch. A control that always
+   * produces something visible beats one that is faithful and blank; if the
+   * original numbers are wanted they can still be pasted into the same field,
+   * which is untouched and still the primary input.
+   */
+  const isSvgPathData = (value) => typeof value === "string" && /^\s*[Mm]\s*-?[\d.]/.test(value);
+
+  /**
+   * Path data as a list of `{ code, args }`, commands and numbers separated.
+   *
+   * Hand-written because the browser exposes no path parser: `getPathData()` was
+   * never shipped and the `SVGPathSeg` API that preceded it was removed. What is
+   * being parsed is small and fully specified, and the two places the grammar
+   * bites are both handled here: arc flags may be written as bare adjacent digits
+   * (`a1 1 0 011 1`), and a command's arguments may repeat without repeating the
+   * letter, where a second `M` pair is a lineto rather than another moveto.
+   *
+   * Throws on anything it cannot read, which is what turns a corrupt file into a
+   * message in the panel instead of an invalid `d` in the preview.
+   */
+  const parsePathData = (d) => {
+    const source = String(d);
+    const arity = { M: 2, L: 2, H: 1, V: 1, C: 6, S: 4, Q: 4, T: 2, A: 7, Z: 0 };
+    const commands = [];
+    let at = 0;
+    let code = "";
+
+    const separator = () => {
+      while (at < source.length && /[\s,]/.test(source[at])) at += 1;
+    };
+    const digits = () => {
+      while (at < source.length && source[at] >= "0" && source[at] <= "9") at += 1;
+    };
+    const number = () => {
+      separator();
+      const start = at;
+      if (source[at] === "+" || source[at] === "-") at += 1;
+      digits();
+      if (source[at] === ".") {
+        at += 1;
+        digits();
+      }
+      if (source[at] === "e" || source[at] === "E") {
+        at += 1;
+        if (source[at] === "+" || source[at] === "-") at += 1;
+        digits();
+      }
+      const text = source.slice(start, at);
+      const value = Number(text);
+      if (text === "" || !Number.isFinite(value)) {
+        throw new Error(`expected a number at character ${start + 1}`);
+      }
+      return value;
+    };
+    // A flag is one character, and the grammar allows it to touch the next one.
+    const flag = () => {
+      separator();
+      const character = source[at];
+      if (character !== "0" && character !== "1") {
+        throw new Error(`expected an arc flag at character ${at + 1}`);
+      }
+      at += 1;
+      return Number(character);
+    };
+
+    separator();
+    while (at < source.length) {
+      const character = source[at];
+      if (/[a-zA-Z]/.test(character)) {
+        // `arity[...] === undefined` rather than the `in` operator: Mintlify's
+        // snippet compiler walks this AST and has no handler for an `in`
+        // expression, and the throw it raises takes the whole page down.
+        if (arity[character.toUpperCase()] === undefined) {
+          throw new Error(`unknown command "${character}"`);
+        }
+        code = character;
+        at += 1;
+      } else if (code === "") {
+        throw new Error("path data must open with a command");
+      } else if (code === "M" || code === "m") {
+        // An implicit repeat of a moveto is a lineto, per the grammar.
+        code = code === "M" ? "L" : "l";
+      } else if (code === "Z" || code === "z") {
+        throw new Error(`expected a command at character ${at + 1}`);
+      }
+
+      const letter = code.toUpperCase();
+      const args = [];
+      if (letter === "A") {
+        args.push(number(), number(), number(), flag(), flag(), number(), number());
+      } else {
+        for (let taken = 0; taken < arity[letter]; taken += 1) args.push(number());
+      }
+      commands.push({ code, args });
+      separator();
+    }
+
+    if (commands.length === 0) throw new Error("path data is empty");
+    return commands;
+  };
+
+  /**
+   * The same path, as absolute `M` / `L` / `C` / `Q` / `Z` and nothing else.
+   *
+   * The point of the reduction is that every remaining argument list is a run of
+   * x/y pairs, so applying a matrix to any of them is the same three lines. The
+   * commands that are not pairs are the ones removed: `H` and `V` carry one
+   * coordinate, `A` carries radii and flags that a rotation or a mirror would
+   * silently invalidate, and `S` and `T` carry an implicit control point that is
+   * a reflection of the previous command's. Reflection is affine-covariant, so
+   * `S` would survive a transform on its own; it is resolved here anyway because
+   * an `A` in front of it becomes a cubic, and the reflection would then be taken
+   * from a control point the author never wrote.
+   */
+  const normalisePathData = (commands) => {
+    const out = [];
+    let x = 0;
+    let y = 0;
+    let startX = 0;
+    let startY = 0;
+    let cubicControl = null;
+    let quadraticControl = null;
+
+    for (const { code, args } of commands) {
+      const letter = code.toUpperCase();
+      const relative = code !== letter;
+      const dx = relative ? x : 0;
+      const dy = relative ? y : 0;
+      const pairs = (values) => {
+        const mapped = [];
+        for (let index = 0; index + 1 < values.length; index += 2) {
+          mapped.push(values[index] + dx, values[index + 1] + dy);
+        }
+        return mapped;
+      };
+      let nextCubic = null;
+      let nextQuadratic = null;
+
+      if (letter === "M") {
+        const [px, py] = pairs(args);
+        out.push({ code: "M", args: [px, py] });
+        x = px;
+        y = py;
+        startX = px;
+        startY = py;
+      } else if (letter === "L") {
+        const [px, py] = pairs(args);
+        out.push({ code: "L", args: [px, py] });
+        x = px;
+        y = py;
+      } else if (letter === "H") {
+        x = args[0] + dx;
+        out.push({ code: "L", args: [x, y] });
+      } else if (letter === "V") {
+        y = args[0] + dy;
+        out.push({ code: "L", args: [x, y] });
+      } else if (letter === "C") {
+        const points = pairs(args);
+        out.push({ code: "C", args: points });
+        nextCubic = [points[2], points[3]];
+        x = points[4];
+        y = points[5];
+      } else if (letter === "S") {
+        const points = pairs(args);
+        const first = cubicControl ? [2 * x - cubicControl[0], 2 * y - cubicControl[1]] : [x, y];
+        out.push({ code: "C", args: [...first, ...points] });
+        nextCubic = [points[0], points[1]];
+        x = points[2];
+        y = points[3];
+      } else if (letter === "Q") {
+        const points = pairs(args);
+        out.push({ code: "Q", args: points });
+        nextQuadratic = [points[0], points[1]];
+        x = points[2];
+        y = points[3];
+      } else if (letter === "T") {
+        const points = pairs(args);
+        const control = quadraticControl
+          ? [2 * x - quadraticControl[0], 2 * y - quadraticControl[1]]
+          : [x, y];
+        out.push({ code: "Q", args: [...control, ...points] });
+        nextQuadratic = control;
+        x = points[0];
+        y = points[1];
+      } else if (letter === "A") {
+        const endX = args[5] + dx;
+        const endY = args[6] + dy;
+        out.push(...arcToCubics(x, y, args[0], args[1], args[2], args[3], args[4], endX, endY));
+        x = endX;
+        y = endY;
+      } else if (letter === "Z") {
+        out.push({ code: "Z", args: [] });
+        x = startX;
+        y = startY;
+      }
+
+      cubicControl = nextCubic;
+      quadraticControl = nextQuadratic;
+    }
+
+    return out;
+  };
+
+  /**
+   * One elliptical arc as up to four cubics.
+   *
+   * The endpoint-to-centre conversion of the SVG implementation notes, then a
+   * quarter turn at a time, because a cubic tracks a circular arc well below 90
+   * degrees and visibly badly above it. The last segment's endpoint is restored
+   * to the authored one so a closed shape still closes exactly.
+   */
+  const arcToCubics = (x1, y1, rx, ry, rotation, largeArc, sweep, x2, y2) => {
+    // Both degenerate cases are named by the spec: a zero radius draws a line,
+    // and coincident endpoints draw nothing at all.
+    if (x1 === x2 && y1 === y2) return [];
+    let radiusX = Math.abs(rx);
+    let radiusY = Math.abs(ry);
+    if (radiusX === 0 || radiusY === 0) return [{ code: "L", args: [x2, y2] }];
+
+    const phi = (rotation * Math.PI) / 180;
+    const cosPhi = Math.cos(phi);
+    const sinPhi = Math.sin(phi);
+    const midX = (x1 - x2) / 2;
+    const midY = (y1 - y2) / 2;
+    const primeX = cosPhi * midX + sinPhi * midY;
+    const primeY = -sinPhi * midX + cosPhi * midY;
+
+    // Radii too small to span the endpoints are scaled up until they just fit.
+    const oversize =
+      (primeX * primeX) / (radiusX * radiusX) + (primeY * primeY) / (radiusY * radiusY);
+    if (oversize > 1) {
+      const grow = Math.sqrt(oversize);
+      radiusX *= grow;
+      radiusY *= grow;
+    }
+
+    const denominator =
+      radiusX * radiusX * primeY * primeY + radiusY * radiusY * primeX * primeX;
+    const numerator =
+      radiusX * radiusX * radiusY * radiusY -
+      radiusX * radiusX * primeY * primeY -
+      radiusY * radiusY * primeX * primeX;
+    const factor =
+      (largeArc === sweep ? -1 : 1) * Math.sqrt(Math.max(0, numerator) / denominator);
+    const centrePrimeX = (factor * radiusX * primeY) / radiusY;
+    const centrePrimeY = (-factor * radiusY * primeX) / radiusX;
+    const centreX = cosPhi * centrePrimeX - sinPhi * centrePrimeY + (x1 + x2) / 2;
+    const centreY = sinPhi * centrePrimeX + cosPhi * centrePrimeY + (y1 + y2) / 2;
+
+    const angle = (ux, uy, vx, vy) => {
+      const length = Math.hypot(ux, uy) * Math.hypot(vx, vy);
+      const cosine = length === 0 ? 1 : Math.min(1, Math.max(-1, (ux * vx + uy * vy) / length));
+      return (ux * vy - uy * vx < 0 ? -1 : 1) * Math.acos(cosine);
+    };
+    const fromX = (primeX - centrePrimeX) / radiusX;
+    const fromY = (primeY - centrePrimeY) / radiusY;
+    const toX = (-primeX - centrePrimeX) / radiusX;
+    const toY = (-primeY - centrePrimeY) / radiusY;
+    const start = angle(1, 0, fromX, fromY);
+    let sweptAngle = angle(fromX, fromY, toX, toY);
+    if (!sweep && sweptAngle > 0) sweptAngle -= 2 * Math.PI;
+    if (sweep && sweptAngle < 0) sweptAngle += 2 * Math.PI;
+
+    const steps = Math.max(1, Math.ceil(Math.abs(sweptAngle) / (Math.PI / 2)));
+    const step = sweptAngle / steps;
+    const handle = (4 / 3) * Math.tan(step / 4);
+    const at = (t) => [
+      centreX + radiusX * Math.cos(t) * cosPhi - radiusY * Math.sin(t) * sinPhi,
+      centreY + radiusX * Math.cos(t) * sinPhi + radiusY * Math.sin(t) * cosPhi,
+    ];
+    const slope = (t) => [
+      -radiusX * Math.sin(t) * cosPhi - radiusY * Math.cos(t) * sinPhi,
+      -radiusX * Math.sin(t) * sinPhi + radiusY * Math.cos(t) * cosPhi,
+    ];
+
+    const out = [];
+    for (let index = 0; index < steps; index += 1) {
+      const from = start + index * step;
+      const to = from + step;
+      const [ax, ay] = at(from);
+      const [bx, by] = at(to);
+      const [aSlopeX, aSlopeY] = slope(from);
+      const [bSlopeX, bSlopeY] = slope(to);
+      out.push({
+        code: "C",
+        args: [
+          ax + handle * aSlopeX,
+          ay + handle * aSlopeY,
+          bx - handle * bSlopeX,
+          by - handle * bSlopeY,
+          bx,
+          by,
+        ],
+      });
+    }
+    const last = out[out.length - 1];
+    last.args[4] = x2;
+    last.args[5] = y2;
+    return out;
+  };
+
+  /**
+   * Every point through a matrix. Only correct on the output of
+   * `normalisePathData`, where every argument list is a run of x/y pairs.
+   */
+  const transformPathData = (segments, matrix) =>
+    segments.map(({ code, args }) => {
+      const moved = [];
+      for (let index = 0; index + 1 < args.length; index += 2) {
+        const x = args[index];
+        const y = args[index + 1];
+        moved.push(matrix.a * x + matrix.c * y + matrix.e, matrix.b * x + matrix.d * y + matrix.f);
+      }
+      return { code, args: moved };
+    });
+
+  /**
+   * Scale to fit, aspect preserved, centred: `source` placed inside `target`.
+   *
+   * A dimension the source does not have is not a constraint on it, so a flat
+   * horizontal route is sized by its width alone rather than collapsing to a
+   * scale of zero.
+   */
+  const fitMatrix = (source, target) => {
+    // A dimension the source does not have is not a constraint on it: a flat
+    // horizontal route divides by zero, which is Infinity and loses the `min`
+    // to the dimension that is real. Guarding that explicitly was a branch that
+    // could not be told apart from this one, so it is not here.
+    const chosen = Math.min(target.width / source.width, target.height / source.height);
+    const scale = Number.isFinite(chosen) && chosen > 0 ? chosen : 1;
+    return {
+      a: scale,
+      b: 0,
+      c: 0,
+      d: scale,
+      e: target.x + target.width / 2 - (source.x + source.width / 2) * scale,
+      f: target.y + target.height / 2 - (source.y + source.height / 2) * scale,
+    };
+  };
+
+  /** Back to a `d` string. Two decimals is a hundredth of a viewBox unit. */
+  const printPathData = (segments) =>
+    segments
+      .map(({ code, args }) => {
+        if (args.length === 0) return code;
+        const numbers = args.map((value) => {
+          const rounded = Math.round(value * 100) / 100;
+          return String(Object.is(rounded, -0) ? 0 : rounded);
+        });
+        return `${code} ${numbers.join(" ")}`;
+      })
+      .join(" ");
+
+  /**
+   * The five shapes that are not a `<path>`, as path data.
+   *
+   * Rejecting them was the alternative, and it would reject most real files: a
+   * logo exported from a drawing tool is routinely a `<rect>` and two `<circle>`
+   * elements. Each conversion is the geometry the SVG shape module defines, and
+   * the curved ones are written with arcs so that `normalisePathData` reduces
+   * them by the same route an authored arc takes.
+   *
+   * Takes attributes rather than an element so it can be tested without a DOM.
+   * Returns null for a shape with no area to draw, which the caller counts as one
+   * more element it could not use.
+   */
+  const shapePathData = (tag, attrs) => {
+    const number = (name, fallback = 0) => {
+      const value = parseFloat(attrs[name]);
+      return Number.isFinite(value) ? value : fallback;
+    };
+
+    if (tag === "path") {
+      const d = typeof attrs.d === "string" ? attrs.d.trim() : "";
+      return d === "" ? null : d;
+    }
+
+    if (tag === "rect") {
+      const width = number("width");
+      const height = number("height");
+      if (!(width > 0) || !(height > 0)) return null;
+      const x = number("x");
+      const y = number("y");
+      // Either radius alone defines both, which is what the shape module says and
+      // what a rounded rect exported with only `rx` relies on.
+      const declaredX = parseFloat(attrs.rx);
+      const declaredY = parseFloat(attrs.ry);
+      const rawX = Number.isFinite(declaredX) ? declaredX : declaredY;
+      const rawY = Number.isFinite(declaredY) ? declaredY : declaredX;
+      const rx = Math.min(Math.max(Number.isFinite(rawX) ? rawX : 0, 0), width / 2);
+      const ry = Math.min(Math.max(Number.isFinite(rawY) ? rawY : 0, 0), height / 2);
+      if (rx === 0 || ry === 0) {
+        return `M ${x} ${y} H ${x + width} V ${y + height} H ${x} Z`;
+      }
+      return [
+        `M ${x + rx} ${y}`,
+        `H ${x + width - rx}`,
+        `A ${rx} ${ry} 0 0 1 ${x + width} ${y + ry}`,
+        `V ${y + height - ry}`,
+        `A ${rx} ${ry} 0 0 1 ${x + width - rx} ${y + height}`,
+        `H ${x + rx}`,
+        `A ${rx} ${ry} 0 0 1 ${x} ${y + height - ry}`,
+        `V ${y + ry}`,
+        `A ${rx} ${ry} 0 0 1 ${x + rx} ${y}`,
+        "Z",
+      ].join(" ");
+    }
+
+    if (tag === "circle" || tag === "ellipse") {
+      const rx = tag === "circle" ? number("r") : number("rx");
+      const ry = tag === "circle" ? number("r") : number("ry");
+      if (!(rx > 0) || !(ry > 0)) return null;
+      const cx = number("cx");
+      const cy = number("cy");
+      // Two half turns: one arc cannot describe a full ellipse, because its start
+      // and end points would coincide and the spec draws nothing.
+      return [
+        `M ${cx - rx} ${cy}`,
+        `A ${rx} ${ry} 0 1 0 ${cx + rx} ${cy}`,
+        `A ${rx} ${ry} 0 1 0 ${cx - rx} ${cy}`,
+        "Z",
+      ].join(" ");
+    }
+
+    if (tag === "line") {
+      const x1 = number("x1");
+      const y1 = number("y1");
+      const x2 = number("x2");
+      const y2 = number("y2");
+      if (x1 === x2 && y1 === y2) return null;
+      return `M ${x1} ${y1} L ${x2} ${y2}`;
+    }
+
+    if (tag === "polyline" || tag === "polygon") {
+      const values = String(attrs.points ?? "")
+        .trim()
+        .split(/[\s,]+/)
+        .map(Number)
+        .filter((value) => Number.isFinite(value));
+      if (values.length < 4) return null;
+      const steps = [`M ${values[0]} ${values[1]}`];
+      for (let index = 2; index + 1 < values.length; index += 2) {
+        steps.push(`L ${values[index]} ${values[index + 1]}`);
+      }
+      if (tag === "polygon") steps.push("Z");
+      return steps.join(" ");
+    }
+
+    return null;
+  };
+
+  /**
+   * An SVG file's text, in: path data fitted to `target`, out.
+   *
+   * The measuring is done by the browser rather than by more arithmetic here.
+   * `getScreenCTM` resolves the whole `transform` chain of an element, including
+   * every group above it and the root's own viewBox, which is the difference
+   * between a logo that sits where its author put it and one whose halves fly
+   * apart. It is read relative to an empty `<g>` appended to the root, so the
+   * result is the file's own user space rather than screen pixels, and whatever
+   * size the offscreen host happens to have cancels out.
+   *
+   * Both of those need layout, which is why the file is parked in the document
+   * instead of measured in the detached tree `DOMParser` returns. It is removed
+   * again in a `finally`, so a throw does not leave it there.
+   *
+   * Every failure is a throw carrying the sentence the panel shows. Importing
+   * nothing quietly is the one outcome that is not allowed: it looks identical to
+   * a control that does not work.
+   */
+  const svgToPathData = (svgText, targetPathData, doc = document) => {
+    const NS = "http://www.w3.org/2000/svg";
+    const parsed = new DOMParser().parseFromString(String(svgText), "image/svg+xml");
+    if (
+      parsed.getElementsByTagName("parsererror").length > 0 ||
+      !parsed.documentElement ||
+      parsed.documentElement.localName !== "svg"
+    ) {
+      throw new Error("That file is not an SVG, or its markup is malformed.");
+    }
+
+    const host = doc.createElement("div");
+    host.setAttribute("aria-hidden", "true");
+    host.style.cssText =
+      "position:fixed;left:-99999px;top:0;width:600px;height:600px;overflow:hidden;";
+    const svg = doc.importNode(parsed.documentElement, true);
+    host.appendChild(svg);
+    doc.body.appendChild(host);
+
+    try {
+      const reference = doc.createElementNS(NS, "g");
+      svg.appendChild(reference);
+      const rootMatrix = reference.getScreenCTM();
+
+      // Anything inside these is a definition, not a drawing. Matched by
+      // localName rather than a selector because a document that came from
+      // `image/svg+xml` matches `clipPath` case-sensitively and an HTML one
+      // does not.
+      const defining = ["defs", "clipPath", "mask", "symbol", "marker", "pattern"];
+      const isDefinition = (element) => {
+        for (let node = element.parentNode; node && node !== svg; node = node.parentNode) {
+          if (defining.includes(node.localName)) return true;
+        }
+        return false;
+      };
+
+      const shapes = [...svg.querySelectorAll("path,rect,circle,ellipse,line,polyline,polygon")];
+      const segments = [];
+      let shapesUsed = 0;
+      let firstProblem = null;
+
+      for (const element of shapes) {
+        if (isDefinition(element)) continue;
+        if (doc.defaultView.getComputedStyle(element).display === "none") continue;
+        const attrs = {};
+        for (const attribute of element.attributes) attrs[attribute.localName] = attribute.value;
+        const d = shapePathData(element.localName, attrs);
+        if (d === null) continue;
+        let own;
+        try {
+          own = normalisePathData(parsePathData(d));
+        } catch (error) {
+          firstProblem = firstProblem ?? error.message;
+          continue;
+        }
+        const matrix = element.getScreenCTM();
+        segments.push(
+          ...(rootMatrix && matrix
+            ? transformPathData(own, rootMatrix.inverse().multiply(matrix))
+            : own),
+        );
+        shapesUsed += 1;
+      }
+
+      if (segments.length === 0) {
+        if (firstProblem) throw new Error(`This SVG has unreadable path data: ${firstProblem}.`);
+        const untraceable = ["text", "image", "use"].find(
+          (tag) => svg.getElementsByTagName(tag).length > 0,
+        );
+        throw new Error(
+          untraceable
+            ? `This SVG draws with <${untraceable}>, which has no outline to trace. Convert it to paths and try again.`
+            : "This SVG has no shapes to import.",
+        );
+      }
+
+      // Subpaths in document order, one after another. A stroke trace draws them
+      // in that order and the moveto between two of them is a gap rather than a
+      // line, so nothing is joined that the file did not join.
+      const probe = doc.createElementNS(NS, "path");
+      svg.appendChild(probe);
+      probe.setAttribute("d", printPathData(segments));
+      const source = probe.getBBox();
+      if (!(source.width > 0) || !(source.height > 0)) {
+        if (!(source.width > 0) && !(source.height > 0)) {
+          throw new Error("This SVG's shapes have no size.");
+        }
+      }
+      probe.setAttribute("d", String(targetPathData));
+      const target = probe.getBBox();
+
+      return {
+        d: printPathData(transformPathData(segments, fitMatrix(source, target))),
+        shapes: shapesUsed,
+      };
+    } finally {
+      host.remove();
+    }
+  };
+  // <<< svg-import geometry
+
+  /**
+   * How finely a number was written, as a step: 0.06 gives 0.01, 100 gives 1.
+   *
+   * Only for the number variables that declare no step of their own. A default
+   * is the one sample of the variable's scale that exists, and the precision it
+   * was written to is the author saying what a meaningful change to it is.
+   */
+  const granularity = (value) => {
+    const decimals = String(value).split(".")[1];
+    return decimals ? Number(`1e-${decimals.length}`) : 1;
+  };
+
+  /**
+   * The value box on the right of a label. Empty where the control already
+   * shows the value in full — a text input repeating itself is noise.
+   */
+  const readout = (variable, value) => {
+    // Numbers used to print here. They now ride their own thumb, or sit in a
+    // number field, and a second copy a fixed distance away was the thing that
+    // made a reader look in two places at once.
+    if (variable.type === "number") return "";
+    if (variable.type === "color") return String(value);
+    if (variable.type === "enum") {
+      const hit = (variable.options ?? []).find((o) => o.value === value);
+      return hit ? (hit.label ?? hit.value) : String(value);
+    }
+    return "";
+  };
+
+  /**
+   * The control for one variable.
+   *
+   * A plain function called as `{control(...)}`, not a component. Mintlify
+   * compiles a snippet as MDX, where a capitalised tag has to be one the *page*
+   * provides — `<CodeBlock />` above is, `<Control />` would not be, and a tag
+   * that resolves to nothing takes the whole explorer down with it.
+   *
+   * Which is also why the SVG import's message is state passed in rather than
+   * state of its own: `useState` here would be a hook called outside a
+   * component, and the panel keeps one note per variable instead.
+   */
+  const control = (variable, value, onChange, note, onNote) => {
+    const options = variable.options ?? [];
+
+    // Up to four options fit a segmented row at docs width. Past that the
+    // segments shrink out of readability and a select is the honest control.
+    if (variable.type === "enum" && options.length > 0 && options.length <= 4) {
+      return (
+        <div className="hf-ve-seg">
+          {options.map((o) => (
+            <button
+              key={o.value}
+              type="button"
+              data-on={value === o.value}
+              aria-pressed={value === o.value}
+              onClick={() => onChange(o.value)}
+              className="hf-ve-seg-btn hf-ve-tint"
+            >
+              {o.label ?? o.value}
+            </button>
+          ))}
+        </div>
+      );
+    }
+
+    if (variable.type === "enum") {
+      return (
+        <select
+          className="hf-ve-field hf-ve-select hf-ve-tint"
+          value={value}
+          aria-label={variable.label ?? variable.id}
+          onChange={(e) => onChange(e.target.value)}
+        >
+          {options.map((o) => (
+            <option key={o.value} value={o.value}>
+              {o.label ?? o.value}
+            </option>
+          ))}
+        </select>
+      );
+    }
+
+    if (variable.type === "number") {
+      const min = Number(variable.min);
+      const max = Number(variable.max);
+      const unit = variable.unit ?? "";
+      const declaredStep = Number(variable.step);
+      const step = declaredStep > 0 ? declaredStep : 1;
+      const label = variable.label ?? variable.id;
+
+      // 16 of the registry's 112 number variables declare no bounds, and a
+      // range input with no min/max is 0 to 100 by definition. That is not a
+      // mispainted slider, it is a false one: `cursor-glyph-trail.fade`
+      // defaults to 0.8, and on a 0-to-100 integer scale a reader who touches
+      // it can never get 0.8 back. `count-up.end` defaults to 100 and sits
+      // pinned at a maximum that is not its maximum.
+      //
+      // So an unbounded variable gets the control that can say what it is: a
+      // number field, where the authored value is expressible and no invented
+      // range is implied. Guessing bounds from the default was the other
+      // option, and `count-up.end` is exactly the case that shows why not,
+      // since 100 is as plausibly a tenth of the range as all of it. Declaring
+      // min and max on the registry item promotes it to a slider with no code
+      // change here, which is the fix that belongs upstream.
+      if (!(Number.isFinite(min) && Number.isFinite(max) && max > min)) {
+        return (
+          <input
+            type="number"
+            className="hf-ve-field hf-ve-mono hf-ve-tint"
+            value={value}
+            min={Number.isFinite(min) ? min : undefined}
+            max={Number.isFinite(max) ? max : undefined}
+            // How finely the author wrote the default is how finely it steps.
+            // The alternatives are both wrong here: step 1 rejects the 0.06 and
+            // 0.45 defaults several of these ship with, and "any" accepts them
+            // but makes the spinner and the arrow keys move by a whole 1, which
+            // takes `fade` from 0.8 to 1.8 in one press.
+            step={declaredStep > 0 ? declaredStep : granularity(variable.default)}
+            aria-label={label}
+            // ponytail: a value that does not parse is dropped rather than
+            // written, so the preview never reloads on a half-typed number.
+            // The cost is that the field cannot be emptied; every partial
+            // number that matters ("0", "0.", "0.4") parses, so it is typeable.
+            onChange={(e) => {
+              const next = Number(e.target.value);
+              if (e.target.value !== "" && Number.isFinite(next)) onChange(next);
+            }}
+          />
+        );
+      }
+
+      const at = (n) => Math.min(1, Math.max(0, (Number(n) - min) / (max - min)));
+      const now = at(value);
+      const authored = at(variable.default);
+      // The thumb centre is inset by half its own width at each end, so a
+      // percentage alone drifts up to 8px away from it. Both the readout and
+      // the default mark are placed with the same correction, which is what
+      // keeps them agreeing with the thumb rather than nearly agreeing.
+      const place = (fraction) => ({
+        offset: `${fraction * 100}%`,
+        nudge: `${(0.5 - fraction) * 16}px`,
+      });
+      const value_ = place(now);
+      const default_ = place(authored);
+
+      // Shift is read once, when the gesture starts, and written straight to
+      // the DOM. React re-renders during a drag do not undo it, because the
+      // `step` prop itself never changes and React only writes attributes it
+      // sees change. A `useState` here would mean a global key listener and a
+      // re-render of the whole panel on every shift press.
+      const grain = (event) => {
+        event.currentTarget.step = event.shiftKey ? step / 10 : step;
+      };
+
+      return (
+        <div
+          className="hf-ve-slider"
+          style={{
+            "--ve-fill": value_.offset,
+            "--ve-fill-nudge": value_.nudge,
+            "--ve-default": default_.offset,
+            "--ve-default-nudge": default_.nudge,
+          }}
+        >
+          {/* The bounds, and the live value between them.
+              The value used to sit in the label row, a fixed distance from a
+              thumb that moves; here it rides the thumb, so reading it costs no
+              eye movement mid-drag. The ends carry min and max, which the panel
+              never showed at all: a track alone cannot say whether 12 is nearly
+              nothing or nearly everything. Each end hides itself when the value
+              arrives on top of it, so the two never overprint. */}
+          <div
+            className="hf-ve-ruler"
+            data-near={now < 0.14 ? "min" : now > 0.86 ? "max" : ""}
+            aria-hidden="true"
+          >
+            <span className="hf-ve-bound" data-end="min">
+              {min}
+            </span>
+            <span className="hf-ve-bound" data-end="max">
+              {max}
+            </span>
+            <span className="hf-ve-readout">
+              {value}
+              {unit}
+            </span>
+          </div>
+          <span className="hf-ve-track">
+            <input
+              type="range"
+              className="hf-ve-range"
+              min={min}
+              max={max}
+              step={step}
+              value={value}
+              aria-label={label}
+              // The unit is on screen but not in the accessible name, and a
+              // bare "12" is not what this control is worth saying.
+              aria-valuetext={`${value}${unit}`}
+              onChange={(e) => onChange(Number(e.target.value))}
+              onPointerDown={grain}
+              onKeyDown={grain}
+              // Back to the author's value, the gesture every audio and motion
+              // tool uses for it. Reset above does the same for the whole
+              // panel; this is the one knob you have just pushed too far.
+              onDoubleClick={() => onChange(variable.default)}
+            />
+            {/* Where the author left it. The panel is an invitation to deviate
+                from that, and without the mark there is nothing to deviate
+                from. Absent while the thumb is still on top of it, because a
+                mark under the thumb marks nothing and reads as a seam in it.
+                Four percent of the track is about one thumb at every width
+                this panel is laid out at. */}
+            {Math.abs(now - authored) > 0.04 && (
+              <span className="hf-ve-default" aria-hidden="true" />
+            )}
+          </span>
+        </div>
+      );
+    }
+
+    if (variable.type === "boolean") {
+      // A real switch. Without this branch a boolean fell through to the text
+      // input at the end of this function, which asked the reader to type the
+      // word "true" — and typed anything else silently became a string.
+      const on = value === true || value === "true";
+      return (
+        <button
+          type="button"
+          role="switch"
+          aria-checked={on}
+          aria-label={variable.label ?? variable.id}
+          data-on={on}
+          onClick={() => onChange(!on)}
+          className="hf-ve-switch"
+        >
+          <span className="hf-ve-switch-dot" />
+        </button>
+      );
+    }
+
+    if (variable.type === "color") {
+      return (
+        <div className="flex items-center gap-2">
+          <input
+            type="color"
+            className="hf-ve-swatch hf-ve-tint"
+            value={value}
+            aria-label={variable.label ?? variable.id}
+            onChange={(e) => onChange(e.target.value)}
+          />
+          <input
+            type="text"
+            className="hf-ve-field hf-ve-mono hf-ve-tint"
+            value={value}
+            onChange={(e) => onChange(e.target.value)}
+          />
+        </div>
+      );
+    }
+
+    // A string variable whose default is path data. See `isSvgPathData` at the
+    // foot of this file for why the default decides and the name does not.
+    if (isSvgPathData(variable.default)) {
+      const fileId = `hf-ve-file-${variable.id}`;
+      const noteId = `hf-ve-note-${variable.id}`;
+      const receive = (file) => {
+        if (!file) return;
+        file
+          .text()
+          .then((text) => {
+            const { d, shapes } = svgToPathData(text, variable.default);
+            onChange(d);
+            onNote({
+              tone: "ok",
+              message: `${file.name}: ${shapes} shape${shapes === 1 ? "" : "s"} scaled to fit.`,
+            });
+          })
+          .catch((error) => onNote({ tone: "error", message: error.message }));
+      };
+
+      return (
+        <div
+          className="hf-ve-drop"
+          onDragOver={(event) => {
+            event.preventDefault();
+            event.currentTarget.dataset.over = "true";
+          }}
+          onDragLeave={(event) => {
+            event.currentTarget.dataset.over = "false";
+          }}
+          onDrop={(event) => {
+            event.preventDefault();
+            event.currentTarget.dataset.over = "false";
+            receive(event.dataTransfer.files[0]);
+          }}
+        >
+          <input
+            type="text"
+            className="hf-ve-field hf-ve-mono hf-ve-tint"
+            value={value}
+            aria-label={variable.label ?? variable.id}
+            aria-describedby={noteId}
+            onChange={(e) => onChange(e.target.value)}
+          />
+          <div className="hf-ve-import">
+            {/* The button is the trigger, so the picker is reachable by tab and
+                Enter and carries the focus ring every other control here has.
+                Dropping a file does the same thing and is never the only way. */}
+            <button
+              type="button"
+              className="hf-ve-btn hf-ve-tint"
+              onClick={() => document.getElementById(fileId).click()}
+            >
+              Import SVG
+            </button>
+            <input
+              id={fileId}
+              type="file"
+              accept=".svg,image/svg+xml"
+              className="hf-ve-file"
+              tabIndex={-1}
+              aria-hidden="true"
+              onChange={(event) => {
+                receive(event.target.files[0]);
+                // Cleared so picking the same file twice is two events.
+                event.target.value = "";
+              }}
+            />
+          </div>
+          {/* Its own row rather than a column beside the button: the panel is
+              two columns wide at docs width, and a sentence sharing that with a
+              button breaks to five lines. Always present, so the region is one
+              a screen reader is already watching when a message arrives. */}
+          <p id={noteId} role="status" className="hf-ve-note" data-tone={note ? note.tone : ""}>
+            {note ? note.message : "Or drop one here. Scaled to fit and centred."}
+          </p>
+        </div>
+      );
+    }
+
+    return (
+      <input
+        type="text"
+        className="hf-ve-field hf-ve-tint"
+        value={value}
+        aria-label={variable.label ?? variable.id}
+        onChange={(e) => onChange(e.target.value)}
+      />
+    );
+  };
+
+  const defaults = {};
+  for (const v of variables) if (v.default !== undefined) defaults[v.id] = v.default;
+
+  const [values, setValues] = useState(defaults);
+  // What the SVG import last had to say, per variable. Held here because
+  // `control` is a function rather than a component and cannot hold it itself.
+  const [notes, setNotes] = useState({});
+  const [tab, setTab] = useState("preview");
+  const frame = useRef(null);
+
+  // The first load carries the defaults in its own URL, so the frame never
+  // waits on a message to show the right thing. Recomputed every render, but it
+  // is the same string every time, so React never touches the iframe again.
+  const initialSrc = `${previewSrc}?hfv=${encodeURIComponent(JSON.stringify(defaults))}`;
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      const target = frame.current && frame.current.contentWindow;
+      if (target) target.postMessage({ hfVariables: values }, window.location.origin);
+    }, 150);
+    return () => clearTimeout(timer);
+  }, [values]);
+
+  // The mount element, as coloured tokens.
+  //
+  // The values are indented rather than printed on one line: a reader looking
+  // at 200 characters of `{"a":1,"b":2,...}` reads it as minified output rather
+  // than as something they are meant to edit. Two extra spaces per line keep
+  // the object under its own attribute. Newlines inside a quoted HTML attribute
+  // are legal and JSON.parse ignores them, so this still pastes and runs.
+  const printed = JSON.stringify(values, null, 2).split("\n").join("\n  ");
+  const attributes = [
+    ["data-composition-id", `"${compositionId}"`],
+    ["data-composition-src", `"${compositionSrc}"`],
+    ["data-variable-values", `'${printed}'`],
+  ];
+
+  // One entry per rendered line, each a list of [style, text] tokens — the
+  // shape a shiki fence emits. Built rather than written out because an
+  // indented value spans several lines and each one needs its own `line` span.
+  const snippetLines = [[[SHIKI.punct, "<"], [SHIKI.tag, "div"]]];
+  for (const [name, literal] of attributes) {
+    const [head, ...rest] = literal.split("\n");
+    snippetLines.push([[SHIKI.attr, `  ${name}`], [SHIKI.equals, "="], [SHIKI.value, head]]);
+    for (const line of rest) snippetLines.push([[SHIKI.value, line]]);
+  }
+  snippetLines.push([[SHIKI.punct, "></"], [SHIKI.tag, "div"], [SHIKI.punct, ">"]]);
+
+  const dirty = variables.some((v) => values[v.id] !== defaults[v.id]);
+
+  // "Code" is the composition's own source, handed in as a fenced block by the
+  // generator and highlighted by shiki at build time — the source never changes
+  // as a knob moves, so it needs none of the hand-colouring the snippet does.
+  // A source with a fence in it cannot be passed this way, and then there is
+  // simply no Code tab rather than an empty one.
+  const TABS = [
+    ["preview", "Preview"],
+    ...(children ? [["code", "Code"]] : []),
+    ["snippet", "Snippet"],
+  ];
+
+  return (
+    <div className="hf-ve not-prose my-4">
+      <style dangerouslySetInnerHTML={{ __html: CSS }} />
+
+      <div className="mb-3 flex items-center gap-3">
+        <div className="hf-ve-tabs">
+          {TABS.map(([id, label]) => (
+            <button
+              key={id}
+              type="button"
+              data-on={tab === id}
+              aria-pressed={tab === id}
+              onClick={() => setTab(id)}
+              className="hf-ve-tab hf-ve-tint"
+            >
+              {label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* One grid cell, two panes. Switching tabs must not unmount the iframe —
+          that reloads the composition and throws it back to frame zero. */}
+      <div className="hf-ve-frame">
+        <div className="hf-ve-cell" data-on={tab === "preview"}>
+          <iframe
+            ref={frame}
+            src={initialSrc}
+            className="hf-ve-preview block aspect-video w-full"
+            title={`${compositionId} preview`}
+          />
+        </div>
+        {children && (
+          <div className="hf-ve-cell" data-on={tab === "code"}>
+            {children}
+          </div>
+        )}
+        <div className="hf-ve-cell hf-ve-snippet" data-on={tab === "snippet"}>
+          {/* Each line carries its own trailing newline rather than sitting
+              next to a bare one: MDX resolves a dotted JSX tag through the
+              page, so `<React.Fragment>` throws where a keyed element does
+              not. The text content is identical either way. */}
+          <CodeBlock filename="index.html">
+            <pre
+              className="shiki shiki-themes github-light-default dark-plus"
+              style={{
+                backgroundColor: "rgb(255, 255, 255)",
+                "--shiki-dark-bg": "#0B0C0E",
+                color: "rgb(31, 35, 40)",
+                "--shiki-dark": "#D4D4D4",
+              }}
+            >
+              <code>
+                {snippetLines.map((tokens, line) => (
+                  <span key={line} className="line">
+                    {tokens.map(([style, text], token) => (
+                      <span key={token} style={style}>
+                        {text}
+                      </span>
+                    ))}
+                    {"\n"}
+                  </span>
+                ))}
+              </code>
+            </pre>
+          </CodeBlock>
+        </div>
+      </div>
+
+      <div className="hf-ve-panel">
+        <div className="hf-ve-head">
+          <span className="hf-ve-title">Customize</span>
+          <button
+            type="button"
+            onClick={() => {
+              setValues(defaults);
+              setNotes({});
+            }}
+            disabled={!dirty}
+            className="hf-ve-btn hf-ve-tint"
+          >
+            Reset
+          </button>
+        </div>
+        <div className="hf-ve-grid">
+          {variables.map((v) => (
+            <div key={v.id}>
+              <div className="hf-ve-row">
+                <label className="hf-ve-label">{v.label ?? v.id}</label>
+                <span className="hf-ve-value">{readout(v, values[v.id])}</span>
+              </div>
+              {control(
+                v,
+                values[v.id],
+                (next) => setValues((prev) => ({ ...prev, [v.id]: next })),
+                notes[v.id],
+                (note) => setNotes((prev) => ({ ...prev, [v.id]: note })),
+              )}
+              {v.description && <p className="hf-ve-desc">{v.description}</p>}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/core/src/compiler/htmlBundler.test.ts b/packages/core/src/compiler/htmlBundler.test.ts
index b820d536fa..3a4f86da70 100644
--- a/packages/core/src/compiler/htmlBundler.test.ts
+++ b/packages/core/src/compiler/htmlBundler.test.ts
@@ -3,8 +3,9 @@ import { mkdtempSync, writeFileSync, mkdirSync, symlinkSync } from "node:fs";
 import { tmpdir } from "node:os";
 import { join } from "node:path";
 import { parseHTML } from "linkedom";
-import { describe, it, expect, vi } from "vitest";
+import { afterEach, beforeEach, describe, it, expect, vi } from "vitest";
 import { bundleToSingleHtml } from "./htmlBundler";
+import { resetUnknownEnumWarnings } from "../runtime/getVariables";
 import { getHyperframeRuntimeScript } from "../generated/runtime-inline";
 
 function makeTempProject(files: Record<string, string>): string {
@@ -1388,3 +1389,124 @@ describe("bundleToSingleHtml", () => {
     }
   });
 });
+
+/**
+ * A sub-composition given a value outside a declared enum's `options` falls
+ * back silently. The runtime guard in getVariables.ts cannot see it: the
+ * bundler bakes the per-instance values into `window.__hfVariablesByComp` at
+ * compile time and the sub-comp's scoped `getVariables` shim only reads that
+ * table. Compile time is therefore the only place the defect is observable on
+ * this path, so the same warning is emitted here.
+ */
+describe("bundleToSingleHtml unknown enum values", () => {
+  let warnings: string[];
+
+  beforeEach(() => {
+    resetUnknownEnumWarnings();
+    warnings = [];
+    vi.spyOn(console, "warn").mockImplementation((...args: unknown[]) => {
+      warnings.push(args.map(String).join(" "));
+    });
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+    resetUnknownEnumWarnings();
+  });
+
+  const enumWarnings = () => warnings.filter((w) => w.includes("runtime_unknown_enum_value"));
+
+  const ACCENT_ENUM =
+    '[{"id":"accent","type":"enum","label":"Accent","default":"green","options":["green","blue","violet"]}]';
+
+  function makeSubCompProject(variableValues: string, declaration = ACCENT_ENUM): string {
+    return makeTempProject({
+      "index.html": `<!doctype html>
+<html><head></head><body>
+  <div id="root" data-composition-id="main" data-width="1920" data-height="1080">
+    <div
+      data-composition-id="card"
+      data-composition-src="compositions/card.html"
+      data-variable-values='${variableValues}'></div>
+  </div>
+  <script>window.__timelines={};</script>
+</body></html>`,
+      "compositions/card.html": `<!doctype html>
+<html data-composition-variables='${declaration}'>
+  <body>
+    <div data-composition-id="card" data-width="1920" data-height="1080"></div>
+  </body>
+</html>`,
+    });
+  }
+
+  it("warns when a sub-composition instance value is not a declared option", async () => {
+    await bundleToSingleHtml(makeSubCompProject('{"accent":"orange"}'));
+
+    expect(enumWarnings()).toEqual([
+      '[hyperframes] runtime_unknown_enum_value: card variable "accent" got "orange", ' +
+        "which is not a declared option (green, blue, violet). " +
+        'Rendering "green" instead.',
+    ]);
+  });
+
+  it("is silent when the instance value is a declared option", async () => {
+    await bundleToSingleHtml(makeSubCompProject('{"accent":"violet"}'));
+
+    expect(enumWarnings()).toEqual([]);
+  });
+
+  it("never inspects a variable declared without options", async () => {
+    const declaration = '[{"id":"accent","type":"string","label":"Accent","default":"green"}]';
+    await bundleToSingleHtml(makeSubCompProject('{"accent":"orange"}', declaration));
+
+    expect(enumWarnings()).toEqual([]);
+  });
+
+  it("is silent for a declared enum absent from the instance values", async () => {
+    await bundleToSingleHtml(makeSubCompProject('{"unrelated":"whatever"}'));
+
+    expect(enumWarnings()).toEqual([]);
+  });
+
+  it("passes the unknown value through to the bundle unrewritten", async () => {
+    const bundled = await bundleToSingleHtml(makeSubCompProject('{"accent":"orange"}'));
+
+    expect(bundled).toContain("window.__hfVariablesByComp = Object.assign({}, ");
+    expect(bundled).toContain('{ "card": { "accent": "orange" } }');
+    expect(bundled).toMatch(/\[data-composition-id="card"\]\s*\{[^}]*--accent:\s*orange/);
+    expect(bundled).not.toContain("--accent: green");
+  });
+
+  it("warns once for the same composition, variable and value across bundles", async () => {
+    const dir = makeSubCompProject('{"accent":"orange"}');
+    await bundleToSingleHtml(dir);
+    await bundleToSingleHtml(dir);
+
+    expect(enumWarnings()).toHaveLength(1);
+  });
+
+  it("warns for a <template>-mounted composition too", async () => {
+    const dir = makeTempProject({
+      "index.html": `<!doctype html>
+<html><head></head><body>
+  <div id="root" data-composition-id="main" data-width="1920" data-height="1080">
+    <div data-composition-id="card" data-variable-values='{"accent":"orange"}'></div>
+  </div>
+  <template id="card-template">
+    <div data-composition-id="card" data-width="1920" data-height="1080"
+      data-composition-variables='${ACCENT_ENUM}'></div>
+  </template>
+  <script>window.__timelines={};</script>
+</body></html>`,
+    });
+
+    await bundleToSingleHtml(dir);
+
+    expect(enumWarnings()).toEqual([
+      '[hyperframes] runtime_unknown_enum_value: card variable "accent" got "orange", ' +
+        "which is not a declared option (green, blue, violet). " +
+        'Rendering "green" instead.',
+    ]);
+  });
+});
diff --git a/packages/core/src/compiler/htmlBundler.ts b/packages/core/src/compiler/htmlBundler.ts
index d7f32b77e8..c3fddf249c 100644
--- a/packages/core/src/compiler/htmlBundler.ts
+++ b/packages/core/src/compiler/htmlBundler.ts
@@ -1,6 +1,6 @@
 import { markFlattenedInnerRoot } from "../runtime/flattenedRoot";
 export { FLATTENED_INNER_ROOT_STRIP_ATTRS } from "../runtime/flattenedRoot";
-import { parseHostVariableValues } from "../runtime/getVariables";
+import { parseHostVariableValues, warnUnknownEnumValues } from "../runtime/getVariables";
 import { cssVariableName } from "../tokenSlug";
 import { readFileSync, existsSync } from "fs";
 import { resolve, relative, dirname, isAbsolute, sep } from "path";
@@ -980,6 +980,13 @@ export async function bundleToSingleHtml(
       if (runtimeCompId && Object.keys(mergedVariables).length > 0) {
         compVariablesByComp[runtimeCompId] = mergedVariables;
       }
+      // Same defect on the <template> mount as on the data-composition-src
+      // mount (see inlineSubCompositions): the merged instance values are
+      // baked in here, so only compile time can see a value that falls back.
+      if (runtimeCompId) {
+        warnUnknownEnumValues(innerDoc.documentElement, mergedVariables, runtimeCompId);
+        warnUnknownEnumValues(innerRoot, mergedVariables, runtimeCompId);
+      }
       pushSubCompVariableStyles(
         innerDoc,
         innerRoot,
diff --git a/packages/core/src/compiler/inlineSubCompositions.ts b/packages/core/src/compiler/inlineSubCompositions.ts
index b7b68e8bb5..11ece33c0c 100644
--- a/packages/core/src/compiler/inlineSubCompositions.ts
+++ b/packages/core/src/compiler/inlineSubCompositions.ts
@@ -15,6 +15,7 @@ import {
   rewriteInlineStyleAssetUrls,
   type AssetExists,
 } from "./rewriteSubCompPaths";
+import { warnUnknownEnumValues } from "../runtime/getVariables";
 import {
   scopeCssToComposition,
   wrapInlineScriptWithErrorBoundary,
@@ -272,6 +273,14 @@ export function inlineSubCompositions(
       if (Object.keys(mergedVariables).length > 0) {
         variablesByComp[runtimeCompId] = mergedVariables;
       }
+      // Compile time is the only place this defect is visible on the sub-comp
+      // path: the instance value is baked into `__hfVariablesByComp` right
+      // here, and the scoped `getVariables` shim only reads that table, so the
+      // runtime's identical guard never runs. Same helper, so the message and
+      // the per-process dedupe set are shared with the runtime path and the
+      // author sees one warning either way.
+      warnUnknownEnumValues(compDoc.documentElement, mergedVariables, runtimeCompId);
+      warnUnknownEnumValues(innerRoot, mergedVariables, runtimeCompId);
     }
 
     // `<head>` <link>/<script src> are hoisted into the ROOT document, so they
diff --git a/packages/core/src/runtime/compositionLoader.ts b/packages/core/src/runtime/compositionLoader.ts
index 55dc5c95fc..32c4c32c52 100644
--- a/packages/core/src/runtime/compositionLoader.ts
+++ b/packages/core/src/runtime/compositionLoader.ts
@@ -7,6 +7,7 @@ import {
   filterVariablesIfAbsent,
   parseHostVariableValues,
   readDeclaredDefaults,
+  warnUnknownEnumValues,
   readRenderOverrides,
 } from "./getVariables";
 
@@ -399,6 +400,12 @@ async function mountCompositionContent(params: {
    * separate document root so no declared defaults are passed.
    */
   declaredVariableDefaults?: Record<string, unknown>;
+  /**
+   * The element `declaredVariableDefaults` was read from. Carries the full
+   * declaration (option sets, not just defaults) so the out-of-set enum guard
+   * can run on the same merge. Same population rule as the defaults above.
+   */
+  variableDeclarer?: Element;
   onDiagnostic?: (payload: {
     code: string;
     details: Record<string, string | number | boolean | null | string[]>;
@@ -720,6 +727,7 @@ export async function loadExternalCompositions(
           // dual-carrier contract from #2081) loses its defaults on this lazy
           // external-load path — see inlineSubCompositions for the fixed path.
           declaredVariableDefaults: readDeclaredDefaults(doc.documentElement),
+          variableDeclarer: doc.documentElement,
           onDiagnostic: params.onDiagnostic,
         });
       } catch (error) {
@@ -752,7 +760,11 @@ export async function loadExternalCompositions(
  * custom properties from a previous mount are cleared before (re)applying.
  */
 function stashInstanceVariables(
-  params: { host: Element; declaredVariableDefaults?: Record<string, unknown> },
+  params: {
+    host: Element;
+    declaredVariableDefaults?: Record<string, unknown>;
+    variableDeclarer?: Element;
+  },
   contentNode: Node,
   runtimeScopeCompositionId: string,
 ): void {
@@ -763,6 +775,14 @@ function stashInstanceVariables(
     ...declaredDefaults,
     ...parseHostVariableValues(params.host),
   };
+  // The sub-comp path never reaches the top-level getVariables(), so the
+  // out-of-set enum guard runs here too, against the same merged values the
+  // instance reads back out of __hfVariablesByComp.
+  warnUnknownEnumValues(
+    params.variableDeclarer ?? (contentNode instanceof Element ? contentNode : null),
+    merged,
+    runtimeScopeCompositionId,
+  );
   clearAppliedCssVariables(params.host);
   if (Object.keys(merged).length > 0) {
     if (!window.__hfVariablesByComp) window.__hfVariablesByComp = {};
diff --git a/packages/core/src/runtime/getVariables.test.ts b/packages/core/src/runtime/getVariables.test.ts
index a9bfd730e2..5c6075a3aa 100644
--- a/packages/core/src/runtime/getVariables.test.ts
+++ b/packages/core/src/runtime/getVariables.test.ts
@@ -1,8 +1,8 @@
 /**
  * @vitest-environment jsdom
  */
-import { describe, it, expect, beforeEach, afterEach } from "vitest";
-import { getVariables, readDeclaredDefaults } from "./getVariables";
+import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
+import { getVariables, readDeclaredDefaults, resetUnknownEnumWarnings } from "./getVariables";
 
 const VARIABLES_ATTR = "data-composition-variables";
 
@@ -204,6 +204,140 @@ describe("readDeclaredDefaults", () => {
   });
 });
 
+describe("out-of-set enum values (observability only — never changes the returned map)", () => {
+  // One enum plus a number and a string, so "only enums are inspected" is
+  // pinned by the same declaration the warning reads.
+  const DECLARED = JSON.stringify([
+    {
+      id: "accent",
+      type: "enum",
+      label: "Accent",
+      default: "green",
+      options: [
+        { value: "green", label: "Green" },
+        { value: "blue", label: "Blue" },
+        { value: "violet", label: "Violet" },
+      ],
+    },
+    { id: "swap_at", type: "number", label: "Swap at", default: 0.5 },
+    { id: "title", type: "string", label: "Title", default: "Hello" },
+  ]);
+  const DEFAULTS = { accent: "green", swap_at: 0.5, title: "Hello" };
+
+  let warnings: string[];
+
+  beforeEach(() => {
+    resetUnknownEnumWarnings();
+    document.body.innerHTML = "";
+    setDeclared(DECLARED);
+    document.documentElement.setAttribute("data-composition-id", "morph-swap");
+    setOverrides(undefined);
+    warnings = [];
+    vi.spyOn(console, "warn").mockImplementation((...args: unknown[]) => {
+      warnings.push(args.map(String).join(" "));
+    });
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+    document.documentElement.removeAttribute("data-composition-id");
+    setDeclared(null);
+    setOverrides(undefined);
+    resetUnknownEnumWarnings();
+  });
+
+  it("a declared option warns nothing", () => {
+    setOverrides({ accent: "violet" });
+    expect(getVariables()).toEqual({ ...DEFAULTS, accent: "violet" });
+    expect(warnings).toEqual([]);
+  });
+
+  it("an absent value warns nothing — absent is the normal case", () => {
+    expect(getVariables()).toEqual(DEFAULTS);
+    expect(warnings).toEqual([]);
+  });
+
+  it("an enum declared without a default and never set warns nothing", () => {
+    setDeclared(
+      JSON.stringify([
+        { id: "accent", type: "enum", label: "Accent", options: [{ value: "green" }] },
+      ]),
+    );
+    expect(getVariables()).toEqual({});
+    expect(warnings).toEqual([]);
+  });
+
+  it("an out-of-set value warns once, naming composition, variable, value and fallback", () => {
+    setOverrides({ accent: "orange" });
+    expect(getVariables()).toEqual({ ...DEFAULTS, accent: "orange" });
+    expect(warnings).toHaveLength(1);
+    const message = warnings[0] ?? "";
+    expect(message).toContain("runtime_unknown_enum_value");
+    expect(message).toContain("morph-swap");
+    expect(message).toContain('"accent"');
+    expect(message).toContain('got "orange"');
+    expect(message).toContain("green, blue, violet");
+    expect(message).toContain('Rendering "green" instead');
+  });
+
+  it("falls back to the root composition id when the declarer carries none", () => {
+    // The real top-level shape: <html> declares, the root <div> has the id.
+    document.documentElement.removeAttribute("data-composition-id");
+    document.body.innerHTML = '<div data-composition-id="hero-scene"></div>';
+    setOverrides({ accent: "orange" });
+    getVariables();
+    expect(warnings).toHaveLength(1);
+    expect(warnings[0]).toContain("hero-scene");
+  });
+
+  it("the same bad value twice warns once; a different bad value warns again", () => {
+    setOverrides({ accent: "orange" });
+    getVariables();
+    getVariables();
+    expect(warnings).toHaveLength(1);
+
+    setOverrides({ accent: "puce" });
+    getVariables();
+    expect(warnings).toHaveLength(2);
+    expect(warnings[1]).toContain('got "puce"');
+  });
+
+  it("non-enum variables are never inspected (any number or string is legal)", () => {
+    setOverrides({ swap_at: 9.9, title: "anything at all" });
+    expect(getVariables()).toEqual({ ...DEFAULTS, swap_at: 9.9, title: "anything at all" });
+    expect(warnings).toEqual([]);
+  });
+
+  it("does not warn when the declared default is itself out of set — nothing fell back", () => {
+    setDeclared(
+      JSON.stringify([
+        {
+          id: "accent",
+          type: "enum",
+          label: "Accent",
+          default: "orange",
+          options: [{ value: "green" }, { value: "blue" }],
+        },
+      ]),
+    );
+    expect(getVariables()).toEqual({ accent: "orange" });
+    expect(warnings).toEqual([]);
+  });
+
+  it("returns byte-identical values whether the value is in set or not", () => {
+    setOverrides({ accent: "violet" });
+    const good = getVariables();
+    setOverrides({ accent: "orange" });
+    const bad = getVariables();
+    expect(warnings).toHaveLength(1);
+    // Same keys, same non-enum values, and the bad value passed through
+    // untouched — the composition's own guard still owns the coercion.
+    expect(Object.keys(bad)).toEqual(Object.keys(good));
+    expect(bad).toEqual({ ...good, accent: "orange" });
+    expect(bad.accent).toBe("orange");
+  });
+});
+
 describe("css variable injection (figma brand-token chain)", () => {
   afterEach(() => {
     document.documentElement.removeAttribute(VARIABLES_ATTR);
diff --git a/packages/core/src/runtime/getVariables.ts b/packages/core/src/runtime/getVariables.ts
index 189356760d..f656e20c37 100644
--- a/packages/core/src/runtime/getVariables.ts
+++ b/packages/core/src/runtime/getVariables.ts
@@ -42,34 +42,145 @@ export function getVariables<
   }
   const overrides = readRenderOverrides();
 
-  return { ...declaredDefaults, ...overrides } as Partial<T>;
+  const merged = { ...declaredDefaults, ...overrides };
+  for (const el of declarers) warnUnknownEnumValues(el, merged);
+  return merged as Partial<T>;
 }
 
 /**
- * Extract `{id: default}` map from an element's `data-composition-variables`
- * attribute. Returns an empty object when the attribute is missing, the JSON
- * is unparseable, or the payload isn't an array. Exported so the
- * compositionLoader can compute the same defaults map for sub-comp instances.
+ * An enum variable given a value outside its declared `options` is coerced to
+ * the composition's default by the composition's own guard. That fallback is
+ * deliberate (a bad value must never break a frame) but it was silent, so a
+ * meaningless value could sit in a project indefinitely and look correct only
+ * by coincidence. Warn; do not change what renders.
+ *
+ * Reads the option set straight off `data-composition-variables`, so it covers
+ * every declared enum, not just the `accentColors` guard shape, and needs no
+ * per-composition code. Deduped per composition+variable+value so a remount
+ * (studio re-init, seek) cannot spam the console.
+ *
+ * Silent for a valid value, for an absent one (an absent variable resolves to
+ * its own declared default), and for a value that already equals that default
+ * (nothing fell back).
  */
-export function readDeclaredDefaults(root: Element | null): Record<string, unknown> {
-  if (!root) return {};
-  const raw = root.getAttribute("data-composition-variables");
-  if (!raw) return {};
+const warnedUnknownEnumValues = new Set<string>();
 
+/**
+ * The declaration array on an element, or empty when there isn't a usable one.
+ *
+ * One owner for `getAttribute` -> `JSON.parse` -> "is it an array", because
+ * every reader of this attribute needs exactly that and each copy was a place
+ * the three answers could drift apart.
+ */
+function readDeclarations(el: Element | null | undefined): Record<string, unknown>[] {
+  const raw = el?.getAttribute("data-composition-variables");
+  if (!raw) return [];
   let parsed: unknown;
   try {
     parsed = JSON.parse(raw);
   } catch {
-    return {};
+    return [];
+  }
+  if (!Array.isArray(parsed)) return [];
+  return parsed.filter(
+    (entry): entry is Record<string, unknown> => !!entry && typeof entry === "object",
+  );
+}
+
+/**
+ * What to call the composition in a warning.
+ *
+ * The canonical top-level shape declares the variables on `<html>`, which
+ * carries no id: the composition id sits on the root element below it. Without
+ * the descendant lookup the message reads "composition variable ...", naming
+ * nothing in a project that has more than one.
+ */
+function compositionLabel(declarer: Element, compositionId?: string): string {
+  return (
+    compositionId?.trim() ||
+    declarer.getAttribute("data-composition-id")?.trim() ||
+    declarer.querySelector("[data-composition-id]")?.getAttribute("data-composition-id")?.trim() ||
+    "composition"
+  );
+}
+
+/** The declared option values of an enum entry, as comparable primitives. */
+function declaredOptions(entry: Record<string, unknown>): (string | number)[] {
+  if (!Array.isArray(entry.options)) return [];
+  return entry.options
+    .map((option) =>
+      option && typeof option === "object" ? (option as Record<string, unknown>).value : option,
+    )
+    .filter((v): v is string | number => typeof v === "string" || typeof v === "number");
+}
+
+/**
+ * Did `resolved` hand this entry a value outside its own option set?
+ *
+ * Silent for a valid value, for an absent one (an absent variable resolves to
+ * its own declared default), and for a value that already equals that default,
+ * because then nothing fell back. A default outside its own option set is a
+ * declaration defect for the linter to catch; warning here would print the
+ * self-contradictory "got X ... rendering X".
+ */
+function unknownEnumValue(
+  entry: Record<string, unknown>,
+  resolved: Record<string, unknown>,
+): { id: string; value: unknown; allowed: (string | number)[] } | null {
+  if (typeof entry.id !== "string") return null;
+  const value = resolved[entry.id];
+  if (value === undefined || value === null) return null;
+  if ("default" in entry && String(value) === String(entry.default)) return null;
+  const allowed = declaredOptions(entry);
+  // Stringified compare: `--variables` / `data-variable-values` can deliver a
+  // declared numeric option as a string, and that is not the defect here.
+  if (allowed.length === 0 || allowed.some((v) => String(v) === String(value))) return null;
+  return { id: entry.id, value, allowed };
+}
+
+export function warnUnknownEnumValues(
+  declarer: Element | null | undefined,
+  resolved: Record<string, unknown>,
+  compositionId?: string,
+): void {
+  if (!declarer) return;
+  const entries = readDeclarations(declarer);
+  if (entries.length === 0) return;
+  const move = compositionLabel(declarer, compositionId);
+
+  for (const entry of entries) {
+    const found = unknownEnumValue(entry, resolved);
+    if (!found) continue;
+
+    // Deduped per composition+variable+value so a remount (studio re-init,
+    // seek) cannot spam the console.
+    const key = `${move}|${found.id}|${String(found.value)}`;
+    if (warnedUnknownEnumValues.has(key)) continue;
+    warnedUnknownEnumValues.add(key);
+
+    const fallback = "default" in entry ? JSON.stringify(entry.default) : "the composition default";
+    console.warn(
+      `[hyperframes] runtime_unknown_enum_value: ${move} variable "${found.id}" got ${JSON.stringify(found.value)}, which is not a declared option (${found.allowed.join(", ")}). Rendering ${fallback} instead.`,
+    );
   }
-  if (!Array.isArray(parsed)) return {};
+}
+
+/** Test-only: clear the per-page dedupe set. */
+export function resetUnknownEnumWarnings(): void {
+  warnedUnknownEnumValues.clear();
+}
 
+/**
+ * Extract `{id: default}` map from an element's `data-composition-variables`
+ * attribute. Returns an empty object when the attribute is missing, the JSON
+ * is unparseable, or the payload isn't an array. Exported so the
+ * compositionLoader can compute the same defaults map for sub-comp instances.
+ */
+export function readDeclaredDefaults(root: Element | null): Record<string, unknown> {
   const out: Record<string, unknown> = {};
-  for (const entry of parsed) {
-    if (!entry || typeof entry !== "object") continue;
-    const e = entry as Record<string, unknown>;
-    if (typeof e.id !== "string" || !("default" in e)) continue;
-    out[e.id] = e.default;
+  for (const entry of readDeclarations(root)) {
+    if (typeof entry.id !== "string" || !("default" in entry)) continue;
+    out[entry.id] = entry.default;
   }
   return out;
 }
diff --git a/registry/blocks/apple-money-count/apple-money-count.html b/registry/blocks/apple-money-count/apple-money-count.html
index 96c3ad5fba..2d7e735358 100644
--- a/registry/blocks/apple-money-count/apple-money-count.html
+++ b/registry/blocks/apple-money-count/apple-money-count.html
@@ -16,7 +16,7 @@
         width: 1920px;
         height: 1080px;
         overflow: hidden;
-        background: #fdfefe;
+        background: var(--bg, #fdfefe);
       }
 
       #root {
@@ -24,16 +24,23 @@
         width: 1920px;
         height: 1080px;
         overflow: hidden;
-        background: #fdfefe;
-        color: #111315;
-        font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
+        background: var(--bg, #fdfefe);
+        color: var(--fg, #111315);
+        font-family: var(
+          --font-display,
+          -apple-system,
+          BlinkMacSystemFont,
+          "Helvetica Neue",
+          Arial,
+          sans-serif
+        );
       }
 
       .green-flash {
         position: absolute;
         inset: 0;
         z-index: 1;
-        background: #30d158;
+        background: var(--accent, #30d158);
         opacity: 0;
       }
 
@@ -45,7 +52,7 @@
         height: 100%;
         align-items: center;
         justify-content: center;
-        padding: 120px 160px;
+        padding: var(--space-3, 120px) var(--space-3, 160px);
       }
 
       .amount-wrap {
@@ -59,7 +66,7 @@
 
       .amount {
         position: relative;
-        color: #111315;
+        color: var(--fg, #111315);
         font-size: 190px;
         font-weight: 900;
         line-height: 0.9;
@@ -68,9 +75,9 @@
         text-align: center;
         white-space: nowrap;
         text-shadow:
-          0 3px 0 rgba(255, 255, 255, 0.58),
-          0 18px 36px rgba(17, 19, 21, 0.14),
-          0 42px 92px rgba(17, 19, 21, 0.1);
+          0 3px 0 var(--bg, rgba(255, 255, 255, 0.58)),
+          0 18px 36px var(--fg, rgba(17, 19, 21, 0.14)),
+          0 42px 92px var(--fg, rgba(17, 19, 21, 0.1));
         will-change: transform, color, opacity, text-shadow;
       }
 
@@ -88,26 +95,26 @@
         display: grid;
         place-items: center;
         opacity: 0;
-        filter: drop-shadow(0 20px 24px rgba(7, 84, 31, 0.2));
+        filter: drop-shadow(0 20px 24px var(--brand, rgba(7, 84, 31, 0.2)));
         will-change: transform, opacity, filter;
       }
 
       .money-icon.bill {
         width: 96px;
         height: 52px;
-        border-radius: 10px;
-        background: #30d158;
+        border-radius: var(--radius, 10px);
+        background: var(--accent, #30d158);
         box-shadow:
-          inset 0 0 0 3px rgba(7, 84, 31, 0.2),
-          inset 0 -10px 18px rgba(7, 84, 31, 0.1),
-          0 16px 26px rgba(7, 84, 31, 0.2),
-          0 34px 64px rgba(7, 84, 31, 0.16);
+          inset 0 0 0 3px var(--brand, rgba(7, 84, 31, 0.2)),
+          inset 0 -10px 18px var(--brand, rgba(7, 84, 31, 0.1)),
+          0 16px 26px var(--brand, rgba(7, 84, 31, 0.2)),
+          0 34px 64px var(--brand, rgba(7, 84, 31, 0.16));
       }
 
       .money-icon.bill::before {
         position: absolute;
-        inset: 9px 16px;
-        border: 2px solid rgba(7, 84, 31, 0.28);
+        inset: var(--space-1, 9px) var(--space-2, 16px);
+        border: 2px solid var(--border, rgba(7, 84, 31, 0.28));
         border-radius: 999px;
         content: "";
       }
@@ -116,25 +123,30 @@
         width: 64px;
         height: 64px;
         border-radius: 50%;
-        background: radial-gradient(circle at 34% 30%, #fff7a6 0%, #ffd54f 40%, #d9a514 100%);
+        background: radial-gradient(
+          circle at 34% 30%,
+          var(--accent-2, #fff7a6) 0%,
+          var(--accent, #ffd54f) 40%,
+          var(--brand, #d9a514) 100%
+        );
         box-shadow:
-          inset 0 0 0 4px rgba(111, 76, 0, 0.12),
-          inset 0 -8px 14px rgba(111, 76, 0, 0.1),
-          0 16px 30px rgba(111, 76, 0, 0.18),
-          0 34px 58px rgba(111, 76, 0, 0.12);
+          inset 0 0 0 4px var(--brand, rgba(111, 76, 0, 0.12)),
+          inset 0 -8px 14px var(--brand, rgba(111, 76, 0, 0.1)),
+          0 16px 30px var(--brand, rgba(111, 76, 0, 0.18)),
+          0 34px 58px var(--brand, rgba(111, 76, 0, 0.12));
       }
 
       .money-icon .mark {
         position: relative;
         z-index: 1;
-        color: #07541f;
+        color: var(--fg, #07541f);
         font-size: 30px;
         font-weight: 900;
         line-height: 1;
       }
 
       .money-icon.coin .mark {
-        color: #6f4c00;
+        color: var(--fg, #6f4c00);
         font-size: 28px;
       }
     </style>
@@ -258,9 +270,9 @@
       tl.to(
         "#amount",
         {
-          color: "#30d158",
+          color: "var(--accent, #30d158)",
           textShadow:
-            "0 3px 0 rgba(255,255,255,0.52), 0 18px 40px rgba(48,209,88,0.3), 0 46px 96px rgba(7,84,31,0.2)",
+            "0 3px 0 var(--bg, rgba(255,255,255,0.52)), 0 18px 40px var(--accent, rgba(48,209,88,0.3)), 0 46px 96px var(--brand, rgba(7,84,31,0.2))",
           duration: 0.18,
         },
         3.16,
diff --git a/registry/blocks/bar-chart-race/bar-chart-race.html b/registry/blocks/bar-chart-race/bar-chart-race.html
new file mode 100644
index 0000000000..e602348a94
--- /dev/null
+++ b/registry/blocks/bar-chart-race/bar-chart-race.html
@@ -0,0 +1,584 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Bar Chart Race</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background-color: #f5f3ef;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="bcr-root"
+      data-composition-id="bar-chart-race"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="12"
+      data-composition-variables='[
+        {"id":"title","type":"string","label":"Title","default":"Streaming Subscribers by Service"},
+        {"id":"subtitle","type":"string","label":"Subtitle","default":"Ranked by reported subscribers"},
+        {"id":"periods","type":"string","label":"Period labels (comma separated)","default":"2019, 2020, 2021, 2022, 2023, 2024"},
+        {"id":"series","type":"string","label":"Series (one per line: Name: v1, v2, ...)","default":"Northwind: 42, 58, 71, 96, 118, 131\nCobalt: 30, 46, 68, 92, 126, 168\nFerry: 55, 62, 66, 70, 74, 79\nMarlow: 18, 33, 52, 61, 88, 104\nAster: 25, 28, 44, 58, 63, 72\nPell: 12, 20, 39, 47, 55, 90\nQuill: 8, 11, 15, 24, 40, 66\nDunmore: 35, 37, 38, 40, 42, 44"},
+        {"id":"barCount","type":"number","label":"Bars shown","default":6,"min":3,"max":12,"step":1},
+        {"id":"periodDuration","type":"number","label":"Seconds per period","default":2,"min":0.4,"max":6,"step":0.1},
+        {"id":"valuePrefix","type":"string","label":"Value prefix","default":"$"},
+        {"id":"valueSuffix","type":"string","label":"Value suffix","default":"M"},
+        {"id":"valueDecimals","type":"number","label":"Value decimals","default":0,"min":0,"max":3,"step":1},
+        {"id":"accent","type":"color","label":"Leader accent","default":"#c8452d"}
+      ]'
+    >
+      <div id="bcr-stage" class="clip" data-start="0" data-duration="12" data-track-index="0">
+        <div id="bcr-bg"></div>
+
+        <div id="bcr-head">
+          <div id="bcr-head-left">
+            <h1 id="bcr-title">Streaming Subscribers by Service</h1>
+            <p id="bcr-subtitle">Ranked by reported subscribers</p>
+          </div>
+          <div id="bcr-head-right">
+            <span id="bcr-period-caption">Period</span>
+            <span id="bcr-period">2019</span>
+          </div>
+        </div>
+
+        <!-- Rows live here, one per series, positioned by rank. -->
+        <div id="bcr-plot"></div>
+
+        <!-- Axis is painted above the rows: the tick labels sliding left is the
+             visible evidence that the scale is rescaling as values climb. -->
+        <div id="bcr-axis"></div>
+
+        <p id="bcr-source">Placeholder data</p>
+      </div>
+
+      <style>
+        #bcr-root {
+          position: relative;
+          width: 1920px;
+          height: 1080px;
+          overflow: hidden;
+          font-family: Inter, sans-serif;
+          color: #1f1d1b;
+        }
+
+        #bcr-stage {
+          position: absolute;
+          inset: 0;
+        }
+
+        /* Scene fill goes on a full-bleed child, never the composition root. */
+        #bcr-bg {
+          position: absolute;
+          inset: 0;
+          background-color: #f5f3ef;
+        }
+
+        #bcr-head {
+          position: absolute;
+          top: 58px;
+          left: 96px;
+          width: 1728px;
+          display: flex;
+          align-items: flex-start;
+          justify-content: space-between;
+        }
+
+        #bcr-title {
+          font-size: 46px;
+          font-weight: 700;
+          letter-spacing: -0.015em;
+          line-height: 1.1;
+        }
+
+        #bcr-subtitle {
+          margin-top: 10px;
+          font-size: 19px;
+          font-weight: 400;
+          color: #6b6560;
+        }
+
+        #bcr-head-right {
+          display: flex;
+          flex-direction: column;
+          align-items: flex-end;
+        }
+
+        #bcr-period-caption {
+          font-size: 15px;
+          font-weight: 600;
+          letter-spacing: 0.18em;
+          text-transform: uppercase;
+          color: #6b6560;
+        }
+
+        #bcr-period {
+          margin-top: 4px;
+          font-size: 72px;
+          font-weight: 700;
+          line-height: 1;
+          font-variant-numeric: tabular-nums;
+          letter-spacing: -0.02em;
+        }
+
+        #bcr-plot {
+          position: absolute;
+          left: 0;
+          top: 236px;
+          width: 1920px;
+          height: 760px;
+          overflow: hidden;
+        }
+
+        .bcr-row {
+          position: absolute;
+          left: 0;
+          top: 0;
+          width: 1920px;
+        }
+
+        /* Rows are transparent so both bars of an overtake stay visible sliding
+           past each other; only the two TEXT blocks carry an opaque backing, so
+           the front row's label covers the one it crosses instead of tangling
+           with it. */
+        .bcr-name {
+          position: absolute;
+          left: 96px;
+          width: 272px;
+          top: 50%;
+          transform: translateY(-50%);
+          text-align: right;
+          font-size: 26px;
+          font-weight: 600;
+          line-height: 1.7;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          background-color: #f5f3ef;
+        }
+
+        .bcr-bar {
+          position: absolute;
+          left: 400px;
+          top: 50%;
+          transform: translateY(-50%);
+          border-radius: 3px;
+          background-color: #1f1d1b;
+        }
+
+        .bcr-value {
+          position: absolute;
+          left: 404px;
+          top: 50%;
+          padding: 0 12px;
+          font-size: 26px;
+          font-weight: 600;
+          line-height: 1.7;
+          font-variant-numeric: tabular-nums;
+          white-space: nowrap;
+          background-color: #f5f3ef;
+        }
+
+        #bcr-axis {
+          position: absolute;
+          inset: 0;
+          z-index: 5000;
+        }
+
+        .bcr-tick-line {
+          position: absolute;
+          top: 232px;
+          left: 0;
+          width: 1px;
+          height: 768px;
+          background-color: rgba(31, 29, 27, 0.11);
+        }
+
+        .bcr-tick-line.bcr-tick-zero {
+          background-color: rgba(31, 29, 27, 0.5);
+        }
+
+        .bcr-tick-label {
+          position: absolute;
+          top: 198px;
+          left: 0;
+          font-size: 17px;
+          font-weight: 500;
+          font-variant-numeric: tabular-nums;
+          color: #6b6560;
+          white-space: nowrap;
+        }
+
+        #bcr-source {
+          position: absolute;
+          left: 96px;
+          top: 1014px;
+          font-size: 16px;
+          color: #6b6560;
+        }
+      </style>
+
+      <script>
+        (function () {
+          "use strict";
+
+          // ---- variables -------------------------------------------------
+          // The declaration attribute is the single source of truth: when the
+          // runtime is absent (raw file open) we parse the same attribute.
+          function readVars() {
+            // Read the declaration off THIS block's own root, never
+            // document.documentElement: mounted as a sub-composition the block's
+            // <html> is discarded and documentElement is the HOST's, so a
+            // documentElement read returns the wrong element (or null) and the
+            // block renders with no series at all. Runtime / host / --variables
+            // values are layered on top as overrides, so the block does not
+            // depend on the runtime being injected before this script runs.
+            var out = {};
+            var root = document.getElementById("bcr-root");
+            try {
+              JSON.parse(root.getAttribute("data-composition-variables")).forEach(function (d) {
+                out[d.id] = d.default;
+              });
+            } catch (err) {
+              // Declaration unreadable; the per-variable literal fallbacks below
+              // still produce a renderable composition.
+            }
+            var hf = window.__hyperframes;
+            var overrides =
+              hf && typeof hf.getVariables === "function"
+                ? hf.getVariables()
+                : window.__hfVariables;
+            if (overrides && typeof overrides === "object") {
+              for (var key in overrides) {
+                if (overrides[key] !== undefined) out[key] = overrides[key];
+              }
+            }
+            return out;
+          }
+
+          function num(value, fallback, lo, hi) {
+            var n = typeof value === "number" ? value : Number.parseFloat(value);
+            if (!Number.isFinite(n)) n = fallback;
+            return Math.min(hi, Math.max(lo, n));
+          }
+
+          function str(value, fallback) {
+            return typeof value === "string" && value.length > 0 ? value : fallback;
+          }
+
+          var V = readVars();
+          var ACCENT = str(V.accent, "#c8452d");
+          var BAR_COLOR = "#1f1d1b";
+          var BAR_COUNT = Math.round(num(V.barCount, 6, 1, 24));
+          var PERIOD_DURATION = num(V.periodDuration, 2, 0.1, 30);
+          var DECIMALS = Math.round(num(V.valueDecimals, 0, 0, 6));
+          var PREFIX = typeof V.valuePrefix === "string" ? V.valuePrefix : "";
+          var SUFFIX = typeof V.valueSuffix === "string" ? V.valueSuffix : "";
+
+          // ---- data format ------------------------------------------------
+          // Wide table, one series per line: "Name: v1, v2, v3".
+          // `;` is accepted as a line separator so the whole table survives a
+          // single-line text input. Short rows hold their last value.
+          function parsePeriods(text) {
+            return String(text)
+              .split(",")
+              .map(function (s) {
+                return s.trim();
+              })
+              .filter(function (s) {
+                return s.length > 0;
+              });
+          }
+
+          function parseSeries(text, periodCount) {
+            var out = [];
+            var lines = String(text).split(/[\n;]+/);
+            for (var i = 0; i < lines.length; i++) {
+              var line = lines[i].trim();
+              if (!line) continue;
+              var split = line.indexOf(":");
+              if (split < 0) continue;
+              var label = line.slice(0, split).trim();
+              if (!label) continue;
+              var values = line
+                .slice(split + 1)
+                .split(",")
+                .map(function (s) {
+                  return Number.parseFloat(s.trim());
+                })
+                .filter(function (n) {
+                  return Number.isFinite(n);
+                });
+              if (values.length === 0) continue;
+              while (values.length < periodCount) values.push(values[values.length - 1]);
+              out.push({ label: label, values: values.slice(0, periodCount) });
+            }
+            return out;
+          }
+
+          var PERIODS = parsePeriods(str(V.periods, "2019, 2020, 2021, 2022, 2023, 2024"));
+          if (PERIODS.length === 0) PERIODS = ["1"];
+          var SERIES = parseSeries(str(V.series, ""), PERIODS.length);
+          var T = PERIODS.length;
+          var N = SERIES.length;
+
+          // ---- closed-form state ------------------------------------------
+          // k = 10 interpolated keyframes per period (Bostock's number). Rank is
+          // computed at each keyframe from the interpolated value and baked once;
+          // a bar's on-screen row is then solved FROM rank, so two bars can never
+          // cross without swapping. Everything below is a pure function of t.
+          var K = 10;
+          var KF_DURATION = PERIOD_DURATION / K;
+          var KF_COUNT = T > 1 ? (T - 1) * K + 1 : 1;
+          var RACE_SECONDS = T > 1 ? (T - 1) * PERIOD_DURATION : 0;
+
+          function clamp(v, lo, hi) {
+            return v < lo ? lo : v > hi ? hi : v;
+          }
+
+          function valueAt(t, series) {
+            if (T < 2) return series.values[0];
+            var u = t / PERIOD_DURATION;
+            var i = clamp(Math.floor(u), 0, T - 2);
+            var f = clamp(u - i, 0, 1);
+            return series.values[i] + (series.values[i + 1] - series.values[i]) * f;
+          }
+
+          // ranks[m][j] = integer rank of series j at keyframe m (0 = leader).
+          var RANKS = [];
+          for (var m = 0; m < KF_COUNT; m++) {
+            var tm = m * KF_DURATION;
+            var order = SERIES.map(function (s, j) {
+              return { j: j, v: valueAt(tm, s) };
+            });
+            // Descending by value; index breaks ties so the sort is total and
+            // therefore identical on every evaluation.
+            order.sort(function (a, b) {
+              return b.v - a.v || a.j - b.j;
+            });
+            var row = new Array(N);
+            for (var r = 0; r < order.length; r++) row[order[r].j] = r;
+            RANKS.push(row);
+          }
+
+          function smoothstep(x) {
+            return x * x * (3 - 2 * x);
+          }
+
+          // Continuous row position solved from the baked ranks. A rank change
+          // between two adjacent keyframes IS the swap, and it plays out over one
+          // keyframe interval (PERIOD_DURATION / 10) instead of snapping.
+          function rankPosAt(t, j) {
+            if (KF_COUNT < 2) return RANKS[0][j];
+            var m = t / KF_DURATION;
+            var m0 = clamp(Math.floor(m), 0, KF_COUNT - 2);
+            var e = smoothstep(clamp(m - m0, 0, 1));
+            var a = RANKS[m0][j];
+            var b = RANKS[m0 + 1][j];
+            return a + (b - a) * e;
+          }
+
+          // ---- formatting --------------------------------------------------
+          function formatValue(v) {
+            return (
+              PREFIX +
+              v.toLocaleString("en-US", {
+                minimumFractionDigits: DECIMALS,
+                maximumFractionDigits: DECIMALS,
+              }) +
+              SUFFIX
+            );
+          }
+
+          function hexToRgb(hex) {
+            var h = String(hex).trim().replace("#", "");
+            if (h.length === 3) h = h[0] + h[0] + h[1] + h[1] + h[2] + h[2];
+            var n = Number.parseInt(h, 16);
+            if (!Number.isFinite(n)) return [31, 29, 27];
+            return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+          }
+
+          // Accent is the only colour in the piece and it carries exactly one
+          // meaning: this bar currently leads. It is binary, not blended — a
+          // half-accent bar would assert "half leading", which is not a fact.
+          // It hands over at the instant the two values cross, which is also the
+          // instant the two bars are the same length, so the handover lands on
+          // the overtake instead of drifting near it. Flat fill, never a
+          // gradient: a gradient inside a bar makes the longest bar the palest
+          // exactly where the eye is comparing lengths.
+          function hexToCss(hex) {
+            var rgb = hexToRgb(hex);
+            return "rgb(" + rgb[0] + ", " + rgb[1] + ", " + rgb[2] + ")";
+          }
+
+          var BAR_FILL = hexToCss(BAR_COLOR);
+          var ACCENT_FILL = hexToCss(ACCENT);
+
+          function niceStep(x) {
+            var e = Math.pow(10, Math.floor(Math.log10(x)));
+            var f = x / e;
+            return e * (f <= 1 ? 1 : f <= 2 ? 2 : f <= 5 ? 5 : 10);
+          }
+
+          // ---- geometry ----------------------------------------------------
+          var TRACK_X = 400;
+          var TRACK_W = 1180;
+          var PLOT_H = 760;
+          var PITCH = PLOT_H / BAR_COUNT;
+          var BAR_H = Math.max(12, PITCH * 0.62);
+          var TICK_POOL = 12;
+
+          // ---- DOM ---------------------------------------------------------
+          var plot = document.getElementById("bcr-plot");
+          var axis = document.getElementById("bcr-axis");
+          var periodEl = document.getElementById("bcr-period");
+          document.getElementById("bcr-title").textContent = str(
+            V.title,
+            "Streaming Subscribers by Service",
+          );
+          document.getElementById("bcr-subtitle").textContent = str(
+            V.subtitle,
+            "Ranked by reported subscribers",
+          );
+
+          var rows = SERIES.map(function (s) {
+            var row = document.createElement("div");
+            row.className = "bcr-row";
+            row.style.height = PITCH + "px";
+
+            // Declared, not silenced: two rows mid-overtake genuinely occupy the
+            // same band for ~200ms. Readability is handled by the opaque chip on
+            // each label, so the front one is always legible.
+            var name = document.createElement("div");
+            name.className = "bcr-name";
+            name.setAttribute("data-layout-allow-overlap", "");
+            name.textContent = s.label;
+
+            var bar = document.createElement("div");
+            bar.className = "bcr-bar";
+            bar.style.height = BAR_H + "px";
+
+            var value = document.createElement("div");
+            value.className = "bcr-value";
+            value.setAttribute("data-layout-allow-overlap", "");
+
+            row.appendChild(name);
+            row.appendChild(bar);
+            row.appendChild(value);
+            plot.appendChild(row);
+            return { row: row, bar: bar, value: value };
+          });
+
+          var ticks = [];
+          for (var k = 0; k < TICK_POOL; k++) {
+            var line = document.createElement("div");
+            line.className = "bcr-tick-line" + (k === 0 ? " bcr-tick-zero" : "");
+            var label = document.createElement("div");
+            label.className = "bcr-tick-label";
+            axis.appendChild(line);
+            axis.appendChild(label);
+            ticks.push({ line: line, label: label });
+          }
+
+          // ---- render ------------------------------------------------------
+          function render(t) {
+            if (N === 0) return;
+
+            var values = SERIES.map(function (s) {
+              return valueAt(t, s);
+            });
+            // Paint order follows the CURRENT value, not the row position: the
+            // bar that has just edged ahead comes forward, so at the instant two
+            // bars are superimposed the frame shows the one that is overtaking
+            // (its bar and its label together) rather than the one it passed.
+            var byValue = values
+              .map(function (v, i) {
+                return i;
+              })
+              .sort(function (a, b) {
+                return values[b] - values[a] || a - b;
+              });
+            var zRank = new Array(values.length);
+            for (var q = 0; q < byValue.length; q++) zRank[byValue[q]] = q;
+            var leader = byValue[0];
+            var maxValue = values[leader];
+            // Headroom keeps the leader off the frame edge; the domain is a
+            // continuous function of t, so the axis glides instead of stepping.
+            var scaleMax = Math.max(maxValue * 1.06, 1e-6);
+            var step = niceStep(scaleMax / 4);
+
+            for (var i = 0; i < TICK_POOL; i++) {
+              var tv = i * step;
+              var visible = tv <= scaleMax;
+              var tx = TRACK_X + (tv / scaleMax) * TRACK_W;
+              ticks[i].line.style.transform = "translateX(" + tx.toFixed(2) + "px)";
+              ticks[i].line.style.opacity = visible ? "1" : "0";
+              ticks[i].label.style.transform =
+                "translateX(" + tx.toFixed(2) + "px) translateX(-50%)";
+              ticks[i].label.style.opacity = visible ? "1" : "0";
+              ticks[i].label.textContent = visible ? formatValue(tv) : "";
+            }
+
+            for (var j = 0; j < rows.length; j++) {
+              var rankPos = rankPosAt(t, j);
+              var barW = (values[j] / scaleMax) * TRACK_W;
+              var el = rows[j];
+
+              el.row.style.transform = "translateY(" + (rankPos * PITCH).toFixed(2) + "px)";
+              // Fades out only as it slides past the last visible slot.
+              el.row.style.opacity = clamp(BAR_COUNT - rankPos, 0, 1).toFixed(3);
+              el.row.style.zIndex = String(1000 - zRank[j]);
+
+              el.bar.style.width = barW.toFixed(2) + "px";
+              el.bar.style.backgroundColor = j === leader ? ACCENT_FILL : BAR_FILL;
+
+              el.value.style.transform = "translate(" + barW.toFixed(2) + "px, -50%)";
+              el.value.textContent = formatValue(values[j]);
+            }
+
+            var pIndex = clamp(Math.floor(t / PERIOD_DURATION), 0, T - 1);
+            periodEl.textContent = PERIODS[pIndex];
+          }
+
+          // ---- timeline ----------------------------------------------------
+          // A property SETTER drives the per-frame work: tl.eventCallback("onUpdate")
+          // does not fire on tl.seek(), a tweened accessor does.
+          var driver = { _t: 0 };
+          Object.defineProperty(driver, "t", {
+            get: function () {
+              return this._t;
+            },
+            set: function (value) {
+              this._t = value;
+              render(value);
+            },
+          });
+
+          var tl = gsap.timeline({ paused: true });
+          if (RACE_SECONDS > 0) {
+            tl.to(driver, { t: RACE_SECONDS, duration: RACE_SECONDS, ease: "none" }, 0);
+          }
+          render(0);
+
+          window.__timelines = window.__timelines || {};
+          window.__timelines["bar-chart-race"] = tl;
+        })();
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/blocks/bar-chart-race/registry-item.json b/registry/blocks/bar-chart-race/registry-item.json
new file mode 100644
index 0000000000..0f72285095
--- /dev/null
+++ b/registry/blocks/bar-chart-race/registry-item.json
@@ -0,0 +1,162 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "bar-chart-race",
+  "type": "hyperframes:block",
+  "title": "Bar Chart Race",
+  "description": "Ranked bars grow and overtake each other as a time series advances, with the axis rescaling as values climb and the accent handing over to whoever leads",
+  "tags": ["data", "chart", "statistics", "ranking"],
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 12,
+  "variables": [
+    {
+      "id": "title",
+      "type": "string",
+      "label": "Title",
+      "default": "Streaming Subscribers by Service"
+    },
+    {
+      "id": "subtitle",
+      "type": "string",
+      "label": "Subtitle",
+      "default": "Ranked by reported subscribers"
+    },
+    {
+      "id": "periods",
+      "type": "string",
+      "label": "Period labels (comma separated)",
+      "default": "2019, 2020, 2021, 2022, 2023, 2024"
+    },
+    {
+      "id": "series",
+      "type": "string",
+      "label": "Series (one per line: Name: v1, v2, ...)",
+      "default": "Northwind: 42, 58, 71, 96, 118, 131\nCobalt: 30, 46, 68, 92, 126, 168\nFerry: 55, 62, 66, 70, 74, 79\nMarlow: 18, 33, 52, 61, 88, 104\nAster: 25, 28, 44, 58, 63, 72\nPell: 12, 20, 39, 47, 55, 90\nQuill: 8, 11, 15, 24, 40, 66\nDunmore: 35, 37, 38, 40, 42, 44"
+    },
+    {
+      "id": "barCount",
+      "type": "number",
+      "label": "Bars shown",
+      "default": 6,
+      "min": 3,
+      "max": 12,
+      "step": 1
+    },
+    {
+      "id": "periodDuration",
+      "type": "number",
+      "label": "Seconds per period",
+      "default": 2,
+      "min": 0.4,
+      "max": 6,
+      "step": 0.1
+    },
+    {
+      "id": "valuePrefix",
+      "type": "string",
+      "label": "Value prefix",
+      "default": "$"
+    },
+    {
+      "id": "valueSuffix",
+      "type": "string",
+      "label": "Value suffix",
+      "default": "M"
+    },
+    {
+      "id": "valueDecimals",
+      "type": "number",
+      "label": "Value decimals",
+      "default": 0,
+      "min": 0,
+      "max": 3,
+      "step": 1
+    },
+    {
+      "id": "accent",
+      "type": "color",
+      "label": "Leader accent",
+      "default": "#c8452d"
+    }
+  ],
+  "files": [
+    {
+      "path": "bar-chart-race.html",
+      "target": "compositions/bar-chart-race.html",
+      "type": "hyperframes:composition"
+    }
+  ],
+  "params": [
+    {
+      "key": "title",
+      "label": "Title",
+      "type": "text",
+      "default": "Streaming Subscribers by Service"
+    },
+    {
+      "key": "subtitle",
+      "label": "Subtitle",
+      "type": "text",
+      "default": "Ranked by reported subscribers"
+    },
+    {
+      "key": "periods",
+      "label": "Period labels (comma separated)",
+      "type": "text",
+      "default": "2019, 2020, 2021, 2022, 2023, 2024"
+    },
+    {
+      "key": "series",
+      "label": "Series (one per line: Name: v1, v2, ...)",
+      "type": "text",
+      "default": "Northwind: 42, 58, 71, 96, 118, 131\nCobalt: 30, 46, 68, 92, 126, 168\nFerry: 55, 62, 66, 70, 74, 79\nMarlow: 18, 33, 52, 61, 88, 104\nAster: 25, 28, 44, 58, 63, 72\nPell: 12, 20, 39, 47, 55, 90\nQuill: 8, 11, 15, 24, 40, 66\nDunmore: 35, 37, 38, 40, 42, 44"
+    },
+    {
+      "key": "barCount",
+      "label": "Bars shown",
+      "type": "number",
+      "default": "6",
+      "min": 3,
+      "max": 12,
+      "step": 1
+    },
+    {
+      "key": "periodDuration",
+      "label": "Seconds per period",
+      "type": "number",
+      "default": "2",
+      "min": 0.4,
+      "max": 6,
+      "step": 0.1
+    },
+    {
+      "key": "valuePrefix",
+      "label": "Value prefix",
+      "type": "text",
+      "default": "$"
+    },
+    {
+      "key": "valueSuffix",
+      "label": "Value suffix",
+      "type": "text",
+      "default": "M"
+    },
+    {
+      "key": "valueDecimals",
+      "label": "Value decimals",
+      "type": "number",
+      "default": "0",
+      "min": 0,
+      "max": 3,
+      "step": 1
+    },
+    {
+      "key": "accent",
+      "label": "Leader accent",
+      "type": "color",
+      "default": "#c8452d"
+    }
+  ]
+}
diff --git a/registry/blocks/camera-dolly-zoom/camera-dolly-zoom.html b/registry/blocks/camera-dolly-zoom/camera-dolly-zoom.html
new file mode 100644
index 0000000000..3e61b0ab14
--- /dev/null
+++ b/registry/blocks/camera-dolly-zoom/camera-dolly-zoom.html
@@ -0,0 +1,354 @@
+<!doctype html>
+<html
+  lang="en"
+  data-composition-variables='[
+    {
+      "id": "direction",
+      "type": "enum",
+      "label": "Dolly direction",
+      "default": "out",
+      "options": [
+        { "value": "out", "label": "Dolly out + zoom in (background rushes in)" },
+        { "value": "in", "label": "Dolly in + zoom out (background falls away)" }
+      ]
+    },
+    {
+      "id": "strength",
+      "type": "number",
+      "label": "Move strength (end / start distance ratio)",
+      "default": 2,
+      "min": 1.1,
+      "max": 4,
+      "step": 0.1
+    },
+    {
+      "id": "subjectDistance",
+      "type": "number",
+      "label": "Camera-to-subject distance at the start of the move",
+      "default": 1400,
+      "min": 600,
+      "max": 3000,
+      "step": 50,
+      "unit": "px"
+    },
+    {
+      "id": "easing",
+      "type": "enum",
+      "label": "Dolly easing",
+      "default": "power2.inOut",
+      "options": [
+        { "value": "none", "label": "Linear" },
+        { "value": "sine.inOut", "label": "Sine in-out" },
+        { "value": "power1.inOut", "label": "Power1 in-out" },
+        { "value": "power2.inOut", "label": "Power2 in-out" },
+        { "value": "power3.inOut", "label": "Power3 in-out" }
+      ]
+    }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <!--
+      ===================================================================
+      DOLLY ZOOM (Vertigo / Hitchcock shot)
+      ===================================================================
+
+      The camera tracks toward or away from the subject while the field of
+      view changes the opposite way, so the SUBJECT HOLDS ITS FRAME SIZE
+      while the background collapses behind it or rushes in.
+
+      THE CONSTRAINT (this is the whole effect, and it is exact, not taste):
+
+          d * tan(FOV / 2) = constant
+
+      where d is the camera-to-subject distance. Get it wrong and the shot
+      reads as a clumsy zoom. So focal length is SOLVED from distance every
+      frame; the two are never keyframed side by side.
+
+      In CSS 3D, `perspective: P px` IS the focal length in pixels, and it
+      also places the camera exactly P px in front of the z = 0 plane, so
+      tan(FOV / 2) = (viewportWidth / 2) / P. Substituting collapses the
+      invariant to a single ratio:
+
+          P(t) / d(t) = SUBJECT_SCALE   (constant)
+
+      Everything the rig animates falls out of that one line (see the script).
+
+      -------------------------------------------------------------------
+      WHAT THIS PRIMITIVE REQUIRES OF ITS CONTENT
+      -------------------------------------------------------------------
+
+      DEPTH. A flat element gains nothing from a dolly zoom -- with one
+      layer there is no background to collapse and the move is invisible.
+      Content dropped into #dz-rig MUST be layered or genuinely 3D:
+
+        * The SUBJECT sits on the z = 0 plane -- `translateZ(0)`. That is
+          the plane the solve holds; anything you want frame-locked goes
+          there and nowhere else.
+        * BACKGROUND layers get `translateZ(-N px)`, N > 0, at least two or
+          three distinct depths (this demo ships five arches plus a back
+          wall). More separation = stronger effect.
+        * Everything inside #dz-rig must keep `transform-style: preserve-3d`
+          on its ancestors and must NOT sit behind `overflow: hidden`, or
+          the browser flattens the scene and the depth disappears.
+        * Keep every layer at a depth where `d + N > 0` for the whole move,
+          i.e. no layer in front of the camera's closest approach.
+
+      -------------------------------------------------------------------
+      DETERMINISM
+      -------------------------------------------------------------------
+
+      State at frame N is computed from N alone. d(t) is a lerp of the
+      eased tween progress, P is solved from d, and both are written by a
+      property setter on the tweened driver object. Nothing accumulates,
+      nothing reads a clock, and no frame depends on the frame before it.
+      (The setter matters: `tl.eventCallback("onUpdate", ...)` does NOT
+      fire on `tl.seek()`, so anything driven that way freezes on frame 0.)
+    -->
+    <div
+      id="dz-root"
+      data-composition-id="camera-dolly-zoom"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <style>
+        #dz-root {
+          width: 1920px;
+          height: 1080px;
+          position: relative;
+          overflow: hidden;
+          background: #0b1020;
+          font-family: Inter, sans-serif;
+        }
+
+        /* The camera. `perspective` is the focal length and is solved from
+           the dolly distance every frame -- see the script. */
+        #dz-stage {
+          position: absolute;
+          inset: 0;
+          perspective-origin: 50% 50%;
+        }
+
+        /* The rig root. Carries the camera's z offset so the subject plane
+           always sits exactly `d` in front of the camera. */
+        #dz-rig {
+          position: absolute;
+          inset: 0;
+          transform-style: preserve-3d;
+        }
+
+        /* --- authored depth layers ------------------------------------ */
+
+        .dz-arch {
+          position: absolute;
+          left: -140px;
+          top: -80px;
+          width: 2200px;
+          height: 1240px;
+          border: 16px solid #465280;
+          border-radius: 8px;
+          transform-style: preserve-3d;
+        }
+
+        #dz-backwall {
+          position: absolute;
+          left: -3040px;
+          top: -1710px;
+          width: 8000px;
+          height: 4500px;
+          background: #10162c;
+          transform-style: preserve-3d;
+        }
+
+        /* Bright doorway on the back wall -- the layer whose on-screen size
+           changes while the subject's does not. */
+        #dz-portal {
+          position: absolute;
+          left: 3300px;
+          top: 1850px;
+          width: 1400px;
+          height: 1500px;
+          background: #cfe4ff;
+        }
+
+        /* --- the subject: z = 0, the plane the solve holds ------------- */
+
+        #dz-subject {
+          position: absolute;
+          left: 840px;
+          top: 300px;
+          width: 240px;
+          height: 620px;
+          transform-style: preserve-3d;
+        }
+        .dz-fig-head {
+          width: 120px;
+          height: 120px;
+          margin: 0 auto;
+          border-radius: 50%;
+          background: #f2b134;
+        }
+        .dz-fig-body {
+          width: 240px;
+          height: 470px;
+          margin-top: 30px;
+          border-radius: 120px 120px 10px 10px;
+          background: #f2b134;
+        }
+
+        /* --- flat overlay (outside the 3D rig) ------------------------- */
+
+        .dz-label {
+          position: absolute;
+          left: 64px;
+          bottom: 56px;
+          padding: 14px 22px;
+          border-radius: 8px;
+          background: #0b1020;
+          color: #e9eeff;
+          font-size: 26px;
+          letter-spacing: 0.14em;
+          text-transform: uppercase;
+        }
+      </style>
+
+      <div id="dz-stage" class="clip" data-start="0" data-duration="4" data-track-index="0">
+        <div id="dz-rig">
+          <div id="dz-backwall" data-layout-allow-overflow style="transform: translateZ(-3200px)">
+            <div id="dz-portal"></div>
+          </div>
+
+          <div
+            class="dz-arch"
+            data-layout-allow-overflow
+            style="transform: translateZ(-2360px); border-color: #384166"
+          ></div>
+          <div
+            class="dz-arch"
+            data-layout-allow-overflow
+            style="transform: translateZ(-1720px); border-color: #465280"
+          ></div>
+          <div
+            class="dz-arch"
+            data-layout-allow-overflow
+            style="transform: translateZ(-1120px); border-color: #57669c"
+          ></div>
+          <div
+            class="dz-arch"
+            data-layout-allow-overflow
+            style="transform: translateZ(-560px); border-color: #6b7cb8"
+          ></div>
+          <div
+            class="dz-arch"
+            data-layout-allow-overflow
+            style="transform: translateZ(0px); border-color: #8194d4"
+          ></div>
+
+          <div id="dz-subject" style="transform: translateZ(0px)">
+            <div class="dz-fig-head"></div>
+            <div class="dz-fig-body"></div>
+          </div>
+        </div>
+      </div>
+
+      <div class="dz-label">Dolly zoom &middot; d &times; tan(fov/2) = const</div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      (function () {
+        var DEFAULTS = {
+          direction: "out",
+          strength: 2,
+          subjectDistance: 1400,
+          easing: "power2.inOut",
+        };
+        var declared =
+          window.__hyperframes && window.__hyperframes.getVariables
+            ? window.__hyperframes.getVariables()
+            : {};
+        var vars = Object.assign({}, DEFAULTS, declared);
+
+        function clamp(value, lo, hi, fallback) {
+          var n = Number(value);
+          if (!isFinite(n)) return fallback;
+          return Math.min(hi, Math.max(lo, n));
+        }
+        function oneOf(value, allowed, fallback) {
+          return allowed.indexOf(String(value)) >= 0 ? String(value) : fallback;
+        }
+
+        var direction = oneOf(vars.direction, ["in", "out"], DEFAULTS.direction);
+        var strength = clamp(vars.strength, 1.1, 4, DEFAULTS.strength);
+        var ease = oneOf(
+          vars.easing,
+          ["none", "sine.inOut", "power1.inOut", "power2.inOut", "power3.inOut"],
+          DEFAULTS.easing,
+        );
+
+        // d0 = camera-to-subject distance at the start of the move (px).
+        // d1 = distance at the end. "out" pulls the camera back and zooms in;
+        // "in" pushes the camera forward and zooms out.
+        var d0 = clamp(vars.subjectDistance, 600, 3000, DEFAULTS.subjectDistance);
+        var d1 = direction === "in" ? d0 / strength : d0 * strength;
+
+        // ---- the solve --------------------------------------------------
+        // Subject size is fixed iff  d * tan(FOV/2) = const. With CSS 3D,
+        // tan(FOV/2) = (width/2) / perspective, so that invariant is exactly
+        // perspective / distance = SUBJECT_SCALE. Focal length is therefore
+        // derived from the dolly, never animated alongside it.
+        var SUBJECT_SCALE = 1; // subject renders 1:1 => its plane is z = 0
+
+        var stage = document.getElementById("dz-stage");
+        var rig = document.getElementById("dz-rig");
+
+        function applyCamera(u) {
+          var d = d0 + (d1 - d0) * u; // dolly -- pure function of u
+          var P = SUBJECT_SCALE * d; // focal length solved from d
+          var camZ = P - d; // put the subject plane at camera distance d
+          stage.style.perspective = P + "px";
+          rig.style.transform = "translateZ(" + camZ + "px)";
+        }
+
+        // GSAP suppresses timeline-level onUpdate during seek(), so the camera
+        // is driven by a property setter on the tweened object instead: that
+        // fires on every render, seeks included.
+        var camera = {
+          _u: 0,
+          get u() {
+            return this._u;
+          },
+          set u(value) {
+            this._u = value;
+            applyCamera(value);
+          },
+        };
+
+        applyCamera(0);
+
+        var tl = gsap.timeline({ paused: true });
+        tl.to(camera, { u: 1, duration: 4, ease: ease }, 0);
+        window.__timelines["camera-dolly-zoom"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/blocks/camera-dolly-zoom/registry-item.json b/registry/blocks/camera-dolly-zoom/registry-item.json
new file mode 100644
index 0000000000..8d21f57b38
--- /dev/null
+++ b/registry/blocks/camera-dolly-zoom/registry-item.json
@@ -0,0 +1,64 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "camera-dolly-zoom",
+  "type": "hyperframes:block",
+  "title": "Dolly Zoom (Vertigo Shot)",
+  "description": "Camera tracks toward or away from the subject while the field of view changes the opposite way, so the subject holds its frame size while the background collapses behind it or rushes in. Focal length is solved from dolly distance every frame against d * tan(FOV/2) = const, not keyframed beside it. Requires depth: the subject sits on the z = 0 plane and the content behind it must be layered or genuinely 3D (translateZ at two or more distinct depths) -- a flat element gains nothing from this move.",
+  "tags": ["camera", "depth", "3d", "cinematic"],
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 4,
+  "variables": [
+    {
+      "id": "direction",
+      "type": "enum",
+      "label": "Dolly direction",
+      "default": "out",
+      "options": [
+        { "value": "out", "label": "Dolly out + zoom in (background rushes in)" },
+        { "value": "in", "label": "Dolly in + zoom out (background falls away)" }
+      ]
+    },
+    {
+      "id": "strength",
+      "type": "number",
+      "label": "Move strength (end / start distance ratio)",
+      "default": 2,
+      "min": 1.1,
+      "max": 4,
+      "step": 0.1
+    },
+    {
+      "id": "subjectDistance",
+      "type": "number",
+      "label": "Camera-to-subject distance at the start of the move",
+      "default": 1400,
+      "min": 600,
+      "max": 3000,
+      "step": 50,
+      "unit": "px"
+    },
+    {
+      "id": "easing",
+      "type": "enum",
+      "label": "Dolly easing",
+      "default": "power2.inOut",
+      "options": [
+        { "value": "none", "label": "Linear" },
+        { "value": "sine.inOut", "label": "Sine in-out" },
+        { "value": "power1.inOut", "label": "Power1 in-out" },
+        { "value": "power2.inOut", "label": "Power2 in-out" },
+        { "value": "power3.inOut", "label": "Power3 in-out" }
+      ]
+    }
+  ],
+  "files": [
+    {
+      "path": "camera-dolly-zoom.html",
+      "target": "compositions/camera-dolly-zoom.html",
+      "type": "hyperframes:composition"
+    }
+  ]
+}
diff --git a/registry/blocks/code-highlight/code-highlight.html b/registry/blocks/code-highlight/code-highlight.html
index 02661a5661..1d6dd76e94 100644
--- a/registry/blocks/code-highlight/code-highlight.html
+++ b/registry/blocks/code-highlight/code-highlight.html
@@ -536,9 +536,6 @@
         id: "code-highlight",
         effect: "highlight",
         seq: "feature",
-        // `line` is ZERO-BASED: line: 1 highlights the SECOND displayed line
-        // (gutter 2). Note code-scroll's target is 1-based — don't carry a
-        // value between the two blocks without re-checking it.
         line: 1,
         duration: 5,
       };
diff --git a/registry/blocks/code-highlight/registry-item.json b/registry/blocks/code-highlight/registry-item.json
index bf92c5d1ac..2c37e03407 100644
--- a/registry/blocks/code-highlight/registry-item.json
+++ b/registry/blocks/code-highlight/registry-item.json
@@ -3,7 +3,7 @@
   "name": "code-highlight",
   "type": "hyperframes:block",
   "title": "Code Highlight Sweep",
-  "description": "A highlight band sweeps across a target line while the surrounding context dims — draws the eye to one line. `line` is 0-based: `line: 1` targets the second displayed line (unlike code-scroll, whose target is 1-based).",
+  "description": "A highlight band sweeps across a target line while the surrounding context dims — draws the eye to one line.",
   "dimensions": {
     "width": 1920,
     "height": 1080
diff --git a/registry/blocks/code-snippet-apple-terminal-basic/registry-item.json b/registry/blocks/code-snippet-apple-terminal-basic/registry-item.json
index f2ac6c776a..f8b623ee6a 100644
--- a/registry/blocks/code-snippet-apple-terminal-basic/registry-item.json
+++ b/registry/blocks/code-snippet-apple-terminal-basic/registry-item.json
@@ -18,6 +18,7 @@
     }
   ],
   "preview": {
-    "video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-basic.mp4"
+    "video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-basic.mp4",
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-basic.png"
   }
 }
diff --git a/registry/blocks/code-snippet-apple-terminal-clear-dark/registry-item.json b/registry/blocks/code-snippet-apple-terminal-clear-dark/registry-item.json
index 1f0d99d780..5f5e66377e 100644
--- a/registry/blocks/code-snippet-apple-terminal-clear-dark/registry-item.json
+++ b/registry/blocks/code-snippet-apple-terminal-clear-dark/registry-item.json
@@ -18,6 +18,7 @@
     }
   ],
   "preview": {
-    "video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-clear-dark.mp4"
+    "video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-clear-dark.mp4",
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-clear-dark.png"
   }
 }
diff --git a/registry/blocks/code-snippet-apple-terminal-clear-light/registry-item.json b/registry/blocks/code-snippet-apple-terminal-clear-light/registry-item.json
index c637a2e9ff..0605c1adb3 100644
--- a/registry/blocks/code-snippet-apple-terminal-clear-light/registry-item.json
+++ b/registry/blocks/code-snippet-apple-terminal-clear-light/registry-item.json
@@ -18,6 +18,7 @@
     }
   ],
   "preview": {
-    "video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-clear-light.mp4"
+    "video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-clear-light.mp4",
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-clear-light.png"
   }
 }
diff --git a/registry/blocks/code-snippet-apple-terminal-grass/registry-item.json b/registry/blocks/code-snippet-apple-terminal-grass/registry-item.json
index 8405e8c7f1..646d956fe0 100644
--- a/registry/blocks/code-snippet-apple-terminal-grass/registry-item.json
+++ b/registry/blocks/code-snippet-apple-terminal-grass/registry-item.json
@@ -18,6 +18,7 @@
     }
   ],
   "preview": {
-    "video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-grass.mp4"
+    "video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-grass.mp4",
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-grass.png"
   }
 }
diff --git a/registry/blocks/code-snippet-apple-terminal-homebrew/registry-item.json b/registry/blocks/code-snippet-apple-terminal-homebrew/registry-item.json
index 26f5dd29a8..baa4f3576b 100644
--- a/registry/blocks/code-snippet-apple-terminal-homebrew/registry-item.json
+++ b/registry/blocks/code-snippet-apple-terminal-homebrew/registry-item.json
@@ -18,6 +18,7 @@
     }
   ],
   "preview": {
-    "video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-homebrew.mp4"
+    "video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-homebrew.mp4",
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-homebrew.png"
   }
 }
diff --git a/registry/blocks/code-snippet-apple-terminal-man-page/registry-item.json b/registry/blocks/code-snippet-apple-terminal-man-page/registry-item.json
index 9cf3889791..2eb8a610ed 100644
--- a/registry/blocks/code-snippet-apple-terminal-man-page/registry-item.json
+++ b/registry/blocks/code-snippet-apple-terminal-man-page/registry-item.json
@@ -18,6 +18,7 @@
     }
   ],
   "preview": {
-    "video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-man-page.mp4"
+    "video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-man-page.mp4",
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-man-page.png"
   }
 }
diff --git a/registry/blocks/code-snippet-apple-terminal-novel/registry-item.json b/registry/blocks/code-snippet-apple-terminal-novel/registry-item.json
index a2ca68cffb..bd423554b3 100644
--- a/registry/blocks/code-snippet-apple-terminal-novel/registry-item.json
+++ b/registry/blocks/code-snippet-apple-terminal-novel/registry-item.json
@@ -18,6 +18,7 @@
     }
   ],
   "preview": {
-    "video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-novel.mp4"
+    "video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-novel.mp4",
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-novel.png"
   }
 }
diff --git a/registry/blocks/code-snippet-apple-terminal-ocean/registry-item.json b/registry/blocks/code-snippet-apple-terminal-ocean/registry-item.json
index 6b8282e9cc..d10791a32f 100644
--- a/registry/blocks/code-snippet-apple-terminal-ocean/registry-item.json
+++ b/registry/blocks/code-snippet-apple-terminal-ocean/registry-item.json
@@ -18,6 +18,7 @@
     }
   ],
   "preview": {
-    "video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-ocean.mp4"
+    "video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-ocean.mp4",
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-ocean.png"
   }
 }
diff --git a/registry/blocks/code-snippet-apple-terminal-pro/registry-item.json b/registry/blocks/code-snippet-apple-terminal-pro/registry-item.json
index d5a9a94a8e..2dae41cc36 100644
--- a/registry/blocks/code-snippet-apple-terminal-pro/registry-item.json
+++ b/registry/blocks/code-snippet-apple-terminal-pro/registry-item.json
@@ -18,6 +18,7 @@
     }
   ],
   "preview": {
-    "video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-pro.mp4"
+    "video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-pro.mp4",
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-pro.png"
   }
 }
diff --git a/registry/blocks/code-snippet-apple-terminal-red-sands/registry-item.json b/registry/blocks/code-snippet-apple-terminal-red-sands/registry-item.json
index 06440ed0c4..d3f08fb270 100644
--- a/registry/blocks/code-snippet-apple-terminal-red-sands/registry-item.json
+++ b/registry/blocks/code-snippet-apple-terminal-red-sands/registry-item.json
@@ -18,6 +18,7 @@
     }
   ],
   "preview": {
-    "video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-red-sands.mp4"
+    "video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-red-sands.mp4",
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-red-sands.png"
   }
 }
diff --git a/registry/blocks/code-snippet-apple-terminal-silver-aerogel/registry-item.json b/registry/blocks/code-snippet-apple-terminal-silver-aerogel/registry-item.json
index 39155d876a..c42a2797e3 100644
--- a/registry/blocks/code-snippet-apple-terminal-silver-aerogel/registry-item.json
+++ b/registry/blocks/code-snippet-apple-terminal-silver-aerogel/registry-item.json
@@ -18,6 +18,7 @@
     }
   ],
   "preview": {
-    "video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-silver-aerogel.mp4"
+    "video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-silver-aerogel.mp4",
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-silver-aerogel.png"
   }
 }
diff --git a/registry/blocks/code-snippet-apple-terminal-solid-colors/registry-item.json b/registry/blocks/code-snippet-apple-terminal-solid-colors/registry-item.json
index 93a4e88be7..b9c41e2f89 100644
--- a/registry/blocks/code-snippet-apple-terminal-solid-colors/registry-item.json
+++ b/registry/blocks/code-snippet-apple-terminal-solid-colors/registry-item.json
@@ -18,6 +18,7 @@
     }
   ],
   "preview": {
-    "video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-solid-colors.mp4"
+    "video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-solid-colors.mp4",
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-solid-colors.png"
   }
 }
diff --git a/registry/blocks/cosmic-orb/cosmic-orb.html b/registry/blocks/cosmic-orb/cosmic-orb.html
new file mode 100644
index 0000000000..97cff15709
--- /dev/null
+++ b/registry/blocks/cosmic-orb/cosmic-orb.html
@@ -0,0 +1,431 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Cosmic Orb</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #000;
+        overflow: hidden;
+      }
+      #co-root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #co-backdrop {
+        position: absolute;
+        inset: 0;
+        background: #04040a;
+      }
+      #co-canvas {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="co-root"
+      data-composition-id="cosmic-orb"
+      data-root="true"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="10"
+      data-composition-variables='[
+        {"id":"hue","type":"number","label":"Nebula hue","default":268,"min":0,"max":360,"step":1,"unit":"deg"},
+        {"id":"accent","type":"number","label":"Accent hue","default":196,"min":0,"max":360,"step":1,"unit":"deg"},
+        {"id":"spin","type":"number","label":"Spin rate","default":0.035,"min":0,"max":0.5,"step":0.005,"unit":"turns/s"},
+        {"id":"stars","type":"number","label":"Star density","default":1,"min":0,"max":2,"step":0.05},
+        {"id":"glow","type":"number","label":"Glow intensity","default":1,"min":0,"max":2,"step":0.05},
+        {"id":"size","type":"number","label":"Orb size","default":0.86,"min":0.2,"max":1.2,"step":0.01},
+        {"id":"pulse","type":"number","label":"Beat pulse","default":0,"min":0,"max":1,"step":0.01},
+        {"id":"pulseEnvelope","type":"string","label":"Beat pulse envelope (comma-separated 0-1 samples)","default":"","placeholder":"0,0.2,1,0.4,0"},
+        {"id":"backdrop","type":"color","label":"Backdrop","default":"#04040a"}
+      ]'
+    >
+      <div id="co-backdrop"></div>
+      <canvas id="co-canvas" width="1920" height="1080"></canvas>
+
+      <!-- Driver clip: gives HyperFrames a timed element to own on track 0. -->
+      <div
+        id="co-drv"
+        class="clip"
+        data-start="0"
+        data-duration="10"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+
+    <script>
+      (function () {
+        var DUR = 10;
+        var W = 1920;
+        var H = 1080;
+
+        var ROOT = document.getElementById("co-root");
+        var CS = getComputedStyle(ROOT);
+
+        // `data-composition-variables` is the single owner of every declared
+        // default — parse it rather than repeating each default a second time
+        // in JS. `window.__hyperframes` is NOT guaranteed to exist yet when this
+        // inline script runs, so it can only ever be an override, never the
+        // source. Precedence: host CSS custom property, runtime variable bag,
+        // declared default.
+        var DECL = {};
+        JSON.parse(ROOT.getAttribute("data-composition-variables") || "[]").forEach(function (v) {
+          DECL[v.id] = v.default;
+        });
+        var HF = window.__hyperframes;
+        var V = (HF && HF.getVariables && HF.getVariables()) || {};
+
+        function raw(id) {
+          var css = CS.getPropertyValue("--" + id.toLowerCase()).trim();
+          if (css !== "") return css;
+          if (V[id] !== undefined && V[id] !== "") return V[id];
+          return DECL[id];
+        }
+        function num(id) {
+          var n = parseFloat(raw(id));
+          return isFinite(n) ? n : 0;
+        }
+        function str(id) {
+          var s = raw(id);
+          return typeof s === "string" ? s.trim() : "";
+        }
+
+        var HUE = num("hue");
+        var ACCENT = num("accent");
+        var SPIN = num("spin");
+        var STARS = num("stars");
+        var GLOW = num("glow");
+        var SIZE = num("size");
+        var PULSE = num("pulse");
+        var BACKDROP = str("backdrop");
+
+        document.getElementById("co-backdrop").style.background = BACKDROP;
+
+        // Beat hook. A precomputed envelope (comma-separated 0-1 samples spread
+        // evenly across the clip) is sampled closed-form at time t — no audio
+        // analysis, no accumulator. Empty envelope => the flat `pulse` value.
+        var ENV = str("pulseEnvelope")
+          .split(",")
+          .map(function (s) {
+            return parseFloat(s);
+          })
+          .filter(function (n) {
+            return isFinite(n);
+          });
+
+        function pulseAt(t) {
+          if (ENV.length === 0) return PULSE;
+          if (ENV.length === 1) return ENV[0];
+          var x = Math.min(1, Math.max(0, t / DUR)) * (ENV.length - 1);
+          var i = Math.floor(x);
+          var j = Math.min(i + 1, ENV.length - 1);
+          return ENV[i] + (ENV[j] - ENV[i]) * (x - i);
+        }
+
+        var canvas = document.getElementById("co-canvas");
+        var gl =
+          canvas.getContext("webgl", {
+            alpha: true,
+            antialias: false,
+            depth: false,
+            stencil: false,
+            preserveDrawingBuffer: true,
+            powerPreference: "high-performance",
+          }) ||
+          canvas.getContext("experimental-webgl", {
+            alpha: true,
+            preserveDrawingBuffer: true,
+          });
+
+        var VERT = [
+          "attribute vec2 aPos;",
+          "void main() { gl_Position = vec4(aPos, 0.0, 1.0); }",
+        ].join("\n");
+
+        var FRAG = [
+          "precision highp float;",
+          "uniform vec2 uRes;",
+          "uniform float uTime;",
+          "uniform float uRadius;",
+          "uniform float uSpin;",
+          "uniform float uHue;",
+          "uniform float uAccent;",
+          "uniform float uStars;",
+          "uniform float uGlow;",
+          "uniform float uPulse;",
+          "const float TAU = 6.28318531;",
+          "",
+          "// One cheap hash for every random-looking thing in here.",
+          "float h1(float x) { return fract(sin(x * 127.1) * 43758.5453); }",
+          "float h2(vec2 p) { return h1(dot(p, vec2(1.0, 157.31))); }",
+          "",
+          "vec3 hue2rgb(float h) {",
+          "  return clamp(abs(mod(h * 6.0 + vec3(0.0, 4.0, 2.0), 6.0) - 3.0) - 1.0, 0.0, 1.0);",
+          "}",
+          "",
+          "vec3 rotX(vec3 p, float a) { float c = cos(a), s = sin(a); return vec3(p.x, c * p.y - s * p.z, s * p.y + c * p.z); }",
+          "vec3 rotY(vec3 p, float a) { float c = cos(a), s = sin(a); return vec3(c * p.x + s * p.z, p.y, -s * p.x + c * p.z); }",
+          "vec3 rotZ(vec3 p, float a) { float c = cos(a), s = sin(a); return vec3(c * p.x - s * p.y, s * p.x + c * p.y, p.z); }",
+          "",
+          "vec3 safeDir(vec3 v) {",
+          "  float l = dot(v, v);",
+          "  if (l < 1e-6) return vec3(0.0, 0.0, -1.0);",
+          "  return v * inversesqrt(l);",
+          "}",
+          "",
+          "// Fixed axial tilt, then spin about the tilted polar axis.",
+          "vec3 toBody(vec3 n, float spin) { return rotY(rotZ(rotX(n, -0.34), 0.42), -spin); }",
+          "vec2 lonlat(vec3 d) { return vec2(atan(d.x, d.z), asin(clamp(d.y, -1.0, 1.0))); }",
+          "",
+          "float dens(float base) { return clamp(1.0 - (1.0 - base) * uStars, 0.0, 1.0); }",
+          "",
+          "// One star size-class: cell grid, seeded jitter, soft round core.",
+          "float starField(vec2 q, float freq, float base, float rad) {",
+          "  vec2 g = q * freq;",
+          "  vec2 id = floor(g);",
+          "  float h = h2(id);",
+          "  if (h < dens(base)) return 0.0;",
+          "  vec2 c = vec2(h2(id + vec2(3.7, 1.3)), h2(id + vec2(9.1, 5.5)));",
+          "  float d = length(fract(g) - c);",
+          "  float core = smoothstep(rad, 0.0, d);",
+          "  // Twinkle: a per-star phase driven straight off uTime, no accumulator.",
+          "  float tw = 0.62 + 0.38 * sin(uTime * 2.4 + h * 53.7);",
+          "  return core * core * (0.45 + 0.55 * h1(h * 91.7)) * tw;",
+          "}",
+          "",
+          "// 4-point diffraction glare, only worth paying for on the brightest class.",
+          "float starGlare(vec2 q, float freq, float base) {",
+          "  vec2 g = q * freq;",
+          "  vec2 id = floor(g);",
+          "  float h = h2(id);",
+          "  if (h < dens(base)) return 0.0;",
+          "  vec2 c = vec2(h2(id + vec2(3.7, 1.3)), h2(id + vec2(9.1, 5.5)));",
+          "  vec2 dv = abs(fract(g) - c);",
+          "  float hx = exp(-dv.x * 70.0) * exp(-dv.y * 9.0);",
+          "  float hy = exp(-dv.y * 70.0) * exp(-dv.x * 9.0);",
+          "  return max(hx, hy) * 0.45;",
+          "}",
+          "",
+          "// Three size-classes at ~6 / 11 / 19 cell frequency.",
+          "float starsAll(vec2 q, float gain) {",
+          "  float s = starField(q, 6.0, 0.958, 0.20);",
+          "  s += starGlare(q, 6.0, 0.958);",
+          "  s += starField(q, 11.0, 0.920, 0.18) * 0.95;",
+          "  s += starField(q, 19.0, 0.865, 0.17) * 0.75;",
+          "  return s * gain;",
+          "}",
+          "",
+          "vec3 nebula(vec2 q) {",
+          "  // Two sin-field turbulence layers.",
+          "  float t1 = sin(q.x * 3.1 + sin(q.y * 2.7) * 1.9) * sin(q.y * 4.3 + sin(q.x * 1.7) * 2.3);",
+          "  float t2 = sin(q.x * 7.9 + sin(q.y * 5.1) * 1.3) * sin(q.y * 9.7 + sin(q.x * 4.4) * 1.1);",
+          "  float turb = t1 * 0.66 + t2 * 0.34;",
+          "",
+          "  // Galaxy bands, warped by the turbulence.",
+          "  float band = sin(q.y * 3.2 + turb * 1.7 + q.x * 0.55);",
+          "  float bands = pow(max(0.0, band * 0.5 + 0.5), 3.2);",
+          "",
+          "  // Dust lanes: broad darkened swathes, not a thin curve.",
+          "  float lane = sin(q.y * 2.9 + q.x * 1.3 + t1 * 1.6);",
+          "  float dust = 0.22 + 0.78 * smoothstep(-0.45, 0.75, lane);",
+          "",
+          "  // Core bulge.",
+          "  float dc = length(vec2((q.x - 0.55) * 0.5, (q.y + 0.12) * 1.1));",
+          "  float core = exp(-dc * dc * 2.6);",
+          "",
+          "  // Two pocket glows.",
+          "  float dA = length(vec2((q.x + 1.95) * 0.62, (q.y - 0.52) * 1.45));",
+          "  float dB = length(vec2((q.x - 2.35) * 0.55, (q.y + 0.78) * 1.30));",
+          "  float pA = exp(-dA * dA * 4.0);",
+          "  float pB = exp(-dB * dB * 5.0);",
+          "",
+          "  vec3 cNeb = hue2rgb(uHue / 360.0);",
+          "  vec3 cAcc = hue2rgb(uAccent / 360.0);",
+          "  vec3 cWarm = hue2rgb(uHue / 360.0 + 0.07);",
+          "",
+          "  vec3 col = mix(cNeb, cWarm, 0.5 + 0.5 * turb) * bands * dust * 0.17;",
+          "  col += mix(cNeb, vec3(1.0), 0.50) * core * dust * 0.13;",
+          "  col += mix(cAcc, vec3(1.0), 0.60) * pA * 0.30 * uGlow;",
+          "  col += mix(cNeb, vec3(1.0), 0.50) * pB * 0.24 * uGlow;",
+          "  return col;",
+          "}",
+          "",
+          "void main() {",
+          "  vec2 p = (gl_FragCoord.xy - uRes * 0.5) / uRadius;",
+          "  float r = length(p);",
+          "  float aa = 1.4 / uRadius;",
+          "  float spin = TAU * uSpin * uTime;",
+          "",
+          "  vec3 cNeb = hue2rgb(uHue / 360.0);",
+          "  vec3 cAcc = hue2rgb(uAccent / 360.0);",
+          "",
+          "  float mask = smoothstep(1.0 + aa, 1.0 - aa, r);",
+          "  float halo = exp(-max(0.0, r - 1.0) * 13.0) * (1.0 - mask);",
+          "",
+          "  vec3 body = vec3(0.0);",
+          "  if (mask > 0.001) {",
+          "    float rc = min(r, 1.0);",
+          "    // Analytic sphere: the normal falls straight out of z = sqrt(1 - r^2).",
+          "    float z = sqrt(max(0.0, 1.0 - rc * rc));",
+          "    vec3 N = vec3(p.x, p.y, z);",
+          "    vec2 q = lonlat(toBody(safeDir(N), spin));",
+          "",
+          "    float gain = 0.9 + 2.6 * uPulse;",
+          "    body = nebula(q);",
+          "    body += vec3(1.0) * starsAll(q, gain) * (0.95 + 0.15 * uGlow);",
+          "",
+          "    // Limb darkening.",
+          "    body *= mix(0.32, 1.0, pow(z, 0.5));",
+          "",
+          "    // Refract-sampled back layer, split per channel: the chromatic",
+          "    // aberration that reads as glass at the limb.",
+          "    vec3 I = vec3(0.0, 0.0, -1.0);",
+          "    vec3 dR = safeDir(refract(I, N, 1.0 / 1.09));",
+          "    vec3 dG = safeDir(refract(I, N, 1.0 / 1.13));",
+          "    vec3 dB = safeDir(refract(I, N, 1.0 / 1.17));",
+          "    vec2 qR = lonlat(toBody(dR, spin));",
+          "    vec2 qG = lonlat(toBody(dG, spin));",
+          "    vec2 qB = lonlat(toBody(dB, spin));",
+          "    vec3 back = vec3(starsAll(qR, gain), starsAll(qG, gain), starsAll(qB, gain));",
+          "    float fres = pow(1.0 - z, 1.8);",
+          "    body += back * fres * 2.2;",
+          "    body += nebula(qG) * fres * 0.8;",
+          "",
+          "    // Aurora sheen riding the glass shell.",
+          "    float ang = atan(p.y, p.x);",
+          "    float sheen = smoothstep(0.72, 0.99, r) * smoothstep(1.0, 0.90, r);",
+          "    float w = 0.5 + 0.5 * sin(ang * 2.0 + spin * 1.6);",
+          "    body += (mix(cNeb, cAcc, w) * 0.55 + vec3(0.16)) * sheen * 0.30 * uGlow;",
+          "",
+          "    // Three speculars, fixed in screen space: the key light does not spin.",
+          "    vec2 a1 = p - vec2(-0.34, 0.62);",
+          "    vec2 a2 = p - vec2(0.58, 0.60);",
+          "    vec2 a3 = p - vec2(0.24, -0.80);",
+          "    float sp = exp(-dot(a1, a1) * 30.0) * 0.30;",
+          "    sp += exp(-dot(a2, a2) * 150.0) * 0.80;",
+          "    sp += exp(-dot(a3, a3) * 70.0) * 0.30;",
+          "    body += vec3(1.0) * sp * (0.30 + 0.70 * pow(1.0 - z, 1.5)) * uGlow;",
+          "",
+          "    // Fresnel void glow hugging the inside of the rim.",
+          "    body += mix(cAcc, vec3(1.0), 0.4) * pow(1.0 - z, 6.0) * 0.30 * uGlow;",
+          "  }",
+          "",
+          "  vec3 haloCol = mix(cNeb, cAcc, 0.35);",
+          "  vec3 outCol = body * mask + haloCol * halo * 0.22 * uGlow;",
+          "  float outA = clamp(mask + halo * 0.16 * uGlow, 0.0, 1.0);",
+          "  gl_FragColor = vec4(clamp(outCol, 0.0, 4.0), outA);",
+          "}",
+        ].join("\n");
+
+        var uni = {};
+        var ready = false;
+
+        function compile(type, src) {
+          var sh = gl.createShader(type);
+          gl.shaderSource(sh, src);
+          gl.compileShader(sh);
+          if (!gl.getShaderParameter(sh, gl.COMPILE_STATUS)) {
+            throw new Error("cosmic-orb shader: " + gl.getShaderInfoLog(sh));
+          }
+          return sh;
+        }
+
+        if (gl) {
+          var prog = gl.createProgram();
+          gl.attachShader(prog, compile(gl.VERTEX_SHADER, VERT));
+          gl.attachShader(prog, compile(gl.FRAGMENT_SHADER, FRAG));
+          gl.linkProgram(prog);
+          if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {
+            throw new Error("cosmic-orb link: " + gl.getProgramInfoLog(prog));
+          }
+          gl.useProgram(prog);
+
+          var buf = gl.createBuffer();
+          gl.bindBuffer(gl.ARRAY_BUFFER, buf);
+          gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
+          var loc = gl.getAttribLocation(prog, "aPos");
+          gl.enableVertexAttribArray(loc);
+          gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0);
+
+          [
+            "uRes",
+            "uTime",
+            "uRadius",
+            "uSpin",
+            "uHue",
+            "uAccent",
+            "uStars",
+            "uGlow",
+            "uPulse",
+          ].forEach(function (n) {
+            uni[n] = gl.getUniformLocation(prog, n);
+          });
+
+          gl.viewport(0, 0, W, H);
+          gl.uniform2f(uni.uRes, W, H);
+          gl.uniform1f(uni.uRadius, (SIZE * H) / 2);
+          gl.uniform1f(uni.uSpin, SPIN);
+          gl.uniform1f(uni.uHue, HUE);
+          gl.uniform1f(uni.uAccent, ACCENT);
+          gl.uniform1f(uni.uStars, STARS);
+          gl.uniform1f(uni.uGlow, GLOW);
+          ready = true;
+        }
+
+        // Every frame is computed from t alone: spin is spin_rate * t, the
+        // pulse is sampled from the envelope at t. No accumulators, no clocks.
+        function draw(t) {
+          if (!ready) return;
+          gl.uniform1f(uni.uTime, t);
+          gl.uniform1f(uni.uPulse, pulseAt(t));
+          gl.clearColor(0, 0, 0, 0);
+          gl.clear(gl.COLOR_BUFFER_BIT);
+          gl.drawArrays(gl.TRIANGLES, 0, 3);
+          gl.flush();
+        }
+
+        window.__timelines = window.__timelines || {};
+        var tl = gsap.timeline({ paused: true });
+
+        // The canvas is repainted from a property SETTER, not from onUpdate:
+        // gsap's seek(t) suppresses events by default, so an onUpdate callback
+        // silently never fires on a scrub and the canvas freezes on frame 0.
+        // Tweened values are always written during render, suppressed or not,
+        // so this fires on every seek — and hands us the frame time directly.
+        var driver = { _t: 0 };
+        Object.defineProperty(driver, "t", {
+          get: function () {
+            return this._t;
+          },
+          set: function (v) {
+            this._t = v;
+            draw(v);
+          },
+        });
+        tl.to(driver, { t: DUR, duration: DUR, ease: "none" }, 0);
+        window.__timelines["cosmic-orb"] = tl;
+
+        draw(0);
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/blocks/cosmic-orb/registry-item.json b/registry/blocks/cosmic-orb/registry-item.json
new file mode 100644
index 0000000000..c754d26dfe
--- /dev/null
+++ b/registry/blocks/cosmic-orb/registry-item.json
@@ -0,0 +1,179 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "cosmic-orb",
+  "type": "hyperframes:block",
+  "title": "Cosmic Orb",
+  "description": "An iridescent soap-bubble planet: a slowly spinning sphere of nebula bands, dust lanes and twinkling stars wrapped in a refracting glass limb with chromatic aberration at the edge.",
+  "stability": "experimental",
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 10,
+  "tags": ["webgl", "shader", "background", "showcase", "3d"],
+  "variables": [
+    {
+      "id": "hue",
+      "type": "number",
+      "label": "Nebula hue",
+      "default": 268,
+      "min": 0,
+      "max": 360,
+      "step": 1,
+      "unit": "deg"
+    },
+    {
+      "id": "accent",
+      "type": "number",
+      "label": "Accent hue",
+      "default": 196,
+      "min": 0,
+      "max": 360,
+      "step": 1,
+      "unit": "deg"
+    },
+    {
+      "id": "spin",
+      "type": "number",
+      "label": "Spin rate",
+      "default": 0.035,
+      "min": 0,
+      "max": 0.5,
+      "step": 0.005,
+      "unit": "turns/s"
+    },
+    {
+      "id": "stars",
+      "type": "number",
+      "label": "Star density",
+      "default": 1,
+      "min": 0,
+      "max": 2,
+      "step": 0.05
+    },
+    {
+      "id": "glow",
+      "type": "number",
+      "label": "Glow intensity",
+      "default": 1,
+      "min": 0,
+      "max": 2,
+      "step": 0.05
+    },
+    {
+      "id": "size",
+      "type": "number",
+      "label": "Orb size",
+      "default": 0.86,
+      "min": 0.2,
+      "max": 1.2,
+      "step": 0.01
+    },
+    {
+      "id": "pulse",
+      "type": "number",
+      "label": "Beat pulse",
+      "default": 0,
+      "min": 0,
+      "max": 1,
+      "step": 0.01
+    },
+    {
+      "id": "pulseEnvelope",
+      "type": "string",
+      "label": "Beat pulse envelope (comma-separated 0-1 samples)",
+      "default": "",
+      "placeholder": "0,0.2,1,0.4,0"
+    },
+    {
+      "id": "backdrop",
+      "type": "color",
+      "label": "Backdrop",
+      "default": "#04040a"
+    }
+  ],
+  "files": [
+    {
+      "path": "cosmic-orb.html",
+      "target": "compositions/cosmic-orb.html",
+      "type": "hyperframes:composition"
+    }
+  ],
+  "params": [
+    {
+      "key": "--hue",
+      "label": "Nebula hue",
+      "type": "number",
+      "default": "268",
+      "min": 0,
+      "max": 360,
+      "step": 1
+    },
+    {
+      "key": "--accent",
+      "label": "Accent hue",
+      "type": "number",
+      "default": "196",
+      "min": 0,
+      "max": 360,
+      "step": 1
+    },
+    {
+      "key": "--spin",
+      "label": "Spin rate (turns per second)",
+      "type": "number",
+      "default": "0.035",
+      "min": 0,
+      "max": 0.5,
+      "step": 0.005
+    },
+    {
+      "key": "--stars",
+      "label": "Star density",
+      "type": "number",
+      "default": "1",
+      "min": 0,
+      "max": 2,
+      "step": 0.05
+    },
+    {
+      "key": "--glow",
+      "label": "Glow intensity",
+      "type": "number",
+      "default": "1",
+      "min": 0,
+      "max": 2,
+      "step": 0.05
+    },
+    {
+      "key": "--size",
+      "label": "Orb size (fraction of frame height)",
+      "type": "number",
+      "default": "0.86",
+      "min": 0.2,
+      "max": 1.2,
+      "step": 0.01
+    },
+    {
+      "key": "--pulse",
+      "label": "Beat pulse (0-1, flat value when no envelope is set)",
+      "type": "number",
+      "default": "0",
+      "min": 0,
+      "max": 1,
+      "step": 0.01
+    },
+    {
+      "key": "--pulseenvelope",
+      "label": "Beat pulse envelope: comma-separated 0-1 samples spread evenly across the clip",
+      "type": "text",
+      "default": ""
+    },
+    {
+      "key": "--backdrop",
+      "label": "Backdrop",
+      "type": "color",
+      "default": "#04040a"
+    }
+  ]
+}
diff --git a/registry/blocks/flowchart-vertical/flowchart-vertical.html b/registry/blocks/flowchart-vertical/flowchart-vertical.html
index 5f94cd4d3f..872a16d07e 100644
--- a/registry/blocks/flowchart-vertical/flowchart-vertical.html
+++ b/registry/blocks/flowchart-vertical/flowchart-vertical.html
@@ -414,10 +414,8 @@
           // 13. Hold
           tl.addLabel("hold5", "+=0.2");
 
-          // 14. Type correction: "Pythom" → "Python" — positioned relative to the "hold5"
-          // label. Reading tl.labels back is unavailable under the render compiler's GSAP
-          // proxy (it throws before the timeline is registered, leaving the block blank),
-          // so use GSAP's own label-relative position syntax instead.
+          // 14. Type correction: "Pythom" → "Python"
+          const typingStart = tl.labels["hold5"];
           const words = ["P", "Py", "Pyt", "Pyth", "Pytho", "Python"];
           words.forEach((word, i) => {
             tl.add(
@@ -425,18 +423,18 @@
                 if (pythonText)
                   pythonText.innerHTML = `Start with <span class="text-highlight">${word}</span>`;
               },
-              `hold5+=${i * 0.05}`,
+              typingStart + i * 0.05,
             );
           });
 
-          const typingEnd = words.length * 0.05;
+          const typingEnd = typingStart + words.length * 0.05;
           tl.add(() => {
             if (pythonText) pythonText.innerHTML = "Start with Python";
             gsap.set(S + " .squiggle-container", { opacity: 0 });
-          }, `hold5+=${typingEnd}`);
+          }, typingEnd);
 
           // 15. Hold
-          tl.addLabel("hold6", `hold5+=${typingEnd + 0.5}`);
+          tl.addLabel("hold6", typingEnd + 0.5);
 
           // 16. Cursor clicks away to deselect
           tl.to(S + " #cursor", { x: -1050, y: -1520, duration: 0.3, overwrite: "auto" }, "hold6");
diff --git a/registry/blocks/flowchart/flowchart.html b/registry/blocks/flowchart/flowchart.html
index 93941217a6..da31cbcac5 100644
--- a/registry/blocks/flowchart/flowchart.html
+++ b/registry/blocks/flowchart/flowchart.html
@@ -414,10 +414,8 @@
           // 13. Hold
           tl.addLabel("hold5", "+=0.2");
 
-          // 14. Type correction: "Pythom" → "Python" — positioned relative to the "hold5"
-          // label. Reading tl.labels back is unavailable under the render compiler's GSAP
-          // proxy (it throws before the timeline is registered, leaving the block blank),
-          // so use GSAP's own label-relative position syntax instead.
+          // 14. Type correction: "Pythom" → "Python"
+          const typingStart = tl.labels["hold5"];
           const words = ["P", "Py", "Pyt", "Pyth", "Pytho", "Python"];
           words.forEach((word, i) => {
             tl.add(
@@ -425,18 +423,18 @@
                 if (pythonText)
                   pythonText.innerHTML = `Start with <span class="text-highlight">${word}</span>`;
               },
-              `hold5+=${i * 0.05}`,
+              typingStart + i * 0.05,
             );
           });
 
-          const typingEnd = words.length * 0.05;
+          const typingEnd = typingStart + words.length * 0.05;
           tl.add(() => {
             if (pythonText) pythonText.innerHTML = "Start with Python";
             gsap.set(S + " .squiggle-container", { opacity: 0 });
-          }, `hold5+=${typingEnd}`);
+          }, typingEnd);
 
           // 15. Hold
-          tl.addLabel("hold6", `hold5+=${typingEnd + 0.5}`);
+          tl.addLabel("hold6", typingEnd + 0.5);
 
           // 16. Cursor clicks away to deselect
           tl.to(S + " #cursor", { x: -1420, y: -500, duration: 0.3, overwrite: "auto" }, "hold6");
diff --git a/registry/blocks/gallery-tunnel/gallery-tunnel.html b/registry/blocks/gallery-tunnel/gallery-tunnel.html
new file mode 100644
index 0000000000..82b2d766e8
--- /dev/null
+++ b/registry/blocks/gallery-tunnel/gallery-tunnel.html
@@ -0,0 +1,454 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Gallery Tunnel</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #000;
+        overflow: hidden;
+      }
+      #gt-root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #gt-backdrop {
+        position: absolute;
+        inset: 0;
+        background: #000000;
+      }
+      #gt-canvas {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+      }
+      /* Off-screen decode well: the <img> elements live in the DOM so the page
+         load event waits for them, but they are never composited themselves —
+         WebGL reads them as textures. The well is clipped to 1px; the images
+         inside keep their natural layout size on purpose, because texImage2D
+         uploads an <img> at its LAID-OUT size — sizing them down with CSS
+         uploads a 1x1 texture and every panel samples one dark pixel. */
+      #gt-assets {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1px;
+        height: 1px;
+        overflow: hidden;
+        opacity: 0;
+        pointer-events: none;
+      }
+    </style>
+  </head>
+  <body>
+    <!--
+      Content slots. Every panel in the corridor is a slot, and `images` fills a
+      share of them with your own artwork — drop the files in the project's
+      assets/ and list them, either by editing the `images` default below or from
+      the host composition:
+
+        <div
+          data-composition-id="gallery-tunnel"
+          data-composition-src="compositions/gallery-tunnel.html"
+          data-start="0" data-duration="12" data-track-index="0"
+          data-width="1920" data-height="1080"
+          style="--images: assets/shot-1.png, assets/shot-2.png, assets/shot-3.png; --imagemix: 0.7"
+        ></div>
+
+      Any number of images works; they are dealt to slots by hash, so one image
+      recurs at different depths rather than appearing once. Each is contain-fit
+      inside its slot, so a 16:9 screenshot keeps its aspect. `imageMix` sets the
+      image-vs-colour split (1 = every filled slot is an image), `fill` how many
+      slots are filled at all.
+    -->
+    <div
+      id="gt-root"
+      data-composition-id="gallery-tunnel"
+      data-root="true"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="12"
+      data-composition-variables='[
+        {"id":"images","type":"string","label":"Image slots: comma-separated paths, tiled into the panels (e.g. assets/shot-1.png,assets/shot-2.png)","default":"","placeholder":"assets/shot-1.png,assets/shot-2.png"},
+        {"id":"imageMix","type":"number","label":"Image share of filled slots (0 = all colour, 1 = all images)","default":0.5,"min":0,"max":1,"step":0.05},
+        {"id":"speed","type":"number","label":"Flight speed","default":3,"min":0,"max":8,"step":0.1,"unit":"segments/s"},
+        {"id":"palette","type":"string","label":"Slab palette: comma-separated hex colours","default":"#FF6A00,#AB54F7,#EA3737,#0072E3,#00AA3C,#FFB200"},
+        {"id":"grid","type":"number","label":"Grid density: slots per wall face per axis (2 = 4 per face, 16 per segment)","default":2,"min":1,"max":4,"step":1},
+        {"id":"fill","type":"number","label":"Slot fill rate","default":0.5,"min":0,"max":1,"step":0.05},
+        {"id":"fog","type":"number","label":"Fog distance: depth at which the corridor reaches pure backdrop","default":14.25,"min":3,"max":14.5,"step":0.25,"unit":"segments"},
+        {"id":"edgeColor","type":"color","label":"Edge line colour","default":"#B0B0B0"},
+        {"id":"edgeOpacity","type":"number","label":"Edge line opacity","default":0.5,"min":0,"max":1,"step":0.05},
+        {"id":"backdrop","type":"color","label":"Backdrop and fog colour","default":"#000000"}
+      ]'
+    >
+      <div id="gt-backdrop"></div>
+      <canvas id="gt-canvas" width="1920" height="1080"></canvas>
+      <div id="gt-assets" aria-hidden="true" data-layout-allow-overflow></div>
+
+      <!-- Driver clip: gives HyperFrames a timed element to own on track 0. -->
+      <div
+        id="gt-drv"
+        class="clip"
+        data-start="0"
+        data-duration="12"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+
+    <script>
+      (function () {
+        var DUR = 12;
+        var W = 1920;
+        var H = 1080;
+
+        // Fixed tunnel geometry, measured off the reference.
+        var TUNNEL_WIDTH = 2;
+        var TUNNEL_HEIGHT = 1.8;
+        var SEGMENT_DEPTH = 1;
+        var NUM_SEGMENTS = 15;
+        var LINE_RADIUS = 0.003;
+        var FOV = 75;
+        var INSET = 0.94; // slab gutter inside its cell, so tiles read as discrete
+        var SKIN = 0.002; // push slabs just behind the wall plane so edges stay on top
+
+        var ROOT = document.getElementById("gt-root");
+        var CS = getComputedStyle(ROOT);
+
+        // `data-composition-variables` is the single owner of every declared
+        // default — parse it rather than repeating each default a second time
+        // in JS. `window.__hyperframes` is NOT guaranteed to exist yet when this
+        // inline script runs, so it can only ever be an override, never the
+        // source. Precedence: host CSS custom property, runtime variable bag,
+        // declared default.
+        var DECL = {};
+        JSON.parse(ROOT.getAttribute("data-composition-variables") || "[]").forEach(function (v) {
+          DECL[v.id] = v.default;
+        });
+        var HF = window.__hyperframes;
+        var V = (HF && HF.getVariables && HF.getVariables()) || {};
+
+        function raw(id) {
+          var css = CS.getPropertyValue("--" + id.toLowerCase()).trim();
+          if (css !== "") return css;
+          if (V[id] !== undefined && V[id] !== "") return V[id];
+          return DECL[id];
+        }
+        function num(id) {
+          var n = parseFloat(raw(id));
+          return isFinite(n) ? n : 0;
+        }
+        function str(id) {
+          var s = raw(id);
+          return typeof s === "string" ? s.trim() : "";
+        }
+        function list(id) {
+          return str(id)
+            .split(",")
+            .map(function (s) {
+              return s.trim();
+            })
+            .filter(function (s) {
+              return s !== "";
+            });
+        }
+
+        var SPEED = num("speed");
+        var GRID = Math.max(1, Math.min(4, Math.round(num("grid"))));
+        var FILL = num("fill");
+        var IMAGE_MIX = num("imageMix");
+        var FOG_FAR = Math.max(3, Math.min(14.5, num("fog")));
+        var EDGE_OPACITY = num("edgeOpacity");
+        var EDGE_COLOR = str("edgeColor");
+        var BACKDROP = str("backdrop");
+        var PALETTE = list("palette");
+        var IMAGE_SRCS = list("images");
+
+        document.getElementById("gt-backdrop").style.background = BACKDROP;
+
+        // How far behind the camera a segment travels before it recycles. Tying
+        // it to the fog distance is the whole trick: the recycle boundary lands
+        // at exactly FOG_FAR, so a segment reappears already fogged to pure
+        // backdrop and nothing ever pops in at the far end. One owner for the
+        // invariant — move the fog and the boundary follows.
+        var BACK = Math.max(0, Math.min(1.5, NUM_SEGMENTS * SEGMENT_DEPTH - FOG_FAR));
+
+        // Deterministic 2D integer hash — the only source of "randomness".
+        // Content at frame N is a pure function of (absolute segment, slot).
+        function hash2(a, b) {
+          var h = Math.imul(a | 0, 0x27d4eb2d) ^ Math.imul(b | 0, 0x165667b1);
+          h = Math.imul(h ^ (h >>> 15), 0x2545f491);
+          h ^= h >>> 13;
+          return (h >>> 0) / 4294967296;
+        }
+
+        var THREEJS = window.THREE;
+        var canvas = document.getElementById("gt-canvas");
+        var renderer = new THREEJS.WebGLRenderer({
+          canvas: canvas,
+          antialias: true,
+          alpha: false,
+          preserveDrawingBuffer: true,
+        });
+        renderer.setPixelRatio(1);
+        renderer.setSize(W, H, false);
+        renderer.setClearColor(new THREEJS.Color(BACKDROP), 1);
+
+        var scene = new THREEJS.Scene();
+        scene.fog = new THREEJS.Fog(new THREEJS.Color(BACKDROP), 1, FOG_FAR * SEGMENT_DEPTH);
+
+        // Camera sits still at the origin looking down -z; the corridor moves.
+        // Same picture as a moving camera, and the modulo keeps every coordinate
+        // bounded no matter how long the clip runs.
+        var camera = new THREEJS.PerspectiveCamera(FOV, W / H, 0.05, 40);
+        camera.position.set(0, 0, 0);
+        camera.lookAt(0, 0, -1);
+
+        var PLANE = new THREEJS.PlaneGeometry(1, 1);
+
+        var COLOR_MATS = PALETTE.map(function (hex) {
+          return new THREEJS.MeshBasicMaterial({ color: new THREEJS.Color(hex), fog: true });
+        });
+        if (COLOR_MATS.length === 0) {
+          COLOR_MATS.push(new THREEJS.MeshBasicMaterial({ color: 0xffffff, fog: true }));
+        }
+
+        // Caller-supplied content slots. Real <img> elements (so the page load
+        // event waits for the decode) used directly as WebGL textures.
+        var assets = document.getElementById("gt-assets");
+        var IMAGES = IMAGE_SRCS.map(function (src, k) {
+          var el = document.createElement("img");
+          el.id = "gt-img-" + k;
+          el.alt = "";
+          el.src = src;
+          assets.appendChild(el);
+
+          var tex = new THREEJS.Texture(el);
+          tex.minFilter = THREEJS.LinearFilter;
+          tex.magFilter = THREEJS.LinearFilter;
+          tex.generateMipmaps = false;
+          var rec = {
+            aspect: 0,
+            mat: new THREEJS.MeshBasicMaterial({ map: tex, fog: true }),
+          };
+          function ready() {
+            if (!el.naturalWidth) return;
+            rec.aspect = el.naturalWidth / el.naturalHeight;
+            tex.needsUpdate = true;
+          }
+          el.addEventListener("load", ready);
+          ready(); // a cache hit can complete before the listener is attached
+          return rec;
+        });
+
+        var edgeMat = new THREEJS.MeshBasicMaterial({
+          color: new THREEJS.Color(EDGE_COLOR),
+          fog: true,
+          transparent: true,
+          opacity: EDGE_OPACITY,
+        });
+
+        var HW = TUNNEL_WIDTH / 2;
+        var HH = TUNNEL_HEIGHT / 2;
+        var cellZ = SEGMENT_DEPTH / GRID;
+        var cellX = TUNNEL_WIDTH / GRID;
+        var cellY = TUNNEL_HEIGHT / GRID;
+
+        // Four faces of a segment box. `place` maps a cell to a world position
+        // inside the segment (origin at the segment's near boundary, growing
+        // toward -z); `rot` orients the unit plane into that face, inward-facing.
+        // `cw`/`ch` are the cell's extent in the plane's own local axes.
+        var FACES = [
+          {
+            // floor
+            rot: [-Math.PI / 2, 0, 0],
+            cw: cellX,
+            ch: cellZ,
+            place: function (iu, iz) {
+              return [-HW + (iu + 0.5) * cellX, -HH - SKIN, -(iz + 0.5) * cellZ];
+            },
+          },
+          {
+            // ceiling
+            rot: [Math.PI / 2, 0, 0],
+            cw: cellX,
+            ch: cellZ,
+            place: function (iu, iz) {
+              return [-HW + (iu + 0.5) * cellX, HH + SKIN, -(iz + 0.5) * cellZ];
+            },
+          },
+          {
+            // left wall
+            rot: [0, Math.PI / 2, 0],
+            cw: cellZ,
+            ch: cellY,
+            place: function (iu, iz) {
+              return [-HW - SKIN, -HH + (iu + 0.5) * cellY, -(iz + 0.5) * cellZ];
+            },
+          },
+          {
+            // right wall
+            rot: [0, -Math.PI / 2, 0],
+            cw: cellZ,
+            ch: cellY,
+            place: function (iu, iz) {
+              return [HW + SKIN, -HH + (iu + 0.5) * cellY, -(iz + 0.5) * cellZ];
+            },
+          },
+        ];
+
+        var UP = new THREEJS.Vector3(0, 1, 0);
+        // Edges are solid tube geometry, not lines: a cylinder thickens with
+        // perspective the way a real moulding does, which is the whole reason
+        // the corridor reads as built rather than drawn.
+        function tube(group, ax, ay, az, bx, by, bz) {
+          var dx = bx - ax,
+            dy = by - ay,
+            dz = bz - az;
+          var len = Math.sqrt(dx * dx + dy * dy + dz * dz);
+          if (len < 1e-6) return;
+          var mesh = new THREEJS.Mesh(
+            new THREEJS.CylinderGeometry(LINE_RADIUS, LINE_RADIUS, len, 6, 1),
+            edgeMat,
+          );
+          mesh.position.set((ax + bx) / 2, (ay + by) / 2, (az + bz) / 2);
+          mesh.quaternion.setFromUnitVectors(UP, new THREEJS.Vector3(dx / len, dy / len, dz / len));
+          group.add(mesh);
+        }
+
+        function buildEdges(group) {
+          var D = SEGMENT_DEPTH;
+          var k, j, u, z;
+          // The four corner runs (and any interior wall divisions) come from the
+          // side walls; floor/ceiling only contribute their interior lines, so
+          // corners are drawn once and never double-blend at 50% opacity.
+          for (k = 1; k < GRID; k++) {
+            u = -HW + k * cellX;
+            tube(group, u, -HH, 0, u, -HH, -D);
+            tube(group, u, HH, 0, u, HH, -D);
+          }
+          for (k = 0; k <= GRID; k++) {
+            u = -HH + k * cellY;
+            tube(group, -HW, u, 0, -HW, u, -D);
+            tube(group, HW, u, 0, HW, u, -D);
+          }
+          // Ring lines at each depth boundary. The far boundary belongs to the
+          // next segment, so stop one short and the tiling stays seamless.
+          for (j = 0; j < GRID; j++) {
+            z = -j * cellZ;
+            tube(group, -HW, -HH, z, HW, -HH, z);
+            tube(group, -HW, HH, z, HW, HH, z);
+            tube(group, -HW, -HH, z, -HW, HH, z);
+            tube(group, HW, -HH, z, HW, HH, z);
+          }
+        }
+
+        var segs = [];
+        for (var i = 0; i < NUM_SEGMENTS; i++) {
+          var group = new THREEJS.Group();
+          var panels = [];
+          for (var f = 0; f < FACES.length; f++) {
+            var face = FACES[f];
+            for (var iz = 0; iz < GRID; iz++) {
+              for (var iu = 0; iu < GRID; iu++) {
+                var mesh = new THREEJS.Mesh(PLANE, COLOR_MATS[0]);
+                var p = face.place(iu, iz);
+                mesh.position.set(p[0], p[1], p[2]);
+                mesh.rotation.set(face.rot[0], face.rot[1], face.rot[2]);
+                mesh.visible = false;
+                group.add(mesh);
+                panels.push({ mesh: mesh, cw: face.cw * INSET, ch: face.ch * INSET });
+              }
+            }
+          }
+          buildEdges(group);
+          scene.add(group);
+          segs.push({ group: group, panels: panels });
+        }
+
+        // Contain-fit so a supplied screenshot keeps its aspect inside the slot
+        // instead of being squashed to the cell (wall cells are portrait).
+        function fit(p, ar) {
+          if (!ar) {
+            p.mesh.scale.set(p.cw, p.ch, 1);
+            return;
+          }
+          if (ar > p.cw / p.ch) p.mesh.scale.set(p.cw, p.cw / ar, 1);
+          else p.mesh.scale.set(p.ch * ar, p.ch, 1);
+        }
+
+        // Everything about frame t is computed from t alone. `d` is the distance
+        // flown in segments; `a` is the ABSOLUTE segment number occupying pool
+        // slot i right now, which is what content hashes and the every-other
+        // rhythm key off — so a segment carries the same panels every time it is
+        // looked at, no matter how the timeline is scrubbed.
+        function draw(t) {
+          var d = SPEED * t;
+          for (var i = 0; i < NUM_SEGMENTS; i++) {
+            var seg = segs[i];
+            var a = i + NUM_SEGMENTS * Math.ceil((d - i - BACK) / NUM_SEGMENTS);
+            seg.group.position.z = -(a - d) * SEGMENT_DEPTH;
+
+            var lit = a % 2 === 0;
+            var panels = seg.panels;
+            for (var s = 0; s < panels.length; s++) {
+              var p = panels[s];
+              if (!lit || hash2(a, s * 4 + 1) >= FILL) {
+                p.mesh.visible = false;
+                continue;
+              }
+              p.mesh.visible = true;
+              if (IMAGES.length > 0 && hash2(a, s * 4 + 2) < IMAGE_MIX) {
+                var im = IMAGES[Math.floor(hash2(a, s * 4 + 4) * IMAGES.length) % IMAGES.length];
+                p.mesh.material = im.mat;
+                fit(p, im.aspect);
+              } else {
+                var ci = Math.floor(hash2(a, s * 4 + 3) * COLOR_MATS.length) % COLOR_MATS.length;
+                p.mesh.material = COLOR_MATS[ci];
+                p.mesh.scale.set(p.cw, p.ch, 1);
+              }
+            }
+          }
+          renderer.render(scene, camera);
+        }
+
+        window.__timelines = window.__timelines || {};
+        var tl = gsap.timeline({ paused: true });
+
+        // Repaint from a property SETTER, not from onUpdate: gsap's seek(t)
+        // suppresses events by default, so an onUpdate callback silently never
+        // fires on a scrub and the canvas freezes on frame 0. Tweened values are
+        // always written during render, suppressed or not.
+        var driver = { _t: 0 };
+        Object.defineProperty(driver, "t", {
+          get: function () {
+            return this._t;
+          },
+          set: function (v) {
+            this._t = v;
+            draw(v);
+          },
+        });
+        tl.to(driver, { t: DUR, duration: DUR, ease: "none" }, 0);
+        window.__timelines["gallery-tunnel"] = tl;
+
+        draw(0);
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/blocks/gallery-tunnel/registry-item.json b/registry/blocks/gallery-tunnel/registry-item.json
new file mode 100644
index 0000000000..6a4e26b6a0
--- /dev/null
+++ b/registry/blocks/gallery-tunnel/registry-item.json
@@ -0,0 +1,184 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "gallery-tunnel",
+  "type": "hyperframes:block",
+  "title": "Gallery Tunnel",
+  "description": "An infinite corridor of panels: a square tunnel receding to a vanishing point, its floor, ceiling and walls tiled with saturated colour slabs and caller-supplied images that swell toward camera and exit past you, the far end dissolving into fog.",
+  "stability": "experimental",
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 12,
+  "tags": ["webgl", "3d", "background", "showcase", "depth", "loop"],
+  "variables": [
+    {
+      "id": "images",
+      "type": "string",
+      "label": "Image slots: comma-separated paths, tiled into the panels (e.g. assets/shot-1.png,assets/shot-2.png)",
+      "default": "",
+      "placeholder": "assets/shot-1.png,assets/shot-2.png"
+    },
+    {
+      "id": "imageMix",
+      "type": "number",
+      "label": "Image share of filled slots (0 = all colour, 1 = all images)",
+      "default": 0.5,
+      "min": 0,
+      "max": 1,
+      "step": 0.05
+    },
+    {
+      "id": "speed",
+      "type": "number",
+      "label": "Flight speed",
+      "default": 3,
+      "min": 0,
+      "max": 8,
+      "step": 0.1,
+      "unit": "segments/s"
+    },
+    {
+      "id": "palette",
+      "type": "string",
+      "label": "Slab palette: comma-separated hex colours",
+      "default": "#FF6A00,#AB54F7,#EA3737,#0072E3,#00AA3C,#FFB200"
+    },
+    {
+      "id": "grid",
+      "type": "number",
+      "label": "Grid density: slots per wall face per axis (2 = 4 per face, 16 per segment)",
+      "default": 2,
+      "min": 1,
+      "max": 4,
+      "step": 1
+    },
+    {
+      "id": "fill",
+      "type": "number",
+      "label": "Slot fill rate",
+      "default": 0.5,
+      "min": 0,
+      "max": 1,
+      "step": 0.05
+    },
+    {
+      "id": "fog",
+      "type": "number",
+      "label": "Fog distance: depth at which the corridor reaches pure backdrop",
+      "default": 14.25,
+      "min": 3,
+      "max": 14.5,
+      "step": 0.25,
+      "unit": "segments"
+    },
+    {
+      "id": "edgeColor",
+      "type": "color",
+      "label": "Edge line colour",
+      "default": "#B0B0B0"
+    },
+    {
+      "id": "edgeOpacity",
+      "type": "number",
+      "label": "Edge line opacity",
+      "default": 0.5,
+      "min": 0,
+      "max": 1,
+      "step": 0.05
+    },
+    {
+      "id": "backdrop",
+      "type": "color",
+      "label": "Backdrop and fog colour",
+      "default": "#000000"
+    }
+  ],
+  "files": [
+    {
+      "path": "gallery-tunnel.html",
+      "target": "compositions/gallery-tunnel.html",
+      "type": "hyperframes:composition"
+    }
+  ],
+  "params": [
+    {
+      "key": "--images",
+      "label": "Image slots: comma-separated paths, tiled into the panels (e.g. assets/shot-1.png,assets/shot-2.png)",
+      "type": "text",
+      "default": ""
+    },
+    {
+      "key": "--imagemix",
+      "label": "Image share of filled slots (0 = all colour, 1 = all images)",
+      "type": "number",
+      "default": "0.5",
+      "min": 0,
+      "max": 1,
+      "step": 0.05
+    },
+    {
+      "key": "--speed",
+      "label": "Flight speed (segments per second)",
+      "type": "number",
+      "default": "3",
+      "min": 0,
+      "max": 8,
+      "step": 0.1
+    },
+    {
+      "key": "--palette",
+      "label": "Slab palette: comma-separated hex colours",
+      "type": "text",
+      "default": "#FF6A00,#AB54F7,#EA3737,#0072E3,#00AA3C,#FFB200"
+    },
+    {
+      "key": "--grid",
+      "label": "Grid density: slots per wall face per axis (2 = 4 per face, 16 per segment)",
+      "type": "number",
+      "default": "2",
+      "min": 1,
+      "max": 4,
+      "step": 1
+    },
+    {
+      "key": "--fill",
+      "label": "Slot fill rate",
+      "type": "number",
+      "default": "0.5",
+      "min": 0,
+      "max": 1,
+      "step": 0.05
+    },
+    {
+      "key": "--fog",
+      "label": "Fog distance in segments: depth at which the corridor reaches pure backdrop",
+      "type": "number",
+      "default": "14.25",
+      "min": 3,
+      "max": 14.5,
+      "step": 0.25
+    },
+    {
+      "key": "--edgecolor",
+      "label": "Edge line colour",
+      "type": "color",
+      "default": "#B0B0B0"
+    },
+    {
+      "key": "--edgeopacity",
+      "label": "Edge line opacity",
+      "type": "number",
+      "default": "0.5",
+      "min": 0,
+      "max": 1,
+      "step": 0.05
+    },
+    {
+      "key": "--backdrop",
+      "label": "Backdrop and fog colour",
+      "type": "color",
+      "default": "#000000"
+    }
+  ]
+}
diff --git a/registry/blocks/halftone-field/halftone-field.html b/registry/blocks/halftone-field/halftone-field.html
new file mode 100644
index 0000000000..c67d807449
--- /dev/null
+++ b/registry/blocks/halftone-field/halftone-field.html
@@ -0,0 +1,378 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Halftone Field</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #000;
+        overflow: hidden;
+      }
+      #hlf-root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #hlf-backdrop {
+        position: absolute;
+        inset: 0;
+        background: #000000;
+      }
+      #hlf-canvas {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="hlf-root"
+      data-composition-id="halftone-field"
+      data-root="true"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="10"
+      data-composition-variables='[
+        {"id":"frequency","type":"number","label":"Field frequency","default":2,"min":1,"max":10,"step":0.1},
+        {"id":"speed","type":"number","label":"Flow speed","default":5,"min":0,"max":10,"step":0.1},
+        {"id":"cellSize","type":"number","label":"Cell size","default":54,"min":1,"max":100,"step":1},
+        {"id":"gamma","type":"number","label":"Gamma (midtone crush)","default":12,"min":1,"max":20,"step":0.1},
+        {"id":"paletteBias","type":"number","label":"Palette bias","default":2,"min":0,"max":20,"step":0.5},
+        {"id":"palette1","type":"color","label":"Palette stop 1 (lows)","default":"#00AAFF"},
+        {"id":"palette2","type":"color","label":"Palette stop 2","default":"#C2FF67"},
+        {"id":"palette3","type":"color","label":"Palette stop 3","default":"#6600FF"},
+        {"id":"palette4","type":"color","label":"Palette stop 4 (crests)","default":"#000000"},
+        {"id":"background","type":"color","label":"Background","default":"#000000"},
+        {"id":"quantize","type":"boolean","label":"Quantise to 30fps (stepped)","default":false}
+      ]'
+    >
+      <div id="hlf-backdrop"></div>
+      <canvas id="hlf-canvas" width="1920" height="1080"></canvas>
+
+      <!-- Driver clip: gives HyperFrames a timed element to own on track 0. -->
+      <div
+        id="hlf-drv"
+        class="clip"
+        data-start="0"
+        data-duration="10"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+
+    <script>
+      (function () {
+        var DUR = 10;
+        var W = 1920;
+        var H = 1080;
+
+        var V = (window.__hyperframes && window.__hyperframes.getVariables()) || {};
+        var CS = getComputedStyle(document.getElementById("hlf-root"));
+
+        // The runtime defines every declared variable as `--<id>` on the root,
+        // so a host stylesheet can override one there too. Read the custom
+        // property first, fall back to the declared value when it is unset.
+        function raw(id) {
+          var css = CS.getPropertyValue("--" + id.toLowerCase()).trim();
+          return css !== "" ? css : V[id];
+        }
+        function num(id, fallback) {
+          var n = parseFloat(raw(id));
+          return isFinite(n) ? n : fallback;
+        }
+        function bool(id) {
+          var v = raw(id);
+          return v === true || /^(true|1|on|yes)$/i.test(String(v));
+        }
+        // #RGB / #RRGGBB -> [r, g, b] in 0..1. Anything else falls back.
+        function rgb(id, fallback) {
+          var s = String(raw(id) || "").trim();
+          var m = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(s);
+          if (!m) s = fallback;
+          else s = "#" + m[1];
+          var hex = s.slice(1);
+          if (hex.length === 3) {
+            hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+          }
+          var n = parseInt(hex, 16);
+          return [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255];
+        }
+        // The reference exposes 1-10 / 1-100 / 1-20 dials and maps them onto
+        // the ranges the shader actually wants.
+        function mapLinear(x, a1, a2, b1, b2) {
+          return b1 + ((x - a1) * (b2 - b1)) / (a2 - a1);
+        }
+
+        var FREQ = mapLinear(num("frequency", 2), 1, 10, 0.3, 6);
+        var SPEED = num("speed", 5) * 0.05;
+        var CELL = mapLinear(num("cellSize", 54), 1, 100, 6, 60);
+        var GAMMA = mapLinear(num("gamma", 12), 1, 20, 0.5, 8);
+        var BIAS = num("paletteBias", 2) * 0.05;
+        var PAL = [
+          rgb("palette1", "#00AAFF"),
+          rgb("palette2", "#C2FF67"),
+          rgb("palette3", "#6600FF"),
+          rgb("palette4", "#000000"),
+        ];
+        var BG = rgb("background", "#000000");
+        var QUANTIZE = bool("quantize");
+
+        document.getElementById("hlf-backdrop").style.background =
+          "rgb(" +
+          BG.map(function (c) {
+            return Math.round(c * 255);
+          }).join(",") +
+          ")";
+
+        var canvas = document.getElementById("hlf-canvas");
+        var gl =
+          canvas.getContext("webgl", {
+            alpha: false,
+            antialias: false,
+            depth: false,
+            stencil: false,
+            preserveDrawingBuffer: true,
+            powerPreference: "high-performance",
+          }) ||
+          canvas.getContext("experimental-webgl", {
+            alpha: false,
+            preserveDrawingBuffer: true,
+          });
+
+        var VERT = "attribute vec2 aPos;\nvoid main() { gl_Position = vec4(aPos, 0.0, 1.0); }";
+
+        // Single pass. The reference renders the colour field into a target and
+        // samples it at each cell centre, but the field is analytic, so
+        // evaluating it at the cell centre here is the same value without the
+        // round trip through a texture.
+        var FRAG = `
+precision highp float;
+uniform vec2 uRes;
+uniform float uTime;
+uniform float uFreq;
+uniform float uSpeed;
+uniform float uCell;
+uniform float uGamma;
+uniform float uBias;
+uniform vec3 uPal0;
+uniform vec3 uPal1;
+uniform vec3 uPal2;
+uniform vec3 uPal3;
+uniform vec3 uBg;
+
+// 3D simplex noise — Ashima Arts / Stefan Gustavson (MIT).
+vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
+vec4 mod289(vec4 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
+vec4 permute(vec4 x) { return mod289(((x * 34.0) + 1.0) * x); }
+vec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; }
+
+float snoise(vec3 v) {
+  const vec2 C = vec2(1.0 / 6.0, 1.0 / 3.0);
+  const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);
+
+  vec3 i = floor(v + dot(v, C.yyy));
+  vec3 x0 = v - i + dot(i, C.xxx);
+
+  vec3 g = step(x0.yzx, x0.xyz);
+  vec3 l = 1.0 - g;
+  vec3 i1 = min(g.xyz, l.zxy);
+  vec3 i2 = max(g.xyz, l.zxy);
+
+  vec3 x1 = x0 - i1 + C.xxx;
+  vec3 x2 = x0 - i2 + C.yyy;
+  vec3 x3 = x0 - D.yyy;
+
+  i = mod289(i);
+  vec4 p = permute(permute(permute(
+      i.z + vec4(0.0, i1.z, i2.z, 1.0)) +
+      i.y + vec4(0.0, i1.y, i2.y, 1.0)) +
+      i.x + vec4(0.0, i1.x, i2.x, 1.0));
+
+  float n_ = 0.142857142857;
+  vec3 ns = n_ * D.wyz - D.xzx;
+
+  vec4 j = p - 49.0 * floor(p * ns.z * ns.z);
+
+  vec4 x_ = floor(j * ns.z);
+  vec4 y_ = floor(j - 7.0 * x_);
+
+  vec4 x = x_ * ns.x + ns.yyyy;
+  vec4 y = y_ * ns.x + ns.yyyy;
+  vec4 h = 1.0 - abs(x) - abs(y);
+
+  vec4 b0 = vec4(x.xy, y.xy);
+  vec4 b1 = vec4(x.zw, y.zw);
+
+  vec4 s0 = floor(b0) * 2.0 + 1.0;
+  vec4 s1 = floor(b1) * 2.0 + 1.0;
+  vec4 sh = -step(h, vec4(0.0));
+
+  vec4 a0 = b0.xzyw + s0.xzyw * sh.xxyy;
+  vec4 a1 = b1.xzyw + s1.xzyw * sh.zzww;
+
+  vec3 p0 = vec3(a0.xy, h.x);
+  vec3 p1 = vec3(a0.zw, h.y);
+  vec3 p2 = vec3(a1.xy, h.z);
+  vec3 p3 = vec3(a1.zw, h.w);
+
+  vec4 norm = taylorInvSqrt(vec4(dot(p0, p0), dot(p1, p1), dot(p2, p2), dot(p3, p3)));
+  p0 *= norm.x;
+  p1 *= norm.y;
+  p2 *= norm.z;
+  p3 *= norm.w;
+
+  vec4 m = max(0.6 - vec4(dot(x0, x0), dot(x1, x1), dot(x2, x2), dot(x3, x3)), 0.0);
+  m = m * m;
+  return 42.0 * dot(m * m, vec4(dot(p0, x0), dot(p1, x1), dot(p2, x2), dot(p3, x3)));
+}
+
+// Full-saturation, full-value HSV: only the hue ramp survives.
+vec3 hue2rgb(float h) {
+  return clamp(abs(mod(h * 6.0 + vec3(0.0, 4.0, 2.0), 6.0) - 3.0) - 1.0, 0.0, 1.0);
+}
+
+// Piecewise-linear ramp across the four palette stops.
+vec3 ramp(float v) {
+  float x = clamp(v, 0.0, 1.0) * 3.0;
+  vec3 c = mix(uPal0, uPal1, clamp(x, 0.0, 1.0));
+  c = mix(c, uPal2, clamp(x - 1.0, 0.0, 1.0));
+  c = mix(c, uPal3, clamp(x - 2.0, 0.0, 1.0));
+  return c;
+}
+
+void main() {
+  // One sample per cell, taken at the cell centre.
+  vec2 cell = floor(gl_FragCoord.xy / uCell);
+  vec2 centre = (cell + 0.5) * uCell;
+
+  vec2 st = centre / uRes;
+  st.x *= uRes.x / uRes.y;
+
+  float hue = abs(snoise(vec3(st * uFreq, uTime * uSpeed)));
+  vec3 field = hue2rgb(hue);
+
+  // The gamma is the whole look: it crushes the midtones so most of the frame
+  // stays background and only the crests of the field open up.
+  float gray = pow(dot(field, vec3(0.2126, 0.7152, 0.0722)), uGamma);
+  float v = clamp(gray + uBias, 0.0, 1.0);
+
+  float radius = v * 0.5 * uCell;
+  float d = length(gl_FragCoord.xy - centre);
+  float mask = 1.0 - smoothstep(radius - 1.0, radius + 1.0, d);
+
+  gl_FragColor = vec4(mix(uBg, ramp(v), mask), 1.0);
+}
+`;
+
+        var uni = {};
+        var ready = false;
+
+        function compile(type, src) {
+          var sh = gl.createShader(type);
+          gl.shaderSource(sh, src);
+          gl.compileShader(sh);
+          if (!gl.getShaderParameter(sh, gl.COMPILE_STATUS)) {
+            throw new Error("halftone-field shader: " + gl.getShaderInfoLog(sh));
+          }
+          return sh;
+        }
+
+        if (gl) {
+          var prog = gl.createProgram();
+          gl.attachShader(prog, compile(gl.VERTEX_SHADER, VERT));
+          gl.attachShader(prog, compile(gl.FRAGMENT_SHADER, FRAG));
+          gl.linkProgram(prog);
+          if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {
+            throw new Error("halftone-field link: " + gl.getProgramInfoLog(prog));
+          }
+          gl.useProgram(prog);
+
+          var buf = gl.createBuffer();
+          gl.bindBuffer(gl.ARRAY_BUFFER, buf);
+          gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
+          var loc = gl.getAttribLocation(prog, "aPos");
+          gl.enableVertexAttribArray(loc);
+          gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0);
+
+          [
+            "uRes",
+            "uTime",
+            "uFreq",
+            "uSpeed",
+            "uCell",
+            "uGamma",
+            "uBias",
+            "uPal0",
+            "uPal1",
+            "uPal2",
+            "uPal3",
+            "uBg",
+          ].forEach(function (n) {
+            uni[n] = gl.getUniformLocation(prog, n);
+          });
+
+          gl.viewport(0, 0, W, H);
+          gl.uniform2f(uni.uRes, W, H);
+          gl.uniform1f(uni.uFreq, FREQ);
+          gl.uniform1f(uni.uSpeed, SPEED);
+          gl.uniform1f(uni.uCell, CELL);
+          gl.uniform1f(uni.uGamma, GAMMA);
+          gl.uniform1f(uni.uBias, BIAS);
+          gl.uniform3f(uni.uPal0, PAL[0][0], PAL[0][1], PAL[0][2]);
+          gl.uniform3f(uni.uPal1, PAL[1][0], PAL[1][1], PAL[1][2]);
+          gl.uniform3f(uni.uPal2, PAL[2][0], PAL[2][1], PAL[2][2]);
+          gl.uniform3f(uni.uPal3, PAL[3][0], PAL[3][1], PAL[3][2]);
+          gl.uniform3f(uni.uBg, BG[0], BG[1], BG[2]);
+          ready = true;
+        }
+
+        // Every frame is computed from t alone — the field is a closed-form
+        // function of position and time. No accumulator, no clock, no PRNG.
+        // `quantize` snaps t to a 30fps grid for the stepped LED-wall look.
+        function draw(t) {
+          if (!ready) return;
+          gl.uniform1f(uni.uTime, QUANTIZE ? Math.floor(t * 30) / 30 : t);
+          gl.drawArrays(gl.TRIANGLES, 0, 3);
+          gl.flush();
+        }
+
+        window.__timelines = window.__timelines || {};
+        var tl = gsap.timeline({ paused: true });
+
+        // The canvas is repainted from a property SETTER, not from onUpdate:
+        // gsap's seek(t) suppresses events by default, so an onUpdate callback
+        // silently never fires on a scrub and the canvas freezes on frame 0.
+        // Tweened values are always written during render, suppressed or not,
+        // so this fires on every seek — and hands us the frame time directly.
+        var driver = { _t: 0 };
+        Object.defineProperty(driver, "t", {
+          get: function () {
+            return this._t;
+          },
+          set: function (v) {
+            this._t = v;
+            draw(v);
+          },
+        });
+        tl.to(driver, { t: DUR, duration: DUR, ease: "none" }, 0);
+        window.__timelines["halftone-field"] = tl;
+
+        draw(0);
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/blocks/halftone-field/registry-item.json b/registry/blocks/halftone-field/registry-item.json
new file mode 100644
index 0000000000..d691b9f054
--- /dev/null
+++ b/registry/blocks/halftone-field/registry-item.json
@@ -0,0 +1,197 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "halftone-field",
+  "type": "hyperframes:block",
+  "title": "Halftone Field",
+  "description": "A full-bleed halftone light field: a grid of dots whose size and colour track a slow flowing simplex-noise field, so broad bands of light sweep across a mostly-black frame like a giant LED wall showing a plasma. Built to run under type.",
+  "stability": "experimental",
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 10,
+  "tags": ["webgl", "shader", "background", "texture", "halftone"],
+  "variables": [
+    {
+      "id": "frequency",
+      "type": "number",
+      "label": "Field frequency",
+      "default": 2,
+      "min": 1,
+      "max": 10,
+      "step": 0.1
+    },
+    {
+      "id": "speed",
+      "type": "number",
+      "label": "Flow speed",
+      "default": 5,
+      "min": 0,
+      "max": 10,
+      "step": 0.1
+    },
+    {
+      "id": "cellSize",
+      "type": "number",
+      "label": "Cell size",
+      "default": 54,
+      "min": 1,
+      "max": 100,
+      "step": 1
+    },
+    {
+      "id": "gamma",
+      "type": "number",
+      "label": "Gamma (midtone crush)",
+      "default": 12,
+      "min": 1,
+      "max": 20,
+      "step": 0.1
+    },
+    {
+      "id": "paletteBias",
+      "type": "number",
+      "label": "Palette bias",
+      "default": 2,
+      "min": 0,
+      "max": 20,
+      "step": 0.5
+    },
+    {
+      "id": "palette1",
+      "type": "color",
+      "label": "Palette stop 1 (lows)",
+      "default": "#00AAFF"
+    },
+    {
+      "id": "palette2",
+      "type": "color",
+      "label": "Palette stop 2",
+      "default": "#C2FF67"
+    },
+    {
+      "id": "palette3",
+      "type": "color",
+      "label": "Palette stop 3",
+      "default": "#6600FF"
+    },
+    {
+      "id": "palette4",
+      "type": "color",
+      "label": "Palette stop 4 (crests)",
+      "default": "#000000"
+    },
+    {
+      "id": "background",
+      "type": "color",
+      "label": "Background",
+      "default": "#000000"
+    },
+    {
+      "id": "quantize",
+      "type": "boolean",
+      "label": "Quantise to 30fps (stepped)",
+      "default": false
+    }
+  ],
+  "files": [
+    {
+      "path": "halftone-field.html",
+      "target": "compositions/halftone-field.html",
+      "type": "hyperframes:composition"
+    }
+  ],
+  "params": [
+    {
+      "key": "--frequency",
+      "label": "Field frequency (1 = broad swells, 10 = fine mottle)",
+      "type": "number",
+      "default": "2",
+      "min": 1,
+      "max": 10,
+      "step": 0.1
+    },
+    {
+      "key": "--speed",
+      "label": "Flow speed (0 freezes the field)",
+      "type": "number",
+      "default": "5",
+      "min": 0,
+      "max": 10,
+      "step": 0.1
+    },
+    {
+      "key": "--cellsize",
+      "label": "Cell size (dot pitch, 1 = 6px, 100 = 60px)",
+      "type": "number",
+      "default": "54",
+      "min": 1,
+      "max": 100,
+      "step": 1
+    },
+    {
+      "key": "--gamma",
+      "label": "Gamma: midtone crush, the whole look. Low values flatten it to an even grey dot field",
+      "type": "number",
+      "default": "12",
+      "min": 1,
+      "max": 20,
+      "step": 0.1
+    },
+    {
+      "key": "--palettebias",
+      "label": "Palette bias: floor under every dot's size and palette position. 0 lets the darks go fully black",
+      "type": "number",
+      "default": "2",
+      "min": 0,
+      "max": 20,
+      "step": 0.5
+    },
+    {
+      "key": "--palette1",
+      "label": "Palette stop 1 (lows)",
+      "type": "color",
+      "default": "#00AAFF"
+    },
+    {
+      "key": "--palette2",
+      "label": "Palette stop 2",
+      "type": "color",
+      "default": "#C2FF67"
+    },
+    {
+      "key": "--palette3",
+      "label": "Palette stop 3",
+      "type": "color",
+      "default": "#6600FF"
+    },
+    {
+      "key": "--palette4",
+      "label": "Palette stop 4 (crests)",
+      "type": "color",
+      "default": "#000000"
+    },
+    {
+      "key": "--background",
+      "label": "Background",
+      "type": "color",
+      "default": "#000000"
+    },
+    {
+      "key": "--quantize",
+      "label": "Quantise to 30fps for a stepped LED-wall look",
+      "type": "select",
+      "default": "false",
+      "options": [
+        {
+          "label": "Smooth",
+          "value": "false"
+        },
+        {
+          "label": "Stepped 30fps",
+          "value": "true"
+        }
+      ]
+    }
+  ]
+}
diff --git a/registry/blocks/ios26-liquid-glass/ios26-liquid-glass.html b/registry/blocks/ios26-liquid-glass/ios26-liquid-glass.html
index c2335ceee5..12a00efc01 100644
--- a/registry/blocks/ios26-liquid-glass/ios26-liquid-glass.html
+++ b/registry/blocks/ios26-liquid-glass/ios26-liquid-glass.html
@@ -1125,6 +1125,46 @@
       loader.setDRACOLoader(draco);
 
       // iPhone
+      // The replacement device models carry UVs authored for a tiling material
+      // (the laptop panel runs u -6.3..6.3), so mapping one screen image onto
+      // them clamps at the edges and smears the last row of pixels across the
+      // whole panel. Both screens are flat planes, so derive planar UVs from
+      // the mesh's own bounds instead of trusting what shipped.
+      function planarScreenUv(mesh) {
+        var g = mesh.geometry;
+        g.computeBoundingBox();
+        var bb = g.boundingBox;
+        var pos = g.attributes.position;
+        var w = bb.max.x - bb.min.x || 1;
+        var h = bb.max.y - bb.min.y || 1;
+        var uv = new Float32Array(pos.count * 2);
+        for (var i = 0; i < pos.count; i++) {
+          uv[i * 2] = (pos.getX(i) - bb.min.x) / w;
+          uv[i * 2 + 1] = (pos.getY(i) - bb.min.y) / h;
+        }
+        g.setAttribute("uv", new THREE.BufferAttribute(uv, 2));
+      }
+
+      // These compositions were authored around a model whose screen faced -Z
+      // (the old asset's display plane sat at its minimum Z) and every camera
+      // move and spin in the timeline assumes it. The replacement faces +Z, so
+      // align the model rather than re-time the animation. Reads the model's
+      // own parts, so a re-export facing the other way still lands right.
+      function alignScreenToMinusZ(root, frontName, backName) {
+        var front = root.getObjectByName(frontName);
+        var back = root.getObjectByName(backName);
+        if (!front || !back) return;
+        // matrixWorld is only refreshed during a render, and this runs at load,
+        // so without this the two parts both read as the origin and the test
+        // silently never fires.
+        root.updateWorldMatrix(true, true);
+        var fp = new THREE.Vector3();
+        var bp = new THREE.Vector3();
+        front.getWorldPosition(fp);
+        back.getWorldPosition(bp);
+        if (fp.z > bp.z) root.rotation.y += Math.PI;
+      }
+
       loader.load("models/iphone.glb", function (gltf) {
         var m = gltf.scene;
         var box = new THREE.Box3().setFromObject(m);
@@ -1135,10 +1175,14 @@
         m.position.sub(box.getCenter(new THREE.Vector3()));
         m.traverse(function (child) {
           if (!child.isMesh) return;
-          if (child.material && child.material.emissiveMap) {
+          // `front-glass` is the display face; Blender's exporter suffixes the
+          // mesh name and leaves the node name bare, so match the prefix.
+          if (child.name.indexOf("front-glass") === 0) {
+            planarScreenUv(child);
             child.material = new THREE.MeshBasicMaterial({ map: phoneTex });
           }
         });
+        alignScreenToMinusZ(m, "front-glass", "rear-window");
         phoneGrp.add(m);
         ready++;
         if (ready === 1) onReady();
diff --git a/registry/blocks/ios26-liquid-glass/models/iphone.glb b/registry/blocks/ios26-liquid-glass/models/iphone.glb
index fd73368051..f042300855 100644
Binary files a/registry/blocks/ios26-liquid-glass/models/iphone.glb and b/registry/blocks/ios26-liquid-glass/models/iphone.glb differ
diff --git a/registry/blocks/ios26-liquid-glass/models/macbook.glb b/registry/blocks/ios26-liquid-glass/models/macbook.glb
index 2fed3be1ba..762511110a 100644
Binary files a/registry/blocks/ios26-liquid-glass/models/macbook.glb and b/registry/blocks/ios26-liquid-glass/models/macbook.glb differ
diff --git a/registry/blocks/liquid-glass-notification/registry-item.json b/registry/blocks/liquid-glass-notification/registry-item.json
index c5de6b8c7d..d321422c3c 100644
--- a/registry/blocks/liquid-glass-notification/registry-item.json
+++ b/registry/blocks/liquid-glass-notification/registry-item.json
@@ -18,13 +18,13 @@
       "type": "hyperframes:composition"
     },
     {
-      "path": "lib/liquid-glass.iife.js",
-      "target": "compositions/lib/liquid-glass.iife.js",
+      "path": "assets/hyperframes-logo-dark.svg",
+      "target": "compositions/assets/hyperframes-logo-dark.svg",
       "type": "registry:asset"
     },
     {
-      "path": "assets/hyperframes-logo-dark.svg",
-      "target": "compositions/assets/hyperframes-logo-dark.svg",
+      "path": "lib/liquid-glass.iife.js",
+      "target": "compositions/lib/liquid-glass.iife.js",
       "type": "registry:asset"
     }
   ],
diff --git a/registry/blocks/lower-third-bild/registry-item.json b/registry/blocks/lower-third-bild/registry-item.json
index 7e8aeb7458..142a333f51 100644
--- a/registry/blocks/lower-third-bild/registry-item.json
+++ b/registry/blocks/lower-third-bild/registry-item.json
@@ -2,7 +2,7 @@
   "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
   "name": "lower-third-bild",
   "type": "hyperframes:block",
-  "title": "Lower Third — BILD Style",
+  "title": "Lower Third \u2014 BILD Style",
   "description": "News-style lower third with tight-fit text boxes: white headline bar with red drop-shadow, red sub-line with white drop-shadow.",
   "dimensions": {
     "width": 1920,
@@ -10,6 +10,18 @@
   },
   "duration": 8,
   "tags": ["broadcast", "lower-third", "news", "overlay"],
+  "variables": [
+    {
+      "id": "TXT_MAIN_1_Line",
+      "type": "string",
+      "default": "BILD EXKLUSIV"
+    },
+    {
+      "id": "TXT_SUB",
+      "type": "string",
+      "default": "Sonderbericht"
+    }
+  ],
   "files": [
     {
       "path": "lower-third-bild.html",
diff --git a/registry/blocks/lt-neon-border/lt-neon-border.html b/registry/blocks/lt-neon-border/lt-neon-border.html
new file mode 100644
index 0000000000..6e1f966b3d
--- /dev/null
+++ b/registry/blocks/lt-neon-border/lt-neon-border.html
@@ -0,0 +1,390 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      body {
+        width: 1920px;
+        height: 1080px;
+        font-family: "Inter", sans-serif;
+      }
+
+      #root .nb-wrap {
+        position: absolute;
+        left: 50px;
+        bottom: 56px;
+        width: 1120px;
+        height: 510px;
+      }
+      #root .nb-svg {
+        position: absolute;
+        inset: 0;
+        display: block;
+      }
+      /* The frame's inner box, inset by the bloom padding so the copy lands
+         inside the traced rectangle. */
+      #root .nb-panel {
+        position: absolute;
+        left: 150px;
+        top: 150px;
+        width: 820px;
+        height: 210px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        gap: 14px;
+        padding: 0 52px;
+      }
+      #root .nb-name {
+        display: block;
+        font-size: 54px;
+        font-weight: 700;
+        color: #ffffff;
+        line-height: 1;
+        letter-spacing: -0.015em;
+        white-space: nowrap;
+        text-shadow: 0 2px 20px rgba(0, 0, 0, 0.75);
+      }
+      #root .nb-role {
+        display: block;
+        font-size: 25px;
+        font-weight: 400;
+        color: #d5dae3;
+        line-height: 1.2;
+        letter-spacing: 0.06em;
+        text-transform: uppercase;
+        white-space: nowrap;
+        text-shadow: 0 2px 16px rgba(0, 0, 0, 0.75);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="lt-neon-border"
+      data-composition-variables='[
+        {"id":"name","type":"string","label":"Name","default":"Dr. Maya Chen"},
+        {"id":"role","type":"string","label":"Role","default":"Host · Neuroscientist"},
+        {"id":"accent","type":"color","label":"Accent","default":"#cc9149"},
+        {"id":"movement","type":"enum","label":"Movement","default":"step","options":[{"value":"step","label":"Step (snap at corners)"},{"value":"glide","label":"Glide (smooth)"}]},
+        {"id":"speed","type":"number","label":"Speed","default":1.6,"min":0.2,"max":6,"step":0.1,"unit":"corners/s"},
+        {"id":"cornerRadius","type":"number","label":"Corner radius","default":26,"min":0,"max":90,"step":1,"unit":"px"},
+        {"id":"thickness","type":"number","label":"Thickness","default":5,"min":1,"max":16,"step":1,"unit":"px"},
+        {"id":"arcLength","type":"number","label":"Arc length","default":22,"min":5,"max":100,"step":1,"unit":"%"},
+        {"id":"glow","type":"number","label":"Glow","default":1,"min":0,"max":2,"step":0.05,"unit":"x"}
+      ]'
+      data-start="0"
+      data-duration="4.8"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="nb-clip" class="clip" data-start="0" data-duration="4.8" data-track-index="0">
+        <div id="nb-wrap" class="nb-wrap">
+          <svg
+            id="nb-svg"
+            class="nb-svg"
+            width="1120"
+            height="510"
+            viewBox="0 0 1120 510"
+            fill="none"
+            aria-hidden="true"
+          >
+            <defs>
+              <g id="nb-seg-a-glow"></g>
+              <g id="nb-seg-a-core"></g>
+              <g id="nb-seg-b-glow"></g>
+              <g id="nb-seg-b-core"></g>
+            </defs>
+            <g transform="translate(150,150)">
+              <!-- Wide bloom sits UNDER the panel so the halo reads outside the
+                   frame and the interior stays hardware-clean. -->
+              <g id="nb-bloom-under"></g>
+              <path id="nb-fill" d="" fill="rgba(9,11,15,0.78)" />
+              <path id="nb-rail" d="" fill="none" stroke-linejoin="round" />
+              <g id="nb-bloom-over"></g>
+            </g>
+          </svg>
+          <div id="nb-panel" class="nb-panel">
+            <span id="nb-name" class="nb-name" data-var-text="name">Dr. Maya Chen</span>
+            <span id="nb-role" class="nb-role" data-var-text="role">Host · Neuroscientist</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        var SVG_NS = "http://www.w3.org/2000/svg";
+        var W = 820; // traced rectangle width
+        var H = 210; // traced rectangle height
+        var DUR = 4.8;
+
+        var vars =
+          window.__hyperframes && window.__hyperframes.getVariables
+            ? window.__hyperframes.getVariables()
+            : {};
+
+        function num(v, fallback) {
+          var n = typeof v === "number" ? v : parseFloat(v);
+          return isFinite(n) ? n : fallback;
+        }
+
+        var accent = /^#[0-9a-fA-F]{6}$/.test(String(vars.accent))
+          ? String(vars.accent)
+          : "#cc9149";
+        var mode = vars.movement === "glide" ? "glide" : "step";
+        var speed = Math.max(0.05, num(vars.speed, 1.6)); // corners per second
+        var radius = Math.min(Math.min(W, H) / 2, Math.max(0, num(vars.cornerRadius, 26)));
+        var thickness = Math.max(0.5, num(vars.thickness, 5));
+        var arcFrac = Math.min(1, Math.max(0.02, num(vars.arcLength, 22) / 100));
+        var glow = Math.max(0, num(vars.glow, 1));
+
+        // Hot core: the accent lifted most of the way to white, the way a real
+        // filament reads brighter than its halo.
+        function towardWhite(hex, amount) {
+          var v = parseInt(hex.slice(1), 16);
+          var out = "#";
+          for (var s = 16; s >= 0; s -= 8) {
+            var c = (v >> s) & 255;
+            var m = Math.round(c + (255 - c) * amount);
+            out += (m < 16 ? "0" : "") + m.toString(16);
+          }
+          return out;
+        }
+        var hot = towardWhite(accent, 0.78);
+
+        // ---- geometry -------------------------------------------------------
+        // Rounded rect, clockwise, starting where the top edge leaves the
+        // top-left corner arc.
+        var r = radius;
+        var arc = "A " + r + " " + r + " 0 0 1 ";
+        var d = [
+          "M " + r + " 0",
+          "H " + (W - r),
+          arc + W + " " + r,
+          "V " + (H - r),
+          arc + (W - r) + " " + H,
+          "H " + r,
+          arc + "0 " + (H - r),
+          "V " + r,
+          arc + r + " 0",
+          "Z",
+        ].join(" ");
+
+        var fillEl = document.getElementById("nb-fill");
+        var railEl = document.getElementById("nb-rail");
+        fillEl.setAttribute("d", d);
+        railEl.setAttribute("d", d);
+        railEl.setAttribute("stroke", accent);
+        railEl.setAttribute("stroke-width", String(thickness));
+        railEl.setAttribute("stroke-opacity", "0.14");
+
+        // Analytic perimeter, then rescaled to whatever length the renderer
+        // actually measures for the path so dash distances line up exactly.
+        var SW = W - 2 * r; // straight run, horizontal
+        var SH = H - 2 * r; // straight run, vertical
+        var AC = (Math.PI * r) / 2; // one corner arc
+        var P_ANALYTIC = 2 * SW + 2 * SH + 4 * AC;
+        var P = railEl.getTotalLength() || P_ANALYTIC;
+        var K = P / P_ANALYTIC;
+
+        // Distance along the path of the MIDPOINT of each corner arc, so the
+        // light parks centred on the corner rather than skidding past it.
+        var CORNERS = [
+          (SW + AC / 2) * K, // top-right
+          (SW + SH + 1.5 * AC) * K, // bottom-right
+          (2 * SW + SH + 2.5 * AC) * K, // bottom-left
+          (2 * SW + 2 * SH + 3.5 * AC) * K, // top-left
+        ];
+
+        /** Absolute path distance of corner k, for any integer k (k may be
+         * negative or beyond one lap). Pure function of k — no accumulator. */
+        function cornerPos(k) {
+          var lap = Math.floor(k / 4);
+          var i = k - lap * 4;
+          return CORNERS[i] + lap * P;
+        }
+
+        // ---- easing ---------------------------------------------------------
+        // The step curve overshoots (y2 = 1.05); that overshoot IS the snap.
+        function cubicBezier(x1, y1, x2, y2) {
+          function axis(t, a, b) {
+            var u = 1 - t;
+            return 3 * u * u * t * a + 3 * u * t * t * b + t * t * t;
+          }
+          return function (x) {
+            if (x <= 0) return 0;
+            if (x >= 1) return 1;
+            var lo = 0;
+            var hi = 1;
+            var t = x;
+            // Fixed iteration count: same input, same output, every run.
+            for (var i = 0; i < 32; i++) {
+              t = (lo + hi) / 2;
+              if (axis(t, x1, x2) < x) lo = t;
+              else hi = t;
+            }
+            return axis(t, y1, y2);
+          };
+        }
+        var ease =
+          mode === "glide" ? cubicBezier(0.65, 0, 0.35, 1) : cubicBezier(0.72, 0.16, 0.18, 1.05);
+
+        var beat = 1 / speed; // seconds per corner hop
+
+        /** Head position (path distance) at time t. floor/frac of t/beat is the
+         * closed form of the reference's `stepT += dt` accumulator. */
+        function headAt(t) {
+          var total = t / beat;
+          var k = Math.floor(total);
+          var u = total - k;
+          var a = cornerPos(k);
+          var b = cornerPos(k + 1);
+          return a + (b - a) * ease(u);
+        }
+
+        // ---- arc construction ----------------------------------------------
+        // Each arc is a run of abutting dash segments whose opacity falls off
+        // behind the head; that ramp is the taper. Geometry lives once in
+        // <defs> and is shared by every bloom layer through <use>.
+        function buildSegments(groupId, count, falloff) {
+          var g = document.getElementById(groupId);
+          var segs = [];
+          for (var i = 0; i < count; i++) {
+            var p = document.createElementNS(SVG_NS, "path");
+            p.setAttribute("d", d);
+            p.setAttribute("fill", "none");
+            p.setAttribute("stroke-linecap", i === 0 ? "round" : "butt");
+            p.setAttribute("opacity", String(Math.pow(1 - i / count, falloff)));
+            g.appendChild(p);
+            segs.push(p);
+          }
+          return segs;
+        }
+
+        var GLOW_SEGS = 20;
+        var CORE_SEGS = 26;
+        var glowLen = arcFrac * P;
+        var coreLen = 0.34 * glowLen;
+
+        var arcs = [
+          {
+            offset: 0,
+            glow: buildSegments("nb-seg-a-glow", GLOW_SEGS, 2.6),
+            core: buildSegments("nb-seg-a-core", CORE_SEGS, 1.4),
+          },
+          {
+            // Half a lap behind: the diametrically opposite corner. The pairing
+            // is most of why the effect reads as designed rather than random.
+            offset: 2,
+            glow: buildSegments("nb-seg-b-glow", GLOW_SEGS, 2.6),
+            core: buildSegments("nb-seg-b-core", CORE_SEGS, 1.4),
+          },
+        ];
+
+        // Three stacked bloom layers (soft / medium / wide) plus the filament.
+        // `spread` widens the stroke before it is blurred — that pairing, not
+        // the blur alone, is what makes the halo read as emitted light.
+        var MAX_REACH = 36;
+        var LAYERS = [
+          { blur: 30, spread: 1, opacity: 0.18, stroke: accent, deep: true },
+          { blur: 15, spread: 0.6, opacity: 0.3, stroke: accent, deep: true },
+          { blur: 8, spread: 0.3, opacity: 0.5, stroke: accent, deep: true },
+          { blur: 4, spread: 0.05, opacity: 0.9, stroke: hot, core: true },
+          { blur: 0, spread: -0.012, opacity: 1, stroke: "#ffffff", core: true },
+        ];
+
+        var under = document.getElementById("nb-bloom-under");
+        var over = document.getElementById("nb-bloom-over");
+        ["a", "b"].forEach(function (tag) {
+          LAYERS.forEach(function (layer) {
+            var u = document.createElementNS(SVG_NS, "use");
+            u.setAttribute("href", "#nb-seg-" + tag + "-" + (layer.core ? "core" : "glow"));
+            u.setAttribute("stroke", layer.stroke);
+            u.setAttribute(
+              "stroke-width",
+              String(Math.max(0.5, thickness + 2 * layer.spread * MAX_REACH * glow)),
+            );
+            u.setAttribute("opacity", String(Math.min(1, layer.opacity * glow)));
+            if (layer.blur > 0) u.style.filter = "blur(" + layer.blur + "px)";
+            (layer.deep ? under : over).appendChild(u);
+          });
+        });
+
+        /** Lay a segment run out behind `head`. Every value derives from head. */
+        function layout(segs, head, length) {
+          var step = length / segs.length;
+          for (var i = 0; i < segs.length; i++) {
+            var start = head - (i + 1) * step;
+            start = ((start % P) + P) % P;
+            segs[i].setAttribute("stroke-dasharray", step + " " + (P - step));
+            segs[i].setAttribute("stroke-dashoffset", String(-start));
+          }
+        }
+
+        function render(t) {
+          for (var i = 0; i < arcs.length; i++) {
+            var head = headAt(t + arcs[i].offset * beat);
+            layout(arcs[i].glow, head, glowLen);
+            layout(arcs[i].core, head, coreLen);
+          }
+        }
+
+        // ---- timeline -------------------------------------------------------
+        var wrap = document.getElementById("nb-wrap");
+        var panel = document.getElementById("nb-panel");
+        var nameEl = document.getElementById("nb-name");
+        var roleEl = document.getElementById("nb-role");
+
+        var tl = gsap.timeline({ paused: true });
+
+        gsap.set(wrap, { opacity: 0, scale: 0.965, transformOrigin: "0% 100%" });
+        gsap.set(nameEl, { y: 18, opacity: 0 });
+        gsap.set(roleEl, { y: 12, opacity: 0 });
+
+        // The driver: linear, spans the whole clip, and every arc position is
+        // recomputed from its own time value. Seeking to frame N gives the same
+        // state as playing to frame N because nothing carries over.
+        var driver = { t: 0 };
+        tl.to(
+          driver,
+          {
+            t: DUR,
+            duration: DUR,
+            ease: "none",
+            onUpdate: function () {
+              render(driver.t);
+            },
+          },
+          0,
+        );
+
+        tl.to(wrap, { opacity: 1, scale: 1, duration: 0.55, ease: "power3.out" }, 0.08);
+        tl.to(nameEl, { y: 0, opacity: 1, duration: 0.5, ease: "power3.out" }, 0.3);
+        tl.to(roleEl, { y: 0, opacity: 1, duration: 0.5, ease: "power3.out" }, 0.44);
+
+        tl.to(roleEl, { y: -10, opacity: 0, duration: 0.3, ease: "power2.in" }, 4.24);
+        tl.to(nameEl, { y: -14, opacity: 0, duration: 0.32, ease: "power2.in" }, 4.3);
+        tl.to(wrap, { opacity: 0, scale: 0.985, duration: 0.36, ease: "power2.in" }, 4.36);
+        tl.set(panel, { visibility: "hidden" }, 4.76);
+
+        render(0);
+
+        window.__timelines["lt-neon-border"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/blocks/lt-neon-border/registry-item.json b/registry/blocks/lt-neon-border/registry-item.json
new file mode 100644
index 0000000000..ec90a1a48f
--- /dev/null
+++ b/registry/blocks/lt-neon-border/registry-item.json
@@ -0,0 +1,192 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "lt-neon-border",
+  "type": "hyperframes:block",
+  "title": "Neon Border",
+  "description": "Two arcs of light travel the edge of a rounded panel and snap corner to corner, trailing a soft three-layer bloom. A lower third for a name and role.",
+  "stability": "experimental",
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 4.8,
+  "tags": ["lower-third", "glow", "loop", "video-primitive"],
+  "variables": [
+    {
+      "id": "name",
+      "type": "string",
+      "label": "Name",
+      "default": "Dr. Maya Chen"
+    },
+    {
+      "id": "role",
+      "type": "string",
+      "label": "Role",
+      "default": "Host · Neuroscientist"
+    },
+    {
+      "id": "accent",
+      "type": "color",
+      "label": "Accent",
+      "default": "#cc9149"
+    },
+    {
+      "id": "movement",
+      "type": "enum",
+      "label": "Movement",
+      "default": "step",
+      "options": [
+        {
+          "value": "step",
+          "label": "Step (snap at corners)"
+        },
+        {
+          "value": "glide",
+          "label": "Glide (smooth)"
+        }
+      ]
+    },
+    {
+      "id": "speed",
+      "type": "number",
+      "label": "Speed",
+      "default": 1.6,
+      "min": 0.2,
+      "max": 6,
+      "step": 0.1,
+      "unit": "corners/s"
+    },
+    {
+      "id": "cornerRadius",
+      "type": "number",
+      "label": "Corner radius",
+      "default": 26,
+      "min": 0,
+      "max": 90,
+      "step": 1,
+      "unit": "px"
+    },
+    {
+      "id": "thickness",
+      "type": "number",
+      "label": "Thickness",
+      "default": 5,
+      "min": 1,
+      "max": 16,
+      "step": 1,
+      "unit": "px"
+    },
+    {
+      "id": "arcLength",
+      "type": "number",
+      "label": "Arc length",
+      "default": 22,
+      "min": 5,
+      "max": 100,
+      "step": 1,
+      "unit": "%"
+    },
+    {
+      "id": "glow",
+      "type": "number",
+      "label": "Glow",
+      "default": 1,
+      "min": 0,
+      "max": 2,
+      "step": 0.05,
+      "unit": "x"
+    }
+  ],
+  "files": [
+    {
+      "path": "lt-neon-border.html",
+      "type": "hyperframes:block"
+    }
+  ],
+  "params": [
+    {
+      "id": "name",
+      "type": "string",
+      "label": "Name",
+      "default": "Dr. Maya Chen"
+    },
+    {
+      "id": "role",
+      "type": "string",
+      "label": "Role",
+      "default": "Host · Neuroscientist"
+    },
+    {
+      "id": "accent",
+      "type": "color",
+      "label": "Accent",
+      "default": "#cc9149"
+    },
+    {
+      "id": "movement",
+      "type": "enum",
+      "label": "Movement",
+      "default": "step",
+      "options": [
+        {
+          "value": "step",
+          "label": "Step (snap at corners)"
+        },
+        {
+          "value": "glide",
+          "label": "Glide (smooth)"
+        }
+      ]
+    },
+    {
+      "id": "speed",
+      "type": "number",
+      "label": "Speed",
+      "default": 1.6,
+      "min": 0.2,
+      "max": 6,
+      "step": 0.1,
+      "unit": "corners/s"
+    },
+    {
+      "id": "cornerRadius",
+      "type": "number",
+      "label": "Corner radius",
+      "default": 26,
+      "min": 0,
+      "max": 90,
+      "step": 1,
+      "unit": "px"
+    },
+    {
+      "id": "thickness",
+      "type": "number",
+      "label": "Thickness",
+      "default": 5,
+      "min": 1,
+      "max": 16,
+      "step": 1,
+      "unit": "px"
+    },
+    {
+      "id": "arcLength",
+      "type": "number",
+      "label": "Arc length",
+      "default": 22,
+      "min": 5,
+      "max": 100,
+      "step": 1,
+      "unit": "%"
+    },
+    {
+      "id": "glow",
+      "type": "number",
+      "label": "Glow",
+      "default": 1,
+      "min": 0,
+      "max": 2,
+      "step": 0.05,
+      "unit": "x"
+    }
+  ]
+}
diff --git a/registry/blocks/macos-tahoe-liquid-glass/macos-tahoe-liquid-glass.html b/registry/blocks/macos-tahoe-liquid-glass/macos-tahoe-liquid-glass.html
index 840d61553f..fe8da43ff7 100644
--- a/registry/blocks/macos-tahoe-liquid-glass/macos-tahoe-liquid-glass.html
+++ b/registry/blocks/macos-tahoe-liquid-glass/macos-tahoe-liquid-glass.html
@@ -1251,6 +1251,26 @@
       loader.setDRACOLoader(draco);
 
       // MacBook
+      // The replacement device models carry UVs authored for a tiling material
+      // (the laptop panel runs u -6.3..6.3), so mapping one screen image onto
+      // them clamps at the edges and smears the last row of pixels across the
+      // whole panel. Both screens are flat planes, so derive planar UVs from
+      // the mesh's own bounds instead of trusting what shipped.
+      function planarScreenUv(mesh) {
+        var g = mesh.geometry;
+        g.computeBoundingBox();
+        var bb = g.boundingBox;
+        var pos = g.attributes.position;
+        var w = bb.max.x - bb.min.x || 1;
+        var h = bb.max.y - bb.min.y || 1;
+        var uv = new Float32Array(pos.count * 2);
+        for (var i = 0; i < pos.count; i++) {
+          uv[i * 2] = (pos.getX(i) - bb.min.x) / w;
+          uv[i * 2 + 1] = (pos.getY(i) - bb.min.y) / h;
+        }
+        g.setAttribute("uv", new THREE.BufferAttribute(uv, 2));
+      }
+
       loader.load("models/macbook.glb", function (gltf) {
         var m = gltf.scene;
         var box = new THREE.Box3().setFromObject(m);
@@ -1261,45 +1281,14 @@
         m.position.sub(box.getCenter(new THREE.Vector3()));
 
         m.traverse(function (child) {
-          if (child.isMesh && (child.name === "matte" || child.name === "Matte")) {
+          // `display` is the panel. `display-notch` is the bezel cut-out beside
+          // it and must keep its own material, so this cannot be a prefix test.
+          if (child.isMesh && child.name.replace(/\.\d+$/, "") === "display") {
+            planarScreenUv(child);
             child.material = new THREE.MeshBasicMaterial({ map: lapTex });
           }
         });
 
-        // Apple logo on back of lid — exact coords from model inspection:
-        // back mesh center: (0, 0.04, -1.54), matte center: (0, 0.15, -1.56)
-        // Back surface faces -Z. Logo at z = -1.63 (outside back surface), facing -Z.
-        var lc = document.createElement("canvas");
-        lc.width = 256;
-        lc.height = 256;
-        var lx = lc.getContext("2d");
-        lx.clearRect(0, 0, 256, 256);
-        lx.save();
-        lx.translate(128, 128);
-        lx.scale(11, 11);
-        lx.translate(-12, -13);
-        lx.fillStyle = "#b8b8bc";
-        lx.fill(
-          new Path2D(
-            "M18.71,19.5C17.88,20.49 17,21.4 15.66,21.42C14.29,21.45 13.73,20.56 12.18,20.56C10.63,20.56 9.99,21.4 8.74,21.45C7.44,21.5 6.47,20.36 5.62,19.39C3.89,17.39 2.59,13.78 4.37,11.37C5.25,10.17 6.61,9.42 8.08,9.4C9.4,9.37 10.62,10.35 11.43,10.35C12.24,10.35 13.72,9.17 15.32,9.35C15.98,9.38 17.66,9.61 18.72,11.17C18.62,11.23 16.39,12.52 16.42,15.19C16.45,18.37 19.18,19.35 19.21,19.36ZM15.23,7.7C15.96,6.82 16.43,5.6 16.31,4.38C15.25,4.42 13.97,5.09 13.22,5.96C12.55,6.74 11.98,7.99 12.12,9.18C13.29,9.27 14.5,8.57 15.23,7.7Z",
-          ),
-        );
-        lx.restore();
-        var logoTex = new THREE.CanvasTexture(lc);
-        logoTex.minFilter = THREE.LinearFilter;
-        var appleLogoMesh = new THREE.Mesh(
-          new THREE.PlaneGeometry(0.55, 0.55),
-          new THREE.MeshBasicMaterial({
-            map: logoTex,
-            transparent: true,
-            depthWrite: false,
-            side: THREE.DoubleSide,
-          }),
-        );
-        appleLogoMesh.position.set(0, 0.1, -1.63);
-        appleLogoMesh.rotation.y = PI;
-        m.add(appleLogoMesh);
-
         lapGrp.add(m);
         ready++;
         if (ready === 1) onReady();
diff --git a/registry/blocks/macos-tahoe-liquid-glass/models/iphone.glb b/registry/blocks/macos-tahoe-liquid-glass/models/iphone.glb
index fd73368051..f042300855 100644
Binary files a/registry/blocks/macos-tahoe-liquid-glass/models/iphone.glb and b/registry/blocks/macos-tahoe-liquid-glass/models/iphone.glb differ
diff --git a/registry/blocks/macos-tahoe-liquid-glass/models/macbook.glb b/registry/blocks/macos-tahoe-liquid-glass/models/macbook.glb
index 2fed3be1ba..762511110a 100644
Binary files a/registry/blocks/macos-tahoe-liquid-glass/models/macbook.glb and b/registry/blocks/macos-tahoe-liquid-glass/models/macbook.glb differ
diff --git a/registry/blocks/oscilloscope-trace/oscilloscope-trace.html b/registry/blocks/oscilloscope-trace/oscilloscope-trace.html
new file mode 100644
index 0000000000..720d7b009f
--- /dev/null
+++ b/registry/blocks/oscilloscope-trace/oscilloscope-trace.html
@@ -0,0 +1,520 @@
+<!doctype html>
+<html
+  lang="en"
+  data-composition-variables='[
+    {"id":"waveform","type":"enum","label":"Waveform","default":"sine","options":[{"value":"sine","label":"Sine"},{"value":"square","label":"Square"},{"value":"triangle","label":"Triangle"},{"value":"data","label":"Data series"}]},
+    {"id":"frequency","type":"number","label":"Signal frequency","unit":"Hz","default":12,"min":0.1,"max":200,"step":0.1},
+    {"id":"amplitude","type":"number","label":"Amplitude","unit":"div","default":3,"min":0.1,"max":4,"step":0.1},
+    {"id":"persistenceMs","type":"number","label":"Phosphor persistence (tau)","unit":"ms","default":100,"min":1,"max":1000,"step":1},
+    {"id":"phosphorColor","type":"color","label":"Phosphor colour","default":"#5dff8f"},
+    {"id":"sweepRate","type":"number","label":"Sweep rate","unit":"sweeps/s","default":5,"min":0.25,"max":60,"step":0.25},
+    {"id":"dataSeries","type":"string","label":"Data series (waveform=data)","default":"","placeholder":"0,0.4,0.9,0.3,-0.6,-1,-0.2,0.5"}
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Oscilloscope Trace</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #05070a;
+      }
+      #os-root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        font-family: "JetBrains Mono", ui-monospace, monospace;
+      }
+      #os-bg {
+        position: absolute;
+        inset: 0;
+        background: radial-gradient(120% 120% at 30% 25%, #0d141b 0%, #05070a 68%);
+      }
+      #os-screen {
+        position: absolute;
+        inset: 0;
+        width: 1920px;
+        height: 1080px;
+        display: block;
+      }
+      /* Purely decorative CRT falloff — no timing, no motion. */
+      #os-vignette {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        background: radial-gradient(
+          78% 78% at 34% 50%,
+          rgba(0, 0, 0, 0) 55%,
+          rgba(0, 0, 0, 0.55) 100%
+        );
+      }
+      #os-readout {
+        position: absolute;
+        left: 1250px;
+        top: 150px;
+        width: 520px;
+        color: #6f8794;
+        font-size: 26px;
+        line-height: 1.15;
+        letter-spacing: 0.04em;
+      }
+      #os-readout .os-title {
+        color: #b9ccd6;
+        font-size: 34px;
+        letter-spacing: 0.22em;
+        padding-bottom: 26px;
+        border-bottom: 2px solid #1d2a33;
+        margin-bottom: 26px;
+      }
+      #os-readout .os-row {
+        display: flex;
+        justify-content: space-between;
+        padding: 13px 0;
+      }
+      #os-readout .os-val {
+        color: #d7e6ee;
+      }
+      #os-readout .os-note {
+        margin-top: 28px;
+        font-size: 20px;
+        color: #6a7b85;
+        line-height: 1.5;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="os-root"
+      data-composition-id="oscilloscope-trace"
+      data-start="0"
+      data-duration="6"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="os-bg"></div>
+      <canvas
+        id="os-screen"
+        class="clip"
+        width="1920"
+        height="1080"
+        data-start="0"
+        data-duration="6"
+        data-track-index="0"
+      ></canvas>
+      <div id="os-vignette"></div>
+      <div id="os-readout" class="clip" data-start="0" data-duration="6" data-track-index="1">
+        <div class="os-title">OSCILLOSCOPE</div>
+        <div class="os-row"><span>SOURCE</span><span class="os-val" id="os-r-wave">SINE</span></div>
+        <div class="os-row"><span>FREQ</span><span class="os-val" id="os-r-freq">-</span></div>
+        <div class="os-row"><span>TIMEBASE</span><span class="os-val" id="os-r-time">-</span></div>
+        <div class="os-row"><span>VERT</span><span class="os-val" id="os-r-amp">-</span></div>
+        <div class="os-row"><span>PHOSPHOR</span><span class="os-val" id="os-r-phos">-</span></div>
+        <div class="os-note" id="os-r-note"></div>
+      </div>
+    </div>
+    <script>
+      (function () {
+        "use strict";
+
+        // ---------------------------------------------------------------
+        // Oscilloscope trace with phosphor persistence.
+        //
+        // Two pieces of physical truth drive the look:
+        //
+        //  1. PERSISTENCE. The phosphor keeps emitting after the beam has
+        //     passed, decaying as exp(-age/tau). Decay constants by EIA
+        //     phosphor class (research entry F#10):
+        //       P11/P31 - 0.01-1 ms   (what a real bench scope uses: no
+        //                              visible afterglow at video rates)
+        //       P1      - 80-150 ms   (the "vintage glow" look; tau ~= 100 ms
+        //                              is the entry's recommended default)
+        //       P33     - > 1 s
+        //       P2/P7   - 30 s .. ~1 min (radar territory, out of range here)
+        //     The tail window is 3*tau: after three time constants ~5% of the
+        //     brightness remains, which the entry gives as the safe cutoff.
+        //
+        //  2. BEAM-VELOCITY BRIGHTNESS. A trace is brighter where the beam
+        //     moves slower, because the same deposited energy is spread over
+        //     a shorter path. Each sub-step deposits a fixed amount of energy
+        //     (constant dt), so surface brightness goes as 1/segment-length.
+        //     Flat parts of the waveform are bright; fast vertical edges are
+        //     faint. Qualitative law only - the research entry states it with
+        //     no proportionality constant, so the reference length below is
+        //     the physical minimum (pure horizontal sweep motion), not a
+        //     fudge factor.
+        //
+        // SWEEP RATE PROVENANCE. The phosphor decay constants above are
+        // measured; the sweep rate is NOT - the research entry gives no
+        // timebase figure. The default of 5 sweeps/s is authored: across the
+        // 10-division graticule it works out to 20 ms/div, a real value from
+        // the standard 1-2-5 timebase sequence, picked because it puts a few
+        // cycles of the default signal on screen. Treat it as a dial, not as
+        // a measurement.
+        //
+        // NO FEEDBACK BUFFER. The canvas is cleared every frame and the tail
+        // is recomputed by evaluating the beam curve backwards in time from
+        // the current frame: P(t - k*dt) for k = 0..K. Frame N depends only
+        // on N, so seeking anywhere is exact rather than approximate.
+        // ---------------------------------------------------------------
+
+        var COMP_ID = "oscilloscope-trace";
+        var DURATION = 6;
+
+        // Screen geometry: a 10x8 division graticule of SQUARE divisions,
+        // the standard CRT scope face.
+        var DIV = 100;
+        var DIVS_X = 10;
+        var DIVS_Y = 8;
+        var SW = DIV * DIVS_X;
+        var SH = DIV * DIVS_Y;
+        var SX = 140;
+        var SY = 140;
+        var CY = SY + SH / 2;
+
+        // Tail window in time constants (research entry F#10: 3*tau leaves
+        // ~5% weight, stated there as the safe cutoff).
+        var TAIL_TAUS = 3;
+        // Sub-step count. The entry suggests K ~= 24 steps across the window,
+        // which is enough to quantise the DECAY but far too coarse spatially:
+        // at 12 Hz the beam would advance 0.15 of a cycle per step and the
+        // trace would render as a polygon. So K is derived from how fast the
+        // beam actually moves - keep each sub-step under SEG_TARGET_PX of
+        // travel. That target and the clamps are MY numbers, not measured
+        // ones; the clamp bounds per-frame cost when persistence is long.
+        var SEG_TARGET_PX = 3;
+        var K_MIN = 120;
+        var K_MAX = 8000;
+
+        // Band-limit for the square wave. A real generator + a real scope
+        // front end both have finite bandwidth, so the edge is steep but not
+        // instantaneous; a mathematical step would make the vertical edge one
+        // sub-step long and the velocity law would erase it entirely.
+        var SQUARE_SHARPNESS = 8;
+
+        function readVariables() {
+          var api = window.__hyperframes && window.__hyperframes.getVariables;
+          if (typeof api === "function") return api() || {};
+          // Standalone fallback (raw file opened without the runtime): read
+          // the same declaration the runtime reads, so defaults have exactly
+          // one home.
+          var out = {};
+          try {
+            var raw = document.documentElement.getAttribute("data-composition-variables");
+            var decls = JSON.parse(raw || "[]");
+            for (var i = 0; i < decls.length; i++) out[decls[i].id] = decls[i].default;
+          } catch (err) {
+            /* declaration missing or malformed - fall through to hard defaults */
+          }
+          return out;
+        }
+
+        function num(value, fallback, min, max) {
+          var n = typeof value === "number" ? value : parseFloat(value);
+          if (!isFinite(n)) n = fallback;
+          return Math.min(max, Math.max(min, n));
+        }
+
+        var V = readVariables();
+        var waveform =
+          ["sine", "square", "triangle", "data"].indexOf(String(V.waveform)) >= 0
+            ? String(V.waveform)
+            : "sine";
+        var frequency = num(V.frequency, 12, 0.1, 200);
+        var amplitude = num(V.amplitude, 3, 0.1, 4);
+        var tau = num(V.persistenceMs, 100, 1, 1000) / 1000;
+        var sweepRate = num(V.sweepRate, 5, 0.25, 60);
+        var phosphor = parseColor(V.phosphorColor, [93, 255, 143]);
+
+        // waveform="data" replays a supplied series instead of a synthetic
+        // shape: comma/whitespace separated numbers, clamped to -1..1, linearly
+        // interpolated, one full pass of the series per `frequency` cycle.
+        // Empty or unparseable -> falls back to sine.
+        var series = String(V.dataSeries == null ? "" : V.dataSeries)
+          .split(/[\s,]+/)
+          .map(parseFloat)
+          .filter(function (n) {
+            return isFinite(n);
+          })
+          .map(function (n) {
+            return Math.min(1, Math.max(-1, n));
+          });
+        if (waveform === "data" && series.length < 2) waveform = "sine";
+
+        function parseColor(value, fallback) {
+          var m = /^#?([0-9a-f]{6})$/i.exec(String(value == null ? "" : value).trim());
+          if (!m) return fallback;
+          var v = parseInt(m[1], 16);
+          return [(v >> 16) & 255, (v >> 8) & 255, v & 255];
+        }
+
+        function rgba(c, a) {
+          return "rgba(" + c[0] + "," + c[1] + "," + c[2] + "," + a.toFixed(4) + ")";
+        }
+
+        // --- the signal: pure function of time, no state ------------------
+
+        function wave(t) {
+          var p = frequency * t; // cycles elapsed
+          if (waveform === "square") {
+            return Math.tanh(SQUARE_SHARPNESS * Math.sin(2 * Math.PI * p));
+          }
+          if (waveform === "triangle") {
+            return (2 / Math.PI) * Math.asin(Math.sin(2 * Math.PI * p));
+          }
+          if (waveform === "data") {
+            var frac = p - Math.floor(p);
+            var pos = frac * (series.length - 1);
+            var i = Math.floor(pos);
+            var f = pos - i;
+            var a = series[i];
+            var b = series[Math.min(series.length - 1, i + 1)];
+            return a + (b - a) * f;
+          }
+          return Math.sin(2 * Math.PI * p);
+        }
+
+        /** Horizontal sweep position, 0..1 across the graticule. */
+        function sweepU(t) {
+          var s = t * sweepRate;
+          return s - Math.floor(s);
+        }
+
+        function beamX(t) {
+          return SX + sweepU(t) * SW;
+        }
+
+        function beamY(t) {
+          return CY - wave(t) * amplitude * DIV;
+        }
+
+        // Upper bound on beam speed, in px/s, used to pick the sub-step count.
+        // Horizontal is the constant sweep; vertical is the waveform's steepest
+        // slope, which differs per shape - a band-limited square is
+        // SQUARE_SHARPNESS times steeper at its edge than a sine of the same
+        // frequency, and under-sampling exactly there is what turns the edge
+        // into a polygon.
+        var slopeBound;
+        if (waveform === "square") {
+          slopeBound = SQUARE_SHARPNESS * 2 * Math.PI * frequency;
+        } else if (waveform === "triangle") {
+          slopeBound = 4 * frequency;
+        } else if (waveform === "data") {
+          var maxStep = 0;
+          for (var si = 1; si < series.length; si++) {
+            maxStep = Math.max(maxStep, Math.abs(series[si] - series[si - 1]));
+          }
+          slopeBound = maxStep * (series.length - 1) * frequency;
+        } else {
+          slopeBound = 2 * Math.PI * frequency;
+        }
+        var beamSpeedMax = Math.sqrt(
+          Math.pow(SW * sweepRate, 2) + Math.pow(slopeBound * amplitude * DIV, 2),
+        );
+
+        // --- graticule (drawn once to an offscreen canvas) ----------------
+
+        var grat = document.createElement("canvas");
+        grat.width = 1920;
+        grat.height = 1080;
+        (function drawGraticule() {
+          var g = grat.getContext("2d");
+          g.fillStyle = "#04080a";
+          g.fillRect(SX, SY, SW, SH);
+          g.strokeStyle = "rgba(120,180,160,0.16)";
+          g.lineWidth = 1;
+          for (var i = 1; i < DIVS_X; i++) {
+            g.beginPath();
+            g.moveTo(SX + i * DIV + 0.5, SY);
+            g.lineTo(SX + i * DIV + 0.5, SY + SH);
+            g.stroke();
+          }
+          for (var j = 1; j < DIVS_Y; j++) {
+            g.beginPath();
+            g.moveTo(SX, SY + j * DIV + 0.5);
+            g.lineTo(SX + SW, SY + j * DIV + 0.5);
+            g.stroke();
+          }
+          // Centre axes carry the fine 0.2-division ticks, as on a real face.
+          g.strokeStyle = "rgba(150,205,185,0.32)";
+          var cx = SX + SW / 2 + 0.5;
+          var cy = CY + 0.5;
+          g.beginPath();
+          g.moveTo(cx, SY);
+          g.lineTo(cx, SY + SH);
+          g.moveTo(SX, cy);
+          g.lineTo(SX + SW, cy);
+          g.stroke();
+          g.strokeStyle = "rgba(150,205,185,0.42)";
+          for (var k = 1; k < DIVS_X * 5; k++) {
+            var x = SX + (k * DIV) / 5 + 0.5;
+            g.beginPath();
+            g.moveTo(x, cy - 9);
+            g.lineTo(x, cy + 9);
+            g.stroke();
+          }
+          for (var m = 1; m < DIVS_Y * 5; m++) {
+            var y = SY + (m * DIV) / 5 + 0.5;
+            g.beginPath();
+            g.moveTo(cx - 9, y);
+            g.lineTo(cx + 9, y);
+            g.stroke();
+          }
+          g.strokeStyle = "rgba(160,215,195,0.55)";
+          g.lineWidth = 2;
+          g.strokeRect(SX + 1, SY + 1, SW - 2, SH - 2);
+        })();
+
+        // --- per-frame paint ----------------------------------------------
+
+        var canvas = document.getElementById("os-screen");
+        var ctx = canvas.getContext("2d");
+
+        function draw(t) {
+          ctx.globalCompositeOperation = "source-over";
+          ctx.clearRect(0, 0, 1920, 1080);
+          ctx.drawImage(grat, 0, 0);
+
+          var windowS = TAIL_TAUS * tau;
+          var K = Math.max(
+            K_MIN,
+            Math.min(K_MAX, Math.round((windowS * beamSpeedMax) / SEG_TARGET_PX)),
+          );
+          var dt = windowS / K;
+          // Length the beam covers in one sub-step with zero vertical motion.
+          // That is the slowest the beam can ever move, so it is the maximum
+          // brightness reference and the velocity weight never exceeds 1.
+          var lRef = SW * sweepRate * dt;
+
+          ctx.globalCompositeOperation = "lighter";
+          ctx.lineCap = "round";
+
+          // Oldest -> newest, so the bright head lands on top.
+          var prevX = 0;
+          var prevY = 0;
+          var prevU = 0;
+          var havePrev = false;
+          for (var k = K; k >= 0; k--) {
+            var tk = t - k * dt;
+            if (tk < 0) {
+              // Before frame 0 the beam had not been switched on yet.
+              havePrev = false;
+              continue;
+            }
+            var u = sweepU(tk);
+            var x = SX + u * SW;
+            var y = beamY(tk);
+            if (havePrev && u >= prevU) {
+              var dx = x - prevX;
+              var dy = y - prevY;
+              var len = Math.sqrt(dx * dx + dy * dy);
+              // Beam-velocity law: brightness ~ 1 / path length per unit time.
+              var vel = len > 1e-6 ? Math.min(1, lRef / len) : 1;
+              var decay = Math.exp((-k * dt) / tau);
+              var a = decay * vel;
+              if (a > 0.002) {
+                ctx.beginPath();
+                ctx.moveTo(prevX, prevY);
+                ctx.lineTo(x, y);
+                ctx.strokeStyle = rgba(phosphor, a * 0.13);
+                ctx.lineWidth = 13;
+                ctx.stroke();
+                ctx.strokeStyle = rgba(phosphor, a * 0.9);
+                ctx.lineWidth = 3;
+                ctx.stroke();
+                if (a > 0.55) {
+                  // Overdriven phosphor saturates towards white at the head.
+                  ctx.strokeStyle =
+                    "rgba(255,255,255," + (((a - 0.55) / 0.45) * 0.7).toFixed(4) + ")";
+                  ctx.lineWidth = 1.4;
+                  ctx.stroke();
+                }
+              }
+            }
+            // Retrace is blanked on a real scope: when u wraps, drop the
+            // connecting segment instead of drawing a line back across.
+            prevX = x;
+            prevY = y;
+            prevU = u;
+            havePrev = true;
+          }
+
+          // Beam head: the spot itself, brightest point on the screen.
+          var hx = beamX(t);
+          var hy = beamY(t);
+          var glow = ctx.createRadialGradient(hx, hy, 0, hx, hy, 22);
+          glow.addColorStop(0, "rgba(255,255,255,0.95)");
+          glow.addColorStop(0.22, rgba(phosphor, 0.85));
+          glow.addColorStop(1, rgba(phosphor, 0));
+          ctx.fillStyle = glow;
+          ctx.beginPath();
+          ctx.arc(hx, hy, 22, 0, Math.PI * 2);
+          ctx.fill();
+
+          ctx.globalCompositeOperation = "source-over";
+        }
+
+        // --- readout --------------------------------------------------------
+
+        (function fillReadout() {
+          // Nearest EIA phosphor class for the chosen tau (bands from the
+          // research entry). Labelling, not simulation.
+          var tauMs = tau * 1000;
+          var cls = tauMs <= 1 ? "P31" : tauMs <= 150 ? "P1" : "P33";
+          var msPerDiv = 1000 / (sweepRate * DIVS_X);
+          function set(id, text) {
+            document.getElementById(id).textContent = text;
+          }
+          set("os-r-wave", waveform.toUpperCase());
+          set("os-r-freq", frequency.toFixed(frequency < 10 ? 2 : 1) + " Hz");
+          set(
+            "os-r-time",
+            (msPerDiv >= 10 ? msPerDiv.toFixed(0) : msPerDiv.toFixed(2)) + " ms/div",
+          );
+          set("os-r-amp", amplitude.toFixed(1) + " div pk");
+          set("os-r-phos", cls + "  tau " + tauMs.toFixed(0) + " ms");
+          set(
+            "os-r-note",
+            "Trace brightness falls as exp(-age/tau) behind the beam, and rises where the beam slows.",
+          );
+        })();
+
+        // --- timeline -------------------------------------------------------
+        //
+        // tl.eventCallback("onUpdate", ...) is NOT usable here: the runtime
+        // seeks with suppressEvents, so the callback never fires on a seek and
+        // the canvas would keep whatever the last played frame drew. A tweened
+        // property with an accessor is applied by GSAP on every render,
+        // including suppressed ones, so the repaint is driven from the setter.
+
+        var beam = { t: 0 };
+        var driver = {};
+        Object.defineProperty(driver, "t", {
+          get: function () {
+            return beam.t;
+          },
+          set: function (value) {
+            beam.t = value;
+            draw(value);
+          },
+        });
+
+        window.__timelines = window.__timelines || {};
+        var tl = gsap.timeline({ paused: true });
+        tl.to(driver, { t: DURATION, duration: DURATION, ease: "none", lazy: false }, 0);
+        window.__timelines[COMP_ID] = tl;
+
+        draw(0);
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/blocks/oscilloscope-trace/registry-item.json b/registry/blocks/oscilloscope-trace/registry-item.json
new file mode 100644
index 0000000000..b2236d002c
--- /dev/null
+++ b/registry/blocks/oscilloscope-trace/registry-item.json
@@ -0,0 +1,91 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "oscilloscope-trace",
+  "type": "hyperframes:block",
+  "title": "Oscilloscope Trace",
+  "description": "CRT oscilloscope beam sweeping a waveform across a 10x8 graticule, with closed-form phosphor persistence: the tail decays as exp(-age/tau) and brightens where the beam slows",
+  "tags": ["instrument", "data", "showcase", "retro"],
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 6,
+  "variables": [
+    {
+      "id": "waveform",
+      "type": "enum",
+      "label": "Waveform",
+      "default": "sine",
+      "options": [
+        { "value": "sine", "label": "Sine" },
+        { "value": "square", "label": "Square" },
+        { "value": "triangle", "label": "Triangle" },
+        { "value": "data", "label": "Data series" }
+      ]
+    },
+    {
+      "id": "frequency",
+      "type": "number",
+      "label": "Signal frequency",
+      "unit": "Hz",
+      "default": 12,
+      "min": 0.1,
+      "max": 200,
+      "step": 0.1
+    },
+    {
+      "id": "amplitude",
+      "type": "number",
+      "label": "Amplitude",
+      "unit": "div",
+      "default": 3,
+      "min": 0.1,
+      "max": 4,
+      "step": 0.1
+    },
+    {
+      "id": "persistenceMs",
+      "type": "number",
+      "label": "Phosphor persistence (tau)",
+      "unit": "ms",
+      "default": 100,
+      "min": 1,
+      "max": 1000,
+      "step": 1
+    },
+    {
+      "id": "phosphorColor",
+      "type": "color",
+      "label": "Phosphor colour",
+      "default": "#5dff8f"
+    },
+    {
+      "id": "sweepRate",
+      "type": "number",
+      "label": "Sweep rate",
+      "unit": "sweeps/s",
+      "default": 5,
+      "min": 0.25,
+      "max": 60,
+      "step": 0.25
+    },
+    {
+      "id": "dataSeries",
+      "type": "string",
+      "label": "Data series (waveform=data)",
+      "default": "",
+      "placeholder": "0,0.4,0.9,0.3,-0.6,-1,-0.2,0.5"
+    }
+  ],
+  "files": [
+    {
+      "path": "oscilloscope-trace.html",
+      "target": "compositions/oscilloscope-trace.html",
+      "type": "hyperframes:composition"
+    }
+  ],
+  "preview": {
+    "video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/oscilloscope-trace.mp4",
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/oscilloscope-trace.png"
+  }
+}
diff --git a/registry/blocks/rack-focus/rack-focus.html b/registry/blocks/rack-focus/rack-focus.html
new file mode 100644
index 0000000000..fca7b47941
--- /dev/null
+++ b/registry/blocks/rack-focus/rack-focus.html
@@ -0,0 +1,605 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Rack Focus</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <!--
+      RACK FOCUS: a focus pull with real aperture bokeh.
+
+      WHAT THIS NEEDS TO READ AT ALL
+      ------------------------------
+      A focus pull is a depth effect. It only reads when the frame holds
+      content at two clearly separated depths: something near the lens and
+      something far behind it. Point it at flat, single-plane content and
+      nothing happens, exactly like a dolly zoom on a flat card.
+
+      This block therefore carries its own depth-layered scene, a night
+      exterior built from light sources spread from 1.15 m to 90 m, so it
+      works standalone. Every depth is a variable: `nearfocus` is where the
+      pull starts, `farfocus` is where it ends, and the scene's two subjects
+      sit at those depths. Change them and the subjects move with them.
+
+      WHY THIS IS NOT A BLUR
+      ----------------------
+      A CSS/Gaussian blur softens everything uniformly. A real defocus turns
+      each point of light into an image of the APERTURE, scaled by its circle
+      of confusion, so a bright point becomes a hard-edged polygon disc whose
+      size grows with distance from the focal plane, and which clips to a
+      cat's-eye toward the frame corners. Every light in this scene is
+      splatted as an aperture-shaped sprite at its own circle of confusion.
+
+      CIRCLE OF CONFUSION, from three.js BokehShader2 (MIT), Martins Upitis
+      --------------------------------------------------------------------
+      Read from examples/jsm/shaders/BokehShader2.js:
+
+          float CoC = 0.03;              // circle of confusion in mm
+                                         // (35mm film = 0.03mm)
+          float f = focalLength;         // mm
+          float d = fDepth * 1000.0;     // focal plane in mm
+          float o = depth  * 1000.0;     // object depth in mm
+          float a = (o * f) / (o - f);
+          float b = (d * f) / (d - f);
+          float c = (d - f) / (d * fstop * CoC);
+          blur = abs(a - b) * c;
+
+      `blur` comes out in units of that 0.03 mm acceptable-sharpness circle,
+      so the defocus DIAMETER on the sensor is `blur * 0.03` mm, which this
+      block converts to pixels with the sensor width. Same constants, same
+      formula, independently written, no code copied. This agrees with the
+      Zeiss thin-lens form CoC = (f²/N)·|1/S - 1/U| for S >> f.
+
+      Aperture shape is the community-standard regular-polygon boundary
+      d(θ) = cos(π/n) / cos(mod(θ, 2π/n) - π/n), n = blade count (real
+      irises ship 5, 6, 8 or 9 blades). Cat's-eye clipping is the aperture
+      intersected with two barrel openings offset along the radial direction,
+      which is the actual mechanism of mechanical vignetting.
+
+      DETERMINISM
+      -----------
+      State at frame N is computed from N. The focal distance is a closed-form
+      function of t, every circle of confusion follows from a static depth and
+      that focal distance, and the scene point cloud is built once from a
+      seeded PRNG. No accumulation, no clocks, no unseeded randomness.
+    -->
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #000;
+        overflow: hidden;
+      }
+      #rf-root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #rf-backdrop {
+        position: absolute;
+        inset: 0;
+        background: #05060a;
+      }
+      #rf-canvas {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="rf-root"
+      data-composition-id="rack-focus"
+      data-root="true"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="6"
+      data-composition-variables='[
+        {"id":"nearfocus","type":"number","label":"Near focal distance","default":1.2,"min":0.2,"max":100,"step":0.05,"unit":"m"},
+        {"id":"farfocus","type":"number","label":"Far focal distance","default":80,"min":0.3,"max":400,"step":0.5,"unit":"m"},
+        {"id":"focallength","type":"number","label":"Focal length","default":85,"min":12,"max":300,"step":1,"unit":"mm"},
+        {"id":"aperture","type":"number","label":"Aperture (f-number)","default":1.8,"min":0.95,"max":22,"step":0.05},
+        {"id":"blades","type":"number","label":"Aperture blades (bokeh shape)","default":6,"min":3,"max":14,"step":1},
+        {"id":"catseye","type":"number","label":"Cat eye clipping at the corners","default":0.62,"min":0,"max":1,"step":0.02},
+        {"id":"pullstart","type":"number","label":"Pull start","default":1.2,"min":0,"max":30,"step":0.05,"unit":"s"},
+        {"id":"pullduration","type":"number","label":"Pull duration","default":3.2,"min":0.1,"max":30,"step":0.05,"unit":"s"},
+        {"id":"pullease","type":"string","label":"Pull easing (GSAP ease)","default":"power2.inOut","placeholder":"power2.inOut"},
+        {"id":"bokeh","type":"number","label":"Bokeh exposure","default":1,"min":0,"max":3,"step":0.05},
+        {"id":"backdrop","type":"color","label":"Backdrop","default":"#05060a"}
+      ]'
+    >
+      <div id="rf-backdrop"></div>
+      <canvas id="rf-canvas" width="1920" height="1080"></canvas>
+
+      <!-- Driver clip: gives HyperFrames a timed element to own on track 0. -->
+      <div
+        id="rf-drv"
+        class="clip"
+        data-start="0"
+        data-duration="6"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+
+    <script>
+      (function () {
+        var DUR = 6;
+        var W = 1920;
+        var H = 1080;
+
+        // 36mm-wide sensor, 16:9 active area. Pixels per millimetre is the
+        // only thing the projection needs, and it is the same on both axes.
+        var SENSOR_W_MM = 36;
+        var PX_PER_MM = W / SENSOR_W_MM;
+
+        // BokehShader2's acceptable-sharpness circle, in mm (35mm film).
+        var COC_MM = 0.03;
+
+        // Defocus is clamped so a wildly out-of-range focus setting cannot
+        // splat sprites the size of the frame. BokehShader2 clamps the same
+        // quantity with its `maxblur` uniform.
+        var MAX_COC_R_PX = 0.1 * H;
+        // Smallest sprite half-width. Below roughly one pixel a splat is an
+        // aliasing machine, so points in focus bottom out here.
+        var MIN_R_PX = 0.75;
+
+        var V = (window.__hyperframes && window.__hyperframes.getVariables()) || {};
+        var CS = getComputedStyle(document.getElementById("rf-root"));
+
+        // The runtime defines every declared variable as `--<slug>` on the
+        // root (packages/core/src/tokenSlug.ts), so a host stylesheet can
+        // override one there too. Read the custom property first, fall back
+        // to the declared value when it is unset.
+        function raw(id) {
+          var css = CS.getPropertyValue("--" + id.toLowerCase()).trim();
+          return css !== "" ? css : V[id];
+        }
+        function num(id, fallback) {
+          var n = parseFloat(raw(id));
+          return isFinite(n) ? n : fallback;
+        }
+
+        var NEAR = num("nearfocus", 1.2);
+        var FAR = num("farfocus", 80);
+        var FOCAL = num("focallength", 85);
+        var FSTOP = num("aperture", 1.8);
+        var BLADES = Math.max(3, Math.round(num("blades", 6)));
+        var CATSEYE = num("catseye", 0.62);
+        var PULL_START = num("pullstart", 1.2);
+        var PULL_DUR = Math.max(0.001, num("pullduration", 3.2));
+        var BOKEH = num("bokeh", 1);
+        var EASE_NAME = String(raw("pullease") || "power2.inOut");
+        var BACKDROP =
+          typeof raw("backdrop") === "string" && raw("backdrop") ? raw("backdrop") : "#05060a";
+
+        document.getElementById("rf-backdrop").style.background = BACKDROP;
+
+        var EASE = gsap.parseEase(EASE_NAME) || gsap.parseEase("power2.inOut");
+
+        // A focus ring is roughly linear in dioptres, not in metres: a rack
+        // from 1.2m to 80m spends its first millimetre of barrel rotation
+        // crossing most of the distance. Interpolating 1/distance is what
+        // makes the pull travel evenly instead of snapping to the far plane.
+        function focusAt(t) {
+          var u = Math.min(1, Math.max(0, (t - PULL_START) / PULL_DUR));
+          var e = EASE(u);
+          var inv = 1 / NEAR + (1 / FAR - 1 / NEAR) * e;
+          return 1 / inv;
+        }
+
+        // ── Scene ────────────────────────────────────────────────────────
+        // A night exterior: a string of practical lights right in front of
+        // the lens, a lit city block far behind it, and scattered lights
+        // through every depth between so the pull reads as a continuous
+        // travel rather than a cut between two planes.
+
+        function mulberry32(a) {
+          return function () {
+            a |= 0;
+            a = (a + 0x6d2b79f5) | 0;
+            var t = Math.imul(a ^ (a >>> 15), 1 | a);
+            t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+            return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+          };
+        }
+        var rnd = mulberry32(0x5eed1a3);
+        function rr(lo, hi) {
+          return lo + (hi - lo) * rnd();
+        }
+
+        // x, y in metres (y up, origin on the optical axis), z in metres,
+        // r0 = the light's own physical radius in metres, b = peak
+        // brightness when perfectly in focus (values above 1 are highlights
+        // that clip, which is exactly why they stay visible once spread
+        // across a bokeh disc), rgb = colour.
+        var P = [];
+        function light(x, y, z, r0, b, c) {
+          P.push(x, y, z, r0, b, c[0], c[1], c[2]);
+        }
+
+        var TUNGSTEN = [1.0, 0.74, 0.45];
+        var FILAMENT = [1.0, 0.9, 0.74];
+        var WIRE = [0.86, 0.74, 0.6];
+        var WARM_WIN = [1.0, 0.79, 0.52];
+        var COOL_WIN = [0.6, 0.75, 1.0];
+        var SIGN_A = [0.35, 0.95, 1.0];
+        var SIGN_B = [1.0, 0.42, 0.72];
+
+        // Half the frame's width, in metres, at depth z. Both subjects are
+        // laid out against the reference framing (85mm, 1.2m / 80m) and then
+        // scaled by this, so retuning the lens or either focal distance moves
+        // the subjects with the frame instead of pushing them out of it.
+        function halfW(z) {
+          return (0.5 * SENSOR_W_MM * z) / FOCAL;
+        }
+
+        // Near subject: a catenary string of bulbs at `nearfocus`. The wire is
+        // what makes "sharp" unmistakable, a one-pixel line either resolves
+        // or it does not, and the filament inside each bulb is the second cue.
+        var NEAR_Z = NEAR;
+        var NS = halfW(NEAR_Z) / 0.25412;
+        var X_END = 0.4;
+        var SAG_A = 0.3;
+        var SAG = 0.1;
+        var COSH_END = Math.cosh(X_END / SAG_A);
+        function stringY(x) {
+          var s = (COSH_END - Math.cosh(x / SAG_A)) / (COSH_END - 1);
+          return 0.075 - SAG * s - 0.035 * (x / X_END);
+        }
+        function stringZ(x) {
+          return NEAR_Z + 0.05 * (x / X_END);
+        }
+        for (var i = 0; i < 1100; i++) {
+          var wx = -0.42 + (0.84 * i) / 1099;
+          light(wx * NS, stringY(wx) * NS, stringZ(wx), 0.0006 * NS, 1.4, WIRE);
+        }
+        for (var k = -5; k <= 5; k++) {
+          var bx = k * 0.085;
+          var by = stringY(bx) - 0.011;
+          var bz = stringZ(bx);
+          light(bx * NS, by * NS, bz, 0.006 * NS, 26, TUNGSTEN);
+          light((bx - 0.0022) * NS, by * NS, bz, 0.0006 * NS, 7, FILAMENT);
+          light(bx * NS, (by - 0.0022) * NS, bz, 0.0006 * NS, 7, FILAMENT);
+          light((bx + 0.0022) * NS, by * NS, bz, 0.0006 * NS, 7, FILAMENT);
+        }
+
+        // Far subject: three lit towers plus a dense LED sign strip, sitting
+        // around `farfocus`. The sign's pitch is fine enough that it only
+        // resolves into separate lamps when focus actually arrives.
+        var FAR_Z = FAR;
+        var FS = halfW(FAR_Z) / 16.941;
+        function tower(cx, hw, topY, botY, cols, rows, z, lit) {
+          for (var c = 0; c < cols; c++) {
+            for (var r = 0; r < rows; r++) {
+              if (rnd() > lit) continue;
+              var x = cx - hw + (2 * hw * (c + 0.5)) / cols;
+              var y = botY + ((topY - botY) * (r + 0.5)) / rows;
+              var cool = rnd() < 0.28;
+              light(x, y, z + rr(-0.4, 0.4) * FS, 0.24 * FS, rr(9, 20), cool ? COOL_WIN : WARM_WIN);
+            }
+          }
+        }
+        tower(-9.5 * FS, 3.5 * FS, 9.6 * FS, -4.0 * FS, 6, 14, FAR_Z * 1.03, 0.34);
+        tower(2.0 * FS, 4.5 * FS, 6.4 * FS, -4.0 * FS, 8, 12, FAR_Z * 0.98, 0.3);
+        tower(12.5 * FS, 3.0 * FS, 11.0 * FS, -4.0 * FS, 5, 15, FAR_Z * 1.08, 0.36);
+        for (var s = 0; s < 40; s++) {
+          var sx = (-5.5 + (11 * s) / 39) * FS;
+          var mixc = s / 39;
+          var sc = [
+            SIGN_A[0] + (SIGN_B[0] - SIGN_A[0]) * mixc,
+            SIGN_A[1] + (SIGN_B[1] - SIGN_A[1]) * mixc,
+            SIGN_A[2] + (SIGN_B[2] - SIGN_A[2]) * mixc,
+          ];
+          light(sx, -5.0 * FS, FAR_Z * 0.99, 0.1 * FS, 7, sc);
+          light(sx, -5.55 * FS, FAR_Z * 0.99, 0.1 * FS, 7, sc);
+        }
+
+        // Everything between. Depth is drawn log-uniform between the two
+        // subjects and the screen position is uniform, so the mid-ground
+        // stays evenly spread whatever the two focal distances are.
+        var Z_LO = Math.min(NEAR_Z, FAR_Z) * 1.9;
+        var Z_HI = Math.max(NEAR_Z, FAR_Z) * 0.85;
+        for (var m = 0; m < 90; m++) {
+          var z = Z_LO * Math.pow(Z_HI / Z_LO, rnd());
+          var halfWm = (0.5 * SENSOR_W_MM * z) / FOCAL;
+          var halfHm = (halfWm * H) / W;
+          var warm = rnd() < 0.66;
+          light(
+            rr(-1.05, 1.05) * halfWm,
+            rr(-1.0, 0.75) * halfHm,
+            z,
+            rr(0.006, 0.05) * (z / 12),
+            rr(5, 18),
+            warm ? WARM_WIN : COOL_WIN,
+          );
+        }
+
+        // ── GL ───────────────────────────────────────────────────────────
+        var canvas = document.getElementById("rf-canvas");
+        var gl =
+          canvas.getContext("webgl", {
+            alpha: true,
+            antialias: false,
+            depth: false,
+            stencil: false,
+            preserveDrawingBuffer: true,
+            powerPreference: "high-performance",
+          }) ||
+          canvas.getContext("experimental-webgl", {
+            alpha: true,
+            preserveDrawingBuffer: true,
+          });
+
+        var VERT = [
+          "precision highp float;",
+          "attribute vec2 aCorner;", // -1..1 quad corner
+          "attribute vec3 aPos;", // metres, y up, z away from the lens
+          "attribute vec2 aSize;", // x = own radius (m), y = in-focus peak
+          "attribute vec3 aColor;",
+          "uniform vec2 uRes;",
+          "uniform float uPxPerMm;",
+          "uniform float uFocal;", // mm
+          "uniform float uFocus;", // metres
+          "uniform float uFstop;",
+          "uniform float uCoCmm;",
+          "uniform float uMaxR;",
+          "uniform float uMinR;",
+          "uniform float uCatsEye;",
+          "uniform float uBokeh;",
+          "varying vec2 vQ;",
+          "varying vec3 vColor;",
+          "varying float vGain;",
+          "varying float vShape;",
+          "varying float vAA;",
+          "varying vec2 vRadial;",
+          "varying float vCat;",
+          "void main() {",
+          "  float z = max(aPos.z, 0.001);",
+          "  float ppm = uPxPerMm * uFocal / z;", // pixels per metre at this depth
+          "  vec2 centre = uRes * 0.5 + aPos.xy * ppm;",
+          "  float r0 = max(aSize.x * ppm, uMinR);",
+          "",
+          "  // BokehShader2's circle of confusion, in units of uCoCmm.",
+          "  float f = uFocal;",
+          "  float d = uFocus * 1000.0;",
+          "  float o = z * 1000.0;",
+          "  float a = (o * f) / max(o - f, 1e-4);",
+          "  float b = (d * f) / max(d - f, 1e-4);",
+          "  float c = (d - f) / max(d * uFstop * uCoCmm, 1e-6);",
+          "  float blur = abs(a - b) * c;",
+          "  // -> defocus diameter in mm -> pixels -> radius.",
+          "  float cocR = min(blur * uCoCmm * uPxPerMm * 0.5, uMaxR);",
+          "",
+          "  // A finite source convolved with the defocus disc: radii add in",
+          "  // quadrature. Flux is conserved, so peak brightness falls as the",
+          "  // inverse square of the radius. That single term is why an",
+          "  // in-focus lamp clips to white and a defocused one is a readable",
+          "  // disc instead of a smear.",
+          "  float R = sqrt(r0 * r0 + cocR * cocR);",
+          "  vGain = aSize.y * uBokeh * (r0 * r0) / (R * R);",
+          "  // Near focus the sprite is the lamp (round); far from it the",
+          "  // sprite is an image of the aperture (polygonal).",
+          "  vShape = (cocR * cocR) / (cocR * cocR + r0 * r0);",
+          "  vAA = 1.0 / max(R, 0.5);",
+          "  vColor = aColor;",
+          "  vQ = aCorner;",
+          "",
+          "  // Mechanical vignetting: the barrel openings clip the aperture",
+          "  // harder the further the sprite sits from the optical axis.",
+          "  vec2 off = centre - uRes * 0.5;",
+          "  float rad = length(off);",
+          "  vRadial = rad > 1.0 ? off / rad : vec2(1.0, 0.0);",
+          "  vCat = uCatsEye * min(1.0, rad / (length(uRes) * 0.5));",
+          "",
+          "  // A light spread thin enough to land under half a display code",
+          "  // value contributes nothing but fill rate. Culling it here is what",
+          "  // keeps a 900-point wire from splatting 900 invisible discs the",
+          "  // moment it goes out of focus.",
+          "  if (vGain < 0.0015) {",
+          "    gl_Position = vec4(2.0, 2.0, 2.0, 1.0);",
+          "    return;",
+          "  }",
+          "",
+          "  vec2 p = centre + aCorner * R;",
+          "  gl_Position = vec4((p / uRes) * 2.0 - 1.0, 0.0, 1.0);",
+          "}",
+        ].join("\n");
+
+        var FRAG = [
+          "precision highp float;",
+          "varying vec2 vQ;",
+          "varying vec3 vColor;",
+          "varying float vGain;",
+          "varying float vShape;",
+          "varying float vAA;",
+          "varying vec2 vRadial;",
+          "varying float vCat;",
+          "uniform float uBlades;",
+          "const float PI = 3.14159265;",
+          "void main() {",
+          "  float r = length(vQ);",
+          "  if (r > 1.0) discard;",
+          "  float th = r > 1e-5 ? atan(vQ.y, vQ.x) : 0.0;",
+          "",
+          "  // Regular-polygon aperture boundary: circumradius 1 at a blade",
+          "  // vertex, cos(PI/n) at a blade midpoint.",
+          "  float n = uBlades;",
+          "  float seg = 2.0 * PI / n;",
+          "  float poly = cos(PI / n) / cos(mod(th, seg) - PI / n);",
+          "  float bound = mix(1.0, poly, vShape);",
+          "",
+          "  float cov = smoothstep(bound, bound - vAA, r);",
+          "  // Two offset barrel openings cut the disc from opposite sides,",
+          "  // which is what turns a corner bokeh into a cat's eye.",
+          "  float cut = vCat * vShape;",
+          "  cov *= smoothstep(1.0, 1.0 - vAA, length(vQ - vRadial * cut));",
+          "  cov *= smoothstep(1.0, 1.0 - vAA, length(vQ + vRadial * cut));",
+          "",
+          "  gl_FragColor = vec4(vColor * (vGain * cov), 1.0);",
+          "}",
+        ].join("\n");
+
+        var uni = {};
+        var ready = false;
+        var count = 0;
+
+        function compile(type, src) {
+          var sh = gl.createShader(type);
+          gl.shaderSource(sh, src);
+          gl.compileShader(sh);
+          if (!gl.getShaderParameter(sh, gl.COMPILE_STATUS)) {
+            throw new Error("rack-focus shader: " + gl.getShaderInfoLog(sh));
+          }
+          return sh;
+        }
+
+        function hexToRgb(hex) {
+          var h = String(hex).trim().replace("#", "");
+          if (h.length === 3) h = h[0] + h[0] + h[1] + h[1] + h[2] + h[2];
+          var v = parseInt(h, 16);
+          if (!isFinite(v)) return [0.02, 0.024, 0.039];
+          return [((v >> 16) & 255) / 255, ((v >> 8) & 255) / 255, (v & 255) / 255];
+        }
+        var BG = hexToRgb(BACKDROP);
+
+        if (gl) {
+          var prog = gl.createProgram();
+          gl.attachShader(prog, compile(gl.VERTEX_SHADER, VERT));
+          gl.attachShader(prog, compile(gl.FRAGMENT_SHADER, FRAG));
+          gl.linkProgram(prog);
+          if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {
+            throw new Error("rack-focus link: " + gl.getProgramInfoLog(prog));
+          }
+          gl.useProgram(prog);
+
+          // Six vertices per light: two triangles carrying the same point
+          // payload and four distinct corner offsets.
+          var CORNERS = [
+            [-1, -1],
+            [1, -1],
+            [1, 1],
+            [-1, -1],
+            [1, 1],
+            [-1, 1],
+          ];
+          var n = P.length / 8;
+          count = n * 6;
+          var STRIDE = 10;
+          var data = new Float32Array(count * STRIDE);
+          var w = 0;
+          for (var pi = 0; pi < n; pi++) {
+            var o = pi * 8;
+            for (var ci = 0; ci < 6; ci++) {
+              data[w++] = CORNERS[ci][0];
+              data[w++] = CORNERS[ci][1];
+              data[w++] = P[o];
+              data[w++] = P[o + 1];
+              data[w++] = P[o + 2];
+              data[w++] = P[o + 3];
+              data[w++] = P[o + 4];
+              data[w++] = P[o + 5];
+              data[w++] = P[o + 6];
+              data[w++] = P[o + 7];
+            }
+          }
+
+          var buf = gl.createBuffer();
+          gl.bindBuffer(gl.ARRAY_BUFFER, buf);
+          gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
+          var BYTES = STRIDE * 4;
+          [
+            ["aCorner", 2, 0],
+            ["aPos", 3, 8],
+            ["aSize", 2, 20],
+            ["aColor", 3, 28],
+          ].forEach(function (spec) {
+            var loc = gl.getAttribLocation(prog, spec[0]);
+            gl.enableVertexAttribArray(loc);
+            gl.vertexAttribPointer(loc, spec[1], gl.FLOAT, false, BYTES, spec[2]);
+          });
+
+          [
+            "uRes",
+            "uPxPerMm",
+            "uFocal",
+            "uFocus",
+            "uFstop",
+            "uCoCmm",
+            "uMaxR",
+            "uMinR",
+            "uCatsEye",
+            "uBlades",
+            "uBokeh",
+          ].forEach(function (nm) {
+            uni[nm] = gl.getUniformLocation(prog, nm);
+          });
+
+          gl.viewport(0, 0, W, H);
+          gl.uniform2f(uni.uRes, W, H);
+          gl.uniform1f(uni.uPxPerMm, PX_PER_MM);
+          gl.uniform1f(uni.uFocal, FOCAL);
+          gl.uniform1f(uni.uFstop, FSTOP);
+          gl.uniform1f(uni.uCoCmm, COC_MM);
+          gl.uniform1f(uni.uMaxR, MAX_COC_R_PX);
+          gl.uniform1f(uni.uMinR, MIN_R_PX);
+          gl.uniform1f(uni.uCatsEye, CATSEYE);
+          gl.uniform1f(uni.uBlades, BLADES);
+          gl.uniform1f(uni.uBokeh, BOKEH);
+
+          // Light adds to light. Overlapping bokeh discs are brighter where
+          // they cross, which is the whole texture of a bokeh field.
+          gl.disable(gl.DEPTH_TEST);
+          gl.enable(gl.BLEND);
+          gl.blendFunc(gl.ONE, gl.ONE);
+          ready = true;
+        }
+
+        // Every frame is computed from t alone: the focal distance is a
+        // closed-form function of t, and each sprite's circle of confusion
+        // falls out of its own static depth and that distance.
+        function draw(t) {
+          if (!ready) return;
+          gl.uniform1f(uni.uFocus, focusAt(t));
+          gl.clearColor(BG[0], BG[1], BG[2], 1);
+          gl.clear(gl.COLOR_BUFFER_BIT);
+          gl.drawArrays(gl.TRIANGLES, 0, count);
+          gl.flush();
+        }
+
+        window.__timelines = window.__timelines || {};
+        var tl = gsap.timeline({ paused: true });
+
+        // The canvas is repainted from a property SETTER, not from onUpdate:
+        // gsap's seek(t) suppresses events by default, so an onUpdate callback
+        // silently never fires on a scrub and the canvas freezes on frame 0.
+        // Tweened values are always written during render, suppressed or not,
+        // so this fires on every seek, and hands us the frame time directly.
+        var driver = { _t: 0 };
+        Object.defineProperty(driver, "t", {
+          get: function () {
+            return this._t;
+          },
+          set: function (v) {
+            this._t = v;
+            draw(v);
+          },
+        });
+        tl.to(driver, { t: DUR, duration: DUR, ease: "none" }, 0);
+        window.__timelines["rack-focus"] = tl;
+
+        draw(0);
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/blocks/rack-focus/registry-item.json b/registry/blocks/rack-focus/registry-item.json
new file mode 100644
index 0000000000..f4eb72b950
--- /dev/null
+++ b/registry/blocks/rack-focus/registry-item.json
@@ -0,0 +1,217 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "rack-focus",
+  "type": "hyperframes:block",
+  "title": "Rack Focus",
+  "description": "A focus pull with real aperture bokeh: the focal plane travels from a near subject to a far one, so one resolves as the other blows into hard-edged polygon discs that clip to a cat's eye toward the corners. A focus pull only reads against content at two clearly separated depths, so this block carries its own depth-layered night exterior and puts both subject depths on variables.",
+  "stability": "experimental",
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 6,
+  "tags": ["webgl", "shader", "camera", "depth", "cinematic", "showcase"],
+  "variables": [
+    {
+      "id": "nearfocus",
+      "type": "number",
+      "label": "Near focal distance",
+      "default": 1.2,
+      "min": 0.2,
+      "max": 100,
+      "step": 0.05,
+      "unit": "m"
+    },
+    {
+      "id": "farfocus",
+      "type": "number",
+      "label": "Far focal distance",
+      "default": 80,
+      "min": 0.3,
+      "max": 400,
+      "step": 0.5,
+      "unit": "m"
+    },
+    {
+      "id": "focallength",
+      "type": "number",
+      "label": "Focal length",
+      "default": 85,
+      "min": 12,
+      "max": 300,
+      "step": 1,
+      "unit": "mm"
+    },
+    {
+      "id": "aperture",
+      "type": "number",
+      "label": "Aperture (f-number)",
+      "default": 1.8,
+      "min": 0.95,
+      "max": 22,
+      "step": 0.05
+    },
+    {
+      "id": "blades",
+      "type": "number",
+      "label": "Aperture blades (bokeh shape)",
+      "default": 6,
+      "min": 3,
+      "max": 14,
+      "step": 1
+    },
+    {
+      "id": "catseye",
+      "type": "number",
+      "label": "Cat eye clipping at the corners",
+      "default": 0.62,
+      "min": 0,
+      "max": 1,
+      "step": 0.02
+    },
+    {
+      "id": "pullstart",
+      "type": "number",
+      "label": "Pull start",
+      "default": 1.2,
+      "min": 0,
+      "max": 30,
+      "step": 0.05,
+      "unit": "s"
+    },
+    {
+      "id": "pullduration",
+      "type": "number",
+      "label": "Pull duration",
+      "default": 3.2,
+      "min": 0.1,
+      "max": 30,
+      "step": 0.05,
+      "unit": "s"
+    },
+    {
+      "id": "pullease",
+      "type": "string",
+      "label": "Pull easing (GSAP ease)",
+      "default": "power2.inOut",
+      "placeholder": "power2.inOut"
+    },
+    {
+      "id": "bokeh",
+      "type": "number",
+      "label": "Bokeh exposure",
+      "default": 1,
+      "min": 0,
+      "max": 3,
+      "step": 0.05
+    },
+    {
+      "id": "backdrop",
+      "type": "color",
+      "label": "Backdrop",
+      "default": "#05060a"
+    }
+  ],
+  "files": [
+    {
+      "path": "rack-focus.html",
+      "target": "compositions/rack-focus.html",
+      "type": "hyperframes:composition"
+    }
+  ],
+  "params": [
+    {
+      "key": "--nearfocus",
+      "label": "Near focal distance in metres (where the pull starts and the near subject sits)",
+      "type": "number",
+      "default": "1.2",
+      "min": 0.2,
+      "max": 100,
+      "step": 0.05
+    },
+    {
+      "key": "--farfocus",
+      "label": "Far focal distance in metres (where the pull ends and the far subject sits)",
+      "type": "number",
+      "default": "80",
+      "min": 0.3,
+      "max": 400,
+      "step": 0.5
+    },
+    {
+      "key": "--focallength",
+      "label": "Focal length in mm (longer lens = shallower depth of field)",
+      "type": "number",
+      "default": "85",
+      "min": 12,
+      "max": 300,
+      "step": 1
+    },
+    {
+      "key": "--aperture",
+      "label": "Aperture f-number (lower = bigger bokeh)",
+      "type": "number",
+      "default": "1.8",
+      "min": 0.95,
+      "max": 22,
+      "step": 0.05
+    },
+    {
+      "key": "--blades",
+      "label": "Aperture blade count, the bokeh polygon's sides",
+      "type": "number",
+      "default": "6",
+      "min": 3,
+      "max": 14,
+      "step": 1
+    },
+    {
+      "key": "--catseye",
+      "label": "Cat's-eye clipping at the frame corners (mechanical vignetting)",
+      "type": "number",
+      "default": "0.62",
+      "min": 0,
+      "max": 1,
+      "step": 0.02
+    },
+    {
+      "key": "--pullstart",
+      "label": "Seconds held on the near subject before the pull starts",
+      "type": "number",
+      "default": "1.2",
+      "min": 0,
+      "max": 30,
+      "step": 0.05
+    },
+    {
+      "key": "--pullduration",
+      "label": "Pull duration in seconds",
+      "type": "number",
+      "default": "3.2",
+      "min": 0.1,
+      "max": 30,
+      "step": 0.05
+    },
+    {
+      "key": "--pullease",
+      "label": "Pull easing (any GSAP ease name)",
+      "type": "text",
+      "default": "power2.inOut"
+    },
+    {
+      "key": "--bokeh",
+      "label": "Bokeh exposure",
+      "type": "number",
+      "default": "1",
+      "min": 0,
+      "max": 3,
+      "step": 0.05
+    },
+    {
+      "key": "--backdrop",
+      "label": "Backdrop",
+      "type": "color",
+      "default": "#05060a"
+    }
+  ]
+}
diff --git a/registry/blocks/spiral-galaxy/registry-item.json b/registry/blocks/spiral-galaxy/registry-item.json
new file mode 100644
index 0000000000..f67217da2d
--- /dev/null
+++ b/registry/blocks/spiral-galaxy/registry-item.json
@@ -0,0 +1,143 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "spiral-galaxy",
+  "type": "hyperframes:block",
+  "title": "Spiral Galaxy",
+  "description": "A spiral galaxy seen from outside, turning with real differential rotation: inner stars orbit faster than outer ones, so the arms wind up over the shot instead of spinning rigidly. 20,000 additive GPU sprites, seeded once and solved directly from time, so any frame can be rendered on its own.",
+  "stability": "experimental",
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 10,
+  "tags": ["hero", "space", "particles", "webgl", "background"],
+  "variables": [
+    {
+      "id": "stars",
+      "type": "number",
+      "label": "Star count",
+      "default": 20000,
+      "min": 2000,
+      "max": 40000,
+      "step": 1000
+    },
+    {
+      "id": "arms",
+      "type": "number",
+      "label": "Arm count",
+      "default": 3,
+      "min": 2,
+      "max": 8,
+      "step": 1
+    },
+    {
+      "id": "rate",
+      "type": "number",
+      "label": "Rotation rate",
+      "default": 0.25,
+      "min": 0,
+      "max": 1.5,
+      "step": 0.05,
+      "unit": "rad/s"
+    },
+    {
+      "id": "glow",
+      "type": "number",
+      "label": "Core brightness",
+      "default": 1.9,
+      "min": 0.2,
+      "max": 4,
+      "step": 0.1
+    },
+    {
+      "id": "size",
+      "type": "number",
+      "label": "Star size",
+      "default": 10,
+      "min": 2,
+      "max": 40,
+      "step": 1,
+      "unit": "px"
+    },
+    {
+      "id": "core",
+      "type": "color",
+      "label": "Core colour",
+      "default": "#ffa575"
+    },
+    {
+      "id": "rim",
+      "type": "color",
+      "label": "Rim colour",
+      "default": "#311599"
+    }
+  ],
+  "files": [
+    {
+      "path": "spiral-galaxy.html",
+      "target": "compositions/spiral-galaxy.html",
+      "type": "hyperframes:composition"
+    }
+  ],
+  "params": [
+    {
+      "key": "stars",
+      "label": "Star count",
+      "type": "number",
+      "default": 20000,
+      "min": 2000,
+      "max": 40000,
+      "step": 1000
+    },
+    {
+      "key": "arms",
+      "label": "Arm count",
+      "type": "number",
+      "default": 3,
+      "min": 2,
+      "max": 8,
+      "step": 1
+    },
+    {
+      "key": "rate",
+      "label": "Rotation rate",
+      "type": "number",
+      "default": 0.25,
+      "min": 0,
+      "max": 1.5,
+      "step": 0.05,
+      "unit": "rad/s"
+    },
+    {
+      "key": "glow",
+      "label": "Core brightness",
+      "type": "number",
+      "default": 1.9,
+      "min": 0.2,
+      "max": 4,
+      "step": 0.1
+    },
+    {
+      "key": "size",
+      "label": "Star size",
+      "type": "number",
+      "default": 10,
+      "min": 2,
+      "max": 40,
+      "step": 1,
+      "unit": "px"
+    },
+    {
+      "key": "core",
+      "label": "Core colour",
+      "type": "color",
+      "default": "#ffa575"
+    },
+    {
+      "key": "rim",
+      "label": "Rim colour",
+      "type": "color",
+      "default": "#311599"
+    }
+  ]
+}
diff --git a/registry/blocks/spiral-galaxy/spiral-galaxy.html b/registry/blocks/spiral-galaxy/spiral-galaxy.html
new file mode 100644
index 0000000000..bd50f806ad
--- /dev/null
+++ b/registry/blocks/spiral-galaxy/spiral-galaxy.html
@@ -0,0 +1,312 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Spiral Galaxy</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #03040a;
+      }
+      #sg-root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      /* Full-bleed child carries the scene fill; never the composition root. */
+      #sg-fill {
+        position: absolute;
+        inset: 0;
+        background: #03040a;
+      }
+      #sg-gl {
+        position: absolute;
+        inset: 0;
+        display: block;
+        width: 1920px;
+        height: 1080px;
+      }
+      /* Ambient halo in the rim colour, screen-blended over the point cloud.
+         Reads the declared `rim` variable. Variable ids are single lowercase
+         words on purpose: the runtime injects `--<id>` while the compiler
+         injects `--<slugify(id)>`, and those two only agree when the id has
+         no capitals or separators. */
+      #sg-halo {
+        position: absolute;
+        inset: 0;
+        mix-blend-mode: screen;
+        opacity: 0.12;
+        background: radial-gradient(72% 46% at 50% 50%, var(--rim, #311599) 0%, #000000 70%);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="sg-root"
+      data-composition-id="spiral-galaxy"
+      data-composition-variables='[
+        {"id":"stars","type":"number","label":"Star count","default":20000,"min":2000,"max":40000,"step":1000},
+        {"id":"arms","type":"number","label":"Arm count","default":3,"min":2,"max":8,"step":1},
+        {"id":"rate","type":"number","label":"Rotation rate","default":0.25,"min":0,"max":1.5,"step":0.05,"unit":"rad/s"},
+        {"id":"glow","type":"number","label":"Core brightness","default":1.9,"min":0.2,"max":4,"step":0.1},
+        {"id":"size","type":"number","label":"Star size","default":10,"min":2,"max":40,"step":1,"unit":"px"},
+        {"id":"core","type":"color","label":"Core colour","default":"#ffa575"},
+        {"id":"rim","type":"color","label":"Rim colour","default":"#311599"}
+      ]'
+      data-start="0"
+      data-duration="10"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="sg-fill"></div>
+      <canvas id="sg-gl" width="1920" height="1080"></canvas>
+      <div id="sg-halo"></div>
+
+      <!-- Driver clip: gives the block a timed element for the host timeline. -->
+      <div
+        id="sg-drv"
+        class="clip"
+        data-start="0"
+        data-duration="10"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+
+    <script>
+      (function () {
+        var COMP_ID = "spiral-galaxy";
+        var DURATION = 10;
+        var W = 1920,
+          H = 1080;
+
+        // ── Measured constants ────────────────────────────────────────────
+        // Read from the three.js galaxy examples (MIT) during reference
+        // research; reimplemented here, nothing copied.
+        //   count 20000 · branches 3 · radius = ratio^1.5 * 5 · spin 1
+        //   angle = branchAngle + spin * radius + t * (1 - radiusRatio)
+        //   randomnessPower 3 · inside #ffa575 · outside #311599
+        var DISC_RADIUS = 5.0; // world units, from `radius = ratio^1.5 * 5`
+        var RADIUS_POWER = 1.5; // ratio -> radius exponent
+        // Static Archimedean twist, radians per world unit. This is what draws
+        // the arm across the WHOLE disc; the time term below then winds it.
+        // Slightly under the example's 1.0 so the outer arms stay open.
+        var SPIN = 0.78;
+        var RANDOMNESS = 0.2; // arm thickness, as a fraction of DISC_RADIUS
+        var RANDOM_POWER = 3.0; // pow(u, 3): most stars hug the arm, a few stray
+        var TANGENT_SQUEEZE = 0.62; // arms are thin across, long along
+        var DISC_FLATNESS = 0.3; // vertical jitter relative to in-plane jitter
+        var SEED = 20240817; // fixes every per-star attribute
+
+        // ── Variables ─────────────────────────────────────────────────────
+        // Read ONCE at init. Variables never change mid-render.
+        var vars =
+          window.__hyperframes && window.__hyperframes.getVariables
+            ? window.__hyperframes.getVariables()
+            : {};
+        function clampNum(value, lo, hi, fallback) {
+          var n = Number(value);
+          if (!isFinite(n)) n = fallback;
+          return Math.min(hi, Math.max(lo, n));
+        }
+        var STARS = Math.round(clampNum(vars.stars, 2000, 40000, 20000));
+        var ARMS = Math.round(clampNum(vars.arms, 2, 8, 3));
+        var RATE = clampNum(vars.rate, 0, 1.5, 0.25);
+        var GLOW = clampNum(vars.glow, 0.2, 4, 1.9);
+        var SIZE = clampNum(vars.size, 2, 40, 10);
+        var CORE_COLOR = typeof vars.core === "string" ? vars.core : "#ffa575";
+        var RIM_COLOR = typeof vars.rim === "string" ? vars.rim : "#311599";
+
+        // ── Seeded PRNG (mulberry32) ──────────────────────────────────────
+        function mulberry32(seed) {
+          return function () {
+            seed |= 0;
+            seed = (seed + 0x6d2b79f5) | 0;
+            var t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
+            t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+            return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+          };
+        }
+
+        // ── Per-star attributes, seeded once ──────────────────────────────
+        // Nothing here depends on time. Every frame is computed from these
+        // plus `uTime` alone, so frame N never reads frame N-1.
+        var rng = mulberry32(SEED);
+        var aRatio = new Float32Array(STARS); // 0 = core, 1 = rim
+        var aBranch = new Float32Array(STARS); // base arm angle
+        var aJitterR = new Float32Array(STARS); // offset along the arm's radial axis
+        var aJitterT = new Float32Array(STARS); // offset along the arm's tangent
+        var aJitterY = new Float32Array(STARS); // disc thickness
+        var aSpark = new Float32Array(STARS); // per-star size variation
+
+        function jitter() {
+          var magnitude = Math.pow(rng(), RANDOM_POWER) * RANDOMNESS * DISC_RADIUS;
+          return rng() < 0.5 ? -magnitude : magnitude;
+        }
+        for (var i = 0; i < STARS; i++) {
+          aRatio[i] = rng();
+          aBranch[i] = ((i % ARMS) / ARMS) * Math.PI * 2;
+          aJitterR[i] = jitter();
+          aJitterT[i] = jitter() * TANGENT_SQUEEZE;
+          aJitterY[i] = jitter() * DISC_FLATNESS;
+          aSpark[i] = rng();
+        }
+
+        // ── Scene ─────────────────────────────────────────────────────────
+        var renderer = new THREE.WebGLRenderer({
+          canvas: document.getElementById("sg-gl"),
+          antialias: false,
+          alpha: false,
+          preserveDrawingBuffer: true, // survives seek-capture screenshots
+        });
+        renderer.setPixelRatio(1);
+        renderer.setSize(W, H, false);
+        renderer.setClearColor(0x03040a, 1);
+
+        var scene = new THREE.Scene();
+        var camera = new THREE.PerspectiveCamera(45, W / H, 0.1, 200);
+        camera.position.set(0, 2.9, 7.6);
+        camera.lookAt(0, 0, 0);
+
+        var uniforms = {
+          uTime: { value: 0 },
+          uRate: { value: RATE },
+          uSpin: { value: SPIN },
+          uRadius: { value: DISC_RADIUS },
+          uPower: { value: RADIUS_POWER },
+          uSize: { value: SIZE },
+          uRefDist: { value: camera.position.length() },
+          uGlow: { value: GLOW },
+          uCore: { value: new THREE.Color(CORE_COLOR) },
+          uRim: { value: new THREE.Color(RIM_COLOR) },
+        };
+
+        var VERT = [
+          "attribute float aRatio;",
+          "attribute float aBranch;",
+          "attribute float aJitterR;",
+          "attribute float aJitterT;",
+          "attribute float aJitterY;",
+          "attribute float aSpark;",
+          "uniform float uTime;",
+          "uniform float uRate;",
+          "uniform float uSpin;",
+          "uniform float uRadius;",
+          "uniform float uPower;",
+          "uniform float uSize;",
+          "uniform float uRefDist;",
+          "uniform float uGlow;",
+          "uniform vec3 uCore;",
+          "uniform vec3 uRim;",
+          "varying vec3 vColor;",
+          "varying float vBright;",
+          "void main() {",
+          "  float ratio = clamp(aRatio, 0.0, 1.0);",
+          // Differential rotation. omega falls to zero at the rim, so the
+          // core laps the outer disc and the arms wind up over time.
+          // Solved directly from uTime — never integrated frame to frame.
+          "  float omega = 1.0 - ratio;",
+          "  float r = pow(ratio, uPower) * uRadius;",
+          // uSpin * r is the static arm shape (time-independent, so it drops
+          // out of any inner-vs-outer rotation measurement); uRate * uTime *
+          // omega is the winding.
+          "  float theta = aBranch + uSpin * r + uRate * uTime * omega;",
+          "  vec2 radial = vec2(cos(theta), sin(theta));",
+          "  vec2 tangent = vec2(-radial.y, radial.x);",
+          // Jitter rides in the star's own rotating frame, so arm thickness
+          // holds its shape instead of smearing as the disc turns.
+          "  vec2 xz = radial * (r + aJitterR) + tangent * aJitterT;",
+          "  vec4 mv = modelViewMatrix * vec4(xz.x, aJitterY, xz.y, 1.0);",
+          "  gl_Position = projectionMatrix * mv;",
+          "  gl_PointSize = uSize * (uRefDist / max(-mv.z, 0.001)) * (0.55 + 0.75 * aSpark);",
+          // Lerp by r/R (i.e. ratio^1.5), matching the example's colour ramp:
+          // the disc stays warm well past mid-radius and only the rim goes cold.
+          "  vColor = mix(uCore, uRim, pow(ratio, uPower));",
+          "  vBright = uGlow * (0.22 + 0.78 * exp(-ratio * 3.0));",
+          "}",
+        ].join("\n");
+
+        var FRAG = [
+          "varying vec3 vColor;",
+          "varying float vBright;",
+          "void main() {",
+          "  float d = length(gl_PointCoord - vec2(0.5));",
+          "  float a = smoothstep(0.5, 0.0, d);",
+          "  a = a * a;",
+          "  gl_FragColor = vec4(vColor * vBright, a);",
+          "}",
+        ].join("\n");
+
+        var geometry = new THREE.BufferGeometry();
+        // The vertex shader builds every position from the attributes below;
+        // `position` exists only because three.js counts vertices from it.
+        geometry.setAttribute(
+          "position",
+          new THREE.BufferAttribute(new Float32Array(STARS * 3), 3),
+        );
+        geometry.setAttribute("aRatio", new THREE.BufferAttribute(aRatio, 1));
+        geometry.setAttribute("aBranch", new THREE.BufferAttribute(aBranch, 1));
+        geometry.setAttribute("aJitterR", new THREE.BufferAttribute(aJitterR, 1));
+        geometry.setAttribute("aJitterT", new THREE.BufferAttribute(aJitterT, 1));
+        geometry.setAttribute("aJitterY", new THREE.BufferAttribute(aJitterY, 1));
+        geometry.setAttribute("aSpark", new THREE.BufferAttribute(aSpark, 1));
+
+        var material = new THREE.ShaderMaterial({
+          uniforms: uniforms,
+          vertexShader: VERT,
+          fragmentShader: FRAG,
+          blending: THREE.AdditiveBlending,
+          transparent: true,
+          depthTest: false,
+          depthWrite: false,
+        });
+
+        var points = new THREE.Points(geometry, material);
+        points.frustumCulled = false; // positions live in the shader, not in `position`
+        scene.add(points);
+
+        function draw(t) {
+          uniforms.uTime.value = t;
+          renderer.render(scene, camera);
+        }
+
+        // ── Timeline ──────────────────────────────────────────────────────
+        // `tl.eventCallback("onUpdate", ...)` does NOT fire on tl.seek(), so
+        // the repaint hangs off a property setter on the tweened driver —
+        // that setter runs on every render, seek included.
+        var driver = { _t: 0 };
+        Object.defineProperty(driver, "t", {
+          get: function () {
+            return this._t;
+          },
+          set: function (value) {
+            this._t = value;
+            draw(value);
+          },
+        });
+
+        window.__timelines = window.__timelines || {};
+        var tl = gsap.timeline({ paused: true });
+        // ease "none" over the full duration makes driver.t === tl.time().
+        tl.to(driver, { t: DURATION, duration: DURATION, ease: "none", lazy: false }, 0);
+        window.__timelines[COMP_ID] = tl;
+
+        draw(0); // paint frame 0; GSAP skips the setter when the value is unchanged
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/blocks/split-flap-board/registry-item.json b/registry/blocks/split-flap-board/registry-item.json
new file mode 100644
index 0000000000..c9a5e3b279
--- /dev/null
+++ b/registry/blocks/split-flap-board/registry-item.json
@@ -0,0 +1,65 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "split-flap-board",
+  "type": "hyperframes:block",
+  "title": "Split-Flap Board",
+  "description": "Solari-style departure board: every cell walks its drum forward through the intervening characters of a fixed alphabet until it lands on its target, so the text resolves as a mechanical cascade instead of a fade.",
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 3.5,
+  "tags": ["text", "kinetic", "mechanical", "split-flap", "solari", "departure-board", "reveal"],
+  "variables": [
+    {
+      "id": "boardText",
+      "type": "string",
+      "label": "Board text",
+      "default": "NOW BOARDING",
+      "maxLength": 24
+    },
+    {
+      "id": "flapAlphabet",
+      "type": "string",
+      "label": "Flap alphabet (drum order)",
+      "default": " ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789.,'",
+      "maxLength": 64
+    },
+    {
+      "id": "flipDuration",
+      "type": "number",
+      "label": "Seconds per flap",
+      "default": 0.09,
+      "min": 0.03,
+      "max": 1.2,
+      "step": 0.01,
+      "unit": "s"
+    },
+    {
+      "id": "cellStagger",
+      "type": "number",
+      "label": "Per-cell start stagger",
+      "default": 0.05,
+      "min": 0,
+      "max": 0.5,
+      "step": 0.01,
+      "unit": "s"
+    },
+    {
+      "id": "cellCount",
+      "type": "number",
+      "label": "Cells on the board",
+      "default": 12,
+      "min": 1,
+      "max": 24,
+      "step": 1
+    }
+  ],
+  "files": [
+    {
+      "path": "split-flap-board.html",
+      "target": "compositions/split-flap-board.html",
+      "type": "hyperframes:composition"
+    }
+  ]
+}
diff --git a/registry/blocks/split-flap-board/split-flap-board.html b/registry/blocks/split-flap-board/split-flap-board.html
new file mode 100644
index 0000000000..082640b285
--- /dev/null
+++ b/registry/blocks/split-flap-board/split-flap-board.html
@@ -0,0 +1,346 @@
+<!doctype html>
+<html
+  lang="en"
+  data-composition-variables='[
+    {"id":"boardText","type":"string","label":"Board text","default":"NOW BOARDING","maxLength":24},
+    {"id":"flapAlphabet","type":"string","label":"Flap alphabet (drum order)","default":" ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789.,&#39;","maxLength":64},
+    {"id":"flipDuration","type":"number","label":"Seconds per flap","default":0.09,"min":0.03,"max":1.2,"step":0.01,"unit":"s"},
+    {"id":"cellStagger","type":"number","label":"Per-cell start stagger","default":0.05,"min":0,"max":0.5,"step":0.01,"unit":"s"},
+    {"id":"cellCount","type":"number","label":"Cells on the board","default":12,"min":1,"max":24,"step":1}
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Split-Flap Board</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="sf-root"
+      data-composition-id="split-flap-board"
+      data-start="0"
+      data-duration="3.5"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+      style="position: relative; width: 1920px; height: 1080px; overflow: hidden"
+    >
+      <style>
+        /* The root's own box lives in an inline style, not a rule: every
+           sub-composition rule is rewritten to
+           `[data-composition-id="split-flap-board"] <selector>` at render,
+           which can never match the root element itself. */
+        #sf-bg {
+          position: absolute;
+          inset: 0;
+          background:
+            radial-gradient(120% 90% at 50% 42%, #23242a 0%, #121317 62%, #0a0a0c 100%), #0a0a0c;
+        }
+        #sf-board {
+          position: absolute;
+          inset: 0;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .sf-cell {
+          position: relative;
+          flex: 0 0 auto;
+          perspective: 900px;
+          border-radius: 9px;
+          background: #0c0c0e;
+          box-shadow:
+            0 18px 34px rgba(0, 0, 0, 0.55),
+            0 0 0 1px rgba(255, 255, 255, 0.05);
+        }
+        .sf-face {
+          position: absolute;
+          left: 0;
+          width: 100%;
+          height: 50%;
+          overflow: hidden;
+          background: linear-gradient(180deg, #26272c 0%, #1a1b1f 100%);
+        }
+        .sf-top,
+        .sf-leaf-a {
+          top: 0;
+          border-radius: 9px 9px 0 0;
+        }
+        .sf-bot,
+        .sf-leaf-b {
+          top: 50%;
+          border-radius: 0 0 9px 9px;
+          background: linear-gradient(180deg, #191a1e 0%, #232429 100%);
+        }
+        .sf-leaf-a {
+          transform-origin: 50% 100%;
+          z-index: 3;
+          backface-visibility: hidden;
+        }
+        .sf-leaf-b {
+          transform-origin: 50% 0%;
+          z-index: 3;
+          backface-visibility: hidden;
+        }
+        .sf-glyph {
+          position: absolute;
+          left: 0;
+          width: 100%;
+          display: block;
+          text-align: center;
+          font-family: ui-monospace, monospace;
+          font-weight: 700;
+          color: #f4efe2;
+          white-space: pre;
+        }
+        .sf-seam {
+          position: absolute;
+          left: 0;
+          top: 50%;
+          width: 100%;
+          height: 3px;
+          margin-top: -1.5px;
+          background: #050506;
+          z-index: 4;
+        }
+      </style>
+
+      <div id="sf-bg"></div>
+      <div id="sf-board" class="clip" data-start="0" data-duration="3.5" data-track-index="0"></div>
+
+      <script>
+        (function () {
+          window.__timelines = window.__timelines || {};
+
+          // ---------------------------------------------------------------
+          // Reference numbers (see report / research entry F#1)
+          //
+          // Alphabet: the 40-position drum from the scottbez1/splitflap
+          // project (Apache-2.0, README read) — blank, A-Z, 0-9, then `.,'`.
+          // Drum order is what makes the cascade read as a real board: a cell
+          // never jumps, it walks the drum forward through every intervening
+          // character, so letters resolve early and digits/punctuation late.
+          //
+          // Flip duration: the only published-ish figure is a DIY firmware
+          // proxy (28BYJ-48 stepper, ~83.59 steps/flap, a=500 steps/s^2 ->
+          // triangular profile -> ~1.16 s/flap). That is a hobby build, NOT a
+          // Solari spec, and real boards audibly flutter at tens of ms per
+          // flap. The default below sits in that observed band; the DIY proxy
+          // is still reachable at the top of the `flipDuration` range.
+          //
+          // Flap fall: constant angular acceleration through 180 degrees,
+          // theta(p) = 180 * p^2. The flap therefore hangs near the top and
+          // slaps down — no ease-out, because a falling leaf does not
+          // decelerate. The two CSS leaves are the two faces of that one flap
+          // (hand-off at theta = 90, i.e. p = 0.707).
+          // ---------------------------------------------------------------
+          var DEFAULT_ALPHABET = " ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789.,'";
+          var DEG = Math.PI / 180;
+
+          function num(value, min, max, fallback) {
+            var n = typeof value === "number" ? value : parseFloat(value);
+            if (!isFinite(n)) return fallback;
+            return Math.min(max, Math.max(min, n));
+          }
+
+          var vars =
+            window.__hyperframes && window.__hyperframes.getVariables
+              ? window.__hyperframes.getVariables()
+              : {};
+
+          var alphabet = String(vars.flapAlphabet || DEFAULT_ALPHABET);
+          if (alphabet.length < 2) alphabet = DEFAULT_ALPHABET;
+          var N = alphabet.length;
+
+          var flipDur = num(vars.flipDuration, 0.03, 1.2, 0.09);
+          var stagger = num(vars.cellStagger, 0, 0.5, 0.05);
+          var cellCount = Math.round(num(vars.cellCount, 1, 24, 12));
+
+          var text = String(vars.boardText == null ? "NOW BOARDING" : vars.boardText)
+            .toUpperCase()
+            .slice(0, cellCount);
+          // Centre the string across the board; unused cells stay on the
+          // drum's first position (blank in the default alphabet).
+          var lead = Math.floor((cellCount - text.length) / 2);
+          var targets = [];
+          for (var i = 0; i < cellCount; i++) {
+            var ch =
+              i >= lead && i < lead + text.length ? text.charAt(i - lead) : alphabet.charAt(0);
+            var g = alphabet.indexOf(ch);
+            targets.push(g < 0 ? 0 : g);
+          }
+
+          // Geometry: fit `cellCount` cells across 1920 with a 120px margin.
+          var GAP = 10;
+          var cw = Math.min(130, Math.floor((1920 - 240 - (cellCount - 1) * GAP) / cellCount));
+          var chh = Math.round(cw * 1.45);
+
+          var board = document.getElementById("sf-board");
+          board.style.gap = GAP + "px";
+
+          function makeFace(cls, glyphTop) {
+            var face = document.createElement("div");
+            face.className = "sf-face " + cls;
+            var glyph = document.createElement("span");
+            glyph.className = "sf-glyph";
+            glyph.style.height = chh + "px";
+            glyph.style.lineHeight = chh + "px";
+            glyph.style.fontSize = Math.round(cw * 0.78) + "px";
+            glyph.style.top = glyphTop + "px";
+            face.appendChild(glyph);
+            return face;
+          }
+
+          var cells = [];
+          for (var c = 0; c < cellCount; c++) {
+            var cell = document.createElement("div");
+            cell.className = "sf-cell";
+            cell.id = "sf-cell-" + c;
+            cell.style.width = cw + "px";
+            cell.style.height = chh + "px";
+            // The mechanism IS clipped, stacked half-glyphs: each face holds a
+            // whole character and shows half of it, and the falling leaf sits
+            // on top of the face behind it. Declared intentional so the layout
+            // auditor reports real regressions instead of the design.
+            cell.setAttribute("data-layout-allow-overlap", "");
+            cell.setAttribute("data-layout-allow-occlusion", "");
+            cell.setAttribute("data-layout-allow-overflow", "");
+
+            var top = makeFace("sf-top", 0);
+            var bot = makeFace("sf-bot", -Math.round(chh / 2));
+            var leafA = makeFace("sf-leaf-a", 0);
+            var leafB = makeFace("sf-leaf-b", -Math.round(chh / 2));
+
+            var seam = document.createElement("div");
+            seam.className = "sf-seam";
+
+            cell.appendChild(top);
+            cell.appendChild(bot);
+            cell.appendChild(leafA);
+            cell.appendChild(leafB);
+            cell.appendChild(seam);
+            board.appendChild(cell);
+
+            cells.push({
+              // steps is unidirectional: the drum only ever spins forward,
+              // start position is always the drum's first flap (index 0).
+              steps: targets[c],
+              top: top.firstChild,
+              bot: bot.firstChild,
+              leafA: leafA,
+              leafB: leafB,
+              glyphA: leafA.firstChild,
+              glyphB: leafB.firstChild,
+            });
+          }
+
+          // A face that is not in use must be wiped, not merely hidden.
+          // Leaving a stale transform/filter/glyph on an opacity-0 leaf makes
+          // the DOM (and, via layer promotion, the rasterised pixels) depend
+          // on which frames were visited before this one — the exact failure
+          // seeking is supposed to be immune to.
+          function clearLeaf(leaf, glyph) {
+            leaf.style.opacity = "0";
+            leaf.style.transform = "";
+            leaf.style.filter = "";
+            glyph.textContent = "";
+          }
+
+          function showLeaf(leaf, glyph, char, angle, shade) {
+            glyph.textContent = char;
+            leaf.style.opacity = "1";
+            leaf.style.transform = "rotateX(" + angle.toFixed(2) + "deg)";
+            leaf.style.filter = "brightness(" + shade + ")";
+          }
+
+          // Pure function of absolute composition time. No accumulator, no
+          // dependence on the previous frame — seeking to any t reconstructs
+          // the whole board from t alone.
+          function paint(t) {
+            for (var i = 0; i < cells.length; i++) {
+              var cell = cells[i];
+              var tLocal = t - i * stagger;
+              var raw = tLocal <= 0 ? 0 : tLocal / flipDur;
+              var count = Math.floor(raw);
+              var p = raw - count;
+              if (count >= cell.steps) {
+                count = cell.steps;
+                p = 0;
+              }
+
+              var outgoing = alphabet.charAt(count % N);
+              var incoming = alphabet.charAt((count + 1) % N);
+              var flipping = count < cell.steps && p > 0;
+
+              if (!flipping) {
+                cell.top.textContent = outgoing;
+                cell.bot.textContent = outgoing;
+                clearLeaf(cell.leafA, cell.glyphA);
+                clearLeaf(cell.leafB, cell.glyphB);
+                continue;
+              }
+
+              // The new character is already seated behind the falling flap:
+              // its top half shows, its bottom half is still hidden by the
+              // outgoing flap lying in the lower slot.
+              cell.top.textContent = incoming;
+              cell.bot.textContent = outgoing;
+
+              var theta = 180 * p * p;
+              var shade = (1 - 0.5 * Math.sin(theta * DEG)).toFixed(3);
+              if (theta < 90) {
+                showLeaf(cell.leafA, cell.glyphA, outgoing, -theta, shade);
+                clearLeaf(cell.leafB, cell.glyphB);
+              } else {
+                clearLeaf(cell.leafA, cell.glyphA);
+                showLeaf(cell.leafB, cell.glyphB, incoming, 180 - theta, shade);
+              }
+            }
+          }
+
+          var duration = parseFloat(document.getElementById("sf-root").dataset.duration) || 8;
+
+          // GSAP suppresses events on seek(), so onUpdate callbacks never fire
+          // during a render. A property setter on the tweened driver always
+          // runs, because GSAP writes the value itself.
+          var driverTime = 0;
+          var driver = {};
+          Object.defineProperty(driver, "t", {
+            configurable: true,
+            get: function () {
+              return driverTime;
+            },
+            set: function (value) {
+              driverTime = value;
+              paint(value);
+            },
+          });
+
+          var tl = gsap.timeline({ paused: true });
+          tl.to(driver, { t: duration, duration: duration, ease: "none" }, 0);
+
+          paint(0);
+
+          window.__timelines["split-flap-board"] = tl;
+        })();
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/blocks/thread-message-stack/registry-item.json b/registry/blocks/thread-message-stack/registry-item.json
new file mode 100644
index 0000000000..20c9a6318c
--- /dev/null
+++ b/registry/blocks/thread-message-stack/registry-item.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "thread-message-stack",
+  "type": "hyperframes:block",
+  "title": "Thread Message Stack",
+  "description": "A source-owned editable conversation stack with arbitrary incoming and outgoing messages",
+  "tags": ["social", "conversation", "messages"],
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 8,
+  "files": [
+    {
+      "path": "thread-message-stack.html",
+      "target": "compositions/thread-message-stack.html",
+      "type": "hyperframes:composition"
+    }
+  ]
+}
diff --git a/registry/blocks/thread-message-stack/thread-message-stack.html b/registry/blocks/thread-message-stack/thread-message-stack.html
new file mode 100644
index 0000000000..ce5277f003
--- /dev/null
+++ b/registry/blocks/thread-message-stack/thread-message-stack.html
@@ -0,0 +1,239 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Thread Message Stack</title>
+  </head>
+  <body>
+    <template id="tms-template">
+      <div
+        id="tms-root"
+        data-composition-id="thread-message-stack"
+        data-start="0"
+        data-duration="8"
+        data-width="1920"
+        data-height="1080"
+      >
+        <style>
+          #tms-root,
+          #tms-root * {
+            box-sizing: border-box;
+          }
+
+          #tms-root {
+            position: relative;
+            width: 1920px;
+            height: 1080px;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            background: #2e241a;
+            color: #ffffff;
+            font-family: -apple-system, "Helvetica Neue", "Segoe UI", sans-serif;
+            --tms-out-fill: #2d89e1;
+            --tms-out-ink: #ffffff;
+            --tms-in-fill: rgba(240, 240, 245, 0.82);
+            --tms-in-ink: #101216;
+          }
+
+          #tms-roll,
+          #tms-scrim,
+          #tms-view {
+            position: absolute;
+            inset: 0;
+          }
+
+          #tms-roll {
+            overflow: hidden;
+            background:
+              radial-gradient(circle at 18% 20%, #f0d3a6 0, transparent 31%),
+              radial-gradient(circle at 75% 18%, #e8a86a 0, transparent 34%),
+              radial-gradient(circle at 62% 74%, #2e6a8c 0, transparent 32%),
+              radial-gradient(circle at 18% 82%, #6b4a7a 0, transparent 35%), #2e241a;
+            transform: scale(1.12);
+            will-change: transform;
+          }
+
+          #tms-scrim {
+            background:
+              linear-gradient(
+                to bottom,
+                transparent 0,
+                rgba(0, 0, 0, 0.18) 42%,
+                rgba(0, 0, 0, 0.38) 100%
+              ),
+              linear-gradient(to right, rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0) 78%);
+          }
+
+          #tms-view {
+            overflow: hidden;
+            -webkit-mask-image: linear-gradient(to bottom, transparent 5%, #000 24%, #000 100%);
+            mask-image: linear-gradient(to bottom, transparent 5%, #000 24%, #000 100%);
+          }
+
+          #tms-column {
+            position: absolute;
+            inset: 0;
+          }
+
+          .tms-row {
+            position: absolute;
+            right: 6%;
+            bottom: 10%;
+            left: 6%;
+            display: flex;
+            flex-direction: column;
+            opacity: 0;
+            will-change: transform, opacity;
+          }
+
+          .tms-row[data-side="incoming"] {
+            align-items: flex-start;
+          }
+
+          .tms-row[data-side="outgoing"] {
+            align-items: flex-end;
+          }
+
+          .tms-sender {
+            min-height: 30px;
+            padding: 0 18px 8px;
+            color: #ffffff;
+            font-size: 24px;
+            font-weight: 700;
+            line-height: 1;
+            text-shadow: 0 3px 12px rgba(0, 0, 0, 0.72);
+          }
+
+          .tms-bubble {
+            max-width: min(72%, 920px);
+            padding: 24px 38px;
+            border-radius: 42px;
+            font-size: 42px;
+            font-weight: 500;
+            letter-spacing: -0.015em;
+            line-height: 1.3;
+            overflow-wrap: anywhere;
+            white-space: pre-wrap;
+          }
+
+          .tms-row[data-side="incoming"] .tms-bubble {
+            color: var(--tms-in-ink);
+            background:
+              linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(0, 0, 0, 0.05)),
+              var(--tms-in-fill);
+            box-shadow: 0 12px 34px rgba(0, 0, 0, 0.3);
+            transform-origin: 0 100%;
+          }
+
+          .tms-row[data-side="outgoing"] .tms-bubble {
+            color: var(--tms-out-ink);
+            background:
+              linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.17)),
+              var(--tms-out-fill);
+            box-shadow: 0 12px 38px rgba(0, 0, 0, 0.38);
+            transform-origin: 100% 100%;
+          }
+
+          #tms-driver {
+            position: absolute;
+            width: 1px;
+            height: 1px;
+            opacity: 0;
+            pointer-events: none;
+          }
+        </style>
+
+        <div id="tms-roll" data-layout-ignore></div>
+        <div id="tms-scrim" data-layout-ignore></div>
+        <div id="tms-view"><div id="tms-column"></div></div>
+        <div
+          id="tms-driver"
+          class="clip"
+          data-start="0"
+          data-duration="8"
+          data-track-index="0"
+        ></div>
+
+        <div hidden data-hf-primitive-data>
+          { "messages": [ { "side": "incoming", "text": "wait, that is actually wild", "sender":
+          "Northbeam support" }, { "side": "outgoing", "text": "can you fix it?" }, { "side":
+          "incoming", "text": "way ahead of you" }, { "side": "outgoing", "text": "you are unreal"
+          }, { "side": "incoming", "text": "he owes you dinner for this one" }, { "side":
+          "outgoing", "text": "already booked" } ], "stagger": 0.86, "hold": 1 }
+        </div>
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+            window.__timelines = window.__timelines || {};
+            var root = document.getElementById("tms-root");
+            var column = document.getElementById("tms-column");
+            var roll = document.getElementById("tms-roll");
+            var data = JSON.parse(
+              root
+                .querySelector("[data-hf-primitive-data]")
+                .textContent.replace(/\s*[\r\n]+\s*/g, " "),
+            );
+            var messages = data.messages;
+            var duration = Number(root.dataset.duration || 8);
+            var available = Math.max(0.2, duration - Math.max(0, Number(data.hold || 0)) - 0.35);
+            var requestedStagger = Math.max(0, Number(data.stagger == null ? 0.72 : data.stagger));
+            var stagger =
+              messages.length <= 1 ? 0 : Math.min(requestedStagger, available / messages.length);
+            var start = 0.25;
+            var rows = [];
+
+            messages.forEach(function (message, index) {
+              var row = document.createElement("div");
+              row.id = "tms-message-" + index;
+              row.className = "tms-row";
+              row.dataset.side = message.side;
+              if (message.sender !== undefined) {
+                var sender = document.createElement("div");
+                sender.className = "tms-sender";
+                sender.textContent = message.sender;
+                row.appendChild(sender);
+              }
+              var bubble = document.createElement("div");
+              bubble.className = "tms-bubble";
+              bubble.textContent = message.text;
+              row.appendChild(bubble);
+              column.appendChild(row);
+              rows.push(row);
+            });
+
+            var heights = rows.map(function (row) {
+              return Math.max(118, row.offsetHeight || 118) + 22;
+            });
+            var tl = gsap.timeline({ paused: true });
+            tl.fromTo(
+              roll,
+              { x: 0, y: 0, scale: 1.12 },
+              { x: -54, y: -22, scale: 1.18, duration: duration, ease: "sine.inOut" },
+              0,
+            );
+
+            rows.forEach(function (row, index) {
+              var at = start + index * stagger;
+              var direction = row.dataset.side === "incoming" ? -1 : 1;
+              tl.fromTo(
+                row,
+                { x: direction * 34, y: 0, scale: 0.94, opacity: 0 },
+                { x: 0, y: 0, scale: 1, opacity: 1, duration: 0.28, ease: "back.out(1.45)" },
+                at,
+              );
+              var offset = 0;
+              for (var previous = index - 1; previous >= 0; previous -= 1) {
+                offset += heights[previous + 1];
+                tl.to(rows[previous], { y: -offset, duration: 0.24, ease: "power3.out" }, at);
+              }
+            });
+
+            window.__timelines["thread-message-stack"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/blocks/ui-3d-reveal/ui-3d-reveal.html b/registry/blocks/ui-3d-reveal/ui-3d-reveal.html
index 7707480b56..ba6237c4d8 100644
--- a/registry/blocks/ui-3d-reveal/ui-3d-reveal.html
+++ b/registry/blocks/ui-3d-reveal/ui-3d-reveal.html
@@ -994,8 +994,8 @@
                     <span class="prop-section-icon">+</span>
                   </div>
                   <div class="fill-row">
-                    <div class="fill-preview" style="background: #6366f1"></div>
-                    <span class="fill-hex">6366F1</span>
+                    <div class="fill-preview" style="background: #ffffff"></div>
+                    <span class="fill-hex">FFFFFF</span>
                     <span class="fill-pct">100%</span>
                   </div>
                 </div>
@@ -1663,154 +1663,6 @@
           margin-top: 20px;
         }
 
-        /* ── Artboard content ── */
-        [data-composition-id="ui-3d-reveal"] .ab-nav {
-          height: 44px;
-          background: #fff;
-          border-bottom: 1px solid #f0f0f0;
-          display: flex;
-          align-items: center;
-          padding: 0 20px;
-          gap: 0;
-        }
-
-        [data-composition-id="ui-3d-reveal"] .ab-logo-mark {
-          width: 22px;
-          height: 22px;
-          background: #6366f1;
-          border-radius: 6px;
-          flex-shrink: 0;
-        }
-
-        [data-composition-id="ui-3d-reveal"] .ab-logo-text {
-          width: 48px;
-          height: 10px;
-          background: #1a1a1a;
-          border-radius: 3px;
-          margin-left: 8px;
-        }
-
-        [data-composition-id="ui-3d-reveal"] .ab-nav-links {
-          display: flex;
-          gap: 14px;
-          flex: 1;
-          justify-content: center;
-        }
-
-        [data-composition-id="ui-3d-reveal"] .ab-link {
-          width: 28px;
-          height: 8px;
-          background: #d0d0d0;
-          border-radius: 3px;
-        }
-
-        [data-composition-id="ui-3d-reveal"] .ab-cta-btn {
-          background: #6366f1;
-          color: white;
-          font-size: 10px;
-          font-weight: 600;
-          padding: 6px 14px;
-          border-radius: 6px;
-          white-space: nowrap;
-          font-family: "Inter", sans-serif;
-        }
-
-        [data-composition-id="ui-3d-reveal"] .ab-hero {
-          padding: 28px 24px 20px;
-          background: #fafafa;
-          border-bottom: 1px solid #f0f0f0;
-        }
-
-        [data-composition-id="ui-3d-reveal"] .ab-badge {
-          display: inline-flex;
-          align-items: center;
-          font-size: 9px;
-          font-weight: 500;
-          color: #6366f1;
-          background: #eef2ff;
-          padding: 3px 8px;
-          border-radius: 20px;
-          margin-bottom: 10px;
-          font-family: "Inter", sans-serif;
-        }
-
-        [data-composition-id="ui-3d-reveal"] .ab-h1 {
-          font-size: 22px;
-          font-weight: 700;
-          color: #111;
-          line-height: 1.2;
-          letter-spacing: -0.04em;
-          margin-bottom: 8px;
-          font-family: "Inter", sans-serif;
-        }
-
-        [data-composition-id="ui-3d-reveal"] .ab-sub {
-          font-size: 10px;
-          color: #6b6b6b;
-          margin-bottom: 14px;
-          font-family: "Inter", sans-serif;
-        }
-
-        [data-composition-id="ui-3d-reveal"] .ab-hero-btns {
-          display: flex;
-          gap: 8px;
-          align-items: center;
-        }
-
-        [data-composition-id="ui-3d-reveal"] .ab-btn-primary {
-          background: #6366f1;
-          color: white;
-          font-size: 9px;
-          font-weight: 600;
-          padding: 7px 16px;
-          border-radius: 6px;
-          font-family: "Inter", sans-serif;
-        }
-
-        [data-composition-id="ui-3d-reveal"] .ab-btn-ghost {
-          font-size: 9px;
-          color: #6366f1;
-          font-weight: 500;
-          font-family: "Inter", sans-serif;
-        }
-
-        [data-composition-id="ui-3d-reveal"] .ab-cards {
-          display: flex;
-          gap: 10px;
-          padding: 16px 20px;
-          background: #fff;
-        }
-
-        [data-composition-id="ui-3d-reveal"] .ab-card {
-          flex: 1;
-          background: #f8f9fa;
-          border: 1px solid #efefef;
-          border-radius: 8px;
-          padding: 12px 10px;
-        }
-
-        [data-composition-id="ui-3d-reveal"] .ab-card-icon {
-          width: 24px;
-          height: 24px;
-          border-radius: 6px;
-          margin-bottom: 8px;
-        }
-
-        [data-composition-id="ui-3d-reveal"] .ab-card-title {
-          width: 70%;
-          height: 7px;
-          background: #d0d0d0;
-          border-radius: 3px;
-          margin-bottom: 6px;
-        }
-
-        [data-composition-id="ui-3d-reveal"] .ab-card-body {
-          width: 90%;
-          height: 6px;
-          background: #e8e8e8;
-          border-radius: 3px;
-        }
-
         /* ── Selection handles ── */
         [data-composition-id="ui-3d-reveal"] .selection-ring {
           position: absolute;
diff --git a/registry/blocks/vfx-anamorphic-flare/registry-item.json b/registry/blocks/vfx-anamorphic-flare/registry-item.json
new file mode 100644
index 0000000000..718830ec45
--- /dev/null
+++ b/registry/blocks/vfx-anamorphic-flare/registry-item.json
@@ -0,0 +1,158 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "vfx-anamorphic-flare",
+  "type": "hyperframes:block",
+  "title": "Anamorphic Streak Flare",
+  "description": "A drifting field of bright points, each one throwing the long horizontal blue-violet streak a real anamorphic cinema lens produces. Built from the measured filter constants: a 0.3 high-pass, 80 horizontal taps at quarter resolution, a samples/3 gain and a 0x7a8aff tint.",
+  "stability": "experimental",
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 10,
+  "tags": ["vfx", "background", "showcase", "optical", "canvas"],
+  "variables": [
+    {
+      "id": "intensity",
+      "type": "number",
+      "label": "Streak intensity",
+      "default": 5,
+      "min": 0,
+      "max": 20,
+      "step": 0.1
+    },
+    {
+      "id": "threshold",
+      "type": "number",
+      "label": "High-pass threshold",
+      "default": 0.3,
+      "min": 0,
+      "max": 1,
+      "step": 0.01
+    },
+    {
+      "id": "streakLength",
+      "type": "number",
+      "label": "Streak length gain",
+      "default": 1,
+      "min": 0.1,
+      "max": 6,
+      "step": 0.05
+    },
+    {
+      "id": "tint",
+      "type": "color",
+      "label": "Streak tint",
+      "default": "#7a8aff"
+    },
+    {
+      "id": "bloomRadius",
+      "type": "number",
+      "label": "Bloom radius",
+      "default": 0,
+      "min": 0,
+      "max": 80,
+      "step": 1,
+      "unit": "px"
+    },
+    {
+      "id": "timeScale",
+      "type": "number",
+      "label": "Drift rate",
+      "default": 0.5,
+      "min": 0,
+      "max": 3,
+      "step": 0.05
+    },
+    {
+      "id": "emitters",
+      "type": "number",
+      "label": "Emitter count",
+      "default": 140,
+      "min": 1,
+      "max": 400,
+      "step": 1
+    },
+    {
+      "id": "backdrop",
+      "type": "color",
+      "label": "Backdrop",
+      "default": "#04040a"
+    }
+  ],
+  "files": [
+    {
+      "path": "vfx-anamorphic-flare.html",
+      "target": "compositions/vfx-anamorphic-flare.html",
+      "type": "hyperframes:composition"
+    }
+  ],
+  "params": [
+    {
+      "key": "--intensity",
+      "label": "Streak intensity",
+      "type": "number",
+      "default": "5",
+      "min": 0,
+      "max": 20,
+      "step": 0.1
+    },
+    {
+      "key": "--threshold",
+      "label": "High-pass threshold",
+      "type": "number",
+      "default": "0.3",
+      "min": 0,
+      "max": 1,
+      "step": 0.01
+    },
+    {
+      "key": "--streaklength",
+      "label": "Streak length gain",
+      "type": "number",
+      "default": "1",
+      "min": 0.1,
+      "max": 6,
+      "step": 0.05
+    },
+    {
+      "key": "--tint",
+      "label": "Streak tint",
+      "type": "color",
+      "default": "#7a8aff"
+    },
+    {
+      "key": "--bloomradius",
+      "label": "Bloom radius",
+      "type": "number",
+      "default": "0",
+      "min": 0,
+      "max": 80,
+      "step": 1
+    },
+    {
+      "key": "--timescale",
+      "label": "Drift rate",
+      "type": "number",
+      "default": "0.5",
+      "min": 0,
+      "max": 3,
+      "step": 0.05
+    },
+    {
+      "key": "--emitters",
+      "label": "Emitter count",
+      "type": "number",
+      "default": "140",
+      "min": 1,
+      "max": 400,
+      "step": 1
+    },
+    {
+      "key": "--backdrop",
+      "label": "Backdrop",
+      "type": "color",
+      "default": "#04040a"
+    }
+  ]
+}
diff --git a/registry/blocks/vfx-anamorphic-flare/vfx-anamorphic-flare.html b/registry/blocks/vfx-anamorphic-flare/vfx-anamorphic-flare.html
new file mode 100644
index 0000000000..d863be4187
--- /dev/null
+++ b/registry/blocks/vfx-anamorphic-flare/vfx-anamorphic-flare.html
@@ -0,0 +1,372 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Anamorphic Streak Flare</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #000;
+        overflow: hidden;
+      }
+      #af-root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #af-canvas {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="af-root"
+      data-composition-id="vfx-anamorphic-flare"
+      data-root="true"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="10"
+      data-composition-variables='[
+        {"id":"intensity","type":"number","label":"Streak intensity","default":5,"min":0,"max":20,"step":0.1},
+        {"id":"threshold","type":"number","label":"High-pass threshold","default":0.3,"min":0,"max":1,"step":0.01},
+        {"id":"streakLength","type":"number","label":"Streak length gain","default":1,"min":0.1,"max":6,"step":0.05},
+        {"id":"tint","type":"color","label":"Streak tint","default":"#7a8aff"},
+        {"id":"bloomRadius","type":"number","label":"Bloom radius","default":0,"min":0,"max":80,"step":1,"unit":"px"},
+        {"id":"timeScale","type":"number","label":"Drift rate","default":0.5,"min":0,"max":3,"step":0.05},
+        {"id":"emitters","type":"number","label":"Emitter count","default":140,"min":1,"max":400,"step":1},
+        {"id":"backdrop","type":"color","label":"Backdrop","default":"#04040a"}
+      ]'
+    >
+      <canvas id="af-canvas" width="1920" height="1080"></canvas>
+
+      <!-- Driver clip: gives HyperFrames a timed element to own on track 0. -->
+      <div
+        id="af-drv"
+        class="clip"
+        data-start="0"
+        data-duration="10"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+
+    <script>
+      (function () {
+        var DUR = 10;
+        var W = 1920;
+        var H = 1080;
+
+        var root = document.getElementById("af-root");
+        var V = (window.__hyperframes && window.__hyperframes.getVariables()) || {};
+        var CS = getComputedStyle(root);
+
+        // A declared variable reaches CSS as a custom property on the root.
+        // Read that first so a host stylesheet can retheme the block, then
+        // fall back to the declared value. Both the namespaced and the bare
+        // property name are probed: which one the runtime emits has changed
+        // across versions, and the block should not care.
+        function raw(id) {
+          var slug = id.toLowerCase();
+          var css =
+            CS.getPropertyValue("--hf-var-" + slug).trim() ||
+            CS.getPropertyValue("--" + slug).trim();
+          return css !== "" ? css : V[id];
+        }
+        function num(id, fallback) {
+          var n = parseFloat(raw(id));
+          return isFinite(n) ? n : fallback;
+        }
+        function str(id, fallback) {
+          var s = raw(id);
+          return typeof s === "string" && s !== "" ? s : fallback;
+        }
+
+        // ---------------------------------------------------------------
+        // Measured constants.
+        //
+        // Read from the three.js anamorphic post-processing example (MIT),
+        // cross-checked against a live capture of that demo's own GUI:
+        //
+        //   tint 0x7a8aff, threshold 0.3, intensity 5, bloom radius 0,
+        //   samples 80, time scale 0.5, resolution scale 0.25.
+        //
+        // The filter walks samples/2 taps in each direction HORIZONTALLY
+        // only, weights each tap by 1 - |i| / halfSamples (a tent), and
+        // normalises the sum by samples / 3.0. Dividing by samples/3 rather
+        // than by the weight sum is deliberate: it is a gain above 1, not
+        // an average, which is why a dim highlight still throws a readable
+        // streak.
+        //
+        // This implementation evaluates that convolution in closed form
+        // instead of running the 80-tap loop. For a small bright source the
+        // tent-weighted horizontal blur has an exact analytic result: the
+        // tent itself, centred on the source. So one horizontal gradient
+        // per highlight is the same arithmetic the loop would perform, at
+        // a fraction of the cost, and with no dependence on WebGL surviving
+        // seek capture.
+        // ---------------------------------------------------------------
+        var SAMPLES = 80;
+        var HALF_SAMPLES = SAMPLES / 2; // 40 taps each side
+        var RES_SCALE = 0.25; // the streak buffer runs at quarter resolution
+        var NORM = SAMPLES / 3; // total / (samples / 3.0)
+        var REF_W = 1280; // width the constants were measured at
+
+        // 40 taps of a 1/(0.25 * 1280) texel step = 12.5% of frame width per
+        // side. Held as a fraction rather than as absolute pixels so the look
+        // matches the reference at any output size.
+        var HALF_FRAC = HALF_SAMPLES / (RES_SCALE * REF_W);
+
+        var INTENSITY = num("intensity", 5);
+        var THRESHOLD = num("threshold", 0.3);
+        var STREAK_LEN = num("streakLength", 1);
+        var BLOOM_R = num("bloomRadius", 0);
+        var TIME_SCALE = num("timeScale", 0.5);
+        var COUNT = Math.max(1, Math.round(num("emitters", 140)));
+        var BACKDROP = str("backdrop", "#04040a");
+        var TINT = hexRgb(str("tint", "#7a8aff"), [0.478, 0.541, 1.0]);
+
+        function hexRgb(hex, fallback) {
+          var m = /^#?([0-9a-f]{6})$/i.exec(String(hex).trim());
+          if (!m) return fallback;
+          var n = parseInt(m[1], 16);
+          return [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255];
+        }
+
+        function mulberry32(seed) {
+          return function () {
+            seed |= 0;
+            seed = (seed + 0x6d2b79f5) | 0;
+            var t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
+            t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+            return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+          };
+        }
+
+        function hsv(h, s, v) {
+          var hh = ((((h % 360) + 360) % 360) / 60) % 6;
+          var c = v * s;
+          var x = c * (1 - Math.abs((hh % 2) - 1));
+          var m = v - c;
+          var r = 0;
+          var g = 0;
+          var b = 0;
+          if (hh < 1) {
+            r = c;
+            g = x;
+          } else if (hh < 2) {
+            r = x;
+            g = c;
+          } else if (hh < 3) {
+            g = c;
+            b = x;
+          } else if (hh < 4) {
+            g = x;
+            b = c;
+          } else if (hh < 5) {
+            r = x;
+            b = c;
+          } else {
+            r = c;
+            b = x;
+          }
+          return [r + m, g + m, b + m];
+        }
+
+        // ---------------------------------------------------------------
+        // The emitter field. Every emitter is a closed-form function of t:
+        // two incommensurate sinusoids for position and one for brightness.
+        // The seeded PRNG runs once, at setup, so the field is identical on
+        // every load and every seek.
+        // ---------------------------------------------------------------
+        var rng = mulberry32(1337);
+        var EM = [];
+        for (var i = 0; i < COUNT; i++) {
+          EM.push({
+            x0: rng() * W,
+            y0: rng() * H,
+            ax: 24 + rng() * 90,
+            ay: 12 + rng() * 48,
+            fx: 0.018 + rng() * 0.05,
+            fy: 0.015 + rng() * 0.045,
+            px: rng(),
+            py: rng(),
+            r: 3 + Math.pow(rng(), 1.6) * 10,
+            h: rng() * 360,
+            s: 0.62 + rng() * 0.38,
+            v: 0.7 + rng() * 0.3,
+            fb: 0.03 + rng() * 0.09,
+            pb: rng(),
+          });
+        }
+
+        var TAU = Math.PI * 2;
+        var canvas = document.getElementById("af-canvas");
+        var ctx = canvas.getContext("2d");
+
+        // Streaks are accumulated in a quarter-resolution buffer, matching
+        // the reference's setResolutionScale(0.25). Upscaling it bilinearly
+        // is what gives the streak its soft vertical falloff, and it is the
+        // reason the streak reads as smooth rather than as a hard bar.
+        var SW = Math.round(W * RES_SCALE);
+        var SH = Math.round(H * RES_SCALE);
+        var sbuf = document.createElement("canvas");
+        sbuf.width = SW;
+        sbuf.height = SH;
+        var sctx = sbuf.getContext("2d");
+
+        function rgba(c, a) {
+          return (
+            "rgba(" +
+            Math.round(Math.min(1, Math.max(0, c[0])) * 255) +
+            "," +
+            Math.round(Math.min(1, Math.max(0, c[1])) * 255) +
+            "," +
+            Math.round(Math.min(1, Math.max(0, c[2])) * 255) +
+            "," +
+            Math.min(1, Math.max(0, a)) +
+            ")"
+          );
+        }
+
+        // A slow swell across the clip so the field reads as a shot rather
+        // than as a loop. Closed form in t, like everything else here.
+        function gainAt(t) {
+          var u = Math.min(1, Math.max(0, t / DUR));
+          return 0.75 + 0.35 * Math.sin(Math.PI * u);
+        }
+
+        function draw(t) {
+          var tau = t * TIME_SCALE;
+          var gain = gainAt(t);
+          var halfLen = HALF_FRAC * W * STREAK_LEN;
+
+          sctx.setTransform(1, 0, 0, 1, 0, 0);
+          sctx.clearRect(0, 0, SW, SH);
+          sctx.globalCompositeOperation = "lighter";
+
+          var e;
+          var k;
+          var col;
+          var bright;
+          var x;
+          var y;
+          for (k = 0; k < EM.length; k++) {
+            e = EM[k];
+            x = e.x0 + e.ax * Math.sin(TAU * (e.fx * tau + e.px));
+            y = e.y0 + e.ay * Math.sin(TAU * (e.fy * tau + e.py));
+            bright = e.v * (0.62 + 0.38 * Math.sin(TAU * (e.fb * tau + e.pb)));
+            col = hsv(e.h, e.s, Math.max(0, bright));
+
+            // High pass, then tint, exactly as the reference filter does:
+            // max(colour - threshold, 0) * tint. Below threshold there is no
+            // streak at all, which is what keeps the field from smearing.
+            var hp = [
+              Math.max(0, col[0] - THRESHOLD) * TINT[0],
+              Math.max(0, col[1] - THRESHOLD) * TINT[1],
+              Math.max(0, col[2] - THRESHOLD) * TINT[2],
+            ];
+            var peak = Math.max(hp[0], Math.max(hp[1], hp[2]));
+            if (peak <= 0.0001) continue;
+
+            // Peak of the tent equals the source value times intensity over
+            // the samples/3 normaliser. Magnitude is carried in alpha so the
+            // hue keeps full 8-bit precision at low brightness.
+            var alpha = (peak * INTENSITY * gain) / NORM;
+            if (alpha < 0.003) continue;
+            var hue = [hp[0] / peak, hp[1] / peak, hp[2] / peak];
+
+            var bx = x * RES_SCALE;
+            var by = y * RES_SCALE;
+            var bh = Math.max(1, e.r * 2 * RES_SCALE);
+            var bl = halfLen * RES_SCALE;
+
+            var g = sctx.createLinearGradient(bx - bl, 0, bx + bl, 0);
+            g.addColorStop(0, rgba(hue, 0));
+            g.addColorStop(0.5, rgba(hue, alpha));
+            g.addColorStop(1, rgba(hue, 0));
+            sctx.fillStyle = g;
+            sctx.fillRect(bx - bl, by - bh / 2, bl * 2, bh);
+          }
+
+          ctx.setTransform(1, 0, 0, 1, 0, 0);
+          ctx.globalCompositeOperation = "source-over";
+          ctx.fillStyle = BACKDROP;
+          ctx.fillRect(0, 0, W, H);
+
+          ctx.globalCompositeOperation = "lighter";
+          ctx.imageSmoothingEnabled = true;
+          ctx.imageSmoothingQuality = "high";
+          ctx.drawImage(sbuf, 0, 0, SW, SH, 0, 0, W, H);
+
+          // The highlights themselves, drawn at full resolution on top.
+          for (k = 0; k < EM.length; k++) {
+            e = EM[k];
+            x = e.x0 + e.ax * Math.sin(TAU * (e.fx * tau + e.px));
+            y = e.y0 + e.ay * Math.sin(TAU * (e.fy * tau + e.py));
+            bright = e.v * (0.62 + 0.38 * Math.sin(TAU * (e.fb * tau + e.pb)));
+            col = hsv(e.h, e.s, Math.max(0, bright));
+
+            if (BLOOM_R > 0) {
+              var br = e.r + BLOOM_R;
+              var gb = ctx.createRadialGradient(x, y, 0, x, y, br);
+              gb.addColorStop(0, rgba(col, 0.5 * gain));
+              gb.addColorStop(0.35, rgba(col, 0.16 * gain));
+              gb.addColorStop(1, rgba(col, 0));
+              ctx.fillStyle = gb;
+              ctx.fillRect(x - br, y - br, br * 2, br * 2);
+            }
+
+            var core = ctx.createRadialGradient(x, y, 0, x, y, e.r);
+            core.addColorStop(
+              0,
+              rgba([col[0] * 0.88 + 0.12, col[1] * 0.88 + 0.12, col[2] * 0.88 + 0.12], 1),
+            );
+            core.addColorStop(0.72, rgba(col, 0.96));
+            core.addColorStop(1, rgba(col, 0));
+            ctx.fillStyle = core;
+            ctx.fillRect(x - e.r, y - e.r, e.r * 2, e.r * 2);
+          }
+        }
+
+        window.__timelines = window.__timelines || {};
+        var tl = gsap.timeline({ paused: true });
+
+        // The canvas is repainted from a property SETTER, not from a
+        // timeline onUpdate callback: gsap suppresses events on seek(), so a
+        // callback-driven canvas silently freezes on frame 0 under any
+        // consumer that scrubs. Tweened values are written on every render,
+        // suppressed or not, so the setter fires on seek and hands us the
+        // frame time directly.
+        var driver = { _t: 0 };
+        Object.defineProperty(driver, "t", {
+          get: function () {
+            return this._t;
+          },
+          set: function (v) {
+            this._t = v;
+            draw(v);
+          },
+        });
+        tl.to(driver, { t: DUR, duration: DUR, ease: "none" }, 0);
+        window.__timelines["vfx-anamorphic-flare"] = tl;
+
+        draw(0);
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/blocks/vfx-iphone-device/models/iphone.glb b/registry/blocks/vfx-iphone-device/models/iphone.glb
index fd73368051..f042300855 100644
Binary files a/registry/blocks/vfx-iphone-device/models/iphone.glb and b/registry/blocks/vfx-iphone-device/models/iphone.glb differ
diff --git a/registry/blocks/vfx-iphone-device/models/macbook.glb b/registry/blocks/vfx-iphone-device/models/macbook.glb
index 2fed3be1ba..762511110a 100644
Binary files a/registry/blocks/vfx-iphone-device/models/macbook.glb and b/registry/blocks/vfx-iphone-device/models/macbook.glb differ
diff --git a/registry/blocks/vfx-iphone-device/vfx-iphone-device.html b/registry/blocks/vfx-iphone-device/vfx-iphone-device.html
index 62703ceef6..f48fa9e02a 100644
--- a/registry/blocks/vfx-iphone-device/vfx-iphone-device.html
+++ b/registry/blocks/vfx-iphone-device/vfx-iphone-device.html
@@ -537,6 +537,46 @@
       glassLens.renderOrder = 10;
 
       // iPhone
+      // The replacement device models carry UVs authored for a tiling material
+      // (the laptop panel runs u -6.3..6.3), so mapping one screen image onto
+      // them clamps at the edges and smears the last row of pixels across the
+      // whole panel. Both screens are flat planes, so derive planar UVs from
+      // the mesh's own bounds instead of trusting what shipped.
+      function planarScreenUv(mesh) {
+        var g = mesh.geometry;
+        g.computeBoundingBox();
+        var bb = g.boundingBox;
+        var pos = g.attributes.position;
+        var w = bb.max.x - bb.min.x || 1;
+        var h = bb.max.y - bb.min.y || 1;
+        var uv = new Float32Array(pos.count * 2);
+        for (var i = 0; i < pos.count; i++) {
+          uv[i * 2] = (pos.getX(i) - bb.min.x) / w;
+          uv[i * 2 + 1] = (pos.getY(i) - bb.min.y) / h;
+        }
+        g.setAttribute("uv", new THREE.BufferAttribute(uv, 2));
+      }
+
+      // These compositions were authored around a model whose screen faced -Z
+      // (the old asset's display plane sat at its minimum Z) and every camera
+      // move and spin in the timeline assumes it. The replacement faces +Z, so
+      // align the model rather than re-time the animation. Reads the model's
+      // own parts, so a re-export facing the other way still lands right.
+      function alignScreenToMinusZ(root, frontName, backName) {
+        var front = root.getObjectByName(frontName);
+        var back = root.getObjectByName(backName);
+        if (!front || !back) return;
+        // matrixWorld is only refreshed during a render, and this runs at load,
+        // so without this the two parts both read as the origin and the test
+        // silently never fires.
+        root.updateWorldMatrix(true, true);
+        var fp = new THREE.Vector3();
+        var bp = new THREE.Vector3();
+        front.getWorldPosition(fp);
+        back.getWorldPosition(bp);
+        if (fp.z > bp.z) root.rotation.y += Math.PI;
+      }
+
       loader.load("models/iphone.glb", function (gltf) {
         var m = gltf.scene;
         var box = new THREE.Box3().setFromObject(m);
@@ -547,12 +587,16 @@
         m.position.sub(box.getCenter(new THREE.Vector3()));
         m.traverse(function (child) {
           if (!child.isMesh) return;
-          if (child.material && child.material.emissiveMap) {
+          // `front-glass` is the display face; Blender's exporter suffixes the
+          // mesh name and leaves the node name bare, so match the prefix.
+          if (child.name.indexOf("front-glass") === 0) {
+            planarScreenUv(child);
             child.material = new THREE.MeshBasicMaterial({ map: phoneTex });
           }
         });
         scene.add(glassLens);
 
+        alignScreenToMinusZ(m, "front-glass", "rear-window");
         phoneGrp.add(m);
         ready++;
         if (ready === 2) onReady();
@@ -569,53 +613,28 @@
         m.position.sub(box.getCenter(new THREE.Vector3()));
 
         m.traverse(function (child) {
-          if (child.isMesh && (child.name === "matte" || child.name === "Matte")) {
+          // `display` is the panel. `display-notch` is the bezel cut-out beside
+          // it and must keep its own material, so this cannot be a prefix test.
+          if (child.isMesh && child.name.replace(/\.\d+$/, "") === "display") {
+            planarScreenUv(child);
             child.material = new THREE.MeshBasicMaterial({ map: lapTex });
           }
         });
 
-        // Apple logo on back of lid — exact coords from model inspection:
-        // back mesh center: (0, 0.04, -1.54), matte center: (0, 0.15, -1.56)
-        // Back surface faces -Z. Logo at z = -1.63 (outside back surface), facing -Z.
-        var lc = document.createElement("canvas");
-        lc.width = 256;
-        lc.height = 256;
-        var lx = lc.getContext("2d");
-        lx.clearRect(0, 0, 256, 256);
-        lx.save();
-        lx.translate(128, 128);
-        lx.scale(11, 11);
-        lx.translate(-12, -13);
-        lx.fillStyle = "#b8b8bc";
-        lx.fill(
-          new Path2D(
-            "M18.71,19.5C17.88,20.49 17,21.4 15.66,21.42C14.29,21.45 13.73,20.56 12.18,20.56C10.63,20.56 9.99,21.4 8.74,21.45C7.44,21.5 6.47,20.36 5.62,19.39C3.89,17.39 2.59,13.78 4.37,11.37C5.25,10.17 6.61,9.42 8.08,9.4C9.4,9.37 10.62,10.35 11.43,10.35C12.24,10.35 13.72,9.17 15.32,9.35C15.98,9.38 17.66,9.61 18.72,11.17C18.62,11.23 16.39,12.52 16.42,15.19C16.45,18.37 19.18,19.35 19.21,19.36ZM15.23,7.7C15.96,6.82 16.43,5.6 16.31,4.38C15.25,4.42 13.97,5.09 13.22,5.96C12.55,6.74 11.98,7.99 12.12,9.18C13.29,9.27 14.5,8.57 15.23,7.7Z",
-          ),
-        );
-        lx.restore();
-        var logoTex = new THREE.CanvasTexture(lc);
-        logoTex.minFilter = THREE.LinearFilter;
-        var appleLogoMesh = new THREE.Mesh(
-          new THREE.PlaneGeometry(0.55, 0.55),
-          new THREE.MeshBasicMaterial({
-            map: logoTex,
-            transparent: true,
-            depthWrite: false,
-            side: THREE.DoubleSide,
-          }),
-        );
-        appleLogoMesh.position.set(0, 0.1, -1.63);
-        appleLogoMesh.rotation.y = PI;
-        m.add(appleLogoMesh);
-
         lapGrp.add(m);
         ready++;
         if (ready === 2) onReady();
       });
 
       function onReady() {
-        paintReady = true;
-        captureScreens();
+        requestAnimationFrame(function () {
+          requestAnimationFrame(function () {
+            paintReady = true;
+            captureScreens();
+            window.__timelines = window.__timelines || {};
+            window.__timelines["devices-canvas"] = tl;
+          });
+        });
       }
 
       // ── Cubic Bezier Implementation ────────────────────────────────────
@@ -751,9 +770,8 @@
       }
 
       // ── GSAP Timeline — Product Review Edit ────────────────────────────
+      // __timelines created in onReady() after GLTF models load
       var tl = gsap.timeline({ paused: true });
-      window.__timelines = window.__timelines || {};
-      window.__timelines["devices-canvas"] = tl;
 
       tl.to(S, { p: 1, drift: 15, duration: 15, ease: "none", onUpdate: render }, 0);
 
@@ -807,6 +825,8 @@
       // Scroll on MacBook reveal
       tl.to(S, { scroll: 0.8, duration: 3, ease: breatheEase }, 9.5);
       tl.to(S, { scroll: 0.3, duration: 2, ease: driftEase }, 13);
+
+      // __timelines registered in onReady() after GLTF models load
     </script>
   </body>
 </html>
diff --git a/registry/blocks/weight-wave/assets/fonts/OFL.txt b/registry/blocks/weight-wave/assets/fonts/OFL.txt
new file mode 100644
index 0000000000..d4361a99fe
--- /dev/null
+++ b/registry/blocks/weight-wave/assets/fonts/OFL.txt
@@ -0,0 +1,93 @@
+Copyright 2020 The Recursive Project Authors (https://github.com/arrowtype/recursive)
+
+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/weight-wave/assets/fonts/Recursive-wght-slnt-latin.woff2 b/registry/blocks/weight-wave/assets/fonts/Recursive-wght-slnt-latin.woff2
new file mode 100644
index 0000000000..f7205e9b80
Binary files /dev/null and b/registry/blocks/weight-wave/assets/fonts/Recursive-wght-slnt-latin.woff2 differ
diff --git a/registry/blocks/weight-wave/registry-item.json b/registry/blocks/weight-wave/registry-item.json
new file mode 100644
index 0000000000..dafd1cadf0
--- /dev/null
+++ b/registry/blocks/weight-wave/registry-item.json
@@ -0,0 +1,116 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "weight-wave",
+  "type": "hyperframes:block",
+  "title": "Weight Wave",
+  "description": "A crest of thickness travels along a headline: each character swells from light to black and leans forward as the wave passes, driven by the wght and slnt variable-font axes rather than by transforms.",
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 6,
+  "tags": ["typography", "kinetic-type", "title", "variable-font", "text"],
+  "license": "OFL-1.1",
+  "variables": [
+    {
+      "id": "text",
+      "type": "string",
+      "label": "Headline",
+      "default": "PRESSURE MOVES THROUGH TYPE",
+      "maxLength": 64
+    },
+    {
+      "id": "color",
+      "type": "color",
+      "label": "Text color",
+      "default": "#f5f5f7"
+    },
+    {
+      "id": "background",
+      "type": "color",
+      "label": "Background",
+      "default": "#0b0b0d"
+    },
+    {
+      "id": "weightFrom",
+      "type": "number",
+      "label": "Weight (rest)",
+      "default": 400,
+      "min": 300,
+      "max": 1000,
+      "step": 10
+    },
+    {
+      "id": "weightTo",
+      "type": "number",
+      "label": "Weight (crest)",
+      "default": 1000,
+      "min": 300,
+      "max": 1000,
+      "step": 10
+    },
+    {
+      "id": "crestWidth",
+      "type": "number",
+      "label": "Crest width",
+      "default": 4,
+      "min": 1,
+      "max": 24,
+      "step": 0.5,
+      "unit": "chars"
+    },
+    {
+      "id": "sweepSpeed",
+      "type": "number",
+      "label": "Sweep speed",
+      "default": 0.5,
+      "min": 0.05,
+      "max": 3,
+      "step": 0.05,
+      "unit": "passes/s"
+    },
+    {
+      "id": "slant",
+      "type": "number",
+      "label": "Slant at crest",
+      "default": -12,
+      "min": -15,
+      "max": 0,
+      "step": 0.5,
+      "unit": "deg"
+    },
+    {
+      "id": "direction",
+      "type": "enum",
+      "label": "Direction",
+      "default": "ltr",
+      "options": [
+        {
+          "value": "ltr",
+          "label": "Left to right"
+        },
+        {
+          "value": "rtl",
+          "label": "Right to left"
+        }
+      ]
+    }
+  ],
+  "files": [
+    {
+      "path": "weight-wave.html",
+      "target": "compositions/weight-wave.html",
+      "type": "hyperframes:composition"
+    },
+    {
+      "path": "assets/fonts/Recursive-wght-slnt-latin.woff2",
+      "target": "compositions/assets/fonts/Recursive-wght-slnt-latin.woff2",
+      "type": "hyperframes:asset"
+    },
+    {
+      "path": "assets/fonts/OFL.txt",
+      "target": "compositions/assets/fonts/OFL.txt",
+      "type": "hyperframes:asset"
+    }
+  ]
+}
diff --git a/registry/blocks/weight-wave/weight-wave.html b/registry/blocks/weight-wave/weight-wave.html
new file mode 100644
index 0000000000..8aef4b356f
--- /dev/null
+++ b/registry/blocks/weight-wave/weight-wave.html
@@ -0,0 +1,299 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Weight Wave</title>
+    <style>
+      /*
+        Real variable font, bundled locally — a CDN fetch would be a render-time
+        network dependency, and a STATIC font would silently render every
+        character at one weight (the whole effect vanishes while nothing errors).
+        Subset of Recursive (SIL OFL 1.1) with every axis pinned except the two
+        this block drives. Ranges below are the font's REAL fvar records, read
+        out of the binary: wght 300..1000 (not 100..900) and slnt -15..0. The
+        pinned three are MONO 0 (proportional sans, not the monospace face),
+        CASL 0 (linear/neutral, not casual) and CRSV 0 (roman letterforms —
+        Recursive's 0.5 default swaps in cursive singlestorey forms as soon as
+        slnt goes negative, which would pop mid-wave instead of interpolating).
+      */
+      @font-face {
+        font-family: "Recursive Wave";
+        font-style: normal;
+        font-weight: 300 1000;
+        font-display: block;
+        src: url("assets/fonts/Recursive-wght-slnt-latin.woff2") format("woff2");
+      }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      body {
+        width: 1920px;
+        height: 1080px;
+      }
+
+      #ww-root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+
+      /* Full-bleed fill lives on a CHILD: the producer can drop a background
+         painted on the composition root itself (frame renders black). */
+      #ww-bg {
+        position: absolute;
+        inset: 0;
+        background: var(--background, #0b0b0d);
+      }
+
+      #ww-stage {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      #ww-line {
+        display: block;
+        width: 1760px;
+        text-align: center;
+        white-space: pre;
+        font-family: "Recursive Wave", sans-serif;
+        font-size: 132px;
+        line-height: 1.15;
+        letter-spacing: 0.005em;
+        color: var(--color, #f5f5f7);
+        /* Default instance: the resting end of the wave. If the variable font
+           fails to load, every glyph stays here and the probe below shouts. */
+        font-variation-settings:
+          "wght" 400,
+          "slnt" 0;
+      }
+
+      /* Per-character axis stamping target: no transform, no opacity — the
+         letterforms themselves change. */
+      .ww-ch {
+        display: inline-block;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="ww-root"
+      data-composition-id="weight-wave"
+      data-start="0"
+      data-duration="6"
+      data-width="1920"
+      data-height="1080"
+      data-composition-variables='[
+        {"id":"text","type":"string","label":"Headline","default":"PRESSURE MOVES THROUGH TYPE","maxLength":64},
+        {"id":"color","type":"color","label":"Text color","default":"#f5f5f7"},
+        {"id":"background","type":"color","label":"Background","default":"#0b0b0d"},
+        {"id":"weightFrom","type":"number","label":"Weight (rest)","default":400,"min":300,"max":1000,"step":10},
+        {"id":"weightTo","type":"number","label":"Weight (crest)","default":1000,"min":300,"max":1000,"step":10},
+        {"id":"crestWidth","type":"number","label":"Crest width","default":4,"min":1,"max":24,"step":0.5,"unit":"chars"},
+        {"id":"sweepSpeed","type":"number","label":"Sweep speed","default":0.5,"min":0.05,"max":3,"step":0.05,"unit":"passes/s"},
+        {"id":"slant","type":"number","label":"Slant at crest","default":-12,"min":-15,"max":0,"step":0.5,"unit":"deg"},
+        {"id":"direction","type":"enum","label":"Direction","default":"ltr","options":[{"value":"ltr","label":"Left to right"},{"value":"rtl","label":"Right to left"}]}
+      ]'
+    >
+      <div id="ww-bg"></div>
+
+      <div id="ww-stage" class="clip" data-start="0" data-duration="6" data-track-index="0">
+        <div id="ww-line"></div>
+      </div>
+
+      <script>
+        (function () {
+          window.__timelines = window.__timelines || {};
+
+          var FONT_FAMILY = '"Recursive Wave", sans-serif';
+          /* The bundled font's real fvar bounds — declared once here, and
+             mirrored in the variable min/max above. A slider must not offer a
+             weight the font cannot render. */
+          var WGHT_MIN = 300;
+          var WGHT_MAX = 1000;
+          var SLNT_MIN = -15;
+          var LINE_MAX_WIDTH = 1760;
+          var BASE_FONT_SIZE = 132;
+          var MIN_FONT_SIZE = 40;
+
+          var root = document.getElementById("ww-root");
+          var line = document.getElementById("ww-line");
+          var duration = Number(root.getAttribute("data-duration")) || 6;
+
+          var vars =
+            window.__hyperframes && window.__hyperframes.getVariables
+              ? window.__hyperframes.getVariables()
+              : {};
+
+          function num(value, fallback, min, max) {
+            var n = Number(value);
+            if (!Number.isFinite(n)) n = fallback;
+            return Math.min(max, Math.max(min, n));
+          }
+
+          var TEXT =
+            typeof vars.text === "string" && vars.text.length
+              ? vars.text
+              : "PRESSURE MOVES THROUGH TYPE";
+          var W_FROM = num(vars.weightFrom, 400, WGHT_MIN, WGHT_MAX);
+          var W_TO = num(vars.weightTo, 1000, WGHT_MIN, WGHT_MAX);
+          var CREST = num(vars.crestWidth, 4, 1, 24);
+          var SPEED = num(vars.sweepSpeed, 0.5, 0.05, 3);
+          var SLANT = num(vars.slant, -12, SLNT_MIN, 0);
+          var RTL = vars.direction === "rtl";
+
+          /* ── Build one span per character ─────────────────────────────────
+             Spaces get a span too, so the crest travels at a constant rate in
+             index space and the visual gap between words is honoured. */
+          var chars = Array.prototype.slice.call(TEXT);
+          var spans = chars.map(function (ch) {
+            var el = document.createElement("span");
+            el.className = "ww-ch";
+            el.textContent = ch;
+            line.appendChild(el);
+            return el;
+          });
+          var N = spans.length;
+
+          /* Fit at the HEAVIEST instance so the line never overflows mid-sweep;
+             the crest widens glyphs as it passes. */
+          var fitCanvas = document.createElement("canvas").getContext("2d");
+          var heaviest = Math.max(W_FROM, W_TO);
+          var fontSize = BASE_FONT_SIZE;
+          while (fontSize > MIN_FONT_SIZE) {
+            fitCanvas.font = heaviest + " " + fontSize + "px " + FONT_FAMILY;
+            if (fitCanvas.measureText(TEXT).width <= LINE_MAX_WIDTH) break;
+            fontSize -= 2;
+          }
+          line.style.fontSize = fontSize + "px";
+
+          /* ── The wave ─────────────────────────────────────────────────────
+             Closed form, no accumulators: every frame's state is a pure
+             function of the timeline position p, so a direct seek to frame N
+             and playing through to frame N produce identical pixels.
+
+               crest(p) = -CREST + wrap(p * duration * SPEED) * (N - 1 + 2*CREST)
+               f_i      = clamp(0, 1, 1 - |i - crest| / CREST)
+               wght_i   = round(lerp(W_FROM, W_TO, f_i))
+               slnt_i   = lerp(0, SLANT, f_i)
+
+             Per-character stagger is not a separate mechanism — it falls out of
+             the crest's distance to each index. */
+          var state = { p: 0 };
+          var travel = N - 1 + 2 * CREST;
+
+          function paint() {
+            var pass = state.p * duration * SPEED;
+            var phase = pass - Math.floor(pass); // wraps cleanly: f_i == 0 at both ends
+            var crest = -CREST + phase * travel;
+            if (RTL) crest = N - 1 - crest;
+            for (var i = 0; i < N; i++) {
+              var f = 1 - Math.abs(i - crest) / CREST;
+              if (f < 0) f = 0;
+              else if (f > 1) f = 1;
+              var wght = Math.round(W_FROM + (W_TO - W_FROM) * f);
+              var slnt = SLANT * f;
+              spans[i].style.fontVariationSettings =
+                '"wght" ' + wght + ', "slnt" ' + slnt.toFixed(2);
+            }
+          }
+
+          var tl = gsap.timeline({ paused: true });
+          tl.to(state, { p: 1, duration: duration, ease: "none", onUpdate: paint }, 0);
+          paint();
+          window.__timelines["weight-wave"] = tl;
+
+          /* ── The trap, made loud ──────────────────────────────────────────
+             A static font (or a failed load) renders every character at one
+             weight: the effect is invisible and nothing throws.
+
+             Measuring advance width does NOT detect that here. Recursive is
+             DUPLEXED — "HAMBURGEFONSTIV" measures exactly 925px at wght 300 and
+             at wght 1000, and identically at slnt 0 and -15. (Nice for layout:
+             the headline never reflows as the crest passes. Fatal for a
+             width-delta probe, which reads every weight as identical and cries
+             wolf on a perfectly healthy font.)
+
+             So rasterize and count ink, which cannot be duplexed away, AND ask
+             the font-loading API whether the family is actually there. Both are
+             needed: ink alone gives a false PASS when the family is missing,
+             because the fallback varies its ink with weight too. */
+          function probeAxes() {
+            var family = "Recursive Wave";
+            var loaded = !!(document.fonts && document.fonts.check('100px "' + family + '"'));
+            var c = document.createElement("canvas");
+            c.width = 1000;
+            c.height = 160;
+            var ctx = c.getContext("2d", { willReadFrequently: true });
+            function ink(weight) {
+              ctx.clearRect(0, 0, c.width, c.height);
+              ctx.font = weight + ' 100px "' + family + '"';
+              ctx.fillStyle = "#fff";
+              ctx.fillText("HAMBURGEFONSTIV", 10, 120);
+              var data = ctx.getImageData(0, 0, c.width, c.height).data;
+              var n = 0;
+              for (var i = 3; i < data.length; i += 4) if (data[i] > 8) n++;
+              return n;
+            }
+            var light = ink(WGHT_MIN);
+            var black = ink(WGHT_MAX);
+            // Only wght is probed: it is the axis whose absence is measurable
+            // from JS, and both axes ship in the same file — if wght is live,
+            // the variable font loaded. slnt is verified visually.
+            return {
+              fontLoaded: loaded,
+              wghtLive: black > light * 1.2,
+              inkAtMinWeight: light,
+              inkAtMaxWeight: black,
+            };
+          }
+
+          function publishProbe() {
+            var status = probeAxes();
+            status.ok = status.fontLoaded && status.wghtLive;
+            window.__WW_FONT_STATUS = status;
+            root.setAttribute("data-ww-font", status.ok ? "ok" : "missing-axes");
+            if (!status.ok) {
+              console.error(
+                "weight-wave: the variable font is not usable (loaded=" +
+                  status.fontLoaded +
+                  ", ink at wght " +
+                  WGHT_MIN +
+                  "=" +
+                  status.inkAtMinWeight +
+                  " vs " +
+                  WGHT_MAX +
+                  "=" +
+                  status.inkAtMaxWeight +
+                  "). assets/fonts/Recursive-wght-slnt-latin.woff2 did not load, or was " +
+                  "replaced with a static font — every character will render at one weight.",
+              );
+            }
+          }
+
+          if (document.fonts && document.fonts.ready) {
+            document.fonts.ready.then(publishProbe);
+          } else {
+            publishProbe();
+          }
+        })();
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/catalog-artifact/local-vectors.bin b/registry/catalog-artifact/local-vectors.bin
index 9b04d0ad3f..c9c262e3a4 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 337a453c24..92a097901a 100644
--- a/registry/catalog-artifact/local-vectors.json
+++ b/registry/catalog-artifact/local-vectors.json
@@ -2,14 +2,38 @@
   "model": "bge-small-en-v1.5",
   "modelRevision": "ea104dacec62c0de699686887e3f920caeb4f3e3",
   "dimensions": 384,
-  "revision": "3e0b7c140466db717b69481be5a87e77b1fdec5000b33ca61846ba27e5558238",
+  "revision": "a823e13eb98937e709ea70bbdc5f9e6dc0be1feed6346fb1d8746069fea6796b",
   "names": [
+    "ai-generation-canvas",
+    "ai-prompt-flow",
+    "animated-bar-chart",
     "app-showcase",
     "apple-money-count",
+    "arc-motion-path",
+    "ascii-render-pass",
+    "ascii-trail-reveal",
+    "aurora-drift",
+    "avatar-cloud",
+    "avatar-group-hover",
+    "badge-pop",
+    "bar-chart-race",
+    "beat-accent",
     "beat-freeze-cut",
+    "beat-pulse-background",
+    "beat-timeline",
+    "before-after-wipe",
     "blue-sweater-intro-video",
+    "blur-in",
+    "blur-out-up",
+    "bottom-up-letters",
+    "browser-device-stage",
     "camcorder-hud",
+    "camera-dolly-zoom",
+    "camera-rig-depth-stack",
+    "camera-scan-gate",
+    "camera-shake",
     "caption-blend-difference",
+    "caption-camera-follow",
     "caption-clip-wipe",
     "caption-editorial-emphasis",
     "caption-emoji-pop",
@@ -25,6 +49,11 @@
     "caption-pill-karaoke",
     "caption-texture",
     "caption-weight-shift",
+    "card-resize",
+    "char-slam-explode",
+    "chart-story",
+    "checkout-flow",
+    "chromatic-aberration-wipe",
     "chromatic-radial-split",
     "cinematic-zoom",
     "code-3d-extrude",
@@ -59,19 +88,50 @@
     "code-snippet-solarized-light",
     "code-snippet-visual-studio-dark",
     "code-snippet-visual-studio-light",
+    "code-terminal-run",
     "code-typing",
+    "comparison-split",
+    "confetti",
+    "conic-progress-ring",
+    "constellation-hub",
+    "cosmic-orb",
+    "count-up",
     "cross-warp-morph",
+    "cta-close",
+    "cta-lockup",
+    "cursor-glyph-trail",
+    "cut-the-curve",
     "data-chart",
+    "decline-chart",
+    "device-frame-stage",
+    "directional-wipe",
     "domain-warp-dissolve",
+    "drift-hold",
+    "dynamic-grid",
+    "echo-trail",
     "editorial-flash-overlay",
+    "facet-morph",
+    "fade-through",
     "flash-through-white",
     "flowchart",
     "flowchart-vertical",
+    "focus-blur-resolve",
+    "focus-rack",
+    "focus-swap",
     "freeze-frame-dressing",
+    "gallery-tunnel",
+    "gesture-tap",
     "glitch",
+    "gloss-sweep",
+    "grade-split-reveal",
+    "grain-field",
     "grain-overlay",
     "gravitational-lens",
+    "grid-card-assemble",
     "grid-pixelate-wipe",
+    "halftone-dissolve",
+    "halftone-field",
+    "headline-slam",
     "hw-arrow",
     "hw-boil",
     "hw-box-label",
@@ -83,14 +143,29 @@
     "hw-text-cloud",
     "hw-title",
     "hw-underline",
+    "icon-morph-beat",
+    "icon-swap",
+    "ink-bleed-reveal",
+    "inline-highlight",
+    "input-feedback",
     "instagram-follow",
     "ios26-liquid-glass",
+    "iris-reveal",
+    "keyframe-scrub-stack",
+    "kinetic-type-swap",
     "light-leak",
+    "light-sweep-pass",
+    "line-by-line-slide",
+    "line-swap",
     "liquid-glass-context-menu",
     "liquid-glass-media-controls",
     "liquid-glass-notification",
     "liquid-glass-widgets",
+    "locked-nucleus-orbit",
+    "logo-brand-close",
     "logo-outro",
+    "logo-sting",
+    "logo-wall",
     "lower-third-bild",
     "lt-accent-underline",
     "lt-bold-block",
@@ -99,11 +174,18 @@
     "lt-dark-card",
     "lt-kicker-name",
     "lt-mask-reveal",
+    "lt-neon-border",
     "lt-side-rule",
     "lt-soft-pill",
     "lt-stack-bars",
     "macos-notification",
     "macos-tahoe-liquid-glass",
+    "marker-highlight",
+    "match-cut",
+    "matrix-decode",
+    "menu-morph",
+    "mesh-gradient-bg",
+    "micro-transitions",
     "mk-background",
     "mk-callout-highlight",
     "mk-clone-wall-transition",
@@ -113,25 +195,116 @@
     "mk-progress-stat",
     "mk-specs-list",
     "mk-usage-arc",
+    "modal-morph",
+    "morph-swap",
     "morph-text",
     "motion-blur",
+    "multi-device-splay",
+    "multiplayer-cursors",
+    "native-notification-pop",
     "news-ticker",
     "north-korea-locked-down",
+    "notification-pileup",
+    "notification-stack",
+    "number-pop-in",
+    "number-wheel",
     "nyc-paris-flight",
+    "offset-path-traveler",
+    "onboarding-stepper-flow",
+    "ordered-dither-pass",
     "organic-light-leak-overlay",
+    "oscilloscope-trace",
+    "outline-draw",
+    "oversized-cursor",
+    "overwhelm-surround",
+    "page-slide",
+    "pan-stations",
+    "panel-reveal",
+    "parallax-device-dive",
     "parallax-unzoom",
     "parallax-zoom",
+    "particle-image-reveal",
+    "particle-text-dissolve",
+    "per-word-crossfade",
+    "per-word-rise",
+    "perspective-marquee",
+    "physical-exit",
+    "press-ripple",
+    "pull-back-reveal",
+    "pull-to-refresh",
+    "push-in",
+    "rack-focus",
+    "radial-surround",
     "reddit-post",
+    "rgb-glitch-text",
     "ridged-burn",
     "ripple-waves",
+    "rubber-band-bumper",
+    "scan-band",
+    "scramble-reveal",
+    "screen-flow-carousel",
+    "scroll-camera-story",
+    "scroll-feed",
     "sdf-iris",
+    "segmentation-flood",
+    "separator",
+    "settings-toggle-flow",
+    "shared-axis-y",
+    "shared-axis-z",
     "shimmer-sweep",
+    "signup-flow",
+    "simulated-cursor",
+    "skeleton-reveal",
+    "slit-scan-reveal",
+    "slot-machine-roll",
+    "soft-blob-touch",
+    "soft-blur-in",
     "spain-map",
+    "spiral-galaxy",
+    "split-flap-board",
+    "split-tilt-cards",
     "spotify-card",
+    "spotlight-card",
+    "spring-pop",
+    "spring-stack-shuffle",
+    "stagger-cascade",
+    "stagger-lattice",
+    "staggered-fade-up",
+    "star-rating-fill",
+    "state-chip-rail",
+    "sticky-mock-swap",
+    "stitched-text-draw",
+    "stop-motion-cadence",
+    "store-badge-lockup",
+    "strikethrough-replace",
+    "success-check",
+    "svg-line-draw-loader",
+    "svg-mask-reveal",
+    "svg-stroke-trace",
+    "swipe-rail",
     "swirl-vortex",
+    "tabs-slide-indicator",
+    "telemetry-hud",
+    "terminal-simulator",
+    "testimonial-card",
+    "testimonial-proof-card",
+    "text-shimmer",
+    "text-stagger",
+    "text-state-swap",
     "texture-mask-text",
     "thermal-distortion",
+    "thread-message-stack",
+    "three-orbiting-cards",
+    "ticker-takeover",
     "tiktok-follow",
+    "tilt-card",
+    "titlecard-calm",
+    "titlecard-lockup",
+    "toggle-flip",
+    "top-down-letters",
+    "touch-indicator",
+    "tracing-beam",
+    "tracking-in",
     "transitions-3d",
     "transitions-blur",
     "transitions-cover",
@@ -145,11 +318,21 @@
     "transitions-push",
     "transitions-radial",
     "transitions-scale",
+    "trust-strip",
+    "type-match-cut",
+    "typed-prompt",
+    "typewriter",
     "ui-3d-reveal",
+    "ui-focus-zoom",
     "us-map",
     "us-map-bubble",
     "us-map-flow",
     "us-map-hex",
+    "variable-axis-type",
+    "variable-font-flex",
+    "vector-editor-rig",
+    "velocity-throw-snap",
+    "vfx-anamorphic-flare",
     "vfx-iphone-device",
     "vfx-liquid-background",
     "vfx-liquid-glass",
@@ -158,9 +341,15 @@
     "vfx-shatter",
     "vfx-text-cursor",
     "vignette",
+    "vox-annotate",
     "vpn-youtube-spot",
+    "weight-wave",
     "whip-pan",
+    "whip-pan-cut",
+    "whiteboard-ink",
+    "wordmark-tiles",
     "world-map",
+    "x-follow-card",
     "x-post",
     "yt-camera-move",
     "yt-circle-pointer",
@@ -171,6 +360,7 @@
     "yt-lower-third",
     "yt-prism-title",
     "yt-screen-warp",
-    "yt-vertical-fill"
+    "yt-vertical-fill",
+    "zoom-through-transition"
   ]
 }
diff --git a/registry/components/CATALOG.md b/registry/components/CATALOG.md
new file mode 100644
index 0000000000..88d048eec0
--- /dev/null
+++ b/registry/components/CATALOG.md
@@ -0,0 +1,243 @@
+# Hero primitive catalog (the shelf of 21)
+
+How to use this file, frame worker:
+
+1. Check this shelf FIRST. When a Scene's mechanic matches a primitive's use_when, mount that primitive; do not rebuild it.
+2. Mount via `data-composition-src` on a `class="clip"` div pointing at the installed component HTML, with `data-start`, `data-duration`, `data-track-index`.
+3. Pass variables as JSON in `data-variable-values` on the clip. Every variable has a default; pass only what you change.
+4. Slots: units that show media or custom content expose named `data-slot` elements (filled in your installed copy) or host-page `<template data-slot="...">` elements (browser-device-stage). Each unit's README documents its exact slot mechanism.
+5. The accent enum is shared: `green` rides `--brand`, `blue` rides `--accent`, `violet` rides `--accent-2`. Theme tokens do the coloring; never hardcode brand colors into a mount. Accent marks ONE element per composition and never a placeholder: stand-in screens, cards, avatars and chart series are monochrome, built from alpha steps of the ink. See `skills/hyperframes-registry/references/placeholder-material.md`.
+6. `exit` defaults to `none` everywhere: primitives hold their final frame and the frame root owns transitions. Opt into `fade` or `up` only when the frame itself must depart.
+7. `cues` (where present) is comma-separated seconds from mount start for each beat of the unit's sequence; empty keeps the authored rhythm. Use it to lock reveals to narration.
+8. All units are elastic: no fixed dimensions, they fill the host clip's box. Extra duration becomes HOLD, never a time-stretched animation.
+9. Compose bespoke HTML only when nothing on this shelf serves the mechanic. Bespoke work follows the same mount contract.
+10. `avoid_when` lines are real misuse patterns seen in QA; treat them as hard steers, not suggestions.
+
+## Text effects
+
+### per-word-rise
+
+group: Text effects.
+what: Words or characters rise into place in a controlled blur-to-sharp cascade, drift gently, and hold until the cut.
+use_when: A headline or key line should land word by word in sync with narration beats.
+avoid_when: The line must swap or replace text mid-scene; this unit only reveals one static line.
+pairs_with: kinetic-type-swap, count-up, cta-close.
+variables: text (string, default "WORDS IN MOTION"): the displayed line. split (enum word or char, default word): the unit that rises. cues (string, default empty): comma seconds for each unit's landing. accent (enum green, blue, violet, default green): text color. exit (enum none, fade, up, default none).
+
+### scramble-reveal
+
+group: Text effects.
+what: A deterministic hacker-style reveal that cycles fixed glyph rows and locks the target string left to right.
+use_when: A product name, feature name, or technical claim should resolve with a terminal or engineering flavor.
+avoid_when: The brand voice is calm or premium; the glyph churn reads noisy against quiet scenes (use titlecard-lockup or per-word-rise).
+pairs_with: titlecard-lockup, cut-the-curve.
+variables: text (string, default "HYPERFRAMES"): target string. style (enum terminal or clean, default terminal): framed terminal or bare text. accent (enum green, blue, violet, default green): text, prefix, and frame color. exit (enum none, fade, up, default none).
+
+### kinetic-type-swap
+
+group: Text effects.
+what: A held sentence keeps its fixed prefix and suffix while one masked word slot rolls through alternatives and settles on the final option.
+use_when: One sentence must carry multiple value words ("Ship faster, smarter, together") without reflowing the line.
+avoid_when: The alternatives differ wildly in length or you need more than a handful of swaps; the slot pre-sizes to the widest option and long lists drag.
+pairs_with: per-word-rise, browser-device-stage, cta-close.
+variables: prefix (string, default "Ship"): fixed text before the slot. options (string, default "faster,smarter,together"): comma words shown in order; the last is final. suffix (string, default empty): fixed text after the slot. cues (string, default empty): comma seconds per swap. accent (enum green, blue, violet, default green): slot color. exit (enum none, fade, up, default none).
+
+### oversized-cursor
+
+group: Product demo.
+what: A deliberately oversized macOS-style pointer enters off-screen, glides to a target, clicks to visibly ignite it, then accelerates back off-screen.
+use_when: The scene needs a personified "someone clicks the thing and it works" beat with theatrical scale.
+avoid_when: The click target is your own slotted UI or the pressed state must persist; use press-ripple, which presses a slot and holds it.
+pairs_with: browser-device-stage, cut-the-curve.
+variables: cursor_variant (enum light or dark, default light): pointer body tone. target_x (number percent, default 55) and target_y (number percent, default 55): tip landing point. click_label (string, default "Generate"): label on the clicked pill. exit (enum none, fade, up, default none): fade and up also depart the ignited target.
+
+### press-ripple
+
+group: Product demo.
+what: A cursor decel-arrives from off-stage, lands slightly off-center on a caller-positioned target, compresses with it in lockstep, releases with ink ripple rings, and holds the pressed state.
+use_when: The payoff beat: the user presses the button and the film rests on that satisfied pressed state.
+avoid_when: The cursor itself is the star or must leave after the click; use oversized-cursor for the enter-click-exit arc.
+pairs_with: browser-device-stage, cta-close.
+variables: label (string, default "Get started"): text in the default pill; ignored when the target slot is replaced. target_x (number percent, default 50) and target_y (number percent, default 50): zone center. press_at (number seconds, default 1.4): press cue. cursor (enum light or dark, default light): pointer tone. accent (enum green, blue, violet, default green): ripple ink and pressed fill. exit (enum none, fade, up, default none).
+
+### browser-device-stage
+
+group: Product demo.
+what: A generic app surface in token-native chrome (browser, window, or phone); the screen area is a slot with a skeleton default, one settle entrance, a readable hold, and an optional screen swap.
+use_when: A real screenshot or product UI needs a credible stage: this is the default way to show "the product" in a launch film.
+avoid_when: The content is seek-synced footage; slotted video is not framework-synced, so use a media clip composition instead.
+pairs_with: oversized-cursor, before-after-wipe.
+variables: chrome (enum browser, window, phone, default browser): device frame. title (string, default "app.example.com"): address pill or title bar text. swap_at (number seconds, default 0): crossfade to the second screen slot; 0 disables. accent (enum green, blue, violet, default green): skeleton accent. exit (enum none, fade, up, default none). Slots: host-page templates data-slot="browser-device-stage-screen" and "browser-device-stage-screen-b".
+
+## Proof and stats
+
+### count-up
+
+group: Proof and stats.
+what: A token-native stat counter that eases from start to end, lands on the exact final integer with one restrained scale pulse, and holds.
+use_when: One number is the proof: users, revenue, speedup, and it should land exactly as narration states it.
+avoid_when: The stat needs context or comparison; a lone number without a chart or label reads hollow, reach for chart-story.
+pairs_with: chart-story, count-up.
+variables: start (number, default 0) and end (number, default 100): count range; always lands exactly on end. prefix (string, default empty) and suffix (string, default "%"): fixed text around the value. accent (enum green, blue, violet, default green): count color. glow (boolean, default false): opt-in soft accent glow. exit (enum none, fade, up, default none).
+
+### chart-story
+
+group: Proof and stats.
+what: One chart builds from data in reading order and lands the exact supplied values: staggered bars, a left-to-right line with area fill, a sweeping donut, or filling progress bars, with an accent callout on the emphasized datum.
+use_when: The proof is a trend or comparison across several values and one datum should carry the story.
+avoid_when: There is only one number to show (use count-up) or the data needs live interactivity; this is an authored build, not a chart widget.
+pairs_with: count-up, chart-story, scroll-feed.
+variables: type (enum bars, line, donut, progress, default bars): chart form. data (string, default "12, 28, 45, 64"): comma numbers, landed exactly. labels (string, default "Q1, Q2, Q3, Q4"): comma labels per datum. emphasize (number index, default 3): accented datum with the callout. unit (string, default "%"): value suffix. accent (enum green, blue, violet, default green). exit (enum none, fade, up, default none).
+
+### titlecard-lockup
+
+group: Intros and reveals.
+what: The calm breather titlecard: an optional mono kicker fades up, the wordmark settles dead-center with one restrained move, a hairline rule draws left to right, a mono label fades beneath, then a truly still hold.
+use_when: The film needs a breath: the opening card, a chapter break, or a name reveal where low motion IS the statement.
+avoid_when: The scene needs energy or a second development phase; this unit refuses spring chains by design (use per-word-rise or scramble-reveal).
+pairs_with: scramble-reveal, logo-brand-close, titlecard-lockup.
+variables: wordmark (string, default "HYPERFRAMES"): the centered display line. label (string, default "WRITE HTML. RENDER VIDEO."): mono caption under the rule; empty hides. kicker (string, default "INTRODUCING"): small mono label above; empty hides. rule (enum show or hide, default show): the hairline rule and its draw. accent (enum green, blue, violet, default green): carried by the rule. exit (enum none, fade, up, default none).
+
+### svg-stroke-trace
+
+group: Intros and reveals.
+what: An authored SVG path draws from its measured length, holds with subtle drift, and fills after the stroke when the path is closed with Z.
+use_when: A custom mark, signature, underline flourish, or simple line drawing should draw itself on screen.
+avoid_when: The artwork is multi-stroke or needs a visible pen; use whiteboard-ink, which sequences strokes with a nib actor.
+pairs_with: whiteboard-ink, titlecard-lockup.
+variables: path (string, default a wave path): SVG path data in a 1024x520 viewBox; trailing Z enables fill. stroke_width (number, default 12): stroke width in viewBox units. accent (enum green, blue, violet, default green): trace and fill color. exit (enum none, fade, up, default none).
+
+### whiteboard-ink
+
+group: Intros and reveals.
+what: A whiteboard sketch draws one measured stroke at a time while a pen nib rides the active ink front; preset sketches (bulb, flow, rocket) or your own multi-stroke paths via the strokes slot.
+use_when: An idea, flow, or concept should feel hand-drawn and explanatory, sketched live as narration describes it.
+avoid_when: The mark is a single path or a logo trace; svg-stroke-trace is the lighter tool for one stroke.
+pairs_with: svg-stroke-trace, per-word-rise, grid-card-assemble.
+variables: sketch (enum bulb, flow, rocket, default bulb): preset; ignored when the strokes slot holds paths. caption (string, default "Draw the idea"): line shown after the sketch completes; empty hides. pen (enum show or hide, default show): the nib actor. accent (enum green, blue, violet, default green): strokes marked data-ink="accent". exit (enum none, fade, up, default none). Slot: fill the data-slot="strokes" SVG group with your own path elements in the installed copy.
+
+## Call to action
+
+### cta-close
+
+group: Call to action.
+what: The action-only close: one oversized action line rises into frame, one CTA capsule pops beneath it, and the lockup holds completely still.
+use_when: The film ends on an ask: sign up, start now, try it; the last thing on screen is the action.
+avoid_when: The film should end on who made it rather than what to do; use logo-brand-close for the identity ending.
+pairs_with: logo-brand-close, press-ripple, count-up.
+variables: action_line (string, default "Make it happen"): two to four word closing action. button_label (string, default "Start now"): capsule text. accent (enum green, blue, violet, default green): capsule color. exit (enum none, fade, up, default none): closes films, so keep none.
+
+### logo-brand-close
+
+group: Call to action.
+what: Wordmark letters cascade left to right into a centered lockup, an optional tagline and mono URL line settle beneath, then a dead-still identity hold ends the film.
+use_when: The final frame is the brand: name, tagline, URL, held to the last frame.
+avoid_when: The ending should push a button-press or signup; that is cta-close, which is action, not identity.
+pairs_with: cta-close, titlecard-lockup, count-up.
+variables: wordmark (string, default "HYPERFRAMES"): letters cascade individually; a brand period is appended in accent. tagline (string, default "Write HTML. Render video."): settles beneath; empty hides. url (string, default "hyperframes.heygen.com"): mono line below; empty hides. accent (enum green, blue, violet, default green): colors the brand period. exit (enum none, fade, up, default none): a film ender, keep none.
+
+## Feature tour
+
+### grid-card-assemble
+
+group: Feature tour.
+what: N labeled token cards stagger-assemble into a grid or vertical list with a fade plus short slide directly into slot, no overshoot, then hold perfectly still.
+use_when: Several features, steps, or capabilities should land as one composed inventory the viewer can scan.
+avoid_when: The features relate to one central thing and the relationship matters; constellation-hub draws that structure.
+pairs_with: browser-device-stage, cta-close.
+variables: items (string, default "Capture,Compose,Render,Publish"): comma tile labels, 3 to 12. layout (enum grid or list, default grid). columns (number 0 to 4, default 0): 0 auto-picks. cues (string, default empty): per-item entrance times. accent (enum green, blue, violet, default green): tile dot color. exit (enum none, fade, up, default none). Slot: author children inside data-slot="items" to replace generated tiles.
+
+### before-after-wipe
+
+group: Before / after.
+what: Two full-bleed content slots compare before and after states as a persistent divider wipes the after layer over the before layer and rests at a configurable split.
+use_when: The improvement is visual: old UI versus new, raw versus polished, and one wipe tells it.
+avoid_when: The two states are sequential rather than comparative; a straight scene cut or cut-the-curve reads better than a held split.
+pairs_with: browser-device-stage, chart-story.
+variables: label_a (string, default "Before") and label_b (string, default "After"): side chips; blank hides. rest_split (number percent, default 50): divider resting position. wipe_at (number seconds, default 0.25): wipe start. accent (enum green, blue, violet, default green): divider handle and after chip. exit (enum none, fade, up, default none). Slots: replace the children of data-slot="before" and data-slot="after" in the installed copy; both panels share one coordinate space.
+
+## Transitions
+
+### cut-the-curve
+
+group: Transitions.
+what: A velocity-matched directional hard cut: the outgoing subject accelerates, swaps identity at peak velocity, and the incoming subject continues in the same direction and decelerates to rest.
+use_when: Two scenes or subjects should hand off with kinetic energy instead of a dissolve; the seam hides inside the speed.
+avoid_when: The moment calls for calm; a hard velocity cut in a quiet passage reads like a glitch. Also never as a hold, it has no elastic phase, retime via mount duration only.
+pairs_with: oversized-cursor, scroll-feed, browser-device-stage.
+variables: subject (enum cursor, card, scene, default cursor): payload on both sides. direction (enum left, right, up, down, default left): shared travel vector. cutFraction (number 0 to 1, default 0.33): normalized swap point. blurPx (number, default 12): seam blur. exit (enum none, fade, up, default none): departs the incoming subject after it lands.
+
+## Problem setup
+
+### scroll-feed
+
+group: Problem setup.
+what: A loop-friendly column of varied skeleton post cards scrolls upward with subtle motion trails at an agitated pace.
+use_when: Establishing the pain: noise, doom-scrolling, endless feeds, the "before" world your product fixes.
+avoid_when: The content of the cards matters; these are anonymous skeletons, so real posts or testimonials need a bespoke scene.
+pairs_with: cut-the-curve, before-after-wipe, count-up.
+variables: speed (enum doom or frantic, default doom): scroll pace. card_count (number 4 to 10, default 6): cards per cycle. cues (string, default empty): each cue advances the feed one card, a stepped rhythm; empty keeps the continuous loop-compatible scroll. exit (enum none, fade, up, default none): the loop guarantee only holds with empty cues and exit none.
+
+### scroll-camera-story
+
+group: Camera moves. A compressed forced-scroll cinematic pass: four depth layers move at different rates while section cards rise as the camera reaches them, decelerating into a held final section.
+use_when: a multi-section story should feel like one continuous cinematic travel.
+avoid_when: only one subject exists; ui-focus-zoom frames a single surface better.
+pairs_with: titlecard-lockup, cta-close, whip-pan-cut.
+variables: sections (2-4), travel (cqh), cues, accent, exit.
+
+### iris-reveal
+
+group: Transitions. A circle opens from an authored origin revealing full-color state B over a grayscaled state A; an accent rim rides the clip edge.
+use_when: a before-to-after or reveal beat should land as one confident punch from a point.
+avoid_when: both states must stay inspectable side by side; that is before-after-wipe.
+pairs_with: before-after-wipe, browser-device-stage, logo-brand-close.
+variables: iris_x, iris_y, open_at, register (color or plain), accent, exit.
+
+### particle-image-reveal
+
+group: Intros and reveals. A seeded deterministic particle field converges to materialize a slotted image, the trail thinning to zero as it completes.
+use_when: a logo or key visual deserves a crafted materialize moment.
+avoid_when: the register is strictly sober enterprise; titlecard-lockup is the quiet reveal.
+pairs_with: logo-brand-close, titlecard-lockup, beat-pulse-background.
+variables: density (low med high), direction (ltr center), accent, exit.
+
+### telemetry-hud
+
+group: Product demo. Quiet mono debug-HUD readouts frame a slotted subject: corner brackets draw on, values tick on cues, one readout emphasized.
+use_when: a technical product should feel instrumented and precise around its hero shot.
+avoid_when: the audience is non-technical; the HUD reads as noise.
+pairs_with: browser-device-stage, typed prompt beats via code-terminal-run, count-up.
+variables: readouts (label:value list), emphasize, cues, accent, exit.
+
+### native-notification-pop
+
+group: Product demo. One system-faithful iOS or macOS notification banner drops over any scene with an accurate interruptible spring and backdrop blur.
+use_when: the payoff is "it notifies you" or a moment should feel native to the OS.
+avoid_when: several notifications tell the story; that is notification-stack.
+pairs_with: browser-device-stage, press-ripple, scroll-camera-story.
+variables: title, body, app_label, os (ios macos), at, accent, exit.
+
+### whip-pan-cut
+
+group: Transitions. A velocity-matched whip pan with directional motion blur and a speed-ramp profile carries scene A off as scene B lands; cut-the-curve's louder sibling.
+use_when: a rapid-fire montage needs energy between beats.
+avoid_when: the film's register is quiet enterprise; use cut-the-curve.
+pairs_with: cut-the-curve, scroll-feed, spring-stack-shuffle.
+variables: direction, whip_at, accent, exit.
+
+### spring-stack-shuffle
+
+group: Product demo. A stack of slotted cards reshuffles with real mass on cues; a mid-flight redirect preserves velocity (the interruptible-spring law).
+use_when: browsing or cycling through screens, results, or options should feel physical.
+avoid_when: items should assemble once and rest; that is grid-card-assemble.
+pairs_with: screen-flow-carousel, browser-device-stage, whip-pan-cut.
+variables: cards (3-5), cues, accent, exit.
+
+### vox-annotate
+
+group: Text effects. A keyword inside a held sentence gets a hand-drawn marker while a thin connector draws to a mono callout label, one annotate gesture on the cue.
+use_when: a phrase needs an editorial aside or explanation, documentary style.
+avoid_when: plain emphasis with no callout is enough; keep the sentence clean instead.
+pairs_with: per-word-rise, line-swap, titlecard-lockup.
+variables: text, keyword, note, style (highlight circle underline scribble), draw_at, accent, exit.
diff --git a/registry/components/ai-generation-canvas/ai-generation-canvas.html b/registry/components/ai-generation-canvas/ai-generation-canvas.html
new file mode 100644
index 0000000000..6ae7ce64ad
--- /dev/null
+++ b/registry/components/ai-generation-canvas/ai-generation-canvas.html
@@ -0,0 +1,94 @@
+<!--
+  AI Generation Canvas - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-ai-generation-canvas">
+  <div class="panel prompt">
+    <h3>AI Generation Canvas</h3>
+    <p>A prompt composer expands into a generated dashboard preview.</p>
+    <div class="pill">Generate scene</div>
+    <div class="pill">Refine motion</div>
+    <div class="pill">Export</div>
+  </div>
+  <div class="panel preview">
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+  </div>
+</div>
+
+<style>
+  .hf-remocn-ai-generation-canvas {
+    --hf-accent: var(--accent, #18181b);
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-ai-generation-canvas {
+    width: 820px;
+    min-height: 460px;
+    border-radius: 34px;
+    padding: 28px;
+    background: linear-gradient(135deg, #fafafa, #e4e4e7);
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);
+    display: grid;
+    grid-template-columns: 280px 1fr;
+    gap: 22px;
+    overflow: hidden;
+  }
+  .hf-remocn-ai-generation-canvas .panel {
+    border: 1px solid rgba(15, 23, 42, 0.08);
+    border-radius: 24px;
+    background: rgba(255, 255, 255, 0.76);
+    padding: 22px;
+    backdrop-filter: blur(12px);
+  }
+  .hf-remocn-ai-generation-canvas .prompt {
+    display: grid;
+    gap: 12px;
+    align-content: start;
+  }
+  .hf-remocn-ai-generation-canvas .pill {
+    height: 42px;
+    border-radius: 999px;
+    background: #111827;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    padding: 0 18px;
+    font-weight: 800;
+    transform: translateX(var(--hf-pill-x, 0px));
+  }
+  .hf-remocn-ai-generation-canvas .preview {
+    display: grid;
+    gap: 14px;
+  }
+  .hf-remocn-ai-generation-canvas .card {
+    min-height: 78px;
+    border-radius: 18px;
+    background: #fff;
+    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
+    transform: translate(var(--hf-card-x, 0px), var(--hf-card-y, 0px))
+      scale(var(--hf-card-scale, 1));
+    opacity: var(--hf-card-opacity, 1);
+  }
+  .hf-remocn-ai-generation-canvas h3 {
+    margin: 0 0 14px;
+    font-size: 32px;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-ai-generation-canvas p {
+    margin: 0;
+    color: #475569;
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-ai-generation-canvas .pill', { '--hf-pill-x': '-18px', opacity: 0 }, { '--hf-pill-x': '0px', opacity: 1, duration: 0.25, stagger: 0.08, ease: 'power2.out' }, startTime); tl.fromTo('.hf-remocn-ai-generation-canvas .card', { '--hf-card-y': '28px', '--hf-card-scale': 0.96, '--hf-card-opacity': 0 }, { '--hf-card-y': '0px', '--hf-card-scale': 1, '--hf-card-opacity': 1, duration: 0.42, stagger: 0.12, ease: 'power3.out' }, startTime + 0.2);
+-->
diff --git a/registry/components/ai-generation-canvas/demo.html b/registry/components/ai-generation-canvas/demo.html
new file mode 100644
index 0000000000..c10f732343
--- /dev/null
+++ b/registry/components/ai-generation-canvas/demo.html
@@ -0,0 +1,192 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>AI Generation Canvas - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+        /* ponytail: scale on wrapper (not GSAP target) to fill ~65% of 1920×1080 */
+        transform: scale(1.52);
+      }
+      .hf-remocn-ai-generation-canvas {
+        --hf-accent: var(--accent, #18181b);
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-ai-generation-canvas {
+        width: 820px;
+        min-height: 460px;
+        border-radius: 34px;
+        padding: 28px;
+        background: linear-gradient(135deg, #fafafa, #e4e4e7);
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);
+        display: grid;
+        grid-template-columns: 280px 1fr;
+        gap: 22px;
+        overflow: hidden;
+      }
+      .hf-remocn-ai-generation-canvas .panel {
+        border: 1px solid rgba(15, 23, 42, 0.08);
+        border-radius: 24px;
+        background: rgba(255, 255, 255, 0.76);
+        padding: 22px;
+        backdrop-filter: blur(12px);
+      }
+      .hf-remocn-ai-generation-canvas .prompt {
+        display: grid;
+        gap: 12px;
+        align-content: start;
+      }
+      .hf-remocn-ai-generation-canvas .pill {
+        height: 42px;
+        border-radius: 999px;
+        background: #111827;
+        color: #fff;
+        display: flex;
+        align-items: center;
+        padding: 0 18px;
+        font-weight: 800;
+        transform: translateX(var(--hf-pill-x, 0px));
+      }
+      .hf-remocn-ai-generation-canvas .preview {
+        display: grid;
+        gap: 14px;
+      }
+      .hf-remocn-ai-generation-canvas .card {
+        min-height: 78px;
+        border-radius: 18px;
+        background: #fff;
+        box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
+        transform: translate(var(--hf-card-x, 0px), var(--hf-card-y, 0px))
+          scale(var(--hf-card-scale, 1));
+        opacity: var(--hf-card-opacity, 1);
+        padding: 16px 18px;
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+      }
+      /* skeleton bars that make the dashboard cards readable as a thumbnail */
+      .hf-remocn-ai-generation-canvas .card-label {
+        height: 10px;
+        border-radius: 6px;
+        background: #e4e4e7;
+        width: 55%;
+      }
+      .hf-remocn-ai-generation-canvas .card-bar {
+        height: 8px;
+        border-radius: 6px;
+        background: #f4f4f5;
+        width: 85%;
+      }
+      .hf-remocn-ai-generation-canvas .card-bar.short {
+        width: 60%;
+      }
+      .hf-remocn-ai-generation-canvas .card-accent {
+        height: 28px;
+        border-radius: 8px;
+        background: #d4d4d8;
+        width: 100%;
+        margin-top: 2px;
+      }
+      .hf-remocn-ai-generation-canvas h3 {
+        margin: 0 0 14px;
+        font-size: 32px;
+        letter-spacing: -0.04em;
+      }
+      .hf-remocn-ai-generation-canvas p {
+        margin: 0;
+        color: #71717a;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="ai-generation-canvas-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-ai-generation-canvas">
+          <div class="panel prompt">
+            <h3>AI Generation Canvas</h3>
+            <p>A prompt composer expands into a generated dashboard preview.</p>
+            <div class="pill">Generate scene</div>
+            <div class="pill">Refine motion</div>
+            <div class="pill">Export</div>
+          </div>
+          <div class="panel preview">
+            <div class="card">
+              <div class="card-label"></div>
+              <div class="card-accent"></div>
+            </div>
+            <div class="card">
+              <div class="card-label"></div>
+              <div class="card-bar"></div>
+              <div class="card-bar short"></div>
+            </div>
+            <div class="card">
+              <div class="card-label"></div>
+              <div class="card-bar"></div>
+              <div class="card-bar short"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-ai-generation-canvas .pill",
+          { "--hf-pill-x": "-18px", opacity: 0 },
+          { "--hf-pill-x": "0px", opacity: 1, duration: 0.25, stagger: 0.08, ease: "power2.out" },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-ai-generation-canvas .card",
+          { "--hf-card-y": "28px", "--hf-card-scale": 0.96, "--hf-card-opacity": 0 },
+          {
+            "--hf-card-y": "0px",
+            "--hf-card-scale": 1,
+            "--hf-card-opacity": 1,
+            duration: 0.42,
+            stagger: 0.12,
+            ease: "power3.out",
+          },
+          startTime + 0.2,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["ai-generation-canvas-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/ai-generation-canvas/registry-item.json b/registry/components/ai-generation-canvas/registry-item.json
new file mode 100644
index 0000000000..bf7717de64
--- /dev/null
+++ b/registry/components/ai-generation-canvas/registry-item.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "ai-generation-canvas",
+  "type": "hyperframes:component",
+  "title": "AI Generation Canvas",
+  "description": "A prompt composer expands into a generated dashboard preview.",
+  "tags": ["showcase", "remocn-port", "ai"],
+  "files": [
+    {
+      "path": "ai-generation-canvas.html",
+      "target": "compositions/components/ai-generation-canvas.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/ai-generation-canvas.png"
+  }
+}
diff --git a/registry/components/ai-prompt-flow/ai-prompt-flow.html b/registry/components/ai-prompt-flow/ai-prompt-flow.html
new file mode 100644
index 0000000000..fca8f75ef0
--- /dev/null
+++ b/registry/components/ai-prompt-flow/ai-prompt-flow.html
@@ -0,0 +1,103 @@
+<!--
+  AI Prompt Flow - Remocn-inspired composed UI flow for HyperFrames.
+
+  Paste the markup and CSS into a composition. Use the timeline integration
+  note at the bottom as the starting point for deterministic GSAP animation.
+-->
+
+<div class="hf-ui-ai-prompt-flow">
+  <div class="hf-ui-ai-prompt-panel">
+    <span class="hf-ui-ai-prompt-label">Prompt</span>
+    <div class="hf-ui-ai-prompt-field">Create a launch video for our new feature</div>
+    <div class="hf-ui-ai-prompt-chips">
+      <span>fast cuts</span><span>captions</span><span>product UI</span>
+    </div>
+    <button type="button">Generate</button>
+  </div>
+  <div class="hf-ui-ai-prompt-result">
+    <strong>Preview ready</strong><span>18 scenes matched</span>
+  </div>
+</div>
+
+<style>
+  .hf-ui-ai-prompt-flow {
+    display: grid;
+    gap: 18px;
+    width: 620px;
+    color: #18181b;
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-ui-ai-prompt-panel,
+  .hf-ui-ai-prompt-result {
+    border: 1px solid #e4e4e7;
+    border-radius: 26px;
+    background: #ffffff;
+    box-shadow: 0 26px 80px rgba(0, 0, 0, 0.1);
+  }
+  .hf-ui-ai-prompt-panel {
+    display: grid;
+    gap: 16px;
+    padding: 28px;
+  }
+  .hf-ui-ai-prompt-label {
+    color: #71717a;
+    font-size: 13px;
+    font-weight: 900;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+  }
+  .hf-ui-ai-prompt-field {
+    min-height: 92px;
+    padding: 18px;
+    border-radius: 18px;
+    background: #f4f4f5;
+    font-size: 22px;
+    font-weight: 760;
+    line-height: 1.25;
+  }
+  .hf-ui-ai-prompt-chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+  .hf-ui-ai-prompt-chips span {
+    padding: 8px 11px;
+    border-radius: 999px;
+    background: #eef2ff;
+    color: #4338ca;
+    font-size: 13px;
+    font-weight: 850;
+  }
+  .hf-ui-ai-prompt-panel button {
+    justify-self: start;
+    height: 46px;
+    padding: 0 20px;
+    border: 0;
+    border-radius: 13px;
+    background: #18181b;
+    color: #ffffff;
+    font-weight: 900;
+  }
+  .hf-ui-ai-prompt-result {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 18px 22px;
+  }
+  .hf-ui-ai-prompt-result strong {
+    font-size: 18px;
+  }
+  .hf-ui-ai-prompt-result span {
+    color: #16a34a;
+    font-size: 14px;
+    font-weight: 850;
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-ui-ai-prompt-panel', { opacity: 0, y: 26 }, { opacity: 1, y: 0, duration: 0.38, ease: 'power2.out' }, 0.25);
+  tl.fromTo('.hf-ui-ai-prompt-chips span', { y: 14, opacity: 0 }, { y: 0, opacity: 1, duration: 0.24, stagger: 0.06, ease: 'power2.out' }, 0.62);
+  tl.to('.hf-ui-ai-prompt-panel button', { scale: 0.96, duration: 0.12, yoyo: true, repeat: 1, ease: 'power1.inOut' }, 1.0);
+  tl.fromTo('.hf-ui-ai-prompt-result', { opacity: 0, y: 22, scale: 0.97 }, { opacity: 1, y: 0, scale: 1, duration: 0.36, ease: 'back.out(1.3)' }, 1.24);
+-->
diff --git a/registry/components/ai-prompt-flow/demo.html b/registry/components/ai-prompt-flow/demo.html
new file mode 100644
index 0000000000..19449e82ea
--- /dev/null
+++ b/registry/components/ai-prompt-flow/demo.html
@@ -0,0 +1,168 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>AI Prompt Flow - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f4f4f5;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        min-width: 760px;
+        min-height: 520px;
+        padding: 56px;
+        /* ponytail: scale-up only; demo-frame is not a GSAP target */
+        transform: scale(2.2);
+        transform-origin: center center;
+      }
+      .hf-ui-ai-prompt-flow {
+        display: grid;
+        gap: 18px;
+        width: 620px;
+        color: #18181b;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-ui-ai-prompt-panel,
+      .hf-ui-ai-prompt-result {
+        border: 1px solid #e4e4e7;
+        border-radius: 26px;
+        background: #ffffff;
+        box-shadow: 0 26px 80px rgba(0, 0, 0, 0.1);
+      }
+      .hf-ui-ai-prompt-panel {
+        display: grid;
+        gap: 16px;
+        padding: 28px;
+      }
+      .hf-ui-ai-prompt-label {
+        color: #71717a;
+        font-size: 13px;
+        font-weight: 900;
+        letter-spacing: 0.1em;
+        text-transform: uppercase;
+      }
+      .hf-ui-ai-prompt-field {
+        min-height: 92px;
+        padding: 18px;
+        border-radius: 18px;
+        background: #f4f4f5;
+        font-size: 22px;
+        font-weight: 760;
+        line-height: 1.25;
+      }
+      .hf-ui-ai-prompt-chips {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+      }
+      .hf-ui-ai-prompt-chips span {
+        padding: 8px 11px;
+        border-radius: 999px;
+        background: #eef2ff;
+        color: #4338ca;
+        font-size: 13px;
+        font-weight: 850;
+      }
+      .hf-ui-ai-prompt-panel button {
+        justify-self: start;
+        height: 46px;
+        padding: 0 20px;
+        border: 0;
+        border-radius: 13px;
+        background: #18181b;
+        color: #ffffff;
+        font-size: 15px;
+        font-weight: 700;
+        cursor: default;
+      }
+      .hf-ui-ai-prompt-result {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 18px 22px;
+      }
+      .hf-ui-ai-prompt-result strong {
+        font-size: 18px;
+      }
+      .hf-ui-ai-prompt-result span {
+        color: #16a34a;
+        font-size: 14px;
+        font-weight: 850;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="ai-prompt-flow-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-ui-ai-prompt-flow">
+          <div class="hf-ui-ai-prompt-panel">
+            <span class="hf-ui-ai-prompt-label">Prompt</span>
+            <div class="hf-ui-ai-prompt-field">Create a launch video for our new feature</div>
+            <div class="hf-ui-ai-prompt-chips">
+              <span>fast cuts</span><span>captions</span><span>product UI</span>
+            </div>
+            <button type="button">Generate</button>
+          </div>
+          <div class="hf-ui-ai-prompt-result">
+            <strong>Preview ready</strong><span>18 scenes matched</span>
+          </div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        tl.fromTo(
+          ".hf-ui-ai-prompt-panel",
+          { opacity: 0, y: 26 },
+          { opacity: 1, y: 0, duration: 0.38, ease: "power2.out" },
+          0.25,
+        );
+        tl.fromTo(
+          ".hf-ui-ai-prompt-chips span",
+          { y: 14, opacity: 0 },
+          { y: 0, opacity: 1, duration: 0.24, stagger: 0.06, ease: "power2.out" },
+          0.62,
+        );
+        tl.to(
+          ".hf-ui-ai-prompt-panel button",
+          { scale: 0.96, duration: 0.12, yoyo: true, repeat: 1, ease: "power1.inOut" },
+          1.0,
+        );
+        tl.fromTo(
+          ".hf-ui-ai-prompt-result",
+          { opacity: 0, y: 22, scale: 0.97 },
+          { opacity: 1, y: 0, scale: 1, duration: 0.36, ease: "back.out(1.3)" },
+          1.24,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["ai-prompt-flow-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/ai-prompt-flow/registry-item.json b/registry/components/ai-prompt-flow/registry-item.json
new file mode 100644
index 0000000000..100fe06f68
--- /dev/null
+++ b/registry/components/ai-prompt-flow/registry-item.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "ai-prompt-flow",
+  "type": "hyperframes:component",
+  "title": "AI Prompt Flow",
+  "description": "A composed AI prompt flow with prompt field, suggestion chips, generate action, and preview result card",
+  "tags": ["ui-flow", "remocn-port", "ai", "prompt"],
+  "files": [
+    {
+      "path": "ai-prompt-flow.html",
+      "target": "compositions/components/ai-prompt-flow.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/ai-prompt-flow.png"
+  }
+}
diff --git a/registry/components/animated-bar-chart/animated-bar-chart.html b/registry/components/animated-bar-chart/animated-bar-chart.html
new file mode 100644
index 0000000000..3b68f46a4c
--- /dev/null
+++ b/registry/components/animated-bar-chart/animated-bar-chart.html
@@ -0,0 +1,98 @@
+<!--
+  Animated Bar Chart - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-animated-bar-chart">
+  <header>
+    <div>
+      <h3>Animated Bar Chart</h3>
+      <p>A compact data card with deterministic bar growth and value callouts.</p>
+    </div>
+    <strong>+42%</strong>
+  </header>
+  <div class="bars">
+    <span class="bar" style="--h: 42%"></span><span class="bar" style="--h: 72%"></span
+    ><span class="bar" style="--h: 56%"></span><span class="bar" style="--h: 88%"></span
+    ><span class="bar" style="--h: 64%"></span><span class="bar" style="--h: 95%"></span
+    ><span class="bar" style="--h: 78%"></span>
+  </div>
+  <svg viewBox="0 0 700 210">
+    <path
+      d="M20 172 C120 90, 190 118, 260 74 S430 112, 508 42 S620 82, 680 30"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="10"
+      stroke-linecap="round"
+    />
+  </svg>
+</div>
+
+<style>
+  .hf-remocn-animated-bar-chart {
+    --hf-accent: var(--accent, #111827);
+    --hf-ink: #111827;
+    --hf-l1: rgba(17, 24, 39, 0.72);
+    --hf-l2: rgba(17, 24, 39, 0.45);
+    --hf-l3: rgba(17, 24, 39, 0.18);
+    --hf-l4: rgba(17, 24, 39, 0.08);
+    --hf-hair: rgba(17, 24, 39, 0.14);
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-animated-bar-chart {
+    width: 760px;
+    min-height: 420px;
+    border-radius: 28px;
+    background: #fff;
+    padding: 34px;
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.16);
+    display: grid;
+    gap: 22px;
+  }
+  .hf-remocn-animated-bar-chart header {
+    display: flex;
+    justify-content: space-between;
+    align-items: end;
+  }
+  .hf-remocn-animated-bar-chart h3 {
+    margin: 0;
+    font-size: 34px;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-animated-bar-chart strong {
+    font-size: 54px;
+    letter-spacing: -0.06em;
+  }
+  .hf-remocn-animated-bar-chart .bars {
+    height: 210px;
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    align-items: end;
+    gap: 14px;
+  }
+  .hf-remocn-animated-bar-chart .bar {
+    height: calc(var(--h) * var(--hf-grow, 1));
+    border-radius: 14px 14px 5px 5px;
+    background: var(--hf-l1);
+  }
+  .hf-remocn-animated-bar-chart svg {
+    width: 100%;
+    height: 210px;
+    overflow: visible;
+  }
+  .hf-remocn-animated-bar-chart path {
+    color: var(--hf-l2);
+    stroke-dasharray: 900;
+    stroke-dashoffset: var(--hf-dash, 0);
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-animated-bar-chart', { '--hf-grow': 0, '--hf-dash': 900 }, { '--hf-grow': 1, '--hf-dash': 0, duration: 1.2, ease: 'power3.out' }, startTime);
+-->
diff --git a/registry/components/animated-bar-chart/demo.html b/registry/components/animated-bar-chart/demo.html
new file mode 100644
index 0000000000..c5c35e736e
--- /dev/null
+++ b/registry/components/animated-bar-chart/demo.html
@@ -0,0 +1,176 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Animated Bar Chart - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+        transform: scale(2.1);
+        transform-origin: center center;
+      }
+      .hf-remocn-animated-bar-chart {
+        --hf-accent: var(--accent, #111827);
+        --hf-ink: #111827;
+        --hf-l1: rgba(17, 24, 39, 0.72);
+        --hf-l2: rgba(17, 24, 39, 0.45);
+        --hf-l3: rgba(17, 24, 39, 0.18);
+        --hf-l4: rgba(17, 24, 39, 0.08);
+        --hf-hair: rgba(17, 24, 39, 0.14);
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-animated-bar-chart {
+        width: 760px;
+        min-height: 420px;
+        border-radius: 28px;
+        background: #fff;
+        padding: 34px;
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.16);
+        display: grid;
+        gap: 22px;
+      }
+      .hf-remocn-animated-bar-chart header {
+        display: flex;
+        justify-content: space-between;
+        align-items: end;
+      }
+      .hf-remocn-animated-bar-chart h3 {
+        margin: 0;
+        font-size: 34px;
+        letter-spacing: -0.04em;
+        font-weight: 700;
+        color: #111827;
+      }
+      .hf-remocn-animated-bar-chart header p {
+        margin: 6px 0 0;
+        font-size: 16px;
+        color: #6b7280;
+        font-weight: 400;
+      }
+      .hf-remocn-animated-bar-chart strong {
+        font-size: 54px;
+        letter-spacing: -0.06em;
+        color: var(--hf-accent);
+        font-weight: 700;
+      }
+      .hf-remocn-animated-bar-chart .bars {
+        height: 210px;
+        display: grid;
+        grid-template-columns: repeat(7, 1fr);
+        align-items: end;
+        gap: 14px;
+      }
+      .hf-remocn-animated-bar-chart .bar {
+        height: calc(var(--h) * var(--hf-grow, 1));
+        border-radius: 14px 14px 5px 5px;
+        background: var(--hf-l1);
+      }
+      .hf-remocn-animated-bar-chart .chart-footer {
+        display: grid;
+        gap: 6px;
+      }
+      .hf-remocn-animated-bar-chart svg {
+        width: 100%;
+        height: 180px;
+        overflow: visible;
+      }
+      .hf-remocn-animated-bar-chart path {
+        color: var(--hf-l2);
+        stroke-dasharray: 900;
+        stroke-dashoffset: var(--hf-dash, 0);
+      }
+      .hf-remocn-animated-bar-chart .bar-labels {
+        display: grid;
+        grid-template-columns: repeat(7, 1fr);
+        text-align: center;
+        font-size: 13px;
+        font-weight: 500;
+        color: #9ca3af;
+        padding: 0 2px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="animated-bar-chart-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-animated-bar-chart">
+          <header>
+            <div>
+              <h3>Animated Bar Chart</h3>
+              <p>A compact data card with deterministic bar growth and value callouts.</p>
+            </div>
+            <strong>+42%</strong>
+          </header>
+          <div class="bars">
+            <span class="bar" style="--h: 42%"></span><span class="bar" style="--h: 72%"></span
+            ><span class="bar" style="--h: 56%"></span><span class="bar" style="--h: 88%"></span
+            ><span class="bar" style="--h: 64%"></span><span class="bar" style="--h: 95%"></span
+            ><span class="bar" style="--h: 78%"></span>
+          </div>
+          <div class="chart-footer">
+            <svg viewBox="0 0 700 210">
+              <!-- baseline -->
+              <line x1="20" y1="185" x2="680" y2="185" stroke="#e4e4e7" stroke-width="1.5" />
+              <path
+                d="M20 172 C120 90, 190 118, 260 74 S430 112, 508 42 S620 82, 680 30"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="10"
+                stroke-linecap="round"
+              />
+            </svg>
+            <div class="bar-labels">
+              <span>Jan</span><span>Feb</span><span>Mar</span><span>Apr</span><span>May</span
+              ><span>Jun</span><span>Jul</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-animated-bar-chart",
+          { "--hf-grow": 0, "--hf-dash": 900 },
+          { "--hf-grow": 1, "--hf-dash": 0, duration: 1.2, ease: "power3.out" },
+          startTime,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["animated-bar-chart-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/animated-bar-chart/registry-item.json b/registry/components/animated-bar-chart/registry-item.json
new file mode 100644
index 0000000000..a5a22ca6c7
--- /dev/null
+++ b/registry/components/animated-bar-chart/registry-item.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "animated-bar-chart",
+  "type": "hyperframes:component",
+  "title": "Animated Bar Chart",
+  "description": "A compact data card with deterministic bar growth and value callouts.",
+  "tags": ["data", "remocn-port"],
+  "files": [
+    {
+      "path": "animated-bar-chart.html",
+      "target": "compositions/components/animated-bar-chart.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/animated-bar-chart.png"
+  }
+}
diff --git a/registry/components/arc-motion-path/arc-motion-path.html b/registry/components/arc-motion-path/arc-motion-path.html
new file mode 100644
index 0000000000..bd0b84a9f2
--- /dev/null
+++ b/registry/components/arc-motion-path/arc-motion-path.html
@@ -0,0 +1,99 @@
+<!--
+  Arc Motion Path - advanced HyperFrames primitive.
+
+  This is intentionally seekable: drive it from a paused GSAP timeline.
+  MotionPath examples require GSAP MotionPathPlugin. Three.js examples expose
+  a render(progress) adapter instead of a free-running requestAnimationFrame loop.
+-->
+
+<div class="hf-advanced-arc-motion-path">
+  <svg viewBox="0 0 760 430" aria-hidden="true">
+    <path
+      id="arc-motion-path-path-a"
+      class="path"
+      d="M104 310 C178 110, 334 74, 442 178 S592 306, 668 120"
+    />
+    <path id="arc-motion-path-path-b" class="path" d="M118 142 C224 300, 410 330, 642 206" />
+  </svg>
+  <div class="core">Arc Motion Path</div>
+  <div class="chip chip-a"><span class="dot"></span>Plan</div>
+  <div class="chip chip-b"><span class="dot"></span>Render</div>
+</div>
+
+<style>
+  .hf-advanced-arc-motion-path {
+    color: var(--fg, #111827);
+    font-family: var(--font-body, Inter, system-ui, sans-serif);
+  }
+  .hf-advanced-arc-motion-path {
+    position: relative;
+    width: 760px;
+    height: 430px;
+    border-radius: var(--radius, 30px);
+    overflow: hidden;
+    background: radial-gradient(
+      circle at 50% 20%,
+      var(--bg, #f4f4f5),
+      var(--bg, #f8fafc) 54%,
+      var(--bg, #e4e4e7)
+    );
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);
+  }
+  .hf-advanced-arc-motion-path svg {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    overflow: visible;
+  }
+  .hf-advanced-arc-motion-path .path {
+    fill: none;
+    stroke: color-mix(in srgb, var(--fg, #111827) 18%, transparent);
+    stroke-width: 3;
+    stroke-dasharray: 10 12;
+  }
+  .hf-advanced-arc-motion-path .core {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 176px;
+    height: 176px;
+    margin: -88px 0 0 -88px;
+    border-radius: 42px;
+    background: var(--fg, #111827);
+    color: var(--bg, #fff);
+    display: grid;
+    place-items: center;
+    text-align: center;
+    font-weight: 900;
+    letter-spacing: -0.04em;
+    box-shadow: 0 22px 54px rgba(15, 23, 42, 0.25);
+  }
+  .hf-advanced-arc-motion-path .chip {
+    position: absolute;
+    left: 0;
+    top: 0;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1, 8px);
+    height: 42px;
+    padding: 0 var(--space-2, 16px);
+    border-radius: var(--radius, 999px);
+    background: var(--surface, #fff);
+    box-shadow: 0 16px 42px rgba(15, 23, 42, 0.14);
+    font-weight: 800;
+    transform-origin: 50% 50%;
+  }
+  .hf-advanced-arc-motion-path .dot {
+    width: 10px;
+    height: 10px;
+    border-radius: var(--radius, 999px);
+    background: var(--accent, #18181b);
+  }
+</style>
+
+<!--
+  Timeline integration:
+  const startTime = 0;
+  if (window.MotionPathPlugin) gsap.registerPlugin(MotionPathPlugin); tl.to('.hf-advanced-arc-motion-path .chip-a', { motionPath: { path: '#arc-motion-path-path-a', align: '#arc-motion-path-path-a', alignOrigin: [0.5, 0.5], autoRotate: true }, duration: 2.4, ease: 'power1.inOut' }, startTime); tl.to('.hf-advanced-arc-motion-path .chip-b', { motionPath: { path: '#arc-motion-path-path-b', align: '#arc-motion-path-path-b', alignOrigin: [0.5, 0.5], autoRotate: true, start: 0.1, end: 0.92 }, duration: 2.1, ease: 'sine.inOut' }, startTime + 0.25);
+-->
diff --git a/registry/components/arc-motion-path/demo.html b/registry/components/arc-motion-path/demo.html
new file mode 100644
index 0000000000..4a22cf9957
--- /dev/null
+++ b/registry/components/arc-motion-path/demo.html
@@ -0,0 +1,164 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Arc Motion Path - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/MotionPathPlugin.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: var(--bg, #f7f7f8);
+        font-family: var(--font-body, Inter, system-ui, sans-serif);
+      }
+      .hf-advanced-arc-motion-path {
+        color: var(--fg, #111827);
+        font-family: var(--font-body, Inter, system-ui, sans-serif);
+      }
+      .hf-advanced-arc-motion-path {
+        position: relative;
+        width: 760px;
+        height: 430px;
+        border-radius: 30px;
+        overflow: hidden;
+        background: radial-gradient(
+          circle at 50% 20%,
+          var(--bg, #f4f4f5),
+          var(--bg, #f8fafc) 54%,
+          var(--bg, #e4e4e7)
+        );
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);
+        transform: scale(0.84);
+      }
+      .hf-advanced-arc-motion-path svg {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        overflow: visible;
+      }
+      .hf-advanced-arc-motion-path .path {
+        fill: none;
+        stroke: color-mix(in srgb, var(--fg, #111827) 18%, transparent);
+        stroke-width: 3;
+        stroke-dasharray: 10 12;
+      }
+      .hf-advanced-arc-motion-path .core {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        width: 176px;
+        height: 176px;
+        margin: -88px 0 0 -88px;
+        border-radius: 42px;
+        background: var(--fg, #111827);
+        color: var(--bg, #fff);
+        display: grid;
+        place-items: center;
+        text-align: center;
+        font-size: 15px;
+        font-weight: 900;
+        letter-spacing: -0.04em;
+        box-shadow: 0 22px 54px rgba(15, 23, 42, 0.25);
+      }
+      .hf-advanced-arc-motion-path .chip {
+        position: absolute;
+        left: 0;
+        top: 0;
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+        height: 42px;
+        padding: 0 16px;
+        border-radius: 999px;
+        background: var(--surface, #fff);
+        box-shadow: 0 16px 42px rgba(15, 23, 42, 0.14);
+        font-size: 13px;
+        font-weight: 800;
+        transform-origin: 50% 50%;
+      }
+      .hf-advanced-arc-motion-path .dot {
+        width: 10px;
+        height: 10px;
+        border-radius: 999px;
+        background: var(--accent, #18181b);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="arc-motion-path-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="hf-advanced-arc-motion-path">
+        <svg viewBox="0 0 760 430" aria-hidden="true">
+          <path
+            id="arc-motion-path-path-a"
+            class="path"
+            d="M104 310 C178 110, 334 74, 442 178 S592 306, 668 120"
+          />
+          <path id="arc-motion-path-path-b" class="path" d="M118 142 C224 300, 410 330, 642 206" />
+        </svg>
+        <div class="core">Arc Motion Path</div>
+        <div class="chip chip-a"><span class="dot"></span>Plan</div>
+        <div class="chip chip-b"><span class="dot"></span>Render</div>
+      </div>
+    </div>
+    <script>
+      const tl = gsap.timeline({ paused: true });
+      const startTime = 0.5;
+      if (window.MotionPathPlugin) gsap.registerPlugin(MotionPathPlugin);
+      tl.to(
+        ".hf-advanced-arc-motion-path .chip-a",
+        {
+          motionPath: {
+            path: "#arc-motion-path-path-a",
+            align: "#arc-motion-path-path-a",
+            alignOrigin: [0.5, 0.5],
+            autoRotate: true,
+          },
+          duration: 2.4,
+          ease: "power1.inOut",
+        },
+        startTime,
+      );
+      tl.to(
+        ".hf-advanced-arc-motion-path .chip-b",
+        {
+          motionPath: {
+            path: "#arc-motion-path-path-b",
+            align: "#arc-motion-path-path-b",
+            alignOrigin: [0.5, 0.5],
+            autoRotate: true,
+            start: 0.1,
+            end: 0.92,
+          },
+          duration: 2.1,
+          ease: "sine.inOut",
+        },
+        startTime + 0.25,
+      );
+      tl.set({}, {}, 5);
+      window.__timelines = window.__timelines || {};
+      window.__timelines["arc-motion-path-demo"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/registry/components/arc-motion-path/registry-item.json b/registry/components/arc-motion-path/registry-item.json
new file mode 100644
index 0000000000..5b367235f9
--- /dev/null
+++ b/registry/components/arc-motion-path/registry-item.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "arc-motion-path",
+  "type": "hyperframes:component",
+  "title": "Arc Motion Path",
+  "description": "A GSAP MotionPath primitive that flies a callout along a curved arc with autorotation.",
+  "tags": ["video-primitive", "motionpath", "gsap-plugin", "hyperframes-native"],
+  "files": [
+    {
+      "path": "arc-motion-path.html",
+      "target": "compositions/components/arc-motion-path.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/arc-motion-path.png"
+  }
+}
diff --git a/registry/components/ascii-render-pass/README.md b/registry/components/ascii-render-pass/README.md
new file mode 100644
index 0000000000..5184ad7023
--- /dev/null
+++ b/registry/components/ascii-render-pass/README.md
@@ -0,0 +1,75 @@
+# ascii-render-pass
+
+Wave M experiment (texture). A slotted scene renders as live ASCII: the
+source is rasterized once at mount to an offscreen canvas, a luminance
+summed-area table is built from it, and every frame draws one glyph per
+cell from a density ramp charset. Resolution animates coarse to fine on a
+stepped pitch ladder (5 steps, powers of sqrt(2)) at `resolve_at`, then
+holds legible-fine. 4s authored, elastic HOLD (never time-scaled).
+
+## Mounting
+
+```html
+<div
+  class="clip"
+  data-composition-id="ascii-render-pass"
+  data-composition-src="./components/ascii-render-pass.html"
+  data-variable-values='{"grid":"fine","resolve_at":1.2,"accent":"blue"}'
+  data-start="0"
+  data-duration="4"
+  data-track-index="0"
+></div>
+```
+
+## Scene slot
+
+The source scene is a slot. Place an inert template anywhere in the HOST
+page:
+
+```html
+<template data-slot="ascii-render-pass-scene"> ...scene... </template>
+```
+
+The slot is rasterized through an SVG foreignObject snapshot, so content
+must be self-contained: inline styles or rules carried by host `<style>`
+tags (both are copied into the snapshot), data-URI images only, system or
+already-active fonts. External resources do not load inside a snapshot.
+The DOM itself never displays; only its ASCII render does. A missing slot
+falls back to a token monogram tile rasterized synchronously from
+contract tokens.
+
+## Variables
+
+| id         | type   | default       | notes                                                                                                                           |
+| ---------- | ------ | ------------- | ------------------------------------------------------------------------------------------------------------------------------- |
+| charset    | string | " .:-=+\*#%@" | Density ramp, dark to light. A leading space keeps dark cells empty.                                                            |
+| grid       | enum   | med           | Final cell pitch: coarse (22 rows), med (36), fine (54).                                                                        |
+| resolve_at | number | 1.4           | Seconds from mount start when the coarse-to-fine resolve begins. Clamped so the 1.2s resolve and any exit stay inside the clip. |
+| accent     | enum   | green         | Glyph ink: green maps to --brand, blue to --accent, violet to --accent-2.                                                       |
+| exit       | enum   | none          | none holds the fine render (frame roots own transitions); fade or up add a 0.45s departure.                                     |
+
+## Choreography
+
+- 0.00s: the ASCII field fades up over 0.5s at the coarsest pitch (4x the
+  final cell), a blocky glyph read of the scene.
+- resolve_at: the pitch ladder steps coarse to fine over 1.2s. A stateless
+  per-cell hash shimmer rides the steps so each re-sample feels live.
+- resolve_at + 1.2s: the final pitch lands; shimmer amplitude is exactly
+  zero from here on.
+- HOLD: legible-fine, truly still, elastic with the clip duration.
+
+Sync point `resolve` fires as the ladder starts; align SFX to it.
+
+## Determinism
+
+The raster, its summed-area table, and every resolved color are fixed
+once at mount. One anchor tween spans the full duration and the
+timeline's onUpdate repaints the canvas from scratch, a pure function of
+(raster tables, timeline time). Cell shimmer is a stateless integer hash
+of (column, row, ladder step). No Math.random, no wall clock, no
+incremental state, so eventful seeks (suppressEvents false) land
+identical frames in any order and either direction. The no-slot monogram
+raster is drawn synchronously before the timeline registers; a slotted
+raster arrives from the snapshot decode (page-load scale, before capture
+begins) and repaints the current frame, after which all frames are pure
+f(t).
diff --git a/registry/components/ascii-render-pass/ascii-render-pass.html b/registry/components/ascii-render-pass/ascii-render-pass.html
new file mode 100644
index 0000000000..1975f735d7
--- /dev/null
+++ b/registry/components/ascii-render-pass/ascii-render-pass.html
@@ -0,0 +1,485 @@
+<!doctype html>
+<!--
+  ascii-render-pass: HyperFrames video primitive (Wave M experiment, texture)
+
+  A slotted scene renders as live ASCII: the source is rasterized ONCE at
+  mount to an offscreen canvas, its luminance grid is sampled per cell, and
+  each cell draws a glyph from a density ramp charset. Resolution animates
+  coarse to fine on a stepped pitch ladder as the piece resolves, then
+  holds legible-fine. The DOM source itself never displays; the canvas is
+  the whole picture.
+
+  The scene is a SLOT. Callers supply content by placing an inert template
+  anywhere in the HOST page (templates never render, and the runtime wipes
+  the host clip's own children on mount):
+
+    <template data-slot="ascii-render-pass-scene"> ... </template>
+
+  Slot content is rasterized through an SVG foreignObject snapshot, so it
+  must be self-contained: inline styles or rules carried by host <style>
+  tags (which are copied into the snapshot), data-URI images only, system
+  or already-active fonts. External resources do not load inside the
+  snapshot. When no slot exists, the primitive rasterizes a token monogram
+  tile drawn synchronously from contract tokens (no snapshot involved).
+
+  Variables (declared in data-composition-variables below):
+    - charset (string): density ramp, dark to light, first glyph may be a
+      space so dark cells stay empty. Default " .:-=+*#%@".
+    - grid ("coarse" | "med" | "fine", default "med"): final cell pitch.
+    - resolve_at (seconds): when the coarse-to-fine resolve begins.
+    - accent ("green" | "blue" | "violet", default "green"): glyph ink;
+      green rides --brand, blue rides --accent, violet rides --accent-2.
+    - exit ("none" | "fade" | "up", default "none"): frame roots own
+      transitions; the default holds the fine render to the cut.
+
+  Envelope, fixed segments with elastic HOLD only (never timeScale):
+    0.00s        canvas fades up over 0.5s at the coarsest pitch
+    resolve_at   pitch ladder steps coarse to fine over 1.2s (5 steps,
+                 powers of sqrt(2)); a per-cell hash shimmer rides the
+                 steps and lands at zero on the final step
+    then         legible-fine HOLD, truly still
+    OUT = 0.45s  only when exit is not none
+
+  Determinism (canvas 2D law): the raster, its luminance summed-area
+  table, and every resolved color are fixed once at mount. Every painted
+  frame is a pure function of (that raster, the timeline's current time):
+  the timeline's onUpdate clears the canvas and redraws every glyph from
+  scratch. Cell shimmer uses a stateless integer hash of (column, row,
+  ladder step), not a stream; there is no Math.random, no wall clock, no
+  incremental state. Eventful seeks (suppressEvents false, the engine's
+  render path) land identical frames in any order and either direction.
+  The no-slot monogram raster is drawn synchronously before the timeline
+  registers; a slotted raster arrives from the snapshot decode and
+  repaints the current frame, after which all frames are pure f(t).
+-->
+<html
+  lang="en"
+  data-composition-id="ascii-render-pass"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "charset", "type": "string", "role": "style", "label": "Charset", "description": "Density ramp, dark to light. A leading space keeps dark cells empty.", "default": " .:-=+*#%@" },
+    { "id": "grid", "type": "enum", "role": "style", "label": "Grid", "description": "Final cell pitch the resolve lands on.", "default": "med", "options": [{ "value": "coarse", "label": "Coarse" }, { "value": "med", "label": "Medium" }, { "value": "fine", "label": "Fine" }] },
+    { "id": "resolve_at", "type": "number", "role": "timing", "label": "Resolve at", "description": "Seconds from mount start when the coarse-to-fine resolve begins.", "default": 1.4, "min": 0.6, "max": 10, "step": 0.1, "unit": "s" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Glyph ink: green rides --brand, blue rides --accent, violet rides --accent-2.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the fine render holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>ASCII Render Pass</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="ascii-render-pass" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            pointer-events: none;
+          }
+
+          .arp-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .arp-stage {
+            position: absolute;
+            inset: 0;
+            will-change: transform, opacity;
+          }
+
+          .arp-canvas {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+          }
+        </style>
+
+        <div
+          id="ascii-render-pass-clip"
+          class="arp-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="arp-stage">
+            <canvas class="arp-canvas" aria-hidden="true"></canvas>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".arp-stage");
+            var canvas = root.querySelector(".arp-canvas");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            function num(value, fallback, min, max) {
+              var n = Number(value);
+              if (!isFinite(n)) n = fallback;
+              return Math.max(min, Math.min(max, n));
+            }
+
+            var charset =
+              typeof vars.charset === "string" && vars.charset.length >= 2
+                ? vars.charset
+                : " .:-=+*#%@";
+            var grid = vars.grid === "coarse" || vars.grid === "fine" ? vars.grid : "med";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            // Bundler mirrors composition variables as scoped CSS custom
+            // props; when this unit's accent variable shadows the --accent
+            // token ("blue" is a valid CSS color), fall back to the literal.
+            var computedAccent = getComputedStyle(root).getPropertyValue("--accent").trim();
+            if (
+              computedAccent === "green" ||
+              computedAccent === "blue" ||
+              computedAccent === "violet"
+            ) {
+              accentColors.blue = "#61a8ff";
+            }
+
+            // Envelope.
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var OUT = exit === "none" ? 0 : 0.45;
+            var RESOLVE = Math.min(1.2, Math.max(0.5, duration - OUT - 1.0));
+            var FADE_IN = 0.5;
+            var maxAt = Math.max(0.6, duration - RESOLVE - OUT - 0.05);
+            var resolveAt = num(vars.resolve_at, 1.4, 0.6, maxAt);
+            var OUT_START = duration - OUT;
+
+            // Canvas raster basis, fixed once at mount. Elastic root: the
+            // host box decides the resolution.
+            var dpr = Math.min(2, Math.max(1, Number(window.devicePixelRatio) || 1));
+            var box = root.getBoundingClientRect();
+            var cssW = Math.max(1, Math.round(box.width) || 640);
+            var cssH = Math.max(1, Math.round(box.height) || 360);
+            canvas.width = Math.round(cssW * dpr);
+            canvas.height = Math.round(cssH * dpr);
+            var ctx = canvas.getContext("2d");
+
+            // Resolve tokens to concrete values once at mount so nothing in
+            // the paint path depends on style recalc during seeks.
+            var hostDoc = root.ownerDocument;
+            function resolveColor(cssColor, fallback) {
+              var probe = hostDoc.createElement("span");
+              probe.style.color = cssColor;
+              root.appendChild(probe);
+              var out = getComputedStyle(probe).color || fallback;
+              probe.remove();
+              return out;
+            }
+            var bgColor = resolveColor("var(--bg, #0b0c0e)", "#0b0c0e");
+            var inkColor = resolveColor(accentColors[accent], "#71f5a7");
+            var probeFont = hostDoc.createElement("span");
+            probeFont.style.fontFamily =
+              'var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace)';
+            root.appendChild(probeFont);
+            var monoFamily = getComputedStyle(probeFont).fontFamily || "monospace";
+            probeFont.remove();
+
+            // Source raster: cssW x cssH capped to 1280 wide, composited
+            // over the resolved bg so luminance never depends on alpha.
+            var rasterScale = Math.min(1, 1280 / cssW);
+            var rw = Math.max(1, Math.round(cssW * rasterScale));
+            var rh = Math.max(1, Math.round(cssH * rasterScale));
+            var raster = hostDoc.createElement("canvas");
+            raster.width = rw;
+            raster.height = rh;
+            var rctx = raster.getContext("2d");
+
+            // Luminance summed-area table so any cell's average is O(1) and
+            // a pure function of the fixed raster.
+            var sat = null; // Float64Array (rw+1)*(rh+1)
+            function buildSat() {
+              var data = rctx.getImageData(0, 0, rw, rh).data;
+              var table = new Float64Array((rw + 1) * (rh + 1));
+              for (var y = 0; y < rh; y += 1) {
+                var rowSum = 0;
+                for (var x = 0; x < rw; x += 1) {
+                  var i = (y * rw + x) * 4;
+                  rowSum += (0.299 * data[i] + 0.587 * data[i + 1] + 0.114 * data[i + 2]) / 255;
+                  table[(y + 1) * (rw + 1) + (x + 1)] = table[y * (rw + 1) + (x + 1)] + rowSum;
+                }
+              }
+              sat = table;
+            }
+            function cellLuma(x0, y0, x1, y1) {
+              // Raster-space integer rect, clamped.
+              if (x1 <= x0 || y1 <= y0) return 0;
+              var s = rw + 1;
+              var sum = sat[y1 * s + x1] - sat[y0 * s + x1] - sat[y1 * s + x0] + sat[y0 * s + x0];
+              return sum / ((x1 - x0) * (y1 - y0));
+            }
+
+            function paintMonogram(target, w, h) {
+              // Synchronous token monogram raster: a surface tile with one
+              // display glyph, same vocabulary as the slot-less siblings.
+              var m = Math.min(w, h);
+              target.fillStyle = bgColor;
+              target.fillRect(0, 0, w, h);
+              var tile = m * 0.52;
+              var x = (w - tile) / 2;
+              var y = (h - tile) / 2;
+              var r = m * 0.05;
+              target.fillStyle = resolveColor(
+                "color-mix(in srgb, var(--surface, #14171c) 72%, " + accentColors[accent] + ")",
+                "#1a2a22",
+              );
+              target.beginPath();
+              if (target.roundRect) target.roundRect(x, y, tile, tile, r);
+              else target.rect(x, y, tile, tile);
+              target.fill();
+              target.fillStyle = resolveColor(
+                "color-mix(in srgb, var(--fg, #f8fafc) 30%, " + accentColors[accent] + ")",
+                "#a8f5c8",
+              );
+              target.font = "600 " + Math.round(m * 0.3) + "px " + monoFamily;
+              target.textAlign = "center";
+              target.textBaseline = "middle";
+              target.fillText("H", w / 2, h / 2 + m * 0.012);
+            }
+
+            // SLOT. Rasterized through an SVG foreignObject snapshot of the
+            // slot markup plus every host <style> tag and the resolved
+            // contract tokens, so host-authored rules and theme values
+            // apply inside the snapshot.
+            var slotTemplate = null;
+            try {
+              slotTemplate = hostDoc.querySelector('template[data-slot="ascii-render-pass-scene"]');
+            } catch (error) {
+              slotTemplate = null;
+            }
+
+            var rasterReady = false;
+            function finishRaster() {
+              buildSat();
+              rasterReady = true;
+              root.setAttribute("data-arp-raster", "ready");
+              paint(tl ? tl.time() : 0);
+            }
+
+            if (slotTemplate) {
+              var tokenNames = [
+                "--bg",
+                "--fg",
+                "--muted",
+                "--surface",
+                "--border",
+                "--brand",
+                "--accent",
+                "--accent-2",
+                "--font-display",
+                "--font-body",
+                "--font-mono",
+                "--radius",
+                "--space-1",
+                "--space-2",
+                "--space-3",
+                "--dur-beat",
+                "--ease-standard",
+                "--ease-emphasis",
+              ];
+              var rootStyle = getComputedStyle(root);
+              var tokenDecl = "";
+              for (var ti = 0; ti < tokenNames.length; ti += 1) {
+                var tv = rootStyle.getPropertyValue(tokenNames[ti]).trim();
+                if (tv) tokenDecl += tokenNames[ti] + ":" + tv + ";";
+              }
+              var styleTexts = "";
+              var styleTags = hostDoc.querySelectorAll("style");
+              for (var si = 0; si < styleTags.length; si += 1) {
+                styleTexts += styleTags[si].textContent || "";
+              }
+              var wrapper = hostDoc.createElement("div");
+              wrapper.setAttribute(
+                "style",
+                "width:" +
+                  rw +
+                  "px;height:" +
+                  rh +
+                  "px;overflow:hidden;position:relative;" +
+                  "display:grid;place-items:center;background:" +
+                  bgColor +
+                  ";" +
+                  tokenDecl,
+              );
+              wrapper.appendChild(hostDoc.importNode(slotTemplate.content, true));
+              var styleEl = hostDoc.createElement("style");
+              styleEl.textContent = styleTexts;
+              wrapper.insertBefore(styleEl, wrapper.firstChild);
+              var serialized = new XMLSerializer().serializeToString(wrapper);
+              var svgMarkup =
+                // No xmlns on foreignObject: a default xmlns declaration
+                // applies to the declaring element itself and would eject
+                // foreignObject from the SVG namespace (renders blank). The
+                // serialized wrapper div already carries the XHTML namespace.
+                '<svg xmlns="http://www.w3.org/2000/svg" width="' +
+                rw +
+                '" height="' +
+                rh +
+                '"><foreignObject width="' +
+                rw +
+                '" height="' +
+                rh +
+                '">' +
+                serialized +
+                "</foreignObject></svg>";
+              var snapshot = new Image();
+              snapshot.onload = function () {
+                rctx.fillStyle = bgColor;
+                rctx.fillRect(0, 0, rw, rh);
+                rctx.drawImage(snapshot, 0, 0, rw, rh);
+                try {
+                  finishRaster();
+                } catch (error) {
+                  // Tainted or unreadable snapshot: fall back to the monogram.
+                  paintMonogram(rctx, rw, rh);
+                  finishRaster();
+                }
+              };
+              snapshot.onerror = function () {
+                paintMonogram(rctx, rw, rh);
+                finishRaster();
+              };
+              snapshot.src = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svgMarkup);
+            } else {
+              paintMonogram(rctx, rw, rh);
+            }
+
+            // Final cell pitch (display px) per grid enum; the ladder steps
+            // down from 4x on powers of sqrt(2). Stepped, not continuous:
+            // each step is a stable re-sample, the digital resolve.
+            var rowsFinal = { coarse: 22, med: 36, fine: 54 };
+            var cellFinal = Math.max(4, cssH / rowsFinal[grid]);
+            var LADDER = [4, 2.83, 2, 1.41, 1];
+            var LAST = LADDER.length - 1;
+
+            function clamp01(v) {
+              return v < 0 ? 0 : v > 1 ? 1 : v;
+            }
+            // Stateless integer hash for per-cell shimmer: pure function of
+            // (col, row, step), no stream, no state.
+            function hash01(cx, cy, step) {
+              var h =
+                Math.imul(cx + 1, 0x9e3779b1) ^
+                Math.imul(cy + 1, 0x85ebca6b) ^
+                Math.imul(step + 1, 0xc2b2ae35);
+              h = Math.imul(h ^ (h >>> 15), 0x27d4eb2f);
+              h = (h ^ (h >>> 13)) >>> 0;
+              return h / 4294967296;
+            }
+
+            var glyphs = charset.split("");
+            var GN = glyphs.length;
+
+            // Pure repaint from (raster tables, t).
+            function paint(timeSeconds) {
+              ctx.fillStyle = bgColor;
+              ctx.fillRect(0, 0, canvas.width, canvas.height);
+              if (!rasterReady) return;
+              var t = timeSeconds;
+              var fade = clamp01(t / FADE_IN);
+              fade = 1 - (1 - fade) * (1 - fade); // power2.out
+              if (fade <= 0) return;
+              var rp = clamp01((t - resolveAt) / RESOLVE);
+              rp = rp * rp * (3 - 2 * rp); // smoothstep across the ladder
+              var step = Math.min(LAST, Math.floor(rp * LAST + 1e-6));
+              if (rp >= 1) step = LAST;
+              var cell = cellFinal * LADDER[step];
+              var cols = Math.ceil(cssW / cell);
+              var rows = Math.ceil(cssH / cell);
+              var cellDev = cell * dpr;
+              ctx.font = "600 " + cellDev * 0.92 + "px " + monoFamily;
+              ctx.textAlign = "center";
+              ctx.textBaseline = "middle";
+              ctx.fillStyle = inkColor;
+              // Shimmer amplitude decays to exactly zero on the final step
+              // so the HOLD is truly still.
+              var shimmerAmp = step === LAST && rp >= 1 ? 0 : 0.16;
+              for (var cy = 0; cy < rows; cy += 1) {
+                for (var cx = 0; cx < cols; cx += 1) {
+                  var x0 = Math.round(cx * cell * rasterScale);
+                  var y0 = Math.round(cy * cell * rasterScale);
+                  var x1 = Math.min(rw, Math.round((cx + 1) * cell * rasterScale));
+                  var y1 = Math.min(rh, Math.round((cy + 1) * cell * rasterScale));
+                  var luma = cellLuma(x0, Math.min(y0, rh), x1, Math.min(y1, rh));
+                  var idx = Math.round(luma * (GN - 1));
+                  if (idx <= 0 && glyphs[0] === " ") continue;
+                  var alpha = (0.3 + 0.7 * luma) * fade;
+                  if (shimmerAmp > 0) {
+                    alpha *= 1 - shimmerAmp + shimmerAmp * hash01(cx, cy, step);
+                  }
+                  if (alpha <= 0.01) continue;
+                  ctx.globalAlpha = clamp01(alpha);
+                  ctx.fillText(glyphs[idx], (cx + 0.5) * cellDev, (cy + 0.5) * cellDev);
+                }
+              }
+              ctx.globalAlpha = 1;
+            }
+
+            gsap.set(stage, { opacity: 1, y: "0cqh" });
+
+            var tl = gsap.timeline({
+              paused: true,
+              onUpdate: function () {
+                paint(tl.time());
+              },
+            });
+
+            // Anchor tween: spans the full authored duration so onUpdate
+            // (the canvas repaint) fires for every eventful seek in [0, D]
+            // and holds keep tl.time() honest.
+            tl.to({ t: 0 }, { t: 1, duration: duration, ease: "none" }, 0);
+
+            // HOLD: legible-fine, truly still (shimmer amplitude is zero
+            // past the final ladder step; the raster never changes).
+
+            // OUT: optional departure; exit none holds until the frame cuts.
+            if (exit === "up") {
+              tl.to(stage, { y: "-4cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "fade") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            }
+
+            tl.seek(0);
+            paint(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["ascii-render-pass"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/ascii-render-pass/demo.html b/registry/components/ascii-render-pass/demo.html
new file mode 100644
index 0000000000..9c34ddaad5
--- /dev/null
+++ b/registry/components/ascii-render-pass/demo.html
@@ -0,0 +1,126 @@
+<!doctype html>
+<!--
+  ascii-render-pass demo. A full-bleed 1920x1080 LIGHT host mounts the
+  primitive through data-composition-src with non-default variables
+  (fine grid, earlier resolve, blue accent) and supplies the scene slot
+  to prove the snapshot raster path while the primitive stays elastic.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>ASCII Render Pass Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #f5f6f8);
+      }
+
+      #root {
+        --bg: #f5f6f8;
+        --fg: #101318;
+        --muted: #5b6472;
+        --surface: #ffffff;
+        --border: #d7dce4;
+        --brand: #14a35e;
+        --accent: #2f6fed;
+        --accent-2: #7a5cd6;
+        --radius: 24px;
+        --font-display: "Inter", system-ui, sans-serif;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg);
+      }
+
+      .mount-stage {
+        position: absolute;
+        inset: 0;
+        container-type: size;
+        overflow: hidden;
+      }
+
+      .ascii-demo-scene {
+        display: grid;
+        place-items: center;
+        gap: 20px;
+      }
+
+      .ascii-demo-scene .panel {
+        display: grid;
+        place-items: center;
+        gap: 16px;
+        width: 860px;
+        height: 460px;
+        border-radius: 32px;
+        background: #101318;
+      }
+
+      .ascii-demo-scene .word {
+        color: #ffffff;
+        font-family: system-ui, sans-serif;
+        font-size: 132px;
+        font-weight: 600;
+        letter-spacing: -0.01em;
+      }
+
+      .ascii-demo-scene .tag {
+        color: #9aa5b4;
+        font-family: ui-monospace, Menlo, monospace;
+        font-size: 30px;
+        letter-spacing: 0.16em;
+        text-transform: uppercase;
+      }
+    </style>
+  </head>
+  <body>
+    <template data-slot="ascii-render-pass-scene">
+      <div class="ascii-demo-scene">
+        <div class="panel">
+          <span class="word">SHIP IT</span>
+          <span class="tag">build 4.2.0</span>
+        </div>
+      </div>
+    </template>
+
+    <div
+      id="root"
+      data-composition-id="ascii-render-pass-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="ascii-render-pass-mount"
+        class="mount-stage clip"
+        data-composition-id="ascii-render-pass"
+        data-composition-src="./ascii-render-pass.html"
+        data-variable-values='{"grid":"fine","resolve_at":1.2,"accent":"blue"}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="1920"
+        data-height="1080"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["ascii-render-pass-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/ascii-render-pass/registry-item.json b/registry/components/ascii-render-pass/registry-item.json
new file mode 100644
index 0000000000..5b9765676c
--- /dev/null
+++ b/registry/components/ascii-render-pass/registry-item.json
@@ -0,0 +1,114 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "ascii-render-pass",
+  "type": "hyperframes:component",
+  "title": "ASCII Render Pass",
+  "description": "A slotted scene renders as live ASCII: a canvas samples the source's luminance grid (rasterized once at mount) and draws glyphs from a density ramp charset; resolution steps coarse to fine as the piece resolves, then holds legible-fine.",
+  "tags": ["motion-primitive", "experiment", "texture", "ascii", "quantize"],
+  "jobs": ["reveal"],
+  "family": "effects",
+  "profile": "texture",
+  "evidence": "Wave M M1: Codrops 'Efecto: Building Real-Time ASCII and Dithering Effects with WebGL Shaders' (2026-01-04), the coded-motion ASCII wave from the wild scout",
+  "syncPoints": [
+    {
+      "id": "resolve",
+      "phase": "in",
+      "offset": 1.4
+    }
+  ],
+  "files": [
+    {
+      "path": "ascii-render-pass.html",
+      "target": "compositions/components/ascii-render-pass.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "charset",
+      "type": "string",
+      "role": "style",
+      "label": "Charset",
+      "description": "Density ramp, dark to light. A leading space keeps dark cells empty.",
+      "default": " .:-=+*#%@"
+    },
+    {
+      "id": "grid",
+      "type": "enum",
+      "role": "style",
+      "label": "Grid",
+      "description": "Final cell pitch the resolve lands on.",
+      "default": "med",
+      "options": [
+        {
+          "value": "coarse",
+          "label": "Coarse"
+        },
+        {
+          "value": "med",
+          "label": "Medium"
+        },
+        {
+          "value": "fine",
+          "label": "Fine"
+        }
+      ]
+    },
+    {
+      "id": "resolve_at",
+      "type": "number",
+      "role": "timing",
+      "label": "Resolve at",
+      "description": "Seconds from mount start when the coarse-to-fine resolve begins.",
+      "default": 1.4,
+      "min": 0.6,
+      "max": 10,
+      "step": 0.1,
+      "unit": "s"
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Glyph ink: green rides --brand, blue rides --accent, violet rides --accent-2.",
+      "default": "green",
+      "options": [
+        {
+          "value": "green",
+          "label": "Green"
+        },
+        {
+          "value": "blue",
+          "label": "Blue"
+        },
+        {
+          "value": "violet",
+          "label": "Violet"
+        }
+      ]
+    },
+    {
+      "id": "exit",
+      "type": "enum",
+      "role": "timing",
+      "label": "Exit",
+      "description": "Optional departure. Default none: the fine render holds until the frame cuts.",
+      "default": "none",
+      "options": [
+        {
+          "value": "none",
+          "label": "None"
+        },
+        {
+          "value": "fade",
+          "label": "Fade"
+        },
+        {
+          "value": "up",
+          "label": "Up"
+        }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/ascii-trail-reveal/ascii-trail-reveal.html b/registry/components/ascii-trail-reveal/ascii-trail-reveal.html
new file mode 100644
index 0000000000..8852c87618
--- /dev/null
+++ b/registry/components/ascii-trail-reveal/ascii-trail-reveal.html
@@ -0,0 +1,380 @@
+<!doctype html>
+<!--
+  ascii-trail-reveal: HyperFrames video primitive (intros and reveals)
+
+  Concept: a luminous actor follows an authored S-curve across an ASCII
+  signal grid. Cells flip away behind the actor to reveal the real panel,
+  while the lagging edge dissolves in a deterministic cascade.
+
+  Variables:
+    - label (string, default "The reveal"): text on the revealed panel.
+    - accent (green | blue | violet, default "green"): trail and panel accent.
+    - trail_width (narrow | wide, default "narrow"): width of the reveal tail.
+
+  Envelope (fixed IN and OUT, elastic HOLD only, never timeScale):
+    IN_BASE  = 3.20s  the actor crosses the authored path, rests briefly,
+               then dissolves as the final cells complete their flip
+    HOLD     = elastic = max(0, D - IN_BASE), fully revealed content drifts
+               subtly and remains legible
+    OUT_BASE = 0.00s  the revealed panel is the required end state
+    If D is shorter than IN_BASE, IN compresses to D and HOLD is zero.
+
+  Determinism: glyphs, cell timing jitter, and reveal order come only from
+  row, column, and index math. No clock or random source participates.
+-->
+<html
+  lang="en"
+  data-composition-id="ascii-trail-reveal"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "label", "type": "string", "role": "content", "label": "Panel label", "description": "Text shown on the revealed panel.", "default": "The reveal" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Color used by the trail and revealed panel.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "trail_width", "type": "enum", "role": "layout", "label": "Trail width", "description": "Width of the cell reveal tail around the authored path.", "default": "narrow", "options": [{ "value": "narrow", "label": "Narrow" }, { "value": "wide", "label": "Wide" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>ASCII Trail Reveal</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="ascii-trail-reveal" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .atr-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+          }
+
+          .atr-panel {
+            position: relative;
+            width: 88cqw;
+            height: 76cqh;
+            overflow: hidden;
+            border: 0.16cqmin solid color-mix(in srgb, var(--atr-accent) 52%, #475569);
+            border-radius: 3cqmin;
+            background: #111820;
+            box-shadow:
+              0 4cqh 12cqh rgba(0, 0, 0, 0.45),
+              inset 0 0 0 0.12cqmin rgba(255, 255, 255, 0.04);
+            perspective: 80cqmin;
+          }
+
+          .atr-content {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            padding: 8cqw;
+            background:
+              radial-gradient(
+                circle at 50% 45%,
+                color-mix(in srgb, var(--atr-accent) 24%, transparent),
+                transparent 48%
+              ),
+              linear-gradient(145deg, #17212c, #0c1219);
+            transform-origin: 50% 50%;
+          }
+
+          .atr-label {
+            max-width: 76cqw;
+            color: #f8fafc;
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: clamp(24px, 10cqmin, 112px);
+            font-weight: 760;
+            line-height: 0.96;
+            letter-spacing: -0.045em;
+            text-align: center;
+            text-wrap: balance;
+            text-shadow: 0 0 4cqmin color-mix(in srgb, var(--atr-accent) 28%, transparent);
+          }
+
+          .atr-grid {
+            --atr-columns: 24;
+            --atr-rows: 14;
+            position: absolute;
+            inset: 0;
+            z-index: 2;
+            display: grid;
+            grid-template-columns: repeat(var(--atr-columns), 1fr);
+            grid-template-rows: repeat(var(--atr-rows), 1fr);
+            overflow: hidden;
+            background: #0b1016;
+            transform-style: preserve-3d;
+          }
+
+          .atr-cell {
+            display: grid;
+            place-items: center;
+            min-width: 0;
+            min-height: 0;
+            overflow: hidden;
+            border-right: 0.06cqmin solid rgba(148, 163, 184, 0.08);
+            border-bottom: 0.06cqmin solid rgba(148, 163, 184, 0.08);
+            background: color-mix(in srgb, #111820 94%, var(--atr-accent));
+            color: color-mix(in srgb, var(--atr-accent) 72%, #dbeafe);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
+            font-size: clamp(7px, 2.35cqmin, 22px);
+            font-weight: 650;
+            line-height: 1;
+            transform-origin: 50% 50%;
+            backface-visibility: hidden;
+            will-change: transform, opacity;
+          }
+
+          .atr-path-layer {
+            position: absolute;
+            inset: 0;
+            z-index: 3;
+            width: 100%;
+            height: 100%;
+            overflow: visible;
+          }
+
+          .atr-path-guide {
+            fill: none;
+            stroke: color-mix(in srgb, var(--atr-accent) 34%, transparent);
+            stroke-width: 2;
+            stroke-linecap: round;
+            stroke-dasharray: 3 14;
+          }
+
+          .atr-actor-halo {
+            fill: color-mix(in srgb, var(--atr-accent) 22%, transparent);
+          }
+
+          .atr-actor-core {
+            fill: #f8fafc;
+            stroke: var(--atr-accent);
+            stroke-width: 7;
+            filter: drop-shadow(0 0 18px var(--atr-accent));
+          }
+        </style>
+
+        <div
+          id="ascii-trail-reveal-clip"
+          class="atr-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="atr-panel">
+            <div class="atr-content">
+              <div class="atr-label"></div>
+            </div>
+            <div class="atr-grid" aria-hidden="true"></div>
+            <svg
+              class="atr-path-layer"
+              viewBox="0 0 1000 600"
+              preserveAspectRatio="none"
+              aria-hidden="true"
+            >
+              <path class="atr-path-guide"></path>
+              <g id="ascii-trail-reveal-actor">
+                <circle class="atr-actor-halo" r="42"></circle>
+                <circle class="atr-actor-core" r="13"></circle>
+              </g>
+            </svg>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var content = root.querySelector(".atr-content");
+            var label = root.querySelector(".atr-label");
+            var grid = root.querySelector(".atr-grid");
+            var guide = root.querySelector(".atr-path-guide");
+            var actor = root.querySelector("#ascii-trail-reveal-actor");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var labelText = vars.label == null ? "The reveal" : String(vars.label);
+            var accent = vars.accent === "blue" || vars.accent === "violet" ? vars.accent : "green";
+            var trailWidth = vars.trail_width === "wide" ? "wide" : "narrow";
+            var accentColors = {
+              green: "var(--brand, #4ade80)",
+              blue: "var(--accent, #38bdf8)",
+              violet: "var(--accent-2, #a78bfa)",
+            };
+
+            label.textContent = labelText;
+            root.style.setProperty("--atr-accent", accentColors[accent]);
+
+            var COLS = 24;
+            var ROWS = 14;
+            var GLYPHS = " .:-=+*#%@01/\\<>[]{}";
+            var PATH_POINTS = [
+              [-80, 460],
+              [340, 460],
+              [660, 140],
+              [1080, 140],
+            ];
+            var cells = [];
+
+            function sCurvePoint(progress) {
+              var inverse = 1 - progress;
+              var startWeight = inverse * inverse * inverse;
+              var firstWeight = 3 * inverse * inverse * progress;
+              var secondWeight = 3 * inverse * progress * progress;
+              var endWeight = progress * progress * progress;
+              return {
+                x:
+                  startWeight * PATH_POINTS[0][0] +
+                  firstWeight * PATH_POINTS[1][0] +
+                  secondWeight * PATH_POINTS[2][0] +
+                  endWeight * PATH_POINTS[3][0],
+                y:
+                  startWeight * PATH_POINTS[0][1] +
+                  firstWeight * PATH_POINTS[1][1] +
+                  secondWeight * PATH_POINTS[2][1] +
+                  endWeight * PATH_POINTS[3][1],
+              };
+            }
+
+            guide.setAttribute(
+              "d",
+              "M " +
+                PATH_POINTS[0].join(" ") +
+                " C " +
+                PATH_POINTS.slice(1)
+                  .map(function (point) {
+                    return point.join(" ");
+                  })
+                  .join(" "),
+            );
+
+            for (var row = 0; row < ROWS; row += 1) {
+              for (var column = 0; column < COLS; column += 1) {
+                var index = row * COLS + column;
+                var cell = document.createElement("span");
+                var glyphIndex = (index * 17 + row * 11 + column * 7) % GLYPHS.length;
+                cell.className = "atr-cell";
+                cell.textContent = GLYPHS.charAt(glyphIndex);
+                grid.appendChild(cell);
+                cells.push({ element: cell, row: row, column: column, index: index });
+              }
+            }
+
+            var IN_BASE = 3.2;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var IN = Math.min(IN_BASE, duration);
+            var HOLD = Math.max(0, duration - IN);
+            var phaseScale = IN / IN_BASE;
+            var actorState = { progress: 0 };
+
+            function updateActor() {
+              var point = sCurvePoint(actorState.progress);
+              actor.setAttribute("transform", "translate(" + point.x + " " + point.y + ")");
+            }
+
+            gsap.set(content, { scale: 0.985 });
+            gsap.set(guide, { opacity: 0 });
+            gsap.set(actor, { opacity: 0 });
+            updateActor();
+
+            var tl = gsap.timeline({ paused: true });
+
+            tl.to(content, { scale: 1, duration: IN, ease: "power2.out" }, 0);
+            tl.to(
+              guide,
+              { opacity: 0.72, duration: 0.24 * phaseScale, ease: "power2.out" },
+              0.18 * phaseScale,
+            );
+            tl.to(
+              actor,
+              { opacity: 1, duration: 0.24 * phaseScale, ease: "power2.out" },
+              0.22 * phaseScale,
+            );
+            tl.to(
+              actorState,
+              {
+                progress: 1,
+                duration: 2.35 * phaseScale,
+                ease: "power2.out",
+                onUpdate: updateActor,
+              },
+              0.34 * phaseScale,
+            );
+
+            cells.forEach(function (cellData) {
+              var progress = (cellData.column + 0.5) / COLS;
+              var pathPoint = sCurvePoint(progress);
+              var cellY = ((cellData.row + 0.5) / ROWS) * 600;
+              var distanceFromPath = Math.abs(cellY - pathPoint.y) / 600;
+              var distanceLag = distanceFromPath * (trailWidth === "wide" ? 0.5 : 0.8);
+              var indexJitter = ((cellData.index * 37) % 11) * 0.009;
+              var revealAt = (0.42 + progress * 1.92 + distanceLag + indexJitter) * phaseScale;
+              var flipDuration = (0.2 + ((cellData.index * 13) % 5) * 0.018) * phaseScale;
+
+              tl.to(
+                cellData.element,
+                {
+                  rotationY: 88,
+                  scaleX: 0.3,
+                  opacity: 0,
+                  duration: flipDuration,
+                  ease: "power2.in",
+                },
+                revealAt,
+              );
+            });
+
+            tl.to(
+              guide,
+              { opacity: 0, duration: 0.24 * phaseScale, ease: "power2.in" },
+              2.82 * phaseScale,
+            );
+            tl.to(
+              actor,
+              { opacity: 0, duration: 0.24 * phaseScale, ease: "power2.in" },
+              2.92 * phaseScale,
+            );
+
+            if (HOLD > 0) {
+              tl.to(
+                content,
+                {
+                  scale: 1.008,
+                  duration: HOLD / 2,
+                  ease: "sine.inOut",
+                  yoyo: true,
+                  repeat: 1,
+                },
+                IN,
+              );
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["ascii-trail-reveal"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/ascii-trail-reveal/demo.html b/registry/components/ascii-trail-reveal/demo.html
new file mode 100644
index 0000000000..537bc94e74
--- /dev/null
+++ b/registry/components/ascii-trail-reveal/demo.html
@@ -0,0 +1,87 @@
+<!doctype html>
+<!--
+  ascii-trail-reveal demo. This standalone composition mounts the primitive
+  through data-composition-src. Non-default label, accent, and trail width
+  values prove that all variables flow through the elastic host box.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>ASCII Trail Reveal Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0b0c0e;
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --surface: #151a22;
+        --border: #334155;
+        --brand: #4ade80;
+        --accent: #a78bfa;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-body: Inter, system-ui, sans-serif;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(circle at 50% 45%, #171b24 0%, #0b0c0e 68%);
+      }
+
+      .mount-card {
+        width: 82%;
+        height: 72%;
+        left: 9%;
+        top: 14%;
+        overflow: hidden;
+        container-type: size;
+        border-radius: 32px;
+        background: #10141a;
+        box-shadow: 0 50px 110px rgba(0, 0, 0, 0.48);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="ascii-trail-reveal-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="ascii-trail-reveal-mount"
+        class="mount-card clip"
+        data-composition-id="ascii-trail-reveal"
+        data-composition-src="./ascii-trail-reveal.html"
+        data-variable-values='{"label":"Signal restored","accent":"violet","trail_width":"wide"}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="1574"
+        data-height="778"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["ascii-trail-reveal-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/ascii-trail-reveal/registry-item.json b/registry/components/ascii-trail-reveal/registry-item.json
new file mode 100644
index 0000000000..1aad7d65b6
--- /dev/null
+++ b/registry/components/ascii-trail-reveal/registry-item.json
@@ -0,0 +1,55 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "ascii-trail-reveal",
+  "type": "hyperframes:component",
+  "title": "ASCII Trail Reveal",
+  "description": "An authored S-curve sweeps through a deterministic ASCII grid, flipping cells away to reveal a labeled panel.",
+  "tags": ["motion-primitive", "intro", "reveal", "ascii", "trail", "grid"],
+  "jobs": ["reveal"],
+  "family": "intros-and-reveals",
+  "profile": "trail",
+  "evidence": "Wave H U24 ascii-trail-reveal design research unit",
+  "syncPoints": [{ "id": "reveal-complete", "phase": "in", "offset": 3.2 }],
+  "files": [
+    {
+      "path": "ascii-trail-reveal.html",
+      "target": "compositions/components/ascii-trail-reveal.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "label",
+      "type": "string",
+      "role": "content",
+      "label": "Panel label",
+      "description": "Text shown on the revealed panel.",
+      "default": "The reveal"
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Color used by the trail and revealed panel.",
+      "default": "green",
+      "options": [
+        { "value": "green", "label": "Green" },
+        { "value": "blue", "label": "Blue" },
+        { "value": "violet", "label": "Violet" }
+      ]
+    },
+    {
+      "id": "trail_width",
+      "type": "enum",
+      "role": "layout",
+      "label": "Trail width",
+      "description": "Width of the cell reveal tail around the authored path.",
+      "default": "narrow",
+      "options": [
+        { "value": "narrow", "label": "Narrow" },
+        { "value": "wide", "label": "Wide" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/aurora-drift/aurora-drift.html b/registry/components/aurora-drift/aurora-drift.html
new file mode 100644
index 0000000000..49ce87c211
--- /dev/null
+++ b/registry/components/aurora-drift/aurora-drift.html
@@ -0,0 +1,235 @@
+<!doctype html>
+<!--
+  aurora-drift: HyperFrames video primitive (backgrounds / ambient)
+
+  Concept: three oversized, softly blurred accent-derived fields drift over
+  a deep base beneath a faint vignette. The motion stays slow and restrained,
+  giving a scene color and depth without competing with foreground content.
+
+  Variables:
+    - accent (green | blue | violet, default green): selects the source token
+      from which the three related aurora hues are mixed.
+    - mood (deep | bright, default deep): controls base luminance and field
+      strength while preserving the same motion.
+
+  Envelope: IN = 0, HOLD = the full elastic duration, OUT = 0. The phase proxy
+  advances through exactly one whole sine cycle during HOLD. A longer mount
+  stretches only that ambient cycle.
+
+  Loop invariant: phase 2 * PI is normalized to phase 0 before any transform
+  is calculated, so every blob has exactly the same pose at t=0 and t=duration.
+
+  Sound: none.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, has no data-width or data-height,
+  and registers one paused timeline under the hardcoded aurora-drift id.
+-->
+<html
+  lang="en"
+  data-composition-id="aurora-drift"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Accent token family used to derive the aurora hues.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "mood", "type": "enum", "role": "style", "label": "Mood", "description": "Base luminance and aurora field strength.", "default": "deep", "options": [{ "value": "deep", "label": "Deep" }, { "value": "bright", "label": "Bright" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Aurora Drift</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="aurora-drift" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            pointer-events: none;
+          }
+
+          .ad-clip,
+          .ad-base,
+          .ad-vignette {
+            position: absolute;
+            inset: 0;
+          }
+
+          .ad-clip {
+            overflow: hidden;
+          }
+
+          .ad-base {
+            background:
+              radial-gradient(
+                ellipse at 50% 42%,
+                color-mix(in srgb, var(--ad-color) 8%, var(--ad-base)) 0%,
+                var(--ad-base) 68%
+              ),
+              var(--ad-base);
+          }
+
+          .ad-blob {
+            --ad-blob-opacity: 1;
+            position: absolute;
+            display: block;
+            border-radius: 50%;
+            filter: blur(12cqmin) saturate(0.84) opacity(var(--ad-blob-opacity));
+            mix-blend-mode: screen;
+            opacity: var(--ad-strength);
+            will-change: transform;
+          }
+
+          .ad-blob-a {
+            width: 76cqw;
+            height: 72cqh;
+            left: -18cqw;
+            top: -22cqh;
+            background: radial-gradient(
+              ellipse at center,
+              color-mix(in srgb, var(--ad-color) 88%, white) 0%,
+              color-mix(in srgb, var(--ad-color) 42%, transparent) 48%,
+              transparent 76%
+            );
+          }
+
+          .ad-blob-b {
+            width: 84cqw;
+            height: 78cqh;
+            right: -28cqw;
+            top: -2cqh;
+            --ad-blob-opacity: 0.82;
+            background: radial-gradient(
+              ellipse at center,
+              color-mix(in srgb, var(--ad-color) 72%, var(--accent, #38bdf8)) 0%,
+              color-mix(in srgb, var(--ad-color) 36%, transparent) 52%,
+              transparent 78%
+            );
+          }
+
+          .ad-blob-c {
+            width: 72cqw;
+            height: 74cqh;
+            left: 18cqw;
+            bottom: -34cqh;
+            --ad-blob-opacity: 0.68;
+            background: radial-gradient(
+              ellipse at center,
+              color-mix(in srgb, var(--ad-color) 72%, var(--accent-2, #a78bfa)) 0%,
+              color-mix(in srgb, var(--ad-color) 32%, transparent) 50%,
+              transparent 76%
+            );
+          }
+
+          .ad-vignette {
+            background: radial-gradient(
+              ellipse at center,
+              transparent 35%,
+              rgb(0 0 0 / var(--ad-vignette)) 100%
+            );
+          }
+        </style>
+
+        <div
+          id="aurora-drift-clip"
+          class="ad-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="ad-base"></div>
+          <div class="ad-blob ad-blob-a"></div>
+          <div class="ad-blob ad-blob-b"></div>
+          <div class="ad-blob ad-blob-c"></div>
+          <div class="ad-vignette"></div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            // Invalid enum overrides return to their declared defaults.
+            var accentTokens = {
+              green: "var(--brand, #34d399)",
+              blue: "var(--accent, #38bdf8)",
+              violet: "var(--accent-2, #a78bfa)",
+            };
+            var moodStyles = {
+              deep: { base: "#050711", strength: "0.42", vignette: "0.62" },
+              bright: { base: "#111827", strength: "0.56", vignette: "0.46" },
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentTokens, vars.accent)
+              ? vars.accent
+              : "green";
+            var mood = vars.mood === "bright" ? "bright" : "deep";
+            var moodStyle = moodStyles[mood];
+
+            root.style.setProperty("--ad-color", accentTokens[accent]);
+            root.style.setProperty("--ad-base", moodStyle.base);
+            root.style.setProperty("--ad-strength", moodStyle.strength);
+            root.style.setProperty("--ad-vignette", moodStyle.vignette);
+
+            var TAU = Math.PI * 2;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var state = { phase: 0 };
+            var paths = [
+              { element: root.querySelector(".ad-blob-a"), offset: 0, x: 4.6, y: 3.2 },
+              {
+                element: root.querySelector(".ad-blob-b"),
+                offset: TAU / 3,
+                x: 4.1,
+                y: 3.8,
+              },
+              {
+                element: root.querySelector(".ad-blob-c"),
+                offset: (TAU * 2) / 3,
+                x: 3.6,
+                y: 3,
+              },
+            ];
+
+            function renderPose() {
+              // The endpoint uses literal phase zero, avoiding the floating
+              // point residue from Math.sin(2 * PI).
+              var phase = state.phase === TAU ? 0 : state.phase;
+              paths.forEach(function (path) {
+                gsap.set(path.element, {
+                  x: Math.sin(phase + path.offset) * path.x + "cqw",
+                  y: Math.sin(phase + path.offset + Math.PI / 2) * path.y + "cqh",
+                });
+              });
+            }
+
+            var tl = gsap.timeline({ paused: true });
+
+            // HOLD: uniform phase travel produces smooth sine motion. Exactly
+            // one whole cycle is completed at the duration boundary.
+            tl.to(state, { phase: TAU, duration: duration, ease: "none", onUpdate: renderPose }, 0);
+
+            renderPose();
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines["aurora-drift"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/aurora-drift/demo.html b/registry/components/aurora-drift/demo.html
new file mode 100644
index 0000000000..7a39db7e39
--- /dev/null
+++ b/registry/components/aurora-drift/demo.html
@@ -0,0 +1,86 @@
+<!doctype html>
+<!--
+  aurora-drift demo. This standalone composition mounts aurora-drift.html
+  through data-composition-src. The bright violet overrides prove both
+  variables flow through the mount while the primitive stays host-sized.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Aurora Drift Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0b0c0e;
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --surface: #17191f;
+        --fg: #f8fafc;
+        --muted: #94a3b8;
+        --accent: #38bdf8;
+        --accent-2: #a78bfa;
+        --brand: #34d399;
+        --border: #334155;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 42%, #17191f 0%, #0b0c0e 72%);
+      }
+
+      .mount-card {
+        width: 75%;
+        height: 70%;
+        left: 12.5%;
+        top: 15%;
+        overflow: hidden;
+        border: 1px solid rgb(255 255 255 / 0.14);
+        border-radius: 28px;
+        background: #080a12;
+        box-shadow: 0 5cqh 14cqh rgb(0 0 0 / 0.52);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="aurora-drift-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="aurora-drift-mount"
+        class="mount-card clip"
+        data-composition-id="aurora-drift"
+        data-composition-src="./aurora-drift.html"
+        data-variable-values='{"accent":"violet","mood":"bright"}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="1440"
+        data-height="756"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["aurora-drift-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/aurora-drift/registry-item.json b/registry/components/aurora-drift/registry-item.json
new file mode 100644
index 0000000000..199c75b20d
--- /dev/null
+++ b/registry/components/aurora-drift/registry-item.json
@@ -0,0 +1,46 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "aurora-drift",
+  "type": "hyperframes:component",
+  "title": "Aurora Drift",
+  "description": "Three soft accent-derived aurora fields drift in an exact ambient loop over a deep base and faint vignette.",
+  "tags": ["motion-primitive", "background", "aurora", "gradient", "ambient", "loopable"],
+  "jobs": ["orient"],
+  "family": "backgrounds",
+  "profile": "ambient",
+  "evidence": "Wave G U19 aurora-drift specification",
+  "files": [
+    {
+      "path": "aurora-drift.html",
+      "target": "compositions/components/aurora-drift.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Accent token family used to derive the aurora hues.",
+      "default": "green",
+      "options": [
+        { "value": "green", "label": "Green" },
+        { "value": "blue", "label": "Blue" },
+        { "value": "violet", "label": "Violet" }
+      ]
+    },
+    {
+      "id": "mood",
+      "type": "enum",
+      "role": "style",
+      "label": "Mood",
+      "description": "Base luminance and aurora field strength.",
+      "default": "deep",
+      "options": [
+        { "value": "deep", "label": "Deep" },
+        { "value": "bright", "label": "Bright" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/avatar-cloud/avatar-cloud.html b/registry/components/avatar-cloud/avatar-cloud.html
new file mode 100644
index 0000000000..05a1820d86
--- /dev/null
+++ b/registry/components/avatar-cloud/avatar-cloud.html
@@ -0,0 +1,470 @@
+<!doctype html>
+<!--
+  avatar-cloud: HyperFrames video primitive (effects / holdable / prove)
+
+  Concept: lettermark avatars populate a loose elliptical cloud around a
+  central proof label. Fine SVG links draw from the hub to every avatar, plus
+  selected avatar-to-avatar edges, so the beat communicates connection rather
+  than quantity alone. One mechanic, one job: prove community participation.
+
+  Compiled-from evidence: consumer-sim fixture plus the
+  avatar-cloud-network animation rule. The rule establishes the elliptical
+  cluster, layered hub, staggered avatar arrival, outward SVG link draw, and
+  readable climax dwell.
+
+  Use when: a scene needs to show an active builder, customer, creator, or
+  collaborator community without external photos or brand assets.
+
+  Variables (declared in data-composition-variables below):
+    - avatarCount (number, default 10, range 6 to 16): visible lettermarks.
+    - showLinks ("yes" | "no", default "yes"): include network links.
+    - label (string, default "50k builders"): proof copy in the center hub.
+
+  Envelope (fixed IN/OUT, elastic HOLD only, never gsap.timeScale()):
+    IN_BASE  = 2.20s  hub settles, avatars cascade in, then links draw.
+    HOLD     = elastic = max(0, D - (IN_BASE + OUT_BASE)); deterministic,
+               out-of-phase sine drift keeps the formed network alive.
+    OUT_BASE = 0.50s  the complete proof beat accelerates into a clean fade.
+    If D is shorter than IN_BASE + OUT_BASE, IN and OUT scale together so
+    IN + OUT equals D and HOLD equals 0.
+
+  Sync point: network-formed at 2.15s into IN. It is a fixed offset before the
+  elastic HOLD and scales proportionally only when the envelope is compressed.
+
+  Sound cue: none. The distributed community assembly has no truthful single
+  impact, so this primitive does not dispatch an hf:sfx event.
+
+  Mount contract: this file is a mountable sub-composition. A host loads it via
+  data-composition-src, and the runtime clones only <template> contents. Styles,
+  markup, GSAP, and registration therefore live inside <template>. #root fills
+  the host with inset:0 and container-type:size and has no data-width or
+  data-height. The hardcoded id "avatar-cloud" matches the host id and timeline
+  key after mount flattening. Variables come from
+  window.__hyperframes.getVariables(), which merges declarations with host
+  data-variable-values overrides.
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "avatarCount", "type": "number", "role": "layout", "label": "Avatar count", "description": "Number of lettermark avatars in the network cloud.", "default": 10, "min": 6, "max": 16, "step": 1 },
+    { "id": "showLinks", "type": "enum", "role": "content", "label": "Show links", "description": "Show or hide the connecting network lines.", "default": "yes", "options": [{ "value": "yes", "label": "Yes" }, { "value": "no", "label": "No" }] },
+    { "id": "label", "type": "string", "role": "content", "label": "Proof label", "description": "Community proof copy shown in the center hub.", "default": "50k builders" }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Avatar Cloud</title>
+    <!-- Metadata only. Mounting discards everything outside <template>. -->
+  </head>
+  <body>
+    <template>
+      <div
+        id="root"
+        data-composition-id="avatar-cloud"
+        data-start="0"
+        data-duration="5"
+        data-fps="30"
+      >
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          /* INVARIANT: the host owns the box. The primitive owns one isolated,
+             position-blind size container and no viewport-relative geometry. */
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+          }
+
+          .ac-clip,
+          .ac-stage,
+          .ac-avatar-layer,
+          .ac-links {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+          }
+
+          .ac-clip {
+            overflow: hidden;
+            background:
+              radial-gradient(
+                ellipse at 50% 47.5%,
+                color-mix(in srgb, var(--fg, #f8fafc) 8%, transparent),
+                transparent 48%
+              ),
+              var(--bg, #0b0c10);
+          }
+
+          .ac-stage {
+            overflow: hidden;
+            transform-origin: center;
+          }
+
+          /* EDIT ZONE: lines use the same token pair as the avatars and hub.
+             The SVG viewBox owns all endpoints, so links and positions cannot
+             derive independently. */
+          .ac-links {
+            z-index: 1;
+            overflow: visible;
+            pointer-events: none;
+          }
+
+          .ac-link {
+            fill: none;
+            stroke: color-mix(in srgb, var(--fg, #f8fafc) 22%, transparent);
+            stroke-width: 1.8;
+            vector-effect: non-scaling-stroke;
+          }
+
+          .ac-link-secondary {
+            stroke: color-mix(in srgb, var(--fg, #f8fafc) 14%, transparent);
+            stroke-width: 1.2;
+          }
+
+          .ac-avatar-layer {
+            z-index: 2;
+          }
+
+          .ac-avatar-position {
+            position: absolute;
+            transform: translate(-50%, -50%);
+          }
+
+          .ac-avatar {
+            display: grid;
+            place-items: center;
+            width: min(calc(var(--ac-size) * 1cqw), calc(var(--ac-size) * 1.65cqh));
+            aspect-ratio: 1;
+            border: 0.16cqw solid color-mix(in srgb, var(--fg, #f8fafc) 32%, transparent);
+            border-radius: 999cqw;
+            background: var(--ac-color, color-mix(in srgb, var(--fg, #f8fafc) 45%, transparent));
+            color: var(--bg, #0b0c10);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: min(calc(var(--ac-size) * 0.35cqw), calc(var(--ac-size) * 0.58cqh));
+            font-weight: 780;
+            letter-spacing: -0.04em;
+            line-height: 1;
+            box-shadow:
+              0 1.2cqh 2.8cqh color-mix(in srgb, var(--bg, #0b0c10) 48%, transparent),
+              inset 0 0.12cqw 0 color-mix(in srgb, var(--fg, #f8fafc) 26%, transparent);
+            will-change: transform, opacity;
+          }
+
+          /* Tones are depth steps of the ink, not hues: near faces sit at L1,
+             mid at L2, far at L3. Value alone separates the cloud. */
+          .ac-avatar[data-tone="0"] {
+            --ac-color: color-mix(in srgb, var(--fg, #f8fafc) 72%, transparent);
+          }
+
+          .ac-avatar[data-tone="1"] {
+            --ac-color: color-mix(in srgb, var(--fg, #f8fafc) 45%, transparent);
+          }
+
+          .ac-avatar[data-tone="2"] {
+            --ac-color: color-mix(in srgb, var(--fg, #f8fafc) 72%, transparent);
+          }
+
+          .ac-avatar[data-tone="3"] {
+            --ac-color: color-mix(in srgb, var(--fg, #f8fafc) 30%, transparent);
+          }
+
+          .ac-avatar[data-tone="4"] {
+            --ac-color: color-mix(in srgb, var(--fg, #f8fafc) 45%, transparent);
+          }
+
+          .ac-hub {
+            position: absolute;
+            left: 50%;
+            top: 47.5%;
+            z-index: 5;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            min-width: 24cqw;
+            max-width: 48cqw;
+            min-height: 16cqh;
+            padding: var(--space-2, 2cqh) var(--space-3, 3cqw);
+            overflow: hidden;
+            border: 0.16cqw solid color-mix(in srgb, var(--border, #334155) 82%, transparent);
+            border-radius: var(--radius, 2.4cqw);
+            background: var(--surface, #1e293b);
+            box-shadow:
+              0 2cqh 5cqh color-mix(in srgb, var(--bg, #0b0c10) 56%, transparent),
+              inset 0 0.14cqw 0 color-mix(in srgb, var(--fg, #f8fafc) 18%, transparent);
+            transform: translate(-50%, -50%);
+            transform-origin: center;
+          }
+
+          .ac-kicker {
+            color: var(--muted, #8b93a3);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: min(1.6cqw, 2.8cqh);
+            font-weight: 720;
+            letter-spacing: 0.16em;
+            line-height: 1;
+            text-transform: uppercase;
+          }
+
+          .ac-label {
+            max-width: 40cqw;
+            overflow: hidden;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: min(5.2cqw, 9cqh);
+            font-weight: 820;
+            letter-spacing: -0.045em;
+            line-height: 1.05;
+            text-align: center;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+        </style>
+
+        <div
+          id="avatar-cloud-clip"
+          class="ac-clip clip"
+          data-start="0"
+          data-duration="5"
+          data-track-index="0"
+        >
+          <section class="ac-stage" aria-label="Community network proof">
+            <svg
+              class="ac-links"
+              viewBox="0 0 1000 600"
+              preserveAspectRatio="none"
+              aria-hidden="true"
+              focusable="false"
+            ></svg>
+            <div class="ac-avatar-layer" aria-hidden="true"></div>
+            <div class="ac-hub">
+              <span class="ac-kicker">Community</span>
+              <span class="ac-label"></span>
+            </div>
+          </section>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.currentScript.closest("#root") || document.getElementById("root");
+            var compositionId = "avatar-cloud";
+            var stage = root.querySelector(".ac-stage");
+            var linksLayer = root.querySelector(".ac-links");
+            var avatarLayer = root.querySelector(".ac-avatar-layer");
+            var hub = root.querySelector(".ac-hub");
+            var labelElement = root.querySelector(".ac-label");
+
+            // EDIT ZONE: getVariables is the only owner of declared defaults
+            // plus host overrides. Values are normalized exactly once here.
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var rawCount = Number(vars.avatarCount);
+            var avatarCount = Number.isFinite(rawCount) ? Math.round(rawCount) : 10;
+            avatarCount = Math.max(6, Math.min(16, avatarCount));
+            var showLinks = vars.showLinks === "no" ? "no" : "yes";
+            var label = vars.label == null ? "50k builders" : String(vars.label);
+            labelElement.textContent = label;
+
+            // One normalized coordinate table owns both DOM placement and SVG
+            // endpoints. Index-based sine offsets make the ellipse loose while
+            // remaining identical under every seek and render.
+            var CENTER = { x: 500, y: 285 };
+            var positions = [];
+            var avatars = [];
+            var lettermarks = [
+              "AK",
+              "BM",
+              "CR",
+              "DL",
+              "ES",
+              "FT",
+              "GN",
+              "HP",
+              "IV",
+              "JO",
+              "KQ",
+              "LU",
+              "MW",
+              "NX",
+              "OY",
+              "PZ",
+            ];
+            var avatarFragment = document.createDocumentFragment();
+
+            for (var index = 0; index < avatarCount; index += 1) {
+              var angle = -Math.PI / 2 + (index / avatarCount) * Math.PI * 2;
+              var radiusX = 356 + Math.sin((index + 1) * 2.37) * 24;
+              var radiusY = 194 + Math.sin((index + 1) * 1.61) * 18;
+              var x = CENTER.x + Math.cos(angle) * radiusX;
+              var y = CENTER.y + Math.sin(angle) * radiusY;
+              var size = 7.5 + Math.sin((index + 1) * 1.93) * 0.8;
+
+              positions.push({ x: x, y: y });
+
+              var positionElement = document.createElement("div");
+              positionElement.className = "ac-avatar-position";
+              positionElement.style.left = x / 10 + "%";
+              positionElement.style.top = y / 6 + "%";
+
+              var avatar = document.createElement("div");
+              avatar.className = "ac-avatar";
+              avatar.dataset.tone = String(index % 5);
+              avatar.style.setProperty("--ac-size", size.toFixed(2));
+              avatar.textContent = lettermarks[index];
+              positionElement.appendChild(avatar);
+              avatarFragment.appendChild(positionElement);
+              avatars.push(avatar);
+            }
+
+            avatarLayer.replaceChildren(avatarFragment);
+
+            var lines = [];
+
+            function appendLine(from, to, secondary) {
+              var line = document.createElementNS("http://www.w3.org/2000/svg", "line");
+              var length = Math.hypot(to.x - from.x, to.y - from.y);
+              line.setAttribute("x1", String(from.x));
+              line.setAttribute("y1", String(from.y));
+              line.setAttribute("x2", String(to.x));
+              line.setAttribute("y2", String(to.y));
+              line.setAttribute("class", secondary ? "ac-link ac-link-secondary" : "ac-link");
+              line.style.strokeDasharray = length + " " + length;
+              line.dataset.length = String(length);
+              linksLayer.appendChild(line);
+              lines.push(line);
+            }
+
+            if (showLinks === "yes") {
+              positions.forEach(function (position) {
+                appendLine(CENTER, position, false);
+              });
+
+              positions.forEach(function (position, positionIndex) {
+                if (positionIndex % 3 === 0) {
+                  appendLine(position, positions[(positionIndex + 2) % avatarCount], true);
+                }
+              });
+            }
+
+            // RETIME RANGE: these values own the complete lifecycle. The link
+            // wave fits the maximum 22-line network before the fixed sync point.
+            var IN_BASE = 2.2;
+            var OUT_BASE = 0.5;
+            var HUB_START_BASE = 0.05;
+            var HUB_DURATION_BASE = 0.5;
+            var AVATAR_START_BASE = 0.24;
+            var AVATAR_DURATION_BASE = 0.5;
+            var AVATAR_STAGGER_BASE = 0.055;
+            var LINES_START_BASE = 1.02;
+            var LINES_DURATION_BASE = 0.55;
+            var LINE_STAGGER_BASE = 0.025;
+
+            var durationValue = Number(root.dataset.duration);
+            var duration = Number.isFinite(durationValue) && durationValue > 0 ? durationValue : 5;
+            var envelopeScale = duration < IN_BASE + OUT_BASE ? duration / (IN_BASE + OUT_BASE) : 1;
+            var IN = IN_BASE * envelopeScale;
+            var OUT = OUT_BASE * envelopeScale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var HOLD_START = IN;
+            var OUT_START = IN + HOLD;
+            var HUB_START = HUB_START_BASE * envelopeScale;
+            var HUB_DURATION = HUB_DURATION_BASE * envelopeScale;
+            var AVATAR_START = AVATAR_START_BASE * envelopeScale;
+            var AVATAR_DURATION = AVATAR_DURATION_BASE * envelopeScale;
+            var AVATAR_STAGGER = AVATAR_STAGGER_BASE * envelopeScale;
+            var LINES_START = LINES_START_BASE * envelopeScale;
+            var LINES_DURATION = LINES_DURATION_BASE * envelopeScale;
+            var LINE_STAGGER = LINE_STAGGER_BASE * envelopeScale;
+
+            gsap.set(stage, { opacity: 1, scale: 1 });
+            gsap.set(hub, { opacity: 0, scale: 0.94 });
+            gsap.set(avatars, { opacity: 0, scale: 0.92, x: 0, y: 0 });
+            lines.forEach(function (line) {
+              gsap.set(line, { opacity: 0, strokeDashoffset: Number(line.dataset.length) });
+            });
+
+            var timeline = gsap.timeline({ paused: true });
+
+            // IN: --ease-standard maps to GSAP power2.out in the shared easing
+            // vocabulary. No entrance starts at scale zero.
+            timeline.to(
+              hub,
+              { opacity: 1, scale: 1, duration: HUB_DURATION, ease: "power2.out" },
+              HUB_START,
+            );
+            timeline.to(
+              avatars,
+              {
+                opacity: 1,
+                scale: 1,
+                duration: AVATAR_DURATION,
+                ease: "power2.out",
+                stagger: { each: AVATAR_STAGGER, from: "start" },
+              },
+              AVATAR_START,
+            );
+
+            lines.forEach(function (line, lineIndex) {
+              timeline.to(
+                line,
+                {
+                  opacity: 1,
+                  strokeDashoffset: 0,
+                  duration: LINES_DURATION,
+                  ease: "power2.out",
+                },
+                LINES_START + lineIndex * LINE_STAGGER,
+              );
+            });
+
+            // HOLD: deterministic index-derived endpoints with --ease-drift's
+            // sine.inOut curve. One finite leg fills the elastic hold exactly.
+            if (HOLD > 0) {
+              avatars.forEach(function (avatar, avatarIndex) {
+                var driftX = Math.sin((avatarIndex + 1) * 1.73) * 0.85;
+                var driftY = Math.sin((avatarIndex + 1) * 2.41) * 1.15;
+                timeline.fromTo(
+                  avatar,
+                  { x: -driftX + "cqw", y: -driftY + "cqh" },
+                  {
+                    x: driftX + "cqw",
+                    y: driftY + "cqh",
+                    duration: HOLD,
+                    ease: "sine.inOut",
+                    immediateRender: false,
+                  },
+                  HOLD_START,
+                );
+              });
+            }
+
+            // OUT: the complete network leaves once with the asymmetric exit
+            // curve. HOLD motion resolves before this phase begins.
+            timeline.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+
+            timeline.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = timeline;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/avatar-cloud/demo.html b/registry/components/avatar-cloud/demo.html
new file mode 100644
index 0000000000..908306a39a
--- /dev/null
+++ b/registry/components/avatar-cloud/demo.html
@@ -0,0 +1,95 @@
+<!doctype html>
+<!--
+  avatar-cloud: standalone 1920x1080 demo host.
+
+  The demo mounts avatar-cloud.html through data-composition-src. Its explicit
+  host card proves the primitive sizes from the supplied box and that variables
+  cross the mount boundary. It is kept in sync with avatar-cloud.html by hand
+  and is not installed by hyperframes add.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Avatar Cloud - Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #05070d;
+      }
+
+      #root {
+        --bg: #090d18;
+        --surface: #171e31;
+        --fg: #f8fafc;
+        --muted: #94a3b8;
+        --border: #334155;
+        --brand: #7c6cff;
+        --accent: #38bdf8;
+        --radius: 28px;
+        --space-2: 18px;
+        --space-3: 30px;
+        --font-body: Inter, system-ui, sans-serif;
+        --font-display: Inter, system-ui, sans-serif;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 42%, #111a32 0%, #05070d 72%);
+      }
+
+      /* A definite CSS box is required for the mounted primitive's cqw and cqh
+         units. Data dimensions stay aligned for runtime tooling. */
+      .mount-card {
+        width: 76%;
+        height: 72%;
+        left: 12%;
+        top: 14%;
+        overflow: hidden;
+        border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
+        border-radius: var(--radius);
+        box-shadow: 0 42px 110px color-mix(in srgb, var(--bg) 72%, transparent);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="avatar-cloud-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+      data-fps="30"
+    >
+      <div
+        id="avatar-cloud-mount"
+        class="mount-card clip"
+        data-composition-id="avatar-cloud"
+        data-composition-src="./avatar-cloud.html"
+        data-variable-values='{"avatarCount":12,"showLinks":"yes","label":"50k builders"}'
+        data-start="0"
+        data-duration="5"
+        data-track-index="0"
+        data-width="1459"
+        data-height="778"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      // This host has no motion. The mounted primitive owns its timeline.
+      window.__timelines = window.__timelines || {};
+      window.__timelines["avatar-cloud-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/avatar-cloud/registry-item.json b/registry/components/avatar-cloud/registry-item.json
new file mode 100644
index 0000000000..c4741c9e42
--- /dev/null
+++ b/registry/components/avatar-cloud/registry-item.json
@@ -0,0 +1,53 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "avatar-cloud",
+  "type": "hyperframes:component",
+  "title": "Avatar Cloud",
+  "description": "Lettermark avatars populate a loose elliptical cloud while fine SVG links draw between the community and its central proof label.",
+  "tags": ["effects", "avatars", "community", "network", "social-proof", "prove"],
+  "jobs": ["prove"],
+  "family": "effects",
+  "profile": "holdable",
+  "evidence": "consumer-sim fixture + rules avatar-cloud-network",
+  "syncPoints": [{ "id": "network-formed", "phase": "in", "offset": 2.15 }],
+  "files": [
+    {
+      "path": "avatar-cloud.html",
+      "target": "compositions/components/avatar-cloud.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "avatarCount",
+      "type": "number",
+      "role": "layout",
+      "label": "Avatar count",
+      "description": "Number of lettermark avatars in the network cloud.",
+      "default": 10,
+      "min": 6,
+      "max": 16,
+      "step": 1
+    },
+    {
+      "id": "showLinks",
+      "type": "enum",
+      "role": "content",
+      "label": "Show links",
+      "description": "Show or hide the connecting network lines.",
+      "default": "yes",
+      "options": [
+        { "value": "yes", "label": "Yes" },
+        { "value": "no", "label": "No" }
+      ]
+    },
+    {
+      "id": "label",
+      "type": "string",
+      "role": "content",
+      "label": "Proof label",
+      "description": "Community proof copy shown in the center hub.",
+      "default": "50k builders"
+    }
+  ]
+}
diff --git a/registry/components/avatar-group-hover/avatar-group-hover.html b/registry/components/avatar-group-hover/avatar-group-hover.html
new file mode 100644
index 0000000000..0cb2989e0e
--- /dev/null
+++ b/registry/components/avatar-group-hover/avatar-group-hover.html
@@ -0,0 +1,99 @@
+<!--
+  Avatar Group Hover - transitions.dev-inspired primitive for HyperFrames.
+
+  Paste the markup and CSS into a composition. Use the timeline integration
+  note at the bottom as the starting point for deterministic GSAP animation.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result as a custom property
+  the CSS consumes. The timeline recipe below is untouched by them: it still
+  drives one lift offset, and these decide what it lifts.
+
+    - size (small | standard | large, default standard): avatar diameter,
+      42px, 54px or 70px. The initials scale with it.
+    - overlap (tight | standard | loose, default standard): how far each
+      avatar tucks under the one before it, as a share of its own diameter:
+      half, a third, or barely an eighth.
+    - accent (blue | violet | green, default blue): the colour the avatar
+      gradient resolves into out of the shared near-black.
+
+  On every default the result is identical to the original: 54px avatars
+  overlapping by 18px in the blue gradient.
+-->
+
+<div
+  class="hf-transition-avatar-group-hover"
+  data-composition-variables='[
+    { "id": "size", "type": "enum", "role": "style", "label": "Size", "description": "Avatar diameter, with the initials scaling alongside it.", "default": "standard", "options": [{ "value": "small", "label": "Small" }, { "value": "standard", "label": "Standard" }, { "value": "large", "label": "Large" }] },
+    { "id": "overlap", "type": "enum", "role": "style", "label": "Overlap", "description": "How far each avatar tucks under the one before it, as a share of its own diameter.", "default": "standard", "options": [{ "value": "tight", "label": "Tight" }, { "value": "standard", "label": "Standard" }, { "value": "loose", "label": "Loose" }] },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Colour the avatar gradient resolves into.", "default": "blue", "options": [{ "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }, { "value": "green", "label": "Green" }] }
+  ]'
+>
+  <span>A</span><span>B</span><span>C</span><span>D</span>
+</div>
+
+<style>
+  .hf-transition-avatar-group-hover {
+    display: inline-flex;
+    align-items: center;
+    padding-left: var(--hf-avatar-overlap, 18px);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-transition-avatar-group-hover span {
+    display: grid;
+    place-items: center;
+    width: var(--hf-avatar-size, 54px);
+    height: var(--hf-avatar-size, 54px);
+    margin-left: calc(-1 * var(--hf-avatar-overlap, 18px));
+    border: 3px solid #fff;
+    border-radius: 999px;
+    background: linear-gradient(135deg, #111827, var(--hf-avatar-accent, #0ea5e9));
+    color: #fff;
+    font-size: var(--hf-avatar-font, 1em);
+    font-weight: 900;
+    box-shadow: 0 12px 30px rgba(24, 24, 27, 0.18);
+    transform: translateY(var(--hf-avatar-y, 0px));
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    var sizes = { small: 42, standard: 54, large: 70 };
+    var fonts = { small: "0.8em", standard: "1em", large: "1.3em" };
+    // Overlap is a share of the diameter, so the two knobs stay independent.
+    var overlaps = { tight: 0.5, standard: 1 / 3, loose: 0.12 };
+    var accents = { blue: "#0ea5e9", violet: "#a78bfa", green: "#34d399" };
+
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var sizeName = pick(sizes, vars.size, "standard");
+    var overlapName = pick(overlaps, vars.overlap, "standard");
+    var accent = accents[pick(accents, vars.accent, "blue")];
+    var diameter = sizes[sizeName];
+    var overlap = Math.round(diameter * overlaps[overlapName]);
+
+    var roots = document.querySelectorAll(".hf-transition-avatar-group-hover");
+    for (var i = 0; i < roots.length; i += 1) {
+      var style = roots[i].style;
+      style.setProperty("--hf-avatar-size", diameter + "px");
+      style.setProperty("--hf-avatar-font", fonts[sizeName]);
+      style.setProperty("--hf-avatar-overlap", overlap + "px");
+      style.setProperty("--hf-avatar-accent", accent);
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.to('.hf-transition-avatar-group-hover span', { '--hf-avatar-y': '-18px', duration: 0.28, stagger: { each: 0.035, from: 'center' }, ease: 'back.out(1.8)' }, startTime); tl.to('.hf-transition-avatar-group-hover span', { '--hf-avatar-y': '0px', duration: 0.42, stagger: { each: 0.035, from: 'center' }, ease: 'bounce.out' }, startTime + 0.36);
+-->
diff --git a/registry/components/avatar-group-hover/demo.html b/registry/components/avatar-group-hover/demo.html
new file mode 100644
index 0000000000..d36281c4fa
--- /dev/null
+++ b/registry/components/avatar-group-hover/demo.html
@@ -0,0 +1,103 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Avatar Group Hover - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        min-width: 760px;
+        min-height: 480px;
+        padding: 56px;
+        /* ponytail: scale-only fix — GSAP animates the spans inside, not this wrapper */
+        transform: scale(3.5);
+      }
+      .hf-transition-avatar-group-hover {
+        display: inline-flex;
+        align-items: center;
+        padding-left: 18px;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-transition-avatar-group-hover span {
+        display: grid;
+        place-items: center;
+        width: 54px;
+        height: 54px;
+        margin-left: -18px;
+        border: 3px solid #fff;
+        border-radius: 999px;
+        background: linear-gradient(135deg, #111827, #0ea5e9);
+        color: #fff;
+        font-size: 18px;
+        font-weight: 700;
+        letter-spacing: 0.01em;
+        box-shadow: 0 12px 30px rgba(24, 24, 27, 0.18);
+        transform: translateY(var(--hf-avatar-y, 0px));
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="avatar-group-hover-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-transition-avatar-group-hover">
+          <span>A</span><span>B</span><span>C</span><span>D</span>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.to(
+          ".hf-transition-avatar-group-hover span",
+          {
+            "--hf-avatar-y": "-18px",
+            duration: 0.28,
+            stagger: { each: 0.035, from: "center" },
+            ease: "back.out(1.8)",
+          },
+          startTime,
+        );
+        tl.to(
+          ".hf-transition-avatar-group-hover span",
+          {
+            "--hf-avatar-y": "0px",
+            duration: 0.42,
+            stagger: { each: 0.035, from: "center" },
+            ease: "bounce.out",
+          },
+          startTime + 0.36,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["avatar-group-hover-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/avatar-group-hover/registry-item.json b/registry/components/avatar-group-hover/registry-item.json
new file mode 100644
index 0000000000..d770502306
--- /dev/null
+++ b/registry/components/avatar-group-hover/registry-item.json
@@ -0,0 +1,86 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "avatar-group-hover",
+  "type": "hyperframes:component",
+  "title": "Avatar Group Hover",
+  "description": "A distance-falloff avatar group lift with bouncy hover return",
+  "tags": ["video-primitive", "transition-primitive", "transitions-dev-port", "avatar", "hover"],
+  "files": [
+    {
+      "path": "avatar-group-hover.html",
+      "target": "compositions/components/avatar-group-hover.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "size",
+      "type": "enum",
+      "role": "style",
+      "label": "Size",
+      "description": "Avatar diameter, with the initials scaling alongside it.",
+      "default": "standard",
+      "options": [
+        {
+          "value": "small",
+          "label": "Small"
+        },
+        {
+          "value": "standard",
+          "label": "Standard"
+        },
+        {
+          "value": "large",
+          "label": "Large"
+        }
+      ]
+    },
+    {
+      "id": "overlap",
+      "type": "enum",
+      "role": "style",
+      "label": "Overlap",
+      "description": "How far each avatar tucks under the one before it, as a share of its own diameter.",
+      "default": "standard",
+      "options": [
+        {
+          "value": "tight",
+          "label": "Tight"
+        },
+        {
+          "value": "standard",
+          "label": "Standard"
+        },
+        {
+          "value": "loose",
+          "label": "Loose"
+        }
+      ]
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Colour the avatar gradient resolves into.",
+      "default": "blue",
+      "options": [
+        {
+          "value": "blue",
+          "label": "Blue"
+        },
+        {
+          "value": "violet",
+          "label": "Violet"
+        },
+        {
+          "value": "green",
+          "label": "Green"
+        }
+      ]
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/avatar-group-hover.png"
+  }
+}
diff --git a/registry/components/badge-pop/badge-pop.html b/registry/components/badge-pop/badge-pop.html
new file mode 100644
index 0000000000..335dfb37df
--- /dev/null
+++ b/registry/components/badge-pop/badge-pop.html
@@ -0,0 +1,148 @@
+<!--
+  Badge Pop - transitions.dev-inspired primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Use the timeline
+  integration note at the bottom as the starting point for deterministic GSAP
+  animation.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result as a custom property
+  the CSS below consumes, or as the badge text. The timeline recipe at the
+  bottom is untouched by them: it keeps popping the same badge, whatever the
+  badge says and however it is coloured.
+
+    - count (any text up to four characters, default "3"): what the badge
+      reads. Use it to say 1, 12, 99+ or NEW.
+    - accent (red | blue | green | violet, default red): the badge colour
+      family. red is the literal notification convention; the other three ride
+      the composition's own accent, brand and accent-2 tokens and fall back to
+      ink when the composition declares none. All four clear 3:1 against the
+      white count.
+    - surface (light | dark, default light): the chrome of the button and the
+      ring around the badge. light suits bright frames, dark suits dark ones.
+
+  On every default the result is identical to the original: a white bell tile
+  with a red 3 badge.
+-->
+
+<div
+  class="hf-transition-badge-pop"
+  data-composition-variables='[
+    { "id": "count", "type": "string", "role": "style", "label": "Count", "description": "Text shown inside the notification badge, up to four characters.", "default": "3", "maxLength": 4 },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Colour family of the badge.", "default": "red", "options": [{ "value": "red", "label": "Red" }, { "value": "blue", "label": "Blue" }, { "value": "green", "label": "Green" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "surface", "type": "enum", "role": "style", "label": "Surface", "description": "Chrome of the button and the badge ring: light for bright frames, dark for dark ones.", "default": "light", "options": [{ "value": "light", "label": "Light" }, { "value": "dark", "label": "Dark" }] }
+  ]'
+>
+  <button class="hf-transition-badge-button" type="button" aria-label="Notifications">
+    <svg viewBox="0 0 24 24" aria-hidden="true">
+      <path d="M18 8a6 6 0 10-12 0c0 7-3 7-3 7h18s-3 0-3-7" />
+      <path d="M10 20a2 2 0 004 0" />
+    </svg>
+  </button>
+  <span class="hf-transition-badge-count">3</span>
+</div>
+
+<style>
+  .hf-transition-badge-pop {
+    --hf-badge-pop-accent: #ef4444;
+    --hf-badge-pop-surface: #ffffff;
+    --hf-badge-pop-border: #e4e4e7;
+    --hf-badge-pop-ink: #18181b;
+    position: relative;
+    display: inline-grid;
+    place-items: center;
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-transition-badge-button {
+    display: grid;
+    place-items: center;
+    width: 76px;
+    height: 76px;
+    border: 1px solid var(--hf-badge-pop-border);
+    border-radius: 22px;
+    background: var(--hf-badge-pop-surface);
+    color: var(--hf-badge-pop-ink);
+    box-shadow: 0 20px 58px rgba(0, 0, 0, 0.12);
+  }
+  .hf-transition-badge-button svg {
+    width: 30px;
+    height: 30px;
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 2.2;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+  .hf-transition-badge-count {
+    position: absolute;
+    right: -8px;
+    top: -8px;
+    display: grid;
+    place-items: center;
+    min-width: 30px;
+    height: 30px;
+    padding: 0 8px;
+    border: 3px solid var(--hf-badge-pop-surface);
+    border-radius: 999px;
+    background: var(--hf-badge-pop-accent);
+    color: #ffffff;
+    font-size: 13px;
+    font-weight: 900;
+    transform-origin: center;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    // The badge is the one accent-carrying element here. red is the literal
+    // notification convention and stays; the decorative options ride the
+    // composition's own tokens and fall back to ink.
+    var accents = {
+      red: "#ef4444",
+      blue: "var(--accent, #18181b)",
+      green: "var(--brand, #18181b)",
+      violet: "var(--accent-2, #18181b)",
+    };
+    var surfaces = {
+      light: { surface: "#ffffff", border: "#e4e4e7", ink: "#18181b" },
+      dark: { surface: "#101014", border: "#2a2a32", ink: "#fafafa" },
+    };
+
+    var accent = accents[pick(accents, vars.accent, "red")];
+    var surface = surfaces[pick(surfaces, vars.surface, "light")];
+    var count =
+      typeof vars.count === "string" && vars.count.trim() ? vars.count.trim().slice(0, 4) : "3";
+
+    var roots = document.querySelectorAll(".hf-transition-badge-pop");
+    for (var i = 0; i < roots.length; i += 1) {
+      var root = roots[i];
+      root.style.setProperty("--hf-badge-pop-accent", accent);
+      root.style.setProperty("--hf-badge-pop-surface", surface.surface);
+      root.style.setProperty("--hf-badge-pop-border", surface.border);
+      root.style.setProperty("--hf-badge-pop-ink", surface.ink);
+      var label = root.querySelector(".hf-transition-badge-count");
+      if (label) {
+        label.textContent = count;
+      }
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-transition-badge-button', { y: 18, opacity: 0 }, { y: 0, opacity: 1, duration: 0.34, ease: 'power2.out' }, 0.35);
+  tl.fromTo('.hf-transition-badge-count', { scale: 0, opacity: 0 }, { scale: 1, opacity: 1, duration: 0.42, ease: 'back.out(2.4)' }, 0.7);
+  tl.to('.hf-transition-badge-count', { scale: 1.18, duration: 0.12, yoyo: true, repeat: 1, ease: 'power1.inOut' }, 1.15);
+-->
diff --git a/registry/components/badge-pop/demo.html b/registry/components/badge-pop/demo.html
new file mode 100644
index 0000000000..a8e96ef0ca
--- /dev/null
+++ b/registry/components/badge-pop/demo.html
@@ -0,0 +1,126 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Badge Pop - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f4f4f5;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 56px;
+        transform: scale(
+          3
+        ); /* ponytail: scale wrapper (hugs content — no min-width inflation), not GSAP targets */
+        transform-origin: center;
+      }
+      .hf-transition-badge-pop {
+        position: relative;
+        display: inline-grid;
+        place-items: center;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-transition-badge-button {
+        display: grid;
+        place-items: center;
+        width: 76px;
+        height: 76px;
+        border: 1px solid #e4e4e7;
+        border-radius: 22px;
+        background: #ffffff;
+        color: #18181b;
+        box-shadow: 0 20px 58px rgba(0, 0, 0, 0.12);
+      }
+      .hf-transition-badge-button svg {
+        width: 30px;
+        height: 30px;
+        fill: none;
+        stroke: currentColor;
+        stroke-width: 2.2;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+      .hf-transition-badge-count {
+        position: absolute;
+        right: -8px;
+        top: -8px;
+        display: grid;
+        place-items: center;
+        min-width: 30px;
+        height: 30px;
+        padding: 0 8px;
+        border: 3px solid #ffffff;
+        border-radius: 999px;
+        background: #ef4444;
+        color: #ffffff;
+        font-size: 13px;
+        font-weight: 900;
+        transform-origin: center;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="badge-pop-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-transition-badge-pop">
+          <button class="hf-transition-badge-button" type="button" aria-label="Notifications">
+            <svg viewBox="0 0 24 24" aria-hidden="true">
+              <path d="M18 8a6 6 0 10-12 0c0 7-3 7-3 7h18s-3 0-3-7" />
+              <path d="M10 20a2 2 0 004 0" />
+            </svg>
+          </button>
+          <span class="hf-transition-badge-count">3</span>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        tl.fromTo(
+          ".hf-transition-badge-button",
+          { y: 18, opacity: 0 },
+          { y: 0, opacity: 1, duration: 0.34, ease: "power2.out" },
+          0.35,
+        );
+        tl.fromTo(
+          ".hf-transition-badge-count",
+          { scale: 0, opacity: 0 },
+          { scale: 1, opacity: 1, duration: 0.42, ease: "back.out(2.4)" },
+          0.7,
+        );
+        tl.to(
+          ".hf-transition-badge-count",
+          { scale: 1.18, duration: 0.12, yoyo: true, repeat: 1, ease: "power1.inOut" },
+          1.15,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["badge-pop-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/badge-pop/registry-item.json b/registry/components/badge-pop/registry-item.json
new file mode 100644
index 0000000000..614ed8a030
--- /dev/null
+++ b/registry/components/badge-pop/registry-item.json
@@ -0,0 +1,79 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "badge-pop",
+  "type": "hyperframes:component",
+  "title": "Badge Pop",
+  "description": "A transitions.dev-inspired notification badge pop with elastic scale and count reveal",
+  "tags": [
+    "video-primitive",
+    "transition-primitive",
+    "transitions-dev-port",
+    "badge",
+    "microinteraction"
+  ],
+  "files": [
+    {
+      "path": "badge-pop.html",
+      "target": "compositions/components/badge-pop.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "count",
+      "type": "string",
+      "role": "style",
+      "label": "Count",
+      "description": "Text shown inside the notification badge, up to four characters.",
+      "default": "3",
+      "maxLength": 4
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Colour family of the badge.",
+      "default": "red",
+      "options": [
+        {
+          "value": "red",
+          "label": "Red"
+        },
+        {
+          "value": "blue",
+          "label": "Blue"
+        },
+        {
+          "value": "green",
+          "label": "Green"
+        },
+        {
+          "value": "violet",
+          "label": "Violet"
+        }
+      ]
+    },
+    {
+      "id": "surface",
+      "type": "enum",
+      "role": "style",
+      "label": "Surface",
+      "description": "Chrome of the button and the badge ring: light for bright frames, dark for dark ones.",
+      "default": "light",
+      "options": [
+        {
+          "value": "light",
+          "label": "Light"
+        },
+        {
+          "value": "dark",
+          "label": "Dark"
+        }
+      ]
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/badge-pop.png"
+  }
+}
diff --git a/registry/components/beat-accent/beat-accent.html b/registry/components/beat-accent/beat-accent.html
new file mode 100644
index 0000000000..ab60393b1d
--- /dev/null
+++ b/registry/components/beat-accent/beat-accent.html
@@ -0,0 +1,324 @@
+<!doctype html>
+<!--
+  beat-accent: HyperFrames video primitive (effects / burst / emphasize)
+
+  Concept: a single music-hit sting. A centered word snaps up in scale as a
+  radial impact flash erupts behind it, shakes by a small amount, then settles
+  immediately. One mechanic, one job: visual punctuation on one beat during IN.
+  This burst fires once and never loops. HOLD stays deliberately calm and still
+  after the decay.
+
+  Compiled-from evidence: Video Primitives v1 GAP C1, "sting: impact
+  flash/scale on a music hit." The candidates catalog describes a C1 gap:
+  music-driven films need visual punctuation on the downbeat and had nothing
+  atomic to reach for. A declared sync point makes the primitive weldable to
+  any audio hit. Catalog shelf: effects / burst / emphasize. The impact uses
+  the easing vocabulary's --ease-slam, GSAP expo.out, with the CSS mirror
+  cubic-bezier(0.19, 1, 0.22, 1), kept brief per taste rule 3.
+
+  Use when: one downbeat, edit point, reveal, or hard musical hit needs a short
+  visual accent. Mount it over the subject or use its centered word as the
+  subject. Do not use it as an ambient loop or a repeated visualizer.
+
+  Variables (declared in data-composition-variables below):
+    - text (string, default "BOOM"): the word or label that receives the hit.
+    - flashColor (enum, default "accent"): accent, soft accent, or bright
+      accent. Every option is derived from var(--accent), so theme changes
+      always repaint the flash.
+    - intensity (number, 0.5 to 2, default 1, step 0.1): scales subject pulse,
+      flash opacity and spread, and shake distance as one legible control.
+
+  Envelope (fixed IN/OUT, elastic HOLD only, never gsap.timeScale()):
+    IN_BASE  = 0.90s, calm lead, impact snap, flash, shake, and full decay
+    HOLD     = elastic = max(0, D - (IN_BASE + OUT_BASE)), deliberately still
+    OUT_BASE = 0.40s, clean release fade
+    If D < IN_BASE + OUT_BASE, IN and OUT scale down together so IN + OUT == D
+    and HOLD == 0. All fixed offsets and motion durations use the same scale.
+
+  Sync point: impact-hard lands at IMPACT_AT = 0.25s into an unscaled IN. It
+  scales proportionally only when the full envelope is compressed. ADR-0007
+  requires declared sync points to remain in a fixed phase, never inside the
+  elastic HOLD, so audio and visual timing cannot drift as duration changes.
+
+  Sound cue: the primitive never plays audio. At IMPACT_AT it dispatches a
+  bubbling `hf:sfx` CustomEvent with detail { id: "impact-hard", t: IMPACT_AT }.
+  A host mix stage may catch that event and route the id to its chosen asset.
+
+  Mount contract: this file is a MOUNTABLE SUB-COMPOSITION, not a standalone
+  composition. A host loads it via data-composition-src; the runtime clones
+  only <template> contents, while everything outside <template>, including
+  <head>, is discarded on mount. #root has no data-width or data-height. It is
+  styled by id, never by class, and fills the host box with position:absolute,
+  inset:0, container-type:size. Variables are read through
+  window.__hyperframes.getVariables(), never by parsing document.documentElement,
+  because the mounted document element belongs to the host composition.
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "text", "type": "string", "role": "content", "label": "Accent text", "description": "Word or short label emphasized by the beat hit.", "default": "BOOM" },
+    { "id": "flashColor", "type": "enum", "role": "style", "label": "Flash color", "description": "Token-backed accent tone used by the radial flash.", "default": "accent", "options": [{ "value": "accent", "label": "Accent" }, { "value": "soft", "label": "Soft accent" }, { "value": "bright", "label": "Bright accent" }] },
+    { "id": "intensity", "type": "number", "role": "timing", "label": "Intensity", "description": "Strength of the scale pulse, flash, and shake.", "default": 1, "min": 0.5, "max": 2, "step": 0.1 }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Beat Accent</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="beat-accent" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            --ease-slam: cubic-bezier(0.19, 1, 0.22, 1);
+            --ba-flash-color: var(--accent, #ff4f8b);
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            background: var(--bg, #0b1120);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .ba-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+          }
+
+          .ba-stage {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            display: grid;
+            place-items: center;
+            will-change: transform, opacity;
+          }
+
+          .ba-flash {
+            position: absolute;
+            width: 62cqw;
+            aspect-ratio: 1;
+            border-radius: 50%;
+            background: radial-gradient(
+              circle,
+              color-mix(in srgb, var(--ba-flash-color) 92%, transparent) 0%,
+              color-mix(in srgb, var(--ba-flash-color) 54%, transparent) 24%,
+              color-mix(in srgb, var(--ba-flash-color) 16%, transparent) 48%,
+              transparent 72%
+            );
+            opacity: 0;
+            will-change: transform, opacity;
+          }
+
+          .ba-flash::after {
+            content: "";
+            position: absolute;
+            inset: 22%;
+            border: 0.45cqmin solid color-mix(in srgb, var(--ba-flash-color) 78%, transparent);
+            border-radius: 50%;
+          }
+
+          .ba-subject {
+            position: relative;
+            z-index: 1;
+            display: block;
+            width: 86cqw;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, var(--font-body, system-ui, sans-serif));
+            font-size: 20cqmin;
+            font-weight: 900;
+            line-height: 0.9;
+            letter-spacing: -0.055em;
+            text-align: center;
+            text-transform: uppercase;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            text-shadow:
+              0 0 2cqmin color-mix(in srgb, var(--accent, #ff4f8b) 46%, transparent),
+              0 1.2cqh 3.8cqh color-mix(in srgb, var(--bg, #0b1120) 68%, transparent);
+            transform-origin: 50% 50%;
+            will-change: transform;
+          }
+        </style>
+
+        <div
+          id="beat-accent-clip"
+          class="ba-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="ba-stage">
+            <div class="ba-flash" aria-hidden="true"></div>
+            <div class="ba-subject"></div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".ba-stage");
+            var flash = root.querySelector(".ba-flash");
+            var subject = root.querySelector(".ba-subject");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var text = vars.text == null ? "BOOM" : String(vars.text);
+            var flashChoice =
+              vars.flashColor === "soft" || vars.flashColor === "bright"
+                ? vars.flashColor
+                : "accent";
+            var intensityValue = Number(vars.intensity);
+            var intensity = Number.isFinite(intensityValue)
+              ? Math.max(0.5, Math.min(2, intensityValue))
+              : 1;
+
+            var flashColors = {
+              accent: "var(--accent, #ff4f8b)",
+              soft: "color-mix(in srgb, var(--accent, #ff4f8b) 70%, var(--bg, #0b1120))",
+              bright: "color-mix(in srgb, var(--accent, #ff4f8b) 72%, var(--fg, #f8fafc))",
+            };
+
+            subject.textContent = text;
+            root.style.setProperty("--ba-flash-color", flashColors[flashChoice]);
+
+            var IN_BASE = 0.9;
+            var OUT_BASE = 0.4;
+            var IMPACT_AT_BASE = 0.25;
+            var SNAP_BASE = 0.12;
+            var SETTLE_BASE = 0.28;
+            var FLASH_IN_BASE = 0.08;
+            var FLASH_OUT_BASE = 0.28;
+
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var totalBase = IN_BASE + OUT_BASE;
+            var envelopeScale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * envelopeScale;
+            var OUT = OUT_BASE * envelopeScale;
+            var IMPACT_AT = IMPACT_AT_BASE * envelopeScale;
+            var SNAP = SNAP_BASE * envelopeScale;
+            var SETTLE = SETTLE_BASE * envelopeScale;
+            var FLASH_IN = FLASH_IN_BASE * envelopeScale;
+            var FLASH_OUT = FLASH_OUT_BASE * envelopeScale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var OUT_START = IN + HOLD;
+
+            var restScale = 1 - 0.06 * intensity;
+            var peakScale = 1 + 0.18 * intensity;
+            var flashPeakScale = 0.78 + 0.3 * intensity;
+            var flashEndScale = 1.08 + 0.32 * intensity;
+            var flashPeakOpacity = Math.min(0.96, 0.5 + 0.23 * intensity);
+            var shakeX = 0.9 * intensity;
+            var shakeY = 0.34 * intensity;
+
+            gsap.set(stage, { x: 0, y: 0, opacity: 1 });
+            gsap.set(subject, { scale: restScale });
+            gsap.set(flash, { scale: 0.25, opacity: 0 });
+
+            var tl = gsap.timeline({ paused: true });
+
+            tl.to(subject, { scale: peakScale, duration: SNAP, ease: "expo.out" }, IMPACT_AT);
+            tl.to(subject, { scale: 1, duration: SETTLE, ease: "power3.out" }, IMPACT_AT + SNAP);
+
+            tl.to(
+              flash,
+              {
+                scale: flashPeakScale,
+                opacity: flashPeakOpacity,
+                duration: FLASH_IN,
+                ease: "expo.out",
+              },
+              IMPACT_AT,
+            );
+            tl.to(
+              flash,
+              { scale: flashEndScale, opacity: 0, duration: FLASH_OUT, ease: "power3.out" },
+              IMPACT_AT + FLASH_IN,
+            );
+
+            tl.to(
+              stage,
+              {
+                x: shakeX + "cqw",
+                y: -shakeY + "cqh",
+                duration: 0.04 * envelopeScale,
+                ease: "none",
+              },
+              IMPACT_AT,
+            );
+            tl.to(
+              stage,
+              {
+                x: -shakeX * 0.7 + "cqw",
+                y: shakeY * 0.75 + "cqh",
+                duration: 0.05 * envelopeScale,
+                ease: "none",
+              },
+              IMPACT_AT + 0.04 * envelopeScale,
+            );
+            tl.to(
+              stage,
+              {
+                x: shakeX * 0.3 + "cqw",
+                y: -shakeY * 0.35 + "cqh",
+                duration: 0.05 * envelopeScale,
+                ease: "none",
+              },
+              IMPACT_AT + 0.09 * envelopeScale,
+            );
+            tl.to(
+              stage,
+              {
+                x: 0,
+                y: 0,
+                duration: 0.12 * envelopeScale,
+                ease: "power3.out",
+              },
+              IMPACT_AT + 0.14 * envelopeScale,
+            );
+
+            tl.call(
+              function () {
+                root.dispatchEvent(
+                  new CustomEvent("hf:sfx", {
+                    detail: { id: "impact-hard", t: IMPACT_AT },
+                    bubbles: true,
+                  }),
+                );
+              },
+              [],
+              IMPACT_AT,
+            );
+
+            tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.out" }, OUT_START);
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            // Literal id is required. Mount flattening strips data-composition-id
+            // from this inner root, so reading the id from root would register
+            // under null and leave the host unable to find this timeline.
+            window.__timelines["beat-accent"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/beat-accent/demo.html b/registry/components/beat-accent/demo.html
new file mode 100644
index 0000000000..668c52d303
--- /dev/null
+++ b/registry/components/beat-accent/demo.html
@@ -0,0 +1,89 @@
+<!doctype html>
+<!--
+  beat-accent: demo. Standalone 1920x1080 host composition that mounts the
+  primitive from ./beat-accent.html through data-composition-src. The wide,
+  centered mount card gives the burst room for its word and radial flash.
+  Non-default text, flashColor, and intensity values prove per-instance
+  variables flow through the mount. This file is a host-only visual check and
+  is not installed by `hyperframes add`.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Beat Accent - Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #05070d;
+      }
+
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 42%, #17213a 0%, #05070d 72%);
+      }
+
+      .mount-card {
+        --bg: #101827;
+        --surface: #18233a;
+        --fg: #f8fafc;
+        --muted: #94a3b8;
+        --border: #334155;
+        --brand: #22c55e;
+        --accent: #ff4f8b;
+        --font-body: Inter, system-ui, sans-serif;
+        --font-display: Inter, system-ui, sans-serif;
+        width: 52%;
+        height: 44%;
+        left: 24%;
+        top: 28%;
+        border-radius: 32px;
+        border: 1px solid rgba(148, 163, 184, 0.28);
+        box-shadow: 0 40px 100px rgba(0, 0, 0, 0.52);
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="beat-accent-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="beat-accent-mount"
+        class="mount-card clip"
+        data-composition-id="beat-accent"
+        data-composition-src="./beat-accent.html"
+        data-variable-values='{"text":"DROP","flashColor":"bright","intensity":1.6}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="998"
+        data-height="475"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["beat-accent-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/beat-accent/registry-item.json b/registry/components/beat-accent/registry-item.json
new file mode 100644
index 0000000000..8de6db44eb
--- /dev/null
+++ b/registry/components/beat-accent/registry-item.json
@@ -0,0 +1,54 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "beat-accent",
+  "type": "hyperframes:component",
+  "title": "Beat Accent",
+  "description": "A single music-hit sting: impact flash, micro scale-pulse on the subject, immediate decay.",
+  "tags": ["motion-primitive", "effects", "burst", "sting", "emphasize", "impact"],
+  "jobs": ["emphasize"],
+  "family": "effects",
+  "profile": "burst",
+  "evidence": "Video Primitives v1 GAP C1 (sting: impact flash/scale on a music hit) plus easing vocabulary --ease-slam (expo.out, taste rule 3)",
+  "syncPoints": [{ "id": "impact-hard", "phase": "in", "offset": 0.25 }],
+  "files": [
+    {
+      "path": "beat-accent.html",
+      "target": "compositions/components/beat-accent.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "text",
+      "type": "string",
+      "role": "content",
+      "label": "Accent text",
+      "description": "Word or short label emphasized by the beat hit.",
+      "default": "BOOM"
+    },
+    {
+      "id": "flashColor",
+      "type": "enum",
+      "role": "style",
+      "label": "Flash color",
+      "description": "Token-backed accent tone used by the radial flash.",
+      "default": "accent",
+      "options": [
+        { "value": "accent", "label": "Accent" },
+        { "value": "soft", "label": "Soft accent" },
+        { "value": "bright", "label": "Bright accent" }
+      ]
+    },
+    {
+      "id": "intensity",
+      "type": "number",
+      "role": "timing",
+      "label": "Intensity",
+      "description": "Strength of the scale pulse, flash, and shake.",
+      "default": 1,
+      "min": 0.5,
+      "max": 2,
+      "step": 0.1
+    }
+  ]
+}
diff --git a/registry/components/beat-pulse-background/beat-pulse-background.html b/registry/components/beat-pulse-background/beat-pulse-background.html
new file mode 100644
index 0000000000..ddcab1a845
--- /dev/null
+++ b/registry/components/beat-pulse-background/beat-pulse-background.html
@@ -0,0 +1,208 @@
+<!doctype html>
+<!--
+  beat-pulse-background: HyperFrames video primitive (backgrounds / rhythmic)
+
+  Concept: a deep accent-derived backdrop pulses its glow intensity and
+  saturation on a supplied beat grid. Each retained beat owns one fast attack
+  and one slower decay. The pulses stay tasteful enough to carry foreground
+  content without reading as a strobe.
+
+  Variables:
+    - beats (string, default "0.5,1.0,1.5,2.0,2.5,3.0,3.5"): comma-separated
+      beat times in seconds. Junk and blank entries are ignored. Numeric times
+      are clamped to the composition duration.
+    - accent (green | blue | violet, default green): pulse color family.
+    - intensity (subtle | club, default subtle): glow and saturation strength.
+
+  Envelope: IN = 0, HOLD = the full elastic duration, OUT = 0. Beat times are
+  absolute data inside HOLD, so a longer mount extends HOLD without retiming
+  the supplied grid. Every pulse is constructed synchronously as one attack
+  and one decay tween pair.
+
+  Sound: none. Beats are supplied data, not audio analysis.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, has no data-width or data-height,
+  and registers one paused timeline under the hardcoded beat-pulse-background
+  id.
+-->
+<html
+  lang="en"
+  data-composition-id="beat-pulse-background"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "beats", "type": "string", "role": "timing", "label": "Beats", "description": "Comma-separated beat times in seconds. Invalid entries are ignored and numeric values are clamped to the composition duration.", "default": "0.5,1.0,1.5,2.0,2.5,3.0,3.5" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Accent token family used by the pulsing glow.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "intensity", "type": "enum", "role": "style", "label": "Intensity", "description": "Strength of the glow and saturation pulse.", "default": "subtle", "options": [{ "value": "subtle", "label": "Subtle" }, { "value": "club", "label": "Club" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Beat Pulse Background</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="beat-pulse-background" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            pointer-events: none;
+          }
+
+          .bpb-clip,
+          .bpb-base,
+          .bpb-pulse,
+          .bpb-vignette {
+            position: absolute;
+            inset: 0;
+          }
+
+          .bpb-clip {
+            overflow: hidden;
+          }
+
+          .bpb-base {
+            background:
+              radial-gradient(
+                ellipse at 50% 42%,
+                color-mix(in srgb, var(--bpb-accent) 10%, var(--bg, #070a12)) 0%,
+                var(--bg, #070a12) 70%
+              ),
+              var(--bg, #070a12);
+          }
+
+          .bpb-pulse {
+            background:
+              radial-gradient(
+                ellipse at 24% 30%,
+                color-mix(in srgb, var(--bpb-accent) 74%, transparent) 0%,
+                color-mix(in srgb, var(--bpb-accent) 28%, transparent) 34%,
+                transparent 66%
+              ),
+              radial-gradient(
+                ellipse at 76% 68%,
+                color-mix(in srgb, var(--bpb-accent) 60%, var(--accent-2, #a78bfa)) 0%,
+                color-mix(in srgb, var(--bpb-accent) 20%, transparent) 38%,
+                transparent 70%
+              );
+            filter: saturate(var(--bpb-saturation, 1));
+            mix-blend-mode: screen;
+            opacity: 0.2;
+            will-change: opacity, filter;
+          }
+
+          .bpb-vignette {
+            background: radial-gradient(
+              ellipse at center,
+              transparent 34%,
+              color-mix(in srgb, var(--bg, #000000) 58%, transparent) 100%
+            );
+          }
+        </style>
+
+        <div
+          id="beat-pulse-background-clip"
+          class="bpb-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="bpb-base"></div>
+          <div class="bpb-pulse"></div>
+          <div class="bpb-vignette"></div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var pulse = root.querySelector(".bpb-pulse");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var accentTokens = {
+              green: "var(--brand, #34d399)",
+              blue: "var(--accent, #38bdf8)",
+              violet: "var(--accent-2, #a78bfa)",
+            };
+            var intensityLevels = {
+              subtle: { baseOpacity: 0.2, peakOpacity: 0.5, peakSaturation: 1.3 },
+              club: { baseOpacity: 0.26, peakOpacity: 0.72, peakSaturation: 1.65 },
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentTokens, vars.accent)
+              ? vars.accent
+              : "green";
+            var intensity = vars.intensity === "club" ? "club" : "subtle";
+            var level = intensityLevels[intensity];
+
+            root.style.setProperty("--bpb-accent", accentTokens[accent]);
+
+            var durationValue = Number(root.dataset.duration);
+            var duration = Number.isFinite(durationValue) && durationValue > 0 ? durationValue : 4;
+            var defaultBeats = "0.5,1.0,1.5,2.0,2.5,3.0,3.5";
+            var beatsValue = vars.beats == null ? defaultBeats : String(vars.beats);
+            var beats = beatsValue.split(",").reduce(function (result, token) {
+              var trimmed = token.trim();
+              if (trimmed === "") return result;
+
+              var seconds = Number(trimmed);
+              if (!Number.isFinite(seconds)) return result;
+
+              result.push(Math.max(0, Math.min(duration, seconds)));
+              return result;
+            }, []);
+
+            var ATTACK = 0.08;
+            var DECAY = 0.36;
+
+            gsap.set(pulse, { opacity: level.baseOpacity, "--bpb-saturation": 1 });
+
+            var tl = gsap.timeline({ paused: true });
+
+            beats.forEach(function (beat) {
+              tl.to(
+                pulse,
+                {
+                  opacity: level.peakOpacity,
+                  "--bpb-saturation": level.peakSaturation,
+                  duration: ATTACK,
+                  ease: "expo.out",
+                },
+                beat,
+              );
+              tl.to(
+                pulse,
+                {
+                  opacity: level.baseOpacity,
+                  "--bpb-saturation": 1,
+                  duration: DECAY,
+                  ease: "power2.in",
+                },
+                beat + ATTACK,
+              );
+            });
+
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines["beat-pulse-background"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/beat-pulse-background/demo.html b/registry/components/beat-pulse-background/demo.html
new file mode 100644
index 0000000000..151e780036
--- /dev/null
+++ b/registry/components/beat-pulse-background/demo.html
@@ -0,0 +1,91 @@
+<!doctype html>
+<!--
+  beat-pulse-background demo. This standalone composition mounts the
+  primitive through data-composition-src. The irregular violet club grid
+  proves all variables flow through the mount while the background remains
+  sized by its host box.
+-->
+<html lang="en" data-composition-id="beat-pulse-background-demo" data-composition-duration="4">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Beat Pulse Background Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #0b0c0e);
+      }
+
+      #root {
+        --bg: #080a12;
+        --surface: #17191f;
+        --fg: #f8fafc;
+        --muted: #94a3b8;
+        --accent: #38bdf8;
+        --accent-2: #a78bfa;
+        --brand: #34d399;
+        --border: #334155;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(
+          ellipse at 50% 42%,
+          var(--bg, #17191f) 0%,
+          var(--bg, #0b0c0e) 72%
+        );
+      }
+
+      .mount-card {
+        width: 75%;
+        height: 70%;
+        left: 12.5%;
+        top: 15%;
+        overflow: hidden;
+        border: 1px solid color-mix(in srgb, var(--border, #ffffff) 14%, transparent);
+        border-radius: 28px;
+        background: var(--bg, #080a12);
+        box-shadow: 0 5cqh 14cqh color-mix(in srgb, var(--bg, #000000) 52%, transparent);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="beat-pulse-background-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="beat-pulse-background-mount"
+        class="mount-card clip"
+        data-composition-id="beat-pulse-background"
+        data-composition-src="./beat-pulse-background.html"
+        data-variable-values='{"beats":"0.25,0.75,1.5,2.25,3.25","accent":"violet","intensity":"club"}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="1440"
+        data-height="756"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["beat-pulse-background-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/beat-pulse-background/registry-item.json b/registry/components/beat-pulse-background/registry-item.json
new file mode 100644
index 0000000000..0e2be74c12
--- /dev/null
+++ b/registry/components/beat-pulse-background/registry-item.json
@@ -0,0 +1,54 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "beat-pulse-background",
+  "type": "hyperframes:component",
+  "title": "Beat Pulse Background",
+  "description": "An accent-derived backdrop pulses its glow intensity and saturation on a deterministic, supplied beat grid.",
+  "tags": ["motion-primitive", "background", "beat", "pulse", "rhythmic", "reactive"],
+  "jobs": ["emphasize"],
+  "family": "backgrounds",
+  "profile": "rhythmic",
+  "evidence": "Wave G U21 beat-pulse-background specification",
+  "files": [
+    {
+      "path": "beat-pulse-background.html",
+      "target": "compositions/components/beat-pulse-background.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "beats",
+      "type": "string",
+      "role": "timing",
+      "label": "Beats",
+      "description": "Comma-separated beat times in seconds. Invalid entries are ignored and numeric values are clamped to the composition duration.",
+      "default": "0.5,1.0,1.5,2.0,2.5,3.0,3.5"
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Accent token family used by the pulsing glow.",
+      "default": "green",
+      "options": [
+        { "value": "green", "label": "Green" },
+        { "value": "blue", "label": "Blue" },
+        { "value": "violet", "label": "Violet" }
+      ]
+    },
+    {
+      "id": "intensity",
+      "type": "enum",
+      "role": "style",
+      "label": "Intensity",
+      "description": "Strength of the glow and saturation pulse.",
+      "default": "subtle",
+      "options": [
+        { "value": "subtle", "label": "Subtle" },
+        { "value": "club", "label": "Club" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/beat-timeline/beat-timeline.html b/registry/components/beat-timeline/beat-timeline.html
new file mode 100644
index 0000000000..40b1aab09f
--- /dev/null
+++ b/registry/components/beat-timeline/beat-timeline.html
@@ -0,0 +1,288 @@
+<!doctype html>
+<!--
+  beat-timeline -- HyperFrames video primitive (transitions / sequencing / bridge)
+
+  Concept: a visible orchestration spine made from a paused master GSAP
+  timeline. Each beat row is pinned to an evenly spaced named label, then
+  enters exactly on that mark. One mechanic, one job: bridge a sequence by
+  making its deterministic beat grid readable and copy-and-own-able.
+
+  Compiled-from evidence: launches-motion-vocabulary.md, "Paused, seeked
+  timeline orchestration" census entry (15/18 projects, 134/159 files).
+
+  Use when: a scene needs several titled beats to land in a clear order, or
+  when a copied composition needs a legible master-timeline sequencing spine.
+
+  Variables (declared in data-composition-variables below):
+    - beatCount (number, default 4): integer row count, clamped to 2..6.
+    - interval (number, default 0.6s): base spacing between named beat labels,
+      clamped to 0.2..2s before any short-duration compression.
+    - labels (string): comma-separated row titles. Missing entries fall back
+      to "Beat N" and extra entries are ignored.
+
+  Envelope (holdable orchestration adaptation, never gsap.timeScale()):
+    ENTRANCE_SPAN = (beatCount - 1) * interval + ROW_IN_DURATION.
+    HOLD = max(0, D - (ENTRANCE_SPAN + OUT_BASE)); every landed row remains
+           fully visible and deliberately still during this elastic phase.
+    OUT_BASE = 0.40s; all rows fade together with power2.in at D - OUT_BASE.
+    If D is shorter than ENTRANCE_SPAN + OUT_BASE, interval and each row's
+    entrance duration scale down together so the final row still lands before
+    OUT. Only a host duration at or below OUT_BASE also compresses OUT, which
+    keeps the full lifecycle inside an otherwise impossible time box.
+
+  Sync points: beat labels are fixed offsets inside IN. Every label owns one
+  declared SFX cue at the same offset, never inside elastic HOLD. Beats use
+  "beat-tick" and the last beat uses "beat-tick-final". The primitive only
+  dispatches bubbling hf:sfx events; scene-level audio mixing owns playback.
+
+  Mount contract: this file is a mountable sub-composition. The runtime clones
+  only <template> contents, so all live styles, markup, and scripts are inside
+  the template. #root fills the host-owned box with no data-width/data-height,
+  and all internal geometry is based on its own cqw/cqh container. Variables
+  come from window.__hyperframes.getVariables(), because document.documentElement
+  belongs to the host after mounting.
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "beatCount", "type": "number", "role": "content", "label": "Beat count", "description": "Number of beat rows in the sequence.", "default": 4, "min": 2, "max": 6, "step": 1 },
+    { "id": "interval", "type": "number", "role": "layout", "label": "Interval", "description": "Base time between consecutive beat markers.", "default": 0.6, "min": 0.2, "max": 2, "step": 0.05, "unit": "s" },
+    { "id": "labels", "type": "string", "role": "content", "label": "Labels", "description": "Comma-separated beat titles, one per beat. Extra entries are ignored and missing entries fall back to Beat N.", "default": "One,Two,Three,Four" }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Beat Timeline</title>
+    <!-- Metadata only. The loader reads variable declarations from <html>,
+         then discards everything outside <template> during mounting. -->
+  </head>
+  <body>
+    <template>
+      <div
+        id="root"
+        data-composition-id="beat-timeline"
+        data-start="0"
+        data-duration="5.5"
+        data-fps="30"
+      >
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          /* Root is styled by ID for mounted CSS scoping. It owns no stage
+             dimensions, only the host box and the container-unit basis. */
+          #root {
+            --ease-standard: cubic-bezier(0.215, 0.61, 0.355, 1);
+            --ease-exit: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            background: var(--bg, Canvas);
+            color: var(--fg, CanvasText);
+            font-family: var(--font-body, system-ui, sans-serif);
+          }
+
+          .bt-clip {
+            width: 100%;
+            height: 100%;
+            display: grid;
+            place-items: center;
+          }
+
+          .bt-stack {
+            width: 84cqw;
+            display: flex;
+            flex-direction: column;
+            gap: 1.4cqh;
+          }
+
+          /* EDIT ZONE: row geometry only. Motion timing is owned by the script's
+             RETIME RANGE below, and theme paint remains token-driven here. */
+          .bt-row {
+            min-height: 10cqh;
+            display: grid;
+            grid-template-columns: 6cqw 1fr;
+            align-items: center;
+            column-gap: 2.6cqw;
+            padding: 1.4cqh 2.4cqw;
+            border: 0.12cqw solid var(--border, currentColor);
+            border-radius: var(--radius, 2cqh);
+            background: var(--surface, Canvas);
+            box-shadow: 0 1.2cqh 4cqh color-mix(in srgb, var(--bg, Canvas) 52%, transparent);
+          }
+
+          .bt-index {
+            width: 6cqw;
+            height: 6cqw;
+            display: grid;
+            place-items: center;
+            border-radius: 50%;
+            background: var(--brand, currentColor);
+            color: var(--bg, Canvas);
+            font-family: var(--font-display, system-ui, sans-serif);
+            font-size: 1.8cqw;
+            font-weight: 750;
+            line-height: 1;
+          }
+
+          .bt-copy {
+            min-width: 0;
+          }
+
+          .bt-title {
+            overflow: hidden;
+            color: var(--fg, CanvasText);
+            font-family: var(--font-display, system-ui, sans-serif);
+            font-size: min(4.4cqw, 5.2cqh);
+            font-weight: 700;
+            line-height: 1.04;
+            letter-spacing: -0.08cqw;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          .bt-subtitle {
+            margin-top: 0.7cqh;
+            color: var(--muted, currentColor);
+            font-size: min(1.8cqw, 2.2cqh);
+            font-weight: 550;
+            line-height: 1.15;
+            letter-spacing: 0.04cqw;
+          }
+        </style>
+
+        <div
+          id="beat-timeline-clip"
+          class="bt-clip clip"
+          data-start="0"
+          data-duration="5.5"
+          data-track-index="0"
+        >
+          <div class="bt-stack" aria-label="Beat timeline"></div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            // Literal by contract: mounting strips data-composition-id from the
+            // flattened inner root, so reading the attribute post-mount would
+            // register under null and fail the timeline lookup.
+            var compositionId = "beat-timeline";
+            var stack = root.querySelector(".bt-stack");
+
+            // EDIT ZONE: declarations live on <html>; this runtime call is the
+            // single owner of declared defaults plus per-instance overrides.
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var parsedBeatCount = Number(vars.beatCount);
+            // INVARIANT: exactly 2..6 integer rows reach the DOM and timeline.
+            var beatCount = Math.max(
+              2,
+              Math.min(6, Math.round(Number.isFinite(parsedBeatCount) ? parsedBeatCount : 4)),
+            );
+            var parsedInterval = Number(vars.interval);
+            // INVARIANT: invalid timing falls back once, valid timing clamps to
+            // the declared range before duration elasticity is calculated.
+            var interval = Math.max(
+              0.2,
+              Math.min(2, Number.isFinite(parsedInterval) ? parsedInterval : 0.6),
+            );
+            // INVARIANT: labels is always a string; blank or missing entries
+            // fall back per row, while authored extra entries stay unused.
+            var labelsValue = vars.labels == null ? "One,Two,Three,Four" : String(vars.labels);
+            var suppliedLabels = labelsValue.split(",").map(function (label) {
+              return label.trim();
+            });
+
+            var parsedDuration = parseFloat(root.dataset.duration || "5.5");
+            // INVARIANT: the lifecycle remains finite even under a malformed
+            // host duration. The authored and demo durations are both 5.5s.
+            var duration = Math.max(0.001, Number.isFinite(parsedDuration) ? parsedDuration : 5.5);
+
+            // RETIME RANGE: these values own the whole pacing decision. The
+            // interval and row entrance compress together, never via timeScale.
+            var ROW_IN_BASE = 0.4;
+            var OUT_BASE = 0.4;
+            var baseEntranceSpan = (beatCount - 1) * interval + ROW_IN_BASE;
+            var OUT = duration <= OUT_BASE ? duration / 2 : OUT_BASE;
+            var entranceBudget = duration - OUT;
+            var scale = baseEntranceSpan > entranceBudget ? entranceBudget / baseEntranceSpan : 1;
+            var timedInterval = interval * scale;
+            var ROW_IN = ROW_IN_BASE * scale;
+            var ENTRANCE_SPAN = (beatCount - 1) * timedInterval + ROW_IN;
+            var HOLD = Math.max(0, duration - (ENTRANCE_SPAN + OUT));
+            var OUT_START = ENTRANCE_SPAN + HOLD;
+
+            function fireSfx(id, t) {
+              root.dispatchEvent(
+                new CustomEvent("hf:sfx", { detail: { id: id, t: t }, bubbles: true }),
+              );
+            }
+
+            var rows = [];
+            for (var i = 0; i < beatCount; i += 1) {
+              var title = suppliedLabels[i] || "Beat " + (i + 1);
+              var row = document.createElement("div");
+              row.className = "bt-row";
+              row.innerHTML =
+                '<div class="bt-index" aria-hidden="true"></div>' +
+                '<div class="bt-copy"><div class="bt-title"></div><div class="bt-subtitle"></div></div>';
+              row.querySelector(".bt-index").textContent = String(i + 1).padStart(2, "0");
+              row.querySelector(".bt-title").textContent = title;
+              row.querySelector(".bt-subtitle").textContent =
+                "Cue " +
+                String(i + 1).padStart(2, "0") +
+                "  ·  " +
+                (i * timedInterval).toFixed(2) +
+                "s";
+              stack.appendChild(row);
+              rows.push(row);
+            }
+
+            // Explicit entrance and exit endpoints make a direct seek to t=0
+            // correct without ever playing the timeline.
+            gsap.set(rows, { opacity: 0, y: "2cqh", scale: 0.98 });
+
+            var tl = gsap.timeline({ paused: true });
+
+            // ORCHESTRATION SPINE: every row tween and its declared cue are
+            // pinned to the named label, never to a duplicated numeric offset.
+            for (var beatIndex = 0; beatIndex < beatCount; beatIndex += 1) {
+              var labelName = "beat" + beatIndex;
+              var cueTime = beatIndex * timedInterval;
+              var cueId = beatIndex === beatCount - 1 ? "beat-tick-final" : "beat-tick";
+              tl.addLabel(labelName, cueTime);
+              tl.to(
+                rows[beatIndex],
+                { opacity: 1, y: "0cqh", scale: 1, duration: ROW_IN, ease: "power2.out" },
+                labelName,
+              );
+              // SFX CUE (IN, beat N): one scene-mixed cue at this beat label.
+              tl.call(fireSfx, [cueId, cueTime], labelName);
+            }
+
+            // HOLD is deliberately still. OUT accelerates every landed row away
+            // together, asymmetrically paired with the power2.out entrances.
+            tl.to(rows, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/beat-timeline/demo.html b/registry/components/beat-timeline/demo.html
new file mode 100644
index 0000000000..e57327d9d9
--- /dev/null
+++ b/registry/components/beat-timeline/demo.html
@@ -0,0 +1,99 @@
+<!doctype html>
+<!--
+  beat-timeline demo. Standalone 1920x1080 host that mounts the primitive via
+  data-composition-src. The mount uses non-default values for all variables:
+  five rows, a 0.5s interval, and custom titles. Its definite percentage-sized
+  card proves the primitive resolves cqw/cqh from the host box without
+  shrink-to-fit collapse. This demo is not installed by hyperframes add.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Beat Timeline - Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #05070d;
+      }
+
+      #root {
+        --bg: #070b14;
+        --fg: #f7f9fc;
+        --muted: #91a0b8;
+        --surface: #111a2b;
+        --border: rgba(145, 160, 184, 0.22);
+        --brand: #7dd3fc;
+        --accent: #c4b5fd;
+        --font-display: Inter, ui-sans-serif, system-ui, sans-serif;
+        --font-body: Inter, ui-sans-serif, system-ui, sans-serif;
+        --radius: 18px;
+        --space-1: 8px;
+        --space-2: 16px;
+        --space-3: 32px;
+        --ease-standard: cubic-bezier(0.215, 0.61, 0.355, 1);
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(circle at 50% 42%, var(--surface), var(--bg) 66%);
+        color: var(--fg);
+        font-family: var(--font-body);
+      }
+
+      /* Definite percentages resolve against #root's fixed pixel box. This
+         avoids the shrink-to-fit feedback collapse of a size-contained mount. */
+      .mount-card {
+        width: 50%;
+        height: 70%;
+        left: 25%;
+        top: 15%;
+        overflow: hidden;
+        border: 1px solid var(--border);
+        border-radius: 30px;
+        box-shadow: 0 48px 120px rgba(0, 0, 0, 0.48);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="beat-timeline-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5.5"
+      data-fps="30"
+    >
+      <div
+        id="beat-timeline-mount"
+        class="mount-card clip"
+        data-composition-id="beat-timeline"
+        data-composition-src="./beat-timeline.html"
+        data-variable-values='{"beatCount":5,"interval":0.5,"labels":"Capture,Draft,Review,Ship,Iterate"}'
+        data-start="0"
+        data-duration="5.5"
+        data-track-index="0"
+        data-width="960"
+        data-height="756"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      // The mounted primitive owns all visible motion. This empty paused host
+      // timeline satisfies the standalone composition registry contract.
+      window.__timelines = window.__timelines || {};
+      window.__timelines["beat-timeline-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/beat-timeline/registry-item.json b/registry/components/beat-timeline/registry-item.json
new file mode 100644
index 0000000000..1541bd92cb
--- /dev/null
+++ b/registry/components/beat-timeline/registry-item.json
@@ -0,0 +1,52 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "beat-timeline",
+  "type": "hyperframes:component",
+  "title": "Beat Timeline",
+  "description": "A paused master-timeline orchestration spine that pins titled beat rows to evenly spaced named labels. Each row enters on its label, holds with the sequence, then exits with the group.",
+  "tags": ["orchestration", "transitions", "sequencing", "bridge", "timeline"],
+  "jobs": ["bridge"],
+  "family": "transitions",
+  "profile": "holdable",
+  "evidence": "launches-motion-vocabulary.md: Paused, seeked timeline orchestration census, 15/18 projects and 134/159 files",
+  "files": [
+    {
+      "path": "beat-timeline.html",
+      "target": "compositions/components/beat-timeline.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "beatCount",
+      "type": "number",
+      "role": "content",
+      "label": "Beat count",
+      "description": "Number of beat rows in the sequence.",
+      "default": 4,
+      "min": 2,
+      "max": 6,
+      "step": 1
+    },
+    {
+      "id": "interval",
+      "type": "number",
+      "role": "layout",
+      "label": "Interval",
+      "description": "Base time between consecutive beat markers.",
+      "default": 0.6,
+      "min": 0.2,
+      "max": 2,
+      "step": 0.05,
+      "unit": "s"
+    },
+    {
+      "id": "labels",
+      "type": "string",
+      "role": "content",
+      "label": "Labels",
+      "description": "Comma-separated beat titles, one per beat. Extra entries are ignored and missing entries fall back to Beat N.",
+      "default": "One,Two,Three,Four"
+    }
+  ]
+}
diff --git a/registry/components/before-after-wipe/README.md b/registry/components/before-after-wipe/README.md
new file mode 100644
index 0000000000..5f5cafed96
--- /dev/null
+++ b/registry/components/before-after-wipe/README.md
@@ -0,0 +1,93 @@
+# before-after-wipe
+
+Two full-bleed content panels compare a before and an after state. The before
+panel stays fully visible as the base layer; the after panel wipes over it from
+the left edge in one pass and the divider rests at `rest_split` percent for the
+whole hold. The divider (and its knob) stays hidden until the wipe starts, then
+fades in as it departs the left edge, so the lead-in never shows a half-clipped
+handle. Label chips mark each side. This ports comparison-split's divider-wipe mechanic onto real
+content slots: you supply the two visuals, the primitive supplies the wipe.
+
+## Files
+
+- `before-after-wipe.html`: the mountable sub-composition (install target:
+  `compositions/components/before-after-wipe.html`).
+- `registry-item.json`: registry metadata and the variables block.
+
+## Variables
+
+| id           | type   | default  | notes                                                                     |
+| ------------ | ------ | -------- | ------------------------------------------------------------------------- |
+| `label_a`    | string | `Before` | chip on the base panel; empty string hides it                             |
+| `label_b`    | string | `After`  | chip on the revealed panel; empty string hides it                         |
+| `rest_split` | number | `50`     | divider resting position, 0 to 100 percent                                |
+| `wipe_at`    | number | `0.25`   | seconds after mount start when the wipe begins (0 to 8)                   |
+| `accent`     | enum   | `green`  | `green` maps to `--brand`, `blue` to `--accent`, `violet` to `--accent-2` |
+| `exit`       | enum   | `none`   | `none` holds the final frame; `fade` and `up` release the stage           |
+
+Envelope: IN = `wipe_at` + 1.05s wipe travel, OUT = 0.5s only when `exit` is
+`fade` or `up`, HOLD is the sole elastic phase. The `wipe-land` sync point
+(`hf:sfx` id `wipe-land-soft`) fires when the divider lands, 1.30s at defaults.
+
+## The slot mechanism
+
+The primitive ships two named slot panels inside its `<template>`:
+
+```html
+<div class="baw-slot" data-slot="before">...</div>
+<div class="baw-slot" data-slot="after">...</div>
+```
+
+Each slot's default children are a token-styled wireframe card (muted on the
+before layer, brand-tinted on the after layer), so an untouched mount still
+reads as a tasteful comparison. To show your own content, install the
+component and **replace the children of each `[data-slot]` element in your
+installed copy** (the runtime clones only the primitive's own template on
+mount, so slot content lives in the component file, not on the host clip).
+
+Rules:
+
+- Both slots are full-bleed and share one coordinate space; align the two
+  states so the wipe reads as one surface changing, not two images sliding.
+- Direct `img`/`video` children are automatically sized to cover the panel
+  (`object-fit: cover`). Arbitrary HTML works too; size it in `cqw`/`cqh`.
+- Keep the label chips and divider alone; they render above slot content.
+
+## Worked example
+
+Install, then fill the slots with two screenshots:
+
+```bash
+npx hyperframes add before-after-wipe
+```
+
+In `compositions/components/before-after-wipe.html`, replace each slot's
+default block:
+
+```html
+<div class="baw-slot" data-slot="before">
+  <img src="../../assets/dashboard-old.png" alt="" />
+</div>
+...
+<div class="baw-slot" data-slot="after">
+  <img src="../../assets/dashboard-new.png" alt="" />
+</div>
+```
+
+Mount it from a host composition like any sub-composition:
+
+```html
+<div
+  class="clip"
+  data-composition-id="before-after-wipe"
+  data-composition-src="./components/before-after-wipe.html"
+  data-variable-values='{"label_a":"v1","label_b":"v2","rest_split":62,"accent":"blue"}'
+  data-start="2"
+  data-duration="5"
+  data-track-index="0"
+></div>
+```
+
+The wipe starts 0.25s after the clip mounts, lands at 62 percent, and the
+comparison holds still for the rest of the clip window (`exit` defaults to
+`none`; frame roots own scene transitions).
diff --git a/registry/components/before-after-wipe/before-after-wipe.html b/registry/components/before-after-wipe/before-after-wipe.html
new file mode 100644
index 0000000000..7efe185bfd
--- /dev/null
+++ b/registry/components/before-after-wipe/before-after-wipe.html
@@ -0,0 +1,478 @@
+<!doctype html>
+<!--
+  before-after-wipe: HyperFrames video primitive (ui-props / holdable / compare)
+
+  Concept: two full-bleed CONTENT SLOTS share one frame. The before slot stays
+  fully visible as the base layer while the after slot wipes over it from the
+  left edge, and a persistent divider rests at rest_split percent. Callers fill
+  the two named slot panels with their own content (screenshots, video, HTML);
+  when a slot is left untouched, a tasteful token-styled default renders
+  instead. One mechanic, one job: compare two visual states.
+
+  Ports the divider-wipe mechanic from comparison-split, with real content
+  slots instead of baked demo art (Wave J, U-B).
+
+  Slots (see README.md for a worked example):
+    - [data-slot="before"]: base layer content. Replace the children of this
+      element in your installed copy. Default: a muted token wireframe.
+    - [data-slot="after"]:  revealed layer content. Same mechanism. Default:
+      a brand-tinted version of the wireframe.
+    Direct img/video children of a slot are sized to cover the panel.
+
+  Variables (declared in data-composition-variables below):
+    - label_a (string, default "Before"): chip on the base panel. Empty hides it.
+    - label_b (string, default "After"): chip on the revealed panel. Empty hides it.
+    - rest_split (number, default 50, 0 to 100%): divider resting position.
+    - wipe_at (number, seconds, default 0.25): when the wipe starts, relative
+      to mount start. Clamped so the wipe always completes inside IN.
+    - accent (green | blue | violet, default green): divider handle and after
+      chip color. green maps to --brand, blue to --accent, violet to --accent-2.
+    - exit (none | fade | up, default none): outgoing transition. none holds
+      the final frame (frame roots own transitions; holds end films).
+
+  The divider (and its knob) stays hidden until the wipe starts, then fades in
+  as it departs the left edge: at split 0 the knob would straddle the frame
+  edge half-clipped, which reads as a rendering bug rather than a resting
+  state. One wipe pass, then the divider rests at rest_split for the whole
+  hold.
+
+  Envelope (fixed IN/OUT, elastic HOLD only, never gsap.timeScale()):
+    IN       = wipe_at + 1.05s wipe travel (stage settles during the first 0.32s)
+    HOLD     = elastic = max(0, D - (IN + OUT)); deliberately still so the
+               comparison stays easy to inspect
+    OUT      = 0.50s when exit is fade or up, 0 when exit is none
+    If D < IN + OUT, IN and OUT scale down together so IN + OUT == D.
+
+  Sync point: wipe-land at wipe_at + 1.05s inside IN (1.30s at defaults). It
+  never moves into elastic HOLD.
+
+  Sound cue: dispatches a bubbling `hf:sfx` CustomEvent with id
+  "wipe-land-soft" at wipe-land. This primitive never plays audio.
+
+  Mount contract: MOUNTABLE SUB-COMPOSITION. The runtime clones only
+  <template> contents; #root fills the host box (inset:0, container-type:
+  size), has no data-width/data-height, and registers one paused timeline
+  under the literal "before-after-wipe" key (mount flattening strips
+  data-composition-id from the live root). Variables come from
+  window.__hyperframes.getVariables().
+-->
+<html
+  lang="en"
+  data-composition-id="before-after-wipe"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "label_a", "type": "string", "role": "content", "label": "Before label", "description": "Chip shown on the base before panel. Blank hides the chip.", "default": "Before" },
+    { "id": "label_b", "type": "string", "role": "content", "label": "After label", "description": "Chip shown on the revealed after panel. Blank hides the chip.", "default": "After" },
+    { "id": "rest_split", "type": "number", "role": "layout", "label": "Resting split", "description": "Divider resting position after the wipe lands.", "default": 50, "min": 0, "max": 100, "step": 1, "unit": "%" },
+    { "id": "wipe_at", "type": "number", "role": "timing", "label": "Wipe start", "description": "Seconds after mount start when the wipe begins.", "default": 0.25, "min": 0, "max": 8, "step": 0.05, "unit": "s" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Divider handle and after chip color.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Outgoing transition. None holds the final comparison frame.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Before After Wipe</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="before-after-wipe" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          /* Root fills the host-owned box. Internal measurements use cqw/cqh
+             and every painted color comes from a contract token. */
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            background: var(--bg, #07111f);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+          }
+
+          .baw-clip,
+          .baw-stage,
+          .baw-panel,
+          .baw-slot {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+          }
+
+          .baw-clip {
+            overflow: hidden;
+          }
+
+          .baw-stage {
+            --baw-split: 0;
+            opacity: 0;
+          }
+
+          .baw-panel {
+            overflow: hidden;
+          }
+
+          /* The after layer wipes over the base via one clip-path driven by
+             --baw-split, the single owner of wipe progress. */
+          .baw-after {
+            z-index: 2;
+            clip-path: inset(0 calc((100 - var(--baw-split)) * 1%) 0 0);
+          }
+
+          /* Caller-supplied media covers its panel edge to edge. */
+          .baw-slot > img,
+          .baw-slot > video {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+          }
+
+          /* Token-styled default slot content: a wireframe card that reads
+             muted on the before layer and brand-tinted on the after layer.
+             Callers replacing slot children never see any of this. */
+          .baw-default {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+          }
+
+          .baw-before .baw-default {
+            background:
+              linear-gradient(
+                  color-mix(in srgb, var(--border, #334155) 34%, transparent) 0.12cqw,
+                  transparent 0.12cqw
+                )
+                0 0 / 5cqw 5cqw,
+              linear-gradient(
+                  90deg,
+                  color-mix(in srgb, var(--border, #334155) 34%, transparent) 0.12cqw,
+                  transparent 0.12cqw
+                )
+                0 0 / 5cqw 5cqw,
+              var(--surface, #172033);
+          }
+
+          .baw-after .baw-default {
+            background: linear-gradient(
+              135deg,
+              color-mix(in srgb, var(--brand, #22c55e) 32%, var(--surface, #172033)) 0%,
+              var(--surface, #172033) 58%,
+              color-mix(in srgb, var(--baw-accent, #22c55e) 22%, var(--surface, #172033)) 100%
+            );
+          }
+
+          .baw-card {
+            width: 56cqw;
+            height: 56cqh;
+            padding: var(--space-3, 4cqh) var(--space-3, 4cqw);
+            border: 0.16cqw solid var(--border, #334155);
+            border-radius: var(--radius, 2.4cqmin);
+            background: color-mix(in srgb, var(--surface, #172033) 88%, var(--bg, #07111f));
+            box-shadow: 0 2cqh 5cqw color-mix(in srgb, var(--bg, #07111f) 45%, transparent);
+          }
+
+          .baw-after .baw-card {
+            border-color: color-mix(
+              in srgb,
+              var(--baw-accent, #22c55e) 52%,
+              var(--border, #334155)
+            );
+            background: color-mix(in srgb, var(--surface, #172033) 86%, var(--brand, #22c55e));
+          }
+
+          .baw-bar {
+            width: 34%;
+            height: 4.4cqh;
+            margin-bottom: var(--space-3, 4cqh);
+            border-radius: 1.2cqh;
+            background: var(--muted, #94a3b8);
+            opacity: 0.5;
+          }
+
+          .baw-after .baw-bar {
+            background: var(--baw-accent, #22c55e);
+            opacity: 0.92;
+          }
+
+          .baw-line {
+            height: 2.4cqh;
+            margin-bottom: var(--space-2, 2.6cqh);
+            border-radius: 1.2cqh;
+            background: var(--muted, #94a3b8);
+            opacity: 0.4;
+          }
+
+          .baw-line:nth-of-type(2) {
+            width: 92%;
+          }
+
+          .baw-line:nth-of-type(3) {
+            width: 68%;
+          }
+
+          .baw-line:nth-of-type(4) {
+            width: 44%;
+          }
+
+          .baw-after .baw-line {
+            background: color-mix(in srgb, var(--brand, #22c55e) 70%, var(--fg, #f8fafc));
+            opacity: 0.75;
+          }
+
+          /* Label chips live outside the slots so they always render above
+             caller content. The after chip is clipped with its own panel, so
+             it appears only once the wipe has passed it. */
+          .baw-chip {
+            position: absolute;
+            z-index: 4;
+            top: var(--space-3, 4cqh);
+            padding: var(--space-1, 1.2cqh) var(--space-2, 2.2cqw);
+            border: 0.14cqw solid var(--border, #334155);
+            border-radius: 999cqw;
+            background: color-mix(in srgb, var(--surface, #172033) 88%, var(--bg, #07111f));
+            color: var(--muted, #94a3b8);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: min(3cqw, 4.2cqh);
+            font-weight: 600;
+            letter-spacing: 0.08em;
+            line-height: 1;
+            text-transform: uppercase;
+            white-space: nowrap;
+          }
+
+          .baw-chip:empty {
+            display: none;
+          }
+
+          .baw-before .baw-chip {
+            right: var(--space-3, 4cqw);
+          }
+
+          .baw-after .baw-chip {
+            left: var(--space-3, 4cqw);
+            border-color: color-mix(
+              in srgb,
+              var(--baw-accent, #22c55e) 62%,
+              var(--border, #334155)
+            );
+            color: var(--fg, #f8fafc);
+          }
+
+          .baw-divider {
+            position: absolute;
+            z-index: 5;
+            top: 0;
+            bottom: 0;
+            left: calc(var(--baw-split) * 1%);
+            width: 0.4cqw;
+            transform: translateX(-50%);
+            background: var(--fg, #f8fafc);
+            pointer-events: none;
+          }
+
+          .baw-divider::after {
+            content: "";
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            width: min(5cqw, 7cqh);
+            aspect-ratio: 1;
+            transform: translate(-50%, -50%);
+            border: 0.3cqw solid var(--baw-accent, #22c55e);
+            border-radius: 50%;
+            background: var(--fg, #f8fafc);
+          }
+        </style>
+
+        <div
+          id="before-after-wipe-clip"
+          class="baw-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="baw-stage">
+            <section class="baw-panel baw-before" aria-label="Before panel">
+              <div class="baw-slot" data-slot="before">
+                <!-- SLOT "before": replace the children of this element with
+                     your own content (img, video, or HTML). -->
+                <div class="baw-default" aria-hidden="true">
+                  <div class="baw-card">
+                    <div class="baw-bar"></div>
+                    <div class="baw-line"></div>
+                    <div class="baw-line"></div>
+                    <div class="baw-line"></div>
+                  </div>
+                </div>
+              </div>
+              <div class="baw-chip baw-chip-a"></div>
+            </section>
+
+            <section class="baw-panel baw-after" aria-label="After panel">
+              <div class="baw-slot" data-slot="after">
+                <!-- SLOT "after": replace the children of this element with
+                     your own content (img, video, or HTML). -->
+                <div class="baw-default" aria-hidden="true">
+                  <div class="baw-card">
+                    <div class="baw-bar"></div>
+                    <div class="baw-line"></div>
+                    <div class="baw-line"></div>
+                    <div class="baw-line"></div>
+                  </div>
+                </div>
+              </div>
+              <div class="baw-chip baw-chip-b"></div>
+            </section>
+
+            <div class="baw-divider" aria-hidden="true"></div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            // Literal id: mount flattening strips data-composition-id from the
+            // live root before this timeline registers.
+            var compositionId = "before-after-wipe";
+            var stage = root.querySelector(".baw-stage");
+            var divider = root.querySelector(".baw-divider");
+            var chipA = root.querySelector(".baw-chip-a");
+            var chipB = root.querySelector(".baw-chip-b");
+
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var labelA = vars.label_a == null ? "Before" : String(vars.label_a);
+            var labelB = vars.label_b == null ? "After" : String(vars.label_b);
+            var rawSplit = vars.rest_split == null ? 50 : Number(vars.rest_split);
+            // INVARIANT: rest_split always clamps into the declared 0-100 range.
+            var restSplit = Number.isFinite(rawSplit) ? Math.max(0, Math.min(100, rawSplit)) : 50;
+            var rawWipeAt = vars.wipe_at == null ? 0.25 : Number(vars.wipe_at);
+            var wipeAt = Number.isFinite(rawWipeAt) ? Math.max(0, Math.min(8, rawWipeAt)) : 0.25;
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #22c55e)",
+              blue: "var(--accent, #38bdf8)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            // The bundler mirrors composition variables as scoped CSS custom
+            // props, so this unit's own accent variable shadows the contract
+            // --accent token inside the subtree ("blue" is a valid CSS color
+            // and would render pure blue). When the shadow is present, fall
+            // back to the literal contract value instead of var(--accent).
+            var computedAccent = getComputedStyle(root).getPropertyValue("--accent").trim();
+            if (
+              computedAccent === "green" ||
+              computedAccent === "blue" ||
+              computedAccent === "violet"
+            ) {
+              accentColors.blue = "#38bdf8";
+            }
+            // INVARIANT: only none | fade | up reaches the timeline.
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            chipA.textContent = labelA;
+            chipB.textContent = labelB;
+            root.style.setProperty("--baw-accent", accentColors[accent]);
+
+            // RETIME RANGE: fixed IN and OUT scale together only when D is too
+            // short. HOLD is the sole elastic phase. Never use timeScale().
+            var STAGE_IN_BASE = 0.32;
+            var WIPE_DURATION_BASE = 1.05;
+            var IN_BASE = wipeAt + WIPE_DURATION_BASE;
+            var OUT_BASE = exit === "none" ? 0 : 0.5;
+
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var totalBase = IN_BASE + OUT_BASE;
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var STAGE_IN = Math.min(STAGE_IN_BASE * scale, IN);
+            var WIPE_AT = wipeAt * scale;
+            var WIPE_DURATION = WIPE_DURATION_BASE * scale;
+            var WIPE_END = IN;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var OUT_START = IN + HOLD;
+
+            function fireSfx(id, t) {
+              root.dispatchEvent(
+                new CustomEvent("hf:sfx", { detail: { id: id, t: t }, bubbles: true }),
+              );
+            }
+
+            // Explicit both-endpoints state makes tl.seek(0) deterministic.
+            // --baw-split is the only owner of both clip and divider progress.
+            // The divider starts hidden: at split 0 its knob would render
+            // half-clipped at the frame edge for the whole lead-in.
+            gsap.set(stage, { opacity: 0, y: 0, "--baw-split": 0 });
+            gsap.set(divider, { autoAlpha: 0 });
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: stage settle, then ONE wipe pass travels to rest_split and
+            // stays there. The divider fades in as it departs the left edge.
+            tl.to(stage, { opacity: 1, duration: STAGE_IN, ease: "power2.out" }, 0);
+            tl.to(
+              stage,
+              { "--baw-split": restSplit, duration: WIPE_DURATION, ease: "sine.inOut" },
+              WIPE_AT,
+            );
+            tl.fromTo(
+              divider,
+              { autoAlpha: 0 },
+              {
+                autoAlpha: 1,
+                duration: Math.min(0.22 * scale, WIPE_DURATION),
+                ease: "power1.out",
+                immediateRender: false,
+              },
+              WIPE_AT,
+            );
+            tl.call(
+              function () {
+                fireSfx("wipe-land-soft", WIPE_END);
+              },
+              [],
+              WIPE_END,
+            );
+
+            // HOLD: deliberately steady at the resting split.
+
+            // OUT: only when the exit variable asks for one; exit none holds
+            // the final comparison frame (frame roots own transitions).
+            if (exit !== "none") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+              if (exit === "up") {
+                tl.to(stage, { y: "-6cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              }
+            }
+
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/before-after-wipe/demo.html b/registry/components/before-after-wipe/demo.html
new file mode 100644
index 0000000000..4803d7312d
--- /dev/null
+++ b/registry/components/before-after-wipe/demo.html
@@ -0,0 +1,82 @@
+<!doctype html>
+<!--
+  before-after-wipe demo. Full-bleed mount on a light editorial backdrop: the
+  wipe sweeps the entire 1920x1080 frame, proving the before/after reveal
+  works as a full-frame transition rather than inside a small card.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>before-after-wipe Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #f4f6f9);
+      }
+
+      #root {
+        --bg: #f4f6f9;
+        --fg: #14161b;
+        --surface: #ffffff;
+        --border: #dfe4ec;
+        --brand: #1d4ed8;
+        --accent: #0284c7;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 40%, #ffffff 0%, var(--bg, #f4f6f9) 70%);
+      }
+
+      .mount-stage {
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        container-type: size;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="before-after-wipe-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="before-after-wipe-mount"
+        class="mount-stage clip"
+        data-composition-id="before-after-wipe"
+        data-composition-src="./before-after-wipe.html"
+        data-variable-values='{"label_a":"BEFORE","label_b":"AFTER","rest_split":55,"wipe_at":0.8,"accent":"violet"}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="1920"
+        data-height="1080"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["before-after-wipe-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/before-after-wipe/registry-item.json b/registry/components/before-after-wipe/registry-item.json
new file mode 100644
index 0000000000..9daf70acdd
--- /dev/null
+++ b/registry/components/before-after-wipe/registry-item.json
@@ -0,0 +1,88 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "before-after-wipe",
+  "type": "hyperframes:component",
+  "title": "Before After Wipe",
+  "description": "Two full-bleed content slots compare before and after states as a persistent divider wipes the after layer over the before layer and rests at a configurable split. Callers fill the named before/after slot panels; token-styled defaults render when a slot is left empty.",
+  "tags": ["prop", "ui-props", "compare", "holdable", "before-after", "wipe", "slots"],
+  "jobs": ["compare"],
+  "family": "ui-props",
+  "profile": "holdable",
+  "evidence": "Wave J U-B: comparison-split divider-wipe mechanic ported onto real content slots",
+  "syncPoints": [{ "id": "wipe-land", "phase": "in", "offset": 1.3 }],
+  "files": [
+    {
+      "path": "before-after-wipe.html",
+      "target": "compositions/components/before-after-wipe.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "label_a",
+      "type": "string",
+      "role": "content",
+      "label": "Before label",
+      "description": "Chip shown on the base before panel. Blank hides the chip.",
+      "default": "Before"
+    },
+    {
+      "id": "label_b",
+      "type": "string",
+      "role": "content",
+      "label": "After label",
+      "description": "Chip shown on the revealed after panel. Blank hides the chip.",
+      "default": "After"
+    },
+    {
+      "id": "rest_split",
+      "type": "number",
+      "role": "layout",
+      "label": "Resting split",
+      "description": "Divider resting position after the wipe lands.",
+      "default": 50,
+      "min": 0,
+      "max": 100,
+      "step": 1,
+      "unit": "%"
+    },
+    {
+      "id": "wipe_at",
+      "type": "number",
+      "role": "timing",
+      "label": "Wipe start",
+      "description": "Seconds after mount start when the wipe begins.",
+      "default": 0.25,
+      "min": 0,
+      "max": 8,
+      "step": 0.05,
+      "unit": "s"
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Divider handle and after chip color.",
+      "default": "green",
+      "options": [
+        { "value": "green", "label": "Green" },
+        { "value": "blue", "label": "Blue" },
+        { "value": "violet", "label": "Violet" }
+      ]
+    },
+    {
+      "id": "exit",
+      "type": "enum",
+      "role": "timing",
+      "label": "Exit",
+      "description": "Outgoing transition. None holds the final comparison frame.",
+      "default": "none",
+      "options": [
+        { "value": "none", "label": "None" },
+        { "value": "fade", "label": "Fade" },
+        { "value": "up", "label": "Up" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/blur-in/blur-in.html b/registry/components/blur-in/blur-in.html
new file mode 100644
index 0000000000..2354c5c895
--- /dev/null
+++ b/registry/components/blur-in/blur-in.html
@@ -0,0 +1,239 @@
+<!--
+  Blur In - Operator Black content-focus reveal primitive.
+
+  Paste the markup, CSS and script into a composition. Use the timeline
+  integration note at the bottom as the starting point for deterministic GSAP
+  animation.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result as a custom property
+  the CSS below consumes. The timeline recipe at the bottom is untouched by
+  them: it keeps resolving the same words out of the same blur.
+
+    - size (24 to 120, default 52, in px): the type size of the words. The gap
+      between words is set in em, so it scales with this.
+    - tone (strong | muted | accent, default strong): word colour. strong is
+      the headline text token, muted the supporting one, accent the theme
+      green, so all three track light and dark frames.
+    - align (left | center | right, default left): where the words sit across
+      the frame.
+
+  On every default the result is identical to the original: 52px strong words,
+  left aligned.
+-->
+
+<div
+  data-hf-ui-root
+  class="hf-ui-blur-in"
+  aria-label="Design systems for video"
+  data-composition-variables='[
+    { "id": "size", "type": "number", "role": "style", "label": "Size", "description": "Type size of the revealed words in pixels; the gap between words scales with it.", "default": 52, "min": 24, "max": 120, "step": 2, "unit": "px" },
+    { "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Word colour: strong for headlines, muted for supporting lines, accent for the brand green.", "default": "strong", "options": [{ "value": "strong", "label": "Strong" }, { "value": "muted", "label": "Muted" }, { "value": "accent", "label": "Accent" }] },
+    { "id": "align", "type": "enum", "role": "style", "label": "Align", "description": "Horizontal alignment of the words in the frame.", "default": "left", "options": [{ "value": "left", "label": "Left" }, { "value": "center", "label": "Center" }, { "value": "right", "label": "Right" }] }
+  ]'
+>
+  <span>Design</span>
+  <span>systems</span>
+  <span>for</span>
+  <span>video</span>
+</div>
+
+<style>
+  /* hf-ui:tokens:start */
+  /* prettier-ignore */
+  [data-hf-ui-root] {
+    --_hf-ui-accent: var(--hf-ui-accent, #3ce6ac);
+    --_hf-ui-action: var(--hf-ui-action, #eeeeee);
+    --_hf-ui-action-contrast: var(--hf-ui-action-contrast, #111111);
+    --_hf-ui-border: var(--hf-ui-border, #2a2a2a);
+    --_hf-ui-border-strong: var(--hf-ui-border-strong, #383838);
+    --_hf-ui-canvas: var(--hf-ui-canvas, #0a0a0a);
+    --_hf-ui-control-border: var(--hf-ui-control-border, #686868);
+    --_hf-ui-control-border-hover: var(--hf-ui-control-border-hover, #777777);
+    --_hf-ui-control-height: var(--hf-ui-control-height, 40px);
+    --_hf-ui-danger: var(--hf-ui-danger, #ff7878);
+    --_hf-ui-data-1: var(--hf-ui-data-1, #3ce6ac);
+    --_hf-ui-data-2: var(--hf-ui-data-2, #63a5ff);
+    --_hf-ui-data-3: var(--hf-ui-data-3, #e9ab55);
+    --_hf-ui-data-4: var(--hf-ui-data-4, #a78bfa);
+    --_hf-ui-data-5: var(--hf-ui-data-5, #ff8a75);
+    --_hf-ui-duration-drawer-enter: var(--hf-ui-duration-drawer-enter, 360ms);
+    --_hf-ui-duration-drawer-exit: var(--hf-ui-duration-drawer-exit, 240ms);
+    --_hf-ui-duration-modal-enter: var(--hf-ui-duration-modal-enter, 280ms);
+    --_hf-ui-duration-modal-exit: var(--hf-ui-duration-modal-exit, 180ms);
+    --_hf-ui-duration-overlay-enter: var(--hf-ui-duration-overlay-enter, 210ms);
+    --_hf-ui-duration-overlay-exit: var(--hf-ui-duration-overlay-exit, 140ms);
+    --_hf-ui-duration-press: var(--hf-ui-duration-press, 120ms);
+    --_hf-ui-duration-state: var(--hf-ui-duration-state, 160ms);
+    --_hf-ui-ease-enter: var(--hf-ui-ease-enter, cubic-bezier(0.32, 0.72, 0, 1));
+    --_hf-ui-ease-exit: var(--hf-ui-ease-exit, cubic-bezier(0.23, 1, 0.32, 1));
+    --_hf-ui-ease-response: var(--hf-ui-ease-response, cubic-bezier(0.23, 1, 0.32, 1));
+    --_hf-ui-font-mono: var(--hf-ui-font-mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
+    --_hf-ui-font-sans: var(--hf-ui-font-sans, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
+    --_hf-ui-hit-target: var(--hf-ui-hit-target, 44px);
+    --_hf-ui-radius-control: var(--hf-ui-radius-control, 5px);
+    --_hf-ui-radius-overlay: var(--hf-ui-radius-overlay, 10px);
+    --_hf-ui-radius-surface: var(--hf-ui-radius-surface, 7px);
+    --_hf-ui-shadow-contact: var(--hf-ui-shadow-contact, 0 8px 18px rgba(0, 0, 0, 0.38));
+    --_hf-ui-shadow-inset: var(--hf-ui-shadow-inset, inset 0 1px 0 rgba(255, 255, 255, 0.035));
+    --_hf-ui-shadow-modal: var(--hf-ui-shadow-modal, 0 18px 46px rgba(0, 0, 0, 0.52));
+    --_hf-ui-space-1: var(--hf-ui-space-1, 4px);
+    --_hf-ui-space-12: var(--hf-ui-space-12, 48px);
+    --_hf-ui-space-16: var(--hf-ui-space-16, 64px);
+    --_hf-ui-space-2: var(--hf-ui-space-2, 8px);
+    --_hf-ui-space-3: var(--hf-ui-space-3, 12px);
+    --_hf-ui-space-4: var(--hf-ui-space-4, 16px);
+    --_hf-ui-space-6: var(--hf-ui-space-6, 24px);
+    --_hf-ui-space-8: var(--hf-ui-space-8, 32px);
+    --_hf-ui-surface: var(--hf-ui-surface, #141414);
+    --_hf-ui-surface-inset: var(--hf-ui-surface-inset, #101010);
+    --_hf-ui-surface-raised: var(--hf-ui-surface-raised, #1a1a1a);
+    --_hf-ui-text: var(--hf-ui-text, #e5e5e5);
+    --_hf-ui-text-faint: var(--hf-ui-text-faint, #7e7e7e);
+    --_hf-ui-text-muted: var(--hf-ui-text-muted, #929292);
+    --_hf-ui-text-strong: var(--hf-ui-text-strong, #f3f3f3);
+    --_hf-ui-warning: var(--hf-ui-warning, #e9ab55);
+    --_hf-ui-weight-medium: var(--hf-ui-weight-medium, 500);
+    --_hf-ui-weight-regular: var(--hf-ui-weight-regular, 400);
+    --_hf-ui-weight-semibold: var(--hf-ui-weight-semibold, 600);
+    box-sizing: border-box;
+    color-scheme: dark;
+    font-family: var(--_hf-ui-font-sans);
+  }
+  /* prettier-ignore */
+  [data-hf-ui-root] *,
+  [data-hf-ui-root] *::before,
+  [data-hf-ui-root] *::after {
+    box-sizing: border-box;
+  }
+  /* prettier-ignore */
+  [data-hf-theme="light"] [data-hf-ui-root],
+  [data-hf-ui-root][data-hf-theme="light"] {
+    --_hf-ui-accent: var(--hf-ui-accent, #087a57);
+    --_hf-ui-action: var(--hf-ui-action, #171717);
+    --_hf-ui-action-contrast: var(--hf-ui-action-contrast, #ffffff);
+    --_hf-ui-border: var(--hf-ui-border, #e0dfdb);
+    --_hf-ui-border-strong: var(--hf-ui-border-strong, #cbc9c3);
+    --_hf-ui-canvas: var(--hf-ui-canvas, #f6f5f1);
+    --_hf-ui-control-border: var(--hf-ui-control-border, #888888);
+    --_hf-ui-control-border-hover: var(--hf-ui-control-border-hover, #6f6e68);
+    --_hf-ui-danger: var(--hf-ui-danger, #a61b1b);
+    --_hf-ui-data-1: var(--hf-ui-data-1, #087a57);
+    --_hf-ui-data-2: var(--hf-ui-data-2, #245ea8);
+    --_hf-ui-data-3: var(--hf-ui-data-3, #8a4b00);
+    --_hf-ui-data-4: var(--hf-ui-data-4, #6d3fc0);
+    --_hf-ui-data-5: var(--hf-ui-data-5, #a83d2d);
+    --_hf-ui-shadow-contact: var(--hf-ui-shadow-contact, 0 7px 16px rgba(26, 24, 20, 0.13));
+    --_hf-ui-shadow-inset: var(--hf-ui-shadow-inset, inset 0 1px 0 rgba(255, 255, 255, 0.78));
+    --_hf-ui-shadow-modal: var(--hf-ui-shadow-modal, 0 18px 46px rgba(26, 24, 20, 0.18));
+    --_hf-ui-surface: var(--hf-ui-surface, #ffffff);
+    --_hf-ui-surface-inset: var(--hf-ui-surface-inset, #f0efeb);
+    --_hf-ui-surface-raised: var(--hf-ui-surface-raised, #ffffff);
+    --_hf-ui-text: var(--hf-ui-text, #171717);
+    --_hf-ui-text-faint: var(--hf-ui-text-faint, #6f6e68);
+    --_hf-ui-text-muted: var(--hf-ui-text-muted, #5f5f5a);
+    --_hf-ui-text-strong: var(--hf-ui-text-strong, #0a0a0a);
+    --_hf-ui-warning: var(--hf-ui-warning, #8a4b00);
+    color-scheme: light;
+  }
+  /* prettier-ignore */
+  [data-hf-ui-root]:focus-visible {
+    outline: 2px solid var(--_hf-ui-accent);
+    outline-offset: 3px;
+  }
+  /* prettier-ignore */
+  [data-hf-rendering="true"][data-hf-ui-root],
+  [data-hf-rendering="true"] [data-hf-ui-root],
+  [data-hf-rendering="true"][data-hf-ui-root] *,
+  [data-hf-rendering="true"] [data-hf-ui-root] *,
+  [data-hf-rendering="true"][data-hf-ui-root]::before,
+  [data-hf-rendering="true"][data-hf-ui-root]::after,
+  [data-hf-rendering="true"] [data-hf-ui-root]::before,
+  [data-hf-rendering="true"] [data-hf-ui-root]::after,
+  [data-hf-rendering="true"][data-hf-ui-root] *::before,
+  [data-hf-rendering="true"][data-hf-ui-root] *::after,
+  [data-hf-rendering="true"] [data-hf-ui-root] *::before,
+  [data-hf-rendering="true"] [data-hf-ui-root] *::after {
+    animation-duration: 0s !important;
+    animation-delay: 0s !important;
+    transition-duration: 0s !important;
+    transition-delay: 0s !important;
+  }
+  /* prettier-ignore */
+  @media (prefers-reduced-motion: reduce) {
+    [data-hf-ui-root],
+    [data-hf-ui-root] *,
+    [data-hf-ui-root] *::before,
+    [data-hf-ui-root] *::after {
+      animation-duration: 0s !important;
+      animation-delay: 0s !important;
+      transition-duration: 0s !important;
+      transition-delay: 0s !important;
+      scroll-behavior: auto !important;
+    }
+  }
+  /* hf-ui:tokens:end */
+  .hf-ui-blur-in {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: var(--hf-blur-in-align, flex-start);
+    gap: 0.28em;
+    color: var(--hf-blur-in-color, var(--_hf-ui-text-strong));
+    font: var(--_hf-ui-weight-semibold) 52px/1 var(--_hf-ui-font-sans);
+    font-size: var(--hf-blur-in-size, 52px);
+    letter-spacing: -0.02em;
+  }
+  .hf-ui-blur-in span {
+    display: inline-block;
+    filter: blur(0px);
+    opacity: 1;
+    will-change: opacity, transform, filter;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    function clampNumber(value, min, max, fallback) {
+      var n = typeof value === "number" ? value : parseFloat(value);
+      if (!isFinite(n)) {
+        return fallback;
+      }
+      return Math.min(max, Math.max(min, n));
+    }
+
+    var tones = {
+      strong: "var(--_hf-ui-text-strong)",
+      muted: "var(--_hf-ui-text-muted)",
+      accent: "var(--_hf-ui-accent)",
+    };
+    var aligns = { left: "flex-start", center: "center", right: "flex-end" };
+
+    var size = clampNumber(vars.size, 24, 120, 52);
+    var tone = tones[pick(tones, vars.tone, "strong")];
+    var align = aligns[pick(aligns, vars.align, "left")];
+
+    var roots = document.querySelectorAll(".hf-ui-blur-in");
+    for (var i = 0; i < roots.length; i += 1) {
+      roots[i].style.setProperty("--hf-blur-in-size", size + "px");
+      roots[i].style.setProperty("--hf-blur-in-color", tone);
+      roots[i].style.setProperty("--hf-blur-in-align", align);
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-ui-blur-in span', { opacity: 0, y: 8, filter: 'blur(10px)' }, { opacity: 1, y: 0, filter: 'blur(0px)', duration: 0.36, stagger: 0.04, ease: 'power3.out' }, startTime);
+-->
diff --git a/registry/components/blur-in/demo.html b/registry/components/blur-in/demo.html
new file mode 100644
index 0000000000..5e9093846c
--- /dev/null
+++ b/registry/components/blur-in/demo.html
@@ -0,0 +1,265 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Blur In — Operator Black</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      body {
+        background: #0a0a0a;
+      }
+      .hf-ui-demo-canvas {
+        width: 1920px;
+        height: 1080px;
+        box-sizing: border-box;
+        display: grid;
+        grid-template-rows: 1fr auto;
+        place-items: center;
+        padding: 96px;
+        background: #0a0a0a;
+        color: #e5e5e5;
+        font-family:
+          ui-sans-serif,
+          -apple-system,
+          BlinkMacSystemFont,
+          "Segoe UI",
+          sans-serif;
+      }
+      .hf-ui-demo-stage {
+        display: grid;
+        place-items: center;
+        min-width: 0;
+        max-width: 100%;
+      }
+      .hf-ui-demo-caption {
+        justify-self: start;
+        color: #929292;
+        font:
+          500 18px/1.4 ui-monospace,
+          "SFMono-Regular",
+          Menlo,
+          Consolas,
+          monospace;
+        letter-spacing: 0.01em;
+      }
+    </style>
+  </head>
+  <body>
+    <main
+      class="hf-ui-demo-canvas"
+      data-composition-id="blur-in-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-hf-rendering="true"
+      data-hf-theme="dark"
+    >
+      <!-- prettier-ignore -->
+      <section class="hf-ui-demo-stage" aria-label="Blur In specimen" inert>
+        <!-- hf-ui:canonical:start -->
+<!--
+  Blur In - Operator Black content-focus reveal primitive.
+
+  Paste the markup and CSS into a composition. Use the timeline integration
+  note at the bottom as the starting point for deterministic GSAP animation.
+-->
+
+<div data-hf-ui-root class="hf-ui-blur-in" aria-label="Design systems for video">
+  <span>Design</span>
+  <span>systems</span>
+  <span>for</span>
+  <span>video</span>
+</div>
+
+<style>
+  /* hf-ui:tokens:start */
+  /* prettier-ignore */
+  [data-hf-ui-root] {
+    --_hf-ui-accent: var(--hf-ui-accent, #3ce6ac);
+    --_hf-ui-action: var(--hf-ui-action, #eeeeee);
+    --_hf-ui-action-contrast: var(--hf-ui-action-contrast, #111111);
+    --_hf-ui-border: var(--hf-ui-border, #2a2a2a);
+    --_hf-ui-border-strong: var(--hf-ui-border-strong, #383838);
+    --_hf-ui-canvas: var(--hf-ui-canvas, #0a0a0a);
+    --_hf-ui-control-border: var(--hf-ui-control-border, #686868);
+    --_hf-ui-control-border-hover: var(--hf-ui-control-border-hover, #777777);
+    --_hf-ui-control-height: var(--hf-ui-control-height, 40px);
+    --_hf-ui-danger: var(--hf-ui-danger, #ff7878);
+    --_hf-ui-data-1: var(--hf-ui-data-1, #3ce6ac);
+    --_hf-ui-data-2: var(--hf-ui-data-2, #63a5ff);
+    --_hf-ui-data-3: var(--hf-ui-data-3, #e9ab55);
+    --_hf-ui-data-4: var(--hf-ui-data-4, #a78bfa);
+    --_hf-ui-data-5: var(--hf-ui-data-5, #ff8a75);
+    --_hf-ui-duration-drawer-enter: var(--hf-ui-duration-drawer-enter, 360ms);
+    --_hf-ui-duration-drawer-exit: var(--hf-ui-duration-drawer-exit, 240ms);
+    --_hf-ui-duration-modal-enter: var(--hf-ui-duration-modal-enter, 280ms);
+    --_hf-ui-duration-modal-exit: var(--hf-ui-duration-modal-exit, 180ms);
+    --_hf-ui-duration-overlay-enter: var(--hf-ui-duration-overlay-enter, 210ms);
+    --_hf-ui-duration-overlay-exit: var(--hf-ui-duration-overlay-exit, 140ms);
+    --_hf-ui-duration-press: var(--hf-ui-duration-press, 120ms);
+    --_hf-ui-duration-state: var(--hf-ui-duration-state, 160ms);
+    --_hf-ui-ease-enter: var(--hf-ui-ease-enter, cubic-bezier(0.32, 0.72, 0, 1));
+    --_hf-ui-ease-exit: var(--hf-ui-ease-exit, cubic-bezier(0.23, 1, 0.32, 1));
+    --_hf-ui-ease-response: var(--hf-ui-ease-response, cubic-bezier(0.23, 1, 0.32, 1));
+    --_hf-ui-font-mono: var(--hf-ui-font-mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
+    --_hf-ui-font-sans: var(--hf-ui-font-sans, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
+    --_hf-ui-hit-target: var(--hf-ui-hit-target, 44px);
+    --_hf-ui-radius-control: var(--hf-ui-radius-control, 5px);
+    --_hf-ui-radius-overlay: var(--hf-ui-radius-overlay, 10px);
+    --_hf-ui-radius-surface: var(--hf-ui-radius-surface, 7px);
+    --_hf-ui-shadow-contact: var(--hf-ui-shadow-contact, 0 8px 18px rgba(0, 0, 0, 0.38));
+    --_hf-ui-shadow-inset: var(--hf-ui-shadow-inset, inset 0 1px 0 rgba(255, 255, 255, 0.035));
+    --_hf-ui-shadow-modal: var(--hf-ui-shadow-modal, 0 18px 46px rgba(0, 0, 0, 0.52));
+    --_hf-ui-space-1: var(--hf-ui-space-1, 4px);
+    --_hf-ui-space-12: var(--hf-ui-space-12, 48px);
+    --_hf-ui-space-16: var(--hf-ui-space-16, 64px);
+    --_hf-ui-space-2: var(--hf-ui-space-2, 8px);
+    --_hf-ui-space-3: var(--hf-ui-space-3, 12px);
+    --_hf-ui-space-4: var(--hf-ui-space-4, 16px);
+    --_hf-ui-space-6: var(--hf-ui-space-6, 24px);
+    --_hf-ui-space-8: var(--hf-ui-space-8, 32px);
+    --_hf-ui-surface: var(--hf-ui-surface, #141414);
+    --_hf-ui-surface-inset: var(--hf-ui-surface-inset, #101010);
+    --_hf-ui-surface-raised: var(--hf-ui-surface-raised, #1a1a1a);
+    --_hf-ui-text: var(--hf-ui-text, #e5e5e5);
+    --_hf-ui-text-faint: var(--hf-ui-text-faint, #7e7e7e);
+    --_hf-ui-text-muted: var(--hf-ui-text-muted, #929292);
+    --_hf-ui-text-strong: var(--hf-ui-text-strong, #f3f3f3);
+    --_hf-ui-warning: var(--hf-ui-warning, #e9ab55);
+    --_hf-ui-weight-medium: var(--hf-ui-weight-medium, 500);
+    --_hf-ui-weight-regular: var(--hf-ui-weight-regular, 400);
+    --_hf-ui-weight-semibold: var(--hf-ui-weight-semibold, 600);
+    box-sizing: border-box;
+    color-scheme: dark;
+    font-family: var(--_hf-ui-font-sans);
+  }
+  /* prettier-ignore */
+  [data-hf-ui-root] *,
+  [data-hf-ui-root] *::before,
+  [data-hf-ui-root] *::after {
+    box-sizing: border-box;
+  }
+  /* prettier-ignore */
+  [data-hf-theme="light"] [data-hf-ui-root],
+  [data-hf-ui-root][data-hf-theme="light"] {
+    --_hf-ui-accent: var(--hf-ui-accent, #087a57);
+    --_hf-ui-action: var(--hf-ui-action, #171717);
+    --_hf-ui-action-contrast: var(--hf-ui-action-contrast, #ffffff);
+    --_hf-ui-border: var(--hf-ui-border, #e0dfdb);
+    --_hf-ui-border-strong: var(--hf-ui-border-strong, #cbc9c3);
+    --_hf-ui-canvas: var(--hf-ui-canvas, #f6f5f1);
+    --_hf-ui-control-border: var(--hf-ui-control-border, #888888);
+    --_hf-ui-control-border-hover: var(--hf-ui-control-border-hover, #6f6e68);
+    --_hf-ui-danger: var(--hf-ui-danger, #a61b1b);
+    --_hf-ui-data-1: var(--hf-ui-data-1, #087a57);
+    --_hf-ui-data-2: var(--hf-ui-data-2, #245ea8);
+    --_hf-ui-data-3: var(--hf-ui-data-3, #8a4b00);
+    --_hf-ui-data-4: var(--hf-ui-data-4, #6d3fc0);
+    --_hf-ui-data-5: var(--hf-ui-data-5, #a83d2d);
+    --_hf-ui-shadow-contact: var(--hf-ui-shadow-contact, 0 7px 16px rgba(26, 24, 20, 0.13));
+    --_hf-ui-shadow-inset: var(--hf-ui-shadow-inset, inset 0 1px 0 rgba(255, 255, 255, 0.78));
+    --_hf-ui-shadow-modal: var(--hf-ui-shadow-modal, 0 18px 46px rgba(26, 24, 20, 0.18));
+    --_hf-ui-surface: var(--hf-ui-surface, #ffffff);
+    --_hf-ui-surface-inset: var(--hf-ui-surface-inset, #f0efeb);
+    --_hf-ui-surface-raised: var(--hf-ui-surface-raised, #ffffff);
+    --_hf-ui-text: var(--hf-ui-text, #171717);
+    --_hf-ui-text-faint: var(--hf-ui-text-faint, #6f6e68);
+    --_hf-ui-text-muted: var(--hf-ui-text-muted, #5f5f5a);
+    --_hf-ui-text-strong: var(--hf-ui-text-strong, #0a0a0a);
+    --_hf-ui-warning: var(--hf-ui-warning, #8a4b00);
+    color-scheme: light;
+  }
+  /* prettier-ignore */
+  [data-hf-ui-root]:focus-visible {
+    outline: 2px solid var(--_hf-ui-accent);
+    outline-offset: 3px;
+  }
+  /* prettier-ignore */
+  [data-hf-rendering="true"][data-hf-ui-root],
+  [data-hf-rendering="true"] [data-hf-ui-root],
+  [data-hf-rendering="true"][data-hf-ui-root] *,
+  [data-hf-rendering="true"] [data-hf-ui-root] *,
+  [data-hf-rendering="true"][data-hf-ui-root]::before,
+  [data-hf-rendering="true"][data-hf-ui-root]::after,
+  [data-hf-rendering="true"] [data-hf-ui-root]::before,
+  [data-hf-rendering="true"] [data-hf-ui-root]::after,
+  [data-hf-rendering="true"][data-hf-ui-root] *::before,
+  [data-hf-rendering="true"][data-hf-ui-root] *::after,
+  [data-hf-rendering="true"] [data-hf-ui-root] *::before,
+  [data-hf-rendering="true"] [data-hf-ui-root] *::after {
+    animation-duration: 0s !important;
+    animation-delay: 0s !important;
+    transition-duration: 0s !important;
+    transition-delay: 0s !important;
+  }
+  /* prettier-ignore */
+  @media (prefers-reduced-motion: reduce) {
+    [data-hf-ui-root],
+    [data-hf-ui-root] *,
+    [data-hf-ui-root] *::before,
+    [data-hf-ui-root] *::after {
+      animation-duration: 0s !important;
+      animation-delay: 0s !important;
+      transition-duration: 0s !important;
+      transition-delay: 0s !important;
+      scroll-behavior: auto !important;
+    }
+  }
+  /* hf-ui:tokens:end */
+  .hf-ui-blur-in {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.28em;
+    color: var(--_hf-ui-text-strong);
+    font: var(--_hf-ui-weight-semibold) 52px/1 var(--_hf-ui-font-sans);
+    letter-spacing: -0.02em;
+  }
+  .hf-ui-blur-in span {
+    display: inline-block;
+    filter: blur(0px);
+    opacity: 1;
+    will-change: opacity, transform, filter;
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-ui-blur-in span', { opacity: 0, y: 8, filter: 'blur(10px)' }, { opacity: 1, y: 0, filter: 'blur(0px)', duration: 0.36, stagger: 0.04, ease: 'power3.out' }, startTime);
+-->
+<!-- hf-ui:canonical:end -->
+      </section>
+      <p class="hf-ui-demo-caption">Blur In</p>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        tl.addLabel("start", 0);
+        tl.set(".hf-ui-demo-stage", { opacity: 1 }, 0);
+        tl.fromTo(
+          ".hf-ui-blur-in span",
+          { opacity: 0, y: 8, filter: "blur(10px)" },
+          {
+            opacity: 1,
+            y: 0,
+            filter: "blur(0px)",
+            duration: 0.36,
+            stagger: 0.04,
+            ease: "power3.out",
+          },
+          0.3,
+        );
+        tl.addLabel("end", 4);
+        tl.set(".hf-ui-demo-stage", { opacity: 1 }, "end");
+        window.__timelines = window.__timelines || {};
+        window.__timelines["blur-in-demo"] = tl;
+      </script>
+    </main>
+  </body>
+</html>
diff --git a/registry/components/blur-in/registry-item.json b/registry/components/blur-in/registry-item.json
new file mode 100644
index 0000000000..77dc982b61
--- /dev/null
+++ b/registry/components/blur-in/registry-item.json
@@ -0,0 +1,76 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "blur-in",
+  "type": "hyperframes:component",
+  "title": "Blur In",
+  "description": "An Operator Black word-level content reveal that resolves its own text from controlled blur",
+  "tags": ["video-primitive", "remocn-port", "blur-in", "text-effect"],
+  "files": [
+    {
+      "path": "blur-in.html",
+      "target": "compositions/components/blur-in.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "size",
+      "type": "number",
+      "role": "style",
+      "label": "Size",
+      "description": "Type size of the revealed words in pixels; the gap between words scales with it.",
+      "default": 52,
+      "min": 24,
+      "max": 120,
+      "step": 2,
+      "unit": "px"
+    },
+    {
+      "id": "tone",
+      "type": "enum",
+      "role": "style",
+      "label": "Tone",
+      "description": "Word colour: strong for headlines, muted for supporting lines, accent for the brand green.",
+      "default": "strong",
+      "options": [
+        {
+          "value": "strong",
+          "label": "Strong"
+        },
+        {
+          "value": "muted",
+          "label": "Muted"
+        },
+        {
+          "value": "accent",
+          "label": "Accent"
+        }
+      ]
+    },
+    {
+      "id": "align",
+      "type": "enum",
+      "role": "style",
+      "label": "Align",
+      "description": "Horizontal alignment of the words in the frame.",
+      "default": "left",
+      "options": [
+        {
+          "value": "left",
+          "label": "Left"
+        },
+        {
+          "value": "center",
+          "label": "Center"
+        },
+        {
+          "value": "right",
+          "label": "Right"
+        }
+      ]
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/blur-in.png"
+  }
+}
diff --git a/registry/components/blur-out-up/blur-out-up.html b/registry/components/blur-out-up/blur-out-up.html
new file mode 100644
index 0000000000..970e47bb4a
--- /dev/null
+++ b/registry/components/blur-out-up/blur-out-up.html
@@ -0,0 +1,110 @@
+<!--
+  Blur Out Up - remocn typography primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Drive the timeline
+  integration from a paused GSAP timeline so renders remain deterministic.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result as a custom property
+  the CSS above consumes. The timeline recipe below is untouched by them: it
+  keeps driving one offset and one blur, and these decide what that offset and
+  that blur mean on screen.
+
+    - direction (up | down | left | right, default up): where the offset
+      points. up rises into place, down drops in, left and right slide in
+      along the baseline.
+    - distance (close | standard | far, default standard): scales the offset.
+      close covers half the run, far nearly double, in the same time.
+    - blur (soft | standard | heavy, default standard): scales the blur radius,
+      from a light haze to a full smear.
+    - tone (ink | paper | accent, default ink): word colour. ink is near-black
+      for light frames, paper near-white for dark ones, accent rides --brand.
+
+  On every default the result is identical to the original: words rise 22px
+  through a 5px blur in near-black.
+-->
+
+<div
+  class="hf-remocn-blur-out-up"
+  data-composition-variables='[
+    { "id": "direction", "type": "enum", "role": "motion", "label": "Direction", "description": "Where the offset the timeline drives points.", "default": "up", "options": [{ "value": "up", "label": "Up" }, { "value": "down", "label": "Down" }, { "value": "left", "label": "Left" }, { "value": "right", "label": "Right" }] },
+    { "id": "distance", "type": "enum", "role": "motion", "label": "Distance", "description": "Scales the travel offset, so the words cover a shorter or longer run in the same time.", "default": "standard", "options": [{ "value": "close", "label": "Close" }, { "value": "standard", "label": "Standard" }, { "value": "far", "label": "Far" }] },
+    { "id": "blur", "type": "enum", "role": "style", "label": "Blur", "description": "Scales the blur radius the timeline drives, from a light haze to a full smear.", "default": "standard", "options": [{ "value": "soft", "label": "Soft" }, { "value": "standard", "label": "Standard" }, { "value": "heavy", "label": "Heavy" }] },
+    { "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Word colour: ink for light frames, paper for dark ones, accent rides --brand.", "default": "ink", "options": [{ "value": "ink", "label": "Ink" }, { "value": "paper", "label": "Paper" }, { "value": "accent", "label": "Accent" }] }
+  ]'
+>
+  <span>HELLO</span>
+</div>
+
+<style>
+  .hf-remocn-blur-out-up {
+    color: var(--hf-word-color, #18181b);
+    font-family: Inter, system-ui, sans-serif;
+    font-weight: 900;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-blur-out-up {
+    display: inline-flex;
+    gap: 12px;
+    font-size: 56px;
+    line-height: 1;
+  }
+  .hf-remocn-blur-out-up span {
+    display: inline-block;
+    transform: translate(
+        calc(var(--hf-word-x, 0px) + var(--hf-word-y, 0px) * var(--hf-word-axis-x, 0)),
+        calc(var(--hf-word-y, 0px) * var(--hf-word-axis-y, 1))
+      )
+      scale(var(--hf-word-scale, 1));
+    filter: blur(calc(var(--hf-word-blur, 0px) * var(--hf-word-blur-scale, 1)));
+    will-change: transform, filter, opacity;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    var axes = {
+      up: { x: 0, y: 1 },
+      down: { x: 0, y: -1 },
+      left: { x: -1, y: 0 },
+      right: { x: 1, y: 0 },
+    };
+    var reaches = { close: 0.5, standard: 1, far: 1.85 };
+    var blurScales = { soft: 0.45, standard: 1, heavy: 2.2 };
+    var tones = {
+      ink: "#18181b",
+      paper: "#fafafa",
+      accent: "var(--brand, #34d399)",
+    };
+
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var axis = axes[pick(axes, vars.direction, "up")];
+    var reach = reaches[pick(reaches, vars.distance, "standard")];
+    var blurScale = blurScales[pick(blurScales, vars.blur, "standard")];
+    var tone = tones[pick(tones, vars.tone, "ink")];
+
+    var roots = document.querySelectorAll(".hf-remocn-blur-out-up");
+    for (var i = 0; i < roots.length; i += 1) {
+      roots[i].style.setProperty("--hf-word-axis-x", String(axis.x * reach));
+      roots[i].style.setProperty("--hf-word-axis-y", String(axis.y * reach));
+      roots[i].style.setProperty("--hf-word-blur-scale", String(blurScale));
+      roots[i].style.setProperty("--hf-word-color", tone);
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-blur-out-up span', { opacity: 0, '--hf-word-y': '22px', '--hf-word-scale': 0.92, '--hf-word-blur': '5px' }, { opacity: 1, '--hf-word-y': '0px', '--hf-word-scale': 1, '--hf-word-blur': '0px', duration: 0.3, stagger: 0.055, ease: 'power3.out' }, startTime);
+-->
diff --git a/registry/components/blur-out-up/demo.html b/registry/components/blur-out-up/demo.html
new file mode 100644
index 0000000000..479502d45c
--- /dev/null
+++ b/registry/components/blur-out-up/demo.html
@@ -0,0 +1,92 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Blur Out Up - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        min-width: 900px;
+        min-height: 500px;
+        padding: 64px;
+        /* ponytail: scale wrapper — GSAP targets spans inside, not this element */
+        transform: scale(2.6);
+      }
+      .hf-remocn-blur-out-up {
+        color: #18181b;
+        font-family: Inter, system-ui, sans-serif;
+        font-weight: 900;
+        letter-spacing: -0.04em;
+      }
+      .hf-remocn-blur-out-up {
+        display: inline-flex;
+        gap: 12px;
+        font-size: 56px;
+        line-height: 1;
+      }
+      .hf-remocn-blur-out-up span {
+        display: inline-block;
+        transform: translate(var(--hf-word-x, 0px), var(--hf-word-y, 0px))
+          scale(var(--hf-word-scale, 1));
+        filter: blur(var(--hf-word-blur, 0px));
+        will-change: transform, filter, opacity;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="blur-out-up-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-blur-out-up"><span>BLUR</span><span>OUT</span><span>UP</span></div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-blur-out-up span",
+          { opacity: 0, "--hf-word-y": "22px", "--hf-word-scale": 0.92, "--hf-word-blur": "5px" },
+          {
+            opacity: 1,
+            "--hf-word-y": "0px",
+            "--hf-word-scale": 1,
+            "--hf-word-blur": "0px",
+            duration: 0.3,
+            stagger: 0.055,
+            ease: "power3.out",
+          },
+          startTime,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["blur-out-up-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/blur-out-up/registry-item.json b/registry/components/blur-out-up/registry-item.json
new file mode 100644
index 0000000000..979d57392d
--- /dev/null
+++ b/registry/components/blur-out-up/registry-item.json
@@ -0,0 +1,73 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "blur-out-up",
+  "type": "hyperframes:component",
+  "title": "Blur Out Up",
+  "description": "Words arrive clean and depart upward with increasing blur for airy exits.",
+  "tags": ["motion-primitive", "remocn-port", "typography"],
+  "files": [
+    {
+      "path": "blur-out-up.html",
+      "target": "compositions/components/blur-out-up.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "direction",
+      "type": "enum",
+      "role": "motion",
+      "label": "Direction",
+      "description": "Where the offset the timeline drives points.",
+      "default": "up",
+      "options": [
+        { "value": "up", "label": "Up" },
+        { "value": "down", "label": "Down" },
+        { "value": "left", "label": "Left" },
+        { "value": "right", "label": "Right" }
+      ]
+    },
+    {
+      "id": "distance",
+      "type": "enum",
+      "role": "motion",
+      "label": "Distance",
+      "description": "Scales the travel offset, so the words cover a shorter or longer run in the same time.",
+      "default": "standard",
+      "options": [
+        { "value": "close", "label": "Close" },
+        { "value": "standard", "label": "Standard" },
+        { "value": "far", "label": "Far" }
+      ]
+    },
+    {
+      "id": "blur",
+      "type": "enum",
+      "role": "style",
+      "label": "Blur",
+      "description": "Scales the blur radius the timeline drives, from a light haze to a full smear.",
+      "default": "standard",
+      "options": [
+        { "value": "soft", "label": "Soft" },
+        { "value": "standard", "label": "Standard" },
+        { "value": "heavy", "label": "Heavy" }
+      ]
+    },
+    {
+      "id": "tone",
+      "type": "enum",
+      "role": "style",
+      "label": "Tone",
+      "description": "Word colour: ink for light frames, paper for dark ones, accent rides --brand.",
+      "default": "ink",
+      "options": [
+        { "value": "ink", "label": "Ink" },
+        { "value": "paper", "label": "Paper" },
+        { "value": "accent", "label": "Accent" }
+      ]
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/blur-out-up.png"
+  }
+}
diff --git a/registry/components/bottom-up-letters/bottom-up-letters.html b/registry/components/bottom-up-letters/bottom-up-letters.html
new file mode 100644
index 0000000000..0005c2091e
--- /dev/null
+++ b/registry/components/bottom-up-letters/bottom-up-letters.html
@@ -0,0 +1,105 @@
+<!--
+  Bottom Up Letters - deterministic text splitter.
+
+  Add class="hf-bottom-up-letters" to a plain text element. This script wraps
+  each character in a span so your paused GSAP timeline can stagger the reveal.
+
+  Variables. This fragment has no markup of its own, so the declaration rides
+  the <style> element below; the runtime collects every element carrying
+  data-composition-variables, not just the document root. The script reads each
+  value, falls back to the declared default on anything missing or
+  unrecognised, and either changes how the text is split or writes a custom
+  property the CSS consumes. The timeline recipe below is untouched by them: it
+  still tweens opacity and y back to rest, and these decide what a single
+  stagger step covers and where rest is travelled from.
+
+    - unit (letter | word, default letter): what each animated span holds.
+      letter staggers glyph by glyph; word keeps whole words intact, so a long
+      line reads instead of shimmers.
+    - direction (up | down, default up): where the spans start. up starts
+      below the baseline and rises into place, down starts above and drops.
+    - travel (close | standard | far, default standard): how far each span
+      starts from rest, from 0.45em through 0.85em to 1.5em.
+
+  On every default the result is identical to the original: one span per
+  character, each starting 0.85em below the baseline.
+-->
+
+<style
+  data-composition-variables='[
+  { "id": "unit", "type": "enum", "role": "content", "label": "Split unit", "description": "What each animated span holds. Letter staggers glyph by glyph, word keeps whole words intact.", "default": "letter", "options": [{ "value": "letter", "label": "Letter" }, { "value": "word", "label": "Word" }] },
+  { "id": "direction", "type": "enum", "role": "motion", "label": "Direction", "description": "Where each span starts. Up starts below the baseline and rises, down starts above and drops.", "default": "up", "options": [{ "value": "up", "label": "Up" }, { "value": "down", "label": "Down" }] },
+  { "id": "travel", "type": "enum", "role": "motion", "label": "Travel", "description": "How far each span starts from its resting position, from 0.45em to 1.5em.", "default": "standard", "options": [{ "value": "close", "label": "Close" }, { "value": "standard", "label": "Standard" }, { "value": "far", "label": "Far" }] }
+]'
+>
+  .hf-bottom-up-letters {
+    display: inline-block;
+  }
+  .hf-bottom-up-letters-char {
+    display: inline-block;
+    opacity: 0;
+    transform: translate3d(
+      0,
+      calc(var(--hf-letters-travel, 0.85em) * var(--hf-letters-direction, 1)),
+      0
+    );
+    will-change: transform, opacity;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var travels = { close: "0.45em", standard: "0.85em", far: "1.5em" };
+    var directions = { up: "1", down: "-1" };
+    var units = { letter: true, word: true };
+
+    var travel = travels[pick(travels, vars.travel, "standard")];
+    var direction = directions[pick(directions, vars.direction, "up")];
+    var unit = pick(units, vars.unit, "letter");
+
+    document.querySelectorAll(".hf-bottom-up-letters").forEach((el) => {
+      el.style.setProperty("--hf-letters-travel", travel);
+      el.style.setProperty("--hf-letters-direction", direction);
+      if (el.dataset.hfLettersReady === "1") return;
+      const text = el.textContent || "";
+      el.textContent = "";
+      const parts = unit === "word" ? text.split(/(\s+)/) : Array.from(text);
+      for (const part of parts) {
+        if (part === "") continue;
+        if (unit === "word" && /^\s+$/.test(part)) {
+          el.appendChild(document.createTextNode(part));
+          continue;
+        }
+        const span = document.createElement("span");
+        span.className = "hf-bottom-up-letters-char";
+        span.textContent = part === " " ? "\u00a0" : part;
+        el.appendChild(span);
+      }
+      el.dataset.hfLettersReady = "1";
+    });
+  })();
+</script>
+
+<!--
+  Timeline integration:
+
+  tl.to(".hf-bottom-up-letters-char", {
+    opacity: 1,
+    y: 0,
+    duration: 0.48,
+    ease: "back.out(1.7)",
+    stagger: 0.025,
+  }, startTime);
+-->
diff --git a/registry/components/bottom-up-letters/demo.html b/registry/components/bottom-up-letters/demo.html
new file mode 100644
index 0000000000..46868643a8
--- /dev/null
+++ b/registry/components/bottom-up-letters/demo.html
@@ -0,0 +1,74 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Bottom Up Letters - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #16120e;
+        color: #f7ead6;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-bottom-up-letters {
+        display: inline-block;
+        font-size: 180px; /* ponytail: scaled up from 126px — fills ~65% of 1920px frame width */
+        line-height: 1;
+        font-weight: 900;
+        letter-spacing: -0.02em;
+      }
+      .hf-bottom-up-letters-char {
+        display: inline-block;
+        opacity: 0;
+        transform: translate3d(0, 0.85em, 0);
+        will-change: transform, opacity;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="bottom-up-letters-demo"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+    >
+      <div class="hf-bottom-up-letters">Build with motion</div>
+      <script>
+        document.querySelectorAll(".hf-bottom-up-letters").forEach((el) => {
+          const text = el.textContent || "";
+          el.textContent = "";
+          for (const char of text) {
+            const span = document.createElement("span");
+            span.className = "hf-bottom-up-letters-char";
+            span.textContent = char === " " ? "\u00a0" : char;
+            el.appendChild(span);
+          }
+        });
+        const tl = gsap.timeline({ paused: true });
+        tl.to(
+          ".hf-bottom-up-letters-char",
+          { opacity: 1, y: 0, duration: 0.48, ease: "back.out(1.7)", stagger: 0.025 },
+          0.45,
+        );
+        window.__timelines = window.__timelines || {};
+        window.__timelines["bottom-up-letters-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/bottom-up-letters/registry-item.json b/registry/components/bottom-up-letters/registry-item.json
new file mode 100644
index 0000000000..579fe39498
--- /dev/null
+++ b/registry/components/bottom-up-letters/registry-item.json
@@ -0,0 +1,78 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "bottom-up-letters",
+  "type": "hyperframes:component",
+  "title": "Bottom Up Letters",
+  "description": "Splits text into letters and reveals each glyph from below with deterministic staggered timing",
+  "tags": ["motion-primitive", "text", "letters", "reveal"],
+  "files": [
+    {
+      "path": "bottom-up-letters.html",
+      "target": "compositions/components/bottom-up-letters.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "unit",
+      "type": "enum",
+      "role": "content",
+      "label": "Split unit",
+      "description": "What each animated span holds. Letter staggers glyph by glyph, word keeps whole words intact.",
+      "default": "letter",
+      "options": [
+        {
+          "value": "letter",
+          "label": "Letter"
+        },
+        {
+          "value": "word",
+          "label": "Word"
+        }
+      ]
+    },
+    {
+      "id": "direction",
+      "type": "enum",
+      "role": "motion",
+      "label": "Direction",
+      "description": "Where each span starts. Up starts below the baseline and rises, down starts above and drops.",
+      "default": "up",
+      "options": [
+        {
+          "value": "up",
+          "label": "Up"
+        },
+        {
+          "value": "down",
+          "label": "Down"
+        }
+      ]
+    },
+    {
+      "id": "travel",
+      "type": "enum",
+      "role": "motion",
+      "label": "Travel",
+      "description": "How far each span starts from its resting position, from 0.45em to 1.5em.",
+      "default": "standard",
+      "options": [
+        {
+          "value": "close",
+          "label": "Close"
+        },
+        {
+          "value": "standard",
+          "label": "Standard"
+        },
+        {
+          "value": "far",
+          "label": "Far"
+        }
+      ]
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/bottom-up-letters.png"
+  }
+}
diff --git a/registry/components/browser-device-stage/README.md b/registry/components/browser-device-stage/README.md
new file mode 100644
index 0000000000..f747dbab5b
--- /dev/null
+++ b/registry/components/browser-device-stage/README.md
@@ -0,0 +1,97 @@
+# browser-device-stage
+
+A generic app surface presented in token-native device chrome. The stage settles in once (rise + soft scale, smooth ease-out), holds readable, and can optionally swap to a second screen at `swap_at` (a brief fade through the bare stage, so no frame shows two screens at partial opacity). The chrome is drawn entirely from contract tokens: hairline borders, surface mixes, muted dots, no traffic-light colors, no fake product branding.
+
+- 5s authored, elastic HOLD (the envelope never time-scales).
+- Timeline registered at `window.__timelines["browser-device-stage"]`.
+- Elastic root: no `data-width`/`data-height`, sized by the host clip, `cqmin` units.
+
+## Variables
+
+| Variable  | Type   | Default           | Notes                                                                                                                                 |
+| --------- | ------ | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| `chrome`  | enum   | `browser`         | `browser` (toolbar dots + address pill), `window` (title bar), `phone` (notch, portrait inset, centered).                             |
+| `title`   | string | `app.example.com` | Address pill text (browser) or title bar text (window). Phone shows no title.                                                         |
+| `swap_at` | number | `0`               | Seconds from mount start to swap to the second screen. `0` disables. Clamped inside the hold so it never fights the entrance or exit. |
+| `accent`  | enum   | `green`           | `green` rides `--brand`, `blue` rides `--accent`, `violet` rides `--accent-2`. Colors the skeleton mark, chip, and one card block.    |
+| `exit`    | enum   | `none`            | `none` holds the final frame (frame roots own transitions), `fade`, or `up`.                                                          |
+
+## The screen slot
+
+The screen area is a slot. Callers supply content by placing inert `<template>` elements anywhere in the **host page** (typically next to the mount clip). Templates never render on their own, and the runtime clears the host clip's children on mount, so the slot deliberately lives at document level:
+
+```html
+<template data-slot="browser-device-stage-screen"> ...first screen... </template>
+<template data-slot="browser-device-stage-screen-b">
+  ...second screen (used when swap_at > 0)...
+</template>
+```
+
+Slot content can be an `<img>`, a `<video>`, or arbitrary HTML. Direct `img`/`video` children of the screen are stretched to `object-fit: cover`. When no `screen` slot exists, the primitive renders a token-styled skeleton app (header bar, sidebar, content cards). When `swap_at > 0` and no `screen-b` slot exists, the second screen is a rearranged skeleton state so the swap still reads.
+
+Notes:
+
+- Slot lookup is by the fixed names above, so two slotted instances on one page share the same slot content. Give multiple instances distinct content by mounting them from different host frames.
+- A `<video>` in the slot is not seek-synced by the framework (framework-owned media playback applies to clips, not slot children). Prefer a still image or HTML for deterministic renders; if you need synced footage, use a media clip composition instead of this stage.
+- Slot HTML inherits the composition's fonts and tokens; style it inline or with your own host CSS.
+
+## Worked examples
+
+Mount host (any chrome):
+
+```html
+<div
+  class="clip"
+  data-composition-id="browser-device-stage"
+  data-composition-src="./components/browser-device-stage.html"
+  data-variable-values='{"chrome":"browser","title":"dash.acme.dev","swap_at":2.4,"accent":"blue"}'
+  data-start="0"
+  data-duration="5"
+  data-track-index="0"
+  style="position:absolute; inset:0; container-type:size;"
+></div>
+```
+
+### browser: product screenshot with a swap
+
+```html
+<template data-slot="browser-device-stage-screen">
+  <img src="./assets/dashboard-before.png" alt="" />
+</template>
+<template data-slot="browser-device-stage-screen-b">
+  <img src="./assets/dashboard-after.png" alt="" />
+</template>
+```
+
+Set `swap_at` to the moment the narration lands the change; the stage fades the first screen out, then rises the second in over the bare stage.
+
+### window: custom HTML screen
+
+```html
+<template data-slot="browser-device-stage-screen">
+  <div
+    style="position:absolute; inset:0; display:grid; place-items:center; background:var(--surface); color:var(--fg); font-family:var(--font-mono); font-size:3cqmin;"
+  >
+    $ hyperframes render scene.html
+  </div>
+</template>
+```
+
+Mount with `{"chrome":"window","title":"terminal"}` for a titled desktop window around your own markup.
+
+### phone: portrait screen
+
+```html
+<template data-slot="browser-device-stage-screen">
+  <img src="./assets/mobile-feed.png" alt="" />
+</template>
+```
+
+Mount with `{"chrome":"phone"}`. The device renders portrait and centered with a notch; leave roughly the top 8% of your artwork clear of critical content so the notch does not cover it. With no slot at all, the phone shows the skeleton in a single-column layout.
+
+## Motion envelope
+
+- IN 0.9s: one settle (rise from 4.5cqh + scale 0.965 to 1 + fade, power ease-out).
+- HOLD: elastic; a barely-there vertical drift, then authored stillness.
+- Swap (optional): 0.55s fade-through at `swap_at` (A empties, then B rises with a 1.6cqh slide), clamped into the hold.
+- OUT 0.5s only when `exit` is `fade` or `up`; the default `none` holds to the last frame.
diff --git a/registry/components/browser-device-stage/browser-device-stage.html b/registry/components/browser-device-stage/browser-device-stage.html
new file mode 100644
index 0000000000..5f37f6ed17
--- /dev/null
+++ b/registry/components/browser-device-stage/browser-device-stage.html
@@ -0,0 +1,648 @@
+<!doctype html>
+<!--
+  browser-device-stage -- HyperFrames video primitive (product demo / stage)
+
+  A generic app surface presented in token-native device chrome. One settle
+  entrance (rise + soft scale), then a slow readable hold; optionally the
+  screen swaps to a second screen at swap_at via a brief fade through the
+  bare stage (never two screens at partial opacity). The chrome is drawn
+  entirely from contract tokens: no traffic-light reds, no fake product
+  branding, hairline borders and surface mixes only.
+
+  Chrome (enum):
+    - browser: toolbar with three muted dots and a centered address pill
+      showing `title` in mono type.
+    - window: slim title bar with three muted dots and `title` centered in
+      body type.
+    - phone: portrait device, dark notch pill, bezel inset, centered.
+
+  The screen is a SLOT. Callers supply content by placing inert templates
+  anywhere in the HOST page (templates never render, and the runtime wipes
+  the host clip's own children on mount, so the slot lives at document
+  level):
+
+    <template data-slot="browser-device-stage-screen"> ... </template>
+    <template data-slot="browser-device-stage-screen-b"> ... </template>
+
+  Slot content may be an <img>, a muted <video>, or arbitrary HTML; direct
+  img/video children are stretched to cover the screen. When no screen slot
+  exists, the primitive renders a tasteful token-styled skeleton app (header
+  bar, sidebar, content cards; hairline borders, surface tokens, one accent
+  element). With swap_at > 0 and no screen-b slot, the second screen is a
+  rearranged skeleton state so the swap still reads.
+
+  Variables (declared in data-composition-variables below):
+    - chrome ("browser" | "window" | "phone", default "browser")
+    - title (string, default "app.example.com"): address pill / title bar text.
+    - swap_at (number seconds, default 0): swap to the second screen at
+      this offset from mount start; 0 disables. Clamped inside the hold so
+      the swap never fights the entrance or the exit.
+    - accent ("green" | "blue" | "violet", default "green"): green rides
+      --brand, blue rides --accent, violet rides --accent-2.
+    - exit ("none" | "fade" | "up", default "none"): frame roots own
+      transitions; the default holds the final frame to the last pixel.
+
+  Envelope, fixed IN and OUT with elastic HOLD only (never timeScale):
+    IN_BASE  = 0.90s  one settle: rise + soft scale + fade, smooth ease-out
+    HOLD     = max(0, D - IN - OUT); a barely-there vertical drift, then
+               authored stillness
+    OUT_BASE = 0.50s  only when exit != none
+    If D < IN_BASE + OUT_BASE, IN and OUT compress together.
+
+  Mount contract: the runtime clones only this template. #root fills the
+  host box (no data-width/data-height, container-type: size, cqmin units),
+  is styled via #root only, and registers one paused timeline under the
+  LITERAL "browser-device-stage" key. All state is set with explicit
+  endpoints (gsap.set + fromTo) so any seek order lands identical frames.
+-->
+<html
+  lang="en"
+  data-composition-id="browser-device-stage"
+  data-composition-duration="5"
+  data-composition-variables='[
+    { "id": "chrome", "type": "enum", "role": "content", "label": "Chrome", "description": "Device frame drawn around the screen slot.", "default": "browser", "options": [{ "value": "browser", "label": "Browser" }, { "value": "window", "label": "Window" }, { "value": "phone", "label": "Phone" }] },
+    { "id": "title", "type": "string", "role": "content", "label": "Title", "description": "Address pill text (browser) or title bar text (window).", "default": "app.example.com" },
+    { "id": "swap_at", "type": "number", "role": "content", "label": "Swap at", "description": "Seconds from mount start to swap to the second screen. 0 disables the swap.", "default": 0, "min": 0, "max": 30, "step": 0.1, "unit": "s" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Token the skeleton accent elements ride.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "style", "label": "Exit", "description": "Optional departure. None holds the final frame.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Browser Device Stage</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="browser-device-stage" data-duration="5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, ui-sans-serif, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .bds-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .bds-stage {
+            will-change: transform, opacity;
+          }
+
+          .bds-device {
+            display: grid;
+            grid-template-rows: auto minmax(0, 1fr);
+            overflow: hidden;
+            border: 0.16cqmin solid color-mix(in srgb, var(--border, #475569) 85%, transparent);
+            border-radius: calc(var(--radius, 2cqmin) * 1.3);
+            background: color-mix(in srgb, var(--surface, #0b1016) 96%, var(--bds-accent));
+            box-shadow: 0 3cqh 9cqh color-mix(in srgb, var(--bg, #000000) 45%, transparent);
+          }
+
+          .bds-browser,
+          .bds-window {
+            width: min(82cqw, 126cqh);
+            aspect-ratio: 16 / 10;
+          }
+
+          .bds-phone {
+            position: relative;
+            grid-template-rows: minmax(0, 1fr);
+            height: min(86cqh, 168cqw);
+            aspect-ratio: 9 / 19;
+            padding: 1.7cqmin;
+            border-radius: 7cqmin;
+          }
+
+          /* chrome bar (browser toolbar / window title bar) */
+          .bds-bar {
+            display: flex;
+            align-items: center;
+            gap: var(--space-2, 2.2cqmin);
+            padding: 1.5cqmin 2.4cqmin;
+            border-bottom: 0.14cqmin solid
+              color-mix(in srgb, var(--border, #475569) 60%, transparent);
+            background: color-mix(in srgb, var(--surface, #0b1016) 80%, var(--bg, #05070c));
+          }
+
+          .bds-phone .bds-bar {
+            display: none;
+          }
+
+          .bds-dots,
+          .bds-bar::after {
+            display: flex;
+            flex: 0 0 5.5cqmin;
+            gap: 0.95cqmin;
+          }
+
+          .bds-bar::after {
+            content: "";
+          }
+
+          .bds-dots i {
+            width: 1.15cqmin;
+            height: 1.15cqmin;
+            border-radius: 50%;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 26%, transparent);
+          }
+
+          .bds-pill {
+            display: block;
+            min-width: 36%;
+            max-width: 62%;
+            margin: 0 auto;
+            padding: 0.75cqmin 2.6cqmin;
+            overflow: hidden;
+            border: 0.14cqmin solid color-mix(in srgb, var(--border, #475569) 50%, transparent);
+            border-radius: 999px;
+            background: color-mix(in srgb, var(--bg, #05070c) 55%, var(--surface, #0b1016));
+            color: var(--muted, #8b93a3);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            font-size: 2cqmin;
+            line-height: 1.5;
+            white-space: nowrap;
+            text-align: center;
+            text-overflow: ellipsis;
+          }
+
+          .bds-bartitle {
+            display: block;
+            margin: 0 auto;
+            padding: 0.4cqmin 0;
+            overflow: hidden;
+            color: color-mix(in srgb, var(--fg, #f8fafc) 78%, transparent);
+            font-size: 2.15cqmin;
+            font-weight: 600;
+            letter-spacing: 0.02em;
+            line-height: 1.5;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+          }
+
+          .bds-browser .bds-bartitle,
+          .bds-window .bds-pill {
+            display: none;
+          }
+
+          .bds-notch {
+            display: none;
+          }
+
+          .bds-phone .bds-notch {
+            display: block;
+            position: absolute;
+            z-index: 2;
+            top: 3cqmin;
+            left: 50%;
+            width: 26%;
+            height: 2.2cqmin;
+            transform: translateX(-50%);
+            border-radius: 999px;
+            background: color-mix(in srgb, var(--bg, #05070c) 72%, #000000);
+          }
+
+          /* screen area: stacked slot layers */
+          .bds-screen {
+            position: relative;
+            overflow: hidden;
+            background: color-mix(in srgb, var(--surface, #0b1016) 86%, var(--bg, #05070c));
+          }
+
+          .bds-phone .bds-screen {
+            border-radius: 5.4cqmin;
+          }
+
+          .bds-screen-a,
+          .bds-screen-b {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+          }
+
+          .bds-screen-a > img,
+          .bds-screen-a > video,
+          .bds-screen-b > img,
+          .bds-screen-b > video {
+            display: block;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+          }
+
+          /* default skeleton screen: pure token furniture, no branding */
+          .bds-skel {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            grid-template-rows: auto minmax(0, 1fr);
+          }
+
+          .bds-skel-top {
+            display: flex;
+            align-items: center;
+            gap: var(--space-1, 1.6cqmin);
+            padding: 1.8cqmin 2.6cqmin;
+            border-bottom: 0.14cqmin solid
+              color-mix(in srgb, var(--border, #475569) 55%, transparent);
+          }
+
+          .bds-phone .bds-skel-top {
+            padding-top: 6.4cqmin;
+          }
+
+          .bds-skel-mark {
+            width: 2.6cqmin;
+            height: 2.6cqmin;
+            border-radius: 0.8cqmin;
+            background: color-mix(in srgb, var(--bds-accent) 74%, var(--surface, #0b1016));
+          }
+
+          .bds-skel-line {
+            height: 1.25cqmin;
+            border-radius: 999px;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 13%, transparent);
+          }
+
+          .bds-skel-top .bds-skel-line:nth-of-type(1) {
+            width: 9cqmin;
+          }
+
+          .bds-skel-top .bds-skel-line:nth-of-type(2) {
+            width: 6.5cqmin;
+          }
+
+          .bds-skel-spring {
+            flex: 1;
+          }
+
+          .bds-skel-chip {
+            width: 8.5cqmin;
+            height: 2.9cqmin;
+            border: 0.14cqmin solid color-mix(in srgb, var(--bds-accent) 55%, transparent);
+            border-radius: 999px;
+            background: color-mix(in srgb, var(--bds-accent) 28%, transparent);
+          }
+
+          .bds-skel-avatar {
+            width: 2.8cqmin;
+            height: 2.8cqmin;
+            border-radius: 50%;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 18%, transparent);
+          }
+
+          .bds-skel-body {
+            display: grid;
+            grid-template-columns: 24% minmax(0, 1fr);
+            min-height: 0;
+          }
+
+          .bds-phone .bds-skel-body {
+            grid-template-columns: minmax(0, 1fr);
+          }
+
+          .bds-skel-side {
+            display: flex;
+            flex-direction: column;
+            gap: 2cqmin;
+            padding: 2.6cqmin 2.6cqmin;
+            border-right: 0.14cqmin solid
+              color-mix(in srgb, var(--border, #475569) 55%, transparent);
+          }
+
+          .bds-phone .bds-skel-side {
+            display: none;
+          }
+
+          .bds-skel-side .bds-skel-line:nth-child(1) {
+            width: 78%;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 22%, transparent);
+          }
+
+          .bds-skel-side .bds-skel-line:nth-child(2) {
+            width: 56%;
+          }
+
+          .bds-skel-side .bds-skel-line:nth-child(3) {
+            width: 66%;
+          }
+
+          .bds-skel-side .bds-skel-line:nth-child(4) {
+            width: 44%;
+          }
+
+          .bds-skel-side .bds-skel-line:nth-child(5) {
+            width: 60%;
+          }
+
+          .bds-skel-main {
+            display: flex;
+            flex-direction: column;
+            gap: var(--space-2, 1.8cqmin);
+            min-height: 0;
+            padding: var(--space-3, 2.8cqmin);
+          }
+
+          .bds-skel-heading {
+            width: 34%;
+            height: 2.5cqmin;
+            border-radius: 999px;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 21%, transparent);
+          }
+
+          .bds-skel-sub {
+            width: 52%;
+            height: 1.25cqmin;
+            border-radius: 999px;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 9%, transparent);
+          }
+
+          .bds-skel-cards {
+            display: grid;
+            flex: 1;
+            grid-template-columns: repeat(3, minmax(0, 1fr));
+            gap: 2.1cqmin;
+            min-height: 0;
+            margin-top: 0.8cqmin;
+          }
+
+          .bds-phone .bds-skel-cards {
+            grid-template-columns: minmax(0, 1fr);
+          }
+
+          .bds-skel-card {
+            display: flex;
+            flex-direction: column;
+            gap: 1.5cqmin;
+            min-height: 0;
+            padding: 2.1cqmin;
+            border: 0.14cqmin solid color-mix(in srgb, var(--border, #475569) 60%, transparent);
+            border-radius: var(--radius, 1.6cqmin);
+            background: color-mix(in srgb, var(--bg, #05070c) 30%, transparent);
+          }
+
+          .bds-skel-card .bds-skel-line {
+            width: 55%;
+          }
+
+          .bds-skel-block {
+            flex: 1;
+            min-height: 3cqmin;
+            border-radius: calc(var(--radius, 1.6cqmin) * 0.6);
+            background: color-mix(in srgb, var(--fg, #f8fafc) 7%, transparent);
+          }
+
+          .bds-skel-card:nth-child(1) .bds-skel-block {
+            background: color-mix(in srgb, var(--bds-accent) 17%, transparent);
+          }
+
+          /* skeleton state B: rearranged furniture so the swap reads */
+          .bds-skel-b .bds-skel-heading {
+            width: 24%;
+          }
+
+          .bds-skel-b .bds-skel-sub {
+            width: 38%;
+          }
+
+          .bds-skel-b .bds-skel-cards {
+            grid-template-columns: 2fr 1fr;
+          }
+
+          .bds-phone .bds-skel-b .bds-skel-cards {
+            grid-template-columns: minmax(0, 1fr);
+          }
+
+          .bds-skel-b .bds-skel-card:nth-child(3) {
+            grid-column: 1 / -1;
+          }
+
+          .bds-skel-b .bds-skel-card:nth-child(1) .bds-skel-block {
+            background: color-mix(in srgb, var(--fg, #f8fafc) 7%, transparent);
+          }
+
+          .bds-skel-b .bds-skel-card:nth-child(2) .bds-skel-block {
+            background: color-mix(in srgb, var(--bds-accent) 17%, transparent);
+          }
+        </style>
+
+        <div
+          id="browser-device-stage-clip"
+          class="bds-clip clip"
+          data-start="0"
+          data-duration="5"
+          data-track-index="0"
+        >
+          <div class="bds-stage">
+            <div class="bds-device" role="img" aria-label="App screen in device chrome">
+              <div class="bds-bar">
+                <span class="bds-dots" aria-hidden="true"><i></i><i></i><i></i></span>
+                <span class="bds-pill"></span>
+                <span class="bds-bartitle"></span>
+              </div>
+              <span class="bds-notch" aria-hidden="true"></span>
+              <div class="bds-screen">
+                <div class="bds-screen-a">
+                  <div class="bds-skel" aria-hidden="true">
+                    <div class="bds-skel-top">
+                      <span class="bds-skel-mark"></span>
+                      <span class="bds-skel-line"></span>
+                      <span class="bds-skel-line"></span>
+                      <span class="bds-skel-spring"></span>
+                      <span class="bds-skel-chip"></span>
+                      <span class="bds-skel-avatar"></span>
+                    </div>
+                    <div class="bds-skel-body">
+                      <div class="bds-skel-side">
+                        <span class="bds-skel-line"></span>
+                        <span class="bds-skel-line"></span>
+                        <span class="bds-skel-line"></span>
+                        <span class="bds-skel-line"></span>
+                        <span class="bds-skel-line"></span>
+                      </div>
+                      <div class="bds-skel-main">
+                        <span class="bds-skel-heading"></span>
+                        <span class="bds-skel-sub"></span>
+                        <div class="bds-skel-cards">
+                          <div class="bds-skel-card">
+                            <span class="bds-skel-line"></span>
+                            <span class="bds-skel-block"></span>
+                          </div>
+                          <div class="bds-skel-card">
+                            <span class="bds-skel-line"></span>
+                            <span class="bds-skel-block"></span>
+                          </div>
+                          <div class="bds-skel-card">
+                            <span class="bds-skel-line"></span>
+                            <span class="bds-skel-block"></span>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".bds-stage");
+            var device = root.querySelector(".bds-device");
+            var screen = root.querySelector(".bds-screen");
+            var screenA = root.querySelector(".bds-screen-a");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var chromeKind =
+              vars.chrome === "window" || vars.chrome === "phone" ? vars.chrome : "browser";
+            var title = vars.title == null ? "app.example.com" : String(vars.title);
+            var swapAt = parseFloat(vars.swap_at);
+            if (!isFinite(swapAt) || swapAt <= 0) swapAt = 0;
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exitMode = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            root.style.setProperty("--bds-accent", accentColors[accent]);
+            device.classList.add("bds-" + chromeKind);
+            root.querySelector(".bds-pill").textContent = title;
+            root.querySelector(".bds-bartitle").textContent = title;
+
+            // SLOTS. Caller templates live at HOST DOCUMENT level (the mount
+            // wipes host-clip children, and templates never render). The
+            // scoped `document` proxy filters queries to this composition's
+            // subtree, so the lookup deliberately goes through ownerDocument.
+            var hostDoc = root.ownerDocument;
+            function slotContent(name) {
+              var tpl = null;
+              try {
+                tpl = hostDoc.querySelector(
+                  'template[data-slot="browser-device-stage-' + name + '"]',
+                );
+              } catch (error) {
+                tpl = null;
+              }
+              return tpl ? hostDoc.importNode(tpl.content, true) : null;
+            }
+
+            var skeleton = screenA.querySelector(".bds-skel");
+            var slotA = slotContent("screen");
+            var screenB = null;
+            if (swapAt > 0) {
+              screenB = hostDoc.createElement("div");
+              screenB.className = "bds-screen-b";
+              var slotB = slotContent("screen-b");
+              if (slotB) {
+                screenB.appendChild(slotB);
+              } else {
+                var skeletonB = skeleton.cloneNode(true);
+                skeletonB.classList.add("bds-skel-b");
+                screenB.appendChild(skeletonB);
+              }
+              screen.appendChild(screenB);
+            }
+            if (slotA) {
+              skeleton.remove();
+              screenA.appendChild(slotA);
+            }
+
+            // Envelope: fixed IN/OUT, elastic HOLD, never time-scaled.
+            var IN_BASE = 0.9;
+            var OUT_BASE = exitMode === "none" ? 0 : 0.5;
+            var SWAP_BASE = 0.55;
+            var STILLNESS = 0.35;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "5"));
+            var totalBase = IN_BASE + OUT_BASE;
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var OUT_START = IN + HOLD;
+
+            // Explicit both-endpoint state so a seek to t=0 is always correct.
+            gsap.set(stage, { opacity: 0, y: "4.5cqh", scale: 0.965, transformOrigin: "50% 60%" });
+            if (screenB) gsap.set(screenB, { opacity: 0, y: "1.6cqh" });
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: one settle. Rise + soft scale + fade, smooth ease-out.
+            tl.to(stage, { opacity: 1, duration: IN * 0.66, ease: "power2.out" }, 0);
+            tl.to(stage, { y: "0cqh", duration: IN, ease: "power3.out" }, 0);
+            tl.to(stage, { scale: 1, duration: IN, ease: "power2.out" }, 0);
+
+            // HOLD: barely-there drift as two explicit tweens (no yoyo
+            // re-tweens), then authored stillness until OUT.
+            var driftHalf = Math.max(0, HOLD - STILLNESS) / 2;
+            if (driftHalf >= 0.25) {
+              driftHalf = Math.min(driftHalf, 1.6);
+              tl.to(stage, { y: "-0.5cqh", duration: driftHalf, ease: "sine.inOut" }, IN);
+              tl.to(stage, { y: "0cqh", duration: driftHalf, ease: "sine.inOut" }, IN + driftHalf);
+            }
+
+            // Optional screen swap: fade-through, clamped inside
+            // [IN, D - OUT - SWAP] so it never fights the entrance or the
+            // exit. Screen A empties completely onto the bare stage before
+            // screen B rises in, so every frame shows at most one screen
+            // (no double-exposure furniture on a paused frame).
+            if (screenB) {
+              var SWAP = SWAP_BASE * scale;
+              var latest = Math.max(IN, duration - OUT - SWAP - 0.05);
+              var swapStart = Math.min(Math.max(swapAt, IN), latest);
+              var swapHalf = SWAP / 2;
+              tl.to(screenA, { opacity: 0, duration: swapHalf, ease: "power1.in" }, swapStart);
+              tl.fromTo(
+                screenB,
+                { opacity: 0, y: "1.6cqh" },
+                { opacity: 1, y: "0cqh", duration: swapHalf, ease: "power2.out" },
+                swapStart + swapHalf,
+              );
+            }
+
+            // OUT: only when exit != none; the default holds the last frame.
+            if (exitMode !== "none") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+              if (exitMode === "up") {
+                tl.to(stage, { y: "-4cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              }
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["browser-device-stage"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/browser-device-stage/demo.html b/registry/components/browser-device-stage/demo.html
new file mode 100644
index 0000000000..a42dd1c69d
--- /dev/null
+++ b/registry/components/browser-device-stage/demo.html
@@ -0,0 +1,82 @@
+<!doctype html>
+<!--
+  browser-device-stage demo. Large centered mount (90% x 88%) on a light token
+  block (near-white bg, white surface, hairline borders) so the skeleton
+  chrome reads at app scale; browser chrome, screen swap at 2.2s, violet accent.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>browser-device-stage Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #eef0f3);
+      }
+
+      #root {
+        --bg: #eef0f3;
+        --fg: #14161b;
+        --surface: #ffffff;
+        --border: #d3d8e0;
+        --brand: #1d4ed8;
+        --accent: #0284c7;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 40%, #f7f8fa 0%, var(--bg, #eef0f3) 70%);
+      }
+
+      .mount-stage {
+        width: 90%;
+        height: 88%;
+        left: 5%;
+        top: 6%;
+        container-type: size;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="browser-device-stage-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+      data-fps="30"
+    >
+      <div
+        id="browser-device-stage-mount"
+        class="mount-stage clip"
+        data-composition-id="browser-device-stage"
+        data-composition-src="./browser-device-stage.html"
+        data-variable-values='{"chrome":"browser","title":"app.example.com","swap_at":2.2,"accent":"violet"}'
+        data-start="0"
+        data-duration="5"
+        data-track-index="0"
+        data-width="1728"
+        data-height="950"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["browser-device-stage-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/browser-device-stage/registry-item.json b/registry/components/browser-device-stage/registry-item.json
new file mode 100644
index 0000000000..05b2552d58
--- /dev/null
+++ b/registry/components/browser-device-stage/registry-item.json
@@ -0,0 +1,80 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "browser-device-stage",
+  "type": "hyperframes:component",
+  "title": "Browser Device Stage",
+  "description": "A generic app surface in token-native device chrome (browser, window, or phone). The screen is a slot for caller img/video/HTML with a token-styled skeleton default; one settle entrance, a readable hold, and an optional screen swap.",
+  "tags": ["stage", "product-demo", "device", "browser", "phone", "slot", "chrome"],
+  "jobs": ["demonstrate"],
+  "family": "product-demo",
+  "profile": "stage",
+  "evidence": "Wave J J1-5: adversarial panel hero shelf, generic app stage with content slots over canned art",
+  "files": [
+    {
+      "path": "browser-device-stage.html",
+      "target": "compositions/components/browser-device-stage.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "chrome",
+      "type": "enum",
+      "role": "content",
+      "label": "Chrome",
+      "description": "Device frame drawn around the screen slot.",
+      "default": "browser",
+      "options": [
+        { "value": "browser", "label": "Browser" },
+        { "value": "window", "label": "Window" },
+        { "value": "phone", "label": "Phone" }
+      ]
+    },
+    {
+      "id": "title",
+      "type": "string",
+      "role": "content",
+      "label": "Title",
+      "description": "Address pill text (browser) or title bar text (window).",
+      "default": "app.example.com"
+    },
+    {
+      "id": "swap_at",
+      "type": "number",
+      "role": "content",
+      "label": "Swap at",
+      "description": "Seconds from mount start to swap to the second screen. 0 disables the swap.",
+      "default": 0,
+      "min": 0,
+      "max": 30,
+      "step": 0.1,
+      "unit": "s"
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Token the skeleton accent elements ride.",
+      "default": "green",
+      "options": [
+        { "value": "green", "label": "Green" },
+        { "value": "blue", "label": "Blue" },
+        { "value": "violet", "label": "Violet" }
+      ]
+    },
+    {
+      "id": "exit",
+      "type": "enum",
+      "role": "style",
+      "label": "Exit",
+      "description": "Optional departure. None holds the final frame.",
+      "default": "none",
+      "options": [
+        { "value": "none", "label": "None" },
+        { "value": "fade", "label": "Fade" },
+        { "value": "up", "label": "Up" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/camera-rig-depth-stack/camera-rig-depth-stack.html b/registry/components/camera-rig-depth-stack/camera-rig-depth-stack.html
new file mode 100644
index 0000000000..3787a814c3
--- /dev/null
+++ b/registry/components/camera-rig-depth-stack/camera-rig-depth-stack.html
@@ -0,0 +1,63 @@
+<!--
+  Camera Rig Depth Stack - advanced HyperFrames primitive.
+
+  This is intentionally seekable: drive it from a paused GSAP timeline.
+  MotionPath examples require GSAP MotionPathPlugin. Three.js examples expose
+  a render(progress) adapter instead of a free-running requestAnimationFrame loop.
+-->
+
+<div class="hf-advanced-camera-rig-depth-stack">
+  <div class="panel">
+    <div>
+      <h3>Camera Rig Depth Stack</h3>
+      <p>A 3D camera-rig-style card stack with depth, parallax, and focus shift.</p>
+    </div>
+  </div>
+</div>
+
+<style>
+  .hf-advanced-camera-rig-depth-stack {
+    color: #111827;
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-advanced-camera-rig-depth-stack {
+    position: relative;
+    width: 760px;
+    height: 430px;
+    perspective: 900px;
+    border-radius: 30px;
+    overflow: hidden;
+    background: linear-gradient(135deg, #0f172a, #312e81);
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+  }
+  .hf-advanced-camera-rig-depth-stack .panel {
+    position: absolute;
+    inset: 56px 90px;
+    border-radius: 30px;
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.52));
+    border: 1px solid rgba(255, 255, 255, 0.45);
+    backdrop-filter: blur(18px);
+    transform: rotateY(var(--hf-rotate-y, -16deg)) rotateX(var(--hf-rotate-x, 9deg))
+      translateZ(var(--hf-z, 0px));
+    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.22);
+    display: grid;
+    place-items: center;
+    text-align: center;
+  }
+  .hf-advanced-camera-rig-depth-stack h3 {
+    margin: 0;
+    color: #111827;
+    font-size: 42px;
+    letter-spacing: -0.05em;
+  }
+  .hf-advanced-camera-rig-depth-stack p {
+    margin: 8px 0 0;
+    color: #475569;
+  }
+</style>
+
+<!--
+  Timeline integration:
+  const startTime = 0;
+  tl.fromTo('.hf-advanced-camera-rig-depth-stack .panel', { '--hf-rotate-y': '-20deg', '--hf-rotate-x': '12deg', '--hf-z': '-80px', opacity: 0 }, { '--hf-rotate-y': '10deg', '--hf-rotate-x': '-4deg', '--hf-z': '80px', opacity: 1, duration: 1.2, ease: 'power3.out' }, startTime);
+-->
diff --git a/registry/components/camera-rig-depth-stack/demo.html b/registry/components/camera-rig-depth-stack/demo.html
new file mode 100644
index 0000000000..ef35741b0e
--- /dev/null
+++ b/registry/components/camera-rig-depth-stack/demo.html
@@ -0,0 +1,109 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Camera Rig Depth Stack - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-advanced-camera-rig-depth-stack {
+        color: #111827;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-advanced-camera-rig-depth-stack {
+        position: relative;
+        width: 760px;
+        height: 430px;
+        perspective: 900px;
+        border-radius: 30px;
+        overflow: hidden;
+        background: linear-gradient(135deg, #0f172a, #312e81);
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+        /* ponytail: scale root (not a GSAP target) to fill ~65% of 1080px height */
+        transform: scale(1.65);
+      }
+      .hf-advanced-camera-rig-depth-stack .panel {
+        position: absolute;
+        inset: 56px 90px;
+        border-radius: 30px;
+        background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.52));
+        border: 1px solid rgba(255, 255, 255, 0.45);
+        backdrop-filter: blur(18px);
+        transform: rotateY(var(--hf-rotate-y, -16deg)) rotateX(var(--hf-rotate-x, 9deg))
+          translateZ(var(--hf-z, 0px));
+        box-shadow: 0 28px 90px rgba(0, 0, 0, 0.22);
+        display: grid;
+        place-items: center;
+        text-align: center;
+      }
+      .hf-advanced-camera-rig-depth-stack h3 {
+        margin: 0;
+        color: #111827;
+        font-size: 42px;
+        letter-spacing: -0.05em;
+      }
+      .hf-advanced-camera-rig-depth-stack p {
+        margin: 8px 0 0;
+        color: #475569;
+        font-size: 18px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="camera-rig-depth-stack-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="hf-advanced-camera-rig-depth-stack">
+        <div class="panel">
+          <div>
+            <h3>Camera Rig Depth Stack</h3>
+            <p>A 3D camera-rig-style card stack with depth, parallax, and focus shift.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script>
+      const tl = gsap.timeline({ paused: true });
+      const startTime = 0.5;
+      tl.fromTo(
+        ".hf-advanced-camera-rig-depth-stack .panel",
+        { "--hf-rotate-y": "-20deg", "--hf-rotate-x": "12deg", "--hf-z": "-80px", opacity: 0 },
+        {
+          "--hf-rotate-y": "10deg",
+          "--hf-rotate-x": "-4deg",
+          "--hf-z": "80px",
+          opacity: 1,
+          duration: 1.2,
+          ease: "power3.out",
+        },
+        startTime,
+      );
+      tl.set({}, {}, 5);
+      window.__timelines = window.__timelines || {};
+      window.__timelines["camera-rig-depth-stack-demo"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/registry/components/camera-rig-depth-stack/registry-item.json b/registry/components/camera-rig-depth-stack/registry-item.json
new file mode 100644
index 0000000000..ef25412237
--- /dev/null
+++ b/registry/components/camera-rig-depth-stack/registry-item.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "camera-rig-depth-stack",
+  "type": "hyperframes:component",
+  "title": "Camera Rig Depth Stack",
+  "description": "A 3D camera-rig-style card stack with depth, parallax, and focus shift.",
+  "tags": ["advanced-motion", "hyperframes-native"],
+  "files": [
+    {
+      "path": "camera-rig-depth-stack.html",
+      "target": "compositions/components/camera-rig-depth-stack.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/camera-rig-depth-stack.png"
+  }
+}
diff --git a/registry/components/camera-scan-gate/camera-scan-gate.html b/registry/components/camera-scan-gate/camera-scan-gate.html
new file mode 100644
index 0000000000..176a3cb149
--- /dev/null
+++ b/registry/components/camera-scan-gate/camera-scan-gate.html
@@ -0,0 +1,522 @@
+<!doctype html>
+<!--
+  camera-scan-gate -- HyperFrames video primitive (ui-props / interaction / demonstrate)
+
+  Concept: a camera viewfinder scans once, tightens its four L-shaped corner
+  brackets onto a detected target, then confirms recognition with a pulse,
+  check flash, and target label. One mechanic, one job: demonstrate the causal
+  scan -> lock -> confirmation gate that unlocks a product's next beat.
+
+  Compiled-from evidence: SIM fixture; MOBILE mobile-inventory (scan-to-onboard
+  and scan-to-pay moments in the video-primitives candidates card).
+
+  Use when: a mobile product scene needs a camera, QR, identity, or payment
+  recognition moment whose successful lock causes the following action. Skip
+  it for passive camera decoration or a generic loading state.
+
+  Variables (declared in data-composition-variables below):
+    - scanColor (string, default "var(--brand)"): any CSS color value used by
+      the scan line, lock brackets, and confirmation glow.
+    - targetLabel (string, default "Verified"): label revealed at lock. Empty
+      string hides the label line entirely.
+    - sweepSpeed (number, default 1, range 0.8 to 1.6): scan sweep speed only.
+      It changes the sweep start while its landing sync point stays fixed.
+
+  Envelope (fixed IN/OUT, elastic HOLD only, never gsap.timeScale()):
+    IN_BASE  = 1.05s  stage settles, sweep lands, then recognition locks
+    HOLD     = elastic = max(0, D - (IN_BASE + OUT_BASE)); a faint finite
+               frame glow breathes, or remains still when HOLD == 0
+    OUT_BASE = 0.50s  resolved gate releases with a short fade
+    If D < IN_BASE + OUT_BASE, IN and OUT scale down together so IN + OUT == D
+    and HOLD == 0.
+
+  Sync points (fixed offsets into IN, never inside elastic HOLD):
+    - scan-landed: 0.50s into unscaled IN, the --ease-standard sweep completes
+    - recognition-lock: 0.68s into unscaled IN, brackets tighten with
+      --ease-overshoot while confirmation and the target label fire
+    Both offsets scale proportionally only when the full envelope compresses.
+
+  Sound cue: a soft recognition chime fires at recognition-lock. The primitive
+  never plays audio itself. It dispatches an `hf:sfx` CustomEvent
+  ({ id: "lock-chime", t: LOCK_AT }) for the host mix stage to route.
+
+  Mount contract: this file is a MOUNTABLE SUB-COMPOSITION, not a standalone
+  composition. A host loads it via data-composition-src; the runtime clones
+  only <template> contents, so all live style, markup, and script stays inside
+  the template. The root has no data-width/data-height and fills the host box
+  with position:absolute, inset:0, and container-type:size. It is styled by
+  #root because mounted CSS scoping would stop a root-class selector from
+  matching the root itself. The hardcoded "camera-scan-gate" composition id
+  is required because the mounted flattening step strips data-composition-id
+  before this script registers its timeline. Variables are read through
+  window.__hyperframes.getVariables(), which owns declared defaults merged
+  with per-instance host overrides after mounting.
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "scanColor", "type": "string", "role": "style", "label": "Scan color", "description": "Any CSS color value used by the scan line and recognition glow.", "default": "var(--brand)" },
+    { "id": "targetLabel", "type": "string", "role": "content", "label": "Target label", "description": "Confirmation label revealed at recognition lock. Blank hides the line.", "default": "Verified" },
+    { "id": "sweepSpeed", "type": "number", "role": "timing", "label": "Sweep speed", "description": "Speed multiplier for the scan sweep phase only.", "default": 1, "min": 0.8, "max": 1.6, "step": 0.1, "unit": "x" }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Camera Scan Gate</title>
+    <!-- Metadata only. The loader reads variable declarations from this html
+         element, while the mount runtime discards everything outside the
+         template. -->
+  </head>
+  <body>
+    <template>
+      <div
+        id="root"
+        data-composition-id="camera-scan-gate"
+        data-start="0"
+        data-duration="4"
+        data-fps="30"
+      >
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          /* INVARIANT: the host owns dimensions. #root fills that box and
+             establishes the cqw/cqh basis for every visible measurement. */
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+          }
+
+          .csg-clip {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+            background: var(--bg, #0b1120);
+          }
+
+          .csg-stage {
+            position: relative;
+            width: min(64cqw, 76cqh);
+            aspect-ratio: 1;
+            opacity: 0;
+          }
+
+          /* EDIT ZONE: the outer viewfinder is a square so one centered scale
+             operation tightens all four brackets onto the target equally. */
+          .csg-frame,
+          .csg-corner-layer,
+          .csg-scan-window {
+            position: absolute;
+            inset: 0;
+          }
+
+          .csg-frame {
+            border: 0.16cqw solid color-mix(in srgb, var(--border, #334155) 74%, transparent);
+            border-radius: var(--space-2, 2.4cqw);
+            background: color-mix(in srgb, var(--surface, #1e293b) 34%, transparent);
+            box-shadow: inset 0 0 5cqw color-mix(in srgb, var(--bg, #0b1120) 60%, transparent);
+          }
+
+          .csg-grid {
+            position: absolute;
+            inset: 0;
+            border-radius: inherit;
+            background-image:
+              linear-gradient(
+                to right,
+                transparent 33%,
+                color-mix(in srgb, var(--border, #334155) 32%, transparent) 33% 33.25%,
+                transparent 33.25% 66.5%,
+                color-mix(in srgb, var(--border, #334155) 32%, transparent) 66.5% 66.75%,
+                transparent 66.75%
+              ),
+              linear-gradient(
+                to bottom,
+                transparent 33%,
+                color-mix(in srgb, var(--border, #334155) 32%, transparent) 33% 33.25%,
+                transparent 33.25% 66.5%,
+                color-mix(in srgb, var(--border, #334155) 32%, transparent) 66.5% 66.75%,
+                transparent 66.75%
+              );
+            opacity: 0.55;
+          }
+
+          .csg-ambient {
+            position: absolute;
+            inset: -4%;
+            border: 0.45cqw solid
+              color-mix(in srgb, var(--csg-scan-color, var(--brand, #22c55e)) 48%, transparent);
+            border-radius: var(--space-3, 3.2cqw);
+            box-shadow: 0 0 4.5cqw
+              color-mix(in srgb, var(--csg-scan-color, var(--brand, #22c55e)) 38%, transparent);
+            opacity: 0;
+          }
+
+          .csg-corner-layer {
+            transform-origin: center;
+            z-index: 3;
+          }
+
+          .csg-corner {
+            position: absolute;
+            width: 18%;
+            height: 18%;
+            border-color: var(--csg-scan-color, var(--brand, #22c55e));
+            border-style: solid;
+            filter: drop-shadow(
+              0 0 0.9cqw
+                color-mix(in srgb, var(--csg-scan-color, var(--brand, #22c55e)) 56%, transparent)
+            );
+          }
+
+          .csg-corner-tl {
+            top: 0;
+            left: 0;
+            border-width: 0.65cqw 0 0 0.65cqw;
+            border-radius: var(--space-2, 2.4cqw) 0 0;
+          }
+
+          .csg-corner-tr {
+            top: 0;
+            right: 0;
+            border-width: 0.65cqw 0.65cqw 0 0;
+            border-radius: 0 var(--space-2, 2.4cqw) 0 0;
+          }
+
+          .csg-corner-br {
+            right: 0;
+            bottom: 0;
+            border-width: 0 0.65cqw 0.65cqw 0;
+            border-radius: 0 0 var(--space-2, 2.4cqw);
+          }
+
+          .csg-corner-bl {
+            bottom: 0;
+            left: 0;
+            border-width: 0 0 0.65cqw 0.65cqw;
+            border-radius: 0 0 0 var(--space-2, 2.4cqw);
+          }
+
+          .csg-scan-window {
+            z-index: 2;
+            inset: 3.5%;
+            overflow: hidden;
+          }
+
+          .csg-sweep {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+          }
+
+          .csg-scan-line {
+            position: absolute;
+            inset: 0 0 auto;
+            width: 100%;
+            height: 0.38cqh;
+            border-radius: 999cqw;
+            background: var(--csg-scan-color, var(--brand, #22c55e));
+            box-shadow:
+              0 0 1.2cqw var(--csg-scan-color, var(--brand, #22c55e)),
+              0 1.8cqh 3.6cqh
+                color-mix(in srgb, var(--csg-scan-color, var(--brand, #22c55e)) 42%, transparent);
+          }
+
+          .csg-target {
+            position: absolute;
+            z-index: 1;
+            width: 60%;
+            height: 60%;
+            top: 20%;
+            left: 20%;
+            border: 0.2cqw solid
+              color-mix(in srgb, var(--csg-scan-color, var(--brand, #22c55e)) 65%, transparent);
+            border-radius: var(--space-2, 2.4cqw);
+            background: color-mix(
+              in srgb,
+              var(--csg-scan-color, var(--brand, #22c55e)) 7%,
+              transparent
+            );
+            opacity: 0;
+          }
+
+          .csg-confirmation {
+            position: absolute;
+            z-index: 4;
+            inset: 0;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            gap: var(--space-2, 2.2cqh);
+          }
+
+          .csg-pulse {
+            position: absolute;
+            width: 30%;
+            aspect-ratio: 1;
+            border: 0.42cqw solid var(--csg-scan-color, var(--brand, #22c55e));
+            border-radius: 50%;
+            box-shadow: 0 0 4.5cqw
+              color-mix(in srgb, var(--csg-scan-color, var(--brand, #22c55e)) 58%, transparent);
+            opacity: 0;
+          }
+
+          .csg-check {
+            display: block;
+            width: 8.5%;
+            height: 15%;
+            margin-top: -5%;
+            border-right: 0.8cqw solid var(--csg-scan-color, var(--brand, #22c55e));
+            border-bottom: 0.8cqw solid var(--csg-scan-color, var(--brand, #22c55e));
+            filter: drop-shadow(
+              0 0 1.1cqw
+                color-mix(in srgb, var(--csg-scan-color, var(--brand, #22c55e)) 65%, transparent)
+            );
+            opacity: 0;
+            transform: rotate(45deg);
+          }
+
+          .csg-label {
+            min-width: 34%;
+            padding: var(--space-1, 1cqh) var(--space-3, 3cqw);
+            border: 0.14cqw solid
+              color-mix(in srgb, var(--csg-scan-color, var(--brand, #22c55e)) 48%, transparent);
+            border-radius: 999cqw;
+            background: color-mix(in srgb, var(--surface, #1e293b) 88%, transparent);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: clamp(2cqh, 2.8cqw, 3.3cqh);
+            font-weight: 760;
+            letter-spacing: 0.035em;
+            line-height: 1.1;
+            text-align: center;
+            opacity: 0;
+          }
+
+          .csg-label:empty {
+            display: none;
+          }
+        </style>
+
+        <div
+          id="camera-scan-gate-clip"
+          class="csg-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="csg-stage" role="img" aria-label="Camera recognition scanner">
+            <div class="csg-frame">
+              <div class="csg-grid" aria-hidden="true"></div>
+            </div>
+            <div class="csg-ambient" aria-hidden="true"></div>
+            <div class="csg-target" aria-hidden="true"></div>
+            <div class="csg-scan-window" aria-hidden="true">
+              <div class="csg-sweep">
+                <div class="csg-scan-line"></div>
+              </div>
+            </div>
+            <div class="csg-corner-layer" aria-hidden="true">
+              <span class="csg-corner csg-corner-tl"></span>
+              <span class="csg-corner csg-corner-tr"></span>
+              <span class="csg-corner csg-corner-br"></span>
+              <span class="csg-corner csg-corner-bl"></span>
+            </div>
+            <div class="csg-confirmation">
+              <span class="csg-pulse" aria-hidden="true"></span>
+              <span class="csg-check" aria-hidden="true"></span>
+              <span class="csg-label"></span>
+            </div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            // Literal, not read from the DOM. Mounted flattening strips the
+            // root's data-composition-id before timeline registration.
+            var compositionId = "camera-scan-gate";
+            var stage = root.querySelector(".csg-stage");
+            var cornerLayer = root.querySelector(".csg-corner-layer");
+            var sweep = root.querySelector(".csg-sweep");
+            var target = root.querySelector(".csg-target");
+            var ambient = root.querySelector(".csg-ambient");
+            var pulse = root.querySelector(".csg-pulse");
+            var check = root.querySelector(".csg-check");
+            var label = root.querySelector(".csg-label");
+
+            // EDIT ZONE: declared defaults and per-instance overrides have one
+            // owner after mount, window.__hyperframes.getVariables().
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+            var scanColor =
+              vars.scanColor == null || String(vars.scanColor).trim() === ""
+                ? "var(--brand)"
+                : String(vars.scanColor);
+            var targetLabel = vars.targetLabel == null ? "" : String(vars.targetLabel);
+            var rawSweepSpeed = Number(vars.sweepSpeed);
+            // INVARIANT: sweep speed is finite and clamped to the declared
+            // 0.8 to 1.6 range. It never changes IN, HOLD, OUT, or sync points.
+            var sweepSpeed = Number.isFinite(rawSweepSpeed)
+              ? Math.max(0.8, Math.min(1.6, rawSweepSpeed))
+              : 1;
+
+            root.style.setProperty("--csg-scan-color", scanColor);
+            label.textContent = targetLabel;
+
+            var beatValue = parseFloat(getComputedStyle(root).getPropertyValue("--dur-beat"));
+            var beat = Number.isFinite(beatValue) && beatValue > 0 ? beatValue : 0.5;
+            var AMBIENT_HALF = beat * 1.5;
+
+            // RETIME RANGE: IN_BASE and OUT_BASE own the interaction envelope.
+            // The only elastic phase is HOLD. Short durations scale IN and OUT
+            // together with one factor, never gsap.timeScale().
+            var IN_BASE = 1.05;
+            var OUT_BASE = 0.5;
+            var STAGE_IN_BASE = 0.28;
+            var SWEEP_DURATION_BASE = 0.4;
+            var SWEEP_LANDS_BASE = 0.5;
+            var LOCK_AT_BASE = 0.68;
+            var LOCK_DURATION_BASE = 0.22;
+            var CONFIRM_DURATION_BASE = 0.2;
+            var PULSE_HALF_BASE = 0.18;
+
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var totalBase = IN_BASE + OUT_BASE;
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var STAGE_IN = STAGE_IN_BASE * scale;
+            var SWEEP_LANDS = SWEEP_LANDS_BASE * scale;
+            var SWEEP_DURATION = (SWEEP_DURATION_BASE / sweepSpeed) * scale;
+            var SWEEP_START = Math.max(0, SWEEP_LANDS - SWEEP_DURATION);
+            var LOCK_AT = LOCK_AT_BASE * scale;
+            var LOCK_DURATION = LOCK_DURATION_BASE * scale;
+            var CONFIRM_DURATION = CONFIRM_DURATION_BASE * scale;
+            var PULSE_HALF = PULSE_HALF_BASE * scale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var HOLD_START = IN;
+            var OUT_START = IN + HOLD;
+
+            function fireSfx(id, t) {
+              root.dispatchEvent(
+                new CustomEvent("hf:sfx", { detail: { id: id, t: t }, bubbles: true }),
+              );
+            }
+
+            // Explicit both-endpoints state before timeline construction keeps
+            // direct seek to t=0 correct without playing through prior frames.
+            gsap.set(stage, { opacity: 0, scale: 0.94 });
+            gsap.set(cornerLayer, { scale: 1 });
+            gsap.set(sweep, { opacity: 1, yPercent: 0 });
+            gsap.set(target, { opacity: 0, scale: 0.96 });
+            gsap.set(ambient, { opacity: 0, scale: 1 });
+            gsap.set(pulse, { opacity: 0, scale: 0.9 });
+            gsap.set(check, { opacity: 0, scale: 0.94 });
+            gsap.set(label, { opacity: 0, y: "1.2cqh", scale: 0.96 });
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: settle, scan, then lock. The sweep uses --ease-standard's
+            // GSAP equivalent and lands at a fixed offset inside IN.
+            tl.to(stage, { opacity: 1, scale: 1, duration: STAGE_IN, ease: "power2.out" }, 0);
+            tl.to(
+              sweep,
+              { yPercent: 100, duration: SWEEP_DURATION, ease: "power2.out" },
+              SWEEP_START,
+            );
+            tl.set(sweep, { opacity: 0 }, SWEEP_LANDS);
+
+            // recognition-lock is the single causal gate. Corner tightening is
+            // the one moderate --ease-overshoot motion in this primitive.
+            tl.to(
+              cornerLayer,
+              { scale: 0.6, duration: LOCK_DURATION, ease: "back.out(1.7)" },
+              LOCK_AT,
+            );
+            tl.to(
+              target,
+              { opacity: 1, scale: 1, duration: CONFIRM_DURATION, ease: "power2.out" },
+              LOCK_AT,
+            );
+            tl.to(
+              check,
+              { opacity: 1, scale: 1, duration: CONFIRM_DURATION, ease: "power2.out" },
+              LOCK_AT,
+            );
+            tl.to(
+              label,
+              { opacity: 1, y: 0, scale: 1, duration: CONFIRM_DURATION, ease: "power2.out" },
+              LOCK_AT,
+            );
+            tl.to(
+              pulse,
+              {
+                opacity: 0.9,
+                scale: 1.25,
+                duration: PULSE_HALF,
+                ease: "power2.out",
+                yoyo: true,
+                repeat: 1,
+              },
+              LOCK_AT,
+            );
+            // Side-effect invariant: this timeline callback is the only actor
+            // that emits lock-chime, once at the recognition-lock sync point.
+            tl.call(
+              function () {
+                fireSfx("lock-chime", LOCK_AT);
+              },
+              [],
+              LOCK_AT,
+            );
+
+            // HOLD: a separate layer breathes with a finite repeat count, so
+            // the resolved gate stays alive without competing with lock tweens.
+            if (HOLD > AMBIENT_HALF) {
+              var ambientRepeat = Math.max(0, Math.floor(HOLD / AMBIENT_HALF) - 1);
+              tl.to(
+                ambient,
+                {
+                  opacity: 0.3,
+                  scale: 1.015,
+                  duration: AMBIENT_HALF,
+                  ease: "sine.inOut",
+                  yoyo: true,
+                  repeat: ambientRepeat,
+                },
+                HOLD_START,
+              );
+            }
+
+            // OUT: asymmetric release. HOLD alone absorbs duration changes.
+            tl.to(stage, { opacity: 0, scale: 0.98, duration: OUT, ease: "power2.in" }, OUT_START);
+
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/camera-scan-gate/demo.html b/registry/components/camera-scan-gate/demo.html
new file mode 100644
index 0000000000..fc36439b0d
--- /dev/null
+++ b/registry/components/camera-scan-gate/demo.html
@@ -0,0 +1,95 @@
+<!doctype html>
+<!--
+  camera-scan-gate -- demo. Standalone 1920x1080 composition that MOUNTS the
+  primitive through data-composition-src instead of inlining it. The host clip
+  supplies deliberately non-default scanColor, targetLabel, and sweepSpeed
+  values so preview and snapshot verification prove variable flow through the
+  real sub-composition mount path. Kept in sync with camera-scan-gate.html by
+  hand; not installed by `hyperframes add`.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Camera Scan Gate - Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #05070d;
+      }
+
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 42%, #132036 0%, #05070d 72%);
+      }
+
+      /* A definite host box is required for the primitive's cqw/cqh geometry.
+         data-width/data-height below mirror these rendered dimensions for
+         tooling, while the primitive itself stays fully elastic. */
+      .mount-card {
+        --bg: #0d1728;
+        --fg: #f8fafc;
+        --surface: #17253a;
+        --border: #50647d;
+        --muted: #a5b4c7;
+        --brand: #22c55e;
+        --accent: #38bdf8;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-body: Inter, system-ui, sans-serif;
+        --dur-beat: 0.48s;
+        width: 48%;
+        height: 64%;
+        left: 26%;
+        top: 18%;
+        border: 1px solid rgba(148, 163, 184, 0.28);
+        border-radius: 32px;
+        box-shadow: 0 42px 100px rgba(0, 0, 0, 0.48);
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="camera-scan-gate-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="camera-scan-gate-mount"
+        class="mount-card clip"
+        data-composition-id="camera-scan-gate"
+        data-composition-src="./camera-scan-gate.html"
+        data-variable-values='{"scanColor":"var(--accent)","targetLabel":"Payment approved","sweepSpeed":1.1}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="922"
+        data-height="691"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      // The demo owns no motion. It registers one empty paused timeline under
+      // its own id, while the mounted primitive owns the interaction timeline.
+      window.__timelines = window.__timelines || {};
+      window.__timelines["camera-scan-gate-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/camera-scan-gate/registry-item.json b/registry/components/camera-scan-gate/registry-item.json
new file mode 100644
index 0000000000..020ebcbca8
--- /dev/null
+++ b/registry/components/camera-scan-gate/registry-item.json
@@ -0,0 +1,53 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "camera-scan-gate",
+  "type": "hyperframes:component",
+  "title": "Camera Scan Gate",
+  "description": "A camera and QR recognition moment with a viewfinder sweep, bracket lock, confirmation pulse, and verified next beat.",
+  "tags": ["prop", "ui-props", "camera", "qr", "scan", "recognition", "interaction", "demonstrate"],
+  "jobs": ["demonstrate"],
+  "family": "ui-props",
+  "profile": "interaction",
+  "evidence": "SIM fixture; MOBILE mobile-inventory",
+  "syncPoints": [
+    { "id": "scan-landed", "phase": "in", "offset": 0.5 },
+    { "id": "recognition-lock", "phase": "in", "offset": 0.68 }
+  ],
+  "files": [
+    {
+      "path": "camera-scan-gate.html",
+      "target": "compositions/components/camera-scan-gate.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "scanColor",
+      "type": "string",
+      "role": "style",
+      "label": "Scan color",
+      "description": "Any CSS color value used by the scan line and recognition glow.",
+      "default": "var(--brand)"
+    },
+    {
+      "id": "targetLabel",
+      "type": "string",
+      "role": "content",
+      "label": "Target label",
+      "description": "Confirmation label revealed at recognition lock. Blank hides the line.",
+      "default": "Verified"
+    },
+    {
+      "id": "sweepSpeed",
+      "type": "number",
+      "role": "timing",
+      "label": "Sweep speed",
+      "description": "Speed multiplier for the scan sweep phase only.",
+      "default": 1,
+      "min": 0.8,
+      "max": 1.6,
+      "step": 0.1,
+      "unit": "x"
+    }
+  ]
+}
diff --git a/registry/components/camera-shake/camera-shake.html b/registry/components/camera-shake/camera-shake.html
new file mode 100644
index 0000000000..095b0efffa
--- /dev/null
+++ b/registry/components/camera-shake/camera-shake.html
@@ -0,0 +1,809 @@
+<!doctype html>
+<html
+  lang="en"
+  data-composition-variables='[
+    {
+      "id": "shakeProfile",
+      "type": "enum",
+      "label": "Shake profile",
+      "default": "handheld-normal-mild",
+      "options": [
+        { "value": "handheld-normal-mild", "label": "Handheld - normal lens, mild" },
+        { "value": "handheld-normal-strong", "label": "Handheld - normal lens, strong" },
+        { "value": "handheld-normal-extreme", "label": "Handheld - normal lens, extreme" },
+        { "value": "handheld-wideangle-mild", "label": "Handheld - wide angle, mild" },
+        { "value": "handheld-wideangle-strong", "label": "Handheld - wide angle, strong" },
+        { "value": "handheld-tele-mild", "label": "Handheld - telephoto, mild" },
+        { "value": "handheld-tele-strong", "label": "Handheld - telephoto, strong" },
+        { "value": "rig-6d-shake", "label": "Rig - 6D shake (engine buzz)" },
+        { "value": "rig-6d-wobble", "label": "Rig - 6D wobble" }
+      ]
+    },
+    {
+      "id": "shakeIntensity",
+      "type": "number",
+      "label": "Intensity multiplier",
+      "default": 1,
+      "min": 0,
+      "max": 3,
+      "step": 0.05
+    },
+    {
+      "id": "shakeFrequency",
+      "type": "number",
+      "label": "Frequency multiplier",
+      "default": 1,
+      "min": 0.1,
+      "max": 4,
+      "step": 0.05
+    },
+    {
+      "id": "shakeRotation",
+      "type": "boolean",
+      "label": "Include rotation (roll + tilt/pan)",
+      "default": true
+    }
+  ]'
+>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Camera Shake</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent;
+      }
+
+      /* ---- camera-shake ----------------------------------------------------
+         Procedural handheld / Steadicam / rig shake for ANY wrapper. Two
+         elements: an overflow-hidden FRAME that carries the lens perspective,
+         and a RIG inside it that gets the shake transform. Whatever you put
+         in the rig becomes "the shot".
+
+           <div class="camera-shake-frame">
+             <div class="camera-shake-rig">  ...your content...  </div>
+           </div>
+
+           cameraShake(tl, "#my-rig", { profile: "handheld-tele-mild", duration: 8 });
+
+         Layers inside the rig may carry data-cs-z="-800" to sit at a depth;
+         cameraShake() scales them to compensate so they parallax under the
+         camera instead of sliding as a flat card.
+      ------------------------------------------------------------------- */
+      .camera-shake-frame {
+        position: absolute;
+        inset: 0;
+        overflow: hidden;
+        /* perspective is written by cameraShake() from the profile's lens */
+      }
+      .camera-shake-rig {
+        position: absolute;
+        inset: 0;
+        transform-style: preserve-3d;
+        will-change: transform;
+      }
+      .camera-shake-rig > * {
+        transform-style: preserve-3d;
+      }
+
+      /* ---- self-preview stand-in "world" (not part of the snippet) ------- */
+      .cs-layer {
+        position: absolute;
+        inset: 0;
+      }
+      .cs-sky {
+        background: linear-gradient(#070b18 0%, #16264a 52%, #4a6ea8 78%, #b9852f 100%);
+      }
+      .cs-skyline {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 46%;
+        height: 220px;
+        background: repeating-linear-gradient(
+          90deg,
+          #0d1428 0 70px,
+          transparent 70px 96px,
+          #101a33 96px 140px,
+          transparent 140px 178px
+        );
+        opacity: 0.85;
+      }
+      .cs-tower {
+        position: absolute;
+        bottom: 44%;
+        width: 190px;
+        background: linear-gradient(#1d2b4d, #0a1024);
+        border-top: 6px solid #2f4a80;
+      }
+      .cs-tower::after {
+        content: "";
+        position: absolute;
+        inset: 18px 14px;
+        background:
+          repeating-linear-gradient(0deg, #ffd48a33 0 10px, transparent 10px 34px),
+          repeating-linear-gradient(90deg, #ffd48a2b 0 12px, transparent 12px 40px);
+      }
+      .cs-t1 {
+        left: 300px;
+        height: 430px;
+      }
+      .cs-t2 {
+        left: 820px;
+        width: 260px;
+        height: 640px;
+      }
+      .cs-t3 {
+        left: 1340px;
+        height: 380px;
+      }
+      /* Flat ground plane. A rotateX'd floor would poke through the title
+         plane under preserve-3d, so depth here comes from translateZ only. */
+      .cs-floor {
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 56%;
+        bottom: 0;
+        background:
+          repeating-linear-gradient(90deg, #4d6ea03d 0 3px, transparent 3px 150px),
+          repeating-linear-gradient(0deg, #4d6ea03d 0 3px, transparent 3px 70px),
+          linear-gradient(#0a1224, #04070f);
+      }
+      .cs-title {
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 300px;
+        text-align: center;
+        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+        font-weight: 800;
+        font-size: 148px;
+        line-height: 1.1;
+        letter-spacing: -0.03em;
+        color: #ffffff;
+        text-shadow: 0 12px 44px rgba(0, 0, 0, 0.75);
+      }
+      .cs-title span {
+        display: block;
+      }
+      .cs-post {
+        position: absolute;
+        left: 120px;
+        bottom: 0;
+        width: 46px;
+        height: 620px;
+        background: linear-gradient(#25324f, #060a14);
+        border-radius: 6px;
+      }
+      .cs-post-b {
+        left: auto;
+        right: 150px;
+        height: 720px;
+      }
+
+      /* ---- static frame guide: proves the WORLD moves, not the frame ----- */
+      #cs-guide {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+      }
+      /* Thirds as four thin bars, not one full-frame gradient layer: a
+         full-inset element over the title reads as an occluder to the
+         layout checker even when its paint is mostly transparent. */
+      #cs-guide .cs-line {
+        position: absolute;
+        background: rgba(255, 255, 255, 0.25);
+      }
+      #cs-guide .cs-v1 {
+        left: 639px;
+        top: 0;
+        width: 3px;
+        height: 1080px;
+      }
+      #cs-guide .cs-v2 {
+        left: 1279px;
+        top: 0;
+        width: 3px;
+        height: 1080px;
+      }
+      #cs-guide .cs-h1 {
+        left: 0;
+        top: 359px;
+        width: 1920px;
+        height: 3px;
+      }
+      #cs-guide .cs-h2 {
+        left: 0;
+        top: 719px;
+        width: 1920px;
+        height: 3px;
+      }
+      #cs-guide .cs-reticle {
+        position: absolute;
+        left: 910px;
+        top: 490px;
+        width: 100px;
+        height: 100px;
+        border: 3px solid #ff4d3d;
+        border-radius: 50%;
+      }
+      #cs-guide .cs-reticle::after {
+        content: "";
+        position: absolute;
+        left: 47px;
+        top: -40px;
+        width: 3px;
+        height: 180px;
+        background: #ff4d3d;
+      }
+      #cs-guide .cs-tick {
+        position: absolute;
+        width: 70px;
+        height: 70px;
+        border: 4px solid #ffffffbb;
+      }
+      #cs-guide .cs-tl {
+        left: 70px;
+        top: 70px;
+        border-right: 0;
+        border-bottom: 0;
+      }
+      #cs-guide .cs-tr {
+        right: 70px;
+        top: 70px;
+        border-left: 0;
+        border-bottom: 0;
+      }
+      #cs-guide .cs-bl {
+        left: 70px;
+        bottom: 70px;
+        border-right: 0;
+        border-top: 0;
+      }
+      #cs-guide .cs-br {
+        right: 70px;
+        bottom: 70px;
+        border-left: 0;
+        border-top: 0;
+      }
+      #cs-readout {
+        position: absolute;
+        left: 70px;
+        bottom: 170px;
+        font-family: Menlo, Consolas, monospace;
+        font-size: 30px;
+        letter-spacing: 0.02em;
+        color: #ffffffe6;
+        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
+      }
+    </style>
+  </head>
+  <body>
+    <!--
+      WIRING (what you copy into a host composition):
+        1. the .camera-shake-frame / .camera-shake-rig CSS above
+        2. the cameraShake() helper in the script below (profile table included)
+        3. wrap the thing you want shot:
+             <div class="camera-shake-frame">
+               <div class="camera-shake-rig" id="shot">  <video .../>  </div>
+             </div>
+        4. drive it from your paused timeline:
+             cameraShake(tl, "#shot", { profile: "handheld-wideangle-strong", duration: 8 });
+      Everything with a `cs-` class below is the self-preview world, not the snippet.
+    -->
+    <div
+      id="cs-root"
+      data-composition-id="camera-shake"
+      data-start="0"
+      data-duration="6"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+      style="position: relative; width: 1920px; height: 1080px; background: #05070f"
+    >
+      <div
+        class="camera-shake-frame clip"
+        id="cs-frame"
+        data-start="0"
+        data-duration="6"
+        data-track-index="0"
+      >
+        <!-- The rig is deliberately larger than the frame (overscan) and
+             deliberately leaves it under shake: that IS the effect, so every
+             moving layer is marked as intentional overflow. -->
+        <div class="camera-shake-rig" id="cs-rig" data-layout-allow-overflow>
+          <div class="cs-layer cs-sky" data-cs-z="-900" data-layout-allow-overflow></div>
+          <div class="cs-layer cs-farlayer" data-cs-z="-520" data-layout-allow-overflow>
+            <div class="cs-skyline" data-layout-allow-overflow></div>
+          </div>
+          <div class="cs-layer cs-midlayer" data-cs-z="-240" data-layout-allow-overflow>
+            <div class="cs-tower cs-t1" data-layout-allow-overflow></div>
+            <div class="cs-tower cs-t2" data-layout-allow-overflow></div>
+            <div class="cs-tower cs-t3" data-layout-allow-overflow></div>
+          </div>
+          <div class="cs-layer cs-floorlayer" data-cs-z="-90" data-layout-allow-overflow>
+            <div class="cs-floor" data-layout-allow-overflow></div>
+          </div>
+          <div class="cs-layer cs-titlelayer" data-cs-z="0" data-layout-allow-overflow>
+            <div class="cs-title">
+              <span>CAMERA</span>
+              <span>SHAKE</span>
+            </div>
+          </div>
+          <div class="cs-layer cs-nearlayer" data-cs-z="110" data-layout-allow-overflow>
+            <div class="cs-post" data-layout-allow-overflow></div>
+            <div class="cs-post cs-post-b" data-layout-allow-overflow></div>
+          </div>
+        </div>
+      </div>
+
+      <div id="cs-guide" class="clip" data-start="0" data-duration="6" data-track-index="1">
+        <div class="cs-line cs-v1"></div>
+        <div class="cs-line cs-v2"></div>
+        <div class="cs-line cs-h1"></div>
+        <div class="cs-line cs-h2"></div>
+        <div class="cs-tick cs-tl"></div>
+        <div class="cs-tick cs-tr"></div>
+        <div class="cs-tick cs-bl"></div>
+        <div class="cs-tick cs-br"></div>
+        <div class="cs-reticle"></div>
+        <div id="cs-readout">profile</div>
+      </div>
+    </div>
+
+    <script>
+      /* =====================================================================
+         camera-shake - procedural handheld / Steadicam / rig camera shake.
+
+         PROVENANCE + LICENCE. The nine profiles below are measured PARAMETER
+         VALUES (amplitudes in degrees, frequencies in Hz, three octaves per
+         axis) read off Unity Cinemachine's shipped noise presets. Cinemachine
+         is under the Unity Companion License, which is NOT permissive: no
+         Unity file is vendored, copied or imported here, and none of the code
+         below derives from Unity source. What is reused is the numeric data -
+         facts about how much a camera moves - plus a three-line sampler shape
+         that is standard mathematics (sum of octaves of noise / cosine). The
+         noise function, the screen-space projection, the lens model, the
+         overscan solver and the seek-safe driver are all original.
+
+         DETERMINISM. Every value is a closed-form function of `t`:
+             channel(t) = (valueNoise(freq*t + offset) - 0.5) * amplitude
+             channel(t) = cos((freq*t + offset) * 2PI) * amplitude * 0.5
+         No accumulator, no dt, no clock, no unseeded random. Seeking straight
+         to frame N produces exactly the same state as stepping to frame N.
+         The per-frame work is driven from a PROPERTY SETTER on a tweened
+         driver object - NOT from tl.eventCallback("onUpdate"), which GSAP
+         suppresses on seek() and which would freeze the shake on frame 0.
+         ===================================================================== */
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        var RAD = Math.PI / 180;
+
+        /* ---- the nine profiles ------------------------------------------
+           rot[octave] = [ [ampXdeg, freqHz], [ampY, freq], [ampZ, freq] ]
+           null = the preset has no channel on that axis for that octave.
+           `lens` selects the focal length used for the screen projection.
+
+           The optical truth in this table: wide-angle carries 12 deg on X
+           where telephoto carries 4 deg, because a long lens magnifies
+           angular jitter - amplitude scales inversely with focal length.
+           Keep the 3x ratio; it is the whole reason there are lens variants.
+        ------------------------------------------------------------------ */
+        var CS_PROFILES = {
+          "handheld-normal-mild": {
+            lens: "normal",
+            rot: [
+              [[7, 0.15], [5, 0.1], null],
+              [[4, 0.8], [2, 0.75], null],
+              [[1, 1.2], [0.8, 1.5], null],
+            ],
+          },
+          "handheld-normal-strong": {
+            lens: "normal",
+            rot: [
+              [[10, 0.4], [10, 0.06], null],
+              [[5, 1.44], [3, 0.73], null],
+              [[3, 2.49], [1, 2.0], null],
+            ],
+          },
+          "handheld-normal-extreme": {
+            lens: "normal",
+            rot: [
+              [[15, 0.2], [7, 0.25], null],
+              [[5, 0.9], [3, 1.0], null],
+              [[2, 2.0], null, null],
+            ],
+          },
+          "handheld-wideangle-mild": {
+            lens: "wide",
+            rot: [
+              [[12, 0.15], [5, 0.1], null],
+              [[5, 0.6], [4, 0.45], null],
+              [[1, 1.5], [1, 1.2], null],
+            ],
+          },
+          "handheld-wideangle-strong": {
+            lens: "wide",
+            rot: [
+              [[17.46, 0.5], [5, 0.25], null],
+              [
+                [12.47, 0.94],
+                [4, 0.5],
+                [1, 0.4],
+              ],
+              [[4, 1.2], [2, 1.3], null],
+            ],
+          },
+          "handheld-tele-mild": {
+            lens: "tele",
+            rot: [
+              [[4, 0.2], [2, 0.15], null],
+              [[2, 0.4], [2, 0.5], null],
+              [[1, 0.7], [1, 0.6], null],
+            ],
+          },
+          "handheld-tele-strong": {
+            lens: "tele",
+            rot: [
+              [
+                [6.19, 0.39],
+                [4, 0.15],
+                [1, 0.1],
+              ],
+              [[1.84, 1.75], [0.5, 0.9], null],
+              [[2.3, 2.0], [0.5, 1.4], null],
+            ],
+          },
+          /* 6D Shake also carries POSITION channels (Unity world units, not
+             degrees). Every position channel is a "constant" (cosine) channel
+             except octave-2 Y, which is noise - that asymmetry is in the
+             measured data and is kept. */
+          "rig-6d-shake": {
+            lens: "normal",
+            rot: [
+              [
+                [0.09, 5.83],
+                [0.059, 1.8],
+                [0.017, 2.38],
+              ],
+              [
+                [0.14, 9.17],
+                [0.041, 11.35],
+                [0.009, 10.52],
+              ],
+              [
+                [0.15, 57.17],
+                [0.048, 54.17],
+                [0.016, 63.76],
+              ],
+            ],
+            pos: [
+              [
+                [0.011, 3.2, 1],
+                [0.059, 1.9, 1],
+                [0.021, 3.33, 1],
+              ],
+              [
+                [0.009, 7.7, 1],
+                [0.04, 9.1, 0],
+                [0.009, 9.22, 1],
+              ],
+              [
+                [0.002, 51.51, 1],
+                [0.05, 55.54, 1],
+                [0.017, 58.55, 1],
+              ],
+            ],
+          },
+          "rig-6d-wobble": {
+            lens: "normal",
+            rot: [
+              [
+                [0.987, 5.2],
+                [1.34, 5.39],
+                [2, 2.23],
+              ],
+              [
+                [0.73, 9.17],
+                [0.86, 11.35],
+                [0.51, 8.31],
+              ],
+              [
+                [0.78, 13.52],
+                [0.55, 27.66],
+                [0.28, 18.91],
+              ],
+            ],
+          },
+        };
+
+        /* Lens -> pinhole projection distance, in pixels.
+
+           Two constraints, and they have to be satisfied together:
+           1) SCALE. These amplitudes were authored against a camera with a
+              60 degree VERTICAL field of view, so the "normal" lens must
+              reproduce that framing or every profile comes out roughly twice
+              as violent as intended: D_normal = (H/2) / tan(30deg).
+           2) RATIO. 28 / 50 / 85mm are the standard wide / normal / tele
+              primes; D scales with focal length, so wide:tele is 1:3.04 -
+              the exact reciprocal of the 12deg:4deg amplitude ratio in the
+              profile table. That reciprocal is why all seven handheld presets
+              land within ~15% of the same on-screen displacement while still
+              looking like completely different lenses. */
+        var CS_LENS_MM = { wide: 28, normal: 50, tele: 85 };
+        var CS_REF_VFOV_DEG = 60;
+
+        /* Unity position channels are world units with no pixel equivalent.
+           240 px/unit is AUTHORED (it puts 6D Shake's buzz at a few pixels,
+           which is what an engine-vibration preset should look like). It is
+           the one number here that is not measured. */
+        var CS_UNIT_PX = 240;
+
+        /* Tilting the content plate is a stand-in for rotating the camera, and
+           it degenerates. The plate is a finite rectangle sitting AT the
+           projection distance, so tipping it drives its far corner backwards
+           by (half-diagonal * sin tilt); once that approaches D the corner
+           crosses the eye plane, the projection blows up, and NO amount of
+           overscan covers the frame - increasing the scale only pushes the
+           corner further behind the eye. It bites first on wide lenses, where
+           D is small and the plate is optically enormous.
+
+           So the tilt ceiling is derived, not picked: allow the corner to sink
+           at most a quarter of the way to the eye. 28mm gets ~6.8 deg, 50mm
+           ~12.3 deg, 85mm ~21.2 deg - wide lenses keystone least, which is
+           also what they look like. The FRAMING swing, which is what the
+           measured degrees actually encode, is never clamped: the shot still
+           moves by the full authored amount and only the world's keystone
+           stops growing. */
+        var CS_TILT_DEPTH_BUDGET = 0.25;
+
+        /* ---- deterministic 1-D value noise (original implementation) ------
+           Integer hash -> [0,1), smootherstep interpolation between lattice
+           points. Pure function of (x, seed): no state, no Math.random. */
+        function csHash(i, seed) {
+          var h = Math.imul(i | 0, 374761393) + Math.imul(seed | 0, 668265263);
+          h = (h ^ (h >>> 13)) >>> 0;
+          h = Math.imul(h, 1274126177) >>> 0;
+          return ((h ^ (h >>> 16)) >>> 0) / 4294967296;
+        }
+        function csNoise(x, seed) {
+          var i = Math.floor(x);
+          var f = x - i;
+          var u = f * f * f * (f * (f * 6 - 15) + 10);
+          return csHash(i, seed) * (1 - u) + csHash(i + 1, seed) * u;
+        }
+
+        /* One channel of one octave. `constant` picks the cosine form.
+           Each channel gets its own seed AND its own time offset: sharing
+           offsets correlates the axes and the shake collapses into a diagonal
+           line, which is the classic tell of fake handheld. */
+        function csChannel(amp, freq, t, seed, constant) {
+          var u = freq * t + seed * 7.13;
+          if (constant) return Math.cos(u * 2 * Math.PI) * amp * 0.5;
+          return (csNoise(u, seed) - 0.5) * amp;
+        }
+
+        function csSample(profile, t, intensity, freqScale) {
+          var rot = [0, 0, 0];
+          var pos = [0, 0, 0];
+          var o, a, ch;
+          for (o = 0; o < profile.rot.length; o++) {
+            for (a = 0; a < 3; a++) {
+              ch = profile.rot[o][a];
+              if (!ch) continue;
+              rot[a] += csChannel(ch[0] * intensity, ch[1] * freqScale, t, o * 3 + a, 0);
+            }
+          }
+          if (profile.pos) {
+            for (o = 0; o < profile.pos.length; o++) {
+              for (a = 0; a < 3; a++) {
+                ch = profile.pos[o][a];
+                if (!ch) continue;
+                pos[a] += csChannel(ch[0] * intensity, ch[1] * freqScale, t, 32 + o * 3 + a, ch[2]);
+              }
+            }
+          }
+          return { pitch: rot[0], yaw: rot[1], roll: rot[2], px: pos[0], py: pos[1], pz: pos[2] };
+        }
+
+        /* ---- the public helper ------------------------------------------
+           cameraShake(tl, target, opts)
+             profile   one of the nine ids
+             intensity amplitude multiplier (default 1)
+             frequency frequency multiplier (default 1)
+             rotation  false = translation only (gimbal-stabilised look)
+             duration  seconds of shake (default 6)
+             at        timeline position (default 0)
+             fps       sampling rate for the overscan solve (default 30)
+             overscan  force a scale instead of solving for one
+           Returns { distance, overscan, peakX, peakY, peakRoll }.
+        ------------------------------------------------------------------ */
+        window.cameraShake = function (tl, target, opts) {
+          opts = opts || {};
+          var el = typeof target === "string" ? document.querySelector(target) : target;
+          if (!el) return null;
+
+          var profile = CS_PROFILES[opts.profile] || CS_PROFILES["handheld-normal-mild"];
+          var intensity = opts.intensity === undefined ? 1 : Number(opts.intensity);
+          var freqScale = opts.frequency === undefined ? 1 : Number(opts.frequency);
+          var withRotation = opts.rotation !== false;
+          var dur = opts.duration === undefined ? 6 : Number(opts.duration);
+          var at = opts.at === undefined ? 0 : Number(opts.at);
+          var fps = opts.fps === undefined ? 30 : Number(opts.fps);
+
+          var box = el.getBoundingClientRect();
+          var W = box.width || el.offsetWidth || 1920;
+          var H = box.height || el.offsetHeight || 1080;
+          var D = (H / 2 / Math.tan((CS_REF_VFOV_DEG / 2) * RAD)) * (CS_LENS_MM[profile.lens] / 50);
+
+          // The frame (overflow-hidden parent) carries the lens perspective so
+          // that depth layers inside the rig parallax instead of sliding flat.
+          var frame = el.parentElement;
+          if (frame) frame.style.perspective = D + "px";
+
+          // Depth layers: compensate scale so a layer at z still fills frame.
+          var layers = el.querySelectorAll("[data-cs-z]");
+          for (var i = 0; i < layers.length; i++) {
+            var z = Number(layers[i].getAttribute("data-cs-z")) || 0;
+            layers[i].style.transform = "translateZ(" + z + "px) scale(" + (D - z) / D + ")";
+          }
+
+          var maxTiltDeg =
+            Math.asin(Math.min(0.9, (CS_TILT_DEPTH_BUDGET * D) / Math.sqrt((W * W + H * H) / 4))) /
+            RAD;
+          function clampTilt(deg) {
+            return Math.max(-maxTiltDeg, Math.min(maxTiltDeg, deg));
+          }
+
+          function state(t) {
+            var s = csSample(profile, t, intensity, freqScale);
+            // Pinhole projection: a camera rotation of theta about its nodal
+            // point shifts the projected image by D*tan(theta). That shift and
+            // the plate rotation together ARE the rotation-about-the-nodal-
+            // point decomposition - it is not double counting.
+            var x = -D * Math.tan(s.yaw * RAD) + s.px * CS_UNIT_PX;
+            var y = D * Math.tan(s.pitch * RAD) + s.py * CS_UNIT_PX;
+            return {
+              x: x,
+              y: y,
+              roll: withRotation ? clampTilt(s.roll) : 0,
+              pitch: withRotation ? clampTilt(s.pitch) : 0,
+              yaw: withRotation ? clampTilt(s.yaw) : 0,
+              dolly: 1 + (s.pz * CS_UNIT_PX) / D,
+            };
+          }
+
+          // Overscan. The shake is a closed form, so the scale that keeps the
+          // plate covering the frame is computed per frame and the worst kept.
+          // Per frame, not worst-of-each-axis: peak pitch and peak yaw do not
+          // land on the same frame, and combining their maxima would zoom in
+          // for a frame that never exists. Three terms:
+          //   translation - the plate must reach 2*|offset| further
+          //   roll        - a rolled W x H rect covers W x H at
+          //                 (W cos r + H sin r) / W (and the H twin)
+          //   keystone    - under perspective the edge that tips AWAY shrinks
+          //                 toward the projection centre. The lever arm is NOT
+          //                 the plate half-size: CSS projects about the FRAME's
+          //                 perspective-origin, so a plate that is translated
+          //                 AND tipped swings its far corner about a point
+          //                 |offset| further out. Using (H/2 + |y|) instead of
+          //                 H/2 is what makes this hold on the wide-angle
+          //                 profiles; the earlier H/2 form tore a corner off
+          //                 the frame at 28mm. Verified by DOM hit-test probe
+          //                 across all nine profiles at intensity 1, 2 and 3.
+          var maxX = 0,
+            maxY = 0,
+            maxRoll = 0,
+            overscan = 1;
+          for (var f = 0; f <= Math.ceil(dur * fps); f++) {
+            var st = state(f / fps);
+            maxX = Math.max(maxX, Math.abs(st.x));
+            maxY = Math.max(maxY, Math.abs(st.y));
+            maxRoll = Math.max(maxRoll, Math.abs(st.roll));
+            var rr = Math.abs(st.roll) * RAD;
+            var need =
+              (Math.max(
+                (W * Math.cos(rr) + H * Math.sin(rr)) / W,
+                (H * Math.cos(rr) + W * Math.sin(rr)) / H,
+              ) *
+                Math.max(1 + (2 * Math.abs(st.x)) / W, 1 + (2 * Math.abs(st.y)) / H) *
+                (1 +
+                  ((H / 2 + Math.abs(st.y)) / D) * Math.sin(Math.abs(st.pitch) * RAD) +
+                  ((W / 2 + Math.abs(st.x)) / D) * Math.sin(Math.abs(st.yaw) * RAD))) /
+              Math.max(0.5, st.dolly);
+            overscan = Math.max(overscan, need);
+          }
+          overscan = opts.overscan === undefined ? overscan * 1.02 : Number(opts.overscan);
+
+          function apply(t) {
+            var s = state(t);
+            gsap.set(el, {
+              x: s.x,
+              y: s.y,
+              rotation: s.roll,
+              rotationX: s.pitch,
+              rotationY: -s.yaw,
+              scale: overscan * s.dolly,
+            });
+          }
+
+          // Seek-safe driver: GSAP writes `t` on every render, including
+          // seek(), so the setter runs on every frame. An onUpdate callback
+          // would NOT - GSAP suppresses events on seek and the shake would
+          // freeze on frame 0.
+          var driver = {};
+          var value = 0;
+          Object.defineProperty(driver, "t", {
+            get: function () {
+              return value;
+            },
+            set: function (next) {
+              value = next;
+              apply(next);
+            },
+          });
+          apply(0);
+          tl.to(driver, { t: dur, duration: dur, ease: "none" }, at);
+
+          return {
+            distance: D,
+            overscan: overscan,
+            peakX: maxX,
+            peakY: maxY,
+            peakRoll: maxRoll,
+          };
+        };
+
+        /* ---- self-preview (not part of the snippet) ----------------------- */
+        var vars =
+          window.__hyperframes && window.__hyperframes.getVariables
+            ? window.__hyperframes.getVariables()
+            : {};
+        var PROFILE = vars.shakeProfile || "handheld-normal-mild";
+        var INTENSITY = vars.shakeIntensity === undefined ? 1 : Number(vars.shakeIntensity);
+        var FREQUENCY = vars.shakeFrequency === undefined ? 1 : Number(vars.shakeFrequency);
+        var ROTATION = !(vars.shakeRotation === false || vars.shakeRotation === "false");
+
+        var tl = gsap.timeline({ paused: true });
+        var info = window.cameraShake(tl, "#cs-rig", {
+          profile: PROFILE,
+          intensity: INTENSITY,
+          frequency: FREQUENCY,
+          rotation: ROTATION,
+          duration: 6,
+          fps: 30,
+        });
+        var readout = document.getElementById("cs-readout");
+        if (readout && info) {
+          readout.textContent =
+            PROFILE +
+            "  |  " +
+            CS_LENS_MM[(CS_PROFILES[PROFILE] || CS_PROFILES["handheld-normal-mild"]).lens] +
+            "mm  |  x" +
+            INTENSITY +
+            " amp  x" +
+            FREQUENCY +
+            " freq  |  rot " +
+            (ROTATION ? "on" : "off") +
+            "  |  overscan " +
+            info.overscan.toFixed(3);
+        }
+        window.__timelines["camera-shake"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/components/camera-shake/demo.html b/registry/components/camera-shake/demo.html
new file mode 100644
index 0000000000..4bb78dbb23
--- /dev/null
+++ b/registry/components/camera-shake/demo.html
@@ -0,0 +1,812 @@
+<!doctype html>
+<!-- Demo plate for the catalog preview. Identical to camera-shake.html except the
+     body background, which is opaque here so the plate reads on the catalog card.
+     Not installed by `hyperframes add` - registry-item.json lists camera-shake.html only. -->
+<html
+  lang="en"
+  data-composition-variables='[
+    {
+      "id": "shakeProfile",
+      "type": "enum",
+      "label": "Shake profile",
+      "default": "handheld-normal-mild",
+      "options": [
+        { "value": "handheld-normal-mild", "label": "Handheld - normal lens, mild" },
+        { "value": "handheld-normal-strong", "label": "Handheld - normal lens, strong" },
+        { "value": "handheld-normal-extreme", "label": "Handheld - normal lens, extreme" },
+        { "value": "handheld-wideangle-mild", "label": "Handheld - wide angle, mild" },
+        { "value": "handheld-wideangle-strong", "label": "Handheld - wide angle, strong" },
+        { "value": "handheld-tele-mild", "label": "Handheld - telephoto, mild" },
+        { "value": "handheld-tele-strong", "label": "Handheld - telephoto, strong" },
+        { "value": "rig-6d-shake", "label": "Rig - 6D shake (engine buzz)" },
+        { "value": "rig-6d-wobble", "label": "Rig - 6D wobble" }
+      ]
+    },
+    {
+      "id": "shakeIntensity",
+      "type": "number",
+      "label": "Intensity multiplier",
+      "default": 1,
+      "min": 0,
+      "max": 3,
+      "step": 0.05
+    },
+    {
+      "id": "shakeFrequency",
+      "type": "number",
+      "label": "Frequency multiplier",
+      "default": 1,
+      "min": 0.1,
+      "max": 4,
+      "step": 0.05
+    },
+    {
+      "id": "shakeRotation",
+      "type": "boolean",
+      "label": "Include rotation (roll + tilt/pan)",
+      "default": true
+    }
+  ]'
+>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Camera Shake</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #05070f;
+      }
+
+      /* ---- camera-shake ----------------------------------------------------
+         Procedural handheld / Steadicam / rig shake for ANY wrapper. Two
+         elements: an overflow-hidden FRAME that carries the lens perspective,
+         and a RIG inside it that gets the shake transform. Whatever you put
+         in the rig becomes "the shot".
+
+           <div class="camera-shake-frame">
+             <div class="camera-shake-rig">  ...your content...  </div>
+           </div>
+
+           cameraShake(tl, "#my-rig", { profile: "handheld-tele-mild", duration: 8 });
+
+         Layers inside the rig may carry data-cs-z="-800" to sit at a depth;
+         cameraShake() scales them to compensate so they parallax under the
+         camera instead of sliding as a flat card.
+      ------------------------------------------------------------------- */
+      .camera-shake-frame {
+        position: absolute;
+        inset: 0;
+        overflow: hidden;
+        /* perspective is written by cameraShake() from the profile's lens */
+      }
+      .camera-shake-rig {
+        position: absolute;
+        inset: 0;
+        transform-style: preserve-3d;
+        will-change: transform;
+      }
+      .camera-shake-rig > * {
+        transform-style: preserve-3d;
+      }
+
+      /* ---- self-preview stand-in "world" (not part of the snippet) ------- */
+      .cs-layer {
+        position: absolute;
+        inset: 0;
+      }
+      .cs-sky {
+        background: linear-gradient(#070b18 0%, #16264a 52%, #4a6ea8 78%, #b9852f 100%);
+      }
+      .cs-skyline {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 46%;
+        height: 220px;
+        background: repeating-linear-gradient(
+          90deg,
+          #0d1428 0 70px,
+          transparent 70px 96px,
+          #101a33 96px 140px,
+          transparent 140px 178px
+        );
+        opacity: 0.85;
+      }
+      .cs-tower {
+        position: absolute;
+        bottom: 44%;
+        width: 190px;
+        background: linear-gradient(#1d2b4d, #0a1024);
+        border-top: 6px solid #2f4a80;
+      }
+      .cs-tower::after {
+        content: "";
+        position: absolute;
+        inset: 18px 14px;
+        background:
+          repeating-linear-gradient(0deg, #ffd48a33 0 10px, transparent 10px 34px),
+          repeating-linear-gradient(90deg, #ffd48a2b 0 12px, transparent 12px 40px);
+      }
+      .cs-t1 {
+        left: 300px;
+        height: 430px;
+      }
+      .cs-t2 {
+        left: 820px;
+        width: 260px;
+        height: 640px;
+      }
+      .cs-t3 {
+        left: 1340px;
+        height: 380px;
+      }
+      /* Flat ground plane. A rotateX'd floor would poke through the title
+         plane under preserve-3d, so depth here comes from translateZ only. */
+      .cs-floor {
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 56%;
+        bottom: 0;
+        background:
+          repeating-linear-gradient(90deg, #4d6ea03d 0 3px, transparent 3px 150px),
+          repeating-linear-gradient(0deg, #4d6ea03d 0 3px, transparent 3px 70px),
+          linear-gradient(#0a1224, #04070f);
+      }
+      .cs-title {
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 300px;
+        text-align: center;
+        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+        font-weight: 800;
+        font-size: 148px;
+        line-height: 1.1;
+        letter-spacing: -0.03em;
+        color: #ffffff;
+        text-shadow: 0 12px 44px rgba(0, 0, 0, 0.75);
+      }
+      .cs-title span {
+        display: block;
+      }
+      .cs-post {
+        position: absolute;
+        left: 120px;
+        bottom: 0;
+        width: 46px;
+        height: 620px;
+        background: linear-gradient(#25324f, #060a14);
+        border-radius: 6px;
+      }
+      .cs-post-b {
+        left: auto;
+        right: 150px;
+        height: 720px;
+      }
+
+      /* ---- static frame guide: proves the WORLD moves, not the frame ----- */
+      #cs-guide {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+      }
+      /* Thirds as four thin bars, not one full-frame gradient layer: a
+         full-inset element over the title reads as an occluder to the
+         layout checker even when its paint is mostly transparent. */
+      #cs-guide .cs-line {
+        position: absolute;
+        background: rgba(255, 255, 255, 0.25);
+      }
+      #cs-guide .cs-v1 {
+        left: 639px;
+        top: 0;
+        width: 3px;
+        height: 1080px;
+      }
+      #cs-guide .cs-v2 {
+        left: 1279px;
+        top: 0;
+        width: 3px;
+        height: 1080px;
+      }
+      #cs-guide .cs-h1 {
+        left: 0;
+        top: 359px;
+        width: 1920px;
+        height: 3px;
+      }
+      #cs-guide .cs-h2 {
+        left: 0;
+        top: 719px;
+        width: 1920px;
+        height: 3px;
+      }
+      #cs-guide .cs-reticle {
+        position: absolute;
+        left: 910px;
+        top: 490px;
+        width: 100px;
+        height: 100px;
+        border: 3px solid #ff4d3d;
+        border-radius: 50%;
+      }
+      #cs-guide .cs-reticle::after {
+        content: "";
+        position: absolute;
+        left: 47px;
+        top: -40px;
+        width: 3px;
+        height: 180px;
+        background: #ff4d3d;
+      }
+      #cs-guide .cs-tick {
+        position: absolute;
+        width: 70px;
+        height: 70px;
+        border: 4px solid #ffffffbb;
+      }
+      #cs-guide .cs-tl {
+        left: 70px;
+        top: 70px;
+        border-right: 0;
+        border-bottom: 0;
+      }
+      #cs-guide .cs-tr {
+        right: 70px;
+        top: 70px;
+        border-left: 0;
+        border-bottom: 0;
+      }
+      #cs-guide .cs-bl {
+        left: 70px;
+        bottom: 70px;
+        border-right: 0;
+        border-top: 0;
+      }
+      #cs-guide .cs-br {
+        right: 70px;
+        bottom: 70px;
+        border-left: 0;
+        border-top: 0;
+      }
+      #cs-readout {
+        position: absolute;
+        left: 70px;
+        bottom: 170px;
+        font-family: Menlo, Consolas, monospace;
+        font-size: 30px;
+        letter-spacing: 0.02em;
+        color: #ffffffe6;
+        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
+      }
+    </style>
+  </head>
+  <body>
+    <!--
+      WIRING (what you copy into a host composition):
+        1. the .camera-shake-frame / .camera-shake-rig CSS above
+        2. the cameraShake() helper in the script below (profile table included)
+        3. wrap the thing you want shot:
+             <div class="camera-shake-frame">
+               <div class="camera-shake-rig" id="shot">  <video .../>  </div>
+             </div>
+        4. drive it from your paused timeline:
+             cameraShake(tl, "#shot", { profile: "handheld-wideangle-strong", duration: 8 });
+      Everything with a `cs-` class below is the self-preview world, not the snippet.
+    -->
+    <div
+      id="cs-root"
+      data-composition-id="camera-shake"
+      data-start="0"
+      data-duration="6"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+      style="position: relative; width: 1920px; height: 1080px; background: #05070f"
+    >
+      <div
+        class="camera-shake-frame clip"
+        id="cs-frame"
+        data-start="0"
+        data-duration="6"
+        data-track-index="0"
+      >
+        <!-- The rig is deliberately larger than the frame (overscan) and
+             deliberately leaves it under shake: that IS the effect, so every
+             moving layer is marked as intentional overflow. -->
+        <div class="camera-shake-rig" id="cs-rig" data-layout-allow-overflow>
+          <div class="cs-layer cs-sky" data-cs-z="-900" data-layout-allow-overflow></div>
+          <div class="cs-layer cs-farlayer" data-cs-z="-520" data-layout-allow-overflow>
+            <div class="cs-skyline" data-layout-allow-overflow></div>
+          </div>
+          <div class="cs-layer cs-midlayer" data-cs-z="-240" data-layout-allow-overflow>
+            <div class="cs-tower cs-t1" data-layout-allow-overflow></div>
+            <div class="cs-tower cs-t2" data-layout-allow-overflow></div>
+            <div class="cs-tower cs-t3" data-layout-allow-overflow></div>
+          </div>
+          <div class="cs-layer cs-floorlayer" data-cs-z="-90" data-layout-allow-overflow>
+            <div class="cs-floor" data-layout-allow-overflow></div>
+          </div>
+          <div class="cs-layer cs-titlelayer" data-cs-z="0" data-layout-allow-overflow>
+            <div class="cs-title">
+              <span>CAMERA</span>
+              <span>SHAKE</span>
+            </div>
+          </div>
+          <div class="cs-layer cs-nearlayer" data-cs-z="110" data-layout-allow-overflow>
+            <div class="cs-post" data-layout-allow-overflow></div>
+            <div class="cs-post cs-post-b" data-layout-allow-overflow></div>
+          </div>
+        </div>
+      </div>
+
+      <div id="cs-guide" class="clip" data-start="0" data-duration="6" data-track-index="1">
+        <div class="cs-line cs-v1"></div>
+        <div class="cs-line cs-v2"></div>
+        <div class="cs-line cs-h1"></div>
+        <div class="cs-line cs-h2"></div>
+        <div class="cs-tick cs-tl"></div>
+        <div class="cs-tick cs-tr"></div>
+        <div class="cs-tick cs-bl"></div>
+        <div class="cs-tick cs-br"></div>
+        <div class="cs-reticle"></div>
+        <div id="cs-readout">profile</div>
+      </div>
+    </div>
+
+    <script>
+      /* =====================================================================
+         camera-shake - procedural handheld / Steadicam / rig camera shake.
+
+         PROVENANCE + LICENCE. The nine profiles below are measured PARAMETER
+         VALUES (amplitudes in degrees, frequencies in Hz, three octaves per
+         axis) read off Unity Cinemachine's shipped noise presets. Cinemachine
+         is under the Unity Companion License, which is NOT permissive: no
+         Unity file is vendored, copied or imported here, and none of the code
+         below derives from Unity source. What is reused is the numeric data -
+         facts about how much a camera moves - plus a three-line sampler shape
+         that is standard mathematics (sum of octaves of noise / cosine). The
+         noise function, the screen-space projection, the lens model, the
+         overscan solver and the seek-safe driver are all original.
+
+         DETERMINISM. Every value is a closed-form function of `t`:
+             channel(t) = (valueNoise(freq*t + offset) - 0.5) * amplitude
+             channel(t) = cos((freq*t + offset) * 2PI) * amplitude * 0.5
+         No accumulator, no dt, no clock, no unseeded random. Seeking straight
+         to frame N produces exactly the same state as stepping to frame N.
+         The per-frame work is driven from a PROPERTY SETTER on a tweened
+         driver object - NOT from tl.eventCallback("onUpdate"), which GSAP
+         suppresses on seek() and which would freeze the shake on frame 0.
+         ===================================================================== */
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        var RAD = Math.PI / 180;
+
+        /* ---- the nine profiles ------------------------------------------
+           rot[octave] = [ [ampXdeg, freqHz], [ampY, freq], [ampZ, freq] ]
+           null = the preset has no channel on that axis for that octave.
+           `lens` selects the focal length used for the screen projection.
+
+           The optical truth in this table: wide-angle carries 12 deg on X
+           where telephoto carries 4 deg, because a long lens magnifies
+           angular jitter - amplitude scales inversely with focal length.
+           Keep the 3x ratio; it is the whole reason there are lens variants.
+        ------------------------------------------------------------------ */
+        var CS_PROFILES = {
+          "handheld-normal-mild": {
+            lens: "normal",
+            rot: [
+              [[7, 0.15], [5, 0.1], null],
+              [[4, 0.8], [2, 0.75], null],
+              [[1, 1.2], [0.8, 1.5], null],
+            ],
+          },
+          "handheld-normal-strong": {
+            lens: "normal",
+            rot: [
+              [[10, 0.4], [10, 0.06], null],
+              [[5, 1.44], [3, 0.73], null],
+              [[3, 2.49], [1, 2.0], null],
+            ],
+          },
+          "handheld-normal-extreme": {
+            lens: "normal",
+            rot: [
+              [[15, 0.2], [7, 0.25], null],
+              [[5, 0.9], [3, 1.0], null],
+              [[2, 2.0], null, null],
+            ],
+          },
+          "handheld-wideangle-mild": {
+            lens: "wide",
+            rot: [
+              [[12, 0.15], [5, 0.1], null],
+              [[5, 0.6], [4, 0.45], null],
+              [[1, 1.5], [1, 1.2], null],
+            ],
+          },
+          "handheld-wideangle-strong": {
+            lens: "wide",
+            rot: [
+              [[17.46, 0.5], [5, 0.25], null],
+              [
+                [12.47, 0.94],
+                [4, 0.5],
+                [1, 0.4],
+              ],
+              [[4, 1.2], [2, 1.3], null],
+            ],
+          },
+          "handheld-tele-mild": {
+            lens: "tele",
+            rot: [
+              [[4, 0.2], [2, 0.15], null],
+              [[2, 0.4], [2, 0.5], null],
+              [[1, 0.7], [1, 0.6], null],
+            ],
+          },
+          "handheld-tele-strong": {
+            lens: "tele",
+            rot: [
+              [
+                [6.19, 0.39],
+                [4, 0.15],
+                [1, 0.1],
+              ],
+              [[1.84, 1.75], [0.5, 0.9], null],
+              [[2.3, 2.0], [0.5, 1.4], null],
+            ],
+          },
+          /* 6D Shake also carries POSITION channels (Unity world units, not
+             degrees). Every position channel is a "constant" (cosine) channel
+             except octave-2 Y, which is noise - that asymmetry is in the
+             measured data and is kept. */
+          "rig-6d-shake": {
+            lens: "normal",
+            rot: [
+              [
+                [0.09, 5.83],
+                [0.059, 1.8],
+                [0.017, 2.38],
+              ],
+              [
+                [0.14, 9.17],
+                [0.041, 11.35],
+                [0.009, 10.52],
+              ],
+              [
+                [0.15, 57.17],
+                [0.048, 54.17],
+                [0.016, 63.76],
+              ],
+            ],
+            pos: [
+              [
+                [0.011, 3.2, 1],
+                [0.059, 1.9, 1],
+                [0.021, 3.33, 1],
+              ],
+              [
+                [0.009, 7.7, 1],
+                [0.04, 9.1, 0],
+                [0.009, 9.22, 1],
+              ],
+              [
+                [0.002, 51.51, 1],
+                [0.05, 55.54, 1],
+                [0.017, 58.55, 1],
+              ],
+            ],
+          },
+          "rig-6d-wobble": {
+            lens: "normal",
+            rot: [
+              [
+                [0.987, 5.2],
+                [1.34, 5.39],
+                [2, 2.23],
+              ],
+              [
+                [0.73, 9.17],
+                [0.86, 11.35],
+                [0.51, 8.31],
+              ],
+              [
+                [0.78, 13.52],
+                [0.55, 27.66],
+                [0.28, 18.91],
+              ],
+            ],
+          },
+        };
+
+        /* Lens -> pinhole projection distance, in pixels.
+
+           Two constraints, and they have to be satisfied together:
+           1) SCALE. These amplitudes were authored against a camera with a
+              60 degree VERTICAL field of view, so the "normal" lens must
+              reproduce that framing or every profile comes out roughly twice
+              as violent as intended: D_normal = (H/2) / tan(30deg).
+           2) RATIO. 28 / 50 / 85mm are the standard wide / normal / tele
+              primes; D scales with focal length, so wide:tele is 1:3.04 -
+              the exact reciprocal of the 12deg:4deg amplitude ratio in the
+              profile table. That reciprocal is why all seven handheld presets
+              land within ~15% of the same on-screen displacement while still
+              looking like completely different lenses. */
+        var CS_LENS_MM = { wide: 28, normal: 50, tele: 85 };
+        var CS_REF_VFOV_DEG = 60;
+
+        /* Unity position channels are world units with no pixel equivalent.
+           240 px/unit is AUTHORED (it puts 6D Shake's buzz at a few pixels,
+           which is what an engine-vibration preset should look like). It is
+           the one number here that is not measured. */
+        var CS_UNIT_PX = 240;
+
+        /* Tilting the content plate is a stand-in for rotating the camera, and
+           it degenerates. The plate is a finite rectangle sitting AT the
+           projection distance, so tipping it drives its far corner backwards
+           by (half-diagonal * sin tilt); once that approaches D the corner
+           crosses the eye plane, the projection blows up, and NO amount of
+           overscan covers the frame - increasing the scale only pushes the
+           corner further behind the eye. It bites first on wide lenses, where
+           D is small and the plate is optically enormous.
+
+           So the tilt ceiling is derived, not picked: allow the corner to sink
+           at most a quarter of the way to the eye. 28mm gets ~6.8 deg, 50mm
+           ~12.3 deg, 85mm ~21.2 deg - wide lenses keystone least, which is
+           also what they look like. The FRAMING swing, which is what the
+           measured degrees actually encode, is never clamped: the shot still
+           moves by the full authored amount and only the world's keystone
+           stops growing. */
+        var CS_TILT_DEPTH_BUDGET = 0.25;
+
+        /* ---- deterministic 1-D value noise (original implementation) ------
+           Integer hash -> [0,1), smootherstep interpolation between lattice
+           points. Pure function of (x, seed): no state, no Math.random. */
+        function csHash(i, seed) {
+          var h = Math.imul(i | 0, 374761393) + Math.imul(seed | 0, 668265263);
+          h = (h ^ (h >>> 13)) >>> 0;
+          h = Math.imul(h, 1274126177) >>> 0;
+          return ((h ^ (h >>> 16)) >>> 0) / 4294967296;
+        }
+        function csNoise(x, seed) {
+          var i = Math.floor(x);
+          var f = x - i;
+          var u = f * f * f * (f * (f * 6 - 15) + 10);
+          return csHash(i, seed) * (1 - u) + csHash(i + 1, seed) * u;
+        }
+
+        /* One channel of one octave. `constant` picks the cosine form.
+           Each channel gets its own seed AND its own time offset: sharing
+           offsets correlates the axes and the shake collapses into a diagonal
+           line, which is the classic tell of fake handheld. */
+        function csChannel(amp, freq, t, seed, constant) {
+          var u = freq * t + seed * 7.13;
+          if (constant) return Math.cos(u * 2 * Math.PI) * amp * 0.5;
+          return (csNoise(u, seed) - 0.5) * amp;
+        }
+
+        function csSample(profile, t, intensity, freqScale) {
+          var rot = [0, 0, 0];
+          var pos = [0, 0, 0];
+          var o, a, ch;
+          for (o = 0; o < profile.rot.length; o++) {
+            for (a = 0; a < 3; a++) {
+              ch = profile.rot[o][a];
+              if (!ch) continue;
+              rot[a] += csChannel(ch[0] * intensity, ch[1] * freqScale, t, o * 3 + a, 0);
+            }
+          }
+          if (profile.pos) {
+            for (o = 0; o < profile.pos.length; o++) {
+              for (a = 0; a < 3; a++) {
+                ch = profile.pos[o][a];
+                if (!ch) continue;
+                pos[a] += csChannel(ch[0] * intensity, ch[1] * freqScale, t, 32 + o * 3 + a, ch[2]);
+              }
+            }
+          }
+          return { pitch: rot[0], yaw: rot[1], roll: rot[2], px: pos[0], py: pos[1], pz: pos[2] };
+        }
+
+        /* ---- the public helper ------------------------------------------
+           cameraShake(tl, target, opts)
+             profile   one of the nine ids
+             intensity amplitude multiplier (default 1)
+             frequency frequency multiplier (default 1)
+             rotation  false = translation only (gimbal-stabilised look)
+             duration  seconds of shake (default 6)
+             at        timeline position (default 0)
+             fps       sampling rate for the overscan solve (default 30)
+             overscan  force a scale instead of solving for one
+           Returns { distance, overscan, peakX, peakY, peakRoll }.
+        ------------------------------------------------------------------ */
+        window.cameraShake = function (tl, target, opts) {
+          opts = opts || {};
+          var el = typeof target === "string" ? document.querySelector(target) : target;
+          if (!el) return null;
+
+          var profile = CS_PROFILES[opts.profile] || CS_PROFILES["handheld-normal-mild"];
+          var intensity = opts.intensity === undefined ? 1 : Number(opts.intensity);
+          var freqScale = opts.frequency === undefined ? 1 : Number(opts.frequency);
+          var withRotation = opts.rotation !== false;
+          var dur = opts.duration === undefined ? 6 : Number(opts.duration);
+          var at = opts.at === undefined ? 0 : Number(opts.at);
+          var fps = opts.fps === undefined ? 30 : Number(opts.fps);
+
+          var box = el.getBoundingClientRect();
+          var W = box.width || el.offsetWidth || 1920;
+          var H = box.height || el.offsetHeight || 1080;
+          var D = (H / 2 / Math.tan((CS_REF_VFOV_DEG / 2) * RAD)) * (CS_LENS_MM[profile.lens] / 50);
+
+          // The frame (overflow-hidden parent) carries the lens perspective so
+          // that depth layers inside the rig parallax instead of sliding flat.
+          var frame = el.parentElement;
+          if (frame) frame.style.perspective = D + "px";
+
+          // Depth layers: compensate scale so a layer at z still fills frame.
+          var layers = el.querySelectorAll("[data-cs-z]");
+          for (var i = 0; i < layers.length; i++) {
+            var z = Number(layers[i].getAttribute("data-cs-z")) || 0;
+            layers[i].style.transform = "translateZ(" + z + "px) scale(" + (D - z) / D + ")";
+          }
+
+          var maxTiltDeg =
+            Math.asin(Math.min(0.9, (CS_TILT_DEPTH_BUDGET * D) / Math.sqrt((W * W + H * H) / 4))) /
+            RAD;
+          function clampTilt(deg) {
+            return Math.max(-maxTiltDeg, Math.min(maxTiltDeg, deg));
+          }
+
+          function state(t) {
+            var s = csSample(profile, t, intensity, freqScale);
+            // Pinhole projection: a camera rotation of theta about its nodal
+            // point shifts the projected image by D*tan(theta). That shift and
+            // the plate rotation together ARE the rotation-about-the-nodal-
+            // point decomposition - it is not double counting.
+            var x = -D * Math.tan(s.yaw * RAD) + s.px * CS_UNIT_PX;
+            var y = D * Math.tan(s.pitch * RAD) + s.py * CS_UNIT_PX;
+            return {
+              x: x,
+              y: y,
+              roll: withRotation ? clampTilt(s.roll) : 0,
+              pitch: withRotation ? clampTilt(s.pitch) : 0,
+              yaw: withRotation ? clampTilt(s.yaw) : 0,
+              dolly: 1 + (s.pz * CS_UNIT_PX) / D,
+            };
+          }
+
+          // Overscan. The shake is a closed form, so the scale that keeps the
+          // plate covering the frame is computed per frame and the worst kept.
+          // Per frame, not worst-of-each-axis: peak pitch and peak yaw do not
+          // land on the same frame, and combining their maxima would zoom in
+          // for a frame that never exists. Three terms:
+          //   translation - the plate must reach 2*|offset| further
+          //   roll        - a rolled W x H rect covers W x H at
+          //                 (W cos r + H sin r) / W (and the H twin)
+          //   keystone    - under perspective the edge that tips AWAY shrinks
+          //                 toward the projection centre. The lever arm is NOT
+          //                 the plate half-size: CSS projects about the FRAME's
+          //                 perspective-origin, so a plate that is translated
+          //                 AND tipped swings its far corner about a point
+          //                 |offset| further out. Using (H/2 + |y|) instead of
+          //                 H/2 is what makes this hold on the wide-angle
+          //                 profiles; the earlier H/2 form tore a corner off
+          //                 the frame at 28mm. Verified by DOM hit-test probe
+          //                 across all nine profiles at intensity 1, 2 and 3.
+          var maxX = 0,
+            maxY = 0,
+            maxRoll = 0,
+            overscan = 1;
+          for (var f = 0; f <= Math.ceil(dur * fps); f++) {
+            var st = state(f / fps);
+            maxX = Math.max(maxX, Math.abs(st.x));
+            maxY = Math.max(maxY, Math.abs(st.y));
+            maxRoll = Math.max(maxRoll, Math.abs(st.roll));
+            var rr = Math.abs(st.roll) * RAD;
+            var need =
+              (Math.max(
+                (W * Math.cos(rr) + H * Math.sin(rr)) / W,
+                (H * Math.cos(rr) + W * Math.sin(rr)) / H,
+              ) *
+                Math.max(1 + (2 * Math.abs(st.x)) / W, 1 + (2 * Math.abs(st.y)) / H) *
+                (1 +
+                  ((H / 2 + Math.abs(st.y)) / D) * Math.sin(Math.abs(st.pitch) * RAD) +
+                  ((W / 2 + Math.abs(st.x)) / D) * Math.sin(Math.abs(st.yaw) * RAD))) /
+              Math.max(0.5, st.dolly);
+            overscan = Math.max(overscan, need);
+          }
+          overscan = opts.overscan === undefined ? overscan * 1.02 : Number(opts.overscan);
+
+          function apply(t) {
+            var s = state(t);
+            gsap.set(el, {
+              x: s.x,
+              y: s.y,
+              rotation: s.roll,
+              rotationX: s.pitch,
+              rotationY: -s.yaw,
+              scale: overscan * s.dolly,
+            });
+          }
+
+          // Seek-safe driver: GSAP writes `t` on every render, including
+          // seek(), so the setter runs on every frame. An onUpdate callback
+          // would NOT - GSAP suppresses events on seek and the shake would
+          // freeze on frame 0.
+          var driver = {};
+          var value = 0;
+          Object.defineProperty(driver, "t", {
+            get: function () {
+              return value;
+            },
+            set: function (next) {
+              value = next;
+              apply(next);
+            },
+          });
+          apply(0);
+          tl.to(driver, { t: dur, duration: dur, ease: "none" }, at);
+
+          return {
+            distance: D,
+            overscan: overscan,
+            peakX: maxX,
+            peakY: maxY,
+            peakRoll: maxRoll,
+          };
+        };
+
+        /* ---- self-preview (not part of the snippet) ----------------------- */
+        var vars =
+          window.__hyperframes && window.__hyperframes.getVariables
+            ? window.__hyperframes.getVariables()
+            : {};
+        var PROFILE = vars.shakeProfile || "handheld-normal-mild";
+        var INTENSITY = vars.shakeIntensity === undefined ? 1 : Number(vars.shakeIntensity);
+        var FREQUENCY = vars.shakeFrequency === undefined ? 1 : Number(vars.shakeFrequency);
+        var ROTATION = !(vars.shakeRotation === false || vars.shakeRotation === "false");
+
+        var tl = gsap.timeline({ paused: true });
+        var info = window.cameraShake(tl, "#cs-rig", {
+          profile: PROFILE,
+          intensity: INTENSITY,
+          frequency: FREQUENCY,
+          rotation: ROTATION,
+          duration: 6,
+          fps: 30,
+        });
+        var readout = document.getElementById("cs-readout");
+        if (readout && info) {
+          readout.textContent =
+            PROFILE +
+            "  |  " +
+            CS_LENS_MM[(CS_PROFILES[PROFILE] || CS_PROFILES["handheld-normal-mild"]).lens] +
+            "mm  |  x" +
+            INTENSITY +
+            " amp  x" +
+            FREQUENCY +
+            " freq  |  rot " +
+            (ROTATION ? "on" : "off") +
+            "  |  overscan " +
+            info.overscan.toFixed(3);
+        }
+        window.__timelines["camera-shake"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/components/camera-shake/registry-item.json b/registry/components/camera-shake/registry-item.json
new file mode 100644
index 0000000000..33de174bc4
--- /dev/null
+++ b/registry/components/camera-shake/registry-item.json
@@ -0,0 +1,58 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "camera-shake",
+  "type": "hyperframes:component",
+  "title": "Camera Shake",
+  "description": "Procedural handheld, telephoto and rig camera shake for any wrapper: nine measured profiles with per-lens projection, closed-form and seek-safe",
+  "tags": ["camera", "shake", "handheld", "effect", "cinematic"],
+  "variables": [
+    {
+      "id": "shakeProfile",
+      "type": "enum",
+      "label": "Shake profile",
+      "default": "handheld-normal-mild",
+      "options": [
+        { "value": "handheld-normal-mild", "label": "Handheld - normal lens, mild" },
+        { "value": "handheld-normal-strong", "label": "Handheld - normal lens, strong" },
+        { "value": "handheld-normal-extreme", "label": "Handheld - normal lens, extreme" },
+        { "value": "handheld-wideangle-mild", "label": "Handheld - wide angle, mild" },
+        { "value": "handheld-wideangle-strong", "label": "Handheld - wide angle, strong" },
+        { "value": "handheld-tele-mild", "label": "Handheld - telephoto, mild" },
+        { "value": "handheld-tele-strong", "label": "Handheld - telephoto, strong" },
+        { "value": "rig-6d-shake", "label": "Rig - 6D shake (engine buzz)" },
+        { "value": "rig-6d-wobble", "label": "Rig - 6D wobble" }
+      ]
+    },
+    {
+      "id": "shakeIntensity",
+      "type": "number",
+      "label": "Intensity multiplier",
+      "default": 1,
+      "min": 0,
+      "max": 3,
+      "step": 0.05
+    },
+    {
+      "id": "shakeFrequency",
+      "type": "number",
+      "label": "Frequency multiplier",
+      "default": 1,
+      "min": 0.1,
+      "max": 4,
+      "step": 0.05
+    },
+    {
+      "id": "shakeRotation",
+      "type": "boolean",
+      "label": "Include rotation (roll + tilt/pan)",
+      "default": true
+    }
+  ],
+  "files": [
+    {
+      "path": "camera-shake.html",
+      "target": "compositions/components/camera-shake.html",
+      "type": "hyperframes:snippet"
+    }
+  ]
+}
diff --git a/registry/components/caption-camera-follow/caption-camera-follow.html b/registry/components/caption-camera-follow/caption-camera-follow.html
new file mode 100644
index 0000000000..0eee029a36
--- /dev/null
+++ b/registry/components/caption-camera-follow/caption-camera-follow.html
@@ -0,0 +1,431 @@
+<!doctype html>
+<!--
+  caption-camera-follow: the words do not move, the camera does.
+
+  One sentence. Layout is self similar: every new word is sized as a fraction of the
+  bounding box of everything written so far, and is dropped either to the right of that
+  box or onto a new line below it, alternating. Because each word is measured against a
+  box that keeps growing, the box grows geometrically, so the camera pulls back at a
+  steady exponential rate and every word arrives at roughly the same size on screen. Old
+  words stay lit and simply become small, piling up toward the top left the way
+  handwriting fills a page. The last beat carries the same pull back all the way out
+  until the whole sentence is readable at once.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and applies it before the timeline is built.
+  Duration, word order and cadence are untouched by them.
+
+    - accent (gold | green | blue | violet, default gold): the colour of the
+      highlighted words.
+    - framing (tight | standard | wide, default standard): the air the camera
+      leaves around the written block. tight lands each word larger in frame,
+      wide sits further back. Every move and the closing pull back scale
+      together, so the shot stays one continuous camera.
+    - smear (off | subtle | standard | heavy, default standard): scales the
+      radial motion blur each move carries. off renders every frame sharp.
+
+  On every default the result is identical to the original: gold highlights, a
+  1.36 margin around the block and a peak smear of 2.6 percent of frame width.
+
+  Every ease is a cubic bezier written out by hand and solved in this file. No preset is
+  used anywhere. Motion blur is radial, the way it reads in real camera footage: each word
+  carries its own blur share, scaled by how far that word sits from the centre of the move,
+  so the frame smears outward from the point the camera is pushing toward. One shared
+  amount variable is tweened per move and every word multiplies it by its own distance
+  share, so the whole radial pulse costs one tween instead of fourteen.
+
+  Mount contract: everything lives inside <template>, styles and scripts included, and the
+  scripts sit INSIDE the composition root. A host clones template content into its own
+  mount and only runs scripts found inside the root; markup left outside is copied without
+  its behaviour, which renders a black card with no timeline at all.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Camera Follow Captions</title>
+  </head>
+  <body>
+    <template>
+      <div
+        id="root"
+        class="clip cf-root"
+        data-composition-id="caption-camera-follow"
+        data-duration="9"
+        data-fps="30"
+        data-composition-variables='[
+          { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Colour of the highlighted words. gold is the original.", "default": "gold", "options": [{ "value": "gold", "label": "Gold" }, { "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+          { "id": "framing", "type": "enum", "role": "style", "label": "Framing", "description": "Air the camera leaves around the written block, so the words land larger or smaller in frame.", "default": "standard", "options": [{ "value": "tight", "label": "Tight" }, { "value": "standard", "label": "Standard" }, { "value": "wide", "label": "Wide" }] },
+          { "id": "smear", "type": "enum", "role": "style", "label": "Smear", "description": "Scales the radial motion blur each camera move carries, from none to a heavy streak.", "default": "standard", "options": [{ "value": "off", "label": "Off" }, { "value": "subtle", "label": "Subtle" }, { "value": "standard", "label": "Standard" }, { "value": "heavy", "label": "Heavy" }] }
+        ]'
+      >
+        <style>
+          [data-composition-id="caption-camera-follow"] {
+            --cf-accent: #ffd84d;
+            --ink: #ffffff;
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            background: transparent;
+            pointer-events: none;
+          }
+          #cf-stage {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+          }
+          #cf-world {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 0;
+            height: 0;
+            --amt: 0px;
+          }
+          .cf-word {
+            position: absolute;
+            white-space: nowrap;
+            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+            font-weight: 700;
+            text-transform: uppercase;
+            letter-spacing: 0.005em;
+            line-height: 0.78;
+            color: var(--ink);
+            opacity: 0;
+            --k: 0;
+            filter: blur(calc(var(--k) * var(--amt)));
+          }
+          .cf-word.is-accent {
+            color: var(--cf-accent);
+          }
+          #cf-vignette {
+            position: absolute;
+            inset: 0;
+            background: radial-gradient(
+              ellipse at 50% 50%,
+              rgba(0, 0, 0, 0) 42%,
+              rgba(0, 0, 0, 0.55) 100%
+            );
+          }
+        </style>
+
+        <div id="cf-stage">
+          <div id="cf-world"></div>
+        </div>
+        <div id="cf-vignette"></div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            gsap.defaults({ immediateRender: false });
+
+            /* Cubic bezier solver. Newton first, bisection as the fallback, so it is
+               exact and deterministic for every input. */
+            function bezier(x1, y1, x2, y2) {
+              function curve(t, a1, a2) {
+                var A = 1 - 3 * a2 + 3 * a1;
+                var B = 3 * a2 - 6 * a1;
+                var C = 3 * a1;
+                return ((A * t + B) * t + C) * t;
+              }
+              function slope(t, a1, a2) {
+                var A = 1 - 3 * a2 + 3 * a1;
+                var B = 3 * a2 - 6 * a1;
+                var C = 3 * a1;
+                return (3 * A * t + 2 * B) * t + C;
+              }
+              return function (p) {
+                if (p <= 0) return 0;
+                if (p >= 1) return 1;
+                var t = p;
+                for (var i = 0; i < 8; i++) {
+                  var d = slope(t, x1, x2);
+                  if (Math.abs(d) < 1e-6) break;
+                  var e = curve(t, x1, x2) - p;
+                  if (Math.abs(e) < 1e-7) return curve(t, y1, y2);
+                  t -= e / d;
+                }
+                var lo = 0;
+                var hi = 1;
+                t = p;
+                for (var j = 0; j < 24; j++) {
+                  var x = curve(t, x1, x2);
+                  if (Math.abs(x - p) < 1e-7) break;
+                  if (x > p) hi = t;
+                  else lo = t;
+                  t = (lo + hi) / 2;
+                }
+                return curve(t, y1, y2);
+              };
+            }
+
+            /* Leaves the mark fast, spends most of its time arriving. */
+            var EASE_STEP = bezier(0.31, 0, 0.11, 1);
+            /* The closing pull back: slower to leave, glides a long way out. */
+            var EASE_WIDE = bezier(0.42, 0, 0.14, 1);
+            /* Word ink coming up. */
+            var EASE_INK = bezier(0.2, 0.7, 0.3, 1);
+            /* Blur rising into the move and wiped off out of it. */
+            var EASE_BLUR_UP = bezier(0.2, 0.8, 0.4, 1);
+            var EASE_BLUR_DOWN = bezier(0.5, 0, 0.2, 1);
+
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            /* Unrecognised overrides return to their declared defaults. */
+            function pick(table, value, fallback) {
+              return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+            }
+
+            var ACCENTS = {
+              gold: "#ffd84d",
+              green: "#34d399",
+              blue: "#38bdf8",
+              violet: "#a78bfa",
+            };
+            /* Framing scales the margin every camera pose is fitted with, so one
+               number moves the whole shot in or out without touching cadence. */
+            var FRAMINGS = { tight: 0.82, standard: 1, wide: 1.25 };
+            var SMEARS = { off: 0, subtle: 0.5, standard: 1, heavy: 1.9 };
+
+            var ACCENT = ACCENTS[pick(ACCENTS, vars.accent, "gold")];
+            var FRAMING = FRAMINGS[pick(FRAMINGS, vars.framing, "standard")];
+            var SMEAR = SMEARS[pick(SMEARS, vars.smear, "standard")];
+
+            var DUR = 9;
+            var STEP = 0.52;
+            var MOVE = 0.4;
+
+            var WORDS = [
+              { text: "write" },
+              { text: "the" },
+              { text: "html", accent: true },
+              { text: "and" },
+              { text: "the" },
+              { text: "video", accent: true },
+              { text: "renders" },
+              { text: "itself" },
+              { text: "no" },
+              { text: "timeline" },
+              { text: "no" },
+              { text: "keyframes", accent: true },
+              { text: "just" },
+              { text: "code", accent: true },
+            ];
+
+            var world = document.getElementById("cf-world");
+            var stage = document.getElementById("cf-stage");
+            /* The runtime strips the root id on clone, so reach the root through a
+               descendant instead of getElementById. */
+            var root = stage.parentElement;
+            var FRAME_W = root.clientWidth || 1080;
+            var FRAME_H = root.clientHeight || 1920;
+            root.style.setProperty("--cf-accent", ACCENT);
+
+            /* Base size is picked so the opening shot sits near 1:1. Everything after it
+               is a pull back, so the world is only ever scaled down and type stays crisp. */
+            var BASE = Math.max(FRAME_W, FRAME_H) * 0.16;
+            /* Each new word is this fraction of the current box height. */
+            var RATIO = 0.72;
+            var MARGIN = 1.36 * FRAMING;
+
+            var ruler = document.createElement("div");
+            ruler.style.cssText =
+              "position:absolute;left:-99999px;top:0;white-space:nowrap;visibility:hidden;" +
+              'font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;' +
+              "text-transform:uppercase;letter-spacing:0.005em;line-height:0.78";
+            world.appendChild(ruler);
+
+            var box = null;
+            WORDS.forEach(function (wd, i) {
+              var fs = i === 0 ? BASE : (box.y1 - box.y0) * RATIO;
+              ruler.style.fontSize = fs + "px";
+              ruler.textContent = wd.text;
+              var w = ruler.getBoundingClientRect().width;
+              var h = fs * 0.78;
+              var gap = fs * 0.07;
+
+              var x, y;
+              if (i === 0) {
+                x = 0;
+                y = 0;
+              } else if ((box.x1 - box.x0) / (box.y1 - box.y0) < FRAME_W / FRAME_H) {
+                /* block is narrower than the frame, so grow sideways: to the right of
+                   everything, sitting on the same baseline */
+                x = box.x1 + gap;
+                y = box.y1 - h;
+              } else {
+                /* block is already wide enough, so grow downward: onto a new line under
+                   everything, left edges aligned */
+                x = box.x0;
+                y = box.y1 + gap;
+              }
+
+              wd.fs = fs;
+              wd.x = x;
+              wd.y = y;
+
+              box = box
+                ? {
+                    x0: Math.min(box.x0, x),
+                    y0: Math.min(box.y0, y),
+                    x1: Math.max(box.x1, x + w),
+                    y1: Math.max(box.y1, y + h),
+                  }
+                : { x0: x, y0: y, x1: x + w, y1: y + h };
+              wd.box = { x0: box.x0, y0: box.y0, x1: box.x1, y1: box.y1 };
+            });
+            world.removeChild(ruler);
+
+            var FULL = box;
+
+            function poseFor(b, margin) {
+              var bw = (b.x1 - b.x0) * margin;
+              var bh = (b.y1 - b.y0) * margin;
+              var s = Math.min(FRAME_W / bw, FRAME_H / bh);
+              return {
+                x: FRAME_W / 2 - (s * (b.x0 + b.x1)) / 2,
+                y: FRAME_H / 2 - (s * (b.y0 + b.y1)) / 2,
+                scale: s,
+              };
+            }
+
+            var els = WORDS.map(function (wd) {
+              var el = document.createElement("div");
+              el.className = "cf-word" + (wd.accent ? " is-accent" : "");
+              el.textContent = wd.text;
+              el.style.left = wd.x + "px";
+              el.style.top = wd.y + "px";
+              el.style.fontSize = wd.fs + "px";
+              world.appendChild(el);
+              return el;
+            });
+
+            /* Re-derive every framing box from what the browser actually laid out, so
+               the camera is fitted to real ink and never to arithmetic that drifted. */
+            var run = null;
+            els.forEach(function (el, i) {
+              var r = {
+                x0: el.offsetLeft,
+                y0: el.offsetTop,
+                x1: el.offsetLeft + el.offsetWidth,
+                y1: el.offsetTop + el.offsetHeight,
+              };
+              run = run
+                ? {
+                    x0: Math.min(run.x0, r.x0),
+                    y0: Math.min(run.y0, r.y0),
+                    x1: Math.max(run.x1, r.x1),
+                    y1: Math.max(run.y1, r.y1),
+                  }
+                : r;
+              WORDS[i].box = { x0: run.x0, y0: run.y0, x1: run.x1, y1: run.y1 };
+            });
+            FULL = run;
+
+            /* Rest state is pinned outside the timeline. */
+            var first = poseFor(WORDS[0].box, MARGIN);
+            gsap.set(world, {
+              transformOrigin: "0 0",
+              x: first.x,
+              y: first.y,
+              scale: first.scale,
+            });
+            gsap.set(els, { opacity: 0, "--k": 0 });
+            gsap.set(world, { "--amt": "0px" });
+            /* The first word is already on the page when the shot opens, so frame zero
+               is never empty. */
+            gsap.set(els[0], { opacity: 1 });
+
+            var tl = gsap.timeline({ paused: true });
+            /* Peak smear at the rim of the frame, in screen pixels. */
+            var BLUR = FRAME_W * 0.026 * SMEAR;
+            var HALF_DIAG = Math.sqrt(FRAME_W * FRAME_W + FRAME_H * FRAME_H) / 2;
+
+            /* Radial blur, the way a real zoom smears: a point far from the centre of
+               the move sweeps across more of the frame than one sitting on it, so it
+               streaks more. Each word gets its own share, --k, of one shared amount,
+               --amt, which is the only thing that animates. The share is fixed for the
+               length of a move and set with the camera, so this stays one tween per
+               move rather than one per word per move. --amt is authored in world units,
+               because a filter on a scaled child is applied before the scale, so the
+               screen blur has to be divided back out by the camera scale. */
+            function smear(centre, scale, count, at, up, down, peak) {
+              for (var j = 0; j < count; j++) {
+                var el = els[j];
+                var cx = el.offsetLeft + el.offsetWidth / 2;
+                var cy = el.offsetTop + el.offsetHeight / 2;
+                var d =
+                  (scale *
+                    Math.sqrt(
+                      (cx - centre.x) * (cx - centre.x) + (cy - centre.y) * (cy - centre.y),
+                    )) /
+                  HALF_DIAG;
+                tl.set(el, { "--k": (0.2 + 1.15 * Math.min(1, d)).toFixed(3) }, at);
+              }
+              var amt = peak / scale;
+              tl.fromTo(
+                world,
+                { "--amt": "0px" },
+                { "--amt": amt + "px", duration: up, ease: EASE_BLUR_UP },
+                at,
+              );
+              tl.to(world, { "--amt": "0px", duration: down, ease: EASE_BLUR_DOWN }, at + up);
+            }
+
+            WORDS.forEach(function (wd, i) {
+              var t = i * STEP;
+              if (i === 0) return;
+
+              tl.fromTo(els[i], { opacity: 0 }, { opacity: 1, duration: 0.16, ease: EASE_INK }, t);
+
+              var p = poseFor(wd.box, MARGIN);
+              tl.to(world, { x: p.x, y: p.y, scale: p.scale, duration: MOVE, ease: EASE_STEP }, t);
+
+              smear(
+                { x: (wd.box.x0 + wd.box.x1) / 2, y: (wd.box.y0 + wd.box.y1) / 2 },
+                p.scale,
+                i + 1,
+                t,
+                MOVE * 0.24,
+                MOVE * 0.44,
+                BLUR,
+              );
+            });
+
+            /* The resolve: the same pull back, carried all the way out. */
+            var wide = poseFor(FULL, 1.2 * FRAMING);
+            var wideAt = (WORDS.length - 1) * STEP + 0.62;
+            tl.to(
+              world,
+              {
+                x: wide.x,
+                y: wide.y,
+                scale: wide.scale,
+                duration: 0.94,
+                ease: EASE_WIDE,
+              },
+              wideAt,
+            );
+            smear(
+              { x: (FULL.x0 + FULL.x1) / 2, y: (FULL.y0 + FULL.y1) / 2 },
+              wide.scale,
+              els.length,
+              wideAt,
+              0.3,
+              0.58,
+              BLUR * 0.8,
+            );
+
+            tl.set({}, {}, DUR);
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines["caption-camera-follow"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/caption-camera-follow/demo.html b/registry/components/caption-camera-follow/demo.html
new file mode 100644
index 0000000000..742e42c798
--- /dev/null
+++ b/registry/components/caption-camera-follow/demo.html
@@ -0,0 +1,384 @@
+<!doctype html>
+<!--
+  caption-camera-follow: the words do not move, the camera does.
+
+  One sentence. Layout is self similar: every new word is sized as a fraction of the
+  bounding box of everything written so far, and is dropped either to the right of that
+  box or onto a new line below it, alternating. Because each word is measured against a
+  box that keeps growing, the box grows geometrically, so the camera pulls back at a
+  steady exponential rate and every word arrives at roughly the same size on screen. Old
+  words stay lit and simply become small, piling up toward the top left the way
+  handwriting fills a page. The last beat carries the same pull back all the way out
+  until the whole sentence is readable at once.
+
+  Every ease is a cubic bezier written out by hand and solved in this file. No preset is
+  used anywhere. Motion blur is radial, the way it reads in real camera footage: each word
+  carries its own blur share, scaled by how far that word sits from the centre of the move,
+  so the frame smears outward from the point the camera is pushing toward. One shared
+  amount variable is tweened per move and every word multiplies it by its own distance
+  share, so the whole radial pulse costs one tween instead of fourteen.
+
+  Mount contract: everything lives inside <template>, styles and scripts included, and the
+  scripts sit INSIDE the composition root. A host clones template content into its own
+  mount and only runs scripts found inside the root; markup left outside is copied without
+  its behaviour, which renders a black card with no timeline at all.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Camera Follow Captions - Demo</title>
+  </head>
+  <body>
+    <template>
+      <div
+        id="root"
+        class="clip cf-root"
+        data-composition-id="caption-camera-follow"
+        data-duration="9"
+        data-fps="30"
+      >
+        <style>
+          .cf-root {
+            --accent: #ffd84d;
+            --ink: #ffffff;
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            background: #0b0b0d;
+            pointer-events: none;
+          }
+          #cf-stage {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+          }
+          #cf-world {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 0;
+            height: 0;
+            --amt: 0px;
+          }
+          .cf-word {
+            position: absolute;
+            white-space: nowrap;
+            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+            font-weight: 700;
+            text-transform: uppercase;
+            letter-spacing: 0.005em;
+            line-height: 0.78;
+            color: var(--ink);
+            opacity: 0;
+            --k: 0;
+            filter: blur(calc(var(--k) * var(--amt)));
+          }
+          .cf-word.is-accent {
+            color: var(--accent);
+          }
+          #cf-vignette {
+            position: absolute;
+            inset: 0;
+            background: radial-gradient(
+              ellipse at 50% 50%,
+              rgba(0, 0, 0, 0) 42%,
+              rgba(0, 0, 0, 0.55) 100%
+            );
+          }
+        </style>
+
+        <div id="cf-stage">
+          <div id="cf-world"></div>
+        </div>
+        <div id="cf-vignette"></div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            gsap.defaults({ immediateRender: false });
+
+            /* Cubic bezier solver. Newton first, bisection as the fallback, so it is
+               exact and deterministic for every input. */
+            function bezier(x1, y1, x2, y2) {
+              function curve(t, a1, a2) {
+                var A = 1 - 3 * a2 + 3 * a1;
+                var B = 3 * a2 - 6 * a1;
+                var C = 3 * a1;
+                return ((A * t + B) * t + C) * t;
+              }
+              function slope(t, a1, a2) {
+                var A = 1 - 3 * a2 + 3 * a1;
+                var B = 3 * a2 - 6 * a1;
+                var C = 3 * a1;
+                return (3 * A * t + 2 * B) * t + C;
+              }
+              return function (p) {
+                if (p <= 0) return 0;
+                if (p >= 1) return 1;
+                var t = p;
+                for (var i = 0; i < 8; i++) {
+                  var d = slope(t, x1, x2);
+                  if (Math.abs(d) < 1e-6) break;
+                  var e = curve(t, x1, x2) - p;
+                  if (Math.abs(e) < 1e-7) return curve(t, y1, y2);
+                  t -= e / d;
+                }
+                var lo = 0;
+                var hi = 1;
+                t = p;
+                for (var j = 0; j < 24; j++) {
+                  var x = curve(t, x1, x2);
+                  if (Math.abs(x - p) < 1e-7) break;
+                  if (x > p) hi = t;
+                  else lo = t;
+                  t = (lo + hi) / 2;
+                }
+                return curve(t, y1, y2);
+              };
+            }
+
+            /* Leaves the mark fast, spends most of its time arriving. */
+            var EASE_STEP = bezier(0.31, 0, 0.11, 1);
+            /* The closing pull back: slower to leave, glides a long way out. */
+            var EASE_WIDE = bezier(0.42, 0, 0.14, 1);
+            /* Word ink coming up. */
+            var EASE_INK = bezier(0.2, 0.7, 0.3, 1);
+            /* Blur rising into the move and wiped off out of it. */
+            var EASE_BLUR_UP = bezier(0.2, 0.8, 0.4, 1);
+            var EASE_BLUR_DOWN = bezier(0.5, 0, 0.2, 1);
+
+            var DUR = 9;
+            var STEP = 0.52;
+            var MOVE = 0.4;
+
+            var WORDS = [
+              { text: "write" },
+              { text: "the" },
+              { text: "html", accent: true },
+              { text: "and" },
+              { text: "the" },
+              { text: "video", accent: true },
+              { text: "renders" },
+              { text: "itself" },
+              { text: "no" },
+              { text: "timeline" },
+              { text: "no" },
+              { text: "keyframes", accent: true },
+              { text: "just" },
+              { text: "code", accent: true },
+            ];
+
+            var world = document.getElementById("cf-world");
+            var stage = document.getElementById("cf-stage");
+            /* The runtime strips the root id on clone, so reach the root through a
+               descendant instead of getElementById. */
+            var root = stage.parentElement;
+            var FRAME_W = root.clientWidth || 1080;
+            var FRAME_H = root.clientHeight || 1920;
+
+            /* Base size is picked so the opening shot sits near 1:1. Everything after it
+               is a pull back, so the world is only ever scaled down and type stays crisp. */
+            var BASE = Math.max(FRAME_W, FRAME_H) * 0.16;
+            /* Each new word is this fraction of the current box height. */
+            var RATIO = 0.72;
+            var MARGIN = 1.36;
+
+            var ruler = document.createElement("div");
+            ruler.style.cssText =
+              "position:absolute;left:-99999px;top:0;white-space:nowrap;visibility:hidden;" +
+              'font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;' +
+              "text-transform:uppercase;letter-spacing:0.005em;line-height:0.78";
+            world.appendChild(ruler);
+
+            var box = null;
+            WORDS.forEach(function (wd, i) {
+              var fs = i === 0 ? BASE : (box.y1 - box.y0) * RATIO;
+              ruler.style.fontSize = fs + "px";
+              ruler.textContent = wd.text;
+              var w = ruler.getBoundingClientRect().width;
+              var h = fs * 0.78;
+              var gap = fs * 0.07;
+
+              var x, y;
+              if (i === 0) {
+                x = 0;
+                y = 0;
+              } else if ((box.x1 - box.x0) / (box.y1 - box.y0) < FRAME_W / FRAME_H) {
+                /* block is narrower than the frame, so grow sideways: to the right of
+                   everything, sitting on the same baseline */
+                x = box.x1 + gap;
+                y = box.y1 - h;
+              } else {
+                /* block is already wide enough, so grow downward: onto a new line under
+                   everything, left edges aligned */
+                x = box.x0;
+                y = box.y1 + gap;
+              }
+
+              wd.fs = fs;
+              wd.x = x;
+              wd.y = y;
+
+              box = box
+                ? {
+                    x0: Math.min(box.x0, x),
+                    y0: Math.min(box.y0, y),
+                    x1: Math.max(box.x1, x + w),
+                    y1: Math.max(box.y1, y + h),
+                  }
+                : { x0: x, y0: y, x1: x + w, y1: y + h };
+              wd.box = { x0: box.x0, y0: box.y0, x1: box.x1, y1: box.y1 };
+            });
+            world.removeChild(ruler);
+
+            var FULL = box;
+
+            function poseFor(b, margin) {
+              var bw = (b.x1 - b.x0) * margin;
+              var bh = (b.y1 - b.y0) * margin;
+              var s = Math.min(FRAME_W / bw, FRAME_H / bh);
+              return {
+                x: FRAME_W / 2 - (s * (b.x0 + b.x1)) / 2,
+                y: FRAME_H / 2 - (s * (b.y0 + b.y1)) / 2,
+                scale: s,
+              };
+            }
+
+            var els = WORDS.map(function (wd) {
+              var el = document.createElement("div");
+              el.className = "cf-word" + (wd.accent ? " is-accent" : "");
+              el.textContent = wd.text;
+              el.style.left = wd.x + "px";
+              el.style.top = wd.y + "px";
+              el.style.fontSize = wd.fs + "px";
+              world.appendChild(el);
+              return el;
+            });
+
+            /* Re-derive every framing box from what the browser actually laid out, so
+               the camera is fitted to real ink and never to arithmetic that drifted. */
+            var run = null;
+            els.forEach(function (el, i) {
+              var r = {
+                x0: el.offsetLeft,
+                y0: el.offsetTop,
+                x1: el.offsetLeft + el.offsetWidth,
+                y1: el.offsetTop + el.offsetHeight,
+              };
+              run = run
+                ? {
+                    x0: Math.min(run.x0, r.x0),
+                    y0: Math.min(run.y0, r.y0),
+                    x1: Math.max(run.x1, r.x1),
+                    y1: Math.max(run.y1, r.y1),
+                  }
+                : r;
+              WORDS[i].box = { x0: run.x0, y0: run.y0, x1: run.x1, y1: run.y1 };
+            });
+            FULL = run;
+
+            /* Rest state is pinned outside the timeline. */
+            var first = poseFor(WORDS[0].box, MARGIN);
+            gsap.set(world, {
+              transformOrigin: "0 0",
+              x: first.x,
+              y: first.y,
+              scale: first.scale,
+            });
+            gsap.set(els, { opacity: 0, "--k": 0 });
+            gsap.set(world, { "--amt": "0px" });
+            /* The first word is already on the page when the shot opens, so frame zero
+               is never empty. */
+            gsap.set(els[0], { opacity: 1 });
+
+            var tl = gsap.timeline({ paused: true });
+            /* Peak smear at the rim of the frame, in screen pixels. */
+            var BLUR = FRAME_W * 0.026;
+            var HALF_DIAG = Math.sqrt(FRAME_W * FRAME_W + FRAME_H * FRAME_H) / 2;
+
+            /* Radial blur, the way a real zoom smears: a point far from the centre of
+               the move sweeps across more of the frame than one sitting on it, so it
+               streaks more. Each word gets its own share, --k, of one shared amount,
+               --amt, which is the only thing that animates. The share is fixed for the
+               length of a move and set with the camera, so this stays one tween per
+               move rather than one per word per move. --amt is authored in world units,
+               because a filter on a scaled child is applied before the scale, so the
+               screen blur has to be divided back out by the camera scale. */
+            function smear(centre, scale, count, at, up, down, peak) {
+              for (var j = 0; j < count; j++) {
+                var el = els[j];
+                var cx = el.offsetLeft + el.offsetWidth / 2;
+                var cy = el.offsetTop + el.offsetHeight / 2;
+                var d =
+                  (scale *
+                    Math.sqrt(
+                      (cx - centre.x) * (cx - centre.x) + (cy - centre.y) * (cy - centre.y),
+                    )) /
+                  HALF_DIAG;
+                tl.set(el, { "--k": (0.2 + 1.15 * Math.min(1, d)).toFixed(3) }, at);
+              }
+              var amt = peak / scale;
+              tl.fromTo(
+                world,
+                { "--amt": "0px" },
+                { "--amt": amt + "px", duration: up, ease: EASE_BLUR_UP },
+                at,
+              );
+              tl.to(world, { "--amt": "0px", duration: down, ease: EASE_BLUR_DOWN }, at + up);
+            }
+
+            WORDS.forEach(function (wd, i) {
+              var t = i * STEP;
+              if (i === 0) return;
+
+              tl.fromTo(els[i], { opacity: 0 }, { opacity: 1, duration: 0.16, ease: EASE_INK }, t);
+
+              var p = poseFor(wd.box, MARGIN);
+              tl.to(world, { x: p.x, y: p.y, scale: p.scale, duration: MOVE, ease: EASE_STEP }, t);
+
+              smear(
+                { x: (wd.box.x0 + wd.box.x1) / 2, y: (wd.box.y0 + wd.box.y1) / 2 },
+                p.scale,
+                i + 1,
+                t,
+                MOVE * 0.24,
+                MOVE * 0.44,
+                BLUR,
+              );
+            });
+
+            /* The resolve: the same pull back, carried all the way out. */
+            var wide = poseFor(FULL, 1.2);
+            var wideAt = (WORDS.length - 1) * STEP + 0.62;
+            tl.to(
+              world,
+              {
+                x: wide.x,
+                y: wide.y,
+                scale: wide.scale,
+                duration: 0.94,
+                ease: EASE_WIDE,
+              },
+              wideAt,
+            );
+            smear(
+              { x: (FULL.x0 + FULL.x1) / 2, y: (FULL.y0 + FULL.y1) / 2 },
+              wide.scale,
+              els.length,
+              wideAt,
+              0.3,
+              0.58,
+              BLUR * 0.8,
+            );
+
+            tl.set({}, {}, DUR);
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines["caption-camera-follow"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/caption-camera-follow/registry-item.json b/registry/components/caption-camera-follow/registry-item.json
new file mode 100644
index 0000000000..1231429320
--- /dev/null
+++ b/registry/components/caption-camera-follow/registry-item.json
@@ -0,0 +1,58 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "caption-camera-follow",
+  "type": "hyperframes:component",
+  "title": "Camera Follow Captions",
+  "description": "One sentence written across a world far larger than the frame. Each word is sized against everything already written, so the block grows geometrically and the camera pulls back at a steady rate to keep landing the new word at the same size. Old words stay lit and simply become small.",
+  "tags": ["captions", "caption-style", "camera", "typography", "motion-primitive", "portrait"],
+  "files": [
+    {
+      "path": "caption-camera-follow.html",
+      "target": "compositions/components/caption-camera-follow.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Colour of the highlighted words. gold is the original.",
+      "default": "gold",
+      "options": [
+        { "value": "gold", "label": "Gold" },
+        { "value": "green", "label": "Green" },
+        { "value": "blue", "label": "Blue" },
+        { "value": "violet", "label": "Violet" }
+      ]
+    },
+    {
+      "id": "framing",
+      "type": "enum",
+      "role": "style",
+      "label": "Framing",
+      "description": "Air the camera leaves around the written block, so the words land larger or smaller in frame.",
+      "default": "standard",
+      "options": [
+        { "value": "tight", "label": "Tight" },
+        { "value": "standard", "label": "Standard" },
+        { "value": "wide", "label": "Wide" }
+      ]
+    },
+    {
+      "id": "smear",
+      "type": "enum",
+      "role": "style",
+      "label": "Smear",
+      "description": "Scales the radial motion blur each camera move carries, from none to a heavy streak.",
+      "default": "standard",
+      "options": [
+        { "value": "off", "label": "Off" },
+        { "value": "subtle", "label": "Subtle" },
+        { "value": "standard", "label": "Standard" },
+        { "value": "heavy", "label": "Heavy" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/caption-editorial-emphasis/caption-editorial-emphasis.html b/registry/components/caption-editorial-emphasis/caption-editorial-emphasis.html
index 2622b09a80..50b41a1220 100644
--- a/registry/components/caption-editorial-emphasis/caption-editorial-emphasis.html
+++ b/registry/components/caption-editorial-emphasis/caption-editorial-emphasis.html
@@ -80,7 +80,7 @@
 
       .word {
         display: inline-block;
-        color: var(--hf-caption-primary, #f5f0d0);
+        color: #f5f0d0;
         text-shadow:
           0 2px 12px rgba(0, 0, 0, 0.6),
           0 4px 24px rgba(0, 0, 0, 0.35);
@@ -95,13 +95,20 @@
         font-style: normal;
       }
 
+      .word--italic {
+        font-family: "Inter", sans-serif;
+        font-size: 86px;
+        font-weight: 400;
+        font-style: italic;
+      }
+
       .word--emphasis {
         font-family: "Playfair Display", serif;
         font-size: 180px;
         font-weight: 800;
         font-style: italic;
         line-height: 0.9;
-        color: var(--hf-caption-primary, #f5f0d0);
+        color: #f5f0d0;
       }
     </style>
   </head>
@@ -122,507 +129,268 @@
     </div>
 
     <script>
-      // IIFE: keep every template's runtime private to itself so two caption
-      // components pasted into one composition document can't clobber each
-      // other's hfAttach/hfBuild via shared script-scope names (boot is async,
-      // so collisions surface AFTER all scripts have executed).
-      (function () {
-        var HF_COMPOSITION_ID = "caption-editorial-emphasis";
-        var HF_ROOT_ID = "editorial-emphasis";
-        var HF_GROUP_SELECTOR = ".caption-block";
-
-        var HF_DEMO_DATA = {
-          version: 1,
-          segments: [
-            {
-              start: 0,
-              text: "Every great video starts with a single frame. HyperFrames lets you write HTML and render professional video. No timeline. No drag and drop. Just code that becomes cinema.",
-              words: [
-                { text: "Every", start: 0.0, end: 0.3 },
-                { text: "great", start: 0.3, end: 0.55 },
-                { text: "video", start: 0.55, end: 0.85 },
-                { text: "starts", start: 0.85, end: 1.1 },
-                { text: "with", start: 1.1, end: 1.25 },
-                { text: "a", start: 1.25, end: 1.35 },
-                { text: "single", start: 1.35, end: 1.65 },
-                { text: "frame.", start: 1.65, end: 2.0 },
-                { text: "HyperFrames", start: 2.1, end: 2.65 },
-                { text: "lets", start: 2.65, end: 2.85 },
-                { text: "you", start: 2.85, end: 2.95 },
-                { text: "write", start: 2.95, end: 3.15 },
-                { text: "HTML", start: 3.15, end: 3.55 },
-                { text: "and", start: 3.55, end: 3.65 },
-                { text: "render", start: 3.65, end: 3.95 },
-                { text: "professional", start: 3.95, end: 4.45 },
-                { text: "video.", start: 4.45, end: 4.8 },
-                { text: "No", start: 4.9, end: 5.05 },
-                { text: "timeline.", start: 5.05, end: 5.45 },
-                { text: "No", start: 5.5, end: 5.65 },
-                { text: "drag", start: 5.65, end: 5.85 },
-                { text: "and", start: 5.85, end: 5.95 },
-                { text: "drop.", start: 5.95, end: 6.25 },
-                { text: "Just", start: 6.35, end: 6.55 },
-                { text: "code", start: 6.55, end: 6.8 },
-                { text: "that", start: 6.8, end: 6.95 },
-                { text: "becomes", start: 6.95, end: 7.3 },
-                { text: "cinema.", start: 7.3, end: 7.7 },
-              ],
-            },
-          ],
-        };
-
-        /* ── HyperFrames caption-data runtime (shared across caption templates) ── */
-        var HF_CONTRACT_VERSION = 1;
-        var HF_DEFAULT_RESOLUTION = { width: 1920, height: 1080 };
-
-        function hfFlattenSegments(segments) {
-          var out = [];
-          (segments || []).forEach(function (seg) {
-            ((seg && seg.words) || []).forEach(function (w) {
-              var start = Math.max(0, Number(w.start) || 0);
-              out.push({
-                text: String(w.word || w.text || "").trim(),
-                start: start,
-                end: Math.max(start, Number(w.end) || 0),
-              });
-            });
-          });
-          out.sort(function (a, b) {
-            return a.start - b.start;
-          });
-          return out.filter(function (w) {
-            return w.text.length > 0;
-          });
-        }
-
-        function hfDeriveDuration(words) {
-          var end = 0;
-          words.forEach(function (w) {
-            if (w.end > end) end = w.end;
-          });
-          return end;
-        }
-
-        function hfValidate(data) {
-          if (!data || typeof data !== "object") return { ok: false, reason: "not-an-object" };
-          if (data.version != null) {
-            // Number("v2") is NaN and NaN > x is always false — an explicit
-            // finite check keeps malformed versions from slipping past the gate.
-            var hfVersion = Number(data.version);
-            if (!Number.isFinite(hfVersion) || Math.floor(hfVersion) > HF_CONTRACT_VERSION) {
-              return { ok: false, reason: "unsupported-version" };
-            }
-          }
-          if (!Array.isArray(data.segments) || data.segments.length === 0) {
-            return { ok: false, reason: "no-segments" };
-          }
-          if (data.displayMode != null && data.displayMode !== "full") {
-            return { ok: false, reason: "unsupported-displayMode" };
-          }
-          var words = hfFlattenSegments(data.segments);
-          if (words.length === 0) return { ok: false, reason: "no-words" };
-          return { ok: true, words: words, durationS: hfDeriveDuration(words) };
-        }
-
-        function hfApplyStageConfig(data, durationS) {
-          var res = (data && data.resolution) || HF_DEFAULT_RESOLUTION;
-          // Mirror the published validator's <=8192 bound defensively — the
-          // validator is an optional pre-flight, and an unbounded stage size
-          // would OOM render workers.
-          var W = Math.min(
-            8192,
-            Math.max(1, Math.round(Number(res.width) || HF_DEFAULT_RESOLUTION.width)),
-          );
-          var H = Math.min(
-            8192,
-            Math.max(1, Math.round(Number(res.height) || HF_DEFAULT_RESOLUTION.height)),
-          );
-          var root = document.getElementById(HF_ROOT_ID);
-          [document.documentElement, document.body, root].forEach(function (el) {
-            el.style.width = W + "px";
-            el.style.height = H + "px";
-          });
-          root.setAttribute("data-width", String(W));
-          root.setAttribute("data-height", String(H));
-          root.setAttribute("data-duration", String(durationS));
-          var brand = (data && data.brand) || {};
-          if (typeof brand.primaryColor === "string" && brand.primaryColor) {
-            root.style.setProperty("--hf-caption-primary", brand.primaryColor);
-          } else {
-            root.style.removeProperty("--hf-caption-primary");
-          }
-          if (typeof brand.accentColor === "string" && brand.accentColor) {
-            root.style.setProperty("--hf-caption-accent", brand.accentColor);
-          } else {
-            root.style.removeProperty("--hf-caption-accent");
-          }
-          return {
-            W: W,
-            H: H,
-            scaleX: W / 1920,
-            scaleY: H / 1080,
-            fontScale: Math.min(W, H) / 1080,
-          };
+      var DURATION = 8;
+      var SAFE_WIDTH = 1800;
+      var ENTRY_DUR = 0.1;
+      var SLIDE_DUR = 0.2;
+
+      var _fitCanvas = document.createElement("canvas");
+      var _fitCtx = _fitCanvas.getContext("2d");
+      function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {
+        var size = baseFontSize;
+        var minSize = Math.floor(baseFontSize * 0.45);
+        while (size > minSize) {
+          _fitCtx.font = fontWeight + " " + size + "px " + fontFamily;
+          if (_fitCtx.measureText(text).width <= maxWidth) return size;
+          size -= 2;
         }
+        return minSize;
+      }
 
-        function hfPublishStatus(status) {
-          window.__HF_CAPTION_STATUS = status;
-          document
-            .getElementById(HF_ROOT_ID)
-            .setAttribute("data-caption-status", status.ok ? "ok" : "failed");
+      // Generic transcript words
+      var W = [
+        { text: "Every", start: 0.0, end: 0.3 },
+        { text: "great", start: 0.3, end: 0.55 },
+        { text: "video", start: 0.55, end: 0.85 },
+        { text: "starts", start: 0.85, end: 1.1 },
+        { text: "with", start: 1.1, end: 1.25 },
+        { text: "a", start: 1.25, end: 1.35 },
+        { text: "single", start: 1.35, end: 1.65 },
+        { text: "frame.", start: 1.65, end: 2.0 },
+        { text: "HyperFrames", start: 2.1, end: 2.65 },
+        { text: "lets", start: 2.65, end: 2.85 },
+        { text: "you", start: 2.85, end: 2.95 },
+        { text: "write", start: 2.95, end: 3.15 },
+        { text: "HTML", start: 3.15, end: 3.55 },
+        { text: "and", start: 3.55, end: 3.65 },
+        { text: "render", start: 3.65, end: 3.95 },
+        { text: "professional", start: 3.95, end: 4.45 },
+        { text: "video.", start: 4.45, end: 4.8 },
+        { text: "No", start: 4.9, end: 5.05 },
+        { text: "timeline.", start: 5.05, end: 5.45 },
+        { text: "No", start: 5.5, end: 5.65 },
+        { text: "drag", start: 5.65, end: 5.85 },
+        { text: "and", start: 5.85, end: 5.95 },
+        { text: "drop.", start: 5.95, end: 6.25 },
+        { text: "Just", start: 6.35, end: 6.55 },
+        { text: "code", start: 6.55, end: 6.8 },
+        { text: "that", start: 6.8, end: 6.95 },
+        { text: "becomes", start: 6.95, end: 7.3 },
+        { text: "cinema.", start: 7.3, end: 7.7 },
+      ];
+
+      // Block layout: [wordIndex, type] — n=normal, i=italic, e=emphasis(large)
+      // Emphasis words: HyperFrames(8), HTML(12), professional(15), code(24), cinema.(27)
+      var BLOCKS = [
+        {
+          line1: [
+            [0, "n"],
+            [1, "n"],
+            [2, "n"],
+          ],
+          line2: [
+            [3, "n"],
+            [4, "n"],
+          ],
+        },
+        {
+          line1: [
+            [5, "n"],
+            [6, "n"],
+          ],
+          line2: [[7, "e"]],
+        },
+        { line1: [[8, "e"]], line2: null },
+        {
+          line1: [
+            [9, "n"],
+            [10, "n"],
+            [11, "n"],
+          ],
+          line2: [[12, "e"]],
+        },
+        {
+          line1: [
+            [13, "n"],
+            [14, "n"],
+          ],
+          line2: [[15, "e"]],
+        },
+        {
+          line1: [
+            [16, "n"],
+            [17, "n"],
+          ],
+          line2: null,
+        },
+        {
+          line1: [[18, "n"]],
+          line2: [
+            [19, "n"],
+            [20, "n"],
+          ],
+        },
+        {
+          line1: [
+            [21, "n"],
+            [22, "n"],
+          ],
+          line2: null,
+        },
+        {
+          line1: [
+            [23, "i"],
+            [24, "e"],
+          ],
+          line2: null,
+        },
+        {
+          line1: [
+            [25, "n"],
+            [26, "n"],
+          ],
+          line2: [[27, "e"]],
+        },
+      ];
+
+      var CLASS_MAP = { n: "word word--normal", i: "word word--italic", e: "word word--emphasis" };
+
+      function computeLineSize(linePairs) {
+        var hasEmphasis = linePairs.some(function (p) {
+          return p[1] === "e";
+        });
+        if (hasEmphasis) {
+          var lineText = linePairs
+            .map(function (p) {
+              return W[p[0]].text;
+            })
+            .join(" ");
+          return fitFontSize(lineText, 180, "800", "Playfair Display", SAFE_WIDTH);
         }
+        var lineText = linePairs
+          .map(function (p) {
+            return W[p[0]].text;
+          })
+          .join(" ");
+        return fitFontSize(lineText, 86, "400", "Inter", SAFE_WIDTH);
+      }
 
-        function hfRunGate(words, durationS, failReason) {
-          if (failReason) {
-            hfPublishStatus({
-              ok: false,
-              present: false,
-              contained: false,
-              reason: failReason,
-              version: HF_CONTRACT_VERSION,
-              durationS: durationS || 0,
-            });
-            return;
-          }
-          var root = document.getElementById(HF_ROOT_ID);
-          var rootRect = root.getBoundingClientRect();
-          var groups = root.querySelectorAll(HF_GROUP_SELECTOR);
-          var present = false;
-          var contained = true;
-          var tokens = [];
-          words.forEach(function (w) {
-            var t = w.text.toLowerCase().replace(/[^a-z0-9]/g, "");
-            if (t) tokens.push(t);
-          });
-          groups.forEach(function (el) {
-            var prevOpacity = el.style.opacity;
-            var prevVisibility = el.style.visibility;
-            el.style.opacity = "1";
-            el.style.visibility = "visible";
-            var r = el.getBoundingClientRect();
-            if (r.width > 0 && r.height > 0) {
-              var text = (el.textContent || "").toLowerCase();
-              for (var i = 0; i < tokens.length; i++) {
-                if (text.indexOf(tokens[i]) !== -1) {
-                  present = true;
-                  break;
-                }
-              }
-              if (
-                r.left < rootRect.left - 1 ||
-                r.right > rootRect.right + 1 ||
-                r.top < rootRect.top - 1 ||
-                r.bottom > rootRect.bottom + 1
-              ) {
-                contained = false;
-              }
+      function buildBlocks() {
+        var stage = document.getElementById("caption-stage");
+        BLOCKS.forEach(function (block, bi) {
+          var el = document.createElement("div");
+          el.className = "caption-block";
+          el.id = "b" + bi;
+
+          var l1Size = computeLineSize(block.line1);
+          var l1 = document.createElement("div");
+          l1.className = "caption-line";
+          l1.id = "b" + bi + "L1";
+          block.line1.forEach(function (pair, wi) {
+            var span = document.createElement("span");
+            span.className = CLASS_MAP[pair[1]];
+            span.id = "b" + bi + "L1w" + wi;
+            span.textContent = W[pair[0]].text;
+            if (pair[1] === "e") {
+              span.style.fontSize = l1Size + "px";
+            } else {
+              span.style.fontSize = l1Size + "px";
             }
-            el.style.opacity = prevOpacity;
-            el.style.visibility = prevVisibility;
-          });
-          hfPublishStatus({
-            ok: present && contained,
-            present: present,
-            contained: contained,
-            version: HF_CONTRACT_VERSION,
-            durationS: durationS,
+            l1.appendChild(span);
           });
-        }
-
-        var HF_STOPWORDS = new Set([
-          "the",
-          "a",
-          "an",
-          "and",
-          "or",
-          "but",
-          "is",
-          "are",
-          "was",
-          "were",
-          "to",
-          "of",
-          "in",
-          "on",
-          "at",
-          "for",
-          "with",
-          "by",
-          "from",
-          "as",
-          "it",
-          "its",
-          "this",
-          "that",
-          "these",
-          "those",
-          "be",
-          "been",
-          "have",
-          "has",
-          "had",
-          "do",
-          "does",
-          "did",
-          "will",
-          "would",
-          "could",
-          "should",
-          "may",
-          "might",
-          "must",
-          "can",
-          "if",
-          "then",
-          "so",
-          "just",
-          "not",
-          "no",
-          "yes",
-          "up",
-          "out",
-          "about",
-          "into",
-          "over",
-          "after",
-          "before",
-          "your",
-          "you",
-          "our",
-          "we",
-          "they",
-          "them",
-          "their",
-          "there",
-          "here",
-          "when",
-          "what",
-          "which",
-          "who",
-          "how",
-          "all",
-          "any",
-          "some",
-          "more",
-          "most",
-          "other",
-          "than",
-          "too",
-          "very",
-          "also",
-          "because",
-        ]);
-
-        function hfIsEmphasisWord(text) {
-          var clean = String(text)
-            .toLowerCase()
-            .replace(/[^a-z]/g, "");
-          return clean.length >= 5 && !HF_STOPWORDS.has(clean);
-        }
-
-        var DURATION, SAFE_WIDTH;
-        var ENTRY_DUR = 0.1;
-        var SLIDE_DUR = 0.2;
-
-        var _fitCanvas = document.createElement("canvas");
-        var _fitCtx = _fitCanvas.getContext("2d");
-        function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {
-          var size = baseFontSize;
-          var minSize = Math.floor(baseFontSize * 0.45);
-          // minSize is a hard floor returned unverified below — self-heal
-          // accepts residual overflow at the floor (clipped by the stage)
-          // rather than shrinking below legibility.
-          while (size > minSize) {
-            _fitCtx.font = fontWeight + " " + size + "px " + fontFamily;
-            if (_fitCtx.measureText(text).width <= maxWidth) return size;
-            size -= 2;
-          }
-          return minSize;
-        }
-
-        var CLASS_MAP = { n: "word word--normal", e: "word word--emphasis" };
-
-        var W = [];
-        var BLOCKS = [];
-
-        var MAX_WORDS_PER_BLOCK = 5;
-        var PAUSE_THRESHOLD = 0.1;
-
-        function hfMakeBlocks(words) {
-          var blocks = [];
-          var current = [];
-          words.forEach(function (w, i) {
-            current.push(i);
-            var isEmph = hfIsEmphasisWord(w.text);
-            var punctuation = /[,.:!?]$/.test(w.text);
-            var next = words[i + 1];
-            var pause = next ? next.start - w.end : Infinity;
-            if (
-              isEmph ||
-              punctuation ||
-              pause >= PAUSE_THRESHOLD ||
-              current.length >= MAX_WORDS_PER_BLOCK ||
-              !next
-            ) {
-              if (isEmph && current.length > 1) {
-                blocks.push({
-                  line1: current.slice(0, -1).map(function (ix) {
-                    return [ix, "n"];
-                  }),
-                  line2: [[current[current.length - 1], "e"]],
-                });
-              } else if (isEmph) {
-                blocks.push({ line1: [[current[0], "e"]], line2: null });
-              } else if (current.length > 3) {
-                var split = Math.ceil(current.length / 2);
-                blocks.push({
-                  line1: current.slice(0, split).map(function (ix) {
-                    return [ix, "n"];
-                  }),
-                  line2: current.slice(split).map(function (ix) {
-                    return [ix, "n"];
-                  }),
-                });
+          el.appendChild(l1);
+
+          if (block.line2) {
+            var l2Size = computeLineSize(block.line2);
+            var l2 = document.createElement("div");
+            l2.className = "caption-line";
+            l2.id = "b" + bi + "L2";
+            block.line2.forEach(function (pair, wi) {
+              var span = document.createElement("span");
+              span.className = CLASS_MAP[pair[1]];
+              span.id = "b" + bi + "L2w" + wi;
+              span.textContent = W[pair[0]].text;
+              if (pair[1] === "e") {
+                span.style.fontSize = l2Size + "px";
               } else {
-                blocks.push({
-                  line1: current.map(function (ix) {
-                    return [ix, "n"];
-                  }),
-                  line2: null,
-                });
+                span.style.fontSize = l2Size + "px";
               }
-              current = [];
-            }
-          });
-          return blocks;
-        }
-
-        function hfTeardown() {
-          document.getElementById("caption-stage").innerHTML = "";
-        }
-
-        function hfBuild(words, layout, durationS) {
-          DURATION = durationS;
-          var stage = document.getElementById("caption-stage");
-          var fontNormal = Math.round(86 * layout.fontScale);
-          var fontEmphasis = Math.round(180 * layout.fontScale);
-          var marginX = Math.round(60 * layout.scaleX);
-          var blockH = Math.round(430 * layout.fontScale);
-          SAFE_WIDTH = layout.W - marginX * 2;
-          stage.style.left = marginX + "px";
-          stage.style.width = SAFE_WIDTH + "px";
-          stage.style.height = blockH + "px";
-          stage.style.top = Math.max(0, layout.H - blockH - Math.round(70 * layout.scaleY)) + "px";
-
-          W = words;
-          BLOCKS = hfMakeBlocks(words);
-
-          function computeLineSize(linePairs) {
-            var hasEmphasis = linePairs.some(function (p) {
-              return p[1] === "e";
+              l2.appendChild(span);
             });
-            var lineText = linePairs
-              .map(function (p) {
-                return W[p[0]].text;
-              })
-              .join(" ");
-            if (hasEmphasis) {
-              return fitFontSize(lineText, fontEmphasis, "800", "Playfair Display", SAFE_WIDTH);
-            }
-            return fitFontSize(lineText, fontNormal, "400", "Inter", SAFE_WIDTH);
+            el.appendChild(l2);
           }
 
-          function buildBlocks() {
-            BLOCKS.forEach(function (block, bi) {
-              var el = document.createElement("div");
-              el.className = "caption-block";
-              el.id = "b" + bi;
-
-              var l1Size = computeLineSize(block.line1);
-              var l1 = document.createElement("div");
-              l1.className = "caption-line";
-              l1.id = "b" + bi + "L1";
-              block.line1.forEach(function (pair, wi) {
-                var span = document.createElement("span");
-                span.className = CLASS_MAP[pair[1]];
-                span.id = "b" + bi + "L1w" + wi;
-                span.textContent = W[pair[0]].text;
-                span.style.fontSize = l1Size + "px";
-                l1.appendChild(span);
-              });
-              el.appendChild(l1);
-
-              if (block.line2) {
-                var l2Size = computeLineSize(block.line2);
-                var l2 = document.createElement("div");
-                l2.className = "caption-line";
-                l2.id = "b" + bi + "L2";
-                block.line2.forEach(function (pair, wi) {
-                  var span = document.createElement("span");
-                  span.className = CLASS_MAP[pair[1]];
-                  span.id = "b" + bi + "L2w" + wi;
-                  span.textContent = W[pair[0]].text;
-                  span.style.fontSize = l2Size + "px";
-                  l2.appendChild(span);
-                });
-                el.appendChild(l2);
-              }
-
-              stage.appendChild(el);
-            });
-          }
-
-          buildBlocks();
-
-          // Scale blocks that exceed safe width
-          function fitBlocks() {
-            BLOCKS.forEach(function (block, bi) {
-              var el = document.getElementById("b" + bi);
-              el.style.opacity = "1";
-              el.style.position = "relative";
-              var lines = el.querySelectorAll(".caption-line");
-              var maxW = 0;
-              lines.forEach(function (line) {
-                if (line.scrollWidth > maxW) maxW = line.scrollWidth;
-              });
-              if (maxW > SAFE_WIDTH) {
-                var s = SAFE_WIDTH / maxW;
-                el.style.transform = "scale(" + s + ")";
-              }
-              el.style.opacity = "0";
-              el.style.position = "";
-            });
-          }
-
-          fitBlocks();
-
-          var tl = gsap.timeline({ paused: true });
+          stage.appendChild(el);
+        });
+      }
 
-          var allEls = BLOCKS.map(function (_, i) {
-            return document.getElementById("b" + i);
+      buildBlocks();
+
+      // Scale blocks that exceed safe width
+      (function fitBlocks() {
+        BLOCKS.forEach(function (block, bi) {
+          var el = document.getElementById("b" + bi);
+          el.style.opacity = "1";
+          el.style.position = "relative";
+          var lines = el.querySelectorAll(".caption-line");
+          var maxW = 0;
+          lines.forEach(function (line) {
+            if (line.scrollWidth > maxW) maxW = line.scrollWidth;
           });
-
-          function blockStart(bi) {
-            return W[BLOCKS[bi].line1[0][0]].start;
+          if (maxW > SAFE_WIDTH) {
+            var s = SAFE_WIDTH / maxW;
+            el.style.transform = "scale(" + s + ")";
           }
+          el.style.opacity = "0";
+          el.style.position = "";
+        });
+      })();
+
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
 
-          BLOCKS.forEach(function (block, bi) {
-            var el = allEls[bi];
-            var start = blockStart(bi);
-            var nextStart = bi < BLOCKS.length - 1 ? blockStart(bi + 1) : DURATION;
+      var allEls = BLOCKS.map(function (_, i) {
+        return document.getElementById("b" + i);
+      });
 
-            // Each block already owns its full opacity lifecycle (set 1 at its
-            // own start, then set back to 0 at its own nextStart below), and
-            // blocks occupy non-overlapping windows, so explicitly hiding every
-            // OTHER block here was redundant and made timeline construction
-            // O(blocks^2) — this collapsed under dense stress transcripts (many
-            // single-word emphasis blocks). Removed; behavior is unchanged
-            // (verified against templates.test.ts).
+      function blockStart(bi) {
+        return W[BLOCKS[bi].line1[0][0]].start;
+      }
 
-            tl.set(el, { opacity: 1 }, start);
+      BLOCKS.forEach(function (block, bi) {
+        var el = allEls[bi];
+        var start = blockStart(bi);
+        var nextStart = bi < BLOCKS.length - 1 ? blockStart(bi + 1) : DURATION;
+
+        allEls.forEach(function (other, oi) {
+          if (oi !== bi) tl.set(other, { opacity: 0 }, start);
+        });
+        tl.set(el, { opacity: 1 }, start);
+
+        block.line1.forEach(function (pair, wi) {
+          var wordEl = document.getElementById("b" + bi + "L1w" + wi);
+          var wordStart = W[pair[0]].start;
+          tl.set(wordEl, { opacity: 0, scale: 1.12, transformOrigin: "0% 100%" }, start);
+          tl.to(
+            wordEl,
+            { opacity: 1, scale: 1, duration: ENTRY_DUR, ease: "power2.out" },
+            wordStart,
+          );
+        });
 
-            block.line1.forEach(function (pair, wi) {
-              var wordEl = document.getElementById("b" + bi + "L1w" + wi);
+        if (block.line2) {
+          var hasEmphasis = block.line2.some(function (p) {
+            return p[1] === "e";
+          });
+          var l2El = document.getElementById("b" + bi + "L2");
+          if (hasEmphasis) {
+            var l2Start = W[block.line2[0][0]].start;
+            tl.set(l2El, { opacity: 0, x: -1920 }, start);
+            tl.to(l2El, { opacity: 1, x: 0, duration: SLIDE_DUR, ease: "power2.out" }, l2Start);
+          } else {
+            tl.set(l2El, { opacity: 1 }, start);
+            block.line2.forEach(function (pair, wi) {
+              var wordEl = document.getElementById("b" + bi + "L2w" + wi);
               var wordStart = W[pair[0]].start;
               tl.set(wordEl, { opacity: 0, scale: 1.12, transformOrigin: "0% 100%" }, start);
               tl.to(
@@ -631,94 +399,14 @@
                 wordStart,
               );
             });
-
-            if (block.line2) {
-              var hasEmphasis = block.line2.some(function (p) {
-                return p[1] === "e";
-              });
-              var l2El = document.getElementById("b" + bi + "L2");
-              if (hasEmphasis) {
-                var l2Start = W[block.line2[0][0]].start;
-                tl.set(l2El, { opacity: 0, x: -layout.W }, start);
-                tl.to(l2El, { opacity: 1, x: 0, duration: SLIDE_DUR, ease: "power2.out" }, l2Start);
-              } else {
-                tl.set(l2El, { opacity: 1 }, start);
-                block.line2.forEach(function (pair, wi) {
-                  var wordEl = document.getElementById("b" + bi + "L2w" + wi);
-                  var wordStart = W[pair[0]].start;
-                  tl.set(wordEl, { opacity: 0, scale: 1.12, transformOrigin: "0% 100%" }, start);
-                  tl.to(
-                    wordEl,
-                    { opacity: 1, scale: 1, duration: ENTRY_DUR, ease: "power2.out" },
-                    wordStart,
-                  );
-                });
-              }
-            }
-
-            tl.set(el, { opacity: 0 }, nextStart);
-          });
-
-          tl.to({}, { duration: DURATION }, 0);
-          return tl;
+          }
         }
 
-        var hfCurrentTimeline = null;
+        tl.set(el, { opacity: 0 }, nextStart);
+      });
 
-        function hfAttach(data) {
-          var v = hfValidate(data);
-          if (!v.ok) {
-            hfRunGate([], 0, v.reason);
-            return;
-          }
-          if (hfCurrentTimeline) {
-            hfCurrentTimeline.kill();
-            hfCurrentTimeline = null;
-          }
-          hfTeardown();
-          var layout = hfApplyStageConfig(data, v.durationS);
-          var tl = hfBuild(v.words, layout, v.durationS);
-          tl.set({}, {}, v.durationS); // pin timeline length to the data-derived duration
-          // GSAP quirk (confirmed 3.14.2): a fresh timeline already reports position 0,
-          // so seek(0) is treated as a no-op and skips rendering .set() calls scheduled
-          // at t=0 — the first frame would show pre-timeline CSS defaults (usually
-          // hidden). render(time, suppressEvents, force) with force=true bypasses that.
-          tl.render(0, true, true);
-          hfCurrentTimeline = tl;
-          window.__timelines = window.__timelines || {};
-          window.__timelines[HF_COMPOSITION_ID] = tl;
-          hfRunGate(v.words, v.durationS, null);
-        }
-        window.__HF_CAPTION_ATTACH__ = hfAttach;
-
-        (function hfBoot() {
-          function start(data) {
-            var ready =
-              document.fonts && document.fonts.ready ? document.fonts.ready : Promise.resolve();
-            ready.then(function () {
-              // A manual window.__HF_CAPTION_ATTACH__ call that lands while the
-              // sibling fetch / fonts.ready are still pending must win — never
-              // clobber it with the late-arriving boot payload.
-              if (hfCurrentTimeline) return;
-              hfAttach(data);
-            });
-          }
-          if (window.__HF_CAPTION__) {
-            start(window.__HF_CAPTION__);
-            return;
-          }
-          fetch("./caption-data.json")
-            .then(function (r) {
-              return r.ok ? r.json() : null;
-            })
-            .catch(function () {
-              return null;
-            })
-            .then(function (json) {
-              start(json || HF_DEMO_DATA);
-            });
-        })();
-      })();
+      tl.to({}, { duration: DURATION }, 0);
+      window.__timelines["caption-editorial-emphasis"] = tl;
     </script>
   </body>
 </html>
diff --git a/registry/components/caption-emoji-pop/caption-emoji-pop.html b/registry/components/caption-emoji-pop/caption-emoji-pop.html
index 11d7c77f86..f8a863d2e8 100644
--- a/registry/components/caption-emoji-pop/caption-emoji-pop.html
+++ b/registry/components/caption-emoji-pop/caption-emoji-pop.html
@@ -125,705 +125,343 @@
     </div>
 
     <script>
-      // IIFE: keep every template's runtime private to itself so two caption
-      // components pasted into one composition document can't clobber each
-      // other's hfAttach/hfBuild via shared script-scope names (boot is async,
-      // so collisions surface AFTER all scripts have executed).
-      (function () {
-        var HF_COMPOSITION_ID = "caption-emoji-pop";
-        var HF_ROOT_ID = "emoji-pop";
-        var HF_GROUP_SELECTOR = ".caption-group";
-
-        var HF_DEMO_DATA = {
-          version: 1,
-          segments: [
-            {
-              start: 0,
-              text: "Every great video starts with a single frame. HyperFrames lets you write HTML and render professional video. No timeline. No drag and drop. Just code that becomes cinema.",
-              words: [
-                { text: "Every", start: 0.0, end: 0.3 },
-                { text: "great", start: 0.3, end: 0.55 },
-                { text: "video", start: 0.55, end: 0.85 },
-                { text: "starts", start: 0.85, end: 1.1 },
-                { text: "with", start: 1.1, end: 1.25 },
-                { text: "a", start: 1.25, end: 1.35 },
-                { text: "single", start: 1.35, end: 1.65 },
-                { text: "frame.", start: 1.65, end: 2.0 },
-                { text: "HyperFrames", start: 2.1, end: 2.65 },
-                { text: "lets", start: 2.65, end: 2.85 },
-                { text: "you", start: 2.85, end: 2.95 },
-                { text: "write", start: 2.95, end: 3.15 },
-                { text: "HTML", start: 3.15, end: 3.55 },
-                { text: "and", start: 3.55, end: 3.65 },
-                { text: "render", start: 3.65, end: 3.95 },
-                { text: "professional", start: 3.95, end: 4.45 },
-                { text: "video.", start: 4.45, end: 4.8 },
-                { text: "No", start: 4.9, end: 5.05 },
-                { text: "timeline.", start: 5.05, end: 5.45 },
-                { text: "No", start: 5.5, end: 5.65 },
-                { text: "drag", start: 5.65, end: 5.85 },
-                { text: "and", start: 5.85, end: 5.95 },
-                { text: "drop.", start: 5.95, end: 6.25 },
-                { text: "Just", start: 6.35, end: 6.55 },
-                { text: "code", start: 6.55, end: 6.8 },
-                { text: "that", start: 6.8, end: 6.95 },
-                { text: "becomes", start: 6.95, end: 7.3 },
-                { text: "cinema.", start: 7.3, end: 7.7 },
-              ],
-            },
-          ],
-        };
-
-        /* ── HyperFrames caption-data runtime (shared across caption templates) ── */
-        var HF_CONTRACT_VERSION = 1;
-        var HF_DEFAULT_RESOLUTION = { width: 1920, height: 1080 };
-
-        function hfFlattenSegments(segments) {
-          var out = [];
-          (segments || []).forEach(function (seg) {
-            ((seg && seg.words) || []).forEach(function (w) {
-              var start = Math.max(0, Number(w.start) || 0);
-              out.push({
-                text: String(w.word || w.text || "").trim(),
-                start: start,
-                end: Math.max(start, Number(w.end) || 0),
-              });
-            });
-          });
-          out.sort(function (a, b) {
-            return a.start - b.start;
+      var DURATION = 8;
+      var SAFE_ZONE_WIDTH = 1400;
+      var CAPTION_FONT_SIZE = 72;
+      var MAX_WORDS_PER_GROUP = 3;
+      var WORD_SPACING = 14;
+      var PAUSE_THRESHOLD = 0.1;
+      var ENTRY_FRAMES = 4;
+      var EXIT_FRAMES = 3;
+      var FPS = 30;
+      var ENTRY_DURATION = ENTRY_FRAMES / FPS;
+      var EXIT_DURATION = EXIT_FRAMES / FPS;
+      var FONT_WIDTH_SAFETY = 1.14;
+      var PRIMARY_COLOR = "#FFFFFF";
+      var ACCENT_COLORS = ["#FF76FF", "#FF0002", "#B2F7FF"];
+      var KEYWORDS = new Set(["hyperframes", "html", "professional", "code", "cinema"]);
+      var TRANSITION_WORDS = new Set([
+        "the",
+        "a",
+        "an",
+        "and",
+        "or",
+        "but",
+        "is",
+        "are",
+        "was",
+        "were",
+        "to",
+        "of",
+        "in",
+        "on",
+        "at",
+        "for",
+        "with",
+        "by",
+        "from",
+        "as",
+        "it",
+        "its",
+        "this",
+        "that",
+        "these",
+        "those",
+        "be",
+        "been",
+        "have",
+        "has",
+        "had",
+        "do",
+        "does",
+        "did",
+        "will",
+        "would",
+        "could",
+        "should",
+        "may",
+        "might",
+        "must",
+        "can",
+        "if",
+        "then",
+        "so",
+        "just",
+        "not",
+        "no",
+        "yes",
+        "up",
+        "out",
+        "about",
+      ]);
+
+      // Emoji map for key words
+      var WORD_EMOJI = {
+        hyperframes: "🎬",
+        html: "💻",
+        professional: "✨",
+        code: "⌨️",
+        cinema: "🎥",
+        video: "📹",
+        frame: "🖼️",
+      };
+
+      var TRANSCRIPT = [
+        { text: "Every", start: 0.0, end: 0.3 },
+        { text: "great", start: 0.3, end: 0.55 },
+        { text: "video", start: 0.55, end: 0.85 },
+        { text: "starts", start: 0.85, end: 1.1 },
+        { text: "with", start: 1.1, end: 1.25 },
+        { text: "a", start: 1.25, end: 1.35 },
+        { text: "single", start: 1.35, end: 1.65 },
+        { text: "frame.", start: 1.65, end: 2.0 },
+        { text: "HyperFrames", start: 2.1, end: 2.65 },
+        { text: "lets", start: 2.65, end: 2.85 },
+        { text: "you", start: 2.85, end: 2.95 },
+        { text: "write", start: 2.95, end: 3.15 },
+        { text: "HTML", start: 3.15, end: 3.55 },
+        { text: "and", start: 3.55, end: 3.65 },
+        { text: "render", start: 3.65, end: 3.95 },
+        { text: "professional", start: 3.95, end: 4.45 },
+        { text: "video.", start: 4.45, end: 4.8 },
+        { text: "No", start: 4.9, end: 5.05 },
+        { text: "timeline.", start: 5.05, end: 5.45 },
+        { text: "No", start: 5.5, end: 5.65 },
+        { text: "drag", start: 5.65, end: 5.85 },
+        { text: "and", start: 5.85, end: 5.95 },
+        { text: "drop.", start: 5.95, end: 6.25 },
+        { text: "Just", start: 6.35, end: 6.55 },
+        { text: "code", start: 6.55, end: 6.8 },
+        { text: "that", start: 6.8, end: 6.95 },
+        { text: "becomes", start: 6.95, end: 7.3 },
+        { text: "cinema.", start: 7.3, end: 7.7 },
+      ];
+
+      function normalizeWords(rawWords) {
+        return rawWords
+          .map(function (item) {
+            var text = String(item.word || item.text || "").trim();
+            var clean = text.toLowerCase().replace(/[^a-z]/g, "");
+            return {
+              text: text,
+              start: Math.max(0, Number(item.start) || 0),
+              end: Math.min(DURATION, Math.max(Number(item.start) || 0, Number(item.end) || 0)),
+              emoji: WORD_EMOJI[clean] || null,
+            };
+          })
+          .filter(function (word) {
+            return word.text.length > 0;
           });
-          return out.filter(function (w) {
-            return w.text.length > 0;
-          });
-        }
-
-        function hfDeriveDuration(words) {
-          var end = 0;
-          words.forEach(function (w) {
-            if (w.end > end) end = w.end;
-          });
-          return end;
-        }
+      }
 
-        function hfValidate(data) {
-          if (!data || typeof data !== "object") return { ok: false, reason: "not-an-object" };
-          if (data.version != null) {
-            // Number("v2") is NaN and NaN > x is always false — an explicit
-            // finite check keeps malformed versions from slipping past the gate.
-            var hfVersion = Number(data.version);
-            if (!Number.isFinite(hfVersion) || Math.floor(hfVersion) > HF_CONTRACT_VERSION) {
-              return { ok: false, reason: "unsupported-version" };
-            }
-          }
-          if (!Array.isArray(data.segments) || data.segments.length === 0) {
-            return { ok: false, reason: "no-segments" };
-          }
-          if (data.displayMode != null && data.displayMode !== "full") {
-            return { ok: false, reason: "unsupported-displayMode" };
-          }
-          var words = hfFlattenSegments(data.segments);
-          if (words.length === 0) return { ok: false, reason: "no-words" };
-          return { ok: true, words: words, durationS: hfDeriveDuration(words) };
-        }
+      function seededRandom(seed) {
+        var x = Math.sin(seed * 9999) * 10000;
+        return x - Math.floor(x);
+      }
 
-        function hfApplyStageConfig(data, durationS) {
-          var res = (data && data.resolution) || HF_DEFAULT_RESOLUTION;
-          // Mirror the published validator's <=8192 bound defensively — the
-          // validator is an optional pre-flight, and an unbounded stage size
-          // would OOM render workers.
-          var W = Math.min(
-            8192,
-            Math.max(1, Math.round(Number(res.width) || HF_DEFAULT_RESOLUTION.width)),
-          );
-          var H = Math.min(
-            8192,
-            Math.max(1, Math.round(Number(res.height) || HF_DEFAULT_RESOLUTION.height)),
-          );
-          var root = document.getElementById(HF_ROOT_ID);
-          [document.documentElement, document.body, root].forEach(function (el) {
-            el.style.width = W + "px";
-            el.style.height = H + "px";
-          });
-          root.setAttribute("data-width", String(W));
-          root.setAttribute("data-height", String(H));
-          root.setAttribute("data-duration", String(durationS));
-          var brand = (data && data.brand) || {};
-          if (typeof brand.primaryColor === "string" && brand.primaryColor) {
-            root.style.setProperty("--hf-caption-primary", brand.primaryColor);
-          } else {
-            root.style.removeProperty("--hf-caption-primary");
-          }
-          if (typeof brand.accentColor === "string" && brand.accentColor) {
-            root.style.setProperty("--hf-caption-accent", brand.accentColor);
-          } else {
-            root.style.removeProperty("--hf-caption-accent");
+      function assignWordColors(words, groupIndex) {
+        return words.map(function (word, index) {
+          var clean = word.text.toLowerCase().replace(/[^a-z]/g, "");
+          if (KEYWORDS.has(clean)) {
+            var ci = Math.floor(seededRandom(groupIndex * 23 + index * 31) * ACCENT_COLORS.length);
+            return ACCENT_COLORS[ci];
           }
-          return {
-            W: W,
-            H: H,
-            scaleX: W / 1920,
-            scaleY: H / 1080,
-            fontScale: Math.min(W, H) / 1080,
-          };
-        }
-
-        function hfPublishStatus(status) {
-          window.__HF_CAPTION_STATUS = status;
-          document
-            .getElementById(HF_ROOT_ID)
-            .setAttribute("data-caption-status", status.ok ? "ok" : "failed");
-        }
-
-        function hfRunGate(words, durationS, failReason) {
-          if (failReason) {
-            hfPublishStatus({
-              ok: false,
-              present: false,
-              contained: false,
-              reason: failReason,
-              version: HF_CONTRACT_VERSION,
-              durationS: durationS || 0,
-            });
-            return;
+          if (TRANSITION_WORDS.has(clean)) return PRIMARY_COLOR;
+          var rand = seededRandom(groupIndex * 13 + index);
+          if (rand > 0.55) {
+            var ci2 = Math.floor(rand * ACCENT_COLORS.length) % ACCENT_COLORS.length;
+            return ACCENT_COLORS[ci2];
           }
-          var root = document.getElementById(HF_ROOT_ID);
-          var rootRect = root.getBoundingClientRect();
-          var groups = root.querySelectorAll(HF_GROUP_SELECTOR);
-          var present = false;
-          var contained = true;
-          var tokens = [];
-          words.forEach(function (w) {
-            var t = w.text.toLowerCase().replace(/[^a-z0-9]/g, "");
-            if (t) tokens.push(t);
-          });
-          groups.forEach(function (el) {
-            var prevOpacity = el.style.opacity;
-            var prevVisibility = el.style.visibility;
-            el.style.opacity = "1";
-            el.style.visibility = "visible";
-            var r = el.getBoundingClientRect();
-            if (r.width > 0 && r.height > 0) {
-              var text = (el.textContent || "").toLowerCase();
-              for (var i = 0; i < tokens.length; i++) {
-                if (text.indexOf(tokens[i]) !== -1) {
-                  present = true;
-                  break;
-                }
-              }
-              if (
-                r.left < rootRect.left - 1 ||
-                r.right > rootRect.right + 1 ||
-                r.top < rootRect.top - 1 ||
-                r.bottom > rootRect.bottom + 1
-              ) {
-                contained = false;
-              }
-            }
-            el.style.opacity = prevOpacity;
-            el.style.visibility = prevVisibility;
-          });
-          hfPublishStatus({
-            ok: present && contained,
-            present: present,
-            contained: contained,
-            version: HF_CONTRACT_VERSION,
-            durationS: durationS,
-          });
-        }
+          return PRIMARY_COLOR;
+        });
+      }
 
-        var HF_STOPWORDS = new Set([
-          "the",
-          "a",
-          "an",
-          "and",
-          "or",
-          "but",
-          "is",
-          "are",
-          "was",
-          "were",
-          "to",
-          "of",
-          "in",
-          "on",
-          "at",
-          "for",
-          "with",
-          "by",
-          "from",
-          "as",
-          "it",
-          "its",
-          "this",
-          "that",
-          "these",
-          "those",
-          "be",
-          "been",
-          "have",
-          "has",
-          "had",
-          "do",
-          "does",
-          "did",
-          "will",
-          "would",
-          "could",
-          "should",
-          "may",
-          "might",
-          "must",
-          "can",
-          "if",
-          "then",
-          "so",
-          "just",
-          "not",
-          "no",
-          "yes",
-          "up",
-          "out",
-          "about",
-          "into",
-          "over",
-          "after",
-          "before",
-          "your",
-          "you",
-          "our",
-          "we",
-          "they",
-          "them",
-          "their",
-          "there",
-          "here",
-          "when",
-          "what",
-          "which",
-          "who",
-          "how",
-          "all",
-          "any",
-          "some",
-          "more",
-          "most",
-          "other",
-          "than",
-          "too",
-          "very",
-          "also",
-          "because",
-        ]);
-
-        function hfIsEmphasisWord(text) {
-          var clean = String(text)
-            .toLowerCase()
-            .replace(/[^a-z]/g, "");
-          return clean.length >= 5 && !HF_STOPWORDS.has(clean);
+      var _fitCanvas = document.createElement("canvas");
+      var _fitCtx = _fitCanvas.getContext("2d");
+      function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {
+        var size = baseFontSize;
+        var minSize = Math.floor(baseFontSize * 0.45);
+        while (size > minSize) {
+          _fitCtx.font = fontWeight + " " + size + "px " + fontFamily;
+          if (_fitCtx.measureText(text).width <= maxWidth) return size;
+          size -= 2;
         }
+        return minSize;
+      }
 
-        var DURATION, SAFE_ZONE_WIDTH, CAPTION_FONT_SIZE, WORD_SPACING;
-        var MAX_WORDS_PER_GROUP = 3;
-        var PAUSE_THRESHOLD = 0.1;
-        var ENTRY_FRAMES = 4;
-        var EXIT_FRAMES = 3;
-        var FPS = 30;
-        var ENTRY_DURATION = ENTRY_FRAMES / FPS;
-        var EXIT_DURATION = EXIT_FRAMES / FPS;
-        var FONT_WIDTH_SAFETY = 1.14;
-        var PRIMARY_COLOR = "#FFFFFF";
-        var ACCENT_COLORS = ["#FF76FF", "#FF0002", "#B2F7FF"];
-        var hfPrimaryColor = PRIMARY_COLOR;
-        var hfAccentColors = ACCENT_COLORS;
-        var hfFontScale = 1;
-
-        // Emoji map for a generic keyword lexicon (not tied to the demo transcript)
-        var WORD_EMOJI = {
-          amazing: "🤩",
-          awesome: "🔥",
-          big: "🐘",
-          brain: "🧠",
-          build: "🛠️",
-          built: "🛠️",
-          celebrate: "🎉",
-          change: "🔄",
-          cinema: "🎥",
-          code: "⌨️",
-          customers: "🤝",
-          data: "📊",
-          dream: "💭",
-          easy: "👌",
-          fast: "⚡",
-          fire: "🔥",
-          frame: "🖼️",
-          free: "🎁",
-          fun: "🎈",
-          future: "🔮",
-          global: "🌍",
-          grow: "📈",
-          growth: "📈",
-          heart: "❤️",
-          huge: "🐘",
-          idea: "💡",
-          launch: "🚀",
-          learn: "📚",
-          love: "❤️",
-          magic: "✨",
-          money: "💰",
-          music: "🎵",
-          new: "✨",
-          party: "🎉",
-          perfect: "💯",
-          power: "💪",
-          professional: "✨",
-          rocket: "🚀",
-          save: "🛟",
-          saves: "🛟",
-          secret: "🤫",
-          smart: "🧠",
-          star: "⭐",
-          stop: "✋",
-          strong: "💪",
-          success: "🏆",
-          team: "👥",
-          time: "⏰",
-          today: "📅",
-          video: "📹",
-          win: "🏆",
-          world: "🌍",
-          wow: "😮",
-        };
+      var measureCanvas = document.createElement("canvas");
+      var measureContext = measureCanvas.getContext("2d");
 
-        function normalizeWords(rawWords) {
-          return rawWords
-            .map(function (item) {
-              var text = String(item.word || item.text || "").trim();
-              var clean = text.toLowerCase().replace(/[^a-z]/g, "");
-              return {
-                text: text,
-                start: Math.max(0, Number(item.start) || 0),
-                end: Math.min(DURATION, Math.max(Number(item.start) || 0, Number(item.end) || 0)),
-                emoji: WORD_EMOJI[clean] || null,
-              };
-            })
-            .filter(function (word) {
-              return word.text.length > 0;
-            });
-        }
+      function measureWord(word, fontSize) {
+        measureContext.font = "900 " + fontSize + "px Gabarito";
+        return measureContext.measureText(word.text.toUpperCase()).width * FONT_WIDTH_SAFETY;
+      }
 
-        function seededRandom(seed) {
-          var x = Math.sin(seed * 9999) * 10000;
-          return x - Math.floor(x);
-        }
+      function measureLineWidth(words, fontSize) {
+        return words.reduce(function (total, word, index) {
+          return total + measureWord(word, fontSize) + (index ? WORD_SPACING : 0);
+        }, 0);
+      }
 
-        function assignWordColors(words, groupIndex) {
-          return words.map(function (word, index) {
-            var clean = word.text.toLowerCase().replace(/[^a-z]/g, "");
-            if (hfIsEmphasisWord(word.text)) {
-              var ci = Math.floor(
-                seededRandom(groupIndex * 23 + index * 31) * hfAccentColors.length,
-              );
-              return hfAccentColors[ci];
-            }
-            if (HF_STOPWORDS.has(clean)) return hfPrimaryColor;
-            var rand = seededRandom(groupIndex * 13 + index);
-            if (rand > 0.55) {
-              var ci2 = Math.floor(rand * hfAccentColors.length) % hfAccentColors.length;
-              return hfAccentColors[ci2];
-            }
-            return hfPrimaryColor;
-          });
-        }
+      function fitsLine(words) {
+        return measureLineWidth(words, CAPTION_FONT_SIZE) <= SAFE_ZONE_WIDTH;
+      }
 
-        var _fitCanvas = document.createElement("canvas");
-        var _fitCtx = _fitCanvas.getContext("2d");
-        function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {
-          var size = baseFontSize;
-          var minSize = Math.floor(baseFontSize * 0.45);
-          // minSize is a hard floor returned unverified below — self-heal
-          // accepts residual overflow at the floor (clipped by the stage)
-          // rather than shrinking below legibility.
-          while (size > minSize) {
-            _fitCtx.font = fontWeight + " " + size + "px " + fontFamily;
-            if (_fitCtx.measureText(text).width <= maxWidth) return size;
-            size -= 2;
+      function makeGroups(words) {
+        var groups = [];
+        var current = [];
+        words.forEach(function (word, index) {
+          var nextWord = words[index + 1];
+          var testGroup = current.concat([word]);
+          if (testGroup.length > MAX_WORDS_PER_GROUP || !fitsLine(testGroup)) {
+            if (current.length) groups.push(makeGroup(current, groups.length));
+            current = [word];
+            return;
           }
-          return minSize;
-        }
-
-        var measureCanvas = document.createElement("canvas");
-        var measureContext = measureCanvas.getContext("2d");
-
-        function measureWord(word, fontSize) {
-          measureContext.font = "900 " + fontSize + "px Gabarito";
-          return measureContext.measureText(word.text.toUpperCase()).width * FONT_WIDTH_SAFETY;
-        }
-
-        function measureLineWidth(words, fontSize) {
-          return words.reduce(function (total, word, index) {
-            return total + measureWord(word, fontSize) + (index ? WORD_SPACING : 0);
-          }, 0);
-        }
-
-        function fitsLine(words) {
-          return measureLineWidth(words, CAPTION_FONT_SIZE) <= SAFE_ZONE_WIDTH;
-        }
-
-        function makeGroups(words) {
-          var groups = [];
-          var current = [];
-          words.forEach(function (word, index) {
-            var nextWord = words[index + 1];
-            var testGroup = current.concat([word]);
-            if (testGroup.length > MAX_WORDS_PER_GROUP || !fitsLine(testGroup)) {
-              if (current.length) groups.push(makeGroup(current, groups.length));
-              current = [word];
-              return;
-            }
-            current.push(word);
-            var punctuation = /[,.:!?]$/.test(word.text);
-            var pause = nextWord ? nextWord.start - word.end : 0;
-            if (
-              !nextWord ||
-              punctuation ||
-              pause >= PAUSE_THRESHOLD ||
-              current.length >= MAX_WORDS_PER_GROUP
-            ) {
-              groups.push(makeGroup(current, groups.length));
-              current = [];
-            }
-          });
-          if (current.length) groups.push(makeGroup(current, groups.length));
-          return groups;
-        }
-
-        function makeGroup(words, groupIndex) {
-          var colors = assignWordColors(words, groupIndex);
-          var emoji = null;
-          for (var i = 0; i < words.length; i++) {
-            if (words[i].emoji) {
-              emoji = words[i].emoji;
-              break;
-            }
+          current.push(word);
+          var punctuation = /[,.:!?]$/.test(word.text);
+          var pause = nextWord ? nextWord.start - word.end : 0;
+          if (
+            !nextWord ||
+            punctuation ||
+            pause >= PAUSE_THRESHOLD ||
+            current.length >= MAX_WORDS_PER_GROUP
+          ) {
+            groups.push(makeGroup(current, groups.length));
+            current = [];
           }
-          return {
-            words: words.slice(),
-            colors: colors,
-            emoji: emoji,
-            start: words[0].start,
-            end: words[words.length - 1].end,
-          };
-        }
-
-        function shadowForColor(color) {
-          // color-mix handles ANY CSS color (hex of either length, rgb()/hsl(),
-          // named colors) — the old hex-pair slicing was why brand colors were
-          // gated behind a strict 6-digit regex, silently dropping payloads the
-          // sibling templates accept.
-          return (
-            "0 4px 8px rgba(0,0,0,0.7), 0 0 2px " +
-            color +
-            ", 0 0 8px color-mix(in srgb, " +
-            color +
-            " 60%, transparent)"
-          );
-        }
-
-        function buildCaptions(groups) {
-          var stage = document.getElementById("caption-stage");
-          groups.forEach(function (group, groupIndex) {
-            var groupText = group.words
-              .map(function (w) {
-                return w.text.toUpperCase();
-              })
-              .join(" ");
-            var computedSize = fitFontSize(
-              groupText,
-              CAPTION_FONT_SIZE,
-              "900",
-              "Gabarito",
-              SAFE_ZONE_WIDTH,
-            );
-            var groupEl = document.createElement("div");
-            groupEl.id = "caption-group-" + groupIndex;
-            groupEl.className = "caption-group";
-
-            if (group.emoji) {
-              var emojiEl = document.createElement("div");
-              emojiEl.className = "caption-emoji";
-              emojiEl.textContent = group.emoji;
-              emojiEl.style.fontSize = Math.round(56 * hfFontScale) + "px";
-              groupEl.appendChild(emojiEl);
-            }
-
-            var lineEl = document.createElement("div");
-            lineEl.className = "caption-line";
-            group.words.forEach(function (word, wordIndex) {
-              var color = group.colors[wordIndex] || hfPrimaryColor;
-              var wordEl = document.createElement("span");
-              wordEl.className = "caption-word";
-              wordEl.textContent = word.text.toUpperCase();
-              wordEl.style.color = color;
-              wordEl.style.fontSize = computedSize + "px";
-              wordEl.style.textShadow = shadowForColor(color);
-              lineEl.appendChild(wordEl);
-            });
-
-            groupEl.appendChild(lineEl);
-            stage.appendChild(groupEl);
-          });
-        }
+        });
+        if (current.length) groups.push(makeGroup(current, groups.length));
+        return groups;
+      }
 
-        function hfTeardown() {
-          document.getElementById("caption-stage").innerHTML = "";
+      function makeGroup(words, groupIndex) {
+        var colors = assignWordColors(words, groupIndex);
+        var emoji = null;
+        for (var i = 0; i < words.length; i++) {
+          if (words[i].emoji) {
+            emoji = words[i].emoji;
+            break;
+          }
         }
+        return {
+          words: words.slice(),
+          colors: colors,
+          emoji: emoji,
+          start: words[0].start,
+          end: words[words.length - 1].end,
+        };
+      }
 
-        function hfBuild(words, layout, durationS) {
-          DURATION = durationS;
-          CAPTION_FONT_SIZE = Math.round(72 * layout.fontScale);
-          SAFE_ZONE_WIDTH = Math.round(1400 * layout.scaleX);
-          WORD_SPACING = Math.round(14 * layout.fontScale);
-          hfFontScale = layout.fontScale;
-
-          var stage = document.getElementById("caption-stage");
-          var stageHeight = Math.round(280 * layout.fontScale);
-          stage.style.width = SAFE_ZONE_WIDTH + "px";
-          stage.style.height = stageHeight + "px";
-          stage.style.bottom = Math.round(80 * layout.scaleY) + "px";
-
-          var rootEl = document.getElementById(HF_ROOT_ID);
-          // Any non-empty CSS color is honored (mirrors caption-pill-karaoke) —
-          // shadowForColor no longer needs parseable hex, so the old 6-digit
-          // gate (which silently dropped #fff / rgb() / named colors that the
-          // sibling templates accept) is gone.
-          var primary = getComputedStyle(rootEl).getPropertyValue("--hf-caption-primary").trim();
-          var accent = getComputedStyle(rootEl).getPropertyValue("--hf-caption-accent").trim();
-          hfPrimaryColor = primary || "#FFFFFF";
-          hfAccentColors = accent ? [accent] : ["#FF76FF", "#FF0002", "#B2F7FF"];
-
-          var WORDS = normalizeWords(words);
-          var GROUPS = makeGroups(WORDS);
-          buildCaptions(GROUPS);
-          GROUPS.forEach(function (_, i) {
-            var el = document.getElementById("caption-group-" + i);
-            el.style.width = SAFE_ZONE_WIDTH + "px";
-            el.style.height = stageHeight + "px";
-          });
-
-          var tl = gsap.timeline({ paused: true });
-
-          var visibleStarts = GROUPS.map(function (group, groupIndex) {
-            var prev = GROUPS[groupIndex - 1];
-            var availableGap = prev ? Math.max(0, group.start - prev.end) : ENTRY_DURATION;
-            var entryLead = Math.min(ENTRY_DURATION, availableGap);
-            return Math.max(0, group.start - entryLead);
-          });
+      function shadowForColor(color) {
+        var hex = color.replace("#", "");
+        var r = parseInt(hex.slice(0, 2), 16);
+        var g = parseInt(hex.slice(2, 4), 16);
+        var b = parseInt(hex.slice(4, 6), 16);
+        return (
+          "0 4px 8px rgba(0,0,0,0.7), 0 0 2px rgba(" +
+          r +
+          "," +
+          g +
+          "," +
+          b +
+          ",1), 0 0 8px rgba(" +
+          r +
+          "," +
+          g +
+          "," +
+          b +
+          ",0.6)"
+        );
+      }
 
-          var allGroupEls = GROUPS.map(function (_, i) {
-            return document.getElementById("caption-group-" + i);
-          });
+      function buildCaptions(groups) {
+        var stage = document.getElementById("caption-stage");
+        groups.forEach(function (group, groupIndex) {
+          var groupText = group.words
+            .map(function (w) {
+              return w.text.toUpperCase();
+            })
+            .join(" ");
+          var computedSize = fitFontSize(
+            groupText,
+            CAPTION_FONT_SIZE,
+            "900",
+            "Gabarito",
+            SAFE_ZONE_WIDTH,
+          );
+          var groupEl = document.createElement("div");
+          groupEl.id = "caption-group-" + groupIndex;
+          groupEl.className = "caption-group";
+
+          if (group.emoji) {
+            var emojiEl = document.createElement("div");
+            emojiEl.className = "caption-emoji";
+            emojiEl.textContent = group.emoji;
+            groupEl.appendChild(emojiEl);
+          }
 
-          GROUPS.forEach(function (group, groupIndex) {
-            var groupEl = allGroupEls[groupIndex];
-            var visibleStart = visibleStarts[groupIndex];
-            var visibleEnd =
-              groupIndex < GROUPS.length - 1 ? visibleStarts[groupIndex + 1] : DURATION;
-            var exitStart = Math.max(visibleStart, visibleEnd - EXIT_DURATION);
-
-            // Each group already owns its full opacity lifecycle (set 0 at its
-            // own visibleStart, animated to 1, then set back to 0 at its own
-            // visibleEnd below), and groups occupy non-overlapping windows, so
-            // explicitly hiding every OTHER group here was redundant and made
-            // timeline construction O(groups^2) — this collapsed under dense
-            // stress transcripts (many short groups). Removed; behavior is
-            // unchanged (verified against templates.test.ts).
-
-            tl.set(groupEl, { opacity: 0, scaleX: 0.8, scaleY: 1 }, visibleStart);
-            tl.to(
-              groupEl,
-              {
-                opacity: 1,
-                scaleX: 1,
-                duration: ENTRY_DURATION,
-                ease: "power3.out",
-                force3D: true,
-              },
-              visibleStart,
-            );
-            tl.to(
-              groupEl,
-              {
-                scaleX: 0.75,
-                opacity: 0.8,
-                duration: EXIT_DURATION,
-                ease: "power2.in",
-                force3D: true,
-              },
-              exitStart,
-            );
-            tl.set(groupEl, { opacity: 0 }, visibleEnd);
+          var lineEl = document.createElement("div");
+          lineEl.className = "caption-line";
+          group.words.forEach(function (word, wordIndex) {
+            var color = group.colors[wordIndex] || PRIMARY_COLOR;
+            var wordEl = document.createElement("span");
+            wordEl.className = "caption-word";
+            wordEl.textContent = word.text.toUpperCase();
+            wordEl.style.color = color;
+            wordEl.style.fontSize = computedSize + "px";
+            wordEl.style.textShadow = shadowForColor(color);
+            lineEl.appendChild(wordEl);
           });
 
-          return tl;
-        }
-
-        var hfCurrentTimeline = null;
+          groupEl.appendChild(lineEl);
+          stage.appendChild(groupEl);
+        });
+      }
 
-        function hfAttach(data) {
-          var v = hfValidate(data);
-          if (!v.ok) {
-            hfRunGate([], 0, v.reason);
-            return;
-          }
-          if (hfCurrentTimeline) {
-            hfCurrentTimeline.kill();
-            hfCurrentTimeline = null;
-          }
-          hfTeardown();
-          var layout = hfApplyStageConfig(data, v.durationS);
-          var tl = hfBuild(v.words, layout, v.durationS);
-          tl.set({}, {}, v.durationS); // pin timeline length to the data-derived duration
-          // GSAP quirk (confirmed 3.14.2): a fresh timeline already reports position 0,
-          // so seek(0) is treated as a no-op and skips rendering .set() calls scheduled
-          // at t=0 — the first frame would show pre-timeline CSS defaults (usually
-          // hidden). render(time, suppressEvents, force) with force=true bypasses that.
-          tl.render(0, true, true);
-          hfCurrentTimeline = tl;
-          window.__timelines = window.__timelines || {};
-          window.__timelines[HF_COMPOSITION_ID] = tl;
-          hfRunGate(v.words, v.durationS, null);
-        }
-        window.__HF_CAPTION_ATTACH__ = hfAttach;
-
-        (function hfBoot() {
-          function start(data) {
-            var ready =
-              document.fonts && document.fonts.ready ? document.fonts.ready : Promise.resolve();
-            ready.then(function () {
-              // A manual window.__HF_CAPTION_ATTACH__ call that lands while the
-              // sibling fetch / fonts.ready are still pending must win — never
-              // clobber it with the late-arriving boot payload.
-              if (hfCurrentTimeline) return;
-              hfAttach(data);
-            });
-          }
-          if (window.__HF_CAPTION__) {
-            start(window.__HF_CAPTION__);
-            return;
-          }
-          fetch("./caption-data.json")
-            .then(function (r) {
-              return r.ok ? r.json() : null;
-            })
-            .catch(function () {
-              return null;
-            })
-            .then(function (json) {
-              start(json || HF_DEMO_DATA);
-            });
-        })();
-      })();
+      var WORDS = normalizeWords(TRANSCRIPT);
+      var GROUPS = makeGroups(WORDS);
+      buildCaptions(GROUPS);
+
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+
+      var visibleStarts = GROUPS.map(function (group, groupIndex) {
+        var prev = GROUPS[groupIndex - 1];
+        var availableGap = prev ? Math.max(0, group.start - prev.end) : ENTRY_DURATION;
+        var entryLead = Math.min(ENTRY_DURATION, availableGap);
+        return Math.max(0, group.start - entryLead);
+      });
+
+      var allGroupEls = GROUPS.map(function (_, i) {
+        return document.getElementById("caption-group-" + i);
+      });
+
+      GROUPS.forEach(function (group, groupIndex) {
+        var groupEl = allGroupEls[groupIndex];
+        var visibleStart = visibleStarts[groupIndex];
+        var visibleEnd = groupIndex < GROUPS.length - 1 ? visibleStarts[groupIndex + 1] : DURATION;
+        var exitStart = Math.max(visibleStart, visibleEnd - EXIT_DURATION);
+
+        allGroupEls.forEach(function (otherEl, otherIndex) {
+          if (otherIndex !== groupIndex) tl.set(otherEl, { opacity: 0 }, visibleStart);
+        });
+
+        tl.set(groupEl, { opacity: 0, scaleX: 0.8, scaleY: 1 }, visibleStart);
+        tl.to(
+          groupEl,
+          { opacity: 1, scaleX: 1, duration: ENTRY_DURATION, ease: "power3.out", force3D: true },
+          visibleStart,
+        );
+        tl.to(
+          groupEl,
+          { scaleX: 0.75, opacity: 0.8, duration: EXIT_DURATION, ease: "power2.in", force3D: true },
+          exitStart,
+        );
+        tl.set(groupEl, { opacity: 0 }, visibleEnd);
+      });
+
+      window.__timelines["caption-emoji-pop"] = tl;
     </script>
   </body>
 </html>
diff --git a/registry/components/caption-highlight/caption-highlight.html b/registry/components/caption-highlight/caption-highlight.html
index 2156930ceb..2617005887 100644
--- a/registry/components/caption-highlight/caption-highlight.html
+++ b/registry/components/caption-highlight/caption-highlight.html
@@ -73,7 +73,7 @@
         font-weight: 800;
         font-size: 80px;
         text-transform: uppercase;
-        color: var(--hf-caption-primary, #ffffff);
+        color: #ffffff;
         display: inline-block;
         letter-spacing: 0.02em;
         line-height: 1;
@@ -86,11 +86,7 @@
       .hl-word-bg {
         position: absolute;
         inset: 0;
-        background: linear-gradient(
-          135deg,
-          var(--hf-caption-accent, #ff1745) 0%,
-          color-mix(in srgb, var(--hf-caption-accent, #ff1745) 82%, #000) 100%
-        );
+        background: linear-gradient(135deg, #ff1745 0%, #df1238 100%);
         border-radius: 10px;
         box-shadow: 0 12px 30px rgba(229, 20, 58, 0.32);
         opacity: 0;
@@ -121,10 +117,6 @@
 
     <script>
       (function () {
-        var HF_COMPOSITION_ID = "caption-highlight";
-        var HF_ROOT_ID = "highlight";
-        var HF_GROUP_SELECTOR = ".hl-group";
-
         window.__timelines = window.__timelines || {};
 
         var _fitCanvas = document.createElement("canvas");
@@ -132,9 +124,6 @@
         function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {
           var size = baseFontSize;
           var minSize = Math.floor(baseFontSize * 0.45);
-          // minSize is a hard floor returned unverified below — self-heal
-          // accepts residual overflow at the floor (clipped by the stage)
-          // rather than shrinking below legibility.
           while (size > minSize) {
             _fitCtx.font = fontWeight + " " + size + "px " + fontFamily;
             if (_fitCtx.measureText(text).width <= maxWidth) return size;
@@ -143,393 +132,129 @@
           return minSize;
         }
 
-        var HF_DEMO_DATA = {
-          version: 1,
-          segments: [
-            {
-              start: 0,
-              text: "Every great video starts with a single frame. HyperFrames lets you write HTML and render professional video. No timeline. No drag and drop. Just code that becomes cinema.",
-              words: [
-                { text: "Every", start: 0.0, end: 0.3 },
-                { text: "great", start: 0.3, end: 0.55 },
-                { text: "video", start: 0.55, end: 0.85 },
-                { text: "starts", start: 0.85, end: 1.1 },
-                { text: "with", start: 1.1, end: 1.25 },
-                { text: "a", start: 1.25, end: 1.35 },
-                { text: "single", start: 1.35, end: 1.65 },
-                { text: "frame.", start: 1.65, end: 2.0 },
-                { text: "HyperFrames", start: 2.1, end: 2.65 },
-                { text: "lets", start: 2.65, end: 2.85 },
-                { text: "you", start: 2.85, end: 2.95 },
-                { text: "write", start: 2.95, end: 3.15 },
-                { text: "HTML", start: 3.15, end: 3.55 },
-                { text: "and", start: 3.55, end: 3.65 },
-                { text: "render", start: 3.65, end: 3.95 },
-                { text: "professional", start: 3.95, end: 4.45 },
-                { text: "video.", start: 4.45, end: 4.8 },
-                { text: "No", start: 4.9, end: 5.05 },
-                { text: "timeline.", start: 5.05, end: 5.45 },
-                { text: "No", start: 5.5, end: 5.65 },
-                { text: "drag", start: 5.65, end: 5.85 },
-                { text: "and", start: 5.85, end: 5.95 },
-                { text: "drop.", start: 5.95, end: 6.25 },
-                { text: "Just", start: 6.35, end: 6.55 },
-                { text: "code", start: 6.55, end: 6.8 },
-                { text: "that", start: 6.8, end: 6.95 },
-                { text: "becomes", start: 6.95, end: 7.3 },
-                { text: "cinema.", start: 7.3, end: 7.7 },
-              ],
-            },
-          ],
-        };
+        var WORDS = [
+          { text: "Every", start: 0.0, end: 0.3 },
+          { text: "great", start: 0.3, end: 0.55 },
+          { text: "video", start: 0.55, end: 0.85 },
+          { text: "starts", start: 0.85, end: 1.1 },
+          { text: "with", start: 1.1, end: 1.25 },
+          { text: "a", start: 1.25, end: 1.35 },
+          { text: "single", start: 1.35, end: 1.65 },
+          { text: "frame.", start: 1.65, end: 2.0 },
+          { text: "HyperFrames", start: 2.1, end: 2.65 },
+          { text: "lets", start: 2.65, end: 2.85 },
+          { text: "you", start: 2.85, end: 2.95 },
+          { text: "write", start: 2.95, end: 3.15 },
+          { text: "HTML", start: 3.15, end: 3.55 },
+          { text: "and", start: 3.55, end: 3.65 },
+          { text: "render", start: 3.65, end: 3.95 },
+          { text: "professional", start: 3.95, end: 4.45 },
+          { text: "video.", start: 4.45, end: 4.8 },
+          { text: "No", start: 4.9, end: 5.05 },
+          { text: "timeline.", start: 5.05, end: 5.45 },
+          { text: "No", start: 5.5, end: 5.65 },
+          { text: "drag", start: 5.65, end: 5.85 },
+          { text: "and", start: 5.85, end: 5.95 },
+          { text: "drop.", start: 5.95, end: 6.25 },
+          { text: "Just", start: 6.35, end: 6.55 },
+          { text: "code", start: 6.55, end: 6.8 },
+          { text: "that", start: 6.8, end: 6.95 },
+          { text: "becomes", start: 6.95, end: 7.3 },
+          { text: "cinema.", start: 7.3, end: 7.7 },
+        ];
 
-        /* ── HyperFrames caption-data runtime (shared across caption templates) ── */
-        var HF_CONTRACT_VERSION = 1;
-        var HF_DEFAULT_RESOLUTION = { width: 1920, height: 1080 };
+        var RAW_GROUPS = [
+          [0, 3],
+          [4, 7],
+          [8, 8],
+          [9, 12],
+          [13, 15],
+          [16, 16],
+          [17, 19],
+          [20, 22],
+          [23, 24],
+          [25, 27],
+        ];
+        var GROUPS = RAW_GROUPS.map(function (pair, gi) {
+          var ws = pair[0],
+            we = pair[1];
+          var nextStart = gi + 1 < RAW_GROUPS.length ? WORDS[RAW_GROUPS[gi + 1][0]].start : 8.0;
+          var gEnd = Math.min(WORDS[we].end + 0.5, nextStart - 0.05);
+          return { wordStart: ws, wordEnd: we, start: WORDS[ws].start, end: gEnd };
+        });
 
-        function hfFlattenSegments(segments) {
-          var out = [];
-          (segments || []).forEach(function (seg) {
-            ((seg && seg.words) || []).forEach(function (w) {
-              var start = Math.max(0, Number(w.start) || 0);
-              out.push({
-                text: String(w.word || w.text || "").trim(),
-                start: start,
-                end: Math.max(start, Number(w.end) || 0),
-              });
-            });
-          });
-          out.sort(function (a, b) {
-            return a.start - b.start;
-          });
-          return out.filter(function (w) {
-            return w.text.length > 0;
-          });
-        }
+        var container = document.getElementById("hl-container");
+        var tl = gsap.timeline({ paused: true });
 
-        function hfDeriveDuration(words) {
-          var end = 0;
-          words.forEach(function (w) {
-            if (w.end > end) end = w.end;
-          });
-          return end;
-        }
+        GROUPS.forEach(function (g, gi) {
+          var groupWords = WORDS.slice(g.wordStart, g.wordEnd + 1);
+          var grp = document.createElement("div");
+          grp.className = "hl-group";
+          grp.id = "hl-grp-" + gi;
 
-        function hfValidate(data) {
-          if (!data || typeof data !== "object") return { ok: false, reason: "not-an-object" };
-          if (data.version != null) {
-            // Number("v2") is NaN and NaN > x is always false — an explicit
-            // finite check keeps malformed versions from slipping past the gate.
-            var hfVersion = Number(data.version);
-            if (!Number.isFinite(hfVersion) || Math.floor(hfVersion) > HF_CONTRACT_VERSION) {
-              return { ok: false, reason: "unsupported-version" };
-            }
-          }
-          if (!Array.isArray(data.segments) || data.segments.length === 0) {
-            return { ok: false, reason: "no-segments" };
-          }
-          if (data.displayMode != null && data.displayMode !== "full") {
-            return { ok: false, reason: "unsupported-displayMode" };
-          }
-          var words = hfFlattenSegments(data.segments);
-          if (words.length === 0) return { ok: false, reason: "no-words" };
-          return { ok: true, words: words, durationS: hfDeriveDuration(words) };
-        }
+          var groupText = groupWords
+            .map(function (w) {
+              return w.text.toUpperCase();
+            })
+            .join(" ");
+          var computedSize = fitFontSize(groupText, 80, "800", "Montserrat", 1620);
 
-        function hfApplyStageConfig(data, durationS) {
-          var res = (data && data.resolution) || HF_DEFAULT_RESOLUTION;
-          // Mirror the published validator's <=8192 bound defensively — the
-          // validator is an optional pre-flight, and an unbounded stage size
-          // would OOM render workers.
-          var W = Math.min(
-            8192,
-            Math.max(1, Math.round(Number(res.width) || HF_DEFAULT_RESOLUTION.width)),
-          );
-          var H = Math.min(
-            8192,
-            Math.max(1, Math.round(Number(res.height) || HF_DEFAULT_RESOLUTION.height)),
-          );
-          var root = document.getElementById(HF_ROOT_ID);
-          [document.documentElement, document.body, root].forEach(function (el) {
-            el.style.width = W + "px";
-            el.style.height = H + "px";
-          });
-          root.setAttribute("data-width", String(W));
-          root.setAttribute("data-height", String(H));
-          root.setAttribute("data-duration", String(durationS));
-          var brand = (data && data.brand) || {};
-          if (typeof brand.primaryColor === "string" && brand.primaryColor) {
-            root.style.setProperty("--hf-caption-primary", brand.primaryColor);
-          } else {
-            root.style.removeProperty("--hf-caption-primary");
-          }
-          if (typeof brand.accentColor === "string" && brand.accentColor) {
-            root.style.setProperty("--hf-caption-accent", brand.accentColor);
-          } else {
-            root.style.removeProperty("--hf-caption-accent");
-          }
-          return {
-            W: W,
-            H: H,
-            scaleX: W / 1920,
-            scaleY: H / 1080,
-            fontScale: Math.min(W, H) / 1080,
-          };
-        }
+          groupWords.forEach(function (w, i) {
+            var wi = g.wordStart + i;
+            var wordEl = document.createElement("span");
+            wordEl.className = "hl-word";
+            wordEl.id = "hl-w-" + wi;
+            wordEl.style.fontSize = computedSize + "px";
 
-        function hfPublishStatus(status) {
-          window.__HF_CAPTION_STATUS = status;
-          document
-            .getElementById(HF_ROOT_ID)
-            .setAttribute("data-caption-status", status.ok ? "ok" : "failed");
-        }
+            var bgEl = document.createElement("span");
+            bgEl.className = "hl-word-bg";
+            bgEl.id = "hl-bg-" + wi;
 
-        function hfRunGate(words, durationS, failReason) {
-          if (failReason) {
-            hfPublishStatus({
-              ok: false,
-              present: false,
-              contained: false,
-              reason: failReason,
-              version: HF_CONTRACT_VERSION,
-              durationS: durationS || 0,
-            });
-            return;
-          }
-          var root = document.getElementById(HF_ROOT_ID);
-          var rootRect = root.getBoundingClientRect();
-          var groups = root.querySelectorAll(HF_GROUP_SELECTOR);
-          var present = false;
-          var contained = true;
-          var tokens = [];
-          words.forEach(function (w) {
-            var t = w.text.toLowerCase().replace(/[^a-z0-9]/g, "");
-            if (t) tokens.push(t);
-          });
-          groups.forEach(function (el) {
-            var prevOpacity = el.style.opacity;
-            var prevVisibility = el.style.visibility;
-            el.style.opacity = "1";
-            el.style.visibility = "visible";
-            var r = el.getBoundingClientRect();
-            if (r.width > 0 && r.height > 0) {
-              var text = (el.textContent || "").toLowerCase();
-              for (var i = 0; i < tokens.length; i++) {
-                if (text.indexOf(tokens[i]) !== -1) {
-                  present = true;
-                  break;
-                }
-              }
-              if (
-                r.left < rootRect.left - 1 ||
-                r.right > rootRect.right + 1 ||
-                r.top < rootRect.top - 1 ||
-                r.bottom > rootRect.bottom + 1
-              ) {
-                contained = false;
-              }
-            }
-            el.style.opacity = prevOpacity;
-            el.style.visibility = prevVisibility;
-          });
-          hfPublishStatus({
-            ok: present && contained,
-            present: present,
-            contained: contained,
-            version: HF_CONTRACT_VERSION,
-            durationS: durationS,
-          });
-        }
-
-        var MAX_WORDS_PER_GROUP = 4;
-        var PAUSE_THRESHOLD = 0.1;
+            var textEl = document.createElement("span");
+            textEl.className = "hl-word-text";
+            textEl.textContent = w.text.toUpperCase();
 
-        function hfMakeGroups(words, fontPx, safeWidth, durationS) {
-          var raw = [];
-          var current = [];
-          function fits(ws) {
-            var text = ws
-              .map(function (w) {
-                return w.text.toUpperCase();
-              })
-              .join(" ");
-            _fitCtx.font = "800 " + fontPx + "px Montserrat";
-            // 1.6× headroom: fitFontSize can shrink to 45% of base
-            return _fitCtx.measureText(text).width <= safeWidth * 1.6;
-          }
-          words.forEach(function (w, i) {
-            var next = words[i + 1];
-            var test = current.concat([w]);
-            if (test.length > MAX_WORDS_PER_GROUP || !fits(test)) {
-              if (current.length) raw.push(current);
-              current = [w];
-            } else {
-              current.push(w);
-            }
-            var punctuation = /[,.:!?]$/.test(w.text);
-            var pause = next ? next.start - w.end : Infinity;
-            if (
-              current.length &&
-              (punctuation ||
-                pause >= PAUSE_THRESHOLD ||
-                current.length >= MAX_WORDS_PER_GROUP ||
-                !next)
-            ) {
-              raw.push(current);
-              current = [];
-            }
-          });
-          if (current.length) raw.push(current);
-          return raw.map(function (ws, gi) {
-            var nextStart = gi + 1 < raw.length ? raw[gi + 1][0].start : durationS;
-            return {
-              words: ws,
-              start: ws[0].start,
-              end: Math.min(
-                ws[ws.length - 1].end + 0.5,
-                Math.max(ws[0].start + 0.2, nextStart - 0.05),
-              ),
-            };
+            wordEl.appendChild(bgEl);
+            wordEl.appendChild(textEl);
+            grp.appendChild(wordEl);
           });
-        }
 
-        function hfTeardown() {
-          document.getElementById("hl-container").innerHTML = "";
-        }
-
-        function hfBuild(words, layout, durationS) {
-          var fontPx = Math.round(80 * layout.fontScale);
-          var safeWidth = Math.round(1620 * layout.scaleX);
-          var container = document.getElementById("hl-container");
-          var groups = hfMakeGroups(words, fontPx, safeWidth, durationS);
-          var tl = gsap.timeline({ paused: true });
-          var wordCounter = 0;
-
-          groups.forEach(function (g, gi) {
-            var grp = document.createElement("div");
-            grp.className = "hl-group";
-            grp.id = "hl-grp-" + gi;
-            grp.style.bottom = Math.round(140 * layout.scaleY) + "px";
-            grp.style.paddingLeft = Math.round(100 * layout.scaleX) + "px";
-            grp.style.paddingRight = Math.round(100 * layout.scaleX) + "px";
+          container.appendChild(grp);
 
-            var groupText = g.words
-              .map(function (w) {
-                return w.text.toUpperCase();
-              })
-              .join(" ");
-            var computedSize = fitFontSize(groupText, fontPx, "800", "Montserrat", safeWidth);
+          tl.set(grp, { visibility: "visible" }, g.start);
+          tl.fromTo(
+            grp,
+            { opacity: 0 },
+            { opacity: 1, duration: 0.12, ease: "power2.out" },
+            g.start,
+          );
 
-            var ids = [];
-            g.words.forEach(function (w) {
-              var wi = wordCounter++;
-              ids.push(wi);
-              var wordEl = document.createElement("span");
-              wordEl.className = "hl-word";
-              wordEl.id = "hl-w-" + wi;
-              wordEl.style.fontSize = computedSize + "px";
-              var bgEl = document.createElement("span");
-              bgEl.className = "hl-word-bg";
-              bgEl.id = "hl-bg-" + wi;
-              var textEl = document.createElement("span");
-              textEl.className = "hl-word-text";
-              textEl.textContent = w.text.toUpperCase();
-              wordEl.appendChild(bgEl);
-              wordEl.appendChild(textEl);
-              grp.appendChild(wordEl);
-            });
-            container.appendChild(grp);
+          groupWords.forEach(function (w, i) {
+            var wi = g.wordStart + i;
+            var bgEl = document.getElementById("hl-bg-" + wi);
+            var wordEl = document.getElementById("hl-w-" + wi);
 
-            tl.set(grp, { visibility: "visible" }, g.start);
-            tl.fromTo(
-              grp,
-              { opacity: 0 },
-              { opacity: 1, duration: 0.12, ease: "power2.out" },
-              g.start,
+            tl.to(bgEl, { opacity: 1, scaleX: 1, duration: 0.15, ease: "power2.out" }, w.start);
+            tl.to(
+              wordEl,
+              { filter: "brightness(1.05)", duration: 0.08, ease: "power2.out" },
+              w.start,
             );
-            g.words.forEach(function (w, i) {
-              var bgEl = document.getElementById("hl-bg-" + ids[i]);
-              var wordEl = document.getElementById("hl-w-" + ids[i]);
-              tl.to(bgEl, { opacity: 1, scaleX: 1, duration: 0.15, ease: "power2.out" }, w.start);
-              tl.to(
-                wordEl,
-                { filter: "brightness(1.05)", duration: 0.08, ease: "power2.out" },
-                w.start,
-              );
-              tl.to(
-                wordEl,
-                { filter: "brightness(1)", duration: 0.16, ease: "power2.out" },
-                w.start + 0.08,
-              );
-              tl.to(bgEl, { opacity: 0, scaleX: 1.02, duration: 0.1, ease: "power2.in" }, w.end);
-              tl.set(bgEl, { scaleX: 0 }, w.end + 0.1);
-            });
             tl.to(
-              grp,
-              { opacity: 0, duration: 0.1, ease: "power2.in" },
-              Math.max(g.start, g.end - 0.1),
+              wordEl,
+              { filter: "brightness(1)", duration: 0.16, ease: "power2.out" },
+              w.start + 0.08,
             );
-            tl.set(grp, { opacity: 0, visibility: "hidden" }, g.end);
+            tl.to(bgEl, { opacity: 0, scaleX: 1.02, duration: 0.1, ease: "power2.in" }, w.end);
+            tl.set(bgEl, { scaleX: 0 }, w.end + 0.1);
           });
 
-          return tl;
-        }
-
-        var hfCurrentTimeline = null;
-
-        function hfAttach(data) {
-          var v = hfValidate(data);
-          if (!v.ok) {
-            hfRunGate([], 0, v.reason);
-            return;
-          }
-          if (hfCurrentTimeline) {
-            hfCurrentTimeline.kill();
-            hfCurrentTimeline = null;
-          }
-          hfTeardown();
-          var layout = hfApplyStageConfig(data, v.durationS);
-          var tl = hfBuild(v.words, layout, v.durationS);
-          tl.set({}, {}, v.durationS); // pin timeline length to the data-derived duration
-          // GSAP quirk (confirmed 3.14.2): a fresh timeline already reports position 0,
-          // so seek(0) is treated as a no-op and skips rendering .set() calls scheduled
-          // at t=0 — the first frame would show pre-timeline CSS defaults (usually
-          // hidden). render(time, suppressEvents, force) with force=true bypasses that.
-          tl.render(0, true, true);
-          hfCurrentTimeline = tl;
-          window.__timelines = window.__timelines || {};
-          window.__timelines[HF_COMPOSITION_ID] = tl;
-          hfRunGate(v.words, v.durationS, null);
-        }
-        window.__HF_CAPTION_ATTACH__ = hfAttach;
+          tl.to(grp, { opacity: 0, duration: 0.1, ease: "power2.in" }, g.end - 0.1);
+          tl.set(grp, { opacity: 0, visibility: "hidden" }, g.end);
+        });
 
-        (function hfBoot() {
-          function start(data) {
-            var ready =
-              document.fonts && document.fonts.ready ? document.fonts.ready : Promise.resolve();
-            ready.then(function () {
-              // A manual window.__HF_CAPTION_ATTACH__ call that lands while the
-              // sibling fetch / fonts.ready are still pending must win — never
-              // clobber it with the late-arriving boot payload.
-              if (hfCurrentTimeline) return;
-              hfAttach(data);
-            });
-          }
-          if (window.__HF_CAPTION__) {
-            start(window.__HF_CAPTION__);
-            return;
-          }
-          fetch("./caption-data.json")
-            .then(function (r) {
-              return r.ok ? r.json() : null;
-            })
-            .catch(function () {
-              return null;
-            })
-            .then(function (json) {
-              start(json || HF_DEMO_DATA);
-            });
-        })();
+        tl.seek(0);
+        window.__timelines["caption-highlight"] = tl;
       })();
     </script>
   </body>
diff --git a/registry/components/caption-pill-karaoke/caption-pill-karaoke.html b/registry/components/caption-pill-karaoke/caption-pill-karaoke.html
index 5e19c8ed47..06b5a4ac2c 100644
--- a/registry/components/caption-pill-karaoke/caption-pill-karaoke.html
+++ b/registry/components/caption-pill-karaoke/caption-pill-karaoke.html
@@ -131,514 +131,252 @@
     </div>
 
     <script>
-      // IIFE: keep every template's runtime private to itself so two caption
-      // components pasted into one composition document can't clobber each
-      // other's hfAttach/hfBuild via shared script-scope names (boot is async,
-      // so collisions surface AFTER all scripts have executed).
-      (function () {
-        var HF_COMPOSITION_ID = "caption-pill-karaoke";
-        var HF_ROOT_ID = "pill-karaoke";
-        var HF_GROUP_SELECTOR = ".caption-group";
-
-        var HF_DEMO_DATA = {
-          version: 1,
-          segments: [
-            {
-              start: 0,
-              text: "Every great video starts with a single frame. HyperFrames lets you write HTML and render professional video. No timeline. No drag and drop. Just code that becomes cinema.",
-              words: [
-                { text: "Every", start: 0.0, end: 0.3 },
-                { text: "great", start: 0.3, end: 0.55 },
-                { text: "video", start: 0.55, end: 0.85 },
-                { text: "starts", start: 0.85, end: 1.1 },
-                { text: "with", start: 1.1, end: 1.25 },
-                { text: "a", start: 1.25, end: 1.35 },
-                { text: "single", start: 1.35, end: 1.65 },
-                { text: "frame.", start: 1.65, end: 2.0 },
-                { text: "HyperFrames", start: 2.1, end: 2.65 },
-                { text: "lets", start: 2.65, end: 2.85 },
-                { text: "you", start: 2.85, end: 2.95 },
-                { text: "write", start: 2.95, end: 3.15 },
-                { text: "HTML", start: 3.15, end: 3.55 },
-                { text: "and", start: 3.55, end: 3.65 },
-                { text: "render", start: 3.65, end: 3.95 },
-                { text: "professional", start: 3.95, end: 4.45 },
-                { text: "video.", start: 4.45, end: 4.8 },
-                { text: "No", start: 4.9, end: 5.05 },
-                { text: "timeline.", start: 5.05, end: 5.45 },
-                { text: "No", start: 5.5, end: 5.65 },
-                { text: "drag", start: 5.65, end: 5.85 },
-                { text: "and", start: 5.85, end: 5.95 },
-                { text: "drop.", start: 5.95, end: 6.25 },
-                { text: "Just", start: 6.35, end: 6.55 },
-                { text: "code", start: 6.55, end: 6.8 },
-                { text: "that", start: 6.8, end: 6.95 },
-                { text: "becomes", start: 6.95, end: 7.3 },
-                { text: "cinema.", start: 7.3, end: 7.7 },
-              ],
-            },
-          ],
-        };
-
-        /* ── HyperFrames caption-data runtime (shared across caption templates) ── */
-        var HF_CONTRACT_VERSION = 1;
-        var HF_DEFAULT_RESOLUTION = { width: 1920, height: 1080 };
-
-        function hfFlattenSegments(segments) {
-          var out = [];
-          (segments || []).forEach(function (seg) {
-            ((seg && seg.words) || []).forEach(function (w) {
-              var start = Math.max(0, Number(w.start) || 0);
-              out.push({
-                text: String(w.word || w.text || "").trim(),
-                start: start,
-                end: Math.max(start, Number(w.end) || 0),
-              });
-            });
-          });
-          out.sort(function (a, b) {
-            return a.start - b.start;
-          });
-          return out.filter(function (w) {
+      var DURATION = 8;
+      var SAFE_ZONE_WIDTH = 1400;
+      var PILL_MAX_WIDTH = 1400;
+      var PILL_MIN_PADDING_X = 30;
+      var PILL_MAX_PADDING_X = 60;
+      var FONT_WIDTH_SAFETY = 1.18;
+      var FONT_FAMILY = "Poppins";
+      var FONT_WEIGHT = "700";
+      var BASE_FONT_SIZE = 72;
+      var MIN_FONT_SIZE = 52;
+      var MAX_WORDS_PER_GROUP = 4;
+      var WORD_SPACING = 16;
+      var PAUSE_THRESHOLD = 0.1;
+      var GROUP_END_BUFFER = 0.3;
+      var COLOR_INACTIVE = "#A6A6A6";
+      var COLOR_ACTIVE = "#1C1E1D";
+      var COLOR_FADE_DURATION = 0.1;
+      var WORD_FADE_LEAD = 0.05;
+
+      var TRANSCRIPT = [
+        { text: "Every", start: 0.0, end: 0.3 },
+        { text: "great", start: 0.3, end: 0.55 },
+        { text: "video", start: 0.55, end: 0.85 },
+        { text: "starts", start: 0.85, end: 1.1 },
+        { text: "with", start: 1.1, end: 1.25 },
+        { text: "a", start: 1.25, end: 1.35 },
+        { text: "single", start: 1.35, end: 1.65 },
+        { text: "frame.", start: 1.65, end: 2.0 },
+        { text: "HyperFrames", start: 2.1, end: 2.65 },
+        { text: "lets", start: 2.65, end: 2.85 },
+        { text: "you", start: 2.85, end: 2.95 },
+        { text: "write", start: 2.95, end: 3.15 },
+        { text: "HTML", start: 3.15, end: 3.55 },
+        { text: "and", start: 3.55, end: 3.65 },
+        { text: "render", start: 3.65, end: 3.95 },
+        { text: "professional", start: 3.95, end: 4.45 },
+        { text: "video.", start: 4.45, end: 4.8 },
+        { text: "No", start: 4.9, end: 5.05 },
+        { text: "timeline.", start: 5.05, end: 5.45 },
+        { text: "No", start: 5.5, end: 5.65 },
+        { text: "drag", start: 5.65, end: 5.85 },
+        { text: "and", start: 5.85, end: 5.95 },
+        { text: "drop.", start: 5.95, end: 6.25 },
+        { text: "Just", start: 6.35, end: 6.55 },
+        { text: "code", start: 6.55, end: 6.8 },
+        { text: "that", start: 6.8, end: 6.95 },
+        { text: "becomes", start: 6.95, end: 7.3 },
+        { text: "cinema.", start: 7.3, end: 7.7 },
+      ];
+
+      function normalizeWords(rawWords) {
+        return rawWords
+          .map(function (item) {
+            var text = String(item.word || item.text || "").trim();
+            return {
+              text: text,
+              start: Math.max(0, Number(item.start) || 0),
+              end: Math.min(DURATION, Math.max(Number(item.start) || 0, Number(item.end) || 0)),
+            };
+          })
+          .filter(function (w) {
             return w.text.length > 0;
           });
-        }
+      }
 
-        function hfDeriveDuration(words) {
-          var end = 0;
-          words.forEach(function (w) {
-            if (w.end > end) end = w.end;
-          });
-          return end;
-        }
+      var measureCanvas = document.createElement("canvas");
+      var measureContext = measureCanvas.getContext("2d");
 
-        function hfValidate(data) {
-          if (!data || typeof data !== "object") return { ok: false, reason: "not-an-object" };
-          if (data.version != null) {
-            // Number("v2") is NaN and NaN > x is always false — an explicit
-            // finite check keeps malformed versions from slipping past the gate.
-            var hfVersion = Number(data.version);
-            if (!Number.isFinite(hfVersion) || Math.floor(hfVersion) > HF_CONTRACT_VERSION) {
-              return { ok: false, reason: "unsupported-version" };
-            }
-          }
-          if (!Array.isArray(data.segments) || data.segments.length === 0) {
-            return { ok: false, reason: "no-segments" };
-          }
-          if (data.displayMode != null && data.displayMode !== "full") {
-            return { ok: false, reason: "unsupported-displayMode" };
-          }
-          var words = hfFlattenSegments(data.segments);
-          if (words.length === 0) return { ok: false, reason: "no-words" };
-          return { ok: true, words: words, durationS: hfDeriveDuration(words) };
-        }
+      function measureWordWidth(text, fontSize) {
+        measureContext.font = FONT_WEIGHT + " " + fontSize + "px " + FONT_FAMILY;
+        return measureContext.measureText(text).width * FONT_WIDTH_SAFETY;
+      }
 
-        function hfApplyStageConfig(data, durationS) {
-          var res = (data && data.resolution) || HF_DEFAULT_RESOLUTION;
-          // Mirror the published validator's <=8192 bound defensively — the
-          // validator is an optional pre-flight, and an unbounded stage size
-          // would OOM render workers.
-          var W = Math.min(
-            8192,
-            Math.max(1, Math.round(Number(res.width) || HF_DEFAULT_RESOLUTION.width)),
-          );
-          var H = Math.min(
-            8192,
-            Math.max(1, Math.round(Number(res.height) || HF_DEFAULT_RESOLUTION.height)),
+      function measureLineWidth(words, fontSize) {
+        return words.reduce(function (total, word, index) {
+          return (
+            total + measureWordWidth(word.text.toLowerCase(), fontSize) + (index ? WORD_SPACING : 0)
           );
-          var root = document.getElementById(HF_ROOT_ID);
-          [document.documentElement, document.body, root].forEach(function (el) {
-            el.style.width = W + "px";
-            el.style.height = H + "px";
-          });
-          root.setAttribute("data-width", String(W));
-          root.setAttribute("data-height", String(H));
-          root.setAttribute("data-duration", String(durationS));
-          var brand = (data && data.brand) || {};
-          if (typeof brand.primaryColor === "string" && brand.primaryColor) {
-            root.style.setProperty("--hf-caption-primary", brand.primaryColor);
-          } else {
-            root.style.removeProperty("--hf-caption-primary");
-          }
-          if (typeof brand.accentColor === "string" && brand.accentColor) {
-            root.style.setProperty("--hf-caption-accent", brand.accentColor);
-          } else {
-            root.style.removeProperty("--hf-caption-accent");
-          }
-          return {
-            W: W,
-            H: H,
-            scaleX: W / 1920,
-            scaleY: H / 1080,
-            fontScale: Math.min(W, H) / 1080,
-          };
-        }
+        }, 0);
+      }
 
-        function hfPublishStatus(status) {
-          window.__HF_CAPTION_STATUS = status;
-          document
-            .getElementById(HF_ROOT_ID)
-            .setAttribute("data-caption-status", status.ok ? "ok" : "failed");
+      function splitLinesForGroup(words, fontSize) {
+        var maxLineWidth = PILL_MAX_WIDTH - PILL_MIN_PADDING_X * 2;
+        if (
+          words.some(function (w) {
+            return measureWordWidth(w.text.toLowerCase(), fontSize) > maxLineWidth;
+          })
+        ) {
+          return null;
         }
-
-        function hfRunGate(words, durationS, failReason) {
-          if (failReason) {
-            hfPublishStatus({
-              ok: false,
-              present: false,
-              contained: false,
-              reason: failReason,
-              version: HF_CONTRACT_VERSION,
-              durationS: durationS || 0,
-            });
-            return;
-          }
-          var root = document.getElementById(HF_ROOT_ID);
-          var rootRect = root.getBoundingClientRect();
-          var groups = root.querySelectorAll(HF_GROUP_SELECTOR);
-          var present = false;
-          var contained = true;
-          var tokens = [];
-          words.forEach(function (w) {
-            var t = w.text.toLowerCase().replace(/[^a-z0-9]/g, "");
-            if (t) tokens.push(t);
-          });
-          groups.forEach(function (el) {
-            var prevOpacity = el.style.opacity;
-            var prevVisibility = el.style.visibility;
-            el.style.opacity = "1";
-            el.style.visibility = "visible";
-            var r = el.getBoundingClientRect();
-            if (r.width > 0 && r.height > 0) {
-              var text = (el.textContent || "").toLowerCase();
-              for (var i = 0; i < tokens.length; i++) {
-                if (text.indexOf(tokens[i]) !== -1) {
-                  present = true;
-                  break;
-                }
-              }
-              if (
-                r.left < rootRect.left - 1 ||
-                r.right > rootRect.right + 1 ||
-                r.top < rootRect.top - 1 ||
-                r.bottom > rootRect.bottom + 1
-              ) {
-                contained = false;
-              }
+        if (measureLineWidth(words, fontSize) <= maxLineWidth) return [words];
+        var bestSplit = null;
+        var bestImbalance = Infinity;
+        for (var split = 1; split < words.length; split++) {
+          var firstLine = words.slice(0, split);
+          var secondLine = words.slice(split);
+          var firstWidth = measureLineWidth(firstLine, fontSize);
+          var secondWidth = measureLineWidth(secondLine, fontSize);
+          if (firstWidth <= maxLineWidth && secondWidth <= maxLineWidth) {
+            var imbalance = Math.abs(firstWidth - secondWidth);
+            if (imbalance < bestImbalance) {
+              bestSplit = [firstLine, secondLine];
+              bestImbalance = imbalance;
             }
-            el.style.opacity = prevOpacity;
-            el.style.visibility = prevVisibility;
-          });
-          hfPublishStatus({
-            ok: present && contained,
-            present: present,
-            contained: contained,
-            version: HF_CONTRACT_VERSION,
-            durationS: durationS,
-          });
-        }
-
-        var DURATION, SAFE_ZONE_WIDTH, PILL_MAX_WIDTH, BASE_FONT_SIZE, MIN_FONT_SIZE, WORD_SPACING;
-        var PILL_MIN_PADDING_X = 30;
-        var PILL_MAX_PADDING_X = 60;
-        var FONT_WIDTH_SAFETY = 1.18;
-        var FONT_FAMILY = "Poppins";
-        var FONT_WEIGHT = "700";
-        var MAX_WORDS_PER_GROUP = 4;
-        var PAUSE_THRESHOLD = 0.1;
-        var GROUP_END_BUFFER = 0.3;
-        var COLOR_INACTIVE = "#A6A6A6";
-        var COLOR_ACTIVE = "#1C1E1D";
-        var hfColorActive = COLOR_ACTIVE;
-        var COLOR_FADE_DURATION = 0.1;
-        var WORD_FADE_LEAD = 0.05;
-
-        function normalizeWords(rawWords) {
-          return rawWords
-            .map(function (item) {
-              var text = String(item.word || item.text || "").trim();
-              return {
-                text: text,
-                start: Math.max(0, Number(item.start) || 0),
-                end: Math.min(DURATION, Math.max(Number(item.start) || 0, Number(item.end) || 0)),
-              };
-            })
-            .filter(function (w) {
-              return w.text.length > 0;
-            });
-        }
-
-        var measureCanvas = document.createElement("canvas");
-        var measureContext = measureCanvas.getContext("2d");
-
-        function measureWordWidth(text, fontSize) {
-          measureContext.font = FONT_WEIGHT + " " + fontSize + "px " + FONT_FAMILY;
-          return measureContext.measureText(text).width * FONT_WIDTH_SAFETY;
-        }
-
-        function measureLineWidth(words, fontSize) {
-          return words.reduce(function (total, word, index) {
-            return (
-              total +
-              measureWordWidth(word.text.toLowerCase(), fontSize) +
-              (index ? WORD_SPACING : 0)
-            );
-          }, 0);
-        }
-
-        function splitLinesForGroup(words, fontSize) {
-          var maxLineWidth = PILL_MAX_WIDTH - PILL_MIN_PADDING_X * 2;
-          if (
-            words.some(function (w) {
-              return measureWordWidth(w.text.toLowerCase(), fontSize) > maxLineWidth;
-            })
-          ) {
-            return null;
           }
-          if (measureLineWidth(words, fontSize) <= maxLineWidth) return [words];
-          var bestSplit = null;
-          var bestImbalance = Infinity;
-          for (var split = 1; split < words.length; split++) {
-            var firstLine = words.slice(0, split);
-            var secondLine = words.slice(split);
-            var firstWidth = measureLineWidth(firstLine, fontSize);
-            var secondWidth = measureLineWidth(secondLine, fontSize);
-            if (firstWidth <= maxLineWidth && secondWidth <= maxLineWidth) {
-              var imbalance = Math.abs(firstWidth - secondWidth);
-              if (imbalance < bestImbalance) {
-                bestSplit = [firstLine, secondLine];
-                bestImbalance = imbalance;
-              }
-            }
-          }
-          return bestSplit;
         }
+        return bestSplit;
+      }
 
-        function fitsInTwoLinesAtSize(words, fontSize) {
-          return splitLinesForGroup(words, fontSize) !== null;
-        }
+      function fitsInTwoLinesAtSize(words, fontSize) {
+        return splitLinesForGroup(words, fontSize) !== null;
+      }
 
-        function planPillLayout(words, fontSize) {
-          var lines = splitLinesForGroup(words, fontSize) || [words];
-          var widestLine = lines.reduce(function (max, lineWords) {
-            return Math.max(max, measureLineWidth(lineWords, fontSize));
-          }, 0);
-          var availablePadding = Math.floor((PILL_MAX_WIDTH - widestLine) / 2);
-          var padX = Math.max(PILL_MIN_PADDING_X, Math.min(PILL_MAX_PADDING_X, availablePadding));
-          var pillWidth = Math.min(PILL_MAX_WIDTH, Math.ceil(widestLine + padX * 2));
-          return { lines: lines, padX: padX, pillWidth: pillWidth };
-        }
+      function planPillLayout(words, fontSize) {
+        var lines = splitLinesForGroup(words, fontSize) || [words];
+        var widestLine = lines.reduce(function (max, lineWords) {
+          return Math.max(max, measureLineWidth(lineWords, fontSize));
+        }, 0);
+        var availablePadding = Math.floor((PILL_MAX_WIDTH - widestLine) / 2);
+        var padX = Math.max(PILL_MIN_PADDING_X, Math.min(PILL_MAX_PADDING_X, availablePadding));
+        var pillWidth = Math.min(PILL_MAX_WIDTH, Math.ceil(widestLine + padX * 2));
+        return { lines: lines, padX: padX, pillWidth: pillWidth };
+      }
 
-        function makeGroups(words) {
-          var groups = [];
-          var current = [];
-          words.forEach(function (word, index) {
-            var testGroup = current.concat([word]);
-            var nextWord = words[index + 1];
-            var wouldExceedMaxWords = testGroup.length > MAX_WORDS_PER_GROUP;
-            var wouldExceedTwoLines = !fitsInTwoLinesAtSize(testGroup, BASE_FONT_SIZE);
-            if (wouldExceedMaxWords || wouldExceedTwoLines) {
-              if (current.length) {
-                groups.push({
-                  words: current.slice(),
-                  start: current[0].start,
-                  end: current[current.length - 1].end,
-                });
-              }
-              current = [word];
-              return;
-            }
-            current.push(word);
-            var hasPunctuation = /[,.:!?]$/.test(word.text);
-            var pauseDuration = nextWord ? nextWord.start - word.end : 0;
-            var hasNaturalPause = pauseDuration >= PAUSE_THRESHOLD;
-            var maxWordsReached = current.length >= MAX_WORDS_PER_GROUP;
-            if (maxWordsReached || !nextWord || hasPunctuation || hasNaturalPause) {
+      function makeGroups(words) {
+        var groups = [];
+        var current = [];
+        words.forEach(function (word, index) {
+          var testGroup = current.concat([word]);
+          var nextWord = words[index + 1];
+          var wouldExceedMaxWords = testGroup.length > MAX_WORDS_PER_GROUP;
+          var wouldExceedTwoLines = !fitsInTwoLinesAtSize(testGroup, BASE_FONT_SIZE);
+          if (wouldExceedMaxWords || wouldExceedTwoLines) {
+            if (current.length) {
               groups.push({
                 words: current.slice(),
                 start: current[0].start,
                 end: current[current.length - 1].end,
               });
-              current = [];
             }
-          });
-          if (current.length)
+            current = [word];
+            return;
+          }
+          current.push(word);
+          var hasPunctuation = /[,.:!?]$/.test(word.text);
+          var pauseDuration = nextWord ? nextWord.start - word.end : 0;
+          var hasNaturalPause = pauseDuration >= PAUSE_THRESHOLD;
+          var maxWordsReached = current.length >= MAX_WORDS_PER_GROUP;
+          if (maxWordsReached || !nextWord || hasPunctuation || hasNaturalPause) {
             groups.push({
               words: current.slice(),
               start: current[0].start,
               end: current[current.length - 1].end,
             });
-          return groups;
-        }
-
-        function fontSizeForGroup(words) {
-          var size = BASE_FONT_SIZE;
-          // MIN_FONT_SIZE is a hard floor returned unverified below — self-heal
-          // accepts residual overflow at the floor (clipped by the stage)
-          // rather than shrinking below legibility.
-          while (size > MIN_FONT_SIZE && !fitsInTwoLinesAtSize(words, size)) {
-            size -= 2;
+            current = [];
           }
-          return size;
-        }
-
-        function buildCaptions(groups) {
-          var stage = document.getElementById("caption-stage");
-          groups.forEach(function (group, groupIndex) {
-            var groupEl = document.createElement("div");
-            var pillEl = document.createElement("div");
-            var copyEl = document.createElement("div");
-            var fontSize = fontSizeForGroup(group.words);
-            groupEl.id = "caption-group-" + groupIndex;
-            groupEl.className = "caption-group";
-            pillEl.className = "caption-pill";
-            copyEl.className = "caption-copy";
-            copyEl.style.fontSize = fontSize + "px";
-            var indexedWords = group.words.map(function (word, wordIndex) {
-              return { text: word.text, start: word.start, end: word.end, wordIndex: wordIndex };
-            });
-            var layout = planPillLayout(indexedWords, fontSize);
-            pillEl.style.width = layout.pillWidth + "px";
-            pillEl.style.maxWidth = PILL_MAX_WIDTH + "px";
-            pillEl.style.paddingLeft = layout.padX + "px";
-            pillEl.style.paddingRight = layout.padX + "px";
-            layout.lines.slice(0, 2).forEach(function (lineWords) {
-              var lineEl = document.createElement("div");
-              lineEl.className = "caption-line";
-              lineWords.forEach(function (word) {
-                var wordEl = document.createElement("span");
-                wordEl.id = "caption-word-" + groupIndex + "-" + word.wordIndex;
-                wordEl.className = "caption-word";
-                wordEl.textContent = word.text.toLowerCase();
-                lineEl.appendChild(wordEl);
-              });
-              copyEl.appendChild(lineEl);
-            });
-            pillEl.appendChild(copyEl);
-            groupEl.appendChild(pillEl);
-            stage.appendChild(groupEl);
+        });
+        if (current.length)
+          groups.push({
+            words: current.slice(),
+            start: current[0].start,
+            end: current[current.length - 1].end,
           });
-        }
+        return groups;
+      }
 
-        function hfTeardown() {
-          document.getElementById("caption-stage").innerHTML = "";
+      function fontSizeForGroup(words) {
+        var size = BASE_FONT_SIZE;
+        while (size > MIN_FONT_SIZE && !fitsInTwoLinesAtSize(words, size)) {
+          size -= 2;
         }
+        return size;
+      }
 
-        function hfBuild(words, layout, durationS) {
-          DURATION = durationS;
-          BASE_FONT_SIZE = Math.round(72 * layout.fontScale);
-          MIN_FONT_SIZE = Math.round(52 * layout.fontScale);
-          SAFE_ZONE_WIDTH = Math.round(1600 * layout.scaleX);
-          PILL_MAX_WIDTH = SAFE_ZONE_WIDTH;
-          WORD_SPACING = Math.round(16 * layout.fontScale);
-
-          var stage = document.getElementById("caption-stage");
-          var stageHeight = Math.round(220 * layout.fontScale);
-          stage.style.width = SAFE_ZONE_WIDTH + "px";
-          stage.style.height = stageHeight + "px";
-          stage.style.bottom = Math.round(90 * layout.scaleY) + "px";
-
-          var rootEl = document.getElementById(HF_ROOT_ID);
-          var accent = getComputedStyle(rootEl).getPropertyValue("--hf-caption-accent").trim();
-          hfColorActive = accent || COLOR_ACTIVE;
-
-          var WORDS = normalizeWords(words);
-          var GROUPS = makeGroups(WORDS);
-          buildCaptions(GROUPS);
-          GROUPS.forEach(function (_, i) {
-            var el = document.getElementById("caption-group-" + i);
-            el.style.width = SAFE_ZONE_WIDTH + "px";
-            el.style.height = stageHeight + "px";
+      function buildCaptions(groups) {
+        var stage = document.getElementById("caption-stage");
+        groups.forEach(function (group, groupIndex) {
+          var groupEl = document.createElement("div");
+          var pillEl = document.createElement("div");
+          var copyEl = document.createElement("div");
+          var fontSize = fontSizeForGroup(group.words);
+          groupEl.id = "caption-group-" + groupIndex;
+          groupEl.className = "caption-group";
+          pillEl.className = "caption-pill";
+          copyEl.className = "caption-copy";
+          copyEl.style.fontSize = fontSize + "px";
+          var indexedWords = group.words.map(function (word, wordIndex) {
+            return { text: word.text, start: word.start, end: word.end, wordIndex: wordIndex };
           });
-
-          var tl = gsap.timeline({ paused: true });
-
-          GROUPS.forEach(function (group, groupIndex) {
-            var groupEl = document.getElementById("caption-group-" + groupIndex);
-            var nextGroup = GROUPS[groupIndex + 1];
-            var isLastGroup = groupIndex === GROUPS.length - 1;
-            var effectiveEnd = isLastGroup
-              ? DURATION
-              : Math.min(nextGroup.start, group.end + GROUP_END_BUFFER);
-            var visibleStart = Math.max(0, group.start);
-            var visibleEnd = Math.max(visibleStart + 0.01, effectiveEnd);
-
-            tl.set(groupEl, { opacity: 1 }, visibleStart);
-            tl.set(groupEl, { opacity: 0 }, visibleEnd);
-
-            group.words.forEach(function (word, wordIndex) {
-              var wordEl = document.getElementById("caption-word-" + groupIndex + "-" + wordIndex);
-              var isFirstWord = wordIndex === 0;
-              var wordStart = Math.max(visibleStart, word.start - WORD_FADE_LEAD);
-              tl.set(wordEl, { color: isFirstWord ? hfColorActive : COLOR_INACTIVE }, visibleStart);
-              if (isFirstWord) return;
-              tl.to(
-                wordEl,
-                { color: hfColorActive, duration: COLOR_FADE_DURATION, ease: "none" },
-                wordStart,
-              );
+          var layout = planPillLayout(indexedWords, fontSize);
+          pillEl.style.width = layout.pillWidth + "px";
+          pillEl.style.paddingLeft = layout.padX + "px";
+          pillEl.style.paddingRight = layout.padX + "px";
+          layout.lines.slice(0, 2).forEach(function (lineWords) {
+            var lineEl = document.createElement("div");
+            lineEl.className = "caption-line";
+            lineWords.forEach(function (word) {
+              var wordEl = document.createElement("span");
+              wordEl.id = "caption-word-" + groupIndex + "-" + word.wordIndex;
+              wordEl.className = "caption-word";
+              wordEl.textContent = word.text.toLowerCase();
+              lineEl.appendChild(wordEl);
             });
+            copyEl.appendChild(lineEl);
           });
+          pillEl.appendChild(copyEl);
+          groupEl.appendChild(pillEl);
+          stage.appendChild(groupEl);
+        });
+      }
 
-          return tl;
-        }
-
-        var hfCurrentTimeline = null;
-
-        function hfAttach(data) {
-          var v = hfValidate(data);
-          if (!v.ok) {
-            hfRunGate([], 0, v.reason);
-            return;
-          }
-          if (hfCurrentTimeline) {
-            hfCurrentTimeline.kill();
-            hfCurrentTimeline = null;
-          }
-          hfTeardown();
-          var layout = hfApplyStageConfig(data, v.durationS);
-          var tl = hfBuild(v.words, layout, v.durationS);
-          tl.set({}, {}, v.durationS); // pin timeline length to the data-derived duration
-          // GSAP quirk (confirmed 3.14.2): a fresh timeline already reports position 0,
-          // so seek(0) is treated as a no-op and skips rendering .set() calls scheduled
-          // at t=0 — the first frame would show pre-timeline CSS defaults (usually
-          // hidden). render(time, suppressEvents, force) with force=true bypasses that.
-          tl.render(0, true, true);
-          hfCurrentTimeline = tl;
-          window.__timelines = window.__timelines || {};
-          window.__timelines[HF_COMPOSITION_ID] = tl;
-          hfRunGate(v.words, v.durationS, null);
-        }
-        window.__HF_CAPTION_ATTACH__ = hfAttach;
+      var WORDS = normalizeWords(TRANSCRIPT);
+      var GROUPS = makeGroups(WORDS);
+      buildCaptions(GROUPS);
+
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+
+      GROUPS.forEach(function (group, groupIndex) {
+        var groupEl = document.getElementById("caption-group-" + groupIndex);
+        var nextGroup = GROUPS[groupIndex + 1];
+        var isLastGroup = groupIndex === GROUPS.length - 1;
+        var effectiveEnd = isLastGroup
+          ? DURATION
+          : Math.min(nextGroup.start, group.end + GROUP_END_BUFFER);
+        var visibleStart = Math.max(0, group.start);
+        var visibleEnd = Math.max(visibleStart + 0.01, effectiveEnd);
+
+        tl.set(groupEl, { opacity: 1 }, visibleStart);
+        tl.set(groupEl, { opacity: 0 }, visibleEnd);
+
+        group.words.forEach(function (word, wordIndex) {
+          var wordEl = document.getElementById("caption-word-" + groupIndex + "-" + wordIndex);
+          var isFirstWord = wordIndex === 0;
+          var wordStart = Math.max(visibleStart, word.start - WORD_FADE_LEAD);
+          tl.set(wordEl, { color: isFirstWord ? COLOR_ACTIVE : COLOR_INACTIVE }, visibleStart);
+          if (isFirstWord) return;
+          tl.to(
+            wordEl,
+            { color: COLOR_ACTIVE, duration: COLOR_FADE_DURATION, ease: "none" },
+            wordStart,
+          );
+        });
+      });
 
-        (function hfBoot() {
-          function start(data) {
-            var ready =
-              document.fonts && document.fonts.ready ? document.fonts.ready : Promise.resolve();
-            ready.then(function () {
-              // A manual window.__HF_CAPTION_ATTACH__ call that lands while the
-              // sibling fetch / fonts.ready are still pending must win — never
-              // clobber it with the late-arriving boot payload.
-              if (hfCurrentTimeline) return;
-              hfAttach(data);
-            });
-          }
-          if (window.__HF_CAPTION__) {
-            start(window.__HF_CAPTION__);
-            return;
-          }
-          fetch("./caption-data.json")
-            .then(function (r) {
-              return r.ok ? r.json() : null;
-            })
-            .catch(function () {
-              return null;
-            })
-            .then(function (json) {
-              start(json || HF_DEMO_DATA);
-            });
-        })();
-      })();
+      window.__timelines["caption-pill-karaoke"] = tl;
     </script>
   </body>
 </html>
diff --git a/registry/components/caption-texture/registry-item.json b/registry/components/caption-texture/registry-item.json
index 8e894255ca..1b9668185a 100644
--- a/registry/components/caption-texture/registry-item.json
+++ b/registry/components/caption-texture/registry-item.json
@@ -3,8 +3,15 @@
   "name": "caption-texture",
   "type": "hyperframes:component",
   "title": "Texture",
-  "description": "Flowing texture mask over large uppercase text — ships with 6 textures (lava, marble, metal, wood, concrete, rock), configurable via the texture variable",
+  "description": "Flowing texture mask over large uppercase text \u2014 ships with 6 textures (lava, marble, metal, wood, concrete, rock), configurable via the texture variable",
   "tags": ["captions", "caption-style", "texture", "mask"],
+  "variables": [
+    {
+      "id": "texture",
+      "type": "string",
+      "default": "lava"
+    }
+  ],
   "files": [
     {
       "path": "caption-texture.html",
diff --git a/registry/components/caption-weight-shift/caption-weight-shift.html b/registry/components/caption-weight-shift/caption-weight-shift.html
index b42c4e59ae..a6f37fe0b7 100644
--- a/registry/components/caption-weight-shift/caption-weight-shift.html
+++ b/registry/components/caption-weight-shift/caption-weight-shift.html
@@ -90,7 +90,7 @@
         max-width: 1400px;
         line-height: 1.1;
         white-space: nowrap;
-        color: var(--hf-caption-primary, #ffffff);
+        color: #ffffff;
         font-family: "Montserrat", Arial, sans-serif;
         font-weight: 300;
         font-size: 72px;
@@ -117,568 +117,281 @@
     </div>
 
     <script>
-      // IIFE: keep every template's runtime private to itself so two caption
-      // components pasted into one composition document can't clobber each
-      // other's hfAttach/hfBuild via shared script-scope names (boot is async,
-      // so collisions surface AFTER all scripts have executed).
-      (function () {
-        var HF_COMPOSITION_ID = "caption-weight-shift";
-        var HF_ROOT_ID = "weight-shift";
-        var HF_GROUP_SELECTOR = ".caption-group";
-
-        var HF_DEMO_DATA = {
-          version: 1,
-          segments: [
-            {
-              start: 0,
-              text: "Every great video starts with a single frame. HyperFrames lets you write HTML and render professional video. No timeline. No drag and drop. Just code that becomes cinema.",
-              words: [
-                { text: "Every", start: 0.0, end: 0.3 },
-                { text: "great", start: 0.3, end: 0.55 },
-                { text: "video", start: 0.55, end: 0.85 },
-                { text: "starts", start: 0.85, end: 1.1 },
-                { text: "with", start: 1.1, end: 1.25 },
-                { text: "a", start: 1.25, end: 1.35 },
-                { text: "single", start: 1.35, end: 1.65 },
-                { text: "frame.", start: 1.65, end: 2.0 },
-                { text: "HyperFrames", start: 2.1, end: 2.65 },
-                { text: "lets", start: 2.65, end: 2.85 },
-                { text: "you", start: 2.85, end: 2.95 },
-                { text: "write", start: 2.95, end: 3.15 },
-                { text: "HTML", start: 3.15, end: 3.55 },
-                { text: "and", start: 3.55, end: 3.65 },
-                { text: "render", start: 3.65, end: 3.95 },
-                { text: "professional", start: 3.95, end: 4.45 },
-                { text: "video.", start: 4.45, end: 4.8 },
-                { text: "No", start: 4.9, end: 5.05 },
-                { text: "timeline.", start: 5.05, end: 5.45 },
-                { text: "No", start: 5.5, end: 5.65 },
-                { text: "drag", start: 5.65, end: 5.85 },
-                { text: "and", start: 5.85, end: 5.95 },
-                { text: "drop.", start: 5.95, end: 6.25 },
-                { text: "Just", start: 6.35, end: 6.55 },
-                { text: "code", start: 6.55, end: 6.8 },
-                { text: "that", start: 6.8, end: 6.95 },
-                { text: "becomes", start: 6.95, end: 7.3 },
-                { text: "cinema.", start: 7.3, end: 7.7 },
-              ],
-            },
-          ],
-        };
-
-        /* ── HyperFrames caption-data runtime (shared across caption templates) ── */
-        var HF_CONTRACT_VERSION = 1;
-        var HF_DEFAULT_RESOLUTION = { width: 1920, height: 1080 };
-
-        function hfFlattenSegments(segments) {
-          var out = [];
-          (segments || []).forEach(function (seg) {
-            ((seg && seg.words) || []).forEach(function (w) {
-              var start = Math.max(0, Number(w.start) || 0);
-              out.push({
-                text: String(w.word || w.text || "").trim(),
-                start: start,
-                end: Math.max(start, Number(w.end) || 0),
-              });
-            });
+      var DURATION = 8;
+      var SAFE_ZONE_WIDTH = 1400;
+      var MAX_LINE_WIDTH = SAFE_ZONE_WIDTH - 40;
+      var CAPTION_FONT_SIZE = 72;
+      var MAX_WORDS_PER_GROUP = 4;
+      var WORD_SPACING = 12;
+      var PAUSE_THRESHOLD = 0.1;
+      var ENTRY_DURATION = 100 / 1000;
+      var WEIGHT_TRANSITION = 100 / 1000;
+      var FONT_WIDTH_SAFETY = 1.14;
+      var FONT_WEIGHT_LIGHT = 300;
+      var FONT_WEIGHT_BOLD = 700;
+
+      var TRANSCRIPT = [
+        { text: "Every", start: 0.0, end: 0.3 },
+        { text: "great", start: 0.3, end: 0.55 },
+        { text: "video", start: 0.55, end: 0.85 },
+        { text: "starts", start: 0.85, end: 1.1 },
+        { text: "with", start: 1.1, end: 1.25 },
+        { text: "a", start: 1.25, end: 1.35 },
+        { text: "single", start: 1.35, end: 1.65 },
+        { text: "frame.", start: 1.65, end: 2.0 },
+        { text: "HyperFrames", start: 2.1, end: 2.65 },
+        { text: "lets", start: 2.65, end: 2.85 },
+        { text: "you", start: 2.85, end: 2.95 },
+        { text: "write", start: 2.95, end: 3.15 },
+        { text: "HTML", start: 3.15, end: 3.55 },
+        { text: "and", start: 3.55, end: 3.65 },
+        { text: "render", start: 3.65, end: 3.95 },
+        { text: "professional", start: 3.95, end: 4.45 },
+        { text: "video.", start: 4.45, end: 4.8 },
+        { text: "No", start: 4.9, end: 5.05 },
+        { text: "timeline.", start: 5.05, end: 5.45 },
+        { text: "No", start: 5.5, end: 5.65 },
+        { text: "drag", start: 5.65, end: 5.85 },
+        { text: "and", start: 5.85, end: 5.95 },
+        { text: "drop.", start: 5.95, end: 6.25 },
+        { text: "Just", start: 6.35, end: 6.55 },
+        { text: "code", start: 6.55, end: 6.8 },
+        { text: "that", start: 6.8, end: 6.95 },
+        { text: "becomes", start: 6.95, end: 7.3 },
+        { text: "cinema.", start: 7.3, end: 7.7 },
+      ];
+
+      function normalizeWords(rawWords) {
+        return rawWords
+          .map(function (item) {
+            return {
+              text: String(item.word || item.text || "").trim(),
+              start: Math.max(0, Number(item.start) || 0),
+              end: Math.min(DURATION, Math.max(Number(item.start) || 0, Number(item.end) || 0)),
+            };
+          })
+          .filter(function (word) {
+            return word.text.length > 0;
           });
-          out.sort(function (a, b) {
-            return a.start - b.start;
-          });
-          return out.filter(function (w) {
-            return w.text.length > 0;
-          });
-        }
+      }
 
-        function hfDeriveDuration(words) {
-          var end = 0;
-          words.forEach(function (w) {
-            if (w.end > end) end = w.end;
-          });
-          return end;
+      var _fitCanvas = document.createElement("canvas");
+      var _fitCtx = _fitCanvas.getContext("2d");
+      function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {
+        var size = baseFontSize;
+        var minSize = Math.floor(baseFontSize * 0.45);
+        while (size > minSize) {
+          _fitCtx.font = fontWeight + " " + size + "px " + fontFamily;
+          if (_fitCtx.measureText(text).width <= maxWidth) return size;
+          size -= 2;
         }
+        return minSize;
+      }
 
-        function hfValidate(data) {
-          if (!data || typeof data !== "object") return { ok: false, reason: "not-an-object" };
-          if (data.version != null) {
-            // Number("v2") is NaN and NaN > x is always false — an explicit
-            // finite check keeps malformed versions from slipping past the gate.
-            var hfVersion = Number(data.version);
-            if (!Number.isFinite(hfVersion) || Math.floor(hfVersion) > HF_CONTRACT_VERSION) {
-              return { ok: false, reason: "unsupported-version" };
-            }
-          }
-          if (!Array.isArray(data.segments) || data.segments.length === 0) {
-            return { ok: false, reason: "no-segments" };
-          }
-          if (data.displayMode != null && data.displayMode !== "full") {
-            return { ok: false, reason: "unsupported-displayMode" };
-          }
-          var words = hfFlattenSegments(data.segments);
-          if (words.length === 0) return { ok: false, reason: "no-words" };
-          return { ok: true, words: words, durationS: hfDeriveDuration(words) };
-        }
+      var measureCanvas = document.createElement("canvas");
+      var measureContext = measureCanvas.getContext("2d");
+      measureContext.font = "700 " + CAPTION_FONT_SIZE + "px Montserrat";
 
-        function hfApplyStageConfig(data, durationS) {
-          var res = (data && data.resolution) || HF_DEFAULT_RESOLUTION;
-          // Mirror the published validator's <=8192 bound defensively — the
-          // validator is an optional pre-flight, and an unbounded stage size
-          // would OOM render workers.
-          var W = Math.min(
-            8192,
-            Math.max(1, Math.round(Number(res.width) || HF_DEFAULT_RESOLUTION.width)),
-          );
-          var H = Math.min(
-            8192,
-            Math.max(1, Math.round(Number(res.height) || HF_DEFAULT_RESOLUTION.height)),
-          );
-          var root = document.getElementById(HF_ROOT_ID);
-          [document.documentElement, document.body, root].forEach(function (el) {
-            el.style.width = W + "px";
-            el.style.height = H + "px";
-          });
-          root.setAttribute("data-width", String(W));
-          root.setAttribute("data-height", String(H));
-          root.setAttribute("data-duration", String(durationS));
-          var brand = (data && data.brand) || {};
-          if (typeof brand.primaryColor === "string" && brand.primaryColor) {
-            root.style.setProperty("--hf-caption-primary", brand.primaryColor);
-          } else {
-            root.style.removeProperty("--hf-caption-primary");
-          }
-          if (typeof brand.accentColor === "string" && brand.accentColor) {
-            root.style.setProperty("--hf-caption-accent", brand.accentColor);
-          } else {
-            root.style.removeProperty("--hf-caption-accent");
-          }
-          return {
-            W: W,
-            H: H,
-            scaleX: W / 1920,
-            scaleY: H / 1080,
-            fontScale: Math.min(W, H) / 1080,
-          };
-        }
+      function measureWord(word) {
+        return measureContext.measureText(word.text.toLowerCase()).width * FONT_WIDTH_SAFETY;
+      }
 
-        function hfPublishStatus(status) {
-          window.__HF_CAPTION_STATUS = status;
-          document
-            .getElementById(HF_ROOT_ID)
-            .setAttribute("data-caption-status", status.ok ? "ok" : "failed");
-        }
+      function measureLineWidth(words) {
+        return words.reduce(function (total, word, index) {
+          return total + measureWord(word) + (index ? WORD_SPACING : 0);
+        }, 0);
+      }
 
-        function hfRunGate(words, durationS, failReason) {
-          if (failReason) {
-            hfPublishStatus({
-              ok: false,
-              present: false,
-              contained: false,
-              reason: failReason,
-              version: HF_CONTRACT_VERSION,
-              durationS: durationS || 0,
-            });
-            return;
-          }
-          var root = document.getElementById(HF_ROOT_ID);
-          var rootRect = root.getBoundingClientRect();
-          var groups = root.querySelectorAll(HF_GROUP_SELECTOR);
-          var present = false;
-          var contained = true;
-          var tokens = [];
-          words.forEach(function (w) {
-            var t = w.text.toLowerCase().replace(/[^a-z0-9]/g, "");
-            if (t) tokens.push(t);
-          });
-          groups.forEach(function (el) {
-            var prevOpacity = el.style.opacity;
-            var prevVisibility = el.style.visibility;
-            el.style.opacity = "1";
-            el.style.visibility = "visible";
-            var r = el.getBoundingClientRect();
-            if (r.width > 0 && r.height > 0) {
-              var text = (el.textContent || "").toLowerCase();
-              for (var i = 0; i < tokens.length; i++) {
-                if (text.indexOf(tokens[i]) !== -1) {
-                  present = true;
-                  break;
-                }
-              }
-              if (
-                r.left < rootRect.left - 1 ||
-                r.right > rootRect.right + 1 ||
-                r.top < rootRect.top - 1 ||
-                r.bottom > rootRect.bottom + 1
-              ) {
-                contained = false;
-              }
-            }
-            el.style.opacity = prevOpacity;
-            el.style.visibility = prevVisibility;
-          });
-          hfPublishStatus({
-            ok: present && contained,
-            present: present,
-            contained: contained,
-            version: HF_CONTRACT_VERSION,
-            durationS: durationS,
-          });
-        }
+      function fitsInTwoLines(words) {
+        return measureLineWidth(words) <= MAX_LINE_WIDTH * 1.8;
+      }
 
-        var SAFE_ZONE_WIDTH, MAX_LINE_WIDTH, CAPTION_FONT_SIZE, DURATION;
-        var MAX_WORDS_PER_GROUP = 4;
-        var WORD_SPACING_DESIGN = 12;
-        var WORD_SPACING;
-        var PAUSE_THRESHOLD = 0.1;
-        var ENTRY_DURATION = 100 / 1000;
-        var WEIGHT_TRANSITION = 100 / 1000;
-        var FONT_WIDTH_SAFETY = 1.14;
-        var FONT_WEIGHT_LIGHT = 300;
-        var FONT_WEIGHT_BOLD = 700;
-
-        function normalizeWords(rawWords) {
-          return rawWords
-            .map(function (item) {
-              return {
-                text: String(item.word || item.text || "").trim(),
-                start: Math.max(0, Number(item.start) || 0),
-                end: Math.min(DURATION, Math.max(Number(item.start) || 0, Number(item.end) || 0)),
-              };
-            })
-            .filter(function (word) {
-              return word.text.length > 0;
-            });
+      function splitLines(words) {
+        if (words.length < 2) {
+          return [{ words: words, startIndex: 0 }];
         }
-
-        var _fitCanvas = document.createElement("canvas");
-        var _fitCtx = _fitCanvas.getContext("2d");
-        function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {
-          var size = baseFontSize;
-          var minSize = Math.floor(baseFontSize * 0.45);
-          // minSize is a hard floor returned unverified below — self-heal
-          // accepts residual overflow at the floor (clipped by the stage)
-          // rather than shrinking below legibility.
-          while (size > minSize) {
-            _fitCtx.font = fontWeight + " " + size + "px " + fontFamily;
-            if (_fitCtx.measureText(text).width <= maxWidth) return size;
-            size -= 2;
+        var bestSplit = Math.ceil(words.length / 2);
+        var bestDiff = Infinity;
+        for (var s = 1; s < words.length; s++) {
+          var w1 = measureLineWidth(words.slice(0, s));
+          var w2 = measureLineWidth(words.slice(s));
+          if (w1 <= MAX_LINE_WIDTH && w2 <= MAX_LINE_WIDTH) {
+            var diff = Math.abs(w1 - w2);
+            if (diff < bestDiff) {
+              bestDiff = diff;
+              bestSplit = s;
+            }
           }
-          return minSize;
-        }
-
-        var measureCanvas = document.createElement("canvas");
-        var measureContext = measureCanvas.getContext("2d");
-
-        function measureWord(word) {
-          return measureContext.measureText(word.text.toLowerCase()).width * FONT_WIDTH_SAFETY;
-        }
-
-        function measureLineWidth(words) {
-          return words.reduce(function (total, word, index) {
-            return total + measureWord(word) + (index ? WORD_SPACING : 0);
-          }, 0);
-        }
-
-        function fitsInTwoLines(words) {
-          return measureLineWidth(words) <= MAX_LINE_WIDTH * 1.8;
         }
+        var result = [];
+        var line1 = words.slice(0, bestSplit);
+        var line2 = words.slice(bestSplit);
+        if (line1.length) result.push({ words: line1, startIndex: 0 });
+        if (line2.length) result.push({ words: line2, startIndex: line1.length });
+        return result;
+      }
 
-        function splitLines(words) {
-          if (words.length < 2) {
-            return [{ words: words, startIndex: 0 }];
+      function avoidSingleWordGroups(groups) {
+        var out = [];
+        groups.forEach(function (group) {
+          if (
+            group.words.length === 1 &&
+            out.length > 0 &&
+            out[out.length - 1].words.length < MAX_WORDS_PER_GROUP
+          ) {
+            out[out.length - 1] = makeGroup(out[out.length - 1].words.concat(group.words));
+          } else {
+            out.push(group);
           }
-          var bestSplit = Math.ceil(words.length / 2);
-          var bestDiff = Infinity;
-          for (var s = 1; s < words.length; s++) {
-            var w1 = measureLineWidth(words.slice(0, s));
-            var w2 = measureLineWidth(words.slice(s));
-            if (w1 <= MAX_LINE_WIDTH && w2 <= MAX_LINE_WIDTH) {
-              var diff = Math.abs(w1 - w2);
-              if (diff < bestDiff) {
-                bestDiff = diff;
-                bestSplit = s;
-              }
-            }
+        });
+
+        for (var i = 0; i < out.length; i++) {
+          if (out[i].words.length !== 1) continue;
+          if (i + 1 < out.length && out[i + 1].words.length < MAX_WORDS_PER_GROUP) {
+            out[i] = makeGroup(out[i].words.concat(out[i + 1].words));
+            out.splice(i + 1, 1);
+          } else if (i > 0 && out[i - 1].words.length < MAX_WORDS_PER_GROUP) {
+            out[i - 1] = makeGroup(out[i - 1].words.concat(out[i].words));
+            out.splice(i, 1);
+            i--;
           }
-          var result = [];
-          var line1 = words.slice(0, bestSplit);
-          var line2 = words.slice(bestSplit);
-          if (line1.length) result.push({ words: line1, startIndex: 0 });
-          if (line2.length) result.push({ words: line2, startIndex: line1.length });
-          return result;
         }
 
-        function avoidSingleWordGroups(groups) {
-          var out = [];
-          groups.forEach(function (group) {
-            if (
-              group.words.length === 1 &&
-              out.length > 0 &&
-              out[out.length - 1].words.length < MAX_WORDS_PER_GROUP &&
-              // makeGroups guards every addition with fitsInTwoLines; this
-              // second-pass merge must too, or it can produce a group that
-              // splitLines cannot fit within MAX_LINE_WIDTH.
-              fitsInTwoLines(out[out.length - 1].words.concat(group.words))
-            ) {
-              out[out.length - 1] = makeGroup(out[out.length - 1].words.concat(group.words));
-            } else {
-              out.push(group);
-            }
-          });
+        return out;
+      }
 
-          for (var i = 0; i < out.length; i++) {
-            if (out[i].words.length !== 1) continue;
-            if (
-              i + 1 < out.length &&
-              out[i + 1].words.length < MAX_WORDS_PER_GROUP &&
-              fitsInTwoLines(out[i].words.concat(out[i + 1].words))
-            ) {
-              out[i] = makeGroup(out[i].words.concat(out[i + 1].words));
-              out.splice(i + 1, 1);
-            } else if (
-              i > 0 &&
-              out[i - 1].words.length < MAX_WORDS_PER_GROUP &&
-              fitsInTwoLines(out[i - 1].words.concat(out[i].words))
-            ) {
-              out[i - 1] = makeGroup(out[i - 1].words.concat(out[i].words));
-              out.splice(i, 1);
-              i--;
-            }
+      function makeGroups(words) {
+        var groups = [];
+        var current = [];
+        words.forEach(function (word, index) {
+          var nextWord = words[index + 1];
+          var testGroup = current.concat([word]);
+          if (testGroup.length > MAX_WORDS_PER_GROUP || !fitsInTwoLines(testGroup)) {
+            if (current.length) groups.push(makeGroup(current));
+            current = [word];
+            return;
           }
+          current.push(word);
+          var punctuation = /[,.:!?]$/.test(word.text);
+          var pause = nextWord ? nextWord.start - word.end : 0;
+          if (
+            !nextWord ||
+            punctuation ||
+            pause >= PAUSE_THRESHOLD ||
+            current.length >= MAX_WORDS_PER_GROUP
+          ) {
+            groups.push(makeGroup(current));
+            current = [];
+          }
+        });
+        if (current.length) groups.push(makeGroup(current));
+        return avoidSingleWordGroups(groups);
+      }
 
-          return out;
-        }
-
-        function makeGroups(words) {
-          var groups = [];
-          var current = [];
-          words.forEach(function (word, index) {
-            var nextWord = words[index + 1];
-            var testGroup = current.concat([word]);
-            if (testGroup.length > MAX_WORDS_PER_GROUP || !fitsInTwoLines(testGroup)) {
-              if (current.length) groups.push(makeGroup(current));
-              current = [word];
-              return;
-            }
-            current.push(word);
-            var punctuation = /[,.:!?]$/.test(word.text);
-            var pause = nextWord ? nextWord.start - word.end : 0;
-            if (
-              !nextWord ||
-              punctuation ||
-              pause >= PAUSE_THRESHOLD ||
-              current.length >= MAX_WORDS_PER_GROUP
-            ) {
-              groups.push(makeGroup(current));
-              current = [];
-            }
-          });
-          if (current.length) groups.push(makeGroup(current));
-          return avoidSingleWordGroups(groups);
-        }
-
-        function makeGroup(words) {
-          return {
-            words: words.slice(),
-            lines: splitLines(words),
-            start: words[0].start,
-            end: words[words.length - 1].end,
-          };
-        }
+      function makeGroup(words) {
+        return {
+          words: words.slice(),
+          lines: splitLines(words),
+          start: words[0].start,
+          end: words[words.length - 1].end,
+        };
+      }
 
-        function buildCaptions(groups) {
-          var stage = document.getElementById("caption-stage");
-          groups.forEach(function (group, groupIndex) {
-            // Fit the WIDEST split line, not the joined group text: the group
-            // renders across up to two lines, so sizing against the joined
-            // string shrank two-line groups that already fit at full size.
-            var widestLineText = "";
-            var widestLineWidth = -1;
-            group.lines.forEach(function (line) {
-              var lineWidth = measureLineWidth(line.words);
-              if (lineWidth > widestLineWidth) {
-                widestLineWidth = lineWidth;
-                widestLineText = line.words
-                  .map(function (w) {
-                    return w.text.toLowerCase();
-                  })
-                  .join(" ");
-              }
-            });
-            var computedSize = fitFontSize(
-              widestLineText,
-              CAPTION_FONT_SIZE,
-              "700",
-              "Montserrat",
-              MAX_LINE_WIDTH,
-            );
-            var groupEl = document.createElement("div");
-            var copyEl = document.createElement("div");
-            groupEl.id = "caption-group-" + groupIndex;
-            groupEl.className = "caption-group";
-            copyEl.className = "caption-copy";
-            group.lines.forEach(function (line, lineIndex) {
-              var lineEl = document.createElement("div");
-              lineEl.className = "caption-line";
-              lineEl.id = "caption-group-" + groupIndex + "-line-" + lineIndex;
-              lineEl.style.fontWeight = lineIndex === 0 ? FONT_WEIGHT_BOLD : FONT_WEIGHT_LIGHT;
-              lineEl.style.fontSize = computedSize + "px";
-              lineEl.style.maxWidth = SAFE_ZONE_WIDTH + "px";
-              line.words.forEach(function (word, wordIndex) {
-                var wordEl = document.createElement("span");
-                wordEl.textContent = word.text.toLowerCase();
-                wordEl.style.display = "inline-block";
-                lineEl.appendChild(wordEl);
-              });
-              copyEl.appendChild(lineEl);
+      function buildCaptions(groups) {
+        var stage = document.getElementById("caption-stage");
+        groups.forEach(function (group, groupIndex) {
+          var groupText = group.words
+            .map(function (w) {
+              return w.text.toLowerCase();
+            })
+            .join(" ");
+          var computedSize = fitFontSize(
+            groupText,
+            CAPTION_FONT_SIZE,
+            "700",
+            "Montserrat",
+            MAX_LINE_WIDTH,
+          );
+          var groupEl = document.createElement("div");
+          var copyEl = document.createElement("div");
+          groupEl.id = "caption-group-" + groupIndex;
+          groupEl.className = "caption-group";
+          copyEl.className = "caption-copy";
+          group.lines.forEach(function (line, lineIndex) {
+            var lineEl = document.createElement("div");
+            lineEl.className = "caption-line";
+            lineEl.id = "caption-group-" + groupIndex + "-line-" + lineIndex;
+            lineEl.style.fontWeight = lineIndex === 0 ? FONT_WEIGHT_BOLD : FONT_WEIGHT_LIGHT;
+            lineEl.style.fontSize = computedSize + "px";
+            line.words.forEach(function (word, wordIndex) {
+              var wordEl = document.createElement("span");
+              wordEl.textContent = word.text.toLowerCase();
+              wordEl.style.display = "inline-block";
+              lineEl.appendChild(wordEl);
             });
-            groupEl.appendChild(copyEl);
-            stage.appendChild(groupEl);
-          });
-        }
-
-        function hfTeardown() {
-          document.getElementById("caption-stage").innerHTML = "";
-        }
-
-        function hfBuild(words, layout, durationS) {
-          DURATION = durationS;
-          CAPTION_FONT_SIZE = Math.round(72 * layout.fontScale);
-          SAFE_ZONE_WIDTH = Math.round(1400 * layout.scaleX);
-          MAX_LINE_WIDTH = SAFE_ZONE_WIDTH - Math.round(40 * layout.scaleX);
-          WORD_SPACING = Math.round(WORD_SPACING_DESIGN * layout.fontScale);
-
-          var stage = document.getElementById("caption-stage");
-          var stageHeight = Math.round(278 * layout.fontScale);
-          stage.style.width = SAFE_ZONE_WIDTH + "px";
-          stage.style.height = stageHeight + "px";
-          stage.style.bottom = Math.round(100 * layout.scaleY) + "px";
-
-          measureContext.font = "700 " + CAPTION_FONT_SIZE + "px Montserrat";
-
-          var WORDS = normalizeWords(words);
-          var GROUPS = makeGroups(WORDS);
-          buildCaptions(GROUPS);
-          // set per-group sizing to match the runtime stage
-          GROUPS.forEach(function (_, i) {
-            var el = document.getElementById("caption-group-" + i);
-            el.style.width = SAFE_ZONE_WIDTH + "px";
-            el.style.height = stageHeight + "px";
-          });
-
-          var tl = gsap.timeline({ paused: true });
-
-          var visibleStarts = GROUPS.map(function (group, groupIndex) {
-            var prev = GROUPS[groupIndex - 1];
-            var availableGap = prev ? Math.max(0, group.start - prev.end) : ENTRY_DURATION;
-            var entryLead = Math.min(ENTRY_DURATION, availableGap);
-            return Math.max(0, group.start - entryLead);
-          });
-
-          var allGroupEls = GROUPS.map(function (_, i) {
-            return document.getElementById("caption-group-" + i);
-          });
-
-          GROUPS.forEach(function (group, groupIndex) {
-            var groupEl = allGroupEls[groupIndex];
-            var visibleStart = visibleStarts[groupIndex];
-            var visibleEnd =
-              groupIndex < GROUPS.length - 1 ? visibleStarts[groupIndex + 1] : DURATION;
-
-            // Each group already owns its full opacity lifecycle (set 0 at its
-            // own visibleStart, animated to 1, then set back to 0 at its own
-            // visibleEnd below), and groups occupy non-overlapping windows, so
-            // explicitly hiding every OTHER group here was redundant and made
-            // timeline construction O(groups^2) — this collapsed under dense
-            // stress transcripts (many short groups). Removed; behavior is
-            // unchanged (verified against templates.test.ts).
-
-            tl.set(groupEl, { opacity: 0, scale: 0.85 }, visibleStart);
-            tl.to(
-              groupEl,
-              { opacity: 1, scale: 1, duration: ENTRY_DURATION, ease: "power3.out", force3D: true },
-              visibleStart,
-            );
-
-            if (group.lines.length === 2) {
-              var line1El = document.getElementById("caption-group-" + groupIndex + "-line-0");
-              var line2El = document.getElementById("caption-group-" + groupIndex + "-line-1");
-              var line2FirstWord = group.lines[1].words[0];
-              var switchTime = line2FirstWord.start;
-
-              tl.to(
-                line1El,
-                { fontWeight: FONT_WEIGHT_LIGHT, duration: WEIGHT_TRANSITION, ease: "power2.out" },
-                switchTime,
-              );
-              tl.to(
-                line2El,
-                { fontWeight: FONT_WEIGHT_BOLD, duration: WEIGHT_TRANSITION, ease: "power2.out" },
-                switchTime,
-              );
-            }
-
-            tl.set(groupEl, { opacity: 0 }, visibleEnd);
+            copyEl.appendChild(lineEl);
           });
+          groupEl.appendChild(copyEl);
+          stage.appendChild(groupEl);
+        });
+      }
 
-          return tl;
+      var WORDS = normalizeWords(TRANSCRIPT);
+      var GROUPS = makeGroups(WORDS);
+      buildCaptions(GROUPS);
+
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+
+      var visibleStarts = GROUPS.map(function (group, groupIndex) {
+        var prev = GROUPS[groupIndex - 1];
+        var availableGap = prev ? Math.max(0, group.start - prev.end) : ENTRY_DURATION;
+        var entryLead = Math.min(ENTRY_DURATION, availableGap);
+        return Math.max(0, group.start - entryLead);
+      });
+
+      var allGroupEls = GROUPS.map(function (_, i) {
+        return document.getElementById("caption-group-" + i);
+      });
+
+      GROUPS.forEach(function (group, groupIndex) {
+        var groupEl = allGroupEls[groupIndex];
+        var visibleStart = visibleStarts[groupIndex];
+        var visibleEnd = groupIndex < GROUPS.length - 1 ? visibleStarts[groupIndex + 1] : DURATION;
+
+        allGroupEls.forEach(function (otherEl, otherIndex) {
+          if (otherIndex !== groupIndex) tl.set(otherEl, { opacity: 0 }, visibleStart);
+        });
+
+        tl.set(groupEl, { opacity: 0, scale: 0.85 }, visibleStart);
+        tl.to(
+          groupEl,
+          { opacity: 1, scale: 1, duration: ENTRY_DURATION, ease: "power3.out", force3D: true },
+          visibleStart,
+        );
+
+        if (group.lines.length === 2) {
+          var line1El = document.getElementById("caption-group-" + groupIndex + "-line-0");
+          var line2El = document.getElementById("caption-group-" + groupIndex + "-line-1");
+          var line2FirstWord = group.lines[1].words[0];
+          var switchTime = line2FirstWord.start;
+
+          tl.to(
+            line1El,
+            { fontWeight: FONT_WEIGHT_LIGHT, duration: WEIGHT_TRANSITION, ease: "power2.out" },
+            switchTime,
+          );
+          tl.to(
+            line2El,
+            { fontWeight: FONT_WEIGHT_BOLD, duration: WEIGHT_TRANSITION, ease: "power2.out" },
+            switchTime,
+          );
         }
 
-        var hfCurrentTimeline = null;
+        tl.set(groupEl, { opacity: 0 }, visibleEnd);
+      });
 
-        function hfAttach(data) {
-          var v = hfValidate(data);
-          if (!v.ok) {
-            hfRunGate([], 0, v.reason);
-            return;
-          }
-          if (hfCurrentTimeline) {
-            hfCurrentTimeline.kill();
-            hfCurrentTimeline = null;
-          }
-          hfTeardown();
-          var layout = hfApplyStageConfig(data, v.durationS);
-          var tl = hfBuild(v.words, layout, v.durationS);
-          tl.set({}, {}, v.durationS); // pin timeline length to the data-derived duration
-          // GSAP quirk (confirmed 3.14.2): a fresh timeline already reports position 0,
-          // so seek(0) is treated as a no-op and skips rendering .set() calls scheduled
-          // at t=0 — the first frame would show pre-timeline CSS defaults (usually
-          // hidden). render(time, suppressEvents, force) with force=true bypasses that.
-          tl.render(0, true, true);
-          hfCurrentTimeline = tl;
-          window.__timelines = window.__timelines || {};
-          window.__timelines[HF_COMPOSITION_ID] = tl;
-          hfRunGate(v.words, v.durationS, null);
-        }
-        window.__HF_CAPTION_ATTACH__ = hfAttach;
-
-        (function hfBoot() {
-          function start(data) {
-            var ready =
-              document.fonts && document.fonts.ready ? document.fonts.ready : Promise.resolve();
-            ready.then(function () {
-              // A manual window.__HF_CAPTION_ATTACH__ call that lands while the
-              // sibling fetch / fonts.ready are still pending must win — never
-              // clobber it with the late-arriving boot payload.
-              if (hfCurrentTimeline) return;
-              hfAttach(data);
-            });
-          }
-          if (window.__HF_CAPTION__) {
-            start(window.__HF_CAPTION__);
-            return;
-          }
-          fetch("./caption-data.json")
-            .then(function (r) {
-              return r.ok ? r.json() : null;
-            })
-            .catch(function () {
-              return null;
-            })
-            .then(function (json) {
-              start(json || HF_DEMO_DATA);
-            });
-        })();
-      })();
+      window.__timelines["caption-weight-shift"] = tl;
     </script>
   </body>
 </html>
diff --git a/registry/components/card-resize/card-resize.html b/registry/components/card-resize/card-resize.html
new file mode 100644
index 0000000000..f5437aa97c
--- /dev/null
+++ b/registry/components/card-resize/card-resize.html
@@ -0,0 +1,176 @@
+<!--
+  Card Resize - transitions.dev-inspired primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Use the timeline
+  integration note at the bottom as the starting point for deterministic GSAP
+  animation.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result as a custom property
+  the CSS above consumes. The timeline recipe is untouched by them: it keeps
+  driving the same width, height and fade, and these decide how the card that
+  expands is dressed.
+
+    - surface (paper | ink, default paper): the card colour scheme. paper is
+      the original white card with near-black type, ink is a dark card with
+      light type for dark frames.
+    - accent (ocean | forest | ember, default ocean): the treatment of the media
+      thumbnail. ocean is a plain plate, forest adds a fine achromatic hatch,
+      ember adds a horizon-and-disc glyph so the plate reads as a photo. All
+      three are built from the surface's own ink at fixed alphas, so the
+      thumbnail carries no hue on either surface. The three value names are
+      inherited from the hue families they used to paint and no longer describe
+      what they render; renaming them is a separate, breaking change.
+    - elevation (flat | raised | floating, default raised): how far the card
+      lifts off the frame, from a tight contact shadow to a deep drop.
+
+  On every default the result is a white card with a quiet ink-tinted thumbnail
+  plate under a soft wide drop shadow. Layout, sizing and motion are unchanged.
+-->
+
+<div
+  class="hf-transition-card-resize"
+  data-composition-variables='[
+    { "id": "surface", "type": "enum", "role": "style", "label": "Surface", "description": "Card colour scheme: paper is the original white card, ink is a dark card for dark frames.", "default": "paper", "options": [{ "value": "paper", "label": "Paper" }, { "value": "ink", "label": "Ink" }] },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Treatment of the media thumbnail: a plain plate, a hatched surface, or an image plate with a horizon-and-disc glyph.", "default": "ocean", "options": [{ "value": "ocean", "label": "Ocean" }, { "value": "forest", "label": "Forest" }, { "value": "ember", "label": "Ember" }] },
+    { "id": "elevation", "type": "enum", "role": "style", "label": "Elevation", "description": "How far the card lifts off the frame, from a contact shadow to a deep drop.", "default": "raised", "options": [{ "value": "flat", "label": "Flat" }, { "value": "raised", "label": "Raised" }, { "value": "floating", "label": "Floating" }] }
+  ]'
+>
+  <div class="hf-transition-card-media"></div>
+  <div class="hf-transition-card-copy">
+    <span>Project status</span>
+    <strong>Ready to render</strong>
+    <p>All scenes validated and queued for export.</p>
+  </div>
+</div>
+
+<style>
+  .hf-transition-card-resize {
+    --hf-card-w: 330px;
+    --hf-card-h: 132px;
+    /* Placeholder ramp: the surface's own ink at fixed alphas, so the media
+       plate inverts with the surface instead of needing a second palette. */
+    --hf-card-l2: rgba(24, 24, 27, 0.45);
+    --hf-card-l3: rgba(24, 24, 27, 0.18);
+    --hf-card-hair: rgba(24, 24, 27, 0.14);
+    display: grid;
+    grid-template-columns: 92px 1fr;
+    gap: 18px;
+    width: var(--hf-card-w);
+    height: var(--hf-card-h);
+    padding: 18px;
+    overflow: hidden;
+    border: 1px solid var(--hf-card-border, #e4e4e7);
+    border-radius: 26px;
+    background: var(--hf-card-bg, #ffffff);
+    color: var(--hf-card-ink, #18181b);
+    font-family: Inter, system-ui, sans-serif;
+    box-shadow: var(--hf-card-shadow, 0 26px 80px rgba(0, 0, 0, 0.12));
+    will-change: width, height, transform;
+  }
+  .hf-transition-card-media {
+    width: 92px;
+    height: 92px;
+    border-radius: 20px;
+    background: var(--hf-card-media, var(--hf-card-l3));
+    box-shadow: inset 0 0 0 1px var(--hf-card-hair);
+  }
+  .hf-transition-card-copy {
+    display: grid;
+    align-content: center;
+    gap: 7px;
+    min-width: 0;
+  }
+  .hf-transition-card-copy span {
+    color: var(--hf-card-muted, #71717a);
+    font-size: 13px;
+    font-weight: 850;
+    text-transform: uppercase;
+  }
+  .hf-transition-card-copy strong {
+    white-space: nowrap;
+    font-size: 22px;
+    letter-spacing: -0.01em;
+  }
+  .hf-transition-card-copy p {
+    margin: 0;
+    color: var(--hf-card-muted, #71717a);
+    font-size: 15px;
+    line-height: 1.45;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var surfaces = {
+      paper: {
+        bg: "#ffffff",
+        ink: "#18181b",
+        muted: "#71717a",
+        border: "#e4e4e7",
+        l2: "rgba(24, 24, 27, 0.45)",
+        l3: "rgba(24, 24, 27, 0.18)",
+        hair: "rgba(24, 24, 27, 0.14)",
+      },
+      ink: {
+        bg: "#16161a",
+        ink: "#fafafa",
+        muted: "#a1a1aa",
+        border: "#2f2f37",
+        l2: "rgba(250, 250, 250, 0.45)",
+        l3: "rgba(250, 250, 250, 0.18)",
+        hair: "rgba(250, 250, 250, 0.14)",
+      },
+    };
+    // Media treatments, not hue families: the plate itself, the plate hatched,
+    // and the plate with a horizon-and-disc glyph that reads as a photo. Each
+    // one is written in the surface's own ink ramp, so both surfaces work.
+    var medias = {
+      ocean: "var(--hf-card-l3)",
+      forest:
+        "repeating-linear-gradient(135deg, var(--hf-card-hair) 0 2px, transparent 2px 4px), var(--hf-card-l3)",
+      ember:
+        "radial-gradient(circle 11px at 64px 28px, var(--hf-card-l2) 0 100%, transparent 100%), linear-gradient(to top, var(--hf-card-l2) 0 24px, transparent 24px), var(--hf-card-l3)",
+    };
+    var shadows = {
+      flat: "0 2px 10px rgba(0, 0, 0, 0.1)",
+      raised: "0 26px 80px rgba(0, 0, 0, 0.12)",
+      floating: "0 46px 120px rgba(0, 0, 0, 0.3)",
+    };
+
+    var surface = surfaces[pick(surfaces, vars.surface, "paper")];
+    var media = medias[pick(medias, vars.accent, "ocean")];
+    var shadow = shadows[pick(shadows, vars.elevation, "raised")];
+
+    var roots = document.querySelectorAll(".hf-transition-card-resize");
+    for (var i = 0; i < roots.length; i += 1) {
+      roots[i].style.setProperty("--hf-card-bg", surface.bg);
+      roots[i].style.setProperty("--hf-card-ink", surface.ink);
+      roots[i].style.setProperty("--hf-card-muted", surface.muted);
+      roots[i].style.setProperty("--hf-card-border", surface.border);
+      roots[i].style.setProperty("--hf-card-l2", surface.l2);
+      roots[i].style.setProperty("--hf-card-l3", surface.l3);
+      roots[i].style.setProperty("--hf-card-hair", surface.hair);
+      roots[i].style.setProperty("--hf-card-media", media);
+      roots[i].style.setProperty("--hf-card-shadow", shadow);
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-transition-card-resize', { '--hf-card-w': '330px', '--hf-card-h': '132px', opacity: 0, y: 24 }, { '--hf-card-w': '560px', '--hf-card-h': '210px', opacity: 1, y: 0, duration: 0.68, ease: 'power3.inOut' }, 0.35);
+  tl.fromTo('.hf-transition-card-copy p', { opacity: 0, y: 12 }, { opacity: 1, y: 0, duration: 0.28, ease: 'power2.out' }, 0.82);
+-->
diff --git a/registry/components/card-resize/demo.html b/registry/components/card-resize/demo.html
new file mode 100644
index 0000000000..b6dbcca087
--- /dev/null
+++ b/registry/components/card-resize/demo.html
@@ -0,0 +1,133 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Card Resize - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #fafafa;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        min-width: 760px;
+        min-height: 480px;
+        padding: 56px;
+        /* ponytail: scale wrapper (not GSAP target) to fill ~60% of 1920px frame */
+        transform: scale(2);
+        transform-origin: center center;
+      }
+      .hf-transition-card-resize {
+        --hf-card-w: 330px;
+        --hf-card-h: 132px;
+        display: grid;
+        grid-template-columns: 92px 1fr;
+        gap: 18px;
+        width: var(--hf-card-w);
+        height: var(--hf-card-h);
+        padding: 18px;
+        overflow: hidden;
+        border: 1px solid #e4e4e7;
+        border-radius: 26px;
+        background: #ffffff;
+        color: #18181b;
+        font-family: Inter, system-ui, sans-serif;
+        box-shadow: 0 26px 80px rgba(0, 0, 0, 0.12);
+        will-change: width, height, transform;
+      }
+      .hf-transition-card-media {
+        width: 92px;
+        height: 92px;
+        border-radius: 20px;
+        background: rgba(24, 24, 27, 0.18);
+        box-shadow: inset 0 0 0 1px rgba(24, 24, 27, 0.14);
+      }
+      .hf-transition-card-copy {
+        display: grid;
+        align-content: center;
+        gap: 7px;
+        min-width: 0;
+      }
+      .hf-transition-card-copy span {
+        color: #71717a;
+        font-size: 13px;
+        font-weight: 850;
+        text-transform: uppercase;
+      }
+      .hf-transition-card-copy strong {
+        white-space: nowrap;
+        font-size: 22px;
+        letter-spacing: -0.01em;
+      }
+      .hf-transition-card-copy p {
+        margin: 0;
+        color: #71717a;
+        font-size: 15px;
+        line-height: 1.45;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="card-resize-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-transition-card-resize">
+          <div class="hf-transition-card-media"></div>
+          <div class="hf-transition-card-copy">
+            <span>Project status</span>
+            <strong>Ready to render</strong>
+            <p>All scenes validated and queued for export.</p>
+          </div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        tl.fromTo(
+          ".hf-transition-card-resize",
+          { "--hf-card-w": "330px", "--hf-card-h": "132px", opacity: 0, y: 24 },
+          {
+            "--hf-card-w": "560px",
+            "--hf-card-h": "210px",
+            opacity: 1,
+            y: 0,
+            duration: 0.68,
+            ease: "power3.inOut",
+          },
+          0.35,
+        );
+        tl.fromTo(
+          ".hf-transition-card-copy p",
+          { opacity: 0, y: 12 },
+          { opacity: 1, y: 0, duration: 0.28, ease: "power2.out" },
+          0.82,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["card-resize-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/card-resize/registry-item.json b/registry/components/card-resize/registry-item.json
new file mode 100644
index 0000000000..8d52d7f2fb
--- /dev/null
+++ b/registry/components/card-resize/registry-item.json
@@ -0,0 +1,82 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "card-resize",
+  "type": "hyperframes:component",
+  "title": "Card Resize",
+  "description": "A transitions.dev-inspired card resize primitive that expands a compact card into a detail panel",
+  "tags": ["video-primitive", "transition-primitive", "transitions-dev-port", "card", "layout"],
+  "files": [
+    {
+      "path": "card-resize.html",
+      "target": "compositions/components/card-resize.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "surface",
+      "type": "enum",
+      "role": "style",
+      "label": "Surface",
+      "description": "Card colour scheme: paper is the original white card, ink is a dark card for dark frames.",
+      "default": "paper",
+      "options": [
+        {
+          "value": "paper",
+          "label": "Paper"
+        },
+        {
+          "value": "ink",
+          "label": "Ink"
+        }
+      ]
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Treatment of the media thumbnail: a plain plate, a hatched surface, or an image plate with a horizon-and-disc glyph.",
+      "default": "ocean",
+      "options": [
+        {
+          "value": "ocean",
+          "label": "Ocean"
+        },
+        {
+          "value": "forest",
+          "label": "Forest"
+        },
+        {
+          "value": "ember",
+          "label": "Ember"
+        }
+      ]
+    },
+    {
+      "id": "elevation",
+      "type": "enum",
+      "role": "style",
+      "label": "Elevation",
+      "description": "How far the card lifts off the frame, from a contact shadow to a deep drop.",
+      "default": "raised",
+      "options": [
+        {
+          "value": "flat",
+          "label": "Flat"
+        },
+        {
+          "value": "raised",
+          "label": "Raised"
+        },
+        {
+          "value": "floating",
+          "label": "Floating"
+        }
+      ]
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/card-resize.png"
+  }
+}
diff --git a/registry/components/char-slam-explode/char-slam-explode.html b/registry/components/char-slam-explode/char-slam-explode.html
new file mode 100644
index 0000000000..fb3494db5b
--- /dev/null
+++ b/registry/components/char-slam-explode/char-slam-explode.html
@@ -0,0 +1,338 @@
+<!doctype html>
+<!--
+  char-slam-explode: HyperFrames video primitive
+
+  A headline begins as individually scattered glyphs, holds the explosion,
+  then reassembles with an overshooting slam and a deterministic three-frame
+  stage shake.
+
+  Variables:
+    text: headline copy
+    accent: green, blue, or violet headline color
+    spread: tight or wild scatter distance
+
+  Envelope, fixed IN and OUT with elastic HOLD:
+    IN_BASE  = 1.64s, scattered hold, staggered return, and landing shake
+    HOLD     = max(0, D - IN - OUT), subtle drift followed by 0.30s stillness
+    OUT_BASE = 0.40s, composed headline fades and scales down
+    If D is shorter than IN_BASE + OUT_BASE, IN and OUT compress together.
+    The timeline is never time-scaled.
+
+  The scatter table was generated at build time from fixed LCG seed
+  0x0c5e2026. Runtime code only reads the authored table.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, and has no data-width or
+  data-height. One paused timeline registers under the literal
+  char-slam-explode key.
+-->
+<html
+  lang="en"
+  data-composition-id="char-slam-explode"
+  data-composition-duration="3.5"
+  data-composition-variables='[
+    { "id": "text", "type": "string", "role": "content", "label": "Headline", "description": "Text split into glyphs for the scatter and slam.", "default": "Impact" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Headline and glow color.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "spread", "type": "enum", "role": "motion", "label": "Spread", "description": "Distance and rotation of the scattered glyphs.", "default": "tight", "options": [{ "value": "tight", "label": "Tight" }, { "value": "wild", "label": "Wild" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Char Slam Explode</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="char-slam-explode" data-duration="3.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .cse-clip,
+          .cse-stage {
+            position: absolute;
+            inset: 0;
+            width: 100cqw;
+            height: 100cqh;
+          }
+
+          .cse-clip {
+            overflow: hidden;
+          }
+
+          .cse-stage {
+            display: grid;
+            place-items: center;
+            will-change: transform;
+          }
+
+          .cse-headline {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 60cqw;
+            min-height: 32cqh;
+            color: var(--cse-accent, #71f5a7);
+            font-size: var(--cse-font-size, min(10cqw, 27cqh));
+            font-weight: 900;
+            line-height: 0.9;
+            letter-spacing: -0.045em;
+            text-align: center;
+            text-shadow:
+              0 0 2.8cqh color-mix(in srgb, var(--cse-accent, #71f5a7) 28%, transparent),
+              0 1.2cqh 4.5cqh color-mix(in srgb, #000 58%, transparent);
+            white-space: nowrap;
+            transform-origin: 50% 50%;
+            will-change: transform, opacity;
+          }
+
+          .cse-glyph {
+            display: inline-block;
+            flex: 0 0 auto;
+            white-space: pre;
+            transform-origin: 50% 55%;
+            will-change: transform;
+          }
+        </style>
+
+        <div
+          id="char-slam-explode-clip"
+          class="cse-clip clip"
+          data-start="0"
+          data-duration="3.5"
+          data-track-index="0"
+        >
+          <div class="cse-stage">
+            <div class="cse-headline" role="heading" aria-level="1"></div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".cse-stage");
+            var headline = root.querySelector(".cse-headline");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var text = vars.text == null ? "Impact" : String(vars.text);
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #b895ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var spread = vars.spread === "wild" ? "wild" : "tight";
+            var spreadValues = {
+              tight: { x: 9, y: 10, rotation: 12 },
+              wild: { x: 17, y: 19, rotation: 22 },
+            };
+
+            root.style.setProperty("--cse-accent", accentColors[accent]);
+            headline.setAttribute("aria-label", text);
+
+            var characters = Array.from(text);
+            characters.forEach(function (character, index) {
+              var glyph = document.createElement("span");
+              glyph.id = "char-slam-explode-glyph-" + index;
+              glyph.className = "cse-glyph";
+              glyph.textContent = /\s/.test(character) ? "\u00a0" : character;
+              glyph.setAttribute("aria-hidden", "true");
+              headline.appendChild(glyph);
+            });
+
+            // Conservative one-em-per-character fitting keeps any glyph mix
+            // inside the 60cqw composed width. The height cap protects short,
+            // wide mounts, while the surrounding clearance protects wild
+            // scatter and the return overshoot.
+            var fittedCqw = Math.min(13.5, 60 / Math.max(1, characters.length));
+            root.style.setProperty(
+              "--cse-font-size",
+              "min(" + fittedCqw.toFixed(3) + "cqw, 27cqh)",
+            );
+
+            // Fixed-seed LCG table, generated at build time. Each row stores
+            // normalized x, y, and rotation values. Long strings wrap the
+            // authored table without introducing runtime randomness.
+            var scatterTable = [
+              [-0.9, -0.038, 0.677],
+              [0.61, 0.716, -0.967],
+              [0.418, 0.575, 0.822],
+              [-0.76, -0.451, 0.944],
+              [-0.621, 0.579, -0.215],
+              [0.714, 0.437, -0.824],
+              [0.577, 0.567, 0.464],
+              [0.902, 0.346, 0.016],
+              [-0.526, 0.743, -0.275],
+              [-0.571, -0.353, 0.954],
+              [-0.666, 0.61, -0.075],
+              [-0.122, 0.875, -0.783],
+              [-0.141, 0.726, -0.659],
+              [0.606, -0.665, -0.713],
+              [-0.962, 0.131, 0.307],
+              [0.227, 0.813, -0.979],
+              [0.264, -0.754, -0.013],
+              [-0.4, 0.903, 0.573],
+              [0.393, 0.542, -0.992],
+              [0.884, -0.313, -0.834],
+              [-0.048, 0.707, -0.331],
+              [-0.766, 0.226, 0.567],
+              [0.207, 0.734, -0.714],
+              [-0.677, -0.614, 0.462],
+              [0.389, -0.542, -0.384],
+              [0.497, 0.716, 0.414],
+              [0.729, -0.59, -0.774],
+              [0.665, -0.061, -0.58],
+              [-0.758, -0.546, 0.364],
+              [0.113, 0.667, -0.202],
+              [0.963, 0.171, 0.47],
+              [0.662, -0.295, 0.912],
+              [0.555, 0.548, 0.952],
+              [-0.132, -0.677, 0.685],
+              [-0.758, 0.133, -0.469],
+              [-0.296, 0.697, 0.61],
+              [-0.27, 0.786, -0.677],
+              [-0.781, -0.478, -0.384],
+              [-0.216, -0.633, -0.949],
+              [0.721, -0.452, -0.62],
+              [-0.434, 0.816, 0.526],
+              [-0.794, 0.014, -0.971],
+              [-0.683, -0.158, 0.844],
+              [-0.914, 0.066, 0.396],
+              [0.157, -0.721, -0.188],
+              [0.662, -0.087, 0.573],
+              [-0.732, 0.651, -0.935],
+              [0.35, 0.605, 0.152],
+              [-0.317, -0.668, 0.206],
+              [0.139, 0.822, -0.11],
+              [-0.821, 0.464, 0.347],
+              [-0.668, -0.527, -0.879],
+              [-0.578, -0.444, 0.673],
+              [0.573, 0.744, 0.819],
+              [-0.52, -0.449, 0.256],
+              [-0.053, -0.703, 0.258],
+              [-0.646, 0.266, -0.551],
+              [-0.728, -0.448, -0.488],
+              [-0.547, -0.5, -0.099],
+              [0.714, 0.091, 0.084],
+              [-0.114, 0.764, -0.357],
+              [0.02, -0.706, -0.59],
+              [0.144, -0.947, -0.95],
+              [-0.851, 0.232, -0.445],
+            ];
+            var glyphs = Array.from(root.querySelectorAll(".cse-glyph"));
+            var scatter = spreadValues[spread];
+
+            glyphs.forEach(function (glyph, index) {
+              var values = scatterTable[index % scatterTable.length];
+              gsap.set(glyph, {
+                x: (values[0] * scatter.x).toFixed(3) + "cqw",
+                y: (values[1] * scatter.y).toFixed(3) + "cqh",
+                rotation: values[2] * scatter.rotation,
+                scale: 0.82,
+              });
+            });
+
+            var IN_BASE = 1.64;
+            var OUT_BASE = 0.4;
+            var RETURN_AT_BASE = 0.58;
+            var RETURN_DURATION_BASE = 0.66;
+            var STAGGER_BASE = 0.28;
+            var LAND_AT_BASE = RETURN_AT_BASE + RETURN_DURATION_BASE + STAGGER_BASE;
+            var SHAKE_FRAME_BASE = 1 / 30;
+            var STILL_HOLD_BASE = 0.3;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "3.5"));
+            var baseTotal = IN_BASE + OUT_BASE;
+            var envelopeScale = duration < baseTotal ? duration / baseTotal : 1;
+            var IN = IN_BASE * envelopeScale;
+            var OUT = OUT_BASE * envelopeScale;
+            var RETURN_AT = RETURN_AT_BASE * envelopeScale;
+            var RETURN_DURATION = RETURN_DURATION_BASE * envelopeScale;
+            var STAGGER = STAGGER_BASE * envelopeScale;
+            var LAND_AT = LAND_AT_BASE * envelopeScale;
+            var SHAKE_FRAME = SHAKE_FRAME_BASE * envelopeScale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var ACTIVE_HOLD = Math.max(0, HOLD - Math.min(STILL_HOLD_BASE, HOLD));
+            var HOLD_START = IN;
+            var OUT_START = IN + HOLD;
+
+            var tl = gsap.timeline({ paused: true });
+
+            tl.to(
+              glyphs,
+              {
+                x: 0,
+                y: 0,
+                rotation: 0,
+                scale: 1,
+                duration: RETURN_DURATION,
+                ease: "back.out(1.7)",
+                stagger: { amount: STAGGER, from: "center" },
+              },
+              RETURN_AT,
+            );
+
+            tl.to(
+              stage,
+              { x: "0.55cqw", y: "-0.3cqh", duration: SHAKE_FRAME, ease: "power2.out" },
+              LAND_AT,
+            );
+            tl.to(stage, {
+              x: "-0.38cqw",
+              y: "0.2cqh",
+              duration: SHAKE_FRAME,
+              ease: "power2.out",
+            });
+            tl.to(stage, { x: 0, y: 0, duration: SHAKE_FRAME, ease: "power2.out" });
+
+            if (ACTIVE_HOLD > 0) {
+              tl.fromTo(
+                headline,
+                { y: 0 },
+                {
+                  y: "-0.4cqh",
+                  duration: ACTIVE_HOLD / 2,
+                  ease: "sine.inOut",
+                  yoyo: true,
+                  repeat: 1,
+                  immediateRender: false,
+                },
+                HOLD_START,
+              );
+            }
+
+            tl.to(
+              headline,
+              { opacity: 0, scale: 0.96, duration: OUT, ease: "power2.in" },
+              OUT_START,
+            );
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["char-slam-explode"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/char-slam-explode/demo.html b/registry/components/char-slam-explode/demo.html
new file mode 100644
index 0000000000..c1b520e01f
--- /dev/null
+++ b/registry/components/char-slam-explode/demo.html
@@ -0,0 +1,84 @@
+<!doctype html>
+<!--
+  char-slam-explode demo. This standalone composition mounts the primitive
+  through data-composition-src. Non-default copy, accent, and spread prove
+  that all variables flow through the elastic host mount.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Char Slam Explode Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0b0c0e;
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f7f8fa;
+        --surface: #15181e;
+        --border: #343943;
+        --font-display: Inter, system-ui, sans-serif;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 44%, #1a1722 0%, var(--bg) 72%);
+      }
+
+      .mount-card {
+        width: 82%;
+        height: 64%;
+        left: 9%;
+        top: 18%;
+        container-type: size;
+        overflow: hidden;
+        border: 1px solid rgba(247, 248, 250, 0.12);
+        border-radius: 32px;
+        background: color-mix(in srgb, var(--surface) 88%, transparent);
+        box-shadow: 0 54px 120px rgba(0, 0, 0, 0.46);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="char-slam-explode-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="3.5"
+      data-fps="30"
+    >
+      <div
+        id="char-slam-explode-mount"
+        class="mount-card clip"
+        data-composition-id="char-slam-explode"
+        data-composition-src="./char-slam-explode.html"
+        data-variable-values='{"text":"Detonate","accent":"violet","spread":"wild"}'
+        data-start="0"
+        data-duration="3.5"
+        data-track-index="0"
+        data-width="1574"
+        data-height="691"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["char-slam-explode-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/char-slam-explode/registry-item.json b/registry/components/char-slam-explode/registry-item.json
new file mode 100644
index 0000000000..687ed166f1
--- /dev/null
+++ b/registry/components/char-slam-explode/registry-item.json
@@ -0,0 +1,55 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "char-slam-explode",
+  "type": "hyperframes:component",
+  "title": "Char Slam Explode",
+  "description": "Headline glyphs hold in a deterministic scatter, then reassemble with an overshooting slam and a three-frame landing shake.",
+  "tags": ["motion-primitive", "typography", "text-treatment", "scatter", "slam", "impact"],
+  "jobs": ["emphasize"],
+  "family": "typography",
+  "profile": "impact",
+  "evidence": "Wave H U26 char-slam-explode specification, inspired by Bodak 055",
+  "syncPoints": [{ "id": "slam-impact", "phase": "in", "offset": 1.52 }],
+  "files": [
+    {
+      "path": "char-slam-explode.html",
+      "target": "compositions/components/char-slam-explode.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "text",
+      "type": "string",
+      "role": "content",
+      "label": "Headline",
+      "description": "Text split into glyphs for the scatter and slam.",
+      "default": "Impact"
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Headline and glow color.",
+      "default": "green",
+      "options": [
+        { "value": "green", "label": "Green" },
+        { "value": "blue", "label": "Blue" },
+        { "value": "violet", "label": "Violet" }
+      ]
+    },
+    {
+      "id": "spread",
+      "type": "enum",
+      "role": "motion",
+      "label": "Spread",
+      "description": "Distance and rotation of the scattered glyphs.",
+      "default": "tight",
+      "options": [
+        { "value": "tight", "label": "Tight" },
+        { "value": "wild", "label": "Wild" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/chart-story/README.md b/registry/components/chart-story/README.md
new file mode 100644
index 0000000000..a1382436cb
--- /dev/null
+++ b/registry/components/chart-story/README.md
@@ -0,0 +1,34 @@
+# chart-story
+
+The proof-and-stats chart unit: one chart builds from data in reading order and lands on the exact supplied values, never a re-rounded approximation. Bars grow staggered from the baseline (scaleY, origin at the baseline), a line draws left to right by getTotalLength dash with a translucent area fill fading in after, a donut ring sweeps segment by segment, or horizontal progress bars fill top to bottom (scaleX, origin left). Axis and data labels fade in reading order. The emphasized datum takes the accent color plus a value callout that pops with a smooth settle while its number rolls to the exact value and unit; on the donut the callout is the ring center.
+
+Inline SVG built synchronously from the variables, no chart library, fully deterministic and seek-safe.
+
+## Variables
+
+| Variable    | Type   | Default          | Notes                                                                                                                           |
+| ----------- | ------ | ---------------- | ------------------------------------------------------------------------------------------------------------------------------- |
+| `type`      | enum   | `bars`           | `bars`, `line`, `donut`, or `progress`.                                                                                         |
+| `data`      | string | `12, 28, 45, 64` | Comma-separated numbers. The displayed finals are the raw tokens (decimals preserved, e.g. `45.5`).                             |
+| `labels`    | string | `Q1, Q2, Q3, Q4` | Comma-separated, one per datum. Missing entries render empty.                                                                   |
+| `emphasize` | number | `3`              | Index of the accented datum with the callout. Clamped to the data range; out-of-range falls to the last datum.                  |
+| `unit`      | string | `%`              | Suffix on every displayed value. For `progress`, a `%` unit fills against 100; otherwise the largest value owns the full track. |
+| `accent`    | enum   | `green`          | `green` maps to `--brand`, `blue` to `--accent`, `violet` to `--accent-2`.                                                      |
+| `exit`      | enum   | `none`           | `none`, `fade`, or `up`. Proof stats end on the still hold, so the default is none.                                             |
+
+Bars and lines scale against the largest value; donut segments are proportional shares of the total.
+
+## Envelope
+
+Authored at 5s. Fixed IN with elastic HOLD; OUT exists only when `exit` is not `none`.
+
+- IN_BASE = 3.3s: stage arrival (0.5s), axis or track reveal at 0.15s, data build from 0.55s over 1.6s in reading order, labels fading from 0.85s, callout pop at 2.35s with a 0.7s number roll landing the exact value at 3.05s.
+- HOLD = `max(0, D - IN - OUT)`: one finite drift (two explicit tweens), then 0.3s stillness.
+- OUT_BASE = 0.5s only for `exit: fade` (opacity) or `exit: up` (opacity plus rise); otherwise 0.
+- Shorter durations compress IN and OUT proportionally. The timeline is never time-scaled.
+
+Sync point: `callout-landed` at 3.05s (exact value landed, at authored duration).
+
+## Mount contract
+
+Template-wrapped sub-composition. `#root` fills the host box, establishes the container query basis (`container-type: size`, `cqw`/`cqh` units), carries no `data-width`/`data-height`, and registers one paused GSAP timeline under the literal `chart-story` key on `window.__timelines`. Consumes the contract tokens (`--bg`, `--fg`, `--muted`, `--surface`, `--border`, `--brand`, `--accent`, `--accent-2`, `--font-display`, `--font-body`, `--font-mono`, `--space-2`) at point of use with exact-value fallbacks. All dash draws measure `getTotalLength` (never the `pathLength` attribute, no `vector-effect: non-scaling-stroke` on dashed paths). Deterministic: no `Date.now`, no randomness, no network reads at seek time.
diff --git a/registry/components/chart-story/chart-story.html b/registry/components/chart-story/chart-story.html
new file mode 100644
index 0000000000..4ae5fa3873
--- /dev/null
+++ b/registry/components/chart-story/chart-story.html
@@ -0,0 +1,739 @@
+<!doctype html>
+<!--
+  chart-story: HyperFrames video primitive (proof and stats / prove)
+
+  One chart builds from data in reading order and lands the exact supplied
+  values. Bars grow staggered from the baseline, a line draws left to right
+  with an optional translucent area fill, a donut ring sweeps segment by
+  segment, or horizontal progress bars fill top to bottom. Axis and data
+  labels fade in reading order; the emphasized datum takes the accent color
+  and a value callout that pops and settles on the exact value plus unit.
+
+  Variables:
+    - type (bars | line | donut | progress, default "bars"): chart form.
+    - data (string, default "12, 28, 45, 64"): comma-separated numbers.
+    - labels (string, default "Q1, Q2, Q3, Q4"): comma-separated labels.
+    - emphasize (number, default 3): index of the accented datum, clamped.
+    - unit (string, default "%"): suffix appended to every value.
+    - accent (green | blue | violet, default "green"): emphasis color.
+    - exit (none | fade | up, default none): films end on the hold.
+
+  Envelope, fixed IN with elastic HOLD only (OUT exists only when exit is
+  fade or up):
+    IN_BASE  = 3.3s, stage arrival, axis draw, data build, labels, callout
+    HOLD     = max(0, D - IN - OUT), one finite drift then 0.3s stillness
+    OUT_BASE = 0.5s only when exit is fade or up, otherwise 0
+    If D is shorter than IN_BASE + OUT_BASE, IN and OUT compress together.
+    The timeline is never time-scaled.
+
+  Determinism: the whole SVG is built synchronously from the variables, all
+  dash lengths come from getTotalLength (never the pathLength attribute, no
+  vector-effect on dashed paths), and the callout number rows are authored
+  frame sets, so repeated or reverse seeks always show the same pixels. The
+  final displayed values are the raw supplied tokens, never re-rounded.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, has no data-width or data-height,
+  and registers one paused timeline under the literal chart-story key.
+-->
+<html
+  lang="en"
+  data-composition-id="chart-story"
+  data-composition-duration="5"
+  data-composition-variables='[
+    { "id": "type", "type": "enum", "role": "content", "label": "Chart type", "description": "Chart form the data builds into.", "default": "bars", "options": [{ "value": "bars", "label": "Bars" }, { "value": "line", "label": "Line" }, { "value": "donut", "label": "Donut" }, { "value": "progress", "label": "Progress" }] },
+    { "id": "data", "type": "string", "role": "content", "label": "Data", "description": "Comma-separated numbers; the chart lands exactly on these values.", "default": "12, 28, 45, 64" },
+    { "id": "labels", "type": "string", "role": "content", "label": "Labels", "description": "Comma-separated labels, one per datum.", "default": "Q1, Q2, Q3, Q4" },
+    { "id": "emphasize", "type": "number", "role": "content", "label": "Emphasize", "description": "Index of the datum that takes the accent and the value callout. Clamped to the data range.", "default": 3, "step": 1 },
+    { "id": "unit", "type": "string", "role": "content", "label": "Unit", "description": "Suffix appended to every displayed value.", "default": "%" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Contract color used by the emphasized datum and its callout.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "style", "label": "Exit", "description": "Optional departure. Proof stats end on the still hold, so the default is none.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Chart Story</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="chart-story" data-duration="5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .cs-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .cs-stage {
+            position: relative;
+            width: 92cqw;
+            height: 88cqh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: var(--space-2, 2cqmin);
+            will-change: transform, opacity;
+          }
+
+          .cs-stage svg {
+            width: 100%;
+            height: 100%;
+            display: block;
+            overflow: visible;
+          }
+
+          .cs-mono {
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            letter-spacing: 0.03em;
+          }
+
+          .cs-display {
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-weight: 600;
+            letter-spacing: -0.02em;
+          }
+        </style>
+
+        <div
+          id="chart-story-clip"
+          class="cs-clip clip"
+          data-start="0"
+          data-duration="5"
+          data-track-index="0"
+        >
+          <div class="cs-stage" role="img"></div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var NS = "http://www.w3.org/2000/svg";
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".cs-stage");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var typeOptions = { bars: 1, line: 1, donut: 1, progress: 1 };
+            var type = Object.prototype.hasOwnProperty.call(typeOptions, vars.type)
+              ? vars.type
+              : "bars";
+            var unit = vars.unit == null ? "%" : String(vars.unit);
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var accentColor = accentColors[accent];
+            var inkColor = "var(--fg, #f8fafc)";
+            // Label ink: raw --muted fails contrast on near-white hosts
+            // (#94a3b8 on #f8fafc is ~2.4:1). Pulling it halfway toward --fg
+            // stays quiet next to inkColor yet passes 4.5:1 on light AND
+            // dark hosts, since --fg is by definition high-contrast on --bg.
+            var mutedColor = "color-mix(in srgb, var(--fg, #f8fafc) 50%, var(--muted, #94a3b8))";
+            var borderColor = "var(--border, #475569)";
+            var baseSeries = "color-mix(in srgb, var(--fg, #f8fafc) 44%, var(--surface, #10161f))";
+            var lineSeries = "color-mix(in srgb, var(--fg, #f8fafc) 82%, var(--surface, #10161f))";
+            var trackColor = "color-mix(in srgb, var(--border, #475569) 55%, transparent)";
+
+            // Values keep their raw tokens: the displayed final numbers are
+            // the exact supplied strings, never a re-rounded float.
+            var tokens = String(vars.data == null ? "" : vars.data)
+              .split(",")
+              .map(function (token) {
+                return token.trim();
+              })
+              .filter(function (token) {
+                return token !== "" && Number.isFinite(Number(token));
+              });
+            if (tokens.length === 0) tokens = ["12", "28", "45", "64"];
+            var values = tokens.map(Number);
+            var n = values.length;
+
+            var labels = String(vars.labels == null ? "Q1, Q2, Q3, Q4" : vars.labels)
+              .split(",")
+              .map(function (label) {
+                return label.trim();
+              });
+            while (labels.length < n) labels.push("");
+
+            var emphasize = Math.round(Number(vars.emphasize));
+            if (!Number.isFinite(emphasize)) emphasize = n - 1;
+            emphasize = Math.min(Math.max(emphasize, 0), n - 1);
+
+            var displays = tokens.map(function (token) {
+              return token + unit;
+            });
+            var emphasizedValue = values[emphasize];
+            var emphasizedDecimals = (tokens[emphasize].split(".")[1] || "").length;
+
+            var maxValue = Math.max(1e-9, Math.max.apply(null, values));
+            var FPS = 30;
+
+            stage.setAttribute(
+              "aria-label",
+              labels
+                .slice(0, n)
+                .map(function (label, index) {
+                  return (label ? label + " " : "") + displays[index];
+                })
+                .join(", "),
+            );
+
+            var svg = document.createElementNS(NS, "svg");
+            svg.setAttribute("viewBox", "0 0 1000 560");
+            svg.setAttribute("preserveAspectRatio", "xMidYMid meet");
+            stage.appendChild(svg);
+
+            function make(name, attrs, parent) {
+              var node = document.createElementNS(NS, name);
+              for (var key in attrs) node.setAttribute(key, String(attrs[key]));
+              (parent || svg).appendChild(node);
+              return node;
+            }
+
+            function text(x, y, size, fill, anchor, parent) {
+              var node = make(
+                "text",
+                {
+                  x: x,
+                  y: y,
+                  "font-size": size,
+                  "text-anchor": anchor || "middle",
+                  class: "cs-mono",
+                },
+                parent,
+              );
+              node.style.fill = fill;
+              return node;
+            }
+
+            // Dashed draw setup: length comes from getTotalLength, never the
+            // pathLength attribute, and dashed strokes never use
+            // vector-effect: non-scaling-stroke.
+            function dashPrepare(node) {
+              var length = node.getTotalLength();
+              node.style.strokeDasharray = length + " " + length;
+              gsap.set(node, { strokeDashoffset: length });
+              return length;
+            }
+
+            // Envelope (base seconds, all scaled together, never timeScaled)
+            var IN_BASE = 3.3;
+            var OUT_BASE = exit === "none" ? 0 : 0.5;
+            var STILLNESS = 0.3;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "5"));
+            var totalBase = IN_BASE + OUT_BASE;
+            var s = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * s;
+            var OUT = OUT_BASE * s;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var HOLD_START = IN;
+            var OUT_START = IN + HOLD;
+
+            var AXIS_AT = 0.15;
+            var AXIS_DUR = 0.5;
+            var BUILD_AT = 0.55;
+            var BUILD_DUR = 1.6;
+            var LABELS_AT = 0.85;
+            var CALLOUT_AT = 2.35;
+            var POP_DUR = 0.45;
+            var ROLL_DUR = 0.7;
+
+            var tl = gsap.timeline({ paused: true });
+
+            gsap.set(stage, { opacity: 0, y: "2.4cqh" });
+            tl.to(stage, { opacity: 1, duration: 0.5 * s, ease: "power2.out" }, 0);
+            tl.to(stage, { y: "0cqh", duration: 0.5 * s, ease: "power3.out" }, 0);
+
+            function fadeIn(node, at, rise) {
+              gsap.set(node, rise ? { opacity: 0, y: 8 } : { opacity: 0 });
+              tl.to(
+                node,
+                rise
+                  ? { opacity: 1, y: 0, duration: 0.4 * s, ease: "power2.out" }
+                  : { opacity: 1, duration: 0.4 * s, ease: "power2.out" },
+                at * s,
+              );
+            }
+
+            function drawBaseline(x0, x1, y) {
+              var baseline = make("path", {
+                d: "M " + x0 + " " + y + " L " + x1 + " " + y,
+                fill: "none",
+                "stroke-width": 3,
+                "stroke-linecap": "round",
+              });
+              baseline.style.stroke = borderColor;
+              var length = dashPrepare(baseline);
+              tl.to(
+                baseline,
+                { strokeDashoffset: 0, duration: AXIS_DUR * s, ease: "power2.inOut" },
+                AXIS_AT * s,
+              );
+              return length;
+            }
+
+            // Callout chip: pops with a smooth settle, number rows are
+            // authored frames that land on the exact supplied token.
+            function makeCallout(anchorX, bottomY) {
+              var label = displays[emphasize];
+              var width = Math.max(96, Array.from(label).length * 17 + 44);
+              var height = 52;
+              var cx = Math.min(Math.max(anchorX, width / 2 + 8), 1000 - width / 2 - 8);
+              var group = make("g", {});
+              var chip = make(
+                "rect",
+                {
+                  x: cx - width / 2,
+                  y: bottomY - height,
+                  width: width,
+                  height: height,
+                  rx: 12,
+                },
+                group,
+              );
+              chip.style.fill = accentColor;
+              var valueNode = text(
+                cx,
+                bottomY - height / 2 + 10,
+                29,
+                "var(--bg, #05070b)",
+                "middle",
+                group,
+              );
+              valueNode.setAttribute("font-weight", "600");
+              popAndRoll(group, valueNode, "50% 100%");
+            }
+
+            function popAndRoll(group, valueNode, origin) {
+              gsap.set(group, { opacity: 0, scale: 0.6, transformOrigin: origin });
+              tl.to(group, { opacity: 1, duration: 0.25 * s, ease: "power2.out" }, CALLOUT_AT * s);
+              tl.to(
+                group,
+                { scale: 1, duration: POP_DUR * s, ease: "back.out(1.7)" },
+                CALLOUT_AT * s,
+              );
+              var frames = Math.max(1, Math.round(ROLL_DUR * s * FPS));
+              var ease = gsap.parseEase("power2.out");
+              var suffix = valueNode.__rollUnitless ? "" : unit;
+              for (var frame = 0; frame <= frames; frame += 1) {
+                var row =
+                  frame === frames
+                    ? tokens[emphasize] + suffix
+                    : (emphasizedValue * ease(frame / frames)).toFixed(emphasizedDecimals) + suffix;
+                tl.set(
+                  valueNode,
+                  { textContent: row },
+                  (CALLOUT_AT + ROLL_DUR * (frame / frames)) * s,
+                );
+              }
+            }
+
+            function buildBars() {
+              var left = 80;
+              var right = 920;
+              var base = 470;
+              var top = 120;
+              var band = (right - left) / n;
+              var barWidth = Math.min(band * 0.62, 150);
+              drawBaseline(left, right, base);
+              var stagger = n > 1 ? (BUILD_DUR - 0.85) / (n - 1) : 0;
+
+              values.forEach(function (value, index) {
+                var height = Math.max((value / maxValue) * (base - top), 3);
+                var cx = left + band * (index + 0.5);
+                var at = BUILD_AT + stagger * index;
+                // Radius never exceeds half the bar height, so tiny data
+                // values render as clean low bars instead of radius-crushed
+                // slivers. Growth animates the rect geometry (not scaleY):
+                // the renderer re-clamps the corner radius against the
+                // current height every frame, so no growth frame shows a
+                // squashed pill either.
+                var bar = make("rect", {
+                  x: cx - barWidth / 2,
+                  y: base,
+                  width: barWidth,
+                  height: 0,
+                  rx: Math.min(10, barWidth * 0.18, height / 2),
+                });
+                bar.style.fill = index === emphasize ? accentColor : baseSeries;
+                tl.to(
+                  bar,
+                  {
+                    attr: { height: height, y: base - height },
+                    duration: 0.85 * s,
+                    ease: "power3.out",
+                  },
+                  at * s,
+                );
+
+                var axisLabel = text(cx, base + 42, 26, mutedColor);
+                axisLabel.textContent = labels[index];
+                fadeIn(axisLabel, LABELS_AT + index * 0.12, true);
+
+                if (index !== emphasize) {
+                  var valueLabel = text(cx, base - height - 16, 27, inkColor);
+                  valueLabel.textContent = displays[index];
+                  fadeIn(valueLabel, at + 0.65, true);
+                }
+              });
+
+              var emphasizedHeight = Math.max((values[emphasize] / maxValue) * (base - top), 3);
+              makeCallout(left + band * (emphasize + 0.5), base - emphasizedHeight - 20);
+            }
+
+            function buildLine() {
+              var left = 80;
+              var right = 920;
+              var base = 470;
+              var top = 120;
+              drawBaseline(left, right, base);
+
+              var points = values.map(function (value, index) {
+                return {
+                  x: left + (right - left) * (n === 1 ? 0.5 : index / (n - 1)),
+                  y: base - (value / maxValue) * (base - top),
+                };
+              });
+              var lineD = points
+                .map(function (point, index) {
+                  return (index === 0 ? "M " : "L ") + point.x + " " + point.y;
+                })
+                .join(" ");
+
+              // Translucent area fill fades in after the stroke finishes.
+              var area = make("path", {
+                d:
+                  lineD +
+                  " L " +
+                  points[n - 1].x +
+                  " " +
+                  base +
+                  " L " +
+                  points[0].x +
+                  " " +
+                  base +
+                  " Z",
+                stroke: "none",
+              });
+              area.style.fill = accentColor;
+              gsap.set(area, { opacity: 0 });
+              tl.to(
+                area,
+                { opacity: 0.14, duration: 0.45 * s, ease: "power2.out" },
+                (BUILD_AT + BUILD_DUR - 0.05) * s,
+              );
+
+              var line = make("path", {
+                d: lineD,
+                fill: "none",
+                "stroke-width": 6,
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round",
+              });
+              line.style.stroke = lineSeries;
+              dashPrepare(line);
+              // ease "none" keeps the dash front aligned with the per-point
+              // cumulative-length timings below.
+              tl.to(
+                line,
+                { strokeDashoffset: 0, duration: (BUILD_DUR - 0.1) * s, ease: "none" },
+                BUILD_AT * s,
+              );
+
+              var cumulative = [0];
+              for (var index = 1; index < n; index += 1) {
+                cumulative.push(
+                  cumulative[index - 1] +
+                    Math.hypot(
+                      points[index].x - points[index - 1].x,
+                      points[index].y - points[index - 1].y,
+                    ),
+                );
+              }
+              var totalLength = Math.max(cumulative[n - 1], 1e-9);
+
+              points.forEach(function (point, index) {
+                var at = BUILD_AT + (BUILD_DUR - 0.1) * (cumulative[index] / totalLength);
+                var dot = make("circle", {
+                  cx: point.x,
+                  cy: point.y,
+                  r: index === emphasize ? 11 : 7,
+                });
+                dot.style.fill = index === emphasize ? accentColor : inkColor;
+                gsap.set(dot, { scale: 0, transformOrigin: "50% 50%" });
+                tl.to(dot, { scale: 1, duration: 0.35 * s, ease: "back.out(2)" }, at * s);
+
+                var axisLabel = text(point.x, base + 42, 26, mutedColor);
+                axisLabel.textContent = labels[index];
+                fadeIn(axisLabel, LABELS_AT + index * 0.12, true);
+
+                if (index !== emphasize) {
+                  var valueLabel = text(point.x, point.y - 20, 25, inkColor);
+                  valueLabel.textContent = displays[index];
+                  fadeIn(valueLabel, at + 0.2, true);
+                }
+              });
+
+              makeCallout(points[emphasize].x, points[emphasize].y - 24);
+            }
+
+            function polar(cx, cy, radius, degrees) {
+              var radians = ((degrees - 90) * Math.PI) / 180;
+              return { x: cx + radius * Math.cos(radians), y: cy + radius * Math.sin(radians) };
+            }
+
+            function arcPath(cx, cy, radius, startDeg, endDeg) {
+              var start = polar(cx, cy, radius, startDeg);
+              var end = polar(cx, cy, radius, endDeg);
+              var large = endDeg - startDeg > 180 ? 1 : 0;
+              return (
+                "M " +
+                start.x +
+                " " +
+                start.y +
+                " A " +
+                radius +
+                " " +
+                radius +
+                " 0 " +
+                large +
+                " 1 " +
+                end.x +
+                " " +
+                end.y
+              );
+            }
+
+            function buildDonut() {
+              var cx = 500;
+              var cy = 252;
+              var radius = 168;
+              var strokeWidth = 54;
+              var total = Math.max(
+                values.reduce(function (sum, value) {
+                  return sum + value;
+                }, 0),
+                1e-9,
+              );
+              var ladder = [72, 50, 36, 26, 18];
+
+              var track = make("circle", {
+                cx: cx,
+                cy: cy,
+                r: radius,
+                fill: "none",
+                "stroke-width": strokeWidth,
+              });
+              track.style.stroke = trackColor;
+              fadeIn(track, AXIS_AT);
+
+              var gap = n > 1 ? 3 : 0;
+              var cursor = 0;
+              values.forEach(function (value, index) {
+                var share = value / total;
+                var startDeg = cursor * 360;
+                var endDeg = (cursor + share) * 360;
+                cursor += share;
+                if (endDeg - startDeg <= gap * 2 + 0.05) return;
+                var segment = make("path", {
+                  d: arcPath(
+                    cx,
+                    cy,
+                    radius,
+                    startDeg + gap / 2,
+                    Math.min(endDeg - gap / 2, 359.98),
+                  ),
+                  fill: "none",
+                  "stroke-width": strokeWidth,
+                });
+                segment.style.stroke =
+                  index === emphasize
+                    ? accentColor
+                    : "color-mix(in srgb, var(--fg, #f8fafc) " +
+                      ladder[index % ladder.length] +
+                      "%, var(--surface, #10161f))";
+                dashPrepare(segment);
+                tl.to(
+                  segment,
+                  {
+                    strokeDashoffset: 0,
+                    duration: Math.max(BUILD_DUR * share, 0.05) * s,
+                    ease: "none",
+                  },
+                  (BUILD_AT + BUILD_DUR * (cursor - share)) * s,
+                );
+              });
+
+              // Legend row beneath, reading order left to right.
+              var itemWidth = Math.min(230, 880 / n);
+              var startX = 500 - (itemWidth * n) / 2;
+              values.forEach(function (value, index) {
+                var x = startX + itemWidth * index;
+                var group = make("g", {});
+                var swatch = make("rect", { x: x, y: 506, width: 20, height: 20, rx: 5 }, group);
+                swatch.style.fill =
+                  index === emphasize
+                    ? accentColor
+                    : "color-mix(in srgb, var(--fg, #f8fafc) " +
+                      ladder[index % ladder.length] +
+                      "%, var(--surface, #10161f))";
+                var entry = text(x + 32, 523, 24, mutedColor, "start", group);
+                entry.textContent = labels[index] ? labels[index] + " " : "";
+                var valueSpan = document.createElementNS(NS, "tspan");
+                valueSpan.style.fill = inkColor;
+                valueSpan.textContent = displays[index];
+                entry.appendChild(valueSpan);
+                fadeIn(group, LABELS_AT + index * 0.14, true);
+              });
+
+              // Center callout: the emphasized value rolls to the exact token.
+              var center = make("g", {});
+              var valueText = make(
+                "text",
+                {
+                  x: cx,
+                  y: cy + 14,
+                  "font-size": 84,
+                  "text-anchor": "middle",
+                  class: "cs-display",
+                },
+                center,
+              );
+              valueText.style.fill = accentColor;
+              var numberSpan = document.createElementNS(NS, "tspan");
+              numberSpan.__rollUnitless = true;
+              valueText.appendChild(numberSpan);
+              var unitSpan = document.createElementNS(NS, "tspan");
+              unitSpan.setAttribute("font-size", 44);
+              unitSpan.style.fill = mutedColor;
+              unitSpan.textContent = unit;
+              valueText.appendChild(unitSpan);
+              if (labels[emphasize]) {
+                var centerLabel = text(cx, cy + 62, 26, mutedColor, "middle", center);
+                centerLabel.textContent = labels[emphasize];
+              }
+              popAndRoll(center, numberSpan, "50% 50%");
+            }
+
+            function buildProgress() {
+              var rowHeight = Math.min(92, 440 / n);
+              var top = Math.max(90, 285 - (rowHeight * n) / 2);
+              var trackX = 300;
+              var trackWidth = 560;
+              // Percent-flavored data fills against 100; otherwise the
+              // largest value owns the full track.
+              var denominator = unit.trim() === "%" ? Math.max(100, maxValue) : maxValue;
+              var stagger = n > 1 ? (BUILD_DUR - 0.9) / (n - 1) : 0;
+
+              values.forEach(function (value, index) {
+                var cy = top + rowHeight * (index + 0.5);
+                var at = BUILD_AT + stagger * index;
+                var fraction = Math.min(Math.max(value / denominator, 0), 1);
+
+                var track = make("rect", {
+                  x: trackX,
+                  y: cy - 10,
+                  width: trackWidth,
+                  height: 20,
+                  rx: 10,
+                });
+                track.style.fill = trackColor;
+                fadeIn(track, AXIS_AT + index * 0.08);
+
+                // Same sliver guard as bars: radius clamped to half the fill
+                // width and growth via rect geometry, never scaleX.
+                var fillWidth = Math.max(trackWidth * fraction, 8);
+                var fill = make("rect", {
+                  x: trackX,
+                  y: cy - 10,
+                  width: 0,
+                  height: 20,
+                  rx: Math.min(10, fillWidth / 2),
+                });
+                fill.style.fill = index === emphasize ? accentColor : baseSeries;
+                tl.to(
+                  fill,
+                  { attr: { width: fillWidth }, duration: 0.9 * s, ease: "power3.out" },
+                  at * s,
+                );
+
+                var rowLabel = text(80, cy + 9, 26, mutedColor, "start");
+                rowLabel.textContent = labels[index];
+                fadeIn(rowLabel, LABELS_AT + index * 0.12, true);
+
+                if (index !== emphasize) {
+                  var valueLabel = text(884, cy + 9, 27, inkColor, "start");
+                  valueLabel.textContent = displays[index];
+                  fadeIn(valueLabel, at + 0.65, true);
+                }
+              });
+
+              var emphasizedFraction = Math.min(Math.max(values[emphasize] / denominator, 0), 1);
+              makeCallout(
+                trackX + trackWidth * emphasizedFraction,
+                top + rowHeight * (emphasize + 0.5) - 26,
+              );
+            }
+
+            if (type === "bars") buildBars();
+            else if (type === "line") buildLine();
+            else if (type === "donut") buildDonut();
+            else buildProgress();
+
+            // HOLD: one finite drift, authored as two explicit tweens, then
+            // stillness to the end (or to the exit).
+            var driftDuration = Math.max(0, HOLD - STILLNESS);
+            if (driftDuration > 0.1) {
+              var half = driftDuration / 2;
+              tl.to(stage, { y: "-0.5cqh", duration: half, ease: "sine.inOut" }, HOLD_START);
+              tl.to(stage, { y: "0cqh", duration: half, ease: "sine.inOut" }, HOLD_START + half);
+            }
+
+            if (exit === "fade") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "up") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+              tl.to(stage, { y: "-3cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["chart-story"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/chart-story/demo.html b/registry/components/chart-story/demo.html
new file mode 100644
index 0000000000..6ac2c5ac14
--- /dev/null
+++ b/registry/components/chart-story/demo.html
@@ -0,0 +1,82 @@
+<!doctype html>
+<!--
+  chart-story demo. Large centered mount (80% x 76%) on a light editorial
+  backdrop: the bar chart tells its story at presentation scale, with the
+  emphasized bar and unit labels readable across the frame.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>chart-story Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #f4f6f9);
+      }
+
+      #root {
+        --bg: #f4f6f9;
+        --fg: #14161b;
+        --surface: #ffffff;
+        --border: #dfe4ec;
+        --brand: #1d4ed8;
+        --accent: #0284c7;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 40%, #ffffff 0%, var(--bg, #f4f6f9) 70%);
+      }
+
+      .mount-stage {
+        width: 80%;
+        height: 76%;
+        left: 10%;
+        top: 12%;
+        container-type: size;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="chart-story-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+      data-fps="30"
+    >
+      <div
+        id="chart-story-mount"
+        class="mount-stage clip"
+        data-composition-id="chart-story"
+        data-composition-src="./chart-story.html"
+        data-variable-values='{"type":"bars","data":"12,28,45,61,88","labels":"Q1,Q2,Q3,Q4,Q5","emphasize":4,"unit":"%","accent":"green"}'
+        data-start="0"
+        data-duration="5"
+        data-track-index="0"
+        data-width="1536"
+        data-height="821"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["chart-story-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/chart-story/registry-item.json b/registry/components/chart-story/registry-item.json
new file mode 100644
index 0000000000..f0c83431bc
--- /dev/null
+++ b/registry/components/chart-story/registry-item.json
@@ -0,0 +1,105 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "chart-story",
+  "type": "hyperframes:component",
+  "title": "Chart Story",
+  "description": "One chart builds from data in reading order and lands the exact supplied values: staggered bars, a left-to-right line with area fill, a sweeping donut, or filling progress bars, with an accented value callout on the emphasized datum.",
+  "tags": [
+    "motion-primitive",
+    "proof",
+    "stats",
+    "chart",
+    "bars",
+    "line",
+    "donut",
+    "progress",
+    "deterministic"
+  ],
+  "jobs": ["prove"],
+  "family": "proof-stats",
+  "profile": "chart",
+  "evidence": "Wave J J1-7 spec: proof-and-stats chart unit with exact-value landings and an emphasized callout",
+  "syncPoints": [{ "id": "callout-landed", "phase": "in", "offset": 3.05 }],
+  "files": [
+    {
+      "path": "chart-story.html",
+      "target": "compositions/components/chart-story.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "type",
+      "type": "enum",
+      "role": "content",
+      "label": "Chart type",
+      "description": "Chart form the data builds into.",
+      "default": "bars",
+      "options": [
+        { "value": "bars", "label": "Bars" },
+        { "value": "line", "label": "Line" },
+        { "value": "donut", "label": "Donut" },
+        { "value": "progress", "label": "Progress" }
+      ]
+    },
+    {
+      "id": "data",
+      "type": "string",
+      "role": "content",
+      "label": "Data",
+      "description": "Comma-separated numbers; the chart lands exactly on these values.",
+      "default": "12, 28, 45, 64"
+    },
+    {
+      "id": "labels",
+      "type": "string",
+      "role": "content",
+      "label": "Labels",
+      "description": "Comma-separated labels, one per datum.",
+      "default": "Q1, Q2, Q3, Q4"
+    },
+    {
+      "id": "emphasize",
+      "type": "number",
+      "role": "content",
+      "label": "Emphasize",
+      "description": "Index of the datum that takes the accent and the value callout. Clamped to the data range.",
+      "default": 3,
+      "step": 1
+    },
+    {
+      "id": "unit",
+      "type": "string",
+      "role": "content",
+      "label": "Unit",
+      "description": "Suffix appended to every displayed value.",
+      "default": "%"
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Contract color used by the emphasized datum and its callout.",
+      "default": "green",
+      "options": [
+        { "value": "green", "label": "Green" },
+        { "value": "blue", "label": "Blue" },
+        { "value": "violet", "label": "Violet" }
+      ]
+    },
+    {
+      "id": "exit",
+      "type": "enum",
+      "role": "style",
+      "label": "Exit",
+      "description": "Optional departure. Proof stats end on the still hold, so the default is none.",
+      "default": "none",
+      "options": [
+        { "value": "none", "label": "None" },
+        { "value": "fade", "label": "Fade" },
+        { "value": "up", "label": "Up" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/checkout-flow/checkout-flow.html b/registry/components/checkout-flow/checkout-flow.html
new file mode 100644
index 0000000000..242c4bac65
--- /dev/null
+++ b/registry/components/checkout-flow/checkout-flow.html
@@ -0,0 +1,89 @@
+<!--
+  Checkout Flow - Remocn-inspired composed UI flow for HyperFrames.
+
+  Paste the markup and CSS into a composition. Use the timeline integration
+  note at the bottom as the starting point for deterministic GSAP animation.
+-->
+
+<div class="hf-ui-checkout-flow">
+  <div class="hf-ui-checkout-plan"><span>Pro plan</span><strong>$29/mo</strong></div>
+  <div class="hf-ui-checkout-fields">
+    <div>Card number <strong>4242 4242 4242 4242</strong></div>
+    <div>Expiry <strong>12/30</strong></div>
+  </div>
+  <div class="hf-ui-checkout-total"><span>Total today</span><strong>$29.00</strong></div>
+  <button type="button">Complete purchase</button>
+</div>
+
+<style>
+  .hf-ui-checkout-flow {
+    display: grid;
+    gap: 16px;
+    width: 440px;
+    padding: 26px;
+    border: 1px solid #e4e4e7;
+    border-radius: 28px;
+    background: #ffffff;
+    color: #18181b;
+    font-family: Inter, system-ui, sans-serif;
+    box-shadow: 0 28px 84px rgba(0, 0, 0, 0.12);
+  }
+  .hf-ui-checkout-plan,
+  .hf-ui-checkout-total {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .hf-ui-checkout-plan {
+    padding: 18px;
+    border-radius: 18px;
+    background: #18181b;
+    color: #ffffff;
+  }
+  .hf-ui-checkout-plan span,
+  .hf-ui-checkout-total span {
+    color: inherit;
+    opacity: 0.72;
+    font-size: 14px;
+    font-weight: 850;
+  }
+  .hf-ui-checkout-plan strong,
+  .hf-ui-checkout-total strong {
+    font-size: 22px;
+  }
+  .hf-ui-checkout-fields {
+    display: grid;
+    gap: 10px;
+  }
+  .hf-ui-checkout-fields div {
+    display: grid;
+    gap: 5px;
+    padding: 14px 16px;
+    border: 1px solid #e4e4e7;
+    border-radius: 15px;
+    color: #71717a;
+    font-size: 13px;
+    font-weight: 800;
+  }
+  .hf-ui-checkout-fields strong {
+    color: #18181b;
+    font-size: 16px;
+  }
+  .hf-ui-checkout-flow button {
+    height: 50px;
+    border: 0;
+    border-radius: 15px;
+    /* The primary action is the one accent-carrying element here. */
+    background: var(--accent, #18181b);
+    color: #ffffff;
+    font-weight: 900;
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-ui-checkout-flow', { opacity: 0, y: 28 }, { opacity: 1, y: 0, duration: 0.36, ease: 'power2.out' }, 0.25);
+  tl.fromTo('.hf-ui-checkout-fields div', { x: -16, opacity: 0 }, { x: 0, opacity: 1, duration: 0.26, stagger: 0.08, ease: 'power2.out' }, 0.62);
+  tl.fromTo('.hf-ui-checkout-total', { opacity: 0 }, { opacity: 1, duration: 0.24, ease: 'power2.out' }, 0.92);
+  tl.to('.hf-ui-checkout-flow button', { scale: 0.96, duration: 0.12, yoyo: true, repeat: 1, ease: 'power1.inOut' }, 1.18);
+-->
diff --git a/registry/components/checkout-flow/demo.html b/registry/components/checkout-flow/demo.html
new file mode 100644
index 0000000000..df0872ffa7
--- /dev/null
+++ b/registry/components/checkout-flow/demo.html
@@ -0,0 +1,155 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Checkout Flow - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f5f5f4;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        min-width: 760px;
+        min-height: 520px;
+        padding: 56px;
+        /* ponytail: scale wrapper (not a GSAP target) to fill ~55% of frame */
+        transform: scale(1.12);
+        transform-origin: center center;
+      }
+      .hf-ui-checkout-flow {
+        display: grid;
+        gap: 16px;
+        width: 440px;
+        padding: 26px;
+        border: 1px solid #e4e4e7;
+        border-radius: 28px;
+        background: #ffffff;
+        color: #18181b;
+        font-family: Inter, system-ui, sans-serif;
+        box-shadow: 0 28px 84px rgba(0, 0, 0, 0.12);
+      }
+      .hf-ui-checkout-plan,
+      .hf-ui-checkout-total {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+      .hf-ui-checkout-plan {
+        padding: 18px;
+        border-radius: 18px;
+        background: #18181b;
+        color: #ffffff;
+      }
+      .hf-ui-checkout-plan span,
+      .hf-ui-checkout-total span {
+        color: inherit;
+        opacity: 0.72;
+        font-size: 14px;
+        font-weight: 850;
+      }
+      .hf-ui-checkout-plan strong,
+      .hf-ui-checkout-total strong {
+        font-size: 22px;
+      }
+      .hf-ui-checkout-fields {
+        display: grid;
+        gap: 10px;
+      }
+      .hf-ui-checkout-fields div {
+        display: grid;
+        gap: 5px;
+        padding: 14px 16px;
+        border: 1px solid #e4e4e7;
+        border-radius: 15px;
+        color: #71717a;
+        font-size: 13px;
+        font-weight: 800;
+      }
+      .hf-ui-checkout-fields strong {
+        color: #18181b;
+        font-size: 16px;
+      }
+      .hf-ui-checkout-flow button {
+        width: 100%;
+        height: 50px;
+        border: 0;
+        border-radius: 15px;
+        /* The primary action is the one accent-carrying element here. */
+        background: var(--accent, #18181b);
+        color: #ffffff;
+        font-size: 15px;
+        font-weight: 700;
+        cursor: default;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="checkout-flow-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-ui-checkout-flow">
+          <div class="hf-ui-checkout-plan"><span>Pro plan</span><strong>$29/mo</strong></div>
+          <div class="hf-ui-checkout-fields">
+            <div>Card number <strong>4242 4242 4242 4242</strong></div>
+            <div>Expiry <strong>12/30</strong></div>
+          </div>
+          <div class="hf-ui-checkout-total"><span>Total today</span><strong>$29.00</strong></div>
+          <button type="button">Complete purchase</button>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        tl.fromTo(
+          ".hf-ui-checkout-flow",
+          { opacity: 0, y: 28 },
+          { opacity: 1, y: 0, duration: 0.36, ease: "power2.out" },
+          0.25,
+        );
+        tl.fromTo(
+          ".hf-ui-checkout-fields div",
+          { x: -16, opacity: 0 },
+          { x: 0, opacity: 1, duration: 0.26, stagger: 0.08, ease: "power2.out" },
+          0.62,
+        );
+        tl.fromTo(
+          ".hf-ui-checkout-total",
+          { opacity: 0 },
+          { opacity: 1, duration: 0.24, ease: "power2.out" },
+          0.92,
+        );
+        tl.to(
+          ".hf-ui-checkout-flow button",
+          { scale: 0.96, duration: 0.12, yoyo: true, repeat: 1, ease: "power1.inOut" },
+          1.18,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["checkout-flow-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/checkout-flow/registry-item.json b/registry/components/checkout-flow/registry-item.json
new file mode 100644
index 0000000000..7b245e8740
--- /dev/null
+++ b/registry/components/checkout-flow/registry-item.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "checkout-flow",
+  "type": "hyperframes:component",
+  "title": "Checkout Flow",
+  "description": "A composed checkout flow with plan summary, payment field rows, total, and purchase action",
+  "tags": ["ui-flow", "remocn-port", "checkout", "commerce"],
+  "files": [
+    {
+      "path": "checkout-flow.html",
+      "target": "compositions/components/checkout-flow.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/checkout-flow.png"
+  }
+}
diff --git a/registry/components/chromatic-aberration-wipe/chromatic-aberration-wipe.html b/registry/components/chromatic-aberration-wipe/chromatic-aberration-wipe.html
new file mode 100644
index 0000000000..d0545aace4
--- /dev/null
+++ b/registry/components/chromatic-aberration-wipe/chromatic-aberration-wipe.html
@@ -0,0 +1,165 @@
+<!--
+  Chromatic Aberration Wipe - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result as a custom property
+  the CSS consumes. The timeline recipe below is untouched by them: it keeps
+  driving one clip edge, one pair of offsets and one channel-split flash, and
+  these decide which way that edge sweeps and how hard the flash reads.
+
+    - direction (left | right | up | down, default left): the direction the
+      reveal travels. Both scenes slide the same way and the wipe edge follows,
+      so up and down turn the horizontal wipe into a vertical one.
+    - accent (blue | green | violet, default blue): the incoming scene's
+      gradient family.
+    - aberration (0 to 2, default 1): multiplies the red/cyan channel split.
+      0 removes it entirely, 2 doubles the offset and saturates the flash.
+
+  On every default the result is identical to the original: a left-to-right
+  wipe into the blue/violet scene with the stock RGB split.
+
+  The white sheen sweeps horizontally in every direction; it is a flash rather
+  than an edge, so it is left alone.
+-->
+
+<div
+  class="hf-remocn-chromatic-aberration-wipe"
+  data-composition-variables='[
+    { "id": "direction", "type": "enum", "role": "motion", "label": "Direction", "description": "The direction the reveal travels; both scenes slide the same way and the wipe edge follows.", "default": "left", "options": [{ "value": "left", "label": "Left" }, { "value": "right", "label": "Right" }, { "value": "up", "label": "Up" }, { "value": "down", "label": "Down" }] },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Colour family of the incoming scene&#39;s gradient.", "default": "blue", "options": [{ "value": "blue", "label": "Blue" }, { "value": "green", "label": "Green" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "aberration", "type": "number", "role": "style", "label": "Aberration", "description": "Multiplies the red/cyan channel split: 0 removes it, 1 is the stock strength, 2 doubles the offset and saturates the flash.", "default": 1, "min": 0, "max": 2, "step": 0.1, "unit": "x" }
+  ]'
+>
+  <div class="scene from">Before</div>
+  <div class="scene to">Chromatic Aberration Wipe</div>
+  <div class="fx"></div>
+  <div class="rgb"></div>
+</div>
+
+<style>
+  .hf-remocn-chromatic-aberration-wipe {
+    --hf-accent: #2563eb;
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-chromatic-aberration-wipe {
+    position: relative;
+    width: 760px;
+    height: 428px;
+    overflow: hidden;
+    border-radius: 30px;
+    background: #111827;
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+  }
+  .hf-remocn-chromatic-aberration-wipe .scene {
+    position: absolute;
+    inset: 0;
+    display: grid;
+    place-items: center;
+    font-weight: 900;
+    font-size: 58px;
+    letter-spacing: -0.05em;
+    color: #fff;
+  }
+  .hf-remocn-chromatic-aberration-wipe .from {
+    background: linear-gradient(135deg, #111827, #374151);
+    transform: translate(
+        calc(var(--hf-from-x, 0px) * var(--hf-wipe-ax, 1)),
+        calc(var(--hf-from-y, 0px) + var(--hf-from-x, 0px) * var(--hf-wipe-ay, 0))
+      )
+      scale(var(--hf-from-scale, 1));
+    filter: blur(var(--hf-from-blur, 0px));
+  }
+  .hf-remocn-chromatic-aberration-wipe .to {
+    background: linear-gradient(135deg, var(--hf-scene-a, #2563eb), var(--hf-scene-b, #7c3aed));
+    transform: translate(
+        calc(var(--hf-to-x, 0px) * var(--hf-wipe-ax, 1)),
+        calc(var(--hf-to-y, 0px) + var(--hf-to-x, 0px) * var(--hf-wipe-ay, 0))
+      )
+      scale(var(--hf-to-scale, 1));
+    clip-path: inset(
+      calc(var(--hf-clip-top, 0%) + var(--hf-clip-right, 100%) * var(--hf-wipe-t, 0))
+        calc(var(--hf-clip-right, 100%) * var(--hf-wipe-r, 1))
+        calc(var(--hf-clip-bottom, 0%) + var(--hf-clip-right, 100%) * var(--hf-wipe-b, 0))
+        calc(var(--hf-clip-left, 0%) + var(--hf-clip-right, 100%) * var(--hf-wipe-l, 0))
+    );
+  }
+  .hf-remocn-chromatic-aberration-wipe .fx {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
+    mix-blend-mode: screen;
+    transform: translateX(var(--hf-fx-x, -110%));
+  }
+  .hf-remocn-chromatic-aberration-wipe .rgb {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    opacity: calc(var(--hf-rgb-opacity, 0) * var(--hf-rgb-strength, 1));
+    background: linear-gradient(
+      90deg,
+      rgba(239, 68, 68, 0.35),
+      transparent,
+      rgba(34, 211, 238, 0.35)
+    );
+    transform: translateX(calc(var(--hf-rgb-x, 0px) * var(--hf-rgb-strength, 1)));
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    var directions = {
+      left: { ax: "1", ay: "0", t: "0", r: "1", b: "0", l: "0" },
+      right: { ax: "-1", ay: "0", t: "0", r: "0", b: "0", l: "1" },
+      up: { ax: "0", ay: "1", t: "1", r: "0", b: "0", l: "0" },
+      down: { ax: "0", ay: "-1", t: "0", r: "0", b: "1", l: "0" },
+    };
+    var accents = {
+      blue: ["#2563eb", "#7c3aed"],
+      green: ["#047857", "#34d399"],
+      violet: ["#6d28d9", "#a78bfa"],
+    };
+
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var direction = directions[pick(directions, vars.direction, "left")];
+    var accent = accents[pick(accents, vars.accent, "blue")];
+
+    var raw = typeof vars.aberration === "string" ? parseFloat(vars.aberration) : vars.aberration;
+    var aberration = typeof raw === "number" && isFinite(raw) ? Math.min(2, Math.max(0, raw)) : 1;
+
+    var roots = document.querySelectorAll(".hf-remocn-chromatic-aberration-wipe");
+    for (var i = 0; i < roots.length; i += 1) {
+      roots[i].style.setProperty("--hf-wipe-ax", direction.ax);
+      roots[i].style.setProperty("--hf-wipe-ay", direction.ay);
+      roots[i].style.setProperty("--hf-wipe-t", direction.t);
+      roots[i].style.setProperty("--hf-wipe-r", direction.r);
+      roots[i].style.setProperty("--hf-wipe-b", direction.b);
+      roots[i].style.setProperty("--hf-wipe-l", direction.l);
+      roots[i].style.setProperty("--hf-scene-a", accent[0]);
+      roots[i].style.setProperty("--hf-scene-b", accent[1]);
+      roots[i].style.setProperty("--hf-rgb-strength", String(aberration));
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-chromatic-aberration-wipe .to', { '--hf-clip-right': '100%', '--hf-to-x': '60px', '--hf-to-scale': 1.04 }, { '--hf-clip-right': '0%', '--hf-to-x': '0px', '--hf-to-scale': 1, duration: 0.9, ease: 'power3.inOut' }, startTime); tl.to('.hf-remocn-chromatic-aberration-wipe .from', { '--hf-from-x': '-70px', '--hf-from-scale': 0.96, '--hf-from-blur': '5px', duration: 0.9, ease: 'power3.inOut' }, startTime); tl.fromTo('.hf-remocn-chromatic-aberration-wipe .fx', { '--hf-fx-x': '-110%' }, { '--hf-fx-x': '110%', duration: 0.58, ease: 'power2.inOut' }, startTime + 0.18); tl.fromTo('.hf-remocn-chromatic-aberration-wipe .rgb', { '--hf-rgb-opacity': 0, '--hf-rgb-x': '-16px' }, { '--hf-rgb-opacity': 1, '--hf-rgb-x': '16px', repeat: 3, yoyo: true, duration: 0.07, ease: 'steps(1)' }, startTime + 0.32);
+-->
diff --git a/registry/components/chromatic-aberration-wipe/demo.html b/registry/components/chromatic-aberration-wipe/demo.html
new file mode 100644
index 0000000000..3465498272
--- /dev/null
+++ b/registry/components/chromatic-aberration-wipe/demo.html
@@ -0,0 +1,165 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Chromatic Aberration Wipe - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+        /* ponytail: scale wrapper (not a GSAP target) to fill ~65% of 1920x1080 */
+        transform: scale(1.85);
+      }
+      .hf-remocn-chromatic-aberration-wipe {
+        --hf-accent: #2563eb;
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-chromatic-aberration-wipe {
+        position: relative;
+        width: 760px;
+        height: 428px;
+        overflow: hidden;
+        border-radius: 30px;
+        background: #111827;
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+      }
+      .hf-remocn-chromatic-aberration-wipe .scene {
+        position: absolute;
+        inset: 0;
+        display: grid;
+        place-items: center;
+        font-weight: 900;
+        font-size: 58px;
+        letter-spacing: -0.05em;
+        color: #fff;
+      }
+      .hf-remocn-chromatic-aberration-wipe .from {
+        background: linear-gradient(135deg, #111827, #374151);
+        transform: translate(var(--hf-from-x, 0px), var(--hf-from-y, 0px))
+          scale(var(--hf-from-scale, 1));
+        filter: blur(var(--hf-from-blur, 0px));
+      }
+      .hf-remocn-chromatic-aberration-wipe .to {
+        background: linear-gradient(135deg, #2563eb, #7c3aed);
+        transform: translate(var(--hf-to-x, 0px), var(--hf-to-y, 0px)) scale(var(--hf-to-scale, 1));
+        clip-path: inset(
+          var(--hf-clip-top, 0%) var(--hf-clip-right, 100%) var(--hf-clip-bottom, 0%)
+            var(--hf-clip-left, 0%)
+        );
+      }
+      .hf-remocn-chromatic-aberration-wipe .fx {
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
+        mix-blend-mode: screen;
+        transform: translateX(var(--hf-fx-x, -110%));
+      }
+      .hf-remocn-chromatic-aberration-wipe .rgb {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        opacity: var(--hf-rgb-opacity, 0);
+        background: linear-gradient(
+          90deg,
+          rgba(239, 68, 68, 0.35),
+          transparent,
+          rgba(34, 211, 238, 0.35)
+        );
+        transform: translateX(var(--hf-rgb-x, 0px));
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="chromatic-aberration-wipe-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-chromatic-aberration-wipe">
+          <div class="scene from">Before</div>
+          <div class="scene to">Chromatic Aberration Wipe</div>
+          <div class="fx"></div>
+          <div class="rgb"></div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-chromatic-aberration-wipe .to",
+          { "--hf-clip-right": "100%", "--hf-to-x": "60px", "--hf-to-scale": 1.04 },
+          {
+            "--hf-clip-right": "0%",
+            "--hf-to-x": "0px",
+            "--hf-to-scale": 1,
+            duration: 0.9,
+            ease: "power3.inOut",
+          },
+          startTime,
+        );
+        tl.to(
+          ".hf-remocn-chromatic-aberration-wipe .from",
+          {
+            "--hf-from-x": "-70px",
+            "--hf-from-scale": 0.96,
+            "--hf-from-blur": "5px",
+            duration: 0.9,
+            ease: "power3.inOut",
+          },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-chromatic-aberration-wipe .fx",
+          { "--hf-fx-x": "-110%" },
+          { "--hf-fx-x": "110%", duration: 0.58, ease: "power2.inOut" },
+          startTime + 0.18,
+        );
+        tl.fromTo(
+          ".hf-remocn-chromatic-aberration-wipe .rgb",
+          { "--hf-rgb-opacity": 0, "--hf-rgb-x": "-16px" },
+          {
+            "--hf-rgb-opacity": 1,
+            "--hf-rgb-x": "16px",
+            repeat: 3,
+            yoyo: true,
+            duration: 0.07,
+            ease: "steps(1)",
+          },
+          startTime + 0.32,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["chromatic-aberration-wipe-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/chromatic-aberration-wipe/registry-item.json b/registry/components/chromatic-aberration-wipe/registry-item.json
new file mode 100644
index 0000000000..f911fc4204
--- /dev/null
+++ b/registry/components/chromatic-aberration-wipe/registry-item.json
@@ -0,0 +1,80 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "chromatic-aberration-wipe",
+  "type": "hyperframes:component",
+  "title": "Chromatic Aberration Wipe",
+  "description": "A fast slide wipe with RGB channel split on peak frames.",
+  "tags": ["video-primitive", "transition-primitive", "remocn-port"],
+  "files": [
+    {
+      "path": "chromatic-aberration-wipe.html",
+      "target": "compositions/components/chromatic-aberration-wipe.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "direction",
+      "type": "enum",
+      "role": "motion",
+      "label": "Direction",
+      "description": "The direction the reveal travels; both scenes slide the same way and the wipe edge follows.",
+      "default": "left",
+      "options": [
+        {
+          "value": "left",
+          "label": "Left"
+        },
+        {
+          "value": "right",
+          "label": "Right"
+        },
+        {
+          "value": "up",
+          "label": "Up"
+        },
+        {
+          "value": "down",
+          "label": "Down"
+        }
+      ]
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Colour family of the incoming scene's gradient.",
+      "default": "blue",
+      "options": [
+        {
+          "value": "blue",
+          "label": "Blue"
+        },
+        {
+          "value": "green",
+          "label": "Green"
+        },
+        {
+          "value": "violet",
+          "label": "Violet"
+        }
+      ]
+    },
+    {
+      "id": "aberration",
+      "type": "number",
+      "role": "style",
+      "label": "Aberration",
+      "description": "Multiplies the red/cyan channel split: 0 removes it, 1 is the stock strength, 2 doubles the offset and saturates the flash.",
+      "default": 1,
+      "min": 0,
+      "max": 2,
+      "step": 0.1,
+      "unit": "x"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/chromatic-aberration-wipe.png"
+  }
+}
diff --git a/registry/components/code-terminal-run/README.md b/registry/components/code-terminal-run/README.md
new file mode 100644
index 0000000000..11b77b390b
--- /dev/null
+++ b/registry/components/code-terminal-run/README.md
@@ -0,0 +1,121 @@
+# code-terminal-run
+
+A token-chrome terminal panel runs one command. The prompt line types itself
+deterministically behind an integer-cycle blinking caret (the typed-prompt
+text-at-time law), the command executes after a beat, output lines print one
+per cue with a leading beat, and a fresh prompt with a solid caret appears
+once the run completes. Then the panel holds still.
+
+5s authored, elastic HOLD, exit `none` by default.
+
+## Files
+
+- `code-terminal-run.html`: the mountable sub-composition (install target:
+  `compositions/components/code-terminal-run.html`).
+- `registry-item.json`: registry metadata and the variables block.
+- `demo.html`: standalone 1920x1080 host that mounts the primitive with
+  non-default variables.
+
+## Variables
+
+| id             | type   | default | notes                                                                                    |
+| -------------- | ------ | ------- | ---------------------------------------------------------------------------------------- |
+| `prompt_glyph` | string | `$`     | leading glyph on the command and trailing prompt; empty string hides it                  |
+| `cadence`      | enum   | `human` | `uniform` fixed steps or `human` seeded 1-3 char chunks (fixed LCG seed)                 |
+| `cues`         | string | ``      | comma seconds from mount start; cue N sets when output line N prints                     |
+| `accent`       | enum   | `green` | glyph + caret: `green` maps to `--brand`, `blue` to `--accent`, `violet` to `--accent-2` |
+| `exit`         | enum   | `none`  | `none` holds the final frame; `fade` and `up` release the stage                          |
+
+Envelope: panel settles over 0.5s, typing runs from 0.4s at its natural
+cadence, an execute beat follows, output lines print (defaults: a 0.3s leading
+beat after execute, then one line per 0.3s), and the trailing prompt lands.
+The whole schedule compresses proportionally only if it would overflow
+`duration - OUT`; HOLD is the sole elastic phase (never `timeScale`). The
+`command-run` sync point marks the execute beat, about 3.1s at defaults.
+
+## The slot mechanism
+
+The primitive ships one named slot inside its `<template>`:
+
+```html
+<div class="ctr-slot" data-slot="content">
+  <div data-terminal="command">...</div>
+  <div data-terminal="output">...</div>
+  ...
+</div>
+```
+
+The default children are a generic build-tool sample (no product branding).
+To show your own run, install the component and **replace the children of the
+`[data-slot="content"]` element in your installed copy** (the runtime clones
+only the primitive's own template on mount, so slot content lives in the
+component file, not on the host clip).
+
+Rules:
+
+- Keep exactly one `[data-terminal="command"]` element. Its full text is what
+  gets typed; the caret is appended automatically.
+- Add any number of `[data-terminal="output"]` elements, in print order. Each
+  prints on its cue (or on the authored rhythm when `cues` is empty).
+- Token coloring is authored, not parsed: wrap substrings in spans with these
+  classes and each routes to one contract token.
+
+| class      | token        | use for                        |
+| ---------- | ------------ | ------------------------------ |
+| `ct-str`   | `--brand`    | quoted strings                 |
+| `ct-flag`  | `--accent`   | flags and options              |
+| `ct-path`  | `--accent-2` | file paths and targets         |
+| `ct-ok`    | `--brand`    | success markers in output      |
+| `ct-muted` | `--muted`    | dim annotations (sizes, times) |
+
+Typing reveals characters across the command's text nodes in document order,
+so the spans keep their colors mid-word and every seek direction renders the
+same colored string for the same time.
+
+## Worked example
+
+Install, then author your own run:
+
+```bash
+npx hyperframes add code-terminal-run
+```
+
+In `compositions/components/code-terminal-run.html`, replace the slot
+children:
+
+```html
+<div class="ctr-slot" data-slot="content">
+  <div data-terminal="command">
+    deploy <span class="ct-path">./site</span> <span class="ct-flag">--region</span>
+    <span class="ct-str">"eu-west"</span>
+  </div>
+  <div data-terminal="output"><span class="ct-muted">-</span> uploading 14 files</div>
+  <div data-terminal="output"><span class="ct-ok">ok</span> live in 900 ms</div>
+</div>
+```
+
+Mount it from a host composition like any sub-composition:
+
+```html
+<div
+  class="clip"
+  data-composition-id="code-terminal-run"
+  data-composition-src="./components/code-terminal-run.html"
+  data-variable-values='{"prompt_glyph":">","cues":"2.6,3.1","accent":"blue"}'
+  data-start="2"
+  data-duration="5"
+  data-track-index="0"
+></div>
+```
+
+Elastic root: no `data-width`/`data-height`; it fills whatever box the host
+clip gives it. Timeline registers under the literal `code-terminal-run` key.
+
+## Notes
+
+- Deterministic: fixed LCG seed `0x51ec0ded`, one chars-at-time row table
+  built before the timeline registers; nothing is incremental.
+- Output lines occupy layout from mount (they print via opacity), so the
+  panel never reflows mid-run.
+- The hold is a finite drift cycle followed by authored stillness, never a
+  repeating tween.
diff --git a/registry/components/code-terminal-run/code-terminal-run.html b/registry/components/code-terminal-run/code-terminal-run.html
new file mode 100644
index 0000000000..f876f377b4
--- /dev/null
+++ b/registry/components/code-terminal-run/code-terminal-run.html
@@ -0,0 +1,560 @@
+<!doctype html>
+<!--
+  code-terminal-run: HyperFrames video primitive (product demo / terminal)
+
+  A token-chrome terminal panel runs one command: the prompt line types itself
+  deterministically (the typed-prompt law: one text-at-time row table built
+  synchronously before the timeline registers, an integer-cycle blinking
+  caret), the command "executes" after a beat, and output lines print one per
+  cue with a leading beat. A fresh prompt line with a solid caret appears once
+  the run completes, then the panel holds still.
+
+  Token coloring is authored, not parsed: the slot content carries plain spans
+  (ct-str, ct-flag, ct-path, ct-ok, ct-muted) and CSS routes each class to a
+  contract token. Typing preserves those spans by revealing characters across
+  the command element's text nodes in document order, so the same character
+  count always renders the same colored string in either seek direction.
+
+  Slot (see README.md for a worked example):
+    - [data-slot="content"]: the authored command + output lines. Replace the
+      children of this element in your installed copy. It must contain one
+      [data-terminal="command"] element (inline spans allowed) and any number
+      of [data-terminal="output"] elements, in print order. Default: a generic
+      build-tool sample, no product branding.
+
+  Variables (declared in data-composition-variables below):
+    - prompt_glyph (string, default "$"): leading glyph on the command and the
+      trailing prompt line; empty string hides it.
+    - cadence ("uniform" | "human", default "human"): keystroke rhythm.
+      uniform = one character per fixed step; human = seeded 1-3 char chunks
+      with varied gaps (fixed LCG seed, fully deterministic).
+    - cues (string, default ""): comma-separated seconds relative to mount
+      start; cue N sets when output line N prints. Empty = authored rhythm
+      (a leading beat after execute, then one line per step).
+    - accent (green | blue | violet, default "green"): glyph + caret color.
+    - exit ("none" | "fade" | "up", default "none"): frame roots own
+      transitions; none holds the end frame.
+
+  Envelope, authored 5s, fixed IN/OUT with elastic HOLD only (never
+  gsap.timeScale()): panel settles over 0.5s, typing runs from 0.4s at its
+  natural cadence, execute beat, output prints, trailing prompt; the whole
+  schedule compresses proportionally only if it would overflow
+  duration - OUT. HOLD absorbs all extra duration (solid caret, barely-there
+  drift ending in stillness). OUT exists only when exit != none.
+
+  Mount contract: mountable sub-composition; the runtime clones only this
+  <template>. #root is elastic (no data-width/height, container-type: size),
+  styled via #root only, and registers one paused timeline under the literal
+  "code-terminal-run" key.
+-->
+<html
+  lang="en"
+  data-composition-id="code-terminal-run"
+  data-composition-duration="5"
+  data-composition-variables='[
+    { "id": "prompt_glyph", "type": "string", "role": "style", "label": "Prompt glyph", "description": "Leading glyph before the command and the trailing prompt. Empty string hides it.", "default": "$" },
+    { "id": "cadence", "type": "enum", "role": "timing", "label": "Cadence", "description": "Keystroke rhythm: uniform fixed steps or seeded human chunks.", "default": "human", "options": [{ "value": "uniform", "label": "Uniform" }, { "value": "human", "label": "Human" }] },
+    { "id": "cues", "type": "string", "role": "timing", "label": "Cues", "description": "Comma-separated seconds relative to mount start; cue N sets when output line N prints. Empty uses the authored rhythm.", "default": "" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Color of the prompt glyph and caret.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Outgoing transition. Frame roots own transitions; none holds the end frame.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Code Terminal Run</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="code-terminal-run" data-duration="5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            pointer-events: none;
+          }
+
+          .ctr-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .ctr-stage {
+            width: 84cqw;
+            max-width: 84cqw;
+            will-change: transform, opacity;
+          }
+
+          .ctr-panel {
+            overflow: hidden;
+            border: 0.16cqmin solid color-mix(in srgb, var(--border, #475569) 72%, transparent);
+            border-radius: var(--radius, 2.4cqmin);
+            background: color-mix(in srgb, var(--surface, #0b1016) 96%, var(--ctr-accent));
+            box-shadow: 0 3cqh 9cqh color-mix(in srgb, var(--bg, #000000) 38%, transparent);
+          }
+
+          .ctr-bar {
+            display: flex;
+            align-items: center;
+            gap: var(--space-1, 1.2cqw);
+            padding: var(--space-1, 1.6cqh) var(--space-2, 2.4cqw);
+            border-bottom: 0.14cqmin solid
+              color-mix(in srgb, var(--border, #475569) 55%, transparent);
+            background: color-mix(in srgb, var(--surface, #0b1016) 88%, var(--bg, #000000));
+          }
+
+          .ctr-dot {
+            width: 1.5cqmin;
+            aspect-ratio: 1;
+            border-radius: 50%;
+            background: color-mix(in srgb, var(--muted, #94a3b8) 52%, transparent);
+          }
+
+          .ctr-body {
+            padding: var(--space-2, 3cqh) var(--space-2, 3cqw);
+            min-height: 40cqh;
+          }
+
+          .ctr-slot {
+            display: block;
+          }
+
+          [data-terminal="command"],
+          [data-terminal="output"],
+          .ctr-tail {
+            font-size: var(--ctr-font-size, min(2.6cqw, 5.4cqh));
+            font-weight: 500;
+            line-height: 1.6;
+            white-space: pre-wrap;
+            overflow-wrap: anywhere;
+          }
+
+          [data-terminal="command"]::before,
+          .ctr-tail::before {
+            content: var(--ctr-glyph, "$");
+            margin-right: var(--ctr-glyph-gap, 0.9ch);
+            color: var(--ctr-accent);
+            font-weight: 600;
+          }
+
+          /* Authored token coloring: spans in the slot content, no parser.
+             Each class routes to one contract token. */
+          .ct-str {
+            color: var(--brand, #71f5a7);
+          }
+
+          .ct-flag {
+            color: var(--ctr-accent-token, var(--accent, #61a8ff));
+          }
+
+          .ct-path {
+            color: var(--accent-2, #c5a3ff);
+          }
+
+          .ct-ok {
+            color: var(--brand, #71f5a7);
+            font-weight: 600;
+          }
+
+          .ct-muted {
+            color: var(--muted, #94a3b8);
+          }
+
+          .ctr-caret {
+            display: inline-block;
+            width: 0.55ch;
+            height: 1.05em;
+            margin-left: 0.08ch;
+            background: var(--ctr-accent);
+            vertical-align: text-bottom;
+            will-change: opacity;
+          }
+        </style>
+
+        <div
+          id="code-terminal-run-clip"
+          class="ctr-clip clip"
+          data-start="0"
+          data-duration="5"
+          data-track-index="0"
+        >
+          <div class="ctr-stage" role="img">
+            <div class="ctr-panel">
+              <div class="ctr-bar" aria-hidden="true">
+                <span class="ctr-dot"></span>
+                <span class="ctr-dot"></span>
+                <span class="ctr-dot"></span>
+              </div>
+              <div class="ctr-body">
+                <div class="ctr-slot" data-slot="content">
+                  <!-- SLOT "content": replace the children of this element with
+                       your own command + output lines. Keep one
+                       [data-terminal="command"] and any number of
+                       [data-terminal="output"] elements, in print order. -->
+                  <div data-terminal="command">
+                    run build <span class="ct-path">src/app</span>
+                    <span class="ct-flag">--minify</span> <span class="ct-flag">--out</span>
+                    <span class="ct-str">"dist/app"</span>
+                  </div>
+                  <div data-terminal="output">
+                    <span class="ct-muted">-</span> resolving 128 modules
+                  </div>
+                  <div data-terminal="output">
+                    <span class="ct-muted">-</span> bundling <span class="ct-path">src/app</span>
+                  </div>
+                  <div data-terminal="output">
+                    <span class="ct-ok">ok</span> 128 modules in 412 ms
+                  </div>
+                  <div data-terminal="output">
+                    <span class="ct-ok">ok</span> wrote <span class="ct-path">dist/app</span>
+                    <span class="ct-muted">(96 kB)</span>
+                  </div>
+                </div>
+                <div class="ctr-tail" aria-hidden="true"><span class="ctr-caret"></span></div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".ctr-stage");
+            var slot = root.querySelector('[data-slot="content"]');
+            var commandElement = slot ? slot.querySelector('[data-terminal="command"]') : null;
+            var outputElements = slot
+              ? Array.prototype.slice.call(slot.querySelectorAll('[data-terminal="output"]'))
+              : [];
+            var tailElement = root.querySelector(".ctr-tail");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var promptGlyph = vars.prompt_glyph == null ? "$" : String(vars.prompt_glyph);
+            var cadence = vars.cadence === "uniform" ? "uniform" : "human";
+            var exitMode = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            // The runtime mirrors every composition variable as a --<id>
+            // custom property (host inline style + a compiled rule), so the
+            // accent VARIABLE shadows the --accent contract TOKEN with its
+            // enum keyword whenever the caller passes variables. Theme packs
+            // re-declare --accent with !important on the same elements and
+            // stay clean; only the unthemed mirror leaks through. Detect
+            // exactly that leak (the computed token IS an enum keyword) and
+            // pin the token's exact contract fallback instead, keeping live
+            // var() resolution everywhere else.
+            var accentToken = "var(--accent, #61a8ff)";
+            var computedAccent = getComputedStyle(root).getPropertyValue("--accent").trim();
+            if (
+              computedAccent === "green" ||
+              computedAccent === "blue" ||
+              computedAccent === "violet"
+            ) {
+              accentToken = "#61a8ff";
+            }
+            root.style.setProperty("--ctr-accent-token", accentToken);
+
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: accentToken,
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            root.style.setProperty("--ctr-accent", accentColors[accent]);
+            // JSON.stringify yields a valid CSS quoted string for content:.
+            root.style.setProperty("--ctr-glyph", JSON.stringify(promptGlyph));
+            if (promptGlyph === "") root.style.setProperty("--ctr-glyph-gap", "0ch");
+
+            var cueList = String(vars.cues == null ? "" : vars.cues)
+              .split(",")
+              .map(function (token) {
+                return parseFloat(token);
+              })
+              .filter(function (value) {
+                return isFinite(value) && value >= 0;
+              })
+              .sort(function (a, b) {
+                return a - b;
+              });
+
+            var ENTER = 0.5;
+            var TYPE_START = 0.4;
+            var EXEC_BEAT = 0.22;
+            var LEAD_BEAT = 0.3;
+            var OUT_STEP = 0.3;
+            var TAIL_GAP = 0.35;
+            var PRINT = 0.12;
+            var OUT_BASE = 0.45;
+            var STILLNESS = 0.3;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "5"));
+            var OUT = exitMode === "none" ? 0 : Math.min(OUT_BASE, duration * 0.2);
+            var maxEnd = Math.max(TYPE_START + 0.3, duration - OUT - STILLNESS);
+
+            // Fixed-seed LCG: the only randomness source, consumed in one
+            // deterministic order during this synchronous build.
+            var lcgState = 0x51ec0ded;
+            function rnd() {
+              lcgState = (Math.imul(1664525, lcgState) + 1013904223) >>> 0;
+              return lcgState / 4294967296;
+            }
+            function chunksOf(word) {
+              if (cadence === "uniform") return Array.from(word);
+              var out = [];
+              var i = 0;
+              while (i < word.length) {
+                var n = 1 + Math.floor(rnd() * 3);
+                out.push(word.slice(i, i + n));
+                i += n;
+              }
+              return out;
+            }
+            function chunkGap(chunk) {
+              if (cadence === "uniform") return chunk.length * 0.05;
+              return chunk.length * (0.04 + rnd() * 0.03);
+            }
+
+            // Typing preserves the authored coloring spans: characters reveal
+            // across the command's text nodes in document order, so a given
+            // count always renders the same colored string in either seek
+            // direction. The caret is appended last, after node collection,
+            // so empty trailing nodes keep it hugging the visible end.
+            var textNodes = [];
+            if (commandElement) {
+              var walker = document.createTreeWalker(commandElement, NodeFilter.SHOW_TEXT, null);
+              while (walker.nextNode()) {
+                textNodes.push({ node: walker.currentNode, full: walker.currentNode.data });
+              }
+            }
+            var fullText = textNodes
+              .map(function (entry) {
+                return entry.full;
+              })
+              .join("");
+            function showChars(count) {
+              var remaining = count;
+              for (var i = 0; i < textNodes.length; i += 1) {
+                var entry = textNodes[i];
+                var take = Math.min(entry.full.length, Math.max(0, remaining));
+                entry.node.data = entry.full.slice(0, take);
+                remaining -= entry.full.length;
+              }
+            }
+            var caretElement = null;
+            if (commandElement) {
+              caretElement = document.createElement("span");
+              caretElement.className = "ctr-caret";
+              caretElement.setAttribute("aria-hidden", "true");
+              commandElement.appendChild(caretElement);
+            }
+            stage.setAttribute("aria-label", (promptGlyph + " " + fullText).trim());
+
+            // The complete chars-at-time table. Built exactly once; the
+            // timeline only ever reads it (the typed-prompt law).
+            var rows = [{ t: 0, n: 0 }];
+            (function buildRows() {
+              var t = TYPE_START;
+              var n = 0;
+              fullText.split(/(\s+)/).forEach(function (segment) {
+                if (segment === "") return;
+                if (/^\s+$/.test(segment)) {
+                  t += cadence === "uniform" ? 0.11 : 0.1 + rnd() * 0.1;
+                  n += segment.length;
+                  rows.push({ t: t, n: n });
+                  return;
+                }
+                chunksOf(segment).forEach(function (chunk) {
+                  t += chunkGap(chunk);
+                  n += chunk.length;
+                  rows.push({ t: t, n: n });
+                });
+              });
+            })();
+
+            // Natural schedule: type, execute beat, one output per step after
+            // a leading beat, then the trailing prompt.
+            var typeEnd = Math.max(rows[rows.length - 1].t, TYPE_START + 0.01);
+            var execAt = typeEnd + EXEC_BEAT;
+            var outAts = outputElements.map(function (element, index) {
+              return execAt + LEAD_BEAT + index * OUT_STEP;
+            });
+            var tailAt = (outAts.length > 0 ? outAts[outAts.length - 1] : execAt) + TAIL_GAP;
+
+            // Compress the whole schedule proportionally only if it would
+            // overflow the window before OUT; extra duration becomes HOLD,
+            // never timeScale.
+            var naturalEnd = tailAt + PRINT;
+            if (naturalEnd > maxEnd) {
+              var factor = (maxEnd - TYPE_START) / (naturalEnd - TYPE_START);
+              var squeeze = function (time) {
+                return time <= TYPE_START ? time : TYPE_START + (time - TYPE_START) * factor;
+              };
+              rows.forEach(function (row) {
+                row.t = squeeze(row.t);
+              });
+              typeEnd = Math.max(rows[rows.length - 1].t, TYPE_START + 0.01);
+              execAt = squeeze(execAt);
+              outAts = outAts.map(squeeze);
+              tailAt = squeeze(tailAt);
+            }
+
+            // Cue overrides: cue N pins output line N, clamped after execute
+            // and inside the window; un-cued lines follow the previous line.
+            if (cueList.length > 0) {
+              var previous = execAt + LEAD_BEAT - OUT_STEP;
+              outAts = outAts.map(function (defaultAt, index) {
+                var at = cueList[index] != null ? cueList[index] : previous + OUT_STEP;
+                at = Math.max(execAt + 0.05, Math.min(maxEnd - PRINT, at));
+                at = Math.max(at, previous + 0.05);
+                previous = at;
+                return at;
+              });
+              tailAt = (outAts.length > 0 ? outAts[outAts.length - 1] : execAt) + TAIL_GAP;
+            }
+            tailAt = Math.max(execAt + 0.1, Math.min(maxEnd - PRINT, tailAt));
+
+            // 1ms tolerance: GSAP snaps a tween's end value below the row
+            // table's accumulated float times, far under one frame.
+            function charsAt(time) {
+              for (var i = rows.length - 1; i >= 0; i -= 1) {
+                if (time >= rows[i].t - 0.001) return rows[i].n;
+              }
+              return 0;
+            }
+
+            // Fit the mono size to the widest line and the line count.
+            var lineElements = [commandElement].concat(outputElements, [tailElement]);
+            var maxLength = lineElements.reduce(function (best, element) {
+              if (!element) return best;
+              var length = (element === commandElement ? fullText : element.textContent).length;
+              return Math.max(best, length + promptGlyph.length + 3);
+            }, 12);
+            var fittedCqw = Math.max(2, Math.min(3.2, 108 / maxLength));
+            var cappedCqh = Math.max(3.2, Math.min(6.4, 46 / (lineElements.length * 1.6)));
+            root.style.setProperty(
+              "--ctr-font-size",
+              "min(" + fittedCqw.toFixed(3) + "cqw, " + cappedCqh.toFixed(3) + "cqh)",
+            );
+
+            gsap.set(stage, { opacity: 0, y: "2.6cqh" });
+            if (outputElements.length > 0) gsap.set(outputElements, { opacity: 0 });
+            if (tailElement) gsap.set(tailElement, { opacity: 0 });
+            showChars(0);
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: one panel settle, then the table drives every typed frame.
+            tl.to(stage, { opacity: 1, duration: ENTER, ease: "power2.out" }, 0);
+            tl.to(stage, { y: "0cqh", duration: ENTER, ease: "power3.out" }, 0);
+
+            var typeDriver = { t: 0 };
+            tl.to(
+              typeDriver,
+              {
+                t: typeEnd,
+                duration: typeEnd,
+                ease: "none",
+                onUpdate: function () {
+                  showChars(charsAt(typeDriver.t));
+                },
+              },
+              0,
+            );
+
+            // Caret: integer sine cycles across exactly the typing window,
+            // then a pin to solid, then hidden at execute (the command has
+            // been submitted; the trailing prompt owns the caret from there).
+            if (caretElement) {
+              var cycles = Math.max(1, Math.round(typeEnd / 0.9));
+              var blink = { p: 0 };
+              tl.to(
+                blink,
+                {
+                  p: Math.PI * 2 * cycles,
+                  duration: typeEnd,
+                  ease: "none",
+                  onUpdate: function () {
+                    // >= 0 keeps phase 0 identical to the caret's unrendered
+                    // initial state (opacity 1) for forward vs backward seeks.
+                    caretElement.style.opacity = Math.sin(blink.p) >= 0 ? "1" : "0";
+                  },
+                },
+                0,
+              );
+              tl.set(caretElement, { opacity: 1 }, typeEnd);
+              tl.set(caretElement, { opacity: 0 }, execAt);
+            }
+
+            // Output lines print on their cues: a print-fast fade, no motion.
+            outputElements.forEach(function (element, index) {
+              tl.fromTo(
+                element,
+                { opacity: 0 },
+                { opacity: 1, duration: PRINT, ease: "none" },
+                outAts[index],
+              );
+            });
+
+            // The run completes: a fresh prompt with a solid caret appears.
+            if (tailElement) {
+              tl.fromTo(
+                tailElement,
+                { opacity: 0 },
+                { opacity: 1, duration: PRINT, ease: "none" },
+                tailAt,
+              );
+            }
+
+            // HOLD: barely-there drift ending at exactly zero, then authored
+            // stillness before any departure.
+            var OUT_START = duration - OUT;
+            var settleEnd = tailAt + PRINT;
+            var holdSpan = OUT_START - settleEnd;
+            if (holdSpan > 0.9) {
+              var driftHalf = (holdSpan - STILLNESS) / 2;
+              tl.to(stage, { y: "-0.45cqh", duration: driftHalf, ease: "sine.inOut" }, settleEnd);
+              tl.to(
+                stage,
+                { y: "0cqh", duration: driftHalf, ease: "sine.inOut" },
+                settleEnd + driftHalf,
+              );
+            }
+
+            // OUT: only when the exit variable asks for one.
+            if (exitMode !== "none") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+              if (exitMode === "up") {
+                tl.to(stage, { y: "-4cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              }
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["code-terminal-run"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/code-terminal-run/demo.html b/registry/components/code-terminal-run/demo.html
new file mode 100644
index 0000000000..7f1840df6b
--- /dev/null
+++ b/registry/components/code-terminal-run/demo.html
@@ -0,0 +1,90 @@
+<!doctype html>
+<!--
+  code-terminal-run demo. This standalone composition mounts the primitive
+  through data-composition-src. Non-default glyph, cadence, cues, and accent
+  values prove the variable path while the primitive remains elastic to its
+  host.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Code Terminal Run Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #0b0c0e);
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --muted: #94a3b8;
+        --surface: #14171c;
+        --border: #343a46;
+        --brand: #71f5a7;
+        --accent: #61a8ff;
+        --accent-2: #c5a3ff;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(
+          ellipse at 50% 44%,
+          var(--bg, #171a20) 0%,
+          var(--bg, #0b0c0e) 72%
+        );
+      }
+
+      .mount-card {
+        width: 72%;
+        height: 66%;
+        left: 14%;
+        top: 17%;
+        container-type: size;
+        overflow: hidden;
+        border-radius: 30px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="code-terminal-run-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+      data-fps="30"
+    >
+      <div
+        id="code-terminal-run-mount"
+        class="mount-card clip"
+        data-composition-id="code-terminal-run"
+        data-composition-src="./code-terminal-run.html"
+        data-variable-values='{"prompt_glyph":"&gt;","cadence":"uniform","cues":"2.7,3,3.3,3.7","accent":"blue"}'
+        data-start="0"
+        data-duration="5"
+        data-track-index="0"
+        data-width="1382"
+        data-height="713"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["code-terminal-run-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/code-terminal-run/registry-item.json b/registry/components/code-terminal-run/registry-item.json
new file mode 100644
index 0000000000..ca0eb2ba65
--- /dev/null
+++ b/registry/components/code-terminal-run/registry-item.json
@@ -0,0 +1,76 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "code-terminal-run",
+  "type": "hyperframes:component",
+  "title": "Code Terminal Run",
+  "description": "A token-chrome terminal panel runs one command: the prompt line types deterministically behind an integer-cycle caret, executes after a beat, and output lines print one per cue before a fresh prompt appears.",
+  "tags": ["motion-primitive", "product-demo", "terminal", "typing", "deterministic"],
+  "jobs": ["demonstrate"],
+  "family": "ui-props",
+  "profile": "typing",
+  "evidence": "Wave J2 J2-7 code-terminal-run specification; the typed-prompt text-at-time law generalized to rich authored spans (character reveal across text nodes preserves token coloring)",
+  "syncPoints": [{ "id": "command-run", "phase": "in", "offset": 3.1 }],
+  "files": [
+    {
+      "path": "code-terminal-run.html",
+      "target": "compositions/components/code-terminal-run.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "prompt_glyph",
+      "type": "string",
+      "role": "style",
+      "label": "Prompt glyph",
+      "description": "Leading glyph before the command and the trailing prompt. Empty string hides it.",
+      "default": "$"
+    },
+    {
+      "id": "cadence",
+      "type": "enum",
+      "role": "timing",
+      "label": "Cadence",
+      "description": "Keystroke rhythm: uniform fixed steps or seeded human chunks.",
+      "default": "human",
+      "options": [
+        { "value": "uniform", "label": "Uniform" },
+        { "value": "human", "label": "Human" }
+      ]
+    },
+    {
+      "id": "cues",
+      "type": "string",
+      "role": "timing",
+      "label": "Cues",
+      "description": "Comma-separated seconds relative to mount start; cue N sets when output line N prints. Empty uses the authored rhythm.",
+      "default": ""
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Color of the prompt glyph and caret.",
+      "default": "green",
+      "options": [
+        { "value": "green", "label": "Green" },
+        { "value": "blue", "label": "Blue" },
+        { "value": "violet", "label": "Violet" }
+      ]
+    },
+    {
+      "id": "exit",
+      "type": "enum",
+      "role": "timing",
+      "label": "Exit",
+      "description": "Outgoing transition. Frame roots own transitions; none holds the end frame.",
+      "default": "none",
+      "options": [
+        { "value": "none", "label": "None" },
+        { "value": "fade", "label": "Fade" },
+        { "value": "up", "label": "Up" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/comparison-split/comparison-split.html b/registry/components/comparison-split/comparison-split.html
new file mode 100644
index 0000000000..080021976e
--- /dev/null
+++ b/registry/components/comparison-split/comparison-split.html
@@ -0,0 +1,449 @@
+<!doctype html>
+<!--
+  comparison-split: HyperFrames video primitive (ui-props / holdable / compare)
+
+  Concept: two full-bleed treatments share one frame. The muted before panel
+  stays fully visible as the base, while the vivid after panel wipes over it
+  from the leading edge. A persistent divider marks the shared clip boundary.
+  One mechanic, one job: compare two visual states.
+
+  Compiled-from evidence: fixture + blueprint (re-filed from prove), from the
+  video-primitives compare shelf.
+
+  Use when: a scene needs a direct before-and-after comparison, a redesign
+  reveal, or a visual treatment contrast that must remain readable during a
+  long hold.
+
+  Variables (declared in data-composition-variables below):
+    - split (number, default 50, range 0 to 100%): target resting position.
+    - orientation (horizontal | vertical, default horizontal): horizontal uses
+      a vertical divider traveling left to right, vertical uses a horizontal
+      divider traveling top to bottom.
+    - labelA (string, default "Before"): caption on the base panel.
+    - labelB (string, default "After"): caption on the revealed panel.
+
+  Envelope (fixed IN/OUT, elastic HOLD only, never gsap.timeScale()):
+    IN_BASE  = 1.40s  stage settles, then the divider wipes from 0% to split
+    HOLD     = elastic = max(0, D - (IN_BASE + OUT_BASE)); deliberately still
+               so the target comparison remains easy to inspect
+    OUT_BASE = 0.50s  release fade
+    If D < IN_BASE + OUT_BASE, IN and OUT scale down together so IN + OUT == D
+    and HOLD == 0.
+
+  Sync point: wipe-land is fixed at WIPE_END_BASE = 1.30s inside IN. It scales
+  proportionally only when the full envelope is shorter than 1.90s, and never
+  moves into elastic HOLD.
+
+  Sound cue: a soft wipe landing hook fires at wipe-land. This primitive never
+  plays audio. It dispatches a bubbling `hf:sfx` CustomEvent with id
+  "wipe-land-soft", so scene-level audio mixing owns playback.
+
+  Mount contract: this file is a MOUNTABLE SUB-COMPOSITION. A host loads it via
+  data-composition-src, and the runtime clones only <template> contents. All
+  live styles, markup, GSAP, and timeline registration therefore live inside
+  <template>. #root is styled by id, fills the host with inset:0, establishes
+  the cqw/cqh container, and has no data-width or data-height. The composition
+  id is the hardcoded literal "comparison-split" because mount flattening
+  strips data-composition-id from the live root. Variables come from
+  window.__hyperframes.getVariables(), which merges declared defaults with
+  per-instance host overrides.
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "split", "type": "number", "role": "layout", "label": "Split position", "description": "Target resting position of the comparison divider.", "default": 50, "min": 0, "max": 100, "step": 1, "unit": "%" },
+    { "id": "orientation", "type": "enum", "role": "layout", "label": "Orientation", "description": "Axis and direction used by the comparison wipe.", "default": "horizontal", "options": [{ "value": "horizontal", "label": "Horizontal" }, { "value": "vertical", "label": "Vertical" }] },
+    { "id": "labelA", "type": "string", "role": "content", "label": "Before label", "description": "Caption shown on the base before panel.", "default": "Before" },
+    { "id": "labelB", "type": "string", "role": "content", "label": "After label", "description": "Caption shown on the revealed after panel.", "default": "After" }
+  ]'
+>
+  <head>
+    <!-- The mount runtime reads variables from <html>, then discards everything
+         outside <template>, including this head. -->
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="comparison-split" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          /* Root fills the host-owned box. Every internal measurement uses
+             cqw/cqh, and every painted color comes from a theme token. */
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            background: var(--bg, #07111f);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+          }
+
+          .cs-clip,
+          .cs-stage,
+          .cs-panel {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+          }
+
+          .cs-clip {
+            overflow: hidden;
+          }
+
+          .cs-stage {
+            --cs-split: 0;
+            opacity: 0;
+          }
+
+          .cs-before {
+            background:
+              linear-gradient(
+                  color-mix(in srgb, var(--border, #334155) 38%, transparent) 0.12cqw,
+                  transparent 0.12cqw
+                )
+                0 0 / 5cqw 5cqw,
+              linear-gradient(
+                  90deg,
+                  color-mix(in srgb, var(--border, #334155) 38%, transparent) 0.12cqw,
+                  transparent 0.12cqw
+                )
+                0 0 / 5cqw 5cqw,
+              var(--surface, #172033);
+          }
+
+          .cs-after {
+            z-index: 2;
+            clip-path: inset(0 calc((100 - var(--cs-split)) * 1%) 0 0);
+            background: color-mix(in srgb, var(--fg, #f8fafc) 18%, var(--surface, #172033));
+          }
+
+          .cs-window {
+            position: absolute;
+            left: 14cqw;
+            top: 18cqh;
+            width: 72cqw;
+            height: 64cqh;
+            overflow: hidden;
+            border-radius: min(3cqw, 5cqh);
+            border: 0.16cqw solid var(--border, #334155);
+            background: color-mix(in srgb, var(--surface, #172033) 90%, var(--muted, #94a3b8));
+            box-shadow: 0 2.2cqh 6cqw color-mix(in srgb, var(--bg, #07111f) 50%, transparent);
+          }
+
+          .cs-after .cs-window {
+            border-color: color-mix(in srgb, var(--fg, #f8fafc) 45%, transparent);
+            background: color-mix(in srgb, var(--fg, #f8fafc) 8%, var(--surface, #172033));
+            box-shadow: 0 2.2cqh 7cqw rgba(0, 0, 0, 0.18);
+          }
+
+          .cs-toolbar {
+            display: flex;
+            align-items: center;
+            gap: var(--space-1, 1.2cqw);
+            height: 12cqh;
+            padding: 0 var(--space-2, 2.4cqw);
+            border-bottom: 0.14cqw solid var(--border, #334155);
+          }
+
+          .cs-dot {
+            width: min(2.2cqw, 3.2cqh);
+            aspect-ratio: 1;
+            border-radius: 50%;
+            background: var(--muted, #94a3b8);
+            opacity: 0.55;
+          }
+
+          .cs-after .cs-dot {
+            background: var(--accent, #f8fafc);
+            opacity: 1;
+          }
+
+          .cs-content {
+            position: relative;
+            height: 52cqh;
+          }
+
+          .cs-copy {
+            position: absolute;
+            left: 7cqw;
+            top: 9cqh;
+            width: 31cqw;
+          }
+
+          .cs-line {
+            height: 2.3cqh;
+            margin-bottom: var(--space-2, 2.4cqh);
+            border-radius: 2cqh;
+            background: var(--muted, #94a3b8);
+            opacity: 0.48;
+          }
+
+          .cs-line:nth-child(1) {
+            width: 94%;
+          }
+
+          .cs-line:nth-child(2) {
+            width: 72%;
+          }
+
+          .cs-line:nth-child(3) {
+            width: 48%;
+          }
+
+          .cs-after .cs-line {
+            background: color-mix(in srgb, var(--fg, #f8fafc) 72%, transparent);
+            opacity: 1;
+          }
+
+          .cs-visual {
+            position: absolute;
+            right: 7cqw;
+            top: 7cqh;
+            width: min(22cqw, 32cqh);
+            aspect-ratio: 1;
+            border-radius: 36% 64% 58% 42%;
+            border: 0.3cqw solid var(--border, #334155);
+            background: var(--muted, #94a3b8);
+            opacity: 0.5;
+          }
+
+          .cs-after .cs-visual {
+            border-color: color-mix(in srgb, var(--fg, #f8fafc) 45%, transparent);
+            background: color-mix(in srgb, var(--fg, #f8fafc) 72%, transparent);
+            box-shadow: 0 0 5cqw rgba(0, 0, 0, 0.18);
+            opacity: 1;
+          }
+
+          .cs-label {
+            position: absolute;
+            z-index: 4;
+            top: var(--space-3, 4cqh);
+            padding: var(--space-1, 1.2cqh) var(--space-2, 2.2cqw);
+            border: 0.14cqw solid var(--border, #334155);
+            border-radius: 999cqw;
+            background: var(--surface, #172033);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: min(3cqw, 4.2cqh);
+            font-weight: 700;
+            letter-spacing: 0.08em;
+            line-height: 1;
+            text-transform: uppercase;
+            white-space: nowrap;
+          }
+
+          .cs-before .cs-label {
+            right: var(--space-3, 4cqw);
+            color: var(--muted, #94a3b8);
+          }
+
+          .cs-after .cs-label {
+            left: var(--space-3, 4cqw);
+            border-color: color-mix(in srgb, var(--fg, #f8fafc) 45%, transparent);
+            background: color-mix(in srgb, var(--fg, #f8fafc) 8%, var(--surface, #172033));
+          }
+
+          .cs-divider {
+            position: absolute;
+            z-index: 5;
+            top: 0;
+            bottom: 0;
+            left: calc(var(--cs-split) * 1%);
+            width: 0.45cqw;
+            transform: translateX(-50%);
+            background: var(--fg, #f8fafc);
+            box-shadow:
+              0 0 1.4cqw color-mix(in srgb, var(--fg, #f8fafc) 45%, transparent),
+              0 0 3cqw rgba(0, 0, 0, 0.45);
+            pointer-events: none;
+          }
+
+          .cs-divider::after {
+            content: "";
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            width: min(5cqw, 7cqh);
+            aspect-ratio: 1;
+            transform: translate(-50%, -50%);
+            border: 0.3cqw solid var(--bg, #07111f);
+            border-radius: 50%;
+            background: var(--fg, #f8fafc);
+            box-shadow: 0 0 2.2cqw color-mix(in srgb, var(--fg, #f8fafc) 45%, transparent);
+          }
+
+          /* INVARIANT: vertical changes only the axis mapping. The after clip
+             and divider still read the same --cs-split value. */
+          #root[data-orientation="vertical"] .cs-after {
+            clip-path: inset(0 0 calc((100 - var(--cs-split)) * 1%) 0);
+          }
+
+          #root[data-orientation="vertical"] .cs-before .cs-label {
+            top: auto;
+            right: var(--space-3, 4cqw);
+            bottom: var(--space-3, 4cqh);
+          }
+
+          #root[data-orientation="vertical"] .cs-divider {
+            top: calc(var(--cs-split) * 1%);
+            right: 0;
+            bottom: auto;
+            left: 0;
+            width: 100%;
+            height: 0.45cqh;
+            transform: translateY(-50%);
+          }
+        </style>
+
+        <div
+          id="comparison-split-clip"
+          class="cs-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="cs-stage">
+            <section class="cs-panel cs-before" aria-label="Before panel">
+              <div class="cs-label"></div>
+              <div class="cs-window">
+                <div class="cs-toolbar">
+                  <span class="cs-dot"></span>
+                  <span class="cs-dot"></span>
+                  <span class="cs-dot"></span>
+                </div>
+                <div class="cs-content">
+                  <div class="cs-copy">
+                    <div class="cs-line"></div>
+                    <div class="cs-line"></div>
+                    <div class="cs-line"></div>
+                  </div>
+                  <div class="cs-visual"></div>
+                </div>
+              </div>
+            </section>
+
+            <section class="cs-panel cs-after" aria-label="After panel">
+              <div class="cs-label"></div>
+              <div class="cs-window">
+                <div class="cs-toolbar">
+                  <span class="cs-dot"></span>
+                  <span class="cs-dot"></span>
+                  <span class="cs-dot"></span>
+                </div>
+                <div class="cs-content">
+                  <div class="cs-copy">
+                    <div class="cs-line"></div>
+                    <div class="cs-line"></div>
+                    <div class="cs-line"></div>
+                  </div>
+                  <div class="cs-visual"></div>
+                </div>
+              </div>
+            </section>
+
+            <div class="cs-divider" aria-hidden="true"></div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            // Hardcoded because mount flattening strips data-composition-id
+            // from the live root before this timeline registers.
+            var compositionId = "comparison-split";
+            var stage = root.querySelector(".cs-stage");
+            var labelAEl = root.querySelector(".cs-before .cs-label");
+            var labelBEl = root.querySelector(".cs-after .cs-label");
+
+            // EDIT ZONE: declarations above and registry metadata change
+            // together. This API owns defaults plus per-instance overrides.
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var rawSplit = vars.split == null ? 50 : Number(vars.split);
+            // INVARIANT: split always clamps into the declared 0 to 100 range.
+            var splitPct = Number.isFinite(rawSplit) ? Math.max(0, Math.min(100, rawSplit)) : 50;
+            // INVARIANT: only horizontal or vertical reaches the renderer.
+            var orientation = vars.orientation === "vertical" ? "vertical" : "horizontal";
+            var labelAText = vars.labelA == null ? "" : String(vars.labelA);
+            var labelBText = vars.labelB == null ? "" : String(vars.labelB);
+
+            root.setAttribute("data-orientation", orientation);
+            labelAEl.textContent = labelAText;
+            labelBEl.textContent = labelBText;
+
+            // RETIME RANGE: fixed IN and OUT scale together only when D is too
+            // short. HOLD is the sole elastic phase. Never use timeScale().
+            var IN_BASE = 1.4;
+            var OUT_BASE = 0.5;
+            var STAGE_IN_BASE = 0.32;
+            var WIPE_AT_BASE = 0.25;
+            var WIPE_DURATION_BASE = 1.05;
+            var WIPE_END_BASE = WIPE_AT_BASE + WIPE_DURATION_BASE;
+
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var totalBase = IN_BASE + OUT_BASE;
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var STAGE_IN = STAGE_IN_BASE * scale;
+            var WIPE_AT = WIPE_AT_BASE * scale;
+            var WIPE_DURATION = WIPE_DURATION_BASE * scale;
+            var WIPE_END = WIPE_END_BASE * scale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var OUT_START = IN + HOLD;
+
+            function fireSfx(id, t) {
+              root.dispatchEvent(
+                new CustomEvent("hf:sfx", { detail: { id: id, t: t }, bubbles: true }),
+              );
+            }
+
+            // Explicit both-endpoints state makes tl.seek(0) deterministic.
+            // --cs-split is the only owner of both clip and divider progress.
+            gsap.set(stage, { opacity: 0, "--cs-split": 0 });
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: stage settle, then one shared wipe value travels to split.
+            tl.to(stage, { opacity: 1, duration: STAGE_IN, ease: "power2.out" }, 0);
+            tl.to(
+              stage,
+              { "--cs-split": splitPct, duration: WIPE_DURATION, ease: "sine.inOut" },
+              WIPE_AT,
+            );
+            tl.call(
+              function () {
+                fireSfx("wipe-land-soft", WIPE_END);
+              },
+              [],
+              WIPE_END,
+            );
+
+            // HOLD: deliberately steady at the target split.
+
+            // OUT: release fade.
+            tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.out" }, OUT_START);
+
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/comparison-split/demo.html b/registry/components/comparison-split/demo.html
new file mode 100644
index 0000000000..9881ddc146
--- /dev/null
+++ b/registry/components/comparison-split/demo.html
@@ -0,0 +1,101 @@
+<!doctype html>
+<!--
+  comparison-split demo. This standalone 1920x1080 composition mounts the
+  primitive through data-composition-src instead of inlining it. Deliberately
+  non-default split and label values prove per-instance variables flow through
+  the mount. The explicit CSS width and height on the host card avoid the
+  shrink-to-fit feedback loop that can collapse container-query children.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Comparison Split Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #050812);
+      }
+
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(
+          ellipse at 50% 42%,
+          var(--bg, #14213b) 0%,
+          var(--bg, #050812) 72%
+        );
+      }
+
+      /* The primitive uses cqw/cqh inside this definite host box. Keeping an
+         explicit CSS size here sidesteps shrink-to-fit sizing for the mounted
+         size-contained root. data-width and data-height remain for tooling. */
+      .mount-card {
+        --bg: #07111f;
+        --fg: #f8fafc;
+        --surface: #172033;
+        --brand: #e4e4e7;
+        --border: #40506b;
+        --muted: #94a3b8;
+        --accent: #e4e4e7;
+        --font-body: Inter, system-ui, sans-serif;
+        --font-display: Inter, system-ui, sans-serif;
+        --space-1: 1.2cqw;
+        --space-2: 2.4cqw;
+        --space-3: 4cqw;
+        position: absolute;
+        left: 14%;
+        top: 16%;
+        width: 72%;
+        height: 68%;
+        overflow: hidden;
+        border: 1px solid color-mix(in srgb, var(--border, #94a3b8) 28%, transparent);
+        border-radius: 32px;
+        box-shadow: 0 44px 110px color-mix(in srgb, var(--bg, #000000) 48%, transparent);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="comparison-split-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="comparison-split-mount"
+        class="mount-card clip"
+        data-composition-id="comparison-split"
+        data-composition-src="./comparison-split.html"
+        data-variable-values='{"split":64,"orientation":"horizontal","labelA":"Manual","labelB":"Automated"}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="1382"
+        data-height="734"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      // This host owns no motion. The mounted primitive registers its own
+      // timeline, while this empty paused timeline satisfies the demo root.
+      window.__timelines = window.__timelines || {};
+      window.__timelines["comparison-split-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/comparison-split/registry-item.json b/registry/components/comparison-split/registry-item.json
new file mode 100644
index 0000000000..8b6c6f2b15
--- /dev/null
+++ b/registry/components/comparison-split/registry-item.json
@@ -0,0 +1,62 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "comparison-split",
+  "type": "hyperframes:component",
+  "title": "Comparison Split",
+  "description": "Two full-bleed panels compare before and after states as a persistent divider wipes the vivid after layer over the muted before layer and rests at a configurable split.",
+  "tags": ["prop", "ui-props", "compare", "holdable", "before-after", "wipe"],
+  "jobs": ["compare"],
+  "family": "ui-props",
+  "profile": "holdable",
+  "evidence": "fixture + blueprint (re-filed from prove)",
+  "syncPoints": [{ "id": "wipe-land", "phase": "in", "offset": 1.3 }],
+  "files": [
+    {
+      "path": "comparison-split.html",
+      "target": "compositions/components/comparison-split.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "split",
+      "type": "number",
+      "role": "layout",
+      "label": "Split position",
+      "description": "Target resting position of the comparison divider.",
+      "default": 50,
+      "min": 0,
+      "max": 100,
+      "step": 1,
+      "unit": "%"
+    },
+    {
+      "id": "orientation",
+      "type": "enum",
+      "role": "layout",
+      "label": "Orientation",
+      "description": "Axis and direction used by the comparison wipe.",
+      "default": "horizontal",
+      "options": [
+        { "value": "horizontal", "label": "Horizontal" },
+        { "value": "vertical", "label": "Vertical" }
+      ]
+    },
+    {
+      "id": "labelA",
+      "type": "string",
+      "role": "content",
+      "label": "Before label",
+      "description": "Caption shown on the base before panel.",
+      "default": "Before"
+    },
+    {
+      "id": "labelB",
+      "type": "string",
+      "role": "content",
+      "label": "After label",
+      "description": "Caption shown on the revealed after panel.",
+      "default": "After"
+    }
+  ]
+}
diff --git a/registry/components/confetti/confetti.html b/registry/components/confetti/confetti.html
new file mode 100644
index 0000000000..c0aa68a084
--- /dev/null
+++ b/registry/components/confetti/confetti.html
@@ -0,0 +1,127 @@
+<!--
+  Confetti - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-confetti">
+  <div class="mesh"></div>
+  <div class="card">
+    <div class="spot"></div>
+    <div>
+      <h3>Confetti</h3>
+      <p>A deterministic celebration burst with seeded particles and gravity.</p>
+    </div>
+  </div>
+  <span class="particle" style="--c: var(--accent, #f43f5e)"></span
+  ><span class="particle" style="--c: var(--accent, #f59e0b)"></span
+  ><span class="particle" style="--c: var(--accent, #22c55e)"></span
+  ><span class="particle" style="--c: var(--accent, #38bdf8)"></span
+  ><span class="particle" style="--c: var(--accent, #a855f7)"></span
+  ><span class="particle" style="--c: var(--accent, #f43f5e)"></span
+  ><span class="particle" style="--c: var(--accent, #f59e0b)"></span
+  ><span class="particle" style="--c: var(--accent, #22c55e)"></span
+  ><span class="particle" style="--c: var(--accent, #38bdf8)"></span
+  ><span class="particle" style="--c: var(--accent, #a855f7)"></span
+  ><span class="particle" style="--c: var(--accent, #f43f5e)"></span
+  ><span class="particle" style="--c: var(--accent, #f59e0b)"></span
+  ><span class="particle" style="--c: var(--accent, #22c55e)"></span
+  ><span class="particle" style="--c: var(--accent, #38bdf8)"></span
+  ><span class="particle" style="--c: var(--accent, #a855f7)"></span
+  ><span class="particle" style="--c: var(--accent, #f43f5e)"></span
+  ><span class="particle" style="--c: var(--accent, #f59e0b)"></span
+  ><span class="particle" style="--c: var(--accent, #22c55e)"></span
+  ><span class="particle" style="--c: var(--accent, #38bdf8)"></span
+  ><span class="particle" style="--c: var(--accent, #a855f7)"></span
+  ><span class="particle" style="--c: var(--accent, #f43f5e)"></span
+  ><span class="particle" style="--c: var(--accent, #f59e0b)"></span>
+</div>
+
+<style>
+  .hf-remocn-confetti {
+    color: var(--fg, #111827);
+    font-family: var(--font-body, Inter, system-ui, sans-serif);
+  }
+  .hf-remocn-confetti {
+    position: relative;
+    width: 760px;
+    height: 428px;
+    overflow: hidden;
+    border-radius: var(--radius, 30px);
+    background: var(--bg, #080b12);
+    box-shadow: 0 28px 80px color-mix(in srgb, var(--bg, #0f172a) 20%, transparent);
+  }
+  .hf-remocn-confetti .mesh {
+    position: absolute;
+    inset: -22%;
+    filter: blur(44px);
+    opacity: 0.88;
+    background:
+      radial-gradient(
+        circle at var(--hf-x1, 20%) var(--hf-y1, 30%),
+        var(--accent, #60a5fa) 0 18%,
+        transparent 32%
+      ),
+      radial-gradient(
+        circle at var(--hf-x2, 76%) var(--hf-y2, 52%),
+        var(--accent-2, #f472b6) 0 16%,
+        transparent 34%
+      ),
+      radial-gradient(
+        circle at var(--hf-x3, 46%) var(--hf-y3, 78%),
+        var(--brand, #34d399) 0 18%,
+        transparent 34%
+      );
+  }
+  .hf-remocn-confetti .card {
+    position: absolute;
+    inset: var(--space-3, 74px) var(--space-3, 92px);
+    border: 1px solid color-mix(in srgb, var(--border, #ffffff) 16%, transparent);
+    border-radius: var(--radius, 26px);
+    background: color-mix(in srgb, var(--surface, #ffffff) 8%, transparent);
+    color: var(--fg, #fff);
+    display: grid;
+    place-items: center;
+    text-align: center;
+    overflow: hidden;
+  }
+  .hf-remocn-confetti .spot {
+    position: absolute;
+    width: 260px;
+    height: 260px;
+    border-radius: 50%;
+    background: radial-gradient(
+      circle,
+      color-mix(in srgb, var(--fg, #ffffff) 50%, transparent),
+      transparent 65%
+    );
+    transform: translate(var(--hf-spot-x, 0px), var(--hf-spot-y, 0px));
+    mix-blend-mode: screen;
+  }
+  .hf-remocn-confetti .particle {
+    position: absolute;
+    left: 50%;
+    top: 54%;
+    width: 12px;
+    height: 20px;
+    border-radius: var(--radius, 3px);
+    background: var(--c);
+    transform: translate(var(--hf-px, 0px), var(--hf-py, 0px)) rotate(var(--hf-pr, 0deg));
+    opacity: var(--hf-po, 0);
+  }
+  .hf-remocn-confetti h3 {
+    margin: 0;
+    font-size: 44px;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-confetti p {
+    margin: var(--space-1, 8px) 0 0;
+    color: color-mix(in srgb, var(--muted, #ffffff) 70%, transparent);
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-confetti .mesh', { '--hf-x1': '18%', '--hf-y1': '28%', '--hf-x2': '78%', '--hf-y2': '46%', '--hf-x3': '44%', '--hf-y3': '80%' }, { '--hf-x1': '34%', '--hf-y1': '42%', '--hf-x2': '62%', '--hf-y2': '60%', '--hf-x3': '58%', '--hf-y3': '64%', duration: 4, ease: 'sine.inOut' }, startTime); tl.fromTo('.hf-remocn-confetti .spot', { '--hf-spot-x': '-120px', '--hf-spot-y': '-70px' }, { '--hf-spot-x': '190px', '--hf-spot-y': '90px', duration: 3, ease: 'sine.inOut' }, startTime); const particles_confetti = gsap.utils.toArray('.hf-remocn-confetti .particle'); if (particles_confetti.length) { tl.fromTo(particles_confetti, { '--hf-po': 0, '--hf-px': '0px', '--hf-py': '0px', '--hf-pr': '0deg' }, { '--hf-po': 1, '--hf-px': (i) => (Math.cos(i * 0.83) * 250) + 'px', '--hf-py': (i) => (-120 - Math.sin(i * 0.61) * 120) + 'px', '--hf-pr': (i) => (180 + i * 37) + 'deg', duration: 0.8, stagger: 0.015, ease: 'power2.out' }, startTime + 0.2); }
+-->
diff --git a/registry/components/confetti/demo.html b/registry/components/confetti/demo.html
new file mode 100644
index 0000000000..1a1297b16e
--- /dev/null
+++ b/registry/components/confetti/demo.html
@@ -0,0 +1,213 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Confetti - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: var(--bg, #f7f7f8);
+        font-family: var(--font-body, Inter, system-ui, sans-serif);
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+        transform: scale(1.6); /* ponytail: scale wrapper, not GSAP targets */
+      }
+      .hf-remocn-confetti {
+        color: var(--fg, #111827);
+        font-family: var(--font-body, Inter, system-ui, sans-serif);
+      }
+      .hf-remocn-confetti {
+        position: relative;
+        width: 760px;
+        height: 428px;
+        overflow: hidden;
+        border-radius: 30px;
+        background: var(--bg, #080b12);
+        box-shadow: 0 28px 80px color-mix(in srgb, var(--bg, #0f172a) 20%, transparent);
+      }
+      .hf-remocn-confetti .mesh {
+        position: absolute;
+        inset: -22%;
+        filter: blur(44px);
+        opacity: 0.88;
+        background:
+          radial-gradient(
+            circle at var(--hf-x1, 20%) var(--hf-y1, 30%),
+            var(--accent, #60a5fa) 0 18%,
+            transparent 32%
+          ),
+          radial-gradient(
+            circle at var(--hf-x2, 76%) var(--hf-y2, 52%),
+            var(--accent-2, #f472b6) 0 16%,
+            transparent 34%
+          ),
+          radial-gradient(
+            circle at var(--hf-x3, 46%) var(--hf-y3, 78%),
+            var(--brand, #34d399) 0 18%,
+            transparent 34%
+          );
+      }
+      .hf-remocn-confetti .card {
+        position: absolute;
+        inset: 74px 92px;
+        border: 1px solid color-mix(in srgb, var(--border, #ffffff) 16%, transparent);
+        border-radius: 26px;
+        background: color-mix(in srgb, var(--surface, #ffffff) 8%, transparent);
+        color: var(--fg, #fff);
+        display: grid;
+        place-items: center;
+        text-align: center;
+        overflow: hidden;
+      }
+      .hf-remocn-confetti .spot {
+        position: absolute;
+        width: 260px;
+        height: 260px;
+        border-radius: 50%;
+        background: radial-gradient(
+          circle,
+          color-mix(in srgb, var(--fg, #ffffff) 50%, transparent),
+          transparent 65%
+        );
+        transform: translate(var(--hf-spot-x, 0px), var(--hf-spot-y, 0px));
+        mix-blend-mode: screen;
+      }
+      .hf-remocn-confetti .particle {
+        position: absolute;
+        left: 50%;
+        top: 54%;
+        width: 12px;
+        height: 20px;
+        border-radius: 3px;
+        background: var(--c);
+        transform: translate(var(--hf-px, 0px), var(--hf-py, 0px)) rotate(var(--hf-pr, 0deg));
+        opacity: var(--hf-po, 0);
+      }
+      .hf-remocn-confetti h3 {
+        margin: 0;
+        font-size: 44px;
+        letter-spacing: -0.04em;
+      }
+      .hf-remocn-confetti p {
+        margin: 8px 0 0;
+        font-size: 15px;
+        color: color-mix(in srgb, var(--muted, #ffffff) 70%, transparent);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="confetti-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-confetti">
+          <div class="mesh"></div>
+          <div class="card">
+            <div class="spot"></div>
+            <div>
+              <h3>Confetti</h3>
+              <p>A deterministic celebration burst with seeded particles and gravity.</p>
+            </div>
+          </div>
+          <span class="particle" style="--c: var(--accent, #f43f5e)"></span
+          ><span class="particle" style="--c: var(--accent, #f59e0b)"></span
+          ><span class="particle" style="--c: var(--accent, #22c55e)"></span
+          ><span class="particle" style="--c: var(--accent, #38bdf8)"></span
+          ><span class="particle" style="--c: var(--accent, #a855f7)"></span
+          ><span class="particle" style="--c: var(--accent, #f43f5e)"></span
+          ><span class="particle" style="--c: var(--accent, #f59e0b)"></span
+          ><span class="particle" style="--c: var(--accent, #22c55e)"></span
+          ><span class="particle" style="--c: var(--accent, #38bdf8)"></span
+          ><span class="particle" style="--c: var(--accent, #a855f7)"></span
+          ><span class="particle" style="--c: var(--accent, #f43f5e)"></span
+          ><span class="particle" style="--c: var(--accent, #f59e0b)"></span
+          ><span class="particle" style="--c: var(--accent, #22c55e)"></span
+          ><span class="particle" style="--c: var(--accent, #38bdf8)"></span
+          ><span class="particle" style="--c: var(--accent, #a855f7)"></span
+          ><span class="particle" style="--c: var(--accent, #f43f5e)"></span
+          ><span class="particle" style="--c: var(--accent, #f59e0b)"></span
+          ><span class="particle" style="--c: var(--accent, #22c55e)"></span
+          ><span class="particle" style="--c: var(--accent, #38bdf8)"></span
+          ><span class="particle" style="--c: var(--accent, #a855f7)"></span
+          ><span class="particle" style="--c: var(--accent, #f43f5e)"></span
+          ><span class="particle" style="--c: var(--accent, #f59e0b)"></span>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-confetti .mesh",
+          {
+            "--hf-x1": "18%",
+            "--hf-y1": "28%",
+            "--hf-x2": "78%",
+            "--hf-y2": "46%",
+            "--hf-x3": "44%",
+            "--hf-y3": "80%",
+          },
+          {
+            "--hf-x1": "34%",
+            "--hf-y1": "42%",
+            "--hf-x2": "62%",
+            "--hf-y2": "60%",
+            "--hf-x3": "58%",
+            "--hf-y3": "64%",
+            duration: 4,
+            ease: "sine.inOut",
+          },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-confetti .spot",
+          { "--hf-spot-x": "-120px", "--hf-spot-y": "-70px" },
+          { "--hf-spot-x": "190px", "--hf-spot-y": "90px", duration: 3, ease: "sine.inOut" },
+          startTime,
+        );
+        const particles_confetti = gsap.utils.toArray(".hf-remocn-confetti .particle");
+        if (particles_confetti.length) {
+          tl.fromTo(
+            particles_confetti,
+            { "--hf-po": 0, "--hf-px": "0px", "--hf-py": "0px", "--hf-pr": "0deg" },
+            {
+              "--hf-po": 1,
+              "--hf-px": (i) => Math.cos(i * 0.83) * 250 + "px",
+              "--hf-py": (i) => -120 - Math.sin(i * 0.61) * 120 + "px",
+              "--hf-pr": (i) => 180 + i * 37 + "deg",
+              duration: 0.8,
+              stagger: 0.015,
+              ease: "power2.out",
+            },
+            startTime + 0.2,
+          );
+        }
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["confetti-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/confetti/registry-item.json b/registry/components/confetti/registry-item.json
new file mode 100644
index 0000000000..3b9c07a6d8
--- /dev/null
+++ b/registry/components/confetti/registry-item.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "confetti",
+  "type": "hyperframes:component",
+  "title": "Confetti",
+  "description": "A deterministic celebration burst with seeded particles and gravity.",
+  "tags": ["effect", "remocn-port"],
+  "files": [
+    {
+      "path": "confetti.html",
+      "target": "compositions/components/confetti.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/confetti.png"
+  }
+}
diff --git a/registry/components/conic-progress-ring/conic-progress-ring.html b/registry/components/conic-progress-ring/conic-progress-ring.html
new file mode 100644
index 0000000000..ae76cee16c
--- /dev/null
+++ b/registry/components/conic-progress-ring/conic-progress-ring.html
@@ -0,0 +1,235 @@
+<!doctype html>
+<!--
+  conic-progress-ring: HyperFrames video primitive (data / prove / demonstrate)
+
+  Concept: one registered percentage moves the hard frontier of a conic
+  gradient while a radial mask cuts out the center. The center value is
+  derived from that same percentage on every GSAP update, so fill and count
+  cannot drift apart.
+
+  Compiled-from evidence: hyperframes-research-css-gems.md, section 10,
+  "Registered conic progress ring". The finding specifies a typed percentage
+  as the seek handle for a conic-gradient frontier and a radial mask for the
+  ring cutout.
+
+  Use when: a scene needs to prove completion, attainment, or a measured
+  result with one immediately legible data mark.
+
+  Variables:
+    progress  number  0 to 100  default 100  target angular fill
+    thickness number  4 to 30   default 12   ring stroke as a percent
+    label     string            default "100" center count target
+
+  Envelope:
+    IN   1.40s fixed fill and synchronized count, power2.out
+    HOLD elastic and deliberately still after the result settles
+    OUT  0.50s fixed opacity release, power2.in
+    For durations shorter than 1.90s, IN and OUT scale together. HOLD is the
+    only elastic phase. The timeline is never time-scaled.
+
+  Sync point:
+    progress-settled at the end of IN, always outside the elastic HOLD
+
+  Sound cues: none. A data proof should not claim an audio event for its host.
+
+  Mount contract: this file is a template-wrapped sub-composition. The host
+  owns dimensions. #root fills that box with inset:0 and has no data-width or
+  data-height. The hardcoded composition id matches the root and timeline key.
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "progress", "type": "number", "role": "content", "label": "Progress", "description": "Target angular fill from 0 to 100.", "default": 100, "min": 0, "max": 100, "step": 1, "unit": "%" },
+    { "id": "thickness", "type": "number", "role": "layout", "label": "Thickness", "description": "Ring stroke thickness as a percent of the ring radius.", "default": 12, "min": 4, "max": 30, "step": 1, "unit": "%" },
+    { "id": "label", "type": "string", "role": "content", "label": "Center label", "description": "Numeric target shown in the center and counted in sync with the fill.", "default": "100" }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Conic Progress Ring</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="conic-progress-ring" data-duration="4" data-fps="30">
+        <style>
+          /* The registration must live in this document-level stylesheet.
+             Registrations inside shadow roots are ignored by the platform. */
+          @property --ring-progress {
+            syntax: "<percentage>";
+            inherits: false;
+            initial-value: 0%;
+          }
+
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          /* INVARIANT: #root is the mount contract owner. The host owns the
+             box, and every internal measurement is relative to that box. */
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            color: var(--fg, #f4f7fb);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+          }
+
+          .ring-clip {
+            width: 100%;
+            height: 100%;
+            display: grid;
+            place-items: center;
+          }
+
+          .ring-stage {
+            position: relative;
+            width: min(68cqw, 68cqh);
+            aspect-ratio: 1;
+          }
+
+          /* EDIT ZONE: --ring-thickness is the only geometry control.
+             --ring-progress is the only registered animation scalar. Paint
+             comes only from the host theme's surface and brand tokens. */
+          .ring {
+            --ring-thickness: 12%;
+            --ring-progress: 0%;
+            position: absolute;
+            inset: 0;
+            border-radius: 50%;
+            background: conic-gradient(
+              from -90deg,
+              var(--brand, #35d6a0) 0 var(--ring-progress),
+              var(--surface, #1b2938) var(--ring-progress) 100%
+            );
+            -webkit-mask: radial-gradient(
+              farthest-side,
+              transparent calc(100% - var(--ring-thickness)),
+              var(--fg, #f4f7fb) 0
+            );
+            mask: radial-gradient(
+              farthest-side,
+              transparent calc(100% - var(--ring-thickness)),
+              var(--fg, #f4f7fb) 0
+            );
+          }
+
+          .ring-label {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            color: var(--fg, #f4f7fb);
+            font-size: min(18cqw, 18cqh);
+            font-weight: 700;
+            font-variant-numeric: tabular-nums;
+            letter-spacing: -0.04em;
+            line-height: 1;
+            text-align: center;
+          }
+        </style>
+
+        <div
+          id="conic-progress-ring-clip"
+          class="ring-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="ring-stage">
+            <div
+              class="ring"
+              role="progressbar"
+              aria-label="Progress"
+              aria-valuemin="0"
+              aria-valuemax="100"
+              aria-valuenow="0"
+            ></div>
+            <div class="ring-label" aria-hidden="true">0</div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var compositionId = "conic-progress-ring";
+            var stage = root.querySelector(".ring-stage");
+            var ring = root.querySelector(".ring");
+            var label = root.querySelector(".ring-label");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            /* INVARIANT: zero is a valid progress value, so missing and zero
+               are handled separately. Both numeric controls clamp to their
+               declared ranges before they reach layout or animation. */
+            var progressValue = Number(vars.progress);
+            var targetProgress = Number.isFinite(progressValue)
+              ? Math.max(0, Math.min(100, progressValue))
+              : 100;
+            var thicknessValue = Number(vars.thickness);
+            var thickness = Number.isFinite(thicknessValue)
+              ? Math.max(4, Math.min(30, thicknessValue))
+              : 12;
+            var labelText = vars.label == null ? "100" : String(vars.label);
+            var labelMatch = labelText.trim().match(/^(-?\d+(?:\.\d+)?)(.*)$/);
+            var labelTarget = labelMatch ? Number(labelMatch[1]) : null;
+            var labelSuffix = labelMatch ? labelMatch[2] : "";
+
+            ring.style.setProperty("--ring-thickness", thickness + "%");
+
+            function updateLabel(fillPercent) {
+              var ratio = targetProgress > 0 ? fillPercent / targetProgress : 1;
+              label.textContent =
+                labelTarget == null ? labelText : Math.round(labelTarget * ratio) + labelSuffix;
+              ring.setAttribute("aria-valuenow", String(Math.round(fillPercent)));
+            }
+
+            updateLabel(0);
+
+            /* RETIME RANGE: IN_BASE and OUT_BASE own the lifecycle timing.
+               The fill uses --ease-standard's GSAP form, power2.out. */
+            var IN_BASE = 1.4;
+            var OUT_BASE = 0.5;
+            var durationValue = Number(root.dataset.duration);
+            var duration = Number.isFinite(durationValue) && durationValue > 0 ? durationValue : 4;
+            var scale = duration < IN_BASE + OUT_BASE ? duration / (IN_BASE + OUT_BASE) : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var OUT_START = IN + HOLD;
+
+            var tl = gsap.timeline({ paused: true });
+
+            tl.fromTo(
+              ring,
+              { "--ring-progress": "0%" },
+              {
+                "--ring-progress": targetProgress + "%",
+                duration: IN,
+                ease: "power2.out",
+                onUpdate: function () {
+                  updateLabel(parseFloat(ring.style.getPropertyValue("--ring-progress")) || 0);
+                },
+              },
+              0,
+            );
+            tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/conic-progress-ring/demo.html b/registry/components/conic-progress-ring/demo.html
new file mode 100644
index 0000000000..d54e62599e
--- /dev/null
+++ b/registry/components/conic-progress-ring/demo.html
@@ -0,0 +1,94 @@
+<!doctype html>
+<!--
+  conic-progress-ring demo. This standalone composition mounts the primitive
+  through data-composition-src and supplies non-default values so the mount
+  path and every exposed variable are exercised together.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Conic Progress Ring Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+
+      #root {
+        --bg: #071018;
+        --fg: #f4f7fb;
+        --muted: #91a0b3;
+        --surface: #1b2938;
+        --border: rgba(244, 247, 251, 0.14);
+        --brand: #35d6a0;
+        --accent: #74b9ff;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-body: Inter, system-ui, sans-serif;
+        --font-mono: ui-monospace, monospace;
+        --radius: 4cqh;
+        --space-1: 1cqh;
+        --space-2: 2cqh;
+        --space-3: 3cqh;
+        --dur-beat: 0.4s;
+        --ease-standard: cubic-bezier(0.215, 0.61, 0.355, 1);
+        --ease-emphasis: cubic-bezier(0.19, 1, 0.22, 1);
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg);
+      }
+
+      .mount-card {
+        position: absolute;
+        left: 29%;
+        top: 19%;
+        width: 42%;
+        height: 62%;
+        overflow: hidden;
+        border: 0.15cqh solid var(--border);
+        border-radius: var(--radius);
+        background: var(--bg);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="conic-progress-ring-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="conic-progress-ring-mount"
+        class="mount-card clip"
+        data-composition-id="conic-progress-ring"
+        data-composition-src="./conic-progress-ring.html"
+        data-variable-values='{"progress":92,"thickness":16,"label":"92"}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="806"
+        data-height="670"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["conic-progress-ring-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/conic-progress-ring/registry-item.json b/registry/components/conic-progress-ring/registry-item.json
new file mode 100644
index 0000000000..7e5cbeb88b
--- /dev/null
+++ b/registry/components/conic-progress-ring/registry-item.json
@@ -0,0 +1,53 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "conic-progress-ring",
+  "type": "hyperframes:component",
+  "title": "Conic Progress Ring",
+  "description": "A token-driven conic progress ring whose angular fill and center count settle together from one registered percentage.",
+  "tags": ["data", "progress", "ring", "conic-gradient", "prove", "demonstrate"],
+  "jobs": ["prove", "demonstrate"],
+  "family": "data",
+  "profile": "holdable",
+  "evidence": "hyperframes-research-css-gems.md section 10, Registered conic progress ring: a typed percentage moves a hard conic-gradient frontier, and a radial mask removes the center to form the ring.",
+  "files": [
+    {
+      "path": "conic-progress-ring.html",
+      "target": "compositions/components/conic-progress-ring.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "progress",
+      "type": "number",
+      "role": "content",
+      "label": "Progress",
+      "description": "Target angular fill from 0 to 100.",
+      "default": 100,
+      "min": 0,
+      "max": 100,
+      "step": 1,
+      "unit": "%"
+    },
+    {
+      "id": "thickness",
+      "type": "number",
+      "role": "layout",
+      "label": "Thickness",
+      "description": "Ring stroke thickness as a percent of the ring radius.",
+      "default": 12,
+      "min": 4,
+      "max": 30,
+      "step": 1,
+      "unit": "%"
+    },
+    {
+      "id": "label",
+      "type": "string",
+      "role": "content",
+      "label": "Center label",
+      "description": "Numeric target shown in the center and counted in sync with the fill.",
+      "default": "100"
+    }
+  ]
+}
diff --git a/registry/components/constellation-hub/README.md b/registry/components/constellation-hub/README.md
new file mode 100644
index 0000000000..0038d6eae3
--- /dev/null
+++ b/registry/components/constellation-hub/README.md
@@ -0,0 +1,36 @@
+# constellation-hub
+
+Feature nodes orbit one fixed hub. Each connector draws from the hub to its node in narration order (real `getTotalLength` dash draws) while that node brightens, then everything settles into one readable lockup that holds until the frame cuts.
+
+4.5s authored, elastic HOLD, exit `none` by default.
+
+## Variables
+
+| id          | type   | default                        | notes                                                                                                                                                                                     |
+| ----------- | ------ | ------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `hub_label` | string | `Product`                      | Text inside the fixed central hub.                                                                                                                                                        |
+| `nodes`     | string | `Capture,Compose,Render,Share` | Comma-separated feature labels, introduced first to last.                                                                                                                                 |
+| `cues`      | string | `` (empty)                     | Comma-separated seconds (from mount start) for each node's reveal, e.g. `0.5,1.2,1.9,2.6`. Nodes beyond the list extrapolate at the list's own gap. Empty keeps the authored even spread. |
+| `accent`    | enum   | `green`                        | Hub, connector, and active-node color: green rides `--brand`, blue rides `--accent`, violet rides `--accent-2`.                                                                           |
+| `exit`      | enum   | `none`                         | `none` holds until the cut; `fade` is the scale-down fade (the pre-Wave-J default ending); `up` departs with a rise and fade.                                                             |
+
+## Mount
+
+```html
+<div
+  class="clip"
+  data-composition-id="constellation-hub"
+  data-composition-src="./constellation-hub.html"
+  data-variable-values='{"hub_label":"HyperFrames","nodes":"Author,Check,Render,Publish","cues":"0.6,1.4,2.2,3.0"}'
+  data-start="0"
+  data-duration="4.5"
+  data-track-index="0"
+></div>
+```
+
+Elastic root: no `data-width`/`data-height`; it fills whatever box the host clip gives it. Timeline registers under the literal `constellation-hub` key.
+
+## Notes
+
+- Cue N starts node N's connector draw and brighten. Reveals clamp so the group settle finishes before any exit.
+- Connector dash values come from each path's real `getTotalLength()` read synchronously at build; never `pathLength`, never `non-scaling-stroke`.
diff --git a/registry/components/constellation-hub/constellation-hub.html b/registry/components/constellation-hub/constellation-hub.html
new file mode 100644
index 0000000000..856a4fc9ff
--- /dev/null
+++ b/registry/components/constellation-hub/constellation-hub.html
@@ -0,0 +1,427 @@
+<!doctype html>
+<!--
+  constellation-hub: HyperFrames video primitive (feature tour / exhibit)
+
+  Feature nodes form an orbit around one fixed hub. Each connector draws
+  from the hub to its node in narration order while that node brightens,
+  then every element settles into one readable lockup.
+
+  Variables:
+    - hub_label (string, default "Product"): text inside the fixed hub.
+    - nodes (string, default "Capture,Compose,Render,Share"): comma-separated
+      feature labels introduced from first to last.
+    - cues (string, default ""): comma-separated seconds (from mount start)
+      for each node reveal. Empty keeps the authored even spread.
+    - accent (green | blue | violet, default "green"): highlight token route.
+    - exit (none | fade | up, default "none"): optional departure.
+
+  Envelope, fixed IN and OUT with elastic HOLD only:
+    IN_BASE  = 2.40s, hub arrival plus ordered connector and node reveals
+               (cues can stretch the reveal phase past IN_BASE)
+    HOLD     = max(0, D - IN - OUT), subtle orbital drift around the fixed hub
+    OUT_BASE = 0.50s departure when exit is fade or up, 0s when exit is
+               none (the default: the lockup holds until the cut)
+    If D is shorter than IN_BASE + OUT_BASE, IN and OUT compress together.
+    The timeline is never time-scaled.
+
+  Draw contract: each connector reads its real SVG getTotalLength() during
+  synchronous construction. That value owns both dash array and initial dash
+  offset, and GSAP draws the connector by tweening the offset to zero.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, uses cqw and cqh for elastic sizing, carries no data-width or
+  data-height, and registers one paused timeline under the literal
+  constellation-hub key.
+-->
+<html
+  lang="en"
+  data-composition-id="constellation-hub"
+  data-composition-duration="4.5"
+  data-composition-variables='[
+    { "id": "hub_label", "type": "string", "role": "content", "label": "Hub label", "description": "Text displayed inside the fixed central hub.", "default": "Product" },
+    { "id": "nodes", "type": "string", "role": "content", "label": "Feature nodes", "description": "Comma-separated feature labels introduced in narration order.", "default": "Capture,Compose,Render,Share" },
+    { "id": "cues", "type": "string", "role": "timing", "label": "Cues", "description": "Comma-separated seconds (from mount start) for each node reveal. Empty keeps the authored even spread.", "default": "" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Highlight color used by the hub, connectors, and active nodes.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the lockup holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Constellation Hub</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="constellation-hub" data-duration="4.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .ch-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .ch-lockup {
+            position: relative;
+            width: 100cqw;
+            height: 100cqh;
+            opacity: 0;
+          }
+
+          .ch-orbit {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 100cqw;
+            height: 100cqh;
+            transform-origin: 50cqw 50cqh;
+            will-change: transform;
+          }
+
+          .ch-connectors {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 100cqw;
+            height: 100cqh;
+            overflow: visible;
+          }
+
+          .ch-connector {
+            fill: none;
+            stroke: var(--ch-accent);
+            stroke-width: 0.72;
+            stroke-linecap: round;
+            opacity: 0.72;
+          }
+
+          .ch-node-position {
+            position: absolute;
+            width: var(--ch-node-width, 21cqw);
+            transform: translate(-50%, -50%);
+          }
+
+          .ch-node {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            min-height: 10cqh;
+            padding: var(--space-1, 1.2cqh) var(--space-2, 2.4cqw);
+            overflow: hidden;
+            border: 0.14cqw solid color-mix(in srgb, var(--ch-accent) 54%, var(--border, #334155));
+            border-radius: var(--radius, 2.4cqw);
+            background: color-mix(in srgb, var(--surface, #151a24) 90%, var(--ch-accent));
+            box-shadow: 0 1.8cqh 4.8cqh color-mix(in srgb, var(--bg, #05070d) 38%, transparent);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            font-size: var(--ch-node-font-size, 2.25cqw);
+            font-weight: 680;
+            line-height: 1.1;
+            letter-spacing: -0.01em;
+            text-align: center;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            will-change: transform, opacity;
+          }
+
+          .ch-hub {
+            position: absolute;
+            left: 50cqw;
+            top: 50cqh;
+            z-index: 2;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 21cqw;
+            min-height: 18cqh;
+            padding: var(--space-2, 2.4cqh) var(--space-2, 2.4cqw);
+            overflow: hidden;
+            border: 0.22cqw solid var(--ch-accent);
+            border-radius: var(--radius, 2.4cqw);
+            background: color-mix(in srgb, var(--surface, #151a24) 78%, var(--ch-accent));
+            box-shadow:
+              0 0 7cqh color-mix(in srgb, var(--ch-accent) 24%, transparent),
+              0 2.4cqh 6cqh color-mix(in srgb, var(--bg, #05070d) 46%, transparent);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: 3.05cqw;
+            font-weight: 760;
+            line-height: 1;
+            letter-spacing: -0.03em;
+            text-align: center;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            transform: translate(-50%, -50%);
+            will-change: transform, opacity;
+          }
+        </style>
+
+        <div
+          id="constellation-hub-clip"
+          class="ch-clip clip"
+          data-start="0"
+          data-duration="4.5"
+          data-track-index="0"
+        >
+          <div class="ch-lockup" role="img">
+            <div class="ch-orbit">
+              <svg
+                class="ch-connectors"
+                viewBox="0 0 100 100"
+                preserveAspectRatio="none"
+                aria-hidden="true"
+              ></svg>
+              <div class="ch-nodes"></div>
+            </div>
+            <div class="ch-hub"></div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var lockup = root.querySelector(".ch-lockup");
+            var orbit = root.querySelector(".ch-orbit");
+            var connectorsLayer = root.querySelector(".ch-connectors");
+            var nodesLayer = root.querySelector(".ch-nodes");
+            var hub = root.querySelector(".ch-hub");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var hubLabel = vars.hub_label == null ? "Product" : String(vars.hub_label).trim();
+            var nodeSource =
+              vars.nodes == null ? "Capture,Compose,Render,Share" : String(vars.nodes);
+            var nodeLabels = nodeSource
+              .split(",")
+              .map(function (label) {
+                return label.trim();
+              })
+              .filter(function (label) {
+                return label.length > 0;
+              });
+
+            if (nodeLabels.length === 0) nodeLabels = ["Feature"];
+
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+            var cuesValue = vars.cues == null ? "" : String(vars.cues);
+            var cues = cuesValue.split(",").reduce(function (result, token) {
+              var trimmed = token.trim();
+              if (trimmed === "") return result;
+              var seconds = Number(trimmed);
+              if (!Number.isFinite(seconds) || seconds < 0) return result;
+              result.push(seconds);
+              return result;
+            }, []);
+
+            var nodeWidth = Math.max(12, Math.min(21, 78 / Math.max(4, nodeLabels.length) + 2));
+            var nodeFontSize = nodeLabels.length > 6 ? 1.75 : 2.25;
+
+            root.style.setProperty("--ch-accent", accentColors[accent]);
+            root.style.setProperty("--ch-node-width", nodeWidth.toFixed(2) + "cqw");
+            root.style.setProperty("--ch-node-font-size", nodeFontSize.toFixed(2) + "cqw");
+            hub.textContent = hubLabel;
+            lockup.setAttribute(
+              "aria-label",
+              "Hub " + hubLabel + " connected to " + nodeLabels.join(", "),
+            );
+
+            var svgNamespace = "http://www.w3.org/2000/svg";
+            var connectors = [];
+            var nodes = [];
+            var connectorFragment = document.createDocumentFragment();
+            var nodeFragment = document.createDocumentFragment();
+
+            nodeLabels.forEach(function (label, index) {
+              var angle = -Math.PI / 2 + (index / nodeLabels.length) * Math.PI * 2;
+              var x = 50 + Math.cos(angle) * 38;
+              var y = 50 + Math.sin(angle) * 39;
+              var connector = document.createElementNS(svgNamespace, "path");
+              connector.setAttribute("class", "ch-connector");
+              connector.setAttribute("d", "M 50 50 L " + x.toFixed(3) + " " + y.toFixed(3));
+              connectorFragment.appendChild(connector);
+              connectors.push(connector);
+
+              var position = document.createElement("div");
+              position.className = "ch-node-position";
+              position.style.left = x.toFixed(3) + "cqw";
+              position.style.top = y.toFixed(3) + "cqh";
+
+              var node = document.createElement("div");
+              node.className = "ch-node";
+              node.textContent = label;
+              position.appendChild(node);
+              nodeFragment.appendChild(position);
+              nodes.push(node);
+            });
+
+            connectorsLayer.appendChild(connectorFragment);
+            nodesLayer.appendChild(nodeFragment);
+
+            connectors.forEach(function (connector) {
+              var length = connector.getTotalLength();
+              connector.style.strokeDasharray = length + " " + length;
+              connector.style.strokeDashoffset = String(length);
+            });
+
+            var IN_BASE = 2.4;
+            var OUT_BASE = exit === "none" ? 0 : 0.5;
+            var HUB_IN_BASE = 0.46;
+            var SEQUENCE_START_BASE = 0.34;
+            var DRAW_BASE = 0.5;
+            var NODE_UP_BASE = 0.3;
+            var NODE_DOWN_BASE = 0.2;
+            var SETTLE_BASE = 0.28;
+            var STILLNESS = 0.24;
+            var durationValue = Number(root.dataset.duration);
+            var duration =
+              Number.isFinite(durationValue) && durationValue > 0 ? durationValue : 4.5;
+            var phaseBase = Math.max(0.001, IN_BASE + OUT_BASE);
+            var phaseScale = duration < phaseBase ? duration / phaseBase : 1;
+            var IN = IN_BASE * phaseScale;
+            var OUT = OUT_BASE * phaseScale;
+            var HUB_IN = HUB_IN_BASE * phaseScale;
+            var SEQUENCE_START = SEQUENCE_START_BASE * phaseScale;
+            var DRAW = DRAW_BASE * phaseScale;
+            var NODE_UP = NODE_UP_BASE * phaseScale;
+            var NODE_DOWN = NODE_DOWN_BASE * phaseScale;
+            var SETTLE = SETTLE_BASE * phaseScale;
+
+            // Reveal schedule: cues own each connector-and-node start when
+            // provided; the authored even spread otherwise. Reveals beyond
+            // the cue list extrapolate at the cue list's own gap, and every
+            // reveal clamps so the settle finishes before any exit.
+            var starts;
+            var SETTLE_START;
+            if (cues.length > 0) {
+              var lastCue = cues[cues.length - 1];
+              var cueGap =
+                cues.length >= 2 ? Math.max(0.05, (lastCue - cues[0]) / (cues.length - 1)) : DRAW;
+              var latestStart = Math.max(0, duration - OUT - (NODE_UP + NODE_DOWN + SETTLE));
+              starts = nodeLabels.map(function (label, index) {
+                var at =
+                  index < cues.length
+                    ? cues[index]
+                    : lastCue + (index - (cues.length - 1)) * cueGap;
+                return Math.min(latestStart, Math.max(0, at));
+              });
+              SETTLE_START = Math.max.apply(null, starts) + NODE_UP + NODE_DOWN;
+            } else {
+              SETTLE_START = Math.max(SEQUENCE_START, IN - SETTLE);
+              var LAST_DRAW_START = Math.max(SEQUENCE_START, SETTLE_START - DRAW);
+              var STEP =
+                nodeLabels.length > 1
+                  ? (LAST_DRAW_START - SEQUENCE_START) / (nodeLabels.length - 1)
+                  : 0;
+              starts = nodeLabels.map(function (label, index) {
+                return SEQUENCE_START + index * STEP;
+              });
+            }
+            var IN_END = Math.min(Math.max(0, duration - OUT), Math.max(IN, SETTLE_START + SETTLE));
+            var HOLD = Math.max(0, duration - IN_END - OUT);
+            var HOLD_START = IN_END;
+            var OUT_START = IN_END + HOLD;
+
+            gsap.set(lockup, { opacity: 0, scale: 0.985 });
+            gsap.set(hub, { opacity: 0, scale: 0.86 });
+            gsap.set(orbit, { rotation: -4 });
+            gsap.set(nodes, { opacity: 0.24, scale: 0.92 });
+
+            var tl = gsap.timeline({ paused: true });
+
+            tl.to(lockup, { opacity: 1, scale: 1, duration: HUB_IN, ease: "power2.out" }, 0);
+            tl.to(hub, { opacity: 1, scale: 1, duration: HUB_IN, ease: "back.out(1.7)" }, 0);
+            tl.to(orbit, { rotation: 0, duration: IN, ease: "power3.out" }, 0);
+
+            connectors.forEach(function (connector, index) {
+              var start = starts[index];
+              var node = nodes[index];
+
+              tl.to(connector, { strokeDashoffset: 0, duration: DRAW, ease: "power2.out" }, start);
+              tl.to(
+                node,
+                { opacity: 1, scale: 1.055, duration: NODE_UP, ease: "power3.out" },
+                start,
+              );
+              tl.to(
+                node,
+                { opacity: 0.82, scale: 1, duration: NODE_DOWN, ease: "power2.out" },
+                start + NODE_UP,
+              );
+            });
+
+            tl.to(
+              nodes,
+              { opacity: 0.88, scale: 1, duration: SETTLE, ease: "power2.out" },
+              SETTLE_START,
+            );
+            tl.to(
+              connectors,
+              { opacity: 0.62, duration: SETTLE, ease: "power2.out" },
+              SETTLE_START,
+            );
+
+            var driftHalf = Math.max(0, HOLD - STILLNESS) / 2;
+            if (driftHalf > 0) {
+              tl.to(
+                orbit,
+                { rotation: 1.1, duration: driftHalf, ease: "sine.inOut", yoyo: true, repeat: 1 },
+                HOLD_START,
+              );
+            }
+
+            // OUT: optional departure; exit none holds until the frame cuts.
+            if (exit === "fade") {
+              tl.to(
+                lockup,
+                { opacity: 0, scale: 0.97, duration: OUT, ease: "power2.in" },
+                OUT_START,
+              );
+            } else if (exit === "up") {
+              tl.to(
+                lockup,
+                { opacity: 0, y: "-3cqh", duration: OUT, ease: "power2.in" },
+                OUT_START,
+              );
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["constellation-hub"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/constellation-hub/demo.html b/registry/components/constellation-hub/demo.html
new file mode 100644
index 0000000000..e8f75c7c5d
--- /dev/null
+++ b/registry/components/constellation-hub/demo.html
@@ -0,0 +1,102 @@
+<!doctype html>
+<!--
+  constellation-hub demo. This standalone dark stage mounts the primitive
+  with non-default hub label, node list, and violet accent values.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Constellation Hub Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0b0c0e;
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --muted: #a8b0bf;
+        --surface: #171a20;
+        --border: #3a4250;
+        --brand: #71f5a7;
+        --accent: #61a8ff;
+        --accent-2: #c5a3ff;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-body: Inter, system-ui, sans-serif;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        --radius: 2.4cqmin;
+        --space-1: 1.2cqmin;
+        --space-2: 2.4cqmin;
+        --space-3: 4cqmin;
+        --dur-beat: 0.4s;
+        --ease-standard: cubic-bezier(0.215, 0.61, 0.355, 1);
+        --ease-emphasis: cubic-bezier(0.19, 1, 0.22, 1);
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(
+          ellipse at 50% 46%,
+          color-mix(in srgb, var(--surface, #171a20) 88%, var(--accent-2, #c5a3ff)) 0%,
+          var(--bg, #0b0c0e) 70%
+        );
+      }
+
+      .mount-card {
+        width: 78%;
+        height: 70%;
+        left: 11%;
+        top: 15%;
+        container-type: size;
+        overflow: hidden;
+        border: 1px solid color-mix(in srgb, var(--border, #3a4250) 74%, transparent);
+        border-radius: 32px;
+        background: color-mix(in srgb, var(--surface, #171a20) 76%, transparent);
+        box-shadow: 0 44px 110px color-mix(in srgb, var(--bg, #0b0c0e) 58%, transparent);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="constellation-hub-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4.5"
+      data-fps="30"
+    >
+      <div
+        id="constellation-hub-mount"
+        class="mount-card clip"
+        data-composition-id="constellation-hub"
+        data-composition-src="./constellation-hub.html"
+        data-variable-values='{"hub_label":"Creator OS","nodes":"Capture,Compose,Animate,Render,Publish","accent":"violet"}'
+        data-start="0"
+        data-duration="4.5"
+        data-track-index="0"
+        data-width="1498"
+        data-height="756"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      var demoTimeline = gsap.timeline({ paused: true });
+      demoTimeline.seek(0);
+      window.__timelines = window.__timelines || {};
+      window.__timelines["constellation-hub-demo"] = demoTimeline;
+    </script>
+  </body>
+</html>
diff --git a/registry/components/constellation-hub/registry-item.json b/registry/components/constellation-hub/registry-item.json
new file mode 100644
index 0000000000..6d39d6a08a
--- /dev/null
+++ b/registry/components/constellation-hub/registry-item.json
@@ -0,0 +1,72 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "constellation-hub",
+  "type": "hyperframes:component",
+  "title": "Constellation Hub",
+  "description": "Feature nodes brighten in narration order as real-length SVG connectors draw outward from a fixed central hub, then settle into one lockup.",
+  "tags": ["motion-primitive", "feature-tour", "hub", "nodes", "connector", "reveal"],
+  "jobs": ["exhibit"],
+  "family": "feature-tour",
+  "profile": "network",
+  "evidence": "Wave I I3 constellation-hub contract: fixed hub, ordered feature introductions, and getTotalLength-based connector drawing",
+  "syncPoints": [{ "id": "lockup-settle", "phase": "in", "offset": 2.4 }],
+  "files": [
+    {
+      "path": "constellation-hub.html",
+      "target": "compositions/components/constellation-hub.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "hub_label",
+      "type": "string",
+      "role": "content",
+      "label": "Hub label",
+      "description": "Text displayed inside the fixed central hub.",
+      "default": "Product"
+    },
+    {
+      "id": "nodes",
+      "type": "string",
+      "role": "content",
+      "label": "Feature nodes",
+      "description": "Comma-separated feature labels introduced in narration order.",
+      "default": "Capture,Compose,Render,Share"
+    },
+    {
+      "id": "cues",
+      "type": "string",
+      "role": "timing",
+      "label": "Cues",
+      "description": "Comma-separated seconds (from mount start) for each node reveal. Empty keeps the authored even spread.",
+      "default": ""
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Highlight color used by the hub, connectors, and active nodes.",
+      "default": "green",
+      "options": [
+        { "value": "green", "label": "Green" },
+        { "value": "blue", "label": "Blue" },
+        { "value": "violet", "label": "Violet" }
+      ]
+    },
+    {
+      "id": "exit",
+      "type": "enum",
+      "role": "timing",
+      "label": "Exit",
+      "description": "Optional departure. Default none: the lockup holds until the frame cuts.",
+      "default": "none",
+      "options": [
+        { "value": "none", "label": "None" },
+        { "value": "fade", "label": "Fade" },
+        { "value": "up", "label": "Up" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/count-up/README.md b/registry/components/count-up/README.md
new file mode 100644
index 0000000000..3c84bcc246
--- /dev/null
+++ b/registry/components/count-up/README.md
@@ -0,0 +1,38 @@
+# count-up
+
+A stat counter that eases from start to end, lands on the exact final integer with one restrained scale pulse, and holds until the frame cuts. Tabular numerals keep the line from shifting while digits change.
+
+3s authored, elastic HOLD, exit `none` by default.
+
+## Variables
+
+| id       | type    | default    | notes                                                                                          |
+| -------- | ------- | ---------- | ---------------------------------------------------------------------------------------------- |
+| `start`  | number  | `0`        | First value shown.                                                                             |
+| `end`    | number  | `100`      | Final value; the count always lands exactly here.                                              |
+| `prefix` | string  | `` (empty) | Fixed text before the value.                                                                   |
+| `suffix` | string  | `%`        | Fixed text after the value.                                                                    |
+| `accent` | enum    | `green`    | Count color: green rides `--brand`, blue rides `--accent`, violet rides `--accent-2`.          |
+| `glow`   | boolean | `false`    | Opt-in soft accent glow under the count. The register ships flat (weight 600, no text-shadow). |
+| `exit`   | enum    | `none`     | `none` holds until the cut; `fade` departs opacity-only; `up` is the upward release and fade.  |
+
+## Mount
+
+```html
+<div
+  class="clip"
+  data-composition-id="count-up"
+  data-composition-src="./count-up.html"
+  data-variable-values='{"start":0,"end":250,"prefix":"$","suffix":"K","accent":"blue"}'
+  data-start="0"
+  data-duration="3"
+  data-track-index="0"
+></div>
+```
+
+Elastic root: no `data-width`/`data-height`; it fills whatever box the host clip gives it. Timeline registers under the literal `count-up` key.
+
+## Notes
+
+- Wave-J register change: the previous forced upward-fade exit is gone (opt back in with `exit:"up"`), and the hardcoded weight-800 + text-shadow glow register is now weight 600 with `glow` off by default.
+- Deterministic: every displayed integer comes from an authored frame row; reverse and repeated seeks show the same value.
diff --git a/registry/components/count-up/count-up.html b/registry/components/count-up/count-up.html
new file mode 100644
index 0000000000..b186125393
--- /dev/null
+++ b/registry/components/count-up/count-up.html
@@ -0,0 +1,297 @@
+<!doctype html>
+<!--
+  count-up: HyperFrames video primitive (proof and stats / prove)
+
+  A value accelerates from start to end, decelerates into the exact final
+  integer, and lands with one restrained scale pulse. Prefix and suffix stay
+  fixed while tabular numerals prevent the line from shifting as digits change.
+
+  Variables:
+    - start (number, default 0): first value shown.
+    - end (number, default 100): final value shown.
+    - prefix (string, default ""): optional text before the value.
+    - suffix (string, default "%"): optional text after the value.
+    - accent (green | blue | violet, default "green"): count color.
+    - glow (boolean, default false): optional accent glow under the count.
+    - exit (none | fade | up, default "none"): optional departure.
+
+  Envelope, fixed IN and OUT with elastic HOLD only:
+    IN_BASE  = 2.05s, stage arrival, eased count, and landing pulse
+    HOLD     = max(0, D - IN - OUT), subtle drift then 0.25s stillness
+    OUT_BASE = 0.45s departure when exit is fade or up, 0s when exit is
+               none (the default: the landed value holds until the cut)
+    If D is shorter than IN_BASE + OUT_BASE, IN and OUT compress together.
+    The timeline is never time-scaled.
+
+  Determinism: each displayed integer is computed synchronously for a fixed
+  timeline position. The paused timeline sets the authored frame rows directly,
+  so reverse or repeated seeks show the same value without update callbacks.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, has no data-width or data-height,
+  and registers one paused timeline under the literal count-up key.
+-->
+<html
+  lang="en"
+  data-composition-id="count-up"
+  data-composition-duration="3"
+  data-composition-variables='[
+    { "id": "start", "type": "number", "role": "content", "label": "Start value", "description": "First value shown by the count.", "default": 0, "step": 1 },
+    { "id": "end", "type": "number", "role": "content", "label": "End value", "description": "Final value where the count lands.", "default": 100, "step": 1 },
+    { "id": "prefix", "type": "string", "role": "content", "label": "Prefix", "description": "Optional text shown before the value.", "default": "" },
+    { "id": "suffix", "type": "string", "role": "content", "label": "Suffix", "description": "Optional text shown after the value.", "default": "%" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Color used by the count.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "glow", "type": "boolean", "role": "style", "label": "Glow", "description": "Optional soft accent glow under the count. Off by default.", "default": false },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the landed value holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Count Up</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="count-up" data-duration="3" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .cu-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .cu-stage {
+            display: flex;
+            width: 92cqw;
+            align-items: baseline;
+            justify-content: center;
+            overflow: hidden;
+            color: var(--cu-accent);
+            font-size: var(--cu-font-size);
+            font-variant-numeric: tabular-nums;
+            font-feature-settings: "tnum" 1;
+            font-weight: 600;
+            line-height: 1;
+            letter-spacing: -0.045em;
+            text-align: center;
+            transform-origin: 50% 58%;
+            white-space: nowrap;
+            will-change: transform, opacity;
+          }
+
+          /* Glow is opt-in via the glow variable; the register ships flat. */
+          .cu-stage.cu-glow {
+            text-shadow: 0 2.4cqh 7cqh color-mix(in srgb, var(--cu-accent) 24%, transparent);
+          }
+
+          .cu-affix {
+            position: relative;
+            flex: 0 0 auto;
+            color: color-mix(in srgb, var(--cu-accent) 72%, var(--fg, #f8fafc));
+            font-size: 0.55em;
+            font-weight: 600;
+            letter-spacing: -0.02em;
+          }
+
+          /* Affix gaps are font-relative (em of the affix), never layout
+             spacing tokens, so the lockup scales with the figure. */
+          .cu-prefix {
+            margin-right: 0.14em;
+          }
+
+          .cu-suffix {
+            margin-left: 0.14em;
+          }
+
+          .cu-affix:empty {
+            display: none;
+          }
+
+          .cu-value {
+            display: inline-block;
+            min-width: 1ch;
+          }
+        </style>
+
+        <div
+          id="count-up-clip"
+          class="cu-clip clip"
+          data-start="0"
+          data-duration="3"
+          data-track-index="0"
+        >
+          <div class="cu-stage" role="img">
+            <span class="cu-affix cu-prefix" aria-hidden="true"></span>
+            <span class="cu-value" aria-hidden="true"></span>
+            <span class="cu-affix cu-suffix" aria-hidden="true"></span>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".cu-stage");
+            var valueElement = root.querySelector(".cu-value");
+            var prefixElement = root.querySelector(".cu-prefix");
+            var suffixElement = root.querySelector(".cu-suffix");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var startCandidate = vars.start;
+            var endCandidate = vars.end;
+            var start = Number.isFinite(startCandidate) ? startCandidate : 0;
+            var end = Number.isFinite(endCandidate) ? endCandidate : 100;
+            var prefix = vars.prefix == null ? "" : String(vars.prefix);
+            var suffix = vars.suffix == null ? "%" : String(vars.suffix);
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var glow = vars.glow === true || vars.glow === "true";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            function formatValue(value) {
+              return Math.round(value).toLocaleString("en-US");
+            }
+
+            prefixElement.textContent = prefix;
+            suffixElement.textContent = suffix;
+
+            // Optical trim: flex baseline alignment is metric, not optical.
+            // At 0.55em a lone currency glyph hugs the baseline and a lone
+            // math-axis glyph (+, ~) sits below the figures' visual middle,
+            // so the two affixes land at different heights. Lift both onto
+            // the figures' optical center; full-height strings (%, letters,
+            // digits) stay on the shared baseline.
+            function affixLift(text) {
+              if (/^[$€£¥₹₩]$/.test(text)) return "-0.31em";
+              if (/^[+−±×=~<>-]+$/.test(text)) return "-0.36em";
+              return "";
+            }
+            prefixElement.style.top = affixLift(prefix);
+            suffixElement.style.top = affixLift(suffix);
+            root.style.setProperty("--cu-accent", accentColors[accent]);
+            stage.classList.toggle("cu-glow", glow);
+
+            var startText = prefix + formatValue(start) + suffix;
+            var endText = prefix + formatValue(end) + suffix;
+            var characterCount = Math.max(
+              Array.from(startText).length,
+              Array.from(endText).length,
+              1,
+            );
+            var fittedCqw = Math.min(20, 150 / characterCount);
+            root.style.setProperty("--cu-font-size", "min(" + fittedCqw.toFixed(3) + "cqw, 34cqh)");
+            stage.setAttribute("aria-label", endText);
+
+            var IN_BASE = 2.05;
+            var OUT_BASE = exit === "none" ? 0 : 0.45;
+            var COUNT_BASE = 1.72;
+            var PULSE_HALF_BASE = 0.165;
+            var ARRIVAL_BASE = 0.38;
+            var STILLNESS = 0.25;
+            var FPS = 30;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "3"));
+            var totalBase = Math.max(0.001, IN_BASE + OUT_BASE);
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var COUNT = COUNT_BASE * scale;
+            var PULSE_HALF = PULSE_HALF_BASE * scale;
+            var ARRIVAL = ARRIVAL_BASE * scale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var HOLD_START = IN;
+            var OUT_START = IN + HOLD;
+            var lastFrame = Math.max(1, Math.round(COUNT * FPS));
+            var countEase = gsap.parseEase("sine.inOut");
+            var frameRows = [];
+
+            for (var frame = 0; frame <= lastFrame; frame += 1) {
+              var progress = frame / lastFrame;
+              var easedProgress = countEase(progress);
+              frameRows.push(formatValue(start + (end - start) * easedProgress));
+            }
+
+            gsap.set(stage, { opacity: 0, y: "2.2cqh", scale: 0.98 });
+            valueElement.textContent = frameRows[0];
+
+            var tl = gsap.timeline({ paused: true });
+
+            tl.to(stage, { opacity: 1, duration: ARRIVAL, ease: "power2.out" }, 0);
+            tl.to(stage, { y: "0cqh", scale: 1, duration: ARRIVAL, ease: "power3.out" }, 0);
+
+            frameRows.forEach(function (row, frameIndex) {
+              tl.set(valueElement, { textContent: row }, COUNT * (frameIndex / lastFrame));
+            });
+
+            tl.to(stage, { scale: 1.07, duration: PULSE_HALF, ease: "power3.out" }, COUNT);
+            tl.to(
+              stage,
+              { scale: 1, duration: PULSE_HALF, ease: "power2.out" },
+              COUNT + PULSE_HALF,
+            );
+
+            var driftDuration = Math.max(0, HOLD - STILLNESS);
+            if (driftDuration > 0) {
+              tl.to(
+                stage,
+                {
+                  y: "-0.55cqh",
+                  duration: driftDuration / 2,
+                  ease: "sine.inOut",
+                  yoyo: true,
+                  repeat: 1,
+                },
+                HOLD_START,
+              );
+            }
+
+            // OUT: optional departure; exit none holds until the frame cuts.
+            if (exit === "up") {
+              tl.to(stage, { y: "-2.2cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              tl.to(
+                stage,
+                { opacity: 0, scale: 0.985, duration: OUT, ease: "power2.in" },
+                OUT_START,
+              );
+            } else if (exit === "fade") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["count-up"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/count-up/demo.html b/registry/components/count-up/demo.html
new file mode 100644
index 0000000000..3510ee3f37
--- /dev/null
+++ b/registry/components/count-up/demo.html
@@ -0,0 +1,101 @@
+<!doctype html>
+<!--
+  count-up demo. This standalone composition mounts count-up.html through
+  data-composition-src. Non-default values prove every variable path while
+  the primitive stays elastic to the sized host card.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Count Up Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #0b0c0e);
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --muted: #94a3b8;
+        --surface: #14171c;
+        --border: #343a46;
+        --brand: #71f5a7;
+        --accent: #61a8ff;
+        --accent-2: #c5a3ff;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-body: Inter, system-ui, sans-serif;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        --radius: 3cqmin;
+        --space-1: 1.2cqmin;
+        --space-2: 2.4cqmin;
+        --space-3: 4cqmin;
+        --dur-beat: 0.4s;
+        --ease-standard: cubic-bezier(0.215, 0.61, 0.355, 1);
+        --ease-emphasis: cubic-bezier(0.19, 1, 0.22, 1);
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(
+          ellipse at 50% 44%,
+          color-mix(in srgb, var(--surface) 88%, var(--accent-2)) 0%,
+          var(--bg) 72%
+        );
+      }
+
+      .mount-card {
+        width: 72%;
+        height: 42%;
+        left: 14%;
+        top: 29%;
+        container-type: size;
+        overflow: hidden;
+        border: 0.12cqmin solid color-mix(in srgb, var(--border) 72%, transparent);
+        border-radius: calc(var(--radius) * 1.35);
+        background: color-mix(in srgb, var(--surface) 78%, transparent);
+        box-shadow: 0 4cqh 10cqh color-mix(in srgb, var(--bg) 64%, transparent);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="count-up-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="3"
+      data-fps="30"
+    >
+      <div
+        id="count-up-mount"
+        class="mount-card clip"
+        data-composition-id="count-up"
+        data-composition-src="./count-up.html"
+        data-variable-values='{"start":1200,"end":12500,"prefix":"$","suffix":"+","accent":"violet"}'
+        data-start="0"
+        data-duration="3"
+        data-track-index="0"
+        data-width="1382"
+        data-height="454"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["count-up-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/count-up/registry-item.json b/registry/components/count-up/registry-item.json
new file mode 100644
index 0000000000..fc8c948971
--- /dev/null
+++ b/registry/components/count-up/registry-item.json
@@ -0,0 +1,90 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "count-up",
+  "type": "hyperframes:component",
+  "title": "Count Up",
+  "description": "A token-native stat counter that eases between values and lands with a restrained scale pulse.",
+  "tags": ["motion-primitive", "proof", "stats", "counter", "number", "deterministic"],
+  "jobs": ["prove"],
+  "family": "proof-stats",
+  "profile": "count",
+  "evidence": "Wave I I4 approved spec with the apple-money-count interpolation mechanic extracted and de-styled",
+  "syncPoints": [{ "id": "count-land", "phase": "in", "offset": 1.72 }],
+  "files": [
+    {
+      "path": "count-up.html",
+      "target": "compositions/components/count-up.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "start",
+      "type": "number",
+      "role": "content",
+      "label": "Start value",
+      "description": "First value shown by the count.",
+      "default": 0,
+      "step": 1
+    },
+    {
+      "id": "end",
+      "type": "number",
+      "role": "content",
+      "label": "End value",
+      "description": "Final value where the count lands.",
+      "default": 100,
+      "step": 1
+    },
+    {
+      "id": "prefix",
+      "type": "string",
+      "role": "content",
+      "label": "Prefix",
+      "description": "Optional text shown before the value.",
+      "default": ""
+    },
+    {
+      "id": "suffix",
+      "type": "string",
+      "role": "content",
+      "label": "Suffix",
+      "description": "Optional text shown after the value.",
+      "default": "%"
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Color used by the count.",
+      "default": "green",
+      "options": [
+        { "value": "green", "label": "Green" },
+        { "value": "blue", "label": "Blue" },
+        { "value": "violet", "label": "Violet" }
+      ]
+    },
+    {
+      "id": "glow",
+      "type": "boolean",
+      "role": "style",
+      "label": "Glow",
+      "description": "Optional soft accent glow under the count. Off by default.",
+      "default": false
+    },
+    {
+      "id": "exit",
+      "type": "enum",
+      "role": "timing",
+      "label": "Exit",
+      "description": "Optional departure. Default none: the landed value holds until the frame cuts.",
+      "default": "none",
+      "options": [
+        { "value": "none", "label": "None" },
+        { "value": "fade", "label": "Fade" },
+        { "value": "up", "label": "Up" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/cta-close/README.md b/registry/components/cta-close/README.md
new file mode 100644
index 0000000000..e717c3b7fc
--- /dev/null
+++ b/registry/components/cta-close/README.md
@@ -0,0 +1,41 @@
+# cta-close
+
+The action-only close: a display-scale action line lands per word, filling 70 to 85 percent of the frame width with real air above and below, one generous button capsule pops beneath it with a single restrained overshoot, and the finished lockup stays completely still until the frame cuts. Monotone: ink on ground, accent only on the capsule.
+
+3.5s authored, elastic HOLD, exit `none` by default (this primitive closes films).
+
+## Variables
+
+| id             | type   | default          | notes                                                                                                                        |
+| -------------- | ------ | ---------------- | ---------------------------------------------------------------------------------------------------------------------------- |
+| `action_line`  | string | `Make it happen` | Two to four word closing action; character-aware fit targets 70 to 85 percent of the frame width, short lines cap on height. |
+| `button_label` | string | `Start now`      | Text inside the single CTA capsule; label auto-fits, set in the body face.                                                   |
+| `accent`       | enum   | `green`          | Capsule color: green rides `--brand`, blue rides `--accent`, violet rides `--accent-2`.                                      |
+| `exit`         | enum   | `none`           | `none` holds until the cut; `fade` and `up` depart the lockup over the final 0.45s.                                          |
+
+## Choreography
+
+1. The action line lands per word (rise + fade, power3.out, 0.10s stagger) at display scale.
+2. The capsule pops beneath with ONE restrained overshoot (back.out from 0.85 scale) at 0.72s; the close is settled by 1.32s.
+3. Dead-still confident hold to the end of the mount. No drift, no pulse.
+
+## Mount
+
+```html
+<div
+  class="clip"
+  data-composition-id="cta-close"
+  data-composition-src="./cta-close.html"
+  data-variable-values='{"action_line":"Ship your first film","button_label":"Get started","accent":"violet"}'
+  data-start="0"
+  data-duration="3.5"
+  data-track-index="0"
+></div>
+```
+
+Elastic root: no `data-width`/`data-height`; it fills whatever box the host clip gives it. Timeline registers under the literal `cta-close` key.
+
+## Notes
+
+- For an identity close (wordmark + tagline + URL) use `logo-brand-close`; this unit is action-only.
+- The hold is deliberately dead still: no drift, no pulse.
diff --git a/registry/components/cta-close/cta-close.html b/registry/components/cta-close/cta-close.html
new file mode 100644
index 0000000000..e31bcece39
--- /dev/null
+++ b/registry/components/cta-close/cta-close.html
@@ -0,0 +1,264 @@
+<!doctype html>
+<!--
+  cta-close: HyperFrames video primitive (call to action / close)
+
+  The action-only close. A display-scale action line lands per word, sized by
+  a character-aware fit so it fills 70 to 85 percent of the frame width with
+  real air above and below. One generous button capsule pops beneath it with
+  a single restrained overshoot, then the finished lockup holds dead still
+  until the frame cuts. Monotone: ink on ground, accent only on the capsule.
+
+  Variables:
+    action_line: two to four word closing action
+    button_label: capsule label
+    accent: green, blue, or violet capsule color
+    exit: none, fade, or up (default none; this primitive closes films)
+
+  Envelope:
+    IN_BASE = 1.32s, per-word landing followed by the capsule pop
+    HOLD = the rest of D, completely still
+    OUT = none by default; 0.45s lockup departure when exit is fade or up
+    If D is shorter than the fixed phases, they compress to fit. The timeline
+    is never time-scaled.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, has no data-width or data-height,
+  and registers one paused timeline under the literal cta-close key.
+-->
+<html
+  lang="en"
+  data-composition-id="cta-close"
+  data-composition-duration="3.5"
+  data-composition-variables='[
+    { "id": "action_line", "type": "string", "role": "content", "label": "Action line", "description": "Two to four word action that closes the film.", "default": "Make it happen" },
+    { "id": "button_label", "type": "string", "role": "content", "label": "Button label", "description": "Text displayed inside the single CTA capsule.", "default": "Start now" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Contract color used by the CTA capsule.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the lockup holds until the frame cuts (this primitive closes films).", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>CTA Close</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="cta-close" data-duration="3.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .cc-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+            background: var(--bg, #0b0c0e);
+          }
+
+          .cc-lockup {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 7cqh;
+            max-width: 96cqw;
+            text-align: center;
+          }
+
+          .cc-action {
+            margin: 0;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: var(--cc-action-size, min(10.4cqw, 30cqh));
+            font-weight: 600;
+            line-height: 1.02;
+            letter-spacing: -0.035em;
+            white-space: nowrap;
+          }
+
+          .cc-w {
+            display: inline-block;
+            will-change: transform, opacity;
+          }
+
+          .cc-button {
+            margin: 0;
+            padding: 2.9cqh 5cqw;
+            overflow: hidden;
+            border: 0;
+            border-radius: 999px;
+            background: var(--cc-accent);
+            color: var(--bg, #0b0c0e);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            font-size: var(--cc-button-size, min(3.4cqw, 6cqh));
+            font-weight: 600;
+            line-height: 1;
+            letter-spacing: -0.01em;
+            white-space: nowrap;
+            transform-origin: 50% 50%;
+            will-change: transform, opacity;
+          }
+        </style>
+
+        <div
+          id="cta-close-clip"
+          class="cc-clip clip"
+          data-start="0"
+          data-duration="3.5"
+          data-track-index="0"
+        >
+          <div class="cc-lockup">
+            <h2 class="cc-action"></h2>
+            <button class="cc-button" type="button" tabindex="-1"></button>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var lockup = root.querySelector(".cc-lockup");
+            var actionLine = root.querySelector(".cc-action");
+            var button = root.querySelector(".cc-button");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var actionText =
+              vars.action_line == null
+                ? "Make it happen"
+                : String(vars.action_line).trim().replace(/\s+/g, " ");
+            var buttonText =
+              vars.button_label == null
+                ? "Start now"
+                : String(vars.button_label).trim().replace(/\s+/g, " ");
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            // The line lands per word: one span per word, natural spaces kept
+            // between them so the display tracking never crushes word gaps.
+            actionLine.setAttribute("aria-label", actionText);
+            var words = actionText ? actionText.split(" ") : [];
+            words.forEach(function (word, index) {
+              if (index > 0) actionLine.appendChild(document.createTextNode(" "));
+              var span = document.createElement("span");
+              span.className = "cc-w";
+              span.setAttribute("aria-hidden", "true");
+              span.textContent = word;
+              actionLine.appendChild(span);
+            });
+            var wordEls = actionLine.querySelectorAll(".cc-w");
+            button.textContent = buttonText;
+            root.style.setProperty("--cc-accent", accentColors[accent]);
+
+            // Character-count fitting is deterministic before the template is
+            // laid out. The 0.47em advance estimate lands common display faces
+            // at 70 to 85 percent of the frame width; short lines cap on
+            // height instead so two-word closes stay monumental without
+            // touching the edges.
+            var actionCharacters = Math.max(1, Array.from(actionText).length);
+            var actionSize = Math.min(24, 76 / (actionCharacters * 0.47));
+            var buttonCharacters = Math.max(1, Array.from(buttonText).length);
+            var buttonSize = Math.min(3.5, 50 / (buttonCharacters * 0.5));
+            root.style.setProperty(
+              "--cc-action-size",
+              "min(" + actionSize.toFixed(3) + "cqw, 30cqh)",
+            );
+            root.style.setProperty(
+              "--cc-button-size",
+              "min(" + buttonSize.toFixed(3) + "cqw, 6cqh)",
+            );
+
+            var IN_BASE = 1.32;
+            var OUT_BASE = exit === "none" ? 0 : 0.45;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "3.5"));
+            var envelopeScale = Math.min(1, duration / (IN_BASE + OUT_BASE));
+            var WORDS_AT = 0.06 * envelopeScale;
+            var WORD_DURATION = 0.62 * envelopeScale;
+            var WORD_STAGGER = 0.1 * envelopeScale;
+            var BUTTON_AT = 0.72 * envelopeScale;
+            var BUTTON_DURATION = 0.6 * envelopeScale;
+            var BUTTON_FADE = 0.22 * envelopeScale;
+            var OUT = OUT_BASE * envelopeScale;
+            var OUT_START = duration - OUT;
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN, phase one: the action line lands per word at display scale.
+            tl.fromTo(
+              wordEls,
+              { opacity: 0, y: "8cqh" },
+              {
+                opacity: 1,
+                y: 0,
+                duration: WORD_DURATION,
+                ease: "power3.out",
+                stagger: WORD_STAGGER,
+              },
+              WORDS_AT,
+            );
+
+            // IN, phase two: the capsule pops beneath with ONE restrained
+            // overshoot (back.out), a real button under a monumental line.
+            tl.fromTo(
+              button,
+              { scale: 0.85, y: "3cqh" },
+              { scale: 1, y: 0, duration: BUTTON_DURATION, ease: "back.out(1.5)" },
+              BUTTON_AT,
+            );
+            tl.fromTo(
+              button,
+              { opacity: 0 },
+              { opacity: 1, duration: BUTTON_FADE, ease: "power2.out" },
+              BUTTON_AT,
+            );
+
+            // HOLD: dead still. The empty set pins the timeline to the full
+            // mount duration so seeks inside the hold land on the held pose.
+            tl.set({}, {}, duration);
+
+            // OUT: optional departure; exit none holds the still lockup
+            // until the frame cuts (this primitive closes films).
+            if (exit === "fade") {
+              tl.to(lockup, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "up") {
+              tl.to(
+                lockup,
+                { opacity: 0, y: "-5cqh", duration: OUT, ease: "power2.in" },
+                OUT_START,
+              );
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["cta-close"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/cta-close/demo.html b/registry/components/cta-close/demo.html
new file mode 100644
index 0000000000..4f7a474c57
--- /dev/null
+++ b/registry/components/cta-close/demo.html
@@ -0,0 +1,95 @@
+<!doctype html>
+<!--
+  cta-close demo. Full-bleed mount on a light editorial token backdrop: the
+  close owns the whole 1920x1080 frame, proving the display line lands at
+  monumental scale with non-default copy and the violet accent capsule.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>CTA Close Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #faf8f3;
+      }
+
+      #root {
+        --bg: #faf8f3;
+        --fg: #191713;
+        --muted: #6f695d;
+        --surface: #f1ede3;
+        --border: #e2dccd;
+        --brand: #0d7a4f;
+        --accent: #1d4ed8;
+        --accent-2: #6d3ae0;
+        --font-display: Georgia, "Times New Roman", serif;
+        --font-body: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        --radius: 0.9cqmin;
+        --space-1: 1.1cqmin;
+        --space-2: 2.2cqmin;
+        --space-3: 3.8cqmin;
+        --dur-beat: 0.48s;
+        --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
+        --ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1);
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        border-top: 1px solid var(--border, #e2dccd);
+        border-bottom: 1px solid var(--border, #e2dccd);
+        background: var(--bg, #faf8f3);
+      }
+
+      .mount-stage {
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        container-type: size;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="cta-close-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="3.5"
+      data-fps="30"
+    >
+      <div
+        id="cta-close-mount"
+        class="mount-stage clip"
+        data-composition-id="cta-close"
+        data-composition-src="./cta-close.html"
+        data-variable-values='{"action_line":"Ship your first film","button_label":"Get started free","accent":"violet"}'
+        data-start="0"
+        data-duration="3.5"
+        data-track-index="0"
+        data-width="1920"
+        data-height="1080"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["cta-close-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/cta-close/registry-item.json b/registry/components/cta-close/registry-item.json
new file mode 100644
index 0000000000..be72d4cc99
--- /dev/null
+++ b/registry/components/cta-close/registry-item.json
@@ -0,0 +1,64 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "cta-close",
+  "type": "hyperframes:component",
+  "title": "CTA Close",
+  "description": "A display-scale action line lands per word and fills the frame with air, one generous CTA capsule pops beneath it with a single overshoot, and the finished close holds completely still.",
+  "tags": ["motion-primitive", "ui-props", "cta", "end-card", "close", "ask"],
+  "jobs": ["ask"],
+  "family": "ui-props",
+  "profile": "holdable",
+  "evidence": "Wave I I7 cta-close specification",
+  "syncPoints": [{ "id": "close-settled", "phase": "in", "offset": 1.32 }],
+  "files": [
+    {
+      "path": "cta-close.html",
+      "target": "compositions/components/cta-close.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "action_line",
+      "type": "string",
+      "role": "content",
+      "label": "Action line",
+      "description": "Two to four word action that closes the film.",
+      "default": "Make it happen"
+    },
+    {
+      "id": "button_label",
+      "type": "string",
+      "role": "content",
+      "label": "Button label",
+      "description": "Text displayed inside the single CTA capsule.",
+      "default": "Start now"
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Contract color used by the CTA capsule.",
+      "default": "green",
+      "options": [
+        { "value": "green", "label": "Green" },
+        { "value": "blue", "label": "Blue" },
+        { "value": "violet", "label": "Violet" }
+      ]
+    },
+    {
+      "id": "exit",
+      "type": "enum",
+      "role": "timing",
+      "label": "Exit",
+      "description": "Optional departure. Default none: the lockup holds until the frame cuts (this primitive closes films).",
+      "default": "none",
+      "options": [
+        { "value": "none", "label": "None" },
+        { "value": "fade", "label": "Fade" },
+        { "value": "up", "label": "Up" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/cta-lockup/cta-lockup.html b/registry/components/cta-lockup/cta-lockup.html
new file mode 100644
index 0000000000..93bd518535
--- /dev/null
+++ b/registry/components/cta-lockup/cta-lockup.html
@@ -0,0 +1,258 @@
+<!doctype html>
+<!--
+  cta-lockup: HyperFrames video primitive (ui-props / holdable / ask)
+
+  Concept: a canonical closing lockup with one frozen reveal order. The
+  action line arrives first, the CTA capsule pops beneath it with a restrained
+  overshoot second, and supporting microcopy settles last. The completed
+  lockup then holds with confidence.
+
+  Use when: a product film, launch video, or explainer needs one clear final
+  action without adding a second visual idea.
+
+  Variables:
+    - action_line (string, default "Start building today"): primary close.
+    - button_label (string, default "Get HyperFrames"): CTA capsule label.
+    - microcopy (string, default "Free while in beta"): supporting detail.
+    - accent (green | blue | violet, default green): capsule fill.
+
+  Envelope:
+    IN   1.60s fixed, action line then capsule then microcopy.
+    HOLD elastic, with one nearly imperceptible drift cycle across the full
+         remaining duration so longer mounts stretch only this phase.
+    OUT  none. This closing lockup establishes the final held state.
+    If D is shorter than 1.60s, IN compresses to fit and HOLD becomes zero.
+
+  Mount contract: this file is a template-wrapped sub-composition. #root
+  fills the host box, establishes the container query basis, carries no
+  data-width or data-height, and registers one paused GSAP timeline under
+  the hardcoded literal id "cta-lockup".
+-->
+<html
+  lang="en"
+  data-composition-id="cta-lockup"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "action_line", "type": "string", "role": "content", "label": "Action line", "description": "Primary action statement shown above the CTA.", "default": "Start building today" },
+    { "id": "button_label", "type": "string", "role": "content", "label": "Button label", "description": "Text displayed inside the CTA capsule.", "default": "Get HyperFrames" },
+    { "id": "microcopy", "type": "string", "role": "content", "label": "Microcopy", "description": "Supporting detail shown below the CTA capsule.", "default": "Free while in beta" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Fill color used by the CTA capsule.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>CTA Lockup</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="cta-lockup" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .cl-clip {
+            width: 100%;
+            height: 100%;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+          }
+
+          .cl-lockup {
+            width: min(88cqw, 150cqh);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            text-align: center;
+            will-change: transform;
+          }
+
+          .cl-action {
+            max-width: 86cqw;
+            margin: 0 0 6.5cqh;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: min(10cqw, 14cqh);
+            font-weight: 760;
+            line-height: 1.02;
+            letter-spacing: -0.045em;
+            text-wrap: balance;
+            will-change: transform, opacity;
+          }
+
+          .cl-button {
+            min-width: 34cqw;
+            max-width: 78cqw;
+            margin: 0 0 3.8cqh;
+            padding: 3.2cqh 5.5cqw;
+            overflow: hidden;
+            border: 0;
+            border-radius: 50cqh;
+            background: var(--cl-accent, #22c55e);
+            box-shadow: 0 2.2cqh 6cqh color-mix(in srgb, var(--cl-accent, #22c55e) 28%, transparent);
+            color: #07110d;
+            font: inherit;
+            font-size: min(4.3cqw, 6.8cqh);
+            font-weight: 760;
+            line-height: 1;
+            letter-spacing: -0.02em;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            transform-origin: 50% 50%;
+            will-change: transform, opacity;
+          }
+
+          .cl-microcopy {
+            max-width: 76cqw;
+            margin: 0;
+            color: var(--muted, #cbd5e1);
+            font-size: min(3cqw, 4.2cqh);
+            font-weight: 520;
+            line-height: 1.25;
+            letter-spacing: 0.01em;
+            text-wrap: balance;
+            will-change: transform, opacity;
+          }
+        </style>
+
+        <div
+          id="cta-lockup-clip"
+          class="cl-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="cl-lockup">
+            <h2 class="cl-action"></h2>
+            <button class="cl-button" type="button" tabindex="-1"></button>
+            <p class="cl-microcopy"></p>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var lockup = root.querySelector(".cl-lockup");
+            var actionLine = root.querySelector(".cl-action");
+            var button = root.querySelector(".cl-button");
+            var microcopy = root.querySelector(".cl-microcopy");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var actionText =
+              vars.action_line == null ? "Start building today" : String(vars.action_line);
+            var buttonText =
+              vars.button_label == null ? "Get HyperFrames" : String(vars.button_label);
+            var microcopyText =
+              vars.microcopy == null ? "Free while in beta" : String(vars.microcopy);
+            var accentColors = {
+              green: "var(--brand, #22c55e)",
+              blue: "var(--accent, #38bdf8)",
+              violet: "var(--accent-2, #a78bfa)",
+            };
+            var accentName = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+
+            actionLine.textContent = actionText;
+            button.textContent = buttonText;
+            microcopy.textContent = microcopyText;
+            root.style.setProperty("--cl-accent", accentColors[accentName]);
+
+            var IN_BASE = 1.6;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var envelopeScale = Math.min(1, duration / IN_BASE);
+            var IN = IN_BASE * envelopeScale;
+            var HOLD = Math.max(0, duration - IN);
+
+            var ACTION_DURATION = 0.5 * envelopeScale;
+            var BUTTON_AT = 0.56 * envelopeScale;
+            var BUTTON_DURATION = 0.6 * envelopeScale;
+            var BUTTON_OPACITY_DURATION = 0.24 * envelopeScale;
+            var MICROCOPY_AT = 1.18 * envelopeScale;
+            var MICROCOPY_DURATION = 0.42 * envelopeScale;
+
+            var tl = gsap.timeline({ paused: true });
+
+            tl.fromTo(
+              actionLine,
+              { opacity: 0, y: "3.4cqh" },
+              { opacity: 1, y: 0, duration: ACTION_DURATION, ease: "power3.out" },
+              0,
+            );
+            tl.fromTo(
+              button,
+              { scale: 0.72, y: "2.2cqh" },
+              {
+                scale: 1,
+                y: 0,
+                duration: BUTTON_DURATION,
+                ease: "back.out(1.7)",
+              },
+              BUTTON_AT,
+            );
+            tl.fromTo(
+              button,
+              { opacity: 0 },
+              {
+                opacity: 1,
+                duration: BUTTON_OPACITY_DURATION,
+                ease: "power2.out",
+              },
+              BUTTON_AT,
+            );
+            tl.fromTo(
+              microcopy,
+              { opacity: 0, y: "1.8cqh" },
+              {
+                opacity: 1,
+                y: 0,
+                duration: MICROCOPY_DURATION,
+                ease: "power2.out",
+              },
+              MICROCOPY_AT,
+            );
+
+            if (HOLD > 0) {
+              tl.fromTo(
+                lockup,
+                { y: 0 },
+                {
+                  y: "-0.35cqh",
+                  duration: HOLD / 2,
+                  ease: "sine.inOut",
+                  yoyo: true,
+                  repeat: 1,
+                },
+                IN,
+              );
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["cta-lockup"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/cta-lockup/demo.html b/registry/components/cta-lockup/demo.html
new file mode 100644
index 0000000000..108bc9d3f7
--- /dev/null
+++ b/registry/components/cta-lockup/demo.html
@@ -0,0 +1,86 @@
+<!doctype html>
+<!--
+  cta-lockup demo. This standalone composition mounts cta-lockup.html through
+  data-composition-src. Non-default copy and accent values prove that every
+  variable flows through the mount while the primitive stays host-sized.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>CTA Lockup Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0b0c0e;
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --muted: #aeb7c5;
+        --surface: #15181d;
+        --border: #303640;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-body: Inter, system-ui, sans-serif;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 44%, #171a20 0%, var(--bg) 70%);
+      }
+
+      .mount-card {
+        width: 48%;
+        height: 48%;
+        left: 26%;
+        top: 26%;
+        container-type: size;
+        overflow: hidden;
+        border: 0.12cqmin solid color-mix(in srgb, var(--border) 72%, transparent);
+        border-radius: 3cqmin;
+        background: color-mix(in srgb, var(--surface) 82%, transparent);
+        box-shadow: 0 4cqh 10cqh color-mix(in srgb, var(--bg) 68%, transparent);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="cta-lockup-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="cta-lockup-mount"
+        class="mount-card clip"
+        data-composition-id="cta-lockup"
+        data-composition-src="./cta-lockup.html"
+        data-variable-values='{"action_line":"Build your next video","button_label":"Try it now","microcopy":"No credit card required","accent":"violet"}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="922"
+        data-height="518"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["cta-lockup-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/cta-lockup/registry-item.json b/registry/components/cta-lockup/registry-item.json
new file mode 100644
index 0000000000..eae6ec7ee0
--- /dev/null
+++ b/registry/components/cta-lockup/registry-item.json
@@ -0,0 +1,59 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "cta-lockup",
+  "type": "hyperframes:component",
+  "title": "CTA Lockup",
+  "description": "A canonical closing lockup that reveals an action line, pops in an accent CTA capsule, settles supporting microcopy, and holds with confidence.",
+  "tags": ["motion-primitive", "ui-props", "cta", "end-card", "lockup", "ask"],
+  "jobs": ["ask"],
+  "family": "ui-props",
+  "profile": "holdable",
+  "evidence": "Wave F U14 cta-lockup build contract",
+  "syncPoints": [{ "id": "lockup-settled", "phase": "in", "offset": 1.6 }],
+  "files": [
+    {
+      "path": "cta-lockup.html",
+      "target": "compositions/components/cta-lockup.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "action_line",
+      "type": "string",
+      "role": "content",
+      "label": "Action line",
+      "description": "Primary action statement shown above the CTA.",
+      "default": "Start building today"
+    },
+    {
+      "id": "button_label",
+      "type": "string",
+      "role": "content",
+      "label": "Button label",
+      "description": "Text displayed inside the CTA capsule.",
+      "default": "Get HyperFrames"
+    },
+    {
+      "id": "microcopy",
+      "type": "string",
+      "role": "content",
+      "label": "Microcopy",
+      "description": "Supporting detail shown below the CTA capsule.",
+      "default": "Free while in beta"
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Fill color used by the CTA capsule.",
+      "default": "green",
+      "options": [
+        { "value": "green", "label": "Green" },
+        { "value": "blue", "label": "Blue" },
+        { "value": "violet", "label": "Violet" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/cursor-glyph-trail/README.md b/registry/components/cursor-glyph-trail/README.md
new file mode 100644
index 0000000000..a29e1add5c
--- /dev/null
+++ b/registry/components/cursor-glyph-trail/README.md
@@ -0,0 +1,51 @@
+# cursor-glyph-trail
+
+An actor (default: a cursor dot) travels an authored path and deposits small dithered glyphs at its past positions. Each glyph pops in where the actor passed and decays in place; stamps land at fixed arc-length spacing along the path, so the per-second stamp rate scales with the actor's velocity. The jh3yy stamp-and-decay register: the trail is the residue of the motion, fully dissolved before the hold.
+
+4s authored, elastic HOLD, exit `none` by default.
+
+## Variables
+
+| id        | type   | default  | notes                                                                                                         |
+| --------- | ------ | -------- | ------------------------------------------------------------------------------------------------------------- |
+| `glyphs`  | string | `░▒▓+·×` | Stamp charset; one glyph per stamp is chosen by a fixed-seed LCG.                                             |
+| `density` | enum   | `med`    | Arc-length spacing between stamps: `low` (4.6), `med` (2.9), `high` (1.8) percent units.                      |
+| `path`    | enum   | `sweep`  | `sweep` is an S-curve lower-left to upper-right; `arc` rises over the top; `zigzag` cuts three straight legs. |
+| `fade`    | number | `0.8`    | Per-stamp decay window in seconds, clamped 0.3 to 1.5; per stamp varied 0.75x to 1.25x.                       |
+| `accent`  | enum   | `green`  | Trail and actor color: green rides `--brand`, blue rides `--accent`, violet rides `--accent-2`.               |
+| `exit`    | enum   | `none`   | `none` holds until the cut; `fade` departs opacity-only; `up` rises out.                                      |
+
+## Actor slot
+
+The actor is a slot. Place an inert template anywhere in the HOST page (templates never render, and the runtime wipes the host clip's own children on mount, so the slot lives at document level):
+
+```html
+<template data-slot="cursor-glyph-trail-actor">
+  <img src="./assets/cursor.svg" alt="" style="width: 4cqmin" />
+</template>
+```
+
+With no slot, the primitive renders a token cursor dot (accent core, hairline ring, contract tokens only).
+
+## Mount
+
+```html
+<div
+  class="clip"
+  data-composition-id="cursor-glyph-trail"
+  data-composition-src="./cursor-glyph-trail.html"
+  data-variable-values='{"path":"zigzag","density":"high","accent":"blue"}'
+  data-start="0"
+  data-duration="4"
+  data-track-index="0"
+></div>
+```
+
+Elastic root: no `data-width`/`data-height`; it fills whatever box the host clip gives it. Timeline registers under the literal `cursor-glyph-trail` key.
+
+## Notes
+
+- Deterministic: the stamp table (positions, times, glyph choices, jitter, sizes, peaks, decay multipliers) is built once at mount from fixed LCG seed `0x67117a11`. Stamps carry no tweens: each stamp's opacity is recomputed on every timeline update as a pure function `f(tl.time() - t_i)` of its table row (two sequential tweens on one property render in direction-dependent order under GSAP seeks), and the actor position is recomputed from `tl.time()` the same way, so eventful seeks (`suppressEvents=false`, the engine's render path) land identical frames in any order and either direction.
+- Density law: stamps land at fixed arc-length spacing, so faster travel deposits more stamps per second; the shared ease (power2-style inOut) makes the trail thin at the ends and dense through the middle.
+- Every stamp's decay completes inside IN by construction (`IN = travel + pop + fade * 1.25 + margin`), so the HOLD is truly still: the actor rests at the path end and the field is empty.
+- The travel ease is one shared function used by both the stamp-table sampler and the per-update actor position, so stamps always sit exactly on the actor's past path.
diff --git a/registry/components/cursor-glyph-trail/cursor-glyph-trail.html b/registry/components/cursor-glyph-trail/cursor-glyph-trail.html
new file mode 100644
index 0000000000..76d342a385
--- /dev/null
+++ b/registry/components/cursor-glyph-trail/cursor-glyph-trail.html
@@ -0,0 +1,390 @@
+<!doctype html>
+<!--
+  cursor-glyph-trail: HyperFrames video primitive (product demo / trails)
+
+  An actor (default: a cursor dot) travels an authored path and deposits
+  small dithered glyphs at its past positions. Each glyph pops in where the
+  actor passed and decays in place; stamps land at fixed arc-length spacing,
+  so the per-second stamp rate scales with the actor's velocity. The jh3yy
+  stamp-and-decay register: the trail is the residue of the motion, and it
+  has fully dissolved before the hold.
+
+  The actor is a SLOT. Callers supply content by placing an inert template
+  anywhere in the HOST page (templates never render, and the runtime wipes
+  the host clip's own children on mount, so the slot lives at document
+  level):
+
+    <template data-slot="cursor-glyph-trail-actor"> ... </template>
+
+  With no slot, the primitive renders a token cursor dot (accent core,
+  hairline ring).
+
+  Variables (declared in data-composition-variables below):
+    - glyphs (string): the stamp charset; one glyph is chosen per stamp by
+      a fixed-seed LCG. Default is a dithered block-and-punctuation set.
+    - density ("low" | "med" | "high", default "med"): arc-length spacing
+      between stamps; higher density means tighter spacing.
+    - path ("sweep" | "arc" | "zigzag", default "sweep"): the authored
+      travel path preset.
+    - fade (number seconds, default 0.8, clamped 0.3 to 1.5): the decay
+      window of each stamp; per-stamp decay varies 0.75x to 1.25x of it.
+    - accent ("green" | "blue" | "violet", default "green"): green rides
+      --brand, blue rides --accent, violet rides --accent-2.
+    - exit ("none" | "fade" | "up", default "none"): frame roots own
+      transitions; the default holds the final frame to the last pixel.
+
+  Envelope, fixed IN and OUT with elastic HOLD only (never timeScale):
+    IN_BASE  = TRAVEL (2.4s) + pop (0.07s) + fade * 1.25 + 0.05s margin;
+               the actor arrives at TRAVEL and every stamp's decay tween
+               ends inside IN, so the HOLD is truly still
+    HOLD     = max(0, D - IN - OUT)
+    OUT_BASE = 0.45s  only when exit != none
+    If D < IN_BASE + OUT_BASE, the whole envelope compresses together.
+
+  Determinism: the stamp table (positions, times, glyph choices, jitter,
+  sizes, peaks, decay multipliers) is computed exactly once during
+  synchronous mount from fixed LCG seed 0x67117a11. On every timeline
+  update, each stamp's opacity is recomputed as a pure function
+  f(tl.time() - t_i) of its table row, and the actor's position as a pure
+  function of tl.time(); stamps deliberately carry NO tweens (two
+  sequential tweens on one property render in direction-dependent order
+  under GSAP seeks, which breaks byte-identical frames). No Math.random
+  at runtime, no wall clock, no incremental state, no
+  requestAnimationFrame. Eventful seeks (suppressEvents=false, the
+  engine's render path) land identical frames in any order and either
+  direction.
+
+  Mount contract: the runtime clones only this template. #root fills the
+  host box (no data-width/data-height, container-type: size, cqmin units),
+  is styled via #root only, and registers one paused timeline under the
+  LITERAL "cursor-glyph-trail" key.
+-->
+<html
+  lang="en"
+  data-composition-id="cursor-glyph-trail"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "glyphs", "type": "string", "role": "content", "label": "Glyphs", "description": "Stamp charset; one glyph per stamp is chosen deterministically.", "default": "░▒▓+·×" },
+    { "id": "density", "type": "enum", "role": "style", "label": "Density", "description": "Arc-length spacing between stamps along the path.", "default": "med", "options": [{ "value": "low", "label": "Low" }, { "value": "med", "label": "Medium" }, { "value": "high", "label": "High" }] },
+    { "id": "path", "type": "enum", "role": "timing", "label": "Path", "description": "Authored travel path preset.", "default": "sweep", "options": [{ "value": "sweep", "label": "Sweep" }, { "value": "arc", "label": "Arc" }, { "value": "zigzag", "label": "Zigzag" }] },
+    { "id": "fade", "type": "number", "role": "timing", "label": "Fade", "description": "Per-stamp decay window in seconds, clamped 0.3 to 1.5.", "default": 0.8 },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Trail and actor color: green rides --brand, blue rides --accent, violet rides --accent-2.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the settled actor holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Cursor Glyph Trail</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="cursor-glyph-trail" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            pointer-events: none;
+          }
+
+          .cgt-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .cgt-stage {
+            position: absolute;
+            inset: 0;
+            will-change: transform, opacity;
+          }
+
+          .cgt-field {
+            position: absolute;
+            inset: 0;
+          }
+
+          .cgt-stamp {
+            position: absolute;
+            opacity: 0;
+            line-height: 1;
+            font-weight: 500;
+            will-change: opacity;
+            user-select: none;
+          }
+
+          .cgt-actor {
+            position: absolute;
+            opacity: 0;
+            transform: translate(-50%, -50%);
+            will-change: opacity;
+          }
+
+          .cgt-dot {
+            width: 3.4cqmin;
+            height: 3.4cqmin;
+            border-radius: 50%;
+            background: var(--cgt-accent);
+            border: 0.35cqmin solid color-mix(in srgb, var(--fg, #f8fafc) 82%, var(--cgt-accent));
+            box-shadow: 0 0.6cqmin 2.4cqmin color-mix(in srgb, var(--bg, #000000) 35%, transparent);
+          }
+        </style>
+
+        <div
+          id="cursor-glyph-trail-clip"
+          class="cgt-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="cgt-stage">
+            <div class="cgt-field" aria-hidden="true"></div>
+            <div class="cgt-actor">
+              <div class="cgt-dot"></div>
+            </div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".cgt-stage");
+            var field = root.querySelector(".cgt-field");
+            var actor = root.querySelector(".cgt-actor");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            // Arc-length spacing (percent-of-stage units). Fixed spacing
+            // along the path means the per-second stamp rate rises and
+            // falls with the actor's velocity: the density law.
+            var spacingByDensity = { low: 4.6, med: 2.9, high: 1.8 };
+            var density = Object.prototype.hasOwnProperty.call(spacingByDensity, vars.density)
+              ? vars.density
+              : "med";
+            var pathName = vars.path === "arc" || vars.path === "zigzag" ? vars.path : "sweep";
+            var glyphSource =
+              typeof vars.glyphs === "string" && vars.glyphs.length > 0 ? vars.glyphs : "░▒▓+·×";
+            var glyphSet = Array.from(glyphSource);
+            var fadeRaw = parseFloat(vars.fade);
+            var fade = isFinite(fadeRaw) ? Math.min(1.5, Math.max(0.3, fadeRaw)) : 0.8;
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #52525b)",
+              blue: "var(--accent, #52525b)",
+              violet: "var(--accent-2, #52525b)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            root.style.setProperty("--cgt-accent", accentColors[accent]);
+
+            // SLOT. Caller templates live at HOST DOCUMENT level (the mount
+            // wipes host-clip children, and templates never render).
+            var hostDoc = root.ownerDocument;
+            var slotTemplate = null;
+            try {
+              slotTemplate = hostDoc.querySelector(
+                'template[data-slot="cursor-glyph-trail-actor"]',
+              );
+            } catch (error) {
+              slotTemplate = null;
+            }
+            if (slotTemplate) {
+              actor.querySelector(".cgt-dot").remove();
+              actor.appendChild(hostDoc.importNode(slotTemplate.content, true));
+            }
+
+            // Envelope: fixed IN/OUT, elastic HOLD, never time-scaled.
+            var POP = 0.07;
+            var TRAVEL_BASE = 2.4;
+            var IN_BASE = TRAVEL_BASE + POP + fade * 1.25 + 0.05;
+            var OUT_BASE = exit === "none" ? 0 : 0.45;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var totalBase = Math.max(0.001, IN_BASE + OUT_BASE);
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var TRAVEL = TRAVEL_BASE * scale;
+            var pop = POP * scale;
+            var fadeEff = fade * scale;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var OUT_START = IN + HOLD;
+
+            // Path presets in percent-of-stage coordinates.
+            var zigzagPoints = [
+              { x: 10, y: 34 },
+              { x: 38, y: 70 },
+              { x: 64, y: 32 },
+              { x: 90, y: 64 },
+            ];
+            function pathPoint(u) {
+              if (pathName === "arc") {
+                return { x: 12 + 76 * u, y: 68 - 40 * Math.sin(Math.PI * u) };
+              }
+              if (pathName === "zigzag") {
+                var segs = zigzagPoints.length - 1;
+                var s = Math.min(segs - 1e-9, Math.max(0, u * segs));
+                var i = Math.floor(s);
+                var f = s - i;
+                var a = zigzagPoints[i];
+                var b = zigzagPoints[i + 1];
+                return { x: a.x + (b.x - a.x) * f, y: a.y + (b.y - a.y) * f };
+              }
+              // sweep: an S-curve from lower left to upper right.
+              return { x: 8 + 84 * u, y: 50 + 16 * Math.cos(Math.PI * u) };
+            }
+
+            // Shared travel ease, implemented once so the stamp table and
+            // the per-update actor position use the identical mapping.
+            function easeInOut(t) {
+              return t < 0.5 ? 2 * t * t : 1 - 2 * (1 - t) * (1 - t);
+            }
+            function clamp01(v) {
+              return v < 0 ? 0 : v > 1 ? 1 : v;
+            }
+
+            // The LCG and every per-stamp decision live here, computed once
+            // before timeline construction from a fixed seed. A stamp's
+            // opacity at any time is then a pure function of timeline time.
+            var lcgState = 0x67117a11;
+            function next() {
+              lcgState = (Math.imul(1664525, lcgState) + 1013904223) >>> 0;
+              return lcgState / 4294967296;
+            }
+
+            var spacing = spacingByDensity[density];
+            var STEPS = 600;
+            var stamps = [];
+            var acc = 0;
+            var prev = pathPoint(easeInOut(0));
+            for (var k = 1; k <= STEPS; k += 1) {
+              var f = k / STEPS;
+              var pos = pathPoint(easeInOut(f));
+              acc += Math.hypot(pos.x - prev.x, pos.y - prev.y);
+              prev = pos;
+              if (acc >= spacing) {
+                acc -= spacing;
+                stamps.push({
+                  t: f * TRAVEL,
+                  x: pos.x + (next() - 0.5) * 3.2,
+                  y: pos.y + (next() - 0.5) * 3.2,
+                  glyph: glyphSet[Math.floor(next() * glyphSet.length) % glyphSet.length],
+                  rot: (next() - 0.5) * 20,
+                  size: 1.9 + next() * 1.4,
+                  peak: 0.45 + next() * 0.45,
+                  mix: 55 + Math.floor(next() * 36),
+                  fadeMul: 0.75 + next() * 0.5,
+                });
+              }
+            }
+
+            var fragment = hostDoc.createDocumentFragment();
+            for (var s = 0; s < stamps.length; s += 1) {
+              var row = stamps[s];
+              var span = hostDoc.createElement("span");
+              span.className = "cgt-stamp";
+              span.textContent = row.glyph;
+              span.style.left = row.x.toFixed(3) + "%";
+              span.style.top = row.y.toFixed(3) + "%";
+              span.style.fontSize = row.size.toFixed(3) + "cqmin";
+              span.style.transform = "translate(-50%, -50%) rotate(" + row.rot.toFixed(2) + "deg)";
+              span.style.color =
+                "color-mix(in srgb, var(--cgt-accent) " + row.mix + "%, var(--fg, #f8fafc))";
+              row.el = span;
+              fragment.appendChild(span);
+            }
+            field.appendChild(fragment);
+
+            // Pure per-update apply: the actor position and every stamp's
+            // opacity are functions of tl.time() alone. A stamp pops in
+            // over `pop` seconds and decays over its table row's window;
+            // by IN every value is exactly zero. Writes are idempotent, so
+            // the HOLD repaints identical values and stays truly still.
+            function stampOpacity(row, timeSeconds) {
+              var dt = timeSeconds - row.t;
+              if (dt <= 0) return 0;
+              if (dt < pop) {
+                var g = dt / pop;
+                return row.peak * (1 - (1 - g) * (1 - g));
+              }
+              var u = (dt - pop) / (fadeEff * row.fadeMul);
+              if (u >= 1) return 0;
+              return row.peak * (1 - u * u);
+            }
+
+            function applyTime(timeSeconds) {
+              var u = easeInOut(clamp01(TRAVEL > 0 ? timeSeconds / TRAVEL : 1));
+              var p = pathPoint(u);
+              gsap.set(actor, { left: p.x.toFixed(4) + "%", top: p.y.toFixed(4) + "%" });
+              for (var i = 0; i < stamps.length; i += 1) {
+                stamps[i].el.style.opacity = stampOpacity(stamps[i], timeSeconds).toFixed(4);
+              }
+            }
+
+            gsap.set(stage, { opacity: 1, y: "0cqh" });
+
+            var tl = gsap.timeline({
+              paused: true,
+              onUpdate: function () {
+                applyTime(tl.time());
+              },
+            });
+
+            // Anchor tween: an inert plain-object tween spanning the full
+            // authored duration so the timeline covers [0, D], onUpdate
+            // fires for every eventful seek, and holds never clamp short.
+            tl.to({ p: 0 }, { p: 1, duration: duration, ease: "none" }, 0);
+
+            // Actor entrance: both endpoints authored.
+            tl.fromTo(
+              actor,
+              { opacity: 0 },
+              { opacity: 1, duration: 0.18 * scale, ease: "power2.out" },
+              0,
+            );
+
+            // Stamps carry no tweens: their opacity rides applyTime's pure
+            // table evaluation, and each decay completes inside IN by
+            // construction.
+
+            // HOLD: truly still. All stamps are exactly zero by IN and the
+            // actor rests at path(1); repeated repaints write identical
+            // values.
+
+            // OUT: optional departure; exit none holds until the frame cuts.
+            if (exit === "up") {
+              tl.to(stage, { y: "-4cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "fade") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            }
+
+            tl.seek(0);
+            applyTime(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["cursor-glyph-trail"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/cursor-glyph-trail/demo.html b/registry/components/cursor-glyph-trail/demo.html
new file mode 100644
index 0000000000..dfd1c32a0f
--- /dev/null
+++ b/registry/components/cursor-glyph-trail/demo.html
@@ -0,0 +1,85 @@
+<!doctype html>
+<!--
+  cursor-glyph-trail demo. FULL-BLEED light mount: the primitive fills the
+  whole 1920x1080 frame on a light token block. Non-default path, density,
+  fade, and accent values prove the variable path.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Cursor Glyph Trail Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #eef0f3);
+      }
+
+      #root {
+        --bg: #eef0f3;
+        --fg: #14161b;
+        --muted: #5b6472;
+        --surface: #ffffff;
+        --border: #d3d8e0;
+        --brand: #3f3f46;
+        --accent: #3f3f46;
+        --accent-2: #3f3f46;
+        --font-display: "Inter", system-ui, sans-serif;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 42%, #f7f8fa 0%, var(--bg, #eef0f3) 72%);
+      }
+
+      .mount-bleed {
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        container-type: size;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="cursor-glyph-trail-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="cursor-glyph-trail-mount"
+        class="mount-bleed clip"
+        data-composition-id="cursor-glyph-trail"
+        data-composition-src="./cursor-glyph-trail.html"
+        data-variable-values='{"path":"zigzag","density":"high","fade":1.0,"accent":"blue"}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="1920"
+        data-height="1080"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["cursor-glyph-trail-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/cursor-glyph-trail/registry-item.json b/registry/components/cursor-glyph-trail/registry-item.json
new file mode 100644
index 0000000000..43e258b183
--- /dev/null
+++ b/registry/components/cursor-glyph-trail/registry-item.json
@@ -0,0 +1,90 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "cursor-glyph-trail",
+  "type": "hyperframes:component",
+  "title": "Cursor Glyph Trail",
+  "description": "An actor travels an authored path depositing small dithered glyphs at its past positions, each popping in and decaying in place, stamp rate scaling with the actor's velocity.",
+  "tags": ["motion-primitive", "demonstrate", "trail", "cursor", "glyphs", "deterministic"],
+  "jobs": ["demonstrate"],
+  "family": "demonstrate",
+  "profile": "stamp-decay",
+  "evidence": "Wave L1 frame study: jh3yy stamp-and-decay contact sheet (2069614221747224613/sheet-01)",
+  "syncPoints": [{ "id": "travel-complete", "phase": "in", "offset": 2.4 }],
+  "files": [
+    {
+      "path": "cursor-glyph-trail.html",
+      "target": "compositions/components/cursor-glyph-trail.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "glyphs",
+      "type": "string",
+      "role": "content",
+      "label": "Glyphs",
+      "description": "Stamp charset; one glyph per stamp is chosen deterministically.",
+      "default": "░▒▓+·×"
+    },
+    {
+      "id": "density",
+      "type": "enum",
+      "role": "style",
+      "label": "Density",
+      "description": "Arc-length spacing between stamps along the path.",
+      "default": "med",
+      "options": [
+        { "value": "low", "label": "Low" },
+        { "value": "med", "label": "Medium" },
+        { "value": "high", "label": "High" }
+      ]
+    },
+    {
+      "id": "path",
+      "type": "enum",
+      "role": "timing",
+      "label": "Path",
+      "description": "Authored travel path preset.",
+      "default": "sweep",
+      "options": [
+        { "value": "sweep", "label": "Sweep" },
+        { "value": "arc", "label": "Arc" },
+        { "value": "zigzag", "label": "Zigzag" }
+      ]
+    },
+    {
+      "id": "fade",
+      "type": "number",
+      "role": "timing",
+      "label": "Fade",
+      "description": "Per-stamp decay window in seconds, clamped 0.3 to 1.5.",
+      "default": 0.8
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Trail and actor color: green rides --brand, blue rides --accent, violet rides --accent-2.",
+      "default": "green",
+      "options": [
+        { "value": "green", "label": "Green" },
+        { "value": "blue", "label": "Blue" },
+        { "value": "violet", "label": "Violet" }
+      ]
+    },
+    {
+      "id": "exit",
+      "type": "enum",
+      "role": "timing",
+      "label": "Exit",
+      "description": "Optional departure. Default none: the settled actor holds until the frame cuts.",
+      "default": "none",
+      "options": [
+        { "value": "none", "label": "None" },
+        { "value": "fade", "label": "Fade" },
+        { "value": "up", "label": "Up" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/cut-the-curve/README.md b/registry/components/cut-the-curve/README.md
new file mode 100644
index 0000000000..4138a3fcb0
--- /dev/null
+++ b/registry/components/cut-the-curve/README.md
@@ -0,0 +1,36 @@
+# cut-the-curve
+
+A velocity-matched directional hard cut. The outgoing subject accelerates along one straight screen vector with `power4.in`; at peak velocity the timeline swaps identities; the incoming subject continues on the same vector and decelerates to rest with `power4.out`. Matched blur and opacity conceal the seam.
+
+Transition profile: no elastic HOLD; retime by changing the mount duration only (0.3s to 3s).
+
+## Variables
+
+| id            | type   | default  | notes                                                                                                                           |
+| ------------- | ------ | -------- | ------------------------------------------------------------------------------------------------------------------------------- |
+| `subject`     | enum   | `cursor` | `cursor`, `card`, or `scene`: the visual payload on both sides of the cut.                                                      |
+| `direction`   | enum   | `left`   | `left`, `right`, `up`, `down`: the shared travel vector.                                                                        |
+| `cutFraction` | number | `0.33`   | Normalized point of the hard cut. The incoming distance derives from it so seam velocity stays matched.                         |
+| `blurPx`      | number | `12`     | Blur shared by both subjects at the seam.                                                                                       |
+| `exit`        | enum   | `none`   | `none` rests until the cut; `fade`/`up` depart the incoming subject over a reserved tail (min(0.35s, 25% of D)) after it lands. |
+
+## Mount
+
+```html
+<div
+  class="clip"
+  data-composition-id="cut-the-curve"
+  data-composition-src="./cut-the-curve.html"
+  data-variable-values='{"subject":"card","direction":"right","cutFraction":0.33}'
+  data-start="0"
+  data-duration="1"
+  data-track-index="0"
+></div>
+```
+
+Elastic root: no `data-width`/`data-height`; it fills whatever box the host clip gives it. Timeline registers under the literal `cut-the-curve` key.
+
+## Notes
+
+- Sync point: the cut lands at `(D - exit tail) * cutFraction`; a `whip-cut` `hf:sfx` CustomEvent fires there for the scene mix stage.
+- Invariants: one shared vector, identity swap only at the cut, matched blur/opacity at the seam. Never split the two halves into independently tuned velocities.
diff --git a/registry/components/cut-the-curve/cut-the-curve.html b/registry/components/cut-the-curve/cut-the-curve.html
new file mode 100644
index 0000000000..b470b6966c
--- /dev/null
+++ b/registry/components/cut-the-curve/cut-the-curve.html
@@ -0,0 +1,500 @@
+<!doctype html>
+<!--
+  cut-the-curve -- HyperFrames video primitive (transitions / bridge)
+
+  Concept: a velocity-matched directional hard cut. The outgoing subject
+  accelerates along one straight screen vector with power4.in. At peak
+  velocity, the timeline swaps identities. The incoming subject starts on
+  the far side of the same vector and decelerates to rest with power4.out.
+  Matched blur and opacity at the cut conceal the seam.
+
+  Compiled from the launch write-up for this piece.
+  The source identifies the production signature as a single power4 whip,
+  with an approximately 1:2 outgoing-to-incoming distance and duration split.
+
+  Use when: bridging attention and momentum between shots, UI states, cards,
+  cursor beats, or scene blocks without requiring object identity to persist.
+
+  Variables (declared in data-composition-variables below):
+    - subject ("cursor" | "card" | "scene", default "cursor") selects the
+      simple visual payload used for both sides of the cut.
+    - direction ("left" | "right" | "up" | "down", default "left") owns
+      both the motion axis and the shared screen direction.
+    - cutFraction (number, 0-1, default 0.33) sets the hard-cut point. The
+      incoming distance is derived from this fraction so seam velocity stays
+      matched. At 0 or 1, the corresponding zero-duration half collapses.
+    - blurPx (number, default 12) sets blur at the cut seam.
+    - exit ("none" | "fade" | "up", default "none") optionally departs the
+      incoming subject at the end. Enabling it reserves a short tail window
+      (min(0.35s, 25% of D)) after the incoming subject lands.
+
+  Envelope (transition profile, no elastic HOLD; T = D minus the exit tail,
+  which is 0 when exit is none):
+    OUT = T * cutFraction, power4.in
+    IN  = T * (1 - cutFraction), power4.out
+    The default 0.33 split is approximately 1:2 in time. Incoming distance is
+    derived from OUT distance and the duration ratio, preserving the same
+    approximately 1:2 spatial split and matching velocity at the cut.
+
+  Sync point: CUT_AT = T * cutFraction, the fixed boundary between OUT and
+  IN. It never lands in a HOLD because this profile has no HOLD phase.
+
+  Sound cue: a short whip cut fires at CUT_AT. The primitive never plays
+  audio. It dispatches an `hf:sfx` CustomEvent with
+  { id: "whip-cut", t: CUT_AT } for the scene mix stage to route.
+
+  EDIT ZONE: change only the subject geometry custom properties in the style
+  block when adapting the payload drawings. The vector ratios and the paired
+  power4 eases are the mechanic and must remain together.
+
+  INVARIANTS: outgoing and incoming always share one vector; the identity swap
+  happens only at CUT_AT; their blur and opacity values match at that seam;
+  exactly one paused timeline registers under the literal id "cut-the-curve".
+
+  RETIME RANGE: 0.3s to 3s. Retiming changes D only. Never timeScale the GSAP
+  timeline and never split the two halves into independently tuned velocities.
+
+  Mount contract: this is a template-wrapped sub-composition. Everything the
+  mount needs, including styles, markup, GSAP, and timeline registration,
+  lives inside <template>. #root fills the host box with position:absolute,
+  inset:0, and container-type:size. It has no data-width or data-height.
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "subject", "type": "enum", "role": "content", "label": "Subject", "description": "Visual payload used on both sides of the cut.", "default": "cursor", "options": [{ "value": "cursor", "label": "Cursor" }, { "value": "card", "label": "Card" }, { "value": "scene", "label": "Scene" }] },
+    { "id": "direction", "type": "enum", "role": "motion", "label": "Direction", "description": "Shared screen direction for outgoing and incoming travel.", "default": "left", "options": [{ "value": "left", "label": "Left" }, { "value": "right", "label": "Right" }, { "value": "up", "label": "Up" }, { "value": "down", "label": "Down" }] },
+    { "id": "cutFraction", "type": "number", "role": "timing", "label": "Cut fraction", "description": "Normalized point where the hard cut swaps subjects.", "default": 0.33, "min": 0, "max": 1, "step": 0.01 },
+    { "id": "blurPx", "type": "number", "role": "style", "label": "Cut blur", "description": "Blur in pixels shared by both subjects at the cut seam.", "default": 12, "min": 0, "max": 40, "step": 1, "unit": "px" },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure of the incoming subject. Default none: it rests until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Cut the Curve</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="cut-the-curve" data-duration="1" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+          }
+
+          .ctc-clip,
+          .ctc-backdrop,
+          .ctc-subject {
+            position: absolute;
+            inset: 0;
+          }
+
+          .ctc-clip {
+            overflow: hidden;
+          }
+
+          .ctc-backdrop {
+            background:
+              radial-gradient(
+                circle at var(--ctc-glow-x, 24%) var(--ctc-glow-y, 28%),
+                color-mix(
+                  in srgb,
+                  var(--fg, #f8fafc) var(--ctc-glow-strength, 18%),
+                  var(--transparent, transparent)
+                ),
+                var(--transparent, transparent) var(--ctc-glow-radius, 42%)
+              ),
+              var(--bg, #0b1120);
+          }
+
+          .ctc-subject {
+            display: grid;
+            place-items: center;
+            opacity: 0;
+            will-change: transform, filter, opacity;
+          }
+
+          .ctc-subject.is-outgoing {
+            opacity: 1;
+            --ctc-primary: color-mix(in srgb, var(--fg, #f8fafc) 45%, transparent);
+            --ctc-secondary: color-mix(in srgb, var(--fg, #f8fafc) 18%, transparent);
+          }
+
+          .ctc-subject.is-incoming {
+            --ctc-primary: color-mix(in srgb, var(--fg, #f8fafc) 72%, transparent);
+            --ctc-secondary: color-mix(in srgb, var(--fg, #f8fafc) 45%, transparent);
+          }
+
+          .ctc-art {
+            display: none;
+          }
+
+          #root[data-subject="cursor"] .ctc-cursor,
+          #root[data-subject="card"] .ctc-card,
+          #root[data-subject="scene"] .ctc-scene {
+            display: block;
+          }
+
+          .ctc-cursor {
+            position: relative;
+            width: var(--ctc-cursor-width, 15cqw);
+            height: var(--ctc-cursor-height, 24cqh);
+          }
+
+          .ctc-cursor svg {
+            width: var(--ctc-cursor-svg-width, 100%);
+            height: var(--ctc-cursor-svg-height, 100%);
+            overflow: visible;
+            filter: drop-shadow(
+              var(--ctc-shadow-x, 0cqw) var(--ctc-shadow-y, 1cqh) var(--ctc-shadow-blur, 1.6cqw)
+                color-mix(
+                  in srgb,
+                  var(--bg, #0b1120) var(--ctc-shadow-strength, 65%),
+                  var(--transparent, transparent)
+                )
+            );
+          }
+
+          .ctc-cursor-shape {
+            fill: var(--ctc-primary, var(--fg, #f8fafc));
+            stroke: var(--fg, #f8fafc);
+            stroke-width: var(--ctc-cursor-stroke, 1.8);
+            stroke-linejoin: round;
+          }
+
+          .ctc-cursor-pulse {
+            position: absolute;
+            left: var(--ctc-pulse-left, -5cqw);
+            top: var(--ctc-pulse-top, -5cqh);
+            width: var(--ctc-pulse-size, 11cqw);
+            aspect-ratio: var(--ctc-pulse-ratio, 1);
+            border: var(--ctc-pulse-border, 0.25cqw) solid
+              color-mix(
+                in srgb,
+                var(--ctc-secondary, var(--fg, #f8fafc)) var(--ctc-pulse-strength, 58%),
+                var(--transparent, transparent)
+              );
+            border-radius: var(--ctc-round, 50%);
+          }
+
+          .ctc-card {
+            width: var(--ctc-card-width, 42cqw);
+            min-height: var(--ctc-card-height, 34cqh);
+            padding: var(--ctc-card-padding-y, var(--space-3, 4.5cqh))
+              var(--ctc-card-padding-x, var(--space-3, 4cqw));
+            border: var(--ctc-border-width, 0.22cqw) solid var(--border, #334155);
+            border-radius: var(--radius, 2cqw);
+            background: var(--surface, #1e293b);
+            box-shadow: var(--ctc-shadow-x, 0cqw) var(--ctc-card-shadow-y, 2.4cqh)
+              var(--ctc-card-shadow-blur, 5cqw)
+              color-mix(
+                in srgb,
+                var(--bg, #0b1120) var(--ctc-card-shadow-strength, 55%),
+                var(--transparent, transparent)
+              );
+          }
+
+          .ctc-card-chip {
+            width: var(--ctc-chip-width, 9cqw);
+            height: var(--ctc-chip-height, 2.2cqh);
+            border-radius: var(--ctc-pill-radius, 99cqw);
+            background: var(--ctc-primary, var(--fg, #f8fafc));
+            margin-bottom: var(--ctc-card-gap, var(--space-3, 3.2cqh));
+          }
+
+          .ctc-card-line,
+          .ctc-scene-line {
+            height: var(--ctc-line-height, 1.8cqh);
+            border-radius: var(--ctc-pill-radius, 99cqw);
+            background: var(--fg, #f8fafc);
+          }
+
+          .ctc-card-line + .ctc-card-line {
+            margin-top: var(--ctc-line-gap, var(--space-2, 2.2cqh));
+          }
+
+          .ctc-card-line:first-of-type {
+            width: var(--ctc-line-long, 88%);
+          }
+
+          .ctc-card-line:last-of-type {
+            width: var(--ctc-line-short, 58%);
+            opacity: var(--ctc-muted-opacity, 0.42);
+          }
+
+          .ctc-scene {
+            width: var(--ctc-scene-width, 68cqw);
+            height: var(--ctc-scene-height, 58cqh);
+            overflow: hidden;
+            border: var(--ctc-border-width, 0.22cqw) solid var(--border, #334155);
+            border-radius: var(--radius, 2cqw);
+            background: var(--surface, #1e293b);
+            box-shadow: var(--ctc-shadow-x, 0cqw) var(--ctc-card-shadow-y, 2.4cqh)
+              var(--ctc-card-shadow-blur, 5cqw)
+              color-mix(
+                in srgb,
+                var(--bg, #0b1120) var(--ctc-card-shadow-strength, 55%),
+                var(--transparent, transparent)
+              );
+          }
+
+          .ctc-scene-bar {
+            display: flex;
+            align-items: center;
+            gap: var(--ctc-dot-gap, var(--space-1, 1cqw));
+            height: var(--ctc-scene-bar-height, 8cqh);
+            padding-inline: var(--ctc-scene-pad, var(--space-2, 2cqw));
+            border-bottom: var(--ctc-border-width, 0.22cqw) solid var(--border, #334155);
+          }
+
+          .ctc-scene-dot {
+            width: var(--ctc-dot-size, 1.4cqw);
+            aspect-ratio: var(--ctc-pulse-ratio, 1);
+            border-radius: var(--ctc-round, 50%);
+            background: var(--ctc-primary, var(--fg, #f8fafc));
+          }
+
+          .ctc-scene-body {
+            display: grid;
+            grid-template-columns: var(--ctc-scene-columns, 1fr 2fr);
+            gap: var(--ctc-scene-gap, var(--space-3, 3cqw));
+            padding: var(--ctc-scene-body-pad, var(--space-3, 5cqh))
+              var(--ctc-scene-pad, var(--space-3, 3cqw));
+          }
+
+          .ctc-scene-panel {
+            min-height: var(--ctc-panel-height, 34cqh);
+            border-radius: var(--ctc-panel-radius, var(--radius, 1.2cqw));
+            background: color-mix(
+              in srgb,
+              var(--ctc-primary, var(--fg, #f8fafc)) var(--ctc-panel-strength, 24%),
+              var(--surface, #1e293b)
+            );
+          }
+
+          .ctc-scene-copy {
+            padding-top: var(--ctc-copy-top, var(--space-2, 2cqh));
+          }
+
+          .ctc-scene-line + .ctc-scene-line {
+            margin-top: var(--ctc-scene-line-gap, var(--space-3, 3cqh));
+          }
+
+          .ctc-scene-line:nth-child(1) {
+            width: var(--ctc-scene-line-one, 92%);
+          }
+
+          .ctc-scene-line:nth-child(2) {
+            width: var(--ctc-scene-line-two, 68%);
+            opacity: var(--ctc-muted-opacity, 0.42);
+          }
+
+          .ctc-scene-line:nth-child(3) {
+            width: var(--ctc-scene-line-three, 78%);
+            background: var(--ctc-secondary, var(--fg, #f8fafc));
+          }
+        </style>
+
+        <div
+          id="cut-the-curve-clip"
+          class="ctc-clip clip"
+          data-start="0"
+          data-duration="1"
+          data-track-index="0"
+        >
+          <div class="ctc-backdrop"></div>
+
+          <div class="ctc-subject is-outgoing" aria-hidden="true">
+            <div class="ctc-art ctc-cursor">
+              <span class="ctc-cursor-pulse"></span>
+              <svg viewBox="0 0 64 88" aria-hidden="true">
+                <path
+                  class="ctc-cursor-shape"
+                  d="M8 5 L54 43 L34 47 L45 75 L30 82 L19 53 L8 68 Z"
+                />
+              </svg>
+            </div>
+            <div class="ctc-art ctc-card">
+              <div class="ctc-card-chip"></div>
+              <div class="ctc-card-line"></div>
+              <div class="ctc-card-line"></div>
+            </div>
+            <div class="ctc-art ctc-scene">
+              <div class="ctc-scene-bar">
+                <span class="ctc-scene-dot"></span><span class="ctc-scene-dot"></span
+                ><span class="ctc-scene-dot"></span>
+              </div>
+              <div class="ctc-scene-body">
+                <div class="ctc-scene-panel"></div>
+                <div class="ctc-scene-copy">
+                  <div class="ctc-scene-line"></div>
+                  <div class="ctc-scene-line"></div>
+                  <div class="ctc-scene-line"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="ctc-subject is-incoming" aria-hidden="true">
+            <div class="ctc-art ctc-cursor">
+              <span class="ctc-cursor-pulse"></span>
+              <svg viewBox="0 0 64 88" aria-hidden="true">
+                <path
+                  class="ctc-cursor-shape"
+                  d="M8 5 L54 43 L34 47 L45 75 L30 82 L19 53 L8 68 Z"
+                />
+              </svg>
+            </div>
+            <div class="ctc-art ctc-card">
+              <div class="ctc-card-chip"></div>
+              <div class="ctc-card-line"></div>
+              <div class="ctc-card-line"></div>
+            </div>
+            <div class="ctc-art ctc-scene">
+              <div class="ctc-scene-bar">
+                <span class="ctc-scene-dot"></span><span class="ctc-scene-dot"></span
+                ><span class="ctc-scene-dot"></span>
+              </div>
+              <div class="ctc-scene-body">
+                <div class="ctc-scene-panel"></div>
+                <div class="ctc-scene-copy">
+                  <div class="ctc-scene-line"></div>
+                  <div class="ctc-scene-line"></div>
+                  <div class="ctc-scene-line"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var outgoing = root.querySelector(".is-outgoing");
+            var incoming = root.querySelector(".is-incoming");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var subject =
+              vars.subject === "card" || vars.subject === "scene" ? vars.subject : "cursor";
+            var direction =
+              vars.direction === "right" || vars.direction === "up" || vars.direction === "down"
+                ? vars.direction
+                : "left";
+            var rawCut = Number(vars.cutFraction);
+            var cutFraction = Number.isFinite(rawCut) ? Math.max(0, Math.min(1, rawCut)) : 0.33;
+            var rawBlur = Number(vars.blurPx);
+            var blurPx = Number.isFinite(rawBlur) ? Math.max(0, rawBlur) : 12;
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            root.dataset.subject = subject;
+
+            // Direction is the single owner of axis, sign, unit, and base travel.
+            var vectors = {
+              left: { axis: "x", sign: -1, unit: "cqw", distance: 34 },
+              right: { axis: "x", sign: 1, unit: "cqw", distance: 34 },
+              up: { axis: "y", sign: -1, unit: "cqh", distance: 26 },
+              down: { axis: "y", sign: 1, unit: "cqh", distance: 26 },
+            };
+            var vector = vectors[direction];
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "1"));
+            // Exit none keeps the whole duration for the cut profile. An
+            // enabled exit reserves a short tail after the incoming lands.
+            var EXIT = exit === "none" ? 0 : Math.min(0.35, duration * 0.25);
+            var TRAVEL = Math.max(0.001, duration - EXIT);
+            var CUT_AT = TRAVEL * cutFraction;
+            var ENTRY_DURATION = TRAVEL - CUT_AT;
+            var entryDistance =
+              CUT_AT > 0 ? vector.distance * (ENTRY_DURATION / CUT_AT) : vector.distance * 2;
+            var seamBlur = "blur(" + blurPx + "px)";
+            var clearBlur = "blur(0px)";
+            var seamOpacity = 0.72;
+
+            var outgoingEnd = { opacity: seamOpacity, filter: seamBlur };
+            outgoingEnd[vector.axis] = vector.sign * vector.distance + vector.unit;
+
+            var incomingStart = { x: 0, y: 0, opacity: 0, filter: seamBlur };
+            incomingStart[vector.axis] = -vector.sign * entryDistance + vector.unit;
+
+            var incomingEnd = { opacity: 1, filter: clearBlur };
+            incomingEnd[vector.axis] = 0;
+
+            gsap.set(outgoing, { x: 0, y: 0, opacity: 1, filter: clearBlur });
+            gsap.set(incoming, incomingStart);
+
+            var tl = gsap.timeline({ paused: true });
+
+            if (CUT_AT > 0) {
+              tl.to(
+                outgoing,
+                Object.assign({}, outgoingEnd, { duration: CUT_AT, ease: "power4.in" }),
+                0,
+              );
+            }
+
+            // CUT: one visibility owner, matched blur and opacity on both sides.
+            tl.set(outgoing, { opacity: 0 }, CUT_AT);
+            tl.set(incoming, { opacity: seamOpacity }, CUT_AT);
+            tl.call(
+              function () {
+                root.dispatchEvent(
+                  new CustomEvent("hf:sfx", {
+                    detail: { id: "whip-cut", t: CUT_AT },
+                    bubbles: true,
+                  }),
+                );
+              },
+              [],
+              CUT_AT,
+            );
+
+            if (ENTRY_DURATION > 0) {
+              tl.to(
+                incoming,
+                Object.assign({}, incomingEnd, {
+                  duration: ENTRY_DURATION,
+                  ease: "power4.out",
+                }),
+                CUT_AT,
+              );
+            } else {
+              tl.set(incoming, incomingEnd, CUT_AT);
+            }
+
+            // Optional departure; exit none rests until the frame cuts.
+            if (exit === "fade") {
+              tl.to(incoming, { opacity: 0, duration: EXIT, ease: "power2.in" }, TRAVEL);
+            } else if (exit === "up") {
+              tl.to(
+                incoming,
+                { opacity: 0, y: "-6cqh", duration: EXIT, ease: "power2.in" },
+                TRAVEL,
+              );
+            }
+
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines["cut-the-curve"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/cut-the-curve/demo.html b/registry/components/cut-the-curve/demo.html
new file mode 100644
index 0000000000..80143bad7f
--- /dev/null
+++ b/registry/components/cut-the-curve/demo.html
@@ -0,0 +1,100 @@
+<!doctype html>
+<!--
+  cut-the-curve -- demo. Standalone 1920x1080 token-themed stage that mounts
+  cut-the-curve.html through data-composition-src. The 70% mount card makes
+  the outgoing throw, hard cut, and incoming settle easy to screen while
+  proving that the primitive fills a host-owned box without root dimensions.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Cut the Curve - Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #05070d);
+      }
+
+      #root {
+        --bg: #080b14;
+        --fg: #f8fafc;
+        --muted: #94a3b8;
+        --surface: #182033;
+        --border: #3b4863;
+        --brand: #e4e4e7;
+        --accent: #e4e4e7;
+        --transparent: transparent;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-body: Inter, system-ui, sans-serif;
+        --radius: 26px;
+        --space-1: 8px;
+        --space-2: 16px;
+        --space-3: 32px;
+        --dur-beat: 0.4s;
+        --ease-standard: cubic-bezier(0.215, 0.61, 0.355, 1);
+        --ease-whip: cubic-bezier(0.23, 1, 0.32, 1);
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(
+          ellipse at 50% 42%,
+          var(--bg, #151c32) 0%,
+          var(--bg, #05070d) 72%
+        );
+      }
+
+      .mount-card {
+        width: 70%;
+        height: 70%;
+        left: 15%;
+        top: 15%;
+        overflow: hidden;
+        border: 1px solid color-mix(in srgb, var(--border, #94a3b8) 25%, transparent);
+        border-radius: 30px;
+        box-shadow: 0 40px 90px color-mix(in srgb, var(--bg, #000000) 45%, transparent);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="cut-the-curve-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="1"
+      data-fps="30"
+    >
+      <div
+        id="cut-the-curve-mount"
+        class="mount-card clip"
+        data-composition-id="cut-the-curve"
+        data-composition-src="./cut-the-curve.html"
+        data-variable-values='{"subject":"card","direction":"left","cutFraction":0.33,"blurPx":12}'
+        data-start="0"
+        data-duration="1"
+        data-track-index="0"
+        data-width="1344"
+        data-height="756"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["cut-the-curve-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/cut-the-curve/registry-item.json b/registry/components/cut-the-curve/registry-item.json
new file mode 100644
index 0000000000..310e416f67
--- /dev/null
+++ b/registry/components/cut-the-curve/registry-item.json
@@ -0,0 +1,85 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "cut-the-curve",
+  "type": "hyperframes:component",
+  "title": "Cut the Curve",
+  "description": "A velocity-matched directional hard cut: the outgoing subject accelerates with power4.in, swaps at peak velocity, and the incoming subject continues in the same direction with power4.out.",
+  "tags": ["transition", "directional-cut", "velocity-match", "whip", "bridge", "demonstrate"],
+  "jobs": ["bridge", "demonstrate"],
+  "family": "transitions",
+  "profile": "transition",
+  "evidence": "launches-cut-the-curve.md; production motion census establishes the power4.in to power4.out whip, matched direction, seam blur, and canonical 1:2 split",
+  "syncPoints": [{ "id": "cut", "phase": "out", "offset": 0.33 }],
+  "files": [
+    {
+      "path": "cut-the-curve.html",
+      "target": "compositions/components/cut-the-curve.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "subject",
+      "type": "enum",
+      "role": "content",
+      "label": "Subject",
+      "description": "Visual payload used on both sides of the cut.",
+      "default": "cursor",
+      "options": [
+        { "value": "cursor", "label": "Cursor" },
+        { "value": "card", "label": "Card" },
+        { "value": "scene", "label": "Scene" }
+      ]
+    },
+    {
+      "id": "direction",
+      "type": "enum",
+      "role": "motion",
+      "label": "Direction",
+      "description": "Shared screen direction for outgoing and incoming travel.",
+      "default": "left",
+      "options": [
+        { "value": "left", "label": "Left" },
+        { "value": "right", "label": "Right" },
+        { "value": "up", "label": "Up" },
+        { "value": "down", "label": "Down" }
+      ]
+    },
+    {
+      "id": "cutFraction",
+      "type": "number",
+      "role": "timing",
+      "label": "Cut fraction",
+      "description": "Normalized point where the hard cut swaps subjects.",
+      "default": 0.33,
+      "min": 0,
+      "max": 1,
+      "step": 0.01
+    },
+    {
+      "id": "blurPx",
+      "type": "number",
+      "role": "style",
+      "label": "Cut blur",
+      "description": "Blur in pixels shared by both subjects at the cut seam.",
+      "default": 12,
+      "min": 0,
+      "max": 40,
+      "step": 1,
+      "unit": "px"
+    },
+    {
+      "id": "exit",
+      "type": "enum",
+      "role": "timing",
+      "label": "Exit",
+      "description": "Optional departure of the incoming subject. Default none: it rests until the frame cuts.",
+      "default": "none",
+      "options": [
+        { "value": "none", "label": "None" },
+        { "value": "fade", "label": "Fade" },
+        { "value": "up", "label": "Up" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/decline-chart/decline-chart.html b/registry/components/decline-chart/decline-chart.html
new file mode 100644
index 0000000000..11dd62a58e
--- /dev/null
+++ b/registry/components/decline-chart/decline-chart.html
@@ -0,0 +1,276 @@
+<!doctype html>
+<!--
+  decline-chart: HyperFrames video primitive
+
+  One metric line draws downward while its numeric value counts down and the
+  ambient background dims and desaturates from the same progress value.
+
+  Envelope:
+    IN_BASE  = 0.55s  chart frame settles into view
+    HOLD     = elastic decline draw, countdown, and ambient darkening
+    OUT_BASE = 0.45s  bottomed-out endpoint locks in with no recovery
+    If D is shorter than IN_BASE + OUT_BASE, IN and OUT compress together
+    and HOLD collapses to zero. Longer mounts stretch HOLD only.
+
+  Variables:
+    label       (string, default "Retention")
+    start_value (number, default 82)
+    end_value   (number, default 34)
+-->
+<html
+  lang="en"
+  data-composition-id="decline-chart"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "label", "type": "string", "role": "content", "label": "Metric label", "description": "Label shown above the declining value.", "default": "Retention" },
+    { "id": "start_value", "type": "number", "role": "content", "label": "Start value", "description": "Metric value at the start of the decline.", "default": 82, "min": 0, "max": 100, "step": 1 },
+    { "id": "end_value", "type": "number", "role": "content", "label": "End value", "description": "Metric value at the bottom of the decline.", "default": 34, "min": 0, "max": 100, "step": 1 }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Decline Chart</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="decline-chart" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .dc-clip,
+          .dc-ambient,
+          .dc-gloom {
+            position: absolute;
+            inset: 0;
+          }
+
+          .dc-clip {
+            overflow: hidden;
+          }
+
+          .dc-ambient {
+            background:
+              radial-gradient(circle at 24% 16%, rgba(47, 129, 150, 0.55), transparent 46%),
+              linear-gradient(145deg, #152f3c 0%, #101a25 48%, #0c1118 100%);
+            transform: scale(1.02);
+            transform-origin: center;
+            will-change: filter;
+          }
+
+          .dc-gloom {
+            background: #030507;
+            opacity: 0;
+          }
+
+          .dc-layout {
+            position: absolute;
+            inset: 9cqh 9cqw 8cqh;
+            display: grid;
+            /* minmax(0, 1fr): a bare 1fr row inflates to the svg's intrinsic
+               aspect height (min-height auto), overflowing the card. */
+            grid-template-rows: auto minmax(0, 1fr);
+            gap: 5cqh;
+            opacity: 0;
+          }
+
+          .dc-header {
+            display: flex;
+            align-items: end;
+            justify-content: space-between;
+            gap: 5cqw;
+          }
+
+          .dc-label {
+            max-width: 58cqw;
+            overflow: hidden;
+            color: rgba(226, 232, 240, 0.72);
+            font-size: clamp(12px, 3.6cqh, 38px);
+            font-weight: 620;
+            letter-spacing: 0.05em;
+            line-height: 1.1;
+            text-overflow: ellipsis;
+            text-transform: uppercase;
+            white-space: nowrap;
+          }
+
+          .dc-value {
+            flex: 0 0 auto;
+            color: #f8fafc;
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: clamp(30px, 12cqh, 118px);
+            font-variant-numeric: tabular-nums;
+            font-weight: 760;
+            letter-spacing: -0.07em;
+            line-height: 0.8;
+          }
+
+          .dc-chart {
+            width: 100%;
+            height: 100%;
+            overflow: visible;
+          }
+
+          .dc-grid {
+            stroke: rgba(148, 163, 184, 0.18);
+            stroke-width: 1;
+            vector-effect: non-scaling-stroke;
+          }
+
+          .dc-line {
+            fill: none;
+            stroke: #fb7185;
+            stroke-linecap: round;
+            stroke-linejoin: round;
+            /* No non-scaling-stroke here: with preserveAspectRatio=none Chromium
+               applies the dash pattern in screen space, so the user-space
+               dasharray from getTotalLength() splits the draw into two visible
+               segments. Scaled stroke keeps dashes in user space. */
+            stroke-width: 4;
+          }
+
+          .dc-endpoint {
+            fill: #fecdd3;
+            opacity: 0;
+            transform-box: fill-box;
+            transform-origin: center;
+          }
+        </style>
+
+        <div
+          id="decline-chart-clip"
+          class="dc-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="dc-ambient"></div>
+          <div class="dc-gloom"></div>
+          <div class="dc-layout">
+            <div class="dc-header">
+              <div class="dc-label"></div>
+              <div class="dc-value"></div>
+            </div>
+            <svg
+              class="dc-chart"
+              viewBox="0 0 260 240"
+              preserveAspectRatio="none"
+              aria-hidden="true"
+            >
+              <line class="dc-grid" x1="8" y1="55" x2="252" y2="55"></line>
+              <line class="dc-grid" x1="8" y1="120" x2="252" y2="120"></line>
+              <line class="dc-grid" x1="8" y1="185" x2="252" y2="185"></line>
+              <path
+                class="dc-line"
+                d="M 8 24 C 28 28, 44 43, 61 56 S 93 76, 112 92 S 144 111, 163 134 S 193 159, 213 186 S 239 211, 252 222"
+              ></path>
+              <circle class="dc-endpoint" cx="252" cy="222" r="6"></circle>
+            </svg>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var layout = root.querySelector(".dc-layout");
+            var ambient = root.querySelector(".dc-ambient");
+            var gloom = root.querySelector(".dc-gloom");
+            var label = root.querySelector(".dc-label");
+            var value = root.querySelector(".dc-value");
+            var line = root.querySelector(".dc-line");
+            var endpoint = root.querySelector(".dc-endpoint");
+            var lineLength = line.getTotalLength();
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            line.style.strokeDasharray = lineLength + " " + lineLength;
+
+            var startValue = Number.isFinite(vars.start_value) ? vars.start_value : 82;
+            var endValue = Number.isFinite(vars.end_value) ? vars.end_value : 34;
+            var labelText = vars.label == null ? "Retention" : String(vars.label);
+
+            label.textContent = labelText;
+
+            var IN_BASE = 0.55;
+            var OUT_BASE = 0.45;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var fixedTotal = IN_BASE + OUT_BASE;
+            var phaseScale = duration < fixedTotal ? duration / fixedTotal : 1;
+            var IN = IN_BASE * phaseScale;
+            var OUT = OUT_BASE * phaseScale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var OUT_START = IN + HOLD;
+            var progress = { value: 0 };
+
+            function renderProgress() {
+              var p = progress.value;
+              line.style.strokeDashoffset = String(lineLength * (1 - p));
+              ambient.style.filter =
+                "saturate(" + (1 - p * 0.72) + ") brightness(" + (1 - p * 0.52) + ")";
+              gloom.style.opacity = String(p * 0.46);
+              endpoint.style.opacity = String(Math.max(0, (p - 0.94) / 0.06));
+              value.textContent = String(Math.round(startValue + (endValue - startValue) * p));
+            }
+
+            renderProgress();
+
+            var tl = gsap.timeline({ paused: true });
+            tl.fromTo(
+              layout,
+              { opacity: 0, y: "2.5cqh" },
+              { opacity: 1, y: 0, duration: IN, ease: "power2.out" },
+              0,
+            );
+
+            if (HOLD > 0) {
+              tl.to(
+                progress,
+                { value: 1, duration: HOLD, ease: "power2.out", onUpdate: renderProgress },
+                IN,
+              );
+            } else {
+              tl.call(
+                function () {
+                  progress.value = 1;
+                  renderProgress();
+                },
+                [],
+                IN,
+              );
+            }
+
+            tl.fromTo(
+              endpoint,
+              { scale: 0.72 },
+              { scale: 1, duration: OUT, ease: "power2.out" },
+              OUT_START,
+            );
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["decline-chart"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/decline-chart/demo.html b/registry/components/decline-chart/demo.html
new file mode 100644
index 0000000000..3e6da00866
--- /dev/null
+++ b/registry/components/decline-chart/demo.html
@@ -0,0 +1,80 @@
+<!doctype html>
+<!--
+  decline-chart demo. This standalone composition mounts the primitive with
+  non-default copy and values inside a dark neutral stage.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Decline Chart Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0b0c0e;
+      }
+
+      #root {
+        --fg: #f8fafc;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-body: Inter, system-ui, sans-serif;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(circle at 50% 42%, #171a1f 0%, #0b0c0e 70%);
+      }
+
+      .mount-card {
+        width: 68%;
+        height: 70%;
+        left: 16%;
+        top: 15%;
+        container-type: size;
+        overflow: hidden;
+        border: 1px solid rgba(148, 163, 184, 0.18);
+        border-radius: 32px;
+        box-shadow: 0 44px 100px rgba(0, 0, 0, 0.5);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="decline-chart-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="decline-chart-mount"
+        class="mount-card clip"
+        data-composition-id="decline-chart"
+        data-composition-src="./decline-chart.html"
+        data-variable-values='{"label":"Weekly retention","start_value":91,"end_value":26}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="1306"
+        data-height="756"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["decline-chart-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/decline-chart/registry-item.json b/registry/components/decline-chart/registry-item.json
new file mode 100644
index 0000000000..a9321a3d56
--- /dev/null
+++ b/registry/components/decline-chart/registry-item.json
@@ -0,0 +1,51 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "decline-chart",
+  "type": "hyperframes:component",
+  "title": "Decline Chart",
+  "description": "A metric line draws downward as its value counts down and the ambient background darkens in lockstep.",
+  "tags": ["motion-primitive", "data", "chart", "decline", "metric", "problem"],
+  "jobs": ["agitate"],
+  "family": "data",
+  "profile": "holdable",
+  "evidence": "Wave F U10 decline-chart",
+  "files": [
+    {
+      "path": "decline-chart.html",
+      "target": "compositions/components/decline-chart.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "label",
+      "type": "string",
+      "role": "content",
+      "label": "Metric label",
+      "description": "Label shown above the declining value.",
+      "default": "Retention"
+    },
+    {
+      "id": "start_value",
+      "type": "number",
+      "role": "content",
+      "label": "Start value",
+      "description": "Metric value at the start of the decline.",
+      "default": 82,
+      "min": 0,
+      "max": 100,
+      "step": 1
+    },
+    {
+      "id": "end_value",
+      "type": "number",
+      "role": "content",
+      "label": "End value",
+      "description": "Metric value at the bottom of the decline.",
+      "default": 34,
+      "min": 0,
+      "max": 100,
+      "step": 1
+    }
+  ]
+}
diff --git a/registry/components/device-frame-stage/demo.html b/registry/components/device-frame-stage/demo.html
new file mode 100644
index 0000000000..ab996cd7ba
--- /dev/null
+++ b/registry/components/device-frame-stage/demo.html
@@ -0,0 +1,118 @@
+<!doctype html>
+<html lang="en" data-composition-id="device-frame-stage-demo" data-composition-duration="5">
+  <!--
+    Device Frame Stage - Demo. Mounts the primitive via a clip with
+    data-composition-src instead of inlining its markup, proving the
+    sub-composition mount contract (template + #root + host-driven sizing;
+    see skills/hyperframes-core/references/sub-compositions.md).
+
+    The mount clip is deliberately sized to a 960x540 slot inside this
+    1920x1080 stage (not full-bleed): the primitive must size the device off
+    that HOST box, not off an assumed 1920x1080 stage, or it renders 2x too
+    large and bleeds past the slot's border.
+
+    Non-default variables (tablet / island / silver) exercise all three
+    variables away from the primitive's defaults (phone / none / graphite);
+    see device-frame-stage.html for the full header (concept, envelope, sync
+    points, sound cues).
+  -->
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Device Frame Stage - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+
+      #root {
+        /* 17-token dark theme contract, matching the other test-scene hosts. */
+        --bg: #06080b;
+        --fg: #f4f6f8;
+        --muted: #8b95a4;
+        --surface: #12161d;
+        --border: rgba(244, 246, 248, 0.16);
+        --brand: #ff7a33;
+        --accent: #22d3ee;
+        --font-display:
+          -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
+        --font-body:
+          -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        --radius: 16px;
+        --space-1: 8px;
+        --space-2: 16px;
+        --space-3: 32px;
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg);
+        color: var(--fg);
+        font-family: var(--font-body);
+      }
+
+      .demo-backdrop {
+        position: absolute;
+        inset: 0;
+        background: radial-gradient(120% 120% at 50% 18%, #222b40 0%, #05070d 65%);
+      }
+
+      /* The mount slot: 960x540, centered. Border makes any overflow past
+         this box immediately visible in a snapshot. */
+      .demo-slot {
+        position: absolute;
+        left: 480px;
+        top: 270px;
+        width: 960px;
+        height: 540px;
+        border: 1px dashed var(--border);
+        border-radius: var(--radius);
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="device-frame-stage-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-backdrop"></div>
+
+      <div
+        id="device-frame-stage-mount"
+        class="clip demo-slot"
+        data-composition-id="device-frame-stage"
+        data-composition-src="./device-frame-stage.html"
+        data-variable-values='{"device":"tablet","cutout":"island","body":"silver"}'
+        data-start="0"
+        data-duration="5"
+        data-track-index="0"
+        data-width="960"
+        data-height="540"
+      ></div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+      window.__timelines["device-frame-stage-demo"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/registry/components/device-frame-stage/device-frame-stage.html b/registry/components/device-frame-stage/device-frame-stage.html
new file mode 100644
index 0000000000..a81cf78aad
--- /dev/null
+++ b/registry/components/device-frame-stage/device-frame-stage.html
@@ -0,0 +1,466 @@
+<!doctype html>
+<html
+  lang="en"
+  data-composition-id="device-frame-stage"
+  data-composition-duration="5"
+  data-composition-variables='[
+    { "id": "device", "type": "enum", "role": "layout", "label": "Device kind", "default": "phone", "options": [{ "value": "phone", "label": "Phone" }, { "value": "tablet", "label": "Tablet" }] },
+    { "id": "cutout", "type": "enum", "role": "layout", "label": "Camera cutout", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "island", "label": "Island" }, { "value": "notch", "label": "Notch" }] },
+    { "id": "body", "type": "enum", "role": "style", "label": "Body material", "default": "graphite", "options": [{ "value": "graphite", "label": "Graphite" }, { "value": "silver", "label": "Silver" }] }
+  ]'
+>
+  <!--
+    Device Frame Stage, a HyperFrames video primitive.
+
+    Concept: a phone or tablet mockup treated as a physical scene prop, not a
+    screenshot border. It stages arbitrary reconstructed UI in a screen slot,
+    rises onto the stage as one rigid prop, settles, idles, and holds. The
+    frame serves the screen (device-frame-spec's governing law): no spinning
+    hardware reveal, glare sweep, or camera-lens tour, ever.
+
+    This file is a mountable HyperFrames sub-composition (see
+    skills/hyperframes-core/references/sub-compositions.md): a host
+    composition embeds it via a clip carrying data-composition-src, a
+    matching data-composition-id, and its own data-start / data-duration /
+    data-track-index / data-width / data-height. Everything the render needs
+    lives inside <template> below; the #root div's own data-width /
+    data-height are declarative reference metadata only (the linter's
+    root-dimensions contract) -- the CSS never reads them, and the device
+    sizes relative to whatever host box it actually lands in (cqh/cqw), so
+    it never needs to be opened or rendered standalone. See demo.html for
+    the reference mount.
+
+    Compiled from: fixture + mobile mechanics inventory #1 + device-frame-spec.md
+    (~/dev/hyperframes-corpus-data/mobile/device-frame-spec.md), the
+    authoritative geometry / material / entry-law source for this primitive.
+
+    Use when: a scene needs to stage mobile or tablet UI as a physical
+    product (hero product demo, gesture-led interaction, screen swap) rather
+    than a bare floating screenshot.
+
+    Variables (data-composition-variables above):
+      device  enum phone|tablet          default "phone"     canonical outer ratio + logical viewport
+      cutout  enum none|island|notch     default "none"      camera cutout; must match the installed screen content's safe area
+      body    enum graphite|silver       default "graphite"  device material tone
+
+    Envelope (IN / HOLD / OUT, elasticity lives in HOLD only, never gsap.timeScale):
+      IN   1.08s fixed  rise-and-settle: 0.18s pre-roll, 0.72s power3.out rise past rest, 0.18s power2.inOut settle
+      HOLD elastic      idle float loop (period 3.2s, +/-0.6cqh), stretches or compresses to fill whatever duration remains
+      OUT  0.56s fixed  sink, power2.in
+
+    Sync points (fixed offsets into IN/OUT, never inside the elastic HOLD):
+      device-settled   t = IN (end of the settle segment) — screen content may start animating here
+
+    Sound cues: one SFX hook, "device-settle-soft", fired as an `hf:sfx`
+    CustomEvent at the device-settled sync point (t = IN). The primitive
+    never plays audio itself; the host scene mixes the cue.
+  -->
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Device Frame Stage</title>
+    <!-- head is metadata for the source file only; the runtime only clones
+         <template> contents on mount (see sub-compositions.md), so the gsap
+         loader here exists purely for opening this file directly during
+         authoring -- a host composition already provides window.gsap. -->
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  </head>
+  <body>
+    <template>
+      <style>
+        *,
+        *::before,
+        *::after {
+          box-sizing: border-box;
+        }
+
+        /* INVARIANT: root is styled by #root, never a class -- the compiler
+           scopes CSS to [data-composition-id="device-frame-stage"] as a
+           descendant selector, so a rule keyed on the root's own class would
+           never match the root itself (see sub-compositions.md, Pitfall 3).
+           This primitive is elastic and fills whatever box a host clip
+           gives it, from a 960x540 slot up to a full 1920x1080 frame.
+
+           The width/height !important below is load-bearing, not decoration:
+           when this root gets inlined into a host, the compiler's
+           flatten step (prepareFlattenedInnerRoot) reads this element's own
+           data-width/data-height (required by the root_missing_dimensions
+           lint rule) and force-writes them back as an inline
+           style="width:1920px;height:1080px". Inline style beats a plain
+           stylesheet rule, so without !important the root would render at a
+           fixed 1920x1080 instead of filling the host box -- exactly the
+           2x-oversized-and-bleeding bug this primitive was fixed for. */
+        #root {
+          position: absolute;
+          inset: 0;
+          width: 100% !important;
+          height: 100% !important;
+          container-type: size;
+          isolation: isolate;
+        }
+
+        .device-stage {
+          --stage-perspective: 1600px;
+          position: absolute;
+          inset: 0;
+          perspective: var(--stage-perspective);
+          perspective-origin: 50% 50%;
+        }
+
+        .device-frame {
+          /* INVARIANT: geometry below is physical-material law from
+             device-frame-spec.md (corner/bezel/aspect percentages, gradient,
+             shadow), not brand paint. It may carry literal fallbacks per the
+             primitive's material exception; do not swap in --radius/--space-*. */
+          --device-color: #1b1d22;
+          --device-color-hi: #343740;
+          --device-color-dark: #111318;
+          --device-radius: 46px;
+          --device-bezel: 9px;
+          --screen-radius: calc(var(--device-radius) - var(--device-bezel));
+          --device-aspect: 9 / 19.5;
+          --device-y: 18cqh;
+          --device-scale: 0.94;
+
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          height: 90cqh;
+          aspect-ratio: var(--device-aspect);
+          border-radius: var(--device-radius);
+          padding: var(--device-bezel);
+          background: linear-gradient(
+            145deg,
+            var(--device-color-hi),
+            var(--device-color) 42%,
+            var(--device-color-dark)
+          );
+          border: 1px solid rgba(255, 255, 255, 0.22);
+          box-shadow:
+            0 52px 110px rgba(7, 10, 20, 0.3),
+            0 18px 38px rgba(7, 10, 20, 0.22),
+            0 3px 9px rgba(7, 10, 20, 0.16),
+            inset 0 1px 0 rgba(255, 255, 255, 0.24),
+            inset 0 0 0 1px rgba(0, 0, 0, 0.48);
+          transform: translate(-50%, calc(-50% + var(--device-y))) scale(var(--device-scale));
+          transform-style: preserve-3d;
+          transform-origin: 50% 88%;
+          will-change: transform;
+        }
+
+        /* EDIT ZONE: kind/cutout/body are driven by data-composition-variables
+           (see JS below); an installing agent may also override
+           --device-color / --device-color-hi / --device-color-dark inline for
+           a bespoke finish without touching the geometry laws. */
+        .device-frame[data-kind="tablet"] {
+          --device-radius: 48px;
+          --device-bezel: 16px;
+          --screen-radius: 34px;
+          --device-aspect: 3 / 4;
+          height: 82cqh;
+        }
+
+        .device-frame[data-body="silver"] {
+          --device-color: #c9cdd3;
+          --device-color-hi: #eef1f4;
+          --device-color-dark: #9a9ea6;
+        }
+
+        .device-screen {
+          position: relative;
+          width: 100%;
+          height: 100%;
+          overflow: hidden;
+          border-radius: var(--screen-radius);
+          background: var(--surface, #f5f6f8);
+          box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.42);
+          isolation: isolate;
+          container-type: size;
+        }
+
+        .screen-viewport {
+          /* Logical-pixel authoring space (390x844 phone / 768x1024 tablet),
+             uniformly scaled to the actual screen box by JS-measured
+             --screen-scale (device-frame-spec, "Screen content contract"). The
+             scale is scene setup, not animation. */
+          position: absolute;
+          left: 0;
+          top: 0;
+          width: calc(var(--logical-width, 390) * 1px);
+          height: calc(var(--logical-height, 844) * 1px);
+          transform-origin: 0 0;
+          transform: scale(var(--screen-scale, 1));
+        }
+
+        .screen-safe-area {
+          height: 100%;
+          box-sizing: border-box;
+          padding-top: calc(var(--logical-height, 844) * 1px * 0.03);
+        }
+
+        .device-frame[data-cutout="island"] .screen-safe-area {
+          padding-top: calc(var(--logical-height, 844) * 1px * 0.075);
+        }
+
+        .device-frame[data-cutout="notch"] .screen-safe-area {
+          padding-top: calc(var(--logical-height, 844) * 1px * 0.06);
+        }
+
+        .device-screen-slot {
+          position: relative;
+          width: 100%;
+          height: 100%;
+        }
+
+        /* Visible only while the slot is empty (comments do not count toward
+           :empty); vanishes the moment an installing agent drops real content
+           in, no cleanup required. */
+        .device-screen-slot:empty {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border: 1px dashed var(--border, rgba(15, 23, 42, 0.16));
+          border-radius: calc(var(--screen-radius) * 0.4);
+        }
+
+        .device-screen-slot:empty::before {
+          content: "screen slot: replace with reconstructed UI";
+          padding: var(--space-2, 16px);
+          color: var(--muted, #94a3b8);
+          font-family: var(--font-body, Inter, system-ui, sans-serif);
+          font-size: 15px;
+          text-align: center;
+        }
+
+        .device-cutout {
+          position: absolute;
+          left: 50%;
+          top: 0;
+          z-index: 50;
+          width: 0;
+          height: 0;
+          background: #050607;
+          pointer-events: none;
+          transform: translateX(-50%);
+        }
+
+        .device-frame[data-cutout="island"] .device-cutout {
+          top: 1.4%;
+          width: 28%;
+          height: 3.2%;
+          border-radius: 999px;
+        }
+
+        .device-frame[data-cutout="notch"] .device-cutout {
+          top: 0;
+          width: 52%;
+          height: 3.8%;
+          border-radius: 0 0 18px 18px;
+        }
+      </style>
+
+      <!-- data-width / data-height here satisfy the linter's root-dimensions
+           contract (root_missing_dimensions) and match every other
+           sub-composition's #root -- see sub-compositions.md's own
+           file-shape example. The compiler's flatten step also reads these
+           two attributes and force-writes them back as an inline
+           width/height style on mount, so #root's width/height !important
+           above is required to keep the rendered box elastic (fills the
+           host clip's actual box, from a 960x540 slot up to a full
+           1920x1080 frame) instead of a fixed 1920x1080. -->
+      <div
+        id="root"
+        data-composition-id="device-frame-stage"
+        data-width="1920"
+        data-height="1080"
+        data-duration="5"
+      >
+        <div class="device-stage">
+          <div class="device-frame" data-kind="phone" data-cutout="none" data-body="graphite">
+            <div class="device-screen">
+              <div class="screen-viewport">
+                <div class="screen-safe-area">
+                  <div class="device-screen-slot" data-screen-slot>
+                    <!-- EDIT ZONE: replace with reconstructed product UI, or
+                         nest a <div data-composition-src="..." data-duration="...">
+                         sub-composition host. Author content at the device's
+                         logical viewport (390x844 phone, 768x1024 tablet);
+                         this slot is pre-scaled for you, so keep coordinates
+                         in logical screen pixels, never canvas pixels. -->
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="device-cutout" aria-hidden="true"></div>
+          </div>
+        </div>
+      </div>
+
+      <script>
+        (function () {
+          "use strict";
+
+          var html = document.documentElement;
+          var root = document.getElementById("root");
+          var frame = root.querySelector(".device-frame");
+          var screen = root.querySelector(".device-screen");
+          var viewport = root.querySelector(".screen-viewport");
+
+          var declared = {};
+          try {
+            JSON.parse(html.getAttribute("data-composition-variables") || "[]").forEach(
+              function (variable) {
+                declared[variable.id] = variable.default;
+              },
+            );
+          } catch (error) {}
+          var vars = Object.assign({}, declared, window.__hfVariables || {});
+
+          var device = vars.device === "tablet" ? "tablet" : "phone";
+          var cutout = vars.cutout === "island" || vars.cutout === "notch" ? vars.cutout : "none";
+          var body = vars.body === "silver" ? "silver" : "graphite";
+
+          frame.setAttribute("data-kind", device);
+          frame.setAttribute("data-cutout", cutout);
+          frame.setAttribute("data-body", body);
+
+          var LOGICAL = { phone: [390, 844], tablet: [768, 1024] };
+          var logicalWidth = LOGICAL[device][0];
+          var logicalHeight = LOGICAL[device][1];
+          viewport.style.setProperty("--logical-width", String(logicalWidth));
+          viewport.style.setProperty("--logical-height", String(logicalHeight));
+
+          function updateScreenScale() {
+            var rect = screen.getBoundingClientRect();
+            if (rect.width > 0)
+              viewport.style.setProperty("--screen-scale", String(rect.width / logicalWidth));
+          }
+          updateScreenScale();
+          if (typeof ResizeObserver !== "undefined") {
+            new ResizeObserver(updateScreenScale).observe(screen);
+          }
+
+          // NOTE: the timeline registration key below is a literal string,
+          // not read from root.getAttribute("data-composition-id") -- when
+          // this file is mounted via data-composition-src, the compiler
+          // strips data-composition-id from the inlined root (the HOST
+          // clip keeps its own copy instead), so a live read here would
+          // return null and the host would never find this timeline (see
+          // sub-compositions.md, Pitfall 2). registry/test-scenes/slots/empty.html
+          // models the same literal-key pattern.
+          var compositionId = "device-frame-stage";
+          var duration = Math.max(
+            0.001,
+            parseFloat(
+              root.dataset.duration || html.getAttribute("data-composition-duration") || "5",
+            ),
+          );
+
+          // INVARIANT: IN/OUT durations are fixed by device-frame-spec's entry
+          // and exit law; only HOLD stretches or compresses to fit whatever
+          // duration the host gives this instance. Never gsap.timeScale().
+          var IN_DELAY = 0.18;
+          var IN_RISE = 0.72;
+          var IN_SETTLE = 0.18;
+          var IN_BASE = IN_DELAY + IN_RISE + IN_SETTLE; // 1.08s
+          var OUT_BASE = 0.56;
+          var totalBase = IN_BASE + OUT_BASE;
+          var IN = IN_BASE;
+          var OUT = OUT_BASE;
+          if (duration < totalBase) {
+            var shrink = duration / totalBase;
+            IN = IN_BASE * shrink;
+            OUT = OUT_BASE * shrink;
+          }
+          var HOLD = Math.max(0, duration - (IN + OUT));
+          var OUT_AT = IN + HOLD;
+          // SYNC POINT: device-settled fires at t = IN (fixed offset into IN,
+          // never inside the elastic HOLD).
+
+          function easeOutCubic(x) {
+            return 1 - Math.pow(1 - x, 3);
+          }
+          function easeInOutQuad(x) {
+            return x < 0.5 ? 2 * x * x : 1 - Math.pow(-2 * x + 2, 2) / 2;
+          }
+          function easeInQuad(x) {
+            return x * x;
+          }
+
+          function setPose(yCqh, scaleValue) {
+            frame.style.setProperty("--device-y", yCqh.toFixed(3) + "cqh");
+            frame.style.setProperty("--device-scale", scaleValue.toFixed(4));
+          }
+
+          function renderIn(t) {
+            var delayEnd = IN_DELAY * (IN / IN_BASE);
+            var riseEnd = delayEnd + IN_RISE * (IN / IN_BASE);
+            if (t <= delayEnd) {
+              setPose(18, 0.94);
+              return;
+            }
+            if (t <= riseEnd) {
+              var p = easeOutCubic(
+                Math.min(1, (t - delayEnd) / Math.max(0.0001, riseEnd - delayEnd)),
+              );
+              setPose(18 + (-1.2 - 18) * p, 0.94 + (1.01 - 0.94) * p);
+              return;
+            }
+            var p2 = easeInOutQuad(Math.min(1, (t - riseEnd) / Math.max(0.0001, IN - riseEnd)));
+            setPose(-1.2 + (0 - -1.2) * p2, 1.01 + (1 - 1.01) * p2);
+          }
+
+          // RETIME RANGE: the idle float is the only elastic segment. It
+          // repeats for as long as HOLD lasts, so stretching the host duration
+          // never re-times the fixed IN or OUT phases above.
+          function renderHold(holdT) {
+            var period = 3.2;
+            var amp = 0.6;
+            var phase = ((holdT % period) / period) * Math.PI * 2;
+            setPose(Math.sin(phase) * amp, 1);
+          }
+
+          function renderOut(p) {
+            var e = easeInQuad(Math.min(1, p));
+            setPose(0 + 18 * e, 1 + (0.96 - 1) * e);
+          }
+
+          function render(t) {
+            if (t <= IN) renderIn(t);
+            else if (t < OUT_AT) renderHold(t - IN);
+            else renderOut((t - OUT_AT) / Math.max(0.0001, OUT));
+          }
+
+          function fireSfx(id, atTime) {
+            root.dispatchEvent(
+              new CustomEvent("hf:sfx", { detail: { id: id, t: atTime }, bubbles: true }),
+            );
+          }
+
+          var proxy = { t: 0 };
+          var tl = gsap.timeline({ paused: true });
+          tl.to(proxy, {
+            t: duration,
+            duration: duration,
+            ease: "none",
+            onUpdate: function () {
+              render(proxy.t);
+            },
+          });
+          tl.call(
+            function () {
+              fireSfx("device-settle-soft", IN);
+            },
+            [],
+            IN,
+          );
+          tl.to({}, { duration: Math.max(0, duration - tl.duration()) });
+          render(0);
+          tl.seek(0);
+          window.__timelines = window.__timelines || {};
+          window.__timelines[compositionId] = tl;
+        })();
+      </script>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/device-frame-stage/registry-item.json b/registry/components/device-frame-stage/registry-item.json
new file mode 100644
index 0000000000..b6b525d2f5
--- /dev/null
+++ b/registry/components/device-frame-stage/registry-item.json
@@ -0,0 +1,55 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "device-frame-stage",
+  "type": "hyperframes:component",
+  "title": "Device Frame Stage",
+  "description": "A phone or tablet mockup staged as a physical scene prop with a screen slot for arbitrary reconstructed UI, rising onto the stage, settling, and holding an idle float",
+  "tags": ["prop", "device", "mobile", "tablet", "ui-props", "holdable"],
+  "jobs": ["demonstrate"],
+  "family": "ui-props",
+  "profile": "holdable",
+  "evidence": "fixture + mobile inventory #1 + device-frame-spec.md",
+  "files": [
+    {
+      "path": "device-frame-stage.html",
+      "target": "compositions/components/device-frame-stage.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "device",
+      "type": "enum",
+      "role": "layout",
+      "label": "Device kind",
+      "default": "phone",
+      "options": [
+        { "value": "phone", "label": "Phone" },
+        { "value": "tablet", "label": "Tablet" }
+      ]
+    },
+    {
+      "id": "cutout",
+      "type": "enum",
+      "role": "layout",
+      "label": "Camera cutout",
+      "default": "none",
+      "options": [
+        { "value": "none", "label": "None" },
+        { "value": "island", "label": "Island" },
+        { "value": "notch", "label": "Notch" }
+      ]
+    },
+    {
+      "id": "body",
+      "type": "enum",
+      "role": "style",
+      "label": "Body material",
+      "default": "graphite",
+      "options": [
+        { "value": "graphite", "label": "Graphite" },
+        { "value": "silver", "label": "Silver" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/directional-wipe/demo.html b/registry/components/directional-wipe/demo.html
new file mode 100644
index 0000000000..5d44799889
--- /dev/null
+++ b/registry/components/directional-wipe/demo.html
@@ -0,0 +1,174 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Directional Wipe - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+        /* ponytail: scale wrapper only — GSAP targets live inside .hf-remocn-directional-wipe, not here */
+        transform: scale(1.65);
+      }
+      .hf-remocn-directional-wipe {
+        --hf-accent: var(--accent, rgba(255, 255, 255, 0.28));
+        --hf-l1: rgba(255, 255, 255, 0.72);
+        --hf-l3: rgba(255, 255, 255, 0.18);
+        --hf-l4: rgba(255, 255, 255, 0.08);
+        --hf-hair: rgba(255, 255, 255, 0.14);
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-directional-wipe {
+        position: relative;
+        width: 760px;
+        height: 428px;
+        overflow: hidden;
+        border-radius: 30px;
+        background: #111827;
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+      }
+      .hf-remocn-directional-wipe .scene {
+        position: absolute;
+        inset: 0;
+        display: grid;
+        place-items: center;
+        font-weight: 900;
+        font-size: 58px;
+        letter-spacing: -0.05em;
+        color: #fff;
+      }
+      .hf-remocn-directional-wipe .from {
+        background:
+          repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 4px),
+          var(--hf-l4);
+        transform: translate(var(--hf-from-x, 0px), var(--hf-from-y, 0px))
+          scale(var(--hf-from-scale, 1));
+        filter: blur(var(--hf-from-blur, 0px));
+      }
+      .hf-remocn-directional-wipe .to {
+        background:
+          repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 4px),
+          var(--hf-l3);
+        box-shadow: inset 0 0 0 2px var(--hf-accent);
+        transform: translate(var(--hf-to-x, 0px), var(--hf-to-y, 0px)) scale(var(--hf-to-scale, 1));
+        clip-path: inset(
+          var(--hf-clip-top, 0%) var(--hf-clip-right, 100%) var(--hf-clip-bottom, 0%)
+            var(--hf-clip-left, 0%)
+        );
+      }
+      .hf-remocn-directional-wipe .fx {
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
+        mix-blend-mode: screen;
+        transform: translateX(var(--hf-fx-x, -110%));
+      }
+      .hf-remocn-directional-wipe .rgb {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        opacity: var(--hf-rgb-opacity, 0);
+        background: linear-gradient(
+          90deg,
+          rgba(239, 68, 68, 0.35),
+          transparent,
+          rgba(34, 211, 238, 0.35)
+        );
+        transform: translateX(var(--hf-rgb-x, 0px));
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="directional-wipe-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-directional-wipe">
+          <div class="scene from">Before</div>
+          <div class="scene to">Directional Wipe</div>
+          <div class="fx"></div>
+          <div class="rgb"></div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-directional-wipe .to",
+          { "--hf-clip-right": "100%", "--hf-to-x": "60px", "--hf-to-scale": 1.04 },
+          {
+            "--hf-clip-right": "0%",
+            "--hf-to-x": "0px",
+            "--hf-to-scale": 1,
+            duration: 0.9,
+            ease: "power3.inOut",
+          },
+          startTime,
+        );
+        tl.to(
+          ".hf-remocn-directional-wipe .from",
+          {
+            "--hf-from-x": "-70px",
+            "--hf-from-scale": 0.96,
+            "--hf-from-blur": "5px",
+            duration: 0.9,
+            ease: "power3.inOut",
+          },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-directional-wipe .fx",
+          { "--hf-fx-x": "-110%" },
+          { "--hf-fx-x": "110%", duration: 0.58, ease: "power2.inOut" },
+          startTime + 0.18,
+        );
+        tl.fromTo(
+          ".hf-remocn-directional-wipe .rgb",
+          { "--hf-rgb-opacity": 0, "--hf-rgb-x": "-16px" },
+          {
+            "--hf-rgb-opacity": 1,
+            "--hf-rgb-x": "16px",
+            repeat: 3,
+            yoyo: true,
+            duration: 0.07,
+            ease: "steps(1)",
+          },
+          startTime + 0.32,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["directional-wipe-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/directional-wipe/directional-wipe.html b/registry/components/directional-wipe/directional-wipe.html
new file mode 100644
index 0000000000..4e02639ae2
--- /dev/null
+++ b/registry/components/directional-wipe/directional-wipe.html
@@ -0,0 +1,146 @@
+<!--
+  Directional Wipe - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+
+  Variables. The script below reads each one, falls back to the declared
+  default on anything missing or unrecognised, and writes the result as a
+  custom property the CSS consumes. The timeline recipe at the bottom is
+  untouched by them.
+
+    - palette (slate | teal | ember, default slate): ink of the ring that marks
+      the incoming panel. Both panels are monochrome placeholder material; the
+      ring is the one accent-coloured element. slate rides --accent, teal rides
+      --brand, ember rides --accent-2, and each falls back to a neutral hairline
+      so an unthemed composition renders in black and white.
+    - corner (square | rounded | soft, default rounded): corner radius of the
+      card. square is 0, rounded the original 30px, soft 56px.
+
+  On every default the motion is unchanged.
+-->
+
+<div
+  class="hf-remocn-directional-wipe"
+  data-composition-variables='[
+    { "id": "palette", "type": "enum", "role": "style", "label": "Palette", "description": "Theme token for the ring marking the incoming panel. Slate rides --accent, teal --brand, ember --accent-2; each falls back to a neutral hairline.", "default": "slate", "options": [{ "value": "slate", "label": "Slate" }, { "value": "teal", "label": "Teal" }, { "value": "ember", "label": "Ember" }] },
+    { "id": "corner", "type": "enum", "role": "style", "label": "Corner", "description": "Corner radius of the transition card.", "default": "rounded", "options": [{ "value": "square", "label": "Square" }, { "value": "rounded", "label": "Rounded" }, { "value": "soft", "label": "Soft" }] }
+  ]'
+>
+  <div class="scene from">Before</div>
+  <div class="scene to">Directional Wipe</div>
+  <div class="fx"></div>
+  <div class="rgb"></div>
+</div>
+
+<style>
+  .hf-remocn-directional-wipe {
+    --hf-accent: var(--accent, rgba(255, 255, 255, 0.28));
+    --hf-l1: rgba(255, 255, 255, 0.72);
+    --hf-l3: rgba(255, 255, 255, 0.18);
+    --hf-l4: rgba(255, 255, 255, 0.08);
+    --hf-hair: rgba(255, 255, 255, 0.14);
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-directional-wipe {
+    position: relative;
+    width: 760px;
+    height: 428px;
+    overflow: hidden;
+    border-radius: var(--hf-corner, 30px);
+    background: #111827;
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+  }
+  .hf-remocn-directional-wipe .scene {
+    position: absolute;
+    inset: 0;
+    display: grid;
+    place-items: center;
+    font-weight: 900;
+    font-size: 58px;
+    letter-spacing: -0.05em;
+    color: #fff;
+  }
+  .hf-remocn-directional-wipe .from {
+    background:
+      repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 4px),
+      var(--hf-l4);
+    transform: translate(var(--hf-from-x, 0px), var(--hf-from-y, 0px))
+      scale(var(--hf-from-scale, 1));
+    filter: blur(var(--hf-from-blur, 0px));
+  }
+  .hf-remocn-directional-wipe .to {
+    background:
+      repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 4px),
+      var(--hf-l3);
+    box-shadow: inset 0 0 0 2px var(--hf-accent);
+    transform: translate(var(--hf-to-x, 0px), var(--hf-to-y, 0px)) scale(var(--hf-to-scale, 1));
+    clip-path: inset(
+      var(--hf-clip-top, 0%) var(--hf-clip-right, 100%) var(--hf-clip-bottom, 0%)
+        var(--hf-clip-left, 0%)
+    );
+  }
+  .hf-remocn-directional-wipe .fx {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
+    mix-blend-mode: screen;
+    transform: translateX(var(--hf-fx-x, -110%));
+  }
+  .hf-remocn-directional-wipe .rgb {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    opacity: var(--hf-rgb-opacity, 0);
+    background: linear-gradient(
+      90deg,
+      rgba(239, 68, 68, 0.35),
+      transparent,
+      rgba(34, 211, 238, 0.35)
+    );
+    transform: translateX(var(--hf-rgb-x, 0px));
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides fall back to their declared defaults.
+    // Theme tokens only. The neutral fallback keeps an unthemed mount monochrome.
+    var HAIRLINE = "rgba(255, 255, 255, 0.28)";
+    var palettes = {
+      slate: "var(--accent, " + HAIRLINE + ")",
+      teal: "var(--brand, " + HAIRLINE + ")",
+      ember: "var(--accent-2, " + HAIRLINE + ")",
+    };
+    var corners = { square: "0px", rounded: "30px", soft: "56px" };
+
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var palette = palettes[pick(palettes, vars.palette, "slate")];
+    var corner = corners[pick(corners, vars.corner, "rounded")];
+
+    var roots = document.querySelectorAll(".hf-remocn-directional-wipe");
+    for (var i = 0; i < roots.length; i += 1) {
+      roots[i].style.setProperty("--hf-accent", palette);
+      roots[i].style.setProperty("--hf-corner", corner);
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-directional-wipe .to', { '--hf-clip-right': '100%', '--hf-to-x': '60px', '--hf-to-scale': 1.04 }, { '--hf-clip-right': '0%', '--hf-to-x': '0px', '--hf-to-scale': 1, duration: 0.9, ease: 'power3.inOut' }, startTime); tl.to('.hf-remocn-directional-wipe .from', { '--hf-from-x': '-70px', '--hf-from-scale': 0.96, '--hf-from-blur': '5px', duration: 0.9, ease: 'power3.inOut' }, startTime); tl.fromTo('.hf-remocn-directional-wipe .fx', { '--hf-fx-x': '-110%' }, { '--hf-fx-x': '110%', duration: 0.58, ease: 'power2.inOut' }, startTime + 0.18); tl.fromTo('.hf-remocn-directional-wipe .rgb', { '--hf-rgb-opacity': 0, '--hf-rgb-x': '-16px' }, { '--hf-rgb-opacity': 1, '--hf-rgb-x': '16px', repeat: 3, yoyo: true, duration: 0.07, ease: 'steps(1)' }, startTime + 0.32);
+-->
diff --git a/registry/components/directional-wipe/registry-item.json b/registry/components/directional-wipe/registry-item.json
new file mode 100644
index 0000000000..a3df94f26b
--- /dev/null
+++ b/registry/components/directional-wipe/registry-item.json
@@ -0,0 +1,64 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "directional-wipe",
+  "type": "hyperframes:component",
+  "title": "Directional Wipe",
+  "description": "A directional scene push that slides one panel over another.",
+  "tags": ["transition-primitive", "remocn-port"],
+  "variables": [
+    {
+      "id": "palette",
+      "type": "enum",
+      "role": "style",
+      "label": "Palette",
+      "description": "Theme token for the ring marking the incoming panel. Slate rides --accent, teal --brand, ember --accent-2; each falls back to a neutral hairline.",
+      "default": "slate",
+      "options": [
+        {
+          "value": "slate",
+          "label": "Slate"
+        },
+        {
+          "value": "teal",
+          "label": "Teal"
+        },
+        {
+          "value": "ember",
+          "label": "Ember"
+        }
+      ]
+    },
+    {
+      "id": "corner",
+      "type": "enum",
+      "role": "style",
+      "label": "Corner",
+      "description": "Corner radius of the transition card.",
+      "default": "rounded",
+      "options": [
+        {
+          "value": "square",
+          "label": "Square"
+        },
+        {
+          "value": "rounded",
+          "label": "Rounded"
+        },
+        {
+          "value": "soft",
+          "label": "Soft"
+        }
+      ]
+    }
+  ],
+  "files": [
+    {
+      "path": "directional-wipe.html",
+      "target": "compositions/components/directional-wipe.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/directional-wipe.png"
+  }
+}
diff --git a/registry/components/drift-hold/demo.html b/registry/components/drift-hold/demo.html
new file mode 100644
index 0000000000..965adf7fbc
--- /dev/null
+++ b/registry/components/drift-hold/demo.html
@@ -0,0 +1,85 @@
+<!doctype html>
+<!--
+  drift-hold demo. This standalone composition mounts drift-hold.html through
+  data-composition-src. Non-default text and whisper intensity prove that both
+  variables flow through the elastic host mount.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Drift Hold Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0b0c0e;
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --surface: #172033;
+        --fg: #f8fafc;
+        --muted: #94a3b8;
+        --accent: #38bdf8;
+        --border: #475569;
+        --radius: 3.2cqmin;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-body: Inter, system-ui, sans-serif;
+        --space-3: 5cqmin;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 42%, #142038 0%, #0b0c0e 72%);
+      }
+
+      .mount-card {
+        width: 58%;
+        height: 54%;
+        left: 21%;
+        top: 23%;
+        container-type: size;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="drift-hold-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="drift-hold-mount"
+        class="mount-card clip"
+        data-composition-id="drift-hold"
+        data-composition-src="./drift-hold.html"
+        data-variable-values='{"text":"Quiet momentum","intensity":"whisper"}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="1114"
+        data-height="583"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["drift-hold-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/drift-hold/drift-hold.html b/registry/components/drift-hold/drift-hold.html
new file mode 100644
index 0000000000..6aa5293b14
--- /dev/null
+++ b/registry/components/drift-hold/drift-hold.html
@@ -0,0 +1,192 @@
+<!doctype html>
+<!--
+  drift-hold: HyperFrames video primitive (camera / ambient / hold)
+
+  Concept: a centered content card never becomes fully static. Sub-degree
+  rotation, restrained scale breathing, and a soft light sweep each follow
+  one complete sine cycle across the mounted duration.
+
+  Variables:
+    - text (string, default "Always alive"): the card label.
+    - intensity (whisper | standard, default "standard"): selects the
+      amplitudes for rotation, breathing, and the light sweep.
+
+  Envelope:
+    IN = 0s
+    HOLD = elastic = the complete mounted duration
+    OUT = 0s
+    HOLD owns exactly one whole cycle at every duration. The endpoint phase
+    is explicitly wrapped to zero so the pose at t=0 exactly equals the pose
+    at t=duration.
+
+  Mount contract: the runtime clones only this template. #root fills the
+  host box, establishes the container query basis, has no data-width or
+  data-height, and registers one paused timeline under the hardcoded
+  drift-hold id.
+-->
+<html
+  lang="en"
+  data-composition-id="drift-hold"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "text", "type": "string", "role": "content", "label": "Text", "description": "Text displayed in the default centered card.", "default": "Always alive" },
+    { "id": "intensity", "type": "enum", "role": "motion", "label": "Intensity", "description": "Amplitude of the ambient rotation, breathing, and light sweep.", "default": "standard", "options": [{ "value": "whisper", "label": "Whisper" }, { "value": "standard", "label": "Standard" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Drift Hold</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="drift-hold" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .dh-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+          }
+
+          .dh-card {
+            position: relative;
+            display: grid;
+            width: 68cqw;
+            min-height: 44cqh;
+            place-items: center;
+            overflow: hidden;
+            padding: var(--space-3, 5cqh) var(--space-3, 6cqw);
+            border: 0.16cqmin solid color-mix(in srgb, var(--border, #475569) 82%, transparent);
+            border-radius: var(--radius, 3.2cqmin);
+            background: color-mix(in srgb, var(--surface, #172033) 94%, var(--accent, #38bdf8));
+            box-shadow: 0 3.5cqh 10cqh color-mix(in srgb, var(--bg, #05070d) 58%, transparent);
+            transform-origin: 50% 50%;
+            will-change: transform;
+          }
+
+          .dh-sweep {
+            position: absolute;
+            top: -45%;
+            left: 42%;
+            width: 20cqw;
+            height: 190%;
+            background: linear-gradient(
+              90deg,
+              transparent 0%,
+              color-mix(in srgb, var(--accent, #38bdf8) 10%, transparent) 25%,
+              color-mix(in srgb, var(--fg, #f8fafc) 28%, transparent) 50%,
+              color-mix(in srgb, var(--accent, #38bdf8) 10%, transparent) 75%,
+              transparent 100%
+            );
+            filter: blur(1.8cqmin);
+            will-change: transform, opacity;
+          }
+
+          .dh-label {
+            position: relative;
+            z-index: 1;
+            max-width: 56cqw;
+            overflow: hidden;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: clamp(20px, 9cqmin, 76px);
+            font-weight: 720;
+            line-height: 1.05;
+            letter-spacing: -0.035em;
+            text-align: center;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+        </style>
+
+        <div
+          id="drift-hold-clip"
+          class="dh-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="dh-card">
+            <div class="dh-sweep" aria-hidden="true"></div>
+            <div class="dh-label"></div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var card = root.querySelector(".dh-card");
+            var sweep = root.querySelector(".dh-sweep");
+            var label = root.querySelector(".dh-label");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var text = vars.text == null ? "Always alive" : String(vars.text);
+            var intensity = vars.intensity === "whisper" ? "whisper" : "standard";
+            var amplitudes = {
+              whisper: { rotation: 0.24, scale: 0.006, sweep: 30, light: 0.04 },
+              standard: { rotation: 0.6, scale: 0.015, sweep: 42, light: 0.08 },
+            };
+            var motion = amplitudes[intensity];
+
+            label.textContent = text;
+
+            var TAU = Math.PI * 2;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var state = { phase: 0 };
+
+            function renderPose() {
+              // Literal phase zero at the endpoint removes floating point
+              // residue from Math.sin(2 * PI) and makes the seam exact.
+              var phase = state.phase === TAU ? 0 : state.phase;
+              var rotation = Math.sin(phase + Math.PI / 6) * motion.rotation;
+              var scale = 1 + Math.sin(phase + Math.PI / 2) * motion.scale;
+              var sweepX = Math.sin(phase - Math.PI / 2) * motion.sweep;
+              var sweepOpacity = 0.12 + Math.sin(phase + Math.PI / 3) * motion.light;
+
+              gsap.set(card, { rotation: rotation, scale: scale });
+              gsap.set(sweep, {
+                x: sweepX + "cqw",
+                rotation: 14,
+                opacity: sweepOpacity,
+              });
+            }
+
+            var tl = gsap.timeline({ paused: true });
+
+            // HOLD: uniform phase travel drives only whole-cycle sine motion.
+            tl.to(state, { phase: TAU, duration: duration, ease: "none", onUpdate: renderPose }, 0);
+
+            renderPose();
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["drift-hold"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/drift-hold/registry-item.json b/registry/components/drift-hold/registry-item.json
new file mode 100644
index 0000000000..23fbc6ee2a
--- /dev/null
+++ b/registry/components/drift-hold/registry-item.json
@@ -0,0 +1,41 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "drift-hold",
+  "type": "hyperframes:component",
+  "title": "Drift Hold",
+  "description": "A centered content card stays subtly alive through loop-exact rotation, scale breathing, and a slow light sweep.",
+  "tags": ["motion-primitive", "camera", "ambient", "drift", "hold", "loopable"],
+  "jobs": ["orient"],
+  "family": "camera",
+  "profile": "ambient",
+  "evidence": "Wave G U18 drift-hold specification",
+  "files": [
+    {
+      "path": "drift-hold.html",
+      "target": "compositions/components/drift-hold.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "text",
+      "type": "string",
+      "role": "content",
+      "label": "Text",
+      "description": "Text displayed in the default centered card.",
+      "default": "Always alive"
+    },
+    {
+      "id": "intensity",
+      "type": "enum",
+      "role": "motion",
+      "label": "Intensity",
+      "description": "Amplitude of the ambient rotation, breathing, and light sweep.",
+      "default": "standard",
+      "options": [
+        { "value": "whisper", "label": "Whisper" },
+        { "value": "standard", "label": "Standard" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/dynamic-grid/demo.html b/registry/components/dynamic-grid/demo.html
new file mode 100644
index 0000000000..84968d9b4f
--- /dev/null
+++ b/registry/components/dynamic-grid/demo.html
@@ -0,0 +1,93 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Dynamic Grid - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: linear-gradient(135deg, #07131d, #13312d);
+        color: white;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-dynamic-grid {
+        --hf-grid-size: 72px;
+        --hf-grid-color: rgba(255, 255, 255, 0.16);
+        --hf-grid-x: 0px;
+        --hf-grid-y: 0px;
+        --hf-grid-opacity: 1;
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        opacity: var(--hf-grid-opacity);
+        background-image:
+          linear-gradient(var(--hf-grid-color) 1px, transparent 1px),
+          linear-gradient(90deg, var(--hf-grid-color) 1px, transparent 1px);
+        background-size: var(--hf-grid-size) var(--hf-grid-size);
+        background-position: var(--hf-grid-x) var(--hf-grid-y);
+      }
+      .content {
+        position: absolute;
+        left: 180px;
+        bottom: 170px;
+        width: 1020px;
+      }
+      .title {
+        font-size: 118px;
+        line-height: 0.96;
+        font-weight: 900;
+        letter-spacing: -0.035em;
+      }
+      .copy {
+        margin-top: 34px;
+        width: 760px;
+        font-size: 38px;
+        line-height: 1.2;
+        color: rgba(255, 255, 255, 0.65);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="dynamic-grid-demo"
+      data-width="1920"
+      data-height="1080"
+      data-duration="6"
+    >
+      <div class="hf-dynamic-grid" aria-hidden="true"></div>
+      <div class="content">
+        <div class="title">Dynamic grid motion</div>
+        <div class="copy">
+          A web-native background primitive for product demos, explainers, and data scenes.
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        tl.from(".content", { opacity: 0, y: 32, duration: 0.7, ease: "power3.out" }, 0.25);
+        tl.to(
+          ".hf-dynamic-grid",
+          { "--hf-grid-x": "72px", "--hf-grid-y": "-72px", duration: 6, ease: "none" },
+          0,
+        );
+        window.__timelines = window.__timelines || {};
+        window.__timelines["dynamic-grid-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/dynamic-grid/dynamic-grid.html b/registry/components/dynamic-grid/dynamic-grid.html
new file mode 100644
index 0000000000..dff7d3ad05
--- /dev/null
+++ b/registry/components/dynamic-grid/dynamic-grid.html
@@ -0,0 +1,104 @@
+<!--
+  Dynamic Grid - animated background primitive.
+
+  Paste the grid as the first child of a scene. Animate --hf-grid-x,
+  --hf-grid-y, and --hf-grid-opacity from your paused GSAP timeline.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result as a custom property
+  the CSS consumes. The timeline recipe below is untouched by them: it keeps
+  driving the scroll offset and the opacity.
+
+    - density (fine | standard | coarse, default standard): cell size of the
+      grid, 44px, 72px or 112px. fine reads as graph paper, coarse as a few
+      large panels.
+    - weight (hairline | standard | bold, default hairline): line thickness,
+      1px, 2px or 3px.
+    - tone (neutral | green | blue | violet, default neutral): line colour.
+      neutral is the translucent white the original ships with, and the three
+      accents ride --brand, --accent and --accent-2.
+
+  On every default the result is identical to the original: 72px cells drawn
+  in 1px translucent white lines.
+-->
+
+<div
+  class="hf-dynamic-grid"
+  aria-hidden="true"
+  data-composition-variables='[
+    { "id": "density", "type": "enum", "role": "style", "label": "Density", "description": "Cell size of the grid: fine reads as graph paper, coarse as a few large panels.", "default": "standard", "options": [{ "value": "fine", "label": "Fine" }, { "value": "standard", "label": "Standard" }, { "value": "coarse", "label": "Coarse" }] },
+    { "id": "weight", "type": "enum", "role": "style", "label": "Weight", "description": "Thickness of the grid lines, from a hairline rule to a bold structural grid.", "default": "hairline", "options": [{ "value": "hairline", "label": "Hairline" }, { "value": "standard", "label": "Standard" }, { "value": "bold", "label": "Bold" }] },
+    { "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Line colour: neutral is the translucent white the original ships with, and the accents ride --brand, --accent and --accent-2.", "default": "neutral", "options": [{ "value": "neutral", "label": "Neutral" }, { "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] }
+  ]'
+></div>
+
+<style>
+  .hf-dynamic-grid {
+    --hf-grid-size: 72px;
+    --hf-grid-line: 1px;
+    --hf-grid-color: rgba(255, 255, 255, 0.16);
+    --hf-grid-x: 0px;
+    --hf-grid-y: 0px;
+    --hf-grid-opacity: 1;
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    opacity: var(--hf-grid-opacity);
+    background-image:
+      linear-gradient(var(--hf-grid-color) var(--hf-grid-line), transparent var(--hf-grid-line)),
+      linear-gradient(
+        90deg,
+        var(--hf-grid-color) var(--hf-grid-line),
+        transparent var(--hf-grid-line)
+      );
+    background-size: var(--hf-grid-size) var(--hf-grid-size);
+    background-position: var(--hf-grid-x) var(--hf-grid-y);
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var sizes = { fine: "44px", standard: "72px", coarse: "112px" };
+    var weights = { hairline: "1px", standard: "2px", bold: "3px" };
+    var tones = {
+      neutral: "rgba(255, 255, 255, 0.16)",
+      green: "color-mix(in srgb, var(--brand, #34d399) 34%, transparent)",
+      blue: "color-mix(in srgb, var(--accent, #38bdf8) 34%, transparent)",
+      violet: "color-mix(in srgb, var(--accent-2, #a78bfa) 34%, transparent)",
+    };
+
+    var size = sizes[pick(sizes, vars.density, "standard")];
+    var line = weights[pick(weights, vars.weight, "hairline")];
+    var color = tones[pick(tones, vars.tone, "neutral")];
+
+    var roots = document.querySelectorAll(".hf-dynamic-grid");
+    for (var i = 0; i < roots.length; i += 1) {
+      roots[i].style.setProperty("--hf-grid-size", size);
+      roots[i].style.setProperty("--hf-grid-line", line);
+      roots[i].style.setProperty("--hf-grid-color", color);
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+
+  tl.to(".hf-dynamic-grid", {
+    "--hf-grid-x": "72px",
+    "--hf-grid-y": "-72px",
+    duration: 6,
+    ease: "none",
+  }, 0);
+-->
diff --git a/registry/components/dynamic-grid/registry-item.json b/registry/components/dynamic-grid/registry-item.json
new file mode 100644
index 0000000000..2b87b907a7
--- /dev/null
+++ b/registry/components/dynamic-grid/registry-item.json
@@ -0,0 +1,90 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "dynamic-grid",
+  "type": "hyperframes:component",
+  "title": "Dynamic Grid",
+  "description": "A responsive animated grid background driven by CSS variables for SaaS, code, and data scenes",
+  "tags": ["video-primitive", "motion-primitive", "background", "grid", "ui"],
+  "files": [
+    {
+      "path": "dynamic-grid.html",
+      "target": "compositions/components/dynamic-grid.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "density",
+      "type": "enum",
+      "role": "style",
+      "label": "Density",
+      "description": "Cell size of the grid: fine reads as graph paper, coarse as a few large panels.",
+      "default": "standard",
+      "options": [
+        {
+          "value": "fine",
+          "label": "Fine"
+        },
+        {
+          "value": "standard",
+          "label": "Standard"
+        },
+        {
+          "value": "coarse",
+          "label": "Coarse"
+        }
+      ]
+    },
+    {
+      "id": "weight",
+      "type": "enum",
+      "role": "style",
+      "label": "Weight",
+      "description": "Thickness of the grid lines, from a hairline rule to a bold structural grid.",
+      "default": "hairline",
+      "options": [
+        {
+          "value": "hairline",
+          "label": "Hairline"
+        },
+        {
+          "value": "standard",
+          "label": "Standard"
+        },
+        {
+          "value": "bold",
+          "label": "Bold"
+        }
+      ]
+    },
+    {
+      "id": "tone",
+      "type": "enum",
+      "role": "style",
+      "label": "Tone",
+      "description": "Line colour: neutral is the translucent white the original ships with, and the accents ride --brand, --accent and --accent-2.",
+      "default": "neutral",
+      "options": [
+        {
+          "value": "neutral",
+          "label": "Neutral"
+        },
+        {
+          "value": "green",
+          "label": "Green"
+        },
+        {
+          "value": "blue",
+          "label": "Blue"
+        },
+        {
+          "value": "violet",
+          "label": "Violet"
+        }
+      ]
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/dynamic-grid.png"
+  }
+}
diff --git a/registry/components/echo-trail/README.md b/registry/components/echo-trail/README.md
new file mode 100644
index 0000000000..ed93bc9ef5
--- /dev/null
+++ b/registry/components/echo-trail/README.md
@@ -0,0 +1,50 @@
+# echo-trail
+
+The generalized onion skin: a moving element renders with N ghosted copies of itself, each ghost showing the element where it was at t minus i \* delta, opacity stepped down per ghost. One traversal along an authored path; as the element decelerates into rest the echoes collapse into it and vanish, leaving a clean settled hold.
+
+3.5s authored, elastic HOLD, exit `none` by default.
+
+## Variables
+
+| id       | type   | default | notes                                                                                                                      |
+| -------- | ------ | ------- | -------------------------------------------------------------------------------------------------------------------------- |
+| `echoes` | number | `4`     | Ghost copy count, clamped 2 to 6.                                                                                          |
+| `delta`  | number | `0.09`  | Lag between successive ghosts in seconds, clamped 0.03 to 0.3.                                                             |
+| `path`   | enum   | `sweep` | `sweep` is a shallow S left to right; `rise` climbs bottom-center to upper-center; `arc` rises over the top left to right. |
+| `accent` | enum   | `green` | Subject accent color: green rides `--brand`, blue rides `--accent`, violet rides `--accent-2`.                             |
+| `exit`   | enum   | `none`  | `none` holds until the cut; `fade` departs opacity-only; `up` rises out.                                                   |
+
+## Subject slot
+
+The subject is a slot. Place an inert template anywhere in the HOST page (templates never render, and the runtime wipes the host clip's own children on mount, so the slot lives at document level):
+
+```html
+<template data-slot="echo-trail-subject">
+  <div class="my-badge">Shipped</div>
+</template>
+```
+
+Ghosts are deep clones of the subject content. With no slot, the primitive renders a token card (surface, hairline border, accent dot, two skeleton lines, contract tokens only).
+
+## Mount
+
+```html
+<div
+  class="clip"
+  data-composition-id="echo-trail"
+  data-composition-src="./echo-trail.html"
+  data-variable-values='{"path":"arc","echoes":5,"delta":0.12,"accent":"violet"}'
+  data-start="0"
+  data-duration="3.5"
+  data-track-index="0"
+></div>
+```
+
+Elastic root: no `data-width`/`data-height`; it fills whatever box the host clip gives it. Timeline registers under the literal `echo-trail` key.
+
+## Notes
+
+- Deterministic: ghost i's position at time t is `path(ease(clamp01((t - i * delta) / travel)))` and its opacity is its stepped base times a separation ramp (distance to the lead); both are recomputed from `tl.time()` on every update. No Math.random, no wall clock, no incremental state; eventful seeks (`suppressEvents=false`, the engine's render path) land identical frames in any order and either direction.
+- The separation ramp is what makes the echoes collapse: before motion starts and after the lead rests, every ghost is coincident with the lead and its opacity is exactly zero, so the HOLD is truly still.
+- Ghosts render beneath the lead (inserted before it) with a slight per-ghost scale step for depth; transforms are set once at mount, per-update writes touch only left/top/opacity.
+- The envelope accounts for the tail: `IN = travel + echoes * delta + settle`, so the last ghost has converged inside IN even at the largest lag.
diff --git a/registry/components/echo-trail/demo.html b/registry/components/echo-trail/demo.html
new file mode 100644
index 0000000000..e2161d708a
--- /dev/null
+++ b/registry/components/echo-trail/demo.html
@@ -0,0 +1,86 @@
+<!doctype html>
+<!--
+  echo-trail demo. FULL-BLEED light mount: the primitive fills the whole
+  1920x1080 frame on a light token block. Non-default path, echoes, delta,
+  and accent values prove the variable path.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Echo Trail Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #eef0f3);
+      }
+
+      #root {
+        --bg: #eef0f3;
+        --fg: #14161b;
+        --muted: #5b6472;
+        --surface: #ffffff;
+        --border: #d3d8e0;
+        --brand: #3f3f46;
+        --accent: #3f3f46;
+        --accent-2: #3f3f46;
+        --radius: 18px;
+        --font-display: "Inter", system-ui, sans-serif;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 42%, #f7f8fa 0%, var(--bg, #eef0f3) 72%);
+      }
+
+      .mount-bleed {
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        container-type: size;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="echo-trail-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="3.5"
+      data-fps="30"
+    >
+      <div
+        id="echo-trail-mount"
+        class="mount-bleed clip"
+        data-composition-id="echo-trail"
+        data-composition-src="./echo-trail.html"
+        data-variable-values='{"path":"arc","echoes":5,"delta":0.12,"accent":"violet"}'
+        data-start="0"
+        data-duration="3.5"
+        data-track-index="0"
+        data-width="1920"
+        data-height="1080"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["echo-trail-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/echo-trail/echo-trail.html b/registry/components/echo-trail/echo-trail.html
new file mode 100644
index 0000000000..50d057ff9e
--- /dev/null
+++ b/registry/components/echo-trail/echo-trail.html
@@ -0,0 +1,353 @@
+<!doctype html>
+<!--
+  echo-trail: HyperFrames video primitive (trails)
+
+  The generalized onion skin: a moving element renders with N ghosted
+  copies of itself, each ghost showing the element where it was at
+  t minus i * delta, opacity stepped down per ghost. One traversal along
+  an authored path; as the element decelerates into rest the echoes
+  collapse into it and vanish, leaving a clean settled hold.
+
+  The subject is a SLOT. Callers supply content by placing an inert
+  template anywhere in the HOST page (templates never render, and the
+  runtime wipes the host clip's own children on mount, so the slot lives
+  at document level):
+
+    <template data-slot="echo-trail-subject"> ... </template>
+
+  Ghosts are deep clones of the subject content. With no slot, the
+  primitive renders a token card (surface, hairline border, accent dot,
+  two skeleton lines, contract tokens only).
+
+  Variables (declared in data-composition-variables below):
+    - echoes (number 2 to 6, default 4): ghost copy count.
+    - delta (number seconds, default 0.09, clamped 0.03 to 0.3): the lag
+      between successive ghosts.
+    - path ("sweep" | "rise" | "arc", default "sweep"): the authored
+      traversal preset.
+    - accent ("green" | "blue" | "violet", default "green"): green rides
+      --brand, blue rides --accent, violet rides --accent-2.
+    - exit ("none" | "fade" | "up", default "none"): frame roots own
+      transitions; the default holds the final frame to the last pixel.
+
+  Envelope, fixed IN and OUT with elastic HOLD only (never timeScale):
+    IN_BASE  = TRAVEL (2.1s) + echoes * delta + 0.2s settle; the lead
+               rests at TRAVEL and the last ghost has converged (and is
+               exactly invisible) by IN
+    HOLD     = max(0, D - IN - OUT)
+    OUT_BASE = 0.45s  only when exit != none
+    If D < IN_BASE + OUT_BASE, the whole envelope compresses together.
+
+  Determinism: ghost i's position at time t is path(ease(clamp01((t -
+  i * delta) / TRAVEL))) and its opacity is its stepped base times a pure
+  function of its distance to the lead; both are recomputed from
+  tl.time() on every update. No Math.random, no wall clock, no
+  incremental state, no requestAnimationFrame. Eventful seeks
+  (suppressEvents=false, the engine's render path) land identical frames
+  in any order and either direction; at rest every ghost is coincident
+  with the lead at opacity exactly zero, so the HOLD is truly still.
+
+  Mount contract: the runtime clones only this template. #root fills the
+  host box (no data-width/data-height, container-type: size, cqmin
+  units), is styled via #root only, and registers one paused timeline
+  under the LITERAL "echo-trail" key.
+-->
+<html
+  lang="en"
+  data-composition-id="echo-trail"
+  data-composition-duration="3.5"
+  data-composition-variables='[
+    { "id": "echoes", "type": "number", "role": "style", "label": "Echoes", "description": "Ghost copy count, clamped 2 to 6.", "default": 4 },
+    { "id": "delta", "type": "number", "role": "timing", "label": "Delta", "description": "Lag between successive ghosts in seconds, clamped 0.03 to 0.3.", "default": 0.09 },
+    { "id": "path", "type": "enum", "role": "timing", "label": "Path", "description": "Authored traversal preset.", "default": "sweep", "options": [{ "value": "sweep", "label": "Sweep" }, { "value": "rise", "label": "Rise" }, { "value": "arc", "label": "Arc" }] },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Subject accent color: green rides --brand, blue rides --accent, violet rides --accent-2.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the settled element holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Echo Trail</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="echo-trail" data-duration="3.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, "Inter", system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .et-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .et-stage {
+            position: absolute;
+            inset: 0;
+            will-change: transform, opacity;
+          }
+
+          .et-ghost,
+          .et-lead {
+            position: absolute;
+            left: 0;
+            top: 0;
+            will-change: opacity;
+          }
+
+          .et-ghost {
+            opacity: 0;
+          }
+
+          .et-lead {
+            opacity: 0;
+          }
+
+          .et-card {
+            width: 30cqmin;
+            padding: var(--space-3, 3cqmin);
+            display: grid;
+            gap: var(--space-2, 2cqmin);
+            border: 0.18cqmin solid var(--border, #475569);
+            border-radius: var(--radius, 2.4cqmin);
+            background: var(--surface, #14171c);
+            box-shadow: 0 1.6cqmin 5cqmin color-mix(in srgb, var(--bg, #000000) 30%, transparent);
+          }
+
+          .et-card-dot {
+            width: 3.2cqmin;
+            height: 3.2cqmin;
+            border-radius: 50%;
+            background: var(--et-accent);
+          }
+
+          .et-card-line {
+            height: 1.6cqmin;
+            border-radius: 0.8cqmin;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 16%, transparent);
+          }
+
+          .et-card-line.short {
+            width: 62%;
+          }
+        </style>
+
+        <div
+          id="echo-trail-clip"
+          class="et-clip clip"
+          data-start="0"
+          data-duration="3.5"
+          data-track-index="0"
+        >
+          <div class="et-stage">
+            <div class="et-lead">
+              <div class="et-card">
+                <div class="et-card-dot"></div>
+                <div class="et-card-line"></div>
+                <div class="et-card-line short"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".et-stage");
+            var lead = root.querySelector(".et-lead");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var echoesRaw = parseFloat(vars.echoes);
+            var echoes = isFinite(echoesRaw) ? Math.min(6, Math.max(2, Math.round(echoesRaw))) : 4;
+            var deltaRaw = parseFloat(vars.delta);
+            var deltaVar = isFinite(deltaRaw) ? Math.min(0.3, Math.max(0.03, deltaRaw)) : 0.09;
+            var pathName = vars.path === "rise" || vars.path === "arc" ? vars.path : "sweep";
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #52525b)",
+              blue: "var(--accent, #52525b)",
+              violet: "var(--accent-2, #52525b)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            root.style.setProperty("--et-accent", accentColors[accent]);
+
+            // SLOT. Caller templates live at HOST DOCUMENT level (the mount
+            // wipes host-clip children, and templates never render).
+            var hostDoc = root.ownerDocument;
+            var slotTemplate = null;
+            try {
+              slotTemplate = hostDoc.querySelector('template[data-slot="echo-trail-subject"]');
+            } catch (error) {
+              slotTemplate = null;
+            }
+            if (slotTemplate) {
+              lead.querySelector(".et-card").remove();
+              lead.appendChild(hostDoc.importNode(slotTemplate.content, true));
+            }
+
+            // Ghosts: deep clones of the subject, inserted BEFORE the lead
+            // so the lead always renders on top. ghosts[0] is the nearest
+            // past copy (highest stepped opacity).
+            var ghosts = [];
+            for (var g = 0; g < echoes; g += 1) {
+              var ghost = hostDoc.createElement("div");
+              ghost.className = "et-ghost";
+              ghost.setAttribute("aria-hidden", "true");
+              for (var c = 0; c < lead.children.length; c += 1) {
+                ghost.appendChild(lead.children[c].cloneNode(true));
+              }
+              stage.insertBefore(ghost, lead);
+              ghosts.push(ghost);
+            }
+
+            // Envelope: fixed IN/OUT, elastic HOLD, never time-scaled.
+            var TRAVEL_BASE = 2.1;
+            var IN_BASE = TRAVEL_BASE + echoes * deltaVar + 0.2;
+            var OUT_BASE = exit === "none" ? 0 : 0.45;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "3.5"));
+            var totalBase = Math.max(0.001, IN_BASE + OUT_BASE);
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var TRAVEL = TRAVEL_BASE * scale;
+            var delta = deltaVar * scale;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var OUT_START = IN + HOLD;
+
+            // Path presets in percent-of-stage coordinates; the subject is
+            // centered on the point via a one-time -50%/-50% translate.
+            function pathPoint(u) {
+              if (pathName === "rise") {
+                return { x: 50 + 6 * Math.sin(Math.PI * u), y: 76 - 44 * u };
+              }
+              if (pathName === "arc") {
+                return { x: 16 + 68 * u, y: 64 - 34 * Math.sin(Math.PI * u) };
+              }
+              // sweep: a shallow S from left to right through center.
+              return { x: 18 + 64 * u, y: 50 + 10 * Math.cos(Math.PI * u) };
+            }
+
+            function easeInOut(t) {
+              return t < 0.5 ? 2 * t * t : 1 - 2 * (1 - t) * (1 - t);
+            }
+            function clamp01(v) {
+              return v < 0 ? 0 : v > 1 ? 1 : v;
+            }
+
+            function posAt(timeSeconds) {
+              var u = easeInOut(clamp01(TRAVEL > 0 ? timeSeconds / TRAVEL : 1));
+              return pathPoint(u);
+            }
+
+            // One-time static transforms: center anchor plus a slight
+            // per-ghost scale step for depth. GSAP owns the transform, the
+            // per-update writes touch only left/top/opacity.
+            gsap.set(lead, { xPercent: -50, yPercent: -50 });
+            for (var i = 0; i < ghosts.length; i += 1) {
+              gsap.set(ghosts[i], {
+                xPercent: -50,
+                yPercent: -50,
+                scale: 1 - 0.015 * (i + 1),
+              });
+            }
+
+            // Stepped ghost bases: nearest past copy strongest.
+            var bases = [];
+            for (var b = 0; b < echoes; b += 1) {
+              bases.push(0.55 * (1 - b / echoes));
+            }
+
+            // Pure per-update apply: every position and every ghost alpha
+            // is a function of tl.time() alone. Ghost alpha is its stepped
+            // base times a separation ramp, so echoes are invisible before
+            // motion starts and collapse to exactly zero at rest. Writes
+            // are idempotent, so the HOLD repaints identically.
+            function applyTime(timeSeconds) {
+              var leadPos = posAt(timeSeconds);
+              gsap.set(lead, {
+                left: leadPos.x.toFixed(4) + "%",
+                top: leadPos.y.toFixed(4) + "%",
+              });
+              for (var n = 0; n < ghosts.length; n += 1) {
+                var p = posAt(timeSeconds - (n + 1) * delta);
+                var dist = Math.hypot(p.x - leadPos.x, p.y - leadPos.y);
+                var alpha = bases[n] * clamp01(dist / 2.2);
+                gsap.set(ghosts[n], {
+                  left: p.x.toFixed(4) + "%",
+                  top: p.y.toFixed(4) + "%",
+                  opacity: alpha < 0.002 ? 0 : alpha,
+                });
+              }
+            }
+
+            gsap.set(stage, { opacity: 1, y: "0cqh" });
+
+            var tl = gsap.timeline({
+              paused: true,
+              onUpdate: function () {
+                applyTime(tl.time());
+              },
+            });
+
+            // Anchor tween: an inert plain-object tween spanning the full
+            // authored duration so the timeline covers [0, D], onUpdate
+            // fires for every eventful seek, and holds never clamp short.
+            tl.to({ p: 0 }, { p: 1, duration: duration, ease: "none" }, 0);
+
+            // Lead entrance: both endpoints authored. Ghosts need no
+            // entrance; the separation ramp keeps them at zero until the
+            // traversal opens a gap.
+            tl.fromTo(
+              lead,
+              { opacity: 0 },
+              { opacity: 1, duration: 0.22 * scale, ease: "power2.out" },
+              0,
+            );
+
+            // HOLD: truly still. The lead rests at path(1) and every ghost
+            // is coincident at opacity exactly zero.
+
+            // OUT: optional departure; exit none holds until the frame cuts.
+            if (exit === "up") {
+              tl.to(stage, { y: "-4cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "fade") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            }
+
+            tl.seek(0);
+            applyTime(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["echo-trail"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/echo-trail/registry-item.json b/registry/components/echo-trail/registry-item.json
new file mode 100644
index 0000000000..cfcab2d0f7
--- /dev/null
+++ b/registry/components/echo-trail/registry-item.json
@@ -0,0 +1,77 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "echo-trail",
+  "type": "hyperframes:component",
+  "title": "Echo Trail",
+  "description": "A moving element renders with N ghosted copies of itself at t minus i times delta, opacity stepped down per ghost; one traversal, echoes collapsing into the settled element at rest.",
+  "tags": ["motion-primitive", "demonstrate", "trail", "onion-skin", "ghosts", "deterministic"],
+  "jobs": ["demonstrate"],
+  "family": "demonstrate",
+  "profile": "onion-skin",
+  "evidence": "Wave L5 frame study: generalized onion skin from the trails contact sheets",
+  "syncPoints": [{ "id": "travel-complete", "phase": "in", "offset": 2.1 }],
+  "files": [
+    {
+      "path": "echo-trail.html",
+      "target": "compositions/components/echo-trail.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "echoes",
+      "type": "number",
+      "role": "style",
+      "label": "Echoes",
+      "description": "Ghost copy count, clamped 2 to 6.",
+      "default": 4
+    },
+    {
+      "id": "delta",
+      "type": "number",
+      "role": "timing",
+      "label": "Delta",
+      "description": "Lag between successive ghosts in seconds, clamped 0.03 to 0.3.",
+      "default": 0.09
+    },
+    {
+      "id": "path",
+      "type": "enum",
+      "role": "timing",
+      "label": "Path",
+      "description": "Authored traversal preset.",
+      "default": "sweep",
+      "options": [
+        { "value": "sweep", "label": "Sweep" },
+        { "value": "rise", "label": "Rise" },
+        { "value": "arc", "label": "Arc" }
+      ]
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Subject accent color: green rides --brand, blue rides --accent, violet rides --accent-2.",
+      "default": "green",
+      "options": [
+        { "value": "green", "label": "Green" },
+        { "value": "blue", "label": "Blue" },
+        { "value": "violet", "label": "Violet" }
+      ]
+    },
+    {
+      "id": "exit",
+      "type": "enum",
+      "role": "timing",
+      "label": "Exit",
+      "description": "Optional departure. Default none: the settled element holds until the frame cuts.",
+      "default": "none",
+      "options": [
+        { "value": "none", "label": "None" },
+        { "value": "fade", "label": "Fade" },
+        { "value": "up", "label": "Up" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/facet-morph/README.md b/registry/components/facet-morph/README.md
new file mode 100644
index 0000000000..39dcaa2354
--- /dev/null
+++ b/registry/components/facet-morph/README.md
@@ -0,0 +1,75 @@
+# facet-morph
+
+A faceted low-poly mass (36 triangles, one SVG) continuously reshapes between
+three authored silhouettes (blob, mark, badge) with per-facet flat shading
+that recomputes as the vertices move. Light reads from the upper left: facets
+turned toward it lift toward a pale accent-tinted tone, facets turned away
+fall toward near-black. One calm continuous morph in the quiet register, then
+a settled hold (or a slow breath when `hold_last` is false).
+
+Reference: the ordinaryfolk reshaping-mass beat (motion-reference
+`ordinaryfolkco/2001090228958752945`, sheet 02).
+
+## Files
+
+- `facet-morph.html`: the mountable sub-composition (install target:
+  `compositions/components/facet-morph.html`).
+- `registry-item.json`: registry metadata and the variables block.
+- `demo.html`: a full-bleed 1920x1080 LIGHT host that mounts the primitive
+  with non-default variables (QA gallery input).
+
+## Variables
+
+| id          | type    | default           | notes                                                                     |
+| ----------- | ------- | ----------------- | ------------------------------------------------------------------------- |
+| `forms`     | string  | `blob,mark,badge` | comma-separated silhouette sequence; valid names blob, mark, badge        |
+| `hold_last` | boolean | `true`            | true settles dead still on the final form; false breathes through hold    |
+| `accent`    | enum    | `green`           | `green` maps to `--brand`, `blue` to `--accent`, `violet` to `--accent-2` |
+| `exit`      | enum    | `none`            | `none` holds the settled mass; `fade` and `up` release the stage          |
+
+Envelope: IN = 0.55s entrance + one 1.45s morph leg per silhouette step
+(0.35s dwell between legs) + 0.55s wobble decay; OUT = 0.45s only when `exit`
+is `fade` or `up`; HOLD is the sole elastic phase. The `form-lock` sync point
+(`hf:sfx` id `facet-settle-soft`) fires when the mass reaches its final
+silhouette, 3.95s at the 3-form default.
+
+## How it works (and how to restyle it)
+
+- Vertex positions are authored keyframe tables (per-silhouette radius,
+  jitter, and center rows over fixed angular spokes), interpolated as a pure
+  function of timeline time by one linear driver tween. Forward, backward,
+  and shuffled seeks land identical frames.
+- Facet fills are computed in JS on every update and written as `fill` /
+  `stroke` ATTRIBUTES with literal `rgb()` strings. Contract tokens
+  (`--fg`, `--surface`, and the accent token) are resolved to concrete rgb
+  once at mount, so a host theme restyles the mass without any var() color
+  ever reaching a tween.
+- The mass tone is fg-heavy (`--fg` mixed toward `--surface`), so it reads
+  dark on light hosts and light on dark hosts, always contrasting `--bg`.
+- To add a silhouette, add one row to the `FORMS` table in your installed
+  copy (18 outer radii, 18 outer jitters, 9 inner radii, 9 inner jitters,
+  center, rotation) and name it in `forms`.
+
+## Worked example
+
+```bash
+npx hyperframes add facet-morph
+```
+
+Mount it from a host composition like any sub-composition:
+
+```html
+<div
+  class="clip"
+  data-composition-id="facet-morph"
+  data-composition-src="./components/facet-morph.html"
+  data-variable-values='{"forms":"badge,blob,mark","hold_last":false,"accent":"violet"}'
+  data-start="0"
+  data-duration="5"
+  data-track-index="0"
+></div>
+```
+
+The mass enters over 0.55s, reshapes badge to blob to mark, and keeps a slow
+breath between the last two silhouettes until the frame cuts (`exit`
+defaults to `none`; frame roots own scene transitions).
diff --git a/registry/components/facet-morph/demo.html b/registry/components/facet-morph/demo.html
new file mode 100644
index 0000000000..3d67ff23e6
--- /dev/null
+++ b/registry/components/facet-morph/demo.html
@@ -0,0 +1,90 @@
+<!doctype html>
+<!--
+  facet-morph demo. FULL-BLEED mount on a LIGHT token stage: the faceted
+  mass reshapes badge to blob to mark with the violet accent and hold_last
+  false, proving the forms sequence, the breathing hold, and flat shading
+  that reads on a light background (the reference's own register).
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>facet-morph Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #eef0f3);
+      }
+
+      #root {
+        --bg: #eef0f3;
+        --fg: #14171c;
+        --muted: #626873;
+        --surface: #fbfcfd;
+        --border: #d3d8df;
+        --brand: #16a34a;
+        --accent: #0284c7;
+        --accent-2: #7c5cff;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-body: Inter, system-ui, sans-serif;
+        --radius: 22px;
+        --space-1: 8px;
+        --space-2: 16px;
+        --space-3: 32px;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: linear-gradient(128deg, #f4f5f7 0%, var(--bg, #eef0f3) 48%, #e2e5ea 100%);
+      }
+
+      .mount-stage {
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        container-type: size;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="facet-morph-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+      data-fps="30"
+    >
+      <div
+        id="facet-morph-mount"
+        class="mount-stage clip"
+        data-composition-id="facet-morph"
+        data-composition-src="./facet-morph.html"
+        data-variable-values='{"forms":"badge,blob,mark","hold_last":false,"accent":"violet"}'
+        data-start="0"
+        data-duration="5"
+        data-track-index="0"
+        data-width="1920"
+        data-height="1080"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["facet-morph-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/facet-morph/facet-morph.html b/registry/components/facet-morph/facet-morph.html
new file mode 100644
index 0000000000..c3ce8d60e9
--- /dev/null
+++ b/registry/components/facet-morph/facet-morph.html
@@ -0,0 +1,551 @@
+<!doctype html>
+<!--
+  facet-morph: HyperFrames video primitive (intros and reveals / morph)
+
+  Concept: a faceted low-poly mass (36 triangles, one SVG) continuously
+  reshapes between three authored silhouettes (blob, mark, badge) with
+  per-facet flat shading that recomputes as the vertices move. Light reads
+  from the upper left: facets turned toward it lift toward a pale accent-
+  tinted tone, facets turned away fall toward near-black. The register is
+  the ordinaryfolk reshaping-mass beat: one calm continuous morph, no pops.
+
+  Wave L, unit L2. Reference: motion-reference/ordinaryfolkco
+  2001090228958752945 sheet-02 (the continuously reshaping faceted mass).
+
+  Determinism: vertex positions are authored keyframe tables (per-silhouette
+  radius, jitter, and center rows) interpolated as a PURE FUNCTION of
+  timeline time. One linear driver tween owns the whole life of the mass;
+  its onUpdate recomputes every vertex and every facet fill from t alone,
+  so forward, backward, and shuffled seeks land byte-identical frames.
+  The wobble that keeps the mass alive is built from fixed-phase sine
+  terms (phases from a fixed-seed LCG, baked once at mount).
+
+  Paint law: facet geometry AND facet color are written as ATTRIBUTES
+  (points / fill / stroke) on every update. Nothing tweens a var() color
+  string and nothing relies on CSS repaint of SVG presentation properties
+  under seeks. Contract tokens are resolved to concrete rgb once at mount
+  (via a probe element), then mixed numerically in JS.
+
+  Variables (declared in data-composition-variables below):
+    - forms (string, default "blob,mark,badge"): comma-separated silhouette
+      sequence. Valid names: blob, mark, badge. Unknown names are dropped;
+      an empty result falls back to the default sequence.
+    - hold_last (boolean, default true): true decays the wobble and holds
+      the final silhouette dead still; false keeps the mass slowly
+      breathing between the last two silhouettes through the hold.
+    - accent (green | blue | violet, default green): tint of the lit
+      facets. green maps to --brand, blue to --accent, violet to --accent-2.
+    - exit (none | fade | up, default none): outgoing transition. none
+      holds the settled mass (frame roots own transitions).
+
+  Envelope (fixed IN/OUT, elastic HOLD only, never gsap.timeScale()):
+    IN       = 0.55s entrance + one 1.45s morph leg per silhouette step
+               (0.35s dwell between legs) + 0.55s wobble decay
+    HOLD     = elastic = max(0, D - (IN + OUT))
+    OUT      = 0.45s when exit is fade or up, 0 when exit is none
+    If D < IN + OUT, IN and OUT scale down together so IN + OUT == D.
+
+  Sync point: form-lock when the mass reaches its final silhouette
+  (3.95s at the 3-form default). Dispatches a bubbling hf:sfx CustomEvent
+  with id "facet-settle-soft" there. This primitive never plays audio.
+
+  Mount contract: MOUNTABLE SUB-COMPOSITION. The runtime clones only
+  <template> contents; #root fills the host box (inset:0, container-type:
+  size), has no data-width/data-height, and registers one paused timeline
+  under the literal "facet-morph" key. Variables come from
+  window.__hyperframes.getVariables().
+-->
+<html
+  lang="en"
+  data-composition-id="facet-morph"
+  data-composition-duration="5"
+  data-composition-variables='[
+    { "id": "forms", "type": "string", "role": "content", "label": "Forms", "description": "Comma-separated silhouette sequence from blob, mark, badge.", "default": "blob,mark,badge" },
+    { "id": "hold_last", "type": "boolean", "role": "timing", "label": "Hold last", "description": "True settles dead still on the final silhouette; false keeps the mass slowly breathing through the hold.", "default": true },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Tint of the lit facets.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Outgoing transition. None holds the settled mass.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Facet Morph</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="facet-morph" data-duration="5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            background: var(--bg, #0b0c0e);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+          }
+
+          .fm-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+          }
+
+          /* A very soft stage vignette keeps the mass grounded on flat
+             token backgrounds without inventing a light band (that is
+             light-sweep-pass territory). */
+          .fm-clip::before {
+            content: "";
+            position: absolute;
+            inset: 0;
+            background: radial-gradient(
+              ellipse at 42% 38%,
+              color-mix(in srgb, var(--fg, #f8fafc) 4%, transparent) 0%,
+              transparent 68%
+            );
+          }
+
+          .fm-stage {
+            display: grid;
+            place-items: center;
+            width: 100%;
+            height: 100%;
+            will-change: transform, opacity;
+          }
+
+          .fm-svg {
+            width: 74cqmin;
+            height: 74cqmin;
+            overflow: visible;
+          }
+
+          .fm-svg polygon {
+            stroke-width: 0.22;
+            stroke-linejoin: round;
+          }
+        </style>
+
+        <div
+          id="facet-morph-clip"
+          class="fm-clip clip"
+          data-start="0"
+          data-duration="5"
+          data-track-index="0"
+        >
+          <div class="fm-stage">
+            <svg
+              class="fm-svg"
+              viewBox="0 0 100 100"
+              role="img"
+              aria-label="Reshaping faceted mass"
+            >
+              <g class="fm-mesh"></g>
+            </svg>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var SVG_NS = "http://www.w3.org/2000/svg";
+            var root = document.getElementById("root");
+            // Literal id: mount flattening strips data-composition-id from the
+            // live root before this timeline registers.
+            var compositionId = "facet-morph";
+            var stage = root.querySelector(".fm-stage");
+            var mesh = root.querySelector(".fm-mesh");
+
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            /* ---------------- variables ---------------- */
+
+            var accentTokens = {
+              green: "var(--brand, #22c55e)",
+              blue: "var(--accent, #38bdf8)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentTokens, vars.accent)
+              ? vars.accent
+              : "green";
+            // The bundler mirrors composition variables as scoped CSS custom
+            // props, so this unit's own accent variable can shadow the contract
+            // --accent token ("blue" is a valid CSS color). When the shadow is
+            // present, fall back to the literal contract value.
+            var shadowedAccent = getComputedStyle(root).getPropertyValue("--accent").trim();
+            if (
+              shadowedAccent === "green" ||
+              shadowedAccent === "blue" ||
+              shadowedAccent === "violet"
+            ) {
+              accentTokens.blue = "#38bdf8";
+            }
+
+            var holdLast = !(vars.hold_last === false || vars.hold_last === "false");
+            // INVARIANT: only none | fade | up reaches the timeline.
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            /* ---------------- authored keyframe tables ----------------
+               Each silhouette is one row set: 18 outer radii, 18 outer
+               angular jitters (deg), 9 inner radii, 9 inner jitters (deg),
+               a center, and a whole-mass rotation (deg). Angles are fixed
+               spokes (outer every 20deg, inner every 40deg offset 20deg,
+               both starting at 12 o'clock), so any two rows interpolate
+               vertex-for-vertex. */
+
+            var FORMS = {
+              // Irregular craggy rock, the reference's opening mass.
+              blob: {
+                outerR: [34, 39, 31, 36, 41, 33, 29, 37, 40, 32, 35, 30, 38, 34, 28, 36, 39, 33],
+                outerJ: [3, -5, 6, -2, 4, -6, 2, 5, -4, 3, -3, 6, -5, 2, 4, -2, -6, 5],
+                innerR: [16, 19, 14, 20, 17, 13, 18, 15, 19],
+                innerJ: [8, -10, 12, -6, 9, -12, 7, 11, -8],
+                cx: 50,
+                cy: 51,
+                rot: 0,
+              },
+              // A peaked asymmetric shard, the reference's closing frames.
+              mark: {
+                outerR: [48, 40, 28, 22, 19, 17, 16, 17, 19, 21, 23, 22, 19, 17, 19, 25, 34, 44],
+                outerJ: [-2, 6, -8, 4, -3, 5, -6, 2, 4, -5, 3, -4, 6, -2, 5, -7, 3, -4],
+                innerR: [20, 13, 10, 8, 9, 8, 10, 11, 15],
+                innerJ: [-6, 9, -11, 7, -8, 10, -7, 6, -9],
+                cx: 50,
+                cy: 56,
+                rot: -7,
+              },
+              // A wide-shouldered shield settling toward a point.
+              badge: {
+                outerR: [36, 37, 35, 34, 33, 30, 27, 25, 24, 33, 24, 25, 27, 30, 33, 34, 35, 37],
+                outerJ: [0, 2, -2, 1, -1, 2, -2, 1, 3, 0, -3, -1, 2, -2, 1, -1, 2, -2],
+                innerR: [18, 17, 16, 13, 12, 12, 13, 16, 17],
+                innerJ: [4, -5, 6, -4, 5, -6, 4, -5, 6],
+                cx: 50,
+                cy: 49,
+                rot: 5,
+              },
+            };
+
+            var requested = String(vars.forms == null ? "" : vars.forms)
+              .split(",")
+              .map(function (name) {
+                return name.trim().toLowerCase();
+              })
+              .filter(function (name) {
+                return Object.prototype.hasOwnProperty.call(FORMS, name);
+              });
+            var formNames = requested.length > 0 ? requested : ["blob", "mark", "badge"];
+            var formRows = formNames.map(function (name) {
+              return FORMS[name];
+            });
+
+            /* ---------------- fixed-seed facet tables ----------------
+               Wobble phases and per-facet tilts come from one LCG baked at
+               mount. Same seed, same mesh, every mount. */
+
+            var OUTER = 18;
+            var INNER = 9;
+            var lcgState = 0x0f4c37ed;
+            function lcg() {
+              lcgState = (Math.imul(1664525, lcgState) + 1013904223) >>> 0;
+              return lcgState / 4294967296;
+            }
+            var outerPhase = [];
+            for (var i = 0; i < OUTER; i += 1) outerPhase.push(lcg());
+            var innerPhase = [];
+            for (var j = 0; j < INNER; j += 1) innerPhase.push(lcg());
+
+            /* Triangulation: for each inner vertex j, spokes a=2j, b=2j+1,
+               c=2j+2 close the outer ring band (27 triangles), then the
+               inner ring fans to the center (9 triangles). 36 facets. */
+            var facets = [];
+            for (var k = 0; k < INNER; k += 1) {
+              var a = 2 * k;
+              var b = 2 * k + 1;
+              var c = (2 * k + 2) % OUTER;
+              facets.push(["o", a, "o", b, "i", k]);
+              facets.push(["o", b, "o", c, "i", k]);
+              facets.push(["o", c, "i", k, "i", (k + 1) % INNER]);
+            }
+            for (var f = 0; f < INNER; f += 1) {
+              facets.push(["i", f, "i", (f + 1) % INNER, "c", 0]);
+            }
+            var facetTilt = facets.map(function () {
+              return (lcg() - 0.5) * 0.62;
+            });
+
+            var polygons = facets.map(function () {
+              var polygon = document.createElementNS(SVG_NS, "polygon");
+              mesh.appendChild(polygon);
+              return polygon;
+            });
+
+            /* ---------------- token color resolution ----------------
+               Resolve contract tokens to concrete rgb once at mount via a
+               probe element, then mix numerically. Facet fills are literal
+               rgb() attribute strings; no var() ever reaches a tween. */
+
+            var probe = document.createElement("span");
+            probe.style.display = "none";
+            root.appendChild(probe);
+            function resolveColor(cssColor, fallback) {
+              probe.style.color = fallback;
+              probe.style.color = cssColor;
+              var raw = getComputedStyle(probe).color;
+              var match = raw.match(/rgba?\(([^)]+)\)/);
+              if (!match) return [128, 128, 128];
+              var parts = match[1].split(/[,\s/]+/).map(Number);
+              return [parts[0] || 0, parts[1] || 0, parts[2] || 0];
+            }
+            var fgRgb = resolveColor("var(--fg, #f8fafc)", "#f8fafc");
+            var surfaceRgb = resolveColor("var(--surface, #14171c)", "#14171c");
+            var accentRgb = resolveColor(accentTokens[accent], "#22c55e");
+            probe.remove();
+
+            function mix(colorA, colorB, amount) {
+              var w = Math.max(0, Math.min(1, amount));
+              return [
+                colorA[0] + (colorB[0] - colorA[0]) * w,
+                colorA[1] + (colorB[1] - colorA[1]) * w,
+                colorA[2] + (colorB[2] - colorA[2]) * w,
+              ];
+            }
+            function rgbString(color) {
+              return (
+                "rgb(" +
+                Math.round(color[0]) +
+                "," +
+                Math.round(color[1]) +
+                "," +
+                Math.round(color[2]) +
+                ")"
+              );
+            }
+
+            // Base mass tone contrasts the background on light and dark
+            // hosts alike (fg-heavy). Lit facets climb toward a pale
+            // accent-tinted white; shadow facets fall toward black.
+            var baseRgb = mix(fgRgb, surfaceRgb, 0.24);
+            var litTarget = mix([255, 255, 255], accentRgb, 0.2);
+            var darkTarget = [8, 9, 11];
+
+            /* ---------------- envelope ---------------- */
+
+            var ENTER_BASE = 0.55;
+            var LEG_BASE = 1.45;
+            var DWELL_BASE = 0.35;
+            var DECAY_BASE = 0.55;
+            var steps = Math.max(0, formRows.length - 1);
+            var MORPH_BASE = steps > 0 ? steps * LEG_BASE + (steps - 1) * DWELL_BASE : 0;
+            var IN_BASE = ENTER_BASE + MORPH_BASE + DECAY_BASE;
+            var OUT_BASE = exit === "none" ? 0 : 0.45;
+
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "5"));
+            var totalBase = IN_BASE + OUT_BASE;
+            var envScale = duration < totalBase ? duration / totalBase : 1;
+            var ENTER = ENTER_BASE * envScale;
+            var LEG = LEG_BASE * envScale;
+            var DWELL = DWELL_BASE * envScale;
+            var DECAY = DECAY_BASE * envScale;
+            var IN = IN_BASE * envScale;
+            var OUT = OUT_BASE * envScale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var OUT_START = IN + HOLD;
+            var MORPH_START = ENTER * 0.55;
+            var MORPH_END = MORPH_START + (MORPH_BASE > 0 ? MORPH_BASE * envScale : 0);
+            var DECAY_END = MORPH_END + DECAY;
+
+            /* ---------------- pure functions of time ---------------- */
+
+            function smooth(s) {
+              // sine in-out, the quiet register's ease.
+              return 0.5 - 0.5 * Math.cos(Math.PI * Math.max(0, Math.min(1, s)));
+            }
+
+            // Form progress p(t): one leg per silhouette step with a dwell
+            // between legs, then (hold_last false) an endless slow breath
+            // between the last two silhouettes. Continuous everywhere.
+            function progressAt(t) {
+              if (steps === 0) return 0;
+              if (t <= MORPH_START) return 0;
+              var local = t - MORPH_START;
+              var span = LEG + DWELL;
+              for (var s = 0; s < steps; s += 1) {
+                var legStart = s * span;
+                if (local < legStart + LEG) {
+                  return s + smooth((local - legStart) / LEG);
+                }
+                if (local < legStart + span) return s + 1;
+              }
+              if (holdLast || steps < 1) return steps;
+              // Breathe between the final two forms: depth 0.45, 6s period,
+              // starting and ending each cycle exactly on the final form.
+              var breathe = t - MORPH_END;
+              return steps - 0.45 * (0.5 - 0.5 * Math.cos((2 * Math.PI * breathe) / 6));
+            }
+
+            // Wobble amplitude a(t): ramps in with the entrance, then decays
+            // to zero before the hold when hold_last is true.
+            function wobbleAmpAt(t) {
+              var ramp = smooth(t / Math.max(0.001, ENTER));
+              if (!holdLast) return ramp;
+              if (t <= MORPH_END) return ramp;
+              return ramp * (1 - smooth((t - MORPH_END) / Math.max(0.001, DECAY)));
+            }
+
+            var WOBBLE_R = 1.6; // radial wobble, viewBox units
+            var WOBBLE_HZ = 0.42;
+
+            function lerp(valueA, valueB, w) {
+              return valueA + (valueB - valueA) * w;
+            }
+
+            // Light arrives from the upper left.
+            var LIGHT_X = -0.62;
+            var LIGHT_Y = -0.78;
+
+            var outerPts = [];
+            for (var oi = 0; oi < OUTER; oi += 1) outerPts.push([0, 0]);
+            var innerPts = [];
+            for (var ii = 0; ii < INNER; ii += 1) innerPts.push([0, 0]);
+            var centerPt = [50, 50];
+
+            function render(t) {
+              var p = progressAt(t);
+              var kA = Math.max(0, Math.min(formRows.length - 1, Math.floor(p)));
+              var kB = Math.min(formRows.length - 1, kA + 1);
+              var w = Math.max(0, Math.min(1, p - kA));
+              var rowA = formRows[kA];
+              var rowB = formRows[kB];
+              var amp = wobbleAmpAt(t) * WOBBLE_R;
+              var cx = lerp(rowA.cx, rowB.cx, w);
+              var cy = lerp(rowA.cy, rowB.cy, w);
+              var rot = (lerp(rowA.rot, rowB.rot, w) * Math.PI) / 180;
+
+              for (var o = 0; o < OUTER; o += 1) {
+                var wobO = amp * Math.sin(2 * Math.PI * (WOBBLE_HZ * t + outerPhase[o]));
+                var radO = lerp(rowA.outerR[o], rowB.outerR[o], w) + wobO;
+                var angO =
+                  ((-90 + o * 20 + lerp(rowA.outerJ[o], rowB.outerJ[o], w)) * Math.PI) / 180 + rot;
+                outerPts[o][0] = cx + radO * Math.cos(angO);
+                outerPts[o][1] = cy + radO * Math.sin(angO);
+              }
+              for (var n = 0; n < INNER; n += 1) {
+                var wobI = amp * 0.7 * Math.sin(2 * Math.PI * (WOBBLE_HZ * t + innerPhase[n]));
+                var radI = lerp(rowA.innerR[n], rowB.innerR[n], w) + wobI;
+                var angI =
+                  ((-70 + n * 40 + lerp(rowA.innerJ[n], rowB.innerJ[n], w)) * Math.PI) / 180 + rot;
+                innerPts[n][0] = cx + radI * Math.cos(angI);
+                innerPts[n][1] = cy + radI * Math.sin(angI);
+              }
+              centerPt[0] = cx;
+              centerPt[1] = cy + amp * 0.4 * Math.sin(2 * Math.PI * (WOBBLE_HZ * t + 0.31));
+
+              for (var fi = 0; fi < facets.length; fi += 1) {
+                var facet = facets[fi];
+                var pts = "";
+                var sumX = 0;
+                var sumY = 0;
+                for (var v = 0; v < 3; v += 1) {
+                  var kind = facet[v * 2];
+                  var index = facet[v * 2 + 1];
+                  var pt =
+                    kind === "o" ? outerPts[index] : kind === "i" ? innerPts[index] : centerPt;
+                  pts += pt[0].toFixed(2) + "," + pt[1].toFixed(2) + (v < 2 ? " " : "");
+                  sumX += pt[0];
+                  sumY += pt[1];
+                }
+                var nx = sumX / 3 - cx;
+                var ny = sumY / 3 - cy;
+                var len = Math.hypot(nx, ny) || 1;
+                // Pseudo-normal: outward direction plus the facet's fixed
+                // tilt. Facets turned toward the upper-left light lift.
+                var shade = (nx / len) * LIGHT_X + (ny / len) * LIGHT_Y + facetTilt[fi];
+                shade = Math.max(-1, Math.min(1, shade));
+                var fill =
+                  shade >= 0
+                    ? mix(baseRgb, litTarget, shade * 0.85)
+                    : mix(baseRgb, darkTarget, -shade * 0.78);
+                var fillString = rgbString(fill);
+                var polygon = polygons[fi];
+                polygon.setAttribute("points", pts);
+                polygon.setAttribute("fill", fillString);
+                polygon.setAttribute("stroke", fillString);
+              }
+            }
+
+            /* ---------------- timeline ---------------- */
+
+            function fireSfx(id, t) {
+              root.dispatchEvent(
+                new CustomEvent("hf:sfx", { detail: { id: id, t: t }, bubbles: true }),
+              );
+            }
+
+            gsap.set(stage, { opacity: 0, scale: 0.94, y: 0 });
+            render(0);
+
+            var tl = gsap.timeline({ paused: true });
+
+            // ONE linear driver owns every vertex and every fill; render is a
+            // pure function of the driver's time.
+            var driver = { t: 0 };
+            tl.fromTo(
+              driver,
+              { t: 0 },
+              {
+                t: duration,
+                duration: duration,
+                ease: "none",
+                onUpdate: function () {
+                  render(driver.t);
+                },
+              },
+              0,
+            );
+
+            // IN: quiet entrance while the wobble ramps up.
+            tl.to(stage, { opacity: 1, duration: ENTER, ease: "power2.out" }, 0);
+            tl.to(stage, { scale: 1, duration: ENTER * 1.4, ease: "power2.out" }, 0);
+
+            tl.call(
+              function () {
+                fireSfx("facet-settle-soft", MORPH_END);
+              },
+              [],
+              MORPH_END,
+            );
+
+            // HOLD: still (hold_last true) or the slow breath, both inside
+            // the driver's pure function. No extra tweens.
+
+            // OUT: only when the exit variable asks for one.
+            if (exit !== "none") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+              if (exit === "up") {
+                tl.to(stage, { y: "-6cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              }
+            }
+
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/facet-morph/registry-item.json b/registry/components/facet-morph/registry-item.json
new file mode 100644
index 0000000000..7dd3706a1d
--- /dev/null
+++ b/registry/components/facet-morph/registry-item.json
@@ -0,0 +1,64 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "facet-morph",
+  "type": "hyperframes:component",
+  "title": "Facet Morph",
+  "description": "A faceted low-poly mass of 36 triangles continuously reshapes between three authored silhouettes (blob, mark, badge) with per-facet flat shading that recomputes as the vertices move. Light reads from the upper left; lit facets lift toward a pale accent-tinted tone while turned-away facets fall toward near-black. One calm continuous morph, then a settled hold.",
+  "tags": ["motion-primitive", "intro", "morph", "low-poly", "svg", "deterministic"],
+  "jobs": ["reveal"],
+  "family": "intros-reveals",
+  "profile": "holdable",
+  "evidence": "Wave L2 frame study: ordinaryfolkco 2001090228958752945 sheet-02, the continuously reshaping faceted mass under a traveling light band",
+  "syncPoints": [{ "id": "form-lock", "phase": "in", "offset": 3.95 }],
+  "files": [
+    {
+      "path": "facet-morph.html",
+      "target": "compositions/components/facet-morph.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "forms",
+      "type": "string",
+      "role": "content",
+      "label": "Forms",
+      "description": "Comma-separated silhouette sequence from blob, mark, badge.",
+      "default": "blob,mark,badge"
+    },
+    {
+      "id": "hold_last",
+      "type": "boolean",
+      "role": "timing",
+      "label": "Hold last",
+      "description": "True settles dead still on the final silhouette; false keeps the mass slowly breathing through the hold.",
+      "default": true
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Tint of the lit facets.",
+      "default": "green",
+      "options": [
+        { "value": "green", "label": "Green" },
+        { "value": "blue", "label": "Blue" },
+        { "value": "violet", "label": "Violet" }
+      ]
+    },
+    {
+      "id": "exit",
+      "type": "enum",
+      "role": "timing",
+      "label": "Exit",
+      "description": "Outgoing transition. None holds the settled mass.",
+      "default": "none",
+      "options": [
+        { "value": "none", "label": "None" },
+        { "value": "fade", "label": "Fade" },
+        { "value": "up", "label": "Up" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/fade-through/demo.html b/registry/components/fade-through/demo.html
new file mode 100644
index 0000000000..439e5935ad
--- /dev/null
+++ b/registry/components/fade-through/demo.html
@@ -0,0 +1,214 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Fade Through - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        font-family: Inter, system-ui, sans-serif;
+        background: #f5f5f4;
+      }
+      .scene {
+        position: absolute;
+        inset: 0;
+        display: grid;
+        place-items: center;
+      }
+      /* Scene A — light neutral */
+      .a {
+        background: #fafafa;
+      }
+      /* Scene B — dark zinc */
+      .b {
+        background: #18181b;
+        opacity: 0;
+      }
+      /* Shared card */
+      .card {
+        width: 820px;
+        border-radius: 16px;
+        padding: 72px 80px 80px;
+        display: flex;
+        flex-direction: column;
+        gap: 32px;
+      }
+      .a .card {
+        background: #ffffff;
+        border: 1px solid #e4e4e7;
+        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.08);
+      }
+      .b .card {
+        background: #27272a;
+        border: 1px solid #3f3f46;
+        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.4);
+      }
+      .badge {
+        display: inline-flex;
+        align-items: center;
+        gap: 10px;
+        font-size: 26px;
+        font-weight: 500;
+        letter-spacing: 0.03em;
+        text-transform: uppercase;
+        width: fit-content;
+        padding: 10px 22px;
+        border-radius: 999px;
+      }
+      .a .badge {
+        background: #f4f4f5;
+        color: #71717a;
+      }
+      .b .badge {
+        background: #3f3f46;
+        color: #a1a1aa;
+      }
+      .badge-dot {
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+      }
+      .a .badge-dot {
+        background: #71717a;
+      }
+      .b .badge-dot {
+        background: #a1a1aa;
+      }
+      .card-title {
+        font-size: 72px;
+        font-weight: 700;
+        line-height: 1.08;
+        letter-spacing: -0.02em;
+        margin: 0;
+      }
+      .a .card-title {
+        color: #18181b;
+      }
+      .b .card-title {
+        color: #fafafa;
+      }
+      .card-body {
+        font-size: 32px;
+        font-weight: 400;
+        line-height: 1.5;
+        color: #71717a;
+      }
+      .b .card-body {
+        color: #71717a;
+      }
+      .divider {
+        height: 1px;
+        background: #e4e4e7;
+        border: none;
+        margin: 0;
+      }
+      .b .divider {
+        background: #3f3f46;
+      }
+      .meta-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+      .meta-label {
+        font-size: 26px;
+        font-weight: 500;
+      }
+      .a .meta-label {
+        color: #71717a;
+      }
+      .b .meta-label {
+        color: #71717a;
+      }
+      .mode-pill {
+        font-size: 26px;
+        font-weight: 600;
+        padding: 10px 28px;
+        border-radius: 999px;
+      }
+      .a .mode-pill {
+        background: #18181b;
+        color: #fafafa;
+      }
+      .b .mode-pill {
+        background: #fafafa;
+        color: #18181b;
+      }
+      .hf-fade-through-wash {
+        position: absolute;
+        inset: 0;
+        opacity: 0;
+        pointer-events: none;
+        background: #fafafa;
+        z-index: 900;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="fade-through-demo"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <!-- Scene A: Light mode -->
+      <div class="scene a hf-fade-through-out">
+        <div class="card">
+          <div class="badge"><span class="badge-dot"></span>Light Mode</div>
+          <h2 class="card-title">Your workspace,<br />beautifully lit.</h2>
+          <p class="card-body">
+            Clean surfaces, crisp type, and just enough contrast to keep you focused all day long.
+          </p>
+          <hr class="divider" />
+          <div class="meta-row">
+            <span class="meta-label">Appearance</span>
+            <span class="mode-pill">Light</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Scene B: Dark mode -->
+      <div class="scene b hf-fade-through-in">
+        <div class="card">
+          <div class="badge"><span class="badge-dot"></span>Dark Mode</div>
+          <h2 class="card-title">Easy on the eyes,<br />night or day.</h2>
+          <p class="card-body">
+            Deep backgrounds, refined contrast, and thoughtful color for late-night sessions.
+          </p>
+          <hr class="divider" />
+          <div class="meta-row">
+            <span class="meta-label">Appearance</span>
+            <span class="mode-pill">Dark</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="hf-fade-through-wash" aria-hidden="true"></div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        tl.to(".hf-fade-through-out", { opacity: 0, duration: 0.45, ease: "power2.inOut" }, 1.3);
+        tl.to(".hf-fade-through-wash", { opacity: 1, duration: 0.35, ease: "power2.inOut" }, 1.3);
+        tl.to(".hf-fade-through-wash", { opacity: 0, duration: 0.45, ease: "power2.inOut" }, 1.65);
+        tl.to(".hf-fade-through-in", { opacity: 1, duration: 0.55, ease: "power2.out" }, 1.65);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["fade-through-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/fade-through/fade-through.html b/registry/components/fade-through/fade-through.html
new file mode 100644
index 0000000000..800c8d6011
--- /dev/null
+++ b/registry/components/fade-through/fade-through.html
@@ -0,0 +1,96 @@
+<!--
+  Fade Through - scene transition primitive.
+
+  Put class="hf-fade-through-out" on the outgoing layer and
+  class="hf-fade-through-in" on the incoming layer. Add the optional wash
+  overlay below when you want a brighter mid-transition frame.
+
+  Variables. The wash is the only surface this primitive paints, so all three
+  describe it. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result as a custom property
+  the CSS above consumes. The timeline recipe below is untouched by them.
+
+    - wash (paper | white | ink | accent, default paper): the colour of the
+      mid-transition frame. paper still resolves through
+      --hf-fade-through-wash, so an existing override keeps working; accent
+      rides --accent.
+    - strength (number 0.1 to 1, default 1): how far the wash is allowed to
+      cover at its peak. 1 is a full flash, 0.3 a light veil over the cut.
+    - shape (flat | bloom, default flat): flat fills the frame evenly, bloom
+      concentrates the wash in the centre and falls off to the edges.
+
+  On every default the result is identical to the original: a flat, fully
+  opaque #f8f5ec wash.
+-->
+
+<div
+  class="hf-fade-through-wash"
+  aria-hidden="true"
+  data-composition-variables='[
+    { "id": "wash", "type": "enum", "role": "style", "label": "Wash", "description": "Colour of the mid-transition frame. Paper resolves through --hf-fade-through-wash, accent rides --accent.", "default": "paper", "options": [{ "value": "paper", "label": "Paper" }, { "value": "white", "label": "White" }, { "value": "ink", "label": "Ink" }, { "value": "accent", "label": "Accent" }] },
+    { "id": "strength", "type": "number", "role": "style", "label": "Strength", "description": "How far the wash covers at its peak. 1 is a full flash, 0.3 a light veil.", "default": 1, "min": 0.1, "max": 1, "step": 0.05 },
+    { "id": "shape", "type": "enum", "role": "style", "label": "Shape", "description": "Flat fills the frame evenly, bloom concentrates the wash in the centre.", "default": "flat", "options": [{ "value": "flat", "label": "Flat" }, { "value": "bloom", "label": "Bloom" }] }
+  ]'
+></div>
+
+<style>
+  .hf-fade-through-in {
+    opacity: 0;
+  }
+  .hf-fade-through-wash {
+    position: absolute;
+    inset: 0;
+    opacity: 0;
+    pointer-events: none;
+    background: var(--hf-fade-through-paint, var(--hf-fade-through-wash, #f8f5ec));
+    filter: opacity(var(--hf-fade-through-strength, 1));
+    z-index: 900;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    var washes = {
+      paper: "var(--hf-fade-through-wash, #f8f5ec)",
+      white: "#ffffff",
+      ink: "#0b0b0f",
+      accent: "var(--accent, #38bdf8)",
+    };
+
+    var wash = Object.prototype.hasOwnProperty.call(washes, vars.wash) ? vars.wash : "paper";
+    var shape = vars.shape === "bloom" ? "bloom" : "flat";
+
+    var strength = parseFloat(vars.strength);
+    if (!isFinite(strength)) strength = 1;
+    strength = Math.min(1, Math.max(0.1, strength));
+
+    var colour = washes[wash];
+    var paint =
+      shape === "bloom"
+        ? "radial-gradient(circle at 50% 50%, " + colour + " 0%, transparent 72%)"
+        : colour;
+
+    var overlays = document.querySelectorAll(".hf-fade-through-wash");
+    for (var i = 0; i < overlays.length; i += 1) {
+      overlays[i].style.setProperty("--hf-fade-through-paint", paint);
+      overlays[i].style.setProperty("--hf-fade-through-strength", String(strength));
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+
+  tl.to(".hf-fade-through-out", { opacity: 0, duration: 0.45, ease: "power2.inOut" }, startTime);
+  tl.to(".hf-fade-through-wash", { opacity: 1, duration: 0.35, ease: "power2.inOut" }, startTime);
+  tl.to(".hf-fade-through-wash", { opacity: 0, duration: 0.45, ease: "power2.inOut" }, startTime + 0.35);
+  tl.to(".hf-fade-through-in", { opacity: 1, duration: 0.55, ease: "power2.out" }, startTime + 0.35);
+-->
diff --git a/registry/components/fade-through/registry-item.json b/registry/components/fade-through/registry-item.json
new file mode 100644
index 0000000000..57b71aedd4
--- /dev/null
+++ b/registry/components/fade-through/registry-item.json
@@ -0,0 +1,57 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "fade-through",
+  "type": "hyperframes:component",
+  "title": "Fade Through",
+  "description": "A calm transition primitive that fades one layer out, passes through a wash, and reveals the next layer",
+  "tags": ["motion-primitive", "transition", "fade", "scene"],
+  "files": [
+    {
+      "path": "fade-through.html",
+      "target": "compositions/components/fade-through.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "wash",
+      "type": "enum",
+      "role": "style",
+      "label": "Wash",
+      "description": "Colour of the mid-transition frame. Paper resolves through --hf-fade-through-wash, accent rides --accent.",
+      "default": "paper",
+      "options": [
+        { "value": "paper", "label": "Paper" },
+        { "value": "white", "label": "White" },
+        { "value": "ink", "label": "Ink" },
+        { "value": "accent", "label": "Accent" }
+      ]
+    },
+    {
+      "id": "strength",
+      "type": "number",
+      "role": "style",
+      "label": "Strength",
+      "description": "How far the wash covers at its peak. 1 is a full flash, 0.3 a light veil.",
+      "default": 1,
+      "min": 0.1,
+      "max": 1,
+      "step": 0.05
+    },
+    {
+      "id": "shape",
+      "type": "enum",
+      "role": "style",
+      "label": "Shape",
+      "description": "Flat fills the frame evenly, bloom concentrates the wash in the centre.",
+      "default": "flat",
+      "options": [
+        { "value": "flat", "label": "Flat" },
+        { "value": "bloom", "label": "Bloom" }
+      ]
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/fade-through.png"
+  }
+}
diff --git a/registry/components/focus-blur-resolve/demo.html b/registry/components/focus-blur-resolve/demo.html
new file mode 100644
index 0000000000..b44494049d
--- /dev/null
+++ b/registry/components/focus-blur-resolve/demo.html
@@ -0,0 +1,91 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Focus Blur Resolve - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        min-width: 900px;
+        min-height: 500px;
+        padding: 64px;
+        /* ponytail: scale wrapper (not a GSAP target) to fill ~65% of frame */
+        transform: scale(2.8);
+      }
+      .hf-remocn-focus-blur-resolve {
+        color: #18181b;
+        font-family: Inter, system-ui, sans-serif;
+        font-weight: 900;
+        letter-spacing: -0.04em;
+      }
+      .hf-remocn-focus-blur-resolve {
+        display: inline-flex;
+        gap: 12px;
+        font-size: 56px;
+        line-height: 1;
+      }
+      .hf-remocn-focus-blur-resolve span {
+        display: inline-block;
+        transform: translate(var(--hf-word-x, 0px), var(--hf-word-y, 0px))
+          scale(var(--hf-word-scale, 1));
+        filter: blur(var(--hf-word-blur, 0px));
+        will-change: transform, filter, opacity;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="focus-blur-resolve-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-focus-blur-resolve"><span>Crystal</span><span>clear</span></div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-focus-blur-resolve span",
+          { opacity: 0, "--hf-word-scale": 1.08, "--hf-word-blur": "16px" },
+          {
+            opacity: 1,
+            "--hf-word-scale": 1,
+            "--hf-word-blur": "0px",
+            duration: 0.52,
+            stagger: 0.05,
+            ease: "power3.out",
+          },
+          startTime,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["focus-blur-resolve-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/focus-blur-resolve/focus-blur-resolve.html b/registry/components/focus-blur-resolve/focus-blur-resolve.html
new file mode 100644
index 0000000000..60d5b58273
--- /dev/null
+++ b/registry/components/focus-blur-resolve/focus-blur-resolve.html
@@ -0,0 +1,91 @@
+<!--
+  Focus Blur Resolve - remocn typography primitive for HyperFrames.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result as a custom property
+  the CSS consumes. The timeline recipe below is untouched by them: it keeps
+  driving one scale and one blur, and these decide how big the words are, what
+  colour they resolve to, and how deep the blur they resolve from goes.
+
+    - tone (ink | paper | accent, default ink): word colour. ink is near-black
+      for light frames, paper near-white for dark ones, accent rides --brand.
+    - size (compact | standard | display, default standard): type size, 40px,
+      56px or 84px.
+    - blur (soft | standard | heavy, default standard): scales the blur radius,
+      so the pull starts as a light haze or a full smear over the same run.
+
+  On every default the result is identical to the original: near-black 56px
+  words resolving out of a 16px blur.
+-->
+
+<div
+  class="hf-remocn-focus-blur-resolve"
+  data-composition-variables='[
+    { "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Word colour: ink for light frames, paper for dark ones, accent rides --brand.", "default": "ink", "options": [{ "value": "ink", "label": "Ink" }, { "value": "paper", "label": "Paper" }, { "value": "accent", "label": "Accent" }] },
+    { "id": "size", "type": "enum", "role": "style", "label": "Size", "description": "Type size of the words, from a caption-scale line to a full display card.", "default": "standard", "options": [{ "value": "compact", "label": "Compact" }, { "value": "standard", "label": "Standard" }, { "value": "display", "label": "Display" }] },
+    { "id": "blur", "type": "enum", "role": "style", "label": "Blur", "description": "Scales the blur radius the timeline drives, so the focus pull starts as a light haze or a full smear.", "default": "standard", "options": [{ "value": "soft", "label": "Soft" }, { "value": "standard", "label": "Standard" }, { "value": "heavy", "label": "Heavy" }] }
+  ]'
+>
+  <span>Crystal</span><span>clear</span>
+</div>
+
+<style>
+  .hf-remocn-focus-blur-resolve {
+    color: var(--hf-word-color, #18181b);
+    font-family: Inter, system-ui, sans-serif;
+    font-weight: 900;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-focus-blur-resolve {
+    display: inline-flex;
+    gap: 12px;
+    font-size: var(--hf-word-size, 56px);
+    line-height: 1;
+  }
+  .hf-remocn-focus-blur-resolve span {
+    display: inline-block;
+    transform: translate(var(--hf-word-x, 0px), var(--hf-word-y, 0px))
+      scale(var(--hf-word-scale, 1));
+    filter: blur(calc(var(--hf-word-blur, 0px) * var(--hf-word-blur-scale, 1)));
+    will-change: transform, filter, opacity;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var tones = { ink: "#18181b", paper: "#fafafa", accent: "var(--brand, #34d399)" };
+    var sizes = { compact: "40px", standard: "56px", display: "84px" };
+    var blurScales = { soft: 0.45, standard: 1, heavy: 2.2 };
+
+    var tone = tones[pick(tones, vars.tone, "ink")];
+    var size = sizes[pick(sizes, vars.size, "standard")];
+    var blurScale = blurScales[pick(blurScales, vars.blur, "standard")];
+
+    var roots = document.querySelectorAll(".hf-remocn-focus-blur-resolve");
+    for (var i = 0; i < roots.length; i += 1) {
+      roots[i].style.setProperty("--hf-word-color", tone);
+      roots[i].style.setProperty("--hf-word-size", size);
+      roots[i].style.setProperty("--hf-word-blur-scale", String(blurScale));
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-focus-blur-resolve span', { opacity: 0, '--hf-word-scale': 1.08, '--hf-word-blur': '16px' }, { opacity: 1, '--hf-word-scale': 1, '--hf-word-blur': '0px', duration: 0.52, stagger: 0.05, ease: 'power3.out' }, startTime);
+-->
diff --git a/registry/components/focus-blur-resolve/registry-item.json b/registry/components/focus-blur-resolve/registry-item.json
new file mode 100644
index 0000000000..285d362098
--- /dev/null
+++ b/registry/components/focus-blur-resolve/registry-item.json
@@ -0,0 +1,86 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "focus-blur-resolve",
+  "type": "hyperframes:component",
+  "title": "Focus Blur Resolve",
+  "description": "A premium focus pull from heavy blur to crisp text, then a soft blur-out exit.",
+  "tags": ["motion-primitive", "remocn-port", "typography"],
+  "files": [
+    {
+      "path": "focus-blur-resolve.html",
+      "target": "compositions/components/focus-blur-resolve.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "tone",
+      "type": "enum",
+      "role": "style",
+      "label": "Tone",
+      "description": "Word colour: ink for light frames, paper for dark ones, accent rides --brand.",
+      "default": "ink",
+      "options": [
+        {
+          "value": "ink",
+          "label": "Ink"
+        },
+        {
+          "value": "paper",
+          "label": "Paper"
+        },
+        {
+          "value": "accent",
+          "label": "Accent"
+        }
+      ]
+    },
+    {
+      "id": "size",
+      "type": "enum",
+      "role": "style",
+      "label": "Size",
+      "description": "Type size of the words, from a caption-scale line to a full display card.",
+      "default": "standard",
+      "options": [
+        {
+          "value": "compact",
+          "label": "Compact"
+        },
+        {
+          "value": "standard",
+          "label": "Standard"
+        },
+        {
+          "value": "display",
+          "label": "Display"
+        }
+      ]
+    },
+    {
+      "id": "blur",
+      "type": "enum",
+      "role": "style",
+      "label": "Blur",
+      "description": "Scales the blur radius the timeline drives, so the focus pull starts as a light haze or a full smear.",
+      "default": "standard",
+      "options": [
+        {
+          "value": "soft",
+          "label": "Soft"
+        },
+        {
+          "value": "standard",
+          "label": "Standard"
+        },
+        {
+          "value": "heavy",
+          "label": "Heavy"
+        }
+      ]
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/focus-blur-resolve.png"
+  }
+}
diff --git a/registry/components/focus-rack/demo.html b/registry/components/focus-rack/demo.html
new file mode 100644
index 0000000000..09f3e46c8c
--- /dev/null
+++ b/registry/components/focus-rack/demo.html
@@ -0,0 +1,86 @@
+<!doctype html>
+<!--
+  focus-rack demo. This standalone composition mounts focus-rack.html through
+  data-composition-src. Non-default labels and accent prove that all variables
+  flow through the mount while the primitive remains sized by its host box.
+-->
+<html lang="en" data-composition-id="focus-rack-demo" data-composition-duration="3.5">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Focus Rack Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0b0c0e;
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --surface: #1a2030;
+        --border: #394155;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-body: Inter, system-ui, sans-serif;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 44%, #211b32 0%, #0b0c0e 68%);
+      }
+
+      .mount-card {
+        position: absolute;
+        left: 12%;
+        top: 14%;
+        width: 76%;
+        height: 72%;
+        overflow: hidden;
+        border: 1px solid rgba(255, 255, 255, 0.14);
+        border-radius: 30px;
+        background: var(--bg);
+        box-shadow: 0 48px 120px rgba(0, 0, 0, 0.52);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="focus-rack-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="3.5"
+      data-fps="30"
+    >
+      <div
+        id="focus-rack-mount"
+        class="mount-card clip"
+        data-composition-id="focus-rack"
+        data-composition-src="./focus-rack.html"
+        data-variable-values='{"label_a":"Working copy","label_b":"Approved","accent":"violet"}'
+        data-start="0"
+        data-duration="3.5"
+        data-track-index="0"
+        data-width="1459"
+        data-height="778"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["focus-rack-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/focus-rack/focus-rack.html b/registry/components/focus-rack/focus-rack.html
new file mode 100644
index 0000000000..eba8bfae30
--- /dev/null
+++ b/registry/components/focus-rack/focus-rack.html
@@ -0,0 +1,330 @@
+<!doctype html>
+<!--
+  focus-rack: HyperFrames video primitive (camera / holdable / emphasize)
+
+  Concept: two cards sit at different apparent depths. Card A begins sharp
+  and near while card B is blurred and dim. Focus moves to card B exactly
+  once, with blur, scale, and parallax changing together over 0.7 seconds.
+
+  Variables:
+    - label_a (string, default "Draft"): foreground card label.
+    - label_b (string, default "Published"): background card label.
+    - accent (green | blue | violet, default "blue"): focus highlight.
+
+  Envelope (fixed IN/OUT, elastic HOLD only, never gsap.timeScale()):
+    IN_BASE  = 1.32s  stage reveal, initial focus beat, then one 0.7s rack
+    HOLD     = elastic card B remains sharp with a restrained depth drift
+    OUT_BASE = 0.42s  completed focus state fades from the stage
+    If D is shorter than IN_BASE plus OUT_BASE, both fixed phases compress
+    proportionally and HOLD becomes zero. The rack still occurs exactly once.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, has no data-width or data-height,
+  and registers one paused timeline under the hardcoded focus-rack id.
+-->
+<html
+  lang="en"
+  data-composition-id="focus-rack"
+  data-composition-duration="3.5"
+  data-composition-variables='[
+    { "id": "label_a", "type": "string", "role": "content", "label": "Card A label", "description": "Label on the card that begins in focus.", "default": "Draft" },
+    { "id": "label_b", "type": "string", "role": "content", "label": "Card B label", "description": "Label on the card that receives focus.", "default": "Published" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Highlight color shared by both cards.", "default": "blue", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Focus Rack</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="focus-rack" data-duration="3.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            background: var(--bg, #0b0c0e);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .fr-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            background: radial-gradient(
+              ellipse at 52% 48%,
+              color-mix(in srgb, var(--fr-accent) 12%, var(--surface, #18202d)) 0%,
+              var(--bg, #0b0c0e) 72%
+            );
+          }
+
+          .fr-stage {
+            position: absolute;
+            inset: 0;
+            perspective: 120cqw;
+            opacity: 0;
+          }
+
+          .fr-card {
+            --fr-blur: 0;
+            position: absolute;
+            top: 21cqh;
+            width: 39cqw;
+            height: 58cqh;
+            padding: 4.2cqh 3.4cqw;
+            overflow: hidden;
+            border: 0.1cqw solid color-mix(in srgb, var(--fr-accent) 28%, #cbd5e1);
+            border-radius: 2.4cqmin;
+            background: linear-gradient(145deg, #ffffff, #e9edf4);
+            box-shadow:
+              0 4.4cqh 10cqh rgba(0, 0, 0, 0.42),
+              inset 0 0.12cqh 0 rgba(255, 255, 255, 0.86);
+            color: #101827;
+            filter: blur(calc(var(--fr-blur) * 1cqw));
+            transform-origin: 50% 50%;
+            will-change: transform, opacity, filter;
+          }
+
+          .fr-card-a {
+            left: 8cqw;
+          }
+
+          .fr-card-b {
+            right: 8cqw;
+          }
+
+          .fr-card-top {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+          }
+
+          .fr-kicker {
+            display: flex;
+            align-items: center;
+            gap: 0.8cqw;
+            color: #667085;
+            font-size: 1.15cqw;
+            font-weight: 760;
+            letter-spacing: 0.13em;
+            line-height: 1;
+            text-transform: uppercase;
+          }
+
+          .fr-dot {
+            width: 0.75cqw;
+            aspect-ratio: 1;
+            border-radius: 50%;
+            background: var(--fr-accent);
+            box-shadow: 0 0 1.4cqw color-mix(in srgb, var(--fr-accent) 52%, transparent);
+          }
+
+          .fr-index {
+            color: #98a2b3;
+            font-family: var(--font-mono, ui-monospace, monospace);
+            font-size: 1.05cqw;
+            font-weight: 700;
+          }
+
+          .fr-label {
+            margin-top: 7.4cqh;
+            max-width: 100%;
+            overflow: hidden;
+            color: #101827;
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: 4.8cqw;
+            font-weight: 790;
+            letter-spacing: -0.055em;
+            line-height: 0.94;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          .fr-rule {
+            width: 100%;
+            height: 0.35cqh;
+            margin-top: 5cqh;
+            border-radius: 99cqh;
+            background: color-mix(in srgb, var(--fr-accent) 76%, #d0d5dd);
+          }
+
+          .fr-copy {
+            display: grid;
+            gap: 1.4cqh;
+            margin-top: 3.2cqh;
+          }
+
+          .fr-line {
+            display: block;
+            height: 1.15cqh;
+            border-radius: 99cqh;
+            background: #c9d0dc;
+          }
+
+          .fr-line:last-child {
+            width: 68%;
+          }
+        </style>
+
+        <div
+          id="focus-rack-clip"
+          class="fr-clip clip"
+          data-start="0"
+          data-duration="3.5"
+          data-track-index="0"
+        >
+          <div class="fr-stage">
+            <article class="fr-card fr-card-a">
+              <div class="fr-card-top">
+                <span class="fr-kicker"><span class="fr-dot"></span>Workspace</span>
+                <span class="fr-index">A</span>
+              </div>
+              <div class="fr-label fr-label-a"></div>
+              <div class="fr-rule"></div>
+              <div class="fr-copy" aria-hidden="true">
+                <span class="fr-line"></span>
+                <span class="fr-line"></span>
+              </div>
+            </article>
+
+            <article class="fr-card fr-card-b">
+              <div class="fr-card-top">
+                <span class="fr-kicker"><span class="fr-dot"></span>Workspace</span>
+                <span class="fr-index">B</span>
+              </div>
+              <div class="fr-label fr-label-b"></div>
+              <div class="fr-rule"></div>
+              <div class="fr-copy" aria-hidden="true">
+                <span class="fr-line"></span>
+                <span class="fr-line"></span>
+              </div>
+            </article>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".fr-stage");
+            var cardA = root.querySelector(".fr-card-a");
+            var cardB = root.querySelector(".fr-card-b");
+            var labelA = root.querySelector(".fr-label-a");
+            var labelB = root.querySelector(".fr-label-b");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var accent = vars.accent === "green" || vars.accent === "violet" ? vars.accent : "blue";
+            var accents = { green: "#34d399", blue: "#60a5fa", violet: "#a78bfa" };
+
+            labelA.textContent = vars.label_a == null ? "Draft" : String(vars.label_a);
+            labelB.textContent = vars.label_b == null ? "Published" : String(vars.label_b);
+            root.style.setProperty("--fr-accent", accents[accent]);
+
+            var IN_BASE = 1.32;
+            var OUT_BASE = 0.42;
+            var STAGE_IN_BASE = 0.38;
+            var RACK_AT_BASE = 0.62;
+            var RACK_DURATION_BASE = 0.7;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "3.5"));
+            var fixedDuration = IN_BASE + OUT_BASE;
+            var phaseScale = duration < fixedDuration ? duration / fixedDuration : 1;
+            var IN = IN_BASE * phaseScale;
+            var OUT = OUT_BASE * phaseScale;
+            var STAGE_IN = STAGE_IN_BASE * phaseScale;
+            var RACK_AT = RACK_AT_BASE * phaseScale;
+            var RACK_DURATION = RACK_DURATION_BASE * phaseScale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var HOLD_START = IN;
+            var OUT_START = IN + HOLD;
+
+            var tl = gsap.timeline({ paused: true });
+
+            tl.set(stage, { opacity: 0 }, 0);
+            tl.set(
+              cardA,
+              {
+                "--fr-blur": 0,
+                opacity: 1,
+                x: "0cqw",
+                y: "-0.5cqh",
+                scale: 1.045,
+                rotation: -3,
+              },
+              0,
+            );
+            tl.set(
+              cardB,
+              {
+                "--fr-blur": 0.48,
+                opacity: 0.52,
+                x: "1.6cqw",
+                y: "0.8cqh",
+                scale: 0.93,
+                rotation: 2.4,
+              },
+              0,
+            );
+
+            tl.to(stage, { opacity: 1, duration: STAGE_IN, ease: "power2.out" }, 0);
+
+            tl.to(
+              cardA,
+              {
+                "--fr-blur": 0.48,
+                opacity: 0.5,
+                x: "-1.4cqw",
+                y: "0.8cqh",
+                scale: 0.94,
+                rotation: -1.6,
+                duration: RACK_DURATION,
+                ease: "sine.inOut",
+              },
+              RACK_AT,
+            );
+            tl.to(
+              cardB,
+              {
+                "--fr-blur": 0,
+                opacity: 1,
+                x: "-1.6cqw",
+                y: "-0.4cqh",
+                scale: 1.04,
+                rotation: 1.3,
+                duration: RACK_DURATION,
+                ease: "sine.inOut",
+              },
+              RACK_AT,
+            );
+
+            if (HOLD > 0) {
+              tl.to(cardA, { y: "1.15cqh", duration: HOLD, ease: "sine.inOut" }, HOLD_START);
+              tl.to(cardB, { y: "-0.75cqh", duration: HOLD, ease: "sine.inOut" }, HOLD_START);
+            }
+
+            tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["focus-rack"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/focus-rack/registry-item.json b/registry/components/focus-rack/registry-item.json
new file mode 100644
index 0000000000..f5b96f705b
--- /dev/null
+++ b/registry/components/focus-rack/registry-item.json
@@ -0,0 +1,50 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "focus-rack",
+  "type": "hyperframes:component",
+  "title": "Focus Rack",
+  "description": "Focus shifts once between two cards at different apparent depths through synchronized blur, dimming, scale, and parallax.",
+  "tags": ["motion-primitive", "camera", "focus", "focus-rack", "depth", "parallax", "emphasize"],
+  "jobs": ["emphasize"],
+  "family": "camera",
+  "profile": "holdable",
+  "evidence": "Wave G U17 focus-rack specification",
+  "files": [
+    {
+      "path": "focus-rack.html",
+      "target": "compositions/components/focus-rack.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "label_a",
+      "type": "string",
+      "role": "content",
+      "label": "Card A label",
+      "description": "Label on the card that begins in focus.",
+      "default": "Draft"
+    },
+    {
+      "id": "label_b",
+      "type": "string",
+      "role": "content",
+      "label": "Card B label",
+      "description": "Label on the card that receives focus.",
+      "default": "Published"
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Highlight color shared by both cards.",
+      "default": "blue",
+      "options": [
+        { "value": "green", "label": "Green" },
+        { "value": "blue", "label": "Blue" },
+        { "value": "violet", "label": "Violet" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/focus-swap/demo.html b/registry/components/focus-swap/demo.html
new file mode 100644
index 0000000000..8b8df8e1a6
--- /dev/null
+++ b/registry/components/focus-swap/demo.html
@@ -0,0 +1,100 @@
+<!doctype html>
+<!--
+  focus-swap demo: standalone 1920x1080 composition that mounts the primitive
+  through data-composition-src. The host owns the stage and mount dimensions;
+  focus-swap.html owns only the attention shift inside that box.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Focus Swap - Demo</title>
+    <style>
+      :root {
+        --bg: #070a12;
+        --fg: #f8fafc;
+        --muted: #94a3b8;
+        --surface: #151c2c;
+        --border: #34405a;
+        --brand: #e4e4e7;
+        --accent: #e4e4e7;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-body: Inter, system-ui, sans-serif;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        --radius: 22px;
+        --space-1: 8px;
+        --space-2: 16px;
+        --space-3: 32px;
+        --dur-beat: 0.4s;
+        --ease-standard: cubic-bezier(0.215, 0.61, 0.355, 1);
+      }
+
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg);
+      }
+
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(
+          ellipse at 50% 45%,
+          color-mix(in srgb, var(--surface) 78%, var(--bg)),
+          var(--bg) 72%
+        );
+      }
+
+      .mount-card {
+        width: 70%;
+        height: 60%;
+        left: 15%;
+        top: 20%;
+        overflow: hidden;
+        border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
+        border-radius: calc(var(--radius) * 1.4);
+        box-shadow: 0 40px 90px color-mix(in srgb, var(--bg) 78%, transparent);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="focus-swap-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="1.5"
+      data-fps="30"
+    >
+      <div
+        id="focus-swap-mount"
+        class="mount-card clip"
+        data-composition-id="focus-swap"
+        data-composition-src="./focus-swap.html"
+        data-variable-values='{"focus":"b","blurPx":6,"dim":0.5}'
+        data-start="0"
+        data-duration="1.5"
+        data-track-index="0"
+        data-width="1344"
+        data-height="648"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["focus-swap-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/focus-swap/focus-swap.html b/registry/components/focus-swap/focus-swap.html
new file mode 100644
index 0000000000..4794462d72
--- /dev/null
+++ b/registry/components/focus-swap/focus-swap.html
@@ -0,0 +1,281 @@
+<!doctype html>
+<!--
+  focus-swap: HyperFrames video primitive (ui-props / holdable / demonstrate)
+
+  Concept: attention moves between two side-by-side cards. The card losing
+  focus recedes to 0.92 scale, softens, and dims while the other card advances
+  to full scale, sharpness, and opacity. Both sides move together as one clean
+  swap.
+
+  Compiled-from evidence: launches-motion-vocabulary.md section 3.6 identifies
+  blur-focus / defocus in 14 of 18 production launches and names focus-swap as
+  a high-frequency missing primitive for blur + opacity + optional scale.
+
+  Use when: directing the viewer from one product state, option, or result to
+  another without moving either element out of its established layout.
+
+  Variables:
+    - focus ("a" | "b", default "b"): the card that ends focused.
+    - blurPx (number, default 6): blur applied to the unfocused card.
+    - dim (number from 0 to 1, default 0.5): unfocused card opacity.
+
+  Envelope (holdable):
+    IN = 0.90s at the standard duration, including a 0.20s readable lead.
+    HOLD = elastic and deliberately still after focus lands.
+    OUT = none; the host composition owns the cut or exit.
+    For durations under 0.90s, the lead and swap compress to finish by D.
+
+  Sync point: focus-landed at 0.90s into IN at the standard duration. It
+  compresses with IN only when D is shorter than 0.90s and never enters HOLD.
+
+  Sound: none. This continuous attention shift has no discrete impact cue.
+
+  Mount contract: this is a template-wrapped sub-composition. The runtime
+  clones only template contents. #root has no data-width or data-height and
+  fills the host-owned box with position:absolute, inset:0, and
+  container-type:size. The paused GSAP timeline is registered under the
+  hardcoded composition id "focus-swap".
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "focus", "type": "enum", "role": "motion", "label": "Final focus", "description": "Card that ends sharp, full-size, and fully opaque.", "default": "b", "options": [{ "value": "a", "label": "Card A" }, { "value": "b", "label": "Card B" }] },
+    { "id": "blurPx", "type": "number", "role": "style", "label": "Unfocused blur", "description": "Blur applied to the card outside the viewer focus.", "default": 6, "min": 0, "max": 20, "step": 1, "unit": "px" },
+    { "id": "dim", "type": "number", "role": "style", "label": "Unfocused opacity", "description": "Opacity of the card outside the viewer focus.", "default": 0.5, "min": 0, "max": 1, "step": 0.05 }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Focus Swap</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="focus-swap" data-duration="1.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            background: var(--bg);
+            color: var(--fg);
+            font-family: var(--font-body);
+          }
+
+          .fs-clip {
+            width: 100%;
+            height: 100%;
+            display: grid;
+            place-items: center;
+            padding: 7cqh 6cqw;
+          }
+
+          .fs-pair {
+            width: 100%;
+            height: min(72cqh, 52cqw);
+            display: grid;
+            grid-template-columns: repeat(2, minmax(0, 1fr));
+            gap: 4cqw;
+            align-items: stretch;
+          }
+
+          /* EDIT ZONE: visual payload only. Keep the card frames and their
+             initial states transform-free because GSAP owns scale and blur. */
+          .fs-card {
+            min-width: 0;
+            position: relative;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            padding: 5cqh 3.2cqw;
+            overflow: hidden;
+            border: 0.16cqw solid var(--border);
+            border-radius: var(--radius);
+            background: var(--surface);
+            box-shadow: 0 2.2cqh 5cqh color-mix(in srgb, var(--bg) 72%, transparent);
+            transform-origin: center;
+            will-change: transform, filter, opacity;
+            /* Both cards are the same placeholder material. Which one holds
+               attention is said by blur, scale, and opacity, never by hue. */
+            --fs-card-accent: color-mix(in srgb, var(--fg) 72%, var(--surface));
+          }
+
+          .fs-card::before {
+            content: "";
+            position: absolute;
+            inset: 0 0 auto;
+            height: 0.75cqh;
+            background: var(--fs-card-accent);
+          }
+
+          .fs-card-head {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: var(--space-2);
+          }
+
+          .fs-card-letter {
+            display: grid;
+            place-items: center;
+            width: 5cqw;
+            aspect-ratio: 1;
+            border-radius: 50%;
+            background: color-mix(in srgb, var(--fg) 13%, var(--surface));
+            color: var(--fg);
+            font-family: var(--font-mono);
+            font-size: 2.3cqw;
+            font-weight: 700;
+          }
+
+          .fs-status {
+            color: var(--muted);
+            font-family: var(--font-mono);
+            font-size: 1.25cqw;
+            letter-spacing: 0.12em;
+            text-transform: uppercase;
+          }
+
+          .fs-copy {
+            display: grid;
+            gap: var(--space-1);
+          }
+
+          .fs-title {
+            color: var(--fg);
+            font-family: var(--font-display);
+            font-size: 3.4cqw;
+            font-weight: 680;
+            line-height: 1;
+            letter-spacing: -0.025em;
+          }
+
+          .fs-detail {
+            color: var(--muted);
+            font-size: 1.45cqw;
+            line-height: 1.35;
+          }
+
+          .fs-meter {
+            height: 1.1cqh;
+            overflow: hidden;
+            border-radius: var(--radius);
+            background: color-mix(in srgb, var(--border) 60%, transparent);
+          }
+
+          .fs-meter-fill {
+            width: var(--fs-meter-width);
+            height: 100%;
+            border-radius: inherit;
+            background: var(--fs-card-accent);
+          }
+        </style>
+
+        <div class="fs-clip clip" data-start="0" data-duration="1.5" data-track-index="0">
+          <div class="fs-pair">
+            <article class="fs-card" data-focus-card="a" aria-label="Card A, plan">
+              <div class="fs-card-head">
+                <span class="fs-card-letter">A</span>
+                <span class="fs-status">Plan</span>
+              </div>
+              <div class="fs-copy">
+                <h2 class="fs-title">Shape the idea</h2>
+                <p class="fs-detail">Define the brief and align the team.</p>
+              </div>
+              <div class="fs-meter" aria-hidden="true">
+                <div class="fs-meter-fill" style="--fs-meter-width: 58%"></div>
+              </div>
+            </article>
+
+            <article class="fs-card" data-focus-card="b" aria-label="Card B, launch">
+              <div class="fs-card-head">
+                <span class="fs-card-letter">B</span>
+                <span class="fs-status">Launch</span>
+              </div>
+              <div class="fs-copy">
+                <h2 class="fs-title">Ship the result</h2>
+                <p class="fs-detail">Move from approved work to live impact.</p>
+              </div>
+              <div class="fs-meter" aria-hidden="true">
+                <div class="fs-meter-fill" style="--fs-meter-width: 86%"></div>
+              </div>
+            </article>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var cardA = root.querySelector('[data-focus-card="a"]');
+            var cardB = root.querySelector('[data-focus-card="b"]');
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            // INVARIANT: focus is the only owner of which card advances and
+            // which recedes. Invalid input resolves to the declared default.
+            var targetIsB = vars.focus !== "a";
+            var initialFocused = targetIsB ? cardA : cardB;
+            var targetFocused = targetIsB ? cardB : cardA;
+
+            var rawBlur = Number(vars.blurPx);
+            var blurPx = Number.isFinite(rawBlur) ? Math.max(0, Math.min(20, rawBlur)) : 6;
+            var rawDim = Number(vars.dim);
+            var dim = Number.isFinite(rawDim) ? Math.max(0, Math.min(1, rawDim)) : 0.5;
+            var blurred = "blur(" + blurPx + "px)";
+            var sharp = "blur(0px)";
+
+            // RETIME RANGE: keep the standard 0.20s lead and 0.70s swap. Only
+            // short host durations compress them so focus always lands by D.
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "1.5"));
+            var SWAP_START = Math.min(0.2, duration * 0.2);
+            var SWAP_DURATION = Math.min(0.7, Math.max(0.001, duration - SWAP_START));
+
+            gsap.set(initialFocused, { opacity: 1, scale: 1, filter: sharp });
+            gsap.set(targetFocused, { opacity: dim, scale: 0.92, filter: blurred });
+
+            var tl = gsap.timeline({ paused: true });
+            tl.to(
+              initialFocused,
+              {
+                opacity: dim,
+                scale: 0.92,
+                filter: blurred,
+                duration: SWAP_DURATION,
+                ease: "power2.out",
+              },
+              SWAP_START,
+            );
+            tl.to(
+              targetFocused,
+              {
+                opacity: 1,
+                scale: 1,
+                filter: sharp,
+                duration: SWAP_DURATION,
+                ease: "power2.out",
+              },
+              SWAP_START,
+            );
+
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines["focus-swap"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/focus-swap/registry-item.json b/registry/components/focus-swap/registry-item.json
new file mode 100644
index 0000000000..f65c762a4e
--- /dev/null
+++ b/registry/components/focus-swap/registry-item.json
@@ -0,0 +1,57 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "focus-swap",
+  "type": "hyperframes:component",
+  "title": "Focus Swap",
+  "description": "Moves attention between two side-by-side cards as one recedes with scale, blur, and dimming while the other advances to full focus.",
+  "tags": ["effect", "ui-props", "focus", "blur", "attention", "demonstrate"],
+  "jobs": ["demonstrate"],
+  "family": "ui-props",
+  "profile": "holdable",
+  "evidence": "launches-motion-vocabulary.md section 3.6, Blur-focus / defocus: observed in 14 of 18 production launches and identified as the high-frequency missing focus-swap primitive for blur + opacity + optional scale.",
+  "syncPoints": [{ "id": "focus-landed", "phase": "in", "offset": 0.9 }],
+  "files": [
+    {
+      "path": "focus-swap.html",
+      "target": "compositions/components/focus-swap.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "focus",
+      "type": "enum",
+      "role": "motion",
+      "label": "Final focus",
+      "description": "Card that ends sharp, full-size, and fully opaque.",
+      "default": "b",
+      "options": [
+        { "value": "a", "label": "Card A" },
+        { "value": "b", "label": "Card B" }
+      ]
+    },
+    {
+      "id": "blurPx",
+      "type": "number",
+      "role": "style",
+      "label": "Unfocused blur",
+      "description": "Blur applied to the card outside the viewer focus.",
+      "default": 6,
+      "min": 0,
+      "max": 20,
+      "step": 1,
+      "unit": "px"
+    },
+    {
+      "id": "dim",
+      "type": "number",
+      "role": "style",
+      "label": "Unfocused opacity",
+      "description": "Opacity of the card outside the viewer focus.",
+      "default": 0.5,
+      "min": 0,
+      "max": 1,
+      "step": 0.05
+    }
+  ]
+}
diff --git a/registry/components/gesture-tap/demo.html b/registry/components/gesture-tap/demo.html
new file mode 100644
index 0000000000..fd2c06f2aa
--- /dev/null
+++ b/registry/components/gesture-tap/demo.html
@@ -0,0 +1,79 @@
+<!doctype html>
+<!--
+  gesture-tap demo. This standalone composition mounts gesture-tap.html
+  through data-composition-src. All three non-default values prove that the
+  labels and accent flow through the elastic host mount.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Gesture Tap Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0b0c0e;
+      }
+
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 44%, #171a20 0%, #0b0c0e 72%);
+      }
+
+      .mount-card {
+        width: 50%;
+        height: 60%;
+        left: 25%;
+        top: 20%;
+        container-type: size;
+        overflow: hidden;
+        border: 1px solid rgba(255, 255, 255, 0.14);
+        border-radius: 32px;
+        background: #12151b;
+        box-shadow: 0 42px 100px rgba(0, 0, 0, 0.48);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="gesture-tap-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="3"
+      data-fps="30"
+    >
+      <div
+        id="gesture-tap-mount"
+        class="mount-card clip"
+        data-composition-id="gesture-tap"
+        data-composition-src="./gesture-tap.html"
+        data-variable-values='{"tap_label":"Connect","response_label":"Connected","accent":"violet"}'
+        data-start="0"
+        data-duration="3"
+        data-track-index="0"
+        data-width="960"
+        data-height="648"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["gesture-tap-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/gesture-tap/gesture-tap.html b/registry/components/gesture-tap/gesture-tap.html
new file mode 100644
index 0000000000..7c974e65f2
--- /dev/null
+++ b/registry/components/gesture-tap/gesture-tap.html
@@ -0,0 +1,404 @@
+<!doctype html>
+<!--
+  gesture-tap: HyperFrames video primitive (ui-props / interaction / demonstrate)
+
+  Concept: a contact circle appears directly over a real pill button, presses
+  it, releases it into a new state, then lifts away. One mechanic, one job:
+  showing a decisive mobile tap response.
+
+  Variables:
+    - tap_label (string, default "Follow"): button label before release.
+    - response_label (string, default "Following"): button label after release.
+    - accent (enum, green | blue | violet, default green): response color.
+
+  Envelope: fixed IN and OUT with elastic HOLD only.
+    IN_BASE = 1.35s. The stage fades in, contact fades up at the target,
+    presses, then releases. The label swap, accent response, and pulse share
+    one release timestamp.
+    HOLD = max(0, D - IN - OUT). Only this phase stretches for longer mounts.
+    A barely visible card drift keeps the held state alive.
+    OUT_BASE = 0.55s. The completed mobile state fades cleanly.
+    If D is shorter than IN_BASE + OUT_BASE, IN and OUT compress together.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, carries no data-width or
+  data-height, and registers one paused timeline under the literal
+  gesture-tap key.
+-->
+<html
+  lang="en"
+  data-composition-id="gesture-tap"
+  data-composition-duration="3"
+  data-composition-variables='[
+    { "id": "tap_label", "type": "string", "role": "content", "label": "Tap label", "description": "Button label shown before the tap response.", "default": "Follow" },
+    { "id": "response_label", "type": "string", "role": "content", "label": "Response label", "description": "Button label shown when the tap releases.", "default": "Following" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Color used for the completed button state and response pulse.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Gesture Tap</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="gesture-tap" data-duration="3" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: #eef2ff;
+            font-family: Inter, system-ui, sans-serif;
+            pointer-events: none;
+          }
+
+          .gt-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+            background: radial-gradient(circle at 50% 44%, #1c2537 0%, #101521 68%);
+          }
+
+          .gt-stage {
+            width: 100cqw;
+            height: 100cqh;
+            display: grid;
+            place-items: center;
+            opacity: 0;
+            will-change: transform, opacity;
+          }
+
+          .gt-phone {
+            position: relative;
+            width: 46cqw;
+            height: 78cqh;
+            overflow: hidden;
+            border: 0.18cqmin solid rgba(255, 255, 255, 0.24);
+            border-radius: 5cqmin;
+            background: #f7f8fb;
+            box-shadow: 0 4cqh 10cqh rgba(2, 6, 23, 0.44);
+            color: #111827;
+            will-change: transform;
+          }
+
+          .gt-status {
+            height: 9cqh;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 0 4cqw;
+            border-bottom: 0.12cqmin solid #e5e7eb;
+            color: #64748b;
+            font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+            font-size: 2.1cqh;
+            font-weight: 700;
+            letter-spacing: 0.08em;
+            text-transform: uppercase;
+          }
+
+          .gt-signal {
+            width: 4.8cqw;
+            height: 1.4cqh;
+            border-radius: 999cqw;
+            background: #cbd5e1;
+          }
+
+          .gt-profile {
+            height: 50cqh;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            gap: 2.2cqh;
+            padding: 0 5cqw;
+            text-align: center;
+          }
+
+          .gt-avatar {
+            width: 12cqmin;
+            aspect-ratio: 1;
+            border-radius: 50%;
+            background: linear-gradient(145deg, #e2e8f0, #cbd5e1);
+            box-shadow: inset 0 0 0 0.8cqmin #ffffff;
+          }
+
+          .gt-name {
+            max-width: 34cqw;
+            overflow: hidden;
+            color: #0f172a;
+            font-size: 4.2cqh;
+            font-weight: 780;
+            line-height: 1.05;
+            letter-spacing: -0.035em;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          .gt-detail {
+            max-width: 34cqw;
+            color: #64748b;
+            font-size: 2.35cqh;
+            font-weight: 520;
+            line-height: 1.35;
+          }
+
+          .gt-button-shell {
+            position: relative;
+            width: 34cqw;
+            height: 11cqh;
+            margin: 0 auto;
+          }
+
+          .gt-button {
+            position: absolute;
+            inset: 0;
+            z-index: 2;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            overflow: hidden;
+            border: 0.16cqmin solid #273449;
+            border-radius: 999cqw;
+            background: #172033;
+            color: #f8fafc;
+            font: inherit;
+            font-size: 2.9cqh;
+            font-weight: 760;
+            letter-spacing: -0.01em;
+            transform-origin: 50% 50%;
+            will-change: transform, background-color, border-color;
+          }
+
+          .gt-button-label {
+            display: block;
+            max-width: 28cqw;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          .gt-response-pulse {
+            position: absolute;
+            inset: -1.7cqh -1.7cqw;
+            z-index: 1;
+            border: 0.28cqmin solid var(--gt-accent, #34d399);
+            border-radius: 999cqw;
+            opacity: 0;
+            will-change: transform, opacity;
+          }
+
+          .gt-contact {
+            position: absolute;
+            top: calc(50% - 7cqmin);
+            left: calc(50% - 7cqmin);
+            z-index: 4;
+            width: 14cqmin;
+            aspect-ratio: 1;
+            border: 0.24cqmin solid rgba(255, 255, 255, 0.78);
+            border-radius: 50%;
+            background: rgba(255, 255, 255, 0.34);
+            box-shadow:
+              inset 0 0 0 0.8cqmin rgba(255, 255, 255, 0.12),
+              0 1.2cqh 3cqh rgba(15, 23, 42, 0.28);
+            opacity: 0;
+            transform-origin: 50% 50%;
+            will-change: transform, opacity;
+          }
+        </style>
+
+        <div
+          id="gesture-tap-clip"
+          class="gt-clip clip"
+          data-start="0"
+          data-duration="3"
+          data-track-index="0"
+        >
+          <div class="gt-stage">
+            <article class="gt-phone" aria-label="Mobile profile card">
+              <div class="gt-status">
+                <span>Profile</span>
+                <span class="gt-signal" aria-hidden="true"></span>
+              </div>
+              <div class="gt-profile">
+                <div class="gt-avatar" aria-hidden="true"></div>
+                <div class="gt-name">Maya Chen</div>
+                <div class="gt-detail">Product designer sharing practical interaction notes.</div>
+              </div>
+              <div class="gt-button-shell">
+                <div class="gt-response-pulse" aria-hidden="true"></div>
+                <button class="gt-button" type="button" aria-pressed="false" tabindex="-1">
+                  <span class="gt-button-label"></span>
+                </button>
+                <div class="gt-contact" aria-hidden="true"></div>
+              </div>
+            </article>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".gt-stage");
+            var card = root.querySelector(".gt-phone");
+            var button = root.querySelector(".gt-button");
+            var label = root.querySelector(".gt-button-label");
+            var contact = root.querySelector(".gt-contact");
+            var pulse = root.querySelector(".gt-response-pulse");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var tapLabel = vars.tap_label == null ? "Follow" : String(vars.tap_label);
+            var responseLabel =
+              vars.response_label == null ? "Following" : String(vars.response_label);
+            var accentName =
+              vars.accent === "blue" || vars.accent === "violet" ? vars.accent : "green";
+            var accentColors = {
+              green: "var(--brand, #34d399)",
+              blue: "var(--accent, #60a5fa)",
+              violet: "var(--accent-2, #a78bfa)",
+            };
+            var accentColor = accentColors[accentName];
+
+            label.textContent = tapLabel;
+            button.setAttribute("aria-label", tapLabel);
+            root.style.setProperty("--gt-accent", accentColor);
+            // GSAP interpolates colors numerically, so tween values need the
+            // substituted color rather than the var() form.
+            accentColor = getComputedStyle(root).getPropertyValue("--gt-accent").trim();
+
+            var IN_BASE = 1.35;
+            var OUT_BASE = 0.55;
+            var STAGE_IN_BASE = 0.24;
+            var CONTACT_AT_BASE = 0.28;
+            var CONTACT_IN_BASE = 0.18;
+            var PRESS_AT_BASE = 0.54;
+            var PRESS_DURATION_BASE = 0.18;
+            var RELEASE_AT_BASE = 0.72;
+            var RELEASE_DURATION_BASE = 0.28;
+            var CONTACT_OUT_BASE = 0.34;
+            var PULSE_DURATION_BASE = 0.56;
+
+            var parsedDuration = Number.parseFloat(root.dataset.duration);
+            var duration =
+              Number.isFinite(parsedDuration) && parsedDuration > 0 ? parsedDuration : 3;
+            var fixedBase = IN_BASE + OUT_BASE;
+            var phaseScale = duration < fixedBase ? duration / fixedBase : 1;
+            var IN = IN_BASE * phaseScale;
+            var OUT = OUT_BASE * phaseScale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var HOLD_START = IN;
+            var OUT_START = IN + HOLD;
+            var STAGE_IN = STAGE_IN_BASE * phaseScale;
+            var CONTACT_AT = CONTACT_AT_BASE * phaseScale;
+            var CONTACT_IN = CONTACT_IN_BASE * phaseScale;
+            var PRESS_AT = PRESS_AT_BASE * phaseScale;
+            var PRESS_DURATION = PRESS_DURATION_BASE * phaseScale;
+            var RELEASE_AT = RELEASE_AT_BASE * phaseScale;
+            var RELEASE_DURATION = RELEASE_DURATION_BASE * phaseScale;
+            var CONTACT_OUT = CONTACT_OUT_BASE * phaseScale;
+            var PULSE_DURATION = PULSE_DURATION_BASE * phaseScale;
+
+            var tl = gsap.timeline({ paused: true });
+
+            tl.to(stage, { opacity: 1, duration: STAGE_IN, ease: "power2.out" }, 0);
+
+            // IN: the contact appears at the target. No x or y tween precedes the press.
+            tl.fromTo(
+              contact,
+              { opacity: 0, scale: 0.82 },
+              { opacity: 0.68, scale: 1, duration: CONTACT_IN, ease: "power2.out" },
+              CONTACT_AT,
+            );
+            tl.to(
+              button,
+              {
+                scale: 0.93,
+                backgroundColor: "#26324a",
+                duration: PRESS_DURATION,
+                ease: "power4.in",
+              },
+              PRESS_AT,
+            );
+            tl.to(contact, { scale: 0.78, duration: PRESS_DURATION, ease: "power4.in" }, PRESS_AT);
+
+            // Release owns the response. Label, state, accent fill, and pulse
+            // all begin at RELEASE_AT so the UI answers on the release frame.
+            tl.set(label, { innerText: responseLabel }, RELEASE_AT);
+            tl.set(
+              button,
+              { attr: { "aria-label": responseLabel, "aria-pressed": "true" } },
+              RELEASE_AT,
+            );
+            tl.to(
+              button,
+              {
+                scale: 1,
+                backgroundColor: accentColor,
+                borderColor: accentColor,
+                color: "#071015",
+                duration: RELEASE_DURATION,
+                ease: "back.out(1.7)",
+              },
+              RELEASE_AT,
+            );
+            tl.set(pulse, { opacity: 0.58, scale: 0.76 }, RELEASE_AT);
+            tl.to(
+              pulse,
+              { opacity: 0, scale: 1.14, duration: PULSE_DURATION, ease: "power2.out" },
+              RELEASE_AT,
+            );
+            tl.to(
+              contact,
+              {
+                opacity: 0,
+                scale: 1.04,
+                y: "-5cqh",
+                duration: CONTACT_OUT,
+                ease: "power2.in",
+              },
+              RELEASE_AT,
+            );
+
+            // HOLD: only this phase stretches. One slow yoyo returns the card
+            // to its resting position exactly when OUT starts.
+            if (HOLD > 0) {
+              tl.to(
+                card,
+                {
+                  y: "-0.6cqh",
+                  duration: HOLD / 2,
+                  ease: "sine.inOut",
+                  yoyo: true,
+                  repeat: 1,
+                },
+                HOLD_START,
+              );
+            }
+
+            // OUT: the completed state remains intact while the stage exits.
+            tl.to(stage, { opacity: 0, y: "-1.4cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["gesture-tap"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/gesture-tap/registry-item.json b/registry/components/gesture-tap/registry-item.json
new file mode 100644
index 0000000000..0da22a7719
--- /dev/null
+++ b/registry/components/gesture-tap/registry-item.json
@@ -0,0 +1,51 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "gesture-tap",
+  "type": "hyperframes:component",
+  "title": "Gesture Tap",
+  "description": "A contact circle taps a mobile pill button, releases it into a new labeled accent state, and lifts away.",
+  "tags": ["motion-primitive", "gesture", "tap", "interaction", "ui-props"],
+  "jobs": ["demonstrate"],
+  "family": "ui-props",
+  "profile": "interaction",
+  "evidence": "Video Primitives v1 Wave F U1 gesture-tap contract",
+  "syncPoints": [{ "id": "tap-response", "phase": "in", "offset": 0.72 }],
+  "files": [
+    {
+      "path": "gesture-tap.html",
+      "target": "compositions/components/gesture-tap.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "tap_label",
+      "type": "string",
+      "role": "content",
+      "label": "Tap label",
+      "description": "Button label shown before the tap response.",
+      "default": "Follow"
+    },
+    {
+      "id": "response_label",
+      "type": "string",
+      "role": "content",
+      "label": "Response label",
+      "description": "Button label shown when the tap releases.",
+      "default": "Following"
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Color used for the completed button state and response pulse.",
+      "default": "green",
+      "options": [
+        { "value": "green", "label": "Green" },
+        { "value": "blue", "label": "Blue" },
+        { "value": "violet", "label": "Violet" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/gloss-sweep/demo.html b/registry/components/gloss-sweep/demo.html
new file mode 100644
index 0000000000..900df2725c
--- /dev/null
+++ b/registry/components/gloss-sweep/demo.html
@@ -0,0 +1,77 @@
+<!doctype html>
+<!--
+  gloss-sweep demo. This standalone composition mounts gloss-sweep.html with
+  non-default values for all three variables. The wrapper adds no motion.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Gloss Sweep Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0b0c0e;
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --font-display: Inter, system-ui, sans-serif;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0b0c0e;
+      }
+
+      .mount-card {
+        width: 46%;
+        height: 38%;
+        left: 27%;
+        top: 31%;
+        container-type: size;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="gloss-sweep-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="2.5"
+      data-fps="30"
+    >
+      <div
+        id="gloss-sweep-mount"
+        class="mount-card clip"
+        data-composition-id="gloss-sweep"
+        data-composition-src="./gloss-sweep.html"
+        data-variable-values='{"text":"Studio","accent":"violet","sweep_angle":38}'
+        data-start="0"
+        data-duration="2.5"
+        data-track-index="0"
+        data-width="883"
+        data-height="410"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["gloss-sweep-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/gloss-sweep/gloss-sweep.html b/registry/components/gloss-sweep/gloss-sweep.html
new file mode 100644
index 0000000000..b0e7408eaa
--- /dev/null
+++ b/registry/components/gloss-sweep/gloss-sweep.html
@@ -0,0 +1,213 @@
+<!doctype html>
+<!--
+  gloss-sweep: HyperFrames video primitive (celebrations / payoff)
+
+  Concept: a compact card lands with a restrained slam, receives one
+  diagonal specular sweep, then holds perfectly still. The gloss is the
+  whole celebration. There is no pulse, confetti, drift, or exit.
+
+  Variables:
+    - text (string, default "Pro"): the card label.
+    - accent (green | blue | violet, default green): the card color.
+    - sweep_angle (number, default 25): gloss angle in degrees.
+
+  Envelope (fixed IN, elastic HOLD, no OUT):
+    IN_BASE  = 1.35s, small landing followed by one gloss sweep
+    HOLD     = elastic = max(0, D - IN_BASE), completely still
+    OUT_BASE = 0s, the card remains in its confident resting state
+    If D is shorter than IN_BASE, the landing and sweep compress together.
+
+  Mount contract: the runtime clones only this template. #root fills the
+  host box, establishes the container query basis, has no data-width or
+  data-height, and registers one paused timeline under the hardcoded
+  gloss-sweep id.
+-->
+<html
+  lang="en"
+  data-composition-id="gloss-sweep"
+  data-composition-duration="2.5"
+  data-composition-variables='[
+    { "id": "text", "type": "string", "role": "content", "label": "Label", "description": "Text displayed on the card.", "default": "Pro" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Color treatment for the card.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "sweep_angle", "type": "number", "role": "style", "label": "Sweep angle", "description": "Angle of the specular gloss in degrees.", "default": 25, "min": -60, "max": 60, "step": 1, "unit": "deg" }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Gloss Sweep</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="gloss-sweep" data-duration="2.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .gs-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+          }
+
+          .gs-card {
+            position: relative;
+            display: grid;
+            min-width: 48cqw;
+            max-width: 78cqw;
+            min-height: 34cqh;
+            padding: 7cqh 9cqw;
+            place-items: center;
+            overflow: hidden;
+            border: 0.22cqmin solid var(--gs-edge);
+            border-radius: 5cqmin;
+            background: linear-gradient(145deg, var(--gs-surface-bright), var(--gs-surface));
+            box-shadow:
+              0 3cqh 8cqh color-mix(in srgb, var(--bg, #05070d) 62%, transparent),
+              inset 0 0 0 0.12cqmin color-mix(in srgb, white 12%, transparent);
+            transform-origin: 50% 50%;
+            will-change: transform;
+          }
+
+          .gs-label {
+            position: relative;
+            z-index: 1;
+            max-width: 62cqw;
+            overflow: hidden;
+            color: var(--gs-label);
+            font-size: clamp(8cqmin, 15cqmin, 18cqmin);
+            font-weight: 780;
+            line-height: 1;
+            letter-spacing: -0.04em;
+            text-align: center;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          .gs-gloss {
+            --gs-sweep: -30;
+            --gs-angle: 25deg;
+            position: absolute;
+            inset: 0;
+            z-index: 2;
+            opacity: 0;
+            background: linear-gradient(
+              var(--gs-angle),
+              transparent calc(var(--gs-sweep) * 1% - 22%),
+              rgba(255, 255, 255, 0.06) calc(var(--gs-sweep) * 1% - 9%),
+              rgba(255, 255, 255, 0.72) calc(var(--gs-sweep) * 1%),
+              rgba(255, 255, 255, 0.08) calc(var(--gs-sweep) * 1% + 9%),
+              transparent calc(var(--gs-sweep) * 1% + 22%)
+            );
+            pointer-events: none;
+          }
+        </style>
+
+        <div
+          id="gloss-sweep-clip"
+          class="gs-clip clip"
+          data-start="0"
+          data-duration="2.5"
+          data-track-index="0"
+        >
+          <div class="gs-card">
+            <span class="gs-label"></span>
+            <span class="gs-gloss" aria-hidden="true"></span>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var card = root.querySelector(".gs-card");
+            var label = root.querySelector(".gs-label");
+            var gloss = root.querySelector(".gs-gloss");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var accents = {
+              green: {
+                surface: "#123b2c",
+                surfaceBright: "#1a513c",
+                edge: "#39d98a",
+                label: "#ecfff5",
+              },
+              blue: {
+                surface: "#123554",
+                surfaceBright: "#19486f",
+                edge: "#4db5ff",
+                label: "#eef8ff",
+              },
+              violet: {
+                surface: "#31205b",
+                surfaceBright: "#463078",
+                edge: "#a98cff",
+                label: "#f7f2ff",
+              },
+            };
+            var accent = accents[vars.accent] ? vars.accent : "green";
+            var palette = accents[accent];
+            var text = vars.text == null ? "Pro" : String(vars.text);
+            var angleValue = Number(vars.sweep_angle);
+            var sweepAngle = Number.isFinite(angleValue)
+              ? Math.max(-60, Math.min(60, angleValue))
+              : 25;
+
+            label.textContent = text;
+            card.style.setProperty("--gs-surface", palette.surface);
+            card.style.setProperty("--gs-surface-bright", palette.surfaceBright);
+            card.style.setProperty("--gs-edge", palette.edge);
+            card.style.setProperty("--gs-label", palette.label);
+            gloss.style.setProperty("--gs-angle", sweepAngle + "deg");
+
+            var IN_BASE = 1.35;
+            var LAND_BASE = 0.5;
+            var SWEEP_AT_BASE = 0.65;
+            var SWEEP_BASE = 0.7;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "2.5"));
+            var scale = duration < IN_BASE ? duration / IN_BASE : 1;
+            var LAND = LAND_BASE * scale;
+            var SWEEP_AT = SWEEP_AT_BASE * scale;
+            var SWEEP = SWEEP_BASE * scale;
+
+            var tl = gsap.timeline({ paused: true });
+
+            tl.fromTo(
+              card,
+              { y: "-5cqh", scale: 1.06 },
+              { y: "0cqh", scale: 1, duration: LAND, ease: "expo.out" },
+              0,
+            );
+            tl.set(gloss, { opacity: 1, "--gs-sweep": -30 }, SWEEP_AT);
+            tl.to(gloss, { "--gs-sweep": 130, duration: SWEEP, ease: "power2.out" }, SWEEP_AT);
+            tl.set(gloss, { opacity: 0 }, SWEEP_AT + SWEEP);
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines["gloss-sweep"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/gloss-sweep/registry-item.json b/registry/components/gloss-sweep/registry-item.json
new file mode 100644
index 0000000000..d5f6290e60
--- /dev/null
+++ b/registry/components/gloss-sweep/registry-item.json
@@ -0,0 +1,55 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "gloss-sweep",
+  "type": "hyperframes:component",
+  "title": "Gloss Sweep",
+  "description": "A card lands with a restrained slam, catches one diagonal specular gloss, and holds perfectly still.",
+  "tags": ["motion-primitive", "celebration", "gloss", "card", "badge", "payoff"],
+  "jobs": ["celebrate"],
+  "family": "celebrations",
+  "profile": "payoff",
+  "evidence": "Wave H U25 gloss-sweep brief",
+  "syncPoints": [{ "id": "gloss-complete", "phase": "in", "offset": 1.35 }],
+  "files": [
+    {
+      "path": "gloss-sweep.html",
+      "target": "compositions/components/gloss-sweep.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "text",
+      "type": "string",
+      "role": "content",
+      "label": "Label",
+      "description": "Text displayed on the card.",
+      "default": "Pro"
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Color treatment for the card.",
+      "default": "green",
+      "options": [
+        { "value": "green", "label": "Green" },
+        { "value": "blue", "label": "Blue" },
+        { "value": "violet", "label": "Violet" }
+      ]
+    },
+    {
+      "id": "sweep_angle",
+      "type": "number",
+      "role": "style",
+      "label": "Sweep angle",
+      "description": "Angle of the specular gloss in degrees.",
+      "default": 25,
+      "min": -60,
+      "max": 60,
+      "step": 1,
+      "unit": "deg"
+    }
+  ]
+}
diff --git a/registry/components/grade-split-reveal/demo.html b/registry/components/grade-split-reveal/demo.html
new file mode 100644
index 0000000000..ba2d16cec7
--- /dev/null
+++ b/registry/components/grade-split-reveal/demo.html
@@ -0,0 +1,350 @@
+<!doctype html>
+<!--
+  grade-split-reveal: the grade arrives as a moving edge.
+
+  Two copies of the same plate sit exactly on top of each other. The lower copy carries a
+  flat, milky look, the way ungraded footage comes off a camera. The upper copy carries the
+  finished warm cinematic look. A hard edge sweeps across the upper copy, so the graded
+  version eats the flat one from left to right and you read both halves of the same picture
+  at the same time. It pauses in the middle long enough for the eye to compare, then commits
+  and takes the whole frame.
+
+  Both looks are real HyperFrames color grading, not a CSS filter. The runtime hands each
+  image to a WebGL shader and swaps in a graded canvas, and the render pipeline redraws the
+  same shader, so what you preview is what encodes. Color grading is media only: it applies
+  to <video> and <img>, never to text, SVG or ordinary DOM.
+
+  The plate here is a procedural SVG scene built in this file, so the primitive is
+  deterministic and ships nothing licensed. Replace PLATE_SRC with your own photo or a video
+  poster and the whole move still works. Swap AFTER_GRADE for any preset id or hand written
+  adjust block.
+
+  The edge itself is never animated with clip-path. The upper copy lives in a wrapper with
+  overflow hidden and the wrapper's width is what moves, so the sweep is one plain numeric
+  tween that seeks perfectly and never re-parses a string.
+
+  Every ease is a cubic bezier written out by hand and solved in this file. No preset is used
+  anywhere.
+
+  Mount contract: everything lives inside <template>, styles and scripts included, and the
+  scripts sit INSIDE the composition root. A host clones template content into its own mount
+  and only runs scripts found inside the root; markup left outside is copied without its
+  behaviour, which renders a black card with no timeline at all.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Grade Split Reveal - Demo</title>
+  </head>
+  <body>
+    <template>
+      <div
+        id="root"
+        class="clip gs-root"
+        data-composition-id="grade-split-reveal"
+        data-duration="6"
+        data-fps="30"
+      >
+        <style>
+          .gs-root {
+            --ink: #f6f4ef;
+            --rule: rgba(246, 244, 239, 0.55);
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            background: #0b0b0d;
+            pointer-events: none;
+          }
+          #gs-plate {
+            position: absolute;
+            overflow: hidden;
+            border-radius: 10px;
+            background: #08080a;
+            box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
+          }
+          .gs-layer {
+            position: absolute;
+            left: 0;
+            top: 0;
+            height: 100%;
+            overflow: hidden;
+          }
+          .gs-layer img {
+            display: block;
+            object-fit: cover;
+          }
+          #gs-edge {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 2px;
+            height: 100%;
+            background: var(--ink);
+            box-shadow: 0 0 18px rgba(0, 0, 0, 0.7);
+          }
+          .gs-tag {
+            position: absolute;
+            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+            font-weight: 700;
+            text-transform: uppercase;
+            letter-spacing: 0.16em;
+            color: var(--ink);
+            opacity: 0;
+            white-space: nowrap;
+            text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85);
+          }
+          .gs-tag::before {
+            content: "";
+            position: absolute;
+            left: 0;
+            top: -0.7em;
+            width: 1.8em;
+            height: 2px;
+            background: var(--rule);
+          }
+          #gs-tag-before::before {
+            left: auto;
+            right: 0;
+          }
+        </style>
+
+        <div id="gs-plate">
+          <div class="gs-layer" id="gs-before"><img id="gs-img-before" alt="" /></div>
+          <div class="gs-layer" id="gs-after"><img id="gs-img-after" alt="" /></div>
+          <div id="gs-edge"></div>
+          <div class="gs-tag" id="gs-tag-before">Ungraded</div>
+          <div class="gs-tag" id="gs-tag-after">Warm Cinematic</div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            gsap.defaults({ immediateRender: false });
+
+            /* Cubic bezier solved by hand. Newton first, bisection when the slope dies. */
+            function bezier(x1, y1, x2, y2) {
+              function curve(t, a1, a2) {
+                var A = 1 - 3 * a2 + 3 * a1;
+                var B = 3 * a2 - 6 * a1;
+                var C = 3 * a1;
+                return ((A * t + B) * t + C) * t;
+              }
+              function slope(t, a1, a2) {
+                var A = 1 - 3 * a2 + 3 * a1;
+                var B = 3 * a2 - 6 * a1;
+                var C = 3 * a1;
+                return (3 * A * t + 2 * B) * t + C;
+              }
+              return function (p) {
+                if (p <= 0) return 0;
+                if (p >= 1) return 1;
+                var t = p;
+                for (var i = 0; i < 8; i++) {
+                  var d = slope(t, x1, x2);
+                  if (Math.abs(d) < 1e-6) break;
+                  var e = curve(t, x1, x2) - p;
+                  if (Math.abs(e) < 1e-7) return curve(t, y1, y2);
+                  t -= e / d;
+                }
+                var lo = 0;
+                var hi = 1;
+                t = p;
+                for (var j = 0; j < 24; j++) {
+                  var x = curve(t, x1, x2);
+                  if (Math.abs(x - p) < 1e-7) break;
+                  if (x > p) hi = t;
+                  else lo = t;
+                  t = (lo + hi) / 2;
+                }
+                return curve(t, y1, y2);
+              };
+            }
+
+            /* Plate settles, never bounces. */
+            var EASE_PLATE = bezier(0.16, 0.84, 0.24, 1);
+            /* The sweep loiters, then finishes fast, the way a hand drags a compare slider. */
+            var EASE_WIPE = bezier(0.62, 0, 0.14, 1);
+            /* The commit is decisive from the first frame. */
+            var EASE_COMMIT = bezier(0.4, 0, 0.05, 1);
+            var EASE_TAG = bezier(0.22, 0.8, 0.3, 1);
+            var EASE_FADE = bezier(0.4, 0, 0.7, 1);
+
+            var DUR = 6;
+
+            /* ---- the plate. Swap PLATE_SRC for your own photo or video poster. ---- */
+            var SCENE =
+              /* width and height are not decoration. An SVG served to an <img> with only a
+                 viewBox has no intrinsic size, and a texture upload from it comes back
+                 empty, so the shader grades a blank plate. */
+              '<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="900" viewBox="0 0 1600 900">' +
+              "<defs>" +
+              '<linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">' +
+              '<stop offset="0" stop-color="#1b2340"/><stop offset="0.42" stop-color="#5b4a63"/>' +
+              '<stop offset="0.68" stop-color="#c8794a"/><stop offset="0.78" stop-color="#f0a75c"/>' +
+              '<stop offset="1" stop-color="#f7c988"/></linearGradient>' +
+              '<linearGradient id="sea" x1="0" y1="0" x2="0" y2="1">' +
+              '<stop offset="0" stop-color="#c98a55"/><stop offset="0.3" stop-color="#6a5560"/>' +
+              '<stop offset="1" stop-color="#1a1d30"/></linearGradient>' +
+              '<radialGradient id="glow" cx="0.62" cy="0.74" r="0.42">' +
+              '<stop offset="0" stop-color="#ffdfa8" stop-opacity="0.9"/>' +
+              '<stop offset="1" stop-color="#ffdfa8" stop-opacity="0"/></radialGradient>' +
+              "</defs>" +
+              '<rect width="1600" height="900" fill="url(#sky)"/>' +
+              '<rect width="1600" height="900" fill="url(#glow)"/>' +
+              '<circle cx="992" cy="660" r="58" fill="#fff0cd"/>' +
+              '<path d="M0 640 L250 578 L430 618 L640 552 L820 606 L1010 566 L1240 620 L1430 578 L1600 616 L1600 700 L0 700 Z" fill="#3a2f45"/>' +
+              '<path d="M0 668 L210 634 L400 664 L610 622 L840 662 L1080 630 L1330 668 L1600 638 L1600 700 L0 700 Z" fill="#2a2337"/>' +
+              '<rect y="700" width="1600" height="200" fill="url(#sea)"/>' +
+              '<rect x="962" y="700" width="60" height="200" fill="#ffdfa8" opacity="0.42"/>' +
+              '<rect x="978" y="700" width="28" height="200" fill="#fff3d4" opacity="0.5"/>' +
+              '<g fill="#f4e3c2" opacity="0.34">' +
+              '<rect x="120" y="742" width="1360" height="3"/><rect x="240" y="786" width="1120" height="3"/>' +
+              '<rect x="60" y="828" width="1480" height="4"/><rect x="300" y="868" width="1000" height="4"/></g>' +
+              '<g fill="#e8d3b4" opacity="0.5">' +
+              '<rect x="180" y="330" width="420" height="7" rx="3"/><rect x="300" y="372" width="260" height="6" rx="3"/>' +
+              '<rect x="1010" y="286" width="380" height="7" rx="3"/><rect x="1130" y="326" width="220" height="6" rx="3"/></g>' +
+              '<path d="M0 760 L118 700 L268 760 L268 900 L0 900 Z" fill="#12121e"/>' +
+              '<path d="M1600 742 L1462 700 L1318 742 L1318 900 L1600 900 Z" fill="#0f0f1a"/>' +
+              "</svg>";
+            var PLATE_SRC = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(SCENE);
+
+            /* ---- the two looks. Both are real color grading, applied by the shader. ---- */
+            var BEFORE_GRADE = {
+              preset: "neutral",
+              intensity: 1,
+              adjust: {
+                exposure: 0.1,
+                contrast: -0.42,
+                highlights: -0.1,
+                shadows: 0.24,
+                whites: -0.14,
+                blacks: 0.3,
+                temperature: -0.06,
+                vibrance: -0.22,
+                saturation: -0.34,
+              },
+              colorSpace: "rec709",
+            };
+            var AFTER_GRADE = {
+              preset: "deep-contrast",
+              intensity: 1,
+              adjust: {
+                exposure: 0.02,
+                contrast: 0.28,
+                highlights: -0.16,
+                shadows: 0.08,
+                whites: 0.06,
+                blacks: -0.16,
+                temperature: 0.18,
+                tint: -0.04,
+                vibrance: 0.26,
+                saturation: 0.1,
+              },
+              details: { vignette: 0.3, vignetteFeather: 0.7, grain: 0.1, grainSize: 0.3 },
+              colorSpace: "rec709",
+            };
+
+            var root = document.getElementById("gs-plate").parentElement;
+            var FRAME_W = root.clientWidth || 1920;
+            var FRAME_H = root.clientHeight || 1080;
+
+            /* The plate keeps the frame's own shape, inset by a constant margin, so one file
+               reads correctly in landscape, portrait and square. */
+            var INSET = Math.min(FRAME_W, FRAME_H) * 0.085;
+            var PW = Math.round(FRAME_W - INSET * 2);
+            var PH = Math.round(FRAME_H - INSET * 2);
+
+            var plate = document.getElementById("gs-plate");
+            plate.style.left = INSET + "px";
+            plate.style.top = INSET + "px";
+            plate.style.width = PW + "px";
+            plate.style.height = PH + "px";
+
+            var before = document.getElementById("gs-before");
+            var after = document.getElementById("gs-after");
+            var edge = document.getElementById("gs-edge");
+            var tagBefore = document.getElementById("gs-tag-before");
+            var tagAfter = document.getElementById("gs-tag-after");
+
+            /* Both images are laid out at the full plate width. Only the wrapper narrows, so
+               the shader canvas the runtime drops in keeps its measured box and the edge is a
+               clean crop rather than a squeeze. */
+            [
+              [document.getElementById("gs-img-before"), BEFORE_GRADE],
+              [document.getElementById("gs-img-after"), AFTER_GRADE],
+            ].forEach(function (pair) {
+              pair[0].style.width = PW + "px";
+              pair[0].style.height = PH + "px";
+              pair[0].setAttribute("data-color-grading", JSON.stringify(pair[1]));
+              pair[0].src = PLATE_SRC;
+            });
+            before.style.width = PW + "px";
+
+            var TAG = Math.max(11, Math.round(Math.min(FRAME_W, FRAME_H) * 0.019));
+            var PAD = Math.round(INSET * 0.62);
+            [tagBefore, tagAfter].forEach(function (t) {
+              t.style.fontSize = TAG + "px";
+              t.style.bottom = PAD + "px";
+            });
+            /* The graded copy grows from the left, so its label sits on the left. Putting
+               these the other way round labels each half with the look it is not. */
+            tagAfter.style.left = PAD + "px";
+            tagBefore.style.right = PAD + "px";
+            tagBefore.style.textAlign = "right";
+
+            /* Rest state lives outside the timeline so frame zero is already correct. */
+            /* The plate is lit at frame zero and arrives on scale alone. Fading it up from
+               nothing would leave the first frames of the clip literally blank, which reads
+               as a broken card in any grid of thumbnails. */
+            gsap.set(plate, { transformOrigin: "50% 50%", scale: 1.05, opacity: 1 });
+            gsap.set(after, { width: 0 });
+            gsap.set(edge, { x: 0, opacity: 0 });
+            gsap.set([tagBefore, tagAfter], { opacity: 0, y: 10 });
+
+            var tl = gsap.timeline({ paused: true });
+
+            /* The plate arrives. */
+            tl.fromTo(plate, { scale: 1.05 }, { scale: 1, duration: 0.62, ease: EASE_PLATE }, 0);
+            tl.fromTo(
+              tagBefore,
+              { opacity: 0, y: 10 },
+              { opacity: 0.82, y: 0, duration: 0.34, ease: EASE_TAG },
+              0.36,
+            );
+
+            /* The grade sweeps in and stops short, so both halves are readable together. */
+            var HOLD = Math.round(PW * 0.62);
+            tl.fromTo(after, { width: 0 }, { width: HOLD, duration: 1.6, ease: EASE_WIPE }, 0.7);
+            tl.fromTo(edge, { x: 0 }, { x: HOLD, duration: 1.6, ease: EASE_WIPE }, 0.7);
+            tl.fromTo(edge, { opacity: 0 }, { opacity: 1, duration: 0.2, ease: EASE_FADE }, 0.7);
+            tl.fromTo(
+              tagAfter,
+              { opacity: 0, y: 10 },
+              { opacity: 1, y: 0, duration: 0.34, ease: EASE_TAG },
+              1.16,
+            );
+
+            /* Then it commits and takes the whole plate. */
+            tl.fromTo(after, { width: HOLD }, { width: PW, duration: 1.2, ease: EASE_COMMIT }, 3.1);
+            tl.fromTo(edge, { x: HOLD }, { x: PW, duration: 1.2, ease: EASE_COMMIT }, 3.1);
+            tl.fromTo(
+              tagBefore,
+              { opacity: 0.82 },
+              { opacity: 0, duration: 0.5, ease: EASE_FADE },
+              3.1,
+            );
+            tl.fromTo(edge, { opacity: 1 }, { opacity: 0, duration: 0.3, ease: EASE_FADE }, 4.05);
+            /* A small push in lands the finished look instead of just stopping on it. */
+            tl.fromTo(plate, { scale: 1 }, { scale: 1.03, duration: 1.5, ease: EASE_COMMIT }, 3.1);
+
+            tl.set({}, {}, DUR);
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines["grade-split-reveal"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/grade-split-reveal/grade-split-reveal.html b/registry/components/grade-split-reveal/grade-split-reveal.html
new file mode 100644
index 0000000000..2fa33b68d6
--- /dev/null
+++ b/registry/components/grade-split-reveal/grade-split-reveal.html
@@ -0,0 +1,446 @@
+<!doctype html>
+<!--
+  grade-split-reveal: the grade arrives as a moving edge.
+
+  Two copies of the same plate sit exactly on top of each other. The lower copy carries a
+  flat, milky look, the way ungraded footage comes off a camera. The upper copy carries the
+  finished warm cinematic look. A hard edge sweeps across the upper copy, so the graded
+  version eats the flat one from left to right and you read both halves of the same picture
+  at the same time. It pauses in the middle long enough for the eye to compare, then commits
+  and takes the whole frame.
+
+  Both looks are real HyperFrames color grading, not a CSS filter. The runtime hands each
+  image to a WebGL shader and swaps in a graded canvas, and the render pipeline redraws the
+  same shader, so what you preview is what encodes. Color grading is media only: it applies
+  to <video> and <img>, never to text, SVG or ordinary DOM.
+
+  The plate here is a procedural SVG scene built in this file, so the primitive is
+  deterministic and ships nothing licensed. Replace PLATE_SRC with your own photo or a video
+  poster and the whole move still works. Swap AFTER_GRADE for any preset id or hand written
+  adjust block.
+
+  The edge itself is never animated with clip-path. The upper copy lives in a wrapper with
+  overflow hidden and the wrapper's width is what moves, so the sweep is one plain numeric
+  tween that seeks perfectly and never re-parses a string.
+
+  Every ease is a cubic bezier written out by hand and solved in this file. No preset is used
+  anywhere.
+
+  Variables. Each one is read once at mount, falls back to its declared default on anything
+  missing or unrecognised, and changes what lands on screen. Timing is untouched: same six
+  seconds, same 30fps, same beats.
+
+    - look (warm-cinematic | cool-teal | bleach-bypass, default warm-cinematic): the grade the
+      upper copy carries, and the label printed over it. All three are real grading blocks
+      handed to the shader, not CSS filters.
+    - split (25 to 85, default 62, percent of the plate width): where the edge stops to hold
+      the comparison before it commits and takes the rest.
+    - edge (hairline | bold | hidden, default hairline): the divider line riding the wipe.
+      hidden removes it, so the grade arrives with no visible seam.
+    - labels (on | off, default on): the two captions naming each half of the plate.
+
+  Mount contract: everything lives inside <template>, styles and scripts included, and the
+  scripts sit INSIDE the composition root. A host clones template content into its own mount
+  and only runs scripts found inside the root; markup left outside is copied without its
+  behaviour, which renders a black card with no timeline at all.
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "look", "type": "enum", "role": "style", "label": "Look", "description": "Grade carried by the upper copy, and the label printed over it. All three are real grading blocks handed to the shader, not CSS filters.", "default": "warm-cinematic", "options": [{ "value": "warm-cinematic", "label": "Warm Cinematic" }, { "value": "cool-teal", "label": "Cool Teal" }, { "value": "bleach-bypass", "label": "Bleach Bypass" }] },
+    { "id": "split", "type": "number", "role": "motion", "label": "Split point", "description": "How far across the plate the edge stops to hold the comparison, before it commits and takes the rest.", "default": 62, "min": 25, "max": 85, "step": 1, "unit": "%" },
+    { "id": "edge", "type": "enum", "role": "style", "label": "Edge", "description": "The divider line riding the wipe. Hidden drops it entirely so the grade arrives with no seam.", "default": "hairline", "options": [{ "value": "hairline", "label": "Hairline" }, { "value": "bold", "label": "Bold" }, { "value": "hidden", "label": "Hidden" }] },
+    { "id": "labels", "type": "enum", "role": "style", "label": "Labels", "description": "Show or hide the two captions naming each half of the plate.", "default": "on", "options": [{ "value": "on", "label": "Show" }, { "value": "off", "label": "Hide" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Grade Split Reveal</title>
+  </head>
+  <body>
+    <template>
+      <div
+        id="root"
+        class="clip gs-root"
+        data-composition-id="grade-split-reveal"
+        data-duration="6"
+        data-fps="30"
+      >
+        <style>
+          [data-composition-id="grade-split-reveal"] {
+            --ink: #f6f4ef;
+            --rule: rgba(246, 244, 239, 0.55);
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            background: transparent;
+            pointer-events: none;
+          }
+          #gs-plate {
+            position: absolute;
+            overflow: hidden;
+            border-radius: 10px;
+            background: #08080a;
+            box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
+          }
+          .gs-layer {
+            position: absolute;
+            left: 0;
+            top: 0;
+            height: 100%;
+            overflow: hidden;
+          }
+          .gs-layer img {
+            display: block;
+            object-fit: cover;
+          }
+          #gs-edge {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 2px;
+            height: 100%;
+            background: var(--ink);
+            box-shadow: 0 0 18px rgba(0, 0, 0, 0.7);
+          }
+          .gs-tag {
+            position: absolute;
+            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+            font-weight: 700;
+            text-transform: uppercase;
+            letter-spacing: 0.16em;
+            color: var(--ink);
+            opacity: 0;
+            white-space: nowrap;
+            text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85);
+          }
+          .gs-tag::before {
+            content: "";
+            position: absolute;
+            left: 0;
+            top: -0.7em;
+            width: 1.8em;
+            height: 2px;
+            background: var(--rule);
+          }
+          #gs-tag-before::before {
+            left: auto;
+            right: 0;
+          }
+        </style>
+
+        <div id="gs-plate">
+          <div class="gs-layer" id="gs-before"><img id="gs-img-before" alt="" /></div>
+          <div class="gs-layer" id="gs-after"><img id="gs-img-after" alt="" /></div>
+          <div id="gs-edge"></div>
+          <div class="gs-tag" id="gs-tag-before">Ungraded</div>
+          <div class="gs-tag" id="gs-tag-after">Warm Cinematic</div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            gsap.defaults({ immediateRender: false });
+
+            /* Cubic bezier solved by hand. Newton first, bisection when the slope dies. */
+            function bezier(x1, y1, x2, y2) {
+              function curve(t, a1, a2) {
+                var A = 1 - 3 * a2 + 3 * a1;
+                var B = 3 * a2 - 6 * a1;
+                var C = 3 * a1;
+                return ((A * t + B) * t + C) * t;
+              }
+              function slope(t, a1, a2) {
+                var A = 1 - 3 * a2 + 3 * a1;
+                var B = 3 * a2 - 6 * a1;
+                var C = 3 * a1;
+                return (3 * A * t + 2 * B) * t + C;
+              }
+              return function (p) {
+                if (p <= 0) return 0;
+                if (p >= 1) return 1;
+                var t = p;
+                for (var i = 0; i < 8; i++) {
+                  var d = slope(t, x1, x2);
+                  if (Math.abs(d) < 1e-6) break;
+                  var e = curve(t, x1, x2) - p;
+                  if (Math.abs(e) < 1e-7) return curve(t, y1, y2);
+                  t -= e / d;
+                }
+                var lo = 0;
+                var hi = 1;
+                t = p;
+                for (var j = 0; j < 24; j++) {
+                  var x = curve(t, x1, x2);
+                  if (Math.abs(x - p) < 1e-7) break;
+                  if (x > p) hi = t;
+                  else lo = t;
+                  t = (lo + hi) / 2;
+                }
+                return curve(t, y1, y2);
+              };
+            }
+
+            /* Plate settles, never bounces. */
+            var EASE_PLATE = bezier(0.16, 0.84, 0.24, 1);
+            /* The sweep loiters, then finishes fast, the way a hand drags a compare slider. */
+            var EASE_WIPE = bezier(0.62, 0, 0.14, 1);
+            /* The commit is decisive from the first frame. */
+            var EASE_COMMIT = bezier(0.4, 0, 0.05, 1);
+            var EASE_TAG = bezier(0.22, 0.8, 0.3, 1);
+            var EASE_FADE = bezier(0.4, 0, 0.7, 1);
+
+            var DUR = 6;
+
+            /* ---- the plate. Swap PLATE_SRC for your own photo or video poster. ---- */
+            var SCENE =
+              /* width and height are not decoration. An SVG served to an <img> with only a
+                 viewBox has no intrinsic size, and a texture upload from it comes back
+                 empty, so the shader grades a blank plate. */
+              '<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="900" viewBox="0 0 1600 900">' +
+              "<defs>" +
+              '<linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">' +
+              '<stop offset="0" stop-color="#1b2340"/><stop offset="0.42" stop-color="#5b4a63"/>' +
+              '<stop offset="0.68" stop-color="#c8794a"/><stop offset="0.78" stop-color="#f0a75c"/>' +
+              '<stop offset="1" stop-color="#f7c988"/></linearGradient>' +
+              '<linearGradient id="sea" x1="0" y1="0" x2="0" y2="1">' +
+              '<stop offset="0" stop-color="#c98a55"/><stop offset="0.3" stop-color="#6a5560"/>' +
+              '<stop offset="1" stop-color="#1a1d30"/></linearGradient>' +
+              '<radialGradient id="glow" cx="0.62" cy="0.74" r="0.42">' +
+              '<stop offset="0" stop-color="#ffdfa8" stop-opacity="0.9"/>' +
+              '<stop offset="1" stop-color="#ffdfa8" stop-opacity="0"/></radialGradient>' +
+              "</defs>" +
+              '<rect width="1600" height="900" fill="url(#sky)"/>' +
+              '<rect width="1600" height="900" fill="url(#glow)"/>' +
+              '<circle cx="992" cy="660" r="58" fill="#fff0cd"/>' +
+              '<path d="M0 640 L250 578 L430 618 L640 552 L820 606 L1010 566 L1240 620 L1430 578 L1600 616 L1600 700 L0 700 Z" fill="#3a2f45"/>' +
+              '<path d="M0 668 L210 634 L400 664 L610 622 L840 662 L1080 630 L1330 668 L1600 638 L1600 700 L0 700 Z" fill="#2a2337"/>' +
+              '<rect y="700" width="1600" height="200" fill="url(#sea)"/>' +
+              '<rect x="962" y="700" width="60" height="200" fill="#ffdfa8" opacity="0.42"/>' +
+              '<rect x="978" y="700" width="28" height="200" fill="#fff3d4" opacity="0.5"/>' +
+              '<g fill="#f4e3c2" opacity="0.34">' +
+              '<rect x="120" y="742" width="1360" height="3"/><rect x="240" y="786" width="1120" height="3"/>' +
+              '<rect x="60" y="828" width="1480" height="4"/><rect x="300" y="868" width="1000" height="4"/></g>' +
+              '<g fill="#e8d3b4" opacity="0.5">' +
+              '<rect x="180" y="330" width="420" height="7" rx="3"/><rect x="300" y="372" width="260" height="6" rx="3"/>' +
+              '<rect x="1010" y="286" width="380" height="7" rx="3"/><rect x="1130" y="326" width="220" height="6" rx="3"/></g>' +
+              '<path d="M0 760 L118 700 L268 760 L268 900 L0 900 Z" fill="#12121e"/>' +
+              '<path d="M1600 742 L1462 700 L1318 742 L1318 900 L1600 900 Z" fill="#0f0f1a"/>' +
+              "</svg>";
+            var PLATE_SRC = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(SCENE);
+
+            /* ---- the two looks. Both are real color grading, applied by the shader. ---- */
+            var BEFORE_GRADE = {
+              preset: "neutral",
+              intensity: 1,
+              adjust: {
+                exposure: 0.1,
+                contrast: -0.42,
+                highlights: -0.1,
+                shadows: 0.24,
+                whites: -0.14,
+                blacks: 0.3,
+                temperature: -0.06,
+                vibrance: -0.22,
+                saturation: -0.34,
+              },
+              colorSpace: "rec709",
+            };
+            var AFTER_GRADE = {
+              preset: "deep-contrast",
+              intensity: 1,
+              adjust: {
+                exposure: 0.02,
+                contrast: 0.28,
+                highlights: -0.16,
+                shadows: 0.08,
+                whites: 0.06,
+                blacks: -0.16,
+                temperature: 0.18,
+                tint: -0.04,
+                vibrance: 0.26,
+                saturation: 0.1,
+              },
+              details: { vignette: 0.3, vignetteFeather: 0.7, grain: 0.1, grainSize: 0.3 },
+              colorSpace: "rec709",
+            };
+
+            /* ---- variables. Unrecognised overrides return to their declared defaults. ---- */
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            function pick(table, value, fallback) {
+              return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+            }
+
+            var LOOKS = {
+              "warm-cinematic": { label: "Warm Cinematic", grade: AFTER_GRADE },
+              "cool-teal": {
+                label: "Cool Teal",
+                grade: {
+                  preset: "deep-contrast",
+                  intensity: 1,
+                  adjust: {
+                    exposure: 0,
+                    contrast: 0.32,
+                    highlights: -0.2,
+                    shadows: 0.14,
+                    whites: 0.04,
+                    blacks: -0.2,
+                    temperature: -0.26,
+                    tint: 0.08,
+                    vibrance: 0.22,
+                    saturation: 0.04,
+                  },
+                  details: { vignette: 0.34, vignetteFeather: 0.68, grain: 0.1, grainSize: 0.3 },
+                  colorSpace: "rec709",
+                },
+              },
+              "bleach-bypass": {
+                label: "Bleach Bypass",
+                grade: {
+                  preset: "neutral",
+                  intensity: 1,
+                  adjust: {
+                    exposure: 0.08,
+                    contrast: 0.54,
+                    highlights: 0.12,
+                    shadows: -0.1,
+                    whites: 0.18,
+                    blacks: -0.28,
+                    temperature: 0.04,
+                    vibrance: -0.18,
+                    saturation: -0.46,
+                  },
+                  details: { vignette: 0.24, vignetteFeather: 0.72, grain: 0.18, grainSize: 0.34 },
+                  colorSpace: "rec709",
+                },
+              },
+            };
+            var LOOK = LOOKS[pick(LOOKS, vars.look, "warm-cinematic")];
+
+            var EDGE_WIDTHS = { hairline: "2px", bold: "6px", hidden: "0px" };
+            var EDGE = pick(EDGE_WIDTHS, vars.edge, "hairline");
+
+            /* A number arrives as a number from --variables, but a hand written override can
+               still be a string or nonsense. parseFloat plus a range test covers both. */
+            var SPLIT = parseFloat(vars.split);
+            if (!isFinite(SPLIT) || SPLIT < 25 || SPLIT > 85) SPLIT = 62;
+
+            var LABELS_ON = vars.labels !== "off";
+
+            var root = document.getElementById("gs-plate").parentElement;
+            var FRAME_W = root.clientWidth || 1920;
+            var FRAME_H = root.clientHeight || 1080;
+
+            /* The plate keeps the frame's own shape, inset by a constant margin, so one file
+               reads correctly in landscape, portrait and square. */
+            var INSET = Math.min(FRAME_W, FRAME_H) * 0.085;
+            var PW = Math.round(FRAME_W - INSET * 2);
+            var PH = Math.round(FRAME_H - INSET * 2);
+
+            var plate = document.getElementById("gs-plate");
+            plate.style.left = INSET + "px";
+            plate.style.top = INSET + "px";
+            plate.style.width = PW + "px";
+            plate.style.height = PH + "px";
+
+            var before = document.getElementById("gs-before");
+            var after = document.getElementById("gs-after");
+            var edge = document.getElementById("gs-edge");
+            var tagBefore = document.getElementById("gs-tag-before");
+            var tagAfter = document.getElementById("gs-tag-after");
+
+            /* Both images are laid out at the full plate width. Only the wrapper narrows, so
+               the shader canvas the runtime drops in keeps its measured box and the edge is a
+               clean crop rather than a squeeze. */
+            [
+              [document.getElementById("gs-img-before"), BEFORE_GRADE],
+              [document.getElementById("gs-img-after"), LOOK.grade],
+            ].forEach(function (pair) {
+              pair[0].style.width = PW + "px";
+              pair[0].style.height = PH + "px";
+              pair[0].setAttribute("data-color-grading", JSON.stringify(pair[1]));
+              pair[0].src = PLATE_SRC;
+            });
+            before.style.width = PW + "px";
+
+            var TAG = Math.max(11, Math.round(Math.min(FRAME_W, FRAME_H) * 0.019));
+            var PAD = Math.round(INSET * 0.62);
+            [tagBefore, tagAfter].forEach(function (t) {
+              t.style.fontSize = TAG + "px";
+              t.style.bottom = PAD + "px";
+            });
+            /* The graded copy grows from the left, so its label sits on the left. Putting
+               these the other way round labels each half with the look it is not. */
+            tagAfter.style.left = PAD + "px";
+            tagBefore.style.right = PAD + "px";
+            tagBefore.style.textAlign = "right";
+
+            tagAfter.textContent = LOOK.label;
+            edge.style.width = EDGE_WIDTHS[EDGE];
+            /* The edge also casts a shadow, so zero width alone would leave a smudge. */
+            if (EDGE === "hidden") edge.style.display = "none";
+            if (!LABELS_ON) {
+              tagBefore.style.display = "none";
+              tagAfter.style.display = "none";
+            }
+
+            /* Rest state lives outside the timeline so frame zero is already correct. */
+            /* The plate is lit at frame zero and arrives on scale alone. Fading it up from
+               nothing would leave the first frames of the clip literally blank, which reads
+               as a broken card in any grid of thumbnails. */
+            gsap.set(plate, { transformOrigin: "50% 50%", scale: 1.05, opacity: 1 });
+            gsap.set(after, { width: 0 });
+            gsap.set(edge, { x: 0, opacity: 0 });
+            gsap.set([tagBefore, tagAfter], { opacity: 0, y: 10 });
+
+            var tl = gsap.timeline({ paused: true });
+
+            /* The plate arrives. */
+            tl.fromTo(plate, { scale: 1.05 }, { scale: 1, duration: 0.62, ease: EASE_PLATE }, 0);
+            tl.fromTo(
+              tagBefore,
+              { opacity: 0, y: 10 },
+              { opacity: 0.82, y: 0, duration: 0.34, ease: EASE_TAG },
+              0.36,
+            );
+
+            /* The grade sweeps in and stops short, so both halves are readable together. */
+            var HOLD = Math.round(PW * (SPLIT / 100));
+            tl.fromTo(after, { width: 0 }, { width: HOLD, duration: 1.6, ease: EASE_WIPE }, 0.7);
+            tl.fromTo(edge, { x: 0 }, { x: HOLD, duration: 1.6, ease: EASE_WIPE }, 0.7);
+            tl.fromTo(edge, { opacity: 0 }, { opacity: 1, duration: 0.2, ease: EASE_FADE }, 0.7);
+            tl.fromTo(
+              tagAfter,
+              { opacity: 0, y: 10 },
+              { opacity: 1, y: 0, duration: 0.34, ease: EASE_TAG },
+              1.16,
+            );
+
+            /* Then it commits and takes the whole plate. */
+            tl.fromTo(after, { width: HOLD }, { width: PW, duration: 1.2, ease: EASE_COMMIT }, 3.1);
+            tl.fromTo(edge, { x: HOLD }, { x: PW, duration: 1.2, ease: EASE_COMMIT }, 3.1);
+            tl.fromTo(
+              tagBefore,
+              { opacity: 0.82 },
+              { opacity: 0, duration: 0.5, ease: EASE_FADE },
+              3.1,
+            );
+            tl.fromTo(edge, { opacity: 1 }, { opacity: 0, duration: 0.3, ease: EASE_FADE }, 4.05);
+            /* A small push in lands the finished look instead of just stopping on it. */
+            tl.fromTo(plate, { scale: 1 }, { scale: 1.03, duration: 1.5, ease: EASE_COMMIT }, 3.1);
+
+            tl.set({}, {}, DUR);
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines["grade-split-reveal"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/grade-split-reveal/registry-item.json b/registry/components/grade-split-reveal/registry-item.json
new file mode 100644
index 0000000000..d0653a3c22
--- /dev/null
+++ b/registry/components/grade-split-reveal/registry-item.json
@@ -0,0 +1,67 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "grade-split-reveal",
+  "type": "hyperframes:component",
+  "title": "Grade Split Reveal",
+  "description": "The same picture twice, one flat and one finished, with a hard edge sweeping between them. It stops in the middle long enough to compare, then commits and the graded look takes the frame. Both looks are real HyperFrames color grading run through the WebGL shader, so the preview and the render match.",
+  "tags": ["color-grading", "media", "compare", "reveal", "motion-primitive", "grade"],
+  "files": [
+    {
+      "path": "grade-split-reveal.html",
+      "target": "compositions/components/grade-split-reveal.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "look",
+      "type": "enum",
+      "role": "style",
+      "label": "Look",
+      "description": "Grade carried by the upper copy, and the label printed over it. All three are real grading blocks handed to the shader, not CSS filters.",
+      "default": "warm-cinematic",
+      "options": [
+        { "value": "warm-cinematic", "label": "Warm Cinematic" },
+        { "value": "cool-teal", "label": "Cool Teal" },
+        { "value": "bleach-bypass", "label": "Bleach Bypass" }
+      ]
+    },
+    {
+      "id": "split",
+      "type": "number",
+      "role": "motion",
+      "label": "Split point",
+      "description": "How far across the plate the edge stops to hold the comparison, before it commits and takes the rest.",
+      "default": 62,
+      "min": 25,
+      "max": 85,
+      "step": 1,
+      "unit": "%"
+    },
+    {
+      "id": "edge",
+      "type": "enum",
+      "role": "style",
+      "label": "Edge",
+      "description": "The divider line riding the wipe. Hidden drops it entirely so the grade arrives with no seam.",
+      "default": "hairline",
+      "options": [
+        { "value": "hairline", "label": "Hairline" },
+        { "value": "bold", "label": "Bold" },
+        { "value": "hidden", "label": "Hidden" }
+      ]
+    },
+    {
+      "id": "labels",
+      "type": "enum",
+      "role": "style",
+      "label": "Labels",
+      "description": "Show or hide the two captions naming each half of the plate.",
+      "default": "on",
+      "options": [
+        { "value": "on", "label": "Show" },
+        { "value": "off", "label": "Hide" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/grain-field/demo.html b/registry/components/grain-field/demo.html
new file mode 100644
index 0000000000..b30cbec12d
--- /dev/null
+++ b/registry/components/grain-field/demo.html
@@ -0,0 +1,86 @@
+<!doctype html>
+<!--
+  grain-field demo. This standalone composition mounts grain-field.html
+  through data-composition-src. The coarse violet overrides prove both
+  variables flow through the mount while the primitive stays host-sized.
+-->
+<html lang="en" data-composition-id="grain-field-demo" data-composition-duration="4">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Grain Field Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0b0c0e;
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --surface: #17191f;
+        --fg: #f8fafc;
+        --muted: #94a3b8;
+        --accent: #38bdf8;
+        --accent-2: #a78bfa;
+        --brand: #34d399;
+        --border: #334155;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 42%, #17191f 0%, #0b0c0e 72%);
+      }
+
+      .mount-card {
+        width: 75%;
+        height: 70%;
+        left: 12.5%;
+        top: 15%;
+        overflow: hidden;
+        border: 1px solid rgb(255 255 255 / 0.16);
+        border-radius: 28px;
+        background: #080a10;
+        box-shadow: 0 5cqh 14cqh rgb(0 0 0 / 0.52);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="grain-field-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="grain-field-mount"
+        class="mount-card clip"
+        data-composition-id="grain-field"
+        data-composition-src="./grain-field.html"
+        data-variable-values='{"density":"coarse","accent":"violet"}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="1440"
+        data-height="756"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["grain-field-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/grain-field/grain-field.html b/registry/components/grain-field/grain-field.html
new file mode 100644
index 0000000000..b1354192b7
--- /dev/null
+++ b/registry/components/grain-field/grain-field.html
@@ -0,0 +1,170 @@
+<!doctype html>
+<!--
+  grain-field: HyperFrames video primitive (backgrounds / ambient)
+
+  Concept: a fixed repeated dot field drifts slowly across a deep,
+  accent-tinted luminance wash. The dots stay intentionally legible at
+  gallery-card size so the texture reads as a designed surface.
+
+  Variables:
+    - density (fine | coarse, default fine): controls dot size and spacing.
+    - accent (green | blue | violet, default green): colors the dots and wash.
+
+  Envelope: IN = 0, HOLD = the full elastic duration, OUT = 0. A longer mount
+  stretches only the ambient drift cycle.
+
+  Loop invariant: the phase completes one full sine cycle during HOLD. The
+  endpoint is normalized to phase zero before rendering, so t=0 and
+  t=duration have exactly the same transform.
+
+  Sound: none.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, has no data-width or data-height,
+  and registers one paused timeline under the hardcoded grain-field id.
+-->
+<html
+  lang="en"
+  data-composition-id="grain-field"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "density", "type": "enum", "role": "style", "label": "Density", "description": "Dot size and spacing across the grain field.", "default": "fine", "options": [{ "value": "fine", "label": "Fine" }, { "value": "coarse", "label": "Coarse" }] },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Accent token family used to color the dots and luminance wash.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Grain Field</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="grain-field" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            pointer-events: none;
+          }
+
+          .gf-clip,
+          .gf-base,
+          .gf-field {
+            position: absolute;
+          }
+
+          .gf-clip,
+          .gf-base {
+            inset: 0;
+          }
+
+          .gf-clip {
+            overflow: hidden;
+          }
+
+          .gf-base {
+            background:
+              radial-gradient(
+                ellipse at 28% 20%,
+                color-mix(in srgb, var(--gf-color) 18%, transparent) 0%,
+                transparent 56%
+              ),
+              linear-gradient(
+                145deg,
+                color-mix(in srgb, var(--gf-base) 90%, var(--gf-color)) 0%,
+                var(--gf-base) 72%
+              );
+          }
+
+          .gf-field {
+            inset: -8cqw;
+            background-image: radial-gradient(
+              circle,
+              color-mix(in srgb, var(--gf-color) 70%, white) 0 var(--gf-dot),
+              transparent calc(var(--gf-dot) + 0.12cqmin)
+            );
+            background-position: 0 0;
+            background-size: var(--gf-cell) var(--gf-cell);
+            opacity: 0.82;
+            will-change: transform;
+          }
+        </style>
+
+        <div
+          id="grain-field-clip"
+          class="gf-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="gf-base"></div>
+          <div class="gf-field"></div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var field = root.querySelector(".gf-field");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            // Invalid enum overrides return to their declared defaults.
+            var accentTokens = {
+              green: "var(--brand, #34d399)",
+              blue: "var(--accent, #38bdf8)",
+              violet: "var(--accent-2, #a78bfa)",
+            };
+            var densityStyles = {
+              fine: { cell: "3.2cqmin", dot: "0.48cqmin" },
+              coarse: { cell: "5.8cqmin", dot: "0.86cqmin" },
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentTokens, vars.accent)
+              ? vars.accent
+              : "green";
+            var density = vars.density === "coarse" ? "coarse" : "fine";
+
+            root.style.setProperty("--gf-color", accentTokens[accent]);
+            root.style.setProperty("--gf-base", "var(--bg, #080a10)");
+            root.style.setProperty("--gf-cell", densityStyles[density].cell);
+            root.style.setProperty("--gf-dot", densityStyles[density].dot);
+
+            var TAU = Math.PI * 2;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var state = { phase: 0 };
+
+            function renderPose() {
+              var phase = state.phase === TAU ? 0 : state.phase;
+              var drift = Math.sin(phase);
+              gsap.set(field, { x: drift * 2.8 + "cqw", y: drift * 2.2 + "cqh" });
+            }
+
+            var tl = gsap.timeline({ paused: true });
+
+            // HOLD: uniform phase travel becomes a smooth sine drift. One full
+            // cycle restores the exact starting pose at the duration boundary.
+            tl.to(state, { phase: TAU, duration: duration, ease: "none", onUpdate: renderPose }, 0);
+
+            renderPose();
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines["grain-field"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/grain-field/registry-item.json b/registry/components/grain-field/registry-item.json
new file mode 100644
index 0000000000..5b48ae2db8
--- /dev/null
+++ b/registry/components/grain-field/registry-item.json
@@ -0,0 +1,46 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "grain-field",
+  "type": "hyperframes:component",
+  "title": "Grain Field",
+  "description": "A clearly visible accent-tinted dot field drifts over a subtle luminance gradient in an exact ambient loop.",
+  "tags": ["motion-primitive", "background", "grain", "dots", "texture", "ambient", "loopable"],
+  "jobs": ["orient"],
+  "family": "backgrounds",
+  "profile": "ambient",
+  "evidence": "Wave G U20 grain-field specification",
+  "files": [
+    {
+      "path": "grain-field.html",
+      "target": "compositions/components/grain-field.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "density",
+      "type": "enum",
+      "role": "style",
+      "label": "Density",
+      "description": "Dot size and spacing across the grain field.",
+      "default": "fine",
+      "options": [
+        { "value": "fine", "label": "Fine" },
+        { "value": "coarse", "label": "Coarse" }
+      ]
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Accent token family used to color the dots and luminance wash.",
+      "default": "green",
+      "options": [
+        { "value": "green", "label": "Green" },
+        { "value": "blue", "label": "Blue" },
+        { "value": "violet", "label": "Violet" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/grid-card-assemble/README.md b/registry/components/grid-card-assemble/README.md
new file mode 100644
index 0000000000..26e4923f63
--- /dev/null
+++ b/registry/components/grid-card-assemble/README.md
@@ -0,0 +1,58 @@
+# grid-card-assemble
+
+Layout / feature-tour primitive: N capability cards stagger-assemble into a
+grid or a vertical list, then hold perfectly still. Each card is a real token
+card: surface fill with a subtle top light, hairline border, contract radius,
+generous padding, a thin-line icon that draws on as the card lands, a
+wide-tracked mono label, and an optional one-line muted body. Entrances are a
+fade plus a short slide directly into the card's own slot: no scatter from
+center, no overshoot, a smooth long-tail settle.
+
+Six generic thin-line icons (shield, chart, cloud, bolt, layers, doc) cycle
+deterministically by item index and draw on with a getTotalLength dash inside
+each card's settle window.
+
+Authored at 4.5s with an elastic HOLD: the IN cascade is fixed, everything
+after it is still frame until the (optional) exit.
+
+## Variables
+
+| id        | type                               | default                          | notes                                                                                                                                                                                                                                                                                                                                      |
+| --------- | ---------------------------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `items`   | string                             | `Capture,Compose,Render,Publish` | Comma list of cards (3 to 12; extras past 12 are dropped). An entry formatted `Label: body text` renders a one-line muted body under the label; a plain entry is label-only. Body text must not contain commas.                                                                                                                            |
+| `layout`  | enum `grid` \| `list`              | `grid`                           | Grid wraps by `columns`; list stacks horizontal icon-left rows in one column.                                                                                                                                                                                                                                                              |
+| `columns` | number 0-4                         | `0`                              | Grid only. `0` = auto: one row up to 3 items, then `ceil(sqrt(N))` (4 items form 2x2, 9 items form 3x3).                                                                                                                                                                                                                                   |
+| `cues`    | string                             | `""`                             | Comma-separated per-item entrance times in seconds relative to mount start. Blank or invalid entries fall back to that item's default cascade slot: the cascade spreads so the last card lands near 60% of the authored duration (short mounts compress toward ~0.1s gaps). Values are clamped so every card lands before any exit begins. |
+| `accent`  | enum `green` \| `blue` \| `violet` | `green`                          | Icon stroke family: green rides `--brand`, blue `--accent`, violet `--accent-2`.                                                                                                                                                                                                                                                           |
+| `exit`    | enum `none` \| `fade` \| `up`      | `none`                           | Frame roots own transitions; the default hold ends the film.                                                                                                                                                                                                                                                                               |
+
+## Content override (items slot)
+
+The stage grid is the `[data-slot="items"]` element inside the template. A
+fork that wants custom card content authors its own children there; when that
+element already has children the script animates them as the cards instead of
+generating capability cards from `items` (layout, `cues`, and `exit` still
+apply, and `items` then only feeds the stage's aria-label). Any
+`.gca-icon path` elements inside slotted cards still dash-draw as the card
+lands.
+
+## Usage
+
+```html
+<div
+  class="clip"
+  data-composition-id="grid-card-assemble"
+  data-composition-src="./components/grid-card-assemble.html"
+  data-variable-values='{"items":"Permissions: Scoped by your policies,Audit trail: Every action logged,Deploy: Your cloud or on-prem","accent":"blue"}'
+  data-start="0"
+  data-duration="4.5"
+  data-track-index="0"
+></div>
+```
+
+Golden refs: scramble-reveal (token consumption), toggle-flip (mount-contract
+structure).
+
+Note: icon dash draws are driven through the `stroke-dashoffset` attribute
+(GSAP attr plugin), not CSS style. Chrome under-invalidates the path region
+for CSS dash changes, which leaves stale stroke fragments on reverse seeks.
diff --git a/registry/components/grid-card-assemble/demo.html b/registry/components/grid-card-assemble/demo.html
new file mode 100644
index 0000000000..4a9e1f66ad
--- /dev/null
+++ b/registry/components/grid-card-assemble/demo.html
@@ -0,0 +1,82 @@
+<!doctype html>
+<!--
+  grid-card-assemble demo. Large centered mount (88% x 78%) on a light
+  editorial backdrop: the six-card grid gets room to assemble at real scale
+  instead of being crushed into a text strip.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>grid-card-assemble Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #f4f6f9);
+      }
+
+      #root {
+        --bg: #f4f6f9;
+        --fg: #14161b;
+        --surface: #ffffff;
+        --border: #dfe4ec;
+        --brand: #1d4ed8;
+        --accent: #0284c7;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 40%, #ffffff 0%, var(--bg, #f4f6f9) 70%);
+      }
+
+      .mount-stage {
+        width: 88%;
+        height: 78%;
+        left: 6%;
+        top: 11%;
+        container-type: size;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="grid-card-assemble-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4.5"
+      data-fps="30"
+    >
+      <div
+        id="grid-card-assemble-mount"
+        class="mount-stage clip"
+        data-composition-id="grid-card-assemble"
+        data-composition-src="./grid-card-assemble.html"
+        data-variable-values='{"items":"Permissions,Audit trail,Deploy,Search,Drafts,Citations","layout":"grid","columns":3,"accent":"violet"}'
+        data-start="0"
+        data-duration="4.5"
+        data-track-index="0"
+        data-width="1690"
+        data-height="842"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["grid-card-assemble-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/grid-card-assemble/grid-card-assemble.html b/registry/components/grid-card-assemble/grid-card-assemble.html
new file mode 100644
index 0000000000..ec4949691b
--- /dev/null
+++ b/registry/components/grid-card-assemble/grid-card-assemble.html
@@ -0,0 +1,468 @@
+<!doctype html>
+<!--
+  grid-card-assemble: HyperFrames video primitive (layout / feature tour)
+
+  N capability cards stagger-assemble into a grid or a vertical list. Every
+  card is a real token card: surface fill with a subtle top light, hairline
+  border, contract radius, generous padding, a thin-line icon that draws on
+  as the card lands (getTotalLength dash), a wide-tracked mono label, and an
+  optional one-line muted body. Each card enters with a fade and a SHORT
+  slide directly into its own slot: no scatter from center, no overshoot, a
+  smooth long-tail settle (power3.out). Once the layout resolves the frame
+  holds perfectly STILL: no float, no push-in.
+
+  Variables (declared in data-composition-variables below):
+    - items (string, default "Capture,Compose,Render,Publish"): comma list of
+      cards. An entry formatted "Label: body text" renders the label plus a
+      one-line muted body; a plain entry renders label only. 3 to 12 items
+      render gracefully; extras past 12 are dropped. Body text must not
+      contain commas (the comma is the item separator).
+    - layout ("grid" | "list", default "grid"): grid wraps by columns, list
+      stacks horizontal rows vertically.
+    - columns (number, default 0 = auto): grid column count, grid layout only.
+      0 picks one row up to 3 items, then ceil(sqrt(N)) so 4 items form 2x2
+      and 9 items form 3x3.
+    - cues (string, default ""): comma-separated per-item entrance times in
+      seconds relative to mount start. A blank or invalid entry falls back to
+      that item's default cascade slot: the cascade spreads so the last card
+      lands near 60% of the authored duration (short mounts compress toward
+      ~0.1s gaps). Values are clamped so every card lands before any exit
+      begins.
+    - accent (green | blue | violet, default green): icon stroke family.
+      green -> --brand, blue -> --accent, violet -> --accent-2.
+    - exit ("none" | "fade" | "up", default "none"): frame roots own
+      transitions; the default hold-ends-the-film.
+
+  Icons: six generic thin-line glyphs (shield, chart, cloud, bolt, layers,
+  doc) cycled deterministically by item index. Each path is dash-primed at
+  mount and draws on inside its card's settle window.
+
+  Envelope, fixed IN with elastic HOLD (never gsap.timeScale()):
+    IN    = last entrance start + 0.65s card settle (icon draws fit inside)
+    HOLD  = still, elastic: everything after IN until OUT (or until D)
+    OUT   = 0 when exit is "none"; else 0.45s fade / fade-up of the stage.
+    Entrance starts compress together when D is too short for the cascade.
+
+  Content override: the runtime clones only this template. A fork that wants
+  custom card content places its own children inside the
+  [data-slot="items"] grid element; when that element already has children
+  the script animates them as the cards instead of generating capability
+  cards from the items variable (layout, cues, and exit still apply, and any
+  .gca-icon paths inside slotted cards still dash-draw).
+
+  Mount contract: elastic root, no data-width/data-height, styled via #root
+  only, container-type: size, one paused timeline registered under the
+  literal "grid-card-assemble" key. Deterministic and seek-safe: fromTo
+  entrances, immediateRender: false on post-entrance tweens, no CSS
+  transitions, no Date.now, no randomness.
+-->
+<html
+  lang="en"
+  data-composition-id="grid-card-assemble"
+  data-composition-duration="4.5"
+  data-composition-variables='[
+    { "id": "items", "type": "string", "role": "content", "label": "Items", "description": "Comma-separated cards (3 to 12). \"Label: body\" adds a one-line muted body under the label.", "default": "Capture,Compose,Render,Publish" },
+    { "id": "layout", "type": "enum", "role": "layout", "label": "Layout", "description": "Grid wraps by columns; list stacks vertically.", "default": "grid", "options": [{ "value": "grid", "label": "Grid" }, { "value": "list", "label": "List" }] },
+    { "id": "columns", "type": "number", "role": "layout", "label": "Columns", "description": "Grid column count (grid layout only). 0 picks automatically: one row up to 3 items, then ceil(sqrt(N)).", "default": 0, "min": 0, "max": 4, "step": 1 },
+    { "id": "cues", "type": "string", "role": "timing", "label": "Cues", "description": "Comma-separated per-item entrance times in seconds. Blank entries use the default cascade.", "default": "" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Accent token family used by the card icons.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "How the assembled layout leaves the frame. Default none: the hold ends the film.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Grid Card Assemble</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="grid-card-assemble" data-duration="4.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            background: var(--bg, transparent);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            pointer-events: none;
+          }
+
+          .gca-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+          }
+
+          .gca-stage {
+            display: grid;
+            width: var(--gca-stage-w, 88cqw);
+            grid-auto-rows: var(--gca-row-h, 34cqh);
+            gap: var(--space-2, 2.2cqmin);
+            will-change: transform, opacity;
+          }
+
+          .gca-card {
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            min-width: 0;
+            min-height: 0;
+            padding: var(--gca-pad, 4cqh);
+            overflow: hidden;
+            border: 1px solid var(--border, #38404e);
+            border-radius: var(--radius, 1.8cqmin);
+            /* Token surface with a subtle top light so the card reads as a
+               real plane against the stage (no color-mix: keeps the
+               contrast auditor honest). */
+            background:
+              linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.01) 60%),
+              var(--surface, #141a23);
+            will-change: transform, opacity;
+          }
+
+          .gca-icon {
+            flex: 0 0 auto;
+            width: var(--gca-icon, 7cqh);
+            height: var(--gca-icon, 7cqh);
+          }
+
+          .gca-icon path {
+            fill: none;
+            stroke: var(--gca-accent, var(--brand, #71f5a7));
+            stroke-width: 2.2;
+            stroke-linecap: round;
+            stroke-linejoin: round;
+          }
+
+          .gca-text {
+            min-width: 0;
+          }
+
+          .gca-label {
+            overflow: hidden;
+            color: var(--fg, #f8fafc);
+            font-size: var(--gca-font, 2.2cqh);
+            font-weight: 500;
+            line-height: 1.25;
+            letter-spacing: 0.16em;
+            text-transform: uppercase;
+            white-space: nowrap;
+          }
+
+          .gca-body {
+            margin-top: var(--gca-body-gap, 1.1cqh);
+            overflow: hidden;
+            color: var(--muted, #94a3b8);
+            font-family: var(--font-body, system-ui, -apple-system, "Segoe UI", sans-serif);
+            font-size: var(--gca-body-font, 2.6cqh);
+            font-weight: 400;
+            line-height: 1.4;
+            letter-spacing: 0.01em;
+            white-space: nowrap;
+          }
+
+          /* List rows read horizontally: icon left, text block beside it. */
+          .gca-stage[data-layout="list"] .gca-card {
+            flex-direction: row;
+            align-items: center;
+            justify-content: flex-start;
+            gap: var(--space-2, 2.2cqmin);
+          }
+
+          .gca-stage[data-layout="list"] .gca-body {
+            margin-top: var(--gca-body-gap, 0.6cqh);
+          }
+        </style>
+
+        <div
+          id="grid-card-assemble-clip"
+          class="gca-clip clip"
+          data-start="0"
+          data-duration="4.5"
+          data-track-index="0"
+        >
+          <div class="gca-stage" data-slot="items" role="list"></div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            // Literal id, never read off the DOM: the flattening step strips
+            // data-composition-id from the mounted root (see toggle-flip).
+            var compositionId = "grid-card-assemble";
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".gca-stage");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var itemsValue =
+              vars.items == null || String(vars.items).trim() === ""
+                ? "Capture,Compose,Render,Publish"
+                : String(vars.items);
+            var rawItems = itemsValue
+              .split(",")
+              .map(function (token) {
+                return token.trim();
+              })
+              .filter(function (token) {
+                return token !== "";
+              })
+              .slice(0, 12);
+            if (rawItems.length === 0) rawItems = ["Capture", "Compose", "Render", "Publish"];
+
+            // "Label: body" entries carry a one-line muted body; plain
+            // entries are label-only cards.
+            var entries = rawItems.map(function (raw) {
+              var split = raw.indexOf(":");
+              if (split > 0) {
+                return {
+                  label: raw.slice(0, split).trim(),
+                  body: raw.slice(split + 1).trim(),
+                };
+              }
+              return { label: raw, body: "" };
+            });
+
+            var layout = vars.layout === "list" ? "list" : "grid";
+            var isList = layout === "list";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            root.style.setProperty("--gca-accent", accentColors[accent]);
+
+            // Six generic thin-line glyphs cycled by index (48-box paths).
+            var ICONS = [
+              ["M24 44s16-8 16-20V10L24 4 8 10v14c0 12 16 20 16 20z", "M17 23l5 5 10-10"],
+              ["M8 6v34h34", "M16 30l8-9 6 5 10-12"],
+              ["M36 20h-2.5A16 16 0 1 0 18 40h18a10 10 0 0 0 0-20z"],
+              ["M26 4L10 27h10l-3 17 17-24H23l3-16z"],
+              ["M24 6L4 16l20 10 20-10L24 6z", "M4 24l20 10 20-10", "M4 32l20 10 20-10"],
+              ["M14 4h14l8 8v32H14z", "M28 4v8h8", "M20 24h10", "M20 31h7"],
+            ];
+            var SVG_NS = "http://www.w3.org/2000/svg";
+
+            // Content override: a fork may author its own cards inside the
+            // [data-slot="items"] element; then the items variable only
+            // supplies labels for accessibility, not markup.
+            var cards = Array.prototype.slice.call(stage.children);
+            if (cards.length === 0) {
+              cards = entries.map(function (entry, index) {
+                var card = document.createElement("div");
+                card.className = "gca-card";
+                card.setAttribute("role", "listitem");
+
+                var icon = document.createElementNS(SVG_NS, "svg");
+                icon.setAttribute("class", "gca-icon");
+                icon.setAttribute("viewBox", "0 0 48 48");
+                icon.setAttribute("aria-hidden", "true");
+                ICONS[index % ICONS.length].forEach(function (d) {
+                  var path = document.createElementNS(SVG_NS, "path");
+                  path.setAttribute("d", d);
+                  icon.appendChild(path);
+                });
+                card.appendChild(icon);
+
+                var text = document.createElement("div");
+                text.className = "gca-text";
+                var label = document.createElement("div");
+                label.className = "gca-label";
+                label.textContent = entry.label;
+                text.appendChild(label);
+                if (entry.body !== "") {
+                  var body = document.createElement("div");
+                  body.className = "gca-body";
+                  body.textContent = entry.body;
+                  text.appendChild(body);
+                }
+                card.appendChild(text);
+                stage.appendChild(card);
+                return card;
+              });
+            }
+            var count = cards.length;
+            stage.setAttribute("data-layout", layout);
+            stage.setAttribute(
+              "aria-label",
+              entries
+                .map(function (entry) {
+                  return entry.label;
+                })
+                .join(", "),
+            );
+
+            // Layout geometry: columns wrap the grid; list is one column.
+            // 3 or fewer sit on one row; beyond that ceil(sqrt(N)) keeps the
+            // grid near-square (4 -> 2x2, 9 -> 3x3, 12 -> 4x3).
+            var autoColumns = count <= 3 ? count : Math.ceil(Math.sqrt(count));
+            var requested = Math.round(Number(vars.columns)) || 0;
+            var columns =
+              layout === "list"
+                ? 1
+                : Math.max(1, Math.min(4, requested > 0 ? requested : autoColumns));
+            var rows = Math.ceil(count / columns);
+            stage.style.gridTemplateColumns = "repeat(" + columns + ", minmax(0, 1fr))";
+
+            var hasBodies = entries.some(function (entry) {
+              return entry.body !== "";
+            });
+
+            // The assembled wall fills the mount with intent: ~76cqh of
+            // vertical budget split across rows (gap approximated at 3cqh).
+            // Label-only grids take shorter rows so cards stay proportioned.
+            var stageW = isList ? 64 : 88;
+            var rowCap = isList ? 15 : hasBodies ? 38 : 30;
+            var rowH = Math.max(6, Math.min(rowCap, (76 - 3 * (rows - 1)) / rows));
+            root.style.setProperty("--gca-stage-w", stageW + "cqw");
+            root.style.setProperty("--gca-row-h", rowH.toFixed(3) + "cqh");
+
+            // Card internals scale off the row height (set once at mount,
+            // never tweened: cq-unit custom-property tweens break seeks).
+            var pad = rowH * (isList ? 0.16 : 0.12);
+            var iconSize = isList ? rowH * 0.5 : Math.min(rowH * 0.3, 9.5);
+            root.style.setProperty("--gca-pad", pad.toFixed(3) + "cqh");
+            root.style.setProperty("--gca-icon", iconSize.toFixed(3) + "cqh");
+            root.style.setProperty(
+              "--gca-body-gap",
+              (rowH * (isList ? 0.03 : 0.035)).toFixed(3) + "cqh",
+            );
+
+            // Deterministic text fitting: wide-tracked mono label at ~0.75em
+            // per glyph, sans body at ~0.52em; each also bounded by row
+            // height so short mounts stay composed.
+            var maxChars = entries.reduce(function (max, entry) {
+              return Math.max(max, Array.from(entry.label).length);
+            }, 1);
+            var maxBody = entries.reduce(function (max, entry) {
+              return Math.max(max, Array.from(entry.body).length);
+            }, 0);
+            var cellW = stageW / columns;
+            var textW = isList ? cellW * 0.62 : cellW * 0.78;
+            var labelCqw = Math.min(2.6, textW / (maxChars * 0.75));
+            var labelCqh = rowH * (isList ? 0.23 : 0.09);
+            root.style.setProperty(
+              "--gca-font",
+              "min(" + labelCqw.toFixed(3) + "cqw, " + labelCqh.toFixed(3) + "cqh)",
+            );
+            if (maxBody > 0) {
+              var bodyCqw = Math.min(2.2, textW / (maxBody * 0.56));
+              var bodyCqh = rowH * (isList ? 0.19 : 0.095);
+              root.style.setProperty(
+                "--gca-body-font",
+                "min(" + bodyCqw.toFixed(3) + "cqw, " + bodyCqh.toFixed(3) + "cqh)",
+              );
+            }
+
+            // RETIME RANGE: fixed IN cascade, elastic still HOLD, optional OUT.
+            var BASE_START = 0.15;
+            var GAP = 0.1;
+            var TILE_BASE = 0.65;
+            var OUT_BASE = 0.45;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4.5"));
+            var OUT = exit === "none" ? 0 : Math.min(OUT_BASE, duration * 0.25);
+            var avail = duration - OUT;
+            var TILE = Math.min(TILE_BASE, Math.max(0.2, avail - BASE_START));
+            var latestStart = Math.max(0, avail - TILE);
+            // Default cascade: the last card lands (settle included) around
+            // 60% of the authored duration, so the assembly occupies the
+            // shot instead of finishing in the first quarter and holding
+            // dead. Later cards land deeper, each icon drawing as its card
+            // arrives; the still hold begins after the final landing. Short
+            // mounts fall back to the compressed ~0.1s cascade, and nothing
+            // ever starts past latestStart (every card lands before OUT).
+            var firstStart = Math.min(BASE_START, latestStart);
+            var targetLastStart = Math.min(
+              latestStart,
+              Math.max(0.6 * duration - TILE, BASE_START + GAP * (count - 1)),
+            );
+            var gap = count > 1 ? Math.max(0, targetLastStart - firstStart) / (count - 1) : 0;
+
+            var cueList = String(vars.cues == null ? "" : vars.cues).split(",");
+            var starts = cards.map(function (card, index) {
+              var cue = Number((cueList[index] || "").trim());
+              var hasCue = (cueList[index] || "").trim() !== "" && Number.isFinite(cue);
+              var start = hasCue ? cue : firstStart + gap * index;
+              return Math.max(0, Math.min(start, latestStart));
+            });
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: fade + short slide directly into the slot, long-tail settle,
+            // no overshoot. Explicit both-endpoints state so any seek is exact.
+            cards.forEach(function (card, index) {
+              gsap.set(card, { opacity: 0, y: "3cqh" });
+              tl.fromTo(
+                card,
+                { opacity: 0, y: "3cqh" },
+                { opacity: 1, y: "0cqh", duration: TILE, ease: "power3.out" },
+                starts[index],
+              );
+
+              // The icon outline draws on inside the card's settle window
+              // (dash-primed inline so a seek to 0 shows it undrawn).
+              // Attribute-driven (not style): CSS strokeDashoffset changes
+              // under-invalidate the path region in Chrome, leaving stale
+              // stroke fragments on reverse seeks; attributes repaint fully.
+              var paths = card.querySelectorAll(".gca-icon path");
+              var iconStart = TILE * 0.25;
+              var iconAvail = TILE * 0.7;
+              paths.forEach(function (path, j) {
+                var len = path.getTotalLength();
+                path.setAttribute("stroke-dasharray", String(len));
+                path.setAttribute("stroke-dashoffset", String(len));
+                tl.fromTo(
+                  path,
+                  { attr: { "stroke-dashoffset": len } },
+                  {
+                    attr: { "stroke-dashoffset": 0 },
+                    duration: iconAvail * 0.55,
+                    ease: "power2.out",
+                    immediateRender: false,
+                  },
+                  starts[index] + iconStart + (j / paths.length) * iconAvail * 0.45,
+                );
+              });
+            });
+
+            // HOLD: intentionally still. Nothing floats, nothing pushes in.
+
+            // OUT: whole assembled stage leaves together.
+            if (exit !== "none") {
+              var OUT_START = duration - OUT;
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+              if (exit === "up") {
+                tl.to(stage, { y: "-3cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              }
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/grid-card-assemble/registry-item.json b/registry/components/grid-card-assemble/registry-item.json
new file mode 100644
index 0000000000..b40f95e5dc
--- /dev/null
+++ b/registry/components/grid-card-assemble/registry-item.json
@@ -0,0 +1,87 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "grid-card-assemble",
+  "type": "hyperframes:component",
+  "title": "Grid Card Assemble",
+  "description": "N capability cards (thin-line icon that draws on, mono label, optional muted body) stagger-assemble into a grid or vertical list with a fade plus short slide into slot, then hold perfectly still.",
+  "tags": ["motion-primitive", "layout", "grid", "list", "stagger", "assemble", "feature-tour"],
+  "jobs": ["reveal", "tour"],
+  "family": "layout",
+  "profile": "assemble",
+  "evidence": "Wave J J1-6: hero-shelf layout / feature-tour unit per the adversarial panel recompose",
+  "syncPoints": [{ "id": "grid-assembled", "phase": "in", "offset": 1.0 }],
+  "files": [
+    {
+      "path": "grid-card-assemble.html",
+      "target": "compositions/components/grid-card-assemble.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "items",
+      "type": "string",
+      "role": "content",
+      "label": "Items",
+      "description": "Comma-separated cards (3 to 12). \"Label: body\" adds a one-line muted body under the label.",
+      "default": "Capture,Compose,Render,Publish"
+    },
+    {
+      "id": "layout",
+      "type": "enum",
+      "role": "layout",
+      "label": "Layout",
+      "description": "Grid wraps by columns; list stacks vertically.",
+      "default": "grid",
+      "options": [
+        { "value": "grid", "label": "Grid" },
+        { "value": "list", "label": "List" }
+      ]
+    },
+    {
+      "id": "columns",
+      "type": "number",
+      "role": "layout",
+      "label": "Columns",
+      "description": "Grid column count (grid layout only). 0 picks automatically: one row up to 3 items, then ceil(sqrt(N)).",
+      "default": 0,
+      "min": 0,
+      "max": 4,
+      "step": 1
+    },
+    {
+      "id": "cues",
+      "type": "string",
+      "role": "timing",
+      "label": "Cues",
+      "description": "Comma-separated per-item entrance times in seconds. Blank entries use the default cascade.",
+      "default": ""
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Accent token family used by the card icons.",
+      "default": "green",
+      "options": [
+        { "value": "green", "label": "Green" },
+        { "value": "blue", "label": "Blue" },
+        { "value": "violet", "label": "Violet" }
+      ]
+    },
+    {
+      "id": "exit",
+      "type": "enum",
+      "role": "timing",
+      "label": "Exit",
+      "description": "How the assembled layout leaves the frame. Default none: the hold ends the film.",
+      "default": "none",
+      "options": [
+        { "value": "none", "label": "None" },
+        { "value": "fade", "label": "Fade" },
+        { "value": "up", "label": "Up" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/halftone-dissolve/README.md b/registry/components/halftone-dissolve/README.md
new file mode 100644
index 0000000000..4395db1372
--- /dev/null
+++ b/registry/components/halftone-dissolve/README.md
@@ -0,0 +1,68 @@
+# halftone-dissolve
+
+Transition texture primitive: scene A dissolves into scene B through a
+growing halftone dot field. Accent ink dots pop onto a fixed staggered grid
+smallest-first, each dot then opens into a circular window onto B (the ink
+leads the window by a beat, so every site flashes accent before B fills it),
+until the windows merge and B fully replaces A. Radius per dot is a pure
+function of (grid position, progress) via a seeded threshold map; the
+direction enum orders the thresholds. 3.5s authored, elastic HOLD on B
+(never time-scaled).
+
+## Mounting
+
+```html
+<div
+  class="clip"
+  data-composition-id="halftone-dissolve"
+  data-composition-src="./components/halftone-dissolve.html"
+  data-variable-values='{"direction":"center","dot_size":"large","accent":"blue"}'
+  data-start="0"
+  data-duration="3.5"
+  data-track-index="0"
+></div>
+```
+
+## Scene slots
+
+Both scenes are slots. Place inert templates anywhere in the HOST page:
+
+```html
+<template data-slot="halftone-dissolve-a"> ...outgoing scene... </template>
+<template data-slot="halftone-dissolve-b"> ...incoming scene... </template>
+```
+
+Direct `img` / `video` children are stretched to cover the stage; arbitrary
+HTML is centered. A missing slot falls back to a token monogram tile
+(A neutral on `--muted`, B tinted by the accent).
+
+## Variables
+
+| id          | type   | default | notes                                                                                                              |
+| ----------- | ------ | ------- | ------------------------------------------------------------------------------------------------------------------ |
+| dot_size    | enum   | medium  | small, medium, or large grid pitch (host width / 44, 30, 20).                                                      |
+| direction   | enum   | ltr     | ltr sweeps left to right, center grows from the middle, noise is a pure seeded scatter.                            |
+| dissolve_at | number | 1.1     | Seconds from mount start when the dissolve begins. Clamped so the 1.3s dissolve and any exit stay inside the clip. |
+| accent      | enum   | green   | green maps to --brand, blue to --accent, violet to --accent-2. Colors the ink dots.                                |
+| exit        | enum   | none    | none holds scene B (frame roots own transitions); fade or up add a 0.45s departure.                                |
+
+## Choreography
+
+- 0.00s: scene A holds clean; no dots.
+- dissolve_at: the field starts. Dots appear smallest-first in threshold
+  order (with a seeded jitter so the front stays granular, never ruled),
+  each as accent ink, then opening into a window onto B.
+- dissolve_at + 1.3s: the windows merge past full coverage; the clip path
+  releases and B holds clean.
+- HOLD: dead still on B, elastic with the clip duration.
+
+Sync point `dissolve` fires as the field starts; align SFX to it.
+
+## Determinism
+
+The grid and its threshold map are computed once at build from a fixed LCG
+seed. One plain-object progress tween feeds one painter that redraws the
+ink canvas from scratch and rebuilds B's clip-path string, all pure
+functions of progress, so eventful seeks land identical frames in any order
+and either direction. The raster and clip-path basis is the host box
+measured once at mount.
diff --git a/registry/components/halftone-dissolve/demo.html b/registry/components/halftone-dissolve/demo.html
new file mode 100644
index 0000000000..236bc926c7
--- /dev/null
+++ b/registry/components/halftone-dissolve/demo.html
@@ -0,0 +1,147 @@
+<!doctype html>
+<!--
+  halftone-dissolve demo. A full-bleed 1920x1080 LIGHT host mounts the
+  primitive through data-composition-src with non-default variables
+  (center direction, large dots, blue accent) and supplies both scene
+  slots to prove the slot path while the primitive stays elastic.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Halftone Dissolve Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #f5f6f8);
+      }
+
+      #root {
+        --bg: #f5f6f8;
+        --fg: #101318;
+        --muted: #5b6472;
+        --surface: #ffffff;
+        --border: #d7dce4;
+        --brand: #14a35e;
+        --accent: #2f6fed;
+        --accent-2: #7a5cd6;
+        --radius: 24px;
+        --font-display: "Inter", system-ui, sans-serif;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg);
+      }
+
+      .mount-stage {
+        position: absolute;
+        inset: 0;
+        container-type: size;
+        overflow: hidden;
+      }
+
+      .demo-scene {
+        position: absolute;
+        inset: 0;
+        display: grid;
+        place-items: center;
+        gap: 24px;
+        font-family: var(--font-display, system-ui, sans-serif);
+      }
+
+      .demo-scene .panel {
+        display: grid;
+        place-items: center;
+        gap: 18px;
+        width: 720px;
+        height: 420px;
+        border: 1px solid var(--border, #d7dce4);
+        border-radius: var(--radius, 24px);
+        background: var(--surface, #ffffff);
+        box-shadow: 0 30px 70px rgba(16, 19, 24, 0.08);
+      }
+
+      .demo-scene .word {
+        color: var(--fg, #101318);
+        font-size: 84px;
+        font-weight: 600;
+        letter-spacing: -0.01em;
+      }
+
+      .demo-scene .tag {
+        color: var(--muted, #5b6472);
+        font-family: var(--font-mono, monospace);
+        font-size: 26px;
+        letter-spacing: 0.14em;
+        text-transform: uppercase;
+      }
+
+      .demo-scene.b .panel {
+        border-color: color-mix(in srgb, var(--accent, #2f6fed) 40%, var(--border, #d7dce4));
+        background: color-mix(in srgb, var(--accent, #2f6fed) 6%, var(--surface, #ffffff));
+      }
+
+      .demo-scene.b .word {
+        color: var(--accent, #2f6fed);
+      }
+    </style>
+  </head>
+  <body>
+    <template data-slot="halftone-dissolve-a">
+      <div class="demo-scene a">
+        <div class="panel">
+          <span class="tag">Scene A</span>
+          <span class="word">Before</span>
+        </div>
+      </div>
+    </template>
+    <template data-slot="halftone-dissolve-b">
+      <div class="demo-scene b">
+        <div class="panel">
+          <span class="tag">Scene B</span>
+          <span class="word">After</span>
+        </div>
+      </div>
+    </template>
+
+    <div
+      id="root"
+      data-composition-id="halftone-dissolve-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="3.5"
+      data-fps="30"
+    >
+      <div
+        id="halftone-dissolve-mount"
+        class="mount-stage clip"
+        data-composition-id="halftone-dissolve"
+        data-composition-src="./halftone-dissolve.html"
+        data-variable-values='{"direction":"center","dot_size":"large","dissolve_at":1.0,"accent":"blue"}'
+        data-start="0"
+        data-duration="3.5"
+        data-track-index="0"
+        data-width="1920"
+        data-height="1080"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["halftone-dissolve-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/halftone-dissolve/halftone-dissolve.html b/registry/components/halftone-dissolve/halftone-dissolve.html
new file mode 100644
index 0000000000..30e5dc063d
--- /dev/null
+++ b/registry/components/halftone-dissolve/halftone-dissolve.html
@@ -0,0 +1,420 @@
+<!doctype html>
+<!--
+  halftone-dissolve: HyperFrames video primitive (transitions / texture)
+
+  Scene A dissolves into scene B through a growing halftone dot field:
+  accent ink dots pop onto a fixed grid smallest-first, each dot then
+  opens into a window onto B, until the windows merge and B fully
+  replaces A. Radius per dot is a pure function of (grid position, t)
+  via a seeded threshold map; the direction enum orders the thresholds.
+
+  Scenes are SLOTS. Callers supply content by placing inert templates
+  anywhere in the HOST page (templates never render, and the runtime
+  wipes the host clip's own children on mount):
+
+    <template data-slot="halftone-dissolve-a"> ... </template>
+    <template data-slot="halftone-dissolve-b"> ... </template>
+
+  Direct img/video children are stretched to cover the stage. When a
+  slot is absent, the primitive renders a token monogram tile (A neutral,
+  B accent-tinted), drawn entirely from contract tokens.
+
+  Variables (declared in data-composition-variables below):
+    - dot_size ("small" | "medium" | "large"): grid pitch.
+    - direction ("ltr" | "center" | "noise"): threshold ordering. ltr
+      sweeps left to right, center grows from the middle, noise is a
+      pure seeded scatter.
+    - dissolve_at (seconds): when the dissolve begins. Clamped so the
+      1.3s dissolve and any exit stay inside the clip.
+    - accent ("green" | "blue" | "violet"): ink dot color; green rides
+      --brand, blue rides --accent, violet rides --accent-2.
+    - exit ("none" | "fade" | "up"): default none, B holds to the cut.
+
+  Envelope, fixed segments with elastic HOLD only (never timeScale):
+    A holds until dissolve_at, the dissolve runs 1.3s, then B holds
+    dead still; OUT = 0.45s only when exit is not none.
+
+  Determinism:
+    The grid and its threshold map are computed exactly once at build
+    from fixed LCG seed 0x4a17f03d. Every frame derives from (table,
+    progress): one plain-object progress tween feeds one onUpdate
+    painter that redraws the ink canvas from scratch and rebuilds B's
+    clip-path string. No Math.random, no wall clock, no incremental
+    state. Eventful seeks (suppressEvents false) land identical frames
+    in any order. The raster and clip-path basis is the host box
+    measured once at mount, same law as the canvas raster basis.
+-->
+<html
+  lang="en"
+  data-composition-id="halftone-dissolve"
+  data-composition-duration="3.5"
+  data-composition-variables='[
+    { "id": "dot_size", "type": "enum", "role": "style", "label": "Dot size", "description": "Grid pitch for the halftone field.", "default": "medium", "options": [{ "value": "small", "label": "Small" }, { "value": "medium", "label": "Medium" }, { "value": "large", "label": "Large" }] },
+    { "id": "direction", "type": "enum", "role": "timing", "label": "Direction", "description": "Threshold ordering: ltr sweeps left to right, center grows from the middle, noise scatters.", "default": "ltr", "options": [{ "value": "ltr", "label": "Left to right" }, { "value": "center", "label": "Center out" }, { "value": "noise", "label": "Noise" }] },
+    { "id": "dissolve_at", "type": "number", "role": "timing", "label": "Dissolve at", "description": "Seconds from mount start when the dissolve begins.", "default": 1.1, "min": 0.2, "max": 10, "step": 0.1, "unit": "s" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Ink dot color: green rides --brand, blue rides --accent, violet rides --accent-2.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: scene B holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Halftone Dissolve</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="halftone-dissolve" data-duration="3.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, "Inter", system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .htd-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .htd-stage {
+            position: absolute;
+            inset: 0;
+            will-change: transform, opacity;
+          }
+
+          .htd-scene {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+          }
+
+          .htd-scene > img,
+          .htd-scene > video {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+          }
+
+          .htd-scene-b {
+            will-change: clip-path;
+            /* B must be opaque: an open window that shows the ink canvas
+               (or A) through a transparent incoming scene breaks the
+               "B fully replaces A" contract for card-style slot content. */
+            background: var(--bg, transparent);
+          }
+
+          .htd-ink {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+          }
+
+          .htd-tile {
+            display: grid;
+            place-items: center;
+            width: 46cqmin;
+            height: 46cqmin;
+            border: 0.18cqmin solid
+              color-mix(in srgb, var(--htd-tile-tint) 46%, var(--border, #475569));
+            border-radius: var(--radius, 3cqmin);
+            background: color-mix(in srgb, var(--surface, #14171c) 88%, var(--htd-tile-tint));
+            box-shadow: 0 3cqh 9cqh color-mix(in srgb, var(--bg, #000000) 35%, transparent);
+          }
+
+          .htd-tile-glyph {
+            color: var(--htd-tile-tint);
+            font-size: 22cqmin;
+            font-weight: 600;
+            line-height: 1;
+            letter-spacing: 0.02em;
+          }
+        </style>
+
+        <div
+          id="halftone-dissolve-clip"
+          class="htd-clip clip"
+          data-start="0"
+          data-duration="3.5"
+          data-track-index="0"
+        >
+          <div class="htd-stage">
+            <div class="htd-scene htd-scene-a">
+              <div class="htd-tile" style="--htd-tile-tint: var(--muted, #94a3b8)">
+                <span class="htd-tile-glyph" aria-hidden="true">A</span>
+              </div>
+            </div>
+            <canvas class="htd-ink" aria-hidden="true"></canvas>
+            <div class="htd-scene htd-scene-b">
+              <div class="htd-tile" style="--htd-tile-tint: var(--htd-accent, #71f5a7)">
+                <span class="htd-tile-glyph" aria-hidden="true">B</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".htd-stage");
+            var sceneA = root.querySelector(".htd-scene-a");
+            var sceneB = root.querySelector(".htd-scene-b");
+            var canvas = root.querySelector(".htd-ink");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            function num(value, fallback, min, max) {
+              var n = Number(value);
+              if (!isFinite(n)) n = fallback;
+              return Math.max(min, Math.min(max, n));
+            }
+
+            var dotSize =
+              vars.dot_size === "small" || vars.dot_size === "large" ? vars.dot_size : "medium";
+            var direction =
+              vars.direction === "center" || vars.direction === "noise" ? vars.direction : "ltr";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            // The bundler mirrors composition variables as scoped CSS custom
+            // props, so this unit's own accent variable shadows the contract
+            // --accent token inside the subtree ("blue" is a valid CSS color
+            // and would render pure blue). When the shadow is present, fall
+            // back to the literal contract value instead of var(--accent).
+            var computedAccent = getComputedStyle(root).getPropertyValue("--accent").trim();
+            if (
+              computedAccent === "green" ||
+              computedAccent === "blue" ||
+              computedAccent === "violet"
+            ) {
+              accentColors.blue = "#61a8ff";
+            }
+            root.style.setProperty("--htd-accent", accentColors[accent]);
+
+            // SLOTS. Caller templates live at HOST DOCUMENT level (the mount
+            // wipes host-clip children, and templates never render).
+            var hostDoc = root.ownerDocument;
+            function fillSlot(scene, slotName) {
+              var slotTemplate = null;
+              try {
+                slotTemplate = hostDoc.querySelector('template[data-slot="' + slotName + '"]');
+              } catch (error) {
+                slotTemplate = null;
+              }
+              if (slotTemplate) {
+                scene.querySelector(".htd-tile").remove();
+                scene.appendChild(hostDoc.importNode(slotTemplate.content, true));
+              }
+            }
+            fillSlot(sceneA, "halftone-dissolve-a");
+            fillSlot(sceneB, "halftone-dissolve-b");
+
+            // Envelope.
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "3.5"));
+            var OUT = exit === "none" ? 0 : 0.45;
+            var DISSOLVE = Math.min(1.3, Math.max(0.4, duration - OUT - 0.6));
+            var maxAt = Math.max(0.2, duration - DISSOLVE - OUT - 0.05);
+            var dissolveAt = num(vars.dissolve_at, 1.1, 0.2, maxAt);
+            var OUT_START = duration - OUT;
+
+            // Raster and clip-path basis, fixed once at mount.
+            var dpr = Math.min(2, Math.max(1, Number(window.devicePixelRatio) || 1));
+            var box = root.getBoundingClientRect();
+            var cssW = Math.max(1, Math.round(box.width) || 640);
+            var cssH = Math.max(1, Math.round(box.height) || 360);
+            canvas.width = Math.round(cssW * dpr);
+            canvas.height = Math.round(cssH * dpr);
+            var ctx = canvas.getContext("2d");
+
+            var probe = hostDoc.createElement("span");
+            probe.style.color = accentColors[accent];
+            root.appendChild(probe);
+            var inkColor = getComputedStyle(probe).color || "#71f5a7";
+            probe.remove();
+
+            // The grid: fixed cells with alternate rows offset half a pitch
+            // (the classic halftone stagger). Thresholds order the growth;
+            // a seeded jitter keeps every front granular instead of ruled.
+            var pitches = { small: 1 / 44, medium: 1 / 30, large: 1 / 20 };
+            var cell = Math.max(8, cssW * pitches[dotSize]);
+            var cols = Math.ceil(cssW / cell) + 2;
+            var rows = Math.ceil(cssH / cell) + 1;
+            var R_MAX = cell * 0.78; // overlapping full coverage
+            var dots = (function () {
+              var state = 0x4a17f03d;
+              function next() {
+                state = (Math.imul(1664525, state) + 1013904223) >>> 0;
+                return state / 4294967296;
+              }
+              var list = [];
+              var maxDist = Math.hypot(cssW / 2, cssH / 2);
+              for (var r = 0; r < rows; r += 1) {
+                for (var c = 0; c < cols; c += 1) {
+                  var x = (c + (r % 2 === 0 ? 0.25 : 0.75)) * cell;
+                  var y = (r + 0.5) * cell;
+                  var base;
+                  if (direction === "center") {
+                    base = Math.hypot(x - cssW / 2, y - cssH / 2) / maxDist;
+                  } else if (direction === "noise") {
+                    base = next();
+                  } else {
+                    base = x / cssW;
+                  }
+                  var jitter = direction === "noise" ? 0 : (next() - 0.5) * 0.22;
+                  var th = Math.max(0, Math.min(1, base + jitter));
+                  list.push({ x: x, y: y, th: th * 0.62 });
+                }
+              }
+              return list;
+            })();
+
+            function clamp01(v) {
+              return v < 0 ? 0 : v > 1 ? 1 : v;
+            }
+            function smooth(v) {
+              return v * v * (3 - 2 * v);
+            }
+
+            // Per-dot growth: the window opens over 38 percent of progress
+            // after its threshold; the ink dot leads it by a small offset so
+            // each site pops as accent ink before B fills it.
+            function windowRadius(dot, p) {
+              return R_MAX * smooth(clamp01((p - dot.th) / 0.38));
+            }
+            function inkRadius(dot, p) {
+              return R_MAX * smooth(clamp01((p + 0.07 - dot.th) / 0.38));
+            }
+
+            // One progress object feeds one painter. The painter redraws the
+            // ink canvas from scratch and rebuilds B's clip-path string, all
+            // a pure function of P.p. The last applied clip string is cached
+            // only to skip identical style writes, never to skip repaints of
+            // changed frames.
+            var P = { p: 0 };
+            var lastClip = null;
+            function applyClip(value) {
+              if (value !== lastClip) {
+                sceneB.style.clipPath = value;
+                lastClip = value;
+              }
+            }
+            function paint() {
+              var p = P.p;
+              ctx.clearRect(0, 0, canvas.width, canvas.height);
+              if (p >= 1) {
+                applyClip("none");
+                return;
+              }
+              if (p <= 0) {
+                applyClip('path("M 0 0 Z")');
+                return;
+              }
+              ctx.fillStyle = inkColor;
+              var parts = [];
+              for (var i = 0; i < dots.length; i += 1) {
+                var dot = dots[i];
+                var ri = inkRadius(dot, p);
+                if (ri > 0.25) {
+                  ctx.beginPath();
+                  ctx.arc(dot.x * dpr, dot.y * dpr, ri * dpr, 0, Math.PI * 2);
+                  ctx.fill();
+                }
+                var rw = windowRadius(dot, p);
+                if (rw > 0.25) {
+                  var x0 = (dot.x + rw).toFixed(2);
+                  var xr = rw.toFixed(2);
+                  var yy = dot.y.toFixed(2);
+                  parts.push(
+                    "M " +
+                      x0 +
+                      " " +
+                      yy +
+                      " A " +
+                      xr +
+                      " " +
+                      xr +
+                      " 0 1 0 " +
+                      (dot.x - rw).toFixed(2) +
+                      " " +
+                      yy +
+                      " A " +
+                      xr +
+                      " " +
+                      xr +
+                      " 0 1 0 " +
+                      x0 +
+                      " " +
+                      yy +
+                      " Z",
+                  );
+                }
+              }
+              applyClip(parts.length ? 'path("' + parts.join(" ") + '")' : 'path("M 0 0 Z")');
+            }
+
+            gsap.set(stage, { opacity: 1, y: "0cqh" });
+
+            var tl = gsap.timeline({
+              paused: true,
+              onUpdate: paint,
+            });
+
+            // Anchor tween: spans the full authored duration so onUpdate
+            // (canvas + clip rebuild) fires for every eventful seek in [0, D]
+            // and holds keep tl.time() honest.
+            tl.to({ t: 0 }, { t: 1, duration: duration, ease: "none" }, 0);
+
+            // The dissolve: one plain-object progress tween. power1.inOut
+            // keeps the front unhurried at both ends (smallest-first pops,
+            // unforced merge).
+            tl.fromTo(P, { p: 0 }, { p: 1, duration: DISSOLVE, ease: "power1.inOut" }, dissolveAt);
+
+            // HOLD: dead still on B (clip released, ink canvas clear).
+
+            // OUT: optional departure; exit none holds until the frame cuts.
+            if (exit === "up") {
+              tl.to(stage, { y: "-4cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "fade") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            }
+
+            tl.seek(0);
+            paint();
+            window.__timelines = window.__timelines || {};
+            window.__timelines["halftone-dissolve"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/halftone-dissolve/registry-item.json b/registry/components/halftone-dissolve/registry-item.json
new file mode 100644
index 0000000000..3faca8bba7
--- /dev/null
+++ b/registry/components/halftone-dissolve/registry-item.json
@@ -0,0 +1,128 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "halftone-dissolve",
+  "type": "hyperframes:component",
+  "title": "Halftone Dissolve",
+  "description": "Scene A dissolves into scene B through a growing halftone dot field: accent ink dots pop onto a fixed grid smallest-first, each opens into a window onto B, until the windows merge and B fully replaces A.",
+  "tags": ["motion-primitive", "transition", "texture", "halftone", "dissolve"],
+  "jobs": ["bridge"],
+  "family": "transitions",
+  "profile": "texture",
+  "evidence": "Wave L L6: the halftone texture transition from the frame study, a seeded threshold map ordered by a direction enum",
+  "syncPoints": [
+    {
+      "id": "dissolve",
+      "phase": "in",
+      "offset": 1.1
+    }
+  ],
+  "files": [
+    {
+      "path": "halftone-dissolve.html",
+      "target": "compositions/components/halftone-dissolve.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "dot_size",
+      "type": "enum",
+      "role": "style",
+      "label": "Dot size",
+      "description": "Grid pitch for the halftone field.",
+      "default": "medium",
+      "options": [
+        {
+          "value": "small",
+          "label": "Small"
+        },
+        {
+          "value": "medium",
+          "label": "Medium"
+        },
+        {
+          "value": "large",
+          "label": "Large"
+        }
+      ]
+    },
+    {
+      "id": "direction",
+      "type": "enum",
+      "role": "timing",
+      "label": "Direction",
+      "description": "Threshold ordering: ltr sweeps left to right, center grows from the middle, noise scatters.",
+      "default": "ltr",
+      "options": [
+        {
+          "value": "ltr",
+          "label": "Left to right"
+        },
+        {
+          "value": "center",
+          "label": "Center out"
+        },
+        {
+          "value": "noise",
+          "label": "Noise"
+        }
+      ]
+    },
+    {
+      "id": "dissolve_at",
+      "type": "number",
+      "role": "timing",
+      "label": "Dissolve at",
+      "description": "Seconds from mount start when the dissolve begins.",
+      "default": 1.1,
+      "min": 0.2,
+      "max": 10,
+      "step": 0.1,
+      "unit": "s"
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Ink dot color: green rides --brand, blue rides --accent, violet rides --accent-2.",
+      "default": "green",
+      "options": [
+        {
+          "value": "green",
+          "label": "Green"
+        },
+        {
+          "value": "blue",
+          "label": "Blue"
+        },
+        {
+          "value": "violet",
+          "label": "Violet"
+        }
+      ]
+    },
+    {
+      "id": "exit",
+      "type": "enum",
+      "role": "timing",
+      "label": "Exit",
+      "description": "Optional departure. Default none: scene B holds until the frame cuts.",
+      "default": "none",
+      "options": [
+        {
+          "value": "none",
+          "label": "None"
+        },
+        {
+          "value": "fade",
+          "label": "Fade"
+        },
+        {
+          "value": "up",
+          "label": "Up"
+        }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/headline-slam/demo.html b/registry/components/headline-slam/demo.html
new file mode 100644
index 0000000000..c0fe63fa57
--- /dev/null
+++ b/registry/components/headline-slam/demo.html
@@ -0,0 +1,84 @@
+<!doctype html>
+<!--
+  headline-slam demo. This standalone composition mounts headline-slam.html
+  through data-composition-src. Non-default copy, accent index, and color
+  prove that all variables flow through the elastic host mount.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Headline Slam Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0b0c0e;
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f7f8fa;
+        --surface: #15181e;
+        --border: #343943;
+        --font-display: Inter, system-ui, sans-serif;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 44%, #171a21 0%, var(--bg) 72%);
+      }
+
+      .mount-card {
+        width: 80%;
+        height: 60%;
+        left: 10%;
+        top: 20%;
+        container-type: size;
+        overflow: hidden;
+        border: 1px solid rgba(247, 248, 250, 0.12);
+        border-radius: 32px;
+        background: color-mix(in srgb, var(--surface) 88%, transparent);
+        box-shadow: 0 54px 120px rgba(0, 0, 0, 0.46);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="headline-slam-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="3.5"
+      data-fps="30"
+    >
+      <div
+        id="headline-slam-mount"
+        class="mount-card clip"
+        data-composition-id="headline-slam"
+        data-composition-src="./headline-slam.html"
+        data-variable-values='{"text":"Make the moment count","accent_word_index":3,"accent":"violet"}'
+        data-start="0"
+        data-duration="3.5"
+        data-track-index="0"
+        data-width="1536"
+        data-height="648"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["headline-slam-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/headline-slam/headline-slam.html b/registry/components/headline-slam/headline-slam.html
new file mode 100644
index 0000000000..154c54f52b
--- /dev/null
+++ b/registry/components/headline-slam/headline-slam.html
@@ -0,0 +1,237 @@
+<!doctype html>
+<!--
+  headline-slam: HyperFrames video primitive
+
+  One headline scales down from 1.6 to rest with expo.out weight. Its landing
+  drives a deterministic three-frame stage shake, followed by a quiet drift
+  and a fast upward exit.
+
+  Variables:
+    text: headline copy
+    accent_word_index: zero-based word index to color, out of range colors none
+    accent: green, blue, or violet accent color
+    shadow: drop shadow under the headline, on by default
+
+  Envelope, fixed IN and OUT with elastic HOLD:
+    IN_BASE  = 0.72s, headline slam and three-frame impact shake
+    HOLD     = max(0, D - IN - OUT), one subtle drift cycle
+    OUT_BASE = 0.46s, headline whips upward out of frame
+    If D is shorter than IN_BASE + OUT_BASE, IN and OUT compress together.
+    The timeline is never time-scaled.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, and has no data-width or
+  data-height. One paused timeline registers under the literal headline-slam
+  key.
+-->
+<html
+  lang="en"
+  data-composition-id="headline-slam"
+  data-composition-duration="3.5"
+  data-composition-variables='[
+    { "id": "text", "type": "string", "role": "content", "label": "Headline", "description": "Text displayed as the headline.", "default": "Ship it today" },
+    { "id": "accent_word_index", "type": "number", "role": "content", "label": "Accent word index", "description": "Zero-based word index to color. Out of range leaves the headline unaccented.", "default": 1, "step": 1 },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Color applied to the selected word.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "shadow", "type": "boolean", "role": "style", "label": "Shadow", "description": "Drop shadow cast under the headline. On by default; set false for a flat matte look.", "default": true }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Headline Slam</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="headline-slam" data-duration="3.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .hs-clip,
+          .hs-stage {
+            position: absolute;
+            inset: 0;
+            width: 100cqw;
+            height: 100cqh;
+          }
+
+          .hs-clip {
+            overflow: hidden;
+          }
+
+          .hs-stage {
+            display: grid;
+            place-items: center;
+            will-change: transform;
+          }
+
+          .hs-headline {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 2cqw;
+            width: 90cqw;
+            min-height: 22cqh;
+            color: var(--fg, #f8fafc);
+            font-size: var(--hs-font-size, 10.5cqw);
+            font-weight: 900;
+            line-height: 0.88;
+            letter-spacing: -0.5cqw;
+            text-align: center;
+            white-space: nowrap;
+            transform-origin: 50% 50%;
+            will-change: transform, opacity;
+          }
+
+          /* Shadow is on by default; the shadow variable opts out of it. */
+          .hs-headline.hs-shadow {
+            text-shadow: 0 1.2cqh 4.5cqh color-mix(in srgb, #000 52%, transparent);
+          }
+
+          .hs-word {
+            display: inline-block;
+          }
+
+          .hs-word-accent {
+            color: var(--hs-accent, #71f5a7);
+          }
+        </style>
+
+        <div
+          id="headline-slam-clip"
+          class="hs-clip clip"
+          data-start="0"
+          data-duration="3.5"
+          data-track-index="0"
+        >
+          <div class="hs-stage">
+            <div class="hs-headline" role="heading" aria-level="1"></div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".hs-stage");
+            var headline = root.querySelector(".hs-headline");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var text = vars.text == null ? "Ship it today" : String(vars.text);
+            var indexValue = Number(vars.accent_word_index);
+            var accentWordIndex = Number.isFinite(indexValue) ? Math.trunc(indexValue) : 1;
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #b895ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var shadow = !(vars.shadow === false || vars.shadow === "false");
+            var words = text.trim() === "" ? [] : text.trim().split(/\s+/);
+
+            root.style.setProperty("--hs-accent", accentColors[accent]);
+            headline.classList.toggle("hs-shadow", shadow);
+            headline.setAttribute("aria-label", text);
+
+            words.forEach(function (word, index) {
+              var span = document.createElement("span");
+              span.className = index === accentWordIndex ? "hs-word hs-word-accent" : "hs-word";
+              span.textContent = word;
+              span.setAttribute("aria-hidden", "true");
+              headline.appendChild(span);
+            });
+
+            // Deterministic fit from character count: DOM measurement is zero at
+            // mount time (the template is not laid out yet), so it never fires.
+            // 0.62 approximates the average glyph/em width of the bold face; the
+            // 56cqw rest-state cap keeps the 1.6x overshoot peak inside 90cqw.
+            var approxWidthCqw = text.length * 10.5 * 0.62;
+            if (approxWidthCqw > 56) {
+              var fitted = Math.max(3.5, 56 / (text.length * 0.62));
+              root.style.setProperty("--hs-font-size", fitted.toFixed(2) + "cqw");
+            }
+
+            var IN_BASE = 0.72;
+            var OUT_BASE = 0.46;
+            var LAND_AT_BASE = 0.58;
+            var SHAKE_FRAME_BASE = 1 / 30;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "3.5"));
+            var baseTotal = IN_BASE + OUT_BASE;
+            var envelopeScale = duration < baseTotal ? duration / baseTotal : 1;
+            var IN = IN_BASE * envelopeScale;
+            var OUT = OUT_BASE * envelopeScale;
+            var LAND_AT = LAND_AT_BASE * envelopeScale;
+            var SHAKE_FRAME = SHAKE_FRAME_BASE * envelopeScale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var HOLD_START = IN;
+            var OUT_START = IN + HOLD;
+
+            var tl = gsap.timeline({ paused: true });
+
+            tl.fromTo(
+              headline,
+              { scale: 1.6, opacity: 0, y: 0 },
+              { scale: 1, opacity: 1, y: 0, duration: LAND_AT, ease: "expo.out" },
+              0,
+            );
+
+            tl.to(
+              stage,
+              { x: "0.55cqw", y: "-0.3cqh", duration: SHAKE_FRAME, ease: "power2.out" },
+              LAND_AT,
+            );
+            tl.to(stage, {
+              x: "-0.38cqw",
+              y: "0.2cqh",
+              duration: SHAKE_FRAME,
+              ease: "power2.out",
+            });
+            tl.to(stage, { x: 0, y: 0, duration: SHAKE_FRAME, ease: "power2.out" });
+
+            if (HOLD > 0) {
+              tl.fromTo(
+                headline,
+                { y: 0 },
+                {
+                  y: "-0.55cqh",
+                  duration: HOLD / 2,
+                  ease: "sine.inOut",
+                  yoyo: true,
+                  repeat: 1,
+                  immediateRender: false,
+                },
+                HOLD_START,
+              );
+            }
+
+            tl.to(headline, { y: "-120cqh", duration: OUT, ease: "power4.in" }, OUT_START);
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["headline-slam"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/headline-slam/registry-item.json b/registry/components/headline-slam/registry-item.json
new file mode 100644
index 0000000000..0df853a686
--- /dev/null
+++ b/registry/components/headline-slam/registry-item.json
@@ -0,0 +1,60 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "headline-slam",
+  "type": "hyperframes:component",
+  "title": "Headline Slam",
+  "description": "A heavyweight headline scales down into frame, lands with a deterministic three-frame shake, holds with subtle drift, and whips upward on exit.",
+  "tags": ["motion-primitive", "typography", "headline", "slam", "impact", "exit"],
+  "jobs": ["emphasize"],
+  "family": "typography",
+  "profile": "impact",
+  "evidence": "Wave F U3 headline-slam specification",
+  "syncPoints": [{ "id": "impact", "phase": "in", "offset": 0.58 }],
+  "files": [
+    {
+      "path": "headline-slam.html",
+      "target": "compositions/components/headline-slam.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "text",
+      "type": "string",
+      "role": "content",
+      "label": "Headline",
+      "description": "Text displayed as the headline.",
+      "default": "Ship it today"
+    },
+    {
+      "id": "accent_word_index",
+      "type": "number",
+      "role": "content",
+      "label": "Accent word index",
+      "description": "Zero-based word index to color. Out of range leaves the headline unaccented.",
+      "default": 1,
+      "step": 1
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Color applied to the selected word.",
+      "default": "green",
+      "options": [
+        { "value": "green", "label": "Green" },
+        { "value": "blue", "label": "Blue" },
+        { "value": "violet", "label": "Violet" }
+      ]
+    },
+    {
+      "id": "shadow",
+      "type": "boolean",
+      "role": "style",
+      "label": "Shadow",
+      "description": "Drop shadow cast under the headline. On by default; set false for a flat matte look.",
+      "default": true
+    }
+  ]
+}
diff --git a/registry/components/icon-morph-beat/demo.html b/registry/components/icon-morph-beat/demo.html
new file mode 100644
index 0000000000..821eafb741
--- /dev/null
+++ b/registry/components/icon-morph-beat/demo.html
@@ -0,0 +1,85 @@
+<!doctype html>
+<!--
+  icon-morph-beat demo. This standalone composition mounts the primitive
+  through data-composition-src. The lock-unlock pair and violet accent are
+  deliberately non-default so both variables are proven through the mount.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Icon Morph Beat Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0b0c0e;
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --surface: #181b24;
+        --border: #475569;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 44%, #191526 0%, #0b0c0e 68%);
+      }
+
+      .mount-card {
+        width: 42%;
+        height: 54%;
+        left: 29%;
+        top: 23%;
+        container-type: size;
+        overflow: hidden;
+        border: 1px solid rgba(148, 163, 184, 0.22);
+        border-radius: 32px;
+        background: rgba(24, 27, 36, 0.74);
+        box-shadow: 0 44px 100px rgba(0, 0, 0, 0.48);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="icon-morph-beat-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="2.5"
+      data-fps="30"
+    >
+      <div
+        id="icon-morph-beat-mount"
+        class="mount-card clip"
+        data-composition-id="icon-morph-beat"
+        data-composition-src="./icon-morph-beat.html"
+        data-variable-values='{"pair":"lock-unlock","accent":"violet"}'
+        data-start="0"
+        data-duration="2.5"
+        data-track-index="0"
+        data-width="806"
+        data-height="583"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      var tl = gsap.timeline({ paused: true });
+      tl.seek(0);
+      window.__timelines = window.__timelines || {};
+      window.__timelines["icon-morph-beat-demo"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/registry/components/icon-morph-beat/icon-morph-beat.html b/registry/components/icon-morph-beat/icon-morph-beat.html
new file mode 100644
index 0000000000..92060994a5
--- /dev/null
+++ b/registry/components/icon-morph-beat/icon-morph-beat.html
@@ -0,0 +1,258 @@
+<!doctype html>
+<!--
+  icon-morph-beat: HyperFrames video primitive (product-demo / state-change)
+
+  Concept: one icon holds as a readable before state, morphs into its after
+  state while shifting to the selected accent, then marks completion with a
+  small pulse. The authored SVG paths in every pair have matching command
+  structure and point count so GSAP can tween the d attribute directly.
+
+  Variables:
+    - pair (mic-check | play-check | lock-unlock, default mic-check): the
+      before and after icon states.
+    - accent (green | blue | violet, default green): the completion color.
+
+  Envelope (fixed IN, elastic HOLD, no OUT):
+    IN_BASE  = 1.20s, readable before-state hold, morph, and completion pulse
+    HOLD     = elastic = max(0, D - IN_BASE), a restrained halo breath
+    OUT_BASE = 0s, the completed icon remains visible at the final frame
+    If D is shorter than IN_BASE, the complete state-change beat compresses
+    proportionally and HOLD becomes zero.
+
+  Mount contract: the runtime clones only this template. #root fills the
+  host box, establishes the container query basis, has no data-width or
+  data-height, and registers one paused timeline under the hardcoded
+  icon-morph-beat id.
+-->
+<html
+  lang="en"
+  data-composition-id="icon-morph-beat"
+  data-composition-duration="2.5"
+  data-composition-variables='[
+    { "id": "pair", "type": "enum", "role": "content", "label": "Icon pair", "description": "Before and after icon states used by the morph.", "default": "mic-check", "options": [{ "value": "mic-check", "label": "Mic to check" }, { "value": "play-check", "label": "Play to check" }, { "value": "lock-unlock", "label": "Lock to unlock" }] },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Color applied as the morph completes.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Icon Morph Beat</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="icon-morph-beat" data-duration="2.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            pointer-events: none;
+          }
+
+          .imb-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+          }
+
+          .imb-stage {
+            position: relative;
+            display: grid;
+            width: 42cqmin;
+            aspect-ratio: 1;
+            place-items: center;
+          }
+
+          .imb-halo {
+            position: absolute;
+            inset: -12%;
+            border-radius: 50%;
+            background: radial-gradient(
+              circle,
+              color-mix(in srgb, var(--imb-accent) 38%, transparent) 0%,
+              color-mix(in srgb, var(--imb-accent) 12%, transparent) 46%,
+              transparent 72%
+            );
+            opacity: 0.14;
+            will-change: opacity, transform;
+          }
+
+          .imb-shell {
+            position: relative;
+            display: grid;
+            width: 100%;
+            aspect-ratio: 1;
+            place-items: center;
+            border: 0.28cqmin solid color-mix(in srgb, var(--border, #475569) 76%, transparent);
+            border-radius: 28%;
+            background: linear-gradient(
+              145deg,
+              color-mix(in srgb, var(--surface, #1e293b) 86%, white 7%),
+              var(--surface, #1e293b)
+            );
+            box-shadow:
+              0 3.2cqh 8cqh color-mix(in srgb, var(--bg, #05070d) 58%, transparent),
+              inset 0 0 0 0.12cqmin color-mix(in srgb, white 10%, transparent);
+            transform-origin: 50% 50%;
+            will-change: transform;
+          }
+
+          .imb-icon {
+            width: 58%;
+            height: 58%;
+            overflow: visible;
+            color: var(--fg, #f8fafc);
+            filter: drop-shadow(0 0.8cqh 1.8cqh rgba(2, 6, 23, 0.34));
+          }
+
+          .imb-shape {
+            fill: currentColor;
+            fill-rule: nonzero;
+          }
+        </style>
+
+        <div
+          id="icon-morph-beat-clip"
+          class="imb-clip clip"
+          data-start="0"
+          data-duration="2.5"
+          data-track-index="0"
+        >
+          <div class="imb-stage">
+            <div class="imb-halo" aria-hidden="true"></div>
+            <div class="imb-shell">
+              <svg class="imb-icon" viewBox="0 0 100 100" role="img" aria-label="Icon state change">
+                <path class="imb-shape" d="" />
+              </svg>
+            </div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var shell = root.querySelector(".imb-shell");
+            var halo = root.querySelector(".imb-halo");
+            var icon = root.querySelector(".imb-icon");
+            var shape = root.querySelector(".imb-shape");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            // Each from/to pair has the same SVG command sequence and point
+            // count. Keep the pair together when editing either silhouette.
+            var paths = {
+              "mic-check": {
+                from: "M 42 18 L 58 18 L 64 24 L 64 48 L 61 56 L 56 62 L 56 72 L 68 72 L 68 82 L 32 82 L 32 72 L 44 72 L 44 62 L 39 56 L 36 48 L 36 24 Z",
+                to: "M 16 50 L 20 46 L 24 42 L 34 52 L 44 62 L 52 54 L 60 46 L 68 38 L 76 30 L 80 34 L 84 38 L 74 48 L 64 58 L 54 68 L 44 78 L 34 68 Z",
+              },
+              "play-check": {
+                from: "M 28 18 L 36 23 L 44 28 L 52 33 L 60 38 L 68 43 L 76 48 L 80 50 L 76 52 L 68 57 L 60 62 L 52 67 L 44 72 L 36 77 L 28 82 L 28 50 Z",
+                to: "M 16 50 L 20 46 L 24 42 L 34 52 L 44 62 L 52 54 L 60 46 L 68 38 L 76 30 L 80 34 L 84 38 L 74 48 L 64 58 L 54 68 L 44 78 L 34 68 Z",
+              },
+              "lock-unlock": {
+                from: "M 22 42 L 78 42 L 78 84 L 22 84 Z M 30 44 L 30 31 C 30 18 39 12 50 12 C 61 12 70 18 70 31 L 70 44 L 60 44 L 60 31 C 60 25 56 22 50 22 C 44 22 40 25 40 31 L 40 44 Z",
+                to: "M 22 42 L 78 42 L 78 84 L 22 84 Z M 34 44 L 34 31 C 34 18 43 12 54 12 C 65 12 74 18 74 31 L 74 35 L 64 35 L 64 31 C 64 25 60 22 54 22 C 48 22 44 25 44 31 L 44 44 Z",
+              },
+            };
+            var accents = {
+              green: "#34d399",
+              blue: "#38bdf8",
+              violet: "#a78bfa",
+            };
+            var pair = Object.prototype.hasOwnProperty.call(paths, vars.pair)
+              ? vars.pair
+              : "mic-check";
+            var accent = Object.prototype.hasOwnProperty.call(accents, vars.accent)
+              ? vars.accent
+              : "green";
+            var selectedPaths = paths[pair];
+            var accentColor = accents[accent];
+
+            root.style.setProperty("--imb-accent", accentColor);
+            shape.setAttribute("d", selectedPaths.from);
+            icon.setAttribute("aria-label", pair.replace("-", " to "));
+
+            var IN_BASE = 1.2;
+            var MORPH_AT_BASE = 0.35;
+            var MORPH_BASE = 0.55;
+            var PULSE_UP_BASE = 0.12;
+            var PULSE_DOWN_BASE = 0.18;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "2.5"));
+            var scale = duration < IN_BASE ? duration / IN_BASE : 1;
+            var IN = IN_BASE * scale;
+            var MORPH_AT = MORPH_AT_BASE * scale;
+            var MORPH = MORPH_BASE * scale;
+            var PULSE_UP = PULSE_UP_BASE * scale;
+            var PULSE_DOWN = PULSE_DOWN_BASE * scale;
+            var COMPLETE_AT = MORPH_AT + MORPH;
+            var HOLD = Math.max(0, duration - IN);
+
+            gsap.set(icon, { color: "#f8fafc" });
+            gsap.set(shell, { scale: 1 });
+            gsap.set(halo, { opacity: 0.14, scale: 1 });
+
+            var tl = gsap.timeline({ paused: true });
+
+            tl.to(
+              shape,
+              { attr: { d: selectedPaths.to }, duration: MORPH, ease: "power3.out" },
+              MORPH_AT,
+            );
+            tl.to(icon, { color: accentColor, duration: MORPH, ease: "power2.out" }, MORPH_AT);
+            tl.to(shell, { scale: 1.08, duration: PULSE_UP, ease: "power3.out" }, COMPLETE_AT);
+            tl.to(
+              shell,
+              { scale: 1, duration: PULSE_DOWN, ease: "power2.out" },
+              COMPLETE_AT + PULSE_UP,
+            );
+            tl.to(
+              halo,
+              { opacity: 0.62, scale: 1.08, duration: PULSE_UP, ease: "power3.out" },
+              COMPLETE_AT,
+            );
+            tl.to(
+              halo,
+              { opacity: 0.14, scale: 1, duration: PULSE_DOWN, ease: "power2.out" },
+              COMPLETE_AT + PULSE_UP,
+            );
+
+            if (HOLD > 0.04) {
+              var driftHalf = Math.min(0.45, HOLD / 2);
+              tl.fromTo(
+                halo,
+                { opacity: 0.14 },
+                {
+                  opacity: 0.22,
+                  duration: driftHalf,
+                  ease: "sine.inOut",
+                  yoyo: true,
+                  repeat: 1,
+                },
+                IN,
+              );
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["icon-morph-beat"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/icon-morph-beat/registry-item.json b/registry/components/icon-morph-beat/registry-item.json
new file mode 100644
index 0000000000..13fb3def34
--- /dev/null
+++ b/registry/components/icon-morph-beat/registry-item.json
@@ -0,0 +1,48 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "icon-morph-beat",
+  "type": "hyperframes:component",
+  "title": "Icon Morph Beat",
+  "description": "An icon morphs between authored state silhouettes, shifts to an accent color, and marks completion with one restrained pulse.",
+  "tags": ["motion-primitive", "product-demo", "icon", "morph", "state-change", "completion"],
+  "jobs": ["demonstrate"],
+  "family": "product-demo",
+  "profile": "state-change",
+  "evidence": "Wave H U28 icon-morph-beat brief and Amicro morph animation research",
+  "syncPoints": [{ "id": "morph-complete", "phase": "in", "offset": 0.9 }],
+  "files": [
+    {
+      "path": "icon-morph-beat.html",
+      "target": "compositions/components/icon-morph-beat.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "pair",
+      "type": "enum",
+      "role": "content",
+      "label": "Icon pair",
+      "description": "Before and after icon states used by the morph.",
+      "default": "mic-check",
+      "options": [
+        { "value": "mic-check", "label": "Mic to check" },
+        { "value": "play-check", "label": "Play to check" },
+        { "value": "lock-unlock", "label": "Lock to unlock" }
+      ]
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Color applied as the morph completes.",
+      "default": "green",
+      "options": [
+        { "value": "green", "label": "Green" },
+        { "value": "blue", "label": "Blue" },
+        { "value": "violet", "label": "Violet" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/icon-swap/demo.html b/registry/components/icon-swap/demo.html
new file mode 100644
index 0000000000..e2174e26c8
--- /dev/null
+++ b/registry/components/icon-swap/demo.html
@@ -0,0 +1,116 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Icon Swap - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        min-width: 760px;
+        min-height: 480px;
+        padding: 56px;
+        /* ponytail: scale wrapper (not a GSAP target) to fill ~65% of frame */
+        transform: scale(1.47);
+      }
+      .hf-transition-icon-swap {
+        position: relative;
+        display: grid;
+        place-items: center;
+        width: 58px;
+        height: 58px;
+        border: 0;
+        border-radius: 16px;
+        background: #18181b;
+        color: #fff;
+        font:
+          900 28px/1 Inter,
+          system-ui,
+          sans-serif;
+        box-shadow: 0 18px 44px rgba(24, 24, 27, 0.22);
+      }
+      .hf-transition-icon-swap span {
+        position: absolute;
+        filter: blur(var(--hf-icon-blur, 0px));
+        transform: scale(var(--hf-icon-scale, 1)) rotate(var(--hf-icon-rotate, 0deg));
+        will-change: transform, filter, opacity;
+      }
+      .hf-transition-icon-swap .to {
+        opacity: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="icon-swap-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <button class="hf-transition-icon-swap" type="button">
+          <span class="from">+</span><span class="to">OK</span>
+        </button>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.to(
+          ".hf-transition-icon-swap .from",
+          {
+            opacity: 0,
+            "--hf-icon-scale": 0.55,
+            "--hf-icon-blur": "8px",
+            "--hf-icon-rotate": "-18deg",
+            duration: 0.18,
+            ease: "power2.in",
+          },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-transition-icon-swap .to",
+          {
+            opacity: 0,
+            "--hf-icon-scale": 1.35,
+            "--hf-icon-blur": "8px",
+            "--hf-icon-rotate": "18deg",
+          },
+          {
+            opacity: 1,
+            "--hf-icon-scale": 1,
+            "--hf-icon-blur": "0px",
+            "--hf-icon-rotate": "0deg",
+            duration: 0.26,
+            ease: "back.out(1.7)",
+          },
+          startTime + 0.12,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["icon-swap-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/icon-swap/icon-swap.html b/registry/components/icon-swap/icon-swap.html
new file mode 100644
index 0000000000..29e2fe7122
--- /dev/null
+++ b/registry/components/icon-swap/icon-swap.html
@@ -0,0 +1,112 @@
+<!--
+  Icon Swap - transitions.dev-inspired primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Use the timeline integration
+  note at the bottom as the starting point for deterministic GSAP animation.
+
+  Variables. The script reads each one, falls back to the declared default on anything
+  missing or unrecognised, and writes the result as a custom property the CSS above
+  consumes. The timeline recipe below is untouched by them.
+
+    - tone (dark | light | accent, default dark): button fill and glyph colour. dark is the
+      matte chip, light inverts it for bright frames, accent rides --brand.
+    - size (small | standard | large, default standard): the button box and the glyph inside
+      it, 44px, 58px or 76px.
+    - shape (rounded | circle | square, default rounded): corner radius of the box.
+    - blur (soft | standard | heavy, default standard): scales the blur radius the timeline
+      drives through the swap, from a light haze to a full smear.
+
+  On every default the result is identical to the original: a 58px near-black chip with
+  16px corners and an 8px swap blur.
+-->
+
+<button
+  class="hf-transition-icon-swap"
+  type="button"
+  data-composition-variables='[
+    { "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Button fill and glyph colour. Accent rides --brand.", "default": "dark", "options": [{ "value": "dark", "label": "Dark" }, { "value": "light", "label": "Light" }, { "value": "accent", "label": "Accent" }] },
+    { "id": "size", "type": "enum", "role": "layout", "label": "Size", "description": "Button box and glyph size, from a toolbar chip to a hero action.", "default": "standard", "options": [{ "value": "small", "label": "Small" }, { "value": "standard", "label": "Standard" }, { "value": "large", "label": "Large" }] },
+    { "id": "shape", "type": "enum", "role": "style", "label": "Shape", "description": "Corner treatment of the button box.", "default": "rounded", "options": [{ "value": "rounded", "label": "Rounded" }, { "value": "circle", "label": "Circle" }, { "value": "square", "label": "Square" }] },
+    { "id": "blur", "type": "enum", "role": "motion", "label": "Blur", "description": "Scales the blur radius the timeline drives through the swap, from a light haze to a full smear.", "default": "standard", "options": [{ "value": "soft", "label": "Soft" }, { "value": "standard", "label": "Standard" }, { "value": "heavy", "label": "Heavy" }] }
+  ]'
+>
+  <span class="from">+</span><span class="to">OK</span>
+</button>
+
+<style>
+  .hf-transition-icon-swap {
+    position: relative;
+    display: grid;
+    place-items: center;
+    width: var(--hf-icon-size, 58px);
+    height: var(--hf-icon-size, 58px);
+    border: 0;
+    border-radius: var(--hf-icon-radius, 16px);
+    background: var(--hf-icon-bg, #18181b);
+    color: var(--hf-icon-fg, #fff);
+    font:
+      900 28px/1 Inter,
+      system-ui,
+      sans-serif;
+    font-size: var(--hf-icon-font-size, 28px);
+    box-shadow: 0 18px 44px rgba(24, 24, 27, 0.22);
+  }
+  .hf-transition-icon-swap span {
+    position: absolute;
+    filter: blur(calc(var(--hf-icon-blur, 0px) * var(--hf-icon-blur-scale, 1)));
+    transform: scale(var(--hf-icon-scale, 1)) rotate(var(--hf-icon-rotate, 0deg));
+    will-change: transform, filter, opacity;
+  }
+  .hf-transition-icon-swap .to {
+    opacity: 0;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var tones = {
+      dark: { bg: "#18181b", fg: "#ffffff" },
+      light: { bg: "#fafafa", fg: "#18181b" },
+      accent: { bg: "var(--brand, #34d399)", fg: "#052e21" },
+    };
+    var sizes = {
+      small: { box: "44px", font: "22px" },
+      standard: { box: "58px", font: "28px" },
+      large: { box: "76px", font: "38px" },
+    };
+    var shapes = { rounded: "16px", circle: "50%", square: "6px" };
+    var blurScales = { soft: 0.45, standard: 1, heavy: 2.2 };
+
+    var tone = tones[pick(tones, vars.tone, "dark")];
+    var size = sizes[pick(sizes, vars.size, "standard")];
+    var shape = shapes[pick(shapes, vars.shape, "rounded")];
+    var blurScale = blurScales[pick(blurScales, vars.blur, "standard")];
+
+    var roots = document.querySelectorAll(".hf-transition-icon-swap");
+    for (var i = 0; i < roots.length; i += 1) {
+      roots[i].style.setProperty("--hf-icon-bg", tone.bg);
+      roots[i].style.setProperty("--hf-icon-fg", tone.fg);
+      roots[i].style.setProperty("--hf-icon-size", size.box);
+      roots[i].style.setProperty("--hf-icon-font-size", size.font);
+      roots[i].style.setProperty("--hf-icon-radius", shape);
+      roots[i].style.setProperty("--hf-icon-blur-scale", String(blurScale));
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.to('.hf-transition-icon-swap .from', { opacity: 0, '--hf-icon-scale': 0.55, '--hf-icon-blur': '8px', '--hf-icon-rotate': '-18deg', duration: 0.18, ease: 'power2.in' }, startTime); tl.fromTo('.hf-transition-icon-swap .to', { opacity: 0, '--hf-icon-scale': 1.35, '--hf-icon-blur': '8px', '--hf-icon-rotate': '18deg' }, { opacity: 1, '--hf-icon-scale': 1, '--hf-icon-blur': '0px', '--hf-icon-rotate': '0deg', duration: 0.26, ease: 'back.out(1.7)' }, startTime + 0.12);
+-->
diff --git a/registry/components/icon-swap/registry-item.json b/registry/components/icon-swap/registry-item.json
new file mode 100644
index 0000000000..3d61449276
--- /dev/null
+++ b/registry/components/icon-swap/registry-item.json
@@ -0,0 +1,108 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "icon-swap",
+  "type": "hyperframes:component",
+  "title": "Icon Swap",
+  "description": "A scale-and-blur icon swap primitive for toolbar and action state changes",
+  "tags": ["video-primitive", "transition-primitive", "transitions-dev-port", "icon", "swap"],
+  "files": [
+    {
+      "path": "icon-swap.html",
+      "target": "compositions/components/icon-swap.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "tone",
+      "type": "enum",
+      "role": "style",
+      "label": "Tone",
+      "description": "Button fill and glyph colour. Accent rides --brand.",
+      "default": "dark",
+      "options": [
+        {
+          "value": "dark",
+          "label": "Dark"
+        },
+        {
+          "value": "light",
+          "label": "Light"
+        },
+        {
+          "value": "accent",
+          "label": "Accent"
+        }
+      ]
+    },
+    {
+      "id": "size",
+      "type": "enum",
+      "role": "layout",
+      "label": "Size",
+      "description": "Button box and glyph size, from a toolbar chip to a hero action.",
+      "default": "standard",
+      "options": [
+        {
+          "value": "small",
+          "label": "Small"
+        },
+        {
+          "value": "standard",
+          "label": "Standard"
+        },
+        {
+          "value": "large",
+          "label": "Large"
+        }
+      ]
+    },
+    {
+      "id": "shape",
+      "type": "enum",
+      "role": "style",
+      "label": "Shape",
+      "description": "Corner treatment of the button box.",
+      "default": "rounded",
+      "options": [
+        {
+          "value": "rounded",
+          "label": "Rounded"
+        },
+        {
+          "value": "circle",
+          "label": "Circle"
+        },
+        {
+          "value": "square",
+          "label": "Square"
+        }
+      ]
+    },
+    {
+      "id": "blur",
+      "type": "enum",
+      "role": "motion",
+      "label": "Blur",
+      "description": "Scales the blur radius the timeline drives through the swap, from a light haze to a full smear.",
+      "default": "standard",
+      "options": [
+        {
+          "value": "soft",
+          "label": "Soft"
+        },
+        {
+          "value": "standard",
+          "label": "Standard"
+        },
+        {
+          "value": "heavy",
+          "label": "Heavy"
+        }
+      ]
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/icon-swap.png"
+  }
+}
diff --git a/registry/components/ink-bleed-reveal/README.md b/registry/components/ink-bleed-reveal/README.md
new file mode 100644
index 0000000000..2bef3f0960
--- /dev/null
+++ b/registry/components/ink-bleed-reveal/README.md
@@ -0,0 +1,48 @@
+# ink-bleed-reveal
+
+Liquid ink blooms through paper to reveal a mark: several ink blobs bleed outward from the drop point, merge like liquid under the gooey filter (feGaussianBlur + a hard feColorMatrix alpha threshold), then the puddle contracts and dies as the crisp mark resolves beneath it. A seeded, static paper-grain overlay (feTurbulence, fixed seed) rides the whole piece.
+
+4s authored, elastic HOLD, exit `none` by default. Wave M experiment (watch page only, not on the hero shelf).
+
+## Variables
+
+| id       | type   | default | notes                                                                                                                                                     |
+| -------- | ------ | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `blobs`  | number | `5`     | How many ink blobs bleed and merge, clamped 4 to 6.                                                                                                       |
+| `accent` | enum   | `green` | Ink tint: green rides `--brand`, blue rides `--accent`, violet rides `--accent-2`. The ink body is the accent mixed toward `--fg` so it reads as pigment. |
+| `exit`   | enum   | `none`  | `none` holds until the cut; `fade` departs opacity-only; `up` rises out.                                                                                  |
+
+## Mark slot
+
+The mark is a slot. Place an inert template anywhere in the HOST page (templates never render, and the runtime wipes the host clip's own children on mount, so the slot lives at document level):
+
+```html
+<template data-slot="ink-bleed-reveal-mark">
+  <img src="./assets/logo.svg" alt="" style="width: 40cqmin" />
+</template>
+```
+
+With no slot, the primitive renders a token monogram: one display glyph in an ink-colored ring, contract tokens only. Light paper is the home register, but every color rides a token so themes restate it.
+
+## Mount
+
+```html
+<div
+  class="clip"
+  data-composition-id="ink-bleed-reveal"
+  data-composition-src="./ink-bleed-reveal.html"
+  data-variable-values='{"blobs":6,"accent":"blue"}'
+  data-start="0"
+  data-duration="4"
+  data-track-index="0"
+></div>
+```
+
+Elastic root: no `data-width`/`data-height`; it fills whatever box the host clip gives it. Timeline registers under the literal `ink-bleed-reveal` key.
+
+## Notes
+
+- The gooey read comes from the blur-to-threshold ratio, not the blur alone: a Gaussian blur (radius scaled from the host box at mount) softens the blob silhouettes together, then the colormatrix threshold (alpha slope 22, intercept -9) snaps the merged alpha back to a crisp liquid edge. Skipping the threshold step yields smudge, not goo. The chain is the classic SVG `feGaussianBlur` + `feColorMatrix` recipe, computed in a low-resolution canvas work buffer each repaint: Chrome's live SVG/CSS filter raster patches damaged tiles with seek-history-dependent seam antialiasing, while a cleared, fully redrawn canvas lands byte-identical frames.
+- Closed-form field, no physics: one per-blob parameter table is built once from fixed LCG seed `0x1b1eedca`; every painted frame positions each blob as a pure function of (table row, timeline time) inside the anchor tween's `onUpdate`. Zero per-blob tweens, no velocities, no integration, so eventful seeks (`suppressEvents=false`) land identical frames in any order and either direction.
+- By the end of IN every blob is dead and the goo canvas is one clear rect; the paper grain is painted by a fixed-seed `feTurbulence` and never animated. The HOLD is therefore byte-still: the crisp mark on quiet paper.
+- Cost note: each repaint blurs and thresholds a third-resolution buffer (one `getImageData` readback per frame); fine at watch-page sizes, but avoid mounting several instances of this primitive on one frame.
diff --git a/registry/components/ink-bleed-reveal/demo.html b/registry/components/ink-bleed-reveal/demo.html
new file mode 100644
index 0000000000..4bfebff46b
--- /dev/null
+++ b/registry/components/ink-bleed-reveal/demo.html
@@ -0,0 +1,118 @@
+<!doctype html>
+<!--
+  ink-bleed-reveal demo. This standalone composition mounts the primitive
+  FULL-BLEED through data-composition-src on a light paper register.
+  Non-default blobs and accent values prove the variable path, and a slotted
+  wordmark proves the mark slot (the default token monogram never renders
+  here).
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Ink Bleed Reveal Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #f7f4ee);
+      }
+
+      #root {
+        --bg: #f7f4ee;
+        --fg: #1d1b16;
+        --muted: #6d675c;
+        --surface: #fffdf8;
+        --border: #ddd6c8;
+        --brand: #14a35e;
+        --accent: #2f6fed;
+        --accent-2: #7a5cd6;
+        --font-display: "Inter", system-ui, sans-serif;
+        --font-mono: "SF Mono", ui-monospace, monospace;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(
+          ellipse at 50% 42%,
+          var(--bg, #fbf9f4) 0%,
+          color-mix(in srgb, var(--bg, #f7f4ee) 92%, var(--fg, #1d1b16)) 100%
+        );
+      }
+
+      .mount-bleed {
+        position: absolute;
+        inset: 0;
+        container-type: size;
+        overflow: hidden;
+      }
+
+      .demo-mark {
+        display: grid;
+        justify-items: center;
+        gap: 18px;
+        color: color-mix(in srgb, var(--accent, #2f6fed) 55%, var(--fg, #1d1b16));
+        font-family: var(--font-display, "Inter", system-ui, sans-serif);
+      }
+
+      .demo-mark-word {
+        font-size: 170px;
+        font-weight: 600;
+        line-height: 1;
+        letter-spacing: 0.04em;
+      }
+
+      .demo-mark-label {
+        font-family: var(--font-mono, ui-monospace, monospace);
+        font-size: 24px;
+        letter-spacing: 0.32em;
+        color: var(--muted, #6d675c);
+      }
+    </style>
+  </head>
+  <body>
+    <template data-slot="ink-bleed-reveal-mark">
+      <div class="demo-mark">
+        <div class="demo-mark-word">INK</div>
+        <div class="demo-mark-label">BLEED REVEAL</div>
+      </div>
+    </template>
+
+    <div
+      id="root"
+      data-composition-id="ink-bleed-reveal-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="ink-bleed-reveal-mount"
+        class="mount-bleed clip"
+        data-composition-id="ink-bleed-reveal"
+        data-composition-src="./ink-bleed-reveal.html"
+        data-variable-values='{"blobs":6,"accent":"blue"}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="1920"
+        data-height="1080"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["ink-bleed-reveal-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/ink-bleed-reveal/ink-bleed-reveal.html b/registry/components/ink-bleed-reveal/ink-bleed-reveal.html
new file mode 100644
index 0000000000..65d68627af
--- /dev/null
+++ b/registry/components/ink-bleed-reveal/ink-bleed-reveal.html
@@ -0,0 +1,447 @@
+<!doctype html>
+<!--
+  ink-bleed-reveal: HyperFrames video primitive (texture / reveals). Wave M7.
+
+  Liquid ink blooms through paper to reveal a mark. Several ink blobs bleed
+  outward from the center and merge like liquid under the gooey chain
+  (Gaussian blur + a hard alpha threshold: the blur softens the silhouettes
+  together, the threshold snaps the merged alpha back to a crisp liquid
+  edge), then the puddle contracts and dies as the crisp mark resolves
+  beneath it. The chain is the classic SVG feGaussianBlur + feColorMatrix
+  recipe, but computed in a canvas work buffer each repaint: Chrome's live
+  filter raster patches damaged tiles with seek-history-dependent seam
+  antialiasing, while a cleared, fully redrawn canvas is a pure function of
+  (table, time) and lands byte-identical frames. A seeded, static
+  paper-grain overlay (feTurbulence, fixed seed, never animated) rides the
+  whole piece.
+
+  The mark is a SLOT. Callers supply content by placing an inert template
+  anywhere in the HOST page (templates never render, and the runtime wipes
+  the host clip's own children on mount, so the slot lives at document level):
+
+    <template data-slot="ink-bleed-reveal-mark"> ... </template>
+
+  With no slot, the primitive renders a token monogram: one display glyph in
+  ink, drawn entirely from contract tokens. Light paper is the home register,
+  but every color rides a token so themes restate it.
+
+  Variables (declared in data-composition-variables below):
+    - blobs (number 4-6, default 5): how many ink blobs bleed and merge.
+    - accent ("green" | "blue" | "violet", default "green"): ink tint; green
+      rides --brand, blue rides --accent, violet rides --accent-2. The ink
+      body is the accent mixed toward --fg so it reads as pigment, not paint.
+    - exit ("none" | "fade" | "up", default "none"): frame roots own
+      transitions; the default holds the revealed mark to the last pixel.
+
+  Envelope, fixed IN and OUT with elastic HOLD only (never timeScale):
+    IN_BASE  = 2.80s  ink blooms, merges, contracts; mark resolves crisp
+    HOLD     = max(0, D - IN - OUT); truly still (grain is static by
+               construction: painted by a fixed-seed feTurbulence, never
+               animated, so held frames are byte-identical)
+    OUT_BASE = 0.45s  only when exit != none
+    If D < IN_BASE + OUT_BASE, IN and OUT compress together.
+
+  Determinism (closed-form field law): there is NO physics state. One
+  per-blob parameter table is computed exactly once during synchronous
+  timeline construction from fixed LCG seed 0x1b1eedca; every painted frame
+  positions each blob as a pure function of (table row, timeline time) inside
+  the anchor tween's onUpdate. Zero per-blob tweens. No Math.random, no wall
+  clock, no requestAnimationFrame. Eventful seeks (suppressEvents=false, the
+  engine's render path) land identical frames in any order and either
+  direction; by the end of IN every blob's scale is exactly zero and the goo
+  layer's opacity is zero, so the HOLD is the crisp mark on still paper.
+
+  Mount contract: the runtime clones only this template. #root fills the
+  host box (no data-width/data-height, container-type: size, cqmin units),
+  is styled via #root only, and registers one paused timeline under the
+  LITERAL "ink-bleed-reveal" key. All DOM state is set with explicit
+  endpoints (gsap.set + fromTo) so any seek order lands identical frames.
+-->
+<html
+  lang="en"
+  data-composition-id="ink-bleed-reveal"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "blobs", "type": "number", "role": "style", "label": "Blobs", "description": "How many ink blobs bleed and merge (4 to 6).", "default": 5, "min": 4, "max": 6, "step": 1 },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Ink tint: green rides --brand, blue rides --accent, violet rides --accent-2.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the revealed mark holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Ink Bleed Reveal</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="ink-bleed-reveal" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #1d1b16);
+            font-family: var(--font-display, "Inter", system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .ibr-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .ibr-stage {
+            position: absolute;
+            inset: 0;
+            will-change: transform, opacity;
+          }
+
+          /* The gooey layer is a canvas: blur + alpha threshold are computed
+             in-buffer each repaint (ctx.filter blur, then the colormatrix
+             threshold applied to the readback). Chrome's live SVG/CSS filter
+             raster patches damaged tiles with seek-history-dependent seam
+             antialiasing, which breaks byte-identical frames; a cleared and
+             fully redrawn canvas is a pure function of (table, time). */
+          .ibr-canvas {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+          }
+
+          .ibr-mark {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            will-change: transform, opacity;
+          }
+
+          .ibr-monogram {
+            display: grid;
+            place-items: center;
+            width: 44cqmin;
+            height: 44cqmin;
+            border: 0.5cqmin solid color-mix(in srgb, var(--ibr-accent) 58%, var(--fg, #1d1b16));
+            border-radius: 50%;
+          }
+
+          .ibr-monogram-glyph {
+            color: color-mix(in srgb, var(--ibr-accent) 55%, var(--fg, #1d1b16));
+            font-size: 22cqmin;
+            font-weight: 600;
+            line-height: 1;
+            letter-spacing: 0.02em;
+          }
+
+          /* Seeded static paper grain: feTurbulence with a FIXED seed paints
+             this layer once per raster; nothing about it is animated, so it
+             adds tooth without touching determinism. */
+          .ibr-grain {
+            position: absolute;
+            inset: 0;
+            filter: url(#ibr-grain-filter);
+            opacity: 0.5;
+            mix-blend-mode: multiply;
+          }
+        </style>
+
+        <div
+          id="ink-bleed-reveal-clip"
+          class="ibr-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <svg aria-hidden="true" width="0" height="0" style="position: absolute">
+            <defs>
+              <filter
+                id="ibr-grain-filter"
+                x="0%"
+                y="0%"
+                width="100%"
+                height="100%"
+                color-interpolation-filters="sRGB"
+              >
+                <feTurbulence
+                  type="fractalNoise"
+                  baseFrequency="0.82"
+                  numOctaves="2"
+                  seed="11"
+                  stitchTiles="stitch"
+                  result="noise"
+                />
+                <feColorMatrix
+                  in="noise"
+                  type="matrix"
+                  values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0.14 0.14 0.14 0 0"
+                />
+              </filter>
+            </defs>
+          </svg>
+          <div class="ibr-stage">
+            <div class="ibr-mark">
+              <div class="ibr-monogram">
+                <span class="ibr-monogram-glyph" aria-hidden="true">H</span>
+              </div>
+            </div>
+            <canvas class="ibr-canvas" aria-hidden="true"></canvas>
+            <div class="ibr-grain"></div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".ibr-stage");
+            var canvas = root.querySelector(".ibr-canvas");
+            var mark = root.querySelector(".ibr-mark");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var blobCount = Math.round(Number(vars.blobs));
+            if (!Number.isFinite(blobCount)) blobCount = 5;
+            blobCount = Math.min(6, Math.max(4, blobCount));
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #14a35e)",
+              blue: "var(--accent, #2f6fed)",
+              violet: "var(--accent-2, #7a5cd6)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            root.style.setProperty("--ibr-accent", accentColors[accent]);
+
+            // SLOT. Caller templates live at HOST DOCUMENT level (the mount
+            // wipes host-clip children, and templates never render). The
+            // scoped document proxy filters queries to this composition's
+            // subtree, so the lookup deliberately goes through ownerDocument.
+            var hostDoc = root.ownerDocument;
+            var slotTemplate = null;
+            try {
+              slotTemplate = hostDoc.querySelector('template[data-slot="ink-bleed-reveal-mark"]');
+            } catch (error) {
+              slotTemplate = null;
+            }
+            if (slotTemplate) {
+              mark.querySelector(".ibr-monogram").remove();
+              mark.appendChild(hostDoc.importNode(slotTemplate.content, true));
+            }
+
+            // Envelope: fixed IN/OUT, elastic HOLD, never time-scaled.
+            var IN_BASE = 2.8;
+            var OUT_BASE = exit === "none" ? 0 : 0.45;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var totalBase = Math.max(0.001, IN_BASE + OUT_BASE);
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var OUT_START = IN + HOLD;
+
+            // Geometry basis is fixed once at mount from the host box, like
+            // the particle-image-reveal canvas raster: the same host always
+            // yields the same pixel coordinates and blur radius. The display
+            // canvas rides the host raster; the goo itself is computed in a
+            // low-resolution work buffer (the blur radius dwarfs the lost
+            // detail, and the upscale softens the ink edge pleasantly).
+            var dpr = Math.min(2, Math.max(1, Number(window.devicePixelRatio) || 1));
+            var box = root.getBoundingClientRect();
+            var cssW = Math.max(1, Math.round(box.width) || 640);
+            var cssH = Math.max(1, Math.round(box.height) || 360);
+            var minDim = Math.min(cssW, cssH);
+            var cx = cssW / 2;
+            var cy = cssH / 2;
+            canvas.width = Math.round(cssW * dpr);
+            canvas.height = Math.round(cssH * dpr);
+            var ctx = canvas.getContext("2d");
+            var LOW = 3;
+            var work = hostDoc.createElement("canvas");
+            work.width = Math.max(1, Math.ceil(cssW / LOW));
+            work.height = Math.max(1, Math.ceil(cssH / LOW));
+            var workCtx = work.getContext("2d", { willReadFrequently: true });
+
+            // Gooey ratio: the blur radius vs. threshold slope is what makes
+            // this read as liquid instead of blur. Same math as the classic
+            // SVG chain (feGaussianBlur stdDeviation, then feColorMatrix
+            // alpha row 22 / -9), computed in-buffer for byte-stable seeks.
+            var blurLow = Math.max(2, (minDim * 0.028) / LOW);
+
+            // Resolve the ink color to a concrete value once at mount so
+            // canvas fills never depend on style recalc during seeks.
+            var probe = hostDoc.createElement("span");
+            probe.style.color =
+              "color-mix(in srgb, " + accentColors[accent] + " 62%, var(--fg, #1d1b16))";
+            root.appendChild(probe);
+            var inkColor = getComputedStyle(probe).color || "#1d1b16";
+            probe.remove();
+
+            // The LCG and every per-blob decision live here. This IIFE runs
+            // once before timeline construction; afterwards only the table is
+            // read. Blob state at any time is a pure closed-form function of
+            // (table row, timeline time). No velocities, no integration.
+            var blobRows = (function () {
+              var state = 0x1b1eedca;
+              function next() {
+                state = (Math.imul(1664525, state) + 1013904223) >>> 0;
+                return state / 4294967296;
+              }
+              var rows = [];
+              for (var i = 0; i < blobCount; i += 1) {
+                var angle = (i / blobCount) * Math.PI * 2 + next() * 0.9;
+                rows.push({
+                  dirX: Math.cos(angle),
+                  dirY: Math.sin(angle),
+                  // How far this blob bleeds outward from the drop point.
+                  spread: (0.16 + 0.16 * next()) * minDim,
+                  // Base diameter; the first blob is the fat mother drop.
+                  size: (i === 0 ? 0.34 : 0.14 + 0.12 * next()) * minDim,
+                  // Bloom stagger and death schedule, fractions of IN.
+                  birth: i === 0 ? 0 : 0.04 + 0.3 * next(),
+                  die: 0.5 + 0.16 * next(),
+                  // Wobble makes the bleed organic; amplitude rides (1 - die)
+                  // so it is exactly zero once the blob is gone.
+                  wobbleAmp: (0.02 + 0.03 * next()) * minDim,
+                  wobblePhase: next() * Math.PI * 2,
+                  wobbleFreq: 2 + Math.floor(next() * 3),
+                });
+              }
+              return rows;
+            })();
+
+            function clamp01(v) {
+              return v < 0 ? 0 : v > 1 ? 1 : v;
+            }
+            function easeOutCubic(v) {
+              return 1 - Math.pow(1 - v, 3);
+            }
+            function easeInOut(v) {
+              return v < 0.5 ? 2 * v * v : 1 - Math.pow(-2 * v + 2, 2) / 2;
+            }
+
+            // Pure repaint: clear the work buffer, draw every blob from its
+            // closed-form (row, p) state, blur, threshold the readback, then
+            // blit up to the display canvas. Every step is a pure function
+            // of (table, timeline time); no history survives a frame.
+            function paint(timeSeconds) {
+              var p = IN > 0 ? clamp01(timeSeconds / IN) : 1;
+              ctx.clearRect(0, 0, canvas.width, canvas.height);
+              // The layer fades over the mark as the last blobs die,
+              // guaranteeing an exactly-empty canvas through the HOLD.
+              var layerAlpha = 1 - clamp01((p - 0.86) / 0.12);
+              if (layerAlpha === 0) return;
+              workCtx.filter = "none";
+              workCtx.clearRect(0, 0, work.width, work.height);
+              workCtx.filter = "blur(" + blurLow + "px)";
+              workCtx.fillStyle = inkColor;
+              var drew = false;
+              for (var i = 0; i < blobRows.length; i += 1) {
+                var row = blobRows[i];
+                // Bloom: the blob surfaces and bleeds outward.
+                var grow = easeOutCubic(clamp01((p - row.birth) / 0.34));
+                // Settle: the ink pulls back to the drop point and dies.
+                // Every die ramp completes by p = 0.97 exactly.
+                var die = easeInOut(clamp01((p - row.die) / (0.97 - row.die)));
+                var r = (row.size / 2) * grow * (1 - die);
+                if (r <= 0.01) continue;
+                var reach = row.spread * grow * (1 - die);
+                var wob =
+                  Math.sin(p * Math.PI * 2 * row.wobbleFreq + row.wobblePhase) *
+                  row.wobbleAmp *
+                  grow *
+                  (1 - die);
+                var x = cx + row.dirX * reach + wob * row.dirY;
+                var y = cy + row.dirY * reach - wob * row.dirX;
+                workCtx.beginPath();
+                workCtx.arc(x / LOW, y / LOW, r / LOW, 0, Math.PI * 2);
+                workCtx.fill();
+                drew = true;
+              }
+              workCtx.filter = "none";
+              if (!drew) return;
+              // The colormatrix threshold (alpha row 22 / -9) applied to the
+              // blurred buffer: this snap is what turns overlap into goo.
+              var image = workCtx.getImageData(0, 0, work.width, work.height);
+              var data = image.data;
+              for (var j = 3; j < data.length; j += 4) {
+                var a = (data[j] / 255) * 22 - 9;
+                data[j] = a <= 0 ? 0 : a >= 1 ? 255 : Math.round(a * 255);
+              }
+              workCtx.putImageData(image, 0, 0);
+              ctx.globalAlpha = layerAlpha;
+              ctx.drawImage(work, 0, 0, canvas.width, canvas.height);
+              ctx.globalAlpha = 1;
+            }
+
+            gsap.set(stage, { opacity: 1, y: "0cqh" });
+            gsap.set(mark, { opacity: 0, scale: 0.94, transformOrigin: "50% 50%" });
+
+            var tl = gsap.timeline({
+              paused: true,
+              onUpdate: function () {
+                paint(tl.time());
+              },
+            });
+
+            // Anchor tween: an inert plain-object tween spanning the full
+            // authored duration so tl.time() covers [0, D] and onUpdate
+            // (the blob painter) fires for every eventful seek anywhere in
+            // the piece, including the hold.
+            tl.to({ p: 0 }, { p: 1, duration: duration, ease: "none" }, 0);
+
+            // IN: the crisp mark resolves beneath the contracting puddle.
+            // Both endpoints authored; the ink supplies the drama, the mark
+            // lands with one restrained settle.
+            tl.fromTo(
+              mark,
+              { opacity: 0 },
+              { opacity: 1, duration: IN * 0.34, ease: "power2.out" },
+              IN * 0.52,
+            );
+            tl.fromTo(
+              mark,
+              { scale: 0.94 },
+              { scale: 1, duration: IN * 0.4, ease: "power2.out" },
+              IN * 0.52,
+            );
+
+            // HOLD: truly still. The goo canvas is one clear rect (every
+            // blob dead, layer alpha zero) and the grain is a static seeded
+            // raster.
+
+            // OUT: optional departure; exit none holds until the frame cuts.
+            if (exit === "up") {
+              tl.to(stage, { y: "-4cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "fade") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            }
+
+            tl.seek(0);
+            paint(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["ink-bleed-reveal"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/ink-bleed-reveal/registry-item.json b/registry/components/ink-bleed-reveal/registry-item.json
new file mode 100644
index 0000000000..cab0b20160
--- /dev/null
+++ b/registry/components/ink-bleed-reveal/registry-item.json
@@ -0,0 +1,67 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "ink-bleed-reveal",
+  "type": "hyperframes:component",
+  "title": "Ink Bleed Reveal",
+  "description": "Liquid ink blooms through paper under a gooey blur-plus-threshold filter, merges, then contracts as a crisp slotted mark resolves beneath it, with static seeded paper grain riding the result.",
+  "tags": [
+    "motion-primitive",
+    "texture",
+    "reveal",
+    "gooey",
+    "svg-filter",
+    "deterministic",
+    "experiment"
+  ],
+  "jobs": ["reveal"],
+  "family": "texture",
+  "profile": "materialize",
+  "evidence": "Wave M7 experiment: liquid-threshold gooey recipe (wild-scout #3, Jakubowski / Ethode referents), closed-form blob field, no physics state",
+  "syncPoints": [{ "id": "mark-locked", "phase": "in", "offset": 2.8 }],
+  "files": [
+    {
+      "path": "ink-bleed-reveal.html",
+      "target": "compositions/components/ink-bleed-reveal.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "blobs",
+      "type": "number",
+      "role": "style",
+      "label": "Blobs",
+      "description": "How many ink blobs bleed and merge (4 to 6).",
+      "default": 5,
+      "min": 4,
+      "max": 6,
+      "step": 1
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Ink tint: green rides --brand, blue rides --accent, violet rides --accent-2.",
+      "default": "green",
+      "options": [
+        { "value": "green", "label": "Green" },
+        { "value": "blue", "label": "Blue" },
+        { "value": "violet", "label": "Violet" }
+      ]
+    },
+    {
+      "id": "exit",
+      "type": "enum",
+      "role": "timing",
+      "label": "Exit",
+      "description": "Optional departure. Default none: the revealed mark holds until the frame cuts.",
+      "default": "none",
+      "options": [
+        { "value": "none", "label": "None" },
+        { "value": "fade", "label": "Fade" },
+        { "value": "up", "label": "Up" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/inline-highlight/demo.html b/registry/components/inline-highlight/demo.html
new file mode 100644
index 0000000000..41cb51dc3a
--- /dev/null
+++ b/registry/components/inline-highlight/demo.html
@@ -0,0 +1,83 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Inline Highlight - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f5f5f4;
+        color: #18181b;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .copy {
+        width: 1200px;
+        font-size: 88px;
+        line-height: 1.14;
+        font-weight: 800;
+        letter-spacing: -0.025em;
+        text-align: left;
+      }
+      .hf-inline-highlight {
+        --hf-highlight-scale: 0;
+        --hf-highlight-color: #facc15;
+        position: relative;
+        display: inline;
+        isolation: isolate;
+      }
+      .hf-inline-highlight::after {
+        content: "";
+        position: absolute;
+        left: -0.05em;
+        right: -0.05em;
+        bottom: 0.06em;
+        height: 0.35em;
+        background: var(--hf-highlight-color);
+        border-radius: 3px;
+        transform: scaleX(var(--hf-highlight-scale));
+        transform-origin: left center;
+        z-index: -1;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="inline-highlight-demo"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+    >
+      <div class="copy">
+        Turn the important words into
+        <span class="hf-inline-highlight">animated emphasis</span> without rebuilding the scene.
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        tl.from(".copy", { opacity: 0, y: 24, duration: 0.55, ease: "power3.out" }, 0.3);
+        tl.to(
+          ".hf-inline-highlight",
+          { "--hf-highlight-scale": 1, duration: 0.6, ease: "power2.out" },
+          0.95,
+        );
+        window.__timelines = window.__timelines || {};
+        window.__timelines["inline-highlight-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/inline-highlight/inline-highlight.html b/registry/components/inline-highlight/inline-highlight.html
new file mode 100644
index 0000000000..0bc7fe9957
--- /dev/null
+++ b/registry/components/inline-highlight/inline-highlight.html
@@ -0,0 +1,92 @@
+<!--
+  Inline Highlight - animated marker underline/fill.
+
+  Wrap target text with class="hf-inline-highlight". Animate
+  --hf-highlight-scale from 0 to 1 on the element.
+
+  Variables. The script reads each one, falls back to the declared default on anything
+  missing or unrecognised, and writes the result onto the document root, so highlights
+  authored anywhere in the composition pick it up no matter when they are parsed. The
+  timeline recipe below is untouched by them.
+
+    - tint (yellow | green | blue | violet, default yellow): marker colour. yellow is the
+      highlighter default, the other three ride --brand, --accent and --accent-2.
+    - thickness (thin | standard | thick, default standard): height of the band behind the
+      text, 0.22em, 0.38em or 0.62em.
+    - origin (left | right | center, default left): edge the marker grows out of while
+      --hf-highlight-scale runs from 0 to 1.
+
+  Setting --hf-highlight-color, --hf-highlight-height or --hf-highlight-origin on an
+  individual highlight still wins over the variable, so one-off overrides keep working.
+-->
+
+<style
+  data-composition-variables='[
+    { "id": "tint", "type": "enum", "role": "style", "label": "Tint", "description": "Marker colour. Green, blue and violet ride --brand, --accent and --accent-2.", "default": "yellow", "options": [{ "value": "yellow", "label": "Yellow" }, { "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "thickness", "type": "enum", "role": "style", "label": "Thickness", "description": "Height of the marker band behind the text, as a share of the font size.", "default": "standard", "options": [{ "value": "thin", "label": "Thin" }, { "value": "standard", "label": "Standard" }, { "value": "thick", "label": "Thick" }] },
+    { "id": "origin", "type": "enum", "role": "motion", "label": "Origin", "description": "Edge the marker grows out of as the scale variable runs from 0 to 1.", "default": "left", "options": [{ "value": "left", "label": "Left" }, { "value": "right", "label": "Right" }, { "value": "center", "label": "Center" }] }
+  ]'
+>
+  .hf-inline-highlight {
+    --hf-highlight-scale: 0;
+    position: relative;
+    display: inline;
+    z-index: 0;
+  }
+  .hf-inline-highlight::after {
+    content: "";
+    position: absolute;
+    left: -0.08em;
+    right: -0.08em;
+    bottom: 0.05em;
+    height: var(--hf-highlight-height, 0.38em);
+    background: var(--hf-highlight-color, #fff06a);
+    transform: scaleX(var(--hf-highlight-scale));
+    transform-origin: var(--hf-highlight-origin, left center);
+    z-index: -1;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var tints = {
+      yellow: "#fff06a",
+      green: "var(--brand, #34d399)",
+      blue: "var(--accent, #38bdf8)",
+      violet: "var(--accent-2, #a78bfa)",
+    };
+    var heights = { thin: "0.22em", standard: "0.38em", thick: "0.62em" };
+    var origins = { left: "left center", right: "right center", center: "center" };
+
+    var root = document.documentElement;
+    root.style.setProperty("--hf-highlight-color", tints[pick(tints, vars.tint, "yellow")]);
+    root.style.setProperty(
+      "--hf-highlight-height",
+      heights[pick(heights, vars.thickness, "standard")],
+    );
+    root.style.setProperty("--hf-highlight-origin", origins[pick(origins, vars.origin, "left")]);
+  })();
+</script>
+
+<!--
+  Timeline integration:
+
+  tl.to(".hf-inline-highlight", {
+    "--hf-highlight-scale": 1,
+    duration: 0.55,
+    ease: "power2.out",
+    stagger: 0.12,
+  }, startTime);
+-->
diff --git a/registry/components/inline-highlight/registry-item.json b/registry/components/inline-highlight/registry-item.json
new file mode 100644
index 0000000000..f9839ac4ee
--- /dev/null
+++ b/registry/components/inline-highlight/registry-item.json
@@ -0,0 +1,60 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "inline-highlight",
+  "type": "hyperframes:component",
+  "title": "Inline Highlight",
+  "description": "A clean marker-style inline highlight that animates behind text using a CSS scale variable",
+  "tags": ["motion-primitive", "text", "highlight", "caption"],
+  "files": [
+    {
+      "path": "inline-highlight.html",
+      "target": "compositions/components/inline-highlight.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "tint",
+      "type": "enum",
+      "role": "style",
+      "label": "Tint",
+      "description": "Marker colour. Green, blue and violet ride --brand, --accent and --accent-2.",
+      "default": "yellow",
+      "options": [
+        { "value": "yellow", "label": "Yellow" },
+        { "value": "green", "label": "Green" },
+        { "value": "blue", "label": "Blue" },
+        { "value": "violet", "label": "Violet" }
+      ]
+    },
+    {
+      "id": "thickness",
+      "type": "enum",
+      "role": "style",
+      "label": "Thickness",
+      "description": "Height of the marker band behind the text, as a share of the font size.",
+      "default": "standard",
+      "options": [
+        { "value": "thin", "label": "Thin" },
+        { "value": "standard", "label": "Standard" },
+        { "value": "thick", "label": "Thick" }
+      ]
+    },
+    {
+      "id": "origin",
+      "type": "enum",
+      "role": "motion",
+      "label": "Origin",
+      "description": "Edge the marker grows out of as the scale variable runs from 0 to 1.",
+      "default": "left",
+      "options": [
+        { "value": "left", "label": "Left" },
+        { "value": "right", "label": "Right" },
+        { "value": "center", "label": "Center" }
+      ]
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/inline-highlight.png"
+  }
+}
diff --git a/registry/components/input-feedback/demo.html b/registry/components/input-feedback/demo.html
new file mode 100644
index 0000000000..04820b7510
--- /dev/null
+++ b/registry/components/input-feedback/demo.html
@@ -0,0 +1,144 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Input Feedback - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f8fafc;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        min-width: 760px;
+        min-height: 480px;
+        padding: 56px;
+        /* ponytail: scale up the static wrapper so the widget fills ~60% of frame; GSAP targets children, not this element */
+        transform: scale(2.8);
+      }
+      .hf-transition-input-feedback {
+        display: grid;
+        gap: 10px;
+        width: 430px;
+        color: #18181b;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-transition-input-feedback label {
+        color: #52525b;
+        font-size: 15px;
+        font-weight: 850;
+      }
+      .hf-transition-input-shell {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        height: 62px;
+        padding: 0 16px;
+        border: 1px solid #d4d4d8;
+        border-radius: 16px;
+        background: #ffffff;
+        box-shadow: 0 18px 50px rgba(0, 0, 0, 0.08);
+      }
+      .hf-transition-input-value {
+        flex: 1;
+        font-size: 20px;
+        font-weight: 760;
+      }
+      .hf-transition-input-clear,
+      .hf-transition-input-check {
+        display: grid;
+        place-items: center;
+        height: 28px;
+        border-radius: 999px;
+        font-size: 12px;
+        font-weight: 900;
+      }
+      .hf-transition-input-clear {
+        width: 28px;
+        border: 0;
+        background: #f4f4f5;
+        color: #71717a;
+      }
+      .hf-transition-input-check {
+        min-width: 38px;
+        padding: 0 8px;
+        background: #dcfce7;
+        color: #166534;
+      }
+      .hf-transition-input-hint {
+        margin: 0;
+        color: #16a34a;
+        font-size: 14px;
+        font-weight: 800;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="input-feedback-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-transition-input-feedback" data-state="valid">
+          <label>Email</label>
+          <div class="hf-transition-input-shell">
+            <span class="hf-transition-input-value">mia@example.com</span>
+            <button class="hf-transition-input-clear" type="button">x</button>
+            <span class="hf-transition-input-check">OK</span>
+          </div>
+          <p class="hf-transition-input-hint">Looks good.</p>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        tl.fromTo(
+          ".hf-transition-input-feedback",
+          { y: 22, opacity: 0 },
+          { y: 0, opacity: 1, duration: 0.34, ease: "power2.out" },
+          0.3,
+        );
+        tl.to(
+          ".hf-transition-input-shell",
+          { x: -12, duration: 0.06, repeat: 5, yoyo: true, ease: "none" },
+          0.72,
+        );
+        tl.fromTo(
+          ".hf-transition-input-check",
+          { scale: 0, opacity: 0 },
+          { scale: 1, opacity: 1, duration: 0.28, ease: "back.out(2)" },
+          1.18,
+        );
+        tl.fromTo(
+          ".hf-transition-input-hint",
+          { opacity: 0, y: -6 },
+          { opacity: 1, y: 0, duration: 0.22, ease: "power2.out" },
+          1.28,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["input-feedback-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/input-feedback/input-feedback.html b/registry/components/input-feedback/input-feedback.html
new file mode 100644
index 0000000000..5542431ac2
--- /dev/null
+++ b/registry/components/input-feedback/input-feedback.html
@@ -0,0 +1,155 @@
+<!--
+  Input Feedback - transitions.dev-inspired primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Use the timeline
+  integration note at the bottom as the starting point for deterministic GSAP
+  animation.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the text or state attribute the
+  CSS below already keys off. The timeline recipe at the bottom is untouched
+  by them: it keeps shaking the same shell and popping the same chip.
+
+    - status (valid | error, default valid): whether the field reads as
+      accepted or rejected. valid is the green border, chip and hint; error
+      turns all three red and swaps the chip glyph to an exclamation mark.
+      Pair it with a matching hint.
+    - value (string, default "mia@example.com"): the text held by the field.
+      A blank or non-text override keeps the default.
+    - hint (string, default "Looks good."): the helper line under the field.
+
+  On every default the result is identical to the original: a green valid
+  field holding mia@example.com over Looks good.
+-->
+
+<div
+  class="hf-transition-input-feedback"
+  data-state="valid"
+  data-composition-variables='[
+    { "id": "status", "type": "enum", "role": "style", "label": "Status", "description": "Whether the field reads as accepted or rejected, colouring the border, chip and hint.", "default": "valid", "options": [{ "value": "valid", "label": "Valid" }, { "value": "error", "label": "Error" }] },
+    { "id": "value", "type": "string", "role": "content", "label": "Value", "description": "Text held by the field.", "default": "mia@example.com" },
+    { "id": "hint", "type": "string", "role": "content", "label": "Hint", "description": "Helper line under the field.", "default": "Looks good." }
+  ]'
+>
+  <label>Email</label>
+  <div class="hf-transition-input-shell">
+    <span class="hf-transition-input-value">mia@example.com</span>
+    <button class="hf-transition-input-clear" type="button">x</button>
+    <span class="hf-transition-input-check">OK</span>
+  </div>
+  <p class="hf-transition-input-hint">Looks good.</p>
+</div>
+
+<style>
+  .hf-transition-input-feedback {
+    --hf-fb-border: #d4d4d8;
+    --hf-fb-chip-bg: #dcfce7;
+    --hf-fb-chip-fg: #166534;
+    --hf-fb-hint: #16a34a;
+    display: grid;
+    gap: 10px;
+    width: 430px;
+    color: #18181b;
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-transition-input-feedback label {
+    color: #52525b;
+    font-size: 15px;
+    font-weight: 850;
+  }
+  .hf-transition-input-shell {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    height: 62px;
+    padding: 0 16px;
+    border: 1px solid var(--hf-fb-border);
+    border-radius: 16px;
+    background: #ffffff;
+    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.08);
+  }
+  .hf-transition-input-value {
+    flex: 1;
+    font-size: 20px;
+    font-weight: 760;
+  }
+  .hf-transition-input-clear,
+  .hf-transition-input-check {
+    display: grid;
+    place-items: center;
+    height: 28px;
+    border-radius: 999px;
+    font-size: 12px;
+    font-weight: 900;
+  }
+  .hf-transition-input-clear {
+    width: 28px;
+    border: 0;
+    background: #f4f4f5;
+    color: #71717a;
+  }
+  .hf-transition-input-check {
+    min-width: 38px;
+    padding: 0 8px;
+    background: var(--hf-fb-chip-bg);
+    color: var(--hf-fb-chip-fg);
+  }
+  .hf-transition-input-hint {
+    margin: 0;
+    color: var(--hf-fb-hint);
+    font-size: 14px;
+    font-weight: 800;
+  }
+  .hf-transition-input-feedback[data-state="error"] {
+    --hf-fb-border: #fca5a5;
+    --hf-fb-chip-bg: #fee2e2;
+    --hf-fb-chip-fg: #991b1b;
+    --hf-fb-hint: #dc2626;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    function text(value, fallback) {
+      return typeof value === "string" && value.trim() !== "" ? value : fallback;
+    }
+
+    var statuses = { valid: "OK", error: "!" };
+
+    var status = pick(statuses, vars.status, "valid");
+    var value = text(vars.value, "mia@example.com");
+    var hint = text(vars.hint, "Looks good.");
+
+    var roots = document.querySelectorAll(".hf-transition-input-feedback");
+    for (var i = 0; i < roots.length; i += 1) {
+      var root = roots[i];
+      root.setAttribute("data-state", status);
+      var valueEl = root.querySelector(".hf-transition-input-value");
+      if (valueEl) valueEl.textContent = value;
+      var hintEl = root.querySelector(".hf-transition-input-hint");
+      if (hintEl) hintEl.textContent = hint;
+      var chip = root.querySelector(".hf-transition-input-check");
+      if (chip) chip.textContent = statuses[status];
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-transition-input-feedback', { y: 22, opacity: 0 }, { y: 0, opacity: 1, duration: 0.34, ease: 'power2.out' }, 0.3);
+  tl.to('.hf-transition-input-shell', { x: -12, duration: 0.06, repeat: 5, yoyo: true, ease: 'none' }, 0.72);
+  tl.fromTo('.hf-transition-input-check', { scale: 0, opacity: 0 }, { scale: 1, opacity: 1, duration: 0.28, ease: 'back.out(2)' }, 1.18);
+  tl.fromTo('.hf-transition-input-hint', { opacity: 0, y: -6 }, { opacity: 1, y: 0, duration: 0.22, ease: 'power2.out' }, 1.28);
+-->
diff --git a/registry/components/input-feedback/registry-item.json b/registry/components/input-feedback/registry-item.json
new file mode 100644
index 0000000000..86337d6865
--- /dev/null
+++ b/registry/components/input-feedback/registry-item.json
@@ -0,0 +1,54 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "input-feedback",
+  "type": "hyperframes:component",
+  "title": "Input Feedback",
+  "description": "A transitions.dev-inspired input feedback primitive with shake, clear affordance, and success state",
+  "tags": ["transition-primitive", "transitions-dev-port", "input", "feedback"],
+  "files": [
+    {
+      "path": "input-feedback.html",
+      "target": "compositions/components/input-feedback.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "status",
+      "type": "enum",
+      "role": "style",
+      "label": "Status",
+      "description": "Whether the field reads as accepted or rejected, colouring the border, chip and hint.",
+      "default": "valid",
+      "options": [
+        {
+          "value": "valid",
+          "label": "Valid"
+        },
+        {
+          "value": "error",
+          "label": "Error"
+        }
+      ]
+    },
+    {
+      "id": "value",
+      "type": "string",
+      "role": "content",
+      "label": "Value",
+      "description": "Text held by the field.",
+      "default": "mia@example.com"
+    },
+    {
+      "id": "hint",
+      "type": "string",
+      "role": "content",
+      "label": "Hint",
+      "description": "Helper line under the field.",
+      "default": "Looks good."
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/input-feedback.png"
+  }
+}
diff --git a/registry/components/iris-reveal/README.md b/registry/components/iris-reveal/README.md
new file mode 100644
index 0000000000..5049f44f7e
--- /dev/null
+++ b/registry/components/iris-reveal/README.md
@@ -0,0 +1,102 @@
+# iris-reveal
+
+A circle clip-path opens from an authored origin (`iris_x`/`iris_y` percent)
+revealing state B over state A in one confident pass, then holds still on B.
+The classic register dims and desaturates the before state so the after state
+lands in full color; `register: plain` leaves both states untouched. A thin
+accent rim rides the exact iris edge while the pass runs and dissolves just
+before the circle clears the frame corners. Clip-path only, seek-safe in both
+directions.
+
+## Files
+
+- `iris-reveal.html`: the mountable sub-composition (install target:
+  `compositions/components/iris-reveal.html`).
+- `registry-item.json`: registry metadata and the variables block.
+- `demo.html`: a 1920x1080 host that mounts the primitive with non-default
+  variables (QA gallery input).
+
+## Variables
+
+| id         | type   | default | notes                                                                     |
+| ---------- | ------ | ------- | ------------------------------------------------------------------------- |
+| `iris_x`   | number | `50`    | iris origin, percent of frame width (0 to 100)                            |
+| `iris_y`   | number | `50`    | iris origin, percent of frame height (0 to 100)                           |
+| `open_at`  | number | `0.35`  | seconds after mount start when the iris begins opening (0 to 8)           |
+| `register` | enum   | `color` | `color` dims and desaturates state A; `plain` leaves both states alone    |
+| `accent`   | enum   | `green` | `green` maps to `--brand`, `blue` to `--accent`, `violet` to `--accent-2` |
+| `exit`     | enum   | `none`  | `none` holds the final frame; `fade` and `up` release the stage           |
+
+Envelope: IN = `open_at` + 1.10s iris pass, OUT = 0.5s only when `exit` is
+`fade` or `up`, HOLD is the sole elastic phase. The `iris-open` sync point
+(`hf:sfx` id `iris-land-soft`) fires when the iris clears the frame, 1.45s at
+defaults.
+
+## The slot mechanism
+
+The primitive ships two named slot panels inside its `<template>` (the
+before-after-wipe convention):
+
+```html
+<div class="ir-slot" data-slot="before">...</div>
+<div class="ir-slot" data-slot="after">...</div>
+```
+
+Each slot's default children are a token-styled wireframe card (muted on the
+before layer, brand-tinted on the after layer), so an untouched mount still
+reads as a tasteful reveal. To show your own content, install the component
+and **replace the children of each `[data-slot]` element in your installed
+copy** (the runtime clones only the primitive's own template on mount, so slot
+content lives in the component file, not on the host clip).
+
+Rules:
+
+- Both slots are full-bleed and share one coordinate space; align the two
+  states so the iris reads as one surface changing, not two images stacked.
+- Direct `img`/`video` children are automatically sized to cover the panel
+  (`object-fit: cover`). Arbitrary HTML works too; size it in `cqw`/`cqh`.
+- With `register: color` the grayscale/dim treatment applies to whatever you
+  put in the before slot; switch to `plain` if your before content must stay
+  full color.
+- Keep the rim SVG alone; it renders above slot content and is owned by the
+  timeline.
+
+## Worked example
+
+Install, then fill the slots with two screenshots:
+
+```bash
+npx hyperframes add iris-reveal
+```
+
+In `compositions/components/iris-reveal.html`, replace each slot's default
+block:
+
+```html
+<div class="ir-slot" data-slot="before">
+  <img src="../../assets/scene-night.png" alt="" />
+</div>
+...
+<div class="ir-slot" data-slot="after">
+  <img src="../../assets/scene-day.png" alt="" />
+</div>
+```
+
+Mount it from a host composition like any sub-composition:
+
+```html
+<div
+  class="clip"
+  data-composition-id="iris-reveal"
+  data-composition-src="./components/iris-reveal.html"
+  data-variable-values='{"iris_x":30,"iris_y":40,"open_at":0.6,"accent":"blue"}'
+  data-start="2"
+  data-duration="3.5"
+  data-track-index="0"
+></div>
+```
+
+The iris opens 0.6s after the clip mounts from a point in the upper-left
+third, clears the frame 1.1s later, and the revealed state holds for the rest
+of the clip window (`exit` defaults to `none`; frame roots own scene
+transitions).
diff --git a/registry/components/iris-reveal/demo.html b/registry/components/iris-reveal/demo.html
new file mode 100644
index 0000000000..e801fb0fb2
--- /dev/null
+++ b/registry/components/iris-reveal/demo.html
@@ -0,0 +1,90 @@
+<!doctype html>
+<!--
+  iris-reveal demo. Full-bleed mount on a dark token stage: the iris opens
+  from the upper-left third of the 1920x1080 frame with the blue accent rim,
+  proving the reveal works as a full-frame transition with an off-center
+  origin and the classic grayscale-to-color register.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>iris-reveal Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #05070d);
+      }
+
+      #root {
+        --bg: #080b14;
+        --fg: #f8fafc;
+        --muted: #94a3b8;
+        --surface: #182033;
+        --border: #3b4863;
+        --brand: #22c55e;
+        --accent: #38bdf8;
+        --accent-2: #c5a3ff;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-body: Inter, system-ui, sans-serif;
+        --radius: 22px;
+        --space-1: 8px;
+        --space-2: 16px;
+        --space-3: 32px;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 42%, #10182b 0%, var(--bg, #080b14) 72%);
+      }
+
+      .mount-stage {
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        container-type: size;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="iris-reveal-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="3.5"
+      data-fps="30"
+    >
+      <div
+        id="iris-reveal-mount"
+        class="mount-stage clip"
+        data-composition-id="iris-reveal"
+        data-composition-src="./iris-reveal.html"
+        data-variable-values='{"iris_x":32,"iris_y":40,"open_at":0.6,"accent":"blue"}'
+        data-start="0"
+        data-duration="3.5"
+        data-track-index="0"
+        data-width="1920"
+        data-height="1080"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["iris-reveal-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/iris-reveal/iris-reveal.html b/registry/components/iris-reveal/iris-reveal.html
new file mode 100644
index 0000000000..d2e06c6706
--- /dev/null
+++ b/registry/components/iris-reveal/iris-reveal.html
@@ -0,0 +1,478 @@
+<!doctype html>
+<!--
+  iris-reveal: HyperFrames video primitive (transitions / bridge)
+
+  Concept: a circle clip-path opens from an authored origin (iris_x/iris_y
+  percent) revealing state B over state A. Classic register: A grayscale and
+  dimmed, B full color. One confident pass, then a still hold on B. Two
+  full-bleed content slots (the before-after-wipe convention) with
+  token-styled defaults; callers supply the two states, the primitive
+  supplies the iris.
+
+  Wave K, unit K2. Clip-path only (no dashes, no masks); both endpoints of
+  the opening tween are authored (fromTo via a seeded proxy), so seeks are
+  deterministic in both directions.
+
+  Slots (see README.md for a worked example):
+    - [data-slot="before"]: state A, the base layer. Replace the children of
+      this element in your installed copy. Default: a muted token wireframe.
+    - [data-slot="after"]:  state B, revealed by the iris. Same mechanism.
+      Default: a brand-tinted version of the wireframe.
+    Direct img/video children of a slot are sized to cover the panel.
+
+  Variables (declared in data-composition-variables below):
+    - iris_x (number, default 50, 0 to 100%): iris origin, percent of width.
+    - iris_y (number, default 50, 0 to 100%): iris origin, percent of height.
+    - open_at (number, seconds, default 0.35): when the iris starts opening,
+      relative to mount start. Clamped so the pass completes inside IN.
+    - register (color | plain, default color): color dims and desaturates
+      state A so B lands in full color; plain leaves both states untouched.
+    - accent (green | blue | violet, default green): iris rim ring and the
+      default after art tint. green maps to --brand, blue to --accent,
+      violet to --accent-2.
+    - exit (none | fade | up, default none): outgoing transition. none holds
+      the final frame (frame roots own transitions; holds end films).
+
+  The iris rim is a thin accent circle (SVG stroke, fixed width) that rides
+  the exact same radius proxy as the clip-path, so rim and clip edge are
+  locked on every frame. It fades in as the pass starts and dissolves just
+  before the iris clears the frame corners.
+
+  Envelope (fixed IN/OUT, elastic HOLD only, never gsap.timeScale()):
+    IN       = open_at + 1.10s iris pass (stage settles during the first 0.32s)
+    HOLD     = elastic = max(0, D - (IN + OUT)); deliberately still on B
+    OUT      = 0.50s when exit is fade or up, 0 when exit is none
+    If D < IN + OUT, IN and OUT scale down together so IN + OUT == D.
+
+  Sync point: iris-open land at open_at + 1.10s inside IN (1.45s at
+  defaults). It never moves into elastic HOLD.
+
+  Sound cue: dispatches a bubbling `hf:sfx` CustomEvent with id
+  "iris-land-soft" at iris land. This primitive never plays audio.
+
+  Determinism: the full radius and the iris center are measured in px once
+  at mount (the K-wave law for cq-unit transform traps); the radius proxy is
+  the single owner of clip and rim progress, re-written on every seek via
+  onUpdate. Quiet register by default (L2); no percussive variants.
+
+  Mount contract: MOUNTABLE SUB-COMPOSITION. The runtime clones only
+  <template> contents; #root fills the host box (inset:0, container-type:
+  size), has no data-width/data-height, and registers one paused timeline
+  under the literal "iris-reveal" key (mount flattening strips
+  data-composition-id from the live root). Variables come from
+  window.__hyperframes.getVariables().
+-->
+<html
+  lang="en"
+  data-composition-id="iris-reveal"
+  data-composition-duration="3.5"
+  data-composition-variables='[
+    { "id": "iris_x", "type": "number", "role": "layout", "label": "Iris origin X", "description": "Horizontal iris origin as a percent of the frame width.", "default": 50, "min": 0, "max": 100, "step": 1, "unit": "%" },
+    { "id": "iris_y", "type": "number", "role": "layout", "label": "Iris origin Y", "description": "Vertical iris origin as a percent of the frame height.", "default": 50, "min": 0, "max": 100, "step": 1, "unit": "%" },
+    { "id": "open_at", "type": "number", "role": "timing", "label": "Open start", "description": "Seconds after mount start when the iris begins opening.", "default": 0.35, "min": 0, "max": 8, "step": 0.05, "unit": "s" },
+    { "id": "register", "type": "enum", "role": "style", "label": "Register", "description": "Color dims and desaturates the before state so the after state lands in full color. Plain leaves both untouched.", "default": "color", "options": [{ "value": "color", "label": "Color" }, { "value": "plain", "label": "Plain" }] },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Iris rim ring and default after art tint.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Outgoing transition. None holds the final revealed frame.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Iris Reveal</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="iris-reveal" data-duration="3.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          /* Root fills the host-owned box. Internal measurements use cqw/cqh
+             and every painted color comes from a contract token. */
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            background: var(--bg, #07111f);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+          }
+
+          .ir-clip,
+          .ir-stage,
+          .ir-panel,
+          .ir-slot,
+          .ir-rim {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+          }
+
+          .ir-clip {
+            overflow: hidden;
+          }
+
+          .ir-stage {
+            opacity: 0;
+          }
+
+          .ir-panel {
+            overflow: hidden;
+          }
+
+          /* The after layer is revealed by one circle clip-path. --ir-r (px)
+             is written by the radius proxy, the single owner of iris
+             progress; --ir-cx/--ir-cy are set once at mount. */
+          .ir-after {
+            z-index: 2;
+            clip-path: circle(calc(var(--ir-r, 0) * 1px) at var(--ir-cx, 50%) var(--ir-cy, 50%));
+          }
+
+          /* Classic register: state A reads dimmed and desaturated so state B
+             lands in full color. Static CSS, never tweened. */
+          #root[data-register="color"] .ir-before .ir-slot {
+            filter: grayscale(1) brightness(0.76);
+          }
+
+          /* Caller-supplied media covers its panel edge to edge. */
+          .ir-slot > img,
+          .ir-slot > video {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+          }
+
+          /* The rim ring rides the same radius proxy as the clip edge. Fixed
+             stroke width in px (set at mount), fill none, no dashes. */
+          .ir-rim {
+            z-index: 3;
+            overflow: visible;
+            pointer-events: none;
+          }
+
+          .ir-rim circle {
+            fill: none;
+            stroke: var(--ir-accent, #22c55e);
+          }
+
+          /* Token-styled default slot content: a wireframe card that reads
+             muted on the before layer and brand-tinted on the after layer.
+             Callers replacing slot children never see any of this. */
+          .ir-default {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+          }
+
+          .ir-before .ir-default {
+            background:
+              linear-gradient(
+                  color-mix(in srgb, var(--border, #334155) 34%, transparent) 0.12cqw,
+                  transparent 0.12cqw
+                )
+                0 0 / 5cqw 5cqw,
+              linear-gradient(
+                  90deg,
+                  color-mix(in srgb, var(--border, #334155) 34%, transparent) 0.12cqw,
+                  transparent 0.12cqw
+                )
+                0 0 / 5cqw 5cqw,
+              var(--surface, #172033);
+          }
+
+          .ir-after .ir-default {
+            background: linear-gradient(
+              135deg,
+              color-mix(in srgb, var(--brand, #22c55e) 32%, var(--surface, #172033)) 0%,
+              var(--surface, #172033) 58%,
+              color-mix(in srgb, var(--ir-accent, #22c55e) 22%, var(--surface, #172033)) 100%
+            );
+          }
+
+          .ir-card {
+            width: 56cqw;
+            height: 56cqh;
+            padding: var(--space-3, 4cqh) var(--space-3, 4cqw);
+            border: 0.16cqw solid var(--border, #334155);
+            border-radius: var(--radius, 2.4cqmin);
+            background: color-mix(in srgb, var(--surface, #172033) 88%, var(--bg, #07111f));
+            box-shadow: 0 2cqh 5cqw color-mix(in srgb, var(--bg, #07111f) 45%, transparent);
+          }
+
+          .ir-after .ir-card {
+            border-color: color-mix(in srgb, var(--ir-accent, #22c55e) 52%, var(--border, #334155));
+            background: color-mix(in srgb, var(--surface, #172033) 86%, var(--brand, #22c55e));
+          }
+
+          .ir-bar {
+            width: 34%;
+            height: 4.4cqh;
+            margin-bottom: var(--space-3, 4cqh);
+            border-radius: 1.2cqh;
+            background: var(--muted, #94a3b8);
+            opacity: 0.5;
+          }
+
+          .ir-after .ir-bar {
+            background: var(--ir-accent, #22c55e);
+            opacity: 0.92;
+          }
+
+          .ir-line {
+            height: 2.4cqh;
+            margin-bottom: var(--space-2, 2.6cqh);
+            border-radius: 1.2cqh;
+            background: var(--muted, #94a3b8);
+            opacity: 0.4;
+          }
+
+          .ir-line:nth-of-type(2) {
+            width: 92%;
+          }
+
+          .ir-line:nth-of-type(3) {
+            width: 68%;
+          }
+
+          .ir-line:nth-of-type(4) {
+            width: 44%;
+          }
+
+          .ir-after .ir-line {
+            background: color-mix(in srgb, var(--brand, #22c55e) 70%, var(--fg, #f8fafc));
+            opacity: 0.75;
+          }
+        </style>
+
+        <div
+          id="iris-reveal-clip"
+          class="ir-clip clip"
+          data-start="0"
+          data-duration="3.5"
+          data-track-index="0"
+        >
+          <div class="ir-stage">
+            <section class="ir-panel ir-before" aria-label="Before panel">
+              <div class="ir-slot" data-slot="before">
+                <!-- SLOT "before": replace the children of this element with
+                     your own content (img, video, or HTML). -->
+                <div class="ir-default" aria-hidden="true">
+                  <div class="ir-card">
+                    <div class="ir-bar"></div>
+                    <div class="ir-line"></div>
+                    <div class="ir-line"></div>
+                    <div class="ir-line"></div>
+                  </div>
+                </div>
+              </div>
+            </section>
+
+            <section class="ir-panel ir-after" aria-label="After panel">
+              <div class="ir-slot" data-slot="after">
+                <!-- SLOT "after": replace the children of this element with
+                     your own content (img, video, or HTML). -->
+                <div class="ir-default" aria-hidden="true">
+                  <div class="ir-card">
+                    <div class="ir-bar"></div>
+                    <div class="ir-line"></div>
+                    <div class="ir-line"></div>
+                    <div class="ir-line"></div>
+                  </div>
+                </div>
+              </div>
+            </section>
+
+            <svg class="ir-rim" aria-hidden="true">
+              <circle class="ir-rim-circle" cx="0" cy="0" r="0"></circle>
+            </svg>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            // Literal id: mount flattening strips data-composition-id from the
+            // live root before this timeline registers.
+            var compositionId = "iris-reveal";
+            var stage = root.querySelector(".ir-stage");
+            var after = root.querySelector(".ir-after");
+            var rim = root.querySelector(".ir-rim");
+            var rimCircle = root.querySelector(".ir-rim-circle");
+
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            function clampNumber(raw, fallback, min, max) {
+              var value = raw == null ? fallback : Number(raw);
+              if (!Number.isFinite(value)) return fallback;
+              return Math.max(min, Math.min(max, value));
+            }
+
+            // INVARIANT: iris origin always clamps into the declared 0-100 range.
+            var irisX = clampNumber(vars.iris_x, 50, 0, 100);
+            var irisY = clampNumber(vars.iris_y, 50, 0, 100);
+            var openAt = clampNumber(vars.open_at, 0.35, 0, 8);
+            var register = vars.register === "plain" ? "plain" : "color";
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #22c55e)",
+              blue: "var(--accent, #38bdf8)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            // The bundler mirrors composition variables as scoped CSS custom
+            // props, so this unit's own accent variable can shadow the
+            // contract --accent token inside the subtree ("blue" is a valid
+            // CSS color and would render pure blue). When the shadow is
+            // present, fall back to the literal contract value.
+            var computedAccent = getComputedStyle(root).getPropertyValue("--accent").trim();
+            if (
+              computedAccent === "green" ||
+              computedAccent === "blue" ||
+              computedAccent === "violet"
+            ) {
+              accentColors.blue = "#38bdf8";
+            }
+            // INVARIANT: only none | fade | up reaches the timeline.
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            root.dataset.register = register;
+            root.style.setProperty("--ir-accent", accentColors[accent]);
+            root.style.setProperty("--ir-cx", irisX + "%");
+            root.style.setProperty("--ir-cy", irisY + "%");
+
+            // Geometry measured in px ONCE at mount (cq units inside tweened
+            // values are a seek trap). The full radius clears the farthest
+            // frame corner with a small margin so the landed frame has no
+            // visible clip edge.
+            var width = root.clientWidth || 1920;
+            var height = root.clientHeight || 1080;
+            var centerX = (irisX / 100) * width;
+            var centerY = (irisY / 100) * height;
+            var fullRadius =
+              Math.hypot(Math.max(centerX, width - centerX), Math.max(centerY, height - centerY)) *
+                1.02 +
+              2;
+
+            rim.setAttribute("viewBox", "0 0 " + width + " " + height);
+            rimCircle.setAttribute("cx", String(centerX));
+            rimCircle.setAttribute("cy", String(centerY));
+            rimCircle.setAttribute("stroke-width", String(Math.max(2, width * 0.0021)));
+
+            // RETIME RANGE: fixed IN and OUT scale together only when D is too
+            // short. HOLD is the sole elastic phase. Never use timeScale().
+            var STAGE_IN_BASE = 0.32;
+            var OPEN_DURATION_BASE = 1.1;
+            var IN_BASE = openAt + OPEN_DURATION_BASE;
+            var OUT_BASE = exit === "none" ? 0 : 0.5;
+
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "3.5"));
+            var totalBase = IN_BASE + OUT_BASE;
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var STAGE_IN = Math.min(STAGE_IN_BASE * scale, IN);
+            var OPEN_AT = openAt * scale;
+            var OPEN_DURATION = OPEN_DURATION_BASE * scale;
+            var OPEN_END = IN;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var OUT_START = IN + HOLD;
+
+            function fireSfx(id, t) {
+              root.dispatchEvent(
+                new CustomEvent("hf:sfx", { detail: { id: id, t: t }, bubbles: true }),
+              );
+            }
+
+            // ONE radius proxy owns both the clip-path and the rim ring, so
+            // the two edges are locked on every frame. Seeded before the
+            // timeline builds so tl.seek(0) shows the closed iris.
+            var radius = { value: 0 };
+            function writeIris() {
+              after.style.setProperty("--ir-r", String(radius.value));
+              rimCircle.setAttribute("r", String(Math.max(0, radius.value)));
+            }
+            writeIris();
+
+            // Explicit both-endpoints state makes tl.seek(0) deterministic.
+            gsap.set(stage, { opacity: 0, y: 0 });
+            gsap.set(rim, { autoAlpha: 0 });
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: stage settle, then ONE confident iris pass (quiet register,
+            // L2). The rim fades in as the pass starts and dissolves just
+            // before the iris clears the frame corners.
+            tl.to(stage, { opacity: 1, duration: STAGE_IN, ease: "power2.out" }, 0);
+            tl.fromTo(
+              radius,
+              { value: 0 },
+              {
+                value: fullRadius,
+                duration: OPEN_DURATION,
+                ease: "power2.inOut",
+                onUpdate: writeIris,
+              },
+              OPEN_AT,
+            );
+            tl.fromTo(
+              rim,
+              { autoAlpha: 0 },
+              {
+                autoAlpha: 1,
+                duration: Math.min(0.18 * scale, OPEN_DURATION),
+                ease: "power1.out",
+                immediateRender: false,
+              },
+              OPEN_AT,
+            );
+            tl.to(
+              rim,
+              { autoAlpha: 0, duration: 0.24 * scale, ease: "power1.in" },
+              Math.max(OPEN_AT, OPEN_END - 0.24 * scale),
+            );
+            tl.call(
+              function () {
+                fireSfx("iris-land-soft", OPEN_END);
+              },
+              [],
+              OPEN_END,
+            );
+
+            // HOLD: deliberately still on the revealed state B.
+
+            // OUT: only when the exit variable asks for one; exit none holds
+            // the final revealed frame (frame roots own transitions).
+            if (exit !== "none") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+              if (exit === "up") {
+                tl.to(stage, { y: "-6cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              }
+            }
+
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/iris-reveal/registry-item.json b/registry/components/iris-reveal/registry-item.json
new file mode 100644
index 0000000000..2d0481c6fc
--- /dev/null
+++ b/registry/components/iris-reveal/registry-item.json
@@ -0,0 +1,96 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "iris-reveal",
+  "type": "hyperframes:component",
+  "title": "Iris Reveal",
+  "description": "A circle clip-path opens from an authored origin revealing state B over state A in one confident pass, then holds on B. Classic register dims and desaturates the before state so the after state lands in full color; a thin accent rim rides the iris edge. Callers fill the named before/after slot panels; token-styled defaults render when a slot is left empty.",
+  "tags": ["transition", "iris", "circle-reveal", "clip-path", "bridge", "slots"],
+  "jobs": ["bridge", "reveal"],
+  "family": "transitions",
+  "profile": "holdable",
+  "evidence": "Wave K2: the X expert demand study names the iris/circular reveal as a canonical scene transition; before-after-wipe donates the slot convention",
+  "syncPoints": [{ "id": "iris-open", "phase": "in", "offset": 1.45 }],
+  "files": [
+    {
+      "path": "iris-reveal.html",
+      "target": "compositions/components/iris-reveal.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "iris_x",
+      "type": "number",
+      "role": "layout",
+      "label": "Iris origin X",
+      "description": "Horizontal iris origin as a percent of the frame width.",
+      "default": 50,
+      "min": 0,
+      "max": 100,
+      "step": 1,
+      "unit": "%"
+    },
+    {
+      "id": "iris_y",
+      "type": "number",
+      "role": "layout",
+      "label": "Iris origin Y",
+      "description": "Vertical iris origin as a percent of the frame height.",
+      "default": 50,
+      "min": 0,
+      "max": 100,
+      "step": 1,
+      "unit": "%"
+    },
+    {
+      "id": "open_at",
+      "type": "number",
+      "role": "timing",
+      "label": "Open start",
+      "description": "Seconds after mount start when the iris begins opening.",
+      "default": 0.35,
+      "min": 0,
+      "max": 8,
+      "step": 0.05,
+      "unit": "s"
+    },
+    {
+      "id": "register",
+      "type": "enum",
+      "role": "style",
+      "label": "Register",
+      "description": "Color dims and desaturates the before state so the after state lands in full color. Plain leaves both untouched.",
+      "default": "color",
+      "options": [
+        { "value": "color", "label": "Color" },
+        { "value": "plain", "label": "Plain" }
+      ]
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Iris rim ring and default after art tint.",
+      "default": "green",
+      "options": [
+        { "value": "green", "label": "Green" },
+        { "value": "blue", "label": "Blue" },
+        { "value": "violet", "label": "Violet" }
+      ]
+    },
+    {
+      "id": "exit",
+      "type": "enum",
+      "role": "timing",
+      "label": "Exit",
+      "description": "Outgoing transition. None holds the final revealed frame.",
+      "default": "none",
+      "options": [
+        { "value": "none", "label": "None" },
+        { "value": "fade", "label": "Fade" },
+        { "value": "up", "label": "Up" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/keyframe-scrub-stack/demo.html b/registry/components/keyframe-scrub-stack/demo.html
new file mode 100644
index 0000000000..57313bb642
--- /dev/null
+++ b/registry/components/keyframe-scrub-stack/demo.html
@@ -0,0 +1,188 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Keyframe Scrub Stack - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-advanced-keyframe-scrub-stack {
+        --hf-accent: var(--accent, rgba(17, 24, 39, 0.72));
+        --hf-l1: rgba(17, 24, 39, 0.72);
+        --hf-l2: rgba(17, 24, 39, 0.45);
+        --hf-l3: rgba(17, 24, 39, 0.18);
+        --hf-l4: rgba(17, 24, 39, 0.08);
+        --hf-hair: rgba(17, 24, 39, 0.14);
+        color: var(--hf-l1);
+        font-family: Inter, system-ui, sans-serif;
+        /* ponytail: scale wrapper — GSAP only targets .card, not this element */
+        transform: scale(2);
+        transform-origin: center center;
+        width: 560px;
+        min-height: 360px;
+        border-radius: 20px;
+        padding: 32px;
+        background: #ffffff;
+        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.1);
+        border: 1px solid #e4e4e7;
+        display: grid;
+        place-items: center;
+      }
+      .hf-advanced-keyframe-scrub-stack .stack {
+        position: relative;
+        width: 460px;
+        height: 240px;
+      }
+      .hf-advanced-keyframe-scrub-stack .card {
+        position: absolute;
+        inset: 0;
+        border-radius: 14px;
+        background: linear-gradient(var(--hf-l4), var(--hf-l4)), #ffffff;
+        border: 1px solid var(--hf-hair);
+        box-shadow: 0 8px 32px rgba(15, 23, 42, 0.1);
+        transform: translateY(var(--hf-card-y, 0px)) scale(var(--hf-card-scale, 1));
+        opacity: var(--hf-card-opacity, 1);
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        padding: 20px 22px 16px;
+      }
+      .hf-advanced-keyframe-scrub-stack .card-header {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+      }
+      .hf-advanced-keyframe-scrub-stack .card-dot {
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        background: var(--hf-l2);
+        flex-shrink: 0;
+      }
+      .hf-advanced-keyframe-scrub-stack .card-label {
+        font-size: 13px;
+        font-weight: 600;
+        color: #18181b;
+        letter-spacing: -0.01em;
+      }
+      .hf-advanced-keyframe-scrub-stack .card-sub {
+        font-size: 11px;
+        font-weight: 400;
+        color: var(--hf-l1);
+        margin-top: 2px;
+      }
+      .hf-advanced-keyframe-scrub-stack .card-bars {
+        display: flex;
+        gap: 5px;
+        align-items: flex-end;
+        height: 36px;
+      }
+      .hf-advanced-keyframe-scrub-stack .bar {
+        width: 8px;
+        border-radius: 3px;
+        background: var(--hf-l1);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="keyframe-scrub-stack-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="hf-advanced-keyframe-scrub-stack">
+        <div class="stack">
+          <div class="card" style="--i: 0">
+            <div class="card-header">
+              <span class="card-dot"></span>
+              <div>
+                <div class="card-label">Keyframe 3</div>
+                <div class="card-sub">t = 1.00s · ease-out</div>
+              </div>
+            </div>
+            <div class="card-bars">
+              <div class="bar" style="height: 28px"></div>
+              <div class="bar" style="height: 36px"></div>
+              <div class="bar" style="height: 20px"></div>
+              <div class="bar" style="height: 32px"></div>
+              <div class="bar" style="height: 14px"></div>
+              <div class="bar" style="height: 24px"></div>
+            </div>
+          </div>
+          <div class="card" style="--i: 1">
+            <div class="card-header">
+              <span class="card-dot"></span>
+              <div>
+                <div class="card-label">Keyframe 2</div>
+                <div class="card-sub">t = 0.50s · back.out</div>
+              </div>
+            </div>
+            <div class="card-bars">
+              <div class="bar" style="height: 18px"></div>
+              <div class="bar" style="height: 30px"></div>
+              <div class="bar" style="height: 36px"></div>
+              <div class="bar" style="height: 22px"></div>
+            </div>
+          </div>
+          <div class="card" style="--i: 2">
+            <div class="card-header">
+              <span class="card-dot"></span>
+              <div>
+                <div class="card-label">Keyframe 1</div>
+                <div class="card-sub">t = 0.00s · linear</div>
+              </div>
+            </div>
+            <div class="card-bars">
+              <div class="bar" style="height: 12px"></div>
+              <div class="bar" style="height: 12px"></div>
+              <div class="bar" style="height: 12px"></div>
+              <div class="bar" style="height: 12px"></div>
+              <div class="bar" style="height: 12px"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script>
+      const tl = gsap.timeline({ paused: true });
+      const startTime = 0.5;
+      tl.fromTo(
+        ".hf-advanced-keyframe-scrub-stack .card",
+        { "--hf-card-y": "42px", "--hf-card-scale": 0.88, "--hf-card-opacity": 0 },
+        {
+          "--hf-card-y": (i) => i * 26 + "px",
+          "--hf-card-scale": (i) => 1 - i * 0.04,
+          "--hf-card-opacity": 1,
+          duration: 0.48,
+          stagger: 0.12,
+          ease: "back.out(1.6)",
+        },
+        startTime,
+      );
+      tl.set({}, {}, 5);
+      window.__timelines = window.__timelines || {};
+      window.__timelines["keyframe-scrub-stack-demo"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/registry/components/keyframe-scrub-stack/keyframe-scrub-stack.html b/registry/components/keyframe-scrub-stack/keyframe-scrub-stack.html
new file mode 100644
index 0000000000..704d2e7dde
--- /dev/null
+++ b/registry/components/keyframe-scrub-stack/keyframe-scrub-stack.html
@@ -0,0 +1,84 @@
+<!--
+  Keyframe Scrub Stack - advanced HyperFrames primitive.
+
+  This is intentionally seekable: drive it from a paused GSAP timeline.
+  MotionPath examples require GSAP MotionPathPlugin. Three.js examples expose
+  a render(progress) adapter instead of a free-running requestAnimationFrame loop.
+-->
+
+<div class="hf-advanced-keyframe-scrub-stack">
+  <div class="stack">
+    <div class="card" style="--i: 0"></div>
+    <div class="card" style="--i: 1"></div>
+    <div class="card" style="--i: 2"></div>
+  </div>
+</div>
+
+<style>
+  .hf-advanced-keyframe-scrub-stack {
+    --hf-accent: var(--accent, rgba(17, 24, 39, 0.72));
+    --hf-l1: rgba(17, 24, 39, 0.72);
+    --hf-l3: rgba(17, 24, 39, 0.18);
+    --hf-l4: rgba(17, 24, 39, 0.08);
+    --hf-hair: rgba(17, 24, 39, 0.14);
+    color: var(--hf-l1);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-advanced-keyframe-scrub-stack {
+    width: 720px;
+    min-height: 420px;
+    border-radius: 30px;
+    padding: 36px;
+    background: #fff;
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.16);
+    display: grid;
+    place-items: center;
+  }
+  .hf-advanced-keyframe-scrub-stack .grid {
+    display: grid;
+    grid-template-columns: repeat(8, 46px);
+    gap: 10px;
+  }
+  .hf-advanced-keyframe-scrub-stack .cell {
+    width: 46px;
+    height: 46px;
+    border-radius: 14px;
+    background: var(--hf-l1);
+    transform: translateY(var(--hf-cell-y, 0px)) scale(var(--hf-cell-scale, 1));
+    opacity: var(--hf-cell-opacity, 1);
+  }
+  .hf-advanced-keyframe-scrub-stack svg {
+    width: 520px;
+    height: 220px;
+    overflow: visible;
+  }
+  .hf-advanced-keyframe-scrub-stack path {
+    fill: none;
+    stroke: var(--hf-accent);
+    stroke-width: 14;
+    stroke-linecap: round;
+    stroke-dasharray: 900;
+    stroke-dashoffset: var(--hf-dash, 0);
+  }
+  .hf-advanced-keyframe-scrub-stack .stack {
+    position: relative;
+    width: 520px;
+    height: 260px;
+  }
+  .hf-advanced-keyframe-scrub-stack .card {
+    position: absolute;
+    inset: 0;
+    border-radius: 26px;
+    background: linear-gradient(var(--hf-l4), var(--hf-l4)), #ffffff;
+    border: 1px solid var(--hf-hair);
+    box-shadow: 0 20px 54px rgba(15, 23, 42, 0.14);
+    transform: translateY(var(--hf-card-y, 0px)) scale(var(--hf-card-scale, 1));
+    opacity: var(--hf-card-opacity, 1);
+  }
+</style>
+
+<!--
+  Timeline integration:
+  const startTime = 0;
+  tl.fromTo('.hf-advanced-keyframe-scrub-stack .card', { '--hf-card-y': '42px', '--hf-card-scale': 0.88, '--hf-card-opacity': 0 }, { '--hf-card-y': (i) => (i * 26) + 'px', '--hf-card-scale': (i) => 1 - i * 0.04, '--hf-card-opacity': 1, duration: 0.48, stagger: 0.12, ease: 'back.out(1.6)' }, startTime);
+-->
diff --git a/registry/components/keyframe-scrub-stack/registry-item.json b/registry/components/keyframe-scrub-stack/registry-item.json
new file mode 100644
index 0000000000..1cd19919cb
--- /dev/null
+++ b/registry/components/keyframe-scrub-stack/registry-item.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "keyframe-scrub-stack",
+  "type": "hyperframes:component",
+  "title": "Keyframe Scrub Stack",
+  "description": "A keyframe-sequenced stack of cards with offset timing and easing presets.",
+  "tags": ["advanced-motion", "anime-inspired", "hyperframes-native"],
+  "files": [
+    {
+      "path": "keyframe-scrub-stack.html",
+      "target": "compositions/components/keyframe-scrub-stack.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/keyframe-scrub-stack.png"
+  }
+}
diff --git a/registry/components/kinetic-type-swap/README.md b/registry/components/kinetic-type-swap/README.md
new file mode 100644
index 0000000000..c0e4c7caca
--- /dev/null
+++ b/registry/components/kinetic-type-swap/README.md
@@ -0,0 +1,37 @@
+# kinetic-type-swap
+
+A held sentence keeps its prefix and suffix fixed while one masked word slot rolls vertically through comma-separated options. The slot pre-sizes to the widest option, so the sentence never reflows during a swap. The final word locks with a soft pulse and holds until the frame cuts.
+
+4s authored, elastic HOLD, exit `none` by default.
+
+## Variables
+
+| id        | type   | default                   | notes                                                                                                                                                                                      |
+| --------- | ------ | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `prefix`  | string | `Ship`                    | Fixed text before the rolling slot.                                                                                                                                                        |
+| `options` | string | `faster,smarter,together` | Comma-separated words, shown in order; the last one is the sentence's final state.                                                                                                         |
+| `suffix`  | string | `` (empty)                | Fixed text after the rolling slot.                                                                                                                                                         |
+| `cues`    | string | `` (empty)                | Comma-separated seconds (from mount start) for each swap, e.g. `0.8,1.6`. Sorted ascending; swaps beyond the list extrapolate at the list's own gap. Empty keeps the authored even spread. |
+| `accent`  | enum   | `green`                   | Slot color: green rides `--brand`, blue rides `--accent`, violet rides `--accent-2`.                                                                                                       |
+| `exit`    | enum   | `none`                    | `none` holds until the cut; `fade` is the opacity release (the pre-Wave-J default ending); `up` adds a small rise to the fade.                                                             |
+
+## Mount
+
+```html
+<div
+  class="clip"
+  data-composition-id="kinetic-type-swap"
+  data-composition-src="./kinetic-type-swap.html"
+  data-variable-values='{"prefix":"Render","options":"anything,everywhere,tonight","cues":"1.0,2.2"}'
+  data-start="0"
+  data-duration="4"
+  data-track-index="0"
+></div>
+```
+
+Elastic root: no `data-width`/`data-height`; it fills whatever box the host clip gives it. Timeline registers under the literal `kinetic-type-swap` key.
+
+## Notes
+
+- Cue N fires the swap from option N to option N+1. Swaps clamp so the roll and settle finish before any exit; the roll shortens automatically when cues sit close together.
+- Deterministic and seek-safe; the hold pulse uses a finite odd repeat, never an open loop.
diff --git a/registry/components/kinetic-type-swap/demo.html b/registry/components/kinetic-type-swap/demo.html
new file mode 100644
index 0000000000..84412dab11
--- /dev/null
+++ b/registry/components/kinetic-type-swap/demo.html
@@ -0,0 +1,101 @@
+<!doctype html>
+<!--
+  kinetic-type-swap demo. This standalone composition mounts the primitive
+  through data-composition-src. Non-default prefix, options, suffix, and
+  accent values prove the variable path and the widest-option slot contract.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Kinetic Type Swap Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0b0c0e;
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --muted: #94a3b8;
+        --surface: #15181e;
+        --border: #343a46;
+        --brand: #71f5a7;
+        --accent: #61a8ff;
+        --accent-2: #c5a3ff;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-body: Inter, system-ui, sans-serif;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        --radius: 2.4cqmin;
+        --space-1: 1.2cqmin;
+        --space-2: 2.4cqmin;
+        --space-3: 4cqmin;
+        --dur-beat: 0.5s;
+        --ease-standard: cubic-bezier(0.215, 0.61, 0.355, 1);
+        --ease-emphasis: cubic-bezier(0.19, 1, 0.22, 1);
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(
+          ellipse at 50% 44%,
+          color-mix(in srgb, var(--surface) 72%, var(--accent-2)) 0%,
+          var(--bg) 70%
+        );
+      }
+
+      .mount-card {
+        width: 82%;
+        height: 42%;
+        left: 9%;
+        top: 29%;
+        container-type: size;
+        overflow: hidden;
+        border: 0.12cqmin solid color-mix(in srgb, var(--border) 74%, transparent);
+        border-radius: calc(var(--radius) * 1.3);
+        background: color-mix(in srgb, var(--surface) 76%, transparent);
+        box-shadow: 0 4cqh 10cqh color-mix(in srgb, var(--bg) 60%, transparent);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="kinetic-type-swap-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="kinetic-type-swap-mount"
+        class="mount-card clip"
+        data-composition-id="kinetic-type-swap"
+        data-composition-src="./kinetic-type-swap.html"
+        data-variable-values='{"prefix":"Make","options":"motion,meaning,momentum","suffix":"visible","accent":"violet"}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="1574"
+        data-height="454"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["kinetic-type-swap-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/kinetic-type-swap/kinetic-type-swap.html b/registry/components/kinetic-type-swap/kinetic-type-swap.html
new file mode 100644
index 0000000000..80f8243d10
--- /dev/null
+++ b/registry/components/kinetic-type-swap/kinetic-type-swap.html
@@ -0,0 +1,373 @@
+<!doctype html>
+<!--
+  kinetic-type-swap: HyperFrames video primitive (text effects / swap)
+
+  A held sentence keeps its prefix and suffix fixed while one masked word
+  slot rolls through comma-separated options. Every option remains in the
+  same CSS grid cell, so the slot takes the widest option's intrinsic width
+  before motion starts and the sentence never reflows during a swap.
+
+  Variables:
+    - prefix (string, default "Ship"): fixed text before the rolling slot.
+    - options (string, default "faster,smarter,together"): comma-separated
+      words shown in order.
+    - suffix (string, default ""): fixed text after the rolling slot.
+    - cues (string, default ""): comma-separated seconds (from mount start)
+      for each word swap. Empty keeps the authored even spread.
+    - accent (green | blue | violet, default "green"): rolling word color.
+    - exit (none | fade | up, default "none"): optional departure.
+
+  Envelope, fixed IN and OUT with elastic HOLD only:
+    IN_BASE  = 2.25s, fade in followed by every vertical word swap (cues can
+               stretch the swap phase past IN_BASE when they land later)
+    HOLD     = max(0, D - IN - OUT), final word stays locked with a soft pulse
+    OUT_BASE = 0.45s departure when exit is fade or up, 0s when exit is
+               none (the default: the sentence holds until the cut)
+    If D is shorter than IN_BASE + OUT_BASE, IN and OUT compress together.
+    The timeline is never time-scaled.
+
+  Determinism: options are parsed once before timeline construction. GSAP
+  owns every visible change, uses finite repeats, and registers one paused
+  timeline under the literal kinetic-type-swap key.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, and has no data-width or
+  data-height. Only word transforms change position. The held sentence never
+  moves, and the grid-owned slot width never changes.
+-->
+<html
+  lang="en"
+  data-composition-id="kinetic-type-swap"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "prefix", "type": "string", "role": "content", "label": "Prefix", "description": "Fixed sentence text before the rolling word slot.", "default": "Ship" },
+    { "id": "options", "type": "string", "role": "content", "label": "Options", "description": "Comma-separated words shown in the rolling slot.", "default": "faster,smarter,together" },
+    { "id": "suffix", "type": "string", "role": "content", "label": "Suffix", "description": "Fixed sentence text after the rolling word slot.", "default": "" },
+    { "id": "cues", "type": "string", "role": "timing", "label": "Cues", "description": "Comma-separated seconds (from mount start) for each word swap. Empty keeps the authored even spread.", "default": "" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Color used by the rolling word slot.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the sentence holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Kinetic Type Swap</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="kinetic-type-swap" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .kts-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .kts-stage {
+            display: grid;
+            place-items: center;
+            width: 94cqw;
+            height: 70cqh;
+            opacity: 0;
+          }
+
+          .kts-sentence {
+            display: flex;
+            align-items: baseline;
+            justify-content: center;
+            /* Word gap must scale with the display type, never a host layout
+               spacing token: --space-* is chrome-scale and jams the sentence
+               ("Makemomentumvisible") when the type is auto-fitted large. */
+            gap: 0.26em;
+            max-width: 94cqw;
+            color: var(--fg, #f8fafc);
+            font-size: var(--kts-font-size);
+            font-weight: 760;
+            line-height: 1.08;
+            letter-spacing: -0.045em;
+            white-space: nowrap;
+          }
+
+          .kts-prefix,
+          .kts-suffix {
+            flex: 0 0 auto;
+          }
+
+          .kts-prefix:empty,
+          .kts-suffix:empty {
+            display: none;
+          }
+
+          /* Every word occupies one grid cell and contributes its intrinsic
+             width. Transforms do not affect layout, so this masked slot stays
+             as wide as the widest option for the entire composition. */
+          .kts-slot {
+            display: inline-grid;
+            flex: 0 0 auto;
+            overflow: hidden;
+            color: var(--kts-accent);
+            text-shadow: 0 0 2.8cqh color-mix(in srgb, var(--kts-accent) 28%, transparent);
+            vertical-align: baseline;
+          }
+
+          .kts-word {
+            grid-area: 1 / 1;
+            width: max-content;
+            justify-self: center;
+            color: var(--kts-accent);
+            will-change: transform, opacity;
+          }
+        </style>
+
+        <div
+          id="kinetic-type-swap-clip"
+          class="kts-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="kts-stage" role="img">
+            <div class="kts-sentence">
+              <span class="kts-prefix"></span>
+              <span class="kts-slot" aria-hidden="true"></span>
+              <span class="kts-suffix"></span>
+            </div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".kts-stage");
+            var prefixElement = root.querySelector(".kts-prefix");
+            var slotElement = root.querySelector(".kts-slot");
+            var suffixElement = root.querySelector(".kts-suffix");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var defaultOptions = ["faster", "smarter", "together"];
+            var prefix = vars.prefix == null ? "Ship" : String(vars.prefix).trim();
+            var suffix = vars.suffix == null ? "" : String(vars.suffix).trim();
+            var rawOptions = vars.options == null ? defaultOptions.join(",") : String(vars.options);
+            var options = rawOptions
+              .split(",")
+              .map(function (option) {
+                return option.trim();
+              })
+              .filter(function (option) {
+                return option.length > 0;
+              });
+            if (options.length === 0) options = defaultOptions.slice();
+
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+            var cuesValue = vars.cues == null ? "" : String(vars.cues);
+            var cues = cuesValue
+              .split(",")
+              .reduce(function (result, token) {
+                var trimmed = token.trim();
+                if (trimmed === "") return result;
+                var seconds = Number(trimmed);
+                if (!Number.isFinite(seconds) || seconds < 0) return result;
+                result.push(seconds);
+                return result;
+              }, [])
+              .sort(function (a, b) {
+                return a - b;
+              });
+
+            root.style.setProperty("--kts-accent", accentColors[accent]);
+            prefixElement.textContent = prefix;
+            suffixElement.textContent = suffix;
+
+            var words = options.map(function (option, index) {
+              var word = document.createElement("span");
+              word.className = "kts-word";
+              word.id = "kinetic-type-swap-word-" + index;
+              word.textContent = option;
+              slotElement.appendChild(word);
+              return word;
+            });
+
+            var finalSentence = [prefix, options[options.length - 1], suffix]
+              .filter(function (part) {
+                return part.length > 0;
+              })
+              .join(" ");
+            stage.setAttribute("aria-label", finalSentence);
+
+            var widestOptionLength = options.reduce(function (widest, option) {
+              return Math.max(widest, Array.from(option).length);
+            }, 1);
+            var sentenceLength =
+              Array.from(prefix).length + widestOptionLength + Array.from(suffix).length + 2;
+            var fittedCqw = Math.min(12, 122 / Math.max(1, sentenceLength));
+            root.style.setProperty(
+              "--kts-font-size",
+              "min(" + fittedCqw.toFixed(3) + "cqw, 22cqh)",
+            );
+
+            var IN_BASE = 2.25;
+            var OUT_BASE = exit === "none" ? 0 : 0.45;
+            var ARRIVAL_BASE = 0.3;
+            var SWAP_START_BASE = 0.48;
+            var ROLL_BASE = 0.46;
+            var SETTLE_TAIL_BASE = 0.18;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var totalBase = Math.max(0.001, IN_BASE + OUT_BASE);
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var ARRIVAL = ARRIVAL_BASE * scale;
+            var SWAP_START = SWAP_START_BASE * scale;
+            var ROLL = ROLL_BASE * scale;
+            var SETTLE_TAIL = SETTLE_TAIL_BASE * scale;
+
+            // Swap schedule: cues own the swap moments when provided; the
+            // authored even spread otherwise. Swaps beyond the cue list
+            // extrapolate at the cue list's own gap, and every swap clamps
+            // so its roll and settle finish before any exit.
+            var swapCount = words.length - 1;
+            var swapTimes = [];
+            var rollDuration = ROLL;
+            if (swapCount > 0) {
+              if (cues.length > 0) {
+                var lastCue = cues[cues.length - 1];
+                var cueGap =
+                  cues.length >= 2 ? Math.max(0.05, (lastCue - cues[0]) / (cues.length - 1)) : ROLL;
+                var latestSwap = Math.max(0, duration - OUT - ROLL - SETTLE_TAIL);
+                for (var cueIndex = 0; cueIndex < swapCount; cueIndex += 1) {
+                  var cueAt =
+                    cueIndex < cues.length
+                      ? cues[cueIndex]
+                      : lastCue + (cueIndex - (cues.length - 1)) * cueGap;
+                  swapTimes.push(Math.min(latestSwap, Math.max(0, cueAt)));
+                }
+                var minGap = Infinity;
+                for (var gapIndex = 1; gapIndex < swapTimes.length; gapIndex += 1) {
+                  minGap = Math.min(minGap, swapTimes[gapIndex] - swapTimes[gapIndex - 1]);
+                }
+                if (Number.isFinite(minGap)) {
+                  rollDuration = Math.min(ROLL, Math.max(0.04, minGap * 0.72));
+                }
+              } else {
+                var lastSwapStart = Math.max(SWAP_START, IN - SETTLE_TAIL - ROLL);
+                var swapStep = swapCount === 1 ? 0 : (lastSwapStart - SWAP_START) / (swapCount - 1);
+                rollDuration =
+                  swapCount <= 2 ? ROLL : Math.min(ROLL, Math.max(0.04, swapStep * 0.72));
+                for (var index = 1; index <= swapCount; index += 1) {
+                  swapTimes.push(
+                    swapCount === 1 ? lastSwapStart : SWAP_START + (index - 1) * swapStep,
+                  );
+                }
+              }
+            }
+            var swapsEnd =
+              swapTimes.length > 0
+                ? swapTimes[swapTimes.length - 1] + rollDuration + SETTLE_TAIL
+                : IN;
+            var HOLD_START = Math.min(Math.max(0, duration - OUT), Math.max(IN, swapsEnd));
+            var HOLD = Math.max(0, duration - (HOLD_START + OUT));
+            var OUT_START = HOLD_START + HOLD;
+
+            gsap.set(stage, { opacity: 0 });
+            gsap.set(words, { yPercent: 112, opacity: 0 });
+            gsap.set(words[0], { yPercent: 0, opacity: 1 });
+
+            var tl = gsap.timeline({ paused: true });
+            tl.to(stage, { opacity: 1, duration: ARRIVAL, ease: "power2.out" }, 0);
+
+            // Masked exchange: the outgoing word whips fully past the slot
+            // mask (power4.in) before the incoming word crosses center. The
+            // two phases overlap only for ~10% of the roll, while both words
+            // are opposite-edge slivers, so every frame shows at most one
+            // legible word at full ink and never a double exposure.
+            swapTimes.forEach(function (swapAt, swapIndex) {
+              var wordIndex = swapIndex + 1;
+              var incomingEase = wordIndex === words.length - 1 ? "back.out(1.7)" : "power4.out";
+              var outDuration = rollDuration * 0.55;
+              var inDuration = rollDuration * 0.55;
+              var inStart = swapAt + rollDuration - inDuration;
+
+              tl.to(
+                words[wordIndex - 1],
+                { yPercent: -112, duration: outDuration, ease: "power4.in" },
+                swapAt,
+              );
+              tl.set(words[wordIndex - 1], { opacity: 0 }, swapAt + outDuration);
+              tl.set(words[wordIndex], { opacity: 1 }, inStart);
+              tl.to(
+                words[wordIndex],
+                { yPercent: 0, duration: inDuration, ease: incomingEase },
+                inStart,
+              );
+            });
+
+            var finalWord = words[words.length - 1];
+            var beat = parseFloat(getComputedStyle(root).getPropertyValue("--dur-beat")) || 0.5;
+            var pulseHalf = Math.min(beat, HOLD / 2);
+            if (pulseHalf > 0) {
+              var maxRepeat = Math.floor(HOLD / pulseHalf) - 1;
+              var pulseRepeat = maxRepeat % 2 === 1 ? maxRepeat : maxRepeat - 1;
+              if (pulseRepeat >= 1) {
+                tl.to(
+                  finalWord,
+                  {
+                    opacity: 0.9,
+                    duration: pulseHalf,
+                    ease: "sine.inOut",
+                    yoyo: true,
+                    repeat: pulseRepeat,
+                  },
+                  HOLD_START,
+                );
+              }
+            }
+
+            // OUT: optional departure; exit none holds until the frame cuts.
+            if (exit === "fade") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "up") {
+              tl.to(stage, { opacity: 0, y: "-3cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["kinetic-type-swap"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/kinetic-type-swap/registry-item.json b/registry/components/kinetic-type-swap/registry-item.json
new file mode 100644
index 0000000000..bb785a4c85
--- /dev/null
+++ b/registry/components/kinetic-type-swap/registry-item.json
@@ -0,0 +1,80 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "kinetic-type-swap",
+  "type": "hyperframes:component",
+  "title": "Kinetic Type Swap",
+  "description": "A held sentence keeps its fixed text in place while one widest-word masked slot rolls through alternatives and settles on the final option.",
+  "tags": ["motion-primitive", "text-effects", "kinetic-type", "word-swap", "reveal"],
+  "jobs": ["reveal"],
+  "family": "text-effects",
+  "profile": "swap",
+  "evidence": "Wave I I2 true-spec contract: one widest-option masked word slot rolls while the surrounding sentence remains fixed",
+  "syncPoints": [{ "id": "final-lock", "phase": "in", "offset": 2.07 }],
+  "files": [
+    {
+      "path": "kinetic-type-swap.html",
+      "target": "compositions/components/kinetic-type-swap.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "prefix",
+      "type": "string",
+      "role": "content",
+      "label": "Prefix",
+      "description": "Fixed sentence text before the rolling word slot.",
+      "default": "Ship"
+    },
+    {
+      "id": "options",
+      "type": "string",
+      "role": "content",
+      "label": "Options",
+      "description": "Comma-separated words shown in the rolling slot.",
+      "default": "faster,smarter,together"
+    },
+    {
+      "id": "suffix",
+      "type": "string",
+      "role": "content",
+      "label": "Suffix",
+      "description": "Fixed sentence text after the rolling word slot.",
+      "default": ""
+    },
+    {
+      "id": "cues",
+      "type": "string",
+      "role": "timing",
+      "label": "Cues",
+      "description": "Comma-separated seconds (from mount start) for each word swap. Empty keeps the authored even spread.",
+      "default": ""
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Color used by the rolling word slot.",
+      "default": "green",
+      "options": [
+        { "value": "green", "label": "Green" },
+        { "value": "blue", "label": "Blue" },
+        { "value": "violet", "label": "Violet" }
+      ]
+    },
+    {
+      "id": "exit",
+      "type": "enum",
+      "role": "timing",
+      "label": "Exit",
+      "description": "Optional departure. Default none: the sentence holds until the frame cuts.",
+      "default": "none",
+      "options": [
+        { "value": "none", "label": "None" },
+        { "value": "fade", "label": "Fade" },
+        { "value": "up", "label": "Up" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/light-sweep-pass/README.md b/registry/components/light-sweep-pass/README.md
new file mode 100644
index 0000000000..05fdfa96f1
--- /dev/null
+++ b/registry/components/light-sweep-pass/README.md
@@ -0,0 +1,103 @@
+# light-sweep-pass
+
+A traveling key light re-shades a slotted scene: a soft diagonal gradient
+band crosses the frame once while every per-element highlight and shadow
+shifts in lockstep, then the light settles into a resting key from the upper
+third. Quiet, expensive-feeling; the scene itself never moves.
+
+One custom property owns the whole pass: the timeline writes `--light-x`
+(a unitless frame-percent scalar on `#root`) and nothing else. The band's
+translate, every highlight bloom, every shadow offset, and the ambient lift
+read it through `calc()`/`clamp()`/`max()` in static CSS, so seeks in any
+order resolve identical frames.
+
+Reference: the ordinaryfolk traveling light band (motion-reference
+`ordinaryfolkco/2001090228958752945`).
+
+## Files
+
+- `light-sweep-pass.html`: the mountable sub-composition (install target:
+  `compositions/components/light-sweep-pass.html`).
+- `registry-item.json`: registry metadata and the variables block.
+- `demo.html`: a full-bleed 1920x1080 LIGHT host that mounts the primitive
+  with non-default variables (QA gallery input).
+
+## Variables
+
+| id         | type   | default    | notes                                                                     |
+| ---------- | ------ | ---------- | ------------------------------------------------------------------------- |
+| `angle`    | number | `115`      | band and highlight gradient angle in degrees (60 to 160)                  |
+| `sweep_at` | number | `0.9`      | seconds after mount start when the band starts crossing (0 to 8)          |
+| `strength` | enum   | `standard` | `subtle` halves the band opacity and highlight bloom                      |
+| `accent`   | enum   | `green`    | `green` maps to `--brand`, `blue` to `--accent`, `violet` to `--accent-2` |
+| `exit`     | enum   | `none`     | `none` holds the settled key; `fade` and `up` release the stage           |
+
+Envelope: IN = `sweep_at` + 1.60s crossing + 0.55s settle, OUT = 0.5s only
+when `exit` is `fade` or `up`, HOLD is the sole elastic phase. The
+`sweep-land` sync point (`hf:sfx` id `light-settle-soft`) fires when the
+light reaches its resting key, 3.05s at defaults.
+
+## The slot mechanism
+
+The primitive ships one named full-bleed slot inside its `<template>`:
+
+```html
+<div class="lsp-scene" data-slot="scene">...</div>
+```
+
+The default children are a token hero card and three feature cards, so an
+untouched mount still reads as a tasteful pass. To light your own scene,
+install the component and **replace the children of the `[data-slot="scene"]`
+element in your installed copy** (the runtime clones only the primitive's own
+template on mount, so slot content lives in the component file, not on the
+host clip).
+
+Opting elements into the light:
+
+- Add `data-lit` to any element that should catch highlights and cast a
+  moving shadow, and give it an inline `style="--lsp-x: NN"` where NN is the
+  element's center along the sweep axis (percent of frame width, roughly its
+  horizontal center for the default angles).
+- Elements without `data-lit` only receive the band wash and the ambient
+  lift; nothing else touches them.
+- Highlights inherit the element's `border-radius`; give lit elements a
+  solid background so the bloom and shadow read.
+- Keep the `.lsp-ambient` and `.lsp-band` layers alone; they render above
+  slot content and are owned by the timeline.
+
+## Worked example
+
+```bash
+npx hyperframes add light-sweep-pass
+```
+
+In `compositions/components/light-sweep-pass.html`, replace the slot's
+default block:
+
+```html
+<div class="lsp-scene" data-slot="scene">
+  <img src="../../assets/dashboard.png" alt="" style="width:100%;height:100%;object-fit:cover" />
+  <div
+    data-lit
+    style="--lsp-x: 64; position:absolute; left:52%; top:30%; width:24%; height:40%"
+  ></div>
+</div>
+```
+
+Mount it from a host composition like any sub-composition:
+
+```html
+<div
+  class="clip"
+  data-composition-id="light-sweep-pass"
+  data-composition-src="./components/light-sweep-pass.html"
+  data-variable-values='{"angle":128,"sweep_at":0.6,"accent":"blue"}'
+  data-start="2"
+  data-duration="4"
+  data-track-index="0"
+></div>
+```
+
+The scene settles, the band crosses 0.6s after mount over 1.6s, the key
+glides back to its resting position, and the lit scene holds for the rest of
+the clip window (`exit` defaults to `none`; frame roots own transitions).
diff --git a/registry/components/light-sweep-pass/demo.html b/registry/components/light-sweep-pass/demo.html
new file mode 100644
index 0000000000..44e5f93408
--- /dev/null
+++ b/registry/components/light-sweep-pass/demo.html
@@ -0,0 +1,90 @@
+<!doctype html>
+<!--
+  light-sweep-pass demo. FULL-BLEED mount on a LIGHT token stage: the band
+  crosses early at a steeper angle with the blue accent at standard
+  strength, proving the one-property pass, the per-element highlight and
+  shadow lockstep, and the settled resting key on a light host.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>light-sweep-pass Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #eef0f3);
+      }
+
+      #root {
+        --bg: #eef0f3;
+        --fg: #14171c;
+        --muted: #626873;
+        --surface: #fbfcfd;
+        --border: #d3d8df;
+        --brand: #16a34a;
+        --accent: #0284c7;
+        --accent-2: #7c5cff;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-body: Inter, system-ui, sans-serif;
+        --radius: 22px;
+        --space-1: 8px;
+        --space-2: 16px;
+        --space-3: 32px;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #eef0f3);
+      }
+
+      .mount-stage {
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        container-type: size;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="light-sweep-pass-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="light-sweep-pass-mount"
+        class="mount-stage clip"
+        data-composition-id="light-sweep-pass"
+        data-composition-src="./light-sweep-pass.html"
+        data-variable-values='{"angle":128,"sweep_at":0.6,"accent":"blue"}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="1920"
+        data-height="1080"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["light-sweep-pass-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/light-sweep-pass/light-sweep-pass.html b/registry/components/light-sweep-pass/light-sweep-pass.html
new file mode 100644
index 0000000000..6f313d37f2
--- /dev/null
+++ b/registry/components/light-sweep-pass/light-sweep-pass.html
@@ -0,0 +1,477 @@
+<!doctype html>
+<!--
+  light-sweep-pass: HyperFrames video primitive (overlays / light)
+
+  Concept: a traveling key light re-shades a slotted scene. A soft diagonal
+  gradient band crosses the frame once while every per-element highlight and
+  shadow shifts in lockstep, then the light settles into a resting key from
+  the upper third. Quiet, expensive-feeling; the scene itself never moves.
+
+  Wave L, unit L3. Reference: motion-reference/ordinaryfolkco
+  2001090228958752945 (the traveling light band re-shading the frame).
+
+  ONE PROPERTY OWNS THE PASS: --light-x (a unitless 0-100-ish scalar on
+  #root) is the only animated value. The band's translate, every element's
+  highlight bloom, every shadow offset, and the ambient lift all read it
+  through calc()/clamp()/max() in static CSS. The timeline tweens a plain
+  JS number proxy and writes --light-x in onUpdate (never a var() string),
+  so seeks in any order resolve the same computed styles.
+
+  Slot (see README.md for a worked example):
+    - [data-slot="scene"]: the full-bleed scene being lit. Replace the
+      children of this element in your installed copy. Default: a token
+      hero card and three feature cards. Elements opt into the light with
+      the data-lit attribute plus an inline --lsp-x (their center along
+      the sweep axis, percent of frame width).
+
+  Variables (declared in data-composition-variables below):
+    - angle (number, degrees, default 115, 60 to 160): band and highlight
+      gradient angle. 115 reads as upper-left key light.
+    - sweep_at (number, seconds, default 0.9): when the band starts
+      crossing, relative to mount start.
+    - strength (subtle | standard, default standard): band opacity and
+      highlight bloom multiplier. subtle is the barely-there pass.
+    - accent (green | blue | violet, default green): warm tint inside the
+      band and the highlight blooms. green maps to --brand, blue to
+      --accent, violet to --accent-2.
+    - exit (none | fade | up, default none): outgoing transition. none
+      holds the settled key (frame roots own transitions).
+
+  Envelope (fixed IN/OUT, elastic HOLD only, never gsap.timeScale()):
+    IN       = sweep_at + 1.60s crossing + 0.55s settle to the resting key
+    HOLD     = elastic = max(0, D - (IN + OUT)); the settled key is still
+    OUT      = 0.50s when exit is fade or up, 0 when exit is none
+    If D < IN + OUT, IN and OUT scale down together so IN + OUT == D.
+
+  Sync point: sweep-land when the light reaches its resting key (3.05s at
+  defaults). Dispatches a bubbling hf:sfx CustomEvent with id
+  "light-settle-soft" there. This primitive never plays audio.
+
+  Mount contract: MOUNTABLE SUB-COMPOSITION. The runtime clones only
+  <template> contents; #root fills the host box (inset:0, container-type:
+  size), has no data-width/data-height, and registers one paused timeline
+  under the literal "light-sweep-pass" key. Variables come from
+  window.__hyperframes.getVariables().
+-->
+<html
+  lang="en"
+  data-composition-id="light-sweep-pass"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "angle", "type": "number", "role": "style", "label": "Angle", "description": "Band and highlight gradient angle in degrees.", "default": 115, "min": 60, "max": 160, "step": 1, "unit": "deg" },
+    { "id": "sweep_at", "type": "number", "role": "timing", "label": "Sweep start", "description": "Seconds after mount start when the band starts crossing.", "default": 0.9, "min": 0, "max": 8, "step": 0.05, "unit": "s" },
+    { "id": "strength", "type": "enum", "role": "style", "label": "Strength", "description": "Band opacity and highlight bloom multiplier.", "default": "standard", "options": [{ "value": "subtle", "label": "Subtle" }, { "value": "standard", "label": "Standard" }] },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Tint inside the band and the highlight blooms.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Outgoing transition. None holds the settled key.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Light Sweep Pass</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="light-sweep-pass" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          /* --light-x starts off-frame left; the timeline is its only
+             writer. --lsp-angle and --lsp-strength are set once at mount. */
+          #root {
+            --light-x: -35;
+            --lsp-angle: 115;
+            --lsp-strength: 1;
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            background: var(--bg, #0b0c0e);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+          }
+
+          .lsp-clip,
+          .lsp-stage,
+          .lsp-scene,
+          .lsp-ambient,
+          .lsp-band {
+            position: absolute;
+            inset: 0;
+          }
+
+          .lsp-clip {
+            overflow: hidden;
+          }
+
+          .lsp-stage {
+            opacity: 0;
+          }
+
+          .lsp-scene {
+            overflow: hidden;
+          }
+
+          /* Every lit element derives its whole treatment from the ONE
+             --light-x scalar: distance d to the band, |d| via max(d, -d),
+             a 0..1 proximity bloom, a shadow that slides away from the
+             light and deepens as the band passes. Elements opt in with
+             data-lit and an inline --lsp-x (center along the sweep axis,
+             percent of frame width). */
+          [data-lit] {
+            --lsp-d: calc(var(--light-x) - var(--lsp-x, 50));
+            --lsp-abs: max(var(--lsp-d), calc(-1 * var(--lsp-d)));
+            --lsp-glow: clamp(0, calc(1 - var(--lsp-abs) / 26), 1);
+            position: relative;
+            box-shadow: calc(clamp(-30, var(--lsp-d), 30) * -0.05cqw)
+              calc(0.8cqh + var(--lsp-glow) * 0.7cqh) calc(2.2cqh + var(--lsp-glow) * 2.4cqh)
+              color-mix(in srgb, #000000 26%, transparent);
+          }
+
+          /* The highlight bloom: a static angle-matched gradient whose
+             opacity is the proximity term. No transitions, no tweens. */
+          [data-lit]::after {
+            content: "";
+            position: absolute;
+            inset: 0;
+            border-radius: inherit;
+            pointer-events: none;
+            background: linear-gradient(
+              calc(var(--lsp-angle) * 1deg),
+              color-mix(in srgb, #ffffff 86%, var(--lsp-accent, #22c55e)) 0%,
+              transparent 62%
+            );
+            opacity: calc(var(--lsp-glow) * 0.32 * var(--lsp-strength));
+          }
+
+          /* Ambient lift: the scene starts a touch dim and brightens for
+             good once the band has entered the frame. Monotonic in
+             --light-x, so the settle never re-dims it. */
+          .lsp-ambient {
+            pointer-events: none;
+            background: #000000;
+            opacity: calc(clamp(0, (26 - var(--light-x)) / 130, 0.16) * var(--lsp-strength));
+          }
+
+          /* The band: an oversized angle-matched gradient sheet that only
+             ever translates along X, driven by the same scalar. Screen
+             blend keeps it a light, never a paint. */
+          .lsp-band {
+            inset: -55%;
+            pointer-events: none;
+            mix-blend-mode: screen;
+            background: linear-gradient(
+              calc(var(--lsp-angle) * 1deg),
+              transparent 36%,
+              color-mix(in srgb, #ffffff 24%, transparent) 46%,
+              color-mix(in srgb, #ffffff 78%, var(--lsp-accent, #22c55e)) 50%,
+              color-mix(in srgb, #ffffff 24%, transparent) 54%,
+              transparent 64%
+            );
+            opacity: 0;
+            transform: translateX(calc((var(--light-x) - 50) * 1.4cqw));
+            will-change: transform, opacity;
+          }
+
+          #root[data-strength="subtle"] {
+            --lsp-strength: 0.55;
+          }
+
+          /* ---------- default slot scene: token hero + three cards ---------- */
+
+          .lsp-default {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            grid-template-rows: auto auto;
+            align-content: center;
+            justify-items: center;
+            row-gap: var(--space-3, 5cqh);
+            padding: var(--space-3, 6cqh) 10cqw;
+            background: linear-gradient(
+              calc(var(--lsp-angle) * 1deg),
+              color-mix(in srgb, var(--fg, #f8fafc) 3%, var(--bg, #0b0c0e)) 0%,
+              var(--bg, #0b0c0e) 55%,
+              color-mix(in srgb, #000000 6%, var(--bg, #0b0c0e)) 100%
+            );
+          }
+
+          .lsp-hero {
+            display: grid;
+            align-content: center;
+            row-gap: var(--space-2, 2.4cqh);
+            width: 58cqw;
+            height: 30cqh;
+            padding: var(--space-3, 4cqh) var(--space-3, 3cqw);
+            border: 0.16cqw solid var(--border, #343a46);
+            border-radius: var(--radius, 2.4cqmin);
+            background: var(--surface, #14171c);
+          }
+
+          .lsp-hero-bar {
+            width: 46%;
+            height: 4.6cqh;
+            border-radius: 1.4cqh;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 82%, var(--surface, #14171c));
+          }
+
+          .lsp-hero-line {
+            height: 2.2cqh;
+            border-radius: 1.1cqh;
+            background: var(--muted, #94a3b8);
+            opacity: 0.55;
+          }
+
+          .lsp-hero-line:nth-of-type(3) {
+            width: 72%;
+          }
+
+          .lsp-row {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            column-gap: var(--space-2, 2cqw);
+            width: 58cqw;
+          }
+
+          .lsp-card {
+            display: grid;
+            align-content: start;
+            row-gap: var(--space-1, 1.6cqh);
+            height: 24cqh;
+            padding: var(--space-2, 2.6cqh) var(--space-2, 1.6cqw);
+            border: 0.16cqw solid var(--border, #343a46);
+            border-radius: var(--radius, 2.4cqmin);
+            background: var(--surface, #14171c);
+          }
+
+          .lsp-dot {
+            width: 3.4cqh;
+            height: 3.4cqh;
+            border-radius: 50%;
+            background: color-mix(in srgb, var(--lsp-accent, #22c55e) 72%, var(--surface, #14171c));
+          }
+
+          .lsp-line {
+            height: 1.9cqh;
+            border-radius: 1cqh;
+            background: var(--muted, #94a3b8);
+            opacity: 0.5;
+          }
+
+          .lsp-line:nth-of-type(3) {
+            width: 64%;
+          }
+        </style>
+
+        <div
+          id="light-sweep-pass-clip"
+          class="lsp-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="lsp-stage">
+            <div class="lsp-scene" data-slot="scene">
+              <!-- SLOT "scene": replace the children of this element with
+                   your own full-bleed content. Mark elements that should
+                   catch the light with data-lit and give each an inline
+                   style="--lsp-x: NN" (center along the sweep, percent). -->
+              <div class="lsp-default" aria-hidden="true">
+                <div class="lsp-hero" data-lit style="--lsp-x: 50">
+                  <div class="lsp-hero-bar"></div>
+                  <div class="lsp-hero-line"></div>
+                  <div class="lsp-hero-line"></div>
+                </div>
+                <div class="lsp-row">
+                  <div class="lsp-card" data-lit style="--lsp-x: 31">
+                    <div class="lsp-dot"></div>
+                    <div class="lsp-line"></div>
+                    <div class="lsp-line"></div>
+                  </div>
+                  <div class="lsp-card" data-lit style="--lsp-x: 50">
+                    <div class="lsp-dot"></div>
+                    <div class="lsp-line"></div>
+                    <div class="lsp-line"></div>
+                  </div>
+                  <div class="lsp-card" data-lit style="--lsp-x: 69">
+                    <div class="lsp-dot"></div>
+                    <div class="lsp-line"></div>
+                    <div class="lsp-line"></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="lsp-ambient" aria-hidden="true"></div>
+            <div class="lsp-band" aria-hidden="true"></div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            // Literal id: mount flattening strips data-composition-id from the
+            // live root before this timeline registers.
+            var compositionId = "light-sweep-pass";
+            var stage = root.querySelector(".lsp-stage");
+            var band = root.querySelector(".lsp-band");
+
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            function clampNumber(raw, fallback, min, max) {
+              var value = raw == null ? fallback : Number(raw);
+              if (!Number.isFinite(value)) return fallback;
+              return Math.max(min, Math.min(max, value));
+            }
+
+            var angle = clampNumber(vars.angle, 115, 60, 160);
+            var sweepAt = clampNumber(vars.sweep_at, 0.9, 0, 8);
+            var strength = vars.strength === "subtle" ? "subtle" : "standard";
+            var accentTokens = {
+              green: "var(--brand, #22c55e)",
+              blue: "var(--accent, #38bdf8)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentTokens, vars.accent)
+              ? vars.accent
+              : "green";
+            // The bundler mirrors composition variables as scoped CSS custom
+            // props, so this unit's own accent variable can shadow the contract
+            // --accent token ("blue" is a valid CSS color). When the shadow is
+            // present, fall back to the literal contract value.
+            var shadowedAccent = getComputedStyle(root).getPropertyValue("--accent").trim();
+            if (
+              shadowedAccent === "green" ||
+              shadowedAccent === "blue" ||
+              shadowedAccent === "violet"
+            ) {
+              accentTokens.blue = "#38bdf8";
+            }
+            // INVARIANT: only none | fade | up reaches the timeline.
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            root.dataset.strength = strength;
+            root.style.setProperty("--lsp-angle", String(angle));
+            root.style.setProperty("--lsp-accent", accentTokens[accent]);
+
+            // RETIME RANGE: fixed IN and OUT scale together only when D is
+            // too short. HOLD is the sole elastic phase. Never timeScale().
+            var SWEEP_BASE = 1.6;
+            var SETTLE_BASE = 0.55;
+            var STAGE_IN_BASE = 0.5;
+            var IN_BASE = sweepAt + SWEEP_BASE + SETTLE_BASE;
+            var OUT_BASE = exit === "none" ? 0 : 0.5;
+
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var totalBase = IN_BASE + OUT_BASE;
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var SWEEP = SWEEP_BASE * scale;
+            var SETTLE = SETTLE_BASE * scale;
+            var STAGE_IN = Math.min(STAGE_IN_BASE * scale, IN_BASE * scale);
+            var SWEEP_AT = sweepAt * scale;
+            var SWEEP_END = SWEEP_AT + SWEEP;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var OUT_START = IN + HOLD;
+
+            // The light's authored waypoints: parked off-frame left, fully
+            // crossed off-frame right, then the resting key in the upper
+            // third of the travel. All in --light-x units (frame percent).
+            var LIGHT_START = -35;
+            var LIGHT_CROSSED = 118;
+            var LIGHT_REST = 62;
+
+            function fireSfx(id, t) {
+              root.dispatchEvent(
+                new CustomEvent("hf:sfx", { detail: { id: id, t: t }, bubbles: true }),
+              );
+            }
+
+            // ONE proxy owns --light-x; every highlight, shadow, ambient
+            // lift, and the band transform read it via calc in static CSS.
+            var light = { x: LIGHT_START };
+            function writeLight() {
+              root.style.setProperty("--light-x", light.x.toFixed(3));
+            }
+            writeLight();
+
+            gsap.set(stage, { opacity: 0, y: "1.5cqh" });
+            gsap.set(band, { autoAlpha: 0 });
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: the scene settles first, then one confident crossing.
+            tl.to(stage, { opacity: 1, y: "0cqh", duration: STAGE_IN, ease: "power2.out" }, 0);
+            tl.fromTo(
+              light,
+              { x: LIGHT_START },
+              {
+                x: LIGHT_CROSSED,
+                duration: SWEEP,
+                ease: "sine.inOut",
+                onUpdate: writeLight,
+              },
+              SWEEP_AT,
+            );
+            tl.fromTo(
+              band,
+              { autoAlpha: 0 },
+              {
+                autoAlpha: 1,
+                duration: Math.min(0.3 * scale, SWEEP),
+                ease: "power1.out",
+                immediateRender: false,
+              },
+              SWEEP_AT,
+            );
+            tl.to(
+              band,
+              { autoAlpha: 0, duration: 0.35 * scale, ease: "power1.in" },
+              Math.max(SWEEP_AT, SWEEP_END - 0.35 * scale),
+            );
+
+            // The settle: the band is gone; the key light glides back to its
+            // resting position and the per-element shading follows it there.
+            tl.to(
+              light,
+              { x: LIGHT_REST, duration: SETTLE, ease: "power2.out", onUpdate: writeLight },
+              SWEEP_END,
+            );
+            tl.call(
+              function () {
+                fireSfx("light-settle-soft", IN);
+              },
+              [],
+              IN,
+            );
+
+            // HOLD: deliberately still under the settled key.
+
+            // OUT: only when the exit variable asks for one.
+            if (exit !== "none") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+              if (exit === "up") {
+                tl.to(stage, { y: "-6cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              }
+            }
+
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/light-sweep-pass/registry-item.json b/registry/components/light-sweep-pass/registry-item.json
new file mode 100644
index 0000000000..319b56cd5e
--- /dev/null
+++ b/registry/components/light-sweep-pass/registry-item.json
@@ -0,0 +1,84 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "light-sweep-pass",
+  "type": "hyperframes:component",
+  "title": "Light Sweep Pass",
+  "description": "A traveling key light re-shades a slotted scene: a soft diagonal gradient band crosses the frame once while every per-element highlight and shadow shifts in lockstep (all driven by one --light-x property), then the light settles into a resting key. Quiet, expensive-feeling; the scene itself never moves. Callers fill the named scene slot; a token hero-and-cards default renders when it is left empty.",
+  "tags": ["motion-primitive", "overlay", "light", "sweep", "slots", "deterministic"],
+  "jobs": ["texture"],
+  "family": "overlays",
+  "profile": "holdable",
+  "evidence": "Wave L3 frame study: ordinaryfolkco 2001090228958752945, the traveling light band re-shading the frame in lockstep with the scene",
+  "syncPoints": [{ "id": "sweep-land", "phase": "in", "offset": 3.05 }],
+  "files": [
+    {
+      "path": "light-sweep-pass.html",
+      "target": "compositions/components/light-sweep-pass.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "angle",
+      "type": "number",
+      "role": "style",
+      "label": "Angle",
+      "description": "Band and highlight gradient angle in degrees.",
+      "default": 115,
+      "min": 60,
+      "max": 160,
+      "step": 1,
+      "unit": "deg"
+    },
+    {
+      "id": "sweep_at",
+      "type": "number",
+      "role": "timing",
+      "label": "Sweep start",
+      "description": "Seconds after mount start when the band starts crossing.",
+      "default": 0.9,
+      "min": 0,
+      "max": 8,
+      "step": 0.05,
+      "unit": "s"
+    },
+    {
+      "id": "strength",
+      "type": "enum",
+      "role": "style",
+      "label": "Strength",
+      "description": "Band opacity and highlight bloom multiplier.",
+      "default": "standard",
+      "options": [
+        { "value": "subtle", "label": "Subtle" },
+        { "value": "standard", "label": "Standard" }
+      ]
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Tint inside the band and the highlight blooms.",
+      "default": "green",
+      "options": [
+        { "value": "green", "label": "Green" },
+        { "value": "blue", "label": "Blue" },
+        { "value": "violet", "label": "Violet" }
+      ]
+    },
+    {
+      "id": "exit",
+      "type": "enum",
+      "role": "timing",
+      "label": "Exit",
+      "description": "Outgoing transition. None holds the settled key.",
+      "default": "none",
+      "options": [
+        { "value": "none", "label": "None" },
+        { "value": "fade", "label": "Fade" },
+        { "value": "up", "label": "Up" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/line-by-line-slide/demo.html b/registry/components/line-by-line-slide/demo.html
new file mode 100644
index 0000000000..e64073fe74
--- /dev/null
+++ b/registry/components/line-by-line-slide/demo.html
@@ -0,0 +1,95 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Line-by-Line Slide - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        min-width: 900px;
+        min-height: 500px;
+        padding: 64px;
+        /* ponytail: scale wrapper — not a GSAP target, so CSS transform is safe */
+        transform: scale(2.8);
+        transform-origin: center center;
+      }
+      .hf-remocn-line-by-line-slide {
+        color: #18181b;
+        font-family: Inter, system-ui, sans-serif;
+        font-weight: 900;
+        letter-spacing: -0.04em;
+      }
+      .hf-remocn-line-by-line-slide {
+        display: grid;
+        gap: 10px;
+        font-size: 64px;
+        line-height: 1.05;
+        overflow: hidden;
+      }
+      .hf-remocn-line-by-line-slide span {
+        display: block;
+        transform: translate(var(--hf-line-x, 0px), var(--hf-line-y, 0px));
+        filter: blur(var(--hf-line-blur, 0px));
+        will-change: transform, filter, opacity;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="line-by-line-slide-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-line-by-line-slide">
+          <span>Design faster</span><span>Render cleaner</span><span>Ship louder</span>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-line-by-line-slide span",
+          { opacity: 0, "--hf-line-x": "-36px", "--hf-line-y": "18px", "--hf-line-blur": "6px" },
+          {
+            opacity: 1,
+            "--hf-line-x": "0px",
+            "--hf-line-y": "0px",
+            "--hf-line-blur": "0px",
+            duration: 0.34,
+            stagger: 0.08,
+            ease: "power3.out",
+          },
+          startTime,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["line-by-line-slide-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/line-by-line-slide/line-by-line-slide.html b/registry/components/line-by-line-slide/line-by-line-slide.html
new file mode 100644
index 0000000000..9f8fff93d1
--- /dev/null
+++ b/registry/components/line-by-line-slide/line-by-line-slide.html
@@ -0,0 +1,105 @@
+<!--
+  Line-by-Line Slide - remocn typography primitive for HyperFrames.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes a custom property the CSS above
+  consumes. The timeline recipe below is untouched by them: it keeps driving
+  one sideways offset, and direction decides which way that offset points.
+
+    - size (compact | standard | display, default standard): type size of the
+      stack, 40px, 52px, or 68px.
+    - tone (ink | paper | accent, default ink): line colour. ink is near-black
+      for light frames, paper near-white for dark ones, accent rides the
+      brand token.
+    - density (fine | standard | coarse, default standard): the gap between
+      lines, 4px, 10px, or 20px.
+    - direction (left | right, default left): which side the lines slide in
+      from. left keeps the original entry, right mirrors it.
+
+  On every default the result is identical to the original: near-black 52px
+  lines, 10px apart, entering from the left.
+-->
+
+<div
+  class="hf-remocn-line-by-line-slide"
+  data-composition-variables='[
+    {"id": "size", "type": "enum", "role": "layout", "label": "Size", "description": "Type size of the whole stack.", "default": "standard", "options": [{"value": "compact", "label": "Compact"}, {"value": "standard", "label": "Standard"}, {"value": "display", "label": "Display"}]},
+    {"id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Line colour: ink for light frames, paper for dark ones, accent rides the brand token.", "default": "ink", "options": [{"value": "ink", "label": "Ink"}, {"value": "paper", "label": "Paper"}, {"value": "accent", "label": "Accent"}]},
+    {"id": "density", "type": "enum", "role": "layout", "label": "Density", "description": "The gap between lines, from a tight block to an airy stack.", "default": "standard", "options": [{"value": "fine", "label": "Fine"}, {"value": "standard", "label": "Standard"}, {"value": "coarse", "label": "Coarse"}]},
+    {"id": "direction", "type": "enum", "role": "motion", "label": "Direction", "description": "Which side the lines slide in from as the timeline drives the offset.", "default": "left", "options": [{"value": "left", "label": "Left"}, {"value": "right", "label": "Right"}]}
+  ]'
+>
+  <span>Design faster</span><span>Render cleaner</span><span>Ship louder</span>
+</div>
+
+<style>
+  .hf-remocn-line-by-line-slide {
+    color: var(--hf-line-color, #18181b);
+    font-family: Inter, system-ui, sans-serif;
+    font-weight: 900;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-line-by-line-slide {
+    display: grid;
+    gap: var(--hf-line-gap, 10px);
+    font-size: var(--hf-line-size, 52px);
+    line-height: 1;
+    overflow: hidden;
+  }
+  .hf-remocn-line-by-line-slide span {
+    display: block;
+    transform: translate(
+      calc(var(--hf-line-x, 0px) * var(--hf-line-axis-x, 1)),
+      var(--hf-line-y, 0px)
+    );
+    filter: blur(var(--hf-line-blur, 0px));
+    will-change: transform, filter, opacity;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var sizes = { compact: "40px", standard: "52px", display: "68px" };
+    var tones = {
+      ink: "#18181b",
+      paper: "#fafafa",
+      accent: "var(--brand, #34d399)",
+    };
+    var gaps = { fine: "4px", standard: "10px", coarse: "20px" };
+    var axes = { left: 1, right: -1 };
+
+    var size = sizes[pick(sizes, vars.size, "standard")];
+    var tone = tones[pick(tones, vars.tone, "ink")];
+    var gap = gaps[pick(gaps, vars.density, "standard")];
+    var axis = axes[pick(axes, vars.direction, "left")];
+
+    var roots = document.querySelectorAll(".hf-remocn-line-by-line-slide");
+    for (var i = 0; i < roots.length; i += 1) {
+      var root = roots[i];
+      root.style.setProperty("--hf-line-size", size);
+      root.style.setProperty("--hf-line-color", tone);
+      root.style.setProperty("--hf-line-gap", gap);
+      root.style.setProperty("--hf-line-axis-x", String(axis));
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-line-by-line-slide span', { opacity: 0, '--hf-line-x': '-36px', '--hf-line-y': '18px', '--hf-line-blur': '6px' }, { opacity: 1, '--hf-line-x': '0px', '--hf-line-y': '0px', '--hf-line-blur': '0px', duration: 0.34, stagger: 0.08, ease: 'power3.out' }, startTime);
+-->
diff --git a/registry/components/line-by-line-slide/registry-item.json b/registry/components/line-by-line-slide/registry-item.json
new file mode 100644
index 0000000000..b91e2ed504
--- /dev/null
+++ b/registry/components/line-by-line-slide/registry-item.json
@@ -0,0 +1,104 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "line-by-line-slide",
+  "type": "hyperframes:component",
+  "title": "Line-by-Line Slide",
+  "description": "Each line enters from the left with staggered slide and exits to the right.",
+  "tags": ["motion-primitive", "remocn-port", "typography"],
+  "files": [
+    {
+      "path": "line-by-line-slide.html",
+      "target": "compositions/components/line-by-line-slide.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "size",
+      "type": "enum",
+      "role": "layout",
+      "label": "Size",
+      "description": "Type size of the whole stack.",
+      "default": "standard",
+      "options": [
+        {
+          "value": "compact",
+          "label": "Compact"
+        },
+        {
+          "value": "standard",
+          "label": "Standard"
+        },
+        {
+          "value": "display",
+          "label": "Display"
+        }
+      ]
+    },
+    {
+      "id": "tone",
+      "type": "enum",
+      "role": "style",
+      "label": "Tone",
+      "description": "Line colour: ink for light frames, paper for dark ones, accent rides the brand token.",
+      "default": "ink",
+      "options": [
+        {
+          "value": "ink",
+          "label": "Ink"
+        },
+        {
+          "value": "paper",
+          "label": "Paper"
+        },
+        {
+          "value": "accent",
+          "label": "Accent"
+        }
+      ]
+    },
+    {
+      "id": "density",
+      "type": "enum",
+      "role": "layout",
+      "label": "Density",
+      "description": "The gap between lines, from a tight block to an airy stack.",
+      "default": "standard",
+      "options": [
+        {
+          "value": "fine",
+          "label": "Fine"
+        },
+        {
+          "value": "standard",
+          "label": "Standard"
+        },
+        {
+          "value": "coarse",
+          "label": "Coarse"
+        }
+      ]
+    },
+    {
+      "id": "direction",
+      "type": "enum",
+      "role": "motion",
+      "label": "Direction",
+      "description": "Which side the lines slide in from as the timeline drives the offset.",
+      "default": "left",
+      "options": [
+        {
+          "value": "left",
+          "label": "Left"
+        },
+        {
+          "value": "right",
+          "label": "Right"
+        }
+      ]
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/line-by-line-slide.png"
+  }
+}
diff --git a/registry/components/line-swap/README.md b/registry/components/line-swap/README.md
new file mode 100644
index 0000000000..07d00ca0c3
--- /dev/null
+++ b/registry/components/line-swap/README.md
@@ -0,0 +1,38 @@
+# line-swap
+
+A masked full-line beat replacement. `line_a` rises into an overflow-hidden mask and holds center; on the swap beat it exits up through the mask as `line_b` enters bottom-up on the same beat (single restrained slam, smooth ease, no overshoot). Optionally an accent underline draws left to right beneath `underline_word` of `line_b` after it lands. Generalizes flagship frame 01.
+
+3.5s authored, elastic HOLD, exit `none` by default.
+
+## Variables
+
+| id               | type   | default                               | notes                                                                                                                     |
+| ---------------- | ------ | ------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
+| `line_a`         | string | `Everyone promised you AI.`           | Holds center, exits up on the beat.                                                                                       |
+| `line_b`         | string | `Almost nobody promised you control.` | Enters bottom-up on the beat, then holds. Font size auto-fits to the longer line.                                         |
+| `swap_at`        | number | `1.5`                                 | Beat second from mount start. Clamped so line A fully arrives first and the swap plus underline complete before any exit. |
+| `underline_word` | string | `control`                             | First case-insensitive substring match in `line_b` gets the underline. Empty or unmatched disables it.                    |
+| `accent`         | enum   | `green`                               | Underline color: green rides `--brand`, blue rides `--accent`, violet rides `--accent-2`.                                 |
+| `exit`           | enum   | `none`                                | `none` holds until the cut; `fade` departs opacity-only; `up` fades while rising.                                         |
+
+## Mount
+
+```html
+<div
+  class="clip"
+  data-composition-id="line-swap"
+  data-composition-src="./line-swap.html"
+  data-variable-values='{"line_a":"Everyone ships demos.","line_b":"Almost nobody ships proof.","underline_word":"proof","swap_at":1.3,"accent":"blue"}'
+  data-start="0"
+  data-duration="3.5"
+  data-track-index="0"
+></div>
+```
+
+Elastic root: no `data-width`/`data-height`; it fills whatever box the host clip gives it. Timeline registers under the literal `line-swap` key.
+
+## Notes
+
+- Both lines are nowrap and share one deterministic character-count font fit, so the swap never reflows.
+- The underline is the flagship scaleX bar draw (left transform-origin, explicit 0 to 1 endpoints), hidden until the cue and seek-safe in both directions.
+- The hold after the underline lands is completely still; frame roots own transitions.
diff --git a/registry/components/line-swap/demo.html b/registry/components/line-swap/demo.html
new file mode 100644
index 0000000000..bd0e7a5217
--- /dev/null
+++ b/registry/components/line-swap/demo.html
@@ -0,0 +1,81 @@
+<!doctype html>
+<!--
+  line-swap demo. This standalone composition mounts the primitive through
+  data-composition-src. Non-default lines, swap beat, underline word, and
+  accent prove the variable path while the primitive stays elastic to its
+  host box.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Line Swap Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #0b0c0e);
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --brand: #71f5a7;
+        --accent: #61a8ff;
+        --accent-2: #c5a3ff;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+
+      .mount-box {
+        position: absolute;
+        width: 80%;
+        height: 52%;
+        left: 10%;
+        top: 24%;
+        container-type: size;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="line-swap-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="3.5"
+      data-fps="30"
+    >
+      <div
+        id="line-swap-mount"
+        class="mount-box clip"
+        data-composition-id="line-swap"
+        data-composition-src="./line-swap.html"
+        data-variable-values='{"line_a":"Everyone ships demos.","line_b":"Almost nobody ships proof.","underline_word":"proof","swap_at":1.3,"accent":"blue"}'
+        data-start="0"
+        data-duration="3.5"
+        data-track-index="0"
+        data-width="1536"
+        data-height="562"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["line-swap-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/line-swap/line-swap.html b/registry/components/line-swap/line-swap.html
new file mode 100644
index 0000000000..811162d4a2
--- /dev/null
+++ b/registry/components/line-swap/line-swap.html
@@ -0,0 +1,309 @@
+<!doctype html>
+<!--
+  line-swap: HyperFrames video primitive (text effects / beat replacement)
+
+  A masked full-line beat replacement, generalizing flagship frame 01: line_a
+  rises into an overflow-hidden mask and holds center, then on the swap beat
+  it exits up through the mask as line_b enters bottom-up on the same beat.
+  One restrained slam, smooth ease, no overshoot. Optionally an accent
+  underline draws left to right beneath underline_word of line_b after it
+  lands (scaleX from a left origin, the flagship bar draw).
+
+  Variables:
+    line_a (string): the first line, replaced on the beat.
+    line_b (string): the line that lands and holds.
+    swap_at (seconds): the beat, relative to mount start. Clamped so line_a
+      finishes entering first and line_b plus the underline complete before
+      any exit begins.
+    underline_word (string): first case-insensitive substring match inside
+      line_b gets the underline. Empty or unmatched disables it.
+    accent (green | blue | violet): underline color via the contract token map.
+    exit (none | fade | up, default none): frame roots own transitions;
+      holds end films.
+
+  Envelope, fixed IN and OUT with elastic HOLD only (never time-scaled):
+    IN_A_BASE  = 0.50s  line_a enters bottom-up through the mask
+    SWAP span  = 0.72s  line_a up-and-out (0.35s) overlapping line_b in
+                        (starts 0.22s after the beat, lands 0.50s later)
+    UL span    = 0.60s  0.15s beat after the land, then a 0.45s draw
+                        (0 when underline_word is empty or unmatched)
+    HOLD       = max(0, D - phases), completely still
+    OUT_BASE   = 0s for exit none, otherwise 0.45s
+    If D is shorter than the fixed phases, they compress together.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, has no data-width or
+  data-height, and registers one paused timeline under the literal
+  line-swap key.
+-->
+<html
+  lang="en"
+  data-composition-id="line-swap"
+  data-composition-duration="3.5"
+  data-composition-variables='[
+    { "id": "line_a", "type": "string", "role": "content", "label": "Line A", "description": "First line; holds center inside the mask, then exits up on the swap beat.", "default": "Everyone promised you AI." },
+    { "id": "line_b", "type": "string", "role": "content", "label": "Line B", "description": "Replacement line; enters bottom-up on the swap beat and holds.", "default": "Almost nobody promised you control." },
+    { "id": "swap_at", "type": "number", "role": "timing", "label": "Swap at", "description": "Second (from mount start) of the beat replacement. Clamped so the swap and underline complete before any exit.", "default": 1.5, "min": 0, "step": 0.1, "unit": "s" },
+    { "id": "underline_word", "type": "string", "role": "content", "label": "Underline word", "description": "First case-insensitive substring match in line B gets the accent underline after landing. Empty disables it.", "default": "control" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Underline color from the contract token map.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the landed line holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Line Swap</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="line-swap" data-duration="3.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            background: var(--bg, #0b0c0e);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .ls-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+          }
+
+          .ls-stage {
+            width: 94cqw;
+            will-change: transform, opacity;
+          }
+
+          /* Beat mask: both lines live inside; the swap slides through it. */
+          .ls-mask {
+            position: relative;
+            width: 100%;
+            height: calc(var(--ls-font-size, min(7cqw, 16cqh)) * 1.42);
+            overflow: hidden;
+          }
+
+          .ls-line {
+            position: absolute;
+            inset: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: var(--ls-font-size, min(7cqw, 16cqh));
+            font-weight: 600;
+            line-height: 1;
+            letter-spacing: -0.02em;
+            white-space: nowrap;
+            will-change: transform;
+          }
+
+          /* One inline wrapper per line: a bare text node next to the
+             underline span would become separate flex items and the boundary
+             space would collapse ("youcontrol."). */
+          .ls-line-inner {
+            display: inline;
+          }
+
+          .ls-ul-wrap {
+            position: relative;
+            display: inline-block;
+            white-space: nowrap;
+          }
+
+          .ls-underline {
+            position: absolute;
+            left: 0.02em;
+            right: 0.02em;
+            bottom: -0.14em;
+            height: 0.055em;
+            border-radius: 0.03em;
+            transform-origin: left center;
+          }
+        </style>
+
+        <div
+          id="line-swap-clip"
+          class="ls-clip clip"
+          data-start="0"
+          data-duration="3.5"
+          data-track-index="0"
+        >
+          <div class="ls-stage" role="img">
+            <div class="ls-mask">
+              <div class="ls-line ls-line-a"><span class="ls-line-inner"></span></div>
+              <div class="ls-line ls-line-b"><span class="ls-line-inner"></span></div>
+            </div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            // Literal key: the flattening step strips data-composition-id off
+            // the mounted root, so reading it back would register "null".
+            var compositionId = "line-swap";
+            var stage = root.querySelector(".ls-stage");
+            var lineAEl = root.querySelector(".ls-line-a");
+            var lineBEl = root.querySelector(".ls-line-b");
+            var lineAInner = lineAEl.querySelector(".ls-line-inner");
+            var lineBInner = lineBEl.querySelector(".ls-line-inner");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            function asLine(value, fallback) {
+              return value == null ? fallback : String(value).trim().replace(/\s+/g, " ");
+            }
+            var lineA = asLine(vars.line_a, "Everyone promised you AI.");
+            var lineB = asLine(vars.line_b, "Almost nobody promised you control.");
+            var underlineWord = asLine(vars.underline_word, "control");
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            lineAInner.textContent = lineA;
+
+            // Split line_b around the first case-insensitive underline match.
+            // textContent nodes only, never innerHTML.
+            var matchIndex =
+              underlineWord.length > 0
+                ? lineB.toLowerCase().indexOf(underlineWord.toLowerCase())
+                : -1;
+            var underlineEl = null;
+            if (matchIndex >= 0) {
+              var before = lineB.slice(0, matchIndex);
+              var matched = lineB.slice(matchIndex, matchIndex + underlineWord.length);
+              var after = lineB.slice(matchIndex + underlineWord.length);
+              if (before) lineBInner.appendChild(document.createTextNode(before));
+
+              var wrap = document.createElement("span");
+              wrap.className = "ls-ul-wrap";
+              wrap.appendChild(document.createTextNode(matched));
+              underlineEl = document.createElement("span");
+              underlineEl.className = "ls-underline";
+              underlineEl.setAttribute("aria-hidden", "true");
+              // style.background, not a class: var() resolves at point of use.
+              underlineEl.style.background = accentColors[accent];
+              wrap.appendChild(underlineEl);
+              lineBInner.appendChild(wrap);
+              if (after) lineBInner.appendChild(document.createTextNode(after));
+            } else {
+              lineBInner.textContent = lineB;
+            }
+            stage.setAttribute("aria-label", lineA + " " + lineB);
+
+            // Deterministic character-count fit against the longer line; both
+            // lines are nowrap, so the fit keeps them inside the stage.
+            var characters = Math.max(1, Array.from(lineA).length, Array.from(lineB).length);
+            var fitted = Math.max(3.4, Math.min(9, 168 / characters));
+            root.style.setProperty("--ls-font-size", "min(" + fitted.toFixed(3) + "cqw, 16cqh)");
+
+            // RETIME RANGE: fixed phases; HOLD is the only elastic span.
+            var IN_A_BASE = 0.5;
+            var EXIT_A_BASE = 0.35;
+            var LAG_BASE = 0.22; // line_b starts this long after the beat
+            var IN_B_BASE = 0.5;
+            var UL_BEAT_BASE = 0.15;
+            var UL_BASE = underlineEl ? 0.45 : 0;
+            var OUT_BASE = exit === "none" ? 0 : 0.45;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "3.5"));
+            var swapSpanBase = LAG_BASE + IN_B_BASE;
+            var ulSpanBase = underlineEl ? UL_BEAT_BASE + UL_BASE : 0;
+            var totalBase = IN_A_BASE + swapSpanBase + ulSpanBase + OUT_BASE;
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN_A = IN_A_BASE * scale;
+            var EXIT_A = EXIT_A_BASE * scale;
+            var LAG = LAG_BASE * scale;
+            var IN_B = IN_B_BASE * scale;
+            var UL_BEAT = UL_BEAT_BASE * scale;
+            var UL = UL_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var OUT_START = duration - OUT;
+
+            var swapAtRaw = Number(vars.swap_at);
+            var swapAt = Number.isFinite(swapAtRaw) ? Math.max(0, swapAtRaw) : 1.5;
+            // line_a fully arrives before the beat; the swap and the
+            // underline always complete before the exit begins.
+            swapAt = Math.min(swapAt, Math.max(IN_A, OUT_START - (LAG + IN_B + UL_BEAT + UL)));
+            swapAt = Math.max(swapAt, IN_A);
+            var landB = swapAt + LAG + IN_B;
+
+            gsap.set(lineBEl, { yPercent: 115 });
+            if (underlineEl) gsap.set(underlineEl, { scaleX: 0 });
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: line_a enters bottom-up through the mask. One move.
+            tl.fromTo(
+              lineAEl,
+              { yPercent: 115 },
+              { yPercent: 0, duration: IN_A, ease: "power4.out" },
+              0,
+            );
+
+            // SWAP: the beat replacement. line_a exits up through the mask as
+            // line_b slides in bottom-up. Single restrained slam, smooth ease.
+            tl.fromTo(
+              lineAEl,
+              { yPercent: 0 },
+              { yPercent: -115, duration: EXIT_A, ease: "power2.in", immediateRender: false },
+              swapAt,
+            );
+            tl.fromTo(
+              lineBEl,
+              { yPercent: 115 },
+              { yPercent: 0, duration: IN_B, ease: "power4.out" },
+              swapAt + LAG,
+            );
+
+            // UNDERLINE: accent bar draws left to right after line_b lands.
+            if (underlineEl) {
+              tl.fromTo(
+                underlineEl,
+                { scaleX: 0 },
+                { scaleX: 1, duration: UL, ease: "power2.out" },
+                landB + UL_BEAT,
+              );
+            }
+
+            // HOLD: completely still.
+
+            // OUT: optional departure; exit none holds until the frame cuts.
+            if (exit === "fade") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "up") {
+              tl.to(stage, { opacity: 0, y: "-7cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/line-swap/registry-item.json b/registry/components/line-swap/registry-item.json
new file mode 100644
index 0000000000..6f9a06a647
--- /dev/null
+++ b/registry/components/line-swap/registry-item.json
@@ -0,0 +1,83 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "line-swap",
+  "type": "hyperframes:component",
+  "title": "Line Swap",
+  "description": "A masked full-line beat replacement: line A holds center then exits up through an overflow-hidden mask as line B enters bottom-up on the same beat, with an optional accent underline drawing beneath one word of line B.",
+  "tags": ["motion-primitive", "text-effects", "swap", "beat", "deterministic"],
+  "jobs": ["emphasize"],
+  "family": "text-effects",
+  "profile": "beat-swap",
+  "evidence": "Wave J2-5: generalizes flagship frame 01, the overflow-hidden mask slot with a single restrained beat replacement and a scaleX underline draw",
+  "syncPoints": [{ "id": "line-swap-beat", "phase": "in", "offset": 1.5 }],
+  "files": [
+    {
+      "path": "line-swap.html",
+      "target": "compositions/components/line-swap.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "line_a",
+      "type": "string",
+      "role": "content",
+      "label": "Line A",
+      "description": "First line; holds center inside the mask, then exits up on the swap beat.",
+      "default": "Everyone promised you AI."
+    },
+    {
+      "id": "line_b",
+      "type": "string",
+      "role": "content",
+      "label": "Line B",
+      "description": "Replacement line; enters bottom-up on the swap beat and holds.",
+      "default": "Almost nobody promised you control."
+    },
+    {
+      "id": "swap_at",
+      "type": "number",
+      "role": "timing",
+      "label": "Swap at",
+      "description": "Second (from mount start) of the beat replacement. Clamped so the swap and underline complete before any exit.",
+      "default": 1.5,
+      "min": 0,
+      "step": 0.1,
+      "unit": "s"
+    },
+    {
+      "id": "underline_word",
+      "type": "string",
+      "role": "content",
+      "label": "Underline word",
+      "description": "First case-insensitive substring match in line B gets the accent underline after landing. Empty disables it.",
+      "default": "control"
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Underline color from the contract token map.",
+      "default": "green",
+      "options": [
+        { "value": "green", "label": "Green" },
+        { "value": "blue", "label": "Blue" },
+        { "value": "violet", "label": "Violet" }
+      ]
+    },
+    {
+      "id": "exit",
+      "type": "enum",
+      "role": "timing",
+      "label": "Exit",
+      "description": "Optional departure. Default none: the landed line holds until the frame cuts.",
+      "default": "none",
+      "options": [
+        { "value": "none", "label": "None" },
+        { "value": "fade", "label": "Fade" },
+        { "value": "up", "label": "Up" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/locked-nucleus-orbit/demo.html b/registry/components/locked-nucleus-orbit/demo.html
new file mode 100644
index 0000000000..f6e3da3074
--- /dev/null
+++ b/registry/components/locked-nucleus-orbit/demo.html
@@ -0,0 +1,84 @@
+<!doctype html>
+<!--
+  locked-nucleus-orbit demo. This standalone composition mounts the primitive
+  with non-default values and gives it a definite elastic host box.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Locked Nucleus Orbit Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0b0c0e;
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --surface: #171923;
+        --border: #3f4250;
+        --font-body: Inter, system-ui, sans-serif;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 50%, #171923 0%, #0b0c0e 68%);
+      }
+
+      .mount-card {
+        width: 72%;
+        height: 68%;
+        left: 14%;
+        top: 16%;
+        overflow: hidden;
+        container-type: size;
+        border: 1px solid rgba(167, 139, 250, 0.2);
+        border-radius: 32px;
+        background: color-mix(in srgb, #171923 84%, transparent);
+        box-shadow: 0 40px 100px rgba(0, 0, 0, 0.45);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="locked-nucleus-orbit-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="locked-nucleus-orbit-mount"
+        class="mount-card clip"
+        data-composition-id="locked-nucleus-orbit"
+        data-composition-src="./locked-nucleus-orbit.html"
+        data-variable-values='{"label":"anchor","accent":"violet","satellites":6}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="1382"
+        data-height="734"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["locked-nucleus-orbit-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/locked-nucleus-orbit/locked-nucleus-orbit.html b/registry/components/locked-nucleus-orbit/locked-nucleus-orbit.html
new file mode 100644
index 0000000000..05ca372d79
--- /dev/null
+++ b/registry/components/locked-nucleus-orbit/locked-nucleus-orbit.html
@@ -0,0 +1,353 @@
+<!doctype html>
+<!--
+  locked-nucleus-orbit: HyperFrames video primitive (intros / reveals / orbit)
+
+  One nucleus stays dead center for the full composition. Satellite rings and
+  copy chips fade in while orbiting on deterministic index-based phases, then
+  decelerate into a composed lockup. The nucleus is never a GSAP target.
+
+  Variables:
+    - label (string, default "core"): text inside the fixed nucleus.
+    - accent (green | blue | violet, default green): active color.
+    - satellites (number, 3 to 6, default 4): visible satellite count.
+
+  Envelope (fixed IN and ORBIT, elastic HOLD, no OUT):
+    IN_BASE    = 0.45s, rings and chips fade in along their orbital arcs
+    ORBIT_BASE = 1.75s, satellites decelerate into their final phases
+    HOLD       = max(0, D - (IN + ORBIT)), only ring opacity breathes
+    OUT        = 0s, the composed lockup is the final state
+    If D is shorter than IN_BASE + ORBIT_BASE, IN and ORBIT compress together.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, has no data-width or data-height, and registers one paused timeline
+  under the hardcoded locked-nucleus-orbit id.
+-->
+<html
+  lang="en"
+  data-composition-id="locked-nucleus-orbit"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "label", "type": "string", "role": "content", "label": "Nucleus label", "description": "Text displayed inside the fixed center nucleus.", "default": "core" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Color used by the nucleus, rings, and satellite markers.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "satellites", "type": "number", "role": "layout", "label": "Satellites", "description": "Number of orbiting copy chips.", "default": 4, "min": 3, "max": 6, "step": 1 }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Locked Nucleus Orbit</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="locked-nucleus-orbit" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            background: var(--bg, #0b0c0e);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .lno-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+          }
+
+          .lno-field {
+            position: absolute;
+            inset: 0;
+          }
+
+          .lno-ring {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            width: var(--lno-size);
+            aspect-ratio: 1;
+            border: 0.12cqmin solid color-mix(in srgb, var(--lno-accent) 34%, transparent);
+            border-radius: 50%;
+            transform: translate(-50%, -50%);
+            transform-origin: 50% 50%;
+            box-shadow: inset 0 0 3cqmin color-mix(in srgb, var(--lno-accent) 5%, transparent);
+            opacity: 0;
+          }
+
+          .lno-ring:nth-child(1) {
+            --lno-size: 46cqmin;
+          }
+
+          .lno-ring:nth-child(2) {
+            --lno-size: 58cqmin;
+          }
+
+          .lno-ring:nth-child(3) {
+            --lno-size: 70cqmin;
+          }
+
+          .lno-nucleus {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            width: 15cqmin;
+            aspect-ratio: 1;
+            display: grid;
+            place-items: center;
+            transform: translate(-50%, -50%);
+            border: 0.2cqmin solid color-mix(in srgb, var(--lno-accent) 68%, white 16%);
+            border-radius: 50%;
+            background: color-mix(in srgb, var(--surface, #172033) 86%, var(--lno-accent) 14%);
+            box-shadow:
+              0 0 2.8cqmin color-mix(in srgb, var(--lno-accent) 38%, transparent),
+              inset 0 0 2.2cqmin color-mix(in srgb, var(--lno-accent) 18%, transparent);
+            z-index: 3;
+          }
+
+          .lno-nucleus::before {
+            content: "";
+            position: absolute;
+            width: 2.4cqmin;
+            aspect-ratio: 1;
+            top: 2.5cqmin;
+            border-radius: 50%;
+            background: var(--lno-accent);
+            box-shadow: 0 0 1.8cqmin color-mix(in srgb, var(--lno-accent) 72%, transparent);
+          }
+
+          .lno-nucleus-label {
+            max-width: 11cqmin;
+            margin-top: 3.1cqmin;
+            overflow: hidden;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
+            font-size: clamp(9px, 2cqmin, 20px);
+            font-weight: 700;
+            letter-spacing: 0.08em;
+            line-height: 1;
+            text-overflow: ellipsis;
+            text-transform: uppercase;
+            white-space: nowrap;
+          }
+
+          .lno-arm {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            width: 0;
+            height: 0;
+            transform-origin: 0 0;
+          }
+
+          .lno-anchor {
+            position: absolute;
+            left: var(--lno-radius);
+            top: 0;
+            transform: translate(-50%, -50%);
+          }
+
+          .lno-chip {
+            min-width: 12cqmin;
+            max-width: 22cqmin;
+            min-height: 5.2cqmin;
+            display: flex;
+            align-items: center;
+            gap: 1.25cqmin;
+            padding: 1.1cqmin 1.8cqmin;
+            border: 0.12cqmin solid
+              color-mix(in srgb, var(--lno-accent) 48%, var(--border, #334155));
+            border-radius: 999px;
+            background: color-mix(in srgb, var(--surface, #172033) 90%, transparent);
+            box-shadow: 0 1.2cqmin 3.6cqmin color-mix(in srgb, var(--bg, #0b0c0e) 60%, transparent);
+            opacity: 0;
+            will-change: transform, opacity;
+          }
+
+          .lno-marker {
+            flex: 0 0 auto;
+            width: 2.4cqmin;
+            aspect-ratio: 1;
+            border: 0.32cqmin solid var(--lno-accent);
+            border-radius: 50%;
+            box-shadow: 0 0 1.4cqmin color-mix(in srgb, var(--lno-accent) 56%, transparent);
+          }
+
+          .lno-copy {
+            overflow: hidden;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
+            font-size: clamp(8px, 1.8cqmin, 18px);
+            font-weight: 650;
+            letter-spacing: 0.08em;
+            line-height: 1;
+            text-overflow: ellipsis;
+            text-transform: uppercase;
+            white-space: nowrap;
+          }
+        </style>
+
+        <div
+          id="locked-nucleus-orbit-clip"
+          class="lno-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="lno-field">
+            <div class="lno-ring" aria-hidden="true"></div>
+            <div class="lno-ring" aria-hidden="true"></div>
+            <div class="lno-ring" aria-hidden="true"></div>
+            <div class="lno-satellites"></div>
+            <div class="lno-nucleus">
+              <span class="lno-nucleus-label"></span>
+            </div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var label = root.querySelector(".lno-nucleus-label");
+            var satelliteLayer = root.querySelector(".lno-satellites");
+            var rings = root.querySelectorAll(".lno-ring");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var accentColors = {
+              green: "var(--brand, #34d399)",
+              blue: "var(--accent, #38bdf8)",
+              violet: "var(--accent-2, #a78bfa)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var countValue = Number(vars.satellites);
+            var satelliteCount =
+              vars.satellites != null && Number.isFinite(countValue)
+                ? Math.max(3, Math.min(6, Math.round(countValue)))
+                : 4;
+            var labelText = vars.label == null ? "core" : String(vars.label);
+            var copy = ["signal", "motion", "frames", "output", "sync", "lock"];
+            var radii = [23, 29, 35];
+
+            root.style.setProperty("--lno-accent", accentColors[accent]);
+            label.textContent = labelText;
+
+            var satellites = [];
+            for (var index = 0; index < satelliteCount; index += 1) {
+              var arm = document.createElement("div");
+              var anchor = document.createElement("div");
+              var chip = document.createElement("div");
+              var marker = document.createElement("span");
+              var chipCopy = document.createElement("span");
+
+              arm.className = "lno-arm";
+              anchor.className = "lno-anchor";
+              chip.className = "lno-chip";
+              marker.className = "lno-marker";
+              chipCopy.className = "lno-copy";
+              arm.style.setProperty("--lno-radius", radii[index % radii.length] + "cqmin");
+              chipCopy.textContent = copy[index];
+
+              chip.appendChild(marker);
+              chip.appendChild(chipCopy);
+              anchor.appendChild(chip);
+              arm.appendChild(anchor);
+              satelliteLayer.appendChild(arm);
+
+              var finalPhase = -90 + (360 * index) / satelliteCount;
+              var travel = 210 + (index % 3) * 70;
+              satellites.push({
+                arm: arm,
+                chip: chip,
+                startPhase: finalPhase - travel,
+                finalPhase: finalPhase,
+              });
+            }
+
+            var IN_BASE = 0.45;
+            var ORBIT_BASE = 1.75;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var motionBase = IN_BASE + ORBIT_BASE;
+            var motionScale = duration < motionBase ? duration / motionBase : 1;
+            var IN = IN_BASE * motionScale;
+            var ORBIT = ORBIT_BASE * motionScale;
+            var MOTION = IN + ORBIT;
+            var HOLD = Math.max(0, duration - MOTION);
+            var fadeStagger = Math.min(0.07, IN / (satelliteCount * 2));
+            var fadeDuration = Math.max(0.001, IN - fadeStagger * (satelliteCount - 1));
+
+            gsap.set(rings, { opacity: 0, scale: 0.86 });
+            satellites.forEach(function (satellite) {
+              gsap.set(satellite.arm, { rotation: satellite.startPhase });
+              gsap.set(satellite.chip, {
+                opacity: 0,
+                rotation: -satellite.startPhase,
+                scale: 0.82,
+              });
+            });
+
+            var tl = gsap.timeline({ paused: true });
+
+            tl.to(rings, { opacity: 0.38, scale: 1, duration: IN, ease: "power2.out" }, 0);
+
+            satellites.forEach(function (satellite, index) {
+              tl.to(
+                satellite.arm,
+                { rotation: satellite.finalPhase, duration: MOTION, ease: "power2.out" },
+                0,
+              );
+              tl.to(
+                satellite.chip,
+                { rotation: -satellite.finalPhase, duration: MOTION, ease: "power2.out" },
+                0,
+              );
+              tl.to(
+                satellite.chip,
+                {
+                  opacity: 1,
+                  scale: 1,
+                  duration: fadeDuration,
+                  ease: "back.out(1.7)",
+                },
+                index * fadeStagger,
+              );
+            });
+
+            if (HOLD > 0.2) {
+              tl.to(
+                rings,
+                {
+                  opacity: 0.5,
+                  duration: HOLD / 2,
+                  ease: "sine.inOut",
+                  yoyo: true,
+                  repeat: 1,
+                },
+                MOTION,
+              );
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["locked-nucleus-orbit"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/locked-nucleus-orbit/registry-item.json b/registry/components/locked-nucleus-orbit/registry-item.json
new file mode 100644
index 0000000000..742305c879
--- /dev/null
+++ b/registry/components/locked-nucleus-orbit/registry-item.json
@@ -0,0 +1,53 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "locked-nucleus-orbit",
+  "type": "hyperframes:component",
+  "title": "Locked Nucleus Orbit",
+  "description": "A fixed center nucleus anchors deterministic satellite orbits that settle into a composed lockup.",
+  "tags": ["motion-primitive", "intro", "reveal", "orbit", "lockup", "deterministic"],
+  "jobs": ["reveal"],
+  "family": "effects",
+  "profile": "orbit",
+  "evidence": "Wave H U31 locked-nucleus-orbit, inspired by fixed-center orbital lockups",
+  "files": [
+    {
+      "path": "locked-nucleus-orbit.html",
+      "target": "compositions/components/locked-nucleus-orbit.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "label",
+      "type": "string",
+      "role": "content",
+      "label": "Nucleus label",
+      "description": "Text displayed inside the fixed center nucleus.",
+      "default": "core"
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Color used by the nucleus, rings, and satellite markers.",
+      "default": "green",
+      "options": [
+        { "value": "green", "label": "Green" },
+        { "value": "blue", "label": "Blue" },
+        { "value": "violet", "label": "Violet" }
+      ]
+    },
+    {
+      "id": "satellites",
+      "type": "number",
+      "role": "layout",
+      "label": "Satellites",
+      "description": "Number of orbiting copy chips.",
+      "default": 4,
+      "min": 3,
+      "max": 6,
+      "step": 1
+    }
+  ]
+}
diff --git a/registry/components/logo-brand-close/README.md b/registry/components/logo-brand-close/README.md
new file mode 100644
index 0000000000..368a57b3b8
--- /dev/null
+++ b/registry/components/logo-brand-close/README.md
@@ -0,0 +1,36 @@
+# logo-brand-close
+
+The brand close that ends films. The wordmark lands at display scale (a chars-aware fit sizes it to roughly three quarters of the frame width), letters cascade left to right (per-letter fade plus rise with a long expo tail) while the whole wordmark settles from a slightly larger scale, the accent brand period arrives last with a decisive pop, a readable tagline settles beneath, a wide-tracked mono URL breathes in below, then the finished identity holds dead still to the end.
+
+Distinct job from `cta-close`: identity, not action. No button, no cursor, no ask. If the film should end on an action, use `cta-close`; if it should end on who made it, use this.
+
+## Variables
+
+| Variable   | Type   | Default                     | Notes                                                                                                                   |
+| ---------- | ------ | --------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
+| `wordmark` | string | `HYPERFRAMES`               | Letters cascade individually; a brand period is appended in accent (an existing trailing `.` takes the accent instead). |
+| `tagline`  | string | `Write HTML. Render video.` | Settles beneath the wordmark. Empty string hides the line.                                                              |
+| `url`      | string | `hyperframes.heygen.com`    | Mono, wide-tracked. Empty string hides the line.                                                                        |
+| `accent`   | enum   | `green`                     | `green` maps to `--brand`, `blue` to `--accent`, `violet` to `--accent-2`. Colors the brand period.                     |
+| `exit`     | enum   | `none`                      | `none`, `fade`, or `up`. This is a film ender; the default hold runs to the last frame.                                 |
+
+## Envelope
+
+Authored at 4s. Fixed IN with elastic HOLD; OUT exists only when `exit` is not `none`.
+
+- IN_BASE = 2.6s: letter cascade (1.15s rise per letter, 0.7s stagger spread, `expo.out`) under a 2.4s whole-wordmark scale settle (1.04 to 1), accent period pop at 0.95s (`back.out(1.8)`), tagline settle at 1.35s, URL fade plus tracking settle at 1.7s.
+- HOLD = `max(0, D - IN - OUT)`: completely still, no drift, no breath.
+- OUT_BASE = 0.5s only for `exit: fade` (opacity) or `exit: up` (opacity plus rise); otherwise 0.
+- Shorter durations compress IN and OUT proportionally. The timeline is never time-scaled.
+
+Sync point: `lockup-settled` at 2.6s (end of IN at authored duration).
+
+## Scale
+
+- Wordmark: chars-aware fit targeting ~76cqw of set width (a one-shot 100px probe measures the real font's em ratio; a per-glyph advance table is the fallback), capped at 40cqh for short, wide mounts.
+- Tagline: `min(3.4cqw, 5.4cqmin)`, a clearly readable secondary scale.
+- URL: `min(2.4cqw, 3.2cqmin)` mono at 0.28em tracking, legible at 1080p even inside a mounted card.
+
+## Mount contract
+
+Template-wrapped sub-composition. `#root` fills the host box, establishes the container query basis (`container-type: size`, `cqw`/`cqh` units), carries no `data-width`/`data-height`, and registers one paused GSAP timeline under the literal `logo-brand-close` key on `window.__timelines`. Consumes the contract tokens (`--bg`, `--fg`, `--muted`, `--brand`, `--accent`, `--accent-2`, `--font-display`, `--font-body`, `--font-mono`, `--space-2`) at point of use with exact-value fallbacks. Deterministic and seek-safe.
diff --git a/registry/components/logo-brand-close/demo.html b/registry/components/logo-brand-close/demo.html
new file mode 100644
index 0000000000..09bfab2c70
--- /dev/null
+++ b/registry/components/logo-brand-close/demo.html
@@ -0,0 +1,98 @@
+<!doctype html>
+<!--
+  logo-brand-close demo. Full-bleed mount on the light editorial token set:
+  the brand close owns the whole 1920x1080 frame, proving the display-scale
+  wordmark, readable tagline, and mono url land with end-card presence.
+  Non-default text and a violet accent prove the variable path.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>logo-brand-close Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #e9e1d2);
+      }
+
+      #root {
+        --bg: #e9e1d2;
+        --fg: #202725;
+        --muted: #6c746f;
+        --surface: #f8f1e5;
+        --border: #c9bfad;
+        --brand: #246b63;
+        --accent: #31776f;
+        --accent-2: #8a6549;
+        --font-display: Georgia, "Times New Roman", serif;
+        --font-body: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
+        --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
+        --radius: 0.9cqmin;
+        --space-1: 1.1cqmin;
+        --space-2: 2.2cqmin;
+        --space-3: 3.8cqmin;
+        --dur-beat: 0.48s;
+        --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
+        --ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1);
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(
+          ellipse at 50% 42%,
+          var(--surface, #f8f1e5) 0%,
+          var(--bg, #e9e1d2) 72%
+        );
+      }
+
+      .mount-stage {
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        container-type: size;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="logo-brand-close-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="logo-brand-close-mount"
+        class="mount-stage clip"
+        data-composition-id="logo-brand-close"
+        data-composition-src="./logo-brand-close.html"
+        data-variable-values='{"wordmark":"FIELDNOTE","tagline":"Slow journalism for fast times.","url":"fieldnote.press","accent":"violet"}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="1920"
+        data-height="1080"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["logo-brand-close-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/logo-brand-close/logo-brand-close.html b/registry/components/logo-brand-close/logo-brand-close.html
new file mode 100644
index 0000000000..1919e352bd
--- /dev/null
+++ b/registry/components/logo-brand-close/logo-brand-close.html
@@ -0,0 +1,367 @@
+<!doctype html>
+<!--
+  logo-brand-close: HyperFrames video primitive (brand close)
+
+  The identity close that ends films. The wordmark lands at display scale,
+  a chars-aware fit sizing it to roughly three quarters of the frame width.
+  Letters cascade left to right (per-letter fade plus rise with a long
+  expo tail) while the whole wordmark settles from a slightly larger scale,
+  the accent brand period arrives last with a decisive pop, a readable
+  tagline settles beneath, a wide-tracked mono URL breathes in below, then
+  the finished lockup holds dead still to the end. Distinct from cta-close:
+  identity, not action. No button, no cursor.
+
+  Variables:
+    - wordmark (string): the brand name that cascades into place.
+    - tagline (string): optional line beneath the wordmark; empty hides it.
+    - url (string): optional mono URL line; empty hides it.
+    - accent (green | blue | violet): color of the brand period.
+    - exit (none | fade | up, default none): films end on the hold.
+
+  Envelope, fixed IN with elastic HOLD only (OUT exists only when exit is
+  not none):
+    IN_BASE  = 2.6s, letter cascade + scale settle, period pop, tagline
+               settle, URL tracking settle
+    HOLD     = max(0, D - IN - OUT), completely still
+    OUT_BASE = 0.5s only when exit is fade or up, otherwise 0
+    If D is shorter than IN_BASE + OUT_BASE, both compress together.
+    The timeline is never time-scaled.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, has no data-width or data-height,
+  and registers one paused timeline under the literal logo-brand-close key.
+-->
+<html
+  lang="en"
+  data-composition-id="logo-brand-close"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "wordmark", "type": "string", "role": "content", "label": "Wordmark", "description": "Brand name whose letters cascade into the centered lockup.", "default": "HYPERFRAMES" },
+    { "id": "tagline", "type": "string", "role": "content", "label": "Tagline", "description": "Optional tagline that settles beneath the wordmark. Empty hides it.", "default": "Write HTML. Render video." },
+    { "id": "url", "type": "string", "role": "content", "label": "URL", "description": "Optional mono URL line beneath the tagline. Empty hides it.", "default": "hyperframes.heygen.com" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Contract color used by the brand period at the end of the wordmark.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "style", "label": "Exit", "description": "Optional departure. Films end on the still hold, so the default is none.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Logo Brand Close</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="logo-brand-close" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .lbc-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+            background: var(--bg, #0b0c0e);
+          }
+
+          .lbc-lockup {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            width: 100cqw;
+            text-align: center;
+            will-change: transform, opacity;
+          }
+
+          /* Display scale: the JS chars-aware fit targets ~76cqw of set
+             width; 40cqh caps it in short, wide mounts. */
+          .lbc-wordmark {
+            display: flex;
+            align-items: baseline;
+            justify-content: center;
+            margin: 0;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: var(--lbc-wordmark-size, min(10.5cqw, 40cqh));
+            font-weight: 600;
+            line-height: 1.04;
+            letter-spacing: -0.035em;
+            white-space: nowrap;
+            will-change: transform;
+          }
+
+          .lbc-letter {
+            display: inline-block;
+            flex: 0 0 auto;
+            will-change: transform, opacity;
+          }
+
+          .lbc-space {
+            width: 0.34em;
+          }
+
+          .lbc-period {
+            color: var(--lbc-accent);
+          }
+
+          .lbc-tagline {
+            max-width: 88cqw;
+            margin: var(--space-2, 3cqmin) 0 0;
+            color: var(--fg, #f8fafc);
+            font-size: min(3.4cqw, 5.4cqmin);
+            font-weight: 500;
+            line-height: 1.3;
+            letter-spacing: 0.01em;
+            will-change: transform, opacity;
+          }
+
+          .lbc-url {
+            margin: var(--space-3, 4.6cqmin) 0 0;
+            color: var(--muted, #94a3b8);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            font-size: min(2.4cqw, 3.2cqmin);
+            font-weight: 500;
+            line-height: 1;
+            letter-spacing: 0.28em;
+            will-change: opacity;
+          }
+        </style>
+
+        <div
+          id="logo-brand-close-clip"
+          class="lbc-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="lbc-lockup">
+            <h2 class="lbc-wordmark"></h2>
+            <p class="lbc-tagline"></p>
+            <p class="lbc-url"></p>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var lockup = root.querySelector(".lbc-lockup");
+            var wordmarkElement = root.querySelector(".lbc-wordmark");
+            var taglineElement = root.querySelector(".lbc-tagline");
+            var urlElement = root.querySelector(".lbc-url");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var wordmark =
+              vars.wordmark == null
+                ? "HYPERFRAMES"
+                : String(vars.wordmark).trim().replace(/\s+/g, " ");
+            if (wordmark.length === 0) wordmark = "HYPERFRAMES";
+            var tagline =
+              vars.tagline == null
+                ? "Write HTML. Render video."
+                : String(vars.tagline).trim().replace(/\s+/g, " ");
+            var url = vars.url == null ? "hyperframes.heygen.com" : String(vars.url).trim();
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            root.style.setProperty("--lbc-accent", accentColors[accent]);
+            wordmarkElement.setAttribute("aria-label", wordmark);
+            wordmarkElement.setAttribute("role", "img");
+
+            // The brand period: an accent dot ends the wordmark. If the
+            // wordmark already ends with "." that period takes the accent
+            // instead of appending a second one.
+            var characters = Array.from(wordmark);
+            if (characters[characters.length - 1] !== ".") characters.push(".");
+
+            var letters = characters.map(function (character, index) {
+              var letter = document.createElement("span");
+              letter.id = "logo-brand-close-letter-" + index;
+              letter.className = "lbc-letter";
+              if (/\s/.test(character)) {
+                letter.classList.add("lbc-space");
+                letter.textContent = " ";
+              } else {
+                letter.textContent = character;
+              }
+              if (index === characters.length - 1) letter.classList.add("lbc-period");
+              letter.setAttribute("aria-hidden", "true");
+              wordmarkElement.appendChild(letter);
+              return letter;
+            });
+            var periodLetter = letters[letters.length - 1];
+            var cascadeLetters = letters.slice(0, -1);
+
+            // Deterministic chars-aware fit: probe the set width at a fixed
+            // 100px font (letter-spacing rides in em, so the em ratio is a
+            // pure font metric), then size the wordmark so it lands at
+            // ~76cqw. The 40cqh term caps it in short, wide mounts. If the
+            // probe cannot measure (detached render), fall back to a
+            // per-glyph advance estimate.
+            wordmarkElement.style.fontSize = "100px";
+            var probedWidth = wordmarkElement.getBoundingClientRect().width;
+            wordmarkElement.style.fontSize = "";
+            var setWidthEm;
+            if (probedWidth > 0) {
+              setWidthEm = probedWidth / 100;
+            } else {
+              setWidthEm = characters.reduce(function (total, character) {
+                if (/\s/.test(character)) return total + 0.34;
+                if (/[.,:;!'’|]/.test(character)) return total + 0.3;
+                if (/[Iijlftr]/.test(character)) return total + 0.42;
+                if (/[MWmw@]/.test(character)) return total + 0.92;
+                return total + 0.64;
+              }, 0);
+              setWidthEm -= characters.length * 0.035;
+            }
+            setWidthEm = Math.max(0.3, setWidthEm);
+            var wordmarkSize = 76 / setWidthEm;
+            root.style.setProperty(
+              "--lbc-wordmark-size",
+              "min(" + wordmarkSize.toFixed(3) + "cqw, 40cqh)",
+            );
+
+            if (tagline.length === 0) taglineElement.remove();
+            else taglineElement.textContent = tagline;
+            if (url.length === 0) urlElement.remove();
+            else urlElement.textContent = url;
+
+            var IN_BASE = 2.6;
+            var OUT_BASE = exit === "none" ? 0 : 0.5;
+            var CASCADE_RISE_BASE = 1.15;
+            var CASCADE_STAGGER_BASE = 0.7;
+            var SETTLE_BASE = 2.4;
+            var PERIOD_AT_BASE = 0.95;
+            var PERIOD_DURATION_BASE = 0.9;
+            var TAGLINE_AT_BASE = 1.35;
+            var TAGLINE_DURATION_BASE = 0.9;
+            var URL_AT_BASE = 1.7;
+            var URL_DURATION_BASE = 0.85;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var totalBase = IN_BASE + OUT_BASE;
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var STAGGER = cascadeLetters.length > 1 ? CASCADE_STAGGER_BASE * scale : 0;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var OUT_START = IN + HOLD;
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: per-letter fade plus rise with a long expo tail, while the
+            // whole wordmark settles down from a slightly larger scale.
+            if (cascadeLetters.length > 0) {
+              tl.fromTo(
+                cascadeLetters,
+                { opacity: 0, y: "0.62em" },
+                {
+                  opacity: 1,
+                  y: "0em",
+                  duration: CASCADE_RISE_BASE * scale,
+                  stagger: { amount: STAGGER, from: "start" },
+                  ease: "expo.out",
+                },
+                0,
+              );
+            }
+
+            tl.fromTo(
+              wordmarkElement,
+              { scale: 1.04, transformOrigin: "50% 100%" },
+              { scale: 1, duration: SETTLE_BASE * scale, ease: "expo.out" },
+              0,
+            );
+
+            // The brand period lands last: a decisive accent pop.
+            tl.fromTo(
+              periodLetter,
+              { opacity: 0, scale: 0.2, y: "0.08em", transformOrigin: "50% 65%" },
+              {
+                opacity: 1,
+                scale: 1,
+                y: "0em",
+                duration: PERIOD_DURATION_BASE * scale,
+                ease: "back.out(1.8)",
+              },
+              PERIOD_AT_BASE * scale,
+            );
+
+            if (taglineElement.isConnected) {
+              tl.fromTo(
+                taglineElement,
+                { opacity: 0, y: "0.9em" },
+                {
+                  opacity: 1,
+                  y: "0em",
+                  duration: TAGLINE_DURATION_BASE * scale,
+                  ease: "power3.out",
+                },
+                TAGLINE_AT_BASE * scale,
+              );
+            }
+
+            if (urlElement.isConnected) {
+              tl.fromTo(
+                urlElement,
+                // scaleX, not letterSpacing: tracking is a layout property, so
+                // the browser snaps it to integer device pixels and the
+                // ease-out tail stutters under seek-by-frame capture. The
+                // widening reads the same and stays on the compositor.
+                { opacity: 0, scaleX: 1.06 },
+                {
+                  opacity: 1,
+                  scaleX: 1,
+                  duration: URL_DURATION_BASE * scale,
+                  ease: "power2.out",
+                },
+                URL_AT_BASE * scale,
+              );
+            }
+
+            // HOLD: dead still. No drift, no breath; the confidence is the
+            // stillness, and by default the film ends here.
+
+            if (exit === "fade") {
+              tl.to(lockup, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "up") {
+              tl.to(
+                lockup,
+                { opacity: 0, y: "-5cqh", duration: OUT, ease: "power2.in" },
+                OUT_START,
+              );
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["logo-brand-close"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/logo-brand-close/registry-item.json b/registry/components/logo-brand-close/registry-item.json
new file mode 100644
index 0000000000..5199fe1c51
--- /dev/null
+++ b/registry/components/logo-brand-close/registry-item.json
@@ -0,0 +1,72 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "logo-brand-close",
+  "type": "hyperframes:component",
+  "title": "Logo Brand Close",
+  "description": "A display-scale wordmark cascades letter by letter into a centered lockup, the accent brand period lands last, an optional tagline and wide-tracked mono URL settle beneath, and the finished identity holds dead still to the end of the film.",
+  "tags": ["motion-primitive", "typography", "brand", "logo", "end-card", "close"],
+  "jobs": ["celebrate"],
+  "family": "typography",
+  "profile": "holdable",
+  "evidence": "Wave J J1-4 logo-brand-close specification",
+  "syncPoints": [{ "id": "lockup-settled", "phase": "in", "offset": 2.6 }],
+  "files": [
+    {
+      "path": "logo-brand-close.html",
+      "target": "compositions/components/logo-brand-close.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "wordmark",
+      "type": "string",
+      "role": "content",
+      "label": "Wordmark",
+      "description": "Brand name whose letters cascade into the centered lockup.",
+      "default": "HYPERFRAMES"
+    },
+    {
+      "id": "tagline",
+      "type": "string",
+      "role": "content",
+      "label": "Tagline",
+      "description": "Optional tagline that settles beneath the wordmark. Empty hides it.",
+      "default": "Write HTML. Render video."
+    },
+    {
+      "id": "url",
+      "type": "string",
+      "role": "content",
+      "label": "URL",
+      "description": "Optional mono URL line beneath the tagline. Empty hides it.",
+      "default": "hyperframes.heygen.com"
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Contract color used by the brand period at the end of the wordmark.",
+      "default": "green",
+      "options": [
+        { "value": "green", "label": "Green" },
+        { "value": "blue", "label": "Blue" },
+        { "value": "violet", "label": "Violet" }
+      ]
+    },
+    {
+      "id": "exit",
+      "type": "enum",
+      "role": "style",
+      "label": "Exit",
+      "description": "Optional departure. Films end on the still hold, so the default is none.",
+      "default": "none",
+      "options": [
+        { "value": "none", "label": "None" },
+        { "value": "fade", "label": "Fade" },
+        { "value": "up", "label": "Up" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/logo-sting/demo.html b/registry/components/logo-sting/demo.html
new file mode 100644
index 0000000000..7bd61a81f1
--- /dev/null
+++ b/registry/components/logo-sting/demo.html
@@ -0,0 +1,78 @@
+<!doctype html>
+<!--
+  logo-sting demo. This standalone composition mounts logo-sting.html through
+  data-composition-src. Non-default values prove both variables flow through
+  the mount while the primitive remains sized by its host box.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Logo Sting Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0b0c0e;
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --font-display: Inter, system-ui, sans-serif;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0b0c0e;
+      }
+
+      .mount-card {
+        width: 76%;
+        height: 52%;
+        left: 12%;
+        top: 24%;
+        container-type: size;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="logo-sting-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="2.2"
+      data-fps="30"
+    >
+      <div
+        id="logo-sting-mount"
+        class="mount-card clip"
+        data-composition-id="logo-sting"
+        data-composition-src="./logo-sting.html"
+        data-variable-values='{"wordmark":"MOTION LAB","accent":"violet"}'
+        data-start="0"
+        data-duration="2.2"
+        data-track-index="0"
+        data-width="1459"
+        data-height="562"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["logo-sting-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/logo-sting/logo-sting.html b/registry/components/logo-sting/logo-sting.html
new file mode 100644
index 0000000000..6927d59835
--- /dev/null
+++ b/registry/components/logo-sting/logo-sting.html
@@ -0,0 +1,180 @@
+<!doctype html>
+<!--
+  logo-sting: HyperFrames video primitive (brand / impact / reveal)
+
+  Concept: a wordmark lands from scale 1.15 with the slam ease. Its impact
+  triggers one accent ring and exactly one frame of white, then the finished
+  lockup holds completely still.
+
+  Variables:
+    - wordmark (string, default "HYPERFRAMES"): the brand name.
+    - accent (green | blue | violet, default green): the ring color.
+
+  Envelope (fixed IN, elastic HOLD, no OUT, never timeScale):
+    IN_BASE = 0.95s. The wordmark lands at 0.55s, then the ring resolves.
+    HOLD = max(0, D - IN). This phase is deliberately dead still.
+    OUT = 0s. The final brand frame remains established through the end.
+    If D is shorter than IN_BASE, only IN compresses and HOLD becomes zero.
+
+  Mount contract: this template is cloned into a sized host. #root fills that
+  host, establishes the container query basis, and registers one paused GSAP
+  timeline under the hardcoded logo-sting key.
+-->
+<html
+  lang="en"
+  data-composition-id="logo-sting"
+  data-composition-duration="2.2"
+  data-composition-variables='[
+    { "id": "wordmark", "type": "string", "role": "content", "label": "Wordmark", "description": "Brand name displayed in the final lockup.", "default": "HYPERFRAMES" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Color of the single impact ring.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Logo Sting</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="logo-sting" data-duration="2.2" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            background: var(--bg, #0b0c0e);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .ls-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+          }
+
+          .ls-ring {
+            position: absolute;
+            z-index: 1;
+            width: min(42cqw, 72cqh);
+            aspect-ratio: 1;
+            border: min(0.34cqw, 0.62cqh) solid var(--ls-accent);
+            border-radius: 50%;
+            opacity: 0;
+            will-change: transform, opacity;
+          }
+
+          .ls-wordmark {
+            position: relative;
+            z-index: 2;
+            max-width: 90cqw;
+            color: var(--fg, #f8fafc);
+            font-size: min(10.5cqw, 18cqh);
+            font-weight: 850;
+            line-height: 0.9;
+            letter-spacing: -0.055em;
+            text-align: center;
+            white-space: nowrap;
+            transform-origin: 50% 50%;
+            will-change: transform;
+          }
+
+          .ls-flash {
+            position: absolute;
+            inset: 0;
+            z-index: 3;
+            background: #ffffff;
+            opacity: 0;
+          }
+        </style>
+
+        <div
+          id="logo-sting-clip"
+          class="ls-clip clip"
+          data-start="0"
+          data-duration="2.2"
+          data-track-index="0"
+        >
+          <div class="ls-ring" aria-hidden="true"></div>
+          <div class="ls-wordmark"></div>
+          <div class="ls-flash" aria-hidden="true"></div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var wordmark = root.querySelector(".ls-wordmark");
+            var ring = root.querySelector(".ls-ring");
+            var flash = root.querySelector(".ls-flash");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var accentColors = {
+              green: "var(--brand, #5df28b)",
+              blue: "var(--accent, #4da3ff)",
+              violet: "var(--accent-2, #a978ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var wordmarkText = vars.wordmark == null ? "HYPERFRAMES" : String(vars.wordmark);
+
+            wordmark.textContent = wordmarkText;
+            root.style.setProperty("--ls-accent", accentColors[accent]);
+
+            var IN_BASE = 0.95;
+            var IMPACT_BASE = 0.55;
+            var parsedDuration = parseFloat(root.dataset.duration);
+            var duration = Number.isFinite(parsedDuration) ? Math.max(0.001, parsedDuration) : 2.2;
+            var IN = Math.min(IN_BASE, duration);
+            var retime = IN / IN_BASE;
+            var IMPACT = IMPACT_BASE * retime;
+            var RING_DURATION = (IN_BASE - IMPACT_BASE) * retime;
+            var FLASH_FRAME = Math.min(1 / 30, RING_DURATION);
+            var HOLD = Math.max(0, duration - IN);
+
+            gsap.set(ring, { scale: 0.34, opacity: 0 });
+            gsap.set(flash, { opacity: 0 });
+
+            var tl = gsap.timeline({ paused: true });
+
+            tl.fromTo(
+              wordmark,
+              { scale: 1.15 },
+              { scale: 1, duration: IMPACT, ease: "expo.out" },
+              0,
+            );
+            tl.set(ring, { opacity: 0.92 }, IMPACT);
+            tl.to(
+              ring,
+              { scale: 2.4, opacity: 0, duration: RING_DURATION, ease: "power3.out" },
+              IMPACT,
+            );
+            tl.set(flash, { opacity: 1 }, IMPACT);
+            tl.set(flash, { opacity: 0 }, IMPACT + FLASH_FRAME);
+            tl.addLabel("hold", IN);
+            tl.addLabel("end", IN + HOLD);
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["logo-sting"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/logo-sting/registry-item.json b/registry/components/logo-sting/registry-item.json
new file mode 100644
index 0000000000..79e141db2a
--- /dev/null
+++ b/registry/components/logo-sting/registry-item.json
@@ -0,0 +1,43 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "logo-sting",
+  "type": "hyperframes:component",
+  "title": "Logo Sting",
+  "description": "A wordmark slams into its final scale, fires one accent ring and one white impact frame, then holds completely still.",
+  "tags": ["motion-primitive", "brand", "logo", "sting", "impact", "reveal"],
+  "jobs": ["reveal"],
+  "family": "brand",
+  "profile": "burst",
+  "evidence": "Video Primitives Wave F U15 logo-sting contract",
+  "syncPoints": [{ "id": "impact", "phase": "in", "offset": 0.55 }],
+  "files": [
+    {
+      "path": "logo-sting.html",
+      "target": "compositions/components/logo-sting.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "wordmark",
+      "type": "string",
+      "role": "content",
+      "label": "Wordmark",
+      "description": "Brand name displayed in the final lockup.",
+      "default": "HYPERFRAMES"
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Color of the single impact ring.",
+      "default": "green",
+      "options": [
+        { "value": "green", "label": "Green" },
+        { "value": "blue", "label": "Blue" },
+        { "value": "violet", "label": "Violet" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/logo-wall/demo.html b/registry/components/logo-wall/demo.html
new file mode 100644
index 0000000000..c57bdd630c
--- /dev/null
+++ b/registry/components/logo-wall/demo.html
@@ -0,0 +1,103 @@
+<!doctype html>
+<!--
+  logo-wall demo: standalone 1920x1080 host composition. It mounts the
+  primitive through data-composition-src into a definite card instead of
+  inlining markup or motion. Non-default rows, cols, and stagger values prove
+  that all public variables cross the mount boundary.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Logo Wall Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+
+      #root {
+        --bg: #080b13;
+        --fg: #f6f8fc;
+        --muted: #a7b0c1;
+        --surface: #151b29;
+        --border: #344057;
+        --brand: #7c9cff;
+        --accent: #86e5c5;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-body: Inter, system-ui, sans-serif;
+        --font-mono: ui-monospace, monospace;
+        --radius: 18px;
+        --space-1: 8px;
+        --space-2: 16px;
+        --space-3: 32px;
+        --dur-beat: 0.4s;
+        --ease-standard: cubic-bezier(0.215, 0.61, 0.355, 1);
+        --ease-emphasis: cubic-bezier(0.19, 1, 0.22, 1);
+        --ease-exit: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        display: grid;
+        place-items: center;
+        background: var(--bg);
+        color: var(--fg);
+        font-family: var(--font-body);
+      }
+
+      .mount-card {
+        width: 72%;
+        height: 72%;
+        left: 14%;
+        top: 14%;
+        overflow: hidden;
+        border: 1px solid var(--border);
+        border-radius: calc(var(--radius) * 1.5);
+        background: var(--surface);
+        box-shadow: 0 40px 100px color-mix(in srgb, var(--bg) 82%, transparent);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="logo-wall-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+      data-fps="30"
+    >
+      <div
+        id="logo-wall-mount"
+        class="mount-card clip"
+        data-composition-id="logo-wall"
+        data-composition-src="./logo-wall.html"
+        data-variable-values='{"rows":4,"cols":6,"stagger":75}'
+        data-start="0"
+        data-duration="5"
+        data-track-index="0"
+        data-width="1382"
+        data-height="778"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      // The mounted primitive owns all visible motion. This host registers only
+      // the empty paused timeline required for its own composition id.
+      window.__timelines = window.__timelines || {};
+      window.__timelines["logo-wall-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/logo-wall/logo-wall.html b/registry/components/logo-wall/logo-wall.html
new file mode 100644
index 0000000000..4536cbcfb3
--- /dev/null
+++ b/registry/components/logo-wall/logo-wall.html
@@ -0,0 +1,299 @@
+<!doctype html>
+<!--
+  logo-wall: HyperFrames video primitive (data / holdable / prove)
+
+  Concept: a trusted-by wall of placeholder lettermark logos assembles in DOM
+  order. Each cell fades and scales directly into its final grid slot with a
+  fixed per-cell delay. One mechanic, one job: prove trust through a collected
+  wall of customer marks.
+
+  Compiled-from evidence: consumer-sim fixture plus the grid-card-assemble
+  blueprint's Social_Proof logo-wall variant. The blueprint requires a dense
+  array to use short, slot-local entrances instead of a shared-center burst.
+
+  Use when: a scene needs a compact trusted-by beat without using real brand
+  assets or turning the wall into a feature-card showcase.
+
+  Variables (declared in data-composition-variables below):
+    - rows (number, default 3, range 2 to 4): visible logo rows.
+    - cols (number, default 5, range 3 to 6): visible logo columns.
+    - stagger (number, default 45, range 20 to 75 ms): fixed delay between
+      consecutive cell entrances.
+
+  Envelope (fixed IN/OUT, elastic HOLD only, never gsap.timeScale()):
+    IN_BASE  = 2.50s  ordered fade and scale assembly.
+    HOLD     = elastic = max(0, D - (IN_BASE + OUT_BASE)); deliberately still
+               so the completed evidence wall remains readable.
+    OUT_BASE = 0.50s  clean group fade.
+    If D is shorter than IN_BASE + OUT_BASE, IN and OUT scale down together so
+    IN + OUT equals D and HOLD equals 0. The index-based stagger scales only in
+    that compressed envelope.
+
+  Sync point: none. The proof is distributed across per-cell arrivals, so no
+  single fixed cue represents the assembly honestly.
+
+  Sound cue: none. A distributed wall assembly has no truthful single-frame
+  sound event, so this primitive does not dispatch hf:sfx.
+
+  Mount contract: this file is a mountable sub-composition. A host loads it via
+  data-composition-src, and the runtime clones only <template> contents. Styles,
+  markup, GSAP, and registration therefore live inside <template>. #root fills
+  the host with inset:0 and container-type:size and has no data-width or
+  data-height. The hardcoded id "logo-wall" matches the host id and timeline
+  key after mount flattening. Variables come from
+  window.__hyperframes.getVariables(), which merges declarations with host
+  data-variable-values overrides.
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "rows", "type": "number", "role": "layout", "label": "Rows", "description": "Number of logo rows in the wall.", "default": 3, "min": 2, "max": 4, "step": 1 },
+    { "id": "cols", "type": "number", "role": "layout", "label": "Columns", "description": "Number of logo columns in the wall.", "default": 5, "min": 3, "max": 6, "step": 1 },
+    { "id": "stagger", "type": "number", "role": "motion", "label": "Stagger", "description": "Delay between consecutive logo cell entrances.", "default": 45, "min": 20, "max": 75, "step": 1, "unit": "ms" }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Logo Wall</title>
+    <!-- Metadata only. The loader reads declarations from <html>, then
+         discards everything outside <template>. -->
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="logo-wall" data-start="0" data-duration="5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          /* Root fills the host box and consumes only the shared theme tokens.
+             Every internal dimension is relative to this size container. */
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            color: var(--fg, #f5f6f8);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+          }
+
+          .lw-clip {
+            width: 100%;
+            height: 100%;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+            background: var(--bg, #0b0c10);
+          }
+
+          .lw-stage {
+            width: 86cqw;
+            height: 82cqh;
+            display: grid;
+            grid-template-rows: auto minmax(0, 1fr);
+            gap: var(--space-3, 3cqh);
+            padding: var(--space-3, 3cqh);
+          }
+
+          .lw-heading {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: var(--space-2, 1.6cqh);
+            color: var(--muted, #8b8f9a);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: min(2.6cqw, 4.4cqh);
+            font-weight: 650;
+            letter-spacing: 0.08em;
+            line-height: 1;
+            text-transform: uppercase;
+          }
+
+          .lw-heading::before,
+          .lw-heading::after {
+            content: "";
+            width: 8cqw;
+            height: 0.14cqw;
+            background: var(--border, #262931);
+          }
+
+          /* EDIT ZONE: grid geometry. rows and cols are the sole owners of
+             track count. Spacing and surfaces remain theme-token driven. */
+          .lw-grid {
+            min-width: 0;
+            min-height: 0;
+            display: grid;
+            grid-template-columns: repeat(var(--lw-cols), minmax(0, 1fr));
+            grid-template-rows: repeat(var(--lw-rows), minmax(0, 1fr));
+            gap: var(--space-2, 1.6cqh);
+          }
+
+          .lw-cell {
+            min-width: 0;
+            min-height: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+            border: 0.14cqw solid var(--border, #262931);
+            border-radius: var(--radius, 2cqw);
+            background: var(--surface, #16181d);
+            box-shadow: 0 1.2cqh 3cqh color-mix(in srgb, var(--bg, #0b0c10) 58%, transparent);
+          }
+
+          .lw-mark {
+            display: grid;
+            place-items: center;
+            width: min(5.5cqw, 9.5cqh);
+            aspect-ratio: 1;
+            border-radius: calc(var(--radius, 2cqw) * 0.72);
+            background: color-mix(in srgb, var(--fg, #f5f6f8) 72%, transparent);
+            color: var(--bg, #0b0c10);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: min(2.2cqw, 4cqh);
+            font-weight: 800;
+            letter-spacing: -0.04em;
+            line-height: 1;
+          }
+        </style>
+
+        <div
+          id="logo-wall-clip"
+          class="lw-clip clip"
+          data-start="0"
+          data-duration="5"
+          data-track-index="0"
+        >
+          <section class="lw-stage" aria-label="Trusted by logo wall">
+            <div class="lw-heading">Trusted by teams</div>
+            <div class="lw-grid"></div>
+          </section>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var compositionId = "logo-wall";
+            var stage = root.querySelector(".lw-stage");
+            var grid = root.querySelector(".lw-grid");
+
+            // EDIT ZONE: the runtime variable table is read once. These
+            // clamped values own DOM count, grid tracks, and stagger timing.
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var rawRows = Number(vars.rows);
+            var rows = Number.isFinite(rawRows) ? Math.round(rawRows) : 3;
+            rows = Math.max(2, Math.min(4, rows));
+
+            var rawCols = Number(vars.cols);
+            var cols = Number.isFinite(rawCols) ? Math.round(rawCols) : 5;
+            cols = Math.max(3, Math.min(6, cols));
+
+            var rawStagger = Number(vars.stagger);
+            var staggerMs = Number.isFinite(rawStagger) ? rawStagger : 45;
+            staggerMs = Math.max(20, Math.min(75, staggerMs));
+
+            var lettermarks = [
+              "AX",
+              "BL",
+              "CY",
+              "DQ",
+              "EV",
+              "FK",
+              "GN",
+              "HT",
+              "IP",
+              "JR",
+              "KS",
+              "LU",
+              "MW",
+              "NX",
+              "OZ",
+              "PA",
+              "QC",
+              "RF",
+              "SG",
+              "TJ",
+              "VK",
+              "WL",
+              "XM",
+              "YN",
+            ];
+            var cellCount = rows * cols;
+            var fragment = document.createDocumentFragment();
+
+            for (var index = 0; index < cellCount; index += 1) {
+              var cell = document.createElement("div");
+              var mark = document.createElement("span");
+              cell.className = "lw-cell";
+              cell.setAttribute("aria-hidden", "true");
+              mark.className = "lw-mark";
+              mark.textContent = lettermarks[index];
+              cell.appendChild(mark);
+              fragment.appendChild(cell);
+            }
+
+            grid.replaceChildren(fragment);
+            grid.style.setProperty("--lw-rows", String(rows));
+            grid.style.setProperty("--lw-cols", String(cols));
+
+            var cells = root.querySelectorAll(".lw-cell");
+
+            // RETIME RANGE: the 2.50s IN fits the largest public wall of 24
+            // cells at the maximum 75ms stagger plus the 0.55s cell settle.
+            // HOLD alone absorbs longer host durations.
+            var IN_BASE = 2.5;
+            var OUT_BASE = 0.5;
+            var ASSEMBLE_START_BASE = 0.15;
+            var CELL_DURATION_BASE = 0.55;
+
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "5"));
+            var totalBase = IN_BASE + OUT_BASE;
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var OUT_START = IN + HOLD;
+            var ASSEMBLE_START = ASSEMBLE_START_BASE * scale;
+            var CELL_DURATION = CELL_DURATION_BASE * scale;
+            var STAGGER_SECONDS = (staggerMs / 1000) * scale;
+
+            var timeline = gsap.timeline({ paused: true });
+
+            // IN: deterministic DOM-order assembly. power2.out is the GSAP
+            // owner of the shared --ease-standard entrance token.
+            timeline.fromTo(
+              cells,
+              { opacity: 0, scale: 0.94 },
+              {
+                opacity: 1,
+                scale: 1,
+                duration: CELL_DURATION,
+                ease: "power2.out",
+                stagger: { each: STAGGER_SECONDS, from: "start" },
+              },
+              ASSEMBLE_START,
+            );
+
+            // HOLD: deliberately still. OUT: the whole proof wall leaves once
+            // with the production exit curve, never during the elastic hold.
+            timeline.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+
+            timeline.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = timeline;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/logo-wall/registry-item.json b/registry/components/logo-wall/registry-item.json
new file mode 100644
index 0000000000..a3b9a3334c
--- /dev/null
+++ b/registry/components/logo-wall/registry-item.json
@@ -0,0 +1,55 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "logo-wall",
+  "type": "hyperframes:component",
+  "title": "Logo Wall",
+  "description": "A trusted-by wall of placeholder lettermark logos that fades and scales into place with a deterministic per-cell stagger.",
+  "tags": ["data", "logos", "social-proof", "stagger", "prove"],
+  "jobs": ["prove"],
+  "family": "data",
+  "profile": "holdable",
+  "evidence": "consumer-sim fixture + blueprint grid-card-assemble variant",
+  "files": [
+    {
+      "path": "logo-wall.html",
+      "target": "compositions/components/logo-wall.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "rows",
+      "type": "number",
+      "role": "layout",
+      "label": "Rows",
+      "description": "Number of logo rows in the wall.",
+      "default": 3,
+      "min": 2,
+      "max": 4,
+      "step": 1
+    },
+    {
+      "id": "cols",
+      "type": "number",
+      "role": "layout",
+      "label": "Columns",
+      "description": "Number of logo columns in the wall.",
+      "default": 5,
+      "min": 3,
+      "max": 6,
+      "step": 1
+    },
+    {
+      "id": "stagger",
+      "type": "number",
+      "role": "motion",
+      "label": "Stagger",
+      "description": "Delay between consecutive logo cell entrances.",
+      "default": 45,
+      "min": 20,
+      "max": 75,
+      "step": 1,
+      "unit": "ms"
+    }
+  ]
+}
diff --git a/registry/components/marker-highlight/README.md b/registry/components/marker-highlight/README.md
new file mode 100644
index 0000000000..c67397ddd8
--- /dev/null
+++ b/registry/components/marker-highlight/README.md
@@ -0,0 +1,37 @@
+# marker-highlight
+
+The corpus emphasis unit: a line of display text settles in, then ONE hand-drawn marker stroke draws over the emphasized word on cue. Four styles, one mechanic: an SVG path revealed by a `getTotalLength` dash tween.
+
+3.5s authored, elastic HOLD (the lockup sits completely still until the frame cuts), exit `none` by default.
+
+## Variables
+
+| id              | type       | default                   | notes                                                                                                                                                                            |
+| --------------- | ---------- | ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `text`          | string     | `Ship it with confidence` | Full line; wraps and centers.                                                                                                                                                    |
+| `emphasis_word` | string     | `confidence`              | First case-insensitive substring match in `text` gets the marker. Empty or unmatched renders the line with no marker. Keep it a word or short phrase; it never wraps internally. |
+| `style`         | enum       | `highlight`               | `highlight` (thick swipe behind the word), `circle` (loop around it), `underline` (wavy rule beneath), `scribble` (zigzag across).                                               |
+| `draw_at`       | number (s) | `0.9`                     | Cue for the draw, relative to mount start. Clamped so the stroke and its settle pop finish before any exit.                                                                      |
+| `accent`        | enum       | `green`                   | Ink color: green rides `--brand`, blue rides `--accent`, violet rides `--accent-2`.                                                                                              |
+| `exit`          | enum       | `none`                    | `none` holds until the cut; `fade` and `up` depart over the final 0.45s.                                                                                                         |
+
+## Mount
+
+```html
+<div
+  class="clip"
+  data-composition-id="marker-highlight"
+  data-composition-src="./marker-highlight.html"
+  data-variable-values='{"text":"Zero render surprises","emphasis_word":"Zero","style":"circle","accent":"violet"}'
+  data-start="0"
+  data-duration="3.5"
+  data-track-index="0"
+></div>
+```
+
+Elastic root: no `data-width`/`data-height`; it fills whatever box the host clip gives it. Timeline registers under the literal `marker-highlight` key.
+
+## Notes
+
+- Marker paths are authored wobble in a fixed viewBox stretched with `preserveAspectRatio="none"`; the anisotropic stroke distortion is the hand-swiped nib feel, deliberately kept (no `non-scaling-stroke`, no `pathLength`).
+- Deterministic: no randomness, both dash endpoints explicit, seek-safe in either direction.
diff --git a/registry/components/marker-highlight/demo.html b/registry/components/marker-highlight/demo.html
new file mode 100644
index 0000000000..547de1c38d
--- /dev/null
+++ b/registry/components/marker-highlight/demo.html
@@ -0,0 +1,80 @@
+<!doctype html>
+<!--
+  marker-highlight demo. This standalone composition mounts the primitive
+  through data-composition-src. Non-default text, style, and accent values
+  prove the variable path while the primitive stays elastic to its host box.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Marker Highlight Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #0b0c0e);
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --brand: #71f5a7;
+        --accent: #61a8ff;
+        --accent-2: #c5a3ff;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+
+      .mount-box {
+        position: absolute;
+        width: 80%;
+        height: 56%;
+        left: 10%;
+        top: 22%;
+        container-type: size;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="marker-highlight-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="3.5"
+      data-fps="30"
+    >
+      <div
+        id="marker-highlight-mount"
+        class="mount-box clip"
+        data-composition-id="marker-highlight"
+        data-composition-src="./marker-highlight.html"
+        data-variable-values='{"text":"Zero render surprises","emphasis_word":"Zero","style":"circle","accent":"violet","draw_at":1.1}'
+        data-start="0"
+        data-duration="3.5"
+        data-track-index="0"
+        data-width="1536"
+        data-height="605"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["marker-highlight-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/marker-highlight/marker-highlight.html b/registry/components/marker-highlight/marker-highlight.html
new file mode 100644
index 0000000000..07b6bdfd39
--- /dev/null
+++ b/registry/components/marker-highlight/marker-highlight.html
@@ -0,0 +1,365 @@
+<!doctype html>
+<!--
+  marker-highlight: HyperFrames video primitive (typography / emphasis)
+
+  The corpus emphasis unit: a short line of display text settles in, then ONE
+  hand-drawn marker stroke draws over the emphasized word on cue. Four marker
+  styles share the same mechanic: an SVG path revealed by a getTotalLength
+  dash tween (never the pathLength attribute, never non-scaling-stroke on a
+  dashed path; the anisotropic viewBox stretch is what gives the ink its
+  hand-swiped weight).
+
+  Variables:
+    text (string): the full line.
+    emphasis_word (string): first case-insensitive substring match inside
+      text gets the marker. Empty or unmatched renders the line with no
+      marker. Keep it a word or short phrase; it stays on one line.
+    style (highlight | circle | underline | scribble): marker shape.
+    draw_at (seconds): cue for the draw, relative to mount start. Clamped so
+      the stroke always completes before any exit begins.
+    accent (green | blue | violet): ink color via the contract token map.
+    exit (none | fade | up, default none): frame roots own transitions;
+      holds end films.
+
+  Envelope, fixed IN and OUT with elastic HOLD only (never time-scaled):
+    IN_BASE   = 0.55s  text rises into place
+    DRAW_BASE = 0.60s  marker stroke, anchored at draw_at, plus a small
+                       settle pop on the emphasized word
+    HOLD      = max(0, D - phases), completely still
+    OUT_BASE  = 0s for exit none, otherwise 0.45s
+    If D is shorter than the fixed phases, they compress together.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, has no data-width or
+  data-height, and registers one paused timeline under the literal
+  marker-highlight key.
+-->
+<html
+  lang="en"
+  data-composition-id="marker-highlight"
+  data-composition-duration="3.5"
+  data-composition-variables='[
+    { "id": "text", "type": "string", "role": "content", "label": "Text", "description": "Full line of display text.", "default": "Ship it with confidence" },
+    { "id": "emphasis_word", "type": "string", "role": "content", "label": "Emphasis word", "description": "First case-insensitive substring match in text receives the marker. Empty or unmatched draws no marker.", "default": "confidence" },
+    { "id": "style", "type": "enum", "role": "style", "label": "Marker style", "description": "Shape of the hand-drawn marker stroke.", "default": "highlight", "options": [{ "value": "highlight", "label": "Highlight" }, { "value": "circle", "label": "Circle" }, { "value": "underline", "label": "Underline" }, { "value": "scribble", "label": "Scribble" }] },
+    { "id": "draw_at", "type": "number", "role": "timing", "label": "Draw at", "description": "Second (from mount start) the marker starts drawing. Clamped so the stroke completes before any exit.", "default": 0.9, "min": 0, "step": 0.1, "unit": "s" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Marker ink color from the contract token map.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the lockup holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Marker Highlight</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="marker-highlight" data-duration="3.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            background: var(--bg, #0b0c0e);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .mh-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+          }
+
+          .mh-stage {
+            max-width: 86cqw;
+            text-align: center;
+            will-change: transform, opacity;
+          }
+
+          .mh-text {
+            margin: 0;
+            font-size: var(--mh-font-size, min(8cqw, 15cqh));
+            font-weight: 600;
+            line-height: 1.14;
+            letter-spacing: -0.03em;
+          }
+
+          .mh-em {
+            position: relative;
+            display: inline-block;
+            white-space: nowrap;
+            will-change: transform;
+          }
+
+          .mh-em-text {
+            position: relative;
+            z-index: 1;
+          }
+
+          .mh-mark {
+            position: absolute;
+            z-index: 0;
+            overflow: visible;
+          }
+
+          /* Per-style marker box around the emphasized word. Explicit
+             width/height (svg is a replaced element: inset-stretching would
+             fall back to its intrinsic viewBox ratio); then
+             preserveAspectRatio="none" stretches the authored path (and its
+             stroke) into the box, which is exactly the marker-nib distortion
+             we want on a dashed path. */
+          .mh-em[data-marker-style="highlight"] .mh-mark {
+            left: -3%;
+            top: 14%;
+            width: 106%;
+            height: 76%;
+          }
+
+          .mh-em[data-marker-style="underline"] .mh-mark {
+            left: -2%;
+            bottom: -14%;
+            width: 105%;
+            height: 22%;
+            z-index: 2;
+          }
+
+          .mh-em[data-marker-style="circle"] .mh-mark {
+            left: -13%;
+            top: -26%;
+            width: 126%;
+            height: 152%;
+            z-index: 2;
+          }
+
+          .mh-em[data-marker-style="scribble"] .mh-mark {
+            left: -2%;
+            top: 12%;
+            width: 104%;
+            height: 76%;
+            z-index: 2;
+          }
+        </style>
+
+        <div
+          id="marker-highlight-clip"
+          class="mh-clip clip"
+          data-start="0"
+          data-duration="3.5"
+          data-track-index="0"
+        >
+          <div class="mh-stage">
+            <p class="mh-text"></p>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            // Literal key: the flattening step strips data-composition-id off
+            // the mounted root, so reading it back would register "null".
+            var compositionId = "marker-highlight";
+            var stage = root.querySelector(".mh-stage");
+            var textEl = root.querySelector(".mh-text");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var text =
+              vars.text == null
+                ? "Ship it with confidence"
+                : String(vars.text).trim().replace(/\s+/g, " ");
+            var emphasis =
+              vars.emphasis_word == null
+                ? "confidence"
+                : String(vars.emphasis_word).trim().replace(/\s+/g, " ");
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            // Hand-drawn stroke library. Paths are authored in a fixed viewBox
+            // and stretched into the word box; wobble is baked into the
+            // control points, never randomized.
+            var markerStyles = {
+              highlight: {
+                viewBox: "0 0 100 40",
+                d: "M 3 24 C 22 20.5, 47 25.5, 68 22.5 C 79 21, 90 23, 97 21.5",
+                strokeWidth: 26,
+                opacity: 0.5,
+              },
+              circle: {
+                viewBox: "0 0 100 40",
+                d: "M 22 7 C 58 1, 95 8, 97 20 C 99 31, 74 38, 44 37 C 16 36, 2 29, 3 19 C 4 10, 22 4, 52 4.5",
+                strokeWidth: 2.8,
+                opacity: 1,
+              },
+              underline: {
+                viewBox: "0 0 100 12",
+                d: "M 2 7 C 20 4.5, 46 8.5, 66 6 C 80 4.5, 92 7.5, 98 5.5",
+                strokeWidth: 4.5,
+                opacity: 1,
+              },
+              scribble: {
+                viewBox: "0 0 100 40",
+                d: "M 6 13 C 34 9.5, 66 11, 94 9 C 60 15, 26 16, 7 20 C 36 18, 68 21, 93 18 C 62 25, 28 27, 8 29",
+                strokeWidth: 5,
+                opacity: 0.65,
+              },
+            };
+            var styleName = Object.prototype.hasOwnProperty.call(markerStyles, vars.style)
+              ? vars.style
+              : "highlight";
+            var marker = markerStyles[styleName];
+
+            // Split text around the first case-insensitive emphasis match.
+            // textContent nodes only, never innerHTML.
+            var matchIndex =
+              emphasis.length > 0 ? text.toLowerCase().indexOf(emphasis.toLowerCase()) : -1;
+            var emEl = null;
+            var pathEl = null;
+            if (matchIndex >= 0) {
+              var before = text.slice(0, matchIndex);
+              var matched = text.slice(matchIndex, matchIndex + emphasis.length);
+              var after = text.slice(matchIndex + emphasis.length);
+              if (before) textEl.appendChild(document.createTextNode(before));
+
+              emEl = document.createElement("span");
+              emEl.className = "mh-em";
+              emEl.setAttribute("data-marker-style", styleName);
+
+              var svgNS = "http://www.w3.org/2000/svg";
+              var svg = document.createElementNS(svgNS, "svg");
+              svg.setAttribute("class", "mh-mark");
+              svg.setAttribute("viewBox", marker.viewBox);
+              svg.setAttribute("preserveAspectRatio", "none");
+              svg.setAttribute("aria-hidden", "true");
+              pathEl = document.createElementNS(svgNS, "path");
+              pathEl.setAttribute("d", marker.d);
+              pathEl.setAttribute("fill", "none");
+              pathEl.setAttribute("stroke-width", String(marker.strokeWidth));
+              pathEl.setAttribute("stroke-linecap", "round");
+              pathEl.setAttribute("stroke-linejoin", "round");
+              // style.stroke, not the presentation attribute: var() only
+              // resolves as a CSS value.
+              pathEl.style.stroke = accentColors[accent];
+              svg.appendChild(pathEl);
+
+              var emText = document.createElement("span");
+              emText.className = "mh-em-text";
+              emText.textContent = matched;
+
+              emEl.appendChild(svg);
+              emEl.appendChild(emText);
+              textEl.appendChild(emEl);
+              if (after) textEl.appendChild(document.createTextNode(after));
+            } else {
+              textEl.textContent = text;
+            }
+            textEl.setAttribute("aria-label", text);
+
+            // Deterministic character-count fit; the line may wrap, the
+            // emphasized phrase never wraps internally.
+            var characters = Math.max(1, Array.from(text).length);
+            var fitted = Math.max(4.2, Math.min(9.5, 185 / characters));
+            root.style.setProperty("--mh-font-size", "min(" + fitted.toFixed(3) + "cqw, 16cqh)");
+
+            // RETIME RANGE: fixed phases; HOLD is the only elastic span.
+            var IN_BASE = 0.55;
+            var DRAW_BASE = 0.6;
+            var POP_BASE = 0.32;
+            var OUT_BASE = exit === "none" ? 0 : 0.45;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "3.5"));
+            var totalBase = IN_BASE + DRAW_BASE + OUT_BASE;
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var DRAW = DRAW_BASE * scale;
+            var POP = POP_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var OUT_START = duration - OUT;
+
+            var drawAtRaw = Number(vars.draw_at);
+            var drawAt = Number.isFinite(drawAtRaw) ? Math.max(0, drawAtRaw) : 0.9;
+            // The stroke and its settle pop always land before the exit.
+            drawAt = Math.min(drawAt, Math.max(0, OUT_START - (DRAW + POP)));
+
+            gsap.set(stage, { opacity: 0, y: "6cqh" });
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: the line rises into place.
+            tl.fromTo(
+              stage,
+              { opacity: 0, y: "6cqh" },
+              { opacity: 1, y: "0cqh", duration: IN, ease: "power3.out" },
+              0,
+            );
+
+            // DRAW: dash reveal from measured length; both endpoints explicit
+            // so any seek is correct without playing through.
+            if (pathEl) {
+              var length = pathEl.getTotalLength();
+              pathEl.style.strokeDasharray = String(length);
+              // Hidden until the cue: at dashoffset == length the round cap
+              // still paints a dot at the path start, so the ink is opacity 0
+              // until the exact frame the draw begins.
+              gsap.set(pathEl, { strokeDashoffset: length, opacity: 0 });
+              tl.set(pathEl, { opacity: marker.opacity }, drawAt);
+              tl.fromTo(
+                pathEl,
+                { strokeDashoffset: length },
+                { strokeDashoffset: 0, duration: DRAW, ease: "power2.inOut" },
+                drawAt,
+              );
+              // Settle pop on the emphasized word as the ink lands.
+              tl.fromTo(
+                emEl,
+                { scale: 1 },
+                {
+                  scale: 1.045,
+                  duration: POP / 2,
+                  ease: "power1.out",
+                  yoyo: true,
+                  repeat: 1,
+                },
+                drawAt + DRAW * 0.7,
+              );
+            }
+
+            // HOLD: completely still.
+
+            // OUT: optional departure; exit none holds until the frame cuts.
+            if (exit === "fade") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "up") {
+              tl.to(stage, { opacity: 0, y: "-7cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/marker-highlight/registry-item.json b/registry/components/marker-highlight/registry-item.json
new file mode 100644
index 0000000000..98a24ad9be
--- /dev/null
+++ b/registry/components/marker-highlight/registry-item.json
@@ -0,0 +1,89 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "marker-highlight",
+  "type": "hyperframes:component",
+  "title": "Marker Highlight",
+  "description": "Display text settles in, then one hand-drawn marker stroke (highlight, circle, underline, or scribble) draws over the emphasized word on cue.",
+  "tags": ["motion-primitive", "typography", "emphasis", "marker", "deterministic"],
+  "jobs": ["emphasize"],
+  "family": "typography",
+  "profile": "emphasis",
+  "evidence": "Wave J U-M rebuild: corpus emphasis unit, getTotalLength dash draw over a substring-matched word",
+  "syncPoints": [{ "id": "marker-draw", "phase": "in", "offset": 0.9 }],
+  "files": [
+    {
+      "path": "marker-highlight.html",
+      "target": "compositions/components/marker-highlight.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "text",
+      "type": "string",
+      "role": "content",
+      "label": "Text",
+      "description": "Full line of display text.",
+      "default": "Ship it with confidence"
+    },
+    {
+      "id": "emphasis_word",
+      "type": "string",
+      "role": "content",
+      "label": "Emphasis word",
+      "description": "First case-insensitive substring match in text receives the marker. Empty or unmatched draws no marker.",
+      "default": "confidence"
+    },
+    {
+      "id": "style",
+      "type": "enum",
+      "role": "style",
+      "label": "Marker style",
+      "description": "Shape of the hand-drawn marker stroke.",
+      "default": "highlight",
+      "options": [
+        { "value": "highlight", "label": "Highlight" },
+        { "value": "circle", "label": "Circle" },
+        { "value": "underline", "label": "Underline" },
+        { "value": "scribble", "label": "Scribble" }
+      ]
+    },
+    {
+      "id": "draw_at",
+      "type": "number",
+      "role": "timing",
+      "label": "Draw at",
+      "description": "Second (from mount start) the marker starts drawing. Clamped so the stroke completes before any exit.",
+      "default": 0.9,
+      "min": 0,
+      "step": 0.1,
+      "unit": "s"
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Marker ink color from the contract token map.",
+      "default": "green",
+      "options": [
+        { "value": "green", "label": "Green" },
+        { "value": "blue", "label": "Blue" },
+        { "value": "violet", "label": "Violet" }
+      ]
+    },
+    {
+      "id": "exit",
+      "type": "enum",
+      "role": "timing",
+      "label": "Exit",
+      "description": "Optional departure. Default none: the lockup holds until the frame cuts.",
+      "default": "none",
+      "options": [
+        { "value": "none", "label": "None" },
+        { "value": "fade", "label": "Fade" },
+        { "value": "up", "label": "Up" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/match-cut/demo.html b/registry/components/match-cut/demo.html
new file mode 100644
index 0000000000..4ac074a86a
--- /dev/null
+++ b/registry/components/match-cut/demo.html
@@ -0,0 +1,79 @@
+<!doctype html>
+<!--
+  match-cut demo. This standalone composition mounts match-cut.html inside a
+  sized host clip. Non-default labels and accent prove all variables flow
+  through the mount while the primitive remains elastic to the host box.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Match Cut Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0b0c0e;
+      }
+
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 44%, #171a20 0%, #0b0c0e 72%);
+      }
+
+      .mount-card {
+        width: 72%;
+        height: 72%;
+        left: 14%;
+        top: 14%;
+        container-type: size;
+        overflow: hidden;
+        border: 2px solid rgba(148, 163, 184, 0.22);
+        border-radius: 32px;
+        background: #0d121d;
+        box-shadow: 0 48px 120px rgba(0, 0, 0, 0.5);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="match-cut-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="match-cut-mount"
+        class="mount-card clip"
+        data-composition-id="match-cut"
+        data-composition-src="./match-cut.html"
+        data-variable-values='{"accent":"violet","label_a":"Launch","label_b":"Complete"}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="1382"
+        data-height="778"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["match-cut-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/match-cut/match-cut.html b/registry/components/match-cut/match-cut.html
new file mode 100644
index 0000000000..42ed3db86f
--- /dev/null
+++ b/registry/components/match-cut/match-cut.html
@@ -0,0 +1,309 @@
+<!doctype html>
+<!--
+  match-cut: HyperFrames video primitive (transitions / match-cut / connect)
+
+  Concept: scene A drives a circle into a known center-frame geometry, then a
+  hard single-frame swap reveals scene B with a different circle in the exact
+  same geometry. Scene B begins shrinking immediately, so the cut lands while
+  the matched shape is moving rather than on a settled pose.
+
+  Variables:
+    - accent (green | blue | violet, default green): matched-circle color.
+    - label_a (string, default "Start"): scene A button label.
+    - label_b (string, default "Done"): scene B result label.
+
+  Envelope (fixed IN/OUT, elastic HOLD only, never timeScale):
+    IN_BASE  = 2.35s  scene A enters and accelerates into the hard cut, then
+               scene B decelerates into place while its content reveals
+    HOLD     = elastic = max(0, D - (IN_BASE + OUT_BASE)); the matched circle
+               drifts subtly so a longer mount stays alive
+    OUT_BASE = 0.50s  the completed scene fades cleanly
+    If D is shorter than IN_BASE + OUT_BASE, IN and OUT compress together and
+    HOLD becomes zero.
+
+  Sync point: hard-cut occurs at CUT_AT = 1.40s in the default four-second
+  duration, exactly frame 42 at 30 fps. Scene A opacity becomes 0 and scene B
+  opacity becomes 1 at the same timeline instant. There is no crossfade.
+
+  Mount contract: this is a template-wrapped sub-composition. The root has no
+  data-width or data-height, fills its host box, uses container query units,
+  and registers one paused timeline under the literal match-cut key.
+-->
+<html
+  lang="en"
+  data-composition-id="match-cut"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Color shared by the matched circles.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "label_a", "type": "string", "role": "content", "label": "Scene A label", "description": "Text inside the outgoing button.", "default": "Start" },
+    { "id": "label_b", "type": "string", "role": "content", "label": "Scene B label", "description": "Result text revealed after the cut.", "default": "Done" }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Match Cut</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="match-cut" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: #f8fafc;
+            font-family: Inter, system-ui, sans-serif;
+            pointer-events: none;
+          }
+
+          .mc-clip,
+          .mc-shell,
+          .mc-scene {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+          }
+
+          .mc-scene {
+            display: grid;
+            place-items: center;
+          }
+
+          .mc-scene-a {
+            background: radial-gradient(circle at 50% 50%, #182032 0%, #0b0f18 68%);
+          }
+
+          .mc-scene-b {
+            background: radial-gradient(circle at 50% 44%, #202b42 0%, #0d121d 72%);
+            opacity: 0;
+          }
+
+          /* Both actors share this one geometry owner. At the cut, each is
+             centered at scale 1, so their painted circles match exactly. */
+          .mc-circle {
+            display: grid;
+            place-items: center;
+            width: 32cqmin;
+            aspect-ratio: 1;
+            border-radius: 50%;
+            background: var(--mc-accent, #4ade80);
+            box-shadow: 0 3.2cqh 8cqh color-mix(in srgb, var(--mc-accent, #4ade80) 30%, transparent);
+            transform-origin: 50% 50%;
+            will-change: transform;
+          }
+
+          .mc-label-a {
+            display: block;
+            max-width: 78%;
+            overflow: hidden;
+            color: #081018;
+            font-size: 5.2cqmin;
+            font-weight: 780;
+            letter-spacing: -0.035em;
+            line-height: 1;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          .mc-circle-b {
+            color: #081018;
+          }
+
+          .mc-check {
+            width: 34%;
+            height: 22%;
+            border-left: 2.4cqmin solid currentColor;
+            border-bottom: 2.4cqmin solid currentColor;
+            transform: translateY(-8%) rotate(-45deg);
+          }
+
+          .mc-copy-b {
+            position: absolute;
+            top: 69%;
+            left: 12cqw;
+            right: 12cqw;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 1.6cqh;
+            text-align: center;
+          }
+
+          .mc-kicker,
+          .mc-label-b {
+            opacity: 0;
+          }
+
+          .mc-kicker {
+            color: color-mix(in srgb, var(--mc-accent, #4ade80) 76%, #f8fafc);
+            font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+            font-size: 2.1cqmin;
+            font-weight: 700;
+            letter-spacing: 0.18em;
+            text-transform: uppercase;
+          }
+
+          .mc-label-b {
+            display: block;
+            max-width: 74cqw;
+            overflow: hidden;
+            color: #f8fafc;
+            font-size: 6.8cqmin;
+            font-weight: 760;
+            letter-spacing: -0.04em;
+            line-height: 1.05;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+        </style>
+
+        <div
+          id="match-cut-clip"
+          class="mc-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="mc-shell">
+            <section class="mc-scene mc-scene-a" aria-label="Outgoing scene">
+              <div class="mc-circle mc-circle-a">
+                <span class="mc-label-a"></span>
+              </div>
+            </section>
+
+            <section class="mc-scene mc-scene-b" aria-label="Incoming scene">
+              <div class="mc-circle mc-circle-b" aria-hidden="true">
+                <span class="mc-check"></span>
+              </div>
+              <div class="mc-copy-b">
+                <span class="mc-kicker">Match complete</span>
+                <span class="mc-label-b"></span>
+              </div>
+            </section>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var shell = root.querySelector(".mc-shell");
+            var sceneA = root.querySelector(".mc-scene-a");
+            var sceneB = root.querySelector(".mc-scene-b");
+            var circleA = root.querySelector(".mc-circle-a");
+            var circleB = root.querySelector(".mc-circle-b");
+            var labelA = root.querySelector(".mc-label-a");
+            var labelB = root.querySelector(".mc-label-b");
+            var revealB = root.querySelectorAll(".mc-kicker, .mc-label-b");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var accentName =
+              vars.accent === "blue" || vars.accent === "violet" ? vars.accent : "green";
+            var accents = { green: "#4ade80", blue: "#60a5fa", violet: "#a78bfa" };
+            var labelAText = vars.label_a == null ? "Start" : String(vars.label_a);
+            var labelBText = vars.label_b == null ? "Done" : String(vars.label_b);
+
+            root.style.setProperty("--mc-accent", accents[accentName]);
+            labelA.textContent = labelAText;
+            labelB.textContent = labelBText;
+
+            var IN_BASE = 2.35;
+            var OUT_BASE = 0.5;
+            var CUT_AT_BASE = 1.4;
+            var A_APPROACH_BASE = 0.45;
+            var B_SETTLE_BASE = 0.65;
+            var COPY_DELAY_BASE = 0.1;
+            var COPY_IN_BASE = 0.55;
+
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var envelopeBase = IN_BASE + OUT_BASE;
+            var phaseScale = duration < envelopeBase ? duration / envelopeBase : 1;
+            var IN = IN_BASE * phaseScale;
+            var OUT = OUT_BASE * phaseScale;
+            var CUT_AT = CUT_AT_BASE * phaseScale;
+            var A_APPROACH = A_APPROACH_BASE * phaseScale;
+            var B_SETTLE = B_SETTLE_BASE * phaseScale;
+            var COPY_DELAY = COPY_DELAY_BASE * phaseScale;
+            var COPY_IN = COPY_IN_BASE * phaseScale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var HOLD_START = IN;
+            var OUT_START = IN + HOLD;
+
+            var tl = gsap.timeline({ paused: true });
+
+            tl.set(shell, { opacity: 0 }, 0);
+            tl.set(sceneA, { opacity: 1 }, 0);
+            tl.set(sceneB, { opacity: 0 }, 0);
+            tl.set(circleA, { scale: 0.54 }, 0);
+            tl.set(circleB, { scale: 1, y: 0 }, 0);
+            tl.set(revealB, { opacity: 0, y: "2.4cqh" }, 0);
+
+            tl.to(shell, { opacity: 1, duration: Math.min(0.3, IN), ease: "power2.out" }, 0);
+            tl.to(circleA, { scale: 0.64, duration: A_APPROACH, ease: "power3.out" }, 0);
+            tl.to(
+              circleA,
+              {
+                scale: 1,
+                duration: Math.max(0, CUT_AT - A_APPROACH),
+                ease: "power4.in",
+              },
+              A_APPROACH,
+            );
+
+            // HARD CUT: both opacity states change at the exact same instant.
+            tl.set(sceneA, { opacity: 0 }, CUT_AT);
+            tl.set(sceneB, { opacity: 1 }, CUT_AT);
+
+            // Scene B starts at the matching geometry and leaves the cut at
+            // peak speed, then decelerates into its smaller resting pose.
+            tl.to(circleB, { scale: 0.74, duration: B_SETTLE, ease: "power4.out" }, CUT_AT);
+            tl.to(
+              revealB,
+              {
+                opacity: 1,
+                y: 0,
+                duration: COPY_IN,
+                stagger: 0.08 * phaseScale,
+                ease: "power3.out",
+              },
+              CUT_AT + COPY_DELAY,
+            );
+
+            if (HOLD > 0) {
+              tl.to(
+                circleB,
+                {
+                  y: "-0.8cqh",
+                  duration: HOLD / 2,
+                  ease: "sine.inOut",
+                  yoyo: true,
+                  repeat: 1,
+                },
+                HOLD_START,
+              );
+            }
+
+            tl.to(shell, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["match-cut"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/match-cut/registry-item.json b/registry/components/match-cut/registry-item.json
new file mode 100644
index 0000000000..21b442e0a6
--- /dev/null
+++ b/registry/components/match-cut/registry-item.json
@@ -0,0 +1,51 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "match-cut",
+  "type": "hyperframes:component",
+  "title": "Match Cut",
+  "description": "A circle accelerates into a hard single-frame scene swap, matches the incoming circle exactly, and continues into a smaller resting pose.",
+  "tags": ["motion-primitive", "transition", "match-cut", "hard-cut", "continuity"],
+  "jobs": ["connect"],
+  "family": "transitions",
+  "profile": "transition",
+  "evidence": "Video Primitives Wave F U12 match-cut contract",
+  "syncPoints": [{ "id": "hard-cut", "phase": "in", "offset": 1.4 }],
+  "files": [
+    {
+      "path": "match-cut.html",
+      "target": "compositions/components/match-cut.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Color shared by the matched circles.",
+      "default": "green",
+      "options": [
+        { "value": "green", "label": "Green" },
+        { "value": "blue", "label": "Blue" },
+        { "value": "violet", "label": "Violet" }
+      ]
+    },
+    {
+      "id": "label_a",
+      "type": "string",
+      "role": "content",
+      "label": "Scene A label",
+      "description": "Text inside the outgoing button.",
+      "default": "Start"
+    },
+    {
+      "id": "label_b",
+      "type": "string",
+      "role": "content",
+      "label": "Scene B label",
+      "description": "Result text revealed after the cut.",
+      "default": "Done"
+    }
+  ]
+}
diff --git a/registry/components/matrix-decode/demo.html b/registry/components/matrix-decode/demo.html
new file mode 100644
index 0000000000..f8f9610da4
--- /dev/null
+++ b/registry/components/matrix-decode/demo.html
@@ -0,0 +1,95 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Matrix Decode - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f4f4f5;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      /* ponytail: scale on wrapper (not a GSAP target), zooms content ~3× for thumbnail legibility */
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        gap: 32px;
+        padding: 72px 96px;
+        background: #18181b;
+        border-radius: 20px;
+        box-shadow: 0 32px 80px rgba(0, 0, 0, 0.22);
+        transform: scale(3.2);
+        transform-origin: center center;
+      }
+      .demo-label {
+        font-size: 13px;
+        font-weight: 500;
+        letter-spacing: 0.12em;
+        text-transform: uppercase;
+        color: #71717a;
+      }
+      .hf-remocn-matrix-decode {
+        display: inline-flex;
+        gap: 4px;
+        font:
+          700 52px/1 ui-monospace,
+          SFMono-Regular,
+          Menlo,
+          monospace;
+        color: #4ade80;
+        text-shadow: 0 0 24px rgba(74, 222, 128, 0.45);
+      }
+      .hf-remocn-matrix-decode span {
+        display: inline-block;
+        min-width: 0.64em;
+        opacity: var(--hf-matrix-opacity, 1);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="matrix-decode-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="demo-label">Matrix Decode</div>
+        <div class="hf-remocn-matrix-decode" data-final="HYPERFRAMES">
+          <span>0</span><span>0</span><span>0</span><span>0</span><span>0</span><span>0</span
+          ><span>0</span><span>0</span><span>0</span><span>0</span>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-matrix-decode span",
+          { opacity: 0, y: 12 },
+          { opacity: 1, y: 0, duration: 0.18, stagger: 0.035, ease: "power2.out" },
+          startTime,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["matrix-decode-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/matrix-decode/matrix-decode.html b/registry/components/matrix-decode/matrix-decode.html
new file mode 100644
index 0000000000..9442627864
--- /dev/null
+++ b/registry/components/matrix-decode/matrix-decode.html
@@ -0,0 +1,128 @@
+<!--
+  Matrix Decode - remocn typography primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Drive the timeline
+  integration from a paused GSAP timeline so renders remain deterministic.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or invalid, and writes the result as a custom property the
+  CSS consumes (or, for the target text, as the cells themselves). The timeline
+  recipe below is untouched by them: it keeps staggering whatever cells are
+  present.
+
+    - text (text, default HYPERFRAMES): the word the scramble resolves into.
+      One scrambling cell per character, up to 32. Also written to data-final,
+      which a decode routine can read.
+    - accent (green | blue | violet, default green): colour family of the cells
+      and of their glow.
+    - size (24 to 160 px, default 64): type size of the cells. The per-cell
+      minimum width is a fixed fraction of it, so the row scales as a whole.
+    - glow (none | standard | strong, default standard): halo strength behind
+      the cells, from no shadow at all to a heavy bloom.
+
+  On every default the result is identical to the original: eleven 64px green
+  cells with an 18px halo.
+-->
+
+<div
+  class="hf-remocn-matrix-decode"
+  data-final="HYPERFRAMES"
+  data-composition-variables='[
+    { "id": "text", "type": "string", "role": "content", "label": "Target text", "description": "Word the scramble resolves into. One scrambling cell per character, up to 32.", "default": "HYPERFRAMES" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Colour family of the cells and their glow.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "size", "type": "number", "role": "style", "label": "Size", "description": "Type size of the cells in pixels. Cell width follows it.", "default": 64, "min": 24, "max": 160, "step": 4, "unit": "px" },
+    { "id": "glow", "type": "enum", "role": "style", "label": "Glow", "description": "Strength of the halo behind the cells, from none to a heavy bloom.", "default": "standard", "options": [{ "value": "none", "label": "None" }, { "value": "standard", "label": "Standard" }, { "value": "strong", "label": "Strong" }] }
+  ]'
+>
+  <span>0</span><span>0</span><span>0</span><span>0</span><span>0</span><span>0</span><span>0</span
+  ><span>0</span><span>0</span><span>0</span><span>0</span>
+</div>
+
+<style>
+  .hf-remocn-matrix-decode {
+    color: #18181b;
+    font-family: Inter, system-ui, sans-serif;
+    font-weight: 900;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-matrix-decode {
+    display: inline-flex;
+    gap: 3px;
+    font:
+      900 64px/1 ui-monospace,
+      SFMono-Regular,
+      Menlo,
+      monospace;
+    font-size: var(--hf-matrix-size, 64px);
+    color: var(--hf-matrix-color, #16a34a);
+    text-shadow: 0 0 var(--hf-matrix-glow-radius, 18px)
+      rgba(var(--hf-matrix-glow-rgb, 22, 163, 74), var(--hf-matrix-glow-alpha, 0.28));
+  }
+  .hf-remocn-matrix-decode span {
+    display: inline-block;
+    min-width: 0.64em;
+    opacity: var(--hf-matrix-opacity, 1);
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Anything missing or invalid returns to its declared default.
+    var accents = {
+      green: { color: "#16a34a", rgb: "22, 163, 74" },
+      blue: { color: "#2563eb", rgb: "37, 99, 235" },
+      violet: { color: "#7c3aed", rgb: "124, 58, 237" },
+    };
+    var glows = {
+      none: { radius: "0px", alpha: "0" },
+      standard: { radius: "18px", alpha: "0.28" },
+      strong: { radius: "34px", alpha: "0.55" },
+    };
+
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var text = typeof vars.text === "string" ? vars.text.trim().slice(0, 32) : "";
+    if (!text) {
+      text = "HYPERFRAMES";
+    }
+
+    var size =
+      typeof vars.size === "number" || typeof vars.size === "string" ? Number(vars.size) : NaN;
+    size = isFinite(size) && size > 0 ? Math.min(160, Math.max(24, size)) : 64;
+
+    var accent = accents[pick(accents, vars.accent, "green")];
+    var glow = glows[pick(glows, vars.glow, "standard")];
+
+    var roots = document.querySelectorAll(".hf-remocn-matrix-decode");
+    for (var i = 0; i < roots.length; i += 1) {
+      roots[i].style.setProperty("--hf-matrix-size", size + "px");
+      roots[i].style.setProperty("--hf-matrix-color", accent.color);
+      roots[i].style.setProperty("--hf-matrix-glow-rgb", accent.rgb);
+      roots[i].style.setProperty("--hf-matrix-glow-radius", glow.radius);
+      roots[i].style.setProperty("--hf-matrix-glow-alpha", glow.alpha);
+      roots[i].setAttribute("data-final", text);
+      while (roots[i].firstChild) {
+        roots[i].removeChild(roots[i].firstChild);
+      }
+      for (var j = 0; j < text.length; j += 1) {
+        var cell = document.createElement("span");
+        cell.textContent = text.charAt(j) === " " ? "\u00a0" : "0";
+        roots[i].appendChild(cell);
+      }
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-matrix-decode span', { opacity: 0, y: 12 }, { opacity: 1, y: 0, duration: 0.18, stagger: 0.035, ease: 'power2.out' }, startTime);
+-->
diff --git a/registry/components/matrix-decode/registry-item.json b/registry/components/matrix-decode/registry-item.json
new file mode 100644
index 0000000000..029a797ea9
--- /dev/null
+++ b/registry/components/matrix-decode/registry-item.json
@@ -0,0 +1,84 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "matrix-decode",
+  "type": "hyperframes:component",
+  "title": "Matrix Decode",
+  "description": "Random scramble resolves left-to-right into the target text.",
+  "tags": ["motion-primitive", "remocn-port", "typography"],
+  "files": [
+    {
+      "path": "matrix-decode.html",
+      "target": "compositions/components/matrix-decode.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "text",
+      "type": "string",
+      "role": "content",
+      "label": "Target text",
+      "description": "Word the scramble resolves into. One scrambling cell per character, up to 32.",
+      "default": "HYPERFRAMES"
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Colour family of the cells and their glow.",
+      "default": "green",
+      "options": [
+        {
+          "value": "green",
+          "label": "Green"
+        },
+        {
+          "value": "blue",
+          "label": "Blue"
+        },
+        {
+          "value": "violet",
+          "label": "Violet"
+        }
+      ]
+    },
+    {
+      "id": "size",
+      "type": "number",
+      "role": "style",
+      "label": "Size",
+      "description": "Type size of the cells in pixels. Cell width follows it.",
+      "default": 64,
+      "min": 24,
+      "max": 160,
+      "step": 4,
+      "unit": "px"
+    },
+    {
+      "id": "glow",
+      "type": "enum",
+      "role": "style",
+      "label": "Glow",
+      "description": "Strength of the halo behind the cells, from none to a heavy bloom.",
+      "default": "standard",
+      "options": [
+        {
+          "value": "none",
+          "label": "None"
+        },
+        {
+          "value": "standard",
+          "label": "Standard"
+        },
+        {
+          "value": "strong",
+          "label": "Strong"
+        }
+      ]
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/matrix-decode.png"
+  }
+}
diff --git a/registry/components/menu-morph/demo.html b/registry/components/menu-morph/demo.html
new file mode 100644
index 0000000000..591cbf1d77
--- /dev/null
+++ b/registry/components/menu-morph/demo.html
@@ -0,0 +1,137 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Menu Morph - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f4f4f5;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        min-width: 760px;
+        min-height: 480px;
+        padding: 56px;
+        /* ponytail: zoom on the wrapper — GSAP animates children, not this element */
+        zoom: 3.4;
+      }
+      .hf-transition-menu-morph {
+        position: relative;
+        display: grid;
+        place-items: center;
+        width: 360px;
+        height: 280px;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-transition-menu-button {
+        z-index: 2;
+        display: grid;
+        place-items: center;
+        gap: 5px;
+        width: 68px;
+        height: 68px;
+        border: 0;
+        border-radius: 999px;
+        background: #18181b;
+        box-shadow: 0 22px 58px rgba(0, 0, 0, 0.22);
+      }
+      .hf-transition-menu-button span {
+        width: 24px;
+        height: 3px;
+        border-radius: 999px;
+        background: #ffffff;
+        transform-origin: center;
+      }
+      .hf-transition-menu-actions {
+        position: absolute;
+        display: flex;
+        gap: 10px;
+        bottom: 20px;
+      }
+      .hf-transition-menu-actions div {
+        padding: 10px 16px;
+        border-radius: 999px;
+        background: #ffffff;
+        color: #18181b;
+        font-size: 14px;
+        font-weight: 700;
+        box-shadow: 0 14px 34px rgba(0, 0, 0, 0.12);
+        border: 1px solid #e4e4e7;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="menu-morph-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-transition-menu-morph">
+          <button class="hf-transition-menu-button" type="button" aria-label="Menu">
+            <span></span><span></span><span></span>
+          </button>
+          <div class="hf-transition-menu-actions">
+            <div>Text</div>
+            <div>Image</div>
+            <div>Audio</div>
+          </div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        tl.fromTo(
+          ".hf-transition-menu-button",
+          { scale: 0.72, opacity: 0 },
+          { scale: 1, opacity: 1, duration: 0.34, ease: "back.out(1.8)" },
+          0.3,
+        );
+        tl.to(
+          ".hf-transition-menu-button span:nth-child(1)",
+          { y: 8, rotation: 45, duration: 0.24, ease: "power2.inOut" },
+          0.78,
+        );
+        tl.to(
+          ".hf-transition-menu-button span:nth-child(2)",
+          { opacity: 0, duration: 0.18, ease: "power1.out" },
+          0.78,
+        );
+        tl.to(
+          ".hf-transition-menu-button span:nth-child(3)",
+          { y: -8, rotation: -45, duration: 0.24, ease: "power2.inOut" },
+          0.78,
+        );
+        tl.fromTo(
+          ".hf-transition-menu-actions div",
+          { y: 28, opacity: 0, scale: 0.86 },
+          { y: 0, opacity: 1, scale: 1, duration: 0.26, stagger: 0.06, ease: "back.out(1.6)" },
+          0.96,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["menu-morph-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/menu-morph/menu-morph.html b/registry/components/menu-morph/menu-morph.html
new file mode 100644
index 0000000000..ba201f9673
--- /dev/null
+++ b/registry/components/menu-morph/menu-morph.html
@@ -0,0 +1,161 @@
+<!--
+  Menu Morph - transitions.dev-inspired primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Use the timeline
+  integration note at the bottom as the starting point for deterministic GSAP
+  animation.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or invalid, and writes the result as a custom property the
+  CSS consumes (or, for the actions, as the pills themselves). The timeline
+  recipe below is untouched by them: it still pops the button, crosses the two
+  outer bars and staggers whatever pills are present.
+
+    - actions (text, default Text, Image, Audio): comma separated labels for
+      the pills that fan out under the button, up to six. The stagger picks up
+      the new count.
+    - tone (ink | green | blue | violet, default ink): colour of the round
+      button behind the white bars. ink is a literal near-black; the other three
+      ride the composition's own brand, accent and accent-2 tokens and fall back
+      to that same ink when the composition declares none.
+    - size (52 to 112 px, default 68): diameter of the round button. The bar
+      width is a fixed fraction of it, so the whole glyph scales together.
+
+  On every default the result is identical to the original: a 68px near-black
+  button with 24px bars over three pills.
+-->
+
+<div
+  class="hf-transition-menu-morph"
+  data-composition-variables='[
+    { "id": "actions", "type": "string", "role": "content", "label": "Actions", "description": "Comma separated labels for the pills that fan out under the button. Up to six.", "default": "Text, Image, Audio" },
+    { "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Colour of the round button behind the white bars.", "default": "ink", "options": [{ "value": "ink", "label": "Ink" }, { "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "size", "type": "number", "role": "layout", "label": "Button size", "description": "Diameter of the round button in pixels. The bars scale with it.", "default": 68, "min": 52, "max": 112, "step": 4, "unit": "px" }
+  ]'
+>
+  <button class="hf-transition-menu-button" type="button" aria-label="Menu">
+    <span></span><span></span><span></span>
+  </button>
+  <div class="hf-transition-menu-actions">
+    <div>Text</div>
+    <div>Image</div>
+    <div>Audio</div>
+  </div>
+</div>
+
+<style>
+  .hf-transition-menu-morph {
+    position: relative;
+    display: grid;
+    place-items: center;
+    width: 360px;
+    height: 220px;
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-transition-menu-button {
+    z-index: 2;
+    display: grid;
+    place-items: center;
+    gap: 5px;
+    width: var(--hf-menu-size, 68px);
+    height: var(--hf-menu-size, 68px);
+    border: 0;
+    border-radius: 999px;
+    background: var(--hf-menu-bg, #18181b);
+    box-shadow: 0 22px 58px rgba(0, 0, 0, 0.22);
+  }
+  .hf-transition-menu-button span {
+    width: calc(var(--hf-menu-size, 68px) * 6 / 17);
+    height: 3px;
+    border-radius: 999px;
+    background: #ffffff;
+    transform-origin: center;
+  }
+  .hf-transition-menu-actions {
+    position: absolute;
+    display: flex;
+    gap: 10px;
+    bottom: 20px;
+  }
+  .hf-transition-menu-actions div {
+    padding: 9px 13px;
+    border-radius: 999px;
+    background: #ffffff;
+    color: #18181b;
+    font-size: 13px;
+    font-weight: 850;
+    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.12);
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Anything missing or invalid returns to its declared default.
+    // The button is the one accent-carrying element here, so the three
+    // chromatic options ride the composition's own tokens and fall back to ink.
+    var tones = {
+      ink: "#18181b",
+      green: "var(--brand, #18181b)",
+      blue: "var(--accent, #18181b)",
+      violet: "var(--accent-2, #18181b)",
+    };
+
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var labels = [];
+    if (typeof vars.actions === "string") {
+      var parts = vars.actions.split(",");
+      for (var p = 0; p < parts.length && labels.length < 6; p += 1) {
+        var label = parts[p].trim();
+        if (label) {
+          labels.push(label);
+        }
+      }
+    }
+    if (!labels.length) {
+      labels = ["Text", "Image", "Audio"];
+    }
+
+    var size =
+      typeof vars.size === "number" || typeof vars.size === "string" ? Number(vars.size) : NaN;
+    size = isFinite(size) && size > 0 ? Math.min(112, Math.max(52, size)) : 68;
+
+    var tone = tones[pick(tones, vars.tone, "ink")];
+
+    var roots = document.querySelectorAll(".hf-transition-menu-morph");
+    for (var i = 0; i < roots.length; i += 1) {
+      roots[i].style.setProperty("--hf-menu-size", size + "px");
+      roots[i].style.setProperty("--hf-menu-bg", tone);
+      var row = roots[i].querySelector(".hf-transition-menu-actions");
+      if (!row) {
+        continue;
+      }
+      while (row.firstChild) {
+        row.removeChild(row.firstChild);
+      }
+      for (var j = 0; j < labels.length; j += 1) {
+        var pill = document.createElement("div");
+        pill.textContent = labels[j];
+        row.appendChild(pill);
+      }
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-transition-menu-button', { scale: 0.72, opacity: 0 }, { scale: 1, opacity: 1, duration: 0.34, ease: 'back.out(1.8)' }, 0.3);
+  tl.to('.hf-transition-menu-button span:nth-child(1)', { y: 8, rotation: 45, duration: 0.24, ease: 'power2.inOut' }, 0.78);
+  tl.to('.hf-transition-menu-button span:nth-child(2)', { opacity: 0, duration: 0.18, ease: 'power1.out' }, 0.78);
+  tl.to('.hf-transition-menu-button span:nth-child(3)', { y: -8, rotation: -45, duration: 0.24, ease: 'power2.inOut' }, 0.78);
+  tl.fromTo('.hf-transition-menu-actions div', { y: 28, opacity: 0, scale: 0.86 }, { y: 0, opacity: 1, scale: 1, duration: 0.26, stagger: 0.06, ease: 'back.out(1.6)' }, 0.96);
+-->
diff --git a/registry/components/menu-morph/registry-item.json b/registry/components/menu-morph/registry-item.json
new file mode 100644
index 0000000000..9a2146fee4
--- /dev/null
+++ b/registry/components/menu-morph/registry-item.json
@@ -0,0 +1,66 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "menu-morph",
+  "type": "hyperframes:component",
+  "title": "Menu Morph",
+  "description": "A transitions.dev-inspired hamburger and plus-menu morph primitive for compact action menus",
+  "tags": ["video-primitive", "transition-primitive", "transitions-dev-port", "menu", "morph"],
+  "files": [
+    {
+      "path": "menu-morph.html",
+      "target": "compositions/components/menu-morph.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "actions",
+      "type": "string",
+      "role": "content",
+      "label": "Actions",
+      "description": "Comma separated labels for the pills that fan out under the button. Up to six.",
+      "default": "Text, Image, Audio"
+    },
+    {
+      "id": "tone",
+      "type": "enum",
+      "role": "style",
+      "label": "Tone",
+      "description": "Colour of the round button behind the white bars.",
+      "default": "ink",
+      "options": [
+        {
+          "value": "ink",
+          "label": "Ink"
+        },
+        {
+          "value": "green",
+          "label": "Green"
+        },
+        {
+          "value": "blue",
+          "label": "Blue"
+        },
+        {
+          "value": "violet",
+          "label": "Violet"
+        }
+      ]
+    },
+    {
+      "id": "size",
+      "type": "number",
+      "role": "layout",
+      "label": "Button size",
+      "description": "Diameter of the round button in pixels. The bars scale with it.",
+      "default": 68,
+      "min": 52,
+      "max": 112,
+      "step": 4,
+      "unit": "px"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/menu-morph.png"
+  }
+}
diff --git a/registry/components/mesh-gradient-bg/demo.html b/registry/components/mesh-gradient-bg/demo.html
new file mode 100644
index 0000000000..d6cc60eae4
--- /dev/null
+++ b/registry/components/mesh-gradient-bg/demo.html
@@ -0,0 +1,193 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Mesh Gradient Background - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+        transform: scale(1.75);
+      }
+      .hf-remocn-mesh-gradient-bg {
+        --hf-accent: #2563eb;
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-mesh-gradient-bg {
+        position: relative;
+        width: 760px;
+        height: 428px;
+        overflow: hidden;
+        border-radius: 30px;
+        background: #080b12;
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+      }
+      .hf-remocn-mesh-gradient-bg .mesh {
+        position: absolute;
+        inset: -22%;
+        filter: blur(44px);
+        opacity: 0.88;
+        background:
+          radial-gradient(
+            circle at var(--hf-x1, 20%) var(--hf-y1, 30%),
+            #60a5fa 0 18%,
+            transparent 32%
+          ),
+          radial-gradient(
+            circle at var(--hf-x2, 76%) var(--hf-y2, 52%),
+            #f472b6 0 16%,
+            transparent 34%
+          ),
+          radial-gradient(
+            circle at var(--hf-x3, 46%) var(--hf-y3, 78%),
+            #34d399 0 18%,
+            transparent 34%
+          );
+      }
+      .hf-remocn-mesh-gradient-bg .card {
+        position: absolute;
+        inset: 74px 92px;
+        border: 1px solid rgba(255, 255, 255, 0.16);
+        border-radius: 26px;
+        background: rgba(255, 255, 255, 0.08);
+        color: #fff;
+        display: grid;
+        place-items: center;
+        text-align: center;
+        overflow: hidden;
+      }
+      .hf-remocn-mesh-gradient-bg .spot {
+        position: absolute;
+        width: 260px;
+        height: 260px;
+        border-radius: 50%;
+        background: radial-gradient(circle, rgba(255, 255, 255, 0.5), transparent 65%);
+        transform: translate(var(--hf-spot-x, 0px), var(--hf-spot-y, 0px));
+        mix-blend-mode: screen;
+      }
+      .hf-remocn-mesh-gradient-bg .particle {
+        position: absolute;
+        left: 50%;
+        top: 54%;
+        width: 12px;
+        height: 20px;
+        border-radius: 3px;
+        background: var(--c);
+        transform: translate(var(--hf-px, 0px), var(--hf-py, 0px)) rotate(var(--hf-pr, 0deg));
+        opacity: var(--hf-po, 0);
+      }
+      .hf-remocn-mesh-gradient-bg h3 {
+        margin: 0;
+        font-size: 44px;
+        letter-spacing: -0.04em;
+      }
+      .hf-remocn-mesh-gradient-bg p {
+        margin: 8px 0 0;
+        font-size: 18px;
+        color: rgba(255, 255, 255, 0.7);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="mesh-gradient-bg-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-mesh-gradient-bg">
+          <div class="mesh"></div>
+          <div class="card">
+            <div class="spot"></div>
+            <div>
+              <h3>Mesh Gradient Background</h3>
+              <p>A render-safe mesh gradient using animated radial layers.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-mesh-gradient-bg .mesh",
+          {
+            "--hf-x1": "18%",
+            "--hf-y1": "28%",
+            "--hf-x2": "78%",
+            "--hf-y2": "46%",
+            "--hf-x3": "44%",
+            "--hf-y3": "80%",
+          },
+          {
+            "--hf-x1": "34%",
+            "--hf-y1": "42%",
+            "--hf-x2": "62%",
+            "--hf-y2": "60%",
+            "--hf-x3": "58%",
+            "--hf-y3": "64%",
+            duration: 4,
+            ease: "sine.inOut",
+          },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-mesh-gradient-bg .spot",
+          { "--hf-spot-x": "-120px", "--hf-spot-y": "-70px" },
+          { "--hf-spot-x": "190px", "--hf-spot-y": "90px", duration: 3, ease: "sine.inOut" },
+          startTime,
+        );
+        const particles_mesh_gradient_bg = gsap.utils.toArray(
+          ".hf-remocn-mesh-gradient-bg .particle",
+        );
+        if (particles_mesh_gradient_bg.length) {
+          tl.fromTo(
+            particles_mesh_gradient_bg,
+            { "--hf-po": 0, "--hf-px": "0px", "--hf-py": "0px", "--hf-pr": "0deg" },
+            {
+              "--hf-po": 1,
+              "--hf-px": (i) => Math.cos(i * 0.83) * 250 + "px",
+              "--hf-py": (i) => -120 - Math.sin(i * 0.61) * 120 + "px",
+              "--hf-pr": (i) => 180 + i * 37 + "deg",
+              duration: 0.8,
+              stagger: 0.015,
+              ease: "power2.out",
+            },
+            startTime + 0.2,
+          );
+        }
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["mesh-gradient-bg-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/mesh-gradient-bg/mesh-gradient-bg.html b/registry/components/mesh-gradient-bg/mesh-gradient-bg.html
new file mode 100644
index 0000000000..44c9fd05cd
--- /dev/null
+++ b/registry/components/mesh-gradient-bg/mesh-gradient-bg.html
@@ -0,0 +1,101 @@
+<!--
+  Mesh Gradient Background - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-mesh-gradient-bg">
+  <div class="mesh"></div>
+  <div class="card">
+    <div class="spot"></div>
+    <div>
+      <h3>Mesh Gradient Background</h3>
+      <p>A render-safe mesh gradient using animated radial layers.</p>
+    </div>
+  </div>
+</div>
+
+<style>
+  .hf-remocn-mesh-gradient-bg {
+    --hf-accent: #2563eb;
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-mesh-gradient-bg {
+    position: relative;
+    width: 760px;
+    height: 428px;
+    overflow: hidden;
+    border-radius: 30px;
+    background: #080b12;
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+  }
+  .hf-remocn-mesh-gradient-bg .mesh {
+    position: absolute;
+    inset: -22%;
+    filter: blur(44px);
+    opacity: 0.88;
+    background:
+      radial-gradient(
+        circle at var(--hf-x1, 20%) var(--hf-y1, 30%),
+        #60a5fa 0 18%,
+        transparent 32%
+      ),
+      radial-gradient(
+        circle at var(--hf-x2, 76%) var(--hf-y2, 52%),
+        #f472b6 0 16%,
+        transparent 34%
+      ),
+      radial-gradient(circle at var(--hf-x3, 46%) var(--hf-y3, 78%), #34d399 0 18%, transparent 34%);
+  }
+  .hf-remocn-mesh-gradient-bg .card {
+    position: absolute;
+    inset: 74px 92px;
+    border: 1px solid rgba(255, 255, 255, 0.16);
+    border-radius: 26px;
+    background: rgba(255, 255, 255, 0.08);
+    color: #fff;
+    display: grid;
+    place-items: center;
+    text-align: center;
+    overflow: hidden;
+  }
+  .hf-remocn-mesh-gradient-bg .spot {
+    position: absolute;
+    width: 260px;
+    height: 260px;
+    border-radius: 50%;
+    background: radial-gradient(circle, rgba(255, 255, 255, 0.5), transparent 65%);
+    transform: translate(var(--hf-spot-x, 0px), var(--hf-spot-y, 0px));
+    mix-blend-mode: screen;
+  }
+  .hf-remocn-mesh-gradient-bg .particle {
+    position: absolute;
+    left: 50%;
+    top: 54%;
+    width: 12px;
+    height: 20px;
+    border-radius: 3px;
+    background: var(--c);
+    transform: translate(var(--hf-px, 0px), var(--hf-py, 0px)) rotate(var(--hf-pr, 0deg));
+    opacity: var(--hf-po, 0);
+  }
+  .hf-remocn-mesh-gradient-bg h3 {
+    margin: 0;
+    font-size: 44px;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-mesh-gradient-bg p {
+    margin: 8px 0 0;
+    color: rgba(255, 255, 255, 0.7);
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-mesh-gradient-bg .mesh', { '--hf-x1': '18%', '--hf-y1': '28%', '--hf-x2': '78%', '--hf-y2': '46%', '--hf-x3': '44%', '--hf-y3': '80%' }, { '--hf-x1': '34%', '--hf-y1': '42%', '--hf-x2': '62%', '--hf-y2': '60%', '--hf-x3': '58%', '--hf-y3': '64%', duration: 4, ease: 'sine.inOut' }, startTime); tl.fromTo('.hf-remocn-mesh-gradient-bg .spot', { '--hf-spot-x': '-120px', '--hf-spot-y': '-70px' }, { '--hf-spot-x': '190px', '--hf-spot-y': '90px', duration: 3, ease: 'sine.inOut' }, startTime); const particles_mesh_gradient_bg = gsap.utils.toArray('.hf-remocn-mesh-gradient-bg .particle'); if (particles_mesh_gradient_bg.length) { tl.fromTo(particles_mesh_gradient_bg, { '--hf-po': 0, '--hf-px': '0px', '--hf-py': '0px', '--hf-pr': '0deg' }, { '--hf-po': 1, '--hf-px': (i) => (Math.cos(i * 0.83) * 250) + 'px', '--hf-py': (i) => (-120 - Math.sin(i * 0.61) * 120) + 'px', '--hf-pr': (i) => (180 + i * 37) + 'deg', duration: 0.8, stagger: 0.015, ease: 'power2.out' }, startTime + 0.2); }
+-->
diff --git a/registry/components/mesh-gradient-bg/registry-item.json b/registry/components/mesh-gradient-bg/registry-item.json
new file mode 100644
index 0000000000..bd76f31dcf
--- /dev/null
+++ b/registry/components/mesh-gradient-bg/registry-item.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "mesh-gradient-bg",
+  "type": "hyperframes:component",
+  "title": "Mesh Gradient Background",
+  "description": "A render-safe mesh gradient using animated radial layers.",
+  "tags": ["effect", "remocn-port"],
+  "files": [
+    {
+      "path": "mesh-gradient-bg.html",
+      "target": "compositions/components/mesh-gradient-bg.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/mesh-gradient-bg.png"
+  }
+}
diff --git a/registry/components/micro-transitions/demo.html b/registry/components/micro-transitions/demo.html
new file mode 100644
index 0000000000..e645266572
--- /dev/null
+++ b/registry/components/micro-transitions/demo.html
@@ -0,0 +1,237 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Micro Transitions - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f4f4f5;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .frame {
+        transform: scale(1.12); /* ponytail: was 2.2; reduced so content fits ~65% of frame */
+      }
+      .hf-micro-transitions {
+        --hf-micro-progress: 0;
+        --hf-micro-tab: 0;
+        position: relative;
+        width: min(640px, 100%);
+        height: 360px;
+        font-family: Inter, system-ui, sans-serif;
+        color: #18181b;
+      }
+      .hf-micro-bell,
+      .hf-micro-dropdown,
+      .hf-micro-modal,
+      .hf-micro-tabs,
+      .hf-micro-tooltip,
+      .hf-micro-check {
+        position: absolute;
+        will-change: transform, opacity;
+      }
+      .hf-micro-bell {
+        top: 18px;
+        left: 28px;
+        width: 54px;
+        height: 54px;
+        border-radius: 18px;
+        background: #18181b;
+        box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
+      }
+      .hf-micro-bell::before {
+        content: "";
+        position: absolute;
+        inset: 15px 17px 13px;
+        border: 2px solid #fff;
+        border-radius: 12px 12px 9px 9px;
+      }
+      .hf-micro-bell span {
+        position: absolute;
+        top: -8px;
+        right: -8px;
+        min-width: 24px;
+        height: 24px;
+        display: grid;
+        place-items: center;
+        border: 3px solid #fff;
+        border-radius: 999px;
+        background: #ef4444;
+        color: #fff;
+        font-size: 12px;
+        font-weight: 850;
+        opacity: var(--hf-micro-progress);
+        transform: translate(
+            calc((1 - var(--hf-micro-progress)) * -7px),
+            calc((1 - var(--hf-micro-progress)) * 10px)
+          )
+          scale(calc(0.25 + var(--hf-micro-progress) * 0.75));
+      }
+      .hf-micro-dropdown {
+        top: 92px;
+        left: 28px;
+        width: 210px;
+        padding: 18px;
+        border: 1px solid #e4e4e7;
+        border-radius: 18px;
+        background: #fff;
+        opacity: var(--hf-micro-progress);
+        transform: translateY(calc((1 - var(--hf-micro-progress)) * -12px))
+          scale(calc(0.95 + var(--hf-micro-progress) * 0.05));
+        transform-origin: top left;
+        box-shadow: 0 24px 65px rgba(0, 0, 0, 0.16);
+      }
+      .hf-micro-dropdown strong,
+      .hf-micro-modal strong {
+        display: block;
+        font-size: 16px;
+      }
+      .hf-micro-dropdown p,
+      .hf-micro-modal span {
+        display: block;
+        margin: 8px 0 0;
+        color: #71717a;
+        font-size: 13px;
+        line-height: 1.4;
+      }
+      .hf-micro-modal {
+        top: 48px;
+        right: 34px;
+        width: 260px;
+        padding: 22px;
+        border: 1px solid #e4e4e7;
+        border-radius: 22px;
+        background: #fff;
+        opacity: var(--hf-micro-progress);
+        transform: translateY(calc((1 - var(--hf-micro-progress)) * 18px))
+          scale(calc(0.96 + var(--hf-micro-progress) * 0.04));
+        box-shadow: 0 32px 80px rgba(0, 0, 0, 0.2);
+      }
+      .hf-micro-tabs {
+        left: 260px;
+        bottom: 46px;
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 4px;
+        width: 210px;
+        padding: 4px;
+        border-radius: 14px;
+        background: #f4f4f5;
+        opacity: var(--hf-micro-progress);
+        transform: translateY(calc((1 - var(--hf-micro-progress)) * 14px));
+      }
+      .hf-micro-tabs i {
+        position: absolute;
+        top: 4px;
+        left: 4px;
+        width: calc((100% - 8px) / 2);
+        height: calc(100% - 8px);
+        border-radius: 11px;
+        background: #fff;
+        transform: translateX(calc(var(--hf-micro-tab) * 100%));
+        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
+      }
+      .hf-micro-tabs b {
+        position: relative;
+        z-index: 1;
+        display: grid;
+        place-items: center;
+        height: 38px;
+        color: #52525b;
+        font-size: 13px;
+      }
+      .hf-micro-tooltip {
+        right: 54px;
+        bottom: 48px;
+        padding: 8px 11px;
+        border-radius: 10px;
+        background: #18181b;
+        color: #fff;
+        font-size: 12px;
+        font-weight: 750;
+        opacity: var(--hf-micro-progress);
+        transform: translateY(calc((1 - var(--hf-micro-progress)) * 6px))
+          scale(calc(0.96 + var(--hf-micro-progress) * 0.04));
+      }
+      .hf-micro-check {
+        right: 116px;
+        bottom: 92px;
+        width: 48px;
+        height: 48px;
+        fill: none;
+        stroke: currentColor;
+        stroke-width: 5;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        opacity: var(--hf-micro-progress);
+      }
+      .hf-micro-check path {
+        stroke-dasharray: 42;
+        stroke-dashoffset: calc((1 - var(--hf-micro-progress)) * 42);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="micro-transitions-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="frame">
+        <div class="hf-micro-transitions" style="--hf-micro-progress: 0; --hf-micro-tab: 0">
+          <div class="hf-micro-bell"><span>3</span></div>
+          <div class="hf-micro-dropdown">
+            <strong>Actions</strong>
+            <p>Export, duplicate, archive</p>
+          </div>
+          <div class="hf-micro-modal">
+            <strong>Ready to publish?</strong><span>All checks passed.</span>
+          </div>
+          <div class="hf-micro-tabs"><i></i><b>Draft</b><b>Live</b></div>
+          <div class="hf-micro-tooltip">Copied</div>
+          <svg class="hf-micro-check" viewBox="0 0 48 48" aria-hidden="true">
+            <path d="M12 25l8 8 17-19" />
+          </svg>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        tl.to(
+          ".hf-micro-transitions",
+          { "--hf-micro-progress": 1, duration: 0.52, ease: "power3.out" },
+          0.55,
+        );
+        tl.to(
+          ".hf-micro-transitions",
+          { "--hf-micro-tab": 1, duration: 0.36, ease: "power3.out" },
+          1.15,
+        );
+        tl.to(
+          ".hf-micro-transitions",
+          { "--hf-micro-progress": 0, duration: 0.34, ease: "power2.in" },
+          3.4,
+        );
+        window.__timelines = window.__timelines || {};
+        window.__timelines["micro-transitions-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/micro-transitions/micro-transitions.html b/registry/components/micro-transitions/micro-transitions.html
new file mode 100644
index 0000000000..7af4db071c
--- /dev/null
+++ b/registry/components/micro-transitions/micro-transitions.html
@@ -0,0 +1,264 @@
+<!--
+  Micro Transitions - transitions.dev-inspired UI motion pack for HyperFrames.
+
+  Includes six app-transition patterns in one copy-paste snippet:
+    badge pop, dropdown reveal, modal open, tab indicator, tooltip appear,
+    and success check draw.
+
+  Animate --hf-micro-progress from 0 to 1, then optionally animate
+  --hf-micro-tab from 0 to 1 for the segmented control.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes either the panel wording or a
+  custom property the CSS below consumes. The two progress drivers above are
+  untouched by them.
+
+    - badge (any short text, default 3): the count inside the red chip on the
+      bell. Blank or non-text input falls back to the default.
+    - tooltip (any short text, default Copied): wording inside the small dark
+      tooltip.
+    - tone (red | amber | violet, default red): colour of that badge chip, the
+      one accent-carrying element in the pack. red and amber are literal alert
+      conventions; violet rides the composition's own accent-2 token and falls
+      back to ink when the composition declares none.
+    - travel (close | standard | far, default standard): scales how far every
+      panel starts from its resting place, so the whole pack drifts half as far
+      or nearly twice as far into position over the same progress run. At full
+      progress each panel lands in exactly the same place.
+
+  On every default the result is identical to the original: a red 3 on the
+  bell, a Copied tooltip, and panels that rise between 6px and 18px.
+-->
+
+<div
+  class="hf-micro-transitions"
+  style="--hf-micro-progress: 0; --hf-micro-tab: 0"
+  data-composition-variables='[
+    {"id": "badge", "type": "string", "role": "content", "label": "Badge", "description": "Count inside the notification badge on the bell.", "default": "3"},
+    {"id": "tooltip", "type": "string", "role": "content", "label": "Tooltip", "description": "Wording inside the small dark tooltip.", "default": "Copied"},
+    {"id": "tone", "type": "enum", "role": "style", "label": "Badge tone", "description": "Colour of the notification badge chip.", "default": "red", "options": [{"value": "red", "label": "Red"}, {"value": "amber", "label": "Amber"}, {"value": "violet", "label": "Violet"}]},
+    {"id": "travel", "type": "enum", "role": "motion", "label": "Travel", "description": "Scales how far every panel starts from its resting place before it settles.", "default": "standard", "options": [{"value": "close", "label": "Close"}, {"value": "standard", "label": "Standard"}, {"value": "far", "label": "Far"}]}
+  ]'
+>
+  <div class="hf-micro-bell"><span>3</span></div>
+  <div class="hf-micro-dropdown">
+    <strong>Actions</strong>
+    <p>Export, duplicate, archive</p>
+  </div>
+  <div class="hf-micro-modal">
+    <strong>Ready to publish?</strong><span>All checks passed.</span>
+  </div>
+  <div class="hf-micro-tabs"><i></i><b>Draft</b><b>Live</b></div>
+  <div class="hf-micro-tooltip">Copied</div>
+  <svg class="hf-micro-check" viewBox="0 0 48 48" aria-hidden="true">
+    <path d="M12 25l8 8 17-19" />
+  </svg>
+</div>
+
+<style>
+  .hf-micro-transitions {
+    --hf-micro-progress: 0;
+    --hf-micro-tab: 0;
+    position: relative;
+    width: min(640px, 100%);
+    height: 360px;
+    font-family: Inter, system-ui, sans-serif;
+    color: #18181b;
+  }
+  .hf-micro-bell,
+  .hf-micro-dropdown,
+  .hf-micro-modal,
+  .hf-micro-tabs,
+  .hf-micro-tooltip,
+  .hf-micro-check {
+    position: absolute;
+    will-change: transform, opacity;
+  }
+  .hf-micro-bell {
+    top: 18px;
+    left: 28px;
+    width: 54px;
+    height: 54px;
+    border-radius: 18px;
+    background: #18181b;
+    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
+  }
+  .hf-micro-bell::before {
+    content: "";
+    position: absolute;
+    inset: 15px 17px 13px;
+    border: 2px solid #fff;
+    border-radius: 12px 12px 9px 9px;
+  }
+  .hf-micro-bell span {
+    position: absolute;
+    top: -8px;
+    right: -8px;
+    min-width: 24px;
+    height: 24px;
+    display: grid;
+    place-items: center;
+    border: 3px solid #fff;
+    border-radius: 999px;
+    background: var(--hf-micro-badge, #ef4444);
+    color: #fff;
+    font-size: 12px;
+    font-weight: 850;
+    opacity: var(--hf-micro-progress);
+    transform: translate(
+        calc((1 - var(--hf-micro-progress)) * -7px * var(--hf-micro-travel, 1)),
+        calc((1 - var(--hf-micro-progress)) * 10px * var(--hf-micro-travel, 1))
+      )
+      scale(calc(0.25 + var(--hf-micro-progress) * 0.75));
+  }
+  .hf-micro-dropdown {
+    top: 92px;
+    left: 28px;
+    width: 210px;
+    padding: 18px;
+    border: 1px solid #e4e4e7;
+    border-radius: 18px;
+    background: #fff;
+    opacity: var(--hf-micro-progress);
+    transform: translateY(calc((1 - var(--hf-micro-progress)) * -12px * var(--hf-micro-travel, 1)))
+      scale(calc(0.95 + var(--hf-micro-progress) * 0.05));
+    transform-origin: top left;
+    box-shadow: 0 24px 65px rgba(0, 0, 0, 0.16);
+  }
+  .hf-micro-dropdown strong,
+  .hf-micro-modal strong {
+    display: block;
+    font-size: 16px;
+  }
+  .hf-micro-dropdown p,
+  .hf-micro-modal span {
+    display: block;
+    margin: 8px 0 0;
+    color: #71717a;
+    font-size: 13px;
+    line-height: 1.4;
+  }
+  .hf-micro-modal {
+    top: 48px;
+    right: 34px;
+    width: 260px;
+    padding: 22px;
+    border: 1px solid #e4e4e7;
+    border-radius: 22px;
+    background: #fff;
+    opacity: var(--hf-micro-progress);
+    transform: translateY(calc((1 - var(--hf-micro-progress)) * 18px * var(--hf-micro-travel, 1)))
+      scale(calc(0.96 + var(--hf-micro-progress) * 0.04));
+    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.2);
+  }
+  .hf-micro-tabs {
+    left: 260px;
+    bottom: 46px;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 4px;
+    width: 210px;
+    padding: 4px;
+    border-radius: 14px;
+    background: #f4f4f5;
+    opacity: var(--hf-micro-progress);
+    transform: translateY(calc((1 - var(--hf-micro-progress)) * 14px * var(--hf-micro-travel, 1)));
+  }
+  .hf-micro-tabs i {
+    position: absolute;
+    top: 4px;
+    left: 4px;
+    width: calc((100% - 8px) / 2);
+    height: calc(100% - 8px);
+    border-radius: 11px;
+    background: #fff;
+    transform: translateX(calc(var(--hf-micro-tab) * 100%));
+    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
+  }
+  .hf-micro-tabs b {
+    position: relative;
+    z-index: 1;
+    display: grid;
+    place-items: center;
+    height: 38px;
+    color: #52525b;
+    font-size: 13px;
+  }
+  .hf-micro-tooltip {
+    right: 54px;
+    bottom: 48px;
+    padding: 8px 11px;
+    border-radius: 10px;
+    background: #18181b;
+    color: #fff;
+    font-size: 12px;
+    font-weight: 750;
+    opacity: var(--hf-micro-progress);
+    transform: translateY(calc((1 - var(--hf-micro-progress)) * 6px * var(--hf-micro-travel, 1)))
+      scale(calc(0.96 + var(--hf-micro-progress) * 0.04));
+  }
+  .hf-micro-check {
+    right: 116px;
+    bottom: 92px;
+    width: 48px;
+    height: 48px;
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 5;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    opacity: var(--hf-micro-progress);
+  }
+  .hf-micro-check path {
+    stroke-dasharray: 42;
+    stroke-dashoffset: calc((1 - var(--hf-micro-progress)) * 42);
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    function text(value, fallback) {
+      return typeof value === "string" && value.trim() !== "" ? value.trim() : fallback;
+    }
+
+    // The badge is the pack's one accent-carrying element. red and amber are
+    // literal alert conventions; violet rides the composition's own token and
+    // falls back to ink.
+    var tones = { red: "#ef4444", amber: "#f59e0b", violet: "var(--accent-2, #18181b)" };
+    var travels = { close: 0.5, standard: 1, far: 1.9 };
+
+    var tone = tones[pick(tones, vars.tone, "red")];
+    var travel = travels[pick(travels, vars.travel, "standard")];
+    var badgeText = text(vars.badge, "3");
+    var tooltipText = text(vars.tooltip, "Copied");
+
+    var roots = document.querySelectorAll(".hf-micro-transitions");
+    for (var i = 0; i < roots.length; i += 1) {
+      var root = roots[i];
+      root.style.setProperty("--hf-micro-badge", tone);
+      root.style.setProperty("--hf-micro-travel", String(travel));
+      var badge = root.querySelector(".hf-micro-bell span");
+      var tooltip = root.querySelector(".hf-micro-tooltip");
+      if (badge) badge.textContent = badgeText;
+      if (tooltip) tooltip.textContent = tooltipText;
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.to('.hf-micro-transitions', { '--hf-micro-progress': 1, duration: 0.5, ease: 'power3.out' }, startTime);
+  tl.to('.hf-micro-transitions', { '--hf-micro-tab': 1, duration: 0.35, ease: 'power3.out' }, startTime + 0.55);
+-->
diff --git a/registry/components/micro-transitions/registry-item.json b/registry/components/micro-transitions/registry-item.json
new file mode 100644
index 0000000000..e12c9f05d2
--- /dev/null
+++ b/registry/components/micro-transitions/registry-item.json
@@ -0,0 +1,87 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "micro-transitions",
+  "type": "hyperframes:component",
+  "title": "Micro Transitions",
+  "description": "A transitions.dev-inspired pack of badge, dropdown, modal, tabs, tooltip, and success-check micro transitions",
+  "tags": [
+    "transition-primitive",
+    "motion-primitive",
+    "transitions-dev-port",
+    "ui",
+    "transition",
+    "microinteraction"
+  ],
+  "files": [
+    {
+      "path": "micro-transitions.html",
+      "target": "compositions/components/micro-transitions.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "badge",
+      "type": "string",
+      "role": "content",
+      "label": "Badge",
+      "description": "Count inside the notification badge on the bell.",
+      "default": "3"
+    },
+    {
+      "id": "tooltip",
+      "type": "string",
+      "role": "content",
+      "label": "Tooltip",
+      "description": "Wording inside the small dark tooltip.",
+      "default": "Copied"
+    },
+    {
+      "id": "tone",
+      "type": "enum",
+      "role": "style",
+      "label": "Badge tone",
+      "description": "Colour of the notification badge chip.",
+      "default": "red",
+      "options": [
+        {
+          "value": "red",
+          "label": "Red"
+        },
+        {
+          "value": "amber",
+          "label": "Amber"
+        },
+        {
+          "value": "violet",
+          "label": "Violet"
+        }
+      ]
+    },
+    {
+      "id": "travel",
+      "type": "enum",
+      "role": "motion",
+      "label": "Travel",
+      "description": "Scales how far every panel starts from its resting place before it settles.",
+      "default": "standard",
+      "options": [
+        {
+          "value": "close",
+          "label": "Close"
+        },
+        {
+          "value": "standard",
+          "label": "Standard"
+        },
+        {
+          "value": "far",
+          "label": "Far"
+        }
+      ]
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/micro-transitions.png"
+  }
+}
diff --git a/registry/components/modal-morph/README.md b/registry/components/modal-morph/README.md
new file mode 100644
index 0000000000..d41dda171d
--- /dev/null
+++ b/registry/components/modal-morph/README.md
@@ -0,0 +1,53 @@
+# modal-morph
+
+The shared-element grow (Wave M9 experiment): a small card expands into a full panel with its children re-flowing continuously. FLIP-style: both layouts are real DOM measured exactly once at mount; the morph interpolates the container rect and applies it as transform only (translate + scaleX/scaleY, never width/height tweens) while keyed children counter-scale against the container and travel onto the lerp of their own two measured rects, all as pure functions of timeline time.
+
+4s authored, elastic HOLD, exit `none` by default.
+
+## Variables
+
+| id           | type   | default | notes                                                                                                               |
+| ------------ | ------ | ------- | ------------------------------------------------------------------------------------------------------------------- |
+| `from_scale` | number | `1`     | Multiplies the authored card footprint before the one-time measurement, clamped 0.5 to 1.5.                         |
+| `expand_at`  | number | `1.2`   | Seconds after mount when the grow begins.                                                                           |
+| `register`   | enum   | `calm`  | `calm` is a smooth inOut cubic; `snappy` is faster with a settle that never overshoots the target rect beyond 1.02. |
+| `accent`     | enum   | `green` | green rides `--brand`, blue rides `--accent`, violet rides `--accent-2`.                                            |
+| `exit`       | enum   | `none`  | `none` holds until the cut; `fade` departs opacity-only; `up` rises out.                                            |
+
+## Card content slot
+
+Place an inert template anywhere in the HOST page:
+
+```html
+<template data-slot="modal-morph-card">
+  <div data-morph-key="icon" class="my-icon"></div>
+  <div data-morph-key="name">Invoice #204</div>
+</template>
+```
+
+The slot content is cloned into BOTH the card body and the panel head, so every `data-morph-key` has a measured rect in each layout and re-flows between them during the morph. Slot content without any keys is wrapped and morphs as one block. With no slot, the primitive renders token defaults (accent dot, display title line, mono meta line) that re-flow from a stacked card to an inline panel header row.
+
+Panel furniture (skeleton tile grid, footer chips) is panel-only and fades up over the back half of the morph.
+
+## Mount
+
+```html
+<div
+  class="clip"
+  data-composition-id="modal-morph"
+  data-composition-src="./modal-morph.html"
+  data-variable-values='{"register":"snappy","from_scale":0.8,"accent":"blue","expand_at":0.9}'
+  data-start="0"
+  data-duration="4"
+  data-track-index="0"
+></div>
+```
+
+Elastic root: no `data-width`/`data-height`; it fills whatever box the host clip gives it. Timeline registers under the literal `modal-morph` key.
+
+## Notes
+
+- The FLIP law: measure once, then transform-only. Container scale is `lerpRect(card, panel, ease(p))` against the panel's natural size; each matched child sets `scale = want / (home * containerScale)` and a translate expressed in the scaled container space, so content re-flows instead of stretching.
+- The card and panel are separate authored layers that crossfade in the first 30% of the morph (both run the same rect math, mirrored), so each endpoint is pixel-crisp in its own styling.
+- `snappy` uses a back-out ease with c1 = 0.7 (analytic peak 1.0176 of the rect delta), under the 1.02 cap.
+- Deterministic: no Math.random, no wall clock, no incremental state; measurement happens synchronously at mount and every later frame is recomputed from `tl.time()` alone, so eventful seeks land identical frames in any order and either direction.
diff --git a/registry/components/modal-morph/demo.html b/registry/components/modal-morph/demo.html
new file mode 100644
index 0000000000..09d3c2c800
--- /dev/null
+++ b/registry/components/modal-morph/demo.html
@@ -0,0 +1,86 @@
+<!doctype html>
+<!--
+  modal-morph demo. FULL-BLEED light mount: the primitive fills the whole
+  1920x1080 frame on a light token block. Non-default register, from_scale,
+  expand_at, and accent values prove the variable path.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Modal Morph Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #eef0f3);
+      }
+
+      #root {
+        --bg: #eef0f3;
+        --fg: #14161b;
+        --muted: #5b6472;
+        --surface: #ffffff;
+        --border: #d3d8e0;
+        --brand: #3f3f46;
+        --accent: #3f3f46;
+        --accent-2: #3f3f46;
+        --radius: 18px;
+        --font-display: "Inter", system-ui, sans-serif;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 42%, #f7f8fa 0%, var(--bg, #eef0f3) 72%);
+      }
+
+      .mount-bleed {
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        container-type: size;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="modal-morph-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="modal-morph-mount"
+        class="mount-bleed clip"
+        data-composition-id="modal-morph"
+        data-composition-src="./modal-morph.html"
+        data-variable-values='{"register":"snappy","from_scale":0.8,"accent":"blue","expand_at":0.9}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="1920"
+        data-height="1080"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["modal-morph-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/modal-morph/modal-morph.html b/registry/components/modal-morph/modal-morph.html
new file mode 100644
index 0000000000..9d6bb7d6ab
--- /dev/null
+++ b/registry/components/modal-morph/modal-morph.html
@@ -0,0 +1,522 @@
+<!doctype html>
+<!--
+  modal-morph: HyperFrames video primitive (structure, Wave M9 experiment)
+
+  The shared-element grow: a small card expands into a full panel with its
+  children re-flowing continuously. FLIP-style: BOTH layouts (card and
+  panel) are real DOM, measured exactly ONCE at mount; from then on every
+  frame is a pure function of timeline time. The morph interpolates the
+  container rect and applies it as transform only (translate + scaleX/Y
+  from a fixed top-left origin); container width/height are NEVER
+  tweened. Children marked data-morph-key exist in both layouts; each
+  panel child counter-scales against the container and translates toward
+  the lerp of its own two measured rects, so content re-flows instead of
+  stretching. Panel-only furniture fades in late; the card crossfades out
+  early in the morph.
+
+  Card content is a SLOT. Callers supply content by placing an inert
+  template anywhere in the HOST page:
+
+    <template data-slot="modal-morph-card"> ... </template>
+
+  The slot content is cloned into BOTH the card body and the panel head.
+  Descendants carrying data-morph-key are paired across the two layouts;
+  slot content without keys is wrapped as one keyed block. With no slot,
+  the primitive renders token defaults (accent dot, display title line,
+  mono meta line) that re-flow from a stacked card to an inline panel
+  header row.
+
+  Variables (declared in data-composition-variables below):
+    - from_scale (number, default 1, clamped 0.5 to 1.5): multiplies the
+      authored card footprint before the one-time measurement.
+    - expand_at (number seconds, default 1.2): when the grow begins.
+    - register ("calm" | "snappy", default "calm"): calm is a smooth
+      inOut cubic; snappy is faster with a small settle that never
+      overshoots the target rect beyond 1.02.
+    - accent ("green" | "blue" | "violet", default "green"): green rides
+      --brand, blue rides --accent, violet rides --accent-2.
+    - exit ("none" | "fade" | "up", default "none").
+
+  Envelope, fixed IN and OUT with elastic HOLD only (never timeScale):
+    IN_BASE  = expand_at + MORPH (0.95s calm, 0.6s snappy) + 0.15s
+    HOLD     = max(0, D - IN - OUT)
+    OUT_BASE = 0.45s only when exit != none
+    If D < IN_BASE + OUT_BASE the whole envelope compresses together.
+
+  Determinism: layouts are measured once, synchronously, at mount; the
+  per-update apply recomputes every transform and opacity from tl.time()
+  alone (no Math.random, no wall clock, no incremental state). Eventful
+  seeks land identical frames in any order and either direction.
+
+  Mount contract: template-wrapped; #root fills the host box (no
+  data-width/height, container-type: size, cqmin units), styled via
+  #root only; one paused timeline under the LITERAL "modal-morph" key.
+-->
+<html
+  lang="en"
+  data-composition-id="modal-morph"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "from_scale", "type": "number", "role": "style", "label": "From scale", "description": "Multiplies the authored card footprint, clamped 0.5 to 1.5.", "default": 1 },
+    { "id": "expand_at", "type": "number", "role": "timing", "label": "Expand at", "description": "Seconds after mount when the card grows into the panel.", "default": 1.2 },
+    { "id": "register", "type": "enum", "role": "timing", "label": "Register", "description": "Morph feel. Snappy is faster with a settle capped at 1.02 of the target rect.", "default": "calm", "options": [{ "value": "calm", "label": "Calm" }, { "value": "snappy", "label": "Snappy" }] },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Accent color: green rides --brand, blue rides --accent, violet rides --accent-2.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the settled panel holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Modal Morph</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="modal-morph" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, "Inter", system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .mm-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .mm-stage {
+            position: absolute;
+            inset: 0;
+            will-change: transform, opacity;
+          }
+
+          /* Card layout: the small shared element, centered. */
+          .mm-cardbox {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+          }
+
+          .mm-card {
+            width: calc(36cqmin * var(--mm-from-scale, 1));
+            padding: var(--space-3, 3cqmin);
+            display: grid;
+            gap: var(--space-2, 2cqmin);
+            border: 0.18cqmin solid var(--border, #475569);
+            border-radius: var(--radius, 2.4cqmin);
+            background: var(--surface, #14171c);
+            box-shadow: 0 1.4cqmin 4.5cqmin color-mix(in srgb, var(--bg, #000000) 32%, transparent);
+          }
+
+          /* Panel layout: the destination surface. */
+          .mm-panel {
+            position: absolute;
+            left: 14cqw;
+            right: 14cqw;
+            top: 13cqh;
+            bottom: 13cqh;
+            padding: var(--space-3, 3cqmin);
+            display: grid;
+            grid-template-rows: auto 1fr auto;
+            gap: var(--space-3, 3cqmin);
+            border: 0.18cqmin solid var(--border, #475569);
+            border-radius: var(--radius, 2.4cqmin);
+            background: var(--surface, #14171c);
+            box-shadow: 0 2.2cqmin 7cqmin color-mix(in srgb, var(--bg, #000000) 36%, transparent);
+          }
+
+          .mm-panel-head {
+            display: flex;
+            align-items: center;
+            gap: var(--space-2, 2cqmin);
+          }
+
+          .mm-dot {
+            width: 3.4cqmin;
+            height: 3.4cqmin;
+            flex: none;
+            border-radius: 50%;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 72%, transparent);
+          }
+
+          .mm-title {
+            height: 2.4cqmin;
+            width: 24cqmin;
+            border-radius: 1.2cqmin;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 30%, transparent);
+          }
+
+          .mm-meta {
+            height: 1.5cqmin;
+            width: 15cqmin;
+            border-radius: 0.75cqmin;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 14%, transparent);
+          }
+
+          .mm-card .mm-title {
+            width: 76%;
+          }
+
+          .mm-card .mm-meta {
+            width: 52%;
+          }
+
+          /* Panel-only furniture: fades in late in the morph. */
+          /* No will-change on morphing layers: cached composited rasters
+             from a scaled state leak pixel noise into out-of-order seeks. */
+          .mm-body {
+            display: grid;
+            grid-template-columns: repeat(3, minmax(0, 1fr));
+            gap: var(--space-2, 2cqmin);
+            align-content: stretch;
+          }
+
+          .mm-tile {
+            border: 0.16cqmin solid var(--border, #475569);
+            border-radius: calc(var(--radius, 2.4cqmin) * 0.7);
+            background: color-mix(in srgb, var(--fg, #f8fafc) 5%, transparent);
+            display: grid;
+            align-content: end;
+            gap: 1.2cqmin;
+            padding: var(--space-2, 2cqmin);
+          }
+
+          .mm-tile-line {
+            height: 1.3cqmin;
+            border-radius: 0.65cqmin;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 16%, transparent);
+          }
+
+          .mm-tile-line.short {
+            width: 58%;
+          }
+
+          .mm-foot {
+            display: flex;
+            gap: var(--space-2, 2cqmin);
+          }
+
+          .mm-chip {
+            height: 3.4cqmin;
+            border-radius: 1.7cqmin;
+            padding: 0 2.4cqmin;
+            display: grid;
+            align-items: center;
+            border: 0.16cqmin solid var(--border, #475569);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
+            font-size: 1.5cqmin;
+            font-weight: 500;
+            letter-spacing: 0.08em;
+            color: var(--muted, #94a3b8);
+          }
+
+          .mm-chip.lead {
+            border-color: color-mix(in srgb, var(--mm-accent) 55%, transparent);
+            color: var(--mm-accent);
+          }
+        </style>
+
+        <div
+          id="modal-morph-clip"
+          class="mm-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="mm-stage">
+            <div class="mm-cardbox">
+              <div class="mm-card">
+                <div class="mm-slot-host">
+                  <div class="mm-dot" data-morph-key="dot"></div>
+                  <div class="mm-title" data-morph-key="title"></div>
+                  <div class="mm-meta" data-morph-key="meta"></div>
+                </div>
+              </div>
+            </div>
+            <div class="mm-panel">
+              <div class="mm-panel-head mm-slot-host">
+                <div class="mm-dot" data-morph-key="dot"></div>
+                <div class="mm-title" data-morph-key="title"></div>
+                <div class="mm-meta" data-morph-key="meta"></div>
+              </div>
+              <div class="mm-body">
+                <div class="mm-tile">
+                  <div class="mm-tile-line"></div>
+                  <div class="mm-tile-line short"></div>
+                </div>
+                <div class="mm-tile">
+                  <div class="mm-tile-line"></div>
+                  <div class="mm-tile-line short"></div>
+                </div>
+                <div class="mm-tile">
+                  <div class="mm-tile-line"></div>
+                  <div class="mm-tile-line short"></div>
+                </div>
+              </div>
+              <div class="mm-foot">
+                <div class="mm-chip lead">OPEN</div>
+                <div class="mm-chip">DETAILS</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".mm-stage");
+            var card = root.querySelector(".mm-card");
+            var panel = root.querySelector(".mm-panel");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var fromScaleRaw = parseFloat(vars.from_scale);
+            var fromScale = isFinite(fromScaleRaw) ? Math.min(1.5, Math.max(0.5, fromScaleRaw)) : 1;
+            var expandRaw = parseFloat(vars.expand_at);
+            var expandVar = isFinite(expandRaw) ? Math.max(0.2, expandRaw) : 1.2;
+            var register = vars.register === "snappy" ? "snappy" : "calm";
+            var accentColors = {
+              green: "var(--brand, #52525b)",
+              blue: "var(--accent, #52525b)",
+              violet: "var(--accent-2, #52525b)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            root.style.setProperty("--mm-accent", accentColors[accent]);
+            root.style.setProperty("--mm-from-scale", String(fromScale));
+
+            // SLOT: same content cloned into BOTH layouts so measured
+            // pairs exist for every key. Keyless slot content is wrapped
+            // as one keyed block.
+            var hostDoc = root.ownerDocument;
+            var slotTemplate = null;
+            try {
+              slotTemplate = hostDoc.querySelector('template[data-slot="modal-morph-card"]');
+            } catch (error) {
+              slotTemplate = null;
+            }
+            if (slotTemplate) {
+              var hosts = root.querySelectorAll(".mm-slot-host");
+              for (var h = 0; h < hosts.length; h += 1) {
+                var content = hostDoc.importNode(slotTemplate.content, true);
+                var probe = hostDoc.createElement("div");
+                probe.appendChild(content);
+                if (!probe.querySelector("[data-morph-key]")) {
+                  probe.setAttribute("data-morph-key", "slot");
+                }
+                hosts[h].textContent = "";
+                hosts[h].appendChild(probe);
+              }
+            }
+
+            // ONE-TIME measurement of both real layouts (the FLIP "first"
+            // and "last"). Everything after this line is pure f(t).
+            var stageRect = stage.getBoundingClientRect();
+            function measure(el) {
+              var r = el.getBoundingClientRect();
+              return {
+                x: r.left - stageRect.left,
+                y: r.top - stageRect.top,
+                w: Math.max(1, r.width),
+                h: Math.max(1, r.height),
+              };
+            }
+            var cardRect = measure(card);
+            var panelRect = measure(panel);
+
+            function collectKids(container) {
+              var map = {};
+              var nodes = container.querySelectorAll("[data-morph-key]");
+              for (var i = 0; i < nodes.length; i += 1) {
+                map[nodes[i].getAttribute("data-morph-key")] = {
+                  el: nodes[i],
+                  rect: measure(nodes[i]),
+                };
+              }
+              return map;
+            }
+            var cardKids = collectKids(card);
+            var panelKids = collectKids(panel);
+
+            // Matched pairs: for each layer we keep, per child, its OWN
+            // layout rect (home) plus the counterpart rect (away).
+            function pairs(ownKids, otherKids) {
+              var list = [];
+              for (var key in ownKids) {
+                if (Object.prototype.hasOwnProperty.call(otherKids, key)) {
+                  list.push({
+                    el: ownKids[key].el,
+                    home: ownKids[key].rect,
+                    away: otherKids[key].rect,
+                  });
+                }
+              }
+              return list;
+            }
+            var panelPairs = pairs(panelKids, cardKids);
+            var cardPairs = pairs(cardKids, panelKids);
+            var fades = panel.querySelectorAll(".mm-body, .mm-foot");
+
+            // Fixed origins so the rect math is exact.
+            gsap.set([card, panel], { transformOrigin: "0 0" });
+            for (var pp = 0; pp < panelPairs.length; pp += 1) {
+              gsap.set(panelPairs[pp].el, { transformOrigin: "0 0" });
+            }
+            for (var cp = 0; cp < cardPairs.length; cp += 1) {
+              gsap.set(cardPairs[cp].el, { transformOrigin: "0 0" });
+            }
+
+            // Envelope: fixed IN/OUT, elastic HOLD, never time-scaled.
+            var MORPH_BASE = register === "snappy" ? 0.6 : 0.95;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var EXPAND_BASE = Math.min(expandVar, Math.max(0.2, duration - 0.6));
+            var IN_BASE = EXPAND_BASE + MORPH_BASE + 0.15;
+            var OUT_BASE = exit === "none" ? 0 : 0.45;
+            var totalBase = Math.max(0.001, IN_BASE + OUT_BASE);
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var EXPAND = EXPAND_BASE * scale;
+            var MORPH = MORPH_BASE * scale;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var OUT_START = IN + HOLD;
+            var ENTER = 0.3 * scale;
+
+            function clamp01(v) {
+              return v < 0 ? 0 : v > 1 ? 1 : v;
+            }
+            // calm: cubic inOut, no overshoot.
+            function calmEase(u) {
+              return u < 0.5 ? 4 * u * u * u : 1 - 4 * (1 - u) * (1 - u) * (1 - u);
+            }
+            // snappy: back.out with c1 = 0.7; analytic max 1.0176, under
+            // the 1.02 cap (and interpolating the rect keeps the scale
+            // overshoot strictly below 2% of target).
+            function snappyEase(u) {
+              var c1 = 0.7;
+              var c3 = c1 + 1;
+              var v = u - 1;
+              return 1 + c3 * v * v * v + c1 * v * v;
+            }
+            var ease = register === "snappy" ? snappyEase : calmEase;
+
+            function lerp(a, b, p) {
+              return a + (b - a) * p;
+            }
+            function lerpRect(a, b, p) {
+              return {
+                x: lerp(a.x, b.x, p),
+                y: lerp(a.y, b.y, p),
+                w: lerp(a.w, b.w, p),
+                h: lerp(a.h, b.h, p),
+              };
+            }
+
+            // Apply one layer: container transformed onto rect R; each
+            // matched child counter-scaled and translated onto the lerp of
+            // its own two measured rects. Child x/y live in the scaled
+            // container space, hence the divisions.
+            function applyLayer(container, homeRect, kidPairs, R, p) {
+              var sx = R.w / homeRect.w;
+              var sy = R.h / homeRect.h;
+              gsap.set(container, {
+                x: R.x - homeRect.x,
+                y: R.y - homeRect.y,
+                scaleX: sx,
+                scaleY: sy,
+              });
+              for (var i = 0; i < kidPairs.length; i += 1) {
+                var pair = kidPairs[i];
+                var relHome = {
+                  x: pair.home.x - homeRect.x,
+                  y: pair.home.y - homeRect.y,
+                };
+                var want = lerpRect(pair.away, pair.home, container === panel ? p : 1 - p);
+                var baseX = R.x + relHome.x * sx;
+                var baseY = R.y + relHome.y * sy;
+                gsap.set(pair.el, {
+                  x: (want.x - baseX) / sx,
+                  y: (want.y - baseY) / sy,
+                  scaleX: want.w / (pair.home.w * sx),
+                  scaleY: want.h / (pair.home.h * sy),
+                });
+              }
+            }
+
+            // Pure per-update apply: every transform and opacity is a
+            // function of tl.time() alone. Writes are idempotent.
+            function applyTime(timeSeconds) {
+              var enter = clamp01(ENTER > 0 ? timeSeconds / ENTER : 1);
+              var u = clamp01(MORPH > 0 ? (timeSeconds - EXPAND) / MORPH : 1);
+              var p = ease(u);
+              var R = lerpRect(cardRect, panelRect, p);
+
+              applyLayer(panel, panelRect, panelPairs, R, p);
+              applyLayer(card, cardRect, cardPairs, R, p);
+
+              // Crossfade: card owns the pre-phase, hands off in the
+              // first 30% of the morph.
+              var hand = clamp01(u / 0.3);
+              gsap.set(card, { opacity: enter * (1 - hand) });
+              gsap.set(panel, { opacity: u <= 0 ? 0 : Math.max(0.001, hand) });
+
+              // Panel-only furniture: fades up over the back half.
+              var q = clamp01((u - 0.55) / 0.45);
+              var qe = 1 - (1 - q) * (1 - q);
+              for (var f = 0; f < fades.length; f += 1) {
+                gsap.set(fades[f], { opacity: qe, y: (1 - qe) * 12 });
+              }
+            }
+
+            gsap.set(stage, { opacity: 1, y: "0cqh" });
+
+            var tl = gsap.timeline({
+              paused: true,
+              onUpdate: function () {
+                applyTime(tl.time());
+              },
+            });
+
+            // Anchor tween: inert, spans [0, D] so onUpdate fires for
+            // every eventful seek and holds never clamp short.
+            tl.to({ p: 0 }, { p: 1, duration: duration, ease: "none" }, 0);
+
+            // OUT: optional departure; exit none holds until the cut.
+            if (exit === "up") {
+              tl.to(stage, { y: "-4cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "fade") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            }
+
+            tl.seek(0);
+            applyTime(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["modal-morph"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/modal-morph/registry-item.json b/registry/components/modal-morph/registry-item.json
new file mode 100644
index 0000000000..d66ac0ae18
--- /dev/null
+++ b/registry/components/modal-morph/registry-item.json
@@ -0,0 +1,84 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "modal-morph",
+  "type": "hyperframes:component",
+  "title": "Modal Morph",
+  "description": "A small card expands into a full panel, shared-element style: both layouts measured once at mount, the container morphs by transform only (never width/height tweens) while keyed children counter-scale and re-flow onto their own measured targets as pure functions of time.",
+  "tags": [
+    "motion-primitive",
+    "structure",
+    "flip",
+    "shared-element",
+    "modal",
+    "deterministic",
+    "experiment"
+  ],
+  "jobs": ["demonstrate"],
+  "family": "structure",
+  "profile": "shared-element",
+  "evidence": "Wave M9 experiment: the FLIP shared-element grow (Codrops recipes, wild-scout)",
+  "syncPoints": [{ "id": "expand", "phase": "in", "offset": 1.2 }],
+  "files": [
+    {
+      "path": "modal-morph.html",
+      "target": "compositions/components/modal-morph.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "from_scale",
+      "type": "number",
+      "role": "style",
+      "label": "From scale",
+      "description": "Multiplies the authored card footprint, clamped 0.5 to 1.5.",
+      "default": 1
+    },
+    {
+      "id": "expand_at",
+      "type": "number",
+      "role": "timing",
+      "label": "Expand at",
+      "description": "Seconds after mount when the card grows into the panel.",
+      "default": 1.2
+    },
+    {
+      "id": "register",
+      "type": "enum",
+      "role": "timing",
+      "label": "Register",
+      "description": "Morph feel. Snappy is faster with a settle capped at 1.02 of the target rect.",
+      "default": "calm",
+      "options": [
+        { "value": "calm", "label": "Calm" },
+        { "value": "snappy", "label": "Snappy" }
+      ]
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Accent color: green rides --brand, blue rides --accent, violet rides --accent-2.",
+      "default": "green",
+      "options": [
+        { "value": "green", "label": "Green" },
+        { "value": "blue", "label": "Blue" },
+        { "value": "violet", "label": "Violet" }
+      ]
+    },
+    {
+      "id": "exit",
+      "type": "enum",
+      "role": "timing",
+      "label": "Exit",
+      "description": "Optional departure. Default none: the settled panel holds until the frame cuts.",
+      "default": "none",
+      "options": [
+        { "value": "none", "label": "None" },
+        { "value": "fade", "label": "Fade" },
+        { "value": "up", "label": "Up" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/morph-swap/README.md b/registry/components/morph-swap/README.md
new file mode 100644
index 0000000000..e8d80028c0
--- /dev/null
+++ b/registry/components/morph-swap/README.md
@@ -0,0 +1,102 @@
+# morph-swap
+
+Two slotted siblings sit absolutely stacked at one shared center. A holds
+alone, then at `swap_at` it morphs into B through one of two registers, both
+on a shared 50% 50% transform origin:
+
+- **condense**: A shrink-fades toward center exactly as B scales up through
+  the same silhouette (outgoing `power2.in`, incoming `back.out` with a
+  0.15s overlap).
+- **reshape**: A morphs its silhouette on `scaleX`/`scaleY` while fading, and
+  B picks up from that mid-morph silhouette and relaxes to its natural shape.
+  The reshape rides transforms only, never `width`/`height` tweens, so it
+  stays layout-free and seek-safe.
+
+You supply the two visuals through slots; the primitive supplies the morph.
+
+## Files
+
+- `morph-swap.html`: the mountable sub-composition (install target:
+  `compositions/components/morph-swap.html`).
+- `registry-item.json`: registry metadata and the variables block.
+- `demo.html`: a 1920x1080 host that mounts the primitive with non-default
+  variables (reshape register, violet accent).
+
+## Variables
+
+| id         | type   | default    | notes                                                                     |
+| ---------- | ------ | ---------- | ------------------------------------------------------------------------- |
+| `swap_at`  | number | `1.4`      | seconds after mount start when the morph begins (0.1 to 8)                |
+| `register` | enum   | `condense` | `condense` shrink-fades at center; `reshape` morphs on scaleX/scaleY      |
+| `accent`   | enum   | `green`    | `green` maps to `--brand`, `blue` to `--accent`, `violet` to `--accent-2` |
+| `exit`     | enum   | `none`     | `none` holds the final frame; `fade` and `up` release the stage           |
+
+Envelope: IN = `swap_at` + the swap span (0.75s condense, 1.05s reshape),
+OUT = 0.5s only when `exit` is `fade` or `up`, HOLD is the sole elastic
+phase. The `morph-land` sync point (`hf:sfx` id `morph-land-soft`) fires when
+the morph lands, 2.15s at defaults.
+
+## The slot mechanism
+
+The primitive ships two named slot panels inside its `<template>`:
+
+```html
+<div class="msw-slot" data-slot="a">...</div>
+<div class="msw-slot" data-slot="b">...</div>
+```
+
+Each slot's default children are a token-styled card (a muted wireframe on
+the outgoing side, a taller accent-tinted card on the incoming side), so an
+untouched mount still reads as a deliberate morph. To show your own content,
+install the component and **replace the children of each `[data-slot]`
+element in your installed copy** (the runtime clones only the primitive's own
+template on mount, so slot content lives in the component file, not on the
+host clip).
+
+Rules:
+
+- Both slots center their content in one shared coordinate space; the morph
+  reads best when A and B have visibly different silhouettes.
+- Direct `img`/`video` children are capped at 84cqw by 84cqh and rounded with
+  `--radius`. Arbitrary HTML works too; size it in `cqw`/`cqh`.
+- The morph transforms the panel around the slot, so slot content needs no
+  animation of its own; keep it static.
+
+## Worked example
+
+Install, then fill the slots with two visuals:
+
+```bash
+npx hyperframes add morph-swap
+```
+
+In `compositions/components/morph-swap.html`, replace each slot's default
+block:
+
+```html
+<div class="msw-slot" data-slot="a">
+  <img src="../../assets/logo-mark.png" alt="" />
+</div>
+...
+<div class="msw-slot" data-slot="b">
+  <img src="../../assets/cta-pill.png" alt="" />
+</div>
+```
+
+Mount it from a host composition like any sub-composition:
+
+```html
+<div
+  class="clip"
+  data-composition-id="morph-swap"
+  data-composition-src="./components/morph-swap.html"
+  data-variable-values='{"register":"reshape","swap_at":1.0,"accent":"blue"}'
+  data-start="2"
+  data-duration="4"
+  data-track-index="0"
+></div>
+```
+
+A holds for the first second, reshapes into B, and B holds still for the
+rest of the clip window (`exit` defaults to `none`; frame roots own scene
+transitions).
diff --git a/registry/components/morph-swap/demo.html b/registry/components/morph-swap/demo.html
new file mode 100644
index 0000000000..0f9681c9d0
--- /dev/null
+++ b/registry/components/morph-swap/demo.html
@@ -0,0 +1,90 @@
+<!doctype html>
+<!--
+  morph-swap demo. This standalone composition mounts the primitive through
+  data-composition-src. Non-default register, swap timing, and accent values
+  prove the variable path while the primitive remains elastic to its host.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>morph-swap Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #0b0c0e);
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --surface: #14171c;
+        --border: #343a46;
+        --brand: #71f5a7;
+        --accent: #c5a3ff;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(
+          ellipse at 50% 44%,
+          var(--bg, #171a20) 0%,
+          var(--bg, #0b0c0e) 72%
+        );
+      }
+
+      .mount-card {
+        width: 52%;
+        height: 66%;
+        left: 24%;
+        top: 17%;
+        container-type: size;
+        overflow: hidden;
+        border: 1px solid color-mix(in srgb, var(--border, #94a3b8) 20%, transparent);
+        border-radius: 30px;
+        background: color-mix(in srgb, var(--surface, #101318) 72%, transparent);
+        box-shadow: 0 40px 100px color-mix(in srgb, var(--bg, #000000) 48%, transparent);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="morph-swap-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="3.5"
+      data-fps="30"
+    >
+      <div
+        id="morph-swap-mount"
+        class="mount-card clip"
+        data-composition-id="morph-swap"
+        data-composition-src="./morph-swap.html"
+        data-variable-values='{"register":"reshape","swap_at":0.9,"accent":"violet"}'
+        data-start="0"
+        data-duration="3.5"
+        data-track-index="0"
+        data-width="998"
+        data-height="713"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["morph-swap-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/morph-swap/morph-swap.html b/registry/components/morph-swap/morph-swap.html
new file mode 100644
index 0000000000..baed6c1d14
--- /dev/null
+++ b/registry/components/morph-swap/morph-swap.html
@@ -0,0 +1,387 @@
+<!doctype html>
+<!--
+  morph-swap: HyperFrames video primitive (transitions / holdable / bridge)
+
+  Concept: two slotted siblings sit absolutely stacked at one shared center.
+  A holds alone, then at swap_at it hands the stage to B through one of two
+  registers, both riding a shared transform-origin of 50% 50%:
+
+    - condense: A shrink-fades toward center exactly as B scales up through
+      the same silhouette (the flagship close morph: outgoing power2.in,
+      incoming back.out with a 0.15s overlap).
+    - reshape: A morphs its silhouette on scaleX/scaleY while fading, and B
+      picks up from that mid-morph silhouette and relaxes to its natural
+      shape (the flagship problem morph). NEVER width/height tweens; the
+      reshape rides transforms only, so it stays layout-free and seek-safe.
+
+  Slots (see README.md for a worked example):
+    - [data-slot="a"]: the outgoing content. Replace the children of this
+      element in your installed copy. Default: a muted token wireframe card.
+    - [data-slot="b"]: the incoming content. Same mechanism. Default: a
+      taller brand-tinted token card so the swap reads at a glance.
+
+  Variables (declared in data-composition-variables below):
+    - swap_at (number, seconds, default 1.4): when the morph starts, relative
+      to mount start. Clamped so the swap always completes inside IN.
+    - register (condense | reshape, default condense): the morph mechanic.
+    - accent (green | blue | violet, default green): incoming card accent.
+      green maps to --brand, blue to --accent, violet to --accent-2.
+    - exit (none | fade | up, default none): outgoing transition. none holds
+      the final frame (frame roots own transitions; holds end films).
+
+  Envelope (fixed IN/OUT, elastic HOLD only, never gsap.timeScale()):
+    IN       = swap_at + swap span (0.75s condense, 1.05s reshape); the stage
+               settles in during the first 0.32s
+    HOLD     = elastic = max(0, D - (IN + OUT)); B holds dead-still
+    OUT      = 0.50s when exit is fade or up, 0 when exit is none
+    If D < IN + OUT, IN and OUT scale down together so IN + OUT == D.
+
+  Sync point: morph-land at swap_at + span inside IN (2.15s at defaults). It
+  never moves into elastic HOLD.
+
+  Sound cue: dispatches a bubbling `hf:sfx` CustomEvent with id
+  "morph-land-soft" at morph-land. This primitive never plays audio.
+
+  Mount contract: MOUNTABLE SUB-COMPOSITION. The runtime clones only
+  <template> contents; #root fills the host box (inset:0, container-type:
+  size), has no data-width/data-height, and registers one paused timeline
+  under the literal "morph-swap" key (mount flattening strips
+  data-composition-id from the live root). Variables come from
+  window.__hyperframes.getVariables().
+-->
+<html
+  lang="en"
+  data-composition-id="morph-swap"
+  data-composition-duration="3.5"
+  data-composition-variables='[
+    { "id": "swap_at", "type": "number", "role": "timing", "label": "Swap start", "description": "Seconds after mount start when the morph begins.", "default": 1.4, "min": 0.1, "max": 8, "step": 0.05, "unit": "s" },
+    { "id": "register", "type": "enum", "role": "style", "label": "Register", "description": "Morph mechanic: condense shrink-fades A into B at center; reshape morphs the silhouette on scaleX/scaleY.", "default": "condense", "options": [{ "value": "condense", "label": "Condense" }, { "value": "reshape", "label": "Reshape" }] },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Incoming card accent color.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Outgoing transition. None holds the final frame.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Morph Swap</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="morph-swap" data-duration="3.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          /* Root fills the host-owned box. Internal measurements use cqw/cqh
+             and every painted color comes from a contract token. */
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            background: var(--bg, #07111f);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+          }
+
+          .msw-clip,
+          .msw-stage {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+          }
+
+          .msw-clip {
+            overflow: hidden;
+          }
+
+          .msw-stage {
+            opacity: 0;
+          }
+
+          /* Both panels stack full-bleed and center their content, so the two
+             siblings share one center and one transform origin. All morph
+             motion is transforms on the panel; slot content never reflows. */
+          .msw-panel {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            transform-origin: 50% 50%;
+          }
+
+          /* Caller-supplied media keeps a sane footprint at center. */
+          .msw-slot > img,
+          .msw-slot > video {
+            max-width: 84cqw;
+            max-height: 84cqh;
+            border-radius: var(--radius, 2.4cqmin);
+          }
+
+          .msw-slot {
+            display: grid;
+            place-items: center;
+          }
+
+          /* Token-styled default slot content: a muted wireframe card on the
+             outgoing side, a taller brand-tinted card on the incoming side.
+             Callers replacing slot children never see any of this. */
+          .msw-card {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            padding: var(--space-3, 4cqh) var(--space-3, 4cqw);
+            border: 0.16cqw solid var(--border, #334155);
+            border-radius: var(--radius, 2.4cqmin);
+            background: color-mix(in srgb, var(--surface, #172033) 88%, var(--bg, #07111f));
+            box-shadow: 0 2cqh 5cqw color-mix(in srgb, var(--bg, #07111f) 45%, transparent);
+          }
+
+          .msw-a .msw-card {
+            width: 52cqw;
+            height: 46cqh;
+          }
+
+          .msw-b .msw-card {
+            width: 36cqw;
+            height: 62cqh;
+            border-color: color-mix(
+              in srgb,
+              var(--msw-accent, #22c55e) 52%,
+              var(--border, #334155)
+            );
+            background: color-mix(in srgb, var(--surface, #172033) 86%, var(--msw-accent, #22c55e));
+          }
+
+          .msw-bar {
+            width: 34%;
+            height: 4.4cqh;
+            margin-bottom: var(--space-3, 4cqh);
+            border-radius: 1.2cqh;
+            background: var(--muted, #94a3b8);
+            opacity: 0.5;
+          }
+
+          .msw-b .msw-bar {
+            width: 46%;
+            background: var(--msw-accent, #22c55e);
+            opacity: 0.92;
+          }
+
+          .msw-line {
+            height: 2.4cqh;
+            margin-bottom: var(--space-2, 2.6cqh);
+            border-radius: 1.2cqh;
+            background: var(--muted, #94a3b8);
+            opacity: 0.4;
+          }
+
+          .msw-line:nth-of-type(2) {
+            width: 92%;
+          }
+
+          .msw-line:nth-of-type(3) {
+            width: 68%;
+          }
+
+          .msw-line:nth-of-type(4) {
+            width: 44%;
+          }
+
+          .msw-b .msw-line {
+            background: color-mix(in srgb, var(--msw-accent, #22c55e) 70%, var(--fg, #f8fafc));
+            opacity: 0.7;
+          }
+        </style>
+
+        <div
+          id="morph-swap-clip"
+          class="msw-clip clip"
+          data-start="0"
+          data-duration="3.5"
+          data-track-index="0"
+        >
+          <div class="msw-stage">
+            <section class="msw-panel msw-a" aria-label="Outgoing panel">
+              <div class="msw-slot" data-slot="a">
+                <!-- SLOT "a": replace the children of this element with your
+                     own outgoing content (img, video, or HTML). -->
+                <div class="msw-card" aria-hidden="true">
+                  <div class="msw-bar"></div>
+                  <div class="msw-line"></div>
+                  <div class="msw-line"></div>
+                  <div class="msw-line"></div>
+                </div>
+              </div>
+            </section>
+
+            <section class="msw-panel msw-b" aria-label="Incoming panel">
+              <div class="msw-slot" data-slot="b">
+                <!-- SLOT "b": replace the children of this element with your
+                     own incoming content (img, video, or HTML). -->
+                <div class="msw-card" aria-hidden="true">
+                  <div class="msw-bar"></div>
+                  <div class="msw-line"></div>
+                  <div class="msw-line"></div>
+                  <div class="msw-line"></div>
+                </div>
+              </div>
+            </section>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            // Literal id: mount flattening strips data-composition-id from the
+            // live root before this timeline registers.
+            var compositionId = "morph-swap";
+            var stage = root.querySelector(".msw-stage");
+            var panelA = root.querySelector(".msw-a");
+            var panelB = root.querySelector(".msw-b");
+
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var rawSwapAt = vars.swap_at == null ? 1.4 : Number(vars.swap_at);
+            // INVARIANT: swap_at always clamps into the declared 0.1-8 range.
+            var swapAt = Number.isFinite(rawSwapAt) ? Math.max(0.1, Math.min(8, rawSwapAt)) : 1.4;
+            // INVARIANT: only condense | reshape reaches the timeline.
+            var register = vars.register === "reshape" ? "reshape" : "condense";
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #22c55e)",
+              blue: "var(--accent, #38bdf8)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            // INVARIANT: only none | fade | up reaches the timeline.
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            root.style.setProperty("--msw-accent", accentColors[accent]);
+
+            // RETIME RANGE: fixed IN and OUT scale together only when D is too
+            // short. HOLD is the sole elastic phase. Never use timeScale().
+            var STAGE_IN_BASE = 0.32;
+            var SPAN_BASE = register === "condense" ? 0.75 : 1.05;
+            var IN_BASE = swapAt + SPAN_BASE;
+            var OUT_BASE = exit === "none" ? 0 : 0.5;
+
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "3.5"));
+            var totalBase = IN_BASE + OUT_BASE;
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var STAGE_IN = Math.min(STAGE_IN_BASE * scale, IN);
+            var SWAP = swapAt * scale;
+            var SWAP_END = IN;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var OUT_START = IN + HOLD;
+
+            function fireSfx(id, t) {
+              root.dispatchEvent(
+                new CustomEvent("hf:sfx", { detail: { id: id, t: t }, bubbles: true }),
+              );
+            }
+
+            // Explicit both-endpoints state makes tl.seek(0) deterministic:
+            // A fully present, B parked hidden at its pre-morph shape.
+            gsap.set(stage, { opacity: 0, y: 0 });
+            gsap.set(panelA, { scale: 1, scaleX: 1, scaleY: 1, autoAlpha: 1 });
+            gsap.set(panelB, { scale: 1, scaleX: 1, scaleY: 1, autoAlpha: 0 });
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN part 1: the stage settles and A holds alone.
+            tl.to(stage, { opacity: 1, duration: STAGE_IN, ease: "power2.out" }, 0);
+
+            // IN part 2: the morph, both registers on the shared 50% 50% origin.
+            if (register === "condense") {
+              // A condenses toward center as B scales up through the same
+              // silhouette, 0.15s overlap (flagship close morph).
+              tl.to(
+                panelA,
+                { scale: 0.72, autoAlpha: 0, duration: 0.35 * scale, ease: "power2.in" },
+                SWAP,
+              );
+              tl.fromTo(
+                panelB,
+                { scale: 0.72, autoAlpha: 0 },
+                {
+                  scale: 1,
+                  autoAlpha: 1,
+                  duration: 0.55 * scale,
+                  ease: "back.out(1.6)",
+                  immediateRender: false,
+                },
+                SWAP + 0.2 * scale,
+              );
+            } else {
+              // A reshapes its silhouette on scaleX/scaleY (NEVER width or
+              // height tweens) while fading; B picks up from the same
+              // mid-morph silhouette and relaxes to its natural shape.
+              tl.to(
+                panelA,
+                { scaleX: 0.68, scaleY: 1.34, duration: 0.6 * scale, ease: "power2.inOut" },
+                SWAP,
+              );
+              tl.to(
+                panelA,
+                { autoAlpha: 0, duration: 0.45 * scale, ease: "power1.in" },
+                SWAP + 0.15 * scale,
+              );
+              tl.fromTo(
+                panelB,
+                { scaleX: 0.68, scaleY: 1.34, autoAlpha: 0 },
+                {
+                  scaleX: 1,
+                  scaleY: 1,
+                  autoAlpha: 1,
+                  duration: 0.65 * scale,
+                  ease: "power2.out",
+                  immediateRender: false,
+                },
+                SWAP + 0.4 * scale,
+              );
+            }
+            tl.call(
+              function () {
+                fireSfx("morph-land-soft", SWAP_END);
+              },
+              [],
+              SWAP_END,
+            );
+
+            // HOLD: B dead-still at its natural shape.
+
+            // OUT: only when the exit variable asks for one; exit none holds
+            // the final frame (frame roots own transitions).
+            if (exit !== "none") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+              if (exit === "up") {
+                tl.to(stage, { y: "-6cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              }
+            }
+
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/morph-swap/registry-item.json b/registry/components/morph-swap/registry-item.json
new file mode 100644
index 0000000000..e49e546ca6
--- /dev/null
+++ b/registry/components/morph-swap/registry-item.json
@@ -0,0 +1,72 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "morph-swap",
+  "type": "hyperframes:component",
+  "title": "Morph Swap",
+  "description": "Two slotted siblings stacked at one shared center: A holds, then condenses or reshapes into B on a shared 50% 50% transform origin. Condense shrink-fades A exactly as B scales up; reshape morphs the silhouette on scaleX/scaleY, never width or height tweens. Token card defaults render when a slot is left empty.",
+  "tags": ["transition", "morph", "swap", "condense", "reshape", "holdable", "slots"],
+  "jobs": ["bridge"],
+  "family": "transitions",
+  "profile": "holdable",
+  "evidence": "Wave J2-4: flagship close condense morph (07-close) and problem reshape morph (02-problem) generalized onto content slots",
+  "syncPoints": [{ "id": "morph-land", "phase": "in", "offset": 2.15 }],
+  "files": [
+    {
+      "path": "morph-swap.html",
+      "target": "compositions/components/morph-swap.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "swap_at",
+      "type": "number",
+      "role": "timing",
+      "label": "Swap start",
+      "description": "Seconds after mount start when the morph begins.",
+      "default": 1.4,
+      "min": 0.1,
+      "max": 8,
+      "step": 0.05,
+      "unit": "s"
+    },
+    {
+      "id": "register",
+      "type": "enum",
+      "role": "style",
+      "label": "Register",
+      "description": "Morph mechanic: condense shrink-fades A into B at center; reshape morphs the silhouette on scaleX/scaleY.",
+      "default": "condense",
+      "options": [
+        { "value": "condense", "label": "Condense" },
+        { "value": "reshape", "label": "Reshape" }
+      ]
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Incoming card accent color.",
+      "default": "green",
+      "options": [
+        { "value": "green", "label": "Green" },
+        { "value": "blue", "label": "Blue" },
+        { "value": "violet", "label": "Violet" }
+      ]
+    },
+    {
+      "id": "exit",
+      "type": "enum",
+      "role": "timing",
+      "label": "Exit",
+      "description": "Outgoing transition. None holds the final frame.",
+      "default": "none",
+      "options": [
+        { "value": "none", "label": "None" },
+        { "value": "fade", "label": "Fade" },
+        { "value": "up", "label": "Up" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/morph-text/demo.html b/registry/components/morph-text/demo.html
index b790430367..877ffed9ba 100644
--- a/registry/components/morph-text/demo.html
+++ b/registry/components/morph-text/demo.html
@@ -1,4 +1,4 @@
-<!-- demo.html — used by scripts/generate-catalog-previews.ts to render the
+<!-- demo.html - used by scripts/generate-catalog-previews.ts to render the
      catalog preview video. Not installed by `hyperframes add morph-text`.
      Keep in sync with morph-text.html. -->
 <!doctype html>
@@ -27,7 +27,7 @@
         width: 1920px;
         height: 1080px;
         overflow: hidden;
-        background: #fff;
+        background: var(--bg, #fff);
       }
 
       #morph-text {
@@ -36,7 +36,7 @@
         height: 1080px;
       }
 
-      /* Word list: hidden source of truth — edit <li> items in Studio. */
+      /* Word list: hidden source of truth - edit <li> items in Studio. */
       #morph-words {
         display: none;
         list-style: none;
@@ -95,7 +95,7 @@
       data-morph-pause="1.5"
     >
       <!--
-        Edit words here — one <li> per word or phrase.
+        Edit words here - one <li> per word or phrase.
         data-font  : CSS font-family (e.g. "'Figtree', sans-serif")
         data-color : text color hex (e.g. "#000000")
         Adjust data-morph-speed (seconds per morph) and data-morph-pause (hold time) above.
@@ -175,12 +175,12 @@
           var wB = words[(stepIdx + 1) % words.length];
 
           elA.textContent = wA.text;
-          elA.style.fontFamily = wA.font;
-          elA.style.color = wA.color;
+          elA.style.fontFamily = "var(--font-display, " + wA.font + ")";
+          elA.style.color = "var(--fg, " + wA.color + ")";
 
           elB.textContent = wB.text;
-          elB.style.fontFamily = wB.font;
-          elB.style.color = wB.color;
+          elB.style.fontFamily = "var(--font-display, " + wB.font + ")";
+          elB.style.color = "var(--fg, " + wB.color + ")";
 
           if (frac <= 0) {
             display.style.filter = "none";
@@ -207,8 +207,8 @@
 
         if (matchMedia("(prefers-reduced-motion: reduce)").matches) {
           elA.textContent = words[0].text;
-          elA.style.fontFamily = words[0].font;
-          elA.style.color = words[0].color;
+          elA.style.fontFamily = "var(--font-display, " + words[0].font + ")";
+          elA.style.color = "var(--fg, " + words[0].color + ")";
           elA.style.opacity = "1";
           display.style.filter = "none";
           return;
diff --git a/registry/components/morph-text/morph-text.html b/registry/components/morph-text/morph-text.html
index 1b205bafd4..6427b5c4d2 100644
--- a/registry/components/morph-text/morph-text.html
+++ b/registry/components/morph-text/morph-text.html
@@ -24,7 +24,7 @@
         width: 1920px;
         height: 1080px;
         overflow: hidden;
-        background: #fff;
+        background: var(--bg, #fff);
       }
 
       #morph-text {
@@ -33,7 +33,7 @@
         height: 1080px;
       }
 
-      /* Word list: hidden source of truth — edit <li> items in Studio. */
+      /* Word list: hidden source of truth - edit <li> items in Studio. */
       #morph-words {
         display: none;
         list-style: none;
@@ -92,7 +92,7 @@
       data-morph-pause="1.5"
     >
       <!--
-        Edit words here — one <li> per word or phrase.
+        Edit words here - one <li> per word or phrase.
         data-font  : CSS font-family (e.g. "'Figtree', sans-serif")
         data-color : text color hex (e.g. "#000000")
         Adjust data-morph-speed (seconds per morph) and data-morph-pause (hold time) above.
@@ -172,12 +172,12 @@
           var wB = words[(stepIdx + 1) % words.length];
 
           elA.textContent = wA.text;
-          elA.style.fontFamily = wA.font;
-          elA.style.color = wA.color;
+          elA.style.fontFamily = "var(--font-display, " + wA.font + ")";
+          elA.style.color = "var(--fg, " + wA.color + ")";
 
           elB.textContent = wB.text;
-          elB.style.fontFamily = wB.font;
-          elB.style.color = wB.color;
+          elB.style.fontFamily = "var(--font-display, " + wB.font + ")";
+          elB.style.color = "var(--fg, " + wB.color + ")";
 
           if (frac <= 0) {
             display.style.filter = "none";
@@ -204,8 +204,8 @@
 
         if (matchMedia("(prefers-reduced-motion: reduce)").matches) {
           elA.textContent = words[0].text;
-          elA.style.fontFamily = words[0].font;
-          elA.style.color = words[0].color;
+          elA.style.fontFamily = "var(--font-display, " + words[0].font + ")";
+          elA.style.color = "var(--fg, " + words[0].color + ")";
           elA.style.opacity = "1";
           display.style.filter = "none";
           return;
diff --git a/registry/components/motion-blur/demo.html b/registry/components/motion-blur/demo.html
index ebbe8b6643..c058cca068 100644
--- a/registry/components/motion-blur/demo.html
+++ b/registry/components/motion-blur/demo.html
@@ -134,6 +134,8 @@
         width: 200px;
         height: 72px;
         border-radius: 36px;
+        /* Flat L1 ink: every row is the same object, so only the blur differs. */
+        background: rgba(244, 244, 245, 0.72);
         will-change: transform, filter;
       }
 
@@ -147,6 +149,7 @@
         font-size: 56px;
         font-weight: 800;
         letter-spacing: -0.03em;
+        color: #f4f4f5;
         will-change: transform, filter;
       }
 
@@ -196,21 +199,8 @@
         <div class="track-a"></div>
         <div class="inner-div"></div>
         <div class="track-b"></div>
-        <div
-          class="pill"
-          id="s1"
-          style="
-            background: linear-gradient(135deg, #60a5fa, #2563eb);
-            box-shadow: 0 0 32px rgba(96, 165, 250, 0.18);
-          "
-        ></div>
-        <div
-          class="word"
-          id="t1"
-          style="color: #3b82f6; text-shadow: 0 0 40px rgba(96, 165, 250, 0.3)"
-        >
-          DRIFT
-        </div>
+        <div class="pill" id="s1"></div>
+        <div class="word" id="t1">DRIFT</div>
         <div class="spd"><span class="spd-label">slow</span></div>
       </div>
 
@@ -221,21 +211,8 @@
         <div class="track-a"></div>
         <div class="inner-div"></div>
         <div class="track-b"></div>
-        <div
-          class="pill"
-          id="s2"
-          style="
-            background: linear-gradient(135deg, #34d399, #059669);
-            box-shadow: 0 0 32px rgba(52, 211, 153, 0.18);
-          "
-        ></div>
-        <div
-          class="word"
-          id="t2"
-          style="color: #10b981; text-shadow: 0 0 40px rgba(52, 211, 153, 0.3)"
-        >
-          GLIDE
-        </div>
+        <div class="pill" id="s2"></div>
+        <div class="word" id="t2">GLIDE</div>
         <div class="spd"><span class="spd-label">medium</span></div>
       </div>
 
@@ -246,21 +223,8 @@
         <div class="track-a"></div>
         <div class="inner-div"></div>
         <div class="track-b"></div>
-        <div
-          class="pill"
-          id="s3"
-          style="
-            background: linear-gradient(135deg, #c084fc, #7c3aed);
-            box-shadow: 0 0 32px rgba(192, 132, 252, 0.18);
-          "
-        ></div>
-        <div
-          class="word"
-          id="t3"
-          style="color: #a855f7; text-shadow: 0 0 40px rgba(192, 132, 252, 0.3)"
-        >
-          RUSH
-        </div>
+        <div class="pill" id="s3"></div>
+        <div class="word" id="t3">RUSH</div>
         <div class="spd"><span class="spd-label">fast</span></div>
       </div>
 
@@ -273,21 +237,8 @@
         <div class="track-a"></div>
         <div class="inner-div"></div>
         <div class="track-b"></div>
-        <div
-          class="pill"
-          id="s4"
-          style="
-            background: linear-gradient(135deg, #fb923c, #ea580c);
-            box-shadow: 0 0 32px rgba(251, 146, 60, 0.18);
-          "
-        ></div>
-        <div
-          class="word"
-          id="t4"
-          style="color: #f97316; text-shadow: 0 0 40px rgba(251, 146, 60, 0.3)"
-        >
-          BLAST
-        </div>
+        <div class="pill" id="s4"></div>
+        <div class="word" id="t4">BLAST</div>
         <div class="spd"><span class="spd-label">faster</span></div>
       </div>
 
@@ -298,21 +249,8 @@
         <div class="track-a"></div>
         <div class="inner-div"></div>
         <div class="track-b"></div>
-        <div
-          class="pill"
-          id="s5"
-          style="
-            background: linear-gradient(135deg, #f87171, #dc2626);
-            box-shadow: 0 0 32px rgba(248, 113, 113, 0.18);
-          "
-        ></div>
-        <div
-          class="word"
-          id="t5"
-          style="color: #ef4444; text-shadow: 0 0 40px rgba(248, 113, 113, 0.3)"
-        >
-          WARP
-        </div>
+        <div class="pill" id="s5"></div>
+        <div class="word" id="t5">WARP</div>
         <div class="spd"><span class="spd-label">extreme</span></div>
       </div>
 
diff --git a/registry/components/multi-device-splay/demo.html b/registry/components/multi-device-splay/demo.html
new file mode 100644
index 0000000000..4e3e8b5f7d
--- /dev/null
+++ b/registry/components/multi-device-splay/demo.html
@@ -0,0 +1,96 @@
+<!doctype html>
+<!--
+  multi-device-splay demo. This standalone composition mounts the primitive
+  through data-composition-src. The violet override proves the accent enum
+  flows through the mount while the primitive sizes itself from the host box.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Multi Device Splay Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0b0c0e;
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --muted: #94a3b8;
+        --surface: #15181f;
+        --border: rgba(226, 232, 240, 0.16);
+        --brand: #8b5cf6;
+        --accent: #a78bfa;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-body: Inter, system-ui, sans-serif;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        --radius: 24px;
+        --space-1: 8px;
+        --space-2: 16px;
+        --space-3: 32px;
+        --dur-beat: 0.4s;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background:
+          radial-gradient(ellipse at 50% 42%, rgba(139, 92, 246, 0.13), transparent 44%),
+          radial-gradient(ellipse at 50% 55%, #1a1d24, #0b0c0e 68%);
+      }
+
+      .mount-stage {
+        width: 88%;
+        height: 76%;
+        left: 6%;
+        top: 12%;
+        container-type: size;
+        overflow: hidden;
+        border: 1px solid rgba(226, 232, 240, 0.08);
+        border-radius: 30px;
+        background: rgba(255, 255, 255, 0.018);
+        box-shadow: 0 50px 120px rgba(0, 0, 0, 0.34);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="multi-device-splay-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4.5"
+      data-fps="30"
+    >
+      <div
+        id="multi-device-splay-mount"
+        class="mount-stage clip"
+        data-composition-id="multi-device-splay"
+        data-composition-src="./multi-device-splay.html"
+        data-variable-values='{"accent":"violet"}'
+        data-start="0"
+        data-duration="4.5"
+        data-track-index="0"
+        data-width="1690"
+        data-height="821"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["multi-device-splay-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/multi-device-splay/multi-device-splay.html b/registry/components/multi-device-splay/multi-device-splay.html
new file mode 100644
index 0000000000..b0f441df49
--- /dev/null
+++ b/registry/components/multi-device-splay/multi-device-splay.html
@@ -0,0 +1,727 @@
+<!doctype html>
+<!--
+  multi-device-splay: HyperFrames video primitive (ui-props / devices / reveal)
+
+  Concept: phone, tablet, and desktop product mockups begin as one centered
+  stack, then fan into a proud three-device arrangement. Each screen uses the
+  same accent while keeping a layout skeleton suited to its form factor.
+
+  Variables:
+    - accent (green | blue | violet, default "blue"): shared product color.
+
+  Envelope: fixed IN and OUT with elastic HOLD only, never timeScale.
+    IN   1.35s fixed  devices fan out in phone, tablet, desktop order with a
+                      0.12s cascade and overshoot settle.
+    HOLD elastic      the settled devices float subtly around their final
+                      -12, 0, and +12 degree rotations.
+    OUT  0.55s fixed  the arrangement recedes and fades as one lockup.
+    If duration is shorter than IN + OUT, both fixed phases shrink by the
+    same ratio and HOLD becomes zero.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the cqw/cqh basis, has no data-width or data-height, and
+  registers one paused timeline under the hardcoded multi-device-splay id.
+-->
+<html
+  lang="en"
+  data-composition-id="multi-device-splay"
+  data-composition-duration="4.5"
+  data-composition-variables='[
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Shared accent color used by all three product screens.", "default": "blue", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Multi Device Splay</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="multi-device-splay" data-duration="4.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            pointer-events: none;
+          }
+
+          .mds-clip,
+          .mds-stage {
+            position: absolute;
+            inset: 0;
+          }
+
+          .mds-stage {
+            perspective: 120cqw;
+            perspective-origin: 50% 48%;
+          }
+
+          .mds-positioner {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform-style: preserve-3d;
+            will-change: transform, opacity;
+          }
+
+          .mds-positioner-desktop {
+            z-index: 1;
+          }
+
+          .mds-positioner-tablet {
+            z-index: 2;
+          }
+
+          .mds-positioner-phone {
+            z-index: 3;
+          }
+
+          .mds-device {
+            position: absolute;
+            left: 0;
+            top: 0;
+            transform: translate(-50%, -50%);
+            transform-origin: 50% 50%;
+          }
+
+          .mds-shell,
+          .mds-monitor {
+            background: linear-gradient(145deg, #3a3d45, #1b1d22 43%, #0f1115);
+            border: 0.12cqh solid rgba(255, 255, 255, 0.24);
+            box-shadow:
+              0 4.8cqh 9cqh rgba(0, 0, 0, 0.4),
+              0 1.3cqh 2.5cqh rgba(0, 0, 0, 0.28),
+              inset 0 0.12cqh 0 rgba(255, 255, 255, 0.22),
+              inset 0 0 0 0.1cqh rgba(0, 0, 0, 0.52);
+          }
+
+          .mds-phone {
+            width: auto;
+            height: 59cqh;
+            aspect-ratio: 9 / 19.5;
+            padding: 0.65cqh;
+            border-radius: 4.1cqh;
+          }
+
+          .mds-tablet {
+            width: auto;
+            height: 64cqh;
+            aspect-ratio: 3 / 4;
+            padding: 0.82cqh;
+            border-radius: 3.5cqh;
+          }
+
+          .mds-desktop {
+            width: 44cqw;
+          }
+
+          .mds-monitor {
+            width: 100%;
+            aspect-ratio: 16 / 10;
+            padding: 0.7cqh;
+            border-radius: 2.1cqh;
+          }
+
+          .mds-stand-neck {
+            width: 4.8cqw;
+            height: 6.2cqh;
+            margin: -0.1cqh auto 0;
+            background: linear-gradient(90deg, #17191e, #3c3f47 48%, #121419);
+            clip-path: polygon(24% 0, 76% 0, 92% 100%, 8% 100%);
+          }
+
+          .mds-stand-foot {
+            width: 15cqw;
+            height: 1.5cqh;
+            margin: -0.05cqh auto 0;
+            border-radius: 1cqh 1cqh 0.45cqh 0.45cqh;
+            background: linear-gradient(180deg, #464952, #17191e);
+            box-shadow: 0 1.2cqh 2.3cqh rgba(0, 0, 0, 0.34);
+          }
+
+          .mds-screen {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            isolation: isolate;
+            background: #f4f7fb;
+            box-shadow: inset 0 0 0 0.1cqh rgba(15, 23, 42, 0.22);
+          }
+
+          .mds-phone .mds-screen {
+            border-radius: 3.45cqh;
+          }
+
+          .mds-tablet .mds-screen {
+            border-radius: 2.7cqh;
+          }
+
+          .mds-monitor .mds-screen {
+            border-radius: 1.42cqh;
+          }
+
+          .mds-island {
+            position: absolute;
+            z-index: 5;
+            left: 50%;
+            top: 1.1cqh;
+            width: 5.2cqw;
+            height: 1.7cqh;
+            border-radius: 2cqh;
+            background: #07080a;
+            transform: translateX(-50%);
+          }
+
+          .mds-camera {
+            position: absolute;
+            z-index: 5;
+            left: 50%;
+            top: 0.65cqh;
+            width: 0.55cqh;
+            height: 0.55cqh;
+            border-radius: 50%;
+            background: #0a0b0e;
+            transform: translateX(-50%);
+          }
+
+          .mds-mobile-ui,
+          .mds-tablet-ui,
+          .mds-desktop-ui {
+            position: absolute;
+            inset: 0;
+            color: #172033;
+          }
+
+          .mds-mobile-ui {
+            padding: 5.4cqh 1.4cqw 1.8cqh;
+            background: linear-gradient(180deg, #edf4ff, #f8fafc 40%);
+          }
+
+          .mds-mobile-header,
+          .mds-tablet-header,
+          .mds-desktop-toolbar {
+            display: flex;
+            align-items: center;
+          }
+
+          .mds-mobile-header {
+            justify-content: space-between;
+            margin-bottom: 2.1cqh;
+          }
+
+          .mds-logo {
+            width: 2.1cqh;
+            height: 2.1cqh;
+            border-radius: 0.65cqh;
+            background: var(--mds-accent);
+            box-shadow: 0 0.7cqh 1.4cqh color-mix(in srgb, var(--mds-accent) 30%, transparent);
+          }
+
+          /* Placeholder ramp: every stand-in surface inside a device screen is
+             an alpha step of the ink. Accent stays on the app mark alone. */
+          .mds-screen {
+            --mds-l1: rgba(15, 23, 42, 0.72);
+            --mds-l2: rgba(15, 23, 42, 0.45);
+            --mds-l3: rgba(15, 23, 42, 0.18);
+            --mds-l4: rgba(15, 23, 42, 0.08);
+          }
+
+          .mds-line {
+            height: 0.7cqh;
+            border-radius: 1cqh;
+            background: #c4ccda;
+          }
+
+          .mds-mobile-header .mds-line {
+            width: 5.4cqw;
+          }
+
+          .mds-mobile-hero {
+            height: 12cqh;
+            margin-bottom: 1.6cqh;
+            border-radius: 1.4cqh;
+            background: var(--mds-l3, rgba(15, 23, 42, 0.18));
+            box-shadow: inset 0 0 0 0.1cqh rgba(15, 23, 42, 0.14);
+          }
+
+          .mds-mobile-row {
+            display: grid;
+            grid-template-columns: 2.6cqh 1fr;
+            gap: 0.75cqw;
+            align-items: center;
+            height: 5.8cqh;
+            margin-top: 1cqh;
+            padding: 0.8cqh 0.75cqw;
+            border-radius: 1.1cqh;
+            background: white;
+            box-shadow: 0 0.55cqh 1.3cqh rgba(30, 41, 59, 0.08);
+          }
+
+          .mds-mobile-icon {
+            width: 2.6cqh;
+            height: 2.6cqh;
+            border-radius: 0.8cqh;
+            background: var(--mds-l3, rgba(15, 23, 42, 0.18));
+          }
+
+          .mds-mobile-row .mds-line:first-child {
+            width: 70%;
+            margin-bottom: 0.7cqh;
+            background: #8e99ab;
+          }
+
+          .mds-mobile-row .mds-line:last-child {
+            width: 46%;
+            height: 0.5cqh;
+          }
+
+          .mds-tablet-ui {
+            display: grid;
+            grid-template-columns: 4.8cqw 1fr;
+            background: #f6f8fc;
+          }
+
+          .mds-tablet-nav,
+          .mds-desktop-nav {
+            background: #182033;
+          }
+
+          .mds-tablet-nav {
+            padding: 4.4cqh 1.25cqw;
+          }
+
+          .mds-nav-mark {
+            width: 2.3cqh;
+            height: 2.3cqh;
+            margin-bottom: 3cqh;
+            border-radius: 0.7cqh;
+            background: var(--mds-accent);
+          }
+
+          .mds-nav-line {
+            width: 100%;
+            height: 0.62cqh;
+            margin-bottom: 1.5cqh;
+            border-radius: 1cqh;
+            background: rgba(255, 255, 255, 0.18);
+          }
+
+          .mds-nav-line-active {
+            background: rgba(255, 255, 255, 0.72);
+          }
+
+          .mds-tablet-main {
+            padding: 4.4cqh 1.5cqw 2.2cqh;
+          }
+
+          .mds-tablet-header {
+            justify-content: space-between;
+            margin-bottom: 2.5cqh;
+          }
+
+          .mds-tablet-header .mds-line:first-child {
+            width: 8cqw;
+            height: 1cqh;
+            background: #657086;
+          }
+
+          .mds-tablet-header .mds-line:last-child {
+            width: 4cqw;
+          }
+
+          .mds-tablet-hero {
+            height: 12cqh;
+            margin-bottom: 1.5cqh;
+            border-radius: 1.25cqh;
+            background: var(--mds-l4, rgba(15, 23, 42, 0.08));
+            box-shadow: inset 0 0 0 0.1cqh rgba(15, 23, 42, 0.14);
+          }
+
+          .mds-tablet-grid {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 1.1cqh;
+          }
+
+          .mds-tablet-card {
+            height: 10.5cqh;
+            padding: 1.2cqh 0.9cqw;
+            border-radius: 1.1cqh;
+            background: white;
+            box-shadow: 0 0.65cqh 1.5cqh rgba(30, 41, 59, 0.08);
+          }
+
+          .mds-tablet-card::before {
+            content: "";
+            display: block;
+            width: 2.2cqh;
+            height: 2.2cqh;
+            margin-bottom: 1.4cqh;
+            border-radius: 0.65cqh;
+            background: var(--mds-l3, rgba(15, 23, 42, 0.18));
+          }
+
+          .mds-tablet-card::after {
+            content: "";
+            display: block;
+            width: 62%;
+            height: 0.65cqh;
+            border-radius: 1cqh;
+            background: #aeb7c6;
+          }
+
+          .mds-desktop-ui {
+            display: grid;
+            grid-template-columns: 7.2cqw 1fr;
+            grid-template-rows: 4.6cqh 1fr;
+            background: #f6f8fc;
+          }
+
+          .mds-desktop-toolbar {
+            grid-column: 1 / -1;
+            gap: 0.55cqw;
+            padding: 0 1.1cqw;
+            border-bottom: 0.1cqh solid #dce2eb;
+            background: white;
+          }
+
+          .mds-window-dot {
+            width: 0.72cqh;
+            height: 0.72cqh;
+            border-radius: 50%;
+            background: #c8ced8;
+          }
+
+          .mds-window-dot-accent {
+            background: var(--mds-accent);
+          }
+
+          .mds-address {
+            width: 13cqw;
+            height: 1.35cqh;
+            margin-left: 1.2cqw;
+            border-radius: 1cqh;
+            background: #edf0f5;
+          }
+
+          .mds-desktop-nav {
+            padding: 2.1cqh 1.1cqw;
+          }
+
+          .mds-desktop-nav .mds-nav-mark {
+            margin-bottom: 2.1cqh;
+          }
+
+          .mds-desktop-main {
+            padding: 2cqh 1.4cqw;
+          }
+
+          .mds-desktop-heading {
+            width: 10cqw;
+            height: 1.2cqh;
+            margin-bottom: 2cqh;
+            border-radius: 1cqh;
+            background: #647086;
+          }
+
+          .mds-desktop-stats {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 0.85cqw;
+            margin-bottom: 1.4cqh;
+          }
+
+          .mds-desktop-stat {
+            height: 7.5cqh;
+            border-radius: 0.9cqh;
+            background: white;
+            box-shadow: 0 0.55cqh 1.25cqh rgba(30, 41, 59, 0.07);
+          }
+
+          .mds-desktop-stat:first-child {
+            background: var(--mds-l3, rgba(15, 23, 42, 0.18));
+          }
+
+          .mds-desktop-chart {
+            position: relative;
+            height: 13cqh;
+            overflow: hidden;
+            border-radius: 1cqh;
+            background:
+              linear-gradient(to top, rgba(203, 213, 225, 0.38) 0.1cqh, transparent 0.1cqh) 0 0 /
+                100% 3.2cqh,
+              white;
+            box-shadow: 0 0.55cqh 1.25cqh rgba(30, 41, 59, 0.07);
+          }
+
+          .mds-desktop-chart::after {
+            content: "";
+            position: absolute;
+            left: 7%;
+            right: 7%;
+            bottom: 18%;
+            height: 0.42cqh;
+            border-radius: 1cqh;
+            background: var(--mds-l2, rgba(15, 23, 42, 0.45));
+            box-shadow:
+              3.5cqw -2.3cqh 0 var(--mds-l2, rgba(15, 23, 42, 0.45)),
+              7cqw -1.1cqh 0 var(--mds-l2, rgba(15, 23, 42, 0.45)),
+              10.5cqw -4.6cqh 0 var(--mds-l2, rgba(15, 23, 42, 0.45)),
+              14cqw -3.6cqh 0 var(--mds-l2, rgba(15, 23, 42, 0.45)),
+              17.5cqw -6.7cqh 0 var(--mds-l2, rgba(15, 23, 42, 0.45));
+          }
+        </style>
+
+        <div
+          id="multi-device-splay-clip"
+          class="mds-clip clip"
+          data-start="0"
+          data-duration="4.5"
+          data-track-index="0"
+        >
+          <div class="mds-stage">
+            <div class="mds-positioner mds-positioner-desktop" data-device="desktop">
+              <div class="mds-device mds-desktop">
+                <div class="mds-monitor">
+                  <div class="mds-screen">
+                    <div class="mds-desktop-ui">
+                      <div class="mds-desktop-toolbar">
+                        <span class="mds-window-dot mds-window-dot-accent"></span>
+                        <span class="mds-window-dot"></span>
+                        <span class="mds-window-dot"></span>
+                        <span class="mds-address"></span>
+                      </div>
+                      <div class="mds-desktop-nav">
+                        <div class="mds-nav-mark"></div>
+                        <div class="mds-nav-line mds-nav-line-active"></div>
+                        <div class="mds-nav-line"></div>
+                        <div class="mds-nav-line"></div>
+                        <div class="mds-nav-line"></div>
+                      </div>
+                      <div class="mds-desktop-main">
+                        <div class="mds-desktop-heading"></div>
+                        <div class="mds-desktop-stats">
+                          <div class="mds-desktop-stat"></div>
+                          <div class="mds-desktop-stat"></div>
+                          <div class="mds-desktop-stat"></div>
+                        </div>
+                        <div class="mds-desktop-chart"></div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="mds-stand-neck"></div>
+                <div class="mds-stand-foot"></div>
+              </div>
+            </div>
+
+            <div class="mds-positioner mds-positioner-tablet" data-device="tablet">
+              <div class="mds-device mds-shell mds-tablet">
+                <div class="mds-screen">
+                  <span class="mds-camera"></span>
+                  <div class="mds-tablet-ui">
+                    <div class="mds-tablet-nav">
+                      <div class="mds-nav-mark"></div>
+                      <div class="mds-nav-line mds-nav-line-active"></div>
+                      <div class="mds-nav-line"></div>
+                      <div class="mds-nav-line"></div>
+                    </div>
+                    <div class="mds-tablet-main">
+                      <div class="mds-tablet-header">
+                        <div class="mds-line"></div>
+                        <div class="mds-line"></div>
+                      </div>
+                      <div class="mds-tablet-hero"></div>
+                      <div class="mds-tablet-grid">
+                        <div class="mds-tablet-card"></div>
+                        <div class="mds-tablet-card"></div>
+                        <div class="mds-tablet-card"></div>
+                        <div class="mds-tablet-card"></div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="mds-positioner mds-positioner-phone" data-device="phone">
+              <div class="mds-device mds-shell mds-phone">
+                <div class="mds-screen">
+                  <span class="mds-island"></span>
+                  <div class="mds-mobile-ui">
+                    <div class="mds-mobile-header">
+                      <span class="mds-logo"></span>
+                      <span class="mds-line"></span>
+                    </div>
+                    <div class="mds-mobile-hero"></div>
+                    <div class="mds-mobile-row">
+                      <span class="mds-mobile-icon"></span>
+                      <span>
+                        <span class="mds-line"></span>
+                        <span class="mds-line"></span>
+                      </span>
+                    </div>
+                    <div class="mds-mobile-row">
+                      <span class="mds-mobile-icon"></span>
+                      <span>
+                        <span class="mds-line"></span>
+                        <span class="mds-line"></span>
+                      </span>
+                    </div>
+                    <div class="mds-mobile-row">
+                      <span class="mds-mobile-icon"></span>
+                      <span>
+                        <span class="mds-line"></span>
+                        <span class="mds-line"></span>
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var accentColors = {
+              green: "var(--brand, #22c55e)",
+              blue: "var(--accent, #3b82f6)",
+              violet: "var(--accent-2, #8b5cf6)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "blue";
+            root.style.setProperty("--mds-accent", accentColors[accent]);
+
+            var IN_BASE = 1.35;
+            var OUT_BASE = 0.55;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4.5"));
+            var totalBase = IN_BASE + OUT_BASE;
+            var envelopeScale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * envelopeScale;
+            var OUT = OUT_BASE * envelopeScale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var HOLD_START = IN;
+            var OUT_START = IN + HOLD;
+
+            var devices = [
+              {
+                element: root.querySelector('[data-device="phone"]'),
+                x: -30,
+                y: 3.5,
+                rotation: -12,
+                floatY: -0.65,
+                floatRotation: -0.55,
+              },
+              {
+                element: root.querySelector('[data-device="tablet"]'),
+                x: -5,
+                y: -1,
+                rotation: 0,
+                floatY: 0.7,
+                floatRotation: 0.35,
+              },
+              {
+                element: root.querySelector('[data-device="desktop"]'),
+                x: 24,
+                y: 2,
+                rotation: 12,
+                floatY: -0.5,
+                floatRotation: 0.5,
+              },
+            ];
+
+            var CASCADE = 0.12 * envelopeScale;
+            var FAN_DURATION = 0.9 * envelopeScale;
+            var tl = gsap.timeline({ paused: true });
+
+            devices.forEach(function (device, index) {
+              gsap.set(device.element, {
+                x: "0cqw",
+                y: "9cqh",
+                rotation: 0,
+                scale: 0.9,
+                opacity: 0,
+              });
+              tl.to(
+                device.element,
+                {
+                  x: device.x + "cqw",
+                  y: device.y + "cqh",
+                  rotation: device.rotation,
+                  scale: 1,
+                  opacity: 1,
+                  duration: FAN_DURATION,
+                  ease: "back.out(1.7)",
+                },
+                index * CASCADE,
+              );
+            });
+
+            if (HOLD > 0) {
+              devices.forEach(function (device) {
+                tl.to(
+                  device.element,
+                  {
+                    y: device.y + device.floatY + "cqh",
+                    rotation: device.rotation + device.floatRotation,
+                    duration: HOLD / 2,
+                    ease: "sine.inOut",
+                  },
+                  HOLD_START,
+                );
+                tl.to(
+                  device.element,
+                  {
+                    y: device.y + "cqh",
+                    rotation: device.rotation,
+                    duration: HOLD / 2,
+                    ease: "sine.inOut",
+                  },
+                  HOLD_START + HOLD / 2,
+                );
+              });
+            }
+
+            devices.forEach(function (device) {
+              tl.to(
+                device.element,
+                {
+                  y: device.y + 5 + "cqh",
+                  scale: 0.96,
+                  opacity: 0,
+                  duration: OUT,
+                  ease: "power2.in",
+                },
+                OUT_START,
+              );
+            });
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["multi-device-splay"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/multi-device-splay/registry-item.json b/registry/components/multi-device-splay/registry-item.json
new file mode 100644
index 0000000000..a3a447ba03
--- /dev/null
+++ b/registry/components/multi-device-splay/registry-item.json
@@ -0,0 +1,34 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "multi-device-splay",
+  "type": "hyperframes:component",
+  "title": "Multi Device Splay",
+  "description": "Phone, tablet, and desktop product mockups fan from a centered stack into a proud splayed arrangement with a subtle idle float.",
+  "tags": ["motion-primitive", "device", "phone", "tablet", "desktop", "splay"],
+  "jobs": ["demonstrate"],
+  "family": "ui-props",
+  "profile": "holdable",
+  "evidence": "Wave F U11 multi-device-splay specification and device-frame-stage geometry conventions",
+  "files": [
+    {
+      "path": "multi-device-splay.html",
+      "target": "compositions/components/multi-device-splay.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Shared accent color used by all three product screens.",
+      "default": "blue",
+      "options": [
+        { "value": "green", "label": "Green" },
+        { "value": "blue", "label": "Blue" },
+        { "value": "violet", "label": "Violet" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/multiplayer-cursors/demo.html b/registry/components/multiplayer-cursors/demo.html
new file mode 100644
index 0000000000..1a60483183
--- /dev/null
+++ b/registry/components/multiplayer-cursors/demo.html
@@ -0,0 +1,121 @@
+<!doctype html>
+<!--
+  multiplayer-cursors demo. Standalone 1920x1080 host that mounts the
+  primitive through data-composition-src. The mount receives non-default
+  cursorCount and labels values, so both variables are proven through the
+  same per-instance path used by installed compositions. The primitive stays
+  responsible for all cursor markup and motion.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Multiplayer Cursors, Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #05070d);
+      }
+
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background:
+          radial-gradient(
+            circle at 50% 46%,
+            color-mix(in srgb, var(--accent, #38bdf8) 12%, transparent),
+            transparent 34%
+          ),
+          linear-gradient(145deg, var(--bg, #0b1220), var(--bg, #05070d) 68%);
+      }
+
+      .mount-card {
+        --bg: #0b1120;
+        --fg: #f8fafc;
+        --muted: #94a3b8;
+        --surface: #e2e8f0;
+        --border: #475569;
+        --brand: #a3e635;
+        --accent: #38bdf8;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-body: Inter, system-ui, sans-serif;
+        --font-mono: ui-monospace, monospace;
+        --radius: 999px;
+        --space-1: 0.7cqw;
+        --space-2: 1.25cqw;
+        --space-3: 2.4cqw;
+        --dur-beat: 0.55s;
+        --ease-standard: cubic-bezier(0.215, 0.61, 0.355, 1);
+        --ease-emphasis: cubic-bezier(0.19, 1, 0.22, 1);
+        position: absolute;
+        width: 54%;
+        height: 56%;
+        left: 23%;
+        top: 22%;
+        overflow: hidden;
+        border: 1px solid color-mix(in srgb, var(--border, #94a3b8) 28%, transparent);
+        border-radius: 36px;
+        background:
+          linear-gradient(
+            color-mix(in srgb, var(--border, #94a3b8) 5.5%, transparent) 1px,
+            transparent 1px
+          ),
+          linear-gradient(
+            90deg,
+            color-mix(in srgb, var(--border, #94a3b8) 5.5%, transparent) 1px,
+            transparent 1px
+          ),
+          radial-gradient(circle at 50% 50%, var(--bg, #162238), var(--bg, #0b1120) 64%);
+        background-size:
+          52px 52px,
+          52px 52px,
+          100% 100%;
+        box-shadow:
+          0 40px 100px color-mix(in srgb, var(--bg, #000000) 46%, transparent),
+          inset 0 1px 0 color-mix(in srgb, var(--fg, #ffffff) 5%, transparent);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="multiplayer-cursors-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="6"
+      data-fps="30"
+    >
+      <div
+        id="multiplayer-cursors-mount"
+        class="mount-card clip"
+        data-composition-id="multiplayer-cursors"
+        data-composition-src="./multiplayer-cursors.html"
+        data-variable-values='{"cursorCount":6,"labels":"Iris,Noah,Sam,Jo,Lee,Zed"}'
+        data-start="0"
+        data-duration="6"
+        data-track-index="0"
+        data-width="1037"
+        data-height="605"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      // Static host only. The mounted primitive owns all visible motion.
+      window.__timelines = window.__timelines || {};
+      window.__timelines["multiplayer-cursors-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/multiplayer-cursors/multiplayer-cursors.html b/registry/components/multiplayer-cursors/multiplayer-cursors.html
new file mode 100644
index 0000000000..e2480424d7
--- /dev/null
+++ b/registry/components/multiplayer-cursors/multiplayer-cursors.html
@@ -0,0 +1,429 @@
+<!doctype html>
+<!--
+  multiplayer-cursors, HyperFrames video primitive (pointers / loop / prove)
+
+  Concept: labeled collaborator cursors, each with an SVG pointer, matching
+  name chip, and soft color glow, reveal from spread positions and glide into
+  a shared center zone. Their gentle authored drift makes live multiplayer
+  presence visible without requiring a product-specific subject.
+
+  Compiled-from evidence: power-reel source 15-frosted-cursors.html
+  (production 60s reel, 2026-07). This extracts the deterministic labeled
+  cursor mechanic and patches the multiplayer-arrows hole predicted by the
+  pointers family definition. It does not carry over that reel's subject,
+  background workspace, frosted chip, real pointer, or You cursor.
+
+  Use when: proving that a canvas, document, board, or workspace supports live
+  collaboration, shared presence, or multiple people editing together.
+
+  Variables (declared in data-composition-variables below):
+    - cursorCount (number, default 4, range 2 to 6): visible collaborators.
+    - labels (string, default "Ana,Ken,Wen,Mia"): comma-separated names in
+      cursor order. Missing or blank entries become deterministic Guest names.
+
+  Envelope (fixed IN/OUT, elastic HOLD only, never gsap.timeScale()):
+    IN_BASE  = 0.70s  layer settles in and cursors reveal with a fixed stagger
+    HOLD     = elastic = max(0, D - (IN_BASE + OUT_BASE)); cursors converge,
+               then drift between authored center-zone points for a finite
+               number of sine.inOut legs that exactly fill the available time
+    OUT_BASE = 0.50s  layer accelerates into a clean fade
+    If D < IN_BASE + OUT_BASE, IN and OUT scale down together so IN + OUT == D
+    and HOLD == 0.
+
+  Sync point: none. This ambient collaboration loop has no causal action or
+  fixed event that another primitive needs to synchronize with.
+
+  Sound cue: none. The cursor motion is ambient and dispatches no hf:sfx event.
+
+  Mount contract: this file is a mountable sub-composition. A host loads it via
+  data-composition-src, and the runtime clones only <template> contents. The
+  root carries no data-width/data-height. It fills the host slot with
+  position:absolute, inset:0, and container-type:size, so every measurement can
+  stay container-relative. The root is styled by #root, never by a class. The
+  hardcoded timeline key remains "multiplayer-cursors" after mount flattening
+  strips data-composition-id from the mounted root. Variables come only from
+  window.__hyperframes.getVariables(), which owns merged defaults and host
+  overrides inside a mounted composition.
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "cursorCount", "type": "number", "role": "content", "label": "Cursor count", "description": "Number of labeled collaborator cursors.", "default": 4, "min": 2, "max": 6, "step": 1 },
+    { "id": "labels", "type": "string", "role": "content", "label": "Labels", "description": "Comma-separated cursor names, in order.", "default": "Ana,Ken,Wen,Mia" }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Multiplayer Cursors</title>
+    <!-- Metadata only. Mounting discards everything outside <template>. -->
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="multiplayer-cursors" data-duration="6" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          /* Root: elastic and position-blind. The host owns its box. Styled by
+             #root so composition scoping continues to match after mounting. */
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+          }
+
+          .mc-clip,
+          .mc-stage,
+          .mc-layer {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+          }
+
+          .mc-stage {
+            transform-origin: center;
+          }
+
+          /* EDIT ZONE: the focus ring is only a neutral convergence landmark.
+             Keep it secondary to the cursors and derived from theme tokens. */
+          .mc-focus {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            width: 15cqw;
+            aspect-ratio: 1;
+            border: 0.18cqw solid color-mix(in srgb, var(--border, #334155) 72%, transparent);
+            border-radius: var(--radius, 999cqw);
+            background: radial-gradient(
+              circle,
+              color-mix(in srgb, var(--surface, #1e293b) 78%, transparent) 0 28%,
+              color-mix(in srgb, var(--brand, #22c55e) 18%, transparent) 30% 48%,
+              transparent 70%
+            );
+            box-shadow:
+              0 0 8cqw color-mix(in srgb, var(--accent, #38bdf8) 16%, transparent),
+              inset 0 0 2.4cqw color-mix(in srgb, var(--brand, #22c55e) 16%, transparent);
+            transform: translate(-50%, -50%);
+            opacity: 0.78;
+          }
+
+          .mc-focus::after {
+            content: "";
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            width: 1.35cqw;
+            aspect-ratio: 1;
+            border-radius: var(--radius, 999cqw);
+            background: var(--brand, #22c55e);
+            box-shadow: 0 0 2.4cqw color-mix(in srgb, var(--brand, #22c55e) 55%, transparent);
+            transform: translate(-50%, -50%);
+          }
+
+          .mc-layer {
+            z-index: 2;
+          }
+
+          /* INVARIANT: each cursor is a sized block. GSAP owns only x, y,
+             rotation, scale, and opacity, so seeked spatial state is stable. */
+          .mc-cursor {
+            position: absolute;
+            left: 0;
+            top: 0;
+            display: block;
+            width: 20cqw;
+            height: 10cqh;
+            color: var(--mc-color, var(--brand, #22c55e));
+            transform-origin: 0 0;
+            will-change: transform, opacity;
+          }
+
+          .mc-cursor[data-tone="0"] {
+            --mc-color: var(--brand, #22c55e);
+          }
+
+          .mc-cursor[data-tone="1"] {
+            --mc-color: var(--accent, #38bdf8);
+          }
+
+          .mc-cursor[data-tone="2"] {
+            --mc-color: color-mix(
+              in oklch longer hue,
+              var(--brand, #22c55e) 72%,
+              var(--accent, #38bdf8)
+            );
+          }
+
+          .mc-cursor[data-tone="3"] {
+            --mc-color: color-mix(
+              in oklch longer hue,
+              var(--brand, #22c55e) 44%,
+              var(--accent, #38bdf8)
+            );
+          }
+
+          .mc-cursor[data-tone="4"] {
+            --mc-color: color-mix(in oklch, var(--brand, #22c55e) 38%, var(--accent, #38bdf8));
+          }
+
+          .mc-cursor[data-tone="5"] {
+            --mc-color: color-mix(in srgb, var(--accent, #38bdf8) 68%, var(--fg, #f8fafc));
+          }
+
+          .mc-glow {
+            position: absolute;
+            left: -6.5cqw;
+            top: -6.5cqw;
+            z-index: -1;
+            width: 16cqw;
+            aspect-ratio: 1;
+            border-radius: var(--radius, 999cqw);
+            background: radial-gradient(
+              circle,
+              color-mix(in srgb, var(--mc-color, var(--brand, #22c55e)) 44%, transparent),
+              transparent 72%
+            );
+            filter: blur(1.4cqw);
+            opacity: 0.58;
+          }
+
+          .mc-pointer {
+            position: absolute;
+            left: 0;
+            top: 0;
+            display: block;
+            width: 4.8cqw;
+            height: 4.8cqw;
+            filter: drop-shadow(
+              0 0.45cqw 0.7cqw color-mix(in srgb, var(--bg, #0b1120) 58%, transparent)
+            );
+          }
+
+          .mc-pointer path {
+            fill: currentColor;
+            stroke: var(--fg, #f8fafc);
+            stroke-width: 1.35;
+            stroke-linejoin: round;
+          }
+
+          .mc-label {
+            position: absolute;
+            left: 3.45cqw;
+            top: 3.55cqw;
+            display: block;
+            max-width: 15cqw;
+            overflow: hidden;
+            padding: var(--space-1, 0.7cqw) var(--space-2, 1.25cqw);
+            border: 0.12cqw solid color-mix(in srgb, var(--fg, #f8fafc) 30%, transparent);
+            border-radius: var(--radius, 1.2cqw);
+            border-top-left-radius: 0.32cqw;
+            background: color-mix(
+              in srgb,
+              var(--mc-color, var(--brand, #22c55e)) 84%,
+              var(--surface, #1e293b)
+            );
+            color: var(--fg, #0b1120);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: 2.15cqw;
+            font-weight: 720;
+            line-height: 1;
+            letter-spacing: 0.01em;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            box-shadow:
+              0 0.65cqw 1.5cqw color-mix(in srgb, var(--bg, #0b1120) 32%, transparent),
+              inset 0 0.12cqw 0 color-mix(in srgb, var(--fg, #f8fafc) 22%, transparent);
+          }
+        </style>
+
+        <div
+          id="multiplayer-cursors-clip"
+          class="mc-clip clip"
+          data-start="0"
+          data-duration="6"
+          data-track-index="0"
+        >
+          <div class="mc-stage">
+            <div class="mc-focus" aria-hidden="true"></div>
+            <div class="mc-layer" aria-hidden="true"></div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.currentScript.closest("#root") || document.getElementById("root");
+            // Literal by contract: mount flattening strips data-composition-id
+            // from the mounted inner root before this registration is consumed.
+            var compositionId = "multiplayer-cursors";
+            var stage = root.querySelector(".mc-stage");
+            var layer = root.querySelector(".mc-layer");
+
+            // EDIT ZONE: variable defaults mirror the outer declaration.
+            // getVariables owns the declared-defaults-plus-host-overrides merge.
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            // INVARIANT: count is always an integer in the declared 2 to 6 range.
+            var rawCount = Number(vars.cursorCount);
+            var cursorCount = Math.max(
+              2,
+              Math.min(6, Number.isFinite(rawCount) ? Math.round(rawCount) : 4),
+            );
+            var rawLabels = vars.labels == null ? "Ana,Ken,Wen,Mia" : String(vars.labels);
+            var parsedLabels = rawLabels.split(",").map(function (label) {
+              return label.trim();
+            });
+
+            // Authored percentages are the single source for every path. Each
+            // row is start, gather, drift, then the matching rotations.
+            var WAYPOINTS = [
+              { start: [10, 16], gather: [42, 40], drift: [46, 36], rotation: [-10, 2, 6] },
+              { start: [66, 12], gather: [52, 38], drift: [58, 42], rotation: [8, -3, 4] },
+              { start: [76, 38], gather: [57, 49], drift: [54, 55], rotation: [12, 3, -4] },
+              { start: [64, 76], gather: [53, 59], drift: [48, 57], rotation: [-8, 4, -3] },
+              { start: [20, 76], gather: [43, 60], drift: [38, 55], rotation: [9, -4, 5] },
+              { start: [7, 46], gather: [38, 50], drift: [42, 45], rotation: [-12, 3, -5] },
+            ];
+            var POINTER_SVG =
+              '<svg class="mc-pointer" viewBox="0 0 24 24" fill="none"><path d="M5.5 3.21V20.8c0 .45.54.67.85.35l4.86-4.86a.5.5 0 0 1 .35-.15h6.87c.48 0 .72-.58.38-.92L5.94 2.47a.5.5 0 0 0-.44.74Z" /></svg>';
+            var cursors = [];
+
+            for (var index = 0; index < cursorCount; index += 1) {
+              var cursor = document.createElement("div");
+              cursor.className = "mc-cursor";
+              cursor.dataset.tone = String(index);
+              cursor.innerHTML = '<span class="mc-glow"></span>' + POINTER_SVG;
+
+              var label = document.createElement("span");
+              label.className = "mc-label";
+              label.textContent = parsedLabels[index] || "Guest " + (index + 1);
+              cursor.appendChild(label);
+              layer.appendChild(cursor);
+              cursors.push({ element: cursor, path: WAYPOINTS[index] });
+            }
+
+            // RETIME RANGE: fixed envelope values and authored motion cadence.
+            // HOLD alone expands. Finite drift legs are floored, then stretched
+            // evenly to fill their remaining window without overshooting OUT.
+            var IN_BASE = 0.7;
+            var OUT_BASE = 0.5;
+            var STAGE_IN_BASE = 0.42;
+            var REVEAL_BASE = 0.26;
+            var REVEAL_STAGGER_BASE = 0.055;
+            var MOVE_STAGGER_BASE = 0.035;
+            var CONVERGE_BASE = 1.35;
+            var beat = parseFloat(getComputedStyle(root).getPropertyValue("--dur-beat")) || 0.55;
+            var DRIFT_LEG_BASE = Math.max(0.55, beat * 1.45);
+
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "6"));
+            var totalBase = IN_BASE + OUT_BASE;
+            var envelopeScale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * envelopeScale;
+            var OUT = OUT_BASE * envelopeScale;
+            var STAGE_IN = STAGE_IN_BASE * envelopeScale;
+            var REVEAL = REVEAL_BASE * envelopeScale;
+            var REVEAL_STAGGER = REVEAL_STAGGER_BASE * envelopeScale;
+            var MOVE_STAGGER = MOVE_STAGGER_BASE * envelopeScale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var HOLD_START = IN;
+            var OUT_START = IN + HOLD;
+            var CONVERGE = Math.min(CONVERGE_BASE * envelopeScale, HOLD);
+            var DRIFT_START = HOLD_START + CONVERGE;
+            var DRIFT_WINDOW = Math.max(0, HOLD - CONVERGE);
+
+            gsap.set(stage, { opacity: 0, scale: 0.97 });
+            cursors.forEach(function (cursor) {
+              gsap.set(cursor.element, {
+                x: cursor.path.start[0] + "cqw",
+                y: cursor.path.start[1] + "cqh",
+                rotation: cursor.path.rotation[0],
+                opacity: 0,
+                scale: 0.92,
+              });
+            });
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: emphatic layer settle and deterministic per-cursor reveal.
+            tl.to(stage, { opacity: 1, scale: 1, duration: STAGE_IN, ease: "power3.out" }, 0);
+            cursors.forEach(function (cursor, index) {
+              tl.to(
+                cursor.element,
+                { opacity: 1, scale: 1, duration: REVEAL, ease: "power2.out" },
+                index * REVEAL_STAGGER,
+              );
+            });
+
+            // HOLD: authored sine convergence, then a finite center-zone loop.
+            if (CONVERGE > 0) {
+              cursors.forEach(function (cursor, index) {
+                var moveDelay = Math.min(index * MOVE_STAGGER, CONVERGE * 0.35);
+                tl.to(
+                  cursor.element,
+                  {
+                    x: cursor.path.gather[0] + "cqw",
+                    y: cursor.path.gather[1] + "cqh",
+                    rotation: cursor.path.rotation[1],
+                    duration: Math.max(0.001, CONVERGE - moveDelay),
+                    ease: "sine.inOut",
+                  },
+                  HOLD_START + moveDelay,
+                );
+              });
+            }
+
+            if (DRIFT_WINDOW >= DRIFT_LEG_BASE) {
+              cursors.forEach(function (cursor, index) {
+                var driftDelay = Math.min(index * MOVE_STAGGER, DRIFT_WINDOW * 0.12);
+                var cursorWindow = Math.max(0, DRIFT_WINDOW - driftDelay);
+                var driftLegCount = Math.max(1, Math.floor(cursorWindow / DRIFT_LEG_BASE));
+                var driftLeg = cursorWindow / driftLegCount;
+                var driftRepeat = Math.max(0, driftLegCount - 1);
+                tl.fromTo(
+                  cursor.element,
+                  {
+                    x: cursor.path.gather[0] + "cqw",
+                    y: cursor.path.gather[1] + "cqh",
+                    rotation: cursor.path.rotation[1],
+                  },
+                  {
+                    x: cursor.path.drift[0] + "cqw",
+                    y: cursor.path.drift[1] + "cqh",
+                    rotation: cursor.path.rotation[2],
+                    duration: driftLeg,
+                    ease: "sine.inOut",
+                    immediateRender: false,
+                    yoyo: true,
+                    repeat: driftRepeat,
+                  },
+                  DRIFT_START + driftDelay,
+                );
+              });
+            }
+
+            // OUT: asymmetric accelerated fade, while HOLD motion resolves.
+            tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/multiplayer-cursors/registry-item.json b/registry/components/multiplayer-cursors/registry-item.json
new file mode 100644
index 0000000000..58a2f5603b
--- /dev/null
+++ b/registry/components/multiplayer-cursors/registry-item.json
@@ -0,0 +1,40 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "multiplayer-cursors",
+  "type": "hyperframes:component",
+  "title": "Multiplayer Cursors",
+  "description": "Labeled collaborator cursors with token-derived colors and soft glows drift from spread positions into a shared center zone, proving live multiplayer presence.",
+  "tags": ["cursor", "pointer", "multiplayer", "collaboration", "presence", "loop", "prove"],
+  "jobs": ["prove"],
+  "family": "pointers",
+  "profile": "loop",
+  "evidence": "power-reel source 15-frosted-cursors.html; patches the multiplayer-arrows hole the family definition predicted",
+  "files": [
+    {
+      "path": "multiplayer-cursors.html",
+      "target": "compositions/components/multiplayer-cursors.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "cursorCount",
+      "type": "number",
+      "role": "content",
+      "label": "Cursor count",
+      "description": "Number of labeled collaborator cursors.",
+      "default": 4,
+      "min": 2,
+      "max": 6,
+      "step": 1
+    },
+    {
+      "id": "labels",
+      "type": "string",
+      "role": "content",
+      "label": "Labels",
+      "description": "Comma-separated cursor names, in order.",
+      "default": "Ana,Ken,Wen,Mia"
+    }
+  ]
+}
diff --git a/registry/components/native-notification-pop/README.md b/registry/components/native-notification-pop/README.md
new file mode 100644
index 0000000000..159e7c2397
--- /dev/null
+++ b/registry/components/native-notification-pop/README.md
@@ -0,0 +1,101 @@
+# native-notification-pop
+
+One system-faithful notification banner drops in over any scene: fast
+arrival, soft overshoot, settled mass. The `os` enum picks the chrome
+geometry (`ios` is a wide centered banner with a large radius, `macos` is a
+compact top-right banner). The banner carries an app dot, a small-caps app
+label, a title, and one body line over a backdrop blur; it holds at rest and
+tucks away only via the `exit` variable. Distinct from notification-stack:
+this is overlay chrome, faithful to the OS, one banner.
+
+Arrival is a closed-form underdamped spring sampled from a linear driver, so
+the banner's position is a pure function of timeline time: seeks in either
+direction land on identical frames, and the motion is interruptible in the
+Wave K L1 sense (banner y has exactly one owner at any moment; nothing ever
+snaps to zero velocity mid-flight).
+
+## Files
+
+- `native-notification-pop.html`: the mountable sub-composition (install
+  target: `compositions/components/native-notification-pop.html`).
+- `registry-item.json`: registry metadata and the variables block.
+
+## Variables
+
+| id          | type   | default                              | notes                                                                     |
+| ----------- | ------ | ------------------------------------ | ------------------------------------------------------------------------- |
+| `title`     | string | `Render complete`                    | the notification title line                                               |
+| `body`      | string | `launch-cut.mp4 is ready to preview` | one body line; long lines truncate with an ellipsis                       |
+| `app_label` | string | `HyperFrames`                        | small-caps app name row; empty string hides the row                       |
+| `os`        | enum   | `ios`                                | `ios` = wide centered banner, `macos` = compact top-right banner          |
+| `at`        | number | `0.3`                                | seconds after mount start when the drop begins (clamped before any exit)  |
+| `accent`    | enum   | `green`                              | `green` maps to `--brand`, `blue` to `--accent`, `violet` to `--accent-2` |
+| `exit`      | enum   | `none`                               | `none` holds; `up` tucks the banner back off the top; `fade` fades it     |
+
+Envelope: IN = `at` + 0.9s spring drop (first contact with rest at `at` +
+~0.31s), OUT = 0.45s only when `exit` is `fade` or `up`, HOLD is the sole
+elastic phase and the banner rests dead still. The `banner-land` sync point
+(`hf:sfx` id `notification-pop`) fires at first contact with rest, 0.61s at
+defaults. `exit` moves only the banner; the scene slot holds regardless
+(frame roots own scene transitions).
+
+## The slot mechanism
+
+The primitive ships one named slot inside its `<template>`:
+
+```html
+<div class="nnp-slot" data-slot="scene">...</div>
+```
+
+The slot's default children are a token backdrop (soft color fields plus a
+skeleton card, saturated enough that the banner blur visibly reads), so an
+untouched mount still works as a complete overlay demo. To drop the banner
+over your own scene, install the component and **replace the children of the
+`[data-slot="scene"]` element in your installed copy** (the runtime clones
+only the primitive's own template on mount, so slot content lives in the
+component file, not on the host clip).
+
+Rules:
+
+- The slot is full-bleed. Direct `img`/`video` children are automatically
+  sized to cover the frame (`object-fit: cover`). Arbitrary HTML works too;
+  size it in `cqw`/`cqh`.
+- Keep the banner and its anchor alone; they render above slot content.
+- The banner backdrop blur samples whatever the slot shows; busy, colorful
+  scenes read best. If your host compositor flattens the blur, the
+  translucent surface fill underneath carries the banner on its own.
+
+## Worked example
+
+Install, then fill the slot with a product screenshot:
+
+```bash
+npx hyperframes add native-notification-pop
+```
+
+In `compositions/components/native-notification-pop.html`, replace the
+slot's default block:
+
+```html
+<div class="nnp-slot" data-slot="scene">
+  <img src="../../assets/editor-timeline.png" alt="" />
+</div>
+```
+
+Mount it from a host composition like any sub-composition:
+
+```html
+<div
+  class="clip"
+  data-composition-id="native-notification-pop"
+  data-composition-src="./components/native-notification-pop.html"
+  data-variable-values='{"title":"Export finished","body":"reel-final.mov saved to Renders","app_label":"Conveyor","os":"macos","accent":"blue"}'
+  data-start="6"
+  data-duration="3"
+  data-track-index="1"
+></div>
+```
+
+The macOS banner springs in at the top right 0.3s after the clip mounts,
+settles with a soft overshoot, and holds at rest for the remainder of the
+clip window (`exit` defaults to `none`; frame roots own scene transitions).
diff --git a/registry/components/native-notification-pop/demo.html b/registry/components/native-notification-pop/demo.html
new file mode 100644
index 0000000000..f5cbff9230
--- /dev/null
+++ b/registry/components/native-notification-pop/demo.html
@@ -0,0 +1,93 @@
+<!doctype html>
+<!--
+  native-notification-pop demo. This standalone composition mounts the
+  primitive through data-composition-src. Non-default os, title, body,
+  app_label, at, and accent values prove the variable path while the
+  primitive remains elastic to its host.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>native-notification-pop Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #0b0c0e);
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --muted: #8b95a6;
+        --surface: #14171c;
+        --border: #343a46;
+        --brand: #71f5a7;
+        --accent: #61a8ff;
+        --accent-2: #c5a3ff;
+        --font-body: system-ui, -apple-system, "Segoe UI", sans-serif;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(
+          ellipse at 50% 44%,
+          var(--bg, #171a20) 0%,
+          var(--bg, #0b0c0e) 72%
+        );
+      }
+
+      .mount-card {
+        width: 84%;
+        height: 82%;
+        left: 8%;
+        top: 9%;
+        container-type: size;
+        overflow: hidden;
+        border: 1px solid color-mix(in srgb, var(--border, #94a3b8) 20%, transparent);
+        border-radius: 30px;
+        background: color-mix(in srgb, var(--surface, #101318) 72%, transparent);
+        box-shadow: 0 40px 100px color-mix(in srgb, var(--bg, #000000) 48%, transparent);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="native-notification-pop-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="3"
+      data-fps="30"
+    >
+      <div
+        id="native-notification-pop-mount"
+        class="mount-card clip"
+        data-composition-id="native-notification-pop"
+        data-composition-src="./native-notification-pop.html"
+        data-variable-values='{"title":"Export finished","body":"reel-final.mov saved to Renders","app_label":"Conveyor","os":"macos","at":0.45,"accent":"blue"}'
+        data-start="0"
+        data-duration="3"
+        data-track-index="0"
+        data-width="1613"
+        data-height="886"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["native-notification-pop-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/native-notification-pop/native-notification-pop.html b/registry/components/native-notification-pop/native-notification-pop.html
new file mode 100644
index 0000000000..5b890d17b7
--- /dev/null
+++ b/registry/components/native-notification-pop/native-notification-pop.html
@@ -0,0 +1,456 @@
+<!doctype html>
+<!--
+  native-notification-pop: HyperFrames video primitive (product-demo / overlay)
+
+  One system-faithful notification banner drops in over ANY scene: fast
+  arrival, soft overshoot, settled mass. The os enum picks the chrome
+  geometry: ios is a wide centered banner with a large radius, macos is a
+  compact top-right banner. The banner carries an app dot, an app label, a
+  title, and one body line over a backdrop-filter blur; it holds at rest and
+  tucks away only via the exit variable. Distinct from notification-stack:
+  this is overlay chrome, faithful to the OS, one banner.
+
+  Spring law: arrival is a closed-form underdamped spring sampled from a
+  linear driver, y(t) = -offset * e^(-zeta*w*t) * (cos(wd*t) +
+  (zeta*w/wd) * sin(wd*t)). Position is a pure function of timeline time, so
+  forward seeks, reverse seeks, and repeated seeks are byte-identical, and a
+  mid-motion redirect (an exit overlapping the drop) picks up the current
+  sampled position instead of snapping (Wave K L1): banner y has exactly one
+  owner at any time (spring sampler, then the rest pin, then the exit tween,
+  in timeline order), and the drop cue is clamped so the spring always
+  completes before OUT begins.
+
+  Backdrop blur: the banner uses backdrop-filter blur + saturate over the
+  scene. If a host compositor flattens or lags the blur under seeks, remove
+  the backdrop-filter lines; the color-mix surface fill underneath is opaque
+  enough to carry the banner on its own (verified fallback).
+
+  Slot (see README.md for a worked example):
+    - [data-slot="scene"]: the full-bleed background the banner drops over.
+      Replace the children of this element in your installed copy. Default:
+      a token backdrop with soft color fields and a skeleton card, saturated
+      enough that the banner blur visibly reads.
+
+  Variables (declared in data-composition-variables below):
+    - title (string): the notification title line.
+    - body (string): one body line. Long lines truncate with an ellipsis.
+    - app_label (string, default "HyperFrames"): small-caps app name row.
+    - os (ios | macos, default ios): banner geometry and placement.
+    - at (number, seconds, default 0.3): when the drop starts, relative to
+      mount start. Clamped so the spring settles before any exit.
+    - accent (green | blue | violet, default green): app dot color.
+      green maps to --brand, blue to --accent, violet to --accent-2.
+    - exit (none | fade | up, default none): none holds the banner at rest;
+      up tucks the banner back off the top (the native dismiss); fade fades
+      it in place. The scene slot holds regardless: frame roots own scene
+      transitions.
+
+  Envelope (fixed IN/OUT, elastic HOLD only, never gsap.timeScale()):
+    IN   = at + 0.9s spring drop (first contact with rest at at + ~0.31s)
+    HOLD = elastic; the banner rests dead still
+    OUT  = 0.45s when exit is fade or up, 0 when exit is none
+
+  Sound cue: dispatches a bubbling `hf:sfx` CustomEvent with id
+  "notification-pop" at first contact with rest. This primitive never plays
+  audio.
+
+  Mount contract: MOUNTABLE SUB-COMPOSITION. The runtime clones only
+  <template> contents; #root fills the host box (inset: 0, container-type:
+  size), has no data-width/data-height, and registers one paused timeline
+  under the literal "native-notification-pop" key. Variables come from
+  window.__hyperframes.getVariables().
+-->
+<html
+  lang="en"
+  data-composition-id="native-notification-pop"
+  data-composition-duration="3"
+  data-composition-variables='[
+    { "id": "title", "type": "string", "role": "content", "label": "Title", "description": "The notification title line.", "default": "Render complete" },
+    { "id": "body", "type": "string", "role": "content", "label": "Body", "description": "One body line. Long lines truncate with an ellipsis.", "default": "launch-cut.mp4 is ready to preview" },
+    { "id": "app_label", "type": "string", "role": "content", "label": "App label", "description": "Small-caps app name row beside the app dot.", "default": "HyperFrames" },
+    { "id": "os", "type": "enum", "role": "style", "label": "OS", "description": "Banner geometry and placement: wide centered iOS or compact top-right macOS.", "default": "ios", "options": [{ "value": "ios", "label": "iOS" }, { "value": "macos", "label": "macOS" }] },
+    { "id": "at", "type": "number", "role": "timing", "label": "Drop start", "description": "Seconds after mount start when the banner drops in.", "default": 0.3, "min": 0, "max": 8, "step": 0.05, "unit": "s" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "App dot color.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "None holds the banner; up tucks it back off the top; fade fades it in place.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Native Notification Pop</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="native-notification-pop" data-duration="3" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            background: var(--bg, #07111f);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .nnp-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+          }
+
+          .nnp-slot,
+          .nnp-slot > img,
+          .nnp-slot > video {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+          }
+
+          .nnp-slot > img,
+          .nnp-slot > video {
+            object-fit: cover;
+          }
+
+          /* Token backdrop default: soft saturated color fields plus a
+             skeleton card, so the banner blur has structure to smear.
+             Callers replacing slot children never see any of this. */
+          .nnp-default {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            background:
+              radial-gradient(
+                50cqw 42cqh at 24% 12%,
+                color-mix(in srgb, var(--brand, #22c55e) 34%, transparent) 0%,
+                transparent 70%
+              ),
+              radial-gradient(
+                46cqw 40cqh at 82% 26%,
+                color-mix(in srgb, var(--accent-2, #c5a3ff) 30%, transparent) 0%,
+                transparent 70%
+              ),
+              radial-gradient(
+                ellipse at 50% 90%,
+                color-mix(in srgb, var(--surface, #172033) 80%, var(--bg, #07111f)) 0%,
+                var(--bg, #07111f) 78%
+              );
+          }
+
+          .nnp-card {
+            width: 52cqw;
+            padding: var(--space-3, 4cqh) var(--space-3, 4cqw);
+            border: 0.16cqmin solid var(--border, #334155);
+            border-radius: var(--radius, 2.4cqmin);
+            background: color-mix(in srgb, var(--surface, #172033) 88%, var(--bg, #07111f));
+          }
+
+          .nnp-card-bar {
+            width: 34%;
+            height: 4.2cqh;
+            margin-bottom: var(--space-3, 4cqh);
+            border-radius: 1.2cqh;
+            background: var(--muted, #94a3b8);
+            opacity: 0.55;
+          }
+
+          .nnp-card-line {
+            height: 2.2cqh;
+            margin-bottom: var(--space-2, 2.6cqh);
+            border-radius: 1.2cqh;
+            background: var(--muted, #94a3b8);
+            opacity: 0.38;
+          }
+
+          .nnp-card-line:nth-of-type(2) {
+            width: 90%;
+          }
+
+          .nnp-card-line:nth-of-type(3) {
+            width: 62%;
+          }
+
+          /* The anchor owns placement so the banner transform belongs to the
+             spring alone (a translateX(-50%) centering transform would be
+             clobbered by the gsap y). */
+          .nnp-anchor {
+            position: absolute;
+            inset: 0 0 auto 0;
+            display: flex;
+            z-index: 3;
+          }
+
+          .nnp-anchor[data-os="ios"] {
+            justify-content: center;
+            padding-top: 4.5cqh;
+          }
+
+          .nnp-anchor[data-os="macos"] {
+            justify-content: flex-end;
+            padding: 3.5cqh 2.2cqw 0 0;
+          }
+
+          .nnp-banner {
+            display: flex;
+            align-items: center;
+            gap: var(--space-2, 2.4cqmin);
+            border: 0.14cqmin solid color-mix(in srgb, var(--fg, #f8fafc) 16%, transparent);
+            background: color-mix(in srgb, var(--surface, #172033) 62%, transparent);
+            -webkit-backdrop-filter: blur(3.2cqmin) saturate(140%);
+            backdrop-filter: blur(3.2cqmin) saturate(140%);
+            box-shadow: 0 2.4cqh 7cqh color-mix(in srgb, var(--bg, #07111f) 50%, transparent);
+            will-change: transform;
+          }
+
+          .nnp-anchor[data-os="ios"] .nnp-banner {
+            width: 58cqw;
+            border-radius: 3.6cqmin;
+            padding: 2.6cqmin 3cqmin;
+          }
+
+          .nnp-anchor[data-os="macos"] .nnp-banner {
+            width: 38cqw;
+            border-radius: 2.2cqmin;
+            padding: 2.2cqmin 2.6cqmin;
+          }
+
+          .nnp-dot {
+            flex: 0 0 auto;
+            width: 5.4cqmin;
+            aspect-ratio: 1;
+            border-radius: 30%;
+            background: linear-gradient(
+              160deg,
+              color-mix(in srgb, var(--nnp-accent) 72%, var(--fg, #f8fafc)) 0%,
+              var(--nnp-accent) 62%
+            );
+          }
+
+          .nnp-anchor[data-os="macos"] .nnp-dot {
+            width: 4.6cqmin;
+            border-radius: 24%;
+          }
+
+          .nnp-copy {
+            flex: 1 1 auto;
+            min-width: 0;
+          }
+
+          .nnp-app,
+          .nnp-title,
+          .nnp-body {
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+          }
+
+          .nnp-app {
+            color: var(--muted, #94a3b8);
+            font-size: 1.9cqmin;
+            font-weight: 500;
+            letter-spacing: 0.11em;
+            line-height: 1.5;
+            text-transform: uppercase;
+          }
+
+          .nnp-app:empty {
+            display: none;
+          }
+
+          .nnp-title {
+            color: var(--fg, #f8fafc);
+            font-size: 2.7cqmin;
+            font-weight: 600;
+            line-height: 1.35;
+          }
+
+          .nnp-body {
+            color: var(--muted, #94a3b8);
+            font-size: 2.4cqmin;
+            font-weight: 400;
+            line-height: 1.4;
+          }
+        </style>
+
+        <div
+          id="native-notification-pop-clip"
+          class="nnp-clip clip"
+          data-start="0"
+          data-duration="3"
+          data-track-index="0"
+        >
+          <div class="nnp-slot" data-slot="scene">
+            <!-- SLOT "scene": replace the children of this element with your
+                 own full-bleed content (img, video, or HTML). -->
+            <div class="nnp-default" aria-hidden="true">
+              <div class="nnp-card">
+                <div class="nnp-card-bar"></div>
+                <div class="nnp-card-line"></div>
+                <div class="nnp-card-line"></div>
+              </div>
+            </div>
+          </div>
+
+          <div class="nnp-anchor" data-os="ios">
+            <div class="nnp-banner" role="status">
+              <div class="nnp-dot" aria-hidden="true"></div>
+              <div class="nnp-copy">
+                <div class="nnp-app"></div>
+                <div class="nnp-title"></div>
+                <div class="nnp-body"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            // Literal id: mount flattening strips data-composition-id from the
+            // live root before this timeline registers.
+            var compositionId = "native-notification-pop";
+            var clip = root.querySelector(".nnp-clip");
+            var anchor = root.querySelector(".nnp-anchor");
+            var banner = root.querySelector(".nnp-banner");
+
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var title = vars.title == null ? "Render complete" : String(vars.title);
+            var body = vars.body == null ? "launch-cut.mp4 is ready to preview" : String(vars.body);
+            var appLabel = vars.app_label == null ? "HyperFrames" : String(vars.app_label);
+            var os = vars.os === "macos" ? "macos" : "ios";
+            var rawAt = vars.at == null ? 0.3 : Number(vars.at);
+            var at = Number.isFinite(rawAt) ? Math.max(0, Math.min(8, rawAt)) : 0.3;
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #22c55e)",
+              blue: "var(--accent, #38bdf8)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            // The bundler mirrors composition variables as scoped CSS custom
+            // props, so this unit's own accent variable shadows the contract
+            // --accent token inside the subtree. When the shadow is present,
+            // fall back to the literal contract value instead of var(--accent).
+            var computedAccent = getComputedStyle(root).getPropertyValue("--accent").trim();
+            if (
+              computedAccent === "green" ||
+              computedAccent === "blue" ||
+              computedAccent === "violet"
+            ) {
+              accentColors.blue = "#38bdf8";
+            }
+            root.style.setProperty("--nnp-accent", accentColors[accent]);
+
+            anchor.setAttribute("data-os", os);
+            root.querySelector(".nnp-app").textContent = appLabel;
+            root.querySelector(".nnp-title").textContent = title;
+            root.querySelector(".nnp-body").textContent = body;
+            banner.setAttribute("aria-label", appLabel + ": " + title + ". " + body);
+
+            // RETIME RANGE: fixed phases; HOLD is the only elastic span.
+            var DROP = 0.9;
+            var OUT_BASE = exit === "none" ? 0 : 0.45;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "3"));
+            var OUT = Math.min(OUT_BASE, duration * 0.2);
+            var OUT_START = duration - OUT;
+            // The spring always settles before any exit: no second tween ever
+            // fights the sampler for banner y (Wave K L1 single-owner form).
+            at = Math.min(at, Math.max(0, OUT_START - DROP));
+
+            // Start fully above the frame: measured px at mount (cq-unit
+            // transform tweens misbehave under seeks; px measured once do not).
+            var clipTop = clip.getBoundingClientRect().top;
+            var bannerBottom = banner.getBoundingClientRect().bottom;
+            var offset = Math.max(1, bannerBottom - clipTop + 4);
+
+            // System spring constants, tuned against the iOS/macOS banner
+            // feel: first contact with rest at ~0.31s, ~3% soft overshoot,
+            // visually settled by ~0.7s.
+            var OMEGA = 15;
+            var ZETA = 0.74;
+            var OMEGA_D = OMEGA * Math.sqrt(1 - ZETA * ZETA);
+            function springEnvelope(t) {
+              return (
+                Math.exp(-ZETA * OMEGA * t) *
+                (Math.cos(OMEGA_D * t) + ((ZETA * OMEGA) / OMEGA_D) * Math.sin(OMEGA_D * t))
+              );
+            }
+            var LAND = Math.PI / OMEGA_D; // first contact with rest
+
+            function fireSfx(id, t) {
+              root.dispatchEvent(
+                new CustomEvent("hf:sfx", { detail: { id: id, t: t }, bubbles: true }),
+              );
+            }
+
+            gsap.set(banner, { y: -offset, opacity: 1 });
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: the spring drop. A linear driver samples the closed form,
+            // so position is a pure function of time and seeks in either
+            // direction land on identical frames.
+            var driver = { t: 0 };
+            tl.to(
+              driver,
+              {
+                t: DROP,
+                duration: DROP,
+                ease: "none",
+                onUpdate: function () {
+                  gsap.set(banner, { y: -offset * springEnvelope(driver.t) });
+                },
+              },
+              at,
+            );
+            // Pin exactly to rest for the hold (the envelope tail is ~0 but
+            // not exactly 0).
+            tl.set(banner, { y: 0 }, at + DROP);
+            tl.call(
+              function () {
+                fireSfx("notification-pop", at + LAND);
+              },
+              [],
+              at + LAND,
+            );
+
+            // HOLD: settled mass. Dead still.
+
+            // OUT: the banner tucks away only via exit; the scene holds
+            // (frame roots own scene transitions).
+            if (exit === "up") {
+              tl.to(banner, { y: -offset, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "fade") {
+              tl.to(banner, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/native-notification-pop/registry-item.json b/registry/components/native-notification-pop/registry-item.json
new file mode 100644
index 0000000000..4009d78408
--- /dev/null
+++ b/registry/components/native-notification-pop/registry-item.json
@@ -0,0 +1,96 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "native-notification-pop",
+  "type": "hyperframes:component",
+  "title": "Native Notification Pop",
+  "description": "One system-faithful notification banner (iOS or macOS) drops in over any scene on an accurate interruptible spring: fast arrival, soft overshoot, settled mass, backdrop blur, app dot, title, one body line. Holds; tucks away only via exit.",
+  "tags": ["motion-primitive", "product-demo", "overlay", "notification", "spring"],
+  "jobs": ["demonstrate"],
+  "family": "product-demo",
+  "profile": "holdable",
+  "evidence": "Wave K K5 native-notification-pop specification; closed-form underdamped spring sampled from a linear driver for seek-safe, interruptible native banner motion (L1)",
+  "syncPoints": [{ "id": "banner-land", "phase": "in", "offset": 0.61 }],
+  "files": [
+    {
+      "path": "native-notification-pop.html",
+      "target": "compositions/components/native-notification-pop.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "title",
+      "type": "string",
+      "role": "content",
+      "label": "Title",
+      "description": "The notification title line.",
+      "default": "Render complete"
+    },
+    {
+      "id": "body",
+      "type": "string",
+      "role": "content",
+      "label": "Body",
+      "description": "One body line. Long lines truncate with an ellipsis.",
+      "default": "launch-cut.mp4 is ready to preview"
+    },
+    {
+      "id": "app_label",
+      "type": "string",
+      "role": "content",
+      "label": "App label",
+      "description": "Small-caps app name row beside the app dot.",
+      "default": "HyperFrames"
+    },
+    {
+      "id": "os",
+      "type": "enum",
+      "role": "style",
+      "label": "OS",
+      "description": "Banner geometry and placement: wide centered iOS or compact top-right macOS.",
+      "default": "ios",
+      "options": [
+        { "value": "ios", "label": "iOS" },
+        { "value": "macos", "label": "macOS" }
+      ]
+    },
+    {
+      "id": "at",
+      "type": "number",
+      "role": "timing",
+      "label": "Drop start",
+      "description": "Seconds after mount start when the banner drops in.",
+      "default": 0.3,
+      "min": 0,
+      "max": 8,
+      "step": 0.05,
+      "unit": "s"
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "App dot color.",
+      "default": "green",
+      "options": [
+        { "value": "green", "label": "Green" },
+        { "value": "blue", "label": "Blue" },
+        { "value": "violet", "label": "Violet" }
+      ]
+    },
+    {
+      "id": "exit",
+      "type": "enum",
+      "role": "timing",
+      "label": "Exit",
+      "description": "None holds the banner; up tucks it back off the top; fade fades it in place.",
+      "default": "none",
+      "options": [
+        { "value": "none", "label": "None" },
+        { "value": "fade", "label": "Fade" },
+        { "value": "up", "label": "Up" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/notification-pileup/demo.html b/registry/components/notification-pileup/demo.html
new file mode 100644
index 0000000000..bebe381843
--- /dev/null
+++ b/registry/components/notification-pileup/demo.html
@@ -0,0 +1,95 @@
+<!doctype html>
+<!--
+  notification-pileup demo. This standalone 1920x1080 host mounts the
+  primitive through data-composition-src instead of inlining it. Non-default
+  count, speed, and showBadges values prove per-instance variables cross the
+  mount boundary. The host owns only the stage and an empty paused timeline.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Notification Pileup Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--demo-bg, #05070d);
+      }
+
+      #root {
+        --bg: #0b1120;
+        --fg: #f8fafc;
+        --surface: #1e293b;
+        --brand: #22c55e;
+        --muted: #94a3b8;
+        --border: #334155;
+        --accent: #38bdf8;
+        --font-body: Inter, system-ui, sans-serif;
+        --font-display: Inter, system-ui, sans-serif;
+        --dur-beat: 0.5s;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(
+          circle at 50% 42%,
+          color-mix(in srgb, var(--surface) 68%, var(--bg)),
+          var(--bg) 72%
+        );
+      }
+
+      .mount-card {
+        position: absolute;
+        left: 16%;
+        top: 9%;
+        width: 68%;
+        height: 82%;
+        overflow: hidden;
+        border: 2px solid color-mix(in srgb, var(--border) 70%, transparent);
+        border-radius: 40px;
+        background: var(--bg);
+        box-shadow: 0 42px 110px color-mix(in srgb, var(--bg) 72%, transparent);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="notification-pileup-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="8"
+      data-fps="30"
+    >
+      <div
+        id="notification-pileup-mount"
+        class="mount-card clip"
+        data-composition-id="notification-pileup"
+        data-composition-src="./notification-pileup.html"
+        data-variable-values='{"count":9,"speed":0.75,"showBadges":"no"}'
+        data-start="0"
+        data-duration="8"
+        data-track-index="0"
+        data-width="1306"
+        data-height="886"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      // No motion of its own. The mounted primitive owns the pileup timeline.
+      window.__timelines = window.__timelines || {};
+      window.__timelines["notification-pileup-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/notification-pileup/notification-pileup.html b/registry/components/notification-pileup/notification-pileup.html
new file mode 100644
index 0000000000..129f1b40ba
--- /dev/null
+++ b/registry/components/notification-pileup/notification-pileup.html
@@ -0,0 +1,463 @@
+<!doctype html>
+<!--
+  notification-pileup, HyperFrames video primitive (ui-props / loop / agitate)
+
+  Concept: mobile notification cards arrive faster than they can be read.
+  Every new card lands at the top and pushes the existing stack downward,
+  building an anxious but legible tower.
+
+  Compiled-from evidence: fixture; mobile mechanics inventory.
+
+  Use when: a scene needs a mobile-native shorthand for interruption,
+  overload, mounting demand, or attention pressure.
+
+  Variables (declared in data-composition-variables below):
+    - count (number, default 7, range 4 to 10): cards in the final pile.
+    - speed (number, default 1, range 0.5 to 2): authored arrival pacing.
+    - showBadges ("yes" | "no", default "yes"): unread badge visibility.
+
+  Envelope (fixed IN/OUT, elastic HOLD only, never gsap.timeScale()):
+    IN_BASE  = 3.30s  stage settles and every card arrives with accelerating
+               gaps, each new arrival pushing the existing pile downward
+    HOLD     = elastic = max(0, D - (IN_BASE + OUT_BASE)); the complete stack
+               remains dense and breathes on a finite sine.inOut cycle
+    OUT_BASE = 0.50s  the complete stack accelerates into a clean fade
+    If D < IN_BASE + OUT_BASE, IN and OUT scale down together so their sum
+    equals D and HOLD becomes zero.
+
+  Sync points: each notification arrival is a deterministic offset into IN,
+  stored once in arrivalTimes. The first is at 0.16s in an uncompressed IN;
+  later offsets follow max(floorGap, baseGap * decay^(n - 1) / speed), then
+  scale together only if needed to stay inside IN. No cue enters HOLD.
+
+  Sound cue: every card arrival dispatches an hf:sfx CustomEvent with id
+  "notification-soft" and its resolved fixed IN offset. The primitive only
+  dispatches cues, it never plays audio.
+
+  Mount contract: this is a mountable sub-composition. The runtime clones
+  only <template> contents. #root fills the host box, owns no width or height
+  metadata, and establishes the container query basis. Variables come only
+  from window.__hyperframes.getVariables(). The hardcoded timeline key stays
+  "notification-pileup" after mount flattening strips data-composition-id.
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "count", "type": "number", "role": "content", "label": "Notification count", "description": "Number of notification cards in the final pile.", "default": 7, "min": 4, "max": 10, "step": 1 },
+    { "id": "speed", "type": "number", "role": "timing", "label": "Arrival speed", "description": "Pacing multiplier for the accelerating notification arrivals.", "default": 1, "min": 0.5, "max": 2, "step": 0.1 },
+    { "id": "showBadges", "type": "enum", "role": "content", "label": "Unread badges", "description": "Show or hide unread count badges on the notification cards.", "default": "yes", "options": [{ "value": "yes", "label": "Show badges" }, { "value": "no", "label": "Hide badges" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Notification Pileup</title>
+    <!-- Metadata only. Mounting discards everything outside <template>. -->
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="notification-pileup" data-duration="8" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            background: var(--bg, #0b1120);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+          }
+
+          .np-clip,
+          .np-backdrop,
+          .np-stage {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+          }
+
+          .np-clip {
+            overflow: hidden;
+          }
+
+          .np-backdrop {
+            background:
+              radial-gradient(
+                circle at 50% 12%,
+                color-mix(in srgb, var(--accent, #38bdf8) 16%, transparent),
+                transparent 38%
+              ),
+              linear-gradient(
+                to bottom,
+                color-mix(in srgb, var(--surface, #1e293b) 28%, var(--bg, #0b1120)),
+                var(--bg, #0b1120)
+              );
+          }
+
+          .np-stage {
+            transform-origin: 50% 45%;
+            will-change: transform, opacity;
+          }
+
+          /* EDIT ZONE: stack geometry only. The card height and computed JS
+             step share this 79.5cqh safe region, including count 10. */
+          .np-stack {
+            position: absolute;
+            top: 8cqh;
+            left: 12cqw;
+            width: 76cqw;
+            height: 82cqh;
+          }
+
+          /* INVARIANT: each card is a sized block. GSAP owns only x, y,
+             rotation, scale, and opacity, so direct seeks stay deterministic. */
+          .np-card {
+            position: absolute;
+            top: 0;
+            left: 0;
+            display: grid;
+            grid-template-columns: 6.8cqh minmax(0, 1fr) auto;
+            align-items: center;
+            gap: var(--space-2, 1.5cqw);
+            width: 100%;
+            height: 11.5cqh;
+            overflow: hidden;
+            padding: var(--space-1, 1.3cqh) var(--space-2, 1.8cqw);
+            border: 0.14cqmin solid color-mix(in srgb, var(--border, #334155) 78%, transparent);
+            border-radius: var(--radius, 2.2cqmin);
+            background: color-mix(in srgb, var(--surface, #1e293b) 92%, var(--bg, #0b1120));
+            box-shadow:
+              0 1.1cqh 2.8cqh color-mix(in srgb, var(--bg, #0b1120) 42%, transparent),
+              inset 0 0.1cqmin 0 color-mix(in srgb, var(--fg, #f8fafc) 12%, transparent);
+            transform-origin: 50% 18%;
+            will-change: transform, opacity;
+          }
+
+          .np-icon {
+            display: grid;
+            place-items: center;
+            width: 6.8cqh;
+            height: 6.8cqh;
+            border-radius: calc(var(--radius, 2.2cqmin) * 0.72);
+            background: var(--np-icon-bg, var(--brand, #22c55e));
+            color: var(--bg, #0b1120);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: min(2.25cqw, 4cqh);
+            font-weight: 780;
+            line-height: 1;
+            box-shadow: inset 0 0.1cqmin 0 color-mix(in srgb, var(--fg, #f8fafc) 24%, transparent);
+          }
+
+          .np-card[data-tone="1"] {
+            --np-icon-bg: var(--accent, #38bdf8);
+          }
+
+          .np-card[data-tone="2"] {
+            --np-icon-bg: color-mix(in srgb, var(--brand, #22c55e) 58%, var(--accent, #38bdf8));
+          }
+
+          .np-card[data-tone="3"] {
+            --np-icon-bg: color-mix(in srgb, var(--accent, #38bdf8) 62%, var(--fg, #f8fafc));
+          }
+
+          .np-copy {
+            min-width: 0;
+            overflow: hidden;
+          }
+
+          .np-title,
+          .np-body {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          .np-title {
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: min(2.15cqw, 3.8cqh);
+            font-weight: 720;
+            line-height: 1.12;
+            letter-spacing: -0.01em;
+          }
+
+          .np-body {
+            margin-top: var(--space-1, 0.6cqh);
+            color: var(--muted, #94a3b8);
+            font-size: min(1.55cqw, 2.85cqh);
+            font-weight: 520;
+            line-height: 1.12;
+          }
+
+          .np-badge {
+            display: grid;
+            place-items: center;
+            min-width: 3.6cqh;
+            height: 3.6cqh;
+            padding-inline: var(--space-1, 0.65cqw);
+            border-radius: var(--radius, 999cqmin);
+            background: var(--accent, #38bdf8);
+            color: var(--bg, #0b1120);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: min(1.3cqw, 2.3cqh);
+            font-weight: 780;
+            line-height: 1;
+          }
+        </style>
+
+        <div
+          id="notification-pileup-clip"
+          class="np-clip clip"
+          data-start="0"
+          data-duration="8"
+          data-track-index="0"
+        >
+          <div class="np-backdrop" aria-hidden="true"></div>
+          <div class="np-stage" aria-label="A rapidly growing stack of mobile notifications">
+            <div class="np-stack"></div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.currentScript.closest("#root") || document.getElementById("root");
+            // Literal by contract: mount flattening strips data-composition-id
+            // before the runtime consumes this timeline registration.
+            var compositionId = "notification-pileup";
+            var stage = root.querySelector(".np-stage");
+            var stack = root.querySelector(".np-stack");
+
+            // EDIT ZONE: defaults mirror the outer variable declarations.
+            // getVariables owns the declared-defaults-plus-host-overrides merge.
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            // INVARIANT: count is always an integer in the declared 4 to 10 range.
+            var rawCount = Number(vars.count);
+            var count = Math.max(
+              4,
+              Math.min(10, Number.isFinite(rawCount) ? Math.round(rawCount) : 7),
+            );
+            // INVARIANT: speed remains finite and inside the declared 0.5 to 2 range.
+            var rawSpeed = Number(vars.speed);
+            var speed = Math.max(0.5, Math.min(2, Number.isFinite(rawSpeed) ? rawSpeed : 1));
+            // INVARIANT: malformed enum overrides resolve to the documented default.
+            var showBadges = vars.showBadges === "no" ? "no" : "yes";
+
+            // One ordered source owns content, icon tone, and badge copy.
+            var NOTIFICATIONS = [
+              { icon: "M", title: "Messages", body: "Can you take a quick look?", badge: "3" },
+              { icon: "C", title: "Calendar", body: "Stand-up moved to 10:30", badge: "1" },
+              { icon: "@", title: "Mail", body: "Five new replies in your thread", badge: "5" },
+              { icon: "U", title: "Updates", body: "A new version is ready", badge: "2" },
+              { icon: "T", title: "Tasks", body: "Deadline changed to today", badge: "7" },
+              { icon: "D", title: "Drive", body: "Someone requested access", badge: "4" },
+              { icon: "S", title: "Security", body: "New sign-in needs review", badge: "1" },
+              { icon: "#", title: "Social", body: "You have twelve new mentions", badge: "12" },
+              { icon: "N", title: "Notes", body: "Shared checklist was updated", badge: "6" },
+              { icon: "R", title: "Reminders", body: "Follow up before end of day", badge: "9" },
+            ];
+            var cards = [];
+
+            for (var index = 0; index < count; index += 1) {
+              var item = NOTIFICATIONS[index];
+              var card = document.createElement("article");
+              card.className = "np-card";
+              card.dataset.tone = String(index % 4);
+              card.style.zIndex = String(index + 1);
+
+              var icon = document.createElement("span");
+              icon.className = "np-icon";
+              icon.setAttribute("aria-hidden", "true");
+              icon.textContent = item.icon;
+
+              var copy = document.createElement("span");
+              copy.className = "np-copy";
+              var title = document.createElement("span");
+              title.className = "np-title";
+              title.textContent = item.title;
+              var body = document.createElement("span");
+              body.className = "np-body";
+              body.textContent = item.body;
+              copy.appendChild(title);
+              copy.appendChild(body);
+
+              card.appendChild(icon);
+              card.appendChild(copy);
+
+              if (showBadges === "yes") {
+                var badge = document.createElement("span");
+                badge.className = "np-badge";
+                badge.setAttribute("aria-label", item.badge + " unread");
+                badge.textContent = item.badge;
+                card.appendChild(badge);
+              }
+
+              stack.appendChild(card);
+              cards.push(card);
+            }
+
+            // RETIME RANGE: tune only these envelope and cadence values.
+            // speed scales authored gaps and entrance lengths directly. HOLD
+            // alone expands, and no branch uses gsap.timeScale().
+            var IN_BASE = 3.3;
+            var OUT_BASE = 0.5;
+            var STAGE_IN_BASE = 0.34;
+            var ARRIVAL_START_BASE = 0.16;
+            var ENTRY_DURATION_BASE = 0.38;
+            var PUSH_DURATION_BASE = 0.24;
+            var BASE_GAP = 0.78;
+            var GAP_DECAY = 0.78;
+            var FLOOR_GAP = 0.09;
+            var beat = parseFloat(getComputedStyle(root).getPropertyValue("--dur-beat")) || 0.5;
+            var BREATH_HALF = Math.max(0.65, beat * 1.8);
+
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "8"));
+            var totalBase = IN_BASE + OUT_BASE;
+            var envelopeScale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * envelopeScale;
+            var OUT = OUT_BASE * envelopeScale;
+            var STAGE_IN = STAGE_IN_BASE * envelopeScale;
+            var ARRIVAL_START = ARRIVAL_START_BASE * envelopeScale;
+            var ENTRY_DURATION =
+              Math.max(0.18, Math.min(0.5, ENTRY_DURATION_BASE / speed)) * envelopeScale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var HOLD_START = IN;
+            var OUT_START = IN + HOLD;
+            var STACK_STEP = Math.min(9.6, 68 / Math.max(1, count - 1));
+
+            // The same resolved array owns both animation and cue timing.
+            var rawGaps = [];
+            var rawGapTotal = 0;
+            for (var gapIndex = 1; gapIndex < count; gapIndex += 1) {
+              var gap = Math.max(FLOOR_GAP, (BASE_GAP * Math.pow(GAP_DECAY, gapIndex - 1)) / speed);
+              rawGaps.push(gap);
+              rawGapTotal += gap;
+            }
+            var availableGapWindow = Math.max(0, IN - ARRIVAL_START - ENTRY_DURATION);
+            var gapScale = rawGapTotal > availableGapWindow ? availableGapWindow / rawGapTotal : 1;
+            var arrivalTimes = [ARRIVAL_START];
+            for (var timeIndex = 0; timeIndex < rawGaps.length; timeIndex += 1) {
+              arrivalTimes.push(
+                arrivalTimes[arrivalTimes.length - 1] + rawGaps[timeIndex] * gapScale,
+              );
+            }
+
+            function fireSfx(index, t) {
+              root.dispatchEvent(
+                new CustomEvent("hf:sfx", {
+                  detail: { id: "notification-soft", index: index, t: t },
+                  bubbles: true,
+                }),
+              );
+            }
+
+            // Explicit t=0 endpoints. Cards begin above the stack at a visible
+            // near-rest scale, never scale(0), and the complete stage is hidden.
+            gsap.set(stage, { opacity: 0, y: "1.2cqh", scale: 0.985 });
+            cards.forEach(function (card) {
+              gsap.set(card, { opacity: 0, y: "-14cqh", scale: 0.94, rotation: -1.2 });
+            });
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: standard stage settle, accelerating pileup, subtle overshoot.
+            tl.to(
+              stage,
+              { opacity: 1, y: "0cqh", scale: 1, duration: STAGE_IN, ease: "power2.out" },
+              0,
+            );
+
+            cards.forEach(function (card, cardIndex) {
+              var arrivalAt = arrivalTimes[cardIndex];
+              var untilNext =
+                cardIndex < cards.length - 1
+                  ? arrivalTimes[cardIndex + 1] - arrivalAt
+                  : ENTRY_DURATION;
+              var entryDuration = Math.max(0.05, Math.min(ENTRY_DURATION, untilNext * 0.78));
+              var pushDuration = Math.max(
+                0.04,
+                Math.min((PUSH_DURATION_BASE * envelopeScale) / speed, untilNext * 0.72),
+              );
+
+              for (var existingIndex = 0; existingIndex < cardIndex; existingIndex += 1) {
+                tl.to(
+                  cards[existingIndex],
+                  {
+                    y: (cardIndex - existingIndex) * STACK_STEP + "cqh",
+                    duration: pushDuration,
+                    ease: "power2.out",
+                  },
+                  arrivalAt,
+                );
+              }
+
+              tl.to(
+                card,
+                {
+                  opacity: 1,
+                  y: "0cqh",
+                  scale: 1,
+                  rotation: 0,
+                  duration: entryDuration,
+                  ease: "back.out(1.7)",
+                },
+                arrivalAt,
+              );
+              tl.call(
+                function () {
+                  fireSfx(cardIndex, arrivalAt);
+                },
+                [],
+                arrivalAt,
+              );
+            });
+
+            // HOLD: finite slow sine breathing exactly inside the elastic phase.
+            if (HOLD >= BREATH_HALF) {
+              var breathRepeat = Math.max(0, Math.floor(HOLD / BREATH_HALF) - 1);
+              tl.fromTo(
+                stage,
+                { y: "0cqh", scale: 1 },
+                {
+                  y: "-0.42cqh",
+                  scale: 1.004,
+                  duration: BREATH_HALF,
+                  ease: "sine.inOut",
+                  yoyo: true,
+                  repeat: breathRepeat,
+                  immediateRender: false,
+                },
+                HOLD_START,
+              );
+            }
+
+            // OUT: asymmetric accelerated release and fade.
+            tl.to(
+              stage,
+              { opacity: 0, y: "1.2cqh", scale: 0.985, duration: OUT, ease: "power2.in" },
+              OUT_START,
+            );
+
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/notification-pileup/registry-item.json b/registry/components/notification-pileup/registry-item.json
new file mode 100644
index 0000000000..0c0028e770
--- /dev/null
+++ b/registry/components/notification-pileup/registry-item.json
@@ -0,0 +1,55 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "notification-pileup",
+  "type": "hyperframes:component",
+  "title": "Notification Pileup",
+  "description": "Mobile notification cards arrive faster and faster, each new alert pushing the existing stack downward into a dense, anxious tower.",
+  "tags": ["notification", "mobile", "ui-props", "overload", "pileup", "loop", "agitate"],
+  "jobs": ["agitate"],
+  "family": "ui-props",
+  "profile": "loop",
+  "evidence": "fixture; mobile mechanics inventory",
+  "files": [
+    {
+      "path": "notification-pileup.html",
+      "target": "compositions/components/notification-pileup.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "count",
+      "type": "number",
+      "role": "content",
+      "label": "Notification count",
+      "description": "Number of notification cards in the final pile.",
+      "default": 7,
+      "min": 4,
+      "max": 10,
+      "step": 1
+    },
+    {
+      "id": "speed",
+      "type": "number",
+      "role": "timing",
+      "label": "Arrival speed",
+      "description": "Pacing multiplier for the accelerating notification arrivals.",
+      "default": 1,
+      "min": 0.5,
+      "max": 2,
+      "step": 0.1
+    },
+    {
+      "id": "showBadges",
+      "type": "enum",
+      "role": "content",
+      "label": "Unread badges",
+      "description": "Show or hide unread count badges on the notification cards.",
+      "default": "yes",
+      "options": [
+        { "value": "yes", "label": "Show badges" },
+        { "value": "no", "label": "Hide badges" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/notification-stack/README.md b/registry/components/notification-stack/README.md
new file mode 100644
index 0000000000..dc6f34c011
--- /dev/null
+++ b/registry/components/notification-stack/README.md
@@ -0,0 +1,42 @@
+# notification-stack
+
+Product-demo primitive: 1 to 5 token notification cards (accent icon dot,
+title, one body line) slide-settle into a vertical stack on cues, newest on
+top. Each new card drops into the top slot with a fade and a smooth long-tail
+settle while the cards already present shift down one slot. After the last
+card lands, one card (the `expand` index) grows slightly and brightens to
+resolve as the focus while the rest dim by stack position (deeper cards dim
+more). Then the frame holds perfectly still.
+
+Authored at 4s with an elastic HOLD: arrivals plus the resolve are fixed,
+everything after is still frame until the (optional) exit. Type sizes ride
+`cqmin` with card-height caps so the stack stays readable at 1920x1080 and
+legible when the stage is mounted small.
+
+## Variables
+
+| id       | type                               | default                                                                 | notes                                                                                                                                                                                                                                            |
+| -------- | ---------------------------------- | ----------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `titles` | string                             | `Build queued,Checks passed,Deploy live`                                | Comma list of card titles, 1 to 5 cards; extras past 5 are dropped.                                                                                                                                                                              |
+| `bodies` | string                             | `Pipeline started for main,All 42 checks green,Now serving version 2.4` | Comma list of body lines matched to titles by index. A missing or blank entry hides that card's body line.                                                                                                                                       |
+| `expand` | number -1 to 4                     | `-1`                                                                    | Index of the focus card in the `titles` list. `-1` (or any out-of-range value) focuses the newest card, which sits on top of the stack.                                                                                                          |
+| `cues`   | string                             | `""`                                                                    | Comma-separated per-card arrival times in seconds relative to mount start. Blank or invalid entries fall back to that card's default rhythm slot (~0.55s gap). Times are kept non-decreasing and clamped so every card lands before the resolve. |
+| `accent` | enum `green` \| `blue` \| `violet` | `green`                                                                 | Icon dot family: green rides `--brand`, blue `--accent`, violet `--accent-2`.                                                                                                                                                                    |
+| `exit`   | enum `none` \| `fade` \| `up`      | `none`                                                                  | Frame roots own transitions; the default hold ends the film.                                                                                                                                                                                     |
+
+## Usage
+
+```html
+<div
+  class="clip"
+  data-composition-id="notification-stack"
+  data-composition-src="./components/notification-stack.html"
+  data-variable-values='{"titles":"Upload received,Transcode started,Draft ready","bodies":"clip_final_v3.mp4 landed,1080p and 4K in flight,Storyboard open for review","expand":2,"accent":"blue"}'
+  data-start="0"
+  data-duration="4"
+  data-track-index="0"
+></div>
+```
+
+Golden refs: scramble-reveal (token consumption), grid-card-assemble
+(stagger and dim discipline), toggle-flip (mount-contract structure).
diff --git a/registry/components/notification-stack/demo.html b/registry/components/notification-stack/demo.html
new file mode 100644
index 0000000000..834d6ef6e4
--- /dev/null
+++ b/registry/components/notification-stack/demo.html
@@ -0,0 +1,93 @@
+<!doctype html>
+<!--
+  notification-stack demo. This standalone composition mounts the primitive
+  through data-composition-src. Non-default titles, bodies, expand, cues,
+  and accent values prove the variable path while the primitive remains
+  elastic to its host.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>notification-stack Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #0b0c0e);
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --muted: #8b95a6;
+        --surface: #14171c;
+        --border: #343a46;
+        --brand: #71f5a7;
+        --accent: #61a8ff;
+        --accent-2: #c5a3ff;
+        --font-body: system-ui, -apple-system, "Segoe UI", sans-serif;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(
+          ellipse at 50% 44%,
+          var(--bg, #171a20) 0%,
+          var(--bg, #0b0c0e) 72%
+        );
+      }
+
+      .mount-card {
+        width: 42%;
+        height: 76%;
+        left: 29%;
+        top: 12%;
+        container-type: size;
+        overflow: hidden;
+        border: 1px solid color-mix(in srgb, var(--border, #94a3b8) 20%, transparent);
+        border-radius: 30px;
+        background: color-mix(in srgb, var(--surface, #101318) 72%, transparent);
+        box-shadow: 0 40px 100px color-mix(in srgb, var(--bg, #000000) 48%, transparent);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="notification-stack-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="notification-stack-mount"
+        class="mount-card clip"
+        data-composition-id="notification-stack"
+        data-composition-src="./notification-stack.html"
+        data-variable-values='{"titles":"Upload received,Transcode started,Scenes detected,Draft ready","bodies":"clip_final_v3.mp4 landed in the inbox,1080p and 4K renditions in flight,14 scenes cut on speech pauses,Storyboard open for review","expand":1,"cues":"0.2,0.8,1.4,2.0","accent":"blue"}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="806"
+        data-height="821"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["notification-stack-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/notification-stack/notification-stack.html b/registry/components/notification-stack/notification-stack.html
new file mode 100644
index 0000000000..b28e407250
--- /dev/null
+++ b/registry/components/notification-stack/notification-stack.html
@@ -0,0 +1,387 @@
+<!doctype html>
+<!--
+  notification-stack: HyperFrames video primitive (product demo)
+
+  1 to 5 token notification cards (accent icon dot, title, one body line)
+  slide-settle into a vertical stack on cues, newest on top: each new card
+  drops into the top slot while the cards already present shift down one
+  slot. After the last card lands, one card (the expand index) grows
+  slightly and brightens to resolve as the focus while the rest dim by
+  stack position (deeper cards dim more). Then the frame holds STILL.
+
+  Variables (declared in data-composition-variables below):
+    - titles (string, default "Build queued,Checks passed,Deploy live"):
+      comma list of card titles, 1 to 5 cards; extras past 5 are dropped.
+    - bodies (string): comma list of body lines matched to titles by index.
+      A missing or blank entry hides that card's body line.
+    - expand (number, default -1): index into the titles list of the focus
+      card. -1 (or any out-of-range value) means the newest card, which
+      sits on top of the stack.
+    - cues (string, default ""): comma-separated per-card arrival times in
+      seconds relative to mount start. Blank or invalid entries fall back
+      to that card's default rhythm slot (~0.55s gap). Values are kept
+      non-decreasing and clamped so every card lands before the resolve.
+    - accent (green | blue | violet, default green): icon dot family.
+      green -> --brand, blue -> --accent, violet -> --accent-2.
+    - exit ("none" | "fade" | "up", default "none"): frame roots own
+      transitions; the default hold-ends-the-film.
+
+  Envelope, fixed IN with elastic HOLD (never gsap.timeScale()):
+    IN    = arrivals on cues, then the focus resolve (~0.5s)
+    HOLD  = still, elastic: everything after the resolve until OUT (or D)
+    OUT   = 0 when exit is "none"; else 0.45s fade / fade-up of the stage.
+    Arrival starts clamp together when D is too short for the rhythm.
+
+  Seek safety: every property change is a fromTo with explicit endpoints
+  at absolute times, and consecutive tweens on the same property never
+  overlap (each event's duration is capped at the gap to the next event).
+
+  Mount contract: elastic root, no data-width/data-height, styled via
+  #root only, container-type: size, one paused timeline registered under
+  the literal "notification-stack" key. Deterministic: no CSS transitions,
+  no Date.now, no randomness.
+-->
+<html
+  lang="en"
+  data-composition-id="notification-stack"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "titles", "type": "string", "role": "content", "label": "Titles", "description": "Comma-separated card titles (1 to 5 cards).", "default": "Build queued,Checks passed,Deploy live" },
+    { "id": "bodies", "type": "string", "role": "content", "label": "Bodies", "description": "Comma-separated body lines matched to titles by index. Blank entries hide that body line.", "default": "Pipeline started for main,All 42 checks green,Now serving version 2.4" },
+    { "id": "expand", "type": "number", "role": "content", "label": "Expand", "description": "Index of the focus card in the titles list. -1 focuses the newest card (top of the stack).", "default": -1, "min": -1, "max": 4, "step": 1 },
+    { "id": "cues", "type": "string", "role": "timing", "label": "Cues", "description": "Comma-separated per-card arrival times in seconds. Blank entries use the default rhythm.", "default": "" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Accent token family used by the icon dots.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "How the stack leaves the frame. Default none: the hold ends the film.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Notification Stack</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="notification-stack" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            background: var(--bg, transparent);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, system-ui, -apple-system, "Segoe UI", sans-serif);
+            pointer-events: none;
+          }
+
+          .ns-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+          }
+
+          .ns-stage {
+            position: relative;
+            width: min(54cqw, 110cqh);
+            will-change: transform, opacity;
+          }
+
+          .ns-card {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: var(--ns-card-h, 14cqh);
+            display: flex;
+            align-items: center;
+            gap: var(--space-2, 2.2cqmin);
+            padding: 0 var(--space-2, 2.2cqmin);
+            overflow: hidden;
+            border: 0.16cqmin solid var(--border, #334155);
+            border-radius: var(--radius, 1.8cqmin);
+            background: var(--surface, #131a24);
+            box-shadow: 0 1cqmin 3cqmin color-mix(in srgb, var(--bg, #05070a) 45%, transparent);
+            will-change: transform, opacity, filter;
+          }
+
+          .ns-dot {
+            flex: 0 0 auto;
+            width: min(1.7cqmin, calc(var(--ns-card-h, 14cqh) * 0.14));
+            aspect-ratio: 1;
+            border-radius: 50%;
+            background: var(--ns-accent, var(--brand, #71f5a7));
+          }
+
+          .ns-text {
+            display: flex;
+            flex-direction: column;
+            gap: min(0.7cqmin, calc(var(--ns-card-h, 14cqh) * 0.06));
+            min-width: 0;
+          }
+
+          .ns-title {
+            overflow: hidden;
+            color: var(--fg, #f8fafc);
+            font-size: min(3.2cqmin, calc(var(--ns-card-h, 14cqh) * 0.24));
+            font-weight: 600;
+            line-height: 1.2;
+            letter-spacing: 0.01em;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+          }
+
+          .ns-body {
+            overflow: hidden;
+            color: var(--muted, #94a3b8);
+            font-size: min(2.5cqmin, calc(var(--ns-card-h, 14cqh) * 0.19));
+            font-weight: 400;
+            line-height: 1.25;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+          }
+        </style>
+
+        <div
+          id="notification-stack-clip"
+          class="ns-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="ns-stage" role="list"></div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            // Literal id, never read off the DOM: the flattening step strips
+            // data-composition-id from the mounted root (see toggle-flip).
+            var compositionId = "notification-stack";
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".ns-stage");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            function toList(value, fallback) {
+              var raw = value == null || String(value).trim() === "" ? fallback : String(value);
+              return raw.split(",").map(function (token) {
+                return token.trim();
+              });
+            }
+
+            var titles = toList(vars.titles, "Build queued,Checks passed,Deploy live")
+              .filter(function (token) {
+                return token !== "";
+              })
+              .slice(0, 5);
+            if (titles.length === 0) titles = ["Build queued", "Checks passed", "Deploy live"];
+            var bodies = toList(
+              vars.bodies,
+              "Pipeline started for main,All 42 checks green,Now serving version 2.4",
+            );
+            var count = titles.length;
+
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            root.style.setProperty("--ns-accent", accentColors[accent]);
+
+            // Focus card: index into the titles list; -1 / out of range means
+            // the newest card, which finishes on top of the stack.
+            var expandRaw = Math.round(Number(vars.expand));
+            var expand =
+              Number.isFinite(expandRaw) && expandRaw >= 0 && expandRaw < count
+                ? expandRaw
+                : count - 1;
+
+            // Geometry: cards fill up to ~74cqh of the stack region; the
+            // stage box is the FINAL stack size so the clip centers it once.
+            var GAP_CQH = 2;
+            var cardH = Math.min(15, (74 - (count - 1) * GAP_CQH) / count);
+            var slotH = cardH + GAP_CQH;
+            root.style.setProperty("--ns-card-h", cardH.toFixed(3) + "cqh");
+            stage.style.height = (count * cardH + (count - 1) * GAP_CQH).toFixed(3) + "cqh";
+            stage.setAttribute("aria-label", titles.join(", "));
+
+            var cards = titles.map(function (title, index) {
+              var card = document.createElement("div");
+              card.className = "ns-card";
+              card.setAttribute("role", "listitem");
+              // Static stacking: the focus card sits above its dimmed
+              // neighbors so its slight grow overlaps them cleanly.
+              card.style.zIndex = index === expand ? "2" : "1";
+              var dot = document.createElement("span");
+              dot.className = "ns-dot";
+              dot.setAttribute("aria-hidden", "true");
+              card.appendChild(dot);
+              var text = document.createElement("span");
+              text.className = "ns-text";
+              var titleEl = document.createElement("span");
+              titleEl.className = "ns-title";
+              titleEl.textContent = title;
+              text.appendChild(titleEl);
+              var body = (bodies[index] || "").trim();
+              if (body !== "") {
+                var bodyEl = document.createElement("span");
+                bodyEl.className = "ns-body";
+                bodyEl.textContent = body;
+                text.appendChild(bodyEl);
+              }
+              card.appendChild(text);
+              stage.appendChild(card);
+              return card;
+            });
+
+            // RETIME RANGE: arrivals on cues, fixed resolve, elastic still
+            // HOLD, optional OUT.
+            var BASE = 0.2;
+            var GAP = 0.55;
+            var ENTER = 0.55;
+            var SHIFT = 0.45;
+            var RESOLVE_DUR = 0.5;
+            var OUT_BASE = 0.45;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var OUT = exit === "none" ? 0 : Math.min(OUT_BASE, duration * 0.25);
+            var avail = duration - OUT;
+            var latestStart = Math.max(0, avail - 1.05);
+
+            var cueList = String(vars.cues == null ? "" : vars.cues).split(",");
+            var starts = [];
+            for (var i = 0; i < count; i++) {
+              var cue = Number((cueList[i] || "").trim());
+              var hasCue = (cueList[i] || "").trim() !== "" && Number.isFinite(cue);
+              var start = hasCue ? cue : BASE + GAP * i;
+              if (i > 0) start = Math.max(start, starts[i - 1] + 0.05);
+              starts.push(Math.max(0, Math.min(start, latestStart)));
+            }
+            for (i = 1; i < count; i++) starts[i] = Math.max(starts[i], starts[i - 1]);
+
+            var last = starts[count - 1];
+            var resolve = Math.max(last + 0.1, Math.min(last + 0.65, avail - RESOLVE_DUR));
+            var resolveDur = Math.min(RESOLVE_DUR, Math.max(0.001, avail - resolve));
+
+            // Tween distances in px, derived once from the measured mount
+            // height (what 1cqh resolves to). GSAP interpolates chained
+            // cqh-unit transform tweens incorrectly mid-tween, so transforms
+            // ride px while all layout stays in container units.
+            var rootH = root.offsetHeight || window.innerHeight || 1080;
+            var cqhPx = rootH / 100;
+            var yFor = function (slot) {
+              return slot * slotH * cqhPx;
+            };
+            var enterY = -(cardH * 0.6 * cqhPx);
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: each card drops into the TOP slot with a fade and a smooth
+            // long-tail settle while every earlier card shifts down one slot.
+            // Event durations are capped at the gap to the next event so no
+            // two tweens on the same property ever overlap.
+            cards.forEach(function (card, index) {
+              var eventStart = starts[index];
+              var nextEvent = index + 1 < count ? starts[index + 1] : resolve;
+              var eventCap = Math.max(0.001, nextEvent - eventStart);
+              gsap.set(card, { opacity: 0, y: enterY });
+              tl.fromTo(
+                card,
+                { opacity: 0, y: enterY },
+                {
+                  opacity: 1,
+                  y: yFor(0),
+                  duration: Math.min(ENTER, eventCap),
+                  ease: "power3.out",
+                },
+                eventStart,
+              );
+              for (var j = 0; j < index; j++) {
+                // immediateRender false: a build-time render of this from
+                // state would park the card at a mid-stack slot before its
+                // own entrance has run.
+                tl.fromTo(
+                  cards[j],
+                  { y: yFor(index - 1 - j) },
+                  {
+                    y: yFor(index - j),
+                    duration: Math.min(SHIFT, eventCap),
+                    ease: "power3.out",
+                    immediateRender: false,
+                  },
+                  eventStart,
+                );
+              }
+            });
+
+            // RESOLVE: the focus card grows slightly and brightens; the rest
+            // dim by stack position (deeper cards dim more). Filter tweens
+            // stay numeric; no var() color string is ever tweened.
+            cards.forEach(function (card, index) {
+              var stackPos = count - 1 - index;
+              if (index === expand) {
+                tl.fromTo(
+                  card,
+                  { scale: 1, filter: "brightness(1)" },
+                  {
+                    scale: 1.045,
+                    filter: "brightness(1.1)",
+                    duration: resolveDur,
+                    ease: "power2.out",
+                    immediateRender: false,
+                  },
+                  resolve,
+                );
+              } else {
+                tl.fromTo(
+                  card,
+                  { opacity: 1 },
+                  {
+                    opacity: Math.max(0.42, 0.72 - 0.07 * stackPos),
+                    duration: resolveDur,
+                    ease: "power2.out",
+                    immediateRender: false,
+                  },
+                  resolve,
+                );
+              }
+            });
+
+            // HOLD: intentionally still. Nothing floats, nothing pushes in.
+
+            // OUT: the whole resolved stack leaves together.
+            if (exit !== "none") {
+              var OUT_START = duration - OUT;
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+              if (exit === "up") {
+                tl.to(stage, { y: -3 * cqhPx, duration: OUT, ease: "power2.in" }, OUT_START);
+              }
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/notification-stack/registry-item.json b/registry/components/notification-stack/registry-item.json
new file mode 100644
index 0000000000..57bfae331f
--- /dev/null
+++ b/registry/components/notification-stack/registry-item.json
@@ -0,0 +1,83 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "notification-stack",
+  "type": "hyperframes:component",
+  "title": "Notification Stack",
+  "description": "1 to 5 token notification cards slide-settle into a vertical stack on cues, newest on top; one card grows slightly and brightens as the focus while the rest dim by position.",
+  "tags": ["motion-primitive", "product-demo", "notification", "stack", "stagger"],
+  "jobs": ["demonstrate"],
+  "family": "product-demo",
+  "profile": "stack",
+  "evidence": "Wave J J2-9: product-demo notification unit per the Wave J2 shelf expansion",
+  "syncPoints": [{ "id": "stack-resolved", "phase": "in", "offset": 2.45 }],
+  "files": [
+    {
+      "path": "notification-stack.html",
+      "target": "compositions/components/notification-stack.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "titles",
+      "type": "string",
+      "role": "content",
+      "label": "Titles",
+      "description": "Comma-separated card titles (1 to 5 cards).",
+      "default": "Build queued,Checks passed,Deploy live"
+    },
+    {
+      "id": "bodies",
+      "type": "string",
+      "role": "content",
+      "label": "Bodies",
+      "description": "Comma-separated body lines matched to titles by index. Blank entries hide that body line.",
+      "default": "Pipeline started for main,All 42 checks green,Now serving version 2.4"
+    },
+    {
+      "id": "expand",
+      "type": "number",
+      "role": "content",
+      "label": "Expand",
+      "description": "Index of the focus card in the titles list. -1 focuses the newest card (top of the stack).",
+      "default": -1,
+      "min": -1,
+      "max": 4,
+      "step": 1
+    },
+    {
+      "id": "cues",
+      "type": "string",
+      "role": "timing",
+      "label": "Cues",
+      "description": "Comma-separated per-card arrival times in seconds. Blank entries use the default rhythm.",
+      "default": ""
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Accent token family used by the icon dots.",
+      "default": "green",
+      "options": [
+        { "value": "green", "label": "Green" },
+        { "value": "blue", "label": "Blue" },
+        { "value": "violet", "label": "Violet" }
+      ]
+    },
+    {
+      "id": "exit",
+      "type": "enum",
+      "role": "timing",
+      "label": "Exit",
+      "description": "How the stack leaves the frame. Default none: the hold ends the film.",
+      "default": "none",
+      "options": [
+        { "value": "none", "label": "None" },
+        { "value": "fade", "label": "Fade" },
+        { "value": "up", "label": "Up" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/number-pop-in/demo.html b/registry/components/number-pop-in/demo.html
new file mode 100644
index 0000000000..1306ec8225
--- /dev/null
+++ b/registry/components/number-pop-in/demo.html
@@ -0,0 +1,102 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Number Pop In - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        min-width: 760px;
+        min-height: 480px;
+        padding: 56px;
+        /* ponytail: scale non-GSAP wrapper so the stat fills ~65% of the frame */
+        transform: scale(1.37);
+      }
+      .hf-transition-number-pop-in {
+        display: inline-flex;
+        align-items: baseline;
+        gap: 2px;
+        color: #18181b;
+        font-family: Inter, system-ui, sans-serif;
+        font-weight: 900;
+        letter-spacing: -0.04em;
+      }
+      .hf-transition-number-pop-in span {
+        font-size: 96px;
+        line-height: 0.9;
+        filter: blur(var(--hf-number-blur, 0px));
+        transform: translateY(var(--hf-number-y, 0px)) scale(var(--hf-number-scale, 1));
+        will-change: transform, filter, opacity;
+      }
+      .hf-transition-number-pop-in small {
+        margin-left: 4px;
+        color: #71717a;
+        font-size: 42px;
+        font-weight: 700;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="number-pop-in-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-transition-number-pop-in">
+          <span>5</span><span>.</span><span>7</span><small>k</small>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-transition-number-pop-in span, .hf-transition-number-pop-in small",
+          {
+            opacity: 0,
+            "--hf-number-y": "24px",
+            "--hf-number-scale": 0.82,
+            "--hf-number-blur": "8px",
+          },
+          {
+            opacity: 1,
+            "--hf-number-y": "0px",
+            "--hf-number-scale": 1,
+            "--hf-number-blur": "0px",
+            duration: 0.34,
+            stagger: 0.055,
+            ease: "back.out(1.8)",
+          },
+          startTime,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["number-pop-in-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/number-pop-in/number-pop-in.html b/registry/components/number-pop-in/number-pop-in.html
new file mode 100644
index 0000000000..11e05f30a1
--- /dev/null
+++ b/registry/components/number-pop-in/number-pop-in.html
@@ -0,0 +1,120 @@
+<!--
+  Number Pop In - transitions.dev-inspired primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Use the timeline
+  integration note at the bottom as the starting point for deterministic GSAP
+  animation.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and either rebuilds the characters or writes
+  a custom property the CSS above consumes. The timeline recipe stays untouched:
+  it keeps driving one offset, one scale and one blur, and these decide what the
+  number is, what colour it is, and how far that offset carries it.
+
+    - value (any text, default 5.7): the number itself. Every character becomes
+      its own span, so the stagger still lands character by character.
+    - unit (any text, default k): the small suffix printed after the number.
+      Pass an empty string to drop it.
+    - lift (close | standard | far, default standard): scales the offset the
+      timeline drives, so the characters cover a shorter or longer run in the
+      same time. The offset is zero at rest, so this one only shows in motion.
+    - tone (ink | paper | accent, default ink): number colour. ink is near-black
+      for light frames, paper near-white for dark ones, accent rides --brand.
+      The suffix follows in the same family.
+
+  On every default the result is identical to the original: 5.7k rising 24px
+  through an 8px blur in near-black.
+-->
+
+<div
+  class="hf-transition-number-pop-in"
+  data-composition-variables='[
+    { "id": "value", "type": "string", "role": "content", "label": "Value", "description": "The number itself. Every character becomes its own span, so the stagger still lands character by character.", "default": "5.7" },
+    { "id": "unit", "type": "string", "role": "content", "label": "Unit", "description": "Small suffix printed after the number. Pass an empty string to drop it.", "default": "k" },
+    { "id": "lift", "type": "enum", "role": "motion", "label": "Lift", "description": "Scales the offset the timeline drives, so the characters cover a shorter or longer run in the same time.", "default": "standard", "options": [{ "value": "close", "label": "Close" }, { "value": "standard", "label": "Standard" }, { "value": "far", "label": "Far" }] },
+    { "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Number colour: ink for light frames, paper for dark ones, accent rides --brand.", "default": "ink", "options": [{ "value": "ink", "label": "Ink" }, { "value": "paper", "label": "Paper" }, { "value": "accent", "label": "Accent" }] }
+  ]'
+>
+  <span>5</span><span>.</span><span>7</span><small>k</small>
+</div>
+
+<style>
+  .hf-transition-number-pop-in {
+    display: inline-flex;
+    align-items: baseline;
+    gap: 2px;
+    color: var(--hf-number-color, #18181b);
+    font-family: Inter, system-ui, sans-serif;
+    font-weight: 900;
+    letter-spacing: -0.04em;
+  }
+  .hf-transition-number-pop-in span {
+    font-size: 76px;
+    line-height: 0.9;
+    filter: blur(var(--hf-number-blur, 0px));
+    transform: translateY(calc(var(--hf-number-y, 0px) * var(--hf-number-lift, 1)))
+      scale(var(--hf-number-scale, 1));
+    will-change: transform, filter, opacity;
+  }
+  .hf-transition-number-pop-in small {
+    margin-left: 2px;
+    color: var(--hf-number-unit-color, #71717a);
+    font-size: 34px;
+    font-weight: 850;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    var lifts = { close: 0.5, standard: 1, far: 1.75 };
+    var tones = {
+      ink: { number: "#18181b", unit: "#71717a" },
+      paper: { number: "#fafafa", unit: "#a1a1aa" },
+      accent: { number: "var(--brand, #34d399)", unit: "var(--brand, #34d399)" },
+    };
+
+    function text(value, fallback) {
+      return typeof value === "string" ? value : fallback;
+    }
+
+    var value = text(vars.value, "5.7");
+    if (value === "") value = "5.7";
+    var unit = text(vars.unit, "k");
+    var lift = Object.prototype.hasOwnProperty.call(lifts, vars.lift) ? vars.lift : "standard";
+    var tone = Object.prototype.hasOwnProperty.call(tones, vars.tone) ? vars.tone : "ink";
+
+    var roots = document.querySelectorAll(".hf-transition-number-pop-in");
+    for (var i = 0; i < roots.length; i += 1) {
+      var root = roots[i];
+      root.style.setProperty("--hf-number-lift", String(lifts[lift]));
+      root.style.setProperty("--hf-number-color", tones[tone].number);
+      root.style.setProperty("--hf-number-unit-color", tones[tone].unit);
+
+      var next = [];
+      for (var c = 0; c < value.length; c += 1) {
+        var span = document.createElement("span");
+        span.textContent = value.charAt(c);
+        next.push(span);
+      }
+      if (unit !== "") {
+        var small = document.createElement("small");
+        small.textContent = unit;
+        next.push(small);
+      }
+      root.replaceChildren.apply(root, next);
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-transition-number-pop-in span, .hf-transition-number-pop-in small', { opacity: 0, '--hf-number-y': '24px', '--hf-number-scale': 0.82, '--hf-number-blur': '8px' }, { opacity: 1, '--hf-number-y': '0px', '--hf-number-scale': 1, '--hf-number-blur': '0px', duration: 0.34, stagger: 0.055, ease: 'back.out(1.8)' }, startTime);
+-->
diff --git a/registry/components/number-pop-in/registry-item.json b/registry/components/number-pop-in/registry-item.json
new file mode 100644
index 0000000000..37ce654811
--- /dev/null
+++ b/registry/components/number-pop-in/registry-item.json
@@ -0,0 +1,80 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "number-pop-in",
+  "type": "hyperframes:component",
+  "title": "Number Pop In",
+  "description": "A transitions.dev-inspired digit pop-in with blur, lift, and staggered value reveal",
+  "tags": ["video-primitive", "transition-primitive", "transitions-dev-port", "number", "pop"],
+  "files": [
+    {
+      "path": "number-pop-in.html",
+      "target": "compositions/components/number-pop-in.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "value",
+      "type": "string",
+      "role": "content",
+      "label": "Value",
+      "description": "The number itself. Every character becomes its own span, so the stagger still lands character by character.",
+      "default": "5.7"
+    },
+    {
+      "id": "unit",
+      "type": "string",
+      "role": "content",
+      "label": "Unit",
+      "description": "Small suffix printed after the number. Pass an empty string to drop it.",
+      "default": "k"
+    },
+    {
+      "id": "lift",
+      "type": "enum",
+      "role": "motion",
+      "label": "Lift",
+      "description": "Scales the offset the timeline drives, so the characters cover a shorter or longer run in the same time.",
+      "default": "standard",
+      "options": [
+        {
+          "value": "close",
+          "label": "Close"
+        },
+        {
+          "value": "standard",
+          "label": "Standard"
+        },
+        {
+          "value": "far",
+          "label": "Far"
+        }
+      ]
+    },
+    {
+      "id": "tone",
+      "type": "enum",
+      "role": "style",
+      "label": "Tone",
+      "description": "Number colour: ink for light frames, paper for dark ones, accent rides --brand.",
+      "default": "ink",
+      "options": [
+        {
+          "value": "ink",
+          "label": "Ink"
+        },
+        {
+          "value": "paper",
+          "label": "Paper"
+        },
+        {
+          "value": "accent",
+          "label": "Accent"
+        }
+      ]
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/number-pop-in.png"
+  }
+}
diff --git a/registry/components/number-wheel/demo.html b/registry/components/number-wheel/demo.html
new file mode 100644
index 0000000000..db9c363c82
--- /dev/null
+++ b/registry/components/number-wheel/demo.html
@@ -0,0 +1,118 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Number Wheel - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #071b16;
+        color: #ecfff8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .metric {
+        text-align: center;
+        /* ponytail: zoom scales the non-animated wrapper; GSAP owns .label and .hf-number-wheel-strip transforms */
+        zoom: 2.8;
+      }
+      .label {
+        color: #68d8b5;
+        font-size: 38px;
+        font-weight: 800;
+        text-transform: uppercase;
+        letter-spacing: 0.1em;
+      }
+      .hf-number-wheel {
+        margin-top: 36px;
+        display: inline-flex;
+        align-items: baseline;
+        gap: 0.02em;
+        font-size: 172px;
+        font-weight: 900;
+        font-variant-numeric: tabular-nums;
+      }
+      .hf-number-wheel-digit {
+        display: inline-block;
+        height: 1em;
+        overflow: hidden;
+      }
+      .hf-number-wheel-strip {
+        display: grid;
+        transform: translateY(0em);
+        will-change: transform;
+      }
+      .hf-number-wheel-strip span {
+        height: 1em;
+        line-height: 1em;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="number-wheel-demo"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="metric">
+        <div class="label">GitHub stars</div>
+        <span class="hf-number-wheel" data-value="30222"></span>
+      </div>
+      <script>
+        document.querySelectorAll(".hf-number-wheel").forEach((el) => {
+          const value = el.dataset.value || "0";
+          el.textContent = "";
+          for (const char of value) {
+            if (!/\d/.test(char)) {
+              el.append(document.createTextNode(char));
+              continue;
+            }
+            const digit = Number(char);
+            const frame = document.createElement("span");
+            frame.className = "hf-number-wheel-digit";
+            const strip = document.createElement("span");
+            strip.className = "hf-number-wheel-strip";
+            strip.style.setProperty("--hf-number-target-y", `${-digit}em`);
+            for (let i = 0; i <= digit; i++) {
+              const step = document.createElement("span");
+              step.textContent = String(i);
+              strip.appendChild(step);
+            }
+            frame.appendChild(strip);
+            el.appendChild(frame);
+          }
+        });
+        const tl = gsap.timeline({ paused: true });
+        tl.from(".label", { opacity: 0, y: 18, duration: 0.5, ease: "power3.out" }, 0.2);
+        tl.to(
+          ".hf-number-wheel-strip",
+          {
+            y: (_, strip) => strip.style.getPropertyValue("--hf-number-target-y"),
+            duration: 1.2,
+            ease: "power3.out",
+            stagger: 0.06,
+          },
+          0.65,
+        );
+        window.__timelines = window.__timelines || {};
+        window.__timelines["number-wheel-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/number-wheel/number-wheel.html b/registry/components/number-wheel/number-wheel.html
new file mode 100644
index 0000000000..482120c8a6
--- /dev/null
+++ b/registry/components/number-wheel/number-wheel.html
@@ -0,0 +1,122 @@
+<!--
+  Number Wheel - rolling digit counter.
+
+  Markup:
+    <span class="hf-number-wheel" data-value="30222"></span>
+
+  Paste this snippet once. It builds one column per digit. Animate the generated
+  .hf-number-wheel-strip elements with the data-target-y custom property.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and either builds a longer strip or writes a
+  custom property the CSS above consumes. Every strip still starts on 0 and
+  still lands on its own digit, so only the run in between changes.
+
+    - spin (single | double | triple, default single): how many full 0 to 9
+      revolutions each column adds before it lands. Extra revolutions lengthen
+      the strip and push --hf-number-target-y further, so the reel covers more
+      ground in the same time. Nothing moves at rest, so this one only shows
+      once the timeline runs.
+    - spacing (tight | standard | wide, default standard): the gap between digit
+      columns.
+    - tone (inherit | ink | paper | accent, default inherit): digit colour.
+      inherit leaves the surrounding text colour alone, ink is near-black for
+      light frames, paper near-white for dark ones, accent rides --brand.
+
+  On every default the result is identical to the original: one column per
+  digit, each rolling 0 up to its own digit in the inherited text colour.
+-->
+
+<style
+  data-composition-variables='[
+    { "id": "spin", "type": "enum", "role": "motion", "label": "Spin", "description": "How many full 0 to 9 revolutions each column adds before it lands, which is how far the reel travels in the same time.", "default": "single", "options": [{ "value": "single", "label": "Single" }, { "value": "double", "label": "Double" }, { "value": "triple", "label": "Triple" }] },
+    { "id": "spacing", "type": "enum", "role": "layout", "label": "Spacing", "description": "Gap between the digit columns.", "default": "standard", "options": [{ "value": "tight", "label": "Tight" }, { "value": "standard", "label": "Standard" }, { "value": "wide", "label": "Wide" }] },
+    { "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Digit colour: inherit keeps the surrounding text colour, ink suits light frames, paper suits dark ones, accent rides --brand.", "default": "inherit", "options": [{ "value": "inherit", "label": "Inherit" }, { "value": "ink", "label": "Ink" }, { "value": "paper", "label": "Paper" }, { "value": "accent", "label": "Accent" }] }
+  ]'
+>
+  .hf-number-wheel {
+    display: inline-flex;
+    align-items: baseline;
+    gap: var(--hf-wheel-gap, 0.02em);
+    color: var(--hf-wheel-color, inherit);
+    font-variant-numeric: tabular-nums;
+  }
+  .hf-number-wheel-digit {
+    display: inline-block;
+    height: 1em;
+    overflow: hidden;
+  }
+  .hf-number-wheel-strip {
+    display: grid;
+    transform: translateY(0em);
+    will-change: transform;
+  }
+  .hf-number-wheel-strip span {
+    height: 1em;
+    line-height: 1em;
+  }
+</style>
+
+<script>
+  (function () {
+    const vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    const spins = { single: 0, double: 1, triple: 2 };
+    const gaps = { tight: "0em", standard: "0.02em", wide: "0.14em" };
+    const tones = {
+      inherit: "inherit",
+      ink: "#18181b",
+      paper: "#fafafa",
+      accent: "var(--brand, #34d399)",
+    };
+    const pick = (table, value, fallback) =>
+      Object.prototype.hasOwnProperty.call(table, value) ? table[value] : table[fallback];
+
+    const cycles = pick(spins, vars.spin, "single");
+    const gap = pick(gaps, vars.spacing, "standard");
+    const tone = pick(tones, vars.tone, "inherit");
+
+    document.querySelectorAll(".hf-number-wheel").forEach((el) => {
+      if (el.dataset.hfNumberWheelReady === "1") return;
+      el.style.setProperty("--hf-wheel-gap", gap);
+      el.style.setProperty("--hf-wheel-color", tone);
+      const value = el.dataset.value || "0";
+      el.textContent = "";
+      for (const char of value) {
+        if (!/\d/.test(char)) {
+          el.append(document.createTextNode(char));
+          continue;
+        }
+        const stops = cycles * 10 + Number(char);
+        const frame = document.createElement("span");
+        frame.className = "hf-number-wheel-digit";
+        const strip = document.createElement("span");
+        strip.className = "hf-number-wheel-strip";
+        strip.style.setProperty("--hf-number-target-y", `${-stops}em`);
+        for (let i = 0; i <= stops; i++) {
+          const step = document.createElement("span");
+          step.textContent = String(i % 10);
+          strip.appendChild(step);
+        }
+        frame.appendChild(strip);
+        el.appendChild(frame);
+      }
+      el.dataset.hfNumberWheelReady = "1";
+    });
+  })();
+</script>
+
+<!--
+  Timeline integration:
+
+  tl.to(".hf-number-wheel-strip", {
+    y: (_, strip) => strip.style.getPropertyValue("--hf-number-target-y"),
+    duration: 1.1,
+    ease: "power3.out",
+    stagger: 0.05,
+  }, startTime);
+-->
diff --git a/registry/components/number-wheel/registry-item.json b/registry/components/number-wheel/registry-item.json
new file mode 100644
index 0000000000..c56340a0ca
--- /dev/null
+++ b/registry/components/number-wheel/registry-item.json
@@ -0,0 +1,90 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "number-wheel",
+  "type": "hyperframes:component",
+  "title": "Number Wheel",
+  "description": "A rolling digit counter primitive for metrics, prices, counts, and scoreboards",
+  "tags": ["video-primitive", "motion-primitive", "number", "counter", "data"],
+  "files": [
+    {
+      "path": "number-wheel.html",
+      "target": "compositions/components/number-wheel.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "spin",
+      "type": "enum",
+      "role": "motion",
+      "label": "Spin",
+      "description": "How many full 0 to 9 revolutions each column adds before it lands, which is how far the reel travels in the same time.",
+      "default": "single",
+      "options": [
+        {
+          "value": "single",
+          "label": "Single"
+        },
+        {
+          "value": "double",
+          "label": "Double"
+        },
+        {
+          "value": "triple",
+          "label": "Triple"
+        }
+      ]
+    },
+    {
+      "id": "spacing",
+      "type": "enum",
+      "role": "layout",
+      "label": "Spacing",
+      "description": "Gap between the digit columns.",
+      "default": "standard",
+      "options": [
+        {
+          "value": "tight",
+          "label": "Tight"
+        },
+        {
+          "value": "standard",
+          "label": "Standard"
+        },
+        {
+          "value": "wide",
+          "label": "Wide"
+        }
+      ]
+    },
+    {
+      "id": "tone",
+      "type": "enum",
+      "role": "style",
+      "label": "Tone",
+      "description": "Digit colour: inherit keeps the surrounding text colour, ink suits light frames, paper suits dark ones, accent rides --brand.",
+      "default": "inherit",
+      "options": [
+        {
+          "value": "inherit",
+          "label": "Inherit"
+        },
+        {
+          "value": "ink",
+          "label": "Ink"
+        },
+        {
+          "value": "paper",
+          "label": "Paper"
+        },
+        {
+          "value": "accent",
+          "label": "Accent"
+        }
+      ]
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/number-wheel.png"
+  }
+}
diff --git a/registry/components/offset-path-traveler/demo.html b/registry/components/offset-path-traveler/demo.html
new file mode 100644
index 0000000000..db60b03d04
--- /dev/null
+++ b/registry/components/offset-path-traveler/demo.html
@@ -0,0 +1,101 @@
+<!doctype html>
+<!--
+  offset-path-traveler demo. This standalone composition mounts the primitive
+  through data-composition-src. A non-default path, label, and violet accent
+  prove the variable flow while the primitive remains elastic to its host.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Offset Path Traveler Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #0b0c0e);
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --muted: #9aa4b2;
+        --surface: #171a20;
+        --border: #3c4350;
+        --brand: #71f5a7;
+        --accent: #61a8ff;
+        --accent-2: #c5a3ff;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-body: Inter, system-ui, sans-serif;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        --radius: 3cqmin;
+        --space-1: 1.4cqmin;
+        --space-2: 2.8cqmin;
+        --space-3: 4.2cqmin;
+        --dur-beat: 0.4s;
+        --ease-standard: cubic-bezier(0.215, 0.61, 0.355, 1);
+        --ease-emphasis: cubic-bezier(0.19, 1, 0.22, 1);
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(
+          ellipse at 50% 44%,
+          color-mix(in srgb, var(--surface) 72%, var(--accent-2)) 0%,
+          var(--bg) 68%
+        );
+      }
+
+      .mount-card {
+        width: 78%;
+        height: 54%;
+        left: 11%;
+        top: 23%;
+        container-type: size;
+        overflow: hidden;
+        border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
+        border-radius: calc(var(--radius) * 1.25);
+        background: color-mix(in srgb, var(--surface) 84%, transparent);
+        box-shadow: 0 4cqh 12cqh color-mix(in srgb, var(--bg) 58%, transparent);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="offset-path-traveler-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="offset-path-traveler-mount"
+        class="mount-card clip"
+        data-composition-id="offset-path-traveler"
+        data-composition-src="./offset-path-traveler.html"
+        data-variable-values='{"path":"M -100 410 C 110 475 190 80 410 145 C 610 205 690 395 820 245 C 940 110 1025 170 1100 55","traveler_label":"Deploying","accent":"violet"}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="1498"
+        data-height="583"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["offset-path-traveler-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/offset-path-traveler/offset-path-traveler.html b/registry/components/offset-path-traveler/offset-path-traveler.html
new file mode 100644
index 0000000000..1097f781f1
--- /dev/null
+++ b/registry/components/offset-path-traveler/offset-path-traveler.html
@@ -0,0 +1,287 @@
+<!doctype html>
+<!--
+  offset-path-traveler: HyperFrames video primitive (product demo / path travel)
+
+  One traveler follows an authored SVG path and rotates to its tangent. The
+  traveler wrapper is the content slot; the default slot content is a chip.
+
+  Variables:
+    - path (string): SVG path data authored in the 1000 by 500 route viewBox.
+    - traveler_label (string): label inside the default traveler chip.
+    - accent (green | blue | violet): chip and route color.
+
+  Envelope, fixed IN and OUT with elastic HOLD only:
+    IN_BASE  = 1.20s, traveler enters along the authored curve to 72 percent
+    HOLD     = max(0, D - IN - OUT), subtle finite drift on the same curve
+    OUT_BASE = 0.65s, traveler accelerates along the curve and exits
+    If D is shorter than IN_BASE + OUT_BASE, IN and OUT compress together.
+    The timeline is never time-scaled.
+
+  Seek safety: GSAP tweens one plain progress value. Its onUpdate samples the
+  same SVG path for position and tangent, so repeated and reverse seeks render
+  the same pose at the same time without a plugin or a free-running loop.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, has no data-width or data-height,
+  and registers one paused timeline under the literal offset-path-traveler key.
+-->
+<html
+  lang="en"
+  data-composition-id="offset-path-traveler"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "path", "type": "string", "role": "content", "label": "Path", "description": "SVG path data authored in a 1000 by 500 route viewBox.", "default": "M -90 390 C 150 490 190 70 430 185 C 650 300 720 105 850 145 C 970 180 1030 85 1090 35" },
+    { "id": "traveler_label", "type": "string", "role": "content", "label": "Traveler label", "description": "Text displayed inside the default traveler chip.", "default": "Live preview" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Color used by the traveler and route.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Offset Path Traveler</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="offset-path-traveler" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .opt-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .opt-route {
+            position: absolute;
+            inset: 8cqh 4cqw;
+          }
+
+          .opt-route svg {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+            overflow: visible;
+          }
+
+          .opt-guide {
+            fill: none;
+            stroke: color-mix(in srgb, var(--opt-accent) 34%, var(--border, #475569));
+            stroke-width: 0.42cqmin;
+            stroke-linecap: round;
+            stroke-dasharray: 1.1cqmin 1.5cqmin;
+            opacity: 0.62;
+            vector-effect: non-scaling-stroke;
+          }
+
+          .opt-traveler-slot {
+            position: absolute;
+            left: 0;
+            top: 0;
+            display: block;
+            transform-origin: 50% 50%;
+            will-change: transform, opacity;
+          }
+
+          .opt-chip {
+            display: inline-flex;
+            align-items: center;
+            gap: var(--space-1, 1.4cqmin);
+            max-width: 34cqw;
+            min-height: 8cqh;
+            padding: var(--space-1, 1.6cqh) var(--space-2, 2.6cqw);
+            overflow: hidden;
+            border: 0.18cqmin solid
+              color-mix(in srgb, var(--opt-accent) 68%, var(--border, #475569));
+            border-radius: var(--radius, 999px);
+            background: color-mix(in srgb, var(--surface, #18212f) 88%, var(--opt-accent));
+            box-shadow:
+              0 2.2cqh 5cqh color-mix(in srgb, var(--bg, #020617) 48%, transparent),
+              0 0 3.5cqh color-mix(in srgb, var(--opt-accent) 24%, transparent);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: clamp(12px, 3.5cqmin, 30px);
+            font-weight: 760;
+            line-height: 1;
+            letter-spacing: -0.01em;
+            white-space: nowrap;
+          }
+
+          .opt-dot {
+            flex: 0 0 auto;
+            width: 2.4cqmin;
+            aspect-ratio: 1;
+            border-radius: 50%;
+            background: var(--opt-accent);
+            box-shadow: 0 0 2cqmin color-mix(in srgb, var(--opt-accent) 58%, transparent);
+          }
+
+          .opt-label {
+            min-width: 0;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+        </style>
+
+        <div
+          id="offset-path-traveler-clip"
+          class="opt-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="opt-route">
+            <svg viewBox="0 0 1000 500" preserveAspectRatio="none" aria-hidden="true">
+              <path class="opt-guide"></path>
+            </svg>
+            <div class="opt-traveler-slot" data-slot="traveler">
+              <div class="opt-chip">
+                <span class="opt-dot" aria-hidden="true"></span>
+                <span class="opt-label"></span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var route = root.querySelector(".opt-route");
+            var guide = root.querySelector(".opt-guide");
+            var traveler = root.querySelector(".opt-traveler-slot");
+            var label = root.querySelector(".opt-label");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var DEFAULT_PATH =
+              "M -90 390 C 150 490 190 70 430 185 C 650 300 720 105 850 145 C 970 180 1030 85 1090 35";
+            var requestedPath = vars.path == null ? "" : String(vars.path).trim();
+            var pathData = requestedPath === "" ? DEFAULT_PATH : requestedPath;
+            var travelerLabel =
+              vars.traveler_label == null ? "Live preview" : String(vars.traveler_label);
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+
+            guide.setAttribute("d", pathData);
+            label.textContent = travelerLabel;
+            root.style.setProperty("--opt-accent", accentColors[accent]);
+
+            var totalLength;
+            try {
+              totalLength = guide.getTotalLength();
+            } catch (_error) {
+              totalLength = 0;
+            }
+            if (!Number.isFinite(totalLength) || totalLength <= 0) {
+              guide.setAttribute("d", DEFAULT_PATH);
+              totalLength = guide.getTotalLength();
+            }
+
+            var VIEWBOX_WIDTH = 1000;
+            var VIEWBOX_HEIGHT = 500;
+            var travel = { progress: 0 };
+
+            function renderTraveler() {
+              var distance = Math.max(0, Math.min(1, travel.progress)) * totalLength;
+              var tangentStep = Math.max(0.5, totalLength * 0.002);
+              var before = guide.getPointAtLength(Math.max(0, distance - tangentStep));
+              var after = guide.getPointAtLength(Math.min(totalLength, distance + tangentStep));
+              var scaleX = route.clientWidth / VIEWBOX_WIDTH;
+              var scaleY = route.clientHeight / VIEWBOX_HEIGHT;
+              var point = guide.getPointAtLength(distance);
+              var rotation =
+                (Math.atan2((after.y - before.y) * scaleY, (after.x - before.x) * scaleX) * 180) /
+                Math.PI;
+
+              gsap.set(traveler, {
+                x: point.x * scaleX,
+                y: point.y * scaleY,
+                xPercent: -50,
+                yPercent: -50,
+                rotation: rotation,
+              });
+            }
+
+            var IN_BASE = 1.2;
+            var OUT_BASE = 0.65;
+            var STILLNESS = 0.3;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var totalBase = IN_BASE + OUT_BASE;
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var OUT_START = IN + HOLD;
+            var driftHalf = Math.max(0, HOLD - STILLNESS) / 2;
+
+            gsap.set(traveler, { opacity: 0, scale: 0.9 });
+            renderTraveler();
+
+            var tl = gsap.timeline({ paused: true });
+
+            tl.to(
+              travel,
+              { progress: 0.72, duration: IN, ease: "power3.out", onUpdate: renderTraveler },
+              0,
+            );
+            tl.to(traveler, { opacity: 1, duration: Math.min(0.28, IN), ease: "power2.out" }, 0);
+            tl.to(traveler, { scale: 1, duration: Math.min(0.5, IN), ease: "back.out(1.7)" }, 0);
+
+            if (driftHalf > 0) {
+              tl.to(
+                travel,
+                {
+                  progress: 0.78,
+                  duration: driftHalf,
+                  ease: "sine.inOut",
+                  yoyo: true,
+                  repeat: 1,
+                  onUpdate: renderTraveler,
+                },
+                IN,
+              );
+            }
+
+            tl.to(
+              travel,
+              { progress: 1, duration: OUT, ease: "power2.in", onUpdate: renderTraveler },
+              OUT_START,
+            );
+            tl.to(traveler, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["offset-path-traveler"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/offset-path-traveler/registry-item.json b/registry/components/offset-path-traveler/registry-item.json
new file mode 100644
index 0000000000..df1a5e850c
--- /dev/null
+++ b/registry/components/offset-path-traveler/registry-item.json
@@ -0,0 +1,51 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "offset-path-traveler",
+  "type": "hyperframes:component",
+  "title": "Offset Path Traveler",
+  "description": "A slotted traveler follows an authored path with tangent rotation, curved entry, and curved exit.",
+  "tags": ["motion-primitive", "product-demo", "path", "traveler", "auto-rotate"],
+  "jobs": ["demonstrate"],
+  "family": "product-demo",
+  "profile": "path-travel",
+  "evidence": "Wave I I6 approved contract: authored path travel with tangent auto-rotation and arc-law entry and exit",
+  "syncPoints": [{ "id": "path-arrive", "phase": "in", "offset": 1.2 }],
+  "files": [
+    {
+      "path": "offset-path-traveler.html",
+      "target": "compositions/components/offset-path-traveler.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "path",
+      "type": "string",
+      "role": "content",
+      "label": "Path",
+      "description": "SVG path data authored in a 1000 by 500 route viewBox.",
+      "default": "M -90 390 C 150 490 190 70 430 185 C 650 300 720 105 850 145 C 970 180 1030 85 1090 35"
+    },
+    {
+      "id": "traveler_label",
+      "type": "string",
+      "role": "content",
+      "label": "Traveler label",
+      "description": "Text displayed inside the default traveler chip.",
+      "default": "Live preview"
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Color used by the traveler and route.",
+      "default": "green",
+      "options": [
+        { "value": "green", "label": "Green" },
+        { "value": "blue", "label": "Blue" },
+        { "value": "violet", "label": "Violet" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/onboarding-stepper-flow/demo.html b/registry/components/onboarding-stepper-flow/demo.html
new file mode 100644
index 0000000000..d3bc015ec1
--- /dev/null
+++ b/registry/components/onboarding-stepper-flow/demo.html
@@ -0,0 +1,154 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Onboarding Stepper Flow - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #fafafa;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      /* ponytail: scale on .demo-frame (not a GSAP target) — safe CSS transform */
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        min-width: 760px;
+        min-height: 520px;
+        padding: 56px;
+        transform: scale(2.3);
+      }
+      .hf-ui-onboarding-flow {
+        display: grid;
+        gap: 22px;
+        width: 520px;
+        color: #18181b;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-ui-onboarding-steps {
+        display: flex;
+        justify-content: center;
+        gap: 18px;
+      }
+      .hf-ui-onboarding-steps span {
+        display: grid;
+        place-items: center;
+        width: 44px;
+        height: 44px;
+        border: 2px solid #e4e4e7;
+        border-radius: 999px;
+        background: #ffffff;
+        color: #71717a;
+        font-size: 15px;
+        font-weight: 600;
+      }
+      .hf-ui-onboarding-steps .done,
+      .hf-ui-onboarding-steps .active {
+        border-color: #18181b;
+        background: #18181b;
+        color: #ffffff;
+      }
+      .hf-ui-onboarding-card {
+        display: grid;
+        gap: 14px;
+        padding: 34px;
+        border: 1px solid #e4e4e7;
+        border-radius: 28px;
+        background: #ffffff;
+        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.1);
+      }
+      .hf-ui-onboarding-card small {
+        color: #71717a;
+        font-size: 11px;
+        font-weight: 600;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+      }
+      .hf-ui-onboarding-card strong {
+        font-size: 30px;
+        font-weight: 700;
+        line-height: 1.1;
+      }
+      .hf-ui-onboarding-card p {
+        margin: 0;
+        color: #71717a;
+        font-size: 16px;
+        line-height: 1.5;
+      }
+      .hf-ui-onboarding-card button {
+        justify-self: start;
+        height: 46px;
+        padding: 0 22px;
+        border: 0;
+        border-radius: 12px;
+        background: #18181b;
+        color: #ffffff;
+        font-size: 15px;
+        font-weight: 600;
+        cursor: default;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="onboarding-stepper-flow-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-ui-onboarding-flow">
+          <div class="hf-ui-onboarding-steps">
+            <span class="done">1</span><span class="active">2</span><span>3</span>
+          </div>
+          <div class="hf-ui-onboarding-card">
+            <small>Step 2 of 3</small>
+            <strong>Choose your visual style</strong>
+            <p>Pick a direction so the agent can generate matching motion primitives.</p>
+            <button type="button">Continue</button>
+          </div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        tl.fromTo(
+          ".hf-ui-onboarding-steps span",
+          { scale: 0.7, opacity: 0 },
+          { scale: 1, opacity: 1, duration: 0.28, stagger: 0.08, ease: "back.out(1.8)" },
+          0.3,
+        );
+        tl.fromTo(
+          ".hf-ui-onboarding-card",
+          { y: 28, opacity: 0 },
+          { y: 0, opacity: 1, duration: 0.42, ease: "power3.out" },
+          0.62,
+        );
+        tl.to(
+          ".hf-ui-onboarding-steps .active",
+          { scale: 1.16, duration: 0.16, yoyo: true, repeat: 1, ease: "power1.inOut" },
+          1.1,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["onboarding-stepper-flow-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/onboarding-stepper-flow/onboarding-stepper-flow.html b/registry/components/onboarding-stepper-flow/onboarding-stepper-flow.html
new file mode 100644
index 0000000000..3870c88a1a
--- /dev/null
+++ b/registry/components/onboarding-stepper-flow/onboarding-stepper-flow.html
@@ -0,0 +1,92 @@
+<!--
+  Onboarding Stepper Flow - Remocn-inspired composed UI flow for HyperFrames.
+
+  Paste the markup and CSS into a composition. Use the timeline integration
+  note at the bottom as the starting point for deterministic GSAP animation.
+-->
+
+<div class="hf-ui-onboarding-flow">
+  <div class="hf-ui-onboarding-steps">
+    <span class="done">1</span><span class="active">2</span><span>3</span>
+  </div>
+  <div class="hf-ui-onboarding-card">
+    <small>Step 2 of 3</small>
+    <strong>Choose your visual style</strong>
+    <p>Pick a direction so the agent can generate matching motion primitives.</p>
+    <button type="button">Continue</button>
+  </div>
+</div>
+
+<style>
+  .hf-ui-onboarding-flow {
+    display: grid;
+    gap: 22px;
+    width: 520px;
+    color: #18181b;
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-ui-onboarding-steps {
+    display: flex;
+    justify-content: center;
+    gap: 18px;
+  }
+  .hf-ui-onboarding-steps span {
+    display: grid;
+    place-items: center;
+    width: 44px;
+    height: 44px;
+    border: 2px solid #e4e4e7;
+    border-radius: 999px;
+    background: #ffffff;
+    color: #71717a;
+    font-weight: 900;
+  }
+  .hf-ui-onboarding-steps .done,
+  .hf-ui-onboarding-steps .active {
+    border-color: #18181b;
+    background: #18181b;
+    color: #ffffff;
+  }
+  .hf-ui-onboarding-card {
+    display: grid;
+    gap: 14px;
+    padding: 34px;
+    border: 1px solid #e4e4e7;
+    border-radius: 28px;
+    background: #ffffff;
+    box-shadow: 0 26px 80px rgba(0, 0, 0, 0.1);
+  }
+  .hf-ui-onboarding-card small {
+    color: #71717a;
+    font-weight: 900;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+  .hf-ui-onboarding-card strong {
+    font-size: 30px;
+    line-height: 1;
+  }
+  .hf-ui-onboarding-card p {
+    margin: 0;
+    color: #71717a;
+    font-size: 16px;
+    line-height: 1.45;
+  }
+  .hf-ui-onboarding-card button {
+    justify-self: start;
+    height: 46px;
+    padding: 0 19px;
+    border: 0;
+    border-radius: 14px;
+    background: #18181b;
+    color: #ffffff;
+    font-weight: 900;
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-ui-onboarding-steps span', { scale: 0.7, opacity: 0 }, { scale: 1, opacity: 1, duration: 0.28, stagger: 0.08, ease: 'back.out(1.8)' }, 0.3);
+  tl.fromTo('.hf-ui-onboarding-card', { y: 28, opacity: 0 }, { y: 0, opacity: 1, duration: 0.42, ease: 'power3.out' }, 0.62);
+  tl.to('.hf-ui-onboarding-steps .active', { scale: 1.16, duration: 0.16, yoyo: true, repeat: 1, ease: 'power1.inOut' }, 1.1);
+-->
diff --git a/registry/components/onboarding-stepper-flow/registry-item.json b/registry/components/onboarding-stepper-flow/registry-item.json
new file mode 100644
index 0000000000..a766022244
--- /dev/null
+++ b/registry/components/onboarding-stepper-flow/registry-item.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "onboarding-stepper-flow",
+  "type": "hyperframes:component",
+  "title": "Onboarding Stepper Flow",
+  "description": "A composed onboarding flow with milestone rail, active step card, and next-action button",
+  "tags": ["ui-flow", "remocn-port", "onboarding", "stepper"],
+  "files": [
+    {
+      "path": "onboarding-stepper-flow.html",
+      "target": "compositions/components/onboarding-stepper-flow.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/onboarding-stepper-flow.png"
+  }
+}
diff --git a/registry/components/ordered-dither-pass/README.md b/registry/components/ordered-dither-pass/README.md
new file mode 100644
index 0000000000..8a9f3705d5
--- /dev/null
+++ b/registry/components/ordered-dither-pass/README.md
@@ -0,0 +1,79 @@
+# ordered-dither-pass
+
+Wave M experiment (texture / transitions). Bayer-matrix ordered dithering
+quantizes a slotted scene: the source is rasterized once at mount to a
+reduced-resolution buffer (one dither pixel is about 3 display px, blitted
+with image smoothing off), and every frame re-derives each output pixel
+from (source pixel, Bayer threshold, the animated dither amount). With
+direction `in` the image emerges from pure 2-tone noise (theme bg vs
+accent) into posterized color and finally clean; `out` runs the ramp in
+reverse and holds the noise. Ordered, parallel, frame-independent; never
+error diffusion. 3.5s authored, elastic HOLD (never time-scaled).
+
+## Mounting
+
+```html
+<div
+  class="clip"
+  data-composition-id="ordered-dither-pass"
+  data-composition-src="./components/ordered-dither-pass.html"
+  data-variable-values='{"matrix":"8","levels":3,"accent":"blue"}'
+  data-start="0"
+  data-duration="3.5"
+  data-track-index="0"
+></div>
+```
+
+## Scene slot
+
+The source scene is a slot. Place an inert template anywhere in the HOST
+page:
+
+```html
+<template data-slot="ordered-dither-pass-scene"> ...scene... </template>
+```
+
+The slot is rasterized through an SVG foreignObject snapshot, so content
+must be self-contained: inline styles or rules carried by host `<style>`
+tags (both are copied into the snapshot), data-URI images only, system or
+already-active fonts. External resources do not load inside a snapshot.
+A missing slot falls back to a token monogram tile rasterized
+synchronously from contract tokens.
+
+## Variables
+
+| id        | type   | default | notes                                                                                                |
+| --------- | ------ | ------- | ---------------------------------------------------------------------------------------------------- |
+| matrix    | enum   | 4       | Bayer matrix size: 2 coarsest crosshatch, 4 classic, 8 smoothest grain.                              |
+| direction | enum   | in      | in resolves noise to clean; out dissolves clean to noise and holds it.                               |
+| levels    | number | 2       | Quantization levels per color channel during the dithered phase (2-6).                               |
+| accent    | enum   | green   | Light tone of the 2-tone noise phase: green maps to --brand, blue to --accent, violet to --accent-2. |
+| exit      | enum   | none    | none holds the final state (frame roots own transitions); fade or up add a 0.45s departure.          |
+
+## Choreography
+
+- 0.00s: the field fades up over 0.25s in its start state (pure Bayer
+  noise for `in`, the clean source for `out`).
+- 0.40s: one scalar dither amount ramps across 1.6s (power1.inOut). For
+  `in`: contrast emerges under the dither first, then the dither releases
+  into the clean source over the last stretch of the ramp; the noise
+  phase reads as a bg/accent duotone, the middle as posterized color.
+- 2.00s: the ramp lands.
+- HOLD: truly still (clean for `in`, pure noise for `out`), elastic with
+  the clip duration.
+
+Sync point `ramp` fires as the amount starts moving; align SFX to it.
+
+## Determinism
+
+The source buffer (a detached ImageData copy), the Bayer threshold table,
+and every resolved color are fixed once at mount. One anchor tween spans
+the full duration and the timeline's onUpdate rewrites one reused
+ImageData end to end from those tables and the current time, then blits
+it scaled with smoothing off. Stateless per frame: no Math.random, no
+wall clock, no incremental state, so eventful seeks (suppressEvents
+false) land identical frames in any order and either direction. The
+no-slot monogram raster is drawn synchronously before the timeline
+registers; a slotted raster arrives from the snapshot decode (page-load
+scale, before capture begins) and repaints the current frame, after
+which all frames are pure f(t).
diff --git a/registry/components/ordered-dither-pass/demo.html b/registry/components/ordered-dither-pass/demo.html
new file mode 100644
index 0000000000..468886e813
--- /dev/null
+++ b/registry/components/ordered-dither-pass/demo.html
@@ -0,0 +1,125 @@
+<!doctype html>
+<!--
+  ordered-dither-pass demo. A full-bleed 1920x1080 LIGHT host mounts the
+  primitive through data-composition-src with non-default variables
+  (8x8 matrix, 3 levels, blue accent) and supplies the scene slot to
+  prove the snapshot raster path while the primitive stays elastic.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Ordered Dither Pass Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #f5f6f8);
+      }
+
+      #root {
+        --bg: #f5f6f8;
+        --fg: #101318;
+        --muted: #5b6472;
+        --surface: #ffffff;
+        --border: #d7dce4;
+        --brand: #14a35e;
+        --accent: #2f6fed;
+        --accent-2: #7a5cd6;
+        --radius: 24px;
+        --font-display: "Inter", system-ui, sans-serif;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg);
+      }
+
+      .mount-stage {
+        position: absolute;
+        inset: 0;
+        container-type: size;
+        overflow: hidden;
+      }
+
+      .dither-demo-scene {
+        display: grid;
+        place-items: center;
+      }
+
+      .dither-demo-scene .panel {
+        display: grid;
+        place-items: center;
+        gap: 18px;
+        width: 900px;
+        height: 480px;
+        border-radius: 36px;
+        background: linear-gradient(135deg, #2f6fed 0%, #7a5cd6 55%, #d9506b 100%);
+      }
+
+      .dither-demo-scene .word {
+        color: #ffffff;
+        font-family: system-ui, sans-serif;
+        font-size: 124px;
+        font-weight: 600;
+        letter-spacing: -0.01em;
+      }
+
+      .dither-demo-scene .tag {
+        color: rgba(255, 255, 255, 0.78);
+        font-family: ui-monospace, Menlo, monospace;
+        font-size: 28px;
+        letter-spacing: 0.16em;
+        text-transform: uppercase;
+      }
+    </style>
+  </head>
+  <body>
+    <template data-slot="ordered-dither-pass-scene">
+      <div class="dither-demo-scene">
+        <div class="panel">
+          <span class="word">RESOLVE</span>
+          <span class="tag">signal from noise</span>
+        </div>
+      </div>
+    </template>
+
+    <div
+      id="root"
+      data-composition-id="ordered-dither-pass-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="3.5"
+      data-fps="30"
+    >
+      <div
+        id="ordered-dither-pass-mount"
+        class="mount-stage clip"
+        data-composition-id="ordered-dither-pass"
+        data-composition-src="./ordered-dither-pass.html"
+        data-variable-values='{"matrix":"8","levels":3,"accent":"blue"}'
+        data-start="0"
+        data-duration="3.5"
+        data-track-index="0"
+        data-width="1920"
+        data-height="1080"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["ordered-dither-pass-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/ordered-dither-pass/ordered-dither-pass.html b/registry/components/ordered-dither-pass/ordered-dither-pass.html
new file mode 100644
index 0000000000..432b83b231
--- /dev/null
+++ b/registry/components/ordered-dither-pass/ordered-dither-pass.html
@@ -0,0 +1,511 @@
+<!doctype html>
+<!--
+  ordered-dither-pass: HyperFrames video primitive (Wave M experiment,
+  texture / transitions)
+
+  Bayer-matrix ordered dithering quantizes a slotted scene. The source is
+  rasterized ONCE at mount to a reduced-resolution offscreen buffer; every
+  frame re-derives each output pixel from (source pixel, Bayer threshold,
+  the animated dither amount), so the pass is stateless per frame. With
+  direction "in" the image emerges from pure 2-tone noise (theme bg vs
+  accent) into posterized color and finally clean; "out" runs the same
+  ramp in reverse and holds the noise. Explicitly ordered (parallel,
+  frame-independent) dithering, never error diffusion.
+
+  The scene is a SLOT. Callers supply content by placing an inert template
+  anywhere in the HOST page (templates never render, and the runtime wipes
+  the host clip's own children on mount):
+
+    <template data-slot="ordered-dither-pass-scene"> ... </template>
+
+  Slot content is rasterized through an SVG foreignObject snapshot, so it
+  must be self-contained: inline styles or rules carried by host <style>
+  tags (which are copied into the snapshot), data-URI images only, system
+  or already-active fonts. When no slot exists, the primitive rasterizes
+  a token monogram tile drawn synchronously from contract tokens.
+
+  Variables (declared in data-composition-variables below):
+    - matrix ("2" | "4" | "8", default "4"): Bayer matrix size; 2 is the
+      coarsest crosshatch, 8 the smoothest ordered grain.
+    - direction ("in" | "out", default "in"): in resolves noise to clean;
+      out dissolves clean to noise and holds it.
+    - levels (2-6, default 2): quantization levels per color channel
+      during the dithered phase.
+    - accent ("green" | "blue" | "violet", default "green"): the light
+      tone of the 2-tone noise phase; green rides --brand, blue rides
+      --accent, violet rides --accent-2.
+    - exit ("none" | "fade" | "up", default "none"): frame roots own
+      transitions; the default holds the final state to the cut.
+
+  Envelope, fixed segments with elastic HOLD only (never timeScale):
+    0.00s   the field fades up over 0.25s in its start state
+    0.40s   the dither amount ramps across 1.6s (power1.inOut)
+    then    HOLD, truly still (clean for "in", pure noise for "out")
+    OUT = 0.45s only when exit is not none
+
+  Determinism (canvas 2D law): the source buffer, the Bayer table, and
+  every resolved color are fixed once at mount. Every painted frame is a
+  pure function of (those tables, the timeline's current time): onUpdate
+  rewrites one reused ImageData end to end and blits it, scaled with
+  image smoothing off (the chunky retro pixel is the point). No
+  Math.random, no wall clock, no incremental state; eventful seeks
+  (suppressEvents false, the engine's render path) land identical frames
+  in any order and either direction. The no-slot monogram raster is drawn
+  synchronously before the timeline registers; a slotted raster arrives
+  from the snapshot decode and repaints the current frame, after which
+  all frames are pure f(t).
+-->
+<html
+  lang="en"
+  data-composition-id="ordered-dither-pass"
+  data-composition-duration="3.5"
+  data-composition-variables='[
+    { "id": "matrix", "type": "enum", "role": "style", "label": "Matrix", "description": "Bayer matrix size: 2 is the coarsest crosshatch, 8 the smoothest ordered grain.", "default": "4", "options": [{ "value": "2", "label": "2 x 2" }, { "value": "4", "label": "4 x 4" }, { "value": "8", "label": "8 x 8" }] },
+    { "id": "direction", "type": "enum", "role": "timing", "label": "Direction", "description": "in resolves noise to clean; out dissolves clean to noise and holds it.", "default": "in", "options": [{ "value": "in", "label": "Noise to clean" }, { "value": "out", "label": "Clean to noise" }] },
+    { "id": "levels", "type": "number", "role": "style", "label": "Levels", "description": "Quantization levels per color channel during the dithered phase.", "default": 2, "min": 2, "max": 6, "step": 1 },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Light tone of the 2-tone noise phase: green rides --brand, blue rides --accent, violet rides --accent-2.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the final state holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Ordered Dither Pass</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="ordered-dither-pass" data-duration="3.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, "Inter", system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .odp-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .odp-stage {
+            position: absolute;
+            inset: 0;
+            will-change: transform, opacity;
+          }
+
+          .odp-canvas {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+          }
+        </style>
+
+        <div
+          id="ordered-dither-pass-clip"
+          class="odp-clip clip"
+          data-start="0"
+          data-duration="3.5"
+          data-track-index="0"
+        >
+          <div class="odp-stage">
+            <canvas class="odp-canvas" aria-hidden="true"></canvas>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".odp-stage");
+            var canvas = root.querySelector(".odp-canvas");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            function num(value, fallback, min, max) {
+              var n = Number(value);
+              if (!isFinite(n)) n = fallback;
+              return Math.max(min, Math.min(max, n));
+            }
+
+            var matrixSize = vars.matrix === "2" || vars.matrix === "8" ? Number(vars.matrix) : 4;
+            var direction = vars.direction === "out" ? "out" : "in";
+            var levels = Math.round(num(vars.levels, 2, 2, 6));
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            // Bundler mirrors composition variables as scoped CSS custom
+            // props; when this unit's accent variable shadows the --accent
+            // token ("blue" is a valid CSS color), fall back to the literal.
+            var computedAccent = getComputedStyle(root).getPropertyValue("--accent").trim();
+            if (
+              computedAccent === "green" ||
+              computedAccent === "blue" ||
+              computedAccent === "violet"
+            ) {
+              accentColors.blue = "#61a8ff";
+            }
+
+            // Envelope.
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "3.5"));
+            var OUT = exit === "none" ? 0 : 0.45;
+            var RAMP_AT = 0.4;
+            var RAMP = Math.min(1.6, Math.max(0.6, duration - OUT - RAMP_AT - 0.4));
+            var FADE_IN = 0.25;
+            var OUT_START = duration - OUT;
+
+            // Display canvas basis, fixed once at mount.
+            var dpr = Math.min(2, Math.max(1, Number(window.devicePixelRatio) || 1));
+            var box = root.getBoundingClientRect();
+            var cssW = Math.max(1, Math.round(box.width) || 640);
+            var cssH = Math.max(1, Math.round(box.height) || 360);
+            canvas.width = Math.round(cssW * dpr);
+            canvas.height = Math.round(cssH * dpr);
+            var ctx = canvas.getContext("2d");
+            ctx.imageSmoothingEnabled = false;
+
+            // Reduced-resolution pixel buffer: one dither pixel is about 3
+            // display px (capped 640 wide), the chunky retro read AND the
+            // per-frame loop budget.
+            var bufW = Math.max(8, Math.min(640, Math.round(cssW / 3)));
+            var bufH = Math.max(8, Math.round(bufW * (cssH / cssW)));
+
+            // Resolve tokens to concrete values once at mount.
+            var hostDoc = root.ownerDocument;
+            function resolveColor(cssColor, fallback) {
+              var probe = hostDoc.createElement("span");
+              probe.style.color = cssColor;
+              root.appendChild(probe);
+              var out = getComputedStyle(probe).color || fallback;
+              probe.remove();
+              return out;
+            }
+            function parseRgb(color, fallback) {
+              var m = /rgba?\(\s*([\d.]+)[,\s]+([\d.]+)[,\s]+([\d.]+)/.exec(color);
+              return m ? [Number(m[1]), Number(m[2]), Number(m[3])] : fallback;
+            }
+            var bgColor = resolveColor("var(--bg, #0b0c0e)", "#0b0c0e");
+            var bgRgb = parseRgb(bgColor, [11, 12, 14]);
+            var accentRgb = parseRgb(
+              resolveColor(accentColors[accent], "#71f5a7"),
+              [113, 245, 167],
+            );
+            var monoFamily = (function () {
+              var probe = hostDoc.createElement("span");
+              probe.style.fontFamily =
+                'var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace)';
+              root.appendChild(probe);
+              var out = getComputedStyle(probe).fontFamily || "monospace";
+              probe.remove();
+              return out;
+            })();
+
+            // Bayer matrix, generated recursively; thresholds normalized to
+            // (i + 0.5) / n^2 in [0, 1).
+            var bayer = (function () {
+              var m = [[0]];
+              var size = 1;
+              while (size < matrixSize) {
+                var next = [];
+                for (var y = 0; y < size * 2; y += 1) next.push(new Array(size * 2));
+                for (var yy = 0; yy < size; yy += 1) {
+                  for (var xx = 0; xx < size; xx += 1) {
+                    var v = 4 * m[yy][xx];
+                    next[yy][xx] = v;
+                    next[yy][xx + size] = v + 2;
+                    next[yy + size][xx] = v + 3;
+                    next[yy + size][xx + size] = v + 1;
+                  }
+                }
+                m = next;
+                size *= 2;
+              }
+              var n2 = matrixSize * matrixSize;
+              var flat = new Float64Array(n2);
+              for (var by = 0; by < matrixSize; by += 1) {
+                for (var bx = 0; bx < matrixSize; bx += 1) {
+                  flat[by * matrixSize + bx] = (m[by][bx] + 0.5) / n2;
+                }
+              }
+              return flat;
+            })();
+
+            // Source raster at buffer resolution, composited over the bg.
+            var raster = hostDoc.createElement("canvas");
+            raster.width = bufW;
+            raster.height = bufH;
+            var rctx = raster.getContext("2d");
+
+            var srcData = null; // Uint8ClampedArray, fixed after raster
+            var rasterReady = false;
+
+            function paintMonogram(target, w, h) {
+              var m = Math.min(w, h);
+              target.fillStyle = bgColor;
+              target.fillRect(0, 0, w, h);
+              var tile = m * 0.62;
+              var x = (w - tile) / 2;
+              var y = (h - tile) / 2;
+              target.fillStyle = resolveColor(
+                "color-mix(in srgb, var(--surface, #14171c) 72%, " + accentColors[accent] + ")",
+                "#1a2a22",
+              );
+              target.beginPath();
+              if (target.roundRect) target.roundRect(x, y, tile, tile, m * 0.06);
+              else target.rect(x, y, tile, tile);
+              target.fill();
+              target.fillStyle = resolveColor(
+                "color-mix(in srgb, var(--fg, #f8fafc) 30%, " + accentColors[accent] + ")",
+                "#a8f5c8",
+              );
+              target.font = "600 " + Math.round(m * 0.36) + "px " + monoFamily;
+              target.textAlign = "center";
+              target.textBaseline = "middle";
+              target.fillText("H", w / 2, h / 2 + m * 0.014);
+            }
+
+            function finishRaster() {
+              srcData = rctx.getImageData(0, 0, bufW, bufH).data;
+              rasterReady = true;
+              root.setAttribute("data-odp-raster", "ready");
+              paint(tl ? tl.time() : 0);
+            }
+
+            // SLOT. Rasterized through an SVG foreignObject snapshot of the
+            // slot markup plus every host <style> tag and the resolved
+            // contract tokens.
+            var slotTemplate = null;
+            try {
+              slotTemplate = hostDoc.querySelector(
+                'template[data-slot="ordered-dither-pass-scene"]',
+              );
+            } catch (error) {
+              slotTemplate = null;
+            }
+
+            if (slotTemplate) {
+              var tokenNames = [
+                "--bg",
+                "--fg",
+                "--muted",
+                "--surface",
+                "--border",
+                "--brand",
+                "--accent",
+                "--accent-2",
+                "--font-display",
+                "--font-body",
+                "--font-mono",
+                "--radius",
+                "--space-1",
+                "--space-2",
+                "--space-3",
+                "--dur-beat",
+                "--ease-standard",
+                "--ease-emphasis",
+              ];
+              var rootStyle = getComputedStyle(root);
+              var tokenDecl = "";
+              for (var ti = 0; ti < tokenNames.length; ti += 1) {
+                var tv = rootStyle.getPropertyValue(tokenNames[ti]).trim();
+                if (tv) tokenDecl += tokenNames[ti] + ":" + tv + ";";
+              }
+              var styleTexts = "";
+              var styleTags = hostDoc.querySelectorAll("style");
+              for (var si = 0; si < styleTags.length; si += 1) {
+                styleTexts += styleTags[si].textContent || "";
+              }
+              // Snapshot at css size for faithful layout, then downsample
+              // into the buffer raster.
+              var wrapper = hostDoc.createElement("div");
+              wrapper.setAttribute(
+                "style",
+                "width:" +
+                  cssW +
+                  "px;height:" +
+                  cssH +
+                  "px;overflow:hidden;position:relative;" +
+                  "display:grid;place-items:center;background:" +
+                  bgColor +
+                  ";" +
+                  tokenDecl,
+              );
+              wrapper.appendChild(hostDoc.importNode(slotTemplate.content, true));
+              var styleEl = hostDoc.createElement("style");
+              styleEl.textContent = styleTexts;
+              wrapper.insertBefore(styleEl, wrapper.firstChild);
+              var serialized = new XMLSerializer().serializeToString(wrapper);
+              var svgMarkup =
+                // No xmlns on foreignObject: a default xmlns declaration
+                // applies to the declaring element itself and would eject
+                // foreignObject from the SVG namespace (renders blank). The
+                // serialized wrapper div already carries the XHTML namespace.
+                '<svg xmlns="http://www.w3.org/2000/svg" width="' +
+                cssW +
+                '" height="' +
+                cssH +
+                '"><foreignObject width="' +
+                cssW +
+                '" height="' +
+                cssH +
+                '">' +
+                serialized +
+                "</foreignObject></svg>";
+              var snapshot = new Image();
+              snapshot.onload = function () {
+                rctx.fillStyle = bgColor;
+                rctx.fillRect(0, 0, bufW, bufH);
+                rctx.drawImage(snapshot, 0, 0, bufW, bufH);
+                try {
+                  finishRaster();
+                } catch (error) {
+                  // Tainted or unreadable snapshot: fall back to the monogram.
+                  paintMonogram(rctx, bufW, bufH);
+                  finishRaster();
+                }
+              };
+              snapshot.onerror = function () {
+                paintMonogram(rctx, bufW, bufH);
+                finishRaster();
+              };
+              snapshot.src = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svgMarkup);
+            } else {
+              paintMonogram(rctx, bufW, bufH);
+              srcData = rctx.getImageData(0, 0, bufW, bufH).data;
+              rasterReady = true;
+              root.setAttribute("data-odp-raster", "ready");
+            }
+
+            var outImage = rctx.createImageData(bufW, bufH);
+
+            function clamp01(v) {
+              return v < 0 ? 0 : v > 1 ? 1 : v;
+            }
+
+            // The whole pass is one scalar a(t) in [0, 1]: 1 = pure 2-tone
+            // noise, 0 = clean source.
+            //   contrast = clamp01((1 - a) * 1.6)  signal emerges under dither
+            //   cleanMix = clamp01(((1 - a) - 0.55) / 0.45)  dither releases
+            //   duoMix   = clamp01((a - 0.55) / 0.45)  noise phase is duotone
+            function amountAt(t) {
+              var p = clamp01((t - RAMP_AT) / RAMP);
+              // power1.inOut
+              p = p < 0.5 ? 2 * p * p : 1 - 2 * (1 - p) * (1 - p);
+              return direction === "in" ? 1 - p : p;
+            }
+
+            // Pure repaint from (srcData, bayer, t): every output pixel is
+            // rewritten, no state survives between frames.
+            function paint(timeSeconds) {
+              ctx.fillStyle = bgColor;
+              ctx.fillRect(0, 0, canvas.width, canvas.height);
+              if (!rasterReady) return;
+              var fade = clamp01(timeSeconds / FADE_IN);
+              var a = amountAt(timeSeconds);
+              var contrast = clamp01((1 - a) * 1.6);
+              var cleanMix = clamp01((1 - a - 0.55) / 0.45);
+              var duoMix = clamp01((a - 0.55) / 0.45);
+              var L1 = levels - 1;
+              var out = outImage.data;
+              for (var y = 0; y < bufH; y += 1) {
+                var brow = (y % matrixSize) * matrixSize;
+                for (var x = 0; x < bufW; x += 1) {
+                  var th = bayer[brow + (x % matrixSize)];
+                  var i = (y * bufW + x) * 4;
+                  var vr = 0.5 + (srcData[i] / 255 - 0.5) * contrast;
+                  var vg = 0.5 + (srcData[i + 1] / 255 - 0.5) * contrast;
+                  var vb = 0.5 + (srcData[i + 2] / 255 - 0.5) * contrast;
+                  var qr = Math.floor(vr * L1 + th) / L1;
+                  var qg = Math.floor(vg * L1 + th) / L1;
+                  var qb = Math.floor(vb * L1 + th) / L1;
+                  qr = qr < 0 ? 0 : qr > 1 ? 1 : qr;
+                  qg = qg < 0 ? 0 : qg > 1 ? 1 : qg;
+                  qb = qb < 0 ? 0 : qb > 1 ? 1 : qb;
+                  // Noise phase is a BINARY luminance threshold, independent
+                  // of levels: odd level counts put flat mid-gray exactly on
+                  // a quantization step, which would render the "pure noise"
+                  // pole as a flat field instead of the Bayer pattern.
+                  var lum = 0.299 * vr + 0.587 * vg + 0.114 * vb;
+                  var tone = lum > th ? 1 : 0;
+                  var dr = bgRgb[0] + (accentRgb[0] - bgRgb[0]) * tone;
+                  var dg = bgRgb[1] + (accentRgb[1] - bgRgb[1]) * tone;
+                  var db = bgRgb[2] + (accentRgb[2] - bgRgb[2]) * tone;
+                  var r = qr * 255 + (dr - qr * 255) * duoMix;
+                  var g = qg * 255 + (dg - qg * 255) * duoMix;
+                  var b = qb * 255 + (db - qb * 255) * duoMix;
+                  r += (srcData[i] - r) * cleanMix;
+                  g += (srcData[i + 1] - g) * cleanMix;
+                  b += (srcData[i + 2] - b) * cleanMix;
+                  out[i] = r;
+                  out[i + 1] = g;
+                  out[i + 2] = b;
+                  out[i + 3] = 255;
+                }
+              }
+              rctx.putImageData(outImage, 0, 0);
+              ctx.globalAlpha = fade;
+              ctx.drawImage(raster, 0, 0, bufW, bufH, 0, 0, canvas.width, canvas.height);
+              ctx.globalAlpha = 1;
+              // putImageData reuses the raster canvas as a blit surface;
+              // srcData is a detached copy, so the source stays pristine.
+            }
+
+            gsap.set(stage, { opacity: 1, y: "0cqh" });
+
+            var tl = gsap.timeline({
+              paused: true,
+              onUpdate: function () {
+                paint(tl.time());
+              },
+            });
+
+            // Anchor tween: spans the full authored duration so onUpdate
+            // (the canvas repaint) fires for every eventful seek in [0, D]
+            // and holds keep tl.time() honest.
+            tl.to({ t: 0 }, { t: 1, duration: duration, ease: "none" }, 0);
+
+            // HOLD: truly still (a(t) is constant past the ramp, the source
+            // raster never changes).
+
+            // OUT: optional departure; exit none holds until the frame cuts.
+            if (exit === "up") {
+              tl.to(stage, { y: "-4cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "fade") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            }
+
+            tl.seek(0);
+            paint(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["ordered-dither-pass"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/ordered-dither-pass/registry-item.json b/registry/components/ordered-dither-pass/registry-item.json
new file mode 100644
index 0000000000..efeecff288
--- /dev/null
+++ b/registry/components/ordered-dither-pass/registry-item.json
@@ -0,0 +1,123 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "ordered-dither-pass",
+  "type": "hyperframes:component",
+  "title": "Ordered Dither Pass",
+  "description": "Bayer-matrix ordered dithering quantizes a slotted scene (rasterized once at mount): the image emerges from pure 2-tone noise to clean, or dissolves the reverse. Stateless per frame, never error diffusion.",
+  "tags": ["motion-primitive", "experiment", "texture", "dither", "transition", "quantize"],
+  "jobs": ["reveal", "bridge"],
+  "family": "effects",
+  "profile": "texture",
+  "evidence": "Wave M M2: Codrops 'Building a Real-Time Dithering Shader' (Niccolo Fanton, 2025-06-04), the ordered-not-error-diffusion pass from the wild scout",
+  "syncPoints": [
+    {
+      "id": "ramp",
+      "phase": "in",
+      "offset": 0.4
+    }
+  ],
+  "files": [
+    {
+      "path": "ordered-dither-pass.html",
+      "target": "compositions/components/ordered-dither-pass.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "matrix",
+      "type": "enum",
+      "role": "style",
+      "label": "Matrix",
+      "description": "Bayer matrix size: 2 is the coarsest crosshatch, 8 the smoothest ordered grain.",
+      "default": "4",
+      "options": [
+        {
+          "value": "2",
+          "label": "2 x 2"
+        },
+        {
+          "value": "4",
+          "label": "4 x 4"
+        },
+        {
+          "value": "8",
+          "label": "8 x 8"
+        }
+      ]
+    },
+    {
+      "id": "direction",
+      "type": "enum",
+      "role": "timing",
+      "label": "Direction",
+      "description": "in resolves noise to clean; out dissolves clean to noise and holds it.",
+      "default": "in",
+      "options": [
+        {
+          "value": "in",
+          "label": "Noise to clean"
+        },
+        {
+          "value": "out",
+          "label": "Clean to noise"
+        }
+      ]
+    },
+    {
+      "id": "levels",
+      "type": "number",
+      "role": "style",
+      "label": "Levels",
+      "description": "Quantization levels per color channel during the dithered phase.",
+      "default": 2,
+      "min": 2,
+      "max": 6,
+      "step": 1
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Light tone of the 2-tone noise phase: green rides --brand, blue rides --accent, violet rides --accent-2.",
+      "default": "green",
+      "options": [
+        {
+          "value": "green",
+          "label": "Green"
+        },
+        {
+          "value": "blue",
+          "label": "Blue"
+        },
+        {
+          "value": "violet",
+          "label": "Violet"
+        }
+      ]
+    },
+    {
+      "id": "exit",
+      "type": "enum",
+      "role": "timing",
+      "label": "Exit",
+      "description": "Optional departure. Default none: the final state holds until the frame cuts.",
+      "default": "none",
+      "options": [
+        {
+          "value": "none",
+          "label": "None"
+        },
+        {
+          "value": "fade",
+          "label": "Fade"
+        },
+        {
+          "value": "up",
+          "label": "Up"
+        }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/outline-draw/demo.html b/registry/components/outline-draw/demo.html
new file mode 100644
index 0000000000..5ef5542906
--- /dev/null
+++ b/registry/components/outline-draw/demo.html
@@ -0,0 +1,102 @@
+<!doctype html>
+<!--
+  outline-draw demo. This standalone composition mounts outline-draw.html
+  through data-composition-src. The panel beneath the hollow overlay remains
+  visible, proving that the mask cuts out the center instead of covering it.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Outline Draw Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #05070d);
+      }
+
+      #root {
+        --bg: #05070d;
+        --surface: #131b2e;
+        --fg: #f8fafc;
+        --muted: #94a3b8;
+        --border: #334155;
+        --accent: #38bdf8;
+        --space-8: 8cqmin;
+        --radius-lg: 2.8cqmin;
+        --shadow-panel: 0 3.8cqh 8.4cqh rgb(0 0 0 / 45%);
+        --ease-standard: cubic-bezier(0.215, 0.61, 0.355, 1);
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 40%, var(--surface) 0%, var(--bg) 70%);
+      }
+
+      .mount-card {
+        width: 64%;
+        height: 56%;
+        left: 18%;
+        top: 22%;
+        container-type: size;
+        overflow: hidden;
+        border: 0.12cqmin solid color-mix(in srgb, var(--border) 75%, transparent);
+        border-radius: var(--radius-lg);
+        background: var(--surface);
+        box-shadow: var(--shadow-panel);
+      }
+
+      .mount-card::before {
+        content: "PROOF";
+        position: absolute;
+        inset: 0;
+        display: grid;
+        place-items: center;
+        color: var(--fg);
+        font-family: var(--font-display, Inter, system-ui, sans-serif);
+        font-size: 8cqh;
+        font-weight: 750;
+        letter-spacing: 0.08em;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="outline-draw-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="outline-draw-mount"
+        class="mount-card clip"
+        data-composition-id="outline-draw"
+        data-composition-src="./outline-draw.html"
+        data-variable-values='{"progress":100,"thickness":10,"radius":42}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="1229"
+        data-height="605"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["outline-draw-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/outline-draw/outline-draw.html b/registry/components/outline-draw/outline-draw.html
new file mode 100644
index 0000000000..538d6168f9
--- /dev/null
+++ b/registry/components/outline-draw/outline-draw.html
@@ -0,0 +1,173 @@
+<!doctype html>
+<!--
+  outline-draw: HyperFrames video primitive (effects / burst / prove)
+
+  Concept: a conic-gradient sector draws a rounded outline clockwise. Two
+  opaque masks, clipped to the padding box and border box, are excluded to
+  leave a true hollow center over whatever content is beneath the primitive.
+  One mechanic, one job: visually proving or certifying a framed claim.
+
+  Compiled-from evidence: OutlineDraw, "Border that draws with a composite
+  donut," from the CSS mask research notes.
+
+  Use when: closing a loop around proof, a selected product region, a logo
+  lockup, or a UI callout. Mount it over existing content. The center remains
+  transparent and the overlay never intercepts pointer input.
+
+  Variables:
+    - progress (number, 0 to 100, default 100): final drawn percentage.
+    - thickness (number, default 6): stroke in tenths of host cqw.
+    - radius (number, default 24): corner radius in tenths of host cqmin.
+
+  Envelope: fixed 0.80s IN draws the outline, elastic HOLD preserves the
+  completed proof, and fixed 0.40s OUT fades it. If duration is shorter than
+  1.20s, IN and OUT compress proportionally and HOLD becomes zero.
+
+  Sync point: draw-complete occurs at 0.80s into IN, scaled only when the
+  whole envelope is compressed. It never moves into the elastic HOLD.
+
+  Sound: none. A parent scene may place a static cue at draw-complete.
+
+  Mount contract: the runtime clones only this template. The root fills the
+  host box, owns the container query basis, has no intrinsic width or height,
+  and registers one paused timeline under the hardcoded outline-draw id.
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "progress", "type": "number", "role": "timing", "label": "Draw progress", "description": "Final percentage of the outline that is drawn.", "default": 100, "min": 0, "max": 100, "step": 1, "unit": "%" },
+    { "id": "thickness", "type": "number", "role": "layout", "label": "Stroke thickness", "description": "Outline stroke in tenths of the host width.", "default": 6, "min": 1, "max": 20, "step": 1, "unit": "0.1cqw" },
+    { "id": "radius", "type": "number", "role": "layout", "label": "Corner radius", "description": "Corner radius in tenths of the host smaller dimension.", "default": 24, "min": 0, "max": 80, "step": 1, "unit": "0.1cqmin" }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Outline Draw</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="outline-draw" data-duration="4" data-fps="30">
+        <style>
+          @property --od-progress {
+            syntax: "<number>";
+            inherits: false;
+            initial-value: 0;
+          }
+
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            pointer-events: none;
+          }
+
+          .od-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+          }
+
+          /* EDIT ZONE: --space-8 controls the safe inset. The public
+             thickness and radius variables own the remaining geometry. */
+          .od-outline {
+            --od-progress: 0;
+            --od-thickness: 6;
+            --od-radius: 24;
+            --od-seam-overlap: 0.5deg;
+            position: absolute;
+            inset: var(--space-8, 8cqmin);
+            border: calc(var(--od-thickness) * 0.1cqw) solid transparent;
+            border-radius: calc(var(--od-radius) * 0.1cqmin);
+            background: conic-gradient(
+              from -90deg,
+              var(--accent, #38bdf8) 0deg calc(var(--od-progress) * 3.6deg),
+              transparent calc(var(--od-progress) * 3.6deg + var(--od-seam-overlap)) 360deg
+            );
+            background-clip: border-box;
+            background-origin: border-box;
+            mask:
+              linear-gradient(var(--fg, #f8fafc) 0 0) padding-box,
+              linear-gradient(var(--fg, #f8fafc) 0 0) border-box;
+            mask-composite: exclude;
+            will-change: opacity;
+          }
+
+          /* INVARIANT: the 0.5deg feather overlaps the coincident conic
+             edges at closure so 0deg and 360deg never expose a hard seam. */
+        </style>
+
+        <div
+          id="outline-draw-clip"
+          class="od-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="od-outline" data-layout-ignore aria-hidden="true"></div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var outline = root.querySelector(".od-outline");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            // INVARIANT: invalid values return to declared defaults. Valid
+            // zero values survive because each scalar is checked explicitly.
+            var progressValue = Number(vars.progress);
+            var thicknessValue = Number(vars.thickness);
+            var radiusValue = Number(vars.radius);
+            var progress = Number.isFinite(progressValue)
+              ? Math.max(0, Math.min(100, progressValue))
+              : 100;
+            var thickness = Number.isFinite(thicknessValue)
+              ? Math.max(1, Math.min(20, thicknessValue))
+              : 6;
+            var radius = Number.isFinite(radiusValue) ? Math.max(0, Math.min(80, radiusValue)) : 24;
+
+            outline.style.setProperty("--od-thickness", String(thickness));
+            outline.style.setProperty("--od-radius", String(radius));
+
+            // RETIME RANGE: only these fixed envelope lengths may be tuned.
+            // HOLD is the sole elastic phase. Never use timeScale.
+            var IN_BASE = 0.8;
+            var OUT_BASE = 0.4;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var envelope = IN_BASE + OUT_BASE;
+            var scale = duration < envelope ? duration / envelope : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var OUT_START = IN + HOLD;
+
+            gsap.set(outline, { "--od-progress": 0, opacity: 1 });
+
+            var tl = gsap.timeline({ paused: true });
+            // --ease-standard maps to the production GSAP name power2.out.
+            // The registered scalar is tweened directly, with no proxy clock.
+            tl.to(outline, { "--od-progress": progress, duration: IN, ease: "power2.out" }, 0);
+            tl.to(outline, { opacity: 0, duration: OUT, ease: "power2.out" }, OUT_START);
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines["outline-draw"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/outline-draw/registry-item.json b/registry/components/outline-draw/registry-item.json
new file mode 100644
index 0000000000..4a575e0da4
--- /dev/null
+++ b/registry/components/outline-draw/registry-item.json
@@ -0,0 +1,58 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "outline-draw",
+  "type": "hyperframes:component",
+  "title": "Outline Draw",
+  "description": "A rounded outline that proves a callout by drawing clockwise as a hollow conic-gradient border with a clean closure.",
+  "tags": ["motion-primitive", "effects", "outline", "border", "mask", "proof"],
+  "jobs": ["prove"],
+  "family": "effects",
+  "profile": "burst",
+  "evidence": "OutlineDraw entry, Border that draws with a composite donut, from the CSS mask research notes",
+  "syncPoints": [{ "id": "draw-complete", "phase": "in", "offset": 0.8 }],
+  "files": [
+    {
+      "path": "outline-draw.html",
+      "target": "compositions/components/outline-draw.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "progress",
+      "type": "number",
+      "role": "timing",
+      "label": "Draw progress",
+      "description": "Final percentage of the outline that is drawn.",
+      "default": 100,
+      "min": 0,
+      "max": 100,
+      "step": 1,
+      "unit": "%"
+    },
+    {
+      "id": "thickness",
+      "type": "number",
+      "role": "layout",
+      "label": "Stroke thickness",
+      "description": "Outline stroke in tenths of the host width.",
+      "default": 6,
+      "min": 1,
+      "max": 20,
+      "step": 1,
+      "unit": "0.1cqw"
+    },
+    {
+      "id": "radius",
+      "type": "number",
+      "role": "layout",
+      "label": "Corner radius",
+      "description": "Corner radius in tenths of the host smaller dimension.",
+      "default": 24,
+      "min": 0,
+      "max": 80,
+      "step": 1,
+      "unit": "0.1cqmin"
+    }
+  ]
+}
diff --git a/registry/components/oversized-cursor/README.md b/registry/components/oversized-cursor/README.md
new file mode 100644
index 0000000000..6456b1223a
--- /dev/null
+++ b/registry/components/oversized-cursor/README.md
@@ -0,0 +1,36 @@
+# oversized-cursor
+
+An actor primitive: a deliberately oversized macOS-style pointer enters from off-screen, glides in one continuous vector to a caller-positioned target, taps it (the click visibly ignites the target), drifts aside during the dwell, then accelerates off-screen. One mechanic: a pointer-driven click that visibly causes something.
+
+4.2s authored, elastic HOLD; the cursor's own physical off-screen exit always plays (it is the mechanic).
+
+## Variables
+
+| id               | type       | default    | notes                                                                                                                                      |
+| ---------------- | ---------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
+| `cursor_variant` | enum       | `light`    | `light` (white body) or `dark` (near-black body); pick per scene contrast.                                                                 |
+| `target_x`       | number (%) | `55`       | Tip landing point, percent of the host box (15 to 85).                                                                                     |
+| `target_y`       | number (%) | `55`       | Tip landing point, percent of the host box (15 to 85).                                                                                     |
+| `click_label`    | string     | `Generate` | Label on the clicked target pill.                                                                                                          |
+| `exit`           | enum       | `none`     | `none` leaves the ignited target on screen until the cut; `fade`/`up` also depart the whole stage (target included) during the OUT window. |
+
+## Mount
+
+```html
+<div
+  class="clip"
+  data-composition-id="oversized-cursor"
+  data-composition-src="./oversized-cursor.html"
+  data-variable-values='{"target_x":62,"target_y":48,"click_label":"Render"}'
+  data-start="0"
+  data-duration="4.2"
+  data-track-index="0"
+></div>
+```
+
+Elastic root: no `data-width`/`data-height`; it fills whatever box the host clip gives it. Timeline registers under the literal `oversized-cursor` key.
+
+## Notes
+
+- Invariants: cursor size floor 7cqw; motion on transforms only (never left/top); ripple and click pivot anchor to the arrow tip at (21%, 14%) of the cursor box.
+- Sync point: the click lands at the end of the entry glide (a fixed offset into IN, never inside the elastic HOLD); route a soft UI click SFX there in the mix stage.
diff --git a/registry/components/oversized-cursor/demo.html b/registry/components/oversized-cursor/demo.html
new file mode 100644
index 0000000000..96edf3dcaa
--- /dev/null
+++ b/registry/components/oversized-cursor/demo.html
@@ -0,0 +1,101 @@
+<!doctype html>
+<!--
+  Oversized Cursor, standalone demo.
+
+  Mounts oversized-cursor.html as a sub-composition (data-composition-src) into a
+  dark host stage, instead of inlining its markup/style/script. Passing lint and
+  validate here, with the cursor visibly present in mid-motion snapshots, proves
+  the primitive satisfies the sub-composition mount contract (see
+  skills/hyperframes-core/references/sub-compositions.md).
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Oversized Cursor, Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        margin: 0;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+      }
+
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #05070c);
+        font-family: var(--font-body, Inter, system-ui, sans-serif);
+      }
+
+      .demo-frame {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 1280px;
+        height: 720px;
+        border-radius: 24px;
+        border: 1px solid var(--border, rgba(148, 163, 184, 0.25));
+        background: var(--surface, #0b0f16);
+        box-shadow: 0 40px 120px rgba(2, 6, 23, 0.55);
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="oversized-cursor-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4.2"
+    >
+      <div
+        id="demo-frame"
+        class="demo-frame clip"
+        data-start="0"
+        data-duration="4.2"
+        data-track-index="0"
+      ></div>
+
+      <div
+        class="clip"
+        id="oversized-cursor"
+        data-composition-id="oversized-cursor"
+        data-composition-src="./oversized-cursor.html"
+        data-variable-values='{"cursor_variant":"light","target_x":66,"target_y":42,"click_label":"Ship it"}'
+        data-start="0"
+        data-duration="4.2"
+        data-track-index="1"
+        data-width="1280"
+        data-height="720"
+        style="
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          width: 1280px;
+          height: 720px;
+        "
+      ></div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+      window.__timelines["oversized-cursor-demo"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/registry/components/oversized-cursor/oversized-cursor.html b/registry/components/oversized-cursor/oversized-cursor.html
new file mode 100644
index 0000000000..c55b0e51e1
--- /dev/null
+++ b/registry/components/oversized-cursor/oversized-cursor.html
@@ -0,0 +1,422 @@
+<!doctype html>
+<!--
+  Oversized Cursor (actor primitive), mountable sub-composition
+
+  concept: a deliberately oversized macOS-style pointer that enters the frame
+  from off-screen, travels in one continuous glide to a target, taps it (the
+  click ignites a visible reaction on the target itself), drifts aside during
+  the dwell, then exits off-screen. One mechanic: a pointer-driven click that
+  visibly causes something. Family: pointers. Profile: interaction.
+
+  compiled-from: spec ready (oversized-cursor SKILL.md, ~/Downloads/oversized-cursor);
+  actor file mechanics compose (size/look, entry law, tip-targeting, click-ignition,
+  exit law).
+
+  use-when: kicking off a UI scene, igniting a morph/transition/typing run with a
+  causal click, or carrying the eye across a scene that would otherwise read as
+  static or stale.
+
+  mount contract: this file is a HyperFrames sub-composition, loaded by a host via
+  data-composition-src, never opened standalone. The runtime clones ONLY the
+  <template> contents into the host slot (see
+  skills/hyperframes-core/references/sub-compositions.md); everything outside
+  <template>, including this <head>, is discarded at render. The root is #root:
+  elastic, no data-width/data-height declared here, it fills whatever box the host
+  clip gives it (position:absolute; inset:0). See demo.html for the mount usage
+  (data-composition-src="./oversized-cursor.html" on a sized host clip).
+
+  variables:
+    cursor_variant (enum light|dark)  pointer fill/stroke pairing, pick per scene contrast
+    target_x, target_y (number, percent of the HOST box)  the tip's landing point
+    click_label (string)  label on the target the cursor clicks
+    exit (enum none|fade|up, default none)  optional whole-stage departure during
+      OUT; the cursor's own off-screen exit always plays (it is the mechanic)
+
+  envelope (of data-composition-duration, default 4.2s):
+    IN   0.00s to 1.17s (fixed)     off-screen entry glide (0.85s) then click tap (0.32s)
+    HOLD 1.17s to D-0.60s (elastic) click ignition plays, cursor drifts aside, then dwells
+    OUT  D-0.60s to D (fixed)       cursor accelerates off-screen; with exit fade|up the
+                                    whole stage (target included) also departs
+
+  sound: one click tap SFX (soft UI click) fires at the click moment, the fixed
+  offset into IN documented below as SYNC POINT. This file never plays audio: it
+  only marks the cue's timing for the mix stage to pick up.
+-->
+<html
+  lang="en"
+  data-composition-id="oversized-cursor"
+  data-composition-duration="4.2"
+  data-composition-variables='[
+    { "id": "cursor_variant", "type": "enum", "role": "style", "label": "Cursor fill", "default": "light", "options": [ { "value": "light", "label": "Light (white body)" }, { "value": "dark", "label": "Dark (near-black body)" } ] },
+    { "id": "target_x", "type": "number", "role": "layout", "label": "Target X", "default": 55, "min": 15, "max": 85, "step": 1, "unit": "%" },
+    { "id": "target_y", "type": "number", "role": "layout", "label": "Target Y", "default": 55, "min": 15, "max": 85, "step": 1, "unit": "%" },
+    { "id": "click_label", "type": "string", "role": "content", "label": "Click label", "default": "Generate" },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional whole-stage departure. Default none: the ignited target stays until the frame cuts.", "default": "none", "options": [ { "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" } ] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Oversized Cursor</title>
+    <!-- head is metadata for the source file only; the runtime discards it on mount -->
+  </head>
+  <body>
+    <template>
+      <style>
+        *,
+        *::before,
+        *::after {
+          box-sizing: border-box;
+        }
+
+        /* Root is styled by #root, never a class: the compositor scopes CSS to
+           [data-composition-id="oversized-cursor"] as a descendant selector, so a
+           rule keyed on the root's own class would never match the root itself.
+
+           Elastic and position-blind: fills whatever box the host slot gives it
+           (inset:0), owns its own stacking + container-query context, no
+           position:fixed anywhere in this file. */
+        #root {
+          position: absolute;
+          inset: 0;
+          overflow: hidden;
+          isolation: isolate;
+          container-type: size;
+          container-name: oc-stage;
+          font-family: var(--font-body, Inter, system-ui, sans-serif);
+        }
+
+        .oc-stage {
+          position: absolute;
+          inset: 0;
+          /* Transparent by design: this actor overlays whatever scene it is
+             dropped into. demo.html supplies its own backdrop around it. */
+        }
+
+        /* EDIT ZONE: target look. Safe to retheme via tokens; keep it a simple,
+           legible UI surface so the click reaction reads clearly. */
+        .oc-target {
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          display: flex;
+          align-items: center;
+          gap: var(--space-1, 0.6cqw);
+          padding: var(--space-2, 1.5cqw) var(--space-3, 2.4cqw);
+          border-radius: var(--radius, 999px);
+          border: 1px solid var(--border, rgba(148, 163, 184, 0.35));
+          background: color-mix(
+            in srgb,
+            var(--surface, #f8fafc) calc((1 - var(--oc-ignite, 0)) * 100%),
+            var(--brand, #52525b) calc(var(--oc-ignite, 0) * 100%)
+          );
+          box-shadow: 0 1.2cqw 3.2cqw rgba(2, 6, 23, 0.24);
+          --oc-ignite: 0;
+          z-index: 10;
+        }
+
+        .oc-target-check {
+          width: 1.8cqw;
+          height: 1.8cqw;
+          min-width: 14px;
+          min-height: 14px;
+          flex: none;
+          fill: none;
+          stroke: var(--fg, #ffffff);
+          stroke-width: 2.4;
+          stroke-linecap: round;
+          stroke-linejoin: round;
+          opacity: clamp(0, var(--oc-ignite, 0), 1);
+          transform: scale(calc(0.5 + var(--oc-ignite, 0) * 0.5));
+        }
+
+        .oc-target-label {
+          font-size: clamp(12px, 1.7cqw, 30px);
+          font-weight: 650;
+          line-height: 1;
+          white-space: nowrap;
+          color: color-mix(
+            in srgb,
+            var(--fg, #0f172a) calc((1 - var(--oc-ignite, 0)) * 100%),
+            var(--fg, #ffffff) calc(var(--oc-ignite, 0) * 100%)
+          );
+        }
+
+        /* INVARIANT: cursor size floor is 7cqw for full-frame scenes (house
+           convention). Never go smaller; an actual-size cursor disappears at
+           video scale. */
+        .oc-cursor {
+          position: absolute;
+          left: 0;
+          top: 0;
+          width: 7cqw;
+          height: 7cqw;
+          min-width: 34px;
+          min-height: 34px;
+          pointer-events: none;
+          will-change: transform;
+          filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
+          z-index: 20;
+        }
+
+        .oc-cursor-svg {
+          display: block;
+          width: 100%;
+          height: 100%;
+          stroke-linejoin: round;
+          stroke-linecap: round;
+        }
+
+        /* EDIT ZONE: the two house-convention fill pairings. Pick per scene
+           contrast, keep it constant per film. */
+        .oc-cursor[data-variant="light"] .oc-cursor-svg {
+          fill: #ffffff;
+          stroke: #141414;
+          stroke-width: 1.4;
+        }
+        .oc-cursor[data-variant="dark"] .oc-cursor-svg {
+          fill: #1c1c1c;
+          stroke: #ffffff;
+          stroke-width: 1.4;
+        }
+
+        /* INVARIANT: ripple anchors to the arrow's tip point (21%, 14% of the
+           cursor box), the same point transformOrigin pivots the click tap on. */
+        .oc-ripple {
+          position: absolute;
+          left: 21%;
+          top: 14%;
+          width: 2.6cqw;
+          height: 2.6cqw;
+          min-width: 12px;
+          min-height: 12px;
+          border-radius: 999px;
+          border: 0.24cqw solid color-mix(in srgb, var(--fg, #ffffff) 45%, transparent);
+          transform: translate(-50%, -50%);
+          opacity: 0;
+        }
+      </style>
+
+      <div id="root" data-composition-id="oversized-cursor" data-duration="4.2">
+        <div class="oc-stage">
+          <div class="oc-target" id="oc-target">
+            <svg class="oc-target-check" viewBox="0 0 24 24" aria-hidden="true">
+              <path d="M5 13l4 4L19 7" />
+            </svg>
+            <span class="oc-target-label" id="oc-target-label"></span>
+          </div>
+          <div class="oc-cursor" id="oc-cursor" data-variant="light" aria-hidden="true">
+            <div class="oc-ripple"></div>
+            <svg class="oc-cursor-svg" viewBox="0 0 24 24" aria-hidden="true">
+              <path d="M5 3 L5 19 L9 15 L12 22 L15 20.5 L11.5 14 L18 14 Z" />
+            </svg>
+          </div>
+        </div>
+      </div>
+
+      <script>
+        (function () {
+          "use strict";
+
+          // NOTE: once mounted, document.documentElement is the HOST page's
+          // root element, not this file's own (the mount contract discards
+          // this file's head and html elements after the loader reads declared
+          // variables/duration once, before cloning). html.getAttribute(...)
+          // below therefore resolves to null under mount, and every read
+          // falls through to its inline default (55 / 55 / "Generate" /
+          // "light"), which match this file's own declared defaults above.
+          var html = document.documentElement;
+          var root = document.getElementById("root");
+          var cursor = document.getElementById("oc-cursor");
+          var ripple = cursor.querySelector(".oc-ripple");
+          var target = document.getElementById("oc-target");
+          var targetLabel = document.getElementById("oc-target-label");
+
+          // Declared defaults, then the render/preview engine's override object.
+          var DEFAULTS = {};
+          try {
+            JSON.parse(html.getAttribute("data-composition-variables") || "[]").forEach(
+              function (variable) {
+                DEFAULTS[variable.id] = variable.default;
+              },
+            );
+          } catch (error) {
+            /* malformed declaration falls back to hardcoded defaults below */
+          }
+          // Under mount, the runtime resolves this file's own declared
+          // variables merged with the host clip's per-instance
+          // data-variable-values through a scoped window.__hyperframes,
+          // shadowed in just for this file's script. window.__hfVariables
+          // stays in the merge too, as a raw fallback for the (non-mount)
+          // case where this file is driven by an older render/preview path.
+          var scopedVariables = {};
+          try {
+            if (window.__hyperframes && typeof window.__hyperframes.getVariables === "function") {
+              scopedVariables = window.__hyperframes.getVariables() || {};
+            }
+          } catch (error) {
+            /* no scoped variables API in this context, fall through */
+          }
+          var vars = Object.assign({}, DEFAULTS, window.__hfVariables || {}, scopedVariables);
+
+          function clampPercent(value, fallback) {
+            var n = Number(value);
+            if (!isFinite(n)) n = fallback;
+            return Math.max(0, Math.min(100, n));
+          }
+
+          // Hardcoded per the mount contract: deriving the id from the document
+          // returns null once the compositor rewrites the wrapper's attributes,
+          // which registers the timeline under "null" and breaks seek binding.
+          var compositionId = "oversized-cursor";
+          var duration = Math.max(
+            0.001,
+            parseFloat(
+              root.dataset.duration || html.getAttribute("data-composition-duration") || "4.2",
+            ),
+          );
+          var variant = vars.cursor_variant === "dark" ? "dark" : "light";
+          var targetX = clampPercent(vars.target_x, 55);
+          var targetY = clampPercent(vars.target_y, 55);
+          var clickLabel = String(vars.click_label || "Generate");
+          var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+          var stage = root.querySelector(".oc-stage");
+
+          cursor.setAttribute("data-variant", variant);
+          targetLabel.textContent = clickLabel;
+          target.style.left = targetX + "%";
+          target.style.top = targetY + "%";
+
+          // Motion runs on transforms only (x/y px), never left/top: layout
+          // props snap to integer device pixels under the seek-by-frame
+          // capture engine and stutter on slow/eased motion. Stage size is
+          // read once, synchronously, at load (deterministic: fixed viewport
+          // per render, no resize mid-render) to convert the percent-based
+          // target/off-screen positions (percent of the HOST box, not a fixed
+          // 1920 stage) into the px x/y GSAP needs.
+          var stageW = root.clientWidth || 1920;
+          var stageH = root.clientHeight || 1080;
+          function xAt(percent) {
+            return (percent / 100) * stageW;
+          }
+          function yAt(percent) {
+            return (percent / 100) * stageH;
+          }
+
+          // Tip-targeting: the arrow's visual tip sits at (21%, 14%) inside the
+          // cursor's own box. Anchor the box by that offset once, up front, so
+          // every later x/y tween places the TIP (not the box corner) at the
+          // given stage position. Never tween xPercent/yPercent.
+          gsap.set(cursor, { xPercent: -21, yPercent: -14 });
+          gsap.set(target, { xPercent: -50, yPercent: -50, scale: 1 });
+
+          // RETIME RANGE: IN/OUT are fixed durations (house convention: entry
+          // glide 0.4-0.92s + click tap 0.32s). They only shrink, proportionally,
+          // if the composition duration is too short to hold IN + OUT at all.
+          var IN_BASE = 1.17; // 0.85s glide + 0.1s compress + 0.22s expand
+          var OUT_BASE = 0.6;
+          var totalBase = IN_BASE + OUT_BASE;
+          var IN = IN_BASE;
+          var OUT = OUT_BASE;
+          if (duration < totalBase) {
+            var shrink = duration / totalBase;
+            IN = IN_BASE * shrink;
+            OUT = OUT_BASE * shrink;
+          }
+          var HOLD = Math.max(0, duration - (IN + OUT));
+          var OUT_AT = IN + HOLD;
+          var shrinkFactor = IN / IN_BASE;
+
+          var glideDur = 0.85 * shrinkFactor;
+          var clickInDur = 0.1 * shrinkFactor;
+          var clickOutDur = 0.22 * shrinkFactor;
+          // SYNC POINT: click moment (entry settle), a fixed offset into IN,
+          // never inside the elastic HOLD.
+          var CLICK_AT = glideDur;
+
+          var offX = xAt(48);
+          var offY = yAt(116); // resting pose IS off-screen, below the stage
+
+          var tl = gsap.timeline({ paused: true });
+
+          // ---- IN: off-screen entry, one continuous vector, then the tap ----
+          tl.set(cursor, { scale: 1 });
+          tl.set(ripple, { opacity: 0, scale: 0.4 });
+          tl.set(target, { "--oc-ignite": 0 });
+          tl.fromTo(
+            cursor,
+            { x: offX, y: offY },
+            { x: xAt(targetX), y: yAt(targetY), duration: glideDur, ease: "power3.out" },
+            0,
+          );
+          tl.to(
+            cursor,
+            { scale: 0.84, duration: clickInDur, ease: "power2.in", transformOrigin: "21% 14%" },
+            CLICK_AT,
+          );
+          tl.to(
+            cursor,
+            { scale: 1, duration: clickOutDur, ease: "power2.out", transformOrigin: "21% 14%" },
+            CLICK_AT + clickInDur,
+          );
+
+          // ---- the click ignites the target: parallel reaction, same frame ----
+          tl.to(target, { scale: 0.94, duration: clickInDur, ease: "power2.in" }, CLICK_AT);
+          tl.to(
+            target,
+            { scale: 1, duration: clickOutDur, ease: "power2.out" },
+            CLICK_AT + clickInDur,
+          );
+          tl.fromTo(
+            ripple,
+            { opacity: 0.85, scale: 0.4 },
+            { opacity: 0, scale: 2.4, duration: 0.42, ease: "power2.out" },
+            CLICK_AT + clickInDur,
+          );
+          tl.to(
+            target,
+            { "--oc-ignite": 1, duration: 0.34, ease: "back.out(2.2)" },
+            CLICK_AT + clickInDur,
+          );
+
+          // ---- HOLD (elastic): drift aside once, then dwell, never wobble ----
+          var driftDelay = Math.min(0.22, HOLD * 0.3);
+          var driftDur = Math.max(0, Math.min(0.7, HOLD - driftDelay));
+          if (driftDur > 0.05) {
+            var asideX = clampPercent(targetX + (targetX < 50 ? 16 : -16), targetX);
+            var asideY = clampPercent(targetY + 10, targetY);
+            tl.to(
+              cursor,
+              {
+                x: xAt(asideX),
+                y: yAt(asideY),
+                duration: driftDur,
+                ease: "power2.out",
+                overwrite: "auto",
+              },
+              IN + driftDelay,
+            );
+          }
+
+          // ---- OUT: leave the frame, physically, never a fade-in-place ----
+          tl.to(
+            cursor,
+            { y: yAt(120), duration: OUT, ease: "power2.in", overwrite: "auto" },
+            OUT_AT,
+          );
+
+          // Optional whole-stage departure on top of the cursor's own exit;
+          // exit none leaves the ignited target until the frame cuts.
+          if (exit === "fade") {
+            tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_AT);
+          } else if (exit === "up") {
+            tl.to(stage, { opacity: 0, y: "-4cqh", duration: OUT, ease: "power2.in" }, OUT_AT);
+          }
+
+          tl.seek(0);
+          window.__timelines = window.__timelines || {};
+          window.__timelines[compositionId] = tl;
+        })();
+      </script>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/oversized-cursor/registry-item.json b/registry/components/oversized-cursor/registry-item.json
new file mode 100644
index 0000000000..2c6de08af1
--- /dev/null
+++ b/registry/components/oversized-cursor/registry-item.json
@@ -0,0 +1,74 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "oversized-cursor",
+  "type": "hyperframes:component",
+  "title": "Oversized Cursor",
+  "description": "A deliberately oversized macOS-style pointer that enters off-screen, travels to a target, clicks to ignite a visible response, then exits",
+  "tags": ["motion-primitive", "actor", "cursor", "pointer", "interaction"],
+  "files": [
+    {
+      "path": "oversized-cursor.html",
+      "target": "compositions/components/oversized-cursor.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "jobs": ["demonstrate"],
+  "family": "pointers",
+  "profile": "interaction",
+  "evidence": "spec ready (oversized-cursor SKILL.md); actor file mechanics compose",
+  "variables": [
+    {
+      "id": "cursor_variant",
+      "type": "enum",
+      "role": "style",
+      "label": "Cursor fill",
+      "default": "light",
+      "options": [
+        { "value": "light", "label": "Light (white body)" },
+        { "value": "dark", "label": "Dark (near-black body)" }
+      ]
+    },
+    {
+      "id": "target_x",
+      "type": "number",
+      "role": "layout",
+      "label": "Target X",
+      "default": 55,
+      "min": 15,
+      "max": 85,
+      "step": 1,
+      "unit": "%"
+    },
+    {
+      "id": "target_y",
+      "type": "number",
+      "role": "layout",
+      "label": "Target Y",
+      "default": 55,
+      "min": 15,
+      "max": 85,
+      "step": 1,
+      "unit": "%"
+    },
+    {
+      "id": "click_label",
+      "type": "string",
+      "role": "content",
+      "label": "Click label",
+      "default": "Generate"
+    },
+    {
+      "id": "exit",
+      "type": "enum",
+      "role": "timing",
+      "label": "Exit",
+      "description": "Optional whole-stage departure. Default none: the ignited target stays until the frame cuts.",
+      "default": "none",
+      "options": [
+        { "value": "none", "label": "None" },
+        { "value": "fade", "label": "Fade" },
+        { "value": "up", "label": "Up" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/overwhelm-surround/demo.html b/registry/components/overwhelm-surround/demo.html
new file mode 100644
index 0000000000..4c431dfb97
--- /dev/null
+++ b/registry/components/overwhelm-surround/demo.html
@@ -0,0 +1,98 @@
+<!doctype html>
+<!--
+  overwhelm-surround: demo. Standalone 1920x1080 composition that MOUNTS the
+  primitive at registry/components/overwhelm-surround/overwhelm-surround.html
+  via data-composition-src instead of inlining it. The dark token-themed stage
+  hosts the effect in a 60%-of-frame card centered in the composition.
+  data-variable-values carries deliberately non-default overrides for count,
+  centerLabel, and intensity so preview tooling proves every variable flows
+  through the mount. This file passing lint, validate, and snapshot proves the
+  mount contract holds. Kept in sync with overwhelm-surround.html by hand and
+  not installed by `hyperframes add`.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Overwhelm Surround - Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #05070d;
+      }
+
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 40%, #0d1526 0%, #05070d 70%);
+      }
+
+      /* The 60%-of-frame card gives the mounted primitive a definite CSS box.
+         The mounted internals size from cqw/cqh, and a shrink-to-fit host can
+         otherwise collapse under size containment. data-width/data-height
+         stay in sync below for tooling that reads per-instance dimensions. */
+      .mount-card {
+        --bg: #101827;
+        --fg: #f8fafc;
+        --surface: #1e293b;
+        --brand: #f97316;
+        --accent: #38bdf8;
+        --border: #475569;
+        --muted: #94a3b8;
+        width: 60%;
+        height: 60%;
+        left: 20%;
+        top: 20%;
+        border-radius: 32px;
+        border: 1px solid rgba(148, 163, 184, 0.24);
+        box-shadow: 0 44px 110px rgba(0, 0, 0, 0.48);
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="overwhelm-surround-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4.5"
+      data-fps="30"
+    >
+      <div
+        id="overwhelm-surround-mount"
+        class="mount-card clip"
+        data-composition-id="overwhelm-surround"
+        data-composition-src="./overwhelm-surround.html"
+        data-variable-values='{"count":22,"centerLabel":"Focus","intensity":1.7}'
+        data-start="0"
+        data-duration="4.5"
+        data-track-index="0"
+        data-width="1152"
+        data-height="648"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      // No motion of its own: this demo is a static host for the mounted
+      // primitive, which owns and registers its own timeline. Register an
+      // empty paused timeline under this file's own composition id so the
+      // runtime timeline-registry check is satisfied without inventing motion.
+      window.__timelines = window.__timelines || {};
+      window.__timelines["overwhelm-surround-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/overwhelm-surround/overwhelm-surround.html b/registry/components/overwhelm-surround/overwhelm-surround.html
new file mode 100644
index 0000000000..cf45980bea
--- /dev/null
+++ b/registry/components/overwhelm-surround/overwhelm-surround.html
@@ -0,0 +1,374 @@
+<!doctype html>
+<!--
+  overwhelm-surround: HyperFrames video primitive (effects / holdable / agitate)
+
+  Concept: tasks, tabs, pings, and notification bubbles fly inward from every
+  edge and crowd a calm central subject. Pressure is spatial: the still center
+  keeps the accumulating chaos legible. One mechanic, one job: agitate by
+  surrounding the subject with too much at once.
+
+  Compiled-from evidence: SIM fixture; CORPUS blueprint.
+
+  Use when: a scene needs to show overload, mounting demands, notification
+  pressure, or attention fragmentation while keeping one person or idea clear.
+
+  Variables (declared in data-composition-variables below):
+    - count (number, default 16): number of incoming chips, clamped to 8 through
+      24. Higher values make the peak crowd visibly fuller.
+    - centerLabel (string, default "You"): text inside the still subject. An
+      empty string hides the text while preserving the subject shape.
+    - intensity (number, default 1): pressure level, clamped to 0.5 through 2.
+      Higher values pull the resting rings inward and shorten travel time.
+
+  Envelope (fixed IN/OUT, elastic HOLD only, never gsap.timeScale()):
+    IN_BASE  = 2.20s  indexed arrivals accelerate as the crowd closes in
+    HOLD     = elastic = max(0, D - (IN_BASE + OUT_BASE)); the complete crowd
+               deliberately freezes around the still center at peak density
+    OUT_BASE = 0.50s  the whole pressure field releases in a clean fade
+    If D < IN_BASE + OUT_BASE, IN and OUT scale down together so IN + OUT == D
+    and HOLD == 0.
+
+  Sync points: none. The accelerating cascade is the complete mechanic.
+
+  Sound cue: none. This primitive does not dispatch audio events.
+
+  Mount contract: this file is a MOUNTABLE SUB-COMPOSITION, not a standalone
+  composition. A host loads it via data-composition-src; the runtime only
+  clones <template> contents (everything outside <template>, including the
+  entire <head>, is discarded on mount), see
+  skills/hyperframes-core/references/sub-compositions.md. The root carries no
+  data-width/data-height: it is elastic, sized off whatever box the host clip
+  gives it (position:absolute; inset:0; container-type:size), so the effect
+  reads correctly whether the host mounts it into a 960x540 slot or a full
+  1920x1080 frame. The root is styled by #root, never a class: composited
+  renders scope this file's CSS to [data-composition-id="overwhelm-surround"],
+  and a rule keyed on the root's own class would stop matching the root itself
+  (sub-compositions.md, Pitfall 3). Variables are read via
+  window.__hyperframes.getVariables() (not by parsing this file's own <html>
+  tag at runtime): once mounted, document.documentElement is the HOST's <html>,
+  so the loader's declared-defaults-plus-per-instance-overrides table is the
+  only reliable source once the primitive is running inside a host page.
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "count", "type": "number", "role": "content", "label": "Chip count", "description": "Number of tasks and notifications crowding the center.", "default": 16, "min": 8, "max": 24, "step": 1 },
+    { "id": "centerLabel", "type": "string", "role": "content", "label": "Center label", "description": "Text inside the calm central subject. Blank hides the text.", "default": "You" },
+    { "id": "intensity", "type": "number", "role": "layout", "label": "Intensity", "description": "How tightly and quickly the chips crowd the center.", "default": 1, "min": 0.5, "max": 2, "step": 0.1 }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Overwhelm Surround</title>
+    <!-- Metadata only for whoever opens this file directly: the runtime
+         discards everything outside <template> on mount. The
+         data-composition-variables attribute above stays on <html> (not
+         inside <template>): the loader reads declared variable defaults
+         directly off the fetched document's root element, whether or not
+         the body is template-wrapped. -->
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="overwhelm-surround" data-duration="4.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          /* Root: sized off the HOST box, never a fixed stage. inset:0 fills
+             whatever box the host clip gives it. container-type establishes
+             the cqw/cqh basis for every internal measurement below. Styled by
+             #root, never a class, see the mount-contract note above. */
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            background: var(--bg, #0b1120);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+          }
+
+          .os-clip {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+          }
+
+          .os-crowd {
+            position: absolute;
+            inset: 0;
+            z-index: 2;
+          }
+
+          .os-chip {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            min-width: clamp(7cqw, 9.5cqw, 12cqw);
+            min-height: clamp(5.5cqh, 7cqh, 9cqh);
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            gap: var(--space-1, 1cqw);
+            padding: var(--space-2, 1.4cqh) var(--space-3, 2cqw);
+            border: 0.14cqw solid color-mix(in srgb, var(--border, #334155) 72%, transparent);
+            border-radius: clamp(1.4cqw, 2.4cqw, 3.2cqw);
+            background: color-mix(in srgb, var(--surface, #1e293b) 94%, var(--bg, #0b1120));
+            color: var(--fg, #f8fafc);
+            box-shadow:
+              0 0.8cqh 2.4cqh color-mix(in srgb, var(--bg, #0b1120) 48%, transparent),
+              inset 0 0 0 0.08cqw color-mix(in srgb, var(--fg, #f8fafc) 6%, transparent);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: clamp(1.8cqw, 2.4cqw, 3.2cqw);
+            font-weight: 700;
+            letter-spacing: 0.01em;
+            line-height: 1;
+            white-space: nowrap;
+            transform-origin: 50% 50%;
+            will-change: transform, opacity;
+          }
+
+          .os-chip::before {
+            content: "";
+            width: clamp(1.2cqw, 1.7cqw, 2.2cqw);
+            aspect-ratio: 1;
+            flex: 0 0 auto;
+            border-radius: 50%;
+            background: var(--accent, #38bdf8);
+            box-shadow: 0 0 1.5cqw color-mix(in srgb, var(--accent, #38bdf8) 62%, transparent);
+          }
+
+          .os-chip[data-kind="alert"] {
+            border-color: color-mix(in srgb, var(--brand, #22c55e) 62%, var(--border, #334155));
+          }
+
+          .os-chip[data-kind="alert"]::before {
+            background: var(--brand, #22c55e);
+            box-shadow: 0 0 1.5cqw color-mix(in srgb, var(--brand, #22c55e) 62%, transparent);
+          }
+
+          .os-chip[data-kind="ping"] {
+            border-radius: 50%;
+            min-width: clamp(6cqw, 7.5cqw, 9cqw);
+            min-height: auto;
+            aspect-ratio: 1;
+            padding: var(--space-2, 1.4cqh);
+            color: var(--accent, #38bdf8);
+          }
+
+          .os-chip[data-kind="ping"]::before {
+            display: none;
+          }
+
+          .os-center {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            z-index: 5;
+            width: clamp(13cqw, 16cqw, 20cqw);
+            aspect-ratio: 1.4 / 1;
+            display: grid;
+            place-items: center;
+            border: 0.2cqw solid
+              color-mix(in srgb, var(--accent, #38bdf8) 78%, var(--border, #334155));
+            border-radius: clamp(2.2cqw, 3.4cqw, 4.5cqw);
+            background: var(--surface, #1e293b);
+            color: var(--fg, #f8fafc);
+            box-shadow:
+              0 0 0 0.75cqw color-mix(in srgb, var(--bg, #0b1120) 82%, transparent),
+              0 1.2cqh 3.8cqh color-mix(in srgb, var(--accent, #38bdf8) 22%, transparent);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: clamp(2.5cqw, 3.6cqw, 4.8cqw);
+            font-weight: 760;
+            letter-spacing: -0.02em;
+            line-height: 1;
+            text-align: center;
+            transform: translate(-50%, -50%);
+          }
+
+          .os-center-label:empty {
+            display: none;
+          }
+        </style>
+
+        <div
+          id="overwhelm-surround-clip"
+          class="os-clip clip"
+          data-start="0"
+          data-duration="4.5"
+          data-track-index="0"
+        >
+          <div class="os-crowd" aria-hidden="true"></div>
+          <div class="os-center" data-anchor="overwhelm-surround">
+            <span class="os-center-label"></span>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            // Literal, not read off the DOM: once mounted, the framework's
+            // flattening step strips data-composition-id from the mounted
+            // root (see FLATTENED_INNER_ROOT_STRIP_ATTRS in
+            // packages/core/src/runtime/flattenedRoot.ts), so
+            // root.getAttribute("data-composition-id") would read null post-
+            // mount and silently register the timeline under the key "null"
+            // instead of "overwhelm-surround". Matches the convention in
+            // sub-compositions.md and empty.html: hardcode the id this file is
+            // always mounted under.
+            var compositionId = "overwhelm-surround";
+            var clipEl = root.querySelector(".os-clip");
+            var crowdEl = root.querySelector(".os-crowd");
+            var centerEl = root.querySelector(".os-center");
+            var centerLabelEl = root.querySelector(".os-center-label");
+
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            // INVARIANT: one clamped value owns each visual decision. Empty
+            // centerLabel remains distinct from a missing value.
+            var countValue = Number(vars.count);
+            var count = Math.round(
+              Math.max(8, Math.min(24, Number.isFinite(countValue) ? countValue : 16)),
+            );
+            var centerLabel = vars.centerLabel == null ? "You" : String(vars.centerLabel);
+            var intensityValue = Number(vars.intensity);
+            var intensity = Math.max(
+              0.5,
+              Math.min(2, Number.isFinite(intensityValue) ? intensityValue : 1),
+            );
+
+            centerLabelEl.textContent = centerLabel;
+
+            var labels = [
+              "Inbox",
+              "99+",
+              "Due",
+              "@you",
+              "ASAP",
+              "12",
+              "Review",
+              "!",
+              "Call",
+              "3 pings",
+              "Sync",
+              "Today",
+              "Reply",
+              "8 tabs",
+              "Update",
+              "Now",
+              "Draft",
+              "4 alerts",
+              "Fix",
+              "Follow up",
+              "Queue",
+              "2 min",
+              "Waiting",
+              "+7",
+            ];
+            var chips = [];
+
+            for (var i = 0; i < count; i += 1) {
+              var chip = document.createElement("div");
+              chip.className = "os-chip";
+              chip.dataset.kind = i % 5 === 1 ? "ping" : i % 3 === 0 ? "alert" : "task";
+              chip.textContent = labels[i];
+              crowdEl.appendChild(chip);
+              chips.push(chip);
+            }
+
+            // RETIME RANGE: these constants own global phase pacing. HOLD is
+            // the only elastic phase. IN and OUT scale together only when the
+            // composition duration is shorter than their combined base time.
+            var IN_BASE = 2.2;
+            var OUT_BASE = 0.5;
+            var TRAVEL_BASE = 0.54;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4.5"));
+            var totalBase = IN_BASE + OUT_BASE;
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var OUT_START = IN + HOLD;
+            var travelDuration = Math.min(IN, (TRAVEL_BASE * scale) / Math.sqrt(intensity));
+            var arrivalSpan = Math.max(0, IN - travelDuration);
+            var arrivalPower = 1.7 + intensity * 0.45;
+            var pressure = (intensity - 0.5) / 1.5;
+
+            // Explicit both-endpoints state (gsap.set, never gsap.from()) so a
+            // seek to t=0 is always correct without playing the timeline.
+            gsap.set(centerEl, { xPercent: -50, yPercent: -50, opacity: 1, scale: 1 });
+            gsap.set(clipEl, { opacity: 1 });
+
+            var tl = gsap.timeline({ paused: true });
+
+            chips.forEach(function (chip, index) {
+              // Even angular distribution keeps every count deterministic and
+              // balanced. Index-derived banding creates a compact cluster
+              // without any random state.
+              var angle = -Math.PI / 2 + (Math.PI * 2 * index) / count;
+              var directionX = Math.cos(angle);
+              var directionY = Math.sin(angle);
+              var edgeScale = 0.64 / Math.max(Math.abs(directionX), Math.abs(directionY));
+              var entryX = directionX * edgeScale * 100;
+              var entryY = directionY * edgeScale * 100;
+              var band = ((index * 5) % 7) / 6;
+              var radiusX = 27 + band * 9 - pressure * (12 + band * 6);
+              var radiusY = 25 + band * 10 - pressure * (11 + band * 6);
+              var restX = directionX * radiusX;
+              var restY = directionY * radiusY;
+              var progress = index / (count - 1);
+              var arrivalT = arrivalSpan * (1 - Math.pow(1 - progress, arrivalPower));
+              var restRotation = ((index * 29) % 17) - 8;
+
+              gsap.set(chip, {
+                x: entryX + "cqw",
+                y: entryY + "cqh",
+                xPercent: -50,
+                yPercent: -50,
+                scale: 0.94,
+                opacity: 0,
+                rotation: restRotation * 1.8,
+              });
+
+              tl.to(
+                chip,
+                {
+                  x: restX + "cqw",
+                  y: restY + "cqh",
+                  scale: 1,
+                  opacity: 1,
+                  rotation: restRotation,
+                  duration: travelDuration,
+                  ease: "power2.out",
+                },
+                arrivalT,
+              );
+            });
+
+            // HOLD: the peak-density crowd is deliberately still. The calm
+            // center remains unchanged, making the surrounding pressure easy
+            // to read even at the highest count and intensity.
+
+            tl.to(clipEl, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/overwhelm-surround/registry-item.json b/registry/components/overwhelm-surround/registry-item.json
new file mode 100644
index 0000000000..ebe5a56ed8
--- /dev/null
+++ b/registry/components/overwhelm-surround/registry-item.json
@@ -0,0 +1,51 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "overwhelm-surround",
+  "type": "hyperframes:component",
+  "title": "Overwhelm Surround",
+  "description": "Tasks, tabs, pings, and notification bubbles accelerate inward around a calm central subject, turning overload into visible spatial pressure.",
+  "tags": ["effects", "agitate", "overwhelm", "pressure", "notifications"],
+  "jobs": ["agitate"],
+  "family": "effects",
+  "profile": "holdable",
+  "evidence": "SIM fixture; CORPUS blueprint",
+  "files": [
+    {
+      "path": "overwhelm-surround.html",
+      "target": "compositions/components/overwhelm-surround.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "count",
+      "type": "number",
+      "role": "content",
+      "label": "Chip count",
+      "description": "Number of tasks and notifications crowding the center.",
+      "default": 16,
+      "min": 8,
+      "max": 24,
+      "step": 1
+    },
+    {
+      "id": "centerLabel",
+      "type": "string",
+      "role": "content",
+      "label": "Center label",
+      "description": "Text inside the calm central subject. Blank hides the text.",
+      "default": "You"
+    },
+    {
+      "id": "intensity",
+      "type": "number",
+      "role": "layout",
+      "label": "Intensity",
+      "description": "How tightly and quickly the chips crowd the center.",
+      "default": 1,
+      "min": 0.5,
+      "max": 2,
+      "step": 0.1
+    }
+  ]
+}
diff --git a/registry/components/page-slide/demo.html b/registry/components/page-slide/demo.html
new file mode 100644
index 0000000000..36af213b61
--- /dev/null
+++ b/registry/components/page-slide/demo.html
@@ -0,0 +1,115 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Page Slide - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f5f5f4;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        min-width: 760px;
+        min-height: 480px;
+        padding: 56px;
+        /* ponytail: scale wrapper (not the GSAP target) to fill ~63% of frame */
+        transform: scale(2.2);
+        transform-origin: center center;
+      }
+      .hf-transition-page-slide {
+        position: relative;
+        width: 560px;
+        height: 320px;
+        overflow: hidden;
+        border-radius: 30px;
+        background: #111827;
+        box-shadow: 0 28px 90px rgba(0, 0, 0, 0.22);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-transition-page {
+        position: absolute;
+        inset: 0;
+        display: grid;
+        place-items: center;
+      }
+      .hf-transition-page span {
+        padding: 14px 20px;
+        border-radius: 999px;
+        background: rgba(255, 255, 255, 0.14);
+        color: #ffffff;
+        font-size: 28px;
+        font-weight: 900;
+      }
+      .hf-transition-page.old {
+        background: linear-gradient(135deg, #0f172a, #334155);
+      }
+      .hf-transition-page.new {
+        background: linear-gradient(135deg, #155e75, #10b981);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="page-slide-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-transition-page-slide">
+          <section class="hf-transition-page old"><span>Dashboard</span></section>
+          <section class="hf-transition-page new"><span>Analytics</span></section>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        tl.fromTo(
+          ".hf-transition-page-slide",
+          { opacity: 0, y: 24 },
+          { opacity: 1, y: 0, duration: 0.3, ease: "power2.out" },
+          0.25,
+        );
+        tl.fromTo(
+          ".hf-transition-page.new",
+          { xPercent: 100 },
+          { xPercent: 0, duration: 0.74, ease: "power3.inOut" },
+          0.78,
+        );
+        tl.to(
+          ".hf-transition-page.old",
+          { xPercent: -28, scale: 0.94, duration: 0.74, ease: "power3.inOut" },
+          0.78,
+        );
+        tl.fromTo(
+          ".hf-transition-page.new span",
+          { y: 24, opacity: 0 },
+          { y: 0, opacity: 1, duration: 0.28, ease: "power2.out" },
+          1.24,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["page-slide-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/page-slide/page-slide.html b/registry/components/page-slide/page-slide.html
new file mode 100644
index 0000000000..f7d57e7401
--- /dev/null
+++ b/registry/components/page-slide/page-slide.html
@@ -0,0 +1,120 @@
+<!--
+  Page Slide - transitions.dev-inspired primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Use the timeline
+  integration note at the bottom as the starting point for deterministic GSAP
+  animation.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and either writes a label or writes a custom
+  property the CSS above consumes. The timeline recipe stays untouched: it keeps
+  sliding the incoming page over the outgoing one.
+
+    - label_a (any text, default Dashboard): the outgoing page label.
+    - label_b (any text, default Analytics): the incoming page label.
+    - accent (green | blue | violet, default green): the gradient family painted
+      on the incoming page. The outgoing page stays slate so the two always read
+      apart.
+    - corner (square | soft | round, default round): the corner radius of the
+      frame the pages slide inside.
+
+  On every default the result is identical to the original: Dashboard sliding
+  out, a teal to green Analytics sliding in, inside a 30px rounded frame.
+-->
+
+<div
+  class="hf-transition-page-slide"
+  data-composition-variables='[
+    { "id": "label_a", "type": "string", "role": "content", "label": "Outgoing label", "description": "Label printed on the page that slides out.", "default": "Dashboard" },
+    { "id": "label_b", "type": "string", "role": "content", "label": "Incoming label", "description": "Label printed on the page that slides in.", "default": "Analytics" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Gradient family painted on the incoming page. The outgoing page stays slate.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "corner", "type": "enum", "role": "style", "label": "Corner", "description": "Corner radius of the frame the pages slide inside.", "default": "round", "options": [{ "value": "square", "label": "Square" }, { "value": "soft", "label": "Soft" }, { "value": "round", "label": "Round" }] }
+  ]'
+>
+  <section class="hf-transition-page old"><span>Dashboard</span></section>
+  <section class="hf-transition-page new"><span>Analytics</span></section>
+</div>
+
+<style>
+  .hf-transition-page-slide {
+    position: relative;
+    width: 560px;
+    height: 320px;
+    overflow: hidden;
+    border-radius: var(--hf-page-radius, 30px);
+    background: #111827;
+    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.22);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-transition-page {
+    position: absolute;
+    inset: 0;
+    display: grid;
+    place-items: center;
+  }
+  .hf-transition-page span {
+    padding: 14px 20px;
+    border-radius: 999px;
+    background: rgba(255, 255, 255, 0.14);
+    color: #ffffff;
+    font-size: 28px;
+    font-weight: 900;
+  }
+  .hf-transition-page.old {
+    background: linear-gradient(135deg, #0f172a, #334155);
+  }
+  .hf-transition-page.new {
+    background: linear-gradient(135deg, var(--hf-page-from, #155e75), var(--hf-page-to, #10b981));
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    var accents = {
+      green: { from: "#155e75", to: "#10b981" },
+      blue: { from: "#1e3a8a", to: "#38bdf8" },
+      violet: { from: "#4c1d95", to: "#a78bfa" },
+    };
+    var corners = { square: "0px", soft: "14px", round: "30px" };
+
+    function text(value, fallback) {
+      return typeof value === "string" && value !== "" ? value : fallback;
+    }
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var labelA = text(vars.label_a, "Dashboard");
+    var labelB = text(vars.label_b, "Analytics");
+    var accent = accents[pick(accents, vars.accent, "green")];
+    var corner = corners[pick(corners, vars.corner, "round")];
+
+    var roots = document.querySelectorAll(".hf-transition-page-slide");
+    for (var i = 0; i < roots.length; i += 1) {
+      var root = roots[i];
+      root.style.setProperty("--hf-page-radius", corner);
+      root.style.setProperty("--hf-page-from", accent.from);
+      root.style.setProperty("--hf-page-to", accent.to);
+      var oldLabel = root.querySelector(".hf-transition-page.old span");
+      var newLabel = root.querySelector(".hf-transition-page.new span");
+      if (oldLabel) oldLabel.textContent = labelA;
+      if (newLabel) newLabel.textContent = labelB;
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-transition-page-slide', { opacity: 0, y: 24 }, { opacity: 1, y: 0, duration: 0.3, ease: 'power2.out' }, 0.25);
+  tl.fromTo('.hf-transition-page.new', { xPercent: 100 }, { xPercent: 0, duration: 0.74, ease: 'power3.inOut' }, 0.78);
+  tl.to('.hf-transition-page.old', { xPercent: -28, scale: 0.94, duration: 0.74, ease: 'power3.inOut' }, 0.78);
+  tl.fromTo('.hf-transition-page.new span', { y: 24, opacity: 0 }, { y: 0, opacity: 1, duration: 0.28, ease: 'power2.out' }, 1.24);
+-->
diff --git a/registry/components/page-slide/registry-item.json b/registry/components/page-slide/registry-item.json
new file mode 100644
index 0000000000..d61695f038
--- /dev/null
+++ b/registry/components/page-slide/registry-item.json
@@ -0,0 +1,80 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "page-slide",
+  "type": "hyperframes:component",
+  "title": "Page Slide",
+  "description": "A transitions.dev-inspired page slide primitive with outgoing and incoming panels",
+  "tags": ["video-primitive", "transition-primitive", "transitions-dev-port", "page", "slide"],
+  "files": [
+    {
+      "path": "page-slide.html",
+      "target": "compositions/components/page-slide.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "label_a",
+      "type": "string",
+      "role": "content",
+      "label": "Outgoing label",
+      "description": "Label printed on the page that slides out.",
+      "default": "Dashboard"
+    },
+    {
+      "id": "label_b",
+      "type": "string",
+      "role": "content",
+      "label": "Incoming label",
+      "description": "Label printed on the page that slides in.",
+      "default": "Analytics"
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Gradient family painted on the incoming page. The outgoing page stays slate.",
+      "default": "green",
+      "options": [
+        {
+          "value": "green",
+          "label": "Green"
+        },
+        {
+          "value": "blue",
+          "label": "Blue"
+        },
+        {
+          "value": "violet",
+          "label": "Violet"
+        }
+      ]
+    },
+    {
+      "id": "corner",
+      "type": "enum",
+      "role": "style",
+      "label": "Corner",
+      "description": "Corner radius of the frame the pages slide inside.",
+      "default": "round",
+      "options": [
+        {
+          "value": "square",
+          "label": "Square"
+        },
+        {
+          "value": "soft",
+          "label": "Soft"
+        },
+        {
+          "value": "round",
+          "label": "Round"
+        }
+      ]
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/page-slide.png"
+  }
+}
diff --git a/registry/components/pan-stations/demo.html b/registry/components/pan-stations/demo.html
new file mode 100644
index 0000000000..0cc097bd64
--- /dev/null
+++ b/registry/components/pan-stations/demo.html
@@ -0,0 +1,84 @@
+<!doctype html>
+<!--
+  pan-stations demo. This standalone 1920x1080 host mounts the primitive via
+  data-composition-src in a wide stage so the lateral camera move is legible.
+  Non-default variables prove per-instance content, layout, and timing flow.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Pan Stations - Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #05070d;
+      }
+
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 45%, #14213a 0%, #05070d 72%);
+      }
+
+      .pan-stations-mount {
+        --bg: #0b1120;
+        --fg: #f8fafc;
+        --surface: #17233b;
+        --brand: #34d399;
+        --accent: #60a5fa;
+        --muted: #a5b4cc;
+        --border: #34445f;
+        width: 86%;
+        height: 72%;
+        left: 7%;
+        top: 14%;
+        overflow: hidden;
+        border: 1px solid #34445f;
+        border-radius: 32px;
+        box-shadow: 0 48px 110px rgba(0, 0, 0, 0.48);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="pan-stations-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="pan-stations-mount"
+        class="pan-stations-mount clip"
+        data-composition-id="pan-stations"
+        data-composition-src="./pan-stations.html"
+        data-variable-values='{"stationCount":5,"labels":"Discover,Compose,Polish,Publish,Measure","dwell":0.2}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="1651"
+        data-height="778"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["pan-stations-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/pan-stations/pan-stations.html b/registry/components/pan-stations/pan-stations.html
new file mode 100644
index 0000000000..c36926b518
--- /dev/null
+++ b/registry/components/pan-stations/pan-stations.html
@@ -0,0 +1,364 @@
+<!doctype html>
+<!--
+  pan-stations -- HyperFrames video primitive (camera / holdable / exhibit)
+
+  Concept: the camera pans laterally across a wide row of labeled feature
+  stations, settling on each card before moving to the next. The exhibit
+  reading is primary here. The agitate reading is cross-shelved because the
+  same camera move can scan broken tools instead of polished features.
+
+  Compiled-from evidence: candidates card "pan-stations" plus the ship doc:
+  "one mechanic, two readings: panning across broken tools agitates, panning
+  across features exhibits. Re-filed by the adversary pass precisely because
+  it serves both shelves; the pause cadence is the frozen law." Evidence tags:
+  SIM fixture, CORPUS blueprint (re-filed per adversary; cross-shelved).
+
+  Use when: a sequence of tools, steps, screens, or features should read as
+  one continuous environment that the camera inspects in order.
+
+  Variables (declared in data-composition-variables below):
+    - stationCount (number, default 4, range 3-6): number of cards in the row.
+    - labels (CSV string, default "Capture,Edit,Render,Share"): visible station
+      labels, padded with "Station N" when entries are missing.
+    - dwell (seconds, default 0.6, range 0.2-2): steady hold at each station.
+
+  Envelope (fixed IN/OUT, elastic HOLD only, never gsap.timeScale()):
+    IN_BASE  = 0.45s  the first station settles into view
+    HOLD     = max(0, D - (IN + OUT)); complete dwell and pan segments are
+               scheduled while they fit, then the last reached station holds
+    OUT_BASE = 0.40s  the current station fades out
+    If D < IN_BASE + OUT_BASE, IN and OUT scale down together so HOLD is zero.
+
+  Sync points: none. Station arrivals live in elastic HOLD and are deliberately
+  not declared as sync points. Dwell gaps contain no eased tween.
+
+  Sound cue: none. A host can layer its own station arrival foley if needed.
+
+  Mount contract: this is a mountable sub-composition. The runtime clones only
+  <template> contents, so every real style, node, and script lives inside the
+  template. #root has no data-width or data-height and fills the host box. It
+  is styled by ID because composited CSS scoping can stop a root class selector
+  from matching. Variables come only from getVariables() after mount, because
+  document.documentElement belongs to the host document at that point.
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "stationCount", "type": "number", "role": "layout", "label": "Station count", "description": "Number of feature stations in the row.", "default": 4, "min": 3, "max": 6, "step": 1 },
+    { "id": "labels", "type": "string", "role": "content", "label": "Station labels", "description": "Comma-separated labels shown on the station cards.", "default": "Capture,Edit,Render,Share" },
+    { "id": "dwell", "type": "number", "role": "timing", "label": "Dwell", "description": "Seconds the camera holds at each station before panning.", "default": 0.6, "min": 0.2, "max": 2, "step": 0.1, "unit": "s" }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Pan Stations</title>
+    <!-- Metadata only. Everything outside <template> is discarded on mount. -->
+  </head>
+  <body>
+    <template>
+      <div
+        id="root"
+        data-composition-id="pan-stations"
+        data-start="0"
+        data-duration="4"
+        data-fps="30"
+      >
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            --ease-standard: cubic-bezier(0.215, 0.61, 0.355, 1);
+            --ease-exit: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+            --ease-drift: cubic-bezier(0.445, 0.05, 0.55, 0.95);
+            --ps-station-width: 78cqw;
+            --ps-station-gap: var(--space-4, 6cqw);
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            background: var(--bg, #0b1120);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+          }
+
+          .ps-clip {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            opacity: 0;
+          }
+
+          .ps-rail {
+            position: absolute;
+            left: 0;
+            right: 0;
+            top: 50%;
+            height: 0.18cqh;
+            background: var(--border, #334155);
+            opacity: 0.7;
+          }
+
+          .ps-strip {
+            --ps-pan-index: 0;
+            position: absolute;
+            top: 18cqh;
+            left: 0;
+            display: flex;
+            align-items: stretch;
+            gap: var(--ps-station-gap);
+            width: max-content;
+            padding: 0 11cqw;
+            transform: translateX(
+              calc(var(--ps-pan-index) * -1 * (var(--ps-station-width) + var(--ps-station-gap)))
+            );
+            will-change: transform;
+          }
+
+          .ps-station {
+            position: relative;
+            flex: 0 0 var(--ps-station-width);
+            height: 64cqh;
+            display: grid;
+            grid-template-rows: auto 1fr auto;
+            gap: var(--space-3, 3cqh);
+            padding: var(--space-5, 5cqw);
+            overflow: hidden;
+            border: 0.16cqw solid var(--border, #334155);
+            border-radius: 3.2cqw;
+            background: var(--surface, #1e293b);
+            box-shadow: 0 2.2cqh 6cqw color-mix(in srgb, var(--bg, #0b1120) 72%, transparent);
+          }
+
+          .ps-station::before {
+            content: "";
+            position: absolute;
+            inset: 0;
+            background: radial-gradient(
+              circle at 82% 18%,
+              color-mix(in srgb, var(--brand, #22c55e) 24%, transparent),
+              transparent 42%
+            );
+          }
+
+          .ps-kicker,
+          .ps-label,
+          .ps-screen {
+            position: relative;
+            z-index: 1;
+          }
+
+          .ps-kicker {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            color: var(--muted, #94a3b8);
+            font-size: 1.8cqw;
+            font-weight: 700;
+            letter-spacing: 0.16em;
+            text-transform: uppercase;
+          }
+
+          .ps-index {
+            color: var(--accent, #38bdf8);
+            font-variant-numeric: tabular-nums;
+          }
+
+          .ps-screen {
+            display: grid;
+            grid-template-columns: 0.56fr 1fr;
+            gap: var(--space-3, 3cqw);
+            min-height: 0;
+          }
+
+          .ps-tool,
+          .ps-stack {
+            border: 0.13cqw solid var(--border, #334155);
+            border-radius: 2cqw;
+            background: color-mix(in srgb, var(--bg, #0b1120) 56%, var(--surface, #1e293b));
+          }
+
+          .ps-tool {
+            display: grid;
+            place-items: center;
+          }
+
+          .ps-glyph {
+            width: 8.5cqw;
+            aspect-ratio: 1;
+            display: grid;
+            place-items: center;
+            border-radius: 2.2cqw;
+            background: var(--brand, #22c55e);
+            color: var(--bg, #0b1120);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: 3.2cqw;
+            font-weight: 850;
+          }
+
+          .ps-stack {
+            display: grid;
+            align-content: center;
+            gap: var(--space-2, 1.8cqh);
+            padding: var(--space-3, 3cqw);
+          }
+
+          .ps-line {
+            height: 1.15cqh;
+            border-radius: 50%;
+            background: var(--border, #334155);
+          }
+
+          .ps-line:nth-child(1) {
+            width: 82%;
+            background: var(--accent, #38bdf8);
+          }
+
+          .ps-line:nth-child(2) {
+            width: 100%;
+          }
+
+          .ps-line:nth-child(3) {
+            width: 64%;
+          }
+
+          .ps-label {
+            max-width: 100%;
+            overflow-wrap: anywhere;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: 5.8cqw;
+            font-weight: 760;
+            letter-spacing: -0.045em;
+            line-height: 0.98;
+          }
+        </style>
+
+        <div
+          id="pan-stations-clip"
+          class="ps-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="ps-rail"></div>
+          <div class="ps-strip" aria-label="Feature stations"></div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            // Literal by contract: the mounted root loses data-composition-id.
+            var compositionId = "pan-stations";
+            var clip = root.querySelector(".ps-clip");
+            var strip = root.querySelector(".ps-strip");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            // INVARIANT: stationCount is always an integer in the declared 3-6 range.
+            var rawCount = Number(vars.stationCount);
+            var stationCount = Number.isFinite(rawCount) ? Math.round(rawCount) : 4;
+            stationCount = Math.max(3, Math.min(6, stationCount));
+
+            // INVARIANT: dwell is finite and positive, then clamps to 0.2-2 seconds.
+            var rawDwell = Number(vars.dwell);
+            var dwell = Number.isFinite(rawDwell) ? rawDwell : 0.6;
+            dwell = Math.max(0.2, Math.min(2, dwell));
+
+            var labelsSource =
+              vars.labels == null ? "Capture,Edit,Render,Share" : String(vars.labels);
+            var parsedLabels = labelsSource.split(",").map(function (label) {
+              return label.trim();
+            });
+
+            // Station creation is the only owner of row content and fallback labels.
+            for (var i = 0; i < stationCount; i += 1) {
+              var label = parsedLabels[i] || "Station " + (i + 1);
+
+              var station = document.createElement("article");
+              station.className = "ps-station";
+              station.setAttribute("aria-label", label);
+
+              var kicker = document.createElement("div");
+              kicker.className = "ps-kicker";
+              kicker.innerHTML = '<span>Feature station</span><span class="ps-index"></span>';
+              kicker.querySelector(".ps-index").textContent = String(i + 1).padStart(2, "0");
+
+              var screen = document.createElement("div");
+              screen.className = "ps-screen";
+              screen.innerHTML =
+                '<div class="ps-tool"><span class="ps-glyph"></span></div>' +
+                '<div class="ps-stack"><span class="ps-line"></span><span class="ps-line"></span><span class="ps-line"></span></div>';
+              screen.querySelector(".ps-glyph").textContent = label.charAt(0).toUpperCase();
+
+              var title = document.createElement("div");
+              title.className = "ps-label";
+              title.textContent = label;
+
+              station.appendChild(kicker);
+              station.appendChild(screen);
+              station.appendChild(title);
+              strip.appendChild(station);
+            }
+
+            var stations = Array.from(strip.querySelectorAll(".ps-station"));
+
+            // RETIME RANGE: fixed IN/OUT, elastic HOLD, no global time scaling.
+            var IN_BASE = 0.45;
+            var OUT_BASE = 0.4;
+            var PAN_DURATION = 0.25;
+            var durationValue = parseFloat(root.dataset.duration || "4");
+            var duration = Number.isFinite(durationValue) ? Math.max(0.001, durationValue) : 4;
+            var totalBase = IN_BASE + OUT_BASE;
+            var envelopeScale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * envelopeScale;
+            var OUT = OUT_BASE * envelopeScale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var HOLD_START = IN;
+            var OUT_START = IN + HOLD;
+
+            // Explicit t=0 state for every animated endpoint.
+            gsap.set(clip, { opacity: 0 });
+            gsap.set(strip, { "--ps-pan-index": 0 });
+
+            var tl = gsap.timeline({ paused: true });
+            tl.to(clip, { opacity: 1, duration: IN, ease: "power2.out" }, 0);
+
+            // HOLD: empty time is the steady dwell. Only complete pans are added.
+            var cursor = HOLD_START;
+            for (var stationIndex = 0; stationIndex < stations.length - 1; stationIndex += 1) {
+              cursor += dwell;
+              if (cursor + PAN_DURATION > OUT_START) break;
+              tl.to(
+                strip,
+                {
+                  "--ps-pan-index": stationIndex + 1,
+                  duration: PAN_DURATION,
+                  ease: "sine.inOut",
+                },
+                cursor,
+              );
+              cursor += PAN_DURATION;
+            }
+
+            tl.to(clip, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/pan-stations/pan-stations.test.mjs b/registry/components/pan-stations/pan-stations.test.mjs
new file mode 100644
index 0000000000..99fce30fd1
--- /dev/null
+++ b/registry/components/pan-stations/pan-stations.test.mjs
@@ -0,0 +1,43 @@
+import assert from "node:assert/strict";
+import { readFile } from "node:fs/promises";
+import test from "node:test";
+
+const source = await readFile(new URL("./pan-stations.html", import.meta.url), "utf8");
+
+test("each indexed pan stop stays centered after the mount resizes", () => {
+  assert.match(source, /--ps-pan-index:\s*0/);
+  assert.match(
+    source,
+    /transform:\s*translateX\(\s*calc\(\s*var\(--ps-pan-index\)\s*\*\s*-1\s*\*\s*\(var\(--ps-station-width\)\s*\+\s*var\(--ps-station-gap\)\)\s*\)\s*\)/,
+  );
+  assert.match(source, /"--ps-pan-index":\s*stationIndex\s*\+\s*1/);
+  assert.doesNotMatch(source, /getBoundingClientRect\(\)/);
+
+  const stationWidthMatch = source.match(/--ps-station-width:\s*([\d.]+)cqw/);
+  const stationGapMatch = source.match(/--ps-station-gap:[^;]*,\s*([\d.]+)cqw\)/);
+  const stripPaddingMatch = source.match(/padding:\s*0\s+([\d.]+)cqw/);
+  const stationCountRangeMatch = source.match(
+    /"id":\s*"stationCount"[^}]*"min":\s*(\d+)[^}]*"max":\s*(\d+)/,
+  );
+  assert.ok(stationWidthMatch && stationGapMatch && stripPaddingMatch && stationCountRangeMatch);
+
+  const stationWidth = Number(stationWidthMatch[1]) / 100;
+  const stationGap = Number(stationGapMatch[1]) / 100;
+  const stripPadding = Number(stripPaddingMatch[1]) / 100;
+  const minStationCount = Number(stationCountRangeMatch[1]);
+  const maxStationCount = Number(stationCountRangeMatch[2]);
+
+  for (const viewportWidth of [640, 1651, 1920]) {
+    for (let stationCount = minStationCount; stationCount <= maxStationCount; stationCount += 1) {
+      for (let stationIndex = 0; stationIndex < stationCount; stationIndex += 1) {
+        const stationCenter =
+          viewportWidth * stripPadding +
+          stationIndex * viewportWidth * (stationWidth + stationGap) +
+          viewportWidth * stationWidth * 0.5 -
+          stationIndex * viewportWidth * (stationWidth + stationGap);
+
+        assert.ok(Math.abs(stationCenter - viewportWidth / 2) < 1e-9);
+      }
+    }
+  }
+});
diff --git a/registry/components/pan-stations/registry-item.json b/registry/components/pan-stations/registry-item.json
new file mode 100644
index 0000000000..dbd4d5d57f
--- /dev/null
+++ b/registry/components/pan-stations/registry-item.json
@@ -0,0 +1,52 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "pan-stations",
+  "type": "hyperframes:component",
+  "title": "Pan Stations",
+  "description": "A lateral camera move across a continuous row of labeled feature stations, with a steady dwell at each stop before the next pan.",
+  "tags": ["camera", "pan", "stations", "features", "exhibit", "agitate", "cross-shelved"],
+  "jobs": ["exhibit", "agitate"],
+  "family": "camera",
+  "profile": "holdable",
+  "evidence": "SIM fixture, CORPUS blueprint (re-filed per adversary; cross-shelved): one mechanic, two readings: panning across broken tools agitates, panning across features exhibits. The pause cadence is the frozen law.",
+  "files": [
+    {
+      "path": "pan-stations.html",
+      "target": "compositions/components/pan-stations.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "stationCount",
+      "type": "number",
+      "role": "layout",
+      "label": "Station count",
+      "description": "Number of feature stations in the row.",
+      "default": 4,
+      "min": 3,
+      "max": 6,
+      "step": 1
+    },
+    {
+      "id": "labels",
+      "type": "string",
+      "role": "content",
+      "label": "Station labels",
+      "description": "Comma-separated labels shown on the station cards.",
+      "default": "Capture,Edit,Render,Share"
+    },
+    {
+      "id": "dwell",
+      "type": "number",
+      "role": "timing",
+      "label": "Dwell",
+      "description": "Seconds the camera holds at each station before panning.",
+      "default": 0.6,
+      "min": 0.2,
+      "max": 2,
+      "step": 0.1,
+      "unit": "s"
+    }
+  ]
+}
diff --git a/registry/components/panel-reveal/demo.html b/registry/components/panel-reveal/demo.html
new file mode 100644
index 0000000000..f9523736d2
--- /dev/null
+++ b/registry/components/panel-reveal/demo.html
@@ -0,0 +1,100 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Panel Reveal - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        min-width: 760px;
+        min-height: 480px;
+        padding: 56px;
+        /* ponytail: scale wrapper — GSAP targets .hf-transition-panel-reveal, not this element */
+        transform: scale(2.6);
+        transform-origin: center center;
+      }
+      .hf-transition-panel-reveal {
+        --hf-panel-open: 1;
+        width: 380px;
+        overflow: hidden;
+        border: 1px solid #e4e4e7;
+        border-radius: 14px;
+        background: #fff;
+        color: #18181b;
+        font-family: Inter, system-ui, sans-serif;
+        box-shadow: 0 24px 70px rgba(24, 24, 27, 0.1);
+      }
+      .hf-transition-panel-reveal header {
+        padding: 18px 20px 14px;
+        font-size: 16px;
+        font-weight: 600;
+        letter-spacing: -0.01em;
+      }
+      .hf-transition-panel-reveal div {
+        max-height: calc(var(--hf-panel-open) * 120px);
+        opacity: var(--hf-panel-open);
+        padding: 0 20px calc(var(--hf-panel-open) * 20px);
+        overflow: hidden;
+      }
+      .hf-transition-panel-reveal p {
+        margin: 0 0 8px;
+        color: #71717a;
+        font-size: 15px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="panel-reveal-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <section class="hf-transition-panel-reveal">
+          <header>Motion tokens</header>
+          <div>
+            <p>Duration 420ms</p>
+            <p>Easing power3.out</p>
+          </div>
+        </section>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-transition-panel-reveal",
+          { "--hf-panel-open": 0 },
+          { "--hf-panel-open": 1, duration: 0.44, ease: "power3.inOut" },
+          startTime,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["panel-reveal-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/panel-reveal/panel-reveal.html b/registry/components/panel-reveal/panel-reveal.html
new file mode 100644
index 0000000000..772f1d7e95
--- /dev/null
+++ b/registry/components/panel-reveal/panel-reveal.html
@@ -0,0 +1,133 @@
+<!--
+  Panel Reveal - transitions.dev-inspired primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Use the timeline
+  integration note at the bottom as the starting point for deterministic GSAP
+  animation.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result as a custom property
+  the CSS below consumes. The timeline recipe at the end is untouched by them:
+  it keeps driving the single open value from 0 to 1.
+
+    - title (string, default "Motion tokens"): the header line above the fold.
+    - width (narrow | standard | wide, default standard): how wide the panel
+      sits, 280, 360 or 480 px.
+    - tone (paper | ink, default paper): the surface family. paper is the
+      white card on a light frame, ink is the same card inverted for dark
+      frames, border and body copy included.
+    - reveal (fade | solid, default fade): whether the body fades in with the
+      height. fade is the shipped motion, solid keeps the body at full opacity
+      so only the height opens. Both look the same once the panel is open.
+
+  On every default the result is identical to the original: a 360px white card
+  whose body fades in as it grows.
+-->
+
+<section
+  class="hf-transition-panel-reveal"
+  data-composition-variables='[
+    { "id": "title", "type": "string", "role": "content", "label": "Title", "description": "The header line that sits above the folded body.", "default": "Motion tokens" },
+    { "id": "width", "type": "enum", "role": "layout", "label": "Width", "description": "How wide the panel sits, 280, 360 or 480 px.", "default": "standard", "options": [{ "value": "narrow", "label": "Narrow" }, { "value": "standard", "label": "Standard" }, { "value": "wide", "label": "Wide" }] },
+    { "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Surface family: paper is the white card for light frames, ink inverts it for dark frames.", "default": "paper", "options": [{ "value": "paper", "label": "Paper" }, { "value": "ink", "label": "Ink" }] },
+    { "id": "reveal", "type": "enum", "role": "motion", "label": "Reveal", "description": "Whether the body fades in with the height. fade is the shipped motion, solid opens the height only.", "default": "fade", "options": [{ "value": "fade", "label": "Fade" }, { "value": "solid", "label": "Solid" }] }
+  ]'
+>
+  <header>Motion tokens</header>
+  <div>
+    <p>Duration 420ms</p>
+    <p>Easing power3.out</p>
+  </div>
+</section>
+
+<style>
+  .hf-transition-panel-reveal {
+    --hf-panel-open: 1;
+    width: var(--hf-panel-width, 360px);
+    overflow: hidden;
+    border: 1px solid var(--hf-panel-border, #e4e4e7);
+    border-radius: 14px;
+    background: var(--hf-panel-surface, #fff);
+    color: var(--hf-panel-text, #18181b);
+    font-family: Inter, system-ui, sans-serif;
+    box-shadow: 0 20px 56px rgba(24, 24, 27, 0.1);
+  }
+  .hf-transition-panel-reveal header {
+    padding: 15px 17px;
+    font-weight: 900;
+  }
+  .hf-transition-panel-reveal div {
+    max-height: calc(var(--hf-panel-open) * 120px);
+    opacity: calc(1 - var(--hf-panel-fade, 1) * (1 - var(--hf-panel-open)));
+    padding: 0 17px calc(var(--hf-panel-open) * 17px);
+    overflow: hidden;
+  }
+  .hf-transition-panel-reveal p {
+    margin: 0 0 8px;
+    color: var(--hf-panel-muted, #71717a);
+    font-size: 14px;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    var widths = { narrow: "280px", standard: "360px", wide: "480px" };
+    var tones = {
+      paper: {
+        surface: "#fff",
+        border: "#e4e4e7",
+        text: "#18181b",
+        muted: "#71717a",
+      },
+      ink: {
+        surface: "#18181b",
+        border: "#3f3f46",
+        text: "#fafafa",
+        muted: "#a1a1aa",
+      },
+    };
+    var reveals = { fade: 1, solid: 0 };
+
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var width = widths[pick(widths, vars.width, "standard")];
+    var tone = tones[pick(tones, vars.tone, "paper")];
+    var fade = reveals[pick(reveals, vars.reveal, "fade")];
+
+    var title = typeof vars.title === "string" ? vars.title.trim() : "";
+    if (!title) {
+      title = "Motion tokens";
+    }
+
+    var roots = document.querySelectorAll(".hf-transition-panel-reveal");
+    for (var i = 0; i < roots.length; i += 1) {
+      var root = roots[i];
+      root.style.setProperty("--hf-panel-width", width);
+      root.style.setProperty("--hf-panel-surface", tone.surface);
+      root.style.setProperty("--hf-panel-border", tone.border);
+      root.style.setProperty("--hf-panel-text", tone.text);
+      root.style.setProperty("--hf-panel-muted", tone.muted);
+      root.style.setProperty("--hf-panel-fade", String(fade));
+
+      var header = root.querySelector("header");
+      if (header) {
+        header.textContent = title;
+      }
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-transition-panel-reveal', { '--hf-panel-open': 0 }, { '--hf-panel-open': 1, duration: 0.44, ease: 'power3.inOut' }, startTime);
+-->
diff --git a/registry/components/panel-reveal/registry-item.json b/registry/components/panel-reveal/registry-item.json
new file mode 100644
index 0000000000..79eb5e3a02
--- /dev/null
+++ b/registry/components/panel-reveal/registry-item.json
@@ -0,0 +1,65 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "panel-reveal",
+  "type": "hyperframes:component",
+  "title": "Panel Reveal",
+  "description": "A panel reveal primitive with height expansion and content fade",
+  "tags": ["transition-primitive", "transitions-dev-port", "panel", "reveal"],
+  "files": [
+    {
+      "path": "panel-reveal.html",
+      "target": "compositions/components/panel-reveal.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "title",
+      "type": "string",
+      "role": "content",
+      "label": "Title",
+      "description": "The header line that sits above the folded body.",
+      "default": "Motion tokens"
+    },
+    {
+      "id": "width",
+      "type": "enum",
+      "role": "layout",
+      "label": "Width",
+      "description": "How wide the panel sits, 280, 360 or 480 px.",
+      "default": "standard",
+      "options": [
+        { "value": "narrow", "label": "Narrow" },
+        { "value": "standard", "label": "Standard" },
+        { "value": "wide", "label": "Wide" }
+      ]
+    },
+    {
+      "id": "tone",
+      "type": "enum",
+      "role": "style",
+      "label": "Tone",
+      "description": "Surface family: paper is the white card for light frames, ink inverts it for dark frames.",
+      "default": "paper",
+      "options": [
+        { "value": "paper", "label": "Paper" },
+        { "value": "ink", "label": "Ink" }
+      ]
+    },
+    {
+      "id": "reveal",
+      "type": "enum",
+      "role": "motion",
+      "label": "Reveal",
+      "description": "Whether the body fades in with the height. fade is the shipped motion, solid opens the height only.",
+      "default": "fade",
+      "options": [
+        { "value": "fade", "label": "Fade" },
+        { "value": "solid", "label": "Solid" }
+      ]
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/panel-reveal.png"
+  }
+}
diff --git a/registry/components/parallax-device-dive/demo.html b/registry/components/parallax-device-dive/demo.html
new file mode 100644
index 0000000000..5cb243d0a9
--- /dev/null
+++ b/registry/components/parallax-device-dive/demo.html
@@ -0,0 +1,79 @@
+<!doctype html>
+<!--
+  parallax-device-dive demo. This standalone composition mounts the primitive
+  through data-composition-src. Non-default values prove that both variables
+  flow through the mount while the primitive remains sized by its host box.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Parallax Device Dive Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0b0c0e;
+      }
+
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 44%, #202033 0%, #0b0c0e 68%);
+      }
+
+      .mount-card {
+        position: absolute;
+        left: 12%;
+        top: 10%;
+        width: 76%;
+        height: 80%;
+        overflow: hidden;
+        border: 1px solid rgba(255, 255, 255, 0.14);
+        border-radius: 28px;
+        background: #0b0c0e;
+        box-shadow: 0 48px 120px rgba(0, 0, 0, 0.52);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="parallax-device-dive-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4.5"
+      data-fps="30"
+    >
+      <div
+        id="parallax-device-dive-mount"
+        class="mount-card clip"
+        data-composition-id="parallax-device-dive"
+        data-composition-src="./parallax-device-dive.html"
+        data-variable-values='{"accent":"violet","app_title":"Launch Control"}'
+        data-start="0"
+        data-duration="4.5"
+        data-track-index="0"
+        data-width="1459"
+        data-height="864"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["parallax-device-dive-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/parallax-device-dive/parallax-device-dive.html b/registry/components/parallax-device-dive/parallax-device-dive.html
new file mode 100644
index 0000000000..05a924e2b6
--- /dev/null
+++ b/registry/components/parallax-device-dive/parallax-device-dive.html
@@ -0,0 +1,451 @@
+<!doctype html>
+<!--
+  parallax-device-dive: HyperFrames video primitive (camera / device / transition)
+
+  Concept: a canonical phone rises into view, then the camera pushes through
+  its screen. The app header, hero card, and supporting cards separate at
+  different apparent depths during the push, then settle into one coherent UI
+  that fills the frame.
+
+  Variables:
+    - accent (green | blue | violet, default "blue"): app highlight color.
+    - app_title (string, default "Dashboard"): title in the app header.
+
+  Envelope (fixed IN/OUT, elastic HOLD only, never gsap.timeScale()):
+    IN_BASE  = 1.05s  phone rises and settles on stage
+    HOLD     = elastic subtle device drift before the camera move
+    OUT_BASE = 1.65s  camera dives through the screen and the UI becomes stage
+    If D is shorter than IN_BASE + OUT_BASE, IN and OUT compress together and
+    HOLD becomes zero. OUT is a camera exit from the hardware, not a fade.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, carries no data-width or
+  data-height, and registers one paused timeline under the hardcoded
+  parallax-device-dive id.
+-->
+<html
+  lang="en"
+  data-composition-id="parallax-device-dive"
+  data-composition-duration="4.5"
+  data-composition-variables='[
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Highlight color used throughout the app UI.", "default": "blue", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "app_title", "type": "string", "role": "content", "label": "App title", "description": "Title displayed in the app header.", "default": "Dashboard" }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Parallax Device Dive</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="parallax-device-dive" data-duration="4.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            background: #0b0c0e;
+            color: #f8fafc;
+            font-family: Inter, system-ui, sans-serif;
+          }
+
+          .pdd-clip,
+          .pdd-camera {
+            position: absolute;
+            inset: 0;
+          }
+
+          .pdd-clip {
+            overflow: hidden;
+            background:
+              radial-gradient(
+                circle at 50% 48%,
+                color-mix(in srgb, var(--pdd-accent) 17%, transparent),
+                transparent 34%
+              ),
+              #0b0c0e;
+          }
+
+          .pdd-camera {
+            display: grid;
+            place-items: center;
+            perspective: 125cqw;
+          }
+
+          .pdd-phone {
+            position: relative;
+            height: 82cqh;
+            aspect-ratio: 9 / 19.5;
+            padding: 0.72cqh;
+            border: 0.08cqw solid rgba(255, 255, 255, 0.28);
+            border-radius: 4.4cqh;
+            background: linear-gradient(145deg, #3c4049, #17191e 44%, #08090c);
+            box-shadow:
+              0 4.8cqh 10cqh rgba(0, 0, 0, 0.5),
+              0 1.4cqh 3cqh rgba(0, 0, 0, 0.4),
+              inset 0 0.12cqh 0 rgba(255, 255, 255, 0.3),
+              inset 0 0 0 0.08cqw rgba(0, 0, 0, 0.72);
+            transform-origin: 50% 50%;
+            will-change: transform, opacity;
+          }
+
+          .pdd-screen {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            border-radius: 3.72cqh;
+            background: #f4f6fb;
+            box-shadow: inset 0 0 0 0.08cqw rgba(15, 23, 42, 0.28);
+            color: #111827;
+            isolation: isolate;
+          }
+
+          .pdd-app-glow {
+            position: absolute;
+            inset: 0;
+            background:
+              radial-gradient(
+                circle at 76% 8%,
+                color-mix(in srgb, var(--pdd-accent) 28%, transparent),
+                transparent 31%
+              ),
+              linear-gradient(180deg, #ffffff, #eef2f8);
+          }
+
+          .pdd-cutout {
+            position: absolute;
+            z-index: 10;
+            top: 1.2cqh;
+            left: 50%;
+            width: 7.2cqh;
+            height: 2.1cqh;
+            border-radius: 1.2cqh;
+            background: #050607;
+            transform: translateX(-50%);
+          }
+
+          .pdd-ui {
+            position: absolute;
+            inset: 0;
+            padding: 6.2cqh 2.1cqh 2.2cqh;
+            display: flex;
+            flex-direction: column;
+            gap: 1.55cqh;
+          }
+
+          .pdd-header,
+          .pdd-hero,
+          .pdd-stats {
+            position: relative;
+            z-index: 2;
+            transform-origin: 50% 50%;
+            will-change: transform;
+          }
+
+          .pdd-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+          }
+
+          .pdd-heading {
+            min-width: 0;
+          }
+
+          .pdd-kicker {
+            color: #788397;
+            font-size: 0.75cqw;
+            font-weight: 700;
+            letter-spacing: 0.12em;
+            line-height: 1;
+            text-transform: uppercase;
+          }
+
+          .pdd-title {
+            max-width: 13cqw;
+            overflow: hidden;
+            color: #111827;
+            font-size: 1.5cqw;
+            font-weight: 780;
+            letter-spacing: -0.04em;
+            line-height: 1.12;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          .pdd-avatar {
+            flex: 0 0 auto;
+            width: 3.7cqh;
+            aspect-ratio: 1;
+            display: grid;
+            place-items: center;
+            border-radius: 50%;
+            background: var(--pdd-accent);
+            color: #ffffff;
+            font-size: 0.72cqw;
+            font-weight: 800;
+            box-shadow: 0 0.55cqh 1.4cqh color-mix(in srgb, var(--pdd-accent) 32%, transparent);
+          }
+
+          .pdd-hero {
+            min-height: 24cqh;
+            padding: 2.1cqh;
+            overflow: hidden;
+            border: 0.08cqw solid rgba(255, 255, 255, 0.12);
+            border-radius: 2.1cqh;
+            background: #101722;
+            box-shadow: 0 1.7cqh 3.8cqh rgba(15, 23, 42, 0.2);
+          }
+
+          .pdd-hero-label {
+            color: #a9b4c7;
+            font-size: 0.72cqw;
+            font-weight: 650;
+          }
+
+          .pdd-value {
+            margin-top: 0.45cqh;
+            color: #ffffff;
+            font-size: 2.15cqw;
+            font-weight: 790;
+            letter-spacing: -0.055em;
+            line-height: 1;
+          }
+
+          .pdd-value span {
+            color: var(--pdd-accent);
+            font-size: 0.76cqw;
+            letter-spacing: 0;
+          }
+
+          .pdd-chart {
+            position: absolute;
+            left: 2.1cqh;
+            right: 2.1cqh;
+            bottom: 2.2cqh;
+            height: 8.2cqh;
+            display: flex;
+            align-items: end;
+            gap: 0.55cqh;
+          }
+
+          .pdd-bar {
+            flex: 1 1 0;
+            min-width: 0;
+            border-radius: 0.55cqh 0.55cqh 0.18cqh 0.18cqh;
+            background: color-mix(in srgb, var(--pdd-accent) 38%, #263244);
+          }
+
+          .pdd-bar:nth-child(1) {
+            height: 38%;
+          }
+
+          .pdd-bar:nth-child(2) {
+            height: 54%;
+          }
+
+          .pdd-bar:nth-child(3) {
+            height: 46%;
+          }
+
+          .pdd-bar:nth-child(4) {
+            height: 72%;
+          }
+
+          .pdd-bar:nth-child(5) {
+            height: 64%;
+          }
+
+          .pdd-bar:nth-child(6) {
+            height: 92%;
+            background: var(--pdd-accent);
+            box-shadow: 0 0.55cqh 1.5cqh color-mix(in srgb, var(--pdd-accent) 30%, transparent);
+          }
+
+          .pdd-stats {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 1.15cqh;
+          }
+
+          .pdd-stat {
+            min-height: 11.5cqh;
+            padding: 1.55cqh;
+            border: 0.08cqw solid rgba(55, 65, 81, 0.08);
+            border-radius: 1.7cqh;
+            background: rgba(255, 255, 255, 0.94);
+            box-shadow: 0 1.1cqh 2.6cqh rgba(71, 85, 105, 0.12);
+          }
+
+          .pdd-stat-label {
+            color: #7b8799;
+            font-size: 0.65cqw;
+            font-weight: 650;
+          }
+
+          .pdd-stat-value {
+            margin-top: 1cqh;
+            color: #18202d;
+            font-size: 1.25cqw;
+            font-weight: 780;
+            letter-spacing: -0.035em;
+          }
+
+          .pdd-stat-value span {
+            color: var(--pdd-accent);
+          }
+        </style>
+
+        <div
+          id="parallax-device-dive-clip"
+          class="pdd-clip clip"
+          data-start="0"
+          data-duration="4.5"
+          data-track-index="0"
+        >
+          <div class="pdd-camera">
+            <div class="pdd-phone">
+              <div class="pdd-screen">
+                <div class="pdd-app-glow"></div>
+                <div class="pdd-ui">
+                  <div class="pdd-header">
+                    <div class="pdd-heading">
+                      <div class="pdd-kicker">Overview</div>
+                      <div class="pdd-title"></div>
+                    </div>
+                    <div class="pdd-avatar">HF</div>
+                  </div>
+
+                  <div class="pdd-hero">
+                    <div class="pdd-hero-label">Weekly activity</div>
+                    <div class="pdd-value">24.8k <span>+18%</span></div>
+                    <div class="pdd-chart" aria-hidden="true">
+                      <span class="pdd-bar"></span>
+                      <span class="pdd-bar"></span>
+                      <span class="pdd-bar"></span>
+                      <span class="pdd-bar"></span>
+                      <span class="pdd-bar"></span>
+                      <span class="pdd-bar"></span>
+                    </div>
+                  </div>
+
+                  <div class="pdd-stats">
+                    <div class="pdd-stat">
+                      <div class="pdd-stat-label">Conversion</div>
+                      <div class="pdd-stat-value"><span>8.4%</span></div>
+                    </div>
+                    <div class="pdd-stat">
+                      <div class="pdd-stat-label">Active users</div>
+                      <div class="pdd-stat-value">12,604</div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="pdd-cutout" aria-hidden="true"></div>
+            </div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var phone = root.querySelector(".pdd-phone");
+            var cutout = root.querySelector(".pdd-cutout");
+            var header = root.querySelector(".pdd-header");
+            var hero = root.querySelector(".pdd-hero");
+            var stats = root.querySelector(".pdd-stats");
+            var title = root.querySelector(".pdd-title");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var accent = vars.accent;
+            var accentColors = {
+              green: "var(--brand, #a1a1aa)",
+              blue: "var(--accent, #a1a1aa)",
+              violet: "var(--accent-2, #a1a1aa)",
+            };
+            var accentColor = accentColors[accent] || accentColors.blue;
+            var appTitle = vars.app_title == null ? "Dashboard" : String(vars.app_title);
+
+            root.style.setProperty("--pdd-accent", accentColor);
+            title.textContent = appTitle;
+
+            var IN_BASE = 1.05;
+            var OUT_BASE = 1.65;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4.5"));
+            var totalBase = IN_BASE + OUT_BASE;
+            var envelopeScale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * envelopeScale;
+            var OUT = OUT_BASE * envelopeScale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var HOLD_START = IN;
+            var OUT_START = IN + HOLD;
+            var RISE = IN * 0.78;
+            var SETTLE = IN - RISE;
+            var DIVE = OUT * 0.72;
+            var DEPTH_SETTLE = OUT - DIVE;
+
+            var tl = gsap.timeline({ paused: true });
+
+            tl.fromTo(
+              phone,
+              { opacity: 0, y: "18cqh", scale: 0.86 },
+              { opacity: 1, y: "-1cqh", scale: 1.02, duration: RISE, ease: "power3.out" },
+              0,
+            );
+            tl.to(phone, { y: 0, scale: 1, duration: SETTLE, ease: "power2.out" }, RISE);
+
+            if (HOLD > 0) {
+              tl.to(phone, { y: "-0.55cqh", duration: HOLD * 0.5, ease: "sine.inOut" }, HOLD_START);
+              tl.to(
+                phone,
+                { y: 0, duration: HOLD * 0.5, ease: "sine.inOut" },
+                HOLD_START + HOLD * 0.5,
+              );
+            }
+
+            tl.to(phone, { scale: 6.4, y: "2.4cqh", duration: OUT, ease: "power4.in" }, OUT_START);
+            tl.to(cutout, { opacity: 0, duration: DIVE * 0.45, ease: "power2.out" }, OUT_START);
+            tl.to(
+              header,
+              { y: "-1.2cqh", scale: 1.035, duration: DIVE, ease: "power4.in" },
+              OUT_START,
+            );
+            tl.to(
+              hero,
+              { y: "-2.1cqh", scale: 1.09, duration: DIVE, ease: "power4.in" },
+              OUT_START,
+            );
+            tl.to(
+              stats,
+              { y: "2.4cqh", scale: 1.16, duration: DIVE, ease: "power4.in" },
+              OUT_START,
+            );
+            tl.to(
+              [header, hero, stats],
+              { y: 0, scale: 1, duration: DEPTH_SETTLE, ease: "power4.out" },
+              OUT_START + DIVE,
+            );
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["parallax-device-dive"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/parallax-device-dive/registry-item.json b/registry/components/parallax-device-dive/registry-item.json
new file mode 100644
index 0000000000..b496cf9fab
--- /dev/null
+++ b/registry/components/parallax-device-dive/registry-item.json
@@ -0,0 +1,42 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "parallax-device-dive",
+  "type": "hyperframes:component",
+  "title": "Parallax Device Dive",
+  "description": "A canonical phone rises into view before the camera pushes through its screen and layered app UI expands to fill the frame.",
+  "tags": ["motion-primitive", "camera", "device", "phone", "parallax", "transition"],
+  "jobs": ["transition"],
+  "family": "camera",
+  "profile": "dive",
+  "evidence": "Video Primitives Wave F unit U8",
+  "files": [
+    {
+      "path": "parallax-device-dive.html",
+      "target": "compositions/components/parallax-device-dive.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Highlight color used throughout the app UI.",
+      "default": "blue",
+      "options": [
+        { "value": "green", "label": "Green" },
+        { "value": "blue", "label": "Blue" },
+        { "value": "violet", "label": "Violet" }
+      ]
+    },
+    {
+      "id": "app_title",
+      "type": "string",
+      "role": "content",
+      "label": "App title",
+      "description": "Title displayed in the app header.",
+      "default": "Dashboard"
+    }
+  ]
+}
diff --git a/registry/components/particle-image-reveal/README.md b/registry/components/particle-image-reveal/README.md
new file mode 100644
index 0000000000..5698c5d9df
--- /dev/null
+++ b/registry/components/particle-image-reveal/README.md
@@ -0,0 +1,51 @@
+# particle-image-reveal
+
+A seeded deterministic particle field materializes a supplied image: accent particles converge and settle across the frame while the image reveals beneath them (left-to-right wipe or center iris, matching the particle sweep), the trail thinning until the last particle lands and the image holds clean.
+
+4s authored, elastic HOLD, exit `none` by default.
+
+## Variables
+
+| id          | type | default | notes                                                                                                                   |
+| ----------- | ---- | ------- | ----------------------------------------------------------------------------------------------------------------------- |
+| `density`   | enum | `med`   | Particle count: `low` (320), `med` (640), `high` (1100).                                                                |
+| `direction` | enum | `ltr`   | `ltr` sweeps the reveal left to right; `center` opens an iris from the middle outward with particles converging inward. |
+| `accent`    | enum | `green` | Particle and monogram color: green rides `--brand`, blue rides `--accent`, violet rides `--accent-2`.                   |
+| `exit`      | enum | `none`  | `none` holds until the cut; `fade` departs opacity-only; `up` rises out.                                                |
+
+## Image slot
+
+The image is a slot. Place an inert template anywhere in the HOST page (templates never render, and the runtime wipes the host clip's own children on mount, so the slot lives at document level):
+
+```html
+<template data-slot="particle-image-reveal-image">
+  <img src="./assets/hero.png" alt="" />
+</template>
+```
+
+Slot content may be an `<img>`, a muted `<video>`, or arbitrary HTML; direct img/video children are stretched to cover the stage. With no slot, the primitive renders a token monogram (surface tile, one display glyph, contract tokens only).
+
+Particle targets are distributed across the whole stage, not sampled from the image's pixels; the synced wipe/iris is what binds field and image.
+
+## Mount
+
+```html
+<div
+  class="clip"
+  data-composition-id="particle-image-reveal"
+  data-composition-src="./particle-image-reveal.html"
+  data-variable-values='{"direction":"center","accent":"violet","density":"high"}'
+  data-start="0"
+  data-duration="4"
+  data-track-index="0"
+></div>
+```
+
+Elastic root: no `data-width`/`data-height`; it fills whatever box the host clip gives it. Timeline registers under the literal `particle-image-reveal` key.
+
+## Notes
+
+- Deterministic canvas: one per-particle attribute table is built once from fixed LCG seed `0x50a71c1e`; every painted frame is a pure function of (table, timeline time). The timeline's `onUpdate` clears and repaints from scratch, so eventful seeks (`suppressEvents=false`, the engine's render path) land byte-identical frames in any order and either direction.
+- By the end of IN every particle's alpha is exactly zero: the HOLD canvas is a single clear rect, so the hold is truly still.
+- The canvas raster is sized once at mount from the host box and devicePixelRatio (capped at 2); the same host always yields the same raster.
+- The hold is truly still by design: a fractional transform drift would re-raster the slot/canvas layer at seek-history-dependent subpixel offsets and break byte-identical frames, so the reveal supplies the life and the hold supplies calm.
diff --git a/registry/components/particle-image-reveal/demo.html b/registry/components/particle-image-reveal/demo.html
new file mode 100644
index 0000000000..fba0bec9cb
--- /dev/null
+++ b/registry/components/particle-image-reveal/demo.html
@@ -0,0 +1,92 @@
+<!doctype html>
+<!--
+  particle-image-reveal demo. This standalone composition mounts the
+  primitive through data-composition-src. Non-default direction, density,
+  and accent values prove the variable path; the default token monogram
+  fills the image slot while the primitive stays elastic to its host.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Particle Image Reveal Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #0b0c0e);
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --surface: #14171c;
+        --border: #343a46;
+        --brand: #71f5a7;
+        --accent: #61a8ff;
+        --accent-2: #c5a3ff;
+        --font-display: "Inter", system-ui, sans-serif;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(
+          ellipse at 50% 44%,
+          var(--bg, #171a20) 0%,
+          var(--bg, #0b0c0e) 72%
+        );
+      }
+
+      .mount-card {
+        width: 62%;
+        height: 72%;
+        left: 19%;
+        top: 14%;
+        container-type: size;
+        overflow: hidden;
+        border: 1px solid color-mix(in srgb, var(--border, #94a3b8) 20%, transparent);
+        border-radius: 30px;
+        background: color-mix(in srgb, var(--surface, #101318) 72%, transparent);
+        box-shadow: 0 40px 100px color-mix(in srgb, var(--bg, #000000) 48%, transparent);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="particle-image-reveal-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="particle-image-reveal-mount"
+        class="mount-card clip"
+        data-composition-id="particle-image-reveal"
+        data-composition-src="./particle-image-reveal.html"
+        data-variable-values='{"direction":"center","accent":"violet","density":"high"}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="1190"
+        data-height="778"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["particle-image-reveal-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/particle-image-reveal/particle-image-reveal.html b/registry/components/particle-image-reveal/particle-image-reveal.html
new file mode 100644
index 0000000000..fcd3a15c48
--- /dev/null
+++ b/registry/components/particle-image-reveal/particle-image-reveal.html
@@ -0,0 +1,392 @@
+<!doctype html>
+<!--
+  particle-image-reveal: HyperFrames video primitive (intros & reveals)
+
+  A seeded deterministic particle field materializes a supplied image: accent
+  particles converge and settle across the frame while the image reveals
+  beneath them (left-to-right wipe or center iris, matching the particle
+  sweep), the trail thinning until the last particle lands and the image
+  holds clean.
+
+  The image is a SLOT. Callers supply content by placing an inert template
+  anywhere in the HOST page (templates never render, and the runtime wipes
+  the host clip's own children on mount, so the slot lives at document
+  level):
+
+    <template data-slot="particle-image-reveal-image"> ... </template>
+
+  Slot content may be an <img>, a muted <video>, or arbitrary HTML; direct
+  img/video children are stretched to cover the stage. When no slot exists,
+  the primitive renders a token monogram: a surface tile with one display
+  glyph, drawn entirely from contract tokens.
+
+  Variables (declared in data-composition-variables below):
+    - density ("low" | "med" | "high", default "med"): particle count.
+    - direction ("ltr" | "center", default "ltr"): ltr sweeps the reveal
+      left to right; center opens an iris from the middle outward.
+    - accent ("green" | "blue" | "violet", default "green"): green rides
+      --brand, blue rides --accent, violet rides --accent-2.
+    - exit ("none" | "fade" | "up", default "none"): frame roots own
+      transitions; the default holds the final frame to the last pixel.
+
+  Envelope, fixed IN and OUT with elastic HOLD only (never timeScale):
+    IN_BASE  = 2.80s  particles converge, image reveals, trail thins to zero
+    HOLD     = max(0, D - IN - OUT); truly still: any fractional transform
+               drift would re-raster the slot/canvas layer at seek-history-
+               dependent subpixel offsets and break byte-identical frames
+    OUT_BASE = 0.45s  only when exit != none
+    If D < IN_BASE + OUT_BASE, IN and OUT compress together.
+
+  Determinism (canvas 2D law): one per-particle attribute table is computed
+  exactly once during synchronous timeline construction from fixed LCG seed
+  0x50a71c1e. Every painted frame is a pure function of (that table, the
+  timeline's current time): the timeline's onUpdate clears the canvas and
+  redraws every particle from scratch. No Math.random, no wall clock, no
+  incremental state, no requestAnimationFrame. Eventful seeks
+  (suppressEvents=false, the engine's render path) repaint identically in
+  any order and either direction; by the end of IN every particle's alpha
+  is exactly zero, so the HOLD canvas is one clear rect.
+
+  Mount contract: the runtime clones only this template. #root fills the
+  host box (no data-width/data-height, container-type: size, cqmin units),
+  is styled via #root only, and registers one paused timeline under the
+  LITERAL "particle-image-reveal" key. All DOM state is set with explicit
+  endpoints (gsap.set + fromTo) so any seek order lands identical frames.
+-->
+<html
+  lang="en"
+  data-composition-id="particle-image-reveal"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "density", "type": "enum", "role": "style", "label": "Density", "description": "Particle count for the converging field.", "default": "med", "options": [{ "value": "low", "label": "Low" }, { "value": "med", "label": "Medium" }, { "value": "high", "label": "High" }] },
+    { "id": "direction", "type": "enum", "role": "timing", "label": "Direction", "description": "ltr sweeps the reveal left to right; center opens an iris from the middle outward.", "default": "ltr", "options": [{ "value": "ltr", "label": "Left to right" }, { "value": "center", "label": "Center out" }] },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Particle and monogram color: green rides --brand, blue rides --accent, violet rides --accent-2.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the revealed image holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Particle Image Reveal</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="particle-image-reveal" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, "Inter", system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .pir-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .pir-stage {
+            position: absolute;
+            inset: 0;
+            will-change: transform, opacity;
+          }
+
+          .pir-image {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+            will-change: clip-path, opacity;
+          }
+
+          .pir-image > img,
+          .pir-image > video {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+          }
+
+          .pir-monogram {
+            display: grid;
+            place-items: center;
+            width: 52cqmin;
+            height: 52cqmin;
+            border: 0.18cqmin solid
+              color-mix(in srgb, var(--pir-accent) 52%, var(--border, #475569));
+            border-radius: var(--radius, 3cqmin);
+            background: color-mix(in srgb, var(--surface, #14171c) 90%, var(--pir-accent));
+            box-shadow: 0 3cqh 9cqh color-mix(in srgb, var(--bg, #000000) 40%, transparent);
+          }
+
+          .pir-monogram-glyph {
+            color: var(--pir-accent);
+            font-size: 26cqmin;
+            font-weight: 600;
+            line-height: 1;
+            letter-spacing: 0.02em;
+          }
+
+          .pir-canvas {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+          }
+        </style>
+
+        <div
+          id="particle-image-reveal-clip"
+          class="pir-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="pir-stage">
+            <div class="pir-image">
+              <div class="pir-monogram">
+                <span class="pir-monogram-glyph" aria-hidden="true">H</span>
+              </div>
+            </div>
+            <canvas class="pir-canvas" aria-hidden="true"></canvas>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".pir-stage");
+            var imageLayer = root.querySelector(".pir-image");
+            var canvas = root.querySelector(".pir-canvas");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var densityCounts = { low: 320, med: 640, high: 1100 };
+            var density = Object.prototype.hasOwnProperty.call(densityCounts, vars.density)
+              ? vars.density
+              : "med";
+            var direction = vars.direction === "center" ? "center" : "ltr";
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            root.style.setProperty("--pir-accent", accentColors[accent]);
+
+            // SLOT. Caller templates live at HOST DOCUMENT level (the mount
+            // wipes host-clip children, and templates never render). The
+            // scoped document proxy filters queries to this composition's
+            // subtree, so the lookup deliberately goes through ownerDocument.
+            var hostDoc = root.ownerDocument;
+            var slotTemplate = null;
+            try {
+              slotTemplate = hostDoc.querySelector(
+                'template[data-slot="particle-image-reveal-image"]',
+              );
+            } catch (error) {
+              slotTemplate = null;
+            }
+            if (slotTemplate) {
+              imageLayer.querySelector(".pir-monogram").remove();
+              imageLayer.appendChild(hostDoc.importNode(slotTemplate.content, true));
+            }
+
+            // Envelope: fixed IN/OUT, elastic HOLD, never time-scaled.
+            var IN_BASE = 2.8;
+            var OUT_BASE = exit === "none" ? 0 : 0.45;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var totalBase = Math.max(0.001, IN_BASE + OUT_BASE);
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var OUT_START = IN + HOLD;
+
+            // Canvas raster basis is fixed once at mount. Elastic root: the
+            // host box decides the resolution; the same host always yields
+            // the same raster, so painted frames stay byte-stable.
+            var dpr = Math.min(2, Math.max(1, Number(window.devicePixelRatio) || 1));
+            var box = root.getBoundingClientRect();
+            var cssW = Math.max(1, Math.round(box.width) || 640);
+            var cssH = Math.max(1, Math.round(box.height) || 360);
+            canvas.width = Math.round(cssW * dpr);
+            canvas.height = Math.round(cssH * dpr);
+            var ctx = canvas.getContext("2d");
+            var minDim = Math.min(canvas.width, canvas.height);
+
+            // Resolve the accent token to a concrete color once at mount so
+            // canvas fills never depend on style recalc during seeks.
+            var probe = hostDoc.createElement("span");
+            probe.style.color = accentColors[accent];
+            root.appendChild(probe);
+            var particleColor = getComputedStyle(probe).color || "#71f5a7";
+            probe.remove();
+
+            // The LCG and every per-particle decision live here. This IIFE
+            // runs once before timeline construction, then only the table is
+            // read. Particle state at any time is a pure function of
+            // (table row, timeline time).
+            var COUNT = densityCounts[density];
+            var particles = (function () {
+              var state = 0x50a71c1e;
+              function next() {
+                state = (Math.imul(1664525, state) + 1013904223) >>> 0;
+                return state / 4294967296;
+              }
+              var rows = [];
+              for (var i = 0; i < COUNT; i += 1) {
+                var tx = next();
+                var ty = next();
+                var key =
+                  direction === "center"
+                    ? Math.min(1, Math.hypot(tx - 0.5, ty - 0.5) / 0.7071)
+                    : tx;
+                // Arrival and birth are fractions of IN. Arrivals sweep with
+                // the reveal front; every fade completes by p = 1 exactly.
+                var arrive = 0.24 + 0.66 * key + 0.04 * next();
+                var travel = 0.2 + 0.12 * next();
+                var fade = 0.05 + 0.04 * next();
+                var angle;
+                if (direction === "center") {
+                  // Converge inward: start displaced radially outward.
+                  angle = Math.atan2(ty - 0.5, tx - 0.5);
+                  if (tx === 0.5 && ty === 0.5) angle = next() * Math.PI * 2;
+                } else {
+                  // Fly in from the left, within a 90 degree cone.
+                  angle = Math.PI + (next() - 0.5) * (Math.PI / 2);
+                }
+                rows.push({
+                  tx: tx,
+                  ty: ty,
+                  arrive: Math.min(0.94, arrive),
+                  birth: Math.max(0, arrive - travel),
+                  fade: fade,
+                  offset: (0.06 + 0.14 * next()) * minDim,
+                  ox: Math.cos(angle),
+                  oy: Math.sin(angle),
+                  radius: (0.28 + 0.62 * next()) * (minDim / 100),
+                  dim: 0.55 + 0.45 * next(),
+                });
+              }
+              return rows;
+            })();
+
+            function clamp01(v) {
+              return v < 0 ? 0 : v > 1 ? 1 : v;
+            }
+
+            // Pure repaint: clear, then draw every particle from (row, p).
+            function paint(timeSeconds) {
+              ctx.clearRect(0, 0, canvas.width, canvas.height);
+              var p = IN > 0 ? clamp01(timeSeconds / IN) : 1;
+              // Global end clamp: the whole field is gone exactly at p = 1,
+              // and the trail thins as the reveal completes.
+              var endClamp = clamp01((1 - p) / 0.05);
+              if (endClamp === 0) return;
+              var thin = 1 - 0.4 * clamp01((p - 0.72) / 0.28);
+              ctx.fillStyle = particleColor;
+              for (var i = 0; i < particles.length; i += 1) {
+                var row = particles[i];
+                var u = clamp01((p - row.birth) / (row.arrive - row.birth));
+                if (u <= 0) continue;
+                var settled = clamp01((p - row.arrive) / row.fade);
+                var alpha = clamp01(u / 0.14) * (1 - settled) * endClamp * thin * row.dim * 0.92;
+                if (alpha <= 0.002) continue;
+                var e = 1 - Math.pow(1 - u, 3);
+                var x = row.tx * canvas.width + row.ox * row.offset * (1 - e);
+                var y = row.ty * canvas.height + row.oy * row.offset * (1 - e);
+                var r = row.radius * dpr * (0.6 + 0.4 * (1 - settled));
+                ctx.globalAlpha = alpha;
+                ctx.beginPath();
+                ctx.arc(x, y, r, 0, Math.PI * 2);
+                ctx.fill();
+              }
+              ctx.globalAlpha = 1;
+            }
+
+            // Image reveal geometry follows the particle sweep.
+            var clipFrom =
+              direction === "center" ? "circle(0% at 50% 50%)" : "inset(0% 100% 0% 0%)";
+            var clipTo = direction === "center" ? "circle(75% at 50% 50%)" : "inset(0% 0% 0% 0%)";
+
+            gsap.set(stage, { opacity: 1, y: "0cqh" });
+            gsap.set(imageLayer, { opacity: 0, clipPath: clipFrom });
+
+            var tl = gsap.timeline({
+              paused: true,
+              onUpdate: function () {
+                paint(tl.time());
+              },
+            });
+
+            // Anchor tween: an inert plain-object tween spanning the full
+            // authored duration. Without it the timeline would end at the
+            // last DOM tween (2.69s) and seeks into the hold would clamp
+            // tl.time() below IN, freezing the particle field short of its
+            // authored zero. It also guarantees onUpdate fires (and the
+            // canvas repaints) for every eventful seek anywhere in [0, D].
+            tl.to({ p: 0 }, { p: 1, duration: duration, ease: "none" }, 0);
+
+            // IN: the image fades up beneath the particles and reveals along
+            // the same front the arrivals sweep. Both endpoints authored.
+            tl.fromTo(
+              imageLayer,
+              { opacity: 0 },
+              { opacity: 1, duration: IN * 0.42, ease: "power2.out" },
+              IN * 0.18,
+            );
+            tl.fromTo(
+              imageLayer,
+              { clipPath: clipFrom },
+              { clipPath: clipTo, duration: IN * 0.74, ease: "power2.inOut" },
+              IN * 0.22,
+            );
+
+            // HOLD: truly still, deliberately. Fractional transform drift
+            // re-rasters the slot/canvas layer at history-dependent subpixel
+            // offsets and breaks byte-identical seeks (the K1 cq-transform
+            // trap); the reveal supplies the life, the hold supplies calm.
+
+            // OUT: optional departure; exit none holds until the frame cuts.
+            if (exit === "up") {
+              tl.to(stage, { y: "-4cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "fade") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            }
+
+            tl.seek(0);
+            paint(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["particle-image-reveal"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/particle-image-reveal/registry-item.json b/registry/components/particle-image-reveal/registry-item.json
new file mode 100644
index 0000000000..039bb44ddf
--- /dev/null
+++ b/registry/components/particle-image-reveal/registry-item.json
@@ -0,0 +1,73 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "particle-image-reveal",
+  "type": "hyperframes:component",
+  "title": "Particle Image Reveal",
+  "description": "A seeded deterministic particle field converges and settles while a slotted image reveals beneath it, the trail thinning until the image holds clean.",
+  "tags": ["motion-primitive", "intros-reveals", "particles", "reveal", "canvas", "deterministic"],
+  "jobs": ["reveal"],
+  "family": "intros-reveals",
+  "profile": "materialize",
+  "evidence": "Wave K3 demand slate: seeded-table canvas particles, pure function of (index, time), redraw on every eventful seek",
+  "syncPoints": [{ "id": "image-locked", "phase": "in", "offset": 2.8 }],
+  "files": [
+    {
+      "path": "particle-image-reveal.html",
+      "target": "compositions/components/particle-image-reveal.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "density",
+      "type": "enum",
+      "role": "style",
+      "label": "Density",
+      "description": "Particle count for the converging field.",
+      "default": "med",
+      "options": [
+        { "value": "low", "label": "Low" },
+        { "value": "med", "label": "Medium" },
+        { "value": "high", "label": "High" }
+      ]
+    },
+    {
+      "id": "direction",
+      "type": "enum",
+      "role": "timing",
+      "label": "Direction",
+      "description": "ltr sweeps the reveal left to right; center opens an iris from the middle outward.",
+      "default": "ltr",
+      "options": [
+        { "value": "ltr", "label": "Left to right" },
+        { "value": "center", "label": "Center out" }
+      ]
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Particle and monogram color: green rides --brand, blue rides --accent, violet rides --accent-2.",
+      "default": "green",
+      "options": [
+        { "value": "green", "label": "Green" },
+        { "value": "blue", "label": "Blue" },
+        { "value": "violet", "label": "Violet" }
+      ]
+    },
+    {
+      "id": "exit",
+      "type": "enum",
+      "role": "timing",
+      "label": "Exit",
+      "description": "Optional departure. Default none: the revealed image holds until the frame cuts.",
+      "default": "none",
+      "options": [
+        { "value": "none", "label": "None" },
+        { "value": "fade", "label": "Fade" },
+        { "value": "up", "label": "Up" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/particle-text-dissolve/README.md b/registry/components/particle-text-dissolve/README.md
new file mode 100644
index 0000000000..546a388ecb
--- /dev/null
+++ b/registry/components/particle-text-dissolve/README.md
@@ -0,0 +1,38 @@
+# particle-text-dissolve
+
+Text assembles FROM a seeded particle cloud, or dissolves TO it: per-particle target positions are sampled ONCE at mount from the rendered text bitmap (the token-styled line is rastered to an offscreen canvas and read back with getImageData), then the field runs table-driven with zero per-particle tweens and one `onUpdate` painter. Direct donor: particle-image-reveal.
+
+4s authored, elastic HOLD, exit `none` by default. Wave M experiment (watch page only, not on the hero shelf).
+
+## Variables
+
+| id          | type   | default    | notes                                                                                                                          |
+| ----------- | ------ | ---------- | ------------------------------------------------------------------------------------------------------------------------------ |
+| `text`      | string | `Dissolve` | The line that assembles or dissolves. Sized to fit at mount (up to 86% of the stage width).                                    |
+| `direction` | enum   | `in`       | `in` assembles the line from the cloud and holds it crisp; `out` erases the line left to right into the cloud and holds empty. |
+| `density`   | enum   | `med`      | Particle count cap: `low` (900), `med` (1700), `high` (2800).                                                                  |
+| `accent`    | enum   | `green`    | Text and particle color: green rides `--brand`, blue rides `--accent`, violet rides `--accent-2`.                              |
+| `exit`      | enum   | `none`     | `none` holds until the cut; `fade` departs opacity-only; `up` rises out.                                                       |
+
+## Mount
+
+```html
+<div
+  class="clip"
+  data-composition-id="particle-text-dissolve"
+  data-composition-src="./particle-text-dissolve.html"
+  data-variable-values='{"text":"Particles","direction":"in","density":"high","accent":"violet"}'
+  data-start="0"
+  data-duration="4"
+  data-track-index="0"
+></div>
+```
+
+Elastic root: no `data-width`/`data-height`; it fills whatever box the host clip gives it. Timeline registers under the literal `particle-text-dissolve` key.
+
+## Notes
+
+- Bitmap sampling happens exactly once, synchronously at mount: the line is drawn to an offscreen canvas with the DOM line's computed font stack and a fitted pixel size, lit cells on a deterministic grid become targets, and the set is thinned to the density cap with fixed LCG seed `0x9d1550f7` (one draw per cell, grid order). The crisp DOM line locks to the same family and device-pixel size, so targets sit on the glyphs it draws.
+- Every painted frame is a pure function of (table, timeline time): the anchor tween's `onUpdate` clears and repaints the whole field. No Math.random, no wall clock, no incremental state, so eventful seeks (`suppressEvents=false`, the engine's render path) land byte-identical frames in any order and either direction.
+- The reveal (or erase) front sweeps left to right for both directions; the DOM line's clip-path wipe rides the same front. By the end of IN every particle's alpha is exactly zero: the HOLD canvas is one clear rect, holding either the crisp themable DOM line (`in`) or an empty stage (`out`).
+- The canvas raster is sized once at mount from the host box and devicePixelRatio (capped at 2); the same host always yields the same raster and the same particle table.
diff --git a/registry/components/particle-text-dissolve/demo.html b/registry/components/particle-text-dissolve/demo.html
new file mode 100644
index 0000000000..6e62a8bd9c
--- /dev/null
+++ b/registry/components/particle-text-dissolve/demo.html
@@ -0,0 +1,83 @@
+<!doctype html>
+<!--
+  particle-text-dissolve demo. This standalone composition mounts the
+  primitive FULL-BLEED through data-composition-src on the dark register.
+  Non-default text, density, and accent values prove the variable path;
+  direction stays "in" so the watch-page hold lands on the crisp line.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Particle Text Dissolve Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #0b0c0e);
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --muted: #94a3b8;
+        --surface: #14171c;
+        --border: #343a46;
+        --brand: #71f5a7;
+        --accent: #61a8ff;
+        --accent-2: #c5a3ff;
+        --font-display: "Inter", system-ui, sans-serif;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 44%, #171a20 0%, var(--bg, #0b0c0e) 72%);
+      }
+
+      .mount-bleed {
+        position: absolute;
+        inset: 0;
+        container-type: size;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="particle-text-dissolve-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="particle-text-dissolve-mount"
+        class="mount-bleed clip"
+        data-composition-id="particle-text-dissolve"
+        data-composition-src="./particle-text-dissolve.html"
+        data-variable-values='{"text":"Particles","density":"high","accent":"violet"}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="1920"
+        data-height="1080"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["particle-text-dissolve-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/particle-text-dissolve/particle-text-dissolve.html b/registry/components/particle-text-dissolve/particle-text-dissolve.html
new file mode 100644
index 0000000000..bdf47f4ca6
--- /dev/null
+++ b/registry/components/particle-text-dissolve/particle-text-dissolve.html
@@ -0,0 +1,414 @@
+<!doctype html>
+<!--
+  particle-text-dissolve: HyperFrames video primitive (type / particles).
+  Wave M8. Direct donor: particle-image-reveal (canvas determinism law).
+
+  Text assembles FROM a seeded particle cloud, or dissolves TO it (direction
+  enum). Per-particle target positions are sampled ONCE at mount from the
+  rendered text bitmap: the token-styled line is rastered to an offscreen
+  canvas, read back with getImageData, and every lit cell on a deterministic
+  grid becomes a particle target. Particles are table-driven with ZERO
+  per-particle tweens; one onUpdate painter clears and redraws the whole
+  field from scratch each frame.
+
+  direction "in": particles fly from a scattered cloud onto the glyphs while
+  the crisp DOM line wipes in along the same left-to-right front; each
+  particle fades as it settles, so by the end of IN the canvas is empty and
+  the DOM text holds crisp and themable.
+  direction "out": the crisp line holds for a beat, then erases left to
+  right as particles are born on the departing glyphs and scatter outward,
+  fading in flight; the HOLD is empty.
+
+  Variables (declared in data-composition-variables below):
+    - text (string, default "Dissolve"): the line that assembles/dissolves.
+    - direction ("in" | "out", default "in").
+    - density ("low" | "med" | "high", default "med"): particle count cap.
+    - accent ("green" | "blue" | "violet", default "green"): text and
+      particle color; green rides --brand, blue rides --accent, violet
+      rides --accent-2.
+    - exit ("none" | "fade" | "up", default "none"): frame roots own
+      transitions.
+
+  Envelope, fixed IN and OUT with elastic HOLD only (never timeScale):
+    IN_BASE  = 2.80s  the assembly (or dissolve) plays out completely
+    HOLD     = max(0, D - IN - OUT); truly still: direction in holds the
+               crisp DOM line, direction out holds an empty stage; either
+               way the canvas is one clear rect
+    OUT_BASE = 0.45s  only when exit != none
+    If D < IN_BASE + OUT_BASE, IN and OUT compress together.
+
+  Determinism (canvas 2D law, per particle-image-reveal): the text bitmap
+  readback and the per-particle attribute table are computed exactly once
+  during synchronous timeline construction; the table's random components
+  come from fixed LCG seed 0x9d1550f7. Every painted frame is a pure
+  function of (table, timeline time): the anchor tween's onUpdate clears
+  the canvas and redraws every particle. No Math.random, no wall clock, no
+  incremental state, no requestAnimationFrame. Eventful seeks
+  (suppressEvents=false, the engine's render path) repaint identically in
+  any order and either direction.
+
+  Mount contract: the runtime clones only this template. #root fills the
+  host box (no data-width/data-height, container-type: size, cqmin units),
+  is styled via #root only, and registers one paused timeline under the
+  LITERAL "particle-text-dissolve" key. All DOM state is set with explicit
+  endpoints (gsap.set + fromTo) so any seek order lands identical frames.
+-->
+<html
+  lang="en"
+  data-composition-id="particle-text-dissolve"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "text", "type": "string", "role": "content", "label": "Text", "description": "The line that assembles from (or dissolves into) the particle cloud.", "default": "Dissolve" },
+    { "id": "direction", "type": "enum", "role": "timing", "label": "Direction", "description": "in assembles the text from the cloud and holds it crisp; out erases the text into the cloud and holds empty.", "default": "in", "options": [{ "value": "in", "label": "Assemble in" }, { "value": "out", "label": "Dissolve out" }] },
+    { "id": "density", "type": "enum", "role": "style", "label": "Density", "description": "Particle count cap for the field.", "default": "med", "options": [{ "value": "low", "label": "Low" }, { "value": "med", "label": "Medium" }, { "value": "high", "label": "High" }] },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Text and particle color: green rides --brand, blue rides --accent, violet rides --accent-2.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the end state holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Particle Text Dissolve</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="particle-text-dissolve" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, "Inter", system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .ptd-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .ptd-stage {
+            position: absolute;
+            inset: 0;
+            will-change: transform, opacity;
+          }
+
+          .ptd-text {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            will-change: clip-path, opacity;
+          }
+
+          .ptd-line {
+            color: var(--ptd-accent);
+            font-weight: 600;
+            line-height: 1;
+            letter-spacing: 0.02em;
+            white-space: nowrap;
+          }
+
+          .ptd-canvas {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+          }
+        </style>
+
+        <div
+          id="particle-text-dissolve-clip"
+          class="ptd-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="ptd-stage">
+            <div class="ptd-text">
+              <span class="ptd-line"></span>
+            </div>
+            <canvas class="ptd-canvas" aria-hidden="true"></canvas>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".ptd-stage");
+            var textLayer = root.querySelector(".ptd-text");
+            var line = root.querySelector(".ptd-line");
+            var canvas = root.querySelector(".ptd-canvas");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var text =
+              typeof vars.text === "string" && vars.text.length > 0 ? vars.text : "Dissolve";
+            var direction = vars.direction === "out" ? "out" : "in";
+            var densityCaps = { low: 900, med: 1700, high: 2800 };
+            var density = Object.prototype.hasOwnProperty.call(densityCaps, vars.density)
+              ? vars.density
+              : "med";
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            root.style.setProperty("--ptd-accent", accentColors[accent]);
+            line.textContent = text;
+
+            // Envelope: fixed IN/OUT, elastic HOLD, never time-scaled.
+            var IN_BASE = 2.8;
+            var OUT_BASE = exit === "none" ? 0 : 0.45;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var totalBase = Math.max(0.001, IN_BASE + OUT_BASE);
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var OUT_START = IN + HOLD;
+
+            // Canvas raster basis is fixed once at mount. Elastic root: the
+            // host box decides the resolution; the same host always yields
+            // the same raster, so painted frames stay byte-stable.
+            var dpr = Math.min(2, Math.max(1, Number(window.devicePixelRatio) || 1));
+            var box = root.getBoundingClientRect();
+            var cssW = Math.max(1, Math.round(box.width) || 640);
+            var cssH = Math.max(1, Math.round(box.height) || 360);
+            canvas.width = Math.round(cssW * dpr);
+            canvas.height = Math.round(cssH * dpr);
+            var ctx = canvas.getContext("2d");
+            var minDim = Math.min(canvas.width, canvas.height);
+
+            // Resolve the accent token to a concrete color once at mount so
+            // canvas fills never depend on style recalc during seeks.
+            var hostDoc = root.ownerDocument;
+            var probe = hostDoc.createElement("span");
+            probe.style.color = accentColors[accent];
+            root.appendChild(probe);
+            var particleColor = getComputedStyle(probe).color || "#71f5a7";
+            probe.remove();
+
+            // Rendered-text raster, sampled ONCE at mount. The DOM line and
+            // the offscreen raster share the same computed font stack and the
+            // same fitted pixel size, so particle targets sit on the glyphs
+            // the crisp line will draw.
+            var fontFamily = getComputedStyle(line).fontFamily || "system-ui, sans-serif";
+            var off = hostDoc.createElement("canvas");
+            off.width = canvas.width;
+            off.height = canvas.height;
+            var offCtx = off.getContext("2d", { willReadFrequently: true });
+            var fontPx = Math.round(canvas.height * 0.3);
+            offCtx.font = "600 " + fontPx + "px " + fontFamily;
+            var measured = offCtx.measureText(text).width || 1;
+            var maxWidth = canvas.width * 0.86;
+            if (measured > maxWidth) {
+              fontPx = Math.max(8, Math.floor((fontPx * maxWidth) / measured));
+              offCtx.font = "600 " + fontPx + "px " + fontFamily;
+            }
+            offCtx.textAlign = "center";
+            offCtx.textBaseline = "middle";
+            offCtx.fillStyle = "#ffffff";
+            offCtx.fillText(text, off.width / 2, off.height / 2);
+            // Lock the crisp DOM line to the exact raster the targets came
+            // from: same family string, same device-pixel size.
+            line.style.fontFamily = fontFamily;
+            line.style.fontSize = fontPx / dpr + "px";
+
+            // The LCG and every per-particle decision live here. This IIFE
+            // runs once before timeline construction, then only the table is
+            // read. Particle state at any time is a pure function of
+            // (table row, timeline time). Zero per-particle tweens.
+            var particles = (function () {
+              var state = 0x9d1550f7;
+              function next() {
+                state = (Math.imul(1664525, state) + 1013904223) >>> 0;
+                return state / 4294967296;
+              }
+              // Grid-sample lit cells from the readback (alpha over half).
+              var data = offCtx.getImageData(0, 0, off.width, off.height).data;
+              var step = Math.max(2, Math.round(minDim / 260));
+              var cells = [];
+              var minX = Infinity;
+              var maxX = -Infinity;
+              for (var y = 0; y < off.height; y += step) {
+                for (var x = 0; x < off.width; x += step) {
+                  if (data[(y * off.width + x) * 4 + 3] > 127) {
+                    cells.push({ x: x, y: y });
+                    if (x < minX) minX = x;
+                    if (x > maxX) maxX = x;
+                  }
+                }
+              }
+              if (cells.length === 0) {
+                // Degenerate raster (empty text box): no particles, the DOM
+                // line still plays its wipe.
+                minX = 0;
+                maxX = 1;
+              }
+              var span = Math.max(1, maxX - minX);
+              // Thin deterministically to the density cap. The keep decision
+              // consumes exactly one LCG draw per cell in grid order, so the
+              // surviving set is a pure function of (raster, seed).
+              var cap = densityCaps[density];
+              var keep = cells.length > cap ? cap / cells.length : 1;
+              var rows = [];
+              for (var i = 0; i < cells.length; i += 1) {
+                var take = next() < keep;
+                if (!take) continue;
+                var tx = cells[i].x;
+                var ty = cells[i].y;
+                var key = (tx - minX) / span;
+                // The front sweeps left to right for both directions; the
+                // per-particle schedule completes strictly inside [0, 0.97].
+                var at = 0.2 + 0.62 * key + 0.05 * next();
+                var travel = 0.18 + 0.1 * next();
+                var fade = 0.05 + 0.04 * next();
+                var angle = next() * Math.PI * 2;
+                rows.push({
+                  tx: tx,
+                  ty: ty,
+                  at: Math.min(0.9, at),
+                  travel: travel,
+                  fade: fade,
+                  offset: (0.1 + 0.22 * next()) * minDim,
+                  ox: Math.cos(angle),
+                  oy: Math.sin(angle),
+                  radius: (0.26 + 0.5 * next()) * (minDim / 200) * step * 0.5,
+                  dim: 0.5 + 0.5 * next(),
+                });
+              }
+              return rows;
+            })();
+
+            function clamp01(v) {
+              return v < 0 ? 0 : v > 1 ? 1 : v;
+            }
+
+            // Pure repaint: clear, then draw every particle from (row, p).
+            // direction in: fly cloud -> glyph, fade once settled (donor
+            // law). direction out: born on the glyph as the front passes,
+            // fly outward, fade in flight. Both end all-zero by p = 1.
+            function paint(timeSeconds) {
+              ctx.clearRect(0, 0, canvas.width, canvas.height);
+              var p = IN > 0 ? clamp01(timeSeconds / IN) : 1;
+              var endClamp = clamp01((1 - p) / 0.04);
+              if (endClamp === 0) return;
+              ctx.fillStyle = particleColor;
+              for (var i = 0; i < particles.length; i += 1) {
+                var row = particles[i];
+                var alpha;
+                var dist;
+                if (direction === "in") {
+                  var birth = Math.max(0, row.at - row.travel);
+                  var u = clamp01((p - birth) / (row.at - birth));
+                  if (u <= 0) continue;
+                  var settled = clamp01((p - row.at) / row.fade);
+                  alpha = clamp01(u / 0.16) * (1 - settled) * row.dim * endClamp;
+                  var e = 1 - Math.pow(1 - u, 3);
+                  dist = row.offset * (1 - e);
+                } else {
+                  var v = clamp01((p - row.at) / row.travel);
+                  if (v <= 0) continue;
+                  alpha = clamp01(v / 0.14) * (1 - v) * row.dim * endClamp;
+                  dist = row.offset * (v * v);
+                }
+                if (alpha <= 0.002) continue;
+                var x = row.tx + row.ox * dist;
+                var y = row.ty + row.oy * dist;
+                ctx.globalAlpha = alpha * 0.92;
+                ctx.beginPath();
+                ctx.arc(x, y, row.radius, 0, Math.PI * 2);
+                ctx.fill();
+              }
+              ctx.globalAlpha = 1;
+            }
+
+            // The crisp line wipes along the same front the particles sweep.
+            var clipShown = "inset(0% 0% 0% 0%)";
+            var clipInStart = "inset(0% 100% 0% 0%)";
+            var clipOutEnd = "inset(0% 0% 0% 100%)";
+
+            gsap.set(stage, { opacity: 1, y: "0cqh" });
+
+            var tl = gsap.timeline({
+              paused: true,
+              onUpdate: function () {
+                paint(tl.time());
+              },
+            });
+
+            // Anchor tween: an inert plain-object tween spanning the full
+            // authored duration so tl.time() covers [0, D] and the painter
+            // fires on every eventful seek, including seeks into the hold.
+            tl.to({ p: 0 }, { p: 1, duration: duration, ease: "none" }, 0);
+
+            if (direction === "in") {
+              // The line reveals behind the arriving particles.
+              tl.fromTo(
+                textLayer,
+                { opacity: 0 },
+                { opacity: 1, duration: IN * 0.3, ease: "power2.out" },
+                IN * 0.16,
+              );
+              tl.fromTo(
+                textLayer,
+                { clipPath: clipInStart },
+                { clipPath: clipShown, duration: IN * 0.76, ease: "power1.inOut" },
+                IN * 0.18,
+              );
+            } else {
+              // The line erases as the front passes; particles carry it off.
+              gsap.set(textLayer, { opacity: 1 });
+              tl.fromTo(
+                textLayer,
+                { clipPath: clipShown },
+                { clipPath: clipOutEnd, duration: IN * 0.76, ease: "power1.inOut" },
+                IN * 0.18,
+              );
+            }
+
+            // HOLD: truly still. The canvas is one clear rect (every alpha
+            // is exactly zero by the end of IN) and the line is either fully
+            // shown or fully clipped; nothing drifts.
+
+            // OUT: optional departure; exit none holds until the frame cuts.
+            if (exit === "up") {
+              tl.to(stage, { y: "-4cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "fade") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            }
+
+            tl.seek(0);
+            paint(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["particle-text-dissolve"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/particle-text-dissolve/registry-item.json b/registry/components/particle-text-dissolve/registry-item.json
new file mode 100644
index 0000000000..f4ade81ece
--- /dev/null
+++ b/registry/components/particle-text-dissolve/registry-item.json
@@ -0,0 +1,88 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "particle-text-dissolve",
+  "type": "hyperframes:component",
+  "title": "Particle Text Dissolve",
+  "description": "Text assembles from a seeded particle cloud (or dissolves into it): per-particle targets sampled once from the rendered text bitmap at mount, table-driven particles, zero per-particle tweens, one onUpdate painter.",
+  "tags": [
+    "motion-primitive",
+    "text-effects",
+    "particles",
+    "canvas",
+    "deterministic",
+    "experiment"
+  ],
+  "jobs": ["emphasize"],
+  "family": "text-effects",
+  "profile": "materialize",
+  "evidence": "Wave M8 experiment: particle-image-reveal donor (fixed-seed LCG, pure function of table and time), targets from an offscreen text-raster readback",
+  "syncPoints": [{ "id": "text-locked", "phase": "in", "offset": 2.8 }],
+  "files": [
+    {
+      "path": "particle-text-dissolve.html",
+      "target": "compositions/components/particle-text-dissolve.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "text",
+      "type": "string",
+      "role": "content",
+      "label": "Text",
+      "description": "The line that assembles from (or dissolves into) the particle cloud.",
+      "default": "Dissolve"
+    },
+    {
+      "id": "direction",
+      "type": "enum",
+      "role": "timing",
+      "label": "Direction",
+      "description": "in assembles the text from the cloud and holds it crisp; out erases the text into the cloud and holds empty.",
+      "default": "in",
+      "options": [
+        { "value": "in", "label": "Assemble in" },
+        { "value": "out", "label": "Dissolve out" }
+      ]
+    },
+    {
+      "id": "density",
+      "type": "enum",
+      "role": "style",
+      "label": "Density",
+      "description": "Particle count cap for the field.",
+      "default": "med",
+      "options": [
+        { "value": "low", "label": "Low" },
+        { "value": "med", "label": "Medium" },
+        { "value": "high", "label": "High" }
+      ]
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Text and particle color: green rides --brand, blue rides --accent, violet rides --accent-2.",
+      "default": "green",
+      "options": [
+        { "value": "green", "label": "Green" },
+        { "value": "blue", "label": "Blue" },
+        { "value": "violet", "label": "Violet" }
+      ]
+    },
+    {
+      "id": "exit",
+      "type": "enum",
+      "role": "timing",
+      "label": "Exit",
+      "description": "Optional departure. Default none: the end state holds until the frame cuts.",
+      "default": "none",
+      "options": [
+        { "value": "none", "label": "None" },
+        { "value": "fade", "label": "Fade" },
+        { "value": "up", "label": "Up" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/per-word-crossfade/demo.html b/registry/components/per-word-crossfade/demo.html
new file mode 100644
index 0000000000..e203b4e944
--- /dev/null
+++ b/registry/components/per-word-crossfade/demo.html
@@ -0,0 +1,142 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Per-Word Crossfade - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #fafafa;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 40px;
+        width: 1920px;
+        height: 1080px;
+        padding: 120px 160px;
+      }
+      /* outgoing phrase — static, fades out */
+      .phrase-out {
+        display: inline-flex;
+        gap: 28px;
+        font-size: 128px;
+        font-weight: 900;
+        letter-spacing: -0.04em;
+        line-height: 1;
+        color: #71717a;
+        font-family: Inter, system-ui, sans-serif;
+        position: relative;
+      }
+      .phrase-out span {
+        display: inline-block;
+        will-change: opacity;
+      }
+      /* incoming phrase — the GSAP-animated element */
+      .hf-remocn-per-word-crossfade {
+        color: #18181b;
+        font-family: Inter, system-ui, sans-serif;
+        font-weight: 900;
+        letter-spacing: -0.04em;
+      }
+      .hf-remocn-per-word-crossfade {
+        display: inline-flex;
+        gap: 28px;
+        font-size: 128px;
+        line-height: 1;
+      }
+      .hf-remocn-per-word-crossfade span {
+        display: inline-block;
+        transform: translate(var(--hf-word-x, 0px), var(--hf-word-y, 0px))
+          scale(var(--hf-word-scale, 1));
+        filter: blur(var(--hf-word-blur, 0px));
+        will-change: transform, filter, opacity;
+      }
+      /* label */
+      .demo-label {
+        font-size: 26px;
+        font-weight: 500;
+        color: #a1a1aa;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+        margin-top: 24px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="per-word-crossfade-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <!-- outgoing phrase: fades out word-by-word -->
+        <div class="phrase-out">
+          <span>Write</span><span>once</span><span>publish</span><span>anywhere</span>
+        </div>
+        <!-- incoming phrase: per-word crossfade in -->
+        <div class="hf-remocn-per-word-crossfade">
+          <span>Create</span><span>once</span><span>reuse</span><span>everywhere</span>
+        </div>
+        <div class="demo-label">per-word crossfade</div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+
+        // outgoing phrase fades out word-by-word
+        tl.to(
+          ".phrase-out span",
+          {
+            opacity: 0,
+            duration: 0.25,
+            stagger: 0.055,
+            ease: "power2.in",
+          },
+          startTime,
+        );
+
+        // incoming phrase fades in word-by-word (the named component)
+        tl.fromTo(
+          ".hf-remocn-per-word-crossfade span",
+          { opacity: 0, "--hf-word-y": "22px", "--hf-word-scale": 0.92, "--hf-word-blur": "5px" },
+          {
+            opacity: 1,
+            "--hf-word-y": "0px",
+            "--hf-word-scale": 1,
+            "--hf-word-blur": "0px",
+            duration: 0.3,
+            stagger: 0.055,
+            ease: "power3.out",
+          },
+          startTime + 0.1,
+        );
+
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["per-word-crossfade-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/per-word-crossfade/per-word-crossfade.html b/registry/components/per-word-crossfade/per-word-crossfade.html
new file mode 100644
index 0000000000..d4ee711ee7
--- /dev/null
+++ b/registry/components/per-word-crossfade/per-word-crossfade.html
@@ -0,0 +1,115 @@
+<!--
+  Per-Word Crossfade - remocn typography primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Drive the timeline
+  integration from a paused GSAP timeline so renders remain deterministic.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and either rewrites the words or writes a
+  custom property the CSS below consumes. The timeline recipe at the end is
+  untouched by them: it keeps driving one offset and one blur, and these
+  decide what that offset and that blur mean on screen.
+
+    - text (string, default "Create once reuse everywhere"): the line to
+      animate. It is split on whitespace and every word gets its own span, so
+      the stagger picks up the new words with no other change.
+    - drift (close | standard | far, default standard): scales the vertical
+      offset. close covers half the run, far nearly double, in the same time.
+    - blur (soft | standard | heavy, default standard): scales the blur
+      radius, from a light haze to a full smear.
+    - tone (ink | paper | accent, default ink): word colour. ink is near-black
+      for light frames, paper near-white for dark ones, accent rides --brand.
+
+  On every default the result is identical to the original: four near-black
+  words drifting 22px up through a 5px blur.
+-->
+
+<div
+  class="hf-remocn-per-word-crossfade"
+  data-composition-variables='[
+    { "id": "text", "type": "string", "role": "content", "label": "Text", "description": "The line to animate. It is split on whitespace and every word gets its own span, so the stagger picks up the new words.", "default": "Create once reuse everywhere" },
+    { "id": "drift", "type": "enum", "role": "motion", "label": "Drift", "description": "Scales the vertical offset, so the words cover a shorter or longer run in the same time.", "default": "standard", "options": [{ "value": "close", "label": "Close" }, { "value": "standard", "label": "Standard" }, { "value": "far", "label": "Far" }] },
+    { "id": "blur", "type": "enum", "role": "style", "label": "Blur", "description": "Scales the blur radius the timeline drives, from a light haze to a full smear.", "default": "standard", "options": [{ "value": "soft", "label": "Soft" }, { "value": "standard", "label": "Standard" }, { "value": "heavy", "label": "Heavy" }] },
+    { "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Word colour: ink for light frames, paper for dark ones, accent rides --brand.", "default": "ink", "options": [{ "value": "ink", "label": "Ink" }, { "value": "paper", "label": "Paper" }, { "value": "accent", "label": "Accent" }] }
+  ]'
+>
+  <span>Create</span><span>once</span><span>reuse</span><span>everywhere</span>
+</div>
+
+<style>
+  .hf-remocn-per-word-crossfade {
+    color: var(--hf-word-color, #18181b);
+    font-family: Inter, system-ui, sans-serif;
+    font-weight: 900;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-per-word-crossfade {
+    display: inline-flex;
+    gap: 12px;
+    font-size: 56px;
+    line-height: 1;
+  }
+  .hf-remocn-per-word-crossfade span {
+    display: inline-block;
+    transform: translate(
+        var(--hf-word-x, 0px),
+        calc(var(--hf-word-y, 0px) * var(--hf-word-drift, 1))
+      )
+      scale(var(--hf-word-scale, 1));
+    filter: blur(calc(var(--hf-word-blur, 0px) * var(--hf-word-blur-scale, 1)));
+    will-change: transform, filter, opacity;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    var drifts = { close: 0.5, standard: 1, far: 1.85 };
+    var blurScales = { soft: 0.45, standard: 1, heavy: 2.2 };
+    var tones = {
+      ink: "#18181b",
+      paper: "#fafafa",
+      accent: "var(--brand, #34d399)",
+    };
+
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var drift = drifts[pick(drifts, vars.drift, "standard")];
+    var blurScale = blurScales[pick(blurScales, vars.blur, "standard")];
+    var tone = tones[pick(tones, vars.tone, "ink")];
+
+    var text = typeof vars.text === "string" ? vars.text.trim() : "";
+    var words = (text || "Create once reuse everywhere").split(/\s+/);
+
+    var roots = document.querySelectorAll(".hf-remocn-per-word-crossfade");
+    for (var i = 0; i < roots.length; i += 1) {
+      var root = roots[i];
+      root.style.setProperty("--hf-word-drift", String(drift));
+      root.style.setProperty("--hf-word-blur-scale", String(blurScale));
+      root.style.setProperty("--hf-word-color", tone);
+
+      while (root.firstChild) {
+        root.removeChild(root.firstChild);
+      }
+      for (var w = 0; w < words.length; w += 1) {
+        var span = document.createElement("span");
+        span.textContent = words[w];
+        root.appendChild(span);
+      }
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-per-word-crossfade span', { opacity: 0, '--hf-word-y': '22px', '--hf-word-scale': 0.92, '--hf-word-blur': '5px' }, { opacity: 1, '--hf-word-y': '0px', '--hf-word-scale': 1, '--hf-word-blur': '0px', duration: 0.3, stagger: 0.055, ease: 'power3.out' }, startTime);
+-->
diff --git a/registry/components/per-word-crossfade/registry-item.json b/registry/components/per-word-crossfade/registry-item.json
new file mode 100644
index 0000000000..3739b7b456
--- /dev/null
+++ b/registry/components/per-word-crossfade/registry-item.json
@@ -0,0 +1,67 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "per-word-crossfade",
+  "type": "hyperframes:component",
+  "title": "Per-Word Crossfade",
+  "description": "Words gently fade into place with a short vertical drift for calm keynote rhythm.",
+  "tags": ["motion-primitive", "remocn-port", "typography"],
+  "files": [
+    {
+      "path": "per-word-crossfade.html",
+      "target": "compositions/components/per-word-crossfade.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "text",
+      "type": "string",
+      "role": "content",
+      "label": "Text",
+      "description": "The line to animate. It is split on whitespace and every word gets its own span, so the stagger picks up the new words.",
+      "default": "Create once reuse everywhere"
+    },
+    {
+      "id": "drift",
+      "type": "enum",
+      "role": "motion",
+      "label": "Drift",
+      "description": "Scales the vertical offset, so the words cover a shorter or longer run in the same time.",
+      "default": "standard",
+      "options": [
+        { "value": "close", "label": "Close" },
+        { "value": "standard", "label": "Standard" },
+        { "value": "far", "label": "Far" }
+      ]
+    },
+    {
+      "id": "blur",
+      "type": "enum",
+      "role": "style",
+      "label": "Blur",
+      "description": "Scales the blur radius the timeline drives, from a light haze to a full smear.",
+      "default": "standard",
+      "options": [
+        { "value": "soft", "label": "Soft" },
+        { "value": "standard", "label": "Standard" },
+        { "value": "heavy", "label": "Heavy" }
+      ]
+    },
+    {
+      "id": "tone",
+      "type": "enum",
+      "role": "style",
+      "label": "Tone",
+      "description": "Word colour: ink for light frames, paper for dark ones, accent rides --brand.",
+      "default": "ink",
+      "options": [
+        { "value": "ink", "label": "Ink" },
+        { "value": "paper", "label": "Paper" },
+        { "value": "accent", "label": "Accent" }
+      ]
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/per-word-crossfade.png"
+  }
+}
diff --git a/registry/components/per-word-rise/README.md b/registry/components/per-word-rise/README.md
new file mode 100644
index 0000000000..498ca9e255
--- /dev/null
+++ b/registry/components/per-word-rise/README.md
@@ -0,0 +1,36 @@
+# per-word-rise
+
+Words or characters rise into place in a controlled blur-to-sharp cascade, settle with a short decel tail on landing, and hold truly still until the frame cuts.
+
+3.5s authored, elastic HOLD, exit `none` by default.
+
+## Variables
+
+| id       | type   | default           | notes                                                                                                                                                                              |
+| -------- | ------ | ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `text`   | string | `WORDS IN MOTION` | The displayed line. Font size auto-fits to character count.                                                                                                                        |
+| `split`  | enum   | `word`            | `word` or `char`: the unit that rises.                                                                                                                                             |
+| `cues`   | string | `` (empty)        | Comma-separated seconds (from mount start) for each unit's landing, e.g. `0.4,0.8,1.6`. Units beyond the list extrapolate at the list's own gap. Empty keeps the authored cascade. |
+| `accent` | enum   | `green`           | Text color: green rides `--brand`, blue rides `--accent`, violet rides `--accent-2`.                                                                                               |
+| `exit`   | enum   | `none`            | `none` holds until the cut; `fade` departs opacity-only; `up` is the staggered upward fade (the pre-Wave-J default ending).                                                        |
+
+## Mount
+
+```html
+<div
+  class="clip"
+  data-composition-id="per-word-rise"
+  data-composition-src="./per-word-rise.html"
+  data-variable-values='{"text":"SHIP IT TODAY","split":"word","cues":"0.5,1.0,1.5"}'
+  data-start="0"
+  data-duration="3.5"
+  data-track-index="0"
+></div>
+```
+
+Elastic root: no `data-width`/`data-height`; it fills whatever box the host clip gives it. Timeline registers under the literal `per-word-rise` key.
+
+## Notes
+
+- Cues are landing times: each unit's rise ends on its cue (start compresses toward 0 for early cues). Landings clamp ahead of any exit.
+- Deterministic and seek-safe; the hold is truly still (no drift), and every landing ends with a short overshoot-free settle tail instead of a dead stop.
diff --git a/registry/components/per-word-rise/demo.html b/registry/components/per-word-rise/demo.html
new file mode 100644
index 0000000000..b520bd5b1e
--- /dev/null
+++ b/registry/components/per-word-rise/demo.html
@@ -0,0 +1,103 @@
+<!doctype html>
+<!--
+  per-word-rise demo. This standalone composition mounts per-word-rise.html
+  through data-composition-src. Non-default text, split, and accent values
+  prove the variable path while the primitive remains elastic to its host.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Per Word Rise Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #0b0c0e);
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --muted: #94a3b8;
+        --surface: #14171c;
+        --border: #343a46;
+        --brand: #71f5a7;
+        --accent: #61a8ff;
+        --accent-2: #c5a3ff;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-body: Inter, system-ui, sans-serif;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        --radius: 3cqmin;
+        --space-1: 1.8cqw;
+        --space-2: 2.8cqh;
+        --space-3: 4cqh;
+        --dur-beat: 0.5s;
+        --ease-standard: cubic-bezier(0.215, 0.61, 0.355, 1);
+        --ease-emphasis: cubic-bezier(0.19, 1, 0.22, 1);
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(
+          ellipse at 50% 42%,
+          color-mix(in srgb, var(--surface) 88%, var(--accent-2)) 0%,
+          var(--bg) 72%
+        );
+      }
+
+      .mount-card {
+        width: 76%;
+        height: 50%;
+        left: 12%;
+        top: 25%;
+        container-type: size;
+        overflow: hidden;
+        border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
+        border-radius: calc(var(--radius) * 1.3);
+        background: var(--bg);
+        box-shadow: 0 4cqh 12cqh color-mix(in srgb, var(--bg) 68%, transparent);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="per-word-rise-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="3.5"
+      data-fps="30"
+    >
+      <div
+        id="per-word-rise-mount"
+        class="mount-card clip"
+        data-composition-id="per-word-rise"
+        data-composition-src="./per-word-rise.html"
+        data-variable-values='{"text":"EVERY FRAME MATTERS","split":"char","accent":"violet"}'
+        data-start="0"
+        data-duration="3.5"
+        data-track-index="0"
+        data-width="1459"
+        data-height="540"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      var tl = gsap.timeline({ paused: true });
+      tl.seek(0);
+      window.__timelines = window.__timelines || {};
+      window.__timelines["per-word-rise-demo"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/registry/components/per-word-rise/per-word-rise.html b/registry/components/per-word-rise/per-word-rise.html
new file mode 100644
index 0000000000..009cc6288b
--- /dev/null
+++ b/registry/components/per-word-rise/per-word-rise.html
@@ -0,0 +1,316 @@
+<!doctype html>
+<!--
+  per-word-rise: HyperFrames video primitive (text effects / reveal)
+
+  Words, or characters through the split variable, rise into place with a
+  controlled cascade and a small blur-to-sharp settle. Each unit lands with
+  a short overshoot-free settle tail (the final few pixels glide in over the
+  closing frames instead of stopping dead), then the finished line holds
+  truly still until the frame cuts (exit none) or departs with the optional
+  exit variable.
+
+  Variables:
+    - text (string, default "WORDS IN MOTION"): displayed text.
+    - split (word | char, default "word"): animated unit size.
+    - cues (string, default ""): comma-separated seconds (from mount start)
+      for each unit's landing. Empty keeps the authored cascade rhythm.
+    - accent (green | blue | violet, default "green"): text color.
+    - exit (none | fade | up, default "none"): optional departure.
+
+  Envelope, fixed IN and OUT with elastic HOLD only:
+    IN_BASE  = 1.45s, the full staggered rise and sharp settle (cues can
+               stretch the rise phase past IN_BASE when they land later)
+    HOLD     = max(0, D - IN - OUT), truly still: no drift
+    OUT_BASE = 0.50s staggered departure when exit is fade or up, 0s when
+               exit is none (the default: the line holds until the cut)
+    If D is shorter than IN_BASE + OUT_BASE, IN and OUT compress together.
+    The timeline is never time-scaled.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, has no data-width or data-height,
+  and registers one paused timeline under the literal per-word-rise key.
+-->
+<html
+  lang="en"
+  data-composition-id="per-word-rise"
+  data-composition-duration="3.5"
+  data-composition-variables='[
+    { "id": "text", "type": "string", "role": "content", "label": "Text", "description": "Text whose words or characters rise into place.", "default": "WORDS IN MOTION" },
+    { "id": "split", "type": "enum", "role": "content", "label": "Split", "description": "Animate the text as words or individual characters.", "default": "word", "options": [{ "value": "word", "label": "Word" }, { "value": "char", "label": "Character" }] },
+    { "id": "cues", "type": "string", "role": "timing", "label": "Cues", "description": "Comma-separated seconds (from mount start) for each unit landing. Empty keeps the authored cascade rhythm.", "default": "" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Contract accent token used for the text color.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the line holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Per Word Rise</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="per-word-rise" data-duration="3.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .pwr-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+            background: var(--bg, #0b0c0e);
+          }
+
+          .pwr-stage {
+            display: flex;
+            width: 88cqw;
+            max-width: 88cqw;
+            align-items: baseline;
+            justify-content: center;
+            flex-wrap: wrap;
+            column-gap: var(--space-1, 1.8cqw);
+            row-gap: var(--space-2, 2.8cqh);
+            color: var(--pwr-accent);
+            font-size: var(--pwr-font-size);
+            font-weight: 780;
+            line-height: 1.08;
+            letter-spacing: -0.035em;
+            text-align: center;
+          }
+
+          .pwr-stage.pwr-char {
+            column-gap: 0.045em;
+            letter-spacing: 0;
+          }
+
+          .pwr-unit {
+            display: inline-block;
+            flex: 0 0 auto;
+            filter: blur(var(--pwr-blur, 0cqh));
+            will-change: transform, filter, opacity;
+          }
+
+          .pwr-space {
+            width: 0.36em;
+          }
+        </style>
+
+        <div
+          id="per-word-rise-clip"
+          class="pwr-clip clip"
+          data-start="0"
+          data-duration="3.5"
+          data-track-index="0"
+        >
+          <div class="pwr-stage" role="img"></div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".pwr-stage");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var text = vars.text == null ? "WORDS IN MOTION" : String(vars.text);
+            var split = vars.split === "char" ? "char" : "word";
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+            var cuesValue = vars.cues == null ? "" : String(vars.cues);
+            var cues = cuesValue.split(",").reduce(function (result, token) {
+              var trimmed = token.trim();
+              if (trimmed === "") return result;
+              var seconds = Number(trimmed);
+              if (!Number.isFinite(seconds) || seconds < 0) return result;
+              result.push(seconds);
+              return result;
+            }, []);
+
+            root.style.setProperty("--pwr-accent", accentColors[accent]);
+            stage.classList.toggle("pwr-char", split === "char");
+            stage.setAttribute("aria-label", text);
+
+            var characterCount = Math.max(1, Array.from(text).length);
+            var fittedCqw = Math.min(9.5, 126 / characterCount);
+            root.style.setProperty(
+              "--pwr-font-size",
+              "min(" + fittedCqw.toFixed(3) + "cqw, 15cqh)",
+            );
+
+            var segments = split === "char" ? Array.from(text) : text.trim().split(/\s+/);
+            if (segments.length === 0) segments = [""];
+
+            var units = segments.map(function (segment, index) {
+              var unit = document.createElement("span");
+              unit.id = "per-word-rise-unit-" + index;
+              unit.className = "pwr-unit";
+              if (split === "char" && /\s/.test(segment)) {
+                unit.classList.add("pwr-space");
+                unit.textContent = "\u00a0";
+              } else {
+                unit.textContent = segment;
+              }
+              unit.setAttribute("aria-hidden", "true");
+              stage.appendChild(unit);
+              return unit;
+            });
+
+            var IN_BASE = 1.45;
+            var OUT_BASE = exit === "none" ? 0 : 0.5;
+            var RISE_BASE = 0.74;
+            var STAGGER_BASE = 0.62;
+            var EXIT_STAGGER_BASE = 0.14;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "3.5"));
+            var totalBase = Math.max(0.001, IN_BASE + OUT_BASE);
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var RISE = RISE_BASE * scale;
+            var STAGGER = units.length > 1 ? STAGGER_BASE * scale : 0;
+            var EXIT_STAGGER = units.length > 1 ? EXIT_STAGGER_BASE * scale : 0;
+            var EXIT_MOVE = Math.max(0.001, OUT - EXIT_STAGGER);
+
+            // Landing ease: overshoot-free decel with a settle tail. A plain
+            // power3.out slams from fast to imperceptible in ~2 frames and the
+            // words stop dead; this piecewise cubic keeps ~7% of the travel for
+            // the last 22% of the duration and is C1-continuous at the seam,
+            // so the word glides its final few pixels over the closing frames
+            // (a settle) with monotonic velocity: no stall, no hop, no
+            // overshoot. Pure function of progress, so it stays seek-safe.
+            var LAND_SPLIT = 0.78; // progress where the settle tail begins
+            var LAND_RESIDUAL = 0.07; // fraction of travel left for the tail
+            var LAND_SEAM_SLOPE = ((1 - LAND_RESIDUAL) / LAND_SPLIT) * 0.5; // shared velocity at the seam
+            function landEase(p) {
+              if (p <= 0) return 0;
+              if (p >= 1) return 1;
+              if (p < LAND_SPLIT) {
+                var x = p / LAND_SPLIT;
+                var inv = 1 - x;
+                // Half cubic-out, half linear: keeps end velocity for the seam.
+                return (1 - LAND_RESIDUAL) * (0.5 * (1 - inv * inv * inv) + 0.5 * x);
+              }
+              var u = (p - LAND_SPLIT) / (1 - LAND_SPLIT);
+              var b = LAND_SEAM_SLOPE * (1 - LAND_SPLIT);
+              var c = 3 * LAND_RESIDUAL - 2 * b;
+              var d = b - 2 * LAND_RESIDUAL;
+              return 1 - LAND_RESIDUAL + b * u + c * u * u + d * u * u * u;
+            }
+
+            // Cues own the word landings when provided; the authored cascade
+            // otherwise. Landings beyond the cue list extrapolate at the cue
+            // list's own gap, and every landing clamps ahead of any exit.
+            var riseEnd = IN;
+            var landings;
+            if (cues.length > 0) {
+              var lastCue = cues[cues.length - 1];
+              var cueGap =
+                cues.length >= 2
+                  ? Math.max(0.05, (lastCue - cues[0]) / (cues.length - 1))
+                  : RISE * 0.4;
+              var latestLanding = Math.max(RISE * 0.5, duration - OUT);
+              landings = units.map(function (unit, index) {
+                var landing =
+                  index < cues.length
+                    ? cues[index]
+                    : lastCue + (index - (cues.length - 1)) * cueGap;
+                return Math.min(latestLanding, Math.max(0.05, landing));
+              });
+              riseEnd = Math.min(duration - OUT, Math.max(IN, Math.max.apply(null, landings)));
+            } else {
+              // Authored cascade: same left-to-right wave the stagger drew,
+              // expressed as explicit landings so every unit gets the settle.
+              var step = units.length > 1 ? STAGGER / (units.length - 1) : 0;
+              landings = units.map(function (unit, index) {
+                return index * step + RISE;
+              });
+            }
+            var HOLD_START = riseEnd;
+            var HOLD = Math.max(0, duration - (HOLD_START + OUT));
+            var OUT_START = HOLD_START + HOLD;
+
+            gsap.set(units, { opacity: 0, y: "8cqh", "--pwr-blur": "1.4cqh" });
+
+            var tl = gsap.timeline({ paused: true });
+
+            units.forEach(function (unit, index) {
+              var landing = landings[index];
+              var startAt = Math.max(0, landing - RISE);
+              tl.to(
+                unit,
+                {
+                  opacity: 1,
+                  y: "0cqh",
+                  "--pwr-blur": "0cqh",
+                  duration: Math.max(0.08, landing - startAt),
+                  ease: landEase,
+                },
+                startAt,
+              );
+            });
+
+            // TRUE hold: the finished line is dead still until the exit or
+            // the cut. The old 0.55cqh drift was sub-perceptual at 1080p.
+
+            // OUT: optional departure; exit none holds until the frame cuts.
+            if (exit === "up") {
+              tl.to(
+                units,
+                {
+                  opacity: 0,
+                  y: "-4.5cqh",
+                  "--pwr-blur": "0.7cqh",
+                  duration: EXIT_MOVE,
+                  stagger: { amount: EXIT_STAGGER, from: "start" },
+                  ease: "power2.in",
+                },
+                OUT_START,
+              );
+            } else if (exit === "fade") {
+              tl.to(
+                units,
+                {
+                  opacity: 0,
+                  duration: EXIT_MOVE,
+                  stagger: { amount: EXIT_STAGGER, from: "start" },
+                  ease: "power2.in",
+                },
+                OUT_START,
+              );
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["per-word-rise"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/per-word-rise/registry-item.json b/registry/components/per-word-rise/registry-item.json
new file mode 100644
index 0000000000..fc7d4d3dcf
--- /dev/null
+++ b/registry/components/per-word-rise/registry-item.json
@@ -0,0 +1,76 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "per-word-rise",
+  "type": "hyperframes:component",
+  "title": "Per Word Rise",
+  "description": "Words or characters rise into place in a controlled blur-to-sharp cascade, settle softly on landing, and hold still until the cut (optional fade or up exit).",
+  "tags": ["motion-primitive", "text-effects", "typography", "stagger", "reveal"],
+  "jobs": ["reveal"],
+  "family": "text-effects",
+  "profile": "stagger",
+  "evidence": "Wave I I1 approved contract build, merging the per-word and SplitTypeReveal candidates",
+  "syncPoints": [{ "id": "rise-settle", "phase": "in", "offset": 1.45 }],
+  "files": [
+    {
+      "path": "per-word-rise.html",
+      "target": "compositions/components/per-word-rise.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "text",
+      "type": "string",
+      "role": "content",
+      "label": "Text",
+      "description": "Text whose words or characters rise into place.",
+      "default": "WORDS IN MOTION"
+    },
+    {
+      "id": "split",
+      "type": "enum",
+      "role": "content",
+      "label": "Split",
+      "description": "Animate the text as words or individual characters.",
+      "default": "word",
+      "options": [
+        { "value": "word", "label": "Word" },
+        { "value": "char", "label": "Character" }
+      ]
+    },
+    {
+      "id": "cues",
+      "type": "string",
+      "role": "timing",
+      "label": "Cues",
+      "description": "Comma-separated seconds (from mount start) for each unit landing. Empty keeps the authored cascade rhythm.",
+      "default": ""
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Contract accent token used for the text color.",
+      "default": "green",
+      "options": [
+        { "value": "green", "label": "Green" },
+        { "value": "blue", "label": "Blue" },
+        { "value": "violet", "label": "Violet" }
+      ]
+    },
+    {
+      "id": "exit",
+      "type": "enum",
+      "role": "timing",
+      "label": "Exit",
+      "description": "Optional departure. Default none: the line holds until the frame cuts.",
+      "default": "none",
+      "options": [
+        { "value": "none", "label": "None" },
+        { "value": "fade", "label": "Fade" },
+        { "value": "up", "label": "Up" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/perspective-marquee/demo.html b/registry/components/perspective-marquee/demo.html
new file mode 100644
index 0000000000..aad035f04d
--- /dev/null
+++ b/registry/components/perspective-marquee/demo.html
@@ -0,0 +1,94 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Perspective Marquee - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        /* ponytail: scale on wrapper — GSAP only targets the inner div, so CSS transform is safe here */
+        transform: scale(3);
+      }
+      .hf-remocn-perspective-marquee {
+        color: #18181b;
+        font-family: Inter, system-ui, sans-serif;
+        font-weight: 900;
+        letter-spacing: -0.04em;
+      }
+      .hf-remocn-perspective-marquee {
+        width: 580px;
+        perspective: 900px;
+        overflow: hidden;
+        transform: rotateX(18deg);
+      }
+      .hf-remocn-perspective-marquee div {
+        display: inline-flex;
+        gap: 22px;
+        white-space: nowrap;
+        transform: translateX(var(--hf-marquee-x, 0px));
+      }
+      .hf-remocn-perspective-marquee span {
+        padding: 12px 18px;
+        border-radius: 999px;
+        background: #18181b;
+        color: #fff;
+        font-size: 28px;
+        box-shadow: 0 18px 44px rgba(24, 24, 27, 0.18);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="perspective-marquee-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-perspective-marquee">
+          <div>
+            <span>COMPONENTS</span><span>PRIMITIVES</span><span>TRANSITIONS</span><span>AGENTS</span
+            ><span>COMPONENTS</span><span>PRIMITIVES</span><span>TRANSITIONS</span
+            ><span>AGENTS</span>
+          </div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-perspective-marquee div",
+          { "--hf-marquee-x": "0px" },
+          { "--hf-marquee-x": "-360px", duration: 4.5, ease: "none" },
+          startTime,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["perspective-marquee-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/perspective-marquee/perspective-marquee.html b/registry/components/perspective-marquee/perspective-marquee.html
new file mode 100644
index 0000000000..ec6bf3211a
--- /dev/null
+++ b/registry/components/perspective-marquee/perspective-marquee.html
@@ -0,0 +1,136 @@
+<!--
+  Perspective Marquee - remocn typography primitive for HyperFrames.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result as a custom property
+  the CSS above consumes. The timeline recipe below is untouched by them: it
+  keeps driving one horizontal offset, and these decide how far that offset
+  carries and what the strip looks like while it rolls.
+
+    - tilt (flat | standard | steep, default standard): how far the marquee
+      plane leans back toward the horizon. flat is almost head-on, steep sends
+      the strip deep into the frame.
+    - travel (short | standard | long, default standard): scales the offset the
+      timeline drives, so the strip covers a shorter or longer run in the same
+      time. short reads as a slow drift, long as a fast roll.
+    - tone (ink | paper | accent, default ink): pill colour. ink is near-black
+      with white type for light frames, paper near-white with dark type for
+      dark ones, accent rides the brand token.
+    - words (string, default COMPONENTS, PRIMITIVES, TRANSITIONS, AGENTS): the
+      comma separated list of pill labels. The list is laid down twice so the
+      strip still reads as a continuous loop.
+
+  On every default the result is identical to the original: four near-black
+  pills, laid down twice, rolling 360px left across an 18 degree tilt.
+-->
+
+<div
+  class="hf-remocn-perspective-marquee"
+  data-composition-variables='[
+    { "id": "tilt", "type": "enum", "role": "style", "label": "Tilt", "description": "How far the marquee plane leans back toward the horizon.", "default": "standard", "options": [{ "value": "flat", "label": "Flat" }, { "value": "standard", "label": "Standard" }, { "value": "steep", "label": "Steep" }] },
+    { "id": "travel", "type": "enum", "role": "motion", "label": "Travel", "description": "Scales the offset the timeline drives, so the strip covers a shorter or longer run in the same time.", "default": "standard", "options": [{ "value": "short", "label": "Short" }, { "value": "standard", "label": "Standard" }, { "value": "long", "label": "Long" }] },
+    { "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Pill colour: ink for light frames, paper for dark ones, accent rides the brand token.", "default": "ink", "options": [{ "value": "ink", "label": "Ink" }, { "value": "paper", "label": "Paper" }, { "value": "accent", "label": "Accent" }] },
+    { "id": "words", "type": "string", "role": "content", "label": "Words", "description": "Comma separated pill labels. The list is laid down twice so the strip still reads as a continuous loop.", "default": "COMPONENTS, PRIMITIVES, TRANSITIONS, AGENTS" }
+  ]'
+>
+  <div>
+    <span>COMPONENTS</span><span>PRIMITIVES</span><span>TRANSITIONS</span><span>AGENTS</span
+    ><span>COMPONENTS</span><span>PRIMITIVES</span><span>TRANSITIONS</span><span>AGENTS</span>
+  </div>
+</div>
+
+<style>
+  .hf-remocn-perspective-marquee {
+    color: #18181b;
+    font-family: Inter, system-ui, sans-serif;
+    font-weight: 900;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-perspective-marquee {
+    width: 720px;
+    perspective: 900px;
+    overflow: hidden;
+    transform: rotateX(var(--hf-marquee-tilt, 18deg));
+  }
+  .hf-remocn-perspective-marquee div {
+    display: inline-flex;
+    gap: 22px;
+    white-space: nowrap;
+    transform: translateX(calc(var(--hf-marquee-x, 0px) * var(--hf-marquee-reach, 1)));
+  }
+  .hf-remocn-perspective-marquee span {
+    padding: 12px 18px;
+    border-radius: 999px;
+    background: var(--hf-marquee-pill-bg, #18181b);
+    color: var(--hf-marquee-pill-fg, #fff);
+    font-size: 28px;
+    box-shadow: 0 18px 44px rgba(24, 24, 27, 0.18);
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    var tilts = { flat: "6deg", standard: "18deg", steep: "34deg" };
+    var reaches = { short: 0.55, standard: 1, long: 1.8 };
+    var tones = {
+      ink: { bg: "#18181b", fg: "#fff" },
+      paper: { bg: "#fafafa", fg: "#18181b" },
+      accent: { bg: "var(--brand, #34d399)", fg: "#fff" },
+    };
+    var defaultWords = "COMPONENTS, PRIMITIVES, TRANSITIONS, AGENTS";
+
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    function parseWords(value) {
+      var source = typeof value === "string" ? value : "";
+      var parts = source.split(",");
+      var words = [];
+      for (var i = 0; i < parts.length; i += 1) {
+        var word = parts[i].trim();
+        if (word) words.push(word);
+      }
+      return words.length ? words : parseWords(defaultWords);
+    }
+
+    var tilt = tilts[pick(tilts, vars.tilt, "standard")];
+    var reach = reaches[pick(reaches, vars.travel, "standard")];
+    var tone = tones[pick(tones, vars.tone, "ink")];
+    var words = parseWords(vars.words);
+
+    var roots = document.querySelectorAll(".hf-remocn-perspective-marquee");
+    for (var i = 0; i < roots.length; i += 1) {
+      roots[i].style.setProperty("--hf-marquee-tilt", tilt);
+      roots[i].style.setProperty("--hf-marquee-reach", String(reach));
+      roots[i].style.setProperty("--hf-marquee-pill-bg", tone.bg);
+      roots[i].style.setProperty("--hf-marquee-pill-fg", tone.fg);
+
+      var strip = roots[i].querySelector("div");
+      if (!strip) continue;
+      var markup = "";
+      for (var pass = 0; pass < 2; pass += 1) {
+        for (var w = 0; w < words.length; w += 1) {
+          markup += "<span>" + words[w].replace(/&/g, "&amp;").replace(/</g, "&lt;") + "</span>";
+        }
+      }
+      strip.innerHTML = markup;
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-perspective-marquee div', { '--hf-marquee-x': '0px' }, { '--hf-marquee-x': '-360px', duration: 4.5, ease: 'none' }, startTime);
+-->
diff --git a/registry/components/perspective-marquee/registry-item.json b/registry/components/perspective-marquee/registry-item.json
new file mode 100644
index 0000000000..99f5b37bd8
--- /dev/null
+++ b/registry/components/perspective-marquee/registry-item.json
@@ -0,0 +1,67 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "perspective-marquee",
+  "type": "hyperframes:component",
+  "title": "Perspective Marquee",
+  "description": "A 3D tilted marquee with depth feel as items roll toward the horizon.",
+  "tags": ["motion-primitive", "remocn-port", "typography"],
+  "files": [
+    {
+      "path": "perspective-marquee.html",
+      "target": "compositions/components/perspective-marquee.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "tilt",
+      "type": "enum",
+      "role": "style",
+      "label": "Tilt",
+      "description": "How far the marquee plane leans back toward the horizon.",
+      "default": "standard",
+      "options": [
+        { "value": "flat", "label": "Flat" },
+        { "value": "standard", "label": "Standard" },
+        { "value": "steep", "label": "Steep" }
+      ]
+    },
+    {
+      "id": "travel",
+      "type": "enum",
+      "role": "motion",
+      "label": "Travel",
+      "description": "Scales the offset the timeline drives, so the strip covers a shorter or longer run in the same time.",
+      "default": "standard",
+      "options": [
+        { "value": "short", "label": "Short" },
+        { "value": "standard", "label": "Standard" },
+        { "value": "long", "label": "Long" }
+      ]
+    },
+    {
+      "id": "tone",
+      "type": "enum",
+      "role": "style",
+      "label": "Tone",
+      "description": "Pill colour: ink for light frames, paper for dark ones, accent rides the brand token.",
+      "default": "ink",
+      "options": [
+        { "value": "ink", "label": "Ink" },
+        { "value": "paper", "label": "Paper" },
+        { "value": "accent", "label": "Accent" }
+      ]
+    },
+    {
+      "id": "words",
+      "type": "string",
+      "role": "content",
+      "label": "Words",
+      "description": "Comma separated pill labels. The list is laid down twice so the strip still reads as a continuous loop.",
+      "default": "COMPONENTS, PRIMITIVES, TRANSITIONS, AGENTS"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/perspective-marquee.png"
+  }
+}
diff --git a/registry/components/physical-exit/demo.html b/registry/components/physical-exit/demo.html
new file mode 100644
index 0000000000..a70111d1df
--- /dev/null
+++ b/registry/components/physical-exit/demo.html
@@ -0,0 +1,86 @@
+<!doctype html>
+<!--
+  physical-exit demo. This standalone composition mounts physical-exit.html
+  through data-composition-src. Non-default values select slide mode, replace
+  the card word, and switch the accent to prove all variables flow through the
+  mount while the primitive remains sized by its host box.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Physical Exit Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0b0c0e;
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --surface: #17191f;
+        --border: #343842;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-body: Inter, system-ui, sans-serif;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 42%, #1a1d24 0%, #0b0c0e 72%);
+      }
+
+      .mount-card {
+        width: 58%;
+        height: 58%;
+        left: 21%;
+        top: 21%;
+        container-type: size;
+        overflow: hidden;
+        border: 1px solid rgba(255, 255, 255, 0.12);
+        border-radius: 32px;
+        background: #111318;
+        box-shadow: 0 44px 110px rgba(0, 0, 0, 0.48);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="physical-exit-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="3"
+      data-fps="30"
+    >
+      <div
+        id="physical-exit-mount"
+        class="mount-card clip"
+        data-composition-id="physical-exit"
+        data-composition-src="./physical-exit.html"
+        data-variable-values='{"mode":"slide","text":"See you","accent":"violet"}'
+        data-start="0"
+        data-duration="3"
+        data-track-index="0"
+        data-width="1114"
+        data-height="626"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["physical-exit-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/physical-exit/physical-exit.html b/registry/components/physical-exit/physical-exit.html
new file mode 100644
index 0000000000..e17aa7c074
--- /dev/null
+++ b/registry/components/physical-exit/physical-exit.html
@@ -0,0 +1,247 @@
+<!doctype html>
+<!--
+  physical-exit: HyperFrames video primitive (motion / exit / physical)
+
+  Concept: one card leaves the frame with visible momentum. The mode variable
+  owns the exit behavior: toss follows an arc, drop accelerates under gravity,
+  and slide stretches at peak lateral speed. Every mode carries rotation into
+  its final offscreen pose. The card never fades during its exit.
+
+  Variables:
+    - mode (toss | drop | slide, default toss): the physical exit behavior.
+    - text (string, default "Later"): the word displayed on the card.
+    - accent (green | blue | violet, default green): the card edge color.
+
+  Envelope (fixed IN and OUT, elastic HOLD only, never timeScale):
+    IN_BASE  = 0.45s  the card settles into its resting pose
+    HOLD     = elastic = max(0, D - (IN_BASE + OUT_BASE)); subtle drift
+    OUT_BASE = 0.85s  the selected physical exit carries the card offscreen
+    If D is shorter than IN_BASE + OUT_BASE, IN and OUT compress together and
+    HOLD becomes zero.
+
+  Mount contract: this file is a template-wrapped sub-composition. The runtime
+  clones only the template contents. #root fills the host box, establishes the
+  container query basis, has no data-width or data-height, and registers one
+  paused timeline under the hardcoded physical-exit id.
+-->
+<html
+  lang="en"
+  data-composition-id="physical-exit"
+  data-composition-duration="3"
+  data-composition-variables='[
+    { "id": "mode", "type": "enum", "role": "motion", "label": "Exit mode", "description": "Physical behavior used to carry the card offscreen.", "default": "toss", "options": [{ "value": "toss", "label": "Toss" }, { "value": "drop", "label": "Drop" }, { "value": "slide", "label": "Slide" }] },
+    { "id": "text", "type": "string", "role": "content", "label": "Card text", "description": "Word displayed on the exiting card.", "default": "Later" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Color applied to the card edge.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Physical Exit</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="physical-exit" data-duration="3" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .pe-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+          }
+
+          .pe-card {
+            position: relative;
+            display: grid;
+            place-items: center;
+            width: 58cqw;
+            min-height: 32cqh;
+            padding: 5cqh 6cqw;
+            overflow: hidden;
+            border: 0.22cqmin solid color-mix(in srgb, var(--pe-accent) 62%, #ffffff);
+            border-radius: 4cqmin;
+            background: #f8fafc;
+            box-shadow:
+              0 2.4cqh 7cqh color-mix(in srgb, #020617 48%, transparent),
+              inset 1.2cqw 0 0 var(--pe-accent);
+            color: #0b0c0e;
+            transform-origin: 50% 50%;
+            will-change: transform;
+          }
+
+          .pe-label {
+            display: block;
+            max-width: 48cqw;
+            overflow: hidden;
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: 11cqmin;
+            font-weight: 760;
+            line-height: 1;
+            letter-spacing: -0.045em;
+            text-align: center;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+        </style>
+
+        <div
+          id="physical-exit-clip"
+          class="pe-clip clip"
+          data-start="0"
+          data-duration="3"
+          data-track-index="0"
+        >
+          <div class="pe-card">
+            <span class="pe-label"></span>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var card = root.querySelector(".pe-card");
+            var label = root.querySelector(".pe-label");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var mode = vars.mode === "drop" || vars.mode === "slide" ? vars.mode : "toss";
+            var text = vars.text == null ? "Later" : String(vars.text);
+            var accent = vars.accent === "blue" || vars.accent === "violet" ? vars.accent : "green";
+            var accentColors = {
+              green: "var(--brand, #34d399)",
+              blue: "var(--accent, #60a5fa)",
+              violet: "var(--accent-2, #a78bfa)",
+            };
+
+            label.textContent = text;
+            card.style.setProperty("--pe-accent", accentColors[accent]);
+
+            var IN_BASE = 0.45;
+            var OUT_BASE = 0.85;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "3"));
+            var baseDuration = IN_BASE + OUT_BASE;
+            var envelopeScale = duration < baseDuration ? duration / baseDuration : 1;
+            var IN = IN_BASE * envelopeScale;
+            var OUT = OUT_BASE * envelopeScale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var HOLD_START = IN;
+            var OUT_START = IN + HOLD;
+
+            var tl = gsap.timeline({ paused: true });
+
+            tl.fromTo(
+              card,
+              { y: "4cqh", scale: 0.98, rotation: -1 },
+              { y: 0, scale: 1, rotation: 0, duration: IN, ease: "power2.out" },
+              0,
+            );
+
+            if (HOLD > 0) {
+              tl.to(
+                card,
+                {
+                  y: "-0.7cqh",
+                  rotation: 0.5,
+                  duration: HOLD / 2,
+                  ease: "sine.inOut",
+                  yoyo: true,
+                  repeat: 1,
+                },
+                HOLD_START,
+              );
+            }
+
+            if (mode === "drop") {
+              tl.to(
+                card,
+                {
+                  y: "108cqh",
+                  rotation: 9,
+                  duration: OUT,
+                  ease: "power2.in",
+                },
+                OUT_START,
+              );
+            } else if (mode === "slide") {
+              var slidePeak = OUT * 0.72;
+              tl.to(
+                card,
+                {
+                  x: "90cqw",
+                  skewX: -12,
+                  scaleX: 1.08,
+                  rotation: -2,
+                  duration: slidePeak,
+                  ease: "power4.in",
+                },
+                OUT_START,
+              );
+              tl.to(
+                card,
+                {
+                  x: "125cqw",
+                  skewX: -3,
+                  scaleX: 1,
+                  rotation: -5,
+                  duration: OUT - slidePeak,
+                  ease: "power4.out",
+                },
+                OUT_START + slidePeak,
+              );
+            } else {
+              var tossApex = OUT * 0.42;
+              tl.to(
+                card,
+                {
+                  x: "34cqw",
+                  y: "-36cqh",
+                  rotation: 8,
+                  duration: tossApex,
+                  ease: "power3.out",
+                },
+                OUT_START,
+              );
+              tl.to(
+                card,
+                {
+                  x: "118cqw",
+                  y: "86cqh",
+                  rotation: 18,
+                  duration: OUT - tossApex,
+                  ease: "power2.in",
+                },
+                OUT_START + tossApex,
+              );
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["physical-exit"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/physical-exit/registry-item.json b/registry/components/physical-exit/registry-item.json
new file mode 100644
index 0000000000..9f6d369199
--- /dev/null
+++ b/registry/components/physical-exit/registry-item.json
@@ -0,0 +1,55 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "physical-exit",
+  "type": "hyperframes:component",
+  "title": "Physical Exit",
+  "description": "A card exits with physical momentum in toss, drop, or slide mode, carrying acceleration and rotation through the final offscreen pose without fading.",
+  "tags": ["motion-primitive", "exit", "momentum", "toss", "drop", "slide"],
+  "jobs": ["exit"],
+  "family": "motion",
+  "profile": "physical",
+  "evidence": "Video Primitives Wave F U13 physical-exit specification",
+  "files": [
+    {
+      "path": "physical-exit.html",
+      "target": "compositions/components/physical-exit.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "mode",
+      "type": "enum",
+      "role": "motion",
+      "label": "Exit mode",
+      "description": "Physical behavior used to carry the card offscreen.",
+      "default": "toss",
+      "options": [
+        { "value": "toss", "label": "Toss" },
+        { "value": "drop", "label": "Drop" },
+        { "value": "slide", "label": "Slide" }
+      ]
+    },
+    {
+      "id": "text",
+      "type": "string",
+      "role": "content",
+      "label": "Card text",
+      "description": "Word displayed on the exiting card.",
+      "default": "Later"
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Color applied to the card edge.",
+      "default": "green",
+      "options": [
+        { "value": "green", "label": "Green" },
+        { "value": "blue", "label": "Blue" },
+        { "value": "violet", "label": "Violet" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/press-ripple/README.md b/registry/components/press-ripple/README.md
new file mode 100644
index 0000000000..e66a885165
--- /dev/null
+++ b/registry/components/press-ripple/README.md
@@ -0,0 +1,78 @@
+# press-ripple
+
+Product demo payoff primitive: a cursor decel-arrives from off-stage (power2.out,
+it arrives, it never passes through), lands a few px off-center on a
+caller-positioned target zone, target and cursor compress in lockstep, release
+with two ink ripple rings, then the cursor exits off-stage the way it came. The
+pressed state and the ripple aftermath hold dead-still to the end of the clip;
+the cursor never occludes the label during the hold. 3s authored, elastic HOLD
+(never time-scaled).
+
+## Mounting
+
+```html
+<div
+  class="clip"
+  data-composition-id="press-ripple"
+  data-composition-src="./components/press-ripple.html"
+  data-variable-values='{"label":"Approve run","target_x":62,"target_y":58,"accent":"blue"}'
+  data-start="0"
+  data-duration="3"
+  data-track-index="0"
+></div>
+```
+
+## Variables
+
+| id       | type   | default       | notes                                                                                                                                                              |
+| -------- | ------ | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| label    | string | "Get started" | Text in the default pill. Ignored when the slot is replaced.                                                                                                       |
+| target_x | number | 50            | Zone center, percent of host width (8 to 92).                                                                                                                      |
+| target_y | number | 50            | Zone center, percent of host height (8 to 92).                                                                                                                     |
+| press_at | number | 1.4           | Seconds from mount start when the compression begins. Clamped so the press tail (release, ripple, cursor exit, ~1.05s) and any exit stay inside the clip duration. |
+| cursor   | enum   | light         | light (white pointer, dark stroke) or dark (inverse).                                                                                                              |
+| accent   | enum   | green         | green maps to --brand, blue to --accent, violet to --accent-2. Colors the ripple ink and the pressed fill.                                                         |
+| exit     | enum   | none          | none holds the pressed state (frame roots own transitions); fade or up add a 0.45s departure.                                                                      |
+
+## Target slot
+
+The element marked `data-slot="target"` is the press surface. Its default child
+is a token-styled pill (`--surface` body, `--border` edge, `--font-body` at
+weight 600) carrying `label`. Replace the slot's children in your installed copy
+to press anything else: an icon button, a card, a toggle.
+
+The slot wrapper flips `data-state="idle"` to `data-state="pressed"` at the
+press (seek-safe: scrubbing backwards restores idle). Custom slot content can
+key its own pressed look off that attribute, mirroring the default rule:
+
+```css
+.pr-target-slot[data-state="pressed"] .my-thing {
+  /* pressed look */
+}
+```
+
+## Choreography
+
+- 0.00s: target settles in (fade + short rise, power3.out).
+- press_at - 0.94s: cursor departs off-stage bottom-right, decelerating the
+  whole way, tip landing slightly below-right of the zone center (human aim).
+- press_at: target and cursor compress to 0.93 in lockstep (cursor scales
+  about its tip).
+- press_at + 0.12s: pressed state lands; release springs back (back.out) while
+  two thick ink rings (accent mixed toward `--fg` for contrast) ripple out from
+  under the slot, 0.11s apart.
+- press_at + 0.5s: the cursor exits off-stage bottom-right (power2.in,
+  accelerating away), clearing the label before the hold begins.
+- HOLD: dead still on the pressed state, elastic with the clip duration; the
+  pressed control and the ripple aftermath carry the frame, cursor gone.
+
+Sync point `press` fires the moment compression starts; align SFX or a
+downstream reveal to it.
+
+## Known tripwire
+
+The bundler mirrors composition variables as scoped CSS custom properties, so
+this unit's own `accent` variable becomes `--accent: blue` inside its subtree,
+shadowing the contract token (and `blue` is a valid CSS color). The script
+detects the shadow and substitutes the literal contract fallback for the blue
+mapping, so `accent: "blue"` renders the soft contract blue, not pure blue.
diff --git a/registry/components/press-ripple/demo.html b/registry/components/press-ripple/demo.html
new file mode 100644
index 0000000000..8d33add162
--- /dev/null
+++ b/registry/components/press-ripple/demo.html
@@ -0,0 +1,84 @@
+<!doctype html>
+<!--
+  press-ripple demo. Control-feedback story (distinct from oversized-cursor's
+  cursor-journey beat): the press happens early (0.9s), the cursor exits the
+  frame right after the release, and the pressed control + the ripple
+  aftermath carry the remaining hold. The subject is the control's state
+  change, not the pointer.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>press-ripple Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #f4f6f9);
+      }
+
+      #root {
+        --bg: #f4f6f9;
+        --fg: #14161b;
+        --surface: #ffffff;
+        --border: #dfe4ec;
+        --brand: #1d4ed8;
+        --accent: #0284c7;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 40%, #ffffff 0%, var(--bg, #f4f6f9) 70%);
+      }
+
+      .mount-stage {
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        container-type: size;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="press-ripple-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="3"
+      data-fps="30"
+    >
+      <div
+        id="press-ripple-mount"
+        class="mount-stage clip"
+        data-composition-id="press-ripple"
+        data-composition-src="./press-ripple.html"
+        data-variable-values='{"label":"Save changes","target_x":50,"target_y":52,"press_at":0.9,"cursor":"dark","accent":"green"}'
+        data-start="0"
+        data-duration="3"
+        data-track-index="0"
+        data-width="1920"
+        data-height="1080"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["press-ripple-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/press-ripple/press-ripple.html b/registry/components/press-ripple/press-ripple.html
new file mode 100644
index 0000000000..e4a7d8a1b6
--- /dev/null
+++ b/registry/components/press-ripple/press-ripple.html
@@ -0,0 +1,373 @@
+<!doctype html>
+<!--
+  press-ripple: HyperFrames video primitive (product demo / payoff)
+
+  A cursor decel-arrives from off-stage (power2.out, it arrives, never passes
+  through), lands a few px off-center on a caller-positioned target zone, the
+  target and cursor compress in lockstep, release with two ink ripple rings,
+  then the cursor exits off-stage the way it came. The pressed state and the
+  ripple aftermath carry the hold; the cursor never camps on the label.
+
+  The target is a slot: the element marked data-slot="target" is the press
+  surface. Its default content is a token-styled pill carrying the label
+  variable; replace the slot's children to press anything else. The slot
+  wrapper flips data-state="idle" to data-state="pressed" at the press, so
+  custom slot content can style its own pressed look.
+
+  Variables:
+    label: text inside the default pill (ignored when the slot is replaced)
+    target_x, target_y: zone center as a percent of the host box
+    press_at: seconds from mount start when the compression begins
+    cursor: light or dark pointer
+    accent: green, blue, or violet ink (ripple rings + pressed pill fill)
+    exit: none, fade, or up (default none; holds end films)
+
+  Envelope (elastic HOLD, never time-scaled):
+    IN   = entrance settle, cursor arrival, press, release ripple, cursor exit
+    HOLD = the rest of D, completely still on the pressed state
+    OUT  = none by default; 0.45s fade or fade-up when exit is set
+    press_at clamps into the window that keeps the whole gesture inside D.
+
+  Sync point: the press lands at press_at (default 1.4s).
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, has no data-width or data-height,
+  and registers one paused timeline under the literal press-ripple key.
+-->
+<html
+  lang="en"
+  data-composition-id="press-ripple"
+  data-composition-duration="3"
+  data-composition-variables='[
+    { "id": "label", "type": "string", "role": "content", "label": "Label", "description": "Text inside the default pill target.", "default": "Get started" },
+    { "id": "target_x", "type": "number", "role": "layout", "label": "Target X", "description": "Zone center, percent of host width.", "default": 50, "min": 8, "max": 92, "step": 1, "unit": "%" },
+    { "id": "target_y", "type": "number", "role": "layout", "label": "Target Y", "description": "Zone center, percent of host height.", "default": 50, "min": 8, "max": 92, "step": 1, "unit": "%" },
+    { "id": "press_at", "type": "number", "role": "timing", "label": "Press at", "description": "Seconds from mount start when the press begins.", "default": 1.4, "min": 0.9, "max": 10, "step": 0.1, "unit": "s" },
+    { "id": "cursor", "type": "enum", "role": "style", "label": "Cursor", "description": "Pointer tone.", "default": "light", "options": [{ "value": "light", "label": "Light" }, { "value": "dark", "label": "Dark" }] },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Contract color for the ripple ink and pressed fill.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "style", "label": "Exit", "description": "How the frame leaves. None holds the pressed state.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Fade up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Press Ripple</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="press-ripple" data-duration="3" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .pr-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            background: var(--bg, #0b0c0e);
+          }
+
+          .pr-stage {
+            position: absolute;
+            inset: 0;
+          }
+
+          /* Caller-positioned target zone; --pr-x / --pr-y come from the
+             target_x / target_y variables. */
+          .pr-zone {
+            position: absolute;
+            left: calc(var(--pr-x, 50) * 1cqw);
+            top: calc(var(--pr-y, 50) * 1cqh);
+            transform: translate(-50%, -50%);
+          }
+
+          /* Ink ripple rings, centered under the slot, hidden until release.
+             The ink mixes the accent toward --fg so the rings carry real
+             weight against the host background on both light and dark
+             themes; thickness reads as drawn ink, not a hairline. */
+          .pr-ring {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            width: 20cqmin;
+            height: 20cqmin;
+            margin: -10cqmin 0 0 -10cqmin;
+            border: 0.85cqmin solid
+              color-mix(in srgb, var(--pr-accent, #71f5a7) 72%, var(--fg, #f8fafc));
+            border-radius: 50%;
+            opacity: 0;
+            will-change: transform, opacity;
+          }
+
+          /* GSAP owns this wrapper's opacity/y (entrance) and scale (press). */
+          .pr-actor {
+            position: relative;
+            will-change: transform, opacity;
+          }
+
+          .pr-pill {
+            display: inline-flex;
+            align-items: center;
+            padding: var(--space-2, 2.6cqmin) calc(var(--space-2, 2.6cqmin) * 2.1);
+            border: 0.22cqmin solid var(--border, #343a46);
+            border-radius: 999px;
+            background: var(--surface, #14171c);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            font-size: 4.6cqmin;
+            font-weight: 600;
+            line-height: 1;
+            letter-spacing: -0.015em;
+            white-space: nowrap;
+          }
+
+          .pr-target-slot[data-state="pressed"] .pr-pill {
+            border-color: color-mix(in srgb, var(--pr-accent, #71f5a7) 72%, var(--fg, #f8fafc));
+            background: var(--pr-accent, #71f5a7);
+            color: var(--bg, #0b0c0e);
+          }
+
+          /* Pointer: SVG tip sits exactly at this box's top-left corner, so
+             the box position places the tip itself. GSAP moves it with x/y
+             transforms only (never left/top: layout props snap to integer
+             device pixels under the seek-by-frame capture engine) and scales
+             it about the tip (press). */
+          .pr-cursor {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 7cqmin;
+            height: 7cqmin;
+            transform-origin: 0 0;
+            filter: drop-shadow(0 0.4cqmin 0.9cqmin rgba(2, 6, 23, 0.45));
+            will-change: transform, opacity;
+          }
+
+          .pr-cursor svg {
+            display: block;
+            width: 100%;
+            height: 100%;
+          }
+        </style>
+
+        <div
+          id="press-ripple-clip"
+          class="pr-clip clip"
+          data-start="0"
+          data-duration="3"
+          data-track-index="0"
+        >
+          <div class="pr-stage">
+            <div class="pr-zone">
+              <div class="pr-ring" aria-hidden="true"></div>
+              <div class="pr-ring" aria-hidden="true"></div>
+              <div class="pr-actor">
+                <div class="pr-target-slot" data-slot="target" data-state="idle">
+                  <span class="pr-pill"></span>
+                </div>
+              </div>
+            </div>
+            <div class="pr-cursor" aria-hidden="true">
+              <svg viewBox="0 0 20 20">
+                <path
+                  class="pr-cursor-path"
+                  d="M0.6 0.6 L0.6 14.6 L4.4 11.3 L6.7 16.8 L9.4 15.6 L7.1 10.2 L12.4 9.8 Z"
+                  stroke-width="1.1"
+                  stroke-linejoin="round"
+                ></path>
+              </svg>
+            </div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".pr-stage");
+            var zone = root.querySelector(".pr-zone");
+            var rings = root.querySelectorAll(".pr-ring");
+            var actor = root.querySelector(".pr-actor");
+            var slot = root.querySelector(".pr-target-slot");
+            var pill = root.querySelector(".pr-pill");
+            var cursor = root.querySelector(".pr-cursor");
+            var cursorPath = root.querySelector(".pr-cursor-path");
+
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            function num(value, fallback, min, max) {
+              var n = Number(value);
+              if (!isFinite(n)) n = fallback;
+              return Math.min(max, Math.max(min, n));
+            }
+
+            var labelText =
+              vars.label == null ? "Get started" : String(vars.label).trim().replace(/\s+/g, " ");
+            var targetX = num(vars.target_x, 50, 8, 92);
+            var targetY = num(vars.target_y, 50, 8, 92);
+            var cursorTone = vars.cursor === "dark" ? "dark" : "light";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            // The bundler mirrors composition variables as scoped CSS custom
+            // props, so this unit's own accent variable shadows the contract
+            // --accent token inside the subtree ("blue" is a valid CSS color
+            // and would render pure blue). When the shadow is present, fall
+            // back to the literal contract value instead of var(--accent).
+            var computedAccent = getComputedStyle(root).getPropertyValue("--accent").trim();
+            if (
+              computedAccent === "green" ||
+              computedAccent === "blue" ||
+              computedAccent === "violet"
+            ) {
+              accentColors.blue = "#61a8ff";
+            }
+
+            pill.textContent = labelText;
+            root.style.setProperty("--pr-accent", accentColors[accent]);
+            root.style.setProperty("--pr-x", String(targetX));
+            root.style.setProperty("--pr-y", String(targetY));
+            if (cursorTone === "dark") {
+              cursorPath.setAttribute("fill", "#111827");
+              cursorPath.setAttribute("stroke", "#f8fafc");
+            } else {
+              cursorPath.setAttribute("fill", "#f8fafc");
+              cursorPath.setAttribute("stroke", "#0f172a");
+            }
+
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "3"));
+            var OUT = exit === "none" ? 0 : 0.45;
+            // The whole press tail (compress + release ripple + cursor exit)
+            // is ~1.05s; keep it inside D, then keep the OUT window after it.
+            var pressAt = num(vars.press_at, 1.4, 0.9, Math.max(0.9, duration - 1.05 - OUT));
+            // Human aim: the tip lands a few px off the zone's true center.
+            var landX = targetX + 0.55;
+            var landY = targetY + 0.85;
+            var arriveEnd = pressAt - 0.16;
+            var arriveStart = Math.max(0, arriveEnd - 0.78);
+
+            // Motion runs on transforms only (x/y px), never left/top: layout
+            // props snap to integer device pixels under the seek-by-frame
+            // capture engine. Stage size is read once, synchronously, at load
+            // (deterministic: fixed viewport per render) to convert the
+            // percent-based land/off-stage positions into px.
+            var stageW = root.clientWidth || 1920;
+            var stageH = root.clientHeight || 1080;
+            function xAt(percent) {
+              return (percent / 100) * stageW;
+            }
+            function yAt(percent) {
+              return (percent / 100) * stageH;
+            }
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: target settles in.
+            tl.fromTo(
+              actor,
+              { opacity: 0, y: "2.6cqh" },
+              { opacity: 1, y: 0, duration: 0.5, ease: "power3.out" },
+              0,
+            );
+
+            // Cursor decel-arrives from off-stage bottom-right. power2.out to
+            // an exact endpoint: it arrives, it never passes through.
+            tl.fromTo(
+              cursor,
+              { x: xAt(114), y: yAt(112) },
+              {
+                x: xAt(landX),
+                y: yAt(landY),
+                duration: arriveEnd - arriveStart,
+                ease: "power2.out",
+              },
+              arriveStart,
+            );
+
+            // Press: target and cursor compress in lockstep (cursor about its
+            // tip), then release with a soft spring.
+            tl.to([actor, cursor], { scale: 0.93, duration: 0.12, ease: "power1.in" }, pressAt);
+            tl.set(slot, { attr: { "data-state": "pressed" } }, pressAt + 0.12);
+            tl.to(
+              [actor, cursor],
+              { scale: 1, duration: 0.42, ease: "back.out(1.8)" },
+              pressAt + 0.14,
+            );
+
+            // Ink ripple rings from under the slot: real weight (thick ink,
+            // fg-mixed contrast, wide travel), still just two rings.
+            tl.fromTo(
+              rings,
+              { scale: 0.16, autoAlpha: 0.95 },
+              {
+                scale: 2.6,
+                autoAlpha: 0,
+                duration: 0.66,
+                ease: "power2.out",
+                stagger: 0.11,
+                immediateRender: false,
+              },
+              pressAt + 0.1,
+            );
+
+            // The cursor exits off-stage after the release (accelerating,
+            // power2.in) so it never occludes the label during the hold; the
+            // pressed state and the ripple aftermath carry the frame. Both
+            // endpoints are explicit so reverse seeks restore the landing.
+            tl.fromTo(
+              cursor,
+              { x: xAt(landX), y: yAt(landY) },
+              {
+                x: xAt(112),
+                y: yAt(110),
+                duration: 0.55,
+                ease: "power2.in",
+                immediateRender: false,
+              },
+              pressAt + 0.5,
+            );
+
+            // HOLD: dead-still on the pressed state; elastic with D.
+
+            // OUT: only when the host opts in; frame roots own transitions.
+            if (exit !== "none") {
+              var outStart = Math.max(pressAt + 1.05, duration - OUT);
+              var outVars = { opacity: 0, duration: OUT, ease: "power2.in" };
+              if (exit === "up") outVars.y = "-4cqh";
+              tl.to(stage, outVars, outStart);
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["press-ripple"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/press-ripple/registry-item.json b/registry/components/press-ripple/registry-item.json
new file mode 100644
index 0000000000..0fe7aeb80c
--- /dev/null
+++ b/registry/components/press-ripple/registry-item.json
@@ -0,0 +1,104 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "press-ripple",
+  "type": "hyperframes:component",
+  "title": "Press Ripple",
+  "description": "A cursor decel-arrives from off-stage, lands slightly off-center on a caller-positioned target, compresses with it in lockstep, releases with ink ripple rings, then exits off-stage while the pressed state holds.",
+  "tags": ["motion-primitive", "product-demo", "cursor", "press", "ripple", "payoff"],
+  "jobs": ["demonstrate"],
+  "family": "product-demo",
+  "profile": "payoff",
+  "evidence": "Wave J J1-1: the recurring launch-film press mechanic (decelerating cursor arrival, lockstep compression, ink ripple release) generalized behind a target slot",
+  "syncPoints": [{ "id": "press", "phase": "in", "offset": 1.4 }],
+  "files": [
+    {
+      "path": "press-ripple.html",
+      "target": "compositions/components/press-ripple.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "label",
+      "type": "string",
+      "role": "content",
+      "label": "Label",
+      "description": "Text inside the default pill target.",
+      "default": "Get started"
+    },
+    {
+      "id": "target_x",
+      "type": "number",
+      "role": "layout",
+      "label": "Target X",
+      "description": "Zone center, percent of host width.",
+      "default": 50,
+      "min": 8,
+      "max": 92,
+      "step": 1,
+      "unit": "%"
+    },
+    {
+      "id": "target_y",
+      "type": "number",
+      "role": "layout",
+      "label": "Target Y",
+      "description": "Zone center, percent of host height.",
+      "default": 50,
+      "min": 8,
+      "max": 92,
+      "step": 1,
+      "unit": "%"
+    },
+    {
+      "id": "press_at",
+      "type": "number",
+      "role": "timing",
+      "label": "Press at",
+      "description": "Seconds from mount start when the press begins.",
+      "default": 1.4,
+      "min": 0.9,
+      "max": 10,
+      "step": 0.1,
+      "unit": "s"
+    },
+    {
+      "id": "cursor",
+      "type": "enum",
+      "role": "style",
+      "label": "Cursor",
+      "description": "Pointer tone.",
+      "default": "light",
+      "options": [
+        { "value": "light", "label": "Light" },
+        { "value": "dark", "label": "Dark" }
+      ]
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Contract color for the ripple ink and pressed fill.",
+      "default": "green",
+      "options": [
+        { "value": "green", "label": "Green" },
+        { "value": "blue", "label": "Blue" },
+        { "value": "violet", "label": "Violet" }
+      ]
+    },
+    {
+      "id": "exit",
+      "type": "enum",
+      "role": "style",
+      "label": "Exit",
+      "description": "How the frame leaves. None holds the pressed state.",
+      "default": "none",
+      "options": [
+        { "value": "none", "label": "None" },
+        { "value": "fade", "label": "Fade" },
+        { "value": "up", "label": "Fade up" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/pull-back-reveal/demo.html b/registry/components/pull-back-reveal/demo.html
new file mode 100644
index 0000000000..d83a8b052e
--- /dev/null
+++ b/registry/components/pull-back-reveal/demo.html
@@ -0,0 +1,87 @@
+<!doctype html>
+<!--
+  pull-back-reveal demo. This standalone composition mounts the primitive
+  through data-composition-src. Non-default copy and accent prove all three
+  variables flow through the host-sized mount.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Pull Back Reveal Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0b0c0e;
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --muted: #a7b0c0;
+        --surface: #1b2230;
+        --border: #3b4558;
+        --radius: 2.4cqw;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-body: Inter, system-ui, sans-serif;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 44%, #171c28 0%, #0b0c0e 72%);
+      }
+
+      .mount-card {
+        width: 78%;
+        height: 74%;
+        left: 11%;
+        top: 13%;
+        container-type: size;
+        overflow: hidden;
+        border: 0.1cqw solid rgba(148, 163, 184, 0.26);
+        border-radius: 2.2cqw;
+        background: var(--bg);
+        box-shadow: 0 5cqh 12cqh rgba(0, 0, 0, 0.56);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="pull-back-reveal-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4.5"
+      data-fps="30"
+    >
+      <div
+        id="pull-back-reveal-mount"
+        class="mount-card clip"
+        data-composition-id="pull-back-reveal"
+        data-composition-src="./pull-back-reveal.html"
+        data-variable-values='{"detail_text":"+428%","headline":"Momentum scales","accent":"violet"}'
+        data-start="0"
+        data-duration="4.5"
+        data-track-index="0"
+        data-width="1498"
+        data-height="799"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["pull-back-reveal-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/pull-back-reveal/pull-back-reveal.html b/registry/components/pull-back-reveal/pull-back-reveal.html
new file mode 100644
index 0000000000..124b520db9
--- /dev/null
+++ b/registry/components/pull-back-reveal/pull-back-reveal.html
@@ -0,0 +1,336 @@
+<!doctype html>
+<!--
+  pull-back-reveal: HyperFrames video primitive (camera / reveal / recontextualize)
+
+  Concept: the frame starts tight on one stat chip, pauses long enough to
+  establish it as the subject, then pulls back to reveal the headline and two
+  supporting cards that give the stat its meaning. The chip remains the same
+  DOM element for the entire move.
+
+  Variables:
+    - detail_text (string, default "+312%"): the stat inside the focus chip.
+    - headline (string, default "Growth compounds"): the scene headline.
+    - accent (green | blue | violet, default "green"): the scene highlight.
+
+  Envelope (fixed IN, elastic HOLD, no OUT, never gsap.timeScale()):
+    IN_BASE  = 2.40s  tight hold, whip-out pull-back, then a short drift settle
+    HOLD     = elastic full-scene hold with a restrained shadow breath
+    OUT_BASE = 0s     the reveal establishes the final composed scene
+    If D is shorter than IN_BASE, the three IN beats compress together and
+    HOLD becomes zero. Longer mounts stretch HOLD only.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, has no data-width or data-height,
+  and registers one paused timeline under the hardcoded pull-back-reveal id.
+-->
+<html
+  lang="en"
+  data-composition-id="pull-back-reveal"
+  data-composition-duration="4.5"
+  data-composition-variables='[
+    { "id": "detail_text", "type": "string", "role": "content", "label": "Detail text", "description": "Stat shown in the detail chip at the center of the reveal.", "default": "+312%" },
+    { "id": "headline", "type": "string", "role": "content", "label": "Headline", "description": "Headline revealed around the focused detail.", "default": "Growth compounds" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Highlight color used across the composed scene.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Pull Back Reveal</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="pull-back-reveal" data-duration="4.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            background: var(--bg, #0b0c0e);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .pbr-clip,
+          .pbr-world {
+            position: absolute;
+            inset: 0;
+          }
+
+          .pbr-clip {
+            overflow: hidden;
+            background: var(--bg, #0b0c0e);
+          }
+
+          .pbr-world {
+            overflow: hidden;
+            transform-origin: 50% 50%;
+            background:
+              radial-gradient(
+                circle at 48% 50%,
+                color-mix(in srgb, var(--pbr-accent) 19%, transparent),
+                transparent 27%
+              ),
+              linear-gradient(
+                145deg,
+                color-mix(in srgb, var(--surface, #18202d) 82%, var(--bg, #0b0c0e)),
+                var(--bg, #0b0c0e) 72%
+              );
+            will-change: transform;
+          }
+
+          .pbr-headline {
+            position: absolute;
+            z-index: 1;
+            top: 8cqh;
+            left: 8cqw;
+            width: 76cqw;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: 7.6cqw;
+            font-weight: 780;
+            line-height: 0.92;
+            letter-spacing: -0.055em;
+            overflow-wrap: anywhere;
+            text-shadow: 0 1.8cqh 5cqh color-mix(in srgb, var(--bg, #0b0c0e) 72%, transparent);
+          }
+
+          .pbr-card {
+            position: absolute;
+            z-index: 1;
+            overflow: hidden;
+            border: 0.11cqw solid color-mix(in srgb, var(--border, #334155) 78%, transparent);
+            border-radius: var(--radius, 2.4cqw);
+            background: color-mix(in srgb, var(--surface, #1e293b) 92%, transparent);
+            box-shadow:
+              0 2.2cqh 5.5cqh color-mix(in srgb, var(--bg, #0b0c0e) 54%, transparent),
+              inset 0 0.1cqh 0 color-mix(in srgb, var(--fg, #f8fafc) 9%, transparent);
+          }
+
+          .pbr-detail-card {
+            top: 31cqh;
+            left: 8cqw;
+            width: 56cqw;
+            height: 56cqh;
+            padding: 5cqh 4cqw;
+          }
+
+          .pbr-detail-label,
+          .pbr-support-label {
+            color: var(--muted, #94a3b8);
+            font-size: 1.35cqw;
+            font-weight: 680;
+            line-height: 1;
+            letter-spacing: 0.1em;
+            text-transform: uppercase;
+          }
+
+          .pbr-detail-chip {
+            position: absolute;
+            top: 13cqh;
+            left: 31cqw;
+            width: 20cqw;
+            min-height: 12cqh;
+            display: grid;
+            place-items: center;
+            padding: 1.8cqh 1.5cqw;
+            border: 0.12cqw solid color-mix(in srgb, var(--pbr-accent) 72%, var(--fg, #f8fafc));
+            border-radius: calc(var(--radius, 2.4cqw) * 0.72);
+            background: color-mix(in srgb, var(--pbr-accent) 22%, var(--surface, #1e293b));
+            box-shadow: 0 1.8cqh 4.5cqh color-mix(in srgb, var(--pbr-accent) 28%, transparent);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: 4.4cqw;
+            font-weight: 820;
+            line-height: 1;
+            letter-spacing: -0.055em;
+            overflow: hidden;
+            text-align: center;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          .pbr-detail-context {
+            position: absolute;
+            bottom: 5cqh;
+            left: 4cqw;
+            color: var(--muted, #94a3b8);
+            font-size: 1.6cqw;
+            font-weight: 560;
+            line-height: 1.25;
+          }
+
+          .pbr-support-card {
+            left: 75cqw;
+            width: 17cqw;
+            height: 25cqh;
+            padding: 3.6cqh 2.2cqw;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+          }
+
+          .pbr-support-card-a {
+            top: 31cqh;
+          }
+
+          .pbr-support-card-b {
+            top: 62cqh;
+          }
+
+          .pbr-support-value {
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: 3.7cqw;
+            font-weight: 780;
+            line-height: 0.9;
+            letter-spacing: -0.05em;
+          }
+
+          .pbr-support-rule {
+            width: 100%;
+            height: 0.5cqh;
+            border-radius: 999cqw;
+            background: color-mix(in srgb, var(--pbr-accent) 72%, var(--border, #334155));
+          }
+
+          .pbr-ground {
+            position: absolute;
+            z-index: 0;
+            left: 15cqw;
+            bottom: 2cqh;
+            width: 70cqw;
+            height: 10cqh;
+            border-radius: 50%;
+            background: color-mix(in srgb, var(--pbr-accent) 16%, var(--bg, #0b0c0e));
+            filter: blur(3.2cqh);
+            opacity: 0;
+            transform-origin: 50% 50%;
+            will-change: transform, opacity;
+          }
+        </style>
+
+        <div
+          id="pull-back-reveal-clip"
+          class="pbr-clip clip"
+          data-start="0"
+          data-duration="4.5"
+          data-track-index="0"
+        >
+          <div class="pbr-world">
+            <div class="pbr-headline"></div>
+
+            <section class="pbr-card pbr-detail-card">
+              <div class="pbr-detail-label">Net growth</div>
+              <div class="pbr-detail-chip"></div>
+              <div class="pbr-detail-context">Across every active workspace</div>
+            </section>
+
+            <section class="pbr-card pbr-support-card pbr-support-card-a">
+              <div class="pbr-support-label">Retention</div>
+              <div class="pbr-support-value">94%</div>
+              <div class="pbr-support-rule"></div>
+            </section>
+
+            <section class="pbr-card pbr-support-card pbr-support-card-b">
+              <div class="pbr-support-label">Teams</div>
+              <div class="pbr-support-value">48</div>
+              <div class="pbr-support-rule"></div>
+            </section>
+
+            <div class="pbr-ground"></div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var world = root.querySelector(".pbr-world");
+            var headline = root.querySelector(".pbr-headline");
+            var detail = root.querySelector(".pbr-detail-chip");
+            var ground = root.querySelector(".pbr-ground");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var detailText = vars.detail_text == null ? "+312%" : String(vars.detail_text);
+            var headlineText = vars.headline == null ? "Growth compounds" : String(vars.headline);
+            var accentColors = {
+              green: "var(--brand, #a1a1aa)",
+              blue: "var(--accent, #a1a1aa)",
+              violet: "var(--accent-2, #a1a1aa)",
+            };
+            var accentColor = accentColors[vars.accent] || accentColors.green;
+
+            detail.textContent = detailText;
+            headline.textContent = headlineText;
+            root.style.setProperty("--pbr-accent", accentColor);
+
+            // RETIME RANGE: IN owns the tight beat and complete camera move.
+            // HOLD is the only elastic phase. This reveal has no exit.
+            var IN_BASE = 2.4;
+            var TIGHT_HOLD_BASE = 0.55;
+            var WHIP_BASE = 1.2;
+            var DRIFT_BASE = 0.65;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4.5"));
+            var phaseScale = Math.min(1, duration / IN_BASE);
+            var TIGHT_HOLD = TIGHT_HOLD_BASE * phaseScale;
+            var WHIP = WHIP_BASE * phaseScale;
+            var DRIFT = DRIFT_BASE * phaseScale;
+            var IN = TIGHT_HOLD + WHIP + DRIFT;
+            var HOLD = Math.max(0, duration - IN);
+
+            var tl = gsap.timeline({ paused: true });
+
+            tl.fromTo(
+              world,
+              { scale: 2.2, y: 0 },
+              { scale: 1.055, y: "0.7cqh", duration: WHIP, ease: "power4.out" },
+              TIGHT_HOLD,
+            );
+            tl.to(
+              world,
+              { scale: 1, y: 0, duration: DRIFT, ease: "sine.inOut" },
+              TIGHT_HOLD + WHIP,
+            );
+            tl.fromTo(
+              ground,
+              { opacity: 0, scaleX: 0.72, scaleY: 0.72 },
+              { opacity: 0.78, scaleX: 1, scaleY: 1, duration: DRIFT, ease: "power2.out" },
+              TIGHT_HOLD + WHIP,
+            );
+
+            if (HOLD > 0) {
+              tl.to(
+                ground,
+                { opacity: 0.68, scaleX: 0.97, duration: HOLD * 0.5, ease: "sine.inOut" },
+                IN,
+              );
+              tl.to(
+                ground,
+                { opacity: 0.78, scaleX: 1, duration: HOLD * 0.5, ease: "sine.inOut" },
+                IN + HOLD * 0.5,
+              );
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["pull-back-reveal"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/pull-back-reveal/registry-item.json b/registry/components/pull-back-reveal/registry-item.json
new file mode 100644
index 0000000000..433b39523c
--- /dev/null
+++ b/registry/components/pull-back-reveal/registry-item.json
@@ -0,0 +1,50 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "pull-back-reveal",
+  "type": "hyperframes:component",
+  "title": "Pull Back Reveal",
+  "description": "A tight stat detail holds, then one decelerating camera pull-back reveals the headline and supporting cards that recontextualize it.",
+  "tags": ["motion-primitive", "camera", "pull-back", "reveal", "recontextualize"],
+  "jobs": ["reveal"],
+  "family": "camera",
+  "profile": "reveal",
+  "evidence": "Video Primitives Wave G unit U16",
+  "files": [
+    {
+      "path": "pull-back-reveal.html",
+      "target": "compositions/components/pull-back-reveal.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "detail_text",
+      "type": "string",
+      "role": "content",
+      "label": "Detail text",
+      "description": "Stat shown in the detail chip at the center of the reveal.",
+      "default": "+312%"
+    },
+    {
+      "id": "headline",
+      "type": "string",
+      "role": "content",
+      "label": "Headline",
+      "description": "Headline revealed around the focused detail.",
+      "default": "Growth compounds"
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Highlight color used across the composed scene.",
+      "default": "green",
+      "options": [
+        { "value": "green", "label": "Green" },
+        { "value": "blue", "label": "Blue" },
+        { "value": "violet", "label": "Violet" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/pull-to-refresh/demo.html b/registry/components/pull-to-refresh/demo.html
new file mode 100644
index 0000000000..fdcf4a962f
--- /dev/null
+++ b/registry/components/pull-to-refresh/demo.html
@@ -0,0 +1,91 @@
+<!doctype html>
+<!--
+  pull-to-refresh: demo. Standalone 1920x1080 composition that mounts the
+  primitive through data-composition-src inside a tall mobile-list card.
+  The host page is static and owns the box. Non-default pullDistance and
+  spinnerStyle overrides prove both variables cross the mount boundary.
+  The primitive has no data-width or data-height and must derive its layout
+  from this card. Kept in sync with pull-to-refresh.html by hand.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Pull to Refresh: Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #05070d;
+      }
+
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 42%, #16223a 0%, #05070d 72%);
+      }
+
+      /* The host box is intentionally taller than it is wide, like a mobile
+         list viewport, but it is not a device silhouette. Explicit CSS size
+         keeps cqw/cqh stable for the mounted primitive. */
+      .mount-card {
+        --bg: #0b1120;
+        --surface: #172235;
+        --fg: #f4f7fb;
+        --muted: #93a4bb;
+        --border: #2f4058;
+        --brand: #4de1aa;
+        width: 34%;
+        height: 78%;
+        left: 33%;
+        top: 11%;
+        overflow: hidden;
+        border: 1px solid rgba(148, 163, 184, 0.28);
+        border-radius: 36px;
+        box-shadow: 0 44px 110px rgba(0, 0, 0, 0.52);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="pull-to-refresh-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="pull-to-refresh-mount"
+        class="mount-card clip"
+        data-composition-id="pull-to-refresh"
+        data-composition-src="./pull-to-refresh.html"
+        data-variable-values='{"pullDistance":190,"spinnerStyle":"dots"}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="653"
+        data-height="842"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      // The mounted primitive owns motion. This host registers one empty,
+      // paused timeline under its own composition id for runtime discovery.
+      window.__timelines = window.__timelines || {};
+      window.__timelines["pull-to-refresh-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/pull-to-refresh/pull-to-refresh.html b/registry/components/pull-to-refresh/pull-to-refresh.html
new file mode 100644
index 0000000000..f16076767b
--- /dev/null
+++ b/registry/components/pull-to-refresh/pull-to-refresh.html
@@ -0,0 +1,679 @@
+<!doctype html>
+<!--
+  pull-to-refresh: HyperFrames video primitive (pointers / interaction / demonstrate)
+
+  Concept: a mobile list yields under a scripted pull, arms at a visible
+  threshold, commits into a bounded loading state, then snaps exactly back
+  to rest. One mechanic, one job: demonstrate a native pull-to-refresh.
+
+  Compiled-from evidence: GAP, agent B1 hard miss (video-primitives
+  candidates card); mobile gesture-physics-recipes.md, section 9 rubber-band
+  curve and quiet/default/forceful register table. The constants below use
+  the default register as inspiration, while the self-contained resistance
+  curve replaces the shared toolkit that is not available in this catalog.
+
+  Use when: a mobile product scene needs a recognizable refresh gesture and
+  loading handoff. Skip it for generic scrolling or a device silhouette.
+
+  Variables (declared in data-composition-variables below):
+    - pullDistance (number, default 120, range 60–220): raw pull distance fed
+      into the nonlinear resistance curve before host-relative translation.
+    - spinnerStyle ("arrow" | "dots" | "ring", default "ring"): the refresh
+      indicator. Each option has different geometry and active motion.
+
+  Envelope (fixed IN/OUT, elastic loading HOLD only, never gsap.timeScale()):
+    IN_BASE  = 1.80s  contact, resistant drag, threshold arm, commit,
+                      handoff, and the first bounded loading cycle
+    HOLD     = elastic = max(0, D - (IN_BASE + OUT_BASE)); additional finite
+               loading cycles while the content stays at its held offset
+    OUT_BASE = 0.65s  indicator exit and content snap-back
+    If D < 2.45s, IN and OUT scale down together so IN + OUT == D and HOLD
+    is zero. The drag remains heavier and slower than the release response.
+
+  Sync points (fixed offsets, never inside elastic HOLD):
+    - impact: 0.82s into unscaled IN, threshold commit and spinner handoff
+    - settle: 0.65s into unscaled OUT, content reseated exactly at y = 0
+    Both offsets scale proportionally only when D compresses the envelope.
+
+  Sound cues: declarative only. `hf:sfx` events fire for "refresh-commit"
+  at impact and "refresh-settle" at settle. Scene-level mixing owns audio.
+
+  Mount contract: this file is a mountable sub-composition. A host loads it
+  via data-composition-src, and the runtime clones only <template> contents.
+  #root fills the host box with position:absolute, inset:0, and
+  container-type:size. It has no data-width or data-height. All internal
+  geometry uses cqw/cqh, and the hardcoded composition id is required because
+  FLATTENED_INNER_ROOT_STRIP_ATTRS removes the mounted root id attribute.
+  Variables come from window.__hyperframes.getVariables(), which owns merged
+  declared defaults and per-instance overrides after mounting.
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "pullDistance", "type": "number", "role": "layout", "label": "Pull distance", "description": "Raw pull distance before nonlinear rubber-band resistance.", "default": 120, "min": 60, "max": 220, "step": 5 },
+    { "id": "spinnerStyle", "type": "enum", "role": "content", "label": "Spinner style", "description": "Refresh indicator geometry and loading motion.", "default": "ring", "options": [{ "value": "arrow", "label": "Arrow" }, { "value": "dots", "label": "Dots" }, { "value": "ring", "label": "Ring" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Pull to Refresh</title>
+    <!-- Metadata only. The mount runtime discards everything outside the
+         template, while the loader still reads variable declarations from
+         this html element before cloning the template. -->
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="pull-to-refresh" data-duration="4" data-fps="30">
+        <style>
+          @property --ptr-progress {
+            syntax: "<number>";
+            inherits: true;
+            initial-value: 0;
+          }
+
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          /* INVARIANT: #root is the mount-box owner. The host supplies every
+             dimension, and all descendants size against this container. */
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            color: var(--fg, #f4f7fb);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+          }
+
+          .ptr-clip {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            background: var(--bg, #0b1120);
+          }
+
+          .ptr-indicator {
+            --ptr-progress: 0;
+            position: absolute;
+            z-index: 0;
+            inset: 0 0 auto;
+            height: 15cqh;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding-top: 1.5cqh;
+            opacity: 0;
+            color: var(--brand, #35d6a0);
+          }
+
+          .ptr-indicator-visual {
+            width: 6.2cqh;
+            height: 6.2cqh;
+            display: none;
+            place-items: center;
+          }
+
+          #root[data-spinner-style="ring"] .ptr-ring,
+          #root[data-spinner-style="arrow"] .ptr-arrow,
+          #root[data-spinner-style="dots"] .ptr-dots {
+            display: grid;
+          }
+
+          /* EDIT ZONE: all three styles read the same --ptr-progress scalar.
+             Ring maps it to arc fill, arrow maps it to a threshold flip, and
+             dots map it to a three-step reveal. Active motion stays separate
+             so the selected style has a distinctive loading silhouette. */
+          .ptr-ring-core {
+            width: 100%;
+            height: 100%;
+            border-radius: 50%;
+            background: conic-gradient(
+              from -90deg,
+              var(--brand, #35d6a0) 0 calc(var(--ptr-progress) * 1%),
+              color-mix(in srgb, var(--surface, #1e293b) 86%, transparent)
+                calc(var(--ptr-progress) * 1%) 100%
+            );
+            -webkit-mask: radial-gradient(farthest-side, transparent 59%, var(--fg, #f4f7fb) 61%);
+            mask: radial-gradient(farthest-side, transparent 59%, var(--fg, #f4f7fb) 61%);
+          }
+
+          .ptr-arrow-progress {
+            width: 100%;
+            height: 100%;
+            display: grid;
+            place-items: center;
+            border-radius: 50%;
+            border: 0.35cqh solid
+              color-mix(in srgb, var(--brand, #35d6a0) 58%, var(--border, #334155));
+            background: color-mix(in srgb, var(--surface, #1e293b) 88%, transparent);
+            transform: rotate(calc(var(--ptr-progress) * 1.8deg));
+          }
+
+          .ptr-arrow-glyph {
+            position: relative;
+            width: 1.5cqh;
+            height: 2.7cqh;
+            border-radius: 0.3cqh;
+            background: var(--brand, #35d6a0);
+          }
+
+          .ptr-arrow-glyph::after {
+            content: "";
+            position: absolute;
+            left: 50%;
+            bottom: -0.8cqh;
+            width: 2.3cqh;
+            height: 2.3cqh;
+            border-right: 0.55cqh solid var(--brand, #35d6a0);
+            border-bottom: 0.55cqh solid var(--brand, #35d6a0);
+            transform: translateX(-50%) rotate(45deg);
+          }
+
+          .ptr-dots {
+            grid-template-columns: repeat(3, 1.7cqh);
+            gap: 0.8cqh;
+            align-content: center;
+            width: auto;
+          }
+
+          .ptr-dot {
+            width: 1.7cqh;
+            height: 1.7cqh;
+            border-radius: 50%;
+            background: var(--brand, #35d6a0);
+            box-shadow: 0 0 1.2cqh color-mix(in srgb, var(--brand, #35d6a0) 50%, transparent);
+          }
+
+          .ptr-dot:nth-child(1) {
+            opacity: clamp(0.2, calc(var(--ptr-progress) / 30), 1);
+          }
+
+          .ptr-dot:nth-child(2) {
+            opacity: clamp(0.2, calc((var(--ptr-progress) - 30) / 30), 1);
+          }
+
+          .ptr-dot:nth-child(3) {
+            opacity: clamp(0.2, calc((var(--ptr-progress) - 60) / 30), 1);
+          }
+
+          .ptr-state {
+            position: relative;
+            width: 100%;
+            height: 3.4cqh;
+            margin-top: 0.9cqh;
+            color: var(--muted, #94a3b8);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: clamp(1.35cqh, 1.8cqw, 2.05cqh);
+            font-weight: 700;
+            letter-spacing: 0.04em;
+            text-align: center;
+            text-transform: uppercase;
+          }
+
+          .ptr-state span {
+            position: absolute;
+            inset: 0;
+            opacity: 0;
+          }
+
+          .ptr-content {
+            position: absolute;
+            z-index: 1;
+            inset: 0;
+            overflow: hidden;
+            background: var(--bg, #0b1120);
+            border-radius: inherit;
+            box-shadow: 0 -1cqh 3cqh color-mix(in srgb, var(--bg, #0b1120) 65%, transparent);
+          }
+
+          .ptr-topbar {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            height: 10cqh;
+            padding: 0 6cqw;
+            border-bottom: 0.12cqh solid var(--border, #334155);
+            background: color-mix(in srgb, var(--surface, #1e293b) 52%, var(--bg, #0b1120));
+          }
+
+          .ptr-title {
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: clamp(2.8cqh, 5.2cqw, 4.3cqh);
+            font-weight: 760;
+            letter-spacing: -0.035em;
+          }
+
+          .ptr-updated {
+            display: flex;
+            align-items: center;
+            gap: 1.4cqw;
+            color: var(--brand, #35d6a0);
+            font-size: clamp(1.4cqh, 2.2cqw, 2cqh);
+            font-weight: 700;
+            opacity: 0;
+          }
+
+          .ptr-updated::before {
+            content: "";
+            width: 1.4cqh;
+            height: 1.4cqh;
+            border-radius: 50%;
+            background: var(--brand, #35d6a0);
+            box-shadow: 0 0 1.2cqh color-mix(in srgb, var(--brand, #35d6a0) 50%, transparent);
+          }
+
+          .ptr-search {
+            display: flex;
+            align-items: center;
+            height: 7cqh;
+            margin: 3cqh 5cqw 2cqh;
+            padding: 0 4cqw;
+            border: 0.12cqh solid var(--border, #334155);
+            border-radius: 3.5cqh;
+            background: var(--surface, #1e293b);
+            color: var(--muted, #94a3b8);
+            font-size: clamp(1.7cqh, 2.8cqw, 2.5cqh);
+          }
+
+          .ptr-list {
+            display: grid;
+            gap: 1.7cqh;
+            padding: 0 5cqw 5cqh;
+          }
+
+          .ptr-card {
+            display: grid;
+            grid-template-columns: 8cqh 1fr auto;
+            align-items: center;
+            min-height: 11.5cqh;
+            gap: 3cqw;
+            padding: 2cqh 4cqw;
+            border: 0.12cqh solid var(--border, #334155);
+            border-radius: 2.4cqh;
+            background: var(--surface, #1e293b);
+            box-shadow: 0 1cqh 2.4cqh color-mix(in srgb, var(--bg, #0b1120) 55%, transparent);
+          }
+
+          .ptr-avatar {
+            display: grid;
+            place-items: center;
+            width: 6.3cqh;
+            height: 6.3cqh;
+            border-radius: 2cqh;
+            background: color-mix(in srgb, var(--brand, #35d6a0) 20%, var(--surface, #1e293b));
+            color: var(--brand, #35d6a0);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: 2.3cqh;
+            font-weight: 800;
+          }
+
+          .ptr-copy {
+            min-width: 0;
+          }
+
+          .ptr-card-title {
+            color: var(--fg, #f4f7fb);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: clamp(1.9cqh, 3.1cqw, 2.7cqh);
+            font-weight: 720;
+          }
+
+          .ptr-card-subtitle {
+            margin-top: 0.5cqh;
+            color: var(--muted, #94a3b8);
+            font-size: clamp(1.45cqh, 2.3cqw, 2.05cqh);
+            line-height: 1.25;
+          }
+
+          .ptr-time {
+            align-self: start;
+            color: var(--muted, #94a3b8);
+            font-size: clamp(1.25cqh, 2cqw, 1.8cqh);
+            font-weight: 650;
+          }
+        </style>
+
+        <div
+          id="pull-to-refresh-clip"
+          class="ptr-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="ptr-indicator" aria-hidden="true">
+            <div class="ptr-indicator-visual ptr-ring">
+              <div class="ptr-ring-core"></div>
+            </div>
+            <div class="ptr-indicator-visual ptr-arrow">
+              <div class="ptr-arrow-progress">
+                <div class="ptr-arrow-glyph"></div>
+              </div>
+            </div>
+            <div class="ptr-indicator-visual ptr-dots">
+              <span class="ptr-dot"></span>
+              <span class="ptr-dot"></span>
+              <span class="ptr-dot"></span>
+            </div>
+            <div class="ptr-state">
+              <span class="ptr-pull-label">Pull to refresh</span>
+              <span class="ptr-release-label">Release to refresh</span>
+              <span class="ptr-loading-label">Refreshing</span>
+            </div>
+          </div>
+
+          <section class="ptr-content" aria-label="Activity list">
+            <header class="ptr-topbar">
+              <div class="ptr-title">Activity</div>
+              <div class="ptr-updated">Updated now</div>
+            </header>
+            <div class="ptr-search">Search activity</div>
+            <div class="ptr-list">
+              <article class="ptr-card">
+                <div class="ptr-avatar">AL</div>
+                <div class="ptr-copy">
+                  <div class="ptr-card-title">Alex shared a draft</div>
+                  <div class="ptr-card-subtitle">Launch sequence, ready for review</div>
+                </div>
+                <div class="ptr-time">Now</div>
+              </article>
+              <article class="ptr-card">
+                <div class="ptr-avatar">MK</div>
+                <div class="ptr-copy">
+                  <div class="ptr-card-title">Mika left feedback</div>
+                  <div class="ptr-card-subtitle">Three comments on the new flow</div>
+                </div>
+                <div class="ptr-time">4m</div>
+              </article>
+              <article class="ptr-card">
+                <div class="ptr-avatar">NO</div>
+                <div class="ptr-copy">
+                  <div class="ptr-card-title">Noah published an update</div>
+                  <div class="ptr-card-subtitle">Mobile preview is available</div>
+                </div>
+                <div class="ptr-time">18m</div>
+              </article>
+              <article class="ptr-card">
+                <div class="ptr-avatar">SR</div>
+                <div class="ptr-copy">
+                  <div class="ptr-card-title">Sara joined the project</div>
+                  <div class="ptr-card-subtitle">Workspace access granted</div>
+                </div>
+                <div class="ptr-time">1h</div>
+              </article>
+            </div>
+          </section>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            // Literal by contract. Mounted roots lose data-composition-id
+            // during flattening, so reading the id back from the DOM can
+            // register the timeline under "null".
+            var compositionId = "pull-to-refresh";
+            var clip = root.querySelector(".ptr-clip");
+            var indicator = root.querySelector(".ptr-indicator");
+            var content = root.querySelector(".ptr-content");
+            var pullLabel = root.querySelector(".ptr-pull-label");
+            var releaseLabel = root.querySelector(".ptr-release-label");
+            var loadingLabel = root.querySelector(".ptr-loading-label");
+            var ring = root.querySelector(".ptr-ring-core");
+            var arrow = root.querySelector(".ptr-arrow-glyph");
+            var dots = Array.prototype.slice.call(root.querySelectorAll(".ptr-dot"));
+            var updated = root.querySelector(".ptr-updated");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            // INVARIANT: only finite 60–220 input reaches the physics owner.
+            // Zero, NaN, and strings outside the range fall back explicitly.
+            var rawPull = Number(vars.pullDistance);
+            var pullDistance = Number.isFinite(rawPull)
+              ? Math.max(60, Math.min(220, rawPull))
+              : 120;
+            // INVARIANT: only one of the declared indicator variants reaches
+            // the renderer. Invalid overrides resolve to the declared default.
+            var spinnerStyle =
+              vars.spinnerStyle === "arrow" || vars.spinnerStyle === "dots"
+                ? vars.spinnerStyle
+                : "ring";
+            root.setAttribute("data-spinner-style", spinnerStyle);
+
+            // Self-contained rubber-band mapping from the physics recipe:
+            // displayed = x*c / (x*c/d + 1). REFERENCE is a normalized
+            // preview dimension, then converted to cqh for host-relative
+            // motion. This function alone owns resistance and displacement.
+            var RESISTANCE = 0.55;
+            var REFERENCE = 640;
+            function rubberBand(distance) {
+              return (distance * RESISTANCE) / ((distance * RESISTANCE) / REFERENCE + 1);
+            }
+            var shownPeak = (rubberBand(pullDistance) / REFERENCE) * 100;
+            var heldOffset = Math.min(shownPeak, Math.max(5.8, shownPeak * 0.76));
+            var dragState = { raw: 0 };
+
+            // RETIME RANGE: lifecycle ownership lives only in these constants.
+            // IN and OUT scale together only when the composition duration is short.
+            var IN_BASE = 1.8;
+            var OUT_BASE = 0.65;
+            var CONTACT_BASE = 0.12;
+            var DRAG_BASE = 0.7;
+            var ARM_AT_BASE = 0.61;
+            var IMPACT_AT_BASE = 0.82;
+            var HANDOFF_BASE = 0.22;
+            var durationValue = Number(clip.dataset.duration);
+            var duration = Number.isFinite(durationValue) && durationValue > 0 ? durationValue : 4;
+            var totalBase = IN_BASE + OUT_BASE;
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var CONTACT = CONTACT_BASE * scale;
+            var DRAG = DRAG_BASE * scale;
+            var ARM_AT = ARM_AT_BASE * scale;
+            var IMPACT_AT = IMPACT_AT_BASE * scale;
+            var HANDOFF = HANDOFF_BASE * scale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var OUT_START = IN + HOLD;
+            var ACTIVE_DURATION = Math.max(0.001, OUT_START - IMPACT_AT);
+
+            function fireSfx(id, atTime) {
+              root.dispatchEvent(
+                new CustomEvent("hf:sfx", {
+                  detail: { id: id, t: atTime },
+                  bubbles: true,
+                }),
+              );
+            }
+
+            gsap.set(content, { y: "0cqh" });
+            gsap.set(indicator, { "--ptr-progress": 0, opacity: 0 });
+            gsap.set(pullLabel, { opacity: 1 });
+            gsap.set(releaseLabel, { opacity: 0 });
+            gsap.set(loadingLabel, { opacity: 0 });
+            gsap.set(ring, { rotation: 0 });
+            gsap.set(arrow, { rotation: 0 });
+            gsap.set(dots, { y: "0cqh", scale: 1 });
+            gsap.set(updated, { opacity: 0 });
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN, contact and nonlinear pull. The distance is already
+            // resistance-mapped, while power2.out controls drag timing.
+            tl.fromTo(
+              indicator,
+              { "--ptr-progress": 0, opacity: 0 },
+              {
+                "--ptr-progress": 100,
+                opacity: 1,
+                duration: DRAG,
+                ease: "power2.out",
+                immediateRender: false,
+              },
+              CONTACT,
+            );
+            tl.fromTo(
+              dragState,
+              { raw: 0 },
+              {
+                raw: pullDistance,
+                duration: DRAG,
+                ease: "power2.out",
+                onUpdate: function () {
+                  var displayed = (rubberBand(dragState.raw) / REFERENCE) * 100;
+                  gsap.set(content, { y: displayed + "cqh" });
+                },
+                immediateRender: false,
+              },
+              CONTACT,
+            );
+
+            // Threshold arm, a fixed point in IN. The indicator geometry is
+            // full and the label flips before release commits the refresh.
+            tl.to(pullLabel, { opacity: 0, duration: 0.12 * scale, ease: "power2.in" }, ARM_AT);
+            tl.to(releaseLabel, { opacity: 1, duration: 0.16 * scale, ease: "power2.out" }, ARM_AT);
+
+            tl.addLabel("impact", IMPACT_AT);
+            tl.fromTo(
+              content,
+              { y: shownPeak + "cqh" },
+              {
+                y: heldOffset + "cqh",
+                duration: HANDOFF,
+                ease: "power3.out",
+                immediateRender: false,
+              },
+              IMPACT_AT,
+            );
+            tl.to(
+              releaseLabel,
+              { opacity: 0, duration: 0.1 * scale, ease: "power2.in" },
+              IMPACT_AT,
+            );
+            tl.to(
+              loadingLabel,
+              { opacity: 1, duration: 0.16 * scale, ease: "power2.out" },
+              IMPACT_AT,
+            );
+            tl.call(
+              function () {
+                fireSfx("refresh-commit", IMPACT_AT);
+              },
+              [],
+              IMPACT_AT,
+            );
+
+            // Loading HOLD: every cycle count is finite and determined once.
+            // Each style owns a distinct active motion, but only the resolved
+            // style is authored into the timeline.
+            if (spinnerStyle === "ring") {
+              var spinCount = Math.max(1, Math.round(ACTIVE_DURATION / 0.58));
+              tl.fromTo(
+                ring,
+                { rotation: 0 },
+                {
+                  rotation: 360 * spinCount,
+                  duration: ACTIVE_DURATION,
+                  ease: "linear",
+                  immediateRender: false,
+                },
+                IMPACT_AT,
+              );
+            } else if (spinnerStyle === "arrow") {
+              var arrowSpinCount = Math.max(1, Math.round(ACTIVE_DURATION / 0.64));
+              tl.fromTo(
+                arrow,
+                { rotation: 0 },
+                {
+                  rotation: 360 * arrowSpinCount,
+                  duration: ACTIVE_DURATION,
+                  ease: "linear",
+                  immediateRender: false,
+                },
+                IMPACT_AT,
+              );
+            } else {
+              var PULSE_HALF = 0.22 * scale;
+              dots.forEach(function (dot, index) {
+                var dotStart = IMPACT_AT + index * 0.1 * scale;
+                var available = Math.max(PULSE_HALF, OUT_START - dotStart);
+                var pulseRepeat = Math.max(1, Math.floor(available / PULSE_HALF) - 1);
+                tl.fromTo(
+                  dot,
+                  { y: "0cqh", scale: 1 },
+                  {
+                    y: "-1.15cqh",
+                    scale: 1.28,
+                    duration: PULSE_HALF,
+                    ease: "sine.inOut",
+                    yoyo: true,
+                    repeat: pulseRepeat,
+                    immediateRender: false,
+                  },
+                  dotStart,
+                );
+              });
+            }
+
+            // OUT: opacity exits without overshoot. Content alone earns the
+            // rare tactile back.out snap and lands exactly at zero.
+            tl.fromTo(
+              indicator,
+              { opacity: 1 },
+              {
+                opacity: 0,
+                duration: Math.min(OUT, 0.2 * scale),
+                ease: "power2.in",
+                immediateRender: false,
+              },
+              OUT_START,
+            );
+            tl.fromTo(
+              content,
+              { y: heldOffset + "cqh" },
+              {
+                y: "0cqh",
+                duration: OUT,
+                ease: "back.out(1.7)",
+                immediateRender: false,
+              },
+              OUT_START,
+            );
+            tl.fromTo(
+              updated,
+              { opacity: 0 },
+              {
+                opacity: 1,
+                duration: Math.min(OUT, 0.28 * scale),
+                ease: "power2.out",
+                immediateRender: false,
+              },
+              OUT_START + OUT * 0.32,
+            );
+            tl.addLabel("settle", OUT_START + OUT);
+            tl.call(
+              function () {
+                fireSfx("refresh-settle", OUT_START + OUT);
+              },
+              [],
+              OUT_START + OUT,
+            );
+
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/pull-to-refresh/registry-item.json b/registry/components/pull-to-refresh/registry-item.json
new file mode 100644
index 0000000000..f10721fd7b
--- /dev/null
+++ b/registry/components/pull-to-refresh/registry-item.json
@@ -0,0 +1,49 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "pull-to-refresh",
+  "type": "hyperframes:component",
+  "title": "Pull to Refresh",
+  "description": "A mobile list pulls through nonlinear rubber-band resistance, arms at a threshold, commits to a bounded loading indicator, then snaps exactly back to rest.",
+  "tags": ["pointer", "pointers", "mobile", "gesture", "interaction", "refresh", "demonstrate"],
+  "jobs": ["demonstrate"],
+  "family": "pointers",
+  "profile": "interaction",
+  "evidence": "GAP, agent B1 hard miss; mobile gesture-physics-recipes.md section 9 rubber-band curve and quiet/default/forceful register table.",
+  "syncPoints": [
+    { "id": "impact", "phase": "in", "offset": 0.82 },
+    { "id": "settle", "phase": "out", "offset": 0.65 }
+  ],
+  "files": [
+    {
+      "path": "pull-to-refresh.html",
+      "target": "compositions/components/pull-to-refresh.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "pullDistance",
+      "type": "number",
+      "role": "layout",
+      "label": "Pull distance",
+      "description": "Raw pull distance before nonlinear rubber-band resistance.",
+      "default": 120,
+      "min": 60,
+      "max": 220,
+      "step": 5
+    },
+    {
+      "id": "spinnerStyle",
+      "type": "enum",
+      "role": "content",
+      "label": "Spinner style",
+      "description": "Refresh indicator geometry and loading motion.",
+      "default": "ring",
+      "options": [
+        { "value": "arrow", "label": "Arrow" },
+        { "value": "dots", "label": "Dots" },
+        { "value": "ring", "label": "Ring" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/push-in/demo.html b/registry/components/push-in/demo.html
new file mode 100644
index 0000000000..7cc71b96c7
--- /dev/null
+++ b/registry/components/push-in/demo.html
@@ -0,0 +1,84 @@
+<!doctype html>
+<!--
+  push-in demo. This standalone composition mounts push-in.html through
+  data-composition-src. Non-default text and bold intensity prove both
+  variables flow through the mount while the primitive remains host-sized.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Push In Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0b0c0e;
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --surface: #343b4d;
+        --border: #3f4658;
+        --font-display: Inter, system-ui, sans-serif;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0b0c0e;
+      }
+
+      .mount-card {
+        width: 76%;
+        height: 72%;
+        left: 12%;
+        top: 14%;
+        container-type: size;
+        overflow: hidden;
+        border: 1px solid rgba(148, 163, 184, 0.24);
+        border-radius: 32px;
+        background: var(--bg);
+        box-shadow: 0 48px 120px rgba(0, 0, 0, 0.52);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="push-in-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="push-in-mount"
+        class="mount-card clip"
+        data-composition-id="push-in"
+        data-composition-src="./push-in.html"
+        data-variable-values='{"text":"Look closer","intensity":"bold"}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="1459"
+        data-height="778"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["push-in-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/push-in/push-in.html b/registry/components/push-in/push-in.html
new file mode 100644
index 0000000000..371797f9b3
--- /dev/null
+++ b/registry/components/push-in/push-in.html
@@ -0,0 +1,178 @@
+<!doctype html>
+<!--
+  push-in: HyperFrames video primitive (camera / holdable / emphasize)
+
+  Concept: a centered headline stays composed while the full stage makes one
+  slow camera push. The intensity variable owns the final scale, and a soft
+  vignette keeps attention on the subject.
+
+  Variables:
+    - text (string, default "Focus"): the centered headline.
+    - intensity (subtle | standard | bold, default "standard"): maps to a
+      final stage scale of 1.08, 1.12, or 1.18.
+
+  Envelope: fixed 0.80s IN eases the camera into motion, elastic HOLD carries
+  a continuous linear creep, and fixed 0.65s OUT gently fades the completed
+  push. If the duration is shorter than IN plus OUT, both fixed phases
+  compress proportionally and HOLD becomes zero. Longer durations stretch
+  HOLD only, so the same total camera travel happens more slowly. The
+  timeline is never time-scaled.
+
+  Mount contract: the runtime clones only this template. #root fills the
+  host box, establishes the container query basis, has no data-width or
+  data-height, and registers one paused timeline under the hardcoded push-in
+  id.
+-->
+<html
+  lang="en"
+  data-composition-id="push-in"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "text", "type": "string", "role": "content", "label": "Headline", "description": "Text centered in the camera frame.", "default": "Focus" },
+    { "id": "intensity", "type": "enum", "role": "motion", "label": "Push intensity", "description": "Final camera scale reached by the push.", "default": "standard", "options": [{ "value": "subtle", "label": "Subtle" }, { "value": "standard", "label": "Standard" }, { "value": "bold", "label": "Bold" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Push In</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="push-in" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .pi-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+          }
+
+          .pi-camera {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+            background:
+              radial-gradient(
+                ellipse at 50% 48%,
+                color-mix(in srgb, var(--surface, #303747) 92%, white) 0%,
+                var(--surface, #303747) 27%,
+                var(--bg, #0b0c0e) 100%
+              ),
+              var(--bg, #0b0c0e);
+            transform-origin: 50% 50%;
+            will-change: transform, opacity;
+          }
+
+          .pi-camera::after {
+            content: "";
+            position: absolute;
+            inset: 0;
+            background: radial-gradient(
+              ellipse at 50% 48%,
+              transparent 24%,
+              color-mix(in srgb, var(--bg, #0b0c0e) 20%, transparent) 58%,
+              color-mix(in srgb, var(--bg, #0b0c0e) 88%, transparent) 100%
+            );
+          }
+
+          .pi-headline {
+            position: relative;
+            z-index: 1;
+            width: min(78cqw, 116cqh);
+            color: var(--fg, #f8fafc);
+            font-size: clamp(24px, 12cqw, 144px);
+            font-weight: 740;
+            line-height: 0.94;
+            letter-spacing: -0.055em;
+            text-align: center;
+            overflow-wrap: anywhere;
+            text-shadow: 0 1.5cqh 5cqh color-mix(in srgb, var(--bg, #0b0c0e) 62%, transparent);
+          }
+        </style>
+
+        <div
+          id="push-in-clip"
+          class="pi-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="pi-camera">
+            <div class="pi-headline"></div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var camera = root.querySelector(".pi-camera");
+            var headline = root.querySelector(".pi-headline");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var text = vars.text == null ? "Focus" : String(vars.text);
+            var intensity =
+              vars.intensity === "subtle" || vars.intensity === "bold"
+                ? vars.intensity
+                : "standard";
+            var scales = { subtle: 1.08, standard: 1.12, bold: 1.18 };
+            var finalScale = scales[intensity];
+
+            headline.textContent = text;
+
+            var IN_BASE = 0.8;
+            var OUT_BASE = 0.65;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var fixedDuration = IN_BASE + OUT_BASE;
+            var phaseScale = duration < fixedDuration ? duration / fixedDuration : 1;
+            var IN = IN_BASE * phaseScale;
+            var OUT = OUT_BASE * phaseScale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var OUT_START = IN + HOLD;
+            var inScale = HOLD > 0 ? 1 + (finalScale - 1) * 0.24 : finalScale;
+
+            var tl = gsap.timeline({ paused: true });
+
+            tl.fromTo(
+              camera,
+              { scale: 1, opacity: 1 },
+              { scale: inScale, opacity: 1, duration: IN, ease: "sine.inOut" },
+              0,
+            );
+            if (HOLD > 0) {
+              tl.to(camera, { scale: finalScale, duration: HOLD, ease: "none" }, IN);
+            }
+            tl.to(camera, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["push-in"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/push-in/registry-item.json b/registry/components/push-in/registry-item.json
new file mode 100644
index 0000000000..0904c2b25a
--- /dev/null
+++ b/registry/components/push-in/registry-item.json
@@ -0,0 +1,42 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "push-in",
+  "type": "hyperframes:component",
+  "title": "Push In",
+  "description": "A centered headline gains focus through one slow, continuous camera push and a gentle fade out.",
+  "tags": ["motion-primitive", "camera", "push-in", "focus", "emphasize", "holdable"],
+  "jobs": ["emphasize"],
+  "family": "camera",
+  "profile": "holdable",
+  "evidence": "Wave F U5 push-in specification",
+  "files": [
+    {
+      "path": "push-in.html",
+      "target": "compositions/components/push-in.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "text",
+      "type": "string",
+      "role": "content",
+      "label": "Headline",
+      "description": "Text centered in the camera frame.",
+      "default": "Focus"
+    },
+    {
+      "id": "intensity",
+      "type": "enum",
+      "role": "motion",
+      "label": "Push intensity",
+      "description": "Final camera scale reached by the push.",
+      "default": "standard",
+      "options": [
+        { "value": "subtle", "label": "Subtle" },
+        { "value": "standard", "label": "Standard" },
+        { "value": "bold", "label": "Bold" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/radial-surround/README.md b/registry/components/radial-surround/README.md
new file mode 100644
index 0000000000..c81e89795a
--- /dev/null
+++ b/registry/components/radial-surround/README.md
@@ -0,0 +1,95 @@
+# radial-surround
+
+Labeled hairline chips assemble around a centered subject on an elliptical
+ring: positions baked once via cos/sin, staggered smooth-settle entries. With
+`close_in` (the default) the chips then converge inward toward the subject
+while a subtle edge vignette dims the stage. The center NEVER moves: the
+subject is surrounded, not zoomed. The classic problem-setup beat ("your team,
+buried under tools").
+
+## Files
+
+- `radial-surround.html`: the mountable sub-composition (install target:
+  `compositions/components/radial-surround.html`).
+- `registry-item.json`: registry metadata and the variables block.
+- `demo.html`: a 1920x1080 host that mounts the primitive with non-default
+  variables through `data-composition-src`.
+
+## Variables
+
+| id             | type    | default                                     | notes                                                                     |
+| -------------- | ------- | ------------------------------------------- | ------------------------------------------------------------------------- |
+| `center_label` | string  | `Your team`                                 | label on the default center token card                                    |
+| `chips`        | string  | `Docs,Tickets,Dashboards,Inbox,Chat,Sheets` | comma list of chip labels; up to 12 render                                |
+| `close_in`     | boolean | `true`                                      | converge the ring inward with the edge dim; `false` holds the wide ring   |
+| `cues`         | string  | `""`                                        | comma-separated per-chip entrance seconds; blank entries use the cascade  |
+| `accent`       | enum    | `green`                                     | `green` maps to `--brand`, `blue` to `--accent`, `violet` to `--accent-2` |
+| `exit`         | enum    | `none`                                      | `none` holds the final frame; `fade` and `up` release the stage           |
+
+Envelope: IN = center settle + chip cascade (+ close-in when enabled; the
+converge lands at 4.50s at defaults), HOLD is the sole elastic phase (dead
+still), OUT = up to 0.45s only when `exit` is `fade` or `up`. Sync points:
+`ring-assembled` at 2.95s, `surround-closed` at 4.50s (defaults). Cue values
+are clamped so every chip lands before the close-in (or the exit) begins.
+
+## The slot mechanism
+
+The primitive ships one named slot for the center subject inside its
+`<template>`:
+
+```html
+<div class="rs-center" data-slot="center">...</div>
+```
+
+The slot is empty by default: the script generates a token card carrying
+`center_label`, so an untouched mount still reads as a tasteful setup. To
+show your own subject, install the component and **place children inside the
+`[data-slot="center"]` element in your installed copy** (the runtime clones
+only the primitive's own template on mount, so slot content lives in the
+component file, not on the host clip). When the slot already has children the
+default card is skipped; chips, cues, `close_in`, and `exit` still apply.
+
+Rules:
+
+- Direct `img`/`video` children are capped at 34cqw x 30cqh with
+  `object-fit: cover` and the contract radius. Arbitrary HTML works too; size
+  it in `cqw`/`cqh` and keep it inside roughly 34cqw x 30cqh so the close-in
+  ring (20cqw x 23cqh radii) clears it.
+- The center only fades and settles on entrance; it never translates. Do not
+  animate the slot content yourself: the surrounding choreography assumes a
+  still subject.
+- Leave the chips and vignette alone; they render above the center layer.
+
+## Worked example
+
+Install, then point the center at a product shot:
+
+```bash
+npx hyperframes add radial-surround
+```
+
+In `compositions/components/radial-surround.html`, fill the slot:
+
+```html
+<div class="rs-center" data-slot="center">
+  <img src="../../assets/team-photo.png" alt="" />
+</div>
+```
+
+Mount it from a host composition like any sub-composition:
+
+```html
+<div
+  class="clip"
+  data-composition-id="radial-surround"
+  data-composition-src="./components/radial-surround.html"
+  data-variable-values='{"chips":"Slack,Email,CRM,Tickets,Docs","close_in":true,"accent":"blue"}'
+  data-start="2"
+  data-duration="5"
+  data-track-index="0"
+></div>
+```
+
+Chips pop in around the photo on alternating compass points, close in at
+~3.3s, and the crowded frame holds still for the rest of the clip window
+(`exit` defaults to `none`; frame roots own scene transitions).
diff --git a/registry/components/radial-surround/demo.html b/registry/components/radial-surround/demo.html
new file mode 100644
index 0000000000..f533b5c0d2
--- /dev/null
+++ b/registry/components/radial-surround/demo.html
@@ -0,0 +1,92 @@
+<!doctype html>
+<!--
+  radial-surround demo. This standalone composition mounts the primitive
+  through data-composition-src. Non-default center label, chips, cues, and
+  accent prove the variable path; close_in stays at its default (true) so the
+  signature converge plus edge dim is what QA surfaces render.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Radial Surround Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #0b0c0e);
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --surface: #14171c;
+        --border: #343a46;
+        --brand: #71f5a7;
+        --accent: #61a8ff;
+        --accent-2: #c5a3ff;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(
+          ellipse at 50% 44%,
+          var(--bg, #171a20) 0%,
+          var(--bg, #0b0c0e) 72%
+        );
+      }
+
+      .mount-card {
+        width: 88%;
+        height: 86%;
+        left: 6%;
+        top: 7%;
+        container-type: size;
+        overflow: hidden;
+        border: 1px solid color-mix(in srgb, var(--border, #94a3b8) 20%, transparent);
+        border-radius: 30px;
+        background: color-mix(in srgb, var(--surface, #101318) 60%, transparent);
+        box-shadow: 0 40px 100px color-mix(in srgb, var(--bg, #000000) 48%, transparent);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="radial-surround-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+      data-fps="30"
+    >
+      <div
+        id="radial-surround-mount"
+        class="mount-card clip"
+        data-composition-id="radial-surround"
+        data-composition-src="./radial-surround.html"
+        data-variable-values='{"center_label":"One workspace","chips":"Slack,Email,CRM,Tickets,Docs,Sheets","cues":"0.8,1.05,1.3,1.55,1.8,2.05","accent":"blue"}'
+        data-start="0"
+        data-duration="5"
+        data-track-index="0"
+        data-width="1690"
+        data-height="929"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["radial-surround-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/radial-surround/radial-surround.html b/registry/components/radial-surround/radial-surround.html
new file mode 100644
index 0000000000..680aec0078
--- /dev/null
+++ b/registry/components/radial-surround/radial-surround.html
@@ -0,0 +1,432 @@
+<!doctype html>
+<!--
+  radial-surround: HyperFrames video primitive (problem setup)
+
+  Labeled hairline chips assemble around a centered subject on an elliptical
+  ring. Positions are baked exactly once via cos/sin before the timeline is
+  registered, so every seek lands on the same geometry. Chips enter with
+  staggered smooth settles (scale + fade, power3.out, no overshoot). With
+  close_in enabled the chips then converge inward toward the subject while a
+  subtle edge vignette dims the stage: the center NEVER moves. The subject is
+  surrounded, not zoomed.
+
+  Variables (declared in data-composition-variables below):
+    - center_label (string, default "Your team"): label on the default token
+      card. Ignored for layout when the center slot carries custom children.
+    - chips (string, default "Docs,Tickets,Dashboards,Inbox,Chat,Sheets"):
+      comma list of chip labels; up to 12 render, extras are dropped.
+    - close_in (boolean, default true): converge the ring inward with the
+      edge dim after assembly. false holds the wide ring instead.
+    - cues (string, default ""): comma-separated per-chip entrance times in
+      seconds relative to mount start. Blank or invalid entries fall back to
+      that chip's default cascade slot (~0.30s gap). Values are clamped so
+      every chip lands before the close-in (or the exit) begins.
+    - accent (green | blue | violet, default green): center card tint.
+      green routes to --brand, blue to --accent, violet to --accent-2.
+    - exit (none | fade | up, default none): frame roots own transitions;
+      the default crowded hold ends the film.
+
+  Envelope, fixed IN with elastic HOLD (never gsap.timeScale()):
+    IN    = center settle + chip cascade (+ close-in and vignette when
+            close_in is true); at defaults the converge lands at 4.50s.
+    HOLD  = dead still, elastic: everything after IN until OUT (or D).
+    OUT   = 0 when exit is "none"; else up to 0.45s fade / fade-up.
+    Entrance starts compress together when D is too short for the cascade;
+    the close-in window is reserved first so the converge always completes.
+
+  Slot: the runtime clones only this template. A fork that wants a custom
+  subject places its own children inside the [data-slot="center"] element;
+  when that element already has children the default token card is not
+  generated (chips, cues, close_in, and exit still apply, and the center
+  still never moves).
+
+  Mount contract: elastic root, no data-width/data-height, styled via #root
+  only, container-type: size, one paused timeline registered under the
+  literal "radial-surround" key. Deterministic and seek-safe: fromTo
+  entrances, no CSS transitions, no Date.now, no randomness.
+-->
+<html
+  lang="en"
+  data-composition-id="radial-surround"
+  data-composition-duration="5"
+  data-composition-variables='[
+    { "id": "center_label", "type": "string", "role": "content", "label": "Center label", "description": "Label on the default center token card.", "default": "Your team" },
+    { "id": "chips", "type": "string", "role": "content", "label": "Chips", "description": "Comma-separated chip labels that surround the center (up to 12).", "default": "Docs,Tickets,Dashboards,Inbox,Chat,Sheets" },
+    { "id": "close_in", "type": "boolean", "role": "timing", "label": "Close in", "description": "Converge the ring inward with a subtle edge dim after assembly. The center never moves.", "default": true },
+    { "id": "cues", "type": "string", "role": "timing", "label": "Cues", "description": "Comma-separated per-chip entrance times in seconds. Blank entries use the default cascade.", "default": "" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Accent token family used by the center card tint.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "How the surrounded stage leaves the frame. Default none: the crowded hold ends the film.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Radial Surround</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="radial-surround" data-duration="5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            background: var(--bg, transparent);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            pointer-events: none;
+          }
+
+          .rs-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+          }
+
+          .rs-stage {
+            position: absolute;
+            inset: 0;
+            will-change: transform, opacity;
+          }
+
+          .rs-center-layer {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+          }
+
+          .rs-center {
+            display: grid;
+            place-items: center;
+            will-change: transform, opacity;
+          }
+
+          .rs-center > img,
+          .rs-center > video {
+            max-width: 34cqw;
+            max-height: 30cqh;
+            object-fit: cover;
+            border-radius: var(--radius, 2.2cqmin);
+          }
+
+          .rs-card {
+            width: 28cqw;
+            min-height: 22cqh;
+            padding: var(--space-2, 2.2cqmin);
+            border: 0.16cqmin solid color-mix(in srgb, var(--rs-accent) 46%, var(--border, #475569));
+            border-radius: var(--radius, 2.2cqmin);
+            background: color-mix(in srgb, var(--surface, #131a24) 94%, var(--rs-accent));
+            box-shadow: 0 3cqh 9cqh color-mix(in srgb, var(--bg, #000000) 40%, transparent);
+          }
+
+          .rs-card-label {
+            overflow: hidden;
+            color: var(--fg, #f8fafc);
+            font-family: var(
+              --font-display,
+              var(--font-body, ui-sans-serif, system-ui, sans-serif)
+            );
+            font-size: var(--rs-center-font, 4cqmin);
+            font-weight: 600;
+            line-height: 1.15;
+            letter-spacing: 0.04em;
+            text-align: center;
+            white-space: nowrap;
+          }
+
+          .rs-ring {
+            position: absolute;
+            inset: 0;
+          }
+
+          /* Positioning wrapper: the baked ring offsets live in the --rs-ox
+             and --rs-oy custom properties (plain cq values) and the close-in
+             tweens THOSE, never x/y or a GSAP-written calc() string. GSAP
+             misconverts vertical cq units to px mid-tween when it has to
+             re-init a layout property under a seek, so the calc stays in the
+             stylesheet and only the var strings interpolate; the inner
+             chip's unitless scale and opacity are the only transforms. */
+          .rs-pos {
+            position: absolute;
+            top: calc(50% + var(--rs-oy, 0cqh));
+            left: calc(50% + var(--rs-ox, 0cqw));
+            width: max-content;
+            transform: translate(-50%, -50%);
+            will-change: top, left;
+          }
+
+          .rs-chip {
+            padding: 1.15cqmin 2.1cqmin;
+            border: 0.14cqmin solid var(--border, #475569);
+            border-radius: 0.6cqmin;
+            background: var(--surface, #131a24);
+            color: var(--fg, #f8fafc);
+            font-size: 2.1cqmin;
+            font-weight: 500;
+            line-height: 1;
+            letter-spacing: 0.16em;
+            text-transform: uppercase;
+            white-space: nowrap;
+            transform-origin: 50% 50%;
+            will-change: transform, opacity;
+          }
+
+          /* Close-in edge dim: very subtle, content stays legible. */
+          .rs-vignette {
+            position: absolute;
+            inset: 0;
+            background: radial-gradient(
+              ellipse at center,
+              transparent 60%,
+              color-mix(in srgb, var(--bg, #05070c) 34%, transparent) 100%
+            );
+            opacity: 0;
+            pointer-events: none;
+          }
+        </style>
+
+        <div
+          id="radial-surround-clip"
+          class="rs-clip clip"
+          data-start="0"
+          data-duration="5"
+          data-track-index="0"
+        >
+          <div class="rs-stage" role="img">
+            <div class="rs-center-layer">
+              <div class="rs-center" data-slot="center"></div>
+            </div>
+            <div class="rs-ring" aria-hidden="true"></div>
+            <div class="rs-vignette"></div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            // Literal id, never read off the DOM: the flattening step strips
+            // data-composition-id from the mounted root (see toggle-flip).
+            var compositionId = "radial-surround";
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".rs-stage");
+            var center = root.querySelector('[data-slot="center"]');
+            var ring = root.querySelector(".rs-ring");
+            var vignette = root.querySelector(".rs-vignette");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var centerLabel =
+              vars.center_label == null || String(vars.center_label).trim() === ""
+                ? "Your team"
+                : String(vars.center_label).trim();
+            var chipsValue =
+              vars.chips == null || String(vars.chips).trim() === ""
+                ? "Docs,Tickets,Dashboards,Inbox,Chat,Sheets"
+                : String(vars.chips);
+            var labels = chipsValue
+              .split(",")
+              .map(function (token) {
+                return token.trim();
+              })
+              .filter(function (token) {
+                return token !== "";
+              })
+              .slice(0, 12);
+            if (labels.length === 0)
+              labels = ["Docs", "Tickets", "Dashboards", "Inbox", "Chat", "Sheets"];
+
+            var closeIn = !(vars.close_in === false || vars.close_in === "false");
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            root.style.setProperty("--rs-accent", accentColors[accent]);
+
+            // Slot: a fork may author its own subject inside
+            // [data-slot="center"]; then the default token card is skipped.
+            if (center.children.length === 0) {
+              center.classList.add("rs-card");
+              var label = document.createElement("span");
+              label.className = "rs-card-label";
+              label.textContent = centerLabel;
+              center.appendChild(label);
+            }
+            stage.setAttribute("aria-label", centerLabel + ": " + labels.join(", "));
+
+            // Deterministic center-label fitting inside the 28cqw card.
+            var chars = Array.from(centerLabel).length;
+            var fontCqw = Math.min(3.4, 23 / (Math.max(1, chars) * 0.62));
+            root.style.setProperty("--rs-center-font", "min(" + fontCqw.toFixed(3) + "cqw, 6cqh)");
+
+            /* Elliptical ring, baked once (deterministic). FAR is the wide
+               assembly ring; NEAR is the close-in ring, pressing corner chips
+               up against the 28cqw center card so the crowding reads (chips
+               paint above the card). Angles alternate sides from the top so
+               consecutive entries pop on opposite compass points. */
+            var FAR_RX = 30; /* cqw */
+            var FAR_RY = 31; /* cqh */
+            var NEAR_RX = 20;
+            var NEAR_RY = 23;
+            var count = labels.length;
+            var step = 360 / count;
+            function ringPosition(index, rx, ry) {
+              var degrees = -90 + Math.ceil(index / 2) * step * (index % 2 === 1 ? 1 : -1);
+              var a = (degrees * Math.PI) / 180;
+              return {
+                ox: (Math.cos(a) * rx).toFixed(3) + "cqw",
+                oy: (Math.sin(a) * ry).toFixed(3) + "cqh",
+              };
+            }
+            var positions = [];
+            var chips = labels.map(function (text, index) {
+              var pos = document.createElement("div");
+              pos.className = "rs-pos";
+              var far = ringPosition(index, FAR_RX, FAR_RY);
+              pos.style.setProperty("--rs-ox", far.ox);
+              pos.style.setProperty("--rs-oy", far.oy);
+              var chip = document.createElement("div");
+              chip.className = "rs-chip";
+              chip.textContent = text;
+              pos.appendChild(chip);
+              ring.appendChild(pos);
+              positions.push(pos);
+              return chip;
+            });
+
+            // RETIME RANGE: fixed IN cascade (+ close-in), elastic still HOLD,
+            // optional OUT. The close-in window is reserved off the top so the
+            // converge always completes inside the clip.
+            var CENTER_AT = 0.05;
+            var BASE_START = 0.9;
+            var GAP = 0.3;
+            var ENTRY = 0.55;
+            var CLOSE_DUR = 0.75;
+            var CLOSE_STAG = 0.09;
+            var BREATH = 0.35;
+            var OUT_BASE = 0.45;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "5"));
+            var OUT = exit === "none" ? 0 : Math.min(OUT_BASE, duration * 0.2);
+            var avail = duration - OUT;
+            var closeSpan = closeIn ? (count - 1) * CLOSE_STAG + CLOSE_DUR : 0;
+            var latestStart = Math.max(0, avail - ENTRY - closeSpan);
+            // Compress the cascade together when the duration cannot fit it.
+            var gap =
+              count > 1 ? Math.min(GAP, Math.max(0, latestStart - BASE_START) / (count - 1)) : GAP;
+
+            var cueList = String(vars.cues == null ? "" : vars.cues).split(",");
+            var starts = chips.map(function (chip, index) {
+              var cue = Number((cueList[index] || "").trim());
+              var hasCue = (cueList[index] || "").trim() !== "" && Number.isFinite(cue);
+              var start = hasCue ? cue : Math.min(BASE_START, latestStart) + gap * index;
+              return Math.max(0, Math.min(start, latestStart));
+            });
+
+            var tl = gsap.timeline({ paused: true });
+
+            // Center seats first: gentle fade + subtle scale settle. After
+            // this the center NEVER moves again (surrounded, not zoomed).
+            gsap.set(center, { opacity: 0, scale: 0.94 });
+            tl.fromTo(
+              center,
+              { opacity: 0, scale: 0.94 },
+              {
+                opacity: 1,
+                scale: 1,
+                duration: Math.min(0.7, Math.max(0.2, avail * 0.25)),
+                ease: "power3.out",
+              },
+              Math.min(CENTER_AT, latestStart),
+            );
+
+            // IN: chips assemble on the FAR ring in a measured stagger.
+            // Explicit both-endpoints state so any seek is exact.
+            chips.forEach(function (chip, index) {
+              gsap.set(chip, { scale: 0, opacity: 0 });
+              tl.fromTo(
+                chip,
+                { scale: 0, opacity: 0 },
+                { scale: 1, opacity: 1, duration: ENTRY, ease: "power3.out" },
+                starts[index],
+              );
+            });
+
+            // Close-in: chips converge from all compass points toward the
+            // subject while the edges dim slightly. The center holds still.
+            if (closeIn) {
+              var maxEntryEnd =
+                starts.reduce(function (max, start) {
+                  return Math.max(max, start);
+                }, 0) + ENTRY;
+              var closeStart = Math.max(
+                maxEntryEnd,
+                Math.min(maxEntryEnd + BREATH, avail - closeSpan),
+              );
+              positions.forEach(function (pos, index) {
+                var far = ringPosition(index, FAR_RX, FAR_RY);
+                var near = ringPosition(index, NEAR_RX, NEAR_RY);
+                tl.fromTo(
+                  pos,
+                  { "--rs-ox": far.ox, "--rs-oy": far.oy },
+                  {
+                    "--rs-ox": near.ox,
+                    "--rs-oy": near.oy,
+                    duration: CLOSE_DUR,
+                    ease: "power2.inOut",
+                  },
+                  closeStart + index * CLOSE_STAG,
+                );
+              });
+              gsap.set(vignette, { opacity: 0 });
+              tl.fromTo(
+                vignette,
+                { opacity: 0 },
+                {
+                  opacity: 1,
+                  duration: Math.min(0.9, Math.max(0.2, closeSpan)),
+                  ease: "power1.inOut",
+                },
+                closeStart + 0.05,
+              );
+            }
+
+            // HOLD: intentionally still. Crowded, quiet, nothing floats.
+
+            // OUT: the whole surrounded stage leaves together.
+            if (exit !== "none") {
+              var OUT_START = duration - OUT;
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+              if (exit === "up") {
+                // yPercent, not a cq-unit y: percent transforms seek exactly.
+                tl.to(stage, { yPercent: -4, duration: OUT, ease: "power2.in" }, OUT_START);
+              }
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/radial-surround/registry-item.json b/registry/components/radial-surround/registry-item.json
new file mode 100644
index 0000000000..d5c47824d9
--- /dev/null
+++ b/registry/components/radial-surround/registry-item.json
@@ -0,0 +1,83 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "radial-surround",
+  "type": "hyperframes:component",
+  "title": "Radial Surround",
+  "description": "Labeled hairline chips assemble around a centered subject on an elliptical ring, then optionally converge inward with a subtle edge dim. The center never moves: surrounded, not zoomed.",
+  "tags": ["motion-primitive", "problem-setup", "radial", "ring", "surround", "converge"],
+  "jobs": ["agitate"],
+  "family": "layout",
+  "profile": "surround",
+  "evidence": "Wave J J2-6: flagship frame 02-problem elliptical ring math (FAR/NEAR radii, per-chip cos/sin angles) generalized to a slotted primitive",
+  "syncPoints": [
+    { "id": "ring-assembled", "phase": "in", "offset": 2.95 },
+    { "id": "surround-closed", "phase": "in", "offset": 4.5 }
+  ],
+  "files": [
+    {
+      "path": "radial-surround.html",
+      "target": "compositions/components/radial-surround.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "center_label",
+      "type": "string",
+      "role": "content",
+      "label": "Center label",
+      "description": "Label on the default center token card.",
+      "default": "Your team"
+    },
+    {
+      "id": "chips",
+      "type": "string",
+      "role": "content",
+      "label": "Chips",
+      "description": "Comma-separated chip labels that surround the center (up to 12).",
+      "default": "Docs,Tickets,Dashboards,Inbox,Chat,Sheets"
+    },
+    {
+      "id": "close_in",
+      "type": "boolean",
+      "role": "timing",
+      "label": "Close in",
+      "description": "Converge the ring inward with a subtle edge dim after assembly. The center never moves.",
+      "default": true
+    },
+    {
+      "id": "cues",
+      "type": "string",
+      "role": "timing",
+      "label": "Cues",
+      "description": "Comma-separated per-chip entrance times in seconds. Blank entries use the default cascade.",
+      "default": ""
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Accent token family used by the center card tint.",
+      "default": "green",
+      "options": [
+        { "value": "green", "label": "Green" },
+        { "value": "blue", "label": "Blue" },
+        { "value": "violet", "label": "Violet" }
+      ]
+    },
+    {
+      "id": "exit",
+      "type": "enum",
+      "role": "timing",
+      "label": "Exit",
+      "description": "How the surrounded stage leaves the frame. Default none: the crowded hold ends the film.",
+      "default": "none",
+      "options": [
+        { "value": "none", "label": "None" },
+        { "value": "fade", "label": "Fade" },
+        { "value": "up", "label": "Up" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/rgb-glitch-text/demo.html b/registry/components/rgb-glitch-text/demo.html
new file mode 100644
index 0000000000..0d16a1349e
--- /dev/null
+++ b/registry/components/rgb-glitch-text/demo.html
@@ -0,0 +1,112 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>RGB Glitch Text - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #09090b;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        gap: 32px;
+        padding: 64px;
+        zoom: 0.28;
+      }
+      /* ponytail: scale-up via font-size — GSAP only touches CSS vars, not transform */
+      .hf-remocn-rgb-glitch-text {
+        color: #fafafa;
+        font-family: Inter, system-ui, sans-serif;
+        font-weight: 900;
+        letter-spacing: -0.04em;
+      }
+      .hf-remocn-rgb-glitch-text {
+        position: relative;
+        width: 1120px;
+        height: 200px;
+        font-size: 192px;
+        line-height: 1;
+      }
+      .hf-remocn-rgb-glitch-text span,
+      .hf-remocn-rgb-glitch-text strong {
+        position: absolute;
+        inset: 0;
+      }
+      .hf-remocn-rgb-glitch-text span:first-child {
+        color: #ef4444;
+        mix-blend-mode: screen;
+        transform: translateX(var(--hf-glitch-red, 0px));
+      }
+      .hf-remocn-rgb-glitch-text span:nth-child(2) {
+        color: #22d3ee;
+        mix-blend-mode: screen;
+        transform: translateX(var(--hf-glitch-blue, 0px));
+      }
+      .hf-remocn-rgb-glitch-text strong {
+        color: #fafafa;
+      }
+      .demo-label {
+        font-size: 24px;
+        font-weight: 500;
+        color: #52525b;
+        letter-spacing: 0.12em;
+        text-transform: uppercase;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="rgb-glitch-text-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-rgb-glitch-text">
+          <span>GLITCH</span><span>GLITCH</span><strong>GLITCH</strong>
+        </div>
+        <div class="demo-label">RGB Glitch Text</div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.to(".hf-remocn-rgb-glitch-text", { opacity: 1, duration: 0.01 }, startTime);
+        tl.to(
+          ".hf-remocn-rgb-glitch-text",
+          {
+            "--hf-glitch-red": "-20px",
+            "--hf-glitch-blue": "20px",
+            duration: 0.06,
+            repeat: 5,
+            yoyo: true,
+            ease: "steps(1)",
+          },
+          startTime + 0.1,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["rgb-glitch-text-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/rgb-glitch-text/registry-item.json b/registry/components/rgb-glitch-text/registry-item.json
new file mode 100644
index 0000000000..3091ca098b
--- /dev/null
+++ b/registry/components/rgb-glitch-text/registry-item.json
@@ -0,0 +1,73 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "rgb-glitch-text",
+  "type": "hyperframes:component",
+  "title": "RGB Glitch Text",
+  "description": "RGB-offset text copies jitter briefly for a controlled glitch window.",
+  "tags": ["motion-primitive", "remocn-port", "typography"],
+  "files": [
+    {
+      "path": "rgb-glitch-text.html",
+      "target": "compositions/components/rgb-glitch-text.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "text",
+      "type": "string",
+      "role": "content",
+      "label": "Text",
+      "description": "The word shown on all three stacked copies.",
+      "default": "GLITCH",
+      "maxLength": 24
+    },
+    {
+      "id": "intensity",
+      "type": "enum",
+      "role": "motion",
+      "label": "Intensity",
+      "description": "Scales the red and cyan offsets the timeline drives, so the split reads as a hairline or a hard tear.",
+      "default": "standard",
+      "options": [
+        {
+          "value": "subtle",
+          "label": "Subtle"
+        },
+        {
+          "value": "standard",
+          "label": "Standard"
+        },
+        {
+          "value": "extreme",
+          "label": "Extreme"
+        }
+      ]
+    },
+    {
+      "id": "tone",
+      "type": "enum",
+      "role": "style",
+      "label": "Tone",
+      "description": "Colour of the solid copy the two ghosts split away from: ink for light frames, paper for dark ones, accent rides --brand.",
+      "default": "ink",
+      "options": [
+        {
+          "value": "ink",
+          "label": "Ink"
+        },
+        {
+          "value": "paper",
+          "label": "Paper"
+        },
+        {
+          "value": "accent",
+          "label": "Accent"
+        }
+      ]
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/rgb-glitch-text.png"
+  }
+}
diff --git a/registry/components/rgb-glitch-text/rgb-glitch-text.html b/registry/components/rgb-glitch-text/rgb-glitch-text.html
new file mode 100644
index 0000000000..a1fd3da4ea
--- /dev/null
+++ b/registry/components/rgb-glitch-text/rgb-glitch-text.html
@@ -0,0 +1,110 @@
+<!--
+  RGB Glitch Text - remocn typography primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Drive the timeline
+  integration from a paused GSAP timeline so renders remain deterministic.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result as a custom property
+  the CSS above consumes. The timeline recipe below is untouched by them: it
+  keeps driving one red offset and one cyan offset, and intensity decides how
+  far those offsets actually carry.
+
+    - text (any short word, default "GLITCH"): the word set on all three
+      stacked copies at once, so they stay in register.
+    - intensity (subtle | standard | extreme, default standard): scales the
+      driven offsets, from a hairline fringe to a hard tear. Both offsets are
+      zero at rest, so this one only shows once the timeline runs.
+    - tone (ink | paper | accent, default ink): colour of the solid copy the
+      red and cyan ghosts split away from. ink is near-black for light frames,
+      paper near-white for dark ones, accent rides --brand.
+
+  On every default the result is identical to the original: near-black GLITCH
+  with red and cyan copies tearing 8px either way.
+-->
+
+<div
+  class="hf-remocn-rgb-glitch-text"
+  data-composition-variables='[
+    { "id": "text", "type": "string", "role": "content", "label": "Text", "description": "The word shown on all three stacked copies.", "default": "GLITCH", "maxLength": 24 },
+    { "id": "intensity", "type": "enum", "role": "motion", "label": "Intensity", "description": "Scales the red and cyan offsets the timeline drives, so the split reads as a hairline or a hard tear.", "default": "standard", "options": [{ "value": "subtle", "label": "Subtle" }, { "value": "standard", "label": "Standard" }, { "value": "extreme", "label": "Extreme" }] },
+    { "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Colour of the solid copy the two ghosts split away from: ink for light frames, paper for dark ones, accent rides --brand.", "default": "ink", "options": [{ "value": "ink", "label": "Ink" }, { "value": "paper", "label": "Paper" }, { "value": "accent", "label": "Accent" }] }
+  ]'
+>
+  <span>GLITCH</span><span>GLITCH</span><strong>GLITCH</strong>
+</div>
+
+<style>
+  .hf-remocn-rgb-glitch-text {
+    color: var(--hf-glitch-ink, #18181b);
+    font-family: Inter, system-ui, sans-serif;
+    font-weight: 900;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-rgb-glitch-text {
+    position: relative;
+    width: 420px;
+    height: 82px;
+    font-size: 72px;
+    line-height: 1;
+  }
+  .hf-remocn-rgb-glitch-text span,
+  .hf-remocn-rgb-glitch-text strong {
+    position: absolute;
+    inset: 0;
+  }
+  .hf-remocn-rgb-glitch-text span:first-child {
+    color: #ef4444;
+    transform: translateX(calc(var(--hf-glitch-red, 0px) * var(--hf-glitch-reach, 1)));
+  }
+  .hf-remocn-rgb-glitch-text span:nth-child(2) {
+    color: #22d3ee;
+    transform: translateX(calc(var(--hf-glitch-blue, 0px) * var(--hf-glitch-reach, 1)));
+  }
+  .hf-remocn-rgb-glitch-text strong {
+    color: var(--hf-glitch-ink, #18181b);
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    var reaches = { subtle: 0.5, standard: 1, extreme: 2.25 };
+    var tones = {
+      ink: "#18181b",
+      paper: "#fafafa",
+      accent: "var(--brand, #34d399)",
+    };
+
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var reach = reaches[pick(reaches, vars.intensity, "standard")];
+    var tone = tones[pick(tones, vars.tone, "ink")];
+    var text =
+      typeof vars.text === "string" && vars.text.trim() !== "" ? vars.text.trim() : "GLITCH";
+
+    var roots = document.querySelectorAll(".hf-remocn-rgb-glitch-text");
+    for (var i = 0; i < roots.length; i += 1) {
+      roots[i].style.setProperty("--hf-glitch-reach", String(reach));
+      roots[i].style.setProperty("--hf-glitch-ink", tone);
+      var copies = roots[i].querySelectorAll("span, strong");
+      for (var j = 0; j < copies.length; j += 1) {
+        copies[j].textContent = text;
+      }
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.to('.hf-remocn-rgb-glitch-text', { opacity: 1, duration: 0.01 }, startTime); tl.to('.hf-remocn-rgb-glitch-text', { '--hf-glitch-red': '-8px', '--hf-glitch-blue': '8px', duration: 0.06, repeat: 5, yoyo: true, ease: 'steps(1)' }, startTime + 0.1);
+-->
diff --git a/registry/components/rubber-band-bumper/demo.html b/registry/components/rubber-band-bumper/demo.html
new file mode 100644
index 0000000000..aa83320322
--- /dev/null
+++ b/registry/components/rubber-band-bumper/demo.html
@@ -0,0 +1,84 @@
+<!doctype html>
+<!--
+  rubber-band-bumper demo. This standalone composition mounts the primitive
+  through data-composition-src. Left and violet are non-default values that
+  prove both variables flow through the elastic host box.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Rubber Band Bumper Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0b0c0e;
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-body: Inter, system-ui, sans-serif;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(circle at 50% 45%, #1b2130 0%, #0b0c0e 66%);
+      }
+
+      .mount-card {
+        width: 76%;
+        height: 74%;
+        left: 12%;
+        top: 13%;
+        container-type: size;
+        overflow: hidden;
+        border: 1px solid rgba(148, 163, 184, 0.26);
+        border-radius: 34px;
+        background: #111827;
+        box-shadow: 0 48px 120px rgba(0, 0, 0, 0.52);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="rubber-band-bumper-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="2.5"
+      data-fps="30"
+    >
+      <div
+        id="rubber-band-bumper-mount"
+        class="mount-card clip"
+        data-composition-id="rubber-band-bumper"
+        data-composition-src="./rubber-band-bumper.html"
+        data-variable-values='{"direction":"left","accent":"violet"}'
+        data-start="0"
+        data-duration="2.5"
+        data-track-index="0"
+        data-width="1459"
+        data-height="799"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["rubber-band-bumper-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/rubber-band-bumper/registry-item.json b/registry/components/rubber-band-bumper/registry-item.json
new file mode 100644
index 0000000000..b3b797dc39
--- /dev/null
+++ b/registry/components/rubber-band-bumper/registry-item.json
@@ -0,0 +1,47 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "rubber-band-bumper",
+  "type": "hyperframes:component",
+  "title": "Rubber Band Bumper",
+  "description": "An outgoing panel pulls against increasing resistance, holds at tension, then snaps past an edge with overshoot as the incoming panel settles behind it.",
+  "tags": ["motion-primitive", "transition", "rubber-band", "resistance", "overshoot"],
+  "jobs": ["bridge"],
+  "family": "transitions",
+  "profile": "elastic",
+  "evidence": "Wave H U33 specification, inspired by the Snapchat and Claude pull-to-refresh motion pattern",
+  "syncPoints": [{ "id": "release", "phase": "out", "offset": 0 }],
+  "files": [
+    {
+      "path": "rubber-band-bumper.html",
+      "target": "compositions/components/rubber-band-bumper.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "direction",
+      "type": "enum",
+      "role": "content",
+      "label": "Direction",
+      "description": "Edge the outgoing panel releases through.",
+      "default": "up",
+      "options": [
+        { "value": "up", "label": "Up" },
+        { "value": "left", "label": "Left" }
+      ]
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Color applied to the tension bands and incoming panel.",
+      "default": "green",
+      "options": [
+        { "value": "green", "label": "Green" },
+        { "value": "blue", "label": "Blue" },
+        { "value": "violet", "label": "Violet" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/rubber-band-bumper/rubber-band-bumper.html b/registry/components/rubber-band-bumper/rubber-band-bumper.html
new file mode 100644
index 0000000000..ce2f7e9dc7
--- /dev/null
+++ b/registry/components/rubber-band-bumper/rubber-band-bumper.html
@@ -0,0 +1,331 @@
+<!doctype html>
+<!--
+  rubber-band-bumper: HyperFrames video primitive
+
+  The outgoing panel is pulled opposite its exit direction in progressively
+  smaller steps, visibly loading two accent bands. After a still threshold
+  hold, it releases past the chosen edge with overshoot while the incoming
+  panel settles into place behind it.
+
+  Variables:
+    direction: up or left exit direction
+    accent: green, blue, or violet tension color
+
+  Envelope, fixed IN and OUT with elastic HOLD:
+    IN_BASE  = 1.25s, five equal pull beats add decreasing displacement
+    HOLD     = max(0, D - IN - OUT), stillness at maximum tension
+    OUT_BASE = 0.95s, overshooting release and incoming-panel settle
+    If D is shorter than IN_BASE + OUT_BASE, IN and OUT compress together.
+    The timeline is never time-scaled.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, and has no data-width or
+  data-height. One paused timeline registers under the literal
+  rubber-band-bumper key.
+-->
+<html
+  lang="en"
+  data-composition-id="rubber-band-bumper"
+  data-composition-duration="2.5"
+  data-composition-variables='[
+    { "id": "direction", "type": "enum", "role": "content", "label": "Direction", "description": "Edge the outgoing panel releases through.", "default": "up", "options": [{ "value": "up", "label": "Up" }, { "value": "left", "label": "Left" }] },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Color applied to the tension bands and incoming panel.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Rubber Band Bumper</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="rubber-band-bumper" data-duration="2.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .rbb-clip,
+          .rbb-panel {
+            position: absolute;
+            inset: 0;
+            width: 100cqw;
+            height: 100cqh;
+          }
+
+          .rbb-clip {
+            overflow: hidden;
+            background: var(--bg, #0b0c0e);
+          }
+
+          .rbb-panel {
+            display: grid;
+            place-items: center;
+            will-change: transform, opacity;
+          }
+
+          .rbb-incoming {
+            background:
+              radial-gradient(
+                circle at 50% 44%,
+                color-mix(in srgb, var(--rbb-accent) 20%, transparent),
+                transparent 42%
+              ),
+              linear-gradient(145deg, #172033, #0c111b 72%);
+          }
+
+          .rbb-outgoing {
+            z-index: 2;
+            background: linear-gradient(145deg, #263247, #121925 68%);
+            border: 0.18cqmin solid color-mix(in srgb, #94a3b8 30%, transparent);
+            box-shadow: 0 2.8cqh 8cqh rgba(0, 0, 0, 0.48);
+          }
+
+          .rbb-copy {
+            display: grid;
+            justify-items: center;
+            gap: 2.4cqh;
+            max-width: 72cqw;
+            text-align: center;
+          }
+
+          .rbb-kicker {
+            padding: 1cqh 1.4cqw;
+            border: 0.14cqmin solid color-mix(in srgb, var(--rbb-accent) 68%, transparent);
+            border-radius: 999px;
+            color: var(--rbb-accent);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
+            font-size: clamp(11px, 2.2cqmin, 24px);
+            font-weight: 700;
+            letter-spacing: 0.16em;
+            line-height: 1;
+          }
+
+          .rbb-title {
+            margin: 0;
+            color: #f8fafc;
+            font-size: clamp(26px, 8.8cqmin, 92px);
+            font-weight: 760;
+            letter-spacing: -0.045em;
+            line-height: 0.95;
+          }
+
+          .rbb-subtitle {
+            margin: 0;
+            color: #b6c0d0;
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            font-size: clamp(13px, 3.1cqmin, 30px);
+            font-weight: 520;
+            line-height: 1.25;
+          }
+
+          .rbb-band {
+            position: absolute;
+            z-index: 1;
+            border-radius: 999px;
+            background: var(--rbb-accent);
+            box-shadow: 0 0 2.2cqmin color-mix(in srgb, var(--rbb-accent) 72%, transparent);
+            will-change: transform, opacity;
+          }
+
+          #root.rbb-left .rbb-band {
+            left: 0;
+            width: 14cqw;
+            height: 1.1cqh;
+            transform-origin: 0 50%;
+          }
+
+          #root.rbb-left .rbb-band-a {
+            top: 34cqh;
+          }
+
+          #root.rbb-left .rbb-band-b {
+            top: 66cqh;
+          }
+
+          #root.rbb-up .rbb-band {
+            top: 0;
+            width: 1.1cqw;
+            height: 14cqh;
+            transform-origin: 50% 0;
+          }
+
+          #root.rbb-up .rbb-band-a {
+            left: 34cqw;
+          }
+
+          #root.rbb-up .rbb-band-b {
+            left: 66cqw;
+          }
+        </style>
+
+        <div
+          id="rubber-band-bumper-clip"
+          class="rbb-clip clip"
+          data-start="0"
+          data-duration="2.5"
+          data-track-index="0"
+        >
+          <section class="rbb-panel rbb-incoming">
+            <div class="rbb-copy">
+              <span class="rbb-kicker">NEXT</span>
+              <h2 class="rbb-title">Clean release</h2>
+              <p class="rbb-subtitle">The incoming scene settles behind the snap.</p>
+            </div>
+          </section>
+
+          <span class="rbb-band rbb-band-a" aria-hidden="true"></span>
+          <span class="rbb-band rbb-band-b" aria-hidden="true"></span>
+
+          <section class="rbb-panel rbb-outgoing">
+            <div class="rbb-copy">
+              <span class="rbb-kicker">CURRENT</span>
+              <h2 class="rbb-title">Hold the tension</h2>
+              <p class="rbb-subtitle">Each pull travels less as resistance builds.</p>
+            </div>
+          </section>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var outgoing = root.querySelector(".rbb-outgoing");
+            var incoming = root.querySelector(".rbb-incoming");
+            var bands = root.querySelectorAll(".rbb-band");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var direction = vars.direction === "left" ? "left" : "up";
+            var accentColors = {
+              green: "var(--brand, #6ee7b7)",
+              blue: "var(--accent, #60a5fa)",
+              violet: "var(--accent-2, #a78bfa)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var motionByDirection = {
+              up: {
+                rootClass: "rbb-up",
+                axis: "y",
+                crossAxis: "x",
+                bandAxis: "scaleY",
+                outgoingArc: "3%",
+                incomingArc: "-1.6%",
+              },
+              left: {
+                rootClass: "rbb-left",
+                axis: "x",
+                crossAxis: "y",
+                bandAxis: "scaleX",
+                outgoingArc: "-3%",
+                incomingArc: "1.6%",
+              },
+            };
+            var motion = motionByDirection[direction];
+
+            root.classList.add(motion.rootClass);
+            root.style.setProperty("--rbb-accent", accentColors[accent]);
+
+            var IN_BASE = 1.25;
+            var OUT_BASE = 0.95;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "2.5"));
+            var totalBase = IN_BASE + OUT_BASE;
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var OUT_START = IN + HOLD;
+
+            // One authored table owns the resistance curve. Equal-time steps
+            // add 5, 3.5, 2, 1.25, then 0.5 percent displacement.
+            var pullPositions = [5, 8.5, 10.5, 11.75, 12.25];
+            var segmentDuration = IN / pullPositions.length;
+            var exitPosition = "-112%";
+            var incomingStart = "-5%";
+
+            gsap.set(outgoing, { x: "0%", y: "0%" });
+            gsap.set(incoming, { x: "0%", y: "0%", scale: 0.985, opacity: 0.82 });
+            var incomingOffset = {};
+            incomingOffset[motion.axis] = incomingStart;
+            gsap.set(incoming, incomingOffset);
+            gsap.set(bands, { opacity: 0.7, scaleX: 1, scaleY: 1 });
+            var bandStart = {};
+            bandStart[motion.bandAxis] = 0.08;
+            gsap.set(bands, bandStart);
+
+            var tl = gsap.timeline({ paused: true });
+
+            pullPositions.forEach(function (position, index) {
+              var at = index * segmentDuration;
+              var panelTween = { duration: segmentDuration, ease: "power2.out" };
+              var bandTween = { duration: segmentDuration, ease: "power2.out" };
+              panelTween[motion.axis] = position + "%";
+              bandTween[motion.bandAxis] = 0.08 + position / 14;
+              tl.to(outgoing, panelTween, at);
+              tl.to(bands, bandTween, at);
+            });
+
+            var releaseDuration = OUT * 0.84;
+            var releaseTween = { duration: releaseDuration, ease: "back.out(1.7)" };
+            var outgoingArc = {
+              duration: releaseDuration * 0.5,
+              ease: "sine.inOut",
+              yoyo: true,
+              repeat: 1,
+            };
+            releaseTween[motion.axis] = exitPosition;
+            outgoingArc[motion.crossAxis] = motion.outgoingArc;
+            tl.to(outgoing, releaseTween, OUT_START);
+            tl.to(outgoing, outgoingArc, OUT_START);
+            var bandRelease = {
+              opacity: 0,
+              duration: OUT * 0.28,
+              ease: "power4.out",
+            };
+            bandRelease[motion.bandAxis] = 0.04;
+            tl.to(bands, bandRelease, OUT_START);
+            var incomingDuration = OUT * 0.78;
+            var incomingSettle = {
+              scale: 1,
+              opacity: 1,
+              duration: incomingDuration,
+              ease: "back.out(1.7)",
+            };
+            var incomingArc = {
+              duration: incomingDuration * 0.5,
+              ease: "sine.inOut",
+              yoyo: true,
+              repeat: 1,
+            };
+            incomingSettle[motion.axis] = "0%";
+            incomingArc[motion.crossAxis] = motion.incomingArc;
+            tl.to(incoming, incomingSettle, OUT_START);
+            tl.to(incoming, incomingArc, OUT_START);
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["rubber-band-bumper"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/scan-band/demo.html b/registry/components/scan-band/demo.html
new file mode 100644
index 0000000000..1b247a0481
--- /dev/null
+++ b/registry/components/scan-band/demo.html
@@ -0,0 +1,82 @@
+<!doctype html>
+<!--
+  scan-band demo. This standalone composition mounts scan-band.html through
+  data-composition-src. Non-default values prove that both variables flow
+  through the mount while the primitive remains sized by its host box.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Scan Band Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0b0c0e;
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f7f8fa;
+        --font-display: Inter, system-ui, sans-serif;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 48%, #1a1d22 0%, #0b0c0e 68%);
+      }
+
+      .mount-card {
+        width: 76%;
+        height: 56%;
+        left: 12%;
+        top: 22%;
+        container-type: size;
+        overflow: hidden;
+        border: 1px solid rgba(255, 255, 255, 0.08);
+        border-radius: 32px;
+        background: #101216;
+        box-shadow: 0 5cqh 14cqh rgba(0, 0, 0, 0.48);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="scan-band-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="3.5"
+      data-fps="30"
+    >
+      <div
+        id="scan-band-mount"
+        class="mount-card clip"
+        data-composition-id="scan-band"
+        data-composition-src="./scan-band.html"
+        data-variable-values='{"wordmark":"SCAN MODE","band_angle":-18}'
+        data-start="0"
+        data-duration="3.5"
+        data-track-index="0"
+        data-width="1459"
+        data-height="605"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["scan-band-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/scan-band/registry-item.json b/registry/components/scan-band/registry-item.json
new file mode 100644
index 0000000000..c8474e34ae
--- /dev/null
+++ b/registry/components/scan-band/registry-item.json
@@ -0,0 +1,41 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "scan-band",
+  "type": "hyperframes:component",
+  "title": "Scan Band",
+  "description": "A diagonal distortion band sweeps once across a clean wordmark, revealing clipped red and cyan offsets only inside the moving band.",
+  "tags": ["motion-primitive", "typography", "scan", "chromatic", "distortion", "wordmark"],
+  "jobs": ["reveal"],
+  "family": "effects",
+  "profile": "sweep",
+  "evidence": "Wave F U6 scan-band build contract",
+  "files": [
+    {
+      "path": "scan-band.html",
+      "target": "compositions/components/scan-band.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "wordmark",
+      "type": "string",
+      "role": "content",
+      "label": "Wordmark",
+      "description": "Text displayed by the scan effect.",
+      "default": "HYPERFRAMES"
+    },
+    {
+      "id": "band_angle",
+      "type": "number",
+      "role": "layout",
+      "label": "Band angle",
+      "description": "Diagonal angle of the distortion band in degrees.",
+      "default": 12,
+      "min": -30,
+      "max": 30,
+      "step": 1,
+      "unit": "deg"
+    }
+  ]
+}
diff --git a/registry/components/scan-band/scan-band.html b/registry/components/scan-band/scan-band.html
new file mode 100644
index 0000000000..fe4ad60f2d
--- /dev/null
+++ b/registry/components/scan-band/scan-band.html
@@ -0,0 +1,216 @@
+<!doctype html>
+<!--
+  scan-band: HyperFrames video primitive
+
+  A single diagonal distortion band crosses a clean wordmark. Inside the
+  band, three clipped clones create red and cyan separation plus a small
+  horizontal displacement. Everywhere outside the band remains clean.
+
+  Variables:
+    - wordmark (string, default "HYPERFRAMES"): displayed text.
+    - band_angle (number, default 12): diagonal band angle in degrees.
+
+  Envelope:
+    IN_BASE  = 0.45s, the clean wordmark fades into place.
+    HOLD     = elastic, the band sweeps once, then leaves a clean wordmark.
+    OUT_BASE = 0.45s, the clean wordmark fades away.
+    If the duration is shorter than IN_BASE + OUT_BASE, IN and OUT compress
+    together and HOLD becomes zero. Only HOLD grows for longer mounts.
+
+  Mount contract: the runtime clones only this template. #root fills the
+  host box, establishes the container query basis, and registers one paused
+  timeline under the hardcoded scan-band id.
+-->
+<html
+  lang="en"
+  data-composition-id="scan-band"
+  data-composition-duration="3.5"
+  data-composition-variables='[
+    { "id": "wordmark", "type": "string", "role": "content", "label": "Wordmark", "description": "Text displayed by the scan effect.", "default": "HYPERFRAMES" },
+    { "id": "band_angle", "type": "number", "role": "layout", "label": "Band angle", "description": "Diagonal angle of the distortion band in degrees.", "default": 12, "min": -30, "max": 30, "step": 1, "unit": "deg" }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Scan Band</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="scan-band" data-duration="3.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            background: var(--bg, #0b0c0e);
+            color: var(--fg, #f7f8fa);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .sb-clip,
+          .sb-stage,
+          .sb-band,
+          .sb-clone {
+            position: absolute;
+            inset: 0;
+          }
+
+          .sb-clip,
+          .sb-stage,
+          .sb-clone {
+            display: grid;
+            place-items: center;
+          }
+
+          .sb-stage {
+            opacity: 0;
+          }
+
+          .sb-wordmark,
+          .sb-clone {
+            font-size: clamp(28px, 13cqw, 150px);
+            font-weight: 850;
+            line-height: 0.86;
+            letter-spacing: -0.065em;
+            white-space: nowrap;
+          }
+
+          .sb-wordmark {
+            color: var(--fg, #f7f8fa);
+            text-shadow: 0 1.2cqh 4cqh color-mix(in srgb, #000 45%, transparent);
+          }
+
+          .sb-band {
+            --sb-band-position: -60%;
+            --sb-half: 6%;
+            --sb-lean: 10.6%;
+            overflow: hidden;
+            clip-path: polygon(
+              calc(var(--sb-band-position) - var(--sb-half) - var(--sb-lean)) 0%,
+              calc(var(--sb-band-position) + var(--sb-half) - var(--sb-lean)) 0%,
+              calc(var(--sb-band-position) + var(--sb-half) + var(--sb-lean)) 100%,
+              calc(var(--sb-band-position) - var(--sb-half) + var(--sb-lean)) 100%
+            );
+            will-change: clip-path;
+          }
+
+          .sb-clone {
+            text-shadow: none;
+          }
+
+          .sb-clone-red {
+            color: #ff3158;
+            opacity: 0.9;
+            transform: translateX(-0.8cqw);
+          }
+
+          .sb-clone-cyan {
+            color: #36efff;
+            opacity: 0.9;
+            transform: translateX(1.7cqw);
+          }
+
+          .sb-clone-core {
+            color: var(--fg, #f7f8fa);
+            transform: translateX(0.65cqw);
+          }
+        </style>
+
+        <div
+          id="scan-band-clip"
+          class="sb-clip clip"
+          data-start="0"
+          data-duration="3.5"
+          data-track-index="0"
+        >
+          <div class="sb-stage" role="img">
+            <span class="sb-wordmark"></span>
+            <div class="sb-band" aria-hidden="true">
+              <span class="sb-clone sb-clone-red"></span>
+              <span class="sb-clone sb-clone-cyan"></span>
+              <span class="sb-clone sb-clone-core"></span>
+            </div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".sb-stage");
+            var wordmark = root.querySelector(".sb-wordmark");
+            var band = root.querySelector(".sb-band");
+            var clones = root.querySelectorAll(".sb-clone");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var text = vars.wordmark == null ? "HYPERFRAMES" : String(vars.wordmark);
+            var angleValue = vars.band_angle;
+            var bandAngle = Number.isFinite(angleValue)
+              ? Math.max(-30, Math.min(30, angleValue))
+              : 12;
+
+            wordmark.textContent = text;
+            stage.setAttribute("aria-label", text);
+            clones.forEach(function (clone) {
+              clone.textContent = text;
+            });
+
+            var lean = Math.tan((bandAngle * Math.PI) / 180) * 50;
+            band.style.setProperty("--sb-lean", lean.toFixed(3) + "%");
+
+            var IN_BASE = 0.45;
+            var OUT_BASE = 0.45;
+            var SWEEP_BASE = 1.65;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "3.5"));
+            var fixedTotal = IN_BASE + OUT_BASE;
+            var phaseScale = duration < fixedTotal ? duration / fixedTotal : 1;
+            var IN = IN_BASE * phaseScale;
+            var OUT = OUT_BASE * phaseScale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var OUT_START = IN + HOLD;
+            var SWEEP = Math.min(SWEEP_BASE, HOLD);
+
+            gsap.set(stage, { opacity: 0 });
+            gsap.set(band, { "--sb-band-position": "-60%" });
+
+            var tl = gsap.timeline({ paused: true });
+            tl.to(stage, { opacity: 1, duration: IN, ease: "power2.out" }, 0);
+
+            if (SWEEP > 0) {
+              tl.fromTo(
+                band,
+                { "--sb-band-position": "-60%" },
+                {
+                  "--sb-band-position": "160%",
+                  duration: SWEEP,
+                  ease: "power2.out",
+                },
+                IN,
+              );
+            }
+
+            tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines["scan-band"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/scramble-reveal/README.md b/registry/components/scramble-reveal/README.md
new file mode 100644
index 0000000000..56be6d555a
--- /dev/null
+++ b/registry/components/scramble-reveal/README.md
@@ -0,0 +1,35 @@
+# scramble-reveal
+
+A target string begins as deterministic wrong glyphs and resolves one character at a time, left to right. Every visible frame comes from one fixed-seed LCG table built before the timeline registers, so seeks in either direction always show the same string. The locked string then holds until the frame cuts.
+
+3s authored, elastic HOLD, exit `none` by default.
+
+## Variables
+
+| id       | type   | default       | notes                                                                                                                      |
+| -------- | ------ | ------------- | -------------------------------------------------------------------------------------------------------------------------- |
+| `text`   | string | `HYPERFRAMES` | Target string. Font size auto-fits to character count.                                                                     |
+| `accent` | enum   | `green`       | Text, prefix, and frame color: green rides `--brand`, blue rides `--accent`, violet rides `--accent-2`.                    |
+| `style`  | enum   | `terminal`    | `terminal` (framed shell with `>_` prefix) or `clean` (text only).                                                         |
+| `exit`   | enum   | `none`        | `none` holds until the cut; `fade` departs opacity-only; `up` is the curved arc departure (the pre-Wave-J default ending). |
+
+## Mount
+
+```html
+<div
+  class="clip"
+  data-composition-id="scramble-reveal"
+  data-composition-src="./scramble-reveal.html"
+  data-variable-values='{"text":"DETERMINISM","style":"clean","accent":"violet"}'
+  data-start="0"
+  data-duration="3"
+  data-track-index="0"
+></div>
+```
+
+Elastic root: no `data-width`/`data-height`; it fills whatever box the host clip gives it. Timeline registers under the literal `scramble-reveal` key.
+
+## Notes
+
+- Deterministic: fixed LCG seed `0x27c0ffee`, authored 30fps frame rows, monotonic left-to-right lock frames.
+- The hold is a finite drift cycle followed by authored stillness, never a repeating tween.
diff --git a/registry/components/scramble-reveal/demo.html b/registry/components/scramble-reveal/demo.html
new file mode 100644
index 0000000000..15153cc38a
--- /dev/null
+++ b/registry/components/scramble-reveal/demo.html
@@ -0,0 +1,90 @@
+<!doctype html>
+<!--
+  scramble-reveal demo. This standalone composition mounts the primitive
+  through data-composition-src. Non-default text, accent, and style values
+  prove the variable path while the primitive remains elastic to its host.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Scramble Reveal Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #0b0c0e);
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --surface: #14171c;
+        --border: #343a46;
+        --brand: #71f5a7;
+        --accent: #c5a3ff;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(
+          ellipse at 50% 44%,
+          var(--bg, #171a20) 0%,
+          var(--bg, #0b0c0e) 72%
+        );
+      }
+
+      .mount-card {
+        width: 76%;
+        height: 40%;
+        left: 12%;
+        top: 30%;
+        container-type: size;
+        overflow: hidden;
+        border: 1px solid color-mix(in srgb, var(--border, #94a3b8) 20%, transparent);
+        border-radius: 30px;
+        background: color-mix(in srgb, var(--surface, #101318) 72%, transparent);
+        box-shadow: 0 40px 100px color-mix(in srgb, var(--bg, #000000) 48%, transparent);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="scramble-reveal-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="3"
+      data-fps="30"
+    >
+      <div
+        id="scramble-reveal-mount"
+        class="mount-card clip"
+        data-composition-id="scramble-reveal"
+        data-composition-src="./scramble-reveal.html"
+        data-variable-values='{"text":"SEEK SAFE","accent":"violet","style":"clean"}'
+        data-start="0"
+        data-duration="3"
+        data-track-index="0"
+        data-width="1459"
+        data-height="432"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["scramble-reveal-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/scramble-reveal/registry-item.json b/registry/components/scramble-reveal/registry-item.json
new file mode 100644
index 0000000000..49bfb29bd4
--- /dev/null
+++ b/registry/components/scramble-reveal/registry-item.json
@@ -0,0 +1,68 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "scramble-reveal",
+  "type": "hyperframes:component",
+  "title": "Scramble Reveal",
+  "description": "A deterministic hacker-style text reveal that cycles fixed glyph rows and locks the target string from left to right.",
+  "tags": ["motion-primitive", "text-effects", "scramble", "reveal", "deterministic"],
+  "jobs": ["reveal"],
+  "family": "text-effects",
+  "profile": "decode",
+  "evidence": "Wave H U27 design research: fixed-seed glyph cycling with authored left-to-right lock frames",
+  "syncPoints": [{ "id": "scramble-lock", "phase": "in", "offset": 1.5 }],
+  "files": [
+    {
+      "path": "scramble-reveal.html",
+      "target": "compositions/components/scramble-reveal.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "text",
+      "type": "string",
+      "role": "content",
+      "label": "Text",
+      "description": "Target string that resolves from deterministic wrong glyphs.",
+      "default": "HYPERFRAMES"
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Color used by the text, prefix, and optional terminal frame.",
+      "default": "green",
+      "options": [
+        { "value": "green", "label": "Green" },
+        { "value": "blue", "label": "Blue" },
+        { "value": "violet", "label": "Violet" }
+      ]
+    },
+    {
+      "id": "style",
+      "type": "enum",
+      "role": "style",
+      "label": "Style",
+      "description": "Terminal frame or clean text-only presentation.",
+      "default": "terminal",
+      "options": [
+        { "value": "terminal", "label": "Terminal" },
+        { "value": "clean", "label": "Clean" }
+      ]
+    },
+    {
+      "id": "exit",
+      "type": "enum",
+      "role": "timing",
+      "label": "Exit",
+      "description": "Optional departure. Default none: the locked string holds until the frame cuts.",
+      "default": "none",
+      "options": [
+        { "value": "none", "label": "None" },
+        { "value": "fade", "label": "Fade" },
+        { "value": "up", "label": "Up" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/scramble-reveal/scramble-reveal.html b/registry/components/scramble-reveal/scramble-reveal.html
new file mode 100644
index 0000000000..e78385dd99
--- /dev/null
+++ b/registry/components/scramble-reveal/scramble-reveal.html
@@ -0,0 +1,289 @@
+<!doctype html>
+<!--
+  scramble-reveal: HyperFrames video primitive (text effects / reveal)
+
+  A target string begins as deterministic wrong glyphs, then resolves one
+  character at a time from left to right. Every visible frame comes from one
+  fixed-seed LCG table built before the timeline is registered.
+
+  Variables:
+    - text (string, default "HYPERFRAMES"): the target string.
+    - accent (green | blue | violet, default "green"): text and frame color.
+    - style (terminal | clean, default "terminal"): optional terminal frame.
+    - exit (none | fade | up, default "none"): optional departure.
+
+  Envelope, fixed IN and OUT with elastic HOLD only:
+    IN_BASE  = 1.65s, curved arrival and the complete left-to-right lock
+    HOLD     = max(0, D - IN - OUT), subtle drift followed by 0.30s stillness
+    OUT_BASE = 0.45s departure when exit is fade or up, 0s when exit is
+               none (the default: the locked string holds until the cut)
+    If D is shorter than IN_BASE + OUT_BASE, IN and OUT compress together.
+    The timeline is never time-scaled.
+
+  Determinism: frameTable is computed exactly once during synchronous
+  timeline construction from fixed LCG seed 0x27c0ffee. Timeline sets only
+  read authored rows from that table, so repeated or reverse seeks produce
+  the same string for the same time.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, has no data-width or data-height,
+  and registers one paused timeline under the literal scramble-reveal key.
+-->
+<html
+  lang="en"
+  data-composition-id="scramble-reveal"
+  data-composition-duration="3"
+  data-composition-variables='[
+    { "id": "text", "type": "string", "role": "content", "label": "Text", "description": "Target string that resolves from deterministic wrong glyphs.", "default": "HYPERFRAMES" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Color used by the text, prefix, and optional terminal frame.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "style", "type": "enum", "role": "style", "label": "Style", "description": "Terminal frame or clean text-only presentation.", "default": "terminal", "options": [{ "value": "terminal", "label": "Terminal" }, { "value": "clean", "label": "Clean" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the locked string holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Scramble Reveal</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="scramble-reveal" data-duration="3" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            pointer-events: none;
+          }
+
+          .sr-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .sr-stage {
+            display: block;
+            width: 88cqw;
+            max-width: 88cqw;
+            will-change: transform, opacity;
+          }
+
+          .sr-shell {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            min-height: 34cqh;
+            padding: var(--space-3, 5cqh) var(--space-3, 5cqw);
+            overflow: hidden;
+            border: 0.16cqmin solid color-mix(in srgb, var(--sr-accent) 58%, var(--border, #475569));
+            border-radius: var(--radius, 2.4cqmin);
+            background: color-mix(in srgb, var(--surface, #0b1016) 92%, var(--sr-accent));
+            box-shadow:
+              0 3.5cqh 10cqh color-mix(in srgb, var(--bg, #000000) 42%, transparent),
+              inset 0 0 4cqh color-mix(in srgb, var(--sr-accent) 7%, transparent);
+          }
+
+          .sr-prefix {
+            flex: 0 0 auto;
+            margin-right: var(--space-1, 1.8cqw);
+            color: color-mix(in srgb, var(--sr-accent) 78%, var(--fg, #ffffff));
+            font-size: calc(var(--sr-font-size) * 0.74);
+            font-weight: 700;
+            line-height: 1;
+            opacity: 0.78;
+          }
+
+          .sr-text {
+            display: block;
+            min-width: 0;
+            overflow: hidden;
+            color: var(--sr-accent);
+            font-size: var(--sr-font-size);
+            font-weight: 780;
+            line-height: 1;
+            letter-spacing: 0.055em;
+            text-align: center;
+            text-shadow: 0 0 2.8cqh color-mix(in srgb, var(--sr-accent) 34%, transparent);
+            white-space: pre;
+          }
+
+          .sr-stage.sr-clean .sr-shell {
+            min-height: 26cqh;
+            padding: var(--space-2, 3cqh) var(--space-2, 2cqw);
+            border-color: transparent;
+            background: transparent;
+            box-shadow: none;
+          }
+
+          .sr-stage.sr-clean .sr-prefix {
+            display: none;
+          }
+        </style>
+
+        <div
+          id="scramble-reveal-clip"
+          class="sr-clip clip"
+          data-start="0"
+          data-duration="3"
+          data-track-index="0"
+        >
+          <div class="sr-stage" role="img">
+            <div class="sr-shell">
+              <span class="sr-prefix" aria-hidden="true">&gt;_</span>
+              <span class="sr-text" aria-hidden="true"></span>
+            </div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".sr-stage");
+            var textElement = root.querySelector(".sr-text");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var text = vars.text == null ? "HYPERFRAMES" : String(vars.text);
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme (green/blue/violet must
+            // not collapse into one themed accent).
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var style = vars.style === "clean" ? "clean" : "terminal";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            root.style.setProperty("--sr-accent", accentColors[accent]);
+            stage.classList.toggle("sr-clean", style === "clean");
+            stage.setAttribute("aria-label", text);
+
+            var characters = Array.from(text);
+            var fittedCqw = Math.min(11, 118 / Math.max(1, characters.length));
+            root.style.setProperty("--sr-font-size", "min(" + fittedCqw.toFixed(3) + "cqw, 24cqh)");
+
+            var IN_BASE = 1.65;
+            var OUT_BASE = exit === "none" ? 0 : 0.45;
+            var ARRIVAL_BASE = 0.42;
+            var LOCK_TAIL_BASE = 0.15;
+            var STILLNESS = 0.3;
+            var FPS = 30;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "3"));
+            var totalBase = Math.max(0.001, IN_BASE + OUT_BASE);
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var ARRIVAL = ARRIVAL_BASE * scale;
+            var LOCK_TAIL = LOCK_TAIL_BASE * scale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var HOLD_START = IN;
+            var OUT_START = IN + HOLD;
+            var REVEAL_DURATION = Math.max(0, IN - LOCK_TAIL);
+            var lastFrame = Math.max(1, Math.round(REVEAL_DURATION * FPS));
+
+            // The LCG and all character-state decisions live here. This IIFE
+            // runs once before timeline construction, then only frameTable is
+            // read. Lock frames are monotonic by character index, so the final
+            // target resolves strictly from left to right.
+            var frameTable = (function () {
+              var glyphs = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789#$%&*+?<>";
+              var state = 0x27c0ffee;
+              var firstLockFrame = Math.min(lastFrame, Math.max(1, Math.round(0.2 * FPS * scale)));
+              var lockFrames = characters.map(function (character, index) {
+                if (/\s/.test(character)) return 0;
+                var position = characters.length <= 1 ? 1 : index / (characters.length - 1);
+                return Math.round(firstLockFrame + position * (lastFrame - firstLockFrame));
+              });
+              var rows = [];
+
+              for (var frame = 0; frame <= lastFrame; frame += 1) {
+                var row = characters
+                  .map(function (character, index) {
+                    if (/\s/.test(character) || frame >= lockFrames[index]) return character;
+
+                    state = (Math.imul(1664525, state) + 1013904223) >>> 0;
+                    var glyphIndex = state % glyphs.length;
+                    var glyph = glyphs.charAt(glyphIndex);
+                    if (glyph === character)
+                      glyph = glyphs.charAt((glyphIndex + 1) % glyphs.length);
+                    return glyph;
+                  })
+                  .join("");
+                rows.push(row);
+              }
+
+              return rows;
+            })();
+
+            gsap.set(stage, { opacity: 0, x: "-4cqw", y: "2.4cqh" });
+            textElement.textContent = frameTable[0];
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: independently eased axes form the arrival arc. The authored
+            // frame rows then lock the target from left to right at 30 fps.
+            tl.to(stage, { opacity: 1, duration: ARRIVAL, ease: "power2.out" }, 0);
+            tl.to(stage, { x: "0cqw", duration: ARRIVAL, ease: "power3.out" }, 0);
+            tl.to(stage, { y: "0cqh", duration: ARRIVAL, ease: "sine.inOut" }, 0);
+            frameTable.forEach(function (row, frame) {
+              tl.set(textElement, { textContent: row }, frame / FPS);
+            });
+
+            // HOLD: finite drift ends with authored stillness before departure.
+            var driftHalf = Math.max(0, HOLD - STILLNESS) / 2;
+            if (driftHalf > 0) {
+              tl.to(
+                stage,
+                {
+                  y: "-0.55cqh",
+                  duration: driftHalf,
+                  ease: "sine.inOut",
+                  yoyo: true,
+                  repeat: 1,
+                },
+                HOLD_START,
+              );
+            }
+
+            // OUT: optional departure; exit none holds until the frame cuts.
+            // The up exit keeps the original curved arc departure.
+            if (exit === "up") {
+              tl.to(stage, { x: "5cqw", duration: OUT, ease: "power2.in" }, OUT_START);
+              tl.to(stage, { y: "-3.5cqh", duration: OUT, ease: "sine.inOut" }, OUT_START);
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "fade") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["scramble-reveal"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/screen-flow-carousel/README.md b/registry/components/screen-flow-carousel/README.md
new file mode 100644
index 0000000000..a0560b0cd3
--- /dev/null
+++ b/registry/components/screen-flow-carousel/README.md
@@ -0,0 +1,52 @@
+# screen-flow-carousel
+
+Two to five app screens ride a horizontal rail. One screen is primary at center while its neighbors recede (smaller and dimmer). On each cue the whole rail advances one screen with a velocity-matched throw: a fast lateral translate that sheds speed quickly, then a smooth long-tail catch onto the next center (the velocity-throw-snap motion law with the snap softened to the smooth register: no overshoot, both sides always moving the same direction). A mono caption under the rail swaps with each advance.
+
+5s authored, elastic HOLD, exit `none` by default.
+
+## Variables
+
+| id         | type   | default | notes                                                                                                                                                                                                                   |
+| ---------- | ------ | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `screens`  | number | `3`     | 2 to 5 screens on the rail.                                                                                                                                                                                             |
+| `captions` | string | `""`    | Comma-separated caption per screen. Blank entries use the authored defaults (Overview, Details, Insights, Activity, Settings).                                                                                          |
+| `cues`     | string | `""`    | Comma-separated advance times in seconds from mount start (`screens - 1` advances). Blank entries use the authored even rhythm; values are clamped inside the hold and kept far enough apart that throws never overlap. |
+| `accent`   | enum   | `green` | Active ring, caption dot, and skeleton accents: green rides `--brand`, blue rides `--accent`, violet rides `--accent-2`.                                                                                                |
+| `exit`     | enum   | `none`  | `none` holds the final screen until the cut; `fade` departs opacity-only; `up` fades while rising.                                                                                                                      |
+
+## Screen slots
+
+Screens are slots. Place inert templates anywhere in the HOST page (templates never render, and the runtime wipes the host clip's own children on mount, so slots live at document level):
+
+```html
+<template data-slot="screen-flow-carousel-screen-1">
+  <img src="./shots/dashboard.png" alt="" />
+</template>
+<template data-slot="screen-flow-carousel-screen-2">
+  <video src="./shots/flow.mp4" muted></video>
+</template>
+```
+
+Slot content may be an `<img>`, a muted `<video>`, or arbitrary HTML; direct img/video children are stretched to cover the screen. Any screen without a slot renders a token-styled skeleton; the four variants (list, cards, chart, detail) cycle by index so adjacent defaults never repeat.
+
+## Mount
+
+```html
+<div
+  class="clip"
+  data-composition-id="screen-flow-carousel"
+  data-composition-src="./screen-flow-carousel.html"
+  data-variable-values='{"screens":4,"captions":"Capture,Compose,Render,Publish","cues":"1.3,2.4,3.5","accent":"blue"}'
+  data-start="0"
+  data-duration="5"
+  data-track-index="0"
+></div>
+```
+
+Elastic root: no `data-width`/`data-height`; it fills whatever box the host clip gives it. Timeline registers under the literal `screen-flow-carousel` key.
+
+## Notes
+
+- Rail position is CSS-owned through the numeric `--sfc-pos` custom property; GSAP tweens only that number plus per-screen scale/opacity with explicit endpoints, so any seek order lands identical frames.
+- The active ring is opacity-only over a CSS accent border, so no `var()` color string is ever GSAP-tweened.
+- Envelope: fixed IN (0.9s settle) and OUT (0.45s, only when `exit` is not `none`) with an elastic HOLD; all advances live inside the hold and the last throw always lands with stillness left before the cut. Never time-scaled.
diff --git a/registry/components/screen-flow-carousel/demo.html b/registry/components/screen-flow-carousel/demo.html
new file mode 100644
index 0000000000..77be840b92
--- /dev/null
+++ b/registry/components/screen-flow-carousel/demo.html
@@ -0,0 +1,91 @@
+<!doctype html>
+<!--
+  screen-flow-carousel demo. This standalone composition mounts the primitive
+  through data-composition-src. Non-default screens, captions, cues, and
+  accent values prove the variable path while the primitive stays elastic to
+  its host box.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Screen Flow Carousel Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #0b0c0e);
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --muted: #8b93a3;
+        --surface: #14171c;
+        --border: #343a46;
+        --brand: #71f5a7;
+        --accent: #61a8ff;
+        --accent-2: #c5a3ff;
+        --font-body: Inter, ui-sans-serif, system-ui, sans-serif;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(
+          ellipse at 50% 40%,
+          var(--bg, #171a20) 0%,
+          var(--bg, #0b0c0e) 74%
+        );
+      }
+
+      .mount-card {
+        width: 84%;
+        height: 78%;
+        left: 8%;
+        top: 11%;
+        container-type: size;
+        overflow: hidden;
+        border-radius: 24px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="screen-flow-carousel-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+      data-fps="30"
+    >
+      <div
+        id="screen-flow-carousel-mount"
+        class="mount-card clip"
+        data-composition-id="screen-flow-carousel"
+        data-composition-src="./screen-flow-carousel.html"
+        data-variable-values='{"screens":4,"captions":"Capture,Compose,Render,Publish","cues":"1.3,2.4,3.5","accent":"blue"}'
+        data-start="0"
+        data-duration="5"
+        data-track-index="0"
+        data-width="1613"
+        data-height="842"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["screen-flow-carousel-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/screen-flow-carousel/registry-item.json b/registry/components/screen-flow-carousel/registry-item.json
new file mode 100644
index 0000000000..db87ee073b
--- /dev/null
+++ b/registry/components/screen-flow-carousel/registry-item.json
@@ -0,0 +1,74 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "screen-flow-carousel",
+  "type": "hyperframes:component",
+  "title": "Screen Flow Carousel",
+  "description": "Two to five app screens ride a horizontal rail: one primary at center, neighbors receded, advancing on cues with a velocity-matched throw and a smooth long-tail catch while a mono caption swaps with each advance. Screens are slots with token skeleton defaults.",
+  "tags": ["product-demo", "feature-tour", "carousel", "rail", "slot", "screens"],
+  "jobs": ["feature-tour"],
+  "family": "product-demo",
+  "profile": "carousel",
+  "evidence": "Wave J J2-1: velocity-throw-snap motion law with the snap softened to the smooth register; slots over canned art per the Wave-J deltas",
+  "files": [
+    {
+      "path": "screen-flow-carousel.html",
+      "target": "compositions/components/screen-flow-carousel.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "screens",
+      "type": "number",
+      "role": "content",
+      "label": "Screens",
+      "description": "How many screens ride the rail.",
+      "default": 3,
+      "min": 2,
+      "max": 5,
+      "step": 1
+    },
+    {
+      "id": "captions",
+      "type": "string",
+      "role": "content",
+      "label": "Captions",
+      "description": "Comma-separated caption per screen. Blank entries use the authored defaults.",
+      "default": ""
+    },
+    {
+      "id": "cues",
+      "type": "string",
+      "role": "timing",
+      "label": "Cues",
+      "description": "Comma-separated advance times in seconds from mount start. Blank entries use the authored even rhythm.",
+      "default": ""
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Token the active ring, caption dot, and skeleton accents ride.",
+      "default": "green",
+      "options": [
+        { "value": "green", "label": "Green" },
+        { "value": "blue", "label": "Blue" },
+        { "value": "violet", "label": "Violet" }
+      ]
+    },
+    {
+      "id": "exit",
+      "type": "enum",
+      "role": "timing",
+      "label": "Exit",
+      "description": "Optional departure. Default none: the final screen holds until the cut.",
+      "default": "none",
+      "options": [
+        { "value": "none", "label": "None" },
+        { "value": "fade", "label": "Fade" },
+        { "value": "up", "label": "Up" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/screen-flow-carousel/screen-flow-carousel.html b/registry/components/screen-flow-carousel/screen-flow-carousel.html
new file mode 100644
index 0000000000..937aa0a7d8
--- /dev/null
+++ b/registry/components/screen-flow-carousel/screen-flow-carousel.html
@@ -0,0 +1,576 @@
+<!doctype html>
+<!--
+  screen-flow-carousel -- HyperFrames video primitive (product demo / feature tour)
+
+  Two to five app screens ride a horizontal rail. One screen is primary at
+  center while its neighbors recede (smaller and dimmer). On each cue the
+  whole rail advances one screen with a velocity-matched throw: a fast
+  lateral translate that loses speed quickly, then a smooth long-tail catch
+  onto the next center. This is the velocity-throw-snap motion law with the
+  snap softened to the smooth register: no overshoot, no back ease, both
+  sides of the rail always moving the same direction. A mono caption under
+  the rail swaps with each advance.
+
+  Screens are SLOTS. Callers supply content by placing inert templates
+  anywhere in the HOST page (templates never render, and the runtime wipes
+  the host clip's own children on mount, so slots live at document level):
+
+    <template data-slot="screen-flow-carousel-screen-1"> ... </template>
+    <template data-slot="screen-flow-carousel-screen-2"> ... </template>
+    ... up to screen-5.
+
+  Slot content may be an <img>, a muted <video>, or arbitrary HTML; direct
+  img/video children are stretched to cover the screen. Any screen without a
+  slot renders a token-styled skeleton; the four skeleton variants (list,
+  cards, chart, detail) cycle by index so adjacent defaults never repeat.
+
+  Variables (declared in data-composition-variables below):
+    - screens (number 2 to 5, default 3): how many screens ride the rail.
+    - captions (string, default ""): comma-separated caption per screen.
+      Blank entries fall back to the authored defaults.
+    - cues (string, default ""): comma-separated advance times in seconds
+      relative to mount start (screens - 1 advances). Blank or invalid
+      entries use the authored even rhythm. Values are clamped inside the
+      hold and kept far enough apart that throws never overlap.
+    - accent (green | blue | violet, default green): green rides --brand,
+      blue rides --accent, violet rides --accent-2.
+    - exit (none | fade | up, default none): frame roots own transitions;
+      the default holds the final screen to the last pixel.
+
+  Envelope, fixed IN and OUT with elastic HOLD only (never timeScale):
+    IN_BASE  = 0.90s  one stage settle (rise + fade), screen 1 primary
+    HOLD     = max(0, D - IN - OUT); all advances live here, clamped so the
+               last throw lands with stillness left before the cut
+    OUT_BASE = 0.45s  only when exit is fade or up
+    If D < IN_BASE + OUT_BASE, IN and OUT compress together. The advance
+    rhythm re-spaces itself from whatever hold remains.
+
+  Mount contract: the runtime clones only this template. #root fills the
+  host box (no data-width/data-height, container-type: size, cq units), is
+  styled via #root only, and registers one paused timeline under the LITERAL
+  "screen-flow-carousel" key. Rail position is CSS-owned through the numeric
+  --sfc-pos custom property; GSAP tweens only that number plus
+  per-screen scale/opacity with explicit endpoints, so any seek order lands
+  identical frames.
+-->
+<html
+  lang="en"
+  data-composition-id="screen-flow-carousel"
+  data-composition-duration="5"
+  data-composition-variables='[
+    { "id": "screens", "type": "number", "role": "content", "label": "Screens", "description": "How many screens ride the rail.", "default": 3, "min": 2, "max": 5, "step": 1 },
+    { "id": "captions", "type": "string", "role": "content", "label": "Captions", "description": "Comma-separated caption per screen. Blank entries use the authored defaults.", "default": "" },
+    { "id": "cues", "type": "string", "role": "timing", "label": "Cues", "description": "Comma-separated advance times in seconds from mount start. Blank entries use the authored even rhythm.", "default": "" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Token the active ring, caption dot, and skeleton accents ride.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the final screen holds until the cut.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Screen Flow Carousel</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="screen-flow-carousel" data-duration="5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            --sfc-w: 44;
+            --sfc-gap: 4;
+            --sfc-pos: 0;
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, ui-sans-serif, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .sfc-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .sfc-stage {
+            position: absolute;
+            inset: 0;
+            will-change: transform, opacity;
+          }
+
+          /* The rail: one flex row, position owned by the numeric custom
+             property --sfc-pos (fractional index of the centered screen).
+             GSAP tweens that number; CSS does all the geometry in cqw. */
+          .sfc-rail {
+            position: absolute;
+            top: 9cqh;
+            left: 0;
+            display: flex;
+            align-items: stretch;
+            gap: calc(var(--sfc-gap) * 1cqw);
+            width: max-content;
+            height: 64cqh;
+            transform: translateX(
+              calc(
+                (50 - var(--sfc-w) / 2 - var(--sfc-pos) * (var(--sfc-w) + var(--sfc-gap))) * 1cqw
+              )
+            );
+            will-change: transform;
+          }
+
+          .sfc-screen {
+            position: relative;
+            flex: 0 0 calc(var(--sfc-w) * 1cqw);
+            overflow: hidden;
+            border: 0.16cqmin solid color-mix(in srgb, var(--border, #475569) 70%, transparent);
+            border-radius: var(--radius, 2.4cqmin);
+            background: color-mix(in srgb, var(--surface, #0f141b) 94%, var(--bg, #05070c));
+            box-shadow: 0 2.6cqh 7cqh color-mix(in srgb, var(--bg, #000000) 42%, transparent);
+            transform-origin: 50% 50%;
+            will-change: transform, opacity;
+          }
+
+          .sfc-body {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+          }
+
+          .sfc-body > img,
+          .sfc-body > video {
+            display: block;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+          }
+
+          /* Active ring: opacity-only accent border so no var() color is
+             ever GSAP-tweened. */
+          .sfc-ring {
+            position: absolute;
+            inset: 0;
+            z-index: 2;
+            border: 0.24cqmin solid color-mix(in srgb, var(--sfc-accent) 78%, transparent);
+            border-radius: inherit;
+            opacity: 0;
+            pointer-events: none;
+          }
+
+          /* Caption band: absolutely stacked mono captions, one visible. */
+          .sfc-captions {
+            position: absolute;
+            top: 78cqh;
+            left: 10cqw;
+            right: 10cqw;
+            height: 12cqh;
+          }
+
+          .sfc-caption {
+            position: absolute;
+            inset: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: var(--space-1, 1.4cqmin);
+            overflow: hidden;
+            color: var(--muted, #8b93a3);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            font-size: 2.7cqmin;
+            font-weight: 500;
+            letter-spacing: 0.12em;
+            white-space: nowrap;
+            will-change: transform, opacity;
+          }
+
+          .sfc-caption::before {
+            content: "";
+            flex: 0 0 auto;
+            width: 1.1cqmin;
+            height: 1.1cqmin;
+            border-radius: 50%;
+            background: var(--sfc-accent);
+          }
+
+          /* Skeleton furniture: pure token surfaces, no branding, weights
+             stay in the register (blocks, no bold type). */
+          .sfc-skel {
+            position: absolute;
+            inset: 0;
+            display: flex;
+            flex-direction: column;
+            gap: var(--space-2, 2cqmin);
+            padding: var(--space-3, 2.8cqmin);
+          }
+
+          .sfc-skel-heading {
+            flex: 0 0 auto;
+            width: 38%;
+            height: 2.3cqmin;
+            border-radius: 999px;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 22%, transparent);
+          }
+
+          .sfc-skel-line {
+            flex: 0 0 auto;
+            height: 1.2cqmin;
+            border-radius: 999px;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 11%, transparent);
+          }
+
+          .sfc-skel-row {
+            display: flex;
+            flex: 0 0 auto;
+            align-items: center;
+            gap: var(--space-1, 1.6cqmin);
+          }
+
+          .sfc-skel-row .sfc-skel-line {
+            flex: 1 1 auto;
+          }
+
+          .sfc-skel-dot {
+            flex: 0 0 auto;
+            width: 1.7cqmin;
+            height: 1.7cqmin;
+            border-radius: 50%;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 16%, transparent);
+          }
+
+          .sfc-skel-row:first-of-type .sfc-skel-dot {
+            background: color-mix(in srgb, var(--sfc-accent) 78%, transparent);
+          }
+
+          .sfc-skel-grid {
+            display: grid;
+            flex: 1;
+            grid-template-columns: repeat(2, minmax(0, 1fr));
+            gap: var(--space-2, 2cqmin);
+            min-height: 0;
+          }
+
+          .sfc-skel-card {
+            display: flex;
+            flex-direction: column;
+            gap: 1.4cqmin;
+            min-height: 0;
+            padding: 2cqmin;
+            border: 0.14cqmin solid color-mix(in srgb, var(--border, #475569) 60%, transparent);
+            border-radius: calc(var(--radius, 2cqmin) * 0.7);
+            background: color-mix(in srgb, var(--bg, #05070c) 30%, transparent);
+          }
+
+          .sfc-skel-card .sfc-skel-line {
+            width: 60%;
+          }
+
+          .sfc-skel-block {
+            flex: 1;
+            min-height: 2.6cqmin;
+            border-radius: calc(var(--radius, 2cqmin) * 0.5);
+            background: color-mix(in srgb, var(--fg, #f8fafc) 7%, transparent);
+          }
+
+          .sfc-skel-card:first-child .sfc-skel-block {
+            background: color-mix(in srgb, var(--sfc-accent) 17%, transparent);
+          }
+
+          .sfc-skel-bars {
+            display: flex;
+            flex: 1;
+            align-items: flex-end;
+            gap: var(--space-2, 2cqmin);
+            min-height: 0;
+            padding-top: 1cqmin;
+          }
+
+          .sfc-skel-bar {
+            flex: 1;
+            border-radius: 0.8cqmin 0.8cqmin 0 0;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 13%, transparent);
+          }
+
+          .sfc-skel-bar.sfc-skel-accent {
+            background: color-mix(in srgb, var(--sfc-accent) 62%, transparent);
+          }
+
+          .sfc-skel-chip {
+            flex: 0 0 auto;
+            width: 11cqmin;
+            height: 2.6cqmin;
+            border: 0.14cqmin solid color-mix(in srgb, var(--sfc-accent) 55%, transparent);
+            border-radius: 999px;
+            background: color-mix(in srgb, var(--sfc-accent) 24%, transparent);
+          }
+        </style>
+
+        <div
+          id="screen-flow-carousel-clip"
+          class="sfc-clip clip"
+          data-start="0"
+          data-duration="5"
+          data-track-index="0"
+        >
+          <div class="sfc-stage">
+            <div class="sfc-rail" role="list" aria-label="App screens"></div>
+            <div class="sfc-captions" aria-hidden="true"></div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".sfc-stage");
+            var rail = root.querySelector(".sfc-rail");
+            var captionsBand = root.querySelector(".sfc-captions");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var screensValue = Number(vars.screens);
+            var count = Number.isFinite(screensValue)
+              ? Math.max(2, Math.min(5, Math.round(screensValue)))
+              : 3;
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exitMode = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+            root.style.setProperty("--sfc-accent", accentColors[accent]);
+
+            var captionDefaults = ["Overview", "Details", "Insights", "Activity", "Settings"];
+            var captionList = String(vars.captions == null ? "" : vars.captions).split(",");
+
+            // SLOTS. Caller templates live at HOST DOCUMENT level (the mount
+            // wipes host-clip children, and templates never render). The
+            // scoped `document` proxy filters queries to this composition's
+            // subtree, so the lookup deliberately goes through ownerDocument.
+            var hostDoc = root.ownerDocument;
+            function slotContent(name) {
+              var tpl = null;
+              try {
+                tpl = hostDoc.querySelector(
+                  'template[data-slot="screen-flow-carousel-' + name + '"]',
+                );
+              } catch (error) {
+                tpl = null;
+              }
+              return tpl ? hostDoc.importNode(tpl.content, true) : null;
+            }
+
+            // Skeleton defaults cycle four variants so adjacent screens read
+            // as different app states. Pure token furniture, no branding.
+            var lines = function (widths) {
+              return widths
+                .map(function (width) {
+                  return '<span class="sfc-skel-line" style="width:' + width + '"></span>';
+                })
+                .join("");
+            };
+            var listRows = ["86%", "72%", "80%", "64%", "76%", "58%"]
+              .map(function (width) {
+                return (
+                  '<span class="sfc-skel-row"><span class="sfc-skel-dot"></span>' +
+                  '<span class="sfc-skel-line" style="max-width:' +
+                  width +
+                  '"></span></span>'
+                );
+              })
+              .join("");
+            var card =
+              '<span class="sfc-skel-card"><span class="sfc-skel-line"></span><span class="sfc-skel-block"></span></span>';
+            var bars = ["34%", "58%", "42%", "76%", "50%", "64%"]
+              .map(function (height, index) {
+                return (
+                  '<span class="sfc-skel-bar' +
+                  (index === 3 ? " sfc-skel-accent" : "") +
+                  '" style="height:' +
+                  height +
+                  '"></span>'
+                );
+              })
+              .join("");
+            var skeletons = [
+              '<div class="sfc-skel"><span class="sfc-skel-heading"></span>' +
+                listRows +
+                '<span class="sfc-skel-block"></span></div>',
+              '<div class="sfc-skel"><span class="sfc-skel-heading"></span><span class="sfc-skel-grid">' +
+                card +
+                card +
+                card +
+                card +
+                "</span></div>",
+              '<div class="sfc-skel"><span class="sfc-skel-heading"></span><span class="sfc-skel-bars">' +
+                bars +
+                "</span>" +
+                lines(["46%"]) +
+                "</div>",
+              '<div class="sfc-skel"><span class="sfc-skel-chip"></span><span class="sfc-skel-heading" style="width:56%"></span>' +
+                lines(["84%", "72%", "64%"]) +
+                '<span class="sfc-skel-block"></span></div>',
+            ];
+
+            var screens = [];
+            var rings = [];
+            var captions = [];
+            for (var i = 0; i < count; i += 1) {
+              var screen = hostDoc.createElement("article");
+              screen.className = "sfc-screen";
+              screen.setAttribute("role", "listitem");
+              var body = hostDoc.createElement("div");
+              body.className = "sfc-body";
+              var slot = slotContent("screen-" + (i + 1));
+              if (slot) {
+                body.appendChild(slot);
+              } else {
+                body.innerHTML = skeletons[i % skeletons.length];
+              }
+              var ring = hostDoc.createElement("span");
+              ring.className = "sfc-ring";
+              screen.appendChild(body);
+              screen.appendChild(ring);
+              rail.appendChild(screen);
+              screens.push(screen);
+              rings.push(ring);
+
+              var caption = hostDoc.createElement("span");
+              caption.className = "sfc-caption";
+              var captionText = (captionList[i] || "").trim();
+              caption.textContent = captionText !== "" ? captionText : captionDefaults[i];
+              captionsBand.appendChild(caption);
+              captions.push(caption);
+            }
+            screens[0].setAttribute("aria-current", "true");
+
+            // Envelope: fixed IN/OUT, elastic HOLD, never time-scaled. All
+            // advances live inside the hold; spacing re-derives from whatever
+            // hold the host duration leaves so throws can never overlap.
+            var IN_BASE = 0.9;
+            var OUT_BASE = exitMode === "none" ? 0 : 0.45;
+            var ADV_BASE = 0.84;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "5"));
+            var totalBase = IN_BASE + OUT_BASE;
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var OUT_START = duration - OUT;
+            var advanceCount = count - 1;
+            var TAIL = Math.min(0.4, Math.max(0, duration - IN - OUT) * 0.12);
+            var span = Math.max(0.05, duration - IN - OUT - TAIL);
+            var spacing = span / (advanceCount + 1);
+            var ADV = Math.min(ADV_BASE, spacing);
+            var latest = Math.max(IN, duration - OUT - ADV - 0.05);
+
+            var cueList = String(vars.cues == null ? "" : vars.cues).split(",");
+            var starts = [];
+            for (var k = 0; k < advanceCount; k += 1) {
+              var raw = (cueList[k] || "").trim();
+              var cue = Number(raw);
+              var wanted = raw !== "" && Number.isFinite(cue) ? cue : IN + (k + 1) * spacing;
+              var lower = k === 0 ? IN : starts[k - 1] + ADV;
+              var upper = Math.max(lower, latest - (advanceCount - 1 - k) * ADV);
+              starts.push(Math.min(Math.max(wanted, lower), upper));
+            }
+
+            // Explicit both-endpoint state so a seek to t=0 is always correct.
+            gsap.set(stage, { opacity: 0, y: "4cqh" });
+            gsap.set(rail, { "--sfc-pos": 0 });
+            screens.forEach(function (element, index) {
+              gsap.set(
+                element,
+                index === 0 ? { scale: 1, opacity: 1 } : { scale: 0.94, opacity: 0.62 },
+              );
+            });
+            rings.forEach(function (element, index) {
+              gsap.set(element, { opacity: index === 0 ? 1 : 0 });
+            });
+            captions.forEach(function (element, index) {
+              gsap.set(
+                element,
+                index === 0 ? { opacity: 1, y: "0cqh" } : { opacity: 0, y: "1.2cqh" },
+              );
+            });
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: one stage settle, screen 1 already primary.
+            tl.to(stage, { opacity: 1, duration: IN * 0.7, ease: "power2.out" }, 0);
+            tl.to(stage, { y: "0cqh", duration: IN, ease: "power3.out" }, 0);
+
+            // Advances: the softened throw law. Fast travel sheds most of its
+            // velocity under the whip-out ease, then a smooth long-tail catch
+            // lands the exact next center. No overshoot, no back ease.
+            var THROW_PART = 0.42;
+            starts.forEach(function (at, index) {
+              var target = index + 1;
+              var THROW = ADV * THROW_PART;
+              var CATCH = ADV - THROW;
+              tl.to(rail, { "--sfc-pos": target - 0.14, duration: THROW, ease: "power4.out" }, at);
+              tl.to(rail, { "--sfc-pos": target, duration: CATCH, ease: "power2.out" }, at + THROW);
+
+              tl.to(
+                screens[index],
+                { scale: 0.94, opacity: 0.62, duration: ADV, ease: "power2.out" },
+                at,
+              );
+              tl.to(
+                screens[target],
+                { scale: 1, opacity: 1, duration: ADV, ease: "power2.out" },
+                at,
+              );
+              tl.to(rings[index], { opacity: 0, duration: ADV * 0.5, ease: "power1.out" }, at);
+              tl.to(
+                rings[target],
+                { opacity: 1, duration: ADV * 0.6, ease: "power2.out" },
+                at + ADV * 0.4,
+              );
+
+              tl.to(
+                captions[index],
+                { opacity: 0, y: "-1.2cqh", duration: ADV * 0.4, ease: "power1.in" },
+                at,
+              );
+              tl.fromTo(
+                captions[target],
+                { opacity: 0, y: "1.2cqh" },
+                { opacity: 1, y: "0cqh", duration: ADV * 0.55, ease: "power2.out" },
+                at + ADV * 0.35,
+              );
+              tl.set(screens[index], { attr: { "aria-current": "false" } }, at);
+              tl.set(screens[target], { attr: { "aria-current": "true" } }, at);
+            });
+
+            // OUT: only when exit != none; the default holds the last frame.
+            if (exitMode !== "none") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+              if (exitMode === "up") {
+                tl.to(stage, { y: "-4cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              }
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["screen-flow-carousel"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/scroll-camera-story/README.md b/registry/components/scroll-camera-story/README.md
new file mode 100644
index 0000000000..f4e45ec440
--- /dev/null
+++ b/registry/components/scroll-camera-story/README.md
@@ -0,0 +1,50 @@
+# scroll-camera-story
+
+A compressed forced-scroll cinematic pass. A tall authored scene (four depth layers: far washes, mid hairline geometry, content sections, foreground accent motes) travels past the camera top to bottom. Layers move at different rates (far slowest, foreground fastest), each section rises softly as the camera reaches it, and the pass decelerates into a held final section that is byte-still.
+
+5.5s authored, elastic HOLD, exit `none` by default. Camera-servo law: one plain state object, one `applyCamera()` writer, micro-drift built from integer sine cycles that end at exactly zero when the final section lands. No cq units inside tweens (world height is set once at mount; all tweened transforms are percent-based).
+
+## Variables
+
+| id         | type   | default | notes                                                                                                                                                                                                                    |
+| ---------- | ------ | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `sections` | number | `3`     | Skeleton section count, 2 to 4. A sections slot overrides it with its own child count.                                                                                                                                   |
+| `travel`   | number | `220`   | Total camera travel in cqh. The world is `100 + travel` cqh tall; sections spread evenly along the travel.                                                                                                               |
+| `cues`     | string | `""`    | Comma-separated seconds: arrival times for the sections AFTER the first (the first is on screen at mount). A list with one extra leading value drops it as the mount section's. Empty keeps the authored default rhythm. |
+| `accent`   | enum   | `green` | green rides `--brand`, blue rides `--accent`, violet rides `--accent-2`.                                                                                                                                                 |
+| `exit`     | enum   | `none`  | `none` holds the final section until the cut; `fade`; `up`.                                                                                                                                                              |
+
+## Sections slot
+
+Place an inert template at HOST document level; each direct child becomes one section's card content, in order (clamped to 2 to 4 sections; sections without a slot child keep their token skeleton default, and the card shell stays so slot content inherits the token chrome):
+
+```html
+<template data-slot="scroll-camera-story-sections">
+  <div>first section content</div>
+  <div>second section content</div>
+  <div>third section content</div>
+</template>
+```
+
+## Mount
+
+```html
+<div
+  class="clip"
+  data-composition-id="scroll-camera-story"
+  data-composition-src="./scroll-camera-story.html"
+  data-variable-values='{"sections":4,"travel":300,"cues":"1.7,2.9,4.0","accent":"blue"}'
+  data-start="0"
+  data-duration="5.5"
+  data-track-index="0"
+></div>
+```
+
+Elastic root: no `data-width`/`data-height`; it fills whatever box the host clip gives it. Timeline registers under the literal `scroll-camera-story` key.
+
+## Notes
+
+- Camera segments never overlap (each move starts after the previous ends), so seeks in any order reproduce the exact frame; the quiet register is the only register (Wave K L2).
+- Keep `travel` near `100 x (sections - 1)` cqh for a continuous pass; much larger spacing gives decor-only interstitials between sections (the depth layers keep those frames alive, but no card is on screen).
+- Longer host durations stretch the final hold only; the default arrival rhythm scales from the mount duration, explicit `cues` are absolute seconds.
+- The hold is truly still: camera, drift, and the last section rise all end on the final arrival cue.
diff --git a/registry/components/scroll-camera-story/demo.html b/registry/components/scroll-camera-story/demo.html
new file mode 100644
index 0000000000..9073df26cc
--- /dev/null
+++ b/registry/components/scroll-camera-story/demo.html
@@ -0,0 +1,83 @@
+<!doctype html>
+<!--
+  scroll-camera-story demo. This standalone composition mounts the primitive
+  FULL-BLEED on a light token theme through data-composition-src. Non-default
+  sections, travel, cues, and accent values prove the variable path while the
+  primitive remains elastic to its host.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>scroll-camera-story Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #f2f4f7);
+      }
+
+      #root {
+        --bg: #f2f4f7;
+        --fg: #12161d;
+        --muted: #5b6472;
+        --surface: #ffffff;
+        --border: #d4d9e2;
+        --brand: #0e9f5a;
+        --accent: #2f6bff;
+        --accent-2: #7a4ddb;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #f2f4f7);
+      }
+
+      .mount-stage {
+        position: absolute;
+        inset: 0;
+        container-type: size;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="scroll-camera-story-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5.5"
+      data-fps="30"
+    >
+      <div
+        id="scroll-camera-story-mount"
+        class="mount-stage clip"
+        data-composition-id="scroll-camera-story"
+        data-composition-src="./scroll-camera-story.html"
+        data-variable-values='{"sections":4,"travel":300,"cues":"1.7,2.9,4.0","accent":"blue"}'
+        data-start="0"
+        data-duration="5.5"
+        data-track-index="0"
+        data-width="1920"
+        data-height="1080"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["scroll-camera-story-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/scroll-camera-story/registry-item.json b/registry/components/scroll-camera-story/registry-item.json
new file mode 100644
index 0000000000..420c9a97a6
--- /dev/null
+++ b/registry/components/scroll-camera-story/registry-item.json
@@ -0,0 +1,79 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "scroll-camera-story",
+  "type": "hyperframes:component",
+  "title": "Scroll Camera Story",
+  "description": "A compressed forced-scroll cinematic pass: a tall scene of slotted sections travels past the camera top to bottom, depth layers parallax at different rates, each section rises as the camera reaches it, and the pass decelerates into a held final section.",
+  "tags": ["camera", "scroll", "parallax", "story", "sections", "slot", "servo"],
+  "jobs": ["demonstrate"],
+  "family": "camera",
+  "profile": "camera",
+  "evidence": "Wave K K1: X expert study demand slate, forced-scroll cinematic pass; camera-servo law (one state object, one writer, integer-cycle drift ending at zero)",
+  "syncPoints": [{ "id": "final-section", "phase": "in", "offset": 4.2 }],
+  "files": [
+    {
+      "path": "scroll-camera-story.html",
+      "target": "compositions/components/scroll-camera-story.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "sections",
+      "type": "number",
+      "role": "content",
+      "label": "Sections",
+      "description": "How many skeleton sections ride the pass. A sections slot overrides this with its own child count.",
+      "default": 3,
+      "min": 2,
+      "max": 4,
+      "step": 1
+    },
+    {
+      "id": "travel",
+      "type": "number",
+      "role": "content",
+      "label": "Travel",
+      "description": "Total camera travel in cqh. The world is 100 + travel cqh tall.",
+      "default": 220,
+      "min": 100,
+      "max": 400,
+      "step": 10,
+      "unit": "cqh"
+    },
+    {
+      "id": "cues",
+      "type": "string",
+      "role": "timing",
+      "label": "Cues",
+      "description": "Comma-separated seconds: arrival times for the sections after the first. Empty keeps the authored default rhythm.",
+      "default": ""
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Token the skeleton accents and foreground motes ride.",
+      "default": "green",
+      "options": [
+        { "value": "green", "label": "Green" },
+        { "value": "blue", "label": "Blue" },
+        { "value": "violet", "label": "Violet" }
+      ]
+    },
+    {
+      "id": "exit",
+      "type": "enum",
+      "role": "style",
+      "label": "Exit",
+      "description": "Optional departure. None holds the final section.",
+      "default": "none",
+      "options": [
+        { "value": "none", "label": "None" },
+        { "value": "fade", "label": "Fade" },
+        { "value": "up", "label": "Up" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/scroll-camera-story/scroll-camera-story.html b/registry/components/scroll-camera-story/scroll-camera-story.html
new file mode 100644
index 0000000000..04b1417b1d
--- /dev/null
+++ b/registry/components/scroll-camera-story/scroll-camera-story.html
@@ -0,0 +1,805 @@
+<!doctype html>
+<!--
+  scroll-camera-story -- HyperFrames video primitive (camera)
+
+  A compressed forced-scroll cinematic pass: a tall authored scene travels
+  past the camera top to bottom. Four depth layers move at different rates
+  (far slowest, foreground fastest), sections enter with a soft rise as the
+  camera reaches them, and the pass decelerates into a held final section.
+
+  Camera-servo law: all camera state lives in ONE plain object (cam.t, the
+  pass progress 0 to 1) plus a drift object, and every layer transform is a
+  pure function of that state written by one applyCamera() writer. The world
+  wrapper carries the camera translate; depth layers carry derived parallax
+  offsets computed in the same writer, so any seek in any order reproduces
+  the exact frame. Micro-drift runs INTEGER sine cycles (2 on x-phase, 3 on
+  y-phase) that end at exactly zero when the final section lands, so the
+  held final section is byte-still.
+
+  Seek-safety trap (banked): cq-unit transform tweens blow up under seeks.
+  Nothing here tweens a cq unit. The world height is set ONCE at mount in
+  cqh; every tweened transform is percent-based (translate percent of the
+  element's own box, gsap yPercent on section cards) derived from plain
+  numbers, so no container-query re-resolution ever happens inside a tween.
+
+  Sections are SLOTS. Callers supply content by placing an inert template
+  at HOST DOCUMENT level (templates never render, and the runtime wipes the
+  host clip's own children on mount):
+
+    <template data-slot="scroll-camera-story-sections">
+      <div>first section content</div>
+      <div>second section content</div>
+    </template>
+
+  Each direct child of the template becomes one section's card content, in
+  order (clamped to 2-4 sections). Sections without a slot child keep their
+  token skeleton default. Without a slot, the `sections` variable picks how
+  many skeleton sections ride the pass.
+
+  Variables (declared in data-composition-variables below):
+    - sections (number 2-4, default 3): skeleton section count; a sections
+      slot overrides it with its own child count.
+    - travel (number cqh, default 220): total camera travel. The world is
+      (100 + travel) cqh tall; sections spread evenly along the travel.
+    - cues (string, default ""): comma-separated seconds, arrival times for
+      the sections AFTER the first (the first section is on screen at
+      mount). Empty keeps the authored default rhythm. If one extra value
+      is supplied, the first is treated as the mount section's and dropped.
+    - accent ("green" | "blue" | "violet", default "green"): green rides
+      --brand, blue rides --accent, violet rides --accent-2.
+    - exit ("none" | "fade" | "up", default "none"): frame roots own
+      transitions; the default holds the final section to the last pixel.
+
+  Envelope, fixed IN and OUT with elastic HOLD only (never timeScale):
+    IN_BASE  = 0.85s  stage fade + first section rise
+    PASS     = camera moves ending on each arrival cue, quiet register
+               (power2.inOut, longer final move: the pass decelerates)
+    HOLD     = elastic; drift ends at zero on the last arrival, then the
+               held final section is dead still
+    OUT_BASE = 0.50s  only when exit != none
+    If D is too short the fixed phases compress together.
+
+  Wave K laws: L1, camera segments never overlap (each move starts after
+  the previous ends, so no mid-motion redirect exists to snap velocity);
+  L2, the quiet register is the only register here, no percussive variant.
+
+  Mount contract: the runtime clones only this template. #root fills the
+  host box (no data-width/data-height, container-type: size, cq units in
+  static styles only), is styled via #root only, and registers one paused
+  timeline under the LITERAL "scroll-camera-story" key.
+-->
+<html
+  lang="en"
+  data-composition-id="scroll-camera-story"
+  data-composition-duration="5.5"
+  data-composition-variables='[
+    { "id": "sections", "type": "number", "role": "content", "label": "Sections", "description": "How many skeleton sections ride the pass. A sections slot overrides this with its own child count.", "default": 3, "min": 2, "max": 4, "step": 1 },
+    { "id": "travel", "type": "number", "role": "content", "label": "Travel", "description": "Total camera travel in cqh. The world is 100 + travel cqh tall.", "default": 220, "min": 100, "max": 400, "step": 10, "unit": "cqh" },
+    { "id": "cues", "type": "string", "role": "timing", "label": "Cues", "description": "Comma-separated seconds: arrival times for the sections after the first. Empty keeps the authored default rhythm.", "default": "" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Token the skeleton accents and foreground motes ride.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "style", "label": "Exit", "description": "Optional departure. None holds the final section.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Scroll Camera Story</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="scroll-camera-story" data-duration="5.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, ui-sans-serif, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .scs-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .scs-stage {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            background:
+              radial-gradient(
+                ellipse 120% 70% at 50% 0%,
+                color-mix(in srgb, var(--scs-accent) 6%, transparent) 0%,
+                transparent 60%
+              ),
+              var(--bg, #0b0c0e);
+            will-change: transform, opacity;
+          }
+
+          /* ONE world wrapper: the camera translate lives here; depth layers
+             below carry derived parallax offsets from the same writer. */
+          .scs-world {
+            position: absolute;
+            top: 0;
+            right: 0;
+            left: 0;
+            will-change: transform;
+          }
+
+          .scs-layer {
+            position: absolute;
+            inset: 0;
+            will-change: transform;
+          }
+
+          /* far layer: large soft washes, slowest */
+          .scs-blob {
+            position: absolute;
+            width: 64cqmin;
+            height: 64cqmin;
+            border-radius: 50%;
+            background: radial-gradient(
+              circle,
+              color-mix(in srgb, var(--scs-accent) 11%, transparent) 0%,
+              color-mix(in srgb, var(--scs-accent) 5%, transparent) 45%,
+              transparent 70%
+            );
+          }
+
+          .scs-blob:nth-child(1) {
+            top: 2%;
+            left: -14cqmin;
+          }
+
+          .scs-blob:nth-child(2) {
+            top: 17%;
+            right: -18cqmin;
+            width: 78cqmin;
+            height: 78cqmin;
+            background: radial-gradient(
+              circle,
+              color-mix(in srgb, var(--fg, #f8fafc) 6%, transparent) 0%,
+              color-mix(in srgb, var(--fg, #f8fafc) 3%, transparent) 45%,
+              transparent 70%
+            );
+          }
+
+          .scs-blob:nth-child(3) {
+            top: 34%;
+            left: 6cqw;
+          }
+
+          .scs-blob:nth-child(4) {
+            top: 48%;
+            right: 2cqw;
+            width: 56cqmin;
+            height: 56cqmin;
+          }
+
+          /* mid layer: hairline geometry */
+          .scs-ring {
+            position: absolute;
+            width: 16cqmin;
+            height: 16cqmin;
+            border: 0.16cqmin solid color-mix(in srgb, var(--fg, #f8fafc) 12%, transparent);
+            border-radius: 50%;
+          }
+
+          .scs-rule {
+            position: absolute;
+            width: 12cqmin;
+            height: 0.16cqmin;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 14%, transparent);
+          }
+
+          .scs-plus {
+            position: absolute;
+            width: 3.4cqmin;
+            height: 3.4cqmin;
+          }
+
+          .scs-plus::before,
+          .scs-plus::after {
+            position: absolute;
+            content: "";
+            background: color-mix(in srgb, var(--fg, #f8fafc) 18%, transparent);
+          }
+
+          .scs-plus::before {
+            top: 0;
+            bottom: 0;
+            left: calc(50% - 0.08cqmin);
+            width: 0.16cqmin;
+          }
+
+          .scs-plus::after {
+            top: calc(50% - 0.08cqmin);
+            right: 0;
+            left: 0;
+            height: 0.16cqmin;
+          }
+
+          .scs-ring:nth-of-type(1) {
+            top: 6%;
+            right: 12cqw;
+          }
+
+          .scs-ring:nth-of-type(2) {
+            top: 30%;
+            left: 9cqw;
+            width: 10cqmin;
+            height: 10cqmin;
+          }
+
+          .scs-ring:nth-of-type(3) {
+            top: 52%;
+            right: 8cqw;
+            width: 22cqmin;
+            height: 22cqmin;
+            border-color: color-mix(in srgb, var(--fg, #f8fafc) 8%, transparent);
+          }
+
+          .scs-rule:nth-of-type(1) {
+            top: 14%;
+            left: 12cqw;
+            transform: rotate(90deg);
+          }
+
+          .scs-rule:nth-of-type(2) {
+            top: 40%;
+            right: 16cqw;
+          }
+
+          .scs-plus:nth-of-type(1) {
+            top: 22%;
+            right: 22cqw;
+          }
+
+          .scs-plus:nth-of-type(2) {
+            top: 47%;
+            left: 18cqw;
+          }
+
+          .scs-plus:nth-of-type(3) {
+            top: 9%;
+            left: 30cqw;
+          }
+
+          /* foreground layer: small accent motes, fastest */
+          .scs-mote {
+            position: absolute;
+            width: 1cqmin;
+            height: 1cqmin;
+            border-radius: 50%;
+            background: color-mix(in srgb, var(--scs-accent) 55%, transparent);
+          }
+
+          .scs-mote:nth-child(1) {
+            top: 7%;
+            left: 8cqw;
+          }
+
+          .scs-mote:nth-child(2) {
+            top: 21%;
+            right: 10cqw;
+            width: 0.7cqmin;
+            height: 0.7cqmin;
+          }
+
+          .scs-mote:nth-child(3) {
+            top: 43%;
+            left: 6cqw;
+            width: 1.3cqmin;
+            height: 1.3cqmin;
+            background: color-mix(in srgb, var(--scs-accent) 40%, transparent);
+          }
+
+          .scs-mote:nth-child(4) {
+            top: 66%;
+            right: 7cqw;
+          }
+
+          .scs-mote:nth-child(5) {
+            top: 88%;
+            left: 4cqw;
+            width: 0.8cqmin;
+            height: 0.8cqmin;
+          }
+
+          /* sections: a static positioner zone per section, a rising card in it */
+          .scs-section {
+            position: absolute;
+            right: 10cqw;
+            left: 10cqw;
+            display: grid;
+            place-items: center;
+            height: 84cqh;
+          }
+
+          .scs-card {
+            display: flex;
+            flex-direction: column;
+            gap: var(--space-2, 2.2cqmin);
+            width: min(64cqw, 150cqh);
+            max-height: 76cqh;
+            padding: var(--space-3, 3.4cqmin);
+            overflow: hidden;
+            border: 0.16cqmin solid color-mix(in srgb, var(--border, #475569) 70%, transparent);
+            border-radius: var(--radius, 2cqmin);
+            background: color-mix(in srgb, var(--surface, #0b1016) 88%, var(--bg, #05070c));
+            box-shadow: 0 2.4cqh 7cqh color-mix(in srgb, var(--bg, #000000) 34%, transparent);
+            will-change: transform, opacity;
+          }
+
+          .scs-chiprow {
+            display: flex;
+            align-items: center;
+            gap: var(--space-1, 1.6cqmin);
+          }
+
+          .scs-chip {
+            padding: 0.7cqmin 1.5cqmin;
+            border: 0.14cqmin solid color-mix(in srgb, var(--scs-accent) 45%, transparent);
+            border-radius: 999px;
+            color: color-mix(in srgb, var(--scs-accent) 80%, var(--fg, #f8fafc));
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            font-size: 2cqmin;
+            font-weight: 600;
+            letter-spacing: 0.14em;
+            line-height: 1;
+          }
+
+          .scs-chiprule {
+            flex: 1;
+            height: 0.14cqmin;
+            background: color-mix(in srgb, var(--border, #475569) 60%, transparent);
+          }
+
+          .scs-bar {
+            height: 1.4cqmin;
+            border-radius: 999px;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 12%, transparent);
+          }
+
+          .scs-bar.scs-heading {
+            width: 62%;
+            height: 3.4cqmin;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 24%, transparent);
+          }
+
+          .scs-bar.scs-sub {
+            width: 44%;
+          }
+
+          .scs-minis {
+            display: grid;
+            grid-template-columns: repeat(3, minmax(0, 1fr));
+            gap: 2cqmin;
+            margin-top: 0.6cqmin;
+          }
+
+          .scs-mini {
+            display: flex;
+            flex-direction: column;
+            gap: 1.4cqmin;
+            padding: 2cqmin;
+            border: 0.14cqmin solid color-mix(in srgb, var(--border, #475569) 55%, transparent);
+            border-radius: calc(var(--radius, 2cqmin) * 0.7);
+            background: color-mix(in srgb, var(--bg, #05070c) 32%, transparent);
+          }
+
+          .scs-mini .scs-bar {
+            width: 62%;
+          }
+
+          .scs-mini-block {
+            height: 7cqmin;
+            border-radius: calc(var(--radius, 2cqmin) * 0.5);
+            background: color-mix(in srgb, var(--fg, #f8fafc) 7%, transparent);
+          }
+
+          .scs-mini:nth-child(2) .scs-mini-block {
+            background: color-mix(in srgb, var(--scs-accent) 18%, transparent);
+          }
+
+          .scs-rowline {
+            display: flex;
+            align-items: center;
+            gap: var(--space-1, 1.6cqmin);
+          }
+
+          .scs-dot {
+            flex: 0 0 auto;
+            width: 1.5cqmin;
+            height: 1.5cqmin;
+            border-radius: 50%;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 22%, transparent);
+          }
+
+          .scs-rowline:nth-of-type(2) .scs-dot {
+            background: color-mix(in srgb, var(--scs-accent) 70%, transparent);
+          }
+
+          .scs-rowline .scs-bar {
+            flex: 1;
+            max-width: 72%;
+          }
+
+          .scs-section[data-close] .scs-card {
+            align-items: center;
+            text-align: center;
+          }
+
+          .scs-section[data-close] .scs-bar.scs-heading {
+            width: 52%;
+          }
+
+          .scs-section[data-close] .scs-bar.scs-sub {
+            width: 34%;
+          }
+
+          .scs-pill {
+            margin-top: 1.2cqmin;
+            padding: 1.4cqmin 3.4cqmin;
+            border-radius: 999px;
+            background: color-mix(in srgb, var(--scs-accent) 82%, var(--surface, #0b1016));
+            color: var(--bg, #0b0c0e);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            font-size: 2.1cqmin;
+            font-weight: 600;
+            letter-spacing: 0.12em;
+            line-height: 1;
+          }
+        </style>
+
+        <div
+          id="scroll-camera-story-clip"
+          class="scs-clip clip"
+          data-start="0"
+          data-duration="5.5"
+          data-track-index="0"
+        >
+          <div class="scs-stage" role="img" aria-label="Cinematic scroll pass over a tall scene">
+            <div class="scs-world">
+              <div class="scs-layer scs-far" aria-hidden="true">
+                <span class="scs-blob"></span>
+                <span class="scs-blob"></span>
+                <span class="scs-blob"></span>
+                <span class="scs-blob"></span>
+              </div>
+              <div class="scs-layer scs-mid" aria-hidden="true">
+                <span class="scs-ring"></span>
+                <span class="scs-ring"></span>
+                <span class="scs-ring"></span>
+                <span class="scs-rule"></span>
+                <span class="scs-rule"></span>
+                <span class="scs-plus"></span>
+                <span class="scs-plus"></span>
+                <span class="scs-plus"></span>
+              </div>
+              <div class="scs-layer scs-content">
+                <div class="scs-section" aria-hidden="true">
+                  <div class="scs-card">
+                    <div class="scs-chiprow">
+                      <span class="scs-chip">01</span>
+                      <span class="scs-chiprule"></span>
+                    </div>
+                    <span class="scs-bar scs-heading"></span>
+                    <span class="scs-bar" style="width: 74%"></span>
+                    <span class="scs-bar scs-sub"></span>
+                  </div>
+                </div>
+                <div class="scs-section" aria-hidden="true">
+                  <div class="scs-card">
+                    <div class="scs-chiprow">
+                      <span class="scs-chip">02</span>
+                      <span class="scs-chiprule"></span>
+                    </div>
+                    <span class="scs-bar scs-heading" style="width: 46%"></span>
+                    <div class="scs-minis">
+                      <div class="scs-mini">
+                        <span class="scs-bar"></span>
+                        <span class="scs-mini-block"></span>
+                      </div>
+                      <div class="scs-mini">
+                        <span class="scs-bar"></span>
+                        <span class="scs-mini-block"></span>
+                      </div>
+                      <div class="scs-mini">
+                        <span class="scs-bar"></span>
+                        <span class="scs-mini-block"></span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="scs-section" aria-hidden="true">
+                  <div class="scs-card">
+                    <div class="scs-chiprow">
+                      <span class="scs-chip">03</span>
+                      <span class="scs-chiprule"></span>
+                    </div>
+                    <span class="scs-bar scs-heading" style="width: 40%"></span>
+                    <div class="scs-rowline">
+                      <span class="scs-dot"></span>
+                      <span class="scs-bar"></span>
+                    </div>
+                    <div class="scs-rowline">
+                      <span class="scs-dot"></span>
+                      <span class="scs-bar" style="max-width: 58%"></span>
+                    </div>
+                    <div class="scs-rowline">
+                      <span class="scs-dot"></span>
+                      <span class="scs-bar" style="max-width: 66%"></span>
+                    </div>
+                  </div>
+                </div>
+                <div class="scs-section" data-close aria-hidden="true">
+                  <div class="scs-card">
+                    <div class="scs-chiprow" style="align-self: stretch">
+                      <span class="scs-chip">04</span>
+                      <span class="scs-chiprule"></span>
+                    </div>
+                    <span class="scs-bar scs-heading"></span>
+                    <span class="scs-bar scs-sub"></span>
+                    <span class="scs-pill">&gt;_</span>
+                  </div>
+                </div>
+              </div>
+              <div class="scs-layer scs-fore" aria-hidden="true">
+                <span class="scs-mote"></span>
+                <span class="scs-mote"></span>
+                <span class="scs-mote"></span>
+                <span class="scs-mote"></span>
+                <span class="scs-mote"></span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".scs-stage");
+            var world = root.querySelector(".scs-world");
+            var layerFar = root.querySelector(".scs-far");
+            var layerMid = root.querySelector(".scs-mid");
+            var layerFore = root.querySelector(".scs-fore");
+            var sectionElements = Array.prototype.slice.call(root.querySelectorAll(".scs-section"));
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            function num(value, fallback, min, max) {
+              var parsed = parseFloat(value);
+              if (!isFinite(parsed)) parsed = fallback;
+              return Math.min(max, Math.max(min, parsed));
+            }
+
+            var travel = num(vars.travel, 220, 100, 400);
+            var sectionsVar = Math.round(num(vars.sections, 3, 2, 4));
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exitMode = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            root.style.setProperty("--scs-accent", accentColors[accent]);
+
+            // SLOT. Caller templates live at HOST DOCUMENT level (the mount
+            // wipes host-clip children, and templates never render). Each
+            // direct child of the slot template becomes one section's card
+            // content, in order.
+            var hostDoc = root.ownerDocument;
+            var slotChildren = [];
+            try {
+              var slotTemplate = hostDoc.querySelector(
+                'template[data-slot="scroll-camera-story-sections"]',
+              );
+              if (slotTemplate)
+                slotChildren = Array.prototype.slice.call(slotTemplate.content.children);
+            } catch (error) {
+              slotChildren = [];
+            }
+
+            var count = Math.min(4, Math.max(2, slotChildren.length || sectionsVar));
+            sectionElements.forEach(function (section, index) {
+              if (index >= count) {
+                section.remove();
+                return;
+              }
+              if (slotChildren[index]) {
+                var card = section.querySelector(".scs-card");
+                while (card.firstChild) card.removeChild(card.firstChild);
+                card.appendChild(hostDoc.importNode(slotChildren[index], true));
+              }
+            });
+            var sections = sectionElements.slice(0, count);
+            var cards = sections.map(function (section) {
+              return section.querySelector(".scs-card");
+            });
+
+            // World geometry, set ONCE at mount in cqh (static style, never
+            // tweened; the seek trap is cq units INSIDE tweens). Section i
+            // centers at camera progress i / (count - 1) along the travel.
+            world.style.height = (100 + travel).toFixed(2) + "cqh";
+            sections.forEach(function (section, index) {
+              var progress = index / (count - 1);
+              section.style.top = (50 + progress * travel - 42).toFixed(2) + "cqh";
+            });
+
+            /* ===== Camera (camera-servo law): one plain state object, one
+               writer. cam.t is the pass progress 0..1. The world translates
+               by percent of its OWN height (a pure number: travel out of
+               100 + travel), and each depth layer gets a derived parallax
+               offset so its net rate is RATE x the camera rate. No cq units
+               are ever tweened. ===== */
+            var F = (100 * travel) / (100 + travel); // percent of world height per full pass
+            var RATE_FAR = 0.35;
+            var RATE_MID = 0.65;
+            var RATE_FORE = 1.12;
+            var cam = { t: 0 };
+            var drift = { p: 0, dx: 0, dy: 0 };
+            function applyCamera() {
+              var y = -cam.t * F;
+              world.style.transform = "translate(" + drift.dx + "%, " + (y + drift.dy) + "%)";
+              layerFar.style.transform = "translateY(" + cam.t * F * (1 - RATE_FAR) + "%)";
+              layerMid.style.transform = "translateY(" + cam.t * F * (1 - RATE_MID) + "%)";
+              layerFore.style.transform = "translateY(" + cam.t * F * (1 - RATE_FORE) + "%)";
+            }
+            applyCamera();
+
+            // Envelope: fixed IN/OUT, elastic HOLD, never time-scaled.
+            var IN_BASE = 0.85;
+            var OUT_BASE = exitMode === "none" ? 0 : 0.5;
+            var PASS_MIN = 1.2;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "5.5"));
+            var totalBase = IN_BASE + PASS_MIN + OUT_BASE;
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var usable = duration - OUT;
+
+            // Arrival schedule: defaults decelerate into a held final
+            // section; the cues variable overrides arrivals for sections
+            // after the first.
+            var HOLD_MIN = Math.min(1.3, Math.max(0.45, usable * 0.24));
+            var lastDefault = Math.max(IN + 0.9 * scale, usable - HOLD_MIN);
+            var firstDefault = Math.min(lastDefault, IN + 1.15 * scale);
+            var arrivals = [];
+            var index;
+            for (index = 1; index < count; index += 1) {
+              arrivals.push(
+                count === 2
+                  ? lastDefault
+                  : firstDefault + ((index - 1) / (count - 2)) * (lastDefault - firstDefault),
+              );
+            }
+            var cueValues = String(vars.cues == null ? "" : vars.cues)
+              .split(",")
+              .map(function (part) {
+                return parseFloat(part);
+              })
+              .filter(function (value) {
+                return isFinite(value);
+              });
+            // Lenient by one: a list with an extra leading value is treated
+            // as including the mount section's arrival.
+            if (cueValues.length === count) cueValues = cueValues.slice(1);
+            if (cueValues.length >= count - 1) {
+              arrivals = cueValues.slice(0, count - 1);
+            }
+            var floor = IN + 0.35 * scale;
+            for (index = 0; index < arrivals.length; index += 1) {
+              var clamped = Math.min(usable - 0.3 * scale, Math.max(floor, arrivals[index]));
+              arrivals[index] = clamped;
+              floor = clamped + 0.4 * scale;
+            }
+            var lastArrival = arrivals.length > 0 ? arrivals[arrivals.length - 1] : IN;
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: the stage fades up while the first section rises.
+            tl.fromTo(
+              stage,
+              { opacity: 0 },
+              { opacity: 1, duration: Math.min(0.6 * scale, IN), ease: "power2.out" },
+              0,
+            );
+
+            // Section rises: each card lands exactly on its arrival cue.
+            // yPercent only (percent of the card's own box), never cq units.
+            cards.forEach(function (card, cardIndex) {
+              var arrive = cardIndex === 0 ? IN : arrivals[cardIndex - 1];
+              var rise = Math.min(
+                0.75 * scale,
+                Math.max(0.25, arrive - (cardIndex === 0 ? 0.1 : 0)),
+              );
+              tl.fromTo(
+                card,
+                { opacity: 0, yPercent: 10 },
+                { opacity: 1, yPercent: 0, duration: rise, ease: "power3.out" },
+                arrive - rise,
+              );
+            });
+
+            // Camera pass: one non-overlapping segment per arrival, quiet
+            // register (L2). Each move ends exactly on its cue; the final
+            // move runs longer, so the pass decelerates into the hold. No
+            // segment starts before the previous ends (L1: no mid-motion
+            // redirect exists to snap velocity).
+            var previousEnd = IN * 0.7;
+            arrivals.forEach(function (arrive, arriveIndex) {
+              var isLast = arriveIndex === arrivals.length - 1;
+              var gap = arrive - previousEnd - 0.1 * scale;
+              var move = Math.max(0.3, Math.min(isLast ? 1.7 : 1.25, gap));
+              tl.to(
+                cam,
+                {
+                  t: (arriveIndex + 1) / (count - 1),
+                  duration: move,
+                  ease: "power2.inOut",
+                  onUpdate: applyCamera,
+                },
+                arrive - move,
+              );
+              previousEnd = arrive;
+            });
+
+            // Micro-drift: 2 and 3 INTEGER sine cycles ending at exactly
+            // zero when the final section lands, so the held final section
+            // is byte-still and every seek reproduces the same frame.
+            if (lastArrival >= 1.2) {
+              tl.to(
+                drift,
+                {
+                  p: Math.PI * 2 * 2,
+                  duration: lastArrival,
+                  ease: "none",
+                  onUpdate: function () {
+                    drift.dx = Math.sin(drift.p) * 0.06;
+                    drift.dy = Math.sin(drift.p * 1.5) * 0.08;
+                    applyCamera();
+                  },
+                },
+                0,
+              );
+            }
+
+            // OUT: only when exit != none; the default holds the last frame.
+            if (exitMode !== "none") {
+              var outStart = duration - OUT;
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, outStart);
+              if (exitMode === "up") {
+                tl.to(stage, { yPercent: -4, duration: OUT, ease: "power2.in" }, outStart);
+              }
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["scroll-camera-story"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/scroll-feed/README.md b/registry/components/scroll-feed/README.md
new file mode 100644
index 0000000000..310b7fa694
--- /dev/null
+++ b/registry/components/scroll-feed/README.md
@@ -0,0 +1,35 @@
+# scroll-feed
+
+A self-scrolling column of skeleton post cards with two low-opacity trail copies suggesting motion blur. The default register is a doomscroll: distinct thumb flicks (fast start, power3 decay to a settle) with a read pause between them, one flick per card. Card dimensions vary through deterministic index math only. By default the column covers exactly one card cycle over the mount, so the first and final frames are loop-compatible.
+
+4s authored; HOLD owns the whole scroll and is the only elastic phase.
+
+## Variables
+
+| id           | type   | default    | notes                                                                                                                                                                                                                                                                               |
+| ------------ | ------ | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `speed`      | enum   | `doom`     | `doom` or `frantic`: card pitch, so frantic covers more distance in the same time.                                                                                                                                                                                                  |
+| `card_count` | number | `6`        | Cards per repeated cycle (4 to 10).                                                                                                                                                                                                                                                 |
+| `cues`       | string | `` (empty) | Comma-separated seconds (from mount start); each cue advances the feed by exactly one card pitch (stepped doom-scroll rhythm). Sorted ascending, capped at two full cycles of steps. Empty synthesizes evenly spaced flicks, one per card, that still cover exactly one full cycle. |
+| `exit`       | enum   | `none`     | `none` scrolls until the cut; `fade`/`up` depart over a reserved tail (min(0.4s, 15% of D)).                                                                                                                                                                                        |
+
+## Mount
+
+```html
+<div
+  class="clip"
+  data-composition-id="scroll-feed"
+  data-composition-src="./scroll-feed.html"
+  data-variable-values='{"speed":"frantic","card_count":8,"cues":"0.5,1.0,1.5,2.0"}'
+  data-start="0"
+  data-duration="4"
+  data-track-index="0"
+></div>
+```
+
+Elastic root: no `data-width`/`data-height`; it fills whatever box the host clip gives it. Timeline registers under the literal `scroll-feed` key.
+
+## Notes
+
+- The loop guarantee (first frame == final frame position) only holds with empty `cues` and `exit:"none"`; either option trades the loop for its rhythm or departure.
+- Deterministic: no clocks, no randomness, no CSS animations; card variety is pure index arithmetic.
diff --git a/registry/components/scroll-feed/demo.html b/registry/components/scroll-feed/demo.html
new file mode 100644
index 0000000000..6037d990c6
--- /dev/null
+++ b/registry/components/scroll-feed/demo.html
@@ -0,0 +1,83 @@
+<!doctype html>
+<!--
+  scroll-feed demo. This standalone composition mounts scroll-feed.html with
+  non-default frantic speed and eight cards to prove both variables flow
+  through the elastic host box.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Scroll Feed Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #0b0c0e);
+      }
+
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(
+          ellipse at 50% 42%,
+          var(--surface, #171a20) 0%,
+          var(--bg, #0b0c0e) 72%
+        );
+      }
+
+      .mount-card {
+        width: 52%;
+        height: 82%;
+        left: 24%;
+        top: 9%;
+        container-type: size;
+        overflow: hidden;
+        border: 2px solid rgba(168, 180, 197, 0.2);
+        border-radius: 36px;
+        background: var(--surface, #11141a);
+        box-shadow: 0 46px 110px rgba(0, 0, 0, 0.5);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="scroll-feed-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="scroll-feed-mount"
+        class="mount-card clip"
+        data-composition-id="scroll-feed"
+        data-composition-src="./scroll-feed.html"
+        data-variable-values='{"speed":"frantic","card_count":8}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="998"
+        data-height="886"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["scroll-feed-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/scroll-feed/registry-item.json b/registry/components/scroll-feed/registry-item.json
new file mode 100644
index 0000000000..95b2e4bfa8
--- /dev/null
+++ b/registry/components/scroll-feed/registry-item.json
@@ -0,0 +1,65 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "scroll-feed",
+  "type": "hyperframes:component",
+  "title": "Scroll Feed",
+  "description": "A loop-friendly column of varied skeleton post cards scrolls upward with subtle motion trails and an agitated pace.",
+  "tags": ["motion-primitive", "effects", "scroll", "feed", "loop", "agitation"],
+  "jobs": ["demonstrate"],
+  "family": "effects",
+  "profile": "continuous",
+  "evidence": "Wave F U9 scroll-feed specification",
+  "files": [
+    {
+      "path": "scroll-feed.html",
+      "target": "compositions/components/scroll-feed.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "speed",
+      "type": "enum",
+      "role": "timing",
+      "label": "Scroll speed",
+      "description": "Pace of the upward feed movement.",
+      "default": "doom",
+      "options": [
+        { "value": "doom", "label": "Doom" },
+        { "value": "frantic", "label": "Frantic" }
+      ]
+    },
+    {
+      "id": "card_count",
+      "type": "number",
+      "role": "content",
+      "label": "Card count",
+      "description": "Number of skeleton posts in one repeated feed cycle.",
+      "default": 6,
+      "min": 4,
+      "max": 10,
+      "step": 1
+    },
+    {
+      "id": "cues",
+      "type": "string",
+      "role": "timing",
+      "label": "Cues",
+      "description": "Comma-separated seconds (from mount start); each cue advances the feed by one card. Empty synthesizes evenly spaced flicks, one per card.",
+      "default": ""
+    },
+    {
+      "id": "exit",
+      "type": "enum",
+      "role": "timing",
+      "label": "Exit",
+      "description": "Optional departure. Default none: the feed scrolls until the frame cuts.",
+      "default": "none",
+      "options": [
+        { "value": "none", "label": "None" },
+        { "value": "fade", "label": "Fade" },
+        { "value": "up", "label": "Up" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/scroll-feed/scroll-feed.html b/registry/components/scroll-feed/scroll-feed.html
new file mode 100644
index 0000000000..5b6ec5c5c8
--- /dev/null
+++ b/registry/components/scroll-feed/scroll-feed.html
@@ -0,0 +1,397 @@
+<!doctype html>
+<!--
+  scroll-feed: HyperFrames video primitive (effects / agitation / loop)
+
+  Concept: a self-scrolling column of skeleton post cards recycles without
+  a visible seam. The default register is a doomscroll: distinct thumb
+  flicks (fast start, power3 decay to a settle) with a read pause between
+  them, one flick per card. Two low-opacity copies trail the main column to
+  suggest motion blur while deterministic index math varies every card.
+
+  Variables:
+    - speed (doom | frantic, default doom): changes the card pitch, so the
+      column covers more distance during the same duration in frantic mode.
+    - card_count (number, 4 to 10, default 6): cards in one repeated cycle.
+    - cues (string, default ""): comma-separated seconds (from mount start);
+      each cue advances the feed by exactly one card pitch (stepped rhythm).
+      Empty synthesizes evenly spaced flicks, one per card, that still cover
+      exactly one full cycle.
+    - exit (none | fade | up, default "none"): optional departure over a
+      short reserved tail.
+
+  Envelope: IN = 0s, HOLD = D minus any exit tail, OUT = 0s or the exit
+  tail. HOLD owns the complete scroll and is the only elastic phase. A
+  longer mount stretches HOLD directly, never through timeScale. With no
+  cues and exit none, zero-length IN and OUT keep the first and final
+  frames loop-compatible and each column moves exactly one complete card
+  cycle. Cues or an enabled exit trade that loop guarantee for the cue
+  rhythm or the departure.
+
+  Determinism: cards are created synchronously. Their dimensions vary only
+  through index arithmetic. No clocks, random values, timers, or CSS
+  animations participate in rendering.
+
+  Mount contract: the runtime clones only this template. #root fills the
+  host box, establishes the container query basis, has no data-width or
+  data-height, and registers one paused timeline under the hardcoded
+  scroll-feed id.
+-->
+<html
+  lang="en"
+  data-composition-id="scroll-feed"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "speed", "type": "enum", "role": "timing", "label": "Scroll speed", "description": "Pace of the upward feed movement.", "default": "doom", "options": [{ "value": "doom", "label": "Doom" }, { "value": "frantic", "label": "Frantic" }] },
+    { "id": "card_count", "type": "number", "role": "content", "label": "Card count", "description": "Number of skeleton posts in one repeated feed cycle.", "default": 6, "min": 4, "max": 10, "step": 1 },
+    { "id": "cues", "type": "string", "role": "timing", "label": "Cues", "description": "Comma-separated seconds (from mount start); each cue advances the feed by one card. Empty synthesizes evenly spaced flicks, one per card.", "default": "" },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the feed scrolls until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Scroll Feed</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="scroll-feed" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            background: linear-gradient(180deg, var(--bg, #171b23) 0%, var(--bg, #0f1218) 100%);
+            color: var(--fg, #d8dee9);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .sf-viewport {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            /* Soft fade at both feed edges so cards never clip hard mid-media. */
+            mask-image: linear-gradient(
+              180deg,
+              transparent 0,
+              #000 7cqh,
+              #000 calc(100% - 7cqh),
+              transparent 100%
+            );
+          }
+
+          .sf-column {
+            position: absolute;
+            top: -20cqh;
+            left: 12cqw;
+            width: 76cqw;
+            will-change: transform;
+          }
+
+          .sf-cycle {
+            display: flex;
+            flex-direction: column;
+          }
+
+          .sf-card {
+            flex: 0 0 var(--sf-card-h);
+            width: 76cqw;
+            height: var(--sf-card-h);
+            margin-bottom: var(--sf-gap);
+            padding: var(--space-2, 2.3cqh) var(--space-2, 2.4cqw);
+            overflow: hidden;
+            border: 0.12cqw solid var(--border, rgba(160, 174, 192, 0.2));
+            border-radius: var(--radius, 2.2cqw);
+            /* Second stop derives from --surface so the gradient survives a
+               host theme instead of collapsing to a flat fill. */
+            background: linear-gradient(
+              145deg,
+              var(--surface, #29303b) 0%,
+              color-mix(in srgb, var(--surface, #29303b) 76%, var(--bg, #0f1218)) 100%
+            );
+            box-shadow: 0 1.8cqh 4cqh rgba(0, 0, 0, 0.28);
+          }
+
+          .sf-card-header {
+            display: flex;
+            align-items: center;
+            gap: var(--space-1, 1.4cqw);
+            height: 4.4cqh;
+            margin-bottom: var(--space-1, 1.5cqh);
+          }
+
+          .sf-avatar {
+            flex: 0 0 auto;
+            width: var(--sf-avatar);
+            height: var(--sf-avatar);
+            border-radius: 50%;
+            background: var(--muted, #758094);
+          }
+
+          .sf-identity {
+            display: flex;
+            flex: 1 1 auto;
+            min-width: 0;
+            flex-direction: column;
+            gap: var(--space-1, 0.65cqh);
+          }
+
+          .sf-line,
+          .sf-meta,
+          .sf-action {
+            display: block;
+            border-radius: 99cqw;
+          }
+
+          .sf-line {
+            height: 0.85cqh;
+            background: var(--muted, #7d8798);
+          }
+
+          .sf-line-primary {
+            width: var(--sf-primary-w);
+          }
+
+          .sf-line-secondary {
+            width: var(--sf-secondary-w);
+            opacity: 0.62;
+          }
+
+          .sf-meta {
+            flex: 0 0 auto;
+            width: var(--sf-meta-w);
+            height: 0.75cqh;
+            background: var(--muted, #667184);
+            opacity: 0.72;
+          }
+
+          .sf-media {
+            position: relative;
+            height: calc(var(--sf-card-h) - 12.2cqh);
+            min-height: 6cqh;
+            overflow: hidden;
+            border-radius: var(--radius, 1.4cqw);
+            /* The media block gets its own derivation (lifted toward --fg)
+               so card and media stay distinct under any --surface. */
+            background: linear-gradient(
+              135deg,
+              color-mix(in srgb, var(--surface, #29303b) 88%, var(--fg, #d8dee9)) 0%,
+              color-mix(in srgb, var(--surface, #29303b) 90%, var(--bg, #0f1218)) 100%
+            );
+          }
+
+          .sf-media::before {
+            position: absolute;
+            top: var(--sf-media-y);
+            left: var(--sf-media-x);
+            width: 18cqw;
+            height: 18cqw;
+            border-radius: 50%;
+            background: var(--muted, rgba(130, 143, 160, 0.16));
+            content: "";
+          }
+
+          .sf-card-footer {
+            display: flex;
+            align-items: center;
+            gap: var(--space-2, 2.4cqw);
+            height: 2cqh;
+            margin-top: var(--space-1, 1.35cqh);
+          }
+
+          .sf-action {
+            width: var(--sf-action-w);
+            height: 0.8cqh;
+            background: var(--muted, #717c8e);
+            opacity: 0.72;
+          }
+
+          .sf-blur {
+            z-index: 0;
+            opacity: 0.1;
+            filter: blur(0.28cqh);
+          }
+
+          .sf-blur-a {
+            top: -19.2cqh;
+            left: 11.55cqw;
+          }
+
+          .sf-blur-b {
+            top: -20.8cqh;
+            left: 12.45cqw;
+          }
+
+          .sf-main {
+            z-index: 1;
+          }
+        </style>
+
+        <div
+          id="scroll-feed-clip"
+          class="sf-viewport clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="sf-column sf-blur sf-blur-a" aria-hidden="true"></div>
+          <div class="sf-column sf-blur sf-blur-b" aria-hidden="true"></div>
+          <div class="sf-column sf-main" aria-hidden="true"></div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var mainColumn = root.querySelector(".sf-main");
+            var blurA = root.querySelector(".sf-blur-a");
+            var blurB = root.querySelector(".sf-blur-b");
+            var columns = root.querySelectorAll(".sf-column");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var speed = vars.speed === "frantic" ? "frantic" : "doom";
+            var countValue = Number(vars.card_count);
+            var cardCount = Number.isFinite(countValue)
+              ? Math.max(4, Math.min(10, Math.round(countValue)))
+              : 6;
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+            var cuesValue = vars.cues == null ? "" : String(vars.cues);
+            var cues = cuesValue
+              .split(",")
+              .reduce(function (result, token) {
+                var trimmed = token.trim();
+                if (trimmed === "") return result;
+                var seconds = Number(trimmed);
+                if (!Number.isFinite(seconds) || seconds < 0) return result;
+                result.push(seconds);
+                return result;
+              }, [])
+              .sort(function (a, b) {
+                return a - b;
+              });
+
+            // Frantic mode travels farther in the same HOLD while still
+            // completing exactly one full cycle at the final frame.
+            var cardHeight = speed === "frantic" ? 32 : 24;
+            var gap = speed === "frantic" ? 4 : 3;
+            var cycleDistance = cardCount * (cardHeight + gap);
+            root.style.setProperty("--sf-card-h", cardHeight + "cqh");
+            root.style.setProperty("--sf-gap", gap + "cqh");
+
+            var cycle = document.createElement("div");
+            cycle.className = "sf-cycle";
+
+            for (var index = 0; index < cardCount; index += 1) {
+              var card = document.createElement("article");
+              card.className = "sf-card";
+              card.style.setProperty("--sf-avatar", 3.2 + (index % 3) * 0.45 + "cqh");
+              card.style.setProperty("--sf-primary-w", 18 + ((index * 11) % 24) + "cqw");
+              card.style.setProperty("--sf-secondary-w", 12 + ((index * 7) % 19) + "cqw");
+              card.style.setProperty("--sf-meta-w", 7 + ((index * 5) % 9) + "cqw");
+              card.style.setProperty("--sf-media-x", 5 + ((index * 17) % 48) + "cqw");
+              card.style.setProperty("--sf-media-y", -8 + ((index * 13) % 10) + "cqh");
+              card.style.setProperty("--sf-action-w", 7 + ((index * 3) % 8) + "cqw");
+              card.innerHTML =
+                '<header class="sf-card-header"><span class="sf-avatar"></span><span class="sf-identity"><span class="sf-line sf-line-primary"></span><span class="sf-line sf-line-secondary"></span></span><span class="sf-meta"></span></header><div class="sf-media"></div><footer class="sf-card-footer"><span class="sf-action"></span><span class="sf-action"></span><span class="sf-action"></span></footer>';
+              cycle.appendChild(card);
+            }
+
+            // Three identical cycles keep the viewport covered before, during,
+            // and after the exact one-cycle translation. The blur trails clone
+            // this single deterministic source instead of recomputing cards.
+            mainColumn.appendChild(cycle);
+            mainColumn.appendChild(cycle.cloneNode(true));
+            mainColumn.appendChild(cycle.cloneNode(true));
+            blurA.innerHTML = mainColumn.innerHTML;
+            blurB.innerHTML = mainColumn.innerHTML;
+
+            // IN stays zero. Exit none keeps OUT at zero for a clean loop;
+            // an enabled exit reserves a short tail after the scroll.
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var EXIT = exit === "none" ? 0 : Math.min(0.4, duration * 0.15);
+            var SCROLL_END = Math.max(0.001, duration - EXIT);
+            var finalY = -cycleDistance;
+
+            var tl = gsap.timeline({ paused: true });
+
+            // Stepped rhythm: each step advances the feed by exactly one
+            // card pitch (thumb flick: fast start, power3 decay, settle).
+            // Three stacked cycles keep the viewport covered through two
+            // full cycles of steps. Without cues the default doomscroll
+            // synthesizes one evenly spaced flick per card, so the column
+            // still travels exactly one full cycle by SCROLL_END and the
+            // first and final frames stay loop-compatible.
+            var pitch = cardHeight + gap;
+            var steps = [];
+            var autoFlick = cues.length === 0;
+            if (autoFlick) {
+              for (var step = 0; step < cardCount; step += 1) {
+                steps.push((SCROLL_END / cardCount) * step);
+              }
+            } else {
+              cues.forEach(function (cueAt) {
+                if (steps.length >= cardCount * 2) return;
+                var at = Math.min(SCROLL_END, cueAt);
+                if (steps.length === 0 || at > steps[steps.length - 1] + 0.01) {
+                  steps.push(at);
+                }
+              });
+            }
+            finalY = -pitch * steps.length;
+            steps.forEach(function (cueAt, index) {
+              var next = index + 1 < steps.length ? steps[index + 1] : SCROLL_END;
+              // Auto flicks keep a longer rest so each card gets a read;
+              // explicit cues keep the documented cue-mode timing.
+              var stepDuration = autoFlick
+                ? Math.max(0.05, Math.min(0.45, (next - cueAt) * 0.6))
+                : Math.max(0.05, Math.min(0.5, (next - cueAt) * 0.8, duration - cueAt));
+              var target = { y: -pitch * (index + 1) + "cqh" };
+              if (index === 0) {
+                tl.fromTo(
+                  columns,
+                  { y: "0cqh" },
+                  {
+                    y: target.y,
+                    duration: stepDuration,
+                    ease: "power3.out",
+                  },
+                  cueAt,
+                );
+              } else {
+                tl.to(columns, { y: target.y, duration: stepDuration, ease: "power3.out" }, cueAt);
+              }
+            });
+
+            // Optional departure; exit none scrolls until the frame cuts.
+            if (exit === "fade") {
+              tl.to(columns, { opacity: 0, duration: EXIT, ease: "power2.in" }, SCROLL_END);
+            } else if (exit === "up") {
+              tl.to(columns, { opacity: 0, duration: EXIT, ease: "power2.in" }, SCROLL_END);
+              tl.to(
+                columns,
+                { y: finalY - 10 + "cqh", duration: EXIT, ease: "power2.in" },
+                SCROLL_END,
+              );
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["scroll-feed"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/segmentation-flood/README.md b/registry/components/segmentation-flood/README.md
new file mode 100644
index 0000000000..e24a31dd47
--- /dev/null
+++ b/registry/components/segmentation-flood/README.md
@@ -0,0 +1,74 @@
+# segmentation-flood
+
+Product demo / AI experiment primitive: a machine-vision read of a slotted
+subject. Translucent accent segmentation masks FLOOD onto 2-4 regions in
+scanline steps (rows arrive in 2-3 frame quanta: flood progress is
+quantized to frame steps before any row is drawn), each completed region
+gets a thin corner bracket plus a mono label chip, and a subtle HUD
+flicker (a deterministic 2-frame luminance toggle) rides the pass, then
+stops the instant the flood completes. Settles to a clean labeled read.
+4.5s authored, elastic HOLD (never time-scaled).
+
+Reference feel: the gmunk segmentation sheets (red masks flooding under
+HUD flicker), tokenized to the contract palette.
+
+## Mounting
+
+```html
+<div
+  class="clip"
+  data-composition-id="segmentation-flood"
+  data-composition-src="./components/segmentation-flood.html"
+  data-variable-values='{"regions":"Chassis, Payload, Horizon, Beacon","accent":"blue"}'
+  data-start="0"
+  data-duration="4.5"
+  data-track-index="0"
+></div>
+```
+
+## Subject slot
+
+The subject is a slot. Place an inert template anywhere in the HOST page:
+
+```html
+<template data-slot="segmentation-flood-subject"> ...subject... </template>
+```
+
+Direct `img` / `video` children are stretched to cover the stage;
+arbitrary HTML fills it. A missing slot falls back to a token scene: a
+surface field with muted shapes seated where the default regions land.
+
+## Variables
+
+| id       | type   | default                | notes                                                                                        |
+| -------- | ------ | ---------------------- | -------------------------------------------------------------------------------------------- |
+| regions  | string | Figure, Signal, Ground | Comma label list; 2 to 4 used. One mask + bracket + chip per label.                          |
+| flood_at | number | 0.8                    | Seconds when the pass starts. Clamped so the pass and any exit fit inside the clip.          |
+| flicker  | enum   | on                     | on or off: the 2-frame HUD luminance toggle riding the pass.                                 |
+| accent   | enum   | green                  | green maps to --brand, blue to --accent, violet to --accent-2.                               |
+| exit     | enum   | none                   | none holds the labeled read (frame roots own transitions); fade or up add a 0.45s departure. |
+
+## Choreography
+
+- 0.00s: the subject settles up quietly; no overlay.
+- flood_at: region 1's mask starts flooding top to bottom in quantized
+  scanline rows (a brighter leading row, hairline gaps for texture);
+  regions stagger 0.35s apart, 1.0s of flood each.
+- Each region completes: its corner brackets snap in and its mono chip
+  rises on the same beat.
+- Flood end: the flicker window closes; brackets, chips, and masks hold as
+  one clean labeled read.
+- HOLD: dead still, elastic with the clip duration.
+
+Sync point `flood` fires as the pass starts; align SFX to it.
+
+## Determinism
+
+Region geometry, per-region flood quanta (2 or 3 frames), and scanline row
+counts come from one table computed once at build from fixed LCG seed
+0x5e6f100d. One plain-object anchor tween feeds one painter that redraws
+every mask row and the flicker wash from scratch as pure functions of the
+timeline time; the flicker is on exactly when floor(frame / 2) is odd
+inside the flood window. Eventful seeks land identical frames in any order
+and either direction; the raster basis is the host box measured once at
+mount.
diff --git a/registry/components/segmentation-flood/demo.html b/registry/components/segmentation-flood/demo.html
new file mode 100644
index 0000000000..2f8c1b3cc6
--- /dev/null
+++ b/registry/components/segmentation-flood/demo.html
@@ -0,0 +1,117 @@
+<!doctype html>
+<!--
+  segmentation-flood demo. A full-bleed 1920x1080 LIGHT host mounts the
+  primitive through data-composition-src with non-default variables (four
+  regions, blue accent, earlier flood cue) and supplies the subject slot
+  to prove the slot path while the primitive stays elastic.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Segmentation Flood Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #f5f6f8);
+      }
+
+      #root {
+        --bg: #f5f6f8;
+        --fg: #101318;
+        --muted: #5b6472;
+        --surface: #ffffff;
+        --border: #d7dce4;
+        --brand: #14a35e;
+        --accent: #2f6fed;
+        --accent-2: #7a5cd6;
+        --radius: 24px;
+        --font-display: "Inter", system-ui, sans-serif;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg);
+      }
+
+      .mount-stage {
+        position: absolute;
+        inset: 0;
+        container-type: size;
+        overflow: hidden;
+      }
+
+      .demo-subject {
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(
+          160deg,
+          color-mix(in srgb, var(--surface, #ffffff) 92%, var(--accent, #2f6fed)) 0%,
+          var(--surface, #ffffff) 60%
+        );
+        font-family: var(--font-display, system-ui, sans-serif);
+      }
+
+      .demo-subject .block {
+        position: absolute;
+        border: 1px solid var(--border, #d7dce4);
+        border-radius: var(--radius, 24px);
+        background: color-mix(in srgb, var(--muted, #5b6472) 10%, var(--surface, #ffffff));
+        box-shadow: 0 24px 60px rgba(16, 19, 24, 0.07);
+      }
+
+      .demo-subject .block.round {
+        border-radius: 50%;
+      }
+    </style>
+  </head>
+  <body>
+    <template data-slot="segmentation-flood-subject">
+      <div class="demo-subject">
+        <div class="block" style="left: 10%; top: 16%; width: 26%; height: 26%"></div>
+        <div class="block round" style="left: 62%; top: 12%; width: 22%; height: 34%"></div>
+        <div class="block" style="left: 16%; top: 60%; width: 22%; height: 25%"></div>
+        <div class="block round" style="left: 58%; top: 62%; width: 26%; height: 23%"></div>
+      </div>
+    </template>
+
+    <div
+      id="root"
+      data-composition-id="segmentation-flood-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4.5"
+      data-fps="30"
+    >
+      <div
+        id="segmentation-flood-mount"
+        class="mount-stage clip"
+        data-composition-id="segmentation-flood"
+        data-composition-src="./segmentation-flood.html"
+        data-variable-values='{"regions":"Chassis, Payload, Horizon, Beacon","flood_at":0.6,"accent":"blue"}'
+        data-start="0"
+        data-duration="4.5"
+        data-track-index="0"
+        data-width="1920"
+        data-height="1080"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["segmentation-flood-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/segmentation-flood/registry-item.json b/registry/components/segmentation-flood/registry-item.json
new file mode 100644
index 0000000000..9afc93e408
--- /dev/null
+++ b/registry/components/segmentation-flood/registry-item.json
@@ -0,0 +1,84 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "segmentation-flood",
+  "type": "hyperframes:component",
+  "title": "Segmentation Flood",
+  "description": "Machine-vision read of a slotted subject: translucent accent segmentation masks flood on in quantized scanline steps, each region gets a thin bracket and mono label chip, a deterministic 2-frame HUD flicker rides the pass, then the labeled read settles clean.",
+  "tags": [
+    "motion-primitive",
+    "product-demo",
+    "ai",
+    "hud",
+    "canvas",
+    "deterministic",
+    "experiment"
+  ],
+  "jobs": ["demonstrate"],
+  "family": "product-demo",
+  "profile": "machine-read",
+  "evidence": "Wave M3 experiment slate; gmunk segmentation contact sheet 2031767296331702694/sheet-02 (red masks flooding in scanline steps under HUD flicker), tokenized",
+  "syncPoints": [{ "id": "flood", "phase": "in", "offset": 0.8 }],
+  "files": [
+    {
+      "path": "segmentation-flood.html",
+      "target": "compositions/components/segmentation-flood.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "regions",
+      "type": "string",
+      "role": "content",
+      "label": "Regions",
+      "description": "Comma-separated region labels; 2 to 4 are used, one translucent mask + bracket + mono chip each.",
+      "default": "Figure, Signal, Ground"
+    },
+    {
+      "id": "flood_at",
+      "type": "number",
+      "role": "timing",
+      "label": "Flood at",
+      "description": "Seconds from mount start when the segmentation pass begins. Clamped so the pass and any exit stay inside the clip.",
+      "default": 0.8
+    },
+    {
+      "id": "flicker",
+      "type": "enum",
+      "role": "style",
+      "label": "Flicker",
+      "description": "Deterministic 2-frame HUD luminance toggle riding the flood pass.",
+      "default": "on",
+      "options": [
+        { "value": "on", "label": "On" },
+        { "value": "off", "label": "Off" }
+      ]
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Mask, bracket, and chip color: green rides --brand, blue rides --accent, violet rides --accent-2.",
+      "default": "green",
+      "options": [
+        { "value": "green", "label": "Green" },
+        { "value": "blue", "label": "Blue" },
+        { "value": "violet", "label": "Violet" }
+      ]
+    },
+    {
+      "id": "exit",
+      "type": "enum",
+      "role": "timing",
+      "label": "Exit",
+      "description": "Optional departure. Default none: the labeled read holds until the frame cuts.",
+      "default": "none",
+      "options": [
+        { "value": "none", "label": "None" },
+        { "value": "fade", "label": "Fade" },
+        { "value": "up", "label": "Up" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/segmentation-flood/segmentation-flood.html b/registry/components/segmentation-flood/segmentation-flood.html
new file mode 100644
index 0000000000..08f6e29104
--- /dev/null
+++ b/registry/components/segmentation-flood/segmentation-flood.html
@@ -0,0 +1,517 @@
+<!doctype html>
+<!--
+  segmentation-flood: HyperFrames video primitive (product demo / AI)
+
+  A machine-vision read of a slotted subject. Translucent accent
+  segmentation masks FLOOD onto 2-4 regions in scanline steps: rows arrive
+  in 2-3 frame quanta (flood progress is quantized to frame steps before
+  any row is drawn), each region then gets a thin corner bracket and a mono
+  label chip; a subtle HUD flicker (a deterministic 2-frame luminance
+  toggle, a pure function of the frame index) rides the pass and stops the
+  instant the flood completes, settling to a clean labeled read.
+  Reference feel: gmunk segmentation sheets (red masks flooding under HUD
+  flicker), tokenized.
+
+  The subject is a SLOT. Callers place an inert template anywhere in the
+  HOST page (templates never render, and the runtime wipes the host clip's
+  own children on mount, so the slot lives at document level):
+
+    <template data-slot="segmentation-flood-subject"> ... </template>
+
+  Direct img/video children are stretched to cover the stage; arbitrary
+  HTML fills it. A missing slot falls back to a token scene: a surface
+  field with muted shapes seated where the default regions land, so the
+  read has something to read.
+
+  Variables (declared in data-composition-variables below):
+    - regions (comma label list, 2-4 used): one mask + bracket + chip per
+      label, flooding top-left to bottom-right in a staggered pass.
+    - flood_at (seconds): when the pass starts. Clamped so the whole pass
+      and any exit stay inside the clip.
+    - flicker ("on" | "off"): the 2-frame HUD luminance toggle.
+    - accent ("green" | "blue" | "violet"): green rides --brand, blue
+      rides --accent, violet rides --accent-2.
+    - exit ("none" | "fade" | "up", default none): frame roots own
+      transitions; the default holds the labeled read to the last pixel.
+
+  Envelope, fixed IN and OUT with elastic HOLD only (never timeScale):
+    IN ends when the last chip lands; HOLD = D - IN - OUT, truly still.
+    OUT_BASE = 0.45s only when exit != none.
+
+  Determinism (canvas 2D law): region geometry and per-region flood steps
+  come from one table computed once during synchronous timeline
+  construction from fixed LCG seed 0x5e6f100d. Every painted frame is a
+  pure function of (that table, the timeline's current time): the
+  timeline's onUpdate clears the canvas and redraws every mask row and the
+  flicker wash from scratch. Row arrival quantizes TIME to the region's
+  2-3 frame quantum, so a row lands whole and stays stable within its
+  step; the flicker is on exactly when floor(frame / 2) is odd inside the
+  flood window. No Math.random, no wall clock, no incremental state:
+  eventful seeks repaint identically in any order and either direction.
+
+  Mount contract: the runtime clones only this template. #root fills the
+  host box (no data-width/data-height, container-type: size, cqmin units),
+  is styled via #root only, and registers one paused timeline under the
+  LITERAL "segmentation-flood" key. All DOM state is set with explicit
+  endpoints (gsap.set + fromTo) so any seek order lands identical frames.
+-->
+<html
+  lang="en"
+  data-composition-id="segmentation-flood"
+  data-composition-duration="4.5"
+  data-composition-variables='[
+    { "id": "regions", "type": "string", "role": "content", "label": "Regions", "description": "Comma-separated region labels; 2 to 4 are used, one translucent mask + bracket + mono chip each.", "default": "Figure, Signal, Ground" },
+    { "id": "flood_at", "type": "number", "role": "timing", "label": "Flood at", "description": "Seconds from mount start when the segmentation pass begins. Clamped so the pass and any exit stay inside the clip.", "default": 0.8 },
+    { "id": "flicker", "type": "enum", "role": "style", "label": "Flicker", "description": "Deterministic 2-frame HUD luminance toggle riding the flood pass.", "default": "on", "options": [{ "value": "on", "label": "On" }, { "value": "off", "label": "Off" }] },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Mask, bracket, and chip color: green rides --brand, blue rides --accent, violet rides --accent-2.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the labeled read holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Segmentation Flood</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="segmentation-flood" data-duration="4.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, "Inter", system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .sgf-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .sgf-stage {
+            position: absolute;
+            inset: 0;
+            will-change: transform, opacity;
+          }
+
+          .sgf-subject {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            will-change: opacity;
+          }
+
+          .sgf-subject > img,
+          .sgf-subject > video {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+          }
+
+          .sgf-scene {
+            position: absolute;
+            inset: 0;
+            background: color-mix(in srgb, var(--surface, #14171c) 88%, var(--bg, #0b0c0e));
+          }
+
+          .sgf-shape {
+            position: absolute;
+            border: 0.16cqmin solid color-mix(in srgb, var(--border, #475569) 70%, transparent);
+            border-radius: var(--radius, 2cqmin);
+            background: color-mix(in srgb, var(--muted, #94a3b8) 16%, var(--surface, #14171c));
+          }
+
+          .sgf-shape.round {
+            border-radius: 50%;
+          }
+
+          .sgf-canvas {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+          }
+
+          .sgf-overlay {
+            position: absolute;
+            inset: 0;
+          }
+
+          .sgf-frame {
+            position: absolute;
+            will-change: opacity;
+          }
+
+          .sgf-corner {
+            position: absolute;
+            width: 2.6cqmin;
+            height: 2.6cqmin;
+            border: 0 solid var(--sgf-accent);
+          }
+
+          .sgf-corner.tl {
+            left: 0;
+            top: 0;
+            border-left-width: 0.28cqmin;
+            border-top-width: 0.28cqmin;
+          }
+
+          .sgf-corner.tr {
+            right: 0;
+            top: 0;
+            border-right-width: 0.28cqmin;
+            border-top-width: 0.28cqmin;
+          }
+
+          .sgf-corner.bl {
+            left: 0;
+            bottom: 0;
+            border-left-width: 0.28cqmin;
+            border-bottom-width: 0.28cqmin;
+          }
+
+          .sgf-corner.br {
+            right: 0;
+            bottom: 0;
+            border-right-width: 0.28cqmin;
+            border-bottom-width: 0.28cqmin;
+          }
+
+          .sgf-chip {
+            position: absolute;
+            display: inline-flex;
+            align-items: center;
+            gap: 0.9cqmin;
+            padding: 0.7cqmin 1.4cqmin;
+            border: 0.14cqmin solid
+              color-mix(in srgb, var(--sgf-accent) 60%, var(--border, #475569));
+            border-radius: calc(var(--radius, 2cqmin) * 0.4);
+            background: color-mix(in srgb, var(--bg, #0b0c0e) 78%, var(--sgf-accent));
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
+            font-size: 1.9cqmin;
+            font-weight: 500;
+            letter-spacing: 0.12em;
+            text-transform: uppercase;
+            white-space: nowrap;
+            will-change: opacity, transform;
+          }
+
+          .sgf-chip-dot {
+            width: 0.9cqmin;
+            height: 0.9cqmin;
+            border-radius: 50%;
+            background: var(--sgf-accent);
+          }
+        </style>
+
+        <div
+          id="segmentation-flood-clip"
+          class="sgf-clip clip"
+          data-start="0"
+          data-duration="4.5"
+          data-track-index="0"
+        >
+          <div class="sgf-stage">
+            <div class="sgf-subject">
+              <div class="sgf-scene" aria-hidden="true"></div>
+            </div>
+            <canvas class="sgf-canvas" aria-hidden="true"></canvas>
+            <div class="sgf-overlay"></div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".sgf-stage");
+            var subject = root.querySelector(".sgf-subject");
+            var scene = root.querySelector(".sgf-scene");
+            var canvas = root.querySelector(".sgf-canvas");
+            var overlay = root.querySelector(".sgf-overlay");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var labels = String(vars.regions == null ? "" : vars.regions)
+              .split(",")
+              .map(function (s) {
+                return s.trim();
+              })
+              .filter(Boolean)
+              .slice(0, 4);
+            if (labels.length < 2) labels = ["Figure", "Signal", "Ground"];
+
+            var floodAtRaw = parseFloat(vars.flood_at);
+            var flicker = vars.flicker !== "off";
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+            root.style.setProperty("--sgf-accent", accentColors[accent]);
+
+            // Region anchor cells (fractions of the stage), top-left to
+            // bottom-right so the staggered flood reads as one pass.
+            var anchors = [
+              { x: 0.07, y: 0.11, w: 0.34, h: 0.36 },
+              { x: 0.55, y: 0.08, w: 0.37, h: 0.4 },
+              { x: 0.12, y: 0.56, w: 0.3, h: 0.33 },
+              { x: 0.53, y: 0.58, w: 0.36, h: 0.31 },
+            ];
+
+            // SLOT. Caller templates live at HOST DOCUMENT level.
+            var hostDoc = root.ownerDocument;
+            var slotTemplate = null;
+            try {
+              slotTemplate = hostDoc.querySelector(
+                'template[data-slot="segmentation-flood-subject"]',
+              );
+            } catch (error) {
+              slotTemplate = null;
+            }
+            if (slotTemplate) {
+              scene.remove();
+              subject.appendChild(hostDoc.importNode(slotTemplate.content, true));
+            } else {
+              // Default token scene: muted shapes seated inside the region
+              // anchors so the machine-vision read has content to read.
+              for (var s = 0; s < labels.length; s += 1) {
+                var cell = anchors[s];
+                var shape = hostDoc.createElement("div");
+                shape.className = s % 2 === 1 ? "sgf-shape round" : "sgf-shape";
+                shape.style.left = (cell.x + cell.w * 0.16) * 100 + "%";
+                shape.style.top = (cell.y + cell.h * 0.18) * 100 + "%";
+                shape.style.width = cell.w * 0.68 * 100 + "%";
+                shape.style.height = cell.h * 0.64 * 100 + "%";
+                scene.appendChild(shape);
+              }
+            }
+
+            // Envelope. The pass length is fixed by the region count; the
+            // start cue is clamped so pass + exit always fit.
+            var fps = 30;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4.5"));
+            var OUT = exit === "none" ? 0 : 0.45;
+            var STAGGER = 0.35;
+            var REGION_DUR = 1.0;
+            var CHIP_DUR = 0.3;
+            var passLen = STAGGER * (labels.length - 1) + REGION_DUR + CHIP_DUR;
+            var floodAt = isFinite(floodAtRaw) ? floodAtRaw : 0.8;
+            floodAt = Math.min(
+              Math.max(0.2, floodAt),
+              Math.max(0.2, duration - passLen - OUT - 0.1),
+            );
+            var floodEnd = floodAt + STAGGER * (labels.length - 1) + REGION_DUR;
+            var OUT_START = duration - OUT;
+
+            // Canvas raster basis, fixed once at mount (elastic root: the
+            // host box decides the resolution).
+            var dpr = Math.min(2, Math.max(1, Number(window.devicePixelRatio) || 1));
+            var box = root.getBoundingClientRect();
+            var cssW = Math.max(1, Math.round(box.width) || 640);
+            var cssH = Math.max(1, Math.round(box.height) || 360);
+            canvas.width = Math.round(cssW * dpr);
+            canvas.height = Math.round(cssH * dpr);
+            var ctx = canvas.getContext("2d");
+
+            // Resolve the accent token to a concrete color once at mount so
+            // canvas fills never depend on style recalc during seeks.
+            var probe = hostDoc.createElement("span");
+            probe.style.color = accentColors[accent];
+            root.appendChild(probe);
+            var maskColor = getComputedStyle(probe).color || "#71f5a7";
+            probe.remove();
+
+            // Seeded region table: geometry jitter + per-region flood
+            // quantum (2 or 3 frames) + scanline row count. Computed once;
+            // painted frames are pure functions of (table, time).
+            var regions = (function () {
+              var state = 0x5e6f100d;
+              function next() {
+                state = (Math.imul(1664525, state) + 1013904223) >>> 0;
+                return state / 4294967296;
+              }
+              var rows = [];
+              for (var i = 0; i < labels.length; i += 1) {
+                var a = anchors[i];
+                rows.push({
+                  x: a.x + (next() - 0.5) * 0.02,
+                  y: a.y + (next() - 0.5) * 0.02,
+                  w: a.w * (0.94 + next() * 0.1),
+                  h: a.h * (0.94 + next() * 0.1),
+                  start: floodAt + STAGGER * i,
+                  quantum: next() < 0.5 ? 2 : 3,
+                  rows: 11 + Math.floor(next() * 4),
+                });
+              }
+              return rows;
+            })();
+
+            function clamp01(v) {
+              return v < 0 ? 0 : v > 1 ? 1 : v;
+            }
+
+            // Pure repaint: clear, then draw every mask's arrived rows and
+            // the flicker wash from (table, t). Row arrival quantizes time
+            // to the region's frame quantum, so rows land whole and hold
+            // stable within a step.
+            function paint(t) {
+              ctx.clearRect(0, 0, canvas.width, canvas.height);
+              for (var i = 0; i < regions.length; i += 1) {
+                var r = regions[i];
+                var local = t - r.start;
+                if (local <= 0) continue;
+                var q = r.quantum / fps;
+                var quantized = Math.floor(local / q) * q;
+                var p = clamp01(quantized / REGION_DUR);
+                var visible = Math.min(r.rows, Math.floor(p * r.rows + 1e-6));
+                if (visible <= 0) continue;
+                var rx = r.x * canvas.width;
+                var rw = r.w * canvas.width;
+                var rowH = (r.h * canvas.height) / r.rows;
+                for (var k = 0; k < visible; k += 1) {
+                  var leading = k === visible - 1 && visible < r.rows;
+                  ctx.globalAlpha = leading ? 0.55 : 0.3;
+                  ctx.fillStyle = maskColor;
+                  // A hairline gap between rows keeps the scanline texture.
+                  ctx.fillRect(
+                    rx,
+                    r.y * canvas.height + k * rowH,
+                    rw,
+                    Math.max(1, rowH - Math.max(1, dpr)),
+                  );
+                }
+              }
+              // HUD flicker: pure function of the frame index, active only
+              // while the flood is in flight, gone the instant it settles.
+              if (flicker && t > floodAt && t < floodEnd) {
+                var frame = Math.floor(t * fps);
+                if (Math.floor(frame / 2) % 2 === 1) {
+                  ctx.globalAlpha = 0.05;
+                  ctx.fillStyle = "#ffffff";
+                  ctx.fillRect(0, 0, canvas.width, canvas.height);
+                }
+              }
+              ctx.globalAlpha = 1;
+            }
+
+            // Brackets + chips: DOM, positioned from the seeded table.
+            var frames = [];
+            var chips = [];
+            for (var i = 0; i < regions.length; i += 1) {
+              var r = regions[i];
+              var frameEl = hostDoc.createElement("div");
+              frameEl.className = "sgf-frame";
+              frameEl.style.left = r.x * 100 + "%";
+              frameEl.style.top = r.y * 100 + "%";
+              frameEl.style.width = r.w * 100 + "%";
+              frameEl.style.height = r.h * 100 + "%";
+              ["tl", "tr", "bl", "br"].forEach(function (corner) {
+                var c = hostDoc.createElement("span");
+                c.className = "sgf-corner " + corner;
+                frameEl.appendChild(c);
+              });
+              overlay.appendChild(frameEl);
+              frames.push(frameEl);
+
+              var chip = hostDoc.createElement("div");
+              chip.className = "sgf-chip";
+              chip.style.left = r.x * 100 + "%";
+              // Chips sit above the region; bottom rows drop them inside
+              // the top edge so nothing leaves the stage.
+              if (r.y > 0.08) {
+                chip.style.top = "calc(" + r.y * 100 + "% - 3.9cqmin)";
+              } else {
+                chip.style.top = "calc(" + r.y * 100 + "% + 1cqmin)";
+              }
+              var dot = hostDoc.createElement("span");
+              dot.className = "sgf-chip-dot";
+              chip.appendChild(dot);
+              chip.appendChild(hostDoc.createTextNode(labels[i]));
+              overlay.appendChild(chip);
+              chips.push(chip);
+            }
+
+            gsap.set(stage, { opacity: 1, y: "0cqh" });
+            gsap.set(subject, { opacity: 0 });
+
+            var tl = gsap.timeline({
+              paused: true,
+              onUpdate: function () {
+                paint(tl.time());
+              },
+            });
+
+            // Anchor tween: an inert plain-object tween spanning the full
+            // authored duration so tl.time() covers [0, D] and onUpdate
+            // repaints the canvas on every eventful seek.
+            tl.to({ p: 0 }, { p: 1, duration: duration, ease: "none" }, 0);
+
+            // IN: the subject settles up quietly before the read begins.
+            tl.fromTo(
+              subject,
+              { opacity: 0 },
+              { opacity: 1, duration: 0.5, ease: "power2.out" },
+              0,
+            );
+
+            // Each region's bracket + chip land as its mask completes.
+            for (var i = 0; i < regions.length; i += 1) {
+              var done = regions[i].start + REGION_DUR;
+              tl.fromTo(
+                frames[i],
+                { opacity: 0 },
+                { opacity: 1, duration: 0.22, ease: "power2.out" },
+                done - 0.16,
+              );
+              tl.fromTo(
+                chips[i],
+                { opacity: 0, y: "0.8cqh" },
+                { opacity: 1, y: "0cqh", duration: CHIP_DUR, ease: "power2.out" },
+                done,
+              );
+            }
+
+            // HOLD: truly still; the flood is complete, the flicker window
+            // is closed, and the canvas repaints the same settled read.
+
+            // OUT: optional departure; exit none holds until the frame cuts.
+            if (exit === "up") {
+              tl.to(stage, { y: "-4cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "fade") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            }
+
+            tl.seek(0);
+            paint(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["segmentation-flood"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/separator/demo.html b/registry/components/separator/demo.html
new file mode 100644
index 0000000000..a871baa89a
--- /dev/null
+++ b/registry/components/separator/demo.html
@@ -0,0 +1,260 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Separator — Operator Black</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      body {
+        background: #0a0a0a;
+      }
+      .hf-ui-demo-canvas {
+        width: 1920px;
+        height: 1080px;
+        box-sizing: border-box;
+        display: grid;
+        grid-template-rows: 1fr auto;
+        place-items: center;
+        padding: 96px;
+        background: #0a0a0a;
+        color: #e5e5e5;
+        font-family:
+          ui-sans-serif,
+          -apple-system,
+          BlinkMacSystemFont,
+          "Segoe UI",
+          sans-serif;
+      }
+      .hf-ui-demo-stage {
+        display: grid;
+        place-items: center;
+        width: min(720px, 100%);
+        min-width: 0;
+        max-width: 100%;
+      }
+      .hf-ui-demo-caption {
+        justify-self: start;
+        color: #929292;
+        font:
+          500 18px/1.4 ui-monospace,
+          "SFMono-Regular",
+          Menlo,
+          Consolas,
+          monospace;
+        letter-spacing: 0.01em;
+      }
+    </style>
+  </head>
+  <body>
+    <main
+      class="hf-ui-demo-canvas"
+      data-composition-id="separator-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-hf-rendering="true"
+      data-hf-theme="dark"
+    >
+      <!-- prettier-ignore -->
+      <section class="hf-ui-demo-stage" aria-label="Separator specimen" inert>
+        <!-- hf-ui:canonical:start -->
+<!--
+  Separator - Operator Black structural rule primitive for HyperFrames.
+
+  Paste the markup and CSS into a composition. Animate the CSS variables
+  from a paused GSAP timeline for deterministic video renders.
+-->
+
+<div data-hf-ui-root class="hf-ui-separator" role="separator" aria-orientation="horizontal">
+  <span></span>
+</div>
+
+<style>
+  /* hf-ui:tokens:start */
+  /* prettier-ignore */
+  [data-hf-ui-root] {
+    --_hf-ui-accent: var(--hf-ui-accent, #3ce6ac);
+    --_hf-ui-action: var(--hf-ui-action, #eeeeee);
+    --_hf-ui-action-contrast: var(--hf-ui-action-contrast, #111111);
+    --_hf-ui-border: var(--hf-ui-border, #2a2a2a);
+    --_hf-ui-border-strong: var(--hf-ui-border-strong, #383838);
+    --_hf-ui-canvas: var(--hf-ui-canvas, #0a0a0a);
+    --_hf-ui-control-border: var(--hf-ui-control-border, #686868);
+    --_hf-ui-control-border-hover: var(--hf-ui-control-border-hover, #777777);
+    --_hf-ui-control-height: var(--hf-ui-control-height, 40px);
+    --_hf-ui-danger: var(--hf-ui-danger, #ff7878);
+    --_hf-ui-data-1: var(--hf-ui-data-1, #3ce6ac);
+    --_hf-ui-data-2: var(--hf-ui-data-2, #63a5ff);
+    --_hf-ui-data-3: var(--hf-ui-data-3, #e9ab55);
+    --_hf-ui-data-4: var(--hf-ui-data-4, #a78bfa);
+    --_hf-ui-data-5: var(--hf-ui-data-5, #ff8a75);
+    --_hf-ui-duration-drawer-enter: var(--hf-ui-duration-drawer-enter, 360ms);
+    --_hf-ui-duration-drawer-exit: var(--hf-ui-duration-drawer-exit, 240ms);
+    --_hf-ui-duration-modal-enter: var(--hf-ui-duration-modal-enter, 280ms);
+    --_hf-ui-duration-modal-exit: var(--hf-ui-duration-modal-exit, 180ms);
+    --_hf-ui-duration-overlay-enter: var(--hf-ui-duration-overlay-enter, 210ms);
+    --_hf-ui-duration-overlay-exit: var(--hf-ui-duration-overlay-exit, 140ms);
+    --_hf-ui-duration-press: var(--hf-ui-duration-press, 120ms);
+    --_hf-ui-duration-state: var(--hf-ui-duration-state, 160ms);
+    --_hf-ui-ease-enter: var(--hf-ui-ease-enter, cubic-bezier(0.32, 0.72, 0, 1));
+    --_hf-ui-ease-exit: var(--hf-ui-ease-exit, cubic-bezier(0.23, 1, 0.32, 1));
+    --_hf-ui-ease-response: var(--hf-ui-ease-response, cubic-bezier(0.23, 1, 0.32, 1));
+    --_hf-ui-font-mono: var(--hf-ui-font-mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
+    --_hf-ui-font-sans: var(--hf-ui-font-sans, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
+    --_hf-ui-hit-target: var(--hf-ui-hit-target, 44px);
+    --_hf-ui-radius-control: var(--hf-ui-radius-control, 5px);
+    --_hf-ui-radius-overlay: var(--hf-ui-radius-overlay, 10px);
+    --_hf-ui-radius-surface: var(--hf-ui-radius-surface, 7px);
+    --_hf-ui-shadow-contact: var(--hf-ui-shadow-contact, 0 8px 18px rgba(0, 0, 0, 0.38));
+    --_hf-ui-shadow-inset: var(--hf-ui-shadow-inset, inset 0 1px 0 rgba(255, 255, 255, 0.035));
+    --_hf-ui-shadow-modal: var(--hf-ui-shadow-modal, 0 18px 46px rgba(0, 0, 0, 0.52));
+    --_hf-ui-space-1: var(--hf-ui-space-1, 4px);
+    --_hf-ui-space-12: var(--hf-ui-space-12, 48px);
+    --_hf-ui-space-16: var(--hf-ui-space-16, 64px);
+    --_hf-ui-space-2: var(--hf-ui-space-2, 8px);
+    --_hf-ui-space-3: var(--hf-ui-space-3, 12px);
+    --_hf-ui-space-4: var(--hf-ui-space-4, 16px);
+    --_hf-ui-space-6: var(--hf-ui-space-6, 24px);
+    --_hf-ui-space-8: var(--hf-ui-space-8, 32px);
+    --_hf-ui-surface: var(--hf-ui-surface, #141414);
+    --_hf-ui-surface-inset: var(--hf-ui-surface-inset, #101010);
+    --_hf-ui-surface-raised: var(--hf-ui-surface-raised, #1a1a1a);
+    --_hf-ui-text: var(--hf-ui-text, #e5e5e5);
+    --_hf-ui-text-faint: var(--hf-ui-text-faint, #7e7e7e);
+    --_hf-ui-text-muted: var(--hf-ui-text-muted, #929292);
+    --_hf-ui-text-strong: var(--hf-ui-text-strong, #f3f3f3);
+    --_hf-ui-warning: var(--hf-ui-warning, #e9ab55);
+    --_hf-ui-weight-medium: var(--hf-ui-weight-medium, 500);
+    --_hf-ui-weight-regular: var(--hf-ui-weight-regular, 400);
+    --_hf-ui-weight-semibold: var(--hf-ui-weight-semibold, 600);
+    box-sizing: border-box;
+    color-scheme: dark;
+    font-family: var(--_hf-ui-font-sans);
+  }
+  /* prettier-ignore */
+  [data-hf-ui-root] *,
+  [data-hf-ui-root] *::before,
+  [data-hf-ui-root] *::after {
+    box-sizing: border-box;
+  }
+  /* prettier-ignore */
+  [data-hf-theme="light"] [data-hf-ui-root],
+  [data-hf-ui-root][data-hf-theme="light"] {
+    --_hf-ui-accent: var(--hf-ui-accent, #087a57);
+    --_hf-ui-action: var(--hf-ui-action, #171717);
+    --_hf-ui-action-contrast: var(--hf-ui-action-contrast, #ffffff);
+    --_hf-ui-border: var(--hf-ui-border, #e0dfdb);
+    --_hf-ui-border-strong: var(--hf-ui-border-strong, #cbc9c3);
+    --_hf-ui-canvas: var(--hf-ui-canvas, #f6f5f1);
+    --_hf-ui-control-border: var(--hf-ui-control-border, #888888);
+    --_hf-ui-control-border-hover: var(--hf-ui-control-border-hover, #6f6e68);
+    --_hf-ui-danger: var(--hf-ui-danger, #a61b1b);
+    --_hf-ui-data-1: var(--hf-ui-data-1, #087a57);
+    --_hf-ui-data-2: var(--hf-ui-data-2, #245ea8);
+    --_hf-ui-data-3: var(--hf-ui-data-3, #8a4b00);
+    --_hf-ui-data-4: var(--hf-ui-data-4, #6d3fc0);
+    --_hf-ui-data-5: var(--hf-ui-data-5, #a83d2d);
+    --_hf-ui-shadow-contact: var(--hf-ui-shadow-contact, 0 7px 16px rgba(26, 24, 20, 0.13));
+    --_hf-ui-shadow-inset: var(--hf-ui-shadow-inset, inset 0 1px 0 rgba(255, 255, 255, 0.78));
+    --_hf-ui-shadow-modal: var(--hf-ui-shadow-modal, 0 18px 46px rgba(26, 24, 20, 0.18));
+    --_hf-ui-surface: var(--hf-ui-surface, #ffffff);
+    --_hf-ui-surface-inset: var(--hf-ui-surface-inset, #f0efeb);
+    --_hf-ui-surface-raised: var(--hf-ui-surface-raised, #ffffff);
+    --_hf-ui-text: var(--hf-ui-text, #171717);
+    --_hf-ui-text-faint: var(--hf-ui-text-faint, #6f6e68);
+    --_hf-ui-text-muted: var(--hf-ui-text-muted, #5f5f5a);
+    --_hf-ui-text-strong: var(--hf-ui-text-strong, #0a0a0a);
+    --_hf-ui-warning: var(--hf-ui-warning, #8a4b00);
+    color-scheme: light;
+  }
+  /* prettier-ignore */
+  [data-hf-ui-root]:focus-visible {
+    outline: 2px solid var(--_hf-ui-accent);
+    outline-offset: 3px;
+  }
+  /* prettier-ignore */
+  [data-hf-rendering="true"][data-hf-ui-root],
+  [data-hf-rendering="true"] [data-hf-ui-root],
+  [data-hf-rendering="true"][data-hf-ui-root] *,
+  [data-hf-rendering="true"] [data-hf-ui-root] *,
+  [data-hf-rendering="true"][data-hf-ui-root]::before,
+  [data-hf-rendering="true"][data-hf-ui-root]::after,
+  [data-hf-rendering="true"] [data-hf-ui-root]::before,
+  [data-hf-rendering="true"] [data-hf-ui-root]::after,
+  [data-hf-rendering="true"][data-hf-ui-root] *::before,
+  [data-hf-rendering="true"][data-hf-ui-root] *::after,
+  [data-hf-rendering="true"] [data-hf-ui-root] *::before,
+  [data-hf-rendering="true"] [data-hf-ui-root] *::after {
+    animation-duration: 0s !important;
+    animation-delay: 0s !important;
+    transition-duration: 0s !important;
+    transition-delay: 0s !important;
+  }
+  /* prettier-ignore */
+  @media (prefers-reduced-motion: reduce) {
+    [data-hf-ui-root],
+    [data-hf-ui-root] *,
+    [data-hf-ui-root] *::before,
+    [data-hf-ui-root] *::after {
+      animation-duration: 0s !important;
+      animation-delay: 0s !important;
+      transition-duration: 0s !important;
+      transition-delay: 0s !important;
+      scroll-behavior: auto !important;
+    }
+  }
+  /* hf-ui:tokens:end */
+  .hf-ui-separator {
+    --hf-separator-progress: 1;
+    width: min(360px, 100%);
+    height: 1px;
+    background: var(--_hf-ui-border);
+    overflow: hidden;
+  }
+  .hf-ui-separator span {
+    display: block;
+    width: calc(var(--hf-separator-progress) * 100%);
+    height: 100%;
+    background: var(--_hf-ui-control-border);
+    transform-origin: left center;
+  }
+  .hf-ui-separator[data-orientation="vertical"] {
+    width: 1px;
+    height: 180px;
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-ui-separator', { '--hf-separator-progress': 0 }, { '--hf-separator-progress': 1, duration: 0.42, ease: 'power3.out' }, startTime);
+-->
+<!-- hf-ui:canonical:end -->
+      </section>
+      <p class="hf-ui-demo-caption">Separator</p>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        tl.addLabel("start", 0);
+        tl.set(".hf-ui-demo-stage", { opacity: 1 }, 0);
+        tl.set(".hf-ui-separator", { "--hf-separator-progress": 0, immediateRender: true }, 0);
+        tl.to(
+          ".hf-ui-separator",
+          { "--hf-separator-progress": 1, duration: 0.42, ease: "power3.out" },
+          0.6,
+        );
+        tl.addLabel("end", 3.99);
+        tl.to(".hf-ui-demo-stage", { opacity: 1, duration: 0.01 }, 3.99);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["separator-demo"] = tl;
+      </script>
+    </main>
+  </body>
+</html>
diff --git a/registry/components/separator/registry-item.json b/registry/components/separator/registry-item.json
new file mode 100644
index 0000000000..4d959c1212
--- /dev/null
+++ b/registry/components/separator/registry-item.json
@@ -0,0 +1,82 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "separator",
+  "type": "hyperframes:component",
+  "title": "Separator",
+  "description": "A one-pixel structural separator with horizontal and vertical variants plus a seek-safe progress reveal",
+  "tags": ["video-primitive", "remocn-port", "separator", "layout"],
+  "files": [
+    {
+      "path": "separator.html",
+      "target": "compositions/components/separator.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "orientation",
+      "type": "enum",
+      "role": "layout",
+      "label": "Orientation",
+      "description": "Which way the rule runs, and so which way the reveal travels.",
+      "default": "horizontal",
+      "options": [
+        {
+          "value": "horizontal",
+          "label": "Horizontal"
+        },
+        {
+          "value": "vertical",
+          "label": "Vertical"
+        }
+      ]
+    },
+    {
+      "id": "thickness",
+      "type": "enum",
+      "role": "style",
+      "label": "Thickness",
+      "description": "Size of the rule across its short edge, from a 1px hairline to a 4px bar.",
+      "default": "hairline",
+      "options": [
+        {
+          "value": "hairline",
+          "label": "Hairline"
+        },
+        {
+          "value": "medium",
+          "label": "Medium"
+        },
+        {
+          "value": "bold",
+          "label": "Bold"
+        }
+      ]
+    },
+    {
+      "id": "tone",
+      "type": "enum",
+      "role": "style",
+      "label": "Tone",
+      "description": "Colour of the revealed fill: neutral grey, the theme accent, or the warning hue.",
+      "default": "neutral",
+      "options": [
+        {
+          "value": "neutral",
+          "label": "Neutral"
+        },
+        {
+          "value": "accent",
+          "label": "Accent"
+        },
+        {
+          "value": "warning",
+          "label": "Warning"
+        }
+      ]
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/separator.png"
+  }
+}
diff --git a/registry/components/separator/separator.html b/registry/components/separator/separator.html
new file mode 100644
index 0000000000..cb886ce286
--- /dev/null
+++ b/registry/components/separator/separator.html
@@ -0,0 +1,238 @@
+<!--
+  Separator - Operator Black structural rule primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Animate the CSS
+  variables from a paused GSAP timeline for deterministic video renders.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result as a custom property
+  or an attribute the CSS above consumes. The timeline recipe below is
+  untouched by them: it still drives one progress value from 0 to 1, and these
+  decide what that progress reveals.
+
+    - orientation (horizontal | vertical, default horizontal): which way the
+      rule runs. horizontal is a 360px wide rule wiping left to right,
+      vertical is a 180px tall rule wiping top to bottom.
+    - thickness (hairline | medium | bold, default hairline): the rule size
+      across its short edge, 1px, 2px or 4px.
+    - tone (neutral | accent | warning, default neutral): colour of the
+      revealed fill. neutral keeps the control border grey, accent rides
+      --hf-ui-accent, warning rides --hf-ui-warning.
+
+  On every default the result is identical to the original: a 1px horizontal
+  grey rule wiping left to right.
+-->
+
+<div
+  data-hf-ui-root
+  class="hf-ui-separator"
+  role="separator"
+  aria-orientation="horizontal"
+  data-composition-variables='[
+    { "id": "orientation", "type": "enum", "role": "layout", "label": "Orientation", "description": "Which way the rule runs, and so which way the reveal travels.", "default": "horizontal", "options": [{ "value": "horizontal", "label": "Horizontal" }, { "value": "vertical", "label": "Vertical" }] },
+    { "id": "thickness", "type": "enum", "role": "style", "label": "Thickness", "description": "Size of the rule across its short edge, from a 1px hairline to a 4px bar.", "default": "hairline", "options": [{ "value": "hairline", "label": "Hairline" }, { "value": "medium", "label": "Medium" }, { "value": "bold", "label": "Bold" }] },
+    { "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Colour of the revealed fill: neutral grey, the theme accent, or the warning hue.", "default": "neutral", "options": [{ "value": "neutral", "label": "Neutral" }, { "value": "accent", "label": "Accent" }, { "value": "warning", "label": "Warning" }] }
+  ]'
+>
+  <span></span>
+</div>
+
+<style>
+  /* hf-ui:tokens:start */
+  /* prettier-ignore */
+  [data-hf-ui-root] {
+    --_hf-ui-accent: var(--hf-ui-accent, #3ce6ac);
+    --_hf-ui-action: var(--hf-ui-action, #eeeeee);
+    --_hf-ui-action-contrast: var(--hf-ui-action-contrast, #111111);
+    --_hf-ui-border: var(--hf-ui-border, #2a2a2a);
+    --_hf-ui-border-strong: var(--hf-ui-border-strong, #383838);
+    --_hf-ui-canvas: var(--hf-ui-canvas, #0a0a0a);
+    --_hf-ui-control-border: var(--hf-ui-control-border, #686868);
+    --_hf-ui-control-border-hover: var(--hf-ui-control-border-hover, #777777);
+    --_hf-ui-control-height: var(--hf-ui-control-height, 40px);
+    --_hf-ui-danger: var(--hf-ui-danger, #ff7878);
+    --_hf-ui-data-1: var(--hf-ui-data-1, #3ce6ac);
+    --_hf-ui-data-2: var(--hf-ui-data-2, #63a5ff);
+    --_hf-ui-data-3: var(--hf-ui-data-3, #e9ab55);
+    --_hf-ui-data-4: var(--hf-ui-data-4, #a78bfa);
+    --_hf-ui-data-5: var(--hf-ui-data-5, #ff8a75);
+    --_hf-ui-duration-drawer-enter: var(--hf-ui-duration-drawer-enter, 360ms);
+    --_hf-ui-duration-drawer-exit: var(--hf-ui-duration-drawer-exit, 240ms);
+    --_hf-ui-duration-modal-enter: var(--hf-ui-duration-modal-enter, 280ms);
+    --_hf-ui-duration-modal-exit: var(--hf-ui-duration-modal-exit, 180ms);
+    --_hf-ui-duration-overlay-enter: var(--hf-ui-duration-overlay-enter, 210ms);
+    --_hf-ui-duration-overlay-exit: var(--hf-ui-duration-overlay-exit, 140ms);
+    --_hf-ui-duration-press: var(--hf-ui-duration-press, 120ms);
+    --_hf-ui-duration-state: var(--hf-ui-duration-state, 160ms);
+    --_hf-ui-ease-enter: var(--hf-ui-ease-enter, cubic-bezier(0.32, 0.72, 0, 1));
+    --_hf-ui-ease-exit: var(--hf-ui-ease-exit, cubic-bezier(0.23, 1, 0.32, 1));
+    --_hf-ui-ease-response: var(--hf-ui-ease-response, cubic-bezier(0.23, 1, 0.32, 1));
+    --_hf-ui-font-mono: var(--hf-ui-font-mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
+    --_hf-ui-font-sans: var(--hf-ui-font-sans, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
+    --_hf-ui-hit-target: var(--hf-ui-hit-target, 44px);
+    --_hf-ui-radius-control: var(--hf-ui-radius-control, 5px);
+    --_hf-ui-radius-overlay: var(--hf-ui-radius-overlay, 10px);
+    --_hf-ui-radius-surface: var(--hf-ui-radius-surface, 7px);
+    --_hf-ui-shadow-contact: var(--hf-ui-shadow-contact, 0 8px 18px rgba(0, 0, 0, 0.38));
+    --_hf-ui-shadow-inset: var(--hf-ui-shadow-inset, inset 0 1px 0 rgba(255, 255, 255, 0.035));
+    --_hf-ui-shadow-modal: var(--hf-ui-shadow-modal, 0 18px 46px rgba(0, 0, 0, 0.52));
+    --_hf-ui-space-1: var(--hf-ui-space-1, 4px);
+    --_hf-ui-space-12: var(--hf-ui-space-12, 48px);
+    --_hf-ui-space-16: var(--hf-ui-space-16, 64px);
+    --_hf-ui-space-2: var(--hf-ui-space-2, 8px);
+    --_hf-ui-space-3: var(--hf-ui-space-3, 12px);
+    --_hf-ui-space-4: var(--hf-ui-space-4, 16px);
+    --_hf-ui-space-6: var(--hf-ui-space-6, 24px);
+    --_hf-ui-space-8: var(--hf-ui-space-8, 32px);
+    --_hf-ui-surface: var(--hf-ui-surface, #141414);
+    --_hf-ui-surface-inset: var(--hf-ui-surface-inset, #101010);
+    --_hf-ui-surface-raised: var(--hf-ui-surface-raised, #1a1a1a);
+    --_hf-ui-text: var(--hf-ui-text, #e5e5e5);
+    --_hf-ui-text-faint: var(--hf-ui-text-faint, #7e7e7e);
+    --_hf-ui-text-muted: var(--hf-ui-text-muted, #929292);
+    --_hf-ui-text-strong: var(--hf-ui-text-strong, #f3f3f3);
+    --_hf-ui-warning: var(--hf-ui-warning, #e9ab55);
+    --_hf-ui-weight-medium: var(--hf-ui-weight-medium, 500);
+    --_hf-ui-weight-regular: var(--hf-ui-weight-regular, 400);
+    --_hf-ui-weight-semibold: var(--hf-ui-weight-semibold, 600);
+    box-sizing: border-box;
+    color-scheme: dark;
+    font-family: var(--_hf-ui-font-sans);
+  }
+  /* prettier-ignore */
+  [data-hf-ui-root] *,
+  [data-hf-ui-root] *::before,
+  [data-hf-ui-root] *::after {
+    box-sizing: border-box;
+  }
+  /* prettier-ignore */
+  [data-hf-theme="light"] [data-hf-ui-root],
+  [data-hf-ui-root][data-hf-theme="light"] {
+    --_hf-ui-accent: var(--hf-ui-accent, #087a57);
+    --_hf-ui-action: var(--hf-ui-action, #171717);
+    --_hf-ui-action-contrast: var(--hf-ui-action-contrast, #ffffff);
+    --_hf-ui-border: var(--hf-ui-border, #e0dfdb);
+    --_hf-ui-border-strong: var(--hf-ui-border-strong, #cbc9c3);
+    --_hf-ui-canvas: var(--hf-ui-canvas, #f6f5f1);
+    --_hf-ui-control-border: var(--hf-ui-control-border, #888888);
+    --_hf-ui-control-border-hover: var(--hf-ui-control-border-hover, #6f6e68);
+    --_hf-ui-danger: var(--hf-ui-danger, #a61b1b);
+    --_hf-ui-data-1: var(--hf-ui-data-1, #087a57);
+    --_hf-ui-data-2: var(--hf-ui-data-2, #245ea8);
+    --_hf-ui-data-3: var(--hf-ui-data-3, #8a4b00);
+    --_hf-ui-data-4: var(--hf-ui-data-4, #6d3fc0);
+    --_hf-ui-data-5: var(--hf-ui-data-5, #a83d2d);
+    --_hf-ui-shadow-contact: var(--hf-ui-shadow-contact, 0 7px 16px rgba(26, 24, 20, 0.13));
+    --_hf-ui-shadow-inset: var(--hf-ui-shadow-inset, inset 0 1px 0 rgba(255, 255, 255, 0.78));
+    --_hf-ui-shadow-modal: var(--hf-ui-shadow-modal, 0 18px 46px rgba(26, 24, 20, 0.18));
+    --_hf-ui-surface: var(--hf-ui-surface, #ffffff);
+    --_hf-ui-surface-inset: var(--hf-ui-surface-inset, #f0efeb);
+    --_hf-ui-surface-raised: var(--hf-ui-surface-raised, #ffffff);
+    --_hf-ui-text: var(--hf-ui-text, #171717);
+    --_hf-ui-text-faint: var(--hf-ui-text-faint, #6f6e68);
+    --_hf-ui-text-muted: var(--hf-ui-text-muted, #5f5f5a);
+    --_hf-ui-text-strong: var(--hf-ui-text-strong, #0a0a0a);
+    --_hf-ui-warning: var(--hf-ui-warning, #8a4b00);
+    color-scheme: light;
+  }
+  /* prettier-ignore */
+  [data-hf-ui-root]:focus-visible {
+    outline: 2px solid var(--_hf-ui-accent);
+    outline-offset: 3px;
+  }
+  /* prettier-ignore */
+  [data-hf-rendering="true"][data-hf-ui-root],
+  [data-hf-rendering="true"] [data-hf-ui-root],
+  [data-hf-rendering="true"][data-hf-ui-root] *,
+  [data-hf-rendering="true"] [data-hf-ui-root] *,
+  [data-hf-rendering="true"][data-hf-ui-root]::before,
+  [data-hf-rendering="true"][data-hf-ui-root]::after,
+  [data-hf-rendering="true"] [data-hf-ui-root]::before,
+  [data-hf-rendering="true"] [data-hf-ui-root]::after,
+  [data-hf-rendering="true"][data-hf-ui-root] *::before,
+  [data-hf-rendering="true"][data-hf-ui-root] *::after,
+  [data-hf-rendering="true"] [data-hf-ui-root] *::before,
+  [data-hf-rendering="true"] [data-hf-ui-root] *::after {
+    animation-duration: 0s !important;
+    animation-delay: 0s !important;
+    transition-duration: 0s !important;
+    transition-delay: 0s !important;
+  }
+  /* prettier-ignore */
+  @media (prefers-reduced-motion: reduce) {
+    [data-hf-ui-root],
+    [data-hf-ui-root] *,
+    [data-hf-ui-root] *::before,
+    [data-hf-ui-root] *::after {
+      animation-duration: 0s !important;
+      animation-delay: 0s !important;
+      transition-duration: 0s !important;
+      transition-delay: 0s !important;
+      scroll-behavior: auto !important;
+    }
+  }
+  /* hf-ui:tokens:end */
+  .hf-ui-separator {
+    --hf-separator-progress: 1;
+    width: min(360px, 100%);
+    height: var(--hf-separator-thickness, 1px);
+    background: var(--_hf-ui-border);
+    overflow: hidden;
+  }
+  .hf-ui-separator span {
+    display: block;
+    width: calc(var(--hf-separator-progress) * 100%);
+    height: 100%;
+    background: var(--hf-separator-fill, var(--_hf-ui-control-border));
+    transform-origin: left center;
+  }
+  .hf-ui-separator[data-orientation="vertical"] {
+    width: var(--hf-separator-thickness, 1px);
+    height: 180px;
+  }
+  .hf-ui-separator[data-orientation="vertical"] span {
+    width: 100%;
+    height: calc(var(--hf-separator-progress) * 100%);
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    var orientations = { horizontal: true, vertical: true };
+    var thicknesses = { hairline: "1px", medium: "2px", bold: "4px" };
+    var tones = {
+      neutral: "var(--_hf-ui-control-border)",
+      accent: "var(--_hf-ui-accent)",
+      warning: "var(--_hf-ui-warning)",
+    };
+
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var orientation = pick(orientations, vars.orientation, "horizontal");
+    var thickness = thicknesses[pick(thicknesses, vars.thickness, "hairline")];
+    var tone = tones[pick(tones, vars.tone, "neutral")];
+
+    var roots = document.querySelectorAll(".hf-ui-separator");
+    for (var i = 0; i < roots.length; i += 1) {
+      roots[i].setAttribute("data-orientation", orientation);
+      roots[i].setAttribute("aria-orientation", orientation);
+      roots[i].style.setProperty("--hf-separator-thickness", thickness);
+      roots[i].style.setProperty("--hf-separator-fill", tone);
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-ui-separator', { '--hf-separator-progress': 0 }, { '--hf-separator-progress': 1, duration: 0.42, ease: 'power3.out' }, startTime);
+-->
diff --git a/registry/components/settings-toggle-flow/demo.html b/registry/components/settings-toggle-flow/demo.html
new file mode 100644
index 0000000000..87484bcbdf
--- /dev/null
+++ b/registry/components/settings-toggle-flow/demo.html
@@ -0,0 +1,148 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Settings Toggle Flow - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f8fafc;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        min-width: 760px;
+        min-height: 520px;
+        padding: 56px;
+        transform: scale(
+          1.2
+        ); /* ponytail: scale wrapper not GSAP target; GSAP animates .hf-ui-settings-flow and children */
+        transform-origin: center center;
+      }
+      .hf-ui-settings-flow {
+        display: grid;
+        gap: 12px;
+        width: 520px;
+        padding: 18px;
+        border: 1px solid #e4e4e7;
+        border-radius: 28px;
+        background: #ffffff;
+        color: #18181b;
+        font-family: Inter, system-ui, sans-serif;
+        box-shadow: 0 26px 80px rgba(0, 0, 0, 0.1);
+      }
+      .hf-ui-settings-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        min-height: 72px;
+        padding: 0 16px;
+        border-radius: 18px;
+        background: #f8fafc;
+      }
+      .hf-ui-settings-row div {
+        display: grid;
+        gap: 4px;
+      }
+      .hf-ui-settings-row strong {
+        font-size: 18px;
+      }
+      .hf-ui-settings-row span {
+        color: #71717a;
+        font-size: 13px;
+        font-weight: 500;
+      }
+      .hf-ui-settings-row i {
+        position: relative;
+        width: 50px;
+        height: 28px;
+        border-radius: 999px;
+        background: #d4d4d8;
+      }
+      .hf-ui-settings-row i::after {
+        content: "";
+        position: absolute;
+        left: 4px;
+        top: 4px;
+        width: 20px;
+        height: 20px;
+        border-radius: 999px;
+        background: #ffffff;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
+      }
+      .hf-ui-settings-row i.on {
+        background: #18181b;
+      }
+      .hf-ui-settings-row i.on::after {
+        transform: translateX(22px);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="settings-toggle-flow-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-ui-settings-flow">
+          <div class="hf-ui-settings-row">
+            <div><strong>Auto captions</strong><span>Generate timed captions</span></div>
+            <i class="on"></i>
+          </div>
+          <div class="hf-ui-settings-row">
+            <div><strong>Brand kit</strong><span>Apply saved colors</span></div>
+            <i class="on"></i>
+          </div>
+          <div class="hf-ui-settings-row">
+            <div><strong>Sound effects</strong><span>Layer subtle UI sounds</span></div>
+            <i></i>
+          </div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        tl.fromTo(
+          ".hf-ui-settings-flow",
+          { opacity: 0, y: 24 },
+          { opacity: 1, y: 0, duration: 0.34, ease: "power2.out" },
+          0.28,
+        );
+        tl.fromTo(
+          ".hf-ui-settings-row",
+          { x: -18, opacity: 0 },
+          { x: 0, opacity: 1, duration: 0.28, stagger: 0.08, ease: "power2.out" },
+          0.55,
+        );
+        tl.fromTo(
+          ".hf-ui-settings-row i.on",
+          { scale: 0.92 },
+          { scale: 1, duration: 0.28, stagger: 0.08, ease: "back.out(1.8)" },
+          0.88,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["settings-toggle-flow-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/settings-toggle-flow/registry-item.json b/registry/components/settings-toggle-flow/registry-item.json
new file mode 100644
index 0000000000..9bcbb0cc20
--- /dev/null
+++ b/registry/components/settings-toggle-flow/registry-item.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "settings-toggle-flow",
+  "type": "hyperframes:component",
+  "title": "Settings Toggle Flow",
+  "description": "A composed settings flow with preference rows, toggle switches, and active-state feedback",
+  "tags": ["ui-flow", "remocn-port", "settings", "toggle"],
+  "files": [
+    {
+      "path": "settings-toggle-flow.html",
+      "target": "compositions/components/settings-toggle-flow.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/settings-toggle-flow.png"
+  }
+}
diff --git a/registry/components/settings-toggle-flow/settings-toggle-flow.html b/registry/components/settings-toggle-flow/settings-toggle-flow.html
new file mode 100644
index 0000000000..fd62da4e56
--- /dev/null
+++ b/registry/components/settings-toggle-flow/settings-toggle-flow.html
@@ -0,0 +1,88 @@
+<!--
+  Settings Toggle Flow - Remocn-inspired composed UI flow for HyperFrames.
+
+  Paste the markup and CSS into a composition. Use the timeline integration
+  note at the bottom as the starting point for deterministic GSAP animation.
+-->
+
+<div class="hf-ui-settings-flow">
+  <div class="hf-ui-settings-row">
+    <div><strong>Auto captions</strong><span>Generate timed captions</span></div>
+    <i class="on"></i>
+  </div>
+  <div class="hf-ui-settings-row">
+    <div><strong>Brand kit</strong><span>Apply saved colors</span></div>
+    <i class="on"></i>
+  </div>
+  <div class="hf-ui-settings-row">
+    <div><strong>Sound effects</strong><span>Layer subtle UI sounds</span></div>
+    <i></i>
+  </div>
+</div>
+
+<style>
+  .hf-ui-settings-flow {
+    display: grid;
+    gap: 12px;
+    width: 520px;
+    padding: 18px;
+    border: 1px solid #e4e4e7;
+    border-radius: 28px;
+    background: #ffffff;
+    color: #18181b;
+    font-family: Inter, system-ui, sans-serif;
+    box-shadow: 0 26px 80px rgba(0, 0, 0, 0.1);
+  }
+  .hf-ui-settings-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    min-height: 72px;
+    padding: 0 16px;
+    border-radius: 18px;
+    background: #f8fafc;
+  }
+  .hf-ui-settings-row div {
+    display: grid;
+    gap: 4px;
+  }
+  .hf-ui-settings-row strong {
+    font-size: 18px;
+  }
+  .hf-ui-settings-row span {
+    color: #71717a;
+    font-size: 13px;
+    font-weight: 760;
+  }
+  .hf-ui-settings-row i {
+    position: relative;
+    width: 50px;
+    height: 28px;
+    border-radius: 999px;
+    background: #d4d4d8;
+  }
+  .hf-ui-settings-row i::after {
+    content: "";
+    position: absolute;
+    left: 4px;
+    top: 4px;
+    width: 20px;
+    height: 20px;
+    border-radius: 999px;
+    background: #ffffff;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
+  }
+  .hf-ui-settings-row i.on {
+    background: #18181b;
+  }
+  .hf-ui-settings-row i.on::after {
+    transform: translateX(22px);
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-ui-settings-flow', { opacity: 0, y: 24 }, { opacity: 1, y: 0, duration: 0.34, ease: 'power2.out' }, 0.28);
+  tl.fromTo('.hf-ui-settings-row', { x: -18, opacity: 0 }, { x: 0, opacity: 1, duration: 0.28, stagger: 0.08, ease: 'power2.out' }, 0.55);
+  tl.fromTo('.hf-ui-settings-row i.on', { scale: 0.92 }, { scale: 1, duration: 0.28, stagger: 0.08, ease: 'back.out(1.8)' }, 0.88);
+-->
diff --git a/registry/components/shared-axis-y/demo.html b/registry/components/shared-axis-y/demo.html
new file mode 100644
index 0000000000..8174ea6122
--- /dev/null
+++ b/registry/components/shared-axis-y/demo.html
@@ -0,0 +1,137 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Shared Axis Y - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f4f4f5;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      /* ponytail: zoom on .demo-frame (non-GSAP wrapper) keeps GSAP inline transforms on the child untouched */
+      .demo-frame {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 0;
+        zoom: 2.2;
+      }
+      .demo-card {
+        background: #fafafa;
+        border: 1px solid #e4e4e7;
+        border-radius: 16px;
+        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.1);
+        padding: 48px 56px 52px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 32px;
+        min-width: 480px;
+      }
+      .demo-label {
+        font-size: 11px;
+        font-weight: 600;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+        color: #71717a;
+      }
+      .demo-tabs {
+        display: flex;
+        gap: 4px;
+        background: #f4f4f5;
+        border-radius: 10px;
+        padding: 4px;
+      }
+      .demo-tab {
+        font-size: 13px;
+        font-weight: 500;
+        color: #71717a;
+        padding: 6px 16px;
+        border-radius: 7px;
+        cursor: default;
+      }
+      .demo-tab.active {
+        background: #fff;
+        color: #18181b;
+        font-weight: 600;
+        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+      }
+      .demo-divider {
+        width: 100%;
+        height: 1px;
+        background: #e4e4e7;
+      }
+      .hf-remocn-shared-axis-y {
+        color: #18181b;
+        font-family: Inter, system-ui, sans-serif;
+        font-weight: 800;
+        letter-spacing: -0.03em;
+        display: inline-flex;
+        gap: 10px;
+        font-size: 48px;
+        line-height: 1;
+      }
+      .hf-remocn-shared-axis-y span {
+        display: inline-block;
+        transform: translate(var(--hf-word-x, 0px), var(--hf-word-y, 0px))
+          scale(var(--hf-word-scale, 1));
+        filter: blur(var(--hf-word-blur, 0px));
+        will-change: transform, filter, opacity;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="shared-axis-y-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="demo-card">
+          <span class="demo-label">Mode</span>
+          <div class="demo-tabs">
+            <div class="demo-tab active">Plan</div>
+            <div class="demo-tab">Debug</div>
+            <div class="demo-tab">Ask</div>
+          </div>
+          <div class="demo-divider"></div>
+          <div class="hf-remocn-shared-axis-y">
+            <span>Plan</span><span>Debug</span><span>Ask</span>
+          </div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-shared-axis-y span",
+          { opacity: 0, "--hf-word-y": "32px" },
+          { opacity: 1, "--hf-word-y": "0px", duration: 0.22, stagger: 0.075, ease: "power2.out" },
+          startTime,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["shared-axis-y-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/shared-axis-y/registry-item.json b/registry/components/shared-axis-y/registry-item.json
new file mode 100644
index 0000000000..c08e02ea15
--- /dev/null
+++ b/registry/components/shared-axis-y/registry-item.json
@@ -0,0 +1,82 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "shared-axis-y",
+  "type": "hyperframes:component",
+  "title": "Shared Axis Y",
+  "description": "Per-word vertical shared-axis transition for sharp editorial swaps.",
+  "tags": ["motion-primitive", "remocn-port", "typography"],
+  "files": [
+    {
+      "path": "shared-axis-y.html",
+      "target": "compositions/components/shared-axis-y.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "direction",
+      "type": "enum",
+      "role": "motion",
+      "label": "Direction",
+      "description": "Which side of the baseline the words travel in from.",
+      "default": "up",
+      "options": [
+        {
+          "value": "up",
+          "label": "Up"
+        },
+        {
+          "value": "down",
+          "label": "Down"
+        }
+      ]
+    },
+    {
+      "id": "distance",
+      "type": "enum",
+      "role": "motion",
+      "label": "Distance",
+      "description": "Scales the vertical offset, so the words cover a shorter or longer run in the same time.",
+      "default": "standard",
+      "options": [
+        {
+          "value": "close",
+          "label": "Close"
+        },
+        {
+          "value": "standard",
+          "label": "Standard"
+        },
+        {
+          "value": "far",
+          "label": "Far"
+        }
+      ]
+    },
+    {
+      "id": "tone",
+      "type": "enum",
+      "role": "style",
+      "label": "Tone",
+      "description": "Word colour: ink for light frames, paper for dark ones, accent rides --brand.",
+      "default": "ink",
+      "options": [
+        {
+          "value": "ink",
+          "label": "Ink"
+        },
+        {
+          "value": "paper",
+          "label": "Paper"
+        },
+        {
+          "value": "accent",
+          "label": "Accent"
+        }
+      ]
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/shared-axis-y.png"
+  }
+}
diff --git a/registry/components/shared-axis-y/shared-axis-y.html b/registry/components/shared-axis-y/shared-axis-y.html
new file mode 100644
index 0000000000..24ad84d168
--- /dev/null
+++ b/registry/components/shared-axis-y/shared-axis-y.html
@@ -0,0 +1,98 @@
+<!--
+  Shared Axis Y - remocn typography primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Drive the timeline
+  integration from a paused GSAP timeline so renders remain deterministic.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result as a custom property
+  the CSS above consumes. The timeline recipe below is untouched by them: it
+  keeps driving one vertical offset, and these decide what that offset means
+  on screen. At rest the offset is 0, so every setting lands on the same
+  final frame.
+
+    - direction (up | down, default up): which side of the baseline the words
+      travel in from. up rises into place, down drops in.
+    - distance (close | standard | far, default standard): scales the offset.
+      close covers half the run, far nearly double, in the same time.
+    - tone (ink | paper | accent, default ink): word colour. ink is near-black
+      for light frames, paper near-white for dark ones, accent rides --brand.
+
+  On every default the result is identical to the original: words rise 32px
+  into place in near-black.
+-->
+
+<div
+  class="hf-remocn-shared-axis-y"
+  data-composition-variables='[
+    { "id": "direction", "type": "enum", "role": "motion", "label": "Direction", "description": "Which side of the baseline the words travel in from.", "default": "up", "options": [{ "value": "up", "label": "Up" }, { "value": "down", "label": "Down" }] },
+    { "id": "distance", "type": "enum", "role": "motion", "label": "Distance", "description": "Scales the vertical offset, so the words cover a shorter or longer run in the same time.", "default": "standard", "options": [{ "value": "close", "label": "Close" }, { "value": "standard", "label": "Standard" }, { "value": "far", "label": "Far" }] },
+    { "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Word colour: ink for light frames, paper for dark ones, accent rides --brand.", "default": "ink", "options": [{ "value": "ink", "label": "Ink" }, { "value": "paper", "label": "Paper" }, { "value": "accent", "label": "Accent" }] }
+  ]'
+>
+  <span>Plan</span><span>Debug</span><span>Ask</span>
+</div>
+
+<style>
+  .hf-remocn-shared-axis-y {
+    color: var(--hf-word-color, #18181b);
+    font-family: Inter, system-ui, sans-serif;
+    font-weight: 900;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-shared-axis-y {
+    display: inline-flex;
+    gap: 12px;
+    font-size: 56px;
+    line-height: 1;
+  }
+  .hf-remocn-shared-axis-y span {
+    display: inline-block;
+    transform: translate(
+        var(--hf-word-x, 0px),
+        calc(var(--hf-word-y, 0px) * var(--hf-word-axis-y, 1))
+      )
+      scale(var(--hf-word-scale, 1));
+    filter: blur(var(--hf-word-blur, 0px));
+    will-change: transform, filter, opacity;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    var signs = { up: 1, down: -1 };
+    var reaches = { close: 0.5, standard: 1, far: 1.85 };
+    var tones = {
+      ink: "#18181b",
+      paper: "#fafafa",
+      accent: "var(--brand, #34d399)",
+    };
+
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var sign = signs[pick(signs, vars.direction, "up")];
+    var reach = reaches[pick(reaches, vars.distance, "standard")];
+    var tone = tones[pick(tones, vars.tone, "ink")];
+
+    var roots = document.querySelectorAll(".hf-remocn-shared-axis-y");
+    for (var i = 0; i < roots.length; i += 1) {
+      roots[i].style.setProperty("--hf-word-axis-y", String(sign * reach));
+      roots[i].style.setProperty("--hf-word-color", tone);
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-shared-axis-y span', { opacity: 0, '--hf-word-y': '32px' }, { opacity: 1, '--hf-word-y': '0px', duration: 0.22, stagger: 0.075, ease: 'power2.out' }, startTime);
+-->
diff --git a/registry/components/shared-axis-z/demo.html b/registry/components/shared-axis-z/demo.html
new file mode 100644
index 0000000000..0f8df98ef7
--- /dev/null
+++ b/registry/components/shared-axis-z/demo.html
@@ -0,0 +1,282 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Shared Axis Z - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f4f4f5;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      /* ponytail: demo-frame is not a GSAP target — CSS transform is safe */
+      .demo-frame {
+        position: relative;
+        width: 720px;
+        height: 480px;
+        transform: scale(1.6);
+      }
+      /* Shared container that clips both panels */
+      .axis-z-stage {
+        position: relative;
+        width: 720px;
+        height: 480px;
+        border-radius: 16px;
+        overflow: hidden;
+        box-shadow:
+          0 32px 80px rgba(0, 0, 0, 0.12),
+          0 2px 8px rgba(0, 0, 0, 0.06);
+        border: 1px solid #e4e4e7;
+        background: #ffffff;
+      }
+      /* Outgoing panel (zooms out + fades) */
+      .axis-z-outgoing {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 14px;
+        background: #ffffff;
+        will-change: transform, opacity;
+      }
+      .axis-z-outgoing-icon {
+        width: 52px;
+        height: 52px;
+        border-radius: 12px;
+        background: #18181b;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .axis-z-outgoing-icon svg {
+        width: 26px;
+        height: 26px;
+        fill: none;
+        stroke: #ffffff;
+        stroke-width: 2;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+      .axis-z-outgoing-title {
+        font-size: 18px;
+        font-weight: 600;
+        color: #18181b;
+        letter-spacing: -0.02em;
+      }
+      .axis-z-outgoing-subtitle {
+        font-size: 13px;
+        font-weight: 400;
+        color: #71717a;
+      }
+      .axis-z-outgoing-row {
+        display: flex;
+        gap: 8px;
+        margin-top: 4px;
+      }
+      .axis-z-chip {
+        padding: 5px 12px;
+        border-radius: 999px;
+        background: #f4f4f5;
+        border: 1px solid #e4e4e7;
+        font-size: 12px;
+        font-weight: 500;
+        color: #52525b;
+      }
+      /* Incoming panel (the component output — zooms in from small) */
+      .axis-z-incoming {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        flex-direction: column;
+        padding: 40px;
+        gap: 24px;
+        background: #ffffff;
+        will-change: transform, opacity;
+      }
+      .axis-z-incoming-header {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+      }
+      .axis-z-incoming-eyebrow {
+        font-size: 11px;
+        font-weight: 600;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+        color: #71717a;
+      }
+      /* GSAP animates .hf-remocn-shared-axis-z span — must keep class + span structure */
+      .hf-remocn-shared-axis-z {
+        display: inline-flex;
+        gap: 10px;
+        font-size: 36px;
+        font-weight: 800;
+        letter-spacing: -0.04em;
+        line-height: 1;
+        color: #18181b;
+      }
+      .hf-remocn-shared-axis-z span {
+        display: inline-block;
+        transform: translate(var(--hf-word-x, 0px), var(--hf-word-y, 0px))
+          scale(var(--hf-word-scale, 1));
+        filter: blur(var(--hf-word-blur, 0px));
+        will-change: transform, filter, opacity;
+      }
+      .axis-z-incoming-meta {
+        font-size: 13px;
+        color: #71717a;
+        font-weight: 400;
+        line-height: 1.5;
+        max-width: 400px;
+      }
+      .axis-z-incoming-stats {
+        display: flex;
+        gap: 16px;
+        margin-top: auto;
+      }
+      .axis-z-stat {
+        display: flex;
+        flex-direction: column;
+        gap: 3px;
+        padding: 16px 20px;
+        background: #fafafa;
+        border: 1px solid #e4e4e7;
+        border-radius: 10px;
+        flex: 1;
+      }
+      .axis-z-stat-value {
+        font-size: 22px;
+        font-weight: 700;
+        color: #18181b;
+        letter-spacing: -0.03em;
+      }
+      .axis-z-stat-label {
+        font-size: 11px;
+        font-weight: 500;
+        color: #71717a;
+        text-transform: uppercase;
+        letter-spacing: 0.06em;
+      }
+      .axis-z-divider {
+        width: 100%;
+        height: 1px;
+        background: #e4e4e7;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="shared-axis-z-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="axis-z-stage">
+          <!-- Outgoing view: zooms out + fades as incoming arrives -->
+          <div class="axis-z-outgoing">
+            <div class="axis-z-outgoing-icon">
+              <svg viewBox="0 0 24 24">
+                <rect x="3" y="3" width="7" height="7" rx="1" />
+                <rect x="14" y="3" width="7" height="7" rx="1" />
+                <rect x="3" y="14" width="7" height="7" rx="1" />
+                <rect x="14" y="14" width="7" height="7" rx="1" />
+              </svg>
+            </div>
+            <div class="axis-z-outgoing-title">Overview</div>
+            <div class="axis-z-outgoing-subtitle">Select a context to zoom in</div>
+            <div class="axis-z-outgoing-row">
+              <div class="axis-z-chip">Analytics</div>
+              <div class="axis-z-chip">Reports</div>
+              <div class="axis-z-chip">Settings</div>
+            </div>
+          </div>
+
+          <!-- Incoming view: zooms in from center (shared-axis-Z) -->
+          <div class="axis-z-incoming">
+            <div class="axis-z-incoming-header">
+              <div class="axis-z-incoming-eyebrow">Analytics</div>
+              <div class="hf-remocn-shared-axis-z"><span>Zoom</span><span>context</span></div>
+              <div class="axis-z-incoming-meta">
+                Drill into any metric with a shared-axis Z transition — the new view scales in from
+                the tap point.
+              </div>
+            </div>
+            <div class="axis-z-divider"></div>
+            <div class="axis-z-incoming-stats">
+              <div class="axis-z-stat">
+                <div class="axis-z-stat-value">24.8k</div>
+                <div class="axis-z-stat-label">Sessions</div>
+              </div>
+              <div class="axis-z-stat">
+                <div class="axis-z-stat-value">3.4s</div>
+                <div class="axis-z-stat-label">Avg. time</div>
+              </div>
+              <div class="axis-z-stat">
+                <div class="axis-z-stat-value">91%</div>
+                <div class="axis-z-stat-label">Retention</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+
+        // Outgoing panel: zoom out + fade (shared-axis Z departure)
+        tl.fromTo(
+          ".axis-z-outgoing",
+          { opacity: 1, scale: 1 },
+          { opacity: 0, scale: 1.18, duration: 0.4, ease: "power2.in" },
+          startTime,
+        );
+
+        // Incoming panel: zoom in from small + fade (shared-axis Z arrival)
+        tl.fromTo(
+          ".axis-z-incoming",
+          { opacity: 0, scale: 0.82 },
+          { opacity: 1, scale: 1, duration: 0.45, ease: "expo.out" },
+          startTime + 0.05,
+        );
+
+        // Word-by-word reveal on the title
+        tl.fromTo(
+          ".hf-remocn-shared-axis-z span",
+          { opacity: 0, "--hf-word-scale": 0.72 },
+          {
+            opacity: 1,
+            "--hf-word-scale": 1,
+            duration: 0.34,
+            stagger: 0.06,
+            ease: "back.out(1.8)",
+          },
+          startTime + 0.28,
+        );
+
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["shared-axis-z-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/shared-axis-z/registry-item.json b/registry/components/shared-axis-z/registry-item.json
new file mode 100644
index 0000000000..a66e4da22a
--- /dev/null
+++ b/registry/components/shared-axis-z/registry-item.json
@@ -0,0 +1,82 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "shared-axis-z",
+  "type": "hyperframes:component",
+  "title": "Shared Axis Z",
+  "description": "Scale-based shared-axis transition for focus shifts and context depth.",
+  "tags": ["motion-primitive", "remocn-port", "typography"],
+  "files": [
+    {
+      "path": "shared-axis-z.html",
+      "target": "compositions/components/shared-axis-z.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "direction",
+      "type": "enum",
+      "role": "motion",
+      "label": "Direction",
+      "description": "Which way the words travel along the z axis: in swells up from small, out settles down from large.",
+      "default": "in",
+      "options": [
+        {
+          "value": "in",
+          "label": "In"
+        },
+        {
+          "value": "out",
+          "label": "Out"
+        }
+      ]
+    },
+    {
+      "id": "depth",
+      "type": "enum",
+      "role": "motion",
+      "label": "Depth",
+      "description": "Scales how far the words start from their final size, so the push covers a shorter or longer run in the same time.",
+      "default": "standard",
+      "options": [
+        {
+          "value": "shallow",
+          "label": "Shallow"
+        },
+        {
+          "value": "standard",
+          "label": "Standard"
+        },
+        {
+          "value": "deep",
+          "label": "Deep"
+        }
+      ]
+    },
+    {
+      "id": "tone",
+      "type": "enum",
+      "role": "style",
+      "label": "Tone",
+      "description": "Word colour: ink for light frames, paper for dark ones, accent rides --brand.",
+      "default": "ink",
+      "options": [
+        {
+          "value": "ink",
+          "label": "Ink"
+        },
+        {
+          "value": "paper",
+          "label": "Paper"
+        },
+        {
+          "value": "accent",
+          "label": "Accent"
+        }
+      ]
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/shared-axis-z.png"
+  }
+}
diff --git a/registry/components/shared-axis-z/shared-axis-z.html b/registry/components/shared-axis-z/shared-axis-z.html
new file mode 100644
index 0000000000..127c1094ab
--- /dev/null
+++ b/registry/components/shared-axis-z/shared-axis-z.html
@@ -0,0 +1,97 @@
+<!--
+  Shared Axis Z - remocn typography primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Drive the timeline
+  integration from a paused GSAP timeline so renders remain deterministic.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result as a custom property
+  the CSS above consumes. The timeline recipe below is untouched by them: it
+  keeps driving one scale from 0.72 to 1, and these decide how far from the
+  final size that start really sits. At rest the scale is 1, so every setting
+  lands on the same final frame.
+
+    - direction (in | out, default in): which way the words travel along the
+      z axis. in swells up from a smaller start, out settles down from a
+      larger one.
+    - depth (shallow | standard | deep, default standard): scales the gap
+      between the start size and the final size. shallow covers half the run,
+      deep nearly double, in the same time.
+    - tone (ink | paper | accent, default ink): word colour. ink is near-black
+      for light frames, paper near-white for dark ones, accent rides --brand.
+
+  On every default the result is identical to the original: words swell from
+  0.72 to full size in near-black.
+-->
+
+<div
+  class="hf-remocn-shared-axis-z"
+  data-composition-variables='[
+    { "id": "direction", "type": "enum", "role": "motion", "label": "Direction", "description": "Which way the words travel along the z axis: in swells up from small, out settles down from large.", "default": "in", "options": [{ "value": "in", "label": "In" }, { "value": "out", "label": "Out" }] },
+    { "id": "depth", "type": "enum", "role": "motion", "label": "Depth", "description": "Scales how far the words start from their final size, so the push covers a shorter or longer run in the same time.", "default": "standard", "options": [{ "value": "shallow", "label": "Shallow" }, { "value": "standard", "label": "Standard" }, { "value": "deep", "label": "Deep" }] },
+    { "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Word colour: ink for light frames, paper for dark ones, accent rides --brand.", "default": "ink", "options": [{ "value": "ink", "label": "Ink" }, { "value": "paper", "label": "Paper" }, { "value": "accent", "label": "Accent" }] }
+  ]'
+>
+  <span>Zoom</span><span>context</span>
+</div>
+
+<style>
+  .hf-remocn-shared-axis-z {
+    color: var(--hf-word-color, #18181b);
+    font-family: Inter, system-ui, sans-serif;
+    font-weight: 900;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-shared-axis-z {
+    display: inline-flex;
+    gap: 12px;
+    font-size: 56px;
+    line-height: 1;
+  }
+  .hf-remocn-shared-axis-z span {
+    display: inline-block;
+    transform: translate(var(--hf-word-x, 0px), var(--hf-word-y, 0px))
+      scale(calc(1 + (var(--hf-word-scale, 1) - 1) * var(--hf-word-depth, 1)));
+    filter: blur(var(--hf-word-blur, 0px));
+    will-change: transform, filter, opacity;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    var signs = { in: 1, out: -1 };
+    var reaches = { shallow: 0.5, standard: 1, deep: 1.85 };
+    var tones = {
+      ink: "#18181b",
+      paper: "#fafafa",
+      accent: "var(--brand, #34d399)",
+    };
+
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var sign = signs[pick(signs, vars.direction, "in")];
+    var reach = reaches[pick(reaches, vars.depth, "standard")];
+    var tone = tones[pick(tones, vars.tone, "ink")];
+
+    var roots = document.querySelectorAll(".hf-remocn-shared-axis-z");
+    for (var i = 0; i < roots.length; i += 1) {
+      roots[i].style.setProperty("--hf-word-depth", String(sign * reach));
+      roots[i].style.setProperty("--hf-word-color", tone);
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-shared-axis-z span', { opacity: 0, '--hf-word-scale': 0.72 }, { opacity: 1, '--hf-word-scale': 1, duration: 0.34, stagger: 0.06, ease: 'back.out(1.8)' }, startTime);
+-->
diff --git a/registry/components/signup-flow/demo.html b/registry/components/signup-flow/demo.html
new file mode 100644
index 0000000000..f10b35f85f
--- /dev/null
+++ b/registry/components/signup-flow/demo.html
@@ -0,0 +1,138 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Signup Flow - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #fafafa;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        min-width: 760px;
+        min-height: 520px;
+        padding: 56px;
+        /* ponytail: scale-up wrapper (not a GSAP target); card was ~20% of frame */
+        transform: scale(2.2);
+      }
+      .hf-ui-signup-flow {
+        display: grid;
+        gap: 14px;
+        width: 430px;
+        padding: 30px;
+        border: 1px solid #e4e4e7;
+        border-radius: 28px;
+        background: #ffffff;
+        color: #18181b;
+        font-family: Inter, system-ui, sans-serif;
+        box-shadow: 0 28px 84px rgba(0, 0, 0, 0.12);
+      }
+      .hf-ui-signup-flow h3 {
+        margin: 0 0 6px;
+        text-align: center;
+        font-size: 28px;
+      }
+      .hf-ui-signup-flow button,
+      .hf-ui-signup-field {
+        height: 50px;
+        border-radius: 14px;
+        font-size: 15px;
+        font-weight: 600;
+      }
+      .hf-ui-signup-social,
+      .hf-ui-signup-field {
+        border: 1px solid #e4e4e7;
+        background: #ffffff;
+        color: #18181b;
+      }
+      .hf-ui-signup-field {
+        display: flex;
+        align-items: center;
+        padding: 0 15px;
+      }
+      .hf-ui-signup-field.muted {
+        color: #a1a1aa;
+      }
+      .hf-ui-signup-divider {
+        display: grid;
+        grid-template-columns: 1fr auto 1fr;
+        gap: 10px;
+        align-items: center;
+        color: #a1a1aa;
+        font-size: 13px;
+        font-weight: 500;
+      }
+      .hf-ui-signup-divider span {
+        height: 1px;
+        background: #e4e4e7;
+      }
+      .hf-ui-signup-submit {
+        border: 0;
+        background: #18181b;
+        color: #ffffff;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="signup-flow-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-ui-signup-flow">
+          <h3>Create account</h3>
+          <button class="hf-ui-signup-social" type="button">Continue with Google</button>
+          <div class="hf-ui-signup-divider"><span></span><em>or</em><span></span></div>
+          <div class="hf-ui-signup-field">email@company.com</div>
+          <div class="hf-ui-signup-field muted">Password</div>
+          <button class="hf-ui-signup-submit" type="button">Start building</button>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        tl.fromTo(
+          ".hf-ui-signup-flow",
+          { opacity: 0, y: 26 },
+          { opacity: 1, y: 0, duration: 0.36, ease: "power2.out" },
+          0.25,
+        );
+        tl.fromTo(
+          ".hf-ui-signup-flow > *",
+          { y: 14, opacity: 0 },
+          { y: 0, opacity: 1, duration: 0.24, stagger: 0.05, ease: "power2.out" },
+          0.48,
+        );
+        tl.to(
+          ".hf-ui-signup-submit",
+          { scale: 0.97, duration: 0.12, yoyo: true, repeat: 1, ease: "power1.inOut" },
+          1.2,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["signup-flow-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/signup-flow/registry-item.json b/registry/components/signup-flow/registry-item.json
new file mode 100644
index 0000000000..c8a9dfabf3
--- /dev/null
+++ b/registry/components/signup-flow/registry-item.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "signup-flow",
+  "type": "hyperframes:component",
+  "title": "Signup Flow",
+  "description": "A composed signup flow with social action, email field, password field, and submit button",
+  "tags": ["ui-flow", "remocn-port", "signup", "form"],
+  "files": [
+    {
+      "path": "signup-flow.html",
+      "target": "compositions/components/signup-flow.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/signup-flow.png"
+  }
+}
diff --git a/registry/components/signup-flow/signup-flow.html b/registry/components/signup-flow/signup-flow.html
new file mode 100644
index 0000000000..e9246999de
--- /dev/null
+++ b/registry/components/signup-flow/signup-flow.html
@@ -0,0 +1,80 @@
+<!--
+  Signup Flow - Remocn-inspired composed UI flow for HyperFrames.
+
+  Paste the markup and CSS into a composition. Use the timeline integration
+  note at the bottom as the starting point for deterministic GSAP animation.
+-->
+
+<div class="hf-ui-signup-flow">
+  <h3>Create account</h3>
+  <button class="hf-ui-signup-social" type="button">Continue with Google</button>
+  <div class="hf-ui-signup-divider"><span></span><em>or</em><span></span></div>
+  <div class="hf-ui-signup-field">email@company.com</div>
+  <div class="hf-ui-signup-field muted">Password</div>
+  <button class="hf-ui-signup-submit" type="button">Start building</button>
+</div>
+
+<style>
+  .hf-ui-signup-flow {
+    display: grid;
+    gap: 14px;
+    width: 430px;
+    padding: 30px;
+    border: 1px solid #e4e4e7;
+    border-radius: 28px;
+    background: #ffffff;
+    color: #18181b;
+    font-family: Inter, system-ui, sans-serif;
+    box-shadow: 0 28px 84px rgba(0, 0, 0, 0.12);
+  }
+  .hf-ui-signup-flow h3 {
+    margin: 0 0 6px;
+    text-align: center;
+    font-size: 28px;
+  }
+  .hf-ui-signup-flow button,
+  .hf-ui-signup-field {
+    height: 50px;
+    border-radius: 14px;
+    font-weight: 850;
+  }
+  .hf-ui-signup-social,
+  .hf-ui-signup-field {
+    border: 1px solid #e4e4e7;
+    background: #ffffff;
+    color: #18181b;
+  }
+  .hf-ui-signup-field {
+    display: flex;
+    align-items: center;
+    padding: 0 15px;
+  }
+  .hf-ui-signup-field.muted {
+    color: #a1a1aa;
+  }
+  .hf-ui-signup-divider {
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    gap: 10px;
+    align-items: center;
+    color: #a1a1aa;
+    font-size: 12px;
+    font-weight: 900;
+  }
+  .hf-ui-signup-divider span {
+    height: 1px;
+    background: #e4e4e7;
+  }
+  .hf-ui-signup-submit {
+    border: 0;
+    background: #18181b;
+    color: #ffffff;
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-ui-signup-flow', { opacity: 0, y: 26 }, { opacity: 1, y: 0, duration: 0.36, ease: 'power2.out' }, 0.25);
+  tl.fromTo('.hf-ui-signup-flow > *', { y: 14, opacity: 0 }, { y: 0, opacity: 1, duration: 0.24, stagger: 0.05, ease: 'power2.out' }, 0.48);
+  tl.to('.hf-ui-signup-submit', { scale: 0.97, duration: 0.12, yoyo: true, repeat: 1, ease: 'power1.inOut' }, 1.2);
+-->
diff --git a/registry/components/simulated-cursor/demo.html b/registry/components/simulated-cursor/demo.html
new file mode 100644
index 0000000000..136b3da18e
--- /dev/null
+++ b/registry/components/simulated-cursor/demo.html
@@ -0,0 +1,137 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Simulated Cursor - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        background: #ecf1f3;
+        font-family: Inter, system-ui, sans-serif;
+        display: grid;
+        place-items: center;
+        color: #152026;
+      }
+      .demo-frame {
+        /* ponytail: zoom on wrapper so GSAP can freely animate .card transform */
+        zoom: 1.5;
+      }
+      .card {
+        width: 880px;
+        padding: 72px;
+        background: white;
+        border: 1px solid #dce4e8;
+        border-radius: 16px;
+        box-shadow: 0 24px 70px rgba(37, 55, 66, 0.1);
+      }
+      .title {
+        font-size: 64px;
+        font-weight: 850;
+        letter-spacing: -0.03em;
+      }
+      .button {
+        margin-top: 48px;
+        display: inline-flex;
+        padding: 22px 36px;
+        background: #141a20;
+        color: white;
+        font-size: 28px;
+        font-weight: 760;
+        border-radius: 10px;
+      }
+      .hf-simulated-cursor {
+        --hf-cursor-x: 420px;
+        --hf-cursor-y: 360px;
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 44px;
+        height: 44px;
+        transform: translate3d(var(--hf-cursor-x), var(--hf-cursor-y), 0);
+        pointer-events: none;
+        z-index: 999;
+        filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.24));
+      }
+      .hf-simulated-cursor-pulse {
+        position: absolute;
+        left: 9px;
+        top: 9px;
+        width: 22px;
+        height: 22px;
+        border: 2px solid rgba(20, 26, 32, 0.75);
+        border-radius: 999px;
+        opacity: 0;
+        transform: scale(0.2);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="simulated-cursor-demo"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="card">
+          <div class="title">Point at the action without screen recording.</div>
+          <div class="button">Generate video</div>
+        </div>
+      </div>
+      <div class="hf-simulated-cursor" aria-hidden="true">
+        <div class="hf-simulated-cursor-pulse"></div>
+        <svg
+          viewBox="0 0 24 24"
+          width="34"
+          height="34"
+          style="filter: drop-shadow(0 4px 7px rgba(0, 0, 0, 0.3))"
+        >
+          <path
+            d="M5.5 3.2 L5.5 19.6 L9.7 15.7 L12.5 21.9 L15.0 20.7 L12.3 14.6 L17.9 14.2 Z"
+            fill="#18181b"
+            stroke="#ffffff"
+            stroke-width="1.5"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        tl.from(".card", { opacity: 0, y: 30, duration: 0.6, ease: "power3.out" }, 0.2);
+        tl.to(
+          ".hf-simulated-cursor",
+          {
+            "--hf-cursor-x": "1030px",
+            "--hf-cursor-y": "620px",
+            duration: 1,
+            ease: "power2.inOut",
+          },
+          1.0,
+        );
+        tl.fromTo(
+          ".hf-simulated-cursor-pulse",
+          { opacity: 0.8, scale: 0.2 },
+          { opacity: 0, scale: 2.4, duration: 0.45, ease: "power2.out" },
+          2.02,
+        );
+        window.__timelines = window.__timelines || {};
+        window.__timelines["simulated-cursor-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/simulated-cursor/registry-item.json b/registry/components/simulated-cursor/registry-item.json
new file mode 100644
index 0000000000..1ff68b70fd
--- /dev/null
+++ b/registry/components/simulated-cursor/registry-item.json
@@ -0,0 +1,80 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "simulated-cursor",
+  "type": "hyperframes:component",
+  "title": "Simulated Cursor",
+  "description": "A lightweight cursor pointer and click pulse for product walkthroughs and agent UI demos",
+  "tags": ["video-primitive", "motion-primitive", "cursor", "ui", "walkthrough"],
+  "files": [
+    {
+      "path": "simulated-cursor.html",
+      "target": "compositions/components/simulated-cursor.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "size",
+      "type": "number",
+      "role": "layout",
+      "label": "Size",
+      "description": "Height and width of the pointer in pixels. The click ring scales with it. Values outside the range clamp to the nearest end and anything that is not a number falls back to 44.",
+      "default": 44,
+      "min": 20,
+      "max": 120,
+      "step": 2,
+      "unit": "px"
+    },
+    {
+      "id": "tone",
+      "type": "enum",
+      "role": "style",
+      "label": "Tone",
+      "description": "Pointer fill and click ring colour: light reads on dark screens, dark reads on light ones, accent rides --hf-ui-accent.",
+      "default": "light",
+      "options": [
+        {
+          "value": "light",
+          "label": "Light"
+        },
+        {
+          "value": "dark",
+          "label": "Dark"
+        },
+        {
+          "value": "accent",
+          "label": "Accent"
+        }
+      ]
+    },
+    {
+      "id": "pulse",
+      "type": "enum",
+      "role": "style",
+      "label": "Click ring",
+      "description": "Weight of the ring the click animation expands: subtle is a thin small ring, bold a thick wide one, none removes the ring entirely.",
+      "default": "standard",
+      "options": [
+        {
+          "value": "subtle",
+          "label": "Subtle"
+        },
+        {
+          "value": "standard",
+          "label": "Standard"
+        },
+        {
+          "value": "bold",
+          "label": "Bold"
+        },
+        {
+          "value": "none",
+          "label": "None"
+        }
+      ]
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/simulated-cursor.png"
+  }
+}
diff --git a/registry/components/simulated-cursor/simulated-cursor.html b/registry/components/simulated-cursor/simulated-cursor.html
new file mode 100644
index 0000000000..c1c74ac877
--- /dev/null
+++ b/registry/components/simulated-cursor/simulated-cursor.html
@@ -0,0 +1,141 @@
+<!--
+  Simulated Cursor - pointer and click pulse primitive.
+
+  Paste the markup, CSS and script once, then animate .hf-simulated-cursor
+  with x/y values in your paused GSAP timeline. Trigger the click pulse by
+  scaling/fading .hf-simulated-cursor-pulse.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or invalid, and writes the result as a custom property the
+  CSS above consumes. The timeline recipe below is untouched by them: it keeps
+  driving the pointer position and the ring scale and fade.
+
+    - size (number 20 to 120, step 2, unit px, default 44): height and width of
+      the pointer. The click ring, its offset and its border scale with it, so
+      the tip stays anchored at the animated x/y. Values below 20 clamp to 20,
+      values above 120 clamp to 120, and anything that is not a number falls
+      back to 44.
+    - tone (light | dark | accent, default light): pointer fill, outline and
+      ring colour. light is the white pointer with a dark outline for dark
+      screens, dark flips both for light screens, accent rides --hf-ui-accent.
+    - pulse (subtle | standard | bold | none, default standard): weight of the
+      click ring. subtle is thin and small, bold thick and wide, none removes
+      the ring entirely. The ring stays centred on the same point in every
+      case, and it is only on screen while the click animation runs.
+
+  On every default the result is identical to the original: a 44px white
+  pointer with a 22px, 2px white ring offset 9px from the tip.
+-->
+
+<div
+  class="hf-simulated-cursor"
+  aria-hidden="true"
+  data-composition-variables='[
+    {"id": "size", "type": "number", "role": "layout", "label": "Size", "description": "Height and width of the pointer in pixels. The click ring scales with it. Values outside the range clamp to the nearest end and anything that is not a number falls back to 44.", "default": 44, "min": 20, "max": 120, "step": 2, "unit": "px"},
+    {"id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Pointer fill and click ring colour: light reads on dark screens, dark reads on light ones, accent rides --hf-ui-accent.", "default": "light", "options": [{"value": "light", "label": "Light"}, {"value": "dark", "label": "Dark"}, {"value": "accent", "label": "Accent"}]},
+    {"id": "pulse", "type": "enum", "role": "style", "label": "Click ring", "description": "Weight of the ring the click animation expands: subtle is a thin small ring, bold a thick wide one, none removes the ring entirely.", "default": "standard", "options": [{"value": "subtle", "label": "Subtle"}, {"value": "standard", "label": "Standard"}, {"value": "bold", "label": "Bold"}, {"value": "none", "label": "None"}]}
+  ]'
+>
+  <div class="hf-simulated-cursor-pulse"></div>
+  <svg viewBox="0 0 24 24" width="44" height="44">
+    <path
+      d="M3 2.8 20.6 14 12.8 15.5 9 22 3 2.8Z"
+      fill="white"
+      stroke="rgba(0,0,0,0.45)"
+      stroke-width="1.4"
+    />
+  </svg>
+</div>
+
+<style>
+  .hf-simulated-cursor {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: calc(44px * var(--hf-cursor-scale, 1));
+    height: calc(44px * var(--hf-cursor-scale, 1));
+    transform: translate3d(var(--hf-cursor-x, 0px), var(--hf-cursor-y, 0px), 0);
+    pointer-events: none;
+    z-index: 999;
+    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.24));
+  }
+  .hf-simulated-cursor svg {
+    width: 100%;
+    height: 100%;
+  }
+  .hf-simulated-cursor svg path {
+    fill: var(--hf-cursor-fill, #ffffff);
+    stroke: var(--hf-cursor-edge, rgba(0, 0, 0, 0.45));
+  }
+  .hf-simulated-cursor-pulse {
+    display: var(--hf-cursor-ring-display, block);
+    position: absolute;
+    left: calc((20px - var(--hf-cursor-ring-size, 22px) / 2) * var(--hf-cursor-scale, 1));
+    top: calc((20px - var(--hf-cursor-ring-size, 22px) / 2) * var(--hf-cursor-scale, 1));
+    width: calc(var(--hf-cursor-ring-size, 22px) * var(--hf-cursor-scale, 1));
+    height: calc(var(--hf-cursor-ring-size, 22px) * var(--hf-cursor-scale, 1));
+    border: calc(var(--hf-cursor-ring-width, 2px) * var(--hf-cursor-scale, 1)) solid
+      var(--hf-cursor-ring, rgba(255, 255, 255, 0.85));
+    border-radius: 999px;
+    opacity: 0;
+    transform: scale(0.2);
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised or out-of-range overrides return to their declared defaults.
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var tones = {
+      light: { fill: "#ffffff", edge: "rgba(0, 0, 0, 0.45)", ring: "rgba(255, 255, 255, 0.85)" },
+      dark: { fill: "#18181b", edge: "rgba(255, 255, 255, 0.75)", ring: "rgba(24, 24, 27, 0.75)" },
+      accent: {
+        fill: "var(--hf-ui-accent, #3ce6ac)",
+        edge: "rgba(0, 0, 0, 0.45)",
+        ring: "var(--hf-ui-accent, #3ce6ac)",
+      },
+    };
+    var pulses = {
+      subtle: { size: "18px", width: "1px", display: "block" },
+      standard: { size: "22px", width: "2px", display: "block" },
+      bold: { size: "28px", width: "3px", display: "block" },
+      none: { size: "22px", width: "2px", display: "none" },
+    };
+
+    var size = typeof vars.size === "number" ? vars.size : parseFloat(vars.size);
+    if (!isFinite(size)) size = 44;
+    size = Math.min(120, Math.max(20, size));
+
+    var tone = tones[pick(tones, vars.tone, "light")];
+    var pulse = pulses[pick(pulses, vars.pulse, "standard")];
+
+    var roots = document.querySelectorAll(".hf-simulated-cursor");
+    for (var i = 0; i < roots.length; i += 1) {
+      var root = roots[i];
+      root.style.setProperty("--hf-cursor-scale", String(size / 44));
+      root.style.setProperty("--hf-cursor-fill", tone.fill);
+      root.style.setProperty("--hf-cursor-edge", tone.edge);
+      root.style.setProperty("--hf-cursor-ring", tone.ring);
+      root.style.setProperty("--hf-cursor-ring-size", pulse.size);
+      root.style.setProperty("--hf-cursor-ring-width", pulse.width);
+      root.style.setProperty("--hf-cursor-ring-display", pulse.display);
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+
+  tl.to(".hf-simulated-cursor", { "--hf-cursor-x": "760px", "--hf-cursor-y": "420px", duration: 0.8, ease: "power2.inOut" }, startTime);
+  tl.fromTo(".hf-simulated-cursor-pulse", { opacity: 0.8, scale: 0.2 }, { opacity: 0, scale: 2.4, duration: 0.45, ease: "power2.out" }, startTime + 0.8);
+-->
diff --git a/registry/components/skeleton-reveal/demo.html b/registry/components/skeleton-reveal/demo.html
new file mode 100644
index 0000000000..d752c07456
--- /dev/null
+++ b/registry/components/skeleton-reveal/demo.html
@@ -0,0 +1,115 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Skeleton Reveal - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        min-width: 760px;
+        min-height: 480px;
+        padding: 56px;
+        /* ponytail: scale wrapper (not a GSAP target) to fill ~60% of frame */
+        transform: scale(1.51);
+      }
+      .hf-transition-skeleton-reveal {
+        position: relative;
+        width: 400px;
+        height: 96px;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-transition-skeleton-reveal .skeleton,
+      .hf-transition-skeleton-reveal .content {
+        position: absolute;
+        inset: 0;
+        border: 1px solid #e4e4e7;
+        border-radius: 14px;
+        background: #fff;
+        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.08);
+      }
+      .hf-transition-skeleton-reveal .skeleton {
+        background: linear-gradient(90deg, #f4f4f5, #e4e4e7, #f4f4f5);
+        background-size: 240% 100%;
+        opacity: 1;
+        box-shadow: none;
+      }
+      .hf-transition-skeleton-reveal .content {
+        display: grid;
+        align-content: center;
+        gap: 6px;
+        padding: 20px 22px;
+        opacity: 0;
+        color: #18181b;
+      }
+      .hf-transition-skeleton-reveal strong {
+        font-size: 18px;
+        font-weight: 600;
+        letter-spacing: -0.01em;
+      }
+      .hf-transition-skeleton-reveal span {
+        color: #71717a;
+        font-size: 15px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="skeleton-reveal-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-transition-skeleton-reveal">
+          <div class="skeleton"></div>
+          <div class="content"><strong>Jane Cooper</strong><span>jane@example.com</span></div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.to(
+          ".hf-transition-skeleton-reveal .skeleton",
+          { backgroundPosition: "100% 0", duration: 0.7, ease: "none" },
+          startTime,
+        );
+        tl.to(
+          ".hf-transition-skeleton-reveal .skeleton",
+          { opacity: 0, duration: 0.22 },
+          startTime + 0.72,
+        );
+        tl.to(
+          ".hf-transition-skeleton-reveal .content",
+          { opacity: 1, duration: 0.24 },
+          startTime + 0.78,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["skeleton-reveal-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/skeleton-reveal/registry-item.json b/registry/components/skeleton-reveal/registry-item.json
new file mode 100644
index 0000000000..dc9ee17747
--- /dev/null
+++ b/registry/components/skeleton-reveal/registry-item.json
@@ -0,0 +1,54 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "skeleton-reveal",
+  "type": "hyperframes:component",
+  "title": "Skeleton Reveal",
+  "description": "A skeleton loader transition that pulses, then cross-fades into content",
+  "tags": ["video-primitive", "transition-primitive", "transitions-dev-port", "skeleton", "reveal"],
+  "files": [
+    {
+      "path": "skeleton-reveal.html",
+      "target": "compositions/components/skeleton-reveal.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "name",
+      "type": "string",
+      "role": "content",
+      "label": "Name",
+      "description": "Primary line revealed once the skeleton fades out.",
+      "default": "Jane Cooper"
+    },
+    {
+      "id": "detail",
+      "type": "string",
+      "role": "content",
+      "label": "Detail",
+      "description": "Secondary line under the name, such as an email or a role.",
+      "default": "jane@example.com"
+    },
+    {
+      "id": "tone",
+      "type": "enum",
+      "role": "style",
+      "label": "Tone",
+      "description": "Card palette. Light is the paper card, dark is a near-black card with the matching skeleton bars and text.",
+      "default": "light",
+      "options": [
+        {
+          "value": "light",
+          "label": "Light"
+        },
+        {
+          "value": "dark",
+          "label": "Dark"
+        }
+      ]
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/skeleton-reveal.png"
+  }
+}
diff --git a/registry/components/skeleton-reveal/skeleton-reveal.html b/registry/components/skeleton-reveal/skeleton-reveal.html
new file mode 100644
index 0000000000..6429f64265
--- /dev/null
+++ b/registry/components/skeleton-reveal/skeleton-reveal.html
@@ -0,0 +1,130 @@
+<!--
+  Skeleton Reveal - transitions.dev-inspired primitive for HyperFrames.
+
+  Paste the markup and CSS into a composition. Use the timeline integration
+  note at the bottom as the starting point for deterministic GSAP animation.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or invalid, and writes the result as a custom property the
+  CSS below consumes, or straight onto the revealed text. The timeline recipe
+  stays untouched: it keeps sweeping the skeleton and cross-fading to the
+  content, and these decide what that content says and what both halves look
+  like.
+
+    - name (string, default Jane Cooper): the primary line revealed once the
+      skeleton fades out. Blank falls back to the default.
+    - detail (string, default jane@example.com): the secondary line under the
+      name, such as an email or a role. Blank falls back to the default.
+    - tone (light | dark, default light): card palette. Light is the paper card
+      with grey bars, dark is a near-black card with the matching skeleton bars
+      and text, for compositions on a dark stage.
+
+  On every default the result is identical to the original: a white card that
+  shimmers, then reveals Jane Cooper and jane@example.com.
+-->
+
+<div
+  class="hf-transition-skeleton-reveal"
+  data-composition-variables='[
+    { "id": "name", "type": "string", "role": "content", "label": "Name", "description": "Primary line revealed once the skeleton fades out.", "default": "Jane Cooper" },
+    { "id": "detail", "type": "string", "role": "content", "label": "Detail", "description": "Secondary line under the name, such as an email or a role.", "default": "jane@example.com" },
+    { "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Card palette. Light is the paper card, dark is a near-black card with the matching skeleton bars and text.", "default": "light", "options": [{ "value": "light", "label": "Light" }, { "value": "dark", "label": "Dark" }] }
+  ]'
+>
+  <div class="skeleton"></div>
+  <div class="content"><strong>Jane Cooper</strong><span>jane@example.com</span></div>
+</div>
+
+<style>
+  .hf-transition-skeleton-reveal {
+    position: relative;
+    width: 340px;
+    height: 76px;
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-transition-skeleton-reveal .skeleton,
+  .hf-transition-skeleton-reveal .content {
+    position: absolute;
+    inset: 0;
+    border: 1px solid var(--hf-sr-border, #e4e4e7);
+    border-radius: 14px;
+    background: var(--hf-sr-surface, #fff);
+  }
+  .hf-transition-skeleton-reveal .skeleton {
+    background: linear-gradient(
+      90deg,
+      var(--hf-sr-bar, #f4f4f5),
+      var(--hf-sr-bar-strong, #e4e4e7),
+      var(--hf-sr-bar, #f4f4f5)
+    );
+    background-size: 240% 100%;
+    opacity: 1;
+  }
+  .hf-transition-skeleton-reveal .content {
+    display: grid;
+    align-content: center;
+    gap: 5px;
+    padding: 15px;
+    opacity: 0;
+    color: var(--hf-sr-ink, #18181b);
+  }
+  .hf-transition-skeleton-reveal span {
+    color: var(--hf-sr-muted, #71717a);
+    font-size: 14px;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    var tones = {
+      light: null,
+      dark: {
+        "--hf-sr-surface": "#18181b",
+        "--hf-sr-border": "#27272a",
+        "--hf-sr-bar": "#27272a",
+        "--hf-sr-bar-strong": "#3f3f46",
+        "--hf-sr-ink": "#fafafa",
+        "--hf-sr-muted": "#a1a1aa",
+      },
+    };
+    var defaultName = "Jane Cooper";
+    var defaultDetail = "jane@example.com";
+
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    function text(value, fallback) {
+      return typeof value === "string" && value.trim() ? value.trim() : fallback;
+    }
+
+    var tone = tones[pick(tones, vars.tone, "light")];
+    var name = text(vars.name, defaultName);
+    var detail = text(vars.detail, defaultDetail);
+
+    var roots = document.querySelectorAll(".hf-transition-skeleton-reveal");
+    for (var i = 0; i < roots.length; i += 1) {
+      var root = roots[i];
+      if (tone) {
+        for (var key in tone) root.style.setProperty(key, tone[key]);
+      }
+      var strong = root.querySelector(".content strong");
+      var span = root.querySelector(".content span");
+      if (strong) strong.textContent = name;
+      if (span) span.textContent = detail;
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.to('.hf-transition-skeleton-reveal .skeleton', { backgroundPosition: '100% 0', duration: 0.7, ease: 'none' }, startTime); tl.to('.hf-transition-skeleton-reveal .skeleton', { opacity: 0, duration: 0.22 }, startTime + 0.72); tl.to('.hf-transition-skeleton-reveal .content', { opacity: 1, duration: 0.24 }, startTime + 0.78);
+-->
diff --git a/registry/components/slit-scan-reveal/README.md b/registry/components/slit-scan-reveal/README.md
new file mode 100644
index 0000000000..0fb344c42d
--- /dev/null
+++ b/registry/components/slit-scan-reveal/README.md
@@ -0,0 +1,60 @@
+# slit-scan-reveal
+
+Time experiment primitive: the frame's rows sample the subject at offset
+times. An authored token mark (accent-ringed disc with an orbit dot)
+sweeps in on ONE pure position function pos(t); a canvas painter draws the
+frame as row (or column) slices, slice i showing the subject's state at
+t - offset(i). Arrival smears through time, near bands leading, far bands
+trailing; on the resolve cue the offsets collapse to zero with one eased
+0.6s pass and the mark holds coherent. 4s authored, elastic HOLD (never
+time-scaled).
+
+## Mounting
+
+```html
+<div
+  class="clip"
+  data-composition-id="slit-scan-reveal"
+  data-composition-src="./components/slit-scan-reveal.html"
+  data-variable-values='{"axis":"cols","spread":0.6,"accent":"violet"}'
+  data-start="0"
+  data-duration="4"
+  data-track-index="0"
+></div>
+```
+
+## Variables
+
+| id         | type   | default | notes                                                                                                     |
+| ---------- | ------ | ------- | --------------------------------------------------------------------------------------------------------- |
+| axis       | enum   | rows    | rows smears across horizontal slices, cols across vertical slices.                                        |
+| spread     | number | 0.45    | Maximum sampling offset in seconds across the frame (clamped 0.1 to 1.2).                                 |
+| resolve_at | number | 2.2     | Seconds when the offsets start collapsing. Clamped so the 0.6s collapse and any exit fit inside the clip. |
+| accent     | enum   | green   | green maps to --brand, blue to --accent, violet to --accent-2.                                            |
+| exit       | enum   | none    | none holds the resolved mark (frame roots own transitions); fade or up add a 0.45s departure.             |
+
+## Choreography
+
+- 0.25s: the subject starts its sweep from the wing (rows: in from the
+  left; cols: down from the top, so the slices always cut across the
+  travel): cubic-eased travel to dead center with a decaying two-cycle
+  sine bob (integer cycles, exactly zero at rest) and a settling scale.
+- Throughout the sweep the slices smear it through time: slice 0 shows
+  now, the far slice shows spread seconds ago, with a seeded hairline
+  jitter per slice so the edge stays organic.
+- resolve_at: the offsets collapse to zero over 0.6s (eased both ends);
+  the smear zips shut onto the resting subject.
+- HOLD: dead still and coherent, elastic with the clip duration.
+
+Sync point `resolved` fires as the collapse completes; align SFX to it.
+
+## Determinism
+
+pos(t) is closed-form, so any sampled time t - offset is exact; per-slice
+jitter is one table computed once at build from fixed LCG seed 0x51175c4e.
+One plain-object anchor tween feeds one painter that clears and redraws
+every slice from scratch as a pure function of the timeline time, so
+eventful seeks land identical frames in any order and either direction.
+The raster basis is the host box measured once at mount; sampled times
+before mount clamp to the subject's start state (not-yet-appeared), and
+after the collapse every slice samples the same resting state.
diff --git a/registry/components/slit-scan-reveal/demo.html b/registry/components/slit-scan-reveal/demo.html
new file mode 100644
index 0000000000..3902666585
--- /dev/null
+++ b/registry/components/slit-scan-reveal/demo.html
@@ -0,0 +1,85 @@
+<!doctype html>
+<!--
+  slit-scan-reveal demo. A full-bleed 1920x1080 LIGHT host mounts the
+  primitive through data-composition-src with non-default variables
+  (column axis, wider spread, earlier resolve, violet accent) while the
+  primitive stays elastic to its host.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Slit Scan Reveal Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #f5f6f8);
+      }
+
+      #root {
+        --bg: #f5f6f8;
+        --fg: #101318;
+        --muted: #5b6472;
+        --surface: #ffffff;
+        --border: #d7dce4;
+        --brand: #14a35e;
+        --accent: #2f6fed;
+        --accent-2: #7a5cd6;
+        --radius: 24px;
+        --font-display: "Inter", system-ui, sans-serif;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg);
+      }
+
+      .mount-stage {
+        position: absolute;
+        inset: 0;
+        container-type: size;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="slit-scan-reveal-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="slit-scan-reveal-mount"
+        class="mount-stage clip"
+        data-composition-id="slit-scan-reveal"
+        data-composition-src="./slit-scan-reveal.html"
+        data-variable-values='{"axis":"cols","spread":1.0,"resolve_at":2.0,"accent":"violet"}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="1920"
+        data-height="1080"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["slit-scan-reveal-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/slit-scan-reveal/registry-item.json b/registry/components/slit-scan-reveal/registry-item.json
new file mode 100644
index 0000000000..e8fdf367f2
--- /dev/null
+++ b/registry/components/slit-scan-reveal/registry-item.json
@@ -0,0 +1,76 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "slit-scan-reveal",
+  "type": "hyperframes:component",
+  "title": "Slit Scan Reveal",
+  "description": "The frame's rows sample an authored subject at offset times: a canvas painter draws row slices of one pure position function evaluated at t minus offset(row), smearing arrival through time until the offsets collapse to zero and the mark holds coherent.",
+  "tags": ["motion-primitive", "time", "slit-scan", "canvas", "deterministic", "experiment"],
+  "jobs": ["reveal"],
+  "family": "time",
+  "profile": "time-smear",
+  "evidence": "Wave M4 experiment slate; classic slit-scan sampling implemented as a closed-form position function drawn in per-slice clips, offsets collapsing at the resolve cue",
+  "syncPoints": [{ "id": "resolved", "phase": "in", "offset": 2.8 }],
+  "files": [
+    {
+      "path": "slit-scan-reveal.html",
+      "target": "compositions/components/slit-scan-reveal.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "axis",
+      "type": "enum",
+      "role": "style",
+      "label": "Axis",
+      "description": "rows smears arrival across horizontal slices; cols across vertical slices.",
+      "default": "rows",
+      "options": [
+        { "value": "rows", "label": "Rows" },
+        { "value": "cols", "label": "Columns" }
+      ]
+    },
+    {
+      "id": "spread",
+      "type": "number",
+      "role": "timing",
+      "label": "Spread",
+      "description": "Maximum sampling offset in seconds across the frame; larger smears further through time.",
+      "default": 0.45
+    },
+    {
+      "id": "resolve_at",
+      "type": "number",
+      "role": "timing",
+      "label": "Resolve at",
+      "description": "Seconds from mount start when the offsets start collapsing to zero. Clamped so the collapse and any exit stay inside the clip.",
+      "default": 2.2
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Subject ring and orbit color: green rides --brand, blue rides --accent, violet rides --accent-2.",
+      "default": "green",
+      "options": [
+        { "value": "green", "label": "Green" },
+        { "value": "blue", "label": "Blue" },
+        { "value": "violet", "label": "Violet" }
+      ]
+    },
+    {
+      "id": "exit",
+      "type": "enum",
+      "role": "timing",
+      "label": "Exit",
+      "description": "Optional departure. Default none: the resolved mark holds until the frame cuts.",
+      "default": "none",
+      "options": [
+        { "value": "none", "label": "None" },
+        { "value": "fade", "label": "Fade" },
+        { "value": "up", "label": "Up" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/slit-scan-reveal/slit-scan-reveal.html b/registry/components/slit-scan-reveal/slit-scan-reveal.html
new file mode 100644
index 0000000000..f23138ab47
--- /dev/null
+++ b/registry/components/slit-scan-reveal/slit-scan-reveal.html
@@ -0,0 +1,332 @@
+<!doctype html>
+<!--
+  slit-scan-reveal: HyperFrames video primitive (time)
+
+  The frame's rows sample the subject at offset times. The subject is an
+  authored token mark (an accent-ringed disc with an orbit dot) whose
+  motion is one pure position function pos(t): it sweeps in from the wing
+  on a decaying sine bob and rests dead-center. A canvas painter draws the
+  frame as row (or column) slices, slice i showing the subject's state at
+  t - offset(i): arrival smears through time, near bands leading, far
+  bands trailing. On the resolve cue the offsets collapse to zero with one
+  eased pass, the smear zips shut, and the subject holds coherent.
+
+  Variables (declared in data-composition-variables below):
+    - axis ("rows" | "cols"): horizontal row slices or vertical column
+      slices.
+    - spread (seconds): the maximum sampling offset across the frame.
+    - resolve_at (seconds): when the offsets start collapsing to zero
+      (0.6s eased collapse). Clamped so the collapse and any exit stay
+      inside the clip.
+    - accent ("green" | "blue" | "violet"): green rides --brand, blue
+      rides --accent, violet rides --accent-2.
+    - exit ("none" | "fade" | "up", default none): frame roots own
+      transitions; the default holds the resolved mark to the last pixel.
+
+  Envelope, fixed IN and OUT with elastic HOLD only (never timeScale):
+    the subject's travel and the collapse are authored against the cues;
+    HOLD = D - (resolve end) - OUT, truly still (after the collapse every
+    slice samples the same resting state, so repaints are identical).
+    OUT_BASE = 0.45s only when exit != none.
+
+  Determinism (canvas 2D law): per-slice offset jitter comes from one
+  table computed once during synchronous timeline construction from fixed
+  LCG seed 0x51175c4e. Every painted frame is a pure
+  function of (that table, the timeline's current time): the timeline's
+  onUpdate clears the canvas and, for every slice, clips to the slice band
+  and redraws the whole subject at its sampled time from scratch. pos(t)
+  is closed-form (cubic ease + integer sine cycles that end at zero), so
+  any sampled time is exact. No Math.random, no wall clock, no
+  incremental state: eventful seeks repaint identically in any order and
+  either direction.
+
+  Mount contract: the runtime clones only this template. #root fills the
+  host box (no data-width/data-height, container-type: size, cqmin units),
+  is styled via #root only, and registers one paused timeline under the
+  LITERAL "slit-scan-reveal" key. All DOM state is set with explicit
+  endpoints (gsap.set + fromTo) so any seek order lands identical frames.
+-->
+<html
+  lang="en"
+  data-composition-id="slit-scan-reveal"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "axis", "type": "enum", "role": "style", "label": "Axis", "description": "rows smears arrival across horizontal slices; cols across vertical slices.", "default": "rows", "options": [{ "value": "rows", "label": "Rows" }, { "value": "cols", "label": "Columns" }] },
+    { "id": "spread", "type": "number", "role": "timing", "label": "Spread", "description": "Maximum sampling offset in seconds across the frame; larger smears further through time.", "default": 0.45 },
+    { "id": "resolve_at", "type": "number", "role": "timing", "label": "Resolve at", "description": "Seconds from mount start when the offsets start collapsing to zero. Clamped so the collapse and any exit stay inside the clip.", "default": 2.2 },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Subject ring and orbit color: green rides --brand, blue rides --accent, violet rides --accent-2.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the resolved mark holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Slit Scan Reveal</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="slit-scan-reveal" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, "Inter", system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .ssr-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .ssr-stage {
+            position: absolute;
+            inset: 0;
+            will-change: transform, opacity;
+          }
+
+          .ssr-canvas {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+          }
+        </style>
+
+        <div
+          id="slit-scan-reveal-clip"
+          class="ssr-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="ssr-stage">
+            <canvas class="ssr-canvas" aria-hidden="true"></canvas>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".ssr-stage");
+            var canvas = root.querySelector(".ssr-canvas");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var axis = vars.axis === "cols" ? "cols" : "rows";
+            var spreadRaw = parseFloat(vars.spread);
+            var spread = isFinite(spreadRaw) ? Math.min(Math.max(0.1, spreadRaw), 1.2) : 0.45;
+            var resolveRaw = parseFloat(vars.resolve_at);
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            // Envelope. The collapse is 0.6s; resolve_at is clamped so the
+            // collapse and any exit always fit inside the clip.
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var OUT = exit === "none" ? 0 : 0.45;
+            var COLLAPSE = 0.6;
+            var resolveAt = isFinite(resolveRaw) ? resolveRaw : 2.2;
+            resolveAt = Math.min(
+              Math.max(0.4, resolveAt),
+              Math.max(0.4, duration - COLLAPSE - OUT - 0.1),
+            );
+            // The subject's travel ends just before the collapse begins so
+            // the zip-shut lands on a resting subject.
+            var MOVE_START = 0.25;
+            var MOVE_END = Math.max(MOVE_START + 0.6, resolveAt - 0.1);
+            var OUT_START = duration - OUT;
+
+            // Canvas raster basis, fixed once at mount (elastic root).
+            var dpr = Math.min(2, Math.max(1, Number(window.devicePixelRatio) || 1));
+            var box = root.getBoundingClientRect();
+            var cssW = Math.max(1, Math.round(box.width) || 640);
+            var cssH = Math.max(1, Math.round(box.height) || 360);
+            canvas.width = Math.round(cssW * dpr);
+            canvas.height = Math.round(cssH * dpr);
+            var ctx = canvas.getContext("2d");
+            var minDim = Math.min(canvas.width, canvas.height);
+
+            // Resolve tokens to concrete colors once at mount so canvas
+            // fills never depend on style recalc during seeks.
+            var hostDoc = root.ownerDocument;
+            function resolveColor(cssColor, fallback) {
+              var probe = hostDoc.createElement("span");
+              probe.style.color = cssColor;
+              root.appendChild(probe);
+              var value = getComputedStyle(probe).color || fallback;
+              probe.remove();
+              return value;
+            }
+            var accentColor = resolveColor(accentColors[accent], "#71f5a7");
+            var surfaceColor = resolveColor("var(--surface, #14171c)", "#14171c");
+            var fgColor = resolveColor("var(--fg, #f8fafc)", "#f8fafc");
+
+            // Seeded per-slice offset jitter: a stable table, computed once.
+            var SLICES = 96;
+            var jitter = (function () {
+              var state = 0x51175c4e;
+              function next() {
+                state = (Math.imul(1664525, state) + 1013904223) >>> 0;
+                return state / 4294967296;
+              }
+              var rows = [];
+              for (var i = 0; i < SLICES; i += 1) {
+                rows.push(0.96 + 0.08 * next());
+              }
+              return rows;
+            })();
+
+            function clamp01(v) {
+              return v < 0 ? 0 : v > 1 ? 1 : v;
+            }
+
+            // The subject's authored motion: ONE pure position function.
+            // Cubic-eased sweep from the wing to dead center with a
+            // decaying two-cycle sine bob (integer cycles, exactly zero at
+            // u = 1) and a settling scale. The sweep runs ACROSS the slice
+            // axis (rows: left wing in, cols: top wing down) so every band
+            // cuts the travel and the offsets read as a staircase smear,
+            // not a local skew. Defined for every t; clamped flat outside
+            // [MOVE_START, MOVE_END], so sampled times before mount or
+            // into the hold are exact and still.
+            function subjectState(t) {
+              var u = clamp01((t - MOVE_START) / (MOVE_END - MOVE_START));
+              var e = 1 - Math.pow(1 - u, 3);
+              var decay = (1 - u) * (1 - u);
+              var travel = -0.16 + 0.66 * e;
+              var bob = 0.5 + 0.15 * Math.sin(Math.PI * 2 * 2 * u) * decay;
+              return {
+                x: (axis === "rows" ? travel : bob) * canvas.width,
+                y: (axis === "rows" ? bob : travel) * canvas.height,
+                rot: 0.5 * Math.sin(Math.PI * 2 * u) * decay,
+                scale: 0.82 + 0.18 * e,
+                appear: clamp01(u / 0.12),
+              };
+            }
+
+            // Draw the whole subject (token disc + accent ring + orbit dot)
+            // at one sampled state. Callers clip to a slice band first.
+            function drawSubject(s) {
+              if (s.appear <= 0) return;
+              var r = 0.15 * minDim * s.scale;
+              ctx.save();
+              ctx.translate(s.x, s.y);
+              ctx.rotate(s.rot);
+              ctx.globalAlpha = s.appear;
+              // Disc body.
+              ctx.fillStyle = surfaceColor;
+              ctx.beginPath();
+              ctx.arc(0, 0, r, 0, Math.PI * 2);
+              ctx.fill();
+              // Accent ring.
+              ctx.strokeStyle = accentColor;
+              ctx.lineWidth = Math.max(1, 0.016 * minDim);
+              ctx.beginPath();
+              ctx.arc(0, 0, r, 0, Math.PI * 2);
+              ctx.stroke();
+              // Inner core.
+              ctx.fillStyle = fgColor;
+              ctx.globalAlpha = s.appear * 0.92;
+              ctx.beginPath();
+              ctx.arc(0, 0, r * 0.3, 0, Math.PI * 2);
+              ctx.fill();
+              // Orbit dot: the asymmetry that makes the smear legible.
+              ctx.fillStyle = accentColor;
+              ctx.globalAlpha = s.appear;
+              ctx.beginPath();
+              ctx.arc(r * 0.72, 0, r * 0.13, 0, Math.PI * 2);
+              ctx.fill();
+              ctx.restore();
+            }
+
+            // Pure repaint: for every slice, clip to its band and draw the
+            // subject at t - offset(slice) * collapse(t).
+            function paint(t) {
+              ctx.clearRect(0, 0, canvas.width, canvas.height);
+              var collapse = 1 - clamp01((t - resolveAt) / COLLAPSE);
+              // Eased collapse: smooth both ends (power2.inOut shape).
+              collapse =
+                collapse < 0.5 ? 2 * collapse * collapse : 1 - Math.pow(-2 * collapse + 2, 2) / 2;
+              if (collapse <= 0) {
+                // Resolved: one coherent draw, no per-slice clipping.
+                drawSubject(subjectState(t));
+                return;
+              }
+              var along = axis === "rows" ? canvas.height : canvas.width;
+              var band = along / SLICES;
+              for (var i = 0; i < SLICES; i += 1) {
+                var frac = i / (SLICES - 1);
+                var offset = spread * frac * jitter[i] * collapse;
+                var s = subjectState(t - offset);
+                if (s.appear <= 0) continue;
+                ctx.save();
+                ctx.beginPath();
+                if (axis === "rows") {
+                  ctx.rect(0, i * band, canvas.width, band + 1);
+                } else {
+                  ctx.rect(i * band, 0, band + 1, canvas.height);
+                }
+                ctx.clip();
+                drawSubject(s);
+                ctx.restore();
+              }
+            }
+
+            gsap.set(stage, { opacity: 1, y: "0cqh" });
+
+            var tl = gsap.timeline({
+              paused: true,
+              onUpdate: function () {
+                paint(tl.time());
+              },
+            });
+
+            // Anchor tween: an inert plain-object tween spanning the full
+            // authored duration so tl.time() covers [0, D] and onUpdate
+            // repaints the canvas on every eventful seek.
+            tl.to({ p: 0 }, { p: 1, duration: duration, ease: "none" }, 0);
+
+            // HOLD: truly still. After the collapse every slice samples the
+            // same resting state, so the canvas repaints one coherent mark.
+
+            // OUT: optional departure; exit none holds until the frame cuts.
+            if (exit === "up") {
+              tl.to(stage, { y: "-4cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "fade") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            }
+
+            tl.seek(0);
+            paint(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["slit-scan-reveal"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/slot-machine-roll/demo.html b/registry/components/slot-machine-roll/demo.html
new file mode 100644
index 0000000000..e56654bc6d
--- /dev/null
+++ b/registry/components/slot-machine-roll/demo.html
@@ -0,0 +1,122 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Slot Machine Roll - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 32px;
+        /* ponytail: scale on non-GSAP wrapper — safe, GSAP only animates --hf-slot-y on inner <i> */
+        transform: scale(1.85);
+        transform-origin: center center;
+      }
+      .slot-card {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 24px;
+        background: #ffffff;
+        border: 1px solid #e4e4e7;
+        border-radius: 14px;
+        padding: 40px 56px;
+        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.1);
+      }
+      .slot-label {
+        font-family: Inter, system-ui, sans-serif;
+        font-size: 11px;
+        font-weight: 500;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+        color: #71717a;
+      }
+      .hf-remocn-slot-machine-roll {
+        color: #18181b;
+        font-family: Inter, system-ui, sans-serif;
+        font-weight: 900;
+        letter-spacing: -0.04em;
+      }
+      .hf-remocn-slot-machine-roll {
+        display: inline-flex;
+        gap: 6px;
+        height: 74px;
+        overflow: hidden;
+        font:
+          900 74px/1 ui-monospace,
+          SFMono-Regular,
+          Menlo,
+          monospace;
+      }
+      .hf-remocn-slot-machine-roll span {
+        display: block;
+        height: 74px;
+        overflow: hidden;
+      }
+      .hf-remocn-slot-machine-roll i {
+        display: block;
+        font-style: normal;
+        transform: translateY(var(--hf-slot-y, 0px));
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="slot-machine-roll-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="slot-card">
+          <div class="slot-label">Slot Machine Roll</div>
+          <div class="hf-remocn-slot-machine-roll">
+            <span
+              ><i>0<br />A</i></span
+            ><span
+              ><i>0<br />7</i></span
+            ><span
+              ><i>0<br />K</i></span
+            >
+          </div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-slot-machine-roll i",
+          { "--hf-slot-y": "0px" },
+          { "--hf-slot-y": "-74px", duration: 0.52, stagger: 0.06, ease: "power3.inOut" },
+          startTime,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["slot-machine-roll-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/slot-machine-roll/registry-item.json b/registry/components/slot-machine-roll/registry-item.json
new file mode 100644
index 0000000000..66cc6ce95e
--- /dev/null
+++ b/registry/components/slot-machine-roll/registry-item.json
@@ -0,0 +1,90 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "slot-machine-roll",
+  "type": "hyperframes:component",
+  "title": "Slot Machine Roll",
+  "description": "A vertical reel scrolls characters from one value to another.",
+  "tags": ["video-primitive", "motion-primitive", "remocn-port", "typography"],
+  "files": [
+    {
+      "path": "slot-machine-roll.html",
+      "target": "compositions/components/slot-machine-roll.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "result",
+      "type": "string",
+      "role": "content",
+      "label": "Result",
+      "description": "Characters the reels land on, one reel column per character. Whitespace is stripped and every reel starts on a zero.",
+      "default": "A7K"
+    },
+    {
+      "id": "direction",
+      "type": "enum",
+      "role": "motion",
+      "label": "Direction",
+      "description": "Which way the reels roll: up lifts the zero out through the top, down drops it out through the bottom.",
+      "default": "up",
+      "options": [
+        {
+          "value": "up",
+          "label": "Up"
+        },
+        {
+          "value": "down",
+          "label": "Down"
+        }
+      ]
+    },
+    {
+      "id": "size",
+      "type": "enum",
+      "role": "layout",
+      "label": "Size",
+      "description": "Reel height and type size. The roll distance scales with it so the reel always lands exactly one row on.",
+      "default": "standard",
+      "options": [
+        {
+          "value": "small",
+          "label": "Small"
+        },
+        {
+          "value": "standard",
+          "label": "Standard"
+        },
+        {
+          "value": "large",
+          "label": "Large"
+        }
+      ]
+    },
+    {
+      "id": "tone",
+      "type": "enum",
+      "role": "style",
+      "label": "Tone",
+      "description": "Character colour: ink for light frames, paper for dark ones, accent rides --brand.",
+      "default": "ink",
+      "options": [
+        {
+          "value": "ink",
+          "label": "Ink"
+        },
+        {
+          "value": "paper",
+          "label": "Paper"
+        },
+        {
+          "value": "accent",
+          "label": "Accent"
+        }
+      ]
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/slot-machine-roll.png"
+  }
+}
diff --git a/registry/components/slot-machine-roll/slot-machine-roll.html b/registry/components/slot-machine-roll/slot-machine-roll.html
new file mode 100644
index 0000000000..b724cc1c63
--- /dev/null
+++ b/registry/components/slot-machine-roll/slot-machine-roll.html
@@ -0,0 +1,136 @@
+<!--
+  Slot Machine Roll - remocn typography primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Drive the timeline
+  integration from a paused GSAP timeline so renders remain deterministic.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result as a custom property
+  the CSS below consumes. The timeline recipe stays untouched by them: it keeps
+  driving one vertical offset of exactly one row, and these decide how tall that
+  row is, which way it travels and what it lands on.
+
+    - result (text, default "A7K"): the characters the reels land on, one reel
+      column per character. Whitespace is stripped, and blank or non-text input
+      falls back to the default three. Every reel starts on a zero.
+    - direction (up | down, default up): which way the reels roll. up lifts the
+      zero out through the top, down drops it out through the bottom.
+    - size (small | standard | large, default standard): reel height and type
+      size, 48px, 74px or 104px. The roll distance is scaled by the same factor,
+      so whatever the size the reel still lands exactly one row on.
+    - tone (ink | paper | accent, default ink): character colour. ink is
+      near-black for light frames, paper near-white for dark ones, accent rides
+      --brand.
+
+  On every default the result is identical to the original: three 74px reels in
+  near-black rolling 0 up to A, 7 and K.
+-->
+
+<div
+  class="hf-remocn-slot-machine-roll"
+  data-composition-variables='[
+    { "id": "result", "type": "string", "role": "content", "label": "Result", "description": "Characters the reels land on, one reel column per character. Whitespace is stripped and every reel starts on a zero.", "default": "A7K" },
+    { "id": "direction", "type": "enum", "role": "motion", "label": "Direction", "description": "Which way the reels roll: up lifts the zero out through the top, down drops it out through the bottom.", "default": "up", "options": [{ "value": "up", "label": "Up" }, { "value": "down", "label": "Down" }] },
+    { "id": "size", "type": "enum", "role": "layout", "label": "Size", "description": "Reel height and type size. The roll distance scales with it so the reel always lands exactly one row on.", "default": "standard", "options": [{ "value": "small", "label": "Small" }, { "value": "standard", "label": "Standard" }, { "value": "large", "label": "Large" }] },
+    { "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Character colour: ink for light frames, paper for dark ones, accent rides --brand.", "default": "ink", "options": [{ "value": "ink", "label": "Ink" }, { "value": "paper", "label": "Paper" }, { "value": "accent", "label": "Accent" }] }
+  ]'
+>
+  <span
+    ><i>0<br />A</i></span
+  ><span
+    ><i>0<br />7</i></span
+  ><span
+    ><i>0<br />K</i></span
+  >
+</div>
+
+<style>
+  .hf-remocn-slot-machine-roll {
+    color: var(--hf-slot-color, #18181b);
+    font-family: Inter, system-ui, sans-serif;
+    font-weight: 900;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-slot-machine-roll {
+    display: inline-flex;
+    gap: 6px;
+    height: var(--hf-slot-row, 74px);
+    overflow: hidden;
+    font:
+      900 var(--hf-slot-row, 74px)/1 ui-monospace,
+      SFMono-Regular,
+      Menlo,
+      monospace;
+  }
+  .hf-remocn-slot-machine-roll span {
+    display: block;
+    height: var(--hf-slot-row, 74px);
+    overflow: hidden;
+  }
+  .hf-remocn-slot-machine-roll i {
+    display: block;
+    font-style: normal;
+    transform: translateY(
+      calc(
+        var(--hf-slot-base, 0px) + var(--hf-slot-y, 0px) * var(--hf-slot-dir, 1) *
+          var(--hf-slot-gain, 1)
+      )
+    );
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var directions = { up: 1, down: -1 };
+    var sizes = { small: 48, standard: 74, large: 104 };
+    var tones = {
+      ink: "#18181b",
+      paper: "#fafafa",
+      accent: "var(--brand, #34d399)",
+    };
+
+    var dir = directions[pick(directions, vars.direction, "up")];
+    var row = sizes[pick(sizes, vars.size, "standard")];
+    var tone = tones[pick(tones, vars.tone, "ink")];
+    var result = (typeof vars.result === "string" ? vars.result : "").replace(/\s+/g, "");
+    if (result.length === 0) result = "A7K";
+
+    var roots = document.querySelectorAll(".hf-remocn-slot-machine-roll");
+    for (var i = 0; i < roots.length; i += 1) {
+      var root = roots[i];
+      root.style.setProperty("--hf-slot-row", row + "px");
+      root.style.setProperty("--hf-slot-gain", String(row / 74));
+      root.style.setProperty("--hf-slot-dir", String(dir));
+      // Rolling down starts one row up, so the zero still sits in frame at rest.
+      root.style.setProperty("--hf-slot-base", (dir === 1 ? 0 : -row) + "px");
+      root.style.setProperty("--hf-slot-color", tone);
+      root.textContent = "";
+      for (var j = 0; j < result.length; j += 1) {
+        var reel = document.createElement("i");
+        reel.appendChild(document.createTextNode(dir === 1 ? "0" : result.charAt(j)));
+        reel.appendChild(document.createElement("br"));
+        reel.appendChild(document.createTextNode(dir === 1 ? result.charAt(j) : "0"));
+        var slot = document.createElement("span");
+        slot.appendChild(reel);
+        root.appendChild(slot);
+      }
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-slot-machine-roll i', { '--hf-slot-y': '0px' }, { '--hf-slot-y': '-74px', duration: 0.52, stagger: 0.06, ease: 'power3.inOut' }, startTime);
+-->
diff --git a/registry/components/soft-blob-touch/README.md b/registry/components/soft-blob-touch/README.md
new file mode 100644
index 0000000000..afb3f7ea2c
--- /dev/null
+++ b/registry/components/soft-blob-touch/README.md
@@ -0,0 +1,67 @@
+# soft-blob-touch
+
+Product demo material primitive: a granular soft blob (layered radial
+gradients plus a seeded grain field) idles with slow internal drift; a
+scripted touch dot decel-arrives at a caller-positioned point; the blob
+deforms toward it (attraction bulge with mass), then recovers with a
+velocity-preserving spring once the dot retreats. The AI-orb beat. Material
+softness is the whole point: nothing in the frame has a hard edge. 4s
+authored, elastic HOLD (never time-scaled).
+
+## Mounting
+
+```html
+<div
+  class="clip"
+  data-composition-id="soft-blob-touch"
+  data-composition-src="./components/soft-blob-touch.html"
+  data-variable-values='{"touch_x":30,"touch_y":62,"grain":"coarse","accent":"violet"}'
+  data-start="0"
+  data-duration="4"
+  data-track-index="0"
+></div>
+```
+
+Best on a dark or deep-toned host: the body is additive light (accent-tinted
+gradients and specks over a transparent canvas), so the frame beneath shows
+through the aura.
+
+## Variables
+
+| id       | type   | default | notes                                                                                                                                   |
+| -------- | ------ | ------- | --------------------------------------------------------------------------------------------------------------------------------------- |
+| touch_x  | number | 66      | Touch point, percent of host width (8 to 92).                                                                                           |
+| touch_y  | number | 38      | Touch point, percent of host height (8 to 92).                                                                                          |
+| touch_at | number | 1.6     | Seconds from mount start when the dot makes contact. Clamped so the deform and recover tail (~1.57s) and any exit stay inside the clip. |
+| grain    | enum   | fine    | fine (many small specks) or coarse (fewer, larger).                                                                                     |
+| accent   | enum   | green   | green maps to --brand, blue to --accent, violet to --accent-2. Tints the aura, body, and specks.                                        |
+| exit     | enum   | none    | none holds the settled blob (frame roots own transitions); fade or up add a 0.45s departure.                                            |
+
+## Choreography
+
+- 0.00s: the blob is present and idling; every speck drifts on its own
+  slow sine, each an integer number of cycles over the IN window, so the
+  drift is exactly zero when the hold begins.
+- touch_at - 0.85s: the dot enters from off stage along the attraction
+  axis, decelerating the whole way (power3.out: it arrives, it never
+  passes through).
+- touch_at: contact. The blob leans and bulges toward the dot: specks are
+  attracted with an exponential falloff (the material near the dot reaches
+  for it, the far side barely stirs) while a gradient lobe swells at the
+  surface.
+- touch_at + 0.41s: the dot lifts mid-lean (analytic cut). The recovery
+  spring starts with the exact velocity the lean-in had at the cut, so the
+  blob keeps deforming for a beat, overshoots home, and wobbles out: the
+  bulge on a fast spring, the whole-mass lean on a slower one.
+- touch_at + 1.57s: settled. HOLD is dead still, elastic with the clip.
+
+Sync point `touch` fires at contact; align SFX or a downstream reveal to it.
+
+## Determinism
+
+The grain table is computed once at build from a fixed LCG seed; every
+painted frame is a pure function of (table, two tweened params, timeline
+time). The canvas repaints from scratch in onUpdate, so eventful seeks land
+identical frames in any order and either direction. The recovery is a
+closed-form damped spring evaluated inside a tween ease, which keeps the
+interruptible-spring law (L1) inside one paused, seek-safe timeline.
diff --git a/registry/components/soft-blob-touch/demo.html b/registry/components/soft-blob-touch/demo.html
new file mode 100644
index 0000000000..4bf0d3f989
--- /dev/null
+++ b/registry/components/soft-blob-touch/demo.html
@@ -0,0 +1,82 @@
+<!doctype html>
+<!--
+  soft-blob-touch demo. A full-bleed 1920x1080 dark host mounts the
+  primitive through data-composition-src with non-default variables
+  (touch point low-left, coarse grain, violet accent) to prove the
+  variable path while the primitive stays elastic to its host.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Soft Blob Touch Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #0b0c0e);
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --muted: #94a3b8;
+        --surface: #14171c;
+        --border: #343a46;
+        --brand: #71f5a7;
+        --accent: #61a8ff;
+        --accent-2: #c5a3ff;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 44%, #14161b 0%, var(--bg, #0b0c0e) 74%);
+      }
+
+      .mount-stage {
+        position: absolute;
+        inset: 0;
+        container-type: size;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="soft-blob-touch-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="soft-blob-touch-mount"
+        class="mount-stage clip"
+        data-composition-id="soft-blob-touch"
+        data-composition-src="./soft-blob-touch.html"
+        data-variable-values='{"touch_x":30,"touch_y":62,"touch_at":1.4,"grain":"coarse","accent":"violet"}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="1920"
+        data-height="1080"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["soft-blob-touch-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/soft-blob-touch/registry-item.json b/registry/components/soft-blob-touch/registry-item.json
new file mode 100644
index 0000000000..a01b31420c
--- /dev/null
+++ b/registry/components/soft-blob-touch/registry-item.json
@@ -0,0 +1,126 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "soft-blob-touch",
+  "type": "hyperframes:component",
+  "title": "Soft Blob Touch",
+  "description": "A granular soft blob idles with slow internal drift; a scripted touch dot decel-arrives, the blob deforms toward it with an attraction bulge, then recovers with a velocity-preserving spring. No hard edges anywhere.",
+  "tags": ["motion-primitive", "product-demo", "material", "blob", "touch", "grain"],
+  "jobs": ["demonstrate"],
+  "family": "product-demo",
+  "profile": "material",
+  "evidence": "Wave L L4: the AI-orb material beat from the frame study (alexwidua 1702356241186476225 sheet-02, a granular blob leaning toward a finger and springing back)",
+  "syncPoints": [
+    {
+      "id": "touch",
+      "phase": "in",
+      "offset": 1.6
+    }
+  ],
+  "files": [
+    {
+      "path": "soft-blob-touch.html",
+      "target": "compositions/components/soft-blob-touch.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "touch_x",
+      "type": "number",
+      "role": "layout",
+      "label": "Touch X",
+      "description": "Touch point, percent of host width.",
+      "default": 66,
+      "min": 8,
+      "max": 92,
+      "step": 1,
+      "unit": "%"
+    },
+    {
+      "id": "touch_y",
+      "type": "number",
+      "role": "layout",
+      "label": "Touch Y",
+      "description": "Touch point, percent of host height.",
+      "default": 38,
+      "min": 8,
+      "max": 92,
+      "step": 1,
+      "unit": "%"
+    },
+    {
+      "id": "touch_at",
+      "type": "number",
+      "role": "timing",
+      "label": "Touch at",
+      "description": "Seconds from mount start when the dot makes contact.",
+      "default": 1.6,
+      "min": 0.9,
+      "max": 10,
+      "step": 0.1,
+      "unit": "s"
+    },
+    {
+      "id": "grain",
+      "type": "enum",
+      "role": "style",
+      "label": "Grain",
+      "description": "Speck register for the granular body.",
+      "default": "fine",
+      "options": [
+        {
+          "value": "fine",
+          "label": "Fine"
+        },
+        {
+          "value": "coarse",
+          "label": "Coarse"
+        }
+      ]
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Body tint: green rides --brand, blue rides --accent, violet rides --accent-2.",
+      "default": "green",
+      "options": [
+        {
+          "value": "green",
+          "label": "Green"
+        },
+        {
+          "value": "blue",
+          "label": "Blue"
+        },
+        {
+          "value": "violet",
+          "label": "Violet"
+        }
+      ]
+    },
+    {
+      "id": "exit",
+      "type": "enum",
+      "role": "timing",
+      "label": "Exit",
+      "description": "Optional departure. Default none: the settled blob holds until the frame cuts.",
+      "default": "none",
+      "options": [
+        {
+          "value": "none",
+          "label": "None"
+        },
+        {
+          "value": "fade",
+          "label": "Fade"
+        },
+        {
+          "value": "up",
+          "label": "Up"
+        }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/soft-blob-touch/soft-blob-touch.html b/registry/components/soft-blob-touch/soft-blob-touch.html
new file mode 100644
index 0000000000..1c124131ac
--- /dev/null
+++ b/registry/components/soft-blob-touch/soft-blob-touch.html
@@ -0,0 +1,515 @@
+<!doctype html>
+<!--
+  soft-blob-touch: HyperFrames video primitive (product demo / material)
+
+  A granular soft blob idles with slow internal drift; a scripted touch dot
+  decel-arrives at a caller-positioned point; the blob deforms toward it
+  (an attraction bulge with mass), then recovers with an interruptible
+  spring once the dot retreats. The AI-orb material beat. Softness is the
+  whole point: the body is layered radial gradients plus a seeded grain
+  field, and nothing in the frame has a hard edge.
+
+  Reference: alexwidua 1702356241186476225 sheet-02 (granular blob leaning
+  toward a finger; fuzzy boundary, mass, recovery wobble).
+
+  Variables (declared in data-composition-variables below):
+    - touch_x, touch_y (numbers, percent of host box): where the dot lands.
+    - touch_at (seconds): when the dot makes contact. Clamped so the whole
+      deform and recover tail stays inside the clip.
+    - grain ("fine" | "coarse"): speck count and size for the body.
+    - accent ("green" | "blue" | "violet"): green rides --brand, blue rides
+      --accent, violet rides --accent-2.
+    - exit ("none" | "fade" | "up"): default none, the settled blob holds.
+
+  Envelope, fixed IN and OUT with elastic HOLD only (never timeScale):
+    IN ends when the recovery spring settles (touch_at + 1.57s); HOLD is
+    dead still (drift completes integer sine cycles and ends at exactly
+    zero by then); OUT = 0.45s only when exit is not none.
+
+  Deformation model (law L1, interruptible spring):
+    Two plain-object params (bulge, lean) feed ONE onUpdate painter. The
+    attack tween is the first 75 percent of a power2.out lean-in, cut
+    mid-flight when the dot lifts (analytic cut: the junction value AND
+    velocity are computed in closed form). The recovery tween's ease is a
+    closed-form underdamped spring whose initial velocity equals the cut
+    velocity, so the redirect preserves momentum exactly. Both tweens have
+    explicit endpoints; any seek order lands identical values.
+
+  Determinism (canvas 2D law, per particle-image-reveal):
+    One grain table is computed exactly once at build from fixed LCG seed
+    0x50f7b10b. Every painted frame is a pure function of (table, params,
+    timeline time). onUpdate clears and redraws from scratch; no
+    Math.random, no wall clock, no incremental state. Eventful seeks
+    (suppressEvents false) repaint identically in any order.
+-->
+<html
+  lang="en"
+  data-composition-id="soft-blob-touch"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "touch_x", "type": "number", "role": "layout", "label": "Touch X", "description": "Touch point, percent of host width.", "default": 66, "min": 8, "max": 92, "step": 1, "unit": "%" },
+    { "id": "touch_y", "type": "number", "role": "layout", "label": "Touch Y", "description": "Touch point, percent of host height.", "default": 38, "min": 8, "max": 92, "step": 1, "unit": "%" },
+    { "id": "touch_at", "type": "number", "role": "timing", "label": "Touch at", "description": "Seconds from mount start when the dot makes contact.", "default": 1.6, "min": 0.9, "max": 10, "step": 0.1, "unit": "s" },
+    { "id": "grain", "type": "enum", "role": "style", "label": "Grain", "description": "Speck register for the granular body.", "default": "fine", "options": [{ "value": "fine", "label": "Fine" }, { "value": "coarse", "label": "Coarse" }] },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Body tint: green rides --brand, blue rides --accent, violet rides --accent-2.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the settled blob holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Soft Blob Touch</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="soft-blob-touch" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, "Inter", system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .sbt-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+          }
+
+          .sbt-stage {
+            position: absolute;
+            inset: 0;
+            will-change: transform, opacity;
+          }
+
+          .sbt-canvas {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+          }
+
+          /* The touch dot: a soft disc with a gradient falloff, no hard rim.
+             Motion rides transforms only (px), never left or top. */
+          .sbt-touch {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 4.6cqmin;
+            height: 4.6cqmin;
+            margin-left: -2.3cqmin;
+            margin-top: -2.3cqmin;
+            border-radius: 50%;
+            background: radial-gradient(
+              circle at 42% 38%,
+              color-mix(in srgb, var(--fg, #f8fafc) 96%, transparent) 0%,
+              color-mix(in srgb, var(--fg, #f8fafc) 78%, transparent) 34%,
+              color-mix(in srgb, var(--fg, #f8fafc) 26%, transparent) 62%,
+              transparent 78%
+            );
+            will-change: transform, opacity;
+          }
+        </style>
+
+        <div
+          id="soft-blob-touch-clip"
+          class="sbt-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="sbt-stage">
+            <canvas class="sbt-canvas" aria-hidden="true"></canvas>
+            <div class="sbt-touch" aria-hidden="true"></div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".sbt-stage");
+            var canvas = root.querySelector(".sbt-canvas");
+            var touchDot = root.querySelector(".sbt-touch");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            function num(value, fallback, min, max) {
+              var n = Number(value);
+              if (!isFinite(n)) n = fallback;
+              return Math.max(min, Math.min(max, n));
+            }
+
+            var grain = vars.grain === "coarse" ? "coarse" : "fine";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            // The bundler mirrors composition variables as scoped CSS custom
+            // props, so this unit's own accent variable shadows the contract
+            // --accent token inside the subtree ("blue" is a valid CSS color
+            // and would render pure blue). When the shadow is present, fall
+            // back to the literal contract value instead of var(--accent).
+            var computedAccent = getComputedStyle(root).getPropertyValue("--accent").trim();
+            if (
+              computedAccent === "green" ||
+              computedAccent === "blue" ||
+              computedAccent === "violet"
+            ) {
+              accentColors.blue = "#61a8ff";
+            }
+
+            // Envelope. The deform tail is ATTACK + RECOVER after contact;
+            // clamp touch_at so the spring settles inside the clip.
+            var ATTACK_NAT = 0.55; // natural length of the uncut lean-in
+            var CUT_FRAC = 0.75; // the dot lifts at 75 percent of it
+            var ATTACK = ATTACK_NAT * CUT_FRAC;
+            var RECOVER = 1.15;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var OUT = exit === "none" ? 0 : 0.45;
+            var maxTouch = Math.max(0.9, duration - (ATTACK + RECOVER) - OUT - 0.05);
+            var touchAt = num(vars.touch_at, 1.6, 0.9, maxTouch);
+            var cutAt = touchAt + ATTACK;
+            var IN_END = cutAt + RECOVER;
+            var OUT_START = IN_END + Math.max(0, duration - IN_END - OUT);
+
+            // Canvas raster basis is fixed once at mount (elastic root: the
+            // host box decides the resolution; same host, same raster).
+            var dpr = Math.min(2, Math.max(1, Number(window.devicePixelRatio) || 1));
+            var box = root.getBoundingClientRect();
+            var cssW = Math.max(1, Math.round(box.width) || 640);
+            var cssH = Math.max(1, Math.round(box.height) || 360);
+            canvas.width = Math.round(cssW * dpr);
+            canvas.height = Math.round(cssH * dpr);
+            var ctx = canvas.getContext("2d");
+            var W = canvas.width;
+            var H = canvas.height;
+            var minDim = Math.min(W, H);
+
+            var touchX = (num(vars.touch_x, 66, 8, 92) / 100) * W;
+            var touchY = (num(vars.touch_y, 38, 8, 92) / 100) * H;
+            var centerX = W * 0.5;
+            var centerY = H * 0.5;
+            var R = minDim * 0.26;
+
+            // Direction of attraction, guarded for a touch at dead center.
+            var dxT = touchX - centerX;
+            var dyT = touchY - centerY;
+            var distT = Math.hypot(dxT, dyT);
+            var dirX = distT > 1 ? dxT / distT : 0.7071;
+            var dirY = distT > 1 ? dyT / distT : -0.7071;
+
+            // Resolve accent and fg to concrete rgb once at mount so canvas
+            // fills never depend on style recalc during seeks. Mixing happens
+            // numerically here (computed color-mix strings are not parseable
+            // across engines).
+            function probeColor(cssColor, fallback) {
+              var probe = root.ownerDocument.createElement("span");
+              probe.style.color = cssColor;
+              root.appendChild(probe);
+              var out = getComputedStyle(probe).color || fallback;
+              probe.remove();
+              var m = out.match(/rgba?\(\s*([\d.]+)[,\s]+([\d.]+)[,\s]+([\d.]+)/);
+              if (!m) {
+                m = fallback.match(/rgba?\(\s*([\d.]+)[,\s]+([\d.]+)[,\s]+([\d.]+)/);
+              }
+              return m ? [Number(m[1]), Number(m[2]), Number(m[3])] : [113, 245, 167];
+            }
+            var accentRgb = probeColor(accentColors[accent], "rgb(113, 245, 167)");
+            var fgRgb = probeColor("var(--fg, #f8fafc)", "rgb(248, 250, 252)");
+            function mix(a, b, t) {
+              return [
+                Math.round(a[0] + (b[0] - a[0]) * t),
+                Math.round(a[1] + (b[1] - a[1]) * t),
+                Math.round(a[2] + (b[2] - a[2]) * t),
+              ];
+            }
+            function rgba(c, a) {
+              return "rgba(" + c[0] + "," + c[1] + "," + c[2] + "," + a + ")";
+            }
+            var bodyRgb = mix(accentRgb, fgRgb, 0.18);
+            var softRgb = mix(accentRgb, fgRgb, 0.55);
+
+            // The grain table: computed exactly once, then only read.
+            var counts = { fine: 1500, coarse: 760 };
+            var sizes = { fine: 0.0055, coarse: 0.0102 };
+            var COUNT = counts[grain];
+            var SPECK = sizes[grain] * minDim;
+            var grains = (function () {
+              var state = 0x50f7b10b;
+              function next() {
+                state = (Math.imul(1664525, state) + 1013904223) >>> 0;
+                return state / 4294967296;
+              }
+              var rows = [];
+              for (var i = 0; i < COUNT; i += 1) {
+                // Radial distribution with a fuzzy tail past R: density thins
+                // toward the boundary and alpha fades it out, so the edge is
+                // granular vapor, never a line.
+                var rr = Math.pow(next(), 0.55) * R * 1.16;
+                var th = next() * Math.PI * 2;
+                var edge = Math.max(0, Math.min(1, (1.16 - rr / R) / 0.42));
+                rows.push({
+                  x: Math.cos(th) * rr,
+                  y: Math.sin(th) * rr * 0.94,
+                  size: SPECK * (0.5 + 0.9 * next()),
+                  dim: (0.3 + 0.7 * next()) * edge,
+                  tone: next(),
+                  driftAmp: (0.008 + 0.014 * next()) * minDim,
+                  driftCycles: next() < 0.5 ? 1 : 2,
+                  phaseX: next() * Math.PI * 2,
+                  phaseY: next() * Math.PI * 2,
+                });
+              }
+              return rows;
+            })();
+
+            function clamp01(v) {
+              return v < 0 ? 0 : v > 1 ? 1 : v;
+            }
+
+            // Deformation params. Attack lifts both toward CUT value; the
+            // recovery springs them home. The painter owns all amplitudes.
+            var P = { bulge: 0, lean: 0 };
+            var bCut = 1 - Math.pow(1 - CUT_FRAC, 2); // power2.out at the cut
+            var vCut = (2 * (1 - CUT_FRAC)) / ATTACK_NAT; // slope there, per s
+            var attackEase = function (p) {
+              return (1 - Math.pow(1 - p * CUT_FRAC, 2)) / bCut;
+            };
+            // Closed-form underdamped spring x(s), x(0) = 1, x'(0) = vCut/bCut
+            // (velocity preserved across the cut), corrected by a linear ramp
+            // so x(RECOVER) is exactly zero. Higher frequency for the local
+            // bulge, lower for the whole-mass lean: the surface snaps back
+            // faster than the body.
+            function springEase(lambda, omega) {
+              var v0 = vCut / bCut;
+              var c2 = (v0 + lambda) / omega;
+              function x(s) {
+                return Math.exp(-lambda * s) * (Math.cos(omega * s) + c2 * Math.sin(omega * s));
+              }
+              var xEnd = x(RECOVER);
+              return function (p) {
+                var s = p * RECOVER;
+                return 1 - (x(s) - (s / RECOVER) * xEnd);
+              };
+            }
+            var bulgeSpring = springEase(4.2, Math.PI * 2 * 2.2);
+            var leanSpring = springEase(3.6, Math.PI * 2 * 1.5);
+
+            // Pure repaint: clear, then rebuild the whole frame from
+            // (grain table, P, t). Drift phase u completes integer sine
+            // cycles over [0, IN_END] and is exactly zero from IN_END on,
+            // so the HOLD frame is dead still.
+            var sigma = R * 0.85;
+            var bulgeAmp = R * 0.62;
+            var leanAmp = minDim * 0.045;
+            function paint(t) {
+              ctx.clearRect(0, 0, W, H);
+              var u = clamp01(t / IN_END);
+              var lx = leanAmp * P.lean * dirX;
+              var ly = leanAmp * P.lean * dirY;
+              var cx = centerX + lx;
+              var cy = centerY + ly;
+
+              // Layered radial gradients: wide aura, mid glow, dense core,
+              // and a bulge lobe that swells toward the touch point.
+              var aura = ctx.createRadialGradient(cx, cy, 0, cx, cy, R * 1.9);
+              aura.addColorStop(0, rgba(accentRgb, 0.16));
+              aura.addColorStop(0.55, rgba(accentRgb, 0.06));
+              aura.addColorStop(1, rgba(accentRgb, 0));
+              ctx.fillStyle = aura;
+              ctx.fillRect(0, 0, W, H);
+
+              var mid = ctx.createRadialGradient(cx, cy, 0, cx, cy, R * 1.12);
+              mid.addColorStop(0, rgba(bodyRgb, 0.34));
+              mid.addColorStop(0.62, rgba(bodyRgb, 0.16));
+              mid.addColorStop(1, rgba(bodyRgb, 0));
+              ctx.fillStyle = mid;
+              ctx.fillRect(0, 0, W, H);
+
+              var core = ctx.createRadialGradient(
+                cx - R * 0.12,
+                cy - R * 0.14,
+                0,
+                cx,
+                cy,
+                R * 0.62,
+              );
+              core.addColorStop(0, rgba(softRgb, 0.4));
+              core.addColorStop(1, rgba(softRgb, 0));
+              ctx.fillStyle = core;
+              ctx.fillRect(0, 0, W, H);
+
+              if (P.bulge > 0.001) {
+                var lobeX = cx + dirX * R * 0.72;
+                var lobeY = cy + dirY * R * 0.72;
+                var lobeR = R * (0.22 + 0.5 * P.bulge);
+                var lobe = ctx.createRadialGradient(lobeX, lobeY, 0, lobeX, lobeY, lobeR);
+                lobe.addColorStop(0, rgba(softRgb, 0.34 * P.bulge));
+                lobe.addColorStop(1, rgba(softRgb, 0));
+                ctx.fillStyle = lobe;
+                ctx.fillRect(0, 0, W, H);
+              }
+
+              // Grain field. Each speck drifts on its own integer-cycle sine
+              // (zero at u = 0 and u = 1) and is attracted toward the touch
+              // point with an exponential falloff: the material near the dot
+              // reaches for it, the far side barely stirs.
+              var TAU = Math.PI * 2;
+              for (var i = 0; i < grains.length; i += 1) {
+                var g = grains[i];
+                var driftX =
+                  g.driftAmp * (Math.sin(TAU * g.driftCycles * u + g.phaseX) - Math.sin(g.phaseX));
+                var driftY =
+                  g.driftAmp * (Math.sin(TAU * g.driftCycles * u + g.phaseY) - Math.sin(g.phaseY));
+                var gx = cx + g.x + driftX;
+                var gy = cy + g.y + driftY;
+                if (P.bulge > 0.001) {
+                  var tx = touchX - gx;
+                  var ty = touchY - gy;
+                  var td = Math.hypot(tx, ty);
+                  if (td > 0.5) {
+                    var w = Math.exp(-td / sigma);
+                    var pull = (bulgeAmp * P.bulge * w) / td;
+                    gx += tx * pull;
+                    gy += ty * pull;
+                  }
+                }
+                var c = g.tone < 0.62 ? softRgb : fgRgb;
+                ctx.globalAlpha = g.dim * 0.85;
+                ctx.fillStyle = rgba(c, 1);
+                ctx.beginPath();
+                ctx.arc(gx, gy, g.size, 0, TAU);
+                ctx.fill();
+              }
+              ctx.globalAlpha = 1;
+            }
+
+            // Touch dot choreography, transforms only, px space of the host
+            // box (canvas coordinates divided by dpr).
+            var stageW = cssW;
+            var stageH = cssH;
+            var dotX = touchX / dpr;
+            var dotY = touchY / dpr;
+            // Enter and leave along the attraction axis, from off stage.
+            var away = Math.hypot(stageW, stageH) * 0.7;
+            var offX = dotX + dirX * away;
+            var offY = dotY + dirY * away;
+
+            gsap.set(stage, { opacity: 1, y: "0cqh" });
+            gsap.set(touchDot, { x: offX, y: offY, opacity: 0 });
+
+            var tl = gsap.timeline({
+              paused: true,
+              onUpdate: function () {
+                paint(tl.time());
+              },
+            });
+
+            // Anchor tween: spans the full authored duration so seeks into
+            // the hold keep tl.time() honest and onUpdate (the canvas
+            // repaint) fires for every eventful seek anywhere in [0, D].
+            tl.to({ p: 0 }, { p: 1, duration: duration, ease: "none" }, 0);
+
+            // The dot decel-arrives (power3.out: it arrives, it never
+            // passes through), dwells for the press, then accelerates away.
+            var arriveStart = Math.max(0, touchAt - 0.85);
+            tl.fromTo(
+              touchDot,
+              { x: offX, y: offY, opacity: 0 },
+              {
+                x: dotX,
+                y: dotY,
+                opacity: 1,
+                duration: touchAt - arriveStart,
+                ease: "power3.out",
+              },
+              arriveStart,
+            );
+            tl.fromTo(
+              touchDot,
+              { x: dotX, y: dotY, opacity: 1 },
+              {
+                x: offX,
+                y: offY,
+                opacity: 0,
+                duration: 0.55,
+                ease: "power2.in",
+                immediateRender: false,
+              },
+              cutAt,
+            );
+
+            // Attack: the truncated lean-in, cut mid-flight at the dot lift.
+            tl.fromTo(
+              P,
+              { bulge: 0, lean: 0 },
+              { bulge: bCut, lean: bCut, duration: ATTACK, ease: attackEase },
+              touchAt,
+            );
+            // Recovery: velocity-matched closed-form springs back to rest.
+            tl.fromTo(
+              P,
+              { bulge: bCut },
+              {
+                bulge: 0,
+                duration: RECOVER,
+                ease: bulgeSpring,
+                immediateRender: false,
+              },
+              cutAt,
+            );
+            tl.fromTo(
+              P,
+              { lean: bCut },
+              {
+                lean: 0,
+                duration: RECOVER,
+                ease: leanSpring,
+                immediateRender: false,
+              },
+              cutAt,
+            );
+
+            // HOLD: truly still. Drift is zero past IN_END by construction
+            // and both params are home, so every hold frame is identical.
+
+            // OUT: optional departure; exit none holds until the frame cuts.
+            if (exit === "up") {
+              tl.to(stage, { y: "-4cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "fade") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            }
+
+            tl.seek(0);
+            paint(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["soft-blob-touch"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/soft-blur-in/demo.html b/registry/components/soft-blur-in/demo.html
new file mode 100644
index 0000000000..ad7104a939
--- /dev/null
+++ b/registry/components/soft-blur-in/demo.html
@@ -0,0 +1,102 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Soft Blur In - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      body {
+        background: #101418;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      #demo {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background:
+          radial-gradient(circle at 25% 20%, #3b5b7a 0, transparent 30%),
+          linear-gradient(135deg, #101418, #20282f);
+        color: white;
+      }
+      .wrap {
+        position: absolute;
+        left: 180px;
+        top: 310px;
+        width: 1200px;
+      }
+      .eyebrow {
+        color: #80d9ff;
+        font-size: 40px;
+        font-weight: 600;
+        letter-spacing: 0.1em;
+        text-transform: uppercase;
+      }
+      .title {
+        margin-top: 28px;
+        font-size: 132px;
+        line-height: 0.92;
+        font-weight: 850;
+        letter-spacing: -0.02em;
+      }
+      .copy {
+        margin-top: 42px;
+        width: 780px;
+        color: #d7e3ea;
+        font-size: 42px;
+        line-height: 1.18;
+      }
+      .hf-soft-blur-in {
+        opacity: 0;
+        transform: translate3d(0, 28px, 0);
+        filter: blur(18px);
+        will-change: transform, opacity, filter;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="soft-blur-in-demo"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="wrap">
+        <div class="eyebrow hf-soft-blur-in">Motion Primitive</div>
+        <div class="title hf-soft-blur-in">Soft blur reveals that feel cinematic.</div>
+        <div class="copy hf-soft-blur-in">
+          Use it for titles, labels, stats, and scene intros without adding a framework.
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        tl.to(
+          ".hf-soft-blur-in",
+          {
+            opacity: 1,
+            y: 0,
+            filter: "blur(0px)",
+            duration: 0.8,
+            ease: "power3.out",
+            stagger: 0.12,
+          },
+          0.35,
+        );
+        window.__timelines = window.__timelines || {};
+        window.__timelines["soft-blur-in-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/soft-blur-in/registry-item.json b/registry/components/soft-blur-in/registry-item.json
new file mode 100644
index 0000000000..694e2e3f7f
--- /dev/null
+++ b/registry/components/soft-blur-in/registry-item.json
@@ -0,0 +1,82 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "soft-blur-in",
+  "type": "hyperframes:component",
+  "title": "Soft Blur In",
+  "description": "A soft opacity, blur, and lift reveal for headlines, captions, and product UI callouts",
+  "tags": ["motion-primitive", "text", "reveal", "blur"],
+  "files": [
+    {
+      "path": "soft-blur-in.html",
+      "target": "compositions/components/soft-blur-in.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "distance",
+      "type": "enum",
+      "role": "motion",
+      "label": "Distance",
+      "description": "How far the element is offset before it slides home: 14px, 28px or 52px.",
+      "default": "standard",
+      "options": [
+        {
+          "value": "close",
+          "label": "Close"
+        },
+        {
+          "value": "standard",
+          "label": "Standard"
+        },
+        {
+          "value": "far",
+          "label": "Far"
+        }
+      ]
+    },
+    {
+      "id": "direction",
+      "type": "enum",
+      "role": "motion",
+      "label": "Direction",
+      "description": "up starts the element below its resting place so it rises in, down starts it above so it drops in.",
+      "default": "up",
+      "options": [
+        {
+          "value": "up",
+          "label": "Up"
+        },
+        {
+          "value": "down",
+          "label": "Down"
+        }
+      ]
+    },
+    {
+      "id": "blur",
+      "type": "enum",
+      "role": "style",
+      "label": "Blur",
+      "description": "Starting blur radius, from a light haze to a full smear.",
+      "default": "standard",
+      "options": [
+        {
+          "value": "soft",
+          "label": "Soft"
+        },
+        {
+          "value": "standard",
+          "label": "Standard"
+        },
+        {
+          "value": "heavy",
+          "label": "Heavy"
+        }
+      ]
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/soft-blur-in.png"
+  }
+}
diff --git a/registry/components/soft-blur-in/soft-blur-in.html b/registry/components/soft-blur-in/soft-blur-in.html
new file mode 100644
index 0000000000..f7ca53e542
--- /dev/null
+++ b/registry/components/soft-blur-in/soft-blur-in.html
@@ -0,0 +1,83 @@
+<!--
+  Soft Blur In - web-native motion primitive.
+
+  Usage:
+  1. Add class="hf-soft-blur-in" to the element you want to reveal.
+  2. Paste this style block and script once.
+  3. Add the timeline snippet to your paused GSAP timeline.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result as a custom property
+  on the document root, which every element carrying the class inherits. These
+  set where the reveal STARTS: the timeline snippet below still drives offset
+  and blur to zero, so each knob decides how far and how hazy the element is
+  before it settles, not how long it takes.
+
+    - distance (close | standard | far, default standard): how far the element
+      is offset before it slides home, 14px, 28px or 52px.
+    - direction (up | down, default up): up starts the element below its
+      resting place so it rises in, down starts it above so it drops in.
+    - blur (soft | standard | heavy, default standard): the starting blur
+      radius, 8px, 18px or 34px, from a light haze to a full smear.
+
+  On every default the result is identical to the original: the element starts
+  28px low behind an 18px blur.
+-->
+
+<style
+  data-composition-variables='[
+    { "id": "distance", "type": "enum", "role": "motion", "label": "Distance", "description": "How far the element is offset before it slides home: 14px, 28px or 52px.", "default": "standard", "options": [{ "value": "close", "label": "Close" }, { "value": "standard", "label": "Standard" }, { "value": "far", "label": "Far" }] },
+    { "id": "direction", "type": "enum", "role": "motion", "label": "Direction", "description": "up starts the element below its resting place so it rises in, down starts it above so it drops in.", "default": "up", "options": [{ "value": "up", "label": "Up" }, { "value": "down", "label": "Down" }] },
+    { "id": "blur", "type": "enum", "role": "style", "label": "Blur", "description": "Starting blur radius, from a light haze to a full smear.", "default": "standard", "options": [{ "value": "soft", "label": "Soft" }, { "value": "standard", "label": "Standard" }, { "value": "heavy", "label": "Heavy" }] }
+  ]'
+>
+  .hf-soft-blur-in {
+    opacity: 0;
+    transform: translate3d(0, var(--hf-soft-blur-y, 28px), 0);
+    filter: blur(var(--hf-soft-blur-radius, 18px));
+    will-change: transform, opacity, filter;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var distances = { close: 14, standard: 28, far: 52 };
+    var directions = { up: 1, down: -1 };
+    var blurs = { soft: 8, standard: 18, heavy: 34 };
+
+    var distance = distances[pick(distances, vars.distance, "standard")];
+    var direction = directions[pick(directions, vars.direction, "up")];
+    var blur = blurs[pick(blurs, vars.blur, "standard")];
+
+    // Set on the root so every element carrying the class inherits the values,
+    // whether it exists yet or not.
+    var root = document.documentElement;
+    root.style.setProperty("--hf-soft-blur-y", distance * direction + "px");
+    root.style.setProperty("--hf-soft-blur-radius", blur + "px");
+  })();
+</script>
+
+<!--
+  Timeline integration:
+
+  tl.to(".hf-soft-blur-in", {
+    opacity: 1,
+    y: 0,
+    filter: "blur(0px)",
+    duration: 0.8,
+    ease: "power3.out",
+    stagger: 0.08,
+  }, startTime);
+-->
diff --git a/registry/components/split-tilt-cards/README.md b/registry/components/split-tilt-cards/README.md
new file mode 100644
index 0000000000..4b9acf7279
--- /dev/null
+++ b/registry/components/split-tilt-cards/README.md
@@ -0,0 +1,106 @@
+# split-tilt-cards
+
+Two equal-weight cards arrive from opposite wings, each carrying a mirrored
+3D rotateY book-open tilt (+18deg left, -18deg right) under one shared stage
+perspective, with soft box-shadows falling outward from the tilt. A pill
+badge spring-pops at each card's inner edge (left first, right ~0.3s behind:
+the one sanctioned overshoot, kept small), then the pair holds with a
+barely-there phase-opposed idle float and settles dead still. The eye reads
+the two cards as a balanced comparison: an A/B, a before/after, two
+complementary capabilities weighed simultaneously.
+
+This realizes the comparison-split blueprint's signature move as its own
+unit. Not for more than 2 items (use `grid-card-assemble`) or sequential
+steps. For a divider that wipes one state over another, use
+`before-after-wipe`.
+
+## Files
+
+- `split-tilt-cards.html`: the mountable sub-composition (install target:
+  `compositions/components/split-tilt-cards.html`).
+- `registry-item.json`: registry metadata and the variables block.
+- `demo.html`: a 1920x1080 standalone host that mounts the primitive with
+  non-default variables.
+
+## Variables
+
+| id        | type   | default  | notes                                                                     |
+| --------- | ------ | -------- | ------------------------------------------------------------------------- |
+| `label_a` | string | `Before` | mono header on the left card; empty string hides it                       |
+| `label_b` | string | `After`  | mono header on the right card; empty string hides it                      |
+| `badge_a` | string | `v1`     | inner-edge pill on the left card; empty string disables that pop          |
+| `badge_b` | string | `v2`     | inner-edge pill on the right card; empty string disables that pop         |
+| `accent`  | enum   | `green`  | `green` maps to `--brand`, `blue` to `--accent`, `violet` to `--accent-2` |
+| `exit`    | enum   | `none`   | `none` holds the final spread; `fade` and `up` release the stage          |
+
+Envelope: IN = 2.15s (left card lands 0 to 1.1s, right 0.2 to 1.3s, badge A
+pops at 1.45s, badge B at 1.75s), OUT = 0.5s only when `exit` is `fade` or
+`up`, HOLD is the sole elastic phase. During HOLD the two cards run whole
+2.0s phase-opposed float cycles (left dips as right rises, every cycle starts
+and ends at rest) and always finish with a 0.3s dead-still window. Sync
+points: `badge-pop-a` at 1.85s and `badge-pop-b` at 2.15s (`hf:sfx` id
+`badge-pop-soft` fires at each landing).
+
+## The slot mechanism
+
+The primitive ships two named slot panels inside its `<template>`:
+
+```html
+<div class="stc-slot" data-slot="card-a">...</div>
+<div class="stc-slot" data-slot="card-b">...</div>
+```
+
+Each slot's default children are a token-styled wireframe (muted on the left
+card, accent-tinted on the right), so an untouched mount still reads as a
+tasteful comparison. To show your own content, install the component and
+**replace the children of each `[data-slot]` element in your installed
+copy** (the runtime clones only the primitive's own template on mount, so
+slot content lives in the component file, not on the host clip).
+
+Rules:
+
+- Direct `img`/`video` children are automatically sized to cover the slot
+  (`object-fit: cover`). Arbitrary HTML works too; size it in `cqw`/`cqh`.
+- Keep the label headers and badge pills alone; they render outside the
+  slots and ride the same tilt and float as the card.
+- The tilt is carried by the card, so slot content tilts with it; keep
+  content readable at 18 degrees (avoid dense small text).
+
+## Worked example
+
+Install, then fill the slots with two screenshots:
+
+```bash
+npx hyperframes add split-tilt-cards
+```
+
+In `compositions/components/split-tilt-cards.html`, replace each slot's
+default block:
+
+```html
+<div class="stc-slot" data-slot="card-a">
+  <img src="../../assets/plan-free.png" alt="" />
+</div>
+...
+<div class="stc-slot" data-slot="card-b">
+  <img src="../../assets/plan-pro.png" alt="" />
+</div>
+```
+
+Mount it from a host composition like any sub-composition:
+
+```html
+<div
+  class="clip"
+  data-composition-id="split-tilt-cards"
+  data-composition-src="./components/split-tilt-cards.html"
+  data-variable-values='{"label_a":"Free","label_b":"Pro","badge_a":"$0","badge_b":"$29","accent":"violet"}'
+  data-start="2"
+  data-duration="5"
+  data-track-index="0"
+></div>
+```
+
+The cards land 1.3s after the clip mounts, the badges punctuate by 2.15s,
+and the spread holds with a barely-there float for the rest of the clip
+window (`exit` defaults to `none`; frame roots own scene transitions).
diff --git a/registry/components/split-tilt-cards/demo.html b/registry/components/split-tilt-cards/demo.html
new file mode 100644
index 0000000000..fb9510f8f6
--- /dev/null
+++ b/registry/components/split-tilt-cards/demo.html
@@ -0,0 +1,91 @@
+<!doctype html>
+<!--
+  split-tilt-cards demo. This standalone composition mounts the primitive
+  through data-composition-src. Non-default labels, badges, and accent prove
+  the variable path while the primitive remains elastic to its host.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>split-tilt-cards Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #0b0c0e);
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --surface: #14171c;
+        --border: #343a46;
+        --brand: #71f5a7;
+        --accent: #61a8ff;
+        --accent-2: #c5a3ff;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(
+          ellipse at 50% 44%,
+          var(--bg, #171a20) 0%,
+          var(--bg, #0b0c0e) 72%
+        );
+      }
+
+      .mount-card {
+        width: 80%;
+        height: 66%;
+        left: 10%;
+        top: 17%;
+        container-type: size;
+        overflow: hidden;
+        border: 1px solid color-mix(in srgb, var(--border, #94a3b8) 20%, transparent);
+        border-radius: 30px;
+        background: color-mix(in srgb, var(--surface, #101318) 72%, transparent);
+        box-shadow: 0 40px 100px color-mix(in srgb, var(--bg, #000000) 48%, transparent);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="split-tilt-cards-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4.5"
+      data-fps="30"
+    >
+      <div
+        id="split-tilt-cards-mount"
+        class="mount-card clip"
+        data-composition-id="split-tilt-cards"
+        data-composition-src="./split-tilt-cards.html"
+        data-variable-values='{"label_a":"Manual","label_b":"Autopilot","badge_a":"4.2s","badge_b":"0.3s","accent":"violet"}'
+        data-start="0"
+        data-duration="4.5"
+        data-track-index="0"
+        data-width="1536"
+        data-height="713"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["split-tilt-cards-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/split-tilt-cards/registry-item.json b/registry/components/split-tilt-cards/registry-item.json
new file mode 100644
index 0000000000..4cc90639d4
--- /dev/null
+++ b/registry/components/split-tilt-cards/registry-item.json
@@ -0,0 +1,83 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "split-tilt-cards",
+  "type": "hyperframes:component",
+  "title": "Split Tilt Cards",
+  "description": "Two equal-weight cards arrive from opposite wings with mirrored rotateY book-open tilts under one shared perspective, pill badges spring-pop at each inner edge, and the pair holds with a barely-there phase-opposed idle float. Card bodies are content slots with token skeleton defaults.",
+  "tags": ["motion-primitive", "layout", "compare", "holdable", "book-open", "tilt", "slots"],
+  "jobs": ["compare"],
+  "family": "layout",
+  "profile": "holdable",
+  "evidence": "Wave J2 J2-10: the comparison-split blueprint's signature split-tilt entry realized as its own unit, resolving the blueprint name collision",
+  "syncPoints": [
+    { "id": "badge-pop-a", "phase": "in", "offset": 1.85 },
+    { "id": "badge-pop-b", "phase": "in", "offset": 2.15 }
+  ],
+  "files": [
+    {
+      "path": "split-tilt-cards.html",
+      "target": "compositions/components/split-tilt-cards.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "label_a",
+      "type": "string",
+      "role": "content",
+      "label": "Left label",
+      "description": "Mono header on the left card. Blank hides it.",
+      "default": "Before"
+    },
+    {
+      "id": "label_b",
+      "type": "string",
+      "role": "content",
+      "label": "Right label",
+      "description": "Mono header on the right card. Blank hides it.",
+      "default": "After"
+    },
+    {
+      "id": "badge_a",
+      "type": "string",
+      "role": "content",
+      "label": "Left badge",
+      "description": "Pill badge that spring-pops at the left card inner edge. Blank disables it.",
+      "default": "v1"
+    },
+    {
+      "id": "badge_b",
+      "type": "string",
+      "role": "content",
+      "label": "Right badge",
+      "description": "Pill badge that spring-pops at the right card inner edge. Blank disables it.",
+      "default": "v2"
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Right-card tint, right badge, and right ambient glow color.",
+      "default": "green",
+      "options": [
+        { "value": "green", "label": "Green" },
+        { "value": "blue", "label": "Blue" },
+        { "value": "violet", "label": "Violet" }
+      ]
+    },
+    {
+      "id": "exit",
+      "type": "enum",
+      "role": "timing",
+      "label": "Exit",
+      "description": "Outgoing transition. None holds the final spread.",
+      "default": "none",
+      "options": [
+        { "value": "none", "label": "None" },
+        { "value": "fade", "label": "Fade" },
+        { "value": "up", "label": "Up" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/split-tilt-cards/split-tilt-cards.html b/registry/components/split-tilt-cards/split-tilt-cards.html
new file mode 100644
index 0000000000..3fb959fe53
--- /dev/null
+++ b/registry/components/split-tilt-cards/split-tilt-cards.html
@@ -0,0 +1,571 @@
+<!doctype html>
+<!--
+  split-tilt-cards: HyperFrames video primitive (layout / compare / holdable)
+
+  Concept: two equal-weight cards arrive from opposite wings, each carrying a
+  mirrored 3D rotateY book-open tilt (+18deg left, -18deg right) under one
+  shared stage perspective, with box-shadows falling outward from the tilt.
+  A pill badge spring-pops at each card's inner edge (left then right, the
+  one sanctioned overshoot, kept small), then the pair holds with a
+  barely-there phase-opposed idle float and settles dead still. Card bodies
+  are content slots with token skeleton defaults.
+
+  Realizes the comparison-split blueprint's signature move as its own unit
+  and resolves the blueprint's name collision (Wave J2, J2-10).
+
+  Slots (see README.md for a worked example):
+    - [data-slot="card-a"]: left card body. Replace the children of this
+      element in your installed copy. Default: a muted token wireframe.
+    - [data-slot="card-b"]: right card body. Same mechanism. Default: an
+      accent-tinted version of the wireframe.
+    Direct img/video children of a slot are sized to cover the slot area.
+
+  Variables (declared in data-composition-variables below):
+    - label_a (string, default "Before"): mono header on the left card.
+      Empty hides it.
+    - label_b (string, default "After"): mono header on the right card.
+      Empty hides it.
+    - badge_a (string, default "v1"): inner-edge pill on the left card.
+      Empty disables that badge pop.
+    - badge_b (string, default "v2"): inner-edge pill on the right card.
+      Empty disables that badge pop.
+    - accent (green | blue | violet, default green): right-card tint, right
+      badge, and right ambient glow. green maps to --brand, blue to
+      --accent, violet to --accent-2.
+    - exit (none | fade | up, default none): outgoing transition. none holds
+      the final frame (frame roots own transitions; holds end films).
+
+  Envelope (fixed IN/OUT, elastic HOLD only, never gsap.timeScale()):
+    IN       = 2.15s: left card lands 0 to 1.1s, right card 0.2 to 1.3s,
+               badge A pops at 1.45s, badge B at 1.75s (+0.40s spring)
+    HOLD     = elastic = max(0, D - (IN + OUT)); whole 2.0s idle-float
+               cycles fit inside HOLD minus a 0.30s closing stillness; each
+               cycle starts and ends at rest (explicit tweens, no
+               repeat/yoyo), left and right phase-opposed
+    OUT      = 0.50s when exit is fade or up, 0 when exit is none
+    If D < IN + OUT, IN and OUT scale down together so IN + OUT == D.
+
+  Sync points (fixed offsets inside IN, never in elastic HOLD): badge-pop-a
+  lands at 1.85s, badge-pop-b at 2.15s.
+
+  Sound cue: dispatches a bubbling `hf:sfx` CustomEvent with id
+  "badge-pop-soft" at each badge landing. This primitive never plays audio.
+
+  Mount contract: MOUNTABLE SUB-COMPOSITION. The runtime clones only
+  <template> contents; #root fills the host box (inset:0, container-type:
+  size), has no data-width/data-height, and registers one paused timeline
+  under the literal "split-tilt-cards" key (mount flattening strips
+  data-composition-id from the live root). Variables come from
+  window.__hyperframes.getVariables().
+-->
+<html
+  lang="en"
+  data-composition-id="split-tilt-cards"
+  data-composition-duration="4.5"
+  data-composition-variables='[
+    { "id": "label_a", "type": "string", "role": "content", "label": "Left label", "description": "Mono header on the left card. Blank hides it.", "default": "Before" },
+    { "id": "label_b", "type": "string", "role": "content", "label": "Right label", "description": "Mono header on the right card. Blank hides it.", "default": "After" },
+    { "id": "badge_a", "type": "string", "role": "content", "label": "Left badge", "description": "Pill badge that spring-pops at the left card inner edge. Blank disables it.", "default": "v1" },
+    { "id": "badge_b", "type": "string", "role": "content", "label": "Right badge", "description": "Pill badge that spring-pops at the right card inner edge. Blank disables it.", "default": "v2" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Right-card tint, right badge, and right ambient glow color.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Outgoing transition. None holds the final spread.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Split Tilt Cards</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="split-tilt-cards" data-duration="4.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          /* Root fills the host-owned box. Internal measurements use cqw/cqh
+             and every painted color comes from a contract token. */
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            background: var(--bg, #0b1016);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .stc-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+          }
+
+          /* Two faint ambient side glows: each wing owns a color identity
+             across the 50% symmetry axis. Static by design. */
+          .stc-clip::before,
+          .stc-clip::after {
+            content: "";
+            position: absolute;
+            top: 14cqh;
+            width: 52cqw;
+            height: 72cqh;
+            border-radius: 50%;
+            filter: blur(6cqmin);
+            pointer-events: none;
+          }
+
+          .stc-clip::before {
+            left: 2cqw;
+            background: radial-gradient(
+              ellipse at 50% 50%,
+              color-mix(in srgb, var(--muted, #94a3b8) 11%, transparent) 0%,
+              transparent 70%
+            );
+          }
+
+          .stc-clip::after {
+            right: 2cqw;
+            background: radial-gradient(
+              ellipse at 50% 50%,
+              color-mix(in srgb, var(--stc-accent, #22c55e) 13%, transparent) 0%,
+              transparent 70%
+            );
+          }
+
+          /* One shared perspective so both tilts converge on the same
+             vanishing point; wings and floats preserve 3D so the card
+             rotateY reads through their own gsap transforms. */
+          .stc-stage {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: var(--space-3, 5cqw);
+            align-items: center;
+            justify-items: center;
+            padding: 0 8cqw;
+            perspective: 120cqw;
+          }
+
+          /* No opacity (or other grouping property) may ever land on the
+             wing/float/stage chain: it forces transform-style flat and
+             squashes the card rotateY. Fades ride the cards and the clip. */
+          .stc-wing {
+            position: relative;
+            width: 100%;
+            max-width: 38cqw;
+            height: 58cqh;
+            transform-style: preserve-3d;
+            will-change: transform;
+          }
+
+          .stc-float {
+            position: absolute;
+            inset: 0;
+            transform-style: preserve-3d;
+            will-change: transform;
+          }
+
+          .stc-card {
+            position: absolute;
+            inset: 0;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+            padding: var(--space-3, 3.6cqh) var(--space-3, 2.4cqw);
+            border: 0.16cqw solid var(--border, #334155);
+            border-radius: var(--radius, 2.4cqmin);
+            background: color-mix(in srgb, var(--surface, #172033) 90%, var(--bg, #0b1016));
+            will-change: opacity;
+          }
+
+          /* Static book-open tilts: +18deg left, -18deg right, with the
+             box-shadow falling outward from the tilt (left shadow right,
+             right shadow left). The tilt is carried, never tweened. */
+          .stc-card-a {
+            transform: rotateY(18deg);
+            box-shadow: 2.4cqw 3cqh 7cqh color-mix(in srgb, var(--bg, #0b1016) 52%, transparent);
+          }
+
+          .stc-card-b {
+            transform: rotateY(-18deg);
+            border-color: color-mix(
+              in srgb,
+              var(--stc-accent, #22c55e) 46%,
+              var(--border, #334155)
+            );
+            background: color-mix(in srgb, var(--surface, #172033) 88%, var(--stc-accent, #22c55e));
+            box-shadow: -2.4cqw 3cqh 7cqh color-mix(in srgb, var(--bg, #0b1016) 52%, transparent);
+          }
+
+          .stc-label {
+            flex: 0 0 auto;
+            margin-bottom: var(--space-2, 2.4cqh);
+            color: var(--muted, #94a3b8);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            font-size: min(2.1cqw, 3.4cqh);
+            font-weight: 600;
+            letter-spacing: 0.12em;
+            line-height: 1;
+            text-transform: uppercase;
+            white-space: nowrap;
+          }
+
+          .stc-card-b .stc-label {
+            color: color-mix(in srgb, var(--stc-accent, #22c55e) 72%, var(--fg, #f8fafc));
+          }
+
+          .stc-label:empty {
+            display: none;
+          }
+
+          .stc-slot {
+            position: relative;
+            flex: 1 1 auto;
+            min-height: 0;
+            overflow: hidden;
+            border-radius: calc(var(--radius, 2.4cqmin) * 0.6);
+          }
+
+          /* Caller-supplied media covers its slot edge to edge. */
+          .stc-slot > img,
+          .stc-slot > video {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+          }
+
+          /* Token-styled default slot content: a wireframe that reads muted
+             on the left card and accent-tinted on the right. Callers
+             replacing slot children never see any of this. */
+          .stc-default {
+            position: absolute;
+            inset: 0;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            padding: var(--space-2, 2cqh) var(--space-1, 1cqw);
+          }
+
+          .stc-bar {
+            width: 42%;
+            height: 4cqh;
+            margin-bottom: var(--space-2, 2.6cqh);
+            border-radius: 1.2cqh;
+            background: var(--muted, #94a3b8);
+            opacity: 0.5;
+          }
+
+          .stc-line {
+            height: 2.2cqh;
+            margin-bottom: var(--space-1, 1.8cqh);
+            border-radius: 1.1cqh;
+            background: var(--muted, #94a3b8);
+            opacity: 0.38;
+          }
+
+          .stc-line:nth-of-type(2) {
+            width: 88%;
+          }
+
+          .stc-line:nth-of-type(3) {
+            width: 64%;
+          }
+
+          .stc-line:nth-of-type(4) {
+            width: 42%;
+          }
+
+          .stc-card-b .stc-bar {
+            background: var(--stc-accent, #22c55e);
+            opacity: 0.9;
+          }
+
+          .stc-card-b .stc-line {
+            background: color-mix(in srgb, var(--stc-accent, #22c55e) 62%, var(--fg, #f8fafc));
+            opacity: 0.66;
+          }
+
+          /* Badge positioners own the inner-edge placement (CSS translate);
+             gsap scales only the inner pill, so the two transforms never
+             collide on one element. */
+          .stc-badge-pos {
+            position: absolute;
+            top: 50%;
+            z-index: 3;
+            display: flex;
+          }
+
+          .stc-badge-pos-a {
+            right: 0;
+            transform: translate(32%, -50%);
+          }
+
+          .stc-badge-pos-b {
+            left: 0;
+            transform: translate(-32%, -50%);
+          }
+
+          .stc-badge {
+            padding: var(--space-1, 1.4cqh) var(--space-2, 1.8cqw);
+            border: 0.16cqw solid var(--border, #334155);
+            border-radius: 999cqw;
+            background: color-mix(in srgb, var(--surface, #172033) 82%, var(--bg, #0b1016));
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            font-size: min(2.2cqw, 3.6cqh);
+            font-weight: 600;
+            letter-spacing: 0.04em;
+            line-height: 1;
+            white-space: nowrap;
+            will-change: transform, opacity;
+          }
+
+          .stc-badge-b {
+            border-color: color-mix(
+              in srgb,
+              var(--stc-accent, #22c55e) 62%,
+              var(--border, #334155)
+            );
+            background: color-mix(in srgb, var(--stc-accent, #22c55e) 26%, var(--surface, #172033));
+          }
+        </style>
+
+        <div
+          id="split-tilt-cards-clip"
+          class="stc-clip clip"
+          data-start="0"
+          data-duration="4.5"
+          data-track-index="0"
+        >
+          <div class="stc-stage">
+            <div class="stc-wing stc-wing-a">
+              <div class="stc-float stc-float-a">
+                <section class="stc-card stc-card-a" aria-label="Left card">
+                  <div class="stc-label stc-label-a"></div>
+                  <div class="stc-slot" data-slot="card-a">
+                    <!-- SLOT "card-a": replace the children of this element
+                         with your own content (img, video, or HTML). -->
+                    <div class="stc-default" aria-hidden="true">
+                      <div class="stc-bar"></div>
+                      <div class="stc-line"></div>
+                      <div class="stc-line"></div>
+                      <div class="stc-line"></div>
+                    </div>
+                  </div>
+                </section>
+                <div class="stc-badge-pos stc-badge-pos-a">
+                  <div class="stc-badge stc-badge-a"></div>
+                </div>
+              </div>
+            </div>
+
+            <div class="stc-wing stc-wing-b">
+              <div class="stc-float stc-float-b">
+                <section class="stc-card stc-card-b" aria-label="Right card">
+                  <div class="stc-label stc-label-b"></div>
+                  <div class="stc-slot" data-slot="card-b">
+                    <!-- SLOT "card-b": replace the children of this element
+                         with your own content (img, video, or HTML). -->
+                    <div class="stc-default" aria-hidden="true">
+                      <div class="stc-bar"></div>
+                      <div class="stc-line"></div>
+                      <div class="stc-line"></div>
+                      <div class="stc-line"></div>
+                    </div>
+                  </div>
+                </section>
+                <div class="stc-badge-pos stc-badge-pos-b">
+                  <div class="stc-badge stc-badge-b"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            // Literal id: mount flattening strips data-composition-id from the
+            // live root before this timeline registers.
+            var compositionId = "split-tilt-cards";
+            var clip = root.querySelector(".stc-clip");
+            var wingA = root.querySelector(".stc-wing-a");
+            var cardA = root.querySelector(".stc-card-a");
+            var cardB = root.querySelector(".stc-card-b");
+            var wingB = root.querySelector(".stc-wing-b");
+            var floatA = root.querySelector(".stc-float-a");
+            var floatB = root.querySelector(".stc-float-b");
+            var labelA = root.querySelector(".stc-label-a");
+            var labelB = root.querySelector(".stc-label-b");
+            var badgeA = root.querySelector(".stc-badge-a");
+            var badgeB = root.querySelector(".stc-badge-b");
+            var badgePosA = root.querySelector(".stc-badge-pos-a");
+            var badgePosB = root.querySelector(".stc-badge-pos-b");
+
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var labelAText = vars.label_a == null ? "Before" : String(vars.label_a);
+            var labelBText = vars.label_b == null ? "After" : String(vars.label_b);
+            var badgeAText = vars.badge_a == null ? "v1" : String(vars.badge_a);
+            var badgeBText = vars.badge_b == null ? "v2" : String(vars.badge_b);
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #22c55e)",
+              blue: "var(--accent, #38bdf8)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            // INVARIANT: only none | fade | up reaches the timeline.
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            labelA.textContent = labelAText;
+            labelB.textContent = labelBText;
+            badgeA.textContent = badgeAText;
+            badgeB.textContent = badgeBText;
+            if (badgeAText === "") badgePosA.style.display = "none";
+            if (badgeBText === "") badgePosB.style.display = "none";
+            root.style.setProperty("--stc-accent", accentColors[accent]);
+
+            // RETIME RANGE: fixed IN and OUT scale together only when D is too
+            // short. HOLD is the sole elastic phase. Never use timeScale().
+            var CARD_DUR_BASE = 1.1;
+            var CARD_B_DELAY_BASE = 0.2;
+            var FADE_DUR_BASE = 0.5;
+            var BADGE_A_AT_BASE = 1.45;
+            var BADGE_B_AT_BASE = 1.75;
+            var BADGE_DUR_BASE = 0.4;
+            var IN_BASE = BADGE_B_AT_BASE + BADGE_DUR_BASE;
+            var OUT_BASE = exit === "none" ? 0 : 0.5;
+            var STILLNESS = 0.3;
+            var FLOAT_CYCLE = 2.0;
+
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4.5"));
+            var totalBase = IN_BASE + OUT_BASE;
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var OUT_START = IN + HOLD;
+
+            function fireSfx(id, t) {
+              root.dispatchEvent(
+                new CustomEvent("hf:sfx", { detail: { id: id, t: t }, bubbles: true }),
+              );
+            }
+
+            // Explicit both-endpoints state makes tl.seek(0) deterministic.
+            // Fades ride the cards and the clip, never the wing/float/stage
+            // chain: opacity there would flatten the 3D tilt.
+            gsap.set(clip, { opacity: 1, y: 0 });
+            gsap.set(wingA, { x: "-26cqw", scale: 0.85 });
+            gsap.set(wingB, { x: "26cqw", scale: 0.85 });
+            gsap.set([cardA, cardB], { opacity: 0 });
+            gsap.set([floatA, floatB], { y: "0cqh" });
+            gsap.set([badgeA, badgeB], { opacity: 0, scale: 0 });
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: mirrored opposite-wing entries, right ~0.2s behind, each
+            // carrying its static book-open tilt; only x/scale/opacity move.
+            [
+              { wing: wingA, card: cardA, at: 0 },
+              { wing: wingB, card: cardB, at: CARD_B_DELAY_BASE * scale },
+            ].forEach(function (entry) {
+              tl.to(
+                entry.card,
+                { opacity: 1, duration: 0.5 * scale, ease: "power2.out" },
+                entry.at,
+              );
+              tl.to(
+                entry.wing,
+                { x: "0cqw", duration: CARD_DUR_BASE * scale, ease: "power3.out" },
+                entry.at,
+              );
+              tl.to(
+                entry.wing,
+                { scale: 1, duration: CARD_DUR_BASE * scale, ease: "power3.out" },
+                entry.at,
+              );
+            });
+
+            // Badges: the one sanctioned overshoot, kept small. Left lands
+            // first, right ~0.3s behind, both inside fixed IN.
+            [
+              { badge: badgeA, text: badgeAText, at: BADGE_A_AT_BASE * scale },
+              { badge: badgeB, text: badgeBText, at: BADGE_B_AT_BASE * scale },
+            ].forEach(function (pop) {
+              if (pop.text === "") return;
+              tl.to(
+                pop.badge,
+                { opacity: 1, scale: 1, duration: BADGE_DUR_BASE * scale, ease: "back.out(1.9)" },
+                pop.at,
+              );
+              var land = pop.at + BADGE_DUR_BASE * scale;
+              tl.call(
+                function () {
+                  fireSfx("badge-pop-soft", land);
+                },
+                [],
+                land,
+              );
+            });
+
+            // HOLD: phase-opposed barely-there idle float. Only whole cycles
+            // fit; each is authored as explicit half-cycle tweens (never
+            // repeat/yoyo) so every cycle starts and ends at rest, and the
+            // closing STILLNESS window stays dead still.
+            var floatWindow = Math.max(0, HOLD - STILLNESS);
+            var cycles = Math.floor(floatWindow / FLOAT_CYCLE);
+            var half = FLOAT_CYCLE / 2;
+            for (var i = 0; i < cycles; i += 1) {
+              var t0 = IN + i * FLOAT_CYCLE;
+              tl.to(floatA, { y: "-0.6cqh", duration: half, ease: "sine.inOut" }, t0);
+              tl.to(floatA, { y: "0cqh", duration: half, ease: "sine.inOut" }, t0 + half);
+              tl.to(floatB, { y: "0.6cqh", duration: half, ease: "sine.inOut" }, t0);
+              tl.to(floatB, { y: "0cqh", duration: half, ease: "sine.inOut" }, t0 + half);
+            }
+
+            // OUT: only when the exit variable asks for one; exit none holds
+            // the final spread (frame roots own transitions).
+            if (exit !== "none") {
+              tl.to(
+                clip,
+                { opacity: 0, duration: FADE_DUR_BASE * scale, ease: "power2.in" },
+                OUT_START,
+              );
+              if (exit === "up") {
+                tl.to(
+                  clip,
+                  { y: "-6cqh", duration: FADE_DUR_BASE * scale, ease: "power2.in" },
+                  OUT_START,
+                );
+              }
+            }
+
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/spotlight-card/demo.html b/registry/components/spotlight-card/demo.html
new file mode 100644
index 0000000000..73305ef7b1
--- /dev/null
+++ b/registry/components/spotlight-card/demo.html
@@ -0,0 +1,192 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Spotlight Card - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+        transform: scale(1.65);
+        transform-origin: center center;
+      }
+      .hf-remocn-spotlight-card {
+        --hf-accent: var(--accent, #18181b);
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-spotlight-card {
+        position: relative;
+        width: 760px;
+        height: 428px;
+        overflow: hidden;
+        border-radius: 30px;
+        background: #080b12;
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+      }
+      .hf-remocn-spotlight-card .mesh {
+        position: absolute;
+        inset: -22%;
+        filter: blur(44px);
+        opacity: 0.88;
+        background:
+          radial-gradient(
+            circle at var(--hf-x1, 20%) var(--hf-y1, 30%),
+            rgba(255, 255, 255, 0.45) 0 18%,
+            transparent 32%
+          ),
+          radial-gradient(
+            circle at var(--hf-x2, 76%) var(--hf-y2, 52%),
+            rgba(255, 255, 255, 0.18) 0 16%,
+            transparent 34%
+          ),
+          radial-gradient(
+            circle at var(--hf-x3, 46%) var(--hf-y3, 78%),
+            rgba(255, 255, 255, 0.08) 0 18%,
+            transparent 34%
+          );
+      }
+      .hf-remocn-spotlight-card .card {
+        position: absolute;
+        inset: 74px 92px;
+        border: 1px solid rgba(255, 255, 255, 0.16);
+        border-radius: 26px;
+        background: rgba(255, 255, 255, 0.08);
+        color: #fff;
+        display: grid;
+        place-items: center;
+        text-align: center;
+        overflow: hidden;
+      }
+      .hf-remocn-spotlight-card .spot {
+        position: absolute;
+        width: 260px;
+        height: 260px;
+        border-radius: 50%;
+        background: radial-gradient(circle, rgba(255, 255, 255, 0.5), transparent 65%);
+        transform: translate(var(--hf-spot-x, 0px), var(--hf-spot-y, 0px));
+        mix-blend-mode: screen;
+      }
+      .hf-remocn-spotlight-card .particle {
+        position: absolute;
+        left: 50%;
+        top: 54%;
+        width: 12px;
+        height: 20px;
+        border-radius: 3px;
+        background: var(--c);
+        transform: translate(var(--hf-px, 0px), var(--hf-py, 0px)) rotate(var(--hf-pr, 0deg));
+        opacity: var(--hf-po, 0);
+      }
+      .hf-remocn-spotlight-card h3 {
+        margin: 0;
+        font-size: 44px;
+        letter-spacing: -0.04em;
+      }
+      .hf-remocn-spotlight-card p {
+        margin: 8px 0 0;
+        font-size: 18px;
+        color: rgba(255, 255, 255, 0.7);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="spotlight-card-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-spotlight-card">
+          <div class="mesh"></div>
+          <div class="card">
+            <div class="spot"></div>
+            <div>
+              <h3>Spotlight Card</h3>
+              <p>A card with a scripted cursor spotlight and lit border.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-spotlight-card .mesh",
+          {
+            "--hf-x1": "18%",
+            "--hf-y1": "28%",
+            "--hf-x2": "78%",
+            "--hf-y2": "46%",
+            "--hf-x3": "44%",
+            "--hf-y3": "80%",
+          },
+          {
+            "--hf-x1": "34%",
+            "--hf-y1": "42%",
+            "--hf-x2": "62%",
+            "--hf-y2": "60%",
+            "--hf-x3": "58%",
+            "--hf-y3": "64%",
+            duration: 4,
+            ease: "sine.inOut",
+          },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-spotlight-card .spot",
+          { "--hf-spot-x": "-120px", "--hf-spot-y": "-70px" },
+          { "--hf-spot-x": "190px", "--hf-spot-y": "90px", duration: 3, ease: "sine.inOut" },
+          startTime,
+        );
+        const particles_spotlight_card = gsap.utils.toArray(".hf-remocn-spotlight-card .particle");
+        if (particles_spotlight_card.length) {
+          tl.fromTo(
+            particles_spotlight_card,
+            { "--hf-po": 0, "--hf-px": "0px", "--hf-py": "0px", "--hf-pr": "0deg" },
+            {
+              "--hf-po": 1,
+              "--hf-px": (i) => Math.cos(i * 0.83) * 250 + "px",
+              "--hf-py": (i) => -120 - Math.sin(i * 0.61) * 120 + "px",
+              "--hf-pr": (i) => 180 + i * 37 + "deg",
+              duration: 0.8,
+              stagger: 0.015,
+              ease: "power2.out",
+            },
+            startTime + 0.2,
+          );
+        }
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["spotlight-card-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/spotlight-card/registry-item.json b/registry/components/spotlight-card/registry-item.json
new file mode 100644
index 0000000000..602e068f11
--- /dev/null
+++ b/registry/components/spotlight-card/registry-item.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "spotlight-card",
+  "type": "hyperframes:component",
+  "title": "Spotlight Card",
+  "description": "A card with a scripted cursor spotlight and lit border.",
+  "tags": ["effect", "remocn-port"],
+  "files": [
+    {
+      "path": "spotlight-card.html",
+      "target": "compositions/components/spotlight-card.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/spotlight-card.png"
+  }
+}
diff --git a/registry/components/spotlight-card/spotlight-card.html b/registry/components/spotlight-card/spotlight-card.html
new file mode 100644
index 0000000000..24b96325f4
--- /dev/null
+++ b/registry/components/spotlight-card/spotlight-card.html
@@ -0,0 +1,105 @@
+<!--
+  Spotlight Card - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-spotlight-card">
+  <div class="mesh"></div>
+  <div class="card">
+    <div class="spot"></div>
+    <div>
+      <h3>Spotlight Card</h3>
+      <p>A card with a scripted cursor spotlight and lit border.</p>
+    </div>
+  </div>
+</div>
+
+<style>
+  .hf-remocn-spotlight-card {
+    --hf-accent: var(--accent, #18181b);
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-spotlight-card {
+    position: relative;
+    width: 760px;
+    height: 428px;
+    overflow: hidden;
+    border-radius: 30px;
+    background: #080b12;
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+  }
+  .hf-remocn-spotlight-card .mesh {
+    position: absolute;
+    inset: -22%;
+    filter: blur(44px);
+    opacity: 0.88;
+    background:
+      radial-gradient(
+        circle at var(--hf-x1, 20%) var(--hf-y1, 30%),
+        rgba(255, 255, 255, 0.45) 0 18%,
+        transparent 32%
+      ),
+      radial-gradient(
+        circle at var(--hf-x2, 76%) var(--hf-y2, 52%),
+        rgba(255, 255, 255, 0.18) 0 16%,
+        transparent 34%
+      ),
+      radial-gradient(
+        circle at var(--hf-x3, 46%) var(--hf-y3, 78%),
+        rgba(255, 255, 255, 0.08) 0 18%,
+        transparent 34%
+      );
+  }
+  .hf-remocn-spotlight-card .card {
+    position: absolute;
+    inset: 74px 92px;
+    border: 1px solid rgba(255, 255, 255, 0.16);
+    border-radius: 26px;
+    background: rgba(255, 255, 255, 0.08);
+    color: #fff;
+    display: grid;
+    place-items: center;
+    text-align: center;
+    overflow: hidden;
+  }
+  .hf-remocn-spotlight-card .spot {
+    position: absolute;
+    width: 260px;
+    height: 260px;
+    border-radius: 50%;
+    background: radial-gradient(circle, rgba(255, 255, 255, 0.5), transparent 65%);
+    transform: translate(var(--hf-spot-x, 0px), var(--hf-spot-y, 0px));
+    mix-blend-mode: screen;
+  }
+  .hf-remocn-spotlight-card .particle {
+    position: absolute;
+    left: 50%;
+    top: 54%;
+    width: 12px;
+    height: 20px;
+    border-radius: 3px;
+    background: var(--c);
+    transform: translate(var(--hf-px, 0px), var(--hf-py, 0px)) rotate(var(--hf-pr, 0deg));
+    opacity: var(--hf-po, 0);
+  }
+  .hf-remocn-spotlight-card h3 {
+    margin: 0;
+    font-size: 44px;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-spotlight-card p {
+    margin: 8px 0 0;
+    color: rgba(255, 255, 255, 0.7);
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-spotlight-card .mesh', { '--hf-x1': '18%', '--hf-y1': '28%', '--hf-x2': '78%', '--hf-y2': '46%', '--hf-x3': '44%', '--hf-y3': '80%' }, { '--hf-x1': '34%', '--hf-y1': '42%', '--hf-x2': '62%', '--hf-y2': '60%', '--hf-x3': '58%', '--hf-y3': '64%', duration: 4, ease: 'sine.inOut' }, startTime); tl.fromTo('.hf-remocn-spotlight-card .spot', { '--hf-spot-x': '-120px', '--hf-spot-y': '-70px' }, { '--hf-spot-x': '190px', '--hf-spot-y': '90px', duration: 3, ease: 'sine.inOut' }, startTime); const particles_spotlight_card = gsap.utils.toArray('.hf-remocn-spotlight-card .particle'); if (particles_spotlight_card.length) { tl.fromTo(particles_spotlight_card, { '--hf-po': 0, '--hf-px': '0px', '--hf-py': '0px', '--hf-pr': '0deg' }, { '--hf-po': 1, '--hf-px': (i) => (Math.cos(i * 0.83) * 250) + 'px', '--hf-py': (i) => (-120 - Math.sin(i * 0.61) * 120) + 'px', '--hf-pr': (i) => (180 + i * 37) + 'deg', duration: 0.8, stagger: 0.015, ease: 'power2.out' }, startTime + 0.2); }
+-->
diff --git a/registry/components/spring-pop/demo.html b/registry/components/spring-pop/demo.html
new file mode 100644
index 0000000000..1a5bfa3d34
--- /dev/null
+++ b/registry/components/spring-pop/demo.html
@@ -0,0 +1,100 @@
+<!doctype html>
+<!--
+  spring-pop demo. This standalone composition mounts spring-pop.html through
+  data-composition-src. Non-default values prove that all three variables
+  flow through the mount while the primitive remains sized by its host box.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Spring Pop Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #05070d);
+      }
+
+      #root {
+        --bg: #05070d;
+        --fg: #f8fafc;
+        --muted: #94a3b8;
+        --surface: #131b2e;
+        --border: #334155;
+        --brand: #22c55e;
+        --accent: #38bdf8;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-body: Inter, system-ui, sans-serif;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        --radius: 3cqmin;
+        --space-1: 1.2cqmin;
+        --space-2: 2.4cqmin;
+        --space-3: 4cqmin;
+        --dur-beat: 0.4s;
+        --ease-standard: cubic-bezier(0.215, 0.61, 0.355, 1);
+        --ease-emphasis: cubic-bezier(0.19, 1, 0.22, 1);
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(
+          ellipse at 50% 42%,
+          color-mix(in srgb, var(--surface) 92%, var(--accent)) 0%,
+          var(--bg) 70%
+        );
+      }
+
+      .mount-card {
+        width: 46%;
+        height: 36%;
+        left: 27%;
+        top: 32%;
+        container-type: size;
+        overflow: hidden;
+        border: 0.12cqmin solid color-mix(in srgb, var(--border) 72%, transparent);
+        border-radius: calc(var(--radius) * 1.35);
+        background: color-mix(in srgb, var(--surface) 76%, transparent);
+        box-shadow: 0 4cqh 10cqh color-mix(in srgb, var(--bg) 64%, transparent);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="spring-pop-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="2"
+      data-fps="30"
+    >
+      <div
+        id="spring-pop-mount"
+        class="mount-card clip"
+        data-composition-id="spring-pop"
+        data-composition-src="./spring-pop.html"
+        data-variable-values='{"overshoot":1.9,"fromScale":0.86,"text":"Just shipped"}'
+        data-start="0"
+        data-duration="2"
+        data-track-index="0"
+        data-width="883"
+        data-height="389"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["spring-pop-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/spring-pop/registry-item.json b/registry/components/spring-pop/registry-item.json
new file mode 100644
index 0000000000..4346156fb6
--- /dev/null
+++ b/registry/components/spring-pop/registry-item.json
@@ -0,0 +1,52 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "spring-pop",
+  "type": "hyperframes:component",
+  "title": "Spring Pop",
+  "description": "A badge pops in from a visible near-rest scale, overshoots full size once, and settles cleanly.",
+  "tags": ["motion-primitive", "effects", "spring", "overshoot", "pop", "reveal"],
+  "jobs": ["reveal"],
+  "family": "effects",
+  "profile": "burst",
+  "evidence": "Video Primitives v1 Easing section (--ease-overshoot: back.out(1.7), taste rules 4-5) + hyperframes-animation rules/spring-pop-entrance.md playful overshoot variation",
+  "syncPoints": [{ "id": "pop-settle", "phase": "in", "offset": 0.6 }],
+  "files": [
+    {
+      "path": "spring-pop.html",
+      "target": "compositions/components/spring-pop.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "overshoot",
+      "type": "number",
+      "role": "timing",
+      "label": "Overshoot",
+      "description": "Strength passed to the back.out entrance curve.",
+      "default": 1.7,
+      "min": 1.1,
+      "max": 2,
+      "step": 0.1
+    },
+    {
+      "id": "fromScale",
+      "type": "number",
+      "role": "timing",
+      "label": "Starting scale",
+      "description": "Scale at the start of the entrance.",
+      "default": 0.9,
+      "min": 0.8,
+      "max": 0.97,
+      "step": 0.01
+    },
+    {
+      "id": "text",
+      "type": "string",
+      "role": "content",
+      "label": "Label",
+      "description": "Text displayed inside the badge.",
+      "default": "New"
+    }
+  ]
+}
diff --git a/registry/components/spring-pop/spring-pop.html b/registry/components/spring-pop/spring-pop.html
new file mode 100644
index 0000000000..63f4ccc850
--- /dev/null
+++ b/registry/components/spring-pop/spring-pop.html
@@ -0,0 +1,195 @@
+<!doctype html>
+<!--
+  spring-pop: HyperFrames video primitive (effects / burst / reveal)
+
+  Concept: one badge arrives from scale 0.9 and opacity 0, passes slightly
+  beyond full size, then settles exactly at scale 1. One mechanic, one job:
+  revealing an element with a restrained, physical overshoot.
+
+  Compiled-from evidence: Video Primitives v1 build contract, Easing
+  vocabulary (--ease-overshoot = GSAP back.out(1.7), taste rules 4 and 5),
+  plus hyperframes-animation rules/spring-pop-entrance.md's playful
+  overshoot variation. This fills the gap left by spring-scale-in, whose
+  power3.out curve never overshoots.
+
+  Use when: a new badge, compact card, icon, or product detail deserves one
+  lively entrance. Keep it to the single element that earns emphasis.
+
+  Variables:
+    - overshoot (number, 1.1 to 2.0, default 1.7): the strength passed to
+      GSAP back.out(overshoot).
+    - fromScale (number, 0.8 to 0.97, default 0.9): the visible start scale.
+    - text (string, default "New"): the badge label.
+
+  Envelope: fixed 0.60s IN carries the complete pop, followed by a
+  deliberately still elastic HOLD. There is no OUT because this reveal
+  establishes the element's resting state. If duration is shorter than
+  0.60s, IN compresses to fit and HOLD becomes zero.
+
+  Sync point: pop-settle occurs at 0.60s into IN, scaled only when the full
+  duration is shorter than the fixed entrance. It never enters HOLD.
+
+  Sound: none. A parent scene may place a static cue at pop-settle.
+
+  Mount contract: the runtime clones only this template. #root fills the
+  host box, establishes the container query basis, has no data-width or
+  data-height, and registers one paused timeline under the hardcoded
+  spring-pop id.
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "overshoot", "type": "number", "role": "timing", "label": "Overshoot", "description": "Strength passed to the back.out entrance curve.", "default": 1.7, "min": 1.1, "max": 2, "step": 0.1 },
+    { "id": "fromScale", "type": "number", "role": "timing", "label": "Starting scale", "description": "Scale at the start of the entrance.", "default": 0.9, "min": 0.8, "max": 0.97, "step": 0.01 },
+    { "id": "text", "type": "string", "role": "content", "label": "Label", "description": "Text displayed inside the badge.", "default": "New" }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Spring Pop</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="spring-pop" data-duration="2" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .sp-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+          }
+
+          /* EDIT ZONE: badge proportions only. The centered 82cqw ceiling
+             reserves clearance for the overshoot at every allowed value. */
+          .sp-badge {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: var(--space-2, 2.4cqw);
+            min-width: 48cqw;
+            max-width: 82cqw;
+            min-height: 32cqh;
+            padding: var(--space-2, 2.4cqh) var(--space-3, 4cqw);
+            border: 0.18cqmin solid var(--border, #334155);
+            border-radius: var(--radius, 3cqmin);
+            background: var(--surface, #1e293b);
+            box-shadow: 0 2.4cqh 7cqh color-mix(in srgb, var(--bg, #0b1120) 42%, transparent);
+            transform-origin: 50% 50%;
+            will-change: transform, opacity;
+          }
+
+          .sp-dot {
+            flex: 0 0 auto;
+            width: 3.2cqmin;
+            aspect-ratio: 1;
+            border-radius: 50%;
+            background: var(--brand, #22c55e);
+            box-shadow: 0 0 2.4cqmin color-mix(in srgb, var(--brand, #22c55e) 58%, transparent);
+          }
+
+          .sp-label {
+            min-width: 0;
+            overflow: hidden;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: clamp(14px, 9cqmin, 54px);
+            font-weight: 720;
+            line-height: 1.2;
+            letter-spacing: -0.02em;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+        </style>
+
+        <div
+          id="spring-pop-clip"
+          class="sp-clip clip"
+          data-start="0"
+          data-duration="2"
+          data-track-index="0"
+        >
+          <div class="sp-badge">
+            <span class="sp-dot" aria-hidden="true"></span>
+            <span class="sp-label"></span>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var badge = root.querySelector(".sp-badge");
+            var label = root.querySelector(".sp-label");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            // INVARIANT: invalid numeric overrides return to declared
+            // defaults. Explicit finite checks preserve every valid value.
+            var overshootValue = vars.overshoot;
+            var fromScaleValue = vars.fromScale;
+            var overshoot = Number.isFinite(overshootValue)
+              ? Math.max(1.1, Math.min(2, overshootValue))
+              : 1.7;
+            var fromScale = Number.isFinite(fromScaleValue)
+              ? Math.max(0.8, Math.min(0.97, fromScaleValue))
+              : 0.9;
+            var text = vars.text == null ? "New" : String(vars.text);
+
+            label.textContent = text;
+
+            // RETIME RANGE: tune only the fixed entrance length. HOLD is
+            // deliberately still, and this reveal has no exit phase.
+            var IN_BASE = 0.6;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "2"));
+            var IN = Math.min(IN_BASE, duration);
+            var OPACITY_IN = Math.min(0.3, IN);
+
+            var tl = gsap.timeline({ paused: true });
+
+            // --ease-overshoot: the back curve owns the only scale arc. The
+            // start is 0.9 by default, never 0, so the badge does not appear
+            // from nothing. Opacity uses its own non-overshooting ease.
+            tl.fromTo(
+              badge,
+              { scale: fromScale },
+              { scale: 1, duration: IN, ease: "back.out(" + overshoot + ")" },
+              0,
+            );
+            tl.fromTo(
+              badge,
+              { opacity: 0 },
+              { opacity: 1, duration: OPACITY_IN, ease: "power2.out" },
+              0,
+            );
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines["spring-pop"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/spring-stack-shuffle/README.md b/registry/components/spring-stack-shuffle/README.md
new file mode 100644
index 0000000000..9bc972d173
--- /dev/null
+++ b/registry/components/spring-stack-shuffle/README.md
@@ -0,0 +1,105 @@
+# spring-stack-shuffle
+
+A stack of 3 to 5 cards reshuffles on cues: on each cue the card at the back
+throws over the top of the stack and lands at the front with real mass (one
+small sanctioned landing overshoot, quiet register), while the other cards
+step one slot deeper and take a brief compress-resettle as the flyer lands.
+An accent ring rides the active (front) card across every shuffle.
+
+The signature is law L1, interruptible springs: when a cue fires while a
+previous shuffle is still in flight, every moving card redirects to its new
+slot from its current position at its current velocity. No snap-to-zero, no
+pop. The default cue rhythm (`0.9, 1.7, 1.95`) fires its third cue mid-throw
+of the second on purpose, so the redirect is part of the authored default
+choreography.
+
+The redirect is not a physics simulation: motion compiles at mount into
+per-card segment lists (explicit endpoints, pure ease functions). A cue that
+interrupts a segment cuts it analytically (value from the ease curve,
+velocity from a fixed finite difference) and continues with a Hermite ease
+whose start slope equals the cut velocity. Every emitted tween is a `fromTo`
+with both endpoints authored, so seeks in either direction always reproduce
+the same frame.
+
+## Files
+
+- `spring-stack-shuffle.html`: the mountable sub-composition (install target:
+  `compositions/components/spring-stack-shuffle.html`).
+- `registry-item.json`: registry metadata and the variables block.
+- `demo.html`: standalone 1920x1080 host mounting the primitive with
+  non-default variables.
+
+## Variables
+
+| id       | type   | default          | notes                                                                     |
+| -------- | ------ | ---------------- | ------------------------------------------------------------------------- |
+| `cards`  | number | `4`              | stack size, clamped to 3..5                                               |
+| `cues`   | string | `0.9, 1.7, 1.95` | comma seconds from mount start, one shuffle per cue; empty keeps default  |
+| `accent` | enum   | `green`          | `green` maps to `--brand`, `blue` to `--accent`, `violet` to `--accent-2` |
+| `exit`   | enum   | `none`           | `none` holds the settled stack; `fade` and `up` release the stage         |
+
+Cues are clamped into `[0.85, D - exit - 0.9]` so every throw lands before an
+exit begins. Cues closer together than a throw (0.85s) interrupt the flight;
+that is the point, not an error. Envelope: staggered entrances finish by
+~0.8s, HOLD is the only elastic phase, OUT is 0.45s only when `exit` is
+`fade` or `up`.
+
+## The slot mechanism
+
+The primitive ships five named slot panels inside its `<template>`, one per
+card, front to back at mount:
+
+```html
+<div class="sss-slot" data-slot="card-1">...</div>
+...
+<div class="sss-slot" data-slot="card-5">...</div>
+```
+
+Each slot's default children are a numbered token skeleton card, so an
+untouched mount still reads as a tasteful shuffle. To show your own content,
+install the component and **replace the children of each `[data-slot]`
+element in your installed copy** (the runtime clones only the primitive's own
+template on mount, so slot content lives in the component file, not on the
+host clip). Slots beyond the `cards` count are removed at mount.
+
+Rules:
+
+- Direct `img`/`video` children are automatically sized to cover the card
+  (`object-fit: cover`). Arbitrary HTML works too; size it in `cqw`/`cqh`.
+- Leave the `.sss-veil` and `.sss-ring` siblings alone; they are the
+  timeline-driven depth dim and active ring.
+
+## Worked example
+
+Install, then fill the slots with three screens and shuffle between them:
+
+```bash
+npx hyperframes add spring-stack-shuffle
+```
+
+In `compositions/components/spring-stack-shuffle.html`, replace each slot's
+default block:
+
+```html
+<div class="sss-slot" data-slot="card-1">
+  <img src="../../assets/screen-dashboard.png" alt="" />
+</div>
+```
+
+Mount it from a host composition like any sub-composition:
+
+```html
+<div
+  class="clip"
+  data-composition-id="spring-stack-shuffle"
+  data-composition-src="./components/spring-stack-shuffle.html"
+  data-variable-values='{"cards":3,"cues":"1.0, 1.9","accent":"blue"}'
+  data-start="2"
+  data-duration="4"
+  data-track-index="0"
+></div>
+```
+
+Two shuffles fire at 1.0s and 1.9s after mount; the second lands just as the
+first settles. Bring the cues within 0.85s of each other to see the L1
+redirect: the in-flight card bends to its new slot without ever stopping.
diff --git a/registry/components/spring-stack-shuffle/demo.html b/registry/components/spring-stack-shuffle/demo.html
new file mode 100644
index 0000000000..3243997629
--- /dev/null
+++ b/registry/components/spring-stack-shuffle/demo.html
@@ -0,0 +1,88 @@
+<!doctype html>
+<!--
+  spring-stack-shuffle demo. This standalone composition mounts the primitive
+  through data-composition-src. Non-default cards, cues, and accent prove the
+  variable path; the tight 1.5 / 1.75 cue pair keeps the L1 mid-flight
+  redirect inside the demo choreography.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Spring Stack Shuffle Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #0b0c0e);
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --muted: #94a3b8;
+        --surface: #14171c;
+        --border: #343a46;
+        --brand: #71f5a7;
+        --accent: #61a8ff;
+        --accent-2: #c5a3ff;
+        --font-body: Inter, system-ui, sans-serif;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 42%, #12151b 0%, var(--bg, #0b0c0e) 74%);
+      }
+
+      .mount-card {
+        position: absolute;
+        width: 62%;
+        height: 82%;
+        left: 19%;
+        top: 9%;
+        container-type: size;
+        overflow: hidden;
+        border-radius: 28px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="spring-stack-shuffle-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="spring-stack-shuffle-mount"
+        class="mount-card clip"
+        data-composition-id="spring-stack-shuffle"
+        data-composition-src="./spring-stack-shuffle.html"
+        data-variable-values='{"cards":5,"cues":"0.9, 1.5, 1.75, 2.6","accent":"violet"}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="1190"
+        data-height="886"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["spring-stack-shuffle-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/spring-stack-shuffle/registry-item.json b/registry/components/spring-stack-shuffle/registry-item.json
new file mode 100644
index 0000000000..6d08cf6690
--- /dev/null
+++ b/registry/components/spring-stack-shuffle/registry-item.json
@@ -0,0 +1,67 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "spring-stack-shuffle",
+  "type": "hyperframes:component",
+  "title": "Spring Stack Shuffle",
+  "description": "A stack of 3 to 5 slotted cards reshuffles on cues: the back card throws over the top and lands at the front with real mass, the rest compress and resettle; cues that land mid-flight redirect the moving cards with velocity preserved.",
+  "tags": ["motion-primitive", "product-demo", "physics", "stack", "interruptible-spring"],
+  "jobs": ["demonstrate"],
+  "family": "product-demo",
+  "profile": "stack",
+  "evidence": "Wave K K7: interruptible-spring stack from the X expert study demand slate; L1 redirect authored into the default cue rhythm",
+  "syncPoints": [{ "id": "first-landing", "phase": "in", "offset": 1.75 }],
+  "files": [
+    {
+      "path": "spring-stack-shuffle.html",
+      "target": "compositions/components/spring-stack-shuffle.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "cards",
+      "type": "number",
+      "role": "content",
+      "label": "Cards",
+      "description": "Number of cards in the stack, 3 to 5.",
+      "default": 4,
+      "min": 3,
+      "max": 5,
+      "step": 1
+    },
+    {
+      "id": "cues",
+      "type": "string",
+      "role": "timing",
+      "label": "Shuffle cues",
+      "description": "Comma-separated seconds from mount start; each cue throws the back card to the front. Cues inside a running throw redirect it mid-flight, velocity preserved. Empty keeps the default rhythm.",
+      "default": "0.9, 1.7, 1.95"
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Active-card ring color from the contract token map.",
+      "default": "green",
+      "options": [
+        { "value": "green", "label": "Green" },
+        { "value": "blue", "label": "Blue" },
+        { "value": "violet", "label": "Violet" }
+      ]
+    },
+    {
+      "id": "exit",
+      "type": "enum",
+      "role": "timing",
+      "label": "Exit",
+      "description": "Optional departure. Default none: the settled stack holds until the frame cuts.",
+      "default": "none",
+      "options": [
+        { "value": "none", "label": "None" },
+        { "value": "fade", "label": "Fade" },
+        { "value": "up", "label": "Up" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/spring-stack-shuffle/spring-stack-shuffle.html b/registry/components/spring-stack-shuffle/spring-stack-shuffle.html
new file mode 100644
index 0000000000..950a87bd9f
--- /dev/null
+++ b/registry/components/spring-stack-shuffle/spring-stack-shuffle.html
@@ -0,0 +1,607 @@
+<!doctype html>
+<!--
+  spring-stack-shuffle: HyperFrames video primitive (product demo / physics)
+
+  A stack of 3 to 5 cards reshuffles on cues: on each cue the card at the
+  back of the stack throws over the top and lands at the front with real
+  mass (small landing overshoot, the quiet register), while the other cards
+  step one slot deeper and give a brief compress-resettle as the flyer
+  lands.
+
+  SIGNATURE (law L1, interruptible springs): when a cue fires while a
+  previous shuffle is still in flight, every in-flight card REDIRECTS to
+  its new slot preserving its instantaneous velocity. No snap-to-zero, no
+  pop. The default cue rhythm (0.9, 1.7, 1.95) deliberately fires the third
+  cue mid-throw of the second so the redirect is part of the authored
+  choreography.
+
+  How the redirect stays deterministic and seek-safe: motion is compiled
+  at mount into per-card, per-property segment lists (explicit from/to and
+  a pure ease function each). A redirect cuts the covering segment
+  analytically (value from the ease, velocity from a fixed finite
+  difference), truncates it with a renormalized copy of the same curve, and
+  continues with a cubic Hermite ease whose start slope equals the cut
+  velocity and whose end slope is zero. Nothing simulates: every emitted
+  tween is a fromTo with both endpoints authored, so any seek in either
+  direction reproduces the same frame.
+
+  Slots (see README.md for a worked example):
+    - [data-slot="card-1"] ... [data-slot="card-5"]: card bodies, front to
+      back at mount. Replace the children of a slot in your installed copy.
+      Defaults: numbered token skeleton cards. Direct img/video children
+      cover the card area.
+
+  Variables (declared in data-composition-variables below):
+    - cards (number 3..5, default 4): how many cards are in the stack.
+    - cues (string, default "0.9, 1.7, 1.95"): comma-separated seconds,
+      relative to mount start; each cue fires one shuffle. Cues closer
+      together than a throw (0.85s) interrupt the flight and exercise the
+      L1 redirect. Empty keeps the authored default rhythm.
+    - accent (green | blue | violet, default green): active-card ring via
+      the contract token map.
+    - exit (none | fade | up, default none): frame roots own transitions;
+      holds end films.
+
+  Envelope, fixed IN and OUT with elastic HOLD only (never time-scaled):
+    IN    = staggered card entrances, back to front, done by ~0.8s
+    CUES  = clamped into [0.85, D - OUT - 0.9] so every throw lands before
+            any exit begins
+    HOLD  = still after the last landing bump settles
+    OUT   = 0s for exit none, otherwise 0.45s
+
+  Mount contract: MOUNTABLE SUB-COMPOSITION. The runtime clones only
+  <template> contents; #root fills the host box (inset:0, container-type:
+  size), has no data-width/data-height, and registers one paused timeline
+  under the literal "spring-stack-shuffle" key. Stack geometry is measured
+  in px from the mounted root once (cq-unit transform tweens are not
+  seek-safe); variables come from window.__hyperframes.getVariables().
+-->
+<html
+  lang="en"
+  data-composition-id="spring-stack-shuffle"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "cards", "type": "number", "role": "content", "label": "Cards", "description": "Number of cards in the stack, 3 to 5.", "default": 4, "min": 3, "max": 5, "step": 1 },
+    { "id": "cues", "type": "string", "role": "timing", "label": "Shuffle cues", "description": "Comma-separated seconds from mount start; each cue throws the back card to the front. Cues inside a running throw redirect it mid-flight, velocity preserved. Empty keeps the default rhythm.", "default": "0.9, 1.7, 1.95" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Active-card ring color from the contract token map.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the settled stack holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Spring Stack Shuffle</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="spring-stack-shuffle" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            background: var(--bg, #0b0c0e);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .sss-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+          }
+
+          .sss-stage {
+            position: absolute;
+            inset: 0;
+            will-change: transform, opacity;
+          }
+
+          .sss-card {
+            position: absolute;
+            left: 50%;
+            top: 58%;
+            width: 46cqw;
+            height: 42cqh;
+            margin-left: -23cqw;
+            margin-top: -21cqh;
+            border: 0.16cqmin solid var(--border, #343a46);
+            border-radius: var(--radius, 2.2cqmin);
+            background: var(--surface, #14171c);
+            box-shadow: 0 2.2cqh 6cqh color-mix(in srgb, var(--bg, #000000) 55%, transparent);
+            overflow: hidden;
+            will-change: transform, opacity;
+          }
+
+          /* Active-card ring: opacity is timeline-driven so the front card
+             reads as the live one across every shuffle. */
+          .sss-ring {
+            position: absolute;
+            inset: 0;
+            border: 0.4cqmin solid var(--sss-accent, #71f5a7);
+            border-radius: inherit;
+            opacity: 0;
+            pointer-events: none;
+            z-index: 3;
+          }
+
+          /* Depth veil: timeline-driven dim; deeper cards sit darker. */
+          .sss-veil {
+            position: absolute;
+            inset: 0;
+            background: var(--bg, #0b0c0e);
+            border-radius: inherit;
+            opacity: 0;
+            pointer-events: none;
+            z-index: 2;
+          }
+
+          .sss-slot {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            border-radius: inherit;
+          }
+
+          .sss-slot > img,
+          .sss-slot > video {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+          }
+
+          .sss-default {
+            position: absolute;
+            inset: 0;
+            padding: var(--space-3, 3.2cqmin);
+            display: flex;
+            flex-direction: column;
+            gap: var(--space-2, 2cqmin);
+          }
+
+          .sss-chip {
+            align-self: flex-start;
+            padding: 0.9cqmin 1.8cqmin;
+            border: 0.14cqmin solid var(--border, #343a46);
+            border-radius: 999cqmin;
+            color: var(--muted, #94a3b8);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            font-size: min(1.7cqw, 3cqh);
+            font-weight: 600;
+            letter-spacing: 0.08em;
+            line-height: 1;
+          }
+
+          .sss-bar {
+            width: 46%;
+            height: 8%;
+            border-radius: 999cqmin;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 22%, var(--surface, #14171c));
+          }
+
+          .sss-line {
+            width: 84%;
+            height: 5%;
+            border-radius: 999cqmin;
+            background: color-mix(in srgb, var(--muted, #94a3b8) 34%, var(--surface, #14171c));
+          }
+
+          .sss-line + .sss-line {
+            width: 70%;
+          }
+        </style>
+
+        <div
+          id="spring-stack-shuffle-clip"
+          class="sss-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="sss-stage">
+            <section class="sss-card" aria-label="Card 1">
+              <div class="sss-slot" data-slot="card-1">
+                <!-- SLOT "card-1": replace the children of this element with
+                     your own content (img, video, or HTML). -->
+                <div class="sss-default" aria-hidden="true">
+                  <div class="sss-chip">01</div>
+                  <div class="sss-bar"></div>
+                  <div class="sss-line"></div>
+                  <div class="sss-line"></div>
+                </div>
+              </div>
+              <div class="sss-veil"></div>
+              <div class="sss-ring"></div>
+            </section>
+            <section class="sss-card" aria-label="Card 2">
+              <div class="sss-slot" data-slot="card-2">
+                <!-- SLOT "card-2": replace the children of this element with
+                     your own content (img, video, or HTML). -->
+                <div class="sss-default" aria-hidden="true">
+                  <div class="sss-chip">02</div>
+                  <div class="sss-bar"></div>
+                  <div class="sss-line"></div>
+                  <div class="sss-line"></div>
+                </div>
+              </div>
+              <div class="sss-veil"></div>
+              <div class="sss-ring"></div>
+            </section>
+            <section class="sss-card" aria-label="Card 3">
+              <div class="sss-slot" data-slot="card-3">
+                <!-- SLOT "card-3": replace the children of this element with
+                     your own content (img, video, or HTML). -->
+                <div class="sss-default" aria-hidden="true">
+                  <div class="sss-chip">03</div>
+                  <div class="sss-bar"></div>
+                  <div class="sss-line"></div>
+                  <div class="sss-line"></div>
+                </div>
+              </div>
+              <div class="sss-veil"></div>
+              <div class="sss-ring"></div>
+            </section>
+            <section class="sss-card" aria-label="Card 4">
+              <div class="sss-slot" data-slot="card-4">
+                <!-- SLOT "card-4": replace the children of this element with
+                     your own content (img, video, or HTML). -->
+                <div class="sss-default" aria-hidden="true">
+                  <div class="sss-chip">04</div>
+                  <div class="sss-bar"></div>
+                  <div class="sss-line"></div>
+                  <div class="sss-line"></div>
+                </div>
+              </div>
+              <div class="sss-veil"></div>
+              <div class="sss-ring"></div>
+            </section>
+            <section class="sss-card" aria-label="Card 5">
+              <div class="sss-slot" data-slot="card-5">
+                <!-- SLOT "card-5": replace the children of this element with
+                     your own content (img, video, or HTML). -->
+                <div class="sss-default" aria-hidden="true">
+                  <div class="sss-chip">05</div>
+                  <div class="sss-bar"></div>
+                  <div class="sss-line"></div>
+                  <div class="sss-line"></div>
+                </div>
+              </div>
+              <div class="sss-veil"></div>
+              <div class="sss-ring"></div>
+            </section>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            // Literal id: mount flattening strips data-composition-id from
+            // the live root before this timeline registers.
+            var compositionId = "spring-stack-shuffle";
+            var stage = root.querySelector(".sss-stage");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            root.style.setProperty("--sss-accent", accentColors[accent]);
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            var cardCountRaw = Number(vars.cards);
+            var cardCount = Number.isFinite(cardCountRaw)
+              ? Math.max(3, Math.min(5, Math.round(cardCountRaw)))
+              : 4;
+            var cardEls = Array.prototype.slice.call(root.querySelectorAll(".sss-card"));
+            cardEls.slice(cardCount).forEach(function (el) {
+              el.remove();
+            });
+            cardEls = cardEls.slice(0, cardCount);
+
+            // Stack geometry in px measured once from the mounted root:
+            // cq-unit transform tweens are not seek-safe, px numbers are.
+            var rect = root.getBoundingClientRect();
+            var W = Math.max(1, rect.width);
+            var H = Math.max(1, rect.height);
+            var STEP_Y = -0.055 * H; // deeper cards peek above the front card
+            var STEP_S = 0.05;
+            var APEX_Y = STEP_Y * (cardCount - 1) - 0.09 * H; // arc above the stack
+            var KICK_X = 0.12 * W; // lateral kick during the throw
+            var BUMP_Y = 0.012 * H; // stack compress as the flyer lands
+
+            function poseFor(depth) {
+              return {
+                y: depth * STEP_Y,
+                s: 1 - depth * STEP_S,
+                veil: Math.min(0.5, depth * 0.15),
+              };
+            }
+
+            // RETIME RANGE: fixed IN and OUT; HOLD is the only elastic span.
+            var THROW = 0.85;
+            var RISE = THROW * 0.4;
+            var LAND = THROW * 0.6;
+            var SHIFT = 0.55;
+            var OUT = exit === "none" ? 0 : 0.45;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var OUT_START = duration - OUT;
+            var CUE_MIN = 0.85;
+            var CUE_MAX = Math.max(CUE_MIN, OUT_START - THROW - 0.05);
+
+            var cues = String(
+              vars.cues == null || String(vars.cues).trim() === "" ? "0.9, 1.7, 1.95" : vars.cues,
+            )
+              .split(",")
+              .map(function (token) {
+                return Number(token);
+              })
+              .filter(function (value) {
+                return Number.isFinite(value);
+              })
+              .map(function (value) {
+                return Math.min(CUE_MAX, Math.max(CUE_MIN, value));
+              })
+              .sort(function (a, b) {
+                return a - b;
+              });
+
+            /* Author-time motion compiler. A track is one (element, property)
+               pair holding non-overlapping segments; every segment is a pure
+               curve with explicit endpoints. cutAt() is the L1 primitive: it
+               evaluates value and velocity at the cut analytically, truncates
+               the covering segment to a renormalized copy of its own curve,
+               and drops everything later. redirect() continues from the cut
+               with a Hermite ease whose start slope IS the cut velocity. */
+            function easeFn(ease) {
+              return typeof ease === "function" ? ease : gsap.parseEase(ease);
+            }
+
+            function makeTrack(el, prop, initial) {
+              return { el: el, prop: prop, initial: initial, segs: [] };
+            }
+
+            function endValue(track) {
+              return track.segs.length > 0 ? track.segs[track.segs.length - 1].to : track.initial;
+            }
+
+            function cutAt(track, time) {
+              var segs = track.segs;
+              while (segs.length > 0 && segs[segs.length - 1].t0 >= time) segs.pop();
+              if (segs.length === 0) return { value: track.initial, velocity: 0 };
+              var last = segs[segs.length - 1];
+              if (last.t1 <= time) return { value: last.to, velocity: 0 };
+              var curve = easeFn(last.ease);
+              var span = last.t1 - last.t0;
+              var f = (time - last.t0) / span;
+              var lo = Math.max(0, f - 0.001);
+              var hi = Math.min(1, f + 0.001);
+              var slope = (curve(hi) - curve(lo)) / (hi - lo);
+              var progress = curve(f);
+              var value = last.from + (last.to - last.from) * progress;
+              var velocity = ((last.to - last.from) * slope) / span;
+              last.t1 = time;
+              last.to = value;
+              if (progress > 1e-6) {
+                last.ease = (function (fullCurve, cutFraction, cutProgress) {
+                  return function (u) {
+                    return fullCurve(u * cutFraction) / cutProgress;
+                  };
+                })(curve, f, progress);
+              }
+              return { value: value, velocity: velocity };
+            }
+
+            // Cubic Hermite: h(0)=0, h(1)=1, h'(0)=m, h'(1)=0. A hot start
+            // slope overshoots past the target and eases back, which is the
+            // spring read; the clamp keeps it in the quiet register (L2).
+            function hermite(m0) {
+              var m = Math.max(-4, Math.min(4, m0));
+              return function (u) {
+                return u * u * u * (m - 2) + u * u * (3 - 2 * m) + m * u;
+              };
+            }
+
+            var smooth = hermite(0); // smoothstep: zero slope both ends
+
+            // Landing ease: zero-slope start (ballistic hang at the apex),
+            // small overshoot past the target, zero-slope settle. C1 all the
+            // way through, pure function of progress.
+            function landEase(overshoot) {
+              return function (u) {
+                if (u < 0.62) {
+                  var a = u / 0.62;
+                  return (1 + overshoot) * a * a * (3 - 2 * a);
+                }
+                var b = (u - 0.62) / 0.38;
+                return 1 + overshoot - overshoot * b * b * (3 - 2 * b);
+              };
+            }
+
+            function addSeg(track, t0, dur, to, ease) {
+              track.segs.push({ t0: t0, t1: t0 + dur, from: endValue(track), to: to, ease: ease });
+            }
+
+            function redirect(track, time, dur, to) {
+              var cut = cutAt(track, time);
+              var delta = to - cut.value;
+              var ease = Math.abs(delta) < 1e-4 ? smooth : hermite((cut.velocity * dur) / delta);
+              track.segs.push({ t0: time, t1: time + dur, from: cut.value, to: to, ease: ease });
+            }
+
+            var powerOut = gsap.parseEase("power3.out");
+            var cards = cardEls.map(function (el, index) {
+              var pose = poseFor(index);
+              return {
+                el: el,
+                depth: index,
+                landing: null,
+                x: makeTrack(el, "x", 0),
+                y: makeTrack(el, "y", pose.y + 0.05 * H),
+                s: makeTrack(el, "s", pose.s * 0.985),
+                veil: makeTrack(el.querySelector(".sss-veil"), "veil", pose.veil),
+                ring: makeTrack(el.querySelector(".sss-ring"), "ring", 0),
+              };
+            });
+            var zEvents = [];
+
+            // IN: staggered entrances, back card first, front card last.
+            cards.forEach(function (card, index) {
+              var pose = poseFor(index);
+              var tIn = (cardCount - 1 - index) * 0.07;
+              addSeg(card.y, tIn, 0.5, pose.y, powerOut);
+              addSeg(card.s, tIn, 0.5, pose.s, powerOut);
+              if (index === 0) addSeg(card.ring, 0.45, 0.3, 0.9, smooth);
+            });
+
+            // SHUFFLES: one per cue. The back card throws over the top; the
+            // rest step one slot deeper. Any card still in flight when a cue
+            // fires is cut and redirected, velocity preserved (L1).
+            cues.forEach(function (cue) {
+              var back = cards.reduce(function (a, b) {
+                return b.depth > a.depth ? b : a;
+              });
+              cards.forEach(function (card) {
+                if (card.landing && card.landing.t > cue) card.landing.canceled = true;
+                card.landing = null;
+                card.depth = card === back ? 0 : card.depth + 1;
+                zEvents.push({
+                  t: cue,
+                  el: card.el,
+                  z: card === back ? 60 : 40 - card.depth,
+                  canceled: false,
+                });
+              });
+
+              cards.forEach(function (card) {
+                var pose = poseFor(card.depth);
+                if (card === back) {
+                  // Throw arc: velocity-matched rise to a ballistic apex,
+                  // then a landing with one small sanctioned overshoot.
+                  redirect(card.x, cue, RISE, KICK_X);
+                  addSeg(card.x, cue + RISE, LAND, 0, smooth);
+                  redirect(card.y, cue, RISE, APEX_Y);
+                  addSeg(card.y, cue + RISE, LAND, pose.y, landEase(0.06));
+                  redirect(card.s, cue, RISE, 1.05);
+                  addSeg(card.s, cue + RISE, LAND, pose.s, landEase(0.04));
+                  redirect(card.veil, cue, THROW, pose.veil);
+                  redirect(card.ring, cue, THROW, 0.9);
+                  var landing = { t: cue + THROW, el: card.el, z: 40, canceled: false };
+                  zEvents.push(landing);
+                  card.landing = landing;
+                } else {
+                  redirect(card.x, cue, SHIFT, 0);
+                  redirect(card.y, cue, SHIFT, pose.y);
+                  redirect(card.s, cue, SHIFT, pose.s);
+                  redirect(card.veil, cue, SHIFT, pose.veil);
+                  redirect(card.ring, cue, SHIFT, 0);
+                }
+              });
+
+              // Compress-resettle: the stack takes the flyer's weight.
+              cards.forEach(function (card) {
+                if (card === back) return;
+                var rest = endValue(card.y);
+                addSeg(card.y, cue + THROW - 0.05, 0.16, rest + BUMP_Y, smooth);
+                addSeg(card.y, cue + THROW + 0.11, 0.22, rest, smooth);
+              });
+            });
+
+            // EMIT: initial states, then every compiled segment as an
+            // explicit fromTo. Segments never overlap per track, both
+            // endpoints are authored, eases are pure functions: seek-safe.
+            var propFor = {
+              x: function (value) {
+                return { x: value };
+              },
+              y: function (value) {
+                return { y: value };
+              },
+              s: function (value) {
+                return { scale: value };
+              },
+              veil: function (value) {
+                return { opacity: value };
+              },
+              ring: function (value) {
+                return { opacity: value };
+              },
+            };
+
+            gsap.set(stage, { opacity: 1, y: 0 });
+            cards.forEach(function (card, index) {
+              gsap.set(card.el, { opacity: 0, zIndex: 40 - index });
+            });
+
+            var tl = gsap.timeline({ paused: true });
+
+            cards.forEach(function (card, index) {
+              var tIn = (cardCount - 1 - index) * 0.07;
+              tl.fromTo(
+                card.el,
+                { opacity: 0 },
+                { opacity: 1, duration: 0.4, ease: "power2.out" },
+                tIn,
+              );
+              ["x", "y", "s", "veil", "ring"].forEach(function (prop) {
+                var track = card[prop];
+                var toProps = propFor[prop];
+                gsap.set(track.el, toProps(track.initial));
+                track.segs.forEach(function (seg) {
+                  var dur = seg.t1 - seg.t0;
+                  if (dur < 1 / 120) {
+                    tl.set(track.el, toProps(seg.to), seg.t1);
+                    return;
+                  }
+                  var to = toProps(seg.to);
+                  to.duration = dur;
+                  to.ease = easeFn(seg.ease);
+                  tl.fromTo(track.el, toProps(seg.from), to, seg.t0);
+                });
+              });
+            });
+
+            zEvents.forEach(function (event) {
+              if (event.canceled) return;
+              tl.set(event.el, { zIndex: event.z }, event.t);
+            });
+
+            // HOLD: completely still after the last landing bump.
+
+            // OUT: optional departure; exit none holds until the frame cuts.
+            if (exit === "fade") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "up") {
+              tl.to(
+                stage,
+                { opacity: 0, y: -0.07 * H, duration: OUT, ease: "power2.in" },
+                OUT_START,
+              );
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/stagger-cascade/demo.html b/registry/components/stagger-cascade/demo.html
new file mode 100644
index 0000000000..41c76563a0
--- /dev/null
+++ b/registry/components/stagger-cascade/demo.html
@@ -0,0 +1,103 @@
+<!doctype html>
+<!--
+  stagger-cascade demo: standalone 1920x1080 host composition. It mounts the
+  primitive through data-composition-src into a definite card instead of
+  inlining primitive markup or motion. The non-default count, stagger, and
+  direction overrides prove that per-instance variables cross the mount.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Stagger Cascade Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+
+      #root {
+        --bg: #090d16;
+        --fg: #f4f7fb;
+        --muted: #8d99aa;
+        --surface: #171e2d;
+        --border: rgba(244, 247, 251, 0.14);
+        --brand: #79a8ff;
+        --accent: #8be0c4;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-body: Inter, system-ui, sans-serif;
+        --font-mono: ui-monospace, monospace;
+        --radius: 16px;
+        --space-1: 8px;
+        --space-2: 16px;
+        --space-3: 32px;
+        --dur-beat: 0.4s;
+        --ease-standard: cubic-bezier(0.215, 0.61, 0.355, 1);
+        --ease-emphasis: cubic-bezier(0.19, 1, 0.22, 1);
+        --ease-exit: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        display: grid;
+        place-items: center;
+        background: var(--bg);
+        color: var(--fg);
+        font-family: var(--font-body);
+      }
+
+      .mount-card {
+        width: 50%;
+        height: 60%;
+        left: 25%;
+        top: 20%;
+        overflow: hidden;
+        border: 1px solid var(--border);
+        border-radius: 28px;
+        background: var(--surface);
+        box-shadow: 0 40px 100px color-mix(in srgb, var(--fg) 12%, transparent);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="stagger-cascade-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="stagger-cascade-mount"
+        class="mount-card clip"
+        data-composition-id="stagger-cascade"
+        data-composition-src="./stagger-cascade.html"
+        data-variable-values='{"itemCount":8,"stagger":90,"direction":"left"}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="960"
+        data-height="648"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      // The mounted primitive owns all visible motion. This standalone host
+      // registers only the empty paused timeline required for its own id.
+      window.__timelines = window.__timelines || {};
+      window.__timelines["stagger-cascade-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/stagger-cascade/registry-item.json b/registry/components/stagger-cascade/registry-item.json
new file mode 100644
index 0000000000..5460371dc6
--- /dev/null
+++ b/registry/components/stagger-cascade/registry-item.json
@@ -0,0 +1,58 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "stagger-cascade",
+  "type": "hyperframes:component",
+  "title": "Stagger Cascade",
+  "description": "A responsive grid of tile cards that fades and travels into place with an evenly spaced per-item GSAP stagger. The ordered cascade is the only visual mechanic.",
+  "tags": ["effects", "grid", "stagger", "entrance", "exhibit"],
+  "jobs": ["exhibit"],
+  "family": "effects",
+  "profile": "burst",
+  "evidence": "production census (launches-motion-vocabulary.md)",
+  "files": [
+    {
+      "path": "stagger-cascade.html",
+      "target": "compositions/components/stagger-cascade.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "itemCount",
+      "type": "number",
+      "role": "layout",
+      "label": "Item count",
+      "description": "Number of tiles in the responsive grid.",
+      "default": 6,
+      "min": 3,
+      "max": 12,
+      "step": 1
+    },
+    {
+      "id": "stagger",
+      "type": "number",
+      "role": "motion",
+      "label": "Stagger",
+      "description": "Delay between consecutive tile entrances.",
+      "default": 60,
+      "min": 20,
+      "max": 150,
+      "step": 1,
+      "unit": "ms"
+    },
+    {
+      "id": "direction",
+      "type": "enum",
+      "role": "motion",
+      "label": "Direction",
+      "description": "Direction each tile travels into its resting position.",
+      "default": "up",
+      "options": [
+        { "value": "up", "label": "Up" },
+        { "value": "down", "label": "Down" },
+        { "value": "left", "label": "Left" },
+        { "value": "right", "label": "Right" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/stagger-cascade/stagger-cascade.html b/registry/components/stagger-cascade/stagger-cascade.html
new file mode 100644
index 0000000000..7cc1280734
--- /dev/null
+++ b/registry/components/stagger-cascade/stagger-cascade.html
@@ -0,0 +1,258 @@
+<!doctype html>
+<!--
+  stagger-cascade: HyperFrames video primitive (effects / burst / exhibit)
+
+  Concept: a responsive grid of plain tile cards enters in DOM order with one
+  visible, evenly spaced GSAP stagger. Each tile fades from opacity 0 to 1 and
+  travels along the selected axis from a container-relative offset to rest.
+  One mechanic, one job: exhibit a group through a readable cascade.
+
+  Compiled-from evidence: production census (launches-motion-vocabulary.md),
+  where stagger cascades appear in 13 of 18 launches and observed steps center
+  around 0.04 to 0.08 seconds, with 0.14 to 0.18 seconds used for deliberate
+  item-by-item reveals.
+
+  Use when: a set of cards, features, rows, or related objects needs to arrive
+  as an ordered group without adding a competing hero motion.
+
+  Variables (declared in data-composition-variables below):
+    - itemCount (number, default 6, range 3 to 12): tiles in the grid.
+    - stagger (number, default 60, range 20 to 150 ms): delay per tile.
+    - direction (up | down | left | right, default up): travel direction into
+      the resting grid. Up starts below, left starts to the right, and so on.
+
+  Envelope (fixed IN/OUT, elastic HOLD only, never gsap.timeScale()):
+    IN_BASE  = 2.40s  cascade budget, including the slowest valid stagger.
+    HOLD     = elastic = max(0, D - (IN_BASE + OUT_BASE)); deliberately still
+               so the ordered entrance remains the only mechanic.
+    OUT_BASE = 0.40s  clean group fade using --ease-exit (power2.in).
+    If D < IN_BASE + OUT_BASE, IN and OUT scale down together so IN + OUT == D
+    and HOLD == 0. The stagger step scales only in that compressed envelope.
+
+  Sync point: none. The mechanic distributes arrivals across the IN phase, so
+  there is no single fixed cue that represents the cascade honestly.
+
+  Sound cue: none. A distributed cascade has no meaningful single-frame sound
+  event, so this primitive does not dispatch hf:sfx.
+
+  Mount contract: this file is a MOUNTABLE SUB-COMPOSITION. A host loads it via
+  data-composition-src, and the runtime clones only <template> contents. Styles,
+  markup, GSAP, and timeline registration therefore live inside <template>.
+  #root has position:absolute; inset:0; container-type:size and no data-width or
+  data-height, so the host owns the box. The composition id is hardcoded as
+  "stagger-cascade" because mount flattening strips it from the live root.
+  Variables come from window.__hyperframes.getVariables(), which supplies the
+  declared defaults merged with host data-variable-values overrides.
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "itemCount", "type": "number", "role": "layout", "label": "Item count", "description": "Number of tiles in the responsive grid.", "default": 6, "min": 3, "max": 12, "step": 1 },
+    { "id": "stagger", "type": "number", "role": "motion", "label": "Stagger", "description": "Delay between consecutive tile entrances.", "default": 60, "min": 20, "max": 150, "step": 1, "unit": "ms" },
+    { "id": "direction", "type": "enum", "role": "motion", "label": "Direction", "description": "Direction each tile travels into its resting position.", "default": "up", "options": [{ "value": "up", "label": "Up" }, { "value": "down", "label": "Down" }, { "value": "left", "label": "Left" }, { "value": "right", "label": "Right" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Stagger Cascade</title>
+    <!-- Metadata only. The mount loader reads variable declarations from
+         <html>, then discards everything outside <template>. -->
+  </head>
+  <body>
+    <template>
+      <div
+        id="root"
+        data-composition-id="stagger-cascade"
+        data-start="0"
+        data-duration="4"
+        data-fps="30"
+      >
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          /* Root fills the host box. Every internal measurement uses cqw/cqh,
+             and every painted color comes from the host theme contract. */
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            color: var(--fg);
+            font-family: var(--font-body);
+          }
+
+          .sc-clip {
+            width: 100%;
+            height: 100%;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+            background: var(--bg);
+          }
+
+          .sc-grid {
+            width: 82cqw;
+            height: 70cqh;
+            display: grid;
+            grid-template-columns: repeat(var(--sc-columns), minmax(0, 1fr));
+            grid-auto-rows: minmax(0, 1fr);
+            gap: min(2.2cqw, 3.8cqh);
+          }
+
+          .sc-tile {
+            position: relative;
+            min-width: 0;
+            min-height: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+            border: 0.16cqw solid var(--border);
+            border-radius: min(2.4cqw, 4cqh);
+            background: color-mix(in srgb, var(--surface) 92%, var(--brand));
+            color: var(--fg);
+          }
+
+          .sc-tile::after {
+            content: "";
+            position: absolute;
+            left: 14%;
+            right: 14%;
+            bottom: 12%;
+            height: min(0.55cqw, 0.95cqh);
+            border-radius: 50cqw;
+            background: var(--brand);
+            opacity: 0.72;
+          }
+
+          .sc-tile-index {
+            display: block;
+            font-family: var(--font-display);
+            font-size: min(5cqw, 8cqh);
+            font-weight: 700;
+            line-height: 1;
+            color: var(--fg);
+          }
+        </style>
+
+        <div
+          id="stagger-cascade-clip"
+          class="sc-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="sc-grid" aria-label="Cascading tile grid"></div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var compositionId = "stagger-cascade";
+            var grid = root.querySelector(".sc-grid");
+
+            // EDIT ZONE: declarations above and clamped reads below are the
+            // single source of truth for the primitive's three public knobs.
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var rawItemCount = Number(vars.itemCount);
+            var itemCount = Number.isFinite(rawItemCount) ? Math.round(rawItemCount) : 6;
+            itemCount = Math.max(3, Math.min(12, itemCount));
+
+            var rawStagger = Number(vars.stagger);
+            var staggerMs = Number.isFinite(rawStagger) ? rawStagger : 60;
+            staggerMs = Math.max(20, Math.min(150, staggerMs));
+
+            // INVARIANT: only these four mappings can reach GSAP. Each option
+            // has a distinct axis or sign at preview size.
+            var offsets = {
+              up: { x: "0cqw", y: "12cqh" },
+              down: { x: "0cqw", y: "-12cqh" },
+              left: { x: "8cqw", y: "0cqh" },
+              right: { x: "-8cqw", y: "0cqh" },
+            };
+            var offset = Object.prototype.hasOwnProperty.call(offsets, vars.direction)
+              ? offsets[vars.direction]
+              : offsets.up;
+
+            // itemCount owns both DOM count and the responsive grid shape.
+            var fragment = document.createDocumentFragment();
+            for (var index = 0; index < itemCount; index += 1) {
+              var tile = document.createElement("div");
+              var number = document.createElement("span");
+              tile.className = "sc-tile";
+              tile.setAttribute("aria-hidden", "true");
+              number.className = "sc-tile-index";
+              number.textContent = String(index + 1).padStart(2, "0");
+              tile.appendChild(number);
+              fragment.appendChild(tile);
+            }
+            grid.replaceChildren(fragment);
+            grid.style.setProperty(
+              "--sc-columns",
+              String(Math.min(4, Math.ceil(Math.sqrt(itemCount)))),
+            );
+
+            var tiles = root.querySelectorAll(".sc-tile");
+
+            // RETIME RANGE: change these four base values together. IN_BASE is
+            // sized so 12 items at 150ms plus the entrance tween finish exactly
+            // at its boundary. HOLD alone absorbs longer host durations.
+            var IN_BASE = 2.4;
+            var OUT_BASE = 0.4;
+            var CASCADE_START_BASE = 0.1;
+            var ENTRY_DURATION_BASE = 0.65;
+
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var totalBase = IN_BASE + OUT_BASE;
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var OUT_START = IN + HOLD;
+            var CASCADE_START = CASCADE_START_BASE * scale;
+            var ENTRY_DURATION = ENTRY_DURATION_BASE * scale;
+            var STAGGER_SECONDS = (staggerMs / 1000) * scale;
+
+            var timeline = gsap.timeline({ paused: true });
+
+            // IN: the sole mechanic. Explicit endpoints keep mounted re-seeks
+            // deterministic. power2.out is --ease-standard.
+            timeline.fromTo(
+              tiles,
+              { opacity: 0, x: offset.x, y: offset.y },
+              {
+                opacity: 1,
+                x: "0cqw",
+                y: "0cqh",
+                duration: ENTRY_DURATION,
+                ease: "power2.out",
+                stagger: { each: STAGGER_SECONDS, from: "start" },
+              },
+              CASCADE_START,
+            );
+
+            // HOLD: deliberately unanimated. OUT: one clean group fade with
+            // power2.in, the GSAP form of --ease-exit.
+            timeline.to(grid, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+
+            timeline.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = timeline;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/stagger-lattice/demo.html b/registry/components/stagger-lattice/demo.html
new file mode 100644
index 0000000000..1624a435bf
--- /dev/null
+++ b/registry/components/stagger-lattice/demo.html
@@ -0,0 +1,140 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Stagger Lattice - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f4f4f5;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-advanced-stagger-lattice {
+        --hf-accent: var(--accent, rgba(17, 24, 39, 0.72));
+        --hf-l1: rgba(17, 24, 39, 0.72);
+        --hf-l3: rgba(17, 24, 39, 0.18);
+        --hf-l4: rgba(17, 24, 39, 0.08);
+        --hf-hair: rgba(17, 24, 39, 0.14);
+        color: var(--hf-l1);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-advanced-stagger-lattice {
+        width: 720px;
+        min-height: 420px;
+        border-radius: 30px;
+        padding: 36px;
+        background: #fff;
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.16);
+        display: grid;
+        place-items: center;
+        /* ponytail: zoom scales the wrapper without touching GSAP transform targets (.cell) */
+        zoom: 1.7;
+      }
+      .hf-advanced-stagger-lattice .grid {
+        display: grid;
+        grid-template-columns: repeat(8, 46px);
+        gap: 10px;
+      }
+      .hf-advanced-stagger-lattice .cell {
+        width: 46px;
+        height: 46px;
+        border-radius: 14px;
+        background: var(--hf-l1);
+        transform: translateY(var(--hf-cell-y, 0px)) scale(var(--hf-cell-scale, 1));
+        opacity: var(--hf-cell-opacity, 1);
+      }
+      .hf-advanced-stagger-lattice svg {
+        width: 520px;
+        height: 220px;
+        overflow: visible;
+      }
+      .hf-advanced-stagger-lattice path {
+        fill: none;
+        stroke: var(--hf-accent);
+        stroke-width: 14;
+        stroke-linecap: round;
+        stroke-dasharray: 900;
+        stroke-dashoffset: var(--hf-dash, 0);
+      }
+      .hf-advanced-stagger-lattice .stack {
+        position: relative;
+        width: 520px;
+        height: 260px;
+      }
+      .hf-advanced-stagger-lattice .card {
+        position: absolute;
+        inset: 0;
+        border-radius: 26px;
+        background: linear-gradient(var(--hf-l4), var(--hf-l4)), #ffffff;
+        border: 1px solid var(--hf-hair);
+        box-shadow: 0 20px 54px rgba(15, 23, 42, 0.14);
+        transform: translateY(var(--hf-card-y, 0px)) scale(var(--hf-card-scale, 1));
+        opacity: var(--hf-card-opacity, 1);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="stagger-lattice-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="hf-advanced-stagger-lattice">
+        <div class="grid">
+          <span class="cell"></span><span class="cell"></span><span class="cell"></span
+          ><span class="cell"></span><span class="cell"></span><span class="cell"></span
+          ><span class="cell"></span><span class="cell"></span><span class="cell"></span
+          ><span class="cell"></span><span class="cell"></span><span class="cell"></span
+          ><span class="cell"></span><span class="cell"></span><span class="cell"></span
+          ><span class="cell"></span><span class="cell"></span><span class="cell"></span
+          ><span class="cell"></span><span class="cell"></span><span class="cell"></span
+          ><span class="cell"></span><span class="cell"></span><span class="cell"></span
+          ><span class="cell"></span><span class="cell"></span><span class="cell"></span
+          ><span class="cell"></span><span class="cell"></span><span class="cell"></span
+          ><span class="cell"></span><span class="cell"></span><span class="cell"></span
+          ><span class="cell"></span><span class="cell"></span><span class="cell"></span
+          ><span class="cell"></span><span class="cell"></span><span class="cell"></span
+          ><span class="cell"></span>
+        </div>
+      </div>
+    </div>
+    <script>
+      const tl = gsap.timeline({ paused: true });
+      const startTime = 0.5;
+      tl.fromTo(
+        ".hf-advanced-stagger-lattice .cell",
+        { "--hf-cell-y": "24px", "--hf-cell-scale": 0.72, "--hf-cell-opacity": 0 },
+        {
+          "--hf-cell-y": "0px",
+          "--hf-cell-scale": 1,
+          "--hf-cell-opacity": 1,
+          duration: 0.28,
+          stagger: { each: 0.018, from: "center", grid: [5, 8] },
+          ease: "power2.out",
+        },
+        startTime,
+      );
+      tl.set({}, {}, 5);
+      window.__timelines = window.__timelines || {};
+      window.__timelines["stagger-lattice-demo"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/registry/components/stagger-lattice/registry-item.json b/registry/components/stagger-lattice/registry-item.json
new file mode 100644
index 0000000000..dc2f2ef30c
--- /dev/null
+++ b/registry/components/stagger-lattice/registry-item.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "stagger-lattice",
+  "type": "hyperframes:component",
+  "title": "Stagger Lattice",
+  "description": "A staggered grid reveal inspired by Anime.js v4 stagger utilities, implemented with GSAP for HyperFrames.",
+  "tags": ["advanced-motion", "anime-inspired", "hyperframes-native"],
+  "files": [
+    {
+      "path": "stagger-lattice.html",
+      "target": "compositions/components/stagger-lattice.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/stagger-lattice.png"
+  }
+}
diff --git a/registry/components/stagger-lattice/stagger-lattice.html b/registry/components/stagger-lattice/stagger-lattice.html
new file mode 100644
index 0000000000..02fd7a1f6a
--- /dev/null
+++ b/registry/components/stagger-lattice/stagger-lattice.html
@@ -0,0 +1,95 @@
+<!--
+  Stagger Lattice - advanced HyperFrames primitive.
+
+  This is intentionally seekable: drive it from a paused GSAP timeline.
+  MotionPath examples require GSAP MotionPathPlugin. Three.js examples expose
+  a render(progress) adapter instead of a free-running requestAnimationFrame loop.
+-->
+
+<div class="hf-advanced-stagger-lattice">
+  <div class="grid">
+    <span class="cell"></span><span class="cell"></span><span class="cell"></span
+    ><span class="cell"></span><span class="cell"></span><span class="cell"></span
+    ><span class="cell"></span><span class="cell"></span><span class="cell"></span
+    ><span class="cell"></span><span class="cell"></span><span class="cell"></span
+    ><span class="cell"></span><span class="cell"></span><span class="cell"></span
+    ><span class="cell"></span><span class="cell"></span><span class="cell"></span
+    ><span class="cell"></span><span class="cell"></span><span class="cell"></span
+    ><span class="cell"></span><span class="cell"></span><span class="cell"></span
+    ><span class="cell"></span><span class="cell"></span><span class="cell"></span
+    ><span class="cell"></span><span class="cell"></span><span class="cell"></span
+    ><span class="cell"></span><span class="cell"></span><span class="cell"></span
+    ><span class="cell"></span><span class="cell"></span><span class="cell"></span
+    ><span class="cell"></span><span class="cell"></span><span class="cell"></span
+    ><span class="cell"></span>
+  </div>
+</div>
+
+<style>
+  .hf-advanced-stagger-lattice {
+    --hf-accent: var(--accent, rgba(17, 24, 39, 0.72));
+    --hf-l1: rgba(17, 24, 39, 0.72);
+    --hf-l3: rgba(17, 24, 39, 0.18);
+    --hf-l4: rgba(17, 24, 39, 0.08);
+    --hf-hair: rgba(17, 24, 39, 0.14);
+    color: var(--hf-l1);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-advanced-stagger-lattice {
+    width: 720px;
+    min-height: 420px;
+    border-radius: 30px;
+    padding: 36px;
+    background: #fff;
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.16);
+    display: grid;
+    place-items: center;
+  }
+  .hf-advanced-stagger-lattice .grid {
+    display: grid;
+    grid-template-columns: repeat(8, 46px);
+    gap: 10px;
+  }
+  .hf-advanced-stagger-lattice .cell {
+    width: 46px;
+    height: 46px;
+    border-radius: 14px;
+    background: var(--hf-l1);
+    transform: translateY(var(--hf-cell-y, 0px)) scale(var(--hf-cell-scale, 1));
+    opacity: var(--hf-cell-opacity, 1);
+  }
+  .hf-advanced-stagger-lattice svg {
+    width: 520px;
+    height: 220px;
+    overflow: visible;
+  }
+  .hf-advanced-stagger-lattice path {
+    fill: none;
+    stroke: var(--hf-accent);
+    stroke-width: 14;
+    stroke-linecap: round;
+    stroke-dasharray: 900;
+    stroke-dashoffset: var(--hf-dash, 0);
+  }
+  .hf-advanced-stagger-lattice .stack {
+    position: relative;
+    width: 520px;
+    height: 260px;
+  }
+  .hf-advanced-stagger-lattice .card {
+    position: absolute;
+    inset: 0;
+    border-radius: 26px;
+    background: linear-gradient(var(--hf-l4), var(--hf-l4)), #ffffff;
+    border: 1px solid var(--hf-hair);
+    box-shadow: 0 20px 54px rgba(15, 23, 42, 0.14);
+    transform: translateY(var(--hf-card-y, 0px)) scale(var(--hf-card-scale, 1));
+    opacity: var(--hf-card-opacity, 1);
+  }
+</style>
+
+<!--
+  Timeline integration:
+  const startTime = 0;
+  tl.fromTo('.hf-advanced-stagger-lattice .cell', { '--hf-cell-y': '24px', '--hf-cell-scale': 0.72, '--hf-cell-opacity': 0 }, { '--hf-cell-y': '0px', '--hf-cell-scale': 1, '--hf-cell-opacity': 1, duration: 0.28, stagger: { each: 0.018, from: 'center', grid: [5, 8] }, ease: 'power2.out' }, startTime);
+-->
diff --git a/registry/components/staggered-fade-up/demo.html b/registry/components/staggered-fade-up/demo.html
new file mode 100644
index 0000000000..e49b828ec3
--- /dev/null
+++ b/registry/components/staggered-fade-up/demo.html
@@ -0,0 +1,106 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Staggered Fade Up - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: var(--bg, #f5f5f4);
+        font-family: var(--font-body, Inter, system-ui, sans-serif);
+      }
+      /* ponytail: zoom on .demo-frame (not a GSAP target) to fill ~65% of frame */
+      .demo-frame {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 28px;
+        padding: 72px 96px;
+        zoom: 1.9;
+      }
+      .demo-label {
+        font-size: 13px;
+        font-weight: 500;
+        letter-spacing: 0.1em;
+        text-transform: uppercase;
+        color: var(--muted, #71717a);
+      }
+      .hf-remocn-staggered-fade-up {
+        color: var(--fg, #18181b);
+        font-family: var(--font-display, Inter, system-ui, sans-serif);
+        font-weight: 900;
+        letter-spacing: -0.04em;
+      }
+      .hf-remocn-staggered-fade-up {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 14px 18px;
+        font-size: 72px;
+        line-height: 1.05;
+        max-width: 680px;
+        justify-content: center;
+      }
+      .hf-remocn-staggered-fade-up span {
+        display: inline-block;
+        transform: translate(var(--hf-word-x, 0px), var(--hf-word-y, 0px))
+          scale(var(--hf-word-scale, 1));
+        filter: blur(var(--hf-word-blur, 0px));
+        will-change: transform, filter, opacity;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="staggered-fade-up-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="demo-label">staggered fade up</div>
+        <div class="hf-remocn-staggered-fade-up">
+          <span>Motion</span><span>that</span><span>tells</span><span>a</span><span>story</span
+          ><span>one</span><span>word</span><span>at</span><span>a</span><span>time</span>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.4;
+        tl.fromTo(
+          ".hf-remocn-staggered-fade-up span",
+          { opacity: 0, "--hf-word-y": "28px", "--hf-word-scale": 0.92, "--hf-word-blur": "6px" },
+          {
+            opacity: 1,
+            "--hf-word-y": "0px",
+            "--hf-word-scale": 1,
+            "--hf-word-blur": "0px",
+            duration: 0.4,
+            stagger: 0.18,
+            ease: "power3.out",
+          },
+          startTime,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["staggered-fade-up-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/staggered-fade-up/registry-item.json b/registry/components/staggered-fade-up/registry-item.json
new file mode 100644
index 0000000000..d899179f35
--- /dev/null
+++ b/registry/components/staggered-fade-up/registry-item.json
@@ -0,0 +1,98 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "staggered-fade-up",
+  "type": "hyperframes:component",
+  "title": "Staggered Fade Up",
+  "description": "Words fade in and slide up one after another with configurable delay.",
+  "tags": ["video-primitive", "motion-primitive", "remocn-port", "typography"],
+  "files": [
+    {
+      "path": "staggered-fade-up.html",
+      "target": "compositions/components/staggered-fade-up.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "direction",
+      "type": "enum",
+      "role": "motion",
+      "label": "Direction",
+      "description": "Where the offset the timeline drives points.",
+      "default": "up",
+      "options": [
+        {
+          "value": "up",
+          "label": "Up"
+        },
+        {
+          "value": "down",
+          "label": "Down"
+        },
+        {
+          "value": "left",
+          "label": "Left"
+        },
+        {
+          "value": "right",
+          "label": "Right"
+        }
+      ]
+    },
+    {
+      "id": "distance",
+      "type": "enum",
+      "role": "motion",
+      "label": "Distance",
+      "description": "Scales the travel offset, so the words cover a shorter or longer run in the same time.",
+      "default": "standard",
+      "options": [
+        {
+          "value": "close",
+          "label": "Close"
+        },
+        {
+          "value": "standard",
+          "label": "Standard"
+        },
+        {
+          "value": "far",
+          "label": "Far"
+        }
+      ]
+    },
+    {
+      "id": "tone",
+      "type": "enum",
+      "role": "style",
+      "label": "Tone",
+      "description": "Word colour: ink for light frames, paper for dark ones, accent rides --brand.",
+      "default": "ink",
+      "options": [
+        {
+          "value": "ink",
+          "label": "Ink"
+        },
+        {
+          "value": "paper",
+          "label": "Paper"
+        },
+        {
+          "value": "accent",
+          "label": "Accent"
+        }
+      ]
+    },
+    {
+      "id": "words",
+      "type": "string",
+      "role": "content",
+      "label": "Words",
+      "description": "The words themselves, split on spaces, one span and one stagger step each.",
+      "default": "Staggered fade up"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/staggered-fade-up.png"
+  }
+}
diff --git a/registry/components/staggered-fade-up/staggered-fade-up.html b/registry/components/staggered-fade-up/staggered-fade-up.html
new file mode 100644
index 0000000000..0bfda1ff5b
--- /dev/null
+++ b/registry/components/staggered-fade-up/staggered-fade-up.html
@@ -0,0 +1,120 @@
+<!--
+  Staggered Fade Up - remocn typography primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Drive the timeline
+  integration from a paused GSAP timeline so renders remain deterministic.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result as a custom property
+  the CSS below consumes. The timeline recipe at the bottom is untouched by
+  them: it keeps driving one offset, one scale and one blur, and these decide
+  what that offset means on screen and what colour the words arrive in.
+
+    - direction (up | down | left | right, default up): where the offset the
+      timeline drives points. up rises into place, down drops in, left and
+      right slide in along the baseline.
+    - distance (close | standard | far, default standard): scales that offset,
+      so the words cover a shorter or longer run in the same time. close covers
+      half the run, far nearly double.
+    - tone (ink | paper | accent, default ink): word colour. ink is near-black
+      for light frames, paper near-white for dark ones, accent rides --brand.
+      It writes its own property and never touches the shared --fg token.
+    - words (text, default "Staggered fade up"): the words themselves, split on
+      spaces, one span and one stagger step each. Anything empty, blank or not
+      a string leaves the authored markup alone.
+
+  On every default the result is identical to the original: three near-black
+  words rise 22px through a 5px blur, 0.055s apart.
+-->
+
+<div
+  class="hf-remocn-staggered-fade-up"
+  data-composition-variables='[
+    { "id": "direction", "type": "enum", "role": "motion", "label": "Direction", "description": "Where the offset the timeline drives points.", "default": "up", "options": [{ "value": "up", "label": "Up" }, { "value": "down", "label": "Down" }, { "value": "left", "label": "Left" }, { "value": "right", "label": "Right" }] },
+    { "id": "distance", "type": "enum", "role": "motion", "label": "Distance", "description": "Scales the travel offset, so the words cover a shorter or longer run in the same time.", "default": "standard", "options": [{ "value": "close", "label": "Close" }, { "value": "standard", "label": "Standard" }, { "value": "far", "label": "Far" }] },
+    { "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Word colour: ink for light frames, paper for dark ones, accent rides --brand.", "default": "ink", "options": [{ "value": "ink", "label": "Ink" }, { "value": "paper", "label": "Paper" }, { "value": "accent", "label": "Accent" }] },
+    { "id": "words", "type": "string", "role": "content", "label": "Words", "description": "The words themselves, split on spaces, one span and one stagger step each.", "default": "Staggered fade up" }
+  ]'
+>
+  <span>Staggered</span><span>fade</span><span>up</span>
+</div>
+
+<style>
+  .hf-remocn-staggered-fade-up {
+    color: var(--hf-fade-word-color, var(--fg, #18181b));
+    font-family: var(--font-display, Inter, system-ui, sans-serif);
+    font-weight: 900;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-staggered-fade-up {
+    display: inline-flex;
+    gap: var(--space-1, 12px);
+    font-size: 56px;
+    line-height: 1;
+  }
+  .hf-remocn-staggered-fade-up span {
+    display: inline-block;
+    transform: translate(
+        calc(var(--hf-word-x, 0px) + var(--hf-word-y, 0px) * var(--hf-word-axis-x, 0)),
+        calc(var(--hf-word-y, 0px) * var(--hf-word-axis-y, 1))
+      )
+      scale(var(--hf-word-scale, 1));
+    filter: blur(var(--hf-word-blur, 0px));
+    will-change: transform, filter, opacity;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    var axes = {
+      up: { x: 0, y: 1 },
+      down: { x: 0, y: -1 },
+      left: { x: -1, y: 0 },
+      right: { x: 1, y: 0 },
+    };
+    var reaches = { close: 0.5, standard: 1, far: 1.85 };
+    var tones = {
+      ink: "var(--fg, #18181b)",
+      paper: "#fafafa",
+      accent: "var(--brand, #34d399)",
+    };
+
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var axis = axes[pick(axes, vars.direction, "up")];
+    var reach = reaches[pick(reaches, vars.distance, "standard")];
+    var tone = tones[pick(tones, vars.tone, "ink")];
+    var words =
+      typeof vars.words === "string" && vars.words.trim() ? vars.words.trim().split(/\s+/) : null;
+
+    var roots = document.querySelectorAll(".hf-remocn-staggered-fade-up");
+    for (var i = 0; i < roots.length; i += 1) {
+      roots[i].style.setProperty("--hf-word-axis-x", String(axis.x * reach));
+      roots[i].style.setProperty("--hf-word-axis-y", String(axis.y * reach));
+      roots[i].style.setProperty("--hf-fade-word-color", tone);
+      if (words) {
+        roots[i].textContent = "";
+        for (var j = 0; j < words.length; j += 1) {
+          var span = document.createElement("span");
+          span.textContent = words[j];
+          roots[i].appendChild(span);
+        }
+      }
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-staggered-fade-up span', { opacity: 0, '--hf-word-y': '22px', '--hf-word-scale': 0.92, '--hf-word-blur': '5px' }, { opacity: 1, '--hf-word-y': '0px', '--hf-word-scale': 1, '--hf-word-blur': '0px', duration: 0.3, stagger: 0.055, ease: 'power3.out' }, startTime);
+-->
diff --git a/registry/components/star-rating-fill/demo.html b/registry/components/star-rating-fill/demo.html
new file mode 100644
index 0000000000..12baf8cd99
--- /dev/null
+++ b/registry/components/star-rating-fill/demo.html
@@ -0,0 +1,99 @@
+<!doctype html>
+<!--
+  star-rating-fill demo: standalone 1920x1080 host composition. It mounts the
+  primitive through data-composition-src into a definite card and supplies a
+  fractional target so snapshots prove the partial final star.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Star Rating Fill Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+
+      #root {
+        --bg: #090d16;
+        --fg: #f4f7fb;
+        --muted: #8491a3;
+        --surface: #1a2230;
+        --border: rgba(244, 247, 251, 0.14);
+        --brand: #ffc83d;
+        --accent: #79a8ff;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-body: Inter, system-ui, sans-serif;
+        --font-mono: ui-monospace, monospace;
+        --radius: 3cqh;
+        --space-1: 1cqh;
+        --space-2: 2cqh;
+        --space-3: 3cqh;
+        --dur-beat: 0.4s;
+        --ease-standard: cubic-bezier(0.215, 0.61, 0.355, 1);
+        --ease-emphasis: cubic-bezier(0.19, 1, 0.22, 1);
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        display: grid;
+        place-items: center;
+        background: var(--bg);
+        color: var(--fg);
+        font-family: var(--font-body);
+      }
+
+      .mount-card {
+        width: 58%;
+        height: 42%;
+        left: 21%;
+        top: 29%;
+        overflow: hidden;
+        border: 0.14cqh solid var(--border);
+        border-radius: var(--radius);
+        background: var(--surface);
+        box-shadow: 0 4cqh 10cqh color-mix(in srgb, var(--fg) 12%, transparent);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="star-rating-fill-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="star-rating-fill-mount"
+        class="mount-card clip"
+        data-composition-id="star-rating-fill"
+        data-composition-src="./star-rating-fill.html"
+        data-variable-values='{"rating":4.8,"starCount":5,"showValue":"yes"}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="1114"
+        data-height="454"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["star-rating-fill-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/star-rating-fill/registry-item.json b/registry/components/star-rating-fill/registry-item.json
new file mode 100644
index 0000000000..30ab53c676
--- /dev/null
+++ b/registry/components/star-rating-fill/registry-item.json
@@ -0,0 +1,56 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "star-rating-fill",
+  "type": "hyperframes:component",
+  "title": "Star Rating Fill",
+  "description": "A token-driven star row whose colored layer sweeps to a rating, preserves the fractional final star, and can count the value in sync.",
+  "tags": ["data", "rating", "stars", "fractional", "fill", "prove"],
+  "jobs": ["prove"],
+  "family": "data",
+  "profile": "holdable",
+  "evidence": "GAP A2+B1 convergent miss; rules stat-bars-and-fills: a colored star layer clips left to right over a muted layer and stops at the fractional rating.",
+  "syncPoints": [{ "id": "fill-settled", "phase": "in", "offset": 1.3 }],
+  "files": [
+    {
+      "path": "star-rating-fill.html",
+      "target": "compositions/components/star-rating-fill.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "rating",
+      "type": "number",
+      "role": "content",
+      "label": "Rating",
+      "description": "Target rating in star units from 0 to 5.",
+      "default": 4.8,
+      "min": 0,
+      "max": 5,
+      "step": 0.1
+    },
+    {
+      "id": "starCount",
+      "type": "number",
+      "role": "layout",
+      "label": "Star count",
+      "description": "Number of stars shown in the row.",
+      "default": 5,
+      "min": 1,
+      "max": 10,
+      "step": 1
+    },
+    {
+      "id": "showValue",
+      "type": "enum",
+      "role": "content",
+      "label": "Show value",
+      "description": "Show or hide the synchronized numeric rating.",
+      "default": "yes",
+      "options": [
+        { "value": "yes", "label": "Yes" },
+        { "value": "no", "label": "No" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/star-rating-fill/star-rating-fill.html b/registry/components/star-rating-fill/star-rating-fill.html
new file mode 100644
index 0000000000..1f2ace7b05
--- /dev/null
+++ b/registry/components/star-rating-fill/star-rating-fill.html
@@ -0,0 +1,298 @@
+<!doctype html>
+<!--
+  star-rating-fill: HyperFrames video primitive (data / holdable / prove)
+
+  Concept: one token-colored star layer is clipped over a muted copy. A
+  single left-to-right clip-path sweep resolves at the target rating, so a
+  fractional value leaves the final filled star visibly partial. Small
+  per-star pops follow the same sweep and support the one fill mechanic.
+
+  Compiled-from evidence: GAP A2+B1 convergent miss, rules
+  stat-bars-and-fills. That evidence specifies a gray star layer, a colored
+  overlay, and a fractional clip wipe as the deterministic seek handle.
+
+  Use when: proving app-store credibility, customer satisfaction, review
+  quality, or any scored result that needs to read in one glance.
+
+  Variables:
+    rating    number  0 to 5  default 4.8  target rating in star units
+    starCount number          default 5    visible stars, clamped 1 to 10
+    showValue yes | no        default yes  show the synchronized count-up
+
+  Envelope:
+    IN   1.50s fixed sweep, count, and per-star pop, power2.out
+    HOLD elastic and deliberately still so the proof remains readable
+    OUT  0.40s fixed opacity release, power2.in
+    For durations shorter than 1.90s, IN and OUT scale together. HOLD is the
+    only elastic phase, and the timeline is never time-scaled.
+
+  Sync point: fill-settled at 1.30s into IN. It is fixed outside HOLD.
+
+  Sound cues: none. The result should not imply an audio event for its host.
+
+  Mount contract: this file is a template-wrapped sub-composition. The host
+  owns dimensions. #root fills that box with inset:0, uses container queries,
+  and has no data-width or data-height. The hardcoded composition id matches
+  the root and timeline key. Variables come from getVariables().
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "rating", "type": "number", "role": "content", "label": "Rating", "description": "Target rating in star units from 0 to 5.", "default": 4.8, "min": 0, "max": 5, "step": 0.1 },
+    { "id": "starCount", "type": "number", "role": "layout", "label": "Star count", "description": "Number of stars shown in the row.", "default": 5, "min": 1, "max": 10, "step": 1 },
+    { "id": "showValue", "type": "enum", "role": "content", "label": "Show value", "description": "Show or hide the synchronized numeric rating.", "default": "yes", "options": [{ "value": "yes", "label": "Yes" }, { "value": "no", "label": "No" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Star Rating Fill</title>
+  </head>
+  <body>
+    <template>
+      <div
+        id="root"
+        data-composition-id="star-rating-fill"
+        data-start="0"
+        data-duration="4"
+        data-fps="30"
+      >
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          /* INVARIANT: #root owns only the mount boundary. The host owns the
+             box, while all internal geometry stays container-relative. */
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            color: var(--fg, CanvasText);
+            font-family: var(--font-display, system-ui);
+          }
+
+          .srf-clip {
+            width: 100%;
+            height: 100%;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .srf-stage {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: var(--space-2, 3cqw);
+          }
+
+          /* EDIT ZONE: the row owns only its responsive presentation size.
+             --srf-count is supplied by the clamped public starCount value. */
+          .srf-stars {
+            --srf-count: 5;
+            position: relative;
+            width: min(68cqw, calc(72cqh * var(--srf-count)));
+          }
+
+          .srf-layer {
+            width: 100%;
+            display: flex;
+            align-items: center;
+          }
+
+          .srf-base {
+            color: color-mix(in srgb, var(--muted, currentColor) 68%, var(--surface, transparent));
+          }
+
+          .srf-fill {
+            position: absolute;
+            inset: 0;
+            color: var(--brand, currentColor);
+            clip-path: inset(0 100% 0 0);
+          }
+
+          .srf-star-cell {
+            display: block;
+            flex: 1 1 0;
+            min-width: 0;
+            aspect-ratio: 1;
+            transform-origin: center;
+          }
+
+          .srf-star-cell svg {
+            display: block;
+            width: 100%;
+            height: 100%;
+            overflow: visible;
+            fill: currentColor;
+          }
+
+          .srf-value {
+            min-width: 2.2em;
+            color: var(--fg, currentColor);
+            font-size: min(9cqw, 16cqh);
+            font-weight: 720;
+            font-variant-numeric: tabular-nums;
+            letter-spacing: -0.04em;
+            line-height: 1;
+            text-align: right;
+          }
+        </style>
+
+        <div
+          id="star-rating-fill-clip"
+          class="srf-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="srf-stage">
+            <div class="srf-stars" role="img" aria-label="0 out of 5 stars">
+              <div class="srf-layer srf-base" aria-hidden="true"></div>
+              <div class="srf-layer srf-fill" aria-hidden="true"></div>
+            </div>
+            <div class="srf-value" aria-hidden="true">0.0</div>
+          </div>
+        </div>
+
+        <template id="star-rating-fill-star-template">
+          <span class="srf-star-cell">
+            <svg viewBox="0 0 100 100" aria-hidden="true" focusable="false">
+              <path
+                d="M50 0 61.8 36.2 100 36.2 69.1 58.6 80.9 95 50 72.4 19.1 95 30.9 58.6 0 36.2 38.2 36.2Z"
+              />
+            </svg>
+          </span>
+        </template>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".srf-stage");
+            var stars = root.querySelector(".srf-stars");
+            var baseLayer = root.querySelector(".srf-base");
+            var fillLayer = root.querySelector(".srf-fill");
+            var valueElement = root.querySelector(".srf-value");
+            var starTemplate = root.querySelector("#star-rating-fill-star-template");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            /* INVARIANT: zero is a valid rating. Missing values and zero are
+               handled separately, then every public number is clamped once. */
+            var ratingValue = vars.rating == null || vars.rating === "" ? NaN : Number(vars.rating);
+            var requestedRating = Number.isFinite(ratingValue)
+              ? Math.max(0, Math.min(5, ratingValue))
+              : 4.8;
+            var starCountValue =
+              vars.starCount == null || vars.starCount === "" ? NaN : Number(vars.starCount);
+            var starCount = Number.isFinite(starCountValue) ? Math.round(starCountValue) : 5;
+            starCount = Math.max(1, Math.min(10, starCount));
+            var rating = Math.min(requestedRating, starCount);
+            var showValue = vars.showValue === "no" ? "no" : "yes";
+            var fillPercent = (rating / starCount) * 100;
+
+            stars.style.setProperty("--srf-count", String(starCount));
+            stars.setAttribute("aria-label", rating.toFixed(1) + " out of " + starCount + " stars");
+            valueElement.hidden = showValue === "no";
+
+            /* The template is the single owner of star geometry. Both paint
+               layers clone it so their silhouettes cannot drift. */
+            var baseFragment = document.createDocumentFragment();
+            var fillFragment = document.createDocumentFragment();
+            for (var index = 0; index < starCount; index += 1) {
+              baseFragment.appendChild(starTemplate.content.firstElementChild.cloneNode(true));
+              fillFragment.appendChild(starTemplate.content.firstElementChild.cloneNode(true));
+            }
+            baseLayer.replaceChildren(baseFragment);
+            fillLayer.replaceChildren(fillFragment);
+
+            var baseCells = baseLayer.querySelectorAll(".srf-star-cell");
+            var fillCells = fillLayer.querySelectorAll(".srf-star-cell");
+            var valueState = { current: 0 };
+
+            /* RETIME RANGE: these values own the full lifecycle. The sweep
+               uses --ease-standard's GSAP owner, power2.out. */
+            var IN_BASE = 1.5;
+            var OUT_BASE = 0.4;
+            var FILL_START_BASE = 0.2;
+            var FILL_DURATION_BASE = 1.1;
+            var POP_DURATION_BASE = 0.2;
+            var durationValue = Number(root.dataset.duration);
+            var duration = Number.isFinite(durationValue) && durationValue > 0 ? durationValue : 4;
+            var scale = duration < IN_BASE + OUT_BASE ? duration / (IN_BASE + OUT_BASE) : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var OUT_START = IN + HOLD;
+            var FILL_START = FILL_START_BASE * scale;
+            var FILL_DURATION = FILL_DURATION_BASE * scale;
+            var POP_DURATION = POP_DURATION_BASE * scale;
+
+            var timeline = gsap.timeline({ paused: true });
+
+            timeline.fromTo(
+              fillLayer,
+              { clipPath: "inset(0 100% 0 0)" },
+              {
+                clipPath: "inset(0 " + (100 - fillPercent) + "% 0 0)",
+                duration: FILL_DURATION,
+                ease: "power2.out",
+              },
+              FILL_START,
+            );
+
+            if (showValue === "yes") {
+              timeline.to(
+                valueState,
+                {
+                  current: rating,
+                  duration: FILL_DURATION,
+                  ease: "power2.out",
+                  onUpdate: function () {
+                    valueElement.textContent = valueState.current.toFixed(1);
+                  },
+                },
+                FILL_START,
+              );
+            }
+
+            /* Per-star pops are subordinate to the sweep and occur in the
+               same left-to-right order. They never change the fill endpoint. */
+            var popCount = Math.ceil(rating);
+            for (var popIndex = 0; popIndex < popCount; popIndex += 1) {
+              var popAt = FILL_START + FILL_DURATION * (popIndex / Math.max(1, rating)) * 0.82;
+              var popTargets = [baseCells[popIndex], fillCells[popIndex]];
+              timeline.to(
+                popTargets,
+                { scale: 1.06, duration: POP_DURATION * 0.45, ease: "power2.out" },
+                popAt,
+              );
+              timeline.to(
+                popTargets,
+                { scale: 1, duration: POP_DURATION * 0.55, ease: "power2.out" },
+                popAt + POP_DURATION * 0.45,
+              );
+            }
+
+            timeline.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+
+            timeline.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines["star-rating-fill"] = timeline;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/state-chip-rail/README.md b/registry/components/state-chip-rail/README.md
new file mode 100644
index 0000000000..19acbc6db7
--- /dev/null
+++ b/registry/components/state-chip-rail/README.md
@@ -0,0 +1,55 @@
+# state-chip-rail
+
+Product-demo primitive: a rail of mono status chips advances a data-state
+snap machine on a cue schedule. Presentation is pure CSS on each chip's
+`[data-state]`; the timeline only flips attributes with `tl.set`, so every
+advance is an instantaneous snap that is exact in both seek directions. The
+active chip is ink on surface, done chips dim, pending chips stay hollow.
+Optional badges pop beside one named state when it activates. Generalizes the
+flagship agent-console status rail (cohere-north frame 04).
+
+Authored at 5s with an elastic HOLD: chips cascade in, the machine advances
+on its schedule, and everything after the last advance is still frame until
+the (optional) exit.
+
+## Variables
+
+| id            | type                               | default                        | notes                                                                                                                                                                                                                              |
+| ------------- | ---------------------------------- | ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `states`      | string                             | `Queued,Reading,Drafting,Done` | Comma list of chip labels in machine order. 2 to 8 states; extras are dropped. State 0 is active from mount.                                                                                                                       |
+| `times`       | string                             | `""`                           | Comma-separated activation times in seconds relative to mount start, one per ADVANCE (state 1, state 2, ...). Blank or invalid entries use the default even rhythm; values are clamped into the mount window and forced monotonic. |
+| `badge_state` | number 0-7                         | `1`                            | Index of the state the badges pop beside. Clamped to the states range.                                                                                                                                                             |
+| `badges`      | string                             | `""`                           | Comma list of badge labels rendered after the `badge_state` chip; they pop in (staggered scale + fade) when that state activates. Empty disables. Up to 4.                                                                         |
+| `accent`      | enum `green` \| `blue` \| `violet` | `green`                        | Active-chip accent: green rides `--brand`, blue `--accent`, violet `--accent-2`.                                                                                                                                                   |
+| `exit`        | enum `none` \| `fade` \| `up`      | `none`                         | Frame roots own transitions; the default hold ends the film.                                                                                                                                                                       |
+
+## Usage
+
+```html
+<div
+  class="clip"
+  data-composition-id="state-chip-rail"
+  data-composition-src="./components/state-chip-rail.html"
+  data-variable-values='{"states":"Queued,Reading,Searching,Drafting,Done","times":"1.0,1.9,2.8,3.7","badges":"Drive,Mail,CRM","badge_state":2,"accent":"blue"}'
+  data-start="0"
+  data-duration="5"
+  data-track-index="0"
+></div>
+```
+
+Elastic root: no `data-width`/`data-height`; the rail centers and fits itself
+to whatever box the host clip gives it. Timeline registers under the literal
+`state-chip-rail` key.
+
+## Notes
+
+- Seek-safe snap machine: `tl.set` attribute flips record the prior value on
+  first render in timeline order, so backward seeks restore
+  `pending` / `active` exactly (the flagship frame 04 pattern).
+- State dimming rides color (`color-mix`), never opacity, so it cannot
+  collide with the entrance opacity tweens.
+- Badges keep their layout slot from mount (held at scale 0), so the rail
+  never reflows when they pop.
+
+Golden refs: scramble-reveal (token consumption), toggle-flip (mount-contract
+structure).
diff --git a/registry/components/state-chip-rail/demo.html b/registry/components/state-chip-rail/demo.html
new file mode 100644
index 0000000000..cec81ab064
--- /dev/null
+++ b/registry/components/state-chip-rail/demo.html
@@ -0,0 +1,92 @@
+<!doctype html>
+<!--
+  state-chip-rail demo. This standalone composition mounts the primitive
+  through data-composition-src. Non-default states, times, badges, and accent
+  values prove the variable path while the primitive remains elastic to its
+  host.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>state-chip-rail Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #0b0c0e);
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --surface: #14171c;
+        --border: #343a46;
+        --brand: #71f5a7;
+        --accent: #61a8ff;
+        --accent-2: #c5a3ff;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(
+          ellipse at 50% 44%,
+          var(--bg, #171a20) 0%,
+          var(--bg, #0b0c0e) 72%
+        );
+      }
+
+      .mount-card {
+        width: 80%;
+        height: 30%;
+        left: 10%;
+        top: 35%;
+        container-type: size;
+        overflow: hidden;
+        border: 1px solid color-mix(in srgb, var(--border, #94a3b8) 20%, transparent);
+        border-radius: 30px;
+        background: color-mix(in srgb, var(--surface, #101318) 72%, transparent);
+        box-shadow: 0 40px 100px color-mix(in srgb, var(--bg, #000000) 48%, transparent);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="state-chip-rail-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+      data-fps="30"
+    >
+      <div
+        id="state-chip-rail-mount"
+        class="mount-card clip"
+        data-composition-id="state-chip-rail"
+        data-composition-src="./state-chip-rail.html"
+        data-variable-values='{"states":"Queued,Reading,Searching,Drafting,Done","times":"1.0,1.9,2.8,3.7","badges":"Drive,Mail,CRM","badge_state":2,"accent":"blue"}'
+        data-start="0"
+        data-duration="5"
+        data-track-index="0"
+        data-width="1536"
+        data-height="324"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["state-chip-rail-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/state-chip-rail/registry-item.json b/registry/components/state-chip-rail/registry-item.json
new file mode 100644
index 0000000000..08572083f6
--- /dev/null
+++ b/registry/components/state-chip-rail/registry-item.json
@@ -0,0 +1,83 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "state-chip-rail",
+  "type": "hyperframes:component",
+  "title": "State Chip Rail",
+  "description": "A rail of mono status chips advances a seek-safe data-state snap machine on a cue schedule: active chip ink on surface, done chips dim, pending chips hollow, optional badges pop beside one state.",
+  "tags": ["motion-primitive", "product-demo", "state-machine", "status", "chips", "rail"],
+  "jobs": ["demonstrate"],
+  "family": "product-demo",
+  "profile": "state-machine",
+  "evidence": "Wave J J2-3: generalizes the flagship agent-console status rail (cohere-north frame 04 data-state snap machine)",
+  "syncPoints": [{ "id": "first-advance", "phase": "in", "offset": 1.0 }],
+  "files": [
+    {
+      "path": "state-chip-rail.html",
+      "target": "compositions/components/state-chip-rail.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "states",
+      "type": "string",
+      "role": "content",
+      "label": "States",
+      "description": "Comma-separated chip labels in machine order (2 to 8 states).",
+      "default": "Queued,Reading,Drafting,Done"
+    },
+    {
+      "id": "times",
+      "type": "string",
+      "role": "timing",
+      "label": "Times",
+      "description": "Comma-separated activation times in seconds, one per advance (state 1 onward). Blank entries use the default even rhythm.",
+      "default": ""
+    },
+    {
+      "id": "badge_state",
+      "type": "number",
+      "role": "content",
+      "label": "Badge state",
+      "description": "Index of the state the badges pop beside.",
+      "default": 1,
+      "min": 0,
+      "max": 7,
+      "step": 1
+    },
+    {
+      "id": "badges",
+      "type": "string",
+      "role": "content",
+      "label": "Badges",
+      "description": "Comma-separated badge labels shown beside the badge state. Empty disables.",
+      "default": ""
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Accent token family used by the active chip.",
+      "default": "green",
+      "options": [
+        { "value": "green", "label": "Green" },
+        { "value": "blue", "label": "Blue" },
+        { "value": "violet", "label": "Violet" }
+      ]
+    },
+    {
+      "id": "exit",
+      "type": "enum",
+      "role": "timing",
+      "label": "Exit",
+      "description": "How the rail leaves the frame. Default none: the hold ends the film.",
+      "default": "none",
+      "options": [
+        { "value": "none", "label": "None" },
+        { "value": "fade", "label": "Fade" },
+        { "value": "up", "label": "Up" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/state-chip-rail/state-chip-rail.html b/registry/components/state-chip-rail/state-chip-rail.html
new file mode 100644
index 0000000000..bf48003f87
--- /dev/null
+++ b/registry/components/state-chip-rail/state-chip-rail.html
@@ -0,0 +1,363 @@
+<!doctype html>
+<!--
+  state-chip-rail: HyperFrames video primitive (product demo / state machine)
+
+  A rail of mono status chips advances a data-state snap machine on a cue
+  schedule. CSS alone responds to each chip's [data-state]; the timeline only
+  flips attributes with tl.set, so every advance is an instantaneous snap that
+  is exact in both seek directions (GSAP zero-duration sets record the prior
+  attribute value and restore it on backward seeks). The active chip is ink on
+  surface, done chips dim, pending chips stay hollow. Optional badges pop
+  beside one named state when it activates. Generalizes the flagship
+  agent-console status rail (cohere-north frame 04).
+
+  Variables (declared in data-composition-variables below):
+    - states (string, default "Queued,Reading,Drafting,Done"): comma list of
+      chip labels, in machine order. 2 to 8 states; extras are dropped.
+    - times (string, default ""): comma-separated activation times in seconds
+      relative to mount start, one per ADVANCE (state 1, state 2, ...).
+      Blank or invalid entries use the default even rhythm. Values are
+      clamped into the mount window and forced monotonic.
+    - badge_state (number, default 1): index of the state the badges pop
+      beside. Clamped to the states range.
+    - badges (string, default ""): comma list of badge labels rendered after
+      the badge_state chip; they pop in when that state activates. Empty
+      disables badges. Up to 4.
+    - accent (green | blue | violet, default green): active-chip accent.
+      green -> --brand, blue -> --accent, violet -> --accent-2.
+    - exit ("none" | "fade" | "up", default "none"): frame roots own
+      transitions; the default hold-ends-the-film.
+
+  Envelope, fixed IN with elastic HOLD (never gsap.timeScale()):
+    IN    = chip cascade (~0.8s) then the advance schedule; the default
+            rhythm spreads advances so the final state lands ~1s before the
+            mount window closes.
+    HOLD  = still after the last advance; nothing floats, nothing loops.
+    OUT   = 0 when exit is "none"; else 0.45s fade / fade-up of the rail.
+
+  Mount contract: elastic root, no data-width/data-height, styled via #root
+  only, container-type: size, one paused timeline registered under the
+  literal "state-chip-rail" key. Deterministic and seek-safe: fromTo
+  entrances, attribute snaps via tl.set, no CSS transitions, no Date.now,
+  no randomness. State dimming rides color (color-mix), never opacity, so it
+  can never collide with the entrance opacity tweens.
+-->
+<html
+  lang="en"
+  data-composition-id="state-chip-rail"
+  data-composition-duration="5"
+  data-composition-variables='[
+    { "id": "states", "type": "string", "role": "content", "label": "States", "description": "Comma-separated chip labels in machine order (2 to 8 states).", "default": "Queued,Reading,Drafting,Done" },
+    { "id": "times", "type": "string", "role": "timing", "label": "Times", "description": "Comma-separated activation times in seconds, one per advance (state 1 onward). Blank entries use the default even rhythm.", "default": "" },
+    { "id": "badge_state", "type": "number", "role": "content", "label": "Badge state", "description": "Index of the state the badges pop beside.", "default": 1, "min": 0, "max": 7, "step": 1 },
+    { "id": "badges", "type": "string", "role": "content", "label": "Badges", "description": "Comma-separated badge labels shown beside the badge state. Empty disables.", "default": "" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Accent token family used by the active chip.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "How the rail leaves the frame. Default none: the hold ends the film.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>State Chip Rail</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="state-chip-rail" data-duration="5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            background: var(--bg, transparent);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            pointer-events: none;
+          }
+
+          .scr-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+          }
+
+          .scr-rail {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-wrap: nowrap;
+            max-width: 94cqw;
+            gap: var(--scr-gap, 0.8em);
+            font-size: var(--scr-font, 2cqmin);
+            will-change: transform, opacity;
+          }
+
+          .scr-chip,
+          .scr-badge {
+            display: flex;
+            flex: 0 0 auto;
+            align-items: center;
+            gap: 0.55em;
+            padding: 0.62em 1.05em;
+            overflow: hidden;
+            border: 0.16cqmin solid var(--border, #334155);
+            border-radius: 100cqmax;
+            font-weight: 500;
+            line-height: 1;
+            letter-spacing: 0.14em;
+            text-transform: uppercase;
+            white-space: nowrap;
+            will-change: transform, opacity;
+          }
+
+          .scr-dot {
+            flex: 0 0 auto;
+            width: 0.5em;
+            aspect-ratio: 1;
+            border: 0.16cqmin solid var(--muted, #94a3b8);
+            border-radius: 50%;
+            background: transparent;
+          }
+
+          /* The snap machine: presentation is pure CSS on [data-state]; the
+             timeline only flips the attribute. Dimming rides color, never
+             opacity, so it cannot fight the entrance opacity tweens. */
+          .scr-chip[data-state="pending"] {
+            border-color: color-mix(in srgb, var(--border, #334155) 80%, transparent);
+            background: transparent;
+            color: color-mix(in srgb, var(--muted, #94a3b8) 78%, transparent);
+          }
+
+          .scr-chip[data-state="active"] {
+            border-color: color-mix(in srgb, var(--scr-accent) 62%, var(--border, #334155));
+            background: var(--surface, #131a24);
+            color: var(--fg, #f8fafc);
+          }
+          .scr-chip[data-state="active"] .scr-dot {
+            border-color: transparent;
+            background: var(--scr-accent, var(--brand, #71f5a7));
+          }
+
+          .scr-chip[data-state="done"] {
+            border-color: color-mix(in srgb, var(--border, #334155) 45%, transparent);
+            background: transparent;
+            color: color-mix(in srgb, var(--muted, #94a3b8) 42%, transparent);
+          }
+          .scr-chip[data-state="done"] .scr-dot {
+            border-color: transparent;
+            background: color-mix(in srgb, var(--scr-accent, #71f5a7) 38%, transparent);
+          }
+
+          .scr-badge {
+            padding: 0.5em 0.9em;
+            border-color: color-mix(in srgb, var(--border, #334155) 70%, transparent);
+            color: color-mix(in srgb, var(--muted, #94a3b8) 88%, transparent);
+            font-size: 0.82em;
+          }
+        </style>
+
+        <div
+          id="state-chip-rail-clip"
+          class="scr-clip clip"
+          data-start="0"
+          data-duration="5"
+          data-track-index="0"
+        >
+          <div class="scr-rail" role="list"></div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            // Literal id, never read off the DOM: the flattening step strips
+            // data-composition-id from the mounted root (see toggle-flip).
+            var compositionId = "state-chip-rail";
+            var root = document.getElementById("root");
+            var rail = root.querySelector(".scr-rail");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            function commaList(value, max) {
+              return String(value == null ? "" : value)
+                .split(",")
+                .map(function (token) {
+                  return token.trim();
+                })
+                .filter(function (token) {
+                  return token !== "";
+                })
+                .slice(0, max);
+            }
+
+            var states = commaList(vars.states, 8);
+            if (states.length === 0) states = ["Queued", "Reading", "Drafting", "Done"];
+            var count = states.length;
+
+            var badges = commaList(vars.badges, 4);
+            var badgeStateRaw = Math.round(Number(vars.badge_state));
+            var badgeState = Number.isFinite(badgeStateRaw)
+              ? Math.max(0, Math.min(count - 1, badgeStateRaw))
+              : Math.min(1, count - 1);
+
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            root.style.setProperty("--scr-accent", accentColors[accent]);
+
+            // Build the rail: chips in machine order, badges directly after
+            // the badge_state chip. State 0 is active from mount.
+            var chips = states.map(function (label, index) {
+              var chip = document.createElement("div");
+              chip.className = "scr-chip";
+              chip.setAttribute("role", "listitem");
+              chip.setAttribute("data-state", index === 0 ? "active" : "pending");
+              var dot = document.createElement("span");
+              dot.className = "scr-dot";
+              dot.setAttribute("aria-hidden", "true");
+              var text = document.createElement("span");
+              text.textContent = label;
+              chip.appendChild(dot);
+              chip.appendChild(text);
+              return chip;
+            });
+            var badgeElements = badges.map(function (label) {
+              var badge = document.createElement("div");
+              badge.className = "scr-badge";
+              badge.textContent = label;
+              return badge;
+            });
+            chips.forEach(function (chip, index) {
+              rail.appendChild(chip);
+              if (index === badgeState) {
+                badgeElements.forEach(function (badge) {
+                  rail.appendChild(badge);
+                });
+              }
+            });
+            rail.setAttribute("aria-label", states.join(", "));
+
+            // Deterministic fit: wide-tracked mono at ~0.76em per glyph, plus
+            // chip padding, dot, and rail gaps, all measured in em.
+            var railEm = (count - 1 + badges.length) * 0.8;
+            states.forEach(function (label) {
+              railEm += Array.from(label).length * 0.76 + 3.1;
+            });
+            badges.forEach(function (label) {
+              railEm += (Array.from(label).length * 0.76 + 2.5) * 0.82;
+            });
+            var fontCqw = Math.min(2.4, 90 / Math.max(1, railEm));
+            root.style.setProperty("--scr-font", "min(" + fontCqw.toFixed(3) + "cqw, 9cqh)");
+
+            // RETIME RANGE: fixed IN cascade + advance schedule, elastic
+            // still HOLD, optional OUT.
+            var OUT_BASE = 0.45;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "5"));
+            var OUT = exit === "none" ? 0 : Math.min(OUT_BASE, duration * 0.2);
+            var avail = duration - OUT;
+
+            var CHIP = Math.min(0.45, Math.max(0.2, avail * 0.15));
+            var entryGap = Math.min(0.08, Math.max(0.02, avail * 0.02));
+            var entryEnd = 0.12 + entryGap * (count - 1) + CHIP;
+
+            // Default rhythm: advances spread evenly from just after the
+            // cascade to ~1s before the window closes.
+            var firstAdvance = Math.min(Math.max(entryEnd + 0.15, 0.9), Math.max(0.2, avail - 0.6));
+            var lastAdvance = Math.max(firstAdvance, avail - 1.0);
+            var advanceCount = count - 1;
+            var timesList = String(vars.times == null ? "" : vars.times).split(",");
+            var previous = 0.15;
+            var advances = [];
+            for (var k = 0; k < advanceCount; k += 1) {
+              var fallback =
+                advanceCount > 1
+                  ? firstAdvance + (k * (lastAdvance - firstAdvance)) / (advanceCount - 1)
+                  : firstAdvance;
+              var cueText = (timesList[k] || "").trim();
+              var cue = Number(cueText);
+              var start = cueText !== "" && Number.isFinite(cue) ? cue : fallback;
+              start = Math.max(0.15, Math.min(start, Math.max(0.15, avail - 0.45)));
+              start = Math.max(start, previous + 0.05);
+              previous = start;
+              advances.push(start);
+            }
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: chips cascade into the rail. Explicit both-endpoints state
+            // so any seek is exact. Badges hold at scale 0 until their pop
+            // (they keep their layout slot, so the rail never reflows).
+            chips.forEach(function (chip, index) {
+              gsap.set(chip, { opacity: 0, y: "2.5cqh" });
+              tl.fromTo(
+                chip,
+                { opacity: 0, y: "2.5cqh" },
+                { opacity: 1, y: "0cqh", duration: CHIP, ease: "power3.out" },
+                0.12 + entryGap * index,
+              );
+            });
+
+            // The snap machine: pure attribute flips. GSAP records the prior
+            // value on first render in timeline order, so backward seeks
+            // restore pending / active exactly.
+            advances.forEach(function (start, index) {
+              var stateIndex = index + 1;
+              tl.set(chips[stateIndex], { attr: { "data-state": "active" } }, start);
+              tl.set(chips[stateIndex - 1], { attr: { "data-state": "done" } }, start);
+            });
+
+            // Badges pop beside their state as it activates.
+            if (badgeElements.length > 0) {
+              var popStart = badgeState === 0 ? entryEnd + 0.1 : advances[badgeState - 1] + 0.12;
+              popStart = Math.min(popStart, Math.max(0.2, avail - 0.4));
+              badgeElements.forEach(function (badge, index) {
+                gsap.set(badge, { opacity: 0, scale: 0 });
+                tl.fromTo(
+                  badge,
+                  { opacity: 0, scale: 0 },
+                  { opacity: 1, scale: 1, duration: 0.4, ease: "power3.out" },
+                  popStart + 0.14 * index,
+                );
+              });
+            }
+
+            // HOLD: intentionally still. The resolved machine reads as a frame.
+
+            // OUT: the whole rail leaves together.
+            if (exit !== "none") {
+              var OUT_START = duration - OUT;
+              tl.to(rail, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+              if (exit === "up") {
+                tl.to(rail, { y: "-3cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              }
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/sticky-mock-swap/demo.html b/registry/components/sticky-mock-swap/demo.html
new file mode 100644
index 0000000000..05b48bd24b
--- /dev/null
+++ b/registry/components/sticky-mock-swap/demo.html
@@ -0,0 +1,86 @@
+<!doctype html>
+<!--
+  sticky-mock-swap demo. This standalone composition mounts the primitive
+  with four non-default captions and a green accent, proving that variable
+  parsing and caption-count-driven phase thresholds flow through the mount.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Sticky Mock Swap Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0b0c0e;
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --muted: #9ca3af;
+        --surface: #151922;
+        --border: #3b4352;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-body: Inter, system-ui, sans-serif;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 38% 42%, #18211f 0%, #0b0c0e 68%);
+      }
+
+      .mount-card {
+        width: 84%;
+        height: 76%;
+        left: 8%;
+        top: 12%;
+        container-type: size;
+        overflow: hidden;
+        border: 1px solid rgba(148, 163, 184, 0.2);
+        border-radius: 30px;
+        background: var(--bg);
+        box-shadow: 0 44px 120px rgba(0, 0, 0, 0.5);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="sticky-mock-swap-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="6"
+      data-fps="30"
+    >
+      <div
+        id="sticky-mock-swap-mount"
+        class="mount-card clip"
+        data-composition-id="sticky-mock-swap"
+        data-composition-src="./sticky-mock-swap.html"
+        data-variable-values='{"captions":"Draft instantly,Review together,Publish safely,Measure impact","accent":"green"}'
+        data-start="0"
+        data-duration="6"
+        data-track-index="0"
+        data-width="1613"
+        data-height="821"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["sticky-mock-swap-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/sticky-mock-swap/registry-item.json b/registry/components/sticky-mock-swap/registry-item.json
new file mode 100644
index 0000000000..009a056dc9
--- /dev/null
+++ b/registry/components/sticky-mock-swap/registry-item.json
@@ -0,0 +1,42 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "sticky-mock-swap",
+  "type": "hyperframes:component",
+  "title": "Sticky Mock Swap",
+  "description": "A pinned product mock cross-fades through accent-tinted feature states while matching captions rise, hold, and exit beside it.",
+  "tags": ["motion-primitive", "product-demo", "sticky", "mock", "crossfade", "feature-tour"],
+  "jobs": ["demonstrate"],
+  "family": "product-demo",
+  "profile": "sticky-swap",
+  "evidence": "Vercel and Raycast launch-page motion research: pinned product mock with caption-driven threshold swaps",
+  "files": [
+    {
+      "path": "sticky-mock-swap.html",
+      "target": "compositions/components/sticky-mock-swap.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "captions",
+      "type": "string",
+      "role": "content",
+      "label": "Captions",
+      "description": "Comma-separated feature captions shown beside the pinned mock.",
+      "default": "Instant previews,Zero config,Ship on Friday"
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Accent tint used across the mock states.",
+      "default": "violet",
+      "options": [
+        { "value": "green", "label": "Green" },
+        { "value": "blue", "label": "Blue" },
+        { "value": "violet", "label": "Violet" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/sticky-mock-swap/sticky-mock-swap.html b/registry/components/sticky-mock-swap/sticky-mock-swap.html
new file mode 100644
index 0000000000..47d5f7b7fe
--- /dev/null
+++ b/registry/components/sticky-mock-swap/sticky-mock-swap.html
@@ -0,0 +1,465 @@
+<!doctype html>
+<!--
+  sticky-mock-swap: HyperFrames video primitive (product-demo / demonstrate)
+
+  Concept: a product mock stays pinned while captions advance beside it. Each
+  caption rises along a shallow arc, holds, pauses before dismissal, then exits
+  upward along a second arc. At every caption threshold, only the mock content
+  cross-fades to the corresponding accent-tinted skeleton state.
+
+  Variables:
+    - captions (comma-separated string): feature captions. Whitespace and empty
+      entries are removed, with the declared default used when none remain.
+    - accent (green | blue | violet): tint shared by all mock states.
+
+  Envelope (caption-count driven, never timeScale):
+    PHASE = D / parsed caption count.
+    IN_BASE = 0.38s per phase for the caption rise and mock cross-fade.
+    HOLD = elastic per phase. Longer mounts stretch only this still-readable
+           interval, with a subtle seek-driven pulse inside the pinned mock.
+    OUT_BASE = 0.28s exit-delay plus 0.32s caption exit per phase.
+    If a phase is shorter than the fixed motion envelope, IN and OUT compress
+    proportionally and HOLD becomes zero. At the default D=6 and three captions,
+    the 0.28s stillness before each exit stays inside the 0.2s to 0.4s house rule.
+
+  Mount contract: this is a template-wrapped sub-composition. The runtime clones
+  only template contents. #root fills the host-owned box, has no data-width or
+  data-height, and establishes the cqw/cqh basis for every internal measurement.
+  One paused timeline is registered under the hardcoded sticky-mock-swap id.
+-->
+<html
+  lang="en"
+  data-composition-id="sticky-mock-swap"
+  data-composition-duration="6"
+  data-composition-variables='[
+    { "id": "captions", "type": "string", "role": "content", "label": "Captions", "description": "Comma-separated feature captions shown beside the pinned mock.", "default": "Instant previews,Zero config,Ship on Friday" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Accent tint used across the mock states.", "default": "violet", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Sticky Mock Swap</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="sticky-mock-swap" data-duration="6" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            background: var(--bg, #0b0c0e);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .sms-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+          }
+
+          .sms-shell {
+            width: 100%;
+            height: 100%;
+            display: grid;
+            grid-template-columns: minmax(0, 1.16fr) minmax(0, 0.84fr);
+            align-items: center;
+            gap: 5cqw;
+            padding: 8cqh 7cqw;
+          }
+
+          .sms-mock {
+            position: relative;
+            width: 100%;
+            height: 70cqh;
+            overflow: hidden;
+            border: 0.12cqmin solid color-mix(in srgb, var(--border, #334155) 74%, transparent);
+            border-radius: 2.8cqmin;
+            background: var(--surface, #121722);
+            box-shadow: 0 4cqh 10cqh color-mix(in srgb, #000 46%, transparent);
+          }
+
+          .sms-states,
+          .sms-state {
+            position: absolute;
+            inset: 0;
+          }
+
+          .sms-state {
+            --sms-live: 0.64;
+            display: grid;
+            grid-template-rows: 8cqh minmax(0, 1fr);
+            overflow: hidden;
+            opacity: 0;
+            background: color-mix(in srgb, var(--surface, #121722) 94%, var(--sms-accent));
+          }
+
+          .sms-toolbar {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 0 2.2cqw;
+            border-bottom: 0.1cqmin solid
+              color-mix(in srgb, var(--border, #334155) 62%, transparent);
+            background: color-mix(in srgb, #0f131c 92%, var(--sms-accent));
+          }
+
+          .sms-dots {
+            display: flex;
+            gap: 0.55cqw;
+          }
+
+          .sms-dots i {
+            width: 0.62cqw;
+            aspect-ratio: 1;
+            border-radius: 50%;
+            background: color-mix(in srgb, var(--muted, #94a3b8) 46%, transparent);
+          }
+
+          .sms-status {
+            width: 7.4cqw;
+            height: 1.2cqh;
+            border-radius: 1cqmin;
+            opacity: var(--sms-live);
+            background: var(--sms-accent);
+          }
+
+          .sms-window {
+            display: grid;
+            grid-template-columns: 24% minmax(0, 1fr);
+            min-height: 0;
+          }
+
+          .sms-sidebar {
+            display: flex;
+            flex-direction: column;
+            gap: 2.3cqh;
+            padding: 3.2cqh 1.8cqw;
+            border-right: 0.1cqmin solid color-mix(in srgb, var(--border, #334155) 52%, transparent);
+            background: color-mix(in srgb, #0e121a 94%, var(--sms-accent));
+          }
+
+          .sms-sidebar i,
+          .sms-title,
+          .sms-subtitle,
+          .sms-block {
+            display: block;
+            border-radius: 0.7cqmin;
+            background: color-mix(in srgb, var(--muted, #94a3b8) 20%, transparent);
+          }
+
+          .sms-sidebar i {
+            width: 82%;
+            height: 1.2cqh;
+          }
+
+          .sms-sidebar i:first-child {
+            width: 100%;
+            background: color-mix(in srgb, var(--sms-accent) 54%, transparent);
+          }
+
+          .sms-main {
+            position: relative;
+            min-width: 0;
+            padding: 4.4cqh 2.5cqw;
+          }
+
+          .sms-title {
+            width: 46%;
+            height: 2.1cqh;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 44%, transparent);
+          }
+
+          .sms-subtitle {
+            width: 68%;
+            height: 1.2cqh;
+            margin-top: 1.8cqh;
+          }
+
+          .sms-canvas {
+            position: absolute;
+            inset: 11.5cqh 2.5cqw 4.2cqh;
+            display: grid;
+            grid-template-columns: repeat(2, minmax(0, 1fr));
+            grid-template-rows: repeat(2, minmax(0, 1fr));
+            gap: 1.5cqmin;
+          }
+
+          .sms-block {
+            position: relative;
+            overflow: hidden;
+            border: 0.1cqmin solid color-mix(in srgb, var(--border, #334155) 54%, transparent);
+            background: color-mix(in srgb, #263044 54%, transparent);
+          }
+
+          .sms-block::after {
+            content: "";
+            position: absolute;
+            left: 12%;
+            right: 12%;
+            bottom: 16%;
+            height: 0.8cqh;
+            border-radius: 1cqmin;
+            opacity: var(--sms-live);
+            background: var(--sms-accent);
+          }
+
+          .sms-state--2 .sms-canvas {
+            grid-template-columns: 1fr;
+            grid-template-rows: repeat(4, minmax(0, 1fr));
+          }
+
+          .sms-state--2 .sms-block::after {
+            left: 8%;
+            right: 35%;
+            bottom: 28%;
+          }
+
+          .sms-state--3 .sms-canvas {
+            grid-template-columns: 1.45fr 0.55fr;
+            grid-template-rows: repeat(3, minmax(0, 1fr));
+          }
+
+          .sms-state--3 .sms-block:first-child {
+            grid-row: 1 / 4;
+          }
+
+          .sms-state--3 .sms-block::after {
+            left: 10%;
+            right: 18%;
+            bottom: 18%;
+          }
+
+          .sms-captions {
+            position: relative;
+            width: 100%;
+            height: 32cqh;
+          }
+
+          .sms-caption {
+            position: absolute;
+            inset: 0;
+            display: flex;
+            align-items: center;
+            max-width: 34cqw;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: 5.8cqmin;
+            font-weight: 720;
+            line-height: 1.04;
+            letter-spacing: -0.04em;
+            overflow-wrap: anywhere;
+            opacity: 0;
+            will-change: transform, opacity;
+          }
+
+          .sms-caption::before {
+            content: "";
+            flex: 0 0 auto;
+            align-self: center;
+            width: 0.75cqw;
+            height: 9cqh;
+            margin-right: 1.5cqw;
+            border-radius: 1cqmin;
+            background: var(--sms-accent);
+            box-shadow: 0 0 2cqmin color-mix(in srgb, var(--sms-accent) 48%, transparent);
+          }
+        </style>
+
+        <div
+          id="sticky-mock-swap-clip"
+          class="sms-clip clip"
+          data-start="0"
+          data-duration="6"
+          data-track-index="0"
+        >
+          <div class="sms-shell">
+            <div class="sms-mock" aria-hidden="true">
+              <div class="sms-states"></div>
+            </div>
+            <div class="sms-captions" aria-label="Feature captions"></div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var captionsHost = root.querySelector(".sms-captions");
+            var statesHost = root.querySelector(".sms-states");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var DEFAULT_CAPTIONS = ["Instant previews", "Zero config", "Ship on Friday"];
+            var captionsSource =
+              vars.captions == null ? DEFAULT_CAPTIONS.join(",") : String(vars.captions);
+            var captions = captionsSource.split(",").reduce(function (parsed, token) {
+              var caption = token.trim();
+              if (caption) parsed.push(caption);
+              return parsed;
+            }, []);
+            if (captions.length === 0) captions = DEFAULT_CAPTIONS.slice();
+
+            var accent =
+              vars.accent === "green" || vars.accent === "blue" || vars.accent === "violet"
+                ? vars.accent
+                : "violet";
+            var accentColors = {
+              green: "var(--brand, #34d399)",
+              blue: "var(--accent, #38bdf8)",
+              violet: "var(--accent-2, #a78bfa)",
+            };
+            root.style.setProperty("--sms-accent", accentColors[accent]);
+
+            var captionElements = [];
+            var stateElements = [];
+
+            captions.forEach(function (captionText, index) {
+              var caption = document.createElement("div");
+              caption.className = "sms-caption";
+              caption.textContent = captionText;
+              captionsHost.appendChild(caption);
+              captionElements.push(caption);
+
+              var state = document.createElement("div");
+              state.className = "sms-state sms-state--" + ((index % 3) + 1);
+              state.setAttribute("aria-hidden", "true");
+              state.innerHTML =
+                '<div class="sms-toolbar"><span class="sms-dots"><i></i><i></i><i></i></span><span class="sms-status"></span></div>' +
+                '<div class="sms-window"><aside class="sms-sidebar"><i></i><i></i><i></i><i></i></aside>' +
+                '<main class="sms-main"><span class="sms-title"></span><span class="sms-subtitle"></span>' +
+                '<div class="sms-canvas"><i class="sms-block"></i><i class="sms-block"></i><i class="sms-block"></i><i class="sms-block"></i></div></main></div>';
+              statesHost.appendChild(state);
+              stateElements.push(state);
+            });
+
+            var durationValue = parseFloat(root.dataset.duration || "6");
+            var duration = Number.isFinite(durationValue) ? Math.max(0.001, durationValue) : 6;
+
+            // Caption count owns the threshold grid. Longer durations add only
+            // to each phase's HOLD, never by scaling the completed timeline.
+            var phaseDuration = duration / captions.length;
+            var RISE_BASE = 0.38;
+            var EXIT_DELAY_BASE = 0.28;
+            var EXIT_BASE = 0.32;
+            var MOTION_BASE = RISE_BASE + EXIT_DELAY_BASE + EXIT_BASE;
+            var motionScale = phaseDuration < MOTION_BASE ? phaseDuration / MOTION_BASE : 1;
+            var RISE = RISE_BASE * motionScale;
+            var EXIT_DELAY = EXIT_DELAY_BASE * motionScale;
+            var EXIT = EXIT_BASE * motionScale;
+            var HOLD = Math.max(0, phaseDuration - RISE - EXIT_DELAY - EXIT);
+            var SWAP = Math.min(0.28 * motionScale, phaseDuration * 0.4);
+
+            captionElements.forEach(function (caption, index) {
+              gsap.set(caption, { opacity: 0, x: "-1.2cqw", y: "3.6cqh" });
+              gsap.set(stateElements[index], { opacity: index === 0 ? 1 : 0, "--sms-live": 0.64 });
+            });
+
+            var tl = gsap.timeline({ paused: true });
+
+            captionElements.forEach(function (caption, index) {
+              var phaseStart = index * phaseDuration;
+              var riseArc = RISE * 0.72;
+              var exitStart = phaseStart + RISE + HOLD + EXIT_DELAY;
+              var exitArc = EXIT * 0.32;
+
+              // IN: two authored segments form a shallow arrival arc.
+              tl.fromTo(
+                caption,
+                { opacity: 0, x: "-1.2cqw", y: "3.6cqh" },
+                {
+                  opacity: 1,
+                  x: "0.45cqw",
+                  y: "-0.28cqh",
+                  duration: riseArc,
+                  ease: "power2.out",
+                },
+                phaseStart,
+              );
+              tl.to(
+                caption,
+                {
+                  x: "0cqw",
+                  y: "0cqh",
+                  duration: RISE - riseArc,
+                  ease: "power2.out",
+                },
+                phaseStart + riseArc,
+              );
+
+              if (index > 0) {
+                tl.to(
+                  stateElements[index - 1],
+                  { opacity: 0, duration: SWAP, ease: "power2.in" },
+                  phaseStart,
+                );
+                tl.fromTo(
+                  stateElements[index],
+                  { opacity: 0 },
+                  { opacity: 1, duration: SWAP, ease: "power2.out" },
+                  phaseStart,
+                );
+              }
+
+              // HOLD: the mock content breathes without moving the pinned panel.
+              if (HOLD >= 0.4) {
+                tl.to(
+                  stateElements[index],
+                  {
+                    "--sms-live": 0.9,
+                    duration: HOLD / 2,
+                    ease: "sine.inOut",
+                    yoyo: true,
+                    repeat: 1,
+                  },
+                  phaseStart + RISE,
+                );
+              }
+
+              // OUT: EXIT_DELAY is empty stillness, then two segments arc upward.
+              tl.to(
+                caption,
+                {
+                  x: "0.42cqw",
+                  y: "-0.9cqh",
+                  duration: exitArc,
+                  ease: "power2.in",
+                },
+                exitStart,
+              );
+              tl.to(
+                caption,
+                {
+                  opacity: 0,
+                  x: "-1.1cqw",
+                  y: "-4.5cqh",
+                  duration: EXIT - exitArc,
+                  ease: "power2.in",
+                },
+                exitStart + exitArc,
+              );
+            });
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["sticky-mock-swap"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/stitched-text-draw/README.md b/registry/components/stitched-text-draw/README.md
new file mode 100644
index 0000000000..32dba50821
--- /dev/null
+++ b/registry/components/stitched-text-draw/README.md
@@ -0,0 +1,45 @@
+# stitched-text-draw
+
+Wave M experiment (M6). Text drawn as thread stitches: letters draw thread-first with a needle dot leading each stroke's reveal front, needle-hole dots appearing at every stitch boundary behind it, and a tiny thread-tail overshoot as each letter finishes (the thread sticks out past the stroke end along its exit tangent, then is pulled snug).
+
+4s authored, elastic HOLD, exit `none` by default.
+
+## Letter path approach
+
+A single-stroke display alphabet (A-Z 0-9, plus space) authored as a compact stroke table inside the primitive: each glyph is a list of strokes, each stroke built from line points and flattened elliptical arcs in a 70x100 glyph box. At mount every stroke is resampled to even stitch-scale steps and displaced by seeded perpendicular jitter (fixed LCG seed `0x57174c3d`), so every stitch sits at a slightly different angle: the hand-sewn wobble. Letter x-offsets are baked into the points so all paths share one flat SVG coordinate space and a single global needle can read `getPointAtLength` coordinates directly.
+
+## Draw mechanic (attribute dashoffset, no mask)
+
+The reveal is ATTRIBUTE-driven `stroke-dashoffset` on the stitched path itself (gotcha 8: the CSS property leaves stale paint under reverse seeks; and SVG masks do not reliably repaint under seeks, so no `<mask>`/`<clipPath>`). Each path's dasharray is its stitch pattern (dash, gap, dash, ...) built to sum exactly to the measured path length `L` (via `getTotalLength`, never the `pathLength` attribute, never `non-scaling-stroke` on dashed paths), followed by one closing gap of `L` (total `2L`). Animating the dashoffset attribute from `L` to `0` sweeps the reveal front from start to end; the visible stitches slide the last few units into their final positions as the offset reaches zero, which reads as the thread being pulled through.
+
+## Variables
+
+| id       | type   | default  | notes                                                                                                                             |
+| -------- | ------ | -------- | --------------------------------------------------------------------------------------------------------------------------------- |
+| `text`   | string | `STITCH` | Uppercased; A-Z 0-9 and space, other characters render as spaces; clamped to 12 characters.                                       |
+| `stitch` | enum   | `fine`   | `fine` (dash 6.5 / gap 4.5 / width 2.6) or `coarse` (dash 10 / gap 7 / width 4.2) in glyph units, with matching jitter amplitude. |
+| `accent` | enum   | `green`  | Thread color: green rides `--brand`, blue rides `--accent`, violet rides `--accent-2`.                                            |
+| `exit`   | enum   | `none`   | `none` holds until the cut; `fade` departs opacity-only; `up` rises out.                                                          |
+
+## Mount
+
+```html
+<div
+  class="clip"
+  data-composition-id="stitched-text-draw"
+  data-composition-src="./stitched-text-draw.html"
+  data-variable-values='{"text":"SEWN 24","stitch":"coarse","accent":"violet"}'
+  data-start="0"
+  data-duration="4"
+  data-track-index="0"
+></div>
+```
+
+Elastic root: no `data-width`/`data-height`; it fills whatever box the host clip gives it. Timeline registers under the literal `stitched-text-draw` key.
+
+## Notes
+
+- Zero per-element tweens (gotcha 9): one inert anchor tween spans the authored duration; a painter recomputes every stroke's dashoffset attribute, every hole's visibility, and the needle/tail pose as pure functions of `tl.time()` on each update. Idempotent writes; eventful seeks (`suppressEvents=false`) land identical frames in any order and either direction.
+- Letters draw strictly in sequence (windows proportional to stitch length, fixed needle-jump pause between letters), so one global needle serves the whole word.
+- The per-stroke ease is a backOut: the ~10% overshoot region past the stroke end is what drives the thread-tail (up to 16 glyph units), which retracts to zero as the ease settles.
+- The hold is truly still: every stroke sits at dashoffset 0, all holes visible, needle and tail at opacity 0.
diff --git a/registry/components/stitched-text-draw/demo.html b/registry/components/stitched-text-draw/demo.html
new file mode 100644
index 0000000000..1f17ea68ca
--- /dev/null
+++ b/registry/components/stitched-text-draw/demo.html
@@ -0,0 +1,85 @@
+<!doctype html>
+<!--
+  stitched-text-draw demo. FULL-BLEED light mount: the primitive fills the
+  whole 1920x1080 frame on a light token block. Non-default text, stitch,
+  and accent values prove the variable path.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Stitched Text Draw Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #eef0f3);
+      }
+
+      #root {
+        --bg: #eef0f3;
+        --fg: #14161b;
+        --muted: #5b6472;
+        --surface: #ffffff;
+        --border: #d3d8e0;
+        --brand: #3f3f46;
+        --accent: #3f3f46;
+        --accent-2: #3f3f46;
+        --font-display: "Inter", system-ui, sans-serif;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 42%, #f7f8fa 0%, var(--bg, #eef0f3) 72%);
+      }
+
+      .mount-bleed {
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        container-type: size;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="stitched-text-draw-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="stitched-text-draw-mount"
+        class="mount-bleed clip"
+        data-composition-id="stitched-text-draw"
+        data-composition-src="./stitched-text-draw.html"
+        data-variable-values='{"text":"SEWN 24","stitch":"coarse","accent":"violet"}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="1920"
+        data-height="1080"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["stitched-text-draw-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/stitched-text-draw/registry-item.json b/registry/components/stitched-text-draw/registry-item.json
new file mode 100644
index 0000000000..21d1b4c70e
--- /dev/null
+++ b/registry/components/stitched-text-draw/registry-item.json
@@ -0,0 +1,68 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "stitched-text-draw",
+  "type": "hyperframes:component",
+  "title": "Stitched Text Draw",
+  "description": "Text drawn as thread stitches: a single-stroke display alphabet draws via attribute-driven dashoffset with stitch-tuned dash patterns, seeded angle jitter, needle-hole dots, a leading needle, and a thread-tail overshoot per letter.",
+  "tags": ["motion-primitive", "experiment", "type", "craft", "stitch", "deterministic"],
+  "jobs": ["reveal"],
+  "family": "text-effects",
+  "profile": "thread-stitch",
+  "evidence": "Wave M experiment M6: wild-scout stitched-line text draw (score 16), thread-stitch wordmark reveal for craft/authenticity beats",
+  "syncPoints": [{ "id": "stitch-done", "phase": "in", "offset": 3.05 }],
+  "files": [
+    {
+      "path": "stitched-text-draw.html",
+      "target": "compositions/components/stitched-text-draw.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "text",
+      "type": "string",
+      "role": "content",
+      "label": "Text",
+      "description": "Uppercased A-Z 0-9 and space, clamped to 12 characters.",
+      "default": "STITCH"
+    },
+    {
+      "id": "stitch",
+      "type": "enum",
+      "role": "style",
+      "label": "Stitch",
+      "description": "Dash/gap scale, thread width, and jitter amplitude.",
+      "default": "fine",
+      "options": [
+        { "value": "fine", "label": "Fine" },
+        { "value": "coarse", "label": "Coarse" }
+      ]
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Thread color: green rides --brand, blue rides --accent, violet rides --accent-2.",
+      "default": "green",
+      "options": [
+        { "value": "green", "label": "Green" },
+        { "value": "blue", "label": "Blue" },
+        { "value": "violet", "label": "Violet" }
+      ]
+    },
+    {
+      "id": "exit",
+      "type": "enum",
+      "role": "timing",
+      "label": "Exit",
+      "description": "Optional departure. Default none: the stitched word holds until the frame cuts.",
+      "default": "none",
+      "options": [
+        { "value": "none", "label": "None" },
+        { "value": "fade", "label": "Fade" },
+        { "value": "up", "label": "Up" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/stitched-text-draw/stitched-text-draw.html b/registry/components/stitched-text-draw/stitched-text-draw.html
new file mode 100644
index 0000000000..5a11493a08
--- /dev/null
+++ b/registry/components/stitched-text-draw/stitched-text-draw.html
@@ -0,0 +1,865 @@
+<!doctype html>
+<!--
+  stitched-text-draw: HyperFrames video primitive (type / craft, Wave M
+  experiment M6)
+
+  Text drawn as thread stitches. Letters come from a single-stroke display
+  alphabet (A-Z 0-9) authored as a compact stroke table of lines and
+  elliptical arcs per glyph, flattened to polylines at mount, resampled to
+  stitch-scale steps, and displaced by seeded perpendicular jitter so every
+  stitch sits at a slightly different angle (hand-sewn wobble). Each stroke
+  draws thread-first: a needle dot leads the reveal front, needle-hole dots
+  appear at every stitch boundary behind it, and each letter finishes with
+  a tiny thread-tail overshoot (the thread sticks out past the stroke end
+  along its exit tangent, then is pulled snug).
+
+  Draw mechanic (gotcha 8, and gotcha "nested SVG mask doesn't repaint
+  under seek"): the reveal is ATTRIBUTE-driven stroke-dashoffset on the
+  stitched path itself, using the double-dash trick instead of an SVG mask.
+  Each path's dasharray is its stitch pattern (dash, gap, dash, ...) built
+  to sum EXACTLY to the path length L, followed by one closing gap of L
+  (total 2L). Animating the stroke-dashoffset attribute from L to 0 sweeps
+  the reveal front from start to end while the visible dashes settle into
+  their final stitch positions at offset 0. No <mask>, no <clipPath>, no
+  CSS dashoffset property (Chrome under-invalidates it on reverse seeks);
+  the painter primes and updates the attribute via setAttribute.
+
+  Variables (declared in data-composition-variables below):
+    - text (string, default "STITCH"): uppercased; A-Z 0-9 and space,
+      other characters render as spaces; clamped to 12 characters.
+    - stitch ("fine" | "coarse", default "fine"): dash/gap scale, thread
+      width, and jitter amplitude.
+    - accent ("green" | "blue" | "violet", default "green"): thread color;
+      green rides --brand, blue rides --accent, violet rides --accent-2.
+    - exit ("none" | "fade" | "up", default "none").
+
+  Envelope, fixed IN and OUT with elastic HOLD only (never timeScale):
+    IN_BASE  = 0.15 lead + 2.9 draw + 0.15 margin
+    HOLD     = max(0, D - IN - OUT), truly still
+    OUT_BASE = 0.45s only when exit != none
+    If D < IN_BASE + OUT_BASE the whole envelope compresses together.
+    Letters draw strictly in sequence; each letter's share of the draw
+    window is proportional to its total stroke length, with a fixed
+    needle-jump pause between letters.
+
+  Determinism and seek-safety: all geometry, jitter (fixed LCG seed
+  0x57174c3d), stitch patterns, hole positions, and the per-stroke draw
+  schedule are computed once at mount. One inert anchor tween spans [0, D];
+  a painter recomputes every stroke's dashoffset, every hole's visibility,
+  and the needle/tail pose as pure functions of tl.time() on each update
+  (zero per-element tweens, gotcha 9). Writes are idempotent; eventful
+  seeks (suppressEvents=false) land identical frames in any order and
+  either direction.
+
+  Mount contract: the runtime clones only this template. #root fills the
+  host box (no data-width/data-height, container-type: size, cqmin units),
+  is styled via #root only, and registers one paused timeline under the
+  LITERAL "stitched-text-draw" key. getTotalLength drives all dash math
+  (never the pathLength attribute, never non-scaling-stroke on dashed
+  paths).
+-->
+<html
+  lang="en"
+  data-composition-id="stitched-text-draw"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "text", "type": "string", "role": "content", "label": "Text", "description": "Uppercased A-Z 0-9 and space, clamped to 12 characters.", "default": "STITCH" },
+    { "id": "stitch", "type": "enum", "role": "style", "label": "Stitch", "description": "Dash/gap scale, thread width, and jitter amplitude.", "default": "fine", "options": [{ "value": "fine", "label": "Fine" }, { "value": "coarse", "label": "Coarse" }] },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Thread color: green rides --brand, blue rides --accent, violet rides --accent-2.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the stitched word holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Stitched Text Draw</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="stitched-text-draw" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .std-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .std-stage {
+            display: grid;
+            place-items: center;
+            will-change: transform, opacity;
+          }
+
+          .std-svg {
+            display: block;
+            width: 92cqw;
+            height: 56cqh;
+          }
+        </style>
+
+        <div
+          id="stitched-text-draw-clip"
+          class="std-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="std-stage" role="img">
+            <svg
+              class="std-svg"
+              xmlns="http://www.w3.org/2000/svg"
+              preserveAspectRatio="xMidYMid meet"
+              aria-hidden="true"
+            ></svg>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var SVG_NS = "http://www.w3.org/2000/svg";
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".std-stage");
+            var svg = root.querySelector(".std-svg");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var text = (vars.text == null || vars.text === "" ? "STITCH" : String(vars.text))
+              .toUpperCase()
+              .slice(0, 12);
+            var stitch = vars.stitch === "coarse" ? "coarse" : "fine";
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #52525b)",
+              blue: "var(--accent, #52525b)",
+              violet: "var(--accent-2, #52525b)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            root.style.setProperty("--std-accent", accentColors[accent]);
+            stage.setAttribute("aria-label", text);
+
+            // Stitch registers: dash/gap in glyph units (glyph box 70x100).
+            var registers = {
+              fine: { dash: 6.5, gap: 4.5, width: 2.6, jitter: 1.5 },
+              coarse: { dash: 10, gap: 7, width: 4.2, jitter: 2.3 },
+            };
+            var reg = registers[stitch];
+
+            // ---- Single-stroke display alphabet -------------------------
+            // Glyph box: width 70 (space 40), cap height 100, y down.
+            // Each glyph is an array of strokes; a stroke is an array of
+            // [x, y] points (lines) built from line points and flattened
+            // elliptical arcs. Curves only need enough samples to read as
+            // curved once resampled and jittered.
+            function arcPts(cx, cy, rx, ry, a0, a1) {
+              var steps = Math.max(6, Math.ceil(Math.abs(a1 - a0) / 18));
+              var pts = [];
+              for (var i = 0; i <= steps; i += 1) {
+                var a = ((a0 + ((a1 - a0) * i) / steps) * Math.PI) / 180;
+                pts.push([cx + rx * Math.cos(a), cy + ry * Math.sin(a)]);
+              }
+              return pts;
+            }
+            function join() {
+              var out = [];
+              for (var i = 0; i < arguments.length; i += 1) {
+                out = out.concat(arguments[i]);
+              }
+              return out;
+            }
+
+            var GLYPHS = {
+              A: [
+                [
+                  [4, 100],
+                  [35, 2],
+                  [66, 100],
+                ],
+                [
+                  [15, 64],
+                  [55, 64],
+                ],
+              ],
+              B: [
+                [
+                  [6, 2],
+                  [6, 98],
+                ],
+                join([[6, 2]], arcPts(36, 26, 24, 24, -90, 90), [[6, 50]]),
+                join([[6, 50]], arcPts(38, 74, 26, 24, -90, 90), [[6, 98]]),
+              ],
+              C: [arcPts(38, 50, 30, 46, -60, -300)],
+              D: [
+                join(
+                  [
+                    [6, 2],
+                    [24, 2],
+                  ],
+                  arcPts(24, 50, 40, 48, -90, 90),
+                  [
+                    [24, 98],
+                    [6, 98],
+                    [6, 4],
+                  ],
+                ),
+              ],
+              E: [
+                [
+                  [60, 2],
+                  [8, 2],
+                  [8, 98],
+                  [60, 98],
+                ],
+                [
+                  [8, 50],
+                  [48, 50],
+                ],
+              ],
+              F: [
+                [
+                  [60, 2],
+                  [8, 2],
+                  [8, 98],
+                ],
+                [
+                  [8, 50],
+                  [46, 50],
+                ],
+              ],
+              G: [
+                join(arcPts(38, 50, 30, 46, -60, -305), [
+                  [56, 62],
+                  [38, 62],
+                ]),
+              ],
+              H: [
+                [
+                  [8, 2],
+                  [8, 98],
+                ],
+                [
+                  [62, 2],
+                  [62, 98],
+                ],
+                [
+                  [8, 50],
+                  [62, 50],
+                ],
+              ],
+              I: [
+                [
+                  [35, 2],
+                  [35, 98],
+                ],
+                [
+                  [20, 2],
+                  [50, 2],
+                ],
+                [
+                  [20, 98],
+                  [50, 98],
+                ],
+              ],
+              J: [
+                join(
+                  [
+                    [58, 2],
+                    [58, 72],
+                  ],
+                  arcPts(33, 72, 25, 26, 0, 180),
+                ),
+              ],
+              K: [
+                [
+                  [8, 2],
+                  [8, 98],
+                ],
+                [
+                  [60, 2],
+                  [8, 56],
+                ],
+                [
+                  [24, 42],
+                  [62, 98],
+                ],
+              ],
+              L: [
+                [
+                  [8, 2],
+                  [8, 98],
+                  [60, 98],
+                ],
+              ],
+              M: [
+                [
+                  [6, 98],
+                  [6, 2],
+                  [35, 58],
+                  [64, 2],
+                  [64, 98],
+                ],
+              ],
+              N: [
+                [
+                  [8, 98],
+                  [8, 2],
+                  [62, 98],
+                  [62, 2],
+                ],
+              ],
+              O: [arcPts(35, 50, 30, 47, -90, 270)],
+              P: [
+                [
+                  [8, 98],
+                  [8, 2],
+                ],
+                join(
+                  [
+                    [8, 2],
+                    [36, 2],
+                  ],
+                  arcPts(36, 27, 26, 25, -90, 90),
+                  [
+                    [36, 52],
+                    [8, 52],
+                  ],
+                ),
+              ],
+              Q: [
+                arcPts(35, 50, 30, 47, -90, 270),
+                [
+                  [46, 70],
+                  [66, 96],
+                ],
+              ],
+              R: [
+                [
+                  [8, 98],
+                  [8, 2],
+                ],
+                join(
+                  [
+                    [8, 2],
+                    [36, 2],
+                  ],
+                  arcPts(36, 27, 26, 25, -90, 90),
+                  [
+                    [36, 52],
+                    [8, 52],
+                  ],
+                ),
+                [
+                  [30, 52],
+                  [64, 98],
+                ],
+              ],
+              S: [
+                [
+                  [58, 14],
+                  [44, 3],
+                  [24, 3],
+                  [10, 14],
+                  [10, 30],
+                  [24, 42],
+                  [46, 56],
+                  [58, 68],
+                  [58, 86],
+                  [44, 97],
+                  [22, 97],
+                  [8, 86],
+                ],
+              ],
+              T: [
+                [
+                  [6, 2],
+                  [64, 2],
+                ],
+                [
+                  [35, 2],
+                  [35, 98],
+                ],
+              ],
+              U: [
+                join(
+                  [
+                    [8, 2],
+                    [8, 68],
+                  ],
+                  arcPts(35, 68, 27, 29, 180, 360),
+                  [
+                    [62, 68],
+                    [62, 2],
+                  ],
+                ),
+              ],
+              V: [
+                [
+                  [6, 2],
+                  [35, 98],
+                  [64, 2],
+                ],
+              ],
+              W: [
+                [
+                  [4, 2],
+                  [19, 98],
+                  [35, 34],
+                  [51, 98],
+                  [66, 2],
+                ],
+              ],
+              X: [
+                [
+                  [8, 2],
+                  [62, 98],
+                ],
+                [
+                  [62, 2],
+                  [8, 98],
+                ],
+              ],
+              Y: [
+                [
+                  [6, 2],
+                  [35, 50],
+                ],
+                [
+                  [64, 2],
+                  [35, 50],
+                  [35, 98],
+                ],
+              ],
+              Z: [
+                [
+                  [8, 2],
+                  [62, 2],
+                  [8, 98],
+                  [62, 98],
+                ],
+              ],
+              0: [arcPts(35, 50, 27, 47, -90, 270)],
+              1: [
+                [
+                  [20, 20],
+                  [38, 4],
+                  [38, 98],
+                ],
+              ],
+              2: [
+                join(arcPts(35, 26, 26, 24, -160, 10), [
+                  [8, 98],
+                  [62, 98],
+                ]),
+              ],
+              3: [join(arcPts(34, 26, 24, 24, -150, 80), arcPts(36, 73, 26, 25, -100, 150))],
+              4: [
+                [
+                  [50, 2],
+                  [6, 66],
+                  [66, 66],
+                ],
+                [
+                  [50, 44],
+                  [50, 98],
+                ],
+              ],
+              5: [
+                [
+                  [58, 3],
+                  [14, 3],
+                  [11, 44],
+                  [34, 38],
+                  [55, 48],
+                  [59, 72],
+                  [46, 94],
+                  [20, 96],
+                  [8, 84],
+                ],
+              ],
+              6: [
+                join(
+                  [
+                    [52, 4],
+                    [28, 26],
+                    [13, 56],
+                  ],
+                  arcPts(35, 72, 24, 26, -180, 180),
+                ),
+              ],
+              7: [
+                [
+                  [8, 3],
+                  [62, 3],
+                  [30, 98],
+                ],
+              ],
+              8: [join(arcPts(35, 27, 21, 24, 90, 450), arcPts(35, 74, 26, 25, -90, 270))],
+              9: [
+                join(arcPts(37, 28, 25, 25, 0, 360), [
+                  [62, 28],
+                  [56, 64],
+                  [34, 98],
+                ]),
+              ],
+            };
+            var GLYPH_W = 70;
+            var SPACE_W = 40;
+            var GAP = 24;
+
+            // Fixed-seed LCG: the only randomness source, consumed in one
+            // deterministic order during this build phase.
+            var lcgState = 0x57174c3d;
+            function next() {
+              lcgState = (Math.imul(1664525, lcgState) + 1013904223) >>> 0;
+              return lcgState / 4294967296;
+            }
+
+            // Resample a polyline to even stitch-scale steps, then displace
+            // each point perpendicular to the local direction: seeded angle
+            // jitter, so every stitch lands at a slightly different angle.
+            function resampleJitter(points) {
+              var STEP = 5;
+              var flat = [points[0]];
+              for (var i = 1; i < points.length; i += 1) {
+                var ax = flat[flat.length - 1][0];
+                var ay = flat[flat.length - 1][1];
+                var bx = points[i][0];
+                var by = points[i][1];
+                var seg = Math.hypot(bx - ax, by - ay);
+                var n = Math.max(1, Math.round(seg / STEP));
+                for (var k = 1; k <= n; k += 1) {
+                  flat.push([ax + ((bx - ax) * k) / n, ay + ((by - ay) * k) / n]);
+                }
+              }
+              var out = [];
+              for (var p = 0; p < flat.length; p += 1) {
+                var prev = flat[Math.max(0, p - 1)];
+                var after = flat[Math.min(flat.length - 1, p + 1)];
+                var dx = after[0] - prev[0];
+                var dy = after[1] - prev[1];
+                var len = Math.hypot(dx, dy) || 1;
+                var edge = p === 0 || p === flat.length - 1 ? 0.5 : 1;
+                var off = (next() - 0.5) * 2 * reg.jitter * edge;
+                out.push([flat[p][0] + (-dy / len) * off, flat[p][1] + (dx / len) * off]);
+              }
+              return out;
+            }
+
+            // ---- Layout: bake letter x-offsets into the points so every
+            // path shares ONE flat coordinate space (the global needle can
+            // then read getPointAtLength coordinates directly). -----------
+            var characters = Array.from(text);
+            var letters = [];
+            var cursor = 0;
+            for (var ci = 0; ci < characters.length; ci += 1) {
+              var ch = characters[ci];
+              var glyph = GLYPHS[ch];
+              if (!glyph) {
+                cursor += SPACE_W + GAP;
+                continue;
+              }
+              var strokes = [];
+              for (var si = 0; si < glyph.length; si += 1) {
+                var jittered = resampleJitter(glyph[si]);
+                var shifted = [];
+                for (var pi = 0; pi < jittered.length; pi += 1) {
+                  shifted.push([jittered[pi][0] + cursor, jittered[pi][1]]);
+                }
+                strokes.push({ points: shifted });
+              }
+              letters.push({ strokes: strokes });
+              cursor += GLYPH_W + GAP;
+            }
+            var totalWidth = Math.max(GLYPH_W, cursor - GAP);
+            var PAD = 14;
+            svg.setAttribute(
+              "viewBox",
+              -PAD + " " + -PAD + " " + (totalWidth + 2 * PAD) + " " + (100 + 2 * PAD),
+            );
+
+            // ---- Build DOM + per-stroke dash/hole tables ----------------
+            function el(name) {
+              return document.createElementNS(SVG_NS, name);
+            }
+            var holeFill = "color-mix(in srgb, var(--fg, #f8fafc) 34%, transparent)";
+            var totalLength = 0;
+            for (var li = 0; li < letters.length; li += 1) {
+              var letter = letters[li];
+              for (var sj = 0; sj < letter.strokes.length; sj += 1) {
+                var stroke = letter.strokes[sj];
+                var d =
+                  "M " +
+                  stroke.points
+                    .map(function (pt) {
+                      return pt[0].toFixed(2) + " " + pt[1].toFixed(2);
+                    })
+                    .join(" L ");
+                var path = el("path");
+                path.setAttribute("d", d);
+                path.setAttribute("fill", "none");
+                path.setAttribute("stroke", "var(--std-accent)");
+                path.setAttribute("stroke-width", String(reg.width));
+                path.setAttribute("stroke-linecap", "round");
+                svg.appendChild(path);
+
+                var L = path.getTotalLength();
+                stroke.el = path;
+                stroke.length = L;
+                totalLength += L;
+
+                // Double-dash reveal pattern: alternating dash/gap summing
+                // EXACTLY to L (ending on a dash element so the appended L
+                // sits at an odd index and reads as one closing gap).
+                var pattern = [];
+                var sum = 0;
+                while (sum + reg.dash + reg.gap < L) {
+                  pattern.push(reg.dash, reg.gap);
+                  sum += reg.dash + reg.gap;
+                }
+                pattern.push(Math.max(0.5, L - sum));
+                pattern.push(L);
+                stroke.dasharray = pattern
+                  .map(function (v) {
+                    return v.toFixed(3);
+                  })
+                  .join(" ");
+                path.setAttribute("stroke-dasharray", stroke.dasharray);
+                path.setAttribute("stroke-dashoffset", L.toFixed(3));
+
+                // Needle holes: one dot at each stitch boundary (dash start
+                // and dash end), revealed as the front passes.
+                stroke.holes = [];
+                var period = reg.dash + reg.gap;
+                for (var s = 0; s <= L; s += period) {
+                  var boundaries = [s, Math.min(L, s + reg.dash)];
+                  for (var b = 0; b < boundaries.length; b += 1) {
+                    var pt = path.getPointAtLength(boundaries[b]);
+                    var hole = el("circle");
+                    hole.setAttribute("cx", pt.x.toFixed(2));
+                    hole.setAttribute("cy", pt.y.toFixed(2));
+                    hole.setAttribute("r", (reg.width * 0.42).toFixed(2));
+                    hole.setAttribute("fill", holeFill);
+                    hole.setAttribute("opacity", "0");
+                    svg.appendChild(hole);
+                    stroke.holes.push({ el: hole, at: boundaries[b] });
+                  }
+                }
+
+                // End pose for the thread-tail overshoot.
+                var endPt = path.getPointAtLength(L);
+                var backPt = path.getPointAtLength(Math.max(0, L - 2));
+                var tx = endPt.x - backPt.x;
+                var ty = endPt.y - backPt.y;
+                var tLen = Math.hypot(tx, ty) || 1;
+                stroke.end = [endPt.x, endPt.y];
+                stroke.tangent = [tx / tLen, ty / tLen];
+              }
+            }
+
+            // Global needle dot + thread tail (letters draw strictly in
+            // sequence, so one needle serves the whole word).
+            var tail = el("line");
+            tail.setAttribute("stroke", "var(--std-accent)");
+            tail.setAttribute("stroke-width", (reg.width * 0.8).toFixed(2));
+            tail.setAttribute("stroke-linecap", "round");
+            tail.setAttribute("opacity", "0");
+            svg.appendChild(tail);
+            var needle = el("circle");
+            needle.setAttribute("r", (reg.width * 1.15).toFixed(2));
+            needle.setAttribute("fill", "var(--fg, #f8fafc)");
+            needle.setAttribute("stroke", "color-mix(in srgb, var(--std-accent) 60%, transparent)");
+            needle.setAttribute("stroke-width", (reg.width * 0.45).toFixed(2));
+            needle.setAttribute("opacity", "0");
+            svg.appendChild(needle);
+
+            // Envelope: fixed IN/OUT, elastic HOLD, never time-scaled.
+            var LEAD = 0.15;
+            var DRAW_BASE = 2.9;
+            var MARGIN = 0.15;
+            var PAUSE_BASE = 0.05;
+            var IN_BASE = LEAD + DRAW_BASE + MARGIN;
+            var OUT_BASE = exit === "none" ? 0 : 0.45;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var totalBase = Math.max(0.001, IN_BASE + OUT_BASE);
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var lead = LEAD * scale;
+            var DRAW = DRAW_BASE * scale;
+            var pause = PAUSE_BASE * scale;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var OUT_START = IN + HOLD;
+
+            // Schedule: letters sequential, each letter's window sized by
+            // its share of the total stitch length; strokes sequential
+            // within the letter by the same rule.
+            var pauses = Math.max(0, letters.length - 1) * pause;
+            var drawable = Math.max(0.05, DRAW - pauses);
+            var clock = lead;
+            for (var lj = 0; lj < letters.length; lj += 1) {
+              var lt = letters[lj];
+              var letterLen = 0;
+              for (var sk = 0; sk < lt.strokes.length; sk += 1) {
+                letterLen += lt.strokes[sk].length;
+              }
+              var letterTime = totalLength > 0 ? (drawable * letterLen) / totalLength : 0;
+              for (var sm = 0; sm < lt.strokes.length; sm += 1) {
+                var st = lt.strokes[sm];
+                var strokeTime = letterLen > 0 ? (letterTime * st.length) / letterLen : 0;
+                st.t0 = clock;
+                st.t1 = clock + Math.max(0.01, strokeTime);
+                clock = st.t1;
+              }
+              lt.t0 = lt.strokes[0].t0;
+              lt.t1 = clock;
+              clock += pause;
+            }
+
+            function clamp01(v) {
+              return v < 0 ? 0 : v > 1 ? 1 : v;
+            }
+            // backOut: overshoots ~10% past 1, then settles to exactly 1.
+            // The overshoot region drives the thread-tail.
+            function backOut(u) {
+              var c1 = 1.70158;
+              var c3 = c1 + 1;
+              var x = u - 1;
+              return 1 + c3 * x * x * x + c1 * x * x;
+            }
+            var TAIL_MAX = 16;
+
+            // Pure per-update painter (zero per-element tweens): dashoffset
+            // ATTRIBUTE, hole visibility, and the needle/tail pose are all
+            // functions of tl.time() alone. Idempotent writes.
+            function applyTime(timeSeconds) {
+              var needleOn = false;
+              var needleX = 0;
+              var needleY = 0;
+              var tailFrom = null;
+              var tailTo = null;
+              for (var i = 0; i < letters.length; i += 1) {
+                var letter = letters[i];
+                for (var j = 0; j < letter.strokes.length; j += 1) {
+                  var stroke = letter.strokes[j];
+                  var span = stroke.t1 - stroke.t0;
+                  var u = clamp01(span > 0 ? (timeSeconds - stroke.t0) / span : 1);
+                  var L = stroke.length;
+                  var visible;
+                  // Round linecaps paint a zero-length-dash dot at the exact
+                  // boundary sitting at the path start when dashoffset = L,
+                  // so undrawn strokes are also opacity-gated.
+                  stroke.el.setAttribute("opacity", u <= 0 ? "0" : "1");
+                  if (u <= 0) {
+                    stroke.el.setAttribute("stroke-dashoffset", L.toFixed(3));
+                    visible = 0;
+                  } else if (u >= 1) {
+                    stroke.el.setAttribute("stroke-dashoffset", "0");
+                    visible = L;
+                  } else {
+                    var p = backOut(u);
+                    var front = clamp01(p) * L;
+                    stroke.el.setAttribute("stroke-dashoffset", (L - front).toFixed(3));
+                    visible = front;
+                    needleOn = true;
+                    if (p <= 1) {
+                      var pt = stroke.el.getPointAtLength(front);
+                      needleX = pt.x;
+                      needleY = pt.y;
+                    } else {
+                      // Thread-tail overshoot: the needle carries the
+                      // thread past the stroke end along its exit tangent,
+                      // then the settle pulls it snug.
+                      var over = Math.min((p - 1) * L, TAIL_MAX);
+                      needleX = stroke.end[0] + stroke.tangent[0] * over;
+                      needleY = stroke.end[1] + stroke.tangent[1] * over;
+                      tailFrom = stroke.end;
+                      tailTo = [needleX, needleY];
+                    }
+                  }
+                  for (var h = 0; h < stroke.holes.length; h += 1) {
+                    stroke.holes[h].el.setAttribute(
+                      "opacity",
+                      stroke.holes[h].at <= visible && u > 0 ? "1" : "0",
+                    );
+                  }
+                }
+              }
+              if (needleOn) {
+                needle.setAttribute("opacity", "1");
+                needle.setAttribute("cx", needleX.toFixed(2));
+                needle.setAttribute("cy", needleY.toFixed(2));
+              } else {
+                needle.setAttribute("opacity", "0");
+              }
+              if (tailFrom) {
+                tail.setAttribute("opacity", "0.9");
+                tail.setAttribute("x1", tailFrom[0].toFixed(2));
+                tail.setAttribute("y1", tailFrom[1].toFixed(2));
+                tail.setAttribute("x2", tailTo[0].toFixed(2));
+                tail.setAttribute("y2", tailTo[1].toFixed(2));
+              } else {
+                tail.setAttribute("opacity", "0");
+              }
+            }
+
+            gsap.set(stage, { opacity: 1, y: "0cqh" });
+
+            var tl = gsap.timeline({
+              paused: true,
+              onUpdate: function () {
+                applyTime(tl.time());
+              },
+            });
+
+            // Anchor tween: an inert plain-object tween spanning [0, D] so
+            // onUpdate fires for every eventful seek and holds never clamp.
+            tl.to({ p: 0 }, { p: 1, duration: duration, ease: "none" }, 0);
+
+            // HOLD: truly still; repeated repaints write identical values.
+
+            // OUT: optional departure; exit none holds until the frame cuts.
+            if (exit === "up") {
+              tl.to(stage, { y: "-4cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "fade") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            }
+
+            tl.seek(0);
+            applyTime(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["stitched-text-draw"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/stop-motion-cadence/README.md b/registry/components/stop-motion-cadence/README.md
new file mode 100644
index 0000000000..2919fb7802
--- /dev/null
+++ b/registry/components/stop-motion-cadence/README.md
@@ -0,0 +1,37 @@
+# stop-motion-cadence
+
+The stepped-time law as a demo primitive (Wave M10 experiment). ONE driver quantizes timeline time FIRST, `ts = floor(t * fps) / fps`, and `ts` feeds ALL motion: four token paper-cut shapes throw-and-land in sequence at the quantized cadence, each squashing on its landing hit and recovering over the next steps, with a 2-frame boil jitter on edges (seeded per boil window, stable within it) and sparkle accents living exactly 2 or 3 steps on each hit, frame-alternating big / small-rotated like a drawn twinkle. Reference: the MotionMarkus stop-motion sheets.
+
+4s authored, elastic HOLD (the boil keeps breathing through the hold; `boil: off` holds dead still), exit `none` by default.
+
+## Variables
+
+| id       | type | default | notes                                                                                                                                                  |
+| -------- | ---- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `fps`    | enum | `10`    | Stepped-time cadence: `8`, `10`, or `12` frames per second.                                                                                            |
+| `boil`   | enum | `on`    | 2-frame edge jitter hashed from `floor(step / 2)`. `off` gives a dead-still settle.                                                                    |
+| `accent` | enum | `green` | Lead shape color: green rides `--brand`, blue rides `--accent`, violet rides `--accent-2`; the other shapes take the remaining two tokens in rotation. |
+| `exit`   | enum | `none`  | `none` holds until the cut; `fade` departs opacity-only; `up` rises out.                                                                               |
+
+## Mount
+
+```html
+<div
+  class="clip"
+  data-composition-id="stop-motion-cadence"
+  data-composition-src="./stop-motion-cadence.html"
+  data-variable-values='{"fps":"8","accent":"blue"}'
+  data-start="0"
+  data-duration="4"
+  data-track-index="0"
+></div>
+```
+
+Elastic root: no `data-width`/`data-height`; it fills whatever box the host clip gives it. Timeline registers under the literal `stop-motion-cadence` key.
+
+## Notes
+
+- The law: quantize before evaluating. Every hit is an integer step index (`landStep = round(t_land * fps)`), squash is a per-step envelope over `step - landStep`, boil seeds hash `floor(step / 2)`, sparkles are visible iff `0 <= step - landStep < life`. Because all state derives from the quantized driver, eventful seeks land identical frames forward, reverse, or shuffled.
+- Squash uses `transform-origin: 50% 100%` so shapes compress into the floor contact; contact shadows grow and darken as each shape nears the ground.
+- Deterministic: the jitter hash is a sin-fold over integer indices; no Math.random, no wall clock, no incremental state. Stage size is measured once at mount; per-update writes are transforms and opacity only.
+- If the mount duration is shorter than the 3s choreography, the throw times compress together, but the fps grid itself never scales; the cadence is absolute.
diff --git a/registry/components/stop-motion-cadence/demo.html b/registry/components/stop-motion-cadence/demo.html
new file mode 100644
index 0000000000..fcb23b3528
--- /dev/null
+++ b/registry/components/stop-motion-cadence/demo.html
@@ -0,0 +1,86 @@
+<!doctype html>
+<!--
+  stop-motion-cadence demo. FULL-BLEED light mount: the primitive fills
+  the whole 1920x1080 frame on a light token block. Non-default fps and
+  accent values prove the variable path.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Stop Motion Cadence Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #eef0f3);
+      }
+
+      #root {
+        --bg: #eef0f3;
+        --fg: #14161b;
+        --muted: #5b6472;
+        --surface: #ffffff;
+        --border: #d3d8e0;
+        --brand: #3f3f46;
+        --accent: #3f3f46;
+        --accent-2: #3f3f46;
+        --radius: 18px;
+        --font-display: "Inter", system-ui, sans-serif;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 42%, #f7f8fa 0%, var(--bg, #eef0f3) 72%);
+      }
+
+      .mount-bleed {
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        container-type: size;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="stop-motion-cadence-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="stop-motion-cadence-mount"
+        class="mount-bleed clip"
+        data-composition-id="stop-motion-cadence"
+        data-composition-src="./stop-motion-cadence.html"
+        data-variable-values='{"fps":"8","accent":"blue"}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="1920"
+        data-height="1080"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["stop-motion-cadence-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/stop-motion-cadence/registry-item.json b/registry/components/stop-motion-cadence/registry-item.json
new file mode 100644
index 0000000000..9ec2e07b0c
--- /dev/null
+++ b/registry/components/stop-motion-cadence/registry-item.json
@@ -0,0 +1,81 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "stop-motion-cadence",
+  "type": "hyperframes:component",
+  "title": "Stop Motion Cadence",
+  "description": "The stepped-time law as a demo primitive: one driver quantizes timeline time to floor(t * fps) / fps and feeds ALL motion; four token paper-cut shapes throw-and-land with squash on hits, 2-frame boil jitter seeded per step, and sparkle accents living exactly 2 to 3 frames.",
+  "tags": [
+    "motion-primitive",
+    "time-law",
+    "stop-motion",
+    "stepped",
+    "boil",
+    "deterministic",
+    "experiment"
+  ],
+  "jobs": ["demonstrate"],
+  "family": "demonstrate",
+  "profile": "stepped-time",
+  "evidence": "Wave M10 experiment: MotionMarkus stop-motion sheets (2059406490981863865/sheet-01)",
+  "syncPoints": [{ "id": "first-hit", "phase": "in", "offset": 1.0 }],
+  "files": [
+    {
+      "path": "stop-motion-cadence.html",
+      "target": "compositions/components/stop-motion-cadence.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "fps",
+      "type": "enum",
+      "role": "timing",
+      "label": "Cadence",
+      "description": "Stepped-time cadence in frames per second.",
+      "default": "10",
+      "options": [
+        { "value": "8", "label": "8 fps" },
+        { "value": "10", "label": "10 fps" },
+        { "value": "12", "label": "12 fps" }
+      ]
+    },
+    {
+      "id": "boil",
+      "type": "enum",
+      "role": "style",
+      "label": "Boil",
+      "description": "2-frame edge jitter, seeded per step. Off holds dead still.",
+      "default": "on",
+      "options": [
+        { "value": "on", "label": "On" },
+        { "value": "off", "label": "Off" }
+      ]
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Lead shape color: green rides --brand, blue rides --accent, violet rides --accent-2.",
+      "default": "green",
+      "options": [
+        { "value": "green", "label": "Green" },
+        { "value": "blue", "label": "Blue" },
+        { "value": "violet", "label": "Violet" }
+      ]
+    },
+    {
+      "id": "exit",
+      "type": "enum",
+      "role": "timing",
+      "label": "Exit",
+      "description": "Optional departure. Default none: the settled collage holds until the frame cuts.",
+      "default": "none",
+      "options": [
+        { "value": "none", "label": "None" },
+        { "value": "fade", "label": "Fade" },
+        { "value": "up", "label": "Up" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/stop-motion-cadence/stop-motion-cadence.html b/registry/components/stop-motion-cadence/stop-motion-cadence.html
new file mode 100644
index 0000000000..955b89d4ef
--- /dev/null
+++ b/registry/components/stop-motion-cadence/stop-motion-cadence.html
@@ -0,0 +1,467 @@
+<!doctype html>
+<!--
+  stop-motion-cadence: HyperFrames video primitive (time law, Wave M10 experiment)
+
+  The stepped-time law as a demo primitive. ONE driver: every frame the
+  timeline time is quantized FIRST,
+
+      ts = floor(t * fps) / fps
+
+  and ts feeds ALL motion. Four token paper-cut shapes throw-and-land in
+  sequence at the quantized cadence, each squashing on its landing hit
+  (transform-origin at the ground contact) and recovering over the next
+  steps. A 2-frame boil rides every shape's edges: jitter offsets are
+  hashed from the boil frame index floor(step / 2), so they are stable
+  within a 2-frame window and pure functions of time. Sparkle accents
+  live EXACTLY 2 or 3 steps on each landing hit, frame-alternating big /
+  small-rotated like a drawn twinkle (per the MotionMarkus sheets).
+
+  Because every hit is defined by an integer step index derived from the
+  quantized driver, seeks land identical frames in any order: forward,
+  reverse, or shuffled evaluation of the same t produces the same step,
+  the same boil seed, the same sparkle state.
+
+  Variables (declared in data-composition-variables below):
+    - fps ("8" | "10" | "12", default "10"): the step cadence.
+    - boil ("on" | "off", default "on"): the 2-frame edge jitter. Off
+      gives a dead-still settle.
+    - accent ("green" | "blue" | "violet", default "green"): the lead
+      shape's color; green rides --brand, blue rides --accent, violet
+      rides --accent-2 (the other shapes step down in value, not hue).
+    - exit ("none" | "fade" | "up", default "none").
+
+  Envelope, fixed IN and OUT with elastic HOLD only (never timeScale):
+    IN_BASE  = 3.0s (all four shapes landed and recovered)
+    HOLD     = max(0, D - IN - OUT); the boil keeps breathing through the
+               hold (that is the register), boil off holds dead still
+    OUT_BASE = 0.45s only when exit != none
+    If D < IN_BASE + OUT_BASE the choreography compresses together; the
+    fps grid itself never scales (the law quantizes absolute time).
+
+  Determinism: no Math.random, no wall clock, no incremental state; the
+  jitter hash is sin-fold on integer indices. Stage size is measured once
+  at mount; per-update writes are transforms and opacity only, all
+  recomputed from tl.time().
+
+  Mount contract: template-wrapped; #root fills the host box (no
+  data-width/height, container-type: size, cqmin units), styled via
+  #root only; one paused timeline under the LITERAL
+  "stop-motion-cadence" key.
+-->
+<html
+  lang="en"
+  data-composition-id="stop-motion-cadence"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "fps", "type": "enum", "role": "timing", "label": "Cadence", "description": "Stepped-time cadence in frames per second.", "default": "10", "options": [{ "value": "8", "label": "8 fps" }, { "value": "10", "label": "10 fps" }, { "value": "12", "label": "12 fps" }] },
+    { "id": "boil", "type": "enum", "role": "style", "label": "Boil", "description": "2-frame edge jitter, seeded per step. Off holds dead still.", "default": "on", "options": [{ "value": "on", "label": "On" }, { "value": "off", "label": "Off" }] },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Lead shape color: green rides --brand, blue rides --accent, violet rides --accent-2.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the settled collage holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Stop Motion Cadence</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="stop-motion-cadence" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, "Inter", system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .smc-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .smc-stage {
+            position: absolute;
+            inset: 0;
+          }
+
+          /* Paper-cut floor: a hairline plus a soft paper band. */
+          .smc-floor {
+            position: absolute;
+            left: 14cqw;
+            right: 14cqw;
+            top: 72cqh;
+            height: 0.35cqmin;
+            border-radius: 0.2cqmin;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 22%, transparent);
+          }
+
+          .smc-shape {
+            position: absolute;
+            left: 0;
+            top: 0;
+            opacity: 0;
+            filter: drop-shadow(
+              0.5cqmin 0.7cqmin 0 color-mix(in srgb, var(--bg, #000000) 35%, transparent)
+            );
+          }
+
+          .smc-shadow {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 12cqmin;
+            height: 2cqmin;
+            border-radius: 50%;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 14%, transparent);
+            opacity: 0;
+          }
+
+          .smc-circle {
+            width: 13cqmin;
+            height: 13cqmin;
+            border-radius: 50%;
+            background: var(--smc-c1);
+          }
+
+          .smc-square {
+            width: 15cqmin;
+            height: 15cqmin;
+            border-radius: 1.6cqmin;
+            background: var(--smc-c2);
+          }
+
+          .smc-tri {
+            width: 16cqmin;
+            height: 14cqmin;
+            clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
+            background: var(--smc-c3);
+          }
+
+          .smc-star {
+            width: 9cqmin;
+            height: 9cqmin;
+            clip-path: polygon(
+              50% 0%,
+              63% 34%,
+              98% 35%,
+              70% 57%,
+              81% 91%,
+              50% 70%,
+              19% 91%,
+              30% 57%,
+              2% 35%,
+              37% 34%
+            );
+            background: color-mix(in srgb, var(--fg, #f8fafc) 82%, var(--smc-c1));
+          }
+
+          .smc-sparkle {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 5.5cqmin;
+            height: 5.5cqmin;
+            clip-path: polygon(
+              50% 0%,
+              60% 40%,
+              100% 50%,
+              60% 60%,
+              50% 100%,
+              40% 60%,
+              0% 50%,
+              40% 40%
+            );
+            background: var(--fg, #f8fafc);
+            opacity: 0;
+          }
+        </style>
+
+        <div
+          id="stop-motion-cadence-clip"
+          class="smc-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="smc-stage">
+            <div class="smc-floor"></div>
+            <div class="smc-shadow" data-for="0"></div>
+            <div class="smc-shadow" data-for="1"></div>
+            <div class="smc-shadow" data-for="2"></div>
+            <div class="smc-shadow" data-for="3"></div>
+            <div class="smc-shape smc-circle"></div>
+            <div class="smc-shape smc-square"></div>
+            <div class="smc-shape smc-tri"></div>
+            <div class="smc-shape smc-star"></div>
+            <div class="smc-sparkle"></div>
+            <div class="smc-sparkle"></div>
+            <div class="smc-sparkle"></div>
+            <div class="smc-sparkle"></div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".smc-stage");
+            var shapes = root.querySelectorAll(".smc-shape");
+            var shadows = root.querySelectorAll(".smc-shadow");
+            var sparkles = root.querySelectorAll(".smc-sparkle");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var fps =
+              vars.fps === "8" || vars.fps === 8
+                ? 8
+                : vars.fps === "12" || vars.fps === 12
+                  ? 12
+                  : 10;
+            var boil = vars.boil !== "off";
+            var accentColors = {
+              green: "var(--brand, #52525b)",
+              blue: "var(--accent, #52525b)",
+              violet: "var(--accent-2, #52525b)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            // The lead shape is the one accented element; the other two paper
+            // cutouts separate by value step, not by a second and third hue.
+            root.style.setProperty("--smc-c1", accentColors[accent]);
+            root.style.setProperty(
+              "--smc-c2",
+              "color-mix(in srgb, var(--fg, #f8fafc) 72%, transparent)",
+            );
+            root.style.setProperty(
+              "--smc-c3",
+              "color-mix(in srgb, var(--fg, #f8fafc) 45%, transparent)",
+            );
+
+            // One-time stage measurement; all positions in px from here.
+            var W = Math.max(1, stage.clientWidth);
+            var H = Math.max(1, stage.clientHeight);
+            var M = Math.min(W, H);
+            var groundY = 0.72 * H;
+
+            // Envelope: fixed IN/OUT, elastic HOLD; fps grid never scales.
+            var IN_BASE = 3.0;
+            var OUT_BASE = exit === "none" ? 0 : 0.45;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var totalBase = Math.max(0.001, IN_BASE + OUT_BASE);
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var OUT = OUT_BASE * scale;
+            var HOLD = Math.max(0, duration - (IN_BASE * scale + OUT));
+            var OUT_START = IN_BASE * scale + HOLD;
+
+            // Choreography (seconds, scaled; converted to integer steps).
+            // Each shape: launch, land, from (offstage), to (on the floor),
+            // arc height, spin, squash amount, sparkle life in steps.
+            function shapeSize(el) {
+              return { w: el.offsetWidth, h: el.offsetHeight };
+            }
+            var throws = [
+              {
+                t0: 0.15,
+                t1: 1.0,
+                from: { x: -0.12 * W, yB: 0.28 * H },
+                to: 0.3 * W,
+                arc: 0.3 * H,
+                rot0: -170,
+                rot1: 8,
+                squash: 0.3,
+                life: 2,
+              },
+              {
+                t0: 0.6,
+                t1: 1.5,
+                from: { x: 1.12 * W, yB: 0.2 * H },
+                to: 0.56 * W,
+                arc: 0.34 * H,
+                rot0: 150,
+                rot1: -6,
+                squash: 0.34,
+                life: 3,
+              },
+              {
+                t0: 1.25,
+                t1: 2.0,
+                from: { x: 0.78 * W, yB: -0.12 * H },
+                to: 0.72 * W,
+                arc: 0.06 * H,
+                rot0: -120,
+                rot1: 5,
+                squash: 0.26,
+                life: 2,
+              },
+              {
+                t0: 1.8,
+                t1: 2.55,
+                from: { x: -0.08 * W, yB: 0.1 * H },
+                to: 0.43 * W,
+                arc: 0.4 * H,
+                rot0: 200,
+                rot1: -12,
+                squash: 0.22,
+                life: 3,
+              },
+            ];
+            for (var s = 0; s < throws.length; s += 1) {
+              var th = throws[s];
+              th.t0 *= scale;
+              th.t1 *= scale;
+              th.landStep = Math.round(th.t1 * fps);
+              th.size = shapeSize(shapes[s]);
+              gsap.set(shapes[s], { transformOrigin: "50% 100%" });
+            }
+
+            // Deterministic per-index hash (sin fold; no Math.random).
+            function rnd(n) {
+              var x = Math.sin(n * 127.1 + 311.7) * 43758.5453;
+              return x - Math.floor(x);
+            }
+            function clamp01(v) {
+              return v < 0 ? 0 : v > 1 ? 1 : v;
+            }
+            function lerp(a, b, p) {
+              return a + (b - a) * p;
+            }
+
+            // Squash schedule by steps-since-landing: hit, deep, rebound
+            // stretch, settle. Positive widens (scaleX 1+a, scaleY 1-a).
+            var SQUASH_ENV = [1, 0.55, -0.3, 0.1, 0];
+            function squashAt(stepsSince, amount) {
+              if (stepsSince < 0) return 0;
+              if (stepsSince >= SQUASH_ENV.length) return 0;
+              return SQUASH_ENV[stepsSince] * amount;
+            }
+
+            // THE LAW: quantize first, then evaluate everything from ts.
+            // The 1e-6 epsilon absorbs GSAP seek round-trip float error so
+            // a seek landing exactly on a step boundary quantizes the same
+            // way from either direction.
+            function applyTime(timeSeconds) {
+              var step = Math.floor(timeSeconds * fps + 1e-6);
+              var ts = step / fps;
+              var boilIdx = Math.floor(step / 2);
+
+              for (var i = 0; i < throws.length; i += 1) {
+                var th = throws[i];
+                var el = shapes[i];
+                var sw = th.size.w;
+                var sh = th.size.h;
+                var landed = step >= th.landStep;
+                var u = clamp01((ts - th.t0) / Math.max(0.001, th.t1 - th.t0));
+                if (landed) u = 1;
+                var visible = ts >= th.t0;
+
+                // Ballistic arc: linear x, parabolic lift over the line
+                // from launch height to the ground.
+                var xC = lerp(th.from.x, th.to, u);
+                var yB = lerp(th.from.yB, groundY, u) - th.arc * 4 * u * (1 - u);
+                var rot = lerp(th.rot0, th.rot1, 1 - (1 - u) * (1 - u));
+
+                // Squash on the hit, keyed to integer steps since landing.
+                var a = squashAt(step - th.landStep, th.squash);
+                var sxq = 1 + a;
+                var syq = 1 - a * 0.85;
+
+                // 2-frame boil, seeded per boil window, per shape.
+                var bx = 0;
+                var by = 0;
+                var br = 0;
+                if (boil && visible) {
+                  bx = (rnd(boilIdx * 13 + i * 101) - 0.5) * 0.008 * M;
+                  by = (rnd(boilIdx * 29 + i * 211) - 0.5) * 0.008 * M;
+                  br = (rnd(boilIdx * 47 + i * 331) - 0.5) * 1.6;
+                }
+
+                gsap.set(el, {
+                  x: xC - sw / 2 + bx,
+                  y: yB - sh + by,
+                  rotation: rot + br,
+                  scaleX: sxq,
+                  scaleY: syq,
+                  opacity: visible ? 1 : 0,
+                });
+
+                // Contact shadow: grows and darkens as the shape nears
+                // the floor, pinned to the landing spot.
+                var height = clamp01((groundY - yB) / (0.45 * H));
+                var shadowScale = lerp(1.05, 0.55, height);
+                gsap.set(shadows[i], {
+                  x: xC - 0.06 * M,
+                  y: groundY - 0.01 * M,
+                  scaleX: shadowScale * (landed ? sxq : 1),
+                  scaleY: shadowScale * 0.9,
+                  opacity: visible ? lerp(0.85, 0.25, height) : 0,
+                });
+
+                // Sparkle: alive for EXACTLY life steps from the hit,
+                // frame-alternating big / small rotated 45deg.
+                var d = step - th.landStep;
+                var sp = sparkles[i];
+                if (d >= 0 && d < th.life) {
+                  var side = i % 2 === 0 ? -1 : 1;
+                  gsap.set(sp, {
+                    x: xC + side * (sw * 0.62) - 0.0275 * M,
+                    y: groundY - sh * 0.9,
+                    scale: d % 2 === 0 ? 1 : 0.62,
+                    rotation: d % 2 === 0 ? 0 : 45,
+                    opacity: 1,
+                  });
+                } else {
+                  gsap.set(sp, { opacity: 0 });
+                }
+              }
+            }
+
+            gsap.set(stage, { opacity: 1, y: "0cqh" });
+
+            var tl = gsap.timeline({
+              paused: true,
+              onUpdate: function () {
+                applyTime(tl.time());
+              },
+            });
+
+            // Anchor tween: inert, spans [0, D] so onUpdate fires for
+            // every eventful seek and holds never clamp short.
+            tl.to({ p: 0 }, { p: 1, duration: duration, ease: "none" }, 0);
+
+            // OUT: optional departure; exit none holds until the cut.
+            if (exit === "up") {
+              tl.to(stage, { y: "-4cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "fade") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            }
+
+            tl.seek(0);
+            applyTime(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["stop-motion-cadence"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/store-badge-lockup/demo.html b/registry/components/store-badge-lockup/demo.html
new file mode 100644
index 0000000000..d893a87e72
--- /dev/null
+++ b/registry/components/store-badge-lockup/demo.html
@@ -0,0 +1,102 @@
+<!doctype html>
+<!--
+  store-badge-lockup demo: standalone 1920x1080 host composition. It mounts
+  the primitive through data-composition-src into a definite end-card panel.
+  Default variable values keep both CSS-drawn badges visible for screening.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Store Badge Lockup Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+
+      #root {
+        --bg: #080b13;
+        --fg: #f7f9fc;
+        --muted: #aab4c5;
+        --surface: #151c29;
+        --border: #3b4659;
+        --brand: #7c6cff;
+        --accent: #42d3b2;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-body: Inter, system-ui, sans-serif;
+        --font-mono: ui-monospace, monospace;
+        --radius: 2.4cqh;
+        --space-1: 1.2cqh;
+        --space-2: 2.4cqh;
+        --space-3: 4.8cqh;
+        --dur-beat: 0.4s;
+        --ease-standard: cubic-bezier(0.215, 0.61, 0.355, 1);
+        --ease-emphasis: cubic-bezier(0.19, 1, 0.22, 1);
+        --ease-exit: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        display: grid;
+        place-items: center;
+        background: radial-gradient(
+          ellipse at 50% 44%,
+          color-mix(in srgb, var(--surface) 72%, var(--bg)),
+          var(--bg) 72%
+        );
+      }
+
+      .mount-card {
+        width: 66%;
+        height: 58%;
+        left: 17%;
+        top: 21%;
+        overflow: hidden;
+        border: 0.14cqh solid var(--border);
+        border-radius: calc(var(--radius) * 1.45);
+        background: var(--bg);
+        box-shadow: 0 4cqh 11cqh color-mix(in srgb, var(--fg) 11%, transparent);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="store-badge-lockup-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="store-badge-lockup-mount"
+        class="mount-card clip"
+        data-composition-id="store-badge-lockup"
+        data-composition-src="./store-badge-lockup.html"
+        data-variable-values='{"headline":"Get the app","showApple":"yes","showGoogle":"yes"}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="1267"
+        data-height="626"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["store-badge-lockup-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/store-badge-lockup/registry-item.json b/registry/components/store-badge-lockup/registry-item.json
new file mode 100644
index 0000000000..0979f9d471
--- /dev/null
+++ b/registry/components/store-badge-lockup/registry-item.json
@@ -0,0 +1,72 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "store-badge-lockup",
+  "type": "hyperframes:component",
+  "title": "Store Badge Lockup",
+  "description": "Settles a short headline above equal-size App Store and Google Play badges as a token-driven mobile end-card call to action.",
+  "tags": ["prop", "ui-props", "mobile", "store-badges", "cta", "ask"],
+  "jobs": ["ask"],
+  "family": "ui-props",
+  "profile": "holdable",
+  "evidence": "GAP B1 mobile close: app launches need a store-badge end card instead of a URL, and the registry coverage audit found no existing two-store download lockup.",
+  "syncPoints": [
+    {
+      "id": "lockup-settled",
+      "phase": "in",
+      "offset": 1
+    }
+  ],
+  "files": [
+    {
+      "path": "store-badge-lockup.html",
+      "target": "compositions/components/store-badge-lockup.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "headline",
+      "type": "string",
+      "role": "content",
+      "label": "Headline",
+      "description": "Short action line shown above the store badges.",
+      "default": "Get the app"
+    },
+    {
+      "id": "showApple",
+      "type": "enum",
+      "role": "content",
+      "label": "Show App Store",
+      "description": "Show or hide the App Store badge.",
+      "default": "yes",
+      "options": [
+        {
+          "value": "yes",
+          "label": "Yes"
+        },
+        {
+          "value": "no",
+          "label": "No"
+        }
+      ]
+    },
+    {
+      "id": "showGoogle",
+      "type": "enum",
+      "role": "content",
+      "label": "Show Google Play",
+      "description": "Show or hide the Google Play badge.",
+      "default": "yes",
+      "options": [
+        {
+          "value": "yes",
+          "label": "Yes"
+        },
+        {
+          "value": "no",
+          "label": "No"
+        }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/store-badge-lockup/store-badge-lockup.html b/registry/components/store-badge-lockup/store-badge-lockup.html
new file mode 100644
index 0000000000..ad55505f2a
--- /dev/null
+++ b/registry/components/store-badge-lockup/store-badge-lockup.html
@@ -0,0 +1,305 @@
+<!doctype html>
+<!--
+  store-badge-lockup: HyperFrames video primitive (ui-props / holdable / ask)
+
+  Concept: a short headline settles first, followed by equal-size App Store
+  and Google Play download badges that rise and fade into a standard mobile
+  end-card lockup. The badges use generic CSS glyphs and token paint only.
+
+  Compiled-from evidence: GAP B1 mobile close. The B1 consumer simulation
+  needed a mobile-native close, while the coverage audit found no registry
+  item that presents and animates the two store badges as one download CTA.
+
+  Use when: an app launch or mobile product film needs to end with store
+  destinations instead of a web URL.
+
+  Variables:
+    - headline (string, default "Get the app"): end-card action line.
+    - showApple (yes | no, default yes): include the App Store badge.
+    - showGoogle (yes | no, default yes): include the Google Play badge.
+
+  Envelope (holdable):
+    IN   1.20s fixed headline-first settle and staggered badge entrance.
+    HOLD elastic and deliberately still so the CTA remains readable.
+    OUT  0.45s fixed release fade.
+    If D is shorter than 1.65s, IN and OUT scale together. HOLD is the only
+    elastic phase, and the timeline is never time-scaled.
+
+  Sync point:
+    - lockup-settled at 1.00s into IN. This fixed offset compresses only for
+      short durations and never enters HOLD.
+
+  Sound cues: none. The lockup has no discrete impact event.
+
+  Mount contract: this file is a template-wrapped sub-composition. The host
+  owns dimensions. #root fills the host box with inset:0 and container-type:
+  size, carries no data-width or data-height, and registers one paused GSAP
+  timeline under the hardcoded id "store-badge-lockup".
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "headline", "type": "string", "role": "content", "label": "Headline", "description": "Short action line shown above the store badges.", "default": "Get the app" },
+    { "id": "showApple", "type": "enum", "role": "content", "label": "Show App Store", "description": "Show or hide the App Store badge.", "default": "yes", "options": [{ "value": "yes", "label": "Yes" }, { "value": "no", "label": "No" }] },
+    { "id": "showGoogle", "type": "enum", "role": "content", "label": "Show Google Play", "description": "Show or hide the Google Play badge.", "default": "yes", "options": [{ "value": "yes", "label": "Yes" }, { "value": "no", "label": "No" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Store Badge Lockup</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="store-badge-lockup" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            color: var(--fg);
+            font-family: var(--font-body);
+          }
+
+          .sbl-clip {
+            width: 100%;
+            height: 100%;
+            display: grid;
+            place-items: center;
+            padding: var(--space-3);
+            overflow: hidden;
+            background: var(--bg);
+          }
+
+          .sbl-lockup {
+            width: min(88cqw, 154cqh);
+            display: grid;
+            justify-items: center;
+            gap: min(6cqw, 7cqh);
+          }
+
+          .sbl-headline {
+            margin: 0;
+            max-width: 82cqw;
+            color: var(--fg);
+            font-family: var(--font-display);
+            font-size: min(8.2cqw, 12.5cqh);
+            font-weight: 750;
+            line-height: 1;
+            letter-spacing: -0.045em;
+            text-align: center;
+            text-wrap: balance;
+            will-change: transform, opacity;
+          }
+
+          .sbl-badges {
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: var(--space-2);
+          }
+
+          /* EDIT ZONE: both destinations share one badge geometry and one
+             text hierarchy. This single rule owns sizing, spacing, and order
+             so the pair cannot drift into mismatched lockups. */
+          .sbl-badge {
+            width: min(40cqw, 67cqh);
+            aspect-ratio: 3.12 / 1;
+            display: grid;
+            grid-template-columns: auto minmax(0, 1fr);
+            align-items: center;
+            gap: var(--space-1);
+            padding: min(2.2cqw, 3.2cqh) min(3cqw, 4.8cqh);
+            border: 0.16cqh solid var(--border);
+            border-radius: calc(var(--radius) * 4);
+            background: var(--surface);
+            color: var(--fg);
+            box-shadow: 0 1.5cqh 3.8cqh color-mix(in srgb, var(--bg) 70%, transparent);
+            will-change: transform, opacity;
+          }
+
+          .sbl-glyph {
+            width: min(6.7cqw, 10.5cqh);
+            aspect-ratio: 1;
+            display: grid;
+            place-items: center;
+            flex: none;
+            border: 0.16cqh solid color-mix(in srgb, var(--fg) 28%, transparent);
+            border-radius: calc(var(--radius) * 0.72);
+            background: color-mix(in srgb, var(--brand) 20%, var(--surface));
+            color: var(--fg);
+          }
+
+          .sbl-apple-mark {
+            font-family: var(--font-display);
+            font-size: min(3.2cqw, 5.2cqh);
+            font-weight: 800;
+            line-height: 1;
+          }
+
+          .sbl-play-mark {
+            width: 42%;
+            aspect-ratio: 0.88;
+            clip-path: polygon(8% 0, 100% 50%, 8% 100%);
+            background: currentColor;
+          }
+
+          .sbl-copy {
+            min-width: 0;
+            display: grid;
+            gap: min(0.4cqw, 0.6cqh);
+          }
+
+          .sbl-microcopy {
+            color: var(--muted);
+            font-family: var(--font-body);
+            font-size: min(1.65cqw, 2.65cqh);
+            font-weight: 600;
+            line-height: 1;
+            letter-spacing: 0.04em;
+            white-space: nowrap;
+          }
+
+          .sbl-label {
+            color: var(--fg);
+            font-family: var(--font-display);
+            font-size: min(3.75cqw, 5.8cqh);
+            font-weight: 720;
+            line-height: 1;
+            letter-spacing: -0.025em;
+            white-space: nowrap;
+          }
+        </style>
+
+        <div
+          id="store-badge-lockup-clip"
+          class="sbl-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <section class="sbl-lockup" aria-label="Download the app">
+            <h1 class="sbl-headline"></h1>
+            <div class="sbl-badges">
+              <div class="sbl-badge sbl-apple" role="img" aria-label="Download on the App Store">
+                <span class="sbl-glyph" aria-hidden="true">
+                  <span class="sbl-apple-mark">A</span>
+                </span>
+                <span class="sbl-copy" aria-hidden="true">
+                  <span class="sbl-microcopy">Download on the</span>
+                  <span class="sbl-label">App Store</span>
+                </span>
+              </div>
+
+              <div class="sbl-badge sbl-google" role="img" aria-label="Get it on Google Play">
+                <span class="sbl-glyph" aria-hidden="true">
+                  <span class="sbl-play-mark"></span>
+                </span>
+                <span class="sbl-copy" aria-hidden="true">
+                  <span class="sbl-microcopy">GET IT ON</span>
+                  <span class="sbl-label">Google Play</span>
+                </span>
+              </div>
+            </div>
+          </section>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var compositionId = "store-badge-lockup";
+            var lockup = root.querySelector(".sbl-lockup");
+            var headlineElement = root.querySelector(".sbl-headline");
+            var appleBadge = root.querySelector(".sbl-apple");
+            var googleBadge = root.querySelector(".sbl-google");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            /* INVARIANT: getVariables() owns all three public decisions.
+               Missing values use the declared defaults. Only an explicit
+               "no" removes a badge, while an empty headline remains empty. */
+            var headline = vars.headline == null ? "Get the app" : String(vars.headline);
+            var showApple = vars.showApple === "no" ? "no" : "yes";
+            var showGoogle = vars.showGoogle === "no" ? "no" : "yes";
+
+            headlineElement.textContent = headline;
+            if (showApple === "no") {
+              appleBadge.remove();
+            }
+            if (showGoogle === "no") {
+              googleBadge.remove();
+            }
+
+            var badgeElements = root.querySelectorAll(".sbl-badge");
+
+            /* RETIME RANGE: these constants own the complete lifecycle. The
+               headline finishes first. Both badges then rise and fade on
+               --ease-standard's GSAP owner, power2.out, with a small stagger. */
+            var IN_BASE = 1.2;
+            var OUT_BASE = 0.45;
+            var HEADLINE_START_BASE = 0.05;
+            var HEADLINE_DURATION_BASE = 0.48;
+            var BADGE_START_BASE = 0.22;
+            var BADGE_DURATION_BASE = 0.68;
+            var BADGE_STAGGER_BASE = 0.1;
+            var durationValue = Number(root.dataset.duration);
+            var duration = Number.isFinite(durationValue) && durationValue > 0 ? durationValue : 4;
+            var scale = duration < IN_BASE + OUT_BASE ? duration / (IN_BASE + OUT_BASE) : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var OUT_START = IN + HOLD;
+
+            var timeline = gsap.timeline({ paused: true });
+
+            timeline.fromTo(
+              headlineElement,
+              { y: "22%", opacity: 0 },
+              {
+                y: "0%",
+                opacity: 1,
+                duration: HEADLINE_DURATION_BASE * scale,
+                ease: "power2.out",
+              },
+              HEADLINE_START_BASE * scale,
+            );
+
+            if (badgeElements.length > 0) {
+              timeline.fromTo(
+                badgeElements,
+                { y: "28%", opacity: 0 },
+                {
+                  y: "0%",
+                  opacity: 1,
+                  duration: BADGE_DURATION_BASE * scale,
+                  stagger: BADGE_STAGGER_BASE * scale,
+                  ease: "power2.out",
+                },
+                BADGE_START_BASE * scale,
+              );
+            }
+
+            timeline.to(lockup, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            timeline.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = timeline;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/strikethrough-replace/demo.html b/registry/components/strikethrough-replace/demo.html
new file mode 100644
index 0000000000..785723172c
--- /dev/null
+++ b/registry/components/strikethrough-replace/demo.html
@@ -0,0 +1,100 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Strikethrough Replace - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        min-width: 900px;
+        min-height: 500px;
+        padding: 64px;
+        /* ponytail: scale non-GSAP wrapper; GSAP targets are children */
+        transform: scale(2.8);
+      }
+      .hf-remocn-strikethrough-replace {
+        color: #18181b;
+        font-family: Inter, system-ui, sans-serif;
+        font-weight: 900;
+        letter-spacing: -0.04em;
+      }
+      .hf-remocn-strikethrough-replace {
+        position: relative;
+        display: inline-grid;
+        grid-auto-flow: column;
+        gap: 18px;
+        align-items: center;
+        font-size: 58px;
+      }
+      .hf-remocn-strikethrough-replace i {
+        position: absolute;
+        left: 0;
+        width: 48%;
+        height: 6px;
+        border-radius: 999px;
+        background: #ef4444;
+        transform: scaleX(var(--hf-strike-progress, 1));
+        transform-origin: left center;
+      }
+      .hf-remocn-strikethrough-replace strong {
+        opacity: var(--hf-replace-opacity, 1);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="strikethrough-replace-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-strikethrough-replace">
+          <span>Slow</span><i></i><strong>Fast</strong>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-strikethrough-replace i",
+          { "--hf-strike-progress": 0 },
+          { "--hf-strike-progress": 1, duration: 0.28, ease: "power2.out" },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-strikethrough-replace strong",
+          { "--hf-replace-opacity": 0, y: 14 },
+          { "--hf-replace-opacity": 1, y: 0, duration: 0.3, ease: "power2.out" },
+          startTime + 0.24,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["strikethrough-replace-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/strikethrough-replace/registry-item.json b/registry/components/strikethrough-replace/registry-item.json
new file mode 100644
index 0000000000..9bdb46afea
--- /dev/null
+++ b/registry/components/strikethrough-replace/registry-item.json
@@ -0,0 +1,72 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "strikethrough-replace",
+  "type": "hyperframes:component",
+  "title": "Strikethrough Replace",
+  "description": "Draw a strike line across old text, then reveal the replacement.",
+  "tags": ["motion-primitive", "remocn-port", "typography"],
+  "files": [
+    {
+      "path": "strikethrough-replace.html",
+      "target": "compositions/components/strikethrough-replace.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "origin",
+      "type": "enum",
+      "role": "motion",
+      "label": "Origin",
+      "description": "Edge the strike grows out of as the timeline runs its scale from 0 to 1.",
+      "default": "left",
+      "options": [
+        { "value": "left", "label": "Left" },
+        { "value": "center", "label": "Center" },
+        { "value": "right", "label": "Right" }
+      ]
+    },
+    {
+      "id": "thickness",
+      "type": "enum",
+      "role": "style",
+      "label": "Thickness",
+      "description": "Height of the strike line, from a hairline rule to a heavy bar.",
+      "default": "standard",
+      "options": [
+        { "value": "thin", "label": "Thin" },
+        { "value": "standard", "label": "Standard" },
+        { "value": "thick", "label": "Thick" }
+      ]
+    },
+    {
+      "id": "tint",
+      "type": "enum",
+      "role": "style",
+      "label": "Tint",
+      "description": "Strike colour. Blue and violet ride --accent and --accent-2.",
+      "default": "red",
+      "options": [
+        { "value": "red", "label": "Red" },
+        { "value": "amber", "label": "Amber" },
+        { "value": "blue", "label": "Blue" },
+        { "value": "violet", "label": "Violet" }
+      ]
+    },
+    {
+      "id": "tone",
+      "type": "enum",
+      "role": "style",
+      "label": "Tone",
+      "description": "Colour of both words: ink for light frames, paper for dark ones.",
+      "default": "ink",
+      "options": [
+        { "value": "ink", "label": "Ink" },
+        { "value": "paper", "label": "Paper" }
+      ]
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/strikethrough-replace.png"
+  }
+}
diff --git a/registry/components/strikethrough-replace/strikethrough-replace.html b/registry/components/strikethrough-replace/strikethrough-replace.html
new file mode 100644
index 0000000000..5418867da8
--- /dev/null
+++ b/registry/components/strikethrough-replace/strikethrough-replace.html
@@ -0,0 +1,113 @@
+<!--
+  Strikethrough Replace - remocn typography primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Drive the timeline
+  integration from a paused GSAP timeline so renders remain deterministic.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result as a custom property
+  the CSS below consumes. The timeline recipe at the bottom is untouched by
+  them: it keeps drawing one strike and fading in one replacement, and these
+  decide which way that strike draws and what the pair looks like.
+
+    - origin (left | center | right, default left): the edge the strike grows
+      out of while the timeline runs its scale from 0 to 1. left wipes forward,
+      right wipes backward, center opens from the middle outwards. Once the
+      line is fully drawn all three look the same, so this reads while the
+      strike is drawing, not after it has landed.
+    - thickness (thin | standard | thick, default standard): height of the
+      strike line, 3px, 6px or 10px.
+    - tint (red | amber | blue | violet, default red): strike colour. red and
+      amber are literal, blue and violet ride --accent and --accent-2.
+    - tone (ink | paper, default ink): colour of both words. ink is near-black
+      for light frames, paper near-white for dark ones.
+
+  On every default the result is identical to the original: a 6px red line
+  wipes left to right across near-black text, then the replacement fades up.
+-->
+
+<div
+  class="hf-remocn-strikethrough-replace"
+  data-composition-variables='[
+    { "id": "origin", "type": "enum", "role": "motion", "label": "Origin", "description": "Edge the strike grows out of as the timeline runs its scale from 0 to 1.", "default": "left", "options": [{ "value": "left", "label": "Left" }, { "value": "center", "label": "Center" }, { "value": "right", "label": "Right" }] },
+    { "id": "thickness", "type": "enum", "role": "style", "label": "Thickness", "description": "Height of the strike line, from a hairline rule to a heavy bar.", "default": "standard", "options": [{ "value": "thin", "label": "Thin" }, { "value": "standard", "label": "Standard" }, { "value": "thick", "label": "Thick" }] },
+    { "id": "tint", "type": "enum", "role": "style", "label": "Tint", "description": "Strike colour. Blue and violet ride --accent and --accent-2.", "default": "red", "options": [{ "value": "red", "label": "Red" }, { "value": "amber", "label": "Amber" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Colour of both words: ink for light frames, paper for dark ones.", "default": "ink", "options": [{ "value": "ink", "label": "Ink" }, { "value": "paper", "label": "Paper" }] }
+  ]'
+>
+  <span>Slow</span><i></i><strong>Fast</strong>
+</div>
+
+<style>
+  .hf-remocn-strikethrough-replace {
+    color: var(--hf-strike-text-color, #18181b);
+    font-family: Inter, system-ui, sans-serif;
+    font-weight: 900;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-strikethrough-replace {
+    position: relative;
+    display: inline-grid;
+    grid-auto-flow: column;
+    gap: 18px;
+    align-items: center;
+    font-size: 58px;
+  }
+  .hf-remocn-strikethrough-replace i {
+    position: absolute;
+    left: 0;
+    width: 48%;
+    height: var(--hf-strike-thickness, 6px);
+    border-radius: 999px;
+    background: var(--hf-strike-color, #ef4444);
+    transform: scaleX(var(--hf-strike-progress, 1));
+    transform-origin: var(--hf-strike-origin, left center);
+  }
+  .hf-remocn-strikethrough-replace strong {
+    opacity: var(--hf-replace-opacity, 1);
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    var origins = { left: "left center", center: "center", right: "right center" };
+    var thicknesses = { thin: "3px", standard: "6px", thick: "10px" };
+    var tints = {
+      red: "#ef4444",
+      amber: "#f59e0b",
+      blue: "var(--accent, #38bdf8)",
+      violet: "var(--accent-2, #a78bfa)",
+    };
+    var tones = { ink: "#18181b", paper: "#fafafa" };
+
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var origin = origins[pick(origins, vars.origin, "left")];
+    var thickness = thicknesses[pick(thicknesses, vars.thickness, "standard")];
+    var tint = tints[pick(tints, vars.tint, "red")];
+    var tone = tones[pick(tones, vars.tone, "ink")];
+
+    var roots = document.querySelectorAll(".hf-remocn-strikethrough-replace");
+    for (var i = 0; i < roots.length; i += 1) {
+      roots[i].style.setProperty("--hf-strike-origin", origin);
+      roots[i].style.setProperty("--hf-strike-thickness", thickness);
+      roots[i].style.setProperty("--hf-strike-color", tint);
+      roots[i].style.setProperty("--hf-strike-text-color", tone);
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-strikethrough-replace i', { '--hf-strike-progress': 0 }, { '--hf-strike-progress': 1, duration: 0.28, ease: 'power2.out' }, startTime); tl.fromTo('.hf-remocn-strikethrough-replace strong', { '--hf-replace-opacity': 0, y: 14 }, { '--hf-replace-opacity': 1, y: 0, duration: 0.3, ease: 'power2.out' }, startTime + 0.24);
+-->
diff --git a/registry/components/success-check/demo.html b/registry/components/success-check/demo.html
new file mode 100644
index 0000000000..3f7cf102be
--- /dev/null
+++ b/registry/components/success-check/demo.html
@@ -0,0 +1,117 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Success Check - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        min-width: 760px;
+        min-height: 480px;
+        padding: 56px;
+      }
+      .hf-transition-success-check {
+        display: grid;
+        place-items: center;
+        /* ponytail: sized up from 82px to fill ~55% of frame height at 1080p */
+        width: 340px;
+        height: 340px;
+        border-radius: 999px;
+        background: #dcfce7;
+        color: #16a34a;
+        box-shadow:
+          0 24px 80px rgba(22, 163, 74, 0.18),
+          0 4px 16px rgba(22, 163, 74, 0.1);
+      }
+      .hf-transition-success-check svg {
+        width: 220px;
+        height: 220px;
+        fill: none;
+        stroke: currentColor;
+        stroke-width: 3.5;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        filter: blur(var(--hf-check-blur, 0px));
+        transform: rotate(var(--hf-check-rotate, 0deg)) scale(var(--hf-check-scale, 1));
+      }
+      .hf-transition-success-check circle {
+        opacity: 0.28;
+      }
+      .hf-transition-success-check path {
+        stroke-dasharray: 36;
+        stroke-dashoffset: var(--hf-check-dash, 0);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="success-check-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-transition-success-check" aria-label="Success">
+          <svg viewBox="0 0 64 64">
+            <circle cx="32" cy="32" r="27" />
+            <path d="M20 33.5l8 8L45 23" />
+          </svg>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-transition-success-check svg",
+          {
+            opacity: 0,
+            "--hf-check-scale": 0.72,
+            "--hf-check-rotate": "-18deg",
+            "--hf-check-blur": "7px",
+          },
+          {
+            opacity: 1,
+            "--hf-check-scale": 1,
+            "--hf-check-rotate": "0deg",
+            "--hf-check-blur": "0px",
+            duration: 0.34,
+            ease: "back.out(1.8)",
+          },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-transition-success-check path",
+          { "--hf-check-dash": 36 },
+          { "--hf-check-dash": 0, duration: 0.42, ease: "power2.out" },
+          startTime + 0.12,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["success-check-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/success-check/registry-item.json b/registry/components/success-check/registry-item.json
new file mode 100644
index 0000000000..19bc4128f6
--- /dev/null
+++ b/registry/components/success-check/registry-item.json
@@ -0,0 +1,112 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "success-check",
+  "type": "hyperframes:component",
+  "title": "Success Check",
+  "description": "A success check primitive with ring pop, path draw, and subtle rotate blur",
+  "tags": ["video-primitive", "transition-primitive", "transitions-dev-port", "success", "check"],
+  "files": [
+    {
+      "path": "success-check.html",
+      "target": "compositions/components/success-check.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "tint",
+      "type": "enum",
+      "role": "style",
+      "label": "Tint",
+      "description": "Colour pair, a pale halo behind a saturated mark. green and amber are literal state colours; blue and violet ride the composition theme tokens.",
+      "default": "green",
+      "options": [
+        {
+          "value": "green",
+          "label": "Green"
+        },
+        {
+          "value": "blue",
+          "label": "Blue"
+        },
+        {
+          "value": "violet",
+          "label": "Violet"
+        },
+        {
+          "value": "amber",
+          "label": "Amber"
+        }
+      ]
+    },
+    {
+      "id": "size",
+      "type": "enum",
+      "role": "layout",
+      "label": "Size",
+      "description": "Diameter of the halo and of the mark inside it.",
+      "default": "standard",
+      "options": [
+        {
+          "value": "small",
+          "label": "Small"
+        },
+        {
+          "value": "standard",
+          "label": "Standard"
+        },
+        {
+          "value": "large",
+          "label": "Large"
+        }
+      ]
+    },
+    {
+      "id": "ring",
+      "type": "enum",
+      "role": "style",
+      "label": "Ring",
+      "description": "Opacity of the circle the tick sits in.",
+      "default": "standard",
+      "options": [
+        {
+          "value": "subtle",
+          "label": "Subtle"
+        },
+        {
+          "value": "standard",
+          "label": "Standard"
+        },
+        {
+          "value": "bold",
+          "label": "Bold"
+        }
+      ]
+    },
+    {
+      "id": "spin",
+      "type": "enum",
+      "role": "motion",
+      "label": "Spin",
+      "description": "Multiplies the rotation the timeline drives, so the mark swings less or more into place.",
+      "default": "standard",
+      "options": [
+        {
+          "value": "subtle",
+          "label": "Subtle"
+        },
+        {
+          "value": "standard",
+          "label": "Standard"
+        },
+        {
+          "value": "bold",
+          "label": "Bold"
+        }
+      ]
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/success-check.png"
+  }
+}
diff --git a/registry/components/success-check/success-check.html b/registry/components/success-check/success-check.html
new file mode 100644
index 0000000000..92913d6944
--- /dev/null
+++ b/registry/components/success-check/success-check.html
@@ -0,0 +1,135 @@
+<!--
+  Success Check - transitions.dev-inspired primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Use the timeline
+  integration note at the bottom as the starting point for deterministic GSAP
+  animation.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result as a custom property
+  the CSS below consumes. The timeline recipe at the bottom is untouched by
+  them: it keeps popping the mark in and drawing the tick, and these decide how
+  big it is, what colour it wears and how far the pop swings.
+
+    - tint (green | blue | violet | amber, default green): the colour pair, a
+      pale halo behind a saturated mark. green and amber are literal state
+      colours and stay legible whatever the surrounding theme tokens hold; blue
+      and violet name no state, so their mark rides the composition's own accent
+      and accent-2 tokens over a neutral halo and falls back to ink when the
+      composition declares none.
+    - size (small | standard | large, default standard): diameter of the halo
+      and of the mark inside it, 60px, 82px or 110px. The stroke is in viewBox
+      units, so it thickens with the mark instead of staying pinned.
+    - ring (subtle | standard | bold, default standard): opacity of the circle
+      the tick sits in, 0.12, 0.28 or 0.6.
+    - spin (subtle | standard | bold, default standard): multiplies the rotation
+      the timeline drives, so the mark swings a quarter as far or twice as far
+      into place. It scales what is already there rather than replacing it, so
+      it still lands square at the end of the pop, and at rest, with no rotation
+      driven, all three settle identically.
+
+  On every default the result is identical to the original: an 82px pale green
+  halo, a green tick, a 0.28 ring, and the authored -18deg pop.
+-->
+
+<div
+  class="hf-transition-success-check"
+  aria-label="Success"
+  data-composition-variables='[
+    { "id": "tint", "type": "enum", "role": "style", "label": "Tint", "description": "Colour pair, a pale halo behind a saturated mark. green and amber are literal state colours; blue and violet ride the composition theme tokens.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }, { "value": "amber", "label": "Amber" }] },
+    { "id": "size", "type": "enum", "role": "layout", "label": "Size", "description": "Diameter of the halo and of the mark inside it.", "default": "standard", "options": [{ "value": "small", "label": "Small" }, { "value": "standard", "label": "Standard" }, { "value": "large", "label": "Large" }] },
+    { "id": "ring", "type": "enum", "role": "style", "label": "Ring", "description": "Opacity of the circle the tick sits in.", "default": "standard", "options": [{ "value": "subtle", "label": "Subtle" }, { "value": "standard", "label": "Standard" }, { "value": "bold", "label": "Bold" }] },
+    { "id": "spin", "type": "enum", "role": "motion", "label": "Spin", "description": "Multiplies the rotation the timeline drives, so the mark swings less or more into place.", "default": "standard", "options": [{ "value": "subtle", "label": "Subtle" }, { "value": "standard", "label": "Standard" }, { "value": "bold", "label": "Bold" }] }
+  ]'
+>
+  <svg viewBox="0 0 64 64">
+    <circle cx="32" cy="32" r="27" />
+    <path d="M20 33.5l8 8L45 23" />
+  </svg>
+</div>
+
+<style>
+  .hf-transition-success-check {
+    display: grid;
+    place-items: center;
+    width: var(--hf-check-size, 82px);
+    height: var(--hf-check-size, 82px);
+    border-radius: 999px;
+    background: var(--hf-check-halo, #dcfce7);
+    color: var(--hf-check-ink, #16a34a);
+  }
+  .hf-transition-success-check svg {
+    width: var(--hf-check-mark-size, 64px);
+    height: var(--hf-check-mark-size, 64px);
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 5;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    filter: blur(var(--hf-check-blur, 0px));
+    transform: rotate(calc(var(--hf-check-rotate, 0deg) * var(--hf-check-spin, 1)))
+      scale(var(--hf-check-scale, 1));
+  }
+  .hf-transition-success-check circle {
+    opacity: var(--hf-check-ring-opacity, 0.28);
+  }
+  .hf-transition-success-check path {
+    stroke-dasharray: 36;
+    stroke-dashoffset: var(--hf-check-dash, 0);
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    // The mark is the whole composition and its colour is its meaning, so this
+    // is the one place an accent belongs. green and amber are the literal
+    // success and caution conventions; blue and violet named no state, so they
+    // ride the composition's own tokens over a neutral halo and fall back to
+    // ink when the composition declares none.
+    var tints = {
+      green: { halo: "#dcfce7", ink: "#16a34a" },
+      blue: { halo: "#f4f4f5", ink: "var(--accent, #18181b)" },
+      violet: { halo: "#f4f4f5", ink: "var(--accent-2, #18181b)" },
+      amber: { halo: "#fef3c7", ink: "#d97706" },
+    };
+    var sizes = {
+      small: { box: "60px", mark: "47px" },
+      standard: { box: "82px", mark: "64px" },
+      large: { box: "110px", mark: "86px" },
+    };
+    var rings = { subtle: "0.12", standard: "0.28", bold: "0.6" };
+    var spins = { subtle: "0.4", standard: "1", bold: "2" };
+
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var tint = tints[pick(tints, vars.tint, "green")];
+    var size = sizes[pick(sizes, vars.size, "standard")];
+    var ring = rings[pick(rings, vars.ring, "standard")];
+    var spin = spins[pick(spins, vars.spin, "standard")];
+
+    var roots = document.querySelectorAll(".hf-transition-success-check");
+    for (var i = 0; i < roots.length; i += 1) {
+      roots[i].style.setProperty("--hf-check-halo", tint.halo);
+      roots[i].style.setProperty("--hf-check-ink", tint.ink);
+      roots[i].style.setProperty("--hf-check-size", size.box);
+      roots[i].style.setProperty("--hf-check-mark-size", size.mark);
+      roots[i].style.setProperty("--hf-check-ring-opacity", ring);
+      roots[i].style.setProperty("--hf-check-spin", spin);
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-transition-success-check svg', { opacity: 0, '--hf-check-scale': 0.72, '--hf-check-rotate': '-18deg', '--hf-check-blur': '7px' }, { opacity: 1, '--hf-check-scale': 1, '--hf-check-rotate': '0deg', '--hf-check-blur': '0px', duration: 0.34, ease: 'back.out(1.8)' }, startTime); tl.fromTo('.hf-transition-success-check path', { '--hf-check-dash': 36 }, { '--hf-check-dash': 0, duration: 0.42, ease: 'power2.out' }, startTime + 0.12);
+-->
diff --git a/registry/components/svg-line-draw-loader/demo.html b/registry/components/svg-line-draw-loader/demo.html
new file mode 100644
index 0000000000..0e35ece9e9
--- /dev/null
+++ b/registry/components/svg-line-draw-loader/demo.html
@@ -0,0 +1,118 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>SVG Line Draw Loader - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: var(--bg, #f4f4f5);
+        font-family: var(--font-body, Inter, system-ui, sans-serif);
+      }
+      .hf-advanced-svg-line-draw-loader {
+        color: var(--fg, #18181b);
+        font-family: var(--font-body, Inter, system-ui, sans-serif);
+      }
+      .hf-advanced-svg-line-draw-loader {
+        width: 720px;
+        min-height: 420px;
+        border-radius: 16px;
+        padding: 48px;
+        background: var(--surface, #ffffff);
+        box-shadow:
+          0 24px 70px rgba(0, 0, 0, 0.1),
+          0 1px 0 var(--border, #e4e4e7) inset;
+        border: 1px solid var(--border, #e4e4e7);
+        display: grid;
+        place-items: center;
+        /* ponytail: scale wrapper — GSAP only targets path, not this element */
+        transform: scale(1.7);
+      }
+      .hf-advanced-svg-line-draw-loader .grid {
+        display: grid;
+        grid-template-columns: repeat(8, 46px);
+        gap: 10px;
+      }
+      .hf-advanced-svg-line-draw-loader .cell {
+        width: 46px;
+        height: 46px;
+        border-radius: 14px;
+        background: color-mix(in srgb, var(--fg, #111827) 45%, transparent);
+        transform: translateY(var(--hf-cell-y, 0px)) scale(var(--hf-cell-scale, 1));
+        opacity: var(--hf-cell-opacity, 1);
+      }
+      .hf-advanced-svg-line-draw-loader svg {
+        width: 520px;
+        height: 220px;
+        overflow: visible;
+      }
+      .hf-advanced-svg-line-draw-loader path {
+        fill: none;
+        stroke: var(--accent, #18181b);
+        stroke-width: 12;
+        stroke-linecap: round;
+        stroke-dasharray: 900;
+        stroke-dashoffset: var(--hf-dash, 0);
+      }
+      .hf-advanced-svg-line-draw-loader .stack {
+        position: relative;
+        width: 520px;
+        height: 260px;
+      }
+      .hf-advanced-svg-line-draw-loader .card {
+        position: absolute;
+        inset: 0;
+        border-radius: 26px;
+        background: linear-gradient(135deg, var(--surface, #fafafa), var(--surface, #e4e4e7));
+        border: 1px solid var(--border, rgba(15, 23, 42, 0.08));
+        box-shadow: 0 20px 54px rgba(15, 23, 42, 0.14);
+        transform: translateY(var(--hf-card-y, 0px)) scale(var(--hf-card-scale, 1));
+        opacity: var(--hf-card-opacity, 1);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="svg-line-draw-loader-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="hf-advanced-svg-line-draw-loader">
+        <svg viewBox="0 0 520 220">
+          <path d="M24 160 C90 28, 188 40, 228 128 S356 234, 494 68" />
+        </svg>
+      </div>
+    </div>
+    <script>
+      const tl = gsap.timeline({ paused: true });
+      const startTime = 0.5;
+      tl.fromTo(
+        ".hf-advanced-svg-line-draw-loader path",
+        { "--hf-dash": 900 },
+        { "--hf-dash": 0, duration: 1.35, ease: "power3.inOut" },
+        startTime,
+      );
+      tl.set({}, {}, 5);
+      window.__timelines = window.__timelines || {};
+      window.__timelines["svg-line-draw-loader-demo"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/registry/components/svg-line-draw-loader/registry-item.json b/registry/components/svg-line-draw-loader/registry-item.json
new file mode 100644
index 0000000000..7f30e00a61
--- /dev/null
+++ b/registry/components/svg-line-draw-loader/registry-item.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "svg-line-draw-loader",
+  "type": "hyperframes:component",
+  "title": "SVG Line Draw Loader",
+  "description": "An Anime.js-style path drawing loader implemented as a seekable GSAP stroke timeline.",
+  "tags": ["video-primitive", "advanced-motion", "anime-inspired", "hyperframes-native"],
+  "files": [
+    {
+      "path": "svg-line-draw-loader.html",
+      "target": "compositions/components/svg-line-draw-loader.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/svg-line-draw-loader.png"
+  }
+}
diff --git a/registry/components/svg-line-draw-loader/svg-line-draw-loader.html b/registry/components/svg-line-draw-loader/svg-line-draw-loader.html
new file mode 100644
index 0000000000..5309fbf268
--- /dev/null
+++ b/registry/components/svg-line-draw-loader/svg-line-draw-loader.html
@@ -0,0 +1,75 @@
+<!--
+  SVG Line Draw Loader - advanced HyperFrames primitive.
+
+  This is intentionally seekable: drive it from a paused GSAP timeline.
+  MotionPath examples require GSAP MotionPathPlugin. Three.js examples expose
+  a render(progress) adapter instead of a free-running requestAnimationFrame loop.
+-->
+
+<div class="hf-advanced-svg-line-draw-loader">
+  <svg viewBox="0 0 520 220"><path d="M24 160 C90 28, 188 40, 228 128 S356 234, 494 68" /></svg>
+</div>
+
+<style>
+  .hf-advanced-svg-line-draw-loader {
+    color: var(--fg, #111827);
+    font-family: var(--font-body, Inter, system-ui, sans-serif);
+  }
+  .hf-advanced-svg-line-draw-loader {
+    width: 720px;
+    min-height: 420px;
+    border-radius: var(--radius, 30px);
+    padding: var(--space-3, 36px);
+    background: var(--surface, #fff);
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.16);
+    display: grid;
+    place-items: center;
+  }
+  .hf-advanced-svg-line-draw-loader .grid {
+    display: grid;
+    grid-template-columns: repeat(8, 46px);
+    gap: var(--space-1, 10px);
+  }
+  .hf-advanced-svg-line-draw-loader .cell {
+    width: 46px;
+    height: 46px;
+    border-radius: 14px;
+    background: color-mix(in srgb, var(--fg, #111827) 45%, transparent);
+    transform: translateY(var(--hf-cell-y, 0px)) scale(var(--hf-cell-scale, 1));
+    opacity: var(--hf-cell-opacity, 1);
+  }
+  .hf-advanced-svg-line-draw-loader svg {
+    width: 520px;
+    height: 220px;
+    overflow: visible;
+  }
+  .hf-advanced-svg-line-draw-loader path {
+    fill: none;
+    stroke: var(--accent, #18181b);
+    stroke-width: 14;
+    stroke-linecap: round;
+    stroke-dasharray: 900;
+    stroke-dashoffset: var(--hf-dash, 0);
+  }
+  .hf-advanced-svg-line-draw-loader .stack {
+    position: relative;
+    width: 520px;
+    height: 260px;
+  }
+  .hf-advanced-svg-line-draw-loader .card {
+    position: absolute;
+    inset: 0;
+    border-radius: 26px;
+    background: linear-gradient(135deg, var(--surface, #fafafa), var(--surface, #e4e4e7));
+    border: 1px solid var(--border, rgba(15, 23, 42, 0.08));
+    box-shadow: 0 20px 54px rgba(15, 23, 42, 0.14);
+    transform: translateY(var(--hf-card-y, 0px)) scale(var(--hf-card-scale, 1));
+    opacity: var(--hf-card-opacity, 1);
+  }
+</style>
+
+<!--
+  Timeline integration:
+  const startTime = 0;
+  tl.fromTo('.hf-advanced-svg-line-draw-loader path', { '--hf-dash': 900 }, { '--hf-dash': 0, duration: 1.35, ease: 'power3.inOut' }, startTime);
+-->
diff --git a/registry/components/svg-mask-reveal/demo.html b/registry/components/svg-mask-reveal/demo.html
new file mode 100644
index 0000000000..0b3c863f13
--- /dev/null
+++ b/registry/components/svg-mask-reveal/demo.html
@@ -0,0 +1,102 @@
+<!doctype html>
+<!--
+  svg-mask-reveal -- mounted demo. This standalone composition owns the stage
+  and theme tokens, then mounts svg-mask-reveal.html through
+  data-composition-src. A successful runtime check and snapshot therefore
+  prove the template transport, host sizing, variable flow, and hardcoded
+  timeline key together. The demo is not installed by hyperframes add.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>SVG Mask Reveal - Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+
+      #root {
+        --bg: #07111f;
+        --fg: #f8fafc;
+        --muted: #8da2b8;
+        --surface: #101d31;
+        --border: rgba(248, 250, 252, 0.22);
+        --brand: #ff7a33;
+        --accent: #22d3ee;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-body: Inter, system-ui, sans-serif;
+        --font-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
+        --radius: 24px;
+        --space-1: 8px;
+        --space-2: 16px;
+        --space-3: 32px;
+        --dur-beat: 0.4s;
+        --ease-standard: cubic-bezier(0.215, 0.61, 0.355, 1);
+        --ease-emphasis: cubic-bezier(0.19, 1, 0.22, 1);
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(circle at 50% 42%, var(--surface), var(--bg) 68%);
+        color: var(--fg);
+        font-family: var(--font-body);
+      }
+
+      .mount-card {
+        --bg: var(--surface);
+        position: absolute;
+        width: 70%;
+        height: 44%;
+        left: 15%;
+        top: 28%;
+        overflow: hidden;
+        border: 1px solid var(--border);
+        border-radius: var(--radius);
+        box-shadow: 0 40px 100px color-mix(in srgb, var(--bg) 72%, transparent);
+        container-type: size;
+        isolation: isolate;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="svg-mask-reveal-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="svg-mask-reveal-mount"
+        class="mount-card clip"
+        data-composition-id="svg-mask-reveal"
+        data-composition-src="./svg-mask-reveal.html"
+        data-variable-values='{"text":"REVEAL","revealProgress":100,"featherPx":24}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="1344"
+        data-height="475"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["svg-mask-reveal-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/svg-mask-reveal/registry-item.json b/registry/components/svg-mask-reveal/registry-item.json
new file mode 100644
index 0000000000..3d5d9af12c
--- /dev/null
+++ b/registry/components/svg-mask-reveal/registry-item.json
@@ -0,0 +1,54 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "svg-mask-reveal",
+  "type": "hyperframes:component",
+  "title": "SVG Mask Reveal",
+  "description": "A soft token-colored sweep reveals media only through an editable SVG wordmark mask.",
+  "tags": ["effect", "svg", "mask", "wordmark", "reveal", "exhibit"],
+  "jobs": ["exhibit"],
+  "family": "effects",
+  "profile": "burst",
+  "evidence": "hyperframes-research-css-masks.md: SvgMaskReveal and SVG text as mask over image or video",
+  "files": [
+    {
+      "path": "svg-mask-reveal.html",
+      "target": "compositions/components/svg-mask-reveal.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "text",
+      "type": "string",
+      "role": "content",
+      "label": "Wordmark",
+      "description": "Text used as the SVG mask window.",
+      "default": "REVEAL",
+      "maxLength": 16
+    },
+    {
+      "id": "revealProgress",
+      "type": "number",
+      "role": "content",
+      "label": "Reveal progress",
+      "description": "Final revealed width of the wordmark.",
+      "default": 100,
+      "min": 0,
+      "max": 100,
+      "step": 1,
+      "unit": "%"
+    },
+    {
+      "id": "featherPx",
+      "type": "number",
+      "role": "style",
+      "label": "Edge feather",
+      "description": "Softness of the traveling reveal edge.",
+      "default": 24,
+      "min": 0,
+      "max": 120,
+      "step": 1,
+      "unit": "px"
+    }
+  ]
+}
diff --git a/registry/components/svg-mask-reveal/svg-mask-reveal.html b/registry/components/svg-mask-reveal/svg-mask-reveal.html
new file mode 100644
index 0000000000..0294d5e3a4
--- /dev/null
+++ b/registry/components/svg-mask-reveal/svg-mask-reveal.html
@@ -0,0 +1,316 @@
+<!doctype html>
+<!--
+  svg-mask-reveal -- HyperFrames video primitive (effects / burst / exhibit)
+
+  Concept: token-colored media is visible only through an SVG wordmark mask.
+  A soft alpha band crosses the mask from left to right, making the wordmark
+  act as a window into the fill beneath it. One mechanic, one job: exhibiting
+  a wordmark through a vector mask reveal.
+
+  Compiled-from evidence: hyperframes-research-css-masks.md, SvgMaskReveal and
+  "SVG text as mask over image or video". The implementation follows its
+  inline SVG, explicit user-space bounds, namespaced fragment IDs, and soft
+  reveal geometry guidance.
+
+  Use when: a logo, product name, or short title should reveal a branded fill
+  inside its glyphs. Use a path-based sibling when exact brand glyph outlines
+  matter more than editable text.
+
+  Variables (declared in data-composition-variables below):
+    - text (string, default "REVEAL"): the wordmark used as the SVG mask.
+    - revealProgress (number, default 100): final revealed width, 0 to 100%.
+    - featherPx (number, default 24): softness of the traveling mask edge.
+
+  Envelope (burst profile, fixed IN/OUT, elastic HOLD):
+    IN_BASE  = 0.90s  the soft band sweeps across the wordmark
+    HOLD     = max(0, D - (IN_BASE + OUT_BASE)); final state stays readable
+    OUT_BASE = 0.45s  the complete wordmark fades cleanly
+    If D is shorter than IN_BASE + OUT_BASE, IN and OUT compress together.
+
+  Sync point: SWEEP_LANDS = 0.80s into an uncompressed IN. It scales with IN
+  only when the envelope is compressed and never moves into the elastic HOLD.
+
+  Sound: none. The sweep is designed to accept scene-level sound if desired.
+
+  Mount contract: this is a template-wrapped sub-composition. The root has no
+  data-width or data-height, fills the host with inset:0, establishes cqw/cqh
+  sizing with container-type:size, and registers one paused GSAP timeline under
+  the hardcoded composition id "svg-mask-reveal". The demo mounts this file via
+  data-composition-src so it exercises the real transport path.
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "text", "type": "string", "role": "content", "label": "Wordmark", "description": "Text used as the SVG mask window.", "default": "REVEAL", "maxLength": 16 },
+    { "id": "revealProgress", "type": "number", "role": "content", "label": "Reveal progress", "description": "Final revealed width of the wordmark.", "default": 100, "min": 0, "max": 100, "step": 1, "unit": "%" },
+    { "id": "featherPx", "type": "number", "role": "style", "label": "Edge feather", "description": "Softness of the traveling reveal edge.", "default": 24, "min": 0, "max": 120, "step": 1, "unit": "px" }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>SVG Mask Reveal</title>
+  </head>
+  <body>
+    <template>
+      <div
+        id="root"
+        data-composition-id="svg-mask-reveal"
+        data-start="0"
+        data-duration="4"
+        data-fps="30"
+      >
+        <style>
+          @property --svg-mask-reveal-sweep-x {
+            syntax: "<percentage>";
+            inherits: false;
+            initial-value: -10%;
+          }
+
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          /* INVARIANT: the host owns dimensions. All visible layout derives
+             from this size container, and the root is styled only by #root. */
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            background: var(--bg);
+            color: var(--fg);
+            font-family: var(--font-body);
+          }
+
+          .smr-clip,
+          .smr-stage {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+          }
+
+          .smr-stage {
+            display: grid;
+            place-items: center;
+          }
+
+          /* EDIT ZONE: presentation scale. The SVG keeps its 12:5 viewBox
+             while these container-relative limits make it fit wide and tall
+             hosts without stage-pixel assumptions. */
+          .smr-svg {
+            display: block;
+            width: min(92cqw, 168cqh);
+            height: auto;
+            overflow: visible;
+          }
+
+          .smr-media-start {
+            stop-color: var(--brand);
+          }
+
+          .smr-media-middle {
+            stop-color: var(--accent);
+          }
+
+          .smr-media-end {
+            stop-color: var(--fg);
+          }
+
+          .smr-mask-text {
+            fill: var(--fg);
+            font-family: var(--font-display);
+            font-size: 240px;
+            font-weight: 850;
+            letter-spacing: 0.02em;
+          }
+
+          .smr-media {
+            mask-mode: alpha, alpha;
+            mask-composite: intersect;
+          }
+
+          .smr-outline {
+            fill: none;
+            stroke: var(--border);
+            stroke-width: 2;
+            font-family: var(--font-display);
+            font-size: 240px;
+            font-weight: 850;
+            letter-spacing: 0.02em;
+          }
+        </style>
+
+        <div
+          id="svg-mask-reveal-clip"
+          class="smr-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="smr-stage">
+            <svg
+              class="smr-svg"
+              viewBox="0 0 1200 500"
+              role="img"
+              aria-label="REVEAL"
+              preserveAspectRatio="xMidYMid meet"
+            >
+              <defs>
+                <!-- IDs carry the full primitive prefix so fragment URLs do
+                     not collide with sibling compositions after assembly. -->
+                <linearGradient
+                  id="svg-mask-reveal-media-gradient"
+                  gradientUnits="userSpaceOnUse"
+                  x1="80"
+                  y1="420"
+                  x2="1120"
+                  y2="80"
+                >
+                  <stop class="smr-media-start" offset="0" />
+                  <stop class="smr-media-middle" offset="0.52" />
+                  <stop class="smr-media-end" offset="1" />
+                </linearGradient>
+
+                <!-- The word mask owns only the vector silhouette. The media
+                     rect independently intersects it with the CSS sweep. -->
+                <mask
+                  id="svg-mask-reveal-word-mask"
+                  mask-type="alpha"
+                  maskUnits="userSpaceOnUse"
+                  maskContentUnits="userSpaceOnUse"
+                  x="0"
+                  y="0"
+                  width="1200"
+                  height="500"
+                >
+                  <text
+                    id="svg-mask-reveal-text"
+                    class="smr-mask-text"
+                    x="600"
+                    y="260"
+                    text-anchor="middle"
+                    dominant-baseline="middle"
+                    textLength="1000"
+                    lengthAdjust="spacingAndGlyphs"
+                  >
+                    REVEAL
+                  </text>
+                </mask>
+              </defs>
+
+              <!-- The outline stays quiet and complete while the token-colored
+                   media itself remains visible only through the word mask. -->
+              <text
+                id="svg-mask-reveal-outline"
+                class="smr-outline"
+                x="600"
+                y="260"
+                text-anchor="middle"
+                dominant-baseline="middle"
+                textLength="1000"
+                lengthAdjust="spacingAndGlyphs"
+              >
+                REVEAL
+              </text>
+              <rect
+                class="smr-media"
+                x="0"
+                y="0"
+                width="1200"
+                height="500"
+                fill="url(#svg-mask-reveal-media-gradient)"
+              />
+            </svg>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var compositionId = "svg-mask-reveal";
+            var stage = root.querySelector(".smr-stage");
+            var svg = root.querySelector(".smr-svg");
+            var maskText = root.querySelector("#svg-mask-reveal-text");
+            var outlineText = root.querySelector("#svg-mask-reveal-outline");
+            var mediaRect = root.querySelector(".smr-media");
+
+            // EDIT ZONE: declared defaults are merged with per-instance host
+            // overrides by the runtime. Missing and zero are distinct here.
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+            var textValue = vars.text == null ? "REVEAL" : String(vars.text);
+            var progressValue = vars.revealProgress == null ? NaN : Number(vars.revealProgress);
+            var revealProgress = Number.isFinite(progressValue)
+              ? Math.max(0, Math.min(100, progressValue))
+              : 100;
+            var featherValue = vars.featherPx == null ? NaN : Number(vars.featherPx);
+            var featherPx = Number.isFinite(featherValue)
+              ? Math.max(0, Math.min(120, featherValue))
+              : 24;
+
+            maskText.textContent = textValue;
+            outlineText.textContent = textValue;
+            svg.setAttribute("aria-label", textValue);
+
+            // INVARIANT: the word and sweep masks are independent layers on
+            // the media rect. This initialization owns their feather geometry.
+            var VIEW_WIDTH = 1200;
+            var featherPercent = (featherPx / VIEW_WIDTH) * 100;
+            var hiddenSweepPercent = -featherPercent;
+            mediaRect.style.maskImage =
+              "url(#svg-mask-reveal-word-mask), linear-gradient(to right, black var(--svg-mask-reveal-sweep-x, -10%), transparent calc(var(--svg-mask-reveal-sweep-x, -10%) + " +
+              featherPercent +
+              "%))";
+
+            // RETIME RANGE: IN_BASE and OUT_BASE define the burst envelope.
+            // The sweep uses --ease-standard's GSAP owner, power2.out.
+            var IN_BASE = 0.9;
+            var OUT_BASE = 0.45;
+            var SWEEP_START_BASE = 0.08;
+            var SWEEP_LANDS_BASE = 0.8;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var envelopeBase = IN_BASE + OUT_BASE;
+            var scale = duration < envelopeBase ? duration / envelopeBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var OUT_START = IN + HOLD;
+            var SWEEP_START = SWEEP_START_BASE * scale;
+            var SWEEP_DURATION = (SWEEP_LANDS_BASE - SWEEP_START_BASE) * scale;
+            var targetSweepPercent = revealProgress === 0 ? hiddenSweepPercent : revealProgress;
+
+            gsap.set(stage, { opacity: 1 });
+            gsap.set(mediaRect, {
+              "--svg-mask-reveal-sweep-x": hiddenSweepPercent + "%",
+            });
+
+            var tl = gsap.timeline({ paused: true });
+            tl.to(
+              mediaRect,
+              {
+                "--svg-mask-reveal-sweep-x": targetSweepPercent + "%",
+                duration: SWEEP_DURATION,
+                ease: "power2.out",
+              },
+              SWEEP_START,
+            );
+            tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/svg-stroke-trace/README.md b/registry/components/svg-stroke-trace/README.md
new file mode 100644
index 0000000000..a9f89f0991
--- /dev/null
+++ b/registry/components/svg-stroke-trace/README.md
@@ -0,0 +1,35 @@
+# svg-stroke-trace
+
+An authored SVG path draws from start to finish using its measured `getTotalLength()`. Paths ending in a close command (`Z`) receive a restrained fill after the stroke completes; open paths (signatures, waves) stay stroke-only. The finished mark then holds until the frame cuts.
+
+3.5s authored, elastic HOLD, exit `none` by default.
+
+## Variables
+
+| id             | type   | default     | notes                                                                                                             |
+| -------------- | ------ | ----------- | ----------------------------------------------------------------------------------------------------------------- |
+| `path`         | string | a wave path | SVG path data in the 1024x520 viewBox. A trailing `Z` is the single owner of fill behavior.                       |
+| `stroke_width` | number | `12`        | Stroke width in viewBox units (2 to 32).                                                                          |
+| `accent`       | enum   | `green`     | Trace and fill color: green rides `--brand`, blue rides `--accent`, violet rides `--accent-2`.                    |
+| `exit`         | enum   | `none`      | `none` holds until the cut; `fade` departs opacity-only; `up` is the upward fade (the pre-Wave-J default ending). |
+
+## Mount
+
+```html
+<div
+  class="clip"
+  data-composition-id="svg-stroke-trace"
+  data-composition-src="./svg-stroke-trace.html"
+  data-variable-values='{"path":"M 120 400 L 512 120 L 904 400 Z","stroke_width":10,"accent":"blue"}'
+  data-start="0"
+  data-duration="3.5"
+  data-track-index="0"
+></div>
+```
+
+Elastic root: no `data-width`/`data-height`; it fills whatever box the host clip gives it. Timeline registers under the literal `svg-stroke-trace` key.
+
+## Notes
+
+- Dash values come from the real measured path length (never the `pathLength` attribute, never `non-scaling-stroke`), so any authored geometry draws exactly once.
+- The hold is one finite vertical drift cycle, never a repeating tween.
diff --git a/registry/components/svg-stroke-trace/demo.html b/registry/components/svg-stroke-trace/demo.html
new file mode 100644
index 0000000000..dd572a7b3c
--- /dev/null
+++ b/registry/components/svg-stroke-trace/demo.html
@@ -0,0 +1,101 @@
+<!doctype html>
+<!--
+  svg-stroke-trace demo. This standalone composition mounts the primitive
+  through data-composition-src. A non-default closed logo path, wider stroke,
+  and violet accent prove all three variables and the optional fill behavior.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>SVG Stroke Trace Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #0b0c0e);
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --muted: #94a3b8;
+        --surface: #14171c;
+        --border: #343a46;
+        --brand: #71f5a7;
+        --accent: #61a8ff;
+        --accent-2: #c5a3ff;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-body: Inter, system-ui, sans-serif;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        --radius: 2.4cqmin;
+        --space-1: 1.2cqmin;
+        --space-2: 2.4cqmin;
+        --space-3: 4cqmin;
+        --dur-beat: 0.4s;
+        --ease-standard: cubic-bezier(0.215, 0.61, 0.355, 1);
+        --ease-emphasis: cubic-bezier(0.19, 1, 0.22, 1);
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(
+          ellipse at 50% 46%,
+          color-mix(in srgb, var(--surface) 88%, var(--accent-2)) 0%,
+          var(--bg) 72%
+        );
+      }
+
+      .mount-card {
+        width: 76%;
+        height: 62%;
+        left: 12%;
+        top: 19%;
+        container-type: size;
+        overflow: hidden;
+        border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
+        border-radius: calc(var(--radius) * 1.35);
+        background: color-mix(in srgb, var(--surface) 78%, transparent);
+        box-shadow: 0 4cqh 12cqh color-mix(in srgb, var(--bg) 58%, transparent);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="svg-stroke-trace-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="3.5"
+      data-fps="30"
+    >
+      <div
+        id="svg-stroke-trace-mount"
+        class="mount-card clip"
+        data-composition-id="svg-stroke-trace"
+        data-composition-src="./svg-stroke-trace.html"
+        data-variable-values='{"path":"M 170 378 L 330 132 L 458 330 L 584 132 L 830 378 L 680 378 L 584 248 L 508 378 L 408 378 L 330 248 L 252 378 Z","stroke_width":16,"accent":"violet"}'
+        data-start="0"
+        data-duration="3.5"
+        data-track-index="0"
+        data-width="1459"
+        data-height="670"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["svg-stroke-trace-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/svg-stroke-trace/registry-item.json b/registry/components/svg-stroke-trace/registry-item.json
new file mode 100644
index 0000000000..746d71eae2
--- /dev/null
+++ b/registry/components/svg-stroke-trace/registry-item.json
@@ -0,0 +1,67 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "svg-stroke-trace",
+  "type": "hyperframes:component",
+  "title": "SVG Stroke Trace",
+  "description": "An authored SVG path draws from its measured length, holds with subtle drift, and optionally fills when the path is closed.",
+  "tags": ["motion-primitive", "intro", "reveal", "svg", "stroke", "line-draw"],
+  "jobs": ["reveal"],
+  "family": "intros-and-reveals",
+  "profile": "trace",
+  "evidence": "Video Primitives Wave I I5 svg-stroke-trace contract",
+  "syncPoints": [{ "id": "trace-complete", "phase": "in", "offset": 1.55 }],
+  "files": [
+    {
+      "path": "svg-stroke-trace.html",
+      "target": "compositions/components/svg-stroke-trace.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "path",
+      "type": "string",
+      "role": "content",
+      "label": "Path",
+      "description": "SVG path data for the authored mark.",
+      "default": "M 92 328 C 178 142 292 138 366 276 C 430 396 500 414 558 262 C 622 94 724 112 786 274 C 836 406 894 376 930 194"
+    },
+    {
+      "id": "stroke_width",
+      "type": "number",
+      "role": "style",
+      "label": "Stroke width",
+      "description": "Width of the traced stroke in SVG viewBox units.",
+      "default": 12,
+      "min": 2,
+      "max": 32,
+      "step": 1
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Color used by the trace and optional fill.",
+      "default": "green",
+      "options": [
+        { "value": "green", "label": "Green" },
+        { "value": "blue", "label": "Blue" },
+        { "value": "violet", "label": "Violet" }
+      ]
+    },
+    {
+      "id": "exit",
+      "type": "enum",
+      "role": "timing",
+      "label": "Exit",
+      "description": "Optional departure. Default none: the finished mark holds until the frame cuts.",
+      "default": "none",
+      "options": [
+        { "value": "none", "label": "None" },
+        { "value": "fade", "label": "Fade" },
+        { "value": "up", "label": "Up" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/svg-stroke-trace/svg-stroke-trace.html b/registry/components/svg-stroke-trace/svg-stroke-trace.html
new file mode 100644
index 0000000000..a650ea83de
--- /dev/null
+++ b/registry/components/svg-stroke-trace/svg-stroke-trace.html
@@ -0,0 +1,229 @@
+<!doctype html>
+<!--
+  svg-stroke-trace: HyperFrames video primitive (intros and reveals)
+
+  An authored SVG path draws from start to finish using its measured length.
+  Closed paths receive a restrained fill after the stroke completes. Open
+  paths remain stroke-only, which keeps signatures and waves clean.
+
+  Variables:
+    - path (string): SVG path data for the traced mark.
+    - stroke_width (number, default 12): stroke width in viewBox units.
+    - accent (green | blue | violet, default green): trace and fill color.
+    - exit (none | fade | up, default "none"): optional departure.
+
+  Envelope, fixed IN and OUT with elastic HOLD only:
+    IN_BASE  = 1.85s, stroke draw followed by optional closed-path fill
+    HOLD     = max(0, D - IN - OUT), one subtle vertical drift cycle
+    OUT_BASE = 0.45s departure when exit is fade or up, 0s when exit is
+               none (the default: the finished mark holds until the cut)
+    If D is shorter than IN_BASE + OUT_BASE, IN and OUT compress together.
+    The timeline is never time-scaled.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, has no data-width or data-height,
+  and registers one paused timeline under the literal svg-stroke-trace key.
+-->
+<html
+  lang="en"
+  data-composition-id="svg-stroke-trace"
+  data-composition-duration="3.5"
+  data-composition-variables='[
+    { "id": "path", "type": "string", "role": "content", "label": "Path", "description": "SVG path data for the authored mark.", "default": "M 92 328 C 178 142 292 138 366 276 C 430 396 500 414 558 262 C 622 94 724 112 786 274 C 836 406 894 376 930 194" },
+    { "id": "stroke_width", "type": "number", "role": "style", "label": "Stroke width", "description": "Width of the traced stroke in SVG viewBox units.", "default": 12, "min": 2, "max": 32, "step": 1 },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Color used by the trace and optional fill.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the finished mark holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>SVG Stroke Trace</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="svg-stroke-trace" data-duration="3.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            pointer-events: none;
+          }
+
+          .sst-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+          }
+
+          .sst-stage {
+            width: 88cqw;
+            height: 70cqh;
+            opacity: 0;
+            will-change: transform, opacity;
+          }
+
+          .sst-svg {
+            display: block;
+            width: 100%;
+            height: 100%;
+            overflow: visible;
+          }
+
+          .sst-fill,
+          .sst-stroke {
+            stroke-linecap: round;
+            stroke-linejoin: round;
+          }
+
+          .sst-fill {
+            fill: var(--sst-accent);
+            stroke: none;
+            opacity: 0;
+          }
+
+          .sst-stroke {
+            fill: none;
+            stroke: var(--sst-accent);
+            filter: drop-shadow(
+              0 0 1.8cqmin color-mix(in srgb, var(--sst-accent) 34%, transparent)
+            );
+          }
+        </style>
+
+        <div
+          id="svg-stroke-trace-clip"
+          class="sst-clip clip"
+          data-start="0"
+          data-duration="3.5"
+          data-track-index="0"
+        >
+          <div class="sst-stage" role="img">
+            <svg
+              class="sst-svg"
+              viewBox="0 0 1024 520"
+              preserveAspectRatio="xMidYMid meet"
+              aria-hidden="true"
+            >
+              <path class="sst-fill"></path>
+              <path class="sst-stroke"></path>
+            </svg>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var DEFAULT_PATH =
+              "M 92 328 C 178 142 292 138 366 276 C 430 396 500 414 558 262 C 622 94 724 112 786 274 C 836 406 894 376 930 194";
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".sst-stage");
+            var fillPath = root.querySelector(".sst-fill");
+            var strokePath = root.querySelector(".sst-stroke");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var suppliedPath = vars.path == null ? DEFAULT_PATH : String(vars.path).trim();
+            var pathData = suppliedPath || DEFAULT_PATH;
+            var widthValue = vars.stroke_width;
+            var strokeWidth = Number.isFinite(widthValue)
+              ? Math.max(2, Math.min(32, widthValue))
+              : 12;
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            root.style.setProperty("--sst-accent", accentColors[accent]);
+            fillPath.setAttribute("d", pathData);
+            strokePath.setAttribute("d", pathData);
+            strokePath.setAttribute("stroke-width", String(strokeWidth));
+            stage.setAttribute("aria-label", "Authored SVG path tracing from start to finish");
+
+            var pathLength = strokePath.getTotalLength();
+            strokePath.style.strokeDasharray = pathLength + " " + pathLength;
+            strokePath.style.strokeDashoffset = String(pathLength);
+
+            // A trailing close command is the single owner of fill behavior.
+            // Open signatures and waves never receive an implied closing fill.
+            var fillEnabled = /[zZ]\s*$/.test(pathData);
+
+            var IN_BASE = 1.85;
+            var OUT_BASE = exit === "none" ? 0 : 0.45;
+            var DRAW_SHARE = 0.84;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "3.5"));
+            var fixedTotal = Math.max(0.001, IN_BASE + OUT_BASE);
+            var phaseScale = duration < fixedTotal ? duration / fixedTotal : 1;
+            var IN = IN_BASE * phaseScale;
+            var OUT = OUT_BASE * phaseScale;
+            var DRAW = IN * DRAW_SHARE;
+            var FILL = IN - DRAW;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var HOLD_START = IN;
+            var OUT_START = IN + HOLD;
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: the path measurement owns both dash values, so every authored
+            // path draws exactly once regardless of its geometry.
+            tl.to(stage, { opacity: 1, duration: Math.min(0.28, DRAW), ease: "power2.out" }, 0);
+            tl.to(strokePath, { strokeDashoffset: 0, duration: DRAW, ease: "sine.inOut" }, 0);
+
+            if (fillEnabled) {
+              tl.to(fillPath, { opacity: 0.16, duration: FILL, ease: "power2.out" }, DRAW);
+            }
+
+            // HOLD: one finite drift cycle keeps longer mounts alive.
+            if (HOLD > 0) {
+              tl.to(
+                stage,
+                {
+                  y: "-0.7cqh",
+                  duration: HOLD / 2,
+                  ease: "sine.inOut",
+                  yoyo: true,
+                  repeat: 1,
+                },
+                HOLD_START,
+              );
+            }
+
+            // OUT: optional departure; exit none holds until the frame cuts.
+            if (exit === "up") {
+              tl.to(
+                stage,
+                { opacity: 0, y: "-2.4cqh", duration: OUT, ease: "power2.in" },
+                OUT_START,
+              );
+            } else if (exit === "fade") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["svg-stroke-trace"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/swipe-rail/demo.html b/registry/components/swipe-rail/demo.html
new file mode 100644
index 0000000000..4b28f3b976
--- /dev/null
+++ b/registry/components/swipe-rail/demo.html
@@ -0,0 +1,79 @@
+<!doctype html>
+<!--
+  swipe-rail demo. This standalone composition mounts swipe-rail.html through
+  data-composition-src. Non-default values prove that all three variables
+  flow through the mount while the primitive remains sized by its host box.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Swipe Rail Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0b0c0e;
+      }
+
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 45%, #20232a 0%, #0b0c0e 72%);
+      }
+
+      .mount-card {
+        width: 76%;
+        height: 64%;
+        left: 12%;
+        top: 18%;
+        container-type: size;
+        overflow: hidden;
+        border: 2px solid rgba(148, 163, 184, 0.24);
+        border-radius: 34px;
+        background: #111827;
+        box-shadow: 0 44px 110px rgba(0, 0, 0, 0.48);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="swipe-rail-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="swipe-rail-mount"
+        class="mount-card clip"
+        data-composition-id="swipe-rail"
+        data-composition-src="./swipe-rail.html"
+        data-variable-values='{"card_count":5,"accent":"violet","card_label_prefix":"Chapter"}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="1460"
+        data-height="691"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["swipe-rail-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/swipe-rail/registry-item.json b/registry/components/swipe-rail/registry-item.json
new file mode 100644
index 0000000000..abf6deac00
--- /dev/null
+++ b/registry/components/swipe-rail/registry-item.json
@@ -0,0 +1,53 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "swipe-rail",
+  "type": "hyperframes:component",
+  "title": "Swipe Rail",
+  "description": "A contact circle leads a horizontal card rail through a fast drag, momentum carry, and settled snap to the next card.",
+  "tags": ["motion-primitive", "interaction", "gesture", "swipe", "cards", "rail"],
+  "jobs": ["demonstrate"],
+  "family": "interaction",
+  "profile": "gesture",
+  "evidence": "Video Primitives v1 Wave F U2 swipe-rail contract",
+  "files": [
+    {
+      "path": "swipe-rail.html",
+      "target": "compositions/components/swipe-rail.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "card_count",
+      "type": "number",
+      "role": "content",
+      "label": "Card count",
+      "description": "Number of cards rendered in the rail.",
+      "default": 4,
+      "min": 3,
+      "max": 5,
+      "step": 1
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Active color used by the focused card and contact circle.",
+      "default": "green",
+      "options": [
+        { "value": "green", "label": "Green" },
+        { "value": "blue", "label": "Blue" },
+        { "value": "violet", "label": "Violet" }
+      ]
+    },
+    {
+      "id": "card_label_prefix",
+      "type": "string",
+      "role": "content",
+      "label": "Card label prefix",
+      "description": "Text placed before each card number.",
+      "default": "Feature"
+    }
+  ]
+}
diff --git a/registry/components/swipe-rail/swipe-rail.html b/registry/components/swipe-rail/swipe-rail.html
new file mode 100644
index 0000000000..55f03f8d80
--- /dev/null
+++ b/registry/components/swipe-rail/swipe-rail.html
@@ -0,0 +1,358 @@
+<!doctype html>
+<!--
+  swipe-rail: HyperFrames video primitive (interaction / gesture / demonstrate)
+
+  Concept: a contact circle leads a horizontal card rail through one swipe.
+  The rail follows the drag, carries momentum after release, then snaps the
+  next card into focus with a physical settle.
+
+  Variables:
+    - card_count (number, 3 to 5, default 4): cards rendered in the rail.
+    - accent (enum, default green): active color for focus and contact states.
+    - card_label_prefix (string, default "Feature"): label before each card number.
+
+  Envelope (fixed IN and OUT, elastic HOLD only):
+    IN_BASE  = 2.20s  rail reveal, touch, drag, release, momentum, snap
+    HOLD     = elastic = max(0, D - (IN + OUT)); selected card breathes subtly
+    OUT_BASE = 0.45s  clean stage fade and rise
+    If D is shorter than IN_BASE + OUT_BASE, IN and OUT compress together.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, has no data-width or data-height,
+  and registers one paused timeline under the hardcoded swipe-rail id.
+-->
+<html
+  lang="en"
+  data-composition-id="swipe-rail"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "card_count", "type": "number", "role": "content", "label": "Card count", "description": "Number of cards rendered in the rail.", "default": 4, "min": 3, "max": 5, "step": 1 },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Active color used by the focused card and contact circle.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "card_label_prefix", "type": "string", "role": "content", "label": "Card label prefix", "description": "Text placed before each card number.", "default": "Feature" }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Swipe Rail</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="swipe-rail" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            --sr-card-width: 46;
+            --sr-card-gap: 4;
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: #f8fafc;
+            font-family: Inter, system-ui, sans-serif;
+            pointer-events: none;
+          }
+
+          .sr-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            background: radial-gradient(circle at 50% 45%, #1e293b 0%, #0f172a 72%);
+          }
+
+          .sr-stage {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            opacity: 0;
+          }
+
+          .sr-rail {
+            position: absolute;
+            left: 50%;
+            top: 18cqh;
+            display: flex;
+            gap: calc(var(--sr-card-gap) * 1cqw);
+            height: 64cqh;
+            will-change: transform;
+          }
+
+          .sr-card {
+            position: relative;
+            flex: 0 0 calc(var(--sr-card-width) * 1cqw);
+            height: 60cqh;
+            overflow: hidden;
+            padding: 6cqh 4cqw;
+            border: 0.16cqmin solid rgba(148, 163, 184, 0.36);
+            border-radius: 3.2cqmin;
+            background: #f8fafc;
+            color: #0f172a;
+            box-shadow: 0 3cqh 7cqh rgba(2, 6, 23, 0.34);
+            transform-origin: 50% 50%;
+            will-change: transform, border-color, box-shadow;
+          }
+
+          .sr-card::before {
+            content: "";
+            position: absolute;
+            inset: 0 0 auto;
+            height: 1.2cqh;
+            background: var(--sr-accent);
+            opacity: 0.38;
+          }
+
+          .sr-index {
+            display: block;
+            margin-bottom: 3.2cqh;
+            color: var(--sr-accent);
+            font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+            font-size: 2.2cqw;
+            font-weight: 700;
+            letter-spacing: 0.12em;
+          }
+
+          .sr-label {
+            display: block;
+            overflow: hidden;
+            font-size: 4.2cqw;
+            font-weight: 760;
+            line-height: 1.05;
+            letter-spacing: -0.04em;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          .sr-rule {
+            display: block;
+            width: 72%;
+            height: 1.4cqh;
+            margin-top: 7cqh;
+            border-radius: 1cqh;
+            background: #cbd5e1;
+            box-shadow:
+              0 4cqh 0 #e2e8f0,
+              0 8cqh 0 #e2e8f0;
+          }
+
+          .sr-contact {
+            position: absolute;
+            left: 50%;
+            top: 57%;
+            width: 8cqw;
+            aspect-ratio: 1;
+            margin: -4cqw 0 0 -4cqw;
+            border: 0.32cqmin solid rgba(255, 255, 255, 0.88);
+            border-radius: 50%;
+            background: color-mix(in srgb, var(--sr-accent) 44%, transparent);
+            box-shadow:
+              0 0 0 1.2cqmin color-mix(in srgb, var(--sr-accent) 16%, transparent),
+              0 1.8cqh 4cqh rgba(2, 6, 23, 0.34);
+            opacity: 0;
+            will-change: transform, opacity;
+          }
+        </style>
+
+        <div class="sr-clip clip" data-start="0" data-duration="4" data-track-index="0">
+          <div class="sr-stage">
+            <div class="sr-rail" role="list" aria-label="Feature cards"></div>
+            <div class="sr-contact" aria-hidden="true"></div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".sr-stage");
+            var rail = root.querySelector(".sr-rail");
+            var contact = root.querySelector(".sr-contact");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var countValue = Number(vars.card_count);
+            var cardCount = Number.isFinite(countValue)
+              ? Math.max(3, Math.min(5, Math.round(countValue)))
+              : 4;
+            var prefix =
+              vars.card_label_prefix == null ? "Feature" : String(vars.card_label_prefix);
+            var accentName =
+              vars.accent === "blue" || vars.accent === "violet" ? vars.accent : "green";
+            var accentColors = {
+              green: "var(--brand, #22c55e)",
+              blue: "var(--accent, #38bdf8)",
+              violet: "var(--accent-2, #a78bfa)",
+            };
+            root.style.setProperty("--sr-accent", accentColors[accentName]);
+            // GSAP interpolates colors numerically, so tween values need the
+            // substituted color rather than the var() form.
+            var accentColor = getComputedStyle(root).getPropertyValue("--sr-accent").trim();
+
+            for (var index = 0; index < cardCount; index += 1) {
+              var card = document.createElement("article");
+              card.className = "sr-card";
+              card.setAttribute("role", "listitem");
+
+              var indexEl = document.createElement("span");
+              indexEl.className = "sr-index";
+              indexEl.textContent = String(index + 1).padStart(2, "0");
+
+              var label = document.createElement("span");
+              label.className = "sr-label";
+              label.textContent = prefix + " " + String(index + 1);
+
+              var rule = document.createElement("span");
+              rule.className = "sr-rule";
+              rule.setAttribute("aria-hidden", "true");
+
+              card.append(indexEl, label, rule);
+              rail.appendChild(card);
+            }
+
+            var cards = rail.querySelectorAll(".sr-card");
+            var centerIndex = Math.floor((cardCount - 1) / 2);
+            var targetIndex = centerIndex + 1;
+            var currentCard = cards[centerIndex];
+            var targetCard = cards[targetIndex];
+
+            var rootStyle = getComputedStyle(root);
+            var cardWidth = parseFloat(rootStyle.getPropertyValue("--sr-card-width"));
+            var cardGap = parseFloat(rootStyle.getPropertyValue("--sr-card-gap"));
+            var cardStep = cardWidth + cardGap;
+            var initialX = -(centerIndex * cardStep + cardWidth / 2);
+            var targetX = initialX - cardStep;
+
+            // Fixed gesture and exit phases compress together only for short mounts.
+            var IN_BASE = 2.2;
+            var OUT_BASE = 0.45;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var baseTotal = IN_BASE + OUT_BASE;
+            var envelopeScale = duration < baseTotal ? duration / baseTotal : 1;
+            var IN = IN_BASE * envelopeScale;
+            var OUT = OUT_BASE * envelopeScale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var OUT_START = IN + HOLD;
+            var gestureScale = IN / IN_BASE;
+
+            gsap.set(stage, { opacity: 0, y: "1.5cqh" });
+            gsap.set(rail, { x: initialX + "cqw" });
+            gsap.set(cards, { scale: 0.94, opacity: 0.74 });
+            gsap.set(currentCard, {
+              scale: 1.02,
+              opacity: 1,
+              borderColor: accentColor,
+            });
+            gsap.set(contact, { x: "0cqw", y: "0cqh", scale: 0.86, opacity: 0 });
+
+            var tl = gsap.timeline({ paused: true });
+
+            tl.to(
+              stage,
+              { opacity: 1, y: "0cqh", duration: 0.32 * gestureScale, ease: "power2.out" },
+              0,
+            );
+            tl.to(
+              contact,
+              { opacity: 1, scale: 1, duration: 0.18 * gestureScale, ease: "power2.out" },
+              0.4 * gestureScale,
+            );
+
+            // Fast initial drag decays under friction while the contact leads the rail.
+            tl.to(
+              contact,
+              { x: "-28cqw", duration: 0.62 * gestureScale, ease: "power3.out" },
+              0.66 * gestureScale,
+            );
+            tl.to(
+              rail,
+              { x: initialX - 23 + "cqw", duration: 0.62 * gestureScale, ease: "power3.out" },
+              0.66 * gestureScale,
+            );
+
+            var releaseAt = 1.28 * gestureScale;
+            tl.to(
+              contact,
+              {
+                y: "-5cqh",
+                scale: 0.82,
+                opacity: 0,
+                duration: 0.24 * gestureScale,
+                ease: "power2.out",
+              },
+              releaseAt,
+            );
+            tl.to(
+              rail,
+              {
+                x: initialX - 38 + "cqw",
+                duration: 0.28 * gestureScale,
+                ease: "power2.out",
+              },
+              releaseAt,
+            );
+
+            // The momentum handoff resolves into one exact card-width snap.
+            tl.to(
+              rail,
+              { x: targetX + "cqw", duration: 0.64 * gestureScale, ease: "back.out(1.7)" },
+              1.56 * gestureScale,
+            );
+            tl.to(
+              currentCard,
+              {
+                scale: 0.94,
+                opacity: 0.74,
+                borderColor: "rgba(148, 163, 184, 0.36)",
+                duration: 0.48 * gestureScale,
+                ease: "power2.out",
+              },
+              1.5 * gestureScale,
+            );
+            tl.to(
+              targetCard,
+              {
+                scale: 1.02,
+                opacity: 1,
+                borderColor: accentColor,
+                boxShadow: "0 3cqh 9cqh rgba(2, 6, 23, 0.42)",
+                duration: 0.64 * gestureScale,
+                ease: "back.out(1.7)",
+              },
+              1.56 * gestureScale,
+            );
+
+            if (HOLD > 0.4) {
+              var driftHalf = Math.min(0.55, HOLD / 2);
+              var driftRepeat = Math.max(0, Math.floor(HOLD / driftHalf) - 1);
+              tl.to(
+                targetCard,
+                {
+                  y: "-0.7cqh",
+                  duration: driftHalf,
+                  ease: "sine.inOut",
+                  yoyo: true,
+                  repeat: driftRepeat,
+                },
+                IN,
+              );
+            }
+
+            tl.to(stage, { opacity: 0, y: "-1.5cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["swipe-rail"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/tabs-slide-indicator/demo.html b/registry/components/tabs-slide-indicator/demo.html
new file mode 100644
index 0000000000..88effc1d48
--- /dev/null
+++ b/registry/components/tabs-slide-indicator/demo.html
@@ -0,0 +1,102 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Tabs Slide Indicator - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        min-width: 760px;
+        min-height: 480px;
+        padding: 56px;
+        /* ponytail: scale wrapper only — GSAP targets .indicator inside, not this element */
+        transform: scale(3.5);
+      }
+      .hf-transition-tabs-slide-indicator {
+        --hf-tab-x: 0px;
+        position: relative;
+        display: inline-grid;
+        grid-template-columns: repeat(3, 86px);
+        padding: 4px;
+        border: 1px solid #e4e4e7;
+        border-radius: 999px;
+        background: #f4f4f5;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-transition-tabs-slide-indicator .indicator {
+        position: absolute;
+        top: 4px;
+        left: 4px;
+        width: 86px;
+        height: 36px;
+        border-radius: 999px;
+        background: #18181b;
+        transform: translateX(var(--hf-tab-x));
+        box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18);
+      }
+      .hf-transition-tabs-slide-indicator button {
+        position: relative;
+        z-index: 1;
+        height: 36px;
+        border: 0;
+        background: transparent;
+        color: #71717a;
+        font-weight: 600;
+      }
+      .hf-transition-tabs-slide-indicator button:nth-of-type(2) {
+        color: #fff;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="tabs-slide-indicator-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-transition-tabs-slide-indicator">
+          <span class="indicator"></span><button>Plan</button><button>Debug</button
+          ><button>Ask</button>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-transition-tabs-slide-indicator .indicator",
+          { "--hf-tab-x": "0px" },
+          { "--hf-tab-x": "86px", duration: 0.42, ease: "power3.inOut" },
+          startTime,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["tabs-slide-indicator-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/tabs-slide-indicator/registry-item.json b/registry/components/tabs-slide-indicator/registry-item.json
new file mode 100644
index 0000000000..2979079b83
--- /dev/null
+++ b/registry/components/tabs-slide-indicator/registry-item.json
@@ -0,0 +1,68 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "tabs-slide-indicator",
+  "type": "hyperframes:component",
+  "title": "Tabs Slide Indicator",
+  "description": "A pill indicator transition that slides between active tabs",
+  "tags": ["transition-primitive", "transitions-dev-port", "tabs", "indicator"],
+  "files": [
+    {
+      "path": "tabs-slide-indicator.html",
+      "target": "compositions/components/tabs-slide-indicator.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Fill of the sliding pill. ink is literal; the rest ride the composition theme tokens.",
+      "default": "ink",
+      "options": [
+        { "value": "ink", "label": "Ink" },
+        { "value": "green", "label": "Green" },
+        { "value": "blue", "label": "Blue" },
+        { "value": "violet", "label": "Violet" }
+      ]
+    },
+    {
+      "id": "width",
+      "type": "enum",
+      "role": "layout",
+      "label": "Tab width",
+      "description": "Width of one tab. The slide the timeline drives is scaled to match, so the pill still lands on the next tab.",
+      "default": "standard",
+      "options": [
+        { "value": "compact", "label": "Compact" },
+        { "value": "standard", "label": "Standard" },
+        { "value": "wide", "label": "Wide" }
+      ]
+    },
+    {
+      "id": "shape",
+      "type": "enum",
+      "role": "style",
+      "label": "Shape",
+      "description": "Corner radius of the track and the pill.",
+      "default": "pill",
+      "options": [
+        { "value": "pill", "label": "Pill" },
+        { "value": "rounded", "label": "Rounded" },
+        { "value": "square", "label": "Square" }
+      ]
+    },
+    {
+      "id": "labels",
+      "type": "string",
+      "role": "content",
+      "label": "Labels",
+      "description": "The tab names, separated by commas. Two or more names rebuild the row.",
+      "default": "Plan,Debug,Ask"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/tabs-slide-indicator.png"
+  }
+}
diff --git a/registry/components/tabs-slide-indicator/tabs-slide-indicator.html b/registry/components/tabs-slide-indicator/tabs-slide-indicator.html
new file mode 100644
index 0000000000..d472843d4f
--- /dev/null
+++ b/registry/components/tabs-slide-indicator/tabs-slide-indicator.html
@@ -0,0 +1,148 @@
+<!--
+  Tabs Slide Indicator - transitions.dev-inspired primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Use the timeline
+  integration note at the bottom as the starting point for deterministic GSAP
+  animation.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result as a custom property
+  the CSS below consumes. The timeline recipe at the bottom is untouched by
+  them: it keeps sliding the pill one tab to the right, and these decide how
+  wide that tab is, what the pill looks like and what the tabs say.
+
+    - accent (ink | green | blue | violet, default ink): fill of the sliding
+      pill. ink is a literal near-black; the other three ride the composition's
+      own brand, accent and accent-2 tokens and fall back to that same ink when
+      the composition declares none. The labels sitting on it stay white, so all
+      four keep the active tab readable.
+    - width (compact | standard | wide, default standard): width of one tab,
+      72px, 86px or 104px. The slide the timeline drives is scaled by the same
+      ratio, so the pill still lands exactly on the next tab rather than
+      stopping short or overshooting it.
+    - shape (pill | rounded | square, default pill): corner radius of the track
+      and the pill, 999px, 12px or 4px.
+    - labels (text, default "Plan,Debug,Ask"): the tab names, separated by
+      commas. Two or more names rebuild the row, one name or none leaves the
+      authored markup alone, since a single tab has nowhere to slide to.
+
+  On every default the result is identical to the original: three 86px tabs in
+  a light pill track, a near-black pill sliding from the first to the second.
+-->
+
+<div
+  class="hf-transition-tabs-slide-indicator"
+  data-composition-variables='[
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Fill of the sliding pill. ink is literal; the rest ride the composition theme tokens.", "default": "ink", "options": [{ "value": "ink", "label": "Ink" }, { "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "width", "type": "enum", "role": "layout", "label": "Tab width", "description": "Width of one tab. The slide the timeline drives is scaled to match, so the pill still lands on the next tab.", "default": "standard", "options": [{ "value": "compact", "label": "Compact" }, { "value": "standard", "label": "Standard" }, { "value": "wide", "label": "Wide" }] },
+    { "id": "shape", "type": "enum", "role": "style", "label": "Shape", "description": "Corner radius of the track and the pill.", "default": "pill", "options": [{ "value": "pill", "label": "Pill" }, { "value": "rounded", "label": "Rounded" }, { "value": "square", "label": "Square" }] },
+    { "id": "labels", "type": "string", "role": "content", "label": "Labels", "description": "The tab names, separated by commas. Two or more names rebuild the row.", "default": "Plan,Debug,Ask" }
+  ]'
+>
+  <span class="indicator"></span><button>Plan</button><button>Debug</button><button>Ask</button>
+</div>
+
+<style>
+  .hf-transition-tabs-slide-indicator {
+    --hf-tab-x: 0px;
+    position: relative;
+    display: inline-grid;
+    grid-template-columns: repeat(var(--hf-tab-count, 3), var(--hf-tab-width, 86px));
+    padding: 4px;
+    border: 1px solid #e4e4e7;
+    border-radius: var(--hf-tab-radius, 999px);
+    background: #f4f4f5;
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-transition-tabs-slide-indicator .indicator {
+    position: absolute;
+    top: 4px;
+    left: 4px;
+    width: var(--hf-tab-width, 86px);
+    height: 36px;
+    border-radius: var(--hf-tab-radius, 999px);
+    background: var(--hf-tab-fill, #18181b);
+    transform: translateX(calc(var(--hf-tab-x) * var(--hf-tab-step, 1)));
+    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18);
+  }
+  .hf-transition-tabs-slide-indicator button {
+    position: relative;
+    z-index: 1;
+    height: 36px;
+    border: 0;
+    background: transparent;
+    color: #71717a;
+    font-weight: 850;
+  }
+  .hf-transition-tabs-slide-indicator button:nth-of-type(2) {
+    color: #fff;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    // The pill is the one accent-carrying element here, so the three chromatic
+    // options ride the composition's own tokens and fall back to ink.
+    var accents = {
+      ink: "#18181b",
+      green: "var(--brand, #18181b)",
+      blue: "var(--accent, #18181b)",
+      violet: "var(--accent-2, #18181b)",
+    };
+    var widths = { compact: 72, standard: 86, wide: 104 };
+    var shapes = { pill: "999px", rounded: "12px", square: "4px" };
+
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var accent = accents[pick(accents, vars.accent, "ink")];
+    var width = widths[pick(widths, vars.width, "standard")];
+    var radius = shapes[pick(shapes, vars.shape, "pill")];
+    var labels =
+      typeof vars.labels === "string"
+        ? vars.labels.split(",").map(function (part) {
+            return part.trim();
+          })
+        : [];
+    labels = labels.filter(function (part) {
+      return part.length > 0;
+    });
+
+    var roots = document.querySelectorAll(".hf-transition-tabs-slide-indicator");
+    for (var i = 0; i < roots.length; i += 1) {
+      roots[i].style.setProperty("--hf-tab-fill", accent);
+      roots[i].style.setProperty("--hf-tab-width", width + "px");
+      // The timeline slides the pill by one standard tab, so scale that slide
+      // to whatever a tab is actually worth here.
+      roots[i].style.setProperty("--hf-tab-step", String(width / 86));
+      roots[i].style.setProperty("--hf-tab-radius", radius);
+      // A single tab has nowhere to slide to, so it is left as authored.
+      if (labels.length > 1) {
+        var old = roots[i].querySelectorAll("button");
+        for (var j = 0; j < old.length; j += 1) {
+          old[j].parentNode.removeChild(old[j]);
+        }
+        for (var k = 0; k < labels.length; k += 1) {
+          var button = document.createElement("button");
+          button.textContent = labels[k];
+          roots[i].appendChild(button);
+        }
+        roots[i].style.setProperty("--hf-tab-count", String(labels.length));
+      }
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-transition-tabs-slide-indicator .indicator', { '--hf-tab-x': '0px' }, { '--hf-tab-x': '86px', duration: 0.42, ease: 'power3.inOut' }, startTime);
+-->
diff --git a/registry/components/telemetry-hud/README.md b/registry/components/telemetry-hud/README.md
new file mode 100644
index 0000000000..b76bf1de80
--- /dev/null
+++ b/registry/components/telemetry-hud/README.md
@@ -0,0 +1,94 @@
+# telemetry-hud
+
+Quiet mono debug-HUD readouts frame a slotted subject. Four corner brackets
+draw on, small `label: value` data lines fade in around the frame, and each
+value ticks to its final string on its cue (unresolved characters roll through
+same-class stand-ins and resolve left to right, the typed-prompt text-at-time
+law). One readout is emphasized in the accent color. The subject never moves
+and the HUD breathes zero: once the last tick lands, the hold is dead still.
+
+## Files
+
+- `telemetry-hud.html`: the mountable sub-composition (install target:
+  `compositions/components/telemetry-hud.html`).
+- `registry-item.json`: registry metadata and the variables block.
+
+## Variables
+
+| id          | type   | default                                         | notes                                                                     |
+| ----------- | ------ | ----------------------------------------------- | ------------------------------------------------------------------------- |
+| `readouts`  | string | `fps:59.94,latency:11.8 ms,gpu:38%,heap:1.2 GB` | comma-separated `label:value` pairs, up to 8; first colon splits          |
+| `emphasize` | number | `0`                                             | index of the accent-colored readout; `-1` disables                        |
+| `cues`      | string | `""`                                            | comma-separated seconds; cue N starts readout N's tick; empty = authored  |
+| `accent`    | enum   | `green`                                         | `green` maps to `--brand`, `blue` to `--accent`, `violet` to `--accent-2` |
+| `exit`      | enum   | `none`                                          | `none` holds the final frame; `fade` and `up` release the stage           |
+
+Envelope: IN = stage fade 0.45s, bracket draws from 0.12s, readout ticks land
+per cue (default rhythm 1.0s + 0.28s per readout, each tick 0.5s; cues clamp
+so every tick finishes before the exit). OUT = 0.45s only when `exit` is
+`fade` or `up`. HOLD is the sole elastic phase and is completely still. The
+`readouts-settled` sync point fires when the last default tick lands, 2.35s
+at defaults.
+
+Readouts are assigned to the four corners cyclically (top-left, top-right,
+bottom-left, bottom-right), so 4 readouts give one line per corner and 8 give
+two per corner.
+
+## The slot mechanism
+
+The primitive ships one named slot inside its `<template>`:
+
+```html
+<div class="th-slot" data-slot="subject">...</div>
+```
+
+The slot's default children are a token skeleton card, so an untouched mount
+still reads as a framed subject. To show your own content, install the
+component and **replace the children of the `[data-slot="subject"]` element
+in your installed copy** (the runtime clones only the primitive's own
+template on mount, so slot content lives in the component file, not on the
+host clip).
+
+Rules:
+
+- The subject stays centered at 56cqw by 58cqh and never moves; the HUD
+  brackets and readouts render around it, outside the slot.
+- Direct `img`/`video` children are automatically sized to cover the subject
+  (`object-fit: cover`). Arbitrary HTML works too; size it in `cqw`/`cqh`.
+- Keep the brackets and readout corners alone; they render above slot content.
+
+## Worked example
+
+Install, then fill the slot with a product screenshot:
+
+```bash
+npx hyperframes add telemetry-hud
+```
+
+In `compositions/components/telemetry-hud.html`, replace the slot's default
+block:
+
+```html
+<div class="th-slot" data-slot="subject">
+  <img src="../../assets/render-preview.png" alt="" />
+</div>
+```
+
+Mount it from a host composition like any sub-composition:
+
+```html
+<div
+  class="clip"
+  data-composition-id="telemetry-hud"
+  data-composition-src="./components/telemetry-hud.html"
+  data-variable-values='{"readouts":"pass:2 of 2,frames:135,gpu:41%,eta:00:12","emphasize":3,"accent":"blue"}'
+  data-start="2"
+  data-duration="4.5"
+  data-track-index="0"
+></div>
+```
+
+The brackets draw as the clip mounts, the four values tick in on the default
+rhythm with `eta` emphasized in blue, and the HUD holds perfectly still for
+the rest of the clip window (`exit` defaults to `none`; frame roots own scene
+transitions).
diff --git a/registry/components/telemetry-hud/demo.html b/registry/components/telemetry-hud/demo.html
new file mode 100644
index 0000000000..eed3e16bd2
--- /dev/null
+++ b/registry/components/telemetry-hud/demo.html
@@ -0,0 +1,93 @@
+<!doctype html>
+<!--
+  telemetry-hud demo. This standalone composition mounts the primitive
+  through data-composition-src. Non-default readouts, emphasize, cues, and
+  accent values prove the variable path while the primitive remains elastic
+  to its host.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>telemetry-hud Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #0b0c0e);
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --muted: #8b95a6;
+        --surface: #14171c;
+        --border: #343a46;
+        --brand: #71f5a7;
+        --accent: #61a8ff;
+        --accent-2: #c5a3ff;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(
+          ellipse at 50% 44%,
+          var(--bg, #171a20) 0%,
+          var(--bg, #0b0c0e) 72%
+        );
+      }
+
+      .mount-card {
+        width: 72%;
+        height: 74%;
+        left: 14%;
+        top: 13%;
+        container-type: size;
+        overflow: hidden;
+        border: 1px solid color-mix(in srgb, var(--border, #94a3b8) 20%, transparent);
+        border-radius: 30px;
+        background: color-mix(in srgb, var(--surface, #101318) 72%, transparent);
+        box-shadow: 0 40px 100px color-mix(in srgb, var(--bg, #000000) 48%, transparent);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="telemetry-hud-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4.5"
+      data-fps="30"
+    >
+      <div
+        id="telemetry-hud-mount"
+        class="mount-card clip"
+        data-composition-id="telemetry-hud"
+        data-composition-src="./telemetry-hud.html"
+        data-variable-values='{"readouts":"build:snowline-42,fps:59.94,frames:135,latency:11.8 ms,heap:412 MB","emphasize":1,"cues":"0.9,1.15,1.4,1.65,1.9","accent":"violet"}'
+        data-start="0"
+        data-duration="4.5"
+        data-track-index="0"
+        data-width="1382"
+        data-height="799"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["telemetry-hud-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/telemetry-hud/registry-item.json b/registry/components/telemetry-hud/registry-item.json
new file mode 100644
index 0000000000..85cc8a475e
--- /dev/null
+++ b/registry/components/telemetry-hud/registry-item.json
@@ -0,0 +1,75 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "telemetry-hud",
+  "type": "hyperframes:component",
+  "title": "Telemetry HUD",
+  "description": "Quiet mono debug-HUD readouts frame a slotted subject: corner brackets draw on, label:value lines tick their values on cues, one readout emphasized in accent. The subject never moves; the HUD breathes zero.",
+  "tags": ["motion-primitive", "product-demo", "hud", "telemetry", "deterministic"],
+  "jobs": ["demonstrate"],
+  "family": "product-demo",
+  "profile": "holdable",
+  "evidence": "Wave K K4 telemetry-hud specification; text-at-time value ticking generalized from typed-prompt, bracket draw from the marker-highlight dash law with attribute-driven dashoffset",
+  "syncPoints": [{ "id": "readouts-settled", "phase": "in", "offset": 2.35 }],
+  "files": [
+    {
+      "path": "telemetry-hud.html",
+      "target": "compositions/components/telemetry-hud.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "readouts",
+      "type": "string",
+      "role": "content",
+      "label": "Readouts",
+      "description": "Comma-separated label:value pairs, up to 8. The first colon splits label from value.",
+      "default": "fps:59.94,latency:11.8 ms,gpu:38%,heap:1.2 GB"
+    },
+    {
+      "id": "emphasize",
+      "type": "number",
+      "role": "style",
+      "label": "Emphasize",
+      "description": "Index of the readout rendered in the accent color. -1 disables.",
+      "default": 0,
+      "min": -1,
+      "max": 7,
+      "step": 1
+    },
+    {
+      "id": "cues",
+      "type": "string",
+      "role": "timing",
+      "label": "Cues",
+      "description": "Comma-separated seconds relative to mount start; cue N starts readout N value tick. Empty uses the authored rhythm.",
+      "default": ""
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Color of the emphasized readout.",
+      "default": "green",
+      "options": [
+        { "value": "green", "label": "Green" },
+        { "value": "blue", "label": "Blue" },
+        { "value": "violet", "label": "Violet" }
+      ]
+    },
+    {
+      "id": "exit",
+      "type": "enum",
+      "role": "timing",
+      "label": "Exit",
+      "description": "Outgoing transition. Frame roots own transitions; none holds the end frame.",
+      "default": "none",
+      "options": [
+        { "value": "none", "label": "None" },
+        { "value": "fade", "label": "Fade" },
+        { "value": "up", "label": "Up" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/telemetry-hud/telemetry-hud.html b/registry/components/telemetry-hud/telemetry-hud.html
new file mode 100644
index 0000000000..5776ee6b14
--- /dev/null
+++ b/registry/components/telemetry-hud/telemetry-hud.html
@@ -0,0 +1,553 @@
+<!doctype html>
+<!--
+  telemetry-hud: HyperFrames video primitive (product-demo / HUD)
+
+  Quiet mono debug-HUD readouts frame a slotted subject. Four corner brackets
+  draw on (measured getTotalLength, ATTRIBUTE-driven stroke-dashoffset: a CSS
+  dashoffset tween can leave stale paint under reverse seeks), small
+  "label: value" data lines fade in, and each value ticks to its final string
+  on its cue. One readout is emphasized in the accent color. The subject never
+  moves and the HUD breathes zero: the hold is dead still.
+
+  Value ticking follows the typed-prompt law: every visible frame is read from
+  one text-at-time row table built synchronously (fixed-seed LCG) before the
+  timeline registers, so forward seeks, reverse seeks, and repeated seeks to
+  the same time always produce the same string. Nothing is incremental.
+  During a tick, unresolved characters roll through same-class stand-ins
+  (digits stay digits, letters stay letters) and resolve left to right.
+
+  Slot (see README.md for a worked example):
+    - [data-slot="subject"]: the framed subject. Replace the children of this
+      element in your installed copy (img, video, or HTML). Default: a token
+      skeleton card. Direct img/video children are sized to cover the slot.
+
+  Variables (declared in data-composition-variables below):
+    - readouts (string): comma-separated "label:value" pairs, up to 8. The
+      first colon splits label from value; later colons stay in the value.
+    - emphasize (number, default 0): index of the accent-colored readout.
+      Out-of-range values clamp; -1 disables emphasis.
+    - cues (string, default ""): comma-separated seconds relative to mount
+      start; cue N starts readout N's tick. Empty = authored rhythm.
+    - accent (green | blue | violet, default green): emphasized readout color.
+      green maps to --brand, blue to --accent, violet to --accent-2.
+    - exit (none | fade | up, default none): outgoing transition. none holds
+      the end frame (frame roots own transitions; holds end films).
+
+  Envelope (fixed IN/OUT, elastic HOLD only, never gsap.timeScale()):
+    IN   = stage fade 0.45s, brackets draw 0.12s to ~0.9s, readout lines fade
+           staggered, ticks land per cue (clamped to finish before OUT).
+    HOLD = elastic = everything after the last tick; completely still.
+    OUT  = 0.45s when exit is fade or up, 0 when exit is none.
+
+  Interruptibility (Wave K L1): every animated property has one owner (stage
+  opacity/y, per-path dashoffset, one shared tick driver), so overlapping cue
+  schedules never fight a second tween for the same value.
+
+  Mount contract: MOUNTABLE SUB-COMPOSITION. The runtime clones only
+  <template> contents; #root fills the host box (inset: 0, container-type:
+  size), has no data-width/data-height, and registers one paused timeline
+  under the literal "telemetry-hud" key. Variables come from
+  window.__hyperframes.getVariables().
+-->
+<html
+  lang="en"
+  data-composition-id="telemetry-hud"
+  data-composition-duration="4.5"
+  data-composition-variables='[
+    { "id": "readouts", "type": "string", "role": "content", "label": "Readouts", "description": "Comma-separated label:value pairs, up to 8. The first colon splits label from value.", "default": "fps:59.94,latency:11.8 ms,gpu:38%,heap:1.2 GB" },
+    { "id": "emphasize", "type": "number", "role": "style", "label": "Emphasize", "description": "Index of the readout rendered in the accent color. -1 disables.", "default": 0, "min": -1, "max": 7, "step": 1 },
+    { "id": "cues", "type": "string", "role": "timing", "label": "Cues", "description": "Comma-separated seconds relative to mount start; cue N starts readout N value tick. Empty uses the authored rhythm.", "default": "" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Color of the emphasized readout.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Outgoing transition. Frame roots own transitions; none holds the end frame.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Telemetry HUD</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="telemetry-hud" data-duration="4.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            background: var(--bg, #07111f);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            pointer-events: none;
+          }
+
+          .th-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+          }
+
+          .th-stage {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            will-change: transform, opacity;
+          }
+
+          /* Framed subject: centered, static for the whole hold. */
+          .th-subject {
+            position: relative;
+            width: 56cqw;
+            height: 58cqh;
+            overflow: hidden;
+            border-radius: var(--radius, 2.4cqmin);
+          }
+
+          .th-slot,
+          .th-slot > img,
+          .th-slot > video {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+          }
+
+          .th-slot > img,
+          .th-slot > video {
+            object-fit: cover;
+          }
+
+          /* Token skeleton default; callers replacing slot children never
+             see any of this. */
+          .th-default {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            border: 0.16cqmin solid var(--border, #334155);
+            border-radius: var(--radius, 2.4cqmin);
+            background: color-mix(in srgb, var(--surface, #172033) 90%, var(--bg, #07111f));
+          }
+
+          .th-card {
+            width: 72%;
+          }
+
+          .th-bar {
+            width: 38%;
+            height: 4.6cqh;
+            margin-bottom: var(--space-3, 4cqh);
+            border-radius: 1.2cqh;
+            background: var(--muted, #94a3b8);
+            opacity: 0.55;
+          }
+
+          .th-line {
+            height: 2.4cqh;
+            margin-bottom: var(--space-2, 2.6cqh);
+            border-radius: 1.2cqh;
+            background: var(--muted, #94a3b8);
+            opacity: 0.38;
+          }
+
+          .th-line:nth-of-type(2) {
+            width: 88%;
+          }
+
+          .th-line:nth-of-type(3) {
+            width: 64%;
+          }
+
+          .th-line:nth-of-type(4) {
+            width: 42%;
+          }
+
+          /* Corner brackets: square-capped strokes, drawn via measured
+             dasharray/dashoffset ATTRIBUTES set from script. */
+          .th-bracket {
+            position: absolute;
+            width: 8cqmin;
+            height: 8cqmin;
+            overflow: visible;
+          }
+
+          .th-bracket path {
+            fill: none;
+            stroke: color-mix(in srgb, var(--fg, #f8fafc) 62%, transparent);
+            stroke-width: 3;
+            stroke-linecap: butt;
+          }
+
+          .th-bracket-tl {
+            top: var(--space-2, 2.4cqmin);
+            left: var(--space-2, 2.4cqmin);
+          }
+
+          .th-bracket-tr {
+            top: var(--space-2, 2.4cqmin);
+            right: var(--space-2, 2.4cqmin);
+            transform: scaleX(-1);
+          }
+
+          .th-bracket-bl {
+            bottom: var(--space-2, 2.4cqmin);
+            left: var(--space-2, 2.4cqmin);
+            transform: scaleY(-1);
+          }
+
+          .th-bracket-br {
+            bottom: var(--space-2, 2.4cqmin);
+            right: var(--space-2, 2.4cqmin);
+            transform: scale(-1, -1);
+          }
+
+          /* Readout groups sit just inside each bracket. */
+          .th-corner {
+            position: absolute;
+            display: flex;
+            flex-direction: column;
+            gap: 0.9cqmin;
+          }
+
+          .th-corner-tl {
+            top: calc(var(--space-2, 2.4cqmin) + 1cqmin);
+            left: calc(var(--space-2, 2.4cqmin) + 9.6cqmin);
+          }
+
+          .th-corner-tr {
+            top: calc(var(--space-2, 2.4cqmin) + 1cqmin);
+            right: calc(var(--space-2, 2.4cqmin) + 9.6cqmin);
+            align-items: flex-end;
+          }
+
+          .th-corner-bl {
+            bottom: calc(var(--space-2, 2.4cqmin) + 1cqmin);
+            left: calc(var(--space-2, 2.4cqmin) + 9.6cqmin);
+          }
+
+          .th-corner-br {
+            bottom: calc(var(--space-2, 2.4cqmin) + 1cqmin);
+            right: calc(var(--space-2, 2.4cqmin) + 9.6cqmin);
+            align-items: flex-end;
+          }
+
+          .th-read {
+            display: flex;
+            align-items: baseline;
+            gap: 1.1cqmin;
+            font-size: 2.3cqmin;
+            line-height: 1.35;
+            white-space: nowrap;
+            will-change: opacity;
+          }
+
+          .th-label {
+            color: var(--muted, #94a3b8);
+            font-weight: 500;
+            letter-spacing: 0.12em;
+            text-transform: uppercase;
+          }
+
+          .th-value {
+            color: var(--fg, #f8fafc);
+            font-weight: 500;
+            font-variant-numeric: tabular-nums;
+          }
+
+          .th-read.th-em .th-label,
+          .th-read.th-em .th-value {
+            color: var(--th-accent);
+          }
+
+          .th-read.th-em .th-value {
+            font-weight: 600;
+          }
+        </style>
+
+        <div
+          id="telemetry-hud-clip"
+          class="th-clip clip"
+          data-start="0"
+          data-duration="4.5"
+          data-track-index="0"
+        >
+          <div class="th-stage">
+            <div class="th-subject">
+              <div class="th-slot" data-slot="subject">
+                <!-- SLOT "subject": replace the children of this element with
+                     your own content (img, video, or HTML). -->
+                <div class="th-default" aria-hidden="true">
+                  <div class="th-card">
+                    <div class="th-bar"></div>
+                    <div class="th-line"></div>
+                    <div class="th-line"></div>
+                    <div class="th-line"></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <svg class="th-bracket th-bracket-tl" viewBox="0 0 48 48" aria-hidden="true">
+              <path d="M 46 3 L 12 3 Q 3 3 3 12 L 3 46"></path>
+            </svg>
+            <svg class="th-bracket th-bracket-tr" viewBox="0 0 48 48" aria-hidden="true">
+              <path d="M 46 3 L 12 3 Q 3 3 3 12 L 3 46"></path>
+            </svg>
+            <svg class="th-bracket th-bracket-bl" viewBox="0 0 48 48" aria-hidden="true">
+              <path d="M 46 3 L 12 3 Q 3 3 3 12 L 3 46"></path>
+            </svg>
+            <svg class="th-bracket th-bracket-br" viewBox="0 0 48 48" aria-hidden="true">
+              <path d="M 46 3 L 12 3 Q 3 3 3 12 L 3 46"></path>
+            </svg>
+
+            <div class="th-corner th-corner-tl"></div>
+            <div class="th-corner th-corner-tr"></div>
+            <div class="th-corner th-corner-bl"></div>
+            <div class="th-corner th-corner-br"></div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            // Literal id: mount flattening strips data-composition-id from the
+            // live root before this timeline registers.
+            var compositionId = "telemetry-hud";
+            var stage = root.querySelector(".th-stage");
+            var brackets = root.querySelectorAll(".th-bracket path");
+            var corners = [
+              root.querySelector(".th-corner-tl"),
+              root.querySelector(".th-corner-tr"),
+              root.querySelector(".th-corner-bl"),
+              root.querySelector(".th-corner-br"),
+            ];
+
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var readoutsRaw =
+              vars.readouts == null
+                ? "fps:59.94,latency:11.8 ms,gpu:38%,heap:1.2 GB"
+                : String(vars.readouts);
+            var emphasizeRaw = Number(vars.emphasize);
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #22c55e)",
+              blue: "var(--accent, #38bdf8)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            // The bundler mirrors composition variables as scoped CSS custom
+            // props, so this unit's own accent variable shadows the contract
+            // --accent token inside the subtree. When the shadow is present,
+            // fall back to the literal contract value instead of var(--accent).
+            var computedAccent = getComputedStyle(root).getPropertyValue("--accent").trim();
+            if (
+              computedAccent === "green" ||
+              computedAccent === "blue" ||
+              computedAccent === "violet"
+            ) {
+              accentColors.blue = "#38bdf8";
+            }
+            root.style.setProperty("--th-accent", accentColors[accent]);
+
+            // Parse "label:value" pairs; the FIRST colon splits, later colons
+            // stay in the value. Cap at 8 (two per corner).
+            var readouts = readoutsRaw
+              .split(",")
+              .map(function (pair) {
+                var i = pair.indexOf(":");
+                var label = (i < 0 ? pair : pair.slice(0, i)).trim();
+                var value = (i < 0 ? "" : pair.slice(i + 1)).trim();
+                return { label: label, value: value };
+              })
+              .filter(function (r) {
+                return r.label.length > 0;
+              })
+              .slice(0, 8);
+            var emphasize = Number.isFinite(emphasizeRaw)
+              ? Math.min(Math.round(emphasizeRaw), readouts.length - 1)
+              : 0;
+
+            var cueList = String(vars.cues == null ? "" : vars.cues)
+              .split(",")
+              .map(function (token) {
+                return parseFloat(token);
+              })
+              .filter(function (value) {
+                return isFinite(value) && value >= 0;
+              });
+
+            // RETIME RANGE: fixed phases; HOLD is the only elastic span.
+            var STAGE_IN = 0.45;
+            var BRACKET_AT = 0.12;
+            var BRACKET_DRAW = 0.5;
+            var READ_IN_AT = 0.45;
+            var TICK = 0.5;
+            var STILLNESS = 0.25;
+            var OUT_BASE = exit === "none" ? 0 : 0.45;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4.5"));
+            var OUT = Math.min(OUT_BASE, duration * 0.2);
+            var OUT_START = duration - OUT;
+            // Every tick must land before the stillness that precedes OUT.
+            var lastCueMax = Math.max(READ_IN_AT, OUT_START - STILLNESS - TICK);
+
+            // Fixed-seed LCG: the only randomness source, consumed in one
+            // deterministic order during this synchronous build.
+            var lcgState = 0x2c9277b5;
+            function rnd() {
+              lcgState = (Math.imul(1664525, lcgState) + 1013904223) >>> 0;
+              return lcgState / 4294967296;
+            }
+            var DIGITS = "0123456789";
+            var UPPER = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+            var LOWER = "abcdefghijklmnopqrstuvwxyz";
+            function standIn(ch) {
+              if (DIGITS.indexOf(ch) >= 0) return DIGITS[Math.floor(rnd() * 10)];
+              if (UPPER.indexOf(ch) >= 0) return UPPER[Math.floor(rnd() * 26)];
+              if (LOWER.indexOf(ch) >= 0) return LOWER[Math.floor(rnd() * 26)];
+              return ch;
+            }
+
+            // Build DOM + one text-at-time table per readout, all at once.
+            // The timeline only ever reads the tables, so seeks in any
+            // direction resolve the same string for the same time.
+            var STEPS = 8;
+            var readElements = [];
+            var valueElements = [];
+            var tables = [];
+            var tickEnd = READ_IN_AT;
+            readouts.forEach(function (readout, index) {
+              var row = document.createElement("div");
+              row.className = "th-read" + (index === emphasize ? " th-em" : "");
+              var labelEl = document.createElement("span");
+              labelEl.className = "th-label";
+              labelEl.textContent = readout.label;
+              var valueEl = document.createElement("span");
+              valueEl.className = "th-value";
+              valueEl.textContent = "--";
+              row.appendChild(labelEl);
+              row.appendChild(valueEl);
+              corners[index % 4].appendChild(row);
+              readElements.push(row);
+              valueElements.push(valueEl);
+
+              var cue = cueList[index] != null ? cueList[index] : 1.0 + index * 0.28;
+              cue = Math.max(READ_IN_AT, Math.min(cue, lastCueMax));
+              var chars = Array.from(readout.value);
+              var rows = [{ t: 0, x: "--" }];
+              for (var step = 1; step <= STEPS; step += 1) {
+                var resolved =
+                  step === STEPS ? chars.length : Math.floor((chars.length * step) / STEPS);
+                var out = "";
+                for (var k = 0; k < chars.length; k += 1) {
+                  out += k < resolved ? chars[k] : standIn(chars[k]);
+                }
+                rows.push({ t: cue + (TICK * step) / STEPS, x: out });
+              }
+              tables.push(rows);
+              tickEnd = Math.max(tickEnd, cue + TICK);
+            });
+
+            // 1ms tolerance: GSAP snaps a tween's end value below the row
+            // table's accumulated float times, far under one frame.
+            function textAt(rows, time) {
+              for (var i = rows.length - 1; i >= 0; i -= 1) {
+                if (time >= rows[i].t - 0.001) return rows[i].x;
+              }
+              return rows[0].x;
+            }
+
+            gsap.set(stage, { opacity: 0, y: 0 });
+            readElements.forEach(function (el) {
+              gsap.set(el, { opacity: 0 });
+            });
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: one stage fade; the subject never moves.
+            tl.to(stage, { opacity: 1, duration: STAGE_IN, ease: "power2.out" }, 0);
+
+            // Brackets draw on: dasharray/dashoffset as ATTRIBUTES (a CSS
+            // strokeDashoffset tween can leave stale paint under reverse
+            // seeks), both endpoints explicit.
+            brackets.forEach(function (path, index) {
+              var length = path.getTotalLength();
+              path.setAttribute("stroke-dasharray", String(length));
+              path.setAttribute("stroke-dashoffset", String(length));
+              tl.fromTo(
+                path,
+                { attr: { "stroke-dashoffset": length } },
+                {
+                  attr: { "stroke-dashoffset": 0 },
+                  duration: BRACKET_DRAW,
+                  ease: "power2.inOut",
+                  immediateRender: false,
+                },
+                BRACKET_AT + index * 0.08,
+              );
+            });
+
+            // Readout lines fade in staggered; opacity only, no movement.
+            readElements.forEach(function (el, index) {
+              tl.fromTo(
+                el,
+                { opacity: 0 },
+                { opacity: 1, duration: 0.35, ease: "power1.out", immediateRender: false },
+                READ_IN_AT + index * 0.07,
+              );
+            });
+
+            // One shared driver reads every table; single owner of all values.
+            var driver = { t: 0 };
+            tl.to(
+              driver,
+              {
+                t: tickEnd,
+                duration: tickEnd,
+                ease: "none",
+                onUpdate: function () {
+                  for (var i = 0; i < valueElements.length; i += 1) {
+                    valueElements[i].textContent = textAt(tables[i], driver.t);
+                  }
+                },
+              },
+              0,
+            );
+
+            // HOLD: the HUD breathes zero. Completely still.
+
+            // OUT: only when the exit variable asks for one.
+            if (exit !== "none") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+              if (exit === "up") {
+                tl.to(stage, { y: "-5cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              }
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/terminal-simulator/demo.html b/registry/components/terminal-simulator/demo.html
new file mode 100644
index 0000000000..de70808a89
--- /dev/null
+++ b/registry/components/terminal-simulator/demo.html
@@ -0,0 +1,157 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Terminal Simulator - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+        /* ponytail: scale wrapper (not a GSAP target) to fill ~65% of frame */
+        transform: scale(1.65);
+      }
+      .hf-remocn-terminal-simulator {
+        --hf-accent: var(--accent, #18181b);
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-terminal-simulator {
+        width: 760px;
+        border-radius: 24px;
+        overflow: hidden;
+        background: #0f172a;
+        color: #e4e4e7;
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+      }
+      .hf-remocn-terminal-simulator .chrome {
+        height: 48px;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 0 18px;
+        background: #111827;
+        color: #94a3b8;
+        font-size: 14px;
+      }
+      .hf-remocn-terminal-simulator .dot {
+        width: 11px;
+        height: 11px;
+        border-radius: 999px;
+        background: #ef4444;
+        box-shadow:
+          18px 0 #f59e0b,
+          36px 0 #22c55e;
+      }
+      .hf-remocn-terminal-simulator .body {
+        display: grid;
+        grid-template-columns: 210px 1fr;
+        min-height: 340px;
+      }
+      .hf-remocn-terminal-simulator .files {
+        padding: 22px;
+        border-right: 1px solid rgba(148, 163, 184, 0.18);
+        color: #94a3b8;
+        font-size: 15px;
+        line-height: 1.8;
+      }
+      .hf-remocn-terminal-simulator .editor {
+        padding: 22px;
+        display: grid;
+        gap: 14px;
+      }
+      .hf-remocn-terminal-simulator .line {
+        display: block;
+        height: 18px;
+        border-radius: 999px;
+        background: rgba(228, 228, 231, 0.18);
+        transform: scaleX(var(--hf-line, 1));
+        transform-origin: left center;
+        opacity: var(--hf-line-opacity, 1);
+      }
+      .hf-remocn-terminal-simulator .terminal {
+        padding: 18px 22px 24px;
+        border-top: 1px solid rgba(148, 163, 184, 0.18);
+        color: #86efac;
+        min-height: 78px;
+        font-size: 15px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="terminal-simulator-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-terminal-simulator">
+          <div class="chrome"><span class="dot"></span><span>Terminal Simulator</span></div>
+          <div class="body">
+            <div class="files">index.html<br />style.css<br />timeline.js</div>
+            <div class="editor">
+              <span class="line" style="width: 92%"></span
+              ><span class="line" style="width: 72%"></span
+              ><span class="line" style="width: 84%"></span
+              ><span class="line" style="width: 58%"></span
+              ><span class="line" style="width: 78%"></span>
+            </div>
+          </div>
+          <div class="terminal">$ hyperframes render --skill=terminal-simulator</div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-terminal-simulator .line",
+          { "--hf-line": 0, "--hf-line-opacity": 0 },
+          {
+            "--hf-line": 1,
+            "--hf-line-opacity": 1,
+            duration: 0.24,
+            stagger: 0.08,
+            ease: "power2.out",
+          },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-terminal-simulator .terminal",
+          { opacity: 0, y: 16 },
+          { opacity: 1, y: 0, duration: 0.34, ease: "power2.out" },
+          startTime + 0.48,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["terminal-simulator-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/terminal-simulator/registry-item.json b/registry/components/terminal-simulator/registry-item.json
new file mode 100644
index 0000000000..633e263c86
--- /dev/null
+++ b/registry/components/terminal-simulator/registry-item.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "terminal-simulator",
+  "type": "hyperframes:component",
+  "title": "Terminal Simulator",
+  "description": "A terminal window types commands and streams log output.",
+  "tags": ["code-animation", "remocn-port"],
+  "files": [
+    {
+      "path": "terminal-simulator.html",
+      "target": "compositions/components/terminal-simulator.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/terminal-simulator.png"
+  }
+}
diff --git a/registry/components/terminal-simulator/terminal-simulator.html b/registry/components/terminal-simulator/terminal-simulator.html
new file mode 100644
index 0000000000..1cb4dcf1b4
--- /dev/null
+++ b/registry/components/terminal-simulator/terminal-simulator.html
@@ -0,0 +1,92 @@
+<!--
+  Terminal Simulator - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-terminal-simulator">
+  <div class="chrome"><span class="dot"></span><span>Terminal Simulator</span></div>
+  <div class="body">
+    <div class="files">index.html<br />style.css<br />timeline.js</div>
+    <div class="editor">
+      <span class="line" style="width: 92%"></span><span class="line" style="width: 72%"></span
+      ><span class="line" style="width: 84%"></span><span class="line" style="width: 58%"></span
+      ><span class="line" style="width: 78%"></span>
+    </div>
+  </div>
+  <div class="terminal">$ hyperframes render --skill=terminal-simulator</div>
+</div>
+
+<style>
+  .hf-remocn-terminal-simulator {
+    --hf-accent: var(--accent, #18181b);
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-terminal-simulator {
+    width: 760px;
+    border-radius: 24px;
+    overflow: hidden;
+    background: #0f172a;
+    color: #e4e4e7;
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+    font-family: ui-monospace, Menlo, monospace;
+  }
+  .hf-remocn-terminal-simulator .chrome {
+    height: 48px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 0 18px;
+    background: #111827;
+    color: #94a3b8;
+  }
+  .hf-remocn-terminal-simulator .dot {
+    width: 11px;
+    height: 11px;
+    border-radius: 999px;
+    background: #ef4444;
+    box-shadow:
+      18px 0 #f59e0b,
+      36px 0 #22c55e;
+  }
+  .hf-remocn-terminal-simulator .body {
+    display: grid;
+    grid-template-columns: 210px 1fr;
+    min-height: 340px;
+  }
+  .hf-remocn-terminal-simulator .files {
+    padding: 22px;
+    border-right: 1px solid rgba(148, 163, 184, 0.18);
+    color: #94a3b8;
+  }
+  .hf-remocn-terminal-simulator .editor {
+    padding: 22px;
+    display: grid;
+    gap: 12px;
+  }
+  .hf-remocn-terminal-simulator .line {
+    display: block;
+    height: 16px;
+    border-radius: 999px;
+    background: rgba(228, 228, 231, 0.18);
+    transform: scaleX(var(--hf-line, 1));
+    transform-origin: left center;
+    opacity: var(--hf-line-opacity, 1);
+  }
+  .hf-remocn-terminal-simulator .terminal {
+    padding: 18px 22px 24px;
+    border-top: 1px solid rgba(148, 163, 184, 0.18);
+    color: #86efac;
+    min-height: 78px;
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-terminal-simulator .line', { '--hf-line': 0, '--hf-line-opacity': 0 }, { '--hf-line': 1, '--hf-line-opacity': 1, duration: 0.24, stagger: 0.08, ease: 'power2.out' }, startTime); tl.fromTo('.hf-remocn-terminal-simulator .terminal', { opacity: 0, y: 16 }, { opacity: 1, y: 0, duration: 0.34, ease: 'power2.out' }, startTime + 0.48);
+-->
diff --git a/registry/components/testimonial-card/demo.html b/registry/components/testimonial-card/demo.html
new file mode 100644
index 0000000000..1693ef08ef
--- /dev/null
+++ b/registry/components/testimonial-card/demo.html
@@ -0,0 +1,101 @@
+<!doctype html>
+<!--
+  testimonial-card demo: standalone 1920x1080 composition that mounts the
+  primitive through data-composition-src. Non-default content exercises all
+  four variables while the host owns the stage and mount dimensions.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Testimonial Card - Demo</title>
+    <style>
+      :root {
+        --bg: #070a12;
+        --fg: #f8fafc;
+        --muted: #a8b3c7;
+        --surface: #151c2c;
+        --border: #34405a;
+        --brand: #e4e4e7;
+        --accent: #e4e4e7;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-body: Inter, system-ui, sans-serif;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        --radius: 28px;
+        --space-1: 8px;
+        --space-2: 16px;
+        --space-3: 32px;
+        --dur-beat: 0.4s;
+        --ease-standard: cubic-bezier(0.215, 0.61, 0.355, 1);
+        --ease-emphasis: cubic-bezier(0.19, 1, 0.22, 1);
+      }
+
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg);
+      }
+
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(
+          ellipse at 50% 44%,
+          color-mix(in srgb, var(--surface) 72%, var(--bg)),
+          var(--bg) 72%
+        );
+      }
+
+      .mount-card {
+        width: 54%;
+        height: 64%;
+        left: 23%;
+        top: 18%;
+        overflow: hidden;
+        border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
+        border-radius: calc(var(--radius) * 1.35);
+        box-shadow: 0 40px 90px color-mix(in srgb, var(--bg) 78%, transparent);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="testimonial-card-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="testimonial-card-mount"
+        class="mount-card clip"
+        data-composition-id="testimonial-card"
+        data-composition-src="./testimonial-card.html"
+        data-variable-values='{"quote":"Our launch video went from brief to polished in one afternoon.","author":"Maya Chen","handle":"@mayac","rating":4.6}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="1037"
+        data-height="691"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["testimonial-card-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/testimonial-card/registry-item.json b/registry/components/testimonial-card/registry-item.json
new file mode 100644
index 0000000000..a22838de4c
--- /dev/null
+++ b/registry/components/testimonial-card/registry-item.json
@@ -0,0 +1,60 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "testimonial-card",
+  "type": "hyperframes:component",
+  "title": "Testimonial Card",
+  "description": "Reveals a customer quote at reading pace, then settles its avatar, author name, and handle beneath as a clean proof beat.",
+  "tags": ["prop", "ui-props", "testimonial", "social-proof", "quote", "prove"],
+  "jobs": ["prove"],
+  "family": "ui-props",
+  "profile": "holdable",
+  "evidence": "fixture social-proof shelf, GAP A1+A2 convergent miss: both consumer simulations needed a testimonial proof beat, with reading-pace discipline as the frozen law.",
+  "syncPoints": [
+    { "id": "quote-readable", "phase": "in", "offset": 0.82 },
+    { "id": "attribution-settled", "phase": "in", "offset": 1.5 }
+  ],
+  "files": [
+    {
+      "path": "testimonial-card.html",
+      "target": "compositions/components/testimonial-card.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "quote",
+      "type": "string",
+      "role": "content",
+      "label": "Quote",
+      "description": "Customer testimonial copy revealed at reading pace.",
+      "default": "This changed how we ship."
+    },
+    {
+      "id": "author",
+      "type": "string",
+      "role": "content",
+      "label": "Author",
+      "description": "Name attributed to the testimonial.",
+      "default": "Ken Tanaka"
+    },
+    {
+      "id": "handle",
+      "type": "string",
+      "role": "content",
+      "label": "Handle",
+      "description": "Role or social handle shown beneath the author name.",
+      "default": "@ken"
+    },
+    {
+      "id": "rating",
+      "type": "number",
+      "role": "content",
+      "label": "Rating",
+      "description": "Visible customer rating from zero to five stars.",
+      "default": 5,
+      "min": 0,
+      "max": 5,
+      "step": 0.1
+    }
+  ]
+}
diff --git a/registry/components/testimonial-card/testimonial-card.html b/registry/components/testimonial-card/testimonial-card.html
new file mode 100644
index 0000000000..f8f78769b1
--- /dev/null
+++ b/registry/components/testimonial-card/testimonial-card.html
@@ -0,0 +1,329 @@
+<!doctype html>
+<!--
+  testimonial-card: HyperFrames video primitive (ui-props / holdable / prove)
+
+  Concept: a token-themed testimonial card proves a claim in one clean reveal.
+  The rating and quote rise into reading position first, then the avatar,
+  author name, and handle settle beneath with a small stagger.
+
+  Compiled-from evidence: fixture social-proof shelf, GAP evidence from the
+  A1+A2 convergent miss. Both consumer simulations needed a testimonial proof
+  beat, and the fixture freezes reading-pace discipline as its governing law.
+
+  Use when: a scene needs customer testimony to substantiate a product claim
+  without recreating a platform-specific social post.
+
+  Variables:
+    - quote (string, default "This changed how we ship."): testimonial copy.
+    - author (string, default "Ken Tanaka"): attributed customer name.
+    - handle (string, default "@ken"): role or social handle beneath the name.
+    - rating (number, 0 to 5, default 5): visible star rating.
+
+  Envelope (holdable):
+    IN   1.50s fixed quote reveal followed by attribution settle.
+    HOLD elastic and deliberately still for reading.
+    OUT  0.45s fixed release fade.
+    If D is shorter than 1.95s, IN and OUT scale together. The timeline is
+    never time-scaled, and HOLD remains the only elastic phase.
+
+  Sync points:
+    - quote-readable at 0.82s into IN.
+    - attribution-settled at 1.50s, the end of IN.
+    Both offsets compress only with short durations and never enter HOLD.
+
+  Sound cues: none. The proof beat has no discrete impact event.
+
+  Mount contract: this file is a template-wrapped sub-composition. The host
+  owns dimensions. #root fills that box with inset:0 and container-type:size,
+  carries no data-width or data-height, and registers one paused GSAP timeline
+  under the hardcoded composition id "testimonial-card".
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "quote", "type": "string", "role": "content", "label": "Quote", "description": "Customer testimonial copy revealed at reading pace.", "default": "This changed how we ship." },
+    { "id": "author", "type": "string", "role": "content", "label": "Author", "description": "Name attributed to the testimonial.", "default": "Ken Tanaka" },
+    { "id": "handle", "type": "string", "role": "content", "label": "Handle", "description": "Role or social handle shown beneath the author name.", "default": "@ken" },
+    { "id": "rating", "type": "number", "role": "content", "label": "Rating", "description": "Visible customer rating from zero to five stars.", "default": 5, "min": 0, "max": 5, "step": 0.1 }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Testimonial Card</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="testimonial-card" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            background: var(--bg);
+            color: var(--fg);
+            font-family: var(--font-body);
+          }
+
+          .tc-clip {
+            width: 100%;
+            height: 100%;
+            display: grid;
+            place-items: center;
+            padding: 6cqh 6cqw;
+          }
+
+          /* EDIT ZONE: card proportions and type scale. Paint is owned only
+             by theme-contract tokens, and every measurement resolves from
+             the host container. GSAP owns all transforms and opacity. */
+          .tc-card {
+            width: min(86cqw, 128cqh);
+            display: grid;
+            gap: min(4.6cqw, 4.6cqh);
+            padding: min(6.5cqw, 6.5cqh);
+            overflow: hidden;
+            border: 0.16cqh solid var(--border);
+            border-radius: var(--radius);
+            background: var(--surface);
+            box-shadow: 0 3cqh 8cqh color-mix(in srgb, var(--bg) 68%, transparent);
+          }
+
+          .tc-proof {
+            display: grid;
+            gap: min(3.2cqw, 3.2cqh);
+            will-change: transform, opacity;
+          }
+
+          .tc-rating {
+            display: flex;
+            align-items: center;
+            gap: min(2cqw, 2cqh);
+            width: max-content;
+            color: var(--muted);
+            font-family: var(--font-mono);
+            font-size: min(2.4cqw, 2.4cqh);
+            font-weight: 650;
+            line-height: 1;
+          }
+
+          .tc-stars {
+            position: relative;
+            display: inline-block;
+            color: var(--muted);
+            font-size: min(3.4cqw, 3.4cqh);
+            letter-spacing: 0.18em;
+            line-height: 1;
+            white-space: nowrap;
+          }
+
+          .tc-stars-fill {
+            position: absolute;
+            inset: 0 auto 0 0;
+            width: var(--tc-rating-fill);
+            overflow: hidden;
+            /* The earned portion of the rating is the data. Flat ink over the
+               muted track says it by value, with no second hue. */
+            color: var(--fg);
+            white-space: nowrap;
+          }
+
+          .tc-quote {
+            margin: 0;
+            color: var(--fg);
+            font-family: var(--font-display);
+            font-size: min(5.2cqw, 5.2cqh);
+            font-weight: 650;
+            line-height: 1.23;
+            letter-spacing: -0.025em;
+            text-wrap: balance;
+          }
+
+          .tc-attribution {
+            display: grid;
+            grid-template-columns: auto minmax(0, 1fr);
+            grid-template-rows: auto auto;
+            column-gap: min(2.7cqw, 2.7cqh);
+            row-gap: min(0.65cqw, 0.65cqh);
+            align-items: center;
+          }
+
+          .tc-avatar {
+            grid-row: 1 / 3;
+            display: grid;
+            place-items: center;
+            width: min(8.4cqw, 8.4cqh);
+            aspect-ratio: 1;
+            border: 0.16cqh solid color-mix(in srgb, var(--fg) 20%, transparent);
+            border-radius: 50%;
+            /* Placeholder person: a single (front) avatar circle at L1, with
+               the initials knocked out in the ground colour. */
+            background: color-mix(in srgb, var(--fg) 72%, var(--surface));
+            color: var(--bg);
+            font-family: var(--font-display);
+            font-size: min(2.65cqw, 2.65cqh);
+            font-weight: 780;
+            letter-spacing: 0.03em;
+          }
+
+          .tc-author {
+            min-width: 0;
+            align-self: end;
+            color: var(--fg);
+            font-family: var(--font-display);
+            font-size: min(3.2cqw, 3.2cqh);
+            font-weight: 700;
+            line-height: 1.08;
+          }
+
+          .tc-handle {
+            min-width: 0;
+            align-self: start;
+            color: var(--muted);
+            font-size: min(2.35cqw, 2.35cqh);
+            line-height: 1.15;
+          }
+
+          .tc-attribution-item {
+            will-change: transform, opacity;
+          }
+        </style>
+
+        <div
+          id="testimonial-card-clip"
+          class="tc-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <article class="tc-card" aria-label="Customer testimonial">
+            <div class="tc-proof">
+              <div class="tc-rating" role="img" aria-label="5 out of 5 stars">
+                <span class="tc-stars" aria-hidden="true">
+                  ★★★★★
+                  <span class="tc-stars-fill">★★★★★</span>
+                </span>
+                <span class="tc-rating-value" aria-hidden="true">5 / 5</span>
+              </div>
+              <blockquote class="tc-quote"></blockquote>
+            </div>
+
+            <footer class="tc-attribution">
+              <div class="tc-avatar tc-attribution-item" aria-hidden="true"></div>
+              <div class="tc-author tc-attribution-item"></div>
+              <div class="tc-handle tc-attribution-item"></div>
+            </footer>
+          </article>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var compositionId = "testimonial-card";
+            var card = root.querySelector(".tc-card");
+            var proof = root.querySelector(".tc-proof");
+            var quoteEl = root.querySelector(".tc-quote");
+            var avatarEl = root.querySelector(".tc-avatar");
+            var authorEl = root.querySelector(".tc-author");
+            var handleEl = root.querySelector(".tc-handle");
+            var ratingEl = root.querySelector(".tc-rating");
+            var ratingValueEl = root.querySelector(".tc-rating-value");
+            var attributionItems = root.querySelectorAll(".tc-attribution-item");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            /* INVARIANT: getVariables() is the sole owner of content. Missing
+               values use the declared defaults, while intentional empty
+               strings remain empty. Rating zero is valid and cannot fall
+               through to the default. */
+            var quoteText = vars.quote == null ? "This changed how we ship." : String(vars.quote);
+            var authorText = vars.author == null ? "Ken Tanaka" : String(vars.author);
+            var handleText = vars.handle == null ? "@ken" : String(vars.handle);
+            var rawRating = Number(vars.rating);
+            var rating = Number.isFinite(rawRating) ? Math.max(0, Math.min(5, rawRating)) : 5;
+            var ratingText = Number.isInteger(rating) ? String(rating) : rating.toFixed(1);
+            var initials = authorText
+              .trim()
+              .split(/\s+/)
+              .filter(Boolean)
+              .slice(0, 2)
+              .map(function (part) {
+                return part.charAt(0);
+              })
+              .join("")
+              .toUpperCase();
+
+            quoteEl.textContent = quoteText;
+            authorEl.textContent = authorText;
+            handleEl.textContent = handleText;
+            avatarEl.textContent = initials === "" ? "?" : initials;
+            ratingEl.style.setProperty("--tc-rating-fill", rating * 20 + "%");
+            ratingEl.setAttribute("aria-label", ratingText + " out of 5 stars");
+            ratingValueEl.textContent = ratingText + " / 5";
+
+            /* RETIME RANGE: these constants own the complete lifecycle. The
+               reveal uses --ease-standard's GSAP form, power2.out, with the
+               quote first and three attribution items staggered beneath. */
+            var IN_BASE = 1.5;
+            var OUT_BASE = 0.45;
+            var QUOTE_START_BASE = 0.12;
+            var QUOTE_DURATION_BASE = 0.7;
+            var ATTRIBUTION_START_BASE = 0.82;
+            var ATTRIBUTION_DURATION_BASE = 0.56;
+            var ATTRIBUTION_STAGGER_BASE = 0.06;
+            var durationValue = Number(root.dataset.duration);
+            var duration = Number.isFinite(durationValue) && durationValue > 0 ? durationValue : 4;
+            var scale = duration < IN_BASE + OUT_BASE ? duration / (IN_BASE + OUT_BASE) : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var OUT_START = IN + HOLD;
+
+            var tl = gsap.timeline({ paused: true });
+
+            tl.fromTo(
+              proof,
+              { y: "18%", opacity: 0 },
+              {
+                y: "0%",
+                opacity: 1,
+                duration: QUOTE_DURATION_BASE * scale,
+                ease: "power2.out",
+              },
+              QUOTE_START_BASE * scale,
+            );
+            tl.fromTo(
+              attributionItems,
+              { y: "34%", opacity: 0 },
+              {
+                y: "0%",
+                opacity: 1,
+                duration: ATTRIBUTION_DURATION_BASE * scale,
+                stagger: ATTRIBUTION_STAGGER_BASE * scale,
+                ease: "power2.out",
+              },
+              ATTRIBUTION_START_BASE * scale,
+            );
+            tl.to(card, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/testimonial-proof-card/README.md b/registry/components/testimonial-proof-card/README.md
new file mode 100644
index 0000000000..ea81c9464f
--- /dev/null
+++ b/registry/components/testimonial-proof-card/README.md
@@ -0,0 +1,87 @@
+# testimonial-proof-card
+
+The proof-and-stats quote card: a testimonial reveals per rendered line
+through a soft overflow mask, the byline (avatar disc, mono name and role,
+optional company text mark) fades up as the quote lands, and one emphasis
+substring gets a hand-drawn accent underline (`getTotalLength` dash, the
+marker-highlight law). Then a dead-still hold.
+
+4.5s authored, elastic HOLD, exit `none` by default.
+
+## Files
+
+- `testimonial-proof-card.html`: the mountable sub-composition (install
+  target: `compositions/components/testimonial-proof-card.html`).
+- `registry-item.json`: registry metadata and the variables block.
+- `demo.html`: a 1920x1080 host that mounts the primitive with non-default
+  variables.
+
+## Variables
+
+| id         | type   | default                                             | notes                                                                                                                                                              |
+| ---------- | ------ | --------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `quote`    | string | `We shipped our launch video in a single afternoon` | Wraps inside the card; each rendered line reveals through its own mask.                                                                                            |
+| `name`     | string | `Maya Chen`                                         | Attribution name in mono; also seeds the avatar initials.                                                                                                          |
+| `role`     | string | `Head of Product`                                   | Muted mono line under the name. Empty hides it.                                                                                                                    |
+| `company`  | string | `NORTHWIND`                                         | Wide-tracked mono text mark at the byline end. Empty hides it.                                                                                                     |
+| `emphasis` | string | `single afternoon`                                  | First case-insensitive substring match in `quote`, expanded to whole words, gets the accent underline after the quote lands. Empty or unmatched disables the draw. |
+| `accent`   | enum   | `green`                                             | Underline and glyph ink: green rides `--brand`, blue rides `--accent`, violet rides `--accent-2`.                                                                  |
+| `exit`     | enum   | `none`                                              | `none` holds until the cut; `fade` and `up` depart over the final 0.45s.                                                                                           |
+
+## The avatar slot
+
+The avatar disc is a named slot inside the `<template>`:
+
+```html
+<div class="tq-avatar" data-slot="avatar">
+  <span class="tq-initials"></span>
+</div>
+```
+
+The default child is the initials span (seeded from `name`). To show a
+photo, install the component and **replace the slot's children in your
+installed copy** (the runtime clones only the primitive's own template on
+mount, so slot content lives in the component file, not on the host clip):
+
+```html
+<div class="tq-avatar" data-slot="avatar">
+  <img src="../../assets/maya.jpg" alt="" />
+</div>
+```
+
+Direct `img`/`video` children are sized to cover the disc automatically
+(`object-fit: cover`, clipped to the circle).
+
+## Mount
+
+```html
+<div
+  class="clip"
+  data-composition-id="testimonial-proof-card"
+  data-composition-src="./components/testimonial-proof-card.html"
+  data-variable-values='{"quote":"The render pipeline paid for itself in one week","emphasis":"one week","name":"Ana Ferreira","role":"VP Engineering","company":"LUMENWORKS","accent":"violet"}'
+  data-start="0"
+  data-duration="4.5"
+  data-track-index="0"
+></div>
+```
+
+Elastic root: no `data-width`/`data-height`; it fills whatever box the host
+clip gives it. Timeline registers under the literal `testimonial-proof-card`
+key.
+
+## Notes
+
+- Envelope: card settle 0.5s, per-line rise 0.6s staggered 0.18s, byline
+  0.5s overlapping the last line, underline 0.55s after the quote lands,
+  then HOLD (the only elastic phase), OUT 0.45s only when `exit` is not
+  `none`. Short durations compress every phase together, never timeScale.
+- The underline path is authored wobble in a fixed viewBox stretched with
+  `preserveAspectRatio="none"`; the anisotropic stroke distortion is the
+  hand-swiped nib feel, deliberately kept (no `non-scaling-stroke`, no
+  `pathLength`).
+- Line splitting measures the rendered wrap once at mount; the emphasis
+  phrase is one nowrap token so the underline never breaks across lines.
+- Deterministic: no randomness, both dash endpoints explicit, seek-safe in
+  either direction. Sync point `underline-landed` fires at 1.6s at the
+  default two-line quote.
diff --git a/registry/components/testimonial-proof-card/demo.html b/registry/components/testimonial-proof-card/demo.html
new file mode 100644
index 0000000000..490f7f7c17
--- /dev/null
+++ b/registry/components/testimonial-proof-card/demo.html
@@ -0,0 +1,90 @@
+<!doctype html>
+<!--
+  testimonial-proof-card demo. This standalone composition mounts the
+  primitive through data-composition-src. Non-default quote, attribution,
+  emphasis, and accent values prove the variable path while the primitive
+  remains elastic to its host.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Testimonial Proof Card Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #0b0c0e);
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --muted: #94a3b8;
+        --surface: #14171c;
+        --border: #343a46;
+        --brand: #71f5a7;
+        --accent: #61a8ff;
+        --accent-2: #c5a3ff;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(
+          ellipse at 50% 42%,
+          var(--bg, #171a20) 0%,
+          var(--bg, #0b0c0e) 74%
+        );
+      }
+
+      .mount-stage {
+        width: 66%;
+        height: 72%;
+        left: 17%;
+        top: 14%;
+        container-type: size;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="testimonial-proof-card-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4.5"
+      data-fps="30"
+    >
+      <div
+        id="testimonial-proof-card-mount"
+        class="mount-stage clip"
+        data-composition-id="testimonial-proof-card"
+        data-composition-src="./testimonial-proof-card.html"
+        data-variable-values='{"quote":"The render pipeline paid for itself in one week","emphasis":"one week","name":"Ana Ferreira","role":"VP Engineering","company":"LUMENWORKS","accent":"violet"}'
+        data-start="0"
+        data-duration="4.5"
+        data-track-index="0"
+        data-width="1267"
+        data-height="778"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["testimonial-proof-card-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/testimonial-proof-card/registry-item.json b/registry/components/testimonial-proof-card/registry-item.json
new file mode 100644
index 0000000000..1425e22c81
--- /dev/null
+++ b/registry/components/testimonial-proof-card/registry-item.json
@@ -0,0 +1,88 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "testimonial-proof-card",
+  "type": "hyperframes:component",
+  "title": "Testimonial Proof Card",
+  "description": "A quote card whose testimonial reveals per-line through a soft mask, with an avatar disc (initials default, image slot), mono name and role, an optional company text mark, and one emphasis substring underlined in accent ink after the quote lands.",
+  "tags": ["motion-primitive", "proof", "testimonial", "quote", "social-proof", "deterministic"],
+  "jobs": ["prove"],
+  "family": "proof-stats",
+  "profile": "testimonial",
+  "evidence": "Wave J2 J2-8 spec: proof-and-stats quote card with per-line masked reveal and accent emphasis underline",
+  "syncPoints": [{ "id": "underline-landed", "phase": "in", "offset": 1.6 }],
+  "files": [
+    {
+      "path": "testimonial-proof-card.html",
+      "target": "compositions/components/testimonial-proof-card.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "quote",
+      "type": "string",
+      "role": "content",
+      "label": "Quote",
+      "description": "The testimonial line. Wraps inside the card; each rendered line reveals through its own mask.",
+      "default": "We shipped our launch video in a single afternoon"
+    },
+    {
+      "id": "name",
+      "type": "string",
+      "role": "content",
+      "label": "Name",
+      "description": "Attribution name in mono. Also seeds the avatar initials.",
+      "default": "Maya Chen"
+    },
+    {
+      "id": "role",
+      "type": "string",
+      "role": "content",
+      "label": "Role",
+      "description": "Attribution role in muted mono. Empty hides the line.",
+      "default": "Head of Product"
+    },
+    {
+      "id": "company",
+      "type": "string",
+      "role": "content",
+      "label": "Company",
+      "description": "Company mark as wide-tracked mono text at the byline end. Empty hides it.",
+      "default": "NORTHWIND"
+    },
+    {
+      "id": "emphasis",
+      "type": "string",
+      "role": "content",
+      "label": "Emphasis",
+      "description": "First case-insensitive substring match in quote, expanded to whole words, gets the accent underline. Empty disables the draw.",
+      "default": "single afternoon"
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Underline and glyph ink from the contract token map.",
+      "default": "green",
+      "options": [
+        { "value": "green", "label": "Green" },
+        { "value": "blue", "label": "Blue" },
+        { "value": "violet", "label": "Violet" }
+      ]
+    },
+    {
+      "id": "exit",
+      "type": "enum",
+      "role": "timing",
+      "label": "Exit",
+      "description": "Optional departure. Default none: the card holds until the frame cuts.",
+      "default": "none",
+      "options": [
+        { "value": "none", "label": "None" },
+        { "value": "fade", "label": "Fade" },
+        { "value": "up", "label": "Up" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/testimonial-proof-card/testimonial-proof-card.html b/registry/components/testimonial-proof-card/testimonial-proof-card.html
new file mode 100644
index 0000000000..e6a1d0d5d8
--- /dev/null
+++ b/registry/components/testimonial-proof-card/testimonial-proof-card.html
@@ -0,0 +1,495 @@
+<!doctype html>
+<!--
+  testimonial-proof-card: HyperFrames video primitive (proof-stats / testimonial)
+
+  A quote card: the quote reveals per measured line through a soft overflow
+  mask, an avatar disc (initials by default, an image via the avatar slot),
+  name and role in mono, an optional company mark as wide-tracked text; one
+  emphasis substring gets an accent underline drawn hand-style after the
+  quote lands (getTotalLength dash, the marker-highlight law). Dead-still
+  hold: nothing breathes, nothing loops.
+
+  Variables:
+    quote (string): the testimonial line. Wraps inside the card; each
+      rendered line reveals through its own mask.
+    name (string): attribution name (mono). Also seeds the avatar initials.
+    role (string): attribution role (mono, muted). Empty hides the line.
+    company (string): company mark as wide-tracked mono text at the byline
+      end. Empty hides it.
+    emphasis (string): first case-insensitive substring match inside quote,
+      expanded to whole words, gets the accent underline. Empty or unmatched
+      disables the draw.
+    accent (green | blue | violet): underline and glyph ink via the contract
+      token map (green --brand, blue --accent, violet --accent-2).
+    exit (none | fade | up, default none): frame roots own transitions;
+      holds end films.
+
+  Envelope, fixed IN and OUT with elastic HOLD only (never time-scaled):
+    CARD_BASE  = 0.50s  card surface settles up
+    LINE_BASE  = 0.60s  per-line rise through the mask, 0.18s stagger
+    BYLINE     = 0.50s  avatar + attribution fade up, overlapping quote end
+    DRAW_BASE  = 0.55s  underline draws after the last line lands
+    HOLD       = max(0, D - phases), completely still
+    OUT_BASE   = 0s for exit none, otherwise 0.45s
+    If D is shorter than the fixed phases, every phase compresses together.
+
+  Slot (before-after-wipe convention): the avatar disc is a named slot,
+  <div class="tq-avatar" data-slot="avatar">. Its default child is the
+  initials span; replace the slot's children in your installed copy with an
+  <img> to show a photo (sized to cover the disc automatically).
+
+  Mount contract: the runtime clones only this template. #root fills the
+  host box, establishes the container query basis, has no data-width or
+  data-height, and registers one paused timeline under the literal
+  testimonial-proof-card key.
+-->
+<html
+  lang="en"
+  data-composition-id="testimonial-proof-card"
+  data-composition-duration="4.5"
+  data-composition-variables='[
+    { "id": "quote", "type": "string", "role": "content", "label": "Quote", "description": "The testimonial line. Wraps inside the card; each rendered line reveals through its own mask.", "default": "We shipped our launch video in a single afternoon" },
+    { "id": "name", "type": "string", "role": "content", "label": "Name", "description": "Attribution name in mono. Also seeds the avatar initials.", "default": "Maya Chen" },
+    { "id": "role", "type": "string", "role": "content", "label": "Role", "description": "Attribution role in muted mono. Empty hides the line.", "default": "Head of Product" },
+    { "id": "company", "type": "string", "role": "content", "label": "Company", "description": "Company mark as wide-tracked mono text at the byline end. Empty hides it.", "default": "NORTHWIND" },
+    { "id": "emphasis", "type": "string", "role": "content", "label": "Emphasis", "description": "First case-insensitive substring match in quote, expanded to whole words, gets the accent underline. Empty disables the draw.", "default": "single afternoon" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Underline and glyph ink from the contract token map.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the card holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Testimonial Proof Card</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="testimonial-proof-card" data-duration="4.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            display: grid;
+            place-items: center;
+            background: var(--bg, #0b0c0e);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .tq-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+          }
+
+          .tq-card {
+            width: min(76cqw, 150cqh);
+            padding: 6cqmin 7cqmin;
+            border-radius: var(--radius, 24px);
+            border: 1px solid color-mix(in srgb, var(--border, #343a46) 60%, transparent);
+            background: color-mix(in srgb, var(--surface, #14171c) 88%, transparent);
+            will-change: transform, opacity;
+          }
+
+          .tq-glyph {
+            font-size: 9cqmin;
+            line-height: 0.6;
+            font-weight: 600;
+            color: var(--tq-accent, var(--brand, #71f5a7));
+            margin-bottom: 2.4cqmin;
+          }
+
+          .tq-quote {
+            margin: 0;
+            font-size: var(--tq-font-size, 5cqmin);
+            font-weight: 600;
+            line-height: 1.28;
+            letter-spacing: -0.02em;
+            text-wrap: balance;
+          }
+
+          /* Soft per-line mask. Negative margins cancel the padding so the
+             expanded clip box (room for descenders and the underline ink
+             below the baseline) never shifts layout. */
+          .tq-line-mask {
+            overflow: hidden;
+            padding: 0.12em 0.24em 0.3em;
+            margin: -0.12em -0.24em -0.3em;
+          }
+
+          .tq-line {
+            will-change: transform, opacity;
+          }
+
+          .tq-em {
+            position: relative;
+            display: inline-block;
+            white-space: nowrap;
+          }
+
+          .tq-em-text {
+            position: relative;
+            z-index: 1;
+          }
+
+          /* Underline box below the emphasized words; explicit width/height
+             (svg is replaced), preserveAspectRatio="none" stretches the
+             authored path so the stroke keeps its hand-swiped nib weight. */
+          .tq-mark {
+            position: absolute;
+            left: -2%;
+            bottom: -0.14em;
+            width: 104%;
+            height: 0.24em;
+            overflow: visible;
+            z-index: 2;
+          }
+
+          .tq-byline {
+            display: flex;
+            align-items: center;
+            gap: 3cqmin;
+            margin-top: 5cqmin;
+            will-change: transform, opacity;
+          }
+
+          .tq-avatar {
+            width: 10cqmin;
+            height: 10cqmin;
+            flex: none;
+            border-radius: 50%;
+            overflow: hidden;
+            display: grid;
+            place-items: center;
+            border: 1px solid color-mix(in srgb, var(--border, #343a46) 70%, transparent);
+            background: color-mix(in srgb, var(--tq-accent, #71f5a7) 16%, var(--surface, #14171c));
+          }
+
+          .tq-avatar img,
+          .tq-avatar video {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+          }
+
+          .tq-initials {
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            font-size: 3.4cqmin;
+            font-weight: 600;
+            letter-spacing: 0.08em;
+            color: var(--fg, #f8fafc);
+          }
+
+          .tq-person {
+            display: grid;
+            gap: 0.8cqmin;
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+          }
+
+          .tq-name {
+            font-size: 2.9cqmin;
+            font-weight: 600;
+            letter-spacing: 0.02em;
+          }
+
+          .tq-role {
+            font-size: 2.4cqmin;
+            color: var(--muted, #94a3b8);
+          }
+
+          .tq-company {
+            margin-left: auto;
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            font-size: 2.3cqmin;
+            letter-spacing: 0.3em;
+            text-transform: uppercase;
+            color: var(--muted, #94a3b8);
+          }
+        </style>
+
+        <div
+          id="testimonial-proof-card-clip"
+          class="tq-clip clip"
+          data-start="0"
+          data-duration="4.5"
+          data-track-index="0"
+        >
+          <figure class="tq-card" style="margin: 0">
+            <div class="tq-glyph" aria-hidden="true">&#8220;</div>
+            <blockquote class="tq-quote" style="margin: 0"></blockquote>
+            <figcaption class="tq-byline">
+              <div class="tq-avatar" data-slot="avatar">
+                <span class="tq-initials"></span>
+              </div>
+              <div class="tq-person">
+                <span class="tq-name"></span>
+                <span class="tq-role"></span>
+              </div>
+              <span class="tq-company"></span>
+            </figcaption>
+          </figure>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            // Literal key: the flattening step strips data-composition-id off
+            // the mounted root, so reading it back would register "null".
+            var compositionId = "testimonial-proof-card";
+            var card = root.querySelector(".tq-card");
+            var quoteEl = root.querySelector(".tq-quote");
+            var bylineEl = root.querySelector(".tq-byline");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            function str(value, fallback) {
+              return (value == null ? fallback : String(value)).trim().replace(/\s+/g, " ");
+            }
+            var quote = str(vars.quote, "We shipped our launch video in a single afternoon");
+            var name = str(vars.name, "Maya Chen");
+            var role = str(vars.role, "Head of Product");
+            var company = str(vars.company, "NORTHWIND");
+            var emphasis = str(vars.emphasis, "single afternoon");
+
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            root.style.setProperty("--tq-accent", accentColors[accent]);
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            // Byline content. Empty strings hide their element.
+            root.querySelector(".tq-name").textContent = name;
+            var roleEl = root.querySelector(".tq-role");
+            if (role) roleEl.textContent = role;
+            else roleEl.setAttribute("hidden", "");
+            var companyEl = root.querySelector(".tq-company");
+            if (company) companyEl.textContent = company;
+            else companyEl.setAttribute("hidden", "");
+
+            // Avatar initials: only when the default initials span is still
+            // in the slot (a user-supplied img replaces the slot children).
+            var initialsEl = root.querySelector(".tq-avatar .tq-initials");
+            if (initialsEl) {
+              var parts = name.split(" ").filter(Boolean);
+              var initials = parts
+                .slice(0, 2)
+                .map(function (part) {
+                  return Array.from(part)[0].toUpperCase();
+                })
+                .join("");
+              initialsEl.textContent = initials;
+            }
+
+            // Emphasis match expanded to whole words so the quote tokenizes
+            // cleanly into word spans (the underline never splits a word).
+            var matchStart = -1;
+            var matchEnd = -1;
+            if (emphasis.length > 0) {
+              var index = quote.toLowerCase().indexOf(emphasis.toLowerCase());
+              if (index >= 0) {
+                matchStart = quote.lastIndexOf(" ", index) + 1;
+                matchEnd = quote.indexOf(" ", index + emphasis.length);
+                if (matchEnd < 0) matchEnd = quote.length;
+              }
+            }
+
+            // Deterministic fit: font size rides 1/sqrt(chars) so the quote
+            // lands around two to three lines at any card width.
+            var characters = Math.max(1, Array.from(quote).length);
+            var fitted = Math.max(3.8, Math.min(7.2, 46 / Math.sqrt(characters)));
+            root.style.setProperty("--tq-font-size", fitted.toFixed(3) + "cqmin");
+
+            // Tokenize into inline-block word spans (emphasis is one nowrap
+            // token), measure wrapped lines, then rebuild one mask per line.
+            var tokens = [];
+            function pushWords(text) {
+              text.split(" ").forEach(function (wordText) {
+                if (!wordText) return;
+                var span = document.createElement("span");
+                span.style.display = "inline-block";
+                span.textContent = wordText;
+                tokens.push(span);
+              });
+            }
+            var pathEl = null;
+            var emEl = null;
+            if (matchStart >= 0) {
+              pushWords(quote.slice(0, matchStart));
+              emEl = document.createElement("span");
+              emEl.className = "tq-em";
+              var svgNS = "http://www.w3.org/2000/svg";
+              var svg = document.createElementNS(svgNS, "svg");
+              svg.setAttribute("class", "tq-mark");
+              svg.setAttribute("viewBox", "0 0 100 12");
+              svg.setAttribute("preserveAspectRatio", "none");
+              svg.setAttribute("aria-hidden", "true");
+              pathEl = document.createElementNS(svgNS, "path");
+              // Authored wobble, marker-highlight underline law: dash reveal
+              // from getTotalLength, never pathLength, never
+              // non-scaling-stroke; the viewBox stretch is the nib feel.
+              pathEl.setAttribute("d", "M 2 7 C 20 4.5, 46 8.5, 66 6 C 80 4.5, 92 7.5, 98 5.5");
+              pathEl.setAttribute("fill", "none");
+              pathEl.setAttribute("stroke-width", "4.5");
+              pathEl.setAttribute("stroke-linecap", "round");
+              pathEl.setAttribute("stroke-linejoin", "round");
+              // style.stroke, not the presentation attribute: var() only
+              // resolves as a CSS value.
+              pathEl.style.stroke = accentColors[accent];
+              svg.appendChild(pathEl);
+              var emText = document.createElement("span");
+              emText.className = "tq-em-text";
+              emText.textContent = quote.slice(matchStart, matchEnd);
+              emEl.appendChild(svg);
+              emEl.appendChild(emText);
+              tokens.push(emEl);
+              pushWords(quote.slice(matchEnd));
+            } else {
+              pushWords(quote);
+            }
+            tokens.forEach(function (token, i) {
+              if (i > 0) quoteEl.appendChild(document.createTextNode(" "));
+              quoteEl.appendChild(token);
+            });
+            quoteEl.setAttribute("aria-label", quote);
+
+            // Group tokens by rendered row, then rebuild per-line masks.
+            var rows = [];
+            var lastTop = null;
+            tokens.forEach(function (token) {
+              var top = token.offsetTop;
+              if (lastTop === null || Math.abs(top - lastTop) > 2) {
+                rows.push([]);
+                lastTop = top;
+              }
+              rows[rows.length - 1].push(token);
+            });
+            quoteEl.textContent = "";
+            var lineEls = rows.map(function (row) {
+              var mask = document.createElement("div");
+              mask.className = "tq-line-mask";
+              var line = document.createElement("div");
+              line.className = "tq-line";
+              row.forEach(function (token, i) {
+                if (i > 0) line.appendChild(document.createTextNode(" "));
+                line.appendChild(token);
+              });
+              mask.appendChild(line);
+              quoteEl.appendChild(mask);
+              return line;
+            });
+
+            // RETIME RANGE: fixed phases; HOLD is the only elastic span.
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4.5"));
+            var CARD_BASE = 0.5;
+            var LINE_BASE = 0.6;
+            var STAG_BASE = 0.18;
+            var LINES_AT_BASE = 0.15;
+            var BYLINE_BASE = 0.5;
+            var DRAW_BASE = 0.55;
+            var OUT_BASE = exit === "none" ? 0 : 0.45;
+            var quoteEndBase =
+              LINES_AT_BASE + Math.max(0, lineEls.length - 1) * STAG_BASE + LINE_BASE;
+            var bylineAtBase = Math.max(0, quoteEndBase - 0.15);
+            var drawAtBase = quoteEndBase + 0.1;
+            var inEndBase = Math.max(
+              CARD_BASE,
+              bylineAtBase + BYLINE_BASE,
+              pathEl ? drawAtBase + DRAW_BASE : 0,
+            );
+            var s = duration < inEndBase + OUT_BASE ? duration / (inEndBase + OUT_BASE) : 1;
+            var OUT = OUT_BASE * s;
+            var OUT_START = duration - OUT;
+
+            gsap.set(card, { opacity: 0, y: "4cqh" });
+            gsap.set(lineEls, { yPercent: 130, opacity: 0 });
+            gsap.set(bylineEl, { opacity: 0, y: "2.5cqh" });
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: the card surface settles up.
+            tl.fromTo(
+              card,
+              { opacity: 0, y: "4cqh" },
+              { opacity: 1, y: "0cqh", duration: CARD_BASE * s, ease: "power3.out" },
+              0,
+            );
+
+            // Quote lines rise through their soft masks, top to bottom.
+            lineEls.forEach(function (line, i) {
+              tl.fromTo(
+                line,
+                { yPercent: 130, opacity: 0 },
+                {
+                  yPercent: 0,
+                  opacity: 1,
+                  duration: LINE_BASE * s,
+                  ease: "power3.out",
+                },
+                (LINES_AT_BASE + i * STAG_BASE) * s,
+              );
+            });
+
+            // Byline fades up, overlapping the last line's landing.
+            tl.fromTo(
+              bylineEl,
+              { opacity: 0, y: "2.5cqh" },
+              { opacity: 1, y: "0cqh", duration: BYLINE_BASE * s, ease: "power3.out" },
+              bylineAtBase * s,
+            );
+
+            // DRAW: the underline after the quote lands; both dash endpoints
+            // explicit so any seek is correct without playing through. At
+            // dashoffset == length the round cap still paints a dot at the
+            // path start, so the ink is opacity 0 until the exact cue frame.
+            if (pathEl) {
+              var length = pathEl.getTotalLength();
+              pathEl.style.strokeDasharray = String(length);
+              gsap.set(pathEl, { strokeDashoffset: length, opacity: 0 });
+              tl.set(pathEl, { opacity: 1 }, drawAtBase * s);
+              tl.fromTo(
+                pathEl,
+                { strokeDashoffset: length },
+                { strokeDashoffset: 0, duration: DRAW_BASE * s, ease: "power2.inOut" },
+                drawAtBase * s,
+              );
+            }
+
+            // HOLD: dead still.
+
+            // OUT: optional departure; exit none holds until the frame cuts.
+            if (exit === "fade") {
+              tl.to(card, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "up") {
+              tl.to(card, { opacity: 0, y: "-6cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/text-shimmer/demo.html b/registry/components/text-shimmer/demo.html
new file mode 100644
index 0000000000..6cc72e54c2
--- /dev/null
+++ b/registry/components/text-shimmer/demo.html
@@ -0,0 +1,94 @@
+<!doctype html>
+<!--
+  text-shimmer demo. This standalone composition mounts text-shimmer.html
+  through data-composition-src. Non-default values prove that text, accent,
+  and sweep_at flow through the mount while the primitive follows its host.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Text Shimmer Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #0b0c0e);
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --muted: #94a3b8;
+        --surface: #15171b;
+        --border: #343840;
+        --brand: #22c55e;
+        --accent: #38bdf8;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-body: Inter, system-ui, sans-serif;
+        --radius: 3cqmin;
+        --space-3: 4cqmin;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(
+          ellipse at 50% 45%,
+          var(--bg, #181b21) 0%,
+          var(--bg, #0b0c0e) 72%
+        );
+      }
+
+      .mount-card {
+        width: 52%;
+        height: 34%;
+        left: 24%;
+        top: 33%;
+        container-type: size;
+        overflow: hidden;
+        border: 1px solid color-mix(in srgb, var(--border, #94a3b8) 22%, transparent);
+        border-radius: 30px;
+        background: var(--surface, #15171b);
+        box-shadow: 0 42px 100px color-mix(in srgb, var(--bg, #000000) 48%, transparent);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="text-shimmer-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="3"
+      data-fps="30"
+    >
+      <div
+        id="text-shimmer-mount"
+        class="mount-card clip"
+        data-composition-id="text-shimmer"
+        data-composition-src="./text-shimmer.html"
+        data-variable-values='{"text":"Pure momentum","accent":"blue","sweep_at":0.8}'
+        data-start="0"
+        data-duration="3"
+        data-track-index="0"
+        data-width="998"
+        data-height="367"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["text-shimmer-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/text-shimmer/registry-item.json b/registry/components/text-shimmer/registry-item.json
new file mode 100644
index 0000000000..aede35791f
--- /dev/null
+++ b/registry/components/text-shimmer/registry-item.json
@@ -0,0 +1,54 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "text-shimmer",
+  "type": "hyperframes:component",
+  "title": "Text Shimmer",
+  "description": "A static headline receives one clean specular gradient sweep through its glyphs, then returns to its ordinary text color.",
+  "tags": ["motion-primitive", "text-effects", "shimmer", "specular", "emphasis"],
+  "jobs": ["emphasize"],
+  "family": "text-effects",
+  "profile": "drift",
+  "evidence": "design-inspiration/INDEX.md and viral-micro-interactions.md, animated text shimmer by jhey Tan",
+  "files": [
+    {
+      "path": "text-shimmer.html",
+      "target": "compositions/components/text-shimmer.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "text",
+      "type": "string",
+      "role": "content",
+      "label": "Headline",
+      "description": "Text receiving the single shimmer pass.",
+      "default": "Effortless"
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Hue of the specular shimmer band.",
+      "default": "green",
+      "options": [
+        { "value": "green", "label": "Green" },
+        { "value": "blue", "label": "Blue" },
+        { "value": "violet", "label": "Violet" }
+      ]
+    },
+    {
+      "id": "sweep_at",
+      "type": "number",
+      "role": "timing",
+      "label": "Sweep start",
+      "description": "Requested start time for the shimmer sweep.",
+      "default": 1.2,
+      "min": 0.2,
+      "max": 2,
+      "step": 0.1,
+      "unit": "s"
+    }
+  ]
+}
diff --git a/registry/components/text-shimmer/text-shimmer.html b/registry/components/text-shimmer/text-shimmer.html
new file mode 100644
index 0000000000..6501d0584c
--- /dev/null
+++ b/registry/components/text-shimmer/text-shimmer.html
@@ -0,0 +1,178 @@
+<!doctype html>
+<!--
+  text-shimmer: HyperFrames video primitive (text effects / drift / emphasize)
+
+  Concept: a headline remains fixed while one narrow specular band crosses
+  its glyphs. The text is clean before and after the pass. There is no
+  entrance, exit, pulse, scale, or supporting decoration.
+
+  Evidence: design-inspiration/INDEX.md and viral-micro-interactions.md,
+  animated text shimmer by jhey Tan, adapted from an infinite CSS loop into
+  one deterministic, seek-driven video beat.
+
+  Variables:
+    - text (string, default "Effortless"): headline copy.
+    - accent (green | blue | violet, default green): shimmer hue.
+    - sweep_at (number, 0.2 to 2 seconds, default 1.2): requested sweep start.
+
+  Envelope: IN includes clean stillness until sweep_at, then one fixed 0.9s
+  sweep. If the mounted duration is too short, the sweep starts earlier and
+  compresses only when it cannot fit. HOLD is elastic and keeps the clean end
+  state alive with an off-glyph drift. OUT is intentionally zero because the
+  treatment returns to ordinary text rather than dismissing it.
+
+  Mount contract: everything renderable lives inside the template. #root is
+  elastic, fills the host box, establishes the container query basis, and has
+  no data-width or data-height. The paused GSAP timeline registers under the
+  hardcoded text-shimmer key.
+-->
+<html
+  lang="en"
+  data-composition-id="text-shimmer"
+  data-composition-duration="3"
+  data-composition-variables='[
+    { "id": "text", "type": "string", "role": "content", "label": "Headline", "description": "Text receiving the single shimmer pass.", "default": "Effortless" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Hue of the specular shimmer band.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "sweep_at", "type": "number", "role": "timing", "label": "Sweep start", "description": "Requested start time for the shimmer sweep.", "default": 1.2, "min": 0.2, "max": 2, "step": 0.1, "unit": "s" }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Text Shimmer</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="text-shimmer" data-duration="3" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            background: var(--bg, transparent);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .ts-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+            padding: var(--space-3, 4cqmin);
+            background: var(--surface, transparent);
+          }
+
+          .ts-headline {
+            --ts-base: var(--fg, #f8fafc);
+            --ts-accent: var(--brand, #22c55e);
+            display: block;
+            max-width: 90cqw;
+            color: transparent;
+            font-size: clamp(28px, 16cqmin, 176px);
+            font-weight: 780;
+            line-height: 0.96;
+            letter-spacing: -0.055em;
+            overflow-wrap: anywhere;
+            text-align: center;
+            background-image: linear-gradient(
+              110deg,
+              var(--ts-base) 0%,
+              var(--ts-base) 40%,
+              color-mix(in srgb, var(--ts-accent) 58%, var(--fg, white)) 47%,
+              var(--fg, white) 50%,
+              color-mix(in srgb, var(--ts-accent) 72%, var(--fg, white)) 53%,
+              var(--ts-base) 60%,
+              var(--ts-base) 100%
+            );
+            background-position: 100% 50%;
+            background-repeat: no-repeat;
+            background-size: 300% 100%;
+            background-clip: text;
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            will-change: background-position;
+          }
+        </style>
+
+        <div
+          id="text-shimmer-clip"
+          class="ts-clip clip"
+          data-start="0"
+          data-duration="3"
+          data-track-index="0"
+        >
+          <span class="ts-headline"></span>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var headline = root.querySelector(".ts-headline");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var text = vars.text == null ? "Effortless" : String(vars.text);
+            var accent = vars.accent === "blue" || vars.accent === "violet" ? vars.accent : "green";
+            var accentTokens = {
+              green: "var(--brand, #22c55e)",
+              blue: "var(--accent, #38bdf8)",
+              violet: "var(--accent-2, #a78bfa)",
+            };
+            var accentColor = accentTokens[accent];
+            var sweepAtValue = vars.sweep_at;
+            var sweepAt =
+              typeof sweepAtValue === "number" && Number.isFinite(sweepAtValue)
+                ? Math.max(0.2, Math.min(2, sweepAtValue))
+                : 1.2;
+
+            headline.textContent = text;
+            headline.style.setProperty("--ts-accent", accentColor);
+
+            var SWEEP_BASE = 0.9;
+            var durationValue = parseFloat(root.dataset.duration || "3");
+            var duration = Number.isFinite(durationValue) ? Math.max(0.001, durationValue) : 3;
+            var SWEEP = Math.min(SWEEP_BASE, duration);
+            var SWEEP_START = Math.min(sweepAt, Math.max(0, duration - SWEEP));
+            var IN = SWEEP_START + SWEEP;
+            var HOLD = Math.max(0, duration - IN);
+
+            var tl = gsap.timeline({ paused: true });
+            tl.fromTo(
+              headline,
+              { backgroundPosition: "100% 50%" },
+              { backgroundPosition: "0% 50%", duration: SWEEP, ease: "sine.inOut" },
+              SWEEP_START,
+            );
+
+            if (HOLD > 0) {
+              tl.to(
+                headline,
+                { backgroundPosition: "4% 50%", duration: HOLD, ease: "sine.inOut" },
+                IN,
+              );
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["text-shimmer"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/text-stagger/demo.html b/registry/components/text-stagger/demo.html
new file mode 100644
index 0000000000..2309d4395a
--- /dev/null
+++ b/registry/components/text-stagger/demo.html
@@ -0,0 +1,108 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Text Stagger - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #fafafa;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        gap: 28px;
+        /* ponytail: scale on non-GSAP wrapper; text was ~7% frame height, now fills ~55% */
+        transform: scale(2.6);
+        transform-origin: center center;
+      }
+      .demo-label {
+        font-size: 11px;
+        font-weight: 500;
+        letter-spacing: 0.12em;
+        text-transform: uppercase;
+        color: #a1a1aa;
+      }
+      .hf-transition-text-stagger {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.24em;
+        color: #18181b;
+        font:
+          900 74px/0.95 Inter,
+          system-ui,
+          sans-serif;
+        letter-spacing: -0.045em;
+      }
+      .hf-transition-text-stagger span {
+        display: inline-block;
+        background: linear-gradient(90deg, #18181b, #18181b, #71717a, #18181b);
+        background-size: 240% 100%;
+        -webkit-background-clip: text;
+        background-clip: text;
+        color: transparent;
+        will-change: transform, opacity, filter, background-position;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="text-stagger-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="demo-label">text-stagger</div>
+        <div class="hf-transition-text-stagger">
+          <span>Build</span>
+          <span>motion</span>
+          <span>systems</span>
+          <span>fast</span>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        tl.fromTo(
+          ".hf-transition-text-stagger span",
+          { opacity: 0, y: 48, filter: "blur(14px)" },
+          {
+            opacity: 1,
+            y: 0,
+            filter: "blur(0px)",
+            duration: 0.54,
+            stagger: 0.09,
+            ease: "power3.out",
+          },
+          0.35,
+        );
+        tl.to(
+          ".hf-transition-text-stagger span",
+          { backgroundPosition: "100% 0%", duration: 0.72, stagger: 0.04, ease: "power2.inOut" },
+          1.05,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["text-stagger-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/text-stagger/registry-item.json b/registry/components/text-stagger/registry-item.json
new file mode 100644
index 0000000000..71e0c91ad6
--- /dev/null
+++ b/registry/components/text-stagger/registry-item.json
@@ -0,0 +1,80 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "text-stagger",
+  "type": "hyperframes:component",
+  "title": "Text Stagger",
+  "description": "A transitions.dev-inspired text stagger primitive with enter, shimmer, and exit-ready words",
+  "tags": ["video-primitive", "transition-primitive", "transitions-dev-port", "text", "stagger"],
+  "files": [
+    {
+      "path": "text-stagger.html",
+      "target": "compositions/components/text-stagger.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "text",
+      "type": "string",
+      "role": "content",
+      "label": "Text",
+      "description": "Headline copy. Every whitespace-separated word becomes one staggered span.",
+      "default": "Build motion systems fast"
+    },
+    {
+      "id": "size",
+      "type": "number",
+      "role": "layout",
+      "label": "Size",
+      "description": "Type size of every word in pixels, clamped to 24-160. Line height stays proportional.",
+      "default": 74,
+      "min": 24,
+      "max": 160,
+      "step": 1,
+      "unit": "px"
+    },
+    {
+      "id": "tone",
+      "type": "enum",
+      "role": "style",
+      "label": "Tone",
+      "description": "Base word colour: ink for light frames, paper for dark ones.",
+      "default": "ink",
+      "options": [
+        {
+          "value": "ink",
+          "label": "Ink"
+        },
+        {
+          "value": "paper",
+          "label": "Paper"
+        }
+      ]
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Colour of the shimmer the second timeline step sweeps across the words.",
+      "default": "blue",
+      "options": [
+        {
+          "value": "blue",
+          "label": "Blue"
+        },
+        {
+          "value": "green",
+          "label": "Green"
+        },
+        {
+          "value": "violet",
+          "label": "Violet"
+        }
+      ]
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/text-stagger.png"
+  }
+}
diff --git a/registry/components/text-stagger/text-stagger.html b/registry/components/text-stagger/text-stagger.html
new file mode 100644
index 0000000000..60f5f6ff35
--- /dev/null
+++ b/registry/components/text-stagger/text-stagger.html
@@ -0,0 +1,132 @@
+<!--
+  Text Stagger - transitions.dev-inspired primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Use the timeline
+  integration note at the bottom as the starting point for deterministic GSAP
+  animation.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result into the markup or
+  into a custom property the CSS above consumes. The timeline recipe below is
+  untouched by them: it keeps driving the same rise, blur and shimmer sweep.
+
+    - text (string, default "Build motion systems fast"): the headline. It is
+      split on whitespace and every word becomes its own span, so the word
+      count decides how many steps the stagger has. Blank falls back to the
+      default sentence.
+    - size (number, default 74, clamped to 24-160 px): type size of every
+      word. Line height stays proportional, so the block grows and shrinks as
+      one. A missing or non-numeric value falls back to 74.
+    - tone (ink | paper, default ink): base word colour. ink is near-black for
+      light frames, paper near-white for dark ones. It paints both the resting
+      words and the two dark stops of the shimmer gradient.
+    - accent (blue | green | violet, default blue): the shimmer colour that the
+      second timeline step sweeps across the words. It sits outside the visible
+      band while the words rest, so it only shows once that sweep runs.
+
+  On every default the result is identical to the original: four near-black
+  74px words that rise through a blur and take one sky-blue shimmer pass.
+-->
+
+<div
+  class="hf-transition-text-stagger"
+  data-composition-variables='[
+    {"id": "text", "type": "string", "role": "content", "label": "Text", "description": "Headline copy. Every whitespace-separated word becomes one staggered span.", "default": "Build motion systems fast"},
+    {"id": "size", "type": "number", "role": "layout", "label": "Size", "description": "Type size of every word in pixels, clamped to 24-160. Line height stays proportional.", "default": 74, "min": 24, "max": 160, "step": 1, "unit": "px"},
+    {"id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Base word colour: ink for light frames, paper for dark ones.", "default": "ink", "options": [{"value": "ink", "label": "Ink"}, {"value": "paper", "label": "Paper"}]},
+    {"id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Colour of the shimmer the second timeline step sweeps across the words.", "default": "blue", "options": [{"value": "blue", "label": "Blue"}, {"value": "green", "label": "Green"}, {"value": "violet", "label": "Violet"}]}
+  ]'
+>
+  <span>Build</span>
+  <span>motion</span>
+  <span>systems</span>
+  <span>fast</span>
+</div>
+
+<style>
+  .hf-transition-text-stagger {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.24em;
+    color: var(--hf-stagger-ink, #111827);
+    font:
+      900 74px/0.95 Inter,
+      system-ui,
+      sans-serif;
+    font-size: var(--hf-stagger-size, 74px);
+    letter-spacing: -0.045em;
+  }
+  .hf-transition-text-stagger span {
+    display: inline-block;
+    background: linear-gradient(
+      90deg,
+      var(--hf-stagger-ink, #111827),
+      var(--hf-stagger-ink, #111827),
+      var(--hf-stagger-accent, #38bdf8),
+      var(--hf-stagger-ink, #111827)
+    );
+    background-size: 240% 100%;
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    will-change: transform, opacity, filter, background-position;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    var DEFAULT_TEXT = "Build motion systems fast";
+    var tones = { ink: "#111827", paper: "#f8fafc" };
+    var accents = { blue: "#38bdf8", green: "#34d399", violet: "#a78bfa" };
+
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var words = String(vars.text == null ? DEFAULT_TEXT : vars.text)
+      .split(/\s+/)
+      .filter(function (word) {
+        return word.length > 0;
+      });
+    if (words.length === 0) words = DEFAULT_TEXT.split(" ");
+
+    // Number(null) is 0, so null has to miss the numeric branch and clamp back
+    // to the declared default instead of snapping to the minimum.
+    var size = typeof vars.size === "number" ? vars.size : parseFloat(vars.size);
+    if (!isFinite(size)) size = 74;
+    size = Math.min(160, Math.max(24, size));
+
+    var tone = tones[pick(tones, vars.tone, "ink")];
+    var accent = accents[pick(accents, vars.accent, "blue")];
+
+    var roots = document.querySelectorAll(".hf-transition-text-stagger");
+    for (var i = 0; i < roots.length; i += 1) {
+      var root = roots[i];
+      root.style.setProperty("--hf-stagger-size", size + "px");
+      root.style.setProperty("--hf-stagger-ink", tone);
+      root.style.setProperty("--hf-stagger-accent", accent);
+      // Rebuilt without whitespace between the spans: whitespace-only text
+      // between flex items is not rendered, so this matches the markup above.
+      root.textContent = "";
+      for (var w = 0; w < words.length; w += 1) {
+        var span = document.createElement("span");
+        span.textContent = words[w];
+        root.appendChild(span);
+      }
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-transition-text-stagger span', { opacity: 0, y: 48, filter: 'blur(14px)' }, { opacity: 1, y: 0, filter: 'blur(0px)', duration: 0.54, stagger: 0.09, ease: 'power3.out' }, 0.35);
+  tl.to('.hf-transition-text-stagger span', { backgroundPosition: '100% 0%', duration: 0.72, stagger: 0.04, ease: 'power2.inOut' }, 1.05);
+-->
diff --git a/registry/components/text-state-swap/demo.html b/registry/components/text-state-swap/demo.html
new file mode 100644
index 0000000000..6051fc9bc7
--- /dev/null
+++ b/registry/components/text-state-swap/demo.html
@@ -0,0 +1,173 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Text State Swap - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f5f5f4;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      /* ponytail: scale on non-GSAP wrapper, safe to use transform here */
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        transform: scale(2.6);
+        transform-origin: center center;
+      }
+      .demo-card {
+        background: #ffffff;
+        border: 1px solid #e4e4e7;
+        border-radius: 14px;
+        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.08);
+        padding: 32px 40px;
+        display: flex;
+        flex-direction: column;
+        gap: 20px;
+        width: 340px;
+      }
+      .demo-card-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+      .demo-card-title {
+        font-size: 13px;
+        font-weight: 600;
+        color: #71717a;
+        letter-spacing: 0.02em;
+        text-transform: uppercase;
+      }
+      .demo-card-dot {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background: #22c55e;
+      }
+      .demo-card-body {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+      }
+      .demo-card-line {
+        height: 10px;
+        border-radius: 5px;
+        background: #f4f4f5;
+      }
+      .demo-card-line.w-full {
+        width: 100%;
+      }
+      .demo-card-line.w-3q {
+        width: 75%;
+      }
+      .demo-card-line.w-half {
+        width: 50%;
+      }
+      .demo-card-footer {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        padding-top: 4px;
+        border-top: 1px solid #f4f4f5;
+      }
+      .hf-transition-text-state-swap {
+        position: relative;
+        width: 140px;
+        height: 22px;
+        overflow: hidden;
+        color: #18181b;
+        font:
+          700 14px/1 Inter,
+          system-ui,
+          sans-serif;
+      }
+      .hf-transition-text-state-swap span {
+        position: absolute;
+        left: 0;
+        top: 0;
+        filter: blur(var(--hf-text-blur, 0px));
+        transform: translateY(var(--hf-text-y, 0px));
+        will-change: transform, filter, opacity;
+      }
+      .hf-transition-text-state-swap .to {
+        opacity: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="text-state-swap-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="demo-card">
+          <div class="demo-card-header">
+            <span class="demo-card-title">Draft</span>
+            <span class="demo-card-dot"></span>
+          </div>
+          <div class="demo-card-body">
+            <div class="demo-card-line w-full"></div>
+            <div class="demo-card-line w-3q"></div>
+            <div class="demo-card-line w-full"></div>
+            <div class="demo-card-line w-half"></div>
+          </div>
+          <div class="demo-card-footer">
+            <div class="hf-transition-text-state-swap">
+              <span class="from">Saving draft…</span><span class="to">Saved</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.to(
+          ".hf-transition-text-state-swap .from",
+          {
+            opacity: 0,
+            "--hf-text-y": "-18px",
+            "--hf-text-blur": "8px",
+            duration: 0.18,
+            ease: "power2.in",
+          },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-transition-text-state-swap .to",
+          { opacity: 0, "--hf-text-y": "18px", "--hf-text-blur": "8px" },
+          {
+            opacity: 1,
+            "--hf-text-y": "0px",
+            "--hf-text-blur": "0px",
+            duration: 0.26,
+            ease: "power2.out",
+          },
+          startTime + 0.12,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["text-state-swap-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/text-state-swap/registry-item.json b/registry/components/text-state-swap/registry-item.json
new file mode 100644
index 0000000000..3be7612b16
--- /dev/null
+++ b/registry/components/text-state-swap/registry-item.json
@@ -0,0 +1,80 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "text-state-swap",
+  "type": "hyperframes:component",
+  "title": "Text State Swap",
+  "description": "A text state swap primitive with outgoing blur and incoming lift",
+  "tags": ["video-primitive", "transition-primitive", "transitions-dev-port", "text", "swap"],
+  "files": [
+    {
+      "path": "text-state-swap.html",
+      "target": "compositions/components/text-state-swap.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "from-text",
+      "type": "string",
+      "role": "content",
+      "label": "From text",
+      "description": "The outgoing label, on screen before the swap.",
+      "default": "Saving draft"
+    },
+    {
+      "id": "to-text",
+      "type": "string",
+      "role": "content",
+      "label": "To text",
+      "description": "The incoming label, on screen after the swap. It rests hidden until the timeline reveals it.",
+      "default": "Saved"
+    },
+    {
+      "id": "distance",
+      "type": "enum",
+      "role": "motion",
+      "label": "Distance",
+      "description": "Scales the vertical offset the timeline drives, so each label covers a shorter or longer run in the same time.",
+      "default": "standard",
+      "options": [
+        {
+          "value": "close",
+          "label": "Close"
+        },
+        {
+          "value": "standard",
+          "label": "Standard"
+        },
+        {
+          "value": "far",
+          "label": "Far"
+        }
+      ]
+    },
+    {
+      "id": "tone",
+      "type": "enum",
+      "role": "style",
+      "label": "Tone",
+      "description": "Label colour: ink for light frames, paper for dark ones, accent rides --brand.",
+      "default": "ink",
+      "options": [
+        {
+          "value": "ink",
+          "label": "Ink"
+        },
+        {
+          "value": "paper",
+          "label": "Paper"
+        },
+        {
+          "value": "accent",
+          "label": "Accent"
+        }
+      ]
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/text-state-swap.png"
+  }
+}
diff --git a/registry/components/text-state-swap/text-state-swap.html b/registry/components/text-state-swap/text-state-swap.html
new file mode 100644
index 0000000000..7bea605895
--- /dev/null
+++ b/registry/components/text-state-swap/text-state-swap.html
@@ -0,0 +1,113 @@
+<!--
+  Text State Swap - transitions.dev-inspired primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Use the timeline
+  integration note at the bottom as the starting point for deterministic GSAP
+  animation.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result into the markup or
+  into a custom property the CSS above consumes. The timeline recipe below is
+  untouched by them: it keeps driving one offset and one blur, and these decide
+  what that offset means on screen.
+
+    - from-text (string, default "Saving draft"): the outgoing label, on screen
+      before the swap. Blank falls back to the default.
+    - to-text (string, default "Saved"): the incoming label, on screen after the
+      swap. It rests at zero opacity, so it only shows once the timeline reveals
+      it. Blank falls back to the default.
+    - distance (close | standard | far, default standard): scales the vertical
+      offset the timeline drives, so the outgoing label leaves further and the
+      incoming label starts further below, in the same time. Both labels rest at
+      their settled position on every setting, so this only changes the middle
+      of the swap.
+    - tone (ink | paper | accent, default ink): label colour for both states.
+      ink is near-black for light frames, paper near-white for dark ones, accent
+      rides --brand.
+
+  On every default the result is identical to the original: near-black
+  "Saving draft" lifts 18px through an 8px blur while "Saved" rises into place.
+-->
+
+<div
+  class="hf-transition-text-state-swap"
+  data-composition-variables='[
+    {"id": "from-text", "type": "string", "role": "content", "label": "From text", "description": "The outgoing label, on screen before the swap.", "default": "Saving draft"},
+    {"id": "to-text", "type": "string", "role": "content", "label": "To text", "description": "The incoming label, on screen after the swap. It rests hidden until the timeline reveals it.", "default": "Saved"},
+    {"id": "distance", "type": "enum", "role": "motion", "label": "Distance", "description": "Scales the vertical offset the timeline drives, so each label covers a shorter or longer run in the same time.", "default": "standard", "options": [{"value": "close", "label": "Close"}, {"value": "standard", "label": "Standard"}, {"value": "far", "label": "Far"}]},
+    {"id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Label colour: ink for light frames, paper for dark ones, accent rides --brand.", "default": "ink", "options": [{"value": "ink", "label": "Ink"}, {"value": "paper", "label": "Paper"}, {"value": "accent", "label": "Accent"}]}
+  ]'
+>
+  <span class="from">Saving draft</span><span class="to">Saved</span>
+</div>
+
+<style>
+  .hf-transition-text-state-swap {
+    position: relative;
+    width: 250px;
+    height: 36px;
+    color: var(--hf-text-color, #18181b);
+    font:
+      900 28px/1 Inter,
+      system-ui,
+      sans-serif;
+  }
+  .hf-transition-text-state-swap span {
+    position: absolute;
+    left: 0;
+    top: 0;
+    filter: blur(var(--hf-text-blur, 0px));
+    transform: translateY(calc(var(--hf-text-y, 0px) * var(--hf-text-reach, 1)));
+    will-change: transform, filter, opacity;
+  }
+  .hf-transition-text-state-swap .to {
+    opacity: 0;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    var reaches = { close: 0.5, standard: 1, far: 1.85 };
+    var tones = {
+      ink: "#18181b",
+      paper: "#fafafa",
+      accent: "var(--brand, #34d399)",
+    };
+
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    function text(value, fallback) {
+      var resolved = value == null ? "" : String(value).trim();
+      return resolved.length > 0 ? resolved : fallback;
+    }
+
+    var fromText = text(vars["from-text"], "Saving draft");
+    var toText = text(vars["to-text"], "Saved");
+    var reach = reaches[pick(reaches, vars.distance, "standard")];
+    var tone = tones[pick(tones, vars.tone, "ink")];
+
+    var roots = document.querySelectorAll(".hf-transition-text-state-swap");
+    for (var i = 0; i < roots.length; i += 1) {
+      var root = roots[i];
+      root.style.setProperty("--hf-text-reach", String(reach));
+      root.style.setProperty("--hf-text-color", tone);
+      root.querySelector(".from").textContent = fromText;
+      root.querySelector(".to").textContent = toText;
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.to('.hf-transition-text-state-swap .from', { opacity: 0, '--hf-text-y': '-18px', '--hf-text-blur': '8px', duration: 0.18, ease: 'power2.in' }, startTime); tl.fromTo('.hf-transition-text-state-swap .to', { opacity: 0, '--hf-text-y': '18px', '--hf-text-blur': '8px' }, { opacity: 1, '--hf-text-y': '0px', '--hf-text-blur': '0px', duration: 0.26, ease: 'power2.out' }, startTime + 0.12);
+-->
diff --git a/registry/components/three-orbiting-cards/demo.html b/registry/components/three-orbiting-cards/demo.html
new file mode 100644
index 0000000000..54f9a8cd98
--- /dev/null
+++ b/registry/components/three-orbiting-cards/demo.html
@@ -0,0 +1,148 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Three Orbiting Cards - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-advanced-three-orbiting-cards {
+        color: #111827;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-advanced-three-orbiting-cards {
+        position: relative;
+        width: 760px;
+        height: 430px;
+        border-radius: 30px;
+        overflow: hidden;
+        background: #050816;
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+        /* ponytail: zoom scales the whole card without touching GSAP-animated state */
+        zoom: 1.65;
+      }
+      .hf-advanced-three-orbiting-cards canvas {
+        display: block;
+        width: 100%;
+        height: 100%;
+      }
+      .hf-advanced-three-orbiting-cards .label {
+        position: absolute;
+        left: 28px;
+        bottom: 26px;
+        color: #fff;
+      }
+      .hf-advanced-three-orbiting-cards h3 {
+        margin: 0;
+        font-size: 34px;
+        letter-spacing: -0.05em;
+      }
+      .hf-advanced-three-orbiting-cards p {
+        margin: 6px 0 0;
+        font-size: 15px;
+        color: rgba(255, 255, 255, 0.72);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="three-orbiting-cards-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="hf-advanced-three-orbiting-cards">
+        <canvas></canvas>
+        <div class="label">
+          <h3>Three Orbiting Cards</h3>
+          <p>
+            A Three.js-powered orbit scene driven by a paused GSAP timeline for deterministic
+            renders.
+          </p>
+        </div>
+      </div>
+    </div>
+    <script type="module">
+      import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.184.0/build/three.module.js";
+
+      const host = document.querySelector(".hf-advanced-three-orbiting-cards");
+      const canvas = host.querySelector("canvas");
+      const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });
+      renderer.setPixelRatio(1);
+      renderer.setSize(760, 430, false);
+      renderer.setClearColor(0x050816, 1);
+
+      const scene = new THREE.Scene();
+      const camera = new THREE.PerspectiveCamera(36, 760 / 430, 0.1, 100);
+      camera.position.set(0, 0, 7);
+
+      const group = new THREE.Group();
+      scene.add(group);
+      const material = new THREE.MeshStandardMaterial({
+        color: 0x60a5fa,
+        metalness: 0.18,
+        roughness: 0.38,
+      });
+      const accent = new THREE.MeshStandardMaterial({
+        color: 0xa78bfa,
+        metalness: 0.12,
+        roughness: 0.44,
+      });
+      const geometry = new THREE.BoxGeometry(1.2, 1.2, 0.08);
+      for (let i = 0; i < 9; i++) {
+        const mesh = new THREE.Mesh(geometry, i % 2 ? accent : material);
+        const angle = (i / 9) * Math.PI * 2;
+        const radius = 2.15;
+        mesh.position.set(
+          Math.cos(angle) * radius,
+          Math.sin(angle) * radius * 0.55,
+          Math.sin(angle) * 0.7,
+        );
+        mesh.rotation.z = angle;
+        group.add(mesh);
+      }
+      scene.add(new THREE.AmbientLight(0xffffff, 1.2));
+      const light = new THREE.DirectionalLight(0xffffff, 2.2);
+      light.position.set(2, 3, 4);
+      scene.add(light);
+
+      const state = { progress: 0 };
+      function render() {
+        const t = state.progress;
+        group.rotation.y = t * Math.PI * 2;
+        group.rotation.x = Math.sin(t * Math.PI * 2) * 0.22;
+        camera.position.z = 6.4 - Math.sin(t * Math.PI) * 0.55;
+        renderer.render(scene, camera);
+      }
+      render();
+
+      window.__hfThreeRender_three_orbiting_cards = { state, render };
+
+      const tl = window.gsap.timeline({ paused: true });
+      tl.to(state, { progress: 1, duration: 4, ease: "none", onUpdate: render }, 0.5);
+      tl.set({}, {}, 5);
+      window.__timelines = window.__timelines || {};
+      window.__timelines["three-orbiting-cards-demo"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/registry/components/three-orbiting-cards/registry-item.json b/registry/components/three-orbiting-cards/registry-item.json
new file mode 100644
index 0000000000..cd402ccc24
--- /dev/null
+++ b/registry/components/three-orbiting-cards/registry-item.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "three-orbiting-cards",
+  "type": "hyperframes:component",
+  "title": "Three Orbiting Cards",
+  "description": "A Three.js-powered orbit scene driven by a paused GSAP timeline for deterministic renders.",
+  "tags": ["video-primitive", "three-js", "webgl", "hyperframes-native"],
+  "files": [
+    {
+      "path": "three-orbiting-cards.html",
+      "target": "compositions/components/three-orbiting-cards.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/three-orbiting-cards.png"
+  }
+}
diff --git a/registry/components/three-orbiting-cards/three-orbiting-cards.html b/registry/components/three-orbiting-cards/three-orbiting-cards.html
new file mode 100644
index 0000000000..6d0da4011b
--- /dev/null
+++ b/registry/components/three-orbiting-cards/three-orbiting-cards.html
@@ -0,0 +1,117 @@
+<!--
+  Three Orbiting Cards - advanced HyperFrames primitive.
+
+  This is intentionally seekable: drive it from a paused GSAP timeline.
+  MotionPath examples require GSAP MotionPathPlugin. Three.js examples expose
+  a render(progress) adapter instead of a free-running requestAnimationFrame loop.
+-->
+
+<div class="hf-advanced-three-orbiting-cards">
+  <canvas></canvas>
+  <div class="label">
+    <h3>Three Orbiting Cards</h3>
+    <p>
+      A Three.js-powered orbit scene driven by a paused GSAP timeline for deterministic renders.
+    </p>
+  </div>
+</div>
+
+<style>
+  .hf-advanced-three-orbiting-cards {
+    color: #111827;
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-advanced-three-orbiting-cards {
+    position: relative;
+    width: 760px;
+    height: 430px;
+    border-radius: 30px;
+    overflow: hidden;
+    background: #050816;
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+  }
+  .hf-advanced-three-orbiting-cards canvas {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+  .hf-advanced-three-orbiting-cards .label {
+    position: absolute;
+    left: 28px;
+    bottom: 26px;
+    color: #fff;
+  }
+  .hf-advanced-three-orbiting-cards h3 {
+    margin: 0;
+    font-size: 34px;
+    letter-spacing: -0.05em;
+  }
+  .hf-advanced-three-orbiting-cards p {
+    margin: 6px 0 0;
+    color: rgba(255, 255, 255, 0.62);
+  }
+</style>
+
+<!--
+  Timeline integration:
+  const startTime = 0;
+  if (window.__hfThreeRender_three_orbiting_cards) { tl.to(window.__hfThreeRender_three_orbiting_cards.state, { progress: 1, duration: 4, ease: 'none', onUpdate: window.__hfThreeRender_three_orbiting_cards.render }, startTime); }
+-->
+
+<!-- Optional Three.js adapter for demos. In production, copy this once and dispose renderer resources when the host composition is removed. -->
+<script type="module">
+  import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.184.0/build/three.module.js";
+
+  const host = document.querySelector(".hf-advanced-three-orbiting-cards");
+  const canvas = host.querySelector("canvas");
+  const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });
+  renderer.setPixelRatio(1);
+  renderer.setSize(760, 430, false);
+  renderer.setClearColor(0x050816, 1);
+
+  const scene = new THREE.Scene();
+  const camera = new THREE.PerspectiveCamera(36, 760 / 430, 0.1, 100);
+  camera.position.set(0, 0, 7);
+
+  const group = new THREE.Group();
+  scene.add(group);
+  const material = new THREE.MeshStandardMaterial({
+    color: 0x60a5fa,
+    metalness: 0.18,
+    roughness: 0.38,
+  });
+  const accent = new THREE.MeshStandardMaterial({
+    color: 0xa78bfa,
+    metalness: 0.12,
+    roughness: 0.44,
+  });
+  const geometry = new THREE.BoxGeometry(1.2, 1.2, 0.08);
+  for (let i = 0; i < 9; i++) {
+    const mesh = new THREE.Mesh(geometry, i % 2 ? accent : material);
+    const angle = (i / 9) * Math.PI * 2;
+    const radius = 2.15;
+    mesh.position.set(
+      Math.cos(angle) * radius,
+      Math.sin(angle) * radius * 0.55,
+      Math.sin(angle) * 0.7,
+    );
+    mesh.rotation.z = angle;
+    group.add(mesh);
+  }
+  scene.add(new THREE.AmbientLight(0xffffff, 1.2));
+  const light = new THREE.DirectionalLight(0xffffff, 2.2);
+  light.position.set(2, 3, 4);
+  scene.add(light);
+
+  const state = { progress: 0 };
+  function render() {
+    const t = state.progress;
+    group.rotation.y = t * Math.PI * 2;
+    group.rotation.x = Math.sin(t * Math.PI * 2) * 0.22;
+    camera.position.z = 6.4 - Math.sin(t * Math.PI) * 0.55;
+    renderer.render(scene, camera);
+  }
+  render();
+
+  window.__hfThreeRender_three_orbiting_cards = { state, render };
+</script>
diff --git a/registry/components/ticker-takeover/demo.html b/registry/components/ticker-takeover/demo.html
new file mode 100644
index 0000000000..95c80898c8
--- /dev/null
+++ b/registry/components/ticker-takeover/demo.html
@@ -0,0 +1,85 @@
+<!doctype html>
+<!--
+  ticker-takeover demo. This standalone composition mounts the primitive in
+  a sized host and supplies non-default options, final word, and accent.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Ticker Takeover Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0b0c0e;
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --muted: #94a3b8;
+        --surface: #17191f;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-body: Inter, system-ui, sans-serif;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 45%, #171a21 0%, #0b0c0e 72%);
+      }
+
+      .mount-card {
+        width: 70%;
+        height: 64%;
+        left: 15%;
+        top: 18%;
+        container-type: size;
+        overflow: hidden;
+        border: 1px solid rgba(148, 163, 184, 0.18);
+        border-radius: 32px;
+        background: rgba(17, 19, 24, 0.82);
+        box-shadow: 0 48px 120px rgba(0, 0, 0, 0.45);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="ticker-takeover-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4.5"
+      data-fps="30"
+    >
+      <div
+        id="ticker-takeover-mount"
+        class="mount-card clip"
+        data-composition-id="ticker-takeover"
+        data-composition-src="./ticker-takeover.html"
+        data-variable-values='{"options":"build,shape,launch,repeat,scale","final_word":"launch","accent":"violet"}'
+        data-start="0"
+        data-duration="4.5"
+        data-track-index="0"
+        data-width="1344"
+        data-height="691"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["ticker-takeover-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/ticker-takeover/registry-item.json b/registry/components/ticker-takeover/registry-item.json
new file mode 100644
index 0000000000..7d8179ab28
--- /dev/null
+++ b/registry/components/ticker-takeover/registry-item.json
@@ -0,0 +1,50 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "ticker-takeover",
+  "type": "hyperframes:component",
+  "title": "Ticker Takeover",
+  "description": "A mono ticker rolls through options, locks on a final word with an accent flash, and promotes it into a full-frame headline.",
+  "tags": ["motion-primitive", "typography", "ticker", "slot-machine", "headline", "reveal"],
+  "jobs": ["reveal"],
+  "family": "typography",
+  "profile": "kinetic",
+  "evidence": "Wave F U7 ticker-takeover specification",
+  "files": [
+    {
+      "path": "ticker-takeover.html",
+      "target": "compositions/components/ticker-takeover.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "options",
+      "type": "string",
+      "role": "content",
+      "label": "Options",
+      "description": "Comma-separated words shown by the ticker.",
+      "default": "faster,smarter,together,everywhere"
+    },
+    {
+      "id": "final_word",
+      "type": "string",
+      "role": "content",
+      "label": "Final word",
+      "description": "Word the ticker locks on and promotes.",
+      "default": "together"
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Color used for the lock flash and promoted word.",
+      "default": "green",
+      "options": [
+        { "value": "green", "label": "Green" },
+        { "value": "blue", "label": "Blue" },
+        { "value": "violet", "label": "Violet" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/ticker-takeover/ticker-takeover.html b/registry/components/ticker-takeover/ticker-takeover.html
new file mode 100644
index 0000000000..d9c171abdd
--- /dev/null
+++ b/registry/components/ticker-takeover/ticker-takeover.html
@@ -0,0 +1,321 @@
+<!doctype html>
+<!--
+  ticker-takeover: a compact ticker rolls through four to six words, locks
+  on the selected word with an accent flash, then promotes that word into
+  a full-frame headline.
+
+  Variables:
+    - options: comma-separated words shown by the ticker.
+    - final_word: the word placed last and promoted.
+    - accent: green, blue, or violet lock color.
+
+  Envelope (fixed IN and OUT, elastic HOLD only):
+    IN_BASE  = 3.15s. Ticker entrance, accelerating roll, decelerating lock,
+               accent flash, and headline promotion.
+    HOLD     = max(0, D - IN - OUT). The promoted word drifts subtly.
+    OUT_BASE = 0.45s. The promoted word fades and rises.
+    If D is shorter than IN_BASE + OUT_BASE, IN and OUT compress together.
+
+  Mount contract: all rendered content lives inside the template. The root
+  fills its host without fixed dimensions, and one paused timeline registers
+  under the hardcoded ticker-takeover key.
+-->
+<html
+  lang="en"
+  data-composition-id="ticker-takeover"
+  data-composition-duration="4.5"
+  data-composition-variables='[
+    { "id": "options", "type": "string", "role": "content", "label": "Options", "description": "Comma-separated words shown by the ticker.", "default": "faster,smarter,together,everywhere" },
+    { "id": "final_word", "type": "string", "role": "content", "label": "Final word", "description": "Word the ticker locks on and promotes.", "default": "together" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Color used for the lock flash and promoted word.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Ticker Takeover</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="ticker-takeover" data-duration="4.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .tt-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+          }
+
+          .tt-ticker {
+            position: absolute;
+            top: 55cqh;
+            left: 12cqw;
+            width: 76cqw;
+            height: 18cqh;
+            display: grid;
+            grid-template-columns: 18cqw 1fr;
+            align-items: center;
+            overflow: hidden;
+            border: 0.12cqw solid color-mix(in srgb, var(--muted, #94a3b8) 38%, transparent);
+            border-radius: 3cqh;
+            background: color-mix(in srgb, var(--surface, #172033) 92%, transparent);
+            box-shadow: 0 3cqh 9cqh color-mix(in srgb, var(--bg, #0b0c0e) 52%, transparent);
+            will-change: transform, opacity;
+          }
+
+          .tt-label {
+            display: grid;
+            place-items: center;
+            height: 12cqh;
+            border-right: 0.12cqw solid color-mix(in srgb, var(--muted, #94a3b8) 30%, transparent);
+            color: var(--muted, #94a3b8);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            font-size: 2.4cqh;
+            font-weight: 700;
+            letter-spacing: 0.18em;
+            text-transform: uppercase;
+          }
+
+          .tt-window {
+            position: relative;
+            height: 12cqh;
+            overflow: hidden;
+          }
+
+          .tt-reel {
+            width: 100%;
+            will-change: transform;
+          }
+
+          .tt-item {
+            display: flex;
+            align-items: center;
+            height: 12cqh;
+            padding: 0 4cqw;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            font-size: 4.2cqh;
+            font-weight: 650;
+            letter-spacing: -0.025em;
+            white-space: nowrap;
+            will-change: transform, color;
+          }
+
+          .tt-flash {
+            position: absolute;
+            inset: 0;
+            background: var(--tt-accent, #22c55e);
+            opacity: 0;
+          }
+
+          .tt-headline {
+            position: absolute;
+            top: 30cqh;
+            left: 7cqw;
+            width: 86cqw;
+            height: 30cqh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            overflow: hidden;
+            color: var(--tt-accent, #22c55e);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: 15cqh;
+            font-weight: 820;
+            line-height: 0.9;
+            letter-spacing: -0.065em;
+            text-align: center;
+            white-space: nowrap;
+            transform-origin: 50% 50%;
+            will-change: transform, opacity;
+          }
+        </style>
+
+        <div
+          id="ticker-takeover-clip"
+          class="tt-clip clip"
+          data-start="0"
+          data-duration="4.5"
+          data-track-index="0"
+        >
+          <div class="tt-ticker">
+            <div class="tt-label">signal</div>
+            <div class="tt-window">
+              <div class="tt-reel"></div>
+            </div>
+            <div class="tt-flash" aria-hidden="true"></div>
+          </div>
+          <div class="tt-headline"></div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var ticker = root.querySelector(".tt-ticker");
+            var reel = root.querySelector(".tt-reel");
+            var flash = root.querySelector(".tt-flash");
+            var headline = root.querySelector(".tt-headline");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var defaultOptions = ["faster", "smarter", "together", "everywhere"];
+            var finalWord = vars.final_word == null ? "together" : String(vars.final_word).trim();
+            if (!finalWord) finalWord = "together";
+
+            var rawOptions = vars.options == null ? defaultOptions.join(",") : String(vars.options);
+            var candidates = rawOptions
+              .split(",")
+              .map(function (word) {
+                return word.trim();
+              })
+              .filter(Boolean);
+            var options = [];
+            var finalKey = finalWord.toLowerCase();
+
+            function addOption(word) {
+              var normalized = word.toLowerCase();
+              var isFinal = normalized === finalKey;
+              var isDuplicate = options.some(function (option) {
+                return option.toLowerCase() === normalized;
+              });
+              if (!isFinal && !isDuplicate && options.length < 5) options.push(word);
+            }
+
+            candidates.forEach(addOption);
+            defaultOptions.forEach(function (word) {
+              if (options.length < 3) addOption(word);
+            });
+            options.push(finalWord);
+
+            options.forEach(function (word) {
+              var item = document.createElement("span");
+              item.className = "tt-item";
+              item.textContent = word;
+              reel.appendChild(item);
+            });
+
+            var finalItem = reel.lastElementChild;
+            var accentColors = {
+              green: "var(--brand, #22c55e)",
+              blue: "var(--accent, #38bdf8)",
+              violet: "var(--accent-2, #a78bfa)",
+            };
+            var accentName = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var accentColor = accentColors[accentName];
+
+            root.style.setProperty("--tt-accent", accentColor);
+            headline.textContent = finalWord;
+
+            var IN_BASE = 3.15;
+            var OUT_BASE = 0.45;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4.5"));
+            var envelopeScale = duration < IN_BASE + OUT_BASE ? duration / (IN_BASE + OUT_BASE) : 1;
+            var IN = IN_BASE * envelopeScale;
+            var OUT = OUT_BASE * envelopeScale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var OUT_START = IN + HOLD;
+
+            var TICKER_IN = 0.35 * envelopeScale;
+            var ROLL_START = 0.32 * envelopeScale;
+            var ACCEL_DURATION = 0.82 * envelopeScale;
+            var DECEL_DURATION = 0.93 * envelopeScale;
+            var LOCK_AT = ROLL_START + ACCEL_DURATION + DECEL_DURATION;
+            var PROMOTE_AT = LOCK_AT + 0.18 * envelopeScale;
+            var PROMOTE_DURATION = Math.max(0.001, IN - PROMOTE_AT);
+            var finalOffset = -(options.length - 1) * 12;
+            var accelOffset = finalOffset * 0.72;
+
+            var tl = gsap.timeline({ paused: true });
+
+            tl.fromTo(
+              ticker,
+              { opacity: 0, scale: 0.97 },
+              { opacity: 1, scale: 1, duration: TICKER_IN, ease: "power2.out" },
+              0,
+            );
+            tl.fromTo(
+              reel,
+              { y: "0cqh" },
+              { y: accelOffset + "cqh", duration: ACCEL_DURATION, ease: "power4.in" },
+              ROLL_START,
+            );
+            tl.to(
+              reel,
+              { y: finalOffset + "cqh", duration: DECEL_DURATION, ease: "power4.out" },
+              ROLL_START + ACCEL_DURATION,
+            );
+            tl.fromTo(
+              finalItem,
+              { scale: 1.14, color: accentColor },
+              { scale: 1, color: accentColor, duration: 0.3 * envelopeScale, ease: "expo.out" },
+              LOCK_AT,
+            );
+            tl.fromTo(
+              flash,
+              { opacity: 0.82 },
+              { opacity: 0, duration: 0.34 * envelopeScale, ease: "power2.out" },
+              LOCK_AT,
+            );
+            tl.fromTo(
+              headline,
+              { opacity: 0, scale: 0.22, y: "20cqh" },
+              {
+                opacity: 1,
+                scale: 1,
+                y: "0cqh",
+                duration: PROMOTE_DURATION,
+                ease: "power3.out",
+              },
+              PROMOTE_AT,
+            );
+            tl.to(
+              ticker,
+              { opacity: 0, scale: 0.96, duration: PROMOTE_DURATION * 0.68, ease: "power2.in" },
+              PROMOTE_AT,
+            );
+
+            if (HOLD > 0) {
+              tl.to(
+                headline,
+                { y: "-0.7cqh", duration: HOLD / 2, ease: "sine.inOut", yoyo: true, repeat: 1 },
+                IN,
+              );
+            }
+
+            tl.to(
+              headline,
+              { opacity: 0, y: "-3cqh", duration: OUT, ease: "power2.in" },
+              OUT_START,
+            );
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["ticker-takeover"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/tilt-card/demo.html b/registry/components/tilt-card/demo.html
new file mode 100644
index 0000000000..9693da1850
--- /dev/null
+++ b/registry/components/tilt-card/demo.html
@@ -0,0 +1,118 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Tilt Card - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #eef2ff;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        min-width: 760px;
+        min-height: 480px;
+        padding: 56px;
+        transform: scale(2.5); /* ponytail: card was ~16% of frame; 2.5× brings it to ~60% */
+      }
+      .hf-transition-tilt-card {
+        position: relative;
+        width: 420px;
+        height: 260px;
+        overflow: hidden;
+        border: 1px solid rgba(255, 255, 255, 0.18);
+        border-radius: 30px;
+        background: linear-gradient(135deg, #18181b, #312e81);
+        color: #ffffff;
+        font-family: Inter, system-ui, sans-serif;
+        transform-style: preserve-3d;
+        box-shadow: 0 32px 90px rgba(49, 46, 129, 0.34);
+      }
+      .hf-transition-tilt-glow {
+        position: absolute;
+        inset: -30%;
+        background: radial-gradient(circle at 30% 20%, rgba(125, 211, 252, 0.5), transparent 36%);
+      }
+      .hf-transition-tilt-content {
+        position: relative;
+        display: grid;
+        align-content: end;
+        gap: 10px;
+        height: 100%;
+        padding: 34px;
+        transform: translateZ(38px);
+      }
+      .hf-transition-tilt-content span {
+        color: #a5b4fc;
+        font-size: 13px;
+        font-weight: 900;
+        letter-spacing: 0.12em;
+        text-transform: uppercase;
+      }
+      .hf-transition-tilt-content strong {
+        max-width: 280px;
+        font-size: 34px;
+        line-height: 0.96;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="tilt-card-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-transition-tilt-card">
+          <div class="hf-transition-tilt-glow"></div>
+          <div class="hf-transition-tilt-content">
+            <span>Primitive</span>
+            <strong>Agent-ready motion</strong>
+          </div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        tl.fromTo(
+          ".hf-transition-tilt-card",
+          { opacity: 0, y: 30, rotateX: 0, rotateY: 0 },
+          { opacity: 1, y: 0, duration: 0.38, ease: "power2.out" },
+          0.3,
+        );
+        tl.to(
+          ".hf-transition-tilt-card",
+          { rotateX: -7, rotateY: 10, duration: 0.72, ease: "power3.inOut" },
+          0.75,
+        );
+        tl.to(
+          ".hf-transition-tilt-glow",
+          { xPercent: 12, yPercent: 10, duration: 0.72, ease: "power3.inOut" },
+          0.75,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["tilt-card-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/tilt-card/registry-item.json b/registry/components/tilt-card/registry-item.json
new file mode 100644
index 0000000000..f5ad8fc52c
--- /dev/null
+++ b/registry/components/tilt-card/registry-item.json
@@ -0,0 +1,80 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "tilt-card",
+  "type": "hyperframes:component",
+  "title": "Tilt Card",
+  "description": "A transitions.dev-inspired tilt card primitive with depth layers and hover-style parallax",
+  "tags": ["video-primitive", "transition-primitive", "transitions-dev-port", "card", "tilt"],
+  "files": [
+    {
+      "path": "tilt-card.html",
+      "target": "compositions/components/tilt-card.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "eyebrow",
+      "type": "string",
+      "role": "content",
+      "label": "Eyebrow",
+      "description": "Small uppercase kicker above the headline.",
+      "default": "Primitive"
+    },
+    {
+      "id": "headline",
+      "type": "string",
+      "role": "content",
+      "label": "Headline",
+      "description": "Large card headline.",
+      "default": "Agent-ready motion"
+    },
+    {
+      "id": "glow",
+      "type": "enum",
+      "role": "motion",
+      "label": "Glow",
+      "description": "How far the corner glow reaches past the card edges, which sets both its spread at rest and how far the timeline drift carries it.",
+      "default": "standard",
+      "options": [
+        {
+          "value": "tight",
+          "label": "Tight"
+        },
+        {
+          "value": "standard",
+          "label": "Standard"
+        },
+        {
+          "value": "wide",
+          "label": "Wide"
+        }
+      ]
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Colour family of the card gradient, corner glow, eyebrow and drop shadow.",
+      "default": "indigo",
+      "options": [
+        {
+          "value": "indigo",
+          "label": "Indigo"
+        },
+        {
+          "value": "emerald",
+          "label": "Emerald"
+        },
+        {
+          "value": "violet",
+          "label": "Violet"
+        }
+      ]
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/tilt-card.png"
+  }
+}
diff --git a/registry/components/tilt-card/tilt-card.html b/registry/components/tilt-card/tilt-card.html
new file mode 100644
index 0000000000..8308889572
--- /dev/null
+++ b/registry/components/tilt-card/tilt-card.html
@@ -0,0 +1,156 @@
+<!--
+  Tilt Card - transitions.dev-inspired primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Use the timeline
+  integration note at the bottom as the starting point for deterministic GSAP
+  animation.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result into the markup or
+  into a custom property the CSS above consumes. The timeline recipe below is
+  untouched by them: it keeps driving the same rise and the same tilt angles.
+
+    - eyebrow (string, default "Primitive"): the small uppercase kicker above
+      the headline. Blank falls back to the default.
+    - headline (string, default "Agent-ready motion"): the large card
+      headline. Blank falls back to the default.
+    - glow (tight | standard | wide, default standard): how far the corner
+      glow reaches past the card edges. A wider glow spreads more light at
+      rest, and because the timeline drifts it by a percentage of its own box,
+      a wider glow also carries that drift further across the card.
+    - accent (indigo | emerald | violet, default indigo): the colour family of
+      the card, covering the gradient, the corner glow, the eyebrow and the
+      drop shadow together.
+
+  On every default the result is identical to the original: an indigo card with
+  a sky-blue corner glow reaching 30% past every edge.
+-->
+
+<div
+  class="hf-transition-tilt-card"
+  data-composition-variables='[
+    {"id": "eyebrow", "type": "string", "role": "content", "label": "Eyebrow", "description": "Small uppercase kicker above the headline.", "default": "Primitive"},
+    {"id": "headline", "type": "string", "role": "content", "label": "Headline", "description": "Large card headline.", "default": "Agent-ready motion"},
+    {"id": "glow", "type": "enum", "role": "motion", "label": "Glow", "description": "How far the corner glow reaches past the card edges, which sets both its spread at rest and how far the timeline drift carries it.", "default": "standard", "options": [{"value": "tight", "label": "Tight"}, {"value": "standard", "label": "Standard"}, {"value": "wide", "label": "Wide"}]},
+    {"id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Colour family of the card gradient, corner glow, eyebrow and drop shadow.", "default": "indigo", "options": [{"value": "indigo", "label": "Indigo"}, {"value": "emerald", "label": "Emerald"}, {"value": "violet", "label": "Violet"}]}
+  ]'
+>
+  <div class="hf-transition-tilt-glow"></div>
+  <div class="hf-transition-tilt-content">
+    <span>Primitive</span>
+    <strong>Agent-ready motion</strong>
+  </div>
+</div>
+
+<style>
+  .hf-transition-tilt-card {
+    position: relative;
+    width: 420px;
+    height: 260px;
+    overflow: hidden;
+    border: 1px solid rgba(255, 255, 255, 0.18);
+    border-radius: 30px;
+    background: linear-gradient(135deg, #18181b, var(--hf-tilt-accent, #312e81));
+    color: #ffffff;
+    font-family: Inter, system-ui, sans-serif;
+    transform-style: preserve-3d;
+    box-shadow: 0 32px 90px var(--hf-tilt-shadow, rgba(49, 46, 129, 0.34));
+  }
+  .hf-transition-tilt-glow {
+    position: absolute;
+    inset: var(--hf-tilt-glow-inset, -30%);
+    background: radial-gradient(
+      circle at 30% 20%,
+      var(--hf-tilt-glow, rgba(125, 211, 252, 0.5)),
+      transparent 36%
+    );
+  }
+  .hf-transition-tilt-content {
+    position: relative;
+    display: grid;
+    align-content: end;
+    gap: 10px;
+    height: 100%;
+    padding: 34px;
+    transform: translateZ(38px);
+  }
+  .hf-transition-tilt-content span {
+    color: var(--hf-tilt-label, #a5b4fc);
+    font-size: 13px;
+    font-weight: 900;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+  }
+  .hf-transition-tilt-content strong {
+    max-width: 280px;
+    font-size: 34px;
+    line-height: 0.96;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    var insets = { tight: "-18%", standard: "-30%", wide: "-46%" };
+    var accents = {
+      indigo: {
+        accent: "#312e81",
+        glow: "rgba(125, 211, 252, 0.5)",
+        label: "#a5b4fc",
+        shadow: "rgba(49, 46, 129, 0.34)",
+      },
+      emerald: {
+        accent: "#065f46",
+        glow: "rgba(110, 231, 183, 0.5)",
+        label: "#6ee7b7",
+        shadow: "rgba(6, 95, 70, 0.34)",
+      },
+      violet: {
+        accent: "#5b21b6",
+        glow: "rgba(216, 180, 254, 0.5)",
+        label: "#d8b4fe",
+        shadow: "rgba(91, 33, 182, 0.34)",
+      },
+    };
+
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    function text(value, fallback) {
+      var resolved = value == null ? "" : String(value).trim();
+      return resolved.length > 0 ? resolved : fallback;
+    }
+
+    var eyebrow = text(vars.eyebrow, "Primitive");
+    var headline = text(vars.headline, "Agent-ready motion");
+    var inset = insets[pick(insets, vars.glow, "standard")];
+    var accent = accents[pick(accents, vars.accent, "indigo")];
+
+    var roots = document.querySelectorAll(".hf-transition-tilt-card");
+    for (var i = 0; i < roots.length; i += 1) {
+      var root = roots[i];
+      root.style.setProperty("--hf-tilt-glow-inset", inset);
+      root.style.setProperty("--hf-tilt-accent", accent.accent);
+      root.style.setProperty("--hf-tilt-glow", accent.glow);
+      root.style.setProperty("--hf-tilt-label", accent.label);
+      root.style.setProperty("--hf-tilt-shadow", accent.shadow);
+      root.querySelector(".hf-transition-tilt-content span").textContent = eyebrow;
+      root.querySelector(".hf-transition-tilt-content strong").textContent = headline;
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-transition-tilt-card', { opacity: 0, y: 30, rotateX: 0, rotateY: 0 }, { opacity: 1, y: 0, duration: 0.38, ease: 'power2.out' }, 0.3);
+  tl.to('.hf-transition-tilt-card', { rotateX: -7, rotateY: 10, duration: 0.72, ease: 'power3.inOut' }, 0.75);
+  tl.to('.hf-transition-tilt-glow', { xPercent: 12, yPercent: 10, duration: 0.72, ease: 'power3.inOut' }, 0.75);
+-->
diff --git a/registry/components/titlecard-calm/demo.html b/registry/components/titlecard-calm/demo.html
new file mode 100644
index 0000000000..d5397e9958
--- /dev/null
+++ b/registry/components/titlecard-calm/demo.html
@@ -0,0 +1,87 @@
+<!doctype html>
+<!--
+  titlecard-calm demo. This standalone composition mounts titlecard-calm.html
+  through data-composition-src. Non-default copy proves that both variables
+  flow through the mount while the primitive remains sized by its host box.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Titlecard Calm Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0b0c0e;
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f7f7f2;
+        --muted: #aeb6c2;
+        --surface: #111318;
+        --border: #292d35;
+        --font-display: "Helvetica Neue", Helvetica, Arial, sans-serif;
+        --font-body: Inter, system-ui, sans-serif;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(circle at 50% 45%, #12151a 0%, var(--bg) 72%);
+      }
+
+      .mount-card {
+        width: 78%;
+        height: 62%;
+        left: 11%;
+        top: 19%;
+        container-type: size;
+        overflow: hidden;
+        border: 1px solid rgba(247, 247, 242, 0.08);
+        border-radius: 28px;
+        background: var(--surface);
+        box-shadow: 0 36px 90px rgba(0, 0, 0, 0.32);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="titlecard-calm-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="titlecard-calm-mount"
+        class="mount-card clip"
+        data-composition-id="titlecard-calm"
+        data-composition-src="./titlecard-calm.html"
+        data-variable-values='{"headline":"Clarity over noise","kicker":"QUIET CONFIDENCE"}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="1498"
+        data-height="670"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["titlecard-calm-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/titlecard-calm/registry-item.json b/registry/components/titlecard-calm/registry-item.json
new file mode 100644
index 0000000000..8e2aa187dd
--- /dev/null
+++ b/registry/components/titlecard-calm/registry-item.json
@@ -0,0 +1,37 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "titlecard-calm",
+  "type": "hyperframes:component",
+  "title": "Titlecard Calm",
+  "description": "A restrained title card where a mono kicker and generous grotesque headline fade upward, drift almost imperceptibly, and exit cleanly.",
+  "tags": ["motion-primitive", "typography", "title-card", "calm", "orient"],
+  "jobs": ["orient"],
+  "family": "typography",
+  "profile": "calm",
+  "evidence": "Wave F U4 titlecard-calm build contract",
+  "files": [
+    {
+      "path": "titlecard-calm.html",
+      "target": "compositions/components/titlecard-calm.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "headline",
+      "type": "string",
+      "role": "content",
+      "label": "Headline",
+      "description": "Primary title displayed in the card.",
+      "default": "Less, but better"
+    },
+    {
+      "id": "kicker",
+      "type": "string",
+      "role": "content",
+      "label": "Kicker",
+      "description": "Small uppercase label displayed above the headline.",
+      "default": "DESIGN PRINCIPLE"
+    }
+  ]
+}
diff --git a/registry/components/titlecard-calm/titlecard-calm.html b/registry/components/titlecard-calm/titlecard-calm.html
new file mode 100644
index 0000000000..5048bdc880
--- /dev/null
+++ b/registry/components/titlecard-calm/titlecard-calm.html
@@ -0,0 +1,188 @@
+<!doctype html>
+<!--
+  titlecard-calm: HyperFrames video primitive (typography / calm / orient)
+
+  Concept: a restrained title card led by a small mono kicker and a large
+  grotesque headline. The kicker fades and rises first, then the headline
+  follows. Typography and negative space carry the frame.
+
+  Variables:
+    - headline (string, default "Less, but better"): the primary title.
+    - kicker (string, default "DESIGN PRINCIPLE"): the small uppercase label.
+
+  Envelope: fixed IN and OUT with an elastic HOLD only.
+    IN_BASE  = 1.20s. Kicker arrives first, headline follows.
+    HOLD     = max(0, D - IN - OUT). The lockup drifts barely upward.
+    OUT_BASE = 0.55s. The full lockup fades with a small rise.
+  If D is shorter than IN_BASE + OUT_BASE, IN and OUT compress together.
+  Longer mounts stretch HOLD only. The timeline is never time-scaled.
+
+  Mount contract: the runtime clones only this template. #root fills the
+  host box, establishes the container query basis, has no data-width or
+  data-height, and registers one paused timeline under the hardcoded
+  titlecard-calm id.
+-->
+<html
+  lang="en"
+  data-composition-id="titlecard-calm"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "headline", "type": "string", "role": "content", "label": "Headline", "description": "Primary title displayed in the card.", "default": "Less, but better" },
+    { "id": "kicker", "type": "string", "role": "content", "label": "Kicker", "description": "Small uppercase label displayed above the headline.", "default": "DESIGN PRINCIPLE" }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Titlecard Calm</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="titlecard-calm" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f7f7f2);
+            font-family: var(--font-display, "Helvetica Neue", Helvetica, Arial, sans-serif);
+            pointer-events: none;
+          }
+
+          .tc-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+          }
+
+          .tc-lockup {
+            display: flex;
+            width: 78cqw;
+            flex-direction: column;
+            align-items: flex-start;
+            gap: 6cqh;
+            transform-origin: 50% 50%;
+            will-change: transform, opacity;
+          }
+
+          .tc-kicker {
+            display: block;
+            width: 100%;
+            color: var(--muted, #b8c0cc);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            font-size: 3.2cqmin;
+            font-weight: 600;
+            line-height: 1;
+            letter-spacing: 0.18em;
+            text-transform: uppercase;
+            will-change: transform, opacity;
+          }
+
+          .tc-headline {
+            display: block;
+            width: 100%;
+            color: var(--fg, #f7f7f2);
+            font-family: var(--font-display, "Helvetica Neue", Helvetica, Arial, sans-serif);
+            font-size: 17cqmin;
+            font-weight: 600;
+            line-height: 0.94;
+            letter-spacing: -0.055em;
+            overflow-wrap: anywhere;
+            text-wrap: balance;
+            will-change: transform, opacity;
+          }
+        </style>
+
+        <div
+          id="titlecard-calm-clip"
+          class="tc-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="tc-lockup">
+            <span class="tc-kicker"></span>
+            <span class="tc-headline"></span>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var lockup = root.querySelector(".tc-lockup");
+            var kicker = root.querySelector(".tc-kicker");
+            var headline = root.querySelector(".tc-headline");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var headlineText = vars.headline == null ? "Less, but better" : String(vars.headline);
+            var kickerText = vars.kicker == null ? "DESIGN PRINCIPLE" : String(vars.kicker);
+
+            headline.textContent = headlineText;
+            kicker.textContent = kickerText;
+
+            var IN_BASE = 1.2;
+            var OUT_BASE = 0.55;
+            var parsedDuration = Number.parseFloat(root.dataset.duration);
+            var duration = Number.isFinite(parsedDuration) ? Math.max(0.001, parsedDuration) : 4;
+            var totalBase = IN_BASE + OUT_BASE;
+            var phaseScale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * phaseScale;
+            var OUT = OUT_BASE * phaseScale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var HOLD_START = IN;
+            var OUT_START = IN + HOLD;
+            var KICKER_IN = 0.5 * phaseScale;
+            var HEADLINE_AT = 0.28 * phaseScale;
+            var HEADLINE_IN = 0.72 * phaseScale;
+
+            gsap.set(lockup, { opacity: 1, y: "0cqh" });
+
+            var tl = gsap.timeline({ paused: true });
+
+            tl.fromTo(
+              kicker,
+              { opacity: 0, y: "2.2cqh" },
+              { opacity: 1, y: "0cqh", duration: KICKER_IN, ease: "power2.out" },
+              0,
+            );
+            tl.fromTo(
+              headline,
+              { opacity: 0, y: "3.2cqh" },
+              { opacity: 1, y: "0cqh", duration: HEADLINE_IN, ease: "power3.out" },
+              HEADLINE_AT,
+            );
+
+            if (HOLD > 0) {
+              tl.to(lockup, { y: "-0.65cqh", duration: HOLD, ease: "sine.inOut" }, HOLD_START);
+            }
+
+            tl.to(
+              lockup,
+              { opacity: 0, y: "-2.1cqh", duration: OUT, ease: "power2.in" },
+              OUT_START,
+            );
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["titlecard-calm"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/titlecard-lockup/README.md b/registry/components/titlecard-lockup/README.md
new file mode 100644
index 0000000000..ea1d92425a
--- /dev/null
+++ b/registry/components/titlecard-lockup/README.md
@@ -0,0 +1,48 @@
+# titlecard-lockup
+
+The calm breather titlecard (intros and reveals). An optional mono kicker fades up, the wordmark settles dead-center with ONE restrained move (scale 0.96 to 1, smooth ease-out), a hairline rule draws left to right beneath it, a mono label fades in under the rule, then the finished lockup holds truly still. Low motion is the payload: no second development phase, no spring chains, no hold drift. The stillness is the confidence.
+
+## Install
+
+```bash
+npx hyperframes add titlecard-lockup
+```
+
+## Mount
+
+```html
+<div
+  class="clip"
+  data-composition-id="titlecard-lockup"
+  data-composition-src="./components/titlecard-lockup.html"
+  data-variable-values='{"wordmark":"NORTHWIND","label":"SECURE AGENTS PLATFORM","kicker":"MEET","accent":"blue"}'
+  data-start="0"
+  data-duration="4"
+  data-track-index="0"
+></div>
+```
+
+## Variables
+
+| Variable   | Type   | Default                     | Notes                                                                                              |
+| ---------- | ------ | --------------------------- | -------------------------------------------------------------------------------------------------- |
+| `wordmark` | string | `HYPERFRAMES`               | Display wordmark, auto-fitted to one line by character count.                                      |
+| `label`    | string | `WRITE HTML. RENDER VIDEO.` | Mono caption under the rule. Empty string hides it.                                                |
+| `kicker`   | string | `INTRODUCING`               | Small mono label above the wordmark. Empty string hides it (the schedule keeps its beat of quiet). |
+| `rule`     | enum   | `show`                      | `show` or `hide` for the hairline rule and its draw.                                               |
+| `accent`   | enum   | `green`                     | `green` maps to `--brand`, `blue` to `--accent`, `violet` to `--accent-2`. Carried by the rule.    |
+| `exit`     | enum   | `none`                      | `none`, `fade`, or `up`. Frame roots own transitions; holds end films.                             |
+
+## Envelope
+
+- `IN_BASE = 1.80s`: kicker (0 to 0.45s), wordmark settle (0.25 to 1.10s), rule draw (0.90 to 1.45s), label (1.30 to 1.80s).
+- `HOLD = max(0, D - IN - OUT)`: elastic and truly still, no drift, no breath.
+- `OUT_BASE = 0.50s` when `exit` is `fade` or `up`, otherwise `0`.
+- If `D < IN_BASE + OUT_BASE` the phases compress together. The timeline is never time-scaled.
+
+## Contract notes
+
+- Consumes the theme contract tokens at point of use with exact-value fallbacks (`--bg`, `--fg`, `--brand`, `--accent`, `--accent-2`, `--font-display`, `--font-mono`, `--space-2`). The kicker and label ink is derived as `color-mix(in srgb, var(--fg) 62%, var(--bg))` so it stays contrast-safe (>= 4.5:1) on both dark and light hosts.
+- The rule draw measures `getTotalLength()` and dashes in user units (no `pathLength` attribute, no `non-scaling-stroke`).
+- One paused GSAP timeline registered at `window.__timelines["titlecard-lockup"]`; deterministic and seek-safe.
+- Elastic root: no `data-width`/`data-height`, `container-type: size`, `cqmin`-based sizing.
diff --git a/registry/components/titlecard-lockup/demo.html b/registry/components/titlecard-lockup/demo.html
new file mode 100644
index 0000000000..0533a2c7b1
--- /dev/null
+++ b/registry/components/titlecard-lockup/demo.html
@@ -0,0 +1,82 @@
+<!doctype html>
+<!--
+  titlecard-lockup demo. Full-bleed mount on a light editorial backdrop: the
+  NORTH lockup owns the whole 1920x1080 frame, proving the titlecard carries
+  a full-frame open rather than floating as a small strip.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>titlecard-lockup Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #f4f6f9);
+      }
+
+      #root {
+        --bg: #f4f6f9;
+        --fg: #14161b;
+        --surface: #ffffff;
+        --border: #dfe4ec;
+        --brand: #1d4ed8;
+        --accent: #0284c7;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 40%, #ffffff 0%, var(--bg, #f4f6f9) 70%);
+      }
+
+      .mount-stage {
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        container-type: size;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="titlecard-lockup-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="titlecard-lockup-mount"
+        class="mount-stage clip"
+        data-composition-id="titlecard-lockup"
+        data-composition-src="./titlecard-lockup.html"
+        data-variable-values='{"wordmark":"NORTH","label":"SECURE AGENTS PLATFORM","kicker":"MEET","accent":"green"}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="1920"
+        data-height="1080"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["titlecard-lockup-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/titlecard-lockup/registry-item.json b/registry/components/titlecard-lockup/registry-item.json
new file mode 100644
index 0000000000..4d0bffeddd
--- /dev/null
+++ b/registry/components/titlecard-lockup/registry-item.json
@@ -0,0 +1,84 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "titlecard-lockup",
+  "type": "hyperframes:component",
+  "title": "Titlecard Lockup",
+  "description": "The calm breather titlecard: an optional mono kicker fades up, the wordmark settles dead-center with one restrained move, a hairline rule draws left to right, a mono label fades beneath, and the lockup holds truly still.",
+  "tags": ["motion-primitive", "typography", "title-card", "lockup", "breather", "orient"],
+  "jobs": ["orient"],
+  "family": "typography",
+  "profile": "calm",
+  "evidence": "Wave J J1-3 titlecard-lockup specification",
+  "syncPoints": [{ "id": "lockup-settled", "phase": "in", "offset": 1.8 }],
+  "files": [
+    {
+      "path": "titlecard-lockup.html",
+      "target": "compositions/components/titlecard-lockup.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "wordmark",
+      "type": "string",
+      "role": "content",
+      "label": "Wordmark",
+      "description": "Display wordmark that settles dead-center.",
+      "default": "HYPERFRAMES"
+    },
+    {
+      "id": "label",
+      "type": "string",
+      "role": "content",
+      "label": "Label",
+      "description": "Mono caption under the rule. Empty hides it.",
+      "default": "WRITE HTML. RENDER VIDEO."
+    },
+    {
+      "id": "kicker",
+      "type": "string",
+      "role": "content",
+      "label": "Kicker",
+      "description": "Small mono label above the wordmark. Empty hides it.",
+      "default": "INTRODUCING"
+    },
+    {
+      "id": "rule",
+      "type": "enum",
+      "role": "style",
+      "label": "Rule",
+      "description": "Hairline rule drawn left to right under the wordmark.",
+      "default": "show",
+      "options": [
+        { "value": "show", "label": "Show" },
+        { "value": "hide", "label": "Hide" }
+      ]
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Contract color carried by the hairline rule.",
+      "default": "green",
+      "options": [
+        { "value": "green", "label": "Green" },
+        { "value": "blue", "label": "Blue" },
+        { "value": "violet", "label": "Violet" }
+      ]
+    },
+    {
+      "id": "exit",
+      "type": "enum",
+      "role": "style",
+      "label": "Exit",
+      "description": "Optional departure. Frame roots own transitions, so none is the default.",
+      "default": "none",
+      "options": [
+        { "value": "none", "label": "None" },
+        { "value": "fade", "label": "Fade" },
+        { "value": "up", "label": "Up" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/titlecard-lockup/titlecard-lockup.html b/registry/components/titlecard-lockup/titlecard-lockup.html
new file mode 100644
index 0000000000..2fc8ecbb82
--- /dev/null
+++ b/registry/components/titlecard-lockup/titlecard-lockup.html
@@ -0,0 +1,321 @@
+<!doctype html>
+<!--
+  titlecard-lockup: HyperFrames video primitive (intros and reveals / breather)
+
+  The calm breather titlecard. An optional mono kicker fades up, the wordmark
+  settles dead-center with ONE restrained move (scale 0.96 to 1, smooth
+  ease-out), a hairline rule draws left to right beneath it, a mono label
+  fades in under the rule, then the lockup holds truly still. Low motion is
+  the payload: no second development phase, no spring chains, and the hold
+  is dead still. The stillness is the confidence.
+
+  Variables:
+    - wordmark (string): the centered display wordmark.
+    - label (string): mono caption under the rule. Empty hides it.
+    - kicker (string): small mono label above the wordmark. Empty hides it.
+    - rule (show | hide): the hairline rule and its draw.
+    - accent (green | blue | violet): contract color carried by the rule.
+    - exit (none | fade | up, default none): optional departure.
+
+  Envelope: fixed IN, optional OUT, elastic HOLD only.
+    IN_BASE  = 1.80s  kicker, wordmark settle, rule draw, label, in sequence
+    HOLD     = max(0, D - IN - OUT), truly still: no drift, no breath
+    OUT_BASE = 0.50s when exit is fade or up, otherwise 0
+  If D is shorter than IN_BASE + OUT_BASE the phases compress together.
+  Longer mounts stretch HOLD only. The timeline is never time-scaled.
+
+  The rule draw uses getTotalLength dash measurement (never the pathLength
+  attribute, never non-scaling-stroke on a dashed path).
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, has no data-width or
+  data-height, and registers one paused timeline under the literal
+  titlecard-lockup key.
+-->
+<html
+  lang="en"
+  data-composition-id="titlecard-lockup"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "wordmark", "type": "string", "role": "content", "label": "Wordmark", "description": "Display wordmark that settles dead-center.", "default": "HYPERFRAMES" },
+    { "id": "label", "type": "string", "role": "content", "label": "Label", "description": "Mono caption under the rule. Empty hides it.", "default": "WRITE HTML. RENDER VIDEO." },
+    { "id": "kicker", "type": "string", "role": "content", "label": "Kicker", "description": "Small mono label above the wordmark. Empty hides it.", "default": "INTRODUCING" },
+    { "id": "rule", "type": "enum", "role": "style", "label": "Rule", "description": "Hairline rule drawn left to right under the wordmark.", "default": "show", "options": [{ "value": "show", "label": "Show" }, { "value": "hide", "label": "Hide" }] },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Contract color carried by the hairline rule.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "style", "label": "Exit", "description": "Optional departure. Frame roots own transitions, so none is the default.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Titlecard Lockup</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="titlecard-lockup" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          #root [hidden] {
+            display: none !important;
+          }
+
+          .tl-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+            background: var(--bg, #0b0c0e);
+          }
+
+          .tl-lockup {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            max-width: 92cqw;
+            text-align: center;
+            will-change: transform, opacity;
+          }
+
+          .tl-kicker {
+            display: block;
+            margin-bottom: var(--space-2, 3.4cqh);
+            /* Light-safe ink derived from the host's own fg/bg instead of
+               --muted (whose fallback is dark-tuned and fails contrast on
+               light hosts). 62% fg clears 4.5:1 on both dark and light. */
+            color: color-mix(in srgb, var(--fg, #f8fafc) 62%, var(--bg, #0b0c0e));
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            font-size: 2.6cqmin;
+            font-weight: 600;
+            line-height: 1;
+            letter-spacing: 0.3em;
+            text-indent: 0.3em; /* balances the trailing tracking so the line optically centers */
+            text-transform: uppercase;
+            will-change: transform, opacity;
+          }
+
+          .tl-wordmark {
+            display: block;
+            max-width: 92cqw;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: var(--tl-wordmark-size, min(14cqw, 22cqh));
+            font-weight: 600;
+            line-height: 1;
+            letter-spacing: -0.03em;
+            white-space: nowrap;
+            transform-origin: 50% 50%;
+            will-change: transform, opacity;
+          }
+
+          .tl-rule-svg {
+            display: block;
+            width: 34cqw;
+            height: max(1px, 0.2cqmin);
+            margin-top: var(--space-2, 4cqh);
+          }
+
+          .tl-rule-svg line {
+            stroke: color-mix(
+              in srgb,
+              var(--tl-accent, var(--brand, #71f5a7)) 60%,
+              var(--fg, #f8fafc)
+            );
+            stroke-width: 2;
+            stroke-opacity: 0.62;
+          }
+
+          .tl-label {
+            display: block;
+            margin-top: var(--space-2, 3.2cqh);
+            /* Same fg/bg-derived ink as the kicker: contrast-safe on any host. */
+            color: color-mix(in srgb, var(--fg, #f8fafc) 62%, var(--bg, #0b0c0e));
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            font-size: 2.2cqmin;
+            font-weight: 600;
+            line-height: 1.4;
+            letter-spacing: 0.34em;
+            text-indent: 0.34em;
+            text-transform: uppercase;
+            will-change: transform, opacity;
+          }
+        </style>
+
+        <div
+          id="titlecard-lockup-clip"
+          class="tl-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="tl-lockup">
+            <span class="tl-kicker"></span>
+            <span class="tl-wordmark"></span>
+            <svg
+              class="tl-rule-svg"
+              viewBox="0 0 560 2"
+              preserveAspectRatio="none"
+              xmlns="http://www.w3.org/2000/svg"
+              aria-hidden="true"
+            >
+              <line class="tl-rule" x1="0" y1="1" x2="560" y2="1" />
+            </svg>
+            <span class="tl-label"></span>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var lockup = root.querySelector(".tl-lockup");
+            var kicker = root.querySelector(".tl-kicker");
+            var wordmark = root.querySelector(".tl-wordmark");
+            var ruleSvg = root.querySelector(".tl-rule-svg");
+            var ruleLine = root.querySelector(".tl-rule");
+            var label = root.querySelector(".tl-label");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            function readText(value, fallback) {
+              if (value == null) return fallback;
+              return String(value).trim().replace(/\s+/g, " ");
+            }
+
+            var wordmarkText = readText(vars.wordmark, "HYPERFRAMES");
+            var labelText = readText(vars.label, "WRITE HTML. RENDER VIDEO.");
+            var kickerText = readText(vars.kicker, "INTRODUCING");
+            var ruleShown = vars.rule !== "hide";
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            wordmark.textContent = wordmarkText;
+            lockup.setAttribute("aria-label", wordmarkText);
+            root.style.setProperty("--tl-accent", accentColors[accent]);
+
+            if (kickerText) kicker.textContent = kickerText;
+            else kicker.setAttribute("hidden", "hidden");
+            if (labelText) label.textContent = labelText;
+            else label.setAttribute("hidden", "hidden");
+            if (!ruleShown) ruleSvg.setAttribute("hidden", "hidden");
+
+            // Deterministic character-count fit keeps the wordmark on one line
+            // with air on both sides before the template is laid out. The 0.78
+            // advance estimate is conservative so wide themed display faces
+            // (serifs) still fit inside the frame.
+            var characters = Math.max(1, Array.from(wordmarkText).length);
+            var fittedCqw = Math.min(12, 84 / (characters * 0.78));
+            root.style.setProperty(
+              "--tl-wordmark-size",
+              "min(" + fittedCqw.toFixed(3) + "cqw, 22cqh)",
+            );
+
+            var IN_BASE = 1.8;
+            var OUT_BASE = exit === "none" ? 0 : 0.5;
+            var parsedDuration = Number.parseFloat(root.dataset.duration);
+            var duration = Number.isFinite(parsedDuration) ? Math.max(0.001, parsedDuration) : 4;
+            var totalBase = IN_BASE + OUT_BASE;
+            var phaseScale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * phaseScale;
+            var OUT = OUT_BASE * phaseScale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var OUT_START = IN + HOLD;
+            var KICKER_IN = 0.45 * phaseScale;
+            var WORD_AT = 0.25 * phaseScale;
+            var WORD_IN = 0.85 * phaseScale;
+            var RULE_AT = 0.9 * phaseScale;
+            var RULE_IN = 0.55 * phaseScale;
+            var LABEL_AT = 1.3 * phaseScale;
+            var LABEL_IN = 0.5 * phaseScale;
+
+            var tl = gsap.timeline({ paused: true });
+
+            // Optional kicker fades up first. An empty kicker leaves a beat of
+            // quiet instead of reflowing the schedule.
+            if (kickerText) {
+              tl.fromTo(
+                kicker,
+                { autoAlpha: 0, y: "2.2cqh" },
+                { autoAlpha: 1, y: "0cqh", duration: KICKER_IN, ease: "power2.out" },
+                0,
+              );
+            }
+
+            // The ONE move: the wordmark settles dead-center, scale 0.96 to 1,
+            // smooth ease-out, entrance half only, no bounce.
+            tl.fromTo(
+              wordmark,
+              { autoAlpha: 0, scale: 0.96 },
+              { autoAlpha: 1, scale: 1, duration: WORD_IN, ease: "power3.out" },
+              WORD_AT,
+            );
+
+            // Hairline rule draws left to right via measured-length dash.
+            if (ruleShown) {
+              var ruleLength = ruleLine.getTotalLength();
+              ruleLine.style.strokeDasharray = String(ruleLength);
+              ruleLine.style.strokeDashoffset = String(ruleLength);
+              tl.fromTo(
+                ruleLine,
+                { strokeDashoffset: ruleLength },
+                { strokeDashoffset: 0, duration: RULE_IN, ease: "power2.out" },
+                RULE_AT,
+              );
+            }
+
+            // Mono label fades up beneath the rule.
+            if (labelText) {
+              tl.fromTo(
+                label,
+                { autoAlpha: 0, y: "1.8cqh" },
+                { autoAlpha: 1, y: "0cqh", duration: LABEL_IN, ease: "power2.out" },
+                LABEL_AT,
+              );
+            }
+
+            // TRUE hold: dead still. No drift, no breath; sub-perceptual
+            // motion reads as noise at 1080p, and the stillness is the point.
+
+            // Optional exit. Frame roots own transitions; none is the default
+            // and leaves the held lockup as the final frame.
+            if (exit !== "none") {
+              var exitProps = { autoAlpha: 0, duration: OUT, ease: "power2.in" };
+              if (exit === "up") exitProps.y = "-2.4cqh";
+              tl.to(lockup, exitProps, OUT_START);
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["titlecard-lockup"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/toggle-flip/demo.html b/registry/components/toggle-flip/demo.html
new file mode 100644
index 0000000000..ee0986f721
--- /dev/null
+++ b/registry/components/toggle-flip/demo.html
@@ -0,0 +1,105 @@
+<!doctype html>
+<!--
+  toggle-flip -- demo. Standalone 1920x1080 composition that MOUNTS the
+  primitive at registry/components/toggle-flip/toggle-flip.html via
+  data-composition-src, instead of inlining it: dark token-themed stage,
+  hosting the toggle in a ~40%-of-frame card centered in the composition.
+  data-variable-values on the host clip carries deliberately non-default
+  overrides (size, label) so preview tooling proves every variable actually
+  flows through the mount into the primitive. This file passing lint +
+  validate + snapshot is the proof the mount contract holds: the primitive
+  has no data-width/data-height of its own, so it must size itself off the
+  box this demo gives it, with no bleed and no 2x oversize. Kept in sync
+  with toggle-flip.html by hand; not installed by `hyperframes add`.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Toggle Flip - Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #05070d;
+      }
+
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 40%, #0d1526 0%, #05070d 70%);
+      }
+
+      /* The ~40%-of-frame card the primitive mounts into. A visibly distinct
+         panel (rounded, bordered, its own --bg tone) so the mount box reads
+         clearly against the page backdrop in a snapshot -- proof the toggle
+         stays inside it instead of bleeding past its edges.
+
+         Sized and centered with real percentages against #root's definite
+         1920x1080 box, not left to resolve from data-width/data-height
+         alone: the mounted primitive sizes its own internals off cqw
+         (container query units), and a host box with no definite CSS
+         width of its own forces the browser into shrink-to-fit sizing --
+         which, feeding back through a size-contained container, collapses
+         to the mounted content's tiny intrinsic size instead of the
+         intended box. An explicit width/height here sidesteps that
+         entirely. data-width/data-height stay in sync below for tooling
+         that reads them (lint, per-instance sizing metadata). */
+      .mount-card {
+        --bg: #131b2e;
+        width: 40%;
+        height: 40%;
+        left: 30%;
+        top: 30%;
+        border-radius: 28px;
+        border: 1px solid rgba(148, 163, 184, 0.25);
+        box-shadow: 0 40px 90px rgba(0, 0, 0, 0.45);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="toggle-flip-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="toggle-flip-mount"
+        class="mount-card clip"
+        data-composition-id="toggle-flip"
+        data-composition-src="./toggle-flip.html"
+        data-variable-values='{"direction":"on","label":"Dark mode","size":55}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="768"
+        data-height="432"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      // No motion of its own: this demo is a static host for the mounted
+      // primitive below, which owns and registers its own timeline. Register
+      // an empty paused timeline under this file's own composition id so the
+      // runtime's timeline-registry check is satisfied without inventing
+      // motion the demo doesn't need.
+      window.__timelines = window.__timelines || {};
+      window.__timelines["toggle-flip-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/toggle-flip/registry-item.json b/registry/components/toggle-flip/registry-item.json
new file mode 100644
index 0000000000..5bbe961b01
--- /dev/null
+++ b/registry/components/toggle-flip/registry-item.json
@@ -0,0 +1,53 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "toggle-flip",
+  "type": "hyperframes:component",
+  "title": "Toggle Flip",
+  "description": "An oversized UI toggle switch that flips with real physicality: thumb overshoot, track color crossfade, and a soft press-compress before release. The reference prop of the ui-props family.",
+  "tags": ["prop", "ui-props", "toggle", "interaction", "reference-prop", "demonstrate"],
+  "jobs": ["demonstrate"],
+  "family": "ui-props",
+  "profile": "interaction",
+  "evidence": "fixture; the reference prop",
+  "files": [
+    {
+      "path": "toggle-flip.html",
+      "target": "compositions/components/toggle-flip.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "direction",
+      "type": "enum",
+      "role": "content",
+      "label": "Flip direction",
+      "description": "Target end state the flip lands on.",
+      "default": "on",
+      "options": [
+        { "value": "on", "label": "Off → On" },
+        { "value": "off", "label": "On → Off" }
+      ]
+    },
+    {
+      "id": "label",
+      "type": "string",
+      "role": "content",
+      "label": "Caption",
+      "description": "Optional caption under the toggle. Blank hides the line.",
+      "default": "Auto-save"
+    },
+    {
+      "id": "size",
+      "type": "number",
+      "role": "layout",
+      "label": "Size",
+      "description": "Toggle width as a percent of the host box width.",
+      "default": 40,
+      "min": 20,
+      "max": 70,
+      "step": 1,
+      "unit": "%"
+    }
+  ]
+}
diff --git a/registry/components/toggle-flip/toggle-flip.html b/registry/components/toggle-flip/toggle-flip.html
new file mode 100644
index 0000000000..c740e13196
--- /dev/null
+++ b/registry/components/toggle-flip/toggle-flip.html
@@ -0,0 +1,424 @@
+<!doctype html>
+<!--
+  toggle-flip -- HyperFrames video primitive (ui-props / interaction / demonstrate)
+
+  Concept: an oversized UI toggle switch that flips with real physicality --
+  thumb travel with a slight overshoot, a track color crossfade from
+  var(--surface) to var(--brand), and a soft press-compress right before the
+  knob releases into its new state. One mechanic, one job: demonstrating a
+  state change. This is the reference prop of the ui-props family -- the
+  thing a cursor or touch actor "operates" in a composed scene, and it also
+  has to read alone.
+
+  Compiled-from evidence: fixture; the reference prop (video-primitives
+  catalog, ui-props / interaction / demonstrate shelf).
+
+  Use when: showing a feature, setting, or permission turning on/off, or any
+  binary state change a pointer actor (oversized-cursor, touch-indicator)
+  operates on. Composes with those pointer primitives, which anchor to this
+  file's [data-anchor="toggle-flip"] button.
+
+  Variables (declared in data-composition-variables below):
+    - direction ("on" | "off", default "on"): the flip's TARGET state.
+      "on"  -> starts OFF (surface track), flips TO on (brand track).
+      "off" -> starts ON  (brand track),   flips TO off (surface track).
+    - label (string, default "Auto-save"): optional caption under the
+      toggle. Empty string hides the caption line entirely.
+    - size (number, percent of container width, default 40): toggle width
+      as a percentage of the host box's own width (cqw-driven, so it stays
+      proportional no matter what box a host composition gives it).
+
+  Envelope (fixed IN/OUT, elastic HOLD only -- never gsap.timeScale()):
+    IN_BASE  = 0.90s  stage settles in, anticipation press, then the flip
+    HOLD     = elastic = max(0, D - (IN_BASE + OUT_BASE)); ambient glow
+               breathes gently to prove the frame is alive, or sits calm at
+               HOLD = 0 for short durations
+    OUT_BASE = 0.50s  release fade
+    If D < IN_BASE + OUT_BASE, IN and OUT scale down together (never
+    time-scaled) so IN + OUT == D and HOLD == 0.
+
+  Sync point (fixed offset into IN, never inside the elastic HOLD): the flip
+  lands at FLIP_AT = 0.5s into an unscaled IN (scales proportionally with IN
+  when the envelope is compressed -- see RETIME RANGE below).
+
+  Sound cue: a soft click/tock foley fires at the flip sync point. The
+  primitive never plays audio -- it dispatches a `hf:sfx` CustomEvent
+  ({ id: "click-soft", t: FLIP_AT }) that a scene's mix stage can catch and
+  route to the catalog SFX id of its choice.
+
+  Mount contract: this file is a MOUNTABLE SUB-COMPOSITION, not a standalone
+  composition. A host loads it via data-composition-src; the runtime only
+  clones <template> contents (everything outside <template>, including the
+  entire <head>, is discarded on mount) -- see
+  skills/hyperframes-core/references/sub-compositions.md. The root carries
+  no data-width/data-height: it is elastic, sized off whatever box the host
+  clip gives it (position:absolute; inset:0; container-type:size), so the
+  toggle reads correctly whether the host mounts it into a 960x540 slot or a
+  full 1920x1080 frame. The root is styled by #root, never a class --
+  composited renders scope this file's CSS to
+  [data-composition-id="toggle-flip"], and a rule keyed on the root's own
+  class would stop matching the root itself (sub-compositions.md, Pitfall
+  3). Variables are read via window.__hyperframes.getVariables() (not by
+  parsing this file's own <html> tag at runtime): once mounted,
+  document.documentElement is the HOST's <html>, not this one, so the
+  loader's declared-defaults-plus-per-instance-overrides table is the only
+  reliable source once the primitive is running inside a host page.
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "direction", "type": "enum", "role": "content", "label": "Flip direction", "description": "Target end state the flip lands on.", "default": "on", "options": [{ "value": "on", "label": "Off → On" }, { "value": "off", "label": "On → Off" }] },
+    { "id": "label", "type": "string", "role": "content", "label": "Caption", "description": "Optional caption under the toggle. Blank hides the line.", "default": "Auto-save" },
+    { "id": "size", "type": "number", "role": "layout", "label": "Size", "description": "Toggle width as a percent of the host box width.", "default": 40, "min": 20, "max": 70, "step": 1, "unit": "%" }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Toggle Flip</title>
+    <!-- Metadata only for whoever opens this file directly -- the runtime
+         discards everything outside <template> on mount. The
+         data-composition-variables attribute above stays on <html> (not
+         inside <template>): the loader reads declared variable defaults
+         directly off the fetched document's root element, whether or not
+         the body is template-wrapped. -->
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="toggle-flip" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          /* Root: sized off the HOST box, never a fixed stage. inset:0 fills
+             whatever box the host clip gives it -- a 960x540 mounted slot,
+             a full 1920x1080 frame, anything in between. container-type
+             establishes the cqw/cqh basis every internal measurement below
+             is expressed in. Styled by #root, never a class -- see the
+             mount-contract note in the header comment. */
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            background: var(--bg, #0b1120);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+          }
+
+          .tf-clip {
+            width: 100%;
+            height: 100%;
+            display: grid;
+            place-items: center;
+          }
+
+          .tf-stage {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: var(--space-3, 3cqh);
+            opacity: 0;
+          }
+
+          .tf-label {
+            color: var(--muted, #94a3b8);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-weight: 650;
+            font-size: clamp(12px, 2.4cqw, 28px);
+            letter-spacing: 0.01em;
+            text-align: center;
+          }
+
+          .tf-label:empty {
+            display: none;
+          }
+
+          /* EDIT ZONE: geometry ratios. Track is a fixed 2.2:1 pill; the knob is
+             80% of the track's own height, inset 10% top/bottom. All of it is
+             expressed in cqw off --tf-size so it holds proportion at any size. */
+          .tf-toggle {
+            --tf-track-w: calc(var(--tf-size, 40) * 1cqw);
+            width: var(--tf-track-w);
+            aspect-ratio: 2.2 / 1;
+            position: relative;
+            display: block;
+            border: 0;
+            padding: 0;
+            background: transparent;
+            cursor: default;
+            /* transform is GSAP-owned below (press squeeze); no CSS transform here */
+          }
+
+          .tf-track {
+            position: absolute;
+            inset: 0;
+            border-radius: 999px;
+            --tf-mix: 0; /* 0..100, GSAP-tweened: 0 = surface/off, 100 = brand/on */
+            border: 0.15cqw solid
+              color-mix(
+                in srgb,
+                var(--border, #334155) calc(100% - var(--tf-mix, 0) * 0.4%),
+                var(--brand, #22c55e) calc(var(--tf-mix, 0) * 0.4%)
+              );
+            background: color-mix(
+              in srgb,
+              var(--surface, #1e293b) calc((100 - var(--tf-mix, 0)) * 1%),
+              var(--brand, #22c55e) calc(var(--tf-mix, 0) * 1%)
+            );
+            box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border, #334155) 45%, transparent);
+          }
+
+          .tf-glow {
+            position: absolute;
+            inset: -14%;
+            border-radius: 999px;
+            background: radial-gradient(
+              closest-side,
+              color-mix(in srgb, var(--accent, #38bdf8) 55%, transparent),
+              transparent 72%
+            );
+            opacity: 0;
+            pointer-events: none;
+          }
+
+          .tf-knob {
+            position: absolute;
+            top: calc(var(--tf-size, 40) * 0.0455cqw);
+            left: calc(var(--tf-size, 40) * 0.0455cqw);
+            width: calc(var(--tf-size, 40) * 0.3636cqw);
+            aspect-ratio: 1;
+            border-radius: 50%;
+            background: var(--surface, #f8fafc);
+            box-shadow: 0 0.35cqw 0.7cqw rgba(2, 6, 23, 0.4);
+            /* RETIME RANGE ends here for geometry; 150% is the exact travel a
+               2.2:1 track / 80%-of-height knob pair produces -- see header. GSAP
+               tweens x/scale directly below; no CSS transform authored here. */
+          }
+        </style>
+
+        <div
+          id="toggle-flip-clip"
+          class="tf-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="tf-stage">
+            <div class="tf-label"></div>
+            <button
+              class="tf-toggle"
+              type="button"
+              data-anchor="toggle-flip"
+              aria-pressed="false"
+              tabindex="-1"
+            >
+              <span class="tf-glow"></span>
+              <span class="tf-track"></span>
+              <span class="tf-knob"></span>
+            </button>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            // Literal, not read off the DOM: once mounted, the framework's
+            // flattening step strips data-composition-id from the mounted
+            // root (see FLATTENED_INNER_ROOT_STRIP_ATTRS in
+            // packages/core/src/runtime/flattenedRoot.ts), so
+            // root.getAttribute("data-composition-id") would read null post-
+            // mount and silently register the timeline under the key
+            // "null" instead of "toggle-flip" -- the render then waits the
+            // full 45s sub-composition poll and gives up. Matches the
+            // convention in sub-compositions.md's own example and
+            // empty.html: hardcode the id this file is always mounted
+            // under.
+            var compositionId = "toggle-flip";
+            var stage = root.querySelector(".tf-stage");
+            var labelEl = root.querySelector(".tf-label");
+            var toggleEl = root.querySelector(".tf-toggle");
+            var trackEl = root.querySelector(".tf-track");
+            var knobEl = root.querySelector(".tf-knob");
+            var glowEl = root.querySelector(".tf-glow");
+
+            // EDIT ZONE: variable defaults come from data-composition-variables
+            // above (declared on <html>). window.__hyperframes.getVariables()
+            // returns those defaults already merged with any per-instance
+            // data-variable-values a host sets on the mounting clip -- see
+            // sub-compositions.md's "Per-Instance Variables" section. Add a
+            // variable in both places together (declaration above + fallback
+            // below).
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            // INVARIANT: only "on" | "off" ever reaches the renderer, whatever a
+            // bad override sends.
+            var direction = vars.direction === "off" ? "off" : "on";
+            var toOn = direction === "on";
+            var labelText = vars.label == null ? "" : String(vars.label);
+            // INVARIANT: size always clamps into the declared 20-70% range so an
+            // out-of-range override can't blow the toggle past its container.
+            var sizePct = Math.max(20, Math.min(70, Number(vars.size) || 40));
+
+            labelEl.textContent = labelText;
+            toggleEl.style.setProperty("--tf-size", String(sizePct));
+
+            // A project's own --dur-beat sets this primitive's ambient pace, so
+            // the HOLD breathing feels native to whatever theme is compiled in.
+            var beat = parseFloat(getComputedStyle(root).getPropertyValue("--dur-beat")) || 0.5;
+            var SHEEN_HALF = beat * 1.5;
+
+            // RETIME RANGE: these are the only numbers to touch for a global
+            // pacing retune. Do not reach for gsap.timeScale() -- HOLD below is
+            // the only elastic phase; IN and OUT are always this long (scaled
+            // down together only when D itself is shorter than IN_BASE+OUT_BASE).
+            var IN_BASE = 0.9;
+            var OUT_BASE = 0.5;
+            var STAGE_IN_BASE = 0.4;
+            var PRESS_LEAD_BASE = 0.2;
+            var FLIP_AT_BASE = 0.5; // sync point: fixed offset into IN, never into HOLD
+            var FLIP_DURATION_BASE = 0.25;
+            var GLOW_DURATION_BASE = 0.15;
+
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var totalBase = IN_BASE + OUT_BASE;
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var STAGE_IN = STAGE_IN_BASE * scale;
+            var PRESS_LEAD = PRESS_LEAD_BASE * scale;
+            var FLIP_AT = FLIP_AT_BASE * scale;
+            var FLIP_DURATION = FLIP_DURATION_BASE * scale;
+            var GLOW_DURATION = GLOW_DURATION_BASE * scale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var HOLD_START = IN;
+            var OUT_START = IN + HOLD;
+
+            function fireSfx(id, t) {
+              root.dispatchEvent(
+                new CustomEvent("hf:sfx", { detail: { id: id, t: t }, bubbles: true }),
+              );
+            }
+
+            // Explicit both-endpoints state (gsap.set, never gsap.from()) so a
+            // seek to t=0 is always correct without playing the timeline.
+            var mixFrom = toOn ? 0 : 100;
+            var mixTo = toOn ? 100 : 0;
+            var xFrom = toOn ? "0%" : "150%";
+            var xTo = toOn ? "150%" : "0%";
+            gsap.set(stage, { opacity: 0 });
+            gsap.set(toggleEl, { scaleX: 1, scaleY: 1 });
+            gsap.set(knobEl, { x: xFrom, scale: 1 });
+            gsap.set(trackEl, { "--tf-mix": mixFrom });
+            gsap.set(glowEl, { opacity: 0 });
+            toggleEl.setAttribute("aria-pressed", toOn ? "false" : "true");
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: stage settle
+            tl.to(stage, { opacity: 1, duration: STAGE_IN, ease: "power2.out" }, 0);
+
+            // anticipation press, resolves exactly as the flip begins
+            if (PRESS_LEAD > 0) {
+              var pressStart = Math.max(0, FLIP_AT - PRESS_LEAD);
+              var pressHalf = PRESS_LEAD / 2;
+              tl.to(
+                toggleEl,
+                { scaleX: 0.94, scaleY: 1.06, duration: pressHalf, ease: "power1.inOut" },
+                pressStart,
+              );
+              tl.to(
+                toggleEl,
+                { scaleX: 1, scaleY: 1, duration: pressHalf, ease: "power1.inOut" },
+                pressStart + pressHalf,
+              );
+            }
+
+            // the flip: knob travel with overshoot + track color crossfade, one
+            // shared sync point (FLIP_AT) so they always land together
+            tl.to(knobEl, { x: xTo, duration: FLIP_DURATION, ease: "back.out(1.9)" }, FLIP_AT);
+            tl.to(
+              trackEl,
+              { "--tf-mix": mixTo, duration: FLIP_DURATION, ease: "back.out(1.9)" },
+              FLIP_AT,
+            );
+            tl.fromTo(
+              knobEl,
+              { scale: 1 },
+              {
+                scale: 1.08,
+                duration: FLIP_DURATION * 0.45,
+                ease: "power1.out",
+                yoyo: true,
+                repeat: 1,
+              },
+              FLIP_AT,
+            );
+            tl.set(
+              toggleEl,
+              { attr: { "aria-pressed": toOn ? "true" : "false" } },
+              FLIP_AT + FLIP_DURATION,
+            );
+            tl.call(
+              function () {
+                fireSfx("click-soft", FLIP_AT);
+              },
+              [],
+              FLIP_AT,
+            );
+
+            // soft glow pulse right as the flip settles
+            tl.fromTo(
+              glowEl,
+              { opacity: 0 },
+              {
+                opacity: 1,
+                duration: GLOW_DURATION * 0.5,
+                ease: "power1.out",
+                yoyo: true,
+                repeat: 1,
+              },
+              FLIP_AT + FLIP_DURATION,
+            );
+
+            // HOLD: gentle ambient breathing so an elastic frame still reads
+            // alive; naturally absent when HOLD == 0. Finite repeat count per
+            // the determinism rule -- floor, never ceil, so it can't overshoot D.
+            if (HOLD > SHEEN_HALF) {
+              var breathRepeat = Math.max(0, Math.floor(HOLD / SHEEN_HALF) - 1);
+              tl.fromTo(
+                glowEl,
+                { opacity: 0 },
+                {
+                  opacity: 0.32,
+                  duration: SHEEN_HALF,
+                  ease: "sine.inOut",
+                  yoyo: true,
+                  repeat: breathRepeat,
+                },
+                HOLD_START + GLOW_DURATION,
+              );
+            }
+
+            // OUT: release fade
+            tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.out" }, OUT_START);
+
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/top-down-letters/demo.html b/registry/components/top-down-letters/demo.html
new file mode 100644
index 0000000000..a660118401
--- /dev/null
+++ b/registry/components/top-down-letters/demo.html
@@ -0,0 +1,86 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Top-Down Letters - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        min-width: 900px;
+        min-height: 500px;
+        padding: 64px;
+        /* ponytail: scale wrapper (not a GSAP target) to fill ~65% of frame width */
+        transform: scale(3.2);
+      }
+      .hf-remocn-top-down-letters {
+        color: #18181b;
+        font-family: Inter, system-ui, sans-serif;
+        font-weight: 900;
+        letter-spacing: -0.04em;
+      }
+      .hf-remocn-top-down-letters {
+        display: inline-flex;
+        gap: 1px;
+        font-size: 74px;
+        line-height: 0.9;
+        overflow: hidden;
+      }
+      .hf-remocn-top-down-letters span {
+        display: inline-block;
+        transform: translateY(var(--hf-char-y, 0px));
+        will-change: transform, opacity;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="top-down-letters-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-top-down-letters">
+          <span>C</span><span>A</span><span>S</span><span>C</span><span>A</span><span>D</span
+          ><span>E</span>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-top-down-letters span",
+          { opacity: 0, "--hf-char-y": "-42px" },
+          { opacity: 1, "--hf-char-y": "0px", duration: 0.22, stagger: 0.035, ease: "power3.out" },
+          startTime,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["top-down-letters-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/top-down-letters/registry-item.json b/registry/components/top-down-letters/registry-item.json
new file mode 100644
index 0000000000..746d2d54da
--- /dev/null
+++ b/registry/components/top-down-letters/registry-item.json
@@ -0,0 +1,72 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "top-down-letters",
+  "type": "hyperframes:component",
+  "title": "Top-Down Letters",
+  "description": "Letters descend from above in a pronounced staircase with zero blur.",
+  "tags": ["video-primitive", "motion-primitive", "remocn-port", "typography"],
+  "files": [
+    {
+      "path": "top-down-letters.html",
+      "target": "compositions/components/top-down-letters.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "text",
+      "type": "string",
+      "role": "content",
+      "label": "Text",
+      "description": "Word that cascades in. Every character becomes one letter span, in source order.",
+      "default": "CASCADE"
+    },
+    {
+      "id": "distance",
+      "type": "enum",
+      "role": "motion",
+      "label": "Distance",
+      "description": "Multiplies the drop the timeline drives, so the letters cover a shorter or longer run in the same time.",
+      "default": "standard",
+      "options": [
+        {
+          "value": "close",
+          "label": "Close"
+        },
+        {
+          "value": "standard",
+          "label": "Standard"
+        },
+        {
+          "value": "far",
+          "label": "Far"
+        }
+      ]
+    },
+    {
+      "id": "tone",
+      "type": "enum",
+      "role": "style",
+      "label": "Tone",
+      "description": "Letter colour: ink for light frames, paper for dark ones, accent rides --brand.",
+      "default": "ink",
+      "options": [
+        {
+          "value": "ink",
+          "label": "Ink"
+        },
+        {
+          "value": "paper",
+          "label": "Paper"
+        },
+        {
+          "value": "accent",
+          "label": "Accent"
+        }
+      ]
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/top-down-letters.png"
+  }
+}
diff --git a/registry/components/top-down-letters/top-down-letters.html b/registry/components/top-down-letters/top-down-letters.html
new file mode 100644
index 0000000000..728e318725
--- /dev/null
+++ b/registry/components/top-down-letters/top-down-letters.html
@@ -0,0 +1,112 @@
+<!--
+  Top-Down Letters - remocn typography primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Drive the timeline
+  integration from a paused GSAP timeline so renders remain deterministic.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result either into the
+  markup or into a custom property the CSS above consumes. The timeline recipe
+  below is untouched by them: it keeps driving one offset per letter, and these
+  decide which letters fall, how far that offset carries them, and what colour
+  they are.
+
+    - text (string, default CASCADE): the word that cascades. Every character
+      becomes one span, in source order, exactly like the hand-written markup;
+      a space becomes a non-breaking space so it keeps its width in the flex
+      row. Anything that is not a non-empty string keeps the shipped word.
+    - distance (close | standard | far, default standard): multiplies the drop
+      the timeline drives, so the letters cover a shorter or longer run in the
+      same time. close covers half of it, standard leaves the shipped 42px
+      alone, far carries them nearly double.
+    - tone (ink | paper | accent, default ink): letter colour. ink is
+      near-black for light frames, paper near-white for dark ones, accent
+      rides --brand.
+
+  On every default the result is identical to the original: the seven
+  near-black letters of CASCADE dropping 42px into place.
+-->
+
+<div
+  class="hf-remocn-top-down-letters"
+  data-composition-variables='[
+    { "id": "text", "type": "string", "role": "content", "label": "Text", "description": "Word that cascades in. Every character becomes one letter span, in source order.", "default": "CASCADE" },
+    { "id": "distance", "type": "enum", "role": "motion", "label": "Distance", "description": "Multiplies the drop the timeline drives, so the letters cover a shorter or longer run in the same time.", "default": "standard", "options": [{ "value": "close", "label": "Close" }, { "value": "standard", "label": "Standard" }, { "value": "far", "label": "Far" }] },
+    { "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Letter colour: ink for light frames, paper for dark ones, accent rides --brand.", "default": "ink", "options": [{ "value": "ink", "label": "Ink" }, { "value": "paper", "label": "Paper" }, { "value": "accent", "label": "Accent" }] }
+  ]'
+>
+  <span>C</span><span>A</span><span>S</span><span>C</span><span>A</span><span>D</span><span>E</span>
+</div>
+
+<style>
+  .hf-remocn-top-down-letters {
+    color: var(--hf-letters-color, #18181b);
+    font-family: Inter, system-ui, sans-serif;
+    font-weight: 900;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-top-down-letters {
+    display: inline-flex;
+    gap: 1px;
+    font-size: 74px;
+    line-height: 0.9;
+    overflow: hidden;
+  }
+  .hf-remocn-top-down-letters span {
+    display: inline-block;
+    transform: translateY(calc(var(--hf-char-y, 0px) * var(--hf-char-distance, 1)));
+    will-change: transform, opacity;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    var distances = { close: 0.5, standard: 1, far: 1.8 };
+    var tones = {
+      ink: "#18181b",
+      paper: "#fafafa",
+      accent: "var(--brand, #34d399)",
+    };
+
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var distance = distances[pick(distances, vars.distance, "standard")];
+    var tone = tones[pick(tones, vars.tone, "ink")];
+    var text = typeof vars.text === "string" && vars.text !== "" ? vars.text : null;
+
+    var roots = document.querySelectorAll(".hf-remocn-top-down-letters");
+    for (var i = 0; i < roots.length; i += 1) {
+      var root = roots[i];
+      root.style.setProperty("--hf-char-distance", String(distance));
+      root.style.setProperty("--hf-letters-color", tone);
+
+      // Only rebuild when text was supplied; the shipped markup is already the
+      // exact span-per-character output this branch produces for CASCADE.
+      if (text !== null) {
+        var characters = Array.from(text);
+        root.textContent = "";
+        for (var j = 0; j < characters.length; j += 1) {
+          var span = document.createElement("span");
+          span.textContent = characters[j] === " " ? "\u00a0" : characters[j];
+          root.appendChild(span);
+        }
+        root.setAttribute("aria-label", text);
+      }
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-top-down-letters span', { opacity: 0, '--hf-char-y': '-42px' }, { opacity: 1, '--hf-char-y': '0px', duration: 0.22, stagger: 0.035, ease: 'power3.out' }, startTime);
+-->
diff --git a/registry/components/touch-indicator/demo.html b/registry/components/touch-indicator/demo.html
new file mode 100644
index 0000000000..7d7e57fddf
--- /dev/null
+++ b/registry/components/touch-indicator/demo.html
@@ -0,0 +1,230 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Touch Indicator - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+
+      /*
+        Host declares the 17-token theme contract. touch-indicator.html
+        consumes these via var(--token, fallback); it never redeclares them.
+      */
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #05060a;
+
+        --bg: #0b0c10;
+        --fg: #f5f6f8;
+        --muted: #8b8f9a;
+        --surface: #16181d;
+        --border: #262931;
+        --brand: #e4e4e7;
+        --accent: #e4e4e7;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-body: Inter, system-ui, sans-serif;
+        --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
+        --radius: 20px;
+        --space-1: 8px;
+        --space-2: 16px;
+        --space-3: 24px;
+        --dur-beat: 0.4s;
+        --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+        --ease-emphasis: cubic-bezier(0.05, 0.7, 0.1, 1);
+      }
+
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 56px;
+        transform: scale(1.3); /* ponytail: scale wrapper only, GSAP targets stay untouched */
+        transform-origin: center;
+      }
+
+      .phone {
+        position: relative;
+        width: 380px;
+        height: 760px;
+        border-radius: 44px;
+        background: var(--bg, #0b0c10);
+        border: 1px solid color-mix(in srgb, var(--fg, #fff) 12%, transparent);
+        box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55);
+        overflow: hidden;
+        font-family: var(--font-body, sans-serif);
+        color: var(--fg, #f5f6f8);
+      }
+
+      .phone__header {
+        height: 64px;
+        display: flex;
+        align-items: center;
+        padding: 0 var(--space-3, 24px);
+        font-family: var(--font-display, sans-serif);
+        font-weight: 800;
+        font-size: 20px;
+        letter-spacing: -0.01em;
+      }
+
+      .phone__media {
+        height: 380px;
+        margin: 0 var(--space-2, 16px);
+        border-radius: var(--radius, 20px);
+        /* Placeholder media: an L3 plate with a hairline, finely hatched so it
+           reads as a surface with content on it rather than an empty box. */
+        border: 1px solid color-mix(in srgb, var(--fg, #f5f6f8) 14%, transparent);
+        background:
+          repeating-linear-gradient(
+            0deg,
+            color-mix(in srgb, var(--fg, #f5f6f8) 5%, transparent) 0 1px,
+            transparent 1px 3px
+          ),
+          color-mix(in srgb, var(--fg, #f5f6f8) 18%, transparent);
+      }
+
+      .phone__row {
+        height: 64px;
+        display: flex;
+        align-items: center;
+        gap: var(--space-2, 16px);
+        padding: 0 var(--space-3, 24px);
+      }
+
+      .like-btn {
+        position: relative;
+        width: 44px;
+        height: 44px;
+        border-radius: 50%;
+        border: 0;
+        display: grid;
+        place-items: center;
+        background: color-mix(in srgb, var(--surface, #16181d) 100%, transparent);
+        color: var(--muted, #8b8f9a);
+        padding: 0;
+      }
+
+      .like-btn__icon {
+        width: 22px;
+        height: 22px;
+        fill: none;
+        stroke: currentColor;
+        stroke-width: 2;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+
+      .like-count {
+        font-family: var(--font-mono, monospace);
+        font-size: 15px;
+        color: var(--muted, #8b8f9a);
+      }
+
+      .phone__list {
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 508px;
+        bottom: 0;
+        padding: var(--space-2, 16px);
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-1, 8px);
+      }
+      .phone__list-row {
+        height: 56px;
+        border-radius: calc(var(--radius, 20px) * 0.6);
+        background: var(--surface, #16181d);
+        border: 1px solid var(--border, #262931);
+      }
+
+      /*
+        Mount slot: fills the whole phone screen, so touch-indicator.html's
+        own container-query sizing resolves against a narrow (380px) host
+        box, not a full 1920-wide frame -- this is what proves the spec's
+        46px floor engages instead of the raw 5cqw target (19px here).
+      */
+      .touch-indicator-mount {
+        position: absolute;
+        inset: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="touch-indicator-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="3"
+    >
+      <div class="demo-frame">
+        <div class="phone">
+          <div class="phone__header">Feed</div>
+          <div class="phone__media"></div>
+          <div class="phone__row">
+            <button class="like-btn" type="button" aria-label="Like">
+              <svg class="like-btn__icon" viewBox="0 0 24 24" aria-hidden="true">
+                <path
+                  d="M12 21s-7.5-4.6-10-9.1C.6 8.6 2 5 5.6 5c2 0 3.4 1 4.4 2.6C11 6 12.4 5 14.4 5 18 5 19.4 8.6 22 11.9 19.5 16.4 12 21 12 21z"
+                />
+              </svg>
+            </button>
+            <span class="like-count">128</span>
+          </div>
+          <div class="phone__list">
+            <div class="phone__list-row"></div>
+            <div class="phone__list-row"></div>
+            <div class="phone__list-row"></div>
+            <div class="phone__list-row"></div>
+            <div class="phone__list-row"></div>
+          </div>
+
+          <!--
+            MOUNT: touch-indicator as a real sub-composition clip, not
+            pasted markup. This div's data-composition-id must match the
+            internal data-composition-id inside touch-indicator.html (and
+            the window.__timelines key it registers under) -- see
+            sub-compositions.md, Pitfall 2. targetX/Y re-aim the primitive's
+            own default landing point (50/55) at this card's like button
+            (12%, 63% of the mount box) via a per-instance variable
+            override, the documented way a host customizes a mounted
+            primitive instead of forking its file.
+          -->
+          <div
+            id="touch-indicator-mount"
+            class="clip touch-indicator-mount"
+            data-composition-id="touch-indicator"
+            data-composition-src="./touch-indicator.html"
+            data-variable-values='{"targetX":12,"targetY":63}'
+            data-start="0.4"
+            data-duration="2.6"
+            data-track-index="1"
+            data-width="380"
+            data-height="760"
+          ></div>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      // Host timeline: no chrome motion needed to prove the mount contract,
+      // just registration under the host's own data-composition-id.
+      window.__timelines = window.__timelines || {};
+      window.__timelines["touch-indicator-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/touch-indicator/registry-item.json b/registry/components/touch-indicator/registry-item.json
new file mode 100644
index 0000000000..56e79ac14f
--- /dev/null
+++ b/registry/components/touch-indicator/registry-item.json
@@ -0,0 +1,71 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "touch-indicator",
+  "type": "hyperframes:component",
+  "title": "Touch Indicator",
+  "description": "A translucent contact-circle gesture actor for mobile UI scenes: it touches the glass, causes a same-frame response, and lifts. Tap or swipe, picked by variable.",
+  "tags": ["motion-primitive", "mobile", "gesture", "touch", "pointer"],
+  "variables": [
+    {
+      "id": "gesture",
+      "type": "enum",
+      "label": "Gesture",
+      "default": "tap",
+      "options": [
+        {
+          "value": "tap",
+          "label": "Tap"
+        },
+        {
+          "value": "swipe",
+          "label": "Swipe"
+        }
+      ]
+    },
+    {
+      "id": "polarity",
+      "type": "enum",
+      "label": "Polarity",
+      "default": "light",
+      "options": [
+        {
+          "value": "light",
+          "label": "Light (on dark UI)"
+        },
+        {
+          "value": "dark",
+          "label": "Dark (on light UI)"
+        }
+      ]
+    },
+    {
+      "id": "targetX",
+      "type": "number",
+      "label": "Target X",
+      "default": 50,
+      "min": 0,
+      "max": 100,
+      "unit": "%"
+    },
+    {
+      "id": "targetY",
+      "type": "number",
+      "label": "Target Y",
+      "default": 55,
+      "min": 0,
+      "max": 100,
+      "unit": "%"
+    }
+  ],
+  "files": [
+    {
+      "path": "touch-indicator.html",
+      "target": "compositions/components/touch-indicator.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "jobs": ["demonstrate"],
+  "family": "pointers",
+  "profile": "interaction",
+  "evidence": "spec ready (gesture-actor-spec.md)"
+}
diff --git a/registry/components/touch-indicator/touch-indicator.html b/registry/components/touch-indicator/touch-indicator.html
new file mode 100644
index 0000000000..dd68dce38e
--- /dev/null
+++ b/registry/components/touch-indicator/touch-indicator.html
@@ -0,0 +1,378 @@
+<!doctype html>
+<!--
+  touch-indicator -- HyperFrames video primitive (pointers / interaction / demonstrate)
+
+  CONCEPT: a translucent contact-circle that represents a fingertip touching
+  glass. It never hovers: every appearance resolves into a touch-down, every
+  touch causes a same-frame response on its target, every gesture ends with
+  a physical lift. One mechanic (tap or swipe, picked by a variable at
+  setup), one file. This is the mobile counterpart to an oversized cursor,
+  but it obeys touch physics, not pointer physics.
+
+  MOUNTABLE SUB-COMPOSITION: this file is loaded by a host via
+  data-composition-src, not pasted inline. The runtime only clones
+  <template> contents (see skills/hyperframes-core/references/sub-compositions.md),
+  so every style, the markup, and the script that builds and registers the
+  timeline all live inside <template> below. The file is self-driving: it
+  builds its own paused GSAP timeline and registers it under
+  window.__timelines["touch-indicator"] on load, matching the root's own
+  data-composition-id. A host mounts it with a matching
+  data-composition-id="touch-indicator" data-composition-src="./touch-indicator.html".
+
+  COMPILED FROM: hyperframes-corpus-data/mobile/gesture-actor-spec.md (the
+  contact-never-hover law, contact-circle sizing, tap anatomy, swipe law,
+  lift/exit law, same-frame target-reaction contract) with supporting
+  constants cross-checked against gesture-physics-recipes.md. Evidence
+  status: spec ready, no rendered corpus clips yet.
+
+  USE WHEN: a mobile UI scene needs a visible tap or swipe to cause the next
+  animation beat (button press, list scroll, card swipe, sheet reveal).
+  Skip it for cursor/pointer UI (use a cursor primitive) and for gestures
+  whose drawn path is itself the subject (use a trail primitive instead).
+
+  VARIABLES (declared below via data-composition-variables):
+    - gesture   enum "tap" | "swipe", default "tap"
+    - polarity  enum "light" | "dark", default "light"
+    - targetX   number 0-100 (percent of host width), default 50
+    - targetY   number 0-100 (percent of host height), default 55
+
+  ENVELOPE (seconds, 60fps frame-quantized, gesture = "tap"):
+    IN   0.000 - 0.167  approach (0.083) + touch-down compress (0.083)
+    HOLD 0.167 - 0.183  elastic dwell at compressed scale (stretch here only)
+    OUT  0.183 - 0.467  release (0.167) + lift (0.117), lift starts the
+                        instant release ends (0s gap, within the spec's
+                        <=0.04s allowance)
+
+  ENVELOPE (seconds, 60fps frame-quantized, gesture = "swipe"):
+    IN   0.000 - 0.167  approach (0.083) + touch-down compress (0.083)
+    HOLD 0.167 - 0.500  elastic travel: accelerate 41% / decelerate 59% of
+                        the stretchable swipe duration (default 0.333)
+    OUT  0.500 - 0.617  lift only (0.117); a swiping finger does not settle
+                        back to rest scale, it leaves mid-motion
+
+  SOUND CUES (fixed offsets, never inside the elastic HOLD):
+    touch-down  IN + 0.083s   -> soft fingertip contact
+    lift-off    tap:   OUT + 0.167s -> physical release tick
+                swipe: OUT + 0s     -> physical release tick (no bounce)
+
+  BUILT-IN RESPONSE: the primitive has to read standalone in a slot with no
+  host UI to react to it, so touch-down also drives its own contact-blur
+  ripple (EDIT ZONE: .hf-touch-indicator__contact, unchanged from the
+  original spec) plus a quiet radial pulse centered on the root
+  (.hf-touch-indicator__pulse, new). Both are token-painted and low-opacity
+  so they read as a same-frame acknowledgement, not a second effect
+  competing with a host's own reaction wiring.
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    {"id":"gesture","type":"enum","label":"Gesture","default":"tap","options":[{"value":"tap","label":"Tap"},{"value":"swipe","label":"Swipe"}]},
+    {"id":"polarity","type":"enum","label":"Polarity","default":"light","options":[{"value":"light","label":"Light (on dark UI)"},{"value":"dark","label":"Dark (on light UI)"}]},
+    {"id":"targetX","type":"number","label":"Target X","default":50,"min":0,"max":100,"unit":"%"},
+    {"id":"targetY","type":"number","label":"Target Y","default":55,"min":0,"max":100,"unit":"%"}
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Touch Indicator</title>
+    <!-- Head is metadata for the source file only; the mount runtime clones
+         only <template> contents and discards everything else, including
+         this head. See sub-compositions.md, "Pitfall 1".
+
+         The data-composition-variables declared on <html> above duplicates
+         the same schema on the #root div inside <template> below (the
+         "dual-carrier contract", core/src/runtime/compositionLoader.ts and
+         packages/parsers/src/htmlParser.ts both read declared defaults from
+         <html> only on the lazy external-load / CLI-metadata paths, while
+         the render-time bundler reads the template's root div). Keep both
+         copies in sync if the variable schema changes. -->
+  </head>
+  <body>
+    <template>
+      <style>
+        /* INVARIANT: root fills the host's box, position-blind, elastic to
+           whatever size a host slot gives it. No data-width/data-height on
+           the root -- the host slot owns the size (see mount contract).
+           Root is styled by #root, never a class (sub-compositions.md,
+           Pitfall 3). */
+        #root {
+          position: absolute;
+          inset: 0;
+          container-type: inline-size;
+          isolation: isolate;
+          pointer-events: none;
+        }
+
+        .hf-touch-indicator__pulse {
+          /* Root-level built-in response: a quiet radial flash centered on
+             the touch point, so the gesture reads even with no host UI to
+             react to it. Token-painted, low peak opacity -- see BUILT-IN
+             RESPONSE above. */
+          position: absolute;
+          left: 0;
+          top: 0;
+          width: clamp(120px, 30cqw, 320px);
+          height: clamp(120px, 30cqw, 320px);
+          border-radius: 50%;
+          background: radial-gradient(
+            circle,
+            color-mix(in srgb, var(--fg, #14181f) 30%, transparent) 0%,
+            transparent 72%
+          );
+          opacity: 0;
+          pointer-events: none;
+          will-change: transform, opacity;
+        }
+
+        .hf-touch-indicator__actor {
+          /* EDIT ZONE: sizing law from the spec, full-frame law (contact
+             circle target 5cqw of the host box). RETIME RANGE: floor
+             clamped to 46px (the spec's absolute floor, never smaller at
+             delivery scale) since cqw now resolves against whatever box a
+             host slot gives this mountable primitive, which can be much
+             narrower than a full 1920-wide frame. */
+          --hf-gesture-size: clamp(46px, 5cqw, 111px);
+          position: absolute;
+          left: 0;
+          top: 0;
+          width: var(--hf-gesture-size);
+          height: var(--hf-gesture-size);
+          opacity: 0;
+          visibility: hidden;
+          pointer-events: none;
+          will-change: transform, opacity;
+        }
+
+        .hf-touch-indicator__core {
+          position: absolute;
+          inset: 0;
+          box-sizing: border-box;
+          /* INVARIANT: circle geometry, hardcoded 50%, not var(--radius) -
+             that token is for rectangular UI corners, not this actor's
+             fixed disc. */
+          border-radius: 50%;
+          background: color-mix(in srgb, var(--bg, #ffffff) 68%, transparent);
+          border: 2px solid color-mix(in srgb, var(--fg, #14181f) 72%, transparent);
+          box-shadow: 0 4px 12px color-mix(in srgb, var(--fg, #14181f) 22%, transparent);
+          transform-origin: 50% 50%;
+          will-change: transform;
+        }
+
+        .hf-touch-indicator__actor--dark .hf-touch-indicator__core {
+          background: color-mix(in srgb, var(--fg, #14181f) 64%, transparent);
+          border-color: color-mix(in srgb, var(--bg, #ffffff) 86%, transparent);
+        }
+
+        .hf-touch-indicator__contact {
+          position: absolute;
+          left: 50%;
+          top: 54%;
+          width: 62%;
+          height: 22%;
+          border-radius: 50%;
+          background: color-mix(in srgb, var(--fg, #14181f) 32%, transparent);
+          filter: blur(5px);
+          opacity: 0;
+          /* INVARIANT: centering (xPercent/yPercent -50) and scaleX are set
+             by the FIRST GSAP tween below, not here - GSAP overwrites the
+             whole transform, so a static translate()+scaleX() here would be
+             discarded the instant the timeline renders
+             (gsap_css_transform_conflict). */
+          transform-origin: 50% 50%;
+          will-change: transform, opacity;
+        }
+      </style>
+
+      <div
+        id="root"
+        data-composition-id="touch-indicator"
+        data-composition-variables='[
+          {"id":"gesture","type":"enum","label":"Gesture","default":"tap","options":[{"value":"tap","label":"Tap"},{"value":"swipe","label":"Swipe"}]},
+          {"id":"polarity","type":"enum","label":"Polarity","default":"light","options":[{"value":"light","label":"Light (on dark UI)"},{"value":"dark","label":"Dark (on light UI)"}]},
+          {"id":"targetX","type":"number","label":"Target X","default":50,"min":0,"max":100,"unit":"%"},
+          {"id":"targetY","type":"number","label":"Target Y","default":55,"min":0,"max":100,"unit":"%"}
+        ]'
+      >
+        <div class="hf-touch-indicator__pulse"></div>
+        <div class="hf-touch-indicator__actor">
+          <div class="hf-touch-indicator__contact"></div>
+          <div class="hf-touch-indicator__core"></div>
+        </div>
+      </div>
+
+      <script>
+        (function () {
+          const FPS = 60;
+          const q = (s) => Math.max(1, Math.round(s * FPS)) / FPS;
+          const clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
+
+          // Coordinate law from the spec: the actor wrapper owns x/y
+          // (absolute position), the core owns press scale and the
+          // depth/lift offset, the contact shadow owns only its own opacity
+          // and scaleX, the root pulse owns only its own position/opacity/
+          // scale. Never tween two meanings on one transform channel.
+          function buildTouchIndicator(tl, root, { at = 0, elasticity = 1 } = {}) {
+            const defaults = { gesture: "tap", polarity: "light", targetX: 50, targetY: 55 };
+            // Per-instance overrides (a host's data-variable-values) land in
+            // window.__hfVariablesByComp, scoped by composition id. Reading
+            // window.__hfVariables directly here would silently ignore every
+            // host override -- window.__hyperframes.getVariables() is the
+            // scoped accessor, per the registry convention (see
+            // lower-third-bild.html, caption-texture.html).
+            const resolved =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : window.__hfVariables || {};
+            const vars = Object.assign({}, defaults, resolved);
+            const pulse = root.querySelector(".hf-touch-indicator__pulse");
+            const actor = root.querySelector(".hf-touch-indicator__actor");
+            const core = root.querySelector(".hf-touch-indicator__core");
+            const contact = root.querySelector(".hf-touch-indicator__contact");
+            if (vars.polarity === "dark") actor.classList.add("hf-touch-indicator__actor--dark");
+
+            // Compute layout geometry once at setup, never inside an ease/callback.
+            const hostW = root.clientWidth || 1;
+            const hostH = root.clientHeight || 1;
+            const x0 = (vars.targetX / 100) * hostW;
+            const y0 = (vars.targetY / 100) * hostH;
+            tl.set(pulse, { x: x0, y: y0, xPercent: -50, yPercent: -50 }, at);
+
+            // --- IN: fixed, never stretched. ---
+            const approach = q(0.09);
+            const down = q(0.08);
+            tl.fromTo(
+              actor,
+              { x: x0, y: y0, xPercent: -50, yPercent: -50, autoAlpha: 0 },
+              {
+                x: x0,
+                y: y0,
+                xPercent: -50,
+                yPercent: -50,
+                autoAlpha: 1,
+                duration: approach,
+                ease: "power2.out",
+                immediateRender: false,
+              },
+              at,
+            );
+            tl.fromTo(
+              core,
+              { y: -10, scale: 0.72 },
+              { y: 0, scale: 1, duration: approach, ease: "power2.out", immediateRender: false },
+              at,
+            );
+
+            const touchDown = at + approach; // sync point: fixed +0.083s into IN
+            const coreDownScale = vars.gesture === "swipe" ? 0.86 : 0.82;
+            tl.fromTo(
+              core,
+              { scale: 1 },
+              { scale: coreDownScale, duration: down, ease: "power2.in", immediateRender: false },
+              touchDown,
+            );
+            tl.fromTo(
+              contact,
+              { autoAlpha: 0, scaleX: 0.62, xPercent: -50, yPercent: -50 },
+              {
+                autoAlpha: 0.34,
+                scaleX: 1,
+                xPercent: -50,
+                yPercent: -50,
+                duration: down,
+                ease: "power2.in",
+                immediateRender: false,
+              },
+              touchDown,
+            );
+            // Built-in root pulse: same-frame acknowledgement so the
+            // gesture reads even with no host UI wired to react to it.
+            tl.fromTo(
+              pulse,
+              { autoAlpha: 0, scale: 0.4 },
+              {
+                autoAlpha: 0.35,
+                scale: 1,
+                duration: down,
+                ease: "power2.out",
+                immediateRender: false,
+              },
+              touchDown,
+            );
+            tl.to(
+              pulse,
+              { autoAlpha: 0, scale: 1.4, duration: q(0.24), ease: "power2.out" },
+              touchDown + down,
+            );
+
+            const inEnd = at + approach + down;
+
+            // --- HOLD: the only elastic phase. Stretch it, never gsap.timeScale(). ---
+            let holdEnd;
+            if (vars.gesture === "swipe") {
+              // RETIME RANGE: 0.28s - 0.52s per the swipe law. elasticity scales pacing.
+              const swipeDuration = q(clamp(0.34 * elasticity, 0.28, 0.52));
+              const travel = hostH * 0.4; // vertical scroll, 40% of host height (32-68% allowed)
+              const accel = q(swipeDuration * 0.41);
+              const decel = swipeDuration - accel;
+              const bendY = y0 - travel * 0.41;
+              const endY = y0 - travel;
+              tl.fromTo(
+                actor,
+                { x: x0, y: y0 },
+                { x: x0, y: bendY, duration: accel, ease: "power2.in", immediateRender: false },
+                inEnd,
+              );
+              tl.to(actor, { x: x0, y: endY, duration: decel, ease: "power3.out" }, inEnd + accel);
+              holdEnd = inEnd + swipeDuration;
+            } else {
+              // RETIME RANGE: 0.02s - 0.10s. A brief contact dwell, never a
+              // long-press (long-press is a distinct gesture with its own
+              // progress-ring recognizer).
+              const holdDuration = q(clamp(0.02 * elasticity, 0.02, 0.1));
+              holdEnd = inEnd + holdDuration;
+            }
+
+            // --- OUT: fixed, never stretched. ---
+            if (vars.gesture === "swipe") {
+              const liftDuration = q(0.12);
+              tl.to(contact, { autoAlpha: 0, duration: q(0.08), ease: "power2.out" }, holdEnd);
+              tl.to(
+                core,
+                { y: -10, scale: 0.74, duration: liftDuration, ease: "power2.in" },
+                holdEnd,
+              );
+              tl.to(actor, { autoAlpha: 0, duration: liftDuration, ease: "power2.in" }, holdEnd);
+              return { touchDown, holdStart: inEnd, holdEnd, settle: holdEnd + liftDuration };
+            }
+
+            const release = q(0.16);
+            tl.to(core, { scale: 1, duration: release, ease: "power2.out" }, holdEnd);
+            tl.to(
+              contact,
+              { autoAlpha: 0, scaleX: 0.72, duration: q(0.12), ease: "power2.out" },
+              holdEnd,
+            );
+            const liftStart = holdEnd + release; // 0s gap, within the spec's <=0.04s allowance
+            const liftDuration = q(0.12);
+            tl.to(
+              core,
+              { y: -10, scale: 0.74, duration: liftDuration, ease: "power2.in" },
+              liftStart,
+            );
+            tl.to(actor, { autoAlpha: 0, duration: liftDuration, ease: "power2.in" }, liftStart);
+            return { touchDown, holdStart: inEnd, holdEnd, settle: liftStart + liftDuration };
+          }
+
+          // Self-driving mount: build the paused timeline and register it
+          // under this file's own data-composition-id, matching the host's
+          // data-composition-src wiring (sub-compositions.md, Pitfall 2).
+          const root = document.querySelector('[data-composition-id="touch-indicator"]');
+          const tl = gsap.timeline({ paused: true });
+          window.__timelines = window.__timelines || {};
+          window.__timelines["touch-indicator"] = tl;
+          buildTouchIndicator(tl, root, { at: 0 });
+        })();
+      </script>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/tracing-beam/demo.html b/registry/components/tracing-beam/demo.html
new file mode 100644
index 0000000000..2dae3af346
--- /dev/null
+++ b/registry/components/tracing-beam/demo.html
@@ -0,0 +1,92 @@
+<!doctype html>
+<!--
+  tracing-beam demo. This standalone composition mounts tracing-beam.html
+  through data-composition-src. Non-default labels and accent prove variable
+  overrides while the primitive remains sized by its host clip.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Tracing Beam Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #0b0c0e);
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --muted: #94a3b8;
+        --surface: #171923;
+        --border: #3d4152;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-body: Inter, system-ui, sans-serif;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        --radius: 2.8cqmin;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(
+          ellipse at 50% 44%,
+          var(--bg, #1b1830) 0%,
+          var(--bg, #0b0c0e) 70%
+        );
+      }
+
+      .mount-card {
+        width: 76%;
+        height: 58%;
+        left: 12%;
+        top: 21%;
+        container-type: size;
+        overflow: hidden;
+        border: 1px solid color-mix(in srgb, var(--border, #a78bfa) 22%, transparent);
+        border-radius: 34px;
+        background: color-mix(in srgb, var(--surface, #13141d) 88%, transparent);
+        box-shadow: 0 44px 110px color-mix(in srgb, var(--bg, #000000) 48%, transparent);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="tracing-beam-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4.5"
+      data-fps="30"
+    >
+      <div
+        id="tracing-beam-mount"
+        class="mount-card clip"
+        data-composition-id="tracing-beam"
+        data-composition-src="./tracing-beam.html"
+        data-variable-values='{"labels":"Capture,Compose,Render","accent":"violet"}'
+        data-start="0"
+        data-duration="4.5"
+        data-track-index="0"
+        data-width="1459"
+        data-height="626"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["tracing-beam-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/tracing-beam/registry-item.json b/registry/components/tracing-beam/registry-item.json
new file mode 100644
index 0000000000..323a62f15c
--- /dev/null
+++ b/registry/components/tracing-beam/registry-item.json
@@ -0,0 +1,42 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "tracing-beam",
+  "type": "hyperframes:component",
+  "title": "Tracing Beam",
+  "description": "A glowing dash follows one SVG path through three UI elements, lifting and brightening each element in sequence.",
+  "tags": ["motion-primitive", "product-demo", "attention", "beam", "path", "spotlight"],
+  "jobs": ["demonstrate"],
+  "family": "product-demo",
+  "profile": "attention",
+  "evidence": "Aceternity Tracing Beam class, adapted from scroll progress to a deterministic HyperFrames timeline",
+  "files": [
+    {
+      "path": "tracing-beam.html",
+      "target": "compositions/components/tracing-beam.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "labels",
+      "type": "string",
+      "role": "content",
+      "label": "Labels",
+      "description": "Three comma-separated labels shown in path order.",
+      "default": "Search,Preview,Export"
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Beam and active-element color.",
+      "default": "cyan",
+      "options": [
+        { "value": "cyan", "label": "Cyan" },
+        { "value": "violet", "label": "Violet" },
+        { "value": "amber", "label": "Amber" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/tracing-beam/tracing-beam.html b/registry/components/tracing-beam/tracing-beam.html
new file mode 100644
index 0000000000..9614bfb59a
--- /dev/null
+++ b/registry/components/tracing-beam/tracing-beam.html
@@ -0,0 +1,399 @@
+<!doctype html>
+<!--
+  tracing-beam: HyperFrames video primitive (product-demo / attention)
+
+  Concept: one glowing dash follows one authored SVG path through three UI
+  elements. Each element brightens and lifts on arrival, then settles as the
+  dash moves on. The final element stays active until the beam exits.
+
+  Variables:
+    - labels (string, default "Search,Preview,Export"): three comma-separated
+      labels shown in path order.
+    - accent (enum, default "cyan"): cyan, violet, or amber beam color.
+
+  Envelope: fixed 3.00s IN, elastic HOLD, fixed 0.55s OUT. If the mounted
+  duration is shorter than 3.55s, IN and OUT compress proportionally. Only
+  HOLD grows when the mounted duration is longer.
+
+  IN: the stage appears, then the dash visits all three elements in order.
+  HOLD: the dash rests on the final element with a subtle vertical drift.
+  OUT: the dash leaves the path, the final element settles, and the stage fades.
+
+  Mount contract: everything needed at runtime lives inside this template.
+  #root fills the host box with container query units and registers exactly
+  one paused timeline under the hardcoded tracing-beam key.
+-->
+<html
+  lang="en"
+  data-composition-id="tracing-beam"
+  data-composition-duration="4.5"
+  data-composition-variables='[
+    { "id": "labels", "type": "string", "role": "content", "label": "Labels", "description": "Three comma-separated labels shown in path order.", "default": "Search,Preview,Export" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Beam and active-element color.", "default": "cyan", "options": [{ "value": "cyan", "label": "Cyan" }, { "value": "violet", "label": "Violet" }, { "value": "amber", "label": "Amber" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Tracing Beam</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="tracing-beam" data-duration="4.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .tb-clip,
+          .tb-stage {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+          }
+
+          .tb-stage {
+            opacity: 0;
+          }
+
+          .tb-route {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+            overflow: visible;
+          }
+
+          .tb-beam {
+            fill: none;
+            stroke: var(--tb-accent, #5ee7ff);
+            stroke-width: 9;
+            stroke-linecap: round;
+            stroke-linejoin: round;
+            filter: url(#tracing-beam-glow);
+            opacity: 0;
+            will-change: stroke-dashoffset, opacity;
+          }
+
+          .tb-anchor {
+            position: absolute;
+            width: 22cqw;
+            height: 24cqh;
+            transform: translate(-50%, -50%);
+          }
+
+          .tb-anchor:nth-child(1) {
+            left: 15%;
+            top: 60%;
+          }
+
+          .tb-anchor:nth-child(2) {
+            left: 50%;
+            top: 35%;
+          }
+
+          .tb-anchor:nth-child(3) {
+            left: 85%;
+            top: 58%;
+          }
+
+          .tb-node {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            will-change: transform;
+          }
+
+          .tb-halo {
+            position: absolute;
+            inset: -24%;
+            border-radius: 50%;
+            background: radial-gradient(
+              circle,
+              color-mix(in srgb, var(--tb-accent, #5ee7ff) 42%, transparent) 0%,
+              transparent 70%
+            );
+            opacity: 0;
+            will-change: transform, opacity;
+          }
+
+          .tb-card {
+            position: relative;
+            z-index: 1;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            gap: 2.2cqw;
+            padding: 2.4cqh 2.2cqw;
+            overflow: hidden;
+            border: 0.16cqmin solid color-mix(in srgb, var(--border, #475569) 78%, transparent);
+            border-radius: var(--radius, 2.8cqmin);
+            background: color-mix(in srgb, var(--surface, #172033) 92%, transparent);
+            box-shadow: 0 2.4cqh 6cqh color-mix(in srgb, var(--bg, #0b0c0e) 56%, transparent);
+            opacity: 0.48;
+            will-change: opacity;
+          }
+
+          .tb-icon {
+            flex: 0 0 auto;
+            width: 7.5cqmin;
+            aspect-ratio: 1;
+            display: grid;
+            place-items: center;
+            border: 0.14cqmin solid color-mix(in srgb, var(--tb-accent, #5ee7ff) 52%, transparent);
+            border-radius: 2cqmin;
+            background: color-mix(in srgb, var(--tb-accent, #5ee7ff) 14%, var(--surface, #172033));
+            color: var(--tb-accent, #5ee7ff);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
+            font-size: clamp(13px, 3.5cqmin, 28px);
+            font-weight: 760;
+          }
+
+          .tb-copy {
+            min-width: 0;
+          }
+
+          .tb-kicker {
+            margin-bottom: 0.8cqh;
+            color: var(--muted, #94a3b8);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
+            font-size: clamp(9px, 1.7cqmin, 16px);
+            font-weight: 650;
+            letter-spacing: 0.14em;
+            text-transform: uppercase;
+          }
+
+          .tb-label {
+            max-width: 100%;
+            overflow: hidden;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: clamp(13px, 4.6cqmin, 38px);
+            font-weight: 720;
+            line-height: 1.05;
+            letter-spacing: -0.025em;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+        </style>
+
+        <div
+          id="tracing-beam-clip"
+          class="tb-clip clip"
+          data-start="0"
+          data-duration="4.5"
+          data-track-index="0"
+        >
+          <div class="tb-stage">
+            <svg
+              class="tb-route"
+              viewBox="0 0 1000 520"
+              preserveAspectRatio="none"
+              aria-hidden="true"
+            >
+              <defs>
+                <filter id="tracing-beam-glow" x="-30%" y="-30%" width="160%" height="160%">
+                  <feGaussianBlur stdDeviation="7" result="blur" />
+                  <feMerge>
+                    <feMergeNode in="blur" />
+                    <feMergeNode in="SourceGraphic" />
+                  </feMerge>
+                </filter>
+              </defs>
+              <path
+                class="tb-beam"
+                d="M 150 312 C 280 312 335 182 500 182 C 665 182 720 302 850 302"
+              />
+            </svg>
+
+            <div class="tb-nodes">
+              <div class="tb-anchor">
+                <div class="tb-node">
+                  <div class="tb-halo"></div>
+                  <div class="tb-card">
+                    <div class="tb-icon">01</div>
+                    <div class="tb-copy">
+                      <div class="tb-kicker">Step one</div>
+                      <div class="tb-label"></div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="tb-anchor">
+                <div class="tb-node">
+                  <div class="tb-halo"></div>
+                  <div class="tb-card">
+                    <div class="tb-icon">02</div>
+                    <div class="tb-copy">
+                      <div class="tb-kicker">Step two</div>
+                      <div class="tb-label"></div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="tb-anchor">
+                <div class="tb-node">
+                  <div class="tb-halo"></div>
+                  <div class="tb-card">
+                    <div class="tb-icon">03</div>
+                    <div class="tb-copy">
+                      <div class="tb-kicker">Step three</div>
+                      <div class="tb-label"></div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".tb-stage");
+            var beam = root.querySelector(".tb-beam");
+            var nodes = root.querySelectorAll(".tb-node");
+            var labels = root.querySelectorAll(".tb-label");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var defaultLabels = ["Search", "Preview", "Export"];
+            var labelValue = vars.labels == null ? defaultLabels.join(",") : String(vars.labels);
+            var labelParts = labelValue.split(",");
+            for (var i = 0; i < labels.length; i += 1) {
+              var part = labelParts[i] == null ? "" : labelParts[i].trim();
+              labels[i].textContent = part === "" ? defaultLabels[i] : part;
+            }
+
+            var accentName =
+              vars.accent === "violet" || vars.accent === "amber" ? vars.accent : "cyan";
+            var accentColors = {
+              cyan: "var(--accent, #5ee7ff)",
+              violet: "var(--accent-2, #a78bfa)",
+              amber: "var(--brand, #fbbf24)",
+            };
+            root.style.setProperty("--tb-accent", accentColors[accentName]);
+
+            var routeLength = beam.getTotalLength();
+            var dashLength = routeLength * 0.24;
+            beam.style.strokeDasharray = dashLength + " " + routeLength;
+            beam.style.strokeDashoffset = String(dashLength);
+
+            var IN_BASE = 3;
+            var OUT_BASE = 0.55;
+            var BEAM_START_BASE = 0.35;
+            var BEAM_TRAVEL_BASE = 2.35;
+            var NODE_MOVE_BASE = 0.28;
+            var NODE_DIM_DELAY_BASE = 0.65;
+            var BEAM_EXIT_BASE = 0.28;
+
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4.5"));
+            var fixedDuration = IN_BASE + OUT_BASE;
+            var scale = duration < fixedDuration ? duration / fixedDuration : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var BEAM_START = BEAM_START_BASE * scale;
+            var BEAM_TRAVEL = BEAM_TRAVEL_BASE * scale;
+            var NODE_MOVE = NODE_MOVE_BASE * scale;
+            var NODE_DIM_DELAY = NODE_DIM_DELAY_BASE * scale;
+            var BEAM_EXIT = BEAM_EXIT_BASE * scale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var HOLD_START = IN;
+            var OUT_START = IN + HOLD;
+            var arrivals = [BEAM_START, BEAM_START + BEAM_TRAVEL * 0.5, BEAM_START + BEAM_TRAVEL];
+
+            gsap.set(stage, { opacity: 0 });
+            gsap.set(beam, { opacity: 0 });
+            gsap.set(nodes, { y: 0 });
+            gsap.set(root.querySelectorAll(".tb-halo"), { scale: 0.82 });
+
+            var tl = gsap.timeline({ paused: true });
+
+            function brighten(node, at) {
+              var card = node.querySelector(".tb-card");
+              var halo = node.querySelector(".tb-halo");
+              tl.to(node, { y: "-2.2cqh", duration: NODE_MOVE, ease: "power3.out" }, at);
+              tl.to(card, { opacity: 1, duration: NODE_MOVE, ease: "power2.out" }, at);
+              tl.to(halo, { opacity: 0.86, scale: 1, duration: NODE_MOVE, ease: "power3.out" }, at);
+            }
+
+            function dim(node, at) {
+              var card = node.querySelector(".tb-card");
+              var halo = node.querySelector(".tb-halo");
+              tl.to(node, { y: 0, duration: NODE_MOVE, ease: "power2.out" }, at);
+              tl.to(card, { opacity: 0.48, duration: NODE_MOVE, ease: "power2.out" }, at);
+              tl.to(halo, { opacity: 0, scale: 0.82, duration: NODE_MOVE, ease: "power2.out" }, at);
+            }
+
+            tl.to(stage, { opacity: 1, duration: Math.min(0.35, IN), ease: "power2.out" }, 0);
+            tl.to(beam, { opacity: 1, duration: NODE_MOVE, ease: "power2.out" }, BEAM_START);
+            tl.to(
+              beam,
+              {
+                strokeDashoffset: -(routeLength - dashLength),
+                duration: BEAM_TRAVEL,
+                ease: "sine.inOut",
+              },
+              BEAM_START,
+            );
+
+            brighten(nodes[0], arrivals[0]);
+            brighten(nodes[1], arrivals[1]);
+            brighten(nodes[2], arrivals[2]);
+            dim(nodes[0], arrivals[0] + NODE_DIM_DELAY);
+            dim(nodes[1], arrivals[1] + NODE_DIM_DELAY);
+
+            if (HOLD > 0.2) {
+              tl.to(
+                nodes[2],
+                { y: "-2.7cqh", duration: HOLD * 0.5, ease: "sine.inOut" },
+                HOLD_START,
+              );
+              tl.to(
+                nodes[2],
+                { y: "-2.2cqh", duration: HOLD * 0.5, ease: "sine.inOut" },
+                HOLD_START + HOLD * 0.5,
+              );
+            }
+
+            tl.to(
+              beam,
+              {
+                strokeDashoffset: -routeLength,
+                opacity: 0,
+                duration: BEAM_EXIT,
+                ease: "power2.in",
+              },
+              OUT_START,
+            );
+            dim(nodes[2], OUT_START);
+            tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["tracing-beam"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/tracking-in/demo.html b/registry/components/tracking-in/demo.html
new file mode 100644
index 0000000000..6b44e87790
--- /dev/null
+++ b/registry/components/tracking-in/demo.html
@@ -0,0 +1,88 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Tracking In - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      body {
+        font-family: Inter, system-ui, sans-serif;
+        background: #fafafa;
+      }
+      #demo {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: linear-gradient(135deg, #fafafa, #f4f4f5);
+        color: #18181b;
+      }
+      .panel {
+        text-align: center;
+        width: 1260px;
+      }
+      .label {
+        font-size: 28px;
+        font-weight: 600;
+        color: #71717a;
+        text-transform: uppercase;
+        letter-spacing: 0.18em;
+      }
+      .headline {
+        margin-top: 28px;
+        font-size: 118px;
+        line-height: 1;
+        font-weight: 900;
+      }
+      .hf-tracking-in {
+        opacity: 0;
+        letter-spacing: var(--hf-tracking-value, 0.28em);
+        transform: translateY(8px);
+        will-change: opacity, letter-spacing, transform;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="tracking-in-demo"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+    >
+      <div class="panel">
+        <div class="label hf-tracking-in">Editorial motion</div>
+        <div class="headline hf-tracking-in">TRACKING IN</div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        tl.to(
+          ".hf-tracking-in",
+          {
+            opacity: 1,
+            "--hf-tracking-value": "0.02em",
+            y: 0,
+            duration: 0.9,
+            ease: "power3.out",
+            stagger: 0.16,
+          },
+          0.45,
+        );
+        window.__timelines = window.__timelines || {};
+        window.__timelines["tracking-in-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/tracking-in/registry-item.json b/registry/components/tracking-in/registry-item.json
new file mode 100644
index 0000000000..4e6fa97e20
--- /dev/null
+++ b/registry/components/tracking-in/registry-item.json
@@ -0,0 +1,60 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "tracking-in",
+  "type": "hyperframes:component",
+  "title": "Tracking In",
+  "description": "A precise letter-spacing reveal for premium headings and interface labels",
+  "tags": ["motion-primitive", "text", "reveal", "typography"],
+  "files": [
+    {
+      "path": "tracking-in.html",
+      "target": "compositions/components/tracking-in.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "tracking",
+      "type": "enum",
+      "role": "style",
+      "label": "Tracking",
+      "description": "Multiplies the letter-spacing the timeline drives, so the reveal starts and settles proportionally wider or tighter.",
+      "default": "standard",
+      "options": [
+        { "value": "tight", "label": "Tight" },
+        { "value": "standard", "label": "Standard" },
+        { "value": "wide", "label": "Wide" }
+      ]
+    },
+    {
+      "id": "rise",
+      "type": "enum",
+      "role": "motion",
+      "label": "Rise",
+      "description": "Vertical offset the text starts from, which the timeline reads as the start of its travel and eases to zero.",
+      "default": "standard",
+      "options": [
+        { "value": "subtle", "label": "Subtle" },
+        { "value": "standard", "label": "Standard" },
+        { "value": "bold", "label": "Bold" }
+      ]
+    },
+    {
+      "id": "tone",
+      "type": "enum",
+      "role": "style",
+      "label": "Tone",
+      "description": "Text colour: inherit keeps the surrounding page colour, ink suits light frames, paper dark ones, accent rides --brand.",
+      "default": "inherit",
+      "options": [
+        { "value": "inherit", "label": "Inherit" },
+        { "value": "ink", "label": "Ink" },
+        { "value": "paper", "label": "Paper" },
+        { "value": "accent", "label": "Accent" }
+      ]
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/tracking-in.png"
+  }
+}
diff --git a/registry/components/tracking-in/tracking-in.html b/registry/components/tracking-in/tracking-in.html
new file mode 100644
index 0000000000..d58a211180
--- /dev/null
+++ b/registry/components/tracking-in/tracking-in.html
@@ -0,0 +1,95 @@
+<!--
+  Tracking In - letter-spacing reveal.
+
+  Add class="hf-tracking-in" to text elements, then animate the CSS variable
+  from wide tracking to the final value in your composition timeline.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result as a custom property
+  on the document root, which every element carrying the class inherits. The
+  timeline recipe below is untouched by them: it keeps driving one tracking
+  value and one opacity, and these decide how wide that tracking reads, where
+  the text starts, and what colour it settles in.
+
+    - tracking (tight | standard | wide, default standard): multiplies the
+      letter-spacing the timeline drives. It scales the whole curve, so the
+      reveal starts proportionally wider or tighter and settles the same way.
+      tight is 0.6 of the shipped spacing, wide is 1.8 of it.
+    - rise (subtle | standard | bold, default standard): the vertical offset
+      the text starts from, which the timeline reads as the start of its
+      travel and eases to zero. subtle is 4px, standard the shipped 8px, bold
+      18px.
+    - tone (inherit | ink | paper | accent, default inherit): text colour.
+      inherit leaves the surrounding page colour alone, ink is near-black for
+      light frames, paper near-white for dark ones, accent rides --brand.
+      The class starts at opacity 0, so the colour only becomes visible once
+      the timeline reveals the text.
+
+  On every default the result is identical to the original: text at the page
+  colour rising 8px into place out of 0.28em tracking.
+-->
+
+<style
+  data-composition-variables='[
+    { "id": "tracking", "type": "enum", "role": "style", "label": "Tracking", "description": "Multiplies the letter-spacing the timeline drives, so the reveal starts and settles proportionally wider or tighter.", "default": "standard", "options": [{ "value": "tight", "label": "Tight" }, { "value": "standard", "label": "Standard" }, { "value": "wide", "label": "Wide" }] },
+    { "id": "rise", "type": "enum", "role": "motion", "label": "Rise", "description": "Vertical offset the text starts from, which the timeline reads as the start of its travel and eases to zero.", "default": "standard", "options": [{ "value": "subtle", "label": "Subtle" }, { "value": "standard", "label": "Standard" }, { "value": "bold", "label": "Bold" }] },
+    { "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Text colour: inherit keeps the surrounding page colour, ink suits light frames, paper dark ones, accent rides --brand.", "default": "inherit", "options": [{ "value": "inherit", "label": "Inherit" }, { "value": "ink", "label": "Ink" }, { "value": "paper", "label": "Paper" }, { "value": "accent", "label": "Accent" }] }
+  ]'
+>
+  .hf-tracking-in {
+    opacity: 0;
+    color: var(--hf-tracking-color, inherit);
+    letter-spacing: calc(var(--hf-tracking-value, 0.28em) * var(--hf-tracking-reach, 1));
+    transform: translateY(var(--hf-tracking-y, 8px));
+    will-change: opacity, letter-spacing, transform;
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    var reaches = { tight: 0.6, standard: 1, wide: 1.8 };
+    var rises = { subtle: "4px", standard: "8px", bold: "18px" };
+    var tones = {
+      inherit: "inherit",
+      ink: "#18181b",
+      paper: "#fafafa",
+      accent: "var(--brand, #34d399)",
+    };
+
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var reach = reaches[pick(reaches, vars.tracking, "standard")];
+    var rise = rises[pick(rises, vars.rise, "standard")];
+    var tone = tones[pick(tones, vars.tone, "inherit")];
+
+    // The class is applied to arbitrary host elements, so the resolved values
+    // ride the document root and inherit down to every one of them.
+    var host = document.documentElement;
+    host.style.setProperty("--hf-tracking-reach", String(reach));
+    host.style.setProperty("--hf-tracking-y", rise);
+    host.style.setProperty("--hf-tracking-color", tone);
+  })();
+</script>
+
+<!--
+  Timeline integration:
+
+  tl.to(".hf-tracking-in", {
+    opacity: 1,
+    "--hf-tracking-value": "0.02em",
+    y: 0,
+    duration: 0.9,
+    ease: "power3.out",
+    stagger: 0.1,
+  }, startTime);
+-->
diff --git a/registry/components/trust-strip/README.md b/registry/components/trust-strip/README.md
new file mode 100644
index 0000000000..8bd9121a3e
--- /dev/null
+++ b/registry/components/trust-strip/README.md
@@ -0,0 +1,48 @@
+# trust-strip
+
+Monochrome trust/logo strip (proof & stats, 3.5s authored, elastic HOLD).
+
+N text wordmarks set in wide-tracked uppercase mono, one centered row with wide
+gaps, no boxes, no borders. Marks fade in with an opacity-only stagger from
+left to right (default 0.15s gap), then the strip holds dead still. Above five
+marks the row wraps gracefully to a second centered row when width demands;
+reading order and reveal order are preserved.
+
+## Variables
+
+| Variable | Type                          | Default                                        | Notes                                                                                                                                               |
+| -------- | ----------------------------- | ---------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `marks`  | string                        | `Northwind, Acme Corp, Globex, Initech, Umbra` | Comma list of wordmark texts. 3 to 7 recommended.                                                                                                   |
+| `tone`   | `muted` \| `ink`              | `muted`                                        | Mark color: `var(--muted)` or `var(--fg)`.                                                                                                          |
+| `cues`   | string                        | `""`                                           | Comma seconds from mount start, one per mark. Missing tail entries extend from the last cue by 0.15s. Empty = authored rhythm (first mark at 0.2s). |
+| `accent` | `green` \| `blue` \| `violet` | `green`                                        | Faint 10% tint mixed into the mark color (green `--brand`, blue `--accent`, violet `--accent-2`). The strip still reads monochrome.                 |
+| `exit`   | `none` \| `fade` \| `up`      | `none`                                         | `none` holds to the last frame (frame roots own transitions). `fade` dissolves the strip over 0.45s; `up` adds a small rise.                        |
+
+## Envelope
+
+Fixed IN and OUT with elastic HOLD only (never timeScale):
+
+- IN = last reveal start + 0.5s fade (about 1.3s for 5 marks on the default rhythm)
+- HOLD = max(0, D - IN - OUT), dead still by design
+- OUT = 0 when `exit` is `none`, else 0.45s
+- If the host duration is shorter than IN + OUT, both compress together (cues included).
+
+## Mounting
+
+Mount-contract sub-composition: load via `data-composition-src`, give the clip
+a wide, short box (a strip band), and the primitive sizes off that box with
+container queries. Consumes contract tokens (`--muted`, `--fg`, `--brand`,
+`--accent`, `--accent-2`, `--bg`, `--font-mono`, `--space-2`, `--space-3`)
+with exact-value fallbacks.
+
+```html
+<div
+  class="clip"
+  data-composition-id="trust-strip"
+  data-composition-src="./components/trust-strip.html"
+  data-variable-values='{"marks":"Northwind, Globex, Umbra","tone":"ink"}'
+  data-start="0"
+  data-duration="3.5"
+  data-track-index="0"
+></div>
+```
diff --git a/registry/components/trust-strip/demo.html b/registry/components/trust-strip/demo.html
new file mode 100644
index 0000000000..88bd81e5c2
--- /dev/null
+++ b/registry/components/trust-strip/demo.html
@@ -0,0 +1,82 @@
+<!doctype html>
+<!--
+  trust-strip demo. Generous wide mount (90% x 50%, centered vertically) on a
+  light editorial backdrop: the five logo marks spread across the frame with
+  real presence instead of being pinched into a narrow band.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>trust-strip Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #f4f6f9);
+      }
+
+      #root {
+        --bg: #f4f6f9;
+        --fg: #14161b;
+        --surface: #ffffff;
+        --border: #dfe4ec;
+        --brand: #1d4ed8;
+        --accent: #0284c7;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 40%, #ffffff 0%, var(--bg, #f4f6f9) 70%);
+      }
+
+      .mount-stage {
+        width: 90%;
+        height: 50%;
+        left: 5%;
+        top: 25%;
+        container-type: size;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="trust-strip-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="3.5"
+      data-fps="30"
+    >
+      <div
+        id="trust-strip-mount"
+        class="mount-stage clip"
+        data-composition-id="trust-strip"
+        data-composition-src="./trust-strip.html"
+        data-variable-values='{"marks":"NORTHWIND,ACME CORP,GLOBEX,INITECH,UMBRA","tone":"muted"}'
+        data-start="0"
+        data-duration="3.5"
+        data-track-index="0"
+        data-width="1728"
+        data-height="540"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["trust-strip-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/trust-strip/registry-item.json b/registry/components/trust-strip/registry-item.json
new file mode 100644
index 0000000000..e53f90431f
--- /dev/null
+++ b/registry/components/trust-strip/registry-item.json
@@ -0,0 +1,76 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "trust-strip",
+  "type": "hyperframes:component",
+  "title": "Trust Strip",
+  "description": "A monochrome trust row of wide-tracked mono wordmarks that fade in with an opacity-only left-to-right stagger, then hold dead still.",
+  "tags": ["motion-primitive", "proof", "trust", "logo-strip", "wordmarks"],
+  "jobs": ["prove"],
+  "family": "proof-and-stats",
+  "profile": "quiet-proof",
+  "evidence": "Video Primitives Wave J J1-8 trust-strip contract; cohere-north-launch 06-proof trust strip",
+  "syncPoints": [{ "id": "strip-complete", "phase": "in", "offset": 1.3 }],
+  "files": [
+    {
+      "path": "trust-strip.html",
+      "target": "compositions/components/trust-strip.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "marks",
+      "type": "string",
+      "role": "content",
+      "label": "Marks",
+      "description": "Comma-separated wordmark texts (3 to 7 recommended).",
+      "default": "Northwind, Acme Corp, Globex, Initech, Umbra"
+    },
+    {
+      "id": "tone",
+      "type": "enum",
+      "role": "style",
+      "label": "Tone",
+      "description": "Mark color: quiet muted or full-contrast ink.",
+      "default": "muted",
+      "options": [
+        { "value": "muted", "label": "Muted" },
+        { "value": "ink", "label": "Ink" }
+      ]
+    },
+    {
+      "id": "cues",
+      "type": "string",
+      "role": "timing",
+      "label": "Cues",
+      "description": "Comma-separated reveal starts in seconds from mount start. Empty uses the authored 0.15s stagger.",
+      "default": ""
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Faint palette tint mixed into the mark color.",
+      "default": "green",
+      "options": [
+        { "value": "green", "label": "Green" },
+        { "value": "blue", "label": "Blue" },
+        { "value": "violet", "label": "Violet" }
+      ]
+    },
+    {
+      "id": "exit",
+      "type": "enum",
+      "role": "timing",
+      "label": "Exit",
+      "description": "End-of-clip behavior. None holds to the last frame.",
+      "default": "none",
+      "options": [
+        { "value": "none", "label": "None" },
+        { "value": "fade", "label": "Fade" },
+        { "value": "up", "label": "Up" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/trust-strip/trust-strip.html b/registry/components/trust-strip/trust-strip.html
new file mode 100644
index 0000000000..56bc00a7a7
--- /dev/null
+++ b/registry/components/trust-strip/trust-strip.html
@@ -0,0 +1,226 @@
+<!doctype html>
+<!--
+  trust-strip: HyperFrames video primitive (proof & stats / trust)
+
+  A monochrome trust row: N text wordmarks set in wide-tracked uppercase mono,
+  a single centered row with wide gaps, no boxes, no borders. Marks fade in
+  with an opacity-only stagger from left to right, then the strip holds dead
+  still. Above five marks the row wraps gracefully to a second centered row
+  when width demands (reading order is preserved).
+
+  Variables:
+    - marks (string, comma list): the wordmark texts, 3 to 7 recommended.
+    - tone (muted | ink, default "muted"): mark color, var(--muted) or var(--fg).
+    - cues (string, comma seconds): per-mark reveal starts relative to mount
+      start. Empty = authored rhythm (first mark at 0.2s, 0.15s gap).
+    - accent (green | blue | violet, default "green"): a faint 10% tint mixed
+      into the mark color so the strip sits in the scene palette; the strip
+      still reads monochrome.
+    - exit (none | fade | up, default "none"): none holds to the last frame
+      (frame roots own transitions); fade dissolves; up dissolves with a rise.
+
+  Envelope, fixed IN and OUT with elastic HOLD only (never timeScale):
+    IN   = last reveal start + 0.5s fade
+    HOLD = max(0, D - IN - OUT), dead still
+    OUT  = 0 when exit is none, else 0.45s
+    If D is shorter than IN + OUT, both compress together (cues included).
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, has no data-width or
+  data-height, and registers one paused timeline under the literal
+  trust-strip key.
+-->
+<html
+  lang="en"
+  data-composition-id="trust-strip"
+  data-composition-duration="3.5"
+  data-composition-variables='[
+    { "id": "marks", "type": "string", "role": "content", "label": "Marks", "description": "Comma-separated wordmark texts (3 to 7 recommended).", "default": "Northwind, Acme Corp, Globex, Initech, Umbra" },
+    { "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Mark color: quiet muted or full-contrast ink.", "default": "muted", "options": [{ "value": "muted", "label": "Muted" }, { "value": "ink", "label": "Ink" }] },
+    { "id": "cues", "type": "string", "role": "timing", "label": "Cues", "description": "Comma-separated reveal starts in seconds from mount start. Empty uses the authored 0.15s stagger.", "default": "" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Faint palette tint mixed into the mark color.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "End-of-clip behavior. None holds to the last frame.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Trust Strip</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="trust-strip" data-duration="3.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            background: var(--bg, transparent);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            pointer-events: none;
+          }
+
+          .ts-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+          }
+
+          .ts-strip {
+            display: flex;
+            flex-wrap: wrap;
+            align-items: baseline;
+            justify-content: center;
+            width: 86cqw;
+            max-width: 86cqw;
+            column-gap: var(--space-3, 4.8cqw);
+            row-gap: var(--space-2, 4.2cqh);
+            will-change: transform, opacity;
+          }
+
+          .ts-mark {
+            /* Monochrome by law: the tone token carries the color; the accent
+               token only tints it 10% so the strip sits in the palette. */
+            color: color-mix(in srgb, var(--ts-tone) 90%, var(--ts-accent));
+            font-size: min(1.9cqw, 6.4cqh);
+            font-weight: 400;
+            line-height: 1;
+            letter-spacing: 0.32em;
+            text-transform: uppercase;
+            white-space: nowrap;
+            will-change: opacity;
+          }
+        </style>
+
+        <div
+          id="trust-strip-clip"
+          class="ts-clip clip"
+          data-start="0"
+          data-duration="3.5"
+          data-track-index="0"
+        >
+          <div class="ts-strip" role="img"></div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var strip = root.querySelector(".ts-strip");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var marks = String(vars.marks == null ? "" : vars.marks)
+              .split(",")
+              .map(function (mark) {
+                return mark.trim();
+              })
+              .filter(Boolean);
+            if (marks.length === 0)
+              marks = ["Northwind", "Acme Corp", "Globex", "Initech", "Umbra"];
+
+            var tone = vars.tone === "ink" ? "ink" : "muted";
+            var toneColors = {
+              muted: "var(--muted, #93939f)",
+              ink: "var(--fg, #f8fafc)",
+            };
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            root.style.setProperty("--ts-tone", toneColors[tone]);
+            root.style.setProperty("--ts-accent", accentColors[accent]);
+            strip.setAttribute("aria-label", marks.join(", "));
+
+            var spans = marks.map(function (mark) {
+              var span = document.createElement("span");
+              span.className = "ts-mark";
+              span.textContent = mark;
+              span.setAttribute("aria-hidden", "true");
+              strip.appendChild(span);
+              return span;
+            });
+
+            var LEAD_BASE = 0.2;
+            var GAP_BASE = 0.15;
+            var FADE_BASE = 0.5;
+            var OUT_BASE = exit === "none" ? 0 : 0.45;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "3.5"));
+
+            // Reveal starts: caller cues win; missing tail entries extend from
+            // the last known start by the authored gap.
+            var cues = String(vars.cues == null ? "" : vars.cues)
+              .split(",")
+              .map(function (cue) {
+                return parseFloat(cue);
+              })
+              .filter(function (cue) {
+                return isFinite(cue) && cue >= 0;
+              });
+            var starts = marks.map(function (mark, index) {
+              if (index < cues.length) return cues[index];
+              if (cues.length > 0)
+                return cues[cues.length - 1] + GAP_BASE * (index - cues.length + 1);
+              return LEAD_BASE + GAP_BASE * index;
+            });
+
+            var IN_BASE = Math.max.apply(null, starts) + FADE_BASE;
+            var totalBase = IN_BASE + OUT_BASE;
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var FADE = FADE_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var OUT_START = duration - OUT;
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: opacity-only stagger, left to right in reading order.
+            spans.forEach(function (span, index) {
+              tl.fromTo(
+                span,
+                { opacity: 0 },
+                { opacity: 1, duration: FADE, ease: "power2.out" },
+                starts[index] * scale,
+              );
+            });
+
+            // HOLD: dead still. Nothing is authored here on purpose.
+
+            // OUT: optional whole-strip departure; frame roots own transitions
+            // by default, so exit "none" holds to the last frame.
+            if (exit === "fade") {
+              tl.to(strip, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "up") {
+              tl.to(strip, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+              tl.to(strip, { y: "-1.6cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["trust-strip"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/type-match-cut/demo.html b/registry/components/type-match-cut/demo.html
new file mode 100644
index 0000000000..54fd596816
--- /dev/null
+++ b/registry/components/type-match-cut/demo.html
@@ -0,0 +1,84 @@
+<!doctype html>
+<!--
+  type-match-cut demo. This standalone composition mounts type-match-cut.html
+  inside a sized host clip. Non-default copy and accent prove both variables
+  flow through the elastic mount.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Type Match Cut Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0b0c0e;
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f7f8fa;
+        --font-display: Inter, system-ui, sans-serif;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 44%, #1b1e24 0%, var(--bg) 72%);
+      }
+
+      .mount-card {
+        width: 80%;
+        height: 72%;
+        left: 10%;
+        top: 14%;
+        container-type: size;
+        overflow: hidden;
+        border: 2px solid rgba(247, 248, 250, 0.14);
+        border-radius: 32px;
+        background: #0b0c0e;
+        box-shadow: 0 52px 130px rgba(0, 0, 0, 0.52);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="type-match-cut-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="type-match-cut-mount"
+        class="mount-card clip"
+        data-composition-id="type-match-cut"
+        data-composition-src="./type-match-cut.html"
+        data-variable-values='{"text":"Ideas become motion","accent":"violet"}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="1536"
+        data-height="778"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      var tl = gsap.timeline({ paused: true });
+      tl.seek(0);
+      window.__timelines = window.__timelines || {};
+      window.__timelines["type-match-cut-demo"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/registry/components/type-match-cut/registry-item.json b/registry/components/type-match-cut/registry-item.json
new file mode 100644
index 0000000000..61b9fb33f2
--- /dev/null
+++ b/registry/components/type-match-cut/registry-item.json
@@ -0,0 +1,43 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "type-match-cut",
+  "type": "hyperframes:component",
+  "title": "Type Match Cut",
+  "description": "A headline splits vertically around an incoming panel, which grows from the negative space and takes the frame as the words exit through opposite edges.",
+  "tags": ["motion-primitive", "transition", "typography", "match-cut", "continuity"],
+  "jobs": ["bridge"],
+  "family": "transitions",
+  "profile": "match-cut",
+  "evidence": "Wave H U30 type-match-cut specification, inspired by the verified MONOLOG type-to-image transition",
+  "syncPoints": [{ "id": "panel-slot", "phase": "in", "offset": 0.58 }],
+  "files": [
+    {
+      "path": "type-match-cut.html",
+      "target": "compositions/components/type-match-cut.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "text",
+      "type": "string",
+      "role": "content",
+      "label": "Headline",
+      "description": "Text split around the incoming panel.",
+      "default": "Meet the new editor"
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Accent color used by the incoming editor scene.",
+      "default": "green",
+      "options": [
+        { "value": "green", "label": "Green" },
+        { "value": "blue", "label": "Blue" },
+        { "value": "violet", "label": "Violet" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/type-match-cut/type-match-cut.html b/registry/components/type-match-cut/type-match-cut.html
new file mode 100644
index 0000000000..24c0cb3cec
--- /dev/null
+++ b/registry/components/type-match-cut/type-match-cut.html
@@ -0,0 +1,407 @@
+<!doctype html>
+<!--
+  type-match-cut: HyperFrames video primitive
+
+  A headline splits into upper and lower word groups. An incoming editor
+  panel appears in the negative space between them, holds there as a visible
+  geometric match, then grows to fill the frame while the words arc through
+  the top and bottom edges.
+
+  Variables:
+    text: headline copy
+    accent: green, blue, or violet incoming-scene accent
+
+  Envelope, fixed IN and OUT with elastic HOLD:
+    IN_BASE  = 1.05s, words separate and expose the matched panel slot
+    HOLD     = max(0, D - IN - OUT), the slot breathes almost imperceptibly
+    OUT_BASE = 1.15s, the panel takes the frame while both word groups exit
+    If D is shorter than IN_BASE + OUT_BASE, IN and OUT compress together.
+    The timeline is never time-scaled.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, and has no data-width or
+  data-height. One paused timeline registers under the literal type-match-cut
+  key.
+-->
+<html
+  lang="en"
+  data-composition-id="type-match-cut"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "text", "type": "string", "role": "content", "label": "Headline", "description": "Text split around the incoming panel.", "default": "Meet the new editor" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Accent color used by the incoming editor scene.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Type Match Cut</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="type-match-cut" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            background: var(--bg, #0b0c0e);
+            color: var(--fg, #f7f8fa);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .tmc-clip,
+          .tmc-panel,
+          .tmc-copy {
+            position: absolute;
+            inset: 0;
+            width: 100cqw;
+            height: 100cqh;
+          }
+
+          .tmc-clip {
+            overflow: hidden;
+          }
+
+          .tmc-panel {
+            z-index: 1;
+            overflow: hidden;
+            background: linear-gradient(145deg, #f8fafc 0%, #e8edf5 100%);
+            box-shadow: 0 4cqh 12cqh color-mix(in srgb, #000 45%, transparent);
+            transform-origin: 50% 50%;
+            will-change: transform, border-radius;
+          }
+
+          .tmc-editor {
+            width: 100%;
+            height: 100%;
+            display: grid;
+            grid-template-columns: 22cqw 1fr;
+            grid-template-rows: 11cqh 1fr;
+            color: #111827;
+          }
+
+          .tmc-toolbar {
+            grid-column: 1 / -1;
+            display: flex;
+            align-items: center;
+            gap: 1.1cqw;
+            padding: 0 4cqw;
+            border-bottom: 0.16cqmin solid #cbd5e1;
+            background: rgba(255, 255, 255, 0.72);
+          }
+
+          .tmc-mark {
+            width: 2.4cqmin;
+            aspect-ratio: 1;
+            border-radius: 50%;
+            background: var(--tmc-accent, #34d399);
+            box-shadow: 0 0 2cqmin color-mix(in srgb, var(--tmc-accent, #34d399) 46%, transparent);
+          }
+
+          .tmc-title {
+            font-size: 2.4cqmin;
+            font-weight: 800;
+            letter-spacing: -0.03em;
+          }
+
+          .tmc-status {
+            margin-left: auto;
+            padding: 1.1cqh 1.4cqw;
+            border-radius: 999px;
+            background: var(--tmc-accent, #34d399);
+            color: #07110d;
+            font-size: 1.7cqmin;
+            font-weight: 800;
+          }
+
+          .tmc-sidebar {
+            display: flex;
+            flex-direction: column;
+            gap: 2.4cqh;
+            padding: 5cqh 3cqw;
+            border-right: 0.16cqmin solid #cbd5e1;
+            background: #eef2f7;
+          }
+
+          .tmc-nav {
+            height: 1.5cqh;
+            border-radius: 999px;
+            background: #cbd5e1;
+          }
+
+          .tmc-nav:first-child {
+            width: 76%;
+            background: var(--tmc-accent, #34d399);
+          }
+
+          .tmc-nav:nth-child(2) {
+            width: 58%;
+          }
+
+          .tmc-nav:nth-child(3) {
+            width: 82%;
+          }
+
+          .tmc-canvas {
+            display: grid;
+            place-items: center;
+            padding: 7cqh 8cqw;
+            background: #dfe5ee;
+          }
+
+          .tmc-preview {
+            width: 100%;
+            height: 100%;
+            display: grid;
+            place-items: center;
+            border: 0.18cqmin solid #c2cad6;
+            border-radius: 3cqmin;
+            background: radial-gradient(
+              circle at 50% 42%,
+              color-mix(in srgb, var(--tmc-accent, #34d399) 32%, #1f2937) 0%,
+              #111827 68%
+            );
+            box-shadow: 0 3cqh 8cqh rgba(15, 23, 42, 0.2);
+          }
+
+          .tmc-play {
+            width: 12cqmin;
+            aspect-ratio: 1;
+            display: grid;
+            place-items: center;
+            border-radius: 50%;
+            background: var(--tmc-accent, #34d399);
+            color: #07110d;
+            font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+            font-size: 4.2cqmin;
+            font-weight: 900;
+          }
+
+          .tmc-copy {
+            z-index: 2;
+            overflow: hidden;
+            text-shadow: 0 1.4cqh 4.8cqh rgba(0, 0, 0, 0.72);
+          }
+
+          .tmc-half {
+            position: absolute;
+            top: calc(50% - 0.44em);
+            display: block;
+            width: 40cqw;
+            color: var(--fg, #f7f8fa);
+            font-size: var(--tmc-font-size, 10.5cqw);
+            font-weight: 900;
+            line-height: 0.88;
+            letter-spacing: -0.045em;
+            white-space: nowrap;
+            will-change: transform;
+          }
+
+          .tmc-top {
+            right: 52cqw;
+            text-align: right;
+          }
+
+          .tmc-bottom {
+            left: 52cqw;
+            text-align: left;
+          }
+        </style>
+
+        <div
+          id="type-match-cut-clip"
+          class="tmc-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <section class="tmc-panel" aria-label="Incoming editor scene">
+            <div class="tmc-editor">
+              <div class="tmc-toolbar">
+                <span class="tmc-mark" aria-hidden="true"></span>
+                <span class="tmc-title">New editor</span>
+                <span class="tmc-status">Ready</span>
+              </div>
+              <div class="tmc-sidebar" aria-hidden="true">
+                <span class="tmc-nav"></span>
+                <span class="tmc-nav"></span>
+                <span class="tmc-nav"></span>
+              </div>
+              <div class="tmc-canvas">
+                <div class="tmc-preview">
+                  <span class="tmc-play" aria-hidden="true">▶</span>
+                </div>
+              </div>
+            </div>
+          </section>
+
+          <div class="tmc-copy" role="heading" aria-level="1">
+            <span class="tmc-half tmc-top" aria-hidden="true"></span>
+            <span class="tmc-half tmc-bottom" aria-hidden="true"></span>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var panel = root.querySelector(".tmc-panel");
+            var copy = root.querySelector(".tmc-copy");
+            var topWords = root.querySelector(".tmc-top");
+            var bottomWords = root.querySelector(".tmc-bottom");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var text = vars.text == null ? "Meet the new editor" : String(vars.text);
+            var accentName =
+              vars.accent === "blue" || vars.accent === "violet" ? vars.accent : "green";
+            var accents = { green: "#34d399", blue: "#60a5fa", violet: "#a78bfa" };
+            var words = text.trim() === "" ? [""] : text.trim().split(/\s+/);
+            var splitAt = Math.ceil(words.length / 2);
+            var topText = words.slice(0, splitAt).join(" ");
+            var bottomText = words.slice(splitAt).join(" ");
+
+            root.style.setProperty("--tmc-accent", accents[accentName]);
+            copy.setAttribute("aria-label", text);
+            topWords.textContent = topText;
+            bottomWords.textContent = bottomText;
+
+            // Deterministic fit from character count. Layout measurement is
+            // zero while the mounted template is being constructed, so each
+            // half is sized against its authored 40cqw box instead. One em per
+            // character is the conservative ceiling, so even wide glyph runs
+            // remain inside the box.
+            var longestHalf = Math.max(1, topText.length, bottomText.length);
+            var fittedSize = Math.min(10.5, 40 / longestHalf);
+            root.style.setProperty("--tmc-font-size", fittedSize.toFixed(2) + "cqw");
+
+            var IN_BASE = 1.05;
+            var OUT_BASE = 1.15;
+            var SPLIT_AT_BASE = 0.14;
+            var SPLIT_DURATION_BASE = 0.58;
+            var PANEL_AT_BASE = 0.58;
+            var PANEL_DURATION_BASE = 0.47;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var fixedTotal = IN_BASE + OUT_BASE;
+            var phaseScale = duration < fixedTotal ? duration / fixedTotal : 1;
+            var IN = IN_BASE * phaseScale;
+            var OUT = OUT_BASE * phaseScale;
+            var SPLIT_AT = SPLIT_AT_BASE * phaseScale;
+            var SPLIT_DURATION = SPLIT_DURATION_BASE * phaseScale;
+            var PANEL_AT = PANEL_AT_BASE * phaseScale;
+            var PANEL_DURATION = PANEL_DURATION_BASE * phaseScale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var HOLD_START = IN;
+            var OUT_START = IN + HOLD;
+            var ARC_FIRST = OUT * 0.42;
+            var ARC_SECOND = OUT - ARC_FIRST;
+
+            var tl = gsap.timeline({ paused: true });
+
+            tl.set(panel, { scaleX: 0.02, scaleY: 0.02, borderRadius: "12cqmin" }, 0);
+            tl.set(topWords, { x: 0, y: 0 }, 0);
+            tl.set(bottomWords, { x: 0, y: 0 }, 0);
+
+            tl.to(
+              topWords,
+              { y: "-20cqh", duration: SPLIT_DURATION, ease: "power3.out" },
+              SPLIT_AT,
+            );
+            tl.to(
+              bottomWords,
+              { y: "20cqh", duration: SPLIT_DURATION, ease: "power3.out" },
+              SPLIT_AT,
+            );
+            tl.to(
+              panel,
+              {
+                scaleX: 0.46,
+                scaleY: 0.14,
+                borderRadius: "6cqmin",
+                duration: PANEL_DURATION,
+                ease: "power3.out",
+              },
+              PANEL_AT,
+            );
+
+            if (HOLD > 0) {
+              tl.to(
+                panel,
+                {
+                  scaleX: 0.47,
+                  scaleY: 0.145,
+                  duration: HOLD / 2,
+                  ease: "sine.inOut",
+                  yoyo: true,
+                  repeat: 1,
+                },
+                HOLD_START,
+              );
+            }
+
+            tl.to(
+              panel,
+              {
+                scaleX: 1,
+                scaleY: 1,
+                borderRadius: 0,
+                duration: OUT,
+                ease: "power4.out",
+              },
+              OUT_START,
+            );
+
+            // Two authored segments create an arc instead of a straight exit.
+            tl.to(
+              topWords,
+              { x: "3cqw", y: "-42cqh", duration: ARC_FIRST, ease: "power2.in" },
+              OUT_START,
+            );
+            tl.to(
+              topWords,
+              {
+                x: "-5cqw",
+                y: "-125cqh",
+                duration: ARC_SECOND,
+                ease: "power2.in",
+              },
+              OUT_START + ARC_FIRST,
+            );
+            tl.to(
+              bottomWords,
+              { x: "-3cqw", y: "42cqh", duration: ARC_FIRST, ease: "power2.in" },
+              OUT_START,
+            );
+            tl.to(
+              bottomWords,
+              {
+                x: "5cqw",
+                y: "125cqh",
+                duration: ARC_SECOND,
+                ease: "power2.in",
+              },
+              OUT_START + ARC_FIRST,
+            );
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["type-match-cut"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/typed-prompt/README.md b/registry/components/typed-prompt/README.md
new file mode 100644
index 0000000000..85fe7fd649
--- /dev/null
+++ b/registry/components/typed-prompt/README.md
@@ -0,0 +1,38 @@
+# typed-prompt
+
+A prompt line types itself in chunked human cadence behind a deterministic blinking caret, on a token-styled mono surface. Optionally the final word is first mistyped, backspaced, and retyped (correction mode). Product demo family, authored at 4s with an elastic HOLD.
+
+## Mechanic
+
+Every visible frame is read from one lookup table of text-at-time rows, built synchronously (fixed-seed LCG, no `Date.now`, no `Math.random`) before the timeline registers. A single `ease: "none"` driver reads `textAt(time)` from the table, so seeking forward, backward, or repeatedly to the same time always shows the same string; there is no incremental typing state. The caret runs an integer number of sine cycles across exactly the typing window, then is pinned solid for the hold.
+
+## Variables
+
+| Variable       | Type   | Default                           | Notes                                                                                                 |
+| -------------- | ------ | --------------------------------- | ----------------------------------------------------------------------------------------------------- |
+| `text`         | string | `Generate a product launch video` | The prompt that gets typed. The resting text always equals `text`.                                    |
+| `prompt_glyph` | string | `>`                               | Leading glyph. Empty string hides it.                                                                 |
+| `cadence`      | enum   | `human`                           | `uniform` = one character per fixed step; `human` = seeded 1-3 character chunks, varied gaps.         |
+| `caret`        | enum   | `blink`                           | `blink` = integer sine cycles during typing, then solid; `solid` never blinks.                        |
+| `correction`   | string | `""`                              | The mistyped word: typed in place of the final word, backspaced, then the true word retypes.          |
+| `cues`         | string | `""`                              | Comma-separated seconds from mount start; cue N anchors the start of word N. Empty = authored rhythm. |
+| `accent`       | enum   | `green`                           | `green` -> `--brand`, `blue` -> `--accent`, `violet` -> `--accent-2` (glyph + caret).                 |
+| `exit`         | enum   | `none`                            | `none` holds the end frame (frame roots own transitions), `fade`, or `up`.                            |
+
+## Envelope
+
+Panel settles over 0.5s; typing starts at 0.35s and runs at its natural cadence, compressed proportionally only if it would overflow `duration - OUT`. All extra duration becomes HOLD (solid caret, barely-there drift ending in stillness). OUT (0.45s) exists only when `exit` is not `none`. The timeline is never time-scaled.
+
+## Usage
+
+```html
+<div
+  class="clip"
+  data-start="0"
+  data-duration="4"
+  data-composition-src="components/typed-prompt.html"
+  data-composition-variables='{ "text": "Summarize this contract", "correction": "contarct", "accent": "blue" }'
+></div>
+```
+
+The root is elastic (no fixed dimensions) and reads correctly in any host box. Timeline registers under the literal key `typed-prompt`.
diff --git a/registry/components/typed-prompt/demo.html b/registry/components/typed-prompt/demo.html
new file mode 100644
index 0000000000..deb6b2afcd
--- /dev/null
+++ b/registry/components/typed-prompt/demo.html
@@ -0,0 +1,86 @@
+<!doctype html>
+<!--
+  typed-prompt demo. Generous centered mount (88% x 70%) on a light editorial
+  backdrop: the prompt card gets real presence in the frame while the human
+  cadence and non-default text prove the variable path.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>typed-prompt Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #f4f6f9);
+      }
+
+      #root {
+        --bg: #f4f6f9;
+        --fg: #14161b;
+        --surface: #ffffff;
+        --border: #dfe4ec;
+        --brand: #1d4ed8;
+        --accent: #0284c7;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 40%, #ffffff 0%, var(--bg, #f4f6f9) 70%);
+      }
+
+      .mount-card {
+        width: 88%;
+        height: 70%;
+        left: 6%;
+        top: 15%;
+        container-type: size;
+        overflow: hidden;
+        border: 1px solid var(--border, #dfe4ec);
+        border-radius: 28px;
+        background: var(--surface, #ffffff);
+        box-shadow: 0 30px 80px rgba(20, 22, 27, 0.1);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="typed-prompt-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="typed-prompt-mount"
+        class="mount-card clip"
+        data-composition-id="typed-prompt"
+        data-composition-src="./typed-prompt.html"
+        data-variable-values='{"text":"Summarize the Q3 revenue report","cadence":"human","accent":"violet"}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="1690"
+        data-height="756"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["typed-prompt-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/typed-prompt/registry-item.json b/registry/components/typed-prompt/registry-item.json
new file mode 100644
index 0000000000..2e53e47fe9
--- /dev/null
+++ b/registry/components/typed-prompt/registry-item.json
@@ -0,0 +1,104 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "typed-prompt",
+  "type": "hyperframes:component",
+  "title": "Typed Prompt",
+  "description": "A prompt line types itself in chunked human cadence behind a deterministic blinking caret, with optional backspace-and-retype correction of the final word.",
+  "tags": ["motion-primitive", "product-demo", "typing", "prompt", "deterministic"],
+  "jobs": ["demonstrate"],
+  "family": "ui-props",
+  "profile": "typing",
+  "evidence": "Wave J J1-2 typed-prompt specification; discrete-text-sequence mechanic (SEQ table + textAt lookup + integer-cycle caret) generalized from the cohere-north agent-at-work frame",
+  "syncPoints": [{ "id": "typing-complete", "phase": "in", "offset": 2.9 }],
+  "files": [
+    {
+      "path": "typed-prompt.html",
+      "target": "compositions/components/typed-prompt.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "text",
+      "type": "string",
+      "role": "content",
+      "label": "Text",
+      "description": "The prompt that gets typed.",
+      "default": "Generate a product launch video"
+    },
+    {
+      "id": "prompt_glyph",
+      "type": "string",
+      "role": "style",
+      "label": "Prompt glyph",
+      "description": "Leading glyph before the typed line. Empty string hides it.",
+      "default": ">"
+    },
+    {
+      "id": "cadence",
+      "type": "enum",
+      "role": "timing",
+      "label": "Cadence",
+      "description": "Keystroke rhythm: uniform fixed steps or seeded human chunks.",
+      "default": "human",
+      "options": [
+        { "value": "uniform", "label": "Uniform" },
+        { "value": "human", "label": "Human" }
+      ]
+    },
+    {
+      "id": "caret",
+      "type": "enum",
+      "role": "style",
+      "label": "Caret",
+      "description": "Blink runs integer sine cycles during typing then goes solid.",
+      "default": "blink",
+      "options": [
+        { "value": "blink", "label": "Blink" },
+        { "value": "solid", "label": "Solid" }
+      ]
+    },
+    {
+      "id": "correction",
+      "type": "string",
+      "role": "content",
+      "label": "Correction",
+      "description": "Mistyped word typed in place of the final word, then backspaced and corrected. Empty disables.",
+      "default": ""
+    },
+    {
+      "id": "cues",
+      "type": "string",
+      "role": "timing",
+      "label": "Cues",
+      "description": "Comma-separated seconds relative to mount start; cue N anchors the start of word N. Empty uses the authored rhythm.",
+      "default": ""
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Color of the prompt glyph and caret.",
+      "default": "green",
+      "options": [
+        { "value": "green", "label": "Green" },
+        { "value": "blue", "label": "Blue" },
+        { "value": "violet", "label": "Violet" }
+      ]
+    },
+    {
+      "id": "exit",
+      "type": "enum",
+      "role": "timing",
+      "label": "Exit",
+      "description": "Outgoing transition. Frame roots own transitions; none holds the end frame.",
+      "default": "none",
+      "options": [
+        { "value": "none", "label": "None" },
+        { "value": "fade", "label": "Fade" },
+        { "value": "up", "label": "Up" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/typed-prompt/typed-prompt.html b/registry/components/typed-prompt/typed-prompt.html
new file mode 100644
index 0000000000..60f339572f
--- /dev/null
+++ b/registry/components/typed-prompt/typed-prompt.html
@@ -0,0 +1,384 @@
+<!doctype html>
+<!--
+  typed-prompt: HyperFrames video primitive (product demo / typing)
+
+  A prompt line types itself in chunked human cadence behind a deterministic
+  blinking caret. Every visible frame is read from one lookup table of
+  text-at-time rows built synchronously before the timeline registers, so
+  forward seeks, reverse seeks, and repeated seeks to the same time always
+  produce the same string. Nothing is incremental.
+
+  Caret law: a sine phase runs an INTEGER number of cycles across exactly the
+  typing window, then a single set() pins the caret solid for the hold.
+
+  Correction mode: when the `correction` variable is non-empty, that string is
+  typed IN PLACE of the final word first (the "typo"), a beat passes, it is
+  backspaced one character per row, and the true final word of `text` is
+  retyped. The resting text always equals `text`.
+
+  Variables (declared in data-composition-variables below):
+    - text (string): the prompt that gets typed.
+    - prompt_glyph (string, default ">"): leading glyph; empty string hides it.
+    - cadence ("uniform" | "human", default "human"): keystroke rhythm.
+      uniform = one character per fixed step; human = seeded 1-3 char chunks
+      with varied gaps (fixed LCG seed, fully deterministic).
+    - caret ("blink" | "solid", default "blink"): blink runs integer sine
+      cycles during typing then goes solid; solid never blinks.
+    - correction (string, default ""): the mistyped word. Empty disables.
+    - cues (string, default ""): comma-separated seconds relative to mount
+      start; cue N anchors the start of word N. Empty = authored rhythm.
+    - accent (green | blue | violet, default "green"): glyph + caret color.
+    - exit ("none" | "fade" | "up", default "none"): frame roots own
+      transitions; none holds the end frame.
+
+  Envelope, authored 4s, fixed IN/OUT with elastic HOLD only (never
+  gsap.timeScale()): panel settles over 0.5s, typing runs from 0.35s at its
+  natural cadence, compressed proportionally only if it would overflow
+  duration - OUT. HOLD absorbs all extra duration (solid caret, barely-there
+  drift ending in stillness). OUT exists only when exit != none.
+
+  Mount contract: mountable sub-composition; the runtime clones only this
+  <template>. #root is elastic (no data-width/height, container-type: size),
+  styled via #root only, and registers one paused timeline under the literal
+  "typed-prompt" key.
+-->
+<html
+  lang="en"
+  data-composition-id="typed-prompt"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "text", "type": "string", "role": "content", "label": "Text", "description": "The prompt that gets typed.", "default": "Generate a product launch video" },
+    { "id": "prompt_glyph", "type": "string", "role": "style", "label": "Prompt glyph", "description": "Leading glyph before the typed line. Empty string hides it.", "default": ">" },
+    { "id": "cadence", "type": "enum", "role": "timing", "label": "Cadence", "description": "Keystroke rhythm: uniform fixed steps or seeded human chunks.", "default": "human", "options": [{ "value": "uniform", "label": "Uniform" }, { "value": "human", "label": "Human" }] },
+    { "id": "caret", "type": "enum", "role": "style", "label": "Caret", "description": "Blink runs integer sine cycles during typing then goes solid.", "default": "blink", "options": [{ "value": "blink", "label": "Blink" }, { "value": "solid", "label": "Solid" }] },
+    { "id": "correction", "type": "string", "role": "content", "label": "Correction", "description": "Mistyped word typed in place of the final word, then backspaced and corrected. Empty disables.", "default": "" },
+    { "id": "cues", "type": "string", "role": "timing", "label": "Cues", "description": "Comma-separated seconds relative to mount start; cue N anchors the start of word N. Empty uses the authored rhythm.", "default": "" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Color of the prompt glyph and caret.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Outgoing transition. Frame roots own transitions; none holds the end frame.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Typed Prompt</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="typed-prompt" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            pointer-events: none;
+          }
+
+          .tp-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .tp-stage {
+            width: 82cqw;
+            max-width: 82cqw;
+            will-change: transform, opacity;
+          }
+
+          .tp-shell {
+            display: flex;
+            align-items: flex-start;
+            gap: var(--space-1, 1.6cqw);
+            min-height: 18cqh;
+            padding: var(--space-2, 3.4cqh) var(--space-2, 3cqw);
+            border: 0.16cqmin solid color-mix(in srgb, var(--border, #475569) 72%, transparent);
+            border-radius: var(--radius, 2.4cqmin);
+            background: color-mix(in srgb, var(--surface, #0b1016) 94%, var(--tp-accent));
+            box-shadow: 0 3cqh 9cqh color-mix(in srgb, var(--bg, #000000) 38%, transparent);
+          }
+
+          .tp-glyph {
+            flex: 0 0 auto;
+            color: var(--tp-accent);
+            font-size: var(--tp-font-size);
+            font-weight: 600;
+            line-height: 1.45;
+          }
+
+          .tp-line {
+            flex: 1 1 auto;
+            min-width: 0;
+            color: var(--fg, #f8fafc);
+            font-size: var(--tp-font-size);
+            font-weight: 500;
+            line-height: 1.45;
+            overflow-wrap: anywhere;
+            white-space: pre-wrap;
+          }
+
+          .tp-caret {
+            display: inline-block;
+            width: 0.55ch;
+            height: 1.05em;
+            margin-left: 0.08ch;
+            background: var(--tp-accent);
+            vertical-align: text-bottom;
+            will-change: opacity;
+          }
+        </style>
+
+        <div
+          id="typed-prompt-clip"
+          class="tp-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="tp-stage" role="img">
+            <div class="tp-shell">
+              <span class="tp-glyph" aria-hidden="true"></span>
+              <span class="tp-line" aria-hidden="true"
+                ><span class="tp-text"></span><span class="tp-caret"></span
+              ></span>
+            </div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".tp-stage");
+            var glyphElement = root.querySelector(".tp-glyph");
+            var textElement = root.querySelector(".tp-text");
+            var caretElement = root.querySelector(".tp-caret");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var text = vars.text == null ? "Generate a product launch video" : String(vars.text);
+            var promptGlyph = vars.prompt_glyph == null ? ">" : String(vars.prompt_glyph);
+            var cadence = vars.cadence === "uniform" ? "uniform" : "human";
+            var caretMode = vars.caret === "solid" ? "solid" : "blink";
+            var correction = vars.correction == null ? "" : String(vars.correction).trim();
+            var exitMode = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            root.style.setProperty("--tp-accent", accentColors[accent]);
+            glyphElement.textContent = promptGlyph;
+            if (promptGlyph === "") glyphElement.style.display = "none";
+            stage.setAttribute("aria-label", text);
+
+            var cueList = String(vars.cues == null ? "" : vars.cues)
+              .split(",")
+              .map(function (token) {
+                return parseFloat(token);
+              })
+              .filter(function (value) {
+                return isFinite(value) && value >= 0;
+              })
+              .sort(function (a, b) {
+                return a - b;
+              });
+
+            var ENTER = 0.5;
+            var TYPE_START = 0.35;
+            var OUT_BASE = 0.45;
+            var STILLNESS = 0.3;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var OUT = exitMode === "none" ? 0 : Math.min(OUT_BASE, duration * 0.2);
+
+            // Fixed-seed LCG: the only randomness source, consumed in one
+            // deterministic order during this synchronous build.
+            var lcgState = 0x7f4a7c15;
+            function rnd() {
+              lcgState = (Math.imul(1664525, lcgState) + 1013904223) >>> 0;
+              return lcgState / 4294967296;
+            }
+            function chunksOf(word) {
+              if (cadence === "uniform") return Array.from(word);
+              var out = [];
+              var i = 0;
+              while (i < word.length) {
+                var n = 1 + Math.floor(rnd() * 3);
+                out.push(word.slice(i, i + n));
+                i += n;
+              }
+              return out;
+            }
+            function chunkGap(chunk) {
+              if (cadence === "uniform") return chunk.length * 0.055;
+              return chunk.length * (0.05 + rnd() * 0.04);
+            }
+
+            // The complete text-at-time table. Built exactly once; the
+            // timeline only ever reads it, so seeks in any direction resolve
+            // the same string for the same time.
+            var rows = [{ t: 0, x: "" }];
+            var words = text.split(/\s+/).filter(function (word) {
+              return word.length > 0;
+            });
+            var hasCorrection = correction !== "" && words.length > 0;
+            (function buildRows() {
+              var t = TYPE_START;
+              var acc = "";
+              words.forEach(function (word, wordIndex) {
+                var isLast = wordIndex === words.length - 1;
+                var typedWord = hasCorrection && isLast ? correction : word;
+                if (wordIndex > 0) acc += " ";
+                if (cueList[wordIndex] != null) {
+                  t = Math.max(t, cueList[wordIndex]);
+                } else if (wordIndex > 0) {
+                  t += cadence === "uniform" ? 0.11 : 0.1 + rnd() * 0.1;
+                }
+                chunksOf(typedWord).forEach(function (chunk) {
+                  t += chunkGap(chunk);
+                  acc += chunk;
+                  rows.push({ t: t, x: acc });
+                });
+                if (hasCorrection && isLast) {
+                  t += 0.4; // the beat of realizing the typo
+                  for (var back = 1; back <= correction.length; back += 1) {
+                    t += 0.055;
+                    rows.push({ t: t, x: acc.slice(0, acc.length - back) });
+                  }
+                  acc = acc.slice(0, acc.length - correction.length);
+                  t += 0.22;
+                  chunksOf(word).forEach(function (chunk) {
+                    t += chunkGap(chunk);
+                    acc += chunk;
+                    rows.push({ t: t, x: acc });
+                  });
+                }
+              });
+            })();
+
+            // Compress typing proportionally only if it would overflow the
+            // window before OUT; extra duration becomes HOLD, never timeScale.
+            var naturalEnd = rows[rows.length - 1].t;
+            var maxEnd = Math.max(TYPE_START + 0.2, duration - OUT - STILLNESS);
+            if (naturalEnd > maxEnd) {
+              var factor = (maxEnd - TYPE_START) / (naturalEnd - TYPE_START);
+              rows.forEach(function (row) {
+                if (row.t > TYPE_START) row.t = TYPE_START + (row.t - TYPE_START) * factor;
+              });
+            }
+            var typeEnd = Math.max(rows[rows.length - 1].t, TYPE_START + 0.01);
+
+            // 1ms tolerance: GSAP snaps a tween's end value below the row
+            // table's accumulated float times, and 1ms is far under one frame.
+            function textAt(time) {
+              for (var i = rows.length - 1; i >= 0; i -= 1) {
+                if (time >= rows[i].t - 0.001) return rows[i].x;
+              }
+              return "";
+            }
+
+            // +2: leave room for the trailing caret so it never wraps alone.
+            var maxLength =
+              rows.reduce(function (best, row) {
+                return Math.max(best, row.x.length);
+              }, 1) + 2;
+            var fittedCqw = Math.max(2.2, Math.min(4.2, 118 / maxLength));
+            root.style.setProperty("--tp-font-size", "min(" + fittedCqw.toFixed(3) + "cqw, 9cqh)");
+
+            gsap.set(stage, { opacity: 0, y: "2.6cqh" });
+            textElement.textContent = "";
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: one panel settle, then the table drives every visible frame.
+            tl.to(stage, { opacity: 1, duration: ENTER, ease: "power2.out" }, 0);
+            tl.to(stage, { y: "0cqh", duration: ENTER, ease: "power3.out" }, 0);
+
+            var typeDriver = { t: 0 };
+            tl.to(
+              typeDriver,
+              {
+                t: typeEnd,
+                duration: typeEnd,
+                ease: "none",
+                onUpdate: function () {
+                  textElement.textContent = textAt(typeDriver.t);
+                },
+              },
+              0,
+            );
+
+            // Caret: integer sine cycles across exactly the typing window,
+            // then a single pin to solid. Solid mode never blinks.
+            if (caretMode === "blink") {
+              var cycles = Math.max(1, Math.round(typeEnd / 0.9));
+              var blink = { p: 0 };
+              tl.to(
+                blink,
+                {
+                  p: Math.PI * 2 * cycles,
+                  duration: typeEnd,
+                  ease: "none",
+                  onUpdate: function () {
+                    // >= 0 keeps phase 0 identical to the caret's unrendered
+                    // initial state (opacity 1) for forward vs backward seeks.
+                    caretElement.style.opacity = Math.sin(blink.p) >= 0 ? "1" : "0";
+                  },
+                },
+                0,
+              );
+              tl.set(caretElement, { opacity: 1 }, typeEnd);
+            }
+
+            // HOLD: barely-there drift ending at exactly zero, then authored
+            // stillness before any departure.
+            var OUT_START = duration - OUT;
+            var holdSpan = OUT_START - typeEnd;
+            if (holdSpan > 0.9) {
+              var driftHalf = (holdSpan - STILLNESS) / 2;
+              tl.to(stage, { y: "-0.45cqh", duration: driftHalf, ease: "sine.inOut" }, typeEnd);
+              tl.to(
+                stage,
+                { y: "0cqh", duration: driftHalf, ease: "sine.inOut" },
+                typeEnd + driftHalf,
+              );
+            }
+
+            // OUT: only when the exit variable asks for one.
+            if (exitMode !== "none") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+              if (exitMode === "up") {
+                tl.to(stage, { y: "-4cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              }
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["typed-prompt"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/typewriter/demo.html b/registry/components/typewriter/demo.html
new file mode 100644
index 0000000000..9940e99d69
--- /dev/null
+++ b/registry/components/typewriter/demo.html
@@ -0,0 +1,99 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Typewriter - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        min-width: 900px;
+        min-height: 500px;
+        padding: 64px;
+        /* ponytail: scale-up only; GSAP targets .hf-remocn-typewriter with CSS vars, not transforms */
+        transform: scale(2.8);
+      }
+      .hf-remocn-typewriter {
+        color: #18181b;
+        font-family: Inter, system-ui, sans-serif;
+        font-weight: 900;
+        letter-spacing: -0.04em;
+      }
+      .hf-remocn-typewriter {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        font:
+          800 52px/1 ui-monospace,
+          SFMono-Regular,
+          Menlo,
+          monospace;
+      }
+      .hf-remocn-typewriter span {
+        display: inline-block;
+        max-width: calc(var(--hf-type-progress, 1) * 100%);
+        overflow: hidden;
+        white-space: nowrap;
+      }
+      .hf-remocn-typewriter i {
+        width: 3px;
+        height: 52px;
+        border-radius: 999px;
+        background: #18181b;
+        opacity: var(--hf-caret-opacity, 1);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="typewriter-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-typewriter"><span>hyperframes add typewriter</span><i></i></div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-typewriter",
+          { "--hf-type-progress": 0 },
+          { "--hf-type-progress": 1, duration: 1.2, ease: "steps(28)" },
+          startTime,
+        );
+        tl.to(
+          ".hf-remocn-typewriter i",
+          { "--hf-caret-opacity": 0.2, duration: 0.24, repeat: 7, yoyo: true, ease: "none" },
+          startTime + 0.2,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["typewriter-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/typewriter/registry-item.json b/registry/components/typewriter/registry-item.json
new file mode 100644
index 0000000000..e16ef0f54d
--- /dev/null
+++ b/registry/components/typewriter/registry-item.json
@@ -0,0 +1,72 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "typewriter",
+  "type": "hyperframes:component",
+  "title": "Typewriter",
+  "description": "Character-by-character text reveal with a deterministic blinking cursor.",
+  "tags": ["video-primitive", "motion-primitive", "remocn-port", "typography"],
+  "files": [
+    {
+      "path": "typewriter.html",
+      "target": "compositions/components/typewriter.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "text",
+      "type": "string",
+      "role": "content",
+      "label": "Text",
+      "description": "Line that types itself out character by character.",
+      "default": "hyperframes add typewriter"
+    },
+    {
+      "id": "tone",
+      "type": "enum",
+      "role": "style",
+      "label": "Tone",
+      "description": "Colour of the text and the caret: ink for light frames, paper for dark ones, accent rides --brand.",
+      "default": "ink",
+      "options": [
+        {
+          "value": "ink",
+          "label": "Ink"
+        },
+        {
+          "value": "paper",
+          "label": "Paper"
+        },
+        {
+          "value": "accent",
+          "label": "Accent"
+        }
+      ]
+    },
+    {
+      "id": "caret",
+      "type": "enum",
+      "role": "style",
+      "label": "Caret",
+      "description": "Caret shape: a thin rule, a terminal-style block, or no caret at all.",
+      "default": "line",
+      "options": [
+        {
+          "value": "line",
+          "label": "Line"
+        },
+        {
+          "value": "block",
+          "label": "Block"
+        },
+        {
+          "value": "none",
+          "label": "None"
+        }
+      ]
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/typewriter.png"
+  }
+}
diff --git a/registry/components/typewriter/typewriter.html b/registry/components/typewriter/typewriter.html
new file mode 100644
index 0000000000..eff0115b1f
--- /dev/null
+++ b/registry/components/typewriter/typewriter.html
@@ -0,0 +1,121 @@
+<!--
+  Typewriter - remocn typography primitive for HyperFrames.
+
+  Paste the markup, CSS and script into a composition. Drive the timeline
+  integration from a paused GSAP timeline so renders remain deterministic.
+
+  Variables. The script reads each one, falls back to the declared default on
+  anything missing or unrecognised, and writes the result either into the
+  markup or into a custom property the CSS above consumes. The timeline recipe
+  below is untouched by them: it keeps driving one type progress and one caret
+  opacity, and these decide what is typed, in what colour, and behind which
+  caret.
+
+    - text (string, default hyperframes add typewriter): the line that types
+      itself out. It is written into the existing span, so the reveal keeps
+      running character by character over whatever is set. Anything that is
+      not a non-empty string keeps the shipped line.
+    - tone (ink | paper | accent, default ink): colour of both the text and
+      the caret. ink is near-black for light frames, paper near-white for dark
+      ones, accent rides --brand.
+    - caret (line | block | none, default line): caret shape. line is the
+      shipped 3px rule, block is a 22px slab in the style of a terminal
+      cursor, none removes the caret entirely and closes the gap after the
+      text.
+
+  On every default the result is identical to the original: a near-black
+  monospace line typing itself out behind a 3px caret.
+-->
+
+<div
+  class="hf-remocn-typewriter"
+  data-composition-variables='[
+    { "id": "text", "type": "string", "role": "content", "label": "Text", "description": "Line that types itself out character by character.", "default": "hyperframes add typewriter" },
+    { "id": "tone", "type": "enum", "role": "style", "label": "Tone", "description": "Colour of the text and the caret: ink for light frames, paper for dark ones, accent rides --brand.", "default": "ink", "options": [{ "value": "ink", "label": "Ink" }, { "value": "paper", "label": "Paper" }, { "value": "accent", "label": "Accent" }] },
+    { "id": "caret", "type": "enum", "role": "style", "label": "Caret", "description": "Caret shape: a thin rule, a terminal-style block, or no caret at all.", "default": "line", "options": [{ "value": "line", "label": "Line" }, { "value": "block", "label": "Block" }, { "value": "none", "label": "None" }] }
+  ]'
+>
+  <span>hyperframes add typewriter</span><i></i>
+</div>
+
+<style>
+  .hf-remocn-typewriter {
+    color: var(--hf-type-color, #18181b);
+    font-family: Inter, system-ui, sans-serif;
+    font-weight: 900;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-typewriter {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    font:
+      800 42px/1 ui-monospace,
+      SFMono-Regular,
+      Menlo,
+      monospace;
+  }
+  .hf-remocn-typewriter span {
+    display: inline-block;
+    max-width: calc(var(--hf-type-progress, 1) * 100%);
+    overflow: hidden;
+    white-space: nowrap;
+  }
+  .hf-remocn-typewriter i {
+    display: var(--hf-caret-display, block);
+    width: var(--hf-caret-width, 3px);
+    height: 42px;
+    border-radius: 999px;
+    background: var(--hf-type-color, #18181b);
+    opacity: var(--hf-caret-opacity, 1);
+  }
+</style>
+
+<script>
+  (function () {
+    "use strict";
+
+    var vars =
+      window.__hyperframes && window.__hyperframes.getVariables
+        ? window.__hyperframes.getVariables()
+        : {};
+
+    // Unrecognised overrides return to their declared defaults.
+    var tones = {
+      ink: "#18181b",
+      paper: "#fafafa",
+      accent: "var(--brand, #34d399)",
+    };
+    var carets = {
+      line: { width: "3px", display: "block" },
+      block: { width: "22px", display: "block" },
+      none: { width: "3px", display: "none" },
+    };
+
+    function pick(table, value, fallback) {
+      return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+    }
+
+    var tone = tones[pick(tones, vars.tone, "ink")];
+    var caret = carets[pick(carets, vars.caret, "line")];
+    var text = typeof vars.text === "string" && vars.text !== "" ? vars.text : null;
+
+    var roots = document.querySelectorAll(".hf-remocn-typewriter");
+    for (var i = 0; i < roots.length; i += 1) {
+      var root = roots[i];
+      root.style.setProperty("--hf-type-color", tone);
+      root.style.setProperty("--hf-caret-width", caret.width);
+      root.style.setProperty("--hf-caret-display", caret.display);
+
+      var line = root.querySelector("span");
+      if (text !== null && line) {
+        line.textContent = text;
+      }
+    }
+  })();
+</script>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-typewriter', { '--hf-type-progress': 0 }, { '--hf-type-progress': 1, duration: 1.2, ease: 'steps(28)' }, startTime); tl.to('.hf-remocn-typewriter i', { '--hf-caret-opacity': 0.2, duration: 0.24, repeat: 7, yoyo: true, ease: 'none' }, startTime + 0.2);
+-->
diff --git a/registry/components/ui-focus-zoom/README.md b/registry/components/ui-focus-zoom/README.md
new file mode 100644
index 0000000000..a0497da021
--- /dev/null
+++ b/registry/components/ui-focus-zoom/README.md
@@ -0,0 +1,78 @@
+# ui-focus-zoom
+
+A full app surface establishes with one settle, then the camera zooms and pans to an anchored region on its cue and holds the zoomed state. An optional focus halo blooms softly at the anchor as the camera arrives. The camera-servo law applies: all camera motion is ONE world wrapper transform, and the micro-drift is built from integer sine cycles that end at exactly zero before the authored stillness, so the hold is dead still.
+
+- 4.5s authored, elastic HOLD (the envelope never time-scales).
+- Timeline registered at `window.__timelines["ui-focus-zoom"]`.
+- Elastic root: no `data-width`/`data-height`, sized by the host clip, `cqmin` units.
+
+## Variables
+
+| Variable   | Type   | Default | Notes                                                                                                                            |
+| ---------- | ------ | ------- | -------------------------------------------------------------------------------------------------------------------------------- |
+| `anchor_x` | number | `64`    | Focus anchor, percent from the left edge of the surface (0 to 100).                                                              |
+| `anchor_y` | number | `36`    | Focus anchor, percent from the top edge of the surface (0 to 100).                                                               |
+| `zoom`     | number | `1.6`   | Camera scale at the focused state (1 to 3). At `1` the camera cannot pan.                                                        |
+| `zoom_at`  | number | `1.4`   | Seconds from mount start when the camera departs. Clamped inside the hold so the move never fights the entrance or the exit.     |
+| `halo`     | enum   | `show`  | `show` blooms a soft accent glow at the anchor as the camera arrives; `hide` removes it.                                         |
+| `accent`   | enum   | `green` | `green` rides `--brand`, `blue` rides `--accent`, `violet` rides `--accent-2`. Colors the halo and the skeleton accent elements. |
+| `exit`     | enum   | `none`  | `none` holds the final frame (frame roots own transitions), `fade`, or `up`.                                                     |
+
+## The surface slot
+
+The app surface is a slot. Callers supply content by placing an inert `<template>` element anywhere in the **host page** (typically next to the mount clip). Templates never render on their own, and the runtime clears the host clip's children on mount, so the slot deliberately lives at document level:
+
+```html
+<template data-slot="ui-focus-zoom-screen"> ...full app surface... </template>
+```
+
+Slot content can be an `<img>`, a `<video>`, or arbitrary HTML. Direct `img`/`video` children of the surface are stretched to `object-fit: cover`. When no slot exists, the primitive renders a token-styled skeleton app (header bar, sidebar, content cards; hairline borders, surface mixes, one accent element, no branding).
+
+Notes:
+
+- Slot lookup is by the fixed name above, so two slotted instances on one page share the same slot content. Give multiple instances distinct content by mounting them from different host frames.
+- A `<video>` in the slot is not seek-synced by the framework (framework-owned media playback applies to clips, not slot children). Prefer a still image or HTML for deterministic renders.
+- Aim `anchor_x`/`anchor_y` at the region of your artwork the story lands on; the camera centers it as closely as the edge clamp allows.
+
+## The camera
+
+The camera lives on one world wrapper as `translate(x, y) scale(S)`. Translate percentages resolve against the world's own box, so no pixel measurement is needed and the primitive stays fully elastic to its host. The pan is clamped so the scaled world always covers the viewport: with an extreme edge anchor or a low `zoom`, the camera centers the anchor as closely as it can without revealing background. At `zoom: 1` there is no pan at all (nothing to zoom into).
+
+## Worked examples
+
+Mount host with a skeleton surface (no slot):
+
+```html
+<div
+  class="clip"
+  data-composition-id="ui-focus-zoom"
+  data-composition-src="./components/ui-focus-zoom.html"
+  data-variable-values='{"anchor_x":72,"anchor_y":30,"zoom":1.8,"zoom_at":1.6,"accent":"blue"}'
+  data-start="0"
+  data-duration="4.5"
+  data-track-index="0"
+  style="position:absolute; inset:0; container-type:size;"
+></div>
+```
+
+### Zoom into a product screenshot
+
+```html
+<template data-slot="ui-focus-zoom-screen">
+  <img src="./assets/dashboard.png" alt="" />
+</template>
+```
+
+Set `anchor_x`/`anchor_y` to the feature's position in the artwork (percent of the image after cover-fit) and `zoom_at` to the narration beat that names it.
+
+### Quiet establish, late push
+
+Mount with `{"zoom_at":2.6,"zoom":1.5,"halo":"hide"}` for a long readable establish and a restrained late push with no halo.
+
+## Motion envelope
+
+- IN 0.9s: one settle (rise from 4.5cqh + scale 0.965 to 1 + fade, power ease-out).
+- Camera 1.1s at `zoom_at` (clamped): one servo move to the anchor, power2.inOut.
+- Halo (optional): 0.75s soft bloom starting halfway through the camera move.
+- HOLD: elastic; micro-drift from integer sine cycles (2 and 3 full cycles) ends at exactly zero, then 0.35s authored stillness.
+- OUT 0.5s only when `exit` is `fade` or `up`; the default `none` holds to the last frame.
diff --git a/registry/components/ui-focus-zoom/demo.html b/registry/components/ui-focus-zoom/demo.html
new file mode 100644
index 0000000000..d309ae5876
--- /dev/null
+++ b/registry/components/ui-focus-zoom/demo.html
@@ -0,0 +1,91 @@
+<!doctype html>
+<!--
+  ui-focus-zoom demo. This standalone composition mounts the primitive
+  through data-composition-src. Non-default anchor, zoom, cue, and accent
+  values prove the variable path while the primitive remains elastic to its
+  host.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>ui-focus-zoom Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #0b0c0e);
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --surface: #14171c;
+        --border: #343a46;
+        --brand: #71f5a7;
+        --accent: #c5a3ff;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(
+          ellipse at 50% 44%,
+          var(--bg, #171a20) 0%,
+          var(--bg, #0b0c0e) 72%
+        );
+      }
+
+      .mount-card {
+        width: 72%;
+        height: 64%;
+        left: 14%;
+        top: 18%;
+        container-type: size;
+        overflow: hidden;
+        border: 1px solid color-mix(in srgb, var(--border, #94a3b8) 20%, transparent);
+        border-radius: 30px;
+        background: color-mix(in srgb, var(--surface, #101318) 72%, transparent);
+        box-shadow: 0 40px 100px color-mix(in srgb, var(--bg, #000000) 48%, transparent);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="ui-focus-zoom-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4.5"
+      data-fps="30"
+    >
+      <div
+        id="ui-focus-zoom-mount"
+        class="mount-card clip"
+        data-composition-id="ui-focus-zoom"
+        data-composition-src="./ui-focus-zoom.html"
+        data-variable-values='{"anchor_x":30,"anchor_y":60,"zoom":2,"zoom_at":1.2,"accent":"blue"}'
+        data-start="0"
+        data-duration="4.5"
+        data-track-index="0"
+        data-width="1382"
+        data-height="691"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["ui-focus-zoom-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/ui-focus-zoom/registry-item.json b/registry/components/ui-focus-zoom/registry-item.json
new file mode 100644
index 0000000000..84778d1264
--- /dev/null
+++ b/registry/components/ui-focus-zoom/registry-item.json
@@ -0,0 +1,107 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "ui-focus-zoom",
+  "type": "hyperframes:component",
+  "title": "UI Focus Zoom",
+  "description": "A full app surface establishes with one settle, then the camera zooms and pans to an anchored region on its cue and holds the zoomed state, with an optional soft focus halo at the anchor. The surface is a slot with a token-styled skeleton default.",
+  "tags": ["camera", "product-demo", "zoom", "focus", "pan", "slot", "servo"],
+  "jobs": ["demonstrate"],
+  "family": "product-demo",
+  "profile": "camera",
+  "evidence": "Wave J J2-2: adversarial panel hero shelf, camera-servo law from flagship frame 04 (one world wrapper, integer-cycle micro-drift ending at zero)",
+  "syncPoints": [{ "id": "focus-arrive", "phase": "in", "offset": 2.5 }],
+  "files": [
+    {
+      "path": "ui-focus-zoom.html",
+      "target": "compositions/components/ui-focus-zoom.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "anchor_x",
+      "type": "number",
+      "role": "content",
+      "label": "Anchor X",
+      "description": "Focus anchor, percent from the left edge of the surface.",
+      "default": 64,
+      "min": 0,
+      "max": 100,
+      "step": 1,
+      "unit": "%"
+    },
+    {
+      "id": "anchor_y",
+      "type": "number",
+      "role": "content",
+      "label": "Anchor Y",
+      "description": "Focus anchor, percent from the top edge of the surface.",
+      "default": 36,
+      "min": 0,
+      "max": 100,
+      "step": 1,
+      "unit": "%"
+    },
+    {
+      "id": "zoom",
+      "type": "number",
+      "role": "content",
+      "label": "Zoom",
+      "description": "Camera scale at the focused state.",
+      "default": 1.6,
+      "min": 1,
+      "max": 3,
+      "step": 0.05
+    },
+    {
+      "id": "zoom_at",
+      "type": "number",
+      "role": "timing",
+      "label": "Zoom at",
+      "description": "Seconds from mount start when the camera departs for the anchor. Clamped inside the hold.",
+      "default": 1.4,
+      "min": 0,
+      "max": 30,
+      "step": 0.1,
+      "unit": "s"
+    },
+    {
+      "id": "halo",
+      "type": "enum",
+      "role": "style",
+      "label": "Halo",
+      "description": "Soft accent bloom at the anchor as the camera arrives.",
+      "default": "show",
+      "options": [
+        { "value": "show", "label": "Show" },
+        { "value": "hide", "label": "Hide" }
+      ]
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Token the halo and skeleton accent elements ride.",
+      "default": "green",
+      "options": [
+        { "value": "green", "label": "Green" },
+        { "value": "blue", "label": "Blue" },
+        { "value": "violet", "label": "Violet" }
+      ]
+    },
+    {
+      "id": "exit",
+      "type": "enum",
+      "role": "style",
+      "label": "Exit",
+      "description": "Optional departure. None holds the final frame.",
+      "default": "none",
+      "options": [
+        { "value": "none", "label": "None" },
+        { "value": "fade", "label": "Fade" },
+        { "value": "up", "label": "Up" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/ui-focus-zoom/ui-focus-zoom.html b/registry/components/ui-focus-zoom/ui-focus-zoom.html
new file mode 100644
index 0000000000..e69320d406
--- /dev/null
+++ b/registry/components/ui-focus-zoom/ui-focus-zoom.html
@@ -0,0 +1,564 @@
+<!doctype html>
+<!--
+  ui-focus-zoom -- HyperFrames video primitive (product demo / camera)
+
+  A full app surface establishes with one settle, then the camera zooms and
+  pans to an anchored region on its cue and holds the zoomed state. An
+  optional focus halo blooms softly at the anchor as the camera arrives.
+
+  Camera-servo law: the camera lives on ONE world wrapper transform,
+  translate(x, y) scale(S). A world point offset o from center lands at
+  S * o + T, so T = -offset * S. Offsets are percentages of the world's own
+  box (the world fills the viewport), so no pixel measurement is needed and
+  the primitive stays fully elastic. Micro-drift is built from integer sine
+  cycles (2 and 3 full cycles) that end at exactly zero before the authored
+  stillness, so the hold is dead still and every seek is reproducible.
+
+  The pan is clamped so the scaled world always covers the viewport:
+  |T| <= 50 * (S - 1) minus the drift amplitude. Extreme anchors near an
+  edge center as close as the clamp allows without revealing background.
+
+  The surface is a SLOT. Callers supply content by placing an inert template
+  anywhere in the HOST page (templates never render, and the runtime wipes
+  the host clip's own children on mount, so the slot lives at document
+  level):
+
+    <template data-slot="ui-focus-zoom-screen"> ... </template>
+
+  Slot content may be an <img>, a muted <video>, or arbitrary HTML; direct
+  img/video children are stretched to cover the surface. When no slot
+  exists, the primitive renders a token-styled skeleton app (header bar,
+  sidebar, content cards; hairline borders, surface mixes, one accent
+  element, no branding).
+
+  Variables (declared in data-composition-variables below):
+    - anchor_x (number percent, default 64): focus anchor from the left edge.
+    - anchor_y (number percent, default 36): focus anchor from the top edge.
+    - zoom (number, default 1.6): camera scale at the focused state (1 to 3).
+    - zoom_at (number seconds, default 1.4): camera departure cue from mount
+      start; clamped inside [IN, D - OUT - move] so the move never fights
+      the entrance or the exit.
+    - halo ("show" | "hide", default "show"): soft accent bloom at the anchor.
+    - accent ("green" | "blue" | "violet", default "green"): green rides
+      --brand, blue rides --accent, violet rides --accent-2.
+    - exit ("none" | "fade" | "up", default "none"): frame roots own
+      transitions; the default holds the final frame to the last pixel.
+
+  Envelope, fixed IN and OUT with elastic HOLD only (never timeScale):
+    IN_BASE   = 0.90s  one settle: rise + soft scale + fade
+    ZOOM_BASE = 1.10s  the camera move, power2.inOut servo ease
+    HOLD      = elastic; micro-drift ends at zero, then authored stillness
+    OUT_BASE  = 0.50s  only when exit != none
+    If D < IN_BASE + ZOOM_BASE + OUT_BASE, the phases compress together.
+
+  Mount contract: the runtime clones only this template. #root fills the
+  host box (no data-width/data-height, container-type: size, cqmin units),
+  is styled via #root only, and registers one paused timeline under the
+  LITERAL "ui-focus-zoom" key. Camera and drift tween plain objects and
+  repaint through one applyCamera writer, so any seek order lands the same
+  transform.
+-->
+<html
+  lang="en"
+  data-composition-id="ui-focus-zoom"
+  data-composition-duration="4.5"
+  data-composition-variables='[
+    { "id": "anchor_x", "type": "number", "role": "content", "label": "Anchor X", "description": "Focus anchor, percent from the left edge of the surface.", "default": 64, "min": 0, "max": 100, "step": 1, "unit": "%" },
+    { "id": "anchor_y", "type": "number", "role": "content", "label": "Anchor Y", "description": "Focus anchor, percent from the top edge of the surface.", "default": 36, "min": 0, "max": 100, "step": 1, "unit": "%" },
+    { "id": "zoom", "type": "number", "role": "content", "label": "Zoom", "description": "Camera scale at the focused state.", "default": 1.6, "min": 1, "max": 3, "step": 0.05 },
+    { "id": "zoom_at", "type": "number", "role": "timing", "label": "Zoom at", "description": "Seconds from mount start when the camera departs for the anchor. Clamped inside the hold.", "default": 1.4, "min": 0, "max": 30, "step": 0.1, "unit": "s" },
+    { "id": "halo", "type": "enum", "role": "style", "label": "Halo", "description": "Soft accent bloom at the anchor as the camera arrives.", "default": "show", "options": [{ "value": "show", "label": "Show" }, { "value": "hide", "label": "Hide" }] },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Token the halo and skeleton accent elements ride.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "style", "label": "Exit", "description": "Optional departure. None holds the final frame.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>UI Focus Zoom</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="ui-focus-zoom" data-duration="4.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, ui-sans-serif, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .ufz-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .ufz-stage {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            will-change: transform, opacity;
+          }
+
+          /* the fixed frame: the camera moves the world inside this window */
+          .ufz-frame {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            border: 0.16cqmin solid color-mix(in srgb, var(--border, #475569) 85%, transparent);
+            border-radius: calc(var(--radius, 2cqmin) * 1.2);
+            background: color-mix(in srgb, var(--surface, #0b1016) 96%, var(--ufz-accent));
+            box-shadow: 0 3cqh 9cqh color-mix(in srgb, var(--bg, #000000) 45%, transparent);
+          }
+
+          /* ONE world wrapper: all camera motion is this element's transform */
+          .ufz-world {
+            position: absolute;
+            inset: 0;
+            will-change: transform;
+          }
+
+          .ufz-surface {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            background: color-mix(in srgb, var(--surface, #0b1016) 88%, var(--bg, #05070c));
+          }
+
+          .ufz-surface > img,
+          .ufz-surface > video {
+            display: block;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+          }
+
+          .ufz-halo {
+            position: absolute;
+            z-index: 2;
+            width: 30cqmin;
+            height: 30cqmin;
+            border-radius: 50%;
+            background: radial-gradient(
+              circle,
+              color-mix(in srgb, var(--ufz-accent) 26%, transparent) 0%,
+              color-mix(in srgb, var(--ufz-accent) 12%, transparent) 42%,
+              transparent 70%
+            );
+            will-change: transform, opacity;
+          }
+
+          /* default skeleton surface: pure token furniture, no branding */
+          .ufz-skel {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            grid-template-rows: auto minmax(0, 1fr);
+          }
+
+          .ufz-skel-top {
+            display: flex;
+            align-items: center;
+            gap: var(--space-1, 1.6cqmin);
+            padding: 1.8cqmin 2.6cqmin;
+            border-bottom: 0.14cqmin solid
+              color-mix(in srgb, var(--border, #475569) 55%, transparent);
+          }
+
+          .ufz-skel-mark {
+            width: 2.6cqmin;
+            height: 2.6cqmin;
+            border-radius: 0.8cqmin;
+            background: color-mix(in srgb, var(--ufz-accent) 74%, var(--surface, #0b1016));
+          }
+
+          .ufz-skel-line {
+            height: 1.25cqmin;
+            border-radius: 999px;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 13%, transparent);
+          }
+
+          .ufz-skel-top .ufz-skel-line:nth-of-type(1) {
+            width: 9cqmin;
+          }
+
+          .ufz-skel-top .ufz-skel-line:nth-of-type(2) {
+            width: 6.5cqmin;
+          }
+
+          .ufz-skel-spring {
+            flex: 1;
+          }
+
+          .ufz-skel-chip {
+            width: 8.5cqmin;
+            height: 2.9cqmin;
+            border: 0.14cqmin solid color-mix(in srgb, var(--ufz-accent) 55%, transparent);
+            border-radius: 999px;
+            background: color-mix(in srgb, var(--ufz-accent) 28%, transparent);
+          }
+
+          .ufz-skel-avatar {
+            width: 2.8cqmin;
+            height: 2.8cqmin;
+            border-radius: 50%;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 18%, transparent);
+          }
+
+          .ufz-skel-body {
+            display: grid;
+            grid-template-columns: 22% minmax(0, 1fr);
+            min-height: 0;
+          }
+
+          .ufz-skel-side {
+            display: flex;
+            flex-direction: column;
+            gap: 2cqmin;
+            padding: 2.6cqmin;
+            border-right: 0.14cqmin solid
+              color-mix(in srgb, var(--border, #475569) 55%, transparent);
+          }
+
+          .ufz-skel-side .ufz-skel-line:nth-child(1) {
+            width: 78%;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 22%, transparent);
+          }
+
+          .ufz-skel-side .ufz-skel-line:nth-child(2) {
+            width: 56%;
+          }
+
+          .ufz-skel-side .ufz-skel-line:nth-child(3) {
+            width: 66%;
+          }
+
+          .ufz-skel-side .ufz-skel-line:nth-child(4) {
+            width: 44%;
+          }
+
+          .ufz-skel-side .ufz-skel-line:nth-child(5) {
+            width: 60%;
+          }
+
+          .ufz-skel-main {
+            display: flex;
+            flex-direction: column;
+            gap: var(--space-2, 1.8cqmin);
+            min-height: 0;
+            padding: var(--space-3, 2.8cqmin);
+          }
+
+          .ufz-skel-heading {
+            width: 34%;
+            height: 2.5cqmin;
+            border-radius: 999px;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 21%, transparent);
+          }
+
+          .ufz-skel-sub {
+            width: 52%;
+            height: 1.25cqmin;
+            border-radius: 999px;
+            background: color-mix(in srgb, var(--fg, #f8fafc) 9%, transparent);
+          }
+
+          .ufz-skel-cards {
+            display: grid;
+            flex: 1;
+            grid-template-columns: repeat(3, minmax(0, 1fr));
+            gap: 2.1cqmin;
+            min-height: 0;
+            margin-top: 0.8cqmin;
+          }
+
+          .ufz-skel-card {
+            display: flex;
+            flex-direction: column;
+            gap: 1.5cqmin;
+            min-height: 0;
+            padding: 2.1cqmin;
+            border: 0.14cqmin solid color-mix(in srgb, var(--border, #475569) 60%, transparent);
+            border-radius: var(--radius, 1.6cqmin);
+            background: color-mix(in srgb, var(--bg, #05070c) 30%, transparent);
+          }
+
+          .ufz-skel-card .ufz-skel-line {
+            width: 55%;
+          }
+
+          .ufz-skel-block {
+            flex: 1;
+            min-height: 3cqmin;
+            border-radius: calc(var(--radius, 1.6cqmin) * 0.6);
+            background: color-mix(in srgb, var(--fg, #f8fafc) 7%, transparent);
+          }
+
+          .ufz-skel-card:nth-child(2) .ufz-skel-block {
+            background: color-mix(in srgb, var(--ufz-accent) 17%, transparent);
+          }
+        </style>
+
+        <div
+          id="ui-focus-zoom-clip"
+          class="ufz-clip clip"
+          data-start="0"
+          data-duration="4.5"
+          data-track-index="0"
+        >
+          <div class="ufz-stage">
+            <div class="ufz-frame" role="img" aria-label="App surface with a camera focus zoom">
+              <div class="ufz-world">
+                <div class="ufz-surface">
+                  <div class="ufz-skel" aria-hidden="true">
+                    <div class="ufz-skel-top">
+                      <span class="ufz-skel-mark"></span>
+                      <span class="ufz-skel-line"></span>
+                      <span class="ufz-skel-line"></span>
+                      <span class="ufz-skel-spring"></span>
+                      <span class="ufz-skel-chip"></span>
+                      <span class="ufz-skel-avatar"></span>
+                    </div>
+                    <div class="ufz-skel-body">
+                      <div class="ufz-skel-side">
+                        <span class="ufz-skel-line"></span>
+                        <span class="ufz-skel-line"></span>
+                        <span class="ufz-skel-line"></span>
+                        <span class="ufz-skel-line"></span>
+                        <span class="ufz-skel-line"></span>
+                      </div>
+                      <div class="ufz-skel-main">
+                        <span class="ufz-skel-heading"></span>
+                        <span class="ufz-skel-sub"></span>
+                        <div class="ufz-skel-cards">
+                          <div class="ufz-skel-card">
+                            <span class="ufz-skel-line"></span>
+                            <span class="ufz-skel-block"></span>
+                          </div>
+                          <div class="ufz-skel-card">
+                            <span class="ufz-skel-line"></span>
+                            <span class="ufz-skel-block"></span>
+                          </div>
+                          <div class="ufz-skel-card">
+                            <span class="ufz-skel-line"></span>
+                            <span class="ufz-skel-block"></span>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="ufz-halo" aria-hidden="true"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".ufz-stage");
+            var world = root.querySelector(".ufz-world");
+            var surface = root.querySelector(".ufz-surface");
+            var halo = root.querySelector(".ufz-halo");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            function num(value, fallback, min, max) {
+              var parsed = parseFloat(value);
+              if (!isFinite(parsed)) parsed = fallback;
+              return Math.min(max, Math.max(min, parsed));
+            }
+
+            var anchorX = num(vars.anchor_x, 64, 0, 100);
+            var anchorY = num(vars.anchor_y, 36, 0, 100);
+            var zoom = num(vars.zoom, 1.6, 1, 3);
+            var zoomAt = num(vars.zoom_at, 1.4, 0, 30);
+            var haloOn = vars.halo !== "hide";
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exitMode = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            root.style.setProperty("--ufz-accent", accentColors[accent]);
+
+            // SLOT. Caller templates live at HOST DOCUMENT level (the mount
+            // wipes host-clip children, and templates never render). The
+            // scoped `document` proxy filters queries to this composition's
+            // subtree, so the lookup deliberately goes through ownerDocument.
+            var hostDoc = root.ownerDocument;
+            var slotTemplate = null;
+            try {
+              slotTemplate = hostDoc.querySelector('template[data-slot="ui-focus-zoom-screen"]');
+            } catch (error) {
+              slotTemplate = null;
+            }
+            if (slotTemplate) {
+              surface.querySelector(".ufz-skel").remove();
+              surface.appendChild(hostDoc.importNode(slotTemplate.content, true));
+            }
+
+            /* ===== Camera (camera-servo law): translate(x, y) scale(S) on the
+               ONE world wrapper. Translate percentages resolve against the
+               world's own box, which fills the viewport, so a world point at
+               offset o percent from center lands at S * o + T and the target
+               transform is T = -(anchor - 50) * S, no measurement needed.
+               The pan is clamped so the scaled world always covers the
+               viewport (|T| <= 50 * (S - 1) minus the drift amplitude). ===== */
+            var DRIFT_X = 0.16;
+            var DRIFT_Y = 0.11;
+            var panMax = Math.max(0, 50 * (zoom - 1) - Math.max(DRIFT_X, DRIFT_Y) - 0.2);
+            var targetX = Math.min(panMax, Math.max(-panMax, -(anchorX - 50) * zoom));
+            var targetY = Math.min(panMax, Math.max(-panMax, -(anchorY - 50) * zoom));
+
+            var cam = { s: 1, x: 0, y: 0 };
+            var drift = { p: 0, dx: 0, dy: 0 };
+            function applyCamera() {
+              world.style.transform =
+                "translate(" +
+                (cam.x + drift.dx) +
+                "%, " +
+                (cam.y + drift.dy) +
+                "%) scale(" +
+                cam.s +
+                ")";
+            }
+            applyCamera();
+
+            // Halo pinned to the anchor in world space; it rides the camera.
+            // Explicit both-endpoint state BEFORE the timeline exists: the
+            // bloom fromTo sits mid-timeline, so without this set a seek that
+            // lands before the cue would show the halo unstyled.
+            halo.style.left = anchorX + "%";
+            halo.style.top = anchorY + "%";
+            if (!haloOn) halo.remove();
+            else
+              gsap.set(halo, {
+                opacity: 0,
+                scale: 0.55,
+                xPercent: -50,
+                yPercent: -50,
+                transformOrigin: "50% 50%",
+              });
+
+            // Envelope: fixed IN/ZOOM/OUT, elastic HOLD, never time-scaled.
+            var IN_BASE = 0.9;
+            var ZOOM_BASE = 1.1;
+            var OUT_BASE = exitMode === "none" ? 0 : 0.5;
+            var STILLNESS = 0.35;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4.5"));
+            var totalBase = IN_BASE + ZOOM_BASE + OUT_BASE;
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var ZOOM = ZOOM_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var OUT_START = duration - OUT;
+
+            // The camera departs on its cue, clamped so the move never fights
+            // the entrance or the exit.
+            var zoomStart = Math.min(Math.max(zoomAt, IN), Math.max(IN, OUT_START - ZOOM - 0.05));
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: one settle. Rise + soft scale + fade, smooth ease-out.
+            tl.fromTo(
+              stage,
+              { opacity: 0, y: "4.5cqh", scale: 0.965, transformOrigin: "50% 60%" },
+              { opacity: 1, y: "0cqh", scale: 1, duration: IN, ease: "power3.out" },
+              0,
+            );
+
+            // Camera servo: one move to the anchored region, then hold zoomed.
+            tl.to(
+              cam,
+              {
+                s: zoom,
+                x: targetX,
+                y: targetY,
+                duration: ZOOM,
+                ease: "power2.inOut",
+                onUpdate: applyCamera,
+              },
+              zoomStart,
+            );
+
+            // Micro-drift: 2 and 3 INTEGER sine cycles that end at exactly
+            // zero before the authored stillness, so the final hold is dead
+            // still and every seek reproduces the same frame.
+            var driftDuration = Math.max(0, OUT_START - STILLNESS);
+            if (driftDuration >= 1.2) {
+              tl.to(
+                drift,
+                {
+                  p: Math.PI * 2 * 2,
+                  duration: driftDuration,
+                  ease: "none",
+                  onUpdate: function () {
+                    drift.dx = Math.sin(drift.p) * DRIFT_X;
+                    drift.dy = Math.sin(drift.p * 1.5) * DRIFT_Y;
+                    applyCamera();
+                  },
+                },
+                0,
+              );
+            }
+
+            // Halo: soft bloom at the anchor as the camera arrives, then hold.
+            if (haloOn) {
+              tl.fromTo(
+                halo,
+                { opacity: 0, scale: 0.55, xPercent: -50, yPercent: -50 },
+                {
+                  opacity: 0.85,
+                  scale: 1,
+                  xPercent: -50,
+                  yPercent: -50,
+                  duration: 0.75 * scale,
+                  ease: "power2.out",
+                },
+                zoomStart + ZOOM * 0.5,
+              );
+            }
+
+            // OUT: only when exit != none; the default holds the last frame.
+            if (exitMode !== "none") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+              if (exitMode === "up") {
+                tl.to(stage, { y: "-4cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              }
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["ui-focus-zoom"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/variable-axis-type/demo.html b/registry/components/variable-axis-type/demo.html
new file mode 100644
index 0000000000..a9c1b60cd3
--- /dev/null
+++ b/registry/components/variable-axis-type/demo.html
@@ -0,0 +1,82 @@
+<!doctype html>
+<!--
+  variable-axis-type -- mount-contract demo. The width-axis override makes
+  glyph advances change across the requested 0.1s, 0.5s, and 0.9s snapshots,
+  while the primitive's fixed nowrap box proves the authored line stays stable.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Variable Axis Type - Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #05070d;
+      }
+
+      #root {
+        --bg: #0b1120;
+        --fg: #f8fafc;
+        --surface: #111a2c;
+        --border: rgba(148, 163, 184, 0.28);
+        --font-display: "Roboto Flex", sans-serif;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 45%, #18243d 0%, #05070d 72%);
+      }
+
+      .mount-card {
+        width: 70%;
+        height: 44%;
+        left: 15%;
+        top: 28%;
+        overflow: hidden;
+        border: 1px solid var(--border);
+        border-radius: 32px;
+        box-shadow: 0 44px 100px rgba(0, 0, 0, 0.45);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="variable-axis-type-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="1.6"
+      data-fps="30"
+    >
+      <div
+        id="variable-axis-type-mount"
+        class="mount-card clip"
+        data-composition-id="variable-axis-type"
+        data-composition-src="./variable-axis-type.html"
+        data-variable-values='{"text":"IMPACT","axis":"wdth","fromValue":55,"toValue":145}'
+        data-start="0"
+        data-duration="1.6"
+        data-track-index="0"
+        data-width="1344"
+        data-height="475"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["variable-axis-type-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/variable-axis-type/registry-item.json b/registry/components/variable-axis-type/registry-item.json
new file mode 100644
index 0000000000..46d1f90f35
--- /dev/null
+++ b/registry/components/variable-axis-type/registry-item.json
@@ -0,0 +1,63 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "variable-axis-type",
+  "type": "hyperframes:component",
+  "title": "Variable Axis Type",
+  "description": "A locked one-line headline whose weight or width axis morphs into a decisive emphasis beat.",
+  "tags": ["typography", "variable-font", "kinetic-type", "axis", "emphasize"],
+  "jobs": ["emphasize"],
+  "family": "typography",
+  "profile": "burst",
+  "evidence": "hyperframes-research-type-svg.md, VariableAxisType: stable complete axis lists, font-ready registration, layout lock, and midpoint verification.",
+  "files": [
+    {
+      "path": "variable-axis-type.html",
+      "target": "compositions/components/variable-axis-type.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "text",
+      "type": "string",
+      "role": "content",
+      "label": "Text",
+      "description": "Word or short headline to emphasize.",
+      "default": "IMPACT"
+    },
+    {
+      "id": "axis",
+      "type": "enum",
+      "role": "motion",
+      "label": "Axis",
+      "description": "Variable-font axis used for the emphasis morph.",
+      "default": "wght",
+      "options": [
+        { "value": "wght", "label": "Weight" },
+        { "value": "wdth", "label": "Width" }
+      ]
+    },
+    {
+      "id": "fromValue",
+      "type": "number",
+      "role": "motion",
+      "label": "From value",
+      "description": "Starting coordinate on the selected font axis.",
+      "default": 200,
+      "min": 25,
+      "max": 1000,
+      "step": 1
+    },
+    {
+      "id": "toValue",
+      "type": "number",
+      "role": "motion",
+      "label": "To value",
+      "description": "Ending coordinate on the selected font axis.",
+      "default": 900,
+      "min": 25,
+      "max": 1000,
+      "step": 1
+    }
+  ]
+}
diff --git a/registry/components/variable-axis-type/variable-axis-type.html b/registry/components/variable-axis-type/variable-axis-type.html
new file mode 100644
index 0000000000..4d1cd68ba9
--- /dev/null
+++ b/registry/components/variable-axis-type/variable-axis-type.html
@@ -0,0 +1,192 @@
+<!doctype html>
+<!--
+  variable-axis-type -- HyperFrames video primitive (typography / burst / emphasize)
+
+  Concept: one headline gains emphasis by morphing a single variable-font axis.
+  The glyphs change shape while the text element itself stays fixed.
+
+  Compiled-from evidence: hyperframes-research-type-svg.md, VariableAxisType.
+  The research identifies variable axes as deterministic numeric seek handles and
+  requires a complete, stable axis list, a font-ready gate, and midpoint checks.
+
+  Use when: a word or short headline needs a decisive emphasis beat without a
+  position, opacity, or scale animation.
+
+  Variables:
+    - text (string, default "IMPACT"): headline copy.
+    - axis ("wght" | "wdth", default "wght"): axis that performs the beat.
+    - fromValue (number, default 200): starting coordinate on the chosen axis.
+    - toValue (number, default 900): ending coordinate on the chosen axis.
+
+  Envelope: IN = up to 1.4s for the axis morph; HOLD = any remaining duration;
+  OUT = 0s. Short hosts compress IN directly. Never use gsap.timeScale().
+
+  Sync point: axis-land at 1.4s into IN, scaled proportionally when the host
+  duration is shorter. It is never placed in the elastic HOLD.
+
+  Sound: none. The changing glyph mass is the entire emphasis mechanic.
+
+  Mount contract: this is a template-wrapped sub-composition. The root has no
+  data-width or data-height, fills its host with inset:0, and registers one
+  paused GSAP timeline under the hardcoded id "variable-axis-type".
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "text", "type": "string", "role": "content", "label": "Text", "description": "Word or short headline to emphasize.", "default": "IMPACT" },
+    { "id": "axis", "type": "enum", "role": "motion", "label": "Axis", "description": "Variable-font axis used for the emphasis morph.", "default": "wght", "options": [{ "value": "wght", "label": "Weight" }, { "value": "wdth", "label": "Width" }] },
+    { "id": "fromValue", "type": "number", "role": "motion", "label": "From value", "description": "Starting coordinate on the selected font axis.", "default": 200, "min": 25, "max": 1000, "step": 1 },
+    { "id": "toValue", "type": "number", "role": "motion", "label": "To value", "description": "Ending coordinate on the selected font axis.", "default": 900, "min": 25, "max": 1000, "step": 1 }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Variable Axis Type</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="variable-axis-type" data-duration="1.6" data-fps="30">
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wdth,wght@8..144,25..151,100..1000&amp;display=block"
+          rel="stylesheet"
+        />
+
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            background: var(--bg, #0b1120);
+            color: var(--fg, #f8fafc);
+          }
+
+          .vat-clip {
+            width: 100%;
+            height: 100%;
+            display: grid;
+            place-items: center;
+          }
+
+          /* INVARIANT: width-axis changes may alter glyph advances, so the
+             authored line lives in a fixed box and can never wrap mid-tween. */
+          .vat-lock {
+            width: 92cqw;
+            height: 58cqh;
+            display: grid;
+            place-items: center;
+            overflow: visible;
+          }
+
+          /* EDIT ZONE: font size and tracking are the only composition-level
+             typography controls. Axis endpoints remain owned by variables. */
+          .vat-headline {
+            display: block;
+            width: 100%;
+            white-space: nowrap;
+            text-align: center;
+            color: var(--fg, #f8fafc);
+            font-family: "Roboto Flex", var(--font-display, sans-serif);
+            font-size: 19cqw;
+            font-weight: 400;
+            font-stretch: 100%;
+            font-optical-sizing: none;
+            font-synthesis: none;
+            line-height: 0.9;
+            letter-spacing: -0.045em;
+          }
+        </style>
+
+        <div
+          id="variable-axis-type-clip"
+          class="vat-clip clip"
+          data-start="0"
+          data-duration="1.6"
+          data-track-index="0"
+        >
+          <div class="vat-lock">
+            <div class="vat-headline">IMPACT</div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var headline = root.querySelector(".vat-headline");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var text = vars.text == null ? "IMPACT" : String(vars.text);
+            var axis = vars.axis === "wdth" ? "wdth" : "wght";
+            var minimum = axis === "wdth" ? 25 : 100;
+            var maximum = axis === "wdth" ? 151 : 1000;
+            var fromNumber = Number(vars.fromValue);
+            var toNumber = Number(vars.toValue);
+            var fromValue = Number.isFinite(fromNumber) ? fromNumber : 200;
+            var toValue = Number.isFinite(toNumber) ? toNumber : 900;
+            fromValue = Math.max(minimum, Math.min(maximum, fromValue));
+            toValue = Math.max(minimum, Math.min(maximum, toValue));
+
+            headline.textContent = text;
+
+            // Both endpoints list the same complete axis set in the same order.
+            // Omitting even an unchanged axis can silently disable interpolation.
+            var fromSettings =
+              axis === "wdth"
+                ? '"wght" 700, "wdth" ' + fromValue + ', "opsz" 96'
+                : '"wght" ' + fromValue + ', "wdth" 100, "opsz" 96';
+            var toSettings =
+              axis === "wdth"
+                ? '"wght" 700, "wdth" ' + toValue + ', "opsz" 96'
+                : '"wght" ' + toValue + ', "wdth" 100, "opsz" 96';
+
+            // RETIME RANGE: the morph is the fixed IN phase. Any time after it
+            // is an elastic still HOLD, which preserves the landed emphasis.
+            var IN_BASE = 1.4;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "1.6"));
+            var IN = Math.min(IN_BASE, duration);
+
+            // Font readiness owns timeline registration. This prevents fallback
+            // glyph metrics from leaking into any captured or midpoint frame.
+            document.fonts
+              .load('700 64px "Roboto Flex"', text)
+              .then(function () {
+                return document.fonts.ready;
+              })
+              .then(function () {
+                if (!document.fonts.check('700 64px "Roboto Flex"', text)) {
+                  throw new Error("Roboto Flex failed to load");
+                }
+
+                var tl = gsap.timeline({ paused: true });
+                tl.fromTo(
+                  headline,
+                  { fontVariationSettings: fromSettings },
+                  { fontVariationSettings: toSettings, duration: IN, ease: "expo.out" },
+                  0,
+                );
+                tl.seek(0);
+
+                window.__timelines = window.__timelines || {};
+                window.__timelines["variable-axis-type"] = tl;
+              });
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/variable-font-flex/README.md b/registry/components/variable-font-flex/README.md
new file mode 100644
index 0000000000..95dabfce46
--- /dev/null
+++ b/registry/components/variable-font-flex/README.md
@@ -0,0 +1,48 @@
+# variable-font-flex
+
+Wave M experiment (M5). A word lands while its variable-font axes flex: each character rises from hairline-condensed to black-wide with a per-character stagger and a small carve-in overshoot, then settles. The word's font-size eases inversely to the mean axis progress (optical compensation), so the letterforms gain mass while the word's box barely grows.
+
+3.5s authored, elastic HOLD, exit `none` by default.
+
+## Font source (pinned)
+
+Roboto Flex Variable via the Fontsource CDN build: `@fontsource-variable/roboto-flex@5.2.8`, latin `standard` subset, one woff2 carrying `wght` 100..1000 and `wdth` 25%..151%:
+
+```
+https://cdn.jsdelivr.net/npm/@fontsource-variable/roboto-flex@5.2.8/files/roboto-flex-latin-standard-normal.woff2
+```
+
+Inter var was considered per the spec but Inter has no `wdth` axis; the width mode needs a real one, so Roboto Flex carries both. The pinned font IS the mechanic: this unit deliberately does not ride `--font-display`, because a theme font without matching axes would kill the effect. The landing weight (840) is the animated mechanic, not static register styling.
+
+## Variables
+
+| id        | type   | default | notes                                                                                          |
+| --------- | ------ | ------- | ---------------------------------------------------------------------------------------------- |
+| `text`    | string | `FLEX`  | The word whose axes flex.                                                                      |
+| `axis`    | enum   | `both`  | `weight` (wght 120 to 840, wdth held 100), `width` (wdth 40 to 128, wght held 620), or `both`. |
+| `stagger` | number | `0.06`  | Seconds between per-character flex starts, clamped 0 to 0.25.                                  |
+| `accent`  | enum   | `green` | Word color: green rides `--brand`, blue rides `--accent`, violet rides `--accent-2`.           |
+| `exit`    | enum   | `none`  | `none` holds until the cut; `fade` departs opacity-only; `up` rises out.                       |
+
+## Mount
+
+```html
+<div
+  class="clip"
+  data-composition-id="variable-font-flex"
+  data-composition-src="./variable-font-flex.html"
+  data-variable-values='{"text":"ELASTIC","axis":"width","accent":"blue"}'
+  data-start="0"
+  data-duration="3.5"
+  data-track-index="0"
+></div>
+```
+
+Elastic root: no `data-width`/`data-height`; it fills whatever box the host clip gives it. Timeline registers under the literal `variable-font-flex` key.
+
+## Notes
+
+- Number proxy, never the string: no tween ever touches `font-variation-settings`. One inert anchor tween spans the authored duration; on every update a painter recomputes each character's axis NUMBERS as a pure function of `tl.time()` and composes the `"wght" W, "wdth" D` string from them, clamped to the font's real ranges (the carve ease overshoots ~6% past target before settling).
+- Optical compensation: word-level `font-size = base * (1 - COMP * meanProgress)` where COMP is 0.16 for `both`, 0.12 for `width`, 0.08 for `weight`. Mass grows, the box holds.
+- Seek-safe: painter writes are idempotent and depend on timeline time alone; eventful seeks (`suppressEvents=false`, the engine's render path) land identical frames in any order and either direction. No `Math.random`, no wall clock.
+- The base size fits the FINAL wide-black state (capped by `cqh` for short words on wide hosts); compensation only ever shrinks below it, so nothing clips mid-flex.
diff --git a/registry/components/variable-font-flex/demo.html b/registry/components/variable-font-flex/demo.html
new file mode 100644
index 0000000000..79b8491942
--- /dev/null
+++ b/registry/components/variable-font-flex/demo.html
@@ -0,0 +1,85 @@
+<!doctype html>
+<!--
+  variable-font-flex demo. FULL-BLEED light mount: the primitive fills the
+  whole 1920x1080 frame on a light token block. Non-default text, axis,
+  stagger, and accent values prove the variable path.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Variable Font Flex Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #eef0f3);
+      }
+
+      #root {
+        --bg: #eef0f3;
+        --fg: #14161b;
+        --muted: #5b6472;
+        --surface: #ffffff;
+        --border: #d3d8e0;
+        --brand: #3f3f46;
+        --accent: #3f3f46;
+        --accent-2: #3f3f46;
+        --font-display: "Inter", system-ui, sans-serif;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 42%, #f7f8fa 0%, var(--bg, #eef0f3) 72%);
+      }
+
+      .mount-bleed {
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        container-type: size;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="variable-font-flex-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="3.5"
+      data-fps="30"
+    >
+      <div
+        id="variable-font-flex-mount"
+        class="mount-bleed clip"
+        data-composition-id="variable-font-flex"
+        data-composition-src="./variable-font-flex.html"
+        data-variable-values='{"text":"ELASTIC","axis":"width","stagger":0.09,"accent":"blue"}'
+        data-start="0"
+        data-duration="3.5"
+        data-track-index="0"
+        data-width="1920"
+        data-height="1080"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["variable-font-flex-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/variable-font-flex/registry-item.json b/registry/components/variable-font-flex/registry-item.json
new file mode 100644
index 0000000000..47e49b6738
--- /dev/null
+++ b/registry/components/variable-font-flex/registry-item.json
@@ -0,0 +1,77 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "variable-font-flex",
+  "type": "hyperframes:component",
+  "title": "Variable Font Flex",
+  "description": "A word lands while its variable-font weight and width axes flex from hairline-condensed to black-wide with per-character stagger; font-size eases inversely so the letterforms gain mass while the box holds.",
+  "tags": ["motion-primitive", "experiment", "type", "variable-font", "deterministic"],
+  "jobs": ["emphasize"],
+  "family": "text-effects",
+  "profile": "axis-flex",
+  "evidence": "Wave M experiment M5: variable-font axis animation with optical compensation; Roboto Flex Variable pinned via @fontsource-variable/roboto-flex@5.2.8",
+  "syncPoints": [{ "id": "flex-settled", "phase": "in", "offset": 1.6 }],
+  "files": [
+    {
+      "path": "variable-font-flex.html",
+      "target": "compositions/components/variable-font-flex.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "text",
+      "type": "string",
+      "role": "content",
+      "label": "Text",
+      "description": "The word whose variable-font axes flex.",
+      "default": "FLEX"
+    },
+    {
+      "id": "axis",
+      "type": "enum",
+      "role": "style",
+      "label": "Axis",
+      "description": "Which variable-font axes animate: weight, width, or both.",
+      "default": "both",
+      "options": [
+        { "value": "weight", "label": "Weight" },
+        { "value": "width", "label": "Width" },
+        { "value": "both", "label": "Both" }
+      ]
+    },
+    {
+      "id": "stagger",
+      "type": "number",
+      "role": "timing",
+      "label": "Stagger",
+      "description": "Seconds between per-character flex starts, clamped 0 to 0.25.",
+      "default": 0.06
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Word color: green rides --brand, blue rides --accent, violet rides --accent-2.",
+      "default": "green",
+      "options": [
+        { "value": "green", "label": "Green" },
+        { "value": "blue", "label": "Blue" },
+        { "value": "violet", "label": "Violet" }
+      ]
+    },
+    {
+      "id": "exit",
+      "type": "enum",
+      "role": "timing",
+      "label": "Exit",
+      "description": "Optional departure. Default none: the carved word holds until the frame cuts.",
+      "default": "none",
+      "options": [
+        { "value": "none", "label": "None" },
+        { "value": "fade", "label": "Fade" },
+        { "value": "up", "label": "Up" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/variable-font-flex/variable-font-flex.html b/registry/components/variable-font-flex/variable-font-flex.html
new file mode 100644
index 0000000000..53185d9ce0
--- /dev/null
+++ b/registry/components/variable-font-flex/variable-font-flex.html
@@ -0,0 +1,304 @@
+<!doctype html>
+<!--
+  variable-font-flex: HyperFrames video primitive (type / Wave M experiment M5)
+
+  A word lands while its variable-font axes flex: each character rises from
+  hairline-condensed to black-wide (weight 120 to 840, width 40 to 128) with
+  a per-character stagger and a small carve-in overshoot, then settles. The
+  word's font-size eases INVERSELY to the mean axis progress (optical
+  compensation), so the letterforms gain mass while the word's box barely
+  grows: ink swells, layout holds.
+
+  Font: Roboto Flex Variable, pinned via the Fontsource CDN build
+  (@fontsource-variable/roboto-flex@5.2.8, latin "standard" subset:
+  wght 100..1000 and wdth 25%..151% in one woff2). Inter var was considered
+  per the spec but Inter carries NO wdth axis, and this unit's width mode
+  needs a real one; Roboto Flex has both. The @font-face below pins the
+  exact file. The pinned font IS the mechanic, so this unit deliberately
+  does not ride --font-display: a theme font without matching axes would
+  kill the effect. The landing weight (840) is the animated mechanic, not
+  static register styling.
+
+  Variables (declared in data-composition-variables below):
+    - text (string, default "FLEX"): the word.
+    - axis ("weight" | "width" | "both", default "both"): which axes flex.
+      weight holds wdth at 100; width holds wght at 620.
+    - stagger (number seconds, default 0.06, clamped 0 to 0.25): per-char
+      offset between axis flex starts.
+    - accent ("green" | "blue" | "violet", default "green"): green rides
+      --brand, blue rides --accent, violet rides --accent-2.
+    - exit ("none" | "fade" | "up", default "none").
+
+  Envelope, fixed IN and OUT with elastic HOLD only (never timeScale):
+    IN_BASE  = 0.12 lead + (chars - 1) * stagger + 1.15 flex + 0.15 margin
+    HOLD     = max(0, D - IN - OUT), truly still
+    OUT_BASE = 0.45s only when exit != none
+    If D < IN_BASE + OUT_BASE the whole envelope compresses together.
+
+  Determinism and seek-safety: NO tween ever touches the
+  font-variation-settings string. One inert anchor tween spans [0, D]; on
+  every update a painter recomputes each character's axis numbers as a pure
+  function of tl.time() (a number proxy per char) and composes the
+  '"wght" W, "wdth" D' string from those numbers, plus the word-level
+  compensated font-size. Writes are idempotent; eventful seeks
+  (suppressEvents=false) land identical frames in any order and direction.
+
+  Mount contract: the runtime clones only this template. #root fills the
+  host box (no data-width/data-height, container-type: size, cqmin units),
+  is styled via #root only, and registers one paused timeline under the
+  LITERAL "variable-font-flex" key.
+-->
+<html
+  lang="en"
+  data-composition-id="variable-font-flex"
+  data-composition-duration="3.5"
+  data-composition-variables='[
+    { "id": "text", "type": "string", "role": "content", "label": "Text", "description": "The word whose variable-font axes flex.", "default": "FLEX" },
+    { "id": "axis", "type": "enum", "role": "style", "label": "Axis", "description": "Which variable-font axes animate: weight, width, or both.", "default": "both", "options": [{ "value": "weight", "label": "Weight" }, { "value": "width", "label": "Width" }, { "value": "both", "label": "Both" }] },
+    { "id": "stagger", "type": "number", "role": "timing", "label": "Stagger", "description": "Seconds between per-character flex starts, clamped 0 to 0.25.", "default": 0.06 },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Word color: green rides --brand, blue rides --accent, violet rides --accent-2.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the carved word holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Variable Font Flex</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="variable-font-flex" data-duration="3.5" data-fps="30">
+        <style>
+          /* Pinned variable font: Fontsource build of Roboto Flex, latin
+             standard subset, wght 100..1000 + wdth 25%..151% in one file.
+             @fontsource-variable/roboto-flex@5.2.8 on jsdelivr. */
+          @font-face {
+            font-family: "Roboto Flex Variable";
+            font-style: normal;
+            font-display: block;
+            font-weight: 100 1000;
+            font-stretch: 25% 151%;
+            src: url(https://cdn.jsdelivr.net/npm/@fontsource-variable/roboto-flex@5.2.8/files/roboto-flex-latin-standard-normal.woff2)
+              format("woff2-variations");
+          }
+
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: "Roboto Flex Variable", system-ui, sans-serif;
+            pointer-events: none;
+          }
+
+          .vff-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+            background: var(--bg, transparent);
+          }
+
+          .vff-stage {
+            display: block;
+            max-width: 94cqw;
+            will-change: transform, opacity;
+          }
+
+          .vff-word {
+            display: flex;
+            align-items: baseline;
+            justify-content: center;
+            color: var(--vff-accent);
+            line-height: 1;
+            white-space: pre;
+          }
+
+          .vff-char {
+            position: relative;
+            display: inline-block;
+            white-space: pre;
+            /* No will-change and no transform on chars: per-char compositor
+               layer promotion makes glyph antialiasing depend on seek
+               history (paint-level nondeterminism); the rise rides
+               relative top instead. */
+          }
+        </style>
+
+        <div
+          id="variable-font-flex-clip"
+          class="vff-clip clip"
+          data-start="0"
+          data-duration="3.5"
+          data-track-index="0"
+        >
+          <div class="vff-stage" role="img">
+            <div class="vff-word" aria-hidden="true"></div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".vff-stage");
+            var word = root.querySelector(".vff-word");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var text = vars.text == null || vars.text === "" ? "FLEX" : String(vars.text);
+            var axis = vars.axis === "weight" || vars.axis === "width" ? vars.axis : "both";
+            var staggerRaw = parseFloat(vars.stagger);
+            var stagger = isFinite(staggerRaw) ? Math.min(0.25, Math.max(0, staggerRaw)) : 0.06;
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #52525b)",
+              blue: "var(--accent, #52525b)",
+              violet: "var(--accent-2, #52525b)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            root.style.setProperty("--vff-accent", accentColors[accent]);
+            stage.setAttribute("aria-label", text);
+
+            // Axis endpoints. Non-animated axes hold a fixed value so the
+            // composed string is always complete and orderable.
+            var WGHT_FROM = axis === "width" ? 620 : 120;
+            var WGHT_TO = axis === "width" ? 620 : 840;
+            var WDTH_FROM = axis === "weight" ? 100 : 40;
+            var WDTH_TO = axis === "weight" ? 100 : 128;
+            // Optical compensation strength per mode: how much of the mass
+            // gain the font-size gives back so the box barely grows.
+            var COMP = axis === "both" ? 0.16 : axis === "width" ? 0.12 : 0.08;
+
+            // Build one span per character; spaces stay in flow (white-space:
+            // pre) but never animate.
+            var characters = Array.from(text);
+            var hostDoc = root.ownerDocument;
+            var chars = [];
+            var fragment = hostDoc.createDocumentFragment();
+            for (var i = 0; i < characters.length; i += 1) {
+              var span = hostDoc.createElement("span");
+              span.className = "vff-char";
+              span.textContent = characters[i];
+              fragment.appendChild(span);
+              if (!/\s/.test(characters[i])) chars.push({ el: span, index: i });
+            }
+            word.appendChild(fragment);
+
+            // Fit for the FINAL (wide, black) state; compensation only ever
+            // shrinks below this. cqw base capped by cqh so short words on
+            // wide hosts stay inside the frame.
+            var fitted = Math.min(21, 118 / Math.max(3, characters.length));
+            var BASE_SIZE = "min(" + fitted.toFixed(3) + "cqw, 30cqh)";
+            root.style.setProperty("--vff-size", BASE_SIZE);
+            word.style.fontSize = "var(--vff-size)";
+
+            // Envelope: fixed IN/OUT, elastic HOLD, never time-scaled.
+            var LEAD = 0.12;
+            var FLEX = 1.15;
+            var MARGIN = 0.15;
+            var IN_BASE = LEAD + Math.max(0, chars.length - 1) * stagger + FLEX + MARGIN;
+            var OUT_BASE = exit === "none" ? 0 : 0.45;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "3.5"));
+            var totalBase = Math.max(0.001, IN_BASE + OUT_BASE);
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var lead = LEAD * scale;
+            var flex = FLEX * scale;
+            var staggerEff = stagger * scale;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var OUT_START = IN + HOLD;
+
+            function clamp01(v) {
+              return v < 0 ? 0 : v > 1 ? 1 : v;
+            }
+            // Carve ease: overshoots ~6% past the target, then settles. The
+            // painter clamps composed axis values to the font's real ranges.
+            function carve(u) {
+              var c1 = 0.9;
+              var c3 = c1 + 1;
+              var x = u - 1;
+              return 1 + c3 * x * x * x + c1 * x * x;
+            }
+            function clampAxis(v, lo, hi) {
+              return v < lo ? lo : v > hi ? hi : v;
+            }
+
+            // Pure per-update painter: every character's axis NUMBERS are a
+            // function of tl.time() alone; the font-variation-settings
+            // string is composed from those numbers (the number proxy; the
+            // string itself is never tweened). The word-level font-size
+            // eases inversely to the mean settled progress: optical
+            // compensation, mass grows while the box holds.
+            function applyTime(timeSeconds) {
+              var settledSum = 0;
+              for (var c = 0; c < chars.length; c += 1) {
+                var start = lead + c * staggerEff;
+                var u = clamp01(flex > 0 ? (timeSeconds - start) / flex : 1);
+                var e = u <= 0 ? 0 : u >= 1 ? 1 : carve(u);
+                var settled = e > 1 ? 1 : e;
+                settledSum += settled;
+                var wght = clampAxis(WGHT_FROM + (WGHT_TO - WGHT_FROM) * e, 100, 1000);
+                var wdth = clampAxis(WDTH_FROM + (WDTH_TO - WDTH_FROM) * e, 25, 151);
+                var el = chars[c].el;
+                el.style.fontVariationSettings =
+                  '"wght" ' + wght.toFixed(1) + ', "wdth" ' + wdth.toFixed(2);
+                var oIn = clamp01(flex > 0 ? (timeSeconds - start) / (flex * 0.22) : 1);
+                el.style.opacity = (oIn * oIn * (3 - 2 * oIn)).toFixed(4);
+                el.style.top = ((1 - settled) * 0.14).toFixed(4) + "em";
+              }
+              var mean = chars.length > 0 ? settledSum / chars.length : 1;
+              word.style.fontSize = "calc(var(--vff-size) * " + (1 - COMP * mean).toFixed(4) + ")";
+            }
+
+            gsap.set(stage, { opacity: 1, y: "0cqh" });
+
+            var tl = gsap.timeline({
+              paused: true,
+              onUpdate: function () {
+                applyTime(tl.time());
+              },
+            });
+
+            // Anchor tween: an inert plain-object tween spanning [0, D] so
+            // onUpdate fires for every eventful seek and holds never clamp.
+            tl.to({ p: 0 }, { p: 1, duration: duration, ease: "none" }, 0);
+
+            // HOLD: truly still; repeated repaints write identical values.
+
+            // OUT: optional departure; exit none holds until the frame cuts.
+            if (exit === "up") {
+              tl.to(stage, { y: "-4cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "fade") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            }
+
+            tl.seek(0);
+            applyTime(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["variable-font-flex"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/vector-editor-rig/demo.html b/registry/components/vector-editor-rig/demo.html
new file mode 100644
index 0000000000..1c1cb73226
--- /dev/null
+++ b/registry/components/vector-editor-rig/demo.html
@@ -0,0 +1,95 @@
+<!doctype html>
+<!--
+  vector-editor-rig -- demo. Standalone 1920x1080 composition that mounts the
+  primitive from ./vector-editor-rig.html via data-composition-src. The wide
+  mount card gives the toolbar, canvas, and inspector enough room to read at
+  preview size. Non-default tool and pathLabel overrides prove that declared
+  variables flow through the host into the mounted primitive. The primitive
+  carries no data-width/data-height and sizes itself from this host box.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Vector Editor Rig - Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #05070d);
+      }
+
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background:
+          radial-gradient(
+            ellipse at 50% 42%,
+            color-mix(in srgb, var(--brand, #59a8ff) 14%, transparent),
+            transparent 55%
+          ),
+          var(--bg, #05070d);
+      }
+
+      .mount-card {
+        --bg: #0a1020;
+        --fg: #f5f8ff;
+        --brand: #59a8ff;
+        --surface: #151f32;
+        --border: #2d3a50;
+        --muted: #8391a8;
+        width: 75%;
+        height: 70%;
+        left: 12.5%;
+        top: 15%;
+        overflow: hidden;
+        border: 1px solid color-mix(in srgb, var(--border, #2d3a50) 84%, transparent);
+        border-radius: 30px;
+        box-shadow: 0 44px 110px color-mix(in srgb, var(--bg, #05070d) 72%, transparent);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="vector-editor-rig-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4.5"
+      data-fps="30"
+    >
+      <div
+        id="vector-editor-rig-mount"
+        class="mount-card clip"
+        data-composition-id="vector-editor-rig"
+        data-composition-src="./vector-editor-rig.html"
+        data-variable-values='{"tool":"shape","pathLabel":"Orbit Mark"}'
+        data-start="0"
+        data-duration="4.5"
+        data-track-index="0"
+        data-width="1440"
+        data-height="756"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      // This demo has no motion of its own. The mounted primitive registers
+      // its own timeline. An empty paused host timeline satisfies the
+      // runtime's timeline-registry check without duplicating motion.
+      window.__timelines = window.__timelines || {};
+      window.__timelines["vector-editor-rig-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/vector-editor-rig/registry-item.json b/registry/components/vector-editor-rig/registry-item.json
new file mode 100644
index 0000000000..94f1047be4
--- /dev/null
+++ b/registry/components/vector-editor-rig/registry-item.json
@@ -0,0 +1,51 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "vector-editor-rig",
+  "type": "hyperframes:component",
+  "title": "Vector Editor Rig",
+  "description": "A dark design-tool app chrome with a live vector pen path, sequential anchor points, bezier handles, a selection frame, and theme-driven blue accents.",
+  "tags": [
+    "prop",
+    "ui-props",
+    "demonstrate",
+    "vector",
+    "design-tool",
+    "pen-tool",
+    "bezier",
+    "app-chrome"
+  ],
+  "jobs": ["demonstrate"],
+  "family": "ui-props",
+  "profile": "holdable",
+  "evidence": "power-reel source 11-vector-editor (design-tool twin of terminal-run)",
+  "files": [
+    {
+      "path": "vector-editor-rig.html",
+      "target": "compositions/components/vector-editor-rig.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "tool",
+      "type": "enum",
+      "role": "content",
+      "label": "Active tool",
+      "description": "Tool highlighted in the editor toolbar.",
+      "default": "pen",
+      "options": [
+        { "value": "pen", "label": "Pen" },
+        { "value": "shape", "label": "Shape" },
+        { "value": "type", "label": "Type" }
+      ]
+    },
+    {
+      "id": "pathLabel",
+      "type": "string",
+      "role": "content",
+      "label": "Path label",
+      "description": "Name shown for the active vector path.",
+      "default": "Logo"
+    }
+  ]
+}
diff --git a/registry/components/vector-editor-rig/vector-editor-rig.html b/registry/components/vector-editor-rig/vector-editor-rig.html
new file mode 100644
index 0000000000..c5427231bd
--- /dev/null
+++ b/registry/components/vector-editor-rig/vector-editor-rig.html
@@ -0,0 +1,795 @@
+<!doctype html>
+<!--
+  vector-editor-rig -- HyperFrames video primitive (ui-props / holdable / demonstrate)
+
+  Concept: a compact vector editor app chrome frames the demonstration. A
+  left tool rail, central canvas, and right layers and properties inspector
+  stay readable while a blue bezier path draws on live. Anchor dots, diamond
+  control handles, connector arms, and a selection frame arrive in sequence
+  so the scene reads as active vector design rather than a static diagram.
+
+  Compiled-from evidence: power-reel source 11-vector-editor (design-tool
+  twin of terminal-run). The source contributes its blue-on-dark selection
+  rig vocabulary, while this primitive adds the required application chrome
+  and live pen drawing mechanic.
+
+  Use when: demonstrating vector creation, brand design, drawing tools, or a
+  design workflow inside a larger product scene. The primitive is holdable,
+  so the completed editor state remains legible for variable scene lengths.
+
+  Variables (declared in data-composition-variables below):
+    - tool ("pen" | "shape" | "type", default "pen"): selects the visibly
+      active swatch in the left toolbar.
+    - pathLabel (string, default "Logo"): names the document chip and the
+      selected layer. Blank or whitespace-only values normalize to "Logo".
+    - accent is theme-owned, not a getVariables() knob. The path, active tool,
+      handles, and selection frame all paint through var(--brand, #0d99ff).
+
+  Envelope (fixed IN/OUT, elastic HOLD only, never gsap.timeScale()):
+    IN_BASE  = 1.20s  chrome settles, path draws, rig nodes pop, frame lands
+    HOLD     = elastic = max(0, D - (IN_BASE + OUT_BASE)); selected-state dot
+               breathes gently with a finite sine cycle
+    OUT_BASE = 0.50s  editor releases upward and fades
+    If D < IN_BASE + OUT_BASE, IN and OUT scale down together so IN + OUT == D
+    and HOLD == 0.
+
+  Sync point (fixed offset into IN, never inside elastic HOLD): the stroke
+  finishes and the final anchor lands at PATH_FINISH_AT = 1.05s into an
+  unscaled IN. It scales proportionally when the envelope is compressed.
+
+  Sound cue: a subtle vector-close cue fires at PATH_FINISH_AT. This primitive
+  never plays audio. It dispatches an `hf:sfx` CustomEvent
+  ({ id: "vector-close", t: PATH_FINISH_AT }) for a scene mix stage to route.
+
+  Mount contract: this file is a MOUNTABLE SUB-COMPOSITION, not a standalone
+  composition. A host loads it via data-composition-src; the runtime only
+  clones <template> contents, so all live CSS, markup, and scripts sit inside
+  <template>. The root has no data-width/data-height. It fills the host slot
+  with position:absolute; inset:0; container-type:size and sizes every visual
+  from cqw/cqh or SVG viewBox proportions. The root is styled by #root because
+  mounted CSS scoping can stop a class selector from matching the flattened
+  root. Variables come from window.__hyperframes.getVariables(), which merges
+  declared defaults with per-instance host overrides before mount.
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "tool", "type": "enum", "role": "content", "label": "Active tool", "description": "Tool highlighted in the editor toolbar.", "default": "pen", "options": [{ "value": "pen", "label": "Pen" }, { "value": "shape", "label": "Shape" }, { "value": "type", "label": "Type" }] },
+    { "id": "pathLabel", "type": "string", "role": "content", "label": "Path label", "description": "Name shown for the active vector path.", "default": "Logo" }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Vector Editor Rig</title>
+    <!-- Metadata only for direct file inspection. The runtime discards the
+         head when mounting, while it reads variable declarations from the
+         fetched document's html element before cloning the template. -->
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="vector-editor-rig" data-duration="4.5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            background: var(--bg, #0b1120);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+          }
+
+          .ve-clip,
+          .ve-stage {
+            width: 100%;
+            height: 100%;
+          }
+
+          .ve-stage {
+            display: grid;
+            grid-template-rows: 9cqh 1fr;
+            background: var(--bg, #0b1120);
+            opacity: 0;
+          }
+
+          .ve-topbar {
+            display: grid;
+            grid-template-columns: 18cqw 1fr 18cqw;
+            align-items: center;
+            padding: 0 2cqw;
+            border-bottom: 0.08cqw solid var(--border, #2c3b52);
+            background: color-mix(in srgb, var(--surface, #162033) 84%, var(--bg, #0b1120));
+          }
+
+          .ve-window-controls,
+          .ve-top-actions {
+            display: flex;
+            align-items: center;
+            gap: 0.7cqw;
+          }
+
+          .ve-top-actions {
+            justify-content: flex-end;
+          }
+
+          .ve-window-dot {
+            width: 0.75cqw;
+            aspect-ratio: 1;
+            border-radius: 50%;
+            background: var(--muted, #8190a8);
+          }
+
+          .ve-window-dot:first-child,
+          .ve-live-dot {
+            background: var(--brand, #0d99ff);
+          }
+
+          .ve-document {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 0.8cqw;
+            min-width: 0;
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: 1.25cqw;
+            font-weight: 650;
+            letter-spacing: 0.01em;
+          }
+
+          .ve-document-name {
+            max-width: 20cqw;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          .ve-document-chip,
+          .ve-zoom-chip {
+            padding: 0.55cqh 0.75cqw;
+            border: 0.08cqw solid color-mix(in srgb, var(--brand, #0d99ff) 46%, transparent);
+            border-radius: 0.45cqw;
+            background: color-mix(in srgb, var(--brand, #0d99ff) 13%, transparent);
+            color: var(--brand, #0d99ff);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            font-size: 0.82cqw;
+            font-weight: 700;
+            letter-spacing: 0.06em;
+            text-transform: uppercase;
+          }
+
+          .ve-zoom-chip {
+            border-color: var(--border, #2c3b52);
+            background: var(--surface, #162033);
+            color: var(--muted, #8190a8);
+            letter-spacing: 0;
+            text-transform: none;
+          }
+
+          .ve-live-dot {
+            width: 0.55cqw;
+            aspect-ratio: 1;
+            border-radius: 50%;
+            box-shadow: 0 0 1.2cqw color-mix(in srgb, var(--brand, #0d99ff) 68%, transparent);
+          }
+
+          .ve-workbench {
+            min-height: 0;
+            display: grid;
+            grid-template-columns: 7cqw minmax(0, 1fr) 25cqw;
+          }
+
+          .ve-toolbar {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 1.4cqh;
+            padding-top: 2.4cqh;
+            border-right: 0.08cqw solid var(--border, #2c3b52);
+            background: color-mix(in srgb, var(--surface, #162033) 72%, var(--bg, #0b1120));
+          }
+
+          .ve-tool {
+            width: 3.7cqw;
+            aspect-ratio: 1;
+            display: grid;
+            place-items: center;
+            border: 0.08cqw solid transparent;
+            border-radius: 0.75cqw;
+            background: transparent;
+            color: var(--muted, #8190a8);
+          }
+
+          .ve-tool svg {
+            width: 1.75cqw;
+            height: 1.75cqw;
+            overflow: visible;
+          }
+
+          #root[data-tool="pen"] .ve-tool[data-tool-id="pen"],
+          #root[data-tool="shape"] .ve-tool[data-tool-id="shape"],
+          #root[data-tool="type"] .ve-tool[data-tool-id="type"] {
+            border-color: color-mix(in srgb, var(--brand, #0d99ff) 46%, transparent);
+            background: color-mix(in srgb, var(--brand, #0d99ff) 15%, transparent);
+            color: var(--brand, #0d99ff);
+            box-shadow: 0 0 1.4cqw color-mix(in srgb, var(--brand, #0d99ff) 14%, transparent);
+          }
+
+          .ve-tool-divider {
+            width: 3cqw;
+            height: 0.08cqw;
+            margin: 0.35cqh 0;
+            background: var(--border, #2c3b52);
+          }
+
+          .ve-canvas {
+            position: relative;
+            min-width: 0;
+            overflow: hidden;
+            background:
+              linear-gradient(
+                color-mix(in srgb, var(--border, #2c3b52) 25%, transparent) 0.08cqw,
+                transparent 0.08cqw
+              ),
+              linear-gradient(
+                90deg,
+                color-mix(in srgb, var(--border, #2c3b52) 25%, transparent) 0.08cqw,
+                transparent 0.08cqw
+              ),
+              color-mix(in srgb, var(--bg, #0b1120) 84%, var(--surface, #162033));
+            background-size: 4.3cqw 4.3cqw;
+          }
+
+          .ve-canvas-label {
+            position: absolute;
+            top: 2.2cqh;
+            left: 2cqw;
+            z-index: 2;
+            display: flex;
+            align-items: center;
+            gap: 0.65cqw;
+            color: var(--muted, #8190a8);
+            font-size: 0.92cqw;
+            letter-spacing: 0.03em;
+          }
+
+          .ve-canvas-label::before {
+            content: "";
+            width: 0.55cqw;
+            aspect-ratio: 1;
+            border: 0.08cqw solid var(--brand, #0d99ff);
+            transform: rotate(45deg);
+          }
+
+          .ve-artboard {
+            position: absolute;
+            left: 50%;
+            top: 52%;
+            width: 50cqw;
+            height: 64cqh;
+            transform: translate(-50%, -50%);
+            overflow: hidden;
+            border: 0.08cqw solid color-mix(in srgb, var(--border, #2c3b52) 78%, transparent);
+            border-radius: 1.1cqw;
+            background:
+              radial-gradient(
+                circle at 50% 48%,
+                color-mix(in srgb, var(--brand, #0d99ff) 10%, transparent),
+                transparent 48%
+              ),
+              var(--surface, #162033);
+            box-shadow: 0 2.8cqh 5.5cqw color-mix(in srgb, var(--bg, #0b1120) 70%, transparent);
+          }
+
+          .ve-artboard svg {
+            width: 100%;
+            height: 100%;
+            display: block;
+            overflow: visible;
+          }
+
+          .ve-vector-path {
+            fill: color-mix(in srgb, var(--brand, #0d99ff) 8%, transparent);
+            stroke: var(--brand, #0d99ff);
+            stroke-width: 4;
+            stroke-linecap: round;
+            stroke-linejoin: round;
+            filter: drop-shadow(
+              0 0 0.7cqw color-mix(in srgb, var(--brand, #0d99ff) 42%, transparent)
+            );
+          }
+
+          .ve-selection {
+            color: var(--brand, #0d99ff);
+          }
+
+          .ve-selection-frame {
+            fill: none;
+            stroke: currentColor;
+            stroke-width: 1.5;
+          }
+
+          .ve-selection-corner,
+          .ve-control-diamond {
+            fill: var(--surface, #162033);
+            stroke: currentColor;
+            stroke-width: 2;
+          }
+
+          .ve-control-arm {
+            stroke: var(--muted, #8190a8);
+            stroke-width: 1.5;
+          }
+
+          .ve-anchor-dot {
+            fill: var(--fg, #f8fafc);
+            stroke: var(--brand, #0d99ff);
+            stroke-width: 3;
+          }
+
+          .ve-anchor-ring {
+            fill: color-mix(in srgb, var(--brand, #0d99ff) 12%, transparent);
+            stroke: color-mix(in srgb, var(--brand, #0d99ff) 55%, transparent);
+            stroke-width: 1.5;
+          }
+
+          .ve-inspector {
+            min-width: 0;
+            border-left: 0.08cqw solid var(--border, #2c3b52);
+            background: color-mix(in srgb, var(--surface, #162033) 76%, var(--bg, #0b1120));
+          }
+
+          .ve-panel-section {
+            padding: 2.1cqh 1.6cqw;
+            border-bottom: 0.08cqw solid var(--border, #2c3b52);
+          }
+
+          .ve-panel-title {
+            margin-bottom: 1.4cqh;
+            color: var(--muted, #8190a8);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: 0.82cqw;
+            font-weight: 750;
+            letter-spacing: 0.12em;
+            text-transform: uppercase;
+          }
+
+          .ve-layer-row,
+          .ve-property-row {
+            display: grid;
+            align-items: center;
+            min-width: 0;
+            border-radius: 0.6cqw;
+            color: var(--fg, #f8fafc);
+            font-size: 0.94cqw;
+          }
+
+          .ve-layer-row {
+            grid-template-columns: 1.3cqw minmax(0, 1fr) auto;
+            gap: 0.75cqw;
+            padding: 1.15cqh 0.85cqw;
+          }
+
+          .ve-layer-row.is-selected {
+            background: color-mix(in srgb, var(--brand, #0d99ff) 14%, transparent);
+            color: var(--brand, #0d99ff);
+          }
+
+          .ve-layer-icon {
+            width: 0.85cqw;
+            aspect-ratio: 1;
+            border: 0.1cqw solid currentColor;
+            transform: rotate(45deg);
+          }
+
+          .ve-layer-name {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          .ve-layer-kind {
+            color: var(--muted, #8190a8);
+            font-size: 0.72cqw;
+            letter-spacing: 0.04em;
+          }
+
+          .ve-property-row {
+            grid-template-columns: minmax(0, 1fr) auto;
+            gap: 1cqw;
+            min-height: 4.1cqh;
+            color: var(--muted, #8190a8);
+          }
+
+          .ve-property-value {
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: 0.86cqw;
+          }
+
+          .ve-color-swatch {
+            width: 1.2cqw;
+            aspect-ratio: 1;
+            border: 0.08cqw solid color-mix(in srgb, var(--fg, #f8fafc) 25%, transparent);
+            border-radius: 0.28cqw;
+            background: var(--brand, #0d99ff);
+          }
+        </style>
+
+        <div
+          id="vector-editor-rig-clip"
+          class="ve-clip clip"
+          data-start="0"
+          data-duration="4.5"
+          data-track-index="0"
+        >
+          <div class="ve-stage">
+            <header class="ve-topbar">
+              <div class="ve-window-controls" aria-hidden="true">
+                <span class="ve-window-dot"></span>
+                <span class="ve-window-dot"></span>
+                <span class="ve-window-dot"></span>
+              </div>
+              <div class="ve-document">
+                <span class="ve-document-chip">Vector</span>
+                <span class="ve-document-name"></span>
+              </div>
+              <div class="ve-top-actions">
+                <span class="ve-live-dot"></span>
+                <span class="ve-zoom-chip">100%</span>
+              </div>
+            </header>
+
+            <div class="ve-workbench">
+              <nav class="ve-toolbar" aria-label="Vector tools">
+                <div class="ve-tool" data-tool-id="pen" aria-label="Pen tool" role="img">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
+                    <path d="M4 20l4.3-1.1L19 8.2 15.8 5 5.1 15.7 4 20Z" />
+                    <path d="m13.8 7 3.2 3.2M5.1 15.7l3.2 3.2" />
+                  </svg>
+                </div>
+                <div class="ve-tool" data-tool-id="shape" aria-label="Shape tool" role="img">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
+                    <rect x="4.5" y="4.5" width="15" height="15" rx="2" />
+                    <circle cx="12" cy="12" r="3.5" />
+                  </svg>
+                </div>
+                <div class="ve-tool" data-tool-id="type" aria-label="Type tool" role="img">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
+                    <path d="M5 6h14M12 6v13M8.5 19h7" />
+                  </svg>
+                </div>
+                <span class="ve-tool-divider"></span>
+                <div class="ve-tool" aria-hidden="true">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
+                    <path d="m5 5 6 14 2-6 6-2L5 5Z" />
+                  </svg>
+                </div>
+              </nav>
+
+              <main class="ve-canvas">
+                <div class="ve-canvas-label"><span></span></div>
+                <div class="ve-artboard">
+                  <svg viewBox="0 0 720 500" aria-label="Vector path being drawn">
+                    <path
+                      class="ve-vector-path"
+                      d="M 140 350 C 165 235 235 150 320 145 C 415 140 520 195 565 285 C 600 360 535 415 445 425 C 350 440 260 430 210 405 C 175 390 150 370 140 350 Z"
+                    />
+
+                    <g class="ve-selection">
+                      <rect
+                        class="ve-selection-frame"
+                        x="105"
+                        y="100"
+                        width="500"
+                        height="370"
+                        rx="4"
+                      />
+                      <rect
+                        class="ve-selection-corner"
+                        x="99"
+                        y="94"
+                        width="12"
+                        height="12"
+                        rx="1"
+                      />
+                      <rect
+                        class="ve-selection-corner"
+                        x="599"
+                        y="94"
+                        width="12"
+                        height="12"
+                        rx="1"
+                      />
+                      <rect
+                        class="ve-selection-corner"
+                        x="599"
+                        y="464"
+                        width="12"
+                        height="12"
+                        rx="1"
+                      />
+                      <rect
+                        class="ve-selection-corner"
+                        x="99"
+                        y="464"
+                        width="12"
+                        height="12"
+                        rx="1"
+                      />
+                    </g>
+
+                    <g class="ve-node">
+                      <circle class="ve-anchor-ring" cx="140" cy="350" r="12" />
+                      <circle class="ve-anchor-dot" cx="140" cy="350" r="6" />
+                    </g>
+                    <g class="ve-node">
+                      <line class="ve-control-arm" x1="235" y1="150" x2="405" y2="138" />
+                      <rect
+                        class="ve-control-diamond"
+                        x="229"
+                        y="144"
+                        width="12"
+                        height="12"
+                        transform="rotate(45 235 150)"
+                      />
+                      <rect
+                        class="ve-control-diamond"
+                        x="399"
+                        y="132"
+                        width="12"
+                        height="12"
+                        transform="rotate(45 405 138)"
+                      />
+                      <circle class="ve-anchor-ring" cx="320" cy="145" r="12" />
+                      <circle class="ve-anchor-dot" cx="320" cy="145" r="6" />
+                    </g>
+                    <g class="ve-node">
+                      <line class="ve-control-arm" x1="520" y1="195" x2="600" y2="360" />
+                      <rect
+                        class="ve-control-diamond"
+                        x="514"
+                        y="189"
+                        width="12"
+                        height="12"
+                        transform="rotate(45 520 195)"
+                      />
+                      <rect
+                        class="ve-control-diamond"
+                        x="594"
+                        y="354"
+                        width="12"
+                        height="12"
+                        transform="rotate(45 600 360)"
+                      />
+                      <circle class="ve-anchor-ring" cx="565" cy="285" r="12" />
+                      <circle class="ve-anchor-dot" cx="565" cy="285" r="6" />
+                    </g>
+                    <g class="ve-node">
+                      <line class="ve-control-arm" x1="535" y1="415" x2="350" y2="440" />
+                      <rect
+                        class="ve-control-diamond"
+                        x="529"
+                        y="409"
+                        width="12"
+                        height="12"
+                        transform="rotate(45 535 415)"
+                      />
+                      <rect
+                        class="ve-control-diamond"
+                        x="344"
+                        y="434"
+                        width="12"
+                        height="12"
+                        transform="rotate(45 350 440)"
+                      />
+                      <circle class="ve-anchor-ring" cx="445" cy="425" r="12" />
+                      <circle class="ve-anchor-dot" cx="445" cy="425" r="6" />
+                    </g>
+                    <g class="ve-node">
+                      <circle class="ve-anchor-ring" cx="210" cy="405" r="12" />
+                      <circle class="ve-anchor-dot" cx="210" cy="405" r="6" />
+                    </g>
+                  </svg>
+                </div>
+              </main>
+
+              <aside class="ve-inspector">
+                <section class="ve-panel-section">
+                  <div class="ve-panel-title">Layers</div>
+                  <div class="ve-layer-row is-selected">
+                    <span class="ve-layer-icon"></span>
+                    <span class="ve-layer-name"></span>
+                    <span class="ve-layer-kind">Path</span>
+                  </div>
+                  <div class="ve-layer-row">
+                    <span class="ve-layer-icon"></span>
+                    <span>Frame</span>
+                    <span class="ve-layer-kind">Group</span>
+                  </div>
+                </section>
+                <section class="ve-panel-section">
+                  <div class="ve-panel-title">Properties</div>
+                  <div class="ve-property-row">
+                    <span>Fill</span>
+                    <span class="ve-property-value">8%</span>
+                  </div>
+                  <div class="ve-property-row">
+                    <span>Stroke</span>
+                    <span class="ve-color-swatch"></span>
+                  </div>
+                  <div class="ve-property-row">
+                    <span>Width</span>
+                    <span class="ve-property-value">4</span>
+                  </div>
+                  <div class="ve-property-row">
+                    <span>Nodes</span>
+                    <span class="ve-property-value">5</span>
+                  </div>
+                </section>
+              </aside>
+            </div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            // Literal, not read from the mounted DOM. The runtime strips
+            // data-composition-id from the flattened inner root, so reading
+            // that attribute after mount would register the timeline under
+            // "null" and leave the host waiting for this composition.
+            var compositionId = "vector-editor-rig";
+            var stage = root.querySelector(".ve-stage");
+            var path = root.querySelector(".ve-vector-path");
+            var nodes = root.querySelectorAll(".ve-node");
+            var selection = root.querySelector(".ve-selection");
+            var liveDot = root.querySelector(".ve-live-dot");
+            var documentName = root.querySelector(".ve-document-name");
+            var canvasLabel = root.querySelector(".ve-canvas-label span");
+            var layerName = root.querySelector(".ve-layer-name");
+
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            // INVARIANT: exactly one known tool owns the active toolbar state.
+            var allowedTools = ["pen", "shape", "type"];
+            var tool = allowedTools.indexOf(vars.tool) >= 0 ? vars.tool : "pen";
+            // INVARIANT: all label surfaces receive the same bounded string.
+            var rawLabel = vars.pathLabel == null ? "Logo" : String(vars.pathLabel);
+            var trimmedLabel = rawLabel.trim().slice(0, 28);
+            var pathLabel = trimmedLabel.length > 0 ? trimmedLabel : "Logo";
+
+            root.setAttribute("data-tool", tool);
+            documentName.textContent = pathLabel;
+            canvasLabel.textContent = pathLabel + " path";
+            layerName.textContent = pathLabel;
+
+            var IN_BASE = 1.2;
+            var OUT_BASE = 0.5;
+            var STAGE_IN_BASE = 0.28;
+            var PATH_START_BASE = 0.1;
+            var PATH_FINISH_AT_BASE = 1.05; // sync point: fixed inside IN
+            var NODE_DURATION_BASE = 0.16;
+            var SELECTION_START_BASE = 0.82;
+            var HOLD_PULSE_HALF = 0.65;
+
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4.5"));
+            var totalBase = IN_BASE + OUT_BASE;
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var STAGE_IN = STAGE_IN_BASE * scale;
+            var PATH_START = PATH_START_BASE * scale;
+            var PATH_FINISH_AT = PATH_FINISH_AT_BASE * scale;
+            var PATH_DRAW_DURATION = PATH_FINISH_AT - PATH_START;
+            var NODE_DURATION = NODE_DURATION_BASE * scale;
+            var SELECTION_START = SELECTION_START_BASE * scale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var HOLD_START = IN;
+            var OUT_START = IN + HOLD;
+            var nodeLandings = [0.25, 0.48, 0.7, 0.9, PATH_FINISH_AT_BASE];
+            var pathLength = path.getTotalLength();
+
+            function fireSfx(id, t) {
+              root.dispatchEvent(
+                new CustomEvent("hf:sfx", { detail: { id: id, t: t }, bubbles: true }),
+              );
+            }
+
+            // Explicit t=0 state for every animated endpoint, never gsap.from().
+            gsap.set(stage, { opacity: 0, y: "1.8cqh" });
+            gsap.set(path, {
+              fillOpacity: 0,
+              strokeDasharray: pathLength,
+              strokeDashoffset: pathLength,
+            });
+            gsap.set(nodes, { opacity: 0, scale: 0, transformOrigin: "center center" });
+            gsap.set(selection, { opacity: 0 });
+            gsap.set(liveDot, { opacity: 0.68, scale: 1 });
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: chrome settles, then the pen stroke and anchors reveal.
+            tl.to(stage, { opacity: 1, y: 0, duration: STAGE_IN, ease: "power2.out" }, 0);
+            tl.to(
+              path,
+              { strokeDashoffset: 0, duration: PATH_DRAW_DURATION, ease: "none" },
+              PATH_START,
+            );
+
+            for (var i = 0; i < nodes.length; i += 1) {
+              var nodeLanding = nodeLandings[i] * scale;
+              tl.to(
+                nodes[i],
+                { opacity: 1, scale: 1, duration: NODE_DURATION, ease: "power2.out" },
+                Math.max(0, nodeLanding - NODE_DURATION),
+              );
+            }
+
+            tl.to(
+              selection,
+              {
+                opacity: 1,
+                duration: Math.max(0.001, PATH_FINISH_AT - SELECTION_START),
+                ease: "power2.out",
+              },
+              SELECTION_START,
+            );
+            tl.to(
+              path,
+              {
+                fillOpacity: 1,
+                duration: Math.max(0.001, PATH_FINISH_AT - SELECTION_START),
+                ease: "power2.out",
+              },
+              SELECTION_START,
+            );
+            tl.call(
+              function () {
+                fireSfx("vector-close", PATH_FINISH_AT);
+              },
+              [],
+              PATH_FINISH_AT,
+            );
+
+            // HOLD: finite selected-state pulse, absent when no hold exists.
+            if (HOLD > HOLD_PULSE_HALF) {
+              var pulseRepeat = Math.max(0, Math.floor(HOLD / HOLD_PULSE_HALF) - 1);
+              tl.to(
+                liveDot,
+                {
+                  opacity: 1,
+                  scale: 1.22,
+                  duration: HOLD_PULSE_HALF,
+                  ease: "sine.inOut",
+                  yoyo: true,
+                  repeat: pulseRepeat,
+                },
+                HOLD_START,
+              );
+            }
+
+            // OUT: editor releases cleanly without altering the completed rig.
+            tl.to(stage, { opacity: 0, y: "-1.2cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/velocity-throw-snap/demo.html b/registry/components/velocity-throw-snap/demo.html
new file mode 100644
index 0000000000..7b3bba2c69
--- /dev/null
+++ b/registry/components/velocity-throw-snap/demo.html
@@ -0,0 +1,87 @@
+<!doctype html>
+<!--
+  velocity-throw-snap demo. This standalone 1920x1080 composition mounts the
+  primitive through data-composition-src. Non-default values select the last
+  card, violet styling, and a custom label prefix to prove variable flow.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Velocity Throw Snap Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #0b0c0e);
+      }
+
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(
+          ellipse at 50% 44%,
+          var(--bg, #1d2130) 0%,
+          var(--bg, #0b0c0e) 72%
+        );
+      }
+
+      .velocity-throw-snap-mount {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --muted: #a7b0c0;
+        --surface: #182033;
+        --border: #475569;
+        width: 88%;
+        height: 74%;
+        left: 6%;
+        top: 13%;
+        overflow: hidden;
+        border: 1px solid var(--border, #343c4d);
+        border-radius: 34px;
+        background: var(--bg, #0b0c0e);
+        box-shadow: 0 52px 120px color-mix(in srgb, var(--bg, #000000) 50%, transparent);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="velocity-throw-snap-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="velocity-throw-snap-mount"
+        class="velocity-throw-snap-mount clip"
+        data-composition-id="velocity-throw-snap"
+        data-composition-src="./velocity-throw-snap.html"
+        data-variable-values='{"hero_index":4,"accent":"violet","card_label_prefix":"Frame"}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="1690"
+        data-height="799"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["velocity-throw-snap-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/velocity-throw-snap/registry-item.json b/registry/components/velocity-throw-snap/registry-item.json
new file mode 100644
index 0000000000..3d93ce1552
--- /dev/null
+++ b/registry/components/velocity-throw-snap/registry-item.json
@@ -0,0 +1,54 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "velocity-throw-snap",
+  "type": "hyperframes:component",
+  "title": "Velocity Throw Snap",
+  "description": "A five-shot rail whips past on a fast decaying curve, then overshoots and snaps the selected hero shot exactly to center.",
+  "tags": ["motion-primitive", "feature-tour", "rail", "velocity", "throw", "snap", "physics"],
+  "jobs": ["exhibit"],
+  "family": "feature-tour",
+  "profile": "kinetic",
+  "evidence": "Video Primitives Wave H U29 velocity-throw-snap contract",
+  "syncPoints": [{ "id": "hero-settle", "phase": "in", "offset": 1.4 }],
+  "files": [
+    {
+      "path": "velocity-throw-snap.html",
+      "target": "compositions/components/velocity-throw-snap.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "hero_index",
+      "type": "number",
+      "role": "content",
+      "label": "Hero index",
+      "description": "Zero-based index of the shot centered at the settle.",
+      "default": 2,
+      "min": 0,
+      "max": 4,
+      "step": 1
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Highlight color used by the hero shot.",
+      "default": "green",
+      "options": [
+        { "value": "green", "label": "Green" },
+        { "value": "blue", "label": "Blue" },
+        { "value": "violet", "label": "Violet" }
+      ]
+    },
+    {
+      "id": "card_label_prefix",
+      "type": "string",
+      "role": "content",
+      "label": "Card label prefix",
+      "description": "Text placed before each shot number.",
+      "default": "Shot"
+    }
+  ]
+}
diff --git a/registry/components/velocity-throw-snap/velocity-throw-snap.html b/registry/components/velocity-throw-snap/velocity-throw-snap.html
new file mode 100644
index 0000000000..9abdf62b3d
--- /dev/null
+++ b/registry/components/velocity-throw-snap/velocity-throw-snap.html
@@ -0,0 +1,484 @@
+<!doctype html>
+<!--
+  velocity-throw-snap: HyperFrames video primitive (feature-tour / exhibit)
+
+  Concept: a five-shot rail whips in on an authored velocity curve, loses
+  speed quickly, then snaps past and back onto the selected hero shot. The
+  selected shot finishes exactly centered while its neighbors dim.
+
+  Variables:
+    - hero_index (number, 0 to 4, default 2): shot centered at the settle.
+    - accent (green | blue | violet, default green): hero highlight color.
+    - card_label_prefix (string, default "Shot"): label before each card number.
+
+  Envelope (fixed IN, elastic HOLD, no OUT):
+    IN_BASE  = 1.40s, fast power4.out throw followed by back.out(1.7) snap
+    HOLD     = elastic = max(0, D - IN), centered hero aura breathes subtly
+    OUT_BASE = 0s, the centered hero remains as the final state
+    If D is shorter than IN_BASE, the complete throw and snap compress to fit.
+
+  Mount contract: the runtime clones only this template. #root fills the
+  host box, establishes the cqw/cqh basis, has no data-width or data-height,
+  and registers one paused timeline under the hardcoded velocity-throw-snap id.
+  Rail position is CSS-owned: --vts-hero-index selects the centered card and
+  --vts-throw-x adds seek-driven travel in cqw units. No pixel measurements
+  are cached or read.
+-->
+<html
+  lang="en"
+  data-composition-id="velocity-throw-snap"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "hero_index", "type": "number", "role": "content", "label": "Hero index", "description": "Zero-based index of the shot centered at the settle.", "default": 2, "min": 0, "max": 4, "step": 1 },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Highlight color used by the hero shot.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "card_label_prefix", "type": "string", "role": "content", "label": "Card label prefix", "description": "Text placed before each shot number.", "default": "Shot" }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Velocity Throw Snap</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="velocity-throw-snap" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            --vts-card-width: 48;
+            --vts-card-gap: 4.5;
+            --vts-hero-index: 0;
+            --vts-throw-x: 0;
+            --vts-throw-y: 0;
+            --vts-tilt: 0;
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .vts-clip {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            background:
+              radial-gradient(
+                circle at 50% 46%,
+                color-mix(in srgb, var(--vts-accent) 13%, var(--bg, #172033)) 0%,
+                var(--bg, #0b0c0e) 72%
+              ),
+              var(--bg, #0b0c0e);
+          }
+
+          .vts-rail {
+            position: absolute;
+            left: 0;
+            top: 18cqh;
+            display: flex;
+            align-items: center;
+            gap: calc(var(--vts-card-gap) * 1cqw);
+            width: max-content;
+            transform: translateX(
+                calc(
+                  (
+                      50 - var(--vts-card-width) / 2 - var(--vts-hero-index) *
+                        (var(--vts-card-width) + var(--vts-card-gap)) + var(--vts-throw-x)
+                    ) *
+                    1cqw
+                )
+              )
+              translateY(calc(var(--vts-throw-y) * 1cqh)) rotate(calc(var(--vts-tilt) * 1deg));
+            transform-origin: 50% 50%;
+            will-change: transform;
+          }
+
+          .vts-card {
+            position: relative;
+            flex: 0 0 calc(var(--vts-card-width) * 1cqw);
+            height: 62cqh;
+            overflow: hidden;
+            border: 0.16cqmin solid color-mix(in srgb, var(--border, #475569) 76%, transparent);
+            border-radius: var(--radius, 3.2cqmin);
+            background: linear-gradient(
+              150deg,
+              var(--surface, #f8fafc) 0%,
+              var(--surface, #dbe5f1) 100%
+            );
+            color: var(--fg, #101827);
+            box-shadow: 0 3.6cqh 8cqh color-mix(in srgb, var(--bg, #000000) 46%, transparent);
+            transform-origin: 50% 50%;
+            will-change: transform, opacity, border-color, box-shadow;
+          }
+
+          .vts-aura {
+            position: absolute;
+            inset: -0.2cqmin;
+            z-index: 2;
+            border: 0.28cqmin solid var(--vts-accent);
+            border-radius: inherit;
+            box-shadow:
+              inset 0 0 3cqmin color-mix(in srgb, var(--vts-accent) 16%, transparent),
+              0 0 4cqmin color-mix(in srgb, var(--vts-accent) 36%, transparent);
+            opacity: 0;
+            pointer-events: none;
+          }
+
+          .vts-card-top {
+            height: 8cqh;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 0 2.6cqw;
+            border-bottom: 0.1cqmin solid var(--border, #c4ceda);
+            background: color-mix(in srgb, var(--surface, #ffffff) 58%, transparent);
+          }
+
+          .vts-dots {
+            display: flex;
+            gap: 0.45cqw;
+          }
+
+          .vts-dots i {
+            width: 0.58cqw;
+            aspect-ratio: 1;
+            border-radius: 50%;
+            background: var(--muted, #91a0b3);
+          }
+
+          .vts-index {
+            color: var(--vts-accent-dark);
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            font-size: 1.45cqw;
+            font-weight: 760;
+            letter-spacing: 0.12em;
+          }
+
+          .vts-preview {
+            height: 38cqh;
+            display: grid;
+            grid-template-columns: 1.05fr 0.95fr;
+            gap: 1.8cqw;
+            padding: 3cqh 2.6cqw;
+          }
+
+          .vts-panel,
+          .vts-stack {
+            border: 0.1cqmin solid var(--border, #c4ceda);
+            border-radius: 1.5cqmin;
+            background: var(--surface, #edf2f7);
+          }
+
+          .vts-panel {
+            position: relative;
+            overflow: hidden;
+            background: linear-gradient(
+              145deg,
+              color-mix(in srgb, var(--vts-accent) 30%, var(--surface, #eaf0f6)),
+              var(--surface, #d7e0ea)
+            );
+          }
+
+          .vts-panel::before,
+          .vts-panel::after {
+            content: "";
+            position: absolute;
+            border-radius: 1cqmin;
+            background: color-mix(in srgb, var(--vts-accent) 72%, var(--surface, #ffffff));
+          }
+
+          .vts-panel::before {
+            width: 11cqw;
+            height: 11cqw;
+            left: 3cqw;
+            top: 5cqh;
+          }
+
+          .vts-panel::after {
+            left: 3cqw;
+            right: 3cqw;
+            bottom: 4cqh;
+            height: 1.2cqh;
+          }
+
+          .vts-stack {
+            display: grid;
+            align-content: center;
+            gap: 2.2cqh;
+            padding: 2cqw;
+          }
+
+          .vts-stack i {
+            display: block;
+            height: 1.2cqh;
+            border-radius: 1cqh;
+            background: var(--muted, #bcc8d6);
+          }
+
+          .vts-stack i:first-child {
+            width: 72%;
+            background: var(--vts-accent);
+          }
+
+          .vts-stack i:last-child {
+            width: 56%;
+          }
+
+          .vts-label {
+            display: block;
+            max-width: 100%;
+            padding: 0 2.6cqw;
+            overflow: hidden;
+            color: var(--fg, #101827);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: 3.4cqw;
+            font-weight: 780;
+            line-height: 1;
+            letter-spacing: -0.04em;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          .vts-card:nth-child(2) .vts-preview,
+          .vts-card:nth-child(5) .vts-preview {
+            grid-template-columns: 0.78fr 1.22fr;
+          }
+
+          .vts-card:nth-child(3) .vts-panel::before {
+            width: 14cqw;
+            border-radius: 50%;
+          }
+
+          .vts-card:nth-child(4) .vts-preview {
+            grid-template-columns: 1fr;
+          }
+
+          .vts-card:nth-child(4) .vts-stack {
+            display: none;
+          }
+        </style>
+
+        <div
+          id="velocity-throw-snap-clip"
+          class="vts-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="vts-rail" role="list" aria-label="Feature shots">
+            <article class="vts-card" role="listitem">
+              <span class="vts-aura" aria-hidden="true"></span>
+              <div class="vts-card-top">
+                <span class="vts-dots"><i></i><i></i><i></i></span><span class="vts-index">01</span>
+              </div>
+              <div class="vts-preview">
+                <span class="vts-panel"></span><span class="vts-stack"><i></i><i></i><i></i></span>
+              </div>
+              <span class="vts-label"></span>
+            </article>
+            <article class="vts-card" role="listitem">
+              <span class="vts-aura" aria-hidden="true"></span>
+              <div class="vts-card-top">
+                <span class="vts-dots"><i></i><i></i><i></i></span><span class="vts-index">02</span>
+              </div>
+              <div class="vts-preview">
+                <span class="vts-panel"></span><span class="vts-stack"><i></i><i></i><i></i></span>
+              </div>
+              <span class="vts-label"></span>
+            </article>
+            <article class="vts-card" role="listitem">
+              <span class="vts-aura" aria-hidden="true"></span>
+              <div class="vts-card-top">
+                <span class="vts-dots"><i></i><i></i><i></i></span><span class="vts-index">03</span>
+              </div>
+              <div class="vts-preview">
+                <span class="vts-panel"></span><span class="vts-stack"><i></i><i></i><i></i></span>
+              </div>
+              <span class="vts-label"></span>
+            </article>
+            <article class="vts-card" role="listitem">
+              <span class="vts-aura" aria-hidden="true"></span>
+              <div class="vts-card-top">
+                <span class="vts-dots"><i></i><i></i><i></i></span><span class="vts-index">04</span>
+              </div>
+              <div class="vts-preview">
+                <span class="vts-panel"></span><span class="vts-stack"><i></i><i></i><i></i></span>
+              </div>
+              <span class="vts-label"></span>
+            </article>
+            <article class="vts-card" role="listitem">
+              <span class="vts-aura" aria-hidden="true"></span>
+              <div class="vts-card-top">
+                <span class="vts-dots"><i></i><i></i><i></i></span><span class="vts-index">05</span>
+              </div>
+              <div class="vts-preview">
+                <span class="vts-panel"></span><span class="vts-stack"><i></i><i></i><i></i></span>
+              </div>
+              <span class="vts-label"></span>
+            </article>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var clip = root.querySelector(".vts-clip");
+            var rail = root.querySelector(".vts-rail");
+            var cards = Array.from(root.querySelectorAll(".vts-card"));
+            var labels = Array.from(root.querySelectorAll(".vts-label"));
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var heroValue = Number(vars.hero_index);
+            var heroIndex = Number.isFinite(heroValue)
+              ? Math.max(0, Math.min(4, Math.round(heroValue)))
+              : 2;
+            var prefix = vars.card_label_prefix == null ? "Shot" : String(vars.card_label_prefix);
+            var accentName =
+              vars.accent === "blue" || vars.accent === "violet" ? vars.accent : "green";
+            var themeStyles = getComputedStyle(root);
+            var palettes = {
+              green: {
+                accent: themeStyles.getPropertyValue("--brand").trim() || "#34d399",
+                dark: themeStyles.getPropertyValue("--brand").trim() || "#08795b",
+                glow: "rgba(52, 211, 153, 0.4)",
+              },
+              blue: {
+                accent: themeStyles.getPropertyValue("--accent").trim() || "#60a5fa",
+                dark: themeStyles.getPropertyValue("--accent").trim() || "#2563a8",
+                glow: "rgba(96, 165, 250, 0.42)",
+              },
+              violet: {
+                accent: themeStyles.getPropertyValue("--accent-2").trim() || "#a78bfa",
+                dark: themeStyles.getPropertyValue("--accent-2").trim() || "#6742b8",
+                glow: "rgba(167, 139, 250, 0.42)",
+              },
+            };
+            var palette = palettes[accentName];
+
+            root.style.setProperty("--vts-hero-index", heroIndex);
+            root.style.setProperty("--vts-accent", palette.accent);
+            root.style.setProperty("--vts-accent-dark", palette.dark);
+
+            labels.forEach(function (label, index) {
+              label.textContent = (prefix.length > 0 ? prefix + " " : "") + String(index + 1);
+            });
+
+            var heroCard = cards[heroIndex];
+            var heroAura = heroCard.querySelector(".vts-aura");
+            var nonHeroCards = cards.filter(function (_, index) {
+              return index !== heroIndex;
+            });
+            heroCard.setAttribute("aria-current", "true");
+
+            var IN_BASE = 1.4;
+            var THROW_BASE = 0.78;
+            var SNAP_BASE = 0.62;
+            var durationValue = parseFloat(root.dataset.duration || "4");
+            var duration = Number.isFinite(durationValue) ? Math.max(0.001, durationValue) : 4;
+            var IN = Math.min(IN_BASE, duration);
+            var HOLD = Math.max(0, duration - IN);
+            var motionScale = IN / IN_BASE;
+            var THROW = THROW_BASE * motionScale;
+            var SNAP = SNAP_BASE * motionScale;
+            var SNAP_AT = THROW;
+
+            gsap.set(clip, { opacity: 0 });
+            gsap.set(rail, {
+              "--vts-throw-x": 140,
+              "--vts-throw-y": 7,
+              "--vts-tilt": 0.8,
+            });
+            gsap.set(cards, { opacity: 0.82, scale: 0.97 });
+            gsap.set(heroAura, { opacity: 0, scale: 0.98 });
+
+            var tl = gsap.timeline({ paused: true });
+
+            tl.to(clip, { opacity: 1, duration: Math.min(0.2, IN), ease: "power2.out" }, 0);
+
+            // Fast travel loses most of its velocity under the whip-out ease.
+            tl.to(
+              rail,
+              {
+                "--vts-throw-x": 16,
+                "--vts-throw-y": -1.4,
+                "--vts-tilt": -0.22,
+                duration: THROW,
+                ease: "power4.out",
+              },
+              0,
+            );
+
+            // The final back curve crosses zero, then returns to the exact center.
+            tl.to(
+              rail,
+              {
+                "--vts-throw-x": 0,
+                "--vts-throw-y": 0,
+                "--vts-tilt": 0,
+                duration: SNAP,
+                ease: "back.out(1.7)",
+              },
+              SNAP_AT,
+            );
+            tl.to(
+              nonHeroCards,
+              { opacity: 0.62, scale: 0.95, duration: SNAP, ease: "power2.out" },
+              SNAP_AT,
+            );
+            tl.to(
+              heroCard,
+              {
+                opacity: 1,
+                scale: 1.04,
+                borderColor: palette.accent,
+                boxShadow: "0 4.2cqh 10cqh " + palette.glow,
+                duration: SNAP,
+                ease: "back.out(1.7)",
+              },
+              SNAP_AT,
+            );
+            tl.to(
+              heroAura,
+              { opacity: 0.58, scale: 1, duration: SNAP * 0.7, ease: "power2.out" },
+              SNAP_AT + SNAP * 0.3,
+            );
+
+            if (HOLD > 0.4) {
+              var breathHalf = Math.min(0.65, HOLD / 2);
+              var breathRepeat = Math.max(0, Math.floor(HOLD / breathHalf) - 1);
+              tl.to(
+                heroAura,
+                {
+                  opacity: 0.78,
+                  scale: 1.015,
+                  duration: breathHalf,
+                  ease: "sine.inOut",
+                  yoyo: true,
+                  repeat: breathRepeat,
+                },
+                IN,
+              );
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["velocity-throw-snap"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/vox-annotate/README.md b/registry/components/vox-annotate/README.md
new file mode 100644
index 0000000000..d186ee2140
--- /dev/null
+++ b/registry/components/vox-annotate/README.md
@@ -0,0 +1,73 @@
+# vox-annotate
+
+The Vox-style annotate gesture: a short line of display text settles in, then
+on one cue a keyword gets a hand-drawn marker WHILE a thin connector draws
+from the marker up to a mono callout label that fades in at its end. Marker,
+connector, and label are one choreographed beat, not three events; the whole
+rig rides the keyword's settle pop as the ink lands.
+
+Absorbs `marker-highlight`: the four stroke styles (highlight, circle,
+underline, scribble) and the draw mechanic are inherited from that donor
+verbatim. Strokes reveal by a getTotalLength dash tween with both endpoints
+explicit (never the `pathLength` attribute, never `non-scaling-stroke` on a
+dashed path), so seeks in either direction never leave stale paint. Set
+`note` empty and vox-annotate degrades to exactly the donor's behavior:
+marker only.
+
+## Files
+
+- `vox-annotate.html`: the mountable sub-composition (install target:
+  `compositions/components/vox-annotate.html`).
+- `registry-item.json`: registry metadata and the variables block.
+- `demo.html`: standalone 1920x1080 host mounting the primitive with
+  non-default variables.
+
+## Variables
+
+| id        | type   | default                        | notes                                                                     |
+| --------- | ------ | ------------------------------ | ------------------------------------------------------------------------- |
+| `text`    | string | `Ship the story, not the spec` | the full line; may wrap, stays centered                                   |
+| `keyword` | string | `story`                        | first case-insensitive substring match gets the annotation; empty = none  |
+| `note`    | string | `the annotate beat`            | mono callout at the connector's end; empty draws the marker only          |
+| `style`   | enum   | `highlight`                    | `highlight`, `circle`, `underline`, or `scribble`                         |
+| `draw_at` | number | `0.9`                          | gesture cue in seconds from mount start; clamped ahead of any exit        |
+| `accent`  | enum   | `green`                        | `green` maps to `--brand`, `blue` to `--accent`, `violet` to `--accent-2` |
+| `exit`    | enum   | `none`                         | `none` holds the lockup; `fade` and `up` release the stage                |
+
+Envelope: IN = 0.55s rise, GESTURE = 0.96s anchored at `draw_at` (marker
+0.60s; connector 0.45s starting 0.36s in; label fade-up 0.30s starting 0.66s
+in), HOLD is the sole elastic phase, OUT = 0.45s only when `exit` is `fade`
+or `up`. The `annotate-draw` sync point fires at `draw_at`.
+
+## Layout notes
+
+The annotation anchors above and to the right of the keyword and needs
+headroom: the callout box spans about 19cqh above the line. With centered
+single-line text the default stage always has room; if you mount the
+primitive very short and wide, prefer `underline` or `highlight` (the
+`circle` box extends furthest) and keep `note` short. The callout stays on
+one line by design.
+
+## Worked example
+
+```bash
+npx hyperframes add vox-annotate
+```
+
+Mount it from a host composition like any sub-composition:
+
+```html
+<div
+  class="clip"
+  data-composition-id="vox-annotate"
+  data-composition-src="./components/vox-annotate.html"
+  data-variable-values='{"text":"Latency fell 40 percent","keyword":"40 percent","note":"p99, last quarter","style":"circle","draw_at":1.1}'
+  data-start="2"
+  data-duration="4"
+  data-track-index="0"
+></div>
+```
+
+The line rises in, and at 1.1s one gesture circles the number, draws the
+connector, and lands the mono note. The lockup then holds until the frame
+cuts (`exit` defaults to `none`; frame roots own scene transitions).
diff --git a/registry/components/vox-annotate/demo.html b/registry/components/vox-annotate/demo.html
new file mode 100644
index 0000000000..bd47147bf5
--- /dev/null
+++ b/registry/components/vox-annotate/demo.html
@@ -0,0 +1,87 @@
+<!doctype html>
+<!--
+  vox-annotate demo. This standalone composition mounts the primitive through
+  data-composition-src. Non-default text, keyword, note, style, accent, and
+  cue prove the variable path while the primitive remains elastic to its host.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Vox Annotate Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #0b0c0e);
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --muted: #94a3b8;
+        --surface: #14171c;
+        --border: #343a46;
+        --brand: #71f5a7;
+        --accent: #61a8ff;
+        --accent-2: #c5a3ff;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 44%, #12151b 0%, var(--bg, #0b0c0e) 74%);
+      }
+
+      .mount-card {
+        position: absolute;
+        width: 78%;
+        height: 62%;
+        left: 11%;
+        top: 19%;
+        container-type: size;
+        overflow: hidden;
+        border-radius: 28px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="vox-annotate-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+      data-fps="30"
+    >
+      <div
+        id="vox-annotate-mount"
+        class="mount-card clip"
+        data-composition-id="vox-annotate"
+        data-composition-src="./vox-annotate.html"
+        data-variable-values='{"text":"Numbers need context to land","keyword":"context","note":"this is the point","style":"circle","accent":"violet","draw_at":1.2}'
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        data-width="1497"
+        data-height="670"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["vox-annotate-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/vox-annotate/registry-item.json b/registry/components/vox-annotate/registry-item.json
new file mode 100644
index 0000000000..1be3699ca9
--- /dev/null
+++ b/registry/components/vox-annotate/registry-item.json
@@ -0,0 +1,97 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "vox-annotate",
+  "type": "hyperframes:component",
+  "title": "Vox Annotate",
+  "description": "The Vox-style annotate gesture: a keyword in a held sentence gets a hand-drawn marker while a thin connector draws up to a mono callout label, all as one choreographed beat on the cue.",
+  "tags": ["motion-primitive", "typography", "annotation", "marker", "deterministic"],
+  "jobs": ["emphasize"],
+  "family": "text-effects",
+  "profile": "emphasis",
+  "evidence": "Wave K K8: absorbs marker-highlight (four stroke styles, getTotalLength dash law) and adds the connector + callout as one gesture, per the X expert study demand slate",
+  "syncPoints": [{ "id": "annotate-draw", "phase": "in", "offset": 0.9 }],
+  "files": [
+    {
+      "path": "vox-annotate.html",
+      "target": "compositions/components/vox-annotate.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "text",
+      "type": "string",
+      "role": "content",
+      "label": "Text",
+      "description": "Full line of display text.",
+      "default": "Ship the story, not the spec"
+    },
+    {
+      "id": "keyword",
+      "type": "string",
+      "role": "content",
+      "label": "Keyword",
+      "description": "First case-insensitive substring match in text receives the marker and annotation. Empty or unmatched draws nothing.",
+      "default": "story"
+    },
+    {
+      "id": "note",
+      "type": "string",
+      "role": "content",
+      "label": "Note",
+      "description": "Mono callout label at the end of the connector. Empty draws the marker only.",
+      "default": "the annotate beat"
+    },
+    {
+      "id": "style",
+      "type": "enum",
+      "role": "style",
+      "label": "Marker style",
+      "description": "Shape of the hand-drawn marker stroke.",
+      "default": "highlight",
+      "options": [
+        { "value": "highlight", "label": "Highlight" },
+        { "value": "circle", "label": "Circle" },
+        { "value": "underline", "label": "Underline" },
+        { "value": "scribble", "label": "Scribble" }
+      ]
+    },
+    {
+      "id": "draw_at",
+      "type": "number",
+      "role": "timing",
+      "label": "Draw at",
+      "description": "Second (from mount start) the annotate gesture starts. Clamped so the gesture completes before any exit.",
+      "default": 0.9,
+      "min": 0,
+      "step": 0.1,
+      "unit": "s"
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Annotation ink color from the contract token map.",
+      "default": "green",
+      "options": [
+        { "value": "green", "label": "Green" },
+        { "value": "blue", "label": "Blue" },
+        { "value": "violet", "label": "Violet" }
+      ]
+    },
+    {
+      "id": "exit",
+      "type": "enum",
+      "role": "timing",
+      "label": "Exit",
+      "description": "Optional departure. Default none: the lockup holds until the frame cuts.",
+      "default": "none",
+      "options": [
+        { "value": "none", "label": "None" },
+        { "value": "fade", "label": "Fade" },
+        { "value": "up", "label": "Up" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/vox-annotate/vox-annotate.html b/registry/components/vox-annotate/vox-annotate.html
new file mode 100644
index 0000000000..d0d0ea6341
--- /dev/null
+++ b/registry/components/vox-annotate/vox-annotate.html
@@ -0,0 +1,477 @@
+<!doctype html>
+<!--
+  vox-annotate: HyperFrames video primitive (text effects / annotation)
+
+  The Vox-style annotate gesture: a keyword inside a held sentence gets a
+  hand-drawn marker WHILE a thin connector draws from the marker up to a
+  mono callout label that fades in at the connector's end. Marker, connector,
+  and label are ONE choreographed beat on the cue, not three events.
+
+  Absorbs marker-highlight: the four marker stroke styles and the
+  getTotalLength dash law are inherited from that donor verbatim (never the
+  pathLength attribute, never non-scaling-stroke on a dashed path; dash
+  geometry is set from the measured length and revealed by an explicit
+  fromTo on strokeDashoffset, so reverse seeks never leave stale paint).
+
+  Variables:
+    text (string): the full line.
+    keyword (string): first case-insensitive substring match inside text
+      gets the marker and the annotation. Empty or unmatched renders the
+      line with no annotation. Keep it a word or short phrase; it stays on
+      one line.
+    note (string): the mono callout label at the end of the connector.
+      Empty draws the marker only (no connector, no label).
+    style (highlight | circle | underline | scribble): marker shape.
+    draw_at (seconds): cue for the gesture, relative to mount start.
+      Clamped so the whole gesture completes before any exit begins.
+    accent (green | blue | violet): annotation ink via the contract token map.
+    exit (none | fade | up, default none): frame roots own transitions;
+      holds end films.
+
+  Envelope, fixed IN and OUT with elastic HOLD only (never time-scaled):
+    IN_BASE      = 0.55s  text rises into place
+    GESTURE_BASE = 0.96s  anchored at draw_at: marker 0.60s, connector
+                          0.45s from 0.36s, label fade-up 0.30s from 0.66s,
+                          settle pop on the keyword as the ink lands
+    HOLD         = max(0, D - phases), completely still
+    OUT_BASE     = 0s for exit none, otherwise 0.45s
+    If D is shorter than the fixed phases, they compress together.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, has no data-width or
+  data-height, and registers one paused timeline under the literal
+  vox-annotate key.
+-->
+<html
+  lang="en"
+  data-composition-id="vox-annotate"
+  data-composition-duration="4"
+  data-composition-variables='[
+    { "id": "text", "type": "string", "role": "content", "label": "Text", "description": "Full line of display text.", "default": "Ship the story, not the spec" },
+    { "id": "keyword", "type": "string", "role": "content", "label": "Keyword", "description": "First case-insensitive substring match in text receives the marker and annotation. Empty or unmatched draws nothing.", "default": "story" },
+    { "id": "note", "type": "string", "role": "content", "label": "Note", "description": "Mono callout label at the end of the connector. Empty draws the marker only.", "default": "the annotate beat" },
+    { "id": "style", "type": "enum", "role": "style", "label": "Marker style", "description": "Shape of the hand-drawn marker stroke.", "default": "highlight", "options": [{ "value": "highlight", "label": "Highlight" }, { "value": "circle", "label": "Circle" }, { "value": "underline", "label": "Underline" }, { "value": "scribble", "label": "Scribble" }] },
+    { "id": "draw_at", "type": "number", "role": "timing", "label": "Draw at", "description": "Second (from mount start) the annotate gesture starts. Clamped so the gesture completes before any exit.", "default": 0.9, "min": 0, "step": 0.1, "unit": "s" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Annotation ink color from the contract token map.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure. Default none: the lockup holds until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Vox Annotate</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="vox-annotate" data-duration="4" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            background: var(--bg, #0b0c0e);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .va-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+          }
+
+          .va-stage {
+            max-width: 84cqw;
+            text-align: center;
+            will-change: transform, opacity;
+          }
+
+          .va-text {
+            margin: 0;
+            font-size: var(--va-font-size, min(8cqw, 15cqh));
+            font-weight: 600;
+            line-height: 1.16;
+            letter-spacing: -0.03em;
+          }
+
+          .va-em {
+            position: relative;
+            display: inline-block;
+            white-space: nowrap;
+            will-change: transform;
+          }
+
+          .va-em-text {
+            position: relative;
+            z-index: 1;
+          }
+
+          .va-mark {
+            position: absolute;
+            z-index: 0;
+            overflow: visible;
+          }
+
+          /* Per-style marker box around the keyword. Explicit width/height
+             (svg is a replaced element: inset-stretching would fall back to
+             its intrinsic viewBox ratio); then preserveAspectRatio="none"
+             stretches the authored path (and its stroke) into the box, which
+             is exactly the marker-nib distortion we want on a dashed path. */
+          .va-em[data-marker-style="highlight"] .va-mark {
+            left: -3%;
+            top: 14%;
+            width: 106%;
+            height: 76%;
+          }
+
+          .va-em[data-marker-style="underline"] .va-mark {
+            left: -2%;
+            bottom: -14%;
+            width: 105%;
+            height: 22%;
+            z-index: 2;
+          }
+
+          .va-em[data-marker-style="circle"] .va-mark {
+            left: -13%;
+            top: -26%;
+            width: 126%;
+            height: 152%;
+            z-index: 2;
+          }
+
+          .va-em[data-marker-style="scribble"] .va-mark {
+            left: -2%;
+            top: 12%;
+            width: 104%;
+            height: 76%;
+            z-index: 2;
+          }
+
+          /* Annotation rig: connector + callout live in one box anchored
+             above the keyword, so the whole gesture shares the pop. */
+          .va-anno {
+            position: absolute;
+            left: 55%;
+            bottom: calc(100% + 1.6cqh);
+            width: 26cqw;
+            height: 19cqh;
+            z-index: 3;
+          }
+
+          .va-conn {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+            overflow: visible;
+          }
+
+          .va-note {
+            position: absolute;
+            top: -1.2cqh;
+            right: -2cqw;
+            max-width: 30cqw;
+            font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
+            font-size: min(2.4cqw, 4.4cqh);
+            font-weight: 500;
+            letter-spacing: 0.05em;
+            line-height: 1.25;
+            text-align: left;
+            white-space: nowrap;
+            will-change: transform, opacity;
+          }
+        </style>
+
+        <div
+          id="vox-annotate-clip"
+          class="va-clip clip"
+          data-start="0"
+          data-duration="4"
+          data-track-index="0"
+        >
+          <div class="va-stage">
+            <p class="va-text"></p>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            // Literal key: the flattening step strips data-composition-id off
+            // the mounted root, so reading it back would register "null".
+            var compositionId = "vox-annotate";
+            var stage = root.querySelector(".va-stage");
+            var textEl = root.querySelector(".va-text");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var text =
+              vars.text == null
+                ? "Ship the story, not the spec"
+                : String(vars.text).trim().replace(/\s+/g, " ");
+            var keyword =
+              vars.keyword == null ? "story" : String(vars.keyword).trim().replace(/\s+/g, " ");
+            var note =
+              vars.note == null
+                ? "the annotate beat"
+                : String(vars.note).trim().replace(/\s+/g, " ");
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            // Hand-drawn stroke library, inherited from marker-highlight.
+            // Paths are authored in a fixed viewBox and stretched into the
+            // word box; wobble is baked into control points, never randomized.
+            var markerStyles = {
+              highlight: {
+                viewBox: "0 0 100 40",
+                d: "M 3 24 C 22 20.5, 47 25.5, 68 22.5 C 79 21, 90 23, 97 21.5",
+                strokeWidth: 26,
+                opacity: 0.5,
+              },
+              circle: {
+                viewBox: "0 0 100 40",
+                d: "M 22 7 C 58 1, 95 8, 97 20 C 99 31, 74 38, 44 37 C 16 36, 2 29, 3 19 C 4 10, 22 4, 52 4.5",
+                strokeWidth: 2.8,
+                opacity: 1,
+              },
+              underline: {
+                viewBox: "0 0 100 12",
+                d: "M 2 7 C 20 4.5, 46 8.5, 66 6 C 80 4.5, 92 7.5, 98 5.5",
+                strokeWidth: 4.5,
+                opacity: 1,
+              },
+              scribble: {
+                viewBox: "0 0 100 40",
+                d: "M 6 13 C 34 9.5, 66 11, 94 9 C 60 15, 26 16, 7 20 C 36 18, 68 21, 93 18 C 62 25, 28 27, 8 29",
+                strokeWidth: 5,
+                opacity: 0.65,
+              },
+            };
+            var styleName = Object.prototype.hasOwnProperty.call(markerStyles, vars.style)
+              ? vars.style
+              : "highlight";
+            var marker = markerStyles[styleName];
+            var svgNS = "http://www.w3.org/2000/svg";
+
+            // Split text around the first case-insensitive keyword match.
+            // textContent nodes only, never innerHTML.
+            var matchIndex =
+              keyword.length > 0 ? text.toLowerCase().indexOf(keyword.toLowerCase()) : -1;
+            var emEl = null;
+            var markPath = null;
+            var connPath = null;
+            var noteEl = null;
+            if (matchIndex >= 0) {
+              var before = text.slice(0, matchIndex);
+              var matched = text.slice(matchIndex, matchIndex + keyword.length);
+              var after = text.slice(matchIndex + keyword.length);
+              if (before) textEl.appendChild(document.createTextNode(before));
+
+              emEl = document.createElement("span");
+              emEl.className = "va-em";
+              emEl.setAttribute("data-marker-style", styleName);
+
+              var markSvg = document.createElementNS(svgNS, "svg");
+              markSvg.setAttribute("class", "va-mark");
+              markSvg.setAttribute("viewBox", marker.viewBox);
+              markSvg.setAttribute("preserveAspectRatio", "none");
+              markSvg.setAttribute("aria-hidden", "true");
+              markPath = document.createElementNS(svgNS, "path");
+              markPath.setAttribute("d", marker.d);
+              markPath.setAttribute("fill", "none");
+              markPath.setAttribute("stroke-width", String(marker.strokeWidth));
+              markPath.setAttribute("stroke-linecap", "round");
+              markPath.setAttribute("stroke-linejoin", "round");
+              // style.stroke, not the presentation attribute: var() only
+              // resolves as a CSS value.
+              markPath.style.stroke = accentColors[accent];
+              markSvg.appendChild(markPath);
+
+              var emText = document.createElement("span");
+              emText.className = "va-em-text";
+              emText.textContent = matched;
+
+              emEl.appendChild(markSvg);
+              emEl.appendChild(emText);
+
+              // Annotation rig: connector path curving up from the marker to
+              // the callout. The viewBox aspect roughly matches the anno box
+              // at 16:9 so the hand-drawn stroke stays near-even.
+              if (note.length > 0) {
+                var anno = document.createElement("span");
+                anno.className = "va-anno";
+                anno.setAttribute("aria-hidden", "true");
+
+                var connSvg = document.createElementNS(svgNS, "svg");
+                connSvg.setAttribute("class", "va-conn");
+                connSvg.setAttribute("viewBox", "0 0 240 100");
+                connSvg.setAttribute("preserveAspectRatio", "none");
+                connPath = document.createElementNS(svgNS, "path");
+                connPath.setAttribute(
+                  "d",
+                  "M 10 94 C 52 82, 96 52, 148 32 C 176 21, 200 16, 218 14",
+                );
+                connPath.setAttribute("fill", "none");
+                connPath.setAttribute("stroke-width", "2.6");
+                connPath.setAttribute("stroke-linecap", "round");
+                connPath.style.stroke = accentColors[accent];
+                connSvg.appendChild(connPath);
+
+                noteEl = document.createElement("span");
+                noteEl.className = "va-note";
+                noteEl.textContent = note;
+                noteEl.style.color = accentColors[accent];
+
+                anno.appendChild(connSvg);
+                anno.appendChild(noteEl);
+                emEl.appendChild(anno);
+              }
+
+              textEl.appendChild(emEl);
+              if (after) textEl.appendChild(document.createTextNode(after));
+            } else {
+              textEl.textContent = text;
+            }
+            textEl.setAttribute("aria-label", text);
+
+            // Deterministic character-count fit; the line may wrap, the
+            // keyword never wraps internally.
+            var characters = Math.max(1, Array.from(text).length);
+            var fitted = Math.max(4.2, Math.min(9, 175 / characters));
+            root.style.setProperty("--va-font-size", "min(" + fitted.toFixed(3) + "cqw, 15cqh)");
+
+            // RETIME RANGE: fixed phases; HOLD is the only elastic span.
+            var IN_BASE = 0.55;
+            var DRAW_BASE = 0.6;
+            var CONN_BASE = 0.45;
+            var NOTE_BASE = 0.3;
+            var POP_BASE = 0.32;
+            var GESTURE_BASE = 0.96; // marker + connector + label span
+            var OUT_BASE = exit === "none" ? 0 : 0.45;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "4"));
+            var totalBase = IN_BASE + GESTURE_BASE + OUT_BASE;
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var DRAW = DRAW_BASE * scale;
+            var CONN = CONN_BASE * scale;
+            var NOTE = NOTE_BASE * scale;
+            var POP = POP_BASE * scale;
+            var GESTURE = GESTURE_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var OUT_START = duration - OUT;
+
+            var drawAtRaw = Number(vars.draw_at);
+            var drawAt = Number.isFinite(drawAtRaw) ? Math.max(0, drawAtRaw) : 0.9;
+            // The whole gesture always lands before the exit.
+            drawAt = Math.min(drawAt, Math.max(0, OUT_START - GESTURE));
+
+            gsap.set(stage, { opacity: 0, y: "6cqh" });
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: the line rises into place.
+            tl.fromTo(
+              stage,
+              { opacity: 0, y: "6cqh" },
+              { opacity: 1, y: "0cqh", duration: IN, ease: "power3.out" },
+              0,
+            );
+
+            // GESTURE: marker, connector, and label as one beat on the cue.
+            // Dash reveals from measured lengths; both endpoints explicit so
+            // any seek in either direction is correct without playing through.
+            if (markPath) {
+              var markLength = markPath.getTotalLength();
+              markPath.style.strokeDasharray = String(markLength);
+              // Hidden until the cue: at dashoffset == length the round cap
+              // still paints a dot at the path start, so the ink is opacity 0
+              // until the exact frame the draw begins.
+              gsap.set(markPath, { strokeDashoffset: markLength, opacity: 0 });
+              tl.set(markPath, { opacity: marker.opacity }, drawAt);
+              tl.fromTo(
+                markPath,
+                { strokeDashoffset: markLength },
+                { strokeDashoffset: 0, duration: DRAW, ease: "power2.inOut" },
+                drawAt,
+              );
+              // Settle pop on the keyword as the ink lands. The annotation
+              // rig rides the same span, so the whole gesture breathes once.
+              tl.fromTo(
+                emEl,
+                { scale: 1 },
+                {
+                  scale: 1.045,
+                  duration: POP / 2,
+                  ease: "power1.out",
+                  yoyo: true,
+                  repeat: 1,
+                },
+                drawAt + DRAW * 0.7,
+              );
+            }
+
+            if (connPath) {
+              var connAt = drawAt + DRAW * 0.6;
+              var connLength = connPath.getTotalLength();
+              connPath.style.strokeDasharray = String(connLength);
+              gsap.set(connPath, { strokeDashoffset: connLength, opacity: 0 });
+              tl.set(connPath, { opacity: 0.9 }, connAt);
+              tl.fromTo(
+                connPath,
+                { strokeDashoffset: connLength },
+                { strokeDashoffset: 0, duration: CONN, ease: "power2.out" },
+                connAt,
+              );
+            }
+
+            if (noteEl) {
+              var noteAt = drawAt + DRAW * 0.6 + CONN * 0.65;
+              tl.fromTo(
+                noteEl,
+                { opacity: 0, y: "1.6cqh" },
+                { opacity: 1, y: "0cqh", duration: NOTE, ease: "power2.out" },
+                noteAt,
+              );
+            }
+
+            // HOLD: completely still.
+
+            // OUT: optional departure; exit none holds until the frame cuts.
+            if (exit === "fade") {
+              tl.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+            } else if (exit === "up") {
+              tl.to(stage, { opacity: 0, y: "-7cqh", duration: OUT, ease: "power2.in" }, OUT_START);
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/whip-pan-cut/README.md b/registry/components/whip-pan-cut/README.md
new file mode 100644
index 0000000000..3d01245df5
--- /dev/null
+++ b/registry/components/whip-pan-cut/README.md
@@ -0,0 +1,101 @@
+# whip-pan-cut
+
+The louder sibling of cut-the-curve: scene A whips off laterally with
+directional motion blur while scene B enters in the same direction at matched
+velocity, on a speed-ramp profile (accelerate, fast middle, decelerating
+catch). Both scenes ride one strip, with B docked one frame-width beyond A
+along the travel direction, so the pan crosses a single continuous surface and
+the seam velocity is exact by construction. The blur is a capped directional
+SVG feGaussianBlur on the mover only, peaking at mid-whip and resolving to 0
+at both ends; a hairline accent seam rides the scene boundary and is visible
+only while the whip runs.
+
+## Files
+
+- `whip-pan-cut.html`: the mountable sub-composition (install target:
+  `compositions/components/whip-pan-cut.html`).
+- `registry-item.json`: registry metadata and the variables block.
+- `demo.html`: a 1920x1080 host that mounts the primitive with non-default
+  variables (QA gallery input).
+
+## Variables
+
+| id          | type   | default | notes                                                                     |
+| ----------- | ------ | ------- | ------------------------------------------------------------------------- |
+| `direction` | enum   | `left`  | shared travel direction for both scenes (`left` or `right`)               |
+| `whip_at`   | number | `0.25`  | seconds after mount start when the whip begins (0 to 8)                   |
+| `accent`    | enum   | `green` | `green` maps to `--brand`, `blue` to `--accent`, `violet` to `--accent-2` |
+| `exit`      | enum   | `none`  | `none` rests on scene B until the frame cuts; `fade` and `up` depart it   |
+
+Envelope (transition profile, no elastic HOLD law; cut-the-curve precedent):
+LEAD = `whip_at` rest on scene A, WHIP = 0.55s power3.inOut, REST = elastic
+remainder still on scene B, EXIT tail = min(0.35s, 25% of D) only when `exit`
+is enabled. A short clip window may end while the catch is still decelerating.
+The `whip-cut` sync point (`hf:sfx` id `whip-cut`) fires at peak velocity,
+0.53s at defaults. Retime range 0.6s to 3s.
+
+## The slot mechanism
+
+The primitive ships two named slot panels inside its `<template>` (the
+before-after-wipe convention):
+
+```html
+<div class="wpc-slot" data-slot="before">...</div>
+<div class="wpc-slot" data-slot="after">...</div>
+```
+
+Each slot's default children are a token-styled wireframe card (muted on the
+before layer, brand-tinted on the after layer), so an untouched mount still
+reads as a real scene change. To show your own content, install the component
+and **replace the children of each `[data-slot]` element in your installed
+copy** (the runtime clones only the primitive's own template on mount, so slot
+content lives in the component file, not on the host clip).
+
+Rules:
+
+- Both slots are full-bleed. Scene B is automatically positioned one
+  frame-width beyond scene A along the travel direction; author both as
+  normal full-frame scenes.
+- Direct `img`/`video` children are automatically sized to cover the panel
+  (`object-fit: cover`). Arbitrary HTML works too; size it in `cqw`/`cqh`.
+- Keep the seam hairline and the blur filter alone; both are owned by the
+  timeline, and the filter must stay on the strip (the mover) only.
+
+## Worked example
+
+Install, then fill the slots with two screenshots:
+
+```bash
+npx hyperframes add whip-pan-cut
+```
+
+In `compositions/components/whip-pan-cut.html`, replace each slot's default
+block:
+
+```html
+<div class="wpc-slot" data-slot="before">
+  <img src="../../assets/scene-dashboard.png" alt="" />
+</div>
+...
+<div class="wpc-slot" data-slot="after">
+  <img src="../../assets/scene-editor.png" alt="" />
+</div>
+```
+
+Mount it from a host composition like any sub-composition:
+
+```html
+<div
+  class="clip"
+  data-composition-id="whip-pan-cut"
+  data-composition-src="./components/whip-pan-cut.html"
+  data-variable-values='{"direction":"right","whip_at":0.3,"accent":"blue"}'
+  data-start="4"
+  data-duration="1.2"
+  data-track-index="0"
+></div>
+```
+
+Scene A rests for 0.3s, the whip screams right over 0.55s with the blur
+peaking at the midpoint, and scene B rests for the remainder of the clip
+window (`exit` defaults to `none`; frame roots own scene transitions).
diff --git a/registry/components/whip-pan-cut/demo.html b/registry/components/whip-pan-cut/demo.html
new file mode 100644
index 0000000000..d8302dbf8b
--- /dev/null
+++ b/registry/components/whip-pan-cut/demo.html
@@ -0,0 +1,90 @@
+<!doctype html>
+<!--
+  whip-pan-cut demo. Full-bleed mount on a dark token stage: the whip runs
+  rightward across the whole 1920x1080 frame with the violet seam accent,
+  proving the pan reads as one continuous surface with the blur peaking at
+  mid-whip and resolving sharp at the catch.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>whip-pan-cut Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #05070d);
+      }
+
+      #root {
+        --bg: #080b14;
+        --fg: #f8fafc;
+        --muted: #94a3b8;
+        --surface: #182033;
+        --border: #3b4863;
+        --brand: #22c55e;
+        --accent: #38bdf8;
+        --accent-2: #c5a3ff;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-body: Inter, system-ui, sans-serif;
+        --radius: 22px;
+        --space-1: 8px;
+        --space-2: 16px;
+        --space-3: 32px;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(ellipse at 50% 42%, #10182b 0%, var(--bg, #080b14) 72%);
+      }
+
+      .mount-stage {
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        container-type: size;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="whip-pan-cut-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="1.2"
+      data-fps="30"
+    >
+      <div
+        id="whip-pan-cut-mount"
+        class="mount-stage clip"
+        data-composition-id="whip-pan-cut"
+        data-composition-src="./whip-pan-cut.html"
+        data-variable-values='{"direction":"right","whip_at":0.35,"accent":"violet"}'
+        data-start="0"
+        data-duration="1.2"
+        data-track-index="0"
+        data-width="1920"
+        data-height="1080"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["whip-pan-cut-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/whip-pan-cut/registry-item.json b/registry/components/whip-pan-cut/registry-item.json
new file mode 100644
index 0000000000..321017e54e
--- /dev/null
+++ b/registry/components/whip-pan-cut/registry-item.json
@@ -0,0 +1,80 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "whip-pan-cut",
+  "type": "hyperframes:component",
+  "title": "Whip Pan Cut",
+  "description": "A full-frame whip pan: scene A whips off laterally with capped directional motion blur while scene B enters in the same direction at matched velocity, on a speed-ramp profile with a decelerating catch. Both scenes ride one strip, so seam velocity is exact by construction. Callers fill the named before/after slot panels; token-styled defaults render when a slot is left empty.",
+  "tags": [
+    "transition",
+    "whip-pan",
+    "motion-blur",
+    "velocity-match",
+    "speed-ramp",
+    "bridge",
+    "slots"
+  ],
+  "jobs": ["bridge"],
+  "family": "transitions",
+  "profile": "transition",
+  "evidence": "Wave K6: the X expert demand study names the whip pan as the loud lateral scene bridge; cut-the-curve donates the transition profile, motion-blur-streak donates the capped directional blur",
+  "syncPoints": [{ "id": "whip-cut", "phase": "in", "offset": 0.53 }],
+  "files": [
+    {
+      "path": "whip-pan-cut.html",
+      "target": "compositions/components/whip-pan-cut.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "direction",
+      "type": "enum",
+      "role": "motion",
+      "label": "Direction",
+      "description": "Shared travel direction for the outgoing and incoming scenes.",
+      "default": "left",
+      "options": [
+        { "value": "left", "label": "Left" },
+        { "value": "right", "label": "Right" }
+      ]
+    },
+    {
+      "id": "whip_at",
+      "type": "number",
+      "role": "timing",
+      "label": "Whip start",
+      "description": "Seconds after mount start when the whip begins.",
+      "default": 0.25,
+      "min": 0,
+      "max": 8,
+      "step": 0.05,
+      "unit": "s"
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Seam hairline and default after art tint.",
+      "default": "green",
+      "options": [
+        { "value": "green", "label": "Green" },
+        { "value": "blue", "label": "Blue" },
+        { "value": "violet", "label": "Violet" }
+      ]
+    },
+    {
+      "id": "exit",
+      "type": "enum",
+      "role": "timing",
+      "label": "Exit",
+      "description": "Optional departure of the landed scene. Default none: it rests until the frame cuts.",
+      "default": "none",
+      "options": [
+        { "value": "none", "label": "None" },
+        { "value": "fade", "label": "Fade" },
+        { "value": "up", "label": "Up" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/whip-pan-cut/whip-pan-cut.html b/registry/components/whip-pan-cut/whip-pan-cut.html
new file mode 100644
index 0000000000..e0d0b4ff5c
--- /dev/null
+++ b/registry/components/whip-pan-cut/whip-pan-cut.html
@@ -0,0 +1,487 @@
+<!doctype html>
+<!--
+  whip-pan-cut: HyperFrames video primitive (transitions / bridge)
+
+  Concept: the louder sibling of cut-the-curve. Scene A whips off laterally
+  with directional motion blur while scene B enters in the same direction at
+  matched velocity, on a speed-ramp profile (accelerate, fast middle,
+  decelerating catch). Two full-bleed content slots (the before-after-wipe
+  convention) with token-styled defaults.
+
+  Wave K, unit K6. Velocity matching is structural: both scenes ride ONE
+  strip (B docked one frame-width beyond A along the travel direction) and
+  the strip runs a single power3.inOut tween, so the seam velocity is exact
+  by construction and the profile is fast-middle with a decelerating catch.
+
+  Motion blur follows the motion-blur-streak recipe: a directional SVG
+  feGaussianBlur (stdDeviation "X 0", horizontal axis only) applied to the
+  mover (the strip carries both transform and filter; nothing else is
+  filtered, and there is no 3D on the strip for the filter to flatten). The
+  blur envelope is CAPPED at 16px and peaks exactly at mid-whip (peak
+  velocity), resolving to 0 at both ends: power3.in up over the first half,
+  power3.out down over the second, mirroring the strip's inOut velocity. The
+  proxy value is re-written on every seek via onUpdate and seeded at setup so
+  frame 0 renders sharp.
+
+  A hairline accent seam rides the boundary between the two scenes; it is
+  visible only while the whip runs, so it reads as the frame edge screaming
+  past rather than persistent chrome.
+
+  Slots (see README.md for a worked example):
+    - [data-slot="before"]: scene A, on stage at mount. Replace the children
+      of this element in your installed copy. Default: a muted token
+      wireframe.
+    - [data-slot="after"]:  scene B, whipping in. Same mechanism. Default: a
+      brand-tinted version of the wireframe.
+    Direct img/video children of a slot are sized to cover the panel.
+
+  Variables (declared in data-composition-variables below):
+    - direction (left | right, default left): shared travel direction for
+      both scenes.
+    - whip_at (number, seconds, default 0.25): when the whip starts, relative
+      to mount start. Clamped so the whip always completes inside the clip.
+    - accent (green | blue | violet, default green): seam hairline and the
+      default after art tint. green maps to --brand, blue to --accent,
+      violet to --accent-2.
+    - exit (none | fade | up, default none): optional departure of the landed
+      scene B. Enabling it reserves a short tail window (min(0.35s, 25% of
+      D)) after B lands.
+
+  Envelope (transition profile, cut-the-curve precedent; the catch may still
+  be decelerating when a short clip window ends):
+    LEAD  = whip_at (scene A rests, readable)
+    WHIP  = 0.55s, power3.inOut, one frame-width of travel
+    REST  = elastic remainder, dead still on B
+    EXIT  = 0 when exit is none, else min(0.35s, 25% of D)
+    If D < LEAD + WHIP + EXIT, LEAD and WHIP scale down together.
+
+  Sync point: whip-cut at LEAD + WHIP/2 (peak velocity, 0.53s at defaults).
+
+  Sound cue: dispatches a bubbling `hf:sfx` CustomEvent with id "whip-cut"
+  at peak velocity. This primitive never plays audio.
+
+  Interruptible springs law (L1): the whip is a single owned tween on one
+  strip; a host redirect retargets the same transform channel and GSAP's
+  default overwrite preserves current velocity-position state at the
+  interruption frame (no snap-to-zero).
+
+  Mount contract: MOUNTABLE SUB-COMPOSITION. The runtime clones only
+  <template> contents; #root fills the host box (inset:0, container-type:
+  size), has no data-width/data-height, and registers one paused timeline
+  under the literal "whip-pan-cut" key (mount flattening strips
+  data-composition-id from the live root). Variables come from
+  window.__hyperframes.getVariables().
+-->
+<html
+  lang="en"
+  data-composition-id="whip-pan-cut"
+  data-composition-duration="1.2"
+  data-composition-variables='[
+    { "id": "direction", "type": "enum", "role": "motion", "label": "Direction", "description": "Shared travel direction for the outgoing and incoming scenes.", "default": "left", "options": [{ "value": "left", "label": "Left" }, { "value": "right", "label": "Right" }] },
+    { "id": "whip_at", "type": "number", "role": "timing", "label": "Whip start", "description": "Seconds after mount start when the whip begins.", "default": 0.25, "min": 0, "max": 8, "step": 0.05, "unit": "s" },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Seam hairline and default after art tint.", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "timing", "label": "Exit", "description": "Optional departure of the landed scene. Default none: it rests until the frame cuts.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Whip Pan Cut</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="whip-pan-cut" data-duration="1.2" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          /* Root fills the host-owned box. Internal measurements use cqw/cqh
+             and every painted color comes from a contract token. */
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            background: var(--bg, #07111f);
+            color: var(--fg, #f8fafc);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+          }
+
+          .wpc-clip,
+          .wpc-strip,
+          .wpc-panel,
+          .wpc-slot {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+          }
+
+          .wpc-clip {
+            overflow: hidden;
+          }
+
+          /* The strip is the ONE mover: it carries both scenes, the transform
+             tween, and the directional blur filter. No 3D lives on it, so the
+             filter has nothing to flatten. */
+          .wpc-strip {
+            filter: url("#wpc-blur");
+            will-change: transform, filter;
+          }
+
+          .wpc-panel {
+            overflow: hidden;
+          }
+
+          /* Scene B docks one frame-width beyond scene A along the travel
+             direction, so the pan crosses one continuous surface. */
+          #root[data-direction="left"] .wpc-after {
+            left: 100%;
+          }
+
+          #root[data-direction="right"] .wpc-after {
+            left: -100%;
+          }
+
+          /* The seam hairline rides the boundary between the two scenes and
+             is timeline-owned: visible only while the whip runs. */
+          .wpc-seam {
+            position: absolute;
+            z-index: 3;
+            top: 0;
+            bottom: 0;
+            width: 0.35cqw;
+            transform: translateX(-50%);
+            background: var(--wpc-accent, #22c55e);
+            pointer-events: none;
+          }
+
+          #root[data-direction="left"] .wpc-seam {
+            left: 100%;
+          }
+
+          #root[data-direction="right"] .wpc-seam {
+            left: 0;
+          }
+
+          /* Caller-supplied media covers its panel edge to edge. */
+          .wpc-slot > img,
+          .wpc-slot > video {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+          }
+
+          /* Token-styled default slot content: a wireframe card that reads
+             muted on the before layer and brand-tinted on the after layer.
+             Callers replacing slot children never see any of this. */
+          .wpc-default {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+          }
+
+          .wpc-before .wpc-default {
+            background:
+              linear-gradient(
+                  color-mix(in srgb, var(--border, #334155) 34%, transparent) 0.12cqw,
+                  transparent 0.12cqw
+                )
+                0 0 / 5cqw 5cqw,
+              linear-gradient(
+                  90deg,
+                  color-mix(in srgb, var(--border, #334155) 34%, transparent) 0.12cqw,
+                  transparent 0.12cqw
+                )
+                0 0 / 5cqw 5cqw,
+              var(--surface, #172033);
+          }
+
+          .wpc-after .wpc-default {
+            background: linear-gradient(
+              135deg,
+              color-mix(in srgb, var(--brand, #22c55e) 32%, var(--surface, #172033)) 0%,
+              var(--surface, #172033) 58%,
+              color-mix(in srgb, var(--wpc-accent, #22c55e) 22%, var(--surface, #172033)) 100%
+            );
+          }
+
+          .wpc-card {
+            width: 56cqw;
+            height: 56cqh;
+            padding: var(--space-3, 4cqh) var(--space-3, 4cqw);
+            border: 0.16cqw solid var(--border, #334155);
+            border-radius: var(--radius, 2.4cqmin);
+            background: color-mix(in srgb, var(--surface, #172033) 88%, var(--bg, #07111f));
+            box-shadow: 0 2cqh 5cqw color-mix(in srgb, var(--bg, #07111f) 45%, transparent);
+          }
+
+          .wpc-after .wpc-card {
+            border-color: color-mix(
+              in srgb,
+              var(--wpc-accent, #22c55e) 52%,
+              var(--border, #334155)
+            );
+            background: color-mix(in srgb, var(--surface, #172033) 86%, var(--brand, #22c55e));
+          }
+
+          .wpc-bar {
+            width: 34%;
+            height: 4.4cqh;
+            margin-bottom: var(--space-3, 4cqh);
+            border-radius: 1.2cqh;
+            background: var(--muted, #94a3b8);
+            opacity: 0.5;
+          }
+
+          .wpc-after .wpc-bar {
+            background: var(--wpc-accent, #22c55e);
+            opacity: 0.92;
+          }
+
+          .wpc-line {
+            height: 2.4cqh;
+            margin-bottom: var(--space-2, 2.6cqh);
+            border-radius: 1.2cqh;
+            background: var(--muted, #94a3b8);
+            opacity: 0.4;
+          }
+
+          .wpc-line:nth-of-type(2) {
+            width: 92%;
+          }
+
+          .wpc-line:nth-of-type(3) {
+            width: 68%;
+          }
+
+          .wpc-line:nth-of-type(4) {
+            width: 44%;
+          }
+
+          .wpc-after .wpc-line {
+            background: color-mix(in srgb, var(--brand, #22c55e) 70%, var(--fg, #f8fafc));
+            opacity: 0.75;
+          }
+        </style>
+
+        <div
+          id="whip-pan-cut-clip"
+          class="wpc-clip clip"
+          data-start="0"
+          data-duration="1.2"
+          data-track-index="0"
+        >
+          <svg width="0" height="0" aria-hidden="true" style="position: absolute">
+            <defs>
+              <filter id="wpc-blur" x="-50%" y="-20%" width="200%" height="140%">
+                <feGaussianBlur class="wpc-blur-node" in="SourceGraphic" stdDeviation="0 0" />
+              </filter>
+            </defs>
+          </svg>
+
+          <div class="wpc-strip">
+            <section class="wpc-panel wpc-before" aria-label="Outgoing scene">
+              <div class="wpc-slot" data-slot="before">
+                <!-- SLOT "before": replace the children of this element with
+                     your own content (img, video, or HTML). -->
+                <div class="wpc-default" aria-hidden="true">
+                  <div class="wpc-card">
+                    <div class="wpc-bar"></div>
+                    <div class="wpc-line"></div>
+                    <div class="wpc-line"></div>
+                    <div class="wpc-line"></div>
+                  </div>
+                </div>
+              </div>
+            </section>
+
+            <section class="wpc-panel wpc-after" aria-label="Incoming scene">
+              <div class="wpc-slot" data-slot="after">
+                <!-- SLOT "after": replace the children of this element with
+                     your own content (img, video, or HTML). -->
+                <div class="wpc-default" aria-hidden="true">
+                  <div class="wpc-card">
+                    <div class="wpc-bar"></div>
+                    <div class="wpc-line"></div>
+                    <div class="wpc-line"></div>
+                    <div class="wpc-line"></div>
+                  </div>
+                </div>
+              </div>
+            </section>
+
+            <div class="wpc-seam" aria-hidden="true"></div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            // Literal id: mount flattening strips data-composition-id from the
+            // live root before this timeline registers.
+            var compositionId = "whip-pan-cut";
+            var strip = root.querySelector(".wpc-strip");
+            var seam = root.querySelector(".wpc-seam");
+            var blurNode = root.querySelector(".wpc-blur-node");
+
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var direction = vars.direction === "right" ? "right" : "left";
+            var rawWhipAt = vars.whip_at == null ? 0.25 : Number(vars.whip_at);
+            var whipAt = Number.isFinite(rawWhipAt) ? Math.max(0, Math.min(8, rawWhipAt)) : 0.25;
+            // Each enum choice routes to a DIFFERENT contract token so the
+            // variable stays meaningful under a theme.
+            var accentColors = {
+              green: "var(--brand, #22c55e)",
+              blue: "var(--accent, #38bdf8)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            // The bundler mirrors composition variables as scoped CSS custom
+            // props, so this unit's own accent variable can shadow the
+            // contract --accent token inside the subtree ("blue" is a valid
+            // CSS color and would render pure blue). When the shadow is
+            // present, fall back to the literal contract value.
+            var computedAccent = getComputedStyle(root).getPropertyValue("--accent").trim();
+            if (
+              computedAccent === "green" ||
+              computedAccent === "blue" ||
+              computedAccent === "violet"
+            ) {
+              accentColors.blue = "#38bdf8";
+            }
+            // INVARIANT: only none | fade | up reaches the timeline.
+            var exit = vars.exit === "fade" || vars.exit === "up" ? vars.exit : "none";
+
+            root.dataset.direction = direction;
+            root.style.setProperty("--wpc-accent", accentColors[accent]);
+
+            // Travel measured in px ONCE at mount (cq units inside tweened
+            // transform values are a seek trap). One frame-width lands scene
+            // B exactly where scene A stood.
+            var travel = root.clientWidth || 1920;
+            var sign = direction === "left" ? -1 : 1;
+
+            // RETIME RANGE: 0.6s to 3s. LEAD and WHIP scale together only when
+            // D is too short. REST absorbs any remainder; this is a transition
+            // profile (cut-the-curve precedent), so a short clip window may
+            // end while the catch is still decelerating. Never timeScale().
+            var WHIP_DURATION_BASE = 0.55;
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "1.2"));
+            var EXIT = exit === "none" ? 0 : Math.min(0.35, duration * 0.25);
+            var scale =
+              duration - EXIT < whipAt + WHIP_DURATION_BASE
+                ? (duration - EXIT) / (whipAt + WHIP_DURATION_BASE)
+                : 1;
+            var WHIP_AT = whipAt * scale;
+            var WHIP_DURATION = WHIP_DURATION_BASE * scale;
+            var WHIP_END = WHIP_AT + WHIP_DURATION;
+            var CUT_AT = WHIP_AT + WHIP_DURATION / 2;
+            var OUT_START = duration - EXIT;
+
+            // Blur cap per the motion-blur-streak recipe: peak stdDeviation
+            // stays well under the 30px readability ceiling.
+            var PEAK_BLUR = 16;
+            var blurProxy = { v: 0 };
+            function writeBlur() {
+              blurNode.setAttribute("stdDeviation", blurProxy.v + " 0");
+            }
+            // Seed frame 0 so a seek to t=0 renders sharp, not a stale blur.
+            writeBlur();
+
+            function fireSfx(id, t) {
+              root.dispatchEvent(
+                new CustomEvent("hf:sfx", { detail: { id: id, t: t }, bubbles: true }),
+              );
+            }
+
+            // Explicit both-endpoints state makes tl.seek(0) deterministic.
+            gsap.set(strip, { x: 0, y: 0, opacity: 1 });
+            gsap.set(seam, { autoAlpha: 0 });
+
+            var tl = gsap.timeline({ paused: true });
+
+            // WHIP: one strip, one speed-ramp tween. Both scenes share the
+            // transform, so seam velocity is matched by construction.
+            tl.fromTo(
+              strip,
+              { x: 0 },
+              { x: sign * travel, duration: WHIP_DURATION, ease: "power3.inOut" },
+              WHIP_AT,
+            );
+
+            // Blur envelope: peaks at mid-whip (peak velocity), zero at both
+            // ends. power3.in up / power3.out down mirrors the inOut ramp.
+            tl.to(
+              blurProxy,
+              { v: PEAK_BLUR, duration: WHIP_DURATION / 2, ease: "power3.in", onUpdate: writeBlur },
+              WHIP_AT,
+            );
+            tl.to(
+              blurProxy,
+              { v: 0, duration: WHIP_DURATION / 2, ease: "power3.out", onUpdate: writeBlur },
+              WHIP_AT + WHIP_DURATION / 2,
+            );
+
+            // Seam hairline: alive only while the whip runs.
+            tl.fromTo(
+              seam,
+              { autoAlpha: 0 },
+              {
+                autoAlpha: 1,
+                duration: Math.min(0.1 * scale, WHIP_DURATION),
+                ease: "power1.out",
+                immediateRender: false,
+              },
+              WHIP_AT,
+            );
+            tl.to(
+              seam,
+              { autoAlpha: 0, duration: 0.15 * scale, ease: "power1.in" },
+              Math.max(WHIP_AT, WHIP_END - 0.15 * scale),
+            );
+
+            tl.call(
+              function () {
+                fireSfx("whip-cut", CUT_AT);
+              },
+              [],
+              CUT_AT,
+            );
+
+            // REST: dead still on scene B until the frame cuts.
+
+            // EXIT: only when the exit variable asks for one; exit none holds
+            // the landed scene (frame roots own transitions).
+            if (exit !== "none") {
+              tl.to(strip, { opacity: 0, duration: EXIT, ease: "power2.in" }, OUT_START);
+              if (exit === "up") {
+                tl.to(strip, { y: "-6cqh", duration: EXIT, ease: "power2.in" }, OUT_START);
+              }
+            }
+
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/whiteboard-ink/README.md b/registry/components/whiteboard-ink/README.md
new file mode 100644
index 0000000000..ee223b003c
--- /dev/null
+++ b/registry/components/whiteboard-ink/README.md
@@ -0,0 +1,107 @@
+# whiteboard-ink
+
+A hand-drawn whiteboard sketch draws itself one measured stroke at a time
+while a pen nib rides the active ink front. Ships three preset sketches
+(bulb, flow, rocket) and a strokes slot: fill it with your own multi-stroke
+SVG paths and they become the drawing, with the same nib riding, per-stroke
+cadence, and ink law as the presets.
+
+## Files
+
+- `whiteboard-ink.html`: the mountable sub-composition (install target:
+  `compositions/components/whiteboard-ink.html`).
+- `registry-item.json`: registry metadata and the variables block.
+- `demo.html`: standalone mount used for QA.
+
+## Variables
+
+| id        | type   | default         | notes                                                                                 |
+| --------- | ------ | --------------- | ------------------------------------------------------------------------------------- |
+| `sketch`  | enum   | `bulb`          | preset sketch (`bulb`, `flow`, `rocket`); ignored when the strokes slot holds paths   |
+| `caption` | string | `Draw the idea` | short line revealed after the drawing completes; empty string shows none              |
+| `pen`     | enum   | `show`          | `hide` removes the traveling nib actor                                                |
+| `accent`  | enum   | `green`         | `green` maps to `--brand`, `blue` to `--accent`, `violet` to `--accent-2`             |
+| `exit`    | enum   | `none`          | `none` holds the final frame; `fade` releases opacity; `up` adds a small upward drift |
+
+Envelope: IN = 3.55s (3.25s sequential draw, then pen lift and caption),
+OUT = 0.45s only when `exit` is `fade` or `up`, HOLD is the sole elastic
+phase. The timeline is never time-scaled. The `ink-complete` sync point fires
+at 3.3s at defaults.
+
+## The strokes slot
+
+The primitive's SVG ships an empty named group:
+
+```html
+<g class="wbi-sketch" data-slot="strokes" data-sketch="custom" hidden></g>
+```
+
+To draw your own artwork, install the component and **fill this group with
+`<path>` elements in your installed copy** (the runtime clones only the
+primitive's own template on mount, so slot content lives in the component
+file, not on the host clip). As soon as the slot holds at least one path, it
+replaces the preset selected by `sketch`; leave it empty and the presets
+behave exactly as before.
+
+Rules:
+
+- Paths draw in document order, one at a time, with the nib hopping between
+  strokes. Each path is measured once with `getTotalLength`; that measurement
+  owns its dash array, cadence weight, and nib sampling. Author plain `d`
+  path data, no `pathLength` attribute, no `vector-effect`.
+- Coordinate space is the component viewBox, `0 0 1000 560`. Keep artwork
+  near that scale so the nib and stroke weight read correctly. A `transform`
+  on the slot group is honored (the nib maps through it).
+- Strokes render in `--fg` at width 6 by default. An authored `stroke-width`
+  attribute on a path wins. Fills are stripped (`fill: none`); this is a
+  line-draw primitive.
+- Mark a path `data-ink="accent"` to route it through the accent token map
+  (the `accent` variable picks `--brand`, `--accent`, or `--accent-2`), the
+  same treatment as each preset's single highlight stroke.
+- Many strokes are fine: when the per-stroke minimums would overrun the 3.25s
+  draw phase, the cadence compresses uniformly and stays sequential.
+
+## Worked example
+
+Install, then draw a custom "signal" mark with an accent underline:
+
+```bash
+npx hyperframes add whiteboard-ink
+```
+
+In `compositions/components/whiteboard-ink.html`, fill the slot group:
+
+```html
+<g class="wbi-sketch" data-slot="strokes" data-sketch="custom" hidden>
+  <path d="M 320 330 L 420 330 L 460 210 L 540 400 L 580 300 L 680 300"></path>
+  <path d="M 470 150 C 500 130 540 130 570 155"></path>
+  <path data-ink="accent" d="M 330 430 C 440 452 570 452 672 428"></path>
+</g>
+```
+
+Mount it from a host composition like any sub-composition:
+
+```html
+<div
+  class="clip"
+  data-composition-id="whiteboard-ink"
+  data-composition-src="./components/whiteboard-ink.html"
+  data-variable-values='{"caption":"Find the signal","accent":"blue","exit":"none"}'
+  data-start="0"
+  data-duration="5"
+  data-track-index="0"
+></div>
+```
+
+The three paths draw in order (zigzag, hat, then the accent underline in
+`--accent` blue), the nib rides each ink front and hops between strokes, and
+the caption fades up once the underline lands.
+
+## Contract notes
+
+- One paused GSAP timeline registered at `window.__timelines["whiteboard-ink"]`.
+- Elastic root: no `data-width`/`data-height`, `container-type: size`, sized
+  in `cq*` units; the HOLD phase absorbs any mount duration.
+- Deterministic and seek-safe: dashed draw-on via `getTotalLength` in native
+  SVG user units, never `pathLength`, never `non-scaling-stroke` on dashed
+  paths; SVG group visibility toggles via the `hidden` attribute.
diff --git a/registry/components/whiteboard-ink/demo.html b/registry/components/whiteboard-ink/demo.html
new file mode 100644
index 0000000000..284c013b1b
--- /dev/null
+++ b/registry/components/whiteboard-ink/demo.html
@@ -0,0 +1,93 @@
+<!doctype html>
+<!--
+  whiteboard-ink demo. This standalone composition mounts the primitive with
+  non-default sketch, caption, and accent values while leaving the pen visible.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Whiteboard Ink Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0b0c0e;
+      }
+
+      #root {
+        --bg: #0b0c0e;
+        --fg: #f8fafc;
+        --muted: #94a3b8;
+        --surface: #171a20;
+        --border: #343a46;
+        --brand: #71f5a7;
+        --accent: #61a8ff;
+        --accent-2: #c5a3ff;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-body: Inter, system-ui, sans-serif;
+        --space-1: 1.8cqh;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: radial-gradient(circle at 50% 44%, #20242b 0%, #0b0c0e 70%);
+      }
+
+      .mount-card {
+        --bg: #f5f0e5;
+        --fg: #20242b;
+        --muted: #667085;
+        --surface: #fffdf8;
+        width: 62%;
+        height: 72%;
+        left: 19%;
+        top: 14%;
+        container-type: size;
+        overflow: hidden;
+        border: 1px solid color-mix(in srgb, var(--border, #343a46) 44%, transparent);
+        border-radius: 28px;
+        background: var(--bg, #f5f0e5);
+        box-shadow: 0 42px 110px rgba(0, 0, 0, 0.46);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="whiteboard-ink-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+      data-fps="30"
+    >
+      <div
+        id="wbi-mount"
+        class="mount-card clip"
+        data-composition-id="whiteboard-ink"
+        data-composition-src="./whiteboard-ink.html"
+        data-variable-values='{"sketch":"rocket","caption":"Sketch the launch","pen":"show","accent":"violet"}'
+        data-start="0"
+        data-duration="5"
+        data-track-index="0"
+        data-width="1190"
+        data-height="778"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["whiteboard-ink-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/whiteboard-ink/registry-item.json b/registry/components/whiteboard-ink/registry-item.json
new file mode 100644
index 0000000000..f9fdeaeeaf
--- /dev/null
+++ b/registry/components/whiteboard-ink/registry-item.json
@@ -0,0 +1,81 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "whiteboard-ink",
+  "type": "hyperframes:component",
+  "title": "Whiteboard Ink",
+  "description": "A whiteboard sketch draws one measured stroke at a time while a pen nib follows the active tip. Preset sketches (bulb, flow, rocket) or your own multi-stroke SVG paths via the strokes slot; a path marked data-ink=accent rides the accent token.",
+  "tags": ["motion-primitive", "intro", "reveal", "svg", "whiteboard", "line-draw", "slot"],
+  "jobs": ["reveal"],
+  "family": "intros-and-reveals",
+  "profile": "ink-draw",
+  "evidence": "Video Primitives Wave I I8 whiteboard-ink contract; Wave J U-W strokes slot",
+  "syncPoints": [{ "id": "ink-complete", "phase": "in", "offset": 3.3 }],
+  "files": [
+    {
+      "path": "whiteboard-ink.html",
+      "target": "compositions/components/whiteboard-ink.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "sketch",
+      "type": "enum",
+      "role": "content",
+      "label": "Sketch",
+      "description": "Authored preset sketch to draw. Ignored when the strokes slot holds custom paths.",
+      "default": "bulb",
+      "options": [
+        { "value": "bulb", "label": "Bulb" },
+        { "value": "flow", "label": "Flow" },
+        { "value": "rocket", "label": "Rocket" }
+      ]
+    },
+    {
+      "id": "caption",
+      "type": "string",
+      "role": "content",
+      "label": "Caption",
+      "description": "Short line shown after the sketch completes.",
+      "default": "Draw the idea"
+    },
+    {
+      "id": "pen",
+      "type": "enum",
+      "role": "style",
+      "label": "Pen",
+      "description": "Show or hide the pen nib actor.",
+      "default": "show",
+      "options": [
+        { "value": "show", "label": "Show" },
+        { "value": "hide", "label": "Hide" }
+      ]
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Color used by strokes marked data-ink=accent (one highlight stroke in each preset).",
+      "default": "green",
+      "options": [
+        { "value": "green", "label": "Green" },
+        { "value": "blue", "label": "Blue" },
+        { "value": "violet", "label": "Violet" }
+      ]
+    },
+    {
+      "id": "exit",
+      "type": "enum",
+      "role": "style",
+      "label": "Exit",
+      "description": "How the completed lockup leaves. none holds the final frame.",
+      "default": "none",
+      "options": [
+        { "value": "none", "label": "None" },
+        { "value": "fade", "label": "Fade" },
+        { "value": "up", "label": "Up" }
+      ]
+    }
+  ]
+}
diff --git a/registry/components/whiteboard-ink/whiteboard-ink.html b/registry/components/whiteboard-ink/whiteboard-ink.html
new file mode 100644
index 0000000000..4472e9fc34
--- /dev/null
+++ b/registry/components/whiteboard-ink/whiteboard-ink.html
@@ -0,0 +1,540 @@
+<!doctype html>
+<!--
+  whiteboard-ink: HyperFrames video primitive (intros and reveals / ink draw)
+
+  A hand-authored SVG sketch draws one stroke at a time while a pen nib
+  samples the active path tip. The nib follows getPointAtLength during each
+  draw and takes a short lifted hop between strokes.
+
+  Strokes slot: the SVG ships an empty <g data-slot="strokes"> group. Fill it
+  with your own <path> elements (in your installed copy) and those paths
+  become the drawing; the sketch enum is ignored while the slot has paths.
+  Mark one path data-ink="accent" to route it through the accent token map.
+  Nib riding, per-stroke cadence, and the ink law are identical for slot
+  strokes and presets.
+
+  Variables:
+    - sketch (bulb / flow / rocket): authored preset sketch; ignored when the
+      strokes slot holds paths.
+    - caption (string): short line shown after the drawing completes.
+    - pen (show / hide): visibility of the traveling nib actor.
+    - accent (green / blue / violet): one highlight stroke routed through a
+      distinct contract token.
+    - exit (none / fade / up): how the completed lockup leaves. none holds
+      the final frame (frame roots own transitions); fade releases opacity
+      only; up adds the small upward drift.
+
+  Envelope, fixed IN and OUT with elastic HOLD only:
+    IN_BASE  = 3.55s, 3.25s sequential draw phase, then pen exit and caption
+    HOLD     = max(0, D - IN - OUT), dead-calm completed lockup
+    OUT_BASE = 0.45s when exit is fade or up, otherwise 0 (hold to the end)
+    If D is shorter than IN_BASE + OUT_BASE, IN and OUT compress together.
+    The timeline is never time-scaled.
+
+  Ink law: every selected path is measured once with getTotalLength. That
+  measurement owns its dash array, dash offset, cadence weight, and nib
+  sampling. Dashed geometry stays in native SVG user units.
+
+  Mount contract: the runtime clones only this template. #root fills the host
+  box, establishes the container query basis, has no data-width or data-height,
+  and registers one paused timeline under the literal whiteboard-ink key.
+-->
+<html
+  lang="en"
+  data-composition-id="whiteboard-ink"
+  data-composition-duration="5"
+  data-composition-variables='[
+    { "id": "sketch", "type": "enum", "role": "content", "label": "Sketch", "description": "Authored preset sketch to draw. Ignored when the strokes slot holds custom paths.", "default": "bulb", "options": [{ "value": "bulb", "label": "Bulb" }, { "value": "flow", "label": "Flow" }, { "value": "rocket", "label": "Rocket" }] },
+    { "id": "caption", "type": "string", "role": "content", "label": "Caption", "description": "Short line shown after the sketch completes.", "default": "Draw the idea" },
+    { "id": "pen", "type": "enum", "role": "style", "label": "Pen", "description": "Show or hide the pen nib actor.", "default": "show", "options": [{ "value": "show", "label": "Show" }, { "value": "hide", "label": "Hide" }] },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Color used by strokes marked data-ink=accent (one highlight stroke in each preset).", "default": "green", "options": [{ "value": "green", "label": "Green" }, { "value": "blue", "label": "Blue" }, { "value": "violet", "label": "Violet" }] },
+    { "id": "exit", "type": "enum", "role": "style", "label": "Exit", "description": "How the completed lockup leaves. none holds the final frame.", "default": "none", "options": [{ "value": "none", "label": "None" }, { "value": "fade", "label": "Fade" }, { "value": "up", "label": "Up" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Whiteboard Ink</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="whiteboard-ink" data-duration="5" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          #root {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            container-type: size;
+            isolation: isolate;
+            background:
+              radial-gradient(
+                ellipse at 48% 42%,
+                color-mix(in srgb, var(--bg, #f6f1e7) 96%, var(--fg, #20242b)) 0%,
+                var(--bg, #f6f1e7) 72%
+              ),
+              var(--bg, #f6f1e7);
+            color: var(--fg, #20242b);
+            font-family: var(--font-body, Inter, system-ui, sans-serif);
+            pointer-events: none;
+          }
+
+          .wbi-clip {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+          }
+
+          .wbi-stage {
+            display: grid;
+            grid-template-rows: minmax(0, 1fr) auto;
+            width: 92cqw;
+            height: 90cqh;
+            opacity: 0;
+            will-change: transform, opacity;
+          }
+
+          .wbi-board {
+            position: relative;
+            min-height: 0;
+          }
+
+          .wbi-svg {
+            display: block;
+            width: 100%;
+            height: 100%;
+            overflow: visible;
+          }
+
+          .wbi-sketch[hidden] {
+            display: none;
+          }
+
+          .wbi-stroke {
+            fill: none;
+            stroke: var(--fg, #20242b);
+            /* User-space width: never non-scaling-stroke on dashed paths
+               (screen-space dash breaks draw-on under group scale). Non-uniform
+               scale gives a natural thick-thin nib variation. */
+            stroke-width: 6;
+            stroke-linecap: round;
+            stroke-linejoin: round;
+          }
+
+          .wbi-stroke.wbi-accent {
+            stroke: var(--wbi-accent);
+          }
+
+          /* Custom strokes-slot paths inherit the same ink treatment without
+             needing any class; data-ink="accent" routes through the accent
+             token map exactly like a preset's highlight stroke. */
+          [data-slot="strokes"] path {
+            fill: none;
+            stroke: var(--fg, #20242b);
+            stroke-width: 6;
+            stroke-linecap: round;
+            stroke-linejoin: round;
+          }
+
+          [data-slot="strokes"] path[data-ink="accent"] {
+            stroke: var(--wbi-accent);
+          }
+
+          .wbi-pen {
+            filter: drop-shadow(0 5px 6px color-mix(in srgb, var(--fg, #20242b) 20%, transparent));
+            will-change: transform, opacity;
+          }
+
+          .wbi-pen-art {
+            will-change: transform;
+          }
+
+          .wbi-pen-body {
+            fill: var(--surface, #ffffff);
+            stroke: var(--fg, #20242b);
+            stroke-width: 4;
+            stroke-linecap: round;
+            stroke-linejoin: round;
+          }
+
+          .wbi-pen-nib {
+            fill: var(--wbi-accent);
+            stroke: var(--fg, #20242b);
+            stroke-width: 3;
+          }
+
+          .wbi-caption {
+            min-height: 10cqh;
+            padding-top: var(--space-1, 1.8cqh);
+            color: var(--muted, #667085);
+            font-family: var(--font-display, Inter, system-ui, sans-serif);
+            font-size: clamp(24px, 5cqh, 52px);
+            font-weight: 680;
+            line-height: 1.1;
+            letter-spacing: -0.02em;
+            text-align: center;
+            opacity: 0;
+          }
+        </style>
+
+        <div
+          id="wbi-clip"
+          class="wbi-clip clip"
+          data-start="0"
+          data-duration="5"
+          data-track-index="0"
+        >
+          <div class="wbi-stage" role="img">
+            <div class="wbi-board">
+              <svg
+                class="wbi-svg"
+                viewBox="0 0 1000 560"
+                preserveAspectRatio="xMidYMid meet"
+                aria-hidden="true"
+              >
+                <g
+                  class="wbi-sketch"
+                  data-sketch="bulb"
+                  transform="translate(500 280) scale(1.25 1.4) translate(-500 -256)"
+                >
+                  <path
+                    class="wbi-stroke"
+                    d="M 430 340 C 414 310 392 286 386 244 C 376 172 427 113 501 109 C 578 105 633 160 626 235 C 622 279 596 306 574 341"
+                  ></path>
+                  <path
+                    class="wbi-stroke wbi-accent"
+                    d="M 454 238 C 469 251 482 263 499 292 C 517 261 532 247 549 235"
+                  ></path>
+                  <path class="wbi-stroke" d="M 431 347 C 468 353 531 350 571 343"></path>
+                  <path class="wbi-stroke" d="M 438 369 C 476 376 525 373 564 365"></path>
+                  <path class="wbi-stroke" d="M 454 389 C 482 403 520 402 548 385"></path>
+                  <path class="wbi-stroke" d="M 333 231 C 349 228 360 230 372 232"></path>
+                  <path class="wbi-stroke" d="M 640 228 C 657 225 670 226 685 230"></path>
+                </g>
+
+                <g
+                  class="wbi-sketch"
+                  data-sketch="flow"
+                  transform="translate(500 280) scale(0.9 2.1) translate(-525 -265)"
+                  hidden
+                >
+                  <path
+                    class="wbi-stroke"
+                    d="M 145 205 C 145 184 160 171 184 171 L 315 171 C 338 171 351 187 351 207 L 351 322 C 351 344 337 357 314 357 L 181 357 C 158 357 145 342 145 321 Z"
+                  ></path>
+                  <path
+                    class="wbi-stroke wbi-accent"
+                    d="M 352 264 C 378 258 397 259 425 263 L 446 267 M 429 249 L 446 267 L 427 284"
+                  ></path>
+                  <path class="wbi-stroke" d="M 516 170 L 611 265 L 516 360 L 421 265 Z"></path>
+                  <path
+                    class="wbi-stroke"
+                    d="M 612 265 C 641 268 662 268 691 264 L 711 263 M 694 247 L 711 263 L 694 280"
+                  ></path>
+                  <path
+                    class="wbi-stroke"
+                    d="M 711 204 C 711 184 726 171 749 171 L 868 171 C 891 171 905 187 905 208 L 905 321 C 905 343 891 357 868 357 L 748 357 C 725 357 711 342 711 321 Z"
+                  ></path>
+                  <path
+                    class="wbi-stroke"
+                    d="M 764 266 C 785 284 802 292 820 294 C 837 278 849 256 861 230"
+                  ></path>
+                </g>
+
+                <g class="wbi-sketch" data-sketch="rocket" transform="translate(0 -17)" hidden>
+                  <path
+                    class="wbi-stroke"
+                    d="M 500 76 C 552 117 581 184 578 272 C 576 329 549 378 500 420 C 451 378 425 329 422 272 C 419 184 448 117 500 76 Z"
+                  ></path>
+                  <path
+                    class="wbi-stroke wbi-accent"
+                    d="M 500 181 C 526 181 544 198 544 223 C 544 248 527 265 500 265 C 475 265 457 248 457 223 C 457 199 474 181 500 181 Z"
+                  ></path>
+                  <path
+                    class="wbi-stroke"
+                    d="M 430 295 C 386 320 359 363 353 419 C 389 405 420 384 448 353"
+                  ></path>
+                  <path
+                    class="wbi-stroke"
+                    d="M 570 295 C 614 320 641 363 647 419 C 611 405 580 384 552 353"
+                  ></path>
+                  <path
+                    class="wbi-stroke"
+                    d="M 476 415 C 464 445 470 478 500 518 C 530 478 536 445 524 415"
+                  ></path>
+                  <path class="wbi-stroke" d="M 452 431 C 433 451 427 475 433 500"></path>
+                  <path class="wbi-stroke" d="M 548 431 C 567 451 573 475 567 500"></path>
+                </g>
+
+                <!--
+                  Strokes slot. Fill this group with your own <path> elements
+                  (installed copy) to replace the preset sketches; paths draw
+                  in document order in the 0 0 1000 560 viewBox space. Mark a
+                  path data-ink="accent" for the accent token. Ships empty.
+                -->
+                <g class="wbi-sketch" data-slot="strokes" data-sketch="custom" hidden></g>
+
+                <g class="wbi-pen" aria-hidden="true">
+                  <g class="wbi-pen-art">
+                    <path class="wbi-pen-body" d="M 0 0 L -43 -11 L -52 0 L -43 11 Z"></path>
+                    <path class="wbi-pen-nib" d="M 0 0 L -11 -7 L -11 7 Z"></path>
+                  </g>
+                </g>
+              </svg>
+            </div>
+            <div class="wbi-caption"></div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var stage = root.querySelector(".wbi-stage");
+            var captionElement = root.querySelector(".wbi-caption");
+            var penElement = root.querySelector(".wbi-pen");
+            var penArt = root.querySelector(".wbi-pen-art");
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var sketchGroups = {
+              bulb: root.querySelector('[data-sketch="bulb"]'),
+              flow: root.querySelector('[data-sketch="flow"]'),
+              rocket: root.querySelector('[data-sketch="rocket"]'),
+            };
+            var sketch = Object.prototype.hasOwnProperty.call(sketchGroups, vars.sketch)
+              ? vars.sketch
+              : "bulb";
+            var caption = vars.caption == null ? "Draw the idea" : String(vars.caption);
+            var penVisible = vars.pen !== "hide";
+            var accentColors = {
+              green: "var(--brand, #71f5a7)",
+              blue: "var(--accent, #61a8ff)",
+              violet: "var(--accent-2, #c5a3ff)",
+            };
+            var accent = Object.prototype.hasOwnProperty.call(accentColors, vars.accent)
+              ? vars.accent
+              : "green";
+            var exitModes = { none: true, fade: true, up: true };
+            var exitMode = Object.prototype.hasOwnProperty.call(exitModes, vars.exit)
+              ? vars.exit
+              : "none";
+
+            // Strokes slot: user-supplied paths replace the preset sketches.
+            var strokesSlot = root.querySelector('[data-slot="strokes"]');
+            var slotPaths = strokesSlot ? strokesSlot.querySelectorAll("path") : [];
+            var hasCustomStrokes = slotPaths.length > 0;
+            if (hasCustomStrokes) {
+              Array.prototype.forEach.call(slotPaths, function (path) {
+                // CSS beats SVG presentation attributes; promote an authored
+                // stroke-width to inline style so it wins over the slot rule.
+                var strokeWidth = path.getAttribute("stroke-width");
+                if (strokeWidth) path.style.strokeWidth = strokeWidth;
+              });
+            }
+
+            Object.keys(sketchGroups).forEach(function (name) {
+              // SVG <g> has no `hidden` IDL property (assignment is a dead
+              // expando); toggle the attribute so the [hidden] CSS applies.
+              if (hasCustomStrokes || name !== sketch)
+                sketchGroups[name].setAttribute("hidden", "");
+              else sketchGroups[name].removeAttribute("hidden");
+            });
+            if (hasCustomStrokes) strokesSlot.removeAttribute("hidden");
+            var activeGroup = hasCustomStrokes ? strokesSlot : sketchGroups[sketch];
+            root.style.setProperty("--wbi-accent", accentColors[accent]);
+            captionElement.textContent = caption;
+            penElement.style.display = penVisible ? "" : "none";
+            stage.setAttribute(
+              "aria-label",
+              (hasCustomStrokes
+                ? "Custom sketch. "
+                : sketch.charAt(0).toUpperCase() + sketch.slice(1) + " sketch. ") + caption,
+            );
+
+            var groupTransform = activeGroup.transform.baseVal.consolidate();
+            var strokes = Array.from(activeGroup.querySelectorAll("path")).map(function (path) {
+              var length = path.getTotalLength();
+              path.style.strokeDasharray = length + " " + length;
+              path.style.strokeDashoffset = String(length);
+              return {
+                path: path,
+                length: length,
+                progress: 0,
+                matrix: groupTransform ? groupTransform.matrix : null,
+              };
+            });
+            var totalLength = strokes.reduce(function (sum, stroke) {
+              return sum + stroke.length;
+            }, 0);
+
+            function pointAt(stroke, distance) {
+              var point = stroke.path.getPointAtLength(distance);
+              return stroke.matrix ? point.matrixTransform(stroke.matrix) : point;
+            }
+
+            function pathPose(stroke, progress) {
+              var distance = progress * stroke.length;
+              var tangentStep = Math.max(0.5, stroke.length * 0.004);
+              var before = pointAt(stroke, Math.max(0, distance - tangentStep));
+              var after = pointAt(stroke, Math.min(stroke.length, distance + tangentStep));
+              var point = pointAt(stroke, distance);
+
+              return {
+                x: point.x,
+                y: point.y,
+                rotation: (Math.atan2(after.y - before.y, after.x - before.x) * 180) / Math.PI,
+              };
+            }
+
+            function placePen(pose) {
+              gsap.set(penElement, { x: pose.x, y: pose.y, rotation: pose.rotation });
+            }
+
+            function renderStroke(stroke) {
+              var clamped = Math.max(0, Math.min(1, stroke.progress));
+              stroke.path.style.strokeDashoffset = String((1 - clamped) * stroke.length);
+              placePen(pathPose(stroke, clamped));
+            }
+
+            var DRAW_PHASE_BASE = 3.25;
+            var CAPTION_BASE = 0.3;
+            var IN_BASE = DRAW_PHASE_BASE + CAPTION_BASE;
+            var OUT_BASE = exitMode === "none" ? 0 : 0.45;
+            var resolvedDuration =
+              window.__hyperframes && window.__hyperframes.getDuration
+                ? window.__hyperframes.getDuration()
+                : undefined;
+            var duration = Math.max(
+              0.001,
+              typeof resolvedDuration === "number"
+                ? resolvedDuration
+                : parseFloat(root.dataset.duration || "5"),
+            );
+            var fixedTotal = IN_BASE + OUT_BASE;
+            var phaseScale = duration < fixedTotal ? duration / fixedTotal : 1;
+            var IN = IN_BASE * phaseScale;
+            var OUT = OUT_BASE * phaseScale;
+            var HOLD = Math.max(0, duration - IN - OUT);
+            var DRAW_PHASE = DRAW_PHASE_BASE * phaseScale;
+            var CAPTION = CAPTION_BASE * phaseScale;
+            var hopCount = strokes.length - 1;
+            var HOP = 0.1 * phaseScale;
+            var MIN_DRAW = 0.26 * phaseScale;
+            // Custom slots can hold many strokes; when the fixed per-stroke
+            // floors alone would overrun the draw phase, shrink them together
+            // so the cadence stays sequential and the phase never overflows.
+            var fixedNeed = MIN_DRAW * strokes.length + HOP * hopCount;
+            if (fixedNeed > DRAW_PHASE) {
+              var crowd = DRAW_PHASE / fixedNeed;
+              HOP *= crowd;
+              MIN_DRAW *= crowd;
+            }
+            var DRAW_BUDGET = DRAW_PHASE - HOP * hopCount;
+            var LENGTH_BUDGET = Math.max(0, DRAW_BUDGET - MIN_DRAW * strokes.length);
+            var OUT_START = IN + HOLD;
+            var cursor = 0;
+
+            gsap.set(stage, { opacity: 0, y: "1.2cqh" });
+            gsap.set(captionElement, { opacity: 0, y: "1.4cqh" });
+            gsap.set(penElement, { opacity: penVisible ? 1 : 0 });
+            gsap.set(penArt, { y: 0, transformOrigin: "0px 0px" });
+            placePen(pathPose(strokes[0], 0));
+
+            var tl = gsap.timeline({ paused: true });
+
+            // IN: each stroke owns one progress value. Its single onUpdate
+            // paints the dash and places the nib at the same ink front.
+            tl.to(
+              stage,
+              { opacity: 1, y: "0cqh", duration: Math.min(0.26, IN), ease: "power2.out" },
+              0,
+            );
+
+            strokes.forEach(function (stroke, index) {
+              var drawDuration = MIN_DRAW + (LENGTH_BUDGET * stroke.length) / totalLength;
+
+              tl.to(
+                stroke,
+                {
+                  progress: 1,
+                  duration: drawDuration,
+                  ease: "power1.inOut",
+                  onUpdate: function () {
+                    renderStroke(stroke);
+                  },
+                },
+                cursor,
+              );
+              cursor += drawDuration;
+
+              if (index < strokes.length - 1) {
+                var nextStroke = strokes[index + 1];
+                var fromPose = pathPose(stroke, 1);
+                var toPose = pathPose(nextStroke, 0);
+                var hopState = { progress: 0 };
+
+                tl.to(
+                  hopState,
+                  {
+                    progress: 1,
+                    duration: HOP,
+                    ease: "power2.out",
+                    onUpdate: function () {
+                      var progress = hopState.progress;
+                      placePen({
+                        x: fromPose.x + (toPose.x - fromPose.x) * progress,
+                        y:
+                          fromPose.y +
+                          (toPose.y - fromPose.y) * progress -
+                          Math.sin(Math.PI * progress) * 18,
+                        rotation:
+                          fromPose.rotation + (toPose.rotation - fromPose.rotation) * progress,
+                      });
+                      gsap.set(penArt, { y: -Math.sin(Math.PI * progress) * 8 });
+                    },
+                  },
+                  cursor,
+                );
+                cursor += HOP;
+              }
+            });
+
+            tl.to(
+              captionElement,
+              { opacity: 1, y: "0cqh", duration: CAPTION, ease: "power2.out" },
+              cursor,
+            );
+            tl.to(penElement, { opacity: 0, duration: CAPTION, ease: "power2.out" }, cursor);
+            tl.to(penArt, { y: -18, duration: CAPTION, ease: "power2.out" }, cursor);
+
+            // HOLD: the completed lockup stays dead calm. Duration changes
+            // stretch only this gap between the caption reveal and OUT.
+
+            // OUT: only when an exit is requested; exit none holds the final
+            // frame to the end (frame roots own transitions).
+            if (exitMode !== "none") {
+              var exitTween = { opacity: 0, duration: OUT, ease: "power2.in" };
+              if (exitMode === "up") exitTween.y = "-1.8cqh";
+              tl.to(stage, exitTween, OUT_START);
+            }
+
+            tl.seek(0);
+            window.__timelines = window.__timelines || {};
+            window.__timelines["whiteboard-ink"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/wordmark-tiles/demo.html b/registry/components/wordmark-tiles/demo.html
new file mode 100644
index 0000000000..8d1aad5c46
--- /dev/null
+++ b/registry/components/wordmark-tiles/demo.html
@@ -0,0 +1,101 @@
+<!doctype html>
+<!--
+  wordmark-tiles demo: standalone 1920x1080 host composition. It mounts the
+  primitive through data-composition-src into a definite card instead of
+  inlining primitive markup or motion. The non-default text, column count,
+  and wave stagger prove that per-instance variables cross the mount.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Wordmark Tiles Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+
+      #root {
+        --bg: #070a12;
+        --fg: #f5f7ff;
+        --muted: #7f8aa3;
+        --surface: #151b2b;
+        --border: rgba(245, 247, 255, 0.14);
+        --brand: #7c9dff;
+        --accent: #64e2c2;
+        --font-display: Inter, system-ui, sans-serif;
+        --font-body: Inter, system-ui, sans-serif;
+        --font-mono: ui-monospace, monospace;
+        --radius: 16px;
+        --space-1: 8px;
+        --space-2: 16px;
+        --space-3: 32px;
+        --dur-beat: 0.4s;
+        --ease-standard: cubic-bezier(0.215, 0.61, 0.355, 1);
+        --ease-emphasis: cubic-bezier(0.19, 1, 0.22, 1);
+        --ease-exit: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg);
+        color: var(--fg);
+        font-family: var(--font-body);
+      }
+
+      .mount-card {
+        width: 64%;
+        height: 56%;
+        left: 18%;
+        top: 22%;
+        overflow: hidden;
+        border: 1px solid var(--border);
+        border-radius: calc(var(--radius) * 1.75);
+        background: var(--surface);
+        box-shadow: 0 4cqh 10cqh color-mix(in srgb, var(--fg) 12%, transparent);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="wordmark-tiles-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="6.5"
+      data-fps="30"
+    >
+      <div
+        id="wordmark-tiles-mount"
+        class="mount-card clip"
+        data-composition-id="wordmark-tiles"
+        data-composition-src="./wordmark-tiles.html"
+        data-variable-values='{"text":"ORBIT","columns":14,"waveStagger":28}'
+        data-start="0"
+        data-duration="6.5"
+        data-track-index="0"
+        data-width="1229"
+        data-height="605"
+      ></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      // The mounted primitive owns all visible motion. This standalone host
+      // registers only the empty paused timeline required for its own id.
+      window.__timelines = window.__timelines || {};
+      window.__timelines["wordmark-tiles-demo"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/wordmark-tiles/registry-item.json b/registry/components/wordmark-tiles/registry-item.json
new file mode 100644
index 0000000000..a2c36f304c
--- /dev/null
+++ b/registry/components/wordmark-tiles/registry-item.json
@@ -0,0 +1,54 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "wordmark-tiles",
+  "type": "hyperframes:component",
+  "title": "Wordmark Tiles",
+  "description": "A wordmark resolves from deterministic color noise into correctly cropped glyph tiles through a spatially modulated GSAP wave.",
+  "tags": ["typography", "wordmark", "tiles", "raster", "reveal"],
+  "jobs": ["reveal"],
+  "family": "typography",
+  "profile": "holdable",
+  "evidence": "a power-reel production source, tile grid with a traveling, spatially modulated wave",
+  "syncPoints": [{ "id": "wave-start", "phase": "in", "offset": 0.2 }],
+  "files": [
+    {
+      "path": "wordmark-tiles.html",
+      "target": "compositions/components/wordmark-tiles.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "variables": [
+    {
+      "id": "text",
+      "type": "string",
+      "role": "content",
+      "label": "Wordmark",
+      "description": "Text resolved by the tile wave.",
+      "default": "LAUNCH",
+      "maxLength": 12
+    },
+    {
+      "id": "columns",
+      "type": "number",
+      "role": "layout",
+      "label": "Columns",
+      "description": "Number of columns in the wordmark tile grid.",
+      "default": 12,
+      "min": 8,
+      "max": 14,
+      "step": 1
+    },
+    {
+      "id": "waveStagger",
+      "type": "number",
+      "role": "motion",
+      "label": "Wave stagger",
+      "description": "Delay between tile reveals in spatial wave order.",
+      "default": 40,
+      "min": 15,
+      "max": 50,
+      "step": 1,
+      "unit": "ms"
+    }
+  ]
+}
diff --git a/registry/components/wordmark-tiles/wordmark-tiles.html b/registry/components/wordmark-tiles/wordmark-tiles.html
new file mode 100644
index 0000000000..039a63290c
--- /dev/null
+++ b/registry/components/wordmark-tiles/wordmark-tiles.html
@@ -0,0 +1,360 @@
+<!doctype html>
+<!--
+  wordmark-tiles: HyperFrames video primitive (typography / holdable / reveal)
+
+  Concept: a wordmark begins as a field of unresolved color tiles. A spatially
+  modulated wave crosses the grid, and each tile swaps its noise face for the
+  correct clipped fragment of the final wordmark. One mechanic, one job:
+  reveal a legible mark through a raster tile wave.
+
+  Compiled-from evidence: power-reel production source 12-tile-field.html
+  (2026-07). Its tile field combines a traveling brush with sinusoidal spatial
+  modulation so neighboring rows resolve in waves instead of a strict scan.
+
+  Use when: a product name, campaign word, or short logo type needs a premium
+  reveal that can read as technical, broadcast, or digital signage.
+
+  Variables (declared in data-composition-variables below):
+    - text (string, default "LAUNCH"): wordmark copy, limited to 12 characters.
+    - columns (number, default 12, range 8 to 14): tile columns. Rows derive
+      proportionally from this one density owner.
+    - waveStagger (number, default 40, range 15 to 50 ms): delay between tiles
+      after they are sorted into the spatial wave order.
+
+  Envelope (fixed IN/OUT, elastic HOLD only, never gsap.timeScale()):
+    IN_BASE  = 4.80s  stage entrance and complete tile wave at max settings
+    HOLD     = elastic = max(0, D - (IN_BASE + OUT_BASE)); deliberately still
+               so the resolved wordmark remains readable
+    OUT_BASE = 0.50s  clean group fade with power2.in
+    If D < IN_BASE + OUT_BASE, IN and OUT scale down together. The per-tile
+    stagger scales with that compressed envelope and is capped inside IN.
+
+  Sync point (fixed offset into IN, never inside elastic HOLD): wave-start at
+  0.20s into an unscaled IN. The offset scales only when the full envelope is
+  compressed.
+
+  Sound cue: none. The distributed wave has no single impact frame, so the
+  primitive does not dispatch hf:sfx.
+
+  Mount contract: this file is a MOUNTABLE SUB-COMPOSITION. A host loads it via
+  data-composition-src, and the runtime clones only <template> contents. Styles,
+  markup, GSAP, and timeline registration therefore live inside <template>.
+  #root has position:absolute; inset:0; container-type:size and no data-width or
+  data-height, so the host owns the box. The composition id is hardcoded as
+  "wordmark-tiles" because mount flattening strips it from the live root.
+  Variables come from window.__hyperframes.getVariables(), which supplies the
+  declared defaults merged with host data-variable-values overrides.
+-->
+<html
+  lang="en"
+  data-composition-variables='[
+    { "id": "text", "type": "string", "role": "content", "label": "Wordmark", "description": "Text resolved by the tile wave.", "default": "LAUNCH", "maxLength": 12 },
+    { "id": "columns", "type": "number", "role": "layout", "label": "Columns", "description": "Number of columns in the wordmark tile grid.", "default": 12, "min": 8, "max": 14, "step": 1 },
+    { "id": "waveStagger", "type": "number", "role": "motion", "label": "Wave stagger", "description": "Delay between tile reveals in spatial wave order.", "default": 40, "min": 15, "max": 50, "step": 1, "unit": "ms" }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Wordmark Tiles</title>
+    <!-- Metadata only. The mount loader reads variable declarations from
+         <html>, then discards everything outside <template>. -->
+  </head>
+  <body>
+    <template>
+      <div
+        id="root"
+        data-composition-id="wordmark-tiles"
+        data-start="0"
+        data-duration="6.5"
+        data-fps="30"
+      >
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          /* Root fills the host box. Internal layout uses only cqw/cqh, and
+             every painted color is owned by the host theme tokens. */
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            color: var(--fg);
+            font-family: var(--font-body);
+          }
+
+          .wt-clip {
+            width: 100%;
+            height: 100%;
+            display: grid;
+            place-items: center;
+            overflow: hidden;
+            background: var(--bg);
+          }
+
+          .wt-stage {
+            width: 86cqw;
+            height: 48cqh;
+            position: relative;
+            opacity: 0;
+          }
+
+          /* EDIT ZONE: stage proportions above and tile line weight below are
+             the visual density controls. The public columns knob owns the grid
+             count, and no second density decision exists in CSS. */
+          .wt-grid {
+            width: 100%;
+            height: 100%;
+            display: grid;
+            grid-template-columns: repeat(var(--wt-columns), minmax(0, 1fr));
+            grid-template-rows: repeat(var(--wt-rows), minmax(0, 1fr));
+            overflow: hidden;
+            border: min(0.12cqw, 0.22cqh) solid var(--border);
+            border-radius: var(--radius);
+            background: var(--surface);
+          }
+
+          .wt-tile {
+            position: relative;
+            min-width: 0;
+            min-height: 0;
+            overflow: hidden;
+            box-shadow: inset 0 0 0 min(0.08cqw, 0.14cqh) var(--border);
+            background: var(--surface);
+          }
+
+          .wt-noise,
+          .wt-resolved {
+            position: absolute;
+            inset: 0;
+            display: block;
+            transform-origin: center;
+          }
+
+          .wt-noise-a {
+            background: color-mix(in srgb, var(--surface) 64%, var(--muted));
+          }
+
+          .wt-noise-b {
+            background: color-mix(in srgb, var(--surface) 58%, var(--brand));
+          }
+
+          .wt-noise-c {
+            background: color-mix(in srgb, var(--surface) 56%, var(--accent));
+          }
+
+          .wt-resolved {
+            overflow: hidden;
+            background: color-mix(in srgb, var(--surface) 92%, var(--brand));
+          }
+
+          /* Every tile contains one crop of the same stable wordmark surface.
+             JS computes only the crop offsets from the canonical grid shape. */
+          .wt-fragment {
+            position: absolute;
+            left: var(--wt-fragment-x);
+            top: var(--wt-fragment-y);
+            width: 86cqw;
+            height: 48cqh;
+            display: grid;
+            place-items: center;
+            color: var(--fg);
+            font-family: var(--font-display);
+            font-size: var(--wt-font-size);
+            font-weight: 800;
+            line-height: 1;
+            letter-spacing: -0.035em;
+            text-align: center;
+            text-transform: uppercase;
+            white-space: nowrap;
+          }
+        </style>
+
+        <div
+          id="wordmark-tiles-clip"
+          class="wt-clip clip"
+          data-start="0"
+          data-duration="6.5"
+          data-track-index="0"
+        >
+          <div class="wt-stage">
+            <div class="wt-grid" role="img" aria-label="LAUNCH"></div>
+          </div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var root = document.getElementById("root");
+            var compositionId = "wordmark-tiles";
+            var stage = root.querySelector(".wt-stage");
+            var grid = root.querySelector(".wt-grid");
+
+            // EDIT ZONE: declarations above and clamped reads below are the
+            // single source of truth for the three public variables.
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            var text = vars.text == null ? "LAUNCH" : String(vars.text).trim().slice(0, 12);
+            if (text.length === 0) text = "LAUNCH";
+
+            var rawColumns = Number(vars.columns);
+            var columns = Number.isFinite(rawColumns) ? Math.round(rawColumns) : 12;
+            columns = Math.max(8, Math.min(14, columns));
+
+            var rawWaveStagger = Number(vars.waveStagger);
+            var waveStaggerMs = Number.isFinite(rawWaveStagger) ? rawWaveStagger : 40;
+            waveStaggerMs = Math.max(15, Math.min(50, waveStaggerMs));
+
+            // INVARIANT: rows derive only from columns. This keeps one density
+            // owner and gives the 86:48 stage near-square tiles at every value.
+            var rows = Math.max(4, Math.round((columns * 5) / 12));
+            var tileCount = columns * rows;
+            var fontSize = Math.max(7, Math.min(19, 86 / Math.max(4, text.length * 0.62)));
+
+            grid.style.setProperty("--wt-columns", String(columns));
+            grid.style.setProperty("--wt-rows", String(rows));
+            grid.style.setProperty("--wt-font-size", String(fontSize) + "cqw");
+            grid.setAttribute("aria-label", text);
+
+            // Fixed-seed LCG. Noise faces vary, while every rebuild with the
+            // same variables produces the same tile field and wave order.
+            var seed = 0x57a7c1e;
+            function seededUnit() {
+              seed = (Math.imul(seed, 1664525) + 1013904223) >>> 0;
+              return seed / 4294967296;
+            }
+
+            var fragment = document.createDocumentFragment();
+            var tiles = [];
+            for (var index = 0; index < tileCount; index += 1) {
+              var row = Math.floor(index / columns);
+              var column = index % columns;
+              var tile = document.createElement("span");
+              var noise = document.createElement("span");
+              var resolved = document.createElement("span");
+              var wordmark = document.createElement("span");
+              var noiseVariant = 1 + Math.floor(seededUnit() * 3);
+
+              tile.className = "wt-tile";
+              tile.setAttribute("aria-hidden", "true");
+              tile.dataset.waveRank = String(
+                column + row * 0.68 + Math.sin(row * 1.7 + column * 0.42) * 2.15,
+              );
+
+              noise.className = "wt-noise wt-noise-" + ["a", "b", "c"][noiseVariant - 1];
+              noise.dataset.startOpacity = String(0.72 + seededUnit() * 0.28);
+
+              resolved.className = "wt-resolved";
+              wordmark.className = "wt-fragment";
+              wordmark.textContent = text;
+              wordmark.style.setProperty(
+                "--wt-fragment-x",
+                String((-86 * column) / columns) + "cqw",
+              );
+              wordmark.style.setProperty("--wt-fragment-y", String((-48 * row) / rows) + "cqh");
+
+              resolved.appendChild(wordmark);
+              tile.appendChild(resolved);
+              tile.appendChild(noise);
+              fragment.appendChild(tile);
+              tiles.push(tile);
+            }
+            grid.replaceChildren(fragment);
+
+            // The source mechanic combines travel with spatial sine waves.
+            // Sorting by the stored rank creates the same rolling behavior,
+            // including row reversals and pockets that lead adjacent columns.
+            var waveTiles = tiles.slice().sort(function (a, b) {
+              return Number(a.dataset.waveRank) - Number(b.dataset.waveRank);
+            });
+            var resolvedByWave = waveTiles.map(function (tile) {
+              return tile.querySelector(".wt-resolved");
+            });
+            var noiseByWave = waveTiles.map(function (tile) {
+              return tile.querySelector(".wt-noise");
+            });
+
+            // RETIME RANGE: these five base values own global pacing. HOLD is
+            // the only elastic phase, and the reveal never exceeds IN.
+            var IN_BASE = 4.8;
+            var OUT_BASE = 0.5;
+            var STAGE_IN_BASE = 0.38;
+            var WAVE_START_BASE = 0.2;
+            var TILE_DURATION_BASE = 0.5;
+
+            var duration = Math.max(0.001, parseFloat(root.dataset.duration || "6.5"));
+            var totalBase = IN_BASE + OUT_BASE;
+            var scale = duration < totalBase ? duration / totalBase : 1;
+            var IN = IN_BASE * scale;
+            var OUT = OUT_BASE * scale;
+            var HOLD = Math.max(0, duration - (IN + OUT));
+            var OUT_START = IN + HOLD;
+            var STAGE_IN = STAGE_IN_BASE * scale;
+            var WAVE_START = WAVE_START_BASE * scale;
+            var TILE_DURATION = TILE_DURATION_BASE * scale;
+            var maxStep = Math.max(
+              0,
+              (IN - WAVE_START - TILE_DURATION) / Math.max(1, tileCount - 1),
+            );
+            var STAGGER_SECONDS = Math.min((waveStaggerMs / 1000) * scale, maxStep);
+
+            gsap.set(stage, { opacity: 0 });
+            gsap.set(resolvedByWave, { opacity: 0, scale: 0.82 });
+            gsap.set(noiseByWave, {
+              opacity: function (_index, element) {
+                return Number(element.dataset.startOpacity);
+              },
+              scale: 1,
+            });
+
+            var timeline = gsap.timeline({ paused: true });
+
+            timeline.to(stage, { opacity: 1, duration: STAGE_IN, ease: "power2.out" }, 0);
+
+            // IN: each tile resolves with --ease-standard's GSAP owner,
+            // power2.out. The spatial rank supplies wave order to the stagger.
+            timeline.to(
+              resolvedByWave,
+              {
+                opacity: 1,
+                scale: 1,
+                duration: TILE_DURATION,
+                ease: "power2.out",
+                stagger: { each: STAGGER_SECONDS, from: "start" },
+              },
+              WAVE_START,
+            );
+            timeline.to(
+              noiseByWave,
+              {
+                opacity: 0,
+                scale: 1.18,
+                duration: TILE_DURATION,
+                ease: "power2.out",
+                stagger: { each: STAGGER_SECONDS, from: "start" },
+              },
+              WAVE_START,
+            );
+
+            // HOLD is deliberately still. OUT uses the catalog exit ease.
+            timeline.to(stage, { opacity: 0, duration: OUT, ease: "power2.in" }, OUT_START);
+
+            timeline.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines[compositionId] = timeline;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/components/x-follow-card/demo.html b/registry/components/x-follow-card/demo.html
new file mode 100644
index 0000000000..108c309f58
--- /dev/null
+++ b/registry/components/x-follow-card/demo.html
@@ -0,0 +1,150 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>X Follow Card - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #fafafa;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+        /* ponytail: scale wrapper (not a GSAP target) to fill ~65% of 1920px frame */
+        transform: scale(1.9);
+        transform-origin: center center;
+      }
+      .hf-remocn-x-follow-card {
+        --hf-accent: var(--accent, #f8fafc);
+        --hf-ink: #111827;
+        --hf-l1: rgba(255, 255, 255, 0.72);
+        --hf-l2: rgba(255, 255, 255, 0.45);
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-x-follow-card {
+        width: 700px;
+        border-radius: 30px;
+        padding: 34px;
+        background: #0f172a;
+        color: #fff;
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+      }
+      .hf-remocn-x-follow-card header {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+      }
+      .hf-remocn-x-follow-card .avatar {
+        width: 70px;
+        height: 70px;
+        border-radius: 22px;
+        background: var(--hf-l1);
+      }
+      .hf-remocn-x-follow-card h3 {
+        margin: 0;
+        font-size: 36px;
+        letter-spacing: -0.04em;
+      }
+      .hf-remocn-x-follow-card p {
+        color: #94a3b8;
+        margin: 4px 0 0;
+        font-size: 18px;
+      }
+      .hf-remocn-x-follow-card .stat {
+        margin-top: 30px;
+        font-size: 82px;
+        font-weight: 900;
+        letter-spacing: -0.08em;
+        transform: translateY(var(--hf-stat-y, 0px));
+      }
+      .hf-remocn-x-follow-card .avatars {
+        display: flex;
+        margin-top: 18px;
+      }
+      .hf-remocn-x-follow-card .avatars span {
+        width: 46px;
+        height: 46px;
+        border-radius: 999px;
+        border: 3px solid #0f172a;
+        margin-left: -10px;
+        background: var(--c);
+        opacity: var(--hf-avatar-opacity, 1);
+        transform: translateY(var(--hf-avatar-y, 0px));
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="x-follow-card-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-x-follow-card">
+          <header>
+            <div class="avatar"></div>
+            <div>
+              <h3>X Follow Card</h3>
+              <p>A social follow card with avatar, handle, and follower motion.</p>
+            </div>
+          </header>
+          <div class="stat">30.6K</div>
+          <div class="avatars">
+            <span style="--c: var(--hf-l1)"></span><span style="--c: var(--hf-l2)"></span
+            ><span style="--c: var(--hf-l2)"></span><span style="--c: var(--hf-l2)"></span
+            ><span style="--c: var(--hf-l2)"></span><span style="--c: var(--hf-l2)"></span>
+          </div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-x-follow-card .stat",
+          { "--hf-stat-y": "28px", opacity: 0 },
+          { "--hf-stat-y": "0px", opacity: 1, duration: 0.46, ease: "back.out(1.6)" },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-x-follow-card .avatars span",
+          { "--hf-avatar-y": "18px", "--hf-avatar-opacity": 0 },
+          {
+            "--hf-avatar-y": "0px",
+            "--hf-avatar-opacity": 1,
+            duration: 0.28,
+            stagger: 0.05,
+            ease: "power2.out",
+          },
+          startTime + 0.22,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["x-follow-card-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/x-follow-card/registry-item.json b/registry/components/x-follow-card/registry-item.json
new file mode 100644
index 0000000000..e8ba202ab8
--- /dev/null
+++ b/registry/components/x-follow-card/registry-item.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "x-follow-card",
+  "type": "hyperframes:component",
+  "title": "X Follow Card",
+  "description": "A social follow card with avatar, handle, and follower motion.",
+  "tags": ["social-overlay", "remocn-port"],
+  "files": [
+    {
+      "path": "x-follow-card.html",
+      "target": "compositions/components/x-follow-card.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/x-follow-card.png"
+  }
+}
diff --git a/registry/components/x-follow-card/x-follow-card.html b/registry/components/x-follow-card/x-follow-card.html
new file mode 100644
index 0000000000..cbe2398301
--- /dev/null
+++ b/registry/components/x-follow-card/x-follow-card.html
@@ -0,0 +1,89 @@
+<!--
+  X Follow Card - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-x-follow-card">
+  <header>
+    <div class="avatar"></div>
+    <div>
+      <h3>X Follow Card</h3>
+      <p>A social follow card with avatar, handle, and follower motion.</p>
+    </div>
+  </header>
+  <div class="stat">30.6K</div>
+  <div class="avatars">
+    <span style="--c: var(--hf-l1)"></span><span style="--c: var(--hf-l2)"></span
+    ><span style="--c: var(--hf-l2)"></span><span style="--c: var(--hf-l2)"></span
+    ><span style="--c: var(--hf-l2)"></span><span style="--c: var(--hf-l2)"></span>
+  </div>
+</div>
+
+<style>
+  .hf-remocn-x-follow-card {
+    --hf-accent: var(--accent, #f8fafc);
+    --hf-ink: #111827;
+    --hf-l1: rgba(255, 255, 255, 0.72);
+    --hf-l2: rgba(255, 255, 255, 0.45);
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-x-follow-card {
+    width: 700px;
+    border-radius: 30px;
+    padding: 34px;
+    background: #0f172a;
+    color: #fff;
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+  }
+  .hf-remocn-x-follow-card header {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+  }
+  .hf-remocn-x-follow-card .avatar {
+    width: 70px;
+    height: 70px;
+    border-radius: 22px;
+    background: var(--hf-l1);
+  }
+  .hf-remocn-x-follow-card h3 {
+    margin: 0;
+    font-size: 36px;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-x-follow-card p {
+    color: #94a3b8;
+    margin: 4px 0 0;
+  }
+  .hf-remocn-x-follow-card .stat {
+    margin-top: 30px;
+    font-size: 82px;
+    font-weight: 900;
+    letter-spacing: -0.08em;
+    transform: translateY(var(--hf-stat-y, 0px));
+  }
+  .hf-remocn-x-follow-card .avatars {
+    display: flex;
+    margin-top: 18px;
+  }
+  .hf-remocn-x-follow-card .avatars span {
+    width: 46px;
+    height: 46px;
+    border-radius: 999px;
+    border: 3px solid #0f172a;
+    margin-left: -10px;
+    background: var(--c);
+    opacity: var(--hf-avatar-opacity, 1);
+    transform: translateY(var(--hf-avatar-y, 0px));
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-x-follow-card .stat', { '--hf-stat-y': '28px', opacity: 0 }, { '--hf-stat-y': '0px', opacity: 1, duration: 0.46, ease: 'back.out(1.6)' }, startTime); tl.fromTo('.hf-remocn-x-follow-card .avatars span', { '--hf-avatar-y': '18px', '--hf-avatar-opacity': 0 }, { '--hf-avatar-y': '0px', '--hf-avatar-opacity': 1, duration: 0.28, stagger: 0.05, ease: 'power2.out' }, startTime + 0.22);
+-->
diff --git a/registry/components/yt-screen-warp/demo.html b/registry/components/yt-screen-warp/demo.html
index 8fff71cf48..b1488e7062 100644
--- a/registry/components/yt-screen-warp/demo.html
+++ b/registry/components/yt-screen-warp/demo.html
@@ -54,7 +54,12 @@
       #yt-sw-fill {
         position: absolute;
         inset: 0;
-        background: linear-gradient(150deg, #ff8fb8 0%, #7d5cff 60%, #2a7fff 100%);
+        /* Placeholder footage: L3 of the ink over the dark ground, plus a 3px
+           achromatic hatch so the plate reads as a media surface, not an empty box. */
+        background:
+          repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 3px),
+          rgba(255, 255, 255, 0.18);
+        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
         display: flex;
         align-items: center;
         justify-content: center;
diff --git a/registry/components/yt-screen-warp/yt-screen-warp.html b/registry/components/yt-screen-warp/yt-screen-warp.html
index 1c362a300a..24a71574ee 100644
--- a/registry/components/yt-screen-warp/yt-screen-warp.html
+++ b/registry/components/yt-screen-warp/yt-screen-warp.html
@@ -51,7 +51,12 @@
       #yt-sw-fill {
         position: absolute;
         inset: 0;
-        background: linear-gradient(150deg, #ff8fb8 0%, #7d5cff 60%, #2a7fff 100%);
+        /* Placeholder footage: L3 of the ink over the dark ground, plus a 3px
+           achromatic hatch so the plate reads as a media surface, not an empty box. */
+        background:
+          repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 3px),
+          rgba(255, 255, 255, 0.18);
+        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
         display: flex;
         align-items: center;
         justify-content: center;
diff --git a/registry/components/zoom-through-transition/demo.html b/registry/components/zoom-through-transition/demo.html
new file mode 100644
index 0000000000..11a352ea1b
--- /dev/null
+++ b/registry/components/zoom-through-transition/demo.html
@@ -0,0 +1,174 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Zoom Through Transition - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+        /* ponytail: scale non-animated wrapper to fill ~65% of 1920×1080 */
+        transform: scale(1.7);
+      }
+      .hf-remocn-zoom-through-transition {
+        --hf-accent: var(--accent, rgba(255, 255, 255, 0.28));
+        --hf-l1: rgba(255, 255, 255, 0.72);
+        --hf-l3: rgba(255, 255, 255, 0.18);
+        --hf-l4: rgba(255, 255, 255, 0.08);
+        --hf-hair: rgba(255, 255, 255, 0.14);
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-zoom-through-transition {
+        position: relative;
+        width: 760px;
+        height: 428px;
+        overflow: hidden;
+        border-radius: 30px;
+        background: #111827;
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+      }
+      .hf-remocn-zoom-through-transition .scene {
+        position: absolute;
+        inset: 0;
+        display: grid;
+        place-items: center;
+        font-weight: 900;
+        font-size: 58px;
+        letter-spacing: -0.05em;
+        color: #fff;
+      }
+      .hf-remocn-zoom-through-transition .from {
+        background:
+          repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 4px),
+          var(--hf-l4);
+        transform: translate(var(--hf-from-x, 0px), var(--hf-from-y, 0px))
+          scale(var(--hf-from-scale, 1));
+        filter: blur(var(--hf-from-blur, 0px));
+      }
+      .hf-remocn-zoom-through-transition .to {
+        background:
+          repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 4px),
+          var(--hf-l3);
+        box-shadow: inset 0 0 0 2px var(--hf-accent);
+        transform: translate(var(--hf-to-x, 0px), var(--hf-to-y, 0px)) scale(var(--hf-to-scale, 1));
+        clip-path: inset(
+          var(--hf-clip-top, 0%) var(--hf-clip-right, 100%) var(--hf-clip-bottom, 0%)
+            var(--hf-clip-left, 0%)
+        );
+      }
+      .hf-remocn-zoom-through-transition .fx {
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
+        mix-blend-mode: screen;
+        transform: translateX(var(--hf-fx-x, -110%));
+      }
+      .hf-remocn-zoom-through-transition .rgb {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        opacity: var(--hf-rgb-opacity, 0);
+        background: linear-gradient(
+          90deg,
+          rgba(239, 68, 68, 0.35),
+          transparent,
+          rgba(34, 211, 238, 0.35)
+        );
+        transform: translateX(var(--hf-rgb-x, 0px));
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="zoom-through-transition-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-zoom-through-transition">
+          <div class="scene from">Before</div>
+          <div class="scene to">Zoom Through Transition</div>
+          <div class="fx"></div>
+          <div class="rgb"></div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-zoom-through-transition .to",
+          { "--hf-clip-right": "100%", "--hf-to-x": "60px", "--hf-to-scale": 1.04 },
+          {
+            "--hf-clip-right": "0%",
+            "--hf-to-x": "0px",
+            "--hf-to-scale": 1,
+            duration: 0.9,
+            ease: "power3.inOut",
+          },
+          startTime,
+        );
+        tl.to(
+          ".hf-remocn-zoom-through-transition .from",
+          {
+            "--hf-from-x": "-70px",
+            "--hf-from-scale": 0.96,
+            "--hf-from-blur": "5px",
+            duration: 0.9,
+            ease: "power3.inOut",
+          },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-zoom-through-transition .fx",
+          { "--hf-fx-x": "-110%" },
+          { "--hf-fx-x": "110%", duration: 0.58, ease: "power2.inOut" },
+          startTime + 0.18,
+        );
+        tl.fromTo(
+          ".hf-remocn-zoom-through-transition .rgb",
+          { "--hf-rgb-opacity": 0, "--hf-rgb-x": "-16px" },
+          {
+            "--hf-rgb-opacity": 1,
+            "--hf-rgb-x": "16px",
+            repeat: 3,
+            yoyo: true,
+            duration: 0.07,
+            ease: "steps(1)",
+          },
+          startTime + 0.32,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["zoom-through-transition-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/zoom-through-transition/registry-item.json b/registry/components/zoom-through-transition/registry-item.json
new file mode 100644
index 0000000000..06bdf7322d
--- /dev/null
+++ b/registry/components/zoom-through-transition/registry-item.json
@@ -0,0 +1,80 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "zoom-through-transition",
+  "type": "hyperframes:component",
+  "title": "Zoom Through Transition",
+  "description": "A transition that zooms through a focal card into the next scene.",
+  "tags": ["transition-primitive", "remocn-port"],
+  "variables": [
+    {
+      "id": "from-label",
+      "type": "string",
+      "role": "content",
+      "label": "Outgoing label",
+      "description": "Caption on the outgoing scene, the one on screen when the transition starts.",
+      "default": "Before"
+    },
+    {
+      "id": "to-label",
+      "type": "string",
+      "role": "content",
+      "label": "Incoming label",
+      "description": "Caption on the incoming scene, the one the timeline wipes into frame.",
+      "default": "Zoom Through Transition"
+    },
+    {
+      "id": "depth",
+      "type": "enum",
+      "role": "motion",
+      "label": "Depth",
+      "description": "Multiplies how far both scenes travel and how hard the outgoing one blurs, so the push covers a shorter or longer run in the same time.",
+      "default": "standard",
+      "options": [
+        {
+          "value": "close",
+          "label": "Close"
+        },
+        {
+          "value": "standard",
+          "label": "Standard"
+        },
+        {
+          "value": "far",
+          "label": "Far"
+        }
+      ]
+    },
+    {
+      "id": "accent",
+      "type": "enum",
+      "role": "style",
+      "label": "Accent",
+      "description": "Theme token for the ring marking the incoming scene. Blue rides --accent, green --brand, violet --accent-2; each falls back to a neutral hairline.",
+      "default": "blue",
+      "options": [
+        {
+          "value": "blue",
+          "label": "Blue"
+        },
+        {
+          "value": "green",
+          "label": "Green"
+        },
+        {
+          "value": "violet",
+          "label": "Violet"
+        }
+      ]
+    }
+  ],
+  "files": [
+    {
+      "path": "zoom-through-transition.html",
+      "target": "compositions/components/zoom-through-transition.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/zoom-through-transition.png"
+  }
+}
diff --git a/registry/components/zoom-through-transition/zoom-through-transition.html b/registry/components/zoom-through-transition/zoom-through-transition.html
new file mode 100644
index 0000000000..3c85c55336
--- /dev/null
+++ b/registry/components/zoom-through-transition/zoom-through-transition.html
@@ -0,0 +1,284 @@
+<!doctype html>
+<!--
+  Zoom Through Transition - a scene push that wipes the incoming scene through
+  the outgoing one while the outgoing one drifts back and blurs.
+
+  Mount contract: MOUNTABLE SUB-COMPOSITION. The runtime clones only <template>
+  contents; #root fills the host box (inset: 0, container-type: size), and the
+  file registers one paused timeline under the literal "zoom-through-transition"
+  key. Variables come from window.__hyperframes.getVariables().
+
+  This file owns its motion. It previously shipped as a fragment whose only
+  executable timeline lived in demo.html, so an installed copy rendered the
+  finished pose and never moved.
+
+  Variables (declared in data-composition-variables below):
+    - from-label (string, default "Before"): caption on the outgoing scene.
+    - to-label (string, default "Zoom Through Transition"): caption on the
+      incoming scene, clipped out of frame until the wipe brings it in.
+    - depth (close | standard | far, default standard): multiplies how far both
+      scenes travel and how hard the outgoing one blurs. Every input it
+      multiplies is zero at rest, so it collapses to the shipped pose there. It
+      deliberately leaves the two scale tracks alone: the timeline drives those
+      from their own start values, which a multiplier would distort.
+    - accent (blue | green | violet, default blue): ink of the ring that marks
+      the incoming scene. Both scenes are monochrome placeholder material; the
+      ring is the one accent-coloured element. blue rides --accent, green rides
+      --brand, violet rides --accent-2, and each falls back to a neutral
+      hairline so an unthemed composition renders in black and white.
+
+  Envelope: the push starts at 0.35s (clamped to fit shorter durations), runs
+  0.9s, then holds the incoming scene for whatever is left.
+-->
+<html
+  lang="en"
+  data-composition-id="zoom-through-transition"
+  data-composition-duration="3"
+  data-composition-variables='[
+    { "id": "from-label", "type": "string", "role": "content", "label": "Outgoing label", "description": "Caption on the outgoing scene, the one on screen when the transition starts.", "default": "Before" },
+    { "id": "to-label", "type": "string", "role": "content", "label": "Incoming label", "description": "Caption on the incoming scene, the one the timeline wipes into frame.", "default": "Zoom Through Transition" },
+    { "id": "depth", "type": "enum", "role": "motion", "label": "Depth", "description": "Multiplies how far both scenes travel and how hard the outgoing one blurs, so the push covers a shorter or longer run in the same time.", "default": "standard", "options": [{ "value": "close", "label": "Close" }, { "value": "standard", "label": "Standard" }, { "value": "far", "label": "Far" }] },
+    { "id": "accent", "type": "enum", "role": "style", "label": "Accent", "description": "Theme token for the ring marking the incoming scene. Blue rides --accent, green --brand, violet --accent-2; each falls back to a neutral hairline.", "default": "blue", "options": [{ "value": "blue", "label": "Blue" }, { "value": "green", "label": "Green" }, { "value": "violet", "label": "Violet" }] }
+  ]'
+>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Zoom Through Transition</title>
+  </head>
+  <body>
+    <template>
+      <div id="root" data-composition-id="zoom-through-transition" data-duration="3" data-fps="30">
+        <style>
+          *,
+          *::before,
+          *::after {
+            box-sizing: border-box;
+          }
+
+          /* Root fills the host-owned box; the scenes measure against it. */
+          #root {
+            position: absolute;
+            inset: 0;
+            container-type: size;
+            isolation: isolate;
+            overflow: hidden;
+            background: #111827;
+          }
+
+          .hf-remocn-zoom-through-transition {
+            --hf-accent: var(--accent, rgba(255, 255, 255, 0.28));
+            --hf-l1: rgba(255, 255, 255, 0.72);
+            --hf-l3: rgba(255, 255, 255, 0.18);
+            --hf-l4: rgba(255, 255, 255, 0.08);
+            --hf-hair: rgba(255, 255, 255, 0.14);
+            --hf-ink: #111827;
+            --hf-muted: #6b7280;
+            --hf-surface: #ffffff;
+            color: var(--hf-ink);
+            font-family: Inter, system-ui, sans-serif;
+          }
+          .hf-remocn-zoom-through-transition {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            background: #111827;
+          }
+          .hf-remocn-zoom-through-transition .scene {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            font-weight: 900;
+            font-size: 13.5cqmin;
+            letter-spacing: -0.05em;
+            color: #fff;
+          }
+          .hf-remocn-zoom-through-transition .from {
+            background:
+              repeating-linear-gradient(
+                90deg,
+                rgba(255, 255, 255, 0.04) 0 1px,
+                transparent 1px 4px
+              ),
+              var(--hf-l4);
+            transform: translate(
+                calc(var(--hf-from-x, 0px) * var(--hf-depth, 1)),
+                calc(var(--hf-from-y, 0px) * var(--hf-depth, 1))
+              )
+              scale(var(--hf-from-scale, 1));
+            filter: blur(calc(var(--hf-from-blur, 0px) * var(--hf-depth, 1)));
+          }
+          .hf-remocn-zoom-through-transition .to {
+            background:
+              repeating-linear-gradient(
+                90deg,
+                rgba(255, 255, 255, 0.05) 0 1px,
+                transparent 1px 4px
+              ),
+              var(--hf-l3);
+            box-shadow: inset 0 0 0 2px var(--hf-accent);
+            transform: translate(
+                calc(var(--hf-to-x, 0px) * var(--hf-depth, 1)),
+                calc(var(--hf-to-y, 0px) * var(--hf-depth, 1))
+              )
+              scale(var(--hf-to-scale, 1));
+            clip-path: inset(
+              var(--hf-clip-top, 0%) var(--hf-clip-right, 100%) var(--hf-clip-bottom, 0%)
+                var(--hf-clip-left, 0%)
+            );
+          }
+          .hf-remocn-zoom-through-transition .fx {
+            position: absolute;
+            inset: 0;
+            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
+            mix-blend-mode: screen;
+            transform: translateX(var(--hf-fx-x, -110%));
+          }
+          .hf-remocn-zoom-through-transition .rgb {
+            position: absolute;
+            inset: 0;
+            pointer-events: none;
+            opacity: var(--hf-rgb-opacity, 0);
+            background: linear-gradient(
+              90deg,
+              rgba(239, 68, 68, 0.35),
+              transparent,
+              rgba(34, 211, 238, 0.35)
+            );
+            transform: translateX(var(--hf-rgb-x, 0px));
+          }
+        </style>
+
+        <div class="hf-remocn-zoom-through-transition">
+          >
+          <div class="scene from">Before</div>
+          <div class="scene to">Zoom Through Transition</div>
+          <div class="fx"></div>
+          <div class="rgb"></div>
+        </div>
+
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+          (function () {
+            "use strict";
+
+            var vars =
+              window.__hyperframes && window.__hyperframes.getVariables
+                ? window.__hyperframes.getVariables()
+                : {};
+
+            // Unrecognised overrides return to their declared defaults.
+            var depths = { close: 0.55, standard: 1, far: 1.7 };
+            // Each choice routes to a different contract token so the variable stays
+            // meaningful under a theme rather than collapsing into one themed accent.
+            var HAIRLINE = "rgba(255, 255, 255, 0.28)";
+            var accents = {
+              blue: "var(--accent, " + HAIRLINE + ")",
+              green: "var(--brand, " + HAIRLINE + ")",
+              violet: "var(--accent-2, " + HAIRLINE + ")",
+            };
+
+            function pick(table, value, fallback) {
+              return Object.prototype.hasOwnProperty.call(table, value) ? value : fallback;
+            }
+
+            function label(value) {
+              return typeof value === "string" && value !== "" ? value : null;
+            }
+
+            var depth = depths[pick(depths, vars.depth, "standard")];
+            var accent = accents[pick(accents, vars.accent, "blue")];
+            var fromLabel = label(vars["from-label"]);
+            var toLabel = label(vars["to-label"]);
+
+            var roots = document.querySelectorAll(".hf-remocn-zoom-through-transition");
+            var mountRoot = document.getElementById("root");
+            for (var i = 0; i < roots.length; i += 1) {
+              var root = roots[i];
+              root.style.setProperty("--hf-depth", String(depth));
+              root.style.setProperty("--hf-accent", accent);
+
+              var fromScene = root.querySelector(".from");
+              var toScene = root.querySelector(".to");
+              if (fromLabel !== null && fromScene) {
+                fromScene.textContent = fromLabel;
+              }
+              if (toLabel !== null && toScene) {
+                toScene.textContent = toLabel;
+              }
+            }
+
+            // The motion used to live only in this file's demo page, so an installed
+            // copy rendered the finished pose and never moved. The timeline belongs
+            // with the markup it drives: build it here, paused, and register it under
+            // this composition's own id so the runtime seeks it frame by frame.
+            if (!mountRoot || !window.gsap) return;
+
+            var SELF = ".hf-remocn-zoom-through-transition";
+            var duration = Math.max(0.001, parseFloat(mountRoot.dataset.duration || "3"));
+            // The push reads as a transition only with a beat of the outgoing scene
+            // before it. Clamped so the wipe always lands inside the duration.
+            var PUSH = 0.9;
+            var START = Math.max(0, Math.min(0.35, duration - PUSH));
+
+            var tl = window.gsap.timeline({ paused: true });
+
+            tl.fromTo(
+              SELF + " .to",
+              { "--hf-clip-right": "100%", "--hf-to-x": "60px", "--hf-to-scale": 1.04 },
+              {
+                "--hf-clip-right": "0%",
+                "--hf-to-x": "0px",
+                "--hf-to-scale": 1,
+                duration: PUSH,
+                ease: "power3.inOut",
+              },
+              START,
+            );
+            tl.fromTo(
+              SELF + " .from",
+              { "--hf-from-x": "0px", "--hf-from-scale": 1, "--hf-from-blur": "0px" },
+              {
+                "--hf-from-x": "-70px",
+                "--hf-from-scale": 0.96,
+                "--hf-from-blur": "5px",
+                duration: PUSH,
+                ease: "power3.inOut",
+              },
+              START,
+            );
+            tl.fromTo(
+              SELF + " .fx",
+              { "--hf-fx-x": "-110%" },
+              { "--hf-fx-x": "110%", duration: 0.58, ease: "power2.inOut" },
+              START + 0.18,
+            );
+            // repeat/yoyo resolves from absolute time on every seek, so the strobe is
+            // reproducible at any frame rather than accumulated across ticks.
+            tl.fromTo(
+              SELF + " .rgb",
+              { "--hf-rgb-opacity": 0, "--hf-rgb-x": "-16px" },
+              {
+                "--hf-rgb-opacity": 1,
+                "--hf-rgb-x": "16px",
+                repeat: 3,
+                yoyo: true,
+                duration: 0.07,
+                ease: "steps(1)",
+              },
+              START + 0.32,
+            );
+
+            // HOLD: the incoming scene rests for whatever is left of the duration.
+            tl.set({}, {}, duration);
+
+            tl.seek(0);
+
+            window.__timelines = window.__timelines || {};
+            window.__timelines["zoom-through-transition"] = tl;
+          })();
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
diff --git a/registry/examples/decision-tree/registry-item.json b/registry/examples/decision-tree/registry-item.json
index fe5b1757f3..cfa5812344 100644
--- a/registry/examples/decision-tree/registry-item.json
+++ b/registry/examples/decision-tree/registry-item.json
@@ -8,7 +8,7 @@
     "width": 1920,
     "height": 1080
   },
-  "duration": 15,
+  "duration": 10,
   "files": [
     {
       "path": "compositions/decision_tree.html",
diff --git a/registry/examples/vscode-theme-visualizer/registry-item.json b/registry/examples/vscode-theme-visualizer/registry-item.json
index 0037439eb5..60f199b2a0 100644
--- a/registry/examples/vscode-theme-visualizer/registry-item.json
+++ b/registry/examples/vscode-theme-visualizer/registry-item.json
@@ -4,97 +4,166 @@
   "type": "hyperframes:example",
   "title": "VS Code Theme Visualizer",
   "description": "Faithful VS Code workbench recreation with per-character typing animation across 12 built-in themes. Activity bar, sidebar, tabs, editor, terminal, and status bar — all driven by official theme JSON files.",
-  "tags": ["code", "developer", "showcase", "vscode", "themes"],
   "dimensions": {
     "width": 1920,
     "height": 1080
   },
-  "duration": 132,
+  "duration": 11,
   "files": [
     {
-      "path": "index.html",
-      "target": "index.html",
-      "type": "hyperframes:composition"
+      "path": "assets/background.jpeg",
+      "target": "assets/background.jpeg",
+      "type": "hyperframes:asset"
     },
     {
-      "path": "compositions/dark-2026.html",
-      "target": "compositions/dark-2026.html",
-      "type": "hyperframes:composition"
+      "path": "assets/vscode-sequence-runtime.js",
+      "target": "assets/vscode-sequence-runtime.js",
+      "type": "hyperframes:asset"
     },
     {
-      "path": "compositions/dark-modern.html",
-      "target": "compositions/dark-modern.html",
-      "type": "hyperframes:composition"
+      "path": "assets/vscode-sequence.css",
+      "target": "assets/vscode-sequence.css",
+      "type": "hyperframes:asset"
     },
     {
-      "path": "compositions/dark-plus.html",
-      "target": "compositions/dark-plus.html",
-      "type": "hyperframes:composition"
+      "path": "assets/vscode-theme-registry.js",
+      "target": "assets/vscode-theme-registry.js",
+      "type": "hyperframes:asset"
+    },
+    {
+      "path": "assets/vscode-themes/2026-dark.json",
+      "target": "assets/vscode-themes/2026-dark.json",
+      "type": "hyperframes:asset"
+    },
+    {
+      "path": "assets/vscode-themes/2026-light.json",
+      "target": "assets/vscode-themes/2026-light.json",
+      "type": "hyperframes:asset"
+    },
+    {
+      "path": "assets/vscode-themes/dark_modern.json",
+      "target": "assets/vscode-themes/dark_modern.json",
+      "type": "hyperframes:asset"
+    },
+    {
+      "path": "assets/vscode-themes/dark_plus.json",
+      "target": "assets/vscode-themes/dark_plus.json",
+      "type": "hyperframes:asset"
+    },
+    {
+      "path": "assets/vscode-themes/dark_vs.json",
+      "target": "assets/vscode-themes/dark_vs.json",
+      "type": "hyperframes:asset"
+    },
+    {
+      "path": "assets/vscode-themes/hc_black.json",
+      "target": "assets/vscode-themes/hc_black.json",
+      "type": "hyperframes:asset"
+    },
+    {
+      "path": "assets/vscode-themes/hc_light.json",
+      "target": "assets/vscode-themes/hc_light.json",
+      "type": "hyperframes:asset"
+    },
+    {
+      "path": "assets/vscode-themes/LICENSE",
+      "target": "assets/vscode-themes/LICENSE",
+      "type": "hyperframes:asset"
     },
     {
-      "path": "compositions/high-contrast-light.html",
-      "target": "compositions/high-contrast-light.html",
+      "path": "assets/vscode-themes/light_modern.json",
+      "target": "assets/vscode-themes/light_modern.json",
+      "type": "hyperframes:asset"
+    },
+    {
+      "path": "assets/vscode-themes/light_plus.json",
+      "target": "assets/vscode-themes/light_plus.json",
+      "type": "hyperframes:asset"
+    },
+    {
+      "path": "assets/vscode-themes/light_vs.json",
+      "target": "assets/vscode-themes/light_vs.json",
+      "type": "hyperframes:asset"
+    },
+    {
+      "path": "assets/vscode-themes/monokai-color-theme.json",
+      "target": "assets/vscode-themes/monokai-color-theme.json",
+      "type": "hyperframes:asset"
+    },
+    {
+      "path": "assets/vscode-themes/solarized-light-color-theme.json",
+      "target": "assets/vscode-themes/solarized-light-color-theme.json",
+      "type": "hyperframes:asset"
+    },
+    {
+      "path": "DESIGN.md",
+      "target": "DESIGN.md",
+      "type": "hyperframes:asset"
+    },
+    {
+      "path": "index.html",
+      "target": "index.html",
       "type": "hyperframes:composition"
     },
     {
-      "path": "compositions/high-contrast.html",
-      "target": "compositions/high-contrast.html",
+      "path": "render-entries/dark-2026.html",
+      "target": "render-entries/dark-2026.html",
       "type": "hyperframes:composition"
     },
     {
-      "path": "compositions/light-2026.html",
-      "target": "compositions/light-2026.html",
+      "path": "render-entries/dark-modern.html",
+      "target": "render-entries/dark-modern.html",
       "type": "hyperframes:composition"
     },
     {
-      "path": "compositions/light-modern.html",
-      "target": "compositions/light-modern.html",
+      "path": "render-entries/dark-plus.html",
+      "target": "render-entries/dark-plus.html",
       "type": "hyperframes:composition"
     },
     {
-      "path": "compositions/light-plus.html",
-      "target": "compositions/light-plus.html",
+      "path": "render-entries/high-contrast-light.html",
+      "target": "render-entries/high-contrast-light.html",
       "type": "hyperframes:composition"
     },
     {
-      "path": "compositions/monokai.html",
-      "target": "compositions/monokai.html",
+      "path": "render-entries/high-contrast.html",
+      "target": "render-entries/high-contrast.html",
       "type": "hyperframes:composition"
     },
     {
-      "path": "compositions/solarized-light.html",
-      "target": "compositions/solarized-light.html",
+      "path": "render-entries/light-2026.html",
+      "target": "render-entries/light-2026.html",
       "type": "hyperframes:composition"
     },
     {
-      "path": "compositions/visual-studio-dark.html",
-      "target": "compositions/visual-studio-dark.html",
+      "path": "render-entries/light-modern.html",
+      "target": "render-entries/light-modern.html",
       "type": "hyperframes:composition"
     },
     {
-      "path": "compositions/visual-studio-light.html",
-      "target": "compositions/visual-studio-light.html",
+      "path": "render-entries/light-plus.html",
+      "target": "render-entries/light-plus.html",
       "type": "hyperframes:composition"
     },
     {
-      "path": "assets/background.jpeg",
-      "target": "assets/background.jpeg",
-      "type": "hyperframes:asset"
+      "path": "render-entries/monokai.html",
+      "target": "render-entries/monokai.html",
+      "type": "hyperframes:composition"
     },
     {
-      "path": "assets/vscode-sequence.css",
-      "target": "assets/vscode-sequence.css",
-      "type": "hyperframes:style"
+      "path": "render-entries/solarized-light.html",
+      "target": "render-entries/solarized-light.html",
+      "type": "hyperframes:composition"
     },
     {
-      "path": "assets/vscode-sequence-runtime.js",
-      "target": "assets/vscode-sequence-runtime.js",
-      "type": "hyperframes:asset"
+      "path": "render-entries/visual-studio-dark.html",
+      "target": "render-entries/visual-studio-dark.html",
+      "type": "hyperframes:composition"
     },
     {
-      "path": "assets/vscode-theme-registry.js",
-      "target": "assets/vscode-theme-registry.js",
-      "type": "hyperframes:asset"
+      "path": "render-entries/visual-studio-light.html",
+      "target": "render-entries/visual-studio-light.html",
+      "type": "hyperframes:composition"
     },
     {
       "path": "scripts/build-compositions.mjs",
@@ -105,11 +174,6 @@
       "path": "scripts/build-theme-registry.mjs",
       "target": "scripts/build-theme-registry.mjs",
       "type": "hyperframes:asset"
-    },
-    {
-      "path": "DESIGN.md",
-      "target": "DESIGN.md",
-      "type": "hyperframes:asset"
     }
   ]
 }
diff --git a/registry/registry.json b/registry/registry.json
index 1681f17adb..839e3143b2 100644
--- a/registry/registry.json
+++ b/registry/registry.json
@@ -2,713 +2,1477 @@
   "$schema": "https://hyperframes.heygen.com/schema/registry.json",
   "name": "hyperframes",
   "homepage": "https://hyperframes.heygen.com",
-  "catalogArtifact": {
-    "revision": "3e0b7c140466db717b69481be5a87e77b1fdec5000b33ca61846ba27e5558238"
-  },
   "items": [
     {
-      "name": "warm-grain",
+      "name": "decision-tree",
       "type": "hyperframes:example"
     },
     {
-      "name": "play-mode",
+      "name": "kinetic-type",
       "type": "hyperframes:example"
     },
     {
-      "name": "swiss-grid",
+      "name": "nyt-graph",
       "type": "hyperframes:example"
     },
     {
-      "name": "vignelli",
+      "name": "play-mode",
       "type": "hyperframes:example"
     },
     {
-      "name": "decision-tree",
+      "name": "product-promo",
       "type": "hyperframes:example"
     },
     {
-      "name": "kinetic-type",
+      "name": "swiss-grid",
       "type": "hyperframes:example"
     },
     {
-      "name": "product-promo",
+      "name": "vignelli",
       "type": "hyperframes:example"
     },
     {
-      "name": "nyt-graph",
+      "name": "vscode-theme-visualizer",
       "type": "hyperframes:example"
     },
     {
-      "name": "data-chart",
-      "type": "hyperframes:block"
+      "name": "warm-grain",
+      "type": "hyperframes:example"
     },
     {
-      "name": "us-map",
+      "name": "app-showcase",
       "type": "hyperframes:block"
     },
     {
-      "name": "us-map-bubble",
+      "name": "apple-money-count",
       "type": "hyperframes:block"
     },
     {
-      "name": "us-map-hex",
+      "name": "bar-chart-race",
       "type": "hyperframes:block"
     },
     {
-      "name": "us-map-flow",
+      "name": "beat-freeze-cut",
       "type": "hyperframes:block"
     },
     {
-      "name": "world-map",
+      "name": "blue-sweater-intro-video",
       "type": "hyperframes:block"
     },
     {
-      "name": "spain-map",
+      "name": "camcorder-hud",
       "type": "hyperframes:block"
     },
     {
-      "name": "flowchart",
+      "name": "camera-dolly-zoom",
       "type": "hyperframes:block"
     },
     {
-      "name": "logo-outro",
+      "name": "chromatic-radial-split",
       "type": "hyperframes:block"
     },
     {
-      "name": "grain-overlay",
-      "type": "hyperframes:component"
+      "name": "cinematic-zoom",
+      "type": "hyperframes:block"
     },
     {
-      "name": "camcorder-hud",
+      "name": "code-3d-extrude",
       "type": "hyperframes:block"
     },
     {
-      "name": "editorial-flash-overlay",
+      "name": "code-diff",
       "type": "hyperframes:block"
     },
     {
-      "name": "organic-light-leak-overlay",
+      "name": "code-highlight",
       "type": "hyperframes:block"
     },
     {
-      "name": "freeze-frame-dressing",
+      "name": "code-morph",
       "type": "hyperframes:block"
     },
     {
-      "name": "shimmer-sweep",
-      "type": "hyperframes:component"
+      "name": "code-particle-assemble",
+      "type": "hyperframes:block"
     },
     {
-      "name": "grid-pixelate-wipe",
-      "type": "hyperframes:component"
+      "name": "code-scroll",
+      "type": "hyperframes:block"
     },
     {
-      "name": "motion-blur",
-      "type": "hyperframes:component"
+      "name": "code-shader-dissolve",
+      "type": "hyperframes:block"
     },
     {
-      "name": "texture-mask-text",
-      "type": "hyperframes:component"
+      "name": "code-snippet-apple-terminal-basic",
+      "type": "hyperframes:block"
     },
     {
-      "name": "vignette",
-      "type": "hyperframes:component"
+      "name": "code-snippet-apple-terminal-clear-dark",
+      "type": "hyperframes:block"
     },
     {
-      "name": "caption-pill-karaoke",
-      "type": "hyperframes:component"
+      "name": "code-snippet-apple-terminal-clear-light",
+      "type": "hyperframes:block"
     },
     {
-      "name": "caption-neon-accent",
-      "type": "hyperframes:component"
+      "name": "code-snippet-apple-terminal-grass",
+      "type": "hyperframes:block"
     },
     {
-      "name": "caption-weight-shift",
-      "type": "hyperframes:component"
+      "name": "code-snippet-apple-terminal-homebrew",
+      "type": "hyperframes:block"
     },
     {
-      "name": "caption-emoji-pop",
-      "type": "hyperframes:component"
+      "name": "code-snippet-apple-terminal-man-page",
+      "type": "hyperframes:block"
     },
     {
-      "name": "caption-editorial-emphasis",
-      "type": "hyperframes:component"
+      "name": "code-snippet-apple-terminal-novel",
+      "type": "hyperframes:block"
     },
     {
-      "name": "caption-parallax-layers",
-      "type": "hyperframes:component"
+      "name": "code-snippet-apple-terminal-ocean",
+      "type": "hyperframes:block"
     },
     {
-      "name": "caption-glitch-rgb",
-      "type": "hyperframes:component"
+      "name": "code-snippet-apple-terminal-pro",
+      "type": "hyperframes:block"
     },
     {
-      "name": "caption-matrix-decode",
-      "type": "hyperframes:component"
+      "name": "code-snippet-apple-terminal-red-sands",
+      "type": "hyperframes:block"
     },
     {
-      "name": "caption-particle-burst",
-      "type": "hyperframes:component"
+      "name": "code-snippet-apple-terminal-silver-aerogel",
+      "type": "hyperframes:block"
     },
     {
-      "name": "caption-texture",
-      "type": "hyperframes:component"
+      "name": "code-snippet-apple-terminal-solid-colors",
+      "type": "hyperframes:block"
     },
     {
-      "name": "caption-clip-wipe",
-      "type": "hyperframes:component"
+      "name": "code-snippet-dark-2026",
+      "type": "hyperframes:block"
     },
     {
-      "name": "caption-kinetic-slam",
-      "type": "hyperframes:component"
+      "name": "code-snippet-dark-modern",
+      "type": "hyperframes:block"
     },
     {
-      "name": "caption-gradient-fill",
-      "type": "hyperframes:component"
+      "name": "code-snippet-dark-plus",
+      "type": "hyperframes:block"
     },
     {
-      "name": "caption-neon-glow",
-      "type": "hyperframes:component"
+      "name": "code-snippet-flight",
+      "type": "hyperframes:block"
     },
     {
-      "name": "caption-highlight",
-      "type": "hyperframes:component"
+      "name": "code-snippet-high-contrast",
+      "type": "hyperframes:block"
     },
     {
-      "name": "caption-blend-difference",
-      "type": "hyperframes:component"
+      "name": "code-snippet-high-contrast-light",
+      "type": "hyperframes:block"
     },
     {
-      "name": "morph-text",
-      "type": "hyperframes:component"
+      "name": "code-snippet-light-2026",
+      "type": "hyperframes:block"
     },
     {
-      "name": "instagram-follow",
+      "name": "code-snippet-light-modern",
       "type": "hyperframes:block"
     },
     {
-      "name": "tiktok-follow",
+      "name": "code-snippet-light-plus",
       "type": "hyperframes:block"
     },
     {
-      "name": "yt-lower-third",
+      "name": "code-snippet-monokai",
       "type": "hyperframes:block"
     },
     {
-      "name": "news-ticker",
+      "name": "code-snippet-solarized-light",
       "type": "hyperframes:block"
     },
     {
-      "name": "lt-accent-underline",
+      "name": "code-snippet-visual-studio-dark",
       "type": "hyperframes:block"
     },
     {
-      "name": "lt-bold-block",
+      "name": "code-snippet-visual-studio-light",
       "type": "hyperframes:block"
     },
     {
-      "name": "lt-clean-bar",
+      "name": "code-typing",
       "type": "hyperframes:block"
     },
     {
-      "name": "lt-color-block",
+      "name": "cosmic-orb",
       "type": "hyperframes:block"
     },
     {
-      "name": "lt-dark-card",
+      "name": "cross-warp-morph",
       "type": "hyperframes:block"
     },
     {
-      "name": "lt-kicker-name",
+      "name": "data-chart",
       "type": "hyperframes:block"
     },
     {
-      "name": "lt-mask-reveal",
+      "name": "domain-warp-dissolve",
       "type": "hyperframes:block"
     },
     {
-      "name": "lt-side-rule",
+      "name": "editorial-flash-overlay",
       "type": "hyperframes:block"
     },
     {
-      "name": "lt-soft-pill",
+      "name": "flash-through-white",
       "type": "hyperframes:block"
     },
     {
-      "name": "lt-stack-bars",
+      "name": "flowchart",
       "type": "hyperframes:block"
     },
     {
-      "name": "lower-third-bild",
+      "name": "flowchart-vertical",
       "type": "hyperframes:block"
     },
     {
-      "name": "x-post",
+      "name": "freeze-frame-dressing",
       "type": "hyperframes:block"
     },
     {
-      "name": "reddit-post",
+      "name": "gallery-tunnel",
       "type": "hyperframes:block"
     },
     {
-      "name": "spotify-card",
+      "name": "glitch",
       "type": "hyperframes:block"
     },
     {
-      "name": "macos-notification",
+      "name": "gravitational-lens",
       "type": "hyperframes:block"
     },
     {
-      "name": "app-showcase",
+      "name": "halftone-field",
       "type": "hyperframes:block"
     },
     {
-      "name": "north-korea-locked-down",
+      "name": "hw-frame",
       "type": "hyperframes:block"
     },
     {
-      "name": "apple-money-count",
+      "name": "hw-path-text",
       "type": "hyperframes:block"
     },
     {
-      "name": "vpn-youtube-spot",
+      "name": "hw-pipeline",
       "type": "hyperframes:block"
     },
     {
-      "name": "blue-sweater-intro-video",
+      "name": "hw-scribble-transition",
       "type": "hyperframes:block"
     },
     {
-      "name": "nyc-paris-flight",
+      "name": "hw-text-cloud",
       "type": "hyperframes:block"
     },
     {
-      "name": "ui-3d-reveal",
+      "name": "hw-title",
       "type": "hyperframes:block"
     },
     {
-      "name": "domain-warp-dissolve",
+      "name": "instagram-follow",
       "type": "hyperframes:block"
     },
     {
-      "name": "ridged-burn",
+      "name": "ios26-liquid-glass",
       "type": "hyperframes:block"
     },
     {
-      "name": "whip-pan",
+      "name": "light-leak",
       "type": "hyperframes:block"
     },
     {
-      "name": "sdf-iris",
+      "name": "liquid-glass-context-menu",
       "type": "hyperframes:block"
     },
     {
-      "name": "ripple-waves",
+      "name": "liquid-glass-media-controls",
       "type": "hyperframes:block"
     },
     {
-      "name": "gravitational-lens",
+      "name": "liquid-glass-notification",
       "type": "hyperframes:block"
     },
     {
-      "name": "cinematic-zoom",
+      "name": "liquid-glass-widgets",
       "type": "hyperframes:block"
     },
     {
-      "name": "chromatic-radial-split",
+      "name": "logo-outro",
       "type": "hyperframes:block"
     },
     {
-      "name": "glitch",
+      "name": "lower-third-bild",
       "type": "hyperframes:block"
     },
     {
-      "name": "swirl-vortex",
+      "name": "lt-accent-underline",
       "type": "hyperframes:block"
     },
     {
-      "name": "thermal-distortion",
+      "name": "lt-bold-block",
       "type": "hyperframes:block"
     },
     {
-      "name": "flash-through-white",
+      "name": "lt-clean-bar",
       "type": "hyperframes:block"
     },
     {
-      "name": "cross-warp-morph",
+      "name": "lt-color-block",
       "type": "hyperframes:block"
     },
     {
-      "name": "light-leak",
+      "name": "lt-dark-card",
       "type": "hyperframes:block"
     },
     {
-      "name": "transitions-3d",
+      "name": "lt-kicker-name",
       "type": "hyperframes:block"
     },
     {
-      "name": "transitions-blur",
+      "name": "lt-mask-reveal",
       "type": "hyperframes:block"
     },
     {
-      "name": "transitions-cover",
+      "name": "lt-neon-border",
       "type": "hyperframes:block"
     },
     {
-      "name": "transitions-destruction",
+      "name": "lt-side-rule",
       "type": "hyperframes:block"
     },
     {
-      "name": "transitions-dissolve",
+      "name": "lt-soft-pill",
       "type": "hyperframes:block"
     },
     {
-      "name": "transitions-distortion",
+      "name": "lt-stack-bars",
       "type": "hyperframes:block"
     },
     {
-      "name": "transitions-grid",
+      "name": "macos-notification",
       "type": "hyperframes:block"
     },
     {
-      "name": "transitions-light",
+      "name": "macos-tahoe-liquid-glass",
       "type": "hyperframes:block"
     },
     {
-      "name": "transitions-mechanical",
+      "name": "mk-background",
       "type": "hyperframes:block"
     },
     {
-      "name": "transitions-other",
+      "name": "mk-callout-highlight",
       "type": "hyperframes:block"
     },
     {
-      "name": "transitions-push",
+      "name": "mk-clone-wall-transition",
       "type": "hyperframes:block"
     },
     {
-      "name": "transitions-radial",
+      "name": "mk-line-graph",
       "type": "hyperframes:block"
     },
     {
-      "name": "transitions-scale",
+      "name": "mk-placeholder-grid",
       "type": "hyperframes:block"
     },
     {
-      "name": "vfx-text-cursor",
+      "name": "mk-progress-stat",
       "type": "hyperframes:block"
     },
     {
-      "name": "vfx-liquid-background",
+      "name": "mk-specs-list",
       "type": "hyperframes:block"
     },
     {
-      "name": "vfx-iphone-device",
+      "name": "news-ticker",
       "type": "hyperframes:block"
     },
     {
-      "name": "vfx-magnetic",
+      "name": "north-korea-locked-down",
       "type": "hyperframes:block"
     },
     {
-      "name": "vfx-portal",
+      "name": "nyc-paris-flight",
       "type": "hyperframes:block"
     },
     {
-      "name": "liquid-glass-notification",
+      "name": "organic-light-leak-overlay",
       "type": "hyperframes:block"
     },
     {
-      "name": "liquid-glass-context-menu",
+      "name": "oscilloscope-trace",
       "type": "hyperframes:block"
     },
     {
-      "name": "liquid-glass-media-controls",
+      "name": "rack-focus",
       "type": "hyperframes:block"
     },
     {
-      "name": "liquid-glass-widgets",
+      "name": "reddit-post",
       "type": "hyperframes:block"
     },
     {
-      "name": "ios26-liquid-glass",
+      "name": "ridged-burn",
       "type": "hyperframes:block"
     },
     {
-      "name": "macos-tahoe-liquid-glass",
+      "name": "ripple-waves",
       "type": "hyperframes:block"
     },
     {
-      "name": "vfx-shatter",
+      "name": "sdf-iris",
       "type": "hyperframes:block"
     },
     {
-      "name": "code-snippet-apple-terminal-basic",
+      "name": "spain-map",
       "type": "hyperframes:block"
     },
     {
-      "name": "code-snippet-apple-terminal-clear-dark",
+      "name": "spiral-galaxy",
       "type": "hyperframes:block"
     },
     {
-      "name": "code-snippet-apple-terminal-clear-light",
+      "name": "split-flap-board",
       "type": "hyperframes:block"
     },
     {
-      "name": "code-snippet-apple-terminal-grass",
+      "name": "spotify-card",
       "type": "hyperframes:block"
     },
     {
-      "name": "code-snippet-apple-terminal-homebrew",
+      "name": "swirl-vortex",
       "type": "hyperframes:block"
     },
     {
-      "name": "code-snippet-apple-terminal-man-page",
+      "name": "thermal-distortion",
       "type": "hyperframes:block"
     },
     {
-      "name": "code-snippet-apple-terminal-novel",
+      "name": "thread-message-stack",
       "type": "hyperframes:block"
     },
     {
-      "name": "code-snippet-apple-terminal-ocean",
+      "name": "tiktok-follow",
       "type": "hyperframes:block"
     },
     {
-      "name": "code-snippet-apple-terminal-pro",
+      "name": "transitions-3d",
       "type": "hyperframes:block"
     },
     {
-      "name": "code-snippet-apple-terminal-red-sands",
+      "name": "transitions-blur",
       "type": "hyperframes:block"
     },
     {
-      "name": "code-snippet-apple-terminal-silver-aerogel",
+      "name": "transitions-cover",
       "type": "hyperframes:block"
     },
     {
-      "name": "code-snippet-apple-terminal-solid-colors",
+      "name": "transitions-destruction",
       "type": "hyperframes:block"
     },
     {
-      "name": "code-snippet-dark-2026",
+      "name": "transitions-dissolve",
       "type": "hyperframes:block"
     },
     {
-      "name": "code-snippet-dark-modern",
+      "name": "transitions-distortion",
       "type": "hyperframes:block"
     },
     {
-      "name": "code-snippet-dark-plus",
+      "name": "transitions-grid",
       "type": "hyperframes:block"
     },
     {
-      "name": "code-snippet-high-contrast",
+      "name": "transitions-light",
       "type": "hyperframes:block"
     },
     {
-      "name": "code-snippet-high-contrast-light",
+      "name": "transitions-mechanical",
       "type": "hyperframes:block"
     },
     {
-      "name": "code-snippet-light-2026",
+      "name": "transitions-other",
       "type": "hyperframes:block"
     },
     {
-      "name": "code-snippet-light-modern",
+      "name": "transitions-push",
       "type": "hyperframes:block"
     },
     {
-      "name": "code-snippet-light-plus",
+      "name": "transitions-radial",
       "type": "hyperframes:block"
     },
     {
-      "name": "code-snippet-monokai",
+      "name": "transitions-scale",
       "type": "hyperframes:block"
     },
     {
-      "name": "code-snippet-solarized-light",
+      "name": "ui-3d-reveal",
       "type": "hyperframes:block"
     },
     {
-      "name": "code-snippet-visual-studio-dark",
+      "name": "us-map",
       "type": "hyperframes:block"
     },
     {
-      "name": "code-snippet-visual-studio-light",
+      "name": "us-map-bubble",
       "type": "hyperframes:block"
     },
     {
-      "name": "code-morph",
+      "name": "us-map-flow",
       "type": "hyperframes:block"
     },
     {
-      "name": "code-snippet-flight",
+      "name": "us-map-hex",
       "type": "hyperframes:block"
     },
     {
-      "name": "code-typing",
+      "name": "vfx-anamorphic-flare",
       "type": "hyperframes:block"
     },
     {
-      "name": "code-diff",
+      "name": "vfx-iphone-device",
       "type": "hyperframes:block"
     },
     {
-      "name": "code-highlight",
+      "name": "vfx-liquid-background",
       "type": "hyperframes:block"
     },
     {
-      "name": "code-scroll",
+      "name": "vfx-liquid-glass",
       "type": "hyperframes:block"
     },
     {
-      "name": "code-3d-extrude",
+      "name": "vfx-magnetic",
       "type": "hyperframes:block"
     },
     {
-      "name": "code-shader-dissolve",
+      "name": "vfx-portal",
       "type": "hyperframes:block"
     },
     {
-      "name": "code-particle-assemble",
+      "name": "vfx-shatter",
       "type": "hyperframes:block"
     },
     {
-      "name": "flowchart-vertical",
+      "name": "vfx-text-cursor",
       "type": "hyperframes:block"
     },
     {
-      "name": "vfx-liquid-glass",
+      "name": "vpn-youtube-spot",
       "type": "hyperframes:block"
     },
     {
-      "name": "mk-background",
+      "name": "weight-wave",
       "type": "hyperframes:block"
     },
     {
-      "name": "parallax-zoom",
-      "type": "hyperframes:component"
+      "name": "whip-pan",
+      "type": "hyperframes:block"
     },
     {
-      "name": "parallax-unzoom",
-      "type": "hyperframes:component"
+      "name": "world-map",
+      "type": "hyperframes:block"
     },
     {
-      "name": "mk-specs-list",
+      "name": "x-post",
       "type": "hyperframes:block"
     },
     {
-      "name": "mk-callout-highlight",
+      "name": "yt-comment-card",
       "type": "hyperframes:block"
     },
     {
-      "name": "mk-placeholder-grid",
+      "name": "yt-lcd-background",
       "type": "hyperframes:block"
     },
     {
-      "name": "mk-clone-wall-transition",
+      "name": "yt-logo-intro",
       "type": "hyperframes:block"
     },
     {
-      "name": "mk-progress-stat",
+      "name": "yt-lower-third",
       "type": "hyperframes:block"
     },
     {
-      "name": "mk-line-graph",
+      "name": "yt-prism-title",
       "type": "hyperframes:block"
     },
     {
-      "name": "mk-usage-arc",
+      "name": "yt-vertical-fill",
+      "type": "hyperframes:block"
+    },
+    {
+      "name": "ai-generation-canvas",
       "type": "hyperframes:component"
     },
     {
-      "name": "mk-emphasis-type",
+      "name": "ai-prompt-flow",
       "type": "hyperframes:component"
     },
     {
-      "name": "yt-lcd-background",
-      "type": "hyperframes:block"
+      "name": "animated-bar-chart",
+      "type": "hyperframes:component"
     },
     {
-      "name": "yt-comment-card",
-      "type": "hyperframes:block"
+      "name": "arc-motion-path",
+      "type": "hyperframes:component"
     },
     {
-      "name": "yt-prism-title",
-      "type": "hyperframes:block"
+      "name": "ascii-render-pass",
+      "type": "hyperframes:component"
     },
     {
-      "name": "yt-logo-intro",
-      "type": "hyperframes:block"
+      "name": "ascii-trail-reveal",
+      "type": "hyperframes:component"
     },
     {
-      "name": "yt-vertical-fill",
-      "type": "hyperframes:block"
+      "name": "aurora-drift",
+      "type": "hyperframes:component"
     },
     {
-      "name": "yt-camera-move",
+      "name": "avatar-cloud",
       "type": "hyperframes:component"
     },
     {
-      "name": "yt-feather-highlight",
+      "name": "avatar-group-hover",
       "type": "hyperframes:component"
     },
     {
-      "name": "yt-circle-pointer",
+      "name": "badge-pop",
       "type": "hyperframes:component"
     },
     {
-      "name": "yt-screen-warp",
+      "name": "beat-accent",
       "type": "hyperframes:component"
     },
     {
-      "name": "hw-text-cloud",
-      "type": "hyperframes:block"
+      "name": "beat-pulse-background",
+      "type": "hyperframes:component"
     },
     {
-      "name": "hw-title",
-      "type": "hyperframes:block"
+      "name": "beat-timeline",
+      "type": "hyperframes:component"
     },
     {
-      "name": "hw-pipeline",
-      "type": "hyperframes:block"
+      "name": "before-after-wipe",
+      "type": "hyperframes:component"
     },
     {
-      "name": "hw-path-text",
-      "type": "hyperframes:block"
+      "name": "blur-in",
+      "type": "hyperframes:component"
     },
     {
-      "name": "hw-frame",
-      "type": "hyperframes:block"
+      "name": "blur-out-up",
+      "type": "hyperframes:component"
     },
     {
-      "name": "hw-scribble-transition",
-      "type": "hyperframes:block"
+      "name": "bottom-up-letters",
+      "type": "hyperframes:component"
     },
     {
-      "name": "hw-boil",
+      "name": "browser-device-stage",
       "type": "hyperframes:component"
     },
     {
-      "name": "hw-arrow",
+      "name": "camera-rig-depth-stack",
       "type": "hyperframes:component"
     },
     {
-      "name": "hw-callout-circle",
+      "name": "camera-scan-gate",
       "type": "hyperframes:component"
     },
     {
-      "name": "hw-box-label",
+      "name": "camera-shake",
       "type": "hyperframes:component"
     },
     {
-      "name": "hw-underline",
+      "name": "caption-blend-difference",
       "type": "hyperframes:component"
     },
     {
-      "name": "beat-freeze-cut",
-      "type": "hyperframes:block"
-    }
-  ]
+      "name": "caption-camera-follow",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "caption-clip-wipe",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "caption-editorial-emphasis",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "caption-emoji-pop",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "caption-glitch-rgb",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "caption-gradient-fill",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "caption-highlight",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "caption-kinetic-slam",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "caption-matrix-decode",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "caption-neon-accent",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "caption-neon-glow",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "caption-parallax-layers",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "caption-particle-burst",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "caption-pill-karaoke",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "caption-texture",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "caption-weight-shift",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "card-resize",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "char-slam-explode",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "chart-story",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "checkout-flow",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "chromatic-aberration-wipe",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "code-terminal-run",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "comparison-split",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "confetti",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "conic-progress-ring",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "constellation-hub",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "count-up",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "cta-close",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "cta-lockup",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "cursor-glyph-trail",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "cut-the-curve",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "decline-chart",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "device-frame-stage",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "directional-wipe",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "drift-hold",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "dynamic-grid",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "echo-trail",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "facet-morph",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "fade-through",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "focus-blur-resolve",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "focus-rack",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "focus-swap",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "gesture-tap",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "gloss-sweep",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "grade-split-reveal",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "grain-field",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "grain-overlay",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "grid-card-assemble",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "grid-pixelate-wipe",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "halftone-dissolve",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "headline-slam",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "hw-arrow",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "hw-boil",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "hw-box-label",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "hw-callout-circle",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "hw-underline",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "icon-morph-beat",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "icon-swap",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "ink-bleed-reveal",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "inline-highlight",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "input-feedback",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "iris-reveal",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "keyframe-scrub-stack",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "kinetic-type-swap",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "light-sweep-pass",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "line-by-line-slide",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "line-swap",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "locked-nucleus-orbit",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "logo-brand-close",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "logo-sting",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "logo-wall",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "marker-highlight",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "match-cut",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "matrix-decode",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "menu-morph",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "mesh-gradient-bg",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "micro-transitions",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "mk-emphasis-type",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "mk-usage-arc",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "modal-morph",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "morph-swap",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "morph-text",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "motion-blur",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "multi-device-splay",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "multiplayer-cursors",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "native-notification-pop",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "notification-pileup",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "notification-stack",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "number-pop-in",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "number-wheel",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "offset-path-traveler",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "onboarding-stepper-flow",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "ordered-dither-pass",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "outline-draw",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "oversized-cursor",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "overwhelm-surround",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "page-slide",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "pan-stations",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "panel-reveal",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "parallax-device-dive",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "parallax-unzoom",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "parallax-zoom",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "particle-image-reveal",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "particle-text-dissolve",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "per-word-crossfade",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "per-word-rise",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "perspective-marquee",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "physical-exit",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "press-ripple",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "pull-back-reveal",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "pull-to-refresh",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "push-in",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "radial-surround",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "rgb-glitch-text",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "rubber-band-bumper",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "scan-band",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "scramble-reveal",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "screen-flow-carousel",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "scroll-camera-story",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "scroll-feed",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "segmentation-flood",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "separator",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "settings-toggle-flow",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "shared-axis-y",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "shared-axis-z",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "shimmer-sweep",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "signup-flow",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "simulated-cursor",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "skeleton-reveal",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "slit-scan-reveal",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "slot-machine-roll",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "soft-blob-touch",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "soft-blur-in",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "split-tilt-cards",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "spotlight-card",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "spring-pop",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "spring-stack-shuffle",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "stagger-cascade",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "stagger-lattice",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "staggered-fade-up",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "star-rating-fill",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "state-chip-rail",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "sticky-mock-swap",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "stitched-text-draw",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "stop-motion-cadence",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "store-badge-lockup",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "strikethrough-replace",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "success-check",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "svg-line-draw-loader",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "svg-mask-reveal",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "svg-stroke-trace",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "swipe-rail",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "tabs-slide-indicator",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "telemetry-hud",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "terminal-simulator",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "testimonial-card",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "testimonial-proof-card",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "text-shimmer",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "text-stagger",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "text-state-swap",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "texture-mask-text",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "three-orbiting-cards",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "ticker-takeover",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "tilt-card",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "titlecard-calm",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "titlecard-lockup",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "toggle-flip",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "top-down-letters",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "touch-indicator",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "tracing-beam",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "tracking-in",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "trust-strip",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "type-match-cut",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "typed-prompt",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "typewriter",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "ui-focus-zoom",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "variable-axis-type",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "variable-font-flex",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "vector-editor-rig",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "velocity-throw-snap",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "vignette",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "vox-annotate",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "whip-pan-cut",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "whiteboard-ink",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "wordmark-tiles",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "x-follow-card",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "yt-camera-move",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "yt-circle-pointer",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "yt-feather-highlight",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "yt-screen-warp",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "zoom-through-transition",
+      "type": "hyperframes:component"
+    }
+  ],
+  "catalogArtifact": {
+    "revision": "a823e13eb98937e709ea70bbdc5f9e6dc0be1feed6346fb1d8746069fea6796b"
+  }
 }
diff --git a/scripts/catalog-preview-temp.test.ts b/scripts/catalog-preview-temp.test.ts
new file mode 100644
index 0000000000..0364087cd0
--- /dev/null
+++ b/scripts/catalog-preview-temp.test.ts
@@ -0,0 +1,21 @@
+import { statSync, rmSync } from "node:fs";
+import { basename } from "node:path";
+import { describe, it } from "node:test";
+import assert from "node:assert/strict";
+import { createCatalogPreviewTempDir } from "./catalog-preview-temp.js";
+
+describe("catalog preview temporary directory", () => {
+  it("atomically creates unique owner-only directories", () => {
+    const first = createCatalogPreviewTempDir("thread-message-stack");
+    const second = createCatalogPreviewTempDir("thread-message-stack");
+    try {
+      assert.notEqual(first, second);
+      assert.match(basename(first), /^hf-catalog-thread-message-stack-/);
+      assert.equal(statSync(first).mode & 0o777, 0o700);
+      assert.equal(statSync(second).mode & 0o777, 0o700);
+    } finally {
+      rmSync(first, { recursive: true, force: true });
+      rmSync(second, { recursive: true, force: true });
+    }
+  });
+});
diff --git a/scripts/catalog-preview-temp.ts b/scripts/catalog-preview-temp.ts
new file mode 100644
index 0000000000..8e7f555378
--- /dev/null
+++ b/scripts/catalog-preview-temp.ts
@@ -0,0 +1,8 @@
+import { mkdtempSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+
+/** Atomically allocate an owner-only preview directory under the OS temp root. */
+export function createCatalogPreviewTempDir(itemName: string): string {
+  return mkdtempSync(join(tmpdir(), `hf-catalog-${itemName}-`));
+}
diff --git a/scripts/generate-catalog-pages.test.ts b/scripts/generate-catalog-pages.test.ts
new file mode 100644
index 0000000000..cffb7b6d37
--- /dev/null
+++ b/scripts/generate-catalog-pages.test.ts
@@ -0,0 +1,202 @@
+/**
+ * The `?hfv=` round trip, end to end.
+ *
+ * A declared variable default leaves the explorer as a query parameter, passes
+ * through the preview wrapper, gets a src rewrite from the player, and is read
+ * back by the bootstrap the generator appends to the composition. Four hops,
+ * and a value has to survive all four byte-identical.
+ *
+ * It did not: the player re-serialized the whole query with `URLSearchParams`
+ * (form encoding, space -> `+`) while the bootstrap read it with
+ * `decodeURIComponent` (percent decoding, which leaves `+` alone), so
+ * "Ship it today" reached the page as "Ship+it+today" and an SVG `d` attribute
+ * full of spaces stopped parsing altogether.
+ *
+ * These tests run the actual emitted scripts and the actual player helper, so
+ * reintroducing either half of that mismatch fails them.
+ */
+import assert from "node:assert/strict";
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+import { describe, it } from "node:test";
+import { fileURLToPath } from "node:url";
+import { runInNewContext } from "node:vm";
+import { prepareSrcForElement } from "../packages/player/src/shader-options.ts";
+import { variableBootstrap, variablePreviewWrapper } from "./generate-catalog-pages.ts";
+
+const here = join(fileURLToPath(import.meta.url), "..");
+
+/** The player as the catalog uses it: no shader attributes at all, so its only
+ *  effect on a src is whatever it does to the query it was handed. */
+const plainPlayer = { getAttribute: () => null } as unknown as Element;
+
+const OWN_FILE = "svg-stroke-trace.html";
+const WRAPPER_BASE = `../../components/svg-stroke-trace/${OWN_FILE}`;
+
+/**
+ * Every character class this bug reaches. Spaces are the reported symptom; the
+ * rest are here so a fix that special-cases spaces cannot pass.
+ */
+const DECLARED: Record<string, string> = {
+  spaces: "Ship it today",
+  plus: "C++ and 1+1 and +1 555 010 0199",
+  ampersand: "a&b=c&d",
+  reserved: "50% off #1 ready? yes/no",
+  nonAscii: "café — naïve 東京 🎬",
+  quotes: 'he said "hi" and it\'s fine',
+  svgPath:
+    "M 92 328 C 178 142 292 138 366 276 C 430 396 500 414 558 262 C 622 94 724 112 786 274 C 836 406 894 376 930 194",
+};
+
+function scriptBody(html: string): string {
+  const match = /<script>([\s\S]*)<\/script>/.exec(html);
+  assert.ok(match, "expected exactly one inline <script>");
+  return match[1] ?? "";
+}
+
+function queryOf(url: string): string {
+  const index = url.indexOf("?");
+  return index >= 0 ? url.slice(index) : "";
+}
+
+/**
+ * Hop 1: the explorer's first load. Mirrors the one expression in
+ * docs/snippets/variables-explorer.jsx that builds it, which the last test in
+ * this file pins so the two cannot drift apart silently.
+ */
+function explorerQuery(values: Record<string, string>): string {
+  return `?hfv=${encodeURIComponent(JSON.stringify(values))}`;
+}
+
+/** Hop 2: the wrapper page, run for real. Returns the src it hands the player,
+ *  either from its own URL or from an explorer message. */
+function runWrapper(search: string, message?: Record<string, string>): string {
+  let src = "";
+  let onMessage: ((event: { origin: string; data: unknown }) => void) | null = null;
+  const player = {
+    ready: false,
+    currentTime: 0,
+    setAttribute: (name: string, value: string) => {
+      if (name === "src") src = value;
+    },
+    addEventListener: () => {},
+    seek: () => {},
+    play: () => {},
+  };
+  runInNewContext(scriptBody(variablePreviewWrapper(WRAPPER_BASE).join("\n")), {
+    URLSearchParams,
+    document: { getElementById: () => player },
+    location: { origin: "https://docs.test", search },
+    setInterval: () => 0,
+    clearInterval: () => {},
+    addEventListener: (
+      type: string,
+      handler: (event: { origin: string; data: unknown }) => void,
+    ) => {
+      if (type === "message") onMessage = handler;
+    },
+  });
+  if (message) {
+    assert.ok(onMessage, "wrapper never registered a message listener");
+    (onMessage as (event: unknown) => void)({
+      origin: "https://docs.test",
+      data: { hfVariables: message },
+    });
+  }
+  return src;
+}
+
+/** Hop 4: the bootstrap the generator appends to the composition, run for real.
+ *  Returns what a composition would actually read. */
+function runBootstrap(search: string): {
+  fromWindow: unknown;
+  fromAttribute: unknown;
+} {
+  const host = {
+    attributes: new Map<string, string>([["data-composition-src", `./${OWN_FILE}`]]),
+    getAttribute(name: string) {
+      return this.attributes.get(name) ?? null;
+    },
+    setAttribute(name: string, value: string) {
+      this.attributes.set(name, value);
+    },
+  };
+  const win: Record<string, unknown> = {};
+  runInNewContext(scriptBody(variableBootstrap(OWN_FILE)), {
+    URLSearchParams,
+    document: { querySelectorAll: () => [host] },
+    location: { search },
+    window: win,
+  });
+  const raw = host.getAttribute("data-variable-values");
+  // Re-parsed in this realm: the object the script built carries the vm realm's
+  // Object.prototype, which deepEqual counts as a difference all by itself.
+  const parsed = win.__hfVariables;
+  return {
+    fromWindow: parsed === undefined ? undefined : JSON.parse(JSON.stringify(parsed)),
+    fromAttribute: raw === null ? null : JSON.parse(raw),
+  };
+}
+
+/** A player build that form-encodes the whole query, which is what every
+ *  already-published @hyperframes/player on the CDN does. The reader has to
+ *  survive it, because the docs load the player from a CDN and cannot wait for
+ *  a release. */
+function formEncodingPlayer(src: string): string {
+  const index = src.indexOf("?");
+  if (index < 0) return src;
+  return `${src.slice(0, index)}?${new URLSearchParams(src.slice(index + 1)).toString()}`;
+}
+
+describe("hfv round trip", () => {
+  it("carries every declared value through all four hops unchanged", () => {
+    const demoSrc = prepareSrcForElement(plainPlayer, runWrapper(explorerQuery(DECLARED)));
+    const read = runBootstrap(queryOf(demoSrc));
+    assert.deepEqual(read.fromWindow, DECLARED);
+    assert.deepEqual(read.fromAttribute, DECLARED);
+  });
+
+  it("survives a player build that form-encodes the query", () => {
+    const demoSrc = formEncodingPlayer(runWrapper(explorerQuery(DECLARED)));
+    const read = runBootstrap(queryOf(demoSrc));
+    assert.deepEqual(read.fromWindow, DECLARED);
+    assert.deepEqual(read.fromAttribute, DECLARED);
+  });
+
+  it("carries an edited value in from the explorer's message", () => {
+    const edited = { ...DECLARED, spaces: "Make it happen" };
+    const demoSrc = prepareSrcForElement(plainPlayer, runWrapper("", edited));
+    assert.deepEqual(runBootstrap(queryOf(demoSrc)).fromWindow, edited);
+  });
+
+  for (const [name, value] of Object.entries(DECLARED)) {
+    it(`keeps ${name} byte-identical`, () => {
+      const one = { [name]: value };
+      const demoSrc = prepareSrcForElement(plainPlayer, runWrapper(explorerQuery(one)));
+      const read = runBootstrap(queryOf(demoSrc));
+      assert.deepEqual(read.fromWindow, one);
+    });
+  }
+
+  it("leaves the composition alone when no values are passed", () => {
+    assert.equal(runWrapper(""), WRAPPER_BASE);
+    assert.deepEqual(runBootstrap(""), { fromWindow: undefined, fromAttribute: null });
+  });
+});
+
+describe("player src rewriting", () => {
+  it("hands the composition its query back byte-identical", () => {
+    const src = "demo.html?hfv=%7B%22a%22%3A%22one%20two%22%7D&keep=a%20b%2Bc#frag";
+    assert.equal(prepareSrcForElement(plainPlayer, src), src);
+  });
+});
+
+describe("explorer producer", () => {
+  it("still encodes the first load with encodeURIComponent", () => {
+    const source = readFileSync(
+      join(here, "..", "docs", "snippets", "variables-explorer.jsx"),
+      "utf-8",
+    );
+    assert.match(source, /\?hfv=\$\{encodeURIComponent\(JSON\.stringify\(defaults\)\)\}/);
+  });
+});
diff --git a/scripts/generate-catalog-pages.ts b/scripts/generate-catalog-pages.ts
index 6fd2deea35..91544c3453 100644
--- a/scripts/generate-catalog-pages.ts
+++ b/scripts/generate-catalog-pages.ts
@@ -13,7 +13,15 @@
  *   npx tsx scripts/generate-catalog-pages.ts
  */
 
-import { readFileSync, existsSync, mkdirSync, writeFileSync, rmSync } from "node:fs";
+import {
+  readFileSync,
+  existsSync,
+  mkdirSync,
+  writeFileSync,
+  rmSync,
+  readdirSync,
+  lstatSync,
+} from "node:fs";
 import { join, resolve, dirname } from "node:path";
 import { fileURLToPath, pathToFileURL } from "node:url";
 // Import from source — bun workspace linking doesn't resolve for scripts outside packages/.
@@ -111,6 +119,8 @@ function discoverItems(): { kind: ItemKind; manifest: RegistryItem }[] {
 const GENERATED_HEADINGS = new Set([
   // current template
   "install",
+  "variables",
+  "source",
   "add it to your video",
   "paste it into your composition",
   "change the colors",
@@ -408,6 +418,7 @@ function generateTexturePreview(manifest: RegistryItem, textureGroups: TextureGr
   const lines: string[] = ['<div className="hf-texture-preview-panel">'];
 
   for (const item of sampleItems) {
+    if (!item) continue;
     const maskPath = textureMaskUrlFor(manifest, item);
     lines.push(
       `  <div className="hf-texture-preview-card" style={{ "--mask-url": "url('${maskPath}')" }}>`,
@@ -421,6 +432,449 @@ function generateTexturePreview(manifest: RegistryItem, textureGroups: TextureGr
   return lines;
 }
 
+/**
+ * Where the browser asks for a preview.
+ *
+ * Mintlify serves docs/public under `/public`, not the root. This is verified
+ * against the live site, where /public/images/... answers 200 and the same path
+ * without the prefix answers 404, so the prefix is load-bearing rather than a
+ * quirk of the local dev server.
+ */
+function playerPreviewUrl(kind: ItemKind, manifest: RegistryItem): string {
+  return `/public/catalog/preview/${typeDir(kind)}/${manifest.name}.html`;
+}
+
+/**
+ * Puts the values from `?hfv=<json>` where a composition looks for them, and
+ * nowhere else.
+ *
+ * Two readers, because there are two ways a preview consumes variables:
+ *   - `window.__hfVariables` — what `getVariables()` merges over the declared
+ *     defaults in a composition that reads them itself.
+ *   - `data-variable-values` on the host element — what the runtime loader
+ *     layers over a mounted sub-composition's defaults.
+ *
+ * `hfv` is written with `encodeURIComponent` and read back with
+ * `URLSearchParams.get`, which is its inverse: `encodeURIComponent` escapes
+ * both space (`%20`) and plus (`%2B`), the only two characters the two codecs
+ * disagree about, so form-decoding its output is lossless. Reading with
+ * `decodeURIComponent` instead is not safe here, because anything on the path
+ * that re-serializes the query as form data — the player used to — writes
+ * spaces as `+`, and percent-decoding leaves those `+` in the value.
+ *
+ * This runs from the end of `<body>`: late enough that every host element is
+ * parsed, and early enough that the runtime — which the player injects on a
+ * 200ms poll after load — has not started resolving them.
+ *
+ * Only hosts pointing at `ownFile` are stamped. A demo is free to mount other
+ * scenes, and their variables are not the ones this page documents.
+ */
+export function variableBootstrap(ownFile: string): string {
+  return [
+    "<script>",
+    "  (function () {",
+    "    var raw = new URLSearchParams(location.search).get('hfv');",
+    "    if (raw === null) return;",
+    "    var v;",
+    "    try { v = JSON.parse(raw); } catch (e) { return; }",
+    "    if (!v || typeof v !== 'object') return;",
+    "    window.__hfVariables = v;",
+    "    var hosts = document.querySelectorAll('[data-composition-src]');",
+    "    for (var i = 0; i < hosts.length; i++) {",
+    "      var src = (hosts[i].getAttribute('data-composition-src') || '').split('?')[0];",
+    `      if (src.slice(src.lastIndexOf('/') + 1) !== ${JSON.stringify(ownFile)}) continue;`,
+    "      hosts[i].setAttribute('data-variable-values', JSON.stringify(v));",
+    "    }",
+    "  })();",
+    "</script>",
+  ].join("\n");
+}
+
+/** Insert `snippet` immediately before `</body>`, or at the end of a document
+ *  that never opened one. */
+function appendToBody(html: string, snippet: string): string {
+  const close = html.toLowerCase().lastIndexOf("</body>");
+  if (close === -1) return `${html}\n${snippet}\n`;
+  return `${html.slice(0, close)}${snippet}\n${html.slice(close)}`;
+}
+
+/** The `<body>` background the demo chose, so a generated host does not put a
+ *  light-on-dark piece on white. Falls back to the near-black the registry
+ *  demos overwhelmingly use. */
+function demoBackground(html: string): string {
+  // 97 of the demos paint the frame on their #demo stage rather than on body.
+  // Reading only body handed every one of them the near-black fallback, which
+  // showed each ink-on-light primitive as dark grey on near black. #demo wins
+  // when both declare one: it is the element that fills the frame.
+  const declared = (selector: RegExp): string | undefined => {
+    for (const rule of html.matchAll(selector)) {
+      const found = /background(?:-color)?\s*:\s*([^;}]+)/i.exec(rule[1] ?? "");
+      if (found?.[1]) return found[1].trim();
+    }
+    return undefined;
+  };
+  return (
+    declared(/(?<![\w.#-])#demo\s*\{([^}]*)\}/gi) ??
+    declared(/(?<![\w.#-])(?:html\s*,\s*)?body\s*\{([^}]*)\}/gi) ??
+    "#0b0c0e"
+  );
+}
+
+/**
+ * The one inline script a demo uses to build its timeline, and the id it
+ * registers it under.
+ *
+ * Null unless the demo has exactly one such script registering exactly one id.
+ * That is the shape all 59 of these demos ship; anything else is not worth
+ * guessing at, and the caller falls back to a shell with no motion of its own.
+ */
+function demoTimelineScript(demoHtml: string): { code: string; id: string } | null {
+  const scripts = [...demoHtml.matchAll(/<script(?![^>]*\ssrc=)[^>]*>([\s\S]*?)<\/script>/gi)]
+    .map((m) => m[1] ?? "")
+    .filter((code) => code.includes("__timelines"));
+  const code = scripts.length === 1 ? scripts[0] : null;
+  if (code == null) return null;
+  const ids = new Set(
+    [...code.matchAll(/__timelines\[\s*["']([^"']+)["']\s*\]/g)].map((m) => m[1]),
+  );
+  if (ids.size !== 1) return null;
+  const id = [...ids][0];
+  return id ? { code, id } : null;
+}
+
+/** Whether a composition builds a timeline of its own. The recipe in the
+ *  trailing comment of a snippet does not count: a comment animates nothing. */
+function ownsTimeline(html: string): boolean {
+  return html.replace(/<!--[\s\S]*?-->/g, "").includes("__timelines");
+}
+
+/** Whether mounting a composition would draw anything. Several of these items
+ *  are "add this class to your own element" snippets — a <style> and a <script>
+ *  and no markup — so a shell that mounts one renders an empty box. */
+function hasRenderableMarkup(html: string): boolean {
+  return (
+    html
+      .replace(/<!--[\s\S]*?-->/g, "")
+      .replace(/<(style|script)\b[\s\S]*?<\/\1>/gi, "")
+      .trim().length > 0
+  );
+}
+
+/**
+ * The demo's timeline, rebuilt against the mounted composition.
+ *
+ * Most of these items are snippets — markup, CSS and a variable reader, and no
+ * timeline at all. What animates them is a recipe in a trailing comment, whose
+ * only executable copy is the demo's script. Mounting the snippet by itself
+ * therefore renders a still frame, which is the one thing a motion catalog
+ * cannot ship.
+ *
+ * That script selects the primitive's own classes, and the runtime mounts a
+ * sub-composition into this same document, so the selectors resolve. Running it
+ * once the mount has landed and nesting the timeline it builds under the
+ * shell's root gets the demo's motion and the panel's values at the same time.
+ */
+function timelineTransplant(rootId: string, demoTimeline: { code: string; id: string }): string {
+  const demoId = JSON.stringify(demoTimeline.id);
+  return [
+    "    <script>",
+    "      (function () {",
+    '        var mount = document.getElementById("hf-vars-mount");',
+    "        // The mount is filled asynchronously, and the demo script selects",
+    "        // what it fills it with, so it cannot run before then.",
+    "        var observer = new MutationObserver(build);",
+    "        observer.observe(mount, { childList: true, subtree: true });",
+    "        build();",
+    "        function build() {",
+    "          if (!mount.firstElementChild) return;",
+    "          observer.disconnect();",
+    demoTimeline.code.replace(/\s+$/, ""),
+    `          var child = window.__timelines[${demoId}];`,
+    `          delete window.__timelines[${demoId}];`,
+    '          if (!child || typeof child.paused !== "function") return;',
+    "          child.paused(false);",
+    `          window.__timelines[${JSON.stringify(rootId)}].add(child, 0);`,
+    "        }",
+    "      })();",
+    "    </script>",
+  ].join("\n");
+}
+
+/**
+ * A composition that exists only to mount this item, for items whose demo
+ * hard-codes what the variables are supposed to control.
+ *
+ * 60 of the 173 items that declare variables ship a demo predating them: the
+ * markup and CSS are written out literally, so no value delivered to that
+ * document can move anything. Mounting the item's own file is the only way the
+ * preview answers the panel. The cost is the demo's framing and, for the items
+ * whose motion lives in the demo rather than the file, its motion.
+ *
+ * ponytail: fixed 1920×1080 for components (what they are authored against);
+ * per-item sizing would need a signal no manifest carries.
+ */
+function writeVariablesHost(
+  destDir: string,
+  manifest: RegistryItem,
+  ownFile: string,
+  demoHtml: string,
+  demoTimeline: { code: string; id: string } | null,
+): string {
+  const width = isBlockItem(manifest) ? manifest.dimensions.width : 1920;
+  const height = isBlockItem(manifest) ? manifest.dimensions.height : 1080;
+  const duration = isBlockItem(manifest) ? manifest.duration : 5;
+  const rootId = `${manifest.name}-variables-preview`;
+
+  const html = [
+    "<!doctype html>",
+    '<html lang="en">',
+    "  <head>",
+    '    <meta charset="UTF-8" />',
+    `    <meta name="viewport" content="width=${width}, height=${height}" />`,
+    `    <title>${manifest.title} variables preview</title>`,
+    "    <style>",
+    `      html, body { margin: 0; width: ${width}px; height: ${height}px; overflow: hidden; background: ${demoBackground(demoHtml)}; }`,
+    `      #hf-vars-root { position: relative; width: ${width}px; height: ${height}px; }`,
+    "      #hf-vars-mount { position: absolute; inset: 0; display: grid; place-items: center; }",
+    "    </style>",
+    '    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>',
+    "  </head>",
+    "  <body>",
+    `    <div id="hf-vars-root" data-composition-id="${rootId}" data-start="0" data-width="${width}" data-height="${height}" data-duration="${duration}" data-fps="30">`,
+    `      <div id="hf-vars-mount" class="clip" data-composition-id="${manifest.name}" data-composition-src="./${ownFile}" data-start="0" data-duration="${duration}" data-track-index="0" data-width="${width}" data-height="${height}"></div>`,
+    "    </div>",
+    "    <script>",
+    "      window.__timelines = window.__timelines || {};",
+    `      window.__timelines[${JSON.stringify(rootId)}] = gsap.timeline({ paused: true });`,
+    "    </script>",
+    ...(demoTimeline ? [timelineTransplant(rootId, demoTimeline)] : []),
+    variableBootstrap(ownFile),
+    "  </body>",
+    "</html>",
+    "",
+  ].join("\n");
+
+  writeFileSync(join(destDir, VARIABLES_HOST_FILE), html);
+  return VARIABLES_HOST_FILE;
+}
+
+const VARIABLES_HOST_FILE = "__hf-variables-preview.html";
+
+/**
+ * The wrapper for an item the explorer drives.
+ *
+ * A composition reads its variables once, at init, so a new value can only
+ * arrive by loading the composition again. That reload is deliberately kept one
+ * frame deep: the explorer talks to this wrapper, and only the player's own
+ * iframe reloads. The page, the wrapper and the panel never blink, and the
+ * playhead is carried across so a change mid-shot does not throw the reader
+ * back to frame zero.
+ *
+ * Values travel in the query string rather than a message into the composition
+ * because they have to be readable before its first script runs. The path is
+ * untouched, so `data-composition-src="./sibling.html"` still resolves.
+ *
+ * Every hop re-encodes with `encodeURIComponent` and reads with
+ * `URLSearchParams.get`, so a value is percent-encoded on the wire no matter
+ * how it arrived — including from a player build that form-encoded it.
+ */
+export function variablePreviewWrapper(src: string): string[] {
+  return [
+    '<hyperframes-player id="p" controls muted></hyperframes-player>',
+    "<script>",
+    "  const player = document.getElementById('p');",
+    `  const BASE = ${JSON.stringify(src)};`,
+    "  const load = (values) => player.setAttribute('src', values ? BASE + '?hfv=' + values : BASE);",
+    "",
+    "  // Retry until the clock actually moves. `ready` can flip before the runtime",
+    "  // the player injects for a mounted sub-composition has finished wiring up, and",
+    "  // a play() that lands in that window silently does nothing. It gives up rather",
+    "  // than spinning forever: in a hidden tab the rAF clock never advances at all.",
+    "  let poll = null;",
+    "  const arm = (resumeAt) => {",
+    "    clearInterval(poll);",
+    "    let last = -1;",
+    "    let tries = 0;",
+    "    let seeked = false;",
+    "    poll = setInterval(() => {",
+    "      if (player.ready) {",
+    "        if (!seeked) {",
+    "          seeked = true;",
+    "          if (resumeAt > 0) player.seek(resumeAt);",
+    "        }",
+    "        player.play();",
+    "      }",
+    "      if (seeked && player.currentTime > 0 && player.currentTime !== last) {",
+    "        clearInterval(poll);",
+    "        return;",
+    "      }",
+    "      last = player.currentTime;",
+    "      if (++tries > 150) clearInterval(poll);",
+    "    }, 100);",
+    "  };",
+    "",
+    "  const initial = new URLSearchParams(location.search).get('hfv');",
+    "  load(initial && encodeURIComponent(initial));",
+    "  arm(0);",
+    "",
+    "  addEventListener('message', (event) => {",
+    "    if (event.origin !== location.origin) return;",
+    "    const values = event.data && event.data.hfVariables;",
+    "    if (!values) return;",
+    "    const resumeAt = player.currentTime || 0;",
+    "    load(encodeURIComponent(JSON.stringify(values)));",
+    "    arm(resumeAt);",
+    "  });",
+    "  player.addEventListener('ended', () => { player.seek(0); player.play(); });",
+    "</script>",
+  ];
+}
+
+/**
+ * Copy an item's demo composition into docs/public and wrap it in a player.
+ *
+ * Returns "none" when the item ships nothing to play, which is the caller's
+ * signal to fall back to a recorded video, and "variables" only when the
+ * explorer's values can actually reach what is on screen.
+ *
+ * The wrapper exists so the page can embed the preview in an iframe. Dropping
+ * <hyperframes-player> straight into the MDX would put a composition's own
+ * global CSS — and compositions do set styles on `body` — in the same document
+ * as the documentation around it.
+ *
+ * A drivable item switches on the explorer's plumbing: the composition gets
+ * the `?hfv=` reader, and the wrapper gets a listener that reloads it with new
+ * values. Every other item keeps byte-identical output.
+ */
+function writePlayerPreview(
+  kind: ItemKind,
+  manifest: RegistryItem,
+  variables: ItemVariable[] = [],
+): "none" | "player" | "variables" {
+  const dir = typeDir(kind);
+  const itemDir = join(registryDir, dir, manifest.name);
+  if (!existsSync(itemDir)) return "none";
+
+  // demo.html first: where an item ships one it is the version built to be
+  // watched on its own. Blocks mostly ship none, but a block *is* a standalone
+  // composition document, so its own file plays without anything wrapped round it.
+  const entry = ["demo.html", `${manifest.name}.html`].find((f) => existsSync(join(itemDir, f)));
+  if (!entry) return "none";
+
+  // The whole directory, because a demo is usually a mount shell pointing at a
+  // sibling with data-composition-src="./<name>.html". Copying just the entry
+  // file leaves that reference dangling and the preview renders empty.
+  const destDir = join(docsDir, "public", "catalog", dir, manifest.name);
+  mkdirSync(destDir, { recursive: true });
+
+  // The item's own file, as a demo would reference it. Both the bootstrap's
+  // host filter and the generated fallback host are keyed on it.
+  const ownFile = primaryFileFor(manifest)?.path.split("/").pop() ?? `${manifest.name}.html`;
+  const entryHtml = readFileSync(join(itemDir, entry), "utf-8");
+  const demoMountsItself = new RegExp(
+    `data-composition-src=["'][^"']*${ownFile.replace(/[.*+?^$()|[\]\\]/g, "\\$&")}["']`,
+  ).test(entryHtml);
+
+  const ownPath = join(itemDir, ownFile);
+  const ownHtml = existsSync(ownPath) ? readFileSync(ownPath, "utf-8") : "";
+
+  // Values reach the preview through the demo where it mounts the item itself,
+  // and through a generated shell otherwise — but a shell can only mount what
+  // the item's file draws, and a markup-less snippet draws nothing. A blank
+  // preview is worse than one whose knobs are dead, so those items keep the
+  // demo, and the caller leaves the panel off rather than shipping a control
+  // that moves nothing.
+  const drivable = variables.length > 0 && (demoMountsItself || hasRenderableMarkup(ownHtml));
+
+  // Recursive, because 38 items keep their assets in a subdirectory — models/,
+  // lib/, assets/ — and reference them relatively. Copying only the top level
+  // left every one of those 404ing in the docs preview: the composition still
+  // renders, so nothing failed, it just quietly drew without its model.
+  const copyItemTree = (fromDir: string, toDir: string): void => {
+    mkdirSync(toDir, { recursive: true });
+    for (const entryName of readdirSync(fromDir)) {
+      if (entryName === "registry-item.json") continue;
+      const from = join(fromDir, entryName);
+      // lstat, not stat: a symlinked directory would otherwise be followed,
+      // and one pointing at an ancestor recurses until the disk fills.
+      const stats = lstatSync(from);
+      if (stats.isSymbolicLink()) continue;
+      if (!stats.isFile()) {
+        copyItemTree(from, join(toDir, entryName));
+        continue;
+      }
+      const copy =
+        drivable && fromDir === itemDir && entryName === entry
+          ? Buffer.from(appendToBody(entryHtml, variableBootstrap(ownFile)))
+          : readFileSync(from);
+      writeFileSync(join(toDir, entryName), copy);
+    }
+  };
+  copyItemTree(itemDir, destDir);
+
+  // A demo that hard-codes the piece cannot answer the panel however the
+  // values are delivered, so the preview mounts the item's own file instead —
+  // and, where the item is a snippet with no timeline of its own, carries the
+  // demo's motion across with it rather than shipping a still frame.
+  const host =
+    drivable && !demoMountsItself
+      ? writeVariablesHost(
+          destDir,
+          manifest,
+          ownFile,
+          entryHtml,
+          entry === ownFile || ownsTimeline(ownHtml) ? null : demoTimelineScript(entryHtml),
+        )
+      : entry;
+
+  const wrapperDir = join(docsDir, "public", "catalog", "preview", dir);
+  mkdirSync(wrapperDir, { recursive: true });
+
+  // The player's src is relative so the preview keeps working whatever prefix
+  // the docs are served under. The wrapper and the composition move together.
+  const wrapper = [
+    "<!doctype html>",
+    '<meta charset="utf-8" />',
+    `<title>${manifest.title} preview</title>`,
+    "<style>",
+    "  html, body { margin: 0; height: 100%; background: transparent; }",
+    "  hyperframes-player { display: block; width: 100%; height: 100%; }",
+    "</style>",
+    '<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>',
+    ...(drivable
+      ? variablePreviewWrapper(`../../${dir}/${manifest.name}/${host}`)
+      : [
+          `<hyperframes-player id="p" src="../../${dir}/${manifest.name}/${entry}" controls muted></hyperframes-player>`,
+          "<script>",
+          "  // Retry until the clock actually moves. `ready` can flip before the runtime",
+          "  // the player injects for a mounted sub-composition has finished wiring up, and",
+          "  // a play() that lands in that window silently does nothing.",
+          "  //",
+          "  // It stops rather than spinning forever: the clock runs on requestAnimationFrame,",
+          "  // which browsers suspend in a hidden tab, so a preview nobody is looking at will",
+          "  // never advance and there is nothing here to fix by retrying. An automated check",
+          "  // of a background tab reads currentTime 0 for that reason, not for a broken one.",
+          "  const player = document.getElementById('p');",
+          "  let last = -1;",
+          "  let tries = 0;",
+          "  const start = setInterval(() => {",
+          "    if (player.currentTime > 0 && player.currentTime !== last) {",
+          "      clearInterval(start);",
+          "      return;",
+          "    }",
+          "    last = player.currentTime;",
+          "    if (player.ready) player.play();",
+          "    if (++tries > 30) clearInterval(start);",
+          "  }, 500);",
+          "  player.addEventListener('ended', () => { player.seek(0); player.play(); });",
+          "</script>",
+        ]),
+    "",
+  ].join("\n");
+  writeFileSync(join(wrapperDir, `${manifest.name}.html`), wrapper);
+  return drivable ? "variables" : "player";
+}
+
 function catalogPreviewFor(kind: ItemKind, manifest: RegistryItem): string | undefined {
   // The manifest is the source of truth. Thirteen items declare a preview with
   // a video and no poster, and that omission is deliberate — no .png was ever
@@ -508,72 +962,222 @@ function generateParams(manifest: RegistryItem): string[] {
   return lines;
 }
 
-// fallow-ignore-next-line complexity
-function generateItemMdx(
+interface ItemVariable {
+  id: string;
+  type: string;
+  role?: string;
+  label?: string;
+  description?: string;
+  default?: string | number | boolean;
+  options?: { value: string; label?: string }[];
+  min?: number;
+  max?: number;
+  step?: number;
+  unit?: string;
+}
+
+/** The allowed values for one variable, written the way a reader has to type them. */
+function variableRange(v: ItemVariable): string {
+  if (v.options?.length) return v.options.map((o) => `\`${o.value}\``).join(", ");
+  if (typeof v.min === "number" && typeof v.max === "number") {
+    const unit = v.unit ? `${v.unit}` : "";
+    const step = typeof v.step === "number" ? `, step ${v.step}${unit}` : "";
+    return `${v.min}${unit} to ${v.max}${unit}${step}`;
+  }
+  return v.type;
+}
+
+/**
+ * A mount element carrying this item's variables, with its own defaults filled in.
+ *
+ * The table above lists what can be set; without this the reader is told to "set
+ * them on the element" by a page that never shows the element. Defaults are used
+ * as the values so the snippet is copy-and-run correct before it is edited.
+ */
+function generateVariableUsage(manifest: RegistryItem, target: string): string[] {
+  const raw = (manifest as RegistryItem & { variables?: ItemVariable[] }).variables;
+  if (!Array.isArray(raw) || raw.length === 0) return [];
+
+  const withDefaults = raw.filter((v) => v.default !== undefined);
+  if (withDefaults.length === 0) return [];
+
+  const values = JSON.stringify(Object.fromEntries(withDefaults.map((v) => [v.id, v.default])));
+  return [
+    "Set them with `data-variable-values` on the element that mounts it. These are the",
+    "defaults, so this behaves exactly like the preview above until you change one:",
+    "",
+    "```html wrap",
+    "<div",
+    `  data-composition-id="${manifest.name}"`,
+    `  data-composition-src="${target}"`,
+    `  data-variable-values='${values}'`,
+    "></div>",
+    "```",
+    "",
+  ];
+}
+
+function itemVariables(manifest: RegistryItem): ItemVariable[] {
+  const raw = (manifest as RegistryItem & { variables?: ItemVariable[] }).variables;
+  return Array.isArray(raw) ? raw : [];
+}
+
+/**
+ * Preview, paste-ready snippet and every control over both, as one component.
+ *
+ * This is what the static `## Variables` table and the `data-variable-values`
+ * block below it used to be. The table could say `glow` accepts `none |
+ * standard | strong` and could not show what any of them looked like; a reader
+ * had to install the item to find out. Descriptions survive the move — they
+ * sit under their own control instead of in a column.
+ */
+function generateVariablesExplorer(
   kind: ItemKind,
   manifest: RegistryItem,
-  carried: CarriedContent = { sections: [], hasCustomUsage: false },
-): string {
-  const tags = manifest.tags ?? [];
-  const installCmd = `npx hyperframes add ${manifest.name}`;
-  const source = manifest as RegistryItem & SourceMetadata;
-  const textureGroups = textureGroupsFor(manifest);
-  const primaryTarget = primaryFileFor(manifest)?.target ?? `compositions/${manifest.name}.html`;
+  variables: ItemVariable[],
+  target: string,
+): string[] {
+  const open = [
+    "<VariablesExplorer",
+    `  previewSrc="${playerPreviewUrl(kind, manifest)}"`,
+    `  compositionId="${manifest.name}"`,
+    `  compositionSrc="${target}"`,
+    `  variables={${JSON.stringify(variables)}}`,
+  ];
 
-  // Frontmatter only. Mintlify renders `title` as the H1 and `description` as
-  // the standfirst, so repeating both in the body (as this generator used to)
-  // printed each one twice on every page.
-  const lines: string[] = [
-    "---",
-    `title: ${yamlString(manifest.title)}`,
-    `description: ${yamlString(manifest.description)}`,
-    "---",
+  // The source, as a real fence inside the component. It is static — a reader
+  // dragging a knob changes the mount snippet, never this — so it can be
+  // highlighted at build time by the same shiki pass that colours every other
+  // fence on the site, instead of being coloured by hand in the browser. MDX
+  // parses a fenced block in JSX children as markdown, provided it is set off
+  // by blank lines, and hands the compiled block down as `children`.
+  const file = primarySource(kind, manifest);
+  if (!file) return [...open, "/>", ""];
+
+  return [
+    ...open,
+    ">",
+    "",
+    "```html " + file.path,
+    file.source,
+    "```",
+    "",
+    "</VariablesExplorer>",
     "",
   ];
+}
 
-  // 1. What it looks like, before anything else. Credits, tags and the source
-  //    prompt used to sit above this and pushed the preview below the fold.
-  if (textureGroups.length > 0) {
-    lines.push(...generateTexturePreview(manifest, textureGroups));
-  } else {
-    const previewPath = `${catalogImageBase}/${typeDir(kind)}/${manifest.name}`;
-    // Same source of truth as the index: a manifest that declares a preview
-    // without a poster has no .png, and asking for one is a 403 the browser
-    // fetches before the video.
-    const posterUrl = catalogPreviewFor(kind, manifest);
-    const poster = posterUrl ? ` poster="${posterUrl}"` : "";
-    lines.push(
-      `<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="${previewPath}.mp4"${poster} autoPlay muted loop playsInline />`,
-      "",
-    );
+function generateVariables(manifest: RegistryItem): string[] {
+  const raw = (manifest as RegistryItem & { variables?: ItemVariable[] }).variables;
+  if (!Array.isArray(raw) || raw.length === 0) return [];
+
+  const lines: string[] = [
+    "## Variables",
+    "",
+    "Every one of these has a default, so the piece works untouched. Set the ones you",
+    "want to change on the element:",
+    "",
+    "| Variable | Default | Accepts | What it does |",
+    "| --- | --- | --- | --- |",
+  ];
+  for (const v of raw) {
+    // A missing description is left blank rather than filled with the label
+    // again — a column that repeats its neighbour teaches the reader to skip it.
+    const what = v.description ?? "";
+    const def = v.default === undefined ? "" : `\`${v.default}\``;
+    lines.push(`| \`${v.id}\` | ${def} | ${variableRange(v)} | ${what} |`);
   }
+  lines.push("");
+  return lines;
+}
 
-  // 2. How to get it. A CodeGroup around a single block just drew an empty tab bar.
-  lines.push(
-    "## Install",
+// fallow-ignore-next-line complexity
+/**
+ * The item's own source, collapsed.
+ *
+ * Without this the page can only tell the reader to go and open a file they have
+ * not installed yet. Collapsed because these run to several hundred lines and an
+ * expanded wall of markup would push everything else off the page.
+ */
+function primarySource(
+  kind: ItemKind,
+  manifest: RegistryItem,
+): { path: string; source: string } | null {
+  const file = primaryFileFor(manifest);
+  if (!file) return null;
+  const path = join(registryDir, typeDir(kind), manifest.name, file.path);
+  if (!existsSync(path)) return null;
+
+  const source = readFileSync(path, "utf-8").trimEnd();
+  // A fence inside the source would close the one wrapping it.
+  if (source.includes("```")) return null;
+
+  return { path: file.path, source };
+}
+
+function generateSource(kind: ItemKind, manifest: RegistryItem): string[] {
+  const file = primarySource(kind, manifest);
+  if (!file) return [];
+
+  return [
+    "## Source",
+    "",
+    "<Accordion title={`" + file.path + "`}>",
     "",
-    "```bash Terminal",
-    installCmd,
+    "```html",
+    file.source,
     "```",
     "",
-    installOutcome(manifest, primaryTarget),
+    "</Accordion>",
     "",
-  );
+  ];
+}
 
-  // Prerequisite where it bites: you need the flag to preview what you just installed.
-  if (tags.includes("html-in-canvas")) {
-    lines.push(
-      "<Warning>",
-      "  Live preview needs the `chrome://flags/#canvas-draw-element` flag switched on.",
-      "  Rendering from the CLI switches it on for you. [How it",
-      "  works](/guides/html-in-canvas)",
-      "</Warning>",
+/** The one thing above the fold: an explorer, a player, a texture sheet or a recorded video. */
+function previewSection(
+  kind: ItemKind,
+  manifest: RegistryItem,
+  state: {
+    textureGroups: ReturnType<typeof textureGroupsFor>;
+    variables: ItemVariable[];
+    hasPlayer: boolean;
+    explorer: boolean;
+  },
+): string[] {
+  if (state.textureGroups.length > 0) return generateTexturePreview(manifest, state.textureGroups);
+  const primaryTarget = primaryFileFor(manifest)?.target ?? `compositions/${manifest.name}.html`;
+  if (state.explorer) {
+    return generateVariablesExplorer(kind, manifest, state.variables, primaryTarget);
+  }
+  if (state.hasPlayer) {
+    return [
+      `<iframe src="${playerPreviewUrl(kind, manifest)}" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="${manifest.title} preview" />`,
       "",
-    );
+    ];
   }
+  // No demo.html to play, so fall back to the recorded video. Blocks are the
+  // population that lands here: 125 of 132 ship no demo.
+  const previewPath = `${catalogImageBase}/${typeDir(kind)}/${manifest.name}`;
+  // Same source of truth as the index: a manifest that declares a preview
+  // without a poster has no .png, and asking for one is a 403 the browser
+  // fetches before the video.
+  const posterUrl = catalogPreviewFor(kind, manifest);
+  const poster = posterUrl ? ` poster="${posterUrl}"` : "";
+  return [
+    `<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="${previewPath}.mp4"${poster} autoPlay muted loop playsInline />`,
+    "",
+  ];
+}
 
-  // 3. How to use it — unless a human already wrote that section, in which case
-  //    their version is carried through below instead of being overwritten.
+/** How to use it. Empty when a human already wrote that section by hand. */
+function usageSection(
+  kind: ItemKind,
+  manifest: RegistryItem,
+  primaryTarget: string,
+  carried: CarriedContent,
+  textureGroups: ReturnType<typeof textureGroupsFor>,
+): string[] {
+  const lines: string[] = [];
   if (carried.hasCustomUsage) {
     // nothing: the carried "## Usage" section covers it
   } else if (kind === "block" && isBlockItem(manifest)) {
@@ -626,28 +1230,15 @@ function generateItemMdx(
       "",
     );
   }
+  return lines;
+}
 
-  lines.push(...generateParams(manifest));
-
-  if (textureGroups.length > 0) {
-    lines.push(...generateTextureAgentUsage(manifest, textureGroups));
-    lines.push(...generateTextureAnimationExample(manifest, textureGroups));
-    lines.push(...generateTextureExamples(manifest, textureGroups));
-  }
-
-  // 4. Sections a human added to the previously generated page. Carried through
-  //    verbatim so regenerating never silently deletes hand-written docs.
-  if (carried.sections.length > 0) {
-    lines.push(...carried.sections);
-  }
-
-  if (manifest.relatedSkill) {
-    lines.push(`<Tip>Related skill: \`/${manifest.relatedSkill}\`</Tip>`, "");
-  }
-
-  // 5. Generated tail: provenance (the least of what a reader came for) and
-  //    then the required `## Related topics` continuation, so the page ends with
-  //    it per docs/AGENTS.md. The marker delimits everything generated below it.
+/** Tags, author and the source prompt, in the order a reader wants them least. */
+function footerSection(
+  manifest: RegistryItem,
+  tags: readonly string[],
+  source: RegistryItem & SourceMetadata,
+): string[] {
   const footer: string[] = [];
 
   if (tags.length > 0) {
@@ -671,6 +1262,108 @@ function generateItemMdx(
       "",
     );
   }
+  return footer;
+}
+
+function generateItemMdx(
+  kind: ItemKind,
+  manifest: RegistryItem,
+  carried: CarriedContent = { sections: [], hasCustomUsage: false },
+): string {
+  const tags = manifest.tags ?? [];
+  const installCmd = `npx hyperframes add ${manifest.name}`;
+  const source = manifest as RegistryItem & SourceMetadata;
+  const textureGroups = textureGroupsFor(manifest);
+  const primaryTarget = primaryFileFor(manifest)?.target ?? `compositions/${manifest.name}.html`;
+
+  // Frontmatter only. Mintlify renders `title` as the H1 and `description` as
+  // the standfirst, so repeating both in the body (as this generator used to)
+  // printed each one twice on every page.
+  // The explorer owns the preview, so it can only be emitted for an item whose
+  // preview is a live player. A texture sheet or a recorded video has nothing
+  // to drive, and those items keep the static table.
+  const variables = textureGroups.length > 0 ? [] : itemVariables(manifest);
+  const preview =
+    textureGroups.length === 0 ? writePlayerPreview(kind, manifest, variables) : "none";
+  const hasPlayer = preview !== "none";
+  const explorer = preview === "variables";
+
+  const lines: string[] = [
+    "---",
+    `title: ${yamlString(manifest.title)}`,
+    `description: ${yamlString(manifest.description)}`,
+    "---",
+    "",
+    'import { InstallCommand } from "/snippets/install-command.jsx";',
+    ...(explorer ? ['import { VariablesExplorer } from "/snippets/variables-explorer.jsx";'] : []),
+    "",
+  ];
+
+  // 1. What it looks like, before anything else. Credits, tags and the source
+  //    prompt used to sit above this and pushed the preview below the fold.
+  lines.push(...previewSection(kind, manifest, { textureGroups, variables, hasPlayer, explorer }));
+
+  // 2. How to get it. A CodeGroup around a single block just drew an empty tab bar.
+  lines.push(
+    "## Install",
+    "",
+    `<InstallCommand command="${installCmd}" />`,
+    "",
+    installOutcome(manifest, primaryTarget),
+    "",
+  );
+
+  // Prerequisite where it bites: you need the flag to preview what you just installed.
+  if (tags.includes("html-in-canvas")) {
+    lines.push(
+      // Danger, not Warning: without the flag the preview on this page is a
+      // black rectangle, so this is a prerequisite for seeing anything rather
+      // than a caveat about the result.
+      "<Danger>",
+      "  Live preview needs the `chrome://flags/#canvas-draw-element` flag switched on.",
+      "  Without it this item's screen renders black. Rendering from the CLI switches",
+      "  it on for you. [How it works](/guides/html-in-canvas)",
+      "</Danger>",
+      "",
+    );
+  }
+
+  // 3. How to use it — unless a human already wrote that section, in which case
+  //    their version is carried through below instead of being overwritten.
+  lines.push(...usageSection(kind, manifest, primaryTarget, carried, textureGroups));
+
+  lines.push(...generateParams(manifest));
+  if (!explorer) {
+    lines.push(...generateVariables(manifest));
+    lines.push(...generateVariableUsage(manifest, primaryTarget));
+  }
+
+  // The explorer's Code tab already shows this exact file, so an accordion
+  // under it would be the same source twice on one page. `source` stays in
+  // GENERATED_HEADINGS, so the section a previous revision wrote is dropped on
+  // regeneration rather than carried forward as if a human had written it.
+  if (!explorer) lines.push(...generateSource(kind, manifest));
+
+  if (textureGroups.length > 0) {
+    lines.push(...generateTextureAgentUsage(manifest, textureGroups));
+    lines.push(...generateTextureAnimationExample(manifest, textureGroups));
+    lines.push(...generateTextureExamples(manifest, textureGroups));
+  }
+
+  // 4. Sections a human added to the previously generated page. Carried through
+  //    verbatim so regenerating never silently deletes hand-written docs.
+  if (carried.sections.length > 0) {
+    lines.push(...carried.sections);
+  }
+
+  if (manifest.relatedSkill) {
+    lines.push(`<Tip>Related skill: \`/${manifest.relatedSkill}\`</Tip>`, "");
+  }
+
+  // 5. Generated tail: provenance (the least of what a reader came for) and
+  //    then the required `## Related topics` continuation, so the page ends with
+  //    it per docs/AGENTS.md. The marker delimits everything generated below it.
+  const footer = footerSection(manifest, tags, source);
 
   lines.push(FOOTER_MARKER, "", ...footer, ...RELATED_TOPICS);
 
@@ -760,13 +1453,23 @@ function main(): void {
     "CSS Transitions": 6,
     Showcases: 7,
     Data: 8,
-    Effects: 9,
-    Blocks: 10,
+    "Motion Primitives": 9,
+    "Motion Scenes": 11,
+    "Typography & Text": 10,
+    "Camera & 3D": 12,
+    "Product Demo": 13,
+    Texture: 14,
+    Effects: 15,
+    Blocks: 16,
   };
 
   // fallow-ignore-next-line complexity
   function groupForItem(entry: CatalogEntry): string {
     const tags = entry.tags;
+    // Declared membership beats every inferred rule below: `video-primitive` is
+    // the tag a human puts on an item to put it on the primitives shelf, and it
+    // must not be overridden by whatever else the item happens to be tagged.
+    if (tags.includes("video-primitive")) return "Motion Primitives";
     // Two-tag combos for specific grouping
     if (tags.includes("transition") && tags.includes("shader")) return "Shader Transitions";
     if (tags.includes("transition") && tags.includes("showcase")) return "CSS Transitions";
@@ -782,6 +1485,27 @@ function main(): void {
       return entry.type === "component" ? "Effects" : "CSS Transitions";
     if (tags.includes("showcase") || tags.includes("3d")) return "Showcases";
     if (tags.includes("data") || tags.includes("chart") || tags.includes("ascii")) return "Data";
+    // Split what used to be one 267-item "Effects" list. Ordered most specific
+    // first: an item tagged both `camera` and `motion-primitive` is a camera
+    // move, which is the narrower and more useful shelf to find it on.
+    if (tags.includes("texture")) return "Texture";
+    if (tags.includes("camera") || tags.includes("3d")) return "Camera & 3D";
+    if (
+      tags.includes("product-demo") ||
+      tags.includes("demonstrate") ||
+      tags.includes("pointers")
+    ) {
+      return "Product Demo";
+    }
+    if (
+      tags.includes("typography") ||
+      tags.includes("text-effects") ||
+      tags.includes("text") ||
+      tags.includes("caption-style")
+    ) {
+      return "Typography & Text";
+    }
+    if (tags.includes("motion-primitive")) return "Motion Scenes";
     if (entry.type === "component") return "Effects";
     // Remaining blocks
     return "Blocks";
diff --git a/scripts/generate-catalog-previews.test.ts b/scripts/generate-catalog-previews.test.ts
new file mode 100644
index 0000000000..f2eedd7be9
--- /dev/null
+++ b/scripts/generate-catalog-previews.test.ts
@@ -0,0 +1,36 @@
+import { spawnSync } from "node:child_process";
+import { existsSync, rmSync } from "node:fs";
+import { resolve } from "node:path";
+import { after, describe, it } from "node:test";
+import assert from "node:assert/strict";
+
+const repoRoot = resolve(import.meta.dirname, "..");
+const previewPath = resolve(repoRoot, "docs/images/catalog/blocks/thread-message-stack.png");
+
+after(() => rmSync(previewPath, { force: true }));
+
+describe("catalog preview raw block boundary", () => {
+  it("renders thread-message-stack through the exact Catalog Previews command", () => {
+    rmSync(previewPath, { force: true });
+    const result = spawnSync(
+      "bunx",
+      [
+        "tsx",
+        "scripts/generate-catalog-previews.ts",
+        "--only",
+        "thread-message-stack",
+        "--skip-video",
+      ],
+      { cwd: repoRoot, encoding: "utf8", timeout: 120_000 },
+    );
+    const output = `${result.stdout}${result.stderr}`;
+
+    assert.equal(result.status, 0, output);
+    assert.ok(!output.includes("✗ thread-message-stack"), output);
+    assert.ok(!output.includes("[Browser:ERROR]"), output);
+    assert.ok(!output.includes("timelines not registered"), output);
+    assert.ok(!output.includes("sub_timeline_readiness_timeout"), output);
+    assert.ok(output.includes("✓ thread-message-stack.png"), output);
+    assert.ok(existsSync(previewPath), previewPath);
+  });
+});
diff --git a/scripts/generate-registry-items.ts b/scripts/generate-registry-items.ts
index 36390d8a71..b32aa22a5b 100644
--- a/scripts/generate-registry-items.ts
+++ b/scripts/generate-registry-items.ts
@@ -152,15 +152,57 @@ function writeItem(item: RegistryItem): void {
   console.log(`wrote ${relative(repoRoot, out)}`);
 }
 
-function writeRegistryManifest(items: RegistryItem[]): void {
+/**
+ * The manifest lists every item on disk, not just the examples this script
+ * scaffolds. Blocks and components carry hand-authored registry-item.json
+ * files; scanning the tree keeps them from being dropped on regeneration
+ * (previously this rewrote 300+ entries down to the 8 examples).
+ */
+function writeRegistryManifest(): void {
+  const items: Array<{ name: string; type: RegistryItem["type"] }> = [];
+  for (const [type, dir] of Object.entries(ITEM_TYPE_DIRS) as Array<
+    [RegistryItem["type"], string]
+  >) {
+    const typeDir = resolve(repoRoot, "registry", dir);
+    let entries: string[];
+    try {
+      entries = readdirSync(typeDir);
+    } catch {
+      continue;
+    }
+    for (const name of entries.sort()) {
+      try {
+        statSync(join(typeDir, name, "registry-item.json"));
+      } catch {
+        continue;
+      }
+      items.push({ name, type });
+    }
+  }
+  // `catalogArtifact.revision` belongs to build-local-vectors.ts, which stamps
+  // it so the CLI and the coverage gate can tell whether the published vectors
+  // still describe this registry. This script owns the item list and nothing
+  // else, so it carries that field through rather than rewriting the file
+  // without it: dropping it makes the gate fail and the staleness check answer
+  // "missing" until someone rebuilds the index.
+  const existing = ((): { catalogArtifact?: unknown } => {
+    try {
+      return JSON.parse(readFileSync(registryManifestPath, "utf-8")) as {
+        catalogArtifact?: unknown;
+      };
+    } catch {
+      return {};
+    }
+  })();
   const manifest: RegistryManifest = {
     $schema: "https://hyperframes.heygen.com/schema/registry.json",
     name: "hyperframes",
     homepage: "https://hyperframes.heygen.com",
-    items: items.map((item) => ({ name: item.name, type: item.type })),
-  };
+    items,
+    ...(existing.catalogArtifact ? { catalogArtifact: existing.catalogArtifact } : {}),
+  } as RegistryManifest;
   writeFileSync(registryManifestPath, JSON.stringify(manifest, null, 2) + "\n", "utf-8");
-  console.log(`wrote ${relative(repoRoot, registryManifestPath)}`);
+  console.log(`wrote ${relative(repoRoot, registryManifestPath)} (${items.length} items)`);
 }
 
 function main(): void {
@@ -183,7 +225,6 @@ function main(): void {
     process.exit(1);
   }
 
-  const items: RegistryItem[] = [];
   for (const entry of filtered) {
     const exampleDir = join(examplesDir, entry.id);
     try {
@@ -192,14 +233,12 @@ function main(): void {
       console.warn(`skip ${entry.id}: directory not found at ${relative(repoRoot, exampleDir)}`);
       continue;
     }
-    const item = buildItem(entry);
-    writeItem(item);
-    items.push(item);
+    writeItem(buildItem(entry));
   }
 
   // Only rewrite the top-level manifest on a full-run (not --only).
   if (!only) {
-    writeRegistryManifest(items);
+    writeRegistryManifest();
   }
 }
 
diff --git a/scripts/registry-primitive-payloads.test.ts b/scripts/registry-primitive-payloads.test.ts
new file mode 100644
index 0000000000..0bf7b5b6e5
--- /dev/null
+++ b/scripts/registry-primitive-payloads.test.ts
@@ -0,0 +1,33 @@
+import { readFileSync } from "node:fs";
+import { globSync } from "node:fs";
+import { resolve } from "node:path";
+import { describe, it } from "node:test";
+import assert from "node:assert/strict";
+
+const repoRoot = resolve(import.meta.dirname, "..");
+// Any element, not just the <div> this started as: a payload that moved to a
+// <script type="application/json"> to survive the formatter must stay guarded.
+const PAYLOAD = /<(\w+)[^>]*\sdata-hf-primitive-data[^>]*>([\s\S]*?)<\/\1>/g;
+
+describe("registry primitive payloads", () => {
+  it("stay parseable JSON in the shipped source", () => {
+    const files = globSync("registry/**/*.html", { cwd: repoRoot });
+    const broken: string[] = [];
+    for (const file of files) {
+      const html = readFileSync(resolve(repoRoot, file), "utf-8");
+      for (const match of html.matchAll(PAYLOAD)) {
+        const payload = match[2] ?? "";
+        try {
+          // Same normalization the compositions apply: this is inert text in
+          // HTML, so the formatter may reflow it, and whitespace is not
+          // significant. A payload that fails even after this is genuinely
+          // malformed rather than merely wrapped.
+          JSON.parse(payload.replace(/\s*[\r\n]+\s*/g, " "));
+        } catch (error) {
+          broken.push(`${file}: ${(error as Error).message}`);
+        }
+      }
+    }
+    assert.deepEqual(broken, []);
+  });
+});
diff --git a/scripts/variables-explorer.test.ts b/scripts/variables-explorer.test.ts
new file mode 100644
index 0000000000..5ddbfc8a24
--- /dev/null
+++ b/scripts/variables-explorer.test.ts
@@ -0,0 +1,462 @@
+/**
+ * The geometry behind the catalog panel's SVG import.
+ *
+ * This is the half of the feature that fails silently. A file picker that does
+ * not open is obvious; a path fitted to the wrong box is a preview that renders
+ * blank, or microscopic, or off the edge, and every one of those looks like a
+ * composition that was always broken rather than an import that got the numbers
+ * wrong. Nothing here touches the DOM, which is exactly the split: the browser
+ * is trusted to resolve `transform` chains and measure bounding boxes, and
+ * every number this file computes itself is asserted.
+ *
+ * The rejection paths are covered too, because "no shapes found" has to arrive
+ * as a message rather than as an empty import.
+ */
+
+import assert from "node:assert/strict";
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import test from "node:test";
+import { fileURLToPath } from "node:url";
+
+/**
+ * The geometry, read out of the snippet and evaluated.
+ *
+ * Importing it would be better and is not available. Mintlify compiles a
+ * snippet as MDX and carries each exported binding into the page on its own, so
+ * a second `export const` beside `VariablesExplorer` is not in scope inside it:
+ * the panel throws `isSvgPathData is not defined` and the page loses the whole
+ * explorer. Verified on the running site, not assumed.
+ *
+ * So the functions live inside the component, between two markers, and this
+ * reads the source between them. It is a real evaluation of the shipped bytes
+ * rather than a copy that can drift, and it is plain JavaScript with no JSX,
+ * which is what makes `new Function` enough. Renaming one of them fails here
+ * loudly, which is the intent.
+ */
+const geometry = (() => {
+  const snippet = join(
+    dirname(fileURLToPath(import.meta.url)),
+    "..",
+    "docs",
+    "snippets",
+    "variables-explorer.jsx",
+  );
+  const source = readFileSync(snippet, "utf8");
+  const open = source.indexOf("// >>> svg-import geometry");
+  const close = source.indexOf("// <<< svg-import geometry");
+  assert.ok(open !== -1 && close > open, "the svg-import geometry markers are missing");
+  const names = [
+    "isSvgPathData",
+    "parsePathData",
+    "normalisePathData",
+    "arcToCubics",
+    "transformPathData",
+    "fitMatrix",
+    "printPathData",
+    "shapePathData",
+  ];
+  const body = `${source.slice(open, close)}\nreturn { ${names.join(", ")} };`;
+  return new Function(body)() as Record<string, unknown>;
+})();
+
+/** `shapePathData` answers null for a tag it does not draw; every call here passes one it does. */
+function drawn(d: string | null): string {
+  assert.ok(d, "shapePathData returned null for a shape it should draw");
+  return d;
+}
+
+/** Positional read that says which index went missing instead of yielding NaN. */
+function at<T>(values: readonly T[], index: number): T {
+  const value = values[index];
+  if (value === undefined)
+    throw new Error(`index ${index} missing from a ${values.length}-item list`);
+  return value;
+}
+
+const {
+  arcToCubics,
+  fitMatrix,
+  isSvgPathData,
+  normalisePathData,
+  parsePathData,
+  printPathData,
+  shapePathData,
+  transformPathData,
+} = geometry as {
+  arcToCubics: (...args: number[]) => { code: string; args: number[] }[];
+  fitMatrix: (
+    source: { x: number; y: number; width: number; height: number },
+    target: { x: number; y: number; width: number; height: number },
+  ) => { a: number; b: number; c: number; d: number; e: number; f: number };
+  isSvgPathData: (value: unknown) => boolean;
+  normalisePathData: (commands: unknown) => { code: string; args: number[] }[];
+  parsePathData: (d: string) => { code: string; args: number[] }[];
+  printPathData: (segments: { code: string; args: number[] }[]) => string;
+  shapePathData: (tag: string, attrs: Record<string, string>) => string | null;
+  transformPathData: (
+    segments: { code: string; args: number[] }[],
+    matrix: { a: number; b: number; c: number; d: number; e: number; f: number },
+  ) => { code: string; args: number[] }[];
+};
+
+/** Path data reduced to numbers, so an assertion can be about geometry. */
+const points = (d: string): number[] =>
+  normalisePathData(parsePathData(d)).flatMap((segment) => segment.args);
+
+const codes = (d: string): string =>
+  normalisePathData(parsePathData(d))
+    .map((segment) => segment.code)
+    .join("");
+
+const close = (actual: number, expected: number, tolerance = 1e-6): void => {
+  assert.ok(
+    Math.abs(actual - expected) <= tolerance,
+    `expected ${actual} to be within ${tolerance} of ${expected}`,
+  );
+};
+
+const closeAll = (actual: number[], expected: number[], tolerance = 1e-6): void => {
+  assert.equal(
+    actual.length,
+    expected.length,
+    `expected ${actual.length} numbers to be ${expected.length}`,
+  );
+  actual.forEach((value, index) => close(value, at(expected, index), tolerance));
+};
+
+/**
+ * The bounding box the browser would measure, computed here from the tight
+ * extremes of each segment. Cubic and quadratic extremes come from the roots of
+ * the derivative, not from the control hull, because the hull is wider than the
+ * curve and a fit computed from it would leave a visible margin.
+ */
+const boundsOf = (d: string): { x: number; y: number; width: number; height: number } => {
+  const segments = normalisePathData(parsePathData(d));
+  let x = 0;
+  let y = 0;
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  const see = (px: number, py: number): void => {
+    minX = Math.min(minX, px);
+    minY = Math.min(minY, py);
+    maxX = Math.max(maxX, px);
+    maxY = Math.max(maxY, py);
+  };
+  const cubicAt = (t: number, a: number, b: number, c: number, dd: number): number => {
+    const u = 1 - t;
+    return u * u * u * a + 3 * u * u * t * b + 3 * u * t * t * c + t * t * t * dd;
+  };
+
+  for (const { code, args } of segments) {
+    if (code === "M" || code === "L") {
+      see(at(args, 0), at(args, 1));
+      x = at(args, 0);
+      y = at(args, 1);
+    } else if (code === "Q") {
+      // A quadratic is the cubic with both controls two thirds of the way out.
+      const c1x = x + (2 / 3) * (at(args, 0) - x);
+      const c1y = y + (2 / 3) * (at(args, 1) - y);
+      const c2x = at(args, 2) + (2 / 3) * (at(args, 0) - at(args, 2));
+      const c2y = at(args, 3) + (2 / 3) * (at(args, 1) - at(args, 3));
+      for (let t = 0; t <= 1.0001; t += 0.002) {
+        see(cubicAt(t, x, c1x, c2x, at(args, 2)), cubicAt(t, y, c1y, c2y, at(args, 3)));
+      }
+      x = at(args, 2);
+      y = at(args, 3);
+    } else if (code === "C") {
+      for (let t = 0; t <= 1.0001; t += 0.002) {
+        see(
+          cubicAt(t, x, at(args, 0), at(args, 2), at(args, 4)),
+          cubicAt(t, y, at(args, 1), at(args, 3), at(args, 5)),
+        );
+      }
+      x = at(args, 4);
+      y = at(args, 5);
+    }
+  }
+  return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
+};
+
+test("the control lands on path data and on nothing that merely looks like it", () => {
+  // The two variables in the registry that carry path data today.
+  assert.equal(
+    isSvgPathData(
+      "M 92 328 C 178 142 292 138 366 276 C 430 396 500 414 558 262 C 622 94 724 112 786 274 C 836 406 894 376 930 194",
+    ),
+    true,
+  );
+  assert.equal(
+    isSvgPathData(
+      "M -90 390 C 150 490 190 70 430 185 C 650 300 720 105 850 145 C 970 180 1030 85 1090 35",
+    ),
+    true,
+  );
+  assert.equal(isSvgPathData("m0 0l10 10"), true);
+  assert.equal(isSvgPathData("  M.5.5 L1 1"), true);
+
+  // Every other registry variable whose name or value could be mistaken for it.
+  assert.equal(isSvgPathData("sweep"), false);
+  assert.equal(isSvgPathData("bulb"), false);
+  assert.equal(isSvgPathData("Marketing"), false);
+  assert.equal(isSvgPathData("Momentum"), false);
+  assert.equal(isSvgPathData("medium"), false);
+  assert.equal(isSvgPathData(12), false);
+  assert.equal(isSvgPathData(undefined), false);
+});
+
+test("relative commands become absolute", () => {
+  closeAll(points("m 10 10 l 5 0 l 0 5 z"), [10, 10, 15, 10, 15, 15]);
+  // A close returns the pen to the start of the subpath, so what follows is
+  // measured from there and not from the last drawn point.
+  closeAll(points("M 10 10 L 20 20 Z l 5 5"), [10, 10, 20, 20, 15, 15]);
+});
+
+test("a repeated coordinate pair after a moveto is a lineto", () => {
+  assert.equal(codes("M 0 0 10 0 10 10"), "MLL");
+  closeAll(points("M 0 0 10 0 10 10"), [0, 0, 10, 0, 10, 10]);
+  // Relative, where the second pair is measured from the first.
+  closeAll(points("m 5 5 5 0"), [5, 5, 10, 5]);
+});
+
+test("horizontal and vertical commands keep the coordinate they do not carry", () => {
+  closeAll(points("M 10 20 H 40 V 60 h -10 v -10"), [10, 20, 40, 20, 40, 60, 30, 60, 30, 50]);
+});
+
+test("a smooth curve reflects the previous control point", () => {
+  const smooth = normalisePathData(parsePathData("M 0 0 C 10 10 20 10 30 0 S 50 -10 60 0"));
+  assert.deepEqual(
+    smooth.map((segment) => segment.code),
+    ["M", "C", "C"],
+  );
+  // Reflection of (20, 10) through the current point (30, 0).
+  closeAll(at(smooth, 2).args, [40, -10, 50, -10, 60, 0]);
+
+  // With no cubic in front of it, the reflection is the current point itself.
+  const orphan = normalisePathData(parsePathData("M 5 5 S 20 20 30 5"));
+  closeAll(at(orphan, 1).args, [5, 5, 20, 20, 30, 5]);
+});
+
+test("a smooth quadratic reflects the previous quadratic control point", () => {
+  const smooth = normalisePathData(parsePathData("M 0 0 Q 10 20 20 0 T 40 0"));
+  assert.deepEqual(
+    smooth.map((segment) => segment.code),
+    ["M", "Q", "Q"],
+  );
+  closeAll(at(smooth, 2).args, [30, -20, 40, 0]);
+});
+
+test("an arc becomes cubics that stay on the ellipse", () => {
+  // A half circle of radius 50, left to right over the top.
+  const segments = normalisePathData(parsePathData("M 0 0 A 50 50 0 0 1 100 0"));
+  assert.deepEqual(
+    segments.map((segment) => segment.code),
+    ["M", "C", "C"],
+  );
+  // The endpoint is the authored one exactly, so a closed shape still closes.
+  closeAll(at(segments, 2).args.slice(4), [100, 0]);
+
+  const bounds = boundsOf("M 0 0 A 50 50 0 0 1 100 0");
+  close(bounds.x, 0, 0.01);
+  close(bounds.width, 100, 0.01);
+  // Sweep 1 with y down is the arc below the chord.
+  close(bounds.height, 50, 0.02);
+
+  // A zero radius is a straight line, and coincident endpoints draw nothing.
+  assert.deepEqual(arcToCubics(0, 0, 0, 10, 0, 0, 1, 10, 10), [{ code: "L", args: [10, 10] }]);
+  assert.deepEqual(arcToCubics(5, 5, 10, 10, 0, 0, 1, 5, 5), []);
+
+  // Radii too small to reach the far endpoint are grown until they just do,
+  // which keeps the curve passing through both ends instead of falling short.
+  const stretched = arcToCubics(0, 0, 1, 1, 0, 0, 1, 100, 0);
+  closeAll(at(stretched, stretched.length - 1).args.slice(4), [100, 0]);
+});
+
+test("scale to fit preserves aspect ratio and centres", () => {
+  // A 100 x 50 source into a 400 x 400 box: width is the binding dimension.
+  const matrix = fitMatrix(
+    { x: 0, y: 0, width: 100, height: 50 },
+    { x: 0, y: 0, width: 400, height: 400 },
+  );
+  close(matrix.a, 4);
+  close(matrix.d, 4);
+  assert.equal(matrix.b, 0);
+  assert.equal(matrix.c, 0);
+  // Centred: 50 units of height scale to 200, leaving 100 above and below.
+  close(matrix.e, 0);
+  close(matrix.f, 100);
+
+  // The source's own origin is subtracted, so a shape that sits far from (0, 0)
+  // arrives in the middle rather than in the same corner it started in.
+  const offset = fitMatrix(
+    { x: 900, y: 900, width: 100, height: 100 },
+    { x: 0, y: 0, width: 200, height: 200 },
+  );
+  close(offset.a, 2);
+  close(offset.e, 100 - 950 * 2);
+  close(offset.f, 100 - 950 * 2);
+
+  // The target's own origin is honoured too, which is what puts an import
+  // inside the box a primitive's default occupies rather than at the top left.
+  const placed = fitMatrix(
+    { x: 0, y: 0, width: 10, height: 10 },
+    { x: 100, y: 200, width: 10, height: 10 },
+  );
+  close(placed.e, 100);
+  close(placed.f, 200);
+});
+
+test("a flat source is sized by the dimension it has", () => {
+  // A horizontal route has no height. Taking the smaller of the two ratios
+  // blindly would scale it by zero and import an empty path.
+  const matrix = fitMatrix(
+    { x: 0, y: 10, width: 100, height: 0 },
+    { x: 0, y: 0, width: 500, height: 300 },
+  );
+  close(matrix.a, 5);
+  close(matrix.f, 150 - 10 * 5);
+});
+
+test("the two shipped defaults keep their own geometry when refitted to themselves", () => {
+  const defaults = [
+    "M 92 328 C 178 142 292 138 366 276 C 430 396 500 414 558 262 C 622 94 724 112 786 274 C 836 406 894 376 930 194",
+    "M -90 390 C 150 490 190 70 430 185 C 650 300 720 105 850 145 C 970 180 1030 85 1090 35",
+  ];
+  for (const d of defaults) {
+    const source = boundsOf(d);
+    const refitted = printPathData(
+      transformPathData(normalisePathData(parsePathData(d)), fitMatrix(source, source)),
+    );
+    const after = boundsOf(refitted);
+    close(after.x, source.x, 0.01);
+    close(after.y, source.y, 0.01);
+    close(after.width, source.width, 0.01);
+    close(after.height, source.height, 0.01);
+  }
+});
+
+test("an import lands inside the box the default occupies", () => {
+  // A 24 unit icon, the size a real file arrives at, into the stroke trace's
+  // own default. Lifted verbatim it would be a speck in the top left corner.
+  const target = boundsOf(
+    "M 92 328 C 178 142 292 138 366 276 C 430 396 500 414 558 262 C 622 94 724 112 786 274 C 836 406 894 376 930 194",
+  );
+  const icon = "M 2 2 L 22 2 L 22 22 L 2 22 Z";
+  const source = boundsOf(icon);
+  const fitted = boundsOf(
+    printPathData(
+      transformPathData(normalisePathData(parsePathData(icon)), fitMatrix(source, target)),
+    ),
+  );
+
+  // Square in, square out.
+  close(fitted.width, fitted.height, 0.01);
+  // Bound by the shorter dimension of the target, and centred in the longer.
+  close(fitted.height, target.height, 0.01);
+  close(fitted.x + fitted.width / 2, target.x + target.width / 2, 0.01);
+  close(fitted.y + fitted.height / 2, target.y + target.height / 2, 0.01);
+  // Inside the target box on both axes, which is what "not clipped" means here.
+  assert.ok(
+    fitted.x >= target.x - 0.01 && fitted.x + fitted.width <= target.x + target.width + 0.01,
+  );
+});
+
+test("a matrix moves every point of every command", () => {
+  const segments = normalisePathData(parsePathData("M 1 2 L 3 4 C 5 6 7 8 9 10 Q 11 12 13 14 Z"));
+  // A rotation and a mirror, which is where a command carrying anything other
+  // than x/y pairs would go wrong.
+  const moved = transformPathData(segments, { a: 0, b: 1, c: -1, d: 0, e: 100, f: 200 });
+  closeAll(at(moved, 0).args, [98, 201]);
+  closeAll(at(moved, 1).args, [96, 203]);
+  closeAll(at(moved, 2).args, [94, 205, 92, 207, 90, 209]);
+  closeAll(at(moved, 3).args, [88, 211, 86, 213]);
+  assert.deepEqual(at(moved, 4), { code: "Z", args: [] });
+});
+
+test("rect, circle, ellipse, line, polyline and polygon become path data", () => {
+  assert.equal(
+    drawn(shapePathData("rect", { x: "10", y: "20", width: "30", height: "40" })),
+    "M 10 20 H 40 V 60 H 10 Z",
+  );
+
+  // A rounded rect: eight corners' worth of geometry, and the corners survive
+  // the reduction as cubics.
+  const rounded = drawn(shapePathData("rect", { width: "100", height: "60", rx: "10" }));
+  assert.equal(codes(rounded), "MLCLCLCLCZ");
+  const roundedBounds = boundsOf(rounded);
+  closeAll(
+    [roundedBounds.x, roundedBounds.y, roundedBounds.width, roundedBounds.height],
+    [0, 0, 100, 60],
+    0.01,
+  );
+
+  // One radius declared defines both, which is what a file exported with only
+  // `rx` relies on, and a radius past half the side is clamped to it.
+  const clamped = boundsOf(drawn(shapePathData("rect", { width: "40", height: "40", ry: "500" })));
+  closeAll([clamped.width, clamped.height], [40, 40], 0.01);
+
+  const circle = boundsOf(drawn(shapePathData("circle", { cx: "50", cy: "50", r: "25" })));
+  closeAll([circle.x, circle.y, circle.width, circle.height], [25, 25, 50, 50], 0.05);
+
+  const ellipse = boundsOf(
+    drawn(shapePathData("ellipse", { cx: "0", cy: "0", rx: "40", ry: "10" })),
+  );
+  closeAll([ellipse.width, ellipse.height], [80, 20], 0.05);
+
+  assert.equal(
+    drawn(shapePathData("line", { x1: "0", y1: "0", x2: "10", y2: "5" })),
+    "M 0 0 L 10 5",
+  );
+  assert.equal(
+    drawn(shapePathData("polyline", { points: "0,0 10,10 20,0" })),
+    "M 0 0 L 10 10 L 20 0",
+  );
+  assert.equal(
+    drawn(shapePathData("polygon", { points: "0 0 10 10 20 0" })),
+    "M 0 0 L 10 10 L 20 0 Z",
+  );
+  assert.equal(drawn(shapePathData("path", { d: "M 0 0 L 1 1" })), "M 0 0 L 1 1");
+});
+
+test("a shape with nothing to draw is refused rather than imported as nothing", () => {
+  assert.equal(shapePathData("rect", { width: "0", height: "10" }), null);
+  assert.equal(shapePathData("circle", { r: "0" }), null);
+  assert.equal(shapePathData("ellipse", { rx: "10" }), null);
+  assert.equal(shapePathData("line", { x1: "5", y1: "5", x2: "5", y2: "5" }), null);
+  assert.equal(shapePathData("polygon", { points: "1,1" }), null);
+  assert.equal(shapePathData("path", { d: "   " }), null);
+  // Not a shape at all. `<text>` is the one the panel names in its message.
+  assert.equal(shapePathData("text", { x: "0" }), null);
+  assert.equal(shapePathData("image", { href: "a.png" }), null);
+});
+
+test("malformed path data throws instead of producing half a path", () => {
+  assert.throws(() => parsePathData("10 20 30"), /must open with a command/);
+  assert.throws(() => parsePathData("M 10"), /expected a number/);
+  assert.throws(() => parsePathData("M 0 0 X 1 2"), /unknown command/);
+  assert.throws(() => parsePathData("M 0 0 A 5 5 0 9 1 10 10"), /expected an arc flag/);
+  assert.throws(() => parsePathData("M 0 0 Z 5 5"), /expected a command/);
+  assert.throws(() => parsePathData("   "), /empty/);
+});
+
+test("the grammar's compact spellings are read the way a browser reads them", () => {
+  // No separator between a number and the next sign, and a leading dot.
+  closeAll(points("M0 0L-1-2L.5.25"), [0, 0, -1, -2, 0.5, 0.25]);
+  // Exponents, which the number scanner has to take and the command scanner
+  // has to not mistake for an `e` command.
+  closeAll(points("M 1e2 2E1 L 1.5e-1 0"), [100, 20, 0.15, 0]);
+  // Arc flags written as bare adjacent digits, which is legal and common in
+  // minified output: rx=1 ry=1 rotation=0 largeArc=0 sweep=1 x=1 y=1.
+  const arc = normalisePathData(parsePathData("M 0 0 a1 1 0 011 1"));
+  closeAll(at(arc, arc.length - 1).args.slice(4), [1, 1]);
+});
+
+test("printing keeps two decimals and drops a negative zero", () => {
+  assert.equal(printPathData([{ code: "M", args: [1.23456, -0.001] }]), "M 1.23 0");
+  assert.equal(printPathData([{ code: "Z", args: [] }]), "Z");
+  // Spaces, which is the reason the query encoding on this path had to be
+  // fixed: form encoding turns each of these into a `+` and the `d` is invalid.
+  assert.ok(printPathData([{ code: "M", args: [0, 0] }]).includes(" "));
+});
diff --git a/skills-manifest.json b/skills-manifest.json
index cb128dc75d..82bbd2ea4f 100644
--- a/skills-manifest.json
+++ b/skills-manifest.json
@@ -42,8 +42,8 @@
       "files": 3
     },
     "hyperframes-registry": {
-      "hash": "eca45f795c2ff093",
-      "files": 10
+      "hash": "9a4049ea33f0b914",
+      "files": 12
     },
     "media-use": {
       "hash": "1fc64413fe651bde",
diff --git a/skills/hyperframes-registry/references/component-quality-bar.md b/skills/hyperframes-registry/references/component-quality-bar.md
new file mode 100644
index 0000000000..c34ec97847
--- /dev/null
+++ b/skills/hyperframes-registry/references/component-quality-bar.md
@@ -0,0 +1,250 @@
+# Component quality bar
+
+What a catalog component has to be for us to keep shipping it. Every criterion here comes from a
+defect found and verified on this branch, not from taste.
+
+A registry component is a motion primitive an author installs into their own composition and
+ships. The catalog page is marketing; the installed file is the product. Every criterion below is
+therefore evaluated against **the item's own `<name>.html`, mounted alone**, never against
+`demo.html` and never against the catalog page, because both of those carry scaffolding the author
+does not receive.
+
+Read this before auditing, scoring or cutting anything. It exists so several people auditing in
+parallel reach the same verdict on the same item.
+
+## The one rule
+
+> An item earns its place when the file the author installs, mounted by itself on the ground it
+> was designed for, renders the subject its name promises and moves the way its description says.
+> Anything that fails that and cannot be fixed into something no other item already does is cut.
+
+## How an audit runs
+
+Two passes, in this order. The mechanical pass is free and runs across every item in seconds; the
+visual pass costs a browser and eyes, so it is spent only on what the mechanical pass could not
+decide. A mechanical signal is a **candidate**, never a verdict.
+
+| Pass           | Cost           | Decides                                                                                  |
+| -------------- | -------------- | ---------------------------------------------------------------------------------------- |
+| **Mechanical** | grep and hash  | duplicates, missing timeline, banned hexes, empty markup, name gaps, unbounded variables |
+| **Visual**     | render and eye | renders at all, implements its description, legible, deterministic                       |
+
+`hyperframes check` is not a visual gate. It passes compositions that render nothing: a blank plot
+produces no error, no warning and no layout finding, because an empty render is a valid render. No
+criterion below may rest on `check` alone.
+
+### The mount harness
+
+Three ways to get a false verdict from a working item, all of them the harness's fault. Build the
+shell like this or the audit invents defects.
+
+1. **Two shapes of item, two ways to mount.** If the file, with HTML comments stripped, contains a
+   `data-composition-id`, it is a sub-composition: mount it with
+   `data-composition-src="./<name>.html"` on a clip. If it does not, it is a snippet: paste it
+   inline inside a `class="clip"` div. Inlining a sub-composition nests a document in a document
+   and renders black, which reads exactly like a dead item.
+2. **Use the item's own ground.** Take the background off its `demo.html` body rule. A snippet
+   whose ink defaults to `#18181b` is a 16:1 headline on its own `#f7f7f8` and an invisible 1.5:1
+   smudge on a dark stage. The stage is not evidence.
+3. **Load GSAP and register a paused root timeline**, then snapshot with
+   `hyperframes snapshot . --at 0.05,1.2,2.5,4.0 --no-end` and read the contact sheet.
+
+An item whose own `data-duration` is shorter than the shell's will be blank in the last frames.
+That is arithmetic, not a defect.
+
+## Fatal, cut the item
+
+Fatal means there is nothing worth keeping underneath the defect: no edit short of writing a
+different item fixes it, or the fix produces something the catalog already ships. Cite the named
+evidence; a fatal verdict without it does not count.
+
+**F1. Does not implement its own description.** The markup contains no trace of the subject the
+item is named and described for. Not "renders badly", but "the thing is absent from the file".
+`ecosystem-constellation`, `hero-device-assemble` and `terminal-to-browser-deploy` are the same
+file holding empty card divs with different headings.
+_Check:_ read the markup, then swap the name for any other item's name. If nothing in the file
+would have to change, the name is a label on a generic shell.
+_Evidence:_ the named subject has no element (no nodes in a constellation, no terminal in a
+terminal deploy).
+
+**F2. Redundant duplicate.** Same **motion fingerprint** and same **markup skeleton** as another
+item that survives. Fingerprint is the gsap call list with selectors neutralised, keeping props,
+durations and eases; skeleton is the tag sequence with classes and text stripped. One wipe
+currently ships eight times with the same properties, durations and easings; one word-stagger
+ships seven times.
+_Evidence:_ both hashes match a sibling, and the sibling wins the tie-break below.
+
+**F3. Renders nothing.** Frames are blank, or the named subject never appears, with the item
+mounted correctly on its own ground and its recipe applied.
+_Evidence:_ four blank frames plus the cause, in the item rather than the harness: a missing
+sibling asset, a `ReferenceError` in the console, a subject that never enters the viewport. A
+frame-capture artifact that renders correctly live is a false alarm, so confirm on a real page
+before recording it.
+
+**F4. The description is a different item.** The frames show the promised event never happening: a
+wipe that never reveals its second panel, a chart that draws no series. Not a wording gap.
+
+**F5. Cannot be made seekable.** Frame N genuinely depends on frame N-1 with no closed form and no
+bounded replay, and making it seekable would make it a different effect. Rare. Most accumulators
+have a trivial rewrite, so reach for this only after establishing there is none; a seeded,
+index-derived replacement for `Math.random()` is X7, not F5.
+_Evidence:_ two snapshots of the same timestamp reached by different seek paths differ.
+
+## Fixable, keep and repair
+
+Real defects, but the item has a reason to exist that nothing else covers and the repair is
+bounded. Log the specific fix, never "needs polish".
+
+**X1. No timeline of its own.** No `__timelines` registration, so the installed artifact renders a
+still frame while the catalog page looks fine, because the generator transplants the demo's
+timeline into the preview. 97 of the 213 new components are in this state.
+_Repair:_ fold the trailing `Timeline integration:` recipe into a real `<script>` that builds a
+paused timeline and registers it. Roughly 10 to 15 minutes for a single-element item.
+_Escalates to fatal_ only when there is no motion anywhere to fold in, which usually means F1 too.
+
+**X2. Name claims a technique the code lacks.** Grep the code region, never the doc header: the
+header's prose is full of the exact words you are looking for, and will report a match on an item
+that has none.
+| Name pattern | Must contain |
+| -------------------------------- | -------------------------------------------------- |
+| `spring-*` | `elastic`, `back.`, `bounce` or a custom spring ease |
+| `mask-*`, `*-mask*` | `mask` or `clip-path` |
+| `frosted*`, `*glass*` | `backdrop-filter` |
+| `*3d*`, `*depth*`, `*orbit*`, `*camera*` | `perspective`, `rotateX`, `rotateY`, `translateZ` |
+| `*-draw`, `*-trace`, `*stroke*` | `stroke-dash` or `pathLength` |
+_Repair:_ add the technique, or rename the item. Renaming is often the honest fix.
+
+**X3. Illegible.** At 1920x1080 on its own ground: text under 4.5:1, or a subject whose smallest
+meaningful feature is under about 24px.
+_Repair:_ one value step, per `placeholder-material.md`. Text never sits below L1.
+
+**X4. Placeholder gradients.** The purple and blue palette standing in for content.
+_Repair:_ the monochrome ramp. Already done across the catalog, so a new instance is a regression,
+not a legacy defect.
+
+**X5. Hardcoded ink, no theme token.** A literal colour on the item's own text or subject with no
+`var(--...)` fallback chain, so it disappears when an author drops it on the opposite theme.
+_Repair:_ route it through the theme token with the literal as fallback.
+
+**X6. No markup of its own.** The file is a `<style>` and a `<script>` and nothing else, so
+mounting it renders an empty box.
+_Repair:_ ship sample markup, or declare it an attachment snippet in `registry-item.json` and give
+the demo a host element.
+
+**X7. Unseeded randomness.** Scatter derived from `Math.random()` rather than the element index.
+_Repair:_ derive from the index.
+
+**X8. Declared bounds it cannot honour.** A number variable with no `min`/`max`, so the control
+offers values the item cannot express, or a default it can never return to.
+_Repair:_ declare real bounds, or use a numeric field instead of a slider.
+
+## Duplicates, which one survives
+
+A group is the set of items sharing both hashes from F2. Exactly one survives, chosen in order:
+
+1. **The one whose name describes what the shared motion actually does.** A group where one member
+   is a directional wipe and the rest borrowed it keeps the directional wipe.
+2. **Then the one with subject-specific markup.** More elements that only make sense for that
+   name, not more elements.
+3. **Then the one already on `origin/main`.** Removing a shipped item breaks installs.
+4. **Never a member whose name claims something the shared implementation does not do.**
+   `frosted-glass-wipe` has no `backdrop-filter`, `spring-scale-in` has no spring, `mask-reveal-up`
+   has no mask, so none of those three is the survivor. Such a member is F2 and X2 at once, and X2
+   cannot be fixed without breaking the group. If no member is honest, keep the plainest name.
+
+**If every member of a group fails F1, the group is cut entire.** Do not preserve a survivor to
+soften the count. Twelve names on one empty card shell is one bad item, not twelve, and keeping one
+of them keeps the bad item.
+
+Same motion with genuinely different subjects is not a duplicate. A bar chart, a line chart and a
+dashboard populate can share a stagger; the subject is the item.
+
+## Never cut
+
+Protection is per criterion, not blanket. A protected item still answers every other row.
+
+**N1. Load-bearing colour** is exempt from X4 only. `chromatic-aberration-wipe` (the RGB split is
+the effect), `confetti` (multi-hue is the celebration), `matrix-decode` (green is its identity),
+`mesh-gradient-bg` (the gradient is the subject), `multi-device-splay`. `us-map`'s gradient is a
+sequential choropleth scale, which is colour carrying data.
+
+**N2. Real product depiction** is exempt from X4 and F1. A Figma logo inside a Figma mock is not
+slop; the HyperFrames wordmark in `logo-brand-close` is the subject. Judge the placeholder content,
+not the depicted product.
+
+**N3. Deliberate static** is exempt from X1. An item whose description promises no motion is not
+failing X1. A style snippet or a passive overlay is allowed to sit still.
+
+**N4. Environment sets** are exempt from F3. An item that is a backdrop rather than a shot is not
+failing F3 for being calm. Measured PSNR between frames separates the two: sets score 45 or higher,
+things that genuinely run score 17 to 24. Judge against the description.
+
+**N5. A rest state that is the recipe's `from` state** is exempt from F3. `confetti` ships
+`.particle` spans sitting at opacity 0 until the timeline fans them out. Still is not dead.
+
+**N6. Attachment snippets** are exempt from F3. A text splitter has no markup by design. Grade X6.
+
+**N7. The 36 items already on `origin/main`** are out of audit scope.
+
+## Mechanical first pass
+
+| Signal              | How                                                                                   | Maps to |
+| ------------------- | ------------------------------------------------------------------------------------- | ------- |
+| No timeline         | `grep -L __timelines` over each composition                                           | X1      |
+| Duplicate           | motion fingerprint AND markup skeleton hashes, matched pairwise                       | F2      |
+| Empty shell         | markup skeleton matches an unrelated item, or is `<h3>` + `<p>` + generic panels only | F1      |
+| No markup at all    | element count of the comment-, style- and script-stripped file is 0                   | X6      |
+| Placeholder palette | grep the six banned hexes                                                             | X4      |
+| Name gap            | the X2 table, grepped over the code region only                                       | X2      |
+| Unbounded number    | read `min`/`max` in `registry-item.json`                                              | X8      |
+| Non-determinism     | grep `Math.random`, `Date.now`, `performance.now`, `requestAnimationFrame`            | X7, F5  |
+
+## Visual pass, required for a verdict
+
+Render at least four frames across the duration from the **composition**, not the demo, mounted per
+the harness rules above, and look at them. Then, for anything not scoring clean, confirm on the
+real catalog page before recording it.
+
+Record per item: the criteria it fails, the evidence you saw, and fatal or fixable. An unviewed
+item is not a pass.
+
+## Calibration
+
+Ten items scored with this rubric, frames rendered and looked at. Three of them corrected the
+rubric rather than the other way round.
+
+| Item                         | Expected   | Frames actually showed                                                                                                    | Verdict            |
+| ---------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------ |
+| `ecosystem-constellation`    | fatal      | Sidebar with three pill buttons and three empty white panels. No nodes, no edges. Identical at all four timestamps.       | **Cut** F1, F2, F4 |
+| `terminal-to-browser-deploy` | fatal      | Pixel-identical to the above, only the `<h3>` and one subtitle differ. No terminal, no browser.                           | **Cut** F1, F2, F4 |
+| `frosted-glass-wipe`         | fatal      | One card reading "Before", static, forever; the "After" panel stays clipped. Recipe byte-identical to `directional-wipe`. | **Cut** F2, F4, X2 |
+| `char-slam-explode`          | pass       | Letters scattered at 0.05s, assembled into "Impact" by 1.2s, held. Real per-character motion.                             | **Keep**           |
+| `echo-trail`                 | pass       | Card travels left to right with a decaying blurred echo trail behind it. Legible on its own light ground.                 | **Keep**           |
+| `logo-brand-close`           | pass       | "H" resolves into the full wordmark, tagline and URL land after it. Staged, legible.                                      | **Keep**           |
+| `blur-in`                    | borderline | Still, but the still is the correct rest state: legible headline, unique implementation, theme-token ink.                 | **Keep**, X1       |
+| `spring-scale-in`            | borderline | Legible on its own `#f7f7f8`. Ease is `power3.out`, no spring anywhere. Shares its recipe with six others.                | **Cut** F2, X2     |
+| `confetti`                   | borderline | Card and mesh, no particles visible. Source ships `.particle` spans the recipe fans out from opacity 0.                   | **Keep**, X1       |
+| `bottom-up-letters`          | borderline | Four blank frames. The file is a splitter with no markup at all.                                                          | **Keep**, X6       |
+
+Three corrections the calibration forced, all of them false cuts:
+
+- `spring-scale-in` first scored X3 at roughly 1.5:1. That was the harness's dark stage, not the
+  item. Hence "use the item's own ground".
+- `confetti` first scored F3. Its rest state is its recipe's `from` state. Hence N5.
+- `char-slam-explode` first scored F3 with four black frames. It is a sub-composition and was being
+  inlined. Hence the two-shapes rule.
+
+A rubric that cuts a working item is wrong even when the verdict is convenient.
+
+## Checklist
+
+Per item, in order. Stop at the first fatal.
+
+- [ ] Mounted the right way for its shape, on its own ground, with GSAP and a paused root.
+- [ ] F1: the markup contains the named subject.
+- [ ] F2: motion fingerprint and markup skeleton are not both shared with a survivor.
+- [ ] F3: it renders something with the recipe applied, or it is protected by N3 to N6.
+- [ ] F4: the frames show the event the description promises.
+- [ ] F5: frame N is computed from N.
+- [ ] X1 through X8 logged with the specific fix.
+- [ ] Verdict cites the evidence the criterion names, not an impression.
diff --git a/skills/hyperframes-registry/references/contributing.md b/skills/hyperframes-registry/references/contributing.md
index 14bf58bd2b..10a00191fc 100644
--- a/skills/hyperframes-registry/references/contributing.md
+++ b/skills/hyperframes-registry/references/contributing.md
@@ -89,6 +89,10 @@ Apply the correct template based on type. See [templates.md](templates.md) for c
 
 #### All types
 
+- **Placeholder content is monochrome** — read
+  [placeholder-material.md](placeholder-material.md) before choosing a single colour. Stand-in
+  screens, images, cards, avatars, logos and chart series use four alpha steps of the
+  composition's ink; accent marks one element and never a placeholder.
 - `data-composition-id` MUST match `window.__timelines["id"]`
 - All element IDs prefixed with block abbreviation
 - `gsap.timeline({ paused: true })` — always paused
diff --git a/skills/hyperframes-registry/references/placeholder-material.md b/skills/hyperframes-registry/references/placeholder-material.md
new file mode 100644
index 0000000000..d6648aafc4
--- /dev/null
+++ b/skills/hyperframes-registry/references/placeholder-material.md
@@ -0,0 +1,149 @@
+# Placeholder material
+
+Registry items ship with stand-in content: a rectangle where the user's screenshot goes, a
+bar where their number goes, a chip where their teammate's face goes. That stand-in is
+**placeholder material**, and it is monochrome. No hue, no colour ramps, no purple-to-blue
+diagonal fill.
+
+The rule exists because placeholder colour is always arbitrary. A violet card, a blue logo
+tile and a rainbow avatar row assert a brand the composition does not have; across 250 items
+the same three arbitrary hues become the catalog's identity instead of the author's. Value
+says everything colour was saying here, and says it truthfully.
+
+## The one rule
+
+> Placeholder content carries no hue. It is built from four alpha steps of the composition's
+> own ink over the composition's own ground, plus a hairline. Accent marks one element per
+> composition, and never a placeholder.
+
+## The ramp
+
+Four fill steps and a hairline. All of them are the ink at an alpha, so the ramp inverts for
+free on dark themes and needs no second table.
+
+| Step   | Ink alpha | What it is for                                                               |
+| ------ | --------- | ---------------------------------------------------------------------------- |
+| `ink`  | 100%      | Real content: headline, number, label. Not placeholder.                      |
+| `L1`   | 72%       | The subject. Chart bars, a filled logo mark, a play glyph, a front avatar.   |
+| `L2`   | 45%       | Support. A comparison series, avatars behind the front one, secondary icons. |
+| `L3`   | 18%       | Media fill and skeleton text lines. "Content lives here."                    |
+| `L4`   | 8%        | Recessed plate interiors. The tray a card sits in.                           |
+| `hair` | 14%       | Every 1px boundary. Replaces the separation a gradient edge was doing.       |
+
+Write them the way the file already writes colour:
+
+```css
+/* theme-token primitives (--fg / --surface available) */
+background: color-mix(in srgb, var(--fg, #f8fafc) 18%, transparent);
+
+/* fixed-palette ports (local --hf-ink, no theme tokens) */
+background: rgba(17, 24, 39, 0.18);
+```
+
+**Four steps, not eight.** Grays go muddy when adjacent steps sit close together, so every
+step is at least 1.6x the alpha of the one below it. Reaching for a fifth value is the signal
+that the layout, not the palette, needs the work. Snap to the nearest step instead.
+
+Contrast, measured against both shipped grounds (`neutral` light `#fcfcfd`, `bold` dark
+`#1b1230`): L1 is 7.7:1 / 8.9:1, L2 is 3.1:1 / 4.4:1, L3 and L4 are below 3:1 by design.
+Therefore **text never goes below L1**, and L2 is the floor for any graphic a viewer has to
+compare (a chart series, a state indicator). L3 and L4 are for surfaces only.
+
+## Depth without colour
+
+In priority order. Reach for the first one that works.
+
+1. **Value step.** Nothing sits on the same step as its ground. One full step of separation
+   minimum. This alone resolves most stacking.
+2. **Hairline.** `1px` of `hair` on every plate boundary. A border separates two surfaces more
+   cleanly than a gradient ever did, and survives video compression that eats a soft edge.
+3. **Negative space.** Padding is elevation. A plate with `--space-2` inside it reads as raised
+   without any fill difference at all.
+4. **Texture, at the finest grain only.** A `repeating-linear-gradient` at `L3`-and-below,
+   period 2-4px, achromatic. This is the one thing value cannot say: a flat gray rectangle
+   reads as an empty box, the same rectangle finely hatched reads as a surface with content on
+   it. Use it to mark media, nothing else.
+
+Shadows are allowed and must be achromatic and diffuse: `0 Npx 3Npx rgba(0,0,0,0.18)`. Never a
+coloured glow; a glow is an accent wearing a shadow's clothes.
+
+## Reading each kind in black and white
+
+A gray rectangle has to still say _screen_ and not _image_. Shape, aspect, glyph and texture
+carry the meaning that hue was carrying badly.
+
+| Kind            | Signature                                                                                                                                |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
+| Screen / device | Device aspect + `--radius` + `hair` + scanline texture at L3 + inset vignette. The chrome is the signal; the fill is L3 and stays quiet. |
+| Video footage   | Screen signature plus a centred play triangle in a ring at L1. The glyph is what makes it video rather than a static screen.             |
+| Image           | 4:3 or 3:2 plate at L3 with a horizon-and-disc glyph at L2, offset toward a corner, never centred. Offset is what reads as "photo".      |
+| Card            | Plate at L4, `hair` border, two skeleton rules at L3 (100% and 62% width). Two rules of unequal length is the whole idiom.               |
+| Avatar / person | **Circle** at L2 with initials knocked out in the ground colour. Stacks differ by step (L1 front, L2, L3), never by hue.                 |
+| Logo / brand    | **Rounded square** at L1 with the mark knocked out in the ground colour. Every mark on the same step: a logo wall means "many, equal".   |
+| Chart series    | Flat fills. Primary series L1, comparison series L2, gridlines `hair`. Never a gradient inside a bar.                                    |
+| Text block      | Rounded rules at L3, widths 100 / 86 / 62%. The ragged right edge is what reads as prose.                                                |
+
+Circle means person, rounded square means app or brand. Keeping those two shapes distinct is
+what lets both live at the same value step without ambiguity.
+
+Why no gradient inside a chart bar: a vertical light-to-dark fill makes every bar lighter at
+its top, so the tallest bar reads _palest_ exactly where the eye lands to compare heights. The
+decoration contradicts the data. Flat fills are both plainer and more honest.
+
+## Accent
+
+The accent enum stays. `green` rides `--brand`, `blue` rides `--accent`, `violet` rides
+`--accent-2`, exactly as before, and every declared `accent` or `tone` variable keeps working
+unchanged. What changes is where accent is allowed to land:
+
+> Accent marks at most **one** element per composition, and only where the accent _is_ the
+> meaning: the selected tier, the current step, the figure a count-up lands on, the ink of a
+> stroke being drawn. Placeholder content is never accent-coloured.
+
+Fixed-palette ports have no theme tokens, so they get the accent through their own
+variable with a neutral fallback:
+
+```css
+/* was: --hf-accent: #2563eb; */
+--hf-accent: var(--accent, #18181b);
+```
+
+Unthemed, the item renders in pure black and white. Drop it into a themed composition and
+the author's accent lands on that one element and nowhere else. Where the accent is chosen by
+an enum, the lookup table maps to tokens, never to hex: `green` to `var(--brand, <neutral>)`,
+`blue` to `var(--accent, <neutral>)`, `violet` to `var(--accent-2, <neutral>)`. The enum's
+declared options and default are unchanged, so no mount breaks.
+
+"One element" means one role, not one node: an app mark repeated on three devices of the same
+mock is still one element.
+
+Killing accent outright was the alternative and it is worse. Accent is already load-bearing in
+exactly the cases where it is correct, and it is the only hook an author has for their own
+brand; removing it would push those cases into value tricks for a job one hue does better with
+one element. The failure was never that accent existed, it was that accent had become the
+default fill for every placeholder. Capping it at one element fixes the failure with no
+variable migration.
+
+## Gradients that stay
+
+The ban is on **hue-carrying fills**, not on the CSS function. These are material, not
+placeholder, and flattening them breaks the thing the item exists to do:
+
+- **Physical surfaces** — device bezels, brushed metal, glass, a screen's inner vignette.
+- **Sheens and sweeps** — `linear-gradient(90deg, transparent, rgba(255,255,255,0.75), transparent)`
+  driven across an element. That is motion, not decoration.
+- **Scrims and vignettes** — `rgba(0,0,0,α)` ramps that buy text contrast over media.
+- **Effects whose subject is the gradient** — aurora, liquid glass, chromatic aberration,
+  grain fields, shader transitions. The gradient is the product.
+
+All four are achromatic or physically motivated. If a gradient is neither, it is placeholder
+slop and it goes.
+
+## Checklist
+
+- [ ] No `#7c3aed`, `#2563eb`, `#6366f1`, `#8b5cf6`, `#a855f7`, `#4f46e5` anywhere in the item.
+- [ ] Every placeholder fill is `ink` at 72 / 45 / 18 / 8 / 14 percent, and nothing else.
+- [ ] At most one accent-coloured element, and it means something.
+- [ ] Text sits at L1 or above; L3 and L4 carry no text.
+- [ ] Every remaining gradient is a surface, a sweep, a scrim, or the effect itself.
+- [ ] `hyperframes check` passes, and a rendered frame was looked at.
diff --git a/themes/CONTRACT.md b/themes/CONTRACT.md
new file mode 100644
index 0000000000..ecf56cc48a
--- /dev/null
+++ b/themes/CONTRACT.md
@@ -0,0 +1,32 @@
+# Theme token contract
+
+Theme packs provide one global value for every contract token. Primitive HTML consumes these tokens at the point of use with a fallback, for example `var(--fg, #f8fafc)`. Primitive HTML must not declare contract tokens in `:root` because those declarations escape composition scoping.
+
+The source plan calls this a 16-token contract, but its enumerated list contains 17 properties because the three spacing tokens are separate properties. The BUILT primitive audit adds `--accent-2`, which is consumed by three background primitives. The effective gate contract therefore contains 18 tokens.
+
+## Final token set
+
+| Group             | Tokens                                                                                  |
+| ----------------- | --------------------------------------------------------------------------------------- |
+| Palette           | `--bg`, `--fg`, `--muted`, `--surface`, `--border`, `--brand`, `--accent`, `--accent-2` |
+| Type              | `--font-display`, `--font-body`, `--font-mono`                                          |
+| Shape and spacing | `--radius`, `--space-1`, `--space-2`, `--space-3`                                       |
+| Motion            | `--dur-beat`, `--ease-standard`, `--ease-emphasis`                                      |
+
+`--accent-2` is part of the contract because `aurora-drift`, `grain-field`, and `beat-pulse-background` consume it. `--demo-bg` is not a primitive token. It is local to two demo harnesses and should remain outside reusable primitive styling.
+
+## One-off contract violations
+
+These theme-like tokens are each consumed by only one BUILT primitive and must be normalized later. They are not supplied by the theme packs.
+
+| Token            | Primitive      | Normalize toward                                          |
+| ---------------- | -------------- | --------------------------------------------------------- |
+| `--radius-lg`    | `OutlineDraw`  | `--radius`                                                |
+| `--shadow-panel` | `OutlineDraw`  | A local shadow composed from contract palette tokens      |
+| `--space-4`      | `pan-stations` | The nearest `--space-1`, `--space-2`, or `--space-3` step |
+| `--space-5`      | `pan-stations` | The nearest `--space-1`, `--space-2`, or `--space-3` step |
+| `--space-8`      | `OutlineDraw`  | The nearest `--space-1`, `--space-2`, or `--space-3` step |
+
+## Theme pack rules
+
+Each theme file contains exactly one `:root` block and defines all 18 tokens. Theme packs are the only files in this directory allowed to declare contract tokens globally. A staged theme block is injected at the end of the QA page head, re-targeted at :root, #root, [data-composition-id] with !important on every declaration: demos declare contract tokens at element scope (#root), which a plain :root injection can never override for descendants.
diff --git a/themes/bold.css b/themes/bold.css
new file mode 100644
index 0000000000..f7689acaeb
--- /dev/null
+++ b/themes/bold.css
@@ -0,0 +1,20 @@
+:root {
+  --bg: #080611;
+  --fg: #fff8ff;
+  --muted: #b6a9ca;
+  --surface: #1b1230;
+  --border: #493668;
+  --brand: #ff3d81;
+  --accent: #7c5cff;
+  --accent-2: #00d4ff;
+  --font-display: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
+  --font-body: Inter, "Helvetica Neue", Arial, sans-serif;
+  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
+  --radius: 1.4cqmin;
+  --space-1: 1.2cqmin;
+  --space-2: 2.6cqmin;
+  --space-3: 4.6cqmin;
+  --dur-beat: 0.32s;
+  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
+  --ease-emphasis: cubic-bezier(0.34, 1.56, 0.64, 1);
+}
diff --git a/themes/editorial.css b/themes/editorial.css
new file mode 100644
index 0000000000..a1d8c3204f
--- /dev/null
+++ b/themes/editorial.css
@@ -0,0 +1,20 @@
+:root {
+  --bg: #e9e1d2;
+  --fg: #202725;
+  --muted: #6c746f;
+  --surface: #f8f1e5;
+  --border: #c9bfad;
+  --brand: #246b63;
+  --accent: #31776f;
+  --accent-2: #8a6549;
+  --font-display: Georgia, "Times New Roman", serif;
+  --font-body: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
+  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
+  --radius: 0.9cqmin;
+  --space-1: 1.1cqmin;
+  --space-2: 2.2cqmin;
+  --space-3: 3.8cqmin;
+  --dur-beat: 0.48s;
+  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
+  --ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1);
+}
diff --git a/themes/neutral.css b/themes/neutral.css
new file mode 100644
index 0000000000..58751fdf3a
--- /dev/null
+++ b/themes/neutral.css
@@ -0,0 +1,20 @@
+:root {
+  --bg: #f3f4f6;
+  --fg: #111318;
+  --muted: #626873;
+  --surface: #fcfcfd;
+  --border: #d7dbe2;
+  --brand: #1d4ed8;
+  --accent: #0284c7;
+  --accent-2: #60a5fa;
+  --font-display: Inter, "Helvetica Neue", Arial, sans-serif;
+  --font-body: Inter, "Helvetica Neue", Arial, sans-serif;
+  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
+  --radius: 2.4cqmin;
+  --space-1: 1.2cqmin;
+  --space-2: 2.4cqmin;
+  --space-3: 4cqmin;
+  --dur-beat: 0.4s;
+  --ease-standard: cubic-bezier(0.215, 0.61, 0.355, 1);
+  --ease-emphasis: cubic-bezier(0.19, 1, 0.22, 1);
+}